/* ================================================================
   REVALUX — Redesign 2026
   Style: Blanc / Vert — Inspiré BitRaser
   Hero slider conservé intact
   ================================================================ */

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

:root {
    /* ── Vert principal (Eco) ── */
    --green:        #10b981;
    --green-dark:   #059669;
    --green-darker: #047857;
    --green-50:     #ecfdf5;
    --green-100:    #d1fae5;
    --green-200:    #a7f3d0;
    --green-300:    #6ee7b7;

    /* ── Bleu secondaire (conservé pour certains éléments) ── */
    --primary:      #10b981;
    --primary-dark: #059669;
    --primary-50:   #ecfdf5;
    --primary-100:  #d1fae5;
    --primary-200:  #a7f3d0;
    --primary-300:  #6ee7b7;
    --primary-400:  #34d399;
    --primary-500:  #10b981;
    --primary-600:  #059669;
    --primary-700:  #047857;
    --primary-800:  #065f46;
    --primary-900:  #064e3b;

    /* ── Accent ── */
    --accent:       #10b981;
    --accent-dark:  #059669;
    --accent-50:    #ecfdf5;
    --accent-100:   #d1fae5;
    --accent-200:   #a7f3d0;
    --accent-600:   #059669;

    /* ── Gradient vert ── */
    --gradient:         linear-gradient(135deg, #059669, #10b981);
    --gradient-reverse: linear-gradient(135deg, #10b981, #059669);
    --gradient-hero:    linear-gradient(160deg, #020617 0%, #0f172a 30%, #0c1e3a 60%, #064e3b 100%);
    --gradient-subtle:  linear-gradient(135deg, rgba(16,185,129,0.06), rgba(5,150,105,0.04));

    /* ── Danger ── */
    --danger:       #ef4444;
    --danger-light: #fef2f2;
    --danger-dark:  #dc2626;

    /* ── Neutral ── */
    --dark:      #111827;
    --gray-900:  #111827;
    --gray-800:  #1f2937;
    --gray-700:  #374151;
    --gray-600:  #4b5563;
    --gray-500:  #6b7280;
    --gray-400:  #9ca3af;
    --gray-300:  #d1d5db;
    --gray-200:  #e5e7eb;
    --gray-100:  #f3f4f6;
    --gray-50:   #f9fafb;
    --white:     #ffffff;

    /* ── Couleurs Services ── */
    --purple:       #8b5cf6;
    --purple-light: #f5f3ff;
    --teal:         #14b8a6;
    --teal-light:   #f0fdfa;
    --orange:       #f97316;
    --orange-light: #fff7ed;
    --red:          #ef4444;
    --red-light:    #fef2f2;

    /* ── Shadows ── */
    --shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
    --shadow:    0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.05);
    --shadow-md: 0 10px 20px rgba(0,0,0,0.08), 0 4px 8px rgba(0,0,0,0.04);
    --shadow-lg: 0 20px 40px rgba(0,0,0,0.10), 0 8px 16px rgba(0,0,0,0.06);
    --shadow-xl: 0 32px 64px rgba(0,0,0,0.12), 0 12px 24px rgba(0,0,0,0.06);
    --shadow-glow-green: 0 0 24px rgba(16,185,129,0.18);

    /* ── Radius ── */
    --radius-sm: 6px;
    --radius:    10px;
    --radius-lg: 14px;
    --radius-xl: 18px;
    --radius-2xl:24px;
    --radius-full: 9999px;

    /* ── Transitions ── */
    --ease:            cubic-bezier(0.4, 0, 0.2, 1);
    --transition:      all 0.25s var(--ease);
    --transition-fast: all 0.15s var(--ease);
    --transition-slow: all 0.4s var(--ease);
    --ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ── Layout ── */
    --nav-height:      80px;
    --container-max:   1200px;
    --section-spacing: 100px;
}

html { scroll-behavior: smooth; font-size: 16px; -webkit-font-smoothing: antialiased; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--gray-600);
    line-height: 1.7;
    background: var(--white);
    overflow-x: hidden;
}

h1,h2,h3,h4,h5,h6 {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    line-height: 1.2;
    color: var(--dark);
}

.container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
a { text-decoration: none; color: inherit; transition: var(--transition); }
ul { list-style: none; }
img { max-width: 100%; display: block; }
::selection { background: var(--green-100); color: var(--green-darker); }
.required { color: var(--danger); }

/* ========== TOP BAR ========== */
.topbar {
    background: var(--gray-900);
    color: rgba(255,255,255,0.6);
    font-size: 0.78rem;
    padding: 7px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.topbar-left, .topbar-right { display: flex; align-items: center; gap: 20px; }
.topbar a { color: rgba(255,255,255,0.55); transition: color 0.2s; }
.topbar a:hover { color: var(--green); }
.topbar i { color: var(--green); margin-right: 5px; font-size: 0.72rem; }
.topbar-badge {
    background: var(--green);
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 20px;
    letter-spacing: 0.2px;
}

/* ========== BUTTONS ========== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 24px;
    border-radius: var(--radius);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    border: 1.5px solid transparent;
    transition: var(--transition);
    font-family: inherit;
    line-height: 1.4;
    white-space: nowrap;
}
.btn-lg  { padding: 14px 32px; font-size: 1rem; border-radius: var(--radius-lg); }
.btn-sm  { padding: 7px 16px; font-size: 0.82rem; }
.btn-full { width: 100%; }

.btn-primary {
    background: var(--green);
    color: var(--white);
    border-color: var(--green);
}
.btn-primary:hover {
    background: var(--green-dark);
    border-color: var(--green-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(16,185,129,0.3);
}

.btn-accent {
    background: var(--green);
    color: var(--white);
    border: none;
    padding: 13px 28px;
}
.btn-accent:hover {
    background: var(--green-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(16,185,129,0.3);
}
.btn-accent.btn-lg { padding: 16px 36px; }

.btn-outline {
    background: transparent;
    color: var(--gray-700);
    border-color: var(--gray-300);
}
.btn-outline:hover { border-color: var(--green); color: var(--green); }

.btn-glass {
    background: rgba(255,255,255,0.12);
    color: var(--white);
    border: 1px solid rgba(255,255,255,0.22);
    backdrop-filter: blur(10px);
}
.btn-glass:hover { background: rgba(255,255,255,0.2); border-color: rgba(255,255,255,0.35); transform: translateY(-1px); }

.btn-white { background: var(--white); color: var(--green-darker); border-color: var(--white); font-weight: 700; }
.btn-white:hover { background: var(--green-50); transform: translateY(-1px); box-shadow: var(--shadow-md); }

.btn-glass-white { background: rgba(255,255,255,0.15); color: var(--white); border: 1px solid rgba(255,255,255,0.3); }
.btn-glass-white:hover { background: rgba(255,255,255,0.25); }

.btn-nav {
    background: var(--green);
    color: var(--white);
    padding: 9px 20px;
    font-size: 0.85rem;
    border-radius: var(--radius);
    border: none;
}
.btn-nav:hover { background: var(--green-dark); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(16,185,129,0.3); }

.btn-outline-cookie { background: transparent; color: var(--gray-600); border: 1px solid var(--gray-300); }
.btn-outline-cookie:hover { border-color: var(--gray-500); color: var(--gray-800); }

.btn-outline-accent {
    background: transparent;
    color: var(--green-dark);
    border: 1.5px solid var(--green-300);
}
.btn-outline-accent:hover { background: var(--green-50); border-color: var(--green); }

/* ========== NAVBAR ========== */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(255,255,255,0.96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--gray-200);
    transition: var(--transition);
    height: var(--nav-height);
}
.navbar.scrolled {
    background: rgba(255,255,255,0.98) !important;
    backdrop-filter: blur(20px) !important;
    box-shadow: var(--shadow-md) !important;
    height: 68px !important;
}
.nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--nav-height);
    transition: var(--transition);
}
.navbar.scrolled .nav-container { height: 68px; }

.logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.logo-img { height: 70px; width: auto; object-fit: contain; display: block; }

.footer-logo-img {
    height: 80px;
    width: auto;
    object-fit: contain;
    filter: brightness(0) invert(1);
    display: block;
    margin-bottom: 8px;
}

img.lang-flag-img {
    width: 22px; height: 16px;
    object-fit: cover;
    border-radius: 2px;
    display: inline-block;
    vertical-align: middle;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

/* Nav Links */
.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-links > li > a {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 8px 13px;
    font-size: 0.86rem;
    font-weight: 500;
    color: var(--gray-700);
    border-radius: var(--radius-sm);
    transition: var(--transition-fast);
}
.nav-links > li > a:hover { background: var(--gray-100); color: var(--dark); }
.nav-links a.active { color: var(--green) !important; }
.nav-links a.active-nav { color: var(--green) !important; font-weight: 600; }
.nav-links > li > a i { font-size: 0.68rem; opacity: 0.55; }

/* Dropdown */
.dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    min-width: 220px;
    overflow: hidden;
    z-index: 100;
    animation: dropdownIn 0.18s var(--ease);
}
@keyframes dropdownIn {
    from { opacity: 0; transform: translateX(-50%) translateY(-6px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.has-dropdown { position: relative; }
.has-dropdown:hover .dropdown { display: block; }
.dropdown li a {
    display: block;
    padding: 10px 16px;
    font-size: 0.85rem;
    color: var(--gray-700);
    transition: var(--transition-fast);
    border-bottom: 1px solid var(--gray-100);
}
.dropdown li:last-child a { border-bottom: none; }
.dropdown li a:hover { background: var(--green-50); color: var(--green-darker); }

.nav-actions { display: flex; align-items: center; gap: 10px; }

/* Language Selector */
.lang-selector { position: relative; }
.lang-selector-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    background: var(--gray-100);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--gray-700);
    transition: var(--transition-fast);
}
.lang-selector-toggle:hover { border-color: var(--green); color: var(--green); }
.lang-chevron { transition: transform 0.2s; }
.lang-selector.open .lang-chevron { transform: rotate(180deg); }
.lang-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    box-shadow: var(--shadow-xl);
    min-width: 120px;
    overflow: hidden;
    z-index: 200;
}
.lang-selector.open .lang-dropdown { display: block; }
.lang-label { font-size: 0.82rem; font-weight: 600; }
.lang-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    cursor: pointer;
    transition: var(--transition-fast);
    font-size: 0.85rem;
    color: var(--gray-700);
    font-weight: 600;
}
.lang-option:hover { background: var(--green-50); color: var(--green-darker); }
.lang-option.active { background: var(--green-50); color: var(--green-darker); }
.lang-name { flex: 1; }
.lang-check { color: var(--green); opacity: 0; transition: opacity 0.2s; }
.lang-option.active .lang-check { opacity: 1; }

/* Mobile lang selector */
.lang-selector-mobile { display: none; padding: 16px 0 8px; border-top: 1px solid var(--gray-200); margin-top: 8px; }
.lang-mobile-title { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gray-500); padding: 0 16px 10px; }
.lang-mobile-list { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px; list-style: none; }
.lang-mobile-item {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 14px; border-radius: var(--radius-full);
    border: 1.5px solid var(--gray-200); background: var(--white);
    font-size: 0.82rem; font-weight: 600; color: var(--gray-600); cursor: pointer;
    transition: var(--transition-fast);
}
.lang-mobile-item:hover { border-color: var(--green); color: var(--green); background: var(--green-50); }
.lang-mobile-item.active { border-color: var(--green); color: var(--green); background: var(--green-50); }

/* Mobile Toggle */
.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; z-index: 1001; }
.nav-toggle span { width: 22px; height: 2px; background: var(--dark); border-radius: 2px; transition: var(--transition); }
.nav-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.active span:nth-child(2) { opacity: 0; }
.nav-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ========== HERO (CONSERVÉ INTACT) ========== */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding-top: var(--nav-height);
}
.hero-slider { position: absolute; inset: 0; z-index: 0; }
.hero-slide {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    opacity: 0; transform: scale(1);
    transition: opacity 1.2s ease, transform 6s ease;
    will-change: opacity, transform;
}
.hero-slide.active { opacity: 1; transform: scale(1.05); }
.hero-overlay {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(160deg, rgba(2,6,23,0.72) 0%, rgba(15,23,42,0.65) 30%, rgba(4,78,59,0.5) 70%, rgba(6,78,59,0.45) 100%);
}
.hero-content { position: relative; z-index: 2; color: var(--white); text-align: center; max-width: 920px; margin: 0 auto; padding: 80px 0 100px; }
.hero-badge {
    display: inline-flex; align-items: center; gap: 10px;
    background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15);
    padding: 10px 24px; border-radius: var(--radius-full);
    font-size: 0.88rem; margin-bottom: 36px;
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    color: rgba(255,255,255,0.9);
}
.hero-badge-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); animation: pulse 2s infinite; }
@keyframes pulse { 0%,100%{ opacity:1; transform:scale(1);} 50%{opacity:0.5;transform:scale(1.5);} }

.hero-phrases { position: relative; min-height: 220px; display: flex; align-items: center; justify-content: center; margin-bottom: 36px; }
.hero-phrase { position: absolute; width: 100%; font-size: 2.6rem; font-weight: 800; line-height: 1.25; letter-spacing: -0.3px; color: var(--white); opacity: 0; transform: translateY(20px); transition: opacity 0.8s ease, transform 0.8s ease; pointer-events: none; padding: 0 16px; }
.hero-phrase.active { opacity: 1; transform: translateY(0); pointer-events: auto; }

.hero-gradient-text {
    background: linear-gradient(135deg, #6ee7b7, #34d399, #6ee7b7);
    background-size: 200% auto;
    background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    animation: gradientShift 4s ease-in-out infinite;
}
@keyframes gradientShift { 0%,100%{background-position:0% center;} 50%{background-position:100% center;} }

.hero-subtitle { font-size: 1.1rem; color: rgba(255,255,255,0.6); max-width: 680px; margin: 0 auto 40px; line-height: 1.8; }
.hero-subtitle-improved { color: rgba(255,255,255,0.82); font-size: 1.1rem; font-weight: 400; line-height: 1.7; max-width: 580px; margin: 0 auto 2rem; letter-spacing: 0.01em; }

.hero-cta { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-bottom: 48px; }

.hero-dots { display: flex; gap: 10px; justify-content: center; align-items: center; }
.hero-dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.4); background: transparent; cursor: pointer; transition: all 0.3s; padding: 0; }
.hero-dot.active { background: var(--green); border-color: var(--green); transform: scale(1.2); }
.hero-dot:hover { border-color: rgba(255,255,255,0.8); }

.hero-scroll-indicator { position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); z-index: 2; }
.hero-scroll-indicator a { display: block; width: 28px; height: 44px; border: 2px solid rgba(255,255,255,0.2); border-radius: 14px; position: relative; }
.hero-scroll-indicator span { position: absolute; top: 8px; left: 50%; width: 4px; height: 8px; margin-left: -2px; background: rgba(255,255,255,0.5); border-radius: 2px; animation: scrollBounce 2s infinite; }
@keyframes scrollBounce { 0%,100%{transform:translateY(0);opacity:1;} 50%{transform:translateY(12px);opacity:0.3;} }

.animate-fade-up { opacity: 0; transform: translateY(30px); animation: fadeUp 0.8s var(--ease) forwards; }
.delay-1{animation-delay:.15s;} .delay-2{animation-delay:.3s;} .delay-3{animation-delay:.45s;} .delay-4{animation-delay:.6s;} .delay-5{animation-delay:.75s;}
@keyframes fadeUp { to { opacity:1; transform:translateY(0); } }

/* Hero particles */
.hero-particles { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.hero-particle { position: absolute; border-radius: 50%; opacity: 0; animation: particleFloat linear infinite; }
@keyframes particleFloat {
    0%   { opacity:0; transform:translateY(100vh) scale(0); }
    10%  { opacity:1; }
    90%  { opacity:1; }
    100% { opacity:0; transform:translateY(-20vh) scale(1); }
}

/* ========== TRUST BANNER ========== */
.trust-banner { background: var(--gray-50); padding: 20px 0; border-bottom: 1px solid var(--gray-200); overflow: hidden; }
.trust-label { text-align: center; font-size: 0.72rem; font-weight: 700; color: var(--gray-400); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 16px; }
.marquee-wrapper { overflow: hidden; mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); }
.marquee-track { display: flex; gap: 48px; animation: marquee 35s linear infinite; width: max-content; }
.marquee-item { display: flex; align-items: center; gap: 10px; font-size: 0.88rem; font-weight: 500; color: var(--gray-500); white-space: nowrap; }
.marquee-item i { color: var(--green); font-size: 1rem; }
@keyframes marquee { 0%{transform:translateX(0);} 100%{transform:translateX(-50%);} }

/* ========== SECTION COMMONS ========== */
section { padding: var(--section-spacing) 0; }
.section-header { text-align: center; max-width: 680px; margin: 0 auto 64px; }

