:root{
  --bg:#fbfbf7; 
  --text:#2e2e2e; 
  --muted:#5f6b61;
  --brand:#2e7d32; 
  --brand-2:#6bbf59; 
  --sand:#efe9da;
  --card:#ffffff; 
  --shadow:0 10px 25px rgba(0,0,0,.08);
}

/* Base */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
}
a{color:var(--brand); text-underline-offset:3px}
small, .muted{color:var(--muted)}
.container{max-width:1050px; margin:0 auto; padding:0 18px}

/* Boutons */
a.button{
  display:inline-block; 
  padding:.8rem 1.1rem; 
  border-radius:999px; 
  background:var(--brand); 
  color:#fff; 
  text-decoration:none; 
  font-weight:700; 
  box-shadow:var(--shadow);
}
a.button.secondary{ background:var(--brand-2) }

/* En-tête / Navigation */
header.site{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(6px);
  border-bottom:1px solid #eee;
}
.nav{
  display:flex; 
  align-items:center; 
  justify-content:flex-start; 
  padding:.6rem .4rem;
  gap:1rem;
}
.nav .brand{
  display:flex; 
  align-items:center; 
  gap:.6rem; 
  padding-top:0; padding-bottom:0; 
  margin:0;
}
.nav .brand > a{ 
  display:inline-block; 
  margin-right:32px !important; 
}
.nav img.brand-logo{ height:81px; width:auto; display:block }
@media (max-width:480px){
  .nav img.brand-logo{ height:72px }
}
.nav ul{
  list-style:none; 
  display:flex; 
  gap:1rem; 
  margin:0; 
  padding:0; 
  flex-wrap:wrap;
}
.nav a{ 
  font-weight:600; 
  text-decoration:none; 
  color:var(--text);
}
.nav a:focus{
  outline:3px solid var(--brand-2); 
  outline-offset:4px; 
  border-radius:6px;
}

/* Hero */
.hero{
  position:relative;
  background:
    radial-gradient(1200px 400px at 20% -10%, var(--sand), transparent),
    linear-gradient(135deg,#f3fff2 0%,#f5fff7 30%,#ffffff 100%);
  padding:3rem 0 1.5rem;
}
.hero::after{ display:none !important; }
.badge{
  display:inline-block; 
  background:#e8f5e9; 
  color:#1b5e20; 
  padding:.35rem .6rem; 
  border-radius:999px; 
  font-weight:700; 
  font-size:.89rem;
}

/* Sections / cartes */
.section{ padding:1.2rem 0 }
.card{
  background:var(--card); 
  border-radius:18px; 
  padding:1.2rem; 
  box-shadow:var(--shadow); 
  border:1px solid #eee;
}
h1{
  font-family:'Playfair Display',Georgia,'Times New Roman',serif; 
  font-size:clamp(2rem,5vw,3rem); 
  line-height:1.15; 
  margin:.2rem 0 1rem;
}
h2{
  font-family:'Playfair Display',Georgia,serif; 
  font-size:clamp(1.4rem,3vw,2rem); 
  margin-top:0;
}

/* Grilles – Forcer 1 colonne partout */
.grid{
  display:grid; 
  gap:1rem; 
  grid-template-columns: 1fr !important;
}
.grid.grid-3{
  grid-template-columns: 1fr !important; 
  gap:1rem;
}

/* Agenda */
.event-list{ list-style:none; padding:0; margin:0 }
.event{
  display:flex; 
  gap:1rem; 
  align-items:flex-start; 
  padding:1rem 0; 
  border-top:1px solid #eee;
}
.event:first-child{ border-top:none }
.event .date{
  min-width:82px; 
  text-align:center; 
  border-radius:12px; 
  background:#e8f5e9; 
  color:#1b5e20; 
  font-weight:800; 
  padding:.5rem .6rem;
}
.event .date .d{ font-size:1.4rem; display:block; line-height:1 }
.event .date .m{ font-size:.85rem; text-transform:uppercase; letter-spacing:.08em }
.event .meta{ font-size:.95rem; color:var(--muted) }
/* Garder le texte du bouton sur une seule ligne */
.event a.button.secondary{ white-space:nowrap }
@media (max-width:420px){
  .event a.button.secondary{ font-size:.95rem; padding:.55rem .9rem; }
}

/* Bouton TWINT */
.twint-btn{
  display:inline-flex; 
  align-items:center; 
  gap:.6rem; 
  background:#000; 
  color:#fff; 
  padding:.6rem 1rem; 
  border-radius:999px; 
  font-weight:700; 
  text-decoration:none; 
  box-shadow:var(--shadow); 
  transition:transform .05s ease-in-out;
}
.twint-btn:focus{ outline:3px solid var(--brand-2); outline-offset:3px }
.twint-btn:active{ transform:scale(.98) }

/* Pied de page */
.footer{
  background:#0f1d12; 
  color:#cfe8cf; 
  padding:1.2rem 0;
}
.footer a{ color:#cfe8cf }

/* Accessibilité */
.skip{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip:focus{
  position:static; width:auto; height:auto; 
  padding:.5rem; background:#000; color:#fff;
}