/* Habillage Objectif Naturel, construit par la préparation à partir de assets/site/css/. Ne pas modifier ici. */

/* ---- 10-base.css ---- */
/* Objectif Naturel : feuille d'origine (style.css du 03/10/2026), reprise telle quelle dans la couche OCSIA2.
   Seuls changements : la section du cœur porte les fonds (.fond-alt = .section-alt, .fond-verte = .section-verte,
   .bloc--on_hero = .hero, .bloc--on_bandeau = .bandeau) et la carte « .bloc » d'origine s'appelle « .on-bloc »
   (« .bloc » est la section du cœur). Les polices sont dans assets/site/fonts/. */

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


/* ==========================================================================
   00. POLICES — Montserrat hébergée sur le site (audit du 2 octobre 2026)
   Avant : chargée chez Google Fonts. Deux allers-retours vers un serveur
   tiers avant d'afficher le texte, et l'adresse IP de chaque visiteur
   transmise à Google. Maintenant : trois fichiers dans fonts/, même police,
   mêmes graisses. Licence SIL OFL, voir fonts/OFL.txt.
   ========================================================================== */

@font-face {
  font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/montserrat-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/montserrat-latin-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/montserrat-latin-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Lettres accentuées hors latin de base (ă, ł, ő…) : téléchargées seulement
   si une page en contient. */
@font-face {
  font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/montserrat-latin-ext-400.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/montserrat-latin-ext-700.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* Police de repli calée sur Montserrat. Pendant la fraction de seconde où
   Montserrat se télécharge, le texte s'affiche en Arial ; ces réglages
   donnent à l'Arial la largeur et la hauteur de ligne de Montserrat, pour que
   rien ne saute quand la vraie police arrive (décalage mesuré avant : 0,19
   sur la page Budget). Valeurs calculées sur le texte du site. */
@font-face {
  font-family: 'Montserrat repli'; font-weight: 400;
  src: local('Arial'), local('ArialMT'), local('Liberation Sans');
  size-adjust: 110.95%; ascent-override: 87.25%; descent-override: 22.62%; line-gap-override: 0%;
}
@font-face {
  font-family: 'Montserrat repli'; font-weight: 700;
  src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold');
  size-adjust: 109.32%; ascent-override: 88.55%; descent-override: 22.96%; line-gap-override: 0%;
}


/* ==========================================================================
   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', 'Montserrat repli', 'Helvetica Neue', Arial, sans-serif;
  --corps:  'Montserrat', 'Montserrat repli', '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;
  /* Courbe de sortie douce, commune à toutes les animations du site
     (audit 02/10/2026) : départ franc, arrivée lente. Jamais de rebond. */
  --courbe:      cubic-bezier(.22, .61, .36, 1);
  --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;
    animation-iteration-count: 1 !important;   /* une boucle infinie à 0,01 ms clignote */
    transition-duration: 0.01ms !important;
    transition-delay: 0s !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;
  /* Le flash gris d'iOS au toucher remplacé par les états :active du site */
  -webkit-tap-highlight-color: transparent;
}

/* Supprime le délai du double-toucher sur les commandes (audit 02/10/2026) */
a, button, input, select, textarea, label, summary { touch-action: manipulation; }

/* 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.
   Audit 02/10/2026 : le jaune sur le crème ne contrastait qu'à 1,6:1 (il en
   faut 3:1). L'anneau est vert sur les fonds clairs, et reste jaune sur les
   fonds verts, où il contraste à 4,7:1. */
:focus-visible {
  outline: 3px solid var(--vert-on);
  outline-offset: 3px;
  border-radius: 2px;
}
.bloc--on_hero :focus-visible,
.bloc--on_bandeau :focus-visible,
.fond-verte :focus-visible,
.pied :focus-visible { outline-color: var(--jaune-on); }

/* 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 */
.fond-alt { background: var(--creme-fonce); }
.fond-verte {
  background: var(--vert-on);
  color: var(--creme);
}
.fond-verte h2,
.fond-verte h3 { color: var(--blanc); }
.fond-verte .surtitre { color: rgba(253, 248, 238, 0.72); }
.fond-verte a { color: var(--jaune-on); }

.entete-section { margin-bottom: clamp(2rem, 4vw, 3.2rem); }
.entete-section p { color: var(--texte-doux); }
.fond-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,
p.centre { margin-inline: auto; }   /* p.centre : ajouté le 02/10/2026, le lien
                                        « Lire le projet en entier » n'était pas centré */
.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 700ms var(--courbe), transform 700ms var(--courbe);
}
.js .apparait.visible { opacity: 1; transform: none; }
/* Dans une grille, les blocs arrivent l'un après l'autre (90 ms d'écart)
   au lieu de tomber ensemble. */
.grille > .apparait:nth-child(2) { transition-delay: 90ms; }
.grille > .apparait:nth-child(3) { transition-delay: 180ms; }
.grille > .apparait:nth-child(4) { transition-delay: 270ms; }


/* ==========================================================================
   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 (`.fond-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. */
.bloc--on_hero .bouton-accent,
.bloc--on_bandeau .bouton-accent,
.fond-verte .bouton-accent,
.pied .bouton-accent { color: var(--texte); }

.bloc--on_hero .bouton-contour,
.bloc--on_bandeau .bouton-contour,
.fond-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); }
  .bloc--on_hero .bouton-contour:hover,
  .bloc--on_bandeau .bouton-contour:hover,
  .fond-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); }
.bloc--on_hero .bouton-contour:active,
.bloc--on_bandeau .bouton-contour:active,
.fond-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 svg { transition: transform 220ms var(--courbe); }
@media (hover: hover) and (pointer: fine) {
  /* La flèche avance, le texte ne bouge pas (avant : `gap` animé, qui
     recalculait la mise en page à chaque image). */
  .lien-fleche:hover svg { transform: translateX(4px); }
}



/* ---- 20-entete-pied.css ---- */
/* Objectif Naturel : en-tête et pied de page (style.css d'origine, parties 07 et 08). */

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

/* Fermé, le menu glissait hors de l'écran mais ses neuf liens restaient
   atteignables à la tabulation : on « tabulait dans le vide ». `visibility`
   les retire du parcours clavier et des lecteurs d'écran, après la fin du
   glissement (audit 02/10/2026). */
@media (max-width: 1239px) {
  .nav-principale {
    visibility: hidden;
    overscroll-behavior: contain;
    transition: transform 320ms cubic-bezier(.32, .72, 0, 1), visibility 0s linear 320ms;
  }
  .nav-principale.ouverte {
    visibility: visible;
    transition: transform 320ms cubic-bezier(.32, .72, 0, 1), visibility 0s;
  }
}

