:root{
  --green: #4e6b33;
  --light: #eaf5e0;
  --bg: #f3f9f0;
  --text: #243216;
  --radius: 12px;
  --maxw: 1100px;
}

*{
box-sizing:border-box
}

body{
margin:0;
font-family:'Arial', sans-serif;
background:var(--light);
color:var(--text);
-webkit-font-smoothing:antialiased;
}

/* HERO */

.hero{
background:
linear-gradient(rgba(120,150,90,0.25), rgba(120,150,90,0.25)),
url("/images/fond-body.jpg") center/cover no-repeat;
padding:50px 20px; /* moins haut = plus moderne */
}

/* Bloc blanc premium */

.brand{
max-width:var(--maxw);
margin:auto;
background:rgba(255,255,255,0.68); /* transparence parfaite */
padding:32px;
border-radius:16px;
backdrop-filter: blur(6px); /* effet verre dépoli */
box-shadow:0 10px 30px rgba(0,0,0,0.06);
}

/* Typo Header */

header.hero h1{
margin:0;
font-size:28px;
letter-spacing:1px;
color:var(--green);
}

header.hero h2{
margin:6px 0 0;
font-size:15px;
color:var(--text);
font-weight:normal;
}

header.hero p{
margin:8px 0 0;
font-size:14px;
}

/* MENU */

nav.mainnav{
display:flex;
justify-content:center;
background:var(--green);
padding:14px 10px;
gap:22px;
flex-wrap:wrap;
box-shadow:0 4px 10px rgba(0,0,0,0.05);
}

nav.mainnav a{
color:white;
text-decoration:none;
font-weight:700;
padding:8px 14px;
border-radius:8px;
transition:0.2s;
}

nav.mainnav a:hover{
background:rgba(255,255,255,0.15);
}

/* CONTENU */

.container{
max-width:var(--maxw);
margin:32px auto;
padding:0 18px;
}

.grid{
display:grid;
grid-template-columns:1fr 360px;
gap:28px;
align-items:start;
}

.card{
background:white;
padding:22px;
border-radius:14px;
box-shadow:0 10px 24px rgba(34,50,30,0.05);
}

.left p{
line-height:1.7;
color:var(--text);
}

/* Image aside */

.aside img{
width:100%;
border-radius:12px;
display:block;
margin-bottom:14px;
}

/* Labels */

.labels{
display:grid;
gap:10px;
color:var(--green);
font-style:italic;
}

/* Footer */

footer{
background:white;
padding:22px;
text-align:center;
margin-top:40px;
border-top:1px solid rgba(0,0,0,0.04);
}

/* 📱 MOBILE OPTIMISATION ULTRA IMPORTANTE */

@media (max-width:900px){

.hero{
padding:38px 16px;
}

.brand{
text-align:center;
padding:24px;
}

header.hero h1{
font-size:22px;
}

.grid{
grid-template-columns:1fr;
}

nav.mainnav{
gap:12px;
}

nav.mainnav a{
padding:6px 10px;
font-size:14px;
}

}