/*
Theme Name: 2L Digital Theme
Theme URI: https://2l-digital.fr
Author: Lola
Author URI: https://2l-digital.fr
Description: Thème moderne et épuré pour 2L Digital
Version: 4.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: 2l-digital-theme
*/
/* PATCH CORRECTION MENU DESKTOP */
@media (min-width: 1025px) {
    .nav-desktop {
        display: contents !important;
        visibility: visible !important;
    }
    
    .nav-mobile {
        display: none !important;
        visibility: hidden !important;
        position: absolute !important;
        left: -9999px !important;
    }
    
    .mobile-menu-toggle {
        display: none !important;
    }
    
    .nav-desktop .header-cta {
        display: flex !important;
    }
    
    .nav-mobile .header-cta {
        display: none !important;
    }
}
/* ============================================================
   1. VARIABLES CSS
   ============================================================ */
:root {
    /* --- Couleurs principales --- */
    --color-blue-dark:      #1e3a8a;
    --color-blue-medium:    #3b82f6;
    --color-violet:         #8b5cf6;
    --color-violet-light:   #a78bfa;
    --color-violet-dark:    #7c3aed;
    --color-yellow:         #fbbf24;
    --color-yellow-hover:   #f59e0b;

    /* --- Neutres --- */
    --color-white:          #ffffff;
    --color-slate-950:      #020617;
    --color-slate-900:      #0f172a;
    --color-slate-800:      #1e293b;
    --color-slate-700:      #334155;
    --color-slate-600:      #475569;
    --color-slate-500:      #64748b;
    --color-slate-400:      #94a3b8;
    --color-slate-300:      #cbd5e1;
    --color-slate-200:      #e2e8f0;
    --color-slate-100:      #f1f5f9;
    --color-slate-50:       #f8fafc;

    /* --- Couleurs texte harmonisées --- */
    --text-dark:            #1e293b; /* Paragraphes : gris très foncé */
    --text-body:            #334155; /* Corps de texte standard */
    --text-muted:           #475569; /* Texte secondaire */
    --text-highlight:       #8b5cf6; /* Texte en gras / surlignage : violet */

    /* --- Dégradés --- */
    --gradient-primary:     linear-gradient(135deg, #1e3a8a 0%, #3b82f6 50%, #8b5cf6 100%);
    --gradient-violet:      linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    --gradient-violet-hover:linear-gradient(135deg, #a78bfa 0%, #8b5cf6 100%);

    /* --- Glassmorphisme --- */
    --glass-bg-header:      rgba(100, 116, 139, 0.5);
    --glass-bg-light:       rgba(255, 255, 255, 0.6);
    --glass-bg-strong:      rgba(255, 255, 255, 0.95);
    --glass-border:         rgba(226, 232, 240, 0.8);
    --glass-border-white:   rgba(255, 255, 255, 0.3);
    --glass-blur:           blur(10px);
    --glass-blur-strong:    blur(15px);

    /* --- Ombres --- */
    --shadow-sm:            0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md:            0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg:            0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl:            0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --shadow-header:        0 4px 20px rgba(0, 0, 0, 0.1);
    --shadow-violet:        0 8px 24px rgba(124, 58, 237, 0.15);
    --shadow-violet-strong: 0 12px 32px rgba(124, 58, 237, 0.2);
    --shadow-yellow:        0 4px 12px rgba(251, 191, 36, 0.25);
    --shadow-card:          0 4px 16px rgba(139, 92, 246, 0.08);
    --shadow-card-hover:    0 16px 40px rgba(139, 92, 246, 0.18);

    /* --- Typographie --- */
    --font-size-hero:       72px;
    --font-size-hero-sub:   28px;
    --font-size-h1:         48px;
    --font-size-h2:         36px;
    --font-size-h3:         24px;
    --font-size-h4:         20px;
    --font-size-body:       16px;
    --font-size-body-lg:    17px;
    --font-size-lead:       18px;
    --font-size-small:      14px;

    --font-weight-bold:     700;
    --font-weight-semibold: 600;
    --font-weight-medium:   500;
    --font-weight-regular:  400;
    --font-weight-light:    300;

    --line-height-tight:    1.2;
    --line-height-normal:   1.5;
    --line-height-relaxed:  1.6;

    /* --- Espacement --- */
    --spacing-section:      80px;
    --spacing-section-mobile: 60px;
    --spacing-card:         32px;
    --spacing-element:      24px;
    --spacing-small:        12px;

    /* --- Rayons --- */
    --radius-sm:    8px;
    --radius-md:    12px;
    --radius-lg:    16px;
    --radius-xl:    24px;
    --radius-2xl:   32px;
    --radius-pill:  50px;

    /* --- Transitions --- */
    --transition-fast:      0.15s ease;
    --transition-base:      0.25s ease;
    --transition-slow:      0.4s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-accordion: 0.35s cubic-bezier(0.4, 0, 0.2, 1);

    /* --- Containers --- */
    --container-narrow:     900px;
    --container-standard:   1200px;
    --container-wide:       1400px;

    /* --- Z-index --- */
    --z-header:        1000;
    --z-menu-toggle:   1002;
    --z-menu:          999;
    --z-overlay:       998;
    --z-content:       1;
}

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

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--color-white);
    color: var(--text-body);
    line-height: var(--line-height-relaxed);
    font-size: var(--font-size-body);
    min-height: 100vh;
    overflow-x: hidden;
}

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

/* ============================================================
   3. TYPOGRAPHIE GLOBALE HARMONISÉE
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
    font-family: inherit;
    font-weight: var(--font-weight-bold);
    color: var(--color-slate-900);
    line-height: var(--line-height-tight);
    margin: 0 0 1rem 0;
    letter-spacing: -0.02em;
}

h1 { font-size: var(--font-size-h1); }
h2 { font-size: var(--font-size-h2); }
h3 { font-size: var(--font-size-h3); }
h4 { font-size: var(--font-size-h4); font-weight: var(--font-weight-semibold); }

/* Paragraphes : gris foncé uniforme */
p {
    font-size: var(--font-size-body);
    color: var(--text-dark);
    line-height: var(--line-height-relaxed);
    margin: 0 0 1rem 0;
}

/* Texte en gras : TOUJOURS violet */
strong, b {
    font-weight: var(--font-weight-semibold);
    color: var(--text-highlight);
}

/* Listes */
ul, ol {
    font-size: var(--font-size-body);
    color: var(--text-dark);
    line-height: var(--line-height-relaxed);
    margin: 0 0 1rem 0;
    padding-left: 1.5rem;
}

li { margin-bottom: 0.5rem; }

/* Liens */
a {
    color: var(--color-violet);
    text-decoration: none;
    transition: color var(--transition-base);
}
a:hover { color: var(--color-violet-dark); }

/* ============================================================
   4. ANIMATIONS GLOBALES
   ============================================================ */
@keyframes fade-up {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes float-slow {
    0%, 100% { transform: translate(0, 0); }
    50%      { transform: translate(20px, 20px); }
}

@keyframes float-vertical {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4); }
    50%      { box-shadow: 0 4px 20px rgba(139, 92, 246, 0.6); }
}

/* ============================================================
   5. HEADER — GLASSMORPHISME
   ============================================================ */
.site-header {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--z-header);
    width: 95%;
    max-width: var(--container-wide);
    background: var(--glass-bg-header);
    border: 1px solid var(--glass-border-white);
    box-shadow: var(--shadow-header);
    backdrop-filter: var(--glass-blur-strong);
    -webkit-backdrop-filter: var(--glass-blur-strong);
    border-radius: var(--radius-pill);
    transition: all var(--transition-base);
}

.header-container {
    padding: 15px 40px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 40px;
}

/* Logo */
.site-branding { display: flex; align-items: center; }
.site-branding .custom-logo-link { display: block; line-height: 0; }
.site-branding .custom-logo { height: 50px; width: auto; display: block; }

.site-title-link {
    color: var(--color-white);
    text-decoration: none;
    font-size: 24px;
    font-weight: var(--font-weight-bold);
    transition: opacity var(--transition-base);
}
.site-title-link:hover { opacity: 0.8; color: var(--color-white); }

/* Burger mobile */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-around;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: var(--z-menu-toggle);
}

.burger-line {
    width: 100%;
    height: 3px;
    background: var(--color-white);
    border-radius: 3px;
    transition: all var(--transition-base);
}

.mobile-menu-toggle.active .burger-line:nth-child(1) { transform: rotate(45deg) translate(8px, 8px); }
.mobile-menu-toggle.active .burger-line:nth-child(2) { opacity: 0; }
.mobile-menu-toggle.active .burger-line:nth-child(3) { transform: rotate(-45deg) translate(7px, -7px); }

/* Navigation */
.nav-wrapper { display: contents; }
.main-navigation { display: flex; justify-content: center; }

.main-navigation ul {
    list-style: none;
    display: flex;
    gap: 8px;
    margin: 0;
    padding: 0;
    align-items: center;
}

.main-navigation li { position: relative; }

.main-navigation a {
    color: var(--color-white);
    text-decoration: none;
    font-size: 16px;
    font-weight: var(--font-weight-medium);
    padding: 10px 20px;
    border-radius: 25px;
    transition: all var(--transition-base);
    display: block;
}
.main-navigation a:hover {
    background: rgba(255, 255, 255, 0.2);
    color: var(--color-white);
}

/* Sous-menu */
.main-navigation ul ul {
    position: absolute;
    top: 100%;
    left: 0;
    background: rgba(71, 85, 105, 0.95);
    backdrop-filter: var(--glass-blur-strong);
    border-radius: var(--radius-md);
    padding: 8px 0;
    min-width: 220px;
    display: none;
    box-shadow: var(--shadow-lg);
}
.main-navigation li:hover > ul { display: block; }
.main-navigation ul ul a { padding: 12px 20px; border-radius: 0; font-size: 15px; }
.main-navigation ul ul a:hover { background: rgba(255, 255, 255, 0.15); }

/* Bouton CTA header */
.header-cta { display: flex; align-items: center; }

.btn-devis {
    background: var(--color-white);
    color: var(--color-violet);
    text-decoration: none;
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-semibold);
    padding: 12px 28px;
    border-radius: 30px;
    transition: all var(--transition-base);
    border: none;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
.btn-devis:hover {
    background: rgba(255, 255, 255, 0.95);
    color: var(--color-violet);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

/* ============================================================
   6. LAYOUT PRINCIPAL
   ============================================================ */
#main-content {
    margin-top: 140px;
    padding: 40px 20px;
    max-width: var(--container-wide);
    margin-left: auto;
    margin-right: auto;
}

#main-content.home-page,
#main-content.service-page {
    margin-top: 0;
    padding: 0;
    max-width: 100%;
}

.page article {
    padding: 0;
    margin: 0;
    background: transparent;
}

.page .entry-title,
.page .entry-header { display: none; }

/* ============================================================
   7. UTILITAIRES — Classes réutilisables
   ============================================================ */

/* Containers */
.container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 40px; }
.container-standard { max-width: var(--container-standard); margin: 0 auto; padding: 0 40px; }
.container-wide { max-width: var(--container-wide); margin: 0 auto; padding: 0 40px; }

/* Full-width section */
.section-full-width {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    position: relative;
}

/* Text align */
.text-center { text-align: center; }

/* Section spacing */
.section-padding { padding: var(--spacing-section) 0; }

/* ============================================================
   8. COMPOSANT : CARTES UNIFORMES
   ============================================================ */
.card {
    background: var(--glass-bg-strong);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    padding: 40px 32px;
    box-shadow: var(--shadow-card);
    transition: all var(--transition-slow);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-card-hover);
    border-color: rgba(139, 92, 246, 0.3);
}

/* Icône de carte (modifiable) */
.card-icon {
    width: 64px;
    height: 64px;
    background: var(--gradient-violet);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 24px 0;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.25);
    transition: transform var(--transition-slow);
    overflow: hidden;
}

.card-icon img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.card:hover .card-icon { transform: scale(1.1) rotate(-5deg); }

.card-title {
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-bold);
    color: var(--color-slate-900);
    margin: 0 0 12px 0;
}

.card-text {
    font-size: var(--font-size-body);
    color: var(--text-dark);
    line-height: var(--line-height-relaxed);
    margin: 0;
    flex-grow: 1;
}

/* Grilles de cartes */
.cards-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
    align-items: stretch;
}

.cards-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: stretch;
}

/* ============================================================
   9. HERO — HOME PAGE (fond gradient)
   ============================================================ */
.hero-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 160px 40px 100px;
    background: var(--gradient-primary);
    position: relative;
    overflow: hidden;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
}

.hero-section::before,
.hero-section::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(60px);
}

.hero-section::before {
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);
    top: -300px;
    right: -200px;
    animation: float-slow 25s ease-in-out infinite;
}

.hero-section::after {
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, rgba(255,255,255,0.06) 0%, transparent 70%);
    bottom: -250px;
    left: -200px;
    animation: float-slow 30s ease-in-out infinite reverse;
}

.hero-content {
    max-width: 1100px;
    position: relative;
    z-index: var(--z-content);
    margin: 0 auto;
}

/* H1 — Grand et impactant */
.hero-title {
    font-size: var(--font-size-hero);
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
    margin: 0 0 16px 0;
    line-height: 1.05;
    letter-spacing: -0.03em;
    animation: fade-up 0.6s ease 0.2s forwards;
    opacity: 0;
}

/* Sous-titre — Blanc, visible, juste sous le H1 */
.hero-subtitle {
    font-size: var(--font-size-hero-sub);
    font-weight: var(--font-weight-semibold);
    color: var(--color-white);
    margin: 0 0 24px 0;
    line-height: var(--line-height-tight);
    animation: fade-up 0.6s ease 0.3s forwards;
    opacity: 0;
}

/* Paragraphe — Moins imposant, interligne réduit, medium/light */
.hero-description {
    font-size: var(--font-size-lead);
    font-weight: var(--font-weight-regular);
    color: rgba(255, 255, 255, 0.9);
    margin: 0 auto 40px auto;
    line-height: var(--line-height-normal);
    max-width: 750px;
    animation: fade-up 0.6s ease 0.4s forwards;
    opacity: 0;
}

.hero-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    animation: fade-up 0.6s ease 0.5s forwards;
    opacity: 0;
}

.hero-buttons .wp-block-button { margin: 0; }

/* Bouton primaire blanc (style CTA) */
.hero-btn-primary .wp-block-button__link,
.btn-primary {
    background: var(--color-white);
    color: var(--color-violet);
    padding: 18px 44px;
    border-radius: var(--radius-md);
    font-size: 18px;
    font-weight: var(--font-weight-semibold);
    border: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    transition: all var(--transition-slow);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.hero-btn-primary .wp-block-button__link:hover,
.btn-primary:hover {
    background: rgba(255, 255, 255, 0.95);
    color: var(--color-violet);
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
}

/* Bouton secondaire transparent */
.hero-btn-secondary .wp-block-button__link,
.btn-secondary {
    background: transparent;
    color: var(--color-white);
    padding: 16px 36px;
    border-radius: var(--radius-md);
    font-size: 17px;
    font-weight: var(--font-weight-semibold);
    border: 2px solid rgba(255, 255, 255, 0.4);
    transition: all var(--transition-slow);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.hero-btn-secondary .wp-block-button__link:hover,
.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.15);
    color: var(--color-white);
    border-color: rgba(255, 255, 255, 0.6);
    transform: translateY(-2px);
}

/* ============================================================
   10. HERO — PAGES SERVICES (fond clair)
   ============================================================ */
.service-hero-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 160px 40px 100px;
    background: var(--color-slate-50);
    position: relative;
    overflow: hidden;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
}

.service-hero-section::before,
.service-hero-section::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(60px);
}

.service-hero-section::before {
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(139,92,246,0.08) 0%, transparent 70%);
    top: -300px;
    right: -200px;
    animation: float-slow 25s ease-in-out infinite;
}

.service-hero-section::after {
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, rgba(59,130,246,0.06) 0%, transparent 70%);
    bottom: -250px;
    left: -200px;
    animation: float-slow 30s ease-in-out infinite reverse;
}

.service-hero-container {
    max-width: 1000px;
    position: relative;
    z-index: var(--z-content);
    margin: 0 auto;
}