.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; }
}
/* Audit 02/10/2026 : à 320 px, avec la vraie police Montserrat, le bouton
   menu mordait de 18 px sur la marge droite. Le nom rapetisse un peu. */
@media (max-width: 359px) {
  .logo-texte { font-size: 0.9rem; }
  .logo img { width: 34px; height: 34px; }
}

/* --- 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); }
/* EN et FR mesuraient 22 px de large : en dessous des 24 px du minimum WCAG
   2.2 et loin des 44 px conseillés par Apple. La zone touchable déborde de
   6 px de chaque côté, sans rien déplacer à l'écran. */
.choix-langue a { position: relative; }
.choix-langue a::after { content: ""; position: absolute; inset: 0 -6px; }
.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; }
/* Dans une phrase, un lien se distingue autrement que par la couleur */
.pied-bas a { text-decoration: underline; text-decoration-color: rgba(253, 248, 238, 0.45); }

/* --- 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.78);   /* 0.65 donnait 4,1:1 — il faut 4,5:1 */
}



/* ---- 30-pages.css ---- */
/* Objectif Naturel : composants des pages, paliers d'écran et ajouts (style.css d'origine, parties 09 à 11). */

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

/* --- 9.1 Hero d'accueil, plein écran --- */
.bloc--on_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. */
.bloc--on_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; }
/* Le bloc de texte était centré dans une colonne de 900 px : sur grand écran
   il démarrait 110 px plus à droite que le logo et que toutes les sections.
   Il s'aligne maintenant sur la même marge gauche (audit 02/10/2026). */
.hero-contenu > * { max-width: 900px; }
.bloc--on_hero h1 {
  color: var(--blanc);
  margin-bottom: 1.2rem;
}
/* Le mot mis en avant dans le titre — soulignement jaune, pas un aplat */
.bloc--on_hero h1 em {
  font-style: normal;
  /* Même trait qu'avant (0,18 em de jaune en pied de mot), dessiné en fond
     pour pouvoir se tracer de gauche à droite à l'arrivée sur la page. */
  background: linear-gradient(rgba(250, 187, 0, 0.9), rgba(250, 187, 0, 0.9)) no-repeat 0 100% / 100% 0.18em;
  animation: trace-soulignement 900ms var(--courbe) 350ms both;
}
@keyframes trace-soulignement {
  from { background-size: 0% 0.18em; }
  to   { background-size: 100% 0.18em; }
}
.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);
  /* Trois oscillations puis immobile : une boucle sans fin attire l'œil
     pour toujours (Apple HIG : éviter les oscillations prolongées). */
  animation: flotte 2.4s ease-in-out 1.2s 3;
}
@keyframes flotte {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 9px); }
}

/* --- 9.3 Blocs « le projet en bref » --- */
.on-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;
}
.on-bloc h3 { font-size: var(--t-l); margin-bottom: 0.6rem; }
.on-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 260ms var(--courbe), box-shadow 260ms var(--courbe);
}
/* Survol réservé aux souris : au doigt, la carte restait soulevée */
@media (hover: hover) and (pointer: fine) {
  .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;
}
@media (hover: hover) and (pointer: fine) {
  .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,
.carte h2 { font-size: var(--t-m); margin: 0; }
.carte h3 a,
.carte h2 a { text-decoration: none; }
/* Toute la carte est cliquable, pas seulement son titre (audit 02/10/2026).
   Le lien du titre s'étend sur la carte ; « Lire la suite » reste au-dessus. */
.carte { position: relative; }
.carte h3 a::after,
.carte h2 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.carte .lien-fleche { position: relative; z-index: 2; }
/* Article pas encore écrit : la carte s'affiche, sans faux lien */
.carte-a-venir .carte-media img { opacity: 0.55; filter: saturate(0.6); }
.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 --- */
.bloc--on_bandeau {
  background: var(--vert-on);
  color: var(--creme);
  padding-block: clamp(3rem, 8vw, 5.5rem);
}
.bloc--on_bandeau h1 { color: var(--blanc); margin-bottom: 0.8rem; }
.bloc--on_bandeau p {
  color: rgba(253, 248, 238, 0.9);
  font-size: var(--t-m);
  max-width: 62ch;
  margin-bottom: 0;
}
.bloc--on_bandeau .surtitre { color: rgba(253, 248, 238, 0.72); }
/* Un lien dans le texte d'un bandeau vert : jaune, comme dans .fond-verte
   (sinon vert sur vert, invisible). Ajouté pour la page 404. */
.bloc--on_bandeau a:not(.bouton) { color: var(--jaune-on); }

/* --- 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;
  /* Jamais « transition: all » : il animait aussi l'anneau de focus */
  transition: background-color var(--transition), border-color var(--transition), color 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, .lightbox { overscroll-behavior: contain; }
.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); }
@media (hover: hover) and (pointer: fine) {
  .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;
    /* 1.8rem avant le bouton de don, 1rem entre les entrées : le bouton reste
       visiblement à part, et les huit entrées gardent de la marge partout. */
    gap: 1.8rem;
  }
  .nav-liste { flex-direction: row; gap: 1rem; }
  .nav-liste a {
    padding: 0.4rem 0;
    font-size: 0.9rem;
    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à. */
  /* Le menu garde 0.9rem : avec huit entrées (Budget ajouté le 2 octobre 2026),
     0.96rem collait « Soutenir » au bouton de don dans Safari. */
}

/* --- 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.
   ========================================================================== */

/* Tableau du coût réel d'un don (montant, réduction, coût net).
   Remis sur soutenir.html le 3 octobre 2026 : l'association délivre
   les reçus fiscaux sous sa propre responsabilité.
   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: 300px;   /* 420px avant le 03/10/2026 : la colonne « Ce qu'il vous coûte » sortait de l'écran sur téléphone */
  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; }

@media (max-width: 419px) {
  .tableau-don th,
  .tableau-don td { padding: 0.7rem 0.6rem; }
  .tableau-don thead th { letter-spacing: 0.04em; }
}

/* 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);
}
.fond-verte .traduit,
.bloc--on_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);
}


/* ==========================================================================
   11. AUDIT DU 2 OCTOBRE 2026 — ajouts
   ========================================================================== */

/* --- 11.1 Passage d'une page à l'autre ---
   Un fondu enchaîné court entre deux pages du site, au lieu du flash blanc.
   Le header ne bouge pas : il a son propre nom de transition. Les navigateurs
   qui ne connaissent pas cette règle (Firefox aujourd'hui) l'ignorent et
   changent de page comme avant. Désactivé si l'animation est réduite. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .entete { view-transition-name: entete; }
  ::view-transition-old(root),
  ::view-transition-new(root) { animation-duration: 260ms; animation-timing-function: var(--courbe); }
}

/* --- 11.2 Galerie : chaque vignette est un vrai bouton ---
   Avant : <figure role="button" tabindex="0">, un rôle que <figure> n'a pas
   le droit de porter. Le bouton est natif : Entrée et Espace marchent seuls,
   et les lecteurs d'écran annoncent « bouton ». Il ne se voit pas. */
