/* Au cœur de Bouboulou — carnet de route : chaque section est une page du carnet ; les scènes dessinées sont recadrées sans aucun texte, le texte reste toujours dans la page.
@font-face{font-family:"Figtree";src:url("polices/figtree-latin-300-normal.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
   Polices hébergées sur le site (aucun appel à Google : pas de fuite d'adresse IP des visiteurs). */
@font-face{font-family:"Young Serif";src:url("polices/young-serif-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Figtree";src:url("polices/figtree-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Figtree";src:url("polices/figtree-latin-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Figtree";src:url("polices/figtree-latin-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}

:root{
  /* couleurs tirées des visuels de l'association : sable, cacao, rose du cœur du logo, ocre */
  --sable:#f7f1e8; --papier:#fffdf9; --cacao:#2b1f18; --texte:#3a2d25; --doux:#6b5a4e;
  --trait:#e4d8c8; --rose:#b23a62; --rose-pale:#f6e3e8; --ocre:#a8661c; --ocre-pale:#f4e6cf;
  --titre:"Young Serif",Georgia,"Times New Roman",serif;
  --corps:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{margin:0;background:var(--sable);color:var(--texte);font-family:var(--corps);font-size:1.0625rem;line-height:1.65}
img{max-width:100%;height:auto;display:block}
a{color:var(--rose);text-underline-offset:3px}
a:hover{color:var(--cacao)}
:focus-visible{outline:3px solid var(--ocre);outline-offset:3px;border-radius:4px}
h1,h2,h3{font-family:var(--titre);font-weight:400;color:var(--cacao);line-height:1.15;text-wrap:balance;margin:0}
p{margin:0 0 1rem}
.lien-evitement{position:absolute;left:-999px;top:0;background:var(--cacao);color:var(--sable);padding:.6rem 1rem;z-index:50}
.lien-evitement:focus{left:16px;top:16px}

.cadre{max-width:1180px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}

/* ── En-tête ── */
.entete{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--sable);box-shadow:0 1px 0 var(--trait);border-bottom:1px solid var(--trait)}
.entete .cadre{display:flex;align-items:center;gap:1rem;padding-block:.6rem}
.marque{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--cacao);margin-right:auto}
.marque img{width:52px;height:52px;mix-blend-mode:multiply;border-radius:50%}
.marque span{font-family:var(--titre);font-size:1.12rem;line-height:1.1}
.marque small{display:block;font-family:var(--corps);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--doux)}
.menu{display:flex;gap:1.4rem;list-style:none;margin:0;padding:0}
.menu a{color:var(--texte);text-decoration:none;font-size:.98rem}
.menu a:hover{color:var(--rose);text-decoration:underline}
.bouton{display:inline-block;background:var(--rose);color:#fff;text-decoration:none;font-weight:700;padding:.75rem 1.4rem;border-radius:999px;border:2px solid var(--rose);line-height:1.2}
.bouton:hover{background:var(--cacao);border-color:var(--cacao);color:#fff}
.bouton.clair{background:transparent;color:var(--cacao);border-color:var(--cacao)}
.bouton.clair:hover{background:var(--cacao);color:var(--sable)}
.menu-mobile{display:none}
.menu-mobile summary{list-style:none;cursor:pointer;font-weight:700;padding:.5rem .8rem;border:2px solid var(--cacao);border-radius:999px;color:var(--cacao)}
.menu-mobile summary::-webkit-details-marker{display:none}
.menu-mobile ul{position:absolute;right:16px;top:100%;background:var(--papier);border:1px solid var(--trait);border-radius:14px;padding:.6rem 0;margin:.4rem 0 0;list-style:none;min-width:220px;box-shadow:0 10px 30px rgba(43,31,24,.12)}
.menu-mobile li a{display:block;padding:.6rem 1.2rem;color:var(--texte);text-decoration:none}
@media (max-width:900px){.menu,.entete .bouton{display:none}.menu-mobile{display:block}}

/* ── Accueil ── */
.accueil .cadre{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:3rem;align-items:center;padding-block:3.5rem 4rem}
.surtitre{display:inline-block;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ocre);font-weight:700;margin-bottom:1rem}
.accueil h1{font-size:clamp(2.3rem,5.4vw,4.1rem);margin-bottom:1.25rem}
.accueil h1 em{font-style:normal;color:var(--rose)}
.accueil .chapo{font-size:1.18rem;color:var(--texte);max-width:34rem;margin-bottom:1.8rem}
.actions{display:flex;flex-wrap:wrap;gap:.8rem}
.photo-accueil{position:relative}
.photo-accueil img{border-radius:22px;width:100%;height:auto;box-shadow:0 20px 40px rgba(43,31,24,.18)}
.photo-accueil .tampon{margin:1rem 0 0;background:var(--papier);border:1px solid var(--trait);border-radius:14px;padding:.8rem 1rem;box-shadow:0 8px 24px rgba(43,31,24,.12);max-width:15rem;font-size:.92rem}
.photo-accueil .tampon b{display:block;font-family:var(--titre);font-weight:400;font-size:1.5rem;color:var(--rose);line-height:1.1}

/* ── Sections ── */
.section{padding-block:4.5rem}
.section.papier{background:var(--papier);border-block:1px solid var(--trait)}
.entete-section{max-width:46rem;margin-bottom:2.5rem}
.entete-section .surtitre{margin-bottom:.6rem}
.entete-section h2{font-size:clamp(1.9rem,3.6vw,2.7rem);margin-bottom:.8rem}
.entete-section p{color:var(--doux);font-size:1.1rem}

.chiffres{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin:0;padding:0;list-style:none}
.chiffres li{background:var(--papier);border:1px solid var(--trait);border-radius:16px;padding:1.2rem 1.1rem}
.chiffres b{display:block;white-space:nowrap;font-family:var(--titre);font-weight:400;font-size:2.2rem;color:var(--rose);line-height:1.05;font-variant-numeric:tabular-nums}
.chiffres span{color:var(--doux);font-size:.95rem}

.deux{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:3rem;align-items:start}
.histoire summary{cursor:pointer;color:var(--rose);font-weight:700;margin-top:.4rem}
.histoire[open] summary{margin-bottom:1rem}

/* Pays */
.pays{margin-top:1.5rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem}
.carte{background:var(--papier);border:1px solid var(--trait);border-radius:20px;padding:1.6rem}
.carte h3{font-size:1.5rem;margin-bottom:.3rem}
.carte .lieu{color:var(--ocre);font-weight:700;font-size:.92rem;margin-bottom:.9rem}
.carte ul{margin:.4rem 0 0;padding-left:1.1rem}
.carte li{margin-bottom:.3rem}
.etiquette{display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;border-radius:999px;padding:.2rem .7rem;margin-bottom:.8rem}
.etiquette.encours{background:var(--rose-pale);color:var(--rose)}
.etiquette.fait{background:var(--ocre-pale);color:var(--ocre)}

/* Projet phare */
.projet{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:2.5rem;align-items:center;background:var(--cacao);color:var(--sable);border-radius:24px;padding:2.2rem;overflow:hidden}
.projet h3{color:#fff;font-size:clamp(1.6rem,3vw,2.2rem);margin-bottom:.8rem}
.projet p{color:#efe5d8}
.projet img{border-radius:16px;width:100%;height:auto}
.projet .bouton{background:var(--sable);color:var(--cacao);border-color:var(--sable)}
.projet .bouton:hover{background:var(--rose-pale);border-color:var(--rose-pale)}
.projet .bouton.clair{background:transparent;color:var(--sable);border-color:var(--sable)}
.projet .bouton.clair:hover{background:var(--sable);color:var(--cacao)}
.etapes{list-style:none;margin:1.2rem 0 1.6rem;padding:0;display:grid;gap:.5rem}
.etapes li{display:flex;gap:.7rem;align-items:flex-start}
.etapes li::before{content:"";flex:none;width:14px;height:14px;margin-top:.35rem;border-radius:50%;border:2px solid #efe5d8}
.etapes li.ok::before{background:#efe5d8}

/* Démarche : dessins au trait */
.demarche{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.2rem;list-style:none;margin:0;padding:0;counter-reset:etape}
.demarche li{background:var(--papier);border:1px solid var(--trait);border-radius:18px;padding:1.4rem}
.demarche svg{width:56px;height:56px;margin-bottom:.8rem}
.demarche h3{font-size:1.2rem;margin-bottom:.4rem}
.demarche p{color:var(--doux);font-size:.98rem;margin:0}
.dessin{fill:none;stroke:var(--cacao);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.dessin .coeur{fill:var(--rose);stroke:var(--rose)}

/* Soutenir */
.soutenir{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem}
.soutenir .carte{display:flex;flex-direction:column;gap:.4rem}
.soutenir .carte .bouton{align-self:flex-start;margin-top:auto}
.garantie{margin-top:1.5rem;padding:1rem 1.2rem;border-radius:14px;background:var(--ocre-pale);color:var(--cacao)}

/* Actualités */
.actus{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem}
.actu{background:var(--papier);border:1px solid var(--trait);border-radius:18px;padding:1.4rem;display:flex;flex-direction:column;gap:.5rem}
.actu .quand{color:var(--ocre);font-weight:700;font-size:.85rem;text-transform:uppercase;letter-spacing:.06em}
.actu h3{font-size:1.25rem}
.actu p{color:var(--doux);margin:0}
.actu a{margin-top:auto;font-weight:700}

/* Galerie : chaque visuel est montré en entier, son texte n'est jamais coupé */
.galerie{columns:3 260px;column-gap:.9rem}
.galerie figure{margin:0 0 .9rem;break-inside:avoid;border-radius:14px;overflow:hidden;background:var(--trait)}
.galerie img{width:100%;height:auto}
.liens-albums{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.5rem}

/* Pied de page */
.pied{background:var(--cacao);color:#e9dfd2;padding-block:3.5rem 2rem}
.pied a{color:#fff}
.pied h2{color:#fff;font-size:1.6rem;margin-bottom:.6rem}
.pied h3{color:#fff;font-family:var(--corps);font-weight:700;font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:.8rem}
.pied .colonnes{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:2rem}
.pied ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.pied .bas{border-top:1px solid rgba(255,255,255,.15);margin-top:2.5rem;padding-top:1.2rem;display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between;font-size:.9rem}
.pied .devise{font-style:italic;color:#fff}

/* Pages légales */
.legal{max-width:46rem;padding-block:3rem 4rem}
.legal h1{font-size:clamp(2rem,4vw,2.6rem);margin-bottom:1.5rem}
.legal h2{font-size:1.4rem;margin:2rem 0 .6rem}
.legal .a-completer{background:var(--ocre-pale);padding:.1rem .4rem;border-radius:4px}

@media (max-width:900px){
  .accueil .cadre,.deux,.projet,.pied .colonnes{grid-template-columns:minmax(0,1fr)}
  .chiffres,.demarche{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pays,.soutenir,.actus{grid-template-columns:minmax(0,1fr)}
  .section{padding-block:3.2rem}
  .projet{padding:1.5rem}
}
@media (max-width:440px){.chiffres,.demarche{grid-template-columns:minmax(0,1fr)}.marque small{display:none}.marque img{width:42px;height:42px}.marque span{font-size:1rem}}

/* ── Version 2 : accueil percutant ── */
.une{padding-block:3rem 1rem}
.une .haut{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:2.5rem;align-items:end}
.une h1{font-size:clamp(2.6rem,6.4vw,5rem);line-height:1.02;margin-bottom:1.2rem}
.une h1 em{font-style:normal;color:var(--rose)}
.une .chapo{font-size:1.2rem;max-width:36rem;margin-bottom:1.6rem}
.une .chiffres{grid-template-columns:repeat(2,minmax(0,1fr))}
.bandeau{margin-top:2.5rem;border-radius:28px;overflow:hidden;background:var(--trait)}
.bandeau img{width:100%;height:auto}
.bandeau{max-width:980px;margin-inline:auto}
.legende{margin-top:.6rem;color:var(--doux);font-size:.92rem}
.projet .visuel{border-radius:18px;overflow:hidden}
.projet .visuel img{width:100%;height:auto}
.appel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;background:var(--rose);color:#fff;border-radius:28px;overflow:hidden}
.appel .texte{padding:2.4rem}
.appel h2{color:#fff;font-size:clamp(1.8rem,3.4vw,2.6rem);margin-bottom:1rem}
.appel p{color:#fff}
.appel .gros{font-family:var(--titre);font-size:clamp(3rem,7vw,5rem);line-height:1;display:block;margin-bottom:.4rem}
.appel .bouton{background:#fff;color:var(--rose);border-color:#fff}
.appel .bouton:hover{background:var(--cacao);border-color:var(--cacao);color:#fff}
.appel img{width:100%;height:100%;object-fit:cover;object-position:40% 50%;min-height:260px}
.faq{display:grid;gap:.8rem;max-width:52rem}
.faq details{background:var(--papier);border:1px solid var(--trait);border-radius:16px;padding:1rem 1.3rem}
.faq summary{cursor:pointer;font-family:var(--titre);font-size:1.2rem;color:var(--cacao);list-style:none;display:flex;justify-content:space-between;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--rose);font-family:var(--corps);font-weight:700}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:.8rem 0 0}
.affiches{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem;align-items:start}
.affiches a{display:block;border-radius:16px;overflow:hidden;border:1px solid var(--trait);background:var(--papier)}
.affiches img{width:100%;height:auto}
@media (max-width:900px){
  .une .haut,.appel{grid-template-columns:minmax(0,1fr)}
  .affiches{grid-template-columns:minmax(0,1fr)}
  .appel .texte{padding:1.6rem}
}
.appel + .soutenir{margin-top:1.5rem}
@media (max-width:900px){.appel img{height:auto;min-height:0;object-fit:initial}}
@media (max-width:520px){.chiffres b{font-size:1.7rem}.chiffres li{padding:1rem .9rem}}

/* ══ Version 4 : l'esprit du site n°2 + style aérien (fondus, motifs africains, défilement moderne). Zéro script. ══ */
.frise{height:28px;background:url("images/frise-ocre.svg") repeat-x center/auto 28px;opacity:.85}

/* Accueil : image en fondu, Afrique et gazelle bien visibles */
.une{position:relative;overflow:hidden;padding:clamp(2.5rem,6vw,5rem) 0 clamp(8rem,13vw,11rem)}
.fond-afrique{position:absolute;left:-8%;top:-6%;width:min(70vw,820px);aspect-ratio:600/640;background:url("images/afrique-trait.svg") no-repeat center/contain;opacity:.32;pointer-events:none}
.une-grille{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:2rem;align-items:center;padding-left:max(16px,calc((100vw - 1180px)/2 + 16px))}
.une h1{font-size:clamp(2.6rem,6vw,5.4rem);line-height:1;margin-bottom:1.4rem}
.une h1 .fin{display:block;font-family:var(--corps);font-weight:300;letter-spacing:-.035em}
.une h1 em{display:block;font-style:normal;color:var(--rose);margin-top:.1em}
.une-image{margin:0}
.une-image img{width:100%;height:auto;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 28%);mask-image:linear-gradient(to right,transparent 0,#000 28%)}
.gazelle-une{position:absolute;left:max(16px,calc((100vw - 1180px)/2 + 16px));bottom:1.5rem;width:clamp(140px,15vw,220px);opacity:.6;pointer-events:none}

/* Chiffres : cartes du site n°2, chiffres fins */
.chiffres-zone{padding-block:3rem 1rem}
.chiffres{grid-template-columns:repeat(4,minmax(0,1fr))}
.chiffres b{font-family:var(--corps);font-weight:300;letter-spacing:-.03em;font-size:clamp(1.9rem,3.2vw,2.9rem)}

/* Le mot qui grandit au défilement */
.zoom{padding-block:clamp(4rem,9vw,7rem);text-align:center;overflow:hidden}
.zoom-titre{font-family:var(--corps);font-weight:300;font-size:clamp(2.3rem,7vw,6.4rem);line-height:1.02;letter-spacing:-.035em}
.zoom-titre span{display:block}
.zoom-titre em{display:block;font-family:var(--titre);font-style:normal;color:var(--rose);letter-spacing:-.01em}

/* Écran partagé : le texte reste, les images défilent */
.partage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
.partage-texte{position:sticky;top:6.5rem}
.partage h2{font-size:clamp(1.9rem,3.6vw,2.8rem);margin-bottom:.8rem}
.partage .grand{font-family:var(--corps);font-weight:300;font-size:clamp(1.3rem,2.2vw,1.7rem);color:var(--rose);margin-bottom:1.2rem}
.partage-images{display:grid;gap:2rem}
.partage-images figure{margin:0;border-radius:20px;overflow:hidden;box-shadow:0 24px 50px -24px rgba(43,31,24,.45)}
.partage-images img{width:100%;height:auto}

/* Fondus entre les sections */
.section.papier{border-block:0;background:linear-gradient(to bottom,var(--sable) 0,var(--papier) 6rem,var(--papier) calc(100% - 6rem),var(--sable) 100%)}
.section.sombre{color:#e9dfd2;padding-block:clamp(9rem,14vw,12rem);background:linear-gradient(to bottom,var(--sable) 0,var(--cacao) 7rem,var(--cacao) calc(100% - 7rem),var(--sable) 100%);position:relative;overflow:hidden}
.section.sombre h2{color:#fff}
.section.sombre .surtitre{color:#e0a85c}

/* Carte */
.carte-zone{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(2rem,5vw,4rem);align-items:center}
.carte-zone h2{font-size:clamp(2rem,4vw,3.2rem);margin-bottom:1.6rem}
.carte-zone .pays{grid-template-columns:minmax(0,1fr);margin-top:0;gap:1.2rem}
.carte-figure{margin:0}
.carte-svg{width:100%;max-width:560px;height:auto;display:block;margin:0 auto}
.c-afrique{fill:rgba(255,255,255,.07);stroke:rgba(255,255,255,.55);stroke-width:1.3;stroke-linejoin:round}
.c-bf{fill:#e0a85c;stroke:var(--cacao);stroke-width:1}
.c-ci{fill:var(--rose);stroke:var(--cacao);stroke-width:1}
.c-point{fill:#fff;stroke:var(--cacao);stroke-width:2}
.c-halo{fill:none;stroke:#fff;stroke-width:1.5;opacity:.75}
.c-nom{font-family:var(--corps);font-weight:700;font-size:23px;fill:#fff;paint-order:stroke;stroke:var(--cacao);stroke-width:5px;stroke-linejoin:round}
.elephant-fond{position:absolute;right:-50px;bottom:4rem;width:clamp(220px,28vw,400px);opacity:.07;pointer-events:none}

/* Bandeau don : gazelle blanche en fond */
.appel{position:relative}
.appel::before{content:"";position:absolute;left:-2%;bottom:-6%;width:min(60%,560px);aspect-ratio:240/160;background:url("images/gazelle-blanche.svg") no-repeat center/contain;opacity:.16;pointer-events:none}
.appel .texte{position:relative}
.appel .gros{font-family:var(--corps);font-weight:300;letter-spacing:-.05em;font-size:clamp(4rem,10vw,7.5rem)}

/* Pied : frise blanche et baobab */
.pied{position:relative;overflow:hidden}
.pied::before{content:"";position:absolute;left:0;right:0;top:0;height:28px;background:url("images/frise-blanche.svg") repeat-x center/auto 28px;opacity:.25}
.pied::after{content:"";position:absolute;right:-30px;bottom:-20px;width:clamp(240px,30vw,420px);aspect-ratio:1;background:url("images/baobab-clair.svg") no-repeat center/contain;opacity:.12;pointer-events:none}
.pied .cadre{position:relative;z-index:1}

/* Apparitions en fondu (navigateurs récents ; sinon tout est simplement visible) */
@media (prefers-reduced-motion:no-preference){
  .une-image img{animation:arrivee 1.4s ease-out both}
  .gazelle-une{animation:bond 1.8s cubic-bezier(.2,.7,.2,1) .3s both}
  @supports (animation-timeline:view()){
    .revele{animation:fondu linear both;animation-timeline:view();animation-range:entry 5% entry 50%}
    .zoom-titre{animation:grandit linear both;animation-timeline:view();animation-range:entry 10% cover 45%}
  }
}
@keyframes arrivee{from{opacity:0;transform:scale(1.05)}to{opacity:1;transform:none}}
@keyframes bond{from{opacity:0;transform:translate(-120px,40px)}to{opacity:.6;transform:none}}
@keyframes fondu{from{opacity:0;transform:translateY(40px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes grandit{from{opacity:.15;transform:scale(.55)}to{opacity:1;transform:none}}

@media (max-width:900px){
  .une-grille{grid-template-columns:minmax(0,1fr);padding-right:16px}
  .une-image{margin-right:-16px;margin-left:-16px}
  .une-image img{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 22%);mask-image:linear-gradient(to bottom,transparent 0,#000 22%)}
  .fond-afrique{width:110vw;left:-20%;opacity:.22}
  .chiffres{grid-template-columns:repeat(2,minmax(0,1fr))}
  .partage,.carte-zone{grid-template-columns:minmax(0,1fr)}
  .partage-texte{position:static}
}
@media (max-width:520px){.chiffres b{font-size:clamp(1.4rem,7vw,1.9rem)}}
.section.sombre .carte{color:var(--texte)}
@media (min-width:901px){.une-grille{grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr)}.une{padding-bottom:clamp(7rem,10vw,9rem)}}

/* ══ v4.1 : menu mobile qui se ferme tout seul, plus d'air, zoom fondu sur les images ══ */
html{scroll-padding-top:5.5rem}
.menu-mobile{display:none!important}
.menu-ouvrir{display:none;font-weight:700;text-decoration:none;padding:.5rem 1rem;border:2px solid var(--cacao);border-radius:999px;color:var(--cacao)}
.menu-tiroir{display:none}

.menu-fond{position:absolute;inset:0;background:rgba(43,31,24,.4);animation:voile .3s ease both}
.menu-panneau{position:absolute;top:0;left:0;right:0;background:var(--papier);border-radius:0 0 22px 22px;padding:1rem max(16px,env(safe-area-inset-right,0px)) 1.6rem max(16px,env(safe-area-inset-left,0px));box-shadow:0 20px 40px rgba(43,31,24,.25);animation:descend .35s cubic-bezier(.2,.7,.2,1) both}
.menu-panneau ul{list-style:none;margin:.4rem 0 0;padding:0}
.menu-panneau li a{display:block;padding:.85rem .2rem;border-bottom:1px solid var(--trait);color:var(--cacao);text-decoration:none;font-size:1.15rem}
.menu-fermer{display:block;margin-left:auto;width:max-content;padding:.4rem 1rem;border:2px solid var(--cacao);border-radius:999px;color:var(--cacao);text-decoration:none;font-weight:700}
@keyframes descend{from{transform:translateY(-100%)}to{transform:none}}
@keyframes voile{from{opacity:0}to{opacity:1}}
@media (max-width:900px){.menu-ouvrir{display:inline-block}}

/* Plus d'air */
.section{padding-block:clamp(5rem,10vw,8.5rem)}
.zoom{padding-block:clamp(5rem,12vw,9rem)}
.entete-section{margin-bottom:3rem}
.demarche,.actus,.soutenir,.pays{gap:1.6rem}

/* Zoom fondu sur toutes les zones photos */
.partage-images figure,.affiches a,.appel,.bandeau{overflow:hidden}
@media (prefers-reduced-motion:no-preference){
  .une-image img{animation:arrivee-zoom 1.6s cubic-bezier(.2,.7,.2,1) both}
  @supports (animation-timeline:view()){
    .partage-images img,.affiches img,.appel img,.carte-svg{animation:zoom-fondu linear both;animation-timeline:view();animation-range:entry 0% cover 40%}
  }
}
@keyframes arrivee-zoom{from{opacity:0;transform:scale(1.15);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
@keyframes zoom-fondu{from{opacity:0;transform:scale(1.18);filter:blur(10px)}to{opacity:1;transform:none;filter:none}}

/* ══ v4.2 : africain moderne en 3D ══ */
/* L'Afrique se dessine toute seule à l'ouverture */
.fond-afrique{display:none}
.afrique-trace{position:absolute;left:-6%;top:-8%;width:min(72vw,860px);height:auto;pointer-events:none;overflow:visible}
.afrique-trace path{fill:none;stroke:var(--ocre);stroke-width:1.6;stroke-linejoin:round;opacity:.55;stroke-dasharray:1;stroke-dashoffset:0}
/* L'image d'accueil est inclinée en 3D et se redresse quand on descend */
.une-grille{perspective:1400px}
.une-image{transform-origin:left center;filter:drop-shadow(0 30px 40px rgba(43,31,24,.28))}
/* Cartes qui basculent en 3D à l'apparition */
@keyframes fondu{from{opacity:0;transform:perspective(900px) rotateX(22deg) translateY(50px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
/* Carrousel 3D des affiches */
.carrousel3d{--l:240px;--r:330px;perspective:1500px;height:calc(var(--l) * 1.34 + 80px);display:flex;align-items:center;justify-content:center;margin:1rem 0 2rem;overflow:hidden}
.anneau{position:relative;width:var(--l);height:calc(var(--l) * 1.334);transform-style:preserve-3d}
.face{position:absolute;inset:0;border-radius:14px;overflow:hidden;box-shadow:0 20px 40px rgba(43,31,24,.28);backface-visibility:hidden;background:var(--sable)}
.face img{width:100%;height:100%;object-fit:contain}
.f0{transform:rotateY(0deg) translateZ(var(--r))}.f1{transform:rotateY(60deg) translateZ(var(--r))}.f2{transform:rotateY(120deg) translateZ(var(--r))}
.f3{transform:rotateY(180deg) translateZ(var(--r))}.f4{transform:rotateY(240deg) translateZ(var(--r))}.f5{transform:rotateY(300deg) translateZ(var(--r))}
@media (max-width:600px){.carrousel3d{--l:170px;--r:230px}}
@media (prefers-reduced-motion:no-preference){
  .afrique-trace path{stroke-dashoffset:1;animation:trace 4s cubic-bezier(.4,0,.2,1) .2s forwards}
  .anneau{animation:tourne-anneau 36s linear infinite}
  .carrousel3d:focus-within .anneau{animation-play-state:paused}
  @media (hover:hover){.carrousel3d:hover .anneau{animation-play-state:paused}}
  @supports (animation-timeline:scroll()){
    .une-image{animation:redresse linear both;animation-timeline:scroll(root);animation-range:0 70vh}
  }
}
@keyframes trace{to{stroke-dashoffset:0}}
@keyframes tourne-anneau{from{transform:translateZ(calc(var(--r) * -1)) rotateY(0deg)}to{transform:translateZ(calc(var(--r) * -1)) rotateY(-360deg)}}
@keyframes redresse{from{transform:rotateY(-18deg) rotateX(5deg) scale(.94)}to{transform:none}}
.anneau{transform:translateZ(calc(var(--r) * -1))}
/* Sans animation : affiches posées à plat, en entier */
@media (prefers-reduced-motion:reduce){
  .carrousel3d{height:auto;perspective:none;overflow:visible}
  .anneau{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.2rem;width:100%;height:auto;transform:none}
  .face{position:static;transform:none!important}
  .face.f3,.face.f4,.face.f5{display:none}
}
@media (max-width:600px){.une{padding-bottom:7.5rem}.gazelle-une{bottom:.5rem;width:110px}}

/* Qui sommes-nous + Espace membres */
.qui-grille{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2rem,6vw,5rem);align-items:start}
.qui h2{font-family:var(--corps);font-weight:300;font-size:clamp(1.9rem,4vw,3.2rem);letter-spacing:-.03em;line-height:1.1}
.qui p{font-size:1.08rem}
.histoire p{font-size:1.1rem;line-height:1.8}
.histoire .bouton{margin-top:1rem}
.menu-panneau li.membres a{color:var(--rose);font-weight:700;border-bottom:0}
@media (max-width:900px){.qui-grille{grid-template-columns:minmax(0,1fr)}}
.lien-fleche{display:inline-block;margin-top:.4rem;font-weight:700;color:var(--cacao);text-decoration:none;border-bottom:2px solid var(--rose);padding-bottom:.15rem}
.lien-fleche::after{content:" →";color:var(--rose)}
.lien-fleche:hover{color:var(--rose)}

/* v4.3 : menu en « popover » (pas d'historique parasite), lien Espace membres */
.menu-tiroir{display:none}
.menu-tiroir:popover-open{display:block;position:fixed;inset:0 0 auto 0;margin:0;width:100%;max-width:none;height:auto;border:0;padding:0;background:transparent;overflow:visible}
.menu-tiroir::backdrop{background:rgba(43,31,24,.4)}
.menu-ouvrir{font:inherit;background:transparent;cursor:pointer}
.menu-fermer{font:inherit;background:transparent;cursor:pointer}
.menu-panneau{position:relative}
.lien-membres{display:inline-flex;align-items:center;gap:.35rem;color:var(--doux)!important;font-size:.9rem!important;border:1px solid var(--trait);border-radius:999px;padding:.25rem .7rem}
.lien-membres::before{content:"";width:.65rem;height:.75rem;background:currentColor;-webkit-mask:url("images/cadenas.svg") no-repeat center/contain;mask:url("images/cadenas.svg") no-repeat center/contain}
.retour{margin:0 0 1.5rem}
.retour a{font-weight:700;text-decoration:none}
.membres-page ol li,.membres-page ul li{margin-bottom:.5rem}

/* ══ v5 : la scène 3D de l'accueil — l'Afrique en relief, éclairée là où nous agissons ══ */
.afrique-trace{display:none}
.une-grille{perspective:none;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
.scene3d{position:relative;perspective:1600px;perspective-origin:50% 40%;min-height:clamp(420px,46vw,640px);display:flex;align-items:center;justify-content:center}
.pile{position:relative;width:min(100%,560px);aspect-ratio:600/640;transform-style:preserve-3d;transform:rotateX(18deg) rotateY(-22deg)}
.couche{position:absolute;inset:0;width:100%;height:100%}
img.couche{opacity:.5}
.c1{transform:translateZ(-30px);opacity:.42}.c2{transform:translateZ(-60px);opacity:.32}.c3{transform:translateZ(-90px);opacity:.24}.c4{transform:translateZ(-120px);opacity:.16}.c5{transform:translateZ(-150px);opacity:.1}
.avant{transform:translateZ(0);filter:drop-shadow(0 18px 24px rgba(43,31,24,.18))}
.av-afrique{fill:rgba(255,253,249,.7);stroke:var(--ocre);stroke-width:2;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
.av-bf{fill:#d9a14f}
.av-ci{fill:var(--rose)}
.av-point{fill:#fff;stroke:var(--cacao);stroke-width:2.5}
.epingle{position:absolute;display:block;font-family:var(--titre);font-size:clamp(.95rem,1.4vw,1.2rem);color:var(--cacao);background:var(--papier);border:1px solid var(--trait);border-radius:12px;padding:.35rem .7rem;line-height:1.15;box-shadow:0 12px 24px -10px rgba(43,31,24,.35);white-space:nowrap}
.epingle small{display:block;font-family:var(--corps);font-size:.72rem;color:var(--doux)}
.epingle::after{content:"";position:absolute;left:14px;bottom:-34px;width:2px;height:34px;background:var(--cacao)}
.e-bouboulou{left:calc(185.3 / 600 * 100%);top:calc(189.8 / 640 * 100%);transform:translate(-14px,calc(-100% - 34px)) translateZ(70px)}
.e-toulepleu{left:calc(146.3 / 600 * 100%);top:calc(236.7 / 640 * 100%);transform:translate(-14px,calc(-100% - 34px)) translateZ(40px)}
.e-toulepleu::after{height:34px}
.une-image{position:absolute;right:-6%;bottom:2%;width:72%;margin:0;transform:translateZ(110px) rotateY(10deg);border-radius:18px;overflow:hidden;box-shadow:0 40px 60px -20px rgba(43,31,24,.5);filter:none}
.une-image img{-webkit-mask-image:none!important;mask-image:none!important;width:100%;display:block}
.une h1 em{text-shadow:1px 1px 0 #9c3256,2px 2px 0 #8e2d4e,3px 3px 0 #7f2846,4px 4px 0 #70233e,0 14px 24px rgba(112,35,62,.25)}
@media (prefers-reduced-motion:no-preference){
  .pile{animation:balance 14s ease-in-out infinite alternate}
  .av-afrique{stroke-dashoffset:1;animation:trace 3.2s cubic-bezier(.4,0,.2,1) .2s forwards}
  .av-bf,.av-ci,.av-point{opacity:0;animation:allume .8s ease 2.6s forwards}
  .epingle{opacity:0;animation:allume .7s ease 3s forwards}
  .e-toulepleu{animation-delay:3.3s}
  .une-image{animation:flotte 7s ease-in-out infinite alternate}
  .une-image img{animation:arrivee-zoom 1.6s cubic-bezier(.2,.7,.2,1) .4s both}
}
@keyframes balance{from{transform:rotateX(18deg) rotateY(-26deg)}to{transform:rotateX(12deg) rotateY(-8deg)}}
@keyframes allume{to{opacity:1}}
@keyframes flotte{from{transform:translateZ(110px) rotateY(10deg) translateY(0)}to{transform:translateZ(130px) rotateY(6deg) translateY(-12px)}}
@media (max-width:900px){
  .une-grille{grid-template-columns:minmax(0,1fr)}
  .scene3d{min-height:0;margin-top:1rem;padding:0 8px}
  .pile{width:min(92%,420px)}
  .une-image{margin:0}
}
@media (max-width:520px){.epingle{font-size:.82rem;padding:.25rem .5rem}.epingle small{font-size:.65rem}}
html,body{overflow-x:clip}
.une{overflow:clip}
/* Toulépleu : étiquette sous le point pour ne pas chevaucher Bouboulou */
.e-toulepleu{transform:translate(-14px,34px) translateZ(40px)}
.e-toulepleu::after{top:-34px;bottom:auto}
.e-bouboulou{transform:translate(-14px,calc(-100% - 34px))}
.e-toulepleu{transform:translate(-14px,34px)}

/* ══ v6 : vitrine vivante ══ */
/* Accueil : l'image flotte sous la carte, sans cacher les étiquettes */
.scene3d{flex-direction:column;justify-content:flex-start;padding-bottom:2rem}
.pile{width:min(92%,520px)}
.scene3d .une-image{position:relative;right:auto;bottom:auto;width:min(78%,440px);margin:-28% 0 0 auto;transform:rotate(-2deg);z-index:3}
.une-grille{align-items:start}
@media (prefers-reduced-motion:no-preference){
  .scene3d .une-image{animation:flotte2 6s ease-in-out infinite alternate}
}
@keyframes flotte2{from{transform:rotate(-3deg) translateY(0)}to{transform:rotate(1deg) translateY(-14px)}}
@media (max-width:900px){.scene3d .une-image{margin-top:-24%;width:80%}}

/* Le petit personnage qui sort des boutons et fait coucou */
.bouton{position:relative;isolation:isolate;overflow:visible}
.bouton::before{content:"";position:absolute;left:50%;bottom:calc(100% - 6px);width:46px;height:55px;margin-left:-23px;background:url("images/gazelle-mascotte.svg") 0 0/92px 55px no-repeat;opacity:0;transform:translateY(60%) scale(.3);transform-origin:50% 100%;transition:transform .45s cubic-bezier(.3,1.7,.5,1),opacity .2s;pointer-events:none;z-index:2}
.bouton:hover::before,.bouton:focus-visible::before{opacity:1;transform:none;animation:coucou .5s steps(1) .35s infinite}
@keyframes coucou{0%{background-position:0 0}50%{background-position:-46px 0}}
.bouton:hover{transform:translateY(-2px)}
.bouton{transition:background .2s,border-color .2s,color .2s,transform .2s}

/* Liens : un trait qui se dessine sous le texte */
.cadre p a:not(.bouton),.faq a,.carte li a,.pied li a,.legal a:not(.bouton){text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;transition:background-size .3s}
.cadre p a:not(.bouton):hover,.faq a:hover,.carte li a:hover,.pied li a:hover,.legal a:not(.bouton):hover{background-size:0 1px;background-position:100% 100%;animation:trait .45s ease forwards}
@keyframes trait{0%{background-size:0 2px;background-position:0 100%}100%{background-size:100% 2px;background-position:0 100%}}
.menu a{position:relative}
.menu a:not(.lien-membres)::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:6px;background:url("images/frise-ocre.svg") repeat-x 0 50%/auto 6px;transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.menu a:hover::after,.menu a:focus-visible::after{transform:scaleX(1)}
.lien-fleche{transition:color .2s,letter-spacing .25s}
.lien-fleche:hover{letter-spacing:.02em}
.lien-fleche::after{display:inline-block;transition:transform .25s}
.lien-fleche:hover::after{transform:translateX(5px)}

/* Cartes qui s'inclinent vers la souris (voir effets.js) */
.demarche,.pays,.actus,.soutenir,.partage-images,.chiffres{perspective:900px}
.inclinable{rotate:var(--ax,0) var(--ay,0) 0 var(--ang,0deg);transition:rotate .25s ease-out,box-shadow .25s;position:relative}
.inclinable:hover{box-shadow:0 22px 40px -18px rgba(43,31,24,.35)}
.inclinable::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.35),transparent 55%);opacity:0;transition:opacity .25s;pointer-events:none;z-index:1}
.inclinable:hover::before{opacity:1}

/* La phrase qui monte mot à mot */
.zoom-titre i{font-style:normal;display:inline-block}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .zoom-titre{animation:none}
    .zoom-titre i{animation:mot linear both;animation-timeline:view()}
    .zoom-titre span i:nth-child(1){animation-range:entry 0% cover 25%}
    .zoom-titre span i:nth-child(2){animation-range:entry 8% cover 32%}
    .zoom-titre span i:nth-child(3){animation-range:entry 16% cover 38%}
    .zoom-titre em i{animation:mot-zoom linear both;animation-timeline:view();animation-range:entry 20% cover 48%}
  }
}
@keyframes mot{from{opacity:0;transform:translateY(60px) rotateX(70deg);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes mot-zoom{from{opacity:0;transform:scale(2.2);filter:blur(12px)}to{opacity:1;transform:none;filter:none}}

/* La frise défile doucement */
@media (prefers-reduced-motion:no-preference){
  .frise{animation:defile 40s linear infinite}
  .pied::before{animation:defile 60s linear infinite reverse}
}
@keyframes defile{to{background-position-x:-960px}}

/* Bandeau don : la gazelle traverse en bondissant */
.appel::before{left:0;bottom:8%;width:min(34%,260px);opacity:.2}
@media (prefers-reduced-motion:no-preference){
  .appel::before{animation:course 9s linear infinite}
}
@keyframes course{
  0%{transform:translateX(-120%) translateY(0)}
  10%{transform:translateX(-60%) translateY(-18%)} 20%{transform:translateX(0%) translateY(0)}
  30%{transform:translateX(60%) translateY(-18%)} 40%{transform:translateX(120%) translateY(0)}
  50%{transform:translateX(180%) translateY(-18%)} 60%{transform:translateX(240%) translateY(0)}
  70%{transform:translateX(300%) translateY(-18%)} 80%,100%{transform:translateX(380%) translateY(0)}
}

/* Carte : les points battent comme un cœur */
.c-halo{transform-box:fill-box;transform-origin:center}
@media (prefers-reduced-motion:no-preference){
  .c-halo{animation:pouls 2.2s ease-out infinite}
  .pied::after{transform-origin:50% 100%;animation:vent 6s ease-in-out infinite alternate}
}
@keyframes pouls{0%{transform:scale(.6);opacity:.9}100%{transform:scale(2.2);opacity:0}}
@keyframes vent{from{transform:rotate(-2deg)}to{transform:rotate(2deg)}}

/* Projet : les images arrivent de côté en pivotant (différent des autres sections) */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .partage-images figure{animation:pivote linear both;animation-timeline:view();animation-range:entry 0% cover 35%}
    .partage-images figure:nth-child(2){animation-name:pivote2}
  }
}
@keyframes pivote{from{opacity:0;transform:perspective(1000px) translateX(120px) rotateY(-35deg)}to{opacity:1;transform:none}}
@keyframes pivote2{from{opacity:0;transform:perspective(1000px) translateX(-120px) rotateY(35deg)}to{opacity:1;transform:none}}

/* ══ v7 : moins gros, plus léger, plus joyeux ══ */
/* Rythme : sections plus serrées, fondus courts */
.section{padding-block:clamp(3.2rem,6vw,5rem)}
.section.papier{background:linear-gradient(to bottom,var(--sable) 0,var(--papier) 2.5rem,var(--papier) calc(100% - 2.5rem),var(--sable) 100%)}
.section.sombre{padding-block:clamp(5rem,8vw,6.5rem);background:linear-gradient(to bottom,var(--sable) 0,var(--cacao) 3.5rem,var(--cacao) calc(100% - 3.5rem),var(--sable) 100%)}
.zoom{padding-block:clamp(2.5rem,5vw,4rem)}
.zoom-titre{font-size:clamp(2rem,5vw,4.2rem)}
.une{padding-bottom:clamp(4rem,7vw,6rem)}
.chiffres-zone{padding-block:2rem 0}
.frise{height:20px;background-size:auto 20px;opacity:.7}

/* Titres de section : plus fins, soulignés d'un trait à main levée */
.entete-section{margin-bottom:2rem;max-width:40rem}
.entete-section h2,.partage h2,.carte-zone h2,.qui h2{font-family:var(--titre);font-weight:400;font-size:clamp(1.6rem,2.8vw,2.3rem);letter-spacing:-.01em;line-height:1.15}
.entete-section h2::after,.partage h2::after,.carte-zone h2::after{content:"";display:block;width:110px;height:12px;margin-top:.5rem;background:url("images/trait-main.svg") no-repeat left/contain}
.entete-section p{font-size:1rem}
.qui h2{font-size:clamp(1.6rem,3vw,2.4rem)}
.surtitre{font-size:.72rem;margin-bottom:.6rem}

/* Chiffres : une simple ligne, sans boîtes */
.chiffres{gap:0}
.chiffres li{background:none;border:0;border-left:1px dashed var(--trait);border-radius:0;padding:.2rem 1.2rem;box-shadow:none}
.chiffres li:first-child{border-left:0;padding-left:0}
.chiffres b{color:var(--rose);font-size:clamp(1.7rem,2.6vw,2.4rem)}
.chiffres span{font-size:.88rem}
@media (max-width:900px){.chiffres li{border-left:0;padding-left:0}}

/* Le foyer : collage de photos posées, avec un bout de scotch */
.partage{align-items:center}
.partage-texte{position:static}
.partage-images{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:start;padding:1rem 0}
.partage-images figure{position:relative;border-radius:6px;overflow:visible;box-shadow:0 18px 30px -14px rgba(43,31,24,.45);background:#fff;padding:8px 8px 22px}
.partage-images figure img{border-radius:3px}
.partage-images figure:nth-child(1){rotate:-4deg;z-index:2;margin-top:2rem}
.partage-images figure:nth-child(2){rotate:5deg;margin-left:-14%}
.partage-images figure::after{content:"";position:absolute;top:-10px;left:50%;width:70px;height:22px;margin-left:-35px;background:rgba(244,230,207,.85);rotate:-3deg;box-shadow:0 1px 2px rgba(0,0,0,.08)}

/* Où nous agissons : cartes légères sur fond sombre */
.section.sombre .carte{background:transparent;border:0;border-left:2px solid #e0a85c;border-radius:0;padding:.2rem 0 .2rem 1.2rem;color:#e9dfd2;box-shadow:none}
.section.sombre .carte h3{color:#fff;font-size:1.3rem}
.section.sombre .carte .lieu{color:#e0a85c}
.section.sombre .carte a{color:#f1b8cb}
.section.sombre .etiquette{background:rgba(255,255,255,.1);color:#f4e6cf}
.carte-zone .pays{gap:1.8rem}

/* Démarche : un chemin pointillé avec 4 étapes, sans boîtes */
.demarche{position:relative;gap:1.5rem;padding-top:.5rem}
.demarche::before{content:"";position:absolute;left:4%;right:4%;top:22px;height:60px;background:url("images/chemin.svg") no-repeat center/100% 100%;pointer-events:none}
.demarche li{position:relative;background:none;border:0;border-radius:0;padding:0;text-align:center;box-shadow:none}
.demarche svg{width:72px;height:72px;padding:14px;margin:0 auto .8rem;background:var(--papier);border:2px solid var(--ocre);border-radius:50%;box-shadow:0 8px 18px -10px rgba(168,102,28,.6);transition:transform .3s cubic-bezier(.3,1.7,.5,1)}
.demarche li:hover svg{transform:translateY(-6px) rotate(-6deg)}
.demarche h3{font-size:1.05rem}
.demarche p{font-size:.92rem;max-width:16rem;margin:0 auto}
@media (max-width:900px){.demarche::before{display:none}}

/* S'engager : deux idées côte à côte, sans boîtes */
.soutenir .carte{background:none;border:0;border-top:2px solid var(--ocre);border-radius:0;padding:1rem 0 0;box-shadow:none}
.soutenir .carte h3{font-size:1.2rem}

/* FAQ : de simples lignes */
.faq details{background:none;border:0;border-bottom:1px solid var(--trait);border-radius:0;padding:.9rem 0}
.faq summary{font-size:1.05rem}
.faq{gap:0;border-top:1px solid var(--trait)}

/* Actualités : une liste aérée */
.actus{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem}
.actu{background:none;border:0;border-radius:0;padding:0 0 0 1rem;border-left:3px solid var(--rose-pale);box-shadow:none;transition:border-color .25s}
.actu:hover{border-left-color:var(--rose)}
.actu h3{font-size:1.1rem}
@media (max-width:900px){.actus{grid-template-columns:minmax(0,1fr)}}

/* Le reflet de la souris seulement sur les éléments encore « posés » */
.demarche li.inclinable::before,.soutenir .inclinable::before,.actu.inclinable::before,.chiffres .inclinable::before,.section.sombre .inclinable::before{display:none}
.demarche li.inclinable:hover,.soutenir .inclinable:hover,.actu.inclinable:hover,.chiffres .inclinable:hover,.section.sombre .inclinable:hover{box-shadow:none}
.partage-images{gap:1.2rem}
.partage-images figure:nth-child(2){margin-left:0;rotate:4deg}
@media (max-width:900px){.demarche{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.6rem 1rem}.demarche svg{width:60px;height:60px;padding:12px}}

/* ══ Aperçus qui donnent envie d'ouvrir (film, photos, article) ══ */
.actu{padding-left:0;border-left:0}
.apercu{position:relative;display:block;aspect-ratio:16/10;border-radius:14px;overflow:hidden;margin-bottom:1rem;text-decoration:none;box-shadow:0 16px 30px -18px rgba(43,31,24,.55);isolation:isolate;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.apercu:hover,.apercu:focus-visible{transform:translateY(-4px);box-shadow:0 26px 40px -20px rgba(43,31,24,.6)}
.ap-legende{position:absolute;left:12px;bottom:10px;z-index:3;color:#fff;font-size:.8rem;font-weight:700;letter-spacing:.02em;text-shadow:0 1px 6px rgba(0,0,0,.45)}
/* Film : l'image bouge lentement, comme une vidéo, avec un bouton lecture qui respire */
.ap-film img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.ap-film::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(43,31,24,.65),transparent 55%);z-index:1}
.ap-lecture{position:absolute;left:50%;top:46%;z-index:2;width:62px;height:62px;margin:-31px 0 0 -31px;border-radius:50%;background:rgba(255,255,255,.92);box-shadow:0 8px 20px rgba(0,0,0,.25)}
.ap-lecture::before{content:"";position:absolute;left:24px;top:19px;border-left:20px solid var(--rose);border-top:12px solid transparent;border-bottom:12px solid transparent}
.ap-lecture::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid rgba(255,255,255,.8)}
.ap-film:hover .ap-lecture{transform:scale(1.08)}
.ap-lecture{transition:transform .25s}
/* Photos : trois tirages en éventail qui s'ouvrent au survol */
.ap-photos{background:radial-gradient(circle at 30% 20%,#c9874a,#7a4a24 70%)}
.tuile{position:absolute;top:16%;left:50%;width:44%;aspect-ratio:4/3;margin-left:-22%;border:6px solid #fff;border-bottom-width:16px;border-radius:3px;box-shadow:0 10px 20px rgba(0,0,0,.3);background:url("images/frise-ocre.svg") repeat 0 0/48px 14px,#f4e6cf;transition:transform .45s cubic-bezier(.3,1.5,.5,1)}
.t1{transform:rotate(-12deg) translateX(-38%);background-color:#f6e3e8}
.t2{transform:rotate(3deg);background-color:#f4e6cf;z-index:1}
.t3{transform:rotate(14deg) translateX(40%);background-color:#e9d7c2}
.ap-photos:hover .t1{transform:rotate(-18deg) translateX(-62%) translateY(-6%)}
.ap-photos:hover .t3{transform:rotate(20deg) translateX(64%) translateY(-6%)}
.ap-photos:hover .t2{transform:rotate(0) translateY(-8%)}
.ap-icone{position:absolute;right:12px;top:12px;z-index:3;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.18) url("images/appareil.svg") no-repeat center/18px}
/* Article : une coupure de journal posée de travers */
.ap-journal{background:#e9dccb}
.coupure{position:absolute;left:12%;right:12%;top:10%;bottom:-6%;background:#fbf7ef;padding:12px 14px;box-shadow:0 10px 20px rgba(43,31,24,.25);rotate:-3deg;transition:rotate .35s,transform .35s;display:flex;flex-direction:column;gap:.35rem}
.ap-journal:hover .coupure{rotate:0deg;transform:translateY(-4px)}
.titre-journal{font-family:var(--titre);font-size:.82rem;color:var(--cacao);border-bottom:2px solid var(--cacao);padding-bottom:.25rem;text-align:center}
.rubrique-journal{font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--rose);font-weight:700}
.gros-titre{font-family:var(--titre);font-size:1.02rem;line-height:1.15;color:var(--cacao)}
.lignes{flex:1;background:repeating-linear-gradient(to bottom,#d9cdbb 0 3px,transparent 3px 9px);opacity:.8;margin-top:.2rem}
@media (prefers-reduced-motion:no-preference){
  .ap-film img{animation:kenburns 14s ease-in-out infinite alternate}
  .ap-lecture::after{animation:respire 2.4s ease-out infinite}
}
@keyframes kenburns{from{transform:scale(1.05) translate(0,0)}to{transform:scale(1.22) translate(-4%,-3%)}}
@keyframes respire{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.45);opacity:0}}

/* ══ Le petit personnage se montre tout seul (aussi sur téléphone, sans survol) ══ */
@media (prefers-reduced-motion:no-preference){
  .bouton::before{animation:surgit 7s cubic-bezier(.3,1.5,.5,1) infinite}
  .bouton.clair::before{animation-duration:9s;animation-delay:2.5s}
  .entete .bouton::before{animation-duration:8s;animation-delay:4s}
  .bouton:hover::before,.bouton:focus-visible::before,.bouton:active::before{animation:coucou .5s steps(1) infinite;opacity:1;transform:none}
}
@keyframes surgit{
  0%,62%{opacity:0;transform:translateY(60%) scale(.3);background-position:0 0}
  68%{opacity:1;transform:translateY(-8%) scale(1.05)}
  71%{transform:none}
  74%,82%{background-position:-46px 0} 78%,86%{background-position:0 0}
  90%{opacity:1;transform:none}
  96%,100%{opacity:0;transform:translateY(60%) scale(.3)}
}
/* Il passe aussi la tête derrière les aperçus des actualités */
.actu{position:relative}
.apercu{z-index:1}
.actu::after{content:"";position:absolute;right:18%;top:-30px;width:40px;height:48px;background:url("images/gazelle-mascotte.svg") 0 0/80px 48px no-repeat;z-index:0;transform:translateY(70%);opacity:0;pointer-events:none}
@media (prefers-reduced-motion:no-preference){
  .actu::after{animation:coucou-derriere 8s ease-in-out infinite}
  .actu:nth-child(2)::after{animation-delay:2.7s;right:auto;left:16%}
  .actu:nth-child(3)::after{animation-delay:5.3s}
}
@keyframes coucou-derriere{
  0%,55%{transform:translateY(70%);opacity:0;background-position:0 0}
  60%{transform:translateY(4%);opacity:1}
  64%,72%{background-position:-40px 0} 68%,76%{background-position:0 0}
  80%{transform:translateY(4%);opacity:1}
  86%,100%{transform:translateY(70%);opacity:0}
}
/* Les flèches des liens avancent toutes seules pour attirer l'œil */
@media (prefers-reduced-motion:no-preference){
  .lien-fleche::after{animation:pousse 2.4s ease-in-out infinite}
}
@keyframes pousse{0%,60%,100%{transform:none}70%{transform:translateX(6px)}80%{transform:translateX(0)}88%{transform:translateX(4px)}}

/* « l'école. » : rose plein, aucune transparence, arrive d'un coup comme un tampon */
.zoom-titre em i{animation:none!important;opacity:1;filter:none;transform:none}
.zoom-titre em{display:inline-block;color:var(--rose)}
.zoom-titre em.attente{opacity:0}
.zoom-titre em.tampon{animation:tampon .55s cubic-bezier(.2,1.6,.4,1) both}
@keyframes tampon{0%{opacity:0;transform:scale(2.6) rotate(-6deg)}55%{opacity:1;transform:scale(.9) rotate(1deg)}75%{transform:scale(1.06) rotate(-1deg)}100%{opacity:1;transform:none}}

/* Mascotte : la petite gazelle de l'association remplace le bonhomme */
.bouton::before{background-image:url("images/gazelle-mascotte.svg");width:46px;height:55px;margin-left:-23px;background-size:92px 55px}
.actu::after{background-image:url("images/gazelle-mascotte.svg");width:46px;height:55px;background-size:92px 55px;top:-36px}
@keyframes coucou-derriere{
  0%,55%{transform:translateY(70%);opacity:0;background-position:0 0}
  60%{transform:translateY(4%);opacity:1}
  64%,72%{background-position:-46px 0} 68%,76%{background-position:0 0}
  80%{transform:translateY(4%);opacity:1}
  86%,100%{transform:translateY(70%);opacity:0}
}
@keyframes surgit{
  0%,62%{opacity:0;transform:translateY(60%) scale(.3);background-position:0 0}
  67%{opacity:1;transform:translateY(-22%) scale(1.05)}
  70%{transform:translateY(0)}
  73%{transform:translateY(-10%)}
  76%{transform:none}
  76%,84%{background-position:-46px 0} 80%,88%{background-position:0 0}
  90%{opacity:1;transform:none}
  96%,100%{opacity:0;transform:translateY(60%) scale(.3)}
}

/* ══ Antilopes en mouvement (nov. 2026) ══ */
/* Bandeau don : la gazelle traverse tout le bandeau, de bord à bord, en bonds arrondis */
.appel::before{left:-40%;bottom:6%;transform:none}
@media (prefers-reduced-motion:no-preference){
  .appel::before{animation:traversee 11s linear infinite,bondit .8s infinite}
}
@keyframes traversee{from{left:-40%}to{left:105%}}
@keyframes bondit{
  0%{transform:translateY(0) rotate(0);animation-timing-function:cubic-bezier(.2,.7,.4,1)}
  50%{transform:translateY(-20%) rotate(-4deg);animation-timing-function:cubic-bezier(.6,0,.8,.3)}
  100%{transform:translateY(0) rotate(0)}
}

/* Accueil : un petit troupeau traverse le fond, sous le texte */
.une-grille{z-index:1}
.troupeau{position:absolute;inset:auto 0 0 0;height:clamp(7rem,12vw,10rem);pointer-events:none;z-index:0}
.troupeau .g{position:absolute;height:auto;max-width:none}
.g-loin{width:clamp(60px,6vw,90px);bottom:62%;left:12%;opacity:.16}
.g-milieu{width:clamp(90px,9vw,140px);bottom:34%;left:46%;opacity:.26}
.g-pres{width:clamp(130px,13vw,200px);bottom:6%;left:74%;opacity:.4}
@media (prefers-reduced-motion:no-preference){
  .troupeau .g{left:-25%}
  .g-loin{animation:troupeau 46s linear -12s infinite,saute 1.2s ease-in-out infinite}
  .g-milieu{animation:troupeau 34s linear -26s infinite,saute 1s ease-in-out -.3s infinite}
  .g-pres{animation:troupeau 26s linear -4s infinite,saute .85s ease-in-out -.5s infinite}
}
@keyframes troupeau{from{left:-25%}to{left:110%}}
@keyframes saute{0%,100%{transform:translateY(0)}50%{transform:translateY(-14%)}}
@media (max-width:600px){.troupeau{height:6.5rem}.g-loin{width:48px}.g-milieu{width:72px}.g-pres{width:104px}}

/* ══ Signature V@chouille-AI : la pieuvre répétée en filigrane, mention lisible au centre ══ */
.signature-zone{position:relative;margin-top:2rem;padding-block:1.4rem;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));display:flex;justify-content:center}
.signature-zone::before{content:"";position:absolute;inset:0;background:url("images/pieuvre-filigrane.png") repeat center/56px auto;opacity:.07;pointer-events:none}
.signature{position:relative;display:inline-flex;align-items:center;gap:.6rem;color:#e9dfd2;font-size:.9rem;text-decoration:none}
.signature[href]{color:#fff}
.signature[href]:hover span,.signature[href]:focus-visible span{text-decoration:underline}
.signature img{width:34px;height:34px;border-radius:50%}

/* ══ Fond vivant (nov. 2026) : un animal par section, pâle, sous le texte ══ */
/* Les petits personnages des boutons et des actualités sont retirés */
.bouton::before,.actu::after{content:none!important;animation:none!important}

/* Accueil : deux vautours tournent dans le ciel */
.ciel{position:absolute;inset:0 0 auto 0;height:45%;pointer-events:none;z-index:0}
.vol{position:absolute;color:#2b1f18}
.vol .vautour{display:block;width:100%;height:auto}
.vol-1{width:clamp(70px,7vw,110px);top:12%;right:18%;opacity:.22}
.vol-2{width:clamp(50px,5vw,80px);top:26%;right:34%;opacity:.15}
@media (prefers-reduced-motion:no-preference){
  .vol-1{transform-origin:50% 380%;animation:tourne 34s linear infinite}
  .vol-2{transform-origin:50% 460%;animation:tourne 46s linear -18s infinite reverse}
  .vol .vautour{animation:plane 4s ease-in-out infinite}
}
@keyframes tourne{to{transform:rotate(360deg)}}
@keyframes plane{0%,100%{transform:scaleX(1) translateY(0)}50%{transform:scaleX(.9) translateY(4px)}}

/* Qui sommes-nous : un singe se balance à sa liane */
.qui{position:relative;overflow:hidden}
.qui .cadre{position:relative;z-index:1}
.singe-zone{position:absolute;top:0;right:clamp(8px,6vw,90px);width:clamp(60px,7vw,100px);color:#2b1f18;opacity:.2;pointer-events:none;z-index:0}
.singe{display:block;width:100%;height:auto;transform-origin:50% 0}
@media (prefers-reduced-motion:no-preference){
  .singe{animation:balance 3.6s ease-in-out infinite alternate}
}
@keyframes balance{from{transform:rotate(16deg)}to{transform:rotate(-16deg)}}

/* Où nous agissons : l'éléphant avance, un lion traverse au pas */
#carte .cadre{position:relative;z-index:1}
.elephant-fond{z-index:0}
.lion{position:absolute;bottom:2.5rem;left:-25%;width:clamp(120px,14vw,200px);height:auto;color:#e9dfd2;opacity:.12;pointer-events:none;z-index:0}
.lion .pattes-a,.lion .pattes-b{transform-box:fill-box;transform-origin:50% 0}
@media (prefers-reduced-motion:no-preference){
  .elephant-fond{right:auto;left:-35%;animation:marche-elephant 70s linear infinite,pas-lourd 1.6s ease-in-out infinite}
  .lion{animation:marche-lion 50s linear -25s infinite,pas-lion .9s ease-in-out infinite}
  .lion .pattes-a{animation:patte .9s ease-in-out infinite alternate}
  .lion .pattes-b{animation:patte .9s ease-in-out -.9s infinite alternate}
}
@keyframes marche-elephant{from{left:-35%}to{left:110%}}
@keyframes marche-lion{from{left:-25%}to{left:110%}}
@keyframes pas-lourd{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes pas-lion{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes patte{from{transform:rotate(14deg)}to{transform:rotate(-14deg)}}

/* Téléphone : un seul animal par écran */
@media (max-width:600px){.vol-2,.elephant-fond{display:none}.singe-zone{width:56px}}

/* ══ Carte de l'Afrique : sort d'un nuage puis devient nette (même principe que « l'école ») ══ */
@media (prefers-reduced-motion:no-preference){
  .carte-svg{animation:none!important}
  .carte-svg.brume{opacity:.12;filter:blur(22px);transform:scale(1.12)}
  .carte-svg.nette{opacity:1;filter:none;transform:none;transition:opacity 1.6s ease-out,filter 2.4s ease-out,transform 2.4s cubic-bezier(.2,.7,.2,1)}
}

/* ===== Titre du projet en cours : mis en valeur ===== */
#projets{padding-top:clamp(1rem,2.5vw,2rem)}
.partage h2.titre-projet{font-size:clamp(2.3rem,5.4vw,3.9rem);line-height:1.22;letter-spacing:-.02em;text-wrap:balance;margin-bottom:1.1rem}
.partage h2.titre-projet::after{content:none}
.titre-projet .entoure{position:relative;z-index:0;isolation:isolate;display:inline-block;white-space:nowrap;padding:0 .5em;margin-left:-.12em}
.titre-projet .cercle-main{position:absolute;z-index:-1;left:0;top:-20%;width:100%;height:142%;overflow:visible;pointer-events:none}
.titre-projet .cercle-main path{fill:none;stroke:var(--rose);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:0}
.titre-projet .tampon{display:inline-block;vertical-align:middle;margin-left:.5em;padding:.35em .7em;border:2px solid var(--ocre);border-radius:4px;color:var(--ocre);font-family:var(--corps);font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;line-height:1.15;white-space:nowrap;rotate:-7deg;opacity:.9;box-shadow:inset 0 0 0 3px var(--sable),inset 0 0 0 4px var(--ocre)}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .titre-projet .cercle-main path{animation:trace-cercle linear both;animation-timeline:view();animation-range:entry 20% cover 45%}
    .titre-projet .tampon{animation:pose-tampon linear both;animation-timeline:view();animation-range:entry 40% cover 50%}
  }
}
@keyframes trace-cercle{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes pose-tampon{from{opacity:0;scale:1.6;rotate:-16deg}to{opacity:.9;scale:1;rotate:-7deg}}
@media (max-width:600px){.titre-projet .tampon{font-size:.62rem;margin-left:.35em}}

/* ===== Affiches : ouverture en grand dans la page ===== */
.face{cursor:zoom-in}
.visionneuse{border:0;padding:0;background:transparent;max-width:min(92vw,720px);max-height:92vh;overflow:visible}
.visionneuse::backdrop{background:rgba(43,31,24,.82)}
.visionneuse img{display:block;max-width:100%;max-height:84vh;width:auto;height:auto;border-radius:10px;box-shadow:0 24px 60px rgba(0,0,0,.45);background:var(--papier)}
.visionneuse-fermer{display:block;margin:0 0 .6rem auto;font:600 1rem var(--corps);color:var(--papier);background:transparent;border:2px solid var(--papier);border-radius:999px;padding:.45rem 1.1rem;cursor:pointer}
.visionneuse-fermer:focus-visible{outline:3px solid var(--ocre);outline-offset:2px}

/* ===== Bandeaux africains sur 3 rangs, façon tissu ===== */
.frise{position:relative;height:56px;background:url("images/frise-cacao.svg") repeat-x 0 50%/96px 28px;opacity:.82}
.frise::before,.frise::after{content:"";position:absolute;left:0;right:0;height:12px;background:url("images/frise-fine.svg") repeat-x 0 0/32px 12px}
.frise::before{top:0}
.frise::after{bottom:0;transform:scaleY(-1)}
@media (max-width:600px){.frise{height:50px;background-size:80px 23.33px}.frise::before,.frise::after{height:11.25px;background-size:30px 11.25px}}
@media (prefers-reduced-motion:no-preference){
  .frise{animation:frise-milieu 48s linear infinite}
  .frise::before,.frise::after{animation:frise-bords 48s linear infinite}
}
@keyframes frise-milieu{to{background-position-x:-960px}}
@keyframes frise-bords{to{background-position-x:960px}}

/* ===== Mention IA et photos, au-dessus de la signature ===== */
.signature-zone{flex-direction:column;align-items:center;gap:.9rem}
.mention-ia{position:relative;max-width:46rem;margin:0;text-align:center;font-size:.85rem;line-height:1.6;color:#d8cbbb;text-wrap:pretty}

/* ===== Cœur du logo au milieu de la carte de l'Afrique ===== */
.av-coeur path{fill:none;stroke:var(--rose);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.av-coeur path:first-child{fill:var(--rose-pale)}
@media (prefers-reduced-motion:no-preference){
  .av-coeur{opacity:0;animation:allume .8s ease 3.2s forwards}
}

/* ===== « Au cœur de Bouboulou » en arc, en relief façon bouton, autour de la carte ===== */
.scene3d svg.avant{overflow:visible}
.av-nom text{font-family:var(--titre);font-size:42px;text-anchor:middle;letter-spacing:.02em}
.av-nom .nom-ombre{fill:rgba(43,31,24,.16);filter:blur(3px)}
.av-nom .nom-relief{fill:var(--ocre);stroke:var(--ocre);stroke-width:1}
.av-nom .nom-face{fill:var(--cacao);stroke:var(--papier);stroke-width:.6;paint-order:stroke}
.av-nom{transform-box:fill-box;transform-origin:50% 100%}
@media (prefers-reduced-motion:no-preference){
  .av-nom{opacity:0;animation:nom-bouton 1.1s cubic-bezier(.2,.9,.3,1.35) 3.4s forwards}
}
@keyframes nom-bouton{0%{opacity:0;transform:translateY(-18px) scale(.7)}60%{opacity:1;transform:translateY(3px) scale(1.04)}100%{opacity:1;transform:none}}

/* ===== Bouton « Copier » à côté de l'adresse mail ===== */
.copier{font:600 .75rem var(--corps);letter-spacing:.04em;padding:.15rem .6rem;margin-left:.35rem;border-radius:999px;border:1px solid currentColor;background:transparent;color:inherit;cursor:pointer;vertical-align:middle;opacity:.85}
.copier:hover{opacity:1}
.copier:focus-visible{outline:2px solid var(--ocre);outline-offset:2px}

/* ===== Le singe s'accroche à une branche (plus de liane verticale) ===== */
.singe-zone{width:clamp(80px,9vw,130px)}
.singe{transform:none!important;animation:none!important}
.singe-corps{transform-box:view-box;transform-origin:86px 24px}
@media (prefers-reduced-motion:no-preference){
  .singe-corps{animation:balance-branche 3.6s ease-in-out infinite alternate}
}
@keyframes balance-branche{from{transform:rotate(9deg)}to{transform:rotate(-9deg)}}
@media (max-width:600px){.singe-zone{width:70px}}
.av-coeur path:first-child{fill:none}