@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap');

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

html, body {
    width: 100%;
    min-height: 100%;
}

body {
    font-family: 'Montserrat', sans-serif;
    color: white;
    background-color: #004d43;
    
    /* CONFIGURATION BACKGROUND RESPONSIVE ET STATIC */
    background-image: url('../Image/Background site.png'); 
    background-attachment: fixed; /* L'image ne bouge pas au scroll */
    background-position: center center;
    background-size: cover; /* Remplit l'écran sans déformer */
    background-repeat: no-repeat;
    
    overflow-x: hidden;
}

/* --- SPLASH SCREEN --- */
#splash {
    position: fixed; 
    inset: 0; 
    background: #004d43;
    display: flex; 
    justify-content: center; 
    align-items: center; 
    z-index: 9999;
}
.zoom-out-blur { width: 40%; max-width: 300px; animation: zoom 2s forwards; }

@keyframes zoom {
    0% { transform: scale(1.5); filter: blur(15px); opacity: 0; }
    100% { transform: scale(1); filter: blur(0px); opacity: 1; }
}
.fade-out { opacity: 0; transition: 0.8s; pointer-events: none; }

/* --- STRUCTURE --- */
.hidden { opacity: 0; visibility: hidden; }
.fade-in { opacity: 1; visibility: visible; transition: opacity 1s ease-in-out; }

.large-container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

/* --- HEADER --- */
.hero-header { 
    padding: 40px 0; 
}
.main-logo {
    width: 100%; 
    max-width: 700px;
    margin: 0 auto;
    height: auto;
    display: block;
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.4));
}

/* --- SECTIONS (Cartes avec flou pour voir le fond) --- */
.mission-card, .service-card {
    background: rgba(0, 0, 0, 0.7); /* Transparence pour voir l'image derrière */
    backdrop-filter: blur(12px);    /* Effet givré moderne */
    -webkit-backdrop-filter: blur(12px);
    padding: 40px;
    border-radius: 25px;
    border: 1px solid rgba(212, 175, 55, 0.3);
    box-shadow: 0 20px 40px rgba(0,0,0,0.5);
    margin-bottom: 40px;
}

.mission-section { text-align: center; margin-top: 20px; }
.slogan { margin-top: 20px; font-weight: 600; color: #d4af37; letter-spacing: 1px; }

/* --- CARTES SERVICES --- */
.service-card {
    display: flex;
    align-items: center;
    gap: 40px;
}
.service-card.reverse { flex-direction: row-reverse; margin-bottom: 80px; }
.card-img, .card-info { flex: 1; }
.card-img img {
    width: 100%;
    border-radius: 15px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
}

/* --- TYPO & BOUTONS --- */
h2 { font-size: 2.2rem; color: #d4af37; margin-bottom: 15px; }
p { font-size: 1.1rem; line-height: 1.6; }
strong { color: #d4af37; }

.btn {
    display: inline-block;
    padding: 14px 35px;
    margin-top: 20px;
    border-radius: 8px;
    text-decoration: none;
    color: #000;
    font-weight: 600;
    background: #d4af37;
    transition: 0.3s ease;
}
.btn:hover { background: #fff; transform: translateY(-2px); }

/* --- FOOTER --- */
.footer-overlay {
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    padding: 30px 0;
    text-align: center;
    border-top: 2px solid #d4af37;
}
.footer-text { font-size: 0.95rem; margin-bottom: 5px; }
.gold-text { color: #d4af37; font-weight: 600; }

/* --- MOBILE RESPONSIVE --- */
@media (max-width: 900px) {
    /* Très important : iOS gère mal le background-attachment: fixed */
    body { 
        background-attachment: scroll; 
    }

    .hero-header { padding: 20px 0; }
    .main-logo { max-width: 90%; }

    .service-card, .service-card.reverse { 
        flex-direction: column; 
        padding: 25px; 
        text-align: center;
    }
    
    h2 { font-size: 1.6rem; }
    .card-img { order: -1; } /* Image toujours au-dessus du texte sur mobile */
}