.galerie-bouton {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  font: inherit;
  color: inherit;
  text-align: inherit;
}
.galerie-bouton:focus-visible { outline-offset: -3px; }

/* Questions d'entretien présentées comme des pistes : sans numéro, puisque
   la liste n'est pas arrêtée (3 octobre 2026). Un trait jaune remplace le
   chiffre. */
.questions-pistes .question::before {
  content: "";
  width: 14px;
  height: 3px;
  background: var(--jaune-on);
  top: 2.05rem;
}

/* Un bloc marqué hidden reste caché même si sa classe lui donne un display
   (galerie et filtres masqués tant qu'il n'y a pas de photos). */
.filtres[hidden], .galerie[hidden] { display: none !important; }


/* Section « Qui je suis » de la page Le projet (style propre à la section dans projet.html). */
/* Bloc de présentation : marges resserrées pour que la colonne de texte
           ne dépasse pas la hauteur de la photo à côté. */
        #flavio blockquote { margin: 1.6rem 0; font-size: var(--t-m); }
        #flavio p { margin-bottom: 0.95em; }
        /* Sur tablette, deux colonnes seraient trop étroites : le texte
           deviendrait deux fois plus haut que la photo. On empile jusqu'à 1024 px. */
        @media (max-width: 1023px) {
          #flavio .grille-2 { grid-template-columns: 1fr; }
          #flavio .grille-2 > div:first-child { max-width: 420px; }
        }

/* ---- 40-budget.css ---- */
/* Objectif Naturel : page Budget et encart du budget (budget.css d'origine, tel quel). */

/* ==========================================================================
   OBJECTIF NATUREL — budget.css
   Styles propres à la page budget.html (et en/budget.html).
   Tout est préfixé « bu- » pour ne jamais entrer en collision avec style.css.
   Les couleurs viennent de la charte (variables de style.css).
   ========================================================================== */

:root {
  --bu-surface:   var(--blanc);
  --bu-surface-2: var(--creme-fonce);
  --bu-ligne:     var(--bordure);
  --bu-ligne-forte: #CFC2A8;
  --bu-vert:      var(--vert-on);
  --bu-vert-lavis: rgba(0, 94, 0, 0.055);
  --bu-sable-lavis: rgba(186, 140, 52, 0.10);
  --bu-jaune-lavis: rgba(250, 187, 0, 0.12);
  --bu-alerte:    #9A4A06;
  --bu-alerte-lavis: rgba(214, 120, 30, 0.13);
  --bu-barre:     var(--vert-on);
  --bu-bande:     rgba(0, 94, 0, 0.16);
  /* Couleurs des huit parties (3 octobre 2026). Choisies pour rester
     distinctes côte à côte, y compris pour les daltoniens (vérifiées avec
     l'outil du skill dataviz, dans l'ordre des parties, anneau compris).
     La couleur suit la partie partout : pastilles, anneau, bande. */
  --bu-p-vehicule: #2E7D32; --bu-p-vie: #5B4A9E;   --bu-p-energie: #C9573A; --bu-p-image: #2F6FB0;
  --bu-p-admin: #D98227;    --bu-p-sante: #1E9C80; --bu-p-route: #E0A41C;   --bu-p-imprevus: #D97098;
  --bu-e1: #3D9A3D; --bu-e2: #9AAE22; --bu-e3: #E0901F; --bu-e4: #D0402B; --bu-e0: #D8D0BC;
}

.bu-chargement, .bu-erreur { padding: 2rem 0; color: var(--texte-doux); }
.bu-erreur { color: var(--bu-alerte); }
.bu-num { font-variant-numeric: tabular-nums; }
.bu-doux { color: var(--texte-doux); }

/* --- Synthèse --- */
.bu-synthese { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
.bu-total {
  background: var(--bu-surface); border: 1px solid var(--bu-ligne); border-radius: var(--rayon);
  padding: clamp(1.3rem, 3vw, 2rem); box-shadow: var(--ombre); display: grid; gap: 0.5rem; min-width: 0;
}
.bu-total-chiffre {
  font-family: var(--titre); font-weight: 700; color: var(--vert-on);
  font-size: clamp(2.6rem, 7vw, 4rem); line-height: 1; letter-spacing: -0.01em;
}
.bu-total-chiffre small { font-size: 0.5em; color: var(--texte-doux); margin-right: 0.2em; font-weight: 600; }
.bu-total-fourchette { font-size: var(--t-s); color: var(--texte); }
.bu-total-note { font-size: var(--t-xs); color: var(--texte-doux); margin: 0.3rem 0 0; max-width: 62ch; }
.bu-scenario { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; margin-top: 0.6rem; }
.bu-scenario-note { font-size: var(--t-xs); color: var(--texte-doux); }
.bu-scenario-note a { font-weight: 600; }
.bu-segment { display: inline-flex; border: 1px solid var(--bu-ligne-forte); border-radius: 999px; padding: 2px; background: var(--bu-surface); }
.bu-segment button {
  border: 0; background: none; font: inherit; font-size: var(--t-xs); font-weight: 600;
  padding: 0.38rem 0.85rem; border-radius: 999px; color: var(--texte-doux); cursor: pointer; white-space: nowrap;
}
.bu-segment button[aria-pressed="true"] { background: var(--vert-on); color: var(--blanc); }

.bu-tuiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; align-content: start; }
.bu-tuile {
  background: var(--bu-surface); border: 1px solid var(--bu-ligne); border-radius: var(--rayon);
  padding: 0.9rem 1rem; display: grid; gap: 0.15rem; align-content: start; min-width: 0;
}
.bu-tuile span { font-size: var(--t-xs); color: var(--texte-doux); }
.bu-tuile b { font-family: var(--titre); font-size: 1.35rem; line-height: 1.2; }
.bu-tuile.reste b { color: var(--bu-alerte); }
.bu-tuile.option { background: var(--bu-jaune-lavis); border-color: var(--jaune-on); }

/* --- Titres internes --- */
.bu-bloc { margin-top: clamp(2.4rem, 6vw, 3.6rem); }
.bu-bloc-tete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.4rem 1.2rem; margin-bottom: 1rem; }
.bu-bloc-tete h2 { font-size: var(--t-l); margin: 0; }
.bu-bloc-tete p { margin: 0; color: var(--texte-doux); font-size: var(--t-s); max-width: 62ch; }

