/* --- Réinitialisation basique --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body, html {
    height: 100%;
    font-family: 'Inter', sans-serif;
    color: #ffffff;
    scroll-behavior: smooth;
}

/* --- Vidéo d'arrière-plan et Filtre --- */
.video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: -1;
}

#bg-video {
    width: 100%; /* */
    height: 100%; /*[cite: 2] */
    object-fit: cover; /* Permet à la vidéo de couvrir tout l'écran sans se déformer[cite: 2] */
    
    /* 🛠️ CORRECTIF : On ancre l'image en bas à droite */
    object-position: bottom right; 
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Modifie la dernière valeur (0.5) pour rendre le filtre plus ou moins sombre */
    background: rgba(0, 0, 0, 0.5); 
}

/* --- Navigation (Header) --- */
.navbar {
    position: absolute;
    top: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px 50px;
    z-index: 10;
}

.logo img {
    height: 45px; /* Ajuste la taille de ton logo ici */ 
    display: block;
    /* Si l'image de ton logo est noire, tu peux utiliser 'filter: invert(1);' pour la passer en blanc */
}

/* Style de la pilule de navigation centrale */
.nav-links {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(12px); /* Effet verre dépoli */
    padding: 10px 25px;
    border-radius: 50px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.nav-links ul {
    list-style: none;
    display: flex;
    gap: 30px;
}

.nav-links a {
    color: #ffffff;
    text-decoration: none;
    font-size: 15px;
    font-weight: 400;
    transition: color 0.3s;
}

.nav-links a:hover {
    color: #c0c0c0;
}

/* --- Boutons --- */
.btn {
    text-decoration: none;
    border-radius: 50px;
    font-weight: 500;
    transition: transform 0.2s ease, opacity 0.2s ease;
    display: inline-flex;
    box-sizing: border-box;
}

.btn:hover {
    transform: scale(1.05);
    opacity: 0.9;
}

.btn-download {
    background-color: #a68867; /* Le vert clair du bouton en haut à droite */
    color: white;
    padding: 12px 24px;
    font-size: 15px;
}

.btn-primary {
    background-color: #ffffff;
    color: #1a1a1a;
    padding: 18px 36px;
    font-size: 16px;
    margin-top: 15px;
}

/* --- Contenu Principal (Hero) --- */
.hero {
    position: relative;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    z-index: 5;
}

.hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 900px;
    padding: 20px;
}

/* Preuve sociale (Avatars) */
.social-proof {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 25px;
}

.avatars {
    display: flex;
    align-items: center;
}

.avatars img, .avatar-count {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 2px solid #333; /* Bordure pour séparer les cercles */
    margin-left: -12px;
    object-fit: cover;
}

.avatars img:first-child {
    margin-left: 0;
}

.avatar-count {
    background-color: #1a1a1a;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 11px;
    font-weight: 600;
}

.proof-text {
    font-size: 15px;
    color: #eaeaea;
}

/* Typographie du texte central */
h1 {
    font-size: 50px;
    font-weight: 500;
    line-height: 1.05;
    margin-bottom: 30px;
    letter-spacing: -1px;
}

p {
    font-size: 1.2rem;
    color: #f0f0f0;
    line-height: 1.6;
    margin-bottom: 40px;
}

/* --- Responsive Design (Mobile) --- */
@media (max-width: 768px) {
    .navbar {
        padding: 20px;
    }
    .nav-links {
        display: none; /* Cache le menu sur mobile pour simplifier l'affichage */
    }
    h1 {
        font-size: 3rem;
    }
    p {
        font-size: 1rem;
    }
}

/* --- Conteneur pour aligner les deux boutons côte à côte --- */
.cta-group {
 
    gap: 20px; /* Espace entre les deux boutons */
    justify-content: center;
    margin-top: 30px; /* Remplace le margin-top individuel de l'ancien bouton */
    align-items: center;
}

/* --- Bouton Principal (Blanc) --- */
.btn-primary {
    background-color: #ffffff;
    color: #1a1a1a;
    padding: 18px 36px;
    font-size: 16px;
    /* Le margin-top a été retiré d'ici car il est géré par .cta-group */
}

/* --- Nouveau Bouton Secondaire (Flouté et transparent) --- */
.btn-secondary {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(12px); 
    -webkit-backdrop-filter: blur(12px); /* Assure la compatibilité sur Safari */
    color: #ffffff;
    padding: 18px 36px; /* Même taille que le bouton blanc */
    font-size: 16px;
}
/* --- SECTION EXPERTISE (STYLE MAQUETTE) --- */
.expertise-section {
    /* Fond beige très clair élégant */
    background-color: #f5f3ef; 
    padding: 100px 50px;
    color: #1a1a1a;
}

.expertise-container {
    max-width: 1300px; /* Plus large pour accueillir les 5 cartes */
    margin: 0 auto;
}

/* --- EN-TÊTE --- */
.expertise-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 60px;
    gap: 40px;
}

.header-left {
    flex: 1;
}

/* Le petit badge "Nos services" */
.badge-outline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: transparent;
    color: #1a1a1a;
    border: 1px solid #d1ccc5; /* Bordure discrète */
    padding: 8px 16px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 25px;
}

.badge-outline svg {
    width: 16px;
    height: 16px;
}

/* Le grand titre façon Sérif (élégant) */
.header-left h2 {
    font-size: 50px;
    font-weight: 400;
    line-height: 1.1;
    color: #2c2a28; /* Marron très très foncé */
    margin: 0;
}

.header-right {
    flex: 0 0 450px; /* Largeur fixe pour la colonne de droite */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 25px;
}

.header-right p {
    font-size: 1.1rem;
    color: #4b4946;
    line-height: 1.6;
    margin: 0;
}

/* Bouton façon maquette (Fond transparent, bordure, icône noire) */
.btn-outline-dark {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    background-color: transparent;
    color: #1a1a1a;
    border: 1px solid #1a1a1a;
    padding: 8px 8px 8px 24px; /* Padding asymétrique pour la bulle */
    border-radius: 50px;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-outline-light {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    background-color: #1a1a1a;
    color: white;
    padding: 8px 8px 8px 24px; /* Padding asymétrique pour la bulle */
    border-radius: 50px;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
}

.icon-circle {
    background-color: #1a1a1a;
    color: #ffffff;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.icon-circle-light {
    background-color: white;
    color: #1a1a1a;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.icon-circle svg {
    width: 16px;
    height: 16px;
    transform: rotate(-45deg); /* Flèche en diagonale vers le haut */
    transition: transform 0.3s ease;
}

.btn-outline-light:hover .icon-circle-light {
    background-color: #1a1a1a;
    color: white;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.icon-circle-light svg {
    width: 16px;
    height: 16px;
    transform: rotate(90deg); /* Flèche en diagonale vers le haut */
    transition: transform 0.3s ease;
}

.btn-outline-dark:hover {
    background-color: #1a1a1a;
    color: #ffffff;
}

.btn-outline-light:hover {
    background-color: white;
    color: black;
}

.btn-outline-dark:hover .icon-circle {
    background-color: #ffffff;
    color: #1a1a1a;
}

/* --- GRILLE DES 5 CARTES --- */
.expertise-cards-wrapper {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}

.expert-card {
    position: relative;
    height: 350px;
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    display: flex;
    align-items: flex-end;
    padding: 25px;
    transition: transform 0.3s ease;
}

.expert-card:hover {
    transform: translateY(-10px);
}

.expert-card img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    transition: transform 0.5s ease;
}

.expert-card:hover img {
    transform: scale(1.05); /* Effet de zoom au survol */
}

/* Dégradé noir en bas pour lire le texte blanc */
.card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
    z-index: 2;
}

/* Le texte en bas */
.expert-card h3 {
    position: relative;
    z-index: 3;
    color: #ffffff;
    font-size: 1.25rem;
    font-weight: 500;
    margin: 0;
    line-height: 1.3;
}

/* La petite flèche en haut à droite des cartes (Effet verre dépoli) */
.card-arrow-top {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    z-index: 3;
    transition: background 0.3s ease;
}

.card-arrow-top svg {
    width: 16px;
    height: 16px;
    transform: rotate(-45deg);
}

.expert-card:hover .card-arrow-top {
    background: #a68867; /* Touche de ton doré/marron au survol */
    border-color: #a68867;
}

/* --- RESPONSIVE MOBILE & TABLETTE --- */
@media (max-width: 1200px) {
    .expertise-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 30px;
    }
    .header-right {
        flex: auto;
        width: 100%;
    }
}

@media (max-width: 900px) {
    .expertise-section {
        padding: 60px 20px;
    }
    .header-left h2 {
        font-size: 2.8rem;
    }
    
    /* On transforme la grille en un carrousel scrollable horizontalement sur mobile ! */
    .expertise-cards-wrapper {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding-bottom: 20px; /* Espace pour la barre de scroll */
        margin-right: -20px; /* Permet aux cartes de déborder sur le côté de l'écran */
        padding-right: 20px;
    }
    
    .expert-card {
        flex: 0 0 280px; /* Largeur fixe pour chaque carte sur mobile */
        scroll-snap-align: start;
    }
}
.testimonials-section {
    padding: 100px 0;
    background: #1a1a1a; /* Fond sombre pour faire ressortir les cartes */
    color: white;
    overflow: hidden;
}

.testimonials-header { text-align: center; margin-bottom: 60px; }
.testimonials-header h2 { font-size: 2.5rem; margin-bottom: 10px; }

