/* CLINIC_M/1/static/css/home.css */

/* CLINIC_M/1/static/css/home.css */

/* --- HERO SECTION : CADRE BLEU TRANSPARENT --- */
.hero-home {
    position: relative;
    height: 85vh;
    min-height: 600px;
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center; /* On centre tout */
}

.hero-bg-image {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center top;
    z-index: 1;
}

.hero-container {
    position: relative;
    z-index: 3;
    width: 90%;
    max-width: 1200px;
    display: flex;
    justify-content: center; /* Centre le cadre horizontalement */
}

/* LE CADRE BLEU TRANSPARENT */
.hero-content {
    /* Bleu primaire avec transparence (0.75) pour voir derrière */
    background-color: rgba(0, 86, 179, 0.75);
    
    /* Optionnel : un léger flou pour améliorer la lecture du texte si l'image est complexe */
    backdrop-filter: blur(3px); 
    -webkit-backdrop-filter: blur(3px);

    padding: 60px 50px;
    border-radius: 15px; /* Coins arrondis */
    
    /* Fine bordure blanche pour définir le cadre */
    border: 1px solid rgba(255, 255, 255, 0.3);
    
    max-width: 800px;
    text-align: center;
    color: #ffffff;
    
    /* Ombre portée pour détacher le cadre du fond */
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
}

.hero-content h1 {
    font-family: 'Playfair Display', serif;
    font-size: 3.8rem; 
    line-height: 1.2;
    margin-bottom: 25px;
    font-weight: 700;
    color: #ffffff;
}

.hero-content p {
    font-size: 1.3rem;
    margin-bottom: 40px;
    font-weight: 400;
    color: #ffffff;
}

/* BOUTONS */
.hero-btns { 
    display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; 
}

.btn-white-filled {
    background-color: #ffffff; 
    color: var(--primary); 
    padding: 15px 40px;
    border-radius: 50px;
    text-decoration: none; 
    font-weight: 700;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.btn-white-filled:hover { background-color: #f0f0f0; transform: translateY(-3px); }

.btn-white-outline {
    background: transparent;
    color: #ffffff;
    border: 2px solid #ffffff;
    padding: 13px 38px;
    border-radius: 50px;
    text-decoration: none; 
    font-weight: 600;
    transition: all 0.3s ease;
}
.btn-white-outline:hover { background: #ffffff; color: var(--primary); }

/* --- FEATURES FLOATING BOXES (Sous la bannière) --- */
.features-floating {
    background-color: #f8f9fa; 
    padding-top: 80px;
    padding-bottom: 80px;
    position: relative;
    z-index: 2;
}

.floating-wrapper {
    display: flex; gap: 30px; justify-content: center; flex-wrap: wrap; 
}

.feature-box {
    background: var(--white); 
    border-radius: 12px; 
    flex: 1; min-width: 300px; 
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    transition: transform 0.3s, box-shadow 0.3s;
    overflow: hidden; 
}
.feature-box:hover { transform: translateY(-5px); box-shadow: 0 15px 40px rgba(0,0,0,0.1); }

.box-image { width: 100%; height: 200px; overflow: hidden; }
.box-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.feature-box:hover .box-image img { transform: scale(1.05); }

.box-content { padding: 30px; text-align: left; }
.box-content h3 { color: var(--primary); margin-bottom: 10px; font-size: 1.3rem; }
.box-content p { font-size: 0.95rem; margin-bottom: 20px; color: var(--text-light); }

.box-link {
    color: var(--primary); font-weight: 700; font-size: 0.9rem;
    text-transform: uppercase; letter-spacing: 0.5px;
}
.box-link:hover { color: var(--accent-blue); padding-left: 5px; }

.feature-box.highlight-box { border-bottom: 4px solid var(--primary); }

/* --- WHY CHOOSE US --- */
.why-choose-us { padding: 80px 0; background: var(--white); }
.split-layout { display: flex; align-items: center; gap: 60px; }
.text-side, .image-side { flex: 1; }
.why-choose-us h2 { font-size: 2.5rem; margin-bottom: 20px; color: var(--primary); }
.lead-text { font-size: 1.1rem; color: var(--text-dark); font-weight: 600; margin-bottom: 20px; }
.benefits-list { list-style: none; margin-top: 30px; }
.benefits-list li { margin-bottom: 15px; font-weight: 600; color: var(--text-dark); display: flex; align-items: center; }
.image-side img { width: 100%; border-radius: 20px; box-shadow: 0 15px 40px rgba(0,0,0,0.1); }

/* --- MOBILE --- */
@media screen and (max-width: 992px) {
    .hero-content {
        width: 95%;
        padding: 40px 20px;
        /* Sur mobile, on garde la transparence ou on opacifie légèrement selon le goût */
        background-color: rgba(0, 86, 179, 0.85);
    }
    .hero-content h1 { font-size: 2.2rem; }
    .hero-btns { flex-direction: column; width: 100%; }
    .btn-white-filled, .btn-white-outline { width: 100%; }
    .split-layout { flex-direction: column; }
}