/* --- Répartition --- */
.bu-graphe { background: var(--bu-surface); border: 1px solid var(--bu-ligne); border-radius: var(--rayon); padding: 0.8rem 1rem; display: grid; gap: 0.2rem; position: relative; }
.bu-barre {
  display: grid; grid-template-columns: minmax(0, 210px) minmax(0, 1fr) 132px; gap: 0.9rem; align-items: center;
  padding: 0.45rem 0.35rem; border: 0; background: none; text-align: left; border-radius: var(--rayon);
  width: 100%; font: inherit; color: inherit; cursor: pointer;
}
.bu-barre:hover, .bu-barre:focus-visible { background: var(--bu-surface-2); }
.bu-barre-nom { display: flex; align-items: center; gap: 0.55rem; font-size: var(--t-s); min-width: 0; }
.bu-barre-nom span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bu-pastille { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.bu-piste { position: relative; height: 14px; border-bottom: 1px solid var(--bu-ligne); }
.bu-bande { position: absolute; top: 2px; height: 10px; background: var(--bu-bande); border-radius: 2px; }
.bu-plein { position: absolute; left: 0; top: 2px; height: 10px; background: var(--bu-barre); border-radius: 0 4px 4px 0; }
.bu-barre-val { text-align: right; font-weight: 700; font-size: var(--t-s); white-space: nowrap; }
.bu-barre-val small { display: block; font-weight: 400; font-size: 0.74rem; color: var(--texte-doux); }
.bu-bulle {
  position: absolute; z-index: 5; pointer-events: none; background: var(--texte); color: var(--creme);
  font-size: var(--t-xs); padding: 0.45rem 0.6rem; border-radius: var(--rayon); max-width: 280px; box-shadow: var(--ombre-forte);
}

/* --- Outils --- */
.bu-outils { display: flex; flex-wrap: wrap; gap: 0.5rem 0.7rem; align-items: center; margin-bottom: 0.9rem; }
.bu-puces { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.bu-puce, .bu-lien-outil {
  border: 1px solid var(--bu-ligne-forte); background: var(--bu-surface); border-radius: 999px;
  padding: 0.32rem 0.8rem; font: inherit; font-size: var(--t-xs); font-weight: 600; color: var(--texte); cursor: pointer;
}
.bu-puce[aria-pressed="true"] { background: var(--texte); color: var(--creme); border-color: var(--texte); }
.bu-lien-outil { background: none; border-style: dashed; color: var(--texte-doux); }
.bu-telecharger { display: inline-flex; align-items: center; gap: 0.4rem; margin-left: auto; }
.bu-telecharger svg { flex: none; }
.bu-telecharger[disabled] { opacity: 0.6; cursor: progress; }
.bu-recherche {
  flex: 1 1 180px; max-width: 300px; min-width: 0; border: 1px solid var(--bu-ligne-forte); background: var(--bu-surface);
  border-radius: 999px; padding: 0.38rem 0.9rem; font: inherit; font-size: var(--t-xs);
}

.bu-recherche-boite { position: relative; flex: 1 1 220px; max-width: 340px; min-width: 0; }
.bu-recherche-boite .bu-recherche { width: 100%; max-width: none; }
.bu-suggestions {
  position: absolute; left: 0; top: calc(100% + 4px); z-index: 40; width: max(100%, min(380px, calc(100vw - 2rem)));
  list-style: none; margin: 0; padding: 0.3rem; background: var(--bu-surface); border: 1px solid var(--bu-ligne-forte);
  border-radius: var(--rayon); box-shadow: var(--ombre-forte);
}
.bu-sug { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.1rem 0.7rem; align-items: center; padding: 0.45rem 0.6rem; border-radius: calc(var(--rayon) - 2px); cursor: pointer; }
.bu-sug:hover, .bu-sug[aria-selected="true"] { background: var(--bu-surface-2); }
.bu-sug-nom { font-weight: 600; font-size: 0.86rem; overflow-wrap: anywhere; }
.bu-sug-lieu { grid-column: 1; font-size: 0.74rem; color: var(--texte-doux); }
.bu-sug-montant { grid-column: 2; grid-row: 1 / span 2; font-weight: 700; font-size: 0.8rem; white-space: nowrap; }
.bu-sug mark { background: var(--bu-jaune-lavis); color: inherit; border-radius: 2px; padding: 0 1px; }
.bu-sug-tous { display: block; margin-top: 0.2rem; border-top: 1px solid var(--bu-ligne); border-radius: 0; font-size: 0.8rem; font-weight: 600; color: var(--vert-on); }
.bu-sug-vide { padding: 0.5rem 0.6rem; font-size: 0.82rem; color: var(--texte-doux); }
/* La ligne trouvée reste marquée quelques secondes (sans animation). */
#budget-app .bu-ligne.bu-repere { background: var(--bu-jaune-lavis); box-shadow: inset 4px 0 0 var(--jaune-on); }

/* --- Parties et sous-parties --- */
.bu-partie { background: var(--bu-surface); border: 1px solid var(--bu-ligne); border-radius: var(--rayon); margin-bottom: 0.6rem; overflow: hidden; }
.bu-partie-tete {
  width: 100%; display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto auto; gap: 0.75rem; align-items: center;
  padding: 0.85rem 1rem; border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer;
  background: color-mix(in srgb, var(--pc) 8%, var(--bu-surface));
}
.bu-partie-tete:hover { background: color-mix(in srgb, var(--pc) 14%, var(--bu-surface)); }
.bu-partie-nom { font-family: var(--titre); font-weight: 700; font-size: 1.02rem; min-width: 0; }
.bu-partie-meta { font-size: var(--t-xs); color: var(--texte-doux); white-space: nowrap; }
.bu-partie-total { font-family: var(--titre); font-weight: 700; text-align: right; white-space: nowrap; }
.bu-partie-total small { display: block; font-family: var(--corps); font-weight: 400; font-size: 0.74rem; color: var(--texte-doux); }
.bu-chevron { width: 16px; height: 16px; color: var(--texte-doux); transition: transform var(--transition); flex: none; }
[aria-expanded="true"] > .bu-chevron { transform: rotate(90deg); }
.bu-sous-tete {
  width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.6rem; align-items: center;
  padding: 0.6rem 1rem 0.6rem 1.4rem; border: 0; border-top: 1px solid var(--bu-ligne); background: var(--bu-surface);
  font: inherit; font-size: var(--t-s); color: inherit; text-align: left; cursor: pointer;
}
.bu-sous-tete:hover { background: var(--bu-surface-2); }
.bu-sous-tete b { font-weight: 600; }
.bu-sous-total { font-weight: 600; white-space: nowrap; }
.bu-sous-total small { color: var(--texte-doux); font-weight: 400; margin-left: 0.4rem; }
.bu-ajouts { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0.7rem 1rem; border-top: 1px solid var(--bu-ligne); }

/* --- Lignes --- */
.bu-ligne {
  display: grid; grid-template-columns: minmax(0, 1fr) 165px 195px 140px 30px; gap: 0.7rem; align-items: center;
  padding: 0.65rem 1rem 0.65rem 1.4rem; border-top: 1px solid var(--bu-ligne);
}
.bu-equipe .bu-ligne { grid-template-columns: 64px minmax(0, 1fr) 165px 195px 126px 140px 30px; }
.bu-ligne.acquis { background: var(--bu-vert-lavis); }
.bu-ligne.sur-place { background: var(--bu-sable-lavis); }
.bu-ligne.synthese { background: repeating-linear-gradient(135deg, transparent 0 8px, rgba(43,33,24,0.025) 8px 16px); }
.bu-nom { min-width: 0; }
.bu-nom .n { font-weight: 600; font-size: 0.95rem; line-height: 1.35; }
.bu-nom .c { font-size: var(--t-xs); color: var(--texte-doux); margin-top: 0.15rem; line-height: 1.45; }
.bu-drapeau {
  display: inline-block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.03em; padding: 0.05rem 0.4rem;
  border-radius: 3px; margin-left: 0.4rem; vertical-align: 1px; background: var(--bu-surface-2); color: var(--texte-doux);
}
.bu-drapeau.alerte { background: var(--bu-alerte-lavis); color: var(--bu-alerte); }
.bu-drapeau.perso { background: var(--vert-clair); color: var(--vert-on); }
.bu-montant { text-align: right; font-weight: 700; font-size: 0.92rem; white-space: nowrap; }
.bu-montant .alerte { color: var(--bu-alerte); }
.bu-montant .doux { color: var(--texte-doux); font-weight: 400; }
.bu-etoiles { display: flex; gap: 1px; }
.bu-etoiles button, .bu-etoiles span { border: 0; background: none; padding: 1px; line-height: 0; cursor: pointer; }
.bu-etoiles span { cursor: default; }
.bu-etoiles svg { width: 14px; height: 14px; }
.bu-pilule {
  display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; padding: 0.18rem 0.6rem; border-radius: 999px;
  border: 1px solid var(--bu-ligne-forte); background: var(--bu-surface); max-width: 100%; white-space: nowrap; font-weight: 600; color: var(--texte);
}
.bu-pilule::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--point, var(--texte-doux)); flex: none; }
select.bu-pilule {
  appearance: none; -webkit-appearance: none; width: 100%; font: inherit; font-size: 0.78rem; font-weight: 600; cursor: pointer;
  padding: 0.24rem 1.5rem 0.24rem 0.7rem; box-shadow: inset 4px 0 0 var(--point, transparent); text-overflow: ellipsis;
  background-image: linear-gradient(45deg, transparent 50%, var(--texte-doux) 50%), linear-gradient(135deg, var(--texte-doux) 50%, transparent 50%);
  background-position: calc(100% - 12px) 52%, calc(100% - 8px) 52%; background-size: 4px 4px; background-repeat: no-repeat;
}
select.bu-pilule::before { display: none; }
.st-a_acheter { --point: var(--texte-doux); } .st-sur_place { --point: var(--bu-p-route); } .st-achete { --point: var(--bu-e1); }
.st-possede { --point: var(--vert-on); } .st-donne { --point: var(--jaune-on); } .st-prete { --point: var(--bu-p-image); }
.be-indispensable { --point: var(--texte); border-color: var(--texte-doux); }
.be-important { --point: var(--texte-doux); }
.be-option { --point: var(--jaune-on); background: var(--bu-jaune-lavis); border-color: var(--jaune-on); }
.bu-date input { width: 100%; border: 1px solid var(--bu-ligne); background: var(--bu-surface); border-radius: var(--rayon); padding: 0.18rem 0.4rem; font: inherit; font-size: 0.78rem; }
.bu-date span { font-size: 0.78rem; color: var(--texte-doux); }
.bu-plus { border: 0; background: none; padding: 0.3rem; border-radius: var(--rayon); color: var(--texte-doux); line-height: 0; cursor: pointer; }
.bu-plus:hover { background: var(--bu-surface-2); color: var(--texte); }

