/* ======== VARIABLES ET STYLES GLOBAUX ======== */
:root {
    --bg-color: #111111;
    --primary-color: #FFD700; /* Or, inspiré du logo */
    --text-color: #f4f4f4;
    --dark-accent: #1f1f1f;
    --font-primary: 'Montserrat', sans-serif;
    --font-secondary: 'Roboto', sans-serif;
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-secondary);
    background-color: var(--bg-color);
    color: var(--text-color);
    line-height: 1.6;
}

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

h1, h2, h3 {
    font-family: var(--font-primary);
    font-weight: 700;
    color: var(--primary-color);
}

h2 {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 40px;
    text-transform: uppercase;
}

section {
    padding: 80px 0;
}

/* ======== HEADER ======== */
header {
    background-color: rgba(17, 17, 17, 0.8);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid #222;
    padding: 15px 0;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
}

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

/* REMPLACEZ L'ANCIEN .logo-link PAR CELUI-CI */
.logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: transparent; /* On rend la couleur de base transparente */
    font-family: var(--font-primary);
    font-size: 1.5rem;  /* On augmente légèrement la taille pour plus d'impact */
    font-weight: 700;
    
    /* Le dégradé doré métallique */
    background: linear-gradient(145deg, #FFF8C7, #F3D679, #B88A34, #A9713C, #F3D679);
    -webkit-background-clip: text;
    background-clip: text;
    
    /* Un léger relief pour un effet gravé */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

/* ... votre règle .logo-link est ici ... */
.logo-link {
    /* ... code existant ... */
    transition: all 0.4s ease; /* Ajoutons une transition pour la fluidité */
}

/* Style pour le menu déroulant */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown .dropbtn i {
    font-size: 0.7rem;
    margin-left: 5px;
    transition: transform 0.3s ease;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #1a1a1a;
    min-width: 180px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    border-radius: 5px;
    padding: 10px 0;
    margin-top: 10px; /* Espace entre le bouton et le menu */
}

.dropdown-content a {
    color: var(--text-color);
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
    font-size: 0.85rem !important; /* On force une taille plus petite */
    text-transform: none; /* On remet le texte en normal */
    letter-spacing: 0.5px;
}

.dropdown-content a:hover {
    background-color: var(--primary-color);
    color: #000;
}

/* Affichage du menu au survol */
.dropdown:hover .dropdown-content {
    display: block;
}

/* On tourne la petite flèche */
.dropdown:hover .dropbtn i {
    transform: rotate(180deg);
}

/* 1. L'EFFET AU SURVOL (NOUVEAU) */
.logo-link:hover {
    /* On rend le dégradé plus lumineux et contrasté */
    background: linear-gradient(145deg, #ffffff, #ffe499, #d4a75a, #c08752, #ffe499);
    -webkit-background-clip: text;
    background-clip: text;

    /* L'ombre dorée qui s'anime */
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.5), 1px 1px 2px rgba(0, 0, 0, 0.3);
    
    /* On ajoute une animation de pulsation à l'ombre dorée */
    animation: pulse-gold 1.5s infinite;
}

/* 2. L'ANIMATION DE PULSATION (NOUVEAU) */
@keyframes pulse-gold {
    0% {
        text-shadow: 0 0 15px rgba(255, 215, 0, 0.5), 1px 1px 2px rgba(0, 0, 0, 0.3);
    }
    50% {
        text-shadow: 0 0 25px rgba(255, 215, 0, 0.8), 1px 1px 2px rgba(0, 0, 0, 0.3);
    }
    100% {
        text-shadow: 0 0 15px rgba(255, 215, 0, 0.5), 1px 1px 2px rgba(0, 0, 0, 0.3);
    }
}

.logo {
    height: 50px;
    margin-right: 15px;
}

nav ul {
    list-style: none;
    display: flex;
    gap: 20px;
}

/* NOUVEAU CODE À COLLER */
nav a {
    color: var(--text-color);
    text-decoration: none;
    font-weight: 500;
    font-family: var(--font-primary); /* On utilise la police des titres pour un look plus affirmé */
    text-transform: uppercase;        /* Texte en majuscules pour plus d'élégance */
    font-size: 0.9rem;  /* On réduit légèrement la taille de la police */
    letter-spacing: 0.5px; /* On resserre un peu les lettres */
    padding: 10px 0;                  /* On ajoute de l'espace pour la ligne du dessous */
    position: relative;               /* Indispensable pour positionner la ligne */
    transition: color 0.4s ease;
}

/* La ligne dorée qui sera animée */
nav a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--primary-color);
    
    /* L'astuce : la ligne est invisible au départ (écrasée sur elle-même) */
    transform: scaleX(0);
    transform-origin: center; /* L'animation partira du centre */
    
    /* La transition fluide pour l'animation */
    transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}

