:root{
  --vert-fonce:#0e2f2c;
  --vert:#1d4a44;
  --or:#c9a24b;
  --rouge:#b23b3b;
  --creme:#faf6ee;
  --texte:#2a2420;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{
  font-family:Arial,Helvetica,sans-serif;
  background:var(--creme);
  color:var(--texte);
  line-height:1.6;
}
a{color:var(--vert);}
h1,h2,h3{font-family:'Georgia','Times New Roman',serif;}

header{
  background:linear-gradient(135deg,var(--vert-fonce),var(--vert));
  color:var(--creme);
  text-align:center;
  padding:40px 20px 50px;
  position:relative;
  overflow:hidden;
}
header .logo{
  max-width:150px;
  width:35%;
  filter:brightness(0) invert(1);
  margin-bottom:18px;
}
header .flocon{
  position:absolute;
  color:rgba(255,255,255,.25);
  font-size:1.4rem;
  user-select:none;
}
header h1{
  font-size:clamp(1.6rem,4vw,2.4rem);
  font-weight:normal;
  letter-spacing:1px;
  margin-bottom:10px;
}
header p.sous-titre{
  font-size:1.05rem;
  max-width:620px;
  margin:0 auto;
  opacity:.95;
}

main{
  max-width:980px;
  margin:0 auto;
  padding:40px 20px 60px;
}

.intro{
  text-align:center;
  max-width:700px;
  margin:0 auto 50px;
  font-size:1.1rem;
}
.intro h2{
  font-family:'Georgia',serif;
  font-size:1.5rem;
  color:var(--vert-fonce);
  margin-bottom:14px;
  font-style:italic;
}

.section-titre{
  text-align:center;
  margin:0 0 36px;
}
.section-titre h2{
  font-size:clamp(1.4rem,3vw,2rem);
  color:var(--vert-fonce);
  display:inline-block;
  position:relative;
  padding-bottom:12px;
}
.section-titre h2::after{
  content:"";
  position:absolute;
  bottom:0;left:50%;
  transform:translateX(-50%);
  width:70px;height:2px;
  background:var(--or);
}

.evenements{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:34px;
  margin-bottom:60px;
}

.carte{
  background:#fff;
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 8px 24px rgba(14,47,44,.12);
  display:flex;
  flex-direction:column;
}
.carte img{
  width:100%;
  display:block;
  aspect-ratio:1/1;
  object-fit:cover;
}
.carte.avec-cadre{
  background:#fff;
}
.carte.avec-cadre img{
  padding:25px;
  aspect-ratio:auto;
  object-fit:contain;
}
.carte .contenu{
  padding:22px 24px 26px;
  flex:1;
  display:flex;
  flex-direction:column;
}
.carte h3{
  color:var(--vert-fonce);
  font-size:1.3rem;
  margin-bottom:10px;
}
.carte .details{
  list-style:none;
  margin:12px 0 0;
  font-size:.97rem;
  line-height:1.3;
}
.carte .details li{
  margin-bottom:0;
  padding-left:1.4em;
  position:relative;
}
.carte .details li::before{
  content:"✦";
  position:absolute;
  left:0;
  color:var(--or);
  font-size:.85em;
}
.carte .details strong{color:var(--vert-fonce);}

.bandeau-eco{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:28px;
  flex-wrap:wrap;
  background:var(--vert-fonce);
  color:var(--creme);
  border-radius:10px;
  padding:30px;
  margin-bottom:50px;
}
.bandeau-eco img{
  width:84px;
  height:84px;
  border-radius:50%;
  background:#fff;
  object-fit:cover;
}
.bandeau-eco p{
  max-width:480px;
  font-style:italic;
  font-size:1.05rem;
}

footer{
  text-align:center;
  padding:30px 20px 50px;
  font-size:.95rem;
  color:var(--vert-fonce);
}
footer .fb-icone{
  width:32px;
  height:32px;
  margin-bottom:10px;
}
footer a{
  color:var(--rouge);
  text-decoration:none;
  font-weight:bold;
}
footer a:hover{text-decoration:underline;}

@media (max-width:600px){
  .bandeau-eco{flex-direction:column;text-align:center;}
}