/* ================================================
   MAIRIE DE MÉRIGNAC (17210) — Styles v2
   ================================================ */

:root {
  --vert:        #3f6e2e;
  --vert-fonce:  #2e5120;
  --vert-clair:  #edf4e9;
  --vert-moyen:  #c8dfc1;
  --texte:       #252525;
  --texte-leger: #5c5c5c;
  --fond:        #ffffff;
  --fond-alt:    #f6f7f4;
  --bordure:     #dde4d8;
  --blanc:       #ffffff;
  --max:         1080px;
  --r:           5px;
  --ombre:       0 2px 12px rgba(0,0,0,0.10);
  --section-v:   40px;    /* espacement vertical sections */
}

/* --- Reset ------------------------------------ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: 'Segoe UI', Arial, Helvetica, sans-serif;
  color: var(--texte);
  background: var(--fond);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--vert); text-decoration: none; transition: color .15s; }
a:hover { color: var(--vert-fonce); text-decoration: underline; }
ul { list-style: none; }
h1, h2, h3, h4 { line-height: 1.3; font-weight: 700; }

/* --- Layout ----------------------------------- */
.container { max-width: var(--max); margin: 0 auto; padding: 0 20px; }
.section { padding: var(--section-v) 0; }
.section-alt { background: var(--fond-alt); }

/* --- Utilitaires ------------------------------ */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--vert); color: var(--blanc);
  padding: 9px 20px; border-radius: var(--r);
  font-size: .9rem; font-weight: 600; letter-spacing: .01em;
  transition: background .2s; border: none; cursor: pointer;
}
.btn:hover { background: var(--vert-fonce); text-decoration: none; color: var(--blanc); }
.btn-sm { padding: 6px 14px; font-size: .83rem; }
.btn-outline { background: transparent; border: 2px solid var(--vert); color: var(--vert); }
.btn-outline:hover { background: var(--vert); color: var(--blanc); }
.btn-blanc { background: var(--blanc); color: var(--vert-fonce); }
.btn-blanc:hover { background: var(--vert-clair); }

.tag {
  display: inline-block;
  background: var(--vert-clair); color: var(--vert-fonce);
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; padding: 2px 8px; border-radius: 20px;
}
.tag-blanc { background: rgba(255,255,255,.2); color: var(--blanc); border: 1px solid rgba(255,255,255,.3); }

.titre-bloc { font-size: 1.3rem; font-weight: 700; margin-bottom: 4px; }
.sous-titre-bloc { color: var(--texte-leger); font-size: .9rem; margin-bottom: 18px; }
.filet { width: 36px; height: 3px; background: var(--vert); border-radius: 2px; margin: 8px 0 16px; }

/* --- Bandeau aperçu --------------------------- */
.bandeau-apercu {
  background: var(--vert-fonce); color: var(--blanc);
  text-align: center; padding: 8px 20px; font-size: .8rem;
}

/* --- Bandeau info rapide ---------------------- */
.header-info {
  background: #1c3016; color: rgba(255,255,255,.8);
  font-size: .79rem; padding: 5px 0;
}
.header-info .container {
  display: flex; justify-content: space-between;
  align-items: center; flex-wrap: wrap; gap: 4px;
}
.header-info a { color: rgba(255,255,255,.8); }
.header-info a:hover { color: var(--blanc); text-decoration: none; }
.info-items { display: flex; gap: 16px; flex-wrap: wrap; }
.info-item { display: flex; align-items: center; gap: 5px; }