/* L'état au survol */
nav a:hover {
    color: var(--primary-color); /* Le texte devient doré */
}

nav a:hover::after {
    transform: scaleX(1); /* La ligne s'étire jusqu'à sa taille complète */
}

/* ======== SECTION ACCUEIL (HERO) ======== */
#accueil {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 100vh;
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('background-accueil.jpg') no-repeat center center/cover;
}

.hero-content h1 {
    font-size: 3.5rem;
    margin-bottom: 20px;
    text-shadow: 2px 2px 10px rgba(0,0,0,0.5);
}

.hero-content p {
    font-size: 1.2rem;
    max-width: 600px;
    margin: 0 auto 30px auto;
}

.cta-button {
    display: inline-block;
    background-color: var(--primary-color);
    color: #000;
    padding: 18px 30px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 700;
    font-family: var(--font-primary);
    transition: transform 0.3s ease, background-color 0.3s ease;
    border: none;
    cursor: pointer;
}

.cta-button:hover {
    transform: translateY(-3px);
    background-color: #fff;
}

/* ======== SECTION SERVICES ======== */
.services-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    margin-top: 50px;
}

.service-card {
    background-color: var(--dark-accent);
    padding: 40px 30px;
    border-radius: 10px;
    border: 1px solid #333;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

.service-card.featured {
    border: 2px solid var(--primary-color);
    transform: scale(1.05);
}

.service-card h3 {
    font-size: 1.8rem;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.service-card .price {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 25px;
}

.service-card ul {
    list-style: none;
    margin-bottom: 30px;
    flex-grow: 1;
}

.service-card ul li {
    margin-bottom: 12px;
}

.cta-button-card {
    display: block;
    text-align: center;
    background-color: transparent;
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
    padding: 12px 25px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 700;
    transition: background-color 0.3s, color 0.3s;
}

.cta-button-card:hover {
    background-color: var(--primary-color);
    color: var(--bg-color);
}

/* ======== SECTION ÉQUIPEMENT ======== */
#equipement {
    background-color: var(--dark-accent);
}

.equipement-subtitle {
    max-width: 700px;
    margin: -20px auto 60px auto;
    text-align: center;
    font-size: 1.1rem;
    color: #aaa;
}

.equipement-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
}

.equipement-card {
    background-color: #1a1a1a;
    border: 1px solid #333;
    border-radius: 10px;
    padding: 40px 30px;
    text-align: center;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.equipement-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

.equipement-card i {
    font-size: 3rem;
    color: var(--primary-color);
    margin-bottom: 25px;
}

.equipement-card h3 {
    font-size: 1.5rem;
    margin-bottom: 15px;
}

.equipement-card p {
    color: #aaa;
    line-height: 1.7;
}


/* ======== SECTION ZONE D'INTERVENTION ======== */
#zone {
    background-color: var(--bg-color);
}

.zone-info-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 60px;
}

.info-box {
    background-color: #1a1a1a;
    border: 1px solid #333;
    border-radius: 10px;
    padding: 40px 30px;
    text-align: center;
}

.info-box i {
    font-size: 3rem;
    color: var(--primary-color);
    margin-bottom: 25px;
}

.info-box h3 {
    font-size: 1.5rem;
    margin-bottom: 15px;
}

.info-box p {
    color: #aaa;
    line-height: 1.7;
}

/* NOUVEAU CODE AVEC L'EFFET */
/* ======== SECTION ZONE D'INTERVENTION ======== */
#zone {
    background-color: var(--bg-color);
}

.zone-info-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 60px;
}

