/* ==========================================================================
   OBJECTIF NATUREL — feuille de style unique
   Association loi 1901 — objectif-naturel.com
   --------------------------------------------------------------------------
   Ordre du fichier :
   01. Variables (charte)      06. Boutons
   02. Reset et bases          07. Header et navigation
   03. Typographie             08. Footer
   04. Mise en page (layout)   09. Composants de page
   05. Utilitaires             10. Media queries
   ========================================================================== */


/* ==========================================================================
   01. VARIABLES — la charte, en un seul endroit
   ========================================================================== */

:root {
  /* --- Couleurs de la charte --- */
  --vert-on:        #005E00;  /* couleur principale, celle du logo */
  --vert-fonce:     #004200;  /* survol, ombres, fonds pleins */
  --vert-clair:     #E4EDE0;  /* aplats très légers, séparateurs */
  --jaune-on:       #FABB00;  /* ACCENT. Jamais plus de 15 % de la surface.
                                 NOTE : le SVG du logo utilise #F4BD38.
                                 Si tu tranches pour la valeur du fichier,
                                 c'est ici et nulle part ailleurs. */
  --jaune-fonce:    #E0A600;  /* survol du jaune */
  --creme:          #FDF8EE;  /* fond principal du site */
  --creme-fonce:    #F5EDDD;  /* fond alterné d'une section sur deux */
  --blanc:          #FFFFFF;  /* cartes et zones de contenu */

  --texte:          #2B2118;  /* brun-noir chaud, jamais du noir pur */
  --texte-doux:     #6B5D4F;  /* légendes, dates, métadonnées */
  --bordure:        #E4DCCB;  /* filets discrets */

  /* --- Typographie --- */
  --titre:  'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --corps:  'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --citation: Georgia, 'Times New Roman', serif;  /* serif italique, terrain */

  /* --- Échelle typographique (fluide, sans media query) --- */
  --t-xxl: clamp(2.4rem, 7vw, 4.6rem);
  --t-xl:  clamp(1.9rem, 4.6vw, 3.1rem);
  --t-l:   clamp(1.4rem, 2.8vw, 2rem);
  --t-m:   clamp(1.1rem, 1.8vw, 1.28rem);
  --t-s:   0.94rem;
  --t-xs:  0.8rem;

  /* --- Rythme vertical et largeurs --- */
  --gouttiere:   1.25rem;
  --largeur-max: 1240px;
  --largeur-texte: 68ch;   /* longueur de ligne confortable en lecture */
  --section-y:   clamp(3.5rem, 9vw, 7rem);

  /* --- Divers --- */
  --rayon:       4px;   /* coins très légèrement adoucis, pas arrondis */
  --ombre:       0 2px 14px rgba(43, 33, 24, 0.07);
  --ombre-forte: 0 8px 30px rgba(43, 33, 24, 0.13);
  --transition:  180ms ease;
  --hauteur-header: 72px;
}


/* ==========================================================================
   02. RESET ET BASES
   ========================================================================== */

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

html {
  scroll-behavior: smooth;          /* défilement fluide entre les sections */
  scroll-padding-top: calc(var(--hauteur-header) + 1rem);
  -webkit-text-size-adjust: 100%;
}

/* Respect des personnes qui désactivent les animations dans leur système */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--creme);
  color: var(--texte);
  font-family: var(--corps);
  font-size: 1rem;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Bloque le défilement du fond quand le menu mobile est ouvert */
body.menu-ouvert { overflow: hidden; }

img,
picture,
video,
svg { max-width: 100%; display: block; height: auto; }

a { color: var(--vert-on); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--vert-fonce); }

/* Accessibilité : l'anneau de focus doit rester visible au clavier */
:focus-visible {
  outline: 3px solid var(--jaune-on);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Lien d'évitement, premier élément tabulable de chaque page */
.saut-contenu {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  background: var(--vert-on);
  color: var(--blanc);
  padding: 0.9rem 1.4rem;
  text-decoration: none;
  font-weight: 600;
}
.saut-contenu:focus {
  left: 0.5rem;
  top: 0.5rem;
  color: var(--blanc);
}

/* Réservé aux lecteurs d'écran */
.lecteur-ecran {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}


/* ==========================================================================
   03. TYPOGRAPHIE
   ========================================================================== */

h1, h2, h3, h4 {
  font-family: var(--titre);
  font-weight: 700;
  line-height: 1.12;
  color: var(--vert-on);
  margin: 0 0 0.6em;
  letter-spacing: -0.015em;
  text-wrap: balance;              /* évite les veuves sur les titres */
}

h1 { font-size: var(--t-xxl); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-l); }
h4 { font-size: var(--t-m); font-weight: 600; }

p { margin: 0 0 1.15em; max-width: var(--largeur-texte); }
p:last-child { margin-bottom: 0; }

strong { font-weight: 700; color: var(--texte); }

/* Le chapeau d'une section : plus gros que le corps, moins qu'un titre */
.chapeau {
  font-size: var(--t-m);
  line-height: 1.6;
  color: var(--texte);
}