/* --- Header ----------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--blanc);
  border-bottom: 2px solid var(--vert-clair);
  box-shadow: 0 1px 4px rgba(0,0,0,0.07);
}
.header-inner {
  display: flex; align-items: center;
  justify-content: space-between;
  height: 62px; gap: 12px;
}
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
.logo-badge {
  width: 44px; height: 44px;
  border-radius: 50%; overflow: hidden; flex-shrink: 0;
}
.logo-text strong { display: block; font-size: .92rem; color: var(--texte); }
.logo-text span { font-size: .72rem; color: var(--texte-leger); }
.logo:hover { text-decoration: none; }

.site-nav { display: flex; align-items: center; gap: 1px; }
.site-nav a {
  padding: 7px 11px; border-radius: var(--r);
  font-size: .87rem; font-weight: 500; color: var(--texte);
  transition: background .15s;
}
.site-nav a:hover, .site-nav a.active {
  background: var(--vert-clair); color: var(--vert-fonce); text-decoration: none;
}
.nav-cta { background: var(--vert) !important; color: var(--blanc) !important; margin-left: 4px; }
.nav-cta:hover { background: var(--vert-fonce) !important; }

.hamburger {
  display: none; flex-direction: column; justify-content: center;
  gap: 5px; cursor: pointer; padding: 6px; background: none; border: none;
}
.hamburger span { display: block; width: 22px; height: 2px; background: var(--texte); border-radius: 2px; transition: all .2s; }
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav {
  display: none; position: absolute; top: 62px; left: 0; right: 0;
  background: var(--blanc); border-bottom: 1px solid var(--bordure);
  box-shadow: var(--ombre); z-index: 99; padding: 8px 0 12px;
}
.mobile-nav.open { display: block; }
.mobile-nav a {
  display: block; padding: 10px 20px; font-size: .93rem;
  color: var(--texte); border-bottom: 1px solid var(--fond-alt);
}
.mobile-nav a:hover { background: var(--vert-clair); text-decoration: none; }
.mobile-nav a.active { color: var(--vert); font-weight: 600; }

/* --- Hero ------------------------------------- */
.hero {
  position: relative;
  min-height: 400px;
  display: flex; align-items: center;
  overflow: hidden;
  background: var(--vert-fonce);
}
.hero-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  background-image: url('../images/slider2.jpg');
}
.hero-bg::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(20,46,14,.88) 0%, rgba(30,65,20,.70) 55%, rgba(20,46,14,.50) 100%);
}
.hero-content {
  position: relative; z-index: 1;
  padding: 52px 0; max-width: 560px;
}
.hero-content .tag { margin-bottom: 12px; font-size: .75rem; }
.hero-content h1 {
  font-size: clamp(1.7rem, 4vw, 2.6rem);
  color: var(--blanc); margin-bottom: 12px;
}
.hero-content p { font-size: 1rem; color: rgba(255,255,255,.88); margin-bottom: 22px; }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* --- Infos rapides sous le héro --------------- */
.info-bar {
  background: var(--blanc);
  border-bottom: 1px solid var(--bordure);
  padding: 0;
}
.info-bar-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-left: 1px solid var(--bordure);
}
.info-bar-item {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 20px;
  border-right: 1px solid var(--bordure);
  border-bottom: 1px solid var(--bordure);
}
.info-bar-item .ib-icone {
  width: 36px; height: 36px; background: var(--vert-clair);
  border-radius: 6px; display: flex; align-items: center;
  justify-content: center; font-size: 1rem; flex-shrink: 0;
}
.info-bar-item .ib-texte strong { display: block; font-size: .85rem; color: var(--texte); }
.info-bar-item .ib-texte span { font-size: .78rem; color: var(--texte-leger); }

/* --- Accès rapide ----------------------------- */
.acces-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  padding: 24px 0;
}
.acces-card {
  background: var(--fond-alt); border: 1px solid var(--bordure);
  border-radius: var(--r); padding: 16px 10px;
  text-align: center; transition: all .15s; cursor: pointer; display: block;
}
.acces-card:hover {
  background: var(--vert-clair); border-color: var(--vert-moyen);
  text-decoration: none; transform: translateY(-1px);
}
.acces-card .icone { font-size: 1.5rem; margin-bottom: 6px; display: block; }
.acces-card strong { display: block; font-size: .82rem; color: var(--texte); font-weight: 600; line-height: 1.3; }

/* --- Section actualités ----------------------- */
.actu-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
}
.actu-principale {
  background: var(--fond-alt); border: 1px solid var(--bordure);
  border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column;
}
.actu-principale-img {
  height: 200px; overflow: hidden; position: relative;
  background: var(--vert-moyen);
}
.actu-principale-img img {
  width: 100%; height: 100%; object-fit: cover;
}
.actu-principale-body { padding: 18px; flex: 1; }
.actu-principale-body h3 { font-size: 1.05rem; margin: 8px 0 8px; }
.actu-principale-body p { font-size: .87rem; color: var(--texte-leger); margin-bottom: 14px; }

.actu-secondaires { display: flex; flex-direction: column; gap: 10px; }
.actu-mini {
  background: var(--fond-alt); border: 1px solid var(--bordure);
  border-radius: var(--r); padding: 14px;
  display: flex; gap: 10px; align-items: flex-start;
}
.actu-mini .mini-icone {
  width: 36px; height: 36px; background: var(--vert-clair);
  border-radius: 6px; display: flex; align-items: center; justify-content: center;
  font-size: 1rem; flex-shrink: 0;
}
.actu-mini h4 { font-size: .87rem; margin-bottom: 3px; }
.actu-mini p { font-size: .8rem; color: var(--texte-leger); }

