/* ============================================================
   Carbone.eco v2 — pages publiques de la récurrence (contrat §5)
   /entreprises, /offrir, /comprendre, /mon-espace, /newsletter, blocs
   « Pour qui ? » du formulaire, journal et registre de la fiche projet,
   bandeau saisonnier. Chargée après app.css : mêmes jetons, mêmes classes.
   ============================================================ */

/* ---------- Navigation : six entrées, on resserre avant le burger ---------- */
@media (max-width:1180px){ .nav { gap:18px; } .nav-link { font-size:13px; letter-spacing:.4px; } .btn-nav { padding:10px 18px; } }
@media (max-width:1000px){ .nav { gap:14px; } .nav-link { font-size:12.5px; letter-spacing:.2px; } }

/* ---------- Bandeau saisonnier ---------- */
/* La mention légale en pied de fiche : elle ferme la page, elle ne s'y annonce
   pas. Un peu d'air au-dessus, et le fond crème du site plutôt que le vert pâle
   des encadrés de contenu — c'est une mention, pas un bloc à lire. */
.mention-lbc-pied { margin:0 auto 48px; }

/* Carte « Certification » des fiches projet : les deux logos officiels côte à
   côte, à hauteur égale, à la place du texte. Hauteur fixée pour que la tuile
   garde la même taille que ses voisines. */
