/* ============================================================
   Le Jet d'Eau Coopérative — Main Stylesheet
   ============================================================ */

:root {
  --navy:       #1a3a5c;
  --navy-dark:  #122840;
  --teal:       #2d6a8a;
  --cream:      #faf6ef;
  --cream-dark: #f0ead8;
  --dark-section:#2a5066;
  --steel-bg:   #2c5f7a;
  --text:       #2c2c2c;
  --text-light: #5a6472;
  --border:     #d8d0c0;
  --card-bg:    #f4ede0;
}

/* ── RESET ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family: 'Outfit', sans-serif;
  color: var(--text);
  background: var(--cream);
  line-height: 1.7;
}
img { max-width:100%; height:auto; display:block; }
a { text-decoration:none; color:inherit; }
ul { list-style:none; }

/* ── TYPOGRAPHY ── */
h1,h2,h3,h4,h5 { font-weight:700; color:var(--navy); line-height:1.2; }
h1 { font-size:clamp(2.2rem,4vw,3.4rem); }
h2.section-title { font-size:clamp(1.8rem,3vw,3rem); margin-bottom:2rem; }
h3.sub-title { font-size:1.2rem; margin-bottom:.75rem; }
p.lead { font-size:1rem; color:var(--text-light); line-height:1.8; }
p.text-light { font-size:.9rem; color:var(--text-light); line-height:1.8; }

/* ── SECTIONS ── */
.jde-section            { padding:80px 6%; }
.bg-cream               { background:var(--cream); }
.bg-cream-dark          { background:var(--cream-dark); }
.bg-white               { background:#fff; }
.bg-dark                { background:var(--dark-section); }
.bg-steel               { background:var(--steel-bg); }

/* ── NAV ── */
#site-header {
  position:sticky; top:0; z-index:200;
  background:rgba(250,246,239,.97);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
  padding:0 5%;
  display:flex; align-items:center; justify-content:space-between;
  height:64px;
}
.site-logo { font-size:1rem; font-weight:700; color:var(--navy); line-height:1.2; }
.site-logo span { font-weight:300; font-size:.8rem; opacity:.7; display:block; }
#primary-navigation ul { display:flex; gap:2rem; }
#primary-navigation a {
  font-size:.875rem; font-weight:500; color:var(--navy);
  opacity:.85; transition:opacity .2s;
}
#primary-navigation a:hover { opacity:1; }
.nav-cta {
  background:var(--navy) !important; color:#fff !important;
  padding:8px 18px; border-radius:4px; opacity:1 !important;
}
.menu-toggle {
  display:none; background:none; border:none;
  font-size:1.5rem; color:var(--navy); cursor:pointer;
}