/* H1 — Même taille que home */
.service-hero-title {
    font-size: var(--font-size-hero);
    font-weight: var(--font-weight-bold);
    color: var(--color-slate-900);
    margin: 0 0 16px 0;
    line-height: 1.05;
    letter-spacing: -0.03em;
    animation: fade-up 0.6s ease 0.2s forwards;
    opacity: 0;
}

/* Sous-titre — Visible, coloré */
.service-hero-subtitle {
    font-size: var(--font-size-hero-sub);
    font-weight: var(--font-weight-semibold);
    color: var(--color-violet);
    margin: 0 0 24px 0;
    line-height: var(--line-height-tight);
    animation: fade-up 0.6s ease 0.3s forwards;
    opacity: 0;
}

/* Paragraphe — Cohérent avec home */
.service-hero-description {
    font-size: var(--font-size-lead);
    font-weight: var(--font-weight-regular);
    color: var(--text-dark);
    margin: 0 auto 40px auto;
    line-height: var(--line-height-normal);
    max-width: 750px;
    animation: fade-up 0.6s ease 0.4s forwards;
    opacity: 0;
}

.service-hero-description strong {
    color: var(--text-highlight);
}

.service-hero-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    animation: fade-up 0.6s ease 0.5s forwards;
    opacity: 0;
}

/* Bouton primaire violet pour pages services */
.service-hero-actions .btn-hero-primary .wp-block-button__link,
.btn-violet {
    background: var(--gradient-violet);
    color: var(--color-white);
    padding: 16px 36px;
    border-radius: var(--radius-md);
    font-size: 17px;
    font-weight: var(--font-weight-semibold);
    border: none;
    box-shadow: var(--shadow-violet);
    transition: all var(--transition-slow);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.service-hero-actions .btn-hero-primary .wp-block-button__link:hover,
.btn-violet:hover {
    background: var(--gradient-violet-hover);
    color: var(--color-white);
    transform: translateY(-3px);
    box-shadow: var(--shadow-violet-strong);
}

/* Bouton secondaire pour pages services */
.service-hero-actions .btn-hero-secondary .wp-block-button__link {
    background: var(--color-white);
    color: var(--color-slate-900);
    padding: 16px 36px;
    border-radius: var(--radius-md);
    font-size: 17px;
    font-weight: var(--font-weight-semibold);
    border: 2px solid var(--color-slate-300);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-slow);
    text-decoration: none;
}

.service-hero-actions .btn-hero-secondary .wp-block-button__link:hover {
    background: var(--color-slate-50);
    border-color: var(--color-slate-400);
    transform: translateY(-2px);
}

/* ============================================================
   11. SECTION "VOUS RECONNAISSEZ-VOUS" — Cartes uniformes
   ============================================================ */
.section-situations {
    padding: var(--spacing-section) 40px;
    background: linear-gradient(135deg, rgba(139,92,246,0.04) 0%, rgba(99,102,241,0.02) 100%);
}

.section-situations .container-standard {
    max-width: var(--container-standard);
    margin: 0 auto;
}

.section-situations .section-title {
    font-size: 42px;
    font-weight: var(--font-weight-bold);
    color: var(--color-slate-900);
    margin: 0 0 60px 0;
    text-align: center;
}

/* Grille de cartes situations — MÊME HAUTEUR */
.situations-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: stretch; /* Force même hauteur */
}

.situation-card {
    background: linear-gradient(135deg, #ffffff 0%, #faf9fe 100%);
    border: 2px solid rgba(139, 92, 246, 0.15);
    border-radius: var(--radius-xl);
    padding: 48px 28px 36px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    transition: all var(--transition-slow);
    box-shadow: var(--shadow-card);
    position: relative;
    min-height: 200px; /* Hauteur minimale uniforme */
    height: 100%; /* Prend toute la hauteur de la cellule grid */
}

.situation-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, rgba(139,92,246,0.1) 0%, rgba(139,92,246,0.15) 100%);
    border: 1.5px solid rgba(139, 92, 246, 0.25);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--color-violet);
    transition: all var(--transition-base);
}

.situation-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-card-hover);
    border-color: rgba(139, 92, 246, 0.35);
}

.situation-card:hover .situation-badge {
    transform: scale(1.1);
    background: linear-gradient(135deg, rgba(139,92,246,0.15) 0%, rgba(139,92,246,0.2) 100%);
}

/* Texte des cartes — UNE SEULE COULEUR + violet sur strong */
.situation-text {
    font-size: var(--font-size-body-lg);
    color: var(--text-dark); /* Gris foncé uniforme */
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-relaxed);
    margin: 0;
}

.situation-text strong {
    color: var(--text-highlight); /* Violet pour le surlignage */
    font-weight: var(--font-weight-semibold);
}

/* ============================================================
   12. SECTION STRATÉGIE — Cartes expertises
   ============================================================ */
.section-strategie {
    padding: var(--spacing-section) 40px;
    background: var(--color-white);
}

.section-strategie .container-standard {
    max-width: var(--container-standard);
    margin: 0 auto;
}

.section-strategie .section-title {
    font-size: 42px;
    font-weight: var(--font-weight-bold);
    color: var(--color-slate-900);
    margin: 0 0 16px 0;
    text-align: center;
}

/* Sous-titre — Padding harmonisé */
.section-strategie .section-subtitle {
    font-size: var(--font-size-lead);
    color: var(--text-dark);
    margin: 0 auto 24px auto;
    text-align: center;
    max-width: 800px;
}

.section-strategie .section-intro {
    font-size: var(--font-size-body);
    color: var(--text-dark);
    margin: 0 auto 60px auto;
    text-align: center;
    max-width: 900px;
    line-height: var(--line-height-relaxed);
}

/* Grille expertises */
.expertises-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: stretch;
}

.expertise-card {
    background: var(--color-white);
    border: 1px solid var(--color-slate-200);
    border-radius: var(--radius-xl);
    padding: 40px 32px;
    box-shadow: var(--shadow-card);
    transition: all var(--transition-slow);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.expertise-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-card-hover);
    border-color: rgba(139, 92, 246, 0.3);
}

.expertise-icon {
    font-size: 40px;
    margin: 0 0 20px 0;
    line-height: 1;
}

.expertise-card-title {
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-semibold);
    color: var(--color-slate-900);
    margin: 0 0 8px 0;
}

.expertise-card-subtitle {
    font-size: 13px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-violet);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 16px 0;
}

/* Bullet points — Typo plus grande */
.expertise-features {
    list-style: none;
    padding: 0;
    margin: 0 0 24px 0;
    flex-grow: 1;
}

.expertise-features li {
    color: var(--text-dark);
    font-size: var(--font-size-body); /* Taille augmentée */
    line-height: var(--line-height-relaxed);
    margin: 0 0 12px 0;
    padding: 0 0 0 24px;
    position: relative;
}

.expertise-features li::before {
    content: '•';
    position: absolute;
    left: 8px;
    color: var(--color-violet);
    font-size: 18px;
}

.expertise-link-wrapper a {
    color: var(--color-white);
    background: var(--gradient-violet);
    text-decoration: none;
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-small);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border-radius: var(--radius-md);
    transition: all var(--transition-base);
    box-shadow: var(--shadow-sm);
}

.expertise-link-wrapper a:hover {
    background: var(--gradient-violet-hover);
    color: var(--color-white);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.expertise-link-wrapper a::after { content: '→'; }

/* ============================================================
   13. SECTION "POURQUOI ME CHOISIR" — Accordéon avec photo
   ============================================================ */
.pourquoi-section {
    padding: var(--spacing-section) 40px;
    background: var(--color-white);
}

.pourquoi-container {
    max-width: var(--container-standard);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.pourquoi-photo img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.pourquoi-title {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-bold);
    color: var(--color-slate-900);
    margin: 0 0 16px 0;
}

.pourquoi-intro {
    font-size: var(--font-size-lead);
    color: var(--text-dark);
    margin: 0 0 24px 0;
}

/* Accordéon avec animation fluide */
.pourquoi-accordion { margin: 0 0 32px 0; }

.accordion-item {
    margin: 0 0 var(--spacing-small) 0;
    border: 1px solid var(--color-slate-200);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-white);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-base);
}

.accordion-item:hover {
    border-color: var(--color-violet-light);
    box-shadow: var(--shadow-md);
}

.accordion-item[open] {
    border-color: var(--color-violet);
    background: rgba(139,92,246,0.02);
}

.accordion-title {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 50px 16px 20px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    position: relative;
    transition: all var(--transition-base);
}

.accordion-title::-webkit-details-marker { display: none; }

.accordion-title::after {
    content: '+';
    position: absolute;
    right: 20px;
    font-size: 24px;
    font-weight: var(--font-weight-bold);
    color: var(--color-violet);
    transition: transform var(--transition-accordion);
}

.accordion-item[open] .accordion-title::after {
    content: '−';
}

.accordion-title strong {
    color: var(--color-slate-900);
    font-size: 16px;
    font-weight: var(--font-weight-semibold);
    flex: 1;
}

/* Animation fluide du contenu */
.accordion-content {
    padding: 0 20px 0 20px;
    color: var(--text-dark);
    font-size: var(--font-size-body);
    line-height: var(--line-height-relaxed);
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-accordion), padding var(--transition-accordion);
}

.accordion-item[open] .accordion-content {
    max-height: 500px;
    padding: 0 20px 20px 20px;
}

/* Boutons section pourquoi */
.pourquoi-buttons {
    display: flex;
    gap: var(--spacing-small);
    flex-wrap: wrap;
}

/* ============================================================
   14. SECTION STATS — Chiffres clés (layout photo + cartes)
   ============================================================ */
.section-stats {
    padding: var(--spacing-section) 0 40px 0;
    background: var(--color-white);
    width: 100vw;
    margin-left: calc(-50vw + 50%);
}

.section-stats .container-standard {
    max-width: var(--container-standard);
    margin: 0 auto;
    padding: 0 40px;
}

.section-stats .section-title {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-bold);
    color: var(--color-slate-900);
    margin: 0 0 20px 0;
    text-align: center;
}

.section-stats .section-intro {
    font-size: var(--font-size-lead);
    color: var(--text-dark);
    margin: 0 auto 60px auto;
    text-align: center;
    max-width: 800px;
}

/* Layout : photo gauche, stats droite */
.stats-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
}

.stats-image img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
}

.stats-cards {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.stat-card {
    background: var(--glass-bg-strong);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    padding: 32px;
    text-align: center;
    box-shadow: var(--shadow-card);
    transition: all var(--transition-slow);
}

.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
    border-color: rgba(139, 92, 246, 0.3);
}

.stat-icon {
    font-size: 32px;
    margin: 0 0 16px 0;
}

.stat-number {
    font-size: 48px;
    font-weight: var(--font-weight-bold);
    color: var(--color-violet);
    margin: 0 0 8px 0;
    line-height: 1;
}

.stat-label {
    font-size: var(--font-size-body);
    color: var(--text-dark);
    margin: 0;
}

/* Conclusion avec flèche */
.stats-conclusion {
    font-size: var(--font-size-lead);
    color: var(--text-dark);
    text-align: center;
    max-width: 800px;
    margin: 40px auto 0 auto;
    padding: 20px 28px;
    background: linear-gradient(135deg, rgba(139,92,246,0.06) 0%, rgba(251,191,36,0.04) 100%);
    border: 1px solid rgba(139, 92, 246, 0.15);
    border-radius: var(--radius-xl);
}

.stats-conclusion strong {
    color: var(--text-highlight);
}

/* Flèche animée */
.arrow-indicator {
    display: block;
    text-align: center;
    font-size: 28px;
    color: var(--color-violet);
    margin: 12px auto -20px auto;
    animation: float-vertical 2s ease-in-out infinite;
}

/* ============================================================
   15. SECTION "MON RÔLE" — Impact fort
   ============================================================ */
.section-role {
    padding: var(--spacing-section) 0;
    background: linear-gradient(135deg, rgba(139,92,246,0.08) 0%, rgba(59,130,246,0.04) 100%);
    width: 100vw;
    margin-left: calc(-50vw + 50%);
}

.section-role .container-narrow {
    max-width: var(--container-narrow);
    margin: 0 auto;
    padding: 0 40px;
    text-align: center;
}

.role-highlight {
    background: var(--color-white);
    border: 2px solid rgba(139, 92, 246, 0.2);
    border-radius: var(--radius-2xl);
    padding: 48px;
    box-shadow: var(--shadow-xl);
    position: relative;
}

.role-highlight::before {
    content: '💡';
    position: absolute;
    top: -24px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 40px;
    background: var(--color-white);
    padding: 0 16px;
}

.role-title {
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    color: var(--color-slate-900);
    margin: 0 0 20px 0;
}

.role-text {
    font-size: var(--font-size-lead);
    color: var(--text-dark);
    line-height: var(--line-height-relaxed);
    margin: 0;
}

.role-text strong {
    color: var(--text-highlight);
}

/* ============================================================
   16. ACCORDÉON OFFRES — Animations fluides
   ============================================================ */
.section-offers {
    padding: var(--spacing-section) 0;
    background: var(--color-white);
    width: 100vw;
    margin-left: calc(-50vw + 50%);
}

.section-offers .container-standard {
    max-width: var(--container-standard);
    margin: 0 auto;
    padding: 0 40px;
}

.section-offers .section-title {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-bold);
    color: var(--color-slate-900);
    margin: 0 0 16px 0;
    text-align: center;
}

.section-offers .section-intro {
    font-size: var(--font-size-lead);
    color: var(--text-dark);
    margin: 0 auto 48px auto;
    text-align: center;
    max-width: 700px;
}

.offers-accordion {
    max-width: 900px;
    margin: 0 auto;
}

.offer-block {
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    margin: 0 0 16px 0;
    background: var(--glass-bg-strong);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    transition: all var(--transition-base);
}

.offer-block:hover {
    box-shadow: var(--shadow-card-hover);
}

.offer-block[open] {
    border-color: rgba(139, 92, 246, 0.25);
}

.offer-block.offer-featured {
    border: 2px solid var(--color-violet);
    box-shadow: var(--shadow-violet);
}

.offer-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 28px 60px 28px 32px;
    cursor: pointer;
    list-style: none;
    position: relative;
}

.offer-summary::-webkit-details-marker { display: none; }

.offer-summary::after {
    content: '+';
    position: absolute;
    right: 28px;
    font-size: 24px;
    font-weight: var(--font-weight-bold);
    color: var(--color-violet);
    transition: transform var(--transition-accordion);
}

.offer-block[open] .offer-summary::after {
    content: '−';
}

.offer-summary-left {
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 1;
}

.offer-number {
    font-size: 28px;
    font-weight: var(--font-weight-bold);
    color: var(--color-violet);
    opacity: 0.3;
    transition: opacity var(--transition-base);
}

.offer-block[open] .offer-number { opacity: 0.6; }

.offer-title {
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-bold);
    color: var(--color-slate-900);
    margin: 0 0 4px 0;
}

.offer-subtitle {
    font-size: var(--font-size-small);
    color: var(--text-muted);
    margin: 0;
}

.offer-price-tag {
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-semibold);
    color: var(--color-violet);
    margin-right: 40px;
}

.offer-badge {
    position: absolute;
    top: -1px;
    left: 32px;
    background: var(--gradient-violet);
    color: var(--color-white);
    padding: 6px 14px;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.35);
}

/* Contenu avec animation fluide */
.offer-detail {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-accordion), padding var(--transition-accordion);
    padding: 0 32px;
}

.offer-block[open] .offer-detail {
    max-height: 1000px;
    padding: 0 32px 32px 32px;
    border-top: 1px solid rgba(139, 92, 246, 0.1);
}

.offer-intro {
    font-size: var(--font-size-body);
    color: var(--text-dark);
    margin: 24px 0;
}

.offer-columns {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-bottom: 24px;
}

.offer-col {
    background: rgba(139, 92, 246, 0.03);
    border: 1px solid rgba(139, 92, 246, 0.1);
    border-radius: var(--radius-lg);
    padding: 24px;
}

.offer-col-title {
    font-size: 15px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-violet);
    margin: 0 0 16px 0;
}