.section-tag {
    display: inline-flex; align-items: center; gap: 7px;
    background: var(--green-50); color: var(--green-darker);
    padding: 5px 16px; border-radius: var(--radius-full);
    font-size: 0.75rem; font-weight: 700; margin-bottom: 14px;
    text-transform: uppercase; letter-spacing: 0.8px;
    border: 1px solid var(--green-200);
}
.section-tag i { font-size: 0.72rem; }
.tag-red { background: var(--danger-light); color: var(--danger); border-color: #fecaca; }
.tag-green { background: var(--green-50); color: var(--green-darker); border-color: var(--green-200); }

.section-header h2 { font-size: 2.2rem; font-weight: 800; color: var(--dark); margin-bottom: 14px; line-height: 1.15; letter-spacing: -0.4px; }
.section-header p { font-size: 1rem; color: var(--gray-500); line-height: 1.75; }

/* ========== PILLARS ========== */
.pillars { background: var(--white); }
.pillars-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.pillar-card {
    position: relative; background: var(--white);
    padding: 36px 28px; border-radius: var(--radius-xl);
    border: 1px solid var(--gray-200); transition: var(--transition); overflow: hidden;
}
.pillar-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background: var(--green); opacity:0; transition: var(--transition); }
.pillar-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-xl); border-color: var(--green-200); }
.pillar-card:hover::before { opacity: 1; }
.pillar-featured { background: linear-gradient(160deg, var(--green-50), #f0fdf4); border-color: var(--green-200); }
.pillar-featured::before { opacity: 1; }
.pillar-badge { position:absolute; top:16px; right:16px; background: var(--green); color:var(--white); font-size:0.68rem; font-weight:700; padding:3px 10px; border-radius:var(--radius-full); text-transform:uppercase; letter-spacing:0.4px; }
.pillar-icon { width:52px; height:52px; border-radius:var(--radius); display:flex; align-items:center; justify-content:center; font-size:1.3rem; margin-bottom:14px; }
.pillar-icon-blue { background: var(--green-50); color: var(--green-darker); }
.pillar-icon-green { background: var(--green-50); color: var(--green-darker); }
.pillar-icon-gradient { background: var(--green); color: var(--white); }
.pillar-number { font-family:'Plus Jakarta Sans',sans-serif; font-size:2.6rem; font-weight:800; color:var(--gray-200); line-height:1; margin-bottom:6px; }
.pillar-card h3 { font-size:1.2rem; font-weight:700; margin-bottom:10px; }
.pillar-card > p { font-size:0.9rem; color:var(--gray-500); line-height:1.7; margin-bottom:18px; }
.pillar-features { margin-bottom:20px; }
.pillar-features li { padding:4px 0; font-size:0.85rem; color:var(--gray-600); position:relative; padding-left:18px; }
.pillar-features li::before { content:'\2713'; position:absolute; left:0; color:var(--green); font-weight:700; }
.pillar-link { display:inline-flex; align-items:center; gap:7px; color:var(--green-darker); font-weight:600; font-size:0.88rem; }
.pillar-link:hover { color:var(--green); }
.pillar-link i { transition: var(--transition); }
.pillar-link:hover i { transform: translateX(4px); }

/* ========== SERVICES ========== */
.services { background: var(--gray-50); }
.services-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.service-card {
    background: var(--white); padding:32px 28px;
    border-radius: var(--radius-xl); border: 1px solid var(--gray-200);
    transition: var(--transition); display:flex; flex-direction:column; position:relative; overflow:hidden;
}
.service-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--green); opacity:0; transition:opacity 0.25s; }
.service-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--green-200); }
.service-card:hover::before { opacity:1; }
.service-card-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.service-icon { width:48px; height:48px; border-radius:var(--radius); display:flex; align-items:center; justify-content:center; font-size:1.2rem; }
.service-icon-blue   { background:var(--green-50); color:var(--green-darker); }
.service-icon-red    { background:var(--danger-light); color:var(--danger); }
.service-icon-purple { background:var(--purple-light); color:var(--purple); }
.service-icon-teal   { background:var(--teal-light); color:var(--teal); }
.service-icon-green  { background:var(--green-50); color:var(--green-darker); }
.service-icon-orange { background:var(--orange-light); color:var(--orange); }
.service-badge { font-size:0.68rem; font-weight:700; padding:3px 10px; border-radius:var(--radius-full); text-transform:uppercase; letter-spacing:0.4px; background:var(--green-100); color:var(--green-darker); }
.badge-red { background:var(--danger-light); color:var(--danger); }
.badge-green { background:var(--green-100); color:var(--green-darker); }
.service-card h3 { font-size:1.05rem; font-weight:700; margin-bottom:10px; }
.service-card > p { font-size:0.88rem; color:var(--gray-500); line-height:1.7; margin-bottom:16px; flex:1; }
.service-features { margin-bottom:20px; }
.service-features li { display:flex; align-items:center; gap:8px; padding:4px 0; font-size:0.82rem; color:var(--gray-600); }
.service-features li i { color:var(--green); font-size:0.75rem; flex-shrink:0; }
.service-cta { display:inline-flex; align-items:center; gap:7px; color:var(--green-darker); font-weight:600; font-size:0.85rem; margin-top:auto; padding-top:14px; border-top:1px solid var(--gray-100); transition:gap 0.2s; }
.service-cta:hover { color:var(--green); gap:10px; }
.service-cta i { transition: var(--transition); }

/* ========== DESTRUCTION DETAIL ========== */
.destruction-detail { background: var(--white); }
.split-layout { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.split-content h2 { font-size:2rem; font-weight:800; margin-bottom:14px; line-height:1.2; }
.split-content > p { font-size:0.95rem; color:var(--gray-500); line-height:1.75; margin-bottom:28px; }
.destruction-levels-list { display:flex; flex-direction:column; gap:12px; margin-bottom:28px; }
.level-item { display:flex; gap:14px; align-items:flex-start; padding:14px; border-radius:var(--radius); background:var(--gray-50); border:1px solid var(--gray-200); transition:var(--transition); }
.level-item:hover { border-color:var(--gray-300); box-shadow:var(--shadow-sm); }
.level-item-featured { background:var(--danger-light); border-color:#fecaca; }
.level-badge { display:inline-block; padding:5px 12px; border-radius:var(--radius-sm); font-size:0.75rem; font-weight:800; white-space:nowrap; letter-spacing:0.4px; }
.level-standard { background:var(--green-100); color:var(--green-darker); }
.level-enhanced { background:#fef3c7; color:#b45309; }
.level-maximum { background:var(--danger-light); color:var(--danger); }
.level-item h4 { font-size:0.92rem; font-weight:700; margin-bottom:2px; }
.level-item p { font-size:0.82rem; color:var(--gray-500); }
.visual-block { background:linear-gradient(135deg,var(--green-50),#f0fdf4); border-radius:var(--radius-2xl); padding:40px; border:1px solid var(--green-200); }
.visual-icon-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:28px; }
.v-icon { text-align:center; padding:18px 10px; background:var(--white); border-radius:var(--radius); border:1px solid var(--gray-200); transition:var(--transition); }
.v-icon:hover { border-color:var(--green); box-shadow:var(--shadow-sm); transform:translateY(-2px); }
.v-icon i { font-size:1.7rem; color:var(--green); margin-bottom:6px; display:block; }
.v-icon span { font-size:0.75rem; font-weight:600; color:var(--gray-600); }
.visual-block-badge { display:flex; align-items:center; justify-content:center; gap:10px; background:var(--green); color:var(--white); padding:14px 24px; border-radius:var(--radius); font-weight:700; font-size:0.88rem; }

/* ========== SECTORS ========== */
.sectors { background: var(--gray-50); }
.sectors-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.sector-card { background:var(--white); padding:28px 20px; border-radius:var(--radius-lg); text-align:center; border:1px solid var(--gray-200); transition:var(--transition); }
.sector-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--green-200); }
.sector-icon { width:52px; height:52px; margin:0 auto 14px; border-radius:var(--radius); display:flex; align-items:center; justify-content:center; font-size:1.4rem; background:var(--green-50); color:var(--green-darker); transition:var(--transition); }
.sector-card:hover .sector-icon { background:var(--green); color:var(--white); }
.sector-card h3 { font-size:0.95rem; font-weight:700; margin-bottom:6px; }
.sector-card p { font-size:0.82rem; color:var(--gray-500); line-height:1.6; }

/* ========== PROCESS ========== */
.process { background: var(--white); }
.process-timeline { max-width: 780px; margin: 0 auto; position: relative; }
.process-timeline::before { content:''; position:absolute; left:40px; top:0; bottom:0; width:2px; background:linear-gradient(to bottom, var(--green-200), var(--green-100)); border-radius:2px; }
.process-step { display:flex; gap:28px; margin-bottom:32px; position:relative; }
.process-step:last-child { margin-bottom:0; }
.step-marker { flex-shrink:0; position:relative; z-index:2; }
.step-number { width:80px; height:80px; border-radius:50%; background:var(--white); border:2px solid var(--green); color:var(--green-darker); display:flex; align-items:center; justify-content:center; font-family:'Plus Jakarta Sans',sans-serif; font-size:1.1rem; font-weight:800; box-shadow:0 0 0 4px var(--green-50); }
.step-card { flex:1; background:var(--gray-50); padding:24px 28px; border-radius:var(--radius-lg); border:1px solid var(--gray-200); transition:var(--transition); }
.step-card:hover { box-shadow:var(--shadow-md); border-color:var(--green-200); }
.step-icon { width:40px; height:40px; border-radius:var(--radius-sm); background:var(--green-50); color:var(--green-darker); display:flex; align-items:center; justify-content:center; font-size:1rem; margin-bottom:10px; }
.step-card h3 { font-size:1rem; font-weight:700; margin-bottom:6px; }
.step-card p { font-size:0.88rem; color:var(--gray-500); line-height:1.7; }

/* ========== CERTIFICATIONS ========== */
.certifications { background: var(--gray-50); }
.certs-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:40px; }
.cert-card { background:var(--white); padding:28px 24px; border-radius:var(--radius-lg); text-align:center; border:1px solid var(--gray-200); transition:var(--transition); }
.cert-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:var(--green-200); }
.cert-icon { font-size:2.2rem; margin-bottom:14px; color:var(--green); display:block; }
.cert-icon i { color:var(--green); }
.cert-card h4 { font-size:1rem; font-weight:700; margin-bottom:6px; }
.cert-card p { font-size:0.84rem; color:var(--gray-500); line-height:1.6; }
.licences-section { background:var(--white); border-radius:var(--radius-2xl); padding:36px; border:1px solid var(--gray-200); }
.licences-section h3 { font-size:1.15rem; font-weight:700; text-align:center; margin-bottom:20px; display:flex; align-items:center; justify-content:center; gap:8px; }
.licences-section h3 i { color:var(--green); }
.licences-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.licence-card { display:flex; gap:14px; align-items:flex-start; padding:20px; border-radius:var(--radius); border:1px solid var(--gray-200); }
.licence-highlight { background:var(--green-50); border-color:var(--green-200); }
.licence-flag { font-size:1.8rem; flex-shrink:0; }
.licence-card strong { display:block; font-size:0.92rem; color:var(--dark); margin-bottom:6px; }
.licence-card ul li { font-size:0.82rem; color:var(--gray-500); padding:2px 0 2px 12px; position:relative; }
.licence-card ul li::before { content:'\2022'; position:absolute; left:0; color:var(--green); font-weight:bold; }

/* ========== ESG / CO2 ========== */
.esg { background: var(--white); }
.co2-calculator { background:linear-gradient(135deg,var(--gray-50),var(--green-50)); border-radius:var(--radius-2xl); border:1px solid var(--green-200); overflow:hidden; margin-bottom:56px; }
.calc-print-header { display:none; }
.calc-header { display:flex; align-items:center; gap:14px; padding:28px 36px; border-bottom:1px solid var(--green-200); }
.calc-icon { width:44px; height:44px; border-radius:var(--radius); background:var(--green); color:var(--white); display:flex; align-items:center; justify-content:center; font-size:1.1rem; }
.calc-header h3 { font-size:1.1rem; font-weight:700; margin-bottom:2px; }
.calc-header p { font-size:0.84rem; color:var(--gray-500); }
.calc-body { padding:28px 36px; display:grid; grid-template-columns:1.2fr 1fr; gap:36px; }
.calc-inputs-full { display:flex; flex-direction:column; gap:28px; }
.calc-section { background:var(--white); border-radius:var(--radius-lg); border:1px solid var(--gray-200); padding:20px; }
.calc-section-title { font-size:0.88rem; font-weight:700; color:var(--gray-800); margin-bottom:16px; display:flex; align-items:center; gap:7px; padding-bottom:10px; border-bottom:1px solid var(--gray-100); }
.calc-section-title i { color:var(--green); }
.calc-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.calc-group label { display:flex; align-items:center; gap:7px; font-size:0.8rem; font-weight:600; color:var(--gray-700); margin-bottom:5px; }
.calc-group label i { color:var(--green); }
.calc-group input[type="number"], .calc-group select { width:100%; padding:9px 12px; border:1.5px solid var(--gray-300); border-radius:var(--radius-sm); font-family:inherit; font-size:0.92rem; color:var(--gray-800); transition:var(--transition); background:var(--white); }
.calc-group input[type="number"]:focus, .calc-group select:focus { outline:none; border-color:var(--green); box-shadow:0 0 0 3px var(--green-100); }
.calc-tooltip { position:relative; cursor:help; }
.calc-tooltip i { color:var(--gray-400); font-size:0.78rem; }
.calc-tooltip:hover::after { content:attr(data-tip); position:absolute; bottom:100%; left:50%; transform:translateX(-50%); background:var(--dark); color:white; font-size:0.72rem; padding:6px 10px; border-radius:6px; white-space:normal; width:220px; z-index:10; margin-bottom:4px; line-height:1.4; }
.calc-results-full { display:flex; flex-direction:column; gap:20px; }
.calc-results-summary { background:var(--white); border-radius:var(--radius-lg); border:1px solid var(--gray-200); padding:20px; }
.calc-result-hero { text-align:center; margin-bottom:16px; }
.calc-result-hero i { font-size:1.8rem; color:var(--green); margin-bottom:6px; display:block; }
.calc-result-value-lg { font-family:'Plus Jakarta Sans',sans-serif; font-size:2.8rem; font-weight:800; color:var(--green-darker); line-height:1; }
.calc-result-unit-lg { display:block; font-size:0.82rem; color:var(--gray-500); margin-top:4px; }
.calc-result-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.calc-result-card { background:var(--green-50); border-radius:var(--radius); padding:12px; text-align:center; border:1px solid var(--green-100); }
.calc-result-card i { color:var(--green); margin-bottom:4px; display:block; }
.calc-result-value { font-family:'Plus Jakarta Sans',sans-serif; font-size:1.3rem; font-weight:800; color:var(--green-darker); display:block; }
.calc-result-unit { font-size:0.72rem; color:var(--gray-500); line-height:1.3; }
.calc-chart-block { background:var(--white); border-radius:var(--radius); border:1px solid var(--gray-200); padding:16px; }
.calc-chart-title { font-size:0.82rem; font-weight:700; color:var(--gray-700); margin-bottom:14px; }
.calc-chart { display:flex; flex-direction:column; gap:10px; }
.calc-chart-bar { display:flex; align-items:center; gap:10px; }
.chart-bar-fill { flex:1; height:10px; background:var(--gray-200); border-radius:5px; position:relative; overflow:hidden; }
.chart-bar-fill::before { content:''; position:absolute; left:0; top:0; height:100%; width:var(--fill,0%); background:var(--green); border-radius:5px; transition:width 0.5s ease; }
.chart-bar-label { font-size:0.75rem; color:var(--gray-600); width:70px; }
.chart-bar-value { font-size:0.75rem; font-weight:600; color:var(--gray-700); width:60px; text-align:right; }
.calc-export { background:var(--white); border-radius:var(--radius); border:1px solid var(--gray-200); padding:16px; }
.calc-export-header { display:flex; align-items:center; gap:7px; font-size:0.85rem; font-weight:700; color:var(--gray-800); margin-bottom:14px; }
.calc-export-header i { color:var(--green); }
.calc-export-fields { display:flex; flex-direction:column; gap:10px; margin-bottom:14px; }
.calc-export-field label { font-size:0.75rem; font-weight:600; color:var(--gray-600); margin-bottom:4px; display:block; }
.calc-export-field label span { font-weight:400; color:var(--gray-400); }
.calc-export-field input { width:100%; padding:8px 12px; border:1.5px solid var(--gray-200); border-radius:var(--radius-sm); font-size:0.85rem; font-family:inherit; }
.calc-export-field input:focus { outline:none; border-color:var(--green); }
.calc-export-actions { display:flex; gap:8px; }
.btn-export { display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:var(--radius-sm); font-size:0.78rem; font-weight:600; cursor:pointer; border:none; font-family:inherit; transition:var(--transition); }
.btn-export-print { background:var(--gray-100); color:var(--gray-700); }
.btn-export-print:hover { background:var(--gray-200); }
.btn-export-pdf { background:var(--green); color:white; }
.btn-export-pdf:hover { background:var(--green-dark); }
.btn-export-pdf.loading { opacity:0.7; pointer-events:none; }
.calc-pedagogy { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:0 36px 28px; }
.calc-pedagogy-card { background:var(--white); padding:18px; border-radius:var(--radius); border:1px solid var(--gray-200); }
.calc-pedagogy-card i { font-size:1.3rem; color:var(--green); margin-bottom:8px; display:block; }
.calc-pedagogy-card h4 { font-size:0.88rem; font-weight:700; margin-bottom:6px; }
.calc-pedagogy-card p { font-size:0.78rem; color:var(--gray-500); line-height:1.6; }
.calc-footer { text-align:center; padding:20px 36px 28px; }
.calc-sources { margin:0 36px 28px; background:var(--white); border-radius:var(--radius); border:1px solid var(--gray-200); overflow:hidden; }
.calc-sources-header { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; cursor:pointer; }
.calc-sources-title { display:flex; align-items:center; gap:7px; font-size:0.85rem; font-weight:700; color:var(--gray-800); }
.calc-sources-title i { color:var(--green); }
.calc-sources-btn { display:flex; align-items:center; gap:6px; font-size:0.78rem; font-weight:600; color:var(--green); background:none; border:none; cursor:pointer; font-family:inherit; }
.calc-sources-btn i { transition:transform 0.2s; }
.calc-sources.open .calc-sources-btn i { transform:rotate(180deg); }
.calc-sources-body { display:none; border-top:1px solid var(--gray-100); }
.calc-sources.open .calc-sources-body { display:block; }
.calc-sources-content { padding:18px; }
.calc-sources-intro { font-size:0.82rem; color:var(--gray-600); margin-bottom:12px; }
.calc-sources-list { list-style:none; display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
.calc-sources-list li { display:flex; align-items:flex-start; gap:8px; font-size:0.8rem; color:var(--gray-600); }
.calc-sources-list li i { color:var(--green); margin-top:2px; font-size:0.72rem; }
.calc-sources-list a { color:var(--green); text-decoration:underline; font-size:0.75rem; }
.calc-sources-methodology { display:flex; flex-direction:column; gap:10px; margin-bottom:14px; }
.calc-sources-method-card { display:flex; gap:10px; padding:12px; background:var(--gray-50); border-radius:var(--radius-sm); }
.calc-sources-method-card i { color:var(--green); flex-shrink:0; margin-top:2px; }
.calc-sources-method-card h5 { font-size:0.82rem; font-weight:700; margin-bottom:4px; }
.calc-sources-method-card p { font-size:0.78rem; color:var(--gray-500); line-height:1.5; }
.calc-sources-disclaimer { display:flex; align-items:flex-start; gap:8px; background:var(--green-50); padding:12px; border-radius:var(--radius-sm); margin-bottom:12px; border:1px solid var(--green-100); }
.calc-sources-disclaimer i { color:var(--green); flex-shrink:0; margin-top:2px; }
.calc-sources-disclaimer p { font-size:0.78rem; color:var(--gray-600); line-height:1.5; }
.calc-sources-disclaimer a { color:var(--green); text-decoration:underline; }
.calc-sources-download { text-align:center; }

/* ESG Stats */
.esg-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.esg-stat { background:var(--gray-900); padding:32px 24px; border-radius:var(--radius-xl); text-align:center; border:1px solid rgba(255,255,255,0.06); transition:var(--transition); }
.esg-stat:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.esg-stat-icon { font-size:1.6rem; color:var(--green); margin-bottom:10px; }
.esg-stat-number { font-family:'Plus Jakarta Sans',sans-serif; font-size:2.2rem; font-weight:800; color:var(--green); display:block; line-height:1; margin-bottom:6px; }
.esg-stat-label { font-size:0.82rem; color:rgba(255,255,255,0.45); font-weight:500; }

/* ========== PREMIUM FEATURES ========== */
.premium-features { background:var(--gray-900); }
.premium-features .section-header h2 { color:var(--white); -webkit-text-fill-color:var(--white); }
.premium-features .section-header p { color:rgba(255,255,255,0.45); }
.features-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.feature-card { background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.07); padding:28px 22px; border-radius:var(--radius-lg); transition:var(--transition); }
.feature-card:hover { background:rgba(16,185,129,0.08); border-color:rgba(16,185,129,0.2); transform:translateY(-3px); }
.feature-icon { width:44px; height:44px; border-radius:var(--radius); background:var(--green); display:flex; align-items:center; justify-content:center; font-size:1.1rem; color:var(--white); margin-bottom:14px; }
.feature-card h3 { color:var(--white); font-size:1rem; font-weight:700; margin-bottom:6px; }
.feature-card p { font-size:0.84rem; color:rgba(255,255,255,0.45); line-height:1.7; }

