body { margin: 0; font-family: Arial, sans-serif; color: #003049 }
header { display: flex; justify-content: space-between; align-items: center; padding: 15px 30px; background: white; box-shadow: 0 2px 4px rgba(0,0,0,.1) }
nav a { margin-left: 20px; text-decoration: none; color: #003049 }
.btn, .cta { background: #003049; color: white; padding: 10px 18px; text-decoration: none; border-radius: 6px }
.hero { position: relative; height: 65vh; overflow: hidden }
.hero img { width: 100%; height: 100%; object-fit: cover }
.overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: white; background: rgba(0,0,0,.5); padding: 20px 30px; border-radius: 10px }
.section { padding: 60px 20px; text-align: center }
.contact { background: #f2f7fb }
footer { text-align: center; padding: 20px; background: #003049; color: white }
/* ============================= */
/* RESPONSIVE MOBILE OPTIMISATION */
/* ============================= */

* {
    box-sizing: border-box;
}

/* Empêche les débordements horizontaux */
html, body {
    overflow-x: hidden;
}

/* Images toujours adaptatives */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* -------- VERSION MOBILE -------- */
@media (max-width: 768px) {

    /* Header passe en colonne */
    header {
        flex-direction: column;
        align-items: center;
        padding: 15px;
    }

    nav {
        margin-top: 10px;
    }

    nav a {
        display: block;
        margin: 10px 0;
    }

    /* Hero adapté petit écran */
    .hero {
        height: 60vh;
    }

    .overlay {
        width: 90%;
        padding: 15px;
    }

    /* Sections plus compactes */
    .section {
        padding: 40px 15px;
    }

    /* Boutons plus larges au tactile */
    .btn, .cta {
        display: inline-block;
        padding: 12px 20px;
    }
}