/* =====================================================================
   BEFOZA — DESIGN SYSTEM v3
   Une seule source de vérité. Toutes les pages héritent de ce fichier.
   RÈGLES : 2 polices · 1 échelle typo · 1 échelle d'espacement.
   Ne jamais écrire de font-size / margin / padding "à la main" dans le
   HTML : toujours passer par un token ou une classe de ce fichier.
   ===================================================================== */

:root{
  /* ---- PALETTE (ancrée dans Madagascar : latérite, forêt, Ravintsara) */
  --paper:#F4EEE3; --paper-2:#EBE2D2; --sand:#E4D9C4;
  --ink:#1B160F; --ink-soft:#574E42; --ink-faint:#8B8072;
  --green:#6FA30F; --green-deep:#4F760A; --green-bright:#A6D63F;
  --forest:#14301C; --forest-2:#0E2415;
  --laterite:#C0341A; --laterite-deep:#7E2410; --laterite-soft:#E4653F;
  --line:#DFD4BF; --line-dark:rgba(255,255,255,.15);

  /* ---- POLICES : DEUX familles, deux rôles. Aucune troisième. */
  --font-display:"Bricolage Grotesque",system-ui,sans-serif; /* titres + chiffres + eyebrows */
  --font-text:"Figtree",system-ui,-apple-system,sans-serif;   /* tout le reste */

  /* ---- ÉCHELLE TYPO : valeurs FIXES et partagées. */
  --fs-display:clamp(2.75rem,1.4rem + 5.4vw,5.25rem); /* H1 hero UNIQUEMENT */
  --fs-h1:clamp(2.2rem,1.4rem + 3.4vw,3.4rem);        /* titre de page */
  --fs-h2:clamp(1.9rem,1.35rem + 2.2vw,2.85rem);      /* titre de section — UNIFORME partout */
  --fs-h3:1.375rem;                                    /* sous-titre / carte — UNIFORME partout (22px) */
  --fs-lead:clamp(1.1rem,1rem + .5vw,1.28rem);        /* chapô */
  --fs-body:1.0625rem;                                 /* texte courant (17px) */
  --fs-sm:.9375rem;                                    /* secondaire (15px) */
  --fs-cap:.8125rem;                                   /* légende / mention (13px) */
  --fs-eyebrow:.75rem;                                 /* sur-titre (12px) */

  --lh-tight:1.06; --lh-snug:1.2; --lh-body:1.62;
  --ls-head:-.022em; --ls-eyebrow:.22em;

  /* ---- ÉCHELLE D'ESPACEMENT : base 4px. Rien en dehors de cette liste. */
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem;
  --s6:2rem; --s7:3rem; --s8:4rem; --s9:6rem; --s10:8rem;

  /* ---- RYTHME (dérivé de l'échelle, appliqué partout à l'identique) */
  --section-y:clamp(4rem,8vw,7rem); /* padding vertical de CHAQUE section */
  --head-gap:var(--s5);             /* eyebrow → titre */
  --head-lead-gap:var(--s4);        /* titre → chapô */
  --card-pad:clamp(1.25rem,2vw,1.75rem);
  --grid-gap:clamp(1.25rem,2.5vw,1.75rem);
  --wrap:1200px;
  --wrap-pad:clamp(1.2rem,4vw,2.6rem);

  /* ---- RAYONS / OMBRES */
  --r:14px; --r-lg:24px; --r-pill:100px;
  --shadow:0 2px 4px rgba(27,22,15,.05),0 12px 40px rgba(27,22,15,.09);
  --shadow-lg:0 40px 80px -28px rgba(27,22,15,.4);
  --ease:cubic-bezier(.2,.8,.2,1);
}

/* ===================== BASE ===================== */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--font-text);font-size:var(--fs-body);line-height:var(--lh-body);
  overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

/* Titres : tous en display, même famille, même graisse, même interlettrage.
   La SEULE variable est la taille, pilotée par le token. */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:var(--lh-tight);
  letter-spacing:var(--ls-head);margin:0;color:var(--ink)}
h1{font-size:var(--fs-h1);font-weight:700}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3);line-height:var(--lh-snug)}
h4{font-size:var(--fs-sm)}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
/* Garde-fou ratio : une <img> porte désormais width/height en HTML (anti-CLS).
   Si le CSS ne pilote qu'une dimension, l'autre doit rester libre. */
img:not([class]){height:auto}
figure{margin:0}
ul{margin:0;padding:0;list-style:none}
::selection{background:var(--green);color:#fff}
sup{font-size:.55em;vertical-align:super}

/* ===================== PRIMITIVES ===================== */
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--wrap-pad)}
.wrap-narrow{max-width:720px;margin:0 auto;padding-inline:var(--wrap-pad)}

/* Toute section a le MÊME rythme vertical. */
.section{padding-block:var(--section-y)}
.section--tint{background:var(--paper-2)}
.section--tight{padding-block:clamp(2.75rem,5.5vw,4.5rem)} /* rythme resserré : pages éditoriales / articles */

/* En-tête de section : structure unique, réutilisée à l'identique. */
.head{max-width:44rem}
.head--center{margin-inline:auto;text-align:center}
.head .eyebrow{margin-bottom:var(--head-gap)}
.head h2,.head h1{margin:0}
.head .lead{margin-top:var(--head-lead-gap)}

