:root {
  --vert: #2B5F3A;
  --brun: #7A5C3E;
  --or: #C4A35A;
  --texte: #1C1C1C;
  --fond: #FAFAF7;
  --gris: #6B7280;
  --gris-clair: #E5E7EB;
  --blanc: #FFFFFF;
  --rayon: 6px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 17px;
  line-height: 1.7;
  color: var(--texte);
  background: var(--fond);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--vert); text-decoration: none; }
a:hover { text-decoration: underline; }

.conteneur { max-width: 1200px; margin: 0 auto; padding: 0 1.25rem; }
.conteneur-etroit { max-width: 720px; margin: 0 auto; padding: 0 1.25rem; }

/* --- HEADER --- */
.entete {
  background: var(--blanc);
  border-bottom: 1px solid var(--gris-clair);
  position: sticky; top: 0; z-index: 100;
}
.entete-int {
  display: flex; align-items: center; justify-content: space-between;
  padding: .85rem 1.25rem; max-width: 1200px; margin: 0 auto;
}
.logo { font-size: 1.35rem; font-weight: 700; color: var(--vert); letter-spacing: -.02em; }
.logo span { color: var(--brun); font-weight: 400; }
.nav-liens { display: flex; gap: 1.5rem; list-style: none; }
.nav-liens a { color: var(--texte); font-size: .95rem; font-weight: 500; }
.nav-liens a:hover { color: var(--vert); }
.burger { display: none; background: none; border: none; cursor: pointer; padding: .5rem; }
.burger svg { width: 24px; height: 24px; stroke: var(--texte); }

/* --- HERO --- */
.hero {
  background: var(--vert);
  color: var(--blanc);
  padding: 3.5rem 1.25rem;
  text-align: center;
}
.hero h1 { font-size: 2rem; font-weight: 700; margin-bottom: .5rem; }
.hero p { font-size: 1.1rem; opacity: .9; max-width: 540px; margin: 0 auto; }

/* --- CARDS ARTICLES --- */
.grille-articles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
}
.carte {
  background: var(--blanc);
  border-radius: var(--rayon);
  overflow: hidden;
  border: 1px solid var(--gris-clair);
  transition: box-shadow .2s;
}
.carte:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.carte img { width: 100%; height: 200px; object-fit: cover; }
.carte-corps { padding: 1rem 1.15rem; }
.carte-categorie {
  font-size: .75rem; font-weight: 600; text-transform: uppercase;
  color: var(--vert); letter-spacing: .04em; margin-bottom: .35rem;
}
.carte-titre { font-size: 1.05rem; font-weight: 600; line-height: 1.35; margin-bottom: .5rem; }
.carte-titre a { color: var(--texte); }
.carte-titre a:hover { color: var(--vert); }
.carte-meta { font-size: .8rem; color: var(--gris); }

/* --- SECTIONS ACCUEIL --- */
.section { padding: 3rem 0; }
.section-titre {
  font-size: 1.5rem; font-weight: 700; margin-bottom: .25rem; color: var(--texte);
}
.section-lien { font-size: .9rem; color: var(--vert); font-weight: 500; }

.apropos-bloc {
  background: var(--blanc);
  border: 1px solid var(--gris-clair);
  border-radius: var(--rayon);
  padding: 2rem;
  display: flex; gap: 2rem; align-items: center;
}
.apropos-bloc p { color: var(--gris); line-height: 1.65; }

.newsletter-bloc {
  background: var(--vert);
  color: var(--blanc);
  border-radius: var(--rayon);
  padding: 2.5rem;
  text-align: center;
}
.newsletter-bloc h2 { font-size: 1.3rem; margin-bottom: .5rem; }
.newsletter-bloc p { opacity: .85; margin-bottom: 1.25rem; }
.newsletter-form { display: flex; gap: .5rem; max-width: 400px; margin: 0 auto; }
.newsletter-form input {
  flex: 1; padding: .6rem .85rem; border: none; border-radius: var(--rayon);
  font-size: .95rem;
}
.newsletter-form button {
  background: var(--or); color: var(--texte); border: none;
  padding: .6rem 1.25rem; border-radius: var(--rayon);
  font-weight: 600; cursor: pointer; font-size: .95rem;
}

/* --- ARTICLE --- */
.fil-ariane {
  font-size: .85rem; color: var(--gris); padding: 1rem 0;
}
.fil-ariane a { color: var(--gris); }
.fil-ariane a:hover { color: var(--vert); }

.article-entete { margin-bottom: 2rem; }
.article-categorie {
  font-size: .8rem; font-weight: 600; text-transform: uppercase;
  color: var(--vert); letter-spacing: .04em; margin-bottom: .5rem;
}
.article-titre { font-size: 1.85rem; font-weight: 700; line-height: 1.25; margin-bottom: .75rem; }
.article-meta { font-size: .88rem; color: var(--gris); display: flex; gap: 1rem; flex-wrap: wrap; }

