/* Premium Startup Design System */
:root {
    /* Colors */
    --primary-blue: #1E88E5;
    --primary-dark: #1565C0;
    --primary-gradient: linear-gradient(135deg, #1E88E5 0%, #1565C0 100%);
    --accent-blue: #0EA5E9;
    --bg-white: #ffffff;
    --bg-alt: #F9FAFB;
    --text-main: #111827;
    --text-secondary: #6B7280;
    --border-light: #F3F4F6;
    --border-medium: #E5E7EB;
    
    /* Effects */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-blue: 0 4px 14px rgba(30, 136, 229, 0.45);
    --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/*
 * Extra-small screen tweaks
 *
 * When the viewport becomes very narrow (e.g. modern iPhone models around
 * 390 px wide), there simply isn’t enough horizontal space to show the
 * telephone number alongside the WhatsApp button and hamburger.  To avoid
 * clipping the burger icon off the edge of the screen we hide the phone
 * number in the header and rely on the phone link that already appears
 * inside the mobile menu.  We also reduce gaps and sizes for the
 * WhatsApp and hamburger buttons to ensure they fit comfortably.
 */
@media (max-width: 450px) {
    /* On very small screens we don't have room for the full telephone number.  
       Keep the phone icon visible but hide the number, and reduce the size of all
       action buttons so they fit comfortably alongside the burger. */

    /* Reduce horizontal spacing between header action items */
    .header-actions {
        gap: 8px;
    }

    /* Compact the call button: hide the number and make it circular */
    .header .btn-call {
        width: 40px;
        height: 40px;
        padding: 0;
        border-radius: 50%;
        gap: 0;
    }
    .header .btn-call .phone-number {
        display: none;
    }
    .header .btn-call i {
        font-size: 1.1rem;
        margin: 0;
    }

    /* Smaller WhatsApp button */
    .header .btn-whatsapp {
        width: 40px;
        height: 40px;
        font-size: 1.1rem;
    }

    /* Smaller hamburger for very narrow screens */
    .hamburger {
        width: 28px;
        height: 20px;
    }
}

/* Reset & Base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: var(--primary-blue) var(--bg-alt);
}

body {
    font-family: 'Inter', sans-serif;
    color: var(--text-main);
    background-color: var(--bg-white);
    line-height: 1.75;
    font-size: 1.05rem;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

::selection {
    background: #DBEAFE;
    color: #1E3A8A;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
    cursor: pointer;
}

ul {
    list-style: none;
}

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

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Typography */
h1, h2, h3, h4 {
    color: var(--text-main);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.2;
}

.section-label {
    display: block;
    text-transform: uppercase;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--primary-blue);
    margin-bottom: 12px;
    text-align: center;
}

.section-title {
    font-size: 2.4rem;
    text-align: center;
    margin-bottom: 1.5rem;
}

.section-desc {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 4rem;
    color: var(--text-secondary);
    font-size: 1.125rem;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: var(--transition);
    border: 1px solid transparent;
    gap: 8px;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn-primary {
    background: var(--primary-gradient);
    color: white;
    box-shadow: 0 1px 3px rgba(30,136,229,0.3);
}

.btn-primary:hover {
    box-shadow: 0 4px 12px rgba(30,136,229,0.4);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.2);
}

.btn-outline {
    background: transparent;
    border: 1px solid var(--border-medium);
    color: var(--text-main);
}

.btn-outline:hover {
    border-color: var(--primary-blue);
    color: var(--primary-blue);
    background: #EFF6FF;
}

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

.btn-white:hover {
    background: rgba(255, 255, 255, 0.9);
}

.btn-whatsapp {
    background-color: #25D366;
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 1.2rem;
    padding: 0;
}

.btn-lg {
    padding: 16px 32px;
    font-size: 1.1rem;
}

.full-width {
    width: 100%;
}

/* Header */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: transparent;
    /* Removed initial border for cleaner look */
    border-bottom: 1px solid transparent;
    z-index: 1000;
    padding: 20px 0; /* Reduced from 32px to 20px for better fit */
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.header.scrolled {
    background: rgba(6, 13, 31, 0.85); /* Slightly more transparent */
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(16px); /* Stronger blur */
    padding: 16px 0;
    box-shadow: 0 4px 30px rgba(0,0,0,0.1); /* Softer shadow */
}

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

.logo{
flex-shrink:0;
display:flex;
align-items:center;
}

.logo img{
height:80px;
width:auto;
max-width:100%;
filter:drop-shadow(0 4px 12px rgba(0,0,0,0.2));
opacity:1;
display:block;
transition:all 0.4s cubic-bezier(0.4,0,0.2,1);
}

.header.scrolled .logo img{
height:50px;
}

.nav-links {
    display: flex;
    /* Écart réduit entre les onglets pour laisser plus d’espace
       et éviter que le dernier lien ne touche le bouton "Estimer mon véhicule" */
    gap: 32px;
    align-items: center;

    /* Séparation visuelle entre le logo et les premiers liens */
    margin-left: 32px;

    /* Empêche le texte des liens de passer à la ligne sur les écrans larges */
    white-space: nowrap;
}

.nav-links a {
    font-size: 0.85rem;
    font-weight: 500; /* Lighter font weight */
    color: rgba(255, 255, 255, 0.8);
    /* Conserve la casse d’origine (évite les majuscules) afin de réduire la largeur
       des textes et de laisser plus d’espace dans la barre de navigation */
    text-transform: none;
    letter-spacing: 0; /* Supprime l’espacement supplémentaire pour gagner de la place */
    position: relative;
    padding: 8px 0;
    transition: color 0.3s ease;
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%; /* Center the underline */
    transform: translateX(-50%);
    width: 0;
    height: 1px; /* Thinner line */
    background: var(--accent-blue);
    transition: width 0.3s ease, opacity 0.3s ease;
    opacity: 0;
}

.nav-links a:hover {
    color: white;
}

.nav-links a:hover::after {
    width: 24px; /* Small centered dash */
    opacity: 1;
}

.nav-phone a{
background:#1e88e5;
color:white;
padding:8px 14px;
border-radius:20px;
font-weight:600;
text-decoration:none;
}

.nav-phone a:hover{
background:#1565c0;
}
.header-actions {
    display: flex;
    align-items: center;
    gap: 24px;
}

.header .btn-primary {
    padding: 12px 28px;
    font-size: 0.9rem;
    border-radius: 50px; /* Pill shape */
    box-shadow: 0 4px 20px rgba(30, 136, 229, 0.25);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(4px);
    color: white;
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: all 0.3s ease;
}

.header .btn-primary:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 8px 25px rgba(30, 136, 229, 0.3);
}

