/*
Theme Name: BATIVERT Equipement — Gutenberg Native
Theme URI: https://bativert.com/
Author: BATIVERT
Description: Thème bloc WordPress BATIVERT construit avec les blocs Gutenberg natifs, avec en-tête, pied de page et page d’accueil entièrement éditables.
Version: 3.0.0
Text Domain: bativert
*/
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700;900&family=Barlow:wght@400;500;600&display=swap');

        :root {
            --orange: #C24136;
            --orange-dark: #b50016;
            --red:  #C24136;
            --black: #111010;
            --gray: #9C9E9F;
            --light: #F4F4F2;
            --white: #FFFFFF;
            --green: #25D366;
            --font-display: 'Barlow Condensed', sans-serif;
            --font-body: 'Barlow', sans-serif;
        }

        *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

        html { scroll-behavior: smooth; }

        body {
            font-family: var(--font-body);
            background: var(--light);
            color: var(--black);
            overflow-x: hidden;
        }

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

        .container { width: min(1200px, 92%); margin: auto; }

        h1, h2, h3, h4 {
            font-family: var(--font-display);
            text-transform: uppercase;
            letter-spacing: 1px;
            font-weight: 900;
        }

        /* ── SCROLL MARGIN pour ancres avec header fixe ── */
        section[id], div[id] { scroll-margin-top: 100px; }

        /* ══════════════════ TOP BAR — version discrète ══════════════════ */
        .top-bar {
            position: fixed;
            top: 0;
            width: 100%;
            z-index: 1001;
            background: rgba(10,10,10,0.75);
            backdrop-filter: blur(10px);
            border-bottom: 1px solid rgba(255,255,255,0.06);
            overflow: hidden;
            max-height: 34px;
            transition: max-height 0.35s ease, opacity 0.35s ease;
        }

        .top-bar.hidden {
            max-height: 0;
            opacity: 0;
            pointer-events: none;
        }

        .top-bar-inner {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 7px 0;
        }

        /* Séparateur vertical entre icônes */
        .top-bar-social {
            display: flex;
            align-items: center;
            gap: 2px;
        }

        .top-bar-social a {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 30px;
            height: 20px;
            color: rgba(255,255,255,0.45);
            text-decoration: none;
            transition: color 0.2s;
            border-right: 1px solid rgba(255,255,255,0.08);
        }

        .top-bar-social a:last-child { border-right: none; }

        .top-bar-social a:hover { color: var(--orange); }

        .top-bar-social svg {
            width: 13px;
            height: 13px;
            fill: currentColor;
        }

        .top-bar-right {
            display: flex;
            align-items: center;
            gap: 20px;
        }

        .top-bar-phone {
            display: flex;
            align-items: center;
            gap: 7px;
            color: rgba(255,255,255,0.55);
            text-decoration: none;
            font-family: var(--font-display);
            font-size: 12px;
            letter-spacing: 1.5px;
            transition: color 0.2s;
        }

        .top-bar-phone:hover { color: var(--orange); }

        .top-bar-phone svg {
            width: 12px;
            height: 12px;
            fill: currentColor;
            flex-shrink: 0;
        }

        /* Petit point de séparation décoratif */
        .top-bar-sep {
            width: 1px;
            height: 12px;
            background: rgba(255,255,255,0.1);
        }

        @media(max-width: 768px) {
            .top-bar { display: none; }
            section[id], div[id] { scroll-margin-top: 80px; }
        }

        /* ══════════════════ HEADER ══════════════════ */
        header {
            position: fixed;
            width: 100%;
            top: 36px;
            z-index: 1000;
            transition: background 0.4s, box-shadow 0.4s;
            backdrop-filter: blur(14px);
            background: rgba(10, 10, 10, 0.5);
            border-bottom: 1px solid rgba(255,255,255,0.07);
        }

        header.scrolled {
            background: rgba(10,10,10,0.92);
            box-shadow: 0 4px 30px rgba(0,0,0,0.3);
            top: 0;
        }

        .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 14px 0;
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 12px;
            text-decoration: none;
        }

        .logo-img-wrap {
            width: 46px;
            height: 46px;
            background: var(--orange);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: var(--font-display);
            font-size: 22px;
            font-weight: 900;
            color: white;
            transition: transform 0.3s;
            letter-spacing: -1px;
        }

        .logo:hover .logo-img-wrap { transform: scale(1.08) rotate(-2deg); }

        .logo img {
            height: 46px;
            width: auto;
            transition: transform 0.3s ease;
        }

        .logo:hover img { transform: scale(1.08); }

        .logo-text {
            display: flex;
            flex-direction: column;
            color: white;
            line-height: 1;
        }

        .logo-text .brand {
            font-family: var(--font-display);
            font-size: 22px;
            font-weight: 900;
            letter-spacing: 1px;
        }

        .logo-text .sub {
            font-family: var(--font-display);
            font-size: 12px;
            font-weight: 400;
            letter-spacing: 4px;
            color: var(--orange);
            margin-top: 3px;
        }

        nav { display: flex; gap: 30px; }

        nav a {
            color: rgba(255,255,255,0.8);
            text-decoration: none;
            font-family: var(--font-display);
            font-size: 15px;
            font-weight: 600;
            letter-spacing: 1px;
            position: relative;
            transition: color 0.2s;
        }

        nav a::after {
            content: '';
            position: absolute;
            bottom: -4px;
            left: 0;
            width: 0;
            height: 2px;
            background: var(--orange);
            transition: width 0.3s;
        }

        nav a:hover, nav a.active { color: var(--orange); }
        nav a:hover::after, nav a.active::after { width: 100%; }

        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 13px 26px;
            border-radius: 8px;
            text-decoration: none;
            font-family: var(--font-display);
            font-weight: 700;
            font-size: 15px;
            letter-spacing: 1px;
            transition: all 0.25s;
            cursor: pointer;
            border: none;
        }

        .btn-orange { background: var(--orange); color: white; }
        .btn-orange:hover { background: var(--orange-dark); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(219,0,27,0.35); }

        .btn-outline { border: 2px solid rgba(255,255,255,0.5); color: white; background: transparent; }
        .btn-outline:hover { border-color: var(--orange); color: var(--orange); }

        .btn-dark { background: var(--black); color: white; }
        .btn-dark:hover { background: #222; transform: translateY(-2px); }

        /* ══════════════════ HERO ══════════════════ */
        .hero {
            min-height: 100vh;
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: center;
            background: #0a0a0a;
        }

        .hero-video {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: 1;
            filter: brightness(.4);
        }



        .hero-overlay {
            position: absolute;
            inset: 0;
			background: linear-gradient(90deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.65) 50%, rgba(0,0,0,.2) 100%);
            z-index: 2;
        }

        .hero .container {
            position: relative;
            z-index: 10;
            padding-top: 80px;
        }

        .hero-content {
            color: white;
            max-width: 680px;
        }

        .hero-tag {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            color: var(--orange);
            font-family: var(--font-display);
            font-size: 13px;
            font-weight: 700;
            letter-spacing: 3px;
            margin-bottom: 28px;
            opacity: 0;
            animation: fadeUp 0.6s 0.2s forwards;
        }

        .hero-tag::before {
            content: '';
            display: block;
            width: 30px;
            height: 2px;
            background: var(--orange);
        }

        /* BUG FIX: h1 manquant en SEO — remplacé h2 par h1 */
        .hero h1 {
            font-family: var(--font-display);
            font-size: clamp(42px, 5.5vw, 68px);
            line-height: 1.05;
            margin-bottom: 28px;
            opacity: 0;
            animation: fadeUp 0.6s 0.4s forwards;
        }

        .hero-line {
            width: 60px;
            height: 4px;
            background: var(--orange);
            margin-bottom: 28px;
            opacity: 0;
            animation: fadeUp 0.6s 0.5s forwards;
        }

        .hero p {
            font-size: 18px;
            line-height: 1.75;
            color: rgba(255,255,255,0.75);
            margin-bottom: 42px;
            max-width: 560px;
            opacity: 0;
            animation: fadeUp 0.6s 0.6s forwards;
        }

        .hero-buttons {
            display: flex;
            gap: 16px;
            flex-wrap: wrap;
            opacity: 0;
            animation: fadeUp 0.6s 0.75s forwards;
        }

        /* Stats flottantes hero */
        .hero-stats {
            position: absolute;
            right: 5%;
            bottom: 12%;
            z-index: 10;
            display: flex;
            flex-direction: column;
            gap: 16px;
            opacity: 0;
            animation: fadeIn 1s 1.2s forwards;
        }

        .hero-stat-card {
            background: rgba(255,255,255,0.07);
            border: 1px solid rgba(255,255,255,0.12);
            backdrop-filter: blur(10px);
            border-radius: 12px;
            padding: 18px 26px;
            color: white;
            text-align: center;
            min-width: 130px;
        }

        .hero-stat-card .num {
            font-family: var(--font-display);
            font-size: 38px;
            font-weight: 900;
            color: var(--orange);
            line-height: 1;
        }

        .hero-stat-card .lbl {
            font-size: 11px;
            letter-spacing: 2px;
            color: rgba(255,255,255,0.6);
            margin-top: 4px;
        }

        /* Scroll indicator */
        .scroll-indicator {
            position: absolute;
            bottom: 32px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 10;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
            color: rgba(255,255,255,0.4);
            font-size: 11px;
            letter-spacing: 2px;
        }

        .scroll-indicator span { animation: bounce 2s infinite; }

        /* ══════════════════ TICKER ══════════════════ */
        .ticker-wrap {
            background: var(--orange);
            overflow: hidden;
            padding: 12px 0;
        }

        .ticker-track {
            display: flex;
            gap: 60px;
            animation: ticker 25s linear infinite;
            width: max-content;
        }

        .ticker-track span {
            font-family: var(--font-display);
            font-size: 13px;
            font-weight: 700;
            letter-spacing: 2px;
            color: white;
            white-space: nowrap;
            display: flex;
            align-items: center;
            gap: 20px;
        }

        .ticker-track span::before {
            content: '◆';
            font-size: 8px;
        }

        /* ══════════════════ PROOF BOXES ══════════════════ */
        .proof-wrapper {
            position: relative;
            margin-top: -70px;
            z-index: 20;
        }

        .proof-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            border-radius: 14px;
            overflow: hidden;
            background: white;
            box-shadow: 0 20px 60px rgba(0,0,0,0.12);
        }

        .proof-card {
            padding: 36px 24px;
            border-right: 1px solid #eee;
            border-bottom: 4px solid transparent;
            display: flex;
            gap: 16px;
            align-items: flex-start;
            transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
            background: white;
            cursor: default;
        }

        .proof-card:hover {
            border-bottom-color: var(--orange);
            transform: translateY(-8px);
            box-shadow: 0 16px 40px rgba(0,0,0,0.1);
            z-index: 5;
        }

        .proof-card:last-child { border-right: none; }

        .proof-icon {
            flex-shrink: 0;
            width: 44px;
            height: 44px;
            background: rgba(219,0,27,0.1);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--orange);
            transition: background 0.3s;
        }

        .proof-card:hover .proof-icon { background: var(--orange); color: white; }

        .proof-icon svg { width: 22px; height: 22px; fill: currentColor; }

        .proof-card h3 {
            margin-bottom: 7px;
            font-size: 16px;
            font-family: var(--font-display);
            color: var(--black);
        }

        .proof-card p { color: #666; line-height: 1.5; font-size: 13px; }

        /* ══════════════════ CHIFFRES CLÉS ══════════════════ */
        .stats-section {
            background: var(--black);
            padding: 80px 0;
            position: relative;
            overflow: hidden;
        }

        .stats-section::before {
            content: '';
            position: absolute;
            inset: 0;
            background-image: 
                linear-gradient(rgba(219,0,27,0.05) 1px, transparent 1px),
                linear-gradient(90deg, rgba(219,0,27,0.05) 1px, transparent 1px);
            background-size: 50px 50px;
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 0;
            position: relative;
            z-index: 1;
        }

        .stat-item {
            text-align: center;
            padding: 30px 20px;
            border-right: 1px solid rgba(255,255,255,0.08);
        }

        .stat-item:last-child { border-right: none; }

        .stat-num {
            font-family: var(--font-display);
            font-size: 64px;
            font-weight: 900;
            color: var(--orange);
            line-height: 1;
            display: block;
        }

        .stat-suffix {
            font-family: var(--font-display);
            font-size: 30px;
            color: var(--orange);
        }

        .stat-label {
            font-family: var(--font-display);
            font-size: 13px;
            letter-spacing: 3px;
            color: rgba(255,255,255,0.45);
            margin-top: 10px;
            display: block;
        }

        /* ══════════════════ SECTIONS GÉNÉRAL ══════════════════ */
        .section { padding: 100px 0; }

        .section-title { margin-bottom: 55px; }
        .section-title small {
            font-family: var(--font-display);
            color: var(--orange);
            font-size: 13px;
            font-weight: 700;
            letter-spacing: 4px;
        }
        .section-title h2 {
            font-family: var(--font-display);
            font-size: clamp(36px, 4vw, 50px);
            margin: 10px 0 18px;
        }
        .section-line {
            width: 55px;
            height: 4px;
            background: var(--orange);
        }

        /* ══════════════════ PRODUCTS ══════════════════ */
        .products-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 24px;
        }

        .product-card {
            background: white;
            border-radius: 12px;
            overflow: hidden;
            transition: transform 0.35s, box-shadow 0.35s, border-color 0.35s;
            box-shadow: 0 4px 16px rgba(0,0,0,0.06);
            border: 2px solid transparent;
            position: relative;
        }

        .product-card:hover {
            transform: translateY(-8px);
            border-color: var(--orange);
            box-shadow: 0 20px 50px rgba(0,0,0,0.12);
        }

        .product-card img { height: 240px; width: 100%; object-fit: cover; transition: transform 0.5s; }
        .product-card:hover img { transform: scale(1.05); }

        .product-tag {
            position: absolute;
            top: 16px;
            right: 16px;
            background: var(--black);
            color: white;
            font-family: var(--font-display);
            font-size: 10px;
            letter-spacing: 2px;
            padding: 6px 10px;
            border-radius: 4px;
        }

        .product-content { padding: 28px 26px; }
        .product-content h3 {
            font-family: var(--font-display);
            font-size: 22px;
            margin-bottom: 12px;
        }
        .product-content p { color: #555; line-height: 1.7; font-size: 14px; }

        .product-footer {
            padding: 16px 26px;
            border-top: 1px solid #f0f0f0;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .product-footer span { font-size: 12px; color: var(--gray); letter-spacing: 1px; }

        .product-link {
            font-family: var(--font-display);
            font-size: 13px;
            font-weight: 700;
            color: var(--orange);
            text-decoration: none;
            letter-spacing: 1px;
            display: flex;
            align-items: center;
            gap: 6px;
            transition: gap 0.2s;
        }

        .product-link:hover { gap: 10px; }

        /* ══════════════════ SERVICES ══════════════════ */
        .services-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 70px;
            align-items: center;
        }

        .services-image {
            position: relative;
        }

        .services-image img {
            border-radius: 12px;
            width: 100%;
            height: 500px;
            object-fit: cover;
        }

        /* Badge flottant sur image */
        .services-image::after {
            content: '15 ANS\AD'EXPERTISE';
            content: '15 ANS D\'EXPERTISE';
            font-family: var(--font-display);
            font-size: 13px;
            font-weight: 700;
            letter-spacing: 1px;
            position: absolute;
            bottom: -20px;
            right: -20px;
            background: var(--orange);
            color: white;
            padding: 20px 24px;
            border-radius: 10px;
            line-height: 1.4;
            text-align: center;
            box-shadow: 0 10px 30px rgba(219,0,27,0.3);
        }

        .services-list {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 28px;
            margin-top: 40px;
        }

        .service-item { display: flex; gap: 14px; }

        .check {
            width: 34px;
            height: 34px;
            border-radius: 8px;
            background: var(--orange);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            flex-shrink: 0;
            font-size: 16px;
        }

        .service-item h4 {
            font-family: var(--font-display);
            margin-bottom: 6px;
            font-size: 15px;
        }
        .service-item p { color: #555; line-height: 1.5; font-size: 13px; }

        /* ══════════════════ PROJECTS ══════════════════ */
        .projects-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 22px;
        }

        .project-card {
            position: relative;
            overflow: hidden;
            border-radius: 12px;
            height: 360px;
            cursor: pointer;
        }

        .project-card img {
            height: 100%;
            width: 100%;
            object-fit: cover;
            transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        .project-card:hover img { transform: scale(1.08); }

        .project-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.2) 60%, transparent 100%);
            transition: background 0.3s;
        }

        .project-card:hover .project-overlay {
            background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.4) 60%, rgba(219,0,27,0.1) 100%);
        }

        .badge {
            position: absolute;
            top: 18px;
            left: 18px;
            background: var(--orange);
            color: white;
            padding: 6px 12px;
            border-radius: 5px;
            font-family: var(--font-display);
            font-size: 11px;
            letter-spacing: 2px;
            font-weight: 700;
        }

        .project-info {
            position: absolute;
            left: 22px;
            bottom: 22px;
            right: 22px;
            color: white;
        }

        .project-info h4 {
            font-family: var(--font-display);
            margin-bottom: 4px;
            font-size: 22px;
            line-height: 1.2;
        }

        .project-info p { font-size: 13px; color: rgba(255,255,255,0.6); }

        /* ══════════════════ CTA BAND ══════════════════ */
        .cta-dark {
            background: var(--black);
            color: white;
            padding: 90px 0;
            position: relative;
            overflow: hidden;
        }

        .cta-dark::before {
            content: 'BTP';
            position: absolute;
            right: -20px;
            top: 50%;
            transform: translateY(-50%);
            font-family: var(--font-display);
            font-size: 260px;
            font-weight: 900;
            color: rgba(255,255,255,0.025);
            line-height: 1;
            pointer-events: none;
            user-select: none;
        }

        .cta-grid {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 30px;
            position: relative;
            z-index: 1;
        }

        .cta-grid h2 {
            font-family: var(--font-display);
            font-size: clamp(32px, 4vw, 50px);
        }

        .cta-grid h2 span { color: var(--orange); }

        .cta-sub { font-size: 15px; color: rgba(255,255,255,0.5); margin-top: 10px; }

        /* ══════════════════ CONTACT ══════════════════ */
        .contact-grid {
            display: grid;
            grid-template-columns: 360px 1fr;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 24px 60px rgba(0,0,0,0.1);
        }

        .contact-left {
            background: var(--black);
            color: white;
            padding: 60px 44px;
            position: relative;
            overflow: hidden;
        }

        .contact-left::after {
            content: '';
            position: absolute;
            bottom: -60px;
            right: -60px;
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background: rgba(219,0,27,0.1);
        }

        .contact-left h2 {
            font-family: var(--font-display);
            font-size: 30px;
            margin-bottom: 10px;
        }

        .contact-left .sub-label {
            color: var(--orange);
            font-size: 12px;
            letter-spacing: 3px;
            margin-bottom: 40px;
            font-family: var(--font-display);
        }

        .contact-item {
            margin-bottom: 28px;
            display: flex;
            align-items: flex-start;
            gap: 16px;
        }

        .contact-icon {
            width: 38px;
            height: 38px;
            background: rgba(219,0,27,0.15);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .contact-icon svg { width: 18px; height: 18px; fill: var(--orange); }

        .contact-item-text small {
            font-size: 11px;
            letter-spacing: 2px;
            color: rgba(255,255,255,0.4);
            font-family: var(--font-display);
            display: block;
            margin-bottom: 3px;
        }

        .contact-item-text span { font-size: 14px; color: rgba(255,255,255,0.85); }

        .contact-right { background: #fff; padding: 60px; }

        /* BUG FIX: form-grid corrigé avec textarea span */
        .form-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 18px;
        }

        /* BUG FIX: focus visible pour accessibilité */
        input, textarea, select {
            width: 100%;
            padding: 16px 18px;
            border: 1.5px solid #e0e0e0;
            border-radius: 9px;
            background: #fafafa;
            outline: none;
            font-family: var(--font-body);
            font-size: 14px;
            color: var(--black);
            transition: border-color 0.25s, box-shadow 0.25s;
        }

        input:focus, textarea:focus, select:focus {
            border-color: var(--orange);
            box-shadow: 0 0 0 3px rgba(219,0,27,0.12);
            background: white;
        }

        /* BUG FIX: resize contrôlé */
        textarea {
            grid-column: span 2;
            min-height: 140px;
            resize: vertical;
        }

        .form-select { grid-column: span 2; }

        /* ══════════════════ FOOTER ══════════════════ */
        footer {
            background: #0a0a0a;
            color: #666;
            border-top: 1px solid #1e1e1e;
        }

        .footer-main {
            display: grid;
            grid-template-columns: 2fr 1fr 1fr;
            gap: 60px;
            padding: 70px 0 50px;
        }

        .footer-brand .logo-text .brand { color: white; }

        .footer-desc {
            font-size: 13px;
            line-height: 1.8;
            color: #555;
            margin-top: 18px;
            max-width: 280px;
        }

        .footer-col h5 {
            font-family: var(--font-display);
            font-size: 14px;
            letter-spacing: 2px;
            color: white;
            margin-bottom: 20px;
        }

        .footer-col a {
            display: block;
            color: #555;
            text-decoration: none;
            font-size: 13px;
            margin-bottom: 10px;
            transition: color 0.2s;
        }

        .footer-col a:hover { color: var(--orange); }

        .footer-bottom {
            border-top: 1px solid #1a1a1a;
            padding: 24px 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 12px;
            color: #444;
        }

        /* ══════════════════ MOBILE BAR ══════════════════ */
        /* BUG FIX: mobile-bar visible seulement ≤768px */
        .mobile-bar {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            display: none;
            z-index: 1000;
        }

        .mobile-bar a {
            flex: 1;
            text-align: center;
            padding: 18px;
            color: white;
            text-decoration: none;
            font-family: var(--font-display);
            font-size: 15px;
            font-weight: 700;
            letter-spacing: 1px;
        }

        /* ══════════════════ SCROLL TO TOP ══════════════════ */
        .scroll-top {
            position: fixed;
            bottom: 30px;
            right: 30px;
            width: 48px;
            height: 48px;
            background: var(--orange);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 999;
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.3s;
            border: none;
            box-shadow: 0 6px 20px rgba(219,0,27,0.35);
        }

        .scroll-top.visible { opacity: 1; transform: translateY(0); }
        .scroll-top:hover { background: var(--orange-dark); transform: translateY(-3px); }

        .scroll-top svg { fill: white; width: 22px; height: 22px; }

        /* ══════════════════ ANIMATIONS ══════════════════ */
        @keyframes fadeUp {
            from { opacity: 0; transform: translateY(24px); }
            to   { opacity: 1; transform: translateY(0); }
        }

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

        @keyframes bounce {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(8px); }
        }

        @keyframes ticker {
            0%   { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }

        /* Reveal au scroll */
        .reveal {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.6s, transform 0.6s;
        }

        .reveal.visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* ══════════════════ RESPONSIVE ══════════════════ */
        @media (max-width: 1024px) {
            nav, .navbar .btn { display: none; }
            .proof-grid { grid-template-columns: 1fr 1fr; }
            .products-grid, .projects-grid { grid-template-columns: 1fr 1fr; }
            .services-grid { grid-template-columns: 1fr; }
            .services-image { display: none; }
            .services-list { grid-template-columns: 1fr 1fr; }
            .cta-grid { flex-direction: column; text-align: center; }
            .contact-grid { grid-template-columns: 1fr; }
            .stats-grid { grid-template-columns: repeat(2, 1fr); }
            .hero-stats { display: none; }
            .footer-main { grid-template-columns: 1fr 1fr; }
        }

        @media (max-width: 768px) {
            .mobile-bar { display: flex; }
            footer { padding-bottom: 80px; }
            .proof-grid { grid-template-columns: 1fr; }
            .products-grid, .projects-grid { grid-template-columns: 1fr; }
            .services-list { grid-template-columns: 1fr; }
            .form-grid { grid-template-columns: 1fr; }
            textarea, .form-select { grid-column: span 1; }
            .contact-right { padding: 36px 28px; }
            .contact-left { padding: 40px 28px; }
            .stats-grid { grid-template-columns: 1fr 1fr; }
            .stat-num { font-size: 48px; }
            .footer-main { grid-template-columns: 1fr; gap: 36px; }
            .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
            .scroll-top { bottom: 85px; }
            .hero-buttons .btn { padding: 12px 20px; font-size: 14px; }
        }
    

/* =========================================================
   BATIVERT GUTENBERG V2
   The visual system below intentionally follows the original
   BATIVERT HTML design.
   ========================================================= */
.bativert-homepage { width:100%; }
.bativert-homepage .wp-block-image { margin:0; }
.bativert-homepage .wp-block-button { margin:0; }
.bativert-homepage .bativert-richtext { outline:none; }
.bativert-homepage .bativert-edit-media { position:relative; }
.bativert-homepage .bativert-media-button { position:absolute; z-index:50; top:12px; left:12px; background:#111; color:#fff; border:0; border-radius:6px; padding:8px 12px; font-family:var(--font-display); font-weight:700; font-size:12px; cursor:pointer; }
.bativert-homepage .bativert-media-button:hover { background:var(--orange); }
.bativert-homepage .bativert-video-placeholder { display:flex; align-items:center; justify-content:center; min-height:300px; background:#111; color:#fff; font-family:var(--font-display); }
.bativert-homepage .bativert-link-input { display:inline-block; margin-top:8px; }
/* Prevent Gutenberg's default max-width from destroying the desktop composition. */
.editor-styles-wrapper .wp-block-bativert-homepage { max-width:none !important; width:100vw; margin-left:calc(50% - 50vw) !important; margin-right:calc(50% - 50vw) !important; }
.editor-styles-wrapper .bativert-homepage { min-width:0; }
.editor-styles-wrapper .bativert-homepage .hero { min-height:760px; }
.editor-styles-wrapper .bativert-homepage .hero-video { pointer-events:none; }
.editor-styles-wrapper .bativert-homepage .reveal { opacity:1; transform:none; }
.editor-styles-wrapper .bativert-homepage .hero-tag,
.editor-styles-wrapper .bativert-homepage .hero h1,
.editor-styles-wrapper .bativert-homepage .hero p,
.editor-styles-wrapper .bativert-homepage .hero-buttons { opacity:1; animation:none; }
.editor-styles-wrapper .bativert-homepage .stat-num { color:var(--orange); }
.editor-styles-wrapper .bativert-homepage .product-card,
.editor-styles-wrapper .bativert-homepage .project-card,
.editor-styles-wrapper .bativert-homepage .service-item,
.editor-styles-wrapper .bativert-homepage .proof-card { cursor:text; }
@media (max-width: 900px) {
  .editor-styles-wrapper .wp-block-bativert-homepage { width:100%; margin-left:0 !important; margin-right:0 !important; }
}

.bativert-highlight { color:var(--orange); }
.bativert-homepage .bativert-edit-media > img { width:100%; display:block; }
.bativert-homepage .services-image.bativert-edit-media { position:relative; }
.bativert-homepage .services-image.bativert-edit-media > img { height:500px; object-fit:cover; border-radius:12px; }
.bativert-homepage .contact-item p { font-size:14px; color:rgba(255,255,255,.85); margin:0; }
.bativert-homepage .contact-item p::first-line { font-family:var(--font-body); }
.bativert-homepage .contact-item small { display:block; font-size:11px; letter-spacing:2px; color:rgba(255,255,255,.4); font-family:var(--font-display); margin-bottom:3px; }
.bativert-homepage .contact-item .contact-icon { color:var(--orange); font-size:18px; }
.bativert-homepage .contact-logo { font-family:var(--font-display); font-weight:900; font-size:24px; color:#fff; margin-bottom:30px; }
.bativert-homepage .contact-logo span { display:block; color:var(--orange); font-size:11px; letter-spacing:4px; }
.bativert-editor-note { color:#999; font-size:12px; margin-bottom:18px; }

/* =========================================================
   GUTENBERG NATIVE / BLOCK THEME ADAPTER
   The homepage is built from core Gutenberg blocks. These
   classes map the original BATIVERT visual system onto them.
   ========================================================= */
.wp-site-blocks { padding: 0; }
.wp-block-post-content { margin: 0; }
.wp-block-group.bativert-container,
.wp-block-cover.bativert-container { width: min(1200px, 92%); margin-left: auto; margin-right: auto; }

/* Native header / footer */
.bativert-header { position: relative; z-index: 1001; }
.bativert-header .wp-block-group { box-sizing: border-box; }
.bativert-header .wp-block-navigation-item__content,
.bativert-header .wp-block-navigation__responsive-container-content a { color:#fff; text-decoration:none; font-family:var(--font-display); font-weight:700; letter-spacing:1px; font-size:13px; }
.bativert-header .wp-block-navigation-item__content:hover { color:var(--orange); }
.bativert-header .wp-block-navigation__responsive-container.is-menu-open { background:#111010; color:#fff; padding:30px; }
.bativert-header .wp-block-navigation__responsive-container.is-menu-open a { color:#fff; font-size:20px; }
.bativert-logo img { max-height:42px; width:auto; }
.bativert-header .wp-block-button__link { text-decoration:none; }

/* Header from the original HTML is fixed over the hero. */
.bativert-header-main { position:absolute; top:34px; left:0; right:0; background:rgba(10,10,10,.80); backdrop-filter:blur(10px); border-bottom:1px solid rgba(255,255,255,.08); }
.bativert-topbar { height:34px; background:rgba(10,10,10,.85); color:#aaa; font-family:var(--font-display); font-size:10px; letter-spacing:1.5px; }
.bativert-topbar a { color:#aaa; text-decoration:none; }
.bativert-topbar a:hover { color:var(--orange); }

/* Hero */
.wp-block-cover.bativert-hero { min-height: 760px; padding: 0; align-items:center; justify-content:flex-start; }
.bativert-hero .wp-block-cover__background { background:linear-gradient(90deg, rgba(0,0,0,.82), rgba(0,0,0,.34) 58%, rgba(0,0,0,.25)); }
.bativert-hero .wp-block-cover__inner-container { width:100%; max-width:none; }
.bativert-hero-content { width:min(1200px,92%); margin:0 auto; padding-top:80px; }
.bativert-hero .wp-block-heading { color:#fff; font-family:var(--font-display); font-weight:900; text-transform:uppercase; letter-spacing:1px; font-size:clamp(48px,6vw,82px); line-height:.93; max-width:760px; margin:0 0 22px; }
.bativert-hero .wp-block-paragraph { color:#ddd; max-width:650px; font-size:15px; line-height:1.75; }
.bativert-hero .bativert-tag { color:var(--orange); font-family:var(--font-display); font-weight:700; letter-spacing:2.5px; font-size:12px; text-transform:uppercase; }
.bativert-highlight { color:var(--orange); }
.bativert-hero-buttons { display:flex; gap:12px; margin-top:24px; }
.bativert-hero .wp-block-button__link { border-radius:4px; font-family:var(--font-display); font-weight:700; letter-spacing:1px; text-transform:uppercase; }
.bativert-hero .bativert-outline .wp-block-button__link { background:transparent; border:1px solid rgba(255,255,255,.55); }
.bativert-hero-stats { position:absolute; right:4%; bottom:72px; display:flex; gap:10px; }
.bativert-hero-stat { min-width:92px; padding:15px 16px; border:1px solid rgba(255,255,255,.16); background:rgba(20,20,20,.45); backdrop-filter:blur(8px); text-align:center; color:#fff; }
.bativert-hero-stat strong { display:block; font-family:var(--font-display); color:var(--orange); font-size:32px; line-height:1; }
.bativert-hero-stat span { display:block; margin-top:6px; font-family:var(--font-display); font-size:9px; letter-spacing:1.5px; }

/* Core columns/groups adapted to original grids */
.wp-block-group.bativert-proof-wrapper { background:#fff; position:relative; z-index:3; }
.bativert-proof-grid { width:min(1200px,92%); margin:-34px auto 0; display:grid !important; grid-template-columns:repeat(4,1fr); background:#fff; border-radius:8px; box-shadow:0 12px 35px rgba(0,0,0,.12); overflow:hidden; }
.bativert-proof-card { padding:22px 20px; border-right:1px solid #eee; }
.bativert-proof-card:last-child { border-right:0; }
.bativert-proof-card h3 { font-size:17px; margin:0 0 7px; }
.bativert-proof-card p { color:#666; font-size:13px; line-height:1.5; margin:0; }
.bativert-icon-box { width:38px; height:38px; display:flex; align-items:center; justify-content:center; background:#f7e4e2; color:var(--orange); border-radius:5px; }

.bativert-ticker { background:var(--orange); color:#fff; overflow:hidden; }
.bativert-ticker p { margin:0; font-family:var(--font-display); font-weight:700; letter-spacing:2px; font-size:11px; text-transform:uppercase; }

.bativert-stats-section { background:#111010; color:#fff; padding:52px 0; position:relative; }
.bativert-stats-grid { width:min(1200px,92%); margin:auto; display:grid !important; grid-template-columns:repeat(4,1fr); }
.bativert-stat { text-align:center; border-right:1px solid rgba(255,255,255,.12); }
.bativert-stat:last-child { border-right:0; }
.bativert-stat strong { font-family:var(--font-display); color:var(--orange); font-size:46px; line-height:1; }
.bativert-stat span { display:block; color:#999; font-family:var(--font-display); letter-spacing:1.5px; font-size:10px; margin-top:8px; }

.bativert-section { padding:92px 0; }
.bativert-section-light { background:var(--light); }
.bativert-section-white { background:#fff; }
.bativert-section-heading small { display:block; color:var(--orange); font-family:var(--font-display); font-size:11px; font-weight:700; letter-spacing:3px; }
.bativert-section-heading h2 { margin:5px 0 10px; font-size:40px; line-height:1; }
.bativert-section-line { width:44px; height:3px; background:var(--orange); }

.bativert-products-grid,
.bativert-projects-grid { width:min(1200px,92%); margin:28px auto 0; display:grid !important; grid-template-columns:repeat(3,1fr); gap:16px; }
.bativert-card { background:#fff; border-radius:6px; overflow:hidden; border:1px solid #e7e7e7; box-shadow:0 6px 20px rgba(0,0,0,.06); }
.bativert-card-image img { width:100%; height:185px; object-fit:cover; }
.bativert-card-body { padding:18px; }
.bativert-card h3 { font-size:22px; margin:0 0 8px; }
.bativert-card p { color:#666; font-size:13px; line-height:1.55; }
.bativert-card-meta { padding:12px 18px; border-top:1px solid #eee; display:flex; justify-content:space-between; font-family:var(--font-display); font-size:10px; letter-spacing:1px; color:#888; }
.bativert-card-meta a { color:var(--orange); text-decoration:none; font-weight:700; }
.bativert-badge { position:relative; display:inline-block; margin:-14px 0 0 14px; padding:5px 8px; background:var(--orange); color:#fff; font-family:var(--font-display); font-size:9px; letter-spacing:1px; font-weight:700; }

.bativert-services-grid { width:min(1200px,92%); margin:auto; display:grid !important; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.bativert-services-image img { width:100%; height:500px; object-fit:cover; border-radius:6px; }
.bativert-service-list { display:grid !important; grid-template-columns:1fr 1fr; gap:22px 28px; margin-top:25px; }
.bativert-service-item { display:flex; gap:12px; }
.bativert-check { width:22px; height:22px; flex:0 0 22px; display:flex; align-items:center; justify-content:center; background:var(--orange); color:#fff; border-radius:4px; font-size:12px; }
.bativert-service-item h4 { margin:0 0 5px; font-size:15px; }
.bativert-service-item p { margin:0; color:#666; font-size:12px; line-height:1.5; }

.bativert-project-card { position:relative; min-height:270px; overflow:hidden; border-radius:5px; }
.bativert-project-card img { width:100%; height:270px; object-fit:cover; }
.bativert-project-card::after { content:""; position:absolute; inset:0; background:linear-gradient(transparent 35%,rgba(0,0,0,.86)); }
.bativert-project-info { position:absolute; left:18px; right:18px; bottom:16px; z-index:2; color:#fff; }
.bativert-project-info h3 { margin:0 0 4px; font-size:20px; color:#fff; }
.bativert-project-info p { margin:0; font-size:11px; color:#ddd; }

.bativert-cta { background:#111010; color:#fff; padding:48px 0; }
.bativert-cta-inner { width:min(1200px,92%); margin:auto; display:flex !important; align-items:center; justify-content:space-between; }
.bativert-cta h2 { color:#fff; margin:0; font-size:38px; }
.bativert-cta h2 span { color:var(--orange); }
.bativert-cta p { color:#999; margin:5px 0 0; }

.bativert-contact-grid { width:min(1000px,92%); margin:35px auto 0; display:grid !important; grid-template-columns:1fr 2fr; border-radius:8px; overflow:hidden; box-shadow:0 12px 35px rgba(0,0,0,.10); }
.bativert-contact-info { background:#111010; color:#fff; padding:35px; }
.bativert-contact-form { background:#fff; padding:35px; }
.bativert-contact-form .wp-block-input input,
.bativert-contact-form input,
.bativert-contact-form textarea,
.bativert-contact-form select { width:100%; border:1px solid #e5e5e5; padding:13px; border-radius:4px; font-family:var(--font-body); }

/* Footer */
.bativert-footer { background:#0b0b0b; color:#fff; padding:55px 0 22px; }
.bativert-footer-grid { width:min(1200px,92%); margin:auto; display:grid !important; grid-template-columns:2fr 1fr 1fr; gap:60px; }
.bativert-footer h3,.bativert-footer h4 { color:#fff; margin:0 0 15px; }
.bativert-footer h4 { font-size:15px; }
.bativert-footer p,.bativert-footer a { color:#999; font-size:12px; line-height:1.7; text-decoration:none; }
.bativert-footer a:hover { color:var(--orange); }
.bativert-footer-bottom { width:min(1200px,92%); margin:35px auto 0; padding-top:18px; border-top:1px solid rgba(255,255,255,.08); display:flex !important; justify-content:space-between; color:#666; font-size:10px; }

/* Editor: keep the native blocks visually faithful but make every block selectable. */
.editor-styles-wrapper { background:var(--light); }
.editor-styles-wrapper .wp-block-post-content { max-width:none; }
.editor-styles-wrapper .bativert-header-main { position:relative; top:auto; }
.editor-styles-wrapper .bativert-hero { min-height:700px; }
.editor-styles-wrapper .bativert-hero-stats { position:relative; right:auto; bottom:auto; margin:35px auto 0; width:min(1200px,92%); justify-content:flex-end; }
.editor-styles-wrapper .bativert-card a,
.editor-styles-wrapper .wp-block-button__link { cursor:text; }

@media (max-width: 900px) {
 .bativert-proof-grid,.bativert-stats-grid { grid-template-columns:1fr 1fr !important; }
 .bativert-products-grid,.bativert-projects-grid { grid-template-columns:1fr 1fr !important; }
 .bativert-services-grid { grid-template-columns:1fr !important; }
 .bativert-footer-grid { grid-template-columns:1fr 1fr !important; }
}
@media (max-width: 600px) {
 .bativert-proof-grid,.bativert-stats-grid,.bativert-products-grid,.bativert-projects-grid,.bativert-service-list,.bativert-contact-grid,.bativert-footer-grid { grid-template-columns:1fr !important; }
 .bativert-hero .wp-block-heading { font-size:46px; }
 .bativert-hero-stats { display:none; }
 .bativert-services-image img { height:320px; }
 .bativert-cta-inner,.bativert-footer-bottom { flex-direction:column !important; gap:20px; align-items:flex-start; }
}

/* Native header follows the original fixed header behavior. */
.bativert-topbar { position:fixed; top:0; left:0; right:0; width:100%; z-index:1002; transition:transform .35s ease, opacity .35s ease; }
.bativert-topbar.hidden { transform:translateY(-100%); opacity:0; }
.bativert-header-main { position:fixed; top:34px; left:0; right:0; width:100%; z-index:1001; transition:top .35s ease, background .4s, box-shadow .4s; }
.bativert-header-main.scrolled { top:0; background:rgba(10,10,10,.94); box-shadow:0 4px 30px rgba(0,0,0,.3); }
.bativert-header-main .wp-block-buttons { margin:0; }
.bativert-header-main .wp-block-button__link { background:var(--orange); color:#fff; border-radius:4px; padding:11px 22px; font-family:var(--font-display); font-weight:700; letter-spacing:1px; font-size:12px; }
.bativert-header-main .wp-block-navigation { margin:0 auto; }
.bativert-header-main .wp-block-navigation__container { gap:24px; }
.bativert-header-main .bativert-container { min-height:66px; }

.bativert-hero-stat small { font-size:14px; margin-left:2px; }
.bativert-stat small { font-size:18px; margin-left:2px; }
.bativert-section-heading { position:relative; }
.bativert-section-heading.has-text-align-center { text-align:center; }
.bativert-section-heading.has-text-align-center .bativert-section-line { margin-left:auto; margin-right:auto; }
.bativert-section-line { border:0; height:3px; width:44px; min-height:3px; margin-left:0; }
.bativert-services-copy > p { color:#555; line-height:1.8; font-size:15px; }
.bativert-contact-form input, .bativert-contact-form select, .bativert-contact-form textarea { background:#fff; color:#222; box-sizing:border-box; }
.bativert-contact-form button { background:var(--orange); border:0; border-radius:4px; color:#fff; padding:15px 18px; font-family:var(--font-display); font-weight:700; letter-spacing:1px; cursor:pointer; }
.bativert-footer .wp-block-navigation { flex-direction:column; align-items:flex-start; gap:4px; }
.bativert-footer .wp-block-navigation-item__content { color:#999; font-size:12px; }
.bativert-footer .wp-block-navigation-item__content:hover { color:var(--orange); }

@media (max-width: 900px) {
}
@media (max-width: 600px) {
  .bativert-topbar { display:none; }
  .bativert-header-main { top:0; }
  .bativert-header-main .bativert-container { min-height:60px; }
  .bativert-logo img { max-height:36px; }
}
.editor-styles-wrapper .bativert-topbar,
.editor-styles-wrapper .bativert-header-main { position:relative; top:auto; }
.editor-styles-wrapper .bativert-topbar { transform:none; opacity:1; }