.info-box {
    background-color: #1a1a1a;
    border: 1px solid #333;
    border-radius: 10px;
    padding: 40px 30px;
    text-align: center;
    /* On ajoute la transition pour que l'animation soit fluide */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* La nouvelle règle pour l'effet au survol */
.info-box:hover {
    transform: translateY(-10px); /* Soulève la carte */
    box-shadow: 0 10px 20px rgba(0,0,0,0.2); /* Ajoute une ombre en dessous */
}

.info-box i {
    font-size: 3rem;
    color: var(--primary-color);
    margin-bottom: 25px;
}

.info-box h3 {
    font-size: 1.5rem;
    margin-bottom: 15px;
}

.info-box p {
    color: #aaa;
    line-height: 1.7;
}

/* ======== SECTION FAQ ======== */
#faq {
    background-color: var(--dark-accent);
}

.faq-container {
    max-width: 800px;
    margin: 60px auto 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.faq-item {
    background-color: #1a1a1a;
    border: 1px solid #333;
    border-radius: 10px;
    overflow: hidden; /* Important pour l'animation */
    /* On ajoute la transition pour que l'animation soit fluide */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* On ajoute la règle pour l'effet au survol */
.faq-item:hover {
    transform: translateY(-5px); /* On soulève un peu moins pour rester subtil */
    box-shadow: 0 8px 15px rgba(0,0,0,0.2);
}

.faq-question {
    width: 100%;
    background: none;
    border: none;
    padding: 25px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-size: 1.2rem;
    font-family: var(--font-primary);
    color: var(--text-color);
    text-align: left;
}

.faq-question i {
    color: var(--primary-color);
    transition: transform 0.4s ease;
}

.faq-answer {
    /* La réponse est cachée par défaut */
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.25, 0.8, 0.25, 1), padding 0.5s ease;
}

.faq-answer p {
    padding: 0 30px 25px 30px;
    color: #aaa;
    line-height: 1.7;
    margin: 0;
}

/* Style quand une question est active/ouverte */
.faq-item.active .faq-question {
    color: var(--primary-color);
}
.faq-item.active .faq-question i {
    transform: rotate(180deg); /* La flèche se tourne */
}
.faq-item.active .faq-answer {
    max-height: 300px; /* On donne une hauteur max pour que la réponse se déploie */
}

/* ======== SECTION AVIS CLIENTS (VERSION CARTES STATIQUES) ======== */
#avis {
    background-color: var(--dark-accent);
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); /* Grille responsive */
    gap: 30px;
    margin-top: 60px;
}

.testimonial-card {
    background-color: #1a1a1a;
    border: 1px solid #333;
    border-radius: 10px;
    padding: 40px 30px;
    text-align: center;
    display: flex;
    flex-direction: column;
    /* On ajoute la transition pour l'effet de lévitation */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* L'effet de lévitation au survol */
.testimonial-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

.testimonial-card > i { /* Icône de guillemet */
    font-size: 2.5rem;
    color: var(--primary-color);
    opacity: 0.5;
    margin-bottom: 20px;
}

.testimonial-text {
    font-style: italic;
    color: #ccc;
    line-height: 1.7;
    margin-bottom: 25px;
    flex-grow: 1; /* Pousse les étoiles et le nom vers le bas */
}

.stars {
    color: var(--primary-color);
    font-size: 1rem;
    margin-bottom: 15px;
}

.client-name {
    font-weight: 700;
    color: var(--text-color);
    font-size: 0.9rem;
}


/* ======== SECTION CONTACT (VERSION LUXE) ======== */
/* ... la suite de votre css ... */

/* ======== SECTION CONTACT (VERSION CARTES VERTICALES) ======== */
#contact {
    background-color: var(--dark-accent);
}

#contact h2, #contact p {
    text-align: center;
}

#contact p {
    max-width: 600px;
    margin: -20px auto 60px auto;
    color: #aaa;
}

/* Le conteneur principal du formulaire qui empile tout verticalement */
.luxury-form {
    max-width: 700px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 40px; /* Espace vertical entre chaque carte et le bouton */
    margin-top: 20px;
    margin-bottom: 60px; /* <<< AJOUTEZ CETTE LIGNE POUR CRÉER L'ESPACE EN DESSOUS */
}

/* On supprime la règle ".form-grid" qui n'existe plus */