/* Le rail du slider */
.testimonials-slider {
    width: 100%;
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.slider-track {
    display: flex;
    gap: 30px;
    animation: scroll 30s linear infinite; /* Animation continue */
}

.testimonial-card {
    min-width: 350px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 40px;
    border-radius: 24px;
    backdrop-filter: blur(10px);
    transition: transform 0.3s;
}

.testimonial-card:hover { transform: translateY(-10px); border-color: #a68867; }
.testimonial-card p { font-size: 1.1rem; font-style: italic; margin-bottom: 20px; color: #d1d5db; }
.client strong { display: block; color: #a68867; }

@keyframes scroll {
    /* On part du début (0%) jusqu'à la moitié du rail (-50%) */
    /* Comme la série 2 est identique à la série 1, à 50% on est exactement à la position de départ */
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } 
}

.slider-track:hover { animation-play-state: paused; }

/* === SECTION CTA PREMIUM === */
/* === SECTION CTA PREMIUM === */
.cta-wrapper {
    padding: 60px 50px;
    
    /* 🛠️ L'ASTUCE MAGIQUE : Le dégradé net (hard stop) */
    /* Il prolonge le bleu nuit (#0b1120) sur 220px, puis passe au gris clair (#f9f9fa) */
    background: linear-gradient(to bottom, #0b1120 0%, #0b1120 220px, #f9f9fa 220px, #f9f9fa 100%);
    
    display: flex;
    justify-content: center;
}

.cta-card-premium {
    background-color: #ffffff;
    width: 100%;
    max-width: 1300px;
    border-radius: 40px; /* Bords très arrondis comme l'image */
    padding: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.03); /* Ombre douce */
    position: relative;
    overflow: hidden; /* Empêche les cercles de déborder de la carte */
}

/* Partie Gauche (Texte) */
.cta-text-content {
    flex: 1;
    max-width: 500px;
    position: relative;
    z-index: 10;
}

.cta-subtitle {
    display: block;
    color: #6b7280;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 15px;
}

.cta-text-content h2 {
    font-size: 3rem;
    color: #111827;
    line-height: 1.1;
    margin-bottom: 20px;
    letter-spacing: -1px;
}

.cta-text-content p {
    font-size: 1.1rem;
    color: #4b5563;
    line-height: 1.6;
    margin-bottom: 35px;
}

.btn-black-pill {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background-color: #111827;
    color: #ffffff;
    padding: 16px 32px;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.3s;
}

.btn-black-pill svg { width: 18px; height: 18px; }
.btn-black-pill:hover { background-color: #374151; }

/* Partie Droite (Illustration Graphique) */
.cta-graphics {
    flex: 1;
    position: relative;
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Le cube au centre */
.center-icon {
    width: 60px;
    height: 60px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #111827;
    z-index: 5;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.center-icon svg { width: 28px; height: 28px; }

/* Les cercles concentriques pointillés */
.ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px dashed #e5e7eb;
    border-radius: 50%;
    z-index: 1;
}

.ring-1 { width: 200px; height: 200px; }
.ring-2 { width: 400px; height: 400px; }
.ring-3 { width: 650px; height: 650px; }

/* Les photos de profil sur les cercles */
.avatar {
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    object-fit: cover;
    z-index: 5;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* Placement manuel pour correspondre à l'image */
.av-1 { top: 25%; left: 35%; }
.av-2 { top: 60%; left: 25%; }
.av-3 { top: 15%; left: 65%; }
.av-4 { top: 40%; left: 80%; }
.av-5 { top: 75%; left: 60%; }


/* === FOOTER PRECIS MAQUETTE === */
.site-footer {
    background-color: #f9f9fa; /* Même fond que le CTA pour se fondre */
    padding: 80px 50px 40px;
    color: #111827;
}

.footer-container {
    max-width: 1300px;
    margin: 0 auto;
}

.footer-top {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 2fr; /* Proportions de la maquette */
    gap: 60px;
    margin-bottom: 80px;
}

/* Colonnes */
.footer-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 15px;
}

.footer-logo svg { width: 28px; height: 28px; }

.footer-col-brand p {
    color: #6b7280;
    line-height: 1.6;
    font-size: 0.95rem;
    max-width: 250px;
}

.footer-col-links h4, .footer-col-newsletter h4 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 25px;
}

.footer-col-links ul { list-style: none; padding: 0; }
.footer-col-links li { margin-bottom: 15px; }
.footer-col-links a {
    color: #4b5563;
    text-decoration: none;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: color 0.2s;
}

.footer-col-links a:hover { color: #111827; }
.arrow-up { font-size: 0.8rem; color: #9ca3af; }

/* Newsletter */
.footer-col-newsletter p {
    color: #6b7280;
    font-size: 0.95rem;
    margin-bottom: 20px;
    line-height: 1.5;
}

.newsletter-input-group {
    display: flex;
    align-items: center;
    background-color: #ffffff;
    border-radius: 50px;
    padding: 6px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
}

.at-symbol {
    color: #9ca3af;
    padding-left: 15px;
    font-weight: 500;
}

.newsletter-input-group input {
    flex: 1;
    border: none;
    padding: 10px 10px;
    outline: none;
    background: transparent;
    font-size: 0.95rem;
}

.newsletter-input-group button {
    background-color: #111827;
    color: white;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: background 0.3s;
}

.newsletter-input-group button svg { width: 16px; height: 16px; }
.newsletter-input-group button:hover { background-color: #374151; }

/* Ligne du bas */
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 30px;
    border-top: 1px solid #e5e7eb;
    color: #6b7280;
    font-size: 0.85rem;
}

.footer-social-icons {
    display: flex;
    gap: 15px;
    color: #9ca3af;
}

.footer-social-icons svg { width: 20px; height: 20px; cursor: pointer; transition: color 0.2s; }
.footer-social-icons svg:hover { color: #111827; }

/* Responsive Mobile */
@media (max-width: 900px) {
    .cta-card-premium { flex-direction: column; padding: 40px 30px; text-align: center; }
    .cta-graphics { display: none; /* Cache les cercles sur mobile pour éviter la surcharge */ }
    .footer-top { grid-template-columns: 1fr; gap: 40px; }
}

/* === SECTION AVANT / APRÈS === */
.transformation-section {
    padding: 100px 50px;
    background-color: #fdfbf7;
    color: #0f172a;
}

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

.transformation-badge {
    display: inline-block;
    color: #b89151;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 20px;
    border: 1px solid rgba(184, 145, 81, 0.3);
    padding: 6px 16px;
    border-radius: 50px;
}

.transformation-header h2 {
font-size: 2.5rem; margin-bottom: 10px;
}

.transformation-header p {
    color: #1a1a1a;
}

.transformation-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    max-width: 1300px;
    margin: 0 auto;
}

.ba-card h3 {
    font-size: 1.4rem;
    margin-bottom: 20px;
    color: #0f172a;
    text-align: center;
}

/* Le conteneur du slider */
.ba-container {
    position: relative;
    width: 100%;
    height: 450px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    /* Variable CSS qui sera mise à jour par le Javascript (50% par défaut) */
    --position: 50%; 
}

/* Les images */
.ba-image {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
}

.ba-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* C'est ici que la magie opère : on coupe l'image "Avant" en fonction de la variable --position */
.ba-image-before {
    clip-path: polygon(0 0, var(--position) 0, var(--position) 100%, 0 100%);
}

/* Étiquettes Avant / Après */
.ba-label {
    position: absolute;
    top: 20px;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    z-index: 5;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.label-before {
    left: 20px;
    background-color: #0f172a; /* Bleu nuit pour l'avant */
    color: white;
}

.label-after {
    right: 20px;
    background-color: #b89151; /* Doré pour l'après (Prestige) */
    color: white;
}

/* L'input invisible qui gère l'interaction */
.ba-slider {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    opacity: 0; /* Totalement invisible */
    cursor: ew-resize; /* Curseur flèche gauche-droite */
    z-index: 10; /* Au dessus de tout le reste */
    margin: 0;
}

/* La ligne blanche verticale de séparation */
.ba-slider-line {
    position: absolute;
    top: 0; left: var(--position);
    bottom: 0;
    width: 4px;
    background-color: white;
    transform: translateX(-50%);
    pointer-events: none; /* Empêche de bloquer le clic sur le curseur */
    z-index: 4;
}

/* Le bouton rond central avec les flèches */
.ba-slider-button {
    position: absolute;
    top: 50%; left: var(--position);
    transform: translate(-50%, -50%);
    width: 46px;
    height: 46px;
    background-color: #b89151; /* Doré */
    border: 3px solid white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    z-index: 4;
    pointer-events: none;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

.ba-slider-button svg { width: 24px; height: 24px; }

/* Responsive Mobile */
@media (max-width: 900px) {
    .transformation-grid { grid-template-columns: 1fr; }
    .ba-container { height: 350px; }
    .transformation-header h2 { font-size: 2.2rem; }
}

/* === SECTION COMMENT ÇA MARCHE === */
.how-it-works-section {
    padding: 100px 20px;
    background-color: #f8fafc; /* Gris extrêmement clair en fond */
    font-family: 'Inter', sans-serif;
}

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

/* En-tête */
.how-header {
    text-align: center;
    margin-bottom: 60px;
}

.how-header h2 {
    font-size: 3rem;
    color: #0f172a; /* Bleu/gris très sombre */
    font-weight: 700;
    margin-bottom: 15px;
    letter-spacing: -1px;
}

.how-header p {
    font-size: 1.15rem;
    color: #475569; /* Gris moyen */
    max-width: 750px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Conteneur de la grille */
.steps-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 colonnes égales */
    gap: 25px; /* Espace exact entre les cartes */
}

/* Les Cartes */
.step-card {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 40px 25px;
    text-align: center;
    position: relative; /* Indispensable pour positionner la ligne */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.02);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.step-card:hover {
    transform: translateY(-5px); /* Petit effet de soulèvement au survol */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05);
}

/* --- LA LIGNE DE CONNEXION MAGIQUE --- */
/* On dessine une ligne à droite de chaque carte, SAUF pour la dernière */
.step-card:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 70px; /* Centre exact du cercle (40px de padding + 30px de rayon) */
    right: -25px; /* Correspond exactement à la valeur du 'gap' de la grille */
    width: 25px; /* Comble exactement le vide entre les cartes */
    height: 2px;
    background-color: #b5c7dd; /* Ligne bleu clair */
    z-index: 0;
}

/* Numéros ronds */
.step-number {
    width: 60px;
    height: 60px;
    background-color: #b89151; /* Bleu foncé de l'image */
    color: #ffffff;
    font-size: 1.35rem;
    font-weight: 700;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 25px auto;
    position: relative;
    z-index: 1; /* Reste au-dessus de tout */
}

/* Textes de la carte */
.step-card h3 {
    font-size: 1.25rem;
    color: #0f172a;
    font-weight: 600;
    margin-bottom: 15px;
}

.step-card p {
    font-size: 0.95rem;
    color: #475569;
    line-height: 1.6;
    margin: 0;
}

/* --- RESPONSIVE MOBILE & TABLETTE --- */
@media (max-width: 1024px) {
    .steps-wrapper {
        grid-template-columns: repeat(2, 1fr); /* Passe sur 2 colonnes */
        gap: 40px 30px;
    }
    
    /* On masque la ligne de connexion sur tablette/mobile pour éviter les bugs visuels */
    .step-card:not(:last-child)::after {
        display: none; 
    }
}

@media (max-width: 640px) {
    .steps-wrapper {
        grid-template-columns: 1fr; /* Passe sur 1 colonne pour smartphone */
    }
    .how-header h2 {
        font-size: 2.2rem;
    }
}

/* === PRELOADER PRESTIGE === */
#prestige-preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #0f172a; /* Bleu nuit très profond */
    z-index: 999999; /* Au-dessus de tout le reste, y compris la navbar */
    display: flex;
    justify-content: center;
    align-items: center;
    /* La transition gère l'effet de disparition en douceur */
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.8s;
}

/* La classe que le Javascript va ajouter pour cacher le preloader */
#prestige-preloader.fade-out {
    opacity: 0;
    visibility: hidden;
}

.preloader-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
}

/* Le spinner circulaire élégant */
.preloader-spinner {
    width: 50px;
    height: 50px;
    border: 3px solid rgba(184, 145, 81, 0.15); /* Cercle de base semi-transparent */
    border-top: 3px solid #b89151; /* Le bord doré qui tourne */
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Le texte de la marque */
.preloader-text {
    font-family: 'Georgia', serif;
    color: #ffffff;
    font-size: 1.4rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    animation: pulseText 2s ease-in-out infinite; /* Effet de respiration */
}

.preloader-text span {
    color: #b89151; /* Doré */
    font-weight: bold;
}

/* La barre de chargement minimaliste (façon radar/scanner) */
.preloader-progress-bar {
    width: 160px;
    height: 2px;
    background-color: rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
}

.preloader-progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 40%;
    background-color: #b89151;
    animation: loadingBar 1.5s ease-in-out infinite;
}

/* --- ANIMATIONS CLÉS --- */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes pulseText {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

@keyframes loadingBar {
    0% { left: -50%; }
    100% { left: 100%; }
}

/* === SECTION SPLIT HERO === */
.split-hero {
    display: flex;
    min-height: 85vh;
    position: relative;
    overflow: hidden;
    background-color: #0b1120; /* Base bleue nuit */
    font-family: 'Inter', sans-serif;
}

/* --- COLONNE GAUCHE --- */
.split-left {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    padding: 80px 10%;
    z-index: 2;
}

/* L'effet de quadrillage discret (Généré en CSS pur !) */
.grid-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-size: 100px 100px;
    background-image: 
        linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    z-index: -1;
}

.split-content {
    max-width: 600px;
}

.split-content h2 {
    font-size: 2.5rem;
    color: #ffffff;
    line-height: 1.1;
    margin-bottom: 25px;
    letter-spacing: -1px;
}

.split-content h2 em {
    font-style: italic;
    color: #b89151; /* Ton doré */
    font-weight: 400;
}

.split-content p {
    font-size: 1.15rem;
    color: #cbd5e1; /* Gris clair */
    line-height: 1.6;
    margin-bottom: 40px;
    max-width: 500px;
}

/* Les Boutons */
.split-actions {
    display: flex;
    align-items: center;
    gap: 30px;
}

.btn-gold-pill {
    background-color: #e2e8f0; /* Blanc/Gris clair pour contraster comme Curology */
    color: #0b1120;
    font-weight: 600;
    padding: 16px 32px;
    border-radius: 50px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 15px;
    transition: all 0.3s ease;
}

.btn-gold-pill .arrow {
    background-color: #0f172a;
    color: white;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.8rem;
}

.btn-gold-pill:hover {
    background-color: #ffffff;
    transform: translateY(-3px);
}

.btn-demo {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #ffffff;
    text-decoration: none;
    font-weight: 500;
    transition: opacity 0.3s ease;
}

.play-circle {
    width: 45px;
    height: 45px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.play-circle svg {
    width: 18px;
    height: 18px;
    margin-left: 3px; /* Centre visuellement le triangle */
}

.btn-demo:hover { opacity: 0.8; }

/* --- COLONNE DROITE --- */
.split-right {
    flex: 1;
    position: relative;
    /* Dégradé doré premium */
    background: linear-gradient(135deg, #d4af37 0%, #b89151 50%, #9c773a 100%);
    display: flex;
    justify-content: center;
    align-items: flex-end; /* Colle l'image au bas de la div */
}

/* Ton image PNG Détourée */
.hero-model-img {
    height: 90%;
    max-height: 800px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(-10px 10px 20px rgba(0, 0, 0, 0.2)); /* Ajoute une ombre élégante derrière le PNG */
    z-index: 2;
}

/* --- LE BADGE CIRCULAIRE AU MILIEU --- */
.circular-badge {
    position: absolute;
    bottom: 50px;
    left: 50%; /* Positionne exactement à la coupure des deux blocs */
    transform: translateX(-50%);
    width: 140px;
    height: 140px;
    z-index: 10;
    background-color: #0b1120;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

/* Le texte qui tourne */
.spinning-text {
    position: absolute;
    width: 100%;
    height: 100%;
    animation: spinText 15s linear infinite;
}

.spinning-text text {
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: 2px;
    fill: #cbd5e1; /* Gris clair */
    text-transform: uppercase;
}

/* La flèche centrale */
.badge-arrow {
    width: 50px;
    height: 50px;
    background-color: #b89151; /* Doré */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    z-index: 2;
}

.badge-arrow svg { width: 24px; height: 24px; }

@keyframes spinText {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* --- RESPONSIVE MOBILE --- */
@media (max-width: 1024px) {
    .split-hero { flex-direction: column; min-height: auto; }
    .split-left { padding: 60px 30px; text-align: center; }
    .split-content h1 { font-size: 3.5rem; }
    .split-content p { font-size: 1rem; margin: 0 auto 30px auto; }
    .split-actions { justify-content: center; flex-direction: column; gap: 20px; }
    
    .split-right { height: 500px; }
    .hero-model-img { height: 100%; }
    
    /* Sur mobile, on cache le badge ou on le remonte */
    .circular-badge { display: none; } 
}

/* --- L'ÉTAT PAR DÉFAUT (En haut de la page, transparent) --- */
.navbar {
    position: fixed; /* Fixe le menu par rapport à l'écran */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000; /* S'assure que le menu reste au-dessus de tout le reste */
    background-color: transparent; /* Fond transparent par défaut */
    
    /* On ajoute une transition fluide de 0.3s sur le fond et l'ombre */
    transition: background-color 0.3s ease, box-shadow 0.3s ease; 
}

/* --- L'ÉTAT "SCROLLÉ" (Quand on descend, fond blanc) --- */
.navbar.scrolled {
    background-color: #ffffff; /* Fond blanc */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); /* Petite ombre élégante pour détacher le menu du reste de la page */
    color: black;
}

/* 💡 ASTUCE CONTRASTE : 
   Si tes liens sont blancs par défaut, ils vont disparaître sur le fond blanc.
   Voici comment les forcer à devenir foncés quand la classe .scrolled est active : */

.navbar.scrolled .nav-links li ul {
    color: #0f172a; /* Ton bleu/gris très foncé */
}

/* Si ton menu a un fond gris-transparent (la fameuse "pilule" autour de Accueil, Nos services...), 
   tu peux aussi le modifier au scroll pour qu'il s'intègre mieux sur le blanc : */
.navbar.scrolled .menu-pill {
    background-color: #f1f5f9; /* Un gris extrêmement clair au lieu du transparent */
}


/* --- SECTION CONTACT --- */
.contact-section {
    padding: 40px 50px 80px; /* L'espace en haut (150px) compense la navbar en position absolute */
    display: flex;
    justify-content: center;
}

.contact-container {
    max-width: 1200px;
    width: 100%;
    display: flex;
    gap: 80px;
}

/* --- COLONNE DE GAUCHE --- */
.contact-info {
    flex: 1;
    max-width: 400px;
}

.badge {
    display: inline-block;
    background-color: rgba(166, 136, 103, 0.15); /* Ton marron/doré à 15% d'opacité */
    color: #a68867; /* Ta couleur exacte pour le texte */
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 20px;
}

.contact-info h1 {
    font-size: 3.5rem;
    line-height: 1.1;
    color: #111827;
    margin-bottom: 24px;
    letter-spacing: -1px;
}

.description {
    color: #4b5563;
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 30px;
}

.manual-contact {
    color: #4b5563;
    font-size: 1.1rem;
    line-height: 1.5;
}

.manual-contact a {
    color: #a68867;
    text-decoration: none;
    font-weight: 500;
}

/* --- COLONNE DE DROITE (FORMULAIRE) --- */
.contact-form-wrapper {
    flex: 1.5;
}

.form-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.input-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}

.input-group label {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 8px;
}

/* Style des champs de texte et select */
.input-with-icon {
    position: relative;
    display: flex;
    align-items: center;
}

.input-with-icon svg {
    position: absolute;
    left: 15px;
    width: 20px;
    height: 20px;
    color: #6b7280;
}

.input-with-icon input,
.input-with-icon select {
    width: 100%;
    padding: 14px 15px 14px 45px; /* Le padding gauche laisse la place à l'icône */
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    font-size: 15px;
    color: #111827;
    outline: none;
    transition: all 0.2s;
    /* Pour le select, on change un peu l'apparence par défaut */
    appearance: none;
    -webkit-appearance: none;
    background-color: #ffffff;
}

/* Effet au clic (focus) */
.input-with-icon input:focus,
.input-with-icon select:focus,
.textarea-wrapper textarea:focus {
    border-color: #a68867;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

/* --- CHECKBOXES PERSONNALISÉES --- */
.checkbox-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 15px 25px;
    margin-top: 5px;
}

.custom-checkbox-wrapper {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 14px;
    color: #111827;
    font-weight: 500;
    position: relative;
    padding-left: 28px; /* Laisse de la place pour le faux bouton */
}

/* On cache la vraie checkbox */
.custom-checkbox-wrapper input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Le rond visuel */
.checkmark {
    position: absolute;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 50%; /* Rend la checkbox ronde comme sur ton image */
    transition: all 0.2s;
}

/* Quand on survole */
.custom-checkbox-wrapper:hover input ~ .checkmark {
    border-color: #a68867;
}

/* Quand c'est coché : Fond violet et bordure violette */
.custom-checkbox-wrapper input:checked ~ .checkmark {
    background-color: #a68867;
    border-color: #a68867;
}

/* L'icône "V" à l'intérieur quand c'est coché */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
    left: 6px;
    top: 1px;
    width: 4px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.custom-checkbox-wrapper input:checked ~ .checkmark:after {
    display: block;
}

/* --- TEXTAREA --- */
.textarea-wrapper {
    position: relative;
}

.textarea-wrapper textarea {
    width: 100%;
    min-height: 140px;
    padding: 15px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    font-size: 15px;
    resize: vertical;
    outline: none;
    transition: border-color 0.2s;
}

.char-count {
    position: absolute;
    bottom: 15px;
    left: 15px;
    font-size: 12px;
    color: #9ca3af;
}

/* --- BOUTON SUBMIT --- */
.submit-btn {
    width: 100%;
    background-color: black;
    color: white;
    padding: 18px;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    transition: background-color 0.2s;
}

.submit-btn svg {
    width: 20px;
    height: 20px;
}

.submit-btn:hover {
    background-color: #a68867;
}

/* --- RESPONSIVE MOBILE --- */
@media (max-width: 900px) {
    .contact-container {
        flex-direction: column;
        gap: 40px;
    }
    .form-row {
        flex-direction: column;
        gap: 0;
    }
    .contact-info h1 {
        font-size: 2.5rem;
    }
    .navbar {
        padding: 20px;
    }
    .nav-links {
        display: none;
    }
}

/* --- SECTION GESTION COMPLÈTE --- */
.gestion-section {
    padding: 20px 20px;
    padding-top: 60px;
    background-color: #ffffff; /* Fond blanc classique */
    font-family: 'Inter', sans-serif;
}

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

/* En-tête */
.gestion-header {
    text-align: center;
    margin-bottom: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.badge-360 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: #e5edf5; /* Bleu très clair */
    color: #1e3f66; /* Bleu marine */
    padding: 8px 18px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 25px;
}

.badge-360 svg {
    width: 18px;
    height: 18px;
}

.gestion-header h2 {
    font-size: 2.8rem;
    color: #0f172a; /* Bleu/Gris très foncé */
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 20px;
    max-width: 900px;
}

.gestion-subtitle {
    font-size: 1.15rem;
    color: #475569; /* Gris intermédiaire */
    line-height: 1.6;
    max-width: 750px;
}

/* Grille des Cartes */
.gestion-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 colonnes égales */
    gap: 30px;
}

.gestion-card {
    background-color: #ffffff;
    border: 1px solid #e2e8f0; /* Bordure gris clair par défaut */
    border-radius: 16px;
    padding: 40px 35px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

.gestion-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.04);
}

/* La carte active (Administrative sur l'image) avec sa bordure bleue foncée */
.card-active {
    border: 2px solid #1e3f66; 
}

/* Icône en haut des cartes */
.card-icon {
    width: 55px;
    height: 55px;
    background-color: #e5edf5;
    color: #1e3f66;
    border-radius: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 25px;
}

.card-icon svg {
    width: 26px;
    height: 26px;
}

.gestion-card h3 {
    font-size: 1.3rem;
    color: #0f172a;
    font-weight: 600;
    margin-bottom: 15px;
}

.gestion-card p {
    color: #475569;
    font-size: 1.05rem;
    line-height: 1.6;
    margin-bottom: 30px;
    flex-grow: 1; /* Pousse la liste vers le bas si le texte est court */
}

/* Liste à puces */
.card-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.card-features li {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #334155;
    font-size: 0.95rem;
}

.card-features svg {
    width: 20px;
    height: 20px;
    color: #b89151; /* Couleur dorée/moutarde comme sur la maquette */
    flex-shrink: 0;
}

/* --- RESPONSIVE MOBILE --- */
@media (max-width: 992px) {
    .gestion-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 colonnes sur tablette */
    }
}

@media (max-width: 768px) {
    .gestion-header h2 {
        font-size: 2.2rem;
    }
    .gestion-grid {
        grid-template-columns: 1fr; /* 1 colonne sur mobile */
    }
}

/* === SECTION CTA PREMIUM === */
.cta-wrapper {
    padding: 80px 50px;
    background-color: #f9f9fa; /* Fond gris très clair pour détacher la carte blanche */
    display: flex;
    justify-content: center;
}

.cta-card-premium {
    background-color: #ffffff;
    width: 100%;
    max-width: 1300px;
    border-radius: 40px; /* Bords très arrondis comme l'image */
    padding: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.03); /* Ombre douce */
    position: relative;
    overflow: hidden; /* Empêche les cercles de déborder de la carte */
}

/* Partie Gauche (Texte) */
.cta-text-content {
    flex: 1;
    max-width: 500px;
    position: relative;
    z-index: 10;
}

.cta-subtitle {
    display: block;
    color: #6b7280;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 15px;
}

.cta-text-content h2 {
    font-size: 3rem;
    color: #111827;
    line-height: 1.1;
    margin-bottom: 20px;
    letter-spacing: -1px;
}

.cta-text-content p {
    font-size: 1.1rem;
    color: #4b5563;
    line-height: 1.6;
    margin-bottom: 35px;
}

.btn-black-pill {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background-color: #111827;
    color: #ffffff;
    padding: 16px 32px;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.3s;
}

.btn-black-pill svg { width: 18px; height: 18px; }
.btn-black-pill:hover { background-color: #374151; }

/* Partie Droite (Illustration Graphique) */
.cta-graphics {
    flex: 1;
    position: relative;
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Le cube au centre */
.center-icon {
    width: 60px;
    height: 60px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #111827;
    z-index: 5;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.center-icon svg { width: 28px; height: 28px; }

/* Les cercles concentriques pointillés */
.ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px dashed #e5e7eb;
    border-radius: 50%;
    z-index: 1;
}

.ring-1 { width: 200px; height: 200px; }
.ring-2 { width: 400px; height: 400px; }
.ring-3 { width: 650px; height: 650px; }

/* Les photos de profil sur les cercles */
.avatar {
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    object-fit: cover;
    z-index: 5;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* Placement manuel pour correspondre à l'image */
.av-1 { top: 25%; left: 35%; }
.av-2 { top: 60%; left: 25%; }
.av-3 { top: 15%; left: 65%; }
.av-4 { top: 40%; left: 80%; }
.av-5 { top: 75%; left: 60%; }


/* === FOOTER PRECIS MAQUETTE === */
.site-footer {
    background-color: #f9f9fa; /* Même fond que le CTA pour se fondre */
    padding: 80px 50px 40px;
    color: #111827;
}

.footer-container {
    max-width: 1300px;
    margin: 0 auto;
}

.footer-top {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 2fr; /* Proportions de la maquette */
    gap: 60px;
    margin-bottom: 80px;
}

/* Colonnes */
.footer-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 15px;
}

.footer-logo svg { width: 28px; height: 28px; }

.footer-col-brand p {
    color: #6b7280;
    line-height: 1.6;
    font-size: 0.95rem;
    max-width: 250px;
}

.footer-col-links h4, .footer-col-newsletter h4 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 25px;
}

.footer-col-links ul { list-style: none; padding: 0; }
.footer-col-links li { margin-bottom: 15px; }
.footer-col-links a {
    color: #4b5563;
    text-decoration: none;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: color 0.2s;
}

.footer-col-links a:hover { color: #111827; }
.arrow-up { font-size: 0.8rem; color: #9ca3af; }

/* Newsletter */
.footer-col-newsletter p {
    color: #6b7280;
    font-size: 0.95rem;
    margin-bottom: 20px;
    line-height: 1.5;
}

.newsletter-input-group {
    display: flex;
    align-items: center;
    background-color: #ffffff;
    border-radius: 50px;
    padding: 6px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
}

.at-symbol {
    color: #9ca3af;
    padding-left: 15px;
    font-weight: 500;
}

.newsletter-input-group input {
    flex: 1;
    border: none;
    padding: 10px 10px;
    outline: none;
    background: transparent;
    font-size: 0.95rem;
}

.newsletter-input-group button {
    background-color: #111827;
    color: white;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: background 0.3s;
}

.newsletter-input-group button svg { width: 16px; height: 16px; }
.newsletter-input-group button:hover { background-color: #374151; }

/* Ligne du bas */
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 30px;
    border-top: 1px solid #e5e7eb;
    color: #6b7280;
    font-size: 0.85rem;
}

.footer-social-icons {
    display: flex;
    gap: 15px;
    color: #9ca3af;
}

.footer-social-icons svg { width: 20px; height: 20px; cursor: pointer; transition: color 0.2s; }
.footer-social-icons svg:hover { color: #111827; }

/* Responsive Mobile */
@media (max-width: 900px) {
    .cta-card-premium { flex-direction: column; padding: 40px 30px; text-align: center; }
    .cta-graphics { display: none; /* Cache les cercles sur mobile pour éviter la surcharge */ }
    .footer-top { grid-template-columns: 1fr; gap: 40px; }
}

/* === SECTION PROACTIVITÉ === */
.proactive-section {
    position: relative;
    background-color: #0b1120; /* Bleu nuit ultra profond */
    padding: 120px 50px;
    margin-top: 40px;
    color: #ffffff;
    overflow: hidden; /* Contient les halos lumineux */
}

/* Halos lumineux en arrière-plan (L'effet "Radar") */
.glow-orb {
    position: absolute;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(184, 145, 81, 0.15) 0%, rgba(11, 17, 32, 0) 70%); /* Doré transparent */
    top: 50%;
    right: 5%;
    transform: translateY(-50%);
    border-radius: 50%;
    z-index: 1;
    animation: pulseGlow 4s ease-in-out infinite alternate;
}

.glow-orb.orb-2 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(79, 70, 229, 0.15) 0%, rgba(11, 17, 32, 0) 70%); /* Violet transparent pour nuancer */
    top: 10%;
    left: -10%;
    animation: pulseGlow 6s ease-in-out infinite alternate-reverse;
}

.proactive-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 80px;
    position: relative;
    z-index: 2; /* Reste au-dessus des halos */
}

/* --- Colonne de gauche (Textes) --- */
.proactive-text {
    flex: 1;
}

.proactive-badge {
    display: inline-block;
    color: #b89151; /* Doré */
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 20px;
    border: 1px solid rgba(184, 145, 81, 0.3);
    padding: 6px 16px;
    border-radius: 50px;
}

.proactive-text h2 {
    font-size: 3.5rem;
    line-height: 1.1;
    margin-bottom: 30px;
    letter-spacing: -1px;
}

.proactive-text p {
    font-size: 1.15rem;
    color: #94a3b8; /* Gris bleuté clair */
    line-height: 1.7;
    margin-bottom: 40px;
}

.proactive-text strong {
    color: #ffffff;
    font-weight: 600;
}

/* Statistiques */
.proactive-stats {
    display: flex;
    gap: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 30px;
}

.stat-item {
    display: flex;
    flex-direction: column;
}

.stat-number {
    font-size: 3rem;
    font-weight: 700;
    color: #b89151;
    line-height: 1;
    margin-bottom: 5px;
}

.stat-label {
    font-size: 0.95rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* --- Colonne de droite (Cartes flottantes) --- */
.proactive-visuals {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center; /* 🛠️ CORRECTIF 1 : Centre le bloc de cartes verticalement */
    gap: 20px;
    position: relative;
}

.floating-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 20px;
    padding: 25px;
    display: flex;
    align-items: center;
    gap: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    height: fit-content; /* 🛠️ CORRECTIF 2 : Force la carte à épouser la taille du texte */
    
    /* Animation de flottement */
    animation: floatCard 6s ease-in-out infinite;
}

/* Décalages des cartes pour un effet d'escalier dynamique */
.delay-1 { margin-right: 50px; animation-delay: 0s; }
.delay-2 { margin-left: 50px; animation-delay: -2s; border-color: rgba(184, 145, 81, 0.3); /* Légère lueur dorée */ }
.delay-3 { margin-right: 30px; animation-delay: -4s; }

.f-card-icon {
    width: 60px;
    height: 60px;
    background: rgba(184, 145, 81, 0.15);
    color: #b89151;
    border-radius: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

.f-card-icon svg {
    width: 28px;
    height: 28px;
}

.f-card-text h4 {
    font-size: 1.2rem;
    margin-bottom: 5px;
    color: #ffffff;
}

.f-card-text p {
    font-size: 0.95rem;
    color: #cbd5e1;
    line-height: 1.5;
    margin-bottom: 0; /* 🛠️ CORRECTIF : On annule la marge globale de 40px */
}

/* === ANIMATIONS KEYFRAMES === */

/* Fait respirer les halos lumineux en fond */
@keyframes pulseGlow {
    0% { transform: translateY(-50%) scale(1); opacity: 0.5; }
    100% { transform: translateY(-50%) scale(1.2); opacity: 1; }
}

/* Fait léviter doucement les cartes */
@keyframes floatCard {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-12px); }
    100% { transform: translateY(0px); }
}

/* --- Responsive --- */
@media (max-width: 992px) {
    .proactive-container { flex-direction: column; gap: 60px; }
    .proactive-text h2 { font-size: 2.8rem; }
    .delay-1, .delay-2, .delay-3 { margin: 0; } /* Aligne les cartes sur mobile */
}

/* === SECTION DEVIS PREMIUM === */
.quote-section {
    padding: 60px 50px;
    background-color: #f8fafc; /* Gris extrêmement clair pour le fond */
    color: #0f172a;
}

.quote-container {
    max-width: 1300px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.2fr; /* Le formulaire prend un peu plus de place */
    gap: 80px;
    align-items: flex-start;
}

/* --- Colonne Gauche (Pitch) --- */
.quote-pitch {
    position: sticky;
    top: 120px; /* Le texte reste à l'écran pendant que le client remplit le formulaire ! */
}

.quote-badge {
    display: inline-block;
    background-color: #e0e7ff;
    color: #4338ca;
    padding: 8px 16px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 25px;
}

.quote-pitch h1 {
    font-size: 3rem;
    line-height: 1.1;
    color: #0f172a;
    margin-bottom: 25px;
    letter-spacing: -1px;
}

.quote-intro {
    font-size: 1.15rem;
    color: #475569;
    line-height: 1.6;
    margin-bottom: 40px;
}

/* Éléments de confiance */
.trust-points {
    display: flex;
    flex-direction: column;
    gap: 25px;
    margin-bottom: 40px;
}

.trust-item {
    display: flex;
    gap: 20px;
}

.trust-icon {
    width: 50px;
    height: 50px;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    color: #a68867; /* Ta couleur dorée */
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
}

.trust-icon svg { width: 24px; height: 24px; }

.trust-text h4 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 5px;
}