/* --- Détail d'une ligne --- */
.bu-detail { grid-column: 1 / -1; background: var(--bu-surface-2); border-radius: var(--rayon); padding: 1rem; margin-top: 0.3rem; display: grid; gap: 1rem; font-size: var(--t-xs); }
.bu-detail h4 { margin: 0 0 0.4rem; font-family: var(--titre); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--texte-doux); }
.bu-detail ul { margin: 0; padding-left: 1.1rem; columns: 2; column-gap: 1.8rem; }
.bu-detail li { break-inside: avoid; margin-bottom: 0.15rem; }
.bu-alts { display: grid; gap: 0.5rem; }
.bu-alt { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.3rem 0.8rem; background: var(--bu-surface); border: 1px solid var(--bu-ligne); border-radius: var(--rayon); padding: 0.6rem 0.75rem; }
.bu-alt .c { color: var(--texte-doux); }
.bu-alt-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.bu-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 0.7rem; }
.bu-form label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.74rem; color: var(--texte-doux); font-weight: 600; min-width: 0; }
.bu-form label.large { grid-column: 1 / -1; }
.bu-form input, .bu-form select, .bu-form textarea {
  border: 1px solid var(--bu-ligne-forte); background: var(--bu-surface); border-radius: var(--rayon);
  padding: 0.4rem 0.55rem; font: inherit; font-size: 0.86rem; font-weight: 400; color: var(--texte); width: 100%;
}
.bu-form textarea { min-height: 70px; resize: vertical; }
.bu-form .case { flex-direction: row; align-items: center; gap: 0.5rem; color: var(--texte); }
.bu-form .case input { width: auto; }
.bu-form .prive { background: var(--bu-jaune-lavis); }
.bu-aide { font-size: 0.74rem; color: var(--texte-doux); margin: 0; }
.bu-detail-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: space-between; }
.bu-bouton {
  border: 1px solid var(--bu-ligne-forte); background: var(--bu-surface); border-radius: 999px; padding: 0.35rem 0.85rem;
  font: inherit; font-size: var(--t-xs); font-weight: 600; color: var(--texte); cursor: pointer; white-space: nowrap;
}
.bu-bouton:hover { border-color: var(--vert-on); }
.bu-bouton.pointille { background: none; border-style: dashed; }
.bu-bouton.danger { color: var(--bu-alerte); border-color: var(--bu-alerte); }
.bu-bouton.plein { background: var(--vert-on); border-color: var(--vert-on); color: var(--blanc); }