/* Chaque champ est une "carte" */
.form-group {
    background-color: #1a1a1a;
    border: 1px solid #333;
    border-radius: 10px;
    padding: 25px 30px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.form-group:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

.form-group label {
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--primary-color);
    letter-spacing: 1.5px;
    display: block;
    margin-bottom: 15px;
}

.form-group input,
.form-group textarea {
    width: 100%;
    background: transparent;
    border: none;
    padding: 5px;
    font-size: 1rem;
    color: var(--text-color);
    outline: none;
}

.form-group textarea {
    resize: vertical;
    min-height: 80px;
}

.form-group textarea::placeholder {
    color: #555;
    font-style: italic;
}

.luxury-form button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

/* ======== SECTION AMBASSADEUR ======== */
#ambassadeur {
    background-color: var(--dark-accent);
}

/* ... après la règle #ambassadeur ... */

/* NOUVEAU STYLE POUR LE SLOGAN */
.ambassadeur-slogan {
    max-width: 700px; /* On augmente un peu la largeur */
    margin: -20px auto 60px auto;
    font-size: 1.2rem; /* Police plus grande */
    font-style: italic; /* Style citation */
    line-height: 1.8;
    color: #ccc; /* Texte légèrement plus clair */
    position: relative; /* Indispensable pour les lignes décoratives */
    padding: 20px 0; /* Ajoute de l'espace pour les lignes */
}

/* Ligne décorative au-dessus */
.ambassadeur-slogan::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px; /* Longueur de la ligne */
    height: 1px; /* Épaisseur de la ligne */
    background-color: var(--primary-color);
    opacity: 0.5; /* Ligne subtile */
}

/* Ligne décorative en dessous */
.ambassadeur-slogan::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 1px;
    background-color: var(--primary-color);
    opacity: 0.5;
}

.ambassadeur-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 60px;
}

.step-card {
    border: 1px solid #333;
    border-radius: 10px;
    padding: 40px 30px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.step-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

.step-card i {
    font-size: 3rem;
    color: var(--primary-color);
    margin-bottom: 25px;
}

.step-card h3 {
    font-size: 1.5rem;
    margin-bottom: 15px;
}

.step-card p {
    color: #aaa;
    line-height: 1.7;
}

/* ======== SECTION RÉSEAUX SOCIAUX (VERSION LUXE) ======== */
#reseaux {
    /* On retire la couleur de fond pour que la section soit transparente */
    padding: 100px 0;
    text-align: center;
}

#reseaux h2 {
    letter-spacing: 1px;
}

#reseaux p {
    max-width: 600px;
    margin: -20px auto 60px auto;
    font-size: 1.1rem;
    color: #aaa;
}

.social-card-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    flex-wrap: wrap;
}

.social-card {
    background-color: #1a1a1a;
    width: 180px;
    height: 180px;
    border-radius: 10px;
    border: 2px solid #333;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--primary-color);
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: pointer;
    font-family: inherit;
}

.social-card i {
    font-size: 3.5rem;
    margin-bottom: 15px;
}

.social-card span {
    font-family: var(--font-primary);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 0.9rem;
}

.social-card:hover {
    transform: translateY(-10px);
    background-color: var(--primary-color);
    color: #000;
    border-color: var(--primary-color);
    box-shadow: 0 15px 30px rgba(255, 215, 0, 0.2);
}

/* ======== EFFETS SPÉCIAUX ======== */

/* Effet curseur spotlight */
.cursor-spotlight {
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.15) 0%, rgba(255, 215, 0, 0.0) 60%);
    pointer-events: none;
    transform: translate(-50%, -50%);
    transition: transform 0.1s ease-out, width 0.3s ease, height 0.3s ease;
    z-index: 9999;
}

body a:hover ~ .cursor-spotlight,
body button:hover ~ .cursor-spotlight {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.25) 0%, rgba(255, 215, 0, 0.0) 50%);
}

