body { font-family: sans-serif; margin: 0; line-height: 1.6; color: #333; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
nav { background: #fff; border-bottom: 2px solid #003366; padding: 15px 0; }
nav .container { display: flex; justify-content: space-between; align-items: center; }
nav ul { list-style: none; display: flex; gap: 20px; margin: 0; padding: 0; }
nav a { text-decoration: none; color: #003366; font-weight: bold; }
.main-logo { height: 60px; }
.hero { background: #f4f4f4; padding: 60px 0; text-align: center; color: #003366; }
.content-section { padding: 40px 0; }
.grid { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; }
.card { flex: 1; min-width: 300px; border: 1px solid #ddd; padding: 20px; border-radius: 8px; background: #fff; }
.card.highlight { border: 2px solid #003366; }
.contact-flex { display: flex; flex-wrap: wrap; gap: 40px; margin-top: 20px; }
.contact-profile { flex: 1; text-align: center; }
.profile-img { width: 180px; height: 180px; border-radius: 50%; border: 5px solid #003366; object-fit: cover; }
.contact-form { flex: 2; background: #f9f9f9; padding: 30px; border-radius: 8px; }
form input, form textarea { width: 100%; padding: 12px; margin-bottom: 15px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }
.btn { background: #003366; color: #fff; padding: 12px 30px; border: none; cursor: pointer; font-weight: bold; text-transform: uppercase; }
.success { color: green; font-weight: bold; margin-bottom: 20px; text-align: center; }
footer { background: #333; color: #fff; text-align: center; padding: 30px 0; margin-top: 40px; }

.hero-residentiel {
    position: relative;
    width: 100%;
    height: 350px; /* On réduit la hauteur pour l'effet horizontal */
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), 
                url('image-fond.jpg');
    background-size: cover;
    background-position: center 30%; /* Pour bien voir les mains et le tableau */
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-align: center;
    overflow: hidden;
}

.hero-text h1 {
    font-size: 2.2rem;
    text-transform: uppercase;
    margin-bottom: 10px;
    padding: 0 20px;
}

/* Ajustements spécifiques pour les écrans de téléphones */
@media (max-width: 768px) {
    
    /* On force l'en-tête à aligner ses éléments verticalement */
    header, nav, [class*="header"], [class*="nav"] {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        height: auto !important;
        padding: 10px 0 !important;
    }

    /* On force le logo (la première image du haut) à rétrécir pour laisser de la place */
    header img, [class*="logo"] {
        max-width: 160px !important;
        height: auto !important;
        margin-bottom: 15px !important;
    }

    /* On aligne les liens du menu proprement côte à côte en dessous du logo */
    nav ul, [class*="menu"], [class*="nav"] ul {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 15px !important;
        padding: 0 !important;
        margin: 5px 0 !important;
    }

    /* On ajuste le texte du bandeau pour qu'il ne déborde pas sur les côtés */
    .hero-residentiel h1 {
        font-size: 1.5rem !important;
        padding: 0 15px !important;
        line-height: 1.3 !important;
    }
    
    .hero-residentiel p {
        font-size: 1rem !important;
        padding: 0 15px !important;
    }
}

@media (max-width: 768px) {
    .hero-residentiel h1 {
        font-size: 1.6rem; /* On réduit légèrement la taille du texte sur mobile */
        padding: 0 15px;   /* On ajoute des marges internes à gauche et à droite */
    }
}

.btn-telephone {
    display: inline-block;
    background-color: #0056b3; /* Une couleur bleue pro (ajuste selon ta charte graphique) */
    color: #ffffff !important; /* Force le texte en blanc pour le contraste */
    padding: 8px 15px;         /* L'espace interne pour créer le rectangle du bouton */
    margin-left: 5px;
    border-radius: 5px;        /* Arrondit légèrement les angles */
    text-decoration: none;     /* Supprime le soulignement */
    font-weight: bold;
    transition: background-color 0.2s ease; /* Petit effet fluide au survol */
}

/* Effet visuel quand on passe la souris dessus (sur PC) */
.btn-telephone:hover {
    background-color: #004085; /* Le bleu devient un peu plus foncé */
    color: #ffffff !important;
}

/* Ajustement pour le mobile pour qu'il soit plus facile à cliquer avec le pouce */
@media (max-width: 768px) {
    .btn-telephone {
        display: block;        /* Prend toute la largeur disponible sur mobile */
        margin: 10px auto 0 auto; /* Le centre proprement sous le mot "Téléphone :" */
        text-align: center;
        max-width: 200px;      /* On évite qu'il soit trop géant sur grand téléphone */
        padding: 12px 20px;    /* Un poil plus grand pour les gros doigts */
    }
}