/* ════════════════════════════════════════════════════════════════
   CIMPLE — Skin CHANEL (calque exact home Marianne CIMPLE-DEF)
   Pur noir / blanc · Montserrat 200-300 · hairlines 1px · lettrage espacé
   Référence : /Users/emmanuelklein/Projets-Claude/CIMPLE-DEF/index.html
   ──────────────────────────────────────────────────────────────── */

:root {
  --noir: #000;
  --texte: #1a1a1a;
  --blanc: #fff;
  --gris-clair: #e5e5e5;
  --gris-texte: #555;
  --gris-label: #bbb;
  --gris-soft: #888;
  --fond: #fff;
  --carte: #fff;

  /* override variables existantes */
  --c1: #1a1a1a !important;
  --c2: #1a1a1a !important;
  --bg: #fff !important;
  --text: #1a1a1a !important;
  --text-soft: #555 !important;
  --line: rgba(26, 26, 26, 0.10) !important;
  --card: #fff !important;
  --font-h: 'Montserrat', sans-serif !important;
  --font-b: 'Montserrat', sans-serif !important;
}

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;500;600;700&display=swap');

* { box-sizing: border-box; }

body {
  font-family: 'Montserrat', sans-serif !important;
  background: #fff !important;
  color: #1a1a1a !important;
  font-weight: 300 !important;
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0.005em;
}

/* ── Topbar Chanel : noir profond + Montserrat espacé ──────── */
.topbar, .topbar-main {
  background: #000 !important;
  color: #fff !important;
  padding: 22px 56px !important;
  border-bottom: none !important;
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
}
.topbar .brand, .topbar-main .brand,
.topbar .brand a, .topbar-main .brand a {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.92rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.32em !important;
  text-transform: uppercase !important;
  color: #fff !important;
  text-decoration: none !important;
}
.topbar nav, .topbar-main nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
}
.topbar nav a, .topbar-main nav a {
  color: rgba(255, 255, 255, 0.65) !important;
  font-size: 0.68rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.32em !important;
  text-transform: uppercase !important;
  margin-left: 28px !important;
  text-decoration: none !important;
  transition: color 0.3s ease;
  padding: 4px 0;
}
.topbar nav a:hover, .topbar-main nav a:hover {
  color: #fff !important;
}

/* Filet hairline tricolore en tête (Marianne) */
body::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: #e5e5e5;
  z-index: 9999;
  pointer-events: none;
}

/* ── Hero photo plein cadre + voile noir ──────────────────── */
.hero[role="banner"], header.hero {
  background:
    linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.65)),
    var(--hero-bg-url, url('https://commons.wikimedia.org/wiki/Special:FilePath/Village%20Neuf.jpg'));
  background-size: cover !important;
  background-position: center !important;
  color: #fff !important;
  padding: 160px 56px 130px !important;
  text-align: center;
  border-bottom: none !important;
  position: relative;
  overflow: hidden;
}
.hero[role="banner"]::after, header.hero::after {
  content: '';
  display: block;
  width: 40px;
  height: 1px;
  background: #fff;
  opacity: 0.4;
  margin: 36px auto 0;
}
.hero h1, .hero-title {
  font-family: 'Montserrat', sans-serif !important;
  font-size: clamp(2.4rem, 5vw, 4.6rem) !important;
  font-weight: 200 !important;
  color: #fff !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  line-height: 1.1 !important;
  margin: 0 !important;
}
.hero-eyelet {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.4em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.7) !important;
  margin-bottom: 28px !important;
  display: block;
}
.hero p, .hero-baseline {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 200 !important;
  font-size: clamp(14px, 1.6vw, 18px) !important;
  letter-spacing: 0.05em !important;
  color: rgba(255, 255, 255, 0.85) !important;
  text-transform: none !important;
  margin: 28px auto 0 !important;
  max-width: 720px;
  line-height: 1.6 !important;
}
.hero .signature {
  font-size: 9px !important;
  letter-spacing: 0.4em !important;
  color: rgba(255, 255, 255, 0.55) !important;
  margin-top: 32px !important;
}

/* ── Sections / titres ─────────────────────────────────────── */
.section-eyebrow, .eyelet {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.4em !important;
  text-transform: uppercase !important;
  color: #1a1a1a !important;
  opacity: 0.55;
  margin-bottom: 16px !important;
}
h2, h3, .section-title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 200 !important;
  color: #1a1a1a !important;
  letter-spacing: 0.04em !important;
}
h1, .section-title {
  font-size: clamp(1.8rem, 3.2vw, 2.6rem) !important;
}
h2 { font-size: clamp(1.4rem, 2.4vw, 2rem) !important; }
h3 { font-size: clamp(1.1rem, 1.8vw, 1.4rem) !important; font-weight: 300 !important; }