/* --- Options, recettes, apports --- */
.bu-options .bu-partie { background: color-mix(in srgb, var(--jaune-on) 5%, var(--bu-surface)); }
.bu-groupe { background: var(--bu-surface); border: 1px solid var(--bu-ligne); border-radius: var(--rayon); margin-bottom: 0.6rem; overflow: hidden; }
.bu-groupe-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 0.8rem; padding: 0.75rem 1rem; background: var(--bu-surface-2); }
.bu-groupe-tete h3 { font-size: 1rem; margin: 0; }
.bu-groupe-tete span { font-size: var(--t-xs); color: var(--texte-doux); }
.bu-groupe-tete b { font-family: var(--titre); white-space: nowrap; }
.bu-recette { display: grid; grid-template-columns: minmax(0, 1fr) 140px 30px; gap: 0.7rem; align-items: center; padding: 0.65rem 1rem; border-top: 1px solid var(--bu-ligne); }
.bu-equipe .bu-recette { grid-template-columns: minmax(0, 1fr) 130px 140px 126px 140px 30px; }
.bu-recette.acquis { background: var(--bu-vert-lavis); }
.bu-vide { padding: 0.8rem 1rem; color: var(--texte-doux); font-size: var(--t-xs); margin: 0; }
.bu-nature { background: var(--bu-surface); border: 1px solid var(--bu-ligne); border-radius: var(--rayon); overflow: hidden; }
.bu-nature-ligne { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.8rem; padding: 0.65rem 1rem; border-top: 1px solid var(--bu-ligne); }
.bu-nature-ligne:first-child { border-top: 0; }
.bu-legende { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; font-size: var(--t-xs); color: var(--texte-doux); margin-top: 1.6rem; padding-top: 1rem; border-top: 1px solid var(--bu-ligne); }
.bu-bandeau-info { margin-bottom: 1rem; padding: 0.7rem 1rem; border-radius: var(--rayon); background: var(--bu-alerte-lavis); font-size: var(--t-s); }

/* L'attribut hidden doit toujours l'emporter : sans cette règle, le display:flex
   de la barre d'édition la laissait visible après « Quitter l'édition ». */
[hidden] { display: none !important; }

/* --- Bouton rond « modifier » et barre d'édition --- */
.bu-crayon {
  position: fixed; right: 1.1rem; bottom: calc(1.1rem + env(safe-area-inset-bottom, 0px)); z-index: 900;
  width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--vert-on); color: var(--blanc); display: grid; place-items: center; box-shadow: var(--ombre-forte);
  transition: transform var(--transition), background var(--transition);
}
.bu-crayon:hover { background: var(--vert-fonce); transform: translateY(-2px); }
.bu-crayon svg { width: 22px; height: 22px; }
.bu-barre-edition {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(0.9rem + env(safe-area-inset-bottom, 0px)); z-index: 900;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.8rem; max-width: calc(100% - 2rem);
  background: var(--texte); color: var(--creme); padding: 0.55rem 0.7rem 0.55rem 1rem; border-radius: 999px; box-shadow: var(--ombre-forte);
  font-size: var(--t-xs);
}
.bu-barre-edition strong { color: var(--creme); }
.bu-barre-edition .bu-bouton { background: transparent; color: var(--creme); border-color: rgba(253, 248, 238, 0.4); }
.bu-barre-edition .bu-bouton.plein { background: var(--jaune-on); border-color: var(--jaune-on); color: var(--texte); }
.bu-etat { display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; }
.bu-etat i { width: 8px; height: 8px; border-radius: 50%; background: var(--bu-e1); display: inline-block; }
.bu-etat.bu-e-attente i { background: var(--bu-e3); }
.bu-etat.bu-e-envoi i { background: var(--jaune-on); }
.bu-etat.bu-e-erreur i { background: var(--bu-e4); }
.bu-equipe-espace { height: 5rem; }

/* --- Fenêtre du mot de passe (réutilise .modale de style.css) --- */
.bu-connexion .modale-boite { max-width: 440px; }
.bu-connexion h2 { font-size: var(--t-l); margin-top: 0; }
.bu-connexion .champ { margin: 1.2rem 0 0.8rem; }
.bu-connexion-message { min-height: 1.4em; font-size: var(--t-s); color: var(--bu-alerte); margin: 0 0 0.8rem; }

/* --- Encart budget sur soutenir.html et l'accueil --- */
.bu-encart { display: grid; gap: 0.3rem; }
.bu-encart-chiffre { font-family: var(--titre); font-weight: 700; font-size: clamp(1.8rem, 4vw, 2.4rem); color: var(--vert-on); line-height: 1.1; }
.bu-encart-chiffre small { font-size: 0.55em; color: var(--texte-doux); margin-right: 0.15em; }

