/* ============================================================
   La Cerise sur le Quartier — feuille de style
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── POLICES ──────────────────────────────────────────────
   SS Soapy Hands — © 2020 Sara Linsley, sous SIL Open Font
   License 1.1 (copie dans fonts/OFL.txt, livrée avec le site
   comme l'exige la licence). Hébergée ici : aucune dépendance
   à un service externe.

   Une seule graisse (Medium) est embarquée. La plage 100-900
   la déclare pour toutes les graisses, ce qui évite que le
   navigateur fabrique un faux gras sur les titres en 400. */
@font-face {
  font-family: 'SS Soapy Hands';
  src: url('fonts/ss-soapy-hands-medium.woff2?v=4d36d25f') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Titres, hero, chiffres — la police d'accent. */
  --police-titres: 'SS Soapy Hands', 'EB Garamond', serif;
  /* Texte courant. */
  --police-texte:  'Jost', sans-serif;

  --vert:       #3a5a35;
  --vert-fonce: #2e4829;
  --vert-pale:  #e8ede4;
  --terre:      #8b6348;
  --creme:      #f7f3ee;
  --texte:      #2c2c2c;
  /* Texte secondaire : contraste 4,6:1 sur --creme (WCAG AA). */
  --gris:       #6f6f63;
  /* Décoratif uniquement (bordures, placeholders) — trop clair pour du texte. */
  --gris-leger: #9a9a8e;

  /* Rayon des angles arrondis. Partagé par le bouton et l'encart des
     crédits, pour qu'ils ne dérivent pas l'un de l'autre. Le reste du site
     reste anguleux (2–3 px) : cet arrondi est un accent, pas une règle. */
  --rayon: 10px;
}

/* scroll-padding-top compense la barre de navigation, qui est en position
   fixed et recouvrait jusqu'ici le haut de la section visée : on atterrissait
   sur une section dont le label était caché sous la barre. Posé sur le
   conteneur de défilement plutôt qu'en scroll-margin sur chaque section, il
   couvre d'un coup toutes les ancres — les quatre du menu, le #hero du logo,
   le #main du lien d'évitement — et toute ancre ajoutée plus tard en hérite.
   6rem = 96 px pour une barre de 90 : six pixels d'air. */
html { scroll-behavior: smooth; scroll-padding-top: 6rem; }

body {
  font-family: var(--police-texte);
  font-weight: 300;
  color: var(--texte);
  background: var(--creme);
  font-size: 17px;
  line-height: 1.75;
}

/* ── ACCESSIBILITÉ ── */

/* Visible uniquement lorsqu'il reçoit le focus clavier. */
.skip-link {
  position: absolute; top: 0; left: 0; z-index: 200;
  transform: translateY(-120%);
  background: var(--vert); color: #fff;
  padding: .75rem 1.25rem;
  font-size: .8rem; letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none;
  transition: transform .2s;
}
.skip-link:focus { transform: translateY(0); }

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--vert);
  outline-offset: 3px;
  border-radius: 2px;
}
/* Sur fond sombre (hero, section verger), un contour clair reste lisible. */
nav:not(.scrolled):not(.open) a:focus-visible,
nav:not(.scrolled):not(.open) button:focus-visible,
#verger a:focus-visible {
  outline-color: #fff;
}

/* ── NAV ── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.2rem 3rem;
  background: transparent;
  transition: background .4s, box-shadow .4s;
}
nav.scrolled, nav.open {
  background: rgba(247,243,238,.95);
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
/* Deux fichiers superposes : la version creme sur le hero, la version
   foncee une fois la barre opaque. Le fondu suit la transition du fond. */
.nav-logo {
  position: relative;
  display: block;
  line-height: 0;
  text-decoration: none;
}
.nav-logo-img {
  height: 52px; width: auto;
  display: block;
  transition: opacity .4s;
}
.nav-logo-fonce { position: absolute; top: 0; left: 0; opacity: 0; }
nav.scrolled .nav-logo-clair,
nav.open .nav-logo-clair { opacity: 0; }
nav.scrolled .nav-logo-fonce,
nav.open .nav-logo-fonce { opacity: 1; }