/* Sur-titre : le petit mot en capitales au-dessus d'un h2 */
.surtitre {
  display: block;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texte-doux);
  margin-bottom: 0.9rem;
}
/* Le petit filet jaune qui précède le sur-titre — l'accent, à dose homéopathique */
.surtitre::before {
  content: "";
  display: inline-block;
  width: 26px;
  height: 3px;
  background: var(--jaune-on);
  vertical-align: middle;
  margin-right: 0.7rem;
}

/* Citation de terrain — serif italique, une voix distincte du reste */
blockquote,
.citation {
  font-family: var(--citation);
  font-style: italic;
  font-size: var(--t-l);
  line-height: 1.5;
  color: var(--vert-on);
  margin: 2.2rem 0;
  padding-left: 1.4rem;
  border-left: 3px solid var(--jaune-on);
  max-width: 58ch;
}
blockquote p { max-width: none; }
blockquote cite,
.citation cite {
  display: block;
  font-family: var(--corps);
  font-style: normal;
  font-size: var(--t-s);
  color: var(--texte-doux);
  margin-top: 0.8rem;
}

/* Mise en exergue : une phrase de l'auteur détachée au milieu de son propre
   texte. Même allure qu'une citation, mais sans attribution — on ne se cite
   pas soi-même à l'intérieur de son article. */
.exergue {
  font-family: var(--citation);
  font-style: italic;
  font-size: var(--t-l);
  line-height: 1.5;
  color: var(--vert-on);
  border-left: 3px solid var(--jaune-on);
  padding-left: 1.4rem;
  margin: 2.4rem 0;
  max-width: 58ch;
}

/* Encadré, pour une note en marge du texte */
.encadre {
  background: var(--vert-clair);
  border-left: 3px solid var(--vert-on);
  padding: 1.4rem 1.6rem;
  margin: 2rem 0;
  max-width: var(--largeur-texte);
}
.encadre p:last-child { margin-bottom: 0; }

ul, ol { padding-left: 1.3rem; max-width: var(--largeur-texte); }
li { margin-bottom: 0.5em; }

/* Liste sans puce, avec un tiret vert — pour les valeurs et lignes rouges */
.liste-nue { list-style: none; padding-left: 0; }
.liste-nue li {
  position: relative;
  padding-left: 1.7rem;
  margin-bottom: 1rem;
}
.liste-nue li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.72em;
  width: 12px; height: 2px;
  background: var(--vert-on);
}

/* Liste courte affichée en colonnes : évite une colonne unique interminable.
   Reste sur une seule colonne sur téléphone. */
.liste-colonnes { display: grid; grid-template-columns: 1fr; gap: 0 2rem; }
.liste-colonnes li { margin-bottom: 0.55rem; }

hr {
  border: 0;
  height: 1px;
  background: var(--bordure);
  margin: var(--section-y) 0;
}


/* ==========================================================================
   04. MISE EN PAGE
   ========================================================================== */

.conteneur {
  width: 100%;
  max-width: var(--largeur-max);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

/* Conteneur étroit, pour les longs textes lus d'un trait */
.conteneur-etroit {
  width: 100%;
  max-width: 780px;
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

section { padding-block: var(--section-y); }

/* Une section sur deux respire sur un crème plus soutenu */
.section-alt { background: var(--creme-fonce); }
.section-verte {
  background: var(--vert-on);
  color: var(--creme);
}
.section-verte h2,
.section-verte h3 { color: var(--blanc); }
.section-verte .surtitre { color: rgba(253, 248, 238, 0.72); }
.section-verte a { color: var(--jaune-on); }

.entete-section { margin-bottom: clamp(2rem, 4vw, 3.2rem); }
.entete-section p { color: var(--texte-doux); }
.section-verte .entete-section p { color: rgba(253, 248, 238, 0.85); }

/* Grille générique, mobile-first : une colonne, puis deux, puis trois */
.grille {
  display: grid;
  gap: clamp(1.2rem, 2.5vw, 2rem);
  grid-template-columns: 1fr;
}


/* ==========================================================================
   05. UTILITAIRES
   ========================================================================== */

.centre { text-align: center; }
.centre p { margin-inline: auto; }
.mt-0 { margin-top: 0; }
.mb-1 { margin-bottom: 1rem; }
.mb-2 { margin-bottom: 2rem; }

/* Apparition douce au défilement, pilotée par script.js */
.js .apparait {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 620ms ease, transform 620ms ease;
}
.js .apparait.visible { opacity: 1; transform: none; }


/* ==========================================================================
   06. BOUTONS
   ========================================================================== */

.bouton {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--titre);
  font-weight: 600;
  font-size: var(--t-s);
  letter-spacing: 0.02em;
  padding: 0.95rem 1.7rem;
  border: 2px solid transparent;
  border-radius: var(--rayon);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition), color var(--transition),
              border-color var(--transition), transform var(--transition);
}

/* Bouton principal — vert plein */
.bouton-principal {
  background: var(--vert-on);
  color: var(--blanc);
}

/* Bouton d'accent — le seul endroit où le jaune est plein */
.bouton-accent {
  background: var(--jaune-on);
  color: var(--texte);
}

