/* --- Réinitialisation --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
}

body {
    background-color: #ffffff; /* Fond blanc comme sur la maquette */
    color: #1a1a1a;
}

/* --- NAVBAR ADAPTÉE POUR FOND CLAIR --- */
.navbar {
    position: absolute;
    top: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px 50px;
    z-index: 10;
    position: sticky; 
    top: 0; 
    z-index: 9999; 
    background-color: #ffffff;
}

/* Variante de la navbar pour le texte foncé */
.navbar-light .logo img {
    height: 45px;
}

.navbar-light .nav-links {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.05); /* Fond gris très clair au lieu de blanc transparent */
    backdrop-filter: blur(12px); 
    padding: 10px 25px;
    border-radius: 50px;
}

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

.navbar-light .nav-links a {
    color: #333333;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
}

.btn-download {
    background-color: #b59f7c; /* Couleur marron/dorée de ton bouton précédent */
    color: #ffffff;
    padding: 12px 24px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 500;
}

/* --- 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;
    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;
    gap: 20px;
    position: relative;
}

/* Design des cartes en verre dépoli (Glassmorphism) */
.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);
    
    /* 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;
}

/* === 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 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; }
}

/* 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: 3.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;
    }
}