/* Make the button look 'active' or 'primary' on scroll if needed, 
   but for now keeping it glassmorphic fits the premium vibe */

.header .btn-whatsapp {
    width: 48px;
    height: 48px;
        min-width:48px;

    font-size: 1.5rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #25D366; /* WhatsApp Green */
    box-shadow: none;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.header .btn-whatsapp:hover {
    transform: scale(1.05);
    background: rgba(37, 211, 102, 0.1);
    border-color: #25D366;
    box-shadow: 0 0 15px rgba(37, 211, 102, 0.2);
}

/*
 * Custom telephone button
 *
 * The call button in the header uses the class `.btn-call` to avoid
 * conflicting with other telephone links in the page.  This base style
 * mirrors the original telephone link styling (glassmorphic pill) but
 * allows the number span to be hidden on very small screens via media
 * queries.  The icon and number are horizontally spaced using the
 * `gap` property defined on the `.btn` base class.  Use
 * `.btn-call:hover` to tweak the hover background.
 */
.header .btn-call {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 18px;
    color: white;
    text-decoration: none;
    font-weight: 600;
    white-space: nowrap;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 30px;
    gap: 8px;
    transition: all 0.3s ease;
}

.header .btn-call:hover {
    background: rgba(255, 255, 255, 0.15);
}
.header a[href^="tel"]{
    display:flex;
    align-items:center;
    justify-content:center;

    height:48px;
    padding:0 18px;

    color:white;
    text-decoration:none;
    font-weight:600;
    white-space:nowrap;

    background:rgba(255,255,255,0.08);
    border:1px solid rgba(255,255,255,0.15);
    border-radius:30px;

    gap:8px;

  transition:all 0.3s ease;
}

.header a[href^="tel"]:hover{
    background:rgba(255,255,255,0.15);
}
/* Mobile Menu */
.mobile-menu {
    position: fixed; /* Changed back to fixed for better mobile UX */
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh; /* Full screen menu */
    background-color: rgba(6, 13, 31, 0.98);
    backdrop-filter: blur(16px);
    padding: 100px 24px 40px; /* Top padding to clear close button */
    transform: translateX(100%); /* Slide from right */
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.mobile-menu.active {
    transform: translateX(0);
}

.mobile-menu ul {
    display: flex;
    flex-direction: column;
    gap: 32px;
    text-align: center;
}

.mobile-menu ul li a {
    color: white;
    font-size: 1.5rem;
    font-weight: 600;
}

.hamburger {
    /* Par défaut, le burger est masqué sur grand écran. On définit
       également ses dimensions et l’orientation des barres afin que
       l’icône soit visible lorsqu’elle s’affiche en responsive. */
    display: none;
    width: 32px;
    height: 24px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 10000; /* Above mobile menu */
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Responsive Header & Hero */
@media (max-width: 992px) {
    .header {
        padding: 20px 0;
    }
    
    .logo img {
        /* Reduce logo height on tablets and phones to create more space in the
           header.  A smaller logo ensures that the burger and buttons fit
           comfortably without being clipped. */
        height: 60px;
    }
    
    /*
     * In responsive mode we hide the desktop navigation links and the primary
     * "Estimer mon véhicule" button to free space.  Previously the WhatsApp
     * button was also hidden, which meant users could not contact you via
     * WhatsApp on small screens.  To fix this we only hide the primary
     * button and leave the WhatsApp button visible.  The nav-links are
     * hidden and replaced by the burger menu.
     */
    .nav-links,
    .header-actions .btn-primary {
        display: none;
    }

    /* Ensure the WhatsApp button remains visible on mobile */
    .header-actions .btn-whatsapp {
        display: flex;
    }

    .hamburger {
        /* Afficher l’icône burger en mode responsive et conserver
           l’orientation en colonne définie plus haut */
        display: flex;
    }
    
    .hero {
        padding-top: 140px; /* Adjusted for mobile header height */
        min-height: 100vh;
        align-items: center; /* Center content vertically */
    }

    /*
     * Compact the header actions on small screens to prevent the layout
     * overflowing or cutting off items.  Reducing the gap frees up
     * horizontal space so the phone and WhatsApp buttons plus the burger
     * menu remain accessible.
     */
    .header-actions {
        gap: 12px;
    }

    /*
     * Tighten the telephone button padding on mobile.  A smaller font
     * makes the number fit without wrapping while still remaining legible.
     */
    .header a[href^="tel"] {
        padding: 0 14px;
        font-size: 0.8rem;
    }
    
    .hero h1 {
        font-size: 2.5rem;
        line-height: 1.2;
    }
    
    .hero .subtitle {
        font-size: 1rem;
        padding: 0 16px;
    }
}

/* Hero Section */
.hero {
    position: relative;
    min-height: 100vh; /* Changed from 90vh to full viewport height for better impact */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-top: 180px; /* Increased from 80px to account for the larger fixed header */
    padding-bottom: 80px; /* Added bottom padding */
    overflow: hidden;
    /*
     * Mise à jour de la section héros : utilisation d’une photo en
     * arrière‑plan avec un voile sombre pour améliorer la lisibilité
     * du texte.  La couleur du texte est forcée en blanc pour
     * garantir un contraste suffisant.  L’image "hero.jpg" doit être
     * placée dans le même dossier que cette feuille de style.
     */
    color: #fff;
    background-image: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)), url('hero.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.18;
    pointer-events: none;
    animation: floatOrb 10s ease-in-out infinite;
}

.orb-1 {
    width: 700px; height: 700px;
    background: radial-gradient(circle, #1E88E5 0%, transparent 70%);
    opacity: 0.25;
    top: -200px; left: -200px;
    animation-duration: 14s;
}

.orb-2 {
    width: 500px; height: 500px;
    background: radial-gradient(circle, #0EA5E9 0%, transparent 70%);
    opacity: 0.2;
    bottom: -100px; right: -50px;
    animation-duration: 10s;
    animation-delay: -4s;
}

.orb-3 {
    width: 400px; height: 400px;
    background: radial-gradient(circle, #6366f1 0%, transparent 70%);
    opacity: 0.18;
    top: 20%; left: 55%;
    animation-duration: 16s;
    animation-delay: -8s;
}

.hero-content {
    max-width: 800px;
    position: relative;
    z-index: 1;
}

.hero-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    background: linear-gradient(135deg, rgba(30,136,229,0.35), rgba(30,136,229,0.15));
    border: 1px solid rgba(30,136,229,0.7);
    color: #BFDBFE;

    padding: 8px 20px;
    border-radius: 999px;

    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;

    margin-bottom: 24px;

    backdrop-filter: blur(8px);

    box-shadow:
        0 0 30px rgba(30,136,229,0.35),
        inset 0 0 10px rgba(30,136,229,0.2);

    transition: all 0.3s ease;

    animation: fadeSlideUp 0.7s cubic-bezier(0.4,0,0.2,1) 0.1s both;
}

.hero-badge-pill:hover{
    transform: translateY(-2px) scale(1.03);

    box-shadow:
        0 0 45px rgba(30,136,229,0.6),
        0 10px 25px rgba(0,0,0,0.35);
}
.hero h1 {
    font-size: 3.5rem;
    color: white;
    letter-spacing: -0.04em;
    margin-bottom: 24px;
    animation: fadeSlideUp 0.7s cubic-bezier(0.4,0,0.2,1) 0.3s both;
    text-shadow: 0 0 40px rgba(255,255,255,0.08), 0 2px 4px rgba(0,0,0,0.3);
}

#switchWord {
    color: #0EA5E9;
    font-weight: 800;
    text-shadow: 0 0 20px rgba(14,165,233,0.6), 0 0 40px rgba(14,165,233,0.3);
    border-right: 3px solid #0EA5E9;
    animation: blink 0.8s step-end infinite;
    padding-right: 4px;
     border-right: none;
}

@keyframes blink {
    0%, 100% { border-color: #0EA5E9; }
    50%       { border-color: transparent; }
}

.hero .subtitle {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 auto 48px;
    max-width: 600px;
    animation: fadeSlideUp 0.7s cubic-bezier(0.4,0,0.2,1) 0.5s both;
}

.hero-buttons {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-bottom: 64px;
    flex-wrap: wrap;
    animation: fadeSlideUp 0.7s cubic-bezier(0.4,0,0.2,1) 0.7s both;
}

.hero .btn-primary {
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-blue);
}

.hero .btn-primary::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 60%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transform: skewX(-20deg);
    transition: none;
}

.hero .btn-primary:hover::after {
    animation: shimmer 0.6s ease forwards;
}

.hero .btn-secondary {
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.2);
    color: #ffffff;
}

.hero .btn-secondary:hover {
    background: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.4);
    transform: translateY(-2px);
}