/* Bouton secondaire — contour */
.bouton-contour {
  background: transparent;
  color: var(--vert-on);
  border-color: var(--vert-on);
}

/* --- Boutons posés sur un fond vert : hero, bandeau, section verte, footer ---
   Ces contextes repeignent tous les liens qu'ils contiennent (`.section-verte a`
   en jaune, `.pied a` en crème). Plus spécifiques que `.bouton-accent`, ils
   effaçaient le libellé : jaune sur jaune dans le bloc « Faire un don », vert sur
   vert pour « Suivre le journal » dans le hero. Le texte ne réapparaissait qu'au
   survol — donc jamais au doigt. Le libellé est maintenant lisible au repos. */
.hero .bouton-accent,
.bandeau .bouton-accent,
.section-verte .bouton-accent,
.pied .bouton-accent { color: var(--texte); }

.hero .bouton-contour,
.bandeau .bouton-contour,
.section-verte .bouton-contour,
.pied .bouton-contour { color: var(--creme); border-color: var(--creme); }

/* Le survol reste réservé aux pointeurs qui survolent réellement. Sur écran
   tactile, un appui laissait sinon le bouton figé en état de survol. */
@media (hover: hover) and (pointer: fine) {
  .bouton:hover { transform: translateY(-2px); }
  .bouton-principal:hover { background: var(--vert-fonce); color: var(--blanc); }
  .bouton-accent:hover { background: var(--jaune-fonce); color: var(--texte); }
  .bouton-contour:hover { background: var(--vert-on); color: var(--blanc); }
  .hero .bouton-contour:hover,
  .bandeau .bouton-contour:hover,
  .section-verte .bouton-contour:hover,
  .pied .bouton-contour:hover { background: var(--creme); color: var(--vert-on); }
}

/* Retour visuel au doigt : l'appui enfonce le bouton et inverse les couleurs,
   le temps du contact seulement. */
.bouton:active { transform: translateY(1px); }
.bouton-principal:active { background: var(--vert-fonce); color: var(--blanc); }
.bouton-accent:active { background: var(--jaune-fonce); color: var(--texte); }
.bouton-contour:active { background: var(--vert-on); color: var(--blanc); }
.hero .bouton-contour:active,
.bandeau .bouton-contour:active,
.section-verte .bouton-contour:active,
.pied .bouton-contour:active { background: var(--creme); color: var(--vert-on); }

/* L'anneau de focus global est jaune : invisible sur le bouton jaune. */
.bouton-accent:focus-visible { outline-color: var(--texte); }

.bouton-large { width: 100%; justify-content: center; }

/* Lien fléché « Lire la suite » */
.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 600;
  font-size: var(--t-s);
  text-decoration: none;
  color: var(--vert-on);
  border-bottom: 2px solid var(--jaune-on);
  padding-bottom: 2px;
  transition: gap var(--transition);
}
.lien-fleche:hover { gap: 0.85rem; }


/* ==========================================================================
   07. HEADER ET NAVIGATION
   ========================================================================== */

.entete {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--creme);
  border-bottom: 1px solid var(--bordure);
  transition: box-shadow var(--transition);
}
.entete.defile { box-shadow: var(--ombre); }

/* Réserve la place du header pendant le chargement des partiels : pas de saut */
#entete-site { min-height: var(--hauteur-header); }

.entete-interieur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: var(--hauteur-header);
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  color: var(--vert-on);
  flex-shrink: 0;
  /* Le logo pousse tout le reste vers la droite. Sans cette marge, le
     `justify-content: space-between` du header poserait le sélecteur de
     langue au milieu, entre le logo et le hamburger. Sans sélecteur, le
     rendu du header est exactement le même qu'avant. */
  margin-right: auto;
}
.logo svg,
.logo img { width: 40px; height: 40px; }
.logo-texte {
  font-family: var(--titre);
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.logo-texte span {
  display: block;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texte-doux);
}

/* --- Navigation : cachée hors écran sur mobile, déployée au clic --- */
.nav-principale {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(88vw, 360px);
  background: var(--creme);
  border-left: 1px solid var(--bordure);
  padding: calc(var(--hauteur-header) + 1.5rem) 1.6rem 2rem;
  transform: translateX(100%);
  transition: transform 260ms ease;
  overflow-y: auto;
  z-index: 999;
}
.nav-principale.ouverte { transform: translateX(0); }

.nav-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.nav-liste a {
  display: block;
  padding: 0.75rem 0;
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.05rem;
  text-decoration: none;
  color: var(--texte);
  border-bottom: 1px solid var(--bordure);
  transition: color var(--transition);
}
.nav-liste a:hover { color: var(--vert-on); }

/* Page courante : soulignée en jaune */
.nav-liste a[aria-current="page"] {
  color: var(--vert-on);
  box-shadow: inset 0 -3px 0 var(--jaune-on);
}

.nav-don { margin-top: 1.6rem; }
.nav-don .bouton { width: 100%; justify-content: center; }

