:root { --bg:#f4fff4; --text:#2e4d2f; --brand:#267e2d; --brand2:#2d9b34; --card:#fff; --line:#d0e5d0; }
*{box-sizing:border-box} body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;background:var(--bg);color:var(--text);margin:0}
.wrap{max-width:980px;margin:auto;padding:24px}
.btn{display:inline-block;background:var(--brand);color:#fff;text-decoration:none;padding:12px 16px;border-radius:10px;font-weight:700}
.btn:hover{background:var(--brand2)}.hero {
  margin: 20px 0;
}

.hero img {
  width: 100%;
  height: auto;
  max-height: 500px;       /* Limite la hauteur sur grands écrans */
  object-fit: cover;       /* Remplit le cadre sans déformation */
  object-position: center; /* Centre l’image */
  border-radius: 10px;     /* Optionnel : arrondis */
  display: block;
}
/* --- Mobile fix pack --- */

/* Empêche les débordements horizontaux */
html, body { overflow-x: hidden; }
* { box-sizing: border-box; }
.wrap { max-width: 980px; margin: 0 auto; padding: 16px; }

/* Titres et textes en tailles fluides */
h1 { font-size: clamp(1.4rem, 4vw, 2.2rem); line-height: 1.25; margin: 14px 0; }
p, li { font-size: clamp(0.98rem, 2.6vw, 1.05rem); line-height: 1.6; }

/* Nav responsive (passe en pile sur mobile) */
.main-nav { gap: 10px; }
.main-nav a { padding: 8px 10px; }
@media (max-width: 640px){
  .main-nav { justify-content: flex-start; }
  .main-nav .logo { flex-basis: 100%; margin-right: 0; }
}

/* Boutons : grands tap-targets */
.btn { display:inline-flex; align-items:center; padding: 14px 18px; border-radius: 10px; }

/* Images toujours fluides */
img { max-width: 100%; height: auto; display: block; }
.hero { margin: 16px 0; }
.hero img { width: 100%; object-fit: cover; object-position: center; border-radius: 10px; }
@media (max-width: 768px){ .hero img { max-height: 300px; } }

/* Grilles : 1 colonne en mobile, 2+ en desktop */
.grid { display:grid; gap:16px; grid-template-columns: 1fr; }
@media (min-width: 860px){ .grid { grid-template-columns: 2fr 1fr; } }

/* Evite les mots trop longs qui cassent la mise en page */
.wrap, p, li, a, h1, h2, h3 { word-wrap: break-word; overflow-wrap: anywhere; }

/* Espaces respirants en bas de page */
footer { margin-top: 28px; }