/* =============================================================
   RACINES SOLIDAIRES — Design system
   Palette : terre (marron) · vert profond · pousse (vert fluo)
   Type    : Fraunces (display) + Plus Jakarta Sans (texte)
   ============================================================= */

/* ---------- Tokens ---------- */
:root{
  /* Couleurs */
  --creme:        #F7F2E8;
  --sable:        #ECE2CF;
  --sable-fonce:  #DED1B6;
  --terre:        #2A2014;   /* espresso / sol profond */
  --terre-2:      #3D2E1C;
  --brun:         #6B5236;   /* marron chaud */
  --brun-clair:   #9A7C53;
  --vert-nuit:    #122E1C;
  --vert-profond: #1A4A2B;
  --vert:         #2E7D45;
  --vert-clair:   #5BA86C;
  --pousse:       #A8FF35;   /* vert fluo — logo & accents */
  --pousse-soft:  #C7FF7A;
  --encre:        #1F1810;
  --encre-doux:   #5A4B38;

  /* Typo */
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;

  /* Échelle */
  --fs-eyebrow: .78rem;
  --fs-body: 1.0625rem;
  --fs-lead: clamp(1.15rem, 1.6vw, 1.4rem);
  --fs-h3: clamp(1.35rem, 2.2vw, 1.7rem);
  --fs-h2: clamp(2rem, 4.2vw, 3.1rem);
  --fs-h1: clamp(2.6rem, 6.2vw, 4.8rem);

  /* Espace & rayon */
  --gut: clamp(1.25rem, 4vw, 3rem);
  --section-y: clamp(4.5rem, 9vw, 8rem);
  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 30px;
  --r-pill: 999px;

  --shadow-sm: 0 4px 18px rgba(42,32,20,.08);
  --shadow-md: 0 18px 50px -18px rgba(42,32,20,.28);
  --shadow-lg: 0 40px 90px -30px rgba(18,46,28,.45);

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  font-family:var(--sans);
  font-size:var(--fs-body);
  line-height:1.65;
  color:var(--encre);
  background:var(--creme);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; border:none; background:none; color:inherit; }
ul{ list-style:none; padding:0; }
:focus-visible{ outline:3px solid var(--pousse); outline-offset:3px; border-radius:4px; }
::selection{ background:var(--pousse); color:var(--terre); }

/* ---------- Utilitaires ---------- */
.wrap{ width:min(1240px, 100% - 2*var(--gut)); margin-inline:auto; }
.wrap--narrow{ width:min(820px, 100% - 2*var(--gut)); margin-inline:auto; }
.section{ padding-block:var(--section-y); }
.center{ text-align:center; }