.trust-text p {
    color: #64748b;
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Mini Témoignage */
.mini-testimonial {
    background-color: #ffffff;
    border-left: 4px solid #a68867;
    padding: 25px;
    border-radius: 0 12px 12px 0;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.03);
}

.mini-testimonial p {
    font-style: italic;
    color: #334155;
    font-size: 1rem;
    margin-bottom: 10px;
}

.mini-testimonial span {
    font-size: 0.85rem;
    font-weight: 600;
    color: #94a3b8;
}

/* --- Colonne Droite (Formulaire) --- */
.quote-form-wrapper {
    background-color: #ffffff;
    padding: 50px;
    border-radius: 24px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.05);
    border: 1px solid #f1f5f9;
}

.form-section-title {
    font-size: 1.1rem;
    color: #0f172a;
    font-weight: 700;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.form-divider {
    height: 1px;
    background-color: #e2e8f0;
    margin: 30px 0;
}

.form-row {
    display: flex;
    gap: 20px;
}

.input-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}

.input-group label {
    font-size: 14px;
    font-weight: 600;
    color: #334155;
    margin-bottom: 8px;
}

.premium-form input,
.premium-form select,
.premium-form textarea {
    width: 100%;
    padding: 16px;
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    font-size: 15px;
    color: #0f172a;
    outline: none;
    transition: all 0.3s ease;
    font-family: inherit;
}