/* Le bouton hamburger */
.bouton-menu {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  flex-shrink: 0;   /* jamais écrasé : c'est une cible tactile */
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  z-index: 1001;
}
.bouton-menu span {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--vert-on);
  transition: transform 220ms ease, opacity 180ms ease;
}
.bouton-menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.bouton-menu[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.bouton-menu[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Sous 420 px, le logo entier, le sélecteur de langue et le hamburger ne
   tiennent plus sur une ligne : il manque une trentaine de pixels. C'est la
   baseline du logo qui passe la main — elle est décorative, le nom de
   l'association reste. Au-dessus de 420 px, rien ne change. */
@media (max-width: 419px) {
  .logo-texte span { display: none; }
  /* 6 px manquaient encore à 320 px : le hamburger dépassait du cadre.
     L'écartement du header suffit à les rendre. */
  .entete-interieur { gap: 0.35rem; }
  .choix-langue { letter-spacing: 0.06em; gap: 0.15rem; }
}

/* --- Choix de la langue : deux liens et un filet, tout à droite --- */
.choix-langue {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
  font-family: var(--titre);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}
.choix-langue a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;          /* cible tactile, sans grandir le header */
  padding-inline: 0.15rem;
  text-decoration: none;
  color: var(--texte-doux);
  transition: color var(--transition);
}
.choix-langue a:hover { color: var(--vert-on); }
.choix-langue a[aria-current] { color: var(--vert-on); }
.choix-langue-filet { color: var(--bordure); font-weight: 400; }

/* Voile sombre derrière le menu mobile */
.voile {
  position: fixed;
  inset: 0;
  background: rgba(43, 33, 24, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity 240ms ease, visibility 240ms;
  z-index: 998;
}
.voile.visible { opacity: 1; visibility: visible; }


/* ==========================================================================
   08. FOOTER
   ========================================================================== */

.pied {
  background: var(--vert-on);
  color: rgba(253, 248, 238, 0.86);
  padding-top: clamp(3rem, 6vw, 4.5rem);
  font-size: var(--t-s);
}
.pied a { color: var(--creme); text-decoration: none; }
.pied a:hover { color: var(--jaune-on); text-decoration: underline; }
.pied h3 {
  color: var(--blanc);
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 1.1rem;
}
.pied .logo { color: var(--creme); }
.pied .logo-texte span { color: rgba(253, 248, 238, 0.7); }

.pied-grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  padding-bottom: 2.8rem;
}
.pied-liste { list-style: none; margin: 0; padding: 0; }
.pied-liste li { margin-bottom: 0.55rem; }

.pied-reseaux { display: flex; gap: 0.7rem; margin-top: 1.2rem; }
.pied-reseaux a {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border: 1px solid rgba(253, 248, 238, 0.35);
  border-radius: var(--rayon);
  transition: background var(--transition), border-color var(--transition);
}
.pied-reseaux a:hover { background: var(--jaune-on); border-color: var(--jaune-on); }
.pied-reseaux svg { width: 20px; height: 20px; fill: currentColor; }
.pied-reseaux a:hover svg { fill: var(--texte); }

.pied-bas {
  border-top: 1px solid rgba(253, 248, 238, 0.22);
  padding-block: 1.6rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  font-size: var(--t-xs);
  color: rgba(253, 248, 238, 0.7);
}
.pied-bas p { margin: 0; max-width: none; }

/* --- Formulaire newsletter (footer et page dédiée) --- */
.form-newsletter { display: grid; gap: 0.7rem; max-width: 420px; }
.form-newsletter input {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  background: var(--blanc);
  color: var(--texte);
  font-family: var(--corps);
  font-size: 0.95rem;
}
.form-newsletter input::placeholder { color: #9C8F80; }
.form-newsletter input:focus { border-color: var(--vert-on); }
.pied .form-newsletter input { border-color: transparent; }
.form-newsletter .mention {
  font-size: var(--t-xs);
  line-height: 1.5;
  color: rgba(253, 248, 238, 0.65);
}


/* ==========================================================================
   09. COMPOSANTS DE PAGE
   ========================================================================== */

/* --- 9.1 Hero d'accueil, plein écran --- */
.hero {
  position: relative;
  min-height: calc(100svh - var(--hauteur-header));
  display: flex;
  align-items: center;
  padding-block: 4rem;
  background: var(--vert-on);
  color: var(--creme);
  overflow: hidden;
}
.hero-image {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: right center;  /* cadre étroit : on garde la façade ouest, pas le centre */
  opacity: 1;                     /* la teinte est déjà dans le SVG (#004200 sur le vert du hero) */
}
/* Voile de contraste. Il était calibré pour une photo imprévisible : très dense,
   jusqu'à 92 % en bas. Le fond est maintenant un aplat maîtrisé — au-delà de ces
   valeurs il effacerait la silhouette dans la moitié basse du hero. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
              rgba(0, 66, 0, 0.10) 0%,
              rgba(0, 66, 0, 0.28) 100%);
}
.hero-contenu { position: relative; z-index: 2; max-width: 900px; }
.hero h1 {
  color: var(--blanc);
  margin-bottom: 1.2rem;
}
/* Le mot mis en avant dans le titre — soulignement jaune, pas un aplat */
.hero h1 em {
  font-style: normal;
  box-shadow: inset 0 -0.18em 0 rgba(250, 187, 0, 0.9);
}
.hero-sous-titre {
  font-size: var(--t-m);
  color: rgba(253, 248, 238, 0.92);
  max-width: 60ch;
  margin-bottom: 2.2rem;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-bottom: 3rem; }

/* --- 9.2 Compte à rebours --- */
.rebours { border-top: 1px solid rgba(253, 248, 238, 0.28); padding-top: 1.8rem; }
.rebours-label {
  font-size: var(--t-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--jaune-on);
  font-weight: 700;
  margin-bottom: 1rem;
  display: block;
}
.rebours-grille { display: flex; flex-wrap: wrap; gap: 1.6rem; }
.rebours-bloc { text-align: left; }
.rebours-nombre {
  display: block;
  font-family: var(--titre);
  font-weight: 700;
  font-size: clamp(2rem, 6vw, 3.2rem);
  line-height: 1;
  color: var(--blanc);
  font-variant-numeric: tabular-nums;  /* les chiffres ne dansent pas */
}
.rebours-unite {
  display: block;
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(253, 248, 238, 0.72);
  margin-top: 0.35rem;
}

/* Flèche de défilement en bas du hero */
.hero-fleche {
  position: absolute;
  bottom: 1.6rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  color: rgba(253, 248, 238, 0.75);
  animation: flotte 2.4s ease-in-out infinite;
}
@keyframes flotte {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 9px); }
}