/* --- Section commune (photo + texte) ---------- */
.commune-bloc {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  border-radius: var(--r); overflow: hidden;
  border: 1px solid var(--bordure);
}
.commune-photo {
  min-height: 280px; position: relative; overflow: hidden;
  background: var(--vert-moyen);
}
.commune-photo img { width: 100%; height: 100%; object-fit: cover; }
.commune-texte { padding: 28px; background: var(--fond); display: flex; flex-direction: column; justify-content: center; }
.commune-texte p { font-size: .9rem; color: var(--texte-leger); margin-bottom: 12px; line-height: 1.7; }

/* --- Galerie ---------------------------------- */
.galerie-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.galerie-item {
  aspect-ratio: 1; overflow: hidden; border-radius: var(--r);
  background: var(--vert-moyen); position: relative;
}
.galerie-item img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .3s;
}
.galerie-item:hover img { transform: scale(1.04); }
.galerie-item.grand { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; min-height: 260px; }

/* --- Documents mini liste --------------------- */
.doc-list { display: flex; flex-direction: column; gap: 6px; }
.doc-item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; background: var(--fond);
  border: 1px solid var(--bordure); border-radius: var(--r);
  transition: border-color .15s;
}
.doc-item:hover { border-color: var(--vert-moyen); text-decoration: none; }
.doc-icone {
  width: 34px; height: 34px; background: var(--vert-clair);
  border-radius: 5px; display: flex; align-items: center;
  justify-content: center; font-size: 1rem; flex-shrink: 0;
}
.doc-info strong { display: block; font-size: .87rem; color: var(--texte); }
.doc-info span { font-size: .77rem; color: var(--texte-leger); }
.doc-fleche { margin-left: auto; color: var(--texte-leger); }

/* --- Contacts & horaires ---------------------- */
.contact-bloc {
  background: var(--fond-alt); border: 1px solid var(--bordure);
  border-radius: var(--r); overflow: hidden;
}
.contact-ligne {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; border-bottom: 1px solid var(--bordure);
}
.contact-ligne:last-child { border-bottom: none; }
.contact-icone {
  width: 30px; height: 30px; background: var(--vert-clair);
  border-radius: 5px; display: flex; align-items: center;
  justify-content: center; font-size: .9rem; flex-shrink: 0;
}
.contact-info strong { display: block; font-size: .78rem; color: var(--texte-leger); font-weight: 600; }
.contact-info a, .contact-info span { font-size: .9rem; color: var(--texte); }

.horaire-table { width: 100%; border-collapse: collapse; }
.horaire-table td { padding: 7px 14px; font-size: .9rem; border-bottom: 1px solid var(--bordure); }
.horaire-table tr:last-child td { border-bottom: none; }
.horaire-table td:first-child { color: var(--texte-leger); }
.badge-ferme { color: #b03030; font-size: .8rem; }
.badge-ouvert { color: var(--vert); font-weight: 700; font-size: .88rem; }

/* --- Équipe ----------------------------------- */
.equipe-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}
.membre-card {
  background: var(--fond-alt); border: 1px solid var(--bordure);
  border-radius: var(--r); overflow: hidden; text-align: center;
}
.membre-photo {
  width: 100%; aspect-ratio: 1; overflow: hidden;
  background: var(--vert-moyen);
}
.membre-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.membre-photo-placeholder {
  width: 100%; aspect-ratio: 1;
  background: var(--vert-clair); display: flex; align-items: center;
  justify-content: center; font-size: 2rem;
}
.membre-info { padding: 10px 8px; }
.membre-info strong { display: block; font-size: .83rem; color: var(--texte); line-height: 1.3; }
.membre-info span { font-size: .75rem; color: var(--vert); font-weight: 600; }

/* --- Liens utiles ----------------------------- */
.lien-utile-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px;
}
.lien-utile {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; background: var(--fond);
  border: 1px solid var(--bordure); border-radius: var(--r);
  transition: border-color .15s, box-shadow .15s;
}
.lien-utile:hover { border-color: var(--vert-moyen); box-shadow: var(--ombre); text-decoration: none; }
.lien-utile .icone {
  width: 34px; height: 34px; background: var(--vert-clair);
  border-radius: 5px; display: flex; align-items: center;
  justify-content: center; font-size: .95rem; flex-shrink: 0;
}
.lien-utile .texte strong { display: block; font-size: .85rem; color: var(--texte); }
.lien-utile .texte span { font-size: .77rem; color: var(--texte-leger); }

