:root {
            --primary: #DFAF37; //#2a5298;
            --dark: #1e3c72;
            --light: #f8f9fa;
            --text: #333;
			--textBtn: #ffffff;
			--textWhite: #ffffff;
        }
        * { margin:0; padding:0; box-sizing:border-box; }
        body {
            font-family: 'Montserrat', sans-serif;
            line-height: 1.7;
            color: var(--text);
            background: white;
            padding-top: 90px; /* space for fixed header */
        }
        .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

        /* ==================== FIXED HEADER WITH MENU ==================== */
        .site-header {
            position: fixed;
            top: 0; left: 0; right: 0;
            background: rgba(0,0,0,0.88);
            backdrop-filter: blur(12px);
            z-index: 1000;
            padding: 18px 0;
            transition: all 0.3s;
        }
        .site-header.scrolled { padding: 12px 0; background: rgba(0,0,0,0.98); }
        .header-inner {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .logo a {
            color: white;
            text-decoration: none;
            font-size: 2rem;
            font-weight: 800;
        }
        .logo .thin { font-weight: 200; }
        .main-nav ul {
            list-style: none;
            display: flex;
            gap: 40px;
        }
        .main-nav a {
            color: white;
            text-decoration: none;
            font-weight: 500;
            position: relative;
            transition: color 0.3s;
        }
        .main-nav a:hover, .main-nav a.active { color: var(--primary); }
        .main-nav a.active::after {
            content: '';
            position: absolute;
            bottom: -8px;
            left: 0;
            width: 100%;
            height: 3px;
            background: var(--primary);
        }
        .lang-switcher a {
            color: white;
            text-decoration: none;
            font-weight: 600;
            opacity: 0.8;
        }
        .lang-switcher a.active, .lang-switcher a:hover { opacity: 1; color: var(--primary); }
        .mobile-toggle { display: none; background:none; border:none; cursor:pointer; }
        .mobile-toggle span { display:block; width:28px; height:3px; background:white; margin:5px 0; border-radius:3px; }

        /* ==================== HERO BANNER ==================== */
        .hero-banner {
            position: relative;
            height: 100vh;
            min-height: 650px;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: white;
            overflow: hidden;
        }
        .hero-image {
            position: absolute;
            top:0; left:0; width:100%; height:100%;
            object-fit: cover;
            transition: transform 12s ease;
        }
        .hero-banner:hover .hero-image { transform: scale(1.06); }
        .hero-overlay {
            position: absolute;
            top:0; left:0; right:0; bottom:0;
            background: linear-gradient(to bottom, rgba(0,0,0,0.65), rgba(0,0,0,0.35));
        }
        .hero-content {
            position: relative;
            z-index: 2;
            max-width: 1000px;
            padding: 0 20px;
        }
        .hero-content h1 {
            font-size: 6rem;
            font-weight: 800;
            letter-spacing: -2px;
            margin-bottom: 10px;
            text-shadow: 0 4px 20px rgba(0,0,0,0.6);
        }
        .hero-content .thin { font-weight: 200; }
        .hero-subtitle { font-size: 2.4rem; font-weight: 300; margin-bottom: 8px; }
        .hero-tagline { font-size: 1.5rem; margin-bottom: 40px; opacity: 0.95; }
        .hero-buttons { display:flex; gap:20px; justify-content:center; flex-wrap:wrap; }
        .btn-primary, .btn-secondary {
			color: var(--textBtn);
            padding: 16px 36px;
            border-radius: 50px;
            font-weight: 600;
            text-decoration: none;
            transition: all 0.3s;
        }
        .btn-primary {
            background: var(--primary);
            box-shadow: 0 10px 30px rgba(42,82,152,0.4);
        }
        .btn-primary:hover { background: var(--dark); transform: translateY(-4px); }
        .btn-secondary {
            background: transparent;
            border: 2px solid white;
        }
        .btn-secondary:hover { background: rgba(255,255,255,0.15); }

        /* ==================== ABOUT SPLIT SECTION ==================== */
        .about-split { padding: 100px 0; background: white; }
        .about-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 80px;
            align-items: center;
        }
        .about-image img {
            width: 100%;
            border-radius: 16px;
            box-shadow: 0 20px 50px rgba(0,0,0,0.15);
        }
        .about-text h2 {
            font-size: 2.8rem;
            color: var(--dark);
            margin-bottom: 30px;
        }
        .about-text p { font-size: 1.18rem; margin-bottom: 20px; color: #444; }
        .about-text strong { color: var(--primary); }

        /* ==================== SERVICES, CONTACT, FOOTER ==================== */
        
		/* Services Section */
        .services {
            padding: 60px 0;
            background: #f9f9f9;
        }
        .section-title {
            text-align: center;
            font-size: 2.5em;
            margin-bottom: 40px;
            color: #1e3c72;
        }
        .service-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
        }
        .service-card {
            background: white;
            border-radius: 12px;
            padding: 30px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            text-align: center;
        }
        .service-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(0,0,0,0.15);
        }
        .service-card h3 {
            font-size: 1.5em;
            margin-bottom: 15px;
            color: var(--primary);
        }
        .service-card p {
            color: var(--textWhite);
            margin-bottom: 20px;
        }
        .service-btn {
            display: inline-block;
            background: var(--primary);
            color: white;
            padding: 10px 20px;
            text-decoration: none;
            border-radius: 5px;
            transition: background 0.3s ease;
        }
        .service-btn:hover {
            background: #1e3c72;
        }
		#lavagebasic{
			background-image:url("lavagebasic.jpg");
			background-size: cover;
			background-position: center;
		}
		#polissage{
			background-image:url("polissage.jpg");
			background-size: cover;
			background-position: center;
		}
		#lavagepremium{
			background-image:url("premiumwash.jpg");
			background-size: cover;
			background-position: center;
		}
		#traitementceramique{
			background-image:url("traitementceramique.jpg");
			background-size: cover;
			background-position: center;
		}
		#lavagecure{
			background-image:url("lavagecure.jpg");
			background-size: cover;
			background-position: center;
			//opacity: 0.7;
		}
		#reconditionnement_interieur{
			background-image:url("reconditionnement_interieur.jpg");
			background-size: cover;
			background-position: center;
			//opacity: 0.7;
		}
		#crystalserumlight{
			background-image:url("CrystalSerumLight.jpg");
			background-size: cover;
			background-position: center;
			//opacity: 0.7;
		}
		#crystalserumultra{
			background-image:url("CrystalSerumUltra.jpg");
			background-size: cover;
			background-position: center;
			//opacity: 0.7;
		}
		#traitementvitres{
			background-image:url("traitementvitres.jpg");
			background-size: cover;
			background-position: center;
			//opacity: 0.7;
		}
		#traitementjantes{
			background-image:url("jantes-gtechniq.jpg");
			background-size: cover;
			background-position: center;
			//opacity: 0.7;
		}

        /* Method Section */
        .method {
            padding: 60px 0;
            background: white;
            text-align: center;
        }
        .method h2 {
            font-size: 2.5em;
            margin-bottom: 20px;
            color: #1e3c72;
        }
        .method p {
            font-size: 1.2em;
            max-width: 800px;
            margin: 0 auto;
            color: #666;
        }

        /* Contact Section */
        .contact {
            padding: 60px 0;
            background: #f9f9f9;
        }
        .contact h2 {
            text-align: center;
            font-size: 2.5em;
            margin-bottom: 40px;
            color: #1e3c72;
        }
        .contact-info {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 30px;
            margin-bottom: 40px;
        }
        .info-item h3 {
            color: #2a5298;
            margin-bottom: 10px;
        }
        .form-group {
            margin-bottom: 20px;
        }
        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        .form-group input,
        .form-group textarea {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 1em;
        }
        .form-group button {
            background: #2a5298;
            color: white;
            padding: 12px 30px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 1em;
            transition: background 0.3s ease;
        }
        .form-group button:hover {
            background: #1e3c72;
        }

        /* Newsletter Section */
        .newsletter {
            padding: 40px 0;
            background: var(--primary);
            color: white;
            text-align: center;
        }
        .newsletter h3 {
            font-size: 2em;
            margin-bottom: 20px;
        }
        .newsletter input {
            padding: 10px;
            border: none;
            border-radius: 5px 0 0 5px;
            width: 250px;
            font-size: 1em;
        }
        .newsletter button {
            padding: 10px 20px;
            background: black;
            color: white;
            border: none;
            border-radius: 0 5px 5px 0;
            cursor: pointer;
        }

        /* Footer */
        footer {
            background: #333;
            color: white;
            text-align: center;
            padding: 20px 0;
        }

        /* ==================== RESPONSIVE ==================== */
        @media (max-width: 992px) {
            .about-grid { grid-template-columns: 1fr; gap:50px; }
            .about-image { order:-1; }
            .about-text { text-align:center; }
            .hero-content h1 { font-size:4rem; }
            .hero-subtitle { font-size:1.9rem; }
        }
        @media (max-width: 768px) {
            .main-nav, .lang-switcher { display:none; }
            .mobile-toggle { display:block; }
            .main-nav.mobile-open {
                position: absolute;
                top: 100%; left:0; right:0;
                background: rgba(0,0,0,0.98);
                padding: 30px 0;
            }
            .main-nav.mobile-open ul { flex-direction:column; gap:25px; text-align:center; }
            .lang-switcher.mobile-open { display:flex; justify-content:center; margin-top:20px; gap:15px; }
        }
		
		/* ==================== INSTAGRAM FEED STYLING ==================== */
		.instagram-feed {
			padding: 100px 0;
			background: #f8f9fa;
		}

		.insta-grid {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
			gap: 20px;
			max-width: 1400px;
			margin: 0 auto;
		}

		.insta-grid a {
			display: block;
			border-radius: 12px;
			overflow: hidden;
			box-shadow: 0 10px 30px rgba(0,0,0,0.1);
			transition: transform 0.3s ease, box-shadow 0.3s ease;
		}

		.insta-grid a:hover {
			transform: translateY(-8px);
			box-shadow: 0 20px 40px rgba(0,0,0,0.2);
		}

		.insta-grid img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			transition: transform 0.6s ease;
		}

		.insta-grid a:hover img {
			transform: scale(1.08);
		}

		/* Mobile */
		@media (max-width: 768px) {
			.insta-grid {
				grid-template-columns: repeat(2, 1fr);
				gap: 12px;
			}
			.instagram-feed { padding: 70px 0; }
		}
		
		.draw-flow {
			font-size: 4rem;
			font-weight: 900;
			background: linear-gradient(90deg, #fff 50%, #000 50%);
			background-size: 200% 100%;
			-webkit-background-clip: text;
			background-clip: text;
			-webkit-text-fill-color: transparent;
			opacity: 0;
			transform: translateX(-120px);
			animation: draw 1.8s ease-out forwards, flow 1.8s ease-out forwards;
		  }

		  @keyframes draw {
			0%   { background-position: 200% 0; opacity: 0; }
			60%  { opacity: 1; }
			100% { background-position: 0% 0; opacity: 1; }
		  }

		  @keyframes flow {
			to { transform: translateX(0); }
		  }
		  
		/* Steps – Notre méthode de travail */
		.steps-grid {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
			gap: 40px;
			margin-top: 40px;
		}

		.step-card {
			background: white;
			padding: 40px 30px;
			border-radius: 20px;
			text-align: center;
			box-shadow: 0 10px 40px rgba(0,0,0,0.08);
			transition: all 0.4s ease;
			opacity: 0;
			transform: translateY(40px);
		}

		.step-card:nth-child(1) { animation: fadeUp 0.8s 0.2s forwards; }
		.step-card:nth-child(2) { animation: fadeUp 0.8s 0.4s forwards; }
		.step-card:nth-child(3) { animation: fadeUp 0.8s 0.6s forwards; }
		.step-card:nth-child(4) { animation: fadeUp 0.8s 0.8s forwards; }

		@keyframes fadeUp {
			to { opacity: 1; transform: translateY(0); }
		}

		.step-card:hover {
			transform: translateY(-12px);
			box-shadow: 0 20px 50px rgba(223, 175, 55, 0.2);
		}

		.step-icon {
			font-size: 3.5rem;
			color: var(--primary);
			margin-bottom: 24px;
		}

		.step-card h3 {
			font-size: 1.5rem;
			color: var(--dark);
			margin-bottom: 16px;
		}

		.step-card p {
			color: #555;
			line-height: 1.7;
			font-size: 1.1rem;
		}

		/* Responsive */
		@media (max-width: 768px) {
			.steps-grid { gap: 30px; }
			.step-card { padding: 30px 20px; }
			.step-icon { font-size: 3rem; }
		}