/* Filet hairline sous chaque h2 */
.section-title, main h2 {
  position: relative;
  padding-bottom: 18px;
}
.section-title::after, main h2::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 32px;
  height: 1px;
  background: #1a1a1a;
  opacity: 0.3;
}
.section-title { padding-bottom: 24px; }

/* ── Cartes ────────────────────────────────────────────────── */
.card, .recit, .person-card, .monument-card, .asso-card, .maire-card,
.elu-card, article {
  background: #fff !important;
  border: 1px solid rgba(26, 26, 26, 0.08) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.card:hover, .person-card:hover, .monument-card:hover, .asso-card:hover {
  border-color: #1a1a1a !important;
  transform: translateY(-2px);
}

/* ── Boutons ───────────────────────────────────────────────── */
button, .btn, a.btn, input[type="submit"], .monument-link, .person-link {
  background: #1a1a1a !important;
  color: #fff !important;
  border: 1px solid #1a1a1a !important;
  border-radius: 0 !important;
  padding: 14px 32px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.4em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  transition: all 0.3s ease;
  cursor: pointer;
  display: inline-block;
}
button:hover, .btn:hover, a.btn:hover, .monument-link:hover {
  background: #fff !important;
  color: #1a1a1a !important;
}

/* ── Liens corps ───────────────────────────────────────────── */
main a, footer a {
  color: #1a1a1a !important;
  border-bottom: 1px solid rgba(26, 26, 26, 0.3);
  text-decoration: none !important;
  transition: border-color 0.2s ease;
}
main a:hover, footer a:hover {
  border-bottom-color: #1a1a1a;
}
.topbar a, .topbar-main a, .hero a { border-bottom: none !important; }

/* ── Footer ────────────────────────────────────────────────── */
footer {
  background: #000 !important;
  color: rgba(255, 255, 255, 0.6) !important;
  padding: 80px 56px 50px !important;
  text-align: center;
  border-top: 1px solid #e5e5e5;
  font-size: 12px !important;
  letter-spacing: 0.05em;
  font-weight: 300 !important;
}
footer h4, footer h5 {
  color: rgba(255, 255, 255, 0.95) !important;
  font-size: 10px !important;
  letter-spacing: 0.4em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  margin-bottom: 14px !important;
}
footer h2, footer h3 { color: #fff !important; }
footer h2::after, footer h3::after { background: rgba(255,255,255,0.3) !important; }
footer a {
  color: rgba(255, 255, 255, 0.85) !important;
  border-bottom-color: rgba(255, 255, 255, 0.2) !important;
}

/* Bandeau démo masqué */
.demo-bar { display: none !important; }

/* ── Search bar Chanel ─────────────────────────────────────── */
#cimple-search-host input,
.cimple-search-input,
input[type="search"], input[type="text"] {
  background: #fff !important;
  border: 1px solid rgba(26,26,26,0.15) !important;
  border-bottom: 1px solid #1a1a1a !important;
  border-radius: 0 !important;
  padding: 18px 22px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 14px !important;
  font-weight: 300 !important;
  letter-spacing: 0.04em !important;
  color: #1a1a1a !important;
  box-shadow: none !important;
}
#cimple-search-host input:focus,
.cimple-search-input:focus {
  outline: none !important;
  border-color: #1a1a1a !important;
}

/* ── Container ─────────────────────────────────────────────── */
.container, main.container {
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding: 80px 56px !important;
}

/* ── Tables / liste démarches sobres ───────────────────────── */
table { border-collapse: collapse; width: 100%; }
table th, table td {
  border-bottom: 1px solid rgba(26,26,26,0.08) !important;
  padding: 16px 12px !important;
  text-align: left;
  font-weight: 300;
}
table th {
  font-size: 10px !important;
  letter-spacing: 0.4em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  color: #1a1a1a !important;
}

/* Responsive */
@media (max-width: 760px) {
  .topbar, .topbar-main { padding: 16px 24px !important; }
  .topbar nav a, .topbar-main nav a { margin-left: 14px !important; font-size: 9px !important; }
  .hero[role="banner"], header.hero { padding: 100px 24px 80px !important; }
  .container, main.container { padding: 40px 24px !important; }
  footer { padding: 50px 24px 30px !important; }
}