@media (min-width: 900px) {
  .bu-synthese { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
}
@media (max-width: 1020px) {
  .bu-ligne, .bu-equipe .bu-ligne { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 30px; row-gap: 0.4rem; }
  .bu-ligne > .bu-etoiles { grid-column: 1; grid-row: 1; }
  .bu-ligne > .bu-montant { grid-column: 2; grid-row: 1; }
  .bu-ligne > .bu-plus { grid-column: 3; grid-row: 1; }
  .bu-ligne > .bu-nom { grid-column: 1 / -1; grid-row: 2; }
  .bu-ligne > .bu-st { grid-column: 1; grid-row: 3; }
  .bu-ligne > .bu-be { grid-column: 2 / 4; grid-row: 3; }
  .bu-ligne > .bu-date { grid-column: 1; grid-row: 4; }
  .bu-ligne > .bu-detail { grid-row: 5; }
  .bu-public .bu-ligne > .bu-nom { grid-column: 1; grid-row: 1; }
  .bu-public .bu-ligne > .bu-st, .bu-public .bu-ligne > .bu-be { grid-row: 2; }
  .bu-public .bu-ligne > .bu-detail { grid-row: 3; }
  .bu-recette, .bu-equipe .bu-recette { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 30px; row-gap: 0.4rem; }
  .bu-recette > .bu-nom { grid-column: 1 / 3; grid-row: 1; }
  .bu-recette > .bu-plus { grid-column: 3; grid-row: 1; }
  .bu-recette > .bu-montant { grid-column: 1 / 3; grid-row: 2; text-align: left; }
  .bu-recette > .r-porte { grid-column: 1; grid-row: 3; }
  .bu-recette > .r-groupe { grid-column: 2 / 4; grid-row: 3; }
  .bu-recette > .bu-date { grid-column: 1; grid-row: 4; }
  .bu-recette > .bu-detail { grid-row: 5; }
  .bu-barre { grid-template-columns: minmax(0, 140px) minmax(0, 1fr) 110px; gap: 0.6rem; }
  .bu-detail ul { columns: 1; }
  /* Sur écran étroit, une étiquette longue passe à la ligne au lieu de déborder de son cadre. */
  span.bu-pilule { white-space: normal; line-height: 1.25; border-radius: 0.8rem; }
}
@media (max-width: 560px) {
  .bu-tuiles { grid-template-columns: minmax(0, 1fr); }
  .bu-partie-tete { grid-template-columns: auto auto minmax(0, 1fr) auto; padding: 0.8rem; }
  .bu-partie-meta { display: none; }
  .bu-ligne, .bu-recette, .bu-sous-tete { padding-left: 0.8rem; padding-right: 0.8rem; }
  .bu-barre { grid-template-columns: minmax(0, 1fr) 104px; }
  .bu-barre .bu-piste { grid-column: 1 / -1; grid-row: 2; }
  .bu-barre-edition { border-radius: var(--rayon); left: 0.6rem; right: 0.6rem; transform: none; max-width: none; justify-content: space-between; }
  /* Mode équipe sur téléphone : statut et besoin prennent chacun toute la largeur,
     une liste déroulante ne pouvant pas passer à la ligne. */
  .bu-equipe .bu-ligne > .bu-st { grid-column: 1 / -1; grid-row: 3; }
  .bu-equipe .bu-ligne > .bu-be { grid-column: 1 / -1; grid-row: 4; }
  .bu-equipe .bu-ligne > .bu-date { grid-column: 1 / -1; grid-row: 5; }
  .bu-equipe .bu-ligne > .bu-detail { grid-row: 6; }
}
@media print {
  .bu-crayon, .bu-barre-edition, .bu-outils { display: none !important; }
}

/* Le chiffre du budget remonte sous le bandeau : visible sans défiler sur un écran de 1366 × 768. */
section#budget { padding-top: clamp(1.5rem, 4vw, 2.5rem); }

/* Audit du 2 octobre 2026 — place réservée pendant le chargement.
   Le budget arrive par JavaScript une fraction de seconde après la page :
   sans place réservée, la section verte « Votre part » apparaissait d'abord
   en haut de l'écran puis sautait de plusieurs écrans vers le bas
   (décalage mesuré : 0,24, il faut rester sous 0,1). La hauteur réservée
   disparaît dès que le budget est affiché. */
.js #budget-app:not(:has(.bu-bloc, .bu-erreur)) { min-height: 110svh; }


/* ==========================================================================
   Où va l'argent : choix de la vue, anneau et bande de répartition
   (3 octobre 2026). Légers : un SVG et quelques div, aucune bibliothèque.
   ========================================================================== */
.bu-vues { margin: 0 0 0.8rem; }
.bu-bloc-rep .bu-bloc-tete { margin-bottom: 0.6rem; }

/* Anneau */
.bu-camembert { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 1.2rem; padding: 1.2rem; }
.bu-anneau { width: min(100%, 230px); height: auto; overflow: visible; }
.bu-anneau path { stroke: var(--bu-surface); stroke-width: 2; cursor: pointer; transition: opacity 160ms ease; }
.bu-anneau-total { font-family: var(--titre); font-weight: 700; font-size: 17px; fill: var(--texte); font-variant-numeric: tabular-nums; }
.bu-anneau text { pointer-events: none; }
.bu-anneau-sous { font-size: 9.5px; fill: var(--texte-doux); letter-spacing: 0.04em; }

/* Bande de répartition : une seule barre, découpée en parts */
.bu-repartition { padding: 1.2rem; gap: 1.1rem; }
.bu-bande-totale { display: flex; gap: 2px; height: 26px; width: 100%; }
.bu-segment-bande { display: block; min-width: 3px; height: 100%; cursor: pointer; transition: opacity 160ms ease; }
.bu-segment-bande:first-child { border-radius: 4px 0 0 4px; }
.bu-segment-bande:last-child { border-radius: 0 4px 4px 0; }

/* Légende commune : nom, part, montant. Le texte reste dans les couleurs
   de texte ; la pastille porte la couleur. */
.bu-legende { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; gap: 0.1rem; max-width: none; }
.bu-legende li { margin: 0; }
.bu-leg {
  width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) 3.4rem auto; align-items: center; gap: 0.6rem;
  border: 0; background: none; font: inherit; font-size: var(--t-s); color: var(--texte); text-align: left;
  padding: 0.42rem 0.5rem; border-radius: var(--rayon); cursor: pointer; min-height: 40px;
}
.bu-leg:hover, .bu-leg:focus-visible { background: var(--bu-surface-2); }
.bu-leg-nom { min-width: 0; overflow-wrap: anywhere; line-height: 1.3; }
.bu-leg-pc { color: var(--texte-doux); text-align: right; }
.bu-leg-val { font-weight: 700; text-align: right; white-space: nowrap; }

/* Survol d'une partie : les autres s'effacent un peu */
.bu-graphe[data-actif] :where(.bu-anneau path, .bu-segment-bande) { opacity: 0.35; }
.bu-graphe[data-actif="vehicule"] [data-partie="vehicule"], .bu-graphe[data-actif="vie"] [data-partie="vie"],
.bu-graphe[data-actif="energie"] [data-partie="energie"], .bu-graphe[data-actif="image"] [data-partie="image"],
.bu-graphe[data-actif="admin"] [data-partie="admin"], .bu-graphe[data-actif="sante"] [data-partie="sante"],
.bu-graphe[data-actif="route"] [data-partie="route"], .bu-graphe[data-actif="imprevus"] [data-partie="imprevus"] { opacity: 1; }