@keyframes shimmer {
    to { left: 150%; }
}

.reassurance-pill {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.1);
    padding: 8px 24px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.1);
    animation: fadeSlideUp 0.7s cubic-bezier(0.4,0,0.2,1) 0.9s both;
}

@keyframes fadeSlideUp {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}

.reassurance-pill i {
    color: var(--accent-blue);
    margin-right: 6px;
}

.separator {
    color: rgba(255, 255, 255, 0.3);
}

/* Sections General */
section {
    padding: 100px 0;
}

.section-vendre, .section-chercher, .section-partner {
    background-color: var(--bg-white);
}

.section-acheter, .section-garantie, .section-reviews, .section-formules, .section-contact {
    background-color: var(--bg-alt);
}

/* Section Vendeur Premium */
.section-vendre-premium {
    padding: 120px 0;
    background-color: #ffffff;
    overflow: hidden;
}

.vendre-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

/* Content Column */
.vendre-content {
    display: flex;
    flex-direction: column;
}

.vendre-content .section-title {
    text-align: left;
    font-size: 2.8rem;
    line-height: 1.15;
    margin-bottom: 24px;
    background: linear-gradient(135deg, #0F172A 0%, #334155 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #111827; /* Fallback */
}

.vendre-content .section-desc {
    text-align: left;
    margin: 0 0 48px;
    font-size: 1.15rem;
    line-height: 1.7;
    color: #64748B;
    max-width: 90%;
}

.vendre-content .section-label {
    text-align: left;
}

/* Benefits List */
.benefits-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 48px;
}

