/* ============================================================
   FOUNDATION PHOENIX — design system
   COULEURS OFFICIELLES — charte Paloha (partner-uploads/paloha.pdf p.2) :
     Noir intense #1D1D1B · Blanc pur #FFFFFF · Bleu profond #213A76
     Rouge vif #CA1431 · Jaune vibrant #FFCD02 · Typo officielle : Inter
   Structure & UX dérivées des 4 références Behance :
   - Wix Nonprofit  → anatomie des sections (héros, bande d'impact, split…)
   - McGrath        → slogans très grands, portraits humains
   - Al-Ihsan       → CTA jaune vibrant, widget de don, nav conversion
   - SAVED          → motifs doodle blancs discrets sur aplats de couleur
   Contrastes vérifiés AA (≥ 4.5:1) :
     noir/blanc 16.9 · blanc/bleu 10.9 · jaune/bleu 7.2 · noir/jaune 11.2
     rouge/blanc 5.7 · noir/gris-clair 15.3 · muted/blanc 7.3
   NB : les noms de classes historiques (band-sage, btn-forest…) sont
   conservés ; leurs valeurs pointent sur la charte officielle.
   ============================================================ */
:root {
  /* palette officielle */
  --deep:   #213A76;  /* bleu profond (bandes sombres, footer)          */
  --forest: #213A76;  /* bleu profond (liens, boutons secondaires)      */
  --sage:   #B9C3DC;  /* teinte du bleu (cadres, bordures douces)       */
  --sage-2: #EEF1F8;  /* teinte claire du bleu (sections alternées)     */
  --cream:  #FFFFFF;  /* blanc pur (fond de page)                       */
  --card:   #FFFFFF;
  --ink:    #1D1D1B;  /* noir intense — texte principal                 */
  --muted:  #54565E;  /* gris neutre dérivé — texte secondaire          */
  --ember:  #FFCD02;  /* jaune vibrant — CTA (texte noir dessus)        */
  --ember-text: #CA1431;  /* rouge vif — eyebrows, accents              */
  --amber:  #FFCD02;  /* jaune vibrant — chiffres sur fond bleu         */
  /* typographie officielle */
  --f-display: "Inter", -apple-system, "Segoe UI", sans-serif;
  --f-body: "Inter", -apple-system, "Segoe UI", sans-serif;
  /* échelle d'espacement (base 8) */
  --s1: .5rem; --s2: 1rem; --s3: 1.5rem; --s4: 2rem; --s5: 3rem; --s6: 4.5rem; --s7: 6rem;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(29, 29, 27, .10);
  --maxw: 72rem;
}

@font-face { font-family: "Inter"; src: url("../fonts/inter-v20-latin-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-v20-latin-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-v20-latin-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-v20-latin-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-v20-latin-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-v20-latin-800.woff2") format("woff2"); font-weight: 800; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--cream); color: var(--ink);
  font-family: var(--f-body); font-size: 1.0625rem; line-height: 1.65;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--forest); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--deep); }
:focus-visible { outline: 3px solid var(--ember); outline-offset: 2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

h1, h2, h3 { font-family: var(--f-display); font-weight: 800; line-height: 1.1; letter-spacing: -.025em; margin: 0 0 var(--s2); }
h1 { font-size: clamp(2.4rem, 5.5vw, 4.2rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); }
h3 { font-size: 1.25rem; line-height: 1.3; }
p  { margin: 0 0 var(--s2); }
.lead { font-size: 1.2rem; color: var(--muted); }
.eyebrow {
  display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ember-text); margin-bottom: var(--s2);
}
.band-dark .eyebrow { color: var(--amber); }

.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(1.1rem, 4vw, 2rem); }
section { padding-block: var(--s6); }
.section-tight { padding-block: var(--s5); }

