/*
Theme Name: IPV-ONG
Theme URI: https://ipvong.org
Author: Ben Khaled BIO ADAM
Description: Thème bloc sur mesure de l'Initiative pour la Préservation de la Vie (IPV-ONG). Tout le contenu est en blocs natifs, modifiable dans l'éditeur.
Version: 1.1.0
Requires at least: 6.6
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ipv-ong
Tags: block-theme, full-site-editing, one-column
*/

/* ==========================================================================
   IPV-ONG — feuille de style unique (maquette ET thème WordPress)
   Registre relevé sur la référence « Ecoearth » : une seule sans-serif
   géométrique, quasi-monochrome, fond gris-blanc froid, grille 4 colonnes
   à filets visibles, angles droits, titres à gauche, petit texte / grands titres.

   Le balisage est celui que produisent les blocs natifs de Gutenberg
   (div.wp-block-group, figure.wp-block-image, div.wp-block-button…) :
   les classes des composants sont posées sur les blocs via className.
   Le CSS des blocs étant imprimé APRÈS cette feuille, toute surcharge
   d'un style de bloc est écrite plus spécifique, jamais simplement plus tard.
   ========================================================================== */

:root{
  --fond:#F5F5F5;      /* gris-blanc froid de la référence */
  --encre:#161616;     /* texte et titres */
  --graphite:#666666;  /* texte secondaire */
  --filet:#E3E3E3;     /* filets de grille */
  --nuit:#1B1B1B;      /* bandes sombres */
  --filet-nuit:#2D2D2D;
  --citron:#C9E13A;    /* l'unique accent */
  --g:clamp(16px, 3.3vw, 48px);  /* gouttière extérieure */
  --police:'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--police);
  font-size:16px;
  line-height:1.55;
  color:var(--encre);
  background-color:var(--fond);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-weight:400;letter-spacing:-.025em;text-wrap:balance;hyphens:none}
a{color:inherit;text-decoration:none}

/* Gutenberg ajoute un espacement automatique entre frères : coupé à la
   source dans theme.json (blockGap 0px), et ici en filet à spécificité nulle. */
:where(.wp-block-group)>:where(*),:where(.wp-block-buttons){margin-block:0}
figure.wp-block-image{margin:0}

/* --- La trame : 5 filets verticaux sur les bords des 4 colonnes --- */
body,.trame{
  --l:var(--filet);
  background-image:
    linear-gradient(var(--l),var(--l)),
    linear-gradient(var(--l),var(--l)),
    linear-gradient(var(--l),var(--l)),
    linear-gradient(var(--l),var(--l)),
    linear-gradient(var(--l),var(--l));
  background-size:1px 100%;
  background-repeat:no-repeat;
  background-position:
    var(--g) 0,
    calc(var(--g) + (100% - 2 * var(--g)) * .25) 0,
    50% 0,
    calc(var(--g) + (100% - 2 * var(--g)) * .75) 0,
    calc(100% - var(--g)) 0;
}

/* --- Grille 4 colonnes, sans gouttière interne : les photos tombent sur les filets --- */
.g4{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  padding-inline:var(--g);
}

.etiquette{font-size:12.5px;letter-spacing:.02em;color:var(--graphite)}
.etiquette::before{content:"[ "}
.etiquette::after{content:" ]"}

.petit{font-size:15.5px;line-height:1.6;color:var(--graphite);max-width:36ch}

/* Photos : le cadrage est porté par la figure, l'image la remplit. */
.wp-block-image.photo,.wp-block-image.heros-photo,.wp-block-image.heros-image{margin:0;overflow:hidden}
.wp-block-image.photo img,
.wp-block-image.heros-photo img{width:100%;height:100%;object-fit:cover}

/* ==========================================================================
   Boutons — pleins, impossibles à manquer : aplat d'encre et carré citron
   pour la flèche. Sur fond sombre, les rôles s'inversent.
   La classe de core/button atterrit sur le conteneur : on stylise le lien.
   ========================================================================== */