/* ======== RESPONSIVE DESIGN (VERSION COMPLÈTE) ======== */
@media (max-width: 768px) {
    
    /* --- Styles Généraux --- */
    h1 {
        font-size: 2.5rem; /* Titre principal plus petit */
    }
    h2 {
        font-size: 2rem; /* Titres de section plus petits */
    }
    section {
        padding: 60px 0; /* On réduit un peu l'espace entre les sections */
    }

    /* --- Header (Menu) --- */
    header .container {
        /* On garde flex pour aligner le logo et le hamburger */
        justify-content: space-between; /* Un à gauche, l'autre à droite */
        align-items: center;
        flex-direction: row; /* On s'assure qu'ils sont sur la même ligne */
    }
    nav ul {
        flex-wrap: wrap; /* Permet aux liens de passer à la ligne si besoin */
        justify-content: center;
        gap: 15px 20px; /* Espace vertical et horizontal entre les liens */
            margin: 0;  /* <<< AJOUTEZ CETTE LIGNE */
    padding: 0; /* <<< AJOUTEZ CETTE LIGNE */
    }

    /* --- Cartes de services et de zone --- */
    .service-card.featured {
        transform: scale(1); /* On annule le zoom sur la carte du milieu */
    }

/*
=====================================================
   MENU HAMBURGER POUR LA VERSION MOBILE
=====================================================
*/

/* Par défaut sur ordinateur, le hamburger est caché */
.hamburger-menu {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    z-index: 1005; /* Pour être au-dessus de tout */
}

.hamburger-menu .bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    background-color: var(--text-color);
    transition: all 0.3s ease-in-out;
}

/* On commence à modifier pour les écrans de moins de 768px */
@media (max-width: 768px) {
    /* On cache le menu normal */
    .nav-links {
        position: fixed;
        top: 0;
        left: 100%; /* Caché sur la droite */
        width: 100%;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.95);
        backdrop-filter: blur(10px);
        display: flex;
        justify-content: center;
        align-items: center;
        transition: left 0.5s cubic-bezier(0.77, 0, 0.175, 1);
        z-index: 1004;
    }

    /* Quand le menu est actif, il arrive depuis la gauche */
    .nav-links.nav-active {
        left: 0;
    }

    .nav-links ul {
        flex-direction: column; /* Les liens sont les uns sous les autres */
        gap: 30px;
        list-style: none;
    }

    .nav-links a {
        font-size: 1.5rem; /* Liens plus gros pour être cliquables */
    }

    /* On affiche le bouton hamburger */
    .hamburger-menu {
        display: block;
    }
    
    /* Animation du bouton hamburger en croix (X) */
    .hamburger-menu.active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }
    .hamburger-menu.active .bar:nth-child(2) {
        opacity: 0;
    }
    .hamburger-menu.active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }
}

 /* NOUVEAU CODE */
    .form-grid {
    display: flex; /* On passe en flexbox pour plus de simplicité */
    flex-direction: column; /* On empile les éléments verticalement */
    gap: 30px; /* Espace vertical entre les cartes "Nom" et "Email" */
}
    .form-group {
        margin-bottom: 40px; /* On ajoute de l'espace vertical entre les champs empilés */
    }

    /* --- Titre de l'entreprise dans le header --- */
    .logo-link {
        font-size: 1.3rem; /* On réduit un peu la taille pour les petits écrans */
    }
}

/* ======== EFFET FLOCONS DE NEIGE ======== */
.snowflake {
    color: #fff;
    font-size: 1.5rem;
    font-family: Arial, sans-serif;
    text-shadow: 0 0 5px #000;
    position: fixed;
    top: -10%;
    z-index: 9998; /* Juste en dessous du curseur mais au-dessus de tout le reste */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: default;
    pointer-events: none; /* TRÈS IMPORTANT : pour ne pas bloquer les clics */

    -webkit-animation: fall linear infinite;
    animation: fall linear infinite;
}

/* Animation de la chute */
@keyframes fall {
    0% { transform: translateY(0px); }
    100% { transform: translateY(105vh); }
}

/*
=====================================================
   BONNET DE NOËL SUR LE LOGO (VERSION JOLIE)
=====================================================
*/
.logo-link {
    position: relative;
}

.logo-link::before {
    content: '';
    position: absolute;
    background-image: url('chapeau-noel-transparent.png');
    background-size: contain;
    background-repeat: no-repeat;
    width: 55px;
    height: 55px;
    top: -20px;
    left: 10px;
    transform: rotate(15deg);
    z-index: 1002;
}

/*
=====================================================
   OPTION 2: CHUTE DE NEIGE CSS (FIABLE)
=====================================================
*/