.offer-detail ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.offer-detail li {
    font-size: var(--font-size-body);
    color: var(--text-dark);
    padding: 0 0 0 28px;
    margin: 0 0 10px 0;
    position: relative;
}

.offer-detail li::before {
    content: '✓';
    position: absolute;
    left: 0;
    width: 18px;
    height: 18px;
    background: var(--gradient-violet);
    color: var(--color-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: var(--font-weight-bold);
}

.offer-goal {
    font-size: var(--font-size-body);
    color: var(--text-dark);
    background: rgba(139, 92, 246, 0.04);
    border-left: 3px solid var(--color-violet);
    padding: 16px 20px;
    border-radius: var(--radius-md);
    margin-top: 20px;
}

/* ============================================================
   17. FAQ — Accordéon simple et fluide
   ============================================================ */
.section-faq {
    padding: var(--spacing-section) 0;
    background: var(--color-slate-50);
    width: 100vw;
    margin-left: calc(-50vw + 50%);
}

.section-faq .container-narrow {
    max-width: var(--container-narrow);
    margin: 0 auto;
    padding: 0 40px;
}

.section-faq .section-title {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-bold);
    color: var(--color-slate-900);
    margin: 0 0 48px 0;
    text-align: center;
}

/* Accordéon FAQ simple — sans icône */
.faq-accordion {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    margin: 0 0 12px 0;
    border: 1px solid var(--color-slate-200);
    border-radius: var(--radius-md);
    background: var(--color-white);
    overflow: hidden;
    transition: all var(--transition-base);
    text-align: left !important;
}

.faq-item:hover {
    border-color: var(--color-violet-light);
}

.faq-item[open] {
    border-color: var(--color-violet);
}

.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    cursor: pointer;
    list-style: none;
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-semibold);
    color: var(--color-slate-900);
    text-align: left !important;
}

.faq-question::-webkit-details-marker { display: none; }

.faq-question::after {
    content: '+';
    font-size: 20px;
    font-weight: var(--font-weight-bold);
    color: var(--color-violet);
    transition: transform var(--transition-accordion);
    flex-shrink: 0;
    margin-left: 16px;
}

.faq-item[open] .faq-question::after {
    content: '−';
}

/* Animation fluide */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-accordion), padding var(--transition-accordion);
    padding: 0 24px;
    text-align: left !important;
}

.faq-item[open] .faq-answer {
    max-height: 500px;
    padding: 0 24px 20px 24px;
}

.faq-answer p {
    font-size: var(--font-size-body);
    color: var(--text-dark);
    margin: 0;
    text-align: left !important;
}

/* ============================================================
   18. CTA FINAL — Harmonisé toutes pages
   ============================================================ */

/* Spacers — Règles supprimées pour respecter les hauteurs définies dans l'éditeur */

.section-cta-final {
    padding: 100px 40px;
    background: var(--gradient-primary);
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    position: relative;
    overflow: hidden;
}

.section-cta-final::before,
.section-cta-final::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.section-cta-final::before {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);
    top: -200px;
    right: -100px;
    animation: float-slow 20s ease-in-out infinite;
}

.section-cta-final::after {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(255,255,255,0.06) 0%, transparent 70%);
    bottom: -150px;
    left: -100px;
    animation: float-slow 25s ease-in-out infinite reverse;
}

.section-cta-final .container-standard {
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: var(--z-content);
}

.cta-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: var(--color-white);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
    padding: 8px 20px;
    border-radius: var(--radius-pill);
    margin: 0 0 28px 0;
}

.cta-title {
    font-size: 48px;
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
    margin: 0 0 20px 0;
    line-height: var(--line-height-tight);
}

.cta-description {
    font-size: var(--font-size-lead);
    color: rgba(255, 255, 255, 0.95);
    margin: 0 auto 40px auto;
    max-width: 700px;
    line-height: var(--line-height-normal);
}

.cta-pills {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0 0 40px 0;
    list-style: none;
    padding: 0;
}

.cta-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: var(--radius-pill);
    padding: 10px 20px;
    font-size: 15px;
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    transition: all var(--transition-base);
}

.cta-pill:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
}

.cta-button .wp-block-button__link,
.btn-cta-white {
    background: var(--color-white);
    color: var(--color-violet);
    font-size: 18px;
    font-weight: var(--font-weight-semibold);
    padding: 18px 44px;
    border-radius: var(--radius-md);
    border: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    transition: all var(--transition-slow);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.cta-button .wp-block-button__link:hover,
.btn-cta-white:hover {
    background: rgba(255, 255, 255, 0.95);
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
}

/* ============================================================
   19. CTA MINI — Section intermédiaire (fond renforcé)
   ============================================================ */
.section-cta-mini {
    padding: 80px 0;
    background: linear-gradient(135deg, rgba(139,92,246,0.12) 0%, rgba(59,130,246,0.08) 100%);
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    text-align: center;
    position: relative;
}

.section-cta-mini::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%238b5cf6' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}

.section-cta-mini .container-narrow {
    max-width: var(--container-narrow);
    margin: 0 auto;
    padding: 0 40px;
}

.cta-mini-title {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-bold);
    color: var(--color-slate-900);
    margin: 0 0 16px 0;
}

.cta-mini-text {
    font-size: var(--font-size-lead);
    color: var(--text-dark);
    margin: 0 0 32px 0;
}

.btn-cta-yellow .wp-block-button__link {
    background: var(--color-yellow);
    color: var(--color-slate-900);
    padding: 16px 40px;
    border-radius: var(--radius-md);
    font-size: 17px;
    font-weight: var(--font-weight-semibold);
    border: none;
    box-shadow: 0 8px 24px rgba(251, 191, 36, 0.4);
    transition: all var(--transition-slow);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

.btn-cta-yellow .wp-block-button__link:hover {
    background: var(--color-yellow-hover);
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(251, 191, 36, 0.5);
}

/* ============================================================
   20. PAGE CONTACT
   ============================================================ */
.contact-section {
    padding: 160px 40px var(--spacing-section);
    background: var(--color-slate-50);
    min-height: 100vh;
}

.contact-container {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}

.contact-title {
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-bold);
    color: var(--color-slate-900);
    margin: 0 0 16px 0;
}

.contact-subtitle {
    font-size: var(--font-size-lead);
    color: var(--text-dark);
    margin: 0 0 48px 0;
    line-height: var(--line-height-relaxed);
}

.contact-subtitle strong {
    color: var(--text-highlight);
}

/* Style Ninja Forms générique */
.contact-form {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: 48px;
    box-shadow: var(--shadow-lg);
    text-align: left;
}

.contact-form .nf-field-label label {
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-semibold);
    color: var(--color-slate-900);
    margin-bottom: 8px;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea,
.contact-form select {
    width: 100%;
    padding: 14px 18px;
    border: 1px solid var(--color-slate-300);
    border-radius: var(--radius-md);
    font-size: var(--font-size-body);
    font-family: inherit;
    transition: all var(--transition-base);
    background: var(--color-white);
}

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
    outline: none;
    border-color: var(--color-violet);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

.contact-form button[type="submit"],
.contact-form input[type="submit"] {
    background: var(--gradient-violet);
    color: var(--color-white);
    padding: 16px 40px;
    border: none;
    border-radius: var(--radius-md);
    font-size: 17px;
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: all var(--transition-slow);
    width: 100%;
    margin-top: 16px;
}

.contact-form button[type="submit"]:hover,
.contact-form input[type="submit"]:hover {
    background: var(--gradient-violet-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-violet);
}

/* ============================================================
   19. SECTIONS PAGES SERVICES
   ============================================================ */

/* --- Section Why --- */
.section-why {
    padding: var(--spacing-section) 0;
    background: var(--color-white);
}

.section-why .section-title {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-bold);
    color: var(--color-slate-900);
    margin: 0 0 20px 0;
}

.section-why .section-lead {
    font-size: var(--font-size-lead);
    color: var(--text-dark);
    max-width: 800px;
    margin: 0 auto 16px auto;
}

.section-why .section-intro {
    font-size: var(--font-size-body);
    color: var(--text-dark);
    margin: 0 auto 48px auto;
}

/* --- Card Icon avec fond violet et SVG blanc --- */
.card-icon {
    width: 64px;
    height: 64px;
    background: var(--gradient-violet);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 24px 0;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.25);
    transition: transform var(--transition-slow);
}

.card-icon svg {
    width: 28px;
    height: 28px;
    stroke: var(--color-white);
    stroke-width: 2;
    fill: none;
}

.card:hover .card-icon {
    transform: scale(1.1) rotate(-5deg);
}

.card-list {
    list-style: none;
    padding: 0;
    margin: 0 0 16px 0;
}

.card-list li {
    color: var(--text-dark);
    font-size: var(--font-size-body);
    padding: 0 0 0 24px;
    margin: 0 0 8px 0;
    position: relative;
}

.card-list li::before {
    content: '•';
    position: absolute;
    left: 8px;
    color: var(--color-violet);
    font-size: 18px;
}

/* --- Section SEO --- */
.section-seo {
    padding: var(--spacing-section) 0;
    background: var(--color-slate-50);
}

.section-seo .section-title {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-bold);
    color: var(--color-slate-900);
    margin: 0 0 24px 0;
}

.section-seo img {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.check-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.check-list li {
    color: var(--text-dark);
    font-size: var(--font-size-body);
    padding: 0 0 0 32px;
    margin: 0 0 12px 0;
    position: relative;
    line-height: var(--line-height-relaxed);
}

.check-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    width: 20px;
    height: 20px;
    background: var(--gradient-violet);
    color: var(--color-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: var(--font-weight-bold);
}

.seo-conclusion,
.highlight-box {
    font-size: var(--font-size-lead);
    color: var(--text-dark);
    background: rgba(139, 92, 246, 0.06);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: var(--radius-xl);
    padding: 28px 40px;
    max-width: var(--container-narrow);
    margin: 0 auto;
    text-align: center;
    line-height: var(--line-height-relaxed);
}

.highlight-box strong {
    color: var(--color-violet);
}

/* --- Section Highlight Transition --- */
.section-highlight-transition {
    padding: 60px 40px;
    background: var(--color-white);
}

.section-highlight-transition .container-narrow {
    max-width: var(--container-narrow);
    margin: 0 auto;
}

/* ============================================================
   19b. SECTIONS SPÉCIFIQUES PAGE SEO
   ============================================================ */

/* --- Section SEO Intro --- */
.section-seo-intro {
    padding: var(--spacing-section) 0;
    background: var(--color-slate-50);
}

.seo-storyline {
    font-size: var(--font-size-lead);
    color: var(--text-dark);
    line-height: 1.8;
    margin-bottom: 48px;
}

.seo-serp-image img {
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
}

/* --- Stats Layout SEO (image 2/3, cartes 1/3) --- */
.stats-layout-seo {
    display: grid !important;
    grid-template-columns: 2fr 1fr;
    gap: 48px;
    align-items: center;
    max-width: 1000px;
    margin: 0 auto 48px auto;
}

.stats-layout-seo .stats-image-col {
    flex: none;
}

.stats-layout-seo .stats-image-col img,
.stats-layout-seo .stats-image-col .wp-block-image img {
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    width: 100%;
    height: auto;
}

.stats-layout-seo .stats-cards-col {
    display: flex;
    flex-direction: column;
    gap: 24px;
    flex: none;
}

.stat-card {
    background: var(--glass-bg-strong);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    padding: 32px;
    text-align: center;
    box-shadow: var(--shadow-card);
    transition: all var(--transition-slow);
}

.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
    border-color: rgba(139, 92, 246, 0.3);
}

.stat-number {
    font-size: 56px;
    font-weight: var(--font-weight-bold);
    background: var(--gradient-violet);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 0 8px 0;
    line-height: 1;
}

.stat-label {
    font-size: var(--font-size-body);
    color: var(--text-dark);
    margin: 0;
}

/* --- Section For Who --- */
.section-for-who {
    padding: var(--spacing-section) 0;
    background: var(--color-white);
}

.for-who-layout {
    display: flex;
    gap: 48px;
    align-items: center;
    max-width: 1000px;
    margin: 0 auto;
}

.for-who-card {
    height: 100%;
}

.for-who-image img {
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
}

/* --- Section Offers --- */
.section-offers {
    padding: var(--spacing-section) 0;
    background: linear-gradient(to bottom, var(--color-slate-50) 0%, var(--color-white) 100%);
}

.offers-accordion {
    max-width: 900px;
    margin: 48px auto 0 auto;
}

.offer-block {
    background: var(--glass-bg-strong);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    margin-bottom: 20px;
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: all var(--transition-base);
}

.offer-block:hover {
    box-shadow: var(--shadow-card-hover);
}

.offer-featured {
    border: 2px solid var(--color-violet);
    box-shadow: var(--shadow-violet);
}

.offer-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 32px;
    cursor: pointer;
    list-style: none;
    transition: background var(--transition-base);
}

.offer-summary::-webkit-details-marker { display: none; }

.offer-summary:hover {
    background: rgba(139, 92, 246, 0.03);
}

.offer-summary-left {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
}

.offer-badge {
    background: var(--gradient-violet);
    color: var(--color-white);
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    flex-shrink: 0;
}

.offer-number {
    font-size: 24px;
    font-weight: var(--font-weight-bold);
    color: var(--color-violet);
    opacity: 0.4;
    flex-shrink: 0;
    min-width: 32px;
}

.offer-summary-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.offer-title {
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-bold);
    color: var(--color-slate-900);
    margin: 0;
}

.offer-subtitle {
    font-size: var(--font-size-small);
    color: var(--text-muted);
    margin: 0;
}

.offer-price-tag {
    background: var(--color-slate-100);
    color: var(--color-slate-900);
    padding: 8px 16px;
    border-radius: var(--radius-md);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
}

.offer-detail {
    padding: 0 32px 32px 32px;
    border-top: 1px solid var(--color-slate-200);
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-accordion), padding var(--transition-accordion);
}

.offer-block[open] .offer-detail {
    max-height: 1000px;
    padding: 32px;
}

.offer-intro {
    font-size: var(--font-size-body);
    color: var(--text-dark);
    margin: 0 0 24px 0;
    line-height: var(--line-height-relaxed);
}

.offer-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    margin-bottom: 24px;
}

.offer-col-title {
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-semibold);
    color: var(--color-violet);
    margin: 0 0 12px 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.offer-col ul,
.offer-detail > ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.offer-col li,
.offer-detail > ul li {
    color: var(--text-dark);
    font-size: var(--font-size-body);
    padding: 0 0 0 28px;
    margin: 0 0 10px 0;
    position: relative;
    line-height: var(--line-height-relaxed);
}

.offer-col li::before,
.offer-detail > ul li::before {
    content: '✓';
    position: absolute;
    left: 0;
    width: 18px;
    height: 18px;
    background: var(--gradient-violet);
    color: var(--color-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: var(--font-weight-bold);
    top: 3px;
}

.offer-note {
    font-size: var(--font-size-small);
    color: var(--color-violet);
    background: rgba(139, 92, 246, 0.08);
    padding: 12px 16px;
    border-radius: var(--radius-md);
    margin-top: 16px;
}

.offer-goal {
    font-size: var(--font-size-body);
    color: var(--text-dark);
    background: var(--color-slate-50);
    padding: 16px 20px;
    border-radius: var(--radius-md);
    border-left: 3px solid var(--color-violet);
    margin: 0;
}

/* --- Section FAQ --- */
.section-faq {
    padding: var(--spacing-section) 0;
    background: var(--color-slate-50);
}

.faq-accordion {
    max-width: 800px;
    margin: 48px auto 0 auto;
}

.faq-item {
    background: var(--color-white);
    border: 1px solid var(--color-slate-200);
    border-radius: var(--radius-lg);
    margin-bottom: 12px;
    overflow: hidden;
    transition: all var(--transition-base);
    text-align: left !important;
}

.faq-item:hover {
    border-color: var(--color-violet-light);
}

.faq-item[open] {
    border-color: var(--color-violet);
    box-shadow: var(--shadow-md);
}

.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    cursor: pointer;
    list-style: none;
    transition: background var(--transition-base);
    text-align: left !important;
}

.faq-question::-webkit-details-marker { display: none; }