.benefit-card {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 24px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    border: 1px solid #F1F5F9;
    transition: all 0.3s ease;
}

.benefit-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px -6px rgba(0, 0, 0, 0.1);
    border-color: #E2E8F0;
}

.benefit-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
    color: #2563EB;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.benefit-info h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1E293B;
    margin-bottom: 6px;
}

.benefit-info p {
    font-size: 0.95rem;
    color: #64748B;
    margin: 0;
    line-height: 1.5;
}

/* CTA */
.vendre-cta-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.vendre-cta-container .btn-primary {
    padding: 18px 40px;
    font-size: 1.1rem;
    box-shadow: 0 10px 25px -5px rgba(37, 99, 235, 0.4);
}

.vendre-cta-container .btn-primary:hover {
    box-shadow: 0 15px 30px -5px rgba(37, 99, 235, 0.5);
    transform: translateY(-2px);
}

.cta-note {
    font-size: 0.85rem;
    color: #64748B;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

.cta-note i {
    color: #10B981;
}

/* Visual Column */
.vendre-visual {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Visual Graphic Block (No Image) */
.visual-graphic-block {
    position: relative;
    width: 100%;
    height: 600px;
    background: linear-gradient(135deg, #F8FAFC 0%, #EFF6FF 100%);
    border-radius: 32px;
    border: 1px solid white;
    box-shadow: 
        0 20px 50px -10px rgba(15, 23, 42, 0.1),
        inset 0 0 0 1px rgba(255,255,255,0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 40px;
}

.premium-badge-large {
    width: 120px;
    height: 120px;
    background: linear-gradient(135deg, #1E88E5, #0EA5E9);
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 3.5rem;
    margin-bottom: 48px;
    box-shadow: 0 20px 40px -10px rgba(30, 136, 229, 0.4);
    position: relative;
    z-index: 2;
    transform: rotate(-5deg);
    transition: transform 0.4s ease;
}

.visual-graphic-block:hover .premium-badge-large {
    transform: rotate(0deg) scale(1.05);
}

.premium-features-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    max-width: 320px;
    position: relative;
    z-index: 2;
}

.premium-feature-item {
    background: white;
    padding: 16px 20px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(241, 245, 249, 0.8);
    transition: all 0.3s ease;
}

.premium-feature-item:hover {
    transform: translateX(10px);
    border-color: #E2E8F0;
    box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.1);
}

.pf-icon {
    width: 40px;
    height: 40px;
    background: #EFF6FF;
    border-radius: 10px;
    color: #2563EB;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.pf-text h4 {
    font-size: 0.95rem;
    color: #1E293B;
    font-weight: 700;
    margin-bottom: 2px;
}

.pf-text p {
    font-size: 0.8rem;
    color: #64748B;
    margin: 0;
}

.visual-decoration-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(37, 99, 235, 0.08) 0%, transparent 70%);
    border-radius: 50%;
    z-index: 1;
    pointer-events: none;
}

/* Responsive */
@media (max-width: 992px) {
    .section-vendre-premium {
        padding: 60px 0;
    }

    .vendre-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }
    
    .vendre-content .section-title,
    .vendre-content .section-desc,
    .vendre-content .section-label,
    .vendre-cta-container {
        text-align: center;
        align-items: center;
        max-width: 100%;
    }

    .vendre-content .section-desc {
        margin: 0 auto 40px;
    }
    
    .vendre-visual {
        order: 1; 
        margin-top: 20px;
    }
    
    .visual-graphic-block {
        height: 500px; /* Reduced height on mobile */
    }
    
    .vendre-content .section-title {
        font-size: 2rem;
    }
    
    .full-width-mobile {
        width: 100%;
        justify-content: center;
    }
}