/* ========== TESTIMONIALS ========== */
.testimonials { background:var(--gray-50); }
.testimonials-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.testimonial-card { background:var(--white); padding:32px 28px; border-radius:var(--radius-xl); border:1px solid var(--gray-200); transition:var(--transition); position:relative; }
.testimonial-card::before { content:'\201C'; position:absolute; top:12px; right:20px; font-size:4rem; font-family:Georgia,serif; color:var(--green-100); line-height:1; }
.testimonial-card:hover { box-shadow:var(--shadow-lg); border-color:var(--green-200); }
.testimonial-rating { display:flex; gap:2px; margin-bottom:14px; }
.testimonial-rating i { color:#f59e0b; font-size:0.88rem; }
.testimonial-text { font-size:0.92rem; font-style:italic; color:var(--gray-600); line-height:1.75; margin-bottom:20px; }
.testimonial-author { display:flex; align-items:center; gap:10px; padding-top:14px; border-top:1px solid var(--gray-100); }
.testimonial-avatar { width:40px; height:40px; border-radius:50%; background:var(--green); color:var(--white); display:flex; align-items:center; justify-content:center; font-size:0.9rem; }
.testimonial-author strong { display:block; font-size:0.88rem; color:var(--dark); }
.testimonial-author span { font-size:0.78rem; color:var(--gray-500); }

/* ========== VIDEO SECTION ========== */
.video-section { padding:72px 0; background:var(--gray-50); }
.video-wrapper { max-width:880px; margin:0 auto; border-radius:var(--radius-xl); overflow:hidden; box-shadow:var(--shadow-xl); background:#000; }
.site-video { width:100%; display:block; max-height:500px; object-fit:contain; background:#000; }

/* ========== PARTNERS ========== */
.partners { background:var(--white); padding:var(--section-spacing) 0; overflow:hidden; }
.partners .section-header { margin-bottom:48px; }
.partners-carousel { display:flex; flex-direction:column; gap:16px; margin-bottom:56px; }
.partners-carousel:hover .partners-track { animation-play-state:paused; }
.partners-row { overflow:hidden; mask-image:linear-gradient(to right,transparent 0%,black 10%,black 90%,transparent 100%); -webkit-mask-image:linear-gradient(to right,transparent 0%,black 10%,black 90%,transparent 100%); }
.partners-track { display:flex; align-items:center; gap:0; width:max-content; will-change:transform; }
.partners-track--fwd { animation:partnersScrollFwd 55s linear infinite; }
.partners-track--rev { animation:partnersScrollFwd 65s linear infinite reverse; }
@keyframes partnersScrollFwd { from{transform:translateX(0);} to{transform:translateX(-50%);} }
.partner-logo { position:relative; flex-shrink:0; display:flex; align-items:center; justify-content:center; padding:20px 40px; height:108px; border-radius:12px; border:1px solid transparent; background:transparent; transition:background .4s,border-color .4s,box-shadow .4s; }
.partner-logo img { height:64px; max-width:200px; width:auto; object-fit:contain; display:block; filter:grayscale(65%) opacity(0.55); transform:scale(1); transition:filter .4s,transform .4s; cursor:pointer; }
.partner-logo:hover img { filter:grayscale(0%) opacity(1); }
.partner-logo:hover { background:rgba(255,255,255,0.8); border-color:rgba(16,185,129,0.15); box-shadow:0 4px 20px rgba(16,185,129,0.1); }
.partners-track:has(.partner-logo:hover) .partner-logo:not(:hover) img { filter:grayscale(100%) opacity(0.2); }
.partners-track:has(.partner-logo:hover) { animation-play-state:paused; }
.partner-logo:active img { filter:grayscale(0%) opacity(1); transform:scale(0.97); transition-duration:0.12s; }
@media (hover:none) { .partner-logo img { filter:grayscale(0%) opacity(1); } }

.partners-stats { display:flex; align-items:center; justify-content:center; gap:0; flex-wrap:wrap; background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius-2xl); padding:32px 48px; box-shadow:var(--shadow-sm); }
.partners-stat { flex:1; min-width:130px; text-align:center; padding:8px 24px; }
.partners-stat-num { display:block; font-family:'Plus Jakarta Sans',sans-serif; font-size:2rem; font-weight:800; color:var(--green); line-height:1.2; margin-bottom:4px; }
.partners-stat-lbl { display:block; font-size:0.84rem; color:var(--gray-500); font-weight:500; line-height:1.4; }
.partners-stat-sep { width:1px; height:44px; background:var(--gray-200); flex-shrink:0; }

/* ========== ABOUT ========== */
.about { background:var(--white); }
.about-layout { display:grid; grid-template-columns:3fr 2fr; gap:48px; align-items:start; }
.about-text p { font-size:0.95rem; color:var(--gray-600); line-height:1.8; margin-bottom:14px; }
.about-values-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:28px; }
.about-value { text-align:center; padding:20px 14px; border-radius:var(--radius); background:var(--gray-50); border:1px solid var(--gray-200); transition:var(--transition); }
.about-value:hover { border-color:var(--green-200); box-shadow:var(--shadow-sm); }
.about-value i { font-size:1.4rem; color:var(--green); margin-bottom:7px; display:block; }
.about-value h4 { font-size:0.88rem; font-weight:700; margin-bottom:2px; }
.about-value p { font-size:0.78rem; color:var(--gray-500); margin-bottom:0; }
.about-sidebar { display:flex; flex-direction:column; gap:18px; }
.about-card { background:var(--gray-50); padding:24px; border-radius:var(--radius-lg); border:1px solid var(--gray-200); }
.about-card h4 { font-size:1rem; font-weight:700; margin-bottom:14px; display:flex; align-items:center; gap:7px; }
.about-card h4 i { color:var(--green); }
.location-entry { display:flex; gap:10px; align-items:flex-start; padding:10px; border-radius:var(--radius-sm); margin-bottom:5px; transition:var(--transition-fast); }
.location-primary { background:var(--green-50); border:1px solid var(--green-200); border-radius:var(--radius-sm); }
.location-flag { font-size:1.4rem; flex-shrink:0; }
.location-entry strong { display:block; font-size:0.85rem; color:var(--dark); }
.location-entry span { font-size:0.78rem; color:var(--gray-500); }
.about-award { text-align:center; background:linear-gradient(135deg,#fef3c7,#fde68a); border-color:#f59e0b; }
.about-award i { font-size:2.2rem; color:#b45309; margin-bottom:7px; display:block; }
.about-award h4 { justify-content:center; color:#78350f; margin-bottom:3px; }
.about-award p { font-size:0.82rem; color:#92400e; }

/* ========== DATA RISKS ========== */
.data-risks { background:var(--gray-50); padding:var(--section-spacing) 0; }
.risk-banner { background:linear-gradient(135deg,#1e293b,#111827); border-radius:var(--radius-2xl); overflow:hidden; position:relative; }
.risk-banner::before { content:''; position:absolute; top:-50%; right:-10%; width:400px; height:400px; background:radial-gradient(circle,rgba(239,68,68,0.12) 0%,transparent 70%); border-radius:50%; }
.risk-content { position:relative; padding:56px; z-index:1; }
.risk-content .section-tag { background:rgba(239,68,68,0.12); color:#fca5a5; border-color:rgba(239,68,68,0.2); }
.risk-content h2 { color:var(--white); font-size:1.9rem; max-width:680px; margin-bottom:14px; }
.risk-content > p { color:rgba(255,255,255,0.55); font-size:0.95rem; line-height:1.75; max-width:680px; margin-bottom:28px; }
.risk-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:28px; max-width:560px; }
.risk-stat { border-left:3px solid var(--danger); padding-left:14px; }
.risk-stat-num { display:block; font-family:'Plus Jakarta Sans',sans-serif; font-size:1.5rem; font-weight:800; color:#fca5a5; margin-bottom:2px; }
.risk-stat span { font-size:0.75rem; color:rgba(255,255,255,0.35); }

/* ========== BLOG ========== */
.blog-preview { background:var(--white); }
.blog-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.blog-card { background:var(--white); border-radius:var(--radius-xl); overflow:hidden; border:1px solid var(--gray-200); transition:var(--transition); }
.blog-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-xl); border-color:var(--green-200); }
.blog-card-image { position:relative; height:190px; overflow:hidden; }
.blog-card-placeholder { width:100%; height:100%; background:var(--green-50); display:flex; align-items:center; justify-content:center; }
.blog-card-placeholder i { font-size:2.8rem; color:var(--green-300); }
.blog-category { position:absolute; top:10px; left:10px; background:var(--white); color:var(--green-darker); font-size:0.68rem; font-weight:700; padding:3px 10px; border-radius:var(--radius-full); text-transform:uppercase; letter-spacing:0.4px; }
.blog-card-content { padding:22px; }
.blog-card-content time { font-size:0.75rem; color:var(--gray-400); margin-bottom:7px; display:block; }
.blog-card-content h3 { font-size:1rem; font-weight:700; margin-bottom:7px; line-height:1.4; }
.blog-card-content > p { font-size:0.84rem; color:var(--gray-500); line-height:1.6; margin-bottom:14px; }
.blog-read-more { display:inline-flex; align-items:center; gap:5px; color:var(--green-darker); font-weight:600; font-size:0.82rem; transition:gap 0.2s; }
.blog-read-more:hover { gap:8px; color:var(--green); }
.blog-read-more i { font-size:0.78rem; transition:var(--transition); }

/* ========== CTA BANNER ========== */
.cta-banner { background:linear-gradient(135deg,#064e3b 0%,#065f46 50%,#047857 100%); padding:72px 0; position:relative; overflow:hidden; }
.cta-banner::before { content:''; position:absolute; top:-50%; left:-10%; width:500px; height:500px; background:radial-gradient(circle,rgba(255,255,255,0.07) 0%,transparent 70%); border-radius:50%; }
.cta-banner::after { content:''; position:absolute; bottom:-50%; right:-10%; width:400px; height:400px; background:radial-gradient(circle,rgba(255,255,255,0.05) 0%,transparent 70%); border-radius:50%; }
.cta-content { text-align:center; position:relative; z-index:1; }
.cta-content h2 { color:var(--white); font-size:2.2rem; margin-bottom:10px; }
.cta-content p { color:rgba(255,255,255,0.7); font-size:1rem; margin-bottom:28px; }
.cta-buttons { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* ========== CONTACT ========== */
.contact { background:var(--gray-50); }
.contact-layout { display:grid; grid-template-columns:3fr 1.5fr; gap:36px; align-items:start; }
.contact-form { background:var(--white); padding:36px; border-radius:var(--radius-2xl); border:1px solid var(--gray-200); box-shadow:var(--shadow-sm); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-group { margin-bottom:18px; }
.form-group label { display:block; font-weight:600; font-size:0.85rem; color:var(--dark); margin-bottom:5px; }
.form-group input, .form-group select, .form-group textarea { width:100%; padding:11px 14px; border:1.5px solid var(--gray-300); border-radius:var(--radius-sm); font-family:inherit; font-size:0.92rem; color:var(--gray-800); transition:var(--transition); background:var(--white); }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline:none; border-color:var(--green); box-shadow:0 0 0 3px var(--green-100); }
.form-group input::placeholder, .form-group textarea::placeholder { color:var(--gray-400); }
.form-checkbox { display:flex; align-items:flex-start; gap:10px; }
.form-checkbox input[type="checkbox"] { width:auto; margin-top:4px; flex-shrink:0; accent-color:var(--green); }
.form-checkbox label { font-size:0.8rem; font-weight:400; color:var(--gray-500); line-height:1.5; }
.form-checkbox a { color:var(--green); text-decoration:underline; }
.contact-info { display:flex; flex-direction:column; gap:10px; }
.contact-info-card { background:var(--white); padding:18px; border-radius:var(--radius); text-align:center; border:1px solid var(--gray-200); transition:var(--transition); }
.contact-info-card:hover { box-shadow:var(--shadow-sm); border-color:var(--green-200); }
.contact-info-highlight { background:var(--green); border-color:transparent; color:var(--white); }
.contact-info-highlight h4, .contact-info-highlight p { color:var(--white); }
.contact-info-highlight i { color:var(--white) !important; }
.contact-info-card i { font-size:1.1rem; color:var(--green); margin-bottom:6px; display:block; }
.contact-info-card h4 { font-size:0.85rem; font-weight:700; color:var(--dark); margin-bottom:3px; }
.contact-info-card p { font-size:0.78rem; color:var(--gray-500); line-height:1.5; }
.contact-info-card a { color:var(--green); }
.contact-info-card a:hover { text-decoration:underline; }

/* ========== FOOTER ========== */
.footer { background:var(--gray-900); color:rgba(255,255,255,0.55); padding:64px 0 20px; }
.footer-top { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; padding-bottom:48px; border-bottom:1px solid rgba(255,255,255,0.06); }
.footer-logo { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.footer-brand > p { font-size:0.84rem; color:rgba(255,255,255,0.38); line-height:1.7; margin-bottom:18px; }
.footer-social { display:flex; gap:8px; }
.footer-social a { width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,0.05); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,0.4); font-size:0.95rem; transition:var(--transition); }
.footer-social a:hover { background:var(--green); color:var(--white); }
.footer-links-col h4 { color:var(--white); font-size:0.85rem; font-weight:700; margin-bottom:14px; }
.footer-subtitle { margin-top:22px !important; }
.footer-links-col ul li { margin-bottom:7px; }
.footer-links-col a { font-size:0.84rem; color:rgba(255,255,255,0.38); transition:var(--transition-fast); }
.footer-links-col a:hover { color:var(--green); }
.footer-bottom { padding-top:20px; text-align:center; font-size:0.76rem; color:rgba(255,255,255,0.22); }
.footer-bottom p + p { margin-top:3px; }

/* ========== COOKIE BANNER ========== */
.cookie-banner { position:fixed; bottom:0; left:0; right:0; z-index:10000; background:var(--white); box-shadow:0 -4px 20px rgba(0,0,0,0.1); padding:18px 0; transform:translateY(100%); transition:transform 0.4s var(--ease); border-top:2px solid var(--green); }
.cookie-banner.visible { transform:translateY(0); }
.cookie-inner { max-width:var(--container-max); margin:0 auto; padding:0 24px; display:flex; align-items:center; gap:24px; }
.cookie-text { flex:1; }
.cookie-text strong { display:block; font-size:0.88rem; color:var(--dark); margin-bottom:2px; }
.cookie-text p { font-size:0.78rem; color:var(--gray-500); line-height:1.5; }
.cookie-actions { display:flex; gap:8px; flex-shrink:0; }

/* ========== BACK TO TOP ========== */
.back-to-top { position:fixed; bottom:28px; right:28px; z-index:9999; width:46px; height:46px; border-radius:50%; background:var(--green); color:var(--white); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:1rem; box-shadow:0 4px 16px rgba(16,185,129,0.35); opacity:0; visibility:hidden; transform:translateY(20px) scale(0.8); transition:opacity .4s var(--ease),visibility .4s,transform .4s var(--ease),box-shadow .3s; }
.back-to-top.visible { opacity:1; visibility:visible; transform:translateY(0) scale(1); }
.back-to-top:hover { transform:translateY(-3px) scale(1.08); box-shadow:0 8px 24px rgba(16,185,129,0.4); }

/* ========== SCROLL REVEAL ========== */
.reveal { opacity:0; transform:translateY(30px); transition:opacity .65s cubic-bezier(.22,1,.36,1),transform .65s cubic-bezier(.22,1,.36,1); }
.reveal.visible { opacity:1; transform:none; }
.reveal-left { opacity:0; transform:translateX(-40px); transition:opacity .65s cubic-bezier(.22,1,.36,1),transform .65s cubic-bezier(.22,1,.36,1); }
.reveal-left.visible { opacity:1; transform:none; }
.reveal-right { opacity:0; transform:translateX(40px); transition:opacity .65s cubic-bezier(.22,1,.36,1),transform .65s cubic-bezier(.22,1,.36,1); }
.reveal-right.visible { opacity:1; transform:none; }
.reveal-delay-1{transition-delay:.1s;} .reveal-delay-2{transition-delay:.2s;} .reveal-delay-3{transition-delay:.3s;} .reveal-delay-4{transition-delay:.4s;} .reveal-delay-5{transition-delay:.5s;}
.reveal.revealed { opacity:1; transform:translateY(0); }

/* ========== READ PROGRESS ========== */
#read-progress { position:fixed; top:0; left:0; height:3px; width:0%; background:linear-gradient(90deg,var(--green-dark),var(--green)); z-index:9999; transition:width .1s linear; }

/* ========== SECTION HEADER GRADIENT TEXT ========== */
.section-header h2 {
    background: linear-gradient(135deg, var(--dark) 0%, var(--gray-700) 100%);
    background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.premium-features .section-header h2 {
    background: linear-gradient(135deg, var(--white) 0%, rgba(255,255,255,0.8) 100%);
    background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}

/* ========== FOCUS ACCESSIBLE ========== */
:focus-visible { outline:2px solid var(--green); outline-offset:2px; }

/* ========== REDUCED MOTION ========== */
@media (prefers-reduced-motion:reduce) {
    *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
    .reveal,.reveal-left,.reveal-right { opacity:1; transform:none; }
    .hero-particle,.partners-track { animation:none!important; }
}

/* ========== RESPONSIVE ========== */
@media (max-width:1024px) {
    :root { --section-spacing:80px; }
    .hero-phrase { font-size:2.2rem; } .hero-phrases { min-height:190px; }
    .pillars-grid { grid-template-columns:1fr; max-width:480px; margin:0 auto; }
    .services-grid { grid-template-columns:repeat(2,1fr); }
    .sectors-grid { grid-template-columns:repeat(2,1fr); }
    .certs-grid { grid-template-columns:repeat(2,1fr); }
    .features-grid { grid-template-columns:repeat(2,1fr); }
    .testimonials-grid { grid-template-columns:repeat(2,1fr); }
    .esg-stats { grid-template-columns:repeat(2,1fr); }
    .blog-grid { grid-template-columns:repeat(2,1fr); }
    .split-layout { grid-template-columns:1fr; gap:36px; }
    .about-layout { grid-template-columns:1fr; }
    .contact-layout { grid-template-columns:1fr; }
    .footer-top { grid-template-columns:repeat(2,1fr); }
    .section-header h2 { font-size:1.9rem; }
    .calc-pedagogy { grid-template-columns:1fr; }
    .partner-logo { padding:16px 28px; height:96px; }
    .partner-logo img { height:56px; max-width:172px; }
}

@media (max-width:768px) {
    :root { --nav-height:60px; --section-spacing:64px; }
    .topbar { display:none; }
    .nav-toggle { display:flex; }
    .nav-links { display:none; position:fixed; top:var(--nav-height); left:0; right:0; bottom:0; background:var(--white); flex-direction:column; padding:24px; gap:4px; overflow-y:auto; z-index:999; }
    .nav-links.active { display:flex; }
    .nav-links > li > a { padding:13px 16px; font-size:0.95rem; }
    .dropdown { position:static; box-shadow:none; border:none; padding-left:16px; display:none; transform:none; animation:none; }
    .has-dropdown.open .dropdown { display:block; }
    .nav-actions { gap:8px; }
    .lang-selector { display:none; }
    .lang-selector-mobile { display:block; }
    .btn-nav { display:none!important; }
    .hero-phrase { font-size:1.8rem; } .hero-phrases { min-height:160px; }
    .hero-subtitle-improved { font-size:0.95rem; }
    .hero-content { padding:50px 0 80px; }
    .hero-cta { flex-direction:column; align-items:center; }
    .section-header h2 { font-size:1.75rem; } .section-header { margin-bottom:44px; }
    .services-grid { grid-template-columns:1fr; }
    .sectors-grid { grid-template-columns:repeat(2,1fr); }
    .features-grid { grid-template-columns:1fr; }
    .testimonials-grid { grid-template-columns:1fr; }
    .certs-grid { grid-template-columns:1fr; }
    .esg-stats { grid-template-columns:repeat(2,1fr); }
    .blog-grid { grid-template-columns:1fr; }
    .licences-grid { grid-template-columns:1fr; }
    .about-values-grid { grid-template-columns:1fr 1fr; }
    .calc-body { grid-template-columns:1fr; }
    .risk-content { padding:36px 24px; }
    .risk-stats { grid-template-columns:1fr; }
    .risk-content h2 { font-size:1.5rem; }
    .process-timeline::before { left:40px; }
    .form-row { grid-template-columns:1fr; }
    .cta-content h2 { font-size:1.7rem; }
    .cta-buttons { flex-direction:column; align-items:center; }
    .footer-top { grid-template-columns:1fr; }
    .cookie-inner { flex-direction:column; text-align:center; }
    .back-to-top { bottom:18px; right:18px; width:42px; height:42px; }
    .partners-carousel { gap:12px; margin-bottom:44px; }
    .partner-logo { padding:12px 24px; height:80px; }
    .partner-logo img { height:44px; max-width:140px; }
    .partners-stats { padding:24px; }
    .partners-stat { min-width:110px; padding:10px 14px; }
    .partners-stat-num { font-size:1.7rem; }
    .partners-stat-sep { display:none; }
    .calc-pedagogy { padding:0 20px 20px; }
    .calc-sources { margin:0 20px 20px; }
    .calc-header { padding:20px; }
    .calc-body { padding:20px; }
    .calc-footer { padding:16px 20px 20px; }
    .logo-img { height:60px; }
    .video-section { padding:48px 0; }
    .site-video { max-height:240px; }
}

@media (max-width:480px) {
    .hero-phrase { font-size:1.5rem; } .hero-phrases { min-height:140px; }
    .hero-badge { font-size:0.76rem; padding:8px 14px; }
    .section-header h2 { font-size:1.55rem; }
    .sectors-grid { grid-template-columns:1fr; }
    .about-values-grid { grid-template-columns:1fr; }
    .esg-stats { grid-template-columns:1fr; }
    .process-step { flex-direction:column; gap:12px; }
    .process-timeline::before { display:none; }
    .step-number { width:56px; height:56px; font-size:0.95rem; }
    .visual-icon-grid { grid-template-columns:repeat(2,1fr); }
    .partners-stat-num { font-size:1.5rem; }
    .partners-stat-lbl { font-size:0.75rem; }
    .calc-result-cards { grid-template-columns:1fr; }
}

/* ================================================================
   REDESIGN BITRASER — Mega-menu, Hero 2 col, Binary animation, Cards
   ================================================================ */

/* ========== MEGA-MENU ========== */
.has-megamenu { position: relative; }
.mega-trigger { display: flex; align-items: center; gap: 5px; }
.mega-trigger i { font-size: 0.68rem; opacity: 0.55; transition: transform 0.2s; }
.has-megamenu:hover .mega-trigger i { transform: rotate(180deg); }

.megamenu {
    display: none;
    position: fixed;
    left: 0; right: 0;
    top: var(--nav-height);
    background: var(--white);
    border-top: 2px solid var(--green);
    border-bottom: 1px solid var(--gray-200);
    box-shadow: 0 20px 60px rgba(0,0,0,0.12);
    z-index: 999;
    animation: megaIn 0.2s var(--ease);
}
@keyframes megaIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.has-megamenu:hover .megamenu { display: block; }

.megamenu-inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 32px 24px;
    display: grid;
    grid-template-columns: 1fr 1fr 220px;
    gap: 0;
}

.megamenu-col {
    padding: 0 32px;
    border-right: 1px solid var(--gray-100);
}
.megamenu-col:first-child { padding-left: 0; }
.megamenu-col:last-child  { border-right: none; }

.megamenu-col-title {
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--gray-400);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 7px;
}
.megamenu-col-title i { color: var(--green); }

.megamenu-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--radius);
    margin-bottom: 4px;
    transition: background 0.15s;
    color: var(--gray-700);
}
.megamenu-item:hover { background: var(--green-50); }
.megamenu-item:hover strong { color: var(--green-darker); }

.megamenu-item-icon {
    width: 36px; height: 36px;
    border-radius: 8px;
    background: var(--gray-100);
    display: flex; align-items: center; justify-content: center;
    color: var(--green-darker);
    font-size: 0.95rem;
    flex-shrink: 0;
    transition: background 0.15s;
}
.megamenu-item:hover .megamenu-item-icon { background: var(--green-100); }

.megamenu-item-text strong { display: block; font-size: 0.88rem; font-weight: 700; color: var(--dark); margin-bottom: 2px; }
.megamenu-item-text small  { font-size: 0.76rem; color: var(--gray-500); line-height: 1.4; }

.megamenu-sector {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    font-size: 0.84rem;
    color: var(--gray-600);
    font-weight: 500;
    transition: all 0.15s;
    margin-bottom: 3px;
}
.megamenu-sector i { color: var(--green); font-size: 0.8rem; width: 14px; }
.megamenu-sector:hover { background: var(--green-50); color: var(--green-darker); }

.megamenu-col-cta { padding-left: 28px; }
.megamenu-cta-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--green);
    color: white;
    padding: 11px 18px;
    border-radius: var(--radius);
    font-size: 0.84rem;
    font-weight: 700;
    margin-top: 16px;
    transition: background 0.2s, transform 0.2s;
}
.megamenu-cta-btn:hover { background: var(--green-dark); transform: translateY(-1px); }

/* ========== HERO BINARY CANVAS ========== */
.hero-binary-canvas {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.18;
}

/* ========== HERO 2 COLONNES ========== */
.hero-content {
    position: relative;
    z-index: 2;
    color: var(--white);
    padding: 100px 0 80px;
    width: 100%;
}

.hero-split {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 64px;
    align-items: center;
    margin-bottom: 40px;
}

.hero-left { text-align: left; }

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(16,185,129,0.15);
    border: 1px solid rgba(16,185,129,0.3);
    padding: 8px 20px;
    border-radius: var(--radius-full);
    font-size: 0.82rem;
    margin-bottom: 24px;
    color: rgba(255,255,255,0.9);
}

.hero-phrases { position: relative; min-height: 160px; display: flex; align-items: center; margin-bottom: 20px; }
.hero-phrase { position: absolute; width: 100%; font-size: 2.4rem; font-weight: 800; line-height: 1.2; letter-spacing: -0.4px; color: var(--white); opacity: 0; transform: translateY(20px); transition: opacity 0.8s ease, transform 0.8s ease; pointer-events: none; }
.hero-phrase.active { opacity: 1; transform: translateY(0); pointer-events: auto; }

.hero-sub {
    font-size: 1rem;
    color: rgba(255,255,255,0.65);
    line-height: 1.7;
    margin-bottom: 28px;
    max-width: 520px;
}

.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 28px; }

/* Chips certifs */
.hero-cert-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.hero-cert-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.14);
    padding: 5px 12px;
    border-radius: var(--radius-full);
    font-size: 0.74rem;
    font-weight: 600;
    color: rgba(255,255,255,0.8);
}
.hero-cert-chip i { color: var(--green); font-size: 0.7rem; }

