/* ═══════════════════════════════════════════════════
   RIMBACH-ZELL · Design v5 · Ardoise & Cuivre
   Fonts: Inter + Playfair Display
═══════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,600;0,700;1,500&display=swap');

/* ── TOKENS ─────────────────────────────────────────── */
:root {
  --primary:        #2d3748;
  --primary-dark:   #1e2533;
  --primary-darker: #131b27;
  --primary-mid:    #3d4f63;
  --primary-light:  #edf0f4;
  --primary-faint:  #f5f7fa;
  --accent:         #c07040;
  --accent-hover:   #d4854e;
  --accent-dark:    #9a5830;
  --accent-light:   #fdf2ea;
  --text:           #1a202c;
  --text-muted:     #64748b;
  --text-faint:     #94a3b8;
  --border:         #e2e8f0;
  --border-faint:   #f1f5f9;
  --surface:        #f8fafc;
  --bg:             #ffffff;
  --white:          #ffffff;

  --shadow-xs: 0 1px 2px rgba(0,0,0,.04);
  --shadow-sm: 0 2px 8px rgba(0,0,0,.06);
  --shadow-md: 0 4px 20px rgba(0,0,0,.08);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.10);
  --shadow-xl: 0 16px 48px rgba(0,0,0,.12);

  --r-sm:  4px;  --r-md:  8px;   --r-lg:  12px;
  --r-xl:  16px; --r-2xl: 24px;  --r-full: 9999px;
  --r: var(--r-lg);

  --font-sans:  'Inter', system-ui, -apple-system, sans-serif;
  --font-serif: 'Playfair Display', Georgia, serif;
  --font-script:'Inter', sans-serif;

  --ease:     cubic-bezier(0.4,0,0.2,1);
  --ease-out: cubic-bezier(0,0,0.2,1);
  --dur:      200ms;
  --dur-slow: 360ms;
}

/* ── RESET ──────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased }
body { font-family:var(--font-sans); background:var(--bg); color:var(--text); line-height:1.65; overflow-x:hidden }
img  { max-width:100%; display:block }
a    { text-decoration:none; color:inherit }
button,input,select,textarea { font-family:inherit }
ul   { list-style:none }

/* ── TYPOGRAPHY ─────────────────────────────────────── */
h1,h2,h3,h4 { font-family:var(--font-serif); line-height:1.2; color:var(--text) }
h1 { font-size:clamp(2rem,5vw,3.2rem); font-weight:700 }
h2 { font-size:clamp(1.5rem,3vw,2.2rem); font-weight:700 }
h3 { font-size:clamp(1rem,2vw,1.25rem); font-weight:600 }
h4 { font-size:.95rem; font-family:var(--font-sans); font-weight:600 }
p  { color:var(--text-muted); line-height:1.75 }
strong { color:var(--text); font-weight:600 }

/* ── LAYOUT ─────────────────────────────────────────── */
.container  { max-width:1160px; margin:0 auto; padding:0 2rem }
.section    { padding:6rem 0 }
.section-sm { padding:3rem 0 }
.grid  { display:grid; gap:1.5rem }
.grid-2 { grid-template-columns:repeat(auto-fit,minmax(300px,1fr)) }
.grid-3 { grid-template-columns:repeat(auto-fit,minmax(280px,1fr)) }
.grid-4 { grid-template-columns:repeat(auto-fit,minmax(220px,1fr)) }
.bg-surface  { background:var(--surface) }
.bg-cream    { background:var(--surface) }
.text-center { text-align:center }
.tag-list    { display:flex; flex-wrap:wrap; gap:.5rem }
.separator   { border:none; border-top:1px solid var(--border); margin:2rem 0 }
.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}.mt-4{margin-top:2rem}
.mb-1{margin-bottom:.5rem}.mb-2{margin-bottom:1rem}.mb-3{margin-bottom:1.5rem}
.italic { font-style:italic }

/* ── NAVBAR ─────────────────────────────────────────── */
.navbar {
  position:sticky; top:0; z-index:1000;
  background:var(--white);
  border-bottom:1px solid var(--border);
  height:66px;
  transition:box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
.navbar.scrolled {
  box-shadow:0 2px 24px rgba(0,0,0,.08);
}
.nav-inner {
  max-width:1160px; margin:0 auto; padding:0 2rem;
  display:flex; align-items:center; gap:1rem; height:100%;
}
.nav-brand { display:flex; align-items:center; gap:.75rem; flex-shrink:0 }
.nav-logo  { width:36px; height:44px; flex-shrink:0 }
.nav-logo img { width:100%; height:100%; object-fit:contain }
.nav-brand-text .main { display:block; font-size:.88rem; font-weight:700; color:var(--text); letter-spacing:-.01em }
.nav-brand-text .sub  { display:block; font-size:.62rem; color:var(--text-faint); letter-spacing:.04em }

.nav-links {
  display:flex; align-items:center; gap:.05rem;
  list-style:none; flex:1; justify-content:center;
}
.nav-links a {
  padding:.42rem .82rem; border-radius:var(--r-sm);
  font-size:.83rem; font-weight:600; color:var(--text);
  transition:color var(--dur) var(--ease), background var(--dur) var(--ease);
  white-space:nowrap; letter-spacing:.01em;
}
.nav-links a:hover  { color:var(--accent); background:var(--accent-light) }
.nav-links a.active { color:var(--accent); font-weight:700; background:var(--accent-light) }

.nav-right { display:flex; align-items:center; gap:.5rem; flex-shrink:0 }

.nav-icon-btn {
  width:34px; height:34px; border-radius:50%;
  border:1.5px solid var(--border); background:var(--white);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--text-muted);
  transition:all var(--dur) var(--ease);
}
.nav-icon-btn svg { width:16px; height:16px; stroke-width:1.75 }
.nav-icon-btn:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-light) }

