/* =============================================================================
   accueil.css — mise en forme de la PAGE D'ACCUEIL / DE VENTE.
   Partagé par les 4 langues : web/index.php (FR), web/en|es|de/index.php.
   Mission vegan-accueil-refonte (16 septembre 2026).

   POURQUOI CE FICHIER : les 4 pages embarquaient chacune un bloc <style>
   quasi identique (≈ 260 lignes) — toute retouche visuelle devait être répétée
   4 fois, source de dérive (en/es/de avaient déjà divergé). Ce fichier factorise
   ces styles UNE fois : les 4 pages n'ont plus qu'un <link> vers lui. Il est le
   SURENSEMBLE des classes utilisées par les 4 markups (certaines pages utilisent
   .entete-droite, d'autres .entete-outils, d'autres .vente-offres ; une règle
   sans cible sur une page est simplement inerte).

   Il complète charte.css (variables, en-tête, encarts, grilles) sans jamais le
   modifier : charte.css est partagé par TOUT le site (recettes, chat, mentions,
   chapitres). Toutes les couleurs sont dérivées des variables de la charte
   (color-mix), aucune teinte nouvelle en dur (doctrine Punchbox §1, dérivation).

   PARTI PRIS DE FINITION (synthèse des chartes de la maison, adaptée au ton
   chaleureux/terroir de ce livre-témoignage — voir le rapport de mission) :
     • rayon UNIQUE 2px partout (--rayon de la charte, doctrine « franc »
       Punchbox §4) — coins nets, aucun mélange de rayons ;
     • OMBRE DOUCE partout sur les encarts (et non le « trait net » froid de la
       console de régie Punchbox) : ce site vend un témoignage chaleureux, la
       profondeur passe par une ombre tiède discrète, cohérente sur TOUS les
       encarts de la page — jamais un mélange filet-net / ombre ;
     • SÉMANTIQUE DE COULEUR systématique : VERT = commercial / identité / positif
       (offres, extraits, avis, succès) ; CHAUD (brun-orangé) = mise en garde /
       erreur. Appliquée partout sur la page.
   ========================================================================== */

:root{
  /* Ombres douces tièdes, dérivées du vert profond du texte (#1f2a1f). */
  --acc-ombre:        0 1px 2px rgba(31,42,31,.05), 0 6px 16px -8px rgba(31,42,31,.14);
  --acc-ombre-forte:  0 2px 4px rgba(31,42,31,.07), 0 14px 30px -10px rgba(31,42,31,.20);
  /* Aplats dérivés (color-mix) — jamais une teinte nouvelle. */
  --acc-aplat-vert:  color-mix(in srgb, var(--accent-vert) 7%,  var(--fond-carte));
  --acc-aplat-chaud: color-mix(in srgb, var(--accent-chaud) 7%, var(--fond-carte));
}
[data-theme="sombre"]{
  --acc-ombre:        0 1px 3px rgba(0,0,0,.5),  0 8px 20px -8px rgba(0,0,0,.6);
  --acc-ombre-forte:  0 2px 6px rgba(0,0,0,.55), 0 16px 34px -10px rgba(0,0,0,.7);
  --acc-aplat-vert:  color-mix(in srgb, var(--accent-vert) 14%, var(--fond-carte));
  --acc-aplat-chaud: color-mix(in srgb, var(--accent-chaud) 16%, var(--fond-carte));
}

/* --- ITEM 1 : EN-TÊTE — profondeur et identité, sans alourdir. -------------
   Un filet d'accent vert en tête (identité de la maison) + une ombre douce sous
   la barre, qui détache nettement la nav du corps de page. Ne touche pas
   charte.css : accueil.css n'est chargé QUE sur l'accueil, l'ajout reste local. */
.entete{
  border-top: 3px solid var(--accent-vert);
  box-shadow: var(--acc-ombre);
}
/* Regroupements de droite (sélecteur + bascule thème) selon les markups. */
.entete-droite, .entete-outils{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }

