/* Échos des Zones Humides — naturalist editorial theme
   Palette: Camargue lagoon teal + flamingo pink + reed gold on warm paper. */
:root{
  --lagoon:#0d5c63; --lagoon-d:#083338; --lagoon-l:#12868c;
  --flamingo:#e0728a; --flamingo-d:#c1526f;
  --reed:#c69a3f; --reed-d:#a67d29;
  --sand:#f2ebda; --paper:#fbf8f1; --card:#ffffff;
  --ink:#1f2f2e; --muted:#5f6f6e; --line:#e6ddc9;
  --maxw:1120px; --read:800px;
  --shadow:0 12px 30px -12px rgba(8,51,56,.28);
  --shadow-sm:0 4px 14px -6px rgba(8,51,56,.22);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'Source Sans 3',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:18px; line-height:1.7; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--lagoon); text-decoration:none}
a:hover{color:var(--flamingo-d)}
.container{max-width:var(--maxw); margin:0 auto; padding:0 22px; width:100%}

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(251,248,241,.86); backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .25s ease, background .25s ease;
}
.site-header.scrolled{box-shadow:0 6px 22px -14px rgba(8,51,56,.5)}
.header-inner{display:flex; align-items:center; justify-content:space-between; min-height:66px; gap:18px}
.brand{display:inline-flex; align-items:center; gap:9px; color:var(--lagoon); font-weight:700}
.brand-mark{color:var(--flamingo); flex:0 0 auto}
.brand-name{font-family:'Fraunces',Georgia,serif; font-size:1.28rem; letter-spacing:.1px; color:var(--lagoon-d)}
.brand-name em{color:var(--flamingo-d); font-style:italic; font-weight:600}
.main-nav{display:flex; align-items:center; gap:4px; flex-wrap:wrap}
.nav-link{
  color:var(--ink); font-weight:500; font-size:.96rem; padding:8px 12px; border-radius:8px;
  position:relative; white-space:nowrap;
}
.nav-link:hover{color:var(--lagoon); background:rgba(18,134,140,.08)}
.nav-link.is-active{color:var(--lagoon-d)}
.nav-link.is-active::after{
  content:""; position:absolute; left:12px; right:12px; bottom:2px; height:2px;
  background:var(--flamingo); border-radius:2px;
}
.nav-toggle{display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:8px}
.nav-toggle span{width:24px; height:2px; background:var(--lagoon-d); border-radius:2px; transition:.25s}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- Hero ---------- */
.hero{position:relative; color:#fff; overflow:hidden}
.hero-image{min-height:60vh; background-size:cover; background-position:center; display:flex; align-items:flex-end}
.hero-band{background:linear-gradient(135deg,var(--lagoon) 0%,var(--lagoon-d) 100%); min-height:38vh; display:flex; align-items:flex-end}
.hero-overlay{position:absolute; inset:0}
.hero-image .hero-overlay{background:linear-gradient(180deg,rgba(8,51,56,.34) 0%,rgba(8,51,56,.62) 78%,rgba(8,51,56,.78) 100%)}
.hero-band .hero-overlay{background:
  radial-gradient(1200px 400px at 88% -10%,rgba(18,134,140,.55),transparent 60%),
  radial-gradient(900px 500px at 0% 120%,rgba(224,114,138,.22),transparent 55%)}
.hero-inner{position:relative; z-index:2; padding:44px 22px 40px; max-width:var(--maxw)}
.hero-image .hero-inner{padding-top:120px}
.eyebrow{
  text-transform:uppercase; letter-spacing:.22em; font-size:.72rem; font-weight:600;
  color:#f3d9a6; margin:0 0 10px;
}
.hero h1{
  font-family:'Fraunces',Georgia,serif; font-weight:600; line-height:1.08;
  font-size:clamp(2rem,4.6vw,3.35rem); margin:0; max-width:16ch; text-shadow:0 2px 24px rgba(8,51,56,.35);
}
.hero-rule{display:block; width:74px; height:4px; border-radius:3px; background:var(--flamingo); margin:20px 0 16px}
.hero-lead{font-size:clamp(1.05rem,1.7vw,1.28rem); max-width:60ch; margin:0; color:rgba(255,255,255,.94); font-weight:400}

/* ---------- Dossiers (home) ---------- */
.dossiers{padding:56px 0 20px}
.dossiers-head{font-family:'Fraunces',serif; font-size:2rem; color:var(--lagoon-d); margin:0 0 6px}
.dossiers-sub{color:var(--muted); margin:0 0 30px; max-width:60ch}
.dossier-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.dossier-card{
  display:flex; flex-direction:column; background:var(--card); border:1px solid var(--line);
  border-radius:16px; overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .2s ease, box-shadow .2s ease;
}
.dossier-card:hover{transform:translateY(-5px); box-shadow:var(--shadow)}
.dossier-thumb{display:block; height:168px; background-size:cover; background-position:center}
.dossier-body{padding:18px 20px 22px; display:flex; flex-direction:column; gap:8px}
.dossier-title{font-family:'Fraunces',serif; font-size:1.28rem; color:var(--lagoon-d); font-weight:600}
.dossier-teaser{color:var(--muted); font-size:.98rem; line-height:1.55}
.dossier-more{color:var(--flamingo-d); font-weight:600; font-size:.9rem; margin-top:auto}

/* ---------- Article ---------- */
.article{max-width:var(--read); margin:0 auto; padding:52px 22px 20px}
.dossiers + .article{padding-top:26px}
.prose{font-size:1.075rem}
.prose h2{
  font-family:'Fraunces',serif; font-weight:600; color:var(--lagoon-d);
  font-size:1.72rem; line-height:1.2; margin:2.1em 0 .55em; padding-left:16px; position:relative;
}
.prose h2::before{content:""; position:absolute; left:0; top:.12em; bottom:.12em; width:5px; border-radius:3px; background:var(--flamingo)}
.prose h3{font-family:'Fraunces',serif; color:var(--lagoon); font-size:1.28rem; margin:1.6em 0 .4em}
.prose p{margin:0 0 1.15em}
.prose a{border-bottom:1px solid rgba(13,92,99,.28)}
.prose a:hover{border-color:var(--flamingo)}
.prose strong{color:var(--ink); font-weight:600}
.prose ul{list-style:none; margin:0 0 1.3em; padding:0}
.prose ul li{position:relative; padding-left:1.7em; margin:0 0 .6em}
.prose ul li::before{content:""; position:absolute; left:.15em; top:.62em; width:9px; height:9px; border-radius:50%; background:var(--reed)}
.prose .lead{font-size:1.2rem; color:var(--lagoon-d)}
.inline-figure{margin:2em 0}
.inline-figure img{border-radius:14px; box-shadow:var(--shadow); width:100%}
.inline-figure figcaption{font-size:.86rem; color:var(--muted); font-style:italic; text-align:center; margin-top:.7em}

/* Contact form (a-propos) */
.contact-form{display:flex; flex-direction:column; gap:14px; background:var(--sand); border:1px solid var(--line); border-radius:16px; padding:24px; margin:1.4em 0}
.contact-form label{display:flex; flex-direction:column; gap:6px; font-weight:600; color:var(--lagoon-d); font-size:.92rem}
.contact-form input,.contact-form textarea{
  font:inherit; padding:11px 13px; border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--ink);
}
.contact-form input:focus,.contact-form textarea:focus{outline:2px solid var(--lagoon-l); border-color:var(--lagoon-l)}
.contact-form button{
  align-self:flex-start; background:var(--lagoon); color:#fff; border:0; font-weight:600; font-size:1rem;
  padding:12px 26px; border-radius:30px; cursor:pointer; transition:background .2s ease, transform .12s ease;
}
.contact-form button:hover{background:var(--flamingo-d); transform:translateY(-1px)}