/* Section Expertise Premium */
.section-expertise {
    padding: 100px 0;
    background-color: #F8FAFC;
    position: relative;
}

.section-header-center {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 64px;
}

.badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #EFF6FF;
    color: #2563EB;
    padding: 8px 16px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 20px;
    border: 1px solid #DBEAFE;
}

.badge-pill i {
    font-size: 0.8rem;
}

.section-expertise .section-title {
    font-size: 2.5rem;
    color: #1E293B;
    margin-bottom: 16px;
}

.section-expertise .section-desc {
    margin-bottom: 0;
    font-size: 1.1rem;
}

/* Expertise Grid */
.expertise-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-bottom: 64px;
}

.expertise-card {
    background: white;
    border-radius: 20px;
    padding: 32px;
    border: 1px solid rgba(226, 232, 240, 0.8);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    position: relative;
    overflow: hidden;
}

.expertise-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #1E88E5, #0EA5E9);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.expertise-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px -5px rgba(15, 23, 42, 0.1);
    border-color: rgba(30, 136, 229, 0.3);
}

.expertise-card:hover::before {
    opacity: 1;
}

.card-icon-wrapper {
    width: 56px;
    height: 56px;
    background: #F0F9FF;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0EA5E9;
    font-size: 1.5rem;
    transition: all 0.3s ease;
}

.expertise-card:hover .card-icon-wrapper {
    background: #0EA5E9;
    color: white;
    transform: rotate(-5deg) scale(1.1);
}

.card-content h4 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #0F172A;
    margin-bottom: 16px;
}

.expertise-points {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.expertise-points li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.95rem;
    color: #64748B;
    line-height: 1.5;
}

.expertise-points li i {
    color: #10B981; /* Green checkmark for confidence */
    font-size: 0.9rem;
    margin-top: 4px;
    flex-shrink: 0;
}

/* Info Pills at bottom */
.info-boxes-wrapper {
    display: flex;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}

.info-pill {
    background: white;
    padding: 12px 24px;
    border-radius: 50px;
    border: 1px solid #E2E8F0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: #475569;
    font-size: 0.95rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.03);
}

.info-pill i {
    color: #6366F1;
}

/* Responsive */
@media (max-width: 992px) {
    .expertise-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    
    .section-header-center {
        margin-bottom: 48px;
    }
    
    .section-expertise .section-title {
        font-size: 2rem;
    }
}

/* Section Garantie Premium */
.section-garantie-premium {
    padding: 120px 0;
    background-color: #ffffff;
    background-image: radial-gradient(circle at 50% 100%, #EFF6FF 0%, transparent 60%);
    position: relative;
}

.garantie-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-bottom: 64px;
}

.garantie-card {
    background: white;
    padding: 40px 32px;
    border-radius: 24px;
    text-align: center;
    border: 1px solid #F1F5F9;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.garantie-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px -5px rgba(0, 0, 0, 0.1);
    border-color: #E2E8F0;
}

/* Featured Card Style */
.featured-garantie {
    background: linear-gradient(135deg, #1E88E5, #0EA5E9);
    color: white;
    box-shadow: 0 10px 30px rgba(30, 136, 229, 0.25);
    border: none;
    transform: scale(1.05);
}

.featured-garantie:hover {
    transform: scale(1.05) translateY(-8px);
    box-shadow: 0 25px 50px rgba(30, 136, 229, 0.35);
}

.garantie-icon-wrapper {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #EFF6FF;
    color: #1E88E5;
    font-size: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    transition: all 0.3s ease;
}

.featured-garantie .garantie-icon-wrapper {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    backdrop-filter: blur(10px);
}

.garantie-card h3 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 16px;
    color: #0F172A;
}

.featured-garantie h3 {
    color: white;
}