/* On crée 3 couches de neige avec des ombres pour un effet de profondeur */
@keyframes snow {
    0% {background-position: 0 0;}
    100% {background-position: 0 100vh;}
}

/* Couche de fond (flocons lents et petits) */
body::before {
    content: '';
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-image:
        radial-gradient(4px 4px at 10% 10%, white, transparent),
        radial-gradient(6px 6px at 50% 30%, white, transparent),
        radial-gradient(3px 3px at 80% 20%, white, transparent);
    background-size: 100vw 100vh;
    z-index: 9997;
    pointer-events: none;
    animation: snow 15s linear infinite;
    opacity: 0.3;
}


/*
=====================================================
   DÉCORATION DE NOËL 2 : LUEUR SUR LES ICÔNES
=====================================================
*/

/* On applique l'animation aux icônes des cartes */
.service-card i,
.info-box i,
.step-card i,
.testimonial-card > i {
    animation: pulse-icon 2.5s infinite ease-in-out;
}

@keyframes pulse-icon {
    0%, 100% {
        transform: scale(1);
        text-shadow: 0 0 5px rgba(255, 215, 0, 0.4);
    }
    50% {
        transform: scale(1.05);
        text-shadow: 0 0 15px rgba(255, 215, 0, 0.8);
    }
}

/*
=====================================================
   DÉCORATION DE NOËL 7 : EFFET GIVRE
=====================================================
*/

/* On prépare la section d'accueil pour y superposer l'effet */
#accueil {
    position: relative; /* Indispensable pour positionner le givre */
    overflow: hidden;   /* Empêche les débordements */
}

/* On crée la couche de givre avec un pseudo-élément */
#accueil::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* Un fond blanc semi-transparent avec un filtre de flou pour l'effet givré */
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    
    z-index: 1; /* Pour être au-dessus de l'image de fond mais sous le texte */
    
    /* L'animation qui fait disparaître le givre */
    animation: melt-frost 2.5s ease-out 0.5s forwards;
}

/* Le contenu textuel doit être au-dessus du givre */
#accueil .hero-content {
    position: relative;
    z-index: 2;
}

@keyframes melt-frost {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        /* On retire les filtres pour ne pas impacter les performances */
        backdrop-filter: blur(0);
        -webkit-backdrop-filter: blur(0);
    }
}

