/* ==========================================================================
   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;
}

/* 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);
}

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:hover { transform: translateY(-2px); }

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

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

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

.section-verte .bouton-contour { color: var(--creme); border-color: var(--creme); }
.section-verte .bouton-contour:hover { background: var(--creme); color: var(--vert-on); }

.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;
}
.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;
  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); }

/* 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;
  opacity: 0.38;              /* la photo reste visible, le texte reste lisible */
}
/* Dégradé qui garantit le contraste du texte sur l'image, quelle qu'elle soit */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
              rgba(0, 66, 0, 0.55) 0%,
              rgba(0, 66, 0, 0.78) 55%,
              rgba(0, 66, 0, 0.92) 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 --- */
.article-corps { max-width: 720px; margin-inline: auto; }
.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; }

  .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) {
  :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.8rem;
  }
  .nav-liste { flex-direction: row; gap: 1.5rem; }
  .nav-liste a {
    padding: 0.4rem 0;
    font-size: 0.92rem;
    border-bottom: 0;
  }
  .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; }

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

  .galerie { columns: 3; }

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

  .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; }
  .nav-liste { gap: 1.9rem; }
  .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; }
}