.premium-form select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 16px;
}

.premium-form textarea {
    min-height: 120px;
    resize: vertical;
}

.premium-form input:focus,
.premium-form select:focus,
.premium-form textarea:focus {
    border-color: #a68867;
    background-color: #ffffff;
    box-shadow: 0 0 0 4px rgba(166, 136, 103, 0.1);
}

/* Bouton Submit */
.btn-submit-quote {
    width: 100%;
    background-color: #0f172a; /* Très sombre, presque noir */
    color: #ffffff;
    padding: 20px;
    border: none;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    transition: all 0.3s ease;
    margin-top: 20px;
}

.btn-submit-quote svg { width: 22px; height: 22px; }

.btn-submit-quote:hover {
    background-color: #a68867; /* Devient doré au survol */
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(166, 136, 103, 0.2);
}

.form-security-note {
    text-align: center;
    font-size: 0.85rem;
    color: #64748b;
    margin-top: 15px;
}

/* --- Responsive Mobile --- */
@media (max-width: 992px) {
    .quote-container { grid-template-columns: 1fr; gap: 50px; }
    .quote-pitch { position: relative; top: 0; }
    .quote-pitch h1 { font-size: 2.5rem; }
    .quote-form-wrapper { padding: 30px 20px; }
    .form-row { flex-direction: column; gap: 0; }
}