/* --- Agenda ----------------------------------- */
.agenda-list { display: flex; flex-direction: column; gap: 8px; }
.agenda-item {
  display: flex; gap: 14px; align-items: center;
  padding: 12px 16px; background: var(--fond);
  border: 1px solid var(--bordure); border-radius: var(--r);
  border-left: 3px solid var(--vert);
}
.agenda-date {
  text-align: center; min-width: 46px;
  background: var(--vert-clair); border-radius: var(--r);
  padding: 6px; flex-shrink: 0;
}
.agenda-date .jour { display: block; font-size: 1.3rem; font-weight: 700; color: var(--vert-fonce); line-height: 1; }
.agenda-date .mois { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--texte-leger); }

/* --- Carte Google ----------------------------- */
.map-embed { width: 100%; height: 260px; border: 1px solid var(--bordure); border-radius: var(--r); overflow: hidden; }
.map-embed iframe { width: 100%; height: 100%; border: 0; }

/* --- Cal Google ------------------------------- */
.cal-embed { width: 100%; height: 460px; border: 1px solid var(--bordure); border-radius: var(--r); overflow: hidden; }
.cal-embed iframe { width: 100%; height: 100%; border: 0; }

/* --- Page titre ------------------------------- */
.page-hero { background: var(--fond-alt); border-bottom: 1px solid var(--bordure); padding: 24px 0 20px; }
.breadcrumb { font-size: .8rem; color: var(--texte-leger); margin-bottom: 6px; }
.breadcrumb a { color: var(--texte-leger); }
.breadcrumb a:hover { color: var(--vert); text-decoration: none; }
.breadcrumb span { margin: 0 5px; }
.page-hero h1 { font-size: clamp(1.4rem, 3vw, 1.9rem); }
.page-hero p { font-size: .9rem; color: var(--texte-leger); margin-top: 4px; }

/* --- Footer ----------------------------------- */
.site-footer { background: #1a2a15; color: rgba(255,255,255,.72); padding: 40px 0 24px; }
.footer-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 28px; margin-bottom: 32px;
}
.footer-col h3 { color: var(--blanc); font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 12px; }
.footer-col p, .footer-col a { font-size: .84rem; color: rgba(255,255,255,.65); line-height: 1.75; }
.footer-col a:hover { color: var(--blanc); text-decoration: none; }
.footer-col ul { display: flex; flex-direction: column; gap: 2px; }
.footer-logo-text { font-size: .95rem; font-weight: 700; color: var(--blanc); margin-bottom: 6px; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.1); padding-top: 16px;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 6px;
  font-size: .77rem; color: rgba(255,255,255,.4);
}
.footer-bottom a { color: rgba(255,255,255,.4); }
.footer-bottom a:hover { color: var(--blanc); }

/* --- Grilles génériques ----------------------- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

/* --- Encadrés --------------------------------- */
.encart {
  background: var(--vert-clair); border: 1px solid var(--vert-moyen);
  border-radius: var(--r); padding: 16px 18px;
}
.encart strong { color: var(--vert-fonce); display: block; margin-bottom: 4px; font-size: .9rem; }
.encart p { font-size: .86rem; color: var(--texte-leger); }

/* --- Responsive ------------------------------- */
@media (max-width: 900px) {
  .acces-grid { grid-template-columns: repeat(3, 1fr); }
  .actu-grid { grid-template-columns: 1fr; }
  .galerie-grid { grid-template-columns: repeat(2, 1fr); }
  .info-bar-inner { grid-template-columns: 1fr 1fr; }
  .commune-bloc { grid-template-columns: 1fr; }
  .commune-photo { min-height: 200px; }
}
@media (max-width: 768px) {
  .site-nav { display: none; }
  .hamburger { display: flex; }
  .header-inner { padding: 0 16px; }
  .container { padding: 0 14px; }
  .acces-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  .info-bar-inner { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .equipe-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) {
  .acces-grid { grid-template-columns: repeat(2, 1fr); }
  .galerie-grid { grid-template-columns: repeat(2, 1fr); }
  .galerie-item.grand { grid-column: span 2; }
  .equipe-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr; }
  .hero-content { padding: 36px 0; }
}