.garantie-card p {
    font-size: 1rem;
    color: #64748B;
    line-height: 1.6;
    margin: 0;
}

.featured-garantie p {
    color: rgba(255, 255, 255, 0.9);
}

/* CTA Area */
.garantie-cta-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.garantie-note {
    font-size: 0.9rem;
    color: #64748B;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

.garantie-note i {
    color: #10B981;
}

/* Responsive */
@media (max-width: 992px) {
    .garantie-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    
    .featured-garantie {
        transform: scale(1);
    }
    
    .featured-garantie:hover {
        transform: translateY(-8px);
    }
}

/* Pricing Section */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    max-width: 1000px;
    margin: 0 auto 24px;
    align-items: center;
}

.pricing-card {
    background: white;
    border-radius: 20px;
    padding: 32px;
    border: 1px solid var(--border-medium);
    text-align: center;
    position: relative;
    transition: var(--transition);
}

.pricing-card:hover {
    border-color: var(--primary-blue);
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}

.pricing-card.featured {
    background: var(--primary-gradient);
    border: none;
    color: white;
    transform: scale(1.05);
    box-shadow: var(--shadow-blue);
    z-index: 10;
}

.pricing-card.featured:hover {
    transform: scale(1.05) translateY(-4px);
}

.pricing-card.featured h3,
.pricing-card.featured .price {
    color: white;
}

.badge-popular {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: #EFF6FF;
    color: var(--primary-blue);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    box-shadow: var(--shadow-sm);
}

.pricing-header h3 {
    font-size: 1.25rem;
    margin-bottom: 16px;
}

.pricing-header .price {
    font-size: 3rem;
    font-weight: 800;
    color: var(--text-main);
    margin-bottom: 32px;
    letter-spacing: -0.04em;
}

.pricing-features {
    text-align: left;
    margin-bottom: 32px;
}

.pricing-features li {
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.95rem;
}

.pricing-footer-text {
    text-align: center;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--primary-blue);
    margin-top: 40px;
    padding: 16px 24px;
    background: #EFF6FF;
    border: 1px solid #DBEAFE;
    border-radius: 12px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* Partner Section */
.partner-box {
    background: var(--bg-alt);
    border: 1.5px solid var(--border-medium);
    border-radius: 24px;
    padding: 64px;
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 48px;
    text-align: left;
}

.partner-logo {
    flex-shrink: 0;
    margin-bottom: 0;
}

.partner-logo img {
    height: 60px;
}

.animated-arrow {
    transition: transform 0.2s;
}

.btn:hover .animated-arrow {
    transform: translateX(4px);
}

/* Section Contact Premium */
.section-contact-premium {
    padding: 100px 0;
    background-color: #F8FAFC;
}

.contact-wrapper {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.contact-header {
    text-align: center;
}

.contact-header .section-title {
    margin-bottom: 16px;
    font-size: 2.5rem;
}

.contact-header .section-desc {
    margin: 0 auto;
    max-width: 600px;
}

.contact-card {
    background: white;
    padding: 48px;
    border-radius: 24px;
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.08);
    border: 1px solid #F1F5F9;
}

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

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group.full-width {
    grid-column: 1 / -1;
}

.form-group label {
    font-size: 0.9rem;
    font-weight: 600;
    color: #334155;
}

.form-group input,
.form-group select,
.form-group textarea {
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid #E2E8F0;
    background: #F8FAFC;
    font-size: 1rem;
    color: #1E293B;
    transition: all 0.2s ease;
    font-family: inherit;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #3B82F6;
    background: white;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #94A3B8;
}

.select-wrapper {
    position: relative;
}

.select-wrapper select {
    width: 100%;
    appearance: none;
    cursor: pointer;
}

.select-wrapper i {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #64748B;
    pointer-events: none;
    font-size: 0.85rem;
}

.form-footer {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: center;
}

.btn-block {
    width: 100%;
    justify-content: center;
    padding: 16px;
    font-size: 1.05rem;
}

.trust-signals {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 0.85rem;
    color: #64748B;
}

.trust-signals i {
    color: #10B981;
}

.trust-signals .dot {
    color: #CBD5E1;
}

/* Bloc d'information WhatsApp dans le formulaire de contact */
.whatsapp-info {
    margin-top: 32px;
    padding: 20px;
    background-color: rgba(14, 165, 233, 0.08); /* léger bleu pour rappeler les couleurs du site */
    border: 1px solid rgba(14, 165, 233, 0.16);
    border-radius: 12px;
    text-align: center;
}

.whatsapp-info .whatsapp-heading {
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--primary-blue);
    margin-bottom: 4px;
}

.whatsapp-info p {
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.whatsapp-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background-color: #25D366; /* Couleur officielle WhatsApp pour le bouton */
    color: #ffffff;
    border-radius: 50%;
    font-size: 1.5rem;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease;
}

.whatsapp-icon:hover {
    transform: scale(1.1);
}