/* --- 9.3 Blocs « le projet en bref » --- */
.bloc {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-top: 3px solid var(--jaune-on);
  border-radius: var(--rayon);
  padding: 2rem 1.7rem;
  height: 100%;
}
.bloc-icone {
  width: 46px; height: 46px;
  color: var(--vert-on);
  margin-bottom: 1.2rem;
}
.bloc h3 { font-size: var(--t-l); margin-bottom: 0.6rem; }
.bloc p { color: var(--texte-doux); margin-bottom: 0; }

/* --- 9.4 Cartes d'article --- */
.carte {
  display: flex;
  flex-direction: column;
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  overflow: hidden;
  height: 100%;
  transition: transform var(--transition), box-shadow var(--transition);
}
.carte:hover { transform: translateY(-4px); box-shadow: var(--ombre-forte); }
.carte-media {
  position: relative;
  aspect-ratio: 3 / 2;
  background: var(--vert-clair);
  overflow: hidden;
}
.carte-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 500ms ease;
}
.carte:hover .carte-media img { transform: scale(1.04); }
.carte-corps {
  padding: 1.5rem 1.5rem 1.7rem;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.7rem;
}
.carte h3 { font-size: var(--t-m); margin: 0; }
.carte h3 a { text-decoration: none; }
.carte p { color: var(--texte-doux); font-size: var(--t-s); margin: 0; }
.carte .lien-fleche { margin-top: auto; align-self: flex-start; }

/* Métadonnées : date, lieu, temps de lecture */
.meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.9rem;
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--texte-doux);
  margin: 0;
}
.meta .categorie { color: var(--vert-on); }

/* Étiquette de catégorie posée sur une image */
.etiquette {
  position: absolute;
  top: 0.9rem; left: 0.9rem;
  background: var(--jaune-on);
  color: var(--texte);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.32rem 0.7rem;
  border-radius: 2px;
}

/* --- 9.5 Bandeau de page intérieure --- */
.bandeau {
  background: var(--vert-on);
  color: var(--creme);
  padding-block: clamp(3rem, 8vw, 5.5rem);
}
.bandeau h1 { color: var(--blanc); margin-bottom: 0.8rem; }
.bandeau p {
  color: rgba(253, 248, 238, 0.9);
  font-size: var(--t-m);
  max-width: 62ch;
  margin-bottom: 0;
}
.bandeau .surtitre { color: rgba(253, 248, 238, 0.72); }

/* --- 9.6 Filtres --- */
.filtres {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-bottom: 2.5rem;
}
.filtre {
  font-family: var(--titre);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.55rem 1rem;
  background: transparent;
  color: var(--texte-doux);
  border: 1px solid var(--bordure);
  border-radius: 100px;
  cursor: pointer;
  transition: all var(--transition);
}
.filtre:hover { border-color: var(--vert-on); color: var(--vert-on); }
.filtre[aria-pressed="true"] {
  background: var(--vert-on);
  border-color: var(--vert-on);
  color: var(--blanc);
}

/* Élément masqué par un filtre */
.filtre-cache { display: none !important; }

/* --- 9.7 Message d'attente (avant le départ) --- */
.attente {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-left: 4px solid var(--jaune-on);
  border-radius: var(--rayon);
  padding: clamp(1.8rem, 4vw, 3rem);
  margin-bottom: var(--section-y);
}
.attente h2 { font-size: var(--t-l); }
.attente p { color: var(--texte-doux); }
.attente p strong { color: var(--texte); }