.nav-right { display: flex; align-items: center; gap: 2.5rem; }
.nav-links { list-style: none; display: flex; align-items: center; gap: 2.5rem; }

.nav-links a {
  text-decoration: none;
  font-size: .8rem;
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
  transition: opacity .2s, color .4s;
}
.nav-links a:hover { opacity: 1; }
nav.scrolled .nav-links a,
nav.open .nav-links a { color: var(--texte); opacity: .7; }
nav.scrolled .nav-links a:hover,
nav.open .nav-links a:hover { opacity: 1; }

.nav-socials { display: flex; align-items: center; gap: 1rem; }
.nav-social-icon {
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.75);
  transition: opacity .2s, color .4s;
  text-decoration: none;
}
.nav-social-icon:hover { opacity: 1; }
nav.scrolled .nav-social-icon,
nav.open .nav-social-icon { color: var(--texte); opacity: .55; }
nav.scrolled .nav-social-icon:hover,
nav.open .nav-social-icon:hover { opacity: 1; }
.nav-social-icon svg { width: 16px; height: 16px; fill: currentColor; }

/* Compensation optique — le logo Pixelfed est un disque plein, celui
   d'Instagram un simple contour. À taille égale le plein dépose beaucoup
   plus d'encre et accroche l'œil ; on le retient d'un cran pour que les
   deux pèsent pareil. Porte sur le <svg> et non sur le lien, afin de se
   combiner avec les opacités d'état (survol, barre défilée) au lieu
   d'entrer en conflit avec elles. Vaut pour la nav et le bloc contact. */
.icone-pleine svg { opacity: .78; }

/* Bouton hamburger — masqué au-dessus de 768px (voir « RESPONSIVE »). */
.nav-toggle {
  display: none;
  flex-direction: column; justify-content: center;
  gap: 5px;
  width: 30px; height: 30px;
  padding: 0;
  background: none; border: none; cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 1.5px; width: 22px;
  background: rgba(255,255,255,.9);
  border-radius: 2px;
  transition: transform .3s, opacity .2s, background .4s;
}
nav.scrolled .nav-toggle span,
nav.open .nav-toggle span { background: var(--texte); }
/* Les trois barres deviennent une croix quand le menu est ouvert. */
nav.open .nav-toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
nav.open .nav-toggle span:nth-child(2) { opacity: 0; }
nav.open .nav-toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ── HERO ── */
.hero {
  position: relative;
  height: 100vh;      /* repli pour les navigateurs sans unités « small viewport » */
  height: 100svh;     /* évite le saut lié à la barre d'adresse mobile */
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  text-align: center;
}
.hero-bg {
  position: absolute; inset: 0;
  background: url('hero.jpg?v=48eb5571') center center / cover no-repeat;
  transform: scale(1.1);
  will-change: transform;
}
.hero-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom,
      rgba(12,26,10,.82) 0%,
      rgba(12,26,10,.48) 28%,
      rgba(12,26,10,.42) 50%,
      rgba(12,26,10,.48) 72%,
      rgba(12,26,10,.78) 100%);
}
.hero-content { position: relative; z-index: 2; padding: 0 2rem; }
.hero-eyebrow {
  font-size: .75rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: rgba(255,255,255,.8);
  margin-bottom: 1.2rem;
}
.hero h1 {
  font-family: var(--police-titres);
  font-weight: 500;
  font-size: clamp(3rem, 8vw, 6rem);
  color: #fff;
  line-height: 1.05;
  letter-spacing: .01em;
  text-shadow: 0 2px 24px rgba(8,20,7,.35);
}
.hero h1 span { color: rgba(255,255,255,.9); }
.hero-tagline {
  margin-top: 1.5rem;
  font-size: 1rem;
  font-weight: 300;
  color: rgba(255,255,255,.9);
  max-width: 36ch;
  margin-left: auto; margin-right: auto;
  text-shadow: 0 1px 10px rgba(8,20,7,.3);
}
.scroll-hint {
  position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%);
  z-index: 2; display: flex; flex-direction: column; align-items: center; gap: .5rem;
}
.scroll-hint span {
  font-size: .7rem; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255,255,255,.75);
}
.scroll-line {
  width: 1px; height: 48px;
  background: linear-gradient(to bottom, rgba(255,255,255,.6), transparent);
  animation: scrollDrop 1.8s ease-in-out infinite;
}
@keyframes scrollDrop {
  0%   { transform: scaleY(0); transform-origin: top; opacity: 1; }
  50%  { transform: scaleY(1); transform-origin: top; opacity: 1; }
  51%  { transform: scaleY(1); transform-origin: bottom; opacity: 1; }
  100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}