.nav-contact-btn {
  display:flex; align-items:center; gap:.4rem;
  background:var(--accent); color:var(--white);
  padding:.4rem .95rem; border-radius:var(--r-full);
  font-size:.75rem; font-weight:600; letter-spacing:.02em;
  transition:background var(--dur) var(--ease), transform var(--dur) var(--ease);
  white-space:nowrap;
}
.nav-contact-btn svg { width:14px; height:14px; stroke-width:2; flex-shrink:0 }
.nav-contact-btn:hover { background:var(--accent-hover); color:var(--white); transform:translateY(-1px) }

.hamburger {
  display:none; flex-direction:column; gap:5px;
  background:none; border:none; cursor:pointer; padding:5px;
}
.hamburger span {
  display:block; width:20px; height:1.5px; background:var(--text);
  border-radius:2px; transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease);
}
.hamburger.open span:nth-child(1) { transform:rotate(45deg) translate(4.5px,4.5px) }
.hamburger.open span:nth-child(2) { opacity:0 }
.hamburger.open span:nth-child(3) { transform:rotate(-45deg) translate(4.5px,-4.5px) }

/* ── DROPDOWN ───────────────────────────────────────── */
.nav-links > li { position:relative }
.nav-links > li:hover > .dropdown { display:block }

.dropdown {
  display:none;
  position:absolute; top:100%; left:50%; transform:translateX(-50%);
  background:var(--white); border:1px solid var(--border); border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg); min-width:210px;
  padding:8px .4rem .4rem;
  margin:0; list-style:none; z-index:500;
}
.dropdown::before {
  content:''; position:absolute; top:2px; left:50%; transform:translateX(-50%);
  width:10px; height:10px; background:var(--white);
  border-left:1px solid var(--border); border-top:1px solid var(--border);
  rotate:45deg;
}
.dropdown > li { list-style:none; padding:0; margin:0 }
.dropdown > li > a {
  display:flex; align-items:center; gap:.55rem;
  padding:.52rem .85rem; border-radius:var(--r-md);
  font-size:.82rem; font-weight:500; color:var(--text-muted);
  white-space:nowrap; transition:all var(--dur) var(--ease);
  background:transparent;
}
.dropdown > li > a:hover { color:var(--accent); background:var(--accent-light) }
.dropdown > li > a svg { width:15px; height:15px; min-width:15px; min-height:15px; stroke-width:1.75; flex-shrink:0; color:var(--text-faint) }
.dropdown > li > a:hover svg { color:var(--accent) }

.nav-links a.has-dropdown::after {
  content:''; display:inline-block; width:0; height:0;
  border-left:3.5px solid transparent; border-right:3.5px solid transparent;
  border-top:4px solid currentColor; margin-left:.35rem; vertical-align:middle; opacity:.5;
}

/* ── HERO ───────────────────────────────────────────── */
.hero {
  position:relative; height:480px; overflow:hidden;
  background:var(--primary-darker);
}
.hero-image {
  position:absolute; inset:0;
  background:
    linear-gradient(to bottom, rgba(19,27,39,.2) 0%, rgba(19,27,39,.65) 100%),
    url('Image/villagerz.jpg') center/cover no-repeat;
}
.hero-overlay-text {
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:2rem;
}
.hero-overlay-text h1 {
  color:var(--white);
  font-size:clamp(2.4rem,5.5vw,4.4rem);
  text-shadow:0 2px 32px rgba(0,0,0,.3);
  margin-bottom:.65rem; letter-spacing:-.025em; font-weight:700;
}
.hero-overlay-text p {
  color:rgba(255,255,255,.78);
  font-size:clamp(.95rem,2vw,1.15rem);
  font-family:var(--font-serif); font-style:italic;
  max-width:560px;
}
.hero-badge {
  display:inline-flex; align-items:center; gap:.5rem;
  background:rgba(192,112,64,.2); border:1px solid rgba(192,112,64,.45);
  border-radius:var(--r-full); padding:.28rem 1rem;
  font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.92); margin-bottom:1.4rem;
}
.hero-buttons, .hero-actions {
  display:flex; gap:.9rem; justify-content:center; flex-wrap:wrap; margin-top:2.25rem;
}
.hero-controls {
  position:absolute; bottom:2rem; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:.8rem; z-index:3;
}
.hero-arrow {
  width:36px; height:36px; border-radius:50%;
  background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.3);
  display:flex; align-items:center; justify-content:center;
  font-size:.85rem; color:var(--white); cursor:pointer;
  transition:all var(--dur) var(--ease);
}
.hero-arrow:hover { background:rgba(255,255,255,.25); border-color:rgba(255,255,255,.6) }
.hero-dots { display:flex; gap:.45rem; align-items:center }
.hero-dot {
  width:6px; height:6px; border-radius:50%;
  background:rgba(255,255,255,.35); border:none; cursor:pointer;
  transition:all var(--dur) var(--ease); padding:0;
}
.hero-dot.active { background:var(--accent); width:22px; border-radius:3px }