.article-img {
  width: 100%; border-radius: var(--rayon);
  margin: 1.5rem 0; height: auto;
}

.article-corps h2 {
  font-size: 1.35rem; font-weight: 700; margin-top: 2rem; margin-bottom: .75rem;
  color: var(--texte);
}
.article-corps h3 {
  font-size: 1.1rem; font-weight: 600; margin-top: 1.5rem; margin-bottom: .5rem;
}
.article-corps p { margin-bottom: 1rem; }
.article-corps ul, .article-corps ol {
  margin: 1rem 0; padding-left: 1.5rem;
}
.article-corps li { margin-bottom: .4rem; }
.article-corps blockquote {
  border-left: 3px solid var(--or);
  padding: .75rem 1.25rem;
  margin: 1.5rem 0;
  background: rgba(196,163,90,.06);
  font-style: italic;
  color: var(--gris);
}

/* --- PARTAGE SOCIAL --- */
.partage {
  display: flex; gap: .75rem; margin-top: 2rem; padding-top: 1.5rem;
  border-top: 1px solid var(--gris-clair);
}
.partage a {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .45rem .85rem; border-radius: var(--rayon);
  font-size: .82rem; font-weight: 500;
  background: var(--gris-clair); color: var(--texte);
}
.partage a:hover { background: var(--vert); color: var(--blanc); text-decoration: none; }

/* --- A LIRE AUSSI --- */
.connexe { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--gris-clair); }
.connexe h2 { font-size: 1.2rem; font-weight: 700; margin-bottom: 1rem; }
.connexe-grille {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
}

/* --- CATEGORIE / LISTING --- */
.listing-entete {
  padding: 2.5rem 0 1.5rem;
}
.listing-entete h1 { font-size: 1.65rem; font-weight: 700; margin-bottom: .4rem; }
.listing-entete p { color: var(--gris); }

/* --- PAGES LEGALES --- */
.legal { padding: 2.5rem 0 4rem; }
.legal h1 { font-size: 1.65rem; font-weight: 700; margin-bottom: 1.5rem; }
.legal h2 { font-size: 1.2rem; font-weight: 600; margin-top: 2rem; margin-bottom: .75rem; }
.legal p, .legal li { margin-bottom: .75rem; }
.legal ul { padding-left: 1.5rem; }

/* --- FOOTER --- */
.pied {
  background: var(--texte);
  color: rgba(255,255,255,.7);
  padding: 2.5rem 1.25rem;
  margin-top: 4rem;
  font-size: .88rem;
}
.pied-int {
  max-width: 1200px; margin: 0 auto;
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;
}
.pied a { color: rgba(255,255,255,.7); }
.pied a:hover { color: var(--blanc); }
.pied-liens { display: flex; gap: 1.25rem; list-style: none; }

/* --- 404 --- */
.page-404 { text-align: center; padding: 5rem 1.25rem; }
.page-404 h1 { font-size: 4rem; color: var(--gris-clair); font-weight: 700; }
.page-404 p { font-size: 1.15rem; color: var(--gris); margin: 1rem 0 2rem; }
.page-404 a {
  display: inline-block; background: var(--vert); color: var(--blanc);
  padding: .65rem 1.5rem; border-radius: var(--rayon); font-weight: 600;
}

/* --- COOKIE BANNER --- */
.cookie-bandeau {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--texte); color: rgba(255,255,255,.9);
  padding: .85rem 1.25rem;
  display: flex; justify-content: center; align-items: center; gap: 1rem;
  font-size: .85rem; z-index: 200;
}
.cookie-bandeau button {
  background: var(--or); color: var(--texte); border: none;
  padding: .4rem 1rem; border-radius: var(--rayon);
  font-weight: 600; cursor: pointer; font-size: .85rem;
}

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
  .grille-articles { grid-template-columns: 1fr; }
  .connexe-grille { grid-template-columns: 1fr; }
  .nav-liens { display: none; }
  .nav-liens.ouverte {
    display: flex; flex-direction: column;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--blanc); border-bottom: 1px solid var(--gris-clair);
    padding: 1rem 1.25rem; gap: .75rem;
  }
  .burger { display: block; }
  .hero h1 { font-size: 1.5rem; }
  .article-titre { font-size: 1.4rem; }
  .apropos-bloc { flex-direction: column; }
  .newsletter-form { flex-direction: column; }
  .pied-int { flex-direction: column; text-align: center; }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .grille-articles { grid-template-columns: repeat(2, 1fr); }
  .connexe-grille { grid-template-columns: repeat(2, 1fr); }
}