.eyebrow{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--font-display);
  font-size:var(--fs-eyebrow);font-weight:700;text-transform:uppercase;
  letter-spacing:var(--ls-eyebrow);color:var(--green-deep)}
.eyebrow .sp{width:1.15rem;height:1.15rem;flex:none;color:var(--laterite)}
.on-dark .eyebrow{color:var(--green-bright)}
.on-dark .eyebrow .sp{color:var(--green-bright)}

.lead{font-size:var(--fs-lead);line-height:1.5;color:var(--ink-soft)}
.on-dark .lead{color:rgba(255,255,255,.86)}
.accent{color:var(--green-deep)}
.on-dark .accent{color:var(--green-bright)}
.text-muted{color:var(--ink-soft)}
.fs-sm{font-size:var(--fs-sm)}
.fs-cap{font-size:var(--fs-cap);color:var(--ink-faint)}

/* Filet éditorial (note) — un seul style. */
.note{border-left:3px solid var(--green);padding-left:var(--s5);color:var(--ink-soft);font-size:var(--fs-sm)}
.note strong{color:var(--ink)}

/* ===================== BOUTONS ===================== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--font-text);font-weight:700;font-size:var(--fs-sm);
  padding:.95rem 1.6rem;border-radius:var(--r-pill);border:1.5px solid transparent;
  cursor:pointer;line-height:1;white-space:nowrap;
  transition:transform .3s var(--ease),background .25s,color .25s,box-shadow .3s}
.btn svg{width:1.05em;height:1.05em;transition:transform .3s var(--ease)}
.btn-primary{background:var(--laterite);color:#fff;box-shadow:0 14px 30px -12px rgba(192,52,26,.65)}
.btn-primary:hover{background:var(--laterite-deep);transform:translateY(-3px)}
.btn-primary:hover svg{transform:translateX(4px)}
.btn-ghost{border-color:currentColor}
.btn-ghost:hover{background:var(--ink);color:var(--paper);transform:translateY(-3px)}
.on-dark .btn-ghost{color:#fff;border-color:rgba(255,255,255,.5)}
.on-dark .btn-ghost:hover{background:#fff;color:var(--forest)}
.btn-lg{padding:1.1rem 2rem;font-size:var(--fs-body)}
.btn-block{width:100%}

/* ===================== MÉDIA PLACEHOLDER (signature photo-optionnelle) =====
   <figure class="media" data-ratio="4/3">
     <img src="..."> OU rien → le placeholder animé s'affiche
     <figcaption>…</figcaption>
   </figure>
   Aucune image = le site reste fini et premium. */
.media{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--sand);box-shadow:var(--shadow)}
.media::before{content:"";display:block;padding-top:66.66%} /* 3/2 par défaut */
.media[data-ratio="4/3"]::before{padding-top:75%}
.media[data-ratio="16/10"]::before{padding-top:62.5%}
.media[data-ratio="16/9"]::before{padding-top:56.25%}
.media[data-ratio="1/1"]::before{padding-top:100%}
.media[data-ratio="3/4"]::before{padding-top:133.33%}
.media>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.media>figcaption{position:absolute;left:var(--s4);bottom:var(--s4);z-index:2;
  background:rgba(20,48,28,.9);color:#fff;font-size:var(--fs-cap);font-weight:600;
  padding:.5rem .85rem;border-radius:var(--r-pill);backdrop-filter:blur(4px)}

.ph{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:.9rem;
  text-align:center;color:rgba(255,255,255,.6);overflow:hidden;
  background:linear-gradient(140deg,var(--forest),var(--forest-2))}
.ph--laterite{background:linear-gradient(140deg,var(--laterite-deep),#5a1a0b)}
.ph--sand{background:linear-gradient(140deg,var(--sand),var(--paper-2));color:var(--ink-faint)}
.ph::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.05) 50%,transparent 60%)}
@keyframes ph-shimmer{to{background-position:-220% 0}}
.ph .wm{width:clamp(46px,9vw,80px);height:auto;opacity:.4;color:var(--green-bright)}
.ph--sand .wm{color:var(--green)}
@keyframes ph-spin{to{transform:rotate(360deg)}}
.ph .lab{font-family:var(--font-text);font-size:var(--fs-cap);font-weight:600;letter-spacing:.06em;text-transform:uppercase;opacity:.85}
.ph .sub{font-size:var(--fs-cap);opacity:.6;max-width:24ch}
@media(prefers-reduced-motion:reduce){.ph::after,.ph .wm{animation:none}}

/* ===================== GRILLES RÉUTILISABLES ===================== */
.split{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.split.rev .media{order:-1}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--grid-gap)}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--grid-gap)}