/* Legacy hero */
.hero-content  { position:relative; z-index:2; text-align:center; max-width:760px; padding:2rem }
.hero-title    { font-family:var(--font-serif); font-size:clamp(2.8rem,7vw,5rem); font-weight:700; color:var(--white); letter-spacing:-.02em; margin-bottom:.75rem }
.hero-subtitle { font-family:var(--font-serif); font-style:italic; font-size:clamp(1rem,2.5vw,1.3rem); color:rgba(255,255,255,.78); margin-bottom:1.25rem }
.hero-desc     { font-size:1.05rem; color:rgba(255,255,255,.6); max-width:580px; margin:0 auto 2.5rem; line-height:1.75 }
.scroll-indicator { position:absolute; bottom:2rem; left:50%; transform:translateX(-50%); opacity:.5; animation:scrollBounce 2.5s ease infinite }
.scroll-arrow     { width:1px; height:48px; background:linear-gradient(to bottom,transparent,rgba(255,255,255,.7)); position:relative }
.scroll-arrow::after { content:''; position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.7) }
@keyframes scrollBounce { 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(8px)} }

/* ── QUICK LINKS BAR ────────────────────────────────── */
.quick-links-bar {
  background:var(--primary);
  position:relative; z-index:10;
}
.quick-links-grid, .quick-links-inner {
  display:grid; grid-template-columns:repeat(6,1fr);
  max-width:1160px; margin:0 auto;
}
.quick-link-card, .quick-link-item {
  display:flex; flex-direction:column; align-items:center;
  gap:.6rem; padding:1.6rem 1rem;
  border-right:1px solid rgba(255,255,255,.08);
  text-decoration:none; cursor:pointer;
  transition:background var(--dur) var(--ease);
  position:relative;
}
.quick-link-card:last-child, .quick-link-item:last-child { border-right:none }
.quick-link-card:hover, .quick-link-item:hover { background:rgba(255,255,255,.06) }
.ql-icon {
  width:48px; height:48px; border-radius:var(--r-md);
  border:1px solid rgba(255,255,255,.2); color:rgba(255,255,255,.8);
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.06);
  transition:all var(--dur) var(--ease);
}
.ql-icon svg { width:22px; height:22px; stroke-width:1.6 }
.quick-link-card:hover .ql-icon, .quick-link-item:hover .ql-icon {
  background:var(--accent); border-color:var(--accent);
  color:var(--white); transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(192,112,64,.35);
}
.ql-label {
  font-size:.73rem; font-weight:600; color:rgba(255,255,255,.6);
  text-align:center; line-height:1.3; transition:color var(--dur) var(--ease);
}
.quick-link-card:hover .ql-label, .quick-link-item:hover .ql-label { color:var(--white) }

/* ── SECTION HEADING ─────────────────────────────────── */
.section-heading-row {
  display:flex; align-items:flex-end; justify-content:space-between;
  margin-bottom:3rem; flex-wrap:wrap; gap:1rem;
}
.section-heading-left h2 {
  font-family:var(--font-serif); font-size:clamp(1.9rem,4vw,2.7rem);
  color:var(--text); line-height:1; font-weight:700;
}
.section-cursive {
  display:block; font-size:.75rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); margin-top:.5rem;
}
.section-nav-arrows { display:flex; gap:.45rem; align-items:center }
.arrow-btn {
  width:36px; height:36px; border-radius:50%;
  border:1.5px solid var(--border); background:var(--white);
  display:flex; align-items:center; justify-content:center;
  font-size:.82rem; color:var(--text-muted); cursor:pointer;
  transition:all var(--dur) var(--ease);
}
.arrow-btn:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-light) }

.section-header { margin-bottom:2.75rem }
.section-header.centered { text-align:center }
.eyebrow { display:inline-block; font-size:.7rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); margin-bottom:.75rem }
.divider { width:32px; height:2px; background:var(--accent); border-radius:var(--r-full); margin:.9rem 0 }
.section-header h2  { margin-bottom:.5rem }
.section-header p   { color:var(--text-muted); font-size:1rem; max-width:580px }
.section-header.centered p { margin:0 auto }
.section-title    { font-family:var(--font-serif); font-size:clamp(1.75rem,3.5vw,2.6rem); margin-bottom:.5rem }
.section-subtitle { color:var(--text-muted); font-size:1rem }