.eyebrow{
  display:inline-flex; align-items:center; gap:.55rem;
  font-size:var(--fs-eyebrow); font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--vert);
}
.eyebrow::before{
  content:""; width:1.4rem; height:1.4rem; flex:none;
  background:var(--pousse);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22c0-6 0-9-4-12 4 .5 6 2 7 4 .5-5 3-8 9-9-5 4-7 7-7 12 0 2 0 5-5 5Z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22c0-6 0-9-4-12 4 .5 6 2 7 4 .5-5 3-8 9-9-5 4-7 7-7 12 0 2 0 5-5 5Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.eyebrow--light{ color:var(--pousse-soft); }

h1,h2,h3,h4{ font-family:var(--display); font-weight:600; line-height:1.05; letter-spacing:-.01em; }
.h1{ font-size:var(--fs-h1); }
.h2{ font-size:var(--fs-h2); }
.h3{ font-size:var(--fs-h3); line-height:1.15; }
.lead{ font-size:var(--fs-lead); color:var(--encre-doux); line-height:1.6; }
em.ink{ font-style:italic; color:var(--vert); }

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.95em 1.6em; border-radius:var(--r-pill);
  font-weight:700; font-size:.98rem; letter-spacing:.01em;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .3s, color .3s;
  will-change:transform; white-space:nowrap;
}
.btn svg{ width:1.1em; height:1.1em; }
.btn:hover{ transform:translateY(-3px); }
.btn--don{ background:var(--pousse); color:var(--terre); box-shadow:0 14px 30px -10px rgba(168,255,53,.6); }
.btn--don:hover{ background:var(--pousse-soft); box-shadow:0 20px 44px -12px rgba(168,255,53,.75); }
.btn--solid{ background:var(--vert-profond); color:#fff; }
.btn--solid:hover{ background:var(--vert); }
.btn--ghost{ border:1.5px solid currentColor; color:var(--terre); }
.btn--ghost:hover{ background:var(--terre); color:var(--creme); }
.btn--light{ border:1.5px solid rgba(255,255,255,.55); color:#fff; }
.btn--light:hover{ background:#fff; color:var(--vert-profond); }

/* =============================================================
   HEADER
   ============================================================= */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  transition:background .4s var(--ease), box-shadow .4s, padding .4s;
  padding-block:1.1rem;
}
.site-header.is-scrolled{
  background:rgba(247,242,232,.88);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 1px 0 rgba(42,32,20,.08), var(--shadow-sm);
  padding-block:.65rem;
}
.nav{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }

/* Logo */
.brand{ display:inline-flex; align-items:center; gap:.7rem; }
.brand__mark{
  width:42px; height:42px; flex:none; border-radius:12px;
  background:radial-gradient(120% 120% at 30% 20%, var(--vert) 0%, var(--vert-profond) 70%);
  display:grid; place-items:center; box-shadow:inset 0 0 0 1.5px rgba(168,255,53,.35);
}
.brand__mark svg{ width:24px; height:24px; }
.brand__leaf{ fill:var(--pousse); }
.brand__name{ font-family:var(--display); font-weight:600; font-size:1.32rem; line-height:1; color:#fff; }
.brand__name b{ color:var(--pousse); font-weight:600; }
.brand__tag{ display:block; font-family:var(--sans); font-size:.62rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.7); margin-top:.2rem; }
.is-scrolled .brand__name{ color:var(--terre); }
.is-scrolled .brand__name b{ color:var(--vert); }
.is-scrolled .brand__tag{ color:var(--brun-clair); }

/* Menu */
.menu{ display:flex; align-items:center; gap:.35rem; }
.menu a{
  position:relative; padding:.55rem .85rem; border-radius:var(--r-pill);
  font-weight:600; font-size:.97rem; color:rgba(255,255,255,.92);
  transition:color .25s, background .25s;
}
.is-scrolled .menu a{ color:var(--terre); }
.menu a::after{
  content:""; position:absolute; left:.85rem; right:.85rem; bottom:.32rem; height:2px;
  background:var(--pousse); border-radius:2px; transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--ease);
}
.menu a:hover::after,.menu a.is-current::after{ transform:scaleX(1); }
.menu a.is-current{ color:var(--pousse); }
.is-scrolled .menu a.is-current{ color:var(--vert); }
.nav__actions{ display:flex; align-items:center; gap:.6rem; }

/* bouton bénévole dans l'en-tête : clair sur hero, foncé au scroll */
.site-header .btn--ghost{ border-color:rgba(255,255,255,.5); color:#fff; }
.site-header .btn--ghost:hover{ background:#fff; color:var(--vert-profond); }
.is-scrolled .btn--ghost{ border-color:var(--terre); color:var(--terre); }
.is-scrolled .btn--ghost:hover{ background:var(--terre); color:var(--creme); }

/* Burger */
.burger{ display:none; width:46px; height:46px; border-radius:12px; background:var(--terre); }
.burger span{ display:block; width:20px; height:2px; margin:4px auto; background:var(--creme); border-radius:2px; transition:.3s var(--ease); }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* =============================================================
   HERO — slider multimédia (image + vidéo)
   ============================================================= */
.hero{ position:relative; min-height:100svh; display:grid; isolation:isolate; }
.hero__slider{ position:absolute; inset:0; z-index:-2; overflow:hidden; }
.slide{ position:absolute; inset:0; opacity:0; transition:opacity 1.1s var(--ease); }
.slide.is-active{ opacity:1; }
.slide__media{ position:absolute; inset:0; background-size:cover; background-position:center; transform:scale(1.08); }
.slide.is-active .slide__media{ animation:kenburns 8s linear forwards; }
.slide__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.slide::after{ /* voile lisibilité */
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(18,46,28,.30) 0%, rgba(42,32,20,.18) 38%, rgba(18,46,28,.78) 100%);
}
@keyframes kenburns{ to{ transform:scale(1); } }

/* Scènes de secours (si pas d'image fournie) */
.scene-1{ background:
  radial-gradient(80% 60% at 70% 10%, rgba(168,255,53,.18), transparent 60%),
  linear-gradient(160deg, #2E7D45 0%, #1A4A2B 50%, #122E1C 100%); }
.scene-2{ background:
  radial-gradient(70% 50% at 20% 20%, rgba(255,230,160,.25), transparent 55%),
  linear-gradient(150deg, #6B5236 0%, #3D2E1C 60%, #2A2014 100%); }
.scene-3{ background:
  radial-gradient(60% 60% at 80% 80%, rgba(91,168,108,.4), transparent 60%),
  linear-gradient(135deg, #1A4A2B 0%, #2E7D45 45%, #6B5236 110%); }

.hero__inner{ align-self:center; padding-block:9rem 5rem; color:#fff; }
.hero__caption{ max-width:760px; }
.hero__caption .eyebrow{ color:var(--pousse); }
.hero h1{ color:#fff; margin:.6rem 0 1.1rem; }
.hero h1 .out{ -webkit-text-stroke:1.5px rgba(255,255,255,.85); color:transparent; }
.hero h1 mark{ background:none; color:var(--pousse); }
.hero__text{ font-size:var(--fs-lead); color:rgba(255,255,255,.9); max-width:54ch; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2rem; }

/* Slides : animation du texte */
.slide .anim{ opacity:0; transform:translateY(26px); }
.slide.is-active .anim{ animation:rise .9s var(--ease) forwards; }
.slide.is-active .anim:nth-child(2){ animation-delay:.12s; }
.slide.is-active .anim:nth-child(3){ animation-delay:.22s; }
.slide.is-active .anim:nth-child(4){ animation-delay:.34s; }
@keyframes rise{ to{ opacity:1; transform:none; } }

/* Contrôles slider */
.hero__controls{
  position:absolute; left:var(--gut); right:var(--gut); bottom:2.2rem; z-index:5;
  display:flex; align-items:center; justify-content:space-between; gap:1rem; color:#fff;
}
.dots{ display:flex; gap:.6rem; }
.dot{ width:34px; height:4px; border-radius:4px; background:rgba(255,255,255,.35); overflow:hidden; }
.dot span{ display:block; height:100%; width:100%; background:var(--pousse); transform:scaleX(0); transform-origin:left; }
.dot.is-active span{ animation:fill linear forwards; }
@keyframes fill{ to{ transform:scaleX(1); } }
.arrows{ display:flex; gap:.5rem; }
.arrows button{
  width:48px; height:48px; border-radius:50%; display:grid; place-items:center;
  border:1.5px solid rgba(255,255,255,.45); color:#fff; transition:.3s var(--ease);
}
.arrows button:hover{ background:#fff; color:var(--vert-profond); transform:translateY(-2px); }
.arrows svg{ width:20px; height:20px; }
.hero__mute{ position:absolute; top:7.5rem; right:var(--gut); z-index:5;
  width:46px; height:46px; border-radius:50%; display:grid; place-items:center;
  border:1.5px solid rgba(255,255,255,.45); color:#fff; }
.hero__mute svg{ width:20px; height:20px; }

/* =============================================================
   SECTION : Mission (split)
   ============================================================= */
.mission{ background:var(--creme); }
.mission__grid{ display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.mission__visual{ position:relative; }
.mission__photo{
  aspect-ratio:4/5; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-md);
  background:var(--scene,linear-gradient(150deg,#2E7D45,#1A4A2B));
}
.mission__photo img{ width:100%; height:100%; object-fit:cover; }
.mission__badge{
  position:absolute; bottom:-22px; left:-22px; background:var(--terre); color:var(--creme);
  padding:1.2rem 1.4rem; border-radius:var(--r-md); box-shadow:var(--shadow-md); max-width:230px;
}
.mission__badge b{ font-family:var(--display); font-size:2.4rem; color:var(--pousse); line-height:1; display:block; }
.mission__badge span{ font-size:.85rem; color:rgba(247,242,232,.8); }
.mission h2{ color:var(--terre); margin:.6rem 0 1.1rem; }
.mission__values{ display:grid; gap:1rem; margin-top:1.8rem; }
.value{ display:flex; gap:1rem; align-items:flex-start; }
.value__ico{ flex:none; width:48px; height:48px; border-radius:14px; background:var(--sable);
  display:grid; place-items:center; color:var(--vert-profond); }
.value__ico svg{ width:24px; height:24px; }
.value h3{ font-size:1.15rem; color:var(--terre); margin-bottom:.15rem; }
.value p{ font-size:.97rem; color:var(--encre-doux); }

/* =============================================================
   STATS
   ============================================================= */
.stats{ background:var(--vert-nuit); color:#fff; position:relative; overflow:hidden; }
.stats::before{ content:""; position:absolute; inset:0;
  background:radial-gradient(60% 120% at 90% 0%, rgba(168,255,53,.12), transparent 55%); }
.stats__grid{ position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; text-align:center; }
.stat__num{ font-family:var(--display); font-size:clamp(2.6rem,5vw,3.8rem); color:var(--pousse); line-height:1; }
.stat__num small{ font-size:.55em; color:var(--pousse-soft); }
.stat__label{ margin-top:.4rem; font-size:.95rem; color:rgba(255,255,255,.78); }

/* =============================================================
   CHAMPS D'ACTION (cartes)
   ============================================================= */
.champs{ background:var(--creme); }
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; flex-wrap:wrap; margin-bottom:3rem; }
.section-head h2{ color:var(--terre); margin-top:.5rem; max-width:18ch; }
.section-head p{ max-width:44ch; }

.champs__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.champ{
  position:relative; border-radius:var(--r-md); overflow:hidden; min-height:330px;
  display:flex; flex-direction:column; justify-content:flex-end; padding:1.6rem;
  color:#fff; box-shadow:var(--shadow-sm); isolation:isolate;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.champ::after{ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(18,46,28,.05) 0%, rgba(18,46,28,.85) 100%); }
.champ__bg{ position:absolute; inset:0; z-index:-2; background-size:cover; background-position:center;
  transform:scale(1.05); transition:transform .6s var(--ease); }
.champ:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); }
.champ:hover .champ__bg{ transform:scale(1.14); }
.champ__no{ font-family:var(--display); font-size:.95rem; color:var(--pousse); letter-spacing:.05em; }
.champ h3{ font-size:1.5rem; margin:.35rem 0 .5rem; }
.champ p{ font-size:.95rem; color:rgba(255,255,255,.85); max-height:0; opacity:0; overflow:hidden;
  transition:max-height .5s var(--ease), opacity .4s, margin .4s; }
.champ:hover p,.champ:focus-within p{ max-height:120px; opacity:1; margin-bottom:.8rem; }
.champ__link{ display:inline-flex; align-items:center; gap:.4rem; font-weight:700; font-size:.9rem; color:var(--pousse); }
.champ__link svg{ width:1.1em; transition:transform .3s; }
.champ:hover .champ__link svg{ transform:translateX(4px); }

/* fonds de cartes (dégradés de secours) */
.bg-edu{ background:linear-gradient(150deg,#2E7D45,#1A4A2B); }
.bg-eau{ background:linear-gradient(150deg,#2E6B7D,#16414a); }
.bg-agri{ background:linear-gradient(150deg,#7d6b2e,#4a3d16); }
.bg-sante{ background:linear-gradient(150deg,#7d2e44,#4a1622); }
.bg-femme{ background:linear-gradient(150deg,#6B5236,#2A2014); }
.bg-urgence{ background:linear-gradient(150deg,#2E7D6b,#163d2e); }

/* =============================================================
   DON (bande de conversion)
   ============================================================= */
.don{ position:relative; color:#fff; overflow:hidden;
  background:linear-gradient(135deg,#2A2014 0%, #1A4A2B 70%, #122E1C 100%); }
.don::before{ content:""; position:absolute; inset:0;
  background:radial-gradient(50% 90% at 85% 20%, rgba(168,255,53,.18), transparent 60%); }
.don__grid{ position:relative; display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.don h2{ color:#fff; margin:.6rem 0 1rem; }
.don p{ color:rgba(255,255,255,.85); max-width:46ch; }

/* widget de don */
.donate{ background:var(--creme); color:var(--encre); border-radius:var(--r-lg); padding:clamp(1.5rem,3vw,2.2rem); box-shadow:var(--shadow-lg); }
.donate h3{ color:var(--terre); font-size:1.4rem; }
.donate__freq{ display:flex; gap:.4rem; background:var(--sable); padding:.3rem; border-radius:var(--r-pill); margin:1rem 0; }
.donate__freq button{ flex:1; padding:.6rem; border-radius:var(--r-pill); font-weight:700; font-size:.92rem; color:var(--encre-doux); transition:.25s; }
.donate__freq button.is-active{ background:var(--vert-profond); color:#fff; box-shadow:var(--shadow-sm); }
.donate__amounts{ display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; }
.amount{ padding:.85rem .4rem; border-radius:var(--r-sm); border:1.5px solid var(--sable-fonce);
  background:#fff; font-weight:700; color:var(--terre); transition:.25s var(--ease); text-align:center; }
.amount small{ display:block; font-size:.7rem; font-weight:600; color:var(--encre-doux); }
.amount:hover{ border-color:var(--vert); }
.amount.is-active{ border-color:var(--vert); background:var(--vert-profond); color:#fff; }
.amount.is-active small{ color:var(--pousse-soft); }
.donate__custom{ display:flex; align-items:center; gap:.5rem; margin-top:.7rem; border:1.5px solid var(--sable-fonce); border-radius:var(--r-sm); padding:.2rem .9rem; background:#fff; }
.donate__custom input{ border:none; outline:none; font:inherit; font-weight:700; width:100%; padding:.65rem 0; background:none; color:var(--terre); }
.donate__custom span{ font-weight:700; color:var(--encre-doux); }
.donate .btn{ width:100%; justify-content:center; margin-top:1rem; }
.donate__note{ font-size:.82rem; color:var(--encre-doux); text-align:center; margin-top:.7rem; }

/* barre de progression — pousse qui grandit */
.progress{ margin-top:1.4rem; }
.progress__top{ display:flex; justify-content:space-between; font-size:.9rem; margin-bottom:.5rem; }
.progress__top b{ color:#fff; font-family:var(--display); font-size:1.05rem; }
.progress__bar{ position:relative; height:12px; border-radius:var(--r-pill); background:rgba(255,255,255,.16); overflow:visible; }
.progress__fill{ position:absolute; inset:0 auto 0 0; width:0; border-radius:var(--r-pill);
  background:linear-gradient(90deg,var(--vert-clair),var(--pousse)); transition:width 1.6s var(--ease); }
.progress__sprout{ position:absolute; top:50%; left:0; transform:translate(-50%,-50%); color:var(--pousse);
  transition:left 1.6s var(--ease); }
.progress__sprout svg{ width:26px; height:26px; filter:drop-shadow(0 2px 6px rgba(168,255,53,.5)); }

/* =============================================================
   TÉMOIGNAGES
   ============================================================= */
.temoins{ background:var(--sable); }
.temoins__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.4rem; }
.temoin{ background:var(--creme); border-radius:var(--r-md); padding:2rem; box-shadow:var(--shadow-sm);
  border-left:4px solid var(--pousse); }
.temoin__quote{ font-family:var(--display); font-size:1.25rem; line-height:1.4; color:var(--terre); }
.temoin__who{ display:flex; align-items:center; gap:.9rem; margin-top:1.4rem; }
.temoin__av{ width:48px; height:48px; border-radius:50%; flex:none; background:var(--vert-profond);
  color:var(--pousse); display:grid; place-items:center; font-family:var(--display); font-size:1.15rem; }
.temoin__who b{ display:block; color:var(--terre); }
.temoin__who span{ font-size:.85rem; color:var(--encre-doux); }

/* =============================================================
   PARTENAIRES
   ============================================================= */
.partners{ background:var(--creme); padding-block:clamp(3rem,5vw,4.5rem); }
.partners__row{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:clamp(1.5rem,5vw,4rem); }
.partner{ font-family:var(--display); font-weight:600; font-size:1.4rem; color:var(--brun-clair); opacity:.7;
  display:inline-flex; align-items:center; gap:.5rem; transition:.3s; }
.partner:hover{ opacity:1; color:var(--vert); }
.partner svg{ width:1.3em; height:1.3em; }

/* =============================================================
   BLOG (aperçu + page)
   ============================================================= */
.blog{ background:var(--sable); }
.posts{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; }
.post{ background:var(--creme); border-radius:var(--r-md); overflow:hidden; box-shadow:var(--shadow-sm);
  display:flex; flex-direction:column; transition:transform .4s var(--ease), box-shadow .4s var(--ease); }
.post:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); }
.post__img{ aspect-ratio:16/10; background-size:cover; background-position:center; position:relative; }
.post__cat{ position:absolute; top:1rem; left:1rem; background:var(--pousse); color:var(--terre);
  font-size:.72rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  padding:.35rem .8rem; border-radius:var(--r-pill); }
.post__body{ padding:1.5rem; display:flex; flex-direction:column; flex:1; }
.post__date{ font-size:.82rem; color:var(--brun-clair); font-weight:600; }
.post h3{ font-size:1.25rem; color:var(--terre); margin:.4rem 0 .6rem; line-height:1.2; }
.post p{ font-size:.95rem; color:var(--encre-doux); flex:1; }
.post__more{ display:inline-flex; align-items:center; gap:.4rem; margin-top:1rem; font-weight:700; font-size:.9rem; color:var(--vert); }
.post__more svg{ width:1.1em; transition:transform .3s; }
.post:hover .post__more svg{ transform:translateX(4px); }

/* fonds d'illustration blog (dégradés de secours) */
.img-1{ background:linear-gradient(135deg,#2E7D45,#1A4A2B); }
.img-2{ background:linear-gradient(135deg,#6B5236,#2A2014); }
.img-3{ background:linear-gradient(135deg,#2E6B7D,#16414a); }
.img-4{ background:linear-gradient(135deg,#7d6b2e,#4a3d16); }
.img-5{ background:linear-gradient(135deg,#5BA86C,#1A4A2B); }
.img-6{ background:linear-gradient(135deg,#9A7C53,#3D2E1C); }

/* =============================================================
   PAGE — bandeau d'en-tête (sous-pages)
   ============================================================= */
.pagehead{ position:relative; color:#fff; padding:11rem 0 4.5rem; isolation:isolate; overflow:hidden;
  background:linear-gradient(135deg,#1A4A2B 0%, #2A2014 100%); }
.pagehead::before{ content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(50% 80% at 80% 0%, rgba(168,255,53,.16), transparent 60%); }
.pagehead h1{ color:#fff; max-width:16ch; margin:.6rem 0 .8rem; }
.pagehead p{ color:rgba(255,255,255,.85); max-width:54ch; font-size:var(--fs-lead); }
.crumbs{ font-size:.85rem; color:rgba(255,255,255,.7); margin-top:1.4rem; }
.crumbs a:hover{ color:var(--pousse); }

/* page champs — bloc détaillé */
.fields{ background:var(--creme); }
.field{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center; padding-block:clamp(2.5rem,5vw,4rem); }
.field:not(:last-child){ border-bottom:1px solid var(--sable-fonce); }
.field:nth-child(even) .field__media{ order:2; }
.field__media{ aspect-ratio:5/4; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-md);
  background-size:cover; background-position:center; }
.field__no{ font-family:var(--display); font-size:3.2rem; color:var(--sable-fonce); line-height:1; }
.field h2{ color:var(--terre); font-size:clamp(1.6rem,3vw,2.3rem); margin:.3rem 0 .9rem; }
.field ul.ticks{ display:grid; gap:.6rem; margin-top:1.3rem; }
.field ul.ticks li{ display:flex; gap:.7rem; align-items:flex-start; font-size:.97rem; color:var(--encre-doux); }
.field ul.ticks svg{ width:1.3em; height:1.3em; flex:none; color:var(--vert); margin-top:.15rem; }

/* page blog — filtres + featured */
.blog-feature{ background:var(--creme); }
.feature{ display:grid; grid-template-columns:1.2fr 1fr; gap:clamp(2rem,5vw,3.5rem); align-items:center;
  background:var(--terre); color:#fff; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-md); }
.feature__img{ min-height:340px; background-size:cover; background-position:center; }
.feature__body{ padding:clamp(1.8rem,4vw,3rem); }
.feature__body .post__cat{ position:static; display:inline-block; margin-bottom:1rem; }
.feature h2{ color:#fff; font-size:clamp(1.6rem,3vw,2.3rem); line-height:1.1; }
.feature p{ color:rgba(255,255,255,.82); margin:1rem 0 1.5rem; }
.filters{ display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:2.5rem; }
.filter{ padding:.55rem 1.2rem; border-radius:var(--r-pill); background:var(--creme); border:1.5px solid var(--sable-fonce);
  font-weight:600; font-size:.92rem; color:var(--encre-doux); transition:.25s var(--ease); }
.filter:hover{ border-color:var(--vert); }
.filter.is-active{ background:var(--vert-profond); color:#fff; border-color:var(--vert-profond); }
.pagination{ display:flex; justify-content:center; gap:.5rem; margin-top:3.5rem; }
.pagination a{ width:44px; height:44px; display:grid; place-items:center; border-radius:12px;
  background:var(--creme); border:1.5px solid var(--sable-fonce); font-weight:700; color:var(--terre); transition:.25s; }
.pagination a:hover,.pagination a.is-active{ background:var(--vert-profond); color:#fff; border-color:var(--vert-profond); }

/* =============================================================
   NEWSLETTER + FOOTER
   ============================================================= */
.newsletter{ background:var(--pousse); color:var(--terre); }
.newsletter__grid{ display:grid; grid-template-columns:1fr auto; gap:2rem; align-items:center; }
.newsletter h2{ font-size:clamp(1.6rem,3vw,2.4rem); color:var(--terre); }
.newsletter p{ color:var(--terre-2); }
.nl-form{ display:flex; gap:.6rem; min-width:min(420px,80vw); }
.nl-form input{ flex:1; border:none; border-radius:var(--r-pill); padding:1rem 1.4rem; font:inherit; background:var(--terre); color:var(--creme); }
.nl-form input::placeholder{ color:rgba(247,242,232,.6); }
.nl-form .btn--solid{ background:var(--terre); }
.nl-form .btn--solid:hover{ background:var(--terre-2); }

.site-footer{ background:var(--terre); color:rgba(247,242,232,.72); padding-block:4.5rem 2rem; }
.footer__grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:2.5rem; }
.footer__grid .brand__name{ color:var(--creme); }
.footer__about{ margin:1.2rem 0; max-width:34ch; font-size:.95rem; }
.socials{ display:flex; gap:.6rem; }
.socials a{ width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
  background:rgba(247,242,232,.08); color:var(--creme); transition:.3s var(--ease); }
.socials a:hover{ background:var(--pousse); color:var(--terre); transform:translateY(-3px); }
.socials svg{ width:20px; height:20px; }
.footer__col h4{ font-family:var(--sans); font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--pousse); margin-bottom:1.1rem; }
.footer__col a{ display:block; padding:.32rem 0; font-size:.95rem; transition:color .25s, padding .25s; }
.footer__col a:hover{ color:var(--pousse); padding-left:.3rem; }
.footer__contact li{ display:flex; gap:.7rem; padding:.32rem 0; font-size:.95rem; }
.footer__contact svg{ width:1.1em; flex:none; color:var(--pousse); margin-top:.2rem; }
.footer__bottom{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem;
  margin-top:3rem; padding-top:1.6rem; border-top:1px solid rgba(247,242,232,.12); font-size:.85rem; }
.footer__bottom a:hover{ color:var(--pousse); }

/* =============================================================
   REVEAL au scroll
   ============================================================= */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.1s; }
.reveal[data-d="2"]{ transition-delay:.2s; }
.reveal[data-d="3"]{ transition-delay:.3s; }

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width:980px){
  .mission__grid,.don__grid,.stats__grid,.champs__grid,.posts,.temoins__grid,
  .footer__grid,.field,.feature,.field:nth-child(even) .field__media{ grid-template-columns:1fr; }
  .field:nth-child(even) .field__media{ order:0; }
  .stats__grid{ grid-template-columns:repeat(2,1fr); gap:2.5rem 1rem; }
  .champs__grid,.posts{ grid-template-columns:repeat(2,1fr); }
  .feature__img{ min-height:240px; }
  .footer__grid{ grid-template-columns:1fr 1fr; }
  .newsletter__grid{ grid-template-columns:1fr; }
}
@media (max-width:760px){
  .menu,.nav__actions .btn--ghost{ display:none; }
  .burger{ display:block; }
  /* menu mobile */
  .menu.is-open{ display:flex; position:fixed; inset:0 0 0 30%; flex-direction:column;
    align-items:stretch; justify-content:center; gap:.4rem; padding:2rem;
    background:var(--terre); z-index:99; }
  .menu.is-open a{ color:var(--creme); font-size:1.3rem; font-family:var(--display); padding:.7rem 1rem; }
  .menu.is-open a::after{ display:none; }
  .champs__grid,.posts{ grid-template-columns:1fr; }
  .hero__controls{ flex-direction:column-reverse; align-items:flex-start; gap:1.2rem; bottom:1.4rem; }
  .hero__mute{ top:6rem; }
  .nl-form{ flex-direction:column; min-width:0; width:100%; }
}
@media (max-width:480px){
  .stats__grid{ grid-template-columns:1fr; }
}

/* Accessibilité : mouvement réduit */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .slide.is-active .slide__media{ animation:none; transform:scale(1); }
}

/* =============================================================
   JESUIS — composants additionnels
   ============================================================= */

/* Vidéo YouTube responsive dans le slider */
.slide__yt{ position:absolute; inset:0; width:100%; height:100%; border:0;
  /* couvrir comme object-fit:cover */ pointer-events:none; }
@media (min-aspect-ratio:16/9){ .slide__yt{ height:300%; top:-100%; } }
@media (max-aspect-ratio:16/9){ .slide__yt{ width:300%; left:-100%; } }

/* Chips ODD (SDG) */
.sdgs{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.3rem; }
.sdg{ display:inline-flex; align-items:center; gap:.45rem; padding:.4rem .8rem; border-radius:var(--r-pill);
  font-size:.8rem; font-weight:700; color:#fff; }
.sdg::before{ content:""; width:.7rem; height:.7rem; border-radius:50%; background:rgba(255,255,255,.85); }

/* Piliers : pictos People/Planet/Prosperity sur les cartes */
.pillar-ico{ width:54px; height:54px; border-radius:16px; background:rgba(168,255,53,.16);
  display:grid; place-items:center; color:var(--pousse); margin-bottom:auto; }
.pillar-ico svg{ width:28px; height:28px; }

/* =============================================================
   FORMULAIRES (contact, candidature)
   ============================================================= */
.form{ display:grid; gap:1.1rem; }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
.field-group{ display:flex; flex-direction:column; gap:.4rem; }
.field-group label{ font-size:.85rem; font-weight:700; color:var(--terre); letter-spacing:.01em; }
.field-group label .req{ color:var(--vert); }
.field-group input,
.field-group select,
.field-group textarea{
  font:inherit; color:var(--encre); background:#fff; border:1.5px solid var(--sable-fonce);
  border-radius:var(--r-sm); padding:.85rem 1rem; transition:border-color .25s, box-shadow .25s; width:100%;
}
.field-group textarea{ resize:vertical; min-height:140px; }
.field-group input:focus,
.field-group select:focus,
.field-group textarea:focus{ outline:none; border-color:var(--vert); box-shadow:0 0 0 3px rgba(46,125,69,.15); }
.field-group input[type=file]{ padding:.6rem; background:var(--creme); cursor:pointer; }
.form .btn{ justify-self:start; }
.form__note{ font-size:.85rem; color:var(--encre-doux); display:flex; gap:.5rem; align-items:flex-start; }
.form__note svg{ width:1.1em; height:1.1em; flex:none; color:var(--vert); margin-top:.15rem; }

/* Contact : grille infos + form */
.contact__grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(2rem,5vw,4rem); align-items:start; }
.contact__card{ background:var(--terre); color:var(--creme); border-radius:var(--r-lg); padding:clamp(1.8rem,3vw,2.4rem); }
.contact__card h3{ color:#fff; font-size:1.5rem; }
.contact__list{ display:grid; gap:1.1rem; margin-top:1.6rem; }
.contact__list li{ display:flex; gap:.9rem; align-items:flex-start; font-size:.98rem; color:rgba(247,242,232,.85); }
.contact__list svg{ width:1.3em; height:1.3em; flex:none; color:var(--pousse); margin-top:.1rem; }
.contact__list a:hover{ color:var(--pousse); }
.contact__form{ background:var(--creme); border:1px solid var(--sable-fonce); border-radius:var(--r-lg); padding:clamp(1.8rem,3vw,2.4rem); box-shadow:var(--shadow-sm); }

/* =============================================================
   RECRUITMENT
   ============================================================= */
.jobs{ background:var(--creme); }
.jobs__grid{ display:grid; gap:1.2rem; }
.job{ background:#fff; border:1px solid var(--sable-fonce); border-radius:var(--r-md); padding:1.6rem 1.8rem;
  display:grid; grid-template-columns:1fr auto; gap:1rem 1.5rem; align-items:center;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s; }
.job:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:transparent; }
.job__main{ min-width:0; }
.job__tags{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:.6rem; }
.tag{ font-size:.72rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:.3rem .7rem; border-radius:var(--r-pill); }
.tag--type{ background:var(--vert-profond); color:#fff; }
.tag--loc{ background:var(--sable); color:var(--terre); }
.tag--deadline{ background:#fff; color:var(--vert); border:1.5px solid var(--vert-clair); }
.job h3{ font-size:1.4rem; color:var(--terre); margin-bottom:.3rem; }
.job p{ font-size:.96rem; color:var(--encre-doux); }
.job__cta{ display:flex; flex-direction:column; gap:.5rem; align-items:stretch; }
.job__status{ font-size:.8rem; font-weight:700; color:var(--vert); text-align:center; }
.job__status--closed{ color:var(--brun-clair); }

/* Détail poste : critères */
.job-detail{ background:var(--creme); }
.job-detail__grid{ display:grid; grid-template-columns:1.6fr 1fr; gap:clamp(2rem,5vw,3.5rem); align-items:start; }
.job-block{ margin-bottom:2rem; }
.job-block h3{ color:var(--terre); font-size:1.25rem; margin-bottom:.8rem; }
.apply-box{ position:sticky; top:90px; background:var(--terre); color:var(--creme); border-radius:var(--r-lg); padding:2rem; }
.apply-box h3{ color:#fff; }

/* About : prose éditoriale */
.prose{ max-width:75ch; }
.prose h2{ color:var(--terre); margin:2.2rem 0 .8rem; font-size:clamp(1.5rem,3vw,2rem); }
.prose p{ margin-bottom:1.1rem; color:var(--encre-doux); }
.prose p strong{ color:var(--terre); }

@media (max-width:980px){
  .form__row,.contact__grid,.job-detail__grid{ grid-template-columns:1fr; }
  .job{ grid-template-columns:1fr; }
  .apply-box{ position:static; }
}

/* Équipe (About) */
.team__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.member{ background:var(--creme); border:1px solid var(--sable-fonce); border-radius:var(--r-md); padding:1.8rem; text-align:center; transition:transform .35s var(--ease), box-shadow .35s var(--ease); }
.member:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.member__av{ width:84px; height:84px; border-radius:50%; margin:0 auto 1rem; background:radial-gradient(120% 120% at 30% 20%, var(--vert) 0%, var(--vert-profond) 70%); color:var(--pousse); display:grid; place-items:center; font-family:var(--display); font-size:1.7rem; box-shadow:inset 0 0 0 2px rgba(168,255,53,.35); }
.member h3{ color:var(--terre); font-size:1.2rem; }
.member span{ font-size:.9rem; color:var(--vert); font-weight:700; }
@media (max-width:980px){ .team__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .team__grid{ grid-template-columns:1fr; } }

/* Coches génériques (hors .field : recrutement, etc.) — corrige la taille des SVG */
ul.ticks{ display:grid; gap:.6rem; margin-top:1.3rem; }
ul.ticks li{ display:flex; gap:.7rem; align-items:flex-start; font-size:.97rem; color:var(--encre-doux); }
ul.ticks svg{ width:1.3em; height:1.3em; flex:none; color:var(--vert); margin-top:.15rem; }
.apply-box ul.ticks svg{ color:var(--pousse); }

/* =============================================================
   PAGES DÉTAIL (article / projet / poste) — PHP
   ============================================================= */
.article{ background:var(--creme); }
.article__wrap{ max-width:820px; margin-inline:auto; }
.article__meta{ display:flex; flex-wrap:wrap; gap:.8rem; align-items:center; color:var(--encre-doux); font-size:.9rem; margin-bottom:1.4rem; }
.article__media{ margin:0 0 2rem; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-md); }
.detail-img{ width:100%; height:auto; display:block; }
.video-embed{ position:relative; width:100%; aspect-ratio:16/9; background:var(--vert-nuit); }
.video-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.article__body{ font-size:1.08rem; line-height:1.8; }
.article__body p{ margin-bottom:1.2rem; color:var(--encre); }
.back-link{ display:inline-flex; align-items:center; gap:.5rem; font-weight:700; color:var(--vert); margin-top:1.5rem; }
.back-link svg{ width:1.1em; transform:rotate(180deg); }

/* État vide (listes) */
.empty-state{ text-align:center; padding:3rem 1rem; color:var(--encre-doux); }
.empty-state svg{ width:48px; height:48px; color:var(--brun-clair); margin:0 auto 1rem; }

/* Flash messages (form) */
.flash{ border-radius:var(--r-md); padding:1rem 1.3rem; margin-bottom:1.5rem; font-weight:600; }
.flash--ok{ background:rgba(46,125,69,.12); color:var(--vert-profond); border:1.5px solid var(--vert-clair); }
.flash--err{ background:rgba(211,60,40,.1); color:#9a2a1c; border:1.5px solid #e0a99f; }