/* ============================================
   YOUVANNA STARTER v2.6.0 - Design System
   Architecture : 1 seul fichier CSS, tout via variables
   Changer --color-primary change TOUT le site
   ============================================ */

/* --- Cal Sans (self-hosted, font-display: swap) --- */
@font-face {
    font-family: 'Cal Sans';
    src: url('../fonts/CalSans-SemiBold.woff2') format('woff2'),
         url('../fonts/CalSans-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* --- Avenir LT Std 45 Book (auto-hebergee, font-display: swap) ---
   Fichier fourni par la cliente le 2026-09-16, identique a celui de l'ancien
   site metronome-partners.com (FontsFree-Net-AvenirLTStd-Book.ttf).
   ATTENTION LICENCE : Avenir est une police commerciale Monotype et ce fichier
   provient de FontsFree.net, sans licence web connue. Risque signale a Lucile,
   qui a confirme vouloir l'utiliser. Si la cliente achete une licence, remplacer
   ce fichier par le fichier licencie, rien d'autre ne change.
   Converti en WOFF2 : 11 Ko au lieu de 27. */
@font-face {
    font-family: 'Avenir LT Std';
    src: url('../fonts/avenir-lt-std-book.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* --- Demi-gras et gras FABRIQUES a partir du Book (2026-09-24) ---
   Le fichier d'origine n'a qu'une graisse. Jusqu'ici le gras des titres etait
   soit synthetise par le navigateur - donc different sur chaque appareil, et
   absent sur l'iPhone de la cliente -, soit simule au liseré, trop leger.
   Ces deux fichiers sont de vrais fichiers de police : les contours de chaque
   glyphe ont ete epaissis (trace Skia d'epaisseur 34 u et 48 u sur 1000,
   fusionne avec la forme d'origine, chasse compensee de la meme valeur), puis
   le hinting d'origine - qui decrit les fûts d'avant - a ete vide.
   Rendu donc strictement identique sur iPhone, Mac, Windows et Android.
   Fabriques par /root/metronome/fonts/embolden.py, rejouable si la cliente
   achete un jour la vraie famille licenciee (auquel cas ces deux fichiers
   disparaissent au profit des vrais Medium et Heavy). */
@font-face {
    font-family: 'Avenir LT Std';
    src: url('../fonts/avenir-lt-std-semibold.woff2?v=2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Avenir LT Std';
    src: url('../fonts/avenir-lt-std-bold.woff2?v=2') format('woff2');
    /* 700 ET 800 : 29 regles de la feuille demandent 800 (titres de cartes,
       megamenu, resultats de recherche). Elles doivent rester sur le gras, pas
       basculer sur le tres gras ci-dessous. */
    font-weight: 700 800;
    font-style: normal;
    font-display: swap;
}
/* Tres gras (force 68), reserve aux grands titres : la cliente trouvait le
   H1 trop fin face a l'ancien site (2026-09-24). Sur l'ancien site ce titre
   n'est pas en Avenir du tout : Safari iOS, faute de fichier gras, abandonne
   la police et prend l'Arial gras du systeme. On retrouve donc cette epaisseur
   en restant, nous, en Avenir. Declare en 900 pour ne toucher aucune regle
   existante. */
@font-face {
    font-family: 'Avenir LT Std';
    src: url('../fonts/avenir-lt-std-heavy.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* --- DESIGN TOKENS (override per client) --- */
:root {
    /* Couleurs - Metronome Partners : teal #215B68 + cyan #44CBCF sur fond blanc */
    --color-primary: #215B68;
    --color-primary-rgb: 33, 91, 104;
    --color-primary-dark: #0F353E;
    --color-primary-light: rgba(var(--color-primary-rgb), .08);
    --color-secondary: #0F353E;
    --color-secondary-rgb: 15, 53, 62;
    --color-accent: #44CBCF;
    --color-accent-rgb: 68, 203, 207;
    --color-tertiary: #5CCCD4;
    --color-tertiary-rgb: 92, 204, 212;
    --color-tertiary-dark: #38A9B0;
    --color-text: #0F353E;
    --color-text-light: #475569;
    --color-text-muted: #64748b;
    --color-bg: #ffffff;
    --color-bg-alt: #f8fafc;
    --color-border: #e2e8f0;

    /* Couleurs additionnelles */
    --color-highlight: #44CBCF;
    --color-red: #ef4444;
    --color-turquoise: #5CCCD4;

    /* Etats form / alertes - utilises par CF7 et les messages flash */
    --color-error: #ef4444;
    --color-error-dark: #991b1b;
    --color-error-bg: #fef2f2;
    --color-success: #10b981;
    --color-success-dark: #065f46;
    --color-success-bg: #ecfdf5;

    /* Degrades reutilisables - teal > cyan (signature Metronome) */
    --gradient-brand: linear-gradient(135deg, #215B68 0%, #44CBCF 45%, #5CCCD4 100%);
    --gradient-brand-reverse: linear-gradient(135deg, #5CCCD4 0%, #44CBCF 55%, #215B68 100%);
    --gradient-brand-warm: linear-gradient(135deg, #215B68 0%, #44CBCF 100%);
    --gradient-brand-cool: linear-gradient(135deg, #44CBCF 0%, #5CCCD4 100%);
    --gradient-brand-soft: linear-gradient(135deg, rgba(33,91,104,.08) 0%, rgba(68,203,207,.06) 50%, rgba(92,204,212,.08) 100%);
    --gradient-brand-vivid: linear-gradient(120deg, #215B68 0%, #44CBCF 40%, #5CCCD4 100%);
    --gradient-text: linear-gradient(90deg, #215B68 0%, #44CBCF 50%, #5CCCD4 100%);
    /* Overlay signature Metronome : teal -> cyan */
    --gradient-hero-overlay: linear-gradient(135deg, rgba(33,91,104,.82) 0%, rgba(68,203,207,.70) 45%, rgba(92,204,212,.78) 100%);
    --gradient-hero-overlay-strong: linear-gradient(135deg, rgba(33,91,104,.90) 0%, rgba(68,203,207,.78) 45%, rgba(92,204,212,.86) 100%);

    /* Typo - Inter heading + Inter body */
    /* Titres en Avenir (demande de la cliente, 2026-09-16) : le fichier
       auto-heberge declare en tete de fichier. 'Avenir Next' et 'Avenir'
       (installees sur les appareils Apple) ne servent que le temps du
       chargement. */
    --font-heading: 'Avenir LT Std', 'Avenir Next', 'Avenir', -apple-system, 'Segoe UI', system-ui, sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

    /* Layout */
    --max-width: 1320px;
    --max-width-narrow: 860px;
    --max-width-wide: 1440px;
    --radius: 12px;
    --radius-sm: 8px;

    /* Ombres */
    --shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
    --shadow-md: 0 4px 6px rgba(0,0,0,.04), 0 10px 15px rgba(0,0,0,.06);
    --shadow-lg: 0 10px 25px rgba(0,0,0,.06), 0 20px 50px rgba(0,0,0,.08);

    /* Animation */
    --transition: .3s cubic-bezier(.4,0,.2,1);

    /* Header */
    --header-height: 72px;

    /* Premium design tokens */
    --color-dark: #0a0a0a;
    --color-dark-rgb: 10, 10, 10;
    --gradient-mesh: radial-gradient(at 40% 20%, rgba(33,91,104,.18) 0px, transparent 55%), radial-gradient(at 82% 0%, rgba(68,203,207,.14) 0px, transparent 50%), radial-gradient(at 10% 70%, rgba(92,204,212,.15) 0px, transparent 55%), radial-gradient(at 80% 90%, rgba(92,204,212,.1) 0px, transparent 50%);
    --gradient-mesh-hero: radial-gradient(at 20% 25%, rgba(33,91,104,.35) 0px, transparent 50%), radial-gradient(at 85% 15%, rgba(68,203,207,.28) 0px, transparent 55%), radial-gradient(at 50% 85%, rgba(92,204,212,.35) 0px, transparent 55%);
    --gradient-blob: conic-gradient(from 140deg at 50% 50%, #215B68 0%, #44CBCF 35%, #5CCCD4 70%, #215B68 100%);
    --noise-url: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
    --ease-premium: cubic-bezier(.22,1,.36,1);
}

/* ============================================
   RESET & BASE
   ============================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; scroll-padding-top: var(--header-height); overflow-x: hidden; }
[id] { scroll-margin-top: var(--header-height); }
body {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-text);
    background: var(--color-bg);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    /* clip et PAS hidden. Sur <body>, overflow-x: hidden calcule overflow-y: auto
       (une seule valeur non visible suffit a forcer l'autre), donc le body devient
       une boite de defilement. La page, elle, defile sur la viewport : tout
       position:sticky descendant du body colle alors par rapport a une boite qui
       ne defile jamais, c'est-a-dire ne colle pas du tout. Bug silencieux, il ne
       casse rien visuellement, l'element se contente de defiler normalement.
       overflow-x: clip coupe pareil mais ne cree aucune boite de defilement.
       Meme parade que .mp-home plus bas. Trouve le 2026-09-23 en posant les
       cartes empilees des pages offres ; le sommaire ancre .mp-faq--split etait
       mort de la meme facon depuis le depart. */
    overflow-x: clip;
    max-width: 100vw;
}
#main-content { flex: 1; }
img { max-width: 100%; height: auto; display: block; }

/* Skip link - accessibility */
.skip-link {
    position: absolute; top: -100%; left: 50%; transform: translateX(-50%);
    background: var(--color-primary); color: #fff; padding: 8px 24px;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    font-size: 14px; font-weight: 600; z-index: 10000;
    transition: top var(--transition);
}
.skip-link:focus { top: 0; color: #fff; }
a { color: var(--color-primary-dark); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--color-secondary); }
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.02em;
    color: var(--color-secondary);
}
h1 { font-size: clamp(2.2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.5rem); }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.5rem); font-weight: 700; }
h4 { font-size: 1.1rem; font-weight: 700; }
h5 { font-size: 1rem; font-weight: 700; }
h6 { font-size: 0.9rem; font-weight: 700; }

/* Colored highlight - mots surlignés dans les titres (style m5) */
.highlight {
    color: var(--color-primary);
    font-weight: inherit;
}
/* Hero h1 + CTA banner h2 stay fully white - highlight inherits color */
.hero-content h1 .highlight,
.page-hero .hero-content h1 .highlight,
.cta-banner .cta-content h2 .highlight,
.cta-content h2 .highlight { color: inherit; }

/* ============================================
   LAYOUT - Réutilisable partout
   ============================================ */
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }
.container-narrow { max-width: var(--max-width-narrow); }
.container-wide { max-width: 1480px; margin: 0 auto; padding: 0 24px; }
.section { padding: 96px 0; }
.section:nth-child(even) { background: var(--color-bg-alt); }
.grid { display: grid; gap: 32px; }
.grid-2 { grid-template-columns: 1fr 1fr; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); gap: 24px; }

/* ============================================
   BUTTONS - Tous basés sur --color-primary
   ============================================ */
.btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 14px 32px;
    font-size: 15px; font-weight: 600;
    border-radius: 100px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform .4s var(--ease-premium), opacity .4s var(--ease-premium), background-color .4s var(--ease-premium), border-color .4s var(--ease-premium), color .4s var(--ease-premium), box-shadow .4s var(--ease-premium);
    text-decoration: none;
    letter-spacing: -.01em;
}
.btn-sm { padding: 10px 20px; font-size: 14px; }
.btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.btn-primary { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.btn-primary:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); transform: translateY(-2px); box-shadow: var(--shadow-md); color: #fff; }
.btn-secondary { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.btn-secondary:hover { background: #fff; color: var(--color-secondary); transform: translateY(-2px); }
.btn-outline { background: transparent; color: var(--color-primary-dark); border-color: var(--color-primary-dark); }
.btn-outline:hover { background: var(--color-primary); color: #fff; transform: translateY(-2px); }
.btn-secondary-light { background: transparent; color: var(--color-secondary); border-color: var(--color-border); }
.btn-secondary-light:hover { background: var(--color-secondary); color: #fff; transform: translateY(-2px); }

/* ============================================
   HEADER / NAV
   ============================================ */
#site-header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    /* Opaque à 100 % : à .96 le contenu de la page se devinait derrière le
       header pendant le scroll (effet « texte fantôme » sur les gros titres),
       très visible sur mobile où le header couvre 72 px de contenu.
       Signalé par Lucile le 2026-09-02. */
    background: #fff;
    /* NB : PAS de backdrop-filter ici - il cree un nouveau containing block CSS
       qui casse le position:fixed des enfants (.nav-mobile-cta menu burger mobile).
       Le bug se manifeste par un bouton Contact mobile invisible au-dessus du viewport.
       Si tu veux du blur, applique-le sur un pseudo-element ::before en position absolute. */
}
/* Composited box-shadow via ::before (opacity transition - no layout, GPU) */
#site-header::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    box-shadow: var(--shadow);
    opacity: 0;
    transition: opacity .2s ease;
    will-change: opacity;
    z-index: -1;
}
#site-header.scrolled::before { opacity: 1; }
.nav-container {
    max-width: var(--max-width-wide); margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 32px; height: var(--header-height);
}
.nav-logo img, .nav-logo .custom-logo { height: 40px; max-height: 40px; max-width: 180px; width: auto; object-fit: contain; }
@media (max-width: 960px) {
    .nav-logo img, .nav-logo .custom-logo { height: 34px; max-height: 34px; max-width: 150px; }
}
.nav-logo .site-name { font-size: 1.4rem; font-weight: 800; color: var(--color-secondary); }
.nav-menu { display: flex; gap: 4px; list-style: none; }
.nav-menu li a {
    display: block; padding: 8px 16px;
    font-size: 14px; font-weight: 500;
    color: var(--color-text); border-radius: var(--radius-sm);
    transition: transform var(--transition), opacity var(--transition), background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
}
.nav-menu li a { position: relative; }
.nav-menu li a::after { content: ''; position: absolute; bottom: 2px; left: 16px; right: 16px; height: 2px; background: var(--color-primary); transform: scaleX(0); transition: transform var(--transition); transform-origin: center; }
.nav-menu li a:hover::after, .nav-menu li.current-menu-item a::after { transform: scaleX(1); }
.nav-menu li a:hover,
.nav-menu li.current-menu-item a { color: var(--color-primary); background: var(--color-primary-light); }
/* Dropdown sub-menu */
.nav-menu li { position: relative; }
.nav-menu li .sub-menu { position: absolute; top: 100%; left: 0; min-width: 240px; background: #fff; border-radius: var(--radius-md, 8px); box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: 8px 0; list-style: none; opacity: 0; visibility: hidden; transform: translateY(8px); transition: transform .2s ease, opacity .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease; z-index: 100; }
.nav-menu li:hover > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-menu li .sub-menu li a { padding: 10px 20px; font-size: 13px; white-space: nowrap; border-radius: 0; }
.nav-menu li .sub-menu li:not(.menu-item-has-children) a::after { display: none; }
.nav-menu li .sub-menu li a:hover { background: var(--color-primary-light, #f0f9ff); color: var(--color-primary); }
/* Chevron dropdown indicator */
.nav-menu li.menu-item-has-children > a { padding-right: 28px; } .nav-menu li.menu-item-has-children > a::after { content: ''; position: absolute; right: 10px; top: 50%; width: 5px; height: 5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-50%) rotate(45deg); background: none; left: auto; bottom: auto; }
.nav-cta { display: flex; align-items: center; gap: 16px; }
.nav-phone { font-size: 14px; font-weight: 600; color: var(--color-text); }
.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 10px; min-width: 44px; min-height: 44px; }
.nav-mobile-cta { display: none; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--color-secondary); margin: 5px 0; transition: transform var(--transition), opacity var(--transition), background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition); transform-origin: center; }
.nav-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.nav-toggle.active span:nth-child(2) { opacity: 0; }
.nav-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* ============================================
   HERO - Composant réutilisable (homepage + pages)
   ============================================ */
.hero, .page-hero {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    text-align: center;
    background-color: var(--color-secondary);
    margin-top: var(--header-height);
    overflow: hidden;
}
.hero-bg-img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    z-index: 0;
    /* Initial scale matches the JS parallax transform to avoid jump on first scroll */
    transform: translateY(0) scale(1.1);
    transform-origin: center center;
    will-change: transform;
    backface-visibility: hidden;
}
.hero-overlay {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg, rgba(var(--color-secondary-rgb),.55) 0%, rgba(var(--color-secondary-rgb),.75) 100%);
}
.hero-content { position: relative; z-index: 2; max-width: 800px; padding: 24px; }
.hero-content h1 { color: #fff; margin-bottom: 20px; text-shadow: 0 2px 12px rgba(0,0,0,.2); }
.hero-subtitle { color: rgba(255,255,255,.9); font-size: clamp(1rem, 2.5vw, 1.25rem); margin-bottom: 32px; line-height: 1.6; }
.hero-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ============================================
   CARDS - Composant réutilisable
   ============================================ */
.card {
    background: #fff; border-radius: var(--radius);
    overflow: hidden;
    transition: transform var(--transition), opacity var(--transition), background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
}
a.card-clickable:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.card-body h3 { margin-bottom: 8px; }
.card-body p { color: var(--color-text-light); font-size: 15px; }
.card-link { display: inline-block; margin-top: 12px; font-size: 14px; font-weight: 600; color: var(--color-primary); }
.card-link:hover { color: var(--color-primary-dark); }
.card-link:hover::after { transform: translateX(4px); }
.card-link::after { content: ''; display: inline-block; transition: transform var(--transition); }
.card-date { display: block; font-size: 13px; color: var(--color-text-light); margin-bottom: 8px; }

/* ============================================
   SECTION TITLES - Réutilisable
   ============================================ */
/* Section header - Framer-style badge + title with highlight */
.section-badge {
    display: inline-block;
    padding: 6px 18px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--color-primary);
    background: var(--color-primary-light);
    border: 1px solid rgba(var(--color-primary-rgb), .15);
    border-radius: 100px;
    margin-bottom: 16px;
}
.section-badge + .section-title { margin-top: 0; }
.section-header { text-align: center; }
.section-title { text-align: center; margin-bottom: 12px; }
/* NOTE : pas de <mark> dans les titres - rule #17 */
.section-subtitle { text-align: center; color: var(--color-text-light); max-width: 640px; margin: 0 auto 48px; font-size: 17px; }

/* ============================================
   ABOUT / TEXT+IMAGE - Même layout
   ============================================ */
.about-section .grid-2 { align-items: start; }
.text-image-section .grid-2 { align-items: center; }
.about-image, .ti-image { overflow: visible; position: relative; }
.about-image { display: flex; flex-direction: column; gap: 24px; }
.about-image img, .ti-image img {
    display: block;
    width: 100%;
    border-radius: inherit;
}
.about-image .stats-grid { margin-top: 0; }
.about-content h2, .ti-content h2 { margin-bottom: 16px; }
.about-content p, .about-content div, .ti-content p, .ti-content div { color: var(--color-text-light); margin-bottom: 24px; }
.text-image-section.reverse .ti-image { order: -1; }

/* ============================================
   STATS - Premium number cards
   ============================================ */
.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 32px; }
.stats-grid-wide { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-top: 0; gap: 24px; }
.stat {
    text-align: center;
    background: #fff;
    border-radius: 20px;
    padding: 36px 24px 32px;
    border: 1px solid rgba(var(--color-secondary-rgb), .06);
    box-shadow: 0 4px 24px rgba(0,0,0,.04);
    position: relative;
    overflow: hidden;
    transition: transform .45s var(--ease-premium, cubic-bezier(.22,1,.36,1)), opacity .45s var(--ease-premium, cubic-bezier(.22,1,.36,1)), background-color .45s var(--ease-premium, cubic-bezier(.22,1,.36,1)), border-color .45s var(--ease-premium, cubic-bezier(.22,1,.36,1)), color .45s var(--ease-premium, cubic-bezier(.22,1,.36,1)), box-shadow .45s var(--ease-premium, cubic-bezier(.22,1,.36,1));
}
.stat::before {
    content: '';
    position: absolute;
    top: 0; left: 50%; transform: translateX(-50%);
    width: 48px; height: 3px;
    background: var(--color-primary);
    border-radius: 0 0 3px 3px;
    transition: width .4s var(--ease-premium, ease);
}
.stat:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0,0,0,.08);
}
.stat:hover::before { width: 100%; left: 0; transform: none; }
.stat-number {
    display: block;
    font-family: var(--font-heading);
    font-size: clamp(2.4rem, 5vw, 3.4rem);
    font-weight: 800;
    line-height: 1;
    color: var(--color-secondary);
    letter-spacing: -.03em;
}
.stat-label {
    color: var(--color-text);
    opacity: .65;
    font-size: 14.5px;
    font-weight: 500;
    margin-top: 10px;
    line-height: 1.45;
}

/* --- Variant: primary background --- */
.numbers-primary { background: var(--color-secondary) !important; }
.numbers-primary .stat {
    background: rgba(255,255,255,.07);
    border-color: rgba(255,255,255,.08);
    box-shadow: none;
    backdrop-filter: blur(8px);
}
.numbers-primary .stat::before { background: var(--color-primary); }
.numbers-primary .stat:hover { background: rgba(255,255,255,.12); box-shadow: 0 8px 32px rgba(0,0,0,.2); }
.numbers-primary .stat-number { color: #fff; }
.numbers-primary .stat-label { color: rgba(255,255,255,.65); }
.numbers-primary .section-title { color: #fff; }
.numbers-primary .section-subtitle { color: rgba(255,255,255,.7); }
.numbers-primary .section-badge { color: #fff; background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.15); }

/* --- Variant: dark background --- */
.numbers-dark { background: var(--color-secondary) !important; }
.numbers-dark .stat {
    background: rgba(255,255,255,.05);
    border-color: rgba(255,255,255,.06);
    box-shadow: none;
    backdrop-filter: blur(8px);
}
.numbers-dark .stat::before { background: var(--color-primary); }
.numbers-dark .stat:hover { background: rgba(255,255,255,.1); box-shadow: 0 8px 32px rgba(0,0,0,.2); }
.numbers-dark .stat-number { color: var(--color-primary); }
.numbers-dark .stat-label { color: rgba(255,255,255,.6); }
.numbers-dark .section-title { color: #fff; }
.numbers-dark .section-subtitle { color: rgba(255,255,255,.7); }
.numbers-dark .section-badge { color: rgba(255,255,255,.9); background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.15); }

/* ============================================
   TESTIMONIALS - Basé sur --color-primary
   ============================================ */
.testimonial-card {
    background: #fff;
    box-shadow: var(--shadow);
    transition: transform var(--transition), opacity var(--transition), background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
}
.testimonial-card:hover { box-shadow: var(--shadow-lg); }
.testimonial-stars { color: var(--color-accent); font-size: 18px; margin-bottom: 16px; }
.testimonial-card blockquote { font-style: italic; color: var(--color-text-light); margin-bottom: 20px; line-height: 1.7; }
.testimonial-author { display: flex; align-items: center; gap: 12px; }
.testimonial-author img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.testimonial-author strong { display: block; color: var(--color-secondary); }
.testimonial-author span { font-size: 13px; color: var(--color-text-light); }

/* ============================================
   FAQ ACCORDION
   ============================================ */
.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-item {
    background: #fff; border-radius: var(--radius);
    border: 1px solid var(--color-border);
    overflow: hidden;
    transition: transform var(--transition), opacity var(--transition), background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
}
.faq-item[open] { box-shadow: var(--shadow-md); border-color: var(--color-primary); }
.faq-item summary {
    padding: 20px 24px;
    font-weight: 600; font-size: 16px;
    cursor: pointer;
    list-style: none;
    display: flex; align-items: center; justify-content: space-between;
    transition: color var(--transition);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; font-size: 20px; color: var(--color-primary); transition: transform var(--transition); }
.faq-item[open] summary::after { content: '−'; }
.faq-item[open] summary { color: var(--color-primary); }
.faq-item summary:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; border-radius: var(--radius); }
.faq-answer { padding: 0 24px 20px; color: var(--color-text-light); line-height: 1.7; }

/* ============================================
   GALLERY
   ============================================ */
.gallery-item {
    border-radius: var(--radius); overflow: hidden;
    transition: transform var(--transition), opacity var(--transition), background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
}
.gallery-item:hover { box-shadow: var(--shadow-lg); }
.gallery-item img { width: 100%; height: 250px; object-fit: cover; transition: transform .5s cubic-bezier(.16,1,.3,1); }
.gallery-item:hover img { transform: scale(1.05); }

/* ============================================
   CTA BANNER - Overlay basé sur --color-primary
   ============================================ */
.cta-banner {
    position: relative; padding: 80px 24px;
    text-align: center;
    background-color: var(--color-secondary);
    overflow: hidden;
}
.cta-overlay {
    position: absolute; inset: 0; z-index: 1;
    background:
        radial-gradient(ellipse 80% 60% at 18% 12%, rgba(255,255,255,.09) 0%, transparent 60%),
        linear-gradient(120deg,
            rgba(var(--color-primary-rgb), .92) 0%,
            rgba(var(--color-primary-rgb), .90) 38%,
            rgba(var(--color-secondary-rgb), .90) 72%,
            rgba(var(--color-secondary-rgb), .88) 100%);
}
.cta-content { position: relative; z-index: 2; max-width: 640px; margin: 0 auto; }
.cta-content h2 { color: #fff; margin-bottom: 16px; }
.cta-content p,
.cta-content .cta-text { color: #fff; margin-bottom: 48px; font-size: 17px; line-height: 1.7; }
.cta-content .cta-text p { margin-bottom: 0; }
.cta-banner .btn-primary { background: #fff; color: var(--color-primary); }
.cta-banner .btn-primary:hover { background: var(--color-bg-alt); }

/* ============================================
   CONTACT FORM (CF7) - Basé sur --color-primary
   ============================================ */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea,
.wpcf7 select {
    width: 100%; padding: 14px 18px;
    font-size: 15px; font-family: var(--font-body);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    transition: border-color var(--transition);
    background: #fff;
}
.wpcf7 input:focus, .wpcf7 textarea:focus, .wpcf7 select:focus {
    outline: none; border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}
.wpcf7 textarea { min-height: 150px; resize: vertical; }
.wpcf7 input[type="submit"] {
    background: var(--color-primary); color: #fff;
    padding: 14px 32px; border: none;
    border-radius: var(--radius); font-size: 15px; font-weight: 600;
    cursor: pointer; transition: transform var(--transition), opacity var(--transition), background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
}
.wpcf7 input[type="submit"]:hover { background: var(--color-primary-dark); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; }
.contact-info h3 { margin-bottom: 24px; }
.contact-info-item { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 20px; }
.contact-info-item .icon {
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}

/* Font Awesome icons - inherit theme colors */
.card-icon i, .contact-info-item .icon i {
    font-size: inherit;
    color: inherit;
}
/* ============================================
   FOOTER - Basé sur --color-secondary
   ============================================ */
#site-footer { background: var(--color-secondary); color: rgba(255,255,255,.7); }
.footer-container {
    max-width: var(--max-width); margin: 0 auto; padding: 0 24px;
    display: grid; grid-template-columns: 1.2fr 1fr;
    gap: 64px;
}
.footer-links {
    display: grid; grid-template-columns: 1fr 1fr; gap: 48px;
}
.footer-brand .footer-logo img,
.footer-brand .footer-logo .custom-logo { height: 48px; width: auto; max-width: 220px; object-fit: contain; margin-bottom: 16px; }
/* Si le logo est monochrome (noir), l'inverser pour fond sombre. Marquer le logo via theme_mod yv_footer_invert_logo */
.footer-brand.logo-invert .footer-logo img,
.footer-brand.logo-invert .footer-logo .custom-logo { filter: brightness(0) invert(1); }
.footer-brand .footer-logo span { font-size: 1.3rem; font-weight: 700; color: #fff; }
.footer-description { font-size: 14px; line-height: 1.7; }
.footer-social { display: flex; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.footer-social a { font-size: 13px; color: rgba(255,255,255,.5); padding: 4px 8px; border: 1px solid rgba(255,255,255,.15); border-radius: var(--radius-sm); }
.footer-social a:hover { color: #fff; border-color: var(--color-primary); transform: translateY(-2px); }
.footer-social a { transition: transform var(--transition), opacity var(--transition), background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition); }
#site-footer h3 { color: rgba(255,255,255,.4); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 20px; }
.footer-menu { list-style: none; }
.footer-menu li a { display: block; padding: 4px 0; color: rgba(255,255,255,.7); font-size: 14px; }
.footer-menu li a:hover { color: #fff; }
.footer-contact a, .footer-contact p { display: block; margin-bottom: 8px; color: rgba(255,255,255,.7); font-size: 14px; }
.footer-contact a:hover { color: #fff; }
.footer-bottom {
    max-width: var(--max-width); margin: 48px auto 0; padding: 24px;
    border-top: 1px solid rgba(255,255,255,.08);
    display: flex; justify-content: space-between; align-items: center;
    font-size: 13px;
}
.footer-bottom a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; }

/* ============================================
   BLOG - Article single (see enhanced styles below)
   ============================================ */
.pagination { text-align: center; margin-top: 48px; }
.pagination .nav-links { display: flex; justify-content: center; gap: 8px; }
.pagination a, .pagination span { padding: 8px 16px; border-radius: var(--radius-sm); border: 1px solid var(--color-border); font-size: 14px; }
.pagination a:hover { background: var(--color-bg-alt); border-color: var(--color-primary); color: var(--color-primary); }
.pagination .current { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

/* ============================================
   PAGE CONTENT (WP editor)
   ============================================ */
.page-content-section p { margin-bottom: 16px; color: var(--color-text-light); }
.page-content-section h2 { margin: 32px 0 16px; }
.page-content-section ul, .page-content-section ol { margin: 16px 0; padding-left: 24px; }
.page-content-section li { margin-bottom: 8px; color: var(--color-text-light); }

/* ============================================
   BLOG CARDS - Listing articles
   ============================================ */
.blog-card-link { display: block; color: inherit; text-decoration: none; }
.blog-card-link:hover { color: inherit; }
.blog-card-placeholder { height: 240px; display: flex; align-items: center; justify-content: center; background: var(--color-bg-alt, #f8fafc); color: var(--color-text-light); }
/* Defensive: blog-card images use contain on a soft neutral background so small/banner source images are never stretched. Proper 16:10 images still look great since contain fills the ratio when source matches. */
.blog-card img {
    object-fit: contain !important;
    background: linear-gradient(135deg, #f5f7fa 0%, #eaf0f4 100%);
    padding: 8px;
}
.blog-card-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; font-size: 13px; color: var(--color-text-light); }
.blog-card-meta time { display: inline; }
.blog-card-cat { background: var(--color-primary); color: #fff; padding: 2px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }
.blog-card .card-body h3 { font-size: 18px; margin-bottom: 8px; line-height: 1.4; }
.blog-card .card-body p { font-size: 14px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Article single - meilleur design */
.article-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 32px; font-size: 14px; color: var(--color-text-light); }
.article-cat { background: var(--color-primary); color: #fff; padding: 3px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }
.article-content { font-size: 17px; line-height: 1.8; color: var(--color-text); }
.article-content p { margin-bottom: 20px; }
.article-content h2 { margin: 40px 0 16px; font-size: 28px; }
.article-content h3 { margin: 32px 0 12px; font-size: 22px; }
.article-content img { border-radius: var(--radius); margin: 24px 0; max-width: 100%; height: auto; }
.article-content blockquote { border-left: 4px solid var(--color-primary); padding: 16px 24px; margin: 24px 0; background: var(--color-bg-alt, #f8fafc); border-radius: 0 var(--radius) var(--radius) 0; font-style: italic; color: var(--color-text-light); }
.article-content ul, .article-content ol { margin: 16px 0; padding-left: 24px; }
.article-content li { margin-bottom: 8px; }
.article-nav { display: flex; justify-content: space-between; gap: 16px; margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--color-border); flex-wrap: wrap; }
.article-cta { margin-top: 48px; padding: 32px; background: var(--color-bg-alt); border-radius: var(--radius); border-left: 4px solid var(--color-primary); text-align: center; }
.article-cta p { margin-bottom: 12px; color: var(--color-text-light); }
.article-cta p strong { color: var(--color-text); font-size: 18px; }
.article-cta .btn { margin-top: 8px; }

/* ============================================
   ANIMATIONS - Scroll reveal + stagger + parallax
   ============================================ */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1);
    will-change: opacity, transform;
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* Stagger children (cards, stats, faq items) - Framer-style fade-in-up */
.reveal .card,
.reveal .faq-item,
.reveal .stat,
.reveal .testimonial-card,
.reveal .team-member,
.reveal .card-minimal,
.reveal .card-steps {
    opacity: 0;
    transform: translateY(36px);
    transition: opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1);
    will-change: opacity, transform;
}
.reveal.visible .card,
.reveal.visible .faq-item,
.reveal.visible .stat,
.reveal.visible .testimonial-card,
.reveal.visible .team-member,
.reveal.visible .card-minimal,
.reveal.visible .card-steps {
    opacity: 1;
    transform: translateY(0);
}

/* Subtle content parallax on images inside about / text+image sections */
.about-image img,
.ti-image img,
.text-image-section img {
    transition: transform 1.2s cubic-bezier(.22,1,.36,1);
    will-change: transform;
}
.reveal .about-image img,
.reveal .ti-image img,
.reveal.text-image-section img {
    transform: scale(1.06);
}
.reveal.visible .about-image img,
.reveal.visible .ti-image img,
.reveal.visible.text-image-section img {
    transform: scale(1);
}

/* Counter animation - numbers start invisible until JS kicks in */
.stat-number {
    transition: none;
}

/* Parallax - prevent background clipping */
.hero, .page-hero, .cta-banner {
    background-attachment: scroll;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reveal, .reveal .card, .reveal .faq-item, .reveal .stat, .reveal .testimonial-card, .reveal .team-member,
    .reveal .card-minimal, .reveal .card-steps,
    .reveal .about-image img, .reveal .ti-image img, .reveal.text-image-section img,
    .reveal .image-stat-badge, .reveal.visible .image-stat-badge {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }
    .marquee-track { animation: none !important; }
    .stat-number { transition: none !important; }
    .image-frame::before { transform: translate(10px, 10px) !important; transition: none !important; }
    .image-frame.is-right::before { transform: translate(-10px, 10px) !important; }
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1280px) {
    .grid-5 { grid-template-columns: repeat(3, 1fr); }
    .services-grid-tall .card img { height: 170px; }
}
@media (max-width: 960px) {
    .grid-2 { grid-template-columns: 1fr; }
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .grid-5 { grid-template-columns: repeat(2, 1fr); }
    .services-section { padding: 64px 0; }
    .services-section .section-subtitle { margin-bottom: 36px; }
    .services-grid-tall .card img { height: 160px; }
    .nav-menu, .nav-cta { display: none; }
    .nav-toggle { display: block; }
    .nav-menu.active {
        display: flex; flex-direction: column;
        position: absolute; top: var(--header-height); left: 0; right: 0;
        background: #fff; border-bottom: 1px solid var(--color-border);
        padding: 16px; box-shadow: var(--shadow-lg); z-index: 999;
        max-height: calc(100vh - var(--header-height)); overflow-y: auto;
    }
    .nav-cta { display: none !important; }
    .nav-mobile-cta {
        display: none; flex-direction: column; gap: 12px;
        padding: 16px; border-top: 1px solid var(--color-border);
    }
    .nav-menu.active ~ .nav-mobile-cta {
        display: flex;
    }
    /* Mobile sub-menus : inline au lieu d'absolute/hover */
    .nav-menu.active li { width: 100%; }
    .nav-menu.active > li > a { min-height: 48px; padding: 12px 16px; }
    .nav-menu.active li .sub-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        background: var(--color-bg-alt);
        border-radius: var(--radius-sm);
        margin: 4px 0 8px;
        padding: 8px 0;
        display: none;
    }
    .nav-menu.active li.submenu-open > .sub-menu { display: block; }
    .nav-menu.active li .sub-menu .sub-menu { margin-left: 16px; }
    .nav-menu.active li .sub-menu li a { min-height: 44px; padding: 10px 20px; }
    .nav-menu.active li.menu-item-has-children > a::after {
        transition: transform .2s ease;
    }
    .nav-menu.active li.submenu-open.menu-item-has-children > a::after {
        transform: translateY(-50%) rotate(-135deg);
    }
    .section { padding: 64px 0; }
    .hero { min-height: 70vh; }
    .text-image-section .grid-2 { gap: 32px; }
}
@media (max-width: 768px) {
    .grid-2, .grid-3, .grid-4, .grid-5 { grid-template-columns: 1fr; }
    .services-grid-tall .card img { height: 180px; }
    .card-icon-badge { width: 56px; height: 56px; font-size: 1.4rem; }
    .contact-grid { grid-template-columns: 1fr; }
    .footer-container { grid-template-columns: 1fr; gap: 32px; }
    .footer-links { gap: 24px; }
    .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
    .about-section .grid-2 { gap: 24px; }
    .gallery-item img { height: 200px; }
    .section { padding: 56px 0; }
    .stat-number { font-size: 2.2rem; }
    .stat { padding: 20px 16px; }
    .cta-banner { padding: 64px 24px; }
    .stats-grid-wide { grid-template-columns: 1fr 1fr; }
    .testimonial-card { padding: 24px; }
    .marquee-track .testimonial-card { min-width: 280px; max-width: 320px; }
    .marquee-track { gap: 16px; }
    .back-to-top { bottom: 20px; right: 20px; width: 40px; height: 40px; }
    .page-hero {
        aspect-ratio: auto !important;
        min-height: 208px;
        padding: 45px 0 38px;
        width: 100%;
        max-width: 100vw;
    }
    .page-hero .hero-content { padding: 16px 20px; max-width: 100%; }
    .page-hero .hero-content h1 { font-size: clamp(1.5rem, 6vw, 2rem); line-height: 1.25; word-wrap: break-word; }
    .page-hero .hero-subtitle { font-size: 15px; line-height: 1.55; }
    .hero { min-height: 60vh; width: 100%; max-width: 100vw; }
    .hero-content { padding: 16px 20px; max-width: 100%; }
    .hero-bg-img { width: 100%; max-width: 100%; }
    .article-nav { flex-direction: column; gap: 12px; }
    .article-nav .btn { width: 100%; justify-content: center; }
    .article-cta { padding: 24px 20px; }
    .contact-info-item { align-items: center; }
}

/* ============================================
   DESIGN UPGRADE - Premium touches
   ============================================ */

/* Smooth gradient accent line under header */
#site-header { border-bottom: none; }
#site-header::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-accent), var(--color-primary));
    opacity: .7;
}

/* Hero improvements - bigger impact */
.hero { min-height: 85vh; }
.hero-content { max-width: 880px; }
.hero-content h1 { font-size: clamp(2.4rem, 5.5vw, 3.8rem); letter-spacing: -.02em; }
.hero-subtitle { font-size: clamp(1.05rem, 2.5vw, 1.2rem); max-width: 820px; margin-left: auto; margin-right: auto; }
.hero-buttons .btn-primary { font-size: 16px; padding: 16px 36px; }
.hero-buttons .btn-secondary { font-size: 16px; padding: 16px 36px; }

/* Section spacing improvements */
.section-title { font-size: clamp(1.8rem, 4vw, 2.6rem); letter-spacing: -.01em; margin-bottom: 16px; }
.section-subtitle { font-size: 18px; line-height: 1.7; }

/* Cards - more polished */
.card { border: 1px solid var(--color-border); box-shadow: none; }
a.card-clickable:hover { box-shadow: var(--shadow-lg); border-color: transparent; }
.card img { height: 240px; object-fit: cover; }
.card-body { padding: 28px; }
.card-body h3 { font-size: 1.2rem; margin-bottom: 12px; }
.card-body p { font-size: 15px; line-height: 1.7; }

/* Card icon - fallback when no image (rendered at top of card) */
.card > .card-icon {
    width: 56px; height: 56px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem;
    margin: 28px 0 0 28px;
    color: #fff;
}

/* Card icon badge - rounded square, overlapping image/body boundary */
.card-icon-badge {
    width: 52px; height: 52px;
    background: var(--color-primary);
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem;
    color: #fff;
    margin: 0 0 18px;
    box-shadow: 0 10px 24px -10px rgba(15,23,42,.25);
}
.card-icon-badge i { line-height: 1; }
/* Emoji / glyphe texte : bien visible et centré sur fond uni (charte icônes Youvanna). */
.yv-icon-glyph {
    line-height: 1;
    font-size: 1.5rem;
    font-style: normal;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Services section - compact portrait cards */
.services-section { padding: 96px 0; }
.services-section .section-title { margin-bottom: 14px; }
.services-section .section-subtitle { max-width: 760px; margin: 0 auto 56px; }

.services-grid-tall .card {
    position: relative;
    display: flex;
    flex-direction: column;
    border: none;
    border-radius: 18px;
    overflow: visible;
    background: #fff;
    box-shadow: 0 4px 28px -10px rgba(15,23,42,.12);
    transition: box-shadow var(--transition), transform var(--transition);
}
.services-grid-tall a.card-clickable:hover {
    box-shadow: 0 18px 48px -18px rgba(15,23,42,.22);
    border-color: transparent;
    transform: translateY(-4px);
}
.services-grid-tall .card img {
    width: 100%;
    height: 196px;
    object-fit: cover;
    border-radius: 18px 18px 0 0;
    display: block;
}
.services-grid-tall .card-body {
    position: relative;
    padding: 32px 22px 22px;
    display: flex;
    flex-direction: column;
    flex: 1;
    text-align: left;
}
.services-grid-tall .card-body .card-icon-badge {
    position: absolute;
    top: -22px;
    left: 22px;
    margin: 0;
    width: 46px;
    height: 46px;
    font-size: 1.15rem;
    background: var(--color-primary);
    color: #fff;
}
.services-grid-tall .card-body h3 {
    font-size: 1.05rem;
    line-height: 1.3;
    margin: 0 0 8px;
    letter-spacing: -.01em;
    color: var(--color-text, #0f172a);
}
.services-grid-tall .card-body .card-text,
.services-grid-tall .card-body p {
    font-size: 14px;
    line-height: 1.55;
    color: var(--color-text-muted, #5b6472);
    margin: 0 0 10px;
}
.services-grid-tall .card-link {
    margin-top: auto;
    font-weight: 600;
    font-size: 14px;
    color: var(--color-primary);
}

/* ============================================
   CARDS VARIANTS - mises en page alternatives
   ============================================ */

/* Shared: remove default .card border on all variants */
.cards-layout-featured .card,
.cards-layout-horizontal .card,
.cards-layout-steps .card,
.cards-layout-minimal .card { border: none; }

/* ---- Variant: featured ---- */
/* 1 big feature card (spans 2 cols + 2 rows) + smaller cards auto-placing around */
.cards-layout-featured {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.cards-layout-featured .card {
    border-radius: 18px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 4px 28px -10px rgba(15,23,42,.12);
    display: flex; flex-direction: column;
    transition: box-shadow var(--transition), transform var(--transition);
}
.cards-layout-featured a.card-clickable:hover {
    box-shadow: 0 18px 48px -18px rgba(15,23,42,.22);
    transform: translateY(-3px);
}
.cards-layout-featured .card img {
    width: 100%; height: 220px; object-fit: cover; display: block;
}
.cards-layout-featured .card-body {
    padding: 24px 26px 28px;
    display: flex; flex-direction: column; flex: 1;
}
.cards-layout-featured .card-body h3 {
    font-size: 1.15rem; margin: 0 0 10px; line-height: 1.3;
}
.cards-layout-featured .card-body .card-text,
.cards-layout-featured .card-body p {
    font-size: 14.5px; line-height: 1.65; color: var(--color-text-muted, #5b6472); margin: 0 0 16px;
}
.cards-layout-featured .card-link {
    margin-top: auto; font-weight: 600; font-size: 14px; color: var(--color-primary);
}
.cards-layout-featured .card:first-child { grid-column: span 2; grid-row: span 2; }
.cards-layout-featured .card:first-child img { height: 420px; }
.cards-layout-featured .card:first-child .card-body { padding: 32px 36px 36px; }
.cards-layout-featured .card:first-child .card-body h3 { font-size: 1.6rem; margin-bottom: 14px; }
.cards-layout-featured .card:first-child .card-body .card-text,
.cards-layout-featured .card:first-child .card-body p { font-size: 16px; }

/* ---- Variant: horizontal ---- */
/* Vertical stack of horizontal list-item cards: image left, text right */
.cards-layout-horizontal {
    display: flex; flex-direction: column; gap: 24px;
    max-width: 1040px; margin: 0 auto;
}
.cards-layout-horizontal .card {
    display: grid;
    grid-template-columns: 320px 1fr;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 24px -10px rgba(15,23,42,.1);
    transition: box-shadow var(--transition), transform var(--transition);
}
.cards-layout-horizontal a.card-clickable:hover {
    box-shadow: 0 16px 40px -16px rgba(15,23,42,.2);
    transform: translateX(4px);
}
.cards-layout-horizontal .card img {
    width: 100%; height: 100%; min-height: 200px; object-fit: cover; border-radius: 0;
}
.cards-layout-horizontal .card-body {
    padding: 28px 32px;
    display: flex; flex-direction: column; justify-content: center; flex: 1;
}
.cards-layout-horizontal .card-body h3 {
    font-size: 1.3rem; margin: 0 0 10px;
}
.cards-layout-horizontal .card-body .card-text,
.cards-layout-horizontal .card-body p {
    font-size: 15px; line-height: 1.7; color: var(--color-text-muted, #5b6472); margin: 0 0 14px;
}
.cards-layout-horizontal .card-link {
    font-weight: 600; font-size: 14px; color: var(--color-primary);
}

/* ---- Variant: steps ---- */
/* Horizontal row of numbered step cards with big number in corner */
.cards-layout-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
}
.cards-layout-steps .card-steps {
    position: relative;
    padding: 48px 28px 32px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 24px -10px rgba(15,23,42,.08);
    transition: box-shadow var(--transition), transform var(--transition);
}
.cards-layout-steps a.card-clickable.card-steps:hover {
    box-shadow: 0 16px 40px -16px rgba(15,23,42,.18);
    transform: translateY(-4px);
}
.cards-layout-steps .card-number {
    position: absolute;
    top: 18px; right: 22px;
    font-size: 2.8rem;
    font-weight: 800;
    line-height: 1;
    color: var(--color-primary);
    opacity: .25;
    letter-spacing: -.02em;
}
.cards-layout-steps .card-body { padding: 0; text-align: left; }
.cards-layout-steps .card-body h3 {
    font-size: 1.15rem; margin: 0 0 10px; line-height: 1.35;
}
.cards-layout-steps .card-body .card-text,
.cards-layout-steps .card-body p {
    font-size: 14.5px; line-height: 1.65; color: var(--color-text-muted, #5b6472); margin: 0 0 14px;
}
.cards-layout-steps .card-link {
    font-weight: 600; font-size: 14px; color: var(--color-primary);
}

/* ---- Variant: minimal ---- */
/* No image, large numbers, minimal text - for "Reasons to choose" type sections */
.cards-layout-minimal {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(440px, 1fr));
    gap: 44px 40px;
    max-width: 1160px; margin: 0 auto;
}
.cards-layout-minimal .card-minimal {
    position: relative;
    padding: 28px 28px 32px 96px;
    background: transparent;
    box-shadow: none;
    border-radius: 14px;
    transition: background 0.5s ease;
}
.cards-layout-minimal .card-minimal::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.045), rgba(var(--color-primary-rgb), 0) 65%);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    z-index: 0;
}
.cards-layout-minimal .card-minimal:hover::before {
    opacity: 1;
}
.cards-layout-minimal .card-minimal::after {
    content: '';
    position: absolute;
    left: 96px; bottom: 18px;
    width: 40px; height: 2px;
    background: var(--color-primary);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 1;
}
.cards-layout-minimal .card-minimal:hover::after {
    transform: scaleX(1);
}
.cards-layout-minimal .card-number {
    position: absolute;
    top: 22px; left: 12px;
    font-size: 3.4rem;
    font-weight: 800;
    line-height: 1;
    background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -.03em;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 1;
}
.cards-layout-minimal .card-minimal:hover .card-number {
    transform: translateY(-3px) scale(1.05);
}
.cards-layout-minimal .card-body { padding: 0; text-align: left; position: relative; z-index: 1; }
.cards-layout-minimal .card-body h3 {
    font-size: 1.25rem; margin: 0 0 12px; line-height: 1.3;
    transition: color 0.4s ease;
}
.cards-layout-minimal .card-minimal:hover .card-body h3 {
    color: var(--color-primary);
}
.cards-layout-minimal .card-body .card-text,
.cards-layout-minimal .card-body p {
    font-size: 15px; line-height: 1.75; color: var(--color-text-muted, #5b6472); margin: 0;
}
.cards-layout-minimal .card-link { display: none; }

/* Responsive for variants */
@media (max-width: 1100px) {
    .cards-layout-featured { grid-template-columns: repeat(2, 1fr); }
    .cards-layout-featured .card:first-child { grid-column: span 2; grid-row: auto; }
    .cards-layout-featured .card:first-child img { height: 320px; }
}
@media (max-width: 768px) {
    .cards-layout-featured { grid-template-columns: 1fr; }
    .cards-layout-featured .card:first-child { grid-column: auto; }
    .cards-layout-featured .card:first-child img { height: 240px; }
    .cards-layout-featured .card:first-child .card-body h3 { font-size: 1.3rem; }
    .cards-layout-horizontal .card {
        grid-template-columns: 1fr;
    }
    .cards-layout-horizontal .card img { height: 220px; min-height: auto; }
    .cards-layout-horizontal a.card-clickable:hover { transform: none; }
    .cards-layout-minimal { gap: 32px; }
    .cards-layout-minimal .card-minimal { padding-left: 70px; }
    .cards-layout-minimal .card-number { font-size: 2.6rem; }
}

/* About / Text+Image - upgraded styling */
.about-image, .ti-image { border-radius: 16px; position: relative; }
.about-image img, .ti-image img {
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,.12);
    width: 100%;
}
.about-content h2, .ti-content h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
.about-content p, .ti-content p { font-size: 16px; line-height: 1.8; }

/* ============================================
   IMAGE FRAME + FLOATING STAT BADGES - Framer style
   ============================================ */
.image-frame {
    position: relative;
    display: block;
    width: calc(100% - 22px);
    max-width: calc(100% - 22px);
    margin: 0 22px 26px 0;
    border-radius: 18px;
    overflow: visible;
}
.image-frame::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 18px;
    border: 2px solid rgba(var(--color-accent-rgb), .4);
    pointer-events: none;
    z-index: 0;
    transform: translate(14px, 14px);
    transition: transform .7s cubic-bezier(.22,1,.36,1), border-color .4s ease;
}
.image-frame:hover::before {
    transform: translate(8px, 8px);
    border-color: rgba(var(--color-primary-rgb), .55);
}
.image-frame > img,
.image-frame picture > img {
    position: relative;
    z-index: 1;
    border-radius: 18px;
    width: 100%;
    display: block;
}
/* When image is in the right column of a grid: flip offset to the left so
   the decorative border stays in the gutter, not on top of the text. */
.image-frame.is-right {
    margin: 0 0 26px 22px;
}
.image-frame.is-right::before {
    transform: translate(-14px, 14px);
}
.image-frame.is-right:hover::before {
    transform: translate(-8px, 8px);
}

/* Floating stat badge overlay */
.image-stat-badge {
    position: absolute;
    bottom: -22px;
    right: -18px;
    background: #fff;
    border-radius: 14px;
    padding: 14px 20px;
    box-shadow: 0 18px 40px -14px rgba(15,23,42,.25), 0 6px 16px -8px rgba(15,23,42,.15);
    display: flex;
    align-items: center;
    gap: 14px;
    z-index: 2;
    min-width: 170px;
    animation: yvFloatBob 4.2s ease-in-out infinite;
    transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s ease;
}
.image-stat-badge:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 48px -14px rgba(15,23,42,.30), 0 10px 20px -8px rgba(15,23,42,.18);
}
.image-stat-badge.is-top-left    { top: -22px; left: -18px; bottom: auto; right: auto; animation-delay: -2s; }
.image-stat-badge.is-top-right   { top: -22px; right: -18px; bottom: auto; left: auto; animation-delay: -1s; }
.image-stat-badge.is-bottom-left { bottom: -22px; left: -18px; top: auto; right: auto; animation-delay: -3s; }
.image-stat-badge.is-bottom-right{ bottom: -22px; right: -18px; top: auto; left: auto; }

.image-stat-badge__icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.1rem;
    background: var(--gradient-brand);
    flex-shrink: 0;
    box-shadow: 0 6px 14px -6px rgba(var(--color-primary-rgb), .5);
}
.image-stat-badge__text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}
.image-stat-badge__number {
    font-size: 1.7rem;
    font-weight: 800;
    letter-spacing: -.02em;
    background: var(--gradient-brand);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    white-space: nowrap;
}
.image-stat-badge__label {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-light, #64748b);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-top: 4px;
    white-space: nowrap;
}

@keyframes yvFloatBob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}

/* Entry animation: badge comes in after image reveals */
.reveal .image-stat-badge { opacity: 0; transform: translateY(20px) scale(.9); transition: opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1); transition-delay: .5s; animation: none; }
.reveal.visible .image-stat-badge { opacity: 1; transform: translateY(0) scale(1); animation: yvFloatBob 4.2s ease-in-out infinite 1.3s; }

@media (max-width: 768px) {
    .image-frame, .image-frame.is-right {
        width: 100%;
        max-width: 100%;
        margin: 0 0 24px 0;
    }
    .image-frame::before { transform: translate(10px, 10px); }
    .image-frame.is-right::before { transform: translate(-10px, 10px); }
    .image-stat-badge {
        right: 8px !important;
        left: auto !important;
        top: auto !important;
        bottom: 8px !important;
        min-width: 140px;
        padding: 10px 14px;
    }
    .image-stat-badge__number { font-size: 1.35rem; }
    .image-stat-badge__icon { width: 36px; height: 36px; font-size: 1rem; border-radius: 10px; }
    .image-stat-badge__label { font-size: 10px; }
}

/* Stats - sizing handled by base .stat rules above */

/* Testimonials - premium card style with gradient accent */
.testimonial-card {
    border-left: none;
    border-radius: 20px;
    padding: 36px 36px 32px;
}
.marquee-track .testimonial-card {
    min-width: 340px;
    max-width: 420px;
    flex-shrink: 0;
}
.testimonial-card blockquote { font-size: 16px; line-height: 1.8; }
.testimonial-author img { width: 52px; height: 52px; border: 2px solid var(--color-primary-light); }

/* Testimonials marquee - horizontal infinite scroll */
.testimonials-marquee {
    overflow: hidden;
    padding: 8px 0 16px;
}
.marquee-track {
    display: flex;
    gap: 24px;
    width: max-content;
    animation: marquee-scroll 40s linear infinite;
    padding: 8px 0;
    will-change: transform;
}
.marquee-track[data-direction="right"] {
    animation-name: marquee-scroll-reverse;
}
.testimonials-marquee:hover .marquee-track {
    animation-play-state: paused;
}
/* Two rows: add gap between */
.marquee-track + .marquee-track {
    margin-top: 24px;
}
@keyframes marquee-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
@keyframes marquee-scroll-reverse {
    0% { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}
/* (consolidated into main 768px block) */

/* CTA - more dramatic gradient */
.cta-banner { padding: 96px 24px; }
.cta-content h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); }
.cta-content p { font-size: 18px; line-height: 1.7; }

/* FAQ - better interactions */
.faq-item { border-radius: 12px; }
.faq-item summary { font-size: 17px; padding: 22px 28px; }
.faq-answer { padding: 0 28px 24px; font-size: 16px; overflow: hidden; transition: max-height .3s ease, opacity .3s ease; }
.faq-answer p { margin-bottom: 12px; }

/* Page hero - more dramatic for interior pages (desktop/tablet only) */
@media (min-width: 769px) {
    /* Ne JAMAIS remettre `aspect-ratio` ici : combiné à min-height sur un élément
       pleine largeur, le navigateur déduit la largeur de la hauteur et le hero
       déborde du viewport dès que la fenêtre est plus haute que large x ratio
       (mobile, tablette portrait, fenêtre desktop haute). Le max() donne le même
       rendu sans jamais élargir. */
    .page-hero { min-height: max(28vh, 25vw); }
    .page-hero .hero-content h1 { font-size: clamp(2rem, 4.5vw, 3rem); }
}

/* Numbers section - better grid on desktop */
.numbers-primary, .numbers-dark { border-radius: 0; }
.numbers-primary .stats-grid-wide,
.numbers-dark .stats-grid-wide {
    max-width: var(--max-width);
    margin: 0 auto;
}

/* Text+Image - better spacing */
.text-image-section { padding: 96px 0; }
.text-image-section .grid-2 { gap: 48px; }
.ti-content { padding: 16px 0; }

/* Contact improvements */
.contact-grid { gap: 64px; }
.contact-info-item { margin-bottom: 28px; }
.contact-info-item .icon {
    width: 48px; height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
    color: #fff;
}

/* Maps */
.contact-map iframe { border-radius: var(--radius); }

/* Footer refinement */
#site-footer { padding: 80px 0 0; }
.footer-container { gap: 64px; }
.footer-brand .footer-logo span { font-size: 1.5rem; }
.footer-description { font-size: 15px; margin-top: 12px; }

/* Blog cards enhancement */
.blog-card .card-body { padding: 24px 28px; }
.blog-card .card-body h3 { font-size: 1.15rem; }

/* Print styles */
@media print {
    #site-header, #site-footer, .cta-banner, .nav-toggle { display: none !important; }
    .hero, .page-hero { min-height: auto; padding: 32px 0; }
    .hero-overlay, .cta-overlay { display: none; }
    .section { padding: 24px 0; }
}

/* (consolidated into main 960px block above) */
/* (consolidated into main 768px block) */

/* Badge + title centering for all sections */
.cards-section .container, .services-section .container, .testimonials-section .container, .faq-section .container, .numbers-section .container, .team-section .container, .gallery-section .container, .video-section .container { text-align: center; }
.cards-section .grid, .services-section .grid, .faq-section .faq-list, .team-section .grid, .gallery-section .grid { text-align: left; }

/* 404 page */
.error-404-section { min-height: 60vh; display: flex; align-items: center; margin-top: var(--header-height); }
.error-404 { text-align: center; }
.error-404-code { font-size: 6rem; color: var(--color-primary); line-height: 1; margin-bottom: 8px; }
.error-404-text { font-size: 1.2rem; color: var(--color-text-light); margin: 16px 0 32px; }

/* Back to top */
.back-to-top {
    position: fixed; bottom: 32px; right: 32px;
    width: 44px; height: 44px;
    background: var(--color-primary); color: #fff;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 16px; box-shadow: var(--shadow-md);
    opacity: 0; pointer-events: none;
    transition: transform var(--transition), opacity var(--transition), background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition); z-index: 900;
}
.back-to-top.visible { opacity: 1; pointer-events: auto; }
.back-to-top:hover { background: var(--color-primary-dark); transform: translateY(-2px); color: #fff; }
.back-to-top:active { transform: scale(.92); }
/* (consolidated into main 768px block) */

/* Video section */
.video-wrapper { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* Team section - cards statiques (rule #18 : pas de transform sur non-cliquable) */
.team-member { text-align: center; transition: transform var(--transition), opacity var(--transition), background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition); border-radius: var(--radius); overflow: hidden; padding-bottom: 24px; }
.team-member img { width: 100%; height: 280px; object-fit: cover; border-radius: var(--radius); margin-bottom: 16px; transition: transform .5s cubic-bezier(.16,1,.3,1); }
.team-member-info h3 { margin-bottom: 4px; }
.team-role { display: block; color: var(--color-primary); font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.team-member-info p { font-size: 14px; color: var(--color-text-light); }

/* Text section (WYSIWYG) */
.text-section-content { line-height: 1.8; font-size: 17px; }
.text-section-content p { margin-bottom: 16px; }
.text-section-content h2 { margin: 32px 0 16px; }
.text-section-content h3 { margin: 24px 0 12px; }
.text-section-content ul, .text-section-content ol { margin: 16px 0; padding-left: 24px; }
.text-section-content li { margin-bottom: 8px; }
.text-section-content img { border-radius: var(--radius); margin: 24px 0; max-width: 100%; height: auto; }
.text-section-content blockquote { border-left: 4px solid var(--color-primary); padding: 16px 24px; margin: 24px 0; background: var(--color-bg-alt); border-radius: 0 var(--radius) var(--radius) 0; }

/* Footer social icons */
.footer-social a i { font-size: 15px; }
.footer-social .screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Search no results */
.search-no-results { text-align: center; padding: 48px 0; }
.search-no-results p { font-size: 1.1rem; color: var(--color-text-light); margin-bottom: 24px; }

/* Body scroll lock (mobile menu) */
body.overflow-hidden { overflow: hidden; }

/* Focus-visible - WCAG 2.1 AA compliance */
a:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: 2px; }
.gallery-item:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.back-to-top:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.card-link:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.blog-card-link:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: var(--radius); }

/* Gallery hover overlay */
.gallery-item { position: relative; }
.gallery-item::after {
    content: '\f00e'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(var(--color-secondary-rgb), .4);
    color: #fff; font-size: 24px;
    opacity: 0; transition: opacity var(--transition);
    border-radius: var(--radius);
}
.gallery-item:hover::after { opacity: 1; }

/* Map section (flex content) */
.map-section .container { text-align: center; }
.map-wrapper iframe { border-radius: var(--radius); box-shadow: var(--shadow-md); }

/* CF7 form states */
.wpcf7 .wpcf7-not-valid { border-color: var(--color-error) !important; }
.wpcf7 .wpcf7-not-valid:focus { box-shadow: 0 0 0 3px rgba(239,68,68,.15); }
.wpcf7 .wpcf7-response-output { border-radius: var(--radius); padding: 16px 20px; font-size: 14px; margin-top: 16px; }
.wpcf7 .wpcf7-mail-sent-ok, .wpcf7 .wpcf7-response-output.wpcf7-mail-sent-ok { border-color: var(--color-success); color: var(--color-success-dark); background: var(--color-success-bg); }
.wpcf7 .wpcf7-validation-errors { border-color: var(--color-error); color: var(--color-error-dark); background: var(--color-error-bg); }
.wpcf7 label { display: block; font-size: 14px; font-weight: 600; color: var(--color-text); margin-bottom: 6px; }
/* Webhook sync test - 2026-04-08T15:31:50Z */

/* Card clickable - toute la carte est un lien */
a.card-clickable {
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}
a.card-clickable:hover { text-decoration: none; color: inherit; }
a.card-clickable .card-link { color: var(--color-primary); }
a.card-clickable:hover .card-link { color: var(--color-primary-dark); }

/* Nested sub-menus - open to the right */
.nav-menu li .sub-menu .sub-menu {
    top: 0;
    left: 100%;
    transform: translateX(8px);
    margin-top: -8px;
}
.nav-menu li .sub-menu li:hover > .sub-menu {
    opacity: 1; visibility: visible; transform: translateX(0);
}
/* Chevron right for nested dropdown parent */
.nav-menu .sub-menu li.menu-item-has-children > a::after {
    display: block !important;
    content: '';
    position: absolute;
    right: 12px;
    top: 50%;
    width: 5px;
    height: 5px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-50%) rotate(-45deg);
    background: none;
    left: auto;
    bottom: auto;
}
/* Header items vertical alignment */
.nav-menu > li > a {
    display: flex;
    align-items: center;
    text-align: center;
    min-height: 60px;
}

/* ============================================
   SFSCMFCO DESIGN ENHANCEMENTS
   ============================================ */

/* Hero - overlay teinté primaire + touche d'accent */
.hero-overlay { background: linear-gradient(135deg, rgba(var(--color-secondary-rgb),0.82) 0%, rgba(var(--color-primary-rgb),0.55) 55%, rgba(var(--color-accent-rgb),0.42) 100%); }

/* Section badges - refined pill style */
.section-badge {
    background: rgba(var(--color-primary-rgb), .06);
    color: var(--color-primary);
    border: 1px solid rgba(var(--color-primary-rgb),.12);
    padding: 7px 18px;
    border-radius: 100px;
    font-size: 11.5px;
    letter-spacing: .14em;
    font-weight: 700;
    text-transform: uppercase;
    display: inline-block;
    margin-bottom: 18px;
}

/* Cards - refined hover */
.card { transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
a.card-clickable:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

/* About section - gradient accent line */
.about-content h2::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: linear-gradient(to right, var(--color-primary), var(--color-accent));
    margin-top: 16px;
    border-radius: 2px;
}

/* Stats counter - dark/primary variants get gradient numbers */
.numbers-dark .stat-number,
.numbers-primary .stat-number {
    background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* CTA banner - dégradé primaire + accent */
.cta-banner { position: relative; overflow: hidden; }
.cta-overlay { background: linear-gradient(135deg, rgba(var(--color-secondary-rgb),0.90) 0%, rgba(var(--color-primary-rgb),0.82) 45%, rgba(var(--color-accent-rgb),0.72) 100%); }
.cta-banner .btn-primary { background: #fff; color: var(--color-primary); position: relative; z-index: 1; }
.cta-banner .btn-primary:hover { background: var(--color-accent); color: #fff; border-color: var(--color-accent); }

/* Section text_image - better layout */
.text-image-section .container { gap: 48px; }

/* Team members grid */
.team-member { text-align: center; }
.team-member img { border-radius: 50%; width: 120px; height: 120px; object-fit: cover; border: 3px solid var(--color-primary-light); }

/* FAQ - refined accordion */
.faq-item { border-left: 3px solid var(--color-primary); }
.faq-item[open] { border-left-color: var(--color-accent); }

/* Page hero - gradient overlay (CSS vars only) */
.page-hero .hero-overlay {
    background: linear-gradient(135deg, rgba(var(--color-secondary-rgb),0.80) 0%, rgba(var(--color-primary-rgb),0.55) 100%);
}

/* Congress section on homepage */
.congres-section .card img { height: 200px; object-fit: cover; }
.videos-section .card img { height: 180px; object-fit: cover; }

/* --- Partners grid (flex layout "partners_grid") - source unique CPT partenaire --- */
.partners-grid-section { background: var(--color-bg-alt); padding: 80px 0; }
.partners-grid { display: grid; gap: 20px; margin-top: 40px; }
.partners-grid.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.partners-grid.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.partners-grid.grid-cols-5 { grid-template-columns: repeat(5, 1fr); }
.partners-grid.grid-cols-6 { grid-template-columns: repeat(6, 1fr); }
.partner-card {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 12px; padding: 24px 16px; background: #fff;
    border-radius: var(--radius-sm); box-shadow: 0 4px 16px rgba(var(--color-secondary-rgb),.06);
    transition: transform var(--transition), box-shadow var(--transition);
    text-decoration: none; color: var(--color-text);
    min-height: 160px;
}
a.partner-card:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(var(--color-secondary-rgb),.14); }
.partner-card-logo { max-width: 100%; max-height: 80px; width: auto; object-fit: contain; filter: grayscale(30%); transition: filter var(--transition); }
.partner-card:hover .partner-card-logo { filter: grayscale(0%); }
.partner-card-name { font-size: .85rem; font-weight: 600; text-align: center; color: var(--color-text-muted); line-height: 1.3; }
@media (max-width: 960px) {
    .partners-grid.grid-cols-5, .partners-grid.grid-cols-6 { grid-template-columns: repeat(3, 1fr); }
    .partners-grid.grid-cols-4 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
    .partners-grid.grid-cols-3, .partners-grid.grid-cols-4,
    .partners-grid.grid-cols-5, .partners-grid.grid-cols-6 { grid-template-columns: repeat(2, 1fr); }
    .partner-card { padding: 16px 10px; min-height: 120px; }
    .partner-card-logo { max-height: 56px; }
}

/* ============================================
   YOUVANNA.COM - Framer/Figma-inspired design
   Modern, bold, trust-inspiring agency look
   ============================================ */

/* --- Hero: dramatic gradient overlay, no image dependency --- */
.hero .hero-overlay {
    background:
        linear-gradient(180deg, rgba(15,23,42,.92) 0%, rgba(15,23,42,.75) 40%, rgba(15,23,42,.95) 100%),
        linear-gradient(135deg, rgba(236,106,6,.15) 0%, transparent 50%);
}
.hero::before {
    content: '';
    position: absolute;
    top: -200px; right: -200px;
    width: 600px; height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(236,106,6,.12) 0%, transparent 70%);
    z-index: 1;
    pointer-events: none;
}
.hero::after {
    content: '';
    position: absolute;
    bottom: -100px; left: -100px;
    width: 400px; height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(236,106,6,.08) 0%, transparent 70%);
    z-index: 1;
    pointer-events: none;
}
.hero-content h1 {
    font-size: clamp(2.8rem, 6vw, 4.5rem);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.05;
    margin-bottom: 24px;
}
.hero-subtitle {
    font-size: clamp(1.05rem, 2vw, 1.2rem);
    color: rgba(255,255,255,.75);
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    font-weight: 400;
}
.hero-buttons .btn { border-radius: 100px; padding: 16px 32px; font-size: 15px; font-weight: 600; }
.hero-buttons .btn-primary { box-shadow: 0 4px 24px rgba(236,106,6,.35); }
.hero-buttons .btn-primary:hover { box-shadow: 0 8px 32px rgba(236,106,6,.45); }
.hero-buttons .btn-secondary { backdrop-filter: blur(8px); background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); }
.hero-buttons .btn-secondary:hover { background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.4); color: #fff; }

/* --- Section badges (eyebrow labels above titles) --- */
.section-badge,
.section-header .section-badge {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color-primary);
    background: rgba(var(--color-primary-rgb), .06);
    border: 1px solid rgba(var(--color-primary-rgb),.12);
    padding: 7px 18px;
    border-radius: 100px;
    margin-bottom: 18px;
}

/* --- Cards: glass morphism effect --- */
.card {
    background: rgba(255,255,255,.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(var(--color-secondary-rgb), .06);
    border-radius: 16px;
    transition: transform .4s cubic-bezier(.22,1,.36,1), opacity .4s cubic-bezier(.22,1,.36,1), background-color .4s cubic-bezier(.22,1,.36,1), border-color .4s cubic-bezier(.22,1,.36,1), color .4s cubic-bezier(.22,1,.36,1), box-shadow .4s cubic-bezier(.22,1,.36,1);
}
a.card-clickable:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(0,0,0,.08);
    border-color: rgba(var(--color-primary-rgb), .15);
}
.card-body { padding: 32px; }
.card-body h3 {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 10px;
}
.card-body p {
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--color-text-light);
}
.card-link {
    font-weight: 600;
    font-size: 14px;
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
    transition: gap .3s ease;
}
a.card-clickable:hover .card-link { gap: 10px; }

/* --- Stats section: styling handled by base .stat rules --- */

/* --- Testimonials: premium card style --- */
.testimonial-card {
    background: #fff;
    border-radius: 20px;
    padding: 36px 36px 32px;
    border: 1px solid rgba(var(--color-secondary-rgb), .05);
    transition: transform .45s var(--ease-premium), opacity .45s var(--ease-premium), background-color .45s var(--ease-premium), border-color .45s var(--ease-premium), color .45s var(--ease-premium), box-shadow .45s var(--ease-premium);
}
.testimonial-card:hover {
    box-shadow: 0 16px 48px rgba(0,0,0,.08);
}
.testimonial-stars {
    color: var(--color-accent);
    font-size: 18px;
    letter-spacing: 3px;
    margin-bottom: 18px;
}
.testimonial-card blockquote {
    font-size: 15.5px;
    line-height: 1.75;
    color: var(--color-text);
    font-style: normal;
    margin-bottom: 24px;
    font-weight: 400;
    position: relative;
}
.testimonial-author {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 20px;
    border-top: 1px solid rgba(var(--color-secondary-rgb),.06);
}
.testimonial-author img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(var(--color-primary-rgb),.12);
}
.testimonial-author strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text);
    letter-spacing: -.01em;
}
.testimonial-author span {
    display: block;
    font-size: 12.5px;
    color: var(--color-text-muted);
    font-weight: 500;
    margin-top: 2px;
}

/* --- CTA Banner: dramatic dark section with depth --- */
.cta-banner {
    background: var(--color-secondary);
    position: relative;
    overflow: hidden;
    padding: 120px 24px;
}
.cta-banner::before {
    content: '';
    position: absolute;
    top: -150px; right: -150px;
    width: 700px; height: 700px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--color-primary-rgb),.2) 0%, transparent 60%);
    pointer-events: none;
    animation: orbFloat 12s ease-in-out infinite;
}
.cta-content h2 {
    font-size: clamp(2rem, 4.5vw, 3.2rem);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.1;
    margin-bottom: 20px;
}
.cta-content .btn {
    border-radius: 100px;
    padding: 18px 40px;
    font-size: 16px;
    font-weight: 700;
    box-shadow: 0 8px 32px rgba(var(--color-primary-rgb),.35);
    transition: transform .4s var(--ease-premium), opacity .4s var(--ease-premium), background-color .4s var(--ease-premium), border-color .4s var(--ease-premium), color .4s var(--ease-premium), box-shadow .4s var(--ease-premium);
}
.cta-content .btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 40px rgba(var(--color-primary-rgb),.45);
}

/* --- About section: modern layout with depth --- */
.about-section .image-frame {
    border-radius: 24px;
    overflow: visible;
    box-shadow: 0 24px 64px rgba(0,0,0,.1);
}
.about-section .image-frame img {
    border-radius: 24px;
}
.about-section .image-frame::before {
    border-radius: 24px;
    border-color: rgba(var(--color-accent-rgb),.3);
}
.about-content h2 {
    font-size: clamp(1.7rem, 3.5vw, 2.5rem);
    margin-bottom: 20px;
    letter-spacing: -.02em;
}

/* --- FAQ: cleaner accordion style --- */
.faq-item {
    border: 1px solid rgba(var(--color-secondary-rgb), .08);
    border-radius: 12px;
    background: #fff;
    margin-bottom: 12px;
    transition: transform .3s ease, opacity .3s ease, background-color .3s ease, border-color .3s ease, color .3s ease, box-shadow .3s ease;
}
.faq-item:hover {
    border-color: rgba(var(--color-primary-rgb), .2);
}
.faq-question {
    font-weight: 600;
    font-size: 16px;
    padding: 20px 24px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.faq-answer {
    padding: 0 24px 20px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--color-text-light);
}

/* --- Services grid: taller cards for homepage --- */
.services-grid-tall .card img {
    height: 200px;
    object-fit: cover;
}

/* --- Footer: modern dark footer --- */
#site-footer {
    background: var(--color-secondary);
    color: rgba(255,255,255,.7);
}
#site-footer a {
    color: rgba(255,255,255,.7);
    transition: color .2s ease;
}
#site-footer a:hover {
    color: var(--color-primary);
}
.footer-bottom {
    border-top: 1px solid rgba(255,255,255,.08);
}

/* --- Text-image sections: balanced spacing --- */
.section .grid-2 {
    gap: 48px;
    align-items: center;
}
.text-image-text h2 {
    font-size: clamp(1.5rem, 3.5vw, 2.2rem);
    margin-bottom: 16px;
    line-height: 1.2;
}
.text-image-text p {
    font-size: 16px;
    line-height: 1.8;
    color: var(--color-text-light);
}
.text-image-img {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 16px 48px rgba(0,0,0,.08);
}
.text-image-img img {
    border-radius: 16px;
}

/* --- Image stat badge: glassmorphism --- */
.image-stat-badge {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background: rgba(255,255,255,.9);
    border: 1px solid rgba(255,255,255,.5);
    box-shadow: 0 8px 32px rgba(0,0,0,.1);
}

/* --- Scrollbar styling --- */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--color-bg); }
::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); }

/* --- Selection color --- */
::selection { background: rgba(var(--color-primary-rgb), .15); color: var(--color-text); }

/* --- Page hero for inner pages: dramatic gradient with brand warmth --- */
.page-hero .hero-overlay {
    background:
        linear-gradient(180deg, rgba(var(--color-secondary-rgb),.9) 0%, rgba(var(--color-secondary-rgb),.65) 40%, rgba(var(--color-secondary-rgb),.92) 100%),
        linear-gradient(135deg, rgba(var(--color-primary-rgb),.12) 0%, transparent 50%);
}
.page-hero::before {
    content: '';
    position: absolute;
    top: -100px; right: -100px;
    width: 400px; height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--color-primary-rgb),.1) 0%, transparent 70%);
    z-index: 1;
    pointer-events: none;
}
.page-hero::after {
    content: '';
    position: absolute;
    bottom: -50px; left: -50px;
    width: 300px; height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--color-accent-rgb),.06) 0%, transparent 70%);
    z-index: 1;
    pointer-events: none;
}

/* --- Responsive Framer adjustments --- */
@media (max-width: 768px) {
    .hero-content h1 { font-size: clamp(2rem, 7vw, 2.8rem); }
    .hero-buttons .btn { padding: 14px 24px; font-size: 14px; }
    .card-body { padding: 24px; }
    .section { padding: 64px 0; }
    .cta-content .btn { padding: 14px 28px; }
}

/* ============================================
   YOUVANNA.COM - Audit UX Agent 9 (2026-04-10)
   Corrections et ameliorations design
   ============================================ */

/* --- Section titles: better visual hierarchy --- */
.section-header {
    text-align: center;
    margin-bottom: 48px;
}
.section-title {
    letter-spacing: -.03em;
}
.section-subtitle {
    font-size: 16px;
    line-height: 1.75;
}

/* --- Services grid: dramatic card styling + interactions --- */
.services-section {
    position: relative;
}
.services-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--color-primary-rgb),.15), transparent);
}
.services-grid-tall {
    gap: 28px;
}
.services-grid-tall .card {
    display: flex;
    flex-direction: column;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(var(--color-secondary-rgb),.04);
    background: #fff;
}
.services-grid-tall .card .card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 32px 24px 24px;
}
.services-grid-tall .card .card-body p {
    flex: 1;
}
.services-grid-tall .card img {
    transition: transform .7s cubic-bezier(.22,1,.36,1);
    height: 210px;
    object-fit: cover;
}
.services-grid-tall a.card-clickable:hover img {
    transform: scale(1.08);
}
.services-grid-tall a.card-clickable {
    border-radius: 20px;
    overflow: hidden;
}
.services-grid-tall a.card-clickable:hover {
    box-shadow: 0 24px 56px -12px rgba(var(--color-secondary-rgb),.18);
    transform: translateY(-8px);
}
.services-grid-tall .card-body .card-icon-badge {
    transition: transform .4s var(--ease-premium), box-shadow .4s ease;
}
.services-grid-tall a.card-clickable:hover .card-icon-badge {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 14px 28px -8px rgba(var(--color-primary-rgb),.4);
}

/* --- About section: editorial feel with depth --- */
.about-section {
    position: relative;
    padding: 112px 0;
}
.about-section::before {
    content: '';
    position: absolute;
    top: 50%; left: 0;
    width: 40%;
    height: 1px;
    background: linear-gradient(90deg, rgba(var(--color-primary-rgb),.12), transparent);
    pointer-events: none;
}
.about-section .grid-2 {
    gap: 64px;
}
.about-content {
    padding-left: 16px;
}
.about-content div {
    font-size: 16.5px;
    line-height: 1.85;
    color: var(--color-text-light);
    margin-bottom: 28px;
}
.about-content .btn {
    margin-bottom: 36px;
    border-radius: 100px;
    padding: 14px 32px;
}

/* --- Stats: premium card styling handled above --- */

/* --- Testimonials: decorative quote mark --- */
.testimonials-section {
    position: relative;
}
.testimonial-card {
    position: relative;
}
.testimonial-card::before {
    content: '\201C';
    position: absolute;
    top: 24px;
    right: 28px;
    font-size: 56px;
    line-height: 1;
    background: linear-gradient(135deg, rgba(var(--color-primary-rgb),.15), rgba(var(--color-accent-rgb),.08));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: 700;
}

/* --- CTA Banner: enhanced gradient and text contrast --- */
.cta-banner::after {
    content: '';
    position: absolute;
    bottom: -120px;
    left: -120px;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--color-accent-rgb),.12) 0%, transparent 60%);
    pointer-events: none;
    animation: orbFloat 10s ease-in-out infinite reverse;
}
.cta-content {
    position: relative;
    z-index: 2;
    max-width: 700px;
    margin: 0 auto;
}
.cta-content p,
.cta-content .cta-text {
    color: rgba(255,255,255,.7);
    font-size: 18px;
    line-height: 1.75;
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 40px;
}

/* --- Contact form: modern input styling --- */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
    border: 1px solid rgba(var(--color-secondary-rgb), .1);
    border-radius: 12px;
    padding: 14px 18px;
    font-size: 15px;
    transition: transform .2s ease, opacity .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
    background: rgba(255,255,255,.6);
    backdrop-filter: blur(8px);
}
.wpcf7 input:focus,
.wpcf7 textarea:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), .1);
    outline: none;
    background: #fff;
}
.wpcf7 input[type="submit"] {
    border-radius: 100px;
    padding: 16px 36px;
    font-size: 15px;
    font-weight: 600;
}

/* --- Footer: improved visual structure --- */
#site-footer .footer-container {
    gap: 48px;
}
.footer-brand .footer-description {
    font-size: 14px;
    line-height: 1.7;
    margin-top: 16px;
    max-width: 320px;
}
.footer-social {
    margin-top: 20px;
}
.footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    transition: transform .2s ease, opacity .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
    font-size: 16px;
}
.footer-social a:hover {
    background: var(--color-primary);
    color: #fff;
    transform: translateY(-2px);
}
.footer-nav h3,
.footer-contact h3 {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(255,255,255,.4);
    margin-bottom: 20px;
}
.footer-menu li {
    margin-bottom: 10px;
}
.footer-menu li a {
    font-size: 14px;
}
/* La navigation du pied de page compte 14 entrees : sur une seule colonne elle
   faisait a elle seule la hauteur du footer. Deux colonnes la coupent en deux
   sans rien retirer. */
.footer-nav .footer-menu {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 24px;
}
@media (max-width: 480px) {
    .footer-nav .footer-menu { grid-template-columns: 1fr; }
}
/* Largeurs du pied de page (controle qualite du 2026-09-27) : la colonne de
   presentation occupait la moitie de la largeur pour un texte limite a 320 px,
   pendant que la navigation se serrait en deux colonnes de 115 px - « Conseil
   RH / conseil en strategie et developpement » y prenait quatre lignes et
   « Qui sommes-nous ? » se coupait en deux. La place va a la navigation. */
@media (min-width: 961px) {
    .footer-container { grid-template-columns: minmax(0, .85fr) minmax(0, 2fr); }
    .footer-links { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}
.footer-contact a,
.footer-contact p {
    font-size: 14px;
    line-height: 1.7;
}
.footer-bottom {
    /* 24 px sur les cotes : a « 0 », entre 961 et 1370 px de large, le
       copyright et la signature touchaient les bords de l'ecran
       (controle qualite du 2026-09-27). */
    padding: 20px 24px;
    margin-top: 48px;
}
.footer-bottom p {
    font-size: 13px;
    color: rgba(255,255,255,.75);
}

/* --- Page hero inner: dramatic agency feel --- */
.page-hero {
    min-height: 320px;
}
.page-hero .hero-content {
    padding: 56px 24px 40px;
}
.page-hero .hero-content h1 {
    font-size: clamp(2.2rem, 5vw, 3.4rem);
    letter-spacing: -.03em;
    margin-bottom: 16px;
    line-height: 1.08;
}
.page-hero .hero-subtitle {
    font-size: clamp(1rem, 1.8vw, 1.15rem);
    max-width: 580px;
    line-height: 1.7;
    margin-left: auto;
    margin-right: auto;
}

/* --- Services page: improved grid layout --- */
.page-content-section .grid-3 .card,
.page-content-section .grid-4 .card {
    height: 100%;
}

/* --- Mobile responsive fine-tuning --- */
@media (max-width: 768px) {
    .about-content {
        padding-left: 0;
    }
    .stat + .stat::before {
        display: none;
    }
    .stats-grid {
        gap: 16px;
    }
    .testimonial-card {
        padding: 24px;
    }
    .testimonial-card::before {
        font-size: 36px;
        top: 16px;
        right: 16px;
    }
    .page-hero {
        min-height: 220px;
    }
    .page-hero .hero-content {
        padding: 32px 16px 24px;
    }
    #site-footer .footer-container {
        gap: 32px;
    }
    .footer-brand .footer-description {
        max-width: 100%;
    }
    .cta-content p,
    .cta-content .cta-text {
        font-size: 15px;
    }
}

/* --- Back to top button: refined style --- */
.back-to-top {
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-secondary);
    color: #fff;
    box-shadow: 0 4px 16px rgba(0,0,0,.15);
    transition: transform .3s ease, opacity .3s ease, background-color .3s ease, border-color .3s ease, color .3s ease, box-shadow .3s ease;
}
.back-to-top:hover {
    background: var(--color-primary);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(var(--color-primary-rgb), .3);
}

/* --- Breadcrumb: subtle path indicator --- */
.yoast-breadcrumbs {
    font-size: 13px;
    color: var(--color-text-muted);
    padding: 12px 0;
}
.yoast-breadcrumbs a {
    color: var(--color-text-muted);
}
.yoast-breadcrumbs a:hover {
    color: var(--color-primary);
}

/* ============================================
   YOUVANNA.COM - Premium Framer Animations
   Scroll reveals, micro-interactions, polish
   ============================================ */

/* --- Reveal variants: directional fade-ins --- */
.reveal-left {
    opacity: 0;
    transform: translateX(-60px);
    transition: opacity 1s cubic-bezier(.22,1,.36,1), transform 1s cubic-bezier(.22,1,.36,1);
    will-change: opacity, transform;
}
.reveal-right {
    opacity: 0;
    transform: translateX(60px);
    transition: opacity 1s cubic-bezier(.22,1,.36,1), transform 1s cubic-bezier(.22,1,.36,1);
    will-change: opacity, transform;
}
.reveal-scale {
    opacity: 0;
    transform: scale(.92);
    transition: opacity 1s cubic-bezier(.22,1,.36,1), transform 1s cubic-bezier(.22,1,.36,1);
    will-change: opacity, transform;
}
.reveal-left.visible,
.reveal-right.visible,
.reveal-scale.visible {
    opacity: 1;
    transform: none;
}

/* --- Enhanced stagger: longer cascade for grids --- */
.reveal.visible .card:nth-child(1),
.reveal.visible .faq-item:nth-child(1) { transition-delay: 0s; }
.reveal.visible .card:nth-child(2),
.reveal.visible .faq-item:nth-child(2) { transition-delay: .08s; }
.reveal.visible .card:nth-child(3),
.reveal.visible .faq-item:nth-child(3) { transition-delay: .16s; }
.reveal.visible .card:nth-child(4),
.reveal.visible .faq-item:nth-child(4) { transition-delay: .24s; }
.reveal.visible .card:nth-child(5),
.reveal.visible .faq-item:nth-child(5) { transition-delay: .32s; }
.reveal.visible .card:nth-child(6),
.reveal.visible .faq-item:nth-child(6) { transition-delay: .4s; }
.reveal.visible .card:nth-child(7) { transition-delay: .48s; }
.reveal.visible .card:nth-child(8) { transition-delay: .56s; }

/* --- Hero entrance: dramatic fade + scale --- */
@keyframes heroFadeIn {
    from { opacity: 0; transform: translateY(30px) scale(.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.hero-content h1 {
    animation: heroFadeIn 1.2s cubic-bezier(.22,1,.36,1) .2s both;
}
.hero-subtitle {
    animation: heroFadeIn 1.2s cubic-bezier(.22,1,.36,1) .4s both;
}
.hero-buttons {
    animation: heroFadeIn 1.2s cubic-bezier(.22,1,.36,1) .6s both;
}

/* --- Animated gradient orb on hero (subtle floating glow) --- */
@keyframes orbFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30px, -20px) scale(1.05); }
    66% { transform: translate(-20px, 15px) scale(.95); }
}
.hero::before {
    animation: orbFloat 8s ease-in-out infinite;
}
.hero::after {
    animation: orbFloat 10s ease-in-out infinite reverse;
}

/* --- Card hover: enhanced micro-interactions --- */
a.card-clickable {
    position: relative;
    overflow: hidden;
}
a.card-clickable::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(var(--color-primary-rgb), .03) 0%, transparent 60%);
    opacity: 0;
    transition: opacity .4s ease;
    z-index: 0;
    pointer-events: none;
}
a.card-clickable:hover::before {
    opacity: 1;
}
a.card-clickable:hover {
    transform: translateY(-8px);
    box-shadow: 0 24px 48px rgba(0,0,0,.1), 0 0 0 1px rgba(var(--color-primary-rgb), .08);
}
a.card-clickable:hover .card-link {
    gap: 12px;
    color: var(--color-primary-dark);
}

/* --- Button hover: glow pulse --- */
.btn-primary {
    position: relative;
    overflow: hidden;
}
.btn-primary::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(var(--color-primary-rgb), .4), transparent);
    opacity: 0;
    transition: opacity .3s ease;
    z-index: -1;
    filter: blur(12px);
}
.btn-primary:hover::after {
    opacity: 1;
}
.btn-primary:active {
    transform: translateY(0) scale(.98);
}

/* --- Section divider: subtle diagonal cut --- */
.section-divider {
    position: relative;
}
.section-divider::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 60px;
    background: var(--color-bg);
    clip-path: polygon(0 100%, 100% 0, 100% 100%);
    pointer-events: none;
}

/* --- Image reveal: clip-path slide --- */
.image-reveal {
    overflow: hidden;
    position: relative;
}
.image-reveal img {
    transition: transform 1.2s cubic-bezier(.22,1,.36,1), clip-path 1.2s cubic-bezier(.22,1,.36,1);
    clip-path: inset(0 0 0 100%);
}
.image-reveal.visible img {
    clip-path: inset(0 0 0 0%);
    transform: scale(1);
}

/* --- Floating badge animation (GPU-composited via opacity on ::after) --- */
@keyframes badgePulseOpacity {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}
.image-stat-badge::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: 0 12px 40px rgba(0,0,0,.15);
    opacity: 0;
    animation: badgePulseOpacity 4s ease-in-out infinite;
    will-change: opacity;
    z-index: -1;
}

/* --- Testimonial cards: subtle slide-in from sides --- */
.testimonials-grid .testimonial-card:nth-child(1) {
    transform: translateX(-20px);
}
.testimonials-grid .testimonial-card:nth-child(3) {
    transform: translateX(20px);
}
.reveal.visible .testimonials-grid .testimonial-card:nth-child(1),
.reveal.visible .testimonials-grid .testimonial-card:nth-child(3) {
    transform: translateX(0);
}

/* --- Link hover underline animation --- */
.text-image-text a:not(.btn),
.about-content a:not(.btn) {
    position: relative;
    text-decoration: none;
}
.text-image-text a:not(.btn)::after,
.about-content a:not(.btn)::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--color-primary);
    transition: width .3s cubic-bezier(.22,1,.36,1);
}
.text-image-text a:not(.btn):hover::after,
.about-content a:not(.btn):hover::after {
    width: 100%;
}

/* --- Section badge: subtle entrance --- */
@keyframes badgeSlideIn {
    from { opacity: 0; transform: translateY(10px) scale(.9); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.reveal.visible .section-badge {
    animation: badgeSlideIn .6s cubic-bezier(.22,1,.36,1) both;
}

/* --- Number counter: bold pop effect --- */
@keyframes numberPop {
    0% { transform: scale(.5); opacity: 0; }
    60% { transform: scale(1.05); }
    100% { transform: scale(1); opacity: 1; }
}
.reveal.visible .stat-number {
    animation: numberPop .8s cubic-bezier(.22,1,.36,1) both;
}

/* --- CTA banner: animated gradient sweep --- */
@keyframes gradientSweep {
    0% { transform: translateX(-100%) rotate(45deg); }
    100% { transform: translateX(200%) rotate(45deg); }
}
.cta-banner {
    overflow: hidden;
}

/* --- Footer social icons: stagger entrance --- */
.footer-social a:nth-child(1) { transition-delay: 0s; }
.footer-social a:nth-child(2) { transition-delay: .05s; }
.footer-social a:nth-child(3) { transition-delay: .1s; }
.footer-social a:nth-child(4) { transition-delay: .15s; }
.footer-social a:nth-child(5) { transition-delay: .2s; }

/* --- Smooth page entrance --- */
@keyframes pageEnter {
    from { opacity: 0; }
    to { opacity: 1; }
}
body {
    animation: pageEnter .4s ease both;
}

/* --- Nav active indicator: animated underline --- */
.nav-menu li a::after {
    transition: transform .35s cubic-bezier(.22,1,.36,1);
}

/* --- FAQ: smooth open/close --- */
.faq-answer {
    transition: max-height .4s cubic-bezier(.22,1,.36,1), opacity .3s ease;
    overflow: hidden;
}
.faq-item[open] .faq-question {
    color: var(--color-primary);
}
.faq-item[open] {
    border-color: rgba(var(--color-primary-rgb), .15);
    background: rgba(var(--color-primary-rgb), .02);
}

/* ============================================
   YOUVANNA.COM - Premium Agency Design v2
   Clean, bold, Framer/kelcible-inspired
   ============================================ */

/* --- Marquee text band: bold agency showcase --- */
.marquee-band {
    overflow: hidden;
    padding: 24px 0;
    background: var(--color-secondary);
    position: relative;
}
.marquee-band::before,
.marquee-band::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: 120px;
    z-index: 2;
    pointer-events: none;
}
.marquee-band::before {
    left: 0;
    background: linear-gradient(90deg, var(--color-secondary), transparent);
}
.marquee-band::after {
    right: 0;
    background: linear-gradient(-90deg, var(--color-secondary), transparent);
}
.marquee-band-track {
    display: flex;
    width: max-content;
    animation: marquee-scroll 25s linear infinite;
    gap: 56px;
}
.marquee-band-item {
    font-family: var(--font-heading);
    font-size: clamp(1.2rem, 2.5vw, 1.7rem);
    color: rgba(255,255,255,.1);
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: .08em;
    display: flex;
    align-items: center;
    gap: 56px;
    font-weight: 600;
    transition: color .3s ease;
}
.marquee-band:hover .marquee-band-item {
    color: rgba(255,255,255,.18);
}
.marquee-band-item::after {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-primary);
    opacity: .6;
    flex-shrink: 0;
    box-shadow: 0 0 12px rgba(var(--color-primary-rgb),.4);
}

/* --- Hero badge (eyebrow above title) --- */
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 100px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,.8);
    letter-spacing: .04em;
    margin-bottom: 24px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    animation: heroFadeIn 1s var(--ease-premium) .1s both;
}
.hero-badge::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-primary);
    animation: heroBadgePulse 2s ease-in-out infinite;
}
@keyframes heroBadgePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .5; transform: scale(1.3); }
}

/* --- Hero wave edge --- */
.hero-wave {
    position: absolute;
    bottom: -1px;
    left: 0; right: 0;
    width: 100%;
    z-index: 3;
    line-height: 0;
    pointer-events: none;
    overflow: hidden;
}
.hero-wave svg {
    display: block;
    width: 100%;
    height: 50px;
}

/* --- Cursor glow (desktop only, JS sets --cursor-x/y) --- */
.cursor-glow {
    position: fixed;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--color-primary-rgb),.06) 0%, transparent 70%);
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    left: var(--cursor-x, -1000px);
    top: var(--cursor-y, -1000px);
    transition: left .15s ease-out, top .15s ease-out, opacity .3s ease;
    opacity: 0;
    will-change: left, top;
    mix-blend-mode: screen;
}
body:hover .cursor-glow { opacity: 1; }
@media (max-width: 960px) { .cursor-glow { display: none; } }
@media (hover: none) { .cursor-glow { display: none; } }

/* --- Testimonials: premium light background with subtle pattern --- */
.testimonials-section {
    background: var(--color-bg-alt);
    position: relative;
    overflow: hidden;
    padding: 112px 0;
}
.testimonials-section::before {
    content: '';
    position: absolute;
    top: -150px; right: -150px;
    width: 600px; height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--color-primary-rgb),.07) 0%, transparent 60%);
    pointer-events: none;
}
.testimonials-section::after {
    content: '';
    position: absolute;
    bottom: -120px; left: -120px;
    width: 500px; height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--color-accent-rgb),.05) 0%, transparent 60%);
    pointer-events: none;
}
.testimonials-section .section-title {
    font-size: clamp(1.8rem, 4vw, 2.6rem);
}
.testimonial-card {
    background: #fff;
    border: 1px solid rgba(var(--color-secondary-rgb),.05);
    border-left: none;
    border-radius: 20px;
    box-shadow: 0 4px 24px rgba(0,0,0,.04), 0 1px 3px rgba(0,0,0,.02);
    transition: transform .45s var(--ease-premium), opacity .45s var(--ease-premium), background-color .45s var(--ease-premium), border-color .45s var(--ease-premium), color .45s var(--ease-premium), box-shadow .45s var(--ease-premium);
    position: relative;
    overflow: hidden;
}
.testimonial-card::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 4px; height: 100%;
    background: linear-gradient(180deg, var(--color-primary), var(--color-accent));
    border-radius: 4px 0 0 4px;
}
.testimonial-card:hover {
    box-shadow: 0 16px 48px rgba(0,0,0,.08), 0 4px 12px rgba(0,0,0,.04);
    transform: translateY(-6px);
    border-color: rgba(var(--color-primary-rgb),.1);
}

/* --- Footer: gradient top border --- */
#site-footer {
    position: relative;
}
#site-footer::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-accent), var(--color-primary));
    z-index: 2;
}

/* --- About h2: gradient underline with animation --- */
.about-content h2::after {
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
    transition: width .6s var(--ease-premium);
}
.about-section.visible .about-content h2::after,
.about-section:hover .about-content h2::after {
    width: 120px;
}

/* --- Responsive for new elements --- */
@media (max-width: 768px) {
    .marquee-band { padding: 14px 0; }
    .marquee-band-item { font-size: clamp(1rem, 3vw, 1.3rem); gap: 24px; }
    .marquee-band-track { gap: 24px; }
    .hero-badge { font-size: 11px; padding: 6px 14px; }
    .hero-wave svg { height: 30px; }
}

/* ============================================
   YOUVANNA.COM - Premium Polish v3
   Kelcible-inspired refinements
   ============================================ */

/* --- Section rhythm: consistent generous spacing --- */
.services-section,
.about-section,
.testimonials-section {
    padding: 112px 0;
}

/* --- Alternating sections: subtle background variation with soft gradient --- */
.section:nth-child(even) {
    background: var(--color-bg-alt);
    position: relative;
}
.section:nth-child(even)::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 20%, rgba(var(--color-primary-rgb),.03), transparent 50%),
        radial-gradient(ellipse at 80% 80%, rgba(var(--color-accent-rgb),.02), transparent 50%);
    pointer-events: none;
}

/* --- Section separator lines (kelcible-style) --- */
.services-section::after,
.about-section::after {
    content: '';
    position: absolute;
    bottom: 0; left: 50%;
    transform: translateX(-50%);
    width: 60%;
    max-width: 600px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--color-secondary-rgb),.08), transparent);
    pointer-events: none;
}

/* --- Cards on inner pages: more refined --- */
.page-content-section .card {
    border-radius: 20px;
    border: 1px solid rgba(var(--color-secondary-rgb),.04);
    overflow: hidden;
    transition: transform .45s var(--ease-premium), opacity .45s var(--ease-premium), background-color .45s var(--ease-premium), border-color .45s var(--ease-premium), color .45s var(--ease-premium), box-shadow .45s var(--ease-premium);
}
.page-content-section a.card-clickable:hover {
    transform: translateY(-8px);
    box-shadow: 0 24px 56px -12px rgba(var(--color-secondary-rgb),.16);
}
.page-content-section .card img {
    height: 220px;
    object-fit: cover;
    border-radius: 20px 20px 0 0;
    transition: transform .7s var(--ease-premium);
}
.page-content-section a.card-clickable:hover img {
    transform: scale(1.06);
}

/* --- Inner page content sections: editorial spacing --- */
.page-content-section {
    padding: 96px 0;
}
.page-content-section .section-title {
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    letter-spacing: -.02em;
    margin-bottom: 16px;
}
.page-content-section .section-subtitle {
    font-size: 17px;
    line-height: 1.75;
    max-width: 680px;
}

/* --- Text content on inner pages: better readability --- */
.page-content-section p,
.ti-content p,
.text-image-text p {
    font-size: 16.5px;
    line-height: 1.85;
}

/* --- Smooth gradient lines between grid rows --- */
.grid-3::after,
.grid-4::after {
    content: none;
}

/* --- Card link arrow animation: more premium --- */
.card-link::after {
    content: '\2192';
    display: inline-block;
    transition: transform .4s var(--ease-premium);
    font-size: 16px;
}
a.card-clickable:hover .card-link::after {
    transform: translateX(6px);
}

/* --- Image border-radius: 20px everywhere (kelcible style) --- */
.about-image img,
.ti-image img,
.text-image-section img,
.text-image-img img {
    border-radius: 20px;
}

/* --- Subtle noise texture on sections for depth --- */
.services-section,
.testimonials-section {
    background-image: var(--noise-url);
    background-repeat: repeat;
    background-size: 200px;
}

/* --- Premium section headers: better badge + title combo --- */
.section-header .section-badge {
    font-size: 11.5px;
    letter-spacing: .14em;
    padding: 7px 18px;
    margin-bottom: 20px;
    border: 1px solid rgba(var(--color-primary-rgb),.12);
    backdrop-filter: blur(4px);
}

/* --- Smooth scroll behavior for all interactive elements --- */
a, .btn, .card, .faq-item, .testimonial-card, .stat {
    transition-timing-function: var(--ease-premium);
}

/* --- Contact form on inner pages: cleaner --- */
.contact-grid {
    gap: 56px;
}
.contact-info-item .icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
    color: #fff;
    font-size: 1.1rem;
    box-shadow: 0 8px 20px -6px rgba(var(--color-primary-rgb),.35);
}

/* --- Blog cards: more magazine feel --- */
.blog-card {
    border-radius: 20px;
    overflow: hidden;
}
.blog-card img {
    transition: transform .7s var(--ease-premium);
}
.blog-card:hover img {
    transform: scale(1.06);
}
.blog-card .card-body h3 {
    font-size: 1.15rem;
    letter-spacing: -.01em;
}

/* --- Testimonials marquee: better flow --- */
.marquee-track .testimonial-card {
    min-width: 360px;
    max-width: 440px;
}

/* --- FAQ section on inner pages: cleaner --- */
.faq-section {
    background: var(--color-bg);
}
.faq-item {
    border-radius: 16px;
    border: 1px solid rgba(var(--color-secondary-rgb),.06);
    background: #fff;
    margin-bottom: 0;
}
.faq-item:hover {
    border-color: rgba(var(--color-primary-rgb),.15);
    box-shadow: 0 4px 16px rgba(0,0,0,.04);
}
.faq-item[open] {
    box-shadow: 0 8px 24px rgba(0,0,0,.06);
    border-color: rgba(var(--color-primary-rgb),.2);
}
.faq-list {
    gap: 16px;
}

/* --- Text+Image sections: staggered elegant layout --- */
.text-image-section {
    position: relative;
}
.text-image-section .grid-2 {
    gap: 56px;
    align-items: center;
}
.text-image-section .ti-image,
.text-image-section .text-image-img {
    border-radius: 20px;
    overflow: visible;
    box-shadow: 0 20px 56px rgba(0,0,0,.1);
}
.text-image-section .ti-image img,
.text-image-section .text-image-img img {
    border-radius: 20px;
    display: block;
}
/* Extra space for floating badge to not get clipped */
.ti-image:has(.image-stat-badge) {
    margin-bottom: 30px;
}

/* --- Mobile responsive for new premium styles --- */
@media (max-width: 768px) {
    .services-section,
    .about-section,
    .testimonials-section {
        padding: 72px 0;
    }
    .about-section .grid-2 {
        gap: 32px;
    }
    .services-grid-tall {
        gap: 20px;
    }
    .services-grid-tall .card img {
        height: 180px;
    }
    .marquee-track .testimonial-card {
        min-width: 280px;
        max-width: 340px;
    }
    .cta-banner {
        padding: 80px 20px;
    }
    .cta-content h2 {
        font-size: clamp(1.6rem, 6vw, 2.2rem);
    }
    .page-hero {
        min-height: 240px;
    }
    .page-hero .hero-content {
        padding: 36px 16px 28px;
    }
    .page-hero::before,
    .page-hero::after {
        display: none;
    }
    .page-content-section .card img {
        height: 180px;
    }
    .section:nth-child(even)::before {
        display: none;
    }
    .marquee-band::before,
    .marquee-band::after {
        width: 40px;
    }
    .about-section::before {
        display: none;
    }
    .about-section::after,
    .services-section::after {
        display: none;
    }
}

/* ============================================
   HOMEPAGE V3 - New Section Styles
   Tech Band, Featured Services, Process, Portfolio
   ============================================ */

/* --- TECH LOGO BAND --- */
.tech-band {
    background: var(--color-secondary);
    padding: 28px 0;
    margin-top: 48px;
    position: relative;
    overflow: hidden;
}
.tech-band::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--gradient-mesh);
    opacity: .3;
    pointer-events: none;
}
.tech-band__track {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 48px;
    flex-wrap: wrap;
}
.tech-band__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: rgba(255,255,255,.4);
    transition: color var(--transition);
    cursor: default;
}
.tech-band__item:hover {
    color: var(--color-primary);
}
.tech-band__item i {
    font-size: 28px;
    transition: transform var(--transition);
}
.tech-band__item:hover i {
    transform: scale(1.15);
}
.tech-band__item span {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .5px;
    text-transform: uppercase;
    font-family: var(--font-body);
}

/* --- FEATURED SERVICES (alternating text+image) --- */
.featured-services {
    padding-bottom: 0;
}
.featured-services > .container {
    padding-bottom: 24px;
}
.fs-block {
    padding: 64px 0;
    position: relative;
}
.fs-block:nth-child(even) {
    background: var(--color-bg-alt);
}
.fs-block__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}
.fs-block--reversed .fs-block__inner {
    direction: rtl;
}
.fs-block--reversed .fs-block__inner > * {
    direction: ltr;
}
.fs-block__image {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}
.fs-block__image img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform .6s var(--ease-premium);
}
.fs-block__image:hover img {
    transform: scale(1.03);
}
.fs-block__number {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: clamp(2.5rem, 4vw, 3.5rem);
    font-weight: 700;
    color: var(--color-primary);
    opacity: .15;
    line-height: 1;
    margin-bottom: 8px;
}
.fs-block__content h3 {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    color: var(--color-text);
    margin-bottom: 16px;
    line-height: 1.2;
}
.fs-block__content p {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--color-text-light);
    margin-bottom: 28px;
    max-width: 480px;
}
.btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    border: 2px solid var(--color-primary-dark);
    color: var(--color-primary-dark);
    font-weight: 600;
    font-size: .9rem;
    border-radius: 50px;
    text-decoration: none;
    transition: transform var(--transition), background-color var(--transition), color var(--transition), box-shadow var(--transition);
    background: transparent;
}
.btn-outline:hover {
    background: var(--color-primary);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(var(--color-primary-rgb), .25);
}
.btn-outline i {
    font-size: .75rem;
    transition: transform var(--transition);
}
.btn-outline:hover i {
    transform: translateX(4px);
}
.fs-cta-wrap {
    text-align: center;
    padding: 56px 0 64px;
}
.btn-lg {
    padding: 16px 36px;
    font-size: 1rem;
}

/* --- PROCESS / METHODOLOGY SECTION --- */
.process-section {
    background: var(--color-bg-alt);
    position: relative;
    overflow: hidden;
}
.process-section::before {
    content: '';
    position: absolute;
    top: -100px;
    right: -100px;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(var(--color-primary-rgb), .06) 0%, transparent 70%);
    pointer-events: none;
}
.process-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    position: relative;
    margin-top: 48px;
}
/* Connecting line between steps */
.process-steps::before {
    content: '';
    position: absolute;
    top: 48px;
    left: 12.5%;
    right: 12.5%;
    height: 2px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
    opacity: .2;
    z-index: 0;
}
.process-step {
    text-align: center;
    position: relative;
    z-index: 1;
}
.process-step__icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--gradient-brand);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    position: relative;
    box-shadow: 0 8px 24px rgba(var(--color-primary-rgb), .2);
}
.process-step__icon::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: var(--gradient-brand);
    opacity: .15;
    z-index: -1;
}
.process-step__icon i {
    font-size: 24px;
    color: #fff;
}
.process-step__number {
    display: block;
    font-family: var(--font-heading);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-primary);
    opacity: .12;
    line-height: 1;
    margin-bottom: 8px;
}
.process-step__title {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    color: var(--color-text);
    margin-bottom: 10px;
}
.process-step__text {
    font-size: .9rem;
    line-height: 1.6;
    color: var(--color-text-light);
    max-width: 240px;
    margin: 0 auto;
}

/* --- PORTFOLIO / RÉALISATIONS PREVIEW --- */
.portfolio-preview {
    position: relative;
}
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-top: 48px;
}
.portfolio-card {
    position: relative;
}
.portfolio-card__link {
    display: block;
    text-decoration: none;
    color: var(--color-text);
}
.portfolio-card__image {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    aspect-ratio: 3/2;
    display: flex;
    align-items: center;
    justify-content: center;
}
.portfolio-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .6s var(--ease-premium);
}
.portfolio-card__image::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 20%, rgba(255,255,255,.15), transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(255,255,255,.1), transparent 50%);
    pointer-events: none;
}
.portfolio-card__monogram {
    position: relative;
    font-size: clamp(3rem, 6vw, 5rem);
    font-weight: 800;
    color: rgba(255,255,255,.92);
    letter-spacing: 0.02em;
    line-height: 1;
    font-family: var(--font-heading, inherit);
    text-shadow: 0 2px 20px rgba(0,0,0,.15);
}
.portfolio-card__overlay {
    position: absolute;
    inset: 0;
    background: rgba(var(--color-secondary-rgb), .7);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .4s var(--ease-premium);
    border-radius: 20px;
}
.portfolio-card__link:hover .portfolio-card__overlay {
    opacity: 1;
}
.portfolio-card__link:hover .portfolio-card__image img {
    transform: scale(1.08);
}
.portfolio-card__view {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-weight: 600;
    font-size: .95rem;
    padding: 12px 24px;
    border: 2px solid rgba(255,255,255,.5);
    border-radius: 50px;
    transition: transform var(--transition), opacity var(--transition), background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
}
.portfolio-card__link:hover .portfolio-card__view {
    border-color: #fff;
    background: rgba(255,255,255,.1);
}
.portfolio-card__info {
    padding: 20px 4px 0;
}
.portfolio-card__tag {
    display: inline-block;
    padding: 4px 14px;
    background: var(--color-primary-light);
    color: var(--color-primary);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .3px;
    text-transform: uppercase;
    border-radius: 50px;
    margin-bottom: 10px;
}
.portfolio-card__title {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    color: var(--color-text);
    margin: 0;
}
.portfolio-cta-wrap {
    text-align: center;
    padding-top: 48px;
}

/* --- HOMEPAGE V3: Mobile Responsive --- */
@media (max-width: 768px) {
    /* Tech band */
    .tech-band__track {
        gap: 24px;
        justify-content: center;
    }
    .tech-band__item i {
        font-size: 22px;
    }
    .tech-band__item span {
        font-size: 10px;
    }

    /* Featured services */
    .fs-block {
        padding: 48px 0;
    }
    .fs-block__inner {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .fs-block--reversed .fs-block__inner {
        direction: ltr;
    }
    .fs-block__content p {
        max-width: none;
    }
    .fs-block__number {
        font-size: 2rem;
    }
    .fs-cta-wrap {
        padding: 40px 20px 0;
    }

    /* Process */
    .process-steps {
        grid-template-columns: 1fr 1fr;
        gap: 40px 24px;
    }
    .process-steps::before {
        display: none;
    }
    .process-step__icon {
        width: 60px;
        height: 60px;
    }
    .process-step__icon i {
        font-size: 20px;
    }
    .process-step__number {
        font-size: 2rem;
    }
    .process-step__text {
        max-width: none;
    }

    /* Portfolio */
    .portfolio-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .portfolio-card__overlay {
        opacity: 0;
    }
}

@media (max-width: 480px) {
    .tech-band__track {
        gap: 16px;
    }
    .tech-band__item i {
        font-size: 20px;
    }
    .process-steps {
        grid-template-columns: 1fr;
        gap: 36px;
    }
}

/* ═══════════════════════════════════════════════════
   BLOG PREMIUM
   ═══════════════════════════════════════════════════ */

/* Category filter pills */
.blog-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}
.blog-filter-pill {
    display: inline-block;
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
    background: #fff;
    border: 1px solid rgba(var(--color-secondary-rgb), .1);
    text-decoration: none;
    transition: transform .3s var(--ease-premium), opacity .3s var(--ease-premium), background-color .3s var(--ease-premium), border-color .3s var(--ease-premium), color .3s var(--ease-premium), box-shadow .3s var(--ease-premium);
}
.blog-filter-pill:hover,
.blog-filter-pill.active {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
    box-shadow: 0 4px 16px rgba(var(--color-primary-rgb), .3);
}

/* Featured post (large) */
.blog-featured {
    margin-bottom: 56px;
}
.blog-featured-link {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 48px;
    align-items: center;
    text-decoration: none;
    color: inherit;
    background: #fff;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid rgba(var(--color-secondary-rgb), .06);
    transition: box-shadow .4s var(--ease-premium), transform .4s var(--ease-premium);
}
.blog-featured-link:hover {
    box-shadow: 0 24px 64px rgba(0, 0, 0, .08);
    transform: translateY(-4px);
}
.blog-featured-image {
    overflow: hidden;
    border-radius: 24px 0 0 24px;
}
.blog-featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    min-height: 340px;
    transition: transform .7s var(--ease-premium);
}
.blog-featured-link:hover .blog-featured-image img {
    transform: scale(1.05);
}
.blog-featured-content {
    padding: 40px 40px 40px 0;
}
.blog-featured-content h2 {
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    line-height: 1.25;
    margin-bottom: 16px;
    letter-spacing: -.02em;
}
.blog-featured-content p {
    font-size: 15px;
    line-height: 1.7;
    color: var(--color-text-light);
    margin-bottom: 20px;
}
.blog-featured-content .card-link {
    font-weight: 600;
    color: var(--color-primary);
    font-size: 15px;
}

/* Blog grid header */
.blog-grid-header {
    margin-bottom: 32px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(var(--color-secondary-rgb), .08);
}
.blog-grid-header .section-title {
    font-size: 1.5rem;
    text-align: left;
}

/* Blog empty state */
.blog-empty {
    text-align: center;
    padding: 80px 20px;
}
.blog-empty h2 {
    font-size: 1.8rem;
    margin-bottom: 12px;
}
.blog-empty p {
    color: var(--color-text-light);
    max-width: 480px;
    margin: 0 auto 24px;
    line-height: 1.7;
}

/* Blog CTA section */
.blog-cta-section {
    padding: 0 0 var(--section-padding);
}
.blog-cta-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
    background: var(--color-secondary);
    color: #fff;
    border-radius: 24px;
    padding: 56px 64px;
    position: relative;
    overflow: hidden;
}
.blog-cta-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--color-primary-rgb), .2) 0%, transparent 70%);
    pointer-events: none;
}
.blog-cta-content h2 {
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    margin-bottom: 12px;
    color: #fff;
}
.blog-cta-content p {
    color: rgba(255, 255, 255, .7);
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 24px;
    max-width: 480px;
}
.blog-cta-buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.blog-cta-stats {
    display: flex;
    gap: 40px;
    flex-shrink: 0;
}
.blog-cta-stat {
    text-align: center;
}
.blog-cta-stat .stat-number {
    display: block;
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--color-primary);
    line-height: 1.1;
    letter-spacing: -.03em;
}
.blog-cta-stat span:last-child {
    display: block;
    font-size: 13px;
    color: rgba(255, 255, 255, .6);
    margin-top: 6px;
}

@media (max-width: 768px) {
    .blog-featured-link {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .blog-featured-image {
        border-radius: 24px 24px 0 0;
    }
    .blog-featured-image img {
        min-height: 220px;
    }
    .blog-featured-content {
        padding: 24px;
    }
    .blog-cta-card {
        flex-direction: column;
        padding: 40px 28px;
        text-align: center;
    }
    .blog-cta-content p {
        margin-left: auto;
        margin-right: auto;
    }
    .blog-cta-buttons {
        justify-content: center;
    }
    .blog-grid-header .section-title {
        text-align: center;
    }
}

/* ═══════════════════════════════════════════════════
   CONTACT PAGE PREMIUM
   ═══════════════════════════════════════════════════ */

/* Trust signals bar */
.contact-trust-section {
    padding-top: 48px;
    padding-bottom: 16px;
    background: var(--color-bg);
}
.contact-trust-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}
.contact-trust-item {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #fff;
    padding: 24px 28px;
    border-radius: 16px;
    border: 1px solid rgba(var(--color-secondary-rgb), .06);
    transition: box-shadow .3s var(--ease-premium);
}
.contact-trust-item:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, .06);
}
.contact-trust-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-accent, var(--color-primary)));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}
.contact-trust-text strong {
    display: block;
    font-size: 15px;
    margin-bottom: 2px;
}
.contact-trust-text span {
    font-size: 13px;
    color: var(--color-text-light);
    line-height: 1.4;
}

/* Contact form section */
.contact-form-section {
    padding-top: 56px;
    background: var(--color-bg);
}
.contact-form-header {
    text-align: center;
    margin-bottom: 48px;
}

/* Premium contact form styling */
.contact-form-section .contact-form {
    background: #fff;
    border-radius: 24px;
    padding: 40px;
    border: 1px solid rgba(var(--color-secondary-rgb), .06);
    box-shadow: 0 8px 40px rgba(0, 0, 0, .06);
}
.contact-form-section .wpcf7-form p {
    margin-bottom: 20px;
}
.contact-form-section .wpcf7 label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--color-text);
    margin-bottom: 8px;
}
.contact-form-section .wpcf7 input[type="text"],
.contact-form-section .wpcf7 input[type="email"],
.contact-form-section .wpcf7 input[type="tel"],
.contact-form-section .wpcf7 textarea,
.contact-form-section .wpcf7 select {
    width: 100%;
    padding: 16px 20px;
    font-size: 15px;
    font-family: var(--font-body);
    border: 2px solid rgba(var(--color-secondary-rgb), .08);
    border-radius: 14px;
    background: var(--color-bg);
    transition: transform .3s var(--ease-premium), opacity .3s var(--ease-premium), background-color .3s var(--ease-premium), border-color .3s var(--ease-premium), color .3s var(--ease-premium), box-shadow .3s var(--ease-premium);
    color: var(--color-text);
}
.contact-form-section .wpcf7 input:focus,
.contact-form-section .wpcf7 textarea:focus,
.contact-form-section .wpcf7 select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px rgba(var(--color-primary-rgb), .1);
    background: #fff;
    outline: none;
}
.contact-form-section .wpcf7 textarea {
    min-height: 160px;
    resize: vertical;
}
.contact-form-section .wpcf7 input[type="submit"] {
    width: 100%;
    padding: 18px 36px;
    font-size: 16px;
    font-weight: 700;
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: 14px;
    cursor: pointer;
    transition: transform .3s var(--ease-premium), opacity .3s var(--ease-premium), background-color .3s var(--ease-premium), border-color .3s var(--ease-premium), color .3s var(--ease-premium), box-shadow .3s var(--ease-premium);
    letter-spacing: .3px;
}
.contact-form-section .wpcf7 input[type="submit"]:hover {
    background: var(--color-primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(var(--color-primary-rgb), .3);
}
.contact-form-section .wpcf7 ::placeholder {
    color: rgba(var(--color-secondary-rgb), .35);
    font-style: italic;
}

/* Contact info card */
.contact-info-card {
    background: #fff;
    border-radius: 20px;
    padding: 32px;
    border: 1px solid rgba(var(--color-secondary-rgb), .06);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .03);
    margin-bottom: 24px;
}
.contact-info-card h3 {
    margin-bottom: 24px;
    font-size: 1.2rem;
}

/* Mini FAQ on contact */
.contact-mini-faq {
    background: #fff;
    border-radius: 20px;
    padding: 32px;
    border: 1px solid rgba(var(--color-secondary-rgb), .06);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .03);
}
.contact-mini-faq h4 {
    font-size: 1.1rem;
    margin-bottom: 16px;
}
.contact-faq-item {
    border: 1px solid rgba(var(--color-secondary-rgb), .08);
    border-radius: 12px;
    margin-bottom: 8px;
    overflow: hidden;
    transition: border-color .3s;
}
.contact-faq-item:last-child {
    margin-bottom: 0;
}
.contact-faq-item[open] {
    border-color: rgba(var(--color-primary-rgb), .2);
}
.contact-faq-item summary {
    padding: 14px 18px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.contact-faq-item summary::-webkit-details-marker { display: none; }
.contact-faq-item summary::after {
    content: '+';
    font-size: 18px;
    font-weight: 400;
    color: var(--color-primary);
    transition: transform .3s;
}
.contact-faq-item[open] summary::after {
    transform: rotate(45deg);
}
.contact-faq-item p {
    padding: 0 18px 14px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-text-light);
    margin: 0;
}

/* Final CTA */
.contact-final-cta {
    background: var(--color-bg);
}
.contact-final-cta-inner {
    text-align: center;
    max-width: 560px;
    margin: 0 auto;
}
.contact-final-cta-inner h2 {
    font-size: clamp(1.3rem, 2.5vw, 1.8rem);
    margin-bottom: 12px;
}
.contact-final-cta-inner p {
    color: var(--color-text-light);
    margin-bottom: 20px;
    line-height: 1.6;
}

@media (max-width: 768px) {
    .contact-trust-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .contact-trust-item {
        padding: 18px 20px;
    }
    .contact-mini-faq,
    .contact-info-card {
        padding: 24px;
    }
}

/* ====================================================================
   PREMIUM ICON CARDS - "Next.js" style with gradient accents
   ==================================================================== */

/* Icon-bearing grid cards get enhanced treatment */
.cards-section--grid .card .card-icon-badge {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    font-size: 1.4rem;
    background: var(--color-primary);
    color: #fff;
    position: relative;
    transition: transform .4s var(--ease-premium), box-shadow .4s ease;
}

/* Glow ring behind icon on hover */
.cards-section--grid a.card-clickable:hover .card-icon-badge {
    transform: translateY(-3px) scale(1.08);
    box-shadow: 0 12px 32px -8px rgba(var(--color-primary-rgb), .35);
}

/* Decorative gradient line at card top */
.cards-section--grid .card {
    position: relative;
    overflow: hidden;
}
.cards-section--grid .card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-accent, var(--color-primary-dark)));
    opacity: 0;
    transition: opacity .4s ease;
}
.cards-section--grid a.card-clickable:hover::before {
    opacity: 1;
}

/* Card body when icon present: more generous spacing */
.cards-section--grid .card .card-icon-badge + h3 {
    margin-top: 4px;
}

/* Subtle gradient dot decoration in bottom-right corner */
.cards-section--grid .card::after {
    content: '';
    position: absolute;
    bottom: -40px;
    right: -40px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--color-primary-rgb), .06) 0%, transparent 70%);
    transition: transform .5s var(--ease-premium), opacity .5s ease;
    opacity: 0;
    pointer-events: none;
}
.cards-section--grid a.card-clickable:hover::after {
    opacity: 1;
    transform: translate(-10px, -10px);
}

/* Card title gets better weight + tracking */
.cards-section--grid .card-body h3 {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.3;
}

/* Card description: tighter line height */
.cards-section--grid .card-body .card-text p {
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--color-text-light);
}

/* Card link with animated arrow */
.cards-section--grid .card-link {
    font-weight: 600;
    font-size: 13.5px;
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
    transition: gap .3s ease, color .3s ease;
}
.cards-section--grid a.card-clickable:hover .card-link {
    gap: 10px;
    color: var(--color-primary-dark);
}

/* Grid gap refinement for 3-col icon cards */
.cards-section--grid .grid-3 {
    gap: 28px;
}

/* Stagger reveal animation for cards */
.cards-section--grid .card:nth-child(1) { transition-delay: 0s; }
.cards-section--grid .card:nth-child(2) { transition-delay: .06s; }
.cards-section--grid .card:nth-child(3) { transition-delay: .12s; }
.cards-section--grid .card:nth-child(4) { transition-delay: .18s; }
.cards-section--grid .card:nth-child(5) { transition-delay: .24s; }
.cards-section--grid .card:nth-child(6) { transition-delay: .3s; }

/* ====================================================================
   PREMIUM CARDS - Mobile responsive
   ==================================================================== */
@media (max-width: 768px) {
    .cards-section--grid .grid-3 {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .cards-section--grid .card .card-icon-badge {
        width: 48px;
        height: 48px;
        font-size: 1.1rem;
    }
}

/* --- Reduced motion for new elements --- */
@media (prefers-reduced-motion: reduce) {
    .marquee-band-track { animation: none !important; }
    .cursor-glow { display: none !important; }
    .hero-badge::before { animation: none !important; }
    .cta-banner::before, .cta-banner::after { animation: none !important; }
    .stat:hover { transform: none !important; }
    .about-content h2::after { transition: none !important; }
    .fs-block__image:hover img { transform: none !important; }
    .portfolio-card__link:hover .portfolio-card__image img { transform: none !important; }
    .process-step__icon::before { animation: none !important; }
    .cards-section--grid .card .card-icon-badge { transition: none !important; }
    .cards-section--grid .card::before, .cards-section--grid .card::after { transition: none !important; }
}

/* ============================================
   VIEW TRANSITIONS API - smooth cross-document page transitions
   Enabled for same-origin navigations via @view-transition{navigation:auto}
   in critical.css. Supported: Chrome 126+, Edge 126+, Safari 18.2+ (progressive).
   Unsupported browsers: fall back to instant navigation (no-op).
   ============================================ */
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: .35s;
    animation-timing-function: cubic-bezier(.4, 0, .2, 1);
}
::view-transition-old(root) {
    animation-name: yv-vt-fade-out;
}
::view-transition-new(root) {
    animation-name: yv-vt-fade-in;
}
@keyframes yv-vt-fade-out {
    from { opacity: 1; }
    to   { opacity: 0; }
}
@keyframes yv-vt-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none !important;
    }
}

/* ============================================================
   RÉALISATIONS - Archive grid (page-realisations.php)
   ============================================================ */
.realisations-archive { padding-top: 64px; padding-bottom: 96px; }

.realisations-filters {
    display: flex; flex-wrap: wrap; gap: 12px;
    justify-content: center; margin-bottom: 56px;
}
.realisations-filters__item {
    padding: 10px 22px;
    border-radius: 999px;
    background: var(--color-bg-light, #f8f9fb);
    color: var(--color-text, #1a1a1a);
    font-size: 0.92rem; font-weight: 500;
    border: 1px solid rgba(0,0,0,0.06);
    transition: all 0.2s ease;
}
.realisations-filters__item.is-active {
    background: var(--color-primary, #0f172a);
    color: #fff;
    border-color: var(--color-primary, #0f172a);
}

.realisations-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}
@media (max-width: 1024px) { .realisations-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .realisations-grid { grid-template-columns: 1fr; gap: 24px; } }

.realisation-card {
    display: block;
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(15,23,42,0.06), 0 8px 24px -8px rgba(15,23,42,0.08);
    text-decoration: none;
    color: inherit;
    transition: transform 0.35s cubic-bezier(0.2,0.8,0.2,1), box-shadow 0.35s ease;
    border: 1px solid rgba(15,23,42,0.05);
}
.realisation-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 4px 8px rgba(15,23,42,0.08), 0 24px 48px -12px rgba(15,23,42,0.2);
}
.realisation-card__visual {
    position: relative;
    aspect-ratio: 16/10;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.95);
    overflow: hidden;
}
.realisation-card__visual::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 20%, rgba(255,255,255,0.15), transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(255,255,255,0.1), transparent 50%);
    pointer-events: none;
}
.realisation-card__category {
    position: absolute;
    top: 20px; left: 20px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,0.18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    border: 1px solid rgba(255,255,255,0.25);
    z-index: 2;
}
.realisation-card__initials {
    font-size: 4.5rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    opacity: 0.55;
    z-index: 1;
    font-family: Inter, system-ui, sans-serif;
}
.realisation-card__body { padding: 28px 28px 32px; }
.realisation-card__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    color: var(--color-text-muted, #6b7280);
    margin-bottom: 12px;
}
.realisation-card__meta .dot { opacity: 0.6; }
.realisation-card__title {
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 12px;
    color: var(--color-text, #1a1a1a);
    line-height: 1.2;
}
.realisation-card__excerpt {
    font-size: 0.95rem;
    color: var(--color-text-muted, #6b7280);
    line-height: 1.55;
    margin: 0 0 20px;
}
.realisation-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-primary, #0f172a);
}
.realisation-card__cta i { transition: transform 0.3s ease; }
.realisation-card:hover .realisation-card__cta i { transform: translateX(4px); }

/* ============================================================
   RÉALISATION - Page détail (single-realisation.php)
   ============================================================ */
.realisation-single { }

.realisation-hero {
    position: relative;
    padding: 100px 0 120px;
    color: #fff;
    overflow: hidden;
}
.realisation-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 15% 25%, rgba(255,255,255,0.12), transparent 45%),
        radial-gradient(circle at 85% 75%, rgba(255,255,255,0.08), transparent 45%);
    pointer-events: none;
}
.realisation-hero__inner { position: relative; z-index: 1; }
.realisation-hero__breadcrumb { margin-bottom: 40px; }
.realisation-hero__breadcrumb a {
    color: rgba(255,255,255,0.85);
    font-size: 0.92rem;
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.2s ease;
}
.realisation-hero__breadcrumb a:hover {
    color: #fff;
    transform: translateX(-4px);
}
.realisation-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 28px;
}
.realisation-hero__category {
    padding: 8px 18px;
    border-radius: 999px;
    background: rgba(255,255,255,0.22);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid rgba(255,255,255,0.3);
}
.realisation-hero__tag {
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.18);
    font-size: 0.85rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.realisation-hero__title {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.05;
    margin: 0 0 24px;
    color: #fff;
    max-width: 900px;
}
.realisation-hero__subtitle {
    font-size: 1.2rem;
    color: rgba(255,255,255,0.88);
    line-height: 1.5;
    max-width: 720px;
    margin: 0;
}

.realisation-context,
.realisation-scope { padding: 80px 0; }
.realisation-scope { background: var(--color-bg-light, #f8f9fb); }
.realisation-context__grid {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 64px;
    align-items: start;
}
@media (max-width: 768px) {
    .realisation-context__grid { grid-template-columns: 1fr; gap: 24px; }
}
.realisation-context__label .eyebrow {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-primary, #0f172a);
    margin-bottom: 8px;
}
.realisation-context__label h2 {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0;
    line-height: 1.2;
}
.realisation-context__text p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--color-text, #1a1a1a);
    margin: 0;
}

.realisation-services { padding: 80px 0; }
.realisation-services .section-header .eyebrow {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-primary, #0f172a);
    margin-bottom: 8px;
}
.realisation-services__list {
    list-style: none;
    padding: 0;
    margin: 48px auto 0;
    max-width: 900px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
}
.realisation-services__item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 24px;
    background: var(--color-bg-light, #f8f9fb);
    border-radius: 14px;
    border: 1px solid rgba(15,23,42,0.06);
    font-size: 0.98rem;
    font-weight: 500;
    color: var(--color-text, #1a1a1a);
}
.realisation-services__item i {
    color: var(--color-primary, #0f172a);
    font-size: 1.1rem;
    flex-shrink: 0;
}

.realisation-visual { padding: 40px 0 96px; }
.realisation-visual__frame {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    aspect-ratio: 16/8;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 24px 64px -16px rgba(15,23,42,0.3);
}
.realisation-visual__frame::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 30%, rgba(255,255,255,0.18), transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(255,255,255,0.12), transparent 55%);
    pointer-events: none;
}
.realisation-visual__watermark {
    color: rgba(255,255,255,0.95);
    font-size: clamp(2rem, 6vw, 4.5rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    text-align: center;
    padding: 0 32px;
    font-family: Inter, system-ui, sans-serif;
    position: relative;
    z-index: 1;
}

.realisation-nav { padding: 0 0 80px; }
.realisation-nav__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    padding-top: 48px;
    border-top: 1px solid rgba(15,23,42,0.08);
}
@media (max-width: 640px) {
    .realisation-nav__grid { grid-template-columns: 1fr; }
}
.realisation-nav__link {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 28px 32px;
    background: var(--color-bg-light, #f8f9fb);
    border-radius: 16px;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 1px solid rgba(15,23,42,0.06);
}
.realisation-nav__link:hover {
    background: #fff;
    border-color: rgba(15,23,42,0.15);
    box-shadow: 0 8px 24px -8px rgba(15,23,42,0.12);
    transform: translateY(-2px);
}
.realisation-nav__link--next { text-align: right; align-items: flex-end; }
.realisation-nav__label {
    font-size: 0.82rem;
    color: var(--color-text-muted, #6b7280);
    font-weight: 500;
}
.realisation-nav__link strong {
    font-size: 1.15rem;
    color: var(--color-text, #1a1a1a);
    font-weight: 700;
}

/* Eyebrow utility used in realisation single blocks - centered variant */
.section-header.text-center { text-align: center; }
.section-header.text-center h2 {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0;
}

/* ============================================
   SF SECURITY - FRAMER/FIGMA GRADIENT ENHANCEMENTS
   Dégradé orange foncé #215B68 > orange clair #44CBCF > bleu-vert #5CCCD4
   ============================================ */

/* --- Utility : gradient text (orange vers bleu-vert) --- */
.gradient-text {
    background: var(--gradient-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    display: inline-block;
}

/* --- Hero : overlay dégradé orange/bleu-vert par dessus image --- */
.hero-overlay {
    background: linear-gradient(135deg, rgba(33,91,104,.72) 0%, rgba(68,203,207,.58) 40%, rgba(15,23,42,.75) 100%) !important;
}

/* Hero mesh animé (blob en arrière-plan) */
.hero::before, .page-hero::before {
    content: '';
    position: absolute;
    top: -20%;
    right: -15%;
    width: 65%;
    aspect-ratio: 1;
    background: var(--gradient-blob);
    border-radius: 50%;
    filter: blur(100px);
    opacity: .55;
    z-index: 1;
    animation: sfBlobFloat 18s ease-in-out infinite;
    pointer-events: none;
}
.hero::after, .page-hero::after {
    content: '';
    position: absolute;
    bottom: -25%;
    left: -10%;
    width: 55%;
    aspect-ratio: 1;
    background: radial-gradient(circle, rgba(92,204,212,.7) 0%, transparent 65%);
    border-radius: 50%;
    filter: blur(90px);
    opacity: .6;
    z-index: 1;
    animation: sfBlobFloat2 22s ease-in-out infinite;
    pointer-events: none;
}
@keyframes sfBlobFloat {
    0%, 100% { transform: translate(0,0) scale(1); }
    33% { transform: translate(-40px, 30px) scale(1.08); }
    66% { transform: translate(30px, -20px) scale(.95); }
}
@keyframes sfBlobFloat2 {
    0%, 100% { transform: translate(0,0) scale(1); }
    50% { transform: translate(50px, -40px) scale(1.12); }
}

/* --- Hero h1 : accent gradient sur sub-span --- */
.hero-content h1 em, .hero-content h1 .accent,
.page-hero-content h1 em, .page-hero-content h1 .accent {
    background: linear-gradient(90deg, #F7A85E 0%, #FFE5BF 50%, #9DD5C8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-style: normal;
}

/* --- Buttons : gradient CTA premium --- */
.btn-primary {
    background: var(--gradient-brand-warm) !important;
    border-color: transparent !important;
    box-shadow: 0 8px 24px -8px rgba(33,91,104,.45), inset 0 1px 0 rgba(255,255,255,.2);
    position: relative;
    /* isolation cree un contexte d'empilement : le voile de survol peut alors
       vivre en z-index negatif SANS sortir du bouton. Sans ca, le voile
       recouvrait le libelle des boutons dont le texte est un simple noeud de
       texte (« Nous contacter » du header : <a class="btn btn-primary">texte</a>,
       aucun element enfant, donc la regle .btn-primary > * ne protegeait rien).
       Resultat : au survol le bouton devenait un aplat sombre sans texte. */
    isolation: isolate;
    overflow: hidden;
}
.btn-primary::before {
    content: '';
    position: absolute;
    inset: 0;
    /* Le survol assombrit, il n'eclaircit pas : le texte de ces boutons est
       force en blanc (regle .nav-cta .btn-primary { color:#fff !important }),
       et l'ancien degrade cyan clair -> cyan le rendait illisible (« Nous
       contacter » devenait un aplat bleu sans texte). */
    background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-primary) 100%);
    opacity: 0;
    transition: opacity .4s var(--ease-premium);
    z-index: -1;
}
.btn-primary > * { position: relative; z-index: 1; }
.btn-primary:hover::before { opacity: 1; }
.btn-primary:hover {
    /* Le liseré cyan garde le bouton visible quand il survole un fond sombre. */
    box-shadow: 0 12px 36px -8px rgba(15, 53, 62, .5), 0 0 0 1px rgba(var(--color-accent-rgb), .5);
    transform: translateY(-3px);
}

/* --- Section-badge : gradient subtil --- */
.section-badge {
    background: linear-gradient(135deg, rgba(33,91,104,.1) 0%, rgba(92,204,212,.1) 100%);
    border: 1px solid rgba(68,203,207,.25);
    color: #0F353E;
    backdrop-filter: blur(8px);
}

/* --- Cards : gradient border hover (Framer style) --- */
.services-grid .service-card,
.cards-layout-minimal .card,
.cards-layout-grid .card,
.cards-layout-featured .card {
    position: relative;
    background: #fff;
    border: 1px solid rgba(15,23,42,.06);
    transition: transform .4s var(--ease-premium), box-shadow .4s var(--ease-premium), border-color .3s;
}
.services-grid .service-card::before,
.cards-layout-minimal .card::before,
.cards-layout-grid .card::before,
.cards-layout-featured .card::before {
    content: '';
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: inherit;
    background: var(--gradient-brand);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity .4s;
    pointer-events: none;
}
a.card-clickable:hover::before,
.services-grid a.service-card:hover::before {
    opacity: 1;
}

/* --- Services homepage : numéros et accent gradient --- */
.services-grid .service-card .service-icon {
    background: var(--gradient-brand-warm);
    color: #fff;
}

/* --- Cards layout minimal : numérotation gradient --- */
.cards-layout-minimal .card-number,
.cards-layout-minimal .card::before[data-number] {
    background: var(--gradient-brand);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* --- Section-title : underline gradient centré --- */
.section-title {
    position: relative;
    padding-bottom: 8px;
}

/* --- CTA section : gradient de fond premium --- */
.cta-section, section.cta-section {
    background: linear-gradient(135deg, #215B68 0%, #44CBCF 40%, #5CCCD4 100%) !important;
    color: #fff;
    position: relative;
    overflow: hidden;
}
.cta-section::before {
    content: '';
    position: absolute;
    top: 0; right: -20%;
    width: 60%; aspect-ratio: 1;
    background: radial-gradient(circle, rgba(255,255,255,.15) 0%, transparent 60%);
    border-radius: 50%;
    pointer-events: none;
}
.cta-section::after {
    content: '';
    position: absolute;
    bottom: -30%; left: -10%;
    width: 50%; aspect-ratio: 1;
    background: radial-gradient(circle, rgba(15,23,42,.2) 0%, transparent 60%);
    border-radius: 50%;
    pointer-events: none;
}
.cta-section h2, .cta-section p { color: #fff !important; position: relative; z-index: 1; }
.cta-section .btn-primary {
    background: #fff !important;
    color: var(--color-primary) !important;
}
.cta-section .btn-primary:hover {
    background: #0f172a !important;
    color: #fff !important;
}
.cta-section .btn-secondary {
    background: transparent !important;
    border: 2px solid rgba(255,255,255,.5) !important;
    color: #fff !important;
}
.cta-section .btn-secondary:hover {
    background: #fff !important;
    color: var(--color-primary) !important;
    border-color: #fff !important;
}

/* --- Numbers section : gradient sur les chiffres --- */
.numbers-section .stat-number {
    background: var(--gradient-brand);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.stat::before {
    background: var(--gradient-brand-warm) !important;
}

/* --- FAQ : accent gradient sur hover --- */
.faq-item[open] {
    border-image: var(--gradient-brand) 1;
    box-shadow: 0 8px 24px -8px rgba(33,91,104,.2);
}
.faq-item summary::after {
    color: var(--color-primary);
}

/* --- Partenaires : carrousel défilé infini (marquee) --- */
.partners-marquee {
    overflow: hidden;
    position: relative;
    padding: 32px 0;
    mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.partners-marquee-track {
    display: flex;
    gap: 64px;
    width: max-content;
    animation: partnersMarquee 30s linear infinite;
}
.partners-marquee:hover .partners-marquee-track { animation-play-state: paused; }
.partners-marquee-item {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 32px;
    background: #fff;
    border: 1px solid rgba(15,23,42,.06);
    border-radius: 16px;
    min-width: 220px;
    height: 110px;
    transition: transform .3s var(--ease-premium), box-shadow .3s;
}
.partners-marquee-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px -8px rgba(33,91,104,.25);
    border-color: rgba(68,203,207,.35);
}
.partners-marquee-item img {
    max-height: 60px;
    max-width: 160px;
    width: auto;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: .7;
    transition: filter .3s, opacity .3s;
}
.partners-marquee-item:hover img {
    filter: grayscale(0%);
    opacity: 1;
}
.partners-marquee-item .partner-name {
    font-weight: 700;
    color: var(--color-secondary);
    font-size: 18px;
}
@keyframes partnersMarquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* --- Page hero : titre plus impactant --- */
.page-hero {
    min-height: 336px;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 55%, #0f172a 100%);
}
@media (min-width: 769px) {
    .page-hero { min-height: 384px; }
}
.page-hero-content h1 {
    font-size: clamp(2rem, 5vw, 3.4rem);
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -0.02em;
}

/* --- Sections alt : légère teinte gradient --- */
section.section:nth-child(even):not(.cta-section):not(.hero):not(.page-hero) {
    background: linear-gradient(180deg, #ffffff 0%, #fbf8f5 100%);
}

/* --- Scroll reveal renforcé --- */
.reveal { opacity: 0; transform: translateY(32px); transition: opacity .8s var(--ease-premium), transform .8s var(--ease-premium); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* --- Nav top bar : gradient accent subtle --- */
.site-header { border-bottom: 1px solid rgba(15,23,42,.06); }
.site-header::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: var(--gradient-brand);
    opacity: 0;
    transition: opacity .4s;
}
.site-header.scrolled::after { opacity: .5; }

/* --- Agence cards (pour page Nos agences) --- */
.agences-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 32px;
    margin-top: 40px;
}
.agence-card {
    position: relative;
    padding: 40px 32px;
    border-radius: 24px;
    background: #fff;
    border: 1px solid rgba(15,23,42,.08);
    overflow: hidden;
    transition: transform .4s var(--ease-premium), box-shadow .4s;
}
.agence-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--gradient-brand-warm);
}
.agence-card:nth-child(2)::before { background: var(--gradient-brand-cool); }
.agence-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 50px -15px rgba(33,91,104,.25);
    border-color: rgba(68,203,207,.3);
}
.agence-card h3 {
    font-size: 1.75rem;
    margin-bottom: 8px;
    background: var(--gradient-brand);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.agence-card .agence-address { color: var(--color-text-light); margin-bottom: 16px; font-size: 15px; }
.agence-card .agence-phone { font-weight: 700; color: var(--color-secondary); display: inline-block; margin-right: 16px; }
.agence-card .agence-zones { margin-top: 20px; padding-top: 20px; border-top: 1px dashed rgba(15,23,42,.1); font-size: 14px; color: var(--color-text-light); }

/* --- Floating shapes pour les sections --- */
.section-with-blob { position: relative; overflow: hidden; }
.section-with-blob::before {
    content: '';
    position: absolute;
    top: 20%; right: -15%;
    width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(33,91,104,.08) 0%, transparent 65%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}
.section-with-blob > .container { position: relative; z-index: 1; }

/* --- Gradient divider ligne --- */
.gradient-divider {
    height: 4px;
    width: 80px;
    margin: 0 auto 32px;
    background: var(--gradient-brand);
    border-radius: 4px;
}

/* Responsive */
@media (max-width: 768px) {
    .hero::before, .page-hero::before,
    .hero::after, .page-hero::after { opacity: .35; }
    .partners-marquee-item { min-width: 160px; height: 90px; padding: 12px 20px; }
    .partners-marquee-item img { max-height: 40px; max-width: 120px; }
    .partners-marquee-track { gap: 32px; }
    .agences-grid { grid-template-columns: 1fr; }
    .agence-card { padding: 32px 24px; }
}

/* ============================================
   === FIX LUCILE 2026-04-15 ===
   Bugs critiques reportes par le client sfsecurity :
   1. Boutons CTA primaires : texte toujours blanc, jamais orange-sur-orange
   2. Hero overlays : assombrir de 15 pour meilleure lisibilite du texte blanc
   3. Hero home mobile : centrer l image de l agent
   4. Cards numerotees (01, 02, 03) : fix overflow horizontal mobile 375px
   5. Navbar mobile : cacher le CTA du header hors menu deroule
   ============================================ */

/* --- 1. BOUTONS : texte blanc force sur tous les CTA primaires --- */
/* Le bouton .btn-primary a un background gradient orange (ligne 4566).
   Sur .cta-banner, une regle plus ancienne tentait de le rendre blanc
   avec texte orange, mais le !important ligne 4566/4567 gagne et on
   se retrouve avec texte orange sur fond orange = invisible.
   On harmonise : tous les boutons primaires ont un fond orange gradient
   et un texte BLANC. Le "secondary" blanc-sur-fond-image reste gere
   separement (hero-buttons .btn-secondary). */
.btn-primary,
.btn-primary:link,
.btn-primary:visited,
.cta-banner .btn-primary,
.cta-banner .btn,
.hero-buttons .btn-primary,
.hero-cta,
.header-cta,
.nav-cta .btn-primary,
.nav-mobile-cta .btn-primary,
section.cta-section .btn,
section.cta-section .btn-primary {
    color: #fff !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.cta-banner .btn-primary:hover,
.cta-banner .btn-primary:focus,
.cta-banner .btn:hover,
.hero-buttons .btn-primary:hover,
.nav-cta .btn-primary:hover,
.nav-mobile-cta .btn-primary:hover,
section.cta-section .btn:hover,
section.cta-section .btn-primary:hover {
    color: #fff !important;
}
/* Override explicite : le CTA dans .cta-banner doit garder le fond
   gradient orange (pas de fond blanc) pour que le texte blanc soit
   lisible. On force le background gradient brand warm. */
.cta-banner .btn-primary,
.cta-banner .btn.btn-primary {
    background: var(--gradient-brand-warm) !important;
    border-color: transparent !important;
}
.cta-banner .btn-primary:hover,
.cta-banner .btn.btn-primary:hover {
    background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-tertiary) 100%) !important;
    color: #fff !important;
    border-color: transparent !important;
}
/* Secondary dans le hero reste transparent avec texte blanc */
.hero-buttons .btn-secondary,
.hero-buttons .btn-secondary:hover { color: #fff !important; }

/* --- 2. HEROES : assombrir overlays de 0.15 --- */
/* Hero global sfsecurity (override ligne 4509, selector egal -> on force
   avec une specificite plus elevee via .hero-section, .hero et .page-hero) :
   rgba(33,91,104,.72) -> .87, rgba(68,203,207,.58) -> .73, rgba(15,23,42,.75) -> .90 */
.hero .hero-overlay,
.hero-section .hero-overlay,
section.hero .hero-overlay {
    background: linear-gradient(135deg, rgba(33,91,104,.87) 0%, rgba(68,203,207,.73) 40%, rgba(15,23,42,.90) 100%) !important;
}
/* Page hero (inner pages) : overlay dark-blue + orange touch, +0.15 */
.page-hero .hero-overlay {
    background:
        linear-gradient(180deg, rgba(var(--color-secondary-rgb), 1) 0%, rgba(var(--color-secondary-rgb), .80) 40%, rgba(var(--color-secondary-rgb), 1) 100%),
        linear-gradient(135deg, rgba(var(--color-primary-rgb), .27) 0%, transparent 50%) !important;
}
/* CTA banner overlay : +0.15 sur chaque stop */
.cta-banner .cta-overlay,
.cta-banner > .cta-overlay {
    background: linear-gradient(135deg, rgba(var(--color-secondary-rgb),1) 0%, rgba(var(--color-primary-rgb),.97) 45%, rgba(var(--color-accent-rgb),.87) 100%) !important;
}

/* --- 3. HERO HOME : centrer l image sur mobile --- */
@media (max-width: 768px) {
    .hero-bg-img,
    .hero .hero-bg-img,
    .hero-section img.hero-bg-img,
    .hero-section .hero-bg,
    .hero-image img {
        object-position: center center !important;
    }
}

/* --- 4. CARDS NUMEROTEES : fix overflow mobile --- */
/* Le grid `cards-layout-minimal` force minmax(440px,1fr) ce qui fait
   deborder sur 375px. On passe en 1 colonne < 768px et on compacte
   le padding-left + la taille du numero pour liberer de la place au
   texte du titre. Le card-body recoit un min-width:0 pour permettre
   le wrap correct des titres longs. */
@media (max-width: 768px) {
    .cards-layout-minimal {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        max-width: 100% !important;
    }
    .cards-layout-minimal .card-minimal {
        padding: 20px 20px 24px 64px !important;
    }
    .cards-layout-minimal .card-number {
        font-size: 2.2rem !important;
        top: 18px !important;
        left: 14px !important;
    }
    .cards-layout-minimal .card-body {
        min-width: 0;
    }
    .cards-layout-minimal .card-body h3 {
        font-size: 1.05rem !important;
        line-height: 1.3 !important;
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
    }
    .cards-layout-minimal .card-body .card-text,
    .cards-layout-minimal .card-body p {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    .cards-layout-minimal .card-minimal::after {
        left: 64px !important;
    }
    /* Meme traitement pour card-steps (memes classes de base) */
    .cards-layout-steps {
        grid-template-columns: 1fr !important;
    }
    .cards-layout-steps .card-steps {
        padding: 40px 20px 28px !important;
    }
    .cards-layout-steps .card-number {
        font-size: 2.4rem !important;
    }
    .cards-layout-steps .card-body {
        min-width: 0;
    }
    .cards-layout-steps .card-body h3,
    .cards-layout-steps .card-body p {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    /* Filet de securite : jamais de scroll horizontal dans une card */
    .cards-wrap, .cards-section .container {
        overflow-x: hidden;
    }
    .cards-wrap .card {
        max-width: 100%;
    }
}

/* --- 5. NAVBAR MOBILE : cacher le CTA du header hors menu ouvert --- */
/* Sur mobile, le bouton "Demander un devis" doit etre dans le menu
   deroule (.nav-mobile-cta) uniquement, jamais a cote du logo. */
@media (max-width: 960px) {
    .nav-cta {
        display: none !important;
    }
    header#site-header .nav-container > .nav-cta,
    header#site-header .nav-cta {
        display: none !important;
    }
    /* Les elements nav-mobile-cta restent affiches quand le menu est ouvert */
    .nav-menu.active ~ .nav-mobile-cta {
        display: flex !important;
    }
}
/* Pour les breakpoints intermediaires (768-960), forcer aussi le meme
   comportement sur d eventuelles regles fluides qui leak. */
@media (max-width: 768px) {
    #site-header .nav-cta { display: none !important; }
    /* Le burger reste seul visible a cote du logo */
    #site-header .nav-toggle { display: block !important; }
}


/* ============================================
   === SF SECURITY V3 - 2026-04-15 ===
   1. Gradient orange -> turquoise signature sur tous les overlays
   2. Bloc avis Google marquee 2 lignes
   3. Page recrutement framer-style
   4. Contact form framer-style
   ============================================ */

/* --- 1. OVERLAYS SIGNATURE (orange -> turquoise) -------------- */
/* On override toutes les variantes d'overlay (home, page, cta).
   Les FIX LUCILE plus haut utilisent la couleur --color-secondary
   (bleu foncé) : on re-override ici avec le gradient turquoise pour
   matcher le vrai site sfsecurity.fr. Specificite + ordre de
   cascade gagne. */

.hero .hero-overlay,
.hero-section .hero-overlay,
section.hero .hero-overlay {
    background: var(--gradient-hero-overlay-strong) !important;
}
.page-hero .hero-overlay {
    background: var(--gradient-hero-overlay) !important;
}
.cta-banner .cta-overlay,
.cta-banner > .cta-overlay,
section.cta-section::before {
    background: var(--gradient-hero-overlay-strong) !important;
}
section.cta-section {
    position: relative;
    overflow: hidden;
}
section.cta-section::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}
section.cta-section > * {
    position: relative;
    z-index: 2;
}

/* --- 1b. BTN-PRIMARY : gradient brand + hover inversion ------- */
.btn-primary,
.btn.btn-primary,
a.btn-primary {
    background: var(--gradient-brand) !important;
    border-color: transparent !important;
    color: #fff !important;
    background-size: 200% 100%;
    background-position: 0% 50%;
    transition: background-position .5s var(--ease-premium), transform var(--transition), box-shadow var(--transition), color var(--transition) !important;
}
.btn-primary:hover,
.btn.btn-primary:hover,
a.btn-primary:hover,
.btn-primary:focus-visible {
    background: var(--gradient-brand-reverse) !important;
    background-size: 200% 100%;
    background-position: 100% 50%;
    transform: translateY(-2px);
    box-shadow: 0 10px 28px -8px rgba(33,91,104,.45), 0 4px 14px -4px rgba(92,204,212,.35);
    color: #fff !important;
}

/* Accents / barres / badges gradient brand */
.section-divider,
.gradient-bar,
.accent-bar {
    height: 4px;
    background: var(--gradient-brand);
    border-radius: 999px;
}

/* --- 2. REVIEWS MARQUEE (framer-style 2 rows) ----------------- */
.reviews-marquee {
    position: relative;
    padding: 90px 0 80px;
    background: linear-gradient(180deg, #ffffff 0%, #faf7f3 100%);
    overflow: hidden;
}
.reviews-marquee::before,
.reviews-marquee::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 120px;
    z-index: 3;
    pointer-events: none;
}
.reviews-marquee::before {
    left: 0;
    background: linear-gradient(90deg, #ffffff 0%, rgba(255,255,255,0) 100%);
}
.reviews-marquee::after {
    right: 0;
    background: linear-gradient(-90deg, #ffffff 0%, rgba(255,255,255,0) 100%);
}
.reviews-marquee__header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 56px;
    padding: 0 24px;
    position: relative;
    z-index: 2;
}
.reviews-marquee__header h2 {
    font-size: clamp(2rem, 4vw, 2.75rem);
    line-height: 1.15;
    margin-bottom: 14px;
    background: var(--gradient-brand);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.reviews-marquee__header p {
    color: var(--color-text-light);
    font-size: 1.05rem;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}
.reviews-marquee__google-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
    font-size: 0.9rem;
    font-weight: 600;
    color: #3c4043;
}
.reviews-marquee__google-pill .g-stars { color: #fbbc04; letter-spacing: 1px; }
.reviews-marquee__row {
    display: flex;
    width: 100%;
    margin-bottom: 28px;
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.reviews-marquee__row:last-child { margin-bottom: 0; }
.reviews-marquee__track {
    display: flex;
    gap: 24px;
    width: max-content;
    flex-shrink: 0;
    animation: revMarqueeLeft 80s linear infinite;
    will-change: transform;
}
.reviews-marquee__row--ltr .reviews-marquee__track {
    animation-name: revMarqueeRight;
    animation-duration: 90s;
}
.reviews-marquee__row:hover .reviews-marquee__track,
.reviews-marquee.is-paused .reviews-marquee__track {
    animation-play-state: paused;
}
@keyframes revMarqueeLeft {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}
@keyframes revMarqueeRight {
    from { transform: translate3d(-50%, 0, 0); }
    to   { transform: translate3d(0, 0, 0); }
}

.review-card {
    flex: 0 0 340px;
    max-width: 340px;
    min-height: 210px;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 16px;
    padding: 24px 26px;
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.04), 0 10px 30px -12px rgba(15, 23, 42, 0.12);
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: transform .35s var(--ease-premium), box-shadow .35s var(--ease-premium), border-color .35s var(--ease-premium);
}
.review-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(15,23,42,.05), 0 20px 45px -14px rgba(33, 91, 104, 0.22);
    border-color: rgba(68, 203, 207, 0.25);
}
.review-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.review-card__google {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #3c4043;
    letter-spacing: -0.01em;
}
.review-card__google-logo {
    width: 20px;
    height: 20px;
    display: inline-block;
    flex-shrink: 0;
}
.review-card__stars {
    display: inline-flex;
    gap: 2px;
    font-size: 0.95rem;
    letter-spacing: 1px;
    line-height: 1;
    color: #fbbc04;
}
.review-card__stars .star-empty { color: #e3e5e8; }
.review-card__text {
    font-size: 0.95rem;
    line-height: 1.55;
    color: #1f2937;
    flex: 1 1 auto;
    margin: 0;
    /* max 5 lignes */
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.review-card__footer {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 8px;
    border-top: 1px solid rgba(15, 23, 42, 0.06);
}
.review-card__avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--gradient-brand);
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    letter-spacing: -0.02em;
}
.review-card__meta {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
}
.review-card__name {
    font-weight: 600;
    font-size: 0.9rem;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.review-card__time {
    font-size: 0.78rem;
    color: #64748b;
}

@media (max-width: 768px) {
    .reviews-marquee { padding: 64px 0 56px; }
    .review-card { flex: 0 0 280px; max-width: 280px; padding: 20px 22px; }
    .reviews-marquee__header { margin-bottom: 36px; }
    .reviews-marquee::before,
    .reviews-marquee::after { width: 60px; }
}
@media (prefers-reduced-motion: reduce) {
    .reviews-marquee__track { animation: none !important; }
}

/* --- 3. PAGE RECRUTEMENT (framer / figma style) --------------- */
.recrut-offer {
    padding: 90px 0;
    background: linear-gradient(180deg, #ffffff 0%, #faf7f3 100%);
}
.recrut-offer__head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 56px;
}
.recrut-offer__head h2 {
    font-size: clamp(2rem, 4vw, 2.75rem);
    margin-bottom: 14px;
}
.recrut-offer__head p { color: var(--color-text-light); font-size: 1.05rem; }
.recrut-offer__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
}
.recrut-card {
    position: relative;
    padding: 36px 28px 28px;
    background: #fff;
    border: 1px solid rgba(15,23,42,.06);
    border-radius: 20px;
    overflow: hidden;
    transition: transform .35s var(--ease-premium), box-shadow .35s var(--ease-premium), border-color .35s var(--ease-premium);
}
.recrut-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--gradient-brand);
    transform-origin: left;
    transform: scaleX(0);
    transition: transform .5s var(--ease-premium);
}
.recrut-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 45px -18px rgba(33,91,104,.28);
    border-color: rgba(68,203,207,.3);
}
.recrut-card:hover::before { transform: scaleX(1); }
.recrut-card__num {
    display: inline-block;
    font-size: 2.25rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
    margin-bottom: 18px;
    background: var(--gradient-brand);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-variant-numeric: tabular-nums;
}
.recrut-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    border-radius: 12px;
    background: rgba(33,91,104,.08);
    color: var(--color-primary);
    font-size: 1.1rem;
    margin-bottom: 16px;
    margin-left: 12px;
    vertical-align: top;
}
.recrut-card__title {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.4;
    color: #0f172a;
    margin: 0;
}

.recrut-values {
    padding: 90px 0;
    background: #ffffff;
}
.recrut-values__grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 64px;
    align-items: center;
}
.recrut-values__text h2 {
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    margin-bottom: 20px;
    line-height: 1.2;
}
.recrut-values__text p {
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--color-text);
    margin-bottom: 16px;
}
.recrut-values__visual {
    position: relative;
    aspect-ratio: 4/5;
    border-radius: 24px;
    overflow: hidden;
    background: var(--gradient-brand);
    box-shadow: 0 40px 80px -30px rgba(33,91,104,.35);
}
.recrut-values__visual img {
    width: 100%; height: 100%;
    object-fit: cover;
    mix-blend-mode: normal;
}
.recrut-values__visual::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(15,23,42,.45) 100%);
}
.recrut-values__badge {
    position: absolute;
    bottom: 20px; left: 20px;
    padding: 10px 18px;
    border-radius: 999px;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font-size: 0.9rem;
    font-weight: 600;
    color: #0f172a;
    z-index: 2;
    box-shadow: 0 4px 12px rgba(0,0,0,.1);
}

.recrut-form {
    padding: 90px 0;
    background: linear-gradient(135deg, rgba(33,91,104,.04) 0%, rgba(68,203,207,.03) 50%, rgba(92,204,212,.05) 100%);
    position: relative;
    overflow: hidden;
}
.recrut-form::before {
    content: '';
    position: absolute;
    top: -150px; right: -150px;
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(33,91,104,.1) 0%, transparent 65%);
    border-radius: 50%;
    pointer-events: none;
}
.recrut-form::after {
    content: '';
    position: absolute;
    bottom: -150px; left: -150px;
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(92,204,212,.1) 0%, transparent 65%);
    border-radius: 50%;
    pointer-events: none;
}
.recrut-form__container {
    position: relative;
    z-index: 1;
    max-width: 780px;
    margin: 0 auto;
}
.recrut-form__head {
    text-align: center;
    margin-bottom: 48px;
}
.recrut-form__head h2 {
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    margin-bottom: 12px;
}
.recrut-form__head p { color: var(--color-text-light); font-size: 1.05rem; }
.recrut-form__card {
    background: #ffffff;
    border-radius: 24px;
    padding: 48px;
    border: 1px solid rgba(15,23,42,.06);
    box-shadow: 0 30px 70px -30px rgba(15,23,42,.18);
}
.recrut-form__grid,
.contact-form-card__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.recrut-form__field,
.contact-form-card__field {
    display: flex;
    flex-direction: column;
}
.recrut-form__field--full,
.contact-form-card__field--full { grid-column: 1 / -1; }
.recrut-form__field label,
.contact-form-card__field label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 8px;
    letter-spacing: -0.01em;
}
.recrut-form__field label .req,
.contact-form-card__field label .req {
    color: var(--color-primary);
    margin-left: 2px;
}
.recrut-form__field input,
.recrut-form__field select,
.recrut-form__field textarea,
.contact-form-card__field input,
.contact-form-card__field select,
.contact-form-card__field textarea {
    width: 100%;
    padding: 13px 16px;
    border: 1px solid rgba(15,23,42,.12);
    border-radius: 12px;
    background: #ffffff;
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: #0f172a;
    transition: border-color .2s, box-shadow .2s, background .2s;
    appearance: none;
    -webkit-appearance: none;
}
.recrut-form__field select,
.contact-form-card__field select {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23215B68' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
}
.recrut-form__field input:focus,
.recrut-form__field select:focus,
.recrut-form__field textarea:focus,
.contact-form-card__field input:focus,
.contact-form-card__field select:focus,
.contact-form-card__field textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px rgba(33,91,104,.12);
    background: #fff;
}
.recrut-form__field textarea,
.contact-form-card__field textarea {
    min-height: 140px;
    resize: vertical;
}
.recrut-form__field input[type="file"],
.contact-form-card__field input[type="file"] {
    padding: 10px 12px;
    cursor: pointer;
    font-size: 0.85rem;
}
.recrut-form__field input[type="file"]::file-selector-button {
    padding: 8px 14px;
    margin-right: 12px;
    border: 0;
    border-radius: 8px;
    background: var(--gradient-brand);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    font-size: 0.85rem;
}
.recrut-form__submit,
.contact-form-card__submit {
    margin-top: 28px;
    text-align: center;
}
.recrut-form__submit button,
.contact-form-card__submit button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 42px;
    background: var(--gradient-brand);
    background-size: 200% 100%;
    background-position: 0% 50%;
    color: #fff;
    border: 0;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: background-position .5s var(--ease-premium), transform .3s, box-shadow .3s;
    box-shadow: 0 10px 28px -8px rgba(33,91,104,.4);
}
.recrut-form__submit button:hover,
.contact-form-card__submit button:hover {
    background-position: 100% 50%;
    transform: translateY(-2px);
    box-shadow: 0 14px 36px -8px rgba(33,91,104,.5), 0 6px 18px -6px rgba(92,204,212,.35);
}
.recrut-form__notice,
.contact-form-card__notice {
    margin-top: 20px;
    padding: 14px 18px;
    border-radius: 12px;
    font-size: 0.9rem;
    line-height: 1.5;
    text-align: center;
}
.recrut-form__notice.is-success,
.contact-form-card__notice.is-success {
    background: var(--color-success-bg);
    color: var(--color-success-dark);
    border: 1px solid rgba(16,185,129,.25);
}
.recrut-form__notice.is-error,
.contact-form-card__notice.is-error {
    background: var(--color-error-bg);
    color: var(--color-error-dark);
    border: 1px solid rgba(239,68,68,.25);
}

/* Contact form carte dedie (page /contact/) */
.contact-form-card {
    background: #ffffff;
    border-radius: 24px;
    padding: 40px;
    border: 1px solid rgba(15,23,42,.06);
    box-shadow: 0 30px 70px -30px rgba(15,23,42,.18);
}
.contact-form-card h2 { margin-bottom: 24px; font-size: 1.5rem; }

@media (max-width: 768px) {
    .recrut-offer,
    .recrut-values,
    .recrut-form { padding: 60px 0; }
    .recrut-values__grid { grid-template-columns: 1fr; gap: 40px; }
    .recrut-form__card,
    .contact-form-card { padding: 28px 22px; }
    .recrut-form__grid,
    .contact-form-card__grid { grid-template-columns: 1fr; gap: 16px; }
    .recrut-card { padding: 28px 22px 22px; }
    .recrut-values__visual { aspect-ratio: 4/3; }
}

/* === FIN SF SECURITY V3 === */

/* --- 4b. Contact Form 7 integration - style framer --- */
.contact-form-card .wpcf7 .form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.contact-form-card .wpcf7 .form-group { display: flex; flex-direction: column; }
.contact-form-card .wpcf7 .form-group--full { grid-column: 1 / -1; }
.contact-form-card .wpcf7 label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 8px;
    letter-spacing: -0.01em;
}
.contact-form-card .wpcf7 input[type="text"],
.contact-form-card .wpcf7 input[type="email"],
.contact-form-card .wpcf7 input[type="tel"],
.contact-form-card .wpcf7 textarea,
.contact-form-card .wpcf7 select {
    padding: 13px 16px;
    border: 1px solid rgba(15,23,42,.12);
    border-radius: 12px;
    background: #ffffff;
    font-size: 0.95rem;
    color: #0f172a;
    transition: border-color .2s, box-shadow .2s;
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
}
.contact-form-card .wpcf7 select {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23215B68' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
}
.contact-form-card .wpcf7 input:focus,
.contact-form-card .wpcf7 textarea:focus,
.contact-form-card .wpcf7 select:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 4px rgba(33,91,104,.12) !important;
    outline: none;
}
.contact-form-card .wpcf7 input[type="submit"],
.contact-form-card .wpcf7 button[type="submit"] {
    margin-top: 20px;
    padding: 16px 42px;
    background: var(--gradient-brand) !important;
    background-size: 200% 100% !important;
    background-position: 0% 50% !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 999px !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: background-position .5s var(--ease-premium), transform .3s, box-shadow .3s !important;
    box-shadow: 0 10px 28px -8px rgba(33,91,104,.4);
    display: inline-block;
}
.contact-form-card .wpcf7 input[type="submit"]:hover,
.contact-form-card .wpcf7 button[type="submit"]:hover {
    background-position: 100% 50% !important;
    transform: translateY(-2px);
    box-shadow: 0 14px 36px -8px rgba(33,91,104,.5), 0 6px 18px -6px rgba(92,204,212,.35);
}
.contact-form-card .wpcf7 .wpcf7-submit-wrap,
.contact-form-card .wpcf7 form .wpcf7-submit {
    text-align: center;
}
.contact-form-card .wpcf7 form > p:last-of-type { text-align: center; }

/* Contact grid : harmoniser la dispo */
.contact-grid { gap: 48px; }
@media (max-width: 960px) {
    .contact-grid { grid-template-columns: 1fr; gap: 32px; }
    .contact-form-card .wpcf7 .form-grid { grid-template-columns: 1fr; gap: 16px; }
}

/* ============================================
   === FIX LUCILE 2026-04-15 v2 ===
   1. Boutons : zero bordure partout
   2. Texte boutons toujours lisible (white-space, opacite, fill-color)
   3. Bouton header mobile "Demander un devis" : forcer affichage texte
   ============================================ */

/* 1. Toutes les bordures sur boutons -> transparent */
.btn,
.btn-primary,
.btn-secondary,
.btn-outline,
.btn-secondary-light,
.btn:link, .btn:visited, .btn:hover, .btn:focus, .btn:active,
.btn-primary:link, .btn-primary:visited, .btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.cta-banner .btn, .cta-banner .btn-primary,
.cta-banner .btn:hover, .cta-banner .btn-primary:hover,
.hero-buttons .btn, .hero-buttons .btn-primary, .hero-buttons .btn-secondary,
.hero-buttons .btn:hover, .hero-buttons .btn-primary:hover, .hero-buttons .btn-secondary:hover,
.nav-cta .btn, .nav-cta .btn-primary, .nav-cta .btn-primary:hover,
.nav-mobile-cta .btn, .nav-mobile-cta .btn-primary, .nav-mobile-cta .btn-primary:hover,
section.cta-section .btn, section.cta-section .btn-primary,
.recrut-form .btn, .recrut-form button,
.contact-form-card .btn, .contact-form-card button,
form .btn, form button[type="submit"], form input[type="submit"] {
    border: 0 !important;
    border-color: transparent !important;
    outline: 0;
    box-shadow: 0 6px 18px rgba(33,91,104,.18);
}

/* Hover : ombre plus marquee, pas de bordure */
.btn-primary:hover,
.btn:hover {
    box-shadow: 0 10px 26px rgba(33,91,104,.28) !important;
    border: 0 !important;
}

/* Focus visible : halo doux orange (a11y) au lieu de border */
.btn:focus-visible,
.btn-primary:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(68,203,207,.45), 0 6px 18px rgba(33,91,104,.18) !important;
}

/* 2. Sécurité texte boutons : empêcher tout text-fill transparent qui leak depuis .gradient-text
      (regle definie ailleurs dans la CSS pour les titres) ne touche jamais les .btn */
.btn,
.btn *,
.btn-primary,
.btn-primary *,
.nav-cta .btn,
.nav-cta .btn *,
.nav-mobile-cta .btn,
.nav-mobile-cta .btn * {
    -webkit-text-fill-color: currentColor !important;
    background-clip: padding-box !important;
    -webkit-background-clip: padding-box !important;
    color: #fff !important;
    text-shadow: none;
    opacity: 1;
}

/* Re-appliquer le fond gradient APRES le reset background-clip */
.btn-primary,
.btn.btn-primary,
.nav-cta .btn-primary,
.nav-mobile-cta .btn-primary,
a.btn-primary {
    background-image: var(--gradient-brand) !important;
    background-color: #215B68 !important;
    background-clip: border-box !important;
    -webkit-background-clip: border-box !important;
}

/* Variante secondaire (ghost) : texte blanc sur fond translucide, pas de bordure */
.btn-secondary,
.hero-buttons .btn-secondary {
    background: rgba(255,255,255,.10) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #fff !important;
    border: 0 !important;
}
.btn-secondary:hover,
.hero-buttons .btn-secondary:hover {
    background: rgba(255,255,255,.18) !important;
    color: #fff !important;
}

/* 3. Header mobile : forcer .nav-mobile-cta à sortir du flow header
      et à s'afficher EN BAS du menu déroulant (position: absolute).
      Sinon il apparaît à côté du burger et le texte est invisible. */
@media (max-width: 960px) {
    /* Par défaut caché, même quand menu closed */
    .nav-mobile-cta {
        display: none !important;
    }
    /* Quand menu actif : ancre l'élément au bas du drawer (absolute) */
    .nav-menu.active ~ .nav-mobile-cta {
        display: flex !important;
        flex-direction: column;
        gap: 14px;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: auto;
        left: 0;
        right: 0;
        /* Placé juste en dessous du menu (menu = top:header-height, height auto) */
        /* On utilise top:header-height + scroll du menu, donc on positionne
           avec margin-top via un wrapper impossible -> on utilise sticky-bottom
           du drawer via un padding-bottom dans le menu à la place */
    }
    /* Astuce : au lieu de gérer la position absolute, on met .nav-mobile-cta
       en static mais forcé en bas du header-drawer en utilisant `order` inversé.
       Plus fiable : on recrée la zone CTA DANS le .nav-menu.active via une
       margin-top négative d'alignement + on empile visuellement. */
    .nav-menu.active ~ .nav-mobile-cta {
        position: absolute;
        top: var(--header-height);
        left: 0; right: 0;
        margin-top: 0;
        transform: translateY(0);
        /* Le drawer menu est aussi absolute avec top:header-height. On le
           pousse DANS le drawer via z-index + padding bas du menu. */
    }
    /* Solution finale : plutôt que absolute (qui empile par dessus menu),
       on laisse static MAIS on positionne via flex-order impossible.
       Simplement : le menu drawer contient déjà scroll, et le .nav-mobile-cta
       en sibling-selector flotte. Réel fix : lui donner un display:flex
       block dans le flow, mais masquer le premier bouton au top via :first-of-type.
       → Plus simple : masquer .nav-mobile-cta si elle est DANS le header (top)
       et l'afficher UNIQUEMENT dans une copie placée dans le menu.
       Puisqu'il n'y en a qu'une copie, on force son affichage en fin de menu
       via position:fixed en bas de viewport quand menu ouvert. */
    .nav-menu.active ~ .nav-mobile-cta {
        position: fixed !important;
        top: auto !important;
        bottom: 0;
        left: 0;
        right: 0;
        background: #fff;
        padding: 20px 24px 28px;
        z-index: 1000;
        border-top: 1px solid rgba(15,23,42,.08);
        box-shadow: 0 -8px 24px rgba(15,23,42,.06);
    }
    .nav-mobile-cta .nav-phone {
        font-size: 16px;
        font-weight: 700;
        color: var(--color-primary);
        text-align: center;
    }
    .nav-mobile-cta .btn-primary {
        min-width: 240px;
        padding: 14px 32px;
        font-size: 15px;
        font-weight: 700;
        white-space: nowrap;
        overflow: visible;
        text-align: center;
    }
    /* Header bar : aucun CTA visible (ni .nav-cta ni .nav-mobile-cta) */
    #site-header > .nav-container > .nav-cta,
    #site-header .nav-cta {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        opacity: 0 !important;
    }
    /* Le menu drawer remplit toute la hauteur visible (sinon la zone vide
       entre les items et le CTA fixe laisse voir le hero derrière) */
    .nav-menu.active {
        min-height: calc(100vh - var(--header-height));
        padding-bottom: 140px;
        background: #fff;
    }
}

/* 4. Mobile menu : items menu propres */
@media (max-width: 960px) {
    .nav-menu.active {
        padding: 24px 0 8px;
    }
    .nav-menu.active > li > a,
    /* « Nos offres » et « Nos cabinets » sont des boutons (ils ouvrent le
       mega-menu), pas des liens : sans cette ligne ils gardaient le style du
       mega-menu (8 px de marge, 15 px, graisse 500) et sortaient decales et
       plus maigres que les autres entrees (controle qualite du 2026-09-27). */
    .nav-menu.active > li > .mp-mega-btn {
        padding: 14px 24px;
        font-size: 16px;
        font-weight: 600;
    }
    /* Item actif : background tres leger plutot que bordure */
    .nav-menu.active > li.current-menu-item > a,
    .nav-menu.active > li.current_page_item > a {
        background: linear-gradient(90deg, rgba(33,91,104,.08) 0%, transparent 100%);
        color: var(--color-primary);
    }
}

/* 5. Cards : harmoniser le no-border (pour matcher l'esthetique Lucile)
      sauf pour les cards-clickable au hover qui ont besoin d'un signal visuel */
.card,
.card-minimal,
.card-numbered {
    border: 0 !important;
}
a.card-clickable {
    border: 0 !important;
    box-shadow: 0 4px 16px rgba(15,23,42,.06);
    transition: transform .35s var(--ease-premium), box-shadow .35s var(--ease-premium);
}
a.card-clickable:hover {
    box-shadow: 0 12px 32px rgba(33,91,104,.18) !important;
    border: 0 !important;
    transform: translateY(-4px);
}

/* ============================================
   === FIX LUCILE 2026-04-16 ===
   Hero "À propos" : cadrer sur le visage de l'agent.
   Image 16:9 avec l'agent centré horizontalement, son visage étant dans le
   tiers supérieur. Sur un hero large/court, on remonte l'ancrage pour le voir.
   ============================================ */
.page-id-5433 .hero-bg-img,
body.page-id-5433 .hero-bg-img {
    object-position: center 30% !important;
}
@media (max-width: 768px) {
    .page-id-5433 .hero-bg-img,
    body.page-id-5433 .hero-bg-img {
        object-position: center 25% !important;
    }
}

/* ============================================
   === ENGAGEMENTS CARDS LAYOUT (framer/figma style) ===
   Layout "engagements" dédié. 3 cols desktop, 2 tablette, 1 mobile.
   Card : icône gradient circle + numéro en superposition, titre bold,
   description lisible, liseré gradient en bas qui s'anime au hover.
   ============================================ */
.cards-section--engagements { padding: 88px 0; }
.cards-wrap.grid-engagements {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-top: 48px;
}
.engagement-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 40px 32px 44px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.03);
    transition: transform .4s var(--ease-premium), box-shadow .4s var(--ease-premium);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    isolation: isolate;
}
.engagement-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(800px circle at 0% 0%, rgba(68,203,207,.05), transparent 50%);
    opacity: 0;
    transition: opacity .4s var(--ease-premium);
    pointer-events: none;
    z-index: -1;
}
.engagement-card:hover::before { opacity: 1; }
a.engagement-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 48px rgba(15,23,42,.08), 0 4px 12px rgba(33,91,104,.08);
}
.engagement-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.engagement-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: var(--gradient-brand);
    color: #fff;
    font-size: 24px;
    flex-shrink: 0;
    box-shadow: 0 8px 20px rgba(33,91,104,.22);
    transition: transform .4s var(--ease-premium);
}
a.engagement-card:hover .engagement-icon {
    transform: rotate(-4deg) scale(1.05);
}
.engagement-num {
    font-family: var(--font-heading, var(--font-sans));
    font-size: 44px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    background: var(--gradient-brand);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    opacity: .25;
    transition: opacity .4s var(--ease-premium);
}
a.engagement-card:hover .engagement-num { opacity: .55; }
.engagement-body { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.engagement-title {
    font-size: clamp(1.25rem, 1.6vw, 1.5rem);
    font-weight: 700;
    line-height: 1.25;
    color: var(--color-secondary, #0F172A);
    margin: 0;
    letter-spacing: -0.01em;
}
.engagement-text {
    font-size: 15px;
    line-height: 1.65;
    color: var(--color-text-muted, #5a6677);
}
.engagement-text p { margin: 0; }
.engagement-text p + p { margin-top: 8px; }
.engagement-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-weight: 600;
    color: var(--color-primary);
    font-size: 14px;
}
.engagement-accent {
    position: absolute;
    left: 32px;
    right: 32px;
    bottom: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--gradient-brand);
    transform: scaleX(.18);
    transform-origin: left center;
    transition: transform .5s var(--ease-premium);
}
a.engagement-card:hover .engagement-accent { transform: scaleX(1); }

@media (max-width: 1024px) {
    .cards-wrap.grid-engagements { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (max-width: 640px) {
    .cards-wrap.grid-engagements { grid-template-columns: 1fr; gap: 16px; margin-top: 32px; }
    .engagement-card { padding: 32px 24px 36px; }
    .engagement-icon { width: 56px; height: 56px; font-size: 20px; }
    .engagement-num { font-size: 36px; }
}

/* ============================================
   === CARDS PARTENAIRES : logo en bas de la card ===
   Ajoute un logo brand en pied de card (wp_render_card standard).
   ============================================ */
.card-partner-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 20px;
    margin-top: 16px;
    border-top: 1px solid rgba(15,23,42,.08);
    min-height: 56px;
}
.card-partner-logo img {
    max-width: 140px;
    max-height: 40px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: grayscale(0%);
    opacity: .92;
    transition: opacity .3s ease;
}
.card-partner-logo:hover img { opacity: 1; }

/* ============================================
   === HOME SERVICES GRID (7 cards avec photo) ===
   Utilisée sur front-page.php. 4 colonnes desktop (4+3),
   2 colonnes tablette, 1 colonne mobile.
   ============================================ */
.home-services { background: var(--color-background, #fafafa); }
.home-services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 40px;
}
.home-service-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(15,23,42,.05);
    text-decoration: none;
    color: inherit;
    transition: transform .35s var(--ease-premium, cubic-bezier(.2,.7,.2,1)), box-shadow .35s ease;
    will-change: transform;
}
a.home-service-card.card-clickable:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(15,23,42,.12);
}
.home-service-card__media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: linear-gradient(135deg, #1e293b, #334155);
}
.home-service-card__img,
.home-service-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s var(--ease-premium, cubic-bezier(.2,.7,.2,1));
}
a.home-service-card.card-clickable:hover .home-service-card__img {
    transform: scale(1.06);
}
.home-service-card__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15,23,42,0) 40%, rgba(15,23,42,.55) 100%);
    pointer-events: none;
}
.home-service-card__icon {
    position: absolute;
    left: 16px;
    bottom: 16px;
    z-index: 2;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--gradient-brand, linear-gradient(135deg,#f97316,#06b6d4));
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    box-shadow: 0 6px 18px rgba(15,23,42,.25);
}
.home-service-card__num {
    position: absolute;
    right: 16px;
    top: 16px;
    z-index: 2;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.85);
    backdrop-filter: blur(6px);
    color: var(--color-secondary, #0f172a);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
}
.home-service-card__body {
    padding: 22px 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}
.home-service-card__title {
    font-size: 19px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
    color: var(--color-secondary, #0f172a) !important;
}
a.home-service-card .home-service-card__title,
a.home-service-card h3 { color: var(--color-secondary, #0f172a); }
.home-service-card__desc {
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--color-text-muted, #475569);
    margin: 0;
    flex: 1;
}
.home-service-card__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-accent, #f97316);
}
.home-service-card__link i {
    transition: transform .3s ease;
}
a.home-service-card.card-clickable:hover .home-service-card__link i {
    transform: translateX(4px);
}
.home-services-cta {
    display: flex;
    justify-content: center;
    margin-top: 44px;
}
@media (max-width: 1200px) {
    .home-services-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
    .home-services-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}
@media (max-width: 560px) {
    .home-services-grid { grid-template-columns: 1fr; }
    .home-service-card__body { padding: 18px; }
}

/* ============================================
   === CARDS MINIMAL AVEC ICÔNE (style Framer) ===
   Ajoute une icône gradient en haut de la card, le numéro devient
   plus discret en coin, layout plus élégant et cohérent.
   ============================================ */
.cards-layout-minimal .card-minimal--with-icon {
    padding: 36px 28px 36px 28px;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 4px 18px rgba(15,23,42,.04);
    transition: transform .35s var(--ease-premium, cubic-bezier(.2,.7,.2,1)), box-shadow .35s ease;
}
.cards-layout-minimal a.card-clickable.card-minimal--with-icon:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(15,23,42,.1);
}
.cards-layout-minimal .card-minimal--with-icon::before,
.cards-layout-minimal .card-minimal--with-icon::after { display: none; }

.cards-layout-minimal .card-minimal--with-icon .card-icon-gradient {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 22px;
    box-shadow: 0 10px 24px rgba(var(--color-primary-rgb), .28);
    margin-bottom: 22px;
    transition: transform .35s var(--ease-premium, cubic-bezier(.2,.7,.2,1));
}
.cards-layout-minimal a.card-clickable.card-minimal--with-icon:hover .card-icon-gradient {
    transform: scale(1.06) rotate(-3deg);
}
.cards-layout-minimal .card-minimal--with-icon .card-number {
    position: absolute;
    top: 24px;
    right: 24px;
    left: auto;
    font-size: 1.25rem;
    font-weight: 700;
    opacity: .35;
    background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.cards-layout-minimal .card-minimal--with-icon .card-body {
    padding: 0;
}
.cards-layout-minimal .card-minimal--with-icon h3 {
    font-size: 1.15rem;
    margin-bottom: 10px;
    color: var(--color-secondary);
}
.cards-layout-minimal .card-minimal--with-icon .card-text {
    color: #475569;
    font-size: .95rem;
    line-height: 1.55;
}
.cards-layout-minimal .card-minimal--with-icon .card-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    font-size: .9rem;
    font-weight: 600;
    color: var(--color-primary);
}
@media (max-width: 768px) {
    .cards-layout-minimal .card-minimal--with-icon {
        padding: 28px 22px !important;
    }
    .cards-layout-minimal .card-minimal--with-icon .card-icon-gradient {
        width: 48px;
        height: 48px;
        font-size: 18px;
        margin-bottom: 18px;
    }
    .cards-layout-minimal .card-minimal--with-icon .card-number {
        top: 16px;
        right: 18px;
        left: auto !important;
        font-size: 1.1rem !important;
    }
}

/* ============================================================
   SYSTÈME DE COULEURS YOUVANNA (palette éditeur visuel + assistant IA)
   Fonds de blocs + boutons. 100% additif : aucun effet tant qu'aucune
   couleur n'est choisie. Tout via var(--color-*) => s'adapte à la charte.
   ============================================================ */
.yve-bg-light     { background: var(--color-bg) !important; }
.yve-bg-alt       { background: var(--color-bg-alt) !important; }
.yve-bg-accent    { background: var(--color-accent) !important; }
.yve-bg-primary   { background: var(--color-primary) !important; }
.yve-bg-secondary { background: var(--color-secondary) !important; }
.yve-bg-dark      { background: var(--color-bg-dark, var(--color-dark, #0a0a0a)) !important; }
.yve-bg-gradient  { background: var(--gradient-brand) !important; }

.yve-section-dark { color: #fff !important; }
.yve-section-dark h1, .yve-section-dark h2, .yve-section-dark h3,
.yve-section-dark h4, .yve-section-dark h5, .yve-section-dark h6,
.yve-section-dark p, .yve-section-dark li, .yve-section-dark blockquote,
.yve-section-dark .section-header, .yve-section-dark .section-header *,
.yve-section-dark .section-subtitle, .yve-section-dark .section-badge,
.yve-section-dark figcaption, .yve-section-dark label { color: #fff !important; }
.yve-section-dark a:not(.btn) { color: #fff !important; text-decoration: underline; }
.yve-section-dark .card, .yve-section-dark .card h1, .yve-section-dark .card h2,
.yve-section-dark .card h3, .yve-section-dark .card h4, .yve-section-dark .card h5,
.yve-section-dark .card p, .yve-section-dark .card li, .yve-section-dark .card span,
.yve-section-dark .card a:not(.btn) { color: var(--color-text, #1a1a1a) !important; }

.btn.yve-btn--fill {
    background: var(--yve-btn-color, var(--color-primary)) !important;
    background-image: none !important;
    color: var(--yve-btn-on, #fff) !important;
    -webkit-text-fill-color: var(--yve-btn-on, #fff) !important;
    border: 2px solid var(--yve-btn-color, var(--color-primary)) !important;
}
.btn.yve-btn--fill * { color: var(--yve-btn-on, #fff) !important; -webkit-text-fill-color: var(--yve-btn-on, #fff) !important; }
.btn.yve-btn--fill:hover { filter: brightness(0.92); }
.btn.yve-btn--outline {
    background: transparent !important;
    background-image: none !important;
    color: var(--yve-btn-color, var(--color-primary)) !important;
    -webkit-text-fill-color: var(--yve-btn-color, var(--color-primary)) !important;
    border: 2px solid var(--yve-btn-color, var(--color-primary)) !important;
}
.btn.yve-btn--outline * { color: var(--yve-btn-color, var(--color-primary)) !important; -webkit-text-fill-color: var(--yve-btn-color, var(--color-primary)) !important; }
.btn.yve-btn--outline::before { display: none !important; }
.btn.yve-btn--outline:hover { background: var(--yve-btn-color, var(--color-primary)) !important; color: var(--yve-btn-on, #fff) !important; -webkit-text-fill-color: var(--yve-btn-on, #fff) !important; }
.btn.yve-btn--outline:hover * { color: var(--yve-btn-on, #fff) !important; -webkit-text-fill-color: var(--yve-btn-on, #fff) !important; }

.yve-c-primary   { --yve-btn-color: var(--color-primary);   --yve-btn-on: #fff; }
.yve-c-secondary { --yve-btn-color: var(--color-secondary); --yve-btn-on: #fff; }
.yve-c-tertiary  { --yve-btn-color: var(--color-tertiary);  --yve-btn-on: #fff; }
.yve-c-accent    { --yve-btn-color: var(--color-accent);    --yve-btn-on: #111111; }
.yve-c-dark      { --yve-btn-color: var(--color-dark);      --yve-btn-on: #fff; }
/* .yve-c-custom : variables posées en inline style. */

/* ============================================================
   METRONOME PARTNERS - HOME (Framer style)
   Palette : teal --color-primary / cyan --color-accent / fond blanc
   Toutes les couleurs passent par les variables du design system.
   ============================================================ */

/* Tokens partagés home + pages intérieures.
   .mp-page est posé sur le <main> des pages intérieures (header.php) : sans lui
   ces variables sont indéfinies et toutes les transitions .mp-* meurent. */
.mp-home,
.mp-page {
    --mp-ease: cubic-bezier(.22, 1, .36, 1);
    /* Style Campus La Salle : angles droits, lignes fines de couleur */
    --mp-radius: 0px;
    --mp-radius-lg: 0px;
    --mp-line: rgba(var(--color-primary-rgb), .22);
}

/* overflow-x reste sur la home seule : sur .mp-page il casserait position:sticky
   (sommaire ancré des pages offres). */
.mp-home {
    overflow-x: clip;
}

/* --- Utilitaires partagés --------------------------------- */

.mp-anim {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity .8s var(--mp-ease), transform .8s var(--mp-ease);
    will-change: opacity, transform;
}
.mp-anim[data-anim="fade-left"]  { transform: translateX(40px); }
.mp-anim[data-anim="fade-right"] { transform: translateX(-40px); }
.mp-anim[data-anim="zoom"]       { transform: scale(.94); }
.mp-anim.is-visible {
    opacity: 1;
    transform: none;
}
@media (prefers-reduced-motion: reduce) {
    .mp-anim { opacity: 1; transform: none; transition: none; }
}

.mp-parallax > * {
    transform: translate3d(0, var(--parallax-y, 0), 0);
    will-change: transform;
}

.mp-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    /* la bulle est un <h2> (SEO) : on neutralise ce que la balise hériterait */
    font-family: var(--font-body);
    line-height: 1.7;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: 20px;
}
.mp-kicker::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-accent);
    box-shadow: 0 0 0 0 rgba(var(--color-accent-rgb), .7);
    animation: mp-pulse 2.4s infinite;
    flex: none;
}
@keyframes mp-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(var(--color-accent-rgb), .7); }
    70%  { box-shadow: 0 0 0 12px rgba(var(--color-accent-rgb), 0); }
    100% { box-shadow: 0 0 0 0 rgba(var(--color-accent-rgb), 0); }
}
.mp-kicker--center { display: inline-flex; }
/* Sur telephone, une bulle centree trop longue passe sur deux lignes : en
   flex, la pastille restait collee au bord gauche, loin du texte centre
   (« Une approche radicalement differente », controle qualite du
   2026-09-27). En ligne, la pastille precede le premier mot. */
@media (max-width: 600px) {
    /* Specificite (0,4,0) : passe devant la regle .mp-kicker x3 plus bas. */
    .mp-head .mp-kicker.mp-kicker.mp-kicker { display: inline-block; text-wrap: balance; }
    .mp-head .mp-kicker.mp-kicker.mp-kicker::before { display: inline-block; margin-right: 10px; vertical-align: .08em; }
}
.mp-kicker--light { color: #fff; }
.mp-kicker--light::before { background: var(--color-accent); }

.mp-section {
    padding: 110px 0;
    position: relative;
}
.mp-section--alt {
    background: var(--color-bg-alt);
}

.mp-head {
    max-width: 760px;
    margin: 0 auto 64px;
    text-align: center;
}
.mp-head h2,
.mp-head h3 {
    font-size: clamp(2rem, 3.6vw, 3rem);
    line-height: 1.12;
    letter-spacing: -.02em;
    margin: 0 0 20px;
    color: var(--color-secondary);
}
.mp-head h2 em,
.mp-head h3 em {
    font-style: normal;
    color: var(--color-primary);
    position: relative;
}
.mp-head p {
    font-size: 1.08rem;
    line-height: 1.7;
    color: var(--color-text-light);
    margin: 0;
}

/* Boutons home */
.mp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 34px;
    border-radius: 0;
    font-weight: 600;
    font-size: .92rem;
    letter-spacing: .04em;
    line-height: 1;
    text-decoration: none;
    border: 1px solid transparent;
    transition: transform .35s var(--mp-ease), box-shadow .35s var(--mp-ease), background .35s var(--mp-ease), color .35s var(--mp-ease), border-color .35s var(--mp-ease);
    cursor: pointer;
}
.mp-btn i { transition: transform .35s var(--mp-ease); }
.mp-btn:hover i { transform: translateX(4px); }

.mp-btn--primary {
    background: var(--color-primary);
    color: #fff;
    box-shadow: 0 10px 30px rgba(var(--color-primary-rgb), .28);
}
.mp-btn--primary:hover {
    background: linear-gradient(120deg, var(--color-primary) 0%, var(--color-accent) 100%);
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 18px 44px rgba(var(--color-primary-rgb), .34);
}
.mp-btn--outline {
    background: transparent;
    color: var(--color-secondary);
    border-color: var(--color-border);
}
.mp-btn--outline:hover {
    background: linear-gradient(120deg, var(--color-primary) 0%, var(--color-accent) 100%);
    border-color: transparent;
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 14px 36px rgba(var(--color-primary-rgb), .26);
}
.mp-btn--ghost {
    background: rgba(255, 255, 255, .12);
    color: #fff;
    border-color: rgba(255, 255, 255, .45);
    backdrop-filter: blur(6px);
}
.mp-btn--ghost:hover {
    background: #fff;
    color: var(--color-primary);
    border-color: #fff;
    transform: translateY(-3px);
}

/* Style Campus La Salle : header et menus rectangulaires, traits fins */
#site-header .nav-cta .btn,
#site-header .nav-mobile-cta .btn { border-radius: 0; border-width: 1px; letter-spacing: .03em; }
.nav-menu li .sub-menu { border-radius: 0; border: 1px solid var(--color-border); box-shadow: 0 12px 30px rgba(15, 23, 42, .1); }
.nav-menu li .sub-menu li a:hover { background: rgba(var(--color-primary-rgb), .08); }

/* ===== Mega-menu Metronome (offres + cabinets) ===== */
.mp-mega-btn {
    display: inline-flex; align-items: center; gap: 7px;
    background: none; border: none; cursor: pointer;
    font: inherit; font-size: 14px; font-weight: 500;
    color: var(--color-text); padding: 8px 14px; border-radius: 0;
    position: relative;
}
/* Desktop : liens et boutons du menu parfaitement alignés sur une même ligne */
@media (min-width: 1201px) {
    .nav-menu.mp-nav { align-items: center; gap: 4px; flex-wrap: nowrap; }
    .nav-menu.mp-nav > li { display: flex; align-items: center; }
    .nav-menu.mp-nav > li > a,
    .nav-menu.mp-nav > li > .mp-mega-btn {
        display: inline-flex; align-items: center; gap: 7px;
        padding: 10px 16px; font-size: 14.5px; font-weight: 500; line-height: 1;
        color: var(--color-text); white-space: nowrap; height: auto;
    }
    .nav-menu.mp-nav > li > a::after { left: 16px; right: 16px; }
}
.mp-mega-btn i { font-size: .7em; transition: transform .3s ease; }
.mp-mega-item:hover .mp-mega-btn i,
.mp-mega-item:focus-within .mp-mega-btn i { transform: rotate(180deg); }
.mp-mega-btn:hover, .mp-mega-item:focus-within .mp-mega-btn { color: var(--color-primary); }

/* Mega pleine largeur (bande sous le header, façon ma normandie) : le nœud est
   positionné par rapport à #site-header (position: fixed) grâce au static sur l'item.
   Spécificité renforcée pour battre le `.nav-menu li { position: relative }` du thème. */
.nav-menu.mp-nav .mp-mega-item { position: static; }
.mp-mega {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    background: #fff;
    border-top: 1px solid var(--color-border);
    box-shadow: 0 30px 60px rgba(15, 23, 42, .12);
    opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: opacity .25s var(--ease-premium, ease), transform .25s var(--ease-premium, ease), visibility .25s;
    z-index: 200;
}
/* Pont invisible pour éviter que le survol ne se coupe entre le bouton et le panneau */
.mp-mega::before { content: ''; position: absolute; top: -16px; left: 0; right: 0; height: 16px; }
.mp-mega-item:hover > .mp-mega,
.mp-mega-item:focus-within > .mp-mega {
    opacity: 1; visibility: visible; transform: translateY(0);
}
.mp-mega__inner {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 20px 48px;
    max-width: var(--max-width-wide, 1280px);
    margin: 0 auto;
    padding: 40px clamp(24px, 4vw, 56px);
}
.mp-mega--cab .mp-mega__inner { grid-template-columns: 340px 1fr; }

/* Carte featured (gauche).
   Selecteur volontairement lourd : la carte est un <a> dans .nav-menu li, et
   « .nav-menu li a { display:block; padding:8px 16px } » (plus specifique que
   « .mp-mega__feature ») ecrasait le display:flex. Resultat : sur-titre, titre
   et texte se suivaient sur la meme ligne, le gras colle a l'encadre. */
.nav-menu li a.mp-mega__feature,
.mp-mega__feature {
    display: flex; flex-direction: column; align-items: flex-start;
    background: linear-gradient(160deg, rgba(var(--color-primary-rgb), .07), rgba(var(--color-accent-rgb), .07));
    border: 1px solid var(--color-border);
    padding: 22px 20px; text-decoration: none;
    transition: border-color .3s ease, transform .3s ease;
}
.mp-mega__feature:hover { border-color: var(--color-accent); }
.mp-mega__feature::after { display: none; }   /* pas de soulignement de menu sur une carte */
.mp-mega__feature-icon {
    width: 46px; height: 46px; display: grid; place-items: center;
    background: var(--color-primary); color: #fff; font-size: 1.15rem; margin-bottom: 14px;
}
.mp-mega__badge {
    font-size: .64rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    color: var(--color-primary); border: 1px solid rgba(var(--color-primary-rgb), .3);
    padding: 3px 9px; margin-bottom: 12px;
}
.mp-mega__feature-title { font-family: var(--font-heading); font-weight: 800; font-size: 1.05rem; line-height: 1.2; color: var(--color-secondary); margin-bottom: 8px; }
.mp-mega__feature-text { font-size: .82rem; line-height: 1.5; color: var(--color-text-light); margin-bottom: 16px; }
.mp-mega__feature-cta { margin-top: auto; font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--color-primary); display: inline-flex; align-items: center; gap: 7px; }
.mp-mega__feature:hover .mp-mega__feature-cta i { transform: translateX(4px); }
.mp-mega__feature-cta i { transition: transform .3s ease; }

/* Colonnes de liens */
.mp-mega__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 32px; align-content: start; }
.mp-mega__cols--cab { grid-template-columns: repeat(3, 1fr); align-content: start; }
.mp-mega__col { list-style: none; margin: 0; padding: 0; }
.mp-mega__col li a {
    display: flex; align-items: center; gap: 11px;
    padding: 9px 10px; text-decoration: none; border-radius: 0;
    transition: background .2s ease;
}
.mp-mega__col li a::after { display: none; }
.mp-mega__col li a:hover { background: rgba(var(--color-primary-rgb), .07); }
.mp-mega__ico {
    flex: none; width: 34px; height: 34px; display: grid; place-items: center;
    background: rgba(var(--color-primary-rgb), .09); color: var(--color-primary);
    font-size: .85rem; transition: background .25s ease, color .25s ease;
}
.mp-mega__col li a:hover .mp-mega__ico { background: var(--color-primary); color: #fff; }
.mp-mega__link-text { display: flex; flex-direction: column; min-width: 0; }
.mp-mega__link-title { font-size: .88rem; font-weight: 600; color: var(--color-secondary); line-height: 1.2; }
.mp-mega__link-sub { font-size: .72rem; color: var(--color-text-muted); line-height: 1.25; margin-top: 1px; }

/* Passerelle « Nous rejoindre », en bas a droite du menu des cabinets. */
.nav-menu li a.mp-mega__join,
.mp-mega__join {
    grid-column: 2;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: rgba(var(--color-primary-rgb), .06);
    border: 1px solid var(--color-border);
    text-decoration: none;
    transition: border-color .3s ease, background .3s ease;
}
.mp-mega__join::after { display: none; }
.mp-mega__join:hover { border-color: var(--color-accent); background: rgba(var(--color-accent-rgb), .1); }
.mp-mega__join-ico {
    flex: none; width: 38px; height: 38px; display: grid; place-items: center;
    background: var(--color-primary); color: #fff; font-size: .95rem;
}
.mp-mega__join-text { display: flex; flex-direction: column; min-width: 0; margin-right: auto; }
.mp-mega__join-title { font-family: var(--font-heading); font-weight: 800; font-size: .92rem; color: var(--color-secondary); line-height: 1.2; }
.mp-mega__join-sub { font-size: .76rem; color: var(--color-text-light); line-height: 1.3; }
.mp-mega__join > i { color: var(--color-primary); transition: transform .3s ease; }
.mp-mega__join:hover > i { transform: translateX(4px); }

/* Mobile : le mega devient un accordéon dans le menu burger */
@media (max-width: 1200px) {
    .mp-mega-btn { width: 100%; justify-content: space-between; padding: 12px 8px; font-size: 15px; }
    .mp-mega { position: static; width: auto; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: none; display: none; }
    .mp-mega-item.is-open > .mp-mega { display: block; }
    .mp-mega-item.is-open .mp-mega-btn i { transform: rotate(180deg); }
    .mp-mega__inner { grid-template-columns: 1fr; padding: 4px 0 12px; gap: 12px; }
    .mp-mega--cab .mp-mega__inner { grid-template-columns: 1fr; }
    .mp-mega__cols, .mp-mega__cols--cab { grid-template-columns: 1fr; }
    .mp-mega__feature { padding: 16px; }
    .nav-menu li a.mp-mega__join, .mp-mega__join { grid-column: auto; }
}

/* ============================================================
   1. HERO
   ============================================================ */

/* Navbar : tous les items sur une seule ligne (libellés longs type "Externalisation RH") */
@media (min-width: 961px) {
    .nav-menu { gap: 0; flex-wrap: nowrap; }
    .nav-menu > li > a { white-space: nowrap; padding: 8px 11px; font-size: 13.5px; }
    .nav-menu li.menu-item-has-children > a { padding-right: 22px; }
    .nav-menu li a::after { left: 11px; right: 11px; }
    .nav-phone { white-space: nowrap; font-size: 13.5px; }
    .nav-cta { gap: 12px; }
    .nav-cta .btn { white-space: nowrap; }
}
@media (min-width: 961px) and (max-width: 1400px) {
    /* Le téléphone et l'item "Nous contacter" doublonnent le bouton CTA : on les retire
       pour garder la navigation sur une seule ligne sur les écrans intermédiaires. */
    .nav-phone { display: none; }
    .nav-container { padding: 0 20px; }
    .nav-menu > li > a { padding: 8px 8px; font-size: 12.8px; }
    .nav-menu li a::after { left: 8px; right: 8px; }
    .nav-cta .btn { padding: 10px 18px; font-size: 13px; }
}
/* Entre 961 et 1200px, les 8 items du menu ne tiennent pas sur une ligne :
   on bascule sur le menu burger plutôt que d'accepter deux lignes. */
@media (min-width: 961px) and (max-width: 1200px) {
    .nav-menu, .nav-cta { display: none; }
    .nav-toggle { display: block; }
    .nav-menu.active {
        display: flex; flex-direction: column;
        position: absolute; top: var(--header-height); left: 0; right: 0;
        background: #fff; border-bottom: 1px solid var(--color-border);
        padding: 16px; box-shadow: var(--shadow-lg); z-index: 999;
        max-height: calc(100vh - var(--header-height)); overflow-y: auto;
    }
    .nav-menu.active ~ .nav-mobile-cta { display: flex !important; }
    .nav-mobile-cta {
        display: none; flex-direction: column; gap: 12px;
        padding: 16px; border-top: 1px solid var(--color-border);
    }
}

.mp-hero {
    position: relative;
    padding: var(--header-height) 0 0;
    background: var(--color-secondary);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 100svh;
}
/* Le hero prend toute la largeur : le texte est calé à gauche, comme le modèle */
.mp-hero > .container {
    max-width: var(--max-width-wide);
    width: 100%;
    flex: 1;
    display: flex;
    align-items: center;
    padding-left: clamp(24px, 6vw, 110px);
    padding-right: clamp(24px, 6vw, 110px);
}

/* Fond vidéo plein cadre + overlay dégradé : le texte passe par-dessus */
.mp-hero__media {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}
.mp-hero__video,
.mp-hero__poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    animation: mp-hero-zoom 24s ease-in-out infinite alternate;
}
@keyframes mp-hero-zoom {
    from { transform: scale(1); }
    to   { transform: scale(1.06); }
}
.mp-hero__overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(100deg, rgba(var(--color-secondary-rgb), .86) 0%, rgba(var(--color-secondary-rgb), .68) 45%, rgba(var(--color-secondary-rgb), .34) 75%, rgba(var(--color-secondary-rgb), .24) 100%),
        linear-gradient(180deg, rgba(var(--color-secondary-rgb), .35) 0%, rgba(var(--color-secondary-rgb), .1) 35%, rgba(var(--color-secondary-rgb), .6) 100%);
}
@media (prefers-reduced-motion: reduce) {
    .mp-hero__video, .mp-hero__poster { animation: none; }
}

.mp-hero__inner {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    padding: 24px 0 40px;
    text-align: left;
}
.mp-hero__text {
    max-width: 800px;
}
/* Le grand titre du hero est un <p> depuis que le H1 est porte par la bulle
   (2026-09-22, SEO) : il ne recoit plus les regles des balises h1, on lui
   redonne explicitement la police des titres. La bulle, devenue h1, perd
   l'equilibrage de lignes des titres pour rester strictement identique. */
.mp-hero__text .mp-hero__kicker { text-wrap: wrap; }
.mp-hero__text .mp-hero__title {
    font-family: var(--font-heading);
    /* Reduit d'un tiers a la demande de la cliente (2026-09-16) :
       clamp(2.2rem, 4.2vw, 3.7rem) -> x 2/3. Le titre fait 59 px -> 39 px a
       1440 px de large. */
    /* Puis remonte de 8 px le 2026-09-22 : 39,5 px -> 47,5 px a 1440 px. */
    font-size: clamp(1.8rem, 3.3vw, 2.97rem);
    line-height: 1.06;
    letter-spacing: -.03em;
    margin: 0 0 20px;
    color: #fff;
    text-shadow: 0 2px 24px rgba(0, 0, 0, .28);
    /* Graisse reelle depuis le 2026-09-24 : le liseré -webkit-text-stroke qui
       tenait lieu de gras est retire. Monte du demi-gras au tres gras le meme
       jour, la cliente comparant avec l'ancien site ou ce titre tombe en Arial
       gras faute de fichier Avenir gras. */
    font-weight: 900;
}
/* Mots mis en avant : texte blanc + soulignement arrondi bleu, style Framer */
.mp-hero__text .mp-hero__title em {
    font-style: normal;
    display: inline-block;
    position: relative;
    color: #fff;
    -webkit-text-fill-color: #fff;
    white-space: nowrap;
    padding-bottom: .1em;
}
.mp-hero__text .mp-hero__title em::after {
    content: '';
    position: absolute;
    left: -.04em;
    right: -.04em;
    bottom: 0;
    height: .12em;
    min-height: 5px;
    border-radius: 999px;
    background: var(--color-accent);
    box-shadow: 0 0 22px rgba(var(--color-accent-rgb), .45);
}
.mp-hero__sub {
    font-size: 1.1rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, .92);
    margin: 0 0 28px;
    max-width: 38em;
    text-shadow: 0 1px 14px rgba(0, 0, 0, .3);
}
.mp-hero__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
}

/* Bandeau de chiffres clés, posé en bas du hero par-dessus la vidéo */
.mp-stats {
    position: relative;
    z-index: 2;
    border-top: 1px solid rgba(255, 255, 255, .16);
    background: rgba(var(--color-secondary-rgb), .78);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.mp-stats > .container { max-width: var(--max-width-wide); }
.mp-stats__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}
.mp-stat {
    padding: 26px 24px;
    text-align: center;
    position: relative;
}
.mp-stat + .mp-stat::before {
    content: '';
    position: absolute;
    left: 0;
    top: 24%;
    height: 52%;
    width: 1px;
    background: rgba(255, 255, 255, .18);
}
.mp-stat__num {
    font-family: var(--font-heading);
    font-size: clamp(2.1rem, 3.2vw, 2.9rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--color-accent);
    margin-bottom: 8px;
}
.mp-stat__label {
    font-size: .88rem;
    color: rgba(255, 255, 255, .82);
    font-weight: 500;
}

/* ============================================================
   2. MISSION + PILIERS
   ============================================================ */

.mp-mission {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 72px;
    align-items: center;
}
.mp-mission h2,
.mp-mission h3 {
    font-size: clamp(1.9rem, 3.2vw, 2.7rem);
    line-height: 1.15;
    letter-spacing: -.02em;
    color: var(--color-secondary);
    margin: 0 0 22px;
}
.mp-mission__text p {
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--color-text-light);
    margin: 0 0 18px;
}
.mp-mission__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 30px;
}
.mp-mission__img {
    position: relative;
    border-radius: var(--mp-radius-lg);
    overflow: hidden;
    box-shadow: 0 34px 80px rgba(var(--color-secondary-rgb), .16);
    aspect-ratio: 5 / 6;
    max-height: 85vh;
}
.mp-mission__img img {
    width: 100%;
    height: 112%;
    object-fit: cover;
    display: block;
}
/* Mini overlay dégradé (profondeur, style Campus La Salle) */
.mp-mission__img::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to top, rgba(var(--color-secondary-rgb), .35) 0%, rgba(var(--color-secondary-rgb), .08) 30%, transparent 60%);
    pointer-events: none;
}
/* Liseré fin de couleur inséré */
.mp-mission__img::after {
    content: '';
    position: absolute;
    inset: 14px;
    z-index: 2;
    border: 1px solid rgba(255, 255, 255, .55);
    pointer-events: none;
    transition: inset .5s var(--mp-ease), border-color .5s var(--mp-ease);
}
.mp-mission__img:hover::after { inset: 11px; border-color: var(--color-accent); }

.mp-pillars {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 86px;
}
.mp-pillar {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--mp-radius);
    padding: 32px 28px;
    position: relative;
    overflow: hidden;
}
.mp-pillar::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .6s var(--mp-ease);
}
.mp-pillar.is-visible::after { transform: scaleX(1); }
.mp-pillar__num {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 800;
    color: var(--color-accent);
    letter-spacing: .08em;
    margin-bottom: 16px;
}
.mp-pillar h3,
.mp-pillar h4 {
    font-size: 1.1rem;
    color: var(--color-secondary);
    margin: 0 0 12px;
    line-height: 1.3;
}
.mp-pillar p {
    font-size: .94rem;
    line-height: 1.65;
    color: var(--color-text-light);
    margin: 0;
}

/* ============================================================
   3. SERVICES (grille de cards photo entièrement cliquables)
   ============================================================ */

.mp-services__grid {
    display: grid;
    gap: 22px;
}
.mp-services__grid--3 { grid-template-columns: repeat(3, 1fr); }
.mp-services__grid--4 { grid-template-columns: repeat(4, 1fr); }

/* Cartes éditoriales façon Campus La Salle : image plein cadre, titre en
   surimpression, angles droits, fin liseré de couleur, description au survol. */
.mp-service {
    position: relative;
    display: block;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--color-secondary);
    text-decoration: none;
    transition: transform .5s var(--mp-ease), box-shadow .5s var(--mp-ease);
}
.mp-service__imgwrap {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 1;
}
.mp-service__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1.1s var(--mp-ease);
}
a.mp-service:hover .mp-service__img { transform: scale(1.06); }

/* Voile dégradé bas pour lisibilité du texte */
.mp-service__overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(to top, rgba(var(--color-secondary-rgb), .92) 0%, rgba(var(--color-secondary-rgb), .55) 34%, rgba(var(--color-secondary-rgb), .05) 62%, transparent 100%);
    transition: background .5s var(--mp-ease);
}
a.mp-service:hover .mp-service__overlay {
    background: linear-gradient(to top, rgba(var(--color-secondary-rgb), .95) 0%, rgba(var(--color-secondary-rgb), .7) 46%, rgba(var(--color-secondary-rgb), .25) 78%, rgba(var(--color-secondary-rgb), .1) 100%);
}
/* Fin liseré de couleur autour de la carte */
.mp-service__frame {
    position: absolute;
    inset: 12px;
    z-index: 3;
    border: 1px solid rgba(255, 255, 255, .35);
    pointer-events: none;
    transition: inset .5s var(--mp-ease), border-color .5s var(--mp-ease);
}
a.mp-service:hover .mp-service__frame {
    inset: 9px;
    border-color: var(--color-accent);
}

.mp-service__content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    padding: 28px 26px;
    color: #fff;
}
.mp-service__kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 10px;
}
.mp-service__title {
    font-family: var(--font-heading);
    font-size: 1.32rem;
    line-height: 1.16;
    color: #fff;
    margin: 0;
    text-shadow: 0 2px 16px rgba(0, 0, 0, .3);
    /* Le bloc est cale en bas de la carte : un titre sur deux lignes remontait
       donc sa bulle « pole d'expertise » d'une ligne, et la rangee n'etait plus
       alignee (« Management de transition » a cote de « Recrutement »).
       On reserve deux lignes dans tous les cas : les bulles retombent sur la
       meme ligne d'une carte a l'autre. */
    min-height: 2.32em;
    display: flex;
    align-items: flex-end;
}
/* Description + CTA : révélés au survol (glissent vers le haut) */
.mp-service__reveal {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows .5s var(--mp-ease), opacity .45s var(--mp-ease), margin-top .5s var(--mp-ease);
    margin-top: 0;
}
.mp-service__reveal > * { overflow: hidden; }
a.mp-service:hover .mp-service__reveal,
a.mp-service:focus-visible .mp-service__reveal {
    grid-template-rows: 1fr;
    opacity: 1;
    margin-top: 14px;
}
.mp-service__reveal p {
    font-size: .9rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, .9);
    margin: 0 0 16px;
}
.mp-service__more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #fff;
    transition: gap .35s var(--mp-ease), color .35s var(--mp-ease);
}
a.mp-service:hover .mp-service__more {
    gap: 14px;
    color: var(--color-accent);
}
/* Tactile (ou petit écran) : il n'y a pas de survol, la description est donc
   affichée en permanence. Le voile de l'état « repos » est presque transparent
   au-dessus de 62 % de la hauteur : le texte blanc se retrouvait posé sur une
   photo claire, donc illisible (signalé par Lucile le 2026-09-02 sur mobile).
   On bascule ici sur un voile renforcé, équivalent à l'état survolé du desktop.
   Volontairement borné à 1100 px : certains navigateurs desktop annoncent
   « hover: none » (headless, écrans tactiles), et sans ce plafond la grille
   desktop basculerait elle aussi en description permanente + voile lourd. */
@media (max-width: 900px), (hover: none) and (max-width: 1100px) {
    .mp-service__reveal { grid-template-rows: 1fr; opacity: 1; margin-top: 12px; }
    /* Voile renforce SEULEMENT quand la carte a une description : depuis que
       les descriptions ont ete retirees (2026-09-12), il ne reste en bas de
       carte que le titre et « En savoir plus », deja dans la zone sombre du
       degrade de repos. Le voile lourd ne faisait plus que noyer la photo
       (controle qualite du 2026-09-27, cartes quasi noires sur mobile). */
    .mp-service:has(.mp-service__reveal p) .mp-service__overlay,
    a.mp-service:has(.mp-service__reveal p):hover .mp-service__overlay {
        background: linear-gradient(to top,
            rgba(var(--color-secondary-rgb), .96) 0%,
            rgba(var(--color-secondary-rgb), .90) 46%,
            rgba(var(--color-secondary-rgb), .70) 74%,
            rgba(var(--color-secondary-rgb), .42) 100%);
    }
    .mp-service__title { text-shadow: 0 2px 18px rgba(0, 0, 0, .45); }
    .mp-service__kicker { text-shadow: 0 1px 10px rgba(0, 0, 0, .55); }
    .mp-service__reveal p { color: #fff; }
}
@media (max-width: 640px) {
    /* Carré plutôt que 4/3 : avec la description affichée en permanence, un
       cadre 4/3 était rempli de texte de haut en bas, donc soit illisible soit
       noyé sous un voile opaque qui masquait la photo. En carré, le tiers haut
       reste de la photo en pleine lumière et le texte tient dans la zone
       fortement voilée du bas. */
    .mp-service { aspect-ratio: 1 / 1; }
    .mp-service__content { padding: 22px 20px; }
    .mp-service__frame { inset: 10px; }
}

/* ============================================================
   4. BANDEAU PHOTO PARALLAX
   ============================================================ */

/* Bandeau photo : images paysage disposées en escalier, chacune plafonnée à 35vh */
.mp-strip {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 40px clamp(16px, 4vw, 56px) calc(40px + var(--mp-strip-step, 26px) * 3);
    overflow: hidden;
    max-width: 1320px;
    margin: 0 auto;
}
.mp-strip__item {
    flex: 1 1 0;
    min-width: 0;
    height: clamp(200px, 35vh, 360px);
    border-radius: var(--mp-radius);
    overflow: hidden;
    box-shadow: 0 24px 50px rgba(var(--color-secondary-rgb), .14);
    /* Décalage vertical progressif = effet escalier */
    transform: translateY(calc(var(--i, 0) * var(--mp-strip-step, 26px)));
    transition: transform .6s var(--mp-ease), box-shadow .45s var(--mp-ease);
}
.mp-strip__item:hover {
    box-shadow: 0 30px 64px rgba(var(--color-secondary-rgb), .22);
}
/* L'image est légèrement plus haute que le cadre : le parallax (généré par
   .mp-parallax > * → --parallax-y) la fait glisser sans révéler de bord. */
.mp-strip__item img {
    width: 100%;
    height: 112%;
    object-fit: cover;
    display: block;
    position: relative;
    top: -6%;
}

/* ============================================================
   5. AVIS CLIENTS - 2 lignes défilantes (droite→gauche, gauche→droite)
   ============================================================ */

.mp-reviews {
    padding: 110px 0;
    background: var(--color-bg-alt);
    overflow: hidden;
}
.mp-marquee {
    position: relative;
    display: flex;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.mp-marquee + .mp-marquee { margin-top: 22px; }

.mp-marquee__track {
    display: flex;
    gap: 22px;
    flex: none;
    width: max-content;
    padding: 6px 11px;
    animation: mp-scroll-left var(--mp-speed, 62s) linear infinite;
}
.mp-marquee--reverse .mp-marquee__track {
    animation-name: mp-scroll-right;
}
@keyframes mp-scroll-left {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}
@keyframes mp-scroll-right {
    from { transform: translate3d(-50%, 0, 0); }
    to   { transform: translate3d(0, 0, 0); }
}
/* Pause au survol de la ligne entière */
.mp-marquee:hover .mp-marquee__track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
    .mp-marquee__track { animation: none; }
    .mp-marquee { overflow-x: auto; }
}

.mp-review {
    flex: none;
    width: 400px;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--mp-radius);
    padding: 30px 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: transform .45s var(--mp-ease), box-shadow .45s var(--mp-ease), border-color .45s var(--mp-ease);
}
/* Une carte d'avis n'est pas cliquable : pas de translateY/scale au survol,
   sinon le visiteur la croit cliquable, clique, et rien ne se passe.
   Le survol reste signalé, mais sans mouvement. */
.mp-review:hover {
    box-shadow: 0 20px 44px rgba(var(--color-secondary-rgb), .10);
    border-color: rgba(var(--color-accent-rgb), .55);
}
.mp-review__stars {
    display: flex;
    gap: 3px;
    color: var(--color-accent);
    font-size: .86rem;
}
.mp-review__text {
    font-size: 1rem;
    line-height: 1.68;
    color: var(--color-text-light);
    margin: 0;
    flex: 1;
}
.mp-review__author {
    display: flex;
    align-items: center;
    gap: 14px;
    border-top: 1px solid var(--color-border);
    padding-top: 16px;
}
.mp-review__avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    flex: none;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: .95rem;
    color: #fff;
    background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
    object-fit: cover;
}
.mp-review__name {
    font-weight: 700;
    color: var(--color-secondary);
    font-size: .96rem;
    line-height: 1.25;
}
.mp-review__role {
    font-size: .84rem;
    color: var(--color-text-muted);
    line-height: 1.3;
}

/* ============================================================
   5b. LOGOS CLIENTS - 2 lignes défilantes
   ============================================================ */

.mp-logos {
    padding: 96px 0;
    background: #fff;
    overflow: hidden;
}
.mp-logo-item {
    flex: none;
    width: 200px;
    height: 112px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 18px;
    overflow: hidden;
    transition: transform .45s var(--mp-ease), box-shadow .45s var(--mp-ease), border-color .45s var(--mp-ease);
}
/* Boîte imposée en dur (tuile 200x112 - padding 18 - bordure 1) : les logos ont des
   ratios très différents (carrés 300x300, bandeaux…) et un height en % se résout en
   auto sur une image, donc un logo carré débordait la tuile. object-fit: contain cadre. */
.mp-logo-item img {
    width: 100%;
    height: 74px;
    flex: none;
    max-width: 100%;
    object-fit: contain;
    object-position: center;
    filter: grayscale(1) contrast(1.15);
    opacity: .8;
    transition: filter .45s var(--mp-ease), opacity .45s var(--mp-ease), transform .45s var(--mp-ease);
}
/* Idem : une tuile de logo client n'est pas cliquable. Le survol se contente
   de rendre sa couleur au logo, sans aucun déplacement. */
.mp-logo-item:hover {
    box-shadow: 0 14px 32px rgba(var(--color-secondary-rgb), .08);
    border-color: rgba(var(--color-accent-rgb), .55);
}
.mp-logo-item:hover img {
    filter: grayscale(0);
    opacity: 1;
}

/* ============================================================
   5b. ÉCOSYSTÈME - schéma interactif (offres + territoires)
   ============================================================ */
.mp-orbit-section {
    position: relative;
    padding: 110px 0;
    background:
        radial-gradient(ellipse 70% 60% at 50% 0%, rgba(var(--color-accent-rgb), .07), transparent 60%),
        var(--color-bg);
    overflow: hidden;
}
/* Variante fond alterne : le schema est repris sur « Qui sommes-nous », ou il
   s'intercale entre deux sections a fond blanc. */
.mp-orbit-section--alt {
    background:
        radial-gradient(ellipse 70% 60% at 50% 0%, rgba(var(--color-accent-rgb), .07), transparent 60%),
        var(--color-bg-alt);
}
.mp-orbit-section__decor {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(var(--color-primary-rgb), .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--color-primary-rgb), .04) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse 70% 70% at 50% 42%, #000 20%, transparent 72%);
    -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 42%, #000 20%, transparent 72%);
}

.mp-orbit {
    position: relative;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 48px;
    align-items: center;
    max-width: 1120px;
    margin: 0 auto;
}

/* --- Le schéma circulaire --- */
.mp-orbit__stage {
    container-type: size;
    position: relative;
    width: 100%;
    max-width: 560px;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    justify-self: center;
}
.mp-orbit__circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1.5px dashed rgba(var(--color-primary-rgb), .22);
}
.mp-orbit__circle--inner { width: 58cqmin; height: 58cqmin; border-style: solid; border-color: rgba(var(--color-primary-rgb), .12); }
.mp-orbit__circle--outer { width: 88cqmin; height: 88cqmin; animation: mp-orbit-spin 90s linear infinite; }
@keyframes mp-orbit-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .mp-orbit__circle--outer { animation: none; } }

/* Hub central */
.mp-orbit__hub {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 33cqmin;
    height: 33cqmin;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--color-border);
    box-shadow: 0 24px 60px rgba(var(--color-secondary-rgb), .18);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6cqmin;
    text-align: center;
    padding: 4cqmin;
    z-index: 3;
}
.mp-orbit__hub-logo { width: 74%; height: auto; max-height: 28%; object-fit: contain; }
.mp-orbit__hub-title { font-family: var(--font-heading); font-weight: 800; color: var(--color-secondary); font-size: clamp(.8rem, 4cqmin, 1.15rem); line-height: 1.1; }
.mp-orbit__hub-meta { font-size: clamp(.5rem, 2.5cqmin, .72rem); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--color-accent); }

/* Nœuds : placés sur le cercle via une rotation autour du centre */
.mp-orbit__node {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(var(--a)) translateY(calc(-1 * var(--r))) rotate(calc(-1 * var(--a)));
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    cursor: pointer;
    padding: 0;
    text-decoration: none;
    transition: transform .45s var(--mp-ease);
    z-index: 4;
}
/* Offres = anneau intérieur ; Territoires = anneau extérieur */
.mp-orbit__node--offer { --r: 29cqmin; }
.mp-orbit__node--terr  { --r: 44cqmin; }

/* Pastille icône des offres */
.mp-orbit__node-icon {
    width: clamp(42px, 11cqmin, 66px);
    height: clamp(42px, 11cqmin, 66px);
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #fff;
    color: var(--color-primary);
    border: 1.5px solid rgba(var(--color-primary-rgb), .2);
    box-shadow: 0 10px 26px rgba(var(--color-secondary-rgb), .12);
    font-size: clamp(.95rem, 4.4cqmin, 1.4rem);
    transition: background .35s var(--mp-ease), color .35s var(--mp-ease), border-color .35s var(--mp-ease), box-shadow .35s var(--mp-ease), transform .35s var(--mp-ease);
}
/* Label de l'offre : caché, révélé sous la pastille au survol */
.mp-orbit__node-label {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    white-space: nowrap;
    font-size: clamp(.62rem, 2.5cqmin, .8rem);
    font-weight: 700;
    color: var(--color-secondary);
    background: #fff;
    padding: 4px 10px;
    border-radius: 999px;
    box-shadow: 0 6px 18px rgba(var(--color-secondary-rgb), .16);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s var(--mp-ease), transform .3s var(--mp-ease);
    z-index: 6;
}

/* Pastille numéro des territoires */
.mp-orbit__node-code {
    width: clamp(30px, 8cqmin, 46px);
    height: clamp(30px, 8cqmin, 46px);
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--color-secondary);
    color: #fff;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: clamp(.68rem, 3cqmin, .95rem);
    border: 2px solid #fff;
    box-shadow: 0 8px 20px rgba(var(--color-secondary-rgb), .22);
    transition: background .35s var(--mp-ease), transform .35s var(--mp-ease), box-shadow .35s var(--mp-ease);
}

/* États actifs */
.mp-orbit__node--offer:hover .mp-orbit__node-icon,
.mp-orbit__node--offer:focus-visible .mp-orbit__node-icon,
.mp-orbit__node--offer.is-active .mp-orbit__node-icon {
    background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
    color: #fff;
    border-color: transparent;
    transform: scale(1.12);
    box-shadow: 0 16px 36px rgba(var(--color-primary-rgb), .34);
}
.mp-orbit__node--offer:hover .mp-orbit__node-label,
.mp-orbit__node--offer:focus-visible .mp-orbit__node-label,
.mp-orbit__node--offer.is-active .mp-orbit__node-label {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.mp-orbit__node--terr:hover .mp-orbit__node-code,
.mp-orbit__node--terr:focus-visible .mp-orbit__node-code,
.mp-orbit__node--terr.is-active .mp-orbit__node-code {
    background: var(--color-accent);
    color: var(--color-secondary);
    transform: scale(1.18);
    box-shadow: 0 14px 30px rgba(var(--color-accent-rgb), .4);
}
/* Estompe les autres nœuds quand un est actif */
.mp-orbit__stage.is-dimmed .mp-orbit__node:not(.is-active) { opacity: .45; }
.mp-orbit__node:focus-visible { outline: none; }

/* --- Panneau de détail --- */
.mp-orbit__detail { display: flex; flex-direction: column; gap: 22px; }
.mp-orbit__panel {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--mp-radius);
    padding: 34px 32px;
    box-shadow: 0 24px 60px rgba(var(--color-secondary-rgb), .1);
    border-left: 4px solid var(--color-accent);
    transition: border-color .3s var(--mp-ease);
}
.mp-orbit__panel-tag {
    display: inline-block;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: 14px;
}
.mp-orbit__panel-title {
    font-size: clamp(1.4rem, 2.4vw, 1.9rem);
    line-height: 1.15;
    color: var(--color-secondary);
    margin: 0 0 12px;
}
.mp-orbit__panel-sub { font-size: 1.02rem; line-height: 1.65; color: var(--color-text-light); margin: 0; }
.mp-orbit__panel-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    font-weight: 700;
    color: var(--color-primary);
    text-decoration: none;
}
.mp-orbit__panel-cta i { transition: transform .3s var(--mp-ease); }
.mp-orbit__panel-cta:hover i { transform: translateX(4px); }
.mp-orbit__panel-cta[hidden] { display: none; }

.mp-orbit__legend { display: flex; flex-wrap: wrap; gap: 22px; padding-left: 4px; }
.mp-orbit__legend-item { display: inline-flex; align-items: center; gap: 9px; font-size: .9rem; font-weight: 600; color: var(--color-text-light); }
.mp-orbit__dot { width: 13px; height: 13px; border-radius: 50%; flex: none; }
.mp-orbit__dot--offer { background: linear-gradient(135deg, var(--color-primary), var(--color-accent)); }
.mp-orbit__dot--terr { background: var(--color-secondary); }

@media (max-width: 900px) {
    .mp-orbit { grid-template-columns: 1fr; gap: 40px; }
    .mp-orbit__stage { max-width: 480px; }
    .mp-orbit__detail { order: 2; }
    .mp-orbit__legend { justify-content: center; }
    .mp-orbit__panel { text-align: center; border-left: none; border-top: 4px solid var(--color-accent); }
    .mp-orbit__panel-cta { justify-content: center; }
}
@media (max-width: 640px) {
    .mp-orbit-section { padding: 76px 0; }
    .mp-orbit__stage { max-width: 340px; }
    .mp-orbit__node--offer { --r: 30cqmin; }
    .mp-orbit__stage--offers .mp-orbit__node--offer { --r: 36cqmin; }
}

/* Schéma « offres seules » : un seul anneau, plus large (rdv 2026-09-02) */
.mp-orbit__stage--offers .mp-orbit__circle--inner { width: 46cqmin; height: 46cqmin; }
.mp-orbit__stage--offers .mp-orbit__circle--outer { width: 78cqmin; height: 78cqmin; }
.mp-orbit__stage--offers .mp-orbit__node--offer { --r: 39cqmin; }

/* ============================================================
   5c. BANDEAU FIXE (parallax) + FAQ
   ============================================================ */
.mp-fixed {
    height: 45vh;
    min-height: 300px;
    width: 100%;
    background-image: var(--mp-fixed-img);
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    background-repeat: no-repeat;
}
/* iOS/Android ne gèrent pas background-attachment: fixed : on repasse en scroll. */
@media (hover: none), (max-width: 900px) {
    .mp-fixed { background-attachment: scroll; height: 34vh; }
}

.mp-faq {
    padding: 110px 0;
    background: #fff;
}
.mp-faq__list {
    max-width: 820px;
    margin: 0 auto;
}
.mp-faq__item {
    border: 1px solid var(--color-border);
    border-radius: var(--mp-radius);
    background: var(--color-bg);
    margin-bottom: 16px;
    overflow: hidden;
    transition: border-color .3s var(--mp-ease), box-shadow .3s var(--mp-ease);
}
.mp-faq__item[open] {
    border-color: rgba(var(--color-accent-rgb), .5);
    box-shadow: 0 18px 40px rgba(var(--color-secondary-rgb), .08);
}
.mp-faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 22px 26px;
    font-size: 1.08rem;
    font-weight: 700;
    color: var(--color-secondary);
    cursor: pointer;
    list-style: none;
}
.mp-faq__q::-webkit-details-marker { display: none; }
.mp-faq__icon {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(var(--color-primary-rgb), .1);
    color: var(--color-primary);
    font-size: .9rem;
    transition: transform .35s var(--mp-ease), background .35s var(--mp-ease), color .35s var(--mp-ease);
}
.mp-faq__item[open] .mp-faq__icon {
    transform: rotate(135deg);
    background: var(--color-primary);
    color: #fff;
}
.mp-faq__a {
    padding: 0 26px 24px;
    color: var(--color-text-light);
    line-height: 1.7;
}
.mp-faq__a p { margin: 0 0 12px; }
.mp-faq__a p:last-child { margin-bottom: 0; }
@media (max-width: 640px) {
    .mp-faq { padding: 76px 0; }
    .mp-faq__q { padding: 18px 20px; font-size: 1rem; }
    .mp-faq__a { padding: 0 20px 20px; }
}

/* ============================================================
   6. CARTE DES CABINETS
   ============================================================ */

.mp-map-section {
    padding: 110px 0;
    background: var(--color-secondary);
    color: #fff;
    position: relative;
    overflow: hidden;
}
.mp-map-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 12% 18%, rgba(var(--color-accent-rgb), .22), transparent 45%),
        radial-gradient(circle at 88% 82%, rgba(var(--color-primary-rgb), .5), transparent 50%);
    pointer-events: none;
}
.mp-map-section .container { position: relative; z-index: 1; }
.mp-map-section .mp-head h2,
.mp-map-section .mp-head h3 { color: #fff; }
.mp-map-section .mp-head h2 em,
.mp-map-section .mp-head h3 em {
    background: linear-gradient(110deg, var(--color-accent) 0%, var(--color-tertiary) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-style: normal;
}
.mp-map-section .mp-head p { color: rgba(255, 255, 255, .72); }

.mp-map-layout {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 28px;
    align-items: stretch;
}

.mp-map-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 560px;
    overflow-y: auto;
    padding-right: 8px;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--color-accent-rgb), .5) transparent;
}
.mp-map-list::-webkit-scrollbar { width: 6px; }
.mp-map-list::-webkit-scrollbar-thumb {
    background: rgba(var(--color-accent-rgb), .5);
    border-radius: 999px;
}

.mp-office {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    text-align: left;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 16px;
    padding: 14px 16px;
    color: #fff;
    cursor: pointer;
    transition: background .35s var(--mp-ease), border-color .35s var(--mp-ease), transform .35s var(--mp-ease);
}
.mp-office:hover,
.mp-office.is-active {
    background: rgba(var(--color-accent-rgb), .16);
    border-color: var(--color-accent);
    transform: translateX(5px);
}
.mp-office__thumb {
    width: 54px;
    height: 54px;
    border-radius: 12px;
    object-fit: cover;
    flex: none;
    background: rgba(255, 255, 255, .1);
}
.mp-office__name {
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.25;
    margin-bottom: 3px;
}
.mp-office__addr {
    font-size: .84rem;
    color: rgba(255, 255, 255, .66);
    line-height: 1.35;
}
.mp-office__arrow {
    margin-left: auto;
    color: var(--color-accent);
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity .35s var(--mp-ease), transform .35s var(--mp-ease);
}
.mp-office:hover .mp-office__arrow,
.mp-office.is-active .mp-office__arrow {
    opacity: 1;
    transform: translateX(0);
}

.mp-map-wrap {
    position: relative;
    border-radius: var(--mp-radius-lg);
    overflow: hidden;
    min-height: 560px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .34);
    background: rgba(255, 255, 255, .05);
}
#mp-map {
    position: absolute;
    inset: 0;
    z-index: 1;
}
.mp-map-wrap .leaflet-container { background: #dfe8ea; font: inherit; }
.mp-map-wrap .leaflet-control-attribution {
    font-size: 10px;
    background: rgba(255, 255, 255, .82);
}

/* Marqueur custom : pastille + nom du cabinet en français */
.mp-pin-wrap {
    display: flex !important;
    align-items: center;
    gap: 7px;
    width: auto !important;
    white-space: nowrap;
}
.mp-pin {
    width: 32px;
    height: 32px;
    flex: none;
    border-radius: 50%;
    background: var(--color-primary);
    border: 3px solid #fff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
    display: grid;
    place-items: center;
    color: #fff;
    font-size: .78rem;
    transition: background .3s var(--mp-ease), transform .3s var(--mp-ease);
}
/* Le label reste masqué au repos : les 4 cabinets d'Île-de-France sont trop
   proches pour afficher 4 étiquettes en permanence sans qu'elles se chevauchent. */
.mp-pin-label {
    background: #fff;
    color: var(--color-secondary);
    font-size: .76rem;
    font-weight: 700;
    line-height: 1;
    padding: 6px 10px;
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
    opacity: 0;
    transform: translateX(-8px);
    pointer-events: none;
    transition: opacity .3s var(--mp-ease), transform .3s var(--mp-ease), background .3s var(--mp-ease);
}
.mp-pin-wrap:hover { z-index: 900 !important; }
.mp-pin-wrap:hover .mp-pin,
.mp-pin.is-active {
    background: var(--color-accent);
    transform: scale(1.15);
}
.mp-pin-wrap:hover .mp-pin-label,
.mp-pin.is-active + .mp-pin-label {
    opacity: 1;
    transform: translateX(0);
}
.mp-pin.is-active + .mp-pin-label {
    background: var(--color-accent);
}

/* Fiche cabinet flottante */
/* Ancrée en bas à gauche : ne recouvre aucun cabinet (aucun dans le Sud-Ouest). */
.mp-office-card {
    position: absolute;
    z-index: 500;
    bottom: 18px;
    left: 18px;
    width: 300px;
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 26px 60px rgba(0, 0, 0, .3);
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
    transition: opacity .4s var(--mp-ease), transform .4s var(--mp-ease);
}
.mp-office-card.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.mp-office-card__img {
    width: 100%;
    height: 130px;
    object-fit: cover;
    display: block;
    background: var(--color-bg-alt);
}
.mp-office-card__body { padding: 18px 20px 20px; }
.mp-office-card__name {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--color-secondary);
    margin-bottom: 12px;
}
.mp-office-card__row {
    display: flex;
    gap: 10px;
    font-size: .88rem;
    line-height: 1.5;
    color: var(--color-text-light);
    margin-bottom: 8px;
}
.mp-office-card__row i {
    color: var(--color-primary);
    width: 16px;
    flex: none;
    margin-top: 3px;
}
.mp-office-card__row a { color: var(--color-text-light); text-decoration: none; }
.mp-office-card__row a:hover { color: var(--color-primary); text-decoration: underline; }
.mp-office-card__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
    padding: 11px 16px;
    border-radius: 999px;
    background: var(--color-primary);
    color: #fff;
    font-size: .86rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .35s var(--mp-ease);
}
.mp-office-card__cta:hover {
    background: linear-gradient(120deg, var(--color-primary), var(--color-accent));
    color: #fff;
}
.mp-office-card__close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, .9);
    color: var(--color-secondary);
    cursor: pointer;
    display: grid;
    place-items: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
}

/* ============================================================
   7. CTA FINAL
   ============================================================ */

.mp-final {
    position: relative;
    padding: 130px 0;
    background: linear-gradient(125deg, var(--color-primary) 0%, var(--color-primary-dark) 55%, var(--color-accent) 130%);
    overflow: hidden;
    text-align: center;
    color: #fff;
}
.mp-final__decor {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000, transparent 75%);
}
.mp-final__ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .16);
    pointer-events: none;
}
.mp-final__ring--1 { width: 480px; height: 480px; top: -140px; left: -110px; animation: mp-float-a 24s ease-in-out infinite; }
.mp-final__ring--2 { width: 620px; height: 620px; bottom: -240px; right: -160px; animation: mp-float-b 30s ease-in-out infinite; }

.mp-final__inner { position: relative; z-index: 1; max-width: 780px; margin: 0 auto; }
.mp-final h2,
.mp-final h3 {
    font-size: clamp(2.1rem, 4vw, 3.3rem);
    line-height: 1.1;
    letter-spacing: -.025em;
    color: #fff;
    margin: 0 0 20px;
}
.mp-final p {
    font-size: 1.14rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, .82);
    margin: 0 0 38px;
}
.mp-final__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
}
.mp-final .mp-btn--primary {
    background: #fff;
    color: var(--color-primary);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .22);
}
.mp-final .mp-btn--primary:hover {
    background: var(--color-accent);
    color: var(--color-secondary);
}
.mp-final__phone {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 30px;
    font-size: 1rem;
    color: rgba(255, 255, 255, .82);
    text-decoration: none;
    transition: color .35s var(--mp-ease);
}
.mp-final__phone:hover { color: #fff; }
.mp-final__phone i { color: var(--color-accent); }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1100px) {
    .mp-services__grid--4 { grid-template-columns: repeat(2, 1fr); }
    .mp-services__grid--3 { grid-template-columns: repeat(2, 1fr); }
    .mp-pillars { grid-template-columns: repeat(2, 1fr); }
    .mp-map-layout { grid-template-columns: 1fr; }
    .mp-map-list { max-height: none; flex-direction: row; overflow-x: auto; overflow-y: hidden; padding-bottom: 10px; }
    .mp-office { min-width: 260px; }
}

@media (max-width: 900px) {
    .mp-hero__inner { padding: 24px 0 64px; min-height: 40vh; }
    .mp-stat { padding: 26px 16px; }
    .mp-mission { grid-template-columns: 1fr; gap: 44px; }
    .mp-mission__img { aspect-ratio: 4 / 3; }
    .mp-stats__grid { grid-template-columns: repeat(2, 1fr); }
    .mp-stat:nth-child(3)::before,
    .mp-stat:nth-child(2n + 1)::before { display: none; }
    .mp-strip { flex-wrap: wrap; padding-bottom: calc(40px + var(--mp-strip-step, 18px)); --mp-strip-step: 18px; }
    .mp-strip__item { flex: 1 1 calc(50% - 9px); height: clamp(150px, 26vh, 240px); }
    .mp-strip__item:nth-child(2n) { transform: translateY(var(--mp-strip-step, 18px)); }
    .mp-strip__item:nth-child(2n + 1) { transform: translateY(0); }
    .mp-section { padding: 76px 0; }
    .mp-reviews, .mp-logos, .mp-map-section { padding: 76px 0; }
    .mp-final { padding: 92px 0; }
}

@media (max-width: 640px) {
    .mp-services__grid--3,
    .mp-services__grid--4 { grid-template-columns: 1fr; }
    .mp-pillars { grid-template-columns: 1fr; margin-top: 52px; }
    .mp-hero { padding-top: calc(var(--header-height) + 40px); }
    .mp-hero__inner { padding: 16px 0 32px; min-height: 0; }
    /* Mobile : 1.8rem -> 1.5rem seulement. Le tiers exact (1.2rem, 19 px)
       passerait sous la taille du paragraphe d'accroche. */
    /* Plafond en vw (2026-09-24) : le segment souligne « RH & Developpement »
       est en white-space: nowrap, il ne peut donc pas se couper. A 28 px avec
       l'ecart de lettres demande il mesure 386 px pour une colonne de 327 px :
       le mot sortait de l'ecran, coupe net par l'overflow du hero. La taille
       suit maintenant la largeur reelle du telephone. */
    .mp-hero__text .mp-hero__title { font-size: min(1.75rem, 6.1vw); margin-bottom: 16px; }
    .mp-hero__sub { font-size: .98rem; line-height: 1.55; margin-bottom: 24px; }
    .mp-stat { padding: 20px 10px; }
    .mp-stat__num { font-size: 1.75rem; }
    .mp-stat__label { font-size: .78rem; line-height: 1.3; }
    .mp-hero__ctas .mp-btn,
    .mp-final__ctas .mp-btn { width: 100%; }
    .mp-review { width: 300px; padding: 24px 22px; }
    .mp-logo-item { width: 150px; height: 86px; }
    .mp-head { margin-bottom: 44px; }

    /* La fiche cabinet s'ancre en bas : la carte reste visible au-dessus. */
    .mp-map-wrap { min-height: 640px; }
    /* L'étiquette du marqueur actif débordait à droite de l'écran quand le
       cabinet est proche du bord de la carte. Le nom est de toute façon
       répété en gros dans la fiche cabinet juste en dessous. */
    .mp-pin-label { display: none; }
    .mp-office-card {
        top: auto;
        bottom: 12px;
        left: 12px;
        right: 12px;
        width: auto;
        transform: translateY(12px);
    }
    .mp-office-card.is-open { transform: translateY(0); }
    .mp-office-card__img { display: none; }
    /* Sans la photo, le bouton de fermeture retombe sur le nom du cabinet :
       on lui réserve sa gouttière. */
    .mp-office-card__name { padding-right: 38px; }
}

/* ============================================================
   METRONOME PARTNERS - PAGES INTERIEURES
   Bibliotheque de blocs des gabarits offre / cabinet / a propos /
   contact / simple. Zero ligne de JS neuve : tout passe par
   .mp-anim + data-anim, .mp-parallax, .mp-stat__num[data-count],
   <details> natif et le declenchement CSS via .is-visible.
   Toutes les couleurs passent par les variables du design system.
   ============================================================ */

/* --- Rythme de section commun ------------------------------- */
.mp-page .mp-sec {
    padding: 110px 0;
    position: relative;
}
.mp-page .mp-sec--alt   { background: var(--color-bg-alt); }
.mp-page .mp-sec--dark  { background: var(--color-secondary); }
.mp-page .mp-sec--tight { padding: 84px 0; }

.mp-sec--dark .mp-head h2,
.mp-sec--dark .mp-head h3 { color: #fff; }
.mp-sec--dark .mp-head h2 em,
.mp-sec--dark .mp-head h3 em {
    background: linear-gradient(110deg, var(--color-accent) 0%, var(--color-tertiary) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-style: normal;
}
.mp-sec--dark .mp-head p { color: rgba(255, 255, 255, .72); }

/* En-tete de section aligne a gauche (variante de .mp-head) */
.mp-head--left {
    max-width: 720px;
    margin: 0 0 56px;
    text-align: left;
}


/* ============================================================
   1. .mp-phero - hero split editorial des pages interieures
   Panneau de texte a gauche, photo pleine hauteur a droite.
   JAMAIS d'aspect-ratio : min-height en vw uniquement.
   ============================================================ */

.mp-phero {
    position: relative;
    overflow: hidden;
    background: var(--color-secondary);
    padding: calc(var(--header-height) + 74px) 0 78px;
    min-height: max(58vh, 30vw);
    display: flex;
    align-items: center;
}
.mp-phero__decor {
    position: absolute;
    inset: 0;
    background: var(--gradient-mesh-hero);
    pointer-events: none;
}
.mp-phero > .container {
    position: relative;
    z-index: 2;
    max-width: var(--max-width-wide);
    width: 100%;
    padding-left: clamp(24px, 6vw, 96px);
    padding-right: clamp(24px, 6vw, 96px);
}
.mp-phero__text { max-width: 620px; }

.mp-phero h1 {
    font-size: clamp(2.1rem, 4.4vw, 3.5rem);
    line-height: 1.08;
    letter-spacing: -.03em;
    margin: 0 0 22px;
    color: #fff;
}
.mp-phero h1 em {
    font-style: normal;
    background: linear-gradient(110deg, var(--color-accent) 0%, var(--color-tertiary) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.mp-phero__sub {
    font-size: 1.1rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, .8);
    margin: 0 0 32px;
    max-width: 540px;
}
.mp-phero__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

/* Bandeau NAP du hero cabinet */
.mp-phero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 34px;
    margin: 30px 0 0;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, .18);
}
.mp-phero__meta-item {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    font-size: .95rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, .84);
}
.mp-phero__meta-item i {
    color: var(--color-accent);
    margin-top: 3px;
    flex: none;
}
.mp-phero__meta-item a { color: inherit; text-decoration: none; }
/* Articles et evenements : leurs <li> de meta n'ont pas la classe
   mp-phero__meta-item, ils prenaient la couleur du texte courant, sombre
   sur le hero sombre - la date etait illisible (controle qualite du
   2026-09-27). Meme rendu que les items des autres gabarits. */
.mp-phero__meta > li:not([class]) {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    list-style: none;
    font-size: .95rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, .84);
}
.mp-phero__meta > li:not([class]) > i { color: var(--color-accent); margin-top: 3px; flex: none; }
.mp-phero--light .mp-phero__meta > li:not([class]) { color: var(--color-text-light); }
.mp-phero__meta-item a:hover { color: #fff; text-decoration: underline; }

/* Media : photo pleine hauteur calee au bord droit */
.mp-phero__media {
    position: absolute;
    inset: 0 0 0 52%;
    z-index: 1;
    overflow: hidden;
}
.mp-phero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.mp-phero__media::after {
    content: '';
    position: absolute;
    inset: 22px;
    border: 1px solid rgba(255, 255, 255, .38);
    pointer-events: none;
}
.mp-phero--noimg .mp-phero__text { max-width: 780px; }

/* Variante claire : contact et pages legales */
.mp-phero--light {
    background: var(--color-bg-alt);
    padding: calc(var(--header-height) + 62px) 0 62px;
    min-height: max(40vh, 22vw);
}
.mp-phero--light .mp-phero__decor { background: var(--gradient-mesh); }
.mp-phero--light h1 { color: var(--color-secondary); }
.mp-phero--light h1 em { color: var(--color-primary); -webkit-text-fill-color: currentColor; background: none; }
.mp-phero--light .mp-phero__sub { color: var(--color-text-light); }
.mp-phero--light .mp-phero__meta { border-top-color: var(--color-border); }
.mp-phero--light .mp-phero__meta-item { color: var(--color-text-light); }
.mp-phero--light .mp-phero__media::after { border-color: rgba(var(--color-secondary-rgb), .16); }

/* Variante cabinet : le panneau texte est plus large (NAP a loger) */
.mp-phero--office .mp-phero__text { max-width: 680px; }
.mp-phero--office .mp-phero__media { inset: 0 0 0 58%; }


/* ============================================================
   2. .mp-brief - reponse directe + faits + sommaire ancre
   ============================================================ */

.mp-brief {
    padding: 72px 0;
    background: var(--color-bg-alt);
    border-bottom: 1px solid var(--color-border);
}
.mp-brief__grid {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 56px;
    align-items: start;
}
.mp-brief--nofacts .mp-brief__grid { grid-template-columns: 1fr; }
.mp-brief--nofacts .mp-brief__answer { max-width: 860px; }

.mp-brief__answer {
    font-size: 1.18rem;
    line-height: 1.72;
    color: var(--color-text);
    margin: 0;
}
.mp-brief__answer strong { color: var(--color-secondary); }

.mp-brief__facts {
    margin: 28px 0 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    background: var(--color-bg);
    border-top: 1px solid var(--color-border);
    border-left: 1px solid var(--color-border);
}
.mp-brief__fact {
    background: var(--color-bg);
    padding: 18px 20px;
    border-right: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}
.mp-brief__fact dt {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin: 0 0 6px;
}
.mp-brief__fact dd {
    margin: 0;
    font-size: .98rem;
    line-height: 1.5;
    color: var(--color-text);
}

/* Sommaire ancre : filets fins, numeros en accent, liseré qui se peint */
.mp-brief__nav {
    border-top: 3px solid var(--color-primary);
    background: var(--color-bg);
    padding: 24px 26px 10px;
}
.mp-brief__nav-title {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: 14px;
}
.mp-brief__nav ol {
    list-style: none;
    counter-reset: mpbrief;
    margin: 0;
    padding: 0;
}
.mp-brief__nav li {
    counter-increment: mpbrief;
    border-bottom: 1px solid var(--color-border);
}
.mp-brief__nav li:last-child { border-bottom: none; }
.mp-brief__nav a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 0;
    color: var(--color-secondary);
    text-decoration: none;
    font-size: .98rem;
    font-weight: 500;
    transition: color .3s var(--mp-ease), padding-left .3s var(--mp-ease);
}
.mp-brief__nav a::before {
    content: counter(mpbrief, decimal-leading-zero);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--color-accent);
    flex: none;
}
.mp-brief__nav a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    height: 1px;
    width: 100%;
    background: var(--gradient-brand-warm);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .5s var(--mp-ease);
}
.mp-brief__nav.is-visible a::after { transform: scaleX(1); }
.mp-brief__nav a:hover { color: var(--color-primary); padding-left: 6px; }


/* ============================================================
   3. .mp-lead - phrase manifeste centree
   ============================================================ */

.mp-lead {
    max-width: 880px;
    margin: 0 auto;
    text-align: center;
}
.mp-lead__rule {
    display: block;
    width: 64px;
    height: 3px;
    margin: 0 auto 28px;
    background: var(--gradient-brand-warm);
}
.mp-lead p {
    font-size: clamp(1.22rem, 2.1vw, 1.6rem);
    line-height: 1.6;
    letter-spacing: -.01em;
    color: var(--color-secondary);
    margin: 0;
    font-weight: 500;
}
.mp-lead p + p { margin-top: 18px; }
.mp-lead--dark p { color: #fff; }
.mp-lead--dark .mp-lead__rule { background: linear-gradient(120deg, var(--color-accent) 0%, var(--color-tertiary) 100%); }


/* ============================================================
   4. .mp-split - texte + image
   ============================================================ */

.mp-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 72px;
    align-items: center;
}
.mp-split__text h2,
.mp-split__text h3 {
    font-size: clamp(1.9rem, 3.2vw, 2.7rem);
    line-height: 1.14;
    letter-spacing: -.02em;
    color: var(--color-secondary);
    margin: 0 0 22px;
}
.mp-split__text h2 em,
.mp-split__text h3 em { font-style: normal; color: var(--color-primary); }
.mp-split__body {
    font-size: 1.04rem;
    line-height: 1.78;
    color: var(--color-text-light);
}
.mp-split__body p { margin: 0 0 18px; }
.mp-split__body p:last-child { margin-bottom: 0; }

.mp-split__points {
    list-style: none;
    margin: 30px 0 0;
    padding: 0;
    border-top: 1px solid var(--color-border);
}
.mp-split__points li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 15px 0;
    border-bottom: 1px solid var(--color-border);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-text);
}
.mp-split__points li::before {
    content: '';
    flex: none;
    width: 8px;
    height: 8px;
    margin-top: 8px;
    background: var(--gradient-brand-warm);
}

.mp-split__sub {
    margin-top: 34px;
}
.mp-split__sub h3,
.mp-split__sub h4 {
    font-size: 1.16rem;
    line-height: 1.35;
    color: var(--color-secondary);
    margin: 0 0 10px;
}
.mp-split__sub p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.72;
    color: var(--color-text-light);
}
.mp-split__sub + .mp-split__sub { margin-top: 26px; }

.mp-split__img {
    position: relative;
    overflow: hidden;
    aspect-ratio: 5 / 6;
    max-height: 85vh;
}
.mp-split__img img {
    width: 100%;
    height: 112%;
    object-fit: cover;
    display: block;
    position: relative;
    top: -6%;
}
.mp-split__img::after {
    content: '';
    position: absolute;
    inset: 14px;
    border: 1px solid rgba(255, 255, 255, .55);
    pointer-events: none;
    transition: inset .5s var(--mp-ease), border-color .5s var(--mp-ease);
}
.mp-split__img:hover::after { inset: 11px; border-color: rgba(255, 255, 255, .85); }


/* ============================================================
   5. .mp-shift - AVANT / APRES
   Deux colonnes contrastees simultanement visibles.
   Aucune interaction, aucun slider, aucun flip.
   ============================================================ */

.mp-shift__intro {
    max-width: 760px;
    margin: 0 auto 52px;
    text-align: center;
    font-size: 1.04rem;
    line-height: 1.72;
    color: var(--color-text-light);
}
.mp-shift__grid {
    display: grid;
    grid-template-columns: 1fr 72px 1fr;
    align-items: stretch;
    gap: 0;
}
.mp-shift__col {
    padding: 42px 38px;
}
.mp-shift__col--before {
    background: var(--color-bg-alt);
    border-top: 3px solid var(--color-border);
}
.mp-shift__col--after {
    background: var(--color-bg);
    border-top: 3px solid transparent;
    border-image: var(--gradient-brand-warm) 1;
    box-shadow: 0 24px 60px rgba(var(--color-secondary-rgb), .12);
}
.mp-shift__label {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    margin-bottom: 10px;
    color: var(--color-text-muted);
}
.mp-shift__col--after .mp-shift__label { color: var(--color-primary); }
.mp-shift__ctitle {
    font-size: 1.28rem;
    line-height: 1.3;
    margin: 0 0 24px;
    color: var(--color-text-muted);
}
.mp-shift__col--after .mp-shift__ctitle { color: var(--color-secondary); }

.mp-shift__item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 13px 0;
    border-bottom: 1px solid var(--color-border);
}
.mp-shift__item:last-child { border-bottom: none; }
.mp-shift__item i {
    flex: none;
    margin-top: 4px;
    font-size: .95rem;
}
.mp-shift__col--before .mp-shift__item i { color: var(--color-text-muted); }
.mp-shift__col--after .mp-shift__item i { color: var(--color-accent); }
.mp-shift__item p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.62;
}
.mp-shift__col--before .mp-shift__item p { color: var(--color-text-muted); }
.mp-shift__col--after .mp-shift__item p { color: var(--color-text); }

/* Pastille flèche au centre */
.mp-shift__arrow-wrap {
    display: grid;
    place-items: center;
}
.mp-shift__arrow {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    background: var(--gradient-brand-warm);
    color: #fff;
    font-size: 1.05rem;
    box-shadow: 0 12px 30px rgba(var(--color-primary-rgb), .3);
}

/* Chiffre de preuve, rendu uniquement si num ET source sont remplis */
.mp-shift__metric {
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px solid var(--color-border);
}
.mp-shift__metric-num {
    font-family: var(--font-heading);
    font-size: clamp(1.8rem, 2.6vw, 2.4rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--color-primary);
}
.mp-shift__metric-label {
    font-size: .95rem;
    color: var(--color-text-light);
    margin-top: 6px;
}
.mp-shift__metric-source {
    font-size: .78rem;
    color: var(--color-text-muted);
    margin-top: 8px;
}

/* Variante tableau critere / avant / apres, des 6 criteres */
.mp-shift--rows .mp-shift__grid {
    grid-template-columns: minmax(180px, .8fr) 1fr 1fr;
}
.mp-shift--rows .mp-shift__row {
    display: contents;
}
.mp-shift--rows .mp-shift__cell {
    padding: 18px 24px;
    border-bottom: 1px solid var(--color-border);
    font-size: .98rem;
    line-height: 1.6;
}
.mp-shift--rows .mp-shift__cell--crit {
    font-weight: 600;
    color: var(--color-secondary);
    background: var(--color-bg-alt);
}
.mp-shift--rows .mp-shift__cell--before { color: var(--color-text-muted); background: var(--color-bg-alt); }
.mp-shift--rows .mp-shift__cell--after  { color: var(--color-text); background: var(--color-bg); }
.mp-shift--rows .mp-shift__head {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color-primary);
    background: var(--color-bg);
    border-bottom: 3px solid var(--color-primary);
}


/* ============================================================
   6. .mp-steps - methode, ligne de vie qui se peint
   ============================================================ */

.mp-steps__track {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--n, 4), 1fr);
    gap: 30px;
}
.mp-steps__track::before {
    content: '';
    position: absolute;
    top: 21px;
    left: 6%;
    right: 6%;
    height: 2px;
    background: var(--gradient-brand-warm);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1.1s var(--mp-ease);
}
.mp-steps__track.is-visible::before { transform: scaleX(1); }

.mp-step { position: relative; }
.mp-step__node {
    position: relative;
    z-index: 2;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    background: var(--color-bg);
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
    font-weight: 800;
    font-size: .86rem;
    letter-spacing: .02em;
    margin-bottom: 20px;
    transition: border-width .35s var(--mp-ease), background .35s var(--mp-ease);
}
.mp-sec--alt .mp-step__node { background: var(--color-bg-alt); }
.mp-step h3,
.mp-step h4 {
    font-size: 1.14rem;
    line-height: 1.32;
    color: var(--color-secondary);
    margin: 0 0 10px;
}
.mp-step p {
    margin: 0;
    font-size: .98rem;
    line-height: 1.68;
    color: var(--color-text-light);
}
.mp-step__meta {
    margin-top: 14px;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--color-primary);
}

/* Au dela de 5 etapes, la piste passe en vertical (bascule PHP) */
.mp-steps--vertical .mp-steps__track {
    grid-template-columns: 1fr;
    gap: 0;
    padding-left: 66px;
}
.mp-steps--vertical .mp-steps__track::before {
    top: 12px;
    bottom: 12px;
    left: 20px;
    right: auto;
    width: 2px;
    height: auto;
    transform: scaleY(0);
    transform-origin: top;
}
.mp-steps--vertical .mp-steps__track.is-visible::before { transform: scaleY(1); }
.mp-steps--vertical .mp-step { padding: 0 0 34px; }
.mp-steps--vertical .mp-step__node {
    position: absolute;
    left: -66px;
    top: 0;
    margin-bottom: 0;
}


/* ============================================================
   7. .mp-caps - grille d'interventions (ex flip-cards)
   ============================================================ */

.mp-caps__grid {
    display: grid;
    grid-template-columns: repeat(var(--cols, 3), 1fr);
    gap: 24px;
}
.mp-caps__card {
    position: relative;
    display: block;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    padding: 34px 30px 30px;
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    transition: transform .45s var(--mp-ease), box-shadow .45s var(--mp-ease), border-color .45s var(--mp-ease);
}
.mp-caps__card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient-brand-warm);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .7s var(--mp-ease);
}
.mp-caps__card.is-visible::after,
.mp-stagger.is-visible .mp-caps__card::after { transform: scaleX(1); }
a.mp-caps__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 48px rgba(var(--color-secondary-rgb), .12);
    border-color: rgba(var(--color-accent-rgb), .55);
}
.mp-caps__icon {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    background: rgba(var(--color-primary-rgb), .1);
    color: var(--color-primary);
    font-size: 1.05rem;
    margin-bottom: 20px;
}
.mp-caps__title {
    display: block;
    font-size: 1.16rem;
    line-height: 1.32;
    color: var(--color-secondary);
    margin: 0 0 12px;
    font-weight: 700;
}
.mp-caps__lead {
    margin: 0 0 18px;
    font-size: .98rem;
    line-height: 1.68;
    color: var(--color-text-light);
}
.mp-caps__list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--color-border);
}
.mp-caps__list li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 11px 0;
    border-bottom: 1px solid var(--color-border);
    font-size: .94rem;
    line-height: 1.55;
    color: var(--color-text);
}
.mp-caps__list li:last-child { border-bottom: none; }
.mp-caps__list li::before {
    content: '';
    flex: none;
    width: 6px;
    height: 6px;
    margin-top: 7px;
    background: var(--color-accent);
}
.mp-caps__cta {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 18px;
    font-size: .86rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--color-primary);
}
.mp-caps__cta i { transition: transform .35s var(--mp-ease); }
a.mp-caps__card:hover .mp-caps__cta i { transform: translateX(5px); }

/* ------------------------------------------------------------------
   Variante « pile » des pages offres, a partir de 6 puces.
   Concerne /conseil-rh/, /conseil-qualite-iso-9001/ et
   /qvt-hse-prevention-des-risques/.

   Refaite le 2026-09-23 (retour de Lucile : « elles sont hyper larges,
   on dirait que c'est casse »). La carte etait posee en
   grid-template-columns: 340px 1fr SANS aucun placement explicite :
   l'auto-placement envoyait l'icone seule en haut a gauche, le titre en
   haut a droite, le chapeau sous l'icone et les puces a droite. Ce
   n'etait pas une mise en page, c'etait le rangement par defaut du
   navigateur, et ca se voyait.

   Nouvelle version : cartes turquoise (le fond des heros), ecritures
   blanches, 70 % de large, colonne de gauche = identite de la carte,
   colonne de droite = les puces, et empilement sticky au defilement.
------------------------------------------------------------------ */

.mp-caps--stack .mp-caps__grid {
    /* display:block et NON grid : une grid-item colle dans sa propre zone de
       grille, qui fait exactement sa taille, donc position:sticky n'a aucune
       course et il ne se passe rien. En flux normal, le bloc de reference de
       la carte est tout le conteneur, qui lui est bien plus haut. */
    display: block;
    max-width: 70%;
    margin-inline: auto;
}

.mp-caps--stack .mp-caps__card {
    position: sticky;
    /* Le header est en position:fixed sur 72px, la carte s'arrete dessous.
       Chaque carte s'arrete un cran plus bas que la precedente : on garde la
       tranche de celles deja empilees. --i est pose par le gabarit. */
    top: calc(var(--header-height) + 26px + var(--i, 0) * 14px);
    margin-bottom: 26px;

    display: grid;
    /* minmax(0, …) et pas 270px / 1fr : sans lui, une puce longue et insecable
       impose sa largeur minimale a la colonne et la carte deborde. */
    grid-template-columns: minmax(0, 270px) minmax(0, 1fr);
    grid-template-rows: auto auto 1fr auto;
    column-gap: 46px;
    align-items: start;

    padding: 40px 44px 38px;
    background: var(--color-secondary);
    border-color: rgba(255, 255, 255, .16);
    color: #fff;
}
.mp-caps--stack .mp-caps__card:last-child { margin-bottom: 0; }

/* Meme voile que les heros. ::after porte deja le filet haut de 3px et, en
   tant que pseudo genere apres ::before, reste peint par-dessus. */
.mp-caps--stack .mp-caps__card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--gradient-mesh-hero);
    pointer-events: none;
}
.mp-caps--stack .mp-caps__icon,
.mp-caps--stack .mp-caps__title,
.mp-caps--stack .mp-caps__lead,
.mp-caps--stack .mp-caps__list,
.mp-caps--stack .mp-caps__cta { position: relative; z-index: 1; }

/* Placement explicite : c'est tout le correctif. */
.mp-caps--stack .mp-caps__icon {
    grid-column: 1; grid-row: 1;
    margin-bottom: 20px;
    background: rgba(255, 255, 255, .12);
    color: var(--color-accent);
}
.mp-caps--stack .mp-caps__title {
    grid-column: 1; grid-row: 2;
    color: #fff;
    font-size: 1.3rem;
    margin-bottom: 14px;
}
.mp-caps--stack .mp-caps__lead {
    grid-column: 1; grid-row: 3;
    color: rgba(255, 255, 255, .76);
    margin-bottom: 0;
}
.mp-caps--stack .mp-caps__cta {
    grid-column: 1; grid-row: 4;
    color: var(--color-accent);
}
.mp-caps--stack .mp-caps__list {
    grid-column: 2; grid-row: 1 / span 4;
    columns: 2;
    column-gap: 40px;
    border-top: none;
}
.mp-caps--stack .mp-caps__list li {
    break-inside: avoid;
    color: rgba(255, 255, 255, .88);
    border-bottom-color: rgba(255, 255, 255, .14);
}
.mp-caps--stack a.mp-caps__card:hover {
    transform: none; /* une carte qui colle ne doit pas sauter au survol */
    border-color: rgba(var(--color-accent-rgb), .6);
    box-shadow: 0 26px 60px rgba(var(--color-secondary-rgb), .35);
}

/* Variante grille d'offres des pages cabinets : titres en <span> */
.mp-caps--offers .mp-caps__card { padding: 28px 26px; }
.mp-caps--offers .mp-caps__icon { width: 40px; height: 40px; margin-bottom: 16px; }
.mp-caps--offers .mp-caps__title { font-size: 1.05rem; }

/* Variante associes de la page a propos */
/* Les fiches d'associes suivaient le nombre de colonnes en dur (2). Depuis
   l'arrivee d'une troisieme voix dans la gouvernance, la grille suit
   --cols comme les autres : a trois, la troisieme fiche ne reste plus
   seule sur sa ligne. */
.mp-caps--assoc .mp-caps__grid { grid-template-columns: repeat(var(--cols, 2), 1fr); gap: 28px; }
.mp-caps--assoc .mp-caps__card { padding: 34px 32px; }


/* ============================================================
   8. .mp-who - pour qui, bande sombre a filets
   ============================================================ */

.mp-who__grid {
    display: grid;
    grid-template-columns: repeat(var(--cols, 4), 1fr);
    gap: 0;
    border-top: 1px solid rgba(255, 255, 255, .14);
    border-left: 1px solid rgba(255, 255, 255, .14);
}
.mp-who__item {
    background: var(--color-secondary);
    padding: 34px 30px;
    border-right: 1px solid rgba(255, 255, 255, .14);
    border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.mp-who__icon {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .28);
    color: var(--color-accent);
    font-size: 1.05rem;
    margin-bottom: 20px;
}
.mp-who__item h3,
.mp-who__item h4 {
    font-size: 1.12rem;
    line-height: 1.32;
    color: #fff;
    margin: 0 0 10px;
}
.mp-who__item p {
    margin: 0;
    font-size: .96rem;
    line-height: 1.68;
    color: rgba(255, 255, 255, .74);
}
.mp-who__tag {
    display: inline-block;
    margin-top: 16px;
    padding: 5px 12px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--color-accent);
    border: 1px solid rgba(var(--color-accent-rgb), .4);
}


/* ============================================================
   9. .mp-band - alias de .mp-fixed (bandeau photo)
   ============================================================ */

.mp-band {
    height: 45vh;
    min-height: 300px;
    width: 100%;
    background-image: var(--mp-fixed-img);
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    background-repeat: no-repeat;
}


/* ============================================================
   10. .mp-quote - verbatim client
   ============================================================ */

.mp-quote {
    max-width: 880px;
    margin: 0 auto;
    padding-left: 34px;
    border-left: 3px solid transparent;
    border-image: var(--gradient-brand-warm) 1;
}
.mp-quote blockquote {
    margin: 0;
    font-size: clamp(1.15rem, 2vw, 1.45rem);
    line-height: 1.62;
    color: var(--color-secondary);
    font-weight: 500;
}
.mp-quote figcaption {
    margin-top: 20px;
    font-size: .94rem;
    color: var(--color-text-light);
}
.mp-quote__name {
    display: block;
    font-weight: 700;
    color: var(--color-secondary);
}


/* ============================================================
   11. .mp-faq--split - FAQ en deux colonnes
   ============================================================ */

.mp-faq--split .mp-faq__layout {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 64px;
    align-items: start;
}
.mp-faq--split .mp-faq__list { max-width: none; margin: 0; }
.mp-faq--split .mp-head {
    max-width: none;
    margin: 0;
    text-align: left;
    position: sticky;
    top: calc(var(--header-height) + 28px);
}
.mp-faq__q h3,
.mp-faq__q h4 {
    margin: 0;
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.4;
    color: inherit;
}


/* ============================================================
   12. .mp-next - grille de liens a filets, cellule entiere cliquable
   ============================================================ */

.mp-next__grid {
    display: grid;
    grid-template-columns: repeat(var(--cols, 3), 1fr);
    gap: 0;
    background: var(--color-bg);
    border-top: 1px solid var(--color-border);
    border-left: 1px solid var(--color-border);
}
.mp-next__item {
    position: relative;
    display: block;
    background: var(--color-bg);
    border-right: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    padding: 34px 30px 30px;
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    transition: background .4s var(--mp-ease);
}
.mp-next__num {
    display: block;
    font-family: var(--font-heading);
    font-size: 2.6rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.03em;
    color: rgba(var(--color-primary-rgb), .14);
    margin-bottom: 18px;
}
.mp-next__title {
    display: block;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.34;
    color: var(--color-secondary);
    margin-bottom: 10px;
}
.mp-next__text {
    display: block;
    font-size: .94rem;
    line-height: 1.62;
    color: var(--color-text-light);
}
.mp-next__go {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
    font-size: .84rem;
    font-weight: 700;
    letter-spacing: .05em;
    color: var(--color-primary);
}
.mp-next__go i { transition: transform .35s var(--mp-ease); }
a.mp-next__item:hover { background: var(--color-primary-light); }
a.mp-next__item:hover .mp-next__go i { transform: translateX(6px); }
a.mp-next__item:hover .mp-next__num { color: rgba(var(--color-primary-rgb), .24); }


/* ============================================================
   13. .mp-final--offer / --light : variantes du CTA final
   ============================================================ */

.mp-final--offer .mp-final__inner { max-width: 820px; }
.mp-final--light {
    background: var(--color-bg-alt);
    color: var(--color-text);
}
.mp-final--light .mp-final__decor,
.mp-final--light .mp-final__ring { display: none; }
.mp-final--light .mp-final__inner h2,
.mp-final--light .mp-final__inner h3 { color: var(--color-secondary); }
.mp-final--light .mp-final__inner p { color: var(--color-text-light); }
.mp-final--light .mp-final__phone { color: var(--color-text-light); }
.mp-final--light .mp-final__phone:hover { color: var(--color-primary); }
.mp-final--light .mp-btn--primary { background: var(--color-primary); color: #fff; }
.mp-final--light .mp-btn--ghost {
    background: transparent;
    color: var(--color-secondary);
    border-color: var(--color-border);
    backdrop-filter: none;
}
.mp-final--light .mp-btn--ghost:hover {
    background: var(--gradient-brand-warm);
    border-color: transparent;
    color: #fff;
}


/* ============================================================
   14. .mp-locate - venir au cabinet (carte + panneau NAP)
   ============================================================ */

.mp-locate__grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 40px;
    align-items: stretch;
}
.mp-locate__map {
    height: clamp(380px, 46vh, 560px);
    width: 100%;
    border: 1px solid var(--color-border);
    background: var(--color-bg-alt);
}
.mp-locate__panel {
    background: var(--color-bg-alt);
    border-top: 3px solid var(--color-primary);
    padding: 32px 30px;
}
.mp-locate__dl { margin: 0; }
.mp-locate__row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 15px 0;
    border-bottom: 1px solid var(--color-border);
}
.mp-locate__row:last-of-type { border-bottom: none; }
.mp-locate__row i {
    flex: none;
    margin-top: 4px;
    color: var(--color-primary);
}
.mp-locate__row dt {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: 5px;
}
.mp-locate__row dd {
    margin: 0;
    font-size: .99rem;
    line-height: 1.58;
    color: var(--color-text);
}
.mp-locate__row dd a { color: var(--color-primary); text-decoration: none; }
.mp-locate__row dd a:hover { text-decoration: underline; }
.mp-locate__ctas {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 24px;
}
.mp-locate__access {
    margin: 22px 0 0;
    font-size: .96rem;
    line-height: 1.68;
    color: var(--color-text-light);
}
.mp-locate__embed { width: 100%; }
.mp-locate__embed iframe { width: 100%; border: 0; display: block; min-height: 420px; }


/* ============================================================
   15. .mp-director - l'interlocuteur
   ============================================================ */

.mp-director {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 56px;
    align-items: start;
}
.mp-director__photo {
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
}
.mp-director__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.mp-director__photo::after {
    content: '';
    position: absolute;
    inset: 12px;
    border: 1px solid rgba(255, 255, 255, .5);
    pointer-events: none;
}
.mp-director__body h2,
.mp-director__body h3 {
    font-size: clamp(1.7rem, 2.8vw, 2.3rem);
    line-height: 1.16;
    letter-spacing: -.02em;
    color: var(--color-secondary);
    margin: 0 0 18px;
}
.mp-director__bio {
    font-size: 1.02rem;
    line-height: 1.76;
    color: var(--color-text-light);
}
.mp-director__bio p { margin: 0 0 16px; }
.mp-director__bio p:last-child { margin-bottom: 0; }
.mp-director__strengths {
    list-style: none;
    margin: 26px 0 0;
    padding: 0;
    display: grid;
    gap: 1px;
    background: var(--color-border);
    border: 1px solid var(--color-border);
}
.mp-director__strengths li {
    background: var(--color-bg);
    padding: 14px 18px;
    font-size: .96rem;
    line-height: 1.55;
    color: var(--color-text);
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.mp-director__strengths li::before {
    content: '';
    flex: none;
    width: 6px;
    height: 6px;
    margin-top: 8px;
    background: var(--color-accent);
}
.mp-sec--alt .mp-director__strengths li { background: var(--color-bg-alt); }
.mp-director__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}
.mp-director--full { grid-template-columns: 380px 1fr; }


/* ============================================================
   16. .mp-territory - chiffres de territoire (fond clair)
   ============================================================ */

.mp-territory__grid {
    display: grid;
    grid-template-columns: repeat(var(--cols, 4), 1fr);
    gap: 0;
    background: var(--color-bg);
    border-top: 1px solid var(--color-border);
    border-left: 1px solid var(--color-border);
}
.mp-territory__item {
    background: var(--color-bg);
    padding: 34px 26px;
    text-align: center;
    border-right: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}
.mp-territory__item .mp-stat__num {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 3.1vw, 2.8rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--color-primary);
    margin-bottom: 10px;
}
.mp-territory__label {
    font-size: .95rem;
    line-height: 1.5;
    color: var(--color-text);
    font-weight: 500;
}
.mp-territory__source {
    display: block;
    margin-top: 10px;
    font-size: .74rem;
    line-height: 1.45;
    color: var(--color-text-muted);
}


/* ============================================================
   17. .mp-contact + .mp-form - formulaire et panneau siege
   ============================================================ */

.mp-contact {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 56px;
    align-items: start;
}
.mp-contact__aside {
    background: var(--color-bg-alt);
    border-top: 3px solid var(--color-primary);
    padding: 34px 32px;
}
.mp-contact__aside h3,
.mp-contact__aside h4 {
    font-size: 1.2rem;
    line-height: 1.3;
    color: var(--color-secondary);
    margin: 0 0 18px;
}
.mp-contact__aside .mp-locate__row:last-of-type { border-bottom: none; }

.mp-form .wpcf7-form p { margin: 0 0 18px; }
.mp-form label {
    display: block;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-secondary);
    margin-bottom: 8px;
}
.mp-form input[type="text"],
.mp-form input[type="email"],
.mp-form input[type="tel"],
.mp-form input[type="url"],
.mp-form select,
.mp-form textarea {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--color-border);
    border-radius: 0;
    background: var(--color-bg);
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--color-text);
    transition: border-color .3s var(--mp-ease), box-shadow .3s var(--mp-ease);
}
.mp-form input:focus,
.mp-form select:focus,
.mp-form textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), .12);
}
.mp-form textarea { min-height: 170px; resize: vertical; }
.mp-form input[type="submit"],
.mp-form .wpcf7-submit {
    width: auto;
    padding: 16px 34px;
    border: 1px solid transparent;
    border-radius: 0;
    background: var(--color-primary);
    color: #fff;
    font-weight: 600;
    font-size: .92rem;
    letter-spacing: .04em;
    cursor: pointer;
    transition: background .35s var(--mp-ease), transform .35s var(--mp-ease), box-shadow .35s var(--mp-ease);
}
.mp-form input[type="submit"]:hover,
.mp-form .wpcf7-submit:hover {
    background: var(--gradient-brand-warm);
    color: #fff;
    box-shadow: 0 16px 38px rgba(var(--color-primary-rgb), .28);
}
.mp-form .wpcf7-acceptance label,
.mp-form .wpcf7-list-item label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    text-transform: none;
    letter-spacing: 0;
    font-size: .9rem;
    font-weight: 400;
    color: var(--color-text-light);
    line-height: 1.55;
}
.mp-form .wpcf7-list-item { margin: 0; }


/* ============================================================
   18. .mp-team - grille de l'equipe (page a propos)
   ============================================================ */

.mp-team__grid {
    display: grid;
    grid-template-columns: repeat(var(--cols, 4), 1fr);
    gap: 24px;
}
.mp-team__card {
    display: block;
    text-decoration: none;
    color: inherit;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    transition: transform .45s var(--mp-ease), box-shadow .45s var(--mp-ease), border-color .45s var(--mp-ease);
}
.mp-team__photo {
    display: block;
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--color-bg-alt);
}
.mp-team__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mp-team__body { display: block; padding: 20px 22px 22px; }
.mp-team__name {
    display: block;
    font-size: 1.04rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-secondary);
}
.mp-team__role {
    display: block;
    margin-top: 6px;
    font-size: .88rem;
    line-height: 1.5;
    color: var(--color-text-light);
}
a.mp-team__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 48px rgba(var(--color-secondary-rgb), .12);
    border-color: rgba(var(--color-accent-rgb), .55);
}


/* ============================================================
   19. .mp-rich - contenu editorial des pages simples
   ============================================================ */

.mp-rich {
    max-width: var(--max-width-narrow);
    margin: 0 auto;
    font-size: 1.04rem;
    line-height: 1.78;
    color: var(--color-text-light);
}
.mp-rich h2 {
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    line-height: 1.2;
    letter-spacing: -.02em;
    color: var(--color-secondary);
    margin: 46px 0 18px;
}
.mp-rich h2:first-child { margin-top: 0; }
.mp-rich h3 {
    font-size: 1.16rem;
    line-height: 1.35;
    color: var(--color-secondary);
    margin: 32px 0 12px;
}
.mp-rich p { margin: 0 0 18px; }
.mp-rich ul, .mp-rich ol { margin: 0 0 20px; padding-left: 22px; }
.mp-rich li { margin-bottom: 9px; }
.mp-rich a { color: var(--color-primary); }
.mp-rich table { width: 100%; border-collapse: collapse; margin: 0 0 22px; }
.mp-rich th, .mp-rich td {
    border: 1px solid var(--color-border);
    padding: 12px 14px;
    text-align: left;
    font-size: .96rem;
}
.mp-rich th { background: var(--color-bg-alt); color: var(--color-secondary); }
.mp-rich__scroll { overflow-x: auto; }


/* ============================================================
   RESPONSIVE - pages interieures
   ============================================================ */

@media (max-width: 1100px) {
    .mp-brief__grid { grid-template-columns: 1fr; gap: 36px; }
    .mp-faq--split .mp-faq__layout { grid-template-columns: 1fr; gap: 36px; }
    .mp-faq--split .mp-head { position: static; }
    .mp-locate__grid { grid-template-columns: minmax(0, 1fr); }
    .mp-contact { grid-template-columns: 1fr; gap: 40px; }
    .mp-team__grid { grid-template-columns: repeat(3, 1fr); }
    .mp-caps__grid { grid-template-columns: repeat(2, 1fr); }
    .mp-territory__grid { grid-template-columns: repeat(2, 1fr); }
    /* Les cartes empilees reprennent toute la largeur : a 70 % de 1100px la
       colonne des puces ne tient plus deux colonnes. */
    .mp-caps--stack .mp-caps__grid { max-width: 100%; }
    .mp-caps--stack .mp-caps__card {
        grid-template-columns: minmax(0, 230px) minmax(0, 1fr);
        column-gap: 34px;
        padding: 34px 32px 32px;
    }
    .mp-caps--stack .mp-caps__list { columns: 1; }
}

@media (max-width: 900px) {
    .mp-page .mp-sec { padding: 76px 0; }
    .mp-page .mp-sec--tight { padding: 62px 0; }

    /* Hero : le media passe SOUS le texte. On garde flex + order plutot que
       display:block, sinon le media (place avant le .container dans le DOM,
       pour le rendu absolu du desktop) remonterait au-dessus du titre. */
    .mp-phero {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        padding: calc(var(--header-height) + 48px) 0 0;
        min-height: 0;
    }
    .mp-phero--light { padding-top: calc(var(--header-height) + 40px); }
    .mp-phero > .container { order: 1; }
    .mp-phero__text { max-width: none; }
    .mp-phero__media,
    .mp-phero--office .mp-phero__media {
        order: 2;
        position: static;
        inset: auto;
        height: clamp(220px, 38vh, 320px);
        margin-top: 44px;
    }
    .mp-phero__media::after { inset: 14px; }
    .mp-phero--noimg { padding-bottom: 48px; }

    .mp-split { grid-template-columns: 1fr; gap: 40px; }
    .mp-split__img { aspect-ratio: 4 / 3; max-height: none; }

    .mp-shift__grid { grid-template-columns: 1fr; }
    .mp-shift__col { padding: 32px 26px; }
    .mp-shift__arrow-wrap { padding: 18px 0; }
    /* La rotation est portee par __arrow : sur __arrow-wrap (porteur de .mp-anim)
       la regle .is-visible { transform: none } l'ecraserait silencieusement. */
    .mp-shift__arrow { transform: rotate(90deg); }
    .mp-shift--rows .mp-shift__grid { grid-template-columns: 1fr; }
    .mp-shift--rows .mp-shift__head { display: none; }

    .mp-steps__track { grid-template-columns: 1fr; gap: 0; padding-left: 66px; }
    .mp-steps__track::before {
        top: 12px;
        bottom: 12px;
        left: 20px;
        right: auto;
        width: 2px;
        height: auto;
        transform: scaleY(0);
        transform-origin: top;
    }
    .mp-steps__track.is-visible::before { transform: scaleY(1); }
    .mp-step { padding: 0 0 34px; }
    .mp-step__node { position: absolute; left: -66px; top: 0; margin-bottom: 0; }

    .mp-who__grid { grid-template-columns: repeat(2, 1fr); }
    /* Plus d'empilement sous 900px : une carte y fait souvent plus haut que
       l'ecran, elle resterait collee sans jamais laisser passer la suivante. */
    .mp-caps--stack .mp-caps__card {
        position: static;
        grid-template-columns: 1fr;
        grid-template-rows: none;
        row-gap: 0;
        padding: 30px 26px 28px;
    }
    .mp-caps--stack .mp-caps__icon,
    .mp-caps--stack .mp-caps__title,
    .mp-caps--stack .mp-caps__lead,
    .mp-caps--stack .mp-caps__cta,
    .mp-caps--stack .mp-caps__list { grid-column: 1; grid-row: auto; }
    .mp-caps--stack .mp-caps__lead { margin-bottom: 18px; }
    .mp-caps--stack .mp-caps__list {
        columns: 1;
        border-top: 1px solid rgba(255, 255, 255, .14);
    }
    .mp-caps--assoc .mp-caps__grid { grid-template-columns: 1fr; }

    .mp-director { grid-template-columns: 1fr; gap: 34px; }
    .mp-director--full { grid-template-columns: 1fr; }
    .mp-director__photo { max-width: 280px; }

    .mp-next__grid { grid-template-columns: 1fr; }
    .mp-band { background-attachment: scroll; height: 34vh; }
    .mp-head--left { margin-bottom: 44px; }
    .mp-quote { padding-left: 24px; }
}

@media (max-width: 640px) {
    .mp-brief { padding: 56px 0; }
    .mp-brief__facts { grid-template-columns: 1fr; }
    .mp-phero__ctas .mp-btn { width: 100%; }
    .mp-locate__ctas .mp-btn { width: 100%; }
    .mp-director__ctas .mp-btn { width: 100%; }
    .mp-who__grid { grid-template-columns: 1fr; }
    .mp-caps__grid { grid-template-columns: 1fr; }
    /* minmax(0, 1fr) : a 320 px, « Directeur du cabinet de Rambouillet »
       elargissait la 2e colonne de 15 px hors de l'ecran (controle du
       2026-09-27). Les mots longs se coupent plutot que de deborder. */
    .mp-team__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mp-team__card { overflow-wrap: anywhere; hyphens: auto; }
    .mp-locate__map { height: 300px; }
    .mp-caps__card { padding: 28px 24px 26px; }
}

@media (max-width: 420px) {
    .mp-shift__col { padding: 32px 22px; }
}

/* --- prefers-reduced-motion : rien ne bouge, tout reste visible --- */
@media (prefers-reduced-motion: reduce) {
    .mp-kicker::before { animation: none; }
    .mp-steps__track::before,
    .mp-caps__card::after,
    .mp-brief__nav a::after,
    .mp-pillar::after {
        transition: none;
        transform: none;
    }
    .mp-final__ring { animation: none; }
    html { scroll-behavior: auto; }
}

/* ============================================================
   .mp-stagger - apparition en cascade SANS .mp-anim sur chaque item
   Le conteneur porte .mp-anim .mp-stagger : l'observateur de
   mp-home.js lui pose .is-visible, mais le conteneur lui-meme ne
   bouge pas ; ce sont ses enfants directs qui apparaissent, decales.
   Un repeteur de 9 items ne coute donc qu'UN element .mp-anim.
   ============================================================ */
.mp-stagger {
    opacity: 1;
    transform: none;
    transition: none;
}
.mp-stagger > * {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity .8s var(--mp-ease), transform .8s var(--mp-ease);
}
.mp-stagger.is-visible > * { opacity: 1; transform: none; }
.mp-stagger.is-visible > :nth-child(4n + 2) { transition-delay: .09s; }
.mp-stagger.is-visible > :nth-child(4n + 3) { transition-delay: .18s; }
.mp-stagger.is-visible > :nth-child(4n + 4) { transition-delay: .27s; }

@media (prefers-reduced-motion: reduce) {
    .mp-stagger > * { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   .mp-map-section--light : la carte des 7 cabinets sur fond clair
   (hub /nos-cabinets/ et page contact). Meme structure que la home,
   seule la peau change.
   ============================================================ */
.mp-map-section--light {
    background: var(--color-bg-alt);
}
.mp-map-section--light::before { display: none; }
.mp-map-section--light .mp-head h2,
.mp-map-section--light .mp-head h3 { color: var(--color-secondary); }
.mp-map-section--light .mp-head h2 em,
.mp-map-section--light .mp-head h3 em {
    background: none;
    -webkit-text-fill-color: currentColor;
    color: var(--color-primary);
}
.mp-map-section--light .mp-head p { color: var(--color-text-light); }
.mp-map-section--light .mp-office {
    background: var(--color-bg);
    border-color: var(--color-border);
    color: var(--color-text);
}
.mp-map-section--light .mp-office__name { color: var(--color-secondary); }
.mp-map-section--light .mp-office__addr { color: var(--color-text-light); }
.mp-map-section--light .mp-office:hover,
.mp-map-section--light .mp-office.is-active {
    background: var(--color-primary-light);
    border-color: rgba(var(--color-accent-rgb), .55);
}

/* Fonction de l'interlocuteur, sous son nom. */
.mp-director__role {
    margin: 0 0 20px;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--color-primary);
}

/* Les separateurs des grilles a filets sont portes par les items : une cellule
   vide (7 cabinets sur 4 colonnes) ne doit pas apparaitre en aplat gris. */
.mp-sec--alt .mp-brief__facts,
.mp-sec--alt .mp-territory__grid,
.mp-sec--alt .mp-next__grid { background: var(--color-bg-alt); }

/* ============================================================
   RDV 2026-09-02 - Recherche flottante (score de matching)
   ============================================================ */
.mp-search-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(var(--color-primary-rgb), .22);
    background: transparent;
    color: var(--color-secondary);
    font-size: 1rem;
    cursor: pointer;
    flex: none;
    transition: background .25s var(--mp-ease), color .25s var(--mp-ease), border-color .25s var(--mp-ease);
}
.mp-search-toggle:hover,
.mp-search-toggle:focus-visible {
    background: var(--color-secondary);
    border-color: var(--color-secondary);
    color: #fff;
}

.mp-search-overlay {
    position: fixed;
    inset: 0;
    z-index: 9990;
    background: rgba(15, 53, 62, .55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    padding: 12vh 20px 40px;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.mp-search-overlay[hidden] { display: none; }
body.mp-search-open { overflow: hidden; }

.mp-search-panel {
    width: min(760px, 100%);
    margin: 0 auto;
    background: #fff;
    box-shadow: 0 40px 90px -40px rgba(15, 53, 62, .55);
    animation: mp-search-in .32s var(--mp-ease) both;
}
@keyframes mp-search-in { from { opacity: 0; transform: translateY(-14px); } }
@media (prefers-reduced-motion: reduce) { .mp-search-panel { animation: none; } }

.mp-search-box {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--color-border, rgba(15, 53, 62, .12));
}
.mp-search-box__icon { color: var(--color-accent); font-size: 1.05rem; flex: none; }
.mp-search-box input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: 1.12rem;
    font-weight: 600;
    color: var(--color-secondary);
    padding: 6px 0;
}
.mp-search-box input::-webkit-search-cancel-button { display: none; }
.mp-search-box__close {
    flex: none;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(var(--color-primary-rgb), .18);
    background: transparent;
    color: var(--color-text-light);
    cursor: pointer;
    transition: background .25s var(--mp-ease), color .25s var(--mp-ease);
}
.mp-search-box__close:hover { background: var(--color-secondary); color: #fff; border-color: var(--color-secondary); }

.mp-search-results { padding: 8px 0 4px; max-height: 60vh; overflow-y: auto; }
.mp-search-hint,
.mp-search-empty,
.mp-search-error,
.mp-search-count {
    margin: 0;
    padding: 16px 20px;
    font-size: .88rem;
    color: var(--color-text-light);
}
.mp-search-count { font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .74rem; color: var(--color-accent); }
.mp-search-error { color: #b3261e; }

.mp-search-list { display: flex; flex-direction: column; }
.mp-search-item {
    display: grid;
    grid-template-columns: 62px 1fr auto;
    align-items: center;
    gap: 16px;
    padding: 14px 20px;
    border-top: 1px solid var(--color-border, rgba(15, 53, 62, .10));
    text-decoration: none;
    color: inherit;
    transition: background .2s var(--mp-ease);
}
.mp-search-item:hover,
.mp-search-item:focus-visible { background: var(--color-bg-alt, #f4f7f8); }
.mp-search-item--top { background: rgba(var(--color-accent-rgb, 68, 203, 207), .08); }

.mp-search-item__img { width: 62px; height: 52px; object-fit: cover; display: block; }
.mp-search-item__img--ph {
    display: grid;
    place-items: center;
    background: var(--color-bg-alt, #f4f7f8);
    color: var(--color-accent);
}
.mp-search-item__body { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.mp-search-item__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mp-search-item__chip,
.mp-search-item__badge {
    font-size: .66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 3px 8px;
    line-height: 1.4;
}
.mp-search-item__chip { background: var(--color-bg-alt, #f4f7f8); color: var(--color-text-light); }
.mp-search-item__badge { background: var(--color-accent); color: var(--color-secondary); }
.mp-search-item__title { font-family: var(--font-heading); font-weight: 700; font-size: 1rem; color: var(--color-secondary); line-height: 1.3; }
.mp-search-item__excerpt {
    font-size: .84rem;
    line-height: 1.5;
    color: var(--color-text-light);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.mp-search-item__score { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.mp-search-item__bar { flex: 1; max-width: 130px; height: 4px; background: rgba(var(--color-primary-rgb), .14); display: block; }
.mp-search-item__bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--color-primary), var(--color-accent)); }
.mp-search-item__pct { font-size: .7rem; font-weight: 700; color: var(--color-primary); letter-spacing: .02em; }
.mp-search-item__arrow { color: var(--color-accent); font-size: .85rem; transition: transform .25s var(--mp-ease); }
.mp-search-item:hover .mp-search-item__arrow { transform: translateX(4px); }

.mp-search-all {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 20px;
    border-top: 1px solid var(--color-border, rgba(15, 53, 62, .10));
    font-size: .88rem;
    font-weight: 700;
    color: var(--color-primary);
    text-decoration: none;
}
.mp-search-all:hover { background: var(--color-secondary); color: #fff; }
.mp-search-kbd {
    margin: 0;
    padding: 12px 20px;
    background: var(--color-bg-alt, #f4f7f8);
    font-size: .74rem;
    color: var(--color-text-light);
    text-align: center;
}
.mp-search-kbd kbd {
    font-family: inherit;
    font-size: .7rem;
    font-weight: 700;
    background: #fff;
    border: 1px solid rgba(15, 53, 62, .18);
    padding: 2px 6px;
}

@media (max-width: 640px) {
    .mp-search-overlay { padding: 0; }
    .mp-search-panel { width: 100%; min-height: 100%; }
    .mp-search-results { max-height: none; }
    .mp-search-item { grid-template-columns: 48px 1fr; gap: 12px; padding: 14px 16px; }
    .mp-search-item__img { width: 48px; height: 48px; }
    .mp-search-item__arrow { display: none; }
    .mp-search-kbd { display: none; }
}

/* ============================================================
   RDV 2026-09-02 - Bulles flottantes (contact + recherche)
   ============================================================ */
.mp-fabs {
    position: fixed;
    right: clamp(14px, 3vw, 28px);
    bottom: clamp(14px, 3vw, 28px);
    z-index: 9980;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
}

.mp-fab {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    font-weight: 700;
    color: #fff;
    box-shadow: 0 18px 36px -16px rgba(15, 53, 62, .6);
    /* La bulle vit dans le footer, hors de .mp-home / .mp-page : --mp-ease n'y
       est pas defini, donc un var() nu rendait transition ET animation
       invalides (l'onde ne tournait jamais). D'ou la valeur de repli. */
    transition: transform .3s var(--mp-ease, cubic-bezier(.22, 1, .36, 1)),
                background .3s var(--mp-ease, cubic-bezier(.22, 1, .36, 1));
}
.mp-fab:hover { transform: translateY(-3px); }

/* Bulle de contact : icone seule, carree comme le reste de la DA. */
.mp-fab--contact {
    width: 60px;
    height: 60px;
    padding: 0;
    background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
    font-size: 1.2rem;
}
.mp-fab__icon-close { display: none; }
.mp-fab-contact.is-open .mp-fab__icon-open { display: none; }
.mp-fab-contact.is-open .mp-fab__icon-close { display: inline-block; }

/* Les ondes sont en position absolue : sans z-index elles se peignent
   PAR-DESSUS l'icone (qui est en flux) et la teintent. Le pictogramme doit
   rester au-dessus pour etre blanc pur. */
.mp-fab--contact i { position: relative; z-index: 1; color: #fff; }

/* Ondes qui sortent de la bulle par salves, avec une pause entre chaque :
   deux anneaux decales, visibles sur le premier quart du cycle seulement. */
.mp-fab__pulse {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}
.mp-fab__pulse::before,
.mp-fab__pulse::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 2px solid var(--color-accent);
    opacity: 0;
    animation: mp-fab-pulse 5.5s cubic-bezier(.22, 1, .36, 1) infinite;
}
.mp-fab__pulse::after { animation-delay: .8s; }
@keyframes mp-fab-pulse {
    0%   { transform: scale(1);    opacity: .8; }
    20%  { transform: scale(1.8);  opacity: 0; }
    100% { transform: scale(1.8);  opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .mp-fab__pulse::before, .mp-fab__pulse::after { animation: none; opacity: 0; }
}
.mp-fab-contact.is-open .mp-fab__pulse { display: none; }

.mp-fab-contact { position: relative; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }

.mp-fab-panel {
    width: min(320px, calc(100vw - 32px));
    background: #fff;
    box-shadow: 0 30px 70px -30px rgba(15, 53, 62, .6);
    overflow: hidden;
    animation: mp-fab-in .28s var(--mp-ease) both;
}
.mp-fab-panel[hidden] { display: none; }
@keyframes mp-fab-in { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) { .mp-fab-panel { animation: none; } }

.mp-fab-panel__head {
    position: relative;
    padding: 20px 46px 18px 20px;
    background: var(--color-secondary);
    color: #fff;
}
.mp-fab-panel__title { margin: 0; font-family: var(--font-heading); font-weight: 700; font-size: 1.02rem; line-height: 1.3; }
.mp-fab-panel__sub { margin: 6px 0 0; font-size: .84rem; line-height: 1.5; color: rgba(255, 255, 255, .78); }
.mp-fab-panel__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 30px;
    height: 30px;
    border: 0;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    cursor: pointer;
}
.mp-fab-panel__close:hover { background: rgba(255, 255, 255, .28); }

.mp-fab-panel__actions { display: flex; flex-direction: column; }
.mp-fab-action {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px 20px;
    border-top: 1px solid var(--color-border, rgba(15, 53, 62, .10));
    text-decoration: none;
    color: var(--color-secondary);
    transition: background .2s var(--mp-ease);
}
.mp-fab-panel__actions .mp-fab-action:first-child { border-top: 0; }
.mp-fab-action:hover { background: var(--color-bg-alt, #f4f7f8); }
.mp-fab-action i { font-size: 1.05rem; width: 24px; text-align: center; flex: none; color: var(--color-primary); }
.mp-fab-action--wa i { color: #25d366; }
.mp-fab-action span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mp-fab-action strong { font-size: .93rem; font-weight: 700; }
.mp-fab-action em { font-style: normal; font-size: .8rem; color: var(--color-text-light); overflow-wrap: anywhere; }

@media (max-width: 640px) {
    .mp-fab--contact { width: 54px; height: 54px; font-size: 1.05rem; }
}
/* La bulle et le bouton « retour en haut » se superposaient en bas a droite. */
.back-to-top { bottom: clamp(88px, 12vw, 110px); }

/* Variante « deux niveaux equivalents » du bloc shift : les deux colonnes ont
   le meme poids visuel (pas de colonne grisee comme dans un avant / apres). */
.mp-shift--levels .mp-shift__col--before {
    background: var(--color-bg);
    border-top: 3px solid var(--color-secondary);
    box-shadow: 0 24px 60px rgba(var(--color-secondary-rgb), .12);
}
.mp-shift--levels .mp-shift__col--before .mp-shift__label { color: var(--color-secondary); }
.mp-shift--levels .mp-shift__col--before .mp-shift__ctitle { color: var(--color-secondary); }
.mp-shift--levels .mp-shift__col--before .mp-shift__item i { color: var(--color-secondary); }
.mp-shift--levels .mp-shift__col--before .mp-shift__item p { color: var(--color-text); }

/* ============================================================
   RDV 2026-09-02 - Formulaire natif (pages cabinet + contact)
   ============================================================ */
.mp-cform-layout {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: start;
}
.mp-cform-intro h2,
.mp-cform-intro h3 { margin: 0 0 16px; }
.mp-cform-intro p { color: var(--color-text-light); line-height: 1.7; margin: 0 0 22px; }
.mp-cform-intro__tel {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--color-secondary);
    text-decoration: none;
}
.mp-cform-intro__tel i { color: var(--color-accent); font-size: .95rem; }
.mp-cform-intro__tel:hover { color: var(--color-primary); }

.mp-cform__form {
    background: var(--color-bg-alt);
    border-top: 3px solid var(--color-accent);
    padding: clamp(24px, 3.5vw, 38px);
}
/* Piege a robots : hors flux, jamais display:none (certains bots l'ignorent). */
.mp-cform__hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.mp-cform__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 20px;
}
.mp-cform__field--full { grid-column: 1 / -1; }
.mp-cform__field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.mp-cform__field label {
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--color-secondary);
}
.mp-cform__req { color: var(--color-accent); }

.mp-cform__field input,
.mp-cform__field select,
.mp-cform__field textarea {
    width: 100%;
    font-family: inherit;
    font-size: 1rem;
    color: var(--color-text);
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 0;
    padding: 12px 14px;
    transition: border-color .25s var(--mp-ease), box-shadow .25s var(--mp-ease);
}
.mp-cform__field textarea { resize: vertical; min-height: 140px; }
.mp-cform__field select { appearance: none; background-image: none; cursor: pointer; }
.mp-cform__field input:focus,
.mp-cform__field select:focus,
.mp-cform__field textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), .22);
}
.mp-cform__field.is-error input,
.mp-cform__field.is-error select,
.mp-cform__field.is-error textarea { border-color: #b3261e; }

.mp-cform__err { margin: 0; font-size: .78rem; color: #b3261e; min-height: 0; }
.mp-cform__err:empty { display: none; }

.mp-cform__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 24px;
}
.mp-cform__legal { margin: 0; font-size: .78rem; line-height: 1.55; color: var(--color-text-light); max-width: 46ch; }

.mp-cform__notice {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
    margin-bottom: 20px;
    border-left: 4px solid var(--color-accent);
    background: rgba(var(--color-accent-rgb), .10);
}
.mp-cform__notice--err { border-left-color: #b3261e; background: rgba(179, 38, 30, .08); }
.mp-cform__notice i { font-size: 1.15rem; color: var(--color-primary); margin-top: 2px; }
.mp-cform__notice--err i { color: #b3261e; }
.mp-cform__notice strong { display: block; font-family: var(--font-heading); color: var(--color-secondary); }
.mp-cform__notice p { margin: 4px 0 0; font-size: .9rem; line-height: 1.55; color: var(--color-text-light); }

@media (max-width: 900px) {
    .mp-cform-layout { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .mp-cform__grid { grid-template-columns: 1fr; }
    .mp-cform__footer { flex-direction: column; align-items: stretch; }
    .mp-cform__footer .mp-btn { justify-content: center; }
}

/* ============================================================
   RDV 2026-09-02 - Appels « Nous rejoindre »
   ============================================================ */
/* Tuile de fin de grille sur /nos-cabinets/ : elle se distingue des cabinets
   sans casser le rythme de la grille. */
.mp-next__item--join {
    background: var(--color-secondary);
    color: #fff;
}
.mp-next__item--join .mp-next__num { color: var(--color-accent); opacity: 1; }
.mp-next__item--join .mp-next__title { color: #fff; }
.mp-next__item--join .mp-next__text { color: rgba(255, 255, 255, .74); }
.mp-next__item--join .mp-next__go { color: var(--color-accent); }
.mp-next__item--join:hover { background: var(--color-primary); }

/* Bandeau de rappel sur « Qui sommes-nous ». */
.mp-joinband__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    padding: clamp(28px, 4vw, 44px);
    background: var(--color-bg-alt);
    border-left: 4px solid var(--color-accent);
}
.mp-joinband__text { flex: 1 1 460px; min-width: 0; }
.mp-joinband__text h2,
.mp-joinband__text h3 { margin: 6px 0 0; font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
.mp-joinband__text p { margin: 12px 0 0; color: var(--color-text-light); line-height: 1.7; max-width: 62ch; }
.mp-joinband__inner .mp-btn { flex: none; }
@media (max-width: 640px) {
    .mp-joinband__inner { flex-direction: column; align-items: stretch; }
    .mp-joinband__inner .mp-btn { justify-content: center; }
}

/* ============================================================
   Carte de France des cabinets (mu-plugins/mp-regions.php)
   Refaite le 2026-09-06 : un point par ville, la region de chalandise
   s'allume au survol. Meme carte sur l'accueil, /nos-cabinets/ et /contact/.
   Les couleurs passent par des tokens : la carte vit aussi bien sur fond
   sombre (defaut) que sur fond clair (.mp-rmap--light).
   ============================================================ */
.mp-rmap {
    --rmap-ink: #fff;
    --rmap-soft: rgba(255, 255, 255, .72);
    --rmap-line: rgba(255, 255, 255, .18);
    --rmap-land: rgba(255, 255, 255, .07);
    --rmap-halo-ink: rgba(15, 53, 62, .55);

    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(28px, 4vw, 56px);
    align-items: center;
}
.mp-rmap--light {
    --rmap-ink: var(--color-secondary, #0f353e);
    --rmap-soft: var(--color-text-light, #5a6b72);
    --rmap-line: rgba(15, 53, 62, .14);
    --rmap-land: rgba(15, 53, 62, .05);
    --rmap-halo-ink: #fff;
}
.mp-rmap--solo { grid-template-columns: 1fr; }
.mp-rmap__stage { position: relative; }
.mp-rmap__svg { display: block; width: 100%; height: auto; overflow: visible; }

/* --- Les regions : le fond de carte --- */
.mp-rmap__region {
    fill: var(--rmap-land);
    stroke: var(--rmap-line);
    stroke-width: 1.4;
    stroke-linejoin: round;
    transition: fill .3s cubic-bezier(.22, 1, .36, 1);
}
.mp-rmap__region.is-covered { fill: rgba(var(--color-accent-rgb), .24); }
.mp-rmap__region.is-live    { fill: rgba(var(--color-accent-rgb), .62); }

/* --- Les villes : ce qu'on regarde --- */
.mp-rmap__city { cursor: pointer; }
.mp-rmap__halo {
    fill: var(--color-accent);
    opacity: .16;
    transform-box: fill-box;
    transform-origin: center;
    animation: mp-rmap-halo 3.4s cubic-bezier(.22, 1, .36, 1) infinite;
}
.mp-rmap__city:nth-of-type(2n) .mp-rmap__halo { animation-delay: .7s; }
.mp-rmap__city:nth-of-type(3n) .mp-rmap__halo { animation-delay: 1.4s; }
@keyframes mp-rmap-halo { 0%, 100% { opacity: .12; } 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .mp-rmap__halo { animation: none; } }

.mp-rmap__dot {
    fill: var(--color-accent);
    stroke: var(--rmap-halo-ink);
    stroke-width: 2.4;
    transition: r .25s cubic-bezier(.22, 1, .36, 1);
}
.mp-rmap__lead { stroke: var(--rmap-line); stroke-width: 1.4; }
.mp-rmap__lbl {
    font-family: var(--font-heading, inherit);
    font-size: 22px;
    font-weight: 700;
    fill: var(--rmap-ink);
    paint-order: stroke;
    stroke: var(--rmap-halo-ink);
    stroke-width: 4px;
    stroke-linejoin: round;
    transition: fill .25s cubic-bezier(.22, 1, .36, 1);
}
.mp-rmap__city:hover .mp-rmap__dot,
.mp-rmap__city:focus .mp-rmap__dot,
.mp-rmap__city.is-live .mp-rmap__dot { r: 10; }
.mp-rmap__city:hover .mp-rmap__lbl,
.mp-rmap__city:focus .mp-rmap__lbl,
.mp-rmap__city.is-live .mp-rmap__lbl { fill: var(--color-accent); }
.mp-rmap__city:focus { outline: none; }

/* --- La colonne des cabinets --- */
.mp-rmap__listttl {
    margin: 0 0 16px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.06rem;
    color: var(--rmap-ink);
}
.mp-rmap__list {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.mp-rmap__item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 11px 14px;
    border: 1px solid var(--rmap-line);
    text-decoration: none;
    color: var(--rmap-ink);
    transition: border-color .25s cubic-bezier(.22, 1, .36, 1), background .25s cubic-bezier(.22, 1, .36, 1);
}
.mp-rmap__item:hover,
.mp-rmap__item.is-live {
    border-color: var(--color-accent);
    background: rgba(var(--color-accent-rgb), .12);
}
.mp-rmap__item-city { font-family: var(--font-heading); font-weight: 700; font-size: .96rem; line-height: 1.2; }
.mp-rmap__item-region { font-size: .78rem; color: var(--rmap-soft); }
/* Tuile « Nous rejoindre » : elle complete la derniere rangee et se distingue
   des cabinets existants sans crier plus fort qu'eux. */
.mp-rmap__item--join {
    border-style: dashed;
    border-color: rgba(var(--color-accent-rgb), .45);
}
.mp-rmap__item--join .mp-rmap__item-city { color: var(--color-accent); }

.mp-rmap__legend {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 18px;
    font-size: .8rem;
    color: var(--rmap-soft);
}
.mp-rmap__key {
    width: 13px; height: 13px; flex: none;
    background: rgba(var(--color-accent-rgb), .55);
}
.mp-rmap__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 24px;
    background: var(--color-accent);
    color: var(--color-secondary);
    font-weight: 700;
    font-size: .95rem;
    text-decoration: none;
    transition: background .25s cubic-bezier(.22, 1, .36, 1), color .25s cubic-bezier(.22, 1, .36, 1);
}
.mp-rmap__cta:hover { background: #fff; color: var(--color-secondary); }
.mp-rmap--light .mp-rmap__cta { background: var(--color-primary); color: #fff; }
.mp-rmap--light .mp-rmap__cta:hover { background: var(--color-secondary); color: #fff; }

@media (max-width: 900px) {
    .mp-rmap { grid-template-columns: 1fr; }
    .mp-rmap__stage { max-width: 520px; margin: 0 auto; width: 100%; }
}
@media (max-width: 560px) {
    .mp-rmap__list { grid-template-columns: 1fr; }
    /* Sous 560 px la carte fait 340 px de large : les quatre noms d'Ile-de-France
       s'y empilent en illisible. On garde les points, qui portent la geographie,
       et les noms sont lus dans la liste juste en dessous. */
    .mp-rmap__lbl, .mp-rmap__lead { display: none; }
    .mp-rmap__dot { r: 11; }
    .mp-rmap__halo { r: 20; }
}

/* ============================================================
   RDV 2026-09-02 - Actualites, evenements, articles
   ============================================================ */
.mp-evgrid {
    display: grid;
    grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
    gap: 1px;
    background: var(--color-border);
    border: 1px solid var(--color-border);
}
.mp-evcard {
    display: flex;
    flex-direction: column;
    background: var(--color-bg);
    text-decoration: none;
    color: inherit;
    transition: transform .35s var(--mp-ease), box-shadow .35s var(--mp-ease);
}
.mp-evcard:hover { transform: translateY(-4px); box-shadow: 0 26px 54px -26px rgba(var(--color-secondary-rgb), .34); }
.mp-evcard__media { display: block; overflow: hidden; aspect-ratio: 16 / 10; }
.mp-evcard__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--mp-ease); }
.mp-evcard:hover .mp-evcard__media img { transform: scale(1.04); }

.mp-evcard__body { display: flex; flex-direction: column; gap: 10px; padding: 26px 24px 24px; flex: 1; }
.mp-evcard__date {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-primary);
}
.mp-evcard__title { font-family: var(--font-heading); font-weight: 700; font-size: 1.14rem; line-height: 1.32; color: var(--color-secondary); }
.mp-evcard__text { font-size: .92rem; line-height: 1.62; color: var(--color-text-light); }
.mp-evcard__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: .82rem; color: var(--color-text-light); }
.mp-evcard__meta i { color: var(--color-accent); }
.mp-evcard__terr {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    background: var(--color-bg-alt);
    color: var(--color-secondary);
    padding: 4px 9px;
}
.mp-evcard__go {
    margin-top: auto;
    padding-top: 14px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: .85rem;
    font-weight: 700;
    color: var(--color-primary);
}
.mp-evcard__go i { transition: transform .3s var(--mp-ease); }
.mp-evcard:hover .mp-evcard__go i { transform: translateX(4px); }

/* Etat vide : assume, pas un trou dans la page. */
.mp-empty {
    margin: 0;
    padding: clamp(34px, 6vw, 60px) 28px;
    text-align: center;
    background: var(--color-bg-alt);
    border-top: 3px solid var(--color-accent);
    color: var(--color-text-light);
    font-size: 1rem;
    line-height: 1.7;
}

.mp-evpast { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-border); }
.mp-evpast a {
    display: grid;
    grid-template-columns: 210px 1fr auto;
    align-items: center;
    gap: 6px 20px;
    padding: 17px 6px;
    border-bottom: 1px solid var(--color-border);
    text-decoration: none;
    color: inherit;
    transition: padding-left .25s var(--mp-ease), background .25s var(--mp-ease);
}
.mp-evpast a:hover { padding-left: 14px; background: var(--color-bg-alt); }
.mp-evpast__date { font-size: .84rem; color: var(--color-text-light); }
.mp-evpast__title { font-family: var(--font-heading); font-weight: 700; color: var(--color-secondary); }
.mp-evpast__terr {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--color-primary);
}

/* Article et fiche evenement */
.mp-article {
    display: grid;
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
    gap: clamp(32px, 5vw, 68px);
    align-items: start;
}
.mp-article__body { font-size: 1.05rem; line-height: 1.78; color: var(--color-text); }
.mp-article__body > * + * { margin-top: 1.1em; }
.mp-article__body h2 { font-size: clamp(1.4rem, 2.4vw, 1.85rem); margin-top: 1.8em; }
.mp-article__body h3 { font-size: 1.2rem; margin-top: 1.5em; }
.mp-article__body img { max-width: 100%; height: auto; }
.mp-article__body ul,
.mp-article__body ol { padding-left: 1.3em; }
.mp-article__body li + li { margin-top: .4em; }
/* Liens du corps d'article : sans couleur ni soulignement, « Decouvrir le
   cabinet de Rambouillet » se lisait comme du texte ordinaire. Les boutons
   eventuels gardent leur propre style. */
.mp-article__body a:not(.mp-btn):not(.btn) {
    color: var(--color-primary);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
.mp-article__body a:not(.mp-btn):not(.btn):hover { color: var(--color-secondary); }

.mp-article__aside {
    position: sticky;
    top: 110px;
    padding: clamp(24px, 3vw, 32px);
    background: var(--color-bg-alt);
    border-top: 3px solid var(--color-accent);
}
.mp-article__aside h2,
.mp-article__aside h3 { margin: 0 0 12px; font-size: 1.15rem; }
.mp-article__aside p { margin: 0 0 18px; font-size: .93rem; line-height: 1.65; color: var(--color-text-light); }
.mp-article__aside .mp-btn { width: 100%; justify-content: center; }
.mp-article__aside .mp-btn + .mp-btn { margin-top: 10px; }
.mp-article__aside .mp-locate__dl { margin: 0 0 20px; }

.mp-article__nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 16px;
    margin-top: 56px;
    padding-top: 26px;
    border-top: 1px solid var(--color-border);
}
.mp-article__nav a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    color: var(--color-primary);
    text-decoration: none;
    max-width: 46%;
}
.mp-article__nav a:hover { color: var(--color-secondary); }

@media (max-width: 900px) {
    .mp-evgrid { grid-template-columns: 1fr; }
    .mp-article { grid-template-columns: 1fr; }
    .mp-article__aside { position: static; }
    .mp-evpast a { grid-template-columns: 1fr; }
    .mp-article__nav a { max-width: 100%; }
}
@media (max-width: 560px) {
    .mp-fabs { gap: 10px; }
}
/* La legende garde chaque pastille collee a son libelle, meme quand elle passe
   sur deux lignes en mobile. */
.mp-rmap__legend-item { display: inline-flex; align-items: center; gap: 8px; }

/* ============================================
   BULLES DE SECTION (.mp-kicker) EN <h2>
   ============================================
   Depuis la passe SEO, la petite bulle au-dessus de chaque titre de section
   est un <h2> et l'ancien titre de section un <h3>. Les regles de titre de
   section (.mp-head h2, .mp-split__text h2, .mp-map-section .mp-head h2...)
   attraperaient donc la bulle et lui donneraient la taille d'un titre.
   La classe est repetee trois fois pour passer devant ces selecteurs
   (specificite 0,3,0 contre 0,2,1 au maximum cote sections) : le rendu
   redevient exactement celui du <div> d'origine.
   ============================================ */
.mp-kicker.mp-kicker.mp-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-body);
    font-size: .78rem;
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin: 0 0 20px;
}
.mp-kicker--light.mp-kicker--light.mp-kicker--light { color: #fff; }

/* Les titres de section sont passes de <h2> a <h3> : la regle globale h3
   les mettrait en 700 alors qu'un h2 herite de 800. On restitue la graisse
   d'origine, sinon le texte se re-decoupe et la page ne fait plus la meme
   hauteur. */
.mp-head h3,
.mp-mission h3,
.mp-final h3,
.mp-split__text h3,
.mp-locsplit__text h3,
.mp-director__body h3,
.mp-cform-intro h3,
.mp-joinband__text h3,
.mp-article__aside h3 { font-weight: 800; }
/* .mp-cform-intro etait le seul titre de section sans font-size propre :
   il prenait la taille globale du h2. On la restitue sur le h3. */
.mp-cform-intro h3 { font-size: clamp(1.6rem, 3.5vw, 2.5rem); }

/* ============================================
   BANDEAU « ACTUS DE NOS CABINETS »
   ============================================
   Trois dernieres actus de la rubrique locale, posees juste au-dessus du
   pied de page sur toutes les pages sauf l'accueil (qui a sa propre section,
   au milieu). Meme fond que le footer, separe par un simple filet : le
   bandeau se lit comme le haut du pied de page, pas comme une section de
   plus. Angles droits, filets fins : charte du site.
   ============================================ */
.mp-actusband {
    background: var(--color-secondary);
    padding: 56px 0 8px;
}
.mp-actusband__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 24px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
    margin-bottom: 28px;
}
.mp-actusband__head .mp-kicker { margin: 0; }
.mp-actusband__all {
    color: var(--color-accent, #44CBCF);
    font-size: .92rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: gap .25s cubic-bezier(.22, 1, .36, 1);
}
.mp-actusband__all:hover { color: #fff; gap: 14px; }

.mp-actusband__grid {
    display: grid;
    /* --cols est calcule en PHP par mp_cols() : avec deux actus publiees on
       affiche deux colonnes, jamais une carte orpheline sur une rangee de trois. */
    grid-template-columns: repeat(var(--cols, 3), 1fr);
    gap: 24px;
}
.mp-actusband__card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    color: inherit;
    border: 1px solid rgba(255, 255, 255, .12);
    padding: 14px;
    transition: border-color .25s, transform .25s cubic-bezier(.22, 1, .36, 1);
}
.mp-actusband__card:hover {
    border-color: var(--color-accent, #44CBCF);
    transform: translateY(-3px);
}
.mp-actusband__media {
    flex: 0 0 84px;
    height: 68px;
    overflow: hidden;
    display: block;
}
.mp-actusband__media img { width: 100%; height: 100%; object-fit: cover; }
.mp-actusband__body { display: block; min-width: 0; }
.mp-actusband__date {
    display: block;
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
    margin-bottom: 6px;
}
.mp-actusband__title {
    display: block;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: .98rem;
    line-height: 1.32;
    color: #fff;
}

/* « Toutes les actualités » sous une grille de cartes (accueil) */
.mp-head__more { text-align: center; margin-top: 40px; }

@media (max-width: 900px) {
    .mp-actusband__grid { grid-template-columns: 1fr; gap: 14px; }
    .mp-actusband { padding: 44px 0 4px; }
}

/* Ancre de compatibilite : #evenements existait quand l'agenda avait sa propre
   section. La rubrique a fusionne avec « la vie de nos cabinets », mais les
   liens deja partages doivent continuer a tomber au bon endroit. */
.mp-anchor { display: block; position: relative; top: 0; height: 0; visibility: hidden; }

/* ===== Formules et tarifs (bloc optionnel des pages offre) =====
   Meme grammaire que les cartes .mp-caps : angles droits, liseré fin, filet
   dégradé qui se déploie au reveal. La formule mise en avant est la seule à
   porter un fond sombre : c'est ce qui la fait lire en premier, sans changer
   sa taille et sans casser l'alignement de la rangée. */
.mp-pricing__grid {
    display: grid;
    grid-template-columns: repeat(var(--cols, 3), 1fr);
    gap: 24px;
    align-items: stretch;
}
.mp-pricing__card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    padding: 38px 30px 32px;
    overflow: hidden;
}
.mp-pricing__card::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--gradient-brand-warm);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .7s var(--mp-ease);
}
.mp-pricing__card.is-visible::after,
.mp-stagger.is-visible .mp-pricing__card::after { transform: scaleX(1); }

.mp-pricing__card.is-best {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}
.mp-pricing__flag {
    position: absolute;
    top: 0; right: 0;
    background: var(--color-accent);
    color: var(--color-primary);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    padding: 6px 14px;
}
.mp-pricing__name {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--color-secondary);
    margin: 0 0 6px;
}
.mp-pricing__card.is-best .mp-pricing__name { color: var(--color-accent); }
.mp-pricing__tag {
    font-size: .95rem;
    color: var(--color-text-light);
    margin: 0 0 22px;
}
.mp-pricing__card.is-best .mp-pricing__tag { color: rgba(255,255,255,.78); }
.mp-pricing__price {
    font-family: var(--font-heading, inherit);
    font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.3rem);
    font-weight: 700;
    line-height: 1.1;
    margin: 0;
    /* tabular-nums garde les trois prix alignes au pixel d'une carte a l'autre. */
    font-variant-numeric: tabular-nums;
}
.mp-pricing__unit {
    font-size: .88rem;
    color: var(--color-text-light);
    margin: 6px 0 0;
}
.mp-pricing__card.is-best .mp-pricing__unit { color: rgba(255,255,255,.72); }
.mp-pricing__list {
    list-style: none;
    margin: 26px 0 0;
    padding: 24px 0 0;
    border-top: 1px solid var(--color-border);
    display: grid;
    gap: 13px;
}
.mp-pricing__card.is-best .mp-pricing__list { border-top-color: rgba(255,255,255,.22); }
.mp-pricing__list li {
    position: relative;
    padding-left: 24px;
    font-size: .95rem;
    line-height: 1.55;
}
.mp-pricing__list li::before {
    content: '';
    position: absolute;
    left: 0; top: .58em;
    width: 9px; height: 9px;
    background: var(--color-accent);
}
.mp-pricing__note {
    margin: 28px auto 0;
    max-width: 760px;
    text-align: center;
    font-size: .9rem;
    color: var(--color-text-light);
}

@media (max-width: 900px) {
    .mp-pricing__grid { grid-template-columns: 1fr; }
    .mp-pricing__card { padding: 32px 24px 28px; }
}

/* Pastille d'etape portant une lettre plutot qu'un numero (methode en
   acronyme). Une seule lettre a la place de deux chiffres : on remonte la
   taille pour garder le meme poids visuel dans la pastille. */
.mp-step--letter .mp-step__node {
    font-size: 1.24rem;
    letter-spacing: 0;
    background: var(--color-primary);
    color: #fff;
}
.mp-sec--alt .mp-step--letter .mp-step__node { background: var(--color-primary); }

/* Derniere ligne a laquelle il manque une cellule : la derniere carte prend la
   place libre plutot que de laisser un trou a droite de la grille. */
.mp-caps__grid--fill-last > .mp-caps__card:last-child { grid-column: span 2; }
@media (max-width: 860px) {
    .mp-caps__grid--fill-last > .mp-caps__card:last-child { grid-column: auto; }
}

/* Interlocuteur sans portrait : une seule colonne, le texte garde une mesure
   lisible et les points forts s'etalent sur la largeur. */
.mp-director--nophoto { grid-template-columns: 1fr; gap: 0; }
.mp-director--nophoto .mp-director__bio { max-width: 68ch; }
.mp-director--nophoto .mp-director__strengths {
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
}
@media (max-width: 760px) {
    .mp-director--nophoto .mp-director__strengths { grid-template-columns: 1fr; }
}

/* ===== Liste de prestations (bloc optionnel des pages offre) =====
   Pour une offre qui couvre beaucoup d'actes courts : des colonnes
   thematiques, lisibles d'un coup d'oeil, plutot que des cartes. */
.mp-plist__grid {
    display: grid;
    grid-template-columns: repeat(var(--cols, 4), 1fr);
    gap: 1px;
    background: var(--color-border);
    border: 1px solid var(--color-border);
}
.mp-plist__group {
    background: var(--color-bg);
    padding: 30px 26px 28px;
}
.mp-plist__icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    background: rgba(var(--color-primary-rgb), .1);
    color: var(--color-primary);
    font-size: 1rem;
    margin-bottom: 18px;
}
.mp-plist__title {
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--color-secondary);
    margin: 0 0 18px;
}
.mp-plist__items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 11px;
}
.mp-plist__items li {
    position: relative;
    padding-left: 20px;
    font-size: .94rem;
    line-height: 1.45;
}
.mp-plist__items li::before {
    content: '';
    position: absolute;
    left: 0; top: .52em;
    width: 8px; height: 8px;
    background: var(--color-accent);
}
@media (max-width: 1080px) {
    .mp-plist__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .mp-plist__grid { grid-template-columns: 1fr; }
    .mp-plist__group { padding: 26px 22px 24px; }
}

/* ===== Espacement des lettres des grands titres =====
   6,3 px, a la demande de la cliente (2026-09-16) : c'est la valeur des grands
   titres de l'ancien site (titres Elementor de 2,5rem en Avenir). Remplace
   l'espacement negatif regle pour Inter, qui serrait trop Avenir.
   Applique aux titres d'affichage uniquement (heros et titres de section) :
   sur un titre de carte de 18 px, 6,3 px rendrait le mot illisible.
   Les memes selecteurs que les regles d'origine, places apres elles : ils
   l'emportent a specificite egale, sans !important. */
h1,
.mp-hero__text .mp-hero__title,
.mp-phero h1,
.mp-head h2, .mp-head h3,
.mp-mission h2, .mp-mission h3,
.mp-split__text h2, .mp-split__text h3,
.mp-locsplit__text h3,
.mp-final h2, .mp-final h3 {
    /* 6,3 px est la valeur demandee pour un titre de 40 px. En dessous, on
       garde la meme proportion : sur le titre etroit de la FAQ des pages
       offre, 6,3 px fixes faisaient exploser le titre sur cinq lignes. */
    letter-spacing: min(6.3px, .1575em);
    /* L'espacement elargit les titres : sans equilibrage, le titre du hero
       laissait « a vos enjeux » seul sur une ligne courte. text-wrap: balance
       repartit les mots sur des lignes de longueur voisine (ignore sans
       dommage par les navigateurs anciens). */
    text-wrap: balance;
}
/* Sur mobile les titres font 24 a 34 px : 6,3 px fixes les feraient deborder.
   On garde la meme proportion qu'a 40 px (6,3 / 40 = 0,1575em). */
@media (max-width: 767px) {
    h1,
    .mp-hero__text .mp-hero__title,
    .mp-phero h1,
    .mp-head h2, .mp-head h3,
    .mp-mission h2, .mp-mission h3,
    .mp-split__text h2, .mp-split__text h3,
        .mp-locsplit__text h3,
    .mp-final h2, .mp-final h3 {
        letter-spacing: .1575em;
    }
}

/* ============================================================
   PAGES CABINET - trame du 2026-09-22
   Le directeur en tete avec ses coordonnees, la photo de la ville
   juste en dessous, puis les chiffres du bassin et du reseau.
   ============================================================ */

/* --- Hero : texte a gauche, carte du directeur a droite --- */
.mp-cabhero {
    position: relative;
    overflow: hidden;
    background: var(--color-secondary);
    padding: calc(var(--header-height) + 64px) 0 72px;
}
.mp-cabhero__decor {
    position: absolute;
    inset: 0;
    background: var(--gradient-mesh-hero);
    pointer-events: none;
}
.mp-cabhero > .container {
    position: relative;
    z-index: 2;
    max-width: var(--max-width-wide);
    width: 100%;
    padding-left: clamp(24px, 6vw, 96px);
    padding-right: clamp(24px, 6vw, 96px);
}
.mp-cabhero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(320px, .85fr);
    gap: clamp(32px, 5vw, 80px);
    align-items: center;
}
.mp-cabhero h1 {
    font-size: clamp(2rem, 3.8vw, 3.1rem);
    line-height: 1.12;
    margin: 0 0 22px;
    color: #fff;
    /* Meme traitement que le titre du hero de l'accueil : tres gras reel. */
    font-weight: 900;
}
.mp-cabhero h1 em {
    font-style: normal;
    background: linear-gradient(110deg, var(--color-accent) 0%, var(--color-tertiary) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.mp-cabhero__sub {
    font-size: 1.08rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, .82);
    margin: 0 0 30px;
    max-width: 560px;
}

/* La carte de visite du directeur */
.mp-cabhero__card {
    position: relative;
    background: var(--color-bg);
    color: var(--color-text);
    padding: 34px 32px 30px;
    border-top: 3px solid var(--color-accent);
    box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .45);
    text-align: center;
}
.mp-cabhero__id {
    position: relative;
    width: 168px;
    height: 168px;
    margin: 0 auto 20px;
}
.mp-cabhero__photo {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 0 0 4px var(--color-bg), 0 0 0 6px rgba(var(--color-accent-rgb), .55);
}
.mp-cabhero__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* L'embleme de la ville, pose en pastille sur le portrait */
.mp-cabhero__emblem {
    position: absolute;
    right: -14px;
    bottom: -6px;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--color-bg);
    box-shadow: 0 6px 18px rgba(15, 53, 62, .22);
    display: grid;
    place-items: center;
}
.mp-cabhero__emblem img { width: 52px; height: 52px; object-fit: contain; }
.mp-cabhero__emblem--solo {
    position: static;
    width: 120px;
    height: 120px;
    margin: 0 auto;
}
.mp-cabhero__emblem--solo img { width: 100px; height: 100px; }
.mp-cabhero__label {
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--color-secondary);
    margin: 0 0 6px;
}
.mp-cabhero__name {
    font-family: var(--font-heading);
    font-size: 1.55rem;
    line-height: 1.2;
    color: var(--color-primary);
    margin: 0 0 4px;
    /* Le nom du directeur se lit comme un titre : vrai demi-gras. */
    font-weight: 600;
}
.mp-cabhero__role {
    font-size: .95rem;
    color: var(--color-text-light);
    margin: 0 0 20px;
}
.mp-cabhero__contacts {
    list-style: none;
    margin: 0 0 22px;
    padding: 18px 0 0;
    border-top: 1px solid var(--color-border);
    display: grid;
    gap: 10px;
    text-align: left;
}
.mp-cabhero__contacts li {
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: 10px;
    align-items: baseline;
    font-size: .93rem;
    line-height: 1.45;
}
.mp-cabhero__contacts i { color: var(--color-accent); text-align: center; }
.mp-cabhero__contacts a {
    color: var(--color-text);
    text-decoration: none;
    overflow-wrap: anywhere;
}
.mp-cabhero__contacts a:hover { color: var(--color-primary); text-decoration: underline; }
.mp-cabhero__actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
}
.mp-cabhero__actions .mp-btn { justify-content: center; }
/* Le bouton fantome est prevu pour fond sombre : dans la carte blanche il
   prend les couleurs du texte. */
.mp-cabhero__card .mp-btn--ghost {
    color: var(--color-primary);
    border-color: var(--color-border);
    background: transparent;
}
.mp-cabhero__card .mp-btn--ghost:hover { border-color: var(--color-primary); }

/* --- La photo de la ville, pleine largeur et en fond fixe ---
   Elle reprend .mp-fixed (meme parallaxe que les bandeaux de l'accueil, et
   meme repli en defilement normal sur mobile, ou iOS ne sait pas faire). */
.mp-cabcity { background: var(--color-secondary); }
.mp-cabcity__img.mp-fixed {
    height: clamp(300px, 46vh, 560px);
    min-height: 0;
}
.mp-cabcity__caption {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px clamp(24px, 6vw, 96px);
    background: var(--color-secondary);
    color: rgba(255, 255, 255, .85);
    font-size: .88rem;
    letter-spacing: .04em;
}
.mp-cabcity__caption i { color: var(--color-accent); }

/* --- Chiffres : bassin (source sous chaque chiffre) et reseau --- */
a.mp-territory__source {
    color: var(--color-text-muted);
    text-decoration: underline;
    text-underline-offset: 2px;
}
a.mp-territory__source:hover { color: var(--color-primary); }
.mp-cabnat .mp-territory__grid { background: transparent; }

@media (max-width: 960px) {
    .mp-cabhero__grid { grid-template-columns: 1fr; gap: 26px; }
    .mp-cabhero__card { max-width: 480px; width: 100%; }
    /* Sur une colonne, la carte du directeur passe juste sous le titre : c'est
       elle qu'on met en avant, elle ne doit pas finir sous les boutons. Le bloc
       texte s'efface (display: contents) pour que ses enfants se rangent
       dans la grille avec la carte. */
    .mp-cabhero__text { display: contents; }
    .mp-cabhero__text > .mp-kicker   { order: 1; margin-bottom: 0; }
    .mp-cabhero__text > h1           { order: 2; margin-bottom: 0; }
    .mp-cabhero__card                { order: 3; }
    .mp-cabhero__text > .mp-cabhero__sub { order: 4; margin-bottom: 0; }
    .mp-cabhero__text > .mp-phero__ctas  { order: 5; }
}
@media (max-width: 560px) {
    .mp-cabhero { padding-top: calc(var(--header-height) + 36px); padding-bottom: 48px; }
    .mp-cabhero__card { padding: 28px 22px 24px; }
    .mp-cabhero__id { width: 136px; height: 136px; }
}

/* --- Territoire en onglets (pages cabinet, 2026-09-23) --- */
.mp-locsplit__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: start;
}
.mp-locsplit__intro { font-size: 1.02rem; line-height: 1.7; color: var(--color-text); margin-bottom: 28px; }
.mp-locsplit__intro p { margin: 0 0 14px; }
.mp-locsplit__img {
    position: sticky;
    top: calc(var(--header-height) + 24px);
    overflow: hidden;
}
.mp-locsplit__img img { display: block; width: 100%; height: clamp(340px, 46vw, 560px); object-fit: cover; }

.mp-tabs__list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 22px;
    border-bottom: 1px solid var(--color-border);
}
.mp-tabs__tab {
    appearance: none;
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    padding: 10px 2px;
    margin-right: 18px;
    font: inherit;
    font-size: .88rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--color-text-light);
    cursor: pointer;
    transition: color .3s var(--mp-ease), border-color .3s var(--mp-ease);
}
.mp-tabs__tab:hover { color: var(--color-primary); }
.mp-tabs__tab.is-active { color: var(--color-primary); border-bottom-color: var(--color-accent); }
.mp-tabs__tab:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
/* Sans JavaScript, tous les panneaux restent affiches : le script ajoute
   .mp-tabs--js, et c'est seulement a ce moment qu'on en masque. */
.mp-tabs--js .mp-tabs__panel { display: none; }
.mp-tabs--js .mp-tabs__panel.is-active { display: block; animation: mp-tab-in .38s var(--mp-ease) both; }
@keyframes mp-tab-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.mp-tabs__panel h4 {
    font-size: 1.12rem;
    line-height: 1.35;
    margin: 0 0 12px;
    color: var(--color-primary);
}
.mp-tabs__panel p { margin: 0 0 14px; line-height: 1.7; }
.mp-tabs__points { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mp-tabs__points li {
    position: relative;
    padding-left: 22px;
    font-size: .96rem;
    line-height: 1.55;
}
.mp-tabs__points li::before {
    content: '';
    position: absolute;
    left: 0; top: .55em;
    width: 8px; height: 8px;
    background: var(--color-accent);
}
@media (max-width: 900px) {
    /* minmax(0, 1fr) et non 1fr : « 1fr » vaut minmax(auto, 1fr), la colonne
       ne descend donc jamais sous la largeur minimale de son contenu. Avec
       trois onglets (Le Mans, Rambouillet), la barre d'onglets mesurait
       450 px et elargissait toute la colonne : a 390 px de large, la fin de
       chaque ligne de texte etait coupee par le bord de l'ecran (controle
       qualite du 2026-09-27). La barre defile desormais dans sa colonne. */
    .mp-locsplit__grid { grid-template-columns: minmax(0, 1fr); }
    .mp-locsplit__grid > * { min-width: 0; }
    .mp-locsplit__img { position: static; order: -1; }
    .mp-locsplit__img img { height: clamp(220px, 52vw, 340px); }
    .mp-tabs__list { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .mp-tabs__list::-webkit-scrollbar { display: none; }
    .mp-tabs__tab { white-space: nowrap; }
}

/* --- Offres du cabinet : des cartes compactes, la section tient dans un ecran --- */
.mp-caps--offers .mp-caps__grid { gap: 16px; }
.mp-caps--offers .mp-caps__card { padding: 22px 22px 20px; }
.mp-caps--offers .mp-caps__title { font-size: 1.02rem; }
.mp-caps--offers .mp-caps__lead {
    font-size: .9rem;
    line-height: 1.5;
    /* Deux lignes au plus : les accroches locales ont des longueurs tres
       differentes et faisaient sauter la hauteur d'une carte a l'autre. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* La cliente veut que le bloc des offres tienne dans un ecran (2026-09-23) :
   9 cartes sur 3 lignes, marges et interlignes resserres. Mesure a 1440x900 :
   la section fait environ 860 px de haut. */
@media (min-width: 1100px) {
    .mp-caps--offers { padding-top: 48px; padding-bottom: 48px; }
    .mp-caps--offers .mp-head { margin-bottom: 22px; }
    .mp-caps--offers .mp-head h3 { margin-bottom: 8px; }
    .mp-caps--offers .mp-caps__grid { gap: 14px; }
    .mp-caps--offers .mp-caps__card { padding: 18px 20px 16px; }
    .mp-caps--offers .mp-caps__title { margin-bottom: 6px; }
    .mp-caps--offers .mp-caps__lead { margin-bottom: 10px; }
    .mp-caps--offers .mp-caps__cta { margin-top: 6px; }
}

/* Le titre du bloc territoire des pages cabinet reprend la taille des titres
   de section : il vit dans .mp-locsplit, pas dans .mp-split__text. */
.mp-locsplit__text h3 {
    font-size: clamp(1.9rem, 3.2vw, 2.7rem);
    line-height: 1.14;
    color: var(--color-secondary);
    margin: 0 0 22px;
}
.mp-locsplit__text h3 em { font-style: normal; color: var(--color-primary); }

/* --- Chiffres du bassin, integres au bas du hero des pages cabinet --- */
.mp-cabhero--stats { padding-bottom: 0; }
.mp-cabstats { margin-top: clamp(32px, 4vw, 56px); }
.mp-cabstats .mp-stat { padding: 20px 18px 16px; }
.mp-cabstats .mp-stat__num { font-size: clamp(1.6rem, 2.3vw, 2.1rem); margin-bottom: 6px; }
.mp-cabstats .mp-stat__label { font-size: .82rem; line-height: 1.4; }
.mp-cabstats__source {
    margin: 0;
    padding: 0 24px 14px;
    text-align: center;
    font-size: .72rem;
    color: rgba(255, 255, 255, .6);
}
.mp-cabstats__source a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.mp-cabstats__source a:hover { color: var(--color-accent); }
@media (max-width: 860px) {
    .mp-cabstats .mp-stats__grid { grid-template-columns: repeat(2, 1fr); }
    .mp-cabstats .mp-stat + .mp-stat::before { display: none; }
    .mp-cabstats .mp-stat { border-top: 1px solid rgba(255, 255, 255, .14); }
}

/* ============================================================
   LOT DU 2026-09-23 : demandes de la cliente
   ============================================================ */

/* --- 1. Photo de la ville dans un cadre decale, a droite du territoire --- */
.mp-locsplit__img.mp-frame {
    position: relative;
    margin: 0 18px 18px 0;
    padding: 0;
    /* .mp-locsplit__img est en overflow: hidden pour l'image d'ambiance :
       le liseré décalé du cadre serait rogné. */
    overflow: visible;
}
.mp-frame__line {
    position: absolute;
    inset: 18px -18px -18px 18px;
    border: 1px solid rgba(var(--color-accent-rgb), .55);
    pointer-events: none;
}
.mp-locsplit__img.mp-frame img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: clamp(300px, 34vw, 460px);
    object-fit: cover;
}
.mp-locsplit__img.mp-frame figcaption {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 2px 0;
    font-size: .84rem;
    color: var(--color-text-light);
}
.mp-locsplit__img.mp-frame figcaption i { color: var(--color-accent); }
/* Sous 900 px la photo passe au-dessus du texte. La regle de base lui donne
   un `top` (heritage de l'ancienne version collante) ; en position relative
   ce `top` la decalait de 96 px vers le bas : legende, credit et cadre
   chevauchaient le titre « Le territoire de ... » sur les 9 pages cabinet
   (controle qualite du 2026-09-27). */
@media (max-width: 900px) {
    .mp-locsplit__img.mp-frame { top: auto; }
}

/* --- 2. Paragraphes justifies, mobile compris ---
   Le 2026-09-23 la justification s'arretait a 768 px, la colonne etroite
   creant des « rivieres » de blanc. La cliente a demande le 2026-09-24 de
   justifier aussi sur telephone. La cesure automatique (hyphens: auto, la
   page est en lang="fr-FR") fait le gros du travail contre les rivieres :
   sans elle, une colonne de 320 px donne des espaces enormes. */
.mp-locsplit__intro p,
.mp-tabs__panel p,
.mp-split__body p,
.mp-brief__answer,
.mp-director__bio p,
.mp-lead__text,
.mp-mission__text p,
.mp-faq__a p,
.mp-cform-intro p,
.mp-final__inner p {
    text-align: justify;
    hyphens: auto;
}
/* Grands titres sur telephone : l'ecart de lettres de 6,3 px (0,1575em) rend
   les mots longs plus larges que la colonne. Mesures du controle qualite du
   2026-09-27 : « accompagnons-nous » 322 px pour 312 a 360 px,
   « l'externalisation » 347 pour 342 a 390 px, « Externalisation » (H1 des
   pages offre) 337 pour 327 a 375 px. La taille suit donc la largeur de
   l'ecran sous 400 px, plafonnee a la taille d'origine de chaque titre :
   a 414 px et au-dela rien ne change. */
@media (max-width: 400px) {
    .mp-phero h1 { font-size: min(2.1rem, 7.9vw); }
    .mp-cabhero h1 { font-size: min(2rem, 8.2vw); }
    .mp-head h2, .mp-head h3,
    .mp-mission h2, .mp-mission h3,
    .mp-split__text h2, .mp-split__text h3,
    .mp-locsplit__text h3,
    .mp-final h2, .mp-final h3 {
        font-size: min(2rem, 7.8vw);
    }
}

/* --- 3. Ligne d'introduction des chiffres du hero --- */
.mp-cabstats__label {
    margin: 0;
    padding: 0 24px 10px;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--color-accent);
}

/* --- 4. Graisses des titres ---
   Historique : 600 pour le H1 et 300 pour les titres de section le
   2026-09-23, quand le fichier Avenir n'avait qu'une graisse et que ces
   valeurs ne changeaient presque rien. Depuis que les graisses sont de vrais
   fichiers (2026-09-24), la cliente a demande le tres gras sur le H1, puis
   « pareil, grossis les h2 ». Les deux sont donc sur le meme fichier.
   Les titres declares en 700 ou 800 ailleurs dans la feuille (cartes,
   megamenu, recherche) prennent le fichier gras, un cran en dessous. */
h1, .mp-hero__text .mp-hero__title,
h2,
.mp-head h3,
.mp-split__text h3,
.mp-locsplit__text h3,
.mp-mission h3,
.mp-final h2, .mp-final h3 { font-weight: 900; }
/* Les bulles gardent leur graisse : ce sont des etiquettes, pas des titres. */
.mp-kicker { font-weight: 700; }

/* --- 5. Venir au cabinet : 2/3 - 1/3, meme hauteur --- */
.mp-locate__grid {
    grid-template-columns: 2fr 1fr;
    align-items: stretch;
}
.mp-locate__map {
    height: auto;
    min-height: clamp(420px, 52vh, 620px);
}
.mp-locate__embed iframe { height: 100%; min-height: clamp(420px, 52vh, 620px); }
.mp-locate__panel { display: flex; flex-direction: column; }
@media (max-width: 900px) {
    .mp-locate__grid { grid-template-columns: minmax(0, 1fr); }
    /* minmax(0, 1fr) + coupure des adresses e-mail : a 320 px,
       « armelle.chaplain@metronome-partners.com » (mot insecable) elargissait
       la colonne au-dela de l'ecran (controle qualite du 2026-09-27). */
    .mp-locate__panel dd, .mp-locate__panel a { overflow-wrap: anywhere; }
    .mp-locate__embed iframe { min-height: 320px; }
}

/* --- 6. Offres du cabinet en cartes photo (memes cartes que l'accueil) --- */
.mp-caps--photos .mp-services {
    display: grid;
    grid-template-columns: repeat(var(--cols, 3), 1fr);
    gap: 18px;
}
.mp-caps--photos .mp-service { aspect-ratio: 4 / 3; }
@media (max-width: 900px) {
    .mp-caps--photos .mp-services { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .mp-caps--photos .mp-services { grid-template-columns: 1fr; }
}

/* --- 7. Photo de la ville en pleine largeur : 70vh --- */
.mp-cabcity__img.mp-fixed { height: 70vh; min-height: 0; }
@media (hover: none), (max-width: 900px) {
    .mp-cabcity__img.mp-fixed { height: 46vh; }
}

/* « En bref » des pages cabinet : un resume large, cale sous le hero. */
.mp-cabbrief__inner { max-width: 900px; }
.mp-cabbrief .mp-brief__answer { margin: 0; }

/* Credits des photos sous licence libre : lisibles mais discrets. */
.mp-frame__credit,
.mp-cabcity__credit {
    display: block;
    margin-top: 4px;
    font-size: .72rem;
    opacity: .75;
}
.mp-cabcity__credit { display: inline; margin-left: 10px; }
.mp-frame__credit a,
.mp-cabcity__credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* Titre de la FAQ : il vit dans une colonne de 380 px sur les pages offre et
   cabinet. Il lui faut sa propre taille, plus petite que les titres de section
   pleine largeur. */
.mp-faq .mp-head h3,
.mp-faq--split .mp-head h3 {
    font-size: clamp(1.5rem, 2.1vw, 1.95rem);
    line-height: 1.2;
}

/* Legende + credit : le credit passe sous la legende, en plus discret.
   Le figcaption est en flex, sans cette regle le credit se posait a cote et
   prenait autant de place que la legende. */
.mp-locsplit__img.mp-frame figcaption { flex-wrap: wrap; }
.mp-locsplit__img.mp-frame figcaption > .mp-frame__credit { flex: 1 0 100%; }
/* La legende partage la ligne de l'icone et passe a la ligne a l'interieur
   d'elle-meme : sans ca, une legende longue partait en bloc sous l'icone,
   laissee seule sur sa ligne (mobile, 2026-09-27). */
.mp-locsplit__img.mp-frame figcaption > span[data-yve-field] { flex: 1 1 0; min-width: 0; }
/* Le trait vertical du cadre decale passe a 18 px du bord gauche : il barrait
   le debut de la legende et du credit. La legende demarre donc apres lui. */
.mp-locsplit__img.mp-frame figcaption { padding-left: 30px; padding-right: 22px; }