/* === SECTION ABOUT : MANIFESTE === */
.about-hero-section {
    background-color: #fdfbf7; /* Un beige blanc très subtil, effet papier glacé */
    padding: 150px 50px 100px;
    color: #0f172a;
    overflow: hidden;
}

.about-hero-container {
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 100px;
}

/* --- Gauche : Textes --- */
.about-hero-text {
    flex: 1;
    position: relative;
    z-index: 2;
}

.about-eyebrow {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: #b89151; /* Doré */
    font-weight: 600;
    margin-bottom: 40px;
}

.about-eyebrow .line {
    width: 50px;
    height: 2px;
    background-color: #b89151;
}

.manifesto-title {
    font-family: 'Georgia', serif; /* Police système très élégante */
    font-size: 5rem;
    line-height: 1.05;
    color: #0f172a;
    margin-bottom: 40px;
    letter-spacing: -2px;
}

.manifesto-title em {
    color: #b89151;
    font-style: italic;
    font-weight: 400;
}

.manifesto-body {
    max-width: 500px;
}

.manifesto-body p {
    font-size: 1.15rem;
    color: #475569;
    line-height: 1.8;
    margin-bottom: 25px;
}

.manifesto-signature {
    margin-top: 50px;
    border-left: 2px solid #b89151;
    padding-left: 20px;
}

