/*
Theme Name: Entraide 95
Theme URI: https://entraide95.fr/
Author: Pascal Despois
Description: Custom theme for Entraide 95 - GEM du Val-d'Oise. Fully editable via ACF fields and custom post types, with built-in defaults matching the original static site.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: entraide95
*/

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root{
  /* Couleurs */
  --bg:#FFFCEE; --bg-soft:#E6F8D5; --surface:#FFFFFF;
  --ink:#0F2C1A; --ink-soft:#3F5A45; --ink-faint:#7E8E7E;
  --line:#D6E5C9;
  --brand:#509227; --brand-dark:#054828;     /* vert — marque */
  --deep:#054828;                            /* vert profond — neutre foncé */
  --seam:#F6BA03;                            /* or — JOINTURES UNIQUEMENT */
  /* Typo */
  --font-display:'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-ui:'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-read:'Source Sans 3', -apple-system, BlinkMacSystemFont, sans-serif;
  /* Layout */
  --container:1180px; --rail-x:46px;
  --r-sm:6px; --r:14px; --r-lg:26px;
  --shadow:0 14px 40px -14px rgba(5,72,40,.20);   /* ombre teintée vert */
  --tr:240ms cubic-bezier(.4,0,.2,1);
  /* z-index */
  --z-grain:1; --z-rail:2; --z-content:3; --z-header:100; --z-menu:200;
}

/* ============================================================
   RESET ET BASES TYPOGRAPHIQUES
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;}
*{margin:0;padding:0;}
html{-webkit-font-smoothing:antialiased;}
/* scroll-behavior retiré : Lenis (assets/vendor/lenis.min.js) pilote le smooth scroll */
body{font-family:var(--font-ui);font-size:16px;line-height:1.65;
  font-weight:400;color:var(--ink);background:var(--bg);
  overflow-x:hidden;position:relative;}
img,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{background:none;border:none;cursor:pointer;font:inherit;color:inherit;}
ul,ol{list-style:none;}
h1,h2,h3{font-family:var(--font-display);font-weight:500;
  line-height:1.08;letter-spacing:-.025em;text-wrap:balance;}
p{text-wrap:pretty;}
:focus-visible{outline:3px solid var(--brand);outline-offset:3px;border-radius:3px;}
::selection{background:var(--seam);color:var(--ink);}

/* ============================================================
   GRAIN PAPIER ET PRIMITIVES DE SECTION
   ============================================================ */
.grain{position:fixed;inset:0;z-index:var(--z-grain);pointer-events:none;
  opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
.flow{position:relative;max-width:var(--container);margin:0 auto;
  z-index:var(--z-content);}
.band{position:relative;padding:96px 40px 96px calc(var(--rail-x) + 64px);}
.band-soft{background:var(--bg-soft);}
.seam{height:0;border:0;border-top:1.6px dashed var(--seam);opacity:.75;
  margin:0 40px 0 calc(var(--rail-x) + 64px);}
.read-width{max-width:62ch;}

/* ============================================================
   BOUTONS ET LIEN-FLÈCHE
   ============================================================ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 26px;border-radius:999px;font-family:var(--font-ui);
  font-weight:600;font-size:.95rem;cursor:pointer;transition:all var(--tr);}
.btn:active{transform:translateY(1px) scale(.99);}
.btn-lg{padding:16px 32px;font-size:1rem;}
.btn-sm{padding:9px 18px;font-size:.85rem;}
.btn-primary{background:var(--brand);color:#fff;
  box-shadow:0 8px 22px -8px rgba(80,146,39,.7);}
.btn-primary:hover{background:var(--brand-dark);transform:translateY(-2px);}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line);}
.btn-ghost:hover{border-color:var(--ink);transform:translateY(-2px);}
.link-arrow{display:inline-flex;align-items:center;gap:7px;color:var(--brand);
  font-weight:600;transition:gap var(--tr);}
.link-arrow:hover{gap:12px;}

/* ============================================================
   FIL (RAIL)
   ============================================================ */
.rail{position:absolute;top:0;bottom:0;left:var(--rail-x);width:2px;
  background:var(--line);z-index:var(--z-rail);}
.rail-fill{display:block;position:absolute;top:0;left:0;width:100%;
  height:0;background:var(--seam);
  box-shadow:0 0 10px -1px rgba(246,186,3,.6);transition:height 80ms linear;}

/* ============================================================
   EN-TÊTE DE SECTION NUMÉROTÉE (.sec-head)
   ============================================================ */
.sec-head{position:relative;margin-bottom:48px;}
.sec-num{font-family:var(--font-display);font-weight:600;
  font-variant-numeric:tabular-nums;font-size:1.05rem;color:var(--seam);
  position:absolute;left:calc(-1 * (var(--rail-x) + 64px) + var(--rail-x) - 11px);
  top:2px;width:24px;text-align:center;}
.sec-kicker{display:inline-block;font-family:var(--font-ui);font-weight:600;
  font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brand);margin-bottom:14px;}
