body { font-family: Arial, sans-serif; margin: 0; padding: 0; background: #fafafa;
      font-size: 18px;}


/* Pour les téléphones (moins de 768px de large) */
@media (max-width: 768px) {
    body {
        font-size: 16px;
        padding: 10px;
    }

nav {
        flex-direction: column; /* le menu devient vertical */
    }
}
header { display: flex; justify-content: space-between; align-items: center; background: #003366; padding: 10px 20px; overflow: hidden; position: relative;
 }

header img { height: 60px; }
nav a { color: white; margin: 0 10px; text-decoration: none; font-weight: bold; }
nav a:hover { text-decoration: underline; }
.hero { background: #005599; color: white; padding: 50px; text-align: center; }
.btn { background: orange; color: white; padding: 10px 20px; text-decoration: none; border-radius: 5px; }
.services { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; padding: 20px; }
.service { background: white; padding: 15px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); text-align: center; transition: transform 0.3s ease; }
.service:hover { transform: translateY(-5px); }
.service img { width: 100%; height: 180px; object-fit: cover; border-radius: 8px; }
footer { background: #003366; color: white; padding: 10px; text-align: center; }
.contact-form { max-width: 400px; margin: auto; display: flex; flex-direction: column; }
.contact-form input, .contact-form textarea { margin-bottom: 10px; padding: 10px; border: 1px solid #ccc; border-radius: 5px; }
.contact-form button { background: #003366; color: white; padding: 10px; border: none; border-radius: 5px; cursor: pointer; }
.contact-form button:hover { background: orange; }
.section {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.section div {
    flex: 1 1 300px; /* au minimum 300px, sinon ça prend la largeur dispo */
}