/* ── SECTIONS COMMUNES ── */
/* Les deux marges suivent la largeur de l'écran au lieu d'être figées. Le
   défaut d'avant venait de ce que seule la latérale bougeait : au-delà de
   1164 px le conteneur plafonne et c'est le centrage qui creuse les côtés,
   mais en dessous les gouttières retombaient sur un plancher de 32 px pendant
   que le vertical restait bloqué à 96. Le rapport dérivait donc de 0,6:1 sur
   grand écran à 3:1 sur téléphone — c'est cette dérive qu'on voyait, plus que
   telle ou telle valeur.
   Les deux bornes gardent ici le même rapport (3.5/2 comme 7vw/4vw), si bien
   que la proportion reste stable autour de 1,75:1 à toutes les largeurs.
   On peut se permettre ce vertical plus court parce que chaque section change
   aussi de fond : la frontière de couleur sépare déjà, le padding n'a plus
   qu'à faire respirer. */
section { padding: clamp(3.5rem, 7vw, 6rem) clamp(2rem, 4vw, 3.5rem); }
.container { max-width: 860px; margin: 0 auto; }
.container-wide { max-width: 1100px; margin: 0 auto; }

.section-label {
  font-size: .7rem; font-weight: 400;
  letter-spacing: .25em; text-transform: uppercase;
  color: var(--terre);
  margin-bottom: 1rem;
}
/* Le label sorti en tête de section, au-dessus des deux colonnes. Les trois
   sections centrales gagnent ainsi un point d'entrée fixe, là où leur contenu
   alterne de côté : sans lui le nom de la section changeait de bord d'une
   section à l'autre et le regard n'avait plus où le chercher. C'est cette
   constante qui rend l'alternance lisible.
   max-width: none lève le « p { max-width: 60ch } » global, qui bridait la
   boîte du label à 403 px : sans quoi le filet ci-dessous ne couvrirait que
   les deux premiers cinquièmes de la section.
   Le filet, justement, donne son assise au label : à cette taille il flottait
   au-dessus d'une largeur qu'il ne remplissait pas. Il sert aussi de couvercle
   à la section, et rend visible le fait que l'en-tête la couvre entière. */
.section-label--entete {
  font-size: .835rem;
  margin-bottom: 2.5rem;
  max-width: none;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(0,0,0,.08);
}
/* Le verger est sur fond vert foncé : le filet doit y être clair, sans quoi
   il disparaît. Même logique que la couleur du label juste au-dessus. */
#verger .section-label--entete { border-bottom-color: rgba(255,255,255,.18); }
h2 {
  font-family: var(--police-titres);
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.15;
  color: var(--vert);
  margin-bottom: 2rem;
}

/* SS Soapy Hands n'existe qu'en une graisse. Un contour de la couleur du
   texte epaissit le trait sans fabriquer le faux gras du navigateur, qui
   deforme les lettres manuscrites. Regler --gras-titres pour doser. */
:root { --gras-titres: .022em; }
h1, h2,
.chiffre,
.verger-regles-titre,
.soutenir-alternatives-titre {
  -webkit-text-stroke: var(--gras-titres) currentColor;
}

/* Chiffres mis en avant au fil du texte. */
.chiffre {
  font-family: var(--police-titres);
  font-size: 1.3em;
  line-height: 1;
  letter-spacing: .01em;
}
p { max-width: 60ch; }

/* ── ASSOCIATION ── */
/* Trame commune aux trois sections centrales — verger, association,
   soutenir. Elles alternent le côté du texte d'une section à l'autre :
   à gauche pour le verger, à droite pour l'association, à gauche de nouveau
   pour soutenir. L'ordre du DOM suit toujours la lecture voulue en mobile,
   où la grille repasse sur une seule colonne : aucune règle « order » n'est
   nécessaire, c'est le balisage lui-même qui porte l'ordre. */
