/* Définition des couleurs */
        :root {
            --color-primary-blue: #0047AB; /* Bleu principal (Pro) */
            --color-secondary-pink: #FF69B4; /* Rose accent (Énergie) */
            --color-light-bg: #F8F9FA; /* Fond très clair */
            --color-text-dark: #212529; /* Texte sombre */
            --color-text-light: #FFFFFF; /* Texte clair */
        }

        /* Global Styles */
        body {
            font-family: 'Roboto', sans-serif;
            margin: 0;
            padding: 0;
            color: var(--color-text-dark);
            background-color: var(--color-light-bg);
            line-height: 1.6;
        }

        h1, h2, h3 {
            font-weight: 700;
            margin: 0;
            line-height: 1.2;
        }

        h1 { font-size: 2.5rem; }
        h2 { font-size: 2rem; color: var(--color-primary-blue); }
        h3 { font-size: 1.5rem; }

        p { margin: 0; }

        a {
            text-decoration: none;
            color: inherit;
        }

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

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 1rem;
        }

        .btn {
            display: inline-block;
            padding: 0.8rem 1.8rem;
            border-radius: 50px; /* Bords arrondis pour le moderne */
            font-weight: 700;
            text-align: center;
            transition: background-color 0.3s ease, transform 0.2s ease;
            text-transform: uppercase;
            font-size: 0.9rem;
        }

        .btn-primary {
            background-color: var(--color-secondary-pink);
            color: var(--color-text-light);
            border: 2px solid var(--color-secondary-pink);
        }

        .btn-primary:hover {
            background-color: #ffffff; /* Rose plus foncé au survol */
            transform: translateY(-2px);
        }

        .btn-secondary {
            background-color: transparent;
            color: var(--color-primary-blue);
            border: 2px solid var(--color-primary-blue);
        }

        .btn-secondary:hover {
            background-color: var(--color-primary-blue);
            color: var(--color-text-light);
            transform: translateY(-2px);
        }

        /* Header */
        .header {
            background-color: var(--color-text-light); /* Fond blanc pour un look plus pro */
            box-shadow: 0 1px 10px rgba(0, 0, 0, 0.08);
            padding: 1rem 0;
            position: sticky;
            top: 0;
            z-index: 1000;
        }

        .header .container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo {
            height: 40px; /* Taille pro */
        }

        .nav a {
            margin-left: 1.5rem;
            color: var(--color-text-dark);
            padding: 0.5rem 0;
            transition: color 0.3s ease;
        }

        .nav a:hover {
            color: var(--color-secondary-pink);
        }
        
        /* Highlight dans le texte */
        .highlight-blue {
            color: var(--color-primary-blue);
        }
        .highlight-pink {
            color: var(--color-secondary-pink);
        }


        /* Hero Section */
        .hero {
            background: linear-gradient(135deg, var(--color-primary-blue) 0%, #3071A9 100%); /* Dégradé de bleu */
            padding: 4rem 0;
            color: var(--color-text-light);
            text-align: left;
        }

        .hero-content {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
        }
        
        .hero-text {
            flex: 1 1 55%;
            padding-right: 2rem;
        }

        .hero-image {
            flex: 1 1 35%;
            min-width: 250px;
            text-align: center;
        }

        .hero-image img {
            border-radius: 10px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
        }

        .hero h1 {
            color: var(--color-text-light);
            font-size: 3rem;
            margin-bottom: 1rem;
        }

        .hero p {
            font-size: 1.25rem;
            margin-bottom: 2rem;
            font-weight: 300;
        }
        
        .hero .btn-primary { /* Bouton rose pour le CTA principal */
            background-color: var(--color-secondary-pink);
            border-color: var(--color-secondary-pink);
            margin-right: 1rem;
        }
        .hero .btn-secondary { /* Bouton transparent sur fond bleu */
            background-color: transparent;
            color: var(--color-text-light);
            border-color: var(--color-text-light);
        }
        .hero .btn-secondary:hover {
            background-color: var(--color-text-light);
            color: var(--color-primary-blue);
        }


        /* Sections Générales */
        section {
            padding: 3rem 0;
            text-align: center;
        }

        section h2 {
            margin-bottom: 0.5rem;
        }
        
        section > p {
            font-size: 1.1rem;
            margin-bottom: 3rem;
            color: #6c757d;
        }

        /* Features Section (Nos Modèles) */
        .features {
            background-color: var(--color-text-light);
        }
        
        .models-grid {
            display: flex;
            justify-content: center;
            gap: 2rem;
            flex-wrap: wrap;
        }

        .model-card {
            max-width: 300px;
            padding: 1.5rem;
            border-radius: 10px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
            text-align: center;
            background-color: var(--color-light-bg);
        }
        
        .model-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
        }

        .model-card h3 {
            color: var(--color-secondary-pink);
            margin-top: 1rem;
            margin-bottom: 0.5rem;
        }
        
        .model-card p {
            font-size: 0.95rem;
            color: #5A5A5A;
        }
        
        .model-card img {
            height: 200px; /* Hauteur fixe pour l'alignement */
            object-fit: contain;
            margin: 0 auto;
        }


        /* Benefits Section (Avantages Clés) */
        .benefits {
            background-color: var(--color-light-bg);
            border-top: 1px solid #e9ecef;
        }
        
        .benefits-container {
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
            gap: 1.5rem;
        }

        .benefit-card {
            background-color: var(--color-text-light);
            padding: 2rem;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            flex: 1 1 calc(23% - 1rem); /* 4 cartes par ligne */
            min-width: 200px;
            text-align: center;
            border-top: 4px solid var(--color-secondary-pink);
        }

        .benefit-card h3 {
            color: var(--color-primary-blue);
            margin-bottom: 0.5rem;
        }
        
        .icon {
            font-size: 2rem;
            color: var(--color-secondary-pink);
            margin-bottom: 0.5rem;
        }


        /* Footer */
        .footer {
            background-color: var(--color-primary-blue);
            color: var(--color-text-light);
            text-align: center;
            padding: 2rem 0;
            font-size: 0.9rem;
        }
        
        .footer .container {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .footer p {
            margin-bottom: 0.5rem;
        }

        .footer .nav a {
            color: var(--color-text-light);
            margin: 0 0.75rem;
            font-weight: 300;
        }

        .footer .nav a:hover {
            color: var(--color-secondary-pink);
        }

        /* Responsive Design */
        @media (max-width: 992px) {
            .hero-text, .hero-image {
                flex: 1 1 100%;
                text-align: center;
                padding: 0;
            }
            .hero-image { order: -1; margin-bottom: 2rem; }
            .hero-content { justify-content: center; }
            .hero h1 { font-size: 2.5rem; }
            
            .model-card { min-width: 250px; }
            .benefit-card { flex: 1 1 calc(48% - 1rem); }
        }

        @media (max-width: 576px) {
            .header .nav { display: none; } /* On pourrait implémenter un menu hamburger ici */
            .header .container { justify-content: center; }
            
            .benefit-card { flex: 1 1 100%; }
            
            .models-grid { gap: 1rem; }
            .model-card { max-width: 100%; }
        }