/* ── BUTTONS ────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.68rem 1.55rem; border-radius:var(--r-full);
  font-size:.84rem; font-weight:600; letter-spacing:.025em;
  cursor:pointer; border:1.5px solid transparent;
  transition:all var(--dur) var(--ease); white-space:nowrap;
}
.btn-primary {
  background:var(--accent); color:var(--white); border-color:var(--accent);
  box-shadow:0 3px 12px rgba(192,112,64,.28);
}
.btn-primary:hover {
  background:var(--accent-hover); border-color:var(--accent-hover); color:var(--white);
  transform:translateY(-1px); box-shadow:0 6px 20px rgba(192,112,64,.38);
}
.btn-outline {
  background:transparent; color:var(--white); border-color:rgba(255,255,255,.45);
}
.btn-outline:hover { background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.85); color:var(--white) }
.btn-secondary {
  background:var(--surface); color:var(--text); border-color:var(--border);
}
.btn-secondary:hover { background:var(--white); border-color:var(--accent); color:var(--accent) }
.btn-ghost {
  background:transparent; color:var(--accent); border-color:var(--border);
}
.btn-ghost:hover { background:var(--accent-light); border-color:var(--accent); color:var(--accent) }
.btn-cta {
  display:inline-block; background:var(--accent); color:var(--white);
  padding:.72rem 2.2rem; border-radius:var(--r-full);
  font-size:.78rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  box-shadow:0 4px 16px rgba(192,112,64,.28); border:none; cursor:pointer;
  transition:all var(--dur) var(--ease);
}
.btn-cta:hover { background:var(--accent-hover); color:var(--white); transform:translateY(-1px); box-shadow:0 6px 22px rgba(192,112,64,.38) }
.btn-sm { padding:.38rem .95rem; font-size:.77rem }

/* ── BASE CARD ──────────────────────────────────────── */
.card {
  background:var(--white); border:1px solid var(--border);
  border-radius:var(--r-xl); overflow:hidden;
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
  padding:1.75rem;
}
.card:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:var(--border) }
.card-body { padding:1.75rem }

/* ── NEWS CARDS ─────────────────────────────────────── */
.news-card {
  background:var(--white); border:1px solid var(--border); border-radius:var(--r-xl);
  overflow:hidden;
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  display:flex; flex-direction:column;
}
.news-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg) }
.news-card-img { height:210px; overflow:hidden; flex-shrink:0 }
.news-card-img-inner { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:3.2rem; transition:transform .45s var(--ease) }
.news-card:hover .news-card-img-inner { transform:scale(1.05) }
.news-card-body { padding:1.35rem; display:flex; flex-direction:column; flex:1 }
.card-img { height:180px; background:linear-gradient(135deg,var(--primary-darker),var(--primary-mid)); display:flex; align-items:center; justify-content:center; font-size:3rem; overflow:hidden }