.sec-title{font-size:clamp(2rem,4.2vw,3.2rem);}

/* ============================================================
   HEADER & FOOTER PARTAGÉS
   ============================================================ */
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 40px;}
.header{position:sticky;top:0;z-index:var(--z-header);
  background:rgba(255,252,238,.86);backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid transparent;transition:border-color var(--tr);}
.header.scrolled{border-bottom-color:var(--line);}
.header-inner{display:flex;align-items:center;justify-content:space-between;
  height:74px;}
.brand-text{font-family:var(--font-display);font-size:1.3rem;color:var(--deep);}
.brand-text strong{font-weight:600;}
.nav{display:flex;align-items:center;gap:28px;}
.nav a{font-size:.95rem;font-weight:500;color:var(--ink);
  position:relative;transition:color var(--tr);}
.nav a:hover{color:var(--brand);}
.nav a[aria-current="true"]{color:var(--brand);}
.nav-cta{padding:9px 18px;border:1.5px solid var(--brand);border-radius:999px;
  color:var(--brand)!important;}
.nav-cta:hover{background:var(--brand);color:#fff!important;}
.burger{display:none;flex-direction:column;gap:5px;width:30px;padding:6px;}
.burger span{display:block;width:100%;height:2px;background:var(--ink);
  border-radius:2px;transition:transform var(--tr),opacity var(--tr);}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.burger.open span:nth-child(2){opacity:0;}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.mobile-menu{display:none;flex-direction:column;gap:2px;padding:18px 40px 28px;
  background:var(--bg);border-top:1px solid var(--line);}
.mobile-menu.open{display:flex;}
.mobile-menu a{padding:13px 6px;font-weight:500;border-radius:var(--r-sm);}
.mobile-menu a:hover{background:var(--bg-soft);}
.footer{background:var(--deep);color:#E6F8D5;padding:72px 0 28px;
  position:relative;z-index:var(--z-content);}
.footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:48px;}
.footer-brand .brand-text{color:#fff;}
.footer-brand p{margin:14px 0 18px;color:rgba(230,248,213,.7);max-width:34ch;}
.footer-socials{display:flex;gap:18px;}
.footer-socials a{font-size:.9rem;color:rgba(230,248,213,.8);
  border-bottom:1px solid rgba(230,248,213,.3);}
.footer-socials a:hover{color:var(--seam);border-color:var(--seam);}
.footer-gem h3{font-size:1.2rem;color:#fff;margin-bottom:12px;}
.footer-gem p{font-size:.92rem;color:rgba(230,248,213,.78);margin-bottom:8px;}
.footer-gem a{color:rgba(230,248,213,.92);}
.footer-gem a:hover{color:var(--seam);}
.footer-ha{margin-top:8px;color:#E6F8D5;border-color:rgba(230,248,213,.3);}
.footer-seam{border-top:1.6px dashed var(--seam);opacity:.6;margin:40px 0 22px;}
.footer-bottom{font-size:.85rem;color:rgba(230,248,213,.6);}
.footer-partners{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;
  gap:22px 30px;margin-top:40px;text-align:left;
  color:rgba(230,248,213,.85);font-size:.92rem;}
.footer-partners p{margin:0;max-width:52ch;}
.footer-partners-logos{display:flex;gap:16px;align-items:center;}
.footer-partners-logos img{height:52px;width:auto;background:#fff;
  padding:6px 12px;border-radius:8px;object-fit:contain;}

/* ============================================================
   HERO & BANDE FRAGMENTS
   ============================================================ */
.hero{padding-top:80px;padding-bottom:64px;}
.hero-title{font-size:clamp(2.6rem,6.4vw,4.6rem);margin:18px 0 22px;}
.seam-word{color:var(--brand);position:relative;white-space:nowrap;}
.seam-word::after{content:"";position:absolute;left:0;right:0;bottom:.02em;
  border-top:3px dashed var(--seam);}
.hero-lead{font-size:1.2rem;color:var(--ink-soft);margin-bottom:30px;}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:52px;}
.hero-figures{display:flex;gap:46px;flex-wrap:wrap;
  padding-top:30px;border-top:1px solid var(--line);}
.hero-figures dt{font-family:var(--font-display);font-size:2.5rem;font-weight:600;
  color:var(--deep);font-variant-numeric:tabular-nums;line-height:1;}
.hero-figures dd{font-size:.86rem;color:var(--ink-faint);margin-top:6px;max-width:14ch;}
.fragments{padding-top:40px;padding-bottom:40px;}
.fragment-row{display:flex;flex-wrap:wrap;align-items:center;}
.fragment-row li{font-family:var(--font-display);font-style:italic;
  font-size:clamp(1.05rem,2.3vw,1.7rem);color:var(--ink);padding:8px 30px;
  position:relative;}
.fragment-row li:nth-child(even){transform:translateY(12px);}
.fragment-row li+li::before{content:"";position:absolute;left:-7px;top:50%;
  width:14px;height:2px;background:var(--seam);}

/* ============================================================
   MISSIONS — ZIG-ZAG ÉDITORIAL
   ============================================================ */
.mission{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center;
  margin-bottom:72px;}
.mission:last-child{margin-bottom:0;}
.mission:nth-child(even) .mission-media{order:2;}
.mission-num{font-family:var(--font-display);font-weight:600;
  font-variant-numeric:tabular-nums;font-size:3.4rem;color:var(--seam);
  display:block;line-height:1;margin-bottom:8px;}
.mission-text h3{font-size:1.7rem;margin-bottom:12px;}
.mission-text p{color:var(--ink-soft);max-width:46ch;}
.mission-media .photo-empty{width:100%;}

/* ============================================================
   GEM PAIR & TIMELINE HISTOIRE
   ============================================================ */
.gem-pair{display:grid;grid-template-columns:1fr 1fr;gap:0;}
.gem{padding:8px 40px;}
.gem+.gem{border-left:1.6px dashed var(--seam);}
.gem h3{font-size:1.9rem;margin-bottom:4px;}
.gem-place{font-weight:600;color:var(--brand);margin-bottom:14px;}
.gem-list{margin:16px 0 18px;}
.gem-list li{padding:5px 0 5px 18px;position:relative;color:var(--ink-soft);}
.gem-list li::before{content:"";position:absolute;left:0;top:13px;width:8px;
  height:2px;background:var(--seam);}
.timeline{position:relative;margin-left:8px;padding-left:34px;
  border-left:2px solid var(--line);}
.milestone{position:relative;padding-bottom:34px;}
.milestone:last-child{padding-bottom:0;}
.milestone-node{position:absolute;left:-43px;top:4px;width:13px;height:13px;
  border-radius:50%;background:var(--bg-soft);border:2.5px solid var(--seam);}
.milestone-year{font-family:var(--font-display);font-size:1.5rem;font-weight:600;
  color:var(--deep);display:block;margin-bottom:5px;}
.milestone p{color:var(--ink-soft);max-width:60ch;}

/* ============================================================
   ACTIVITÉS — APERÇU ÉQUIPE — APERÇU ACTUALITÉS
   ============================================================ */
.activities{display:grid;grid-template-columns:1fr 1fr;gap:4px 54px;}
.activity{display:flex;gap:16px;padding:18px 0;border-bottom:1px solid var(--line);}
.activity svg{width:26px;height:26px;color:var(--brand);flex-shrink:0;}
.activity h4{font-size:1.1rem;font-family:var(--font-display);margin-bottom:3px;}
.activity p{font-size:.92rem;color:var(--ink-soft);}
.apercu-head{display:flex;justify-content:space-between;align-items:flex-end;
  gap:28px;flex-wrap:wrap;margin-bottom:36px;}
.team-strip,.news-row{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.team-strip figcaption{margin-top:12px;display:flex;flex-direction:column;}
.team-strip figcaption strong{font-family:var(--font-display);font-size:1.15rem;
  font-weight:600;}
.team-strip .role{color:var(--brand);font-weight:600;font-size:.88rem;}
.news-teaser .photo-empty{margin-bottom:14px;}
.news-teaser .cat{font-size:.78rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--brand);}
.news-teaser h3{font-family:var(--font-display);font-size:1.25rem;margin:6px 0 10px;}

/* ============================================================
   CTA PANEL & CONTACT
   ============================================================ */
.cta-panel{background:var(--deep);color:#E6F8D5;border-radius:var(--r-lg);
  padding:56px;display:grid;grid-template-columns:1.4fr 1fr;gap:40px;
  align-items:center;}
.cta-panel h2{color:#fff;font-size:clamp(1.7rem,3vw,2.4rem);}
.cta-panel p{color:rgba(230,248,213,.78);margin-top:12px;}
.cta-actions{display:flex;flex-direction:column;gap:12px;}
.cta-panel .btn-ghost{color:#E6F8D5;border-color:rgba(230,248,213,.35);}
.cta-panel .btn-ghost:hover{background:#E6F8D5;color:var(--deep);}
.contact-pair{display:grid;grid-template-columns:1fr 1fr;gap:0;}
.contact-gem{padding:8px 40px;text-align:left;}
.contact-gem+.contact-gem{border-left:1.6px dashed var(--seam);}
.contact-gem h3{font-size:1.5rem;margin-bottom:14px;}
.contact-gem p{color:var(--ink-soft);margin-bottom:8px;}
.contact-gem a{color:var(--deep);font-weight:500;}
.contact-gem .btn{margin-top:10px;}
.contact-gem .btn{color:#fff;}

/* ============================================================
   ANIMATIONS REVEAL-ON-SCROLL
   ============================================================ */
.fade-in{opacity:0;transform:translateY(26px);
  transition:opacity .6s ease-out,transform .6s ease-out;}
.fade-in.visible{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .fade-in{opacity:1;transform:none;transition:none;}
  html{scroll-behavior:auto;}
}

/* ============================================================
   PAGE ÉQUIPE & BÉNÉVOLES
   ============================================================ */
.team-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px 54px;}
.team-card .photo-empty,.team-card img{width:100%;aspect-ratio:4/5;
  object-fit:cover;border-radius:var(--r);margin-bottom:16px;}
.team-card h3{font-size:1.4rem;}
.team-card .role{color:var(--brand);font-weight:600;font-size:.9rem;}
.team-card p{color:var(--ink-soft);margin-top:8px;max-width:42ch;}
.benevole-duo{display:grid;grid-template-columns:auto 1fr;gap:34px;
  align-items:center;margin-bottom:30px;}
.benevole-photos{display:flex;gap:12px;}
.benevole-photos img{width:140px;height:170px;object-fit:cover;
  border-radius:var(--r);}
.benevole-duo p{color:var(--ink-soft);}
.benevole-duo h3{font-size:1.4rem;margin-bottom:8px;}
.benevole-cta{margin-top:40px;border:1.6px dashed var(--seam);
  border-radius:var(--r-lg);padding:44px;text-align:center;}
.benevole-cta h3{font-size:1.6rem;margin-bottom:12px;}
.benevole-cta p{color:var(--ink-soft);max-width:62ch;margin:0 auto 22px;}

/* ============================================================
   PAGE ACTUALITÉS
   ============================================================ */
.article-block{max-width:66ch;margin:0 auto 56px;}
.article-block .photo-empty{width:100%;aspect-ratio:16/9;
  border-radius:var(--r);margin-bottom:22px;}
.article-meta{font-family:var(--font-ui);font-size:.78rem;font-weight:600;
  letter-spacing:.07em;text-transform:uppercase;color:var(--brand);
  margin-bottom:10px;}
.article-block h2{font-size:clamp(1.5rem,3vw,2.1rem);margin-bottom:16px;}
.article-body{font-family:var(--font-read);font-size:1.12rem;line-height:1.7;
  color:var(--ink);}
.article-body p{margin-bottom:16px;}
.article-body h3{font-family:var(--font-display);font-size:1.2rem;
  margin:24px 0 10px;}
.article-body ul{margin:0 0 16px 22px;list-style:disc;}
.article-body li{margin-bottom:6px;}
#articles .seam{max-width:66ch;margin:0 auto 56px;}

/* ============================================================
   CASES PHOTO VIDES
   ============================================================ */
.photo-empty{background:var(--bg-soft);border:1.6px dashed var(--line);
  border-radius:var(--r-sm);display:grid;place-items:center;padding:20px;
  color:var(--ink-faint);position:relative;min-height:130px;}
.photo-empty-portrait{aspect-ratio:4/5;width:100%;}
.photo-empty-wide{aspect-ratio:16/9;width:100%;}
.photo-hint{font-family:var(--font-ui);font-size:.82rem;line-height:1.5;
  color:var(--ink-soft);text-align:center;max-width:34ch;}
.photo-hint strong{display:block;font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--brand);margin-bottom:7px;font-weight:600;}

/* ============================================================
   RESPONSIVE — MEDIA QUERIES
   ============================================================ */
@media (max-width:1024px){
  .band{padding:72px 28px 72px calc(var(--rail-x) + 40px);}
  .mission{grid-template-columns:1fr;gap:22px;}
  .mission:nth-child(even) .mission-media{order:0;}
  .footer-top{grid-template-columns:1fr 1fr;}
  .cta-panel{grid-template-columns:1fr;}
  .activities,.team-grid{grid-template-columns:1fr;}
  .team-strip,.news-row{grid-template-columns:1fr 1fr;}
}
@media (max-width:768px){
  :root{--rail-x:20px;}
  .container{padding:0 22px;}
  .nav{display:none;}
  .burger{display:flex;}
  .band{padding:56px 20px 56px 46px;}
  .seam{margin-left:46px;}
  .gem-pair,.contact-pair{grid-template-columns:1fr;}
  .gem+.gem,.contact-gem+.contact-gem{border-left:0;
    border-top:1.6px dashed var(--seam);padding-top:24px;}
  .footer-top{grid-template-columns:1fr;}
  .team-strip,.news-row{grid-template-columns:1fr;}
  .benevole-duo{grid-template-columns:1fr;}
  .hero-figures{gap:26px;}
}
@media (max-width:480px){
  .hero-actions .btn{width:100%;}
  .fragment-row li:nth-child(even){transform:none;}
}

/* ===== IMAGES INTÉGRÉES — logos, valeurs, articles ===== */
.values-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.value-card{position:relative;margin:0;border-radius:var(--r-sm);overflow:hidden;
  aspect-ratio:4/5;}
.value-card img{width:100%;height:100%;object-fit:cover;transition:transform var(--tr);}
.value-card:hover img{transform:scale(1.04);}
.value-card figcaption{position:absolute;left:0;right:0;bottom:0;
  padding:38px 14px 18px;text-align:center;
  background:linear-gradient(transparent,rgba(15,44,26,.9));
  color:#fff;font-family:var(--font-display);font-style:italic;font-weight:700;
  font-size:1.28rem;letter-spacing:.2px;text-shadow:0 1px 3px rgba(0,0,0,.35);}
.value-card figcaption::before{content:"";display:block;width:28px;height:2.4px;
  background:var(--seam);margin:0 auto 8px;}
.gem-logo{width:150px;height:100px;object-fit:contain;object-position:left center;margin-bottom:14px;}
.footer-logo{display:block;width:min(260px,80%);height:auto;object-fit:contain;
  background:#fff;border-radius:14px;padding:14px 18px;margin:22px 0 0;}
.article-figure{margin:0 0 22px;background:var(--bg-soft);border-radius:var(--r);
  display:grid;place-items:center;padding:16px;}
.article-figure img{max-height:340px;width:auto;border-radius:var(--r-sm);}
.teaser-img{width:100%;aspect-ratio:16/9;object-fit:cover;
  border-radius:var(--r-sm);margin-bottom:14px;}
@media (max-width:768px){
  .values-gallery{grid-template-columns:repeat(2,1fr);}
}

/* ============================================================
   TYPOGRAPHIE — Nunito pour accroches / kickers (charte Passerelle)
   ============================================================ */
.sec-kicker, .eyebrow, .article-meta, .news-teaser .cat { font-family: 'Nunito', -apple-system, sans-serif; font-style: italic; }

/* portraits cadrés (mission, aperçu équipe) — auto */
.mission-media img,.team-strip img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center top;display:block;border-radius:8px;}

/* retour client : réduire les photos des missions (et les centrer) */
.mission-media{display:flex;justify-content:center;}
.mission-media img{max-width:300px;}

/* ===== WordPress-specific additions ===== */

/* 404 template (was inline in the static 404.html) */
.error-page { display: flex; align-items: center; min-height: 62vh; text-align: center; }
.error-page .container { max-width: 660px; }
.error-code {
  display: block; font-family: "Montserrat", sans-serif; font-weight: 700;
  font-size: clamp(5rem, 18vw, 11rem); line-height: 1; letter-spacing: -0.04em;
  opacity: 0.12; margin-bottom: -0.35em;
}
.error-lead { font-size: 1.05rem; opacity: 0.8; margin: 1rem auto 2rem; max-width: 48ch; }
.error-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; }

/* Sticky header offset under the wp-admin toolbar */
body.admin-bar .header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .header { top: 46px; } }

/* Posts pagination (news page) */
.pagination { margin-top: 3rem; }
.pagination .nav-links { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; }
.pagination .page-numbers { text-decoration: none; opacity: 0.75; }
.pagination .page-numbers.current { font-weight: 600; opacity: 1; }

/* Content images inserted from the editor stay inside their column */
.article-body img { max-width: 100%; height: auto; border-radius: 8px; }