/* Bouton/lien WhatsApp dans le formulaire de contact */

/* Success Message */
.success-message {
    text-align: center;
    padding: 40px 0;
    animation: fadeIn 0.5s ease;
}

.success-icon {
    width: 64px;
    height: 64px;
    background: #DCFCE7;
    color: #16A34A;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin: 0 auto 24px;
}

.success-message h3 {
    font-size: 1.5rem;
    color: #16A34A;
    margin-bottom: 12px;
}

.success-message p {
    color: #64748B;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Responsive */
@media (max-width: 768px) {
    .section-contact-premium {
        padding: 60px 0;
    }
    
    .contact-card {
        padding: 24px;
    }
    
    .form-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .trust-signals {
        flex-direction: column;
        gap: 8px;
    }
    
    .trust-signals .dot {
        display: none;
    }
}

/* Reviews */
.carousel-container {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    height: 220px;
}

.carousel-track-container {
    overflow: hidden;
    height: 100%;
}

.carousel-track {
    display: flex;
    height: 100%;
    transition: transform 0.5s ease-in-out;
}

.carousel-slide {
    min-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.review-card {
    background: white;
    padding: 40px;
    border-radius: 16px;
    box-shadow: var(--shadow-md);
    max-width: 600px;
    text-align: center;
    border: 1px solid var(--border-light);
}

.stars {
    color: #F59E0B;
    font-size: 1.25rem;
    margin-bottom: 16px;
    letter-spacing: 2px;
}

.review-text {
    font-size: 1.2rem;
    font-style: italic;
    color: var(--text-main);
    margin-bottom: 24px;
}

.review-author {
    font-weight: 700;
    color: var(--text-secondary);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: white;
    border: 1px solid var(--border-medium);
    color: var(--text-main);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: var(--transition);
}

.carousel-btn:hover {
    border-color: var(--primary-blue);
    color: var(--primary-blue);
}

.prev-btn { left: -60px; }
.next-btn { right: -60px; }

.carousel-nav {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 32px;
}

.carousel-indicator {
    border: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--border-medium);
    cursor: pointer;
    transition: var(--transition);
}

.carousel-indicator.current-indicator {
    background: var(--primary-blue);
    transform: scale(1.2);
}

/* Footer */
/* Style modernisé et modulaire pour permettre plusieurs colonnes */
.footer {
    background-color: #020b1b;
    color: #e1e5ee;
    /* Réduction de la taille du footer pour qu'il prenne moins de place */
    padding: 40px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* Contenu principal du footer : flex pour répartir les colonnes */
.footer-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 24px;
}

/* Colonnes génériques */
.footer-col {
    flex: 1 1 200px;
}

.footer-logo img {
    height: 50px;
    width: auto;
    /* Supprime l’inversion de couleur pour afficher le logo dans ses couleurs d’origine */
    filter: none;
    margin-bottom: 8px;
}

.footer-tagline {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 8px;
}

/* Navigation dans le footer */
.footer-col h4 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--primary-blue);
}

.footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-col ul li {
    margin-bottom: 8px;
}

.footer-col ul li a {
    color: inherit;
    text-decoration: none;
    opacity: 0.8;
    transition: opacity 0.2s;
}

.footer-col ul li a:hover {
    opacity: 1;
}

/* Section contact */
.footer-col p {
    margin: 4px 0;
}

.footer-col a {
    color: inherit;
    text-decoration: none;
}

.footer-bottom {
    text-align: center;
    margin-top: 20px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
}

/* Responsive footer : empile les colonnes sur petits écrans */
@media (max-width: 768px) {
    /* Réduction de la taille du footer sur mobile pour qu'il prenne moins de place */
    .footer {
        /* Footer plus discret en hauteur sur mobile */
        padding: 16px 0;
    }

    .footer-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .footer-col {
        margin-bottom: 12px;
    }

    .footer-logo img {
        height: 36px;
    }

    .footer-tagline {
        font-size: 0.75rem;
        margin-top: 2px;
    }

    .footer-bottom {
        margin-top: 6px;
        padding-top: 4px;
        font-size: 0.7rem;
    }
}

/* Responsive */
@media (max-width: 992px) {
    .benefits-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .expertise-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .pricing-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
    }
    
    .pricing-card.featured {
        transform: scale(1);
    }
    
    .pricing-card.featured:hover {
        transform: translateY(-4px);
    }
    
    .partner-box {
        flex-direction: column;
        padding: 40px;
        text-align: center;
        gap: 32px;
    }
    
    .partner-content h2, .partner-content p {
        text-align: center !important;
    }
}