/* --- 9.8 Journal de route --- */
.entree-journal {
  display: grid;
  gap: 1.5rem;
  padding-block: 2.6rem;
  border-top: 1px solid var(--bordure);
}
.entree-journal:first-of-type { border-top: 0; padding-top: 0; }
.entree-date {
  font-family: var(--titre);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texte-doux);
}
.entree-date .lieu { display: block; color: var(--vert-on); margin-top: 0.25rem; }
.entree-journal h2 { font-size: var(--t-l); }
.entree-photos { display: grid; gap: 0.8rem; grid-template-columns: repeat(2, 1fr); margin-top: 1.3rem; }
.entree-photos img { aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--rayon); }

/* --- 9.9 Communautés --- */
.carte-communaute .carte-media { aspect-ratio: 1 / 1; }
.carte-communaute .pays {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vert-on);
}

/* Grille des neuf questions */
.questions { counter-reset: q; list-style: none; padding: 0; max-width: none; }
.question {
  counter-increment: q;
  position: relative;
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 1.5rem 1.5rem 1.5rem 3.8rem;
  font-size: var(--t-m);
  line-height: 1.5;
  margin-bottom: 0.8rem;
}
.question::before {
  content: counter(q);
  position: absolute;
  left: 1.4rem; top: 1.35rem;
  font-family: var(--titre);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--jaune-on);
  line-height: 1;
}

/* --- 9.10 Modale (fiche communauté) --- */
.modale {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: none;
  padding: var(--gouttiere);
  overflow-y: auto;
}
.modale[open], .modale.ouverte { display: grid; place-items: start center; }
.modale-fond {
  position: fixed;
  inset: 0;
  background: rgba(43, 33, 24, 0.72);
}
.modale-boite {
  position: relative;
  background: var(--creme);
  border-radius: var(--rayon);
  max-width: 760px;
  width: 100%;
  margin-block: 5vh;
  padding: clamp(1.6rem, 4vw, 3rem);
  box-shadow: var(--ombre-forte);
}
.modale-fermer {
  position: absolute;
  top: 0.7rem; right: 0.7rem;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--texte);
}
.modale-fermer:hover { background: var(--jaune-on); }

/* --- 9.11 Galerie et lightbox --- */
.galerie {
  columns: 1;
  column-gap: 1rem;
}
.galerie figure {
  break-inside: avoid;
  margin: 0 0 1rem;
  position: relative;
  cursor: zoom-in;
  border-radius: var(--rayon);
  overflow: hidden;
  background: var(--vert-clair);
}
.galerie img { width: 100%; transition: transform 500ms ease, filter var(--transition); }
.galerie figure:hover img { transform: scale(1.03); }
.galerie figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 2.4rem 1rem 0.9rem;
  background: linear-gradient(transparent, rgba(43, 33, 24, 0.85));
  color: var(--creme);
  font-size: var(--t-xs);
  opacity: 0;
  transition: opacity var(--transition);
}
.galerie figure:hover figcaption,
.galerie figure:focus-within figcaption { opacity: 1; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1600;
  display: none;
  background: rgba(20, 15, 10, 0.94);
  place-items: center;
  padding: var(--gouttiere);
}
.lightbox.ouverte { display: grid; }
.lightbox img {
  max-width: min(100%, 1200px);
  max-height: 76vh;
  object-fit: contain;
  border-radius: var(--rayon);
}
.lightbox-legende {
  color: var(--creme);
  text-align: center;
  margin-top: 1.2rem;
  font-size: var(--t-s);
  max-width: 60ch;
}
.lightbox-legende .lieu-date {
  display: block;
  color: var(--jaune-on);
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 0.4rem;
}
.lightbox-fermer,
.lightbox-prec,
.lightbox-suiv {
  position: absolute;
  width: 48px; height: 48px;
  display: grid; place-items: center;
  background: rgba(253, 248, 238, 0.12);
  border: 1px solid rgba(253, 248, 238, 0.3);
  border-radius: 50%;
  color: var(--creme);
  font-size: 1.4rem;
  cursor: pointer;
}
.lightbox-fermer:hover,
.lightbox-prec:hover,
.lightbox-suiv:hover { background: var(--jaune-on); color: var(--texte); }
.lightbox-fermer { top: 1rem; right: 1rem; }
.lightbox-prec { left: 0.8rem; top: 50%; transform: translateY(-50%); }
.lightbox-suiv { right: 0.8rem; top: 50%; transform: translateY(-50%); }

/* --- 9.12 Article long --- */
/* Le corps d'article n'est pas dans un .conteneur : il porte donc lui-même
   sa gouttière. Sans elle, le texte colle aux bords de l'écran sur mobile. */
.article-corps {
  max-width: 720px;
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}
.article-corps h2 { font-size: var(--t-l); margin-top: 2.6rem; }
.article-corps h3 { font-size: var(--t-m); margin-top: 2rem; }
.article-corps figure { margin: 2.4rem 0; }
.article-corps figcaption {
  font-size: var(--t-xs);
  color: var(--texte-doux);
  margin-top: 0.6rem;
  text-align: center;
}
.article-couverture {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--rayon);
  margin-bottom: 2rem;
}