/* ── Stats card droite ── */
.hero-right { display: flex; justify-content: flex-end; }

.hero-stats-card {
    background: rgba(255,255,255,0.07);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 20px;
    padding: 28px;
    width: 100%;
    max-width: 380px;
}

.hero-stats-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    color: rgba(255,255,255,0.7);
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.hero-stats-header i { color: var(--green); }
.hero-live-dot {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.72rem;
    color: var(--green);
}
.hero-live-dot span {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--green);
    animation: pulse 2s infinite;
}

.hero-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 24px;
}
.hero-stat-item {
    background: rgba(255,255,255,0.05);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    border: 1px solid rgba(255,255,255,0.07);
}
.hero-stat-num {
    display: block;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--green);
    line-height: 1;
    margin-bottom: 5px;
}
.hero-stat-lbl {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.5);
    font-weight: 500;
    line-height: 1.3;
}

.hero-card-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--green);
    color: white;
    padding: 13px 20px;
    border-radius: var(--radius);
    font-size: 0.85rem;
    font-weight: 700;
    transition: background 0.2s, transform 0.2s;
}
.hero-card-cta:hover { background: var(--green-dark); transform: translateY(-1px); }
.hero-card-cta i { font-size: 0.78rem; }

/* Dots repositionnés */
.hero-dots {
    display: flex;
    gap: 8px;
    justify-content: flex-start;
    align-items: center;
    padding-left: 4px;
}

/* ========== SERVICE CARDS — GRANDE ICÔNE STYLE BITRASER ========== */
.service-card {
    position: relative;
    padding: 36px 28px 28px;
}

.service-card-icon-wrap {
    width: 72px;
    height: 72px;
    border-radius: 16px;
    background: var(--green-50);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: var(--green-darker);
    margin-bottom: 20px;
    transition: var(--transition);
    border: 1px solid var(--green-100);
}
.service-card:hover .service-card-icon-wrap { background: var(--green); color: white; border-color: var(--green); transform: scale(1.05); }