@media (max-width: 768px) {
    /* Masque uniquement les liens du menu et le bouton principal en version mobile.
       Le bouton WhatsApp reste visible pour un accès rapide. */
    .nav-links,
    .header-actions .btn-primary {
        display: none;
    }

    /* Affiche l’icône WhatsApp dans l’en-tête en mode mobile et ajoute une marge à droite pour la séparer du burger */
    .header-actions .btn-whatsapp {
        display: flex;
        margin-right: 12px;
    }

    .hamburger {
        /* Afficher l’icône burger en mode responsive et conserver
           l’orientation en colonne définie plus haut */
        display: flex;
    }
    
    .hero h1 {
        font-size: 2.5rem;
    }

    /* Ajuste l'image de fond du héros sur mobile pour qu'elle soit moins zoomée
       en utilisant 'contain' afin de montrer l'ensemble de la scène (personnes et voitures) */
    .hero {
        /* Ajuste l'image de fond du héros sur mobile pour un cadrage plus équilibré.
           Nous utilisons "cover" afin de conserver une image pleine largeur sans bordures.
           La position verticale est légèrement déplacée vers le bas (30%) pour montrer
           davantage la voiture au lieu de se focaliser uniquement sur les personnes. */
        background-size: cover;
        background-position: center 30%;
    }
    
    .hero-buttons {
        flex-direction: column;
    }
    
    .hero-buttons .btn {
        width: 100%;
    }
    
    .reassurance-pill {
        flex-direction: column;
        background: transparent;
        border: none;
        padding: 0;
        gap: 8px;
    }
    
    .separator {
        display: none;
    }
    
    .garantie-container {
        grid-template-columns: 1fr;
    }
    
    .garantie-image {
        order: -1;
    }

/* Alignement du menu de navigation par rapport au logo
   Ajoute un petit décalage afin que le premier lien ne colle pas au logo. */
.nav-menu {
    /* Décale le menu par rapport au logo et au bloc d’actions pour éviter
       que les liens ne touchent ni le logo ni le bouton Estimer */
    margin-left: 32px;
    /* Ajoute une marge plus importante après le menu pour que le lien "Contact"
       ne touche pas le bouton "Estimer mon véhicule". */
    margin-right: 60px;
}
    
    .form-group-row {
        flex-direction: column;
        gap: 0;
    }
    
    .prev-btn, .next-btn {
        display: none;
    }
}

@media (max-width: 480px) {
    .benefits-grid, .expertise-grid {
        grid-template-columns: 1fr;
    }
    
    .hero h1 {
        font-size: 2rem;
    }
    
    .estimate-box {
        padding: 32px 24px;
    }
    
    .section-title {
        font-size: 1.8rem;
    }
}

/* ======================== Chat Widget Styles ======================== */
#chat-widget {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 10000;
}

#chat-toggle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--primary-blue);
    color: #fff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    transition: background-color 0.2s;
}

#chat-toggle:hover {
    /* Variation plus foncée du bouton pour l’effet hover */
    background-color: #17497b;
}

#chat-window {
    position: absolute;
    bottom: 60px;
    right: 0;
    width: 300px;
    height: 400px;
    background-color: #111827;
    color: #e1e5ee;
    border-radius: 8px;
    display: none;
    flex-direction: column;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

#chat-window.open {
    display: flex;
}

.chat-header {
    background-color: var(--primary-blue);
    color: #fff;
    padding: 12px;
    font-weight: 600;
    font-size: 1rem;
}

.chat-messages {
    flex: 1;
    padding: 12px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.chat-message {
    max-width: 80%;
    padding: 6px 10px;
    border-radius: 12px;
    font-size: 0.875rem;
    word-wrap: break-word;
}

.chat-message.user {
    align-self: flex-end;
    background-color: var(--primary-blue);
    color: #fff;
}

.chat-message.bot {
    align-self: flex-start;
    background-color: #1f2937;
    color: #e1e5ee;
}

.chat-input-area {
    display: flex;
    border-top: 1px solid #1f2937;
}

.chat-input-area input {
    flex: 1;
    background-color: #0e2238;
    border: none;
    color: #fff;
    padding: 10px;
    font-size: 0.875rem;
}

.chat-input-area input::placeholder {
    color: #6b7280;
}

.chat-input-area button {
    background: none;
    border: none;
    color: var(--primary-blue);
    padding: 10px;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ------------------------------------------------------------------
   Hamburger bar styling

   Le bouton « hamburger » contient trois éléments span qui forment
   les barres horizontales. Sans styles explicites, ces barres sont
   invisibles sur mobile.  Nous définissons leurs dimensions, leur
   couleur et leur espacement pour qu’elles soient visibles, et
   appliquons des transformations quand le menu est ouvert afin de
   créer une icône de fermeture (croix).
*/

.hamburger .bar {
    display: block;
    width: 100%;
    height: 3px;
    margin: 3px 0;
    /* Utilise une couleur claire pour assurer un contraste suffisant
       dans le menu hamburger.  La couleur blanche permet au burger
       d’être visible même sur un fond sombre comme la section héros. */
    background-color: #ffffff;
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.hamburger.active .bar:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
}

.hamburger.active .bar:nth-child(2) {
    opacity: 0;
}

.hamburger.active .bar:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
}