.faq-question::after {
    content: '+';
    font-size: 24px;
    font-weight: var(--font-weight-bold);
    color: var(--color-violet);
    transition: transform var(--transition-accordion);
    flex-shrink: 0;
    margin-left: 16px;
}

.faq-item[open] .faq-question::after {
    content: '−';
}

.faq-question strong {
    color: var(--color-slate-900);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-semibold);
    text-align: left !important;
}

.faq-answer {
    padding: 0 24px;
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-accordion), padding var(--transition-accordion);
    text-align: left !important;
}

.faq-item[open] .faq-answer {
    max-height: 500px;
    padding: 0 24px 20px 24px;
}

.faq-answer p {
    color: var(--text-dark);
    font-size: var(--font-size-body);
    line-height: var(--line-height-relaxed);
    margin: 0;
    text-align: left !important;
}

/* ============================================================
   19c. SECTIONS SPÉCIFIQUES PAGE COMMUNITY MANAGEMENT
   ============================================================ */

/* --- Section What Includes --- */
.section-what-includes {
    padding: var(--spacing-section) 0;
    background: var(--color-slate-50);
}

/* --- Cards Grid 2 colonnes --- */
.cards-grid-2 {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
    max-width: 900px;
    margin: 0 auto 32px auto;
}

.cards-grid-2:last-child {
    margin-bottom: 0;
}

/* --- Offer Addon style --- */
.offer-addon {
    background: var(--color-slate-50);
    border-style: dashed;
}

.offer-addon .offer-number {
    font-size: 20px;
    opacity: 0.6;
}

/* --- Section Comparison Table --- */
.section-comparison-table {
    padding: var(--spacing-section) 0;
    background: var(--color-white);
}

.comparison-table-wrapper {
    max-width: 800px;
    margin: 48px auto 0 auto;
    overflow-x: auto;
}

.comparison-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-white);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.comparison-table thead {
    background: var(--color-slate-900);
    color: var(--color-white);
}

.comparison-table th {
    padding: 24px 20px;
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-semibold);
    text-align: center;
    vertical-align: bottom;
}

.comparison-table th:first-child {
    text-align: left;
    width: 50%;
}

.comparison-table th .table-subtitle {
    display: block;
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-regular);
    opacity: 0.8;
    margin-top: 4px;
}

.comparison-table th.featured-col {
    background: var(--color-violet);
}

.comparison-table td {
    padding: 16px 20px;
    font-size: var(--font-size-body);
    color: var(--text-dark);
    border-bottom: 1px solid var(--color-slate-100);
    text-align: center;
}

.comparison-table td:first-child {
    text-align: left;
    font-weight: var(--font-weight-medium);
}

.comparison-table td.featured-col {
    background: rgba(139, 92, 246, 0.04);
}

.comparison-table tbody tr:last-child td {
    border-bottom: none;
}

.comparison-table tbody tr:hover {
    background: var(--color-slate-50);
}

.comparison-table tbody tr:hover td.featured-col {
    background: rgba(139, 92, 246, 0.08);
}

.check-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: var(--gradient-violet);
    color: var(--color-white);
    border-radius: 50%;
    font-size: 12px;
    font-weight: var(--font-weight-bold);
}

.cross-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: var(--color-slate-200);
    color: var(--color-slate-500);
    border-radius: 50%;
    font-size: 12px;
    font-weight: var(--font-weight-bold);
}

/* --- Section Comparison --- */
.section-comparison {
    padding: var(--spacing-section) 0;
    background: var(--color-white);
}

.section-comparison .section-title {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-bold);
    color: var(--color-slate-900);
    margin: 0 0 48px 0;
}

.comparison-grid {
    display: flex;
    gap: 32px;
    justify-content: center;
    max-width: 900px;
    margin: 0 auto;
}

.comparison-card {
    background: var(--glass-bg-strong);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    padding: 40px 32px;
    box-shadow: var(--shadow-card);
    transition: all var(--transition-slow);
    position: relative;
    flex: 1;
    max-width: 400px;
}

.comparison-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-card-hover);
}

.comparison-featured {
    border: 2px solid var(--color-violet);
    box-shadow: var(--shadow-violet);
    transform: scale(1.02);
}

.comparison-featured:hover {
    transform: scale(1.02) translateY(-8px);
}

.comparison-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--gradient-violet);
    color: var(--color-white);
    padding: 6px 16px;
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.35);
    white-space: nowrap;
}

.comparison-icon {
    width: 64px;
    height: 64px;
    background: var(--gradient-violet);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px auto;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.25);
}

.comparison-icon svg {
    width: 28px;
    height: 28px;
    stroke: var(--color-white);
    stroke-width: 2;
    fill: none;
}

.comparison-title {
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    color: var(--color-slate-900);
    margin: 0 0 12px 0;
    text-align: center;
}

.comparison-description {
    font-size: var(--font-size-body);
    color: var(--text-dark);
    margin: 0 0 20px 0;
    text-align: center;
}

.comparison-label {
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
    color: var(--color-violet);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 12px 0;
}

.comparison-card ul {
    list-style: none;
    padding: 0;
    margin: 0 0 24px 0;
}

.comparison-card li {
    color: var(--text-dark);
    font-size: var(--font-size-body);
    padding: 0 0 0 24px;
    margin: 0 0 8px 0;
    position: relative;
}

.comparison-card li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--color-violet);
    font-weight: var(--font-weight-bold);
}

.comparison-price {
    font-size: var(--font-size-lead);
    color: var(--text-dark);
    text-align: center;
    margin: 0;
    padding-top: 20px;
    border-top: 1px solid var(--color-slate-200);
}

.comparison-price strong {
    font-size: 28px;
    color: var(--color-violet);
}

/* --- Bloc Add-on --- */
.addon-block {
    max-width: 700px;
    margin: 48px auto 0 auto;
    background: var(--color-slate-50);
    border: 2px dashed var(--color-slate-300);
    border-radius: var(--radius-xl);
    padding: 32px 40px;
    text-align: center;
}

.addon-title {
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-semibold);
    color: var(--color-slate-900);
    margin: 0 0 12px 0;
}

.addon-description {
    font-size: var(--font-size-body);
    color: var(--text-dark);
    margin: 0 0 16px 0;
    line-height: var(--line-height-relaxed);
}

.addon-price {
    font-size: var(--font-size-lead);
    color: var(--text-dark);
    margin: 0;
}

.addon-price strong {
    color: var(--color-violet);
}

/* ============================================================
   19d. PAGE CONTACT
   ============================================================ */

/* --- Reset du template contact --- */
.contact-page,
.contact-page .contact-section,
.contact-page .contact-container {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
}

/* Supprime les <p> parasites */
.contact-page .contact-container > p:empty,
.contact-page .contact-container > p:first-child:not([class]) {
    display: none !important;
}

/* ============================================================
   HERO CONTACT - IDENTIQUE AU HERO HOME
   ============================================================ */
.contact-hero-section {
    min-height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 160px 40px 100px !important;
    background: var(--gradient-primary) !important;
    position: relative !important;
    overflow: hidden !important;
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-top: -100px !important;
    padding-top: 200px !important;
}

.contact-hero-section::before,
.contact-hero-section::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(60px);
}

.contact-hero-section::before {
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);
    top: -300px;
    right: -200px;
}

.contact-hero-section::after {
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, rgba(255,255,255,0.06) 0%, transparent 70%);
    bottom: -250px;
    left: -200px;
}

.contact-hero-section > .wp-block-group {
    position: relative;
    z-index: 2;
    max-width: 800px;
    margin: 0 auto;
}

.contact-hero-section h1 {
    font-size: clamp(36px, 5vw, 56px) !important;
    font-weight: 700 !important;
    color: var(--color-white) !important;
    margin: 0 0 20px 0 !important;
    line-height: 1.1 !important;
    animation: fade-up 0.6s ease 0.2s forwards !important;
    opacity: 0;
}

.contact-hero-section p {
    font-size: clamp(16px, 2vw, 19px) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    max-width: 650px !important;
    margin: 0 auto !important;
    line-height: 1.6 !important;
    animation: fade-up 0.6s ease 0.4s forwards !important;
    opacity: 0;
}

/* ============================================================
   SECTION CONTACT - FULL WIDTH
   ============================================================ */
.section-contact {
    padding: 80px 40px 100px !important;
    background: var(--color-slate-50) !important;
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
}

.section-contact > .wp-block-columns.contact-layout,
.contact-layout {
    display: grid !important;
    grid-template-columns: 1.4fr 1fr !important;
    gap: 40px !important;
    align-items: start !important;
    max-width: 1100px !important;
    margin: 0 auto !important;
    padding: 0 40px !important;
}

.section-contact .wp-block-column,
.contact-layout > .wp-block-column {
    margin: 0 !important;
}

/* ============================================================
   COLONNE FORMULAIRE
   ============================================================ */
.contact-form-col {
    min-width: 0 !important;
}

.contact-form-wrapper {
    background: var(--color-white) !important;
    border-radius: 20px !important;
    padding: 40px !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08) !important;
}

.contact-form-wrapper > h2:first-of-type,
.contact-form-wrapper > .wp-block-heading:first-of-type {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: var(--color-slate-900) !important;
    margin: 0 0 8px 0 !important;
}

.contact-form-wrapper > p:first-of-type {
    font-size: 15px !important;
    color: var(--text-muted) !important;
    margin: 0 0 28px 0 !important;
    line-height: 1.5 !important;
}

/* ============================================================
   NINJA FORMS - STYLE COMPLET
   ============================================================ */

/* Container principal */
.contact-form-wrapper .nf-form-cont,
.contact-form-fullwidth .nf-form-cont {
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
}

.contact-form-wrapper .nf-form-wrap,
.contact-form-fullwidth .nf-form-wrap {
    max-width: 100% !important;
}

.contact-form-wrapper .nf-form-content,
.contact-form-fullwidth .nf-form-content {
    padding: 0 !important;
    margin: 0 !important;
}

/* --- Labels --- */
.contact-form-wrapper .nf-field-label label,
.contact-form-fullwidth .nf-field-label label {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--color-slate-800) !important;
    margin-bottom: 10px !important;
    display: block !important;
    text-align: left !important;
}

.contact-form-wrapper .nf-field-description,
.contact-form-fullwidth .nf-field-description {
    font-size: 13px !important;
    color: var(--text-muted) !important;
    margin-top: 6px !important;
    text-align: left !important;
}

.contact-form-wrapper .ninja-forms-req-symbol,
.contact-form-fullwidth .ninja-forms-req-symbol {
    color: var(--color-violet) !important;
}

/* --- Espacement des champs --- */
.contact-form-wrapper .nf-field-container,
.contact-form-fullwidth .nf-field-container {
    margin-bottom: 20px !important;
    padding: 0 !important;
}

/* --- TOUS LES CHAMPS - MÊME STYLE --- */
.contact-form-wrapper .nf-field input[type="text"],
.contact-form-wrapper .nf-field input[type="email"],
.contact-form-wrapper .nf-field input[type="tel"],
.contact-form-wrapper .nf-field input[type="url"],
.contact-form-wrapper .nf-field input[type="number"],
.contact-form-wrapper .nf-field textarea,
.contact-form-wrapper .nf-field select,
.contact-form-fullwidth .nf-field input[type="text"],
.contact-form-fullwidth .nf-field input[type="email"],
.contact-form-fullwidth .nf-field input[type="tel"],
.contact-form-fullwidth .nf-field input[type="url"],
.contact-form-fullwidth .nf-field input[type="number"],
.contact-form-fullwidth .nf-field textarea,
.contact-form-fullwidth .nf-field select {
    width: 100% !important;
    max-width: 100% !important;
    padding: 14px 16px !important;
    font-size: 15px !important;
    font-family: inherit !important;
    color: var(--color-slate-900) !important;
    background: var(--color-white) !important;
    border: 2px solid var(--color-slate-200) !important;
    border-radius: 10px !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
}

/* Hover */
.contact-form-wrapper .nf-field input:hover,
.contact-form-wrapper .nf-field textarea:hover,
.contact-form-wrapper .nf-field select:hover,
.contact-form-fullwidth .nf-field input:hover,
.contact-form-fullwidth .nf-field textarea:hover,
.contact-form-fullwidth .nf-field select:hover {
    border-color: var(--color-slate-300) !important;
}

/* Focus */
.contact-form-wrapper .nf-field input:focus,
.contact-form-wrapper .nf-field textarea:focus,
.contact-form-wrapper .nf-field select:focus,
.contact-form-fullwidth .nf-field input:focus,
.contact-form-fullwidth .nf-field textarea:focus,
.contact-form-fullwidth .nf-field select:focus {
    outline: none !important;
    border-color: var(--color-violet) !important;
    box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.1) !important;
}

/* Placeholder */
.contact-form-wrapper .nf-field input::placeholder,
.contact-form-wrapper .nf-field textarea::placeholder,
.contact-form-fullwidth .nf-field input::placeholder,
.contact-form-fullwidth .nf-field textarea::placeholder {
    color: var(--color-slate-400) !important;
}

/* --- CHAMPS NOM/PRÉNOM CÔTE À CÔTE --- */
.contact-form-wrapper .nf-row,
.contact-form-fullwidth .nf-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
}

.contact-form-wrapper .nf-row .nf-field-container,
.contact-form-fullwidth .nf-row .nf-field-container {
    margin: 0 !important;
    padding: 0 !important;
}

/* --- GRILLES 2 COLONNES POUR CHAMPS CÔTE À CÔTE --- */
/* Classe pour mettre 2 champs sur la même ligne */
.contact-form-wrapper .two-col-row,
.contact-form-fullwidth .two-col-row,
.contact-form-wrapper .nf-form-content .two-col-row,
.contact-form-fullwidth .nf-form-content .two-col-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
    margin-bottom: 20px !important;
}

.contact-form-wrapper .two-col-row .nf-field-container,
.contact-form-fullwidth .two-col-row .nf-field-container {
    margin-bottom: 0 !important;
}

/* Classes one-half gérées par CSS Grid */

/* Neutraliser les styles par défaut de Ninja Forms pour one-half */
.contact-form-wrapper .nf-field-container.one-half,
.contact-form-fullwidth .nf-field-container.one-half,
.contact-form-wrapper .nf-field-container.one-half.first,
.contact-form-fullwidth .nf-field-container.one-half.first {
    float: none !important;
    clear: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Layout formulaire géré par CSS Grid ci-dessus */
.contact-form-wrapper .nf-form-layout,
.contact-form-fullwidth .nf-form-layout {
    display: contents !important;
}

/* ============================================================
   LAYOUT FORMULAIRE : GRILLE CSS - 4 CHAMPS SUR 2 COLONNES
   ============================================================ */

/* Container principal - Grille CSS */
.contact-form-wrapper .nf-form-content,
.contact-form-fullwidth .nf-form-content {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
    align-items: start !important;
}

/* Wrapper nf-fields-wrap - hérite la grille */
.contact-form-wrapper nf-fields-wrap,
.contact-form-fullwidth nf-fields-wrap {
    display: contents !important;
}

/* nf-field wrapper - hérite aussi */
.contact-form-wrapper nf-field,
.contact-form-fullwidth nf-field {
    display: contents !important;
}

/* Par défaut : TOUS les champs sur 2 colonnes (pleine largeur) */
.contact-form-wrapper .nf-field-container,
.contact-form-fullwidth .nf-field-container {
    grid-column: span 2 !important;
    margin-bottom: 0 !important;
    width: 100% !important;
}

/* === LES 4 CHAMPS SPÉCIFIQUES SUR 1 COLONNE (50%) === */
#nf-field-26-container,
#nf-field-17-container,
#nf-field-19-container,
#nf-field-6-container {
    grid-column: span 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
    max-width: none !important;
    padding: 0 !important;
}