.sig-name {
    display: block;
    font-family: 'Georgia', serif;
    font-size: 1.5rem;
    color: #0f172a;
    font-style: italic;
}

.sig-title {
    display: block;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #94a3b8;
    margin-top: 5px;
}

/* --- Droite : Visuel Éditorial --- */
.about-hero-visual {
    flex: 1;
    position: relative;
}

.visual-composition {
    position: relative;
    width: 100%;
    max-width: 550px;
    margin: 0 auto;
}

/* Le cadre doré décalé en arrière-plan */
.gold-frame {
    position: absolute;
    top: 40px;
    right: -40px;
    width: 100%;
    height: 100%;
    border: 2px solid #b89151;
    z-index: 1;
    transition: transform 0.5s ease;
}

/* L'image qui passe au premier plan */
.image-wrapper {
    position: relative;
    z-index: 2;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.1);
}

.image-wrapper img {
    width: 100%;
    height: 650px;
    object-fit: cover;
    display: block;
    transition: transform 0.7s ease;
}

.visual-composition:hover .image-wrapper img {
    transform: scale(1.05); /* Léger zoom au survol */
}

.visual-composition:hover .gold-frame {
    transform: translate(15px, -15px); /* Le cadre s'éloigne au survol */
}

/* Le badge flottant qui casse le cadre */
.floating-expertise-badge {
    position: absolute;
    bottom: -30px;
    left: -50px;
    background-color: #0f172a; /* Bleu nuit */
    color: #ffffff;
    padding: 25px 35px;
    display: flex;
    align-items: center;
    gap: 20px;
    z-index: 3;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.2);
}

.floating-expertise-badge svg {
    width: 40px;
    height: 40px;
    color: #b89151;
}

.badge-text strong {
    display: block;
    font-size: 1.5rem;
    font-family: 'Georgia', serif;
}

.badge-text span {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #cbd5e1;
}

/* --- Responsive Mobile --- */
@media (max-width: 1024px) {
    .about-hero-container { flex-direction: column; gap: 80px; }
    .manifesto-title { font-size: 3.5rem; }
    .gold-frame { right: -20px; top: 20px; }
    .floating-expertise-badge { left: 20px; bottom: -20px; padding: 15px 20px; }
}

/* === SECTION ABOUT : SYNERGIE FRANCO-TUNISIENNE === */
.synergy-section {
    padding: 100px 50px;
    background-color: #ffffff;
}

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

.synergy-header h2 {
    color: #1a1a1a;
  }  

.synergy-header p {
    font-size: 1.1rem;
    color: #475569;
    line-height: 1.7;
}

/* La grille des deux panneaux */
.synergy-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    max-width: 1300px;
    margin: 0 auto;
}

/* Style des panneaux */
.synergy-card {
    position: relative;
    height: 550px;
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    align-items: flex-end; /* Colle le texte en bas */
    padding: 40px;
    box-shadow: 0 15px 30px rgba(0,0,0,0.05);
    cursor: default;
}

/* L'image de fond (Directement en couleurs) */
.synergy-bg {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    /* On supprime la ligne "filter: grayscale(100%);" */
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Le filtre sombre pour lire le texte */
.synergy-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(to top, rgba(15, 23, 42, 0.95) 0%, rgba(15, 23, 42, 0.2) 60%, transparent 100%);
    z-index: 2;
    transition: opacity 0.5s ease;
}

/* Le contenu texte */
.synergy-content {
    position: relative;
    z-index: 3;
    color: #ffffff;
    transform: translateY(20px);
    transition: transform 0.5s ease;
}

.origin-tag {
    display: inline-block;
    background-color: rgba(184, 145, 81, 0.9); /* Doré */
    color: #ffffff;
    padding: 6px 14px;
    border-radius: 4px;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
    margin-bottom: 20px;
}

.synergy-content h3 {
    font-size: 2rem;
    margin-bottom: 15px;
    font-family: 'Georgia', serif;
}

.synergy-content p {
    font-size: 1.05rem;
    color: #cbd5e1;
    line-height: 1.6;
    opacity: 0.8;
    transition: opacity 0.5s ease;
}

/* --- ANIMATIONS AU SURVOL --- */
.synergy-card:hover .synergy-bg {
    /* On garde uniquement l'effet de zoom élégant */
    transform: scale(1.05); 
}

.synergy-card:hover .synergy-content {
    transform: translateY(0); /* Le texte remonte légèrement */
}

.synergy-card:hover .synergy-content p {
    opacity: 1; /* Le texte devient 100% visible */
}

/* Responsive */
@media (max-width: 900px) {
    .synergy-grid { grid-template-columns: 1fr; }
    .synergy-card { height: 450px; }
    .synergy-header h2 { font-size: 2.5rem; }
}

/* === SECTION CARNET D'ADRESSES (BENTO GRID) === */
.network-section {
    padding: 120px 50px;
    background-color: #0b1120; /* On repasse sur un fond sombre pour finir en beauté */
    color: #ffffff;
}

.network-container {
    max-width: 1300px;
    margin: 0 auto;
}

/* En-tête */
.network-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px auto;
}

.network-badge {
    display: inline-block;
    color: #b89151; /* Doré */
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 20px;
    border: 1px solid rgba(184, 145, 81, 0.3);
    padding: 6px 16px;
    border-radius: 50px;
}


.network-header p {
    font-size: 1.15rem;
    color: #94a3b8;
    line-height: 1.6;
}

.network-header p strong {
    color: #ffffff;
}

/* --- LA GRILLE BENTO --- */
.bento-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 colonnes */
    gap: 20px; /* Espace entre les blocs */
    grid-auto-rows: 350px; /* Hauteur de base des blocs */
}

/* Tailles asymétriques pour l'effet puzzle */
.bento-tech { grid-column: span 2; } /* Prend 2 colonnes de large */
.bento-clean { grid-column: span 1; }
.bento-garden { grid-column: span 1; }
.bento-security { grid-column: span 2; } /* Prend 2 colonnes de large */