body .wp-block-buttons.boutons{display:flex;flex-direction:column;align-items:stretch;gap:12px}
.wp-block-button.lien-cadre{display:block;width:100%}
.wp-block-button.lien-cadre .wp-block-button__link{
  --h:54px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  width:100%;height:var(--h);margin:0;padding:0 0 0 18px;
  border:0;border-radius:0;box-shadow:none;
  background:var(--encre);color:#fff;
  font-family:var(--police);font-size:15px;font-weight:500;line-height:1.2;letter-spacing:-.005em;
  text-align:left;text-decoration:none;white-space:nowrap;
  transition:background .25s;
}
.wp-block-button.lien-cadre .wp-block-button__link::after{
  content:"→";flex:none;
  display:flex;align-items:center;justify-content:center;
  width:var(--h);height:var(--h);
  background:var(--citron);color:var(--encre);
  font-size:19px;
  transition:width .25s;
}
.wp-block-button.lien-cadre .wp-block-button__link:hover{background:#000}
.wp-block-button.lien-cadre .wp-block-button__link:hover::after{width:calc(var(--h) + 14px)}
.sombre .wp-block-button.lien-cadre .wp-block-button__link{background:var(--citron);color:var(--encre)}
.sombre .wp-block-button.lien-cadre .wp-block-button__link::after{background:var(--encre);color:var(--citron)}
.sombre .wp-block-button.lien-cadre .wp-block-button__link:hover{background:#D8EE52}

/* ==========================================================================
   En-tête
   ========================================================================== */
header.wp-block-template-part{position:sticky;top:var(--wp-admin--admin-bar--height,0px);z-index:40}
.entete{
  background-color:var(--fond);
  align-items:center;
  height:64px;
  border-bottom:1px solid transparent;
  transition:border-color .3s;
}
.entete.est-defile{border-bottom-color:var(--filet)}
.marque{display:flex;align-items:center;gap:10px}
.marque .wp-block-site-logo img{width:34px;height:34px}
.marque .wp-block-site-title{font-size:17px;font-weight:500;letter-spacing:-.01em;line-height:1}
.marque .wp-block-site-title a{color:inherit;text-decoration:none}

.wp-block-navigation .wp-block-navigation__container{margin:0;padding:0;list-style:none}
.wp-block-navigation.menu{grid-column:2 / 4;padding-left:2px}
.wp-block-navigation.menu .wp-block-navigation__container{display:flex;flex-wrap:nowrap;gap:clamp(14px,2vw,30px)}
.wp-block-navigation.menu .wp-block-navigation-item__content{
  display:block;position:relative;padding:4px 0;
  font-size:15px;color:var(--graphite);text-decoration:none;transition:color .2s;
}
.wp-block-navigation.menu .wp-block-navigation-item__content:hover,
.wp-block-navigation.menu .current-menu-item>.wp-block-navigation-item__content,
.wp-block-navigation.menu .actif>.wp-block-navigation-item__content{color:var(--encre)}
.wp-block-navigation.menu .current-menu-item>.wp-block-navigation-item__content::before,
.wp-block-navigation.menu .actif>.wp-block-navigation-item__content::before{
  content:"";position:absolute;left:-11px;top:50%;width:5px;height:5px;margin-top:-2px;
  border-radius:50%;background:var(--citron);
}
/* Panneau mobile de core/navigation : forcé aux couleurs du site
   (le CSS du bloc, imprimé après cette feuille, le pose sinon à sa façon). */
.wp-block-navigation.menu .wp-block-navigation__responsive-container-open{color:var(--encre)}
.wp-block-navigation.menu .wp-block-navigation__responsive-container-open svg{width:30px;height:30px}
.wp-block-navigation.menu .wp-block-navigation__responsive-container.is-menu-open{
  background-color:var(--fond)!important;color:var(--encre)!important;
  padding:24px var(--g)!important;
}
.wp-block-navigation.menu .is-menu-open .wp-block-navigation__container{flex-direction:column;gap:6px;align-items:flex-start}
.wp-block-navigation.menu .is-menu-open .wp-block-navigation-item__content{font-size:30px;color:var(--encre);letter-spacing:-.02em}

.entete-don{justify-self:end;width:min(100%, 230px)}
.entete-don .wp-block-button.lien-cadre .wp-block-button__link{--h:44px}

/* ==========================================================================
   Héros (accueil) et tête des pages internes
   ========================================================================== */
.heros{padding-top:clamp(40px,5vw,72px)}
.heros-haut{align-items:center}
.wp-block-image.heros-photo{grid-column:1;aspect-ratio:7 / 5}
.mot-geant{
  grid-column:2 / 5;
  justify-self:end;
  font-size:clamp(58px, 15.6vw, 250px);
  font-weight:500;
  line-height:.86;
  letter-spacing:-.055em;
  margin-right:-.04em;
  white-space:nowrap;
}
.mot-geant.mot-long{font-size:clamp(48px,12.8vw,205px)}
.heros-bas{
  margin-top:clamp(56px,8vw,128px);
  padding-bottom:clamp(32px,3.6vw,52px);
  align-items:end;
}
.heros-titre{
  grid-column:1 / 3;
  font-size:clamp(32px,3.9vw,58px);
  line-height:1.1;
  letter-spacing:-.03em;
  padding-right:24px;
}
.heros-cote{grid-column:4;display:flex;flex-direction:column;gap:14px}
.preuve{display:flex;align-items:center;gap:10px}
.visages{display:flex}
.visages .wp-block-image{margin:0 0 0 -8px}
.visages .wp-block-image:first-child{margin-left:0}
.visages .wp-block-image img{width:34px;height:34px;border-radius:50%;border:2px solid var(--fond);object-fit:cover}
.preuve-note{font-size:13px;line-height:1.35}
.preuve-note strong{font-weight:500;display:block;font-size:14px}
.preuve-note strong::before{content:"● ";color:var(--citron);font-size:10px;vertical-align:1px}

.wp-block-image.heros-image img{width:100%;height:clamp(340px,50vw,780px);object-fit:cover;object-position:50% 70%}

/* Pages internes : même composition */
.page-tete .heros-bas{margin-top:clamp(48px,6vw,96px)}

/* ==========================================================================
   Bande défilante
   ========================================================================== */
.defile{
  background:var(--fond);
  border-bottom:1px solid var(--filet);
  overflow:hidden;
  padding-block:clamp(18px,2.2vw,30px);
}
.defile-piste{display:flex;width:max-content;animation:defile 46s linear infinite}
.defile:hover .defile-piste{animation-play-state:paused}
.defile-piste p{
  display:flex;align-items:center;white-space:nowrap;
  font-size:clamp(28px,3.4vw,52px);
  letter-spacing:-.03em;
  line-height:1;
}
.defile-piste p::after{
  content:"";
  width:.3em;height:.3em;border-radius:50%;
  background:var(--citron);
  margin-inline:.8em;
}
@keyframes defile{to{transform:translateX(-50%)}}

/* ==========================================================================
   Sections, têtes de section
   ========================================================================== */
.section{padding-top:clamp(80px,9vw,140px)}
.tete{row-gap:14px;align-items:end}
.tete .etiquette{grid-column:1 / -1}
.tete h2{
  grid-column:1 / 3;
  font-size:clamp(28px,3.1vw,46px);
  line-height:1.12;
  padding-right:24px;
}
.tete .petit,.tete .boutons{grid-column:4}

/* À propos (accueil) */
.mosaique-apropos{margin-top:clamp(36px,4vw,60px);grid-template-rows:auto auto}
.chiffre{
  display:flex;flex-direction:column;justify-content:space-between;
  min-height:150px;padding:0 14px 14px 0;
}
.chiffre-legende{align-self:flex-end;text-align:right;font-size:12.5px;line-height:1.35;color:var(--graphite);max-width:15ch}
.chiffre-valeur{font-size:clamp(40px,4vw,60px);line-height:1;letter-spacing:-.04em}
.chiffre-1{grid-column:1;grid-row:1}
.chiffre-2{grid-column:2;grid-row:1}
.mosaique-apropos .photo-a{grid-column:1 / 3;grid-row:2;aspect-ratio:16 / 9}
.mosaique-apropos .photo-b{grid-column:3 / 5;grid-row:1 / 3}

/* ==========================================================================
   Mission · Vision · Valeurs (onglets — toutes les variantes sont dans la page)
   ========================================================================== */
.mvv{grid-template-rows:auto auto}
.mvv-gauche{grid-column:1;grid-row:1;display:flex;flex-direction:column;gap:26px}
.onglets{display:flex;flex-direction:column;gap:6px}
.onglet{
  font-size:15.5px;color:#9A9A9A;cursor:pointer;width:max-content;
  display:flex;align-items:center;gap:8px;transition:color .2s;
}
.onglet::before{content:"";width:6px;height:6px;border-radius:50%;background:transparent;transition:background .2s}
.onglet:hover,.onglet.est-actif{color:var(--encre)}
.onglet.est-actif::before{background:var(--citron)}
.mvv-textes{grid-column:2 / 5;grid-row:1;position:relative;z-index:1}
.mvv-texte{display:none}
.mvv-texte.est-actif{display:block;animation:apparait .45s ease}
.mvv-texte,.grand-texte{
  font-size:clamp(22px,2.25vw,34px);
  line-height:1.3;
  letter-spacing:-.02em;
  max-width:20.5em;
}
@keyframes apparait{from{opacity:0;transform:translateY(8px)}}
.mvv .photo-a{grid-column:1;grid-row:2;align-self:start;margin-top:clamp(40px,5vw,80px);aspect-ratio:3 / 2}
.mvv .photo-b{grid-column:2 / 4;grid-row:2;margin-top:clamp(70px,7.5vw,110px);aspect-ratio:2 / 1}
.mvv .photo-c{
  grid-column:4;grid-row:2;align-self:start;
  margin-top:clamp(-46px,-3vw,-26px);  /* remonte dans la zone du texte */
  aspect-ratio:3 / 2;position:relative;z-index:2;
}

/* ==========================================================================
   Cartes (domaines, actions)
   ========================================================================== */
.domaines-grille{margin-top:clamp(24px,2.6vw,36px);align-items:stretch}
.carte{display:flex;flex-direction:column}
.carte-large{grid-column:span 2}
.carte .wp-block-image.photo{height:clamp(260px,27vw,420px);background:#E9E9E9}
.carte-legende{position:relative;padding:12px 40px 0 4px}
.carte-legende::after{content:"+";position:absolute;right:14px;top:10px;font-size:19px;line-height:1;font-weight:300}
.carte-legende h3{font-size:16.5px;font-weight:500;letter-spacing:-.01em}
.carte-legende p{font-size:13.5px;color:var(--graphite);line-height:1.45;margin-top:3px;max-width:52ch}
.carte-priorite h3::after{
  content:"Priorité";margin-left:10px;
  font-size:11.5px;font-weight:500;letter-spacing:.02em;
  padding:3px 8px;background:var(--citron);color:var(--encre);vertical-align:2px;
}

/* ==========================================================================
   Bandes sombres (projet en cours, newsletter) et pied de page
   ========================================================================== */
.sombre{--filet:var(--filet-nuit);background-color:var(--nuit);color:#F2F2F2}
.sombre .etiquette{color:var(--citron)}
.sombre .petit{color:#A6A6A6}
.sombre h2,.sombre h3{color:#fff}

.projet{margin-top:clamp(90px,9vw,140px);padding-top:clamp(56px,5.6vw,84px)}
.projet-corps{margin-top:clamp(28px,3vw,44px);grid-template-rows:auto auto}
.projet-infos{grid-column:1 / 3;grid-row:1;padding-right:24px;padding-bottom:clamp(48px,5vw,72px);display:flex;flex-direction:column;gap:30px}
.projet-chiffres{font-size:14px;line-height:1.7;color:#A9A9A9}
.projet-chiffres strong{color:var(--citron);font-weight:400}
ul.axes{margin:0;padding:0;list-style:none;counter-reset:axe}
ul.axes li{
  counter-increment:axe;
  display:grid;grid-template-columns:44px 1fr;align-items:baseline;
  padding:14px 0;border-top:1px solid var(--filet-nuit);
  font-size:clamp(16px,1.35vw,20px);letter-spacing:-.01em;
}
ul.axes li::before{content:counter(axe,decimal-leading-zero);font-size:12.5px;color:#8E8E8E}
ul.axes li:last-child{border-bottom:1px solid var(--filet-nuit)}
.projet-photo{grid-column:3 / 5;grid-row:1 / 3}
.espece{grid-row:2;display:flex;flex-direction:column}
.espece-1{grid-column:1}
.espece-2{grid-column:2}
.espece .wp-block-image.photo{aspect-ratio:1 / 1}
.espece-legende{padding:14px 14px 22px 4px}
.espece-legende h3{font-size:16.5px;font-weight:500;letter-spacing:-.01em}
.espece-legende p{font-size:13.5px;color:#9C9C9C;margin-top:2px}

/* Agir */
.agir{padding-block:clamp(90px,9vw,140px)}
.agir h2{
  grid-column:1 / 4;
  font-size:clamp(30px,3.6vw,54px);
  line-height:1.1;
  padding-right:24px;
}
.agir .boutons{grid-column:4;align-self:end}

/* Pied de page */
.pied{padding-top:clamp(72px,7vw,110px);color:#EDEDED}
.pied-haut{row-gap:36px;padding-bottom:clamp(40px,4vw,64px)}
.pied-asso{grid-column:1 / 3;display:flex;flex-direction:column;align-items:flex-start;gap:20px;padding-right:24px}
.pied-asso .wp-block-site-logo img{width:76px;height:76px;padding:8px;background:var(--fond)}
.pied-col{display:flex;flex-direction:column;gap:8px;font-size:15px}
.pied-col .etiquette{margin-bottom:8px}
.pied-col p,.pied-col a{color:#A6A6A6}
.pied-col a{transition:color .2s}
.pied-col a:hover{color:#fff}
.wp-block-navigation.pied-menu .wp-block-navigation__container{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.wp-block-navigation.pied-menu .wp-block-navigation-item__content{display:block;padding:0;font-size:15px;color:#A6A6A6;text-decoration:none;transition:color .2s}
.wp-block-navigation.pied-menu .wp-block-navigation-item__content:hover{color:#fff}
.pied-geant{
  padding-inline:var(--g);
  font-size:clamp(64px,24vw,400px);
  font-weight:500;
  line-height:.74;
  letter-spacing:-.06em;
  white-space:nowrap;
  overflow:hidden;
  padding-top:.04em;
  color:var(--fond);
}
.pied-bas{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:22px var(--g) 26px;
  border-top:1px solid var(--filet-nuit);
  margin-top:clamp(18px,2vw,28px);
  font-size:13px;color:#8E8E8E;
}

/* ==========================================================================
   Pages internes : lignes, grands textes, valeurs, zones
   ========================================================================== */
.lignes{margin-top:clamp(32px,3.6vw,52px)}
.ligne{padding-block:clamp(22px,2.4vw,34px);border-top:1px solid var(--filet);align-items:baseline}
.ligne:last-child{border-bottom:1px solid var(--filet)}
.sombre .ligne{border-color:var(--filet-nuit)}
.ligne-etiquette{grid-column:1;font-size:12.5px;color:var(--graphite);padding-right:16px}
.ligne-titre{grid-column:2;font-size:clamp(20px,1.8vw,27px);line-height:1.2;padding-right:24px}
.ligne-texte{grid-column:3 / 5;font-size:16px;line-height:1.6;color:var(--graphite);max-width:60ch}
.grand-ligne .grand-texte{grid-column:2 / 5}

.valeurs{margin-top:clamp(32px,3.6vw,52px)}
.valeur{padding:22px 24px 0 0;border-top:1px solid var(--encre);display:flex;flex-direction:column;gap:10px}
.valeur-num{font-size:12.5px;color:var(--graphite)}
.valeur h3{font-size:clamp(22px,2vw,30px);line-height:1.1}
.valeur p:last-child{font-size:15px;line-height:1.55;color:var(--graphite)}

.zones{margin-top:clamp(32px,3.6vw,52px);align-items:start}
.zones .etiquette{grid-column:1}
.zone{display:flex;flex-direction:column;gap:6px;padding-right:24px}
.zone h3{font-size:clamp(28px,2.8vw,42px);line-height:1}
.zone p{font-size:14px;color:var(--graphite)}

.actions-grille{margin-top:clamp(24px,2.6vw,36px)}

/* Partenaires — chaque logo est un bloc image de la médiathèque, posé sur une tuile blanche */
.logos{margin-top:clamp(24px,2.6vw,36px);align-items:stretch}
.wp-block-image.logo-partenaire{margin:0;display:flex;flex-direction:column}
.wp-block-image.logo-partenaire img{
  width:100%;height:clamp(150px,13vw,200px);
  padding:clamp(22px,2.4vw,36px);
  object-fit:contain;background:#fff;
}
.logo-partenaire .wp-element-caption{margin:0;padding:12px 16px 0 4px;font-size:14px;line-height:1.4;color:var(--graphite);text-align:left}
.logo-appel{
  display:flex;flex-direction:column;gap:10px;justify-content:flex-end;
  padding:24px;border:1px solid #CFCFCF;min-height:clamp(150px,13vw,200px);
}
.logo-appel-titre{font-size:clamp(20px,1.8vw,26px);line-height:1.15;letter-spacing:-.02em}
.logo-appel p:not(.logo-appel-titre){font-size:14px;line-height:1.5;color:var(--graphite)}
.logo-appel .boutons{margin-top:6px}
.partenaire-ligne{align-items:center}
.partenaire-ligne .logo-partenaire{grid-column:1;padding-right:24px}
.partenaire-ligne .logo-partenaire img{height:clamp(120px,10vw,160px)}
.partenariat{padding-bottom:clamp(90px,9vw,140px);scroll-margin-top:64px}
.tete .petit + .boutons{grid-row:3;margin-top:14px}

/* Galerie — toutes les images sont dans la page, le script bascule une classe */
.filtres{margin-top:clamp(28px,3vw,44px);align-items:center;row-gap:12px}
.filtres-liste{grid-column:2 / 5;display:flex;flex-wrap:wrap;gap:8px}
.filtre{
  font-size:15px;padding:10px 16px;border:1px solid #CFCFCF;cursor:pointer;
  transition:background .2s,color .2s,border-color .2s;
}
.filtre:hover{border-color:var(--encre)}
.filtre.est-actif{background:var(--encre);color:#fff;border-color:var(--encre)}
.galerie-grille{margin-top:20px;grid-auto-flow:dense;padding-bottom:clamp(80px,8vw,120px)}
.galerie-grille .wp-block-image{margin:0;display:flex;flex-direction:column}
.galerie-grille .wp-block-image img{width:100%;aspect-ratio:4 / 3;height:auto;object-fit:cover}
.galerie-grille .g-large{grid-column:span 2;grid-row:span 2}
/* La grande vignette ne doit pas imposer sa hauteur naturelle aux rangées :
   l'image et sa légende sortent du flux et remplissent les deux rangées. */
.galerie-grille .wp-block-image.g-large{position:relative;min-height:100%}
.galerie-grille .wp-block-image.g-large img{position:absolute;top:0;left:0;width:100%;height:calc(100% - 46px);aspect-ratio:auto}
.galerie-grille .wp-block-image.g-large .wp-element-caption{position:absolute;left:0;right:0;bottom:0;height:46px}
.galerie-grille .wp-element-caption{margin:0;padding:10px 14px 18px 4px;font-size:13px;line-height:1.4;color:var(--graphite);text-align:left}
.galerie-grille.montre-env .wp-block-image:not(.cat-env),
.galerie-grille.montre-com .wp-block-image:not(.cat-com),
.galerie-grille.montre-edu .wp-block-image:not(.cat-edu){display:none}
.galerie-grille[class*="montre-"] .g-large{grid-column:span 1;grid-row:span 1}
.galerie-grille[class*="montre-"] .wp-block-image.g-large img,
.galerie-grille[class*="montre-"] .wp-block-image.g-large .wp-element-caption{position:static;height:auto}
.galerie-grille[class*="montre-"] .wp-block-image.g-large img{aspect-ratio:4 / 3}

/* Nous soutenir */
.soutiens{margin-top:clamp(32px,3.6vw,52px);align-items:stretch}
.soutien{display:flex;flex-direction:column;gap:12px;padding:24px 24px 28px 0;border-top:1px solid var(--encre);scroll-margin-top:90px}
.soutien-num{font-size:12.5px;color:var(--graphite)}
.soutien h3{font-size:clamp(24px,2.2vw,32px);line-height:1.1}
.soutien p:not(.soutien-num){font-size:15.5px;line-height:1.6;color:var(--graphite);flex:1}
.soutien .boutons{margin-top:8px}
.soutiens .photo{aspect-ratio:3 / 4}
.newsletter{margin-top:clamp(90px,9vw,140px);padding-block:clamp(56px,5.6vw,84px)}
.newsletter-form{margin-top:clamp(28px,3vw,40px)}
.newsletter-form .wpcf7,.newsletter-form .formulaire{grid-column:3 / 5}

/* Gabarits d'articles (le site n'en publie pas encore) */
.liste-articles-requete,.article-seul>*{grid-column:1 / -1}
.liste-articles .wp-block-post-title{margin-top:28px;letter-spacing:-.02em}
.article-corps{margin-top:32px;max-width:70ch}
.article-corps p{margin-block:0 1em}

/* Contact */
.contact-corps{align-items:start;padding-bottom:clamp(80px,8vw,120px)}
.coordonnees{grid-column:1;display:flex;flex-direction:column;gap:10px;padding-right:24px}
.coordonnees .etiquette{margin-bottom:6px}
.coordonnees p:not(.etiquette){font-size:16px;line-height:1.5}
.coordonnees a{border-bottom:1px solid #CFCFCF;transition:border-color .2s}
.coordonnees a:hover{border-color:var(--encre)}
.contact-formulaire{grid-column:2 / 5}

/* ==========================================================================
   Formulaires (Contact Form 7 — gabarit écrit avec les classes du thème)
   ========================================================================== */
.wpcf7 form{margin:0}
.champs{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px}
.champ{display:flex;flex-direction:column;gap:7px}
.champ-large{grid-column:1 / -1}
.champ label{font-size:12.5px;color:var(--graphite);letter-spacing:.02em}
.wpcf7-form-control-wrap{display:block}
.wpcf7 input[type="text"],.wpcf7 input[type="email"],.wpcf7 input[type="tel"],.wpcf7 select,.wpcf7 textarea{
  display:block;width:100%;height:54px;padding:0 16px;margin:0;
  font:inherit;font-size:16px;color:var(--encre);
  background:transparent;border:1px solid #CFCFCF;border-radius:0;
  -webkit-appearance:none;appearance:none;transition:border-color .2s;
}
.wpcf7 select{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23161616' stroke-width='1.6'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 14px center / 18px no-repeat}
.wpcf7 textarea{height:170px;padding:14px 16px;resize:vertical}
.wpcf7 input:focus,.wpcf7 select:focus,.wpcf7 textarea:focus{outline:none;border-color:var(--encre)}
.envoi{margin-top:22px;display:flex;align-items:center;gap:12px}
.wpcf7 input.wpcf7-submit{
  display:block;width:100%;max-width:360px;height:54px;padding:0 76px 0 18px;margin:0;
  font:inherit;font-size:15px;font-weight:500;text-align:left;color:#fff;cursor:pointer;
  border:0;border-radius:0;-webkit-appearance:none;appearance:none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23161616' stroke-width='1.8'%3E%3Cpath d='M5 12h14m-6-6 6 6-6 6'/%3E%3C/svg%3E") right 18px center / 18px no-repeat,
    linear-gradient(var(--citron),var(--citron)) right / 54px 100% no-repeat,
    var(--encre);
  transition:background-color .25s;
}
.wpcf7 input.wpcf7-submit:hover{background-color:#000}
.wpcf7-spinner{margin:0}
.wpcf7-not-valid-tip{display:block;margin-top:6px;font-size:12.5px;color:#B3261E}
.wpcf7 form .wpcf7-response-output{margin:20px 0 0;padding:14px 16px;border:1px solid var(--encre);font-size:14px}
.wpcf7 form.init .wpcf7-response-output{display:none}
/* Variante sombre : la newsletter */
.sombre .wpcf7 input[type="email"]{color:#fff;border-color:#4A4A4A}
.sombre .wpcf7 input[type="email"]::placeholder{color:#8E8E8E}
.sombre .wpcf7 input[type="email"]:focus{border-color:var(--citron)}
.sombre .wpcf7 input.wpcf7-submit{
  color:var(--encre);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9E13A' stroke-width='1.8'%3E%3Cpath d='M5 12h14m-6-6 6 6-6 6'/%3E%3C/svg%3E") right 18px center / 18px no-repeat,
    linear-gradient(var(--encre),var(--encre)) right / 54px 100% no-repeat,
    var(--citron);
}
.sombre .wpcf7 form .wpcf7-response-output{border-color:var(--citron)}
.newsletter-champs{display:flex;flex-direction:column;gap:12px;position:relative}
/* l'indicateur d'envoi de CF7 ne doit pas ajouter une rangée sous le bouton */
.newsletter-champs .wpcf7-spinner{position:absolute;right:12px;bottom:15px;margin:0}
.wpcf7 .newsletter-champs input.wpcf7-submit{max-width:none}

:where(a,[tabindex],input,select,textarea):focus-visible{outline:2px solid var(--encre);outline-offset:3px}
.sombre :where(a,[tabindex]):focus-visible{outline-color:var(--citron)}

/* ==========================================================================
   Tablette
   ========================================================================== */
@media (max-width:1024px){
  body .wp-block-buttons.entete-don{display:none}
  .wp-block-navigation.menu{grid-column:2 / 5;justify-self:end}
  .wp-block-navigation.menu .wp-block-navigation__container{gap:16px}
  .wp-block-navigation.menu .wp-block-navigation-item__content{font-size:14px}
  .heros-cote{grid-column:3 / 5;padding-left:24px}
  .tete .petit{grid-column:3 / 5;padding-left:24px}
  .tete .boutons{grid-column:3 / 5;margin-left:24px}
  .ligne-titre{grid-column:2 / 5}
  .ligne-texte{grid-column:2 / 5;margin-top:10px}
}

/* ==========================================================================
   Mobile : 2 colonnes, filets sur les seuls bords
   ========================================================================== */
@media (max-width:760px){
  body,.trame{
    background-position:
      var(--g) 0, var(--g) 0, var(--g) 0, calc(100% - var(--g)) 0, calc(100% - var(--g)) 0;
  }
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .entete.g4{grid-template-columns:auto 1fr;height:58px}
  .wp-block-navigation.menu{grid-column:2}
  .wp-block-navigation.menu .wp-block-navigation__container{gap:12px}
  .wp-block-navigation.menu .wp-block-navigation-item__content{font-size:13px}

  .wp-block-image.heros-photo{grid-column:1 / 3;order:2;margin-top:24px;aspect-ratio:16 / 9}
  .mot-geant{grid-column:1 / 3;justify-self:start;font-size:clamp(52px,19.5vw,140px)}
  .mot-geant.mot-long{font-size:clamp(44px,15.5vw,112px)}
  .heros-bas{margin-top:36px;row-gap:28px}
  .heros-titre,.heros-cote{grid-column:1 / 3;padding:0}
  .petit{max-width:none}

  .tete h2{grid-column:1 / 3;padding:0}
  .tete .petit,.tete .boutons{grid-column:1 / 3;padding:0;margin:6px 0 0}
  .chiffre{min-height:120px}
  .mosaique-apropos .photo-a{grid-column:1 / 3;grid-row:2}
  .mosaique-apropos .photo-b{grid-column:1 / 3;grid-row:3;aspect-ratio:4 / 3}
  .logos .logo-partenaire,.logo-appel{grid-column:span 1}
  .logo-appel{grid-column:1 / 3;margin-top:20px}
  .partenaire-ligne .logo-partenaire{grid-column:1 / 3;padding:0;margin-bottom:12px}
  .tete .petit + .boutons{grid-row:auto}

  .mvv-gauche,.mvv-textes{grid-column:1 / 3}
  .mvv-gauche{flex-direction:row;justify-content:space-between;align-items:flex-start}
  .mvv-textes{grid-row:2;margin-top:24px}
  .mvv .photo-a{grid-column:1;grid-row:3;margin-top:36px}
  .mvv .photo-c{grid-column:2;grid-row:3;margin-top:84px}
  .mvv .photo-b{grid-column:1 / 3;grid-row:4;margin-top:0}

  .carte,.carte-large{grid-column:1 / 3}
  .carte + .carte{margin-top:28px}
  .carte .wp-block-image.photo{height:auto;aspect-ratio:4 / 3}

  .projet-infos{grid-column:1 / 3;padding-right:0}
  .espece{grid-row:2}
  .projet-photo{grid-column:1 / 3;grid-row:3;aspect-ratio:4 / 3}
  .agir h2,.agir .boutons{grid-column:1 / 3;padding:0}
  .agir .boutons{margin-top:28px}
  .pied-asso{grid-column:1 / 3;padding:0}
  .pied-col{grid-column:span 1}
  .pied-geant{font-size:clamp(56px,23vw,200px)}

  .ligne-etiquette,.ligne-titre,.ligne-texte,.grand-ligne .grand-texte{grid-column:1 / 3;padding:0}
  .ligne-titre,.grand-ligne .grand-texte{margin-top:8px}
  .valeur{grid-column:span 1;padding-bottom:28px}
  .zones .etiquette{grid-column:1 / 3;margin-bottom:12px}
  .zone{grid-column:span 1;padding-bottom:24px}
  .filtres-liste{grid-column:1 / 3}
  .galerie-grille .wp-block-image{grid-column:span 1}
  .galerie-grille .g-large{grid-column:span 2;grid-row:span 1}
  .galerie-grille .wp-block-image.g-large img,
  .galerie-grille .wp-block-image.g-large .wp-element-caption{position:static;height:auto}
  .galerie-grille .wp-block-image.g-large img{aspect-ratio:4 / 3}
  .soutien{grid-column:1 / 3}
  .soutiens .photo{grid-column:1 / 3;aspect-ratio:4 / 3}
  .newsletter-form .wpcf7,.newsletter-form .formulaire{grid-column:1 / 3}
  .coordonnees,.contact-formulaire{grid-column:1 / 3;padding:0}
  .contact-formulaire{margin-top:40px}
  .champs{grid-template-columns:1fr}
}

@media (min-width:601px) and (max-width:760px){
  .marque .wp-block-site-title{display:none}
}

/* Sous 600 px, core/navigation passe en panneau : seul le bouton d'ouverture reste. */
@media (max-width:600px){
  .wp-block-navigation.menu{justify-self:end}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}