/* Forcer tous les éléments internes à prendre 100% et aligner à gauche */
#nf-field-26-container .nf-field,
#nf-field-17-container .nf-field,
#nf-field-19-container .nf-field,
#nf-field-6-container .nf-field,
#nf-field-26-container .field-wrap,
#nf-field-17-container .field-wrap,
#nf-field-19-container .field-wrap,
#nf-field-6-container .field-wrap,
#nf-field-26-container .nf-field-element,
#nf-field-17-container .nf-field-element,
#nf-field-19-container .nf-field-element,
#nf-field-6-container .nf-field-element {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Labels des 4 champs alignés à gauche */
#nf-field-26-container .nf-field-label,
#nf-field-17-container .nf-field-label,
#nf-field-19-container .nf-field-label,
#nf-field-6-container .nf-field-label {
    text-align: left !important;
    padding: 0 !important;
    margin: 0 0 10px 0 !important;
}

/* Inputs pleine largeur dans leur colonne */
#nf-field-26-container input,
#nf-field-17-container input,
#nf-field-19-container input,
#nf-field-6-container input,
.contact-form-wrapper .nf-field input[type="text"],
.contact-form-wrapper .nf-field input[type="email"],
.contact-form-wrapper .nf-field input[type="tel"],
.contact-form-fullwidth .nf-field input[type="text"],
.contact-form-fullwidth .nf-field input[type="email"],
.contact-form-fullwidth .nf-field input[type="tel"] {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* --- TEXTAREA --- */
.contact-form-wrapper .nf-field textarea,
.contact-form-fullwidth .nf-field textarea {
    min-height: 140px !important;
    resize: vertical !important;
    line-height: 1.5 !important;
}

/* ============================================================
   RADIO BUTTONS & CHECKBOXES - STYLE STANDARD ALIGNÉ À GAUCHE
   ============================================================ */

/* Container principal */
.contact-form-wrapper .nf-field-container.listradio-container,
.contact-form-wrapper .nf-field-container.listcheckbox-container,
.contact-form-fullwidth .nf-field-container.listradio-container,
.contact-form-fullwidth .nf-field-container.listcheckbox-container {
    text-align: left !important;
}

/* Wrapper */
.contact-form-wrapper .listradio-wrap,
.contact-form-wrapper .listcheckbox-wrap,
.contact-form-fullwidth .listradio-wrap,
.contact-form-fullwidth .listcheckbox-wrap {
    text-align: left !important;
    display: block !important;
}

/* Liste des options */
.contact-form-wrapper .listradio-wrap ul,
.contact-form-wrapper .listcheckbox-wrap ul,
.contact-form-fullwidth .listradio-wrap ul,
.contact-form-fullwidth .listcheckbox-wrap ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    align-items: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Chaque item de liste */
.contact-form-wrapper .listradio-wrap ul li,
.contact-form-wrapper .listcheckbox-wrap ul li,
.contact-form-fullwidth .listradio-wrap ul li,
.contact-form-fullwidth .listcheckbox-wrap ul li {
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: auto !important;
}

/* === RADIO BUTTONS VISIBLES ET STYLISÉS === */
.contact-form-wrapper .listradio-wrap input[type="radio"],
.contact-form-fullwidth .listradio-wrap input[type="radio"] {
    position: relative !important;
    opacity: 1 !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    border: 2px solid var(--color-slate-300) !important;
    border-radius: 50% !important;
    background: var(--color-white) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    pointer-events: auto !important;
}

.contact-form-wrapper .listradio-wrap input[type="radio"]:hover,
.contact-form-fullwidth .listradio-wrap input[type="radio"]:hover {
    border-color: var(--color-violet) !important;
}

.contact-form-wrapper .listradio-wrap input[type="radio"]:checked,
.contact-form-fullwidth .listradio-wrap input[type="radio"]:checked {
    border-color: var(--color-violet) !important;
    background: var(--color-violet) !important;
    box-shadow: inset 0 0 0 4px var(--color-white) !important;
}

/* === CHECKBOXES VISIBLES ET STYLISÉS === */
.contact-form-wrapper .listcheckbox-wrap input[type="checkbox"],
.contact-form-fullwidth .listcheckbox-wrap input[type="checkbox"] {
    position: relative !important;
    opacity: 1 !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    border: 2px solid var(--color-slate-300) !important;
    border-radius: 4px !important;
    background: var(--color-white) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    pointer-events: auto !important;
}

.contact-form-wrapper .listcheckbox-wrap input[type="checkbox"]:hover,
.contact-form-fullwidth .listcheckbox-wrap input[type="checkbox"]:hover {
    border-color: var(--color-violet) !important;
}

.contact-form-wrapper .listcheckbox-wrap input[type="checkbox"]:checked,
.contact-form-fullwidth .listcheckbox-wrap input[type="checkbox"]:checked {
    border-color: var(--color-violet) !important;
    background: var(--color-violet) !important;
}

.contact-form-wrapper .listcheckbox-wrap input[type="checkbox"]:checked::after,
.contact-form-fullwidth .listcheckbox-wrap input[type="checkbox"]:checked::after {
    content: '✓' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    color: var(--color-white) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}

/* === LABELS POUR RADIO ET CHECKBOX === */
.contact-form-wrapper .listradio-wrap ul li label,
.contact-form-wrapper .listcheckbox-wrap ul li label,
.contact-form-fullwidth .listradio-wrap ul li label,
.contact-form-fullwidth .listcheckbox-wrap ul li label {
    display: inline !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    font-size: 15px !important;
    color: var(--color-slate-700) !important;
    cursor: pointer !important;
    transition: color 0.2s ease !important;
    text-align: left !important;
    line-height: 1.4 !important;
}

.contact-form-wrapper .listradio-wrap ul li label:hover,
.contact-form-wrapper .listcheckbox-wrap ul li label:hover,
.contact-form-fullwidth .listradio-wrap ul li label:hover,
.contact-form-fullwidth .listcheckbox-wrap ul li label:hover {
    color: var(--color-violet) !important;
}

/* Label quand sélectionné */
.contact-form-wrapper .listradio-wrap ul li input:checked + label,
.contact-form-wrapper .listcheckbox-wrap ul li input:checked + label,
.contact-form-fullwidth .listradio-wrap ul li input:checked + label,
.contact-form-fullwidth .listcheckbox-wrap ul li input:checked + label {
    color: var(--color-violet) !important;
    font-weight: 500 !important;
}

/* --- BOUTON SUBMIT --- */
.contact-form-wrapper .submit-wrap,
.contact-form-wrapper .nf-field-container .submit-container,
.contact-form-fullwidth .submit-wrap,
.contact-form-fullwidth .nf-field-container .submit-container {
    margin-top: 12px !important;
    padding: 0 !important;
}

.contact-form-wrapper .nf-field-element input[type="submit"],
.contact-form-wrapper .nf-field-element button[type="submit"],
.contact-form-wrapper input.ninja-forms-field[type="submit"],
.contact-form-fullwidth .nf-field-element input[type="submit"],
.contact-form-fullwidth .nf-field-element button[type="submit"],
.contact-form-fullwidth input.ninja-forms-field[type="submit"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px 48px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    font-family: inherit !important;
    color: var(--color-white) !important;
    background: var(--gradient-violet) !important;
    border: none !important;
    border-radius: 50px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 20px rgba(139, 92, 246, 0.35) !important;
}

.contact-form-wrapper .nf-field-element input[type="submit"]:hover,
.contact-form-wrapper .nf-field-element button[type="submit"]:hover,
.contact-form-wrapper input.ninja-forms-field[type="submit"]:hover,
.contact-form-fullwidth .nf-field-element input[type="submit"]:hover,
.contact-form-fullwidth .nf-field-element button[type="submit"]:hover,
.contact-form-fullwidth input.ninja-forms-field[type="submit"]:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 30px rgba(139, 92, 246, 0.45) !important;
}

/* --- ERREURS --- */
.contact-form-wrapper .nf-error-msg,
.contact-form-wrapper .nf-field-element .nf-error,
.contact-form-fullwidth .nf-error-msg,
.contact-form-fullwidth .nf-field-element .nf-error {
    color: #ef4444 !important;
    font-size: 13px !important;
    margin-top: 6px !important;
    display: block !important;
}

.contact-form-wrapper .nf-field.nf-error input,
.contact-form-wrapper .nf-field.nf-error textarea,
.contact-form-fullwidth .nf-field.nf-error input,
.contact-form-fullwidth .nf-field.nf-error textarea {
    border-color: #ef4444 !important;
}

/* --- CONFIRMATION --- */
.contact-form-wrapper .nf-response-msg,
.contact-form-fullwidth .nf-response-msg {
    background: rgba(139, 92, 246, 0.06) !important;
    border: 2px solid var(--color-violet) !important;
    border-radius: 16px !important;
    padding: 32px !important;
    text-align: center !important;
}

/* ============================================================
   NINJA FORMS - ALIGNEMENT GAUCHE & CORRECTIONS
   ============================================================ */

/* Masquer le titre du formulaire Ninja Forms */
.contact-form-wrapper .nf-form-title,
.contact-form-fullwidth .nf-form-title,
.contact-form-wrapper .nf-form-title h3,
.contact-form-fullwidth .nf-form-title h3,
.contact-form-wrapper .nf-form-wrap > h3,
.contact-form-fullwidth .nf-form-wrap > h3,
.nf-form-title,
.nf-form-title h3 {
    display: none !important;
}

/* Masquer le message "champs obligatoires" centré */
.contact-form-wrapper .nf-form-fields-required,
.contact-form-fullwidth .nf-form-fields-required {
    text-align: left !important;
    font-size: 13px !important;
    color: var(--text-muted) !important;
    margin-bottom: 24px !important;
}

/* FORCE ALIGNEMENT GAUCHE - Formulaire */
.contact-form-wrapper,
.contact-form-fullwidth,
.contact-form-wrapper *,
.contact-form-fullwidth * {
    text-align: left !important;
}

/* Labels et descriptions alignés à gauche */
.contact-form-wrapper .nf-field-label,
.contact-form-fullwidth .nf-field-label,
.contact-form-wrapper .nf-field-description,
.contact-form-fullwidth .nf-field-description,
.contact-form-wrapper .nf-error-msg,
.contact-form-fullwidth .nf-error-msg {
    text-align: left !important;
}

/* Checkboxes - alignement gauche avec texte à gauche */
.contact-form-wrapper .listcheckbox-wrap,
.contact-form-fullwidth .listcheckbox-wrap,
.contact-form-wrapper .checkbox-wrap,
.contact-form-fullwidth .checkbox-wrap {
    text-align: left !important;
}

/* --- CHECKBOX RGPD SEULE (structure label-right de Ninja Forms) --- */
/* Container avec label-right : réorganiser en flexbox */
.contact-form-wrapper .checkbox-container.label-right .field-wrap,
.contact-form-fullwidth .checkbox-container.label-right .field-wrap,
.contact-form-wrapper .checkbox-container.label-right .checkbox-wrap,
.contact-form-fullwidth .checkbox-container.label-right .checkbox-wrap {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    gap: 12px !important;
}

/* L'élément checkbox dans label-right - en premier (gauche) */
.contact-form-wrapper .checkbox-container.label-right .nf-field-element,
.contact-form-fullwidth .checkbox-container.label-right .nf-field-element {
    order: 1 !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: flex-start !important;
    padding-top: 2px !important;
}

/* Le label dans label-right - en second (droite) */
.contact-form-wrapper .checkbox-container.label-right .nf-field-label,
.contact-form-fullwidth .checkbox-container.label-right .nf-field-label {
    order: 2 !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 1 !important;
}

.contact-form-wrapper .checkbox-container.label-right .nf-field-label label,
.contact-form-fullwidth .checkbox-container.label-right .nf-field-label label {
    display: inline !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    font-size: 14px !important;
    color: var(--text-dark) !important;
    line-height: 1.5 !important;
    cursor: pointer !important;
}

/* Checkbox RGPD - case visible et stylisée */
.contact-form-wrapper .checkbox-container.label-right input[type="checkbox"],
.contact-form-fullwidth .checkbox-container.label-right input[type="checkbox"],
.contact-form-wrapper .checkbox-wrap input[type="checkbox"],
.contact-form-fullwidth .checkbox-wrap input[type="checkbox"],
.contact-form-wrapper .checkbox-container input[type="checkbox"],
.contact-form-fullwidth .checkbox-container input[type="checkbox"] {
    position: relative !important;
    opacity: 1 !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    border: 2px solid var(--color-slate-300) !important;
    border-radius: 4px !important;
    background: var(--color-white) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    pointer-events: auto !important;
}

.contact-form-wrapper .checkbox-wrap input[type="checkbox"]:checked,
.contact-form-fullwidth .checkbox-wrap input[type="checkbox"]:checked,
.contact-form-wrapper .checkbox-container input[type="checkbox"]:checked,
.contact-form-fullwidth .checkbox-container input[type="checkbox"]:checked {
    border-color: var(--color-violet) !important;
    background: var(--color-violet) !important;
}

.contact-form-wrapper .checkbox-wrap input[type="checkbox"]:checked::after,
.contact-form-fullwidth .checkbox-wrap input[type="checkbox"]:checked::after,
.contact-form-wrapper .checkbox-container input[type="checkbox"]:checked::after,
.contact-form-fullwidth .checkbox-container input[type="checkbox"]:checked::after {
    content: '✓' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    color: var(--color-white) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}

/* Texte RGPD / légal sous le formulaire */
.contact-form-wrapper .nf-after-form-content,
.contact-form-fullwidth .nf-after-form-content,
.contact-form-wrapper .nf-form-hp,
.contact-form-fullwidth .nf-form-hp {
    text-align: left !important;
    font-size: 13px !important;
    color: var(--text-muted) !important;
    margin-top: 16px !important;
    line-height: 1.5 !important;
}

/* Bouton submit aligné à droite */
.contact-form-wrapper .submit-wrap,
.contact-form-fullwidth .submit-wrap,
.contact-form-wrapper .submit-container,
.contact-form-fullwidth .submit-container,
.contact-form-wrapper .nf-field-container.submit-container,
.contact-form-fullwidth .nf-field-container.submit-container {
    text-align: right !important;
}

.contact-form-wrapper .nf-field-container.submit-container .nf-field-element,
.contact-form-fullwidth .nf-field-container.submit-container .nf-field-element {
    text-align: right !important;
    display: flex !important;
    justify-content: flex-end !important;
}

/* ============================================================
   SECTION FAQ - FULL WIDTH
   ============================================================ */
.section-faq {
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
}

/* --- Colonne Infos --- */
.contact-info-col {
    display: flex;
    flex-direction: column;
    gap: 24px;
    text-align: left;
}

.contact-info-card,
.contact-reassurance-card {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: 32px;
    box-shadow: var(--shadow-card);
    text-align: left !important;
}

/* FORCE alignement gauche dans les cartes */
.contact-info-card *,
.contact-reassurance-card * {
    text-align: left !important;
}

.contact-info-title {
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-semibold);
    color: var(--color-slate-900);
    margin: 0 0 24px 0;
    text-align: left !important;
}

/* Info items */
.contact-info-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 20px;
}

.contact-info-item:last-child {
    margin-bottom: 0;
}

.contact-info-icon {
    width: 48px;
    height: 48px;
    background: rgba(139, 92, 246, 0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.contact-info-icon svg {
    width: 22px;
    height: 22px;
    stroke: var(--color-violet);
}

.contact-info-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.contact-info-label {
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}

.contact-info-content a,
.contact-info-content span:not(.contact-info-label):not(.contact-info-note) {
    font-size: 15px;
    color: var(--color-slate-900);
    font-weight: 500;
    text-decoration: none;
}

.contact-info-content a:hover {
    color: var(--color-violet);
}

.contact-info-note {
    font-size: 13px;
    color: var(--color-violet);
    font-style: italic;
    margin-top: 2px;
}

/* Reassurance list */
.reassurance-list {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left !important;
}

.reassurance-list li {
    position: relative;
    padding-left: 32px;
    margin-bottom: 14px;
    font-size: 15px;
    color: var(--text-dark);
    line-height: 1.5;
    text-align: left !important;
}

.reassurance-list li:last-child {
    margin-bottom: 0;
}

.reassurance-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 20px;
    background: var(--gradient-violet);
    color: var(--color-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
}

/* --- Section Process --- */
.section-process {
    padding: var(--spacing-section) 40px;
    background: linear-gradient(to bottom, rgba(139,92,246,0.03) 0%, var(--color-white) 50%, rgba(139,92,246,0.03) 100%);
}

.section-process .section-title {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-bold);
    color: var(--color-slate-900);
    margin: 0 0 48px 0;
    text-align: center;
}

.process-footer {
    font-size: var(--font-size-lead);
    color: var(--text-dark);
    background: rgba(139, 92, 246, 0.06);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: var(--radius-xl);
    padding: 28px 40px;
    max-width: var(--container-narrow);
    margin: 48px auto 0 auto;
    text-align: center;
    line-height: var(--line-height-relaxed);
}

.process-footer strong {
    color: var(--color-violet);
}

/* --- Section Tools --- */
.section-tools {
    padding: var(--spacing-section) 0;
    background: var(--color-slate-50);
}

.section-tools .section-title {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-bold);
    color: var(--color-slate-900);
    margin: 0 0 24px 0;
}