/* Design interne des cartes */
.bento-card {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.bento-bg {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.bento-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    /* Dégradé sombre pour toujours pouvoir lire le texte */
    background: linear-gradient(to top, rgba(11, 17, 32, 0.95) 0%, rgba(11, 17, 32, 0.4) 50%, transparent 100%);
    z-index: 2;
}

.bento-content {
    position: relative;
    z-index: 3;
    transform: translateY(20px);
    transition: transform 0.5s ease;
}

.bento-icon {
    width: 45px;
    height: 45px;
    background-color: rgba(184, 145, 81, 0.2);
    color: #b89151;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    backdrop-filter: blur(5px);
}

.bento-icon svg { width: 24px; height: 24px; }

.bento-content h3 {
    font-size: 1.8rem;
    color: #ffffff;
    margin-bottom: 12px;
    font-family: 'Georgia', serif;
}

.bento-content p {
    font-size: 1.05rem;
    color: #cbd5e1;
    line-height: 1.5;
    opacity: 0.8;
    transition: opacity 0.5s ease;
}

/* Animations au survol */
.bento-card:hover .bento-bg {
    transform: scale(1.05);
}

.bento-card:hover .bento-content {
    transform: translateY(0);
}

.bento-card:hover .bento-content p {
    opacity: 1;
}

/* --- RESPONSIVE MOBILE --- */
@media (max-width: 992px) {
    .bento-grid {
        grid-template-columns: repeat(2, 1fr); /* Passe en 2 colonnes sur tablette */
    }
    .bento-tech, .bento-security { grid-column: span 2; }
    .bento-clean, .bento-garden { grid-column: span 1; }
}

@media (max-width: 768px) {
    .bento-grid {
        grid-template-columns: 1fr; /* 1 seule colonne sur mobile */
        grid-auto-rows: 300px;
    }
    .bento-tech, .bento-clean, .bento-garden, .bento-security { 
        grid-column: span 1; /* Tout prend 1 colonne */
    }
    .network-header h2 { font-size: 2.2rem; }
    .bento-content { transform: translateY(0); } /* Enlève l'animation sur mobile pour la lisibilité */
    .bento-content p { opacity: 1; }

    h1 {
        font-size: 2.2rem; /* Au lieu de 3rem (Tu peux même tester 2rem si c'est encore trop grand) */
        line-height: 1.15; /* On donne un tout petit peu plus d'air entre les lignes sur mobile */
        margin-bottom: 25px; /* On réduit légèrement l'espace sous le titre */
    }
}

/* 1. On réduit les espaces en haut et en bas de la section */
.about-hero-section {
    padding: 80px 50px 60px; /* Avant c'était 150px en haut et 100px en bas */
}

/* 2. On rapproche légèrement le texte de l'image */
.about-hero-container {
    gap: 60px; /* Avant : 100px */
}

/* 3. On réduit la taille du grand titre */
.manifesto-title {
    font-size: 3.8rem; /* Avant : 5rem */
    margin-bottom: 25px; /* Avant : 40px */
}

.about-eyebrow {
    margin-bottom: 20px;
}

/* 4. On affine un peu le texte */
.manifesto-body p {
    font-size: 1.05rem; 
    line-height: 1.6;
    margin-bottom: 20px;
}

/* 5. LE PLUS IMPORTANT : On réduit l'image */
.visual-composition {
    max-width: 480px; /* Avant : 550px */
}

.image-wrapper img {
    height: 480px; /* Avant : 650px. C'est ça qui te faisait scroller ! */
}

/* 6. On réajuste le cadre doré et le badge pour la nouvelle taille */
.gold-frame {
    top: 25px;
    right: -25px;
}

.floating-expertise-badge {
    padding: 15px 25px;
    bottom: -20px;
    left: -30px;
}

.floating-expertise-badge svg {
    width: 30px;
    height: 30px;
}

.badge-text strong {
    font-size: 1.2rem;
}

/* Réduction des espaces de la section 2 */
.synergy-section {
    padding: 80px 50px; /* Avant : 100px */
}

.synergy-header {
    margin-bottom: 40px; /* Avant : 60px */
}

.synergy-header h2 {
    font-size: 2.8rem; /* Avant : 3rem */
}

/* Réduction massive de la taille des cartes */
.synergy-card {
    height: 400px; /* Avant : 550px. C'est ici que tu gagnes le plus de place ! */
    padding: 30px; /* Avant : 40px */
}

.synergy-content h3 {
    font-size: 1.6rem; /* Avant : 2rem */
    margin-bottom: 10px;
}

.synergy-content p {
    font-size: 0.95rem; /* On réduit légèrement le texte */
    line-height: 1.5;
}

.origin-tag {
    margin-bottom: 15px; /* Avant : 20px */
    padding: 5px 12px;
    font-size: 0.75rem;
}

/* Réduction des espaces de la section 3 */
.network-section {
    padding: 80px 50px; /* Avant : 120px */
}

.network-header {
    margin-bottom: 40px; /* Avant : 60px */
}

.network-header h2 {
    font-size: 2.8rem; /* Avant : 3rem */
    margin-bottom: 15px;
}

/* Réduction de la hauteur des blocs de la grille */
.bento-grid {
    grid-auto-rows: 280px; /* Avant : 350px. Ton Bento est maintenant beaucoup plus compact ! */
    gap: 15px; /* Avant : 20px */
}

/* Ajustement de l'intérieur des cartes Bento */
.bento-card {
    padding: 30px; /* Avant : 40px */
}

.bento-icon {
    width: 35px; /* Avant : 45px */
    height: 35px;
    margin-bottom: 15px;
}

.bento-icon svg {
    width: 18px; 
    height: 18px;
}

.bento-content h3 {
    font-size: 1.4rem; /* Avant : 1.8rem */
    margin-bottom: 8px;
}

.bento-content p {
    font-size: 0.95rem; /* Avant : 1.05rem */
    line-height: 1.4;
}

/* 1. Modifie la classe .synergy-content existante */
.synergy-content {
    position: relative;
    z-index: 3;
    color: #ffffff;
    /* On force la position haute par défaut au lieu de translateY(20px) */
    transform: translateY(0); 
    transition: transform 0.5s ease;
}

/* 2. Modifie l'animation au survol */
.synergy-card:hover .synergy-content {
    /* Tu peux supprimer la ligne transform: translateY(0); ici car le texte y est déjà ! */
}

/* === SECTION AVANT / APRÈS === */
.transformation-section {
    padding: 100px 50px;
    background-color: #fdfbf7;
    color: #0f172a;
}

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

.transformation-badge {
    display: inline-block;
    color: #b89151;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 20px;
    border: 1px solid rgba(184, 145, 81, 0.3);
    padding: 6px 16px;
    border-radius: 50px;
}

.transformation-header h2 {
font-size: 2.5rem; margin-bottom: 10px;
}

.transformation-header p {
    color: #1a1a1a;
}

.transformation-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    max-width: 1300px;
    margin: 0 auto;
}

.ba-card h3 {
    font-size: 1.4rem;
    margin-bottom: 20px;
    color: #0f172a;
    text-align: center;
}

/* Le conteneur du slider */
.ba-container {
    position: relative;
    width: 100%;
    height: 450px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    /* Variable CSS qui sera mise à jour par le Javascript (50% par défaut) */
    --position: 50%; 
}

/* Les images */
.ba-image {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
}

.ba-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* C'est ici que la magie opère : on coupe l'image "Avant" en fonction de la variable --position */
.ba-image-before {
    clip-path: polygon(0 0, var(--position) 0, var(--position) 100%, 0 100%);
}

/* Étiquettes Avant / Après */
.ba-label {
    position: absolute;
    top: 20px;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    z-index: 5;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.label-before {
    left: 20px;
    background-color: #0f172a; /* Bleu nuit pour l'avant */
    color: white;
}

.label-after {
    right: 20px;
    background-color: #b89151; /* Doré pour l'après (Prestige) */
    color: white;
}

/* L'input invisible qui gère l'interaction */
.ba-slider {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    opacity: 0; /* Totalement invisible */
    cursor: ew-resize; /* Curseur flèche gauche-droite */
    z-index: 10; /* Au dessus de tout le reste */
    margin: 0;
}

/* La ligne blanche verticale de séparation */
.ba-slider-line {
    position: absolute;
    top: 0; left: var(--position);
    bottom: 0;
    width: 4px;
    background-color: white;
    transform: translateX(-50%);
    pointer-events: none; /* Empêche de bloquer le clic sur le curseur */
    z-index: 4;
}

/* Le bouton rond central avec les flèches */
.ba-slider-button {
    position: absolute;
    top: 50%; left: var(--position);
    transform: translate(-50%, -50%);
    width: 46px;
    height: 46px;
    background-color: #b89151; /* Doré */
    border: 3px solid white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    z-index: 4;
    pointer-events: none;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

.ba-slider-button svg { width: 24px; height: 24px; }

/* Responsive Mobile */
@media (max-width: 900px) {
    .transformation-grid { grid-template-columns: 1fr; }
    .ba-container { height: 350px; }
    .transformation-header h2 { font-size: 2.2rem; }
}

.network-header h2 {
font-size: 2.5rem; margin-bottom: 10px;
}

.synergy-header h2 {
font-size: 2.5rem; margin-bottom: 10px;
}

/* === SECTION NOTRE APPROCHE GLOBALE === */
.global-approach-section {
    padding: 100px 20px;
    background-color: #f8fafc; /* Gris extrêmement clair pour le fond */
    font-family: 'Inter', sans-serif;
}

.approach-container {
    max-width: 1100px; /* Légèrement moins large que la grille de 4 pour un rendu harmonieux */
    margin: 0 auto;
}

/* En-tête */
.approach-header {
    text-align: center;
    margin-bottom: 60px;
}

.approach-header h2 {
    font-size: 2.8rem;
    color: #0f172a; /* Bleu/gris très sombre */
    font-weight: 700;
    margin-bottom: 15px;
    letter-spacing: -1px;
}

.approach-header p {
    font-size: 1.15rem;
    color: #475569; /* Gris moyen */
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Conteneur de la grille */
.approach-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 colonnes égales */
    gap: 30px; /* Espace entre les cartes */
}

/* Les Cartes */
.approach-card {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 50px 30px; /* Espacement interne généreux */
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03); /* Ombre très légère */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.approach-card:hover {
    transform: translateY(-5px); /* Petit effet de soulèvement au survol */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.06);
}

/* Les pastilles numérotées */
.approach-number {
    width: 65px;
    height: 65px;
    background-color: #b89151; /* Bleu foncé de l'image */
    color: #ffffff;
    font-size: 1.5rem;
    font-weight: 700;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 30px auto;
}

/* Textes de la carte */
.approach-card h3 {
    font-size: 1.2rem;
    color: #0f172a;
    font-weight: 600;
    margin-bottom: 15px;
}

.approach-card p {
    font-size: 0.95rem;
    color: #475569;
    line-height: 1.6;
    margin: 0;
}

/* --- RESPONSIVE MOBILE & TABLETTE --- */
@media (max-width: 900px) {
    .approach-grid {
        grid-template-columns: 1fr; /* Passe sur 1 colonne pour smartphone/tablette */
        gap: 25px;
        max-width: 500px;
        margin: 0 auto;
    }
    .approach-header h2 {
        font-size: 2.2rem;
    }
}

/* === PRELOADER PRESTIGE === */
#prestige-preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #0f172a; /* Bleu nuit très profond */
    z-index: 999999; /* Au-dessus de tout le reste, y compris la navbar */
    display: flex;
    justify-content: center;
    align-items: center;
    /* La transition gère l'effet de disparition en douceur */
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.8s;
}

/* La classe que le Javascript va ajouter pour cacher le preloader */
#prestige-preloader.fade-out {
    opacity: 0;
    visibility: hidden;
}

.preloader-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
}

/* Le spinner circulaire élégant */
.preloader-spinner {
    width: 50px;
    height: 50px;
    border: 3px solid rgba(184, 145, 81, 0.15); /* Cercle de base semi-transparent */
    border-top: 3px solid #b89151; /* Le bord doré qui tourne */
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Le texte de la marque */
.preloader-text {
    font-family: 'Georgia', serif;
    color: #ffffff;
    font-size: 1.4rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    animation: pulseText 2s ease-in-out infinite; /* Effet de respiration */
}

.preloader-text span {
    color: #b89151; /* Doré */
    font-weight: bold;
}

/* La barre de chargement minimaliste (façon radar/scanner) */
.preloader-progress-bar {
    width: 160px;
    height: 2px;
    background-color: rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
}

.preloader-progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 40%;
    background-color: #b89151;
    animation: loadingBar 1.5s ease-in-out infinite;
}