/* --- 9.13 Itinéraire --- */
.itineraire { display: grid; gap: 2.5rem; }
.itineraire-carte {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 1.2rem;
}
.etapes { list-style: none; padding: 0; margin: 0; }
.etape {
  position: relative;
  padding-left: 2.2rem;
  padding-bottom: 1.8rem;
}
.etape:last-child { padding-bottom: 0; }
/* Le trait vertical qui relie les étapes */
.etape::before {
  content: "";
  position: absolute;
  left: 6px; top: 1.5rem; bottom: -0.3rem;
  width: 2px;
  background: var(--bordure);
}
.etape:last-child::before { display: none; }
.etape::after {
  content: "";
  position: absolute;
  left: 0; top: 0.42rem;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--creme);
  border: 3px solid var(--vert-on);
}
.etape h3 { font-size: var(--t-m); margin-bottom: 0.2rem; }
.etape p { font-size: var(--t-s); color: var(--texte-doux); margin: 0; }

/* --- 9.14 Formulaire de contact --- */
.formulaire { display: grid; gap: 1.1rem; max-width: 620px; }
.champ { display: grid; gap: 0.4rem; }
.champ label { font-size: var(--t-s); font-weight: 600; }
.champ input,
.champ select,
.champ textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  background: var(--blanc);
  font-family: var(--corps);
  font-size: 0.98rem;
  color: var(--texte);
}
.champ textarea { min-height: 160px; resize: vertical; }
.champ input:focus,
.champ select:focus,
.champ textarea:focus { border-color: var(--vert-on); }
.aide { font-size: var(--t-xs); color: var(--texte-doux); }

/* Message renvoyé après envoi d'un formulaire */
.message-form {
  padding: 1rem 1.2rem;
  border-radius: var(--rayon);
  font-size: var(--t-s);
  display: none;
}
.message-form.visible { display: block; }
.message-form.succes { background: var(--vert-clair); color: var(--vert-fonce); }
.message-form.erreur { background: #FBE9E7; color: #A02D1F; }

/* --- 9.15 Bloc soutien --- */
.soutien-boite {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-top: 4px solid var(--jaune-on);
  border-radius: var(--rayon);
  padding: clamp(1.8rem, 4vw, 3rem);
}
.mention-legale {
  font-size: var(--t-xs);
  color: var(--texte-doux);
  letter-spacing: 0.04em;
}

/* --- 9.16 Pagination --- */
.pagination {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 3rem;
  list-style: none;
  padding: 0;
}
.pagination a,
.pagination span {
  display: grid;
  place-items: center;
  min-width: 44px; height: 44px;
  padding-inline: 0.6rem;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--t-s);
  color: var(--texte);
}
.pagination a:hover { border-color: var(--vert-on); color: var(--vert-on); }
.pagination [aria-current="page"] {
  background: var(--vert-on);
  border-color: var(--vert-on);
  color: var(--blanc);
}

/* --- 9.17 État vide --- */
.vide {
  text-align: center;
  padding: 4rem 1rem;
  color: var(--texte-doux);
  border: 1px dashed var(--bordure);
  border-radius: var(--rayon);
}


/* ==========================================================================
   10. MEDIA QUERIES — mobile-first, on ajoute en montant
   ========================================================================== */

/* --- 480px : petites tablettes et grands téléphones --- */
@media (min-width: 480px) {
  .hero-actions .bouton { width: auto; }
  .entree-photos { grid-template-columns: repeat(3, 1fr); }
}

/* --- 768px : tablette --- */
@media (min-width: 768px) {
  :root { --gouttiere: 2rem; }

  .grille-2 { grid-template-columns: repeat(2, 1fr); }
  .grille-3 { grid-template-columns: repeat(2, 1fr); }
  .grille-4 { grid-template-columns: repeat(2, 1fr); }

  .pied-grille { grid-template-columns: repeat(2, 1fr); gap: 2.5rem 3rem; }

  .galerie { columns: 2; }

  .liste-colonnes { grid-template-columns: repeat(2, 1fr); }

  .entree-journal { grid-template-columns: 170px 1fr; gap: 2.5rem; }

  .itineraire { grid-template-columns: 1fr 1fr; align-items: start; gap: 3rem; }

  .pied-bas { flex-direction: row; justify-content: space-between; align-items: center; }

  .rebours-grille { gap: 2.6rem; }
}

/* --- 1024px : ordinateur portable. La navigation redevient horizontale --- */
@media (min-width: 1024px) {

  .grille-3 { grid-template-columns: repeat(3, 1fr); }
  .grille-4 { grid-template-columns: repeat(4, 1fr); }

  .galerie { columns: 3; }

  .liste-colonnes { grid-template-columns: repeat(3, 1fr); }

  .pied-grille { grid-template-columns: 1.4fr 1fr 1fr 1.4fr; }

}

/* --- 1240px : le menu se déploie ---------------------------------------
   Pourquoi 1240 et non 1024 : sept entrées de menu, le bouton de don et le
   sélecteur de langue demandent environ 1110 px en français. Sous 1240 px de
   fenêtre il n'y a pas la place : « Le projet » et « Faire un don » passaient
   à la ligne et le header grandissait — c'était déjà le cas à 1024 px avant
   l'ajout du sélecteur. En dessous de ce palier le menu hamburger prend le
   relais : c'est net, et rien ne déborde.
   Les grilles, la galerie et le pied de page gardent leur palier à 1024 px :
   eux tiennent très bien sur un écran de tablette. */