.tools-intro {
    font-size: var(--font-size-lead);
    color: var(--text-dark);
    max-width: 800px;
    margin: 0 auto 16px auto;
}

.tools-additional {
    font-size: var(--font-size-body);
    color: var(--text-muted);
    max-width: 700px;
    margin: 0 auto 48px auto;
}

.tools-section-title {
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-semibold);
    color: var(--color-slate-900);
    margin: 0 0 32px 0;
}

.tools-comparison-grid {
    display: flex;
    gap: 32px;
    justify-content: center;
    max-width: 800px;
    margin: 0 auto;
}

/* ============================================================
   20. TIMELINE — Comment ça se passe
   ============================================================ */
.timeline-section {
    padding: var(--spacing-section) 40px;
    background: linear-gradient(to bottom, rgba(139,92,246,0.03) 0%, rgba(255,255,255,0.5) 50%, rgba(139,92,246,0.03) 100%);
    position: relative;
    overflow: hidden;
}

.timeline-container {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    z-index: var(--z-content);
}

.timeline-header {
    text-align: center;
    margin-bottom: 60px;
}

.timeline-main-title {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-bold);
    color: var(--color-slate-900);
    margin: 0 0 20px 0;
    letter-spacing: -0.02em;
}

.timeline-intro {
    font-size: var(--font-size-lead);
    color: var(--text-dark);
    max-width: 700px;
    margin: 0 auto;
    line-height: var(--line-height-relaxed);
}

.timeline-steps {
    position: relative;
    padding-left: 100px;
    max-width: 750px;
    margin: 0 auto;
}

.timeline-steps::before {
    content: '';
    position: absolute;
    left: 35px;
    top: 35px;
    bottom: 35px;
    width: 2px;
    background: linear-gradient(180deg, var(--color-violet-light) 0%, var(--color-violet) 100%);
    opacity: 0.3;
}

.timeline-step {
    position: relative;
    margin-bottom: 50px;
}

.timeline-step:last-child {
    margin-bottom: 0;
}

.timeline-number {
    position: absolute;
    left: -100px;
    top: 0;
    width: 70px;
    height: 70px;
    background: var(--gradient-violet);
    border: 2px solid var(--color-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
    box-shadow: var(--shadow-lg);
    margin: 0;
    line-height: 1;
    transition: all var(--transition-base);
}

.timeline-step:hover .timeline-number {
    transform: scale(1.1);
    box-shadow: var(--shadow-xl);
}

.timeline-card {
    background: var(--glass-bg-strong);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 28px;
    box-shadow: var(--shadow-card);
    transition: all var(--transition-base);
    position: relative;
    max-width: 600px;
}

.timeline-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
    border-color: rgba(139, 92, 246, 0.3);
}

.timeline-card h3 {
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-bold);
    color: var(--color-slate-900);
    margin: 0 0 12px 0;
}

.timeline-card p {
    font-size: var(--font-size-body);
    color: var(--text-dark);
    line-height: var(--line-height-relaxed);
    margin: 0;
}

/* ============================================================
   21. FOOTER
   ============================================================ */
.site-footer {
    background: var(--color-slate-900);
    color: var(--color-slate-400);
    width: 100vw;
    margin-left: calc(-50vw + 50%);
}

/* --- Footer Main --- */
.footer-main {
    padding: 70px 40px 50px;
}

.footer-inner {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 60px;
    max-width: var(--container-standard);
    margin: 0 auto;
}

/* Colonne Brand */
.footer-brand .footer-logo {
    margin-bottom: 20px;
}

.footer-brand .custom-logo {
    filter: brightness(0) invert(1);
    height: auto;
    max-height: 40px;
    width: auto;
}

.footer-site-name {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-white);
}

.footer-baseline {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-violet-light);
    margin: 0 0 12px 0;
}

.footer-description {
    font-size: 15px;
    color: var(--color-slate-400);
    line-height: 1.6;
    margin: 0;
}

/* Titres colonnes */
.footer-col-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-white);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0 0 24px 0;
}

/* Colonne Services */
.footer-services ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-services li {
    margin-bottom: 14px;
}

.footer-services a {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--color-slate-400);
    text-decoration: none;
    font-size: 15px;
    transition: all 0.2s ease;
}

.footer-services a:hover {
    color: var(--color-white);
}