/* --- ANIMATIONS CLÉS --- */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes pulseText {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

@keyframes loadingBar {
    0% { left: -50%; }
    100% { left: 100%; }
}

/* === SECTION SPLIT HERO === */
.split-hero {
    display: flex;
    min-height: 85vh;
    position: relative;
    overflow: hidden;
    background-color: #0b1120; /* Base bleue nuit */
    font-family: 'Inter', sans-serif;
}

/* --- COLONNE GAUCHE --- */
.split-left {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    padding: 80px 10%;
    z-index: 2;
}

/* L'effet de quadrillage discret (Généré en CSS pur !) */
.grid-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-size: 100px 100px;
    background-image: 
        linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    z-index: -1;
}

.split-content {
    max-width: 600px;
}

.split-content h1 {
    font-size: 2.5rem;
    color: #ffffff;
    line-height: 1.1;
    margin-bottom: 25px;
    letter-spacing: -1px;
}

.split-content h1 em {
    font-style: italic;
    color: #b89151; /* Ton doré */
    font-weight: 400;
}

.split-content p {
    font-size: 1.15rem;
    color: #cbd5e1; /* Gris clair */
    line-height: 1.6;
    margin-bottom: 40px;
    max-width: 500px;
}

/* Les Boutons */
.split-actions {
    display: flex;
    align-items: center;
    gap: 30px;
}

.btn-gold-pill {
    background-color: #e2e8f0; /* Blanc/Gris clair pour contraster comme Curology */
    color: #0b1120;
    font-weight: 600;
    padding: 16px 32px;
    border-radius: 50px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 15px;
    transition: all 0.3s ease;
}

.btn-gold-pill .arrow {
    background-color: #0f172a;
    color: white;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.8rem;
}

.btn-gold-pill:hover {
    background-color: #ffffff;
    transform: translateY(-3px);
}

.btn-demo {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #ffffff;
    text-decoration: none;
    font-weight: 500;
    transition: opacity 0.3s ease;
}

.play-circle {
    width: 45px;
    height: 45px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.play-circle svg {
    width: 18px;
    height: 18px;
    margin-left: 3px; /* Centre visuellement le triangle */
}

.btn-demo:hover { opacity: 0.8; }

/* --- COLONNE DROITE --- */
.split-right {
    flex: 1;
    position: relative;
    /* Dégradé doré premium */
    background: linear-gradient(135deg, #d4af37 0%, #b89151 50%, #9c773a 100%);
    display: flex;
    justify-content: center;
    align-items: flex-end; /* Colle l'image au bas de la div */
}

/* Ton image PNG Détourée */
.hero-model-img {
    height: 90%;
    max-height: 900px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(-10px 10px 20px rgba(0, 0, 0, 0.2)); /* Ajoute une ombre élégante derrière le PNG */
    z-index: 2;
}

/* --- LE BADGE CIRCULAIRE AU MILIEU --- */
.circular-badge {
    position: absolute;
    bottom: 50px;
    left: 50%; /* Positionne exactement à la coupure des deux blocs */
    transform: translateX(-50%);
    width: 140px;
    height: 140px;
    z-index: 10;
    background-color: #0b1120;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

/* Le texte qui tourne */
.spinning-text {
    position: absolute;
    width: 100%;
    height: 100%;
    animation: spinText 15s linear infinite;
}

.spinning-text text {
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: 2px;
    fill: #cbd5e1; /* Gris clair */
    text-transform: uppercase;
}

/* La flèche centrale */
.badge-arrow {
    width: 50px;
    height: 50px;
    background-color: #b89151; /* Doré */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    z-index: 2;
}

.badge-arrow svg { width: 24px; height: 24px; }

@keyframes spinText {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* --- RESPONSIVE MOBILE --- */
@media (max-width: 1024px) {
    .split-hero { flex-direction: column; min-height: auto; }
    .split-left { padding: 60px 30px; text-align: center; }
    .split-content h1 { font-size: 2.5rem; }
    .split-content p { margin: 0 auto 30px auto; }
    .split-actions { justify-content: center; flex-direction: column; gap: 20px; }
    
    .split-right { height: 500px; }
    .hero-model-img { height: 100%; }
    
    /* Sur mobile, on cache le badge ou on le remonte */
    .circular-badge { display: none; } 
}

/* --- GESTION DU MODE INVERSÉ (ZIGZAG) --- */
.split-hero.reverse {
    /* Sur ordinateur, on inverse visuellement sans toucher au code principal */
    flex-direction: row; 
}

/* On ajuste le dégradé de l'image pour qu'il aille dans l'autre sens */
.split-hero.reverse .split-right {
    background: linear-gradient(225deg, #d4af37 0%, #b89151 50%, #9c773a 100%);
}

@media (max-width: 1024px) {
    /* Sur mobile, on remet le texte en haut et l'image en bas pour la logique de lecture */
    .split-hero.reverse {
        flex-direction: column-reverse;
    }
}

/* --- LE BOUTON DEMANDER UN DEVIS (Premium) --- */
.btn-download {
    background-color: #a68867; /* Ton doré/marron élégant */
    color: white;
    padding: 12px 28px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 50px;
    text-decoration: none;
    position: relative;
    overflow: hidden; /* Indispensable pour l'effet de reflet */
    border: 1px solid rgba(255, 255, 255, 0.1);
    
    /* Ombre douce par défaut */
    box-shadow: 0 4px 15px rgba(166, 136, 103, 0.2); 
    transition: all 4s ease;
    
    /* Permet de garder le texte net pendant les animations */
    transform: translateZ(0); 
}

/* --- L'Effet au Survol (Hover) --- */
.btn-download:hover {
    transform: translateY(-2px); /* Le bouton se soulève légèrement */
    box-shadow: 0 8px 25px rgba(166, 136, 103, 0.4); /* L'ombre devient plus forte */
    background-color: #b39575; /* S'éclaircit un tout petit peu */
}

/* --- LE BOUTON DEMANDER UN DEVIS (Premium) --- */
.btn-download {
    background-color: #a68867; /* Ton doré/marron élégant */
    color: white;
    padding: 12px 28px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 50px;
    text-decoration: none;
    position: relative;
    overflow: hidden; /* Indispensable pour l'effet de reflet */
    border: 1px solid rgba(255, 255, 255, 0.1);
    
    /* Ombre douce par défaut */
    box-shadow: 0 4px 15px rgba(166, 136, 103, 0.2); 
    transition: all 0.3s ease;
    
    /* Permet de garder le texte net pendant les animations */
    transform: translateZ(0); 
}

/* --- L'Effet au Survol (Hover) --- */
.btn-download:hover {
    transform: translateY(-2px); /* Le bouton se soulève légèrement */
    box-shadow: 0 8px 25px rgba(166, 136, 103, 0.4); /* L'ombre devient plus forte */
    background-color: #b39575; /* S'éclaircit un tout petit peu */
}

/* --- L'Effet de Reflet Lumineux (Shine) --- */
.btn-download::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.3) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-25deg);
    
    /* 🛠️ MODIFICATION : L'animation dure maintenant 2 secondes au total */
    animation: shine 2s infinite; 
}

/* 🛠️ MODIFICATION : Ajustement de la vitesse de traversée */
@keyframes shine {
    0% { left: -100%; }
    
    /* Le reflet met 75% du temps (soit 1,5s) pour traverser, ce qui rend l'effet plus lent et majestueux */
    75% { left: 200%; } 
    
    /* Pause pendant les 25% restants (0,5s) avant de recommencer la boucle */
    100% { left: 200%; } 
}

/* --- RESPONSIVE MOBILE (SECTION SPLIT HERO) --- */
@media (max-width: 1024px) {
    .split-hero { flex-direction: column; min-height: auto; }
    .split-left { padding: 60px 30px; text-align: center; }
    
    /* Optionnel : On réduit aussi un poil le titre sur tablette/mobile si besoin */
    .split-content h1 { font-size: 2.5rem; } 
    
    .split-content p { 
        margin: 0 auto 30px auto; 
        font-size: 0.95rem; /* 🛠️ CORRECTIF : On passe le texte de 1.15rem à 0.95rem */
        line-height: 1.5;
    }
    
    .split-actions { justify-content: center; flex-direction: column; gap: 20px; }
    
    .split-right { 
        height: 350px; /* 🛠️ CORRECTIF : On réduit la hauteur de l'image de 500px à 350px */
    }
    
    .hero-model-img { height: 100%; }
    
    /* Sur mobile, on cache le badge ou on le remonte */
    .circular-badge { display: none; } 
}
/* --- HEADER ACTIONS (Regroupe le téléphone et le bouton) --- */
.header-actions {
    display: flex;
    align-items: center;
    gap: 15px; /* L'espace entre le téléphone et le bouton */
}

/* --- LE WIDGET TÉLÉPHONE --- */
.header-phone {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    /* Padding asymétrique : plus petit à gauche pour coller le drapeau au bord */
    padding: 6px 20px 6px 8px; 
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.header-phone:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

/* Le petit cercle du drapeau */
.phone-flag {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    background: #ffffff;
    flex-shrink: 0;
}

.phone-flag img {
    width: 150%; /* On zoome légèrement pour bien remplir le cercle */
    height: 100%;
    object-fit: cover;
}

/* Les textes */
.phone-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.phone-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 2px;
    line-height: 1;
}

.phone-number {
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    line-height: 1;
}

/* --- ADAPTATION AU SCROLL (Quand le menu devient blanc) --- */
.navbar.scrolled .header-phone {
    background: #f8fafc;
    border-color: #e2e8f0;
}

.navbar.scrolled .header-phone:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

.navbar.scrolled .phone-label {
    color: #64748b;
}

.navbar.scrolled .phone-number {
    color: #0f172a;
}

.navbar.scrolled .phone-flag {
    border-color: #e2e8f0;
}

/* --- RESPONSIVE MOBILE --- */
@media (max-width: 768px) {
    .header-phone {
        display: none; /* On masque le numéro sur smartphone pour ne pas écraser le logo et le bouton devis */
    }
}