/*
=====================================================
   DÉCORATION DE NOËL 8 : CURSEUR FLOCON (VERSION TEXTE)
=====================================================
*/
@font-face {
  font-family: 'SnowflakeCursor';
  src: url(data:font/woff;base64,d09GRgABAAAAAAUEAAsAAAAAB2AAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsUP6V09TLzIAAAE8AAAARAAAAFY8k1HcY21hcAAAAXAAAABMAAAAUiJ5YW5nbHlfZgAAAiQAAAFGAAABpLpVDhFoZWFkAAADjAAAACsAAAA2Bq+oF2hoZWEAAADsAAAAIAAAACQGHgOcaG10eAAAA+AAAAAQAAAAEgwLADRsb2NhAAAD8AAAAAwAAAAMAEgA9m1heHAAAAQAAAAAHwAAACABJAC0bmFtZQAABBAAAAFdAAACiC363w1wb3N0AAAFpAAAACAAAAAgAAMAAXjaY2BkYGAAYs29q77x/DZfGbiZgBFgAAsDEF8GICMjA4MLgALpDBgAYmACAwAATwQIeNpjYGRgYFb4b8DAwMzAABTMiY2DKAUy8wYmCgAuMwHZeNpjYGBgZoBgGQZGBhDwAfMYwXwWBg0gZgBhGgM+AwAApwAF//8AAXjaY2BkYGBgA2IZhBgAudYxXH6+AEnzAwMvyA0A8XUGAxM2AGVnBhCBYWf/3PA/839gYGBiYGVgZuBkAAMQgwlIMzIygAFLwGb8/w/9/w/n/0/xfwn/N/y/wn/B/4n/V/9f8X8x/yX/x/5f+3/9/0X/j/4f4v9l/mP8p/hP8Z/kf+3/z/+V/7f+P/1//P9F/uP+x/lP9p/kP9p/kv+l/1f9X/S/6X/Z/6n/d/9v/Z/6v/h/4v/b/9v/Z/3v/Z/wf+D/zf+L/0f+z/wf+7/tf/P/h/5P/V/2f9L/tf/3/j/8//j/+v+D/3f+b/4/8f/X/xv8//h/83/X/5P/b/y//j/4/+H/hf/X/R/+P/C/4v/X/5//f/8/8v/Z/2v+v/0/+3/+/+n/1/9v/N/7//D/y//j/l/+3/L/5v/X/V/+v/H/9v/z/6/+n/+/7X/Z/4//B/8P/B/zP+H/rf/H/G/5H/J/2v9X/J/2v+l/7f+b/5/wDAPL5FhJ42mNgYGBmgGAZBkYGEPAB8xjBfBYGDSDmgGEaAyYAAA6wAEd42mNgZk5mnMDAysDA1Ml0hoGBoR9CM75mMGLkAIoysDIzYAUBaa4pDA+B4RmQAwG+IQMxpAAAAAAASgBIAFoAfgCYAOAA9gEyAagB0AHmAfgCAgAAAAAB//8AAXjaY2BkYGDgAWIxIGZiYmVCL4NgFiMDBKMwAweACEAwAwEAZnwHSAAAeNpjYGBgYB9kEGcACQYgZgBkBwsDCAmYIP5/h/8/UzC4A8Q4gFgHiLUA6WwEIgAAeNptkcsKgzAQRO/yDtY0WjR8B8jOZXrG6V7Q0oIgJkL/va1d3Hlz370lC1o45s5v9nLhLgM0eXfL03rQW0r+65z/TFBj3rC2nJt3d7899i5c82tJ7t6d/361e6jMhYdY514FwT1N/3Qk2P8W8K5Y5j3y+v24xV1O+5rX/2jN7/B4Xf5/W+D7B4B4B4B3/P/v/F9T3sN5B/H+Q8gPqD4h8qfKHyP8D9Q/38J9wEA3nN+9wAAAAB42m2LQQrAIAwA91/0o+C5s0sIVigkKSSUChX9/1YtXJicnWRLFhGk+Qo1yE+7y4hL3SXVfl7L1l1yR8F0+fB44fR5K99/9E5O/3wQ+E34w/g1eI94fPge8lPxM/Gz8XfwZ/LP8D/wv/P39i8wYhAIAAA==) format('woff');
}

body {
  /* On applique la police qui contient le flocon comme curseur */
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" style="font-size:32px;fill:white;"><text x="0" y="32" style="font-family: SnowflakeCursor;">❄</text></svg>') 16 16, auto;
}

/* On s'assure que les liens et boutons ont bien un curseur "main" */
a, button, .faq-question {
    cursor: pointer !important;
}


/* =========================================
   NOUVEAU STYLE DES TARIFS (Citadine/Berline/SUV)
   ========================================= */

/* Conteneur des prix */
.price-grid {
    width: 100%;
    background-color: rgba(255, 255, 255, 0.03); /* Fond très léger pour séparer */
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Chaque ligne de prix */
.price-row {
    display: flex;
    justify-content: space-between; /* Écarte le nom et le prix */
    align-items: center;
    margin-bottom: 8px;
    padding-bottom: 5px;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.1); /* Petite ligne pointillée */
}

.price-row:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

/* Type de voiture (Citadine, etc.) */
.car-type {
    font-size: 0.9rem;
    color: #ccc;
    font-family: var(--font-secondary);
}

/* Le montant (Prix) */
.amount {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary-color); /* Couleur Or */
    font-family: var(--font-primary);
}

/* Ajustement pour la carte "Featured" (celle du milieu) */
.service-card.featured .price-grid {
    background-color: rgba(212, 175, 55, 0.05); /* Fond légèrement doré */
    border-color: rgba(212, 175, 55, 0.2);
}

/* =========================================
   STYLES CORRECTIFS POUR LES SERVICES "PROPRES"
   ========================================= */

/* Ajustement global de la carte */
.service-card {
    display: flex;
    flex-direction: column; /* Empile les éléments proprement */
    justify-content: space-between;
    height: 100%; /* Toutes les cartes ont la même hauteur */
    padding: 30px 20px; /* Un peu moins de padding sur les côtés */
}