/* ---------- header / nav (21st.dev #606 + #7450, adaptés) ---------- */
.skip-link { position: absolute; left: -999px; top: 0; background: var(--deep); color: #fff; padding: .6rem 1rem; z-index: 100; }
.skip-link:focus { left: 0; }
header.site {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .92); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--sage-2);
}
.navbar { display: flex; align-items: center; gap: var(--s3); padding-block: .65rem; }
.brand { display: flex; align-items: center; gap: .65rem; text-decoration: none; color: var(--deep); font-family: var(--f-display); font-weight: 700; font-size: 1.05rem; line-height: 1.1; }
.brand img { width: 44px; height: auto; }
nav.primary { margin-left: auto; }
nav.primary > ul { display: flex; align-items: center; gap: .25rem; list-style: none; margin: 0; padding: 0; }
nav.primary a { text-decoration: none; font-weight: 500; font-size: .95rem; color: var(--ink); padding: .55rem .75rem; border-radius: 999px; }
nav.primary a:hover { background: var(--sage-2); }
nav.primary a[aria-current="page"] { background: var(--deep); color: #fff; }
.has-sub { position: relative; }
.has-sub > button {
  font: inherit; font-weight: 500; font-size: .95rem; color: var(--ink); background: none; border: 0;
  padding: .55rem .75rem; border-radius: 999px; cursor: pointer; display: flex; align-items: center; gap: .3rem;
}
.has-sub > button:hover { background: var(--sage-2); }
.has-sub > button::after { content: ""; width: .5em; height: .5em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.submenu {
  position: absolute; top: calc(100% + .4rem); left: 0; min-width: 17rem;
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: .5rem; list-style: none; margin: 0; display: none;
}
.has-sub.open .submenu { display: block; }
.submenu a { display: block; border-radius: 8px; padding: .55rem .75rem; }
.btn-donate {
  background: var(--ember); color: var(--ink) !important; font-weight: 700; border-radius: 999px;
  padding: .6rem 1.15rem !important; margin-left: .35rem; text-decoration: none;
}
.btn-donate:hover { background: #E5B800; }
.lang { display: flex; gap: .15rem; margin-left: .5rem; border: 1px solid var(--sage); border-radius: 999px; padding: .15rem; }
.lang a { text-decoration: none; font-size: .8rem; font-weight: 700; padding: .3rem .55rem; border-radius: 999px; color: var(--muted); }
.lang a[aria-current="true"] { background: var(--deep); color: #fff; }
.nav-toggle { display: none; margin-left: auto; background: none; border: 1px solid var(--sage); border-radius: 10px; padding: .5rem .6rem; cursor: pointer; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--ink); margin: 5px 0; }
@media (max-width: 62rem) {
  .nav-toggle { display: block; }
  nav.primary { display: none; position: fixed; inset: 0; top: 64px; background: var(--cream); overflow: auto; padding: var(--s3); margin: 0; }
  nav.primary.open { display: block; }
  nav.primary > ul { flex-direction: column; align-items: stretch; gap: .35rem; }
  nav.primary a, .has-sub > button { width: 100%; font-size: 1.05rem; }
  .submenu { position: static; box-shadow: none; background: var(--sage-2); }
  .lang { margin: var(--s2) 0 0; justify-content: center; }
}

/* ---------- hero (21st.dev #9904, adapté) ---------- */
.hero { position: relative; isolation: isolate; min-height: 78vh; display: grid; align-items: end; color: #fff; padding: 0; }
.hero.short { min-height: 46vh; }
.hero img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(29,29,27,.30) 0%, rgba(33,58,118,.45) 60%, rgba(20,23,38,.90) 100%); }
.hero .wrap { padding-block: var(--s6) var(--s5); width: 100%; }
.hero h1 { color: #fff; max-width: 17ch; text-wrap: balance; }
.hero .lead { color: rgba(255,255,255,.92); max-width: 52ch; }
.hero .badge {
  display: inline-flex; align-items: center; gap: .5rem; background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.28); backdrop-filter: blur(6px);
  border-radius: 999px; padding: .35rem .9rem; font-size: .85rem; font-weight: 600; margin-bottom: var(--s2);
}
.cta-row { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }
.btn { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; text-decoration: none;
  border-radius: 999px; padding: .8rem 1.5rem; font-size: 1rem; border: 2px solid transparent; }
.btn-primary { background: var(--ember); color: var(--ink); }
.btn-primary:hover { background: #E5B800; color: var(--ink); }
.btn-ghost { border-color: rgba(255,255,255,.6); color: #fff; }
.btn-ghost:hover { background: rgba(255,255,255,.12); color: #fff; }
.btn-forest { background: var(--forest); color: #fff; }
.btn-forest:hover { background: var(--deep); color: #fff; }
.btn-outline { border-color: var(--forest); color: var(--forest); }
.btn-outline:hover { background: var(--forest); color: #fff; }

/* ---------- bande d'impact (21st.dev #1054/#20459 + réf Wix) ---------- */
.band-dark { background: var(--deep); color: #fff; position: relative; overflow: hidden; }
.band-dark h2, .band-dark h3 { color: #fff; }
.band-dark p { color: rgba(255,255,255,.85); }
.band-dark a:not(.btn) { color: var(--amber); }
.band-dark::before { /* doodle SAVED : flamme/feuillage en traits blancs */
  content: ""; position: absolute; inset: 0; opacity: .07; pointer-events: none;
  background: url("../img/doodle-phoenix.svg") no-repeat right -60px top -40px / 420px auto,
              url("../img/doodle-leaves.svg") no-repeat left -50px bottom -60px / 380px auto;
}
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--s3); text-align: center; }
.stats .n { font-family: var(--f-display); font-weight: 700; font-size: clamp(2.2rem, 4.5vw, 3.4rem); color: var(--amber); line-height: 1; }
.stats .l { margin-top: .4rem; font-size: .95rem; color: rgba(255,255,255,.85); }

/* ---------- cartes piliers (21st.dev #1521, adapté) ---------- */
.grid { display: grid; gap: var(--s3); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }
.card {
  background: var(--card); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
  display: flex; flex-direction: column; transition: transform .25s ease, box-shadow .25s ease;
}
.card:hover { transform: translateY(-5px); box-shadow: 0 16px 40px rgba(29,29,27,.16); }
.card img { aspect-ratio: 16/9; object-fit: cover; width: 100%; }
.card .pad { padding: var(--s3); display: flex; flex-direction: column; gap: .4rem; flex: 1; }
.card .num { font-family: var(--f-display); font-weight: 700; color: var(--muted); font-size: 1rem; }
.card h3 a { text-decoration: none; color: var(--ink); }
.card h3 a::after { content: ""; position: absolute; inset: 0; }
.card { position: relative; }
.card p { color: var(--muted); font-size: .97rem; margin: 0; }
.card .more { margin-top: auto; padding-top: .6rem; font-weight: 700; color: var(--ember-text); font-size: .92rem; }

/* ---------- split mission / purpose (réf Wix+McGrath) ---------- */
.split { display: grid; gap: var(--s5); align-items: center; }
@media (min-width: 56rem) { .split { grid-template-columns: 1fr 1fr; } }
.split figure { margin: 0; position: relative; }
.split figure img { border-radius: var(--radius); box-shadow: var(--shadow); }
.split figure .tag {
  position: absolute; left: -1rem; bottom: -1rem; background: var(--deep); color: #fff;
  border-radius: 12px; padding: .8rem 1.2rem; font-weight: 700; font-family: var(--f-display);
}
.slogan { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.15; max-width: 20ch; }

/* ---------- citation ambassadrice (21st.dev #20215 + réf McGrath) ---------- */
.quote-card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  display: grid; gap: var(--s3); padding: var(--s4); align-items: center; }
@media (min-width: 48rem) { .quote-card { grid-template-columns: auto 1fr; } }
.quote-card img { width: 132px; height: 132px; border-radius: 50%; object-fit: cover; border: 4px solid var(--sage-2); }
.quote-card blockquote { margin: 0; font-family: var(--f-display); font-style: italic; font-weight: 500; font-size: 1.2rem; line-height: 1.5; }
.quote-card cite { display: block; margin-top: .7rem; font-style: normal; font-family: var(--f-body); font-weight: 700; font-size: .95rem; }
.quote-card cite span { display: block; font-weight: 500; color: var(--muted); }

/* ---------- ambassadrices (21st.dev #5281, adapté) ---------- */
.amb-grid { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.amb { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); background: var(--deep); }
.amb img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.amb .cap { padding: var(--s3); color: #fff; }
.amb .cap .who { font-family: var(--f-display); font-weight: 700; font-size: 1.2rem; }
.amb .cap .full { font-size: .85rem; color: rgba(255,255,255,.75); }
.amb .cap .role { display: inline-block; margin-top: .5rem; font-size: .78rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--amber); }

/* ---------- timeline programmes (21st.dev #19863, adapté) ---------- */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { display: grid; grid-template-columns: auto 1fr; gap: var(--s3); }
.timeline .dot { display: flex; flex-direction: column; align-items: center; }
.timeline .dot span {
  width: 3rem; height: 3rem; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: var(--sage-2); color: var(--deep); font-family: var(--f-display); font-weight: 700; font-size: 1.15rem;
  border: 2px solid var(--sage);
}
.timeline .dot::after { content: ""; width: 2px; flex: 1; background: var(--sage); margin-top: .4rem; }
.timeline li:last-child .dot::after { display: none; }
.timeline .body { padding-bottom: var(--s5); }
.timeline .meta { font-size: .85rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ember-text); }

/* ---------- équipe (21st.dev #10098, adapté) ---------- */
.team-group { margin-top: var(--s4); }
.team-grid { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); }
.member { text-align: center; }
.member img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius);
  filter: grayscale(35%); transition: filter .3s ease; }
.member:hover img { filter: none; }
.member .nm { font-weight: 700; font-size: .95rem; margin-top: .6rem; line-height: 1.25; }
.member .rl { font-size: .82rem; color: var(--muted); line-height: 1.35; }

/* ---------- don (réf Al-Ihsan) ---------- */
.donate-panel { background: var(--deep); border-radius: var(--radius); padding: var(--s4); color: #fff; box-shadow: var(--shadow); }
.donate-panel .amounts { display: flex; flex-wrap: wrap; gap: .6rem; margin: var(--s2) 0 var(--s3); }
.donate-panel .amounts a {
  border: 2px solid rgba(255,255,255,.4); color: #fff; text-decoration: none; font-weight: 700;
  border-radius: 10px; padding: .65rem 1.1rem;
}
.donate-panel .amounts a:hover, .donate-panel .amounts a.hot { background: var(--amber); border-color: var(--amber); color: var(--ink); }
.note { font-size: .9rem; color: var(--muted); }

/* ---------- actus (21st.dev #686/#5622) ---------- */
.date { font-size: .85rem; color: var(--muted); }
article.prose { max-width: 46rem; margin-inline: auto; }
article.prose img { border-radius: var(--radius); margin-block: var(--s3); }
article.prose h2 { margin-top: var(--s4); font-size: 1.5rem; }

/* ---------- listes définitions / contact ---------- */
.info-card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: var(--s4); }
.info-card ul { list-style: none; margin: 0; padding: 0; }
.info-card li { padding: .45rem 0; }
.info-card li strong { display: block; font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }

/* ---------- bandes sauge ---------- */
.band-sage { background: var(--sage-2); }
.band-cream { background: var(--cream); }

/* ---------- footer (21st.dev #21351, adapté) ---------- */
footer.site { background: var(--deep); color: rgba(255,255,255,.85); margin-top: var(--s6); position: relative; overflow: hidden; }
footer.site::before { content: ""; position: absolute; inset: 0; opacity: .06; pointer-events: none;
  background: url("../img/doodle-phoenix.svg") no-repeat right -80px bottom -80px / 460px auto; }
footer.site .cols { display: grid; gap: var(--s4); padding-block: var(--s5); grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); position: relative; }
footer.site h3 { color: #fff; font-size: 1.02rem; }
footer.site ul { list-style: none; margin: 0; padding: 0; }
footer.site li { padding: .22rem 0; }
footer.site a { color: rgba(255,255,255,.85); text-decoration: none; }
footer.site a:hover { color: var(--amber); }
footer.site .fine { border-top: 1px solid rgba(255,255,255,.18); padding-block: var(--s3); font-size: .85rem;
  display: flex; flex-wrap: wrap; gap: var(--s2); justify-content: space-between; color: rgba(255,255,255,.7); position: relative; }

/* ---------- révélation au scroll ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* ---------- divers ---------- */
.center { text-align: center; }
.mt0 { margin-top: 0; } .mb0 { margin-bottom: 0; }
.videobox { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.breadcrumb { font-size: .88rem; margin-bottom: var(--s3); color: var(--muted); }
.pill-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.pill { background: var(--sage-2); color: var(--deep); border-radius: 999px; padding: .35rem .9rem; font-size: .85rem; font-weight: 600; }

/* ============ x10 additions (2026-07-30) ============ */
/* héros vidéo (level-up #1) */
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
@media (prefers-reduced-motion: reduce) { .hero-video { display: none; } }

/* micro-interactions charte (level-up #4) */
.btn-primary, .btn-donate { transition: box-shadow .25s ease, background .2s ease, transform .15s ease; }
.btn-primary:hover, .btn-donate:hover { box-shadow: 0 0 0 4px rgba(255,205,2,.25), 0 6px 22px rgba(255,205,2,.45); transform: translateY(-1px); }
.eyebrow { position: relative; padding-bottom: .3rem; }
.eyebrow::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--ember-text); transition: width .6s ease .2s; }
.band-dark .eyebrow::after { background: var(--amber); }
.reveal.in .eyebrow::after, .in .eyebrow::after, section:hover .eyebrow::after { width: 2.2rem; }

/* chips actus (level-up #9) */
.chip-row { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }
.chip { display: inline-block; background: var(--sage-2); color: var(--deep); border-radius: 999px;
  padding: .18rem .7rem; font-size: .76rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.chip-hot { background: var(--ember); color: var(--ink); }

/* carte à la une (level-up #9) */
.featured { display: grid; background: var(--card); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
@media (min-width: 56rem) { .featured { grid-template-columns: 1.2fr 1fr; } }
.featured > img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16/9; }
.featured .fpad { padding: var(--s4); display: flex; flex-direction: column; gap: .3rem; justify-content: center; }
.featured h2 a { text-decoration: none; color: var(--ink); }
.featured .more { font-weight: 700; color: var(--ember-text); }

/* carrousel voix (level-up #3) */
.voices { position: relative; max-width: 52rem; }
.v-slide { display: none; grid-template-columns: auto 1fr; gap: var(--s3); align-items: center;
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: var(--s4); }
.v-slide.active { display: grid; }
@media (max-width: 40rem) { .v-slide.active { grid-template-columns: 1fr; } }
.v-slide img { width: 110px; height: 110px; border-radius: 50%; object-fit: cover; border: 4px solid var(--sage-2); }
.v-slide blockquote { margin: 0; font-style: italic; font-weight: 500; font-size: 1.1rem; line-height: 1.5; }
.v-slide cite { display: block; margin-top: .6rem; font-style: normal; font-weight: 700; font-size: .92rem; }
.v-slide cite span { display: block; font-weight: 500; color: var(--muted); font-size: .85rem; }
.v-nav { display: flex; align-items: center; gap: .8rem; margin-top: var(--s2); }
.v-nav button { background: var(--card); border: 1px solid var(--sage); border-radius: 999px; width: 2.4rem; height: 2.4rem; cursor: pointer; font-size: 1rem; }
.v-nav button:hover { background: var(--sage-2); }
.v-dots { display: flex; gap: .4rem; }
.v-dots span { width: .55rem; height: .55rem; border-radius: 50%; background: var(--sage); }
.v-dots span.on { background: var(--deep); }

/* barre don sticky (level-up #4/#2) */
.stickybar { position: fixed; left: 50%; transform: translateX(-50%); bottom: 1rem; z-index: 60;
  display: flex; align-items: center; gap: .9rem; background: var(--deep); color: #fff;
  border-radius: 999px; padding: .55rem .6rem .55rem 1.2rem; box-shadow: 0 12px 40px rgba(29,29,27,.35);
  font-weight: 600; font-size: .95rem; max-width: min(92vw, 30rem); }
.stickybar .btn-sm { padding: .5rem 1rem; font-size: .9rem; }
.sb-close { background: none; border: 0; color: rgba(255,255,255,.8); font-size: 1.3rem; cursor: pointer; padding: 0 .3rem; }
.sb-close:hover { color: #fff; }
.btn-sm { padding: .5rem 1rem !important; font-size: .9rem !important; }

/* galerie + lightbox (level-up #6) */
.gallery { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
.gallery .g-item { padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 12px; overflow: hidden; }
.gallery .g-item img { aspect-ratio: 16/9; object-fit: cover; width: 100%; transition: transform .3s ease; }
.gallery .g-item:hover img { transform: scale(1.05); }
.lightbox { position: fixed; inset: 0; z-index: 90; background: rgba(20,23,38,.94);
  display: flex; align-items: center; justify-content: center; }
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 88vw; max-height: 84vh; border-radius: 10px; }
.lightbox button { position: absolute; background: rgba(255,255,255,.12); color: #fff; border: 0;
  border-radius: 999px; width: 2.8rem; height: 2.8rem; font-size: 1.2rem; cursor: pointer; }
.lightbox button:hover { background: rgba(255,255,255,.25); }
.lb-close { top: 1.2rem; right: 1.2rem; }
.lb-prev { left: 1.2rem; top: 50%; transform: translateY(-50%); }
.lb-next { right: 1.2rem; top: 50%; transform: translateY(-50%); }

/* bandeau partenaires (level-up #7) */
.partner-strip { display: grid; gap: var(--s3); align-items: center; background: var(--card);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: var(--s3); }
@media (min-width: 48rem) { .partner-strip { grid-template-columns: 320px 1fr; } }
.partner-strip img { border-radius: 10px; width: 100%; object-fit: cover; aspect-ratio: 16/9; }

/* note KPI (level-up #10) */
.stats-note { text-align: center; font-size: .82rem; color: rgba(255,255,255,.65); margin: 1.4rem 0 0; }

/* formulaires (P1 #3) */
.js-form label, .info-card label { display: block; font-weight: 600; font-size: .9rem; margin: .9rem 0 .3rem; }
.js-form input[type=text], .js-form input[type=email], .js-form input[type=number], .js-form textarea,
.nl-form input[type=email] {
  width: 100%; border: 1px solid var(--sage); border-radius: 10px; padding: .65rem .8rem;
  font: inherit; background: #fff; color: var(--ink); }
.donate-panel label { color: #fff; }
.donate-panel input, .donate-panel textarea { border-color: rgba(255,255,255,.35); }
.js-form textarea { resize: vertical; }
.js-form button[type=submit] { margin-top: 1.1rem; border: 0; cursor: pointer; font: inherit; }
.hp { position: absolute !important; left: -9999px !important; height: 0; width: 0; opacity: 0; }
.form-msg { font-weight: 600; margin-top: .8rem; min-height: 1.2em; }
.form-msg.ok { color: #1E7A3C; } .donate-panel .form-msg.ok { color: var(--amber); }
.form-msg.err { color: var(--ember-text); } .donate-panel .form-msg.err { color: #FFB3A0; }
.amounts-f { border: 0; padding: 0; margin: 0 0 .5rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.amounts-f legend { font-weight: 600; font-size: .9rem; margin-bottom: .5rem; }
.amt { position: relative; }
.amt input[type=radio] { position: absolute; opacity: 0; }
.amt span { display: inline-block; border: 2px solid rgba(255,255,255,.4); color: #fff; font-weight: 700;
  border-radius: 10px; padding: .55rem 1rem; cursor: pointer; }
.amt input[type=radio]:checked + span { background: var(--amber); border-color: var(--amber); color: var(--ink); }
.amt input[type=radio]:focus-visible + span { outline: 3px solid var(--ember); outline-offset: 2px; }
.amt-custom { display: flex; align-items: center; gap: .5rem; }
.amt-custom span { border-style: dashed; }
.amt-custom input { width: 7rem; }
.nl-form .nl-row { display: flex; gap: .5rem; }
.nl-form .nl-row input { flex: 1; min-width: 0; }
.nl-form .form-msg.ok { color: var(--amber); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ============ JOIN feature (2026-07-30) ============ */
/* bouton "magnetize" — réplique vanilla du composant 21st.dev MagnetizeButton,
   recolorisé charte : CTA jaune, texte + particules bleu profond, icône lucide leaf */
.btn-magnet { position: relative; background: var(--ember); color: var(--deep) !important;
  font-weight: 800; overflow: visible; isolation: isolate;
  transition: box-shadow .25s ease, transform .15s ease; }
.btn-magnet:hover { box-shadow: 0 0 0 4px rgba(255,205,2,.25), 0 6px 26px rgba(255,205,2,.5); transform: translateY(-1px); }
.btn-magnet svg { flex: none; }
.mp-field { position: absolute; inset: -18px; pointer-events: none; z-index: -1; }
.mp { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--deep);
  opacity: .35; top: 50%; left: 50%; transition: opacity .3s ease; }
.btn-magnet:hover .mp, .btn-magnet:focus-visible .mp { opacity: .9; }
@media (prefers-reduced-motion: reduce) { .mp { display: none; } }
.stickybar .btn-magnet { padding: .5rem 1rem; font-size: .9rem; }

/* halo "lamp" (adaptation charte du composant Lamp fourni — arc lumineux jaune) */
.join-hero { position: relative; background: #141726; color: #fff; padding: var(--s7) 0 var(--s6); overflow: hidden; }
.join-hero h1 { color: #fff; }
.lamp-glow { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.lamp-glow span { position: absolute; left: 50%; top: -4rem; transform: translateX(-50%);
  width: min(34rem, 80vw); height: 16rem; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,205,2,.55), rgba(255,205,2,.12) 60%, transparent);
  filter: blur(28px); }
.lamp-glow::after { content: ""; position: absolute; left: 50%; top: 3.6rem; transform: translateX(-50%);
  width: min(26rem, 70vw); height: 3px; background: var(--ember); border-radius: 3px;
  box-shadow: 0 0 22px 4px rgba(255,205,2,.8); }

/* parcours d'adhésion */
.join-progress { display: flex; gap: .4rem; list-style: none; margin: 0 0 var(--s3); padding: 0;
  counter-reset: step; flex-wrap: wrap; }
.join-progress li { display: flex; align-items: center; gap: .45rem; font-size: .82rem; font-weight: 600;
  color: var(--muted); padding: .35rem .7rem; border-radius: 999px; background: var(--sage-2); }
.join-progress li span { display: grid; place-items: center; width: 1.4rem; height: 1.4rem;
  border-radius: 50%; background: #fff; font-size: .78rem; }
.join-progress li.on { background: var(--deep); color: #fff; }
.join-progress li.done { background: var(--forest); color: #fff; }
.join-form .jstep { border: 0; padding: 0; margin: 0; }
/* anti-CLS : quand un moteur JS est présent, seule l'étape 1 est peinte au premier
   rendu — état identique à celui que main.js appliquera ensuite. Sans JS (media
   non reconnu ou scripting désactivé), les 3 étapes restent visibles (fallback).
   Pas de script inline possible ici : la CSP est default-src 'self'. */
@media (scripting: enabled) {
  .join-form .jstep:not([data-step="1"]) { display: none; }
}
.join-form[data-js] .jstep { display: none; }
.join-form[data-js] .jstep.on { display: block; }
.join-nav { display: flex; gap: .7rem; margin-top: 1.4rem; }
.join-nav button { border: 0; cursor: pointer; font: inherit; }
.pill-check { position: relative; }
.pill-check input { position: absolute; opacity: 0; }
.pill-check span { display: inline-block; border: 2px solid var(--sage); border-radius: 999px;
  padding: .5rem 1rem; font-weight: 600; font-size: .92rem; cursor: pointer; }
.pill-check input:checked + span { background: var(--deep); border-color: var(--deep); color: #fff; }
.pill-check input:focus-visible + span { outline: 3px solid var(--ember); outline-offset: 2px; }
.consent { display: flex; gap: .6rem; align-items: flex-start; margin-top: 1.2rem; font-size: .92rem; }
.consent input { margin-top: .3rem; width: 1.05rem; height: 1.05rem; }
.jdone { margin-top: var(--s3); }

/* ============ mega-menu (21st.dev pattern, adaptation vanilla charte) ============ */
.submenu.mega { min-width: 0; width: max-content; max-width: min(46rem, 92vw); padding: 1.1rem 1.2rem; }
.mm-cols { display: grid; grid-template-columns: repeat(2, minmax(14rem, 1fr)); gap: 1.6rem; }
.mm-h { font-size: .76rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 .7rem; }
.mm-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; }
.mm-item { display: flex; gap: .7rem; align-items: flex-start; padding: .5rem .6rem !important;
  border-radius: 10px; text-decoration: none; }
.mm-item:hover { background: var(--sage-2); }
.mm-ico { display: grid; place-items: center; width: 2.3rem; height: 2.3rem; flex: none;
  border: 1.5px solid var(--sage); border-radius: 9px; color: var(--deep);
  transition: background .25s ease, color .25s ease, border-color .25s ease; }
.mm-item:hover .mm-ico { background: var(--deep); border-color: var(--deep); color: var(--amber); }
.mm-tx { display: block; line-height: 1.25; }
.mm-tx strong { display: block; font-size: .92rem; color: var(--ink); }
.mm-tx small { display: block; font-size: .78rem; color: var(--muted); margin-top: .1rem; }
/* ouverture au survol (desktop) + animation d'entrée */
@media (min-width: 62.01rem) {
  .has-sub:hover .submenu { display: block; }
  .has-sub:hover > button::after { transform: rotate(225deg) translateY(-2px); }
  .has-sub.open > button::after { transform: rotate(225deg) translateY(-2px); }
  .submenu.mega { transform-origin: top left; animation: mm-in .18s ease; }
}
@keyframes mm-in { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .submenu.mega { animation: none; } }
@media (max-width: 62rem) {
  .mm-cols { grid-template-columns: 1fr; gap: 1rem; }
  .submenu.mega { max-width: none; width: 100%; }
}

/* ============ horizon-hero adaptation (2026-07-30) ============ */
/* barre de progression de défilement (adaptation du scroll-progress du composant) */
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 70;
  background: transparent; pointer-events: none; }
.scroll-progress span { display: block; height: 100%; width: 0; background: var(--amber);
  box-shadow: 0 0 8px rgba(255,205,2,.6); }
/* entrée du titre héros par caractères (split-text façon GSAP, CSS pur) */
.hero h1 .tc { display: inline-block; opacity: 0; transform: translateY(.55em);
  animation: tc-in .7s cubic-bezier(.19,1,.22,1) forwards; }
@keyframes tc-in { to { opacity: 1; transform: none; } }
/* parallaxe du média héros au défilement */
.hero .bg { will-change: transform; }
@media (prefers-reduced-motion: reduce) {
  .hero h1 .tc { animation: none; opacity: 1; transform: none; }
  .scroll-progress { display: none; }
}

/* ============ arc-gallery-hero (21st.dev, adaptation vanilla — page Fondation) ============ */
.arc-hero { --arc-r: 480px; --arc-card: 120px; position: relative; overflow: hidden;
  background: var(--cream); padding-top: var(--s4); }
@media (max-width: 64rem) { .arc-hero { --arc-r: 340px; --arc-card: 96px; } }
@media (max-width: 40rem) { .arc-hero { --arc-r: 230px; --arc-card: 68px; } }
.arc-ring { position: relative; width: 100%; height: calc(var(--arc-r) * 1.14); }
.arc-pivot { position: absolute; left: 50%; bottom: calc(var(--arc-card) * -0.75); transform: translateX(-50%); }
.arc-card { position: absolute; width: var(--arc-card); height: var(--arc-card);
  transform: translate(-50%, 50%); opacity: 0; animation: arc-in .8s ease-out forwards; }
.arc-card > div { width: 100%; height: 100%; border-radius: 16px; overflow: hidden;
  box-shadow: 0 12px 30px rgba(29,29,27,.18); background: #fff; border: 1px solid var(--sage-2);
  transition: transform .25s ease; }
.arc-card:hover > div { transform: scale(1.07) !important; }
.arc-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
@keyframes arc-in { from { opacity: 0; transform: translate(-50%, 62%); }
  to { opacity: 1; transform: translate(-50%, 50%); } }
.arc-content { position: relative; z-index: 20; text-align: center; max-width: 44rem;
  margin: calc(var(--arc-r) * -0.38) auto 0; padding: 0 1.2rem var(--s6);
  opacity: 0; animation: arc-fade .8s ease-out .8s forwards; }
@keyframes arc-fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .arc-card, .arc-content { animation: none; opacity: 1; }
  .arc-card { transform: translate(-50%, 50%); }
}
@media (max-width: 40rem) { .arc-content { margin-top: calc(var(--arc-r) * -0.2); } }

/* ================================================================
   MODERNIZATION 2026-07-30 — système de boutons façon shadcn/ui
   (vocabulaire du composant Button fourni, adapté charte) + élévations
   adoucies. Bloc d'override final : il prime sur les règles antérieures.
   ================================================================ */
:root {
  --btn-r: 10px;
  --shadow: 0 1px 2px rgba(29,29,27,.05), 0 10px 28px rgba(29,29,27,.07);
  --ring: 0 0 0 2px var(--cream), 0 0 0 4px var(--deep);
}

/* — géométrie et variantes de boutons (default/outline/ghost + tailles) — */
.btn, .join-nav button, .js-form button[type=submit] {
  border-radius: var(--btn-r);
  padding: .62rem 1.25rem;
  font-size: .95rem; font-weight: 600; letter-spacing: -.01em;
  line-height: 1.2; gap: .45rem;
  transition: background .15s ease, color .15s ease, border-color .15s ease,
              box-shadow .15s ease, transform .15s ease;
}
.btn-sm { padding: .5rem .9rem !important; font-size: .875rem !important; border-radius: 8px !important; }
.btn-donate { border-radius: var(--btn-r); padding: .55rem 1.05rem !important; font-weight: 700; }
.btn-magnet { border-radius: 12px; }
.stickybar { border-radius: 16px; }
.stickybar .btn-magnet, .stickybar .btn-primary { border-radius: 8px; }

/* hover sobres : plus de halo lourd, élévation discrète */
.btn-primary:hover, .btn-donate:hover {
  box-shadow: 0 1px 2px rgba(29,29,27,.08), 0 6px 16px rgba(255,205,2,.35);
  transform: translateY(-1px);
}
.btn-magnet:hover { box-shadow: 0 1px 2px rgba(29,29,27,.08), 0 8px 20px rgba(255,205,2,.4); }
.btn-outline { border-width: 1.5px; }
.btn-outline:hover { background: var(--sage-2); color: var(--deep); border-color: var(--deep); }
.btn-ghost:hover { background: rgba(255,255,255,.14); }

/* focus ring décalé (ring/ring-offset) */
.btn:focus-visible, .join-nav button:focus-visible, .js-form button:focus-visible {
  outline: none; box-shadow: var(--ring);
}
.band-dark .btn:focus-visible { box-shadow: 0 0 0 2px var(--deep), 0 0 0 4px var(--amber); }

/* affordance flèche (MoveRight du composant) sur les CTA pleins */
.btn-primary:not(.btn-magnet):not([type=submit])::after,
.btn-forest::after {
  content: "→"; display: inline-block; margin-left: .1rem;
  transition: transform .18s ease;
}
.btn-primary:not(.btn-magnet):not([type=submit]):hover::after,
.btn-forest:hover::after { transform: translateX(3px); }

/* — cartes : bordure fine + élévation douce (fini les grosses ombres) — */
.card, .info-card, .quote-card, .featured, .partner-strip, .v-slide {
  border: 1px solid var(--sage-2);
  box-shadow: 0 1px 2px rgba(29,29,27,.04), 0 8px 24px rgba(29,29,27,.06);
}
.card:hover { transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(29,29,27,.06), 0 14px 34px rgba(29,29,27,.10); }
.member img { border-radius: 12px; }
.submenu { border: 1px solid var(--sage-2); }

/* — mot tournant du héros (animated-hero, adaptation vanilla) — */
.rotator { display: flex; gap: .45rem; justify-content: flex-start; align-items: baseline;
  font-size: clamp(1.05rem, 2.2vw, 1.35rem); font-weight: 600; color: rgba(255,255,255,.92);
  margin: .2rem 0 .4rem; }
.rot-stage { position: relative; display: inline-block; min-width: 11ch; height: 1.45em;
  overflow: hidden; vertical-align: bottom; }
.rot-word { position: absolute; left: 0; top: 0; white-space: nowrap;
  color: var(--amber); font-weight: 800;
  transform: translateY(110%); opacity: 0;
  transition: transform .55s cubic-bezier(.2,.9,.25,1), opacity .4s ease; }
.rot-word.in { transform: translateY(0); opacity: 1; }
.rot-word.out { transform: translateY(-110%); opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .rot-word { transition: none; }
}

/* ================================================================
   NAVBAR + MEGA-MENU v2 (2026-07-30) — bloc final, prime sur le reste
   ================================================================ */
/* — navbar compacte, une seule ligne — */
.navbar { position: relative; padding-block: .45rem; gap: 1rem; }
nav.primary > ul { gap: .1rem; flex-wrap: nowrap; }
nav.primary a, .has-sub > button {
  white-space: nowrap; font-size: .9rem; padding: .5rem .65rem; border-radius: 8px;
}
nav.primary a[aria-current="page"] { background: none; color: var(--deep);
  box-shadow: inset 0 -2px 0 var(--ember); border-radius: 8px 8px 0 0; }
.brand { white-space: nowrap; font-size: 1rem; }
header.site { transition: box-shadow .2s ease, background .2s ease; }
header.site.scrolled { background: rgba(255,255,255,.97);
  box-shadow: 0 1px 2px rgba(29,29,27,.06), 0 8px 24px rgba(29,29,27,.08); }
@media (min-width: 62.01rem) and (max-width: 74rem) {
  nav.primary a, .has-sub > button { font-size: .84rem; padding: .5rem .5rem; }
  .btn-donate { padding: .5rem .8rem !important; }
}
/* — sélecteur de langue discret (segment texte) — */
.lang { border: 0; padding: 0; gap: 0; margin-left: .4rem; }
.lang a { color: var(--muted); font-weight: 600; font-size: .78rem; padding: .3rem .45rem;
  border-radius: 6px; position: relative; }
.lang a + a::before { content: ""; position: absolute; left: -1px; top: 28%; bottom: 28%;
  width: 1px; background: var(--sage-2); }
.lang a[aria-current="true"] { background: none; color: var(--deep);
  box-shadow: inset 0 -2px 0 var(--ember); border-radius: 0; }

/* — panneau méga contraint, aligné sur la grille de contenu — */
@media (min-width: 62.01rem) {
  .has-sub { position: static; }
  .submenu.mega {
    display: block; position: absolute; left: 0; right: 0; top: calc(100% + 14px);
    width: auto; max-width: 100%; margin: 0;
    border-radius: 16px; border: 1px solid var(--sage-2);
    box-shadow: 0 2px 6px rgba(29,29,27,.06), 0 24px 60px rgba(29,29,27,.14);
    padding: 1.4rem;
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateY(-6px);
    transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
  }
  .has-sub.open .submenu.mega {
    opacity: 1; visibility: visible; pointer-events: auto; transform: none;
    transition: opacity .15s ease, transform .15s ease;
  }
  /* neutralise l'ouverture :hover CSS v1 (le JS hover-intent pilote) */
  .has-sub:hover .submenu { display: block; }
}
.mm-grid { display: grid; grid-template-columns: 1.25fr 1.1fr .95fr; gap: 1.6rem; }
.mm-h { position: relative; padding-bottom: .45rem; margin-bottom: .55rem; }
.mm-h::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 1.6rem;
  background: var(--ember-text); }
/* items resserrés : icône 20px dans une pastille bleu-tinté 34px, desc 1 ligne tronquée */
.mm-item { padding: .42rem .5rem !important; gap: .6rem; border-radius: 8px; min-width: 0; }
.mm-item:hover, .mm-item:focus-visible { background: var(--sage-2); }
.mm-ico { width: 34px; height: 34px; border: 0; border-radius: 50%;
  background: var(--sage-2); color: var(--deep); }
.mm-item:hover .mm-ico { background: var(--deep); color: var(--amber); }
.mm-ico svg { width: 18px; height: 18px; }
.mm-tx { min-width: 0; }
.mm-tx strong { font-size: .93rem; }
.mm-tx small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block;
  max-width: 100%; font-size: .78rem; }
/* carte visuelle à droite */
.mm-card { position: relative; display: block; border-radius: 12px; overflow: hidden;
  min-height: 15rem; text-decoration: none; isolation: isolate; }
.mm-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;
  transition: transform .3s ease; }
.mm-card:hover img { transform: scale(1.045); }
.mm-card-body { position: absolute; inset: auto 0 0 0; padding: .9rem;
  background: linear-gradient(180deg, transparent, rgba(20,23,38,.88) 55%);
  color: #fff; display: flex; flex-direction: column; gap: .3rem; }
.mm-card-body strong { font-size: .95rem; line-height: 1.25; }
.mm-card-body small { color: rgba(255,255,255,.8); font-size: .78rem; }
.mm-cta { align-self: flex-start; margin-top: .35rem; background: var(--ember); color: var(--ink);
  font-weight: 700; font-size: .8rem; border-radius: 8px; padding: .35rem .7rem; }
/* — mobile : tiroir avec accordéon, le panneau desktop ne se rend jamais — */
@media (max-width: 62rem) {
  nav.primary { transition: none; }
  nav.primary a, .has-sub > button { white-space: normal; }
  .submenu.mega { display: none; position: static; box-shadow: none; border: 0;
    background: var(--sage-2); border-radius: 12px; padding: .9rem; opacity: 1; visibility: visible;
    pointer-events: auto; transform: none; }
  .has-sub.open .submenu.mega { display: block; }
  .mm-grid { grid-template-columns: 1fr; gap: 1rem; }
  .mm-card { display: none; }
  .mm-tx small { white-space: normal; }
  nav.primary a[aria-current="page"] { background: var(--deep); color: #fff; box-shadow: none; border-radius: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .submenu.mega, .has-sub.open .submenu.mega { transition: none; }
  .mm-card img, .mm-card:hover img { transition: none; transform: none; }
}

/* ============ bandeaux de métriques clés (2026-07-30) ============ */
.metrics-strip { padding-block: 1.6rem; }
.metrics-strip .stats { gap: 1rem; }
.stats .n { font-size: clamp(2.6rem, 5.5vw, 4.2rem); letter-spacing: -.03em; }
.metrics-strip .stats .n { font-size: clamp(2rem, 4vw, 3rem); }
.stats .l { font-size: .88rem; }

/* ============ scroll-morph gallery (21st.dev scroll-morph-hero, adaptation vanilla) ============ */
.smh { overflow: hidden; padding-block: var(--s5) 0; }
.smh-head .lead { max-width: 40rem; margin-inline: auto; }
.smh-stage { position: relative; height: 26rem; }
@media (max-width: 48rem) { .smh-stage { height: 20rem; } }
.smh-card { position: absolute; left: 50%; top: 0; width: 90px; height: 124px;
  margin-left: -45px; text-decoration: none; perspective: 900px;
  will-change: transform; opacity: 0; }
@media (max-width: 48rem) { .smh-card { width: 62px; height: 86px; margin-left: -31px; } }
.smh-inner { position: relative; display: block; width: 100%; height: 100%;
  transform-style: preserve-3d; transition: transform .55s cubic-bezier(.2,.8,.25,1); }
.smh-card:hover .smh-inner, .smh-card:focus-visible .smh-inner { transform: rotateY(180deg); }
.smh-front, .smh-back { position: absolute; inset: 0; border-radius: 10px; overflow: hidden;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  box-shadow: 0 1px 2px rgba(29,29,27,.08), 0 10px 24px rgba(29,29,27,.16); }
.smh-front img { width: 100%; height: 100%; object-fit: cover; display: block; }
.smh-front::after { content: ""; position: absolute; inset: 0; background: rgba(20,23,38,.08);
  transition: background .25s ease; }
.smh-card:hover .smh-front::after { background: transparent; }
.smh-back { transform: rotateY(180deg); background: var(--deep); color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .3rem; padding: .5rem; text-align: center; border: 1px solid rgba(255,255,255,.15); }
.smh-back strong { font-size: .68rem; line-height: 1.25; letter-spacing: .02em; }
.smh-back span { color: var(--amber); font-weight: 800; }
.smh-card:focus-visible { outline: none; }
.smh-card:focus-visible .smh-inner { box-shadow: var(--ring); border-radius: 10px; }
@media (prefers-reduced-motion: reduce) {
  .smh-card { opacity: 1; }
  .smh-inner { transition: none; }
}

/* ================================================================
   V3 « OASIS PUR » (Route A validée client, 2026-07-30) — bloc final.
   Sombre cinématique · Montserrat · lumière ambiante sunset.
   ADN mesuré sur becomephoenix.com. Contrastes AA 7.2-17.2 vérifiés.
   La v2 Paloha est archivée : backups-design/site-v2-paloha-20260730.tar.gz
   ================================================================ */
@font-face{font-family:"Montserrat";src:url("../fonts/montserrat-v31-latin-300.woff2") format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Montserrat";src:url("../fonts/montserrat-v31-latin-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Montserrat";src:url("../fonts/montserrat-v31-latin-700.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Montserrat";src:url("../fonts/montserrat-v31-latin-800.woff2") format("woff2");font-weight:800;font-display:swap}
:root{
  /* bascule des tokens — tout le site suit */
  --cream:#12100C;          /* fond de page = brun nuit          */
  --card:#1A1208;           /* panneaux                          */
  --ink:#FFF3D6;            /* texte = crème chaude              */
  --muted:#C9BFA5;          /* texte secondaire                  */
  --deep:#0E1F0D;           /* bandes sombres = vert forêt       */
  --forest:#ECAA47;         /* liens = ambre                     */
  --sage:#3A2F1B;           /* bordures                          */
  --sage-2:#221A0E;         /* fonds alternés / pastilles        */
  --ember:#FFCD02;          /* CTA jaune (inchangé)              */
  --ember-text:#ECAA47;     /* eyebrows = ambre                  */
  --amber:#FFCD02;
  --f-display:"Montserrat",sans-serif;
  --f-body:"Montserrat",sans-serif;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 14px 40px rgba(0,0,0,.5);
  --ring:0 0 0 2px var(--cream),0 0 0 4px var(--ambre,#ECAA47);
  --grad-sun:linear-gradient(100deg,#FFCD02,#ECAA47);
}
body{font-weight:300}
h1,h2,h3{font-weight:800;letter-spacing:-.02em}
.eyebrow{letter-spacing:.32em;font-weight:700}
strong,b{font-weight:700}
a:hover{color:var(--ember)}
/* lumière ambiante sur les bandes sombres (remplace l'esthétique plate) */
.band-dark{background:var(--deep);position:relative}
.band-dark::before{opacity:.05}
.band-dark::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(45% 60% at 15% 25%,rgba(138,70,48,.4),transparent 60%),
             radial-gradient(40% 55% at 85% 80%,rgba(236,170,71,.22),transparent 65%)}
.band-dark>.wrap{position:relative;z-index:1}
.band-sage{background:var(--sage-2)}
/* chiffres en dégradé sunset (maquette A) */
.stats .n,[data-count]{background:var(--grad-sun);-webkit-background-clip:text;background-clip:text;color:transparent !important}
.stats-note{color:rgba(255,243,214,.55)}
/* header sombre translucide */
header.site{background:rgba(18,16,12,.88);border-bottom:1px solid var(--sage)}
header.site.scrolled{background:rgba(18,16,12,.97);box-shadow:0 8px 30px rgba(0,0,0,.5)}
.brand{color:var(--ink)}
nav.primary a[aria-current="page"]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--ember)}
nav.primary a:hover,.has-sub>button:hover{background:var(--sage-2)}
.lang a[aria-current="true"]{color:var(--ink)}
@media (max-width:62rem){nav.primary{background:var(--cream)}}
/* héros : voile brun nuit + halo ambré */
.hero::after{background:linear-gradient(to top,var(--cream) 2%,rgba(18,16,12,.55) 45%,rgba(18,16,12,.25))}
.hero{isolation:isolate}
.hero .wrap::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(50% 45% at 72% 78%,rgba(236,170,71,.28),transparent 65%)}
.hero .badge{background:rgba(255,243,214,.08);border-color:rgba(236,170,71,.35);color:var(--or-pale,#FFE9A8)}
/* cartes & panneaux */
.card,.info-card,.quote-card,.featured,.partner-strip,.v-slide,.submenu{
  background:var(--card);border-color:var(--sage);color:var(--ink)}
.card p,.card h3 a,.featured h2 a{color:var(--ink)}
.card .pad p,.mm-tx small,.rl{color:var(--muted)}
.card:hover{box-shadow:0 2px 6px rgba(0,0,0,.5),0 18px 50px rgba(236,170,71,.12)}
.chip{background:var(--sage-2);color:var(--ambre,#ECAA47);border:1px solid var(--sage)}
.chip-hot{background:var(--ember);color:#1D1D1B;border:0}
.mm-ico{background:var(--sage-2);color:var(--ember-text);border:0}
.mm-item:hover{background:var(--sage-2)}
.mm-item:hover .mm-ico{background:var(--ember);color:#1D1D1B}
.mm-tx strong{color:var(--ink)}
.mm-h{color:var(--muted)}
/* formulaires sombres */
.js-form input[type=text],.js-form input[type=email],.js-form input[type=number],.js-form textarea,
.nl-form input[type=email],input[type=email],input[type=password]{
  background:#241C10;border-color:var(--sage);color:var(--ink)}
.form-msg.ok{color:#8FD694}
.member img{filter:grayscale(20%) brightness(.95)}
.member:hover img{filter:none}
.member .nm{color:var(--ink)}
/* boutons : jaune inchangé, secondaires adaptés */
.btn-forest{background:transparent;color:var(--ambre,#ECAA47);border:1.5px solid #ECAA47}
.btn-forest:hover{background:#ECAA47;color:#1D1D1B}
.btn-forest::after{content:none}
.btn-outline{border-color:var(--sage);color:var(--ink)}
.btn-outline:hover{background:var(--sage-2);color:var(--ink);border-color:#ECAA47}
.btn-primary:hover,.btn-donate:hover{box-shadow:0 0 0 3px rgba(255,205,2,.2),0 10px 36px rgba(255,205,2,.35)}
/* timeline / progress / divers */
.timeline .dot span{background:var(--sage-2);color:var(--ambre,#ECAA47);border-color:var(--sage)}
.timeline .dot::after{background:var(--sage)}
.join-progress li{background:var(--sage-2);color:var(--muted)}
.join-progress li span{background:var(--card);color:var(--ink)}
.join-progress li.on{background:var(--ember);color:#1D1D1B}
.join-progress li.on span{background:rgba(0,0,0,.15);color:#1D1D1B}
.join-progress li.done{background:#0E1F0D;color:#fff}
.pill-check span{border-color:var(--sage);color:var(--ink)}
.pill-check input:checked+span{background:var(--ember);border-color:var(--ember);color:#1D1D1B}
.amt span{border-color:rgba(255,243,214,.35)}
/* arc-hero (fondation) en nocturne */
.arc-hero{background:var(--cream)}
.arc-card>div{background:var(--card);border-color:var(--sage);box-shadow:0 12px 30px rgba(0,0,0,.5)}
/* galerie/lightbox déjà sombres — ok ; barre sticky ok ; footer forêt + glow */
footer.site{background:var(--deep)}
footer.site::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(45% 60% at 85% 15%,rgba(236,170,71,.16),transparent 60%)}
footer.site .cols,footer.site .fine{position:relative;z-index:1}
/* liste piliers cinématique (home) */
.pil-list{border-top:1px solid rgba(255,243,214,.14)}
.pil-list a{display:grid;grid-template-columns:auto 1fr auto;gap:2rem;align-items:center;
  padding:2rem 0;border-bottom:1px solid rgba(255,243,214,.14);text-decoration:none;color:var(--ink);
  transition:padding-left .3s ease}
.pil-list a:hover{padding-left:1.2rem}
.pil-list .n{font-size:.78rem;font-weight:700;letter-spacing:.3em;color:#B4593E}
.pil-list h3{margin:0;font-size:clamp(1.4rem,3.2vw,2.3rem);color:#fff}
.pil-list a:hover h3{background:linear-gradient(100deg,#fff,#FFE9A8);-webkit-background-clip:text;background-clip:text;color:transparent}
.pil-list small{display:block;font-weight:300;color:var(--muted);margin-top:.25rem}
.pil-list .go{color:var(--ember);font-weight:800;font-size:1.4rem}
/* immersion + pont oasis (home) */
.immersion{position:relative;min-height:72vh;display:grid;align-items:end;isolation:isolate;color:#fff}
.immersion img.bg2{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.immersion::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,var(--deep) 0%,rgba(14,31,13,.3) 55%,transparent)}
.immersion .wrap{padding-block:3.5rem}
.oasis-bridge{background:var(--card);position:relative;isolation:isolate;overflow:hidden}
.oasis-bridge::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(55% 75% at 82% 20%,rgba(236,170,71,.3),transparent 60%),
             radial-gradient(45% 65% at 12% 88%,rgba(138,70,48,.4),transparent 60%)}
.oasis-bridge .date{color:var(--ambre,#ECAA47);font-weight:700}
/* on éteint les effets v2 retirés par la DA (un seul effet signature : la lumière) */
.rotator,.partner-strip-off{display:none}

/* ============ lot 100 level-ups (2026-07-30) ============ */
/* (8) indice de scroll sous le CTA héro */
.hero .cta-row::after{content:"";display:block;width:2px;height:3.2rem;margin:2rem 0 0 .4rem;
  background:linear-gradient(to bottom,var(--ambre,#ECAA47),transparent);animation:cue 2.2s ease infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
/* (3) Ken Burns doux sur le poster héro quand reduced-motion coupe la vidéo */
@media (prefers-reduced-motion: no-preference){
  .hero>img.bg{animation:kb 26s ease-in-out infinite alternate}
  @keyframes kb{from{transform:scale(1)}to{transform:scale(1.06) translateY(-1.5%)}}
}
@media (prefers-reduced-motion: reduce){.hero .cta-row::after{animation:none}}
/* (10) chip d'indice de langue */
.lang-hint{position:fixed;bottom:1rem;left:1rem;z-index:65;background:var(--card);border:1px solid var(--sage);
  color:var(--ink);border-radius:999px;padding:.5rem .9rem;font-size:.85rem;display:flex;gap:.6rem;align-items:center;box-shadow:var(--shadow)}
.lang-hint a{font-weight:700;color:var(--ambre,#ECAA47);text-decoration:none}
.lang-hint button{background:none;border:0;color:var(--muted);cursor:pointer;font-size:1rem}

/* ============ orbiting-avatars CTA (21st.dev, portage vanilla) ============ */
.orbit-cta{position:relative;overflow:hidden;padding-block:7rem;isolation:isolate;background:var(--deep)}
.orbit-cta::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(45% 55% at 50% 50%,rgba(236,170,71,.22),transparent 65%)}
.orbit-rings i{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;
  border:1.5px dashed rgba(255,243,214,.18);pointer-events:none}
.orbit-rings i:nth-child(1){width:34rem;height:34rem}
.orbit-rings i:nth-child(2){width:48rem;height:48rem}
.orbit-core{position:relative;z-index:2;text-align:center;max-width:34rem;margin-inline:auto;padding-inline:1.2rem}
.orbit-core h2{font-size:clamp(1.9rem,4.4vw,3rem)}
.orbit-field{position:absolute;inset:0;z-index:1;animation:orbit var(--od,50s) linear infinite;pointer-events:none}
.orbit-field>span{position:absolute;left:50%;top:50%}
.orbit-field .fl{display:block;animation:ofloat 6s ease-in-out infinite}
.orbit-field img{width:56px;height:56px;border-radius:50%;object-fit:cover;
  box-shadow:0 6px 18px rgba(0,0,0,.5);border:2px solid rgba(236,170,71,.45);
  animation:counter-orbit var(--od,50s) linear infinite}
@keyframes orbit{to{transform:rotate(360deg)}}
@keyframes counter-orbit{to{transform:rotate(-360deg)}}
@keyframes ofloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@media (max-width:48rem){.orbit-field img{width:40px;height:40px}}
@media (prefers-reduced-motion:reduce){.orbit-field,.orbit-field img,.orbit-field .fl{animation:none}}

/* ============ 3D tilt cards — programmes (21st.dev InteractiveTravelCard, portage vanilla) ============ */
.tilt-grid{display:grid;gap:1.6rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));perspective:1000px}
.tilt{position:relative;height:22rem;border-radius:18px;transform-style:preserve-3d;
  transition:transform .18s ease-out;text-decoration:none;display:block;overflow:hidden;
  border:1px solid rgba(255,243,214,.14);box-shadow:0 20px 50px rgba(0,0,0,.5)}
.tilt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tilt::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(18,16,12,.25),transparent 40%,rgba(18,16,12,.75))}
.tilt .tc2{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;
  padding:1.2rem;color:#fff;z-index:2;transform:translateZ(40px)}
.tilt h3{margin:0;font-size:1.35rem;color:#fff}
.tilt .sub{font-weight:300;font-size:.85rem;color:rgba(255,255,255,.85)}
.tilt .corner{position:absolute;top:1rem;right:1rem;width:2.4rem;height:2.4rem;border-radius:50%;
  display:grid;place-items:center;background:rgba(255,255,255,.18);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.3);color:#fff;font-weight:800;z-index:3;transform:translateZ(60px)}
.tilt .glass{display:block;text-align:center;border-radius:12px;padding:.75rem;font-weight:700;color:#fff;
  background:rgba(255,255,255,.12);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.22);
  transform:translateZ(40px)}
.tilt:hover .glass{background:rgba(255,205,2,.85);color:#1D1D1B;border-color:transparent}
@media (prefers-reduced-motion:reduce),(hover:none){.tilt{transform:none !important}}

/* ============ vague 2 (2026-07-30) ============ */
/* (6) titre rempli d'image — Découvrir */
.img-text{font-size:clamp(3.4rem,13vw,9.5rem);font-weight:800;letter-spacing:-.05em;line-height:.95;margin:0 0 .5rem;
  background-image:url("/assets/img/flux-ph-03-huila-valley.webp");background-size:165% auto;
  background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  animation:pan 20s linear infinite alternate}
@keyframes pan{from{background-position:0% 50%}to{background-position:100% 50%}}
@media (prefers-reduced-motion:reduce){.img-text{animation:none;background-position:50% 50%}}
/* (53) exergues d'articles */
article.prose blockquote{font-family:Fraunces,Georgia,serif;font-style:italic;font-weight:400;
  font-size:1.35rem;line-height:1.5;border-left:3px solid var(--ember);padding-left:1.2rem;margin:2rem 0;color:var(--ink)}
/* (81) modes contraste forcé */
@media (forced-colors: active){.btn,.chip,.stickybar{border:1px solid ButtonText}.hero::after,.band-dark::after{background:none}}
/* (14) modale exit-intent newsletter */
.exit-nl{position:fixed;inset:0;z-index:95;background:rgba(10,8,5,.7);display:grid;place-items:center;padding:1rem}
.exit-nl[hidden]{display:none}
.exit-nl>div{background:var(--card);border:1px solid var(--sage);border-radius:16px;max-width:26rem;padding:2rem;position:relative}
.exit-nl h3{margin-top:0}.exit-nl .x{position:absolute;top:.7rem;right:1rem;background:none;border:0;color:var(--muted);font-size:1.4rem;cursor:pointer}

/* A3-011 bouton pause héros vidéo */
.hero-pause{position:absolute;right:1rem;bottom:1rem;z-index:6;width:2.6rem;height:2.6rem;border-radius:50%;
  background:rgba(18,16,12,.55);border:1px solid rgba(255,243,214,.4);color:#fff;cursor:pointer;backdrop-filter:blur(6px);
  display:grid;place-items:center;font-size:.9rem}
.hero-pause::before{content:"❚❚"}
.hero-pause[aria-pressed="true"]::before{content:"▶"}
.hero-pause:hover{background:rgba(18,16,12,.8)}

/* A3-006 fil d'Ariane pages internes */
.breadcrumb{font-size:.82rem;color:var(--muted)}
.breadcrumb a{color:var(--ambre,#ECAA47);text-decoration:underline;text-underline-offset:2px}
.breadcrumb a:hover{text-decoration:underline}
.breadcrumb span[aria-current]{color:var(--ink)}

/* Lighthouse 31/07 : en v3 --ink est devenu crème (#FFF3D6) → texte quasi invisible
   (1.36:1) sur tous les fonds jaunes hérités de la v2. Texte sombre fixe, ratio ~12:1.
   (!important requis pour .btn-donate qui en porte un ligne ~110.) */
.btn-primary, .btn-primary:hover,
.btn-donate,
.donate-panel .amounts a:hover, .donate-panel .amounts a.hot,
.amt input[type=radio]:checked + span,
.mm-cta { color: #12100C !important; }

/* [hidden] doit toujours gagner : .btn{display:inline-flex} (règle auteur) annulait
   l'attribut hidden des boutons j-back/j-next/j-submit — un bouton crème sur gris
   restait visible (contraste 1.04). Remplace les rustines .lightbox[hidden] et
   .exit-nl[hidden] par la règle globale standard. */
[hidden] { display: none !important; }

/* CRO nuit 2 : donate — réassurance, FAQ, select */
.donate-panel select{width:100%;font:inherit;padding:.6rem .7rem;border-radius:10px;
  background:#241C10;border:1px solid var(--sage);color:var(--ink);margin-bottom:.4rem}
.donate-panel select:focus{outline:none;box-shadow:var(--ring)}
.reassure{margin-top:1.6rem;display:grid;gap:.9rem}
.reassure div{border-left:3px solid var(--ember);padding:.15rem 0 .15rem .9rem}
.reassure h3{font-size:.95rem;margin:0 0 .2rem}
.reassure p{font-size:.85rem;color:var(--muted);margin:0}
.faq-wrap{max-width:46rem}
.faq{border:1px solid var(--sage);border-radius:12px;margin:.6rem 0;background:var(--card)}
.faq summary{cursor:pointer;font-weight:700;padding:.9rem 1.1rem;list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:1.1rem;top:.75rem;font-size:1.2rem;
  color:var(--ambre,#ECAA47);transition:transform .2s}
.faq[open] summary::after{transform:rotate(45deg)}
.faq p{padding:0 1.1rem .95rem;margin:0;color:var(--muted);font-size:.92rem}
.faq summary:focus-visible{outline:none;box-shadow:var(--ring);border-radius:12px}
@media(prefers-reduced-motion:reduce){.faq summary::after{transition:none}}
/* CRO : microcopy join */
.fh{display:block;font-size:.78rem;color:var(--muted);margin:-.5rem 0 .9rem}
.boost{font-size:.8rem;font-weight:700;color:var(--ambre,#ECAA47);letter-spacing:.06em;
  text-transform:uppercase;margin:0 0 .5rem}
/* CRO : preuve sociale accolée au CTA don */
.band-proof{max-width:38rem;margin:1.6rem auto 0}
.band-proof blockquote{font-size:.95rem;font-style:italic;color:rgba(255,243,214,.85);margin:0}
.band-proof figcaption{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ambre,#ECAA47);margin-top:.45rem;font-weight:700}

/* ================================================================
   V5 « ORGANIC » — promotion de la direction C (variants /v/c/).
   Décision client « Oui sur tout » 2026-07-31. Rollback :
   git checkout v4-pre-restyle -- assets/ (+ rebuild) — < 5 min.
   Crème chaude · encre bleue · galets organiques · Inter (charte Paloha).
   Ce bloc vient APRÈS v3 « Oasis pur » et le neutralise via la cascade.
   ================================================================ */
:root{
  --cream:#FBF8F0;--card:#fff;--ink:#1B2440;--muted:#4A5578;
  --deep:#213A76;--forest:#213A76;--sage:#E3DCC9;--sage-2:#F5F1E4;
  --ember:#FFCD02;--ember-text:#CA1431;--amber:#FFCD02;--ambre:#CA1431;
  --f-display:"Inter",-apple-system,"Segoe UI",sans-serif;
  --f-body:"Inter",-apple-system,"Segoe UI",sans-serif;
  --shadow:0 1px 2px rgba(27,36,64,.06),0 12px 32px rgba(27,36,64,.09);
  --ring:0 0 0 2px var(--cream),0 0 0 4px var(--deep);
  --grad-sun:linear-gradient(100deg,#FFCD02,#CA1431);
  --b1:58% 42% 55% 45%/52% 48% 60% 40%;--b2:45% 55% 48% 52%/55% 42% 58% 45%;
  --b3:52% 48% 42% 58%/45% 60% 40% 55%;--b4:40% 60% 55% 45%/58% 45% 55% 42%}
body{font-weight:400}
a:hover{color:var(--ambre,#CA1431)}
/* bandes : bleu charte + halos chauds discrets (signature C) */
.band-dark{background:var(--deep)}
.band-dark::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(42% 55% at 12% 20%,rgba(255,205,2,.14),transparent 60%),
             radial-gradient(38% 50% at 88% 82%,rgba(202,20,49,.12),transparent 65%)}
.band-sage{background:var(--sage-2)}
/* boutons : pilules charte */
.btn{border-radius:999px}
.btn-forest{background:transparent;color:var(--deep);border:1.5px solid var(--deep)}
.btn-forest:hover{background:var(--deep);color:#fff}
.btn-forest::after{content:none}
.btn-outline{border-color:var(--deep);color:var(--deep)}
.btn-outline:hover{background:var(--sage-2);color:var(--deep);border-color:var(--deep)}
.hero .btn-outline,.band-dark .btn-outline,.arc-hero .btn-outline{
  border-color:rgba(255,255,255,.75);color:#fff}
.hero .btn-outline:hover,.band-dark .btn-outline:hover,.arc-hero .btn-outline:hover{
  background:rgba(255,255,255,.14);color:#fff;border-color:#fff}
.hero .btn-forest,.arc-hero .btn-forest{border-color:rgba(255,255,255,.75);color:#fff}
.hero .btn-forest:hover,.arc-hero .btn-forest:hover{background:#fff;color:var(--deep)}
/* formulaires : clairs */
.js-form input[type=text],.js-form input[type=email],.js-form input[type=number],
.js-form textarea,.nl-form input[type=email],input[type=email],input[type=password],
.join-form input[type=text],.join-form textarea{
  background:#fff;border-color:var(--sage);color:var(--ink)}
.donate-panel select{background:#fff;border:1px solid var(--sage);color:var(--ink)}
.form-msg.ok{color:#1E7A3C}
/* pastilles & étapes */
.chip{background:var(--sage-2);color:var(--deep);border:1px solid var(--sage)}
.chip-hot{background:var(--ember);color:#1B2440;border:0}
.join-progress li{background:var(--sage-2);color:var(--muted)}
.join-progress li span{background:#fff;color:var(--ink)}
.join-progress li.on{background:var(--ember);color:#1B2440}
.join-progress li.on span{background:rgba(0,0,0,.12);color:#1B2440}
.join-progress li.done{background:var(--deep);color:#fff}
.pill-check input:checked+span{background:var(--ember);border-color:var(--ember);color:#1B2440}
/* chiffres : bleu plein (fin du dégradé texte v3) */
.stats .n,[data-count]{background:none;-webkit-background-clip:initial;background-clip:initial;
  color:var(--deep)!important;-webkit-text-fill-color:var(--deep)}
.band-dark .stats .n,.band-dark [data-count]{color:var(--ember)!important;
  -webkit-text-fill-color:var(--ember)}
/* preuve sociale bandeau : jaune lisible sur bleu (—ambre est rouge désormais) */
.band-proof figcaption{color:var(--ember)}
/* galets organiques (signature C) : portraits & vignettes */
.card,.info-card,.quote-card{border-radius:22px}
.amb img{border-radius:var(--b1)}
.amb:nth-child(2) img{border-radius:var(--b2)}
.amb:nth-child(3) img{border-radius:var(--b3)}
.amb:nth-child(4) img{border-radius:var(--b4)}
.tilt img{border-radius:26px}
.member img{filter:none;border-radius:var(--b2)}
.member:nth-child(odd) img{border-radius:var(--b3)}
/* méga-menu / divers */
.mm-item:hover .mm-ico{background:var(--deep);border-color:var(--deep);color:var(--ember)}
.timeline .dot span{background:var(--sage-2);color:var(--deep);border-color:var(--sage)}
.timeline .dot::after{background:var(--sage)}
.v-dots span.on{background:var(--deep)}
.hero-pause{background:rgba(33,58,118,.65)}
.hero-pause:hover{background:rgba(33,58,118,.85)}
/* boost join : rouge charte sur clair */
.boost{color:var(--ambre,#CA1431)}
.reassure div{border-left-color:var(--ember)}
/* v5 — neutralisations v3 restantes (repérées au screenshot) */
header.site{background:rgba(251,248,240,.92);border-bottom:1px solid var(--sage)}
header.site.scrolled{background:rgba(255,255,255,.97);box-shadow:0 8px 30px rgba(27,36,64,.12)}
.pil-list{border-top:1px solid rgba(33,58,118,.18)}
.pil-list .n{color:var(--ambre,#CA1431)}
.pil-list h3{color:var(--deep)}
.pil-list a:hover h3{background:linear-gradient(transparent 60%,var(--ember) 60%);
  -webkit-background-clip:initial;background-clip:initial;color:var(--deep);
  -webkit-text-fill-color:var(--deep)}
.pil-list small{font-weight:400}
.stats-note{color:rgba(255,255,255,.65)}
.hero::after{background:linear-gradient(to top,var(--cream) 2%,rgba(27,36,64,.5) 45%,rgba(27,36,64,.22))}
.amt span{border-color:var(--sage);color:var(--ink)}
/* panneau don : carte claire (le --muted foncé était illisible sur l'ancien fond bleu) */
.donate-panel{background:var(--card);color:var(--ink);border:1px solid var(--sage);border-radius:22px}
.donate-panel .form-note,.donate-panel .note{color:var(--muted)}