.service-card-icon-red    { background: var(--danger-light); color: var(--danger); border-color: #fecaca; }
.service-card:hover .service-card-icon-red { background: var(--danger); color: white; border-color: var(--danger); }

.service-card-icon-purple { background: var(--purple-light); color: var(--purple); border-color: #e9d5ff; }
.service-card:hover .service-card-icon-purple { background: var(--purple); color: white; }

.service-card-icon-teal   { background: var(--teal-light); color: var(--teal); border-color: #99f6e4; }
.service-card:hover .service-card-icon-teal { background: var(--teal); color: white; }

.service-card-icon-green  { background: var(--green-50); color: var(--green-darker); border-color: var(--green-100); }
.service-card-icon-orange { background: var(--orange-light); color: var(--orange); border-color: #fed7aa; }
.service-card:hover .service-card-icon-orange { background: var(--orange); color: white; }

.service-card .service-badge {
    position: absolute;
    top: 20px;
    right: 20px;
}

/* ========== SECTION SPACING AÉRÉ (style BitRaser) ========== */
:root { --section-spacing: 120px; }

.section-header {
    margin-bottom: 72px;
}
.section-header h2 {
    font-size: 2.4rem;
}

/* ========== RESPONSIVE MEGA-MENU & HERO ========== */
@media (max-width: 1024px) {
    .hero-split { grid-template-columns: 1fr; gap: 40px; }
    .hero-right { justify-content: center; }
    .hero-stats-card { max-width: 100%; }
    .hero-phrases { min-height: 140px; }
    .hero-phrase { font-size: 2rem; }
    .megamenu-inner { grid-template-columns: 1fr 1fr; }
    .megamenu-col-cta { display: none; }
}

@media (max-width: 768px) {
    .megamenu { display: none !important; }
    .has-megamenu.open .megamenu { display: block !important; position: static; box-shadow: none; border: none; animation: none; }
    .hero-split { grid-template-columns: 1fr; }
    .hero-left { text-align: center; }
    .hero-phrase { font-size: 1.7rem; }
    .hero-phrases { min-height: 130px; }
    .hero-cert-chips { justify-content: center; }
    .hero-cta { justify-content: center; }
    .hero-dots { justify-content: center; }
    .hero-right { display: none; }
    .service-card-icon-wrap { width: 60px; height: 60px; font-size: 1.5rem; }
    :root { --section-spacing: 72px; }
    .section-header h2 { font-size: 1.8rem; }
    .section-header { margin-bottom: 48px; }
}

/* ================================================================
   CORRECTIONS BUGS — Screenshot 26/06
   ================================================================ */

/* ── Topbar : décalage du body pour compenser navbar fixe ── */
body { padding-top: 0; }
.topbar { position: relative; z-index: 1001; }

/* ── Navbar : prend la topbar en compte ── */
.navbar {
    top: 0;
}

/* ── Hero : hauteur minimale et padding corrigés ── */
.hero {
    min-height: 100vh;
    padding-top: 0;
}
.hero-content {
    padding: 120px 0 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* ── Hero split : alignement corrigé ── */
.hero-split {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 48px;
    align-items: center;
    width: 100%;
    margin-bottom: 36px;
}

/* ── Hero left : texte aligné à gauche ── */
.hero-left {
    text-align: left;
}

/* ── Phrases hero : hauteur fixe pour éviter le saut ── */
.hero-phrases {
    position: relative;
    min-height: 180px;
    display: flex;
    align-items: flex-start;
    margin-bottom: 18px;
}
.hero-phrase {
    font-size: 2.6rem;
    line-height: 1.15;
    position: absolute;
    top: 0; left: 0;
    width: 100%;
}

/* ── Hero CTA : boutons côte à côte ── */
.hero-cta {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-bottom: 24px;
}
.hero-cta .btn {
    width: auto;
    white-space: nowrap;
}

/* ── Hero cert chips : alignés à gauche ── */
.hero-cert-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start;
    margin-top: 4px;
}

/* ── Stats card : fond semi-transparent amélioré ── */
.hero-stats-card {
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 18px;
    padding: 26px;
    width: 100%;
}

/* ── Dots hero : repositionnés sous le split ── */
.hero-dots {
    justify-content: flex-start;
    padding-left: 2px;
}

/* ── Logo : toujours visible ── */
.logo-img {
    height: 70px;
    width: auto;
    display: block;
    object-fit: contain;
}
.navbar .logo { display: flex; align-items: center; }

/* ── Testimonial quote : couleur corrigée ── */
.testimonial-card::before {
    color: rgba(16, 185, 129, 0.12) !important;
}

/* ── Responsive corrections ── */
@media (max-width: 1024px) {
    .hero-split {
        grid-template-columns: 1fr;
        gap: 36px;
    }
    .hero-right { display: flex; justify-content: center; }
    .hero-stats-card { max-width: 480px; margin: 0 auto; }
    .hero-phrase { font-size: 2rem; }
    .hero-phrases { min-height: 150px; }
}

@media (max-width: 768px) {
    .hero-content { padding: 90px 0 60px; }
    .hero-left { text-align: center; }
    .hero-cta { justify-content: center; }
    .hero-cert-chips { justify-content: center; }
    .hero-dots { justify-content: center; }
    .hero-right { display: none; }
    .hero-phrase { font-size: 1.75rem; }
    .hero-phrases { min-height: 130px; }
}

/* ================================================================
   HERO SIMPLIFIÉ — centré, sans stats card, sans topbar
   ================================================================ */

/* Topbar masquée définitivement */
.topbar { display: none !important; }

/* Hero centré pleine largeur */
.hero-center {
    max-width: 780px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Badge centré */
.hero-badge { margin-bottom: 28px; }

/* Phrases centrées */
.hero-phrases {
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    width: 100%;
}
.hero-phrase {
    font-size: 3rem;
    text-align: center;
    position: absolute;
    left: 0; right: 0;
}

/* Sous-titre centré */
.hero-sub {
    text-align: center;
    margin: 0 auto 32px;
    max-width: 600px;
}

/* Boutons côte à côte centrés */
.hero-cta {
    justify-content: center;
    flex-direction: row;
    margin-bottom: 28px;
}

/* Chips centrées */
.hero-cert-chips {
    justify-content: center;
}

/* Dots centrés */
.hero-dots {
    justify-content: center;
    margin-top: 32px;
}

/* Masquer split et stats card */
.hero-split,
.hero-right,
.hero-stats-card { display: none !important; }

/* Responsive */
@media (max-width: 768px) {
    .hero-phrase { font-size: 1.9rem; }
    .hero-phrases { min-height: 160px; }
}
@media (max-width: 480px) {
    .hero-phrase { font-size: 1.6rem; }
    .hero-phrases { min-height: 140px; }
    .hero-cta { flex-direction: column; align-items: center; }
}

/* ================================================================
   CONTACT — Style BitRaser (fond sombre + panneau blanc flottant)
   ================================================================ */

.contact { padding: 0; }

/* Layout 2 colonnes pleine largeur */
.contact-bg {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 700px;
}

/* Colonne gauche — fond sombre */
.contact-bg-left {
    background: linear-gradient(160deg, #0f172a 0%, #1e293b 50%, #064e3b 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 64px;
    position: relative;
    overflow: hidden;
}
.contact-bg-left::before {
    content: '';
    position: absolute;
    top: -100px; right: -100px;
    width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(16,185,129,0.15) 0%, transparent 70%);
    pointer-events: none;
}

.contact-bg-content { position: relative; z-index: 1; max-width: 420px; }

.contact-trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(16,185,129,0.15);
    border: 1px solid rgba(16,185,129,0.3);
    color: #6ee7b7;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 6px 16px;
    border-radius: 20px;
    margin-bottom: 24px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.contact-bg-title {
    font-size: 2.4rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.15;
    margin-bottom: 16px;
    letter-spacing: -0.3px;
}

.contact-bg-sub {
    font-size: 1rem;
    color: rgba(255,255,255,0.55);
    line-height: 1.7;
    margin-bottom: 32px;
}

.contact-certs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 36px;
}
.contact-cert-item {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.7);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 8px;
}
.contact-cert-item i { color: #10b981; font-size: 0.72rem; }

.contact-nps {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 24px;
}
.contact-nps-label {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.4);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 8px;
}
.contact-nps-score { display: flex; gap: 4px; margin-bottom: 6px; }
.contact-nps-score i { color: #f59e0b; font-size: 1rem; }
.contact-nps-sub {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.5);
    font-weight: 500;
}

/* Colonne droite — panneau blanc */
.contact-panel-wrap {
    background: var(--gray-50);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 48px;
}

.contact-panel {
    background: var(--white);
    border-radius: 16px;
    box-shadow: 0 4px 40px rgba(0,0,0,0.10);
    padding: 40px 36px;
    width: 100%;
    max-width: 520px;
    border: 1px solid var(--gray-200);
}

.contact-panel-header { margin-bottom: 28px; }
.contact-panel-header h3 {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 4px;
}
.contact-panel-header p { font-size: 0.82rem; color: var(--gray-500); }

/* Champs du formulaire */
.cp-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}
.cp-group { display: flex; flex-direction: column; }
.cp-group-full { margin-bottom: 12px; }

.cp-group input,
.cp-group select,
.cp-group textarea,
.cp-group-full select,
.cp-group-full textarea {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid var(--gray-200);
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.88rem;
    color: var(--gray-800);
    background: var(--white);
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
}
.cp-group input::placeholder,
.cp-group textarea::placeholder { color: var(--gray-400); }
.cp-group input:focus,
.cp-group select:focus,
.cp-group textarea:focus,
.cp-group-full select:focus,
.cp-group-full textarea:focus {
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(16,185,129,0.12);
}

.cp-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 18px;
    font-size: 0.78rem;
    color: var(--gray-500);
    line-height: 1.5;
}
.cp-checkbox input { flex-shrink: 0; margin-top: 3px; accent-color: var(--green); }
.cp-checkbox a { color: var(--green); text-decoration: underline; }

.cp-submit {
    width: 100%;
    padding: 14px;
    background: var(--green);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 0.2s, transform 0.2s;
    margin-bottom: 12px;
}
.cp-submit:hover { background: var(--green-dark); transform: translateY(-1px); }

.cp-note {
    text-align: center;
    font-size: 0.74rem;
    color: var(--gray-400);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
.cp-note i { color: var(--green); font-size: 0.7rem; }

/* ── Responsive ── */
@media (max-width: 1024px) {
    .contact-bg { grid-template-columns: 1fr; }
    .contact-bg-left { padding: 60px 40px; }
    .contact-bg-title { font-size: 2rem; }
    .contact-panel-wrap { padding: 40px 24px; }
}
@media (max-width: 768px) {
    .contact-bg-left { padding: 48px 24px; }
    .cp-row { grid-template-columns: 1fr; }
    .contact-panel { padding: 28px 20px; }
}

/* ================================================================
   CONTACT — Correction style BitRaser exact
   ================================================================ */

/* Fond sombre pleine largeur */
.contact-bg {
    display: grid !important;
    grid-template-columns: 45% 55% !important;
    min-height: 680px !important;
    background: linear-gradient(160deg, #0f172a 0%, #1e293b 50%, #064e3b 100%) !important;
}

/* Colonne gauche — sur fond sombre */
.contact-bg-left {
    background: transparent !important;
    padding: 80px 56px !important;
}

/* Colonne droite — fond sombre aussi, panneau centré */
.contact-panel-wrap {
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 48px 56px 48px 24px !important;
}

/* Panneau blanc plus grand et plus marqué */
.contact-panel {
    background: #fff !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 60px rgba(0,0,0,0.35) !important;
    padding: 36px 32px !important;
    width: 100% !important;
    max-width: 560px !important;
    border: none !important;
}

/* Header panneau */
.contact-panel-header h3 {
    font-size: 1.4rem !important;
    font-weight: 800 !important;
    color: #111827 !important;
}
.contact-panel-header p {
    font-size: 0.8rem !important;
    color: #6b7280 !important;
}

/* Inputs : style épuré comme BitRaser */
.cp-group input,
.cp-group select,
.cp-group textarea,
.cp-group-full select,
.cp-group-full textarea {
    border: 1.5px solid #e5e7eb !important;
    border-radius: 6px !important;
    padding: 12px 14px !important;
    font-size: 0.87rem !important;
    color: #374151 !important;
    background: #fff !important;
}
.cp-group input:focus,
.cp-group select:focus,
.cp-group textarea:focus,
.cp-group-full select:focus {
    border-color: #10b981 !important;
    box-shadow: 0 0 0 3px rgba(16,185,129,0.12) !important;
}

/* Bouton pleine largeur */
.cp-submit {
    background: #10b981 !important;
    border-radius: 8px !important;
    font-size: 1rem !important;
    padding: 15px !important;
}
.cp-submit:hover { background: #059669 !important; }

/* Responsive */
@media (max-width: 1024px) {
    .contact-bg {
        grid-template-columns: 1fr !important;
        min-height: auto !important;
    }
    .contact-panel-wrap {
        padding: 40px 24px 56px !important;
    }
}

/* ================================================================
   CONTACT — Ajustement final : panneau qui déborde vers le haut
   ================================================================ */

/* Section avec overflow visible pour le débordement */
.contact {
    overflow: visible !important;
    position: relative;
    padding: 0 !important;
}

/* Fond sombre avec padding-top pour laisser place au débordement */
.contact-bg {
    grid-template-columns: 40% 60% !important;
    min-height: 640px !important;
    position: relative;
}

/* Colonne gauche : texte plus petit, aligné en bas */
.contact-bg-left {
    padding: 60px 48px 60px 60px !important;
    justify-content: flex-start !important;
    align-items: flex-end !important;
}

.contact-bg-content {
    padding-bottom: 20px;
}

.contact-bg-title {
    font-size: 2.2rem !important;
}

/* Colonne droite : panneau qui déborde */
.contact-panel-wrap {
    padding: 0 48px 0 0 !important;
    align-items: center !important;
    justify-content: flex-end !important;
    overflow: visible !important;
}

.contact-panel {
    margin-top: -60px !important;
    margin-bottom: -60px !important;
    max-width: 580px !important;
    box-shadow: 0 20px 80px rgba(0,0,0,0.4) !important;
    border-radius: 16px !important;
    padding: 40px 36px !important;
    position: relative;
    z-index: 10;
}

/* Responsive */
@media (max-width: 1024px) {
    .contact-panel {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    .contact-bg-left {
        align-items: flex-start !important;
        padding: 48px 32px !important;
    }
    .contact-panel-wrap {
        padding: 32px 24px 48px !important;
        justify-content: center !important;
    }
}

/* ================================================================
   CONTACT — Refonte finale exacte style BitRaser
   ================================================================ */

/* La section elle-même sur fond blanc */
.contact {
    padding: 0 !important;
    overflow: visible !important;
    background: #fff !important;
    position: relative !important;
}

/* Grille : 40% sombre | 60% blanc */
.contact-bg {
    display: grid !important;
    grid-template-columns: 40% 60% !important;
    min-height: 600px !important;
    background: transparent !important;
}

/* Colonne gauche — fond sombre */
.contact-bg-left {
    background: linear-gradient(160deg, #0f172a 0%, #1e293b 60%, #064e3b 100%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 80px 48px !important;
    position: relative !important;
    overflow: hidden !important;
}
.contact-bg-left::before {
    content: '';
    position: absolute;
    bottom: -80px; right: -80px;
    width: 320px; height: 320px;
    background: radial-gradient(circle, rgba(16,185,129,0.12) 0%, transparent 70%);
    pointer-events: none;
}

/* Colonne droite — fond blanc avec le panneau */
.contact-panel-wrap {
    background: #f9fafb !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 80px 64px !important;
    position: relative !important;
}

/* Panneau blanc flottant qui déborde vers le haut */
.contact-panel {
    background: #fff !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.04), 0 20px 50px rgba(0,0,0,0.10) !important;
    padding: 40px 36px !important;
    width: 100% !important;
    max-width: 540px !important;
    border: 1px solid #f3f4f6 !important;
    margin-top: -80px !important;
    margin-bottom: -80px !important;
    position: relative !important;
    z-index: 20 !important;
}

/* Responsive */
@media (max-width: 1100px) {
    .contact-bg { grid-template-columns: 1fr !important; }
    .contact-bg-left { padding: 60px 36px !important; }
    .contact-panel-wrap { padding: 40px 24px 56px !important; }
    .contact-panel { margin-top: 0 !important; margin-bottom: 0 !important; }
}
@media (max-width: 640px) {
    .cp-row { grid-template-columns: 1fr !important; }
}

/* ================================================================
   CONTACT — Structure exacte BitRaser
   fond blanc page entière + fond sombre absolu sur moitié gauche
   ================================================================ */

.contact {
    background: #fff !important;
    padding: 60px 0 60px !important;
    position: relative !important;
    overflow: visible !important;
}

/* Fond sombre couvre la moitié gauche en absolu */
.contact::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important; left: 0 !important; bottom: 0 !important;
    width: 42% !important;
    background: linear-gradient(160deg, #0f172a 0%, #1e293b 55%, #064e3b 100%) !important;
    z-index: 0 !important;
}

.contact-bg {
    display: grid !important;
    grid-template-columns: 42% 58% !important;
    min-height: auto !important;
    background: transparent !important;
    position: relative !important;
    z-index: 1 !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
}

/* Colonne gauche : texte sur fond transparent (le ::before s'en charge) */
.contact-bg-left {
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 40px 48px 40px 0 !important;
    position: relative !important;
    z-index: 2 !important;
    overflow: visible !important;
}
.contact-bg-left::before { display: none !important; }

/* Colonne droite : fond blanc, panneau visible */
.contact-panel-wrap {
    background: transparent !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    padding: 0 0 0 48px !important;
    position: relative !important;
    z-index: 2 !important;
}

/* Panneau blanc flottant */
.contact-panel {
    background: #fff !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05), 0 20px 60px rgba(0,0,0,0.12) !important;
    padding: 40px 36px !important;
    width: 100% !important;
    max-width: 560px !important;
    border: 1px solid #f1f5f9 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    position: relative !important;
    z-index: 10 !important;
}

@media (max-width: 1024px) {
    .contact::before { width: 100% !important; }
    .contact-bg { grid-template-columns: 1fr !important; padding: 0 16px !important; }
    .contact-bg-left { padding: 40px 0 !important; }
    .contact-panel-wrap { padding: 0 0 48px !important; }
}
@media (max-width: 640px) {
    .cp-row { grid-template-columns: 1fr !important; }
}

/* ================================================================
   CONTACT — Structure FINALE BitRaser exacte
   Panneau centré à droite, déborde en haut sur fond blanc
   ================================================================ */

.contact {
    background: #fff !important;
    padding: 0 !important;
    position: relative !important;
    overflow: visible !important;
    margin-top: 0 !important;
}

/* Fond sombre : moitié gauche, commence 80px après le début */
.contact::before {
    content: '' !important;
    position: absolute !important;
    top: 80px !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 50% !important;
    background: linear-gradient(160deg, #0f172a 0%, #1e293b 55%, #064e3b 100%) !important;
    z-index: 0 !important;
}

/* Fond blanc côté droit : noir foncé comme BitRaser */
.contact::after {
    content: '' !important;
    position: absolute !important;
    top: 80px !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 50% !important;
    background: #111827 !important;
    z-index: 0 !important;
}

.contact-bg {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    min-height: 700px !important;
    background: transparent !important;
    position: relative !important;
    z-index: 2 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: center !important;
}

/* Colonne gauche */
.contact-bg-left {
    background: transparent !important;
    padding: 140px 80px 80px 10% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    position: relative !important;
    z-index: 2 !important;
}
.contact-bg-left::before { display: none !important; }

/* Colonne droite */
.contact-panel-wrap {
    background: transparent !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    padding: 0 !important;
    position: relative !important;
    z-index: 2 !important;
}

/* Panneau : centré, déborde vers le haut de 80px */
.contact-panel {
    background: #fff !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 80px rgba(0,0,0,0.35) !important;
    padding: 40px 36px !important;
    width: 90% !important;
    max-width: 540px !important;
    border: none !important;
    margin-top: -80px !important;
    margin-bottom: 80px !important;
    margin-left: -10% !important;
    position: relative !important;
    z-index: 10 !important;
}

@media (max-width: 1024px) {
    .contact::before, .contact::after { width: 100% !important; top: 0 !important; }
    .contact::after { display: none !important; }
    .contact-bg { grid-template-columns: 1fr !important; }
    .contact-bg-left { padding: 60px 32px 40px !important; }
    .contact-panel-wrap { justify-content: center !important; padding: 0 24px 60px !important; }
    .contact-panel { margin: 0 !important; width: 100% !important; }
}

/* ================================================================
   CONTACT — HTML restructuré, positionnement absolu exact BitRaser
   ================================================================ */

/* Section : fond blanc, overflow visible pour le débordement */
.contact {
    position: relative !important;
    background: #fff !important;
    padding: 0 !important;
    overflow: visible !important;
}

/* Fond sombre : occupe la moitié gauche, commence 80px en dessous du haut */
.contact-dark-bg {
    position: absolute !important;
    top: 80px !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 50% !important;
    background: linear-gradient(160deg, #0f172a 0%, #1e293b 55%, #064e3b 100%) !important;
    z-index: 0 !important;
}

/* Wrapper flex pour aligner texte gauche + panneau droit */
.contact-inner {
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    align-items: flex-start !important;
    min-height: 600px !important;
    padding: 0 !important;
    max-width: none !important;
}

/* Texte gauche : prend 50% de la largeur, padding-top pour descendre sous le blanc */
.contact-left-text {
    width: 50% !important;
    flex-shrink: 0 !important;
    padding: 120px 64px 80px 10vw !important;
    position: relative !important;
    z-index: 2 !important;
}

/* Panneau formulaire : dans la moitié droite, déborde vers le haut de 80px */
.contact-panel {
    width: 50% !important;
    max-width: none !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    position: relative !important;
    z-index: 10 !important;
    background: #fff !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 60px rgba(0,0,0,0.20) !important;
    padding: 40px 48px !important;
    border: 1px solid #f1f5f9 !important;
    /* Déborde 80px vers le haut et la hauteur du fond sombre */
    margin-top: -80px !important;
    /* Décalé légèrement à gauche pour chevaucher les deux fonds */
    transform: translateX(-40px) !important;
    align-self: flex-start !important;
    /* Marge bottom pour que la section soit assez haute */
    margin-bottom: 60px !important;
}

/* Responsive */
@media (max-width: 1024px) {
    .contact-dark-bg { width: 100% !important; top: 0 !important; }
    .contact-inner { flex-direction: column !important; }
    .contact-left-text { width: 100% !important; padding: 60px 24px 40px !important; }
    .contact-panel {
        width: calc(100% - 48px) !important;
        margin: 0 24px 40px !important;
        transform: none !important;
        align-self: auto !important;
    }
}

/* ================================================================
   CONTACT — DEUX CARTES côte à côte sur fond blanc (style BitRaser exact)
   Override toutes les règles précédentes
   ================================================================ */

/* Reset complet de tous les éléments précédents */
.contact-dark-bg,
.contact-inner,
.contact-left-text,
.contact-bg-left,
.contact-panel-wrap {
    display: none !important;
}

/* Section : fond blanc simple, sans débordement */
.contact {
    background: #fff !important;
    padding: 80px 0 !important;
    overflow: visible !important;
    position: relative !important;
}
.contact::before,
.contact::after { display: none !important; content: none !important; }

/* Container flex : 2 cartes côte à côte */
.contact-container {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
    display: flex !important;
    align-items: stretch !important;
    gap: 0 !important;
    position: relative !important;
}

/* Carte sombre à gauche */
.contact-dark-card {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    width: 50% !important;
    background: linear-gradient(160deg, #0f172a 0%, #1e293b 55%, #064e3b 100%) !important;
    border-radius: 16px !important;
    padding: 56px 48px 56px 56px !important;
    color: #fff !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15) !important;
    position: relative !important;
    z-index: 1 !important;
    overflow: hidden !important;
}
.contact-dark-card::before {
    content: '' !important;
    position: absolute !important;
    bottom: -60px !important;
    right: -60px !important;
    width: 280px !important;
    height: 280px !important;
    background: radial-gradient(circle, rgba(16,185,129,0.15) 0%, transparent 70%) !important;
    pointer-events: none !important;
}

/* Carte blanche à droite, légèrement chevauchée sur la sombre */
.contact-panel {
    width: 52% !important;
    max-width: none !important;
    background: #fff !important;
    border-radius: 16px !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.12) !important;
    padding: 48px 40px !important;
    margin: 0 !important;
    margin-left: -40px !important;
    align-self: center !important;
    position: relative !important;
    z-index: 10 !important;
    transform: none !important;
}

/* Espacement vertical interne carte sombre */
.contact-dark-card .contact-trust-badge { margin-bottom: 24px !important; }
.contact-dark-card .contact-bg-title { font-size: 2rem !important; margin-bottom: 18px !important; }
.contact-dark-card .contact-bg-sub { margin-bottom: 32px !important; }
.contact-dark-card .contact-certs { margin-bottom: 32px !important; }

/* Responsive */
@media (max-width: 1024px) {
    .contact-container { flex-direction: column !important; gap: 24px !important; padding: 0 16px !important; }
    .contact-dark-card { width: 100% !important; padding: 40px 32px !important; }
    .contact-panel { width: 100% !important; margin-left: 0 !important; }
}
@media (max-width: 640px) {
    .cp-row { grid-template-columns: 1fr !important; }
    .contact-dark-card .contact-bg-title { font-size: 1.6rem !important; }
}

/* ════════════════════════════════════════════════════════════════
   CONTACT SECTION — Préfixe rvx- pour éviter tout conflit
   Deux cartes côte à côte sur fond blanc style BitRaser
   ════════════════════════════════════════════════════════════════ */

.rvx-contact-section {
    background: #ffffff;
    padding: 80px 0;
    position: relative;
}

.rvx-contact-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: stretch;
    gap: 0;
    position: relative;
}

/* ── Carte sombre ── */
.rvx-dark-card {
    flex: 1 1 50%;
    background: linear-gradient(160deg, #0f172a 0%, #1e293b 55%, #064e3b 100%);
    color: #ffffff;
    border-radius: 16px;
    padding: 56px 48px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 1;
}
.rvx-dark-card::after {
    content: '';
    position: absolute;
    bottom: -60px;
    right: -60px;
    width: 280px;
    height: 280px;
    background: radial-gradient(circle, rgba(16,185,129,0.15) 0%, transparent 70%);
    pointer-events: none;
}

.rvx-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(16,185,129,0.15);
    border: 1px solid rgba(16,185,129,0.3);
    color: #6ee7b7;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 6px 16px;
    border-radius: 20px;
    margin-bottom: 24px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    align-self: flex-start;
}

.rvx-card-title {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: 2.1rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.15;
    margin-bottom: 18px;
    letter-spacing: -0.3px;
}

.rvx-card-sub {
    font-size: 1rem;
    color: rgba(255,255,255,0.65);
    line-height: 1.7;
    margin-bottom: 32px;
}

.rvx-certs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 32px;
}
.rvx-cert {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.8);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 8px;
}
.rvx-cert i { color: #10b981; font-size: 0.72rem; }

.rvx-nps {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 24px;
}
.rvx-nps-label {
    font-size: 0.74rem;
    color: rgba(255,255,255,0.4);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 8px;
}
.rvx-stars { display: flex; gap: 4px; margin-bottom: 6px; }
.rvx-stars i { color: #f59e0b; font-size: 1rem; }
.rvx-nps-sub {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.5);
    font-weight: 500;
}

/* ── Carte blanche (formulaire) ── */
.rvx-form-card {
    flex: 1 1 52%;
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 20px 60px rgba(0,0,0,0.12);
    padding: 48px 40px;
    margin-left: -40px;
    align-self: center;
    position: relative;
    z-index: 10;
}

.rvx-form-header { margin-bottom: 24px; }
.rvx-form-header h3 {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: 1.35rem;
    font-weight: 800;
    color: #111827;
    margin-bottom: 4px;
}
.rvx-form-header p {
    font-size: 0.82rem;
    color: #6b7280;
    margin: 0;
}

.rvx-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}
.rvx-field { display: flex; flex-direction: column; margin-bottom: 12px; }
.rvx-row .rvx-field { margin-bottom: 0; }
.rvx-field-full { width: 100%; }

.rvx-field input,
.rvx-field select,
.rvx-field textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.88rem;
    color: #374151;
    background: #ffffff;
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
}
.rvx-field input::placeholder,
.rvx-field textarea::placeholder { color: #9ca3af; }
.rvx-field input:focus,
.rvx-field select:focus,
.rvx-field textarea:focus {
    border-color: #10b981;
    box-shadow: 0 0 0 3px rgba(16,185,129,0.12);
}

.rvx-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 18px;
    font-size: 0.78rem;
    color: #6b7280;
    line-height: 1.5;
}
.rvx-check input { flex-shrink: 0; margin-top: 3px; accent-color: #10b981; }
.rvx-check a { color: #10b981; text-decoration: underline; }

.rvx-submit {
    width: 100%;
    padding: 14px;
    background: #10b981;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 0.2s, transform 0.2s;
    margin-bottom: 12px;
}
.rvx-submit:hover { background: #059669; transform: translateY(-1px); }

.rvx-note {
    text-align: center;
    font-size: 0.74rem;
    color: #9ca3af;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin: 0;
}
.rvx-note i { color: #10b981; font-size: 0.7rem; }

/* ── Responsive ── */
@media (max-width: 1024px) {
    .rvx-contact-wrap {
        flex-direction: column;
        gap: 24px;
        padding: 0 16px;
    }
    .rvx-dark-card,
    .rvx-form-card {
        flex: 1 1 100%;
        margin-left: 0;
    }
    .rvx-dark-card { padding: 40px 32px; }
    .rvx-form-card { padding: 36px 28px; }
}
@media (max-width: 640px) {
    .rvx-row { grid-template-columns: 1fr; }
    .rvx-card-title { font-size: 1.6rem; }
}

/* ════════════════════════════════════════════════════════════════
   HALO LUMINEUX VERT — Style BitRaser appliqué en vert
   Effet glow diffus en arrière-plan des sections
   ════════════════════════════════════════════════════════════════ */

/* Halos sur les sections principales */
.services,
.certifications,
.process,
.sectors,
.about,
.blog-preview,
.testimonials,
.esg,
.partners {
    position: relative;
    overflow: hidden;
}

/* Halo gauche */
.services::before,
.certifications::before,
.process::before,
.sectors::before,
.about::before,
.blog-preview::before,
.testimonials::before,
.esg::before,
.partners::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -300px;
    width: 700px;
    height: 700px;
    transform: translateY(-50%);
    background: radial-gradient(circle, rgba(16,185,129,0.18) 0%, rgba(16,185,129,0.08) 30%, transparent 65%);
    pointer-events: none;
    z-index: 0;
    filter: blur(40px);
}

/* Halo droit */
.services::after,
.certifications::after,
.process::after,
.sectors::after,
.about::after,
.blog-preview::after,
.testimonials::after,
.esg::after,
.partners::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -300px;
    width: 700px;
    height: 700px;
    transform: translateY(-50%);
    background: radial-gradient(circle, rgba(5,150,105,0.15) 0%, rgba(16,185,129,0.06) 30%, transparent 65%);
    pointer-events: none;
    z-index: 0;
    filter: blur(40px);
}

/* S'assurer que le contenu reste au-dessus du halo */
.services > *,
.certifications > *,
.process > *,
.sectors > *,
.about > *,
.blog-preview > *,
.testimonials > *,
.esg > *,
.partners > * {
    position: relative;
    z-index: 1;
}

/* Halo plus subtil sur sections sombres (premium-features) */
.premium-features {
    position: relative;
    overflow: hidden;
}
.premium-features::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 800px;
    height: 100%;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at center, rgba(16,185,129,0.12) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
    filter: blur(60px);
}
.premium-features > * { position: relative; z-index: 1; }

/* Halo sur la section contact (deux cartes) */
.rvx-contact-section {
    position: relative;
    overflow: hidden;
}
.rvx-contact-section::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -200px;
    width: 600px;
    height: 600px;
    transform: translateY(-50%);
    background: radial-gradient(circle, rgba(16,185,129,0.15) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
    filter: blur(50px);
}
.rvx-contact-section::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -200px;
    width: 600px;
    height: 600px;
    transform: translateY(-50%);
    background: radial-gradient(circle, rgba(5,150,105,0.12) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
    filter: blur(50px);
}
.rvx-contact-wrap { position: relative; z-index: 2; }

/* Responsive : halos plus petits sur mobile pour pas trop charger */
@media (max-width: 768px) {
    .services::before, .services::after,
    .certifications::before, .certifications::after,
    .process::before, .process::after,
    .sectors::before, .sectors::after,
    .about::before, .about::after,
    .blog-preview::before, .blog-preview::after,
    .testimonials::before, .testimonials::after,
    .esg::before, .esg::after,
    .partners::before, .partners::after,
    .rvx-contact-section::before,
    .rvx-contact-section::after {
        width: 400px;
        height: 400px;
        opacity: 0.6;
    }
}

/* ════════════════════════════════════════════════════════════════
   HALO VERT — Intensité augmentée (override)
   ════════════════════════════════════════════════════════════════ */

/* Halo gauche - plus intense et plus grand */
.services::before,
.certifications::before,
.process::before,
.sectors::before,
.about::before,
.blog-preview::before,
.testimonials::before,
.esg::before,
.partners::before,
.rvx-contact-section::before {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: -400px !important;
    width: 1000px !important;
    height: 1000px !important;
    transform: translateY(-50%) !important;
    background: radial-gradient(circle, rgba(16,185,129,0.45) 0%, rgba(16,185,129,0.25) 25%, rgba(16,185,129,0.10) 50%, transparent 70%) !important;
    pointer-events: none !important;
    z-index: 0 !important;
    filter: blur(60px) !important;
    opacity: 1 !important;
}

/* Halo droit - plus intense et plus grand */
.services::after,
.certifications::after,
.process::after,
.sectors::after,
.about::after,
.blog-preview::after,
.testimonials::after,
.esg::after,
.partners::after,
.rvx-contact-section::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    right: -400px !important;
    width: 1000px !important;
    height: 1000px !important;
    transform: translateY(-50%) !important;
    background: radial-gradient(circle, rgba(5,150,105,0.40) 0%, rgba(16,185,129,0.20) 25%, rgba(16,185,129,0.08) 50%, transparent 70%) !important;
    pointer-events: none !important;
    z-index: 0 !important;
    filter: blur(60px) !important;
    opacity: 1 !important;
}

/* Cards services & autres : fond légèrement transparent pour laisser passer le halo */
.service-card,
.cert-card,
.sector-card,
.pillar-card,
.testimonial-card,
.blog-card {
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* ════════════════════════════════════════════════════════════════
   HALO VERT — Version finale subtile & diffuse comme BitRaser
   ════════════════════════════════════════════════════════════════ */

/* Halo gauche : plus doux, plus large, fondu */
.services::before,
.certifications::before,
.process::before,
.sectors::before,
.about::before,
.blog-preview::before,
.testimonials::before,
.esg::before,
.partners::before,
.rvx-contact-section::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -600px !important;
    width: 1400px !important;
    height: 100% !important;
    transform: none !important;
    background: radial-gradient(ellipse at center, rgba(16,185,129,0.15) 0%, rgba(16,185,129,0.06) 35%, transparent 70%) !important;
    pointer-events: none !important;
    z-index: 0 !important;
    filter: blur(80px) !important;
    opacity: 0.9 !important;
}

/* Halo droit : plus doux, plus large, fondu */
.services::after,
.certifications::after,
.process::after,
.sectors::after,
.about::after,
.blog-preview::after,
.testimonials::after,
.esg::after,
.partners::after,
.rvx-contact-section::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    right: -600px !important;
    width: 1400px !important;
    height: 100% !important;
    transform: none !important;
    background: radial-gradient(ellipse at center, rgba(5,150,105,0.12) 0%, rgba(16,185,129,0.05) 35%, transparent 70%) !important;
    pointer-events: none !important;
    z-index: 0 !important;
    filter: blur(80px) !important;
    opacity: 0.9 !important;
}

/* Cards : fond bien blanc opaque pour contraste, halo passe en arrière */
.service-card,
.cert-card,
.sector-card,
.pillar-card,
.testimonial-card,
.blog-card {
    background: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* ════════════════════════════════════════════════════════════════
   SÉPARATEURS HORIZONTAUX — Ligne dégradée verte entre sections
   Style BitRaser appliqué en vert
   ════════════════════════════════════════════════════════════════ */

.services,
.certifications,
.process,
.sectors,
.about,
.blog-preview,
.testimonials,
.esg,
.partners,
.premium-features,
.data-risks,
.destruction-detail,
.video-section,
.rvx-contact-section {
    border-top: 1px solid transparent;
    border-image: linear-gradient(
        90deg,
        transparent 0%,
        rgba(16,185,129,0.4) 30%,
        rgba(16,185,129,0.8) 50%,
        rgba(16,185,129,0.4) 70%,
        transparent 100%
    ) 1;
}

/* Effet glow lumineux supplémentaire sur la ligne */
.services,
.certifications,
.process,
.sectors,
.about,
.blog-preview,
.testimonials,
.esg,
.partners,
.premium-features,
.data-risks,
.destruction-detail,
.video-section,
.rvx-contact-section {
    position: relative;
}

.services > .container::before,
.certifications > .container::before,
.process > .container::before,
.sectors > .container::before,
.about > .container::before,
.blog-preview > .container::before,
.testimonials > .container::before,
.esg > .container::before,
.partners > .container::before,
.premium-features > .container::before,
.data-risks > .container::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(16,185,129,0.6) 50%,
        transparent 100%
    );
    filter: blur(2px);
    pointer-events: none;
    z-index: 5;
}

/* ════════════════════════════════════════════════════════════════
   SÉPARATEURS — Correction position (override final)
   ════════════════════════════════════════════════════════════════ */

/* Supprimer le glow flou qui chevauchait le contenu */
.services > .container::before,
.certifications > .container::before,
.process > .container::before,
.sectors > .container::before,
.about > .container::before,
.blog-preview > .container::before,
.testimonials > .container::before,
.esg > .container::before,
.partners > .container::before,
.premium-features > .container::before,
.data-risks > .container::before {
    display: none !important;
    content: none !important;
}

/* Garder uniquement la ligne fine en bordure (border-image) - propre et nette */
.services,
.certifications,
.process,
.sectors,
.about,
.blog-preview,
.testimonials,
.esg,
.partners,
.premium-features,
.data-risks,
.destruction-detail,
.video-section,
.rvx-contact-section {
    border-top: 1px solid transparent !important;
    border-image: linear-gradient(
        90deg,
        transparent 0%,
        rgba(16,185,129,0.5) 30%,
        rgba(16,185,129,0.9) 50%,
        rgba(16,185,129,0.5) 70%,
        transparent 100%
    ) 1 !important;
}

/* ════════════════════════════════════════════════════════════════
   HOVER CARDS — Effet dégradé vert au survol (style BitRaser)
   ════════════════════════════════════════════════════════════════ */

/* Service cards : dégradé vert au survol */
.service-card {
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer;
    overflow: hidden;
}
.service-card:hover {
    background: linear-gradient(135deg, #10b981 0%, #047857 50%, #064e3b 100%) !important;
    border-color: transparent !important;
    transform: translateY(-6px) !important;
    box-shadow: 0 20px 60px rgba(16,185,129,0.4) !important;
}
.service-card:hover h3,
.service-card:hover p,
.service-card:hover .service-features li,
.service-card:hover .service-cta {
    color: #ffffff !important;
}
.service-card:hover .service-features li i {
    color: #6ee7b7 !important;
}
.service-card:hover .service-card-icon-wrap {
    background: rgba(255,255,255,0.15) !important;
    color: #ffffff !important;
    border-color: rgba(255,255,255,0.25) !important;
}
.service-card:hover .service-badge {
    background: rgba(255,255,255,0.2) !important;
    color: #ffffff !important;
}
.service-card:hover .service-cta {
    border-top-color: rgba(255,255,255,0.2) !important;
}
.service-card:hover::before {
    opacity: 0 !important;
}

/* Sector cards : dégradé au survol */
.sector-card {
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer;
}
.sector-card:hover {
    background: linear-gradient(135deg, #10b981 0%, #047857 50%, #064e3b 100%) !important;
    border-color: transparent !important;
    transform: translateY(-6px) !important;
    box-shadow: 0 20px 50px rgba(16,185,129,0.4) !important;
}
.sector-card:hover h3,
.sector-card:hover p {
    color: #ffffff !important;
}
.sector-card:hover .sector-icon {
    background: rgba(255,255,255,0.15) !important;
    color: #ffffff !important;
}

/* Cert cards : dégradé au survol */
.cert-card {
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer;
}
.cert-card:hover {
    background: linear-gradient(135deg, #10b981 0%, #047857 50%, #064e3b 100%) !important;
    border-color: transparent !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 15px 40px rgba(16,185,129,0.35) !important;
}
.cert-card:hover h4,
.cert-card:hover p {
    color: #ffffff !important;
}
.cert-card:hover .cert-icon,
.cert-card:hover .cert-icon i {
    color: #6ee7b7 !important;
}

/* Pillar cards : dégradé au survol */
.pillar-card {
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer;
}
.pillar-card:hover {
    background: linear-gradient(135deg, #10b981 0%, #047857 50%, #064e3b 100%) !important;
    border-color: transparent !important;
    transform: translateY(-6px) !important;
    box-shadow: 0 20px 60px rgba(16,185,129,0.4) !important;
}
.pillar-card:hover h3,
.pillar-card:hover > p,
.pillar-card:hover .pillar-features li,
.pillar-card:hover .pillar-link {
    color: #ffffff !important;
}
.pillar-card:hover .pillar-features li::before {
    color: #6ee7b7 !important;
}
.pillar-card:hover .pillar-number {
    color: rgba(255,255,255,0.25) !important;
}
.pillar-card:hover .pillar-icon {
    background: rgba(255,255,255,0.15) !important;
    color: #ffffff !important;
}
.pillar-card:hover::before {
    background: rgba(255,255,255,0.3) !important;
}

/* Blog cards : dégradé au survol */
.blog-card {
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer;
}
.blog-card:hover {
    background: linear-gradient(135deg, #10b981 0%, #047857 50%, #064e3b 100%) !important;
    border-color: transparent !important;
    transform: translateY(-6px) !important;
    box-shadow: 0 20px 50px rgba(16,185,129,0.4) !important;
}
.blog-card:hover h3,
.blog-card:hover > p,
.blog-card:hover .blog-card-content > p,
.blog-card:hover .blog-card-content time,
.blog-card:hover .blog-read-more {
    color: #ffffff !important;
}
.blog-card:hover .blog-card-placeholder {
    background: rgba(255,255,255,0.1) !important;
}
.blog-card:hover .blog-card-placeholder i {
    color: rgba(255,255,255,0.5) !important;
}
.blog-card:hover .blog-category {
    background: rgba(255,255,255,0.2) !important;
    color: #ffffff !important;
}

/* ════════════════════════════════════════════════════════════════
   HOVER CARDS — Désactiver le dégradé sauf pour Sectors
   ════════════════════════════════════════════════════════════════ */

/* Annuler le hover dégradé sur Service / Cert / Pillar / Blog cards */
.service-card:hover,
.cert-card:hover,
.pillar-card:hover,
.blog-card:hover {
    background: #ffffff !important;
    border-color: var(--green-200) !important;
    box-shadow: var(--shadow-lg) !important;
}

.service-card:hover h3,
.service-card:hover p,
.service-card:hover .service-features li,
.service-card:hover .service-cta,
.cert-card:hover h4,
.cert-card:hover p,
.pillar-card:hover h3,
.pillar-card:hover > p,
.pillar-card:hover .pillar-features li,
.pillar-card:hover .pillar-link,
.blog-card:hover h3,
.blog-card:hover > p,
.blog-card:hover .blog-card-content > p,
.blog-card:hover .blog-card-content time,
.blog-card:hover .blog-read-more {
    color: inherit !important;
}

.service-card:hover .service-features li i { color: var(--green) !important; }
.service-card:hover .service-card-icon-wrap {
    background: var(--green) !important;
    color: white !important;
    border-color: var(--green) !important;
}
.service-card:hover .service-badge {
    background: var(--green-100) !important;
    color: var(--green-darker) !important;
}
.service-card:hover .service-cta { border-top-color: var(--gray-100) !important; }
.service-card:hover::before { opacity: 1 !important; }

.cert-card:hover .cert-icon,
.cert-card:hover .cert-icon i { color: var(--green) !important; }

.pillar-card:hover .pillar-features li::before { color: var(--green) !important; }
.pillar-card:hover .pillar-number { color: var(--gray-200) !important; }
.pillar-card:hover .pillar-icon { /* garde les couleurs originales */ }
.pillar-card:hover::before { background: var(--green) !important; }

.blog-card:hover .blog-card-placeholder { background: var(--green-50) !important; }
.blog-card:hover .blog-card-placeholder i { color: var(--green-300) !important; }
.blog-card:hover .blog-category {
    background: var(--white) !important;
    color: var(--green-darker) !important;
}

/* Sector cards : SEUL le dégradé reste actif (déjà défini plus haut) */

/* ════════════════════════════════════════════════════════════════
   HOVER — Inverser : Pillars OUI, Sectors NON
   ════════════════════════════════════════════════════════════════ */

/* ── DÉSACTIVER hover dégradé sur Sectors ── */
.sector-card:hover {
    background: var(--white) !important;
    border-color: var(--green-200) !important;
    box-shadow: var(--shadow-lg) !important;
    transform: translateY(-4px) !important;
}
.sector-card:hover h3,
.sector-card:hover p {
    color: inherit !important;
}
.sector-card:hover .sector-icon {
    background: var(--green) !important;
    color: var(--white) !important;
}

/* ── ACTIVER hover dégradé sur Pillars (les 3 piliers) ── */
.pillar-card {
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer;
    overflow: hidden;
}
.pillar-card:hover {
    background: linear-gradient(135deg, #10b981 0%, #047857 50%, #064e3b 100%) !important;
    border-color: transparent !important;
    transform: translateY(-6px) !important;
    box-shadow: 0 20px 60px rgba(16,185,129,0.4) !important;
}
.pillar-card:hover h3,
.pillar-card:hover > p,
.pillar-card:hover .pillar-features li,
.pillar-card:hover .pillar-link {
    color: #ffffff !important;
}
.pillar-card:hover .pillar-features li::before {
    color: #6ee7b7 !important;
}
.pillar-card:hover .pillar-number {
    color: rgba(255,255,255,0.25) !important;
}
.pillar-card:hover .pillar-icon {
    background: rgba(255,255,255,0.15) !important;
    color: #ffffff !important;
}
.pillar-card:hover::before {
    background: rgba(255,255,255,0.3) !important;
    opacity: 1 !important;
}
.pillar-card:hover .pillar-badge {
    background: rgba(255,255,255,0.2) !important;
    color: #ffffff !important;
}

/* ════════════════════════════════════════════════════════════════
   HOVER FINAL — Secteurs OUI, Piliers : icônes seulement
   ════════════════════════════════════════════════════════════════ */

/* ── DÉSACTIVER hover dégradé sur les Piliers ── */
.pillar-card:hover {
    background: var(--white) !important;
    border-color: var(--green-200) !important;
    box-shadow: var(--shadow-xl) !important;
    transform: translateY(-5px) !important;
}
.pillar-featured:hover {
    background: linear-gradient(160deg, var(--green-50), #f0fdf4) !important;
    border-color: var(--green-200) !important;
}
.pillar-card:hover h3,
.pillar-card:hover > p,
.pillar-card:hover .pillar-features li,
.pillar-card:hover .pillar-link {
    color: inherit !important;
}
.pillar-card:hover .pillar-features li::before { color: var(--green) !important; }
.pillar-card:hover .pillar-number { color: var(--gray-200) !important; }
.pillar-card:hover .pillar-badge {
    background: var(--green) !important;
    color: var(--white) !important;
}
.pillar-card:hover::before {
    background: var(--green) !important;
    opacity: 1 !important;
}

/* ── ICÔNE DES PILIERS : animation au survol (effet BitRaser) ── */
.pillar-icon {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative;
    overflow: hidden;
}
.pillar-card:hover .pillar-icon {
    background: linear-gradient(135deg, #10b981 0%, #047857 50%, #064e3b 100%) !important;
    color: #ffffff !important;
    transform: scale(1.1) rotate(-5deg) !important;
    box-shadow: 0 10px 30px rgba(16,185,129,0.4) !important;
}
.pillar-icon-blue,
.pillar-icon-green,
.pillar-icon-gradient {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.pillar-card:hover .pillar-icon-blue,
.pillar-card:hover .pillar-icon-green,
.pillar-card:hover .pillar-icon-gradient {
    background: linear-gradient(135deg, #10b981 0%, #047857 50%, #064e3b 100%) !important;
    color: #ffffff !important;
    transform: scale(1.1) rotate(-5deg) !important;
    box-shadow: 0 10px 30px rgba(16,185,129,0.4) !important;
}

/* ── RÉACTIVER hover dégradé sur Sectors ── */
.sector-card {
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer;
    overflow: hidden;
}
.sector-card:hover {
    background: linear-gradient(135deg, #10b981 0%, #047857 50%, #064e3b 100%) !important;
    border-color: transparent !important;
    transform: translateY(-6px) !important;
    box-shadow: 0 20px 50px rgba(16,185,129,0.4) !important;
}
.sector-card:hover h3,
.sector-card:hover p {
    color: #ffffff !important;
}
.sector-card:hover .sector-icon {
    background: rgba(255,255,255,0.15) !important;
    color: #ffffff !important;
}

/* ════════════════════════════════════════════════════════════════
   HOVER PILIERS — Effet halo/bordure dégradée (style BitRaser exact)
   La card reste blanche, juste un glow coloré autour
   ════════════════════════════════════════════════════════════════ */

/* Annuler l'effet précédent sur l'icône */
.pillar-card:hover .pillar-icon,
.pillar-card:hover .pillar-icon-blue,
.pillar-card:hover .pillar-icon-green,
.pillar-card:hover .pillar-icon-gradient {
    background: var(--green-50) !important;
    color: var(--green-darker) !important;
    transform: none !important;
    box-shadow: none !important;
}
.pillar-featured:hover .pillar-icon-gradient {
    background: var(--green) !important;
    color: var(--white) !important;
}

/* Effet glow dégradé autour de la card au survol */
.pillar-card {
    position: relative !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    z-index: 1;
}

/* Pseudo-élément pour la bordure dégradée externe */
.pillar-card::after {
    content: '' !important;
    position: absolute !important;
    inset: -2px !important;
    border-radius: var(--radius-xl) !important;
    background: linear-gradient(135deg, #10b981 0%, #047857 50%, #064e3b 100%) !important;
    opacity: 0 !important;
    z-index: -1 !important;
    transition: opacity 0.4s ease !important;
    pointer-events: none !important;
}

.pillar-card:hover {
    background: var(--white) !important;
    border-color: transparent !important;
    transform: translateY(-5px) !important;
    box-shadow:
        0 20px 60px rgba(16,185,129,0.35),
        0 0 80px rgba(16,185,129,0.2) !important;
}

.pillar-card:hover::after {
    opacity: 1 !important;
}

/* La card featured garde sa couleur de base */
.pillar-featured:hover {
    background: linear-gradient(160deg, var(--green-50), #f0fdf4) !important;
}

/* ════════════════════════════════════════════════════════════════
   HOVER PILIERS — Simple glow extérieur vert (override final)
   Card 100% blanche, juste une lueur verte autour
   ════════════════════════════════════════════════════════════════ */

/* Supprimer le dégradé qui couvrait la card */
.pillar-card::after {
    display: none !important;
    content: none !important;
}

/* Hover simple : card blanche + ombre/glow vert */
.pillar-card:hover {
    background: var(--white) !important;
    border-color: var(--green) !important;
    transform: translateY(-5px) !important;
    box-shadow: 0 10px 40px rgba(16,185,129,0.25) !important;
}

/* Pour la card featured (au milieu), garder son fond vert clair */
.pillar-featured:hover {
    background: linear-gradient(160deg, var(--green-50), #f0fdf4) !important;
    border-color: var(--green) !important;
}

/* Restaurer les couleurs originales du texte */
.pillar-card:hover h3,
.pillar-card:hover > p,
.pillar-card:hover .pillar-features li,
.pillar-card:hover .pillar-link {
    color: inherit !important;
}
.pillar-card:hover .pillar-features li::before { color: var(--green) !important; }
.pillar-card:hover .pillar-number { color: var(--gray-200) !important; }

/* Icônes : restaurer fond clair, juste léger highlight */
.pillar-card:hover .pillar-icon-blue,
.pillar-card:hover .pillar-icon-green {
    background: var(--green-100) !important;
    color: var(--green-darker) !important;
    transform: scale(1.05) !important;
}
.pillar-card:hover .pillar-icon-gradient {
    background: var(--green) !important;
    color: var(--white) !important;
    transform: scale(1.05) !important;
}

/* ════════════════════════════════════════════════════════════════
   HOVER PILIERS — FINAL : Card blanche + halo vert extérieur subtil
   Override total des règles précédentes
   ════════════════════════════════════════════════════════════════ */

/* Supprimer tout pseudo-élément accumulé */
.pillar-card::after,
.pillar-card::before {
    display: none !important;
    content: none !important;
}

/* Card au repos */
.pillar-card {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    transition: box-shadow 0.4s ease, transform 0.4s ease, border-color 0.4s ease !important;
}

/* Card featured (la 2ème) garde son fond légèrement teinté au repos */
.pillar-featured {
    background: linear-gradient(160deg, #ecfdf5, #f0fdf4) !important;
    border: 1px solid #d1fae5 !important;
}

/* Hover : SEULEMENT un halo extérieur vert, rien d'autre ne change */
.pillar-card:hover {
    background: #ffffff !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
    transform: translateY(-3px) !important;
    box-shadow:
        0 0 0 1px rgba(16, 185, 129, 0.1),
        0 0 40px rgba(16, 185, 129, 0.25),
        0 8px 30px rgba(16, 185, 129, 0.15) !important;
}

.pillar-featured:hover {
    background: linear-gradient(160deg, #ecfdf5, #f0fdf4) !important;
    border-color: rgba(16, 185, 129, 0.4) !important;
}

/* Texte, icônes, numéro : aucun changement au hover */
.pillar-card:hover h3,
.pillar-card:hover > p,
.pillar-card:hover .pillar-features li,
.pillar-card:hover .pillar-features li::before,
.pillar-card:hover .pillar-link,
.pillar-card:hover .pillar-number,
.pillar-card:hover .pillar-badge {
    color: inherit !important;
    background: initial !important;
}
.pillar-card:hover .pillar-features li::before { color: #10b981 !important; }
.pillar-card:hover .pillar-number { color: #e5e7eb !important; }
.pillar-card:hover .pillar-badge {
    background: #10b981 !important;
    color: #ffffff !important;
}

/* Icônes : couleurs originales préservées */
.pillar-card:hover .pillar-icon-blue {
    background: #ecfdf5 !important;
    color: #047857 !important;
    transform: none !important;
    box-shadow: none !important;
}
.pillar-card:hover .pillar-icon-green {
    background: #ecfdf5 !important;
    color: #047857 !important;
    transform: none !important;
    box-shadow: none !important;
}
.pillar-card:hover .pillar-icon-gradient {
    background: #10b981 !important;
    color: #ffffff !important;
    transform: none !important;
    box-shadow: none !important;
}

/* ════════════════════════════════════════════════════════════════
   HOVER PILIERS — Halo vert BIEN VISIBLE et coloré
   Override final
   ════════════════════════════════════════════════════════════════ */

.pillar-card:hover {
    background: #ffffff !important;
    border-color: rgba(16, 185, 129, 0.5) !important;
    transform: translateY(-4px) !important;
    box-shadow:
        0 0 0 2px rgba(16, 185, 129, 0.25),
        0 0 30px 8px rgba(16, 185, 129, 0.45),
        0 0 60px 12px rgba(16, 185, 129, 0.25),
        0 15px 50px rgba(16, 185, 129, 0.3) !important;
}

.pillar-featured:hover {
    background: linear-gradient(160deg, #ecfdf5, #f0fdf4) !important;
    border-color: rgba(16, 185, 129, 0.6) !important;
}

/* ════════════════════════════════════════════════════════════════
   HOVER PILIERS — Halo bi-couleur (vert clair + vert foncé)
   Style BitRaser : halo qui change de teinte selon l'angle
   ════════════════════════════════════════════════════════════════ */

/* Annuler les anciennes box-shadow simple-couleur */
.pillar-card:hover,
.pillar-featured:hover {
    transform: translateY(-4px) !important;
    border-color: rgba(16, 185, 129, 0.35) !important;
    box-shadow:
        /* halo vert clair en haut-gauche */
        -20px -20px 40px rgba(110, 231, 183, 0.4),
        /* halo vert vif en haut-droite */
        20px -20px 40px rgba(16, 185, 129, 0.4),
        /* halo vert foncé en bas-gauche */
        -20px 20px 40px rgba(5, 150, 105, 0.45),
        /* halo vert profond en bas-droite */
        20px 20px 40px rgba(6, 78, 59, 0.35),
        /* diffusion globale */
        0 0 60px 10px rgba(16, 185, 129, 0.25) !important;
}

/* Card 1 (gauche) : accent en haut-gauche vert clair */
.pillars-grid > .pillar-card:nth-child(1):hover {
    box-shadow:
        -25px -15px 50px rgba(110, 231, 183, 0.55),
        25px 15px 50px rgba(5, 150, 105, 0.45),
        0 0 60px 8px rgba(16, 185, 129, 0.25) !important;
}

/* Card 2 (centre, featured) : double halo équilibré */
.pillars-grid > .pillar-card:nth-child(2):hover {
    box-shadow:
        -20px -20px 50px rgba(16, 185, 129, 0.5),
        20px 20px 50px rgba(5, 150, 105, 0.5),
        0 0 70px 10px rgba(110, 231, 183, 0.3) !important;
}

/* Card 3 (droite) : accent en bas-gauche vert profond */
.pillars-grid > .pillar-card:nth-child(3):hover {
    box-shadow:
        25px -15px 50px rgba(110, 231, 183, 0.45),
        -25px 15px 50px rgba(6, 78, 59, 0.55),
        0 0 60px 8px rgba(16, 185, 129, 0.25) !important;
}

/* Conserver le fond blanc pour les piliers normaux */
.pillar-card:hover {
    background: #ffffff !important;
}
.pillar-featured:hover {
    background: linear-gradient(160deg, #ecfdf5, #f0fdf4) !important;
}

/* ════════════════════════════════════════════════════════════════
   HOVER PILIERS — Halo bi-couleur subtil
   Vert clair + bleu-vert (teal), opacités réduites
   ════════════════════════════════════════════════════════════════ */

/* Card 1 : vert clair en haut + teal en bas */
.pillars-grid > .pillar-card:nth-child(1):hover {
    box-shadow:
        0 -15px 35px -5px rgba(110, 231, 183, 0.45),
        0 15px 35px -5px rgba(13, 148, 136, 0.35) !important;
    border-color: rgba(16, 185, 129, 0.25) !important;
    transform: translateY(-4px) !important;
}

/* Card 2 (centre) : vert vif en haut + vert profond en bas */
.pillars-grid > .pillar-card:nth-child(2):hover {
    box-shadow:
        0 -15px 35px -5px rgba(52, 211, 153, 0.45),
        0 15px 35px -5px rgba(6, 95, 70, 0.35) !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
    transform: translateY(-4px) !important;
}

/* Card 3 : teal clair en haut + vert moyen en bas */
.pillars-grid > .pillar-card:nth-child(3):hover {
    box-shadow:
        0 -15px 35px -5px rgba(94, 234, 212, 0.45),
        0 15px 35px -5px rgba(5, 150, 105, 0.35) !important;
    border-color: rgba(16, 185, 129, 0.25) !important;
    transform: translateY(-4px) !important;
}

.pillar-card:hover { background: #ffffff !important; }
.pillar-featured:hover { background: linear-gradient(160deg, #ecfdf5, #f0fdf4) !important; }

/* ════════════════════════════════════════════════════════════════
   VIDEO SECTION — 4 cards style BitRaser + Lightbox modale
   ════════════════════════════════════════════════════════════════ */

.rvx-video-section {
    padding: 100px 0;
    background: #fff;
}

.rvx-video-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Carte vidéo individuelle */
.rvx-video-card {
    cursor: pointer;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s ease;
    border-radius: 14px;
    overflow: hidden;
    position: relative;
}
.rvx-video-card:hover {
    transform: translateY(-6px);
    box-shadow:
        0 -10px 30px rgba(110, 231, 183, 0.35),
        0 20px 50px rgba(5, 150, 105, 0.4);
}

/* Vignette / fond coloré */
.rvx-video-thumb {
    position: relative;
    aspect-ratio: 3 / 4;
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
}

/* Overlay pour assombrir un peu */
.rvx-video-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.35) 60%, rgba(0,0,0,0.75) 100%);
    pointer-events: none;
}

/* Logo entreprise au centre */
.rvx-video-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: #fff;
    z-index: 2;
    transition: transform 0.4s ease;
}
.rvx-video-logo i {
    font-size: 3rem;
    opacity: 0.95;
}
.rvx-video-logo span {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.rvx-video-card:hover .rvx-video-logo {
    transform: translate(-50%, -50%) scale(0.92);
}

/* Bouton play au survol */
.rvx-video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: rgba(255,255,255,0.95);
    color: #10b981;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    z-index: 3;
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
}
.rvx-video-play i {
    margin-left: 4px;
}
.rvx-video-card:hover .rvx-video-play {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}

/* Infos en bas (nom + fonction) */
.rvx-video-info {
    position: relative;
    z-index: 2;
    padding: 20px 22px;
    color: #fff;
}
.rvx-video-info h3 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.15rem;
    font-weight: 800;
    margin-bottom: 4px;
    color: #fff;
    line-height: 1.3;
}
.rvx-video-info p {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.85);
    margin: 0;
    line-height: 1.4;
}

/* ── Lightbox modale ── */
.rvx-video-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.rvx-video-modal.active {
    display: flex;
    animation: rvxFadeIn 0.3s ease;
}

@keyframes rvxFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.rvx-video-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.88);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    cursor: pointer;
}

.rvx-video-modal-content {
    position: relative;
    width: 100%;
    max-width: 900px;
    z-index: 1;
    animation: rvxModalIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes rvxModalIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

.rvx-video-modal-close {
    position: absolute;
    top: -50px;
    right: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.15);
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.rvx-video-modal-close:hover {
    background: rgba(255,255,255,0.3);
    transform: rotate(90deg);
}

.rvx-video-modal-title {
    color: #fff;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 16px;
    text-align: center;
}

.rvx-video-modal-content video {
    width: 100%;
    border-radius: 12px;
    background: #000;
    box-shadow: 0 30px 80px rgba(0,0,0,0.5);
    display: block;
}

/* Responsive */
@media (max-width: 1024px) {
    .rvx-video-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .rvx-video-grid { grid-template-columns: 1fr; gap: 16px; }
    .rvx-video-thumb { aspect-ratio: 16 / 10; }
    .rvx-video-modal-close { top: -45px; }
}

/* ════════════════════════════════════════════════════════════════
   VIDEO CARDS — Photos réelles en fond + overlay vert teinté
   ════════════════════════════════════════════════════════════════ */

/* Améliorer le contraste sur photos */
.rvx-video-overlay {
    background: linear-gradient(
        180deg,
        rgba(6, 78, 59, 0.35) 0%,
        rgba(0, 0, 0, 0.25) 40%,
        rgba(0, 0, 0, 0.55) 70%,
        rgba(0, 0, 0, 0.85) 100%
    ) !important;
}

/* Zoom léger de la photo au survol */
.rvx-video-thumb {
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.rvx-video-card:hover .rvx-video-thumb {
    transform: scale(1.05);
}

/* Logo et infos restent fixes (sortent du zoom) */
.rvx-video-logo,
.rvx-video-info,
.rvx-video-play,
.rvx-video-overlay {
    transform-origin: center;
}

/* Border-radius respecté avec overflow */
.rvx-video-card {
    overflow: hidden;
}

/* ════════════════════════════════════════════════════════════════
   VIDEO CARDS — Effet focus : card survolée grandit, autres rétrécissent
   ════════════════════════════════════════════════════════════════ */

/* Au survol du grid : toutes les cards se réduisent légèrement et perdent en saturation */
.rvx-video-grid:hover .rvx-video-card {
    transform: scale(0.95);
    opacity: 0.7;
    filter: saturate(0.7);
}

/* Mais celle qu'on survole grandit ! */
.rvx-video-grid:hover .rvx-video-card:hover {
    transform: scale(1.08);
    opacity: 1;
    filter: saturate(1.1);
    z-index: 5;
    box-shadow:
        0 -15px 40px rgba(110, 231, 183, 0.4),
        0 25px 60px rgba(5, 150, 105, 0.5),
        0 0 80px rgba(16, 185, 129, 0.3);
}

/* Transition douce sur la card */
.rvx-video-card {
    transition:
        transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.4s ease,
        filter 0.4s ease,
        box-shadow 0.5s ease !important;
}

/* Désactiver le zoom interne du thumb qui était redondant */
.rvx-video-card:hover .rvx-video-thumb {
    transform: scale(1.03);
}

/* ════════════════════════════════════════════════════════════════
   VIDEO CARDS — Style BitRaser : autres cards restent normales
   Override de l'effet "spotlight" précédent
   ════════════════════════════════════════════════════════════════ */

/* Les autres cards restent normales (pas de rétrécissement, pas de désaturation) */
.rvx-video-grid:hover .rvx-video-card {
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
}

/* Seule la card survolée grandit subtilement avec son halo */
.rvx-video-grid:hover .rvx-video-card:hover,
.rvx-video-card:hover {
    transform: translateY(-6px) scale(1.02) !important;
    opacity: 1 !important;
    filter: none !important;
    z-index: 5;
    box-shadow:
        0 -10px 30px rgba(110, 231, 183, 0.35),
        0 20px 50px rgba(5, 150, 105, 0.4) !important;
}

/* Zoom interne photo plus subtil */
.rvx-video-card:hover .rvx-video-thumb {
    transform: scale(1.05) !important;
}

/* ════════════════════════════════════════════════════════════════
   VIDEO CARDS — Première card élargie par défaut (style BitRaser)
   Layout : 1 grande card + 3 cards normales
   ════════════════════════════════════════════════════════════════ */

/* Nouveau grid : la 1ère card prend 2 colonnes */
.rvx-video-grid {
    display: grid !important;
    grid-template-columns: 2fr 1fr 1fr 1fr !important;
    gap: 20px !important;
}

/* La première card a un ratio plus large (paysage-portrait) */
.rvx-video-grid > .rvx-video-card:first-child .rvx-video-thumb {
    aspect-ratio: 16 / 11 !important;
}

/* Les 3 autres gardent le ratio portrait 3:4 */
.rvx-video-grid > .rvx-video-card:not(:first-child) .rvx-video-thumb {
    aspect-ratio: 3 / 4 !important;
}

/* Card vedette : titre légèrement plus grand */
.rvx-video-grid > .rvx-video-card:first-child .rvx-video-info h3 {
    font-size: 1.35rem;
}
.rvx-video-grid > .rvx-video-card:first-child .rvx-video-info p {
    font-size: 0.9rem;
}
.rvx-video-grid > .rvx-video-card:first-child .rvx-video-logo i {
    font-size: 3.5rem;
}
.rvx-video-grid > .rvx-video-card:first-child .rvx-video-logo span {
    font-size: 1.25rem;
}

/* Responsive */
@media (max-width: 1024px) {
    .rvx-video-grid {
        grid-template-columns: 1fr 1fr !important;
    }
    .rvx-video-grid > .rvx-video-card:first-child {
        grid-column: span 2;
    }
    .rvx-video-grid > .rvx-video-card:first-child .rvx-video-thumb {
        aspect-ratio: 16 / 8 !important;
    }
}
@media (max-width: 600px) {
    .rvx-video-grid {
        grid-template-columns: 1fr !important;
    }
    .rvx-video-grid > .rvx-video-card:first-child {
        grid-column: auto;
    }
    .rvx-video-grid > .rvx-video-card .rvx-video-thumb,
    .rvx-video-grid > .rvx-video-card:first-child .rvx-video-thumb {
        aspect-ratio: 16 / 10 !important;
    }
}

/* ════════════════════════════════════════════════════════════════
   VIDEO CARDS — Carrousel adaptatif (survol = élargissement)
   Style BitRaser : la card survolée prend la place de la vedette
   ════════════════════════════════════════════════════════════════ */

/* Repasser en flexbox pour permettre le flex-grow dynamique */
.rvx-video-grid {
    display: flex !important;
    gap: 20px !important;
    align-items: stretch !important;
}

/* Par défaut : la 1ère card est large (flex-grow 2), les autres normales (flex-grow 1) */
.rvx-video-grid > .rvx-video-card {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    transition: flex-grow 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.rvx-video-grid > .rvx-video-card:first-child {
    flex-grow: 2.2 !important;
}

/* Quand on survole une card non-première : elle devient large, et la 1ère redevient normale */
.rvx-video-grid:hover > .rvx-video-card:first-child {
    flex-grow: 1 !important;
}
.rvx-video-grid > .rvx-video-card:hover {
    flex-grow: 2.2 !important;
}

/* Si on survole la première : elle reste large */
.rvx-video-grid > .rvx-video-card:first-child:hover {
    flex-grow: 2.2 !important;
}

/* Aspect ratio dynamique : large quand flex-grow est élevé */
.rvx-video-thumb {
    width: 100% !important;
    height: 480px !important;
    aspect-ratio: auto !important;
    background-size: cover !important;
    background-position: center !important;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Garder le mouvement vertical au survol */
.rvx-video-card:hover {
    transform: translateY(-4px) !important;
}

/* Logo et infos plus grands sur la card élargie (utilise has() ou état JS-friendly) */
.rvx-video-grid > .rvx-video-card:first-child .rvx-video-logo i,
.rvx-video-grid > .rvx-video-card:hover .rvx-video-logo i {
    font-size: 3.5rem;
}
.rvx-video-grid > .rvx-video-card:first-child .rvx-video-logo span,
.rvx-video-grid > .rvx-video-card:hover .rvx-video-logo span {
    font-size: 1.25rem;
}
.rvx-video-grid > .rvx-video-card:first-child .rvx-video-info h3,
.rvx-video-grid > .rvx-video-card:hover .rvx-video-info h3 {
    font-size: 1.35rem;
}

/* Reset quand on survole une autre card (la première n'est plus la vedette) */
.rvx-video-grid:hover > .rvx-video-card:first-child:not(:hover) .rvx-video-logo i {
    font-size: 3rem;
}
.rvx-video-grid:hover > .rvx-video-card:first-child:not(:hover) .rvx-video-logo span {
    font-size: 1.1rem;
}
.rvx-video-grid:hover > .rvx-video-card:first-child:not(:hover) .rvx-video-info h3 {
    font-size: 1.15rem;
}

/* Responsive */
@media (max-width: 1024px) {
    .rvx-video-grid {
        flex-wrap: wrap !important;
    }
    .rvx-video-grid > .rvx-video-card {
        flex: 1 1 calc(50% - 10px) !important;
    }
    .rvx-video-grid > .rvx-video-card:first-child {
        flex: 1 1 100% !important;
    }
    .rvx-video-thumb { height: 360px !important; }
}
@media (max-width: 600px) {
    .rvx-video-grid > .rvx-video-card,
    .rvx-video-grid > .rvx-video-card:first-child {
        flex: 1 1 100% !important;
    }
    .rvx-video-thumb { height: 280px !important; }
}

/* ════════════════════════════════════════════════════════════════
   VIDEO CARDS — Cards plus petites, image non-zoomée, vidéo preview
   ════════════════════════════════════════════════════════════════ */

/* Hauteur réduite */
.rvx-video-thumb {
    height: 380px !important;
    background-size: cover !important;
    background-position: center center !important;
}

/* Désactiver le zoom interne de la photo */
.rvx-video-card:hover .rvx-video-thumb {
    transform: none !important;
}

/* Vidéo preview en arrière-plan (lecture muette au survol) */
.rvx-video-preview {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    z-index: 1;
}
.rvx-video-card:hover .rvx-video-preview {
    opacity: 1;
}

/* L'overlay et le contenu doivent rester au-dessus de la vidéo */
.rvx-video-overlay { z-index: 2; }
.rvx-video-logo,
.rvx-video-info,
.rvx-video-play { z-index: 3; }

/* Responsive */
@media (max-width: 1024px) {
    .rvx-video-thumb { height: 320px !important; }
}
@media (max-width: 600px) {
    .rvx-video-thumb { height: 260px !important; }
}

/* ════════════════════════════════════════════════════════════════
   VIDEO CARDS — Redesign final : filtre couleur titre + play vert
   ════════════════════════════════════════════════════════════════ */

/* Filtre dégradé vert sur la zone titre en bas */
.rvx-video-info {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    padding: 60px 22px 22px 22px !important;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(6, 78, 59, 0.6) 30%,
        rgba(5, 150, 105, 0.85) 70%,
        rgba(16, 185, 129, 0.95) 100%
    ) !important;
    z-index: 4 !important;
}

.rvx-video-info h3 {
    color: #ffffff !important;
    text-shadow: 0 2px 8px rgba(0,0,0,0.4) !important;
}
.rvx-video-info p {
    color: rgba(255,255,255,0.95) !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.3) !important;
}

/* Désactiver l'overlay sombre du bas (remplacé par le dégradé vert ci-dessus) */
.rvx-video-overlay {
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.15) 0%,
        rgba(0, 0, 0, 0.1) 40%,
        rgba(0, 0, 0, 0.2) 70%,
        rgba(0, 0, 0, 0.3) 100%
    ) !important;
}

/* Bouton play : repositionné en bas à gauche, fond vert */
.rvx-video-play {
    position: absolute !important;
    bottom: 16px !important;
    left: 16px !important;
    top: auto !important;
    right: auto !important;
    transform: scale(1) !important;
    width: 52px !important;
    height: 52px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #10b981 0%, #047857 100%) !important;
    color: #ffffff !important;
    opacity: 1 !important;
    z-index: 5 !important;
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.5) !important;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease !important;
}
.rvx-video-play i {
    margin-left: 3px !important;
    font-size: 1.05rem !important;
}

/* Effet au survol : play s'agrandit légèrement */
.rvx-video-card:hover .rvx-video-play {
    transform: scale(1.15) !important;
    box-shadow: 0 8px 30px rgba(16, 185, 129, 0.7) !important;
}

/* Décaler le bouton play à gauche du texte (sur la zone titre verte) */
.rvx-video-info {
    padding-left: 88px !important;
}

/* ════════════════════════════════════════════════════════════════
   VIDEO CARDS — Ajustements finaux
   Play : bas-droite, visible au hover seulement
   Filtre titre : disparait au hover
   ════════════════════════════════════════════════════════════════ */

/* Bouton play : bas-droite + caché par défaut */
.rvx-video-play {
    bottom: 16px !important;
    right: 16px !important;
    left: auto !important;
    top: auto !important;
    opacity: 0 !important;
    transform: scale(0.8) translateY(10px) !important;
    transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* Play apparait au survol */
.rvx-video-card:hover .rvx-video-play {
    opacity: 1 !important;
    transform: scale(1) translateY(0) !important;
}

/* Effet supplémentaire : play s'agrandit en survol direct du bouton */
.rvx-video-card .rvx-video-play:hover {
    transform: scale(1.15) translateY(0) !important;
    box-shadow: 0 8px 30px rgba(16, 185, 129, 0.7) !important;
}

/* Filtre vert sur le titre disparait au survol */
.rvx-video-info {
    padding-left: 22px !important;
    transition: background 0.5s ease, opacity 0.4s ease !important;
}
.rvx-video-card:hover .rvx-video-info {
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(0, 0, 0, 0.4) 60%,
        rgba(0, 0, 0, 0.75) 100%
    ) !important;
}

/* Au survol : on garde le texte lisible sur la vidéo (overlay noir doux) */

/* ════════════════════════════════════════════════════════════════
   STATS BLOCK — Titre + sous-titre + chiffres avec dégradé vert
   Style BitRaser adapté aux couleurs Revalux
   ════════════════════════════════════════════════════════════════ */

.rvx-stats-block {
    padding: 60px 0 40px 0;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}

/* Header : titre + sous-titre */
.rvx-stats-header {
    text-align: center;
    margin-bottom: 60px;
    padding: 0 20px;
}

.rvx-stats-title {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.25;
    color: #111827;
    margin-bottom: 16px;
    letter-spacing: -0.3px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.rvx-stats-sub {
    font-size: 1rem;
    color: #6b7280;
    line-height: 1.6;
    max-width: 700px;
    margin: 0 auto;
}

/* Grid des chiffres */
.rvx-stats-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
    padding: 0 20px;
}

/* Chaque stat */
.rvx-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px 12px;
    position: relative;
    transition: transform 0.3s ease;
}

.rvx-stat:hover {
    transform: translateY(-4px);
}

/* Chiffre principal : dégradé vert Revalux */
.rvx-stat-num {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: 3.2rem;
    font-weight: 800;
    line-height: 1;
    background: linear-gradient(135deg, #10b981 0%, #047857 50%, #064e3b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 12px;
    letter-spacing: -1px;
    display: inline-block;
    position: relative;
}

/* Petit "+" en superscript en accent vert clair */
.rvx-stat-num::after {
    /* utilisé si on veut un effet supplémentaire */
}

/* Label sous le chiffre */
.rvx-stat-lbl {
    font-size: 0.85rem;
    font-weight: 500;
    color: #4b5563;
    line-height: 1.4;
    max-width: 160px;
}

/* Responsive */
@media (max-width: 1024px) {
    .rvx-stats-grid { grid-template-columns: repeat(3, 1fr); }
    .rvx-stats-title { font-size: 1.75rem; }
    .rvx-stat-num { font-size: 2.8rem; }
}
@media (max-width: 640px) {
    .rvx-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 24px 12px; }
    .rvx-stats-title { font-size: 1.5rem; }
    .rvx-stat-num { font-size: 2.5rem; }
    .rvx-stat-lbl { font-size: 0.78rem; }
}

/* ════════════════════════════════════════════════════════════════
   STATS BLOCK — Fix : chiffres sur une ligne + plus d'espacement
   ════════════════════════════════════════════════════════════════ */

/* Chiffres jamais coupés */
.rvx-stat-num {
    white-space: nowrap !important;
    font-size: 2.6rem !important;
}

/* Plus d'espace entre les blocs */
.rvx-stats-grid {
    gap: 32px !important;
    padding: 0 40px !important;
}

/* Chaque stat prend un peu plus de place */
.rvx-stat {
    min-width: 0;
    padding: 20px 8px !important;
}

/* Label label pas trop large pour rester sous le chiffre */
.rvx-stat-lbl {
    max-width: 140px !important;
    font-size: 0.82rem !important;
}

/* Responsive */
@media (max-width: 1200px) {
    .rvx-stat-num { font-size: 2.3rem !important; }
    .rvx-stats-grid { gap: 24px !important; padding: 0 20px !important; }
}
@media (max-width: 1024px) {
    .rvx-stats-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 40px 24px !important; }
    .rvx-stat-num { font-size: 2.6rem !important; }
}
@media (max-width: 640px) {
    .rvx-stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 32px 12px !important; }
    .rvx-stat-num { font-size: 2.2rem !important; }
}

/* ════════════════════════════════════════════════════════════════
   STATS BLOCK — Ligne de séparation verte en haut
   ════════════════════════════════════════════════════════════════ */

.rvx-stats-block {
    border-top: 1px solid transparent !important;
    border-image: linear-gradient(
        90deg,
        transparent 0%,
        rgba(16,185,129,0.5) 30%,
        rgba(16,185,129,0.9) 50%,
        rgba(16,185,129,0.5) 70%,
        transparent 100%
    ) 1 !important;
    padding-top: 80px !important;
}