.association-grid, .verger-layout, .soutenir-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  /* start, et non center : le label étant sorti au-dessus, le haut des deux
     colonnes devient la ligne par laquelle le regard entre dans la section.
     Elle doit donc être une vraie ligne — titre et image commencent ensemble. */
  align-items: start;
}

/* Emplacement de la photo de l'association, en attendant l'image réelle.
   Volontairement sobre : il doit se lire comme une réserve, pas comme un
   élément de design abouti. Se supprime avec son <div> le jour venu. */
.asso-photo {
  aspect-ratio: 4 / 3;
  display: flex; align-items: center; justify-content: center;
  background: var(--vert-pale);
  border-radius: 2px;
}
.asso-photo span {
  font-size: .7rem; letter-spacing: .25em; text-transform: uppercase;
  color: var(--gris-leger);
}
.association-text p + p { margin-top: 1.2rem; }

/* ── VERGER ── */
#verger {
  background: var(--vert);
  color: var(--vert-pale);
  position: relative; overflow: hidden;
}
#verger h2 { color: #fff; }
#verger .section-label { color: rgba(255,255,255,.75); }
.verger-image { position: relative; overflow: hidden; border-radius: 2px; }
.verger-image img {
  width: 100%; height: auto;
  display: block;
  transition: transform .6s ease;
}
.verger-image:hover img { transform: scale(1.02); }
.plan-expand {
  position: absolute; bottom: .65rem; right: .65rem;
  width: 30px; height: 30px;
  background: rgba(12,26,10,.45);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border-radius: 3px;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.8);
  text-decoration: none;
  transition: background .2s, color .2s;
}
.plan-expand:hover { background: rgba(12,26,10,.72); color: #fff; }
.plan-expand svg {
  width: 13px; height: 13px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.verger-text p { color: rgba(247,243,238,.88); max-width: 52ch; }
.verger-text p + p { margin-top: 1.2rem; }
#verger .chiffre { color: #fff; }
.verger-regles {
  margin-top: 2.25rem;
  padding-left: 1.35rem;
  border-left: 2px solid rgba(247,243,238,.3);
}
.verger-regles-titre {
  font-family: var(--police-titres);
  font-size: 1.4rem;
  line-height: 1.2;
  color: #fff;
  margin-bottom: .4rem;
}
.verger-regles p + p { margin-top: 0; }

/* ── NOUS SOUTENIR ── */
#soutenir { background: var(--vert-pale); }
.soutenir-intro { margin-top: 1rem; max-width: 46ch; }

/* Les deux colonnes s'alignent ici sur la première ligne de texte, et non sur
   le haut des boîtes comme les autres sections. Leurs titres n'ont pas le même
   corps — 40,7 px à gauche, 22,4 px à droite — donc à hauteur de boîte égale
   le petit titre paraissait flotter dix pixels plus haut que le grand. Caler
   les lignes de base les remet sur la même ligne d'écriture. */
.soutenir-grid { align-items: baseline; }

/* L'adhésion ferme la colonne de gauche : c'est le premier bloc que l'on
   lit, et le premier qui sort en mobile. */
.soutenir-cta { margin-top: 2.5rem; }
/* Même corps que l'intro juste au-dessus. Les deux paragraphes se suivent et
   disent la même voix ; leur donner deux tailles proches mais distinctes
   (17 puis 15,2 px) faisait lire un rétrécissement sans raison. C'était un
   reste du temps où ce bloc avait son propre sous-titre. */
.soutenir-cta p { color: var(--texte); max-width: 42ch; }
/* Seule exception à l'alignement à gauche : le bouton est centré dans sa
   colonne, pour se détacher du bloc de texte qui le porte. */
.soutenir-cta .btn { display: block; width: fit-content; margin: 1.75rem auto 0; }

/* Les autres façons de nous soutenir, en colonne de droite : mêmes
   caractères qu'avant, plus petits et plus gris que la colonne principale.
   Le filet de séparation a sauté — la mise en colonnes suffit désormais à
   les distinguer de l'adhésion. */
.soutenir-alternatives {
  display: flex; flex-direction: column; gap: 1rem;
  /* Corps de texte normal, comme « Cueillette libre ?! » dans la section du
     verger, qui n'impose aucune taille non plus. Le titre et le filet mettent
     déjà ce bloc de côté ; le rapetisser en plus le faisait paraître rabougri
     à côté de la colonne d'adhésion. Seule la couleur grise le subordonne. */
  color: var(--gris);
  /* Même filet que « Cueillette libre ?! » dans la section du verger, mais
     posé sur le bloc entier plutôt que sur chaque entrée : il rassemble les
     deux options en un groupe distinct de la colonne d'adhésion, au lieu de
     les séparer l'une de l'autre. Vert sombre translucide ici, là où le
     verger utilise du crème — dans les deux cas, la couleur du texte de la
     section à faible opacité. */
  padding-left: 1.35rem;
  border-left: 2px solid rgba(58,90,53,.25);
}
/* Même palier intermédiaire que « Cueillette libre ?! » dans la section du
   verger : police d'accent, 1.4rem. Il manquait ici tout niveau entre le h2
   à 40 px et le texte de cette colonne à 13,6 px — les amorces en gras
   faisaient la taille du texte courant, si bien que la colonne entière se
   lisait comme une note de bas de page à côté du titre. */
.soutenir-alternatives-titre {
  font-family: var(--police-titres);
  font-size: 1.4rem;
  line-height: 1.2;
  color: var(--vert);
}
/* Les mots mis en avant ressortent en vert sur ce fond clair, comme ils
   ressortent en blanc sur le vert foncé du verger. */
#soutenir .chiffre { color: var(--vert); }
.soutenir-alternatives strong {
  font-weight: 500; color: var(--texte);
}
.soutenir-alternatives a {
  color: var(--gris);
  border-bottom: 1px solid rgba(0,0,0,.2);
  text-decoration: none;
  transition: color .2s, border-color .2s;
}
.soutenir-alternatives a:hover { color: var(--vert-fonce); border-bottom-color: var(--vert-fonce); }

/* ── CONTACT ── */
.contact-inner { max-width: 60ch; margin: 0 auto; text-align: center; }
.contact-inner h2 { margin-bottom: 1.5rem; }
.contact-inner p { margin-left: auto; margin-right: auto; }
p.contact-info { color: var(--gris); margin-bottom: 2rem; }

.btn {
  display: inline-block;
  background: var(--vert); color: #fff; border: none;
  padding: .85rem 2.5rem;
  font-family: var(--police-texte); font-size: .75rem; font-weight: 400;
  letter-spacing: .2em; text-transform: uppercase;
  text-decoration: none;
  cursor: pointer; transition: background .2s;
  border-radius: var(--rayon);
}
.btn:hover { background: var(--vert-fonce); }

/* Le bouton et l'adresse déclenchent la même action : ils doivent se lire
   comme un seul bloc, pas comme deux propositions successives. D'où un écart
   interne (.6rem) nettement plus court que celui qui les sépare du paragraphe
   au-dessus (2rem) et des réseaux en dessous (2.75rem) — sans cet écart de
   rapport, les quatre éléments se lisaient en enfilade. */
.contact-address { margin-top: .6rem; font-size: .9rem; }
.contact-address a {
  color: var(--gris); text-decoration: none;
  border-bottom: 1px solid rgba(0,0,0,.15);
  padding-bottom: 1px;
  transition: color .2s, border-color .2s;
}
.contact-address a:hover { color: var(--vert); border-bottom-color: var(--vert); }

.contact-socials {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  margin-top: 2.75rem;
}
.contact-social {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gris); text-decoration: none;
  transition: color .2s;
}
.contact-social svg { width: 14px; height: 14px; fill: currentColor; flex-shrink: 0; }
.contact-social:hover { color: var(--vert); }

/* ── FOOTER ── */
footer {
  padding: 2.5rem 3rem;
  border-top: 1px solid rgba(0,0,0,.08);
  /* wrap : sous une certaine largeur les deux colonnes passent l'une sous
     l'autre d'elles-mêmes, sans attendre le point de rupture du menu. */
  display: flex; flex-wrap: wrap; gap: 2rem;
  /* stretch : les deux colonnes prennent la hauteur de la plus haute
     (l'encart des crédits), ce qui donne à .footer-build l'espace libre
     dans lequel descendre. En flex-start elles restaient à leur hauteur
     propre et le calage en bas était impossible. */
  justify-content: space-between; align-items: stretch;
  font-size: .78rem; color: var(--gris);
}
.footer-left, .footer-right {
  display: flex; flex-direction: column; gap: 0;
  /* L'interligne de 1.75 hérité du body aérait trop ces lignes courtes.
     C'était lui, bien plus que le gap, qui creusait l'écart entre le nom de
     l'association et sa mention, comme entre les lignes de crédits. */
  line-height: 1.45;
}
/* Les crédits sur un lavis de terre (--terre à 6 %) plutôt que sur un vert :
   le vert est déjà très présent ailleurs dans la page, et le brun réchauffe
   le bas de page sans entrer en concurrence avec le logo. Assez léger pour
   poser le bloc sans l'encadrer. */
.footer-right {
  align-items: flex-end; text-align: right;
  padding: .85rem 1.1rem;
  background: rgba(139,99,72,.06);
  border-radius: var(--rayon);
}
.footer-logo {
  font-family: var(--police-titres);
  font-size: 1rem; font-weight: 400;
  color: var(--vert);
}
/* Le numéro de build : présent en permanence pour savoir quelle version est
   en ligne, mais assez effacé pour ne pas peser dans la mise en page. Seul
   élément détaché du bloc — les autres lignes restent serrées entre elles.
   margin-top: auto absorbe l'espace libre de la colonne : le numéro tombe
   ainsi au ras du bas de l'encart des crédits, sans écarter le nom de
   l'association de sa mention. En mobile la colonne n'a plus d'espace
   libre, d'où le retour à une marge fixe dans le media query. */
.footer-build {
  margin-top: auto;
  font-size: .68rem;
  color: rgba(0,0,0,.28);
  letter-spacing: .04em;
}

/* ── FADE-IN AU SCROLL ──
   Conditionné à la classe « js » posée par le script : sans JavaScript,
   .reveal n'a aucun style et le contenu reste visible. */
.js .reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity .8s ease, transform .8s ease;
}
.js .reveal.visible { opacity: 1; transform: none; }

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  /* La barre descend à 74 px en mobile : le décalage d'ancrage suit. */
  html { scroll-padding-top: 5rem; }
  nav { padding: 1rem 1.5rem; }
  .nav-right { gap: 1.25rem; }
  .nav-logo-img { height: 42px; }
  .nav-toggle { display: flex; }

  /* Le menu devient un panneau déroulant sous la barre de navigation. */
  .nav-links {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: .25rem 1.5rem 1.25rem;
    background: rgba(247,243,238,.98);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 10px 24px rgba(0,0,0,.08);
  }
  nav.open .nav-links { display: flex; }
  .nav-links a {
    display: block;
    padding: .9rem 0;
    font-size: .85rem;
    border-bottom: 1px solid rgba(0,0,0,.06);
  }
  .nav-links li:last-child a { border-bottom: none; }

  .association-grid, .verger-layout, .soutenir-grid { grid-template-columns: 1fr; gap: 3rem; }
  .verger-image { max-height: 400px; overflow: hidden; }
  /* align-items: center annule le stretch du desktop : l'encart des crédits
     reprend la largeur de son texte et se centre, au lieu de s'étirer sur
     toute la largeur ou de rester collé à gauche. */
  footer { flex-direction: column; gap: 1.5rem; text-align: center; align-items: center; }
  .footer-build { margin-top: 1rem; }
  .footer-left, .footer-right { align-items: center; text-align: center; }
  /* En colonne, les crédits passent devant. Le bloc association suit, et le
     numéro de build ferme la marche sans effort : il est déjà le dernier
     enfant de .footer-left. */
  .footer-right { order: 1; }
  .footer-left  { order: 2; }
}

/* ── MOUVEMENT RÉDUIT ──
   Respecte le réglage système : plus de parallaxe, d'animation en boucle
   ni de transitions, et le contenu s'affiche immédiatement. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .hero-bg { transform: scale(1.1) !important; }
}