@media (min-width: 1240px) {
  :root { --hauteur-header: 84px; }

  .bouton-menu { display: none; }
  .voile { display: none; }

  .nav-principale {
    position: static;
    width: auto;
    background: none;
    border: 0;
    padding: 0;
    transform: none;
    overflow: visible;
    display: flex;
    align-items: center;
    gap: 1.4rem;
  }
  .nav-liste { flex-direction: row; gap: 1.35rem; }
  .nav-liste a {
    padding: 0.4rem 0;
    font-size: 0.92rem;
    border-bottom: 0;
    /* Un libellé de menu est un mot, pas une phrase : il ne se coupe pas.
       Le filet jaune de la page courante serait illisible sur deux lignes. */
    white-space: nowrap;
  }
  .nav-liste a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--jaune-on); }
  .nav-don { margin-top: 0; }
  .nav-don .bouton { width: auto; padding: 0.7rem 1.2rem; white-space: nowrap; }

  /* order: 1 renvoie le sélecteur de langue après la navigation, donc tout à
     droite du header. Sous ce palier il reste à sa place dans le document,
     juste avant le bouton hamburger. */
  .choix-langue { order: 1; margin-left: 0.2rem; }

  .logo svg, .logo img { width: 46px; height: 46px; }
  .logo-texte { font-size: 1.1rem; }
}

/* --- 1280px : grands écrans --- */
@media (min-width: 1280px) {
  :root { --gouttiere: 2.5rem; }
  /* L'écartement du menu ne grandit plus ici : à 1.9rem, les sept entrées
     plus le bouton de don dépassaient la largeur du conteneur, plafonnée
     à 1240 px — elle ne grandit donc pas au-delà. */
  .nav-liste a { font-size: 0.96rem; }
}

/* --- Impression : on enlève ce qui ne sert à rien sur papier --- */
@media print {
  .entete, .pied, .bouton-menu, .voile, .hero-fleche, .filtres { display: none !important; }
  body { background: #fff; color: #000; }
  a::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}

/* ==========================================================================
   09.x MÉCÉNAT — tableau du coût réel et étiquettes de disponibilité
   Ajouté pour la section #mecenat de soutenir.html.
   ========================================================================== */

/* Réservé : tableau du coût réel d'un don (montant, réduction, coût net).
   Retiré de la page tant que l'association ne peut pas délivrer de reçu fiscal.
   À remettre le jour où le rescrit est acquis — le style est prêt.
   Le tableau défile seul sur petit écran : le corps de page ne bouge pas. */
.tableau-enveloppe {
  overflow-x: auto;
  margin: 1.8rem 0;
  max-width: 100%;
  width: 100%;
}

/* Sans ceci, la largeur minimale du tableau élargit sa colonne de grille
   et c'est la page entière qui défile horizontalement sur téléphone.
   Le tableau doit défiler dans sa boîte, pas emporter le corps avec lui. */
#mecenat .grille > * { min-width: 0; }

.tableau-don {
  width: 100%;
  min-width: 420px;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
}

.tableau-don caption {
  caption-side: bottom;
  text-align: left;
  font-size: var(--t-s);
  color: var(--texte-doux);
  padding-top: 0.9rem;
}

.tableau-don th,
.tableau-don td {
  padding: 0.85rem 1.1rem;
  text-align: left;
  border-bottom: 1px solid var(--bordure);
}

.tableau-don thead th {
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vert-on);
  background: var(--vert-clair);
  border-bottom: 2px solid var(--vert-on);
}

.tableau-don tbody tr:last-child th,
.tableau-don tbody tr:last-child td { border-bottom: 0; }

.tableau-don tbody th { font-weight: 600; }

/* La seule colonne accentuée du tableau : ce que ça coûte vraiment. */
.tableau-don .colonne-cout {
  font-weight: 700;
  color: var(--vert-on);
  background: rgba(250, 187, 0, 0.09);
}

/* Étiquette de disponibilité sur les cartes de soutien. */
.etiquette-dispo {
  display: inline-block;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.3rem 0.7rem;
  border-radius: 2px;
  margin-bottom: 1rem;
}

.etiquette-dispo.maintenant {
  background: var(--vert-on);
  color: var(--creme);
}

.etiquette-dispo.attente-rescrit {
  background: var(--vert-clair);
  color: var(--vert-on);
  border: 1px solid var(--vert-on);
}

/* Mention posée sous la signature d'une citation traduite. Les citations du
   site ont été dites en français : sur les pages anglaises, on le dit.
   Reprend la taille et la couleur des métadonnées du site. */
.traduit {
  display: block;
  margin-top: 0.3rem;
  font-family: var(--corps);
  font-style: normal;
  font-size: var(--t-xs);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--texte-doux);
}
.section-verte .traduit,
.hero .traduit { color: rgba(253, 248, 238, 0.7); }

/* Ligne de clôture après l'appel à l'action, sur le modèle du P.-S. */
.post-scriptum {
  max-width: var(--largeur-texte);
  margin-top: 2.4rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--bordure);
  color: var(--texte-doux);
}