/* ── TAGS ───────────────────────────────────────────── */
.news-tag { display:inline-flex; align-items:center; padding:.18rem .6rem; border-radius:var(--r-sm); font-size:.67rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase }
.tag-green { background:#d6ede0; color:#135e30 }
.tag-gold  { background:#fdefd4; color:#7a4a00 }
.tag-red   { background:#fce4e4; color:#8b1a1a }
.tag-blue  { background:#dceef8; color:#1a4a7a }
.tag-grey  { background:#e6e8ea; color:#3a3d40 }
.news-meta, .news-card-top { display:flex; align-items:center; gap:.6rem; margin-bottom:.65rem; flex-wrap:wrap }
.news-date  { font-size:.72rem; color:var(--text-faint) }
.news-title, .news-card h3 { font-family:var(--font-serif); font-size:1.08rem; color:var(--text); line-height:1.32; margin-bottom:.5rem; font-weight:600 }
.news-excerpt, .news-card p { font-size:.875rem; color:var(--text-muted); line-height:1.68; flex:1 }
.card-footer { padding-top:1rem; margin-top:auto; border-top:1px solid var(--border-faint) }

/* ── FEATURE CARDS ──────────────────────────────────── */
.features-section  { background:var(--surface); padding:6rem 0 }
.features-grid     { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.25rem }
.feature-card {
  background:var(--white); border:1px solid var(--border); border-radius:var(--r-xl);
  padding:2rem; position:relative; overflow:hidden;
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.feature-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:var(--accent);
  transform:scaleX(0); transform-origin:left; transition:transform var(--dur) var(--ease);
}
.feature-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--border) }
.feature-card:hover::before { transform:scaleX(1) }
.feature-card .feature-icon { width:48px; height:48px; border-radius:var(--r-md); background:var(--accent-light); display:flex; align-items:center; justify-content:center; font-size:1.4rem; margin-bottom:1rem; transition:transform var(--dur) var(--ease) }
.feature-card:hover .feature-icon { transform:scale(1.08) }
.feature-card h3 { font-size:1.05rem; margin-bottom:.5rem }
.feature-card p  { font-size:.88rem }
.feature-icon { display:flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:var(--r-md); font-size:1.4rem; margin-bottom:1rem }
.feature-icon.green { background:var(--accent-light); color:var(--accent) }
.feature-icon.gold  { background:#fef3c7; color:#b45309 }
.feature-icon.red   { background:#fee2e2; color:#991b1b }
.feature-icon.blue  { background:#dbeafe; color:#1d4ed8 }

/* ── STATS BANNER ───────────────────────────────────── */
.stats-banner {
  background:var(--primary-darker);
  padding:5rem 0; position:relative; overflow:hidden;
}
.stats-banner::before {
  content:''; position:absolute; top:0; right:0; bottom:0; width:40%;
  background:linear-gradient(135deg,transparent,rgba(192,112,64,.08));
}
.stats-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:2rem;
  text-align:center; position:relative;
}
.stat-item { position:relative }
.stat-item:not(:last-child)::after {
  content:''; position:absolute; right:0; top:15%; bottom:15%;
  width:1px; background:rgba(255,255,255,.08);
}
.stat-item .number, .stat-item [data-target] {
  display:block; font-family:var(--font-serif);
  font-size:clamp(2rem,4vw,3rem); font-weight:700;
  color:var(--accent); line-height:1; margin-bottom:.5rem; letter-spacing:-.02em;
}
.stat-item .label, .stat-item .stat-label {
  display:block; font-size:.74rem; font-weight:500;
  color:rgba(255,255,255,.4); letter-spacing:.08em; text-transform:uppercase;
}

/* ── CONTACT SNAPSHOT ───────────────────────────────── */
.contact-snapshot { padding:6rem 0 }
.contact-snapshot-grid { display:grid; grid-template-columns:1fr 1fr; gap:2.5rem; align-items:start }
.contact-info-box {
  background:var(--primary-darker);
  border-radius:var(--r-xl); padding:2.5rem; box-shadow:var(--shadow-lg);
}
.contact-info-box h3 { color:rgba(255,255,255,.9); margin-bottom:1.75rem; font-size:1.3rem }
.contact-row { display:flex; align-items:flex-start; gap:.9rem; margin-bottom:1.1rem }
.contact-row .icon { width:36px; height:36px; flex-shrink:0; border-radius:var(--r-md); background:rgba(255,255,255,.06); display:flex; align-items:center; justify-content:center; font-size:.95rem }
.contact-row .info .label { display:block; font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.3); margin-bottom:.15rem }
.contact-row .info .value { font-weight:500; color:rgba(255,255,255,.88); font-size:.9rem }
.contact-row .info a { color:rgba(255,255,255,.65) }
.contact-row .info a:hover { color:var(--white) }
.contact-table { width:100%; border-collapse:collapse }
.contact-table td { padding:.62rem 0; border-bottom:1px solid rgba(255,255,255,.07); font-size:.88rem; color:rgba(255,255,255,.78); vertical-align:top }
.contact-table td:last-child { border-bottom:none }
.contact-table .icon { padding-right:.75rem; width:30px }
.contact-table a { color:rgba(255,255,255,.6) }
.contact-table a:hover { color:var(--white) }
.map-placeholder { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); min-height:320px; display:flex; align-items:center; justify-content:center }
.map-inner { text-align:center; padding:2rem; display:flex; flex-direction:column; align-items:center; gap:.75rem }
.map-pin { font-size:3rem }
.map-inner p { color:var(--text-muted); font-size:.9rem }
.map-inner strong { color:var(--text); font-size:1.05rem }

/* ── HOURS TABLE ────────────────────────────────────── */
.hours-table { width:100%; border-collapse:collapse }
.hours-table td { padding:.52rem 0; border-bottom:1px solid rgba(255,255,255,.07); font-size:.88rem; color:rgba(255,255,255,.78) }
.hours-table td:first-child { font-weight:600; width:45% }
.hours-table td:last-child  { color:rgba(255,255,255,.5) }
.hours-closed { color:rgba(255,255,255,.22)!important; font-style:italic; font-weight:400!important }

/* ── PAGE HERO (inner pages) ─────────────────────────── */
.page-hero {
  background:var(--primary-darker);
  padding:4rem 0 2.5rem; position:relative; overflow:hidden;
}
.page-hero::before {
  content:''; position:absolute; top:0; right:0; bottom:0; width:50%;
  background:linear-gradient(135deg,transparent,rgba(192,112,64,.06));
}
.page-hero::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:1px;
  background:rgba(255,255,255,.05);
}
.page-hero .container { position:relative }
.page-hero h1 { color:var(--white); letter-spacing:-.025em }
.page-hero p, .page-hero-subtitle { color:rgba(255,255,255,.55); max-width:560px; margin-top:.75rem; font-size:1.05rem }
.breadcrumb { display:flex; align-items:center; gap:.5rem; margin-bottom:1.5rem; flex-wrap:wrap }
.breadcrumb a { color:rgba(255,255,255,.38); font-size:.8rem; transition:color var(--dur) var(--ease) }
.breadcrumb a:hover { color:rgba(255,255,255,.8) }
.breadcrumb span, .breadcrumb-sep { color:rgba(255,255,255,.2); font-size:.8rem }

/* ── SIDEBAR LAYOUT ─────────────────────────────────── */
.content-with-sidebar { display:grid; grid-template-columns:1fr 300px; gap:2.5rem; align-items:start }
.content-with-sidebar > * { min-width:0 }
.sidebar > * { margin-bottom:1.5rem }
.sidebar > *:last-child { margin-bottom:0 }

/* ── ACCORDION ──────────────────────────────────────── */
.accordion-item {
  background:var(--white); border:1px solid var(--border); border-radius:var(--r-lg);
  margin-bottom:.5rem; overflow:hidden;
  transition:border-color var(--dur) var(--ease);
}
.accordion-item.open { border-color:var(--accent) }
.accordion-header {
  width:100%; background:none; border:none; padding:1.05rem 1.3rem;
  display:flex; align-items:center; justify-content:space-between;
  cursor:pointer; text-align:left; font-size:.88rem; font-weight:600;
  color:var(--text); transition:color var(--dur) var(--ease); gap:.75rem;
}
.accordion-header:hover { color:var(--accent) }
.accordion-arrow { font-size:.72rem; color:var(--accent); flex-shrink:0; transition:transform var(--dur) var(--ease) }
.accordion-item.open .accordion-arrow { transform:rotate(180deg) }
.accordion-body { max-height:0; overflow:hidden; transition:max-height .36s var(--ease) }
.accordion-item.open .accordion-body { max-height:600px }
.accordion-body-inner { padding:0 1.3rem 1.3rem; font-size:.875rem; color:var(--text-muted); line-height:1.7 }

/* ── ALERTS ─────────────────────────────────────────── */
.alert { display:flex; gap:.85rem; align-items:flex-start; padding:1rem 1.2rem; border-radius:var(--r-lg); margin-bottom:.8rem; border:1px solid transparent }
.alert:last-child { margin-bottom:0 }
.alert-icon { font-size:1.1rem; flex-shrink:0; margin-top:.1rem }
.alert h4 { font-size:.86rem; margin-bottom:.25rem; font-family:var(--font-sans) }
.alert p  { font-size:.84rem }
.alert-info    { background:#eff6ff; border-color:#bfdbfe } .alert-info h4    { color:#1e40af }
.alert-warning { background:#fffbeb; border-color:#fde68a } .alert-warning h4 { color:#92400e }
.alert-success { background:var(--accent-light); border-color:#fed7aa } .alert-success h4 { color:var(--accent-dark) }
.alert-danger  { background:#fff5f5; border-color:#fecaca } .alert-danger h4  { color:#991b1b }

/* ── ARRÊTÉS TABLE ──────────────────────────────────── */
.arrete-section { margin-bottom:2.5rem }
.arrete-section h3 {
  font-size:.78rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--white); padding:.72rem 1.3rem;
  background:var(--primary-darker);
  border-radius:var(--r-lg) var(--r-lg) 0 0; font-family:var(--font-sans);
}
.arrete-table { width:100%; border-collapse:collapse; background:var(--white); border-radius:0 0 var(--r-lg) var(--r-lg); overflow:hidden; box-shadow:var(--shadow-sm); border:1px solid var(--border); border-top:none }
.arrete-table th { background:var(--surface); color:var(--text-muted); font-size:.68rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; padding:.7rem 1.2rem; text-align:left; border-bottom:1px solid var(--border) }
.arrete-table td { padding:.75rem 1.2rem; font-size:.875rem; border-bottom:1px solid var(--border-faint); vertical-align:middle; color:var(--text-muted) }
.arrete-table tr:last-child td { border-bottom:none }
.arrete-table tbody tr { transition:background var(--dur) var(--ease) }
.arrete-table tbody tr:hover td { background:var(--surface) }
.arrete-num { font-family:ui-monospace,monospace; font-size:.75rem; font-weight:600; background:var(--accent-light); color:var(--accent-dark); border-radius:var(--r-sm); padding:.17rem .5rem }
.status-perm { display:inline-block; padding:.15rem .55rem; background:var(--accent-light); color:var(--accent-dark); border-radius:var(--r-full); font-size:.68rem; font-weight:700 }

/* ── COA + PLUI ─────────────────────────────────────── */
.coa-display { background:var(--primary-darker); border-radius:var(--r-xl); padding:2.5rem; text-align:center; position:relative; overflow:hidden; box-shadow:var(--shadow-md) }
.coa-display::before { content:'⚜'; position:absolute; font-size:10rem; opacity:.04; top:50%; left:50%; transform:translate(-50%,-50%); pointer-events:none }
.coa-shield { width:84px; height:104px; margin:0 auto 1.5rem; background:linear-gradient(160deg,#991b1b,#7a1a1a); clip-path:polygon(0 0,100% 0,100% 72%,50% 100%,0 72%); display:flex; align-items:center; justify-content:center; font-size:1.9rem; box-shadow:0 8px 24px rgba(0,0,0,.3) }
.coa-display h3 { color:rgba(255,255,255,.85); margin-bottom:.75rem; font-size:1.1rem }
.coa-display p, .coa-desc { color:rgba(255,255,255,.45); font-size:.84rem; font-style:italic; line-height:1.65 }
.plui-card { background:var(--primary-darker); border-radius:var(--r-xl); padding:2rem; border:1px solid rgba(255,255,255,.04); position:relative; overflow:hidden; box-shadow:var(--shadow-lg); margin-bottom:1.5rem }
.plui-card h2, .plui-card h3 { color:rgba(255,255,255,.92); margin-bottom:.65rem; font-size:1.25rem }
.plui-card h2 { font-size:1.5rem }
.plui-card p  { color:rgba(255,255,255,.72); font-size:.9rem; margin-bottom:1.25rem; line-height:1.65 }
.plui-card p strong { color:rgba(255,255,255,.95) }
.btn-outline-white { color:#fff; border:1.5px solid rgba(255,255,255,.45); border-radius:var(--r-full); padding:.55rem 1.3rem; font-weight:700; font-size:.88rem; text-decoration:none; transition:all var(--dur) var(--ease) }
.btn-outline-white:hover { background:rgba(255,255,255,.12); border-color:#fff; color:#fff }
.plui-btn { display:inline-flex; align-items:center; gap:.4rem; background:var(--accent); color:var(--white); border-radius:var(--r-md); padding:.62rem 1.2rem; font-weight:700; font-size:.86rem; transition:all var(--dur) var(--ease) }
.plui-btn:hover { background:var(--accent-hover); transform:translateY(-1px) }

/* ── FORM ───────────────────────────────────────────── */
.form-group { margin-bottom:1.2rem }
.form-label { display:block; font-size:.82rem; font-weight:600; color:var(--text); margin-bottom:.4rem }
.form-control {
  width:100%; padding:.68rem 1rem; border:1.5px solid var(--border);
  border-radius:var(--r-md); font-size:.9rem; color:var(--text);
  background:var(--white); outline:none; font-family:var(--font-sans);
  transition:border-color var(--dur), box-shadow var(--dur);
  -webkit-appearance:none;
}
.form-control::placeholder { color:var(--text-faint) }
.form-control:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(192,112,64,.12) }
textarea.form-control { min-height:130px; resize:vertical; line-height:1.6 }
.form-select { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2364748b' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right .9rem center; padding-right:2.5rem; cursor:pointer }

/* ── FOOTER ─────────────────────────────────────────── */
footer {
  background:var(--primary-darker);
  border-top:1px solid rgba(255,255,255,.04);
  padding:5rem 0 0;
}
.footer-grid {
  display:grid; grid-template-columns:2fr 1fr 1fr 1.2fr; gap:3rem;
  padding-bottom:3.5rem; border-bottom:1px solid rgba(255,255,255,.06);
}
.footer-brand .logo { display:flex; align-items:center; gap:.8rem; margin-bottom:1.25rem }
.logo-circle { width:46px; height:56px; flex-shrink:0 }
.logo-circle img { width:100%; height:100%; object-fit:contain; display:block }
.logo-text { font-weight:700; color:var(--white); font-size:.95rem; font-family:var(--font-serif) }
.logo-sub  { color:rgba(255,255,255,.28); font-size:.68rem; margin-top:1px }
.footer-brand p { font-size:.84rem; color:rgba(255,255,255,.35); line-height:1.8; margin-bottom:1.25rem }
.footer-col h4 { font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:1.25rem; font-family:var(--font-sans) }
.footer-col ul { list-style:none }
.footer-col li { margin-bottom:.55rem }
.footer-col a { font-size:.84rem; color:rgba(255,255,255,.35); transition:color var(--dur) var(--ease), padding-left var(--dur) var(--ease); display:inline-block }
.footer-col a:hover { color:rgba(255,255,255,.82); padding-left:4px }
.footer-contact-item { display:flex; gap:.65rem; margin-bottom:.75rem; font-size:.84rem; color:rgba(255,255,255,.35); align-items:flex-start }
.footer-contact-item .icon { color:var(--accent); flex-shrink:0; margin-top:.1rem }
.footer-contact-item a { color:rgba(255,255,255,.35) }
.footer-contact-item a:hover { color:rgba(255,255,255,.8) }
.footer-bottom { padding:1.5rem 0; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.75rem; font-size:.74rem; color:rgba(255,255,255,.18) }
.footer-bottom a { color:rgba(255,255,255,.25) }
.footer-bottom a:hover { color:rgba(255,255,255,.6) }

/* ── REVEAL ANIMATIONS ──────────────────────────────── */
.reveal { opacity:0; transform:translateY(18px); transition:opacity .6s var(--ease),transform .6s var(--ease) }
.reveal.visible { opacity:1; transform:translateY(0) }
.reveal-delay-1 { transition-delay:.1s }
.reveal-delay-2 { transition-delay:.2s }
.reveal-delay-3 { transition-delay:.3s }
@keyframes fadeIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
.page { display:none } .page.active { display:block; animation:fadeIn .3s var(--ease) }

/* ── SIDEBAR CARDS ──────────────────────────────────── */
.content-sidebar { display:flex; flex-direction:column; gap:1.5rem }
.sidebar-card { background:var(--white); border:1px solid var(--border); border-radius:var(--r-xl); padding:1.75rem }
.sidebar-card h3 { font-size:1rem; margin-bottom:1.1rem; padding-bottom:.72rem; border-bottom:1px solid var(--border-faint); color:var(--text) }
.info-table { width:100%; border-collapse:collapse; font-size:.86rem }
.info-table th { text-align:left; padding:.52rem .25rem; color:var(--text-faint); font-weight:600; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; width:42%; vertical-align:top }
.info-table td { padding:.52rem .25rem; color:var(--text-muted); border-bottom:1px solid var(--border-faint) }
.info-table tr:last-child td { border-bottom:none }
.sidebar-links { list-style:none }
.sidebar-links li { border-bottom:1px solid var(--border-faint) }
.sidebar-links li:last-child { border-bottom:none }
.sidebar-links a { display:block; padding:.65rem 0; font-size:.86rem; color:var(--text-muted); transition:color var(--dur) var(--ease), padding-left var(--dur) var(--ease) }
.sidebar-links a:hover { color:var(--accent); padding-left:4px }

/* ── INFO BLOCKS ────────────────────────────────────── */
.info-block { background:var(--surface); border:1px solid var(--border-faint); border-radius:var(--r-lg); padding:1.4rem }
.info-block h4 { font-size:.86rem; color:var(--accent-dark); margin-bottom:.6rem; font-family:var(--font-sans) }
.info-block p  { font-size:.875rem }

.alerts-grid { display:grid; gap:.8rem }

/* ── MISSION BLOCKS ─────────────────────────────────── */
.mission-block { background:var(--surface); border:1px solid var(--border-faint); border-radius:var(--r-lg); padding:1.5rem; transition:border-color var(--dur) var(--ease) }
.mission-block:hover { border-color:var(--accent) }
.mission-icon { font-size:1.6rem; margin-bottom:.75rem }
.mission-block h4 { font-size:.95rem; color:var(--text); margin-bottom:.45rem }
.mission-block p  { font-size:.875rem }

/* ── CONSEIL MUNICIPAL ──────────────────────────────── */
.conseil-group-photo { width:100%; border-radius:var(--r-lg); overflow:hidden; margin-bottom:2rem; box-shadow:var(--shadow-md) }
.conseil-group-photo img { width:100%; height:260px; object-fit:cover; display:block }
.conseil-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:.5rem; margin-top:1.5rem }
.conseiller-card { position:relative; aspect-ratio:1/1; border-radius:var(--r-lg); overflow:hidden; cursor:default }
.conseiller-card:hover .conseiller-photo img { transform:scale(1.06) }
.conseiller-card:hover .conseiller-overlay { background:linear-gradient(to top, rgba(0,0,0,.75) 0%, transparent 60%) }
.conseiller-photo { width:100%; height:100%; border-radius:0; border:none; box-shadow:none }
.conseiller-photo img { width:100%; height:100%; object-fit:cover; object-position:center 15%; display:block; transition:transform .35s ease }
.conseiller-overlay { position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.58) 0%, transparent 55%); transition:background .3s ease }
.conseiller-caption { position:absolute; bottom:0; left:0; right:0; padding:.5rem .65rem .5rem }
.conseiller-name { color:#fff; font-weight:600; font-size:.88rem; font-family:var(--font-serif); text-shadow:0 1px 4px rgba(0,0,0,.4); display:block }
.conseiller-fonction { color:rgba(255,255,255,.82); font-size:.72rem; font-weight:500; display:block; margin-top:.1rem; text-shadow:0 1px 3px rgba(0,0,0,.4) }

/* ── PAGE CONTENT ───────────────────────────────────── */
.content-main > * { margin-bottom:1.75rem }
.content-main > *:last-child { margin-bottom:0 }
.page-content { padding:4rem 0 5rem }
.card-title { font-size:1.1rem; margin-bottom:1.2rem; padding-bottom:.8rem; border-bottom:2px solid var(--border-faint); color:var(--text); font-family:var(--font-serif) }
.page-hero-subtitle { color:rgba(255,255,255,.55); font-size:1.05rem; max-width:560px; margin-top:.75rem }
.news-section { background:var(--white) }

/* ── NEWS SECTION ───────────────────────────────────── */
.news-section { background:var(--surface) }

/* ── RESPONSIVE ─────────────────────────────────────── */
@media(max-width:1100px) {
  .footer-grid { grid-template-columns:1fr 1fr; gap:2.5rem }
  .content-with-sidebar { grid-template-columns:1fr }
  .content-sidebar { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem }
  .sidebar { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem }
  .sidebar > * { margin-bottom:0 }
  .stats-grid { grid-template-columns:repeat(2,1fr) }
  .stat-item::after { display:none }
}
@media(max-width:900px) {
  .contact-snapshot-grid { grid-template-columns:1fr }
  .quick-links-grid, .quick-links-inner { grid-template-columns:repeat(3,1fr) }
  .hero { height:400px }
  .nav-links {
    display:none; position:fixed; top:66px; left:0; right:0;
    background:var(--white); flex-direction:column;
    padding:1.25rem 1.5rem; gap:.2rem;
    border-top:1px solid var(--border); box-shadow:var(--shadow-lg); z-index:999;
  }
  .nav-links.open { display:flex }
  .nav-links a { font-size:.95rem; padding:.72rem 1rem; border-radius:var(--r-md) }
  .hamburger { display:flex }
  .nav-right .nav-contact-btn { display:none }
  .dropdown {
    display:none; position:static; transform:none; box-shadow:none;
    border:none; border-radius:0; min-width:0; padding:0;
    background:var(--surface); margin:0 0 .25rem .75rem;
  }
  .dropdown::before { display:none }
  .nav-links > li:hover > .dropdown { display:none }
  .nav-links > li.open > .dropdown { display:block }
  .dropdown > li > a { font-size:.88rem; padding:.55rem .85rem }
  .nav-links a.has-dropdown::after { display:none }
}
@media(max-width:640px) {
  .container { padding:0 1.25rem }
  .section  { padding:4rem 0 }
  .quick-links-grid, .quick-links-inner { grid-template-columns:repeat(2,1fr) }
  .hero { height:auto; min-height:300px }
  .hero-overlay-text { position:relative; inset:auto; padding:2.5rem 1.25rem 5rem }
  .hero-overlay-text h1 { font-size:clamp(1.9rem,8vw,2.6rem) }
  .hero-buttons, .hero-actions { margin-top:1.5rem }
  .hero-controls { bottom:1.25rem }
  .hero-overlay-text h1 { font-size:clamp(1.8rem,8vw,2.8rem) }
  .stats-grid { grid-template-columns:repeat(2,1fr) }
  .footer-grid { grid-template-columns:1fr; gap:2rem }
  .sidebar { grid-template-columns:1fr }
  .content-sidebar { grid-template-columns:1fr }
  .footer-bottom { justify-content:center; text-align:center }
  .section-heading-row { flex-direction:column; align-items:flex-start }
  .conseil-grid { grid-template-columns:repeat(auto-fill,minmax(120px,1fr)) }
}