.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  display:flex;flex-direction:column;transition:transform .35s var(--ease),box-shadow .35s}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.card .media{border-radius:0;box-shadow:none}
.card .media::before{padding-top:62.5%}
.card-body{padding:var(--card-pad);display:flex;flex-direction:column;flex:1;gap:var(--s3)}
.card-body>*{margin:0}
.card p{color:var(--ink-soft);font-size:var(--fs-sm);flex:1}
.card .meta{font-size:var(--fs-cap);color:var(--ink-faint);font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.card .lk{margin-top:auto;font-weight:700;color:var(--laterite);font-size:var(--fs-sm);display:inline-flex;align-items:center;gap:.4rem}
.card .lk svg{width:1em;height:1em;transition:transform .25s}
.card:hover .lk svg{transform:translateX(4px)}
/* Lien-flèche réutilisable hors carte (ponts de parcours) */
.lk{font-weight:700;color:var(--laterite);font-size:var(--fs-sm);display:inline-flex;align-items:center;gap:.4rem;text-decoration:none}
.lk svg{width:1em;height:1em;transition:transform .25s var(--ease)}
.lk:hover svg{transform:translateX(4px)}
.on-dark .lk{color:var(--green-bright)}

/* Newsletter — composant partagé (home, blog, articles) */
.news{background:linear-gradient(155deg,var(--laterite),var(--laterite-deep));color:#fff;text-align:center;padding-block:clamp(3.25rem,5.5vw,4.75rem)}
.news h2{color:#fff}
.news .lead{color:rgba(255,255,255,.9);margin:var(--s4) auto 0;max-width:36rem}
.news .inner{max-width:42rem;margin-inline:auto}
.nlform{display:flex;gap:.6rem;max-width:31rem;margin:var(--s6) auto 0;flex-wrap:wrap}
.nlform input{flex:1;min-width:14rem;padding:1rem 1.3rem;border-radius:var(--r-pill);border:none;font:inherit;color:var(--ink)}
.news .btn-primary{background:var(--forest);box-shadow:none}
.news .btn-primary:hover{background:var(--forest-2)}
.news small{display:block;margin-top:var(--s4);font-size:var(--fs-cap);color:rgba(255,255,255,.7)}

/* ===================== HEADER / NAV (partagé) ===================== */
header.site{position:fixed;top:0;left:0;right:0;z-index:100;transition:background .35s,box-shadow .35s}
header.site.solid{background:rgba(244,238,227,.9);backdrop-filter:blur(16px);box-shadow:0 1px 0 var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding-block:1.1rem;transition:padding-block .35s}
header.site.solid .nav{padding-block:.65rem}
.brand img{height:44px;width:auto;transition:height .35s;filter:drop-shadow(0 1px 4px rgba(0,0,0,.25))}
header.site.solid .brand img{height:38px;filter:none}
.navlinks{display:flex;gap:1.35rem;align-items:center;font-weight:600;font-size:var(--fs-sm)}
.navlinks a{position:relative;padding:.3rem 0;color:var(--nav-fg,#fff);text-shadow:0 1px 8px rgba(0,0,0,.4);transition:color .2s}
header.site.solid .navlinks a{color:var(--ink-soft);text-shadow:none}
header.site.solid .navlinks a:hover,.navlinks a[aria-current="page"]{color:var(--ink)}
header.site.solid .navlinks a[aria-current="page"]{color:var(--laterite)}
.navlinks a::after{content:"";position:absolute;left:0;bottom:-3px;height:2px;width:0;background:var(--green);transition:width .3s var(--ease)}
.navlinks a:hover::after,.navlinks a[aria-current="page"]::after{width:100%}
.nav-right{display:flex;align-items:center;gap:1rem}
/* Switch de langue FR/EN */
.lang{display:inline-flex;gap:2px;padding:2px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--paper)}
.lang button{font:700 var(--fs-cap)/1 var(--font-display);letter-spacing:.04em;padding:.4rem .55rem;border:none;border-radius:var(--r-pill);background:none;color:var(--ink-faint);cursor:pointer;transition:background .2s,color .2s}
.lang button[aria-pressed="true"]{background:var(--laterite);color:#fff}
.lang button:hover{color:var(--ink)}
.lang button[aria-pressed="true"]:hover{color:#fff}
@media(max-width:400px){.nav-right{gap:.55rem}.lang button{padding:.35rem .45rem;letter-spacing:0}}
.burger{display:none;background:none;border:none;cursor:pointer;padding:.4rem;color:var(--nav-fg,#fff)}
header.site.solid .burger{color:var(--ink)}
.burger svg{width:28px;height:28px}
/* Header sur page à fond clair (pas de hero sombre) : texte foncé d'emblée */
body.light-nav header.site .navlinks a,body.light-nav header.site .burger{color:var(--ink-soft);text-shadow:none}

.mobnav{position:fixed;inset:0;z-index:200;background:var(--forest);color:#fff;
  display:flex;flex-direction:column;justify-content:center;padding:2rem;gap:1.2rem;
  transform:translateX(100%);transition:transform .45s var(--ease);visibility:hidden}
.mobnav.open{transform:none;visibility:visible}
.mobnav a{font-family:var(--font-display);font-weight:600;font-size:1.9rem;color:#fff}
.mobnav a[aria-current="page"]{color:var(--green-bright)}
.mobnav .close{position:absolute;top:1.4rem;right:1.4rem;background:none;border:none;color:#fff;cursor:pointer}
.mobnav .close svg{width:32px;height:32px}
.mobnav .btn-primary{align-self:flex-start;margin-top:var(--s4)}

/* ===================== FORMULAIRE (béton armé) ===================== */
.form{display:grid;gap:var(--s5)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
.field{display:grid;gap:.5rem}
.field>label{font-weight:700;font-size:var(--fs-sm);color:var(--ink)}
.field .req{color:var(--laterite)}
.field .hint{font-size:var(--fs-cap);color:var(--ink-faint)}
.control{width:100%;font:inherit;font-size:var(--fs-body);color:var(--ink);background:#fff;
  border:1.5px solid var(--line);border-radius:var(--r);padding:.85rem 1rem;transition:border-color .2s,box-shadow .2s}
textarea.control{min-height:9rem;resize:vertical}
.control::placeholder{color:var(--ink-faint)}
.control:hover{border-color:var(--ink-faint)}
.control:focus{outline:none;border-color:var(--laterite);box-shadow:0 0 0 3px rgba(192,52,26,.14)}
select.control{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%23574E42' stroke-width='2'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;padding-right:2.6rem;cursor:pointer}
.control:invalid:not(:placeholder-shown){border-color:var(--laterite)}
.field-error{display:none;font-size:var(--fs-cap);color:var(--laterite);font-weight:600}

/* Choix "cartes" (radios stylés) pour le motif de contact */
.choice-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.7rem}
.choice-cards label{position:relative;border:1.5px solid var(--line);background:#fff;border-radius:var(--r);
  padding:.9rem 1rem;cursor:pointer;display:flex;align-items:center;gap:.6rem;font-weight:600;font-size:var(--fs-sm);transition:all .2s}
.choice-cards label:hover{border-color:var(--green)}
.choice-cards input{position:absolute;opacity:0;pointer-events:none}
.choice-cards input:checked+.mk+span{color:var(--laterite)}
.choice-cards label:has(input:checked){border-color:var(--laterite);background:#FFF6F3;box-shadow:0 0 0 3px rgba(192,52,26,.12)}
.choice-cards .mk{width:1.1rem;height:1.1rem;border-radius:50%;border:2px solid var(--line);flex:none;display:grid;place-items:center;transition:all .2s}
.choice-cards label:has(input:checked) .mk{border-color:var(--laterite)}
.choice-cards label:has(input:checked) .mk::after{content:"";width:.55rem;height:.55rem;border-radius:50%;background:var(--laterite)}

.check{display:flex;gap:.7rem;align-items:flex-start;font-size:var(--fs-sm);color:var(--ink-soft)}
.check input{margin-top:.2rem;width:1.15rem;height:1.15rem;accent-color:var(--laterite);flex:none}
.check a{color:var(--green-deep);text-decoration:underline}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} /* honeypot anti-spam */

.form-cond{display:none}
.form-cond.show{display:grid;gap:var(--s5);animation:cond-in .4s var(--ease)}
@keyframes cond-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.form-note{background:var(--paper-2);border-radius:var(--r);padding:var(--s4);font-size:var(--fs-sm);color:var(--ink-soft)}
.form-status{display:none;padding:var(--s4);border-radius:var(--r);font-weight:600}
.form-status.ok{display:block;background:#EEF6DE;color:var(--green-deep);border:1px solid var(--green-bright)}

/* ===================== BANDES IMMERSIVES (fond sombre + placeholder) ===================== */
.band{position:relative;color:#fff;overflow:hidden;padding-block:clamp(4.5rem,10vw,8rem)}
.band>.ph{z-index:-2}
.band::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(14,25,15,.78),rgba(14,25,15,.6))}
.band .head h2,.band h2{color:#fff}

/* ===================== FIL D'ARIANE ===================== */
.crumb{display:flex;gap:.5rem;align-items:center;font-size:var(--fs-cap);color:var(--ink-faint);flex-wrap:wrap}
.crumb a:hover{color:var(--laterite)}
.crumb .sep{opacity:.5}

/* En-tête de page interne (sous le header fixe) */
.page-hero{padding-top:calc(var(--section-y) + 3.5rem);padding-bottom:var(--section-y)}
.page-hero .crumb{margin-bottom:var(--s5)}
.page-hero h1{margin:0}
.page-hero .lead{margin-top:var(--head-lead-gap);max-width:46rem}

/* ===================== FOOTER (partagé) ===================== */
footer.site{background:var(--forest-2);color:rgba(255,255,255,.72);padding-block:clamp(3.5rem,6vw,5rem) 2rem}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:clamp(2rem,4vw,3.5rem)}
.foot-brand img{height:56px;width:auto;margin-bottom:var(--s4)}
.foot-brand p{font-size:var(--fs-sm);max-width:26rem}
footer.site h2{font-family:var(--font-text);font-size:var(--fs-cap);text-transform:uppercase;letter-spacing:.16em;color:var(--green-bright);margin:0 0 var(--s4);font-weight:700}
footer.site ul{display:flex;flex-direction:column;gap:.6rem;font-size:var(--fs-sm)}
footer.site a:hover{color:#fff}
.socials{display:flex;gap:.7rem;margin-top:var(--s5)}
.socials a{width:42px;height:42px;border-radius:50%;border:1px solid var(--line-dark);display:grid;place-items:center;transition:all .25s}
.socials a:hover{background:var(--green);border-color:var(--green);color:var(--forest-2);transform:translateY(-3px)}
.socials svg{width:19px;height:19px}
.foot-bottom{border-top:1px solid var(--line-dark);margin-top:clamp(2rem,4vw,3rem);padding-top:1.5rem;
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:var(--fs-cap);color:rgba(255,255,255,.5)}
.foot-bottom a{text-decoration:underline}

/* ===================== UTILITAIRES SYSTÈME ===================== */
.skip{position:absolute;left:-999px;top:0;z-index:10001;background:var(--forest);color:#fff;padding:.8rem 1.2rem;border-radius:0 0 10px 0}
.skip:focus{left:0}
a:focus-visible,button:focus-visible,.control:focus-visible{outline:3px solid var(--green);outline-offset:3px;border-radius:6px}
.grain{position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* Liens de contact protégés (email/tél assemblés en JS — invisibles aux robots) */
.c-link{cursor:pointer;text-decoration:underline;text-underline-offset:2px}

/* Bandeau don flottant : apparaît à mi-page, réassurance + CTA */
.donate-flyout{position:fixed;left:50%;bottom:1.1rem;transform:translate(-50%,140%);z-index:95;
  width:min(560px,calc(100vw - 2rem));display:flex;align-items:center;gap:1rem;
  background:var(--forest);color:#fff;border-radius:var(--r-pill);padding:.7rem .7rem .7rem 1.4rem;
  box-shadow:0 24px 60px -18px rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.1);
  opacity:0;visibility:hidden;transition:transform .5s var(--ease),opacity .4s,visibility .4s}
.donate-flyout.show{transform:translate(-50%,0);opacity:1;visibility:visible}
.donate-flyout .fly-txt{flex:1;font-size:var(--fs-sm);line-height:1.3}
.donate-flyout .fly-txt b{font-family:var(--font-display);font-weight:700;display:block}
.donate-flyout .fly-txt span{color:rgba(255,255,255,.7);font-size:var(--fs-cap)}
.donate-flyout .btn-primary{flex:none;width:auto;white-space:nowrap;box-shadow:none}
.donate-flyout .fly-close{flex:none;background:none;border:none;color:rgba(255,255,255,.55);cursor:pointer;padding:.3rem;line-height:0}
.donate-flyout .fly-close:hover{color:#fff}
.donate-flyout .fly-close svg{width:18px;height:18px}
@media(max-width:560px){
  .donate-flyout{left:.6rem;right:.6rem;width:auto;transform:translateY(140%);border-radius:var(--r-lg);padding:.65rem .65rem .65rem 1rem;gap:.7rem}
  .donate-flyout.show{transform:translateY(0)}
  .donate-flyout .fly-txt span{display:none}
  .donate-flyout .fly-txt b{font-size:var(--fs-sm)}
  .donate-flyout .btn-primary{padding:.7rem 1.1rem;font-size:var(--fs-sm)}
}
@media(prefers-reduced-motion:reduce){.donate-flyout{transition:opacity .3s,visibility .3s}}

/* Révélation au scroll */
.rv{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.media>img{animation:none}}

/* ===================== RESPONSIVE (points de rupture uniques) ===================== */
@media(max-width:1080px){.navlinks{display:none}.burger{display:block}.nav-right .btn-primary{display:none}}
@media(max-width:940px){
  .split,.split.rev,.grid-2,.foot-grid,.form-row,.donate-grid{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr 1fr}      /* tablette : 2 colonnes */
  .split .media,.split.rev .media{order:-1}
  .foot-grid{gap:2.5rem}
  .donate-grid{gap:2.5rem}
}
@media(max-width:680px){
  .grid-3{grid-template-columns:1fr}          /* mobile : 1 colonne */
}
@media(max-width:600px){
  .wrap{padding-inline:1.5rem}                /* respiration mobile (logo + contenu) */
  .brand img{height:40px}
  .foot-bottom{flex-direction:column;gap:.5rem}
}
@media(max-width:520px){
  .btn{width:100%}
  .hero-cta .btn{flex:1}
}

/* Partenaires — bande de confiance sous le hero ; logos détourés, N&B -> couleur au survol */
.partners{padding:clamp(2.25rem,5vw,3.5rem) 0;background:var(--paper);text-align:center}
.partners-kicker{font:700 var(--fs-cap)/1 var(--font-display);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 clamp(1.5rem,3vw,2.25rem)}
.partners-grid{list-style:none;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(1.75rem,5vw,4rem);padding:0;margin:0}
.partners-grid li{display:flex;align-items:center;justify-content:center}
.partners-grid a{display:inline-flex;line-height:0}
.partners-grid img{height:clamp(52px,6.5vw,78px);width:auto;max-width:220px;object-fit:contain;filter:grayscale(1);opacity:.68;transition:filter .35s ease,opacity .35s ease}
.partners-grid li:hover img,.partners-grid img:hover{filter:grayscale(0);opacity:1}
@media(prefers-reduced-motion:reduce){.partners-grid img{transition:none}}

/* — Règle de rythme vertical uniforme : l'espacement des colonnes de texte est piloté par classe (fini les marges inline ad-hoc) — */
.wrap.split > div > * + *{margin-top:var(--s5)}
.wrap.split > div > h2 + .lead{margin-top:var(--head-lead-gap)}

/* Carte CTA vert foncé (sans image) — ex. « Devenir bénévole », d'après la maquette */
.card--cta{background:var(--forest);border-color:transparent;color:#fff}
.card--cta .card-body{justify-content:center}
.card--cta .meta{color:var(--green-bright)}
.card--cta h3{color:#fff}
.card--cta p{color:rgba(255,255,255,.8);flex:initial}
.card--cta .lk{color:var(--green-bright);margin-top:0}
.card--cta:hover{box-shadow:var(--shadow-lg)}

/* Écart uniforme en-tête de section -> contenu (cartes, tableau, grille…) */
.wrap .head + *{margin-top:clamp(2.25rem,4vw,3.25rem)}

/* Hiérarchie de lecture des articles : intertitres nettement sous le titre (~28px) */

/* Archive des lettres d'information (téléchargeable) */
.letters{list-style:none;padding:0;margin:0;display:grid;gap:var(--s3)}
.letters a{display:flex;align-items:center;gap:var(--s4);padding:clamp(1rem,2vw,1.25rem) clamp(1.1rem,2.5vw,1.5rem);background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);text-decoration:none;color:var(--ink);transition:border-color .2s,transform .2s}
.letters a:hover{border-color:var(--laterite);transform:translateY(-2px)}
.letters .l-date{font-family:var(--font-display);font-weight:700;font-size:var(--fs-cap);color:var(--laterite);text-transform:uppercase;letter-spacing:.06em;min-width:9rem}
.letters .l-name{flex:1;color:var(--ink-soft)}
.letters .l-dl{width:22px;height:22px;color:var(--ink-faint);flex:none;transition:color .2s}
.letters a:hover .l-dl{color:var(--laterite)}
@media(max-width:520px){.letters a{flex-wrap:wrap}.letters .l-date{min-width:0;width:100%}}

/* ===================== GRAND FORMAT 16/9 POUR IMAGE PORTRAIT (blurred-fill) ===================== */
.media-fill{position:relative;aspect-ratio:16/9;width:100%;border-radius:var(--r-lg);overflow:hidden;background:var(--forest-2);margin:0}
.media-fill .mf-bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:blur(30px) brightness(.5) saturate(1.1);transform:scale(1.2)}
.media-fill > img{position:relative;height:100%;width:auto;max-width:92%;margin:0 auto;display:block;object-fit:contain}
.media-fill figcaption{position:absolute;left:0;right:0;bottom:0;padding:2.4rem 1.2rem .9rem;text-align:center;
  font-family:var(--font-display);font-weight:600;font-size:var(--fs-cap);letter-spacing:.03em;color:rgba(255,255,255,.92);
  background:linear-gradient(0deg,rgba(0,0,0,.6),transparent)}
@media(max-width:600px){.media-fill{aspect-ratio:4/3}.media-fill > img{max-width:74%}}


/* ============ Façade vidéo — aucun tiers chargé avant le clic ============ */
.video{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:16/9;cursor:pointer;
  background:linear-gradient(150deg,var(--forest),var(--forest-2));box-shadow:var(--shadow-lg)}
.video::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(70% 70% at 50% 45%,rgba(192,52,26,.28),transparent 70%)}
.video-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.video-inner{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:1rem;color:#fff;text-align:center;padding:2rem}
.video-play{width:74px;height:74px;border-radius:50%;border:none;background:var(--laterite);color:#fff;
  display:grid;place-items:center;cursor:pointer;box-shadow:0 14px 34px -8px rgba(0,0,0,.6);
  transition:transform .25s var(--ease),background .25s}
.video:hover .video-play{transform:scale(1.08);background:var(--laterite-deep)}
.video-play svg{width:30px;height:30px;margin-left:4px}
.video-year{font-family:var(--font-display);font-weight:700;line-height:1;letter-spacing:-.02em;
  font-size:clamp(2rem,4vw,3.1rem);color:var(--green-bright);text-shadow:0 2px 20px rgba(0,0,0,.35)}
.video-cap{font-family:var(--font-display);font-weight:600;font-size:var(--fs-lead);max-width:34ch;
  text-shadow:0 2px 20px rgba(0,0,0,.4)}
.video-sub{font-size:var(--fs-sm);color:rgba(255,255,255,.75)}
.video-dur{position:absolute;right:.7rem;bottom:.7rem;z-index:3;background:rgba(8,18,10,.85);color:#fff;
  font-family:var(--font-display);font-weight:600;font-size:.74rem;padding:.22rem .5rem;border-radius:6px}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:4}
/* Vignette présente : elle porte déjà le titre → on n'affiche que le bouton */
.video.has-cover::after{background:linear-gradient(0deg,rgba(8,18,10,.42),transparent 58%)}
.video.has-cover .video-year,.video.has-cover .video-cap,.video.has-cover .video-sub{display:none}
/* Titre en vrai texte, sous la vidéo (lisible, traduisible, indexable) */
.film{margin:0}
.film .video{margin-top:0}
.film-cap{margin-top:.65rem;font-family:var(--font-display);font-weight:600;line-height:1.3;
  font-size:var(--fs-sm);color:var(--ink)}
.film--lead{margin-top:clamp(1.5rem,3vw,2.5rem)}
.film--lead .film-cap{font-size:var(--fs-lead)}
.film-year{color:var(--laterite);margin-right:.45rem}
.video-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.9rem,1.8vw,1.4rem);
  margin-top:clamp(.9rem,1.8vw,1.4rem)}
.video--sm .video-inner{gap:.55rem;padding:1rem}
.video--sm .video-play{width:52px;height:52px}
.video--sm .video-play svg{width:22px;height:22px;margin-left:3px}
.video-grid--2{grid-template-columns:repeat(2,1fr)}
@media(max-width:760px){.video-grid,.video-grid--2{grid-template-columns:1fr}}

/* ---- Rendez-vous récurrents : tuiles régulières, prêtes à recevoir une période ---- */
.ev-named{margin-top:clamp(2.5rem,5vw,4rem)}
.ev-named-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  margin-bottom:clamp(1.1rem,2.4vw,1.7rem)}
.ev-named-head h2{font-size:var(--fs-h3);margin:0}
.ev-named-head p{margin:0;font-size:var(--fs-sm);color:var(--ink-faint)}
.ev-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(.8rem,1.6vw,1.1rem)}
.ev-item{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.05rem,2vw,1.35rem);display:flex;flex-direction:column;gap:.4rem;
  transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}
.ev-item:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--sand)}
.ev-n{font-family:var(--font-display);font-weight:600;font-size:1.03rem;line-height:1.25;color:var(--ink)}
.ev-v{display:flex;align-items:center;gap:.42rem;font-size:var(--fs-sm);color:var(--ink-faint);line-height:1.3}
.ev-v svg{width:.92rem;height:.92rem;flex:none;color:var(--laterite)}
@media(max-width:900px){.ev-list{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.ev-list{grid-template-columns:1fr}}

/* ---- Rythme vertical unifié des médias en contexte éditorial ----
   Toutes les figures d'un article (photo, vidéo, film) suivent le même pas
   vertical, quelle que soit leur nature. Évite les écarts asymétriques. */
.article figure.media,
.article figure.film,
.article .media-fill{margin:var(--s6) 0}
.article figure.film--lead{margin-top:var(--s6)}
.article figure.film .film-cap{margin-top:var(--s3)}

.form-status.err{display:block;background:#FDECE8;border:1px solid #F3C4B8;color:#7E2410;padding:var(--s3) var(--s4);border-radius:var(--r);font-size:var(--fs-sm);margin-bottom:var(--s4)}

.nl-status{margin:var(--s3) 0 0;font-size:var(--fs-sm);min-height:1.2em}
.nl-status.ok{color:#A6D63F;font-weight:600}
.nl-status.err{color:#FFD9CF;font-weight:600}

/* ============ ÉVÉNEMENTS DATÉS ============
   Bandeau « prochain rendez-vous » + fiche événement.
   Le bandeau disparaît tout seul après la date (voir befoza.js). */
.ev-next{display:none;position:relative;overflow:hidden;border-radius:var(--r-lg);
  background:linear-gradient(120deg,var(--forest),var(--forest-2));color:#fff;box-shadow:var(--shadow-lg)}
.ev-next.is-live{display:block}
.ev-next-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:stretch}
.ev-next-img{position:relative;min-height:230px}
.ev-next-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:20% center}   /* le bloc de date est à gauche : on ancre à 20 % */
.ev-next-body{padding:clamp(1.5rem,3vw,2.4rem);display:flex;flex-direction:column;justify-content:center;gap:var(--s3)}
.ev-flag{display:inline-flex;align-items:center;gap:.5rem;align-self:flex-start;background:var(--laterite);
  color:#fff;font-family:var(--font-text);font-weight:700;font-size:var(--fs-cap);letter-spacing:.12em;
  text-transform:uppercase;padding:.34rem .78rem;border-radius:var(--r-pill)}
.ev-next h2,.ev-next h3{color:#fff;margin:0;font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.12}
.ev-meta{display:flex;flex-wrap:wrap;gap:.5rem .9rem;font-size:var(--fs-sm);color:rgba(255,255,255,.82)}
.ev-meta span{display:inline-flex;align-items:center;gap:.4rem}
.ev-meta svg{width:.95rem;height:.95rem;flex:none;color:var(--green-bright)}
.ev-next p{margin:0;color:rgba(255,255,255,.8);font-size:var(--fs-sm);line-height:1.55}
.evn-cta{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:var(--s2)}
.ev-count{font-family:var(--font-display);font-weight:700;color:var(--green-bright);font-size:var(--fs-sm)}
@media(max-width:820px){.ev-next-grid{grid-template-columns:minmax(0,1fr)}.ev-next-img{min-height:190px}}

/* Fiche événement */
.evp-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.72fr);gap:clamp(1.5rem,4vw,3rem);align-items:start}
.evp-affiche{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-lg);border:1px solid var(--line)}
.evp-affiche img{width:100%;height:auto;display:block}
.evp-facts{list-style:none;margin:var(--s5) 0 0;padding:0;border-top:1px solid var(--line)}
.evp-facts li{display:flex;gap:var(--s4);padding:var(--s3) 0;border-bottom:1px solid var(--line);font-size:var(--fs-sm)}
.evp-facts b{flex:none;width:8.5rem;font-family:var(--font-text);font-weight:700;color:var(--ink-faint);
  text-transform:uppercase;letter-spacing:.06em;font-size:var(--fs-cap)}
.evp-note{background:var(--paper-2);border-left:3px solid var(--green);border-radius:0 var(--r) var(--r) 0;
  padding:var(--s4) var(--s5);margin-top:var(--s5);font-size:var(--fs-sm);color:var(--ink-soft)}
@media(max-width:800px){.evp-head{grid-template-columns:1fr}}

/* Archive des éditions passées */
.ev-past{list-style:none;margin:var(--s5) 0 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--s3)}
.ev-past li{border:1px solid var(--line);border-radius:var(--r);padding:var(--s4);background:#fff}
.ev-past .y{font-family:var(--font-display);font-weight:700;color:var(--laterite);font-size:var(--fs-sm)}
.ev-past .n{display:block;margin-top:.2rem;font-size:var(--fs-sm);color:var(--ink-soft)}

/* ============ BANDEAU DE PROMOTION D'ÉVÉNEMENT ============
   Injecté par befoza.js sur toutes les pages. Se retire seul après la date.
   Réglages : objet PROMO en haut de assets/befoza.js
   Parti pris : fond sombre, aucun bouton plein — le seul aplat rouge du haut
   de page reste le CTA « Faire un don » du menu. */
.promo{position:fixed;top:0;left:0;right:0;z-index:120;
  background:linear-gradient(90deg,var(--forest-2),var(--forest));
  border-bottom:1px solid rgba(255,255,255,.08);color:#fff}
.promo-in{max-width:var(--wrap);margin:0 auto;padding:.55rem clamp(1rem,4vw,2.6rem);
  display:flex;align-items:center;gap:.7rem;flex-wrap:nowrap}
.promo-dot{width:6px;height:6px;border-radius:50%;background:var(--laterite-soft);flex:none;
  box-shadow:0 0 0 0 rgba(228,101,63,.55);animation:promoPulse 2.6s ease-out infinite}
@keyframes promoPulse{0%{box-shadow:0 0 0 0 rgba(228,101,63,.5)}70%{box-shadow:0 0 0 7px rgba(228,101,63,0)}100%{box-shadow:0 0 0 0 rgba(228,101,63,0)}}
@media(prefers-reduced-motion:reduce){.promo-dot{animation:none}}
.promo-t{font-family:var(--font-display);font-weight:600;font-size:var(--fs-sm);line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff}
.promo-sep{width:1px;height:14px;background:rgba(255,255,255,.18);flex:none}
.promo-d{font-size:var(--fs-sm);color:rgba(255,255,255,.6);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
/* compte à rebours : le signal, à la place d'un bouton */
.promo-j{flex:none;font-family:var(--font-display);font-weight:700;font-size:var(--fs-cap);
  letter-spacing:.04em;color:var(--green-bright);background:rgba(166,214,63,.13);
  border:1px solid rgba(166,214,63,.28);padding:.22rem .5rem;border-radius:6px}
.promo-a{flex:none;margin-left:auto;display:inline-flex;align-items:center;gap:.4rem;color:#fff;
  font-family:var(--font-text);font-weight:600;font-size:var(--fs-sm);
  border-bottom:1px solid rgba(255,255,255,.35);padding-bottom:1px;transition:border-color .25s}
.promo-a:hover{border-bottom-color:#fff}
.promo-a svg{width:.85rem;height:.85rem;transition:transform .25s var(--ease)}
.promo-a:hover svg{transform:translateX(3px)}
.promo-x{flex:none;background:none;border:none;color:rgba(255,255,255,.45);cursor:pointer;
  padding:.3rem;line-height:0;border-radius:6px;transition:color .2s}
.promo-x:hover{color:#fff}
.promo-x svg{width:14px;height:14px}
/* décalage du reste du site quand le bandeau est présent */
body.has-promo{padding-top:var(--promo-h,42px)}
body.has-promo header.site{top:var(--promo-h,42px)}
body.has-promo .hero{min-height:calc(100svh - var(--promo-h,42px))}
@media(max-width:900px){.promo-d,.promo-sep{display:none}}
@media(max-width:620px){
  .promo-in{padding-block:.45rem;gap:.5rem}
  .promo-t{flex:1;min-width:0;font-size:var(--fs-cap)}
  .promo-a span{display:none}
}

/* marge sous le bandeau événement quand une grille suit */
.ev-next + .grid-3,.ev-next + .cards{margin-top:clamp(2rem,4vw,3rem)}

/* ---- Garde-fou : la première section doit toujours dégager l'en-tête fixe ----
   Convention du site : .page-hero. Cette règle rattrape les pages qui ne
   l'emploient pas (articles, fiches événement) et couvre les pages à venir. */
main > section:first-of-type:not(.hero){padding-top:calc(var(--section-y) + 3.5rem)}

/* ---- Fiche événement : la liste des informations s'empile sur mobile ---- */
@media(max-width:560px){
  .evp-facts li{flex-direction:column;gap:.2rem;padding:var(--s3) 0}
  .evp-facts b{width:auto}
}

/* Dates des rendez-vous : la prochaine échéance, calculée au chargement */
.ev-d{display:flex;align-items:flex-start;gap:.42rem;font-size:var(--fs-cap);font-weight:600;
  line-height:1.35;color:var(--green-deep);margin-top:.1rem}
.ev-d svg{width:.85rem;height:.85rem;flex:none;margin-top:.15rem}
.ev-d.is-tbc{color:var(--ink-faint);font-weight:500}
.ev-item a{display:flex;flex-direction:column;gap:.4rem}
.ev-item a .ev-n{text-decoration:underline;text-decoration-color:var(--sand);text-underline-offset:3px}
.ev-item a:hover .ev-n{text-decoration-color:var(--laterite)}