/* ---------- Footer ---------- */
.site-footer{background:var(--lagoon-d); color:rgba(255,255,255,.82); margin-top:60px; padding:52px 0 0}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:32px}
.foot-brand .foot-logo{display:inline-flex; margin-bottom:12px}
.foot-brand .brand-name{color:#fff; font-size:1.2rem}
.foot-brand .brand-mark{color:var(--flamingo)}
.foot-brand p{color:rgba(255,255,255,.72); font-size:.95rem; max-width:34ch}
.foot-col h3{font-family:'Fraunces',serif; color:#fff; font-size:1.05rem; margin:0 0 12px; font-weight:600}
.foot-col ul{list-style:none; margin:0; padding:0}
.foot-col li{margin:0 0 8px}
.foot-col a{color:rgba(255,255,255,.78); font-size:.94rem}
.foot-col a:hover{color:var(--flamingo)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.14); margin-top:44px; padding:20px 0}
.footer-bottom .container{display:flex; flex-wrap:wrap; gap:8px 24px; align-items:center; justify-content:space-between}
.footer-bottom p{margin:0; font-size:.82rem; color:rgba(255,255,255,.6)}
.footer-bottom .disclaimer{max-width:62ch}
.footer-bottom a{color:rgba(255,255,255,.78)}
.footer-bottom a:hover{color:var(--flamingo)}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .nav-toggle{display:flex}
  .main-nav{
    position:fixed; inset:66px 0 auto 0; flex-direction:column; align-items:stretch; gap:0;
    background:var(--paper); border-bottom:1px solid var(--line); padding:8px 14px 16px;
    box-shadow:var(--shadow); transform:translateY(-140%); transition:transform .3s ease; z-index:40;
  }
  .main-nav.open{transform:translateY(0)}
  .nav-link{padding:12px 8px; border-radius:8px}
  .nav-link.is-active::after{display:none}
  .nav-link.is-active{background:rgba(18,134,140,.1)}
  .dossier-grid{grid-template-columns:1fr 1fr; gap:18px}
  .footer-grid{grid-template-columns:1fr 1fr; gap:26px}
  .hero-image{min-height:52vh}
  .hero-image .hero-inner{padding-top:80px}
}
@media (max-width:560px){
  body{font-size:17px}
  .dossier-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .brand-name{font-size:1.1rem}
  .article{padding-top:36px}
}