/* =========================================================
   AZZERA SERVICES+ | CHARTE GRAPHIQUE OFFICIELLE UNIFIÉE
   ========================================================= */

:root {
    --green-azzera: #9cd874; 
    --gray-main: #4c4c4c;
    --gray-bg: #f9f9f9;
    --white: #ffffff;
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Inter', sans-serif; color: var(--gray-main); background: var(--white); line-height: 1.6; }
.container { max-width: 1000px; margin: 0 auto; padding: 0 40px; }

/* --- TOP-BAR CORPORATE --- */
.topbar-corporate { background: var(--gray-main); padding: 8px 0; }
.topbar-links { display: flex; justify-content: center; gap: 40px; list-style: none; }
.topbar-links a { 
    color: #aaa; 
    font-size: 10px; 
    text-transform: uppercase; 
    text-decoration: none; 
    letter-spacing: 1px; 
    font-weight: 600;
    transition: var(--transition); 
}
.topbar-links a:hover, .topbar-links a.active { color: var(--green-azzera); }

/* --- HEADER UNIFIÉ (Services+) --- */
.main-header {
    background: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(20px);
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    height: 70px !important; /* HAUTEUR FIXE POUR ALIGNEMENT */
    display: flex;
    align-items: center;
}

.header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Ajustement logo pour qu'il ne dépasse pas */
.header-flex img {
    max-height: 100px !important;
    width: auto;
}
/* Alignement parfait du Logo PNG et du Texte H1 (Style Protect) */
.logo a { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.logo h1 { font-family: 'Montserrat', sans-serif; font-size: 22px; font-weight: 900; letter-spacing: -0.5px; }
.logo span { color: var(--green-azzera); }

.main-nav ul { display: flex; list-style: none; gap: 35px; align-items: center; }
.main-nav a { text-decoration: none; color: var(--gray-main); font-weight: 600; font-size: 14px; transition: var(--transition); }
.main-nav a:hover, .main-nav a.active { color: var(--green-azzera); }

/* --- BOUTONS --- */
.btn-primary-green { 
    background: var(--green-azzera); 
    color: var(--gray-main); 
    padding: 16px 35px; 
    border-radius: 40px; 
    text-decoration: none; 
    font-weight: 700; 
    transition: var(--transition); 
    display: inline-block; 
}
.btn-primary-green:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(156, 216, 116, 0.2); }

/* --- HERO SECTION --- */
.hero-section { padding: 120px 0; text-align: center; background: var(--white); }
.hero-title { font-family: 'Montserrat', sans-serif; font-size: 44px; font-weight: 900; margin-bottom: 20px; letter-spacing: -1px; }
.hero-subtitle { color: #86868b; font-size: 18px; max-width: 650px; margin: 0 auto 40px auto; line-height: 1.5; }

/* --- TITRES DE SECTIONS --- */
.modern-heading { text-align: center; margin-bottom: 50px; }
.heading-subtitle { display: block; color: var(--green-azzera); font-weight: 700; text-transform: uppercase; letter-spacing: 2px; font-size: 11px; margin-bottom: 15px; }
.section-heading { font-family: 'Montserrat', sans-serif; font-size: 2rem; color: var(--gray-main); }

/* --- GRILLE DES PRESTATIONS (2 Colonnes) --- */
.services-section { padding: 80px 0; background: var(--gray-bg); }
.services-grid-large { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; }
.services-grid-large .card { 
    background: var(--white); padding: 50px; border-radius: 16px; 
    text-align: left; border: 1px solid #e0e0e0; transition: var(--transition); 
}
.services-grid-large .card i { font-size: 2.5rem; color: var(--green-azzera); margin-bottom: 25px; display: block; }
.services-grid-large .card h4 { font-family: 'Montserrat', sans-serif; font-size: 1.3rem; margin-bottom: 15px; color: var(--gray-main); }
.services-grid-large .card p { font-size: 14px; color: #666; line-height: 1.7; margin-bottom: 20px; }
.services-grid-large .card:hover { border-color: var(--green-azzera); transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0,0,0,0.05); }
.link-arrow { color: var(--green-azzera); text-decoration: none; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px; }

/* --- BLOCS LINEAIRES ALTERNES (Engagements) --- */
.engagement-section { padding: 80px 0; background: var(--white); }
.engagement-block { display: flex; align-items: center; gap: 60px; margin-bottom: 80px; }
.engagement-block.reverse { flex-direction: row-reverse; }
.engagement-content { flex: 1; }
.engagement-content i { color: var(--green-azzera); font-size: 3rem; margin-bottom: 20px; display: block; }
.engagement-content h3 { font-family: 'Montserrat', sans-serif; font-size: 1.8rem; margin-bottom: 15px; color: var(--gray-main); }
.engagement-content p { line-height: 1.8; color: #666; }
.engagement-visual { flex: 1; height: 300px; background: #eaeaec; border-radius: 20px; display: flex; align-items: center; justify-content: center; color: #999; }

/* --- INTERFACE FORMULAIRE PRESTIGE --- */
.contact-card-container { max-width: 650px; margin: 0 auto; background: var(--gray-bg); padding: 50px; border-radius: 20px; border: 1px solid #e0e0e0; }
.form-group { margin-bottom: 25px; }
.form-group label { display: block; font-size: 12px; font-weight: 600; text-transform: uppercase; margin-bottom: 8px; letter-spacing: 0.5px; color: var(--gray-main); }
.form-control { 
    width: 100%; padding: 14px; border: 1px solid #ccc; border-radius: 8px; 
    font-family: 'Inter', sans-serif; font-size: 14px; background: var(--white); 
    color: var(--gray-main); transition: var(--transition); 
}
.form-control:focus { border-color: var(--green-azzera); outline: none; box-shadow: 0 0 0 3px rgba(156, 216, 116, 0.15); }

select.form-control { 
    cursor: pointer; appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234c4c4c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 16px center; background-size: 14px; padding-right: 45px;
}

/* --- FOOTER COMPLIANCE INSTITUTIONNEL --- */
.legal-compliance { background: #1d1d1f; color: #fff; padding: 60px 0 40px 0; text-align: center; }
.official-badge-container { display: flex; justify-content: center; margin-bottom: 40px; }
.official-badge { 
    background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.1); 
    border-radius: 16px; padding: 25px 30px; display: flex; align-items: center; gap: 25px; 
    max-width: 850px; text-align: left; 
}
.badge-icon { font-size: 40px; color: var(--green-azzera); }
.badge-title { color: var(--white); font-weight: 700; font-size: 14px; margin-bottom: 8px; text-transform: uppercase; }
.badge-numbers { color: #e5e5e7; font-size: 14px; margin-bottom: 5px; }
.badge-numbers strong { color: var(--green-azzera); }
.compliance-inner p { color: #6e6e73; font-size: 12px; margin-top: 20px; }

/* --- RESPONSIVE DESIGN --- */
@media (max-width: 768px) {
    .services-grid-large { grid-template-columns: 1fr; }
    .engagement-block, .engagement-block.reverse { flex-direction: column; text-align: left; gap: 30px; }
    .engagement-visual { width: 100%; height: 200px; }
    .header-flex { flex-direction: column; gap: 15px; }
}
/* =========================================================
   ANIMATIONS D'OUVERTURE DE PAGE (Fade-in & Slide-up)
   ========================================================= */

/* Définition de l'animation fluide */
@keyframes smoothReveal {
    0% {
        opacity: 0;
        transform: translateY(25px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Application au contenu principal pour une transition douce au clic */
body {
    animation: smoothReveal 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* Effet de cascade très subtil sur les cartes de services et d'engagements */
.card, .engagement-block, .contact-card-container {
    opacity: 0;
    animation: smoothReveal 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    animation-delay: 0.2s; /* Laisse le header apparaître d'abord */
}

/* On retarde légèrement la deuxième colonne/ligne pour l'élégance */
.card:nth-child(2), .engagement-block.reverse { animation-delay: 0.3s; }
.card:nth-child(3) { animation-delay: 0.4s; }
.card:nth-child(4) { animation-delay: 0.5s; }
.card:nth-child(5) { animation-delay: 0.6s; }

/* --- EFFET HOVER GREEN AZZERA POUR TOPBAR --- */
.topbar-links a {
    transition: all 0.3s ease !important;
}

.topbar-links a:hover {
    /* Utilise la couleur exacte de ton bleu Azzera ici */
    color: #9cd874 !important; 
    /* L'effet de lumière (glow) devient de la même couleur que le texte */
    text-shadow: 0 0 20px rgba(0, 150, 255, 0.6); 
}