@media (min-width: 760px) {
  .bu-camembert { grid-template-columns: 230px minmax(0, 1fr); justify-items: stretch; align-items: center; gap: 2rem; padding: 1.4rem 1.6rem; }
  .bu-legende { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.4rem; }
  .bu-camembert .bu-legende { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 1024px) {
  .bu-camembert .bu-legende { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- 50-ocsia.css ---- */
/* ==========================================================================
   Objectif Naturel dans OCSIA2 : ce qui relie la feuille d'origine aux pièces du cœur.
   Le site public ne charge pas la feuille du cœur (assets/css/site.css) : ses classes .entete, .bouton, .hero,
   .bloc… portent les mêmes noms que celles du site d'origine. Ici, seulement ce qu'il faut pour que les sections,
   les formulaires et les commentaires d'OCSIA2 prennent l'allure du site d'origine.
   ========================================================================== */

/* La section du cœur (<section class="bloc"><div class="bloc__in">) est la <section> d'origine : l'enveloppe
   intérieure ne compte pas dans la mise en page (le hero reste un conteneur flex, comme avant). */
.bloc > .bloc__in { display: contents; }
.bloc__fond { position: absolute; inset: 0; z-index: 0; }

[hidden] { display: none !important; }
.visuellement-cache {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.piege { position: absolute !important; left: -9999px; top: -9999px; height: 0; overflow: hidden; }
.cache-mobile { }
@media (max-width: 767px) { .cache-mobile { display: none !important; } }
@media (min-width: 768px) { .cache-ordi { display: none !important; } }

/* --- Boutons du cœur (formulaires, commentaires) : mêmes styles que ceux d'origine --- */
.bouton--principal { background: var(--vert-on); color: var(--blanc); }
.bouton--secondaire { background: transparent; color: var(--vert-on); border-color: var(--vert-on); }
@media (hover: hover) and (pointer: fine) {
  .bouton--principal:hover { background: var(--vert-fonce); color: var(--blanc); }
  .bouton--secondaire:hover { background: var(--vert-on); color: var(--blanc); }
}
.bouton--principal:active { background: var(--vert-fonce); color: var(--blanc); }
button.bouton { font-family: var(--titre); }
button.bouton[disabled] { opacity: .6; cursor: progress; }

/* --- Formulaires OCSIA2 : l'allure du formulaire de contact d'origine (9.14) --- */
.formulaire fieldset.formulaire__etape { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 1.1rem; }
.formulaire .requis { display: none; }        /* le site d'origine ne marque pas les champs obligatoires */
.formulaire .champ__aide { font-size: var(--t-xs); color: var(--texte-doux); margin: 0; }
.formulaire .champ__erreur { color: #A02D1F; font-size: var(--t-xs); font-weight: 600; margin: 0; }
.formulaire [aria-invalid="true"] { border-color: #A02D1F; }
.formulaire__actions { display: grid; }
.formulaire__mention { font-size: var(--t-xs); color: var(--texte-doux); margin: 0; }
.formulaire__message {
  padding: 1rem 1.2rem; border-radius: var(--rayon); font-size: var(--t-s);
  background: var(--vert-clair); color: var(--vert-fonce); margin: 0;
}
.formulaire__message.erreur { background: #FBE9E7; color: #A02D1F; }
.formulaire .case { display: flex; gap: 0.6rem; align-items: flex-start; font-size: var(--t-xs); font-weight: 400; line-height: 1.5; cursor: pointer; }
.formulaire .case input { width: 1.1rem; height: 1.1rem; margin-top: 0.15rem; flex: none; accent-color: var(--vert-on); }
.champ.champ--consentement { gap: 0; }
.formulaire-ferme, .formulaire-apercu { font-size: var(--t-s); color: var(--texte-doux); }

/* Lettre (on-newsletter) : bouton jaune pleine largeur, comme « S'inscrire » et « Recevoir la lettre ». */
form[data-formulaire="on-newsletter"] .bouton--principal { background: var(--jaune-on); color: var(--texte); width: 100%; justify-content: center; }
@media (hover: hover) and (pointer: fine) {
  form[data-formulaire="on-newsletter"] .bouton--principal:hover { background: var(--jaune-fonce); color: var(--texte); }
}
form[data-formulaire="on-newsletter"] .bouton--principal:focus-visible { outline-color: var(--texte); }
.soutien-boite form[data-formulaire="on-newsletter"] .formulaire__mention { display: none; }

/* Formulaire compact du pied de page (form-newsletter d'origine) : libellés pour les lecteurs d'écran, textes indicatifs. */
.pied .form-newsletter-on .formulaire { gap: 0.7rem; max-width: 420px; }
.pied .form-newsletter-on fieldset.formulaire__etape { gap: 0.7rem; }
.pied .form-newsletter-on .champ { gap: 0; }
.pied .form-newsletter-on .champ > label:not(.case) {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.pied .form-newsletter-on input:not([type="checkbox"]) {
  width: 100%; padding: 0.85rem 1rem; border: 1px solid transparent; border-radius: var(--rayon);
  background: var(--blanc); color: var(--texte); font-family: var(--corps); font-size: 0.95rem;
}
.pied .form-newsletter-on input::placeholder { color: #9C8F80; }
.pied .form-newsletter-on .case,
.pied .form-newsletter-on .formulaire__mention { color: rgba(253, 248, 238, 0.78); }
.pied .form-newsletter-on .formulaire__mention { line-height: 1.5; }
.pied .form-newsletter-on .formulaire__message { background: rgba(253, 248, 238, 0.12); color: var(--creme); }
.pied .form-newsletter-on .formulaire__message.erreur { background: #FBE9E7; color: #A02D1F; }

/* Mention OCSIA2 et lien discret vers l'espace (ajouts validés au point de contrôle 1). */
.pied-ocsia {
  margin: -1.2rem 0 0; padding-bottom: 1.8rem; max-width: none;
  font-size: var(--t-xs); color: rgba(253, 248, 238, 0.6);
}
.pied .pied-ocsia a { color: rgba(253, 248, 238, 0.75); text-decoration: underline; text-decoration-color: rgba(253, 248, 238, 0.35); }

/* --- Commentaires modérés (journal et articles) : la colonne de lecture d'un article --- */
.bloc.commentaires { padding-block: var(--section-y); border-top: 1px solid var(--bordure); }
.commentaires .bloc__in { display: block; max-width: 720px; margin-inline: auto; padding-inline: var(--gouttiere); }
.commentaires h2 { font-size: var(--t-l); }
.commentaires__nb { color: var(--texte-doux); font-weight: 600; }
.commentaires__liste, .commentaire__reponses { list-style: none; padding: 0; margin: 0 0 2.4rem; max-width: none; }
.commentaire { padding-block: 1.2rem; border-top: 1px solid var(--bordure); }
.commentaire__tete { font-size: var(--t-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--texte-doux); margin-bottom: 0.4rem; }
.commentaire__tete strong { color: var(--vert-on); }
.commentaire__reponses { margin: 1rem 0 0 1.4rem; }
.commentaire--equipe { border-left: 3px solid var(--jaune-on); padding-left: 1rem; }
.commentaires__vide { color: var(--texte-doux); }
.commentaires__form { margin-top: 2rem; }
.commentaires__form h3 { font-size: var(--t-m); margin: 0; }

/* --- Éditeur : un texte vide reste cliquable --- */
.en-edition .on-t:empty::before { content: attr(data-vide); opacity: .5; }