/* ── BUTTONS ── */
.btn-primary {
  display:inline-block; background:var(--navy); color:#fff;
  padding:14px 28px; border:2px solid var(--navy);
  font-family:'Outfit',sans-serif; font-size:.95rem; font-weight:600;
  cursor:pointer; transition:all .25s;
}
.btn-primary:hover { background:var(--navy-dark); border-color:var(--navy-dark); color:#fff; }
.btn-outline {
  display:inline-block; background:transparent; color:var(--navy);
  padding:14px 28px; border:2px solid var(--navy);
  font-family:'Outfit',sans-serif; font-size:.95rem; font-weight:600;
  cursor:pointer; transition:all .25s;
}
.btn-outline:hover { background:var(--navy); color:#fff; }
.btn-outline-light {
  display:inline-block; background:transparent; color:#fff;
  padding:14px 28px; border:2px solid rgba(255,255,255,.7);
  font-family:'Outfit',sans-serif; font-size:.95rem; font-weight:600;
  cursor:pointer; transition:all .25s;
}
.btn-outline-light:hover { background:rgba(255,255,255,.15); }
.btn-group { display:flex; gap:1rem; flex-wrap:wrap; }

/* ── HERO ── */
.hero-wrap {
  position:relative; min-height:92vh;
  display:flex; align-items:center; overflow:hidden;
}
.hero-bg {
  position:absolute; inset:0;
  background:
    linear-gradient(135deg,rgba(250,246,239,.92) 45%,rgba(176,208,225,.35) 100%),
    url('https://images.unsplash.com/photo-1586348943529-beaae6c28db9?w=1600&q=80') center/cover no-repeat;
}
.hero-mosaic {
  position:absolute; right:0; top:0; bottom:0; width:45%;
  display:grid; grid-template-rows:1fr 1fr 1fr; grid-template-columns:1fr 1fr;
}
.hero-tile { opacity:.35; }
.hero-tile:nth-child(1){background:#b8d4e8;}
.hero-tile:nth-child(2){background:#d8e8f0;}
.hero-tile:nth-child(3){background:#e8e0d0;}
.hero-tile:nth-child(4){background:#c8dce8;}
.hero-tile:nth-child(5){background:#b8d0e4;}
.hero-tile:nth-child(6){background:#d0c8b8;}
.hero-content { position:relative; z-index:2; padding:0 8% 0 6%; max-width:700px; }
.hero-content h1 { margin-bottom:1.5rem; }
.hero-content p  { font-size:1.1rem; color:#4a5a6a; margin-bottom:2.5rem; font-weight:300; }

/* ── HERO BANNER (full-width overlay) ── */
.hero-banner {
  position:relative; min-height:60vh;
  display:flex; align-items:flex-end;
  background:center/cover no-repeat; padding:60px 6%;
}
.hero-banner::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(to right,rgba(250,246,239,.88) 50%,rgba(250,246,239,.2));
}
.hero-banner .inner { position:relative; z-index:2; max-width:600px; }
.hero-banner h2 { font-size:clamp(2.5rem,5vw,4rem); margin-bottom:1.5rem; }
.hero-banner p  { font-size:1rem; color:#4a5a6a; }

/* ── BANNER SECTION (half+half) ── */
.banner-section {
  display:grid; grid-template-columns:1fr 1fr;
  min-height:480px; background:var(--cream-dark);
}
.banner-text { padding:80px 6%; display:flex; flex-direction:column; justify-content:center; }
.banner-img  { background:center/cover no-repeat; min-height:320px; }
.banner-section.reverse .banner-text { order:2; }
.banner-section.reverse .banner-img  { order:1; }

/* ── 2-COL GRID ── */
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:4rem; max-width:1100px; }

/* ── VALUES CARDS ── */
.values-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin:2.5rem 0; }
.value-card  { background:var(--card-bg); padding:2rem; border-radius:4px; }
.value-icon  {
  width:52px; height:52px; background:var(--navy); border-radius:50%;
  display:flex; align-items:center; justify-content:center; margin-bottom:1.25rem;
}
.value-icon svg { width:26px; height:26px; fill:none; stroke:#fff; stroke-width:1.8; }
.value-card h3 { font-size:1.1rem; margin-bottom:.75rem; }
.value-card p  { font-size:.9rem; color:var(--text-light); line-height:1.7; }

/* ── QUOTE ── */
.quote-block {
  border-left:3px solid var(--teal);
  padding:1rem 1.5rem;
  margin:1.75rem 0;
  font-size:.95rem; font-style:italic;
  color:var(--navy); line-height:1.7;
}

/* ── TIMELINE ── */
.timeline {
  display:grid; grid-template-columns:repeat(4,1fr);
  position:relative; margin-bottom:3rem;
}
.timeline::before {
  content:''; position:absolute; top:50%; left:0; right:0;
  height:1px; background:var(--border); transform:translateY(-50%);
}
.timeline-item { display:flex; flex-direction:column; align-items:center; gap:1.5rem; }
.timeline-item:nth-child(odd) { flex-direction:column-reverse; }
.timeline-node {
  width:42px; height:42px; background:var(--card-bg);
  border:1px solid var(--border); border-radius:4px;
  display:flex; align-items:center; justify-content:center;
  font-size:1rem; font-weight:700; color:var(--navy); position:relative; z-index:2;
}
.timeline-content { max-width:220px; text-align:center; }
.timeline-content h4 { font-size:1rem; color:var(--navy); margin-bottom:.5rem; }
.timeline-content p  { font-size:.85rem; color:var(--text-light); line-height:1.6; }
.timeline-bottom { display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:start; }
.timeline-bottom > p { font-size:.95rem; color:var(--text-light); line-height:1.8; }
.callout-box {
  background:var(--card-bg); border:1px solid var(--border);
  padding:1.5rem; display:flex; gap:1rem; align-items:flex-start;
}
.callout-box .check { color:var(--navy); flex-shrink:0; }
.callout-box p { font-size:.9rem; color:var(--navy); line-height:1.6; }
.callout-box strong { font-weight:700; }

/* ── PYRAMID (SVG container) ── */
.pyramid-svg-wrap { display:flex; justify-content:center; margin:2rem 0 3rem; }

/* ── GOVERNANCE TEXTS ── */
.governance-texts p { font-size:.95rem; color:var(--text-light); line-height:1.8; max-width:1000px; margin-bottom:1rem; }

/* ── SERVICE CARDS ── */
.service-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:2rem; }
.service-card { border:1px solid var(--border); padding:2rem; }
.service-card .s-icon { font-size:1.5rem; margin-bottom:.75rem; color:var(--navy); opacity:.7; }
.service-card h4 { font-size:1rem; font-weight:700; color:var(--navy); margin-bottom:.75rem; }
.service-card p  { font-size:.88rem; color:var(--text-light); line-height:1.7; }

/* ── IMG + TEXT ── */
.img-text-grid { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:start; margin-top:2rem; }
.img-text-grid img { width:100%; border-radius:2px; }

/* ── STAGGERED PROJECT CARDS ── */
.staggered-grid { display:grid; grid-template-columns:1fr 1fr; gap:2px; max-width:780px; margin:2rem 0; }
.project-card   { background:var(--card-bg); padding:2rem; text-align:center; }
.project-card:nth-child(2) { margin-top:3rem; }
.project-card:nth-child(3) { margin-top:-2rem; }
.project-card h4 { font-size:1rem; font-weight:700; color:var(--navy); margin-bottom:.75rem; }
.project-card p  { font-size:.88rem; color:var(--text-light); line-height:1.7; }

/* ── SHARED SPACES ── */
.shared-img-text { display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:start; margin-bottom:3rem; }
.shared-img-text img { width:100%; border-radius:2px; }
.shared-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.shared-card img { width:100%; aspect-ratio:4/3; object-fit:cover; margin-bottom:1rem; }
.shared-card h4  { font-size:.95rem; font-weight:700; color:var(--navy); margin-bottom:.5rem; }
.shared-card p   { font-size:.85rem; color:var(--text-light); line-height:1.6; }

/* ── BUILDINGS ── */
.buildings-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-bottom:3rem; }
.building-card  { border:1px solid var(--border); background:var(--cream); }
.building-card-header {
  background:var(--card-bg); padding:.75rem 1.5rem;
  font-size:1.25rem; font-weight:800; color:var(--navy);
  text-align:center; border-bottom:1px solid var(--border);
}
.building-card-body { padding:1.5rem; }
.building-card-body h4 { font-size:.95rem; font-weight:700; color:var(--navy); margin-bottom:.75rem; }
.building-card-body p  { font-size:.85rem; color:var(--text-light); line-height:1.6; margin-bottom:1rem; }
.building-card-body li { font-size:.82rem; color:var(--text-light); padding:.3rem 0 .3rem 1.2rem; position:relative; }
.building-card-body li::before { content:'•'; position:absolute; left:0; color:var(--navy); }

/* ── TESTIMONIALS ── */
.testimonials { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin-top:2.5rem; }
.testimonial   { border:1px solid var(--border); padding:2rem; position:relative; }
.testimonial::before {
  content:'"'; font-size:4rem; color:var(--navy); opacity:.15;
  position:absolute; top:.5rem; left:1rem; line-height:1; font-family:Georgia,serif;
}
.testimonial p    { font-size:.9rem; color:var(--text-light); line-height:1.7; font-style:italic; padding-top:1rem; }
.testimonial cite { display:block; margin-top:1rem; font-size:.85rem; font-style:normal; font-weight:600; color:var(--navy); }

/* ── STATS ── */
.stats-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; margin:3rem 0; }
.stat-item  { text-align:center; }
.stat-circle {
  width:120px; height:120px; border-radius:50%;
  border:6px solid transparent;
  border-top-color:var(--cream-dark); border-right-color:var(--cream-dark);
  border-bottom-color:rgba(240,232,216,.3); border-left-color:rgba(240,232,216,.3);
  display:flex; align-items:center; justify-content:center; margin:0 auto 1.25rem;
}
.stat-circle span { font-size:1.8rem; font-weight:800; color:#fff; }
.stat-item h4 { font-size:1rem; font-weight:700; color:var(--cream-dark); margin-bottom:.4rem; }
.stat-item p  { font-size:.85rem; color:#a0bece; line-height:1.5; }

/* ── PARTICIPATE SECTION ── */
.participate-grid { display:grid; grid-template-columns:1fr 1fr; gap:0; margin-bottom:2.5rem; }
.participate-item { border-top:1px solid rgba(255,255,255,.15); padding:1.5rem 1.5rem 1.5rem 0; display:flex; gap:1.25rem; }
.participate-item:nth-child(even) { padding-left:1.5rem; border-left:1px solid rgba(255,255,255,.15); }
.p-icon svg { width:22px; height:22px; stroke:rgba(255,255,255,.5); fill:none; stroke-width:1.5; }
.p-text h4 { font-size:.95rem; font-weight:700; color:#fff; margin-bottom:.4rem; }
.p-text p  { font-size:.85rem; color:#9ab8c8; line-height:1.6; }
.engage-grid { display:grid; grid-template-columns:1fr 1fr; gap:3rem; }
.engage-item h4 { font-size:1rem; font-weight:700; color:var(--cream-dark); margin-bottom:.6rem; }
.engage-item p  { font-size:.88rem; color:#a0bece; line-height:1.7; }

/* ── DATA CARDS ── */
.data-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
.data-card  { border-left:3px solid var(--navy); background:var(--cream); padding:1.75rem; }
.data-card h4 { font-size:1rem; font-weight:700; color:var(--navy); margin-bottom:.75rem; }
.data-card p  { font-size:.88rem; color:var(--text-light); line-height:1.7; }

/* ── NEWS ── */
.news-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin-bottom:3rem; }
.news-card  { background:var(--cream-dark); border-radius:8px; padding:1.75rem; }
.news-card h4 { font-size:1rem; font-weight:700; color:var(--navy); margin-bottom:.6rem; }
.news-card p  { font-size:.88rem; color:var(--text-light); line-height:1.7; }
.news-bottom { display:grid; grid-template-columns:1fr 1fr; gap:3rem; border-top:1px solid rgba(255,255,255,.2); padding-top:2.5rem; }
.news-bottom h4 { font-size:1.05rem; font-weight:700; color:#fff; margin-bottom:.75rem; }
.news-bottom p  { font-size:.88rem; color:#9ab8c8; line-height:1.7; }

/* ── CONTACT ── */
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:start; margin-bottom:3rem; }
.contact-info h3  { font-size:1.1rem; font-weight:700; color:var(--cream-dark); margin-bottom:1.25rem; }
.contact-info p   { font-size:.9rem; color:#a0bece; line-height:1.9; }
.contact-info strong { color:#fff; font-weight:600; }
.contact-callout {
  background:rgba(0,0,0,.2); border:1px solid rgba(255,255,255,.1);
  padding:1.25rem 1.5rem; margin-top:1.5rem;
  display:flex; gap:1rem; align-items:flex-start;
  font-size:.88rem; color:#9ab8c8;
}
.transport h4 { font-size:1rem; font-weight:700; color:var(--cream-dark); margin-bottom:.75rem; }
.transport li { font-size:.88rem; color:#9ab8c8; padding:.3rem 0 .3rem 1.2rem; position:relative; }
.transport li::before { content:'•'; position:absolute; left:0; color:var(--cream-dark); }
.contact-bottom { display:grid; grid-template-columns:1fr 1fr; gap:3rem; border-top:1px solid rgba(255,255,255,.15); padding-top:2.5rem; }
.contact-bottom h3 { font-size:1.1rem; font-weight:700; color:var(--cream-dark); margin-bottom:.75rem; }
.contact-bottom p  { font-size:.88rem; color:#9ab8c8; line-height:1.7; }

/* ── JOIN ── */
.join-inner { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:start; margin-bottom:3rem; }
.join-inner img { width:100%; border-radius:2px; }
.join-text h2 { font-size:clamp(1.8rem,3vw,2.5rem); margin-bottom:1.5rem; }
.join-text p  { font-size:.95rem; color:var(--text-light); line-height:1.8; margin-bottom:1rem; }
.steps-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin-top:2.5rem; }
.step-card  { background:var(--card-bg); padding:1.5rem; border-radius:4px; }
.step-num   { font-size:1.5rem; font-weight:800; color:var(--navy); opacity:.3; margin-bottom:.75rem; }
.step-card h4 { font-size:.95rem; font-weight:700; color:var(--navy); margin-bottom:.5rem; }
.step-card p  { font-size:.85rem; color:var(--text-light); line-height:1.6; }
.cta-banner   { background:var(--cream-dark); border:1px solid var(--border); padding:2.5rem 3rem; margin-top:2rem; }
.cta-banner h3 { font-size:1.3rem; font-weight:700; color:var(--navy); margin-bottom:1rem; }
.cta-banner p  { font-size:.95rem; color:var(--text-light); margin-bottom:1.75rem; max-width:720px; }

/* ── FOOTER ── */
#site-footer {
  background:var(--navy-dark,#122840); color:rgba(255,255,255,.6);
  text-align:center; padding:2.5rem 6%;
  font-size:.85rem;
}
.footer-inner { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; }
.footer-logo  { font-size:.95rem; font-weight:700; color:rgba(255,255,255,.85); }
.footer-links { display:flex; gap:2rem; }
.footer-links a:hover { color:#fff; }
.footer-copy  { margin-top:1.5rem; font-size:.8rem; opacity:.5; }

/* ── HELPERS ── */
.mt-1{margin-top:1rem;} .mt-2{margin-top:2rem;} .mt-3{margin-top:3rem;}
.mb-1{margin-bottom:1rem;} .mb-2{margin-bottom:2rem;} .mb-3{margin-bottom:3rem;}

/* ── RESPONSIVE ── */
@media (max-width:1024px){
  .two-col,.values-grid,.service-grid,.buildings-grid,
  .shared-cards,.engage-grid,.data-grid,.steps-grid,
  .stats-grid,.testimonials,.img-text-grid,.shared-img-text,
  .timeline-bottom,.news-bottom,.contact-bottom,.join-inner {
    grid-template-columns:1fr;
    gap:2rem;
  }
  .timeline { grid-template-columns:1fr 1fr; }
  .banner-section { grid-template-columns:1fr; }
  .banner-img { min-height:260px; }
  .banner-section.reverse .banner-text { order:1; }
  .banner-section.reverse .banner-img  { order:2; }
  .participate-grid { grid-template-columns:1fr; }
  .participate-item:nth-child(even) { padding-left:0; border-left:none; }
  .staggered-grid { grid-template-columns:1fr; }
  .project-card:nth-child(2),.project-card:nth-child(3) { margin-top:0; }
  .news-grid { grid-template-columns:1fr; }
  .contact-grid { grid-template-columns:1fr; }
}
@media (max-width:768px){
  .jde-section { padding:60px 5%; }
  #primary-navigation { display:none; }
  #primary-navigation.open { display:block; position:absolute; top:64px; left:0; right:0; background:var(--cream); padding:1rem 5%; border-bottom:1px solid var(--border); }
  #primary-navigation.open ul { flex-direction:column; gap:1rem; }
  .menu-toggle { display:block; }
  .hero-mosaic { display:none; }
  .hero-content { padding:5% 5%; max-width:100%; }
  .timeline { grid-template-columns:1fr; }
  .timeline::before { display:none; }
}