/* --- Sélecteur de langue — patron unique pour les 4 langues. --------------- */
.selecteur-langue{ display:flex; gap:2px; align-items:center; }
.selecteur-langue a{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:34px; min-height:32px; padding:0 8px;
  font-family:-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:13px; font-weight:700; letter-spacing:.03em;
  text-decoration:none; color:var(--texte-attenue);
  border:1px solid var(--bordure); border-radius:var(--rayon);
}
.selecteur-langue a:hover{ color:var(--texte); border-color:var(--accent-vert); }
.selecteur-langue a[aria-current="true"]{
  background:var(--accent-vert); color:var(--fond-carte); border-color:var(--accent-vert);
}
[data-theme="sombre"] .selecteur-langue a[aria-current="true"]{ color:#10140e; }

/* ===========================================================================
   HERO — couverture + titre + offres.
   ========================================================================= */
/* Mission vegan-lot-a-visuel-responsive : l'image Van Gogh (jugée datée par le
   fondateur) a été retirée du markup des 4 accueils. Le hero n'a donc plus qu'un
   seul enfant (.vente-meta) : on passe d'une grille 2 colonnes à un bloc pleine
   largeur pour COMBLER le trou laissé par la couverture — pas de colonne vide.
   Le texte d'accroche (.hero-texte) coule déjà en 2–3 colonnes sur grand écran,
   il occupe donc toute la largeur récupérée. */
.vente-hero{
  margin: var(--gouttiere) 0;
}
.vente-couverture{ margin:0; position: sticky; top: var(--gouttiere); }
.vente-couverture img{
  width:100%; height:auto; display:block;
  border:1px solid var(--bordure); border-radius: var(--rayon);
  background: var(--fond-carte);
  box-shadow: var(--acc-ombre-forte);   /* ITEM 6 : la couverture est mise en relief */
}
.vente-couverture figcaption{
  font-size: 13px; color: var(--texte-attenue);
  margin-top: 10px; line-height: var(--interligne-petite);
}
.vente-couverture figcaption a{ color: var(--texte-attenue); }

.vente-meta .surtitre{
  display:block; font-family:-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size: var(--taille-petite); letter-spacing:.08em; text-transform:uppercase;
  color: var(--accent-vert); font-weight:700; margin-bottom:.4em;
}
.vente-meta h1{ margin-bottom:.15em; }
.vente-meta .sous-titre{
  font-family:-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size: var(--taille-h3); color: var(--texte-attenue); font-weight:600;
  margin:0 0 .6em;
}
.vente-meta .par{ color: var(--texte-attenue); margin-bottom:1em; }

/* Deux offres empilées (le livre, puis la fiche praticien). Certaines pages
   les enveloppent dans .vente-offres, d'autres non : les deux fonctionnent. */
.vente-offres{ display:grid; gap: var(--gouttiere); margin-top: var(--gouttiere); }
.vente-offres .vente-achat{ margin-top:0; }
.vente-offres .vente-achat + .vente-achat{ margin-top: var(--gouttiere); }

/* Accroche — une ligne au-dessus de la zone d'achat : elle dit clairement au
   visiteur qu'il regarde un espace d'achat, avec deux options distinctes. */
.vente-accroche{
  font-family:-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size: var(--taille-petite); font-weight:700;
  letter-spacing:.03em; text-transform:uppercase;
  color: var(--texte-attenue);
  margin: 1.1em 0 .7em;
}

/* --- ITEM 2 : HIÉRARCHIE FRANCHE — l'achat du livre DOMINE la page.
   Exigences chiffrées de la mission vegan-accueil-refonte-v2 :
     • le bloc PRINCIPAL ≥ 1,5× la hauteur du bloc SECONDAIRE (empilés) ;
     • aplat de couleur ADMIS VISIBLE : vert plein soutenu, texte clair dessus
       (≠ le pale tint 5 % rejeté) — le SECONDAIRE reste blanc, bordure fine ;
     • prix principal ≥ 1,5× le prix secondaire (en px) ;
     • bouton « Acheter le livre » = le plus gros bouton de toute la page.
   ------------------------------------------------------------------------- */
.vente-achat{
  border-radius: var(--rayon);
  padding: var(--gouttiere);
  margin-top: var(--gouttiere);
  background: var(--fond-carte);
}
.vente-achat h2{
  margin:0 0 .3em; font-size: var(--taille-h3);
  font-family:-apple-system,"Segoe UI",Roboto,sans-serif;
}
.vente-achat .offre-desc{
  color: var(--texte-attenue); font-size: var(--taille-petite); margin:.2em 0 .8em;
}

/* PRINCIPAL — aplat vert plein, texte clair, prix et bouton XL, ombre forte. */
.vente-achat.principal{
  background: var(--accent-vert);
  color: var(--fond-carte);
  border: none;
  padding: calc(var(--gouttiere) * 3.1) calc(var(--gouttiere) * 1.6);
  box-shadow: var(--acc-ombre-forte);
}
[data-theme="sombre"] .vente-achat.principal{ color:#10140e; } /* accent clair en sombre → texte foncé */
.vente-achat.principal h2{ color: inherit; }
.vente-achat.principal .offre-desc{ color: inherit; opacity:.9; }
.vente-achat.principal .vente-prix{ color: inherit; font-size: 56px; }
.vente-achat.principal .vente-prix .contexte{ color: inherit; opacity:.85; }
.vente-achat.principal .vente-note{ color: inherit; opacity:.85; }

/* SECONDAIRE — sobre et compact : fond neutre, bordure fine 1px, texte réduit. */
.vente-achat.secondaire{
  border:1px solid var(--bordure);
  border-left:4px solid var(--accent-vert);   /* garde la famille « commerciale » sans dominer */
  background: var(--fond-carte);
  padding: calc(var(--gouttiere) * 0.5);
  box-shadow: var(--acc-ombre);
}
.vente-achat.secondaire h2{ font-size: var(--taille-base); margin-bottom:.15em; }
.vente-achat.secondaire .offre-desc{ font-size: var(--taille-petite); line-height:1.4; margin:.1em 0 .5em; }
.vente-achat.secondaire .vente-prix{ font-size: 22px; font-weight:700; }
.vente-achat.secondaire .vente-note{ margin-top:.5em; }

.vente-prix{
  font-family:-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size: 34px; font-weight:800; color: var(--texte);
  line-height:1.05;
}
.vente-prix.sans-montant{ font-size: var(--taille-base); font-weight:600; color: var(--texte-attenue); }
.vente-prix .contexte{
  display:block; font-size: var(--taille-petite); font-weight:400;
  color: var(--texte-attenue); margin-top:4px;
}
.bouton-achat{
  display:inline-flex; align-items:center; justify-content:center;
  min-height: var(--cible-tactile); padding: 0 28px; margin-top:14px;
  border-radius: var(--rayon); border:none;
  font-family:-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size: var(--taille-base); font-weight:700; text-decoration:none;
}
.bouton-achat.actif{
  background: var(--accent-vert); color: var(--fond-carte); cursor:pointer;
  box-shadow: var(--acc-ombre);
}
.bouton-achat.actif:hover{ filter: brightness(1.06); }
[data-theme="sombre"] .bouton-achat.actif{ color:#10140e; }
.bouton-achat.inactif{
  background: var(--bordure); color: var(--texte-attenue);
  cursor: not-allowed;
}

/* Bouton PRINCIPAL = le plus gros de la page. Contrasté sur l'aplat vert :
   pastille claire (fond-carte) à texte vert en clair ; en sombre le bouton
   reste foncé à texte vert clair, bien détaché de l'aplat vert clair. */
.vente-achat.principal .bouton-achat{
  min-height: 62px; font-size: 23px; padding: 0 clamp(28px, 5vw, 52px);
  min-width: 300px; margin-top: 20px;
}
.vente-achat.principal .bouton-achat.actif{
  background: var(--fond-carte); color: var(--accent-vert);
  box-shadow: var(--acc-ombre-forte);
}
[data-theme="sombre"] .vente-achat.principal .bouton-achat.actif{ color: var(--accent-vert); }
.vente-achat.principal .bouton-achat.inactif{
  background: color-mix(in srgb, #000 12%, var(--accent-vert)); color: var(--fond-carte);
}

/* Bouton SECONDAIRE — nettement plus petit et discret. */
.vente-achat.secondaire .bouton-achat{
  min-height: 40px; font-size: var(--taille-petite); padding: 0 20px; margin-top: 10px;
}
.vente-note{ font-size: var(--taille-petite); color: var(--texte-attenue); margin:.8em 0 0; }

/* ===========================================================================
   CORPS — « De quoi ça parle » + encart de mise en garde.
   ITEM 5 : on remplit la largeur (fondateur : « utilise TOUTE la largeur »).
   La prose occupe une large colonne, l'encart de mise en garde l'accompagne en
   colonne collante ; l'encart est une vraie carte chaude (voir ITEM 4) pour que
   la colonne de droite se lise comme un panneau voulu, pas comme un vide.
   ========================================================================= */
.vente-corps{
  display:grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
  gap: calc(var(--gouttiere) * 2);
  align-items:start;
  margin-top: calc(var(--gouttiere) * 1.6);
}
.vente-corps h2{ margin-top:0; }
.vente-prose p:first-of-type{ margin-top:0; }
.vente-prose p{ max-width: 72ch; }
.vente-aside{ position: sticky; top: var(--gouttiere); }
.vente-aside .encart{ margin-top:0; }

/* --- ITEM 4 : encart de mise en garde = zone CHAUDE (mise en garde médicale).
   On lui donne un aplat chaud discret + une ombre douce : distinct des offres
   vertes, cohérent avec .avis-message.ko (erreur, filet chaud). Portée limitée
   à .vente-aside pour ne pas déborder sur d'autres pages via charte.css. */
.vente-aside .encart-mise-en-garde{
  background: var(--acc-aplat-chaud);
  box-shadow: var(--acc-ombre);
}
/* CORRECTIF ICÔNE (mission v2) : dans la charte, la puce est un flex-item qui,
   dans la colonne étroite de l'aside, se faisait écraser en largeur (12×22 px)
   — un « i » déformé lu comme un « 0 ». On la fige (flex:0 0), on la cale en
   haut du titre sur deux lignes, et on y loge une vraie icône SVG « info »
   (inline, sans dépendance externe) au lieu de la lettre. */
.encart-mise-en-garde .titre-encart .puce{
  flex: 0 0 22px; align-self: flex-start; margin-top: 3px; padding: 0;
}
.encart-mise-en-garde .titre-encart .puce svg{
  width: 13px; height: 13px; display: block; fill: currentColor;
}

/* ===========================================================================
   EXTRAITS — « Quelques pages, pour voir ».
   ========================================================================= */
.accueil-extraits{ margin: calc(var(--gouttiere) * 2.2) 0; }
.accueil-extraits > h2{ font-size: var(--taille-h2); margin-bottom: .2em; }
.accueil-extraits .intro-extraits{
  color: var(--texte-attenue); margin: 0 0 1.4em; max-width: 60ch;
}
.grille-extraits{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--gouttiere);
  align-items: start;
}
/* Carte de citation : filet vert (identité), fond carte, ombre douce (ITEM 6). */
.extrait{
  border: 1px solid var(--bordure);
  border-left: 4px solid var(--accent-vert);
  background: var(--fond-carte);
  border-radius: var(--rayon);
  padding: var(--gouttiere) var(--gouttiere) calc(var(--gouttiere) - 4px);
  margin: 0;
  box-shadow: var(--acc-ombre);
  transition: box-shadow .12s, transform .12s;
}
.extrait:hover{ box-shadow: var(--acc-ombre-forte); transform: translateY(-2px); }
.extrait p{
  font-family: Georgia, "Liberation Serif", serif;
  font-size: 21px;
  line-height: 1.45;
  font-style: italic;
  color: var(--texte);
  margin: 0;
}
.extrait footer{
  margin-top: 14px;
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: var(--taille-petite);
  font-style: normal;
  color: var(--texte-attenue);
}

/* ===========================================================================
   AVIS — message de retour, formulaire, liste des avis publiés.
   ========================================================================= */
.accueil-avis{
  margin-top: calc(var(--gouttiere) * 2.5);
  padding-top: var(--gouttiere);
  border-top: 1px solid var(--bordure);
}
.accueil-avis > h2{ font-size: var(--taille-h2); margin-bottom: .2em; }
.accueil-avis .intro-avis{ color: var(--texte-attenue); max-width: 62ch; margin: 0 0 1.4em; }

/* ITEM 4 : ok = filet vert, ko = filet chaud. */
.avis-message{
  border-radius: var(--rayon);
  padding: 12px 16px;
  margin-bottom: var(--gouttiere);
  font-size: var(--taille-petite);
  border: 1px solid var(--bordure);
  box-shadow: var(--acc-ombre);
}
.avis-message.ok{ border-left: 4px solid var(--accent-vert); background: var(--acc-aplat-vert); }
.avis-message.ko{ border-left: 4px solid var(--accent-chaud); background: var(--acc-aplat-chaud); }

.avis-form{
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  background: var(--fond-carte);
  padding: calc(var(--gouttiere) * 1.15);
  margin-bottom: calc(var(--gouttiere) * 1.5);
  box-shadow: var(--acc-ombre);
  max-width: 760px;
}
.avis-form h3{ margin-top: 0; }
.avis-champ{ margin-bottom: 1.1em; }
.avis-champ label{
  display: block; font-weight: 600; margin-bottom: .35em;
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: var(--taille-petite);
}
.avis-champ .facultatif{ font-weight: 400; color: var(--texte-attenue); }
.avis-form input[type="text"],
.avis-form input[type="email"],
.avis-form textarea{
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  color: var(--texte);
  background: var(--fond);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 10px 12px;
  min-height: var(--cible-tactile);
}
.avis-form textarea{ min-height: 140px; resize: vertical; line-height: var(--interligne-base); }
.avis-form input:focus, .avis-form textarea:focus{
  outline: 2px solid var(--accent-vert); outline-offset: 1px;
}

/* --- ITEM 3 : NOTATION — étoiles cliquables, lisibles.
   Choix documenté (rapport) : on GARDE les étoiles 1–10 (choix délibéré, aligné
   sur avis-soumettre.php et les données stockées) plutôt qu'un slider, mais on
   les rend enfin lisibles : plus grandes (34px), plus espacées, avec un repère
   visuel tous les 5 (petit sur-espacement) pour compter d'un coup d'œil.
   Radios en ordre inverse (CSS pur, sans JavaScript, accessible au clavier). */
.notation{
  display: inline-flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 4px;
  margin-top: .1em;
}
.notation input{
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  overflow: hidden;
}
.notation label{
  cursor: pointer;
  font-size: 34px;
  line-height: 1;
  color: var(--bordure);
  padding: 2px 2px;
  transition: color .05s, transform .05s;
}
.notation label::before{ content: "★"; }
/* Repère de comptage : sur-espacement après la 5e étoile (DOM en ordre inverse,
   donc « note-6 » borde visuellement la moitié gauche). */
.notation label[for="note-6"]{ margin-left: 12px; }
/* étoile survolée + toutes celles de valeur inférieure (à sa droite en DOM) */
.notation label:hover,
.notation label:hover ~ label{ color: var(--accent-chaud); transform: scale(1.06); }
/* étoile choisie + toutes celles de valeur inférieure */
.notation input:checked ~ label{ color: var(--accent-vert); }
/* quand on survole, le survol prime sur la sélection */
.notation:hover input:checked ~ label{ color: var(--bordure); }
.notation:hover label:hover,
.notation:hover label:hover ~ label{ color: var(--accent-chaud); }
.notation input:focus-visible + label{ outline: 2px solid var(--accent-vert); outline-offset: 2px; }
.notation-aide{ font-size: var(--taille-petite); color: var(--texte-attenue); margin: .5em 0 0; }
/* ITEM 5 (mission vegan-lot-a-visuel-responsive) : sur mobile, les 10 étoiles à
   34px débordaient à droite de l'écran (illisibles au-delà de la 7e — capture
   « Votre avis » du fondateur). On réduit le glyphe, les espaces et le repère de
   comptage pour que les 10 étoiles TIENNENT et restent cliquables dès 360px de
   large ; le padding VERTICAL est augmenté pour garder une cible tactile haute
   sans élargir la rangée. */
@media (max-width: 460px){
  .notation{ gap: 2px; }
  .notation label{ font-size: 22px; padding: 7px 1px; }
  .notation label[for="note-6"]{ margin-left: 6px; }
}
@media (max-width: 380px){
  .notation label{ font-size: 19px; }
}

.avis-piege{ position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.bouton-envoyer{
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--cible-tactile); padding: 0 28px;
  border: none; border-radius: var(--rayon);
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: var(--taille-base); font-weight: 700; cursor: pointer;
  background: var(--accent-vert); color: var(--fond-carte);
  box-shadow: var(--acc-ombre);
}
.bouton-envoyer:hover{ filter: brightness(1.06); }
[data-theme="sombre"] .bouton-envoyer{ color: #10140e; }

/* Liste des avis publiés — carte à filet vert, ombre douce (ITEM 6). */
.avis-liste{ display: grid; gap: var(--gouttiere); }
.avis-carte{
  border: 1px solid var(--bordure);
  border-left: 4px solid var(--accent-vert);
  border-radius: var(--rayon);
  background: var(--fond-carte);
  padding: var(--gouttiere);
  box-shadow: var(--acc-ombre);
}
.avis-entete{
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 10px; margin-bottom: .6em;
}
/* ITEM 3 : affichage des notes publiées, agrandi et espacé pour la lisibilité. */
.avis-note{
  font-size: 22px; letter-spacing: 2px; color: var(--accent-vert);
  display: inline-flex; align-items: baseline; gap: 8px;
}
.avis-note-chiffre{
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 14px; font-weight: 700; letter-spacing: normal; color: var(--texte-attenue);
}
.avis-nom{ font-weight: 700; }
.avis-date{ color: var(--texte-attenue); font-size: var(--taille-petite); }
.avis-texte{ margin: 0; white-space: pre-line; }
.avis-vide{
  border: 1px dashed var(--bordure);
  border-radius: var(--rayon);
  padding: calc(var(--gouttiere) * 1.2);
  text-align: center;
  color: var(--texte-attenue);
  font-style: italic;
}

/* ===========================================================================
   ADAPTATIONS DE LARGEUR — tablette / téléphone (ITEM 5 : ni vide ni écrasé).
   ========================================================================= */
@media (max-width: 900px){
  .vente-corps{ grid-template-columns: 1fr; }
  .vente-aside{ position: static; }
  .vente-couverture{ position: static; }
}
/* Tablette portrait (~768–820) : le hero passe en une colonne pour que le titre
   et les offres respirent (sinon la colonne de droite est trop étroite). */
@media (max-width: 820px){
  .vente-hero{ grid-template-columns: 1fr; }
  .vente-couverture{ max-width: 320px; }
}
@media (max-width: 640px){
  .vente-prix{ font-size: 30px; }
  .vente-achat{ padding: var(--gouttiere); }
}

/* ===========================================================================
   REFONTE V3 (mission vegan-accueil-refonte-v3-extraits) — nouvelle structure
   voulue par le fondateur : titre → accroche → texte → vente compacte, le tout
   sur un écran ; puis, plus bas, les EXTRAITS GRATUITS de chapitres réels.
   ========================================================================= */

/* --- En-tête resserré SUR L'ACCUEIL uniquement (accueil.css n'est chargé que
   là) : padding vertical réduit et gouttières un peu plus courtes pour que la
   barre tienne sur UNE seule ligne à 1366px (sinon le bouton thème passe à la
   ligne et vole ~90px au-dessus de la ligne de flottaison). Les cibles tactiles
   (min-height 44px) restent intactes. -------------------------------------- */
.entete-barre{ padding-top: 9px; padding-bottom: 9px; gap: 14px; flex-wrap: nowrap; }
nav.entete-nav{ gap: 2px; }
nav.entete-nav a{ padding: 0 9px; font-size: 15px; }
.selecteur-langue a{ min-width: 30px; padding: 0 6px; }
button.bouton-theme{ font-size: 15px; padding: 0 9px; white-space: nowrap; }
@media (max-width: 780px){ .entete-barre{ flex-wrap: wrap; } }

/* --- Couverture réduite dans le hero v3. --------------------------------- */
.vente-hero .vente-couverture img{ box-shadow: var(--acc-ombre); }
.vente-hero{ margin-top: calc(var(--gouttiere) * 0.45); }

/* --- Accroche : deux questions courtes, directes, juste sous le titre. ---- */
.accroche-questions{
  font-family: Georgia, "Liberation Serif", serif;
  font-size: var(--taille-h3);
  font-style: italic;
  line-height: 1.25;
  color: var(--accent-vert);
  margin: .1em 0 .3em;
}
.vente-hero .vente-meta h1{ margin-bottom: .1em; }
.vente-hero .vente-meta .sous-titre{ margin-bottom: .35em; }

/* --- Texte explicatif (« De quoi ça parle », déplacé sous le titre).
   Sur écran large : colonnes journal pour rester compact et faire tenir
   titre+accroche+texte+vente sur un écran ; une seule colonne dès que la place
   manque. */
.hero-texte{
  color: var(--texte);
  font-size: 15px;
  line-height: 1.4;
}
.hero-texte p{ margin: 0 0 .5em; max-width: 62ch; }
.hero-texte p:last-child{ margin-bottom: 0; }
@media (min-width: 1000px){
  .hero-texte{ column-count: 2; column-gap: calc(var(--gouttiere) * 1.3); }
  .hero-texte p{ max-width: none; }
  .hero-texte p:first-child{ margin-top: 0; }
}
@media (min-width: 1180px){
  .hero-texte{ column-count: 3; }
}

/* --- ZONE DE VENTE COMPACTE : deux offres côte à côte, colonnes égales. ----
   On garde le contraste v2 (principal vert dominant, secondaire sobre) mais à
   une échelle compacte : padding réduit, prix et bouton dimensionnés pour que la
   hauteur totale reste raisonnable (mesurée en recette). */
.vente-offres-compact{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gouttiere);
  align-items: stretch;
  margin: calc(var(--gouttiere) * 0.5) 0 0;
}
.vente-offres-compact .vente-achat{
  margin: 0;
  display: flex;
  flex-direction: column;
}
.vente-offres-compact .vente-achat h2{ margin-bottom: .15em; }
.vente-offres-compact .offre-desc{ margin: .1em 0 .5em; }
/* PRINCIPAL compact — reste l'aplat vert dominant, mais resserré. */
.vente-offres-compact .vente-achat.principal{
  padding: calc(var(--gouttiere) * 0.85) calc(var(--gouttiere) * 1.1);
}
.vente-offres-compact .vente-achat.principal .vente-prix{ font-size: 38px; }
.vente-offres-compact .vente-achat.principal .bouton-achat{
  min-height: 50px; font-size: 19px; min-width: 0; margin-top: 10px;
  padding: 0 clamp(22px, 3vw, 38px);
}
/* SECONDAIRE compact — sobre, un peu plus dense. */
.vente-offres-compact .vente-achat.secondaire{
  padding: calc(var(--gouttiere) * 0.7) var(--gouttiere);
}
.vente-offres-compact .vente-achat.secondaire .bouton-achat{ margin-top: auto; }
/* La note d'achat, resserrée pour ne pas gonfler la hauteur. */
.vente-offres-compact .vente-note{ margin: .5em 0 0; line-height: 1.35; }
.vente-offres-compact .vente-achat.principal .vente-note{ margin-top: .5em; }

/* --- Mise en garde médicale : bandeau sobre sous la vente (hors .vente-aside,
   donc l'aplat chaud et l'ombre doivent être redéclarés ici). --------------- */
.bandeau-mise-en-garde{
  background: var(--acc-aplat-chaud);
  box-shadow: var(--acc-ombre);
  margin: var(--gouttiere) 0 0;
}

/* --- Cartes de citation qui MÈNENT à un extrait long (liens d'ancre). ------
   Elles gardent l'aspect des cartes fermées, avec un repère « Lire l'extrait ».*/
a.extrait-lien{
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
a.extrait-lien:focus-visible{ outline: 2px solid var(--accent-vert); outline-offset: 3px; }
.extrait-cue{
  display: inline-block;
  margin-left: .5em;
  color: var(--accent-vert);
  font-weight: 700;
  white-space: nowrap;
}
[data-theme="sombre"] .extrait-cue{ color: var(--accent-vert); }
.lien-filiations{ margin: 1.3em 0 0; }
.lien-filiations a{ font-weight: 600; }

/* --- EXTRAITS LONGS EN LECTURE LIBRE (bas de page, cibles des ancres). ----- */
.extraits-libres{
  margin: calc(var(--gouttiere) * 2.2) 0;
  padding-top: var(--gouttiere);
  border-top: 1px solid var(--bordure);
}
.extraits-libres > h2{ font-size: var(--taille-h2); margin-bottom: .2em; }
.extraits-libres > .intro-extraits{
  color: var(--texte-attenue); margin: 0 0 1.4em; max-width: 60ch;
}
.extrait-libre{
  margin: calc(var(--gouttiere) * 1.5) 0 0;
  scroll-margin-top: 18px;   /* petit décalage à l'arrivée par ancre */
}
.extrait-libre h3{
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: var(--taille-h3);
  color: var(--accent-vert);
  margin: 0 0 .5em;
}
.extrait-corps{ max-width: 68ch; }
.extrait-corps p{
  font-family: Georgia, "Liberation Serif", serif;
  font-size: 19px;
  line-height: 1.6;
  color: var(--texte);
  margin: 0;
}
.extrait-separateur{
  text-align: center;
  color: var(--texte-attenue);
  font-size: 20px;
  letter-spacing: .5em;
  margin: 1em 0;
  user-select: none;
}

/* --- Empilement sur écran étroit. ---------------------------------------- */
@media (max-width: 720px){
  .vente-offres-compact{ grid-template-columns: 1fr; }
}