.card-header h3 {
    margin-bottom: 20px;
    justify-content: center;
}

/* LE BLOC PRIX (Cadre gris foncé) */
.pricing-block {
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 25px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.price-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
    font-size: 0.9rem;
    color: #ccc;
}

.price-item:last-child {
    border-bottom: none;
}

.price-item .amount {
    color: var(--primary-color);
    font-weight: 700;
    font-size: 1.1rem;
}

/* LA LISTE DES SERVICES (Alignée à gauche) */
.service-list {
    text-align: left; /* IMPORTANT : Aligne le texte à gauche */
    margin-bottom: 30px;
    padding-left: 10px;
    flex-grow: 1; /* Pousse le bouton vers le bas */
}

.service-list li {
    margin-bottom: 10px;
    font-size: 0.9rem;
    color: #ddd;
    display: flex;
    align-items: flex-start; /* Aligne l'icône avec la première ligne de texte */
    gap: 10px;
}

/* L'icône coche dorée */
.service-list li i {
    color: var(--primary-color);
    margin-top: 4px; /* Petit ajustement vertical */
    font-size: 0.8rem;
}

/* Lignes "Formule incluse" en gras */
.service-list li.highlight {
    color: #fff;
    margin-bottom: 15px;
    border-bottom: 1px solid rgba(212, 175, 55, 0.3);
    padding-bottom: 10px;
}

/* Spécifique pour la carte mise en avant (Complète) */
.service-card.featured .pricing-block {
    background-color: rgba(212, 175, 55, 0.1); /* Fond doré très léger */
    border-color: rgba(212, 175, 55, 0.3);
}

/* BARRE DE CONFIANCE */
.trust-bar {
    background-color: var(--primary-color);
    padding: 30px 0;
    color: #000; /* Texte noir sur fond or */
}

.trust-grid {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 20px;
    text-align: center;
}

.trust-item i {
    font-size: 2rem;
    margin-bottom: 10px;
    color: #000; /* Icône noire */
}

.trust-item h4 {
    color: #000;
    font-size: 1.1rem;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.trust-item p {
    font-size: 0.9rem;
    font-weight: 500;
}

/* BOUTON APPEL FLOTTANT (Visible partout pour tester) */
.mobile-call-btn {
    display: flex; /* AVANT c'était 'none'. Maintenant 'flex' pour le voir partout */
    position: fixed;
    bottom: 30px;    /* Un peu plus haut du bord */
    right: 30px;     /* Un peu plus loin du bord */
    background-color: var(--primary-color);
    color: #000;
    padding: 15px 30px;
    border-radius: 50px;
    text-decoration: none; /* Enlève le soulignement */
    font-weight: 700;
    font-family: var(--font-primary);
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.6);
    
    /* TRÈS IMPORTANT : Doit être supérieur à la neige (9998) et au curseur (9999) */
    z-index: 10002; 
    
    align-items: center;
    gap: 10px;
    animation: pulse-btn 2s infinite;
    transition: transform 0.3s ease;
}

.mobile-call-btn:hover {
    transform: scale(1.1);
    background-color: #fff; /* Devient blanc au survol */
    color: var(--primary-color);
}

/* Animation de pulsation */
@keyframes pulse-btn {
    0% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.7); }
    70% { box-shadow: 0 0 0 20px rgba(212, 175, 55, 0); }
    100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0); }
}

/* Si vous voulez le cacher sur PC plus tard, décommentez ces lignes ci-dessous : */
/*
@media (min-width: 769px) {
    .mobile-call-btn {
        display: none;
    }
}
*/

/* =========================================
   STYLE CARTE CADEAU (Centrage)
   ========================================= */

/* On centre la carte horizontalement */
.gift-card-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

/* On limite la largeur pour qu'elle ressemble aux autres cartes */
.gift-style {
    max-width: 380px; 
    width: 100%;
    /* Un petit halo doré supplémentaire pour le côté festif */
    box-shadow: 0 0 40px rgba(212, 175, 55, 0.15);
}

/* Animation pulsation sur l'icône cadeau */
.gift-style h3 i {
    animation: pulse-gift 2s infinite;
}

@keyframes pulse-gift {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); color: #fff; }
    100% { transform: scale(1); }
}