.fiche-faits .fait-label strong { display:flex; align-items:center; }
.fait-logos { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
/* Côte à côte dans une tuile d'environ 190 px : 38 px de haut font 88 + 76 px
   de large, gouttière comprise. En dessous, ils passent l'un sous l'autre. */
.fait-logos img { height:38px; width:auto; max-width:100%; }

/* Jaune soleil : réservé au bandeau saisonnier, le seul endroit du site qui
   doive interrompre la lecture. Déclaré ici plutôt que dans la palette générale
   parce qu'il ne sert qu'ici — et qu'un jaune vif lâché dans les variables
   communes finit toujours par se retrouver ailleurs. */
:root { --jaune-soleil:#F6C544; }

/* Fond jaune soleil. Le bandeau était en vert nuit : il se fondait dans
   l'en-tête et personne ne le voyait. Le jaune est la seule couleur de cette
   palette qui interrompe la lecture sans crier, et c'est aussi la couleur de la
   saison qu'il annonce.
   Le texte passe donc en encre, pas en blanc : sur ce jaune, le blanc tombe à
   1,7:1 — illisible — quand l'encre monte à 11,4:1. Le lien prend le vert
   d'action (5,7:1), et l'icône l'encre plutôt que l'or, qui disparaîtrait. */
.bandeau-saison { position:relative; z-index:510; background:var(--jaune-soleil); color:var(--encre); font-size:14.5px; border-bottom:1px solid rgba(15,26,20,.14); }
.bandeau-saison .wrap { display:flex; align-items:center; justify-content:center; gap:14px; min-height:44px; padding-top:6px; padding-bottom:6px; }
.bandeau-saison p { margin:0; display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:center; text-align:center; }
.bandeau-saison .ic { color:var(--encre); }
.bandeau-saison a { color:var(--vert-cta); font-weight:700; text-decoration:underline; text-decoration-color:rgba(20,83,45,.45); text-underline-offset:3px; }
.bandeau-saison a:hover { text-decoration-color:var(--vert-cta); }
.bandeau-fermer { position:absolute; right:12px; top:50%; transform:translateY(-50%); background:transparent; border:0; color:rgba(15,26,20,.6); width:36px; height:36px; border-radius:50%; display:grid; place-items:center; }
.bandeau-fermer:hover { background:rgba(15,26,20,.09); color:var(--encre); }
.bandeau-fermer .ic { color:currentColor; }
/* Le bandeau est cuit dans le HTML par le build : un script en tête le masque
   avant le premier rendu s'il a été fermé dans la session, sinon il
   apparaîtrait puis disparaîtrait sur chaque page. */
:root.bandeau-ferme .bandeau-saison { display:none !important; }
/* 172 px de haut à 375 px, soit 21 % du premier écran — et 34 % en paysage.
   Le texte descend d'un cran, l'interligne se resserre, la croix se cale sur
   la première ligne au lieu de flotter au milieu de la quatrième. */
@media (max-width:700px){
  .bandeau-saison { font-size:13px; line-height:1.42; }
  .bandeau-saison .wrap { align-items:flex-start; padding-top:9px; padding-bottom:9px; }
  .bandeau-saison .bandeau-fermer { align-self:flex-start; }
  /* Le paragraphe est une rangée flexible qui passe à la ligne : sur un écran
     étroit, la feuille décorative prenait une ligne à elle seule et le lien
     une autre. Le texte redevient du texte, et le lien suit la phrase. */
  .bandeau-saison p { display:block; }
  .bandeau-saison p > .ic { display:none; }
}
@media (max-width:600px){ .bandeau-saison .wrap { padding-right:44px; justify-content:flex-start; } .bandeau-saison p { text-align:left; justify-content:flex-start; } }

/* Masqué visuellement, lu par les lecteurs d'écran */
.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------- En-tête de page aligné à gauche (entreprises, offrir, espace) ---------- */
.page-head-gauche .section-head { text-align:left; margin:0 0 10px; max-width:none; }
.page-head-gauche .section-sub { margin:0; }
.page-head-gauche h1 { max-width:20ch; }

/* ---------- /entreprises ---------- */
.ent-grille { display:grid; grid-template-columns:1.05fr .95fr; gap:36px; align-items:start; }
.ent-grille > *, .offrir-grille > *, .espace-grille > * { min-width:0; }
.ent-panneau { background:var(--blanc); border:1px solid var(--ligne); border-radius:var(--r); padding:30px; }
.ent-panneau h2 { font-size:30px; }
.choix-activite { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.choix-activite label { border-radius:16px; flex-direction:column; align-items:flex-start; gap:2px; padding:14px 16px; }
.choix-activite small { font-weight:400; color:var(--gris); font-size:12.5px; }
.ent-resultat { background:linear-gradient(160deg, #123B26, var(--vert-nuit)); color:#fff; border-radius:var(--r); padding:30px; position:sticky; top:100px; }
.ent-resultat .calc-total strong { font-size:clamp(48px,4.8vw,68px); }
.ent-resultat .calc-total em { font-style:normal; color:var(--or); font-weight:700; }
.ent-methode { list-style:none; padding:0; margin:18px 0; display:grid; gap:8px; font-size:14.5px; }
.ent-methode li { display:flex; justify-content:space-between; gap:14px; border-bottom:1px dashed rgba(255,255,255,.2); padding-bottom:8px; }
.ent-methode li span:last-child { font-weight:700; white-space:nowrap; text-align:right; }
.ent-prudence { background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2); border-radius:16px; padding:14px 18px; font-size:14px; color:rgba(255,255,255,.88); margin:0 0 6px; }
.ent-prudence a { color:#fff; }
.ent-resultat .btn { margin-top:16px; }
.ent-resultat .note { color:rgba(255,255,255,.65); margin:14px 0 0; }
.recevez { display:grid; grid-template-columns:repeat(5,1fr); gap:18px; margin-top:34px; }
.recevez-item { background:var(--blanc); border:1px solid var(--ligne); border-radius:var(--r); padding:24px 22px; position:relative; }
.recevez-item .coben-ic { background:var(--vert-pale); color:var(--vert-fonce); margin-bottom:14px; }
.recevez-item h3 { font-size:18.5px; margin-bottom:6px; }
.recevez-item p { font-size:14.5px; color:var(--gris); margin:0; }
.recevez-num { position:absolute; top:14px; right:18px; font-family:var(--sans); font-weight:800; font-size:13px; color:var(--vert); }
.references { text-align:center; padding:56px 0; border-top:1px solid var(--ligne); border-bottom:1px solid var(--ligne); background:var(--blanc); }
.references .kicker { margin-bottom:22px; }
.references-liste { list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; justify-content:center; gap:14px 0; font-family:var(--sans); font-size:clamp(22px,2.4vw,30px); color:var(--encre); letter-spacing:-.3px; }
.references-liste li { display:inline-flex; align-items:center; }
.references-liste li + li::before { content:"✦"; color:var(--or); font-size:.5em; margin:0 22px; }
.references-note { margin:18px auto 0; max-width:600px; }
.etapes-4 { grid-template-columns:repeat(4,1fr); }

/* ---------- /offrir ---------- */
.occasions { display:grid; grid-template-columns:repeat(6,1fr); gap:12px; margin-top:10px; }
.occasion { position:relative; display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; background:var(--blanc); border:1.5px solid var(--ligne); border-radius:var(--r); padding:22px 14px 18px; cursor:pointer; transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s; }
.occasion:hover { transform:translateY(-3px); box-shadow:var(--ombre); }
.occasion input { position:absolute; opacity:0; width:0; height:0; }
.occasion:has(input:checked) { border-color:var(--vert); background:var(--vert-pale); }
.occasion:has(input:focus-visible) { outline:3px solid var(--vert); outline-offset:2px; }
.occasion .coben-ic { width:50px; height:50px; border-radius:16px; }
.occasion:has(input:checked) .coben-ic { background:var(--vert-cta); color:#fff; }
.occasion strong { font-family:var(--sans); font-weight:600; font-size:20px; line-height:1.1; }
.occasion small { font-size:12.5px; color:var(--gris); line-height:1.4; }
.offrir-grille { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.offrir-form { background:var(--blanc); border:1px solid var(--ligne); border-radius:var(--r); padding:30px; }
.offrir-form h2 { font-size:30px; }
.choix-volumes { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.choix-volumes label { border-radius:16px; flex-direction:column; align-items:flex-start; gap:2px; padding:14px 16px; }
.choix-volumes span { font-family:var(--sans); font-size:19px; }
.choix-volumes small { font-weight:400; color:var(--gris); font-size:12.5px; }
.offrir-prix { font-size:14.5px; color:var(--gris); margin:14px 0 22px; }
.offrir-prix strong { color:var(--encre); font-family:var(--sans); }
.certif-cadeau .certif-corps strong { font-size:18px; }
.certif-message { font-family:var(--sans);  font-size:16px; color:var(--encre); margin:12px 0 0; padding:12px 14px; background:var(--or-pale); border-radius:10px; border-left:3px solid var(--or); }
.certif-occasion { display:inline-block; font-size:12px; letter-spacing:1.5px; text-transform:uppercase; color:var(--ble); background:var(--or-pale); border-radius:999px; padding:4px 10px; margin-bottom:6px; }

/* ---------- formulaire de contribution : « Pour qui ? », cadeau, récapitulatif mobile ---------- */
.contrib-form textarea { border:1.5px solid var(--ligne); border-radius:14px; padding:13px 15px; background:var(--creme); width:100%; font-family:inherit; font-size:16px; min-height:110px; resize:vertical; }
/* L'anneau au clavier est posé dans app.css avec les autres champs ; ici on ne
   garde que le halo du clic à la souris. */
.contrib-form textarea:focus:not(:focus-visible) { border-color:var(--vert); outline:none; box-shadow:0 0 0 4px rgba(20,155,13,.12); }
.compteur { text-align:right; font-size:12.5px; color:var(--gris); }
.cadeau-bloc { margin-top:16px; padding-top:16px; border-top:1px dashed var(--ligne); }
.cadeau-note { display:flex; gap:10px; align-items:flex-start; background:var(--or-pale); border-radius:14px; padding:12px 16px; font-size:14px; color:var(--ble); margin:0 0 16px; }
.cadeau-note .ic { margin-top:4px; flex-shrink:0; }
.renouvellement-note { display:flex; gap:10px; align-items:center; background:var(--vert-pale); border:1px solid transparent; border-radius:14px; padding:12px 16px; font-size:14.5px; color:var(--vert-fonce); font-weight:600; }
.renouvellement-note .ic { color:var(--vert); }
.contrib-recap-mobile { display:none; }
@media (max-width:900px){
  .contrib-recap-mobile { display:flex; position:fixed; left:0; right:0; bottom:0; z-index:480; align-items:center; gap:14px; background:var(--blanc); border-top:1px solid var(--ligne); box-shadow:0 -10px 30px rgba(15,26,20,.12); padding:12px 16px calc(12px + env(safe-area-inset-bottom)); }
  .contrib-recap-mobile .recap-mobile-texte { flex:1; display:grid; line-height:1.25; min-width:0; }
  .contrib-recap-mobile .recap-mobile-texte span { font-size:12.5px; color:var(--gris); }
  .contrib-recap-mobile .recap-mobile-texte strong { font-family:var(--sans); font-size:19px; white-space:nowrap; }
  .contrib-recap-mobile .btn { padding:13px 20px; font-size:15px; white-space:nowrap; }
  body.page-contribuer main { padding-bottom:84px; }
  /* Le détail HT / TVA / TTC reste visible : c'est la réassurance au moment de
     décider. Il remonte simplement au-dessus du bouton, la barre collante ne
     porte plus que le total. */
  /* Le récapitulatif ne remonte plus en TÊTE de page. `order:-1` faisait
     l'inverse de ce que dit la ligne au-dessus : 615 px de récapitulatif d'une
     commande pas encore passée s'intercalaient entre l'introduction et l'étape
     1, et le premier palier cliquable tombait à 1 577 px — presque deux écrans
     avant de pouvoir décider quoi que ce soit, sur l'écran qui décide de la
     vente. Il reste donc à sa place dans le document, c'est-à-dire juste avant
     le bouton, et la barre collante porte le total pendant tout le reste. */
  .contrib-aside .achat-chiffres { display:block; margin-top:0; }
  .contrib-aside .recap-photo { display:none; }   /* la photo mangeait un écran avant le formulaire */
  /* …mais le badge de type restait en position absolue, calé sur une photo qui
     n'est plus là : « REBOISEMENT » se posait par-dessus le nom du projet et sa
     commune, en haut de la page de paiement. Il repasse dans le flux. */
  .contrib-aside .recap-projet .tag { position:static; justify-self:start; margin-bottom:6px; }
}

/* ---------- fiche projet : journal, contributeurs, abonnement ---------- */
.journal { position:relative; margin-top:6px; }
.journal-liste { list-style:none; padding:0; margin:0; display:grid; gap:0; position:relative; }
.journal-liste::before { content:""; position:absolute; left:7px; top:8px; bottom:8px; width:2px; background:var(--ligne); }
.journal-entree { position:relative; padding:0 0 30px 34px; }
.journal-entree::before { content:""; position:absolute; left:0; top:6px; width:16px; height:16px; border-radius:50%; background:var(--blanc); border:3px solid var(--vert); box-sizing:border-box; }
.journal-entree:last-child { padding-bottom:6px; }
.journal-meta { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:4px; }
.journal-date { font-family:var(--sans); font-weight:700; font-size:13px; letter-spacing:1.5px; text-transform:uppercase; color:var(--vert-fonce); }
.journal-type { font-size:12px; letter-spacing:1.2px; text-transform:uppercase; color:var(--ble); background:var(--or-pale); border-radius:999px; padding:3px 9px; }
.journal-entree h3 { font-family:var(--sans); font-weight:600; font-size:24px; letter-spacing:-.3px; margin:0 0 8px; }
.journal-entree p { font-size:16px; margin-bottom:10px; }
.journal-photo { border-radius:14px; overflow:hidden; margin:6px 0 10px; max-width:640px; border:1px solid var(--ligne); }
.journal-photo img { width:100%; height:auto; display:block; }
.journal-vide, .contributeurs-vide { background:var(--blanc); border:1px dashed var(--ligne); border-radius:var(--r); padding:26px 28px; display:flex; gap:16px; align-items:center; }
.journal-vide .coben-ic, .contributeurs-vide .coben-ic { background:var(--vert-pale); color:var(--vert-fonce); }
.journal-vide p, .contributeurs-vide p { margin:0; color:var(--gris); }
.journal-vide p strong, .contributeurs-vide p strong { display:block; color:var(--encre); font-family:var(--sans); font-weight:600; font-size:21px; margin-bottom:2px; }
.contributeurs { list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:10px; }
.contributeurs li { display:inline-flex; align-items:center; gap:10px; background:var(--blanc); border:1px solid var(--ligne); border-radius:999px; padding:7px 14px 7px 7px; font-size:14.5px; }
.contributeurs .initiales { width:32px; height:32px; border-radius:50%; background:var(--vert-fonce); color:#fff; display:grid; place-items:center; font-family:var(--sans); font-weight:800; font-size:12px; letter-spacing:.5px; flex-shrink:0; }
.contributeurs strong { font-family:var(--sans); }
.contributeurs small { color:var(--gris); }
.contributeurs-plus { margin:14px 0 0; }
.abo-form { display:grid; gap:10px; margin-top:8px; }
.abo-form .champ { margin:0; }
.abo-form .btn { width:100%; }
.abo-ok { display:flex; gap:12px; align-items:flex-start; background:var(--vert-pale); border-radius:14px; padding:14px 16px; font-size:15px; color:var(--vert-fonce); }
.abo-ok .ic { color:var(--vert); margin-top:4px; flex-shrink:0; }
.abo-ok strong { display:block; }

/* ---------- /comprendre ---------- */
.comprendre-etapes.apropos-section { margin-bottom:0; scroll-margin-top:80px; }
.comprendre-etapes .section-head h2 { font-size:clamp(30px,3.5vw,48px); }
.comprendre-etapes .etapes { margin-top:0; }
.manif-comprendre { margin:64px 0 0; }
.manif-comprendre .manif-titre { font-size:clamp(30px,3.4vw,44px); }
.manif-comprendre p { font-size:17.5px; }

/* Les quatre masses du prix d'une tonne. Volontairement une liste de
   définitions et non un graphique : un camembert dessinerait au pixel la
   ventilation précise que le client a écartée. La part se lit en mots
   (« environ la moitié »), à droite du titre sur grand écran, dessous quand la
   place manque — jamais en chiffre, jamais à la règle. */
.masses-prix { margin:28px 0 0; display:grid; gap:14px; }
.masses-prix .masse { background:var(--blanc); border:1px solid var(--ligne); border-radius:var(--r); padding:18px 22px; }
.masses-prix dt { display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 14px; font-family:var(--sans); font-weight:700; font-size:18px; letter-spacing:-.3px; }
.masses-prix .masse-part { font-weight:600; font-size:14px; letter-spacing:0; color:var(--or-texte); background:var(--or-pale); border-radius:999px; padding:3px 12px; white-space:nowrap; }
.masses-prix dd { margin:8px 0 0; font-size:16px; line-height:1.7; color:var(--gris); }

/* ---------- /mon-espace et /newsletter ---------- */
.espace-grille { display:grid; grid-template-columns:460px 1fr; gap:40px; align-items:start; }
.espace-form { background:var(--blanc); border:1px solid var(--ligne); border-radius:var(--r); padding:26px 28px; display:grid; gap:8px; }
.espace-form p { margin:0 0 6px; }
.espace-etat { background:var(--vert-pale); border-radius:14px; padding:16px 18px; display:flex; gap:12px; align-items:flex-start; }
.espace-etat .ic { color:var(--vert); margin-top:4px; flex-shrink:0; }
.espace-etat strong { display:block; font-family:var(--sans); }
.espace-tete { display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; background:var(--blanc); border:1px solid var(--ligne); border-radius:var(--r); padding:18px 24px; margin-bottom:26px; }
.espace-tete p { margin:0; color:var(--gris); }
.espace-tete p strong { color:var(--encre); }
.espace-tete .btn { padding:11px 20px; font-size:14.5px; }
.espace-section { margin-bottom:44px; }
.espace-section h2 { font-size:32px; }
.mes-contribs { list-style:none; padding:0; margin:0; display:grid; gap:14px; }
.ma-contrib { background:var(--blanc); border:1px solid var(--ligne); border-radius:var(--r); padding:22px 24px; display:grid; grid-template-columns:1fr auto; gap:18px 24px; align-items:center; }
.ma-contrib-tete { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:4px; }
.ma-contrib-tete strong { font-family:var(--sans); font-weight:600; font-size:24px; letter-spacing:-.3px; }
.ma-contrib-meta { display:flex; flex-wrap:wrap; gap:6px 18px; font-size:14.5px; color:var(--gris); margin:0; }
.ma-contrib-meta b { color:var(--encre); font-family:var(--sans); }
.ma-contrib-actions { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
.ma-contrib-actions .btn { padding:10px 16px; font-size:14px; }
/* Pourquoi « Renouveler » manque sur cette ligne-là : un projet clos n'accepte
   plus de contribution. Un bouton qui disparaît sans un mot se lit comme une
   différence de traitement. */
.ma-contrib-clos { align-self:center; font-size:13.5px; color:var(--gris); }
.ma-contrib-tete a { color:inherit; }
.badge-cadeau { background:var(--or-pale); color:var(--ble); border-color:transparent; }
.badge-attente { background:var(--jaune-pale); color:#6E5417; border-color:transparent; }
.mes-abos { list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.mon-abo { background:var(--blanc); border:1px solid var(--ligne); border-radius:16px; padding:14px 18px; display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.mon-abo > span { flex:1; min-width:200px; }
.mon-abo strong { font-family:var(--sans); display:block; }
.mon-abo small { color:var(--gris); }
.mon-abo .champ { margin:0; min-width:220px; }
.mon-abo select { padding:10px 14px; }
.espace-vide { background:var(--blanc); border:1px dashed var(--ligne); border-radius:var(--r); padding:26px 28px; color:var(--gris); }
.espace-vide a { font-weight:700; }
.newsletter-carte { background:var(--blanc); border:1px solid var(--ligne); border-radius:var(--r); padding:28px; max-width:640px; }
.newsletter-carte h2 { font-size:28px; }
.newsletter-carte .champ { margin-bottom:14px; }
.newsletter-actions { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:8px; }
.freq-aide { list-style:none; padding:0; margin:0 0 18px; display:grid; gap:6px; font-size:14.5px; color:var(--gris); }
.freq-aide b { color:var(--encre); }
.btn-danger { background:transparent; color:#8A2A1A; border:2px solid #F0C4BA; }
.btn-danger:hover { background:#FBE9E5; }

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .recevez { grid-template-columns:repeat(3,1fr); }
  .occasions { grid-template-columns:repeat(3,1fr); }
  .etapes-4 { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:900px){
  .ent-grille, .offrir-grille, .espace-grille { grid-template-columns:1fr; }
  .ent-resultat { position:static; }
  .ent-methode li { flex-direction:column; gap:2px; }
  .ent-methode li span:last-child { white-space:normal; text-align:left; }
  .ma-contrib { grid-template-columns:1fr; }
  .ma-contrib-actions { justify-content:flex-start; }
  .references-liste li + li::before { margin:0 14px; }
}
@media (max-width:600px){
  .recevez, .choix-activite, .etapes-4 { grid-template-columns:1fr; }
  .occasions { grid-template-columns:1fr 1fr; gap:8px; }
  .occasion { padding:16px 10px 14px; }
  .choix-volumes { grid-template-columns:1fr; }
  .ent-panneau, .offrir-form, .espace-form, .newsletter-carte { padding:20px 18px; }
  .references-liste { font-size:21px; flex-direction:column; gap:8px; }
  .references-liste li + li::before { display:none; }
}

/* ---------- Après le paiement : des suites, pas un cul-de-sac ---------- */
.confirm-suites { margin-top:44px; }
.confirm-suites h2 { font-size:24px; margin:0 0 18px; }
.suite-carte {
  display:grid; gap:8px; align-content:start; text-decoration:none; color:inherit;
  background:var(--blanc); border:1px solid var(--ligne); border-radius:var(--r);
  padding:22px 24px; transition:border-color .2s, transform .2s;
}
.suite-carte:hover { border-color:var(--vert); transform:translateY(-2px); }
.suite-carte strong { display:flex; align-items:center; gap:9px; font-size:16.5px; color:var(--vert-cta); }
.suite-carte span { font-size:14.5px; line-height:1.55; color:var(--gris); }
@media (prefers-reduced-motion:reduce){ .suite-carte:hover { transform:none; } }

/* ---------- Page Projets : les deux familles ---------- */
.familles { display:grid; grid-template-columns:1fr 1fr; gap:26px; }
.famille {
  background:var(--blanc); border:1px solid var(--ligne); border-radius:var(--r);
  padding:30px 32px; display:grid; gap:12px; align-content:start;
}
.famille-etiquette {
  display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:700;
  letter-spacing:2px; text-transform:uppercase; color:var(--or-texte);
}
.famille h3 { font-size:22px; margin:0; }
.famille p { margin:0; font-size:15.5px; line-height:1.62; color:var(--gris); }
.famille-note {
  margin-top:4px !important; padding-top:14px; border-top:1px solid var(--ligne);
  color:var(--encre) !important; font-weight:600;
}
.familles-chiffre { margin:26px 0 0; text-align:center; font-size:16.5px; color:var(--gris); }
.familles-chiffre strong { color:var(--encre); }
@media (max-width:900px){ .familles { grid-template-columns:1fr; } }

/* ---------- « Pour aller plus loin » : sortir les pages de contenu du cul-de-sac ---------- */
.suites { padding-top:20px; }
.suites-titre { font-size:22px; margin:0 0 18px; }
.suites-liste { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.suites-liste a {
  display:flex; gap:12px; align-items:flex-start; text-decoration:none; color:inherit;
  background:var(--blanc); border:1px solid var(--ligne); border-radius:14px; padding:16px 18px;
  transition:border-color .2s;
}
.suites-liste a:hover { border-color:var(--vert); }
.suites-liste .ic { color:var(--vert); margin-top:3px; flex-shrink:0; }
.suites-liste strong { display:block; font-size:15.5px; color:var(--vert-cta); }
.suites-liste em { display:block; font-style:normal; font-size:13.5px; color:var(--gris); margin-top:2px; }
@media (max-width:900px){ .suites-liste { grid-template-columns:1fr; } }

/* ---------- Page Contact ---------- */
.contact-carte {
  background:var(--blanc); border:1px solid var(--ligne); border-radius:var(--r);
  padding:26px 28px; display:grid; gap:10px; align-content:start;
}
.contact-etiquette {
  display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:700;
  letter-spacing:2px; text-transform:uppercase; color:var(--or-texte);
}
.contact-valeur { font-size:19px; font-weight:700; color:var(--vert-cta); text-decoration:none; word-break:break-word; }
a.contact-valeur:hover { text-decoration:underline; }
.contact-adresse { font-size:16px; font-weight:600; line-height:1.5; }
.contact-carte p { margin:0; font-size:14.5px; line-height:1.6; color:var(--gris); }

/* ---------- Réassurance du tunnel ----------
   Le seul endroit du site où le doute se paie en euros n'avait ni moyen de
   contact, ni marqueur de paiement, ni justification du prix. */
.contrib-rassurance { margin-top:16px; padding:16px 18px; background:var(--vert-pale); border-radius:14px; }
.rassurance-paiement { margin:0 0 10px; font-size:14.5px; line-height:1.55; color:var(--encre); }
.rassurance-paiement .ic { color:var(--vert-cta); vertical-align:-.15em; }
.rassurance-liste { list-style:none; padding:0; margin:0; display:grid; gap:7px; }
.rassurance-liste li { font-size:14px; line-height:1.5; color:var(--gris); }
.rassurance-liste .ic { color:var(--vert); vertical-align:-.15em; margin-right:5px; }
.rassurance-liste strong { color:var(--encre); }

.calc-sources { margin:14px 0 0; font-size:13.5px; line-height:1.6; color:var(--gris); }
.calc-sources a { color:var(--vert-cta); }

/* ============================================================
   Fiche projet — le récit
   ------------------------------------------------------------
   Nouvel ordre de lecture : le lieu, les leviers, les cobénéfices par famille,
   le cadre certifié, la feuille de route. Ces styles portent les blocs qui
   n'existaient pas avant ; tout ce qui était déjà stylé (chrono, essences,
   methode, cobenef…) reste dans app.css.
   ============================================================ */

/* ---------- Photos dans le fil du récit ----------
   Les photos de terrain ne sont plus des vignettes de 190 px entassées en bas
   de page : elles ponctuent le texte à la largeur de la colonne. */
.recit-photo, .recit-duo { margin:34px 0; }
.recit-photo picture, .recit-duo picture { display:block; border-radius:var(--r); overflow:hidden; background:var(--vert-pale); }
.recit-photo img { width:100%; height:auto; display:block; aspect-ratio:16/10; object-fit:cover; }
.recit-photo-compacte img { aspect-ratio:21/9; }
.recit-duo { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.recit-duo img { width:100%; height:100%; display:block; aspect-ratio:4/3; object-fit:cover; }
.recit-photo figcaption, .recit-duo figcaption { margin-top:10px; font-size:13.5px; line-height:1.55; color:var(--gris); }
.recit-duo figcaption { grid-column:1 / -1; margin-top:0; }

/* ---------- Leviers agricoles : pourquoi, et ce que ça change ---------- */
.levier-tete { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:2px; }
.levier-num { font-size:12px; font-weight:800; letter-spacing:1.6px; text-transform:uppercase; color:#fff; background:var(--vert-cta); border-radius:999px; padding:4px 11px; }
.levier-quoi { font-size:15.5px; line-height:1.7; margin:0 0 12px; }
.levier-jauge { display:flex; align-items:center; gap:5px; margin-top:14px; }
.levier-jauge i { width:22px; height:6px; border-radius:3px; background:var(--ligne); }
.levier-jauge i.on { background:var(--vert); }
.levier-jauge b { margin-left:8px; font-size:12.5px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:var(--gris); }

/* ---------- Cobénéfices classés par famille ----------
   Six familles, chacune alimentée par les cobénéfices déclarés du projet, ceux
   des leviers, et les justifications des ODD. Chaque ligne dit sa source. */
/* Deux colonnes en multi-colonnes plutôt qu'en grille : depuis que les
   cobénéfices des essences alimentent aussi les familles, une famille peut
   compter cinq lignes et une autre une seule. Une grille alignait les cartes
   par rangées et laissait de grands trous sous les plus courtes ; le
   multi-colonnes équilibre les hauteurs et `break-inside` garde chaque carte
   d'un seul tenant. */
.cob-familles { columns:2; column-gap:18px; margin-top:6px; }
.cob-famille { break-inside:avoid; margin:0 0 18px; }
.cob-famille { background:var(--blanc); border:1px solid var(--ligne); border-radius:var(--r); padding:24px 26px; }
.cob-famille header { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.cob-famille .coben-ic { width:42px; height:42px; border-radius:13px; background:var(--vert-pale); color:var(--vert-fonce); margin:0; }
.cob-famille .coben-ic .ic { width:21px; height:21px; }
.cob-famille h3 { font-size:20px; margin:0; flex:1; }
.cob-compte { font-size:12.5px; font-weight:800; color:var(--gris); background:var(--creme); border-radius:999px; min-width:26px; height:26px; display:grid; place-items:center; padding:0 8px; }
.cob-famille ul { list-style:none; padding:0; margin:0; display:grid; gap:14px; }
.cob-famille li { border-top:1px dashed var(--ligne); padding-top:12px; }
.cob-famille li:first-child { border-top:0; padding-top:0; }
.cob-famille li p { margin:0; font-size:15px; line-height:1.6; color:var(--encre); }
.cob-source { display:inline-block; margin-top:5px; font-size:12px; letter-spacing:1.1px; text-transform:uppercase; font-weight:700; color:var(--or-texte); }
.cob-eau .coben-ic { background:#E4F2F8; color:#1D6E8C; }
.cob-sol .coben-ic { background:var(--or-pale); color:var(--ble); }
.cob-economique .coben-ic { background:var(--or-pale); color:var(--ble); }

/* ---------- ODD : le cadre onusien, en pastilles ----------
   Les justifications ont rejoint les familles ci-dessus ; il ne reste ici que
   les objectifs eux-mêmes, avec leurs couleurs officielles (app.css). */
.odd-puces { list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:10px; }
.odd-puce { display:inline-flex; align-items:center; gap:10px; background:var(--blanc); border:1px solid var(--ligne); border-radius:999px; padding:6px 16px 6px 6px; font-size:14px; font-weight:600; }
.odd-puce .odd-num { width:32px; height:32px; border-radius:9px; font-size:14px; }

/* ---------- Feuille de route : ce qui est fait, ce qui vient ---------- */
.route-compteur { background:var(--vert-pale); border-radius:14px; padding:14px 18px; font-size:15.5px; line-height:1.6; margin:0 0 24px; }
.chrono.route { margin-bottom:8px; }
.route .chrono-date { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.route-badge { font-size:12px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase; border-radius:999px; padding:3px 9px; }
.route-fait { background:var(--vert-cta); color:#fff; }
.route-prevu { background:var(--creme); color:var(--gris); border:1px solid var(--ligne); }
/* Une échéance dépassée dont personne n'a publié le constat : ni le vert du
   fait acquis, ni le gris de ce qui n'est pas encore là — l'or de l'attente.
   Voir ETAPE_AUDIT dans projet-detail.mjs pour le pourquoi. */
.route-echu { background:var(--or-pale); color:var(--ble); border:1px solid var(--or); }
.route-avenir .chrono-etape strong { color:var(--gris); }
.chrono-echu::before { background:var(--or-pale); box-shadow:0 0 0 2px var(--or); }
.chrono-echu .chrono-date { color:var(--ble); }

@media (max-width:900px){
  .cob-familles { columns:1; }
}
@media (max-width:600px){
  .recit-duo { grid-template-columns:1fr; }
  .recit-photo img, .recit-photo-compacte img { aspect-ratio:4/3; }
  .cob-famille { padding:20px 18px; }
  .levier-jauge { flex-wrap:wrap; }
}

/* ============================================================
   Le blog — /blog, /blog/page/N, /blog/<slug>
   Une seule colonne étroite pour l'article : la longueur de ligne confortable
   en lecture suivie est de 65 à 75 signes, pas la largeur du site (1 280 px).
   ============================================================ */

/* ---------- Liste des articles ---------- */
.art-liste { display:grid; grid-template-columns:repeat(3,1fr); gap:34px; }
.art-carte { background:var(--blanc); border:1px solid var(--ligne); border-radius:var(--r); overflow:hidden; display:flex; flex-direction:column; transition:transform .2s var(--ease), box-shadow .2s var(--ease); }
.art-carte:hover { transform:translateY(-3px); box-shadow:var(--ombre-lg); }
.art-carte-media { display:block; }
.art-carte-media img { width:100%; height:100%; aspect-ratio:5/3; object-fit:cover; display:block; }
.art-carte-corps { padding:24px 26px 28px; display:flex; flex-direction:column; gap:8px; }
.art-carte-meta { margin:0; font-size:12.5px; font-weight:700; letter-spacing:1.1px; text-transform:uppercase; color:var(--or-texte); }
.art-carte h3 { font-size:21px; line-height:1.25; margin:0; }
.art-carte h3 a { color:var(--encre); text-decoration:none; }
.art-carte h3 a:hover { text-decoration:underline; text-underline-offset:3px; }
.art-carte-corps p { margin:0; font-size:15px; color:var(--gris); }
.art-vide { background:var(--vert-pale); border-radius:var(--r); padding:34px 30px; font-size:17px; margin:0; }
.art-note { max-width:760px; margin:40px auto 0; text-align:center; }
.art-pagination { display:flex; align-items:center; justify-content:center; gap:22px; margin-top:52px; flex-wrap:wrap; font-size:15px; color:var(--gris); }

/* ---------- Article ---------- */
.art-head { max-width:900px; }
.art-head h1 { max-width:22ch; margin-left:auto; margin-right:auto; }
.art-meta { font-size:14px; color:var(--gris); margin:0 0 22px; }
.art-chapeau { font-size:20px; max-width:760px; }
/* Deux colonnes à partir de 1100 px : le sommaire à gauche, collant, le texte à
   droite. En dessous, une seule colonne et le sommaire se replie en accordéon —
   un sommaire de six entrées déplié mange le premier écran d'un téléphone. */
.art-corps { max-width:1140px; display:grid; grid-template-columns:260px minmax(0,1fr); gap:56px; align-items:start; }
.art-corps > .art-illustration { grid-column:1 / -1; }
.art-texte { max-width:760px; min-width:0; }
.art-cote { position:sticky; top:96px; }
.art-cote .art-sommaire { margin:0; max-height:calc(100vh - 140px); overflow-y:auto; }
.art-sommaire-repli { display:none; }
.art-sommaire a { color:var(--encre); text-decoration:none; display:block; padding:2px 0; border-left:2px solid transparent; padding-left:10px; margin-left:-12px; transition:color .18s, border-color .18s; }
.art-sommaire a:hover { color:var(--vert-cta); }
.art-sommaire a.actif { color:var(--vert-cta); font-weight:700; border-left-color:var(--vert); }
@media (max-width:1099px){
  .art-corps { grid-template-columns:1fr; gap:0; max-width:800px; }
  .art-cote { position:static; margin:0 0 34px; }
  .art-cote .art-sommaire { display:none; }
  .art-sommaire-repli { display:block; background:var(--creme); border-left:3px solid var(--or); border-radius:0 14px 14px 0; padding:14px 20px; }
  .art-sommaire-repli summary { cursor:pointer; font-size:15px; display:flex; justify-content:space-between; align-items:center; gap:12px; }
  .art-sommaire-repli summary span { font-size:13px; color:var(--gris); font-weight:600; }
  .art-sommaire-repli ol { margin:14px 0 4px; padding-left:20px; display:grid; gap:8px; font-size:16px; }
}
@media (prefers-reduced-motion:reduce){ .art-sommaire a { transition:none; } }
.art-corps p, .art-corps li { font-size:17.5px; }
.art-illustration { margin:0 0 44px; }
.art-illustration img { width:100%; height:auto; border-radius:var(--r); display:block; }
.art-illustration figcaption { font-size:13.5px; color:var(--gris); margin-top:10px; }

/* Sommaire : sur un texte de mille mots, il sert autant au lecteur pressé
   qu'aux moteurs, qui y lisent le plan de l'article. */
.art-sommaire { background:var(--creme); border-left:3px solid var(--or); border-radius:0 14px 14px 0; padding:22px 26px; margin:0 0 44px; }
.art-sommaire p { margin:0 0 10px; font-size:13px; letter-spacing:1.4px; text-transform:uppercase; color:var(--or-texte); }
.art-sommaire ol { margin:0; padding-left:20px; display:grid; gap:7px; }
.art-sommaire li { font-size:16px; }
.art-sommaire a { color:var(--vert-cta); text-decoration:none; }
.art-sommaire a:hover { text-decoration:underline; text-underline-offset:3px; }

.art-section { margin:0 0 40px; scroll-margin-top:110px; }
.art-section h2 { font-size:29px; margin-bottom:18px; }
.art-corps a { color:var(--vert-cta); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
.art-corps a:hover { text-decoration-thickness:2px; }
.art-citation { margin:26px 0; padding:0 0 0 22px; border-left:3px solid var(--vert-pale); }
.art-citation p { font-size:18px; font-style:italic; margin-bottom:8px; }
.art-citation cite { font-style:normal; font-size:14px; color:var(--gris); }

/* « Le saviez-vous ? » : un encadré, pas une section — il se lit hors du fil. */
.art-encadre { background:var(--vert-pale); border-radius:var(--r); padding:28px 30px; margin:0 0 40px; }
.art-encadre h2 { font-size:20px; display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.art-encadre h2 .ic { color:var(--vert-cta); }
.art-encadre p { margin:0; font-size:16.5px; }

/* Chiffres du jour : composés au build, jamais saisis. */
.art-chiffres { background:var(--vert-nuit); color:#fff; border-radius:var(--r); padding:30px 32px; margin:0 0 40px; }
.art-chiffres h2 { color:#fff; font-size:18px; display:flex; align-items:center; gap:10px; margin-bottom:20px; }
.art-chiffres h2 .ic { color:var(--or); }
.art-chiffres dl { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:22px; margin:0 0 18px; }
.art-chiffres dt { font-size:26px; font-weight:800; letter-spacing:-.5px; }
.art-chiffres dd { margin:4px 0 0; font-size:14px; color:rgba(255,255,255,.78); line-height:1.5; }
.art-chiffres .note { color:rgba(255,255,255,.7); margin:0; }
.art-chiffres .note a { color:#fff; }

.art-projets, .art-sources { list-style:none; padding:0; margin:0 0 8px; display:grid; gap:12px; }
.art-projets a { display:flex; flex-direction:column; gap:3px; background:var(--blanc); border:1px solid var(--ligne); border-radius:14px; padding:16px 20px; text-decoration:none; color:var(--encre); }
.art-projets a:hover { border-color:var(--vert); }
.art-projets span { font-size:14.5px; color:var(--gris); }
.art-sources li { font-size:16px; color:var(--gris); }

/* ---------- Pied de page : la colonne du blog ----------
   Le pied passe de quatre à cinq colonnes ; la marque garde le double de place. */
.footer-grid { grid-template-columns:1.5fr 1fr 1.15fr 1fr 1fr; }
.footer-lien-fort { font-weight:700; margin-top:4px; }
.footer-lien-fort .ic { width:16px; height:16px; }

@media (max-width:1180px){ .footer-grid { grid-template-columns:1fr 1fr 1fr; } }
@media (max-width:1000px){
  .art-liste { grid-template-columns:1fr 1fr; }
  .footer-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:700px){
  .art-liste { grid-template-columns:1fr; }
  .art-chapeau { font-size:18px; }
  .art-corps p, .art-corps li { font-size:16.5px; }
  .art-section h2 { font-size:24px; }
  .art-chiffres, .art-encadre { padding:22px 20px; }
}
@media (max-width:600px){ .footer-grid { grid-template-columns:1fr; } }

/* ============================================================
   FICHE PROJET — habillage graphique (refonte)
   ============================================================
   La structure du récit ne change pas : le lieu, le terrain, les cobénéfices,
   le cadre, la feuille de route, le journal. Ce qui change, c'est le relief.
   Il était réparti uniformément — même carte, même rayon, même ombre partout —
   donc il ne hiérarchisait rien. Il est ici dépensé là où il porte quelque
   chose : la signature du projet dans le hero, les objets qu'on regarde
   (essences, leviers), le rappel de ce qui distingue deux nombres, et le
   raccord entre la feuille de route et le journal.
   ============================================================ */

/* ---------- Hero : la signature du projet ----------
   Les sept fiches s'ouvraient de la même façon : une photo, un titre. Ce qui
   distingue réellement un projet, c'est ce qui y est fait — les essences mises
   en terre, les leviers actionnés. On les nomme dès le premier écran. */
.fiche-signature { list-style:none; margin:2px 0 22px; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.fiche-signature li { display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:#fff; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.3); border-radius:999px; padding:6px 15px 6px 12px; backdrop-filter:blur(6px); }
.fiche-signature .ic { color:var(--or); width:15px; height:15px; }
.fiche-signature .fiche-signature-plus { background:none; border-style:dashed; color:rgba(255,255,255,.8); font-weight:500; }

/* ---------- Le mot de l'opérateur, en grand ----------
   Les trois fermes n'ont aucune photo de terrain : les figures du récit
   disparaissent d'elles-mêmes et la page se vide. Plutôt que de la boucher
   avec une image qui ne serait pas la sienne, on donne à la seule parole
   humaine de la fiche le poids visuel qu'une photo aurait pris. Le motif est
   décoratif et abstrait : il n'illustre rien, il ne prétend rien montrer. */
.mot-operateur-fort { position:relative; overflow:hidden; background:var(--vert-nuit); border-left:0; border-radius:var(--r); padding:44px 48px 36px; margin:48px 0; }
.mot-operateur-fort::after { content:""; position:absolute; inset:0 auto 0 auto; right:-40px; top:-40px; width:280px; height:280px; border-radius:50%; background:repeating-linear-gradient(52deg, rgba(201,164,92,.16) 0 2px, transparent 2px 13px); pointer-events:none; }
.mot-operateur-fort p { position:relative; font-size:25px; line-height:1.4; letter-spacing:-.5px; color:#fff; margin-bottom:18px; max-width:38ch; }
.mot-operateur-fort footer { position:relative; }
.mot-operateur-fort footer strong { color:#fff; }
.mot-operateur-fort footer span { color:rgba(255,255,255,.7); }

/* ---------- Essences et leviers : des objets, plus des paragraphes ----------
   Les deux cartes portent maintenant les champs qui dormaient dans les données
   riches : la vitesse de croissance doublée d'une jauge comparable d'une carte
   à l'autre, la phrase qui justifie le niveau d'impact d'un levier, et les
   méthodes du Label qui retiennent l'essence ou le levier. */
.essence-duo { display:grid; grid-template-columns:1fr 1fr; gap:4px 24px; margin:12px 0 0; }
.essence-duo .essence-detail { margin:0; }
.mini-jauge { display:inline-flex; gap:3px; margin-right:9px; vertical-align:middle; }
.mini-jauge i { width:9px; height:9px; border-radius:2px; background:var(--ligne); }
.mini-jauge i.on { background:var(--vert); }
.essence-faits .fait-jauge dd { display:flex; align-items:center; }
.fiche-methodes { display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin:16px 0 0; padding-top:14px; border-top:1px dashed var(--ligne); font-size:12.5px; }
.fiche-methodes > span { color:var(--gris); font-weight:700; letter-spacing:1.2px; text-transform:uppercase; font-size:11px; }
.fiche-methodes b { font-weight:600; color:var(--or-texte); background:var(--or-pale); border-radius:999px; padding:3px 11px; }
.levier-impact { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 18px; margin-top:16px; padding:12px 16px; background:var(--creme); border-radius:12px; }
.levier-impact .levier-jauge { margin-top:0; }
.levier-impact p { margin:0; font-size:14px; line-height:1.55; color:var(--gris); flex:1 1 260px; }

/* ---------- Graphiques de profil (barres horizontales) ----------
   Le radar des cinq dimensions n'existe que pour les projets qui ont des
   `scores` — les fermes n'en ont pas et perdaient leur seul graphique de
   synthèse. Ces deux-ci le remplacent avec ce que les données disent déjà :
   le niveau d'impact annoncé de chaque levier, et le nombre d'effets
   documentés par famille. Même langage visuel que le graphique de densité. */
/* Anciennement `.profil` : le même nom désignait, dans app.css, la pastille de
   bascule particulier/entreprise. Même spécificité : ces trois graphiques ne
   s'affichaient que parce que pages.css est chargée après app.css. */
.graphe-profil { background:var(--blanc); border:1px solid var(--ligne); border-radius:var(--r); padding:22px 26px; display:grid; gap:14px; }
.graphe-profil-ligne { display:grid; grid-template-columns:minmax(0,1fr) 160px 96px; align-items:center; gap:16px; font-size:14.5px; }
.graphe-profil-ligne > span { min-width:0; }
/* Le type (« résineux ») écrit à côté du nom de famille : l'information ne peut
   pas tenir dans la seule couleur de la barre. */
.graphe-profil-ligne > span small { font-size:12px; color:var(--gris); }
.graphe-profil-barre { height:12px; background:var(--creme); border-radius:999px; overflow:hidden; }
/* La barre part de sa largeur finale et n'est ramenée à zéro que si l'animation
   peut la relancer (la classe .anim-vu est posée par app.js). Sans JavaScript,
   les trois graphiques à barres s'affichaient donc VIDES — l'en-tête du fichier
   promet pourtant des graphiques lisibles sans JavaScript, et c'était vrai des
   SVG seulement. */
.graphe-profil-barre i { display:block; height:100%; width:var(--v); border-radius:999px; background:var(--c,var(--vert-cta)); transition:width 1s var(--ease-out); transition-delay:calc(var(--i) * .12s); }
html.js .graphe:not(.anim-vu) .graphe-profil-barre i { width:0; }
.graphe-profil-ligne b { font-size:13px; font-weight:700; letter-spacing:.4px; color:var(--vert-fonce); font-variant-numeric:tabular-nums; }

/* ---------- Ce qui est large défile dans son cadre, jamais la page ----------
   Un tableau à cinq colonnes et une frise sur cinq ans ne tiennent pas dans
   375 px, et il n'est pas question de les rétrécir jusqu'à l'illisible ni de
   laisser la page déborder horizontalement. Ils défilent donc DANS leur cadre :
   `scrollWidth == clientWidth` reste vrai sur le document. */
.tableau-large { overflow-x:auto; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; border-radius:var(--r); }
.tableau-large > svg { width:100%; min-width:480px; height:auto; display:block; }
/* L'introduction du tableau, posée hors du cadre à défilement pour qu'elle se
   lise en entier à 375 px (voir tableauPeuplement). */
.graphe-intro { font-size:13.5px; color:var(--gris); line-height:1.6; margin:0 0 10px; }
.tableau-defile { display:none; font-size:12px; letter-spacing:.6px; color:var(--or-texte); font-weight:700; margin:0 0 6px; }

/* ---------- Le comparatif du peuplement ----------
   Dix cartes empilées ne comparaient rien : elles se lisaient l'une après
   l'autre. Ce tableau les met côte à côte — c'est le seul endroit de la fiche
   où l'on voit que le peuplier sera mort avant que le chêne planté le même
   jour n'ait fini de grandir. Les barres sont des intervalles (les fiches
   donnent des fourchettes), sur une échelle par colonne. */
.peuplement { width:100%; min-width:700px; border-collapse:collapse; table-layout:fixed; background:var(--blanc); border:1px solid var(--ligne); border-radius:var(--r); font-size:14px; }
/* Largeurs annoncées en tête, et `table-layout:fixed` pour qu'elles soient
   tenues : en répartition automatique, le nom de l'essence — la clé de lecture
   de chaque ligne — se faisait écraser par les colonnes chiffrées et
   « Tilleul à petites feuilles » partait sur quatre lignes. */
/* « CROISSANCE » se lisait « CROISSAN / CE » : un seul mot, une colonne trop
   étroite de deux pixels, et un overflow-wrap:break-word hérité qui coupe au
   milieu. Un en-tête de tableau ne se coupe pas en deux — il tient sur sa
   largeur, ou il passe à la ligne à un espace. */
.peuplement thead th { overflow-wrap:normal; }
.peuplement thead th:nth-child(1) { width:23%; }
.peuplement thead th:nth-child(2) { width:17%; }
.peuplement thead th:nth-child(3) { width:17%; }
.peuplement thead th:nth-child(4) { width:18%; }
.peuplement thead th:nth-child(5) { width:25%; }
.peuplement caption { caption-side:top; text-align:left; font-size:13.5px; color:var(--gris); padding:0 0 10px; }
.peuplement thead th { text-align:left; vertical-align:bottom; font-size:12px; letter-spacing:1.2px; text-transform:uppercase; color:var(--gris); font-weight:700; padding:14px 14px 10px; border-bottom:1px solid var(--ligne); }
/* L'échelle passe à la ligne plutôt que de déborder (« échelle 0 à 1 000 ans »
   sortait de sa colonne de 12 px), mais jamais au milieu d'un nombre. */
.peuplement thead th span { display:block; margin-top:3px; font-size:12px; letter-spacing:.4px; text-transform:none; font-weight:600; color:var(--or-texte); }
.peuplement tbody tr + tr th, .peuplement tbody tr + tr td { border-top:1px solid var(--ligne); }
.peuplement tbody th, .peuplement tbody td { text-align:left; vertical-align:middle; padding:12px 14px; font-weight:400; }
/* La colonne d'identification reste à l'écran pendant qu'on fait défiler les
   quatre autres : sans elle, on lisait une barre et une fourchette sans savoir
   de quel arbre on parlait — un comparatif dont on ne peut pas voir la ligne et
   la colonne en même temps ne compare rien. */
.peuplement thead th:first-child, .peuplement tbody th[scope="row"] { position:sticky; left:0; z-index:1; background:var(--blanc); box-shadow:6px 0 8px -6px rgba(15,26,20,.14); }
.peuplement tbody tr:hover th[scope="row"] { background:var(--vert-pale); }
.peuplement tbody th strong { display:block; font-size:15px; font-weight:700; line-height:1.25; }
.peuplement tbody th span { display:block; margin-top:2px; font-size:12px; letter-spacing:1px; text-transform:uppercase; color:var(--gris); }
.peuplement tbody tr:hover th, .peuplement tbody tr:hover td { background:var(--vert-pale); }
.pp-cran b { display:block; font-weight:700; font-size:13.5px; white-space:nowrap; }
/* La qualification du dossier (« en production de biomasse ») : sous le rang,
   sur autant de lignes qu'il lui en faut, jamais coupée par le bord du cadre. */
.pp-cran > span { display:block; margin-top:3px; font-size:12px; line-height:1.3; color:var(--gris); }
.pp-cran .mini-jauge { display:flex; margin:0 0 4px; }
/* --or est réservé aux fonds vert nuit (2,35:1 sur blanc) : ces crans portent
   de l'information sur une carte blanche, ils prennent --or-texte (6,35:1).
   La règle est écrite en tête d'app.css ; c'est elle qu'on applique ici. */
.mini-jauge-or i.on { background:var(--or-texte); }
.pp-plage { min-width:150px; }
/* Le rail porte l'échelle de la colonne ; le segment est posé à sa place
   (--a = début de la fourchette) et fait la largeur de la fourchette (--b).
   Un minimum de 3 % garde visible un intervalle très court. */
.pp-rail { display:block; height:10px; border-radius:999px; background:var(--creme); position:relative; overflow:hidden; }
.pp-rail i { position:absolute; top:0; bottom:0; left:var(--a); width:max(3%, var(--b)); border-radius:999px; background:linear-gradient(90deg,var(--vert-cta),var(--vert)); }
.pp-plage b { display:block; margin-top:5px; font-size:12.5px; font-weight:700; color:var(--vert-fonce); font-variant-numeric:tabular-nums; }
.pp-vide { font-size:12.5px; color:var(--gris); font-style:italic; }

/* À L'IMPRESSION, RIEN N'EST REPLIÉ. Une fiche projet finit souvent dans un
   rapport RSE ou dans un dossier imprimé : un tiroir fermé y laisserait un
   titre sans contenu. Le contenu est dans le HTML de toute façon, on ne fait
   que lever le masquage du navigateur. */
@media print {
  .vignette > summary::before, .btn-deplier, .tableau-defile { display:none; }
  .vignette::details-content { content-visibility:visible !important; }
  .vignette > .vignette-corps { display:block !important; }
  .tableau-large { overflow-x:visible; }
}

/* ---------- Familles botaniques : la diversité réelle du peuplement ---------- */
.legende-botanique { display:flex; align-items:center; gap:8px; margin:10px 0 0; font-size:12.5px; color:var(--gris); }
.legende-botanique span { width:11px; height:11px; border-radius:3px; display:inline-block; }
.legende-botanique .lb-feuillu { background:var(--vert-cta); }
.legende-botanique .lb-resineux { background:var(--or-texte); margin-left:10px; }

/* ---------- La frise des jalons ----------
   Même carte blanche que les autres graphiques de la fiche (jauge, densité,
   profil) : la frise ne flotte pas sur le fond crème, et le liseré blanc des
   étiquettes a un fond auquel correspondre. */
.graphe-frise .tableau-large { background:var(--blanc); border:1px solid var(--ligne); padding:18px 20px; }
   Les points et les traits de rappel apparaissent avec le reste du graphique
   (app.js pose `anim-vu` sur toute figure `.graphe`). */
/* L'animation part d'une image DÉJÀ LISIBLE : le dessin est visible par défaut
   et l'apparition n'est qu'un « from », posée par la classe que le défilement
   ajoute. Sans JavaScript — ou si l'observateur ne se déclenche jamais — la
   frise reste entièrement visible. */
.graphe.anim-vu.graphe-frise circle { animation:frisePoint .5s var(--ease-out) both; }
@keyframes frisePoint { from { opacity:0; transform:scale(.4); } }
.graphe-frise circle { transform-box:fill-box; transform-origin:center; }
@media (prefers-reduced-motion:reduce){ .graphe.anim-vu.graphe-frise circle { animation:none; } }

/* ---------- Deux nombres qu'on prenait pour un seul ----------
   « En cours de labellisation » en tête et « 4 721 tCO₂eq » plus bas : le
   lecteur y voyait une contradiction. L'encadré dit ce que chacun mesure, à
   l'endroit où les deux se croisent. */
.distinction { background:var(--vert-pale); border-left:4px solid var(--vert-cta); border-radius:0 var(--r) var(--r) 0; padding:22px 26px 18px; margin:26px 0 30px; }
.distinction h3 { font-size:18px; margin-bottom:10px; }
.distinction p { font-size:15px; line-height:1.6; margin-bottom:8px; color:var(--encre); }
.distinction p:last-child { margin-bottom:0; }

/* ---------- Le projet en chiffres : la ligne qui dit ce qu'on mesure ---------- */
.chiffres-grille div p { margin:6px 0 0; font-size:12.5px; line-height:1.45; color:var(--gris); }

/* ---------- Feuille de route : avancement et raccord vers le journal ----------
   Les deux frises racontaient la même histoire dans le temps sans jamais se
   parler. Le raccord ferme la première en annonçant la seconde. */
.route-avancement { display:block; height:6px; border-radius:999px; background:rgba(15,61,36,.14); overflow:hidden; margin-top:12px; }
/* La barre part de zéro et se remplit au premier rendu : le compteur n'est pas
   dans la liste des blocs révélés au défilement par app.js, et il n'a pas à y
   entrer pour un trait de six pixels. */
.route-avancement i { display:block; height:100%; width:var(--v); border-radius:999px; background:var(--vert-cta); animation:routeRemplit 1.2s var(--ease-out) both; }
@keyframes routeRemplit { from { width:0; } }
@media (prefers-reduced-motion:reduce){ .route-avancement i { animation:none; } .graphe-profil-barre i { width:var(--v); transition:none; } }
.route-suite { display:flex; gap:12px; align-items:flex-start; margin:26px 0 0; padding:16px 20px; background:var(--blanc); border:1px dashed var(--ligne); border-radius:14px; font-size:15px; color:var(--gris); }
.route-suite .ic { color:var(--or-texte); margin-top:5px; flex-shrink:0; }
.route-suite strong { color:var(--encre); }

/* ---------- Journal : la même frise que la feuille de route ----------
   Le journal était rendu par le navigateur après affichage ; il est désormais
   écrit au build. La pastille d'une entrée est dorée là où celle d'une étape
   de la feuille de route est verte : ce qui est arrivé, plutôt que ce qui
   était prévu. La mention d'une entrée automatique est discrète mais toujours
   présente — elle ne doit jamais laisser croire à une visite de terrain. */
.journal-entree::before { border-color:var(--or); }
.journal-source { display:flex; gap:8px; align-items:flex-start; margin:10px 0 0; font-size:12.5px; line-height:1.5; color:var(--gris); }
.journal-source .ic { color:var(--or-texte); margin-top:3px; flex-shrink:0; }
.journal-auto::before { background:var(--or-pale); }

@media (max-width:900px){
  .essence-duo { grid-template-columns:1fr; gap:4px; }
  .mot-operateur-fort { padding:32px 26px 26px; margin:34px 0; }
  .mot-operateur-fort p { font-size:21px; }
}
@media (max-width:700px){
  /* La pastille numérotée des blocs mange une place qui manque ici. */
  .fiche-bloc::before { display:none; }
  .graphe-profil-ligne { grid-template-columns:1fr; gap:6px; }
  .graphe-profil-ligne b { text-align:left; }
  .fiche-signature li { font-size:13px; padding:5px 12px 5px 10px; }
  .distinction { padding:18px 18px 15px; }
  .route-suite { padding:14px 16px; font-size:14.5px; }
  /* Sous 700 px le tableau ne tient plus : on le resserre pour en montrer le
     plus possible, et on dit qu'il défile plutôt que de laisser croire à une
     colonne coupée. */
  .tableau-defile { display:block; }
  .peuplement { min-width:600px; font-size:13px; }
  .peuplement thead th { padding:12px 10px 8px; letter-spacing:.8px; }
  .peuplement tbody th, .peuplement tbody td { padding:10px; }
  .peuplement thead th:nth-child(2) { width:18%; }
  .peuplement thead th:nth-child(1) { width:22%; }
  .peuplement thead th:nth-child(5) { width:22%; }
}

/* ---------- Encadrés des pages légales ----------
   `.legal-avis strong { display:block }` (app.css) était écrit pour le seul
   intitulé de l'encadré, qui est un enfant direct. Depuis que ces encadrés
   portent de vraies phrases — l'avertissement de /cookies, le formulaire type
   de rétractation des CGV —, une mise en valeur au fil du texte se retrouvait
   sur sa propre ligne, en gras, et se lisait comme un titre. On la remet dans
   la phrase, un cran plus sombre que le corps pour qu'elle se voie encore. */
.legal-avis p strong { display:inline; margin:0; color:var(--encre); }

/* Les pages légales portent désormais de vraies listes — les six droits du
   RGPD, les sous-traitants nommés, les deux catégories de Client des CGV. Le
   retrait par défaut du navigateur (40 px) mange un dixième de la largeur d'un
   téléphone ; on le ramène à la puce, et on aère entre les entrées, qui font
   souvent deux ou trois lignes. */
.legal ul { padding-left:22px; margin:0 0 18px; }
.legal li { margin-bottom:9px; }
.legal li:last-child { margin-bottom:0; }

/* ---------- Blog : recherche par sujet, filtres, compteur ----------
   Le bloc tient en DEUX rangées sur un téléphone (la recherche, puis thème et
   période côte à côte) plus la ligne du compteur : environ 190 px à 375 comme à
   320. Le client a reproché à la page projets des filtres qui repoussaient la
   grille de plusieurs écrans : ici, la première carte reste dans le premier
   écran qui suit l'en-tête. D'où des listes déroulantes plutôt que des
   pastilles — six thèmes en pastilles font quatre rangées à 320 px.
   Sans JavaScript, le formulaire ne pourrait rien filtrer (site statique) : il
   est masqué, et seul le compteur, calculé au build, reste. `html.js` est posé
   dans <head> avant le premier rendu, donc aucun saut de mise en page. */
html:not(.js) .blog-outils { display:none; }
.blog-outils { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(0,1fr) minmax(0,1fr); gap:14px; align-items:end; max-width:980px; margin:0 0 10px; }
.blog-outils .champ { margin:0; gap:5px; min-width:0; }
.blog-outils .champ label { font-size:14px; }
/* 16 px au moins dans les champs : en dessous, iOS zoome la page au focus. */
.blog-outils input, .blog-outils select { padding:11px 14px; background:var(--blanc); font-size:16px; text-overflow:ellipsis; }
.blog-outils input[type="search"]::-webkit-search-cancel-button { cursor:pointer; }
.blog-compte-ligne { display:flex; align-items:center; flex-wrap:wrap; gap:0 18px; min-height:44px; margin:0 0 26px; }
.blog-compte { margin:0; font-size:15px; font-weight:700; color:var(--encre); }
.blog-effacer { background:none; border:0; min-height:44px; padding:0 2px; font:inherit; font-size:14.5px; font-weight:600; color:var(--vert-cta); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.blog-effacer:hover { text-decoration-thickness:2px; }
.blog-plus-ligne { text-align:center; margin:44px 0 0; }
@media (max-width:700px){
  .blog-outils { grid-template-columns:1fr 1fr; gap:10px; }
  .blog-q { grid-column:1 / -1; }
  .blog-outils select { padding-left:12px; padding-right:8px; }
  .blog-compte-ligne { margin-bottom:18px; }
}
/* Sous 420 px, deux listes côte à côte ne laissent qu'une centaine de pixels
   au texte choisi : « Réglementation » ou « septembre 2026 » y étaient coupés
   (mesuré à 320 px : 96 px disponibles pour 118 et 121). Chaque liste prend
   donc sa ligne, l'étiquette à gauche plutôt qu'au-dessus : +27 px seulement
   par rapport à deux colonnes, et plus rien de tronqué. */
@media (max-width:420px){
  .blog-outils { grid-template-columns:1fr; }
  .blog-outils .champ:not(.blog-q) { grid-template-columns:5.2em minmax(0,1fr); align-items:center; gap:8px; }
}

/* ============================================================
   PARCOURS DE CONTRIBUTION EN ÉTAPES — /contribuer/<slug>
   Sans script : le formulaire entier, en une page ; les règles :has()
   montrent les champs d'entreprise ou du cadeau quand le choix est coché
   (le script le fait aussi, avec `hidden`). Avec le script, le formulaire
   porte .tunnel-actif et une seule étape est à l'écran.
   Sur téléphone, l'action principale vit dans la barre fixe du bas : le
   bouton ne bouge pas d'une étape à l'autre, et le pouce le trouve.
   ============================================================ */
.tunnel-progression { display:none; }
.contrib-form:not(:has([name=client_type][value=entreprise]:checked)) [data-si-entreprise] { display:none; }
.contrib-form:not(:has([name=pour][value=cadeau]:checked)) #etape-cadeau { display:none; }
.tunnel-recap:empty { display:none; }
.contrib-form:not(.tunnel-actif) .tunnel-nav .tunnel-suivant { width:100%; }
/* Posé par le petit script en ligne, avant app.js : pas de saut de mise en page. */
.tunnel-pret:not(.tunnel-actif) .etape:not(#etape-volume),
.tunnel-pret:not(.tunnel-actif) .contrib-rassurance { display:none; }
.tunnel-pret .tunnel-progression { display:flex; }

.tunnel-progression { list-style:none; margin:0; padding:0; gap:8px; }
.tunnel-progression li { flex:1; min-width:0; }
.tp { width:100%; display:grid; grid-template-columns:auto minmax(0,1fr); gap:7px 4px; background:none; border:0; padding:0; font:inherit; font-size:13.5px; color:var(--gris); text-align:left; cursor:pointer; }
.tp::before { content:""; grid-column:1 / -1; height:5px; border-radius:999px; background:var(--ligne); }
.tunnel-progression .fait .tp::before, .tunnel-progression .courante .tp::before { background:var(--vert); }
.tunnel-progression .courante .tp { color:var(--vert-fonce); font-weight:700; }
.tunnel-progression .fait .tp { color:var(--encre); }
.tunnel-progression .fait .tp:hover .tp-nom { text-decoration:underline; }
.tp:disabled { cursor:default; }
.tp:focus-visible { outline:3px solid var(--vert); outline-offset:3px; border-radius:6px; }
.tp-num::after { content:"."; }
.tp-nom { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* letter-spacing : le -1.6px des h2 (pensé pour 48 px) collait les mots à 20 px. */
.etape-titre { font-family:var(--sans); font-weight:800; font-size:20px; line-height:1.2; letter-spacing:-.2px; display:flex; align-items:center; gap:10px; margin:0 0 18px; scroll-margin-top:calc(var(--h-header) + 16px); }
.etape-titre .num-etape { position:static; background:var(--vert-pale); color:var(--vert-fonce); border-radius:999px; width:30px; height:30px; display:grid; place-items:center; font-size:14px; flex-shrink:0; }
.etape-titre:focus { outline:none; }
.etape-titre:focus-visible { outline:3px solid var(--vert); outline-offset:4px; border-radius:8px; }
@media (prefers-reduced-motion: no-preference) {
  .tunnel-actif .etape:not([hidden]) { animation:etapeArrive .22s ease-out; }
}
@keyframes etapeArrive { from { opacity:0; transform:translateY(8px); } }

.etape .groupe { border:0; padding:0; margin:0 0 16px; min-width:0; }
.etape .groupe:last-child { margin-bottom:0; }
.etape .groupe legend { font-weight:700; font-size:15px; padding:0; margin:0 0 8px; }
.choix-duo { display:grid; grid-template-columns:1fr 1fr; }
.choix-duo label { border-radius:14px; padding:12px 15px; line-height:1.3; }
.choix-registre label { flex-direction:column; align-items:flex-start; gap:1px; border-radius:14px; padding:9px 14px; }
.choix-registre small { font-weight:400; color:var(--gris); font-size:12.5px; }
.note-registre { margin:8px 0 0; font-size:13.5px; color:var(--gris); }
.bloc-entreprise { margin:-4px 0 16px; }
.bloc-entreprise .champ { margin-bottom:12px; }

/* Le volume : un champ, en entiers, et les paliers pour l'écrire d'un geste. */
.champ-volume { max-width:none; margin:0 0 16px; }
.volume-saisie { display:flex; align-items:center; gap:12px; max-width:300px; }
.champ .volume-saisie input { font-family:var(--sans); font-size:24px; font-weight:700; padding:10px 16px; letter-spacing:.3px; }
.volume-unite { font-weight:600; color:var(--gris); }

/* Les coordonnées : six colonnes, pour que code postal, ville et pays
   tiennent sur une ligne et que chaque étape tienne dans un écran. */
.champs-coordonnees { display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); column-gap:14px; }
.champs-coordonnees > * { grid-column:span 3; }
.champs-coordonnees > .champ-cp { grid-column:span 2; }
.champs-coordonnees > .champ-ville { grid-column:span 4; }
.champs-coordonnees > .champ-complement { grid-column:1 / -1; margin:-4px 0 12px; }
.champ-complement summary { cursor:pointer; font-size:14px; font-weight:600; color:var(--vert-cta); width:max-content; max-width:100%; }
.champ-complement[open] summary { margin-bottom:8px; }
.champ-complement .champ { margin-bottom:0; }
.note-obligatoire { margin:-6px 0 14px; font-size:13.5px; color:var(--gris); }
.champs-coordonnees .champ { margin-bottom:14px; }

/* Le récapitulatif de la dernière étape, avec « Modifier » en face de chaque ligne. */
.tunnel-recap { margin:0 0 14px; display:grid; gap:0; border-top:1px solid var(--ligne); }
.tunnel-recap > div { display:grid; grid-template-columns:100px 1fr; gap:10px; padding:7px 0; border-bottom:1px solid var(--ligne); font-size:14.5px; line-height:1.4; }
.tunnel-recap dt { color:var(--gris); font-size:13.5px; }
.tunnel-recap dd { margin:0; display:flex; justify-content:space-between; gap:10px; align-items:baseline; min-width:0; }
.tunnel-recap dd > span { flex:1 1 auto; min-width:0; overflow-wrap:break-word; }
.tunnel-recap small { color:var(--gris); }
.lien-modifier { background:none; border:0; padding:2px 0; font:inherit; font-size:13.5px; font-weight:600; color:var(--vert-cta); text-decoration:underline; text-underline-offset:3px; cursor:pointer; flex-shrink:0; }
.etape .demo-bandeau { margin:0 0 12px; padding:7px 12px; font-size:13px; }
.etape .case { margin-bottom:8px; line-height:1.45; }
.palier-aide { display:none; }
.note-renonciation { margin:0 0 4px 36px; font-size:13px; color:var(--gris); }

.tunnel-nav { display:flex; align-items:center; gap:14px; }
.tunnel-nav .tunnel-suivant { margin-left:auto; }
.tunnel-retour .ic, .tunnel-retour-mobile .ic { transform:rotate(180deg); }
.tunnel-actif .tunnel-nav .tunnel-retour { padding:13px 22px; border-width:1.5px; border-color:var(--ligne); }
.contrib-form .erreur:focus { outline:none; }
.contrib-form .erreur:focus-visible { outline:3px solid var(--vert); outline-offset:2px; }

/* Bureau : le bouton principal au même endroit d'une étape à l'autre. La
   plus haute des étapes courantes (coordonnées) donne la hauteur de toutes. */
@media (min-width:901px) {
  .tunnel-actif .choix-paliers { flex-wrap:nowrap; }
  .tunnel-actif .choix-paliers label { flex:1 1 0; min-width:0; }
  body.tunnel-js .tunnel-tete { padding:24px 0 0; }
  .tunnel-actif .etape { padding:24px 30px 22px; min-height:536px; }   /* = la plus haute (« Pour qui », entreprise) : le bouton ne bouge plus */
  .tunnel-actif .etape-titre { margin-bottom:14px; }
  body.tunnel-js .tunnel-tete .kicker, body.tunnel-js .tunnel-tete .tunnel-sous-titre { display:none; }
  body.tunnel-js .tunnel-tete .fil { margin-bottom:6px; }
  body.tunnel-js .tunnel-tete h1 { font-size:clamp(28px, 2.4vw, 34px); margin-bottom:4px; }
  .tunnel-actif .bloc-entreprise { display:grid; grid-template-columns:1fr 2fr; column-gap:14px; }
  .tunnel-actif .bloc-entreprise .champ { margin-bottom:0; }
  .tunnel-actif .etape .groupe { margin-bottom:14px; }
  body.tunnel-js .tunnel-section { padding-top:14px; }
  body.tunnel-js .contrib-form { gap:14px; }
}

/* Une campagne qui renvoie vers un autre projet n'a rien à faire sur l'écran
   où l'on paie celui-ci (revue « conversion », §2.1) ; et elle y coûtait un
   quart d'écran de téléphone. */
body.page-contribuer .bandeau-saison { display:none; }
@media (max-width:900px) {
  .tunnel-actif .tunnel-nav { display:none; }
  .contrib-recap-mobile .tunnel-retour-mobile { padding:12px 14px; border-width:1.5px; border-color:var(--ligne); }
  .contrib-recap-mobile .tunnel-retour-mobile[hidden] { display:none; }
  /* L'en-tête de page se réduit à son titre : la progression dit le reste. */
  body.tunnel-js .tunnel-tete { padding:10px 0 2px; }
  /* Passé la première étape, le titre de page ne se lit plus qu'au lecteur
     d'écran : le récapitulatif final nomme le projet, la barre dit le total. */
  body.tunnel-js:not([data-tunnel="etape-volume"]) .tunnel-tete { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
  body.tunnel-js .tunnel-tete .fil, body.tunnel-js .tunnel-tete .kicker,
  body.tunnel-js .tunnel-tete .tunnel-sous-titre, body.tunnel-js .tunnel-tete .bascule-prix { display:none; }
  body.tunnel-js .tunnel-tete h1 { font-size:17px; line-height:1.3; margin:0; letter-spacing:-.2px; }
  body.tunnel-js .tunnel-section { padding:6px 0 20px; }
  body.tunnel-js .contrib-grille { gap:6px; }
  body.tunnel-js .contrib-form { gap:12px; }
  .tunnel-actif .etape { padding:14px 14px 12px; }
  .tunnel-actif .etape .groupe { margin-bottom:10px; }
  .tunnel-actif .note-registre { margin-top:6px; }
  .tunnel-actif .bloc-entreprise { margin-bottom:10px; }
  /* Les paliers : leur nombre seul, trois par ligne ; l'équivalent concret du
     palier choisi s'écrit dessous (#palier-aide). */
  .tunnel-actif .choix-paliers { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; }
  .tunnel-actif .choix-paliers label { min-width:0; padding:10px 6px; align-items:center; text-align:center; }
  .tunnel-actif .choix-paliers small { display:none; }
  .tunnel-actif .palier-aide { display:block; min-height:1.45em; margin:6px 0 0; font-size:13px; line-height:1.45; color:var(--gris); }
  .tunnel-actif .bloc-entreprise .champ-2 { grid-template-columns:1fr 1fr; gap:10px; align-items:start; }
  .tunnel-actif .champ-volume { margin-bottom:12px; }
  .tunnel-recap > div { grid-template-columns:1fr; }
  .tunnel-recap dt { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .tunnel-recap .recap-pour:not(.recap-utile) { display:none; }
  .etape .demo-bandeau { background:none; border:0; padding:0; text-align:left; font-size:12.5px; margin:0 0 10px; }
  .etape .case { line-height:1.4; }
  .tunnel-progression .tp { font-size:12.5px; gap:5px 3px; }
  /* Le récapitulatif de droite n'a plus de colonne : sous l'étape du volume,
     il ne garde que la mention de l'article 30 — le total est dans la barre. */
  body.tunnel-js .contrib-aside { display:none; }
  body.tunnel-js[data-tunnel="etape-volume"] .contrib-aside { display:block; }
  body.tunnel-js[data-tunnel="etape-volume"] .achat-carte { padding:0 4px; background:none; border:0; box-shadow:none; }
  body.tunnel-js[data-tunnel="etape-volume"] .achat-carte > :not(.mention-lbc) { display:none; }
  body.tunnel-js[data-tunnel="etape-volume"] .achat-carte .mention-lbc { margin:0; }
}
@media (max-width:600px) {
  .tunnel-actif .etape-titre { font-size:18px; margin-bottom:10px; }
  .tunnel-actif .etape-titre .num-etape { width:26px; height:26px; font-size:13px; }
  .choix-paliers { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .choix-paliers label { min-width:0; padding:8px 12px; }
  .choix-paliers small { font-size:12px; line-height:1.3; }
  .choix-registre small { display:none; }
  .choix-registre { flex-wrap:nowrap; gap:6px; }
  .choix-registre label { flex:1 1 auto; align-items:center; justify-content:center; padding:9px 8px; font-size:13.5px; }
  .choix-duo label { padding:9px 11px; font-size:14px; }
  .champs-coordonnees { column-gap:10px; }
  .champs-coordonnees > .champ-large { grid-column:1 / -1; }
  .tunnel-actif .champ { gap:4px; }
  .tunnel-actif .champs-coordonnees .champ, .tunnel-actif .bloc-entreprise .champ { margin-bottom:10px; }
  .tunnel-actif .champ input, .tunnel-actif .champ select { padding:11px 14px; }
  .tunnel-actif .champ label { font-size:14.5px; }
  .note-obligatoire, .note-registre { font-size:12.5px; line-height:1.45; }
  body.tunnel-js[data-tunnel="etape-volume"] .achat-carte .mention-lbc { font-size:11.5px; line-height:1.35; }
  .tunnel-actif .champ-volume .a-aide { font-size:12.5px; }
  .tunnel-actif .champ .volume-saisie input { font-size:22px; padding:8px 14px; }
  .tunnel-actif .etape .groupe legend { margin-bottom:6px; }
  .tunnel-recap > div { grid-template-columns:1fr; font-size:14px; padding:7px 0; }
  .etape .case { font-size:14px; gap:10px; }
  .note-renonciation { margin-left:34px; font-size:12.5px; }
}

/* Chaque étape dans un écran de 375 × 812, bouton compris : réglages
   mesurés au navigateur (hauteur de l'étape contre le haut de la barre fixe). */
.tunnel-actif #etape-cadeau .cadeau-bloc { margin-top:0; padding-top:0; border-top:0; }
@media (max-width:600px) {
  .tunnel-actif .champ small, .tunnel-actif .champ-volume .a-aide { line-height:1.4; }
  .tunnel-actif .note-renonciation { line-height:1.4; margin-top:2px; }
  .tunnel-actif .etape .case { font-size:13.5px; line-height:1.38; margin-bottom:6px; }
  .tunnel-actif .tunnel-recap > div { font-size:13.5px; padding:6px 0; }
  .tunnel-actif .choix-paliers label { padding:8px 6px; }
  body.tunnel-js[data-tunnel="etape-volume"] .achat-carte .mention-lbc { padding:10px 12px; }
  .tunnel-actif #etape-cadeau .cadeau-note { font-size:13px; line-height:1.4; padding:9px 12px; margin-bottom:12px; }
  .tunnel-actif #etape-cadeau .champ-2 { gap:0; }
  .tunnel-actif #etape-cadeau .cadeau-quand { grid-template-columns:1fr 1fr; gap:10px; }
  .tunnel-actif #etape-cadeau .champ { margin-bottom:10px; }
  .tunnel-actif #cadeau_envoi_le + small { display:none; }
  .tunnel-actif .cadeau-quand label { font-size:13.5px; white-space:nowrap; }
  .tunnel-actif .cadeau-quand label small { font-size:12px; }
  .tunnel-actif .cadeau-quand select { padding-left:10px; padding-right:6px; }
  .tunnel-actif #cadeau_message { min-height:0; height:62px; }
  .tunnel-actif .etape-titre { margin-bottom:8px; }
  .tunnel-actif .etape .demo-bandeau { font-size:12px; line-height:1.35; margin-bottom:8px; }
  .tunnel-actif #etape-paiement { padding-bottom:6px; }
  .tunnel-actif .note-renonciation { margin-bottom:0; }
}

/* ============================================================
   TUNNEL — ÉCRANS ÉPURÉS (10 septembre 2026)
   Demande du client : « des écrans simples et épurés », la barre du bas
   gardée telle quelle, le grand pied de site retiré. Les règles portent
   `body.page-contribuer` pour passer devant celles du parcours ci-dessus.
   ============================================================ */
body.page-contribuer .site-footer { display:none; }
.tunnel-pied { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px 20px; padding:18px 0 32px; font-size:13px; color:var(--gris); }
.tunnel-pied span { display:inline-flex; align-items:center; gap:6px; }
.tunnel-pied .ic { width:15px; height:15px; color:var(--vert); }
.tunnel-pied a, .tunnel-pied .footer-bouton { color:var(--gris); font:inherit; background:none; border:0; padding:0; cursor:pointer; text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--ligne); }
.tunnel-pied a:hover, .tunnel-pied .footer-bouton:hover { color:var(--vert-cta); text-decoration-color:currentColor; }

/* Les titres d'étape : une question, sans pastille numérotée (la progression
   dit déjà où l'on en est). */
body.page-contribuer .etape-titre .num-etape { display:none; }
body.page-contribuer .etape-titre { font-size:26px; font-weight:700; letter-spacing:-.6px; line-height:1.15; margin:0 0 20px; }
.tunnel-etat { display:none; }

/* Le volume : un grand nombre au centre, − et + de part et d'autre. */
.volume-pas { display:none; }
.tunnel-actif .champ-volume { text-align:center; margin:18px 0 0; }
.tunnel-actif .volume-saisie { max-width:none; justify-content:center; gap:18px; }
.tunnel-actif .champ .volume-saisie input { width:150px; flex:0 0 150px; text-align:center; font-size:48px; font-weight:700; letter-spacing:-1px; padding:10px 8px; border-radius:20px; background:var(--blanc); border:1.5px solid var(--ligne); }
.tunnel-actif .champ .volume-saisie input:focus { border-color:var(--vert); }
.tunnel-actif .volume-pas { display:grid; place-items:center; width:54px; height:54px; flex:0 0 54px; border-radius:50%; border:1.5px solid var(--ligne); background:var(--blanc); color:var(--vert-fonce); font:500 28px/1 var(--sans); cursor:pointer; transition:border-color .15s, background-color .15s; }
.tunnel-actif .volume-pas:hover:not(:disabled) { border-color:var(--vert); background:var(--vert-pale); }
.tunnel-actif .volume-pas:disabled { opacity:.3; cursor:default; }
.tunnel-actif .volume-pas:focus-visible { outline:3px solid var(--vert); outline-offset:3px; }
.tunnel-actif .volume-unite { display:block; margin-top:10px; font-size:15px; font-weight:600; color:var(--gris); }
.tunnel-actif #tonnes-aide { display:block; max-width:34ch; margin:22px auto 0; font-size:13.5px; line-height:1.5; color:var(--gris); }
.tunnel-actif .champ-volume .champ-alerte { margin:12px auto 0; max-width:36ch; }

/* Les cases de la dernière étape : deux lignes nettes, séparées d'un filet. */
body.page-contribuer .etape .case { padding:12px 0; margin:0; border-bottom:1px solid var(--ligne); }
body.page-contribuer .etape .case:last-of-type { border-bottom:0; }

@media (min-width:901px) {
  /* La carte d'étape garde sa hauteur fixe (le bouton ne bouge pas) ; le
     volume, seul, s'y centre au lieu de flotter en haut. */
  body.page-contribuer .tunnel-actif #etape-volume:not([hidden]) { display:flex; flex-direction:column; }
  body.page-contribuer .tunnel-actif #etape-volume .champ-volume { margin:auto 0; padding-bottom:40px; }
}

@media (max-width:900px) {
  /* Un écran blanc, sans carte : les champs, gris clair, s'y détachent seuls. */
  body.page-contribuer { background:var(--blanc); }
  body.page-contribuer .tunnel-actif .etape { background:none; border:0; box-shadow:none; border-radius:0; padding:4px 0 0; }
  body.page-contribuer .etape-titre { font-size:24px; margin-bottom:16px; }
  /* La progression : quatre traits, et une ligne qui nomme l'étape. */
  body.page-contribuer .tunnel-progression .tp { gap:0; }
  body.page-contribuer .tunnel-progression .tp-num, body.page-contribuer .tunnel-progression .tp-nom { display:none; }
  body.page-contribuer .tunnel-progression { gap:6px; }
  .tunnel-pret .tunnel-etat { display:block; margin:10px 0 0; font-size:13px; font-weight:600; letter-spacing:.2px; color:var(--vert-fonce); }
  /* Plus rien à droite sur téléphone : le total est dans la barre du bas. */
  body.tunnel-js .contrib-aside, body.tunnel-js[data-tunnel="etape-volume"] .contrib-aside { display:none; }
  body.tunnel-js .tunnel-tete h1 { font-size:18px; }
  .tunnel-actif .champ-volume { margin-top:40px; }
  .tunnel-pied { padding:28px 0 20px; }
}

/* Le pied de tunnel se pose en bas de l'écran, pas au milieu, et la
   réassurance de la dernière étape se lit comme une note, pas comme un encart. */
body.page-contribuer main { display:flex; flex-direction:column; }
body.page-contribuer .tunnel-section { flex:1; display:flex; flex-direction:column; }
body.page-contribuer .tunnel-pied { margin-top:auto; }
body.page-contribuer .contrib-rassurance { background:none; border-radius:0; padding:14px 0 0; margin-top:4px; border-top:1px solid var(--ligne); }
body.page-contribuer .rassurance-paiement { font-size:13.5px; color:var(--gris); }
body.page-contribuer .rassurance-liste li { font-size:13px; }
body.page-contribuer .note-obligatoire { margin:-8px 0 16px; }
@media (max-width:900px) {
  body.page-contribuer .tunnel-pied { font-size:12px; gap:4px 14px; padding:32px 0 12px; }
}

/* ============================================================
   PHOTOS DE TERRAIN (10 septembre 2026) — data/photos-terrain.json
   Mosaïque sur l'accueil (une grande, cinq petites), trio ailleurs.
   ============================================================ */
.terrain-tete { margin-bottom:44px; }
.terrain-grille { display:grid; gap:14px; }
.terrain-fig { position:relative; margin:0; overflow:hidden; border-radius:var(--r); background:var(--vert-pale); }
.terrain-fig .photo, .terrain-fig picture, .terrain-fig img { display:block; width:100%; height:100%; object-fit:cover; }
.terrain-fig img { transition:transform 1.2s var(--ease-out); }
.terrain-fig:hover img { transform:scale(1.035); }
.terrain-fig figcaption { position:absolute; left:0; right:0; bottom:0; padding:28px 16px 12px; font-size:13px; line-height:1.4; color:#fff; background:linear-gradient(180deg, rgba(6,23,14,0), rgba(6,23,14,.72)); }
.terrain-note { margin:16px 0 0; font-size:12.5px; line-height:1.5; color:var(--gris); max-width:80ch; }
.terrain-mosaique .terrain-grille { grid-template-columns:repeat(4, minmax(0,1fr)); grid-auto-rows:240px; }
.terrain-mosaique .terrain-fig:nth-child(1) { grid-column:span 2; grid-row:span 2; }
.terrain-mosaique .terrain-fig:nth-child(3) { grid-row:span 2; }
/* Les deux dernières ferment la mosaïque sur toute la largeur. */
.terrain-mosaique .terrain-fig:nth-child(5), .terrain-mosaique .terrain-fig:nth-child(6) { grid-column:span 2; }
.terrain-trio .terrain-grille { grid-template-columns:repeat(3, minmax(0,1fr)); }
.terrain-trio .terrain-fig { aspect-ratio:4 / 3; }
@media (max-width:900px) {
  .terrain-mosaique .terrain-grille { grid-template-columns:repeat(2, minmax(0,1fr)); grid-auto-rows:170px; gap:10px; }
  .terrain-mosaique .terrain-fig:nth-child(1) { grid-column:span 2; grid-row:span 2; }
  .terrain-mosaique .terrain-fig:nth-child(3) { grid-row:span 2; }
  .terrain-trio .terrain-grille { grid-template-columns:1fr; gap:10px; }
  .terrain-trio .terrain-fig { aspect-ratio:3 / 2; }
  .terrain-fig figcaption { font-size:12px; padding:22px 12px 10px; }
}
@media (prefers-reduced-motion:reduce) { .terrain-fig img { transition:none; } .terrain-fig:hover img { transform:none; } }

/* ---------- Tunnel : volume plus sobre, courbe du financement, adresse facultative (10/09/2026) ---------- */
.tunnel-actif .champ .volume-saisie input { width:112px; flex:0 0 112px; font-size:34px; padding:8px 6px; border-radius:16px; }
.tunnel-actif .volume-pas { width:44px; height:44px; flex:0 0 44px; font-size:24px; }
.tunnel-actif .volume-unite { margin-top:6px; font-size:14px; }
.courbe-fin { width:100%; max-width:420px; margin:26px auto 0; text-align:left; }
.cf-svg { display:block; width:100%; height:92px; }
.cf-reste { fill:var(--ligne); }
.cf-deja { fill:var(--vert-fonce); }
.cf-avec { fill:#4CAF50; transition:none; }
.cf-ligne { fill:none; stroke:var(--vert-fonce); stroke-width:1.5; }
.cf-legende { display:flex; justify-content:space-between; gap:12px; margin:8px 0 0; font-size:13px; color:var(--gris); }
.cf-legende b { color:var(--encre); font-variant-numeric:tabular-nums; }
.cf-l-avec b { color:#2E7D32; }
.cf-curseur { width:100%; margin:14px 0 0; accent-color:var(--vert); height:28px; cursor:pointer; }
.cf-bornes { display:flex; justify-content:space-between; margin:0; font-size:12px; color:var(--gris); }
.tunnel-actif #tonnes-aide { margin-top:16px; }
.lien-adresse { display:none; }
.contrib-form.adresse-repliee [data-adresse] { display:none; }
.contrib-form.adresse-repliee .lien-adresse { display:inline-flex; align-items:center; gap:6px; grid-column:1 / -1; justify-self:start; margin:0 0 14px; padding:0; background:none; border:0; font:inherit; font-size:15px; font-weight:600; color:var(--vert-cta); cursor:pointer; }
.lien-adresse small { font-weight:400; color:var(--gris); }
.lien-adresse .ic { width:16px; height:16px; }
@media (max-width:900px) { .tunnel-actif .champ-volume { margin-top:24px; } .cf-svg { height:80px; } }

.cf-rupture { stroke:#fff; stroke-width:2; stroke-dasharray:3 3; }
.cf-reste-txt { margin:4px 0 0; font-size:12.5px; color:var(--gris); min-height:1.4em; }