.footer-service-icon {
    width: 32px;
    height: 32px;
    background: rgba(139, 92, 246, 0.15);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.footer-service-icon svg {
    stroke: var(--color-violet-light);
}

.footer-services a:hover .footer-service-icon {
    background: var(--color-violet);
}

.footer-services a:hover .footer-service-icon svg {
    stroke: var(--color-white);
}

/* Colonne Contact */
.footer-contact ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-contact li {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    font-size: 15px;
    color: var(--color-slate-400);
}

.footer-contact li svg {
    stroke: var(--color-violet-light);
    flex-shrink: 0;
}

.footer-contact a {
    color: var(--color-slate-400);
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-contact a:hover {
    color: var(--color-violet-light);
}

/* Bouton CTA Footer */
.footer-cta-btn {
    display: inline-block;
    margin-top: 20px;
    padding: 12px 28px;
    background: var(--color-white);
    color: var(--color-violet);
    font-size: 14px;
    font-weight: 600;
    border-radius: 30px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.footer-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    color: var(--color-violet);
}

/* --- Footer Bottom --- */
.footer-bottom {
    border-top: 1px solid var(--color-slate-800);
}

.footer-bottom-inner {
    max-width: var(--container-standard);
    margin: 0 auto;
    padding: 24px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.footer-bottom p {
    font-size: 14px;
    color: var(--color-slate-500);
    margin: 0;
}

.footer-legal-links {
    display: flex;
    align-items: center;
    gap: 12px;
}

.footer-legal-links a {
    font-size: 14px;
    color: var(--color-slate-500);
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-legal-links a:hover {
    color: var(--color-violet-light);
}

.footer-separator {
    color: var(--color-slate-600);
}
/* ============================================================
   22. RESPONSIVE - ADAPTATION MOBILE ET TABLETTE
   ============================================================ */

/* ============================================================
   MENU MOBILE - TABLET ET MOBILE (max-width: 1024px)
   ============================================================ */
@media (max-width: 1024px) {
    
    /* --- RESET : Cacher le menu desktop --- */
    .nav-desktop {
        display: none !important;
        visibility: hidden !important;
    }
    
    /* --- HEADER : Z-index élevé mais sous le menu --- */
    .site-header {
        top: 12px;
        width: 92%;
        border-radius: 16px;
        z-index: 9998 !important;
    }
    
    .header-container {
        padding: 10px 20px;
        grid-template-columns: 1fr auto;
        gap: 0;
    }
    
    .site-branding .custom-logo {
        height: 38px;
    }
    
    .site-title-link {
        font-size: 20px;
    }
    
    /* --- BURGER : Toujours au-dessus de tout --- */
    .mobile-menu-toggle {
        display: flex !important;
        flex-direction: column;
        justify-content: space-around;
        order: 2;
        width: 32px;
        height: 32px;
        background: transparent !important;
        border: none !important;
        cursor: pointer;
        padding: 4px;
        position: relative;
        z-index: 10001 !important;
    }
    
    .burger-line {
        display: block;
        width: 100%;
        height: 2px;
        background: var(--color-white);
        border-radius: 2px;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        transform-origin: center;
    }
    
    /* Burger devient croix quand actif */
    .mobile-menu-toggle.active .burger-line:nth-child(1) {
        transform: rotate(45deg) translate(6px, 6px);
    }
    
    .mobile-menu-toggle.active .burger-line:nth-child(2) {
        opacity: 0;
        transform: scaleX(0);
    }
    
    .mobile-menu-toggle.active .burger-line:nth-child(3) {
        transform: rotate(-45deg) translate(6px, -6px);
    }
    
    /* --- MENU MOBILE : État fermé (INVISIBLE) --- */
    .nav-mobile {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        background: rgba(15, 23, 42, 1) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        z-index: 10000 !important;
        
        /* État fermé */
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        
        /* Animation slide depuis la droite */
        transform: translateX(100%);
        transition: 
            opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
            visibility 0.3s cubic-bezier(0.4, 0, 0.2, 1),
            transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        
        /* Mise en page */
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 100px 40px 60px !important;
        overflow-y: auto !important;
    }
    
    /* --- MENU MOBILE : État ouvert (VISIBLE) --- */
    .nav-mobile.active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateX(0);
    }
    
    /* --- BODY : Bloquer le scroll --- */
    body.menu-open {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
        height: 100% !important;
    }
    
    /* --- NAVIGATION DANS LE MENU --- */
    .nav-mobile .main-navigation {
        width: 100%;
        max-width: 400px;
    }
    
    .nav-mobile .main-navigation ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 0;
        width: 100%;
    }
    
    .nav-mobile .main-navigation > ul > li {
        width: 100%;
    }
    
    /* Label de catégorie (ex: "Prestations") */
    .nav-mobile .main-navigation > ul > li > a {
        display: block !important;
        padding: 0 0 16px 0 !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        color: var(--color-slate-500) !important;
        text-transform: uppercase !important;
        letter-spacing: 0.15em !important;
        text-align: left !important;
        text-decoration: none !important;
        pointer-events: none !important;
        border: none !important;
        background: none !important;
        border-radius: 0 !important;
    }
    
    /* --- SOUS-MENUS : Les vrais liens cliquables --- */
    .nav-mobile .main-navigation ul ul,
    .nav-mobile .main-navigation .sub-menu {
        position: static !important;
        background: transparent !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        padding: 0 !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        min-width: auto !important;
        opacity: 1 !important;
        visibility: visible !important;
        border-radius: 0 !important;
    }
    
    .nav-mobile .main-navigation ul ul li,
    .nav-mobile .main-navigation .sub-menu li {
        width: 100%;
        margin: 0;
    }
    
    .nav-mobile .main-navigation ul ul a,
    .nav-mobile .main-navigation .sub-menu a {
        display: block !important;
        padding: 18px 0 !important;
        font-size: 22px !important;
        font-weight: 500 !important;
        color: var(--color-white) !important;
        text-align: left !important;
        text-decoration: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-radius: 0 !important;
        background: none !important;
        pointer-events: auto !important;
        transition: all 0.2s ease !important;
    }
    
    .nav-mobile .main-navigation ul ul li:last-child a,
    .nav-mobile .main-navigation .sub-menu li:last-child a {
        border-bottom: none !important;
    }
    
    .nav-mobile .main-navigation ul ul a:hover,
    .nav-mobile .main-navigation .sub-menu a:hover,
    .nav-mobile .main-navigation ul ul a:focus,
    .nav-mobile .main-navigation .sub-menu a:focus {
        color: var(--color-violet-light) !important;
        padding-left: 12px !important;
        background: none !important;
    }
    
    /* --- BOUTON CTA DANS LE MENU --- */
    .nav-mobile .header-cta {
        margin-top: 48px !important;
        display: flex !important;
        justify-content: center !important;
    }
    
    .nav-mobile .btn-devis {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 16px 40px !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        background: var(--color-white) !important;
        color: var(--color-violet) !important;
        border-radius: 50px !important;
        box-shadow: 0 4px 24px rgba(139, 92, 246, 0.3) !important;
        transition: all 0.3s ease !important;
        text-decoration: none !important;
    }
    
    .nav-mobile .btn-devis:hover,
    .nav-mobile .btn-devis:focus {
        transform: translateY(-3px) scale(1.02) !important;
        box-shadow: 0 8px 32px rgba(139, 92, 246, 0.4) !important;
        color: var(--color-violet) !important;
    }
    
    /* --- Z-INDEX : Tout le contenu passe en dessous --- */
    .hero-section,
    .service-hero-section,
    .contact-hero-section,
    .legal-hero-section,
    .section-situations,
    .section-strategie,
    .pourquoi-section,
    .timeline-section,
    .section-comparison,
    .section-faq,
    .section-cta-final,
    .section-contact,
    section,
    #main-content,
    .site-footer {
        position: relative;
        z-index: 1 !important;
    }
    
    /* --- ANIMATION ENTRÉE DES LIENS --- */
    .nav-mobile.active .main-navigation ul ul li,
    .nav-mobile.active .main-navigation .sub-menu li {
        animation: slideInFromRight 0.4s ease forwards;
        opacity: 0;
    }
    
    .nav-mobile.active .main-navigation ul ul li:nth-child(1),
    .nav-mobile.active .main-navigation .sub-menu li:nth-child(1) {
        animation-delay: 0.1s;
    }
    
    .nav-mobile.active .main-navigation ul ul li:nth-child(2),
    .nav-mobile.active .main-navigation .sub-menu li:nth-child(2) {
        animation-delay: 0.15s;
    }
    
    .nav-mobile.active .main-navigation ul ul li:nth-child(3),
    .nav-mobile.active .main-navigation .sub-menu li:nth-child(3) {
        animation-delay: 0.2s;
    }
    
    .nav-mobile.active .main-navigation ul ul li:nth-child(4),
    .nav-mobile.active .main-navigation .sub-menu li:nth-child(4) {
        animation-delay: 0.25s;
    }
    
    .nav-mobile.active .header-cta {
        animation: slideInFromRight 0.4s ease 0.3s forwards;
        opacity: 0;
    }
    
    @keyframes slideInFromRight {
        from {
            opacity: 0;
            transform: translateX(30px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    /* --- GRILLES TABLET --- */
    .situations-grid { grid-template-columns: repeat(2, 1fr); }
    .expertises-grid { grid-template-columns: repeat(2, 1fr); }
    .cards-grid-3 { grid-template-columns: repeat(2, 1fr); }
    .cards-grid-2 { grid-template-columns: repeat(2, 1fr); }
    .stats-layout { grid-template-columns: 1fr; gap: 40px; }
    .stats-layout-seo { grid-template-columns: 1fr; }
    .stats-image { order: 2; }
    .stats-cards { order: 1; flex-direction: row; }
    .pourquoi-container { grid-template-columns: 1fr; gap: 40px; }
    .offer-columns { grid-template-columns: 1fr; }
    .for-who-layout { flex-direction: column; }
    .comparison-grid { flex-direction: column; }
    .comparison-table { font-size: 14px; }

    /* Contact */
    .contact-layout { 
        grid-template-columns: 1fr !important; 
        gap: 32px;
    }
    .contact-layout > .wp-block-column {
        flex-basis: 100% !important;
        width: 100% !important;
    }
}

/* ============================================================
   MOBILE (max-width: 768px)
   ============================================================ */
@media (max-width: 768px) {
    :root {
        --font-size-hero: 42px;
        --font-size-hero-sub: 22px;
        --font-size-h1: 36px;
        --font-size-h2: 28px;
        --spacing-section: 70px;
    }

    /* FORMULAIRE MOBILE - déjà géré en fin de fichier */

    .contact-form-wrapper .nf-row,
    .contact-form-fullwidth .nf-row {
        grid-template-columns: 1fr !important;
    }

    /* Cartes radio/checkbox pleine largeur */
    .contact-form-wrapper .listradio-wrap ul,
    .contact-form-wrapper .listcheckbox-wrap ul,
    .contact-form-fullwidth .listradio-wrap ul,
    .contact-form-fullwidth .listcheckbox-wrap ul {
        max-width: 100% !important;
    }

    /* Header encore plus compact */
    .header-container {
        padding: 10px 16px;
    }
    
    .site-branding .custom-logo {
        height: 34px;
    }
    
    .mobile-menu-toggle {
        width: 28px;
        height: 28px;
    }
    
    /* Menu fullscreen mobile - ajustements */
    .nav-mobile {
        padding: 90px 28px 50px !important;
    }
    
    .nav-mobile .main-navigation > ul > li > a {
        font-size: 11px !important;
        padding-bottom: 16px !important;
    }
    
    .nav-mobile .main-navigation ul ul a,
    .nav-mobile .main-navigation .sub-menu a {
        font-size: 20px !important;
        padding: 16px 0 !important;
    }
    
    .nav-mobile .header-cta {
        margin-top: 40px !important;
    }
    
    .nav-mobile .btn-devis {
        font-size: 15px !important;
        padding: 14px 36px !important;
    }

    /* Hero */
    .hero-section,
    .service-hero-section { padding: 140px 24px 80px; min-height: auto; }
    .contact-hero-section { padding: 140px 24px 60px; }
    .hero-buttons,
    .service-hero-actions { flex-direction: column; }
    .hero-buttons .wp-block-button__link,
    .service-hero-actions .wp-block-button__link { width: 100%; justify-content: center; }

    /* Grilles */
    .situations-grid,
    .expertises-grid,
    .cards-grid-3,
    .cards-grid-2 { grid-template-columns: 1fr; }
    
    .stats-cards { flex-direction: column; }
    .stats-cards-col { flex-direction: column; }


    /* Timeline */
    .timeline-section { padding: 70px 24px; }
    .timeline-main-title { font-size: 28px; }
    .timeline-steps { padding-left: 80px; }
    .timeline-steps::before { left: 24px; }
    .timeline-number { width: 48px; height: 48px; font-size: 20px; left: -80px; }
    .timeline-card { padding: 24px; }
    .timeline-card h3 { font-size: 18px; }

    /* Offers */
    .offer-summary { flex-direction: column; align-items: flex-start; gap: 16px; }
    .offer-price-tag { align-self: flex-start; }
    .offer-columns { grid-template-columns: 1fr; gap: 24px; }

    /* Stats */
    .stat-number { font-size: 42px; }

    /* Contact */
    .contact-hero-section { 
        padding: 140px 24px 70px !important; 
    }
    .section-contact { 
        padding: 50px 20px 70px !important; 
    }
    .contact-layout {
        padding: 0 !important;
    }
    .contact-form-wrapper { 
        padding: 28px 24px !important; 
    }
    .contact-form-wrapper .nf-row {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    .contact-form-wrapper .listradio-wrap ul {
        flex-direction: column !important;
    }
    .contact-form-wrapper input[type="submit"] {
        width: 100% !important;
    }
    .contact-info-card,
    .contact-reassurance-card { 
        padding: 24px !important; 
    }

    /* Containers */
    .container-narrow,
    .container-standard,
    .container-wide { padding: 0 24px; }

    /* Footer */
    .footer-inner { grid-template-columns: 1fr; gap: 40px; }
    .footer-main { padding: 50px 24px 40px; }
    .footer-bottom-inner { 
        flex-direction: column; 
        text-align: center; 
        gap: 12px;
    }

    /* CTA */
    .cta-title { font-size: 32px; }
    .cta-pills { flex-direction: column; }
    
    /* WordPress Blocks */
    .wp-block-columns {
        flex-direction: column !important;
    }
    
    .wp-block-column {
        flex-basis: 100% !important;
    }
}

/* ============================================================
   TRÈS PETIT ÉCRAN (max-width: 480px)
   ============================================================ */
@media (max-width: 480px) {
    :root {
        --font-size-hero: 34px;
        --font-size-hero-sub: 20px;
        --font-size-h1: 30px;
        --font-size-h2: 24px;
    }

    .site-header {
        top: 8px;
        width: 94%;
    }
    
    .header-container {
        padding: 8px 14px;
    }
    
    .site-branding .custom-logo {
        height: 30px;
    }
    
    /* Menu mobile très petit écran */
    .nav-mobile {
        padding: 80px 24px 40px !important;
    }
    
    .nav-mobile .main-navigation > ul > li > a {
        font-size: 11px !important;
        padding-bottom: 14px !important;
    }
    
    .nav-mobile .main-navigation ul ul a,
    .nav-mobile .main-navigation .sub-menu a {
        font-size: 18px !important;
        padding: 14px 0 !important;
    }
    
    .nav-mobile .btn-devis {
        font-size: 14px !important;
        padding: 12px 32px !important;
        width: 100% !important;
    }

    .hero-section,
    .service-hero-section { padding: 120px 20px 60px; }

    .card { padding: 28px 24px; }
    .situation-card { padding: 40px 20px 28px; min-height: 160px; }

    .contact-form { padding: 32px 24px; }
    
    /* Comparison table mobile */
    .comparison-table th,
    .comparison-table td { padding: 12px 10px; font-size: 13px; }
    .comparison-table th .table-subtitle { font-size: 11px; }
}

/* ============================================================
   PATCH 1A - CORRECTION BANDE BLANCHE
   ============================================================ */
html, body {
    margin: 0 !important;
    padding: 0 !important;
}

body {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.site-header {
    margin-top: 0 !important;
}

.hero-section,
.service-hero-section,
.contact-hero-section {
    margin-top: 0 !important;
    padding-top: 160px !important;
}

.wp-site-blocks {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.page {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

article {
    margin-top: 0 !important;
}

@media (max-width: 768px) {
    .hero-section,
    .service-hero-section,
    .contact-hero-section {
        padding-top: 140px !important;
    }
}

@media (max-width: 480px) {
    .hero-section,
    .service-hero-section {
        padding-top: 120px !important;
    }
}

/* ============================================================
   PAGES LÉGALES - CSS AVEC BANDE MOYENNE (2X)
   REMPLACER le CSS précédent par celui-ci
   ============================================================ */

/* Bande hero pour pages légales - Taille moyenne */
.legal-hero-section {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 140px 40px 80px; /* Double de l'espace */
    background: linear-gradient(135deg, rgba(139,92,246,0.05) 0%, rgba(99,102,241,0.03) 100%);
    position: relative;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-top: 0 !important;
}

.legal-hero-container {
    max-width: 900px;
    position: relative;
    z-index: var(--z-content);
    margin: 0 auto;
}

.legal-hero-title {
    font-size: 42px;
    font-weight: var(--font-weight-bold);
    color: var(--color-slate-900);
    margin: 0;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.legal-hero-subtitle {
    font-size: 18px;
    font-weight: var(--font-weight-regular);
    color: var(--text-muted);
    margin: 12px 0 0 0;
    line-height: var(--line-height-normal);
}

/* Contenu principal des pages légales */
.legal-content-section {
    padding: 60px 40px 100px;
    background: var(--color-white);
}

.legal-content-container {
    max-width: 800px;
    margin: 0 auto;
}

/* Styles typographiques pour le contenu légal */
.legal-content-container h2 {
    font-size: 28px;
    font-weight: var(--font-weight-bold);
    color: var(--color-slate-900);
    margin: 48px 0 20px 0;
    padding-top: 32px;
    line-height: var(--line-height-tight);
}

.legal-content-container h2:first-child {
    margin-top: 0;
    padding-top: 0;
}

.legal-content-container h3 {
    font-size: 22px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-slate-900);
    margin: 32px 0 16px 0;
    line-height: var(--line-height-tight);
}

.legal-content-container p {
    font-size: var(--font-size-body);
    color: var(--text-dark);
    line-height: var(--line-height-relaxed);
    margin: 0 0 16px 0;
}

.legal-content-container p strong {
    color: var(--text-highlight);
    font-weight: var(--font-weight-semibold);
}

/* Listes dans le contenu légal */
.legal-content-container ul,
.legal-content-container ol {
    margin: 0 0 24px 0;
    padding-left: 24px;
}

.legal-content-container li {
    font-size: var(--font-size-body);
    color: var(--text-dark);
    line-height: var(--line-height-relaxed);
    margin-bottom: 8px;
}

.legal-content-container li strong {
    color: var(--text-highlight);
    font-weight: var(--font-weight-semibold);
}

/* Séparateurs */
.legal-content-container hr,
.legal-content-container .wp-block-separator {
    border: none;
    border-top: 1px solid var(--color-slate-200);
    margin: 40px 0;
    opacity: 1;
}

/* Liens dans le contenu légal */
.legal-content-container a {
    color: var(--color-violet);
    text-decoration: none;
    transition: color var(--transition-base);
    font-weight: var(--font-weight-medium);
}

.legal-content-container a:hover {
    color: var(--color-violet-dark);
    text-decoration: underline;
}

/* Section d'information importante */
.legal-info-box {
    background: linear-gradient(135deg, rgba(139,92,246,0.08) 0%, rgba(139,92,246,0.05) 100%);
    border-left: 4px solid var(--color-violet);
    padding: 24px 28px;
    margin: 32px 0;
    border-radius: var(--radius-md);
}

.legal-info-box p {
    margin-bottom: 0;
}

/* Date de dernière mise à jour */
.legal-updated {
    font-size: var(--font-size-small);
    color: var(--text-muted);
    font-style: italic;
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid var(--color-slate-200);
}

/* S'assurer que la page légale n'a pas de margin-top */
.legal-page {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.legal-page article {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* RESPONSIVE - MOBILE */
@media (max-width: 768px) {
    .legal-hero-section {
        padding: 120px 24px 60px; /* Ajusté pour mobile */
    }
    
    .legal-hero-title {
        font-size: 32px;
    }
    
    .legal-hero-subtitle {
        font-size: 16px;
    }
    
    .legal-content-section {
        padding: 50px 24px 80px;
    }
    
    .legal-content-container h2 {
        font-size: 24px;
        margin: 40px 0 16px 0;
        padding-top: 24px;
    }
    
    .legal-content-container h3 {
        font-size: 20px;
        margin: 24px 0 12px 0;
    }
    
    .legal-content-container p,
    .legal-content-container li {
        font-size: 15px;
    }
    
    .legal-content-container hr,
    .legal-content-container .wp-block-separator {
        margin: 32px 0;
    }
    
    .legal-info-box {
        padding: 20px 20px;
        margin: 24px 0;
    }
}

@media (max-width: 480px) {
    .legal-hero-section {
        padding: 100px 20px 50px; /* Ajusté pour petit mobile */
    }
    
    .legal-hero-title {
        font-size: 28px;
    }
    
    .legal-content-section {
        padding: 40px 20px 70px;
    }
    
    .legal-content-container h2 {
        font-size: 22px;
    }
    
    .legal-content-container h3 {
        font-size: 18px;
    }
}

/* ============================================================
   CORRECTIF PAGE CONTACT / DEVIS
   À ajouter à la fin de ton fichier style.css
   ============================================================ */

/* ===========================================
   HERO CONTACT - Passe sous le header
   =========================================== */
.contact-hero-section {
    min-height: 50vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 180px 40px 80px !important;
    background: var(--gradient-primary) !important;
    position: relative !important;
    overflow: hidden !important;
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-top: 0 !important;
}

/* Bulles décoratives */
.contact-hero-section::before,
.contact-hero-section::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(60px);
}

.contact-hero-section::before {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);
    top: -200px;
    right: -150px;
}

.contact-hero-section::after {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(255,255,255,0.06) 0%, transparent 70%);
    bottom: -150px;
    left: -150px;
}

/* Contenu hero */
.contact-hero-section .hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    margin: 0 auto;
}

/* Titre hero */
.contact-hero-section .hero-title {
    font-size: clamp(36px, 5vw, 56px) !important;
    font-weight: 700 !important;
    color: var(--color-white) !important;
    margin: 0 0 24px 0 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.02em !important;
    animation: fade-up 0.6s ease 0.2s forwards !important;
    opacity: 0;
}

/* Description hero */
.contact-hero-section .hero-description {
    font-size: clamp(16px, 2vw, 19px) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    max-width: 650px !important;
    margin: 0 auto !important;
    line-height: 1.7 !important;
    animation: fade-up 0.6s ease 0.4s forwards !important;
    opacity: 0;
}

/* ===========================================
   SECTION FORMULAIRE - Pleine largeur
   =========================================== */
.section-contact-form {
    padding: 80px 40px !important;
    background: var(--color-slate-50) !important;
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
}

.section-contact-form .container-standard {
    max-width: 800px !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

/* Formulaire pleine largeur */
.contact-form-fullwidth {
    background: var(--color-white) !important;
    border-radius: 24px !important;
    padding: 48px !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08) !important;
    width: 100% !important;
    max-width: 100% !important;
}

.contact-form-fullwidth .contact-form-title {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: var(--color-slate-900) !important;
    margin: 0 0 12px 0 !important;
    text-align: center !important;
}

.contact-form-fullwidth .contact-form-intro {
    font-size: 16px !important;
    color: var(--text-muted) !important;
    margin: 0 0 32px 0 !important;
    text-align: center !important;
    line-height: 1.6 !important;
}

/* ===========================================
   SECTION INFOS - 2 colonnes
   =========================================== */
.section-contact-info {
    padding: 0 40px 80px !important;
    background: var(--color-slate-50) !important;
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
}

.section-contact-info .container-standard {
    max-width: 900px !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

/* Grille 2 colonnes */
.contact-info-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 32px !important;
}

.contact-info-grid .wp-block-column {
    flex-basis: auto !important;
    width: 100% !important;
}

/* Cartes infos */
.section-contact-info .contact-info-card,
.section-contact-info .contact-reassurance-card {
    background: var(--color-white) !important;
    border-radius: 20px !important;
    padding: 32px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
    height: 100% !important;
}

.section-contact-info .contact-info-title {
    font-size: 20px !important;
    font-weight: 600 !important;
    color: var(--color-slate-900) !important;
    margin: 0 0 24px 0 !important;
}

/* ===========================================
   RESPONSIVE
   =========================================== */
@media (max-width: 768px) {
    .contact-hero-section {
        padding: 140px 24px 60px !important;
        min-height: auto !important;
    }
    
    .contact-hero-section .hero-title {
        font-size: 32px !important;
    }
    
    .contact-hero-section .hero-description {
        font-size: 16px !important;
    }
    
    .section-contact-form {
        padding: 50px 20px !important;
    }
    
    .contact-form-fullwidth {
        padding: 32px 24px !important;
        border-radius: 16px !important;
    }
    
    .contact-form-fullwidth .contact-form-title {
        font-size: 24px !important;
    }
    
    .section-contact-info {
        padding: 0 20px 60px !important;
    }
    
    .contact-info-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
    
    .section-contact-info .contact-info-card,
    .section-contact-info .contact-reassurance-card {
        padding: 24px !important;
    }
}

@media (max-width: 480px) {
    .contact-hero-section {
        padding: 120px 20px 50px !important;
    }
    
    .contact-hero-section .hero-title {
        font-size: 28px !important;
    }
    
    .section-contact-form {
        padding: 40px 16px !important;
    }
    
    .contact-form-fullwidth {
        padding: 24px 20px !important;
    }
    
    .section-contact-info {
        padding: 0 16px 50px !important;
    }
}
/* ============================================================
   CORRECTIF PAGE CONTACT / DEVIS - PATCH CLEAN
   À ajouter à la fin de ton fichier style.css
   ============================================================ */

/* Empêche la micro barre de scroll due au 100vw */
html, body { overflow-x: hidden; }

/* Variable d’offset si le header est fixe (ajuste si besoin) */
:root{
  --contact-header-offset: 100px; /* hauteur du header sticky */
}

/* ===========================================
   HERO CONTACT - Pleine largeur + sous header
   =========================================== */
.contact-hero-section{
  min-height: 50vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;

  /* Pleine largeur “centrée” */
  width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;

  /* Fond + layout */
  background: var(--gradient-primary) !important;
  position: relative !important;
  overflow: hidden !important;

  /* Espace pour passer sous le header */
  padding: calc(var(--contact-header-offset) + 80px) 40px 80px !important;
  margin-top: 0 !important;
}

/* Bulles décoratives */
.contact-hero-section::before,
.contact-hero-section::after{
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(60px);
}

.contact-hero-section::before{
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);
  top: -200px;
  right: -150px;
}

.contact-hero-section::after{
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(255,255,255,0.06) 0%, transparent 70%);
  bottom: -150px;
  left: -150px;
}

/* Contenu hero (plus robuste selon templates WP) */
.contact-hero-section .hero-content,
.contact-hero-section .service-hero-container,
.contact-hero-section > .wp-block-group{
  position: relative;
  z-index: 2;
  max-width: 800px;
  margin: 0 auto;
  padding: 0 !important;
}

/* Titre hero */
.contact-hero-section .hero-title,
.contact-hero-section .service-hero-title,
.contact-hero-section h1{
  font-size: clamp(36px, 5vw, 56px) !important;
  font-weight: 700 !important;
  color: var(--color-white) !important;
  margin: 0 0 24px 0 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em !important;
  animation: fade-up 0.6s ease 0.2s forwards !important;
  opacity: 0;
}

/* Description hero (on évite de cibler TOUS les p du hero) */
.contact-hero-section .hero-description,
.contact-hero-section .service-hero-description{
  font-size: clamp(16px, 2vw, 19px) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  max-width: 650px !important;
  margin: 0 auto !important;
  line-height: 1.7 !important;
  animation: fade-up 0.6s ease 0.4s forwards !important;
  opacity: 0;
}

/* ===========================================
   SECTION FORMULAIRE - Pleine largeur
   =========================================== */
.section-contact-form{
  padding: 80px 40px !important;
  background: var(--color-slate-50) !important;
  width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
}

.section-contact-form .container-standard{
  max-width: 800px !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

/* Formulaire */
.contact-form-fullwidth{
  background: var(--color-white) !important;
  border-radius: 24px !important;
  padding: 48px !important;
  box-shadow: 0 4px 30px rgba(0,0,0,0.08) !important;
  width: 100% !important;
  max-width: 100% !important;
}

.contact-form-fullwidth .contact-form-title{
  font-size: 28px !important;
  font-weight: 700 !important;
  color: var(--color-slate-900) !important;
  margin: 0 0 12px 0 !important;
  text-align: center !important;
}

.contact-form-fullwidth .contact-form-intro{
  font-size: 16px !important;
  color: var(--text-muted) !important;
  margin: 0 0 32px 0 !important;
  text-align: center !important;
  line-height: 1.6 !important;
}

/* ===========================================
   SECTION INFOS - 2 colonnes alignées
   =========================================== */
.section-contact-info{
  padding: 0 40px 80px !important;
  background: var(--color-slate-50) !important;
  width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
}

.section-contact-info .container-standard{
  max-width: 800px !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

.contact-info-grid{
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 24px !important;
  width: 100% !important;
}

.contact-info-grid .wp-block-column{
  flex-basis: auto !important;
  width: 100% !important;
  margin: 0 !important;
}

.section-contact-info .contact-info-card,
.section-contact-info .contact-reassurance-card{
  background: var(--color-white) !important;
  border-radius: 20px !important;
  padding: 32px !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06) !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

.section-contact-info .contact-info-title{
  font-size: 20px !important;
  font-weight: 600 !important;
  color: var(--color-slate-900) !important;
  margin: 0 0 24px 0 !important;
}

/* ===========================================
   ANCIEN LAYOUT (fallback si template non migré)
   =========================================== */
.section-contact{
  padding: 80px 40px 80px !important;
  background: var(--color-slate-50) !important;
  width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
}

.section-contact .contact-layout{
  display: flex !important;
  flex-direction: column !important;
  gap: 40px !important;
  max-width: 800px !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

.section-contact .contact-layout .contact-form-col,
.section-contact .contact-layout .contact-info-col{
  flex-basis: 100% !important;
  width: 100% !important;
  max-width: 100% !important;
}

.section-contact .contact-layout .contact-info-col{
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 24px !important;
}

.section-contact .contact-layout .contact-info-col > .wp-block-group{
  margin: 0 !important;
}

/* ===========================================
   RESPONSIVE
   =========================================== */
@media (max-width: 768px){
  :root{ --contact-header-offset: 90px; }

  .contact-hero-section{
    padding: calc(var(--contact-header-offset) + 60px) 24px 60px !important;
    min-height: auto !important;
  }

  .contact-hero-section .hero-title,
  .contact-hero-section .service-hero-title,
  .contact-hero-section h1{
    font-size: 32px !important;
  }

  .contact-hero-section .hero-description,
  .contact-hero-section .service-hero-description{
    font-size: 16px !important;
  }

  .section-contact-form{ padding: 50px 20px !important; }

  .contact-form-fullwidth{
    padding: 32px 24px !important;
    border-radius: 16px !important;
  }

  .contact-form-fullwidth .contact-form-title{ font-size: 24px !important; }

  .section-contact-info{ padding: 0 20px 60px !important; }

  .contact-info-grid{
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .section-contact-info .contact-info-card,
  .section-contact-info .contact-reassurance-card{ padding: 24px !important; }

  .section-contact .contact-layout .contact-info-col{
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 480px){
  :root{ --contact-header-offset: 80px; }

  .contact-hero-section{
    padding: calc(var(--contact-header-offset) + 50px) 20px 50px !important;
  }

  .contact-hero-section .hero-title,
  .contact-hero-section .service-hero-title,
  .contact-hero-section h1{
    font-size: 28px !important;
  }

  .section-contact-form{ padding: 40px 16px !important; }

  .contact-form-fullwidth{ padding: 24px 20px !important; }

  .section-contact-info{ padding: 0 16px 50px !important; }

/* ============================================================
   FORCE ALIGN LEFT - INFOS CONTACT (WP blocks + fallback)
   ============================================================ */

/* Nouveau template */
.section-contact-info .contact-info-grid,
.section-contact-info .contact-info-card,
.section-contact-info .contact-reassurance-card {
  text-align: left !important;
}

/* Annule les centrages WordPress fréquents à l'intérieur */
.section-contact-info .contact-info-card .has-text-align-center,
.section-contact-info .contact-reassurance-card .has-text-align-center,
.section-contact-info .contact-info-card [style*="text-align:center"],
.section-contact-info .contact-reassurance-card [style*="text-align:center"] {
  text-align: left !important;
}

/* Force sur les éléments courants */
.section-contact-info .contact-info-card p,
.section-contact-info .contact-info-card h1,
.section-contact-info .contact-info-card h2,
.section-contact-info .contact-info-card h3,
.section-contact-info .contact-info-card h4,
.section-contact-info .contact-info-card ul,
.section-contact-info .contact-info-card ol,
.section-contact-info .contact-info-card li,
.section-contact-info .contact-reassurance-card p,
.section-contact-info .contact-reassurance-card h1,
.section-contact-info .contact-reassurance-card h2,
.section-contact-info .contact-reassurance-card h3,
.section-contact-info .contact-reassurance-card h4,
.section-contact-info .contact-reassurance-card ul,
.section-contact-info .contact-reassurance-card ol,
.section-contact-info .contact-reassurance-card li {
  text-align: left !important;
}

/* Fallback ancien layout */
.section-contact .contact-layout .contact-info-col,
.section-contact .contact-layout .contact-info-col > * {
  text-align: left !important;
}
.section-contact .contact-layout .contact-info-col .has-text-align-center,
.section-contact .contact-layout .contact-info-col [style*="text-align:center"] {
  text-align: left !important;
}
}

/* ============================================================
   RESPONSIVE FORMULAIRE CONTACT - MOBILE OPTIMISÉ
   ============================================================ */

/* Tablette et mobile */
@media (max-width: 768px) {
    /* Passer en 1 colonne */
    .contact-form-wrapper .nf-form-content,
    .contact-form-fullwidth .nf-form-content {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    
    /* Tous les champs sur 1 colonne (pleine largeur) */
    .contact-form-wrapper .nf-field-container,
    .contact-form-fullwidth .nf-field-container,
    #nf-field-26-container,
    #nf-field-17-container,
    #nf-field-19-container,
    #nf-field-6-container {
        grid-column: span 1 !important;
    }
    
    /* Ajuster les padding du formulaire */
    .contact-form-fullwidth {
        padding: 32px 20px !important;
    }
    
    /* Champs plus grands pour tactile - évite le zoom iOS */
    .contact-form-wrapper .nf-field input[type="text"],
    .contact-form-wrapper .nf-field input[type="email"],
    .contact-form-wrapper .nf-field input[type="tel"],
    .contact-form-wrapper .nf-field textarea,
    .contact-form-fullwidth .nf-field input[type="text"],
    .contact-form-fullwidth .nf-field input[type="email"],
    .contact-form-fullwidth .nf-field input[type="tel"],
    .contact-form-fullwidth .nf-field textarea {
        padding: 16px !important;
        font-size: 16px !important;
    }
    
    /* Radio/Checkbox - taille tactile */
    .contact-form-wrapper .listradio-wrap input[type="radio"],
    .contact-form-wrapper .listcheckbox-wrap input[type="checkbox"],
    .contact-form-fullwidth .listradio-wrap input[type="radio"],
    .contact-form-fullwidth .listcheckbox-wrap input[type="checkbox"] {
        width: 22px !important;
        height: 22px !important;
        min-width: 22px !important;
    }
    
    .contact-form-wrapper .listradio-wrap ul li label,
    .contact-form-wrapper .listcheckbox-wrap ul li label,
    .contact-form-fullwidth .listradio-wrap ul li label,
    .contact-form-fullwidth .listcheckbox-wrap ul li label {
        font-size: 16px !important;
    }
    
    /* Bouton submit pleine largeur et centré sur mobile */
    .contact-form-wrapper .submit-container,
    .contact-form-fullwidth .submit-container,
    .contact-form-wrapper .nf-field-container.submit-container,
    .contact-form-fullwidth .nf-field-container.submit-container,
    .contact-form-wrapper .nf-field-container.submit-container .nf-field-element,
    .contact-form-fullwidth .nf-field-container.submit-container .nf-field-element {
        text-align: center !important;
        justify-content: center !important;
    }
    
    .contact-form-wrapper .nf-field-element input[type="submit"],
    .contact-form-wrapper .nf-field-element button[type="submit"],
    .contact-form-fullwidth .nf-field-element input[type="submit"],
    .contact-form-fullwidth .nf-field-element button[type="submit"] {
        width: 100% !important;
        padding: 18px 32px !important;
    }
}

/* Mobile petit écran */
@media (max-width: 480px) {
    .contact-form-fullwidth {
        padding: 24px 16px !important;
        border-radius: 16px !important;
    }
    
    .contact-form-fullwidth .contact-form-title {
        font-size: 22px !important;
    }
    
    .contact-form-fullwidth .contact-form-intro {
        font-size: 15px !important;
    }
    
    /* Labels plus lisibles */
    .contact-form-wrapper .nf-field-label label,
    .contact-form-fullwidth .nf-field-label label {
        font-size: 15px !important;
        margin-bottom: 8px !important;
    }
    
    /* Textarea adapté */
    .contact-form-wrapper .nf-field textarea,
    .contact-form-fullwidth .nf-field textarea {
        min-height: 120px !important;
    }
}
/* ============================================================
   CORRECTIONS MOBILE — HOME PAGE
   ============================================================ */

@media (max-width: 768px) {
    
    /* --- Marges plus étroites sur la home --- */
    .home .section-situations,
    .home .section-strategie,
    .home .section-stats,
    .home .section-role,
    .home .section-offers {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    
    .home .container-standard,
    .home .container-narrow {
        padding: 0 16px !important;
    }

    /* --- TYPOGRAPHIE H2 COHÉRENTE SUR MOBILE --- */
    h2,
    .section-title,
    .section-situations .section-title,
    .section-strategie .section-title,
    .section-stats .section-title,
    .section-role .section-title,
    .section-offers .section-title,
    .section-faq .section-title,
    .section-why .section-title,
    .section-seo .section-title,
    .section-process .section-title,
    .section-tools .section-title,
    .section-comparison .section-title,
    .timeline-main-title,
    .role-highlight .role-title {
        font-size: 30px !important;
        line-height: 1.25 !important;
    }

    /* CTA Final */
    .section-cta-final .cta-title,
    .cta-title {
        font-size: 28px !important;
        line-height: 1.25 !important;
    }

    /* Stats number */
    .stat-number {
        font-size: 36px !important;
    }
}

@media (max-width: 480px) {
    
    .home .section-situations,
    .home .section-strategie,
    .home .section-stats,
    .home .section-role,
    .home .section-offers {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    
    .home .container-standard,
    .home .container-narrow {
        padding: 0 12px !important;
    }

    h2,
    .section-title,
    .section-situations .section-title,
    .section-strategie .section-title,
    .section-stats .section-title,
    .section-role .section-title,
    .section-offers .section-title,
    .section-faq .section-title,
    .section-why .section-title,
    .section-seo .section-title,
    .section-process .section-title,
    .section-tools .section-title,
    .section-comparison .section-title,
    .timeline-main-title,
    .role-highlight .role-title {
        font-size: 26px !important;
        line-height: 1.3 !important;
    }

    .section-cta-final .cta-title,
    .cta-title {
        font-size: 24px !important;
    }
    
    .section-cta-final {
        padding: 50px 16px !important;
    }

    .stat-number {
        font-size: 32px !important;
    }
}

/* ============================================================
   PAGE 404
   ============================================================ */

.page-404 {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-primary);
    padding: 0 40px;
    position: relative;
    overflow: hidden;
}

.container-404 {
    text-align: center;
    max-width: 600px;
    position: relative;
    z-index: 2;
}

.decoration-404 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.decoration-404 .circle {
    position: absolute;
    border-radius: 50%;
    opacity: 0.1;
    background: var(--color-white);
}

.decoration-404 .circle-1 {
    width: 400px;
    height: 400px;
    top: -100px;
    right: -150px;
    animation: float404 8s ease-in-out infinite;
}

.decoration-404 .circle-2 {
    width: 250px;
    height: 250px;
    bottom: -50px;
    left: -100px;
    animation: float404 6s ease-in-out infinite reverse;
}

.decoration-404 .circle-3 {
    width: 150px;
    height: 150px;
    top: 20%;
    left: 10%;
    animation: float404 7s ease-in-out infinite 1s;
}

@keyframes float404 {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-20px) scale(1.05); }
}

.error-code {
    display: block;
    font-size: 180px;
    font-weight: 800;
    line-height: 1;
    color: var(--color-white);
    opacity: 0.15;
    margin-bottom: -60px;
    letter-spacing: -10px;
    user-select: none;
}

.content-404 {
    position: relative;
    z-index: 2;
}

.content-404 h1 {
    font-size: 42px;
    font-weight: 700;
    color: var(--color-white);
    margin-bottom: 20px;
    line-height: 1.2;
}

.content-404 p {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.7;
    margin-bottom: 40px;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}

.actions-404 {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-primary-404 {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 18px 44px;
    background: var(--color-white);
    color: var(--color-violet);
    font-size: 18px;
    font-weight: 600;
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.btn-primary-404:hover {
    background: rgba(255, 255, 255, 0.95);
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
}

.btn-primary-404 svg {
    flex-shrink: 0;
    stroke: var(--color-violet);
}

.btn-secondary-404 {
    display: inline-flex;
    align-items: center;
    padding: 18px 44px;
    background: transparent;
    color: var(--color-white);
    font-size: 18px;
    font-weight: 600;
    border-radius: var(--radius-md);
    border: 2px solid rgba(255, 255, 255, 0.3);
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-secondary-404:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-3px);
}

@media (max-width: 768px) {
    .page-404 { padding: 0 20px; }
    .error-code { font-size: 120px; margin-bottom: -40px; letter-spacing: -5px; }
    .content-404 h1 { font-size: 28px; }
    .content-404 p { font-size: 16px; margin-bottom: 30px; }
    .actions-404 { flex-direction: column; align-items: center; }
    .btn-primary-404, .btn-secondary-404 { 
        width: 100%; max-width: 280px; justify-content: center; 
        padding: 16px 32px; font-size: 16px; 
    }
    .decoration-404 .circle-1 { width: 200px; height: 200px; }
    .decoration-404 .circle-2 { width: 150px; height: 150px; }
    .decoration-404 .circle-3 { display: none; }
}

@media (max-width: 480px) {
    .error-code { font-size: 90px; margin-bottom: -30px; }
    .content-404 h1 { font-size: 24px; }
}