/* =============================================================
   DIRECTION ARTISTIQUE — "Jardin aux Hirondelles"
   Maraîchage de plein air, vente directe aux particuliers (Pays d'Auge).

   C'EST LA SOURCE DE VÉRITÉ VISUELLE. Les modules ne codent jamais une
   couleur, une police ou un rayon en dur : ils consomment ces tokens. Changer
   le champ "da" du client.json suffit à repeindre tous les modules d'un coup.

   Direction "Carte", arrêtée le 2026-10-02 avec Charles. Elle reprend le
   langage de la carte et de la page Pousses, qu'il a validées le 28/09 :
   papier crème, encre très foncée, italique fin, beaucoup d'air, accroche en
   capitales espacées, chiffres en sans-serif. Aucune illustration, aucun
   aplat, aucun gros titre gras.

   Le vert est l'encre de la ferme. L'aubergine est réservée à la gamme
   Pousses : chaque gamme garde sa teinte. Règles d'emploi dans
   clients/jardin-aux-hirondelles.DESIGN.md.
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500;1,600&family=Instrument+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  /* — Couleurs — */
  --ms-surface:#F4EFE4;     /* papier : le fond, partout */
  --ms-paper:#EAE2D2;       /* papier plus dense : fond alterné */
  --ms-accent:#1B3326;      /* encre verte : boutons, liens, structure */
  --ms-ink:#1B3326;         /* titres */
  --ms-text:#1B3326;        /* texte courant */
  --ms-muted:#55615A;       /* texte secondaire, AA sur les deux papiers */
  --ms-border:rgba(27,51,38,.15);
  --ms-cuivre:#4F6826;      /* vrille foncée : étiquettes et petits textes d'appui (AA) */
  --ms-bouteille:#1B3326;   /* compat CHR */

  /* — Propres à cette DA — */
  --jh-vrille:#7E9A45;      /* vert pousse : filets uniquement, jamais du texte */
  --jh-aubergine:#2E1428;   /* encre de la gamme Pousses */
  --jh-pied-fond:#F4EFE4;   /* pied de page sur le papier, pas en aplat */
  --jh-pied-encre:#1B3326;
  --jh-pied-filet:rgba(27,51,38,.15);

  /* — Typographies — Cormorant porte la voix, Instrument Sans lit et compte. */
  --bb-font-display:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --bb-font-corps:'Instrument Sans',system-ui,-apple-system,sans-serif;
  --bb-font-mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;

  /* — Forme — angles vifs pour les blocs, pilule pour les boutons. */
  --bb-radius:0px;
  --bb-pilule:999px;

  /* — États — */
  --bb-ouvert:#4F6826;
  --bb-ferme:#B4553C;
  --bb-neutre:#8A9083;
}

/* Le papier court sur toute la page, sans bande ni dégradé. */
body{
  background-color:var(--ms-surface);
  background-image:none;
  font-variant-numeric:lining-nums;
}

/* Les titres de section parlent en italique, comme le nom. */
h2{font-style:italic}


/* =============================================================
   BASE — reset, éléments communs, règles transverses du vertical producteur.
   Ne définit AUCUNE valeur d'identité en dur : tout vient des tokens de la DA.
   Concaténée juste après la DA par le moteur.
   Préfixe de classes : .pr-* (le CHR utilise .bb-*, aucun croisement possible).
   ============================================================= */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--bb-font-corps);
  font-size:17px;line-height:1.6;
  color:var(--ms-text);
  background-color:var(--ms-surface);
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{
  font-family:var(--bb-font-display);
  font-weight:500;line-height:1.05;letter-spacing:-.015em;
  margin:0;
}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--ms-cuivre);outline-offset:3px}

/* Largeur de composition unique du vertical. Un catalogue se lit en colonne
   étroite : au-delà, l'œil perd la ligne entre le produit et son prix. */
.pr-in{max-width:1080px;margin:0 auto;padding-left:28px;padding-right:28px}

/* Prix : monospace. Utilisé par le catalogue et le calendrier. Commun. */
.pr-prix{
  font-family:var(--bb-font-mono);
  font-size:.92em;font-weight:600;
  color:var(--ms-ink);
  white-space:nowrap;
}
/* Unité de vente (kg, botte, pièce) : subordonnée au prix, jamais à son rang. */
.pr-unite{
  font-family:var(--bb-font-mono);
  font-size:.8em;font-weight:400;
  color:var(--ms-muted);
  white-space:nowrap;
}

/* Bouton d'action, réutilisé par plusieurs modules. Commun. */
.pr-btn{
  display:inline-block;padding:15px 28px;border-radius:var(--bb-pilule,var(--bb-radius));
  background:var(--ms-accent);color:var(--ms-surface);
  font-weight:600;font-size:15px;letter-spacing:.01em;
  transition:background .25s ease;
}
.pr-btn:hover{background:var(--ms-ink)}

/* Lien souligné d'un filet de terre. Action secondaire, partout dans le site. */
.pr-lien{
  font-weight:600;color:var(--ms-ink);
  border-bottom:1.5px solid var(--ms-cuivre);padding-bottom:2px;
}
.pr-lien:hover{color:var(--ms-cuivre)}

@media (max-width:640px){
  body{font-size:16px}
  .pr-in{padding-left:20px;padding-right:20px}
  .pr-btn{padding:16px 28px}
  /* Cibles tactiles : un chef consulte au téléphone entre deux services.
     Tous les liens d'action atteignent 44px de haut. Règle transverse. */
  .pr-bar-tel,.pr-lien,.pr-foot-nav a,.pr-foot-coord a{
    display:inline-flex;align-items:center;min-height:44px;
  }
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none !important;transition:none !important}
}


/* ---------- MODULE : page article + page liste du journal (producteur) ----------
   Pages du blog (URLs /journal/ et /journal/<slug>/). En-tête léger de lecture
   (pas la barre collante de pré-lancement), colonne de texte étroite pour le
   confort de lecture, et une bande d'appel vers la précommande en fin d'article :
   c'est le lien interne qui transforme un lecteur venu de Google en réservation. */

/* --- En-tête de lecture, commun aux pages article et liste --- */
.pr-art-top{
  border-bottom:1px solid var(--ms-border);
  background:var(--ms-surface);
}
.pr-art-top-in{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding-top:16px;padding-bottom:16px;
}
.pr-art-marque{
  font-family:var(--bb-font-display);font-size:22px;font-weight:600;
  color:var(--ms-ink);
  /* Le padding agrandit la zone tactile a 44px sans changer la hauteur de la
     barre : la marge negative le reprend. Un lien de 35px de haut se rate au
     pouce, et c'est le lien de retour a l'accueil. */
  padding:5px 0;margin:-5px 0;
  white-space:nowrap;
}
.pr-art-marque:hover{color:var(--ms-accent)}
/* Un nom de ferme long ne tient pas à 22px à côté du lien d'action sur
   téléphone : il passait sur deux lignes et le lien avec. On réduit le nom et
   on raccourcit le libellé plutôt que de laisser l'en-tête doubler de hauteur. */
.pr-art-top .pr-lien{white-space:nowrap}
.pr-art-cta-court{display:none}
@media (max-width:640px){
  .pr-art-marque{font-size:16px}
  .pr-art-cta-long{display:none}
  .pr-art-cta-court{display:inline}
}

/* --- Fil d'Ariane --- */
.pr-art-fil{
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  font-family:var(--bb-font-mono);font-size:13px;color:var(--ms-muted);
  margin-bottom:28px;
}
/* Meme correction de zone tactile que la marque : le fil d'Ariane est le
   deuxieme chemin de retour de la page, il doit se cliquer au pouce. */
.pr-art-fil a{color:var(--ms-cuivre);padding:12px 0;margin:-12px 0}
.pr-art-fil a:hover{text-decoration:underline}

/* --- Corps de l'article --- */
.pr-art{padding-top:44px;padding-bottom:80px}
.pr-art-in{max-width:720px}
.pr-art-date{
  font-family:var(--bb-font-mono);font-size:13px;color:var(--ms-cuivre);
  margin:0 0 12px;
}
.pr-art-h1{
  font-size:clamp(30px,5vw,48px);color:var(--ms-ink);
  margin:0 0 36px;line-height:1.08;max-width:20ch;
}
.pr-art-corps{font-size:18px;line-height:1.75;color:var(--ms-text)}
.pr-art-corps > *{max-width:66ch}
.pr-art-corps p{margin:0 0 22px}
.pr-art-h2{
  font-size:clamp(23px,3vw,30px);color:var(--ms-accent);
  margin:44px 0 16px;line-height:1.15;
}
.pr-art-h3{
  font-size:clamp(19px,2.3vw,22px);color:var(--ms-ink);
  margin:32px 0 12px;
}
.pr-art-liste,.pr-art-ol{margin:0 0 22px;padding-left:26px}
.pr-art-liste{list-style:disc}
.pr-art-ol{list-style:decimal}
.pr-art-liste li,.pr-art-ol li{margin-bottom:8px;padding-left:4px}
.pr-art-cite{
  margin:28px 0;padding:4px 0 4px 22px;
  border-left:3px solid var(--ms-cuivre);
  font-size:19px;font-style:italic;color:var(--ms-ink);
}
.pr-art-corps a{color:var(--ms-accent);text-decoration:underline;text-underline-offset:2px}
.pr-art-corps a:hover{color:var(--ms-cuivre)}

/* --- Bande d'appel vers la précommande (lien interne clé) --- */
.pr-art-cta{
  margin:52px 0 0;padding:32px 30px;
  background:color-mix(in srgb, var(--ms-accent) 9%, var(--ms-surface));
  border-top:3px solid var(--ms-cuivre);
}
.pr-art-cta-t{
  font-family:var(--bb-font-display);font-size:clamp(21px,2.6vw,26px);
  color:var(--ms-ink);margin:0 0 10px;
}
.pr-art-cta-x{margin:0 0 22px;font-size:16px;line-height:1.6;color:var(--ms-text);max-width:60ch}
.pr-art-retour{margin:34px 0 0;font-size:15px}

/* --- Page liste du journal : réutilise .pr-jour-*, on ajuste l'en-tête de page --- */
.pr-jour-page{background:var(--ms-surface)}
.pr-jour-page .pr-jour-tete{margin-top:8px}

@media (max-width:640px){
  .pr-art{padding-top:32px;padding-bottom:56px}
  .pr-art-corps{font-size:17px}
  .pr-art-cta{padding:26px 22px}
}

/* --- Image d'ouverture d'article ---------------------------------------------
   L'image tient dans la colonne de lecture, alignée au fer à gauche sur le titre
   et sur le texte : rien ne déborde, la page garde une seule ligne de départ.
   Le filet de terre sous l'image reprend le vocabulaire des repères de page de
   ville et des points de méthode : l'image est posée sur la ligne, pas encadrée.

   ⚠️ height:auto est porté par l'attribut style de l'<img> (cf. build_article_image) :
   les attributs width/height sont traduits en CSS width/height, battent
   aspect-ratio, et étireraient la photo. Piège déjà rencontré sur ce vertical. */
.pr-art-fig{
  margin:0 0 40px;
}
.pr-art-fig img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  border-bottom:2px solid var(--ms-cuivre);
}
.pr-art-fig-leg{
  margin:10px 0 0;
  font-family:var(--bb-font-mono);font-size:12.5px;line-height:1.5;
  color:var(--ms-muted);
}

@media (max-width:640px){
  .pr-art-fig{margin-bottom:30px}
  .pr-art-fig img{aspect-ratio:4/3}
}


/* ---------- MODULE : bandeau terre (producteur, particuliers) ----------
   Une image pleine largeur, hauteur contenue pour ne pas repousser le contenu
   sous la ligne de flottaison. La légende est dessous, en monospace : registre
   de reportage, pas de slogan incrusté sur la photo. */
.pr-bandeau{margin:0;background:var(--ms-paper)}
.pr-bandeau-img{
  width:100%;
  height:clamp(260px,42vw,520px);
  object-fit:cover;
  display:block;
}
.pr-bandeau-leg{
  padding-top:12px;padding-bottom:16px;
  font-family:var(--bb-font-mono);font-size:12.5px;
  color:var(--ms-muted);
}
@media (max-width:640px){
  .pr-bandeau-img{height:clamp(200px,58vw,320px)}
}


/* ---------- MODULE : barre utilitaire (tournée, zone, téléphone) ----------
   Fond vert jardin : la couleur de la marque, sobre en tête de page. Le fruit
   mûr (cuivre) reste réservé aux accents ponctuels, pas à un aplat plein. */
.pr-bar{
  position:sticky;top:0;z-index:30;
  background:var(--ms-accent);color:var(--ms-surface);
  font-size:14.5px;
}
.pr-bar-in{
  padding-top:10px;padding-bottom:10px;
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
}
.pr-bar-tournee{margin:0;font-weight:700;letter-spacing:.005em}
/* Deux libellés, un seul affiché : sur mobile, la phrase longue passait à la
   ligne et la barre collante montait à 81px, soit 10 % de l'écran d'un chef. */
.pr-bar-court{display:none}
.pr-bar-liens{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.pr-bar-zone{opacity:.9}
.pr-bar-tel{font-family:var(--bb-font-mono);font-weight:600}
.pr-bar-tel:hover{text-decoration:underline}
.pr-bar-sep{opacity:.5}

@media (max-width:640px){
  .pr-bar-in{padding-top:4px;padding-bottom:4px;gap:6px;flex-wrap:nowrap}
  .pr-bar-liens{font-size:14px}
  /* La barre collante ne doit pas manger l'écran : la zone sort (elle reste
     dans le hero et le footer), le téléphone garde la place, et la tournée
     passe en libellé court pour tenir sur une seule ligne. */
  .pr-bar-zone,.pr-bar-sep,.pr-bar-long{display:none}
  .pr-bar-court{display:inline}
}


/* ---------- MODULE : catalogue (producteur) ----------
   Un bordereau, pas une galerie. Grille déséquilibrée : index étroit et collant
   à gauche, liste large à droite. Aucune carte, aucune photo, aucun picto : la
   valeur d'une liste de prix est dans la lisibilité de la ligne. */
.pr-cat{padding:78px 0 84px}

.pr-cat-tete{max-width:56ch;margin-bottom:52px}
.pr-cat-t{font-size:clamp(34px,4.4vw,52px);color:var(--ms-ink);margin-bottom:16px}
.pr-cat-mention{margin:0;color:var(--ms-muted);font-size:16px;line-height:1.55}

/* Filtre : deux états, pas un menu déroulant. Révélé par le JS uniquement. */
.pr-cat-filtre{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.pr-cat-filtre[hidden]{display:none}
.pr-cat-fbtn{
  font-family:var(--bb-font-corps);font-size:14.5px;font-weight:600;
  padding:10px 18px;border-radius:var(--bb-radius);
  border:1.5px solid var(--ms-border);
  background:transparent;color:var(--ms-text);
  cursor:pointer;transition:border-color .2s ease,background .2s ease;
}
.pr-cat-fbtn:hover{border-color:var(--ms-accent)}
.pr-cat-fbtn.est-actif{
  background:var(--ms-accent);border-color:var(--ms-accent);color:var(--ms-surface);
}

.pr-cat-corps{display:grid;grid-template-columns:236px 1fr;gap:64px;align-items:start}

/* --- Index des familles, collant --- */
.pr-cat-index{position:sticky;top:76px;display:flex;flex-direction:column}
.pr-cat-index-l{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:11px 0;
  border-bottom:1px solid var(--ms-border);
  font-size:15px;line-height:1.3;color:var(--ms-text);
  transition:color .2s ease;
}
.pr-cat-index-l:first-child{border-top:1px solid var(--ms-border)}
.pr-cat-index-l:hover{color:var(--ms-accent)}
.pr-cat-index-n{font-family:var(--bb-font-mono);font-size:12.5px;color:var(--ms-cuivre);flex:none}
.pr-cat-index-l[hidden]{display:none}

/* --- Les listes --- */
.pr-cat-fam{margin-bottom:56px}
.pr-cat-fam:last-of-type{margin-bottom:0}
.pr-cat-fam[hidden]{display:none}
.pr-cat-fam-t{
  font-size:clamp(24px,2.6vw,31px);color:var(--ms-ink);
  padding-bottom:14px;border-bottom:2px solid var(--ms-ink);
}
.pr-cat-fam-note{
  margin:14px 0 0;max-width:60ch;
  font-size:15.5px;line-height:1.55;color:var(--ms-muted);
}
.pr-cat-liste{margin-top:22px}

/* La ligne de produit. Le marqueur de saison est un liseré à gauche, pas un
   badge : c'est le même vocabulaire que la pastille ouvert/fermé du CHR. */
.pr-cat-item{
  padding:15px 0 15px 16px;
  border-left:2px solid transparent;
  border-bottom:1px solid var(--ms-border);
  transition:border-color .2s ease;
}
.pr-cat-item:last-child{border-bottom:0}
.pr-cat-item.est-de-saison{border-left-color:var(--ms-accent)}
.pr-cat-item[hidden]{display:none}

/* En-tête de ligne : nom, filet étiré, prix. Le filet est un élément vide étiré
   en CSS, jamais une suite de points tapés, pour qu'un lecteur d'écran
   n'énonce pas "point point point". */
.pr-cat-ligne{display:flex;align-items:baseline;gap:10px;margin:0}
.pr-cat-nom{font-weight:600;font-size:17.5px;color:var(--ms-ink)}
.pr-cat-filet{
  flex:1;height:1px;
  background:repeating-linear-gradient(90deg,
    var(--ms-border) 0 3px, transparent 3px 6px);
  transform:translateY(-3px);
}
.pr-cat-prix{display:flex;align-items:baseline;gap:6px;flex:none}

.pr-cat-detail{margin:5px 0 0;max-width:52ch;font-size:15px;color:var(--ms-muted)}
/* Retour en saison, rempli par le JS. Dit QUAND plutôt que de barrer la ligne :
   un chef qui construit sa carte d'automne a besoin de la date, pas d'un refus. */
.pr-cat-retour{
  margin:6px 0 0;
  font-family:var(--bb-font-mono);font-size:12.5px;color:var(--ms-cuivre);
}
.pr-cat-retour[hidden]{display:none}

.pr-cat-vide{
  margin:0;padding:28px 0;max-width:52ch;
  font-size:16px;color:var(--ms-muted);
}
.pr-cat-vide[hidden]{display:none}

@media (max-width:900px){
  .pr-cat-corps{grid-template-columns:1fr;gap:32px}
  /* L'index passe en rail horizontal défilable : il reste utile au pouce, et il
     ne peut pas déborder la page (le défilement est interne au rail). */
  .pr-cat-index{
    position:static;flex-direction:row;gap:10px;
    overflow-x:auto;padding-bottom:6px;
    -webkit-overflow-scrolling:touch;
  }
  .pr-cat-index-l{
    flex:none;gap:8px;padding:9px 14px;min-height:44px;align-items:center;
    border:1px solid var(--ms-border);border-radius:var(--bb-radius);
    font-size:14.5px;white-space:nowrap;
  }
  .pr-cat-index-l:first-child{border-top:1px solid var(--ms-border)}
  /* Cibles tactiles : un chef consulte au pouce, entre deux services. */
  .pr-cat-fbtn{min-height:44px}
}
@media (max-width:640px){
  .pr-cat{padding:52px 0 60px}
  .pr-cat-tete{margin-bottom:34px}
  /* Sous 640px le filet pointillé n'a plus la place de respirer entre un nom
     long et un prix : le prix passe à la ligne. */
  .pr-cat-ligne{flex-wrap:wrap}
  .pr-cat-filet{display:none}
  .pr-cat-nom{flex:1 1 100%}
  .pr-cat-prix{margin-top:4px}
  .pr-cat-fam{margin-bottom:42px}
}


/* ---------- MODULE : commande (producteur) ----------
   Un bon de commande, pas une carte de contact. Fond papier pour détacher le
   bloc du catalogue, champs soulignés d'un seul filet, aucune boîte arrondie,
   aucun picto. Grille déséquilibrée, comme le hero : le texte tient la marge,
   le formulaire prend la largeur. */
.pr-cmd{background:var(--ms-paper);padding:78px 0 84px}
.pr-cmd-in{display:grid;grid-template-columns:1fr 1.35fr;gap:72px;align-items:start}

/* --- Colonne de gauche : ce qui se passe après l'envoi --- */
.pr-cmd-t{font-size:clamp(32px,4vw,46px);color:var(--ms-ink);margin-bottom:16px}
.pr-cmd-chapo{margin:0 0 30px;font-size:17px;line-height:1.55;color:var(--ms-text)}
.pr-cmd-suite{margin:0 0 28px;padding:0;counter-reset:none}
.pr-cmd-etape{
  display:flex;gap:14px;align-items:baseline;
  padding:12px 0;border-top:1px solid var(--ms-border);
  font-size:15.5px;line-height:1.5;color:var(--ms-text);
}
.pr-cmd-etape:last-child{border-bottom:1px solid var(--ms-border)}
.pr-cmd-etape-n{
  font-family:var(--bb-font-mono);font-size:12.5px;color:var(--ms-cuivre);flex:none;
}
.pr-cmd-tel{margin:0;font-size:16px;color:var(--ms-muted)}

/* --- Le formulaire --- */
.pr-cmd-grille{display:grid;grid-template-columns:1fr 1fr;gap:26px 28px}
.pr-cmd-champ{margin:0 0 26px;display:flex;flex-direction:column;gap:7px}
.pr-cmd-grille .pr-cmd-champ{margin:0}
.pr-cmd-champ--large{grid-column:1 / -1}
.pr-cmd-champ label,
.pr-cmd-jours legend{
  font-family:var(--bb-font-mono);font-size:12.5px;
  color:var(--ms-cuivre);
}
.pr-cmd-fac{color:var(--ms-muted)}

.pr-cmd-champ input,
.pr-cmd-champ textarea{
  font-family:var(--bb-font-corps);font-size:16.5px;color:var(--ms-ink);
  background:transparent;
  border:0;border-bottom:1.5px solid var(--ms-border);
  border-radius:0;
  padding:7px 0 9px;
  width:100%;
  transition:border-color .2s ease;
}
.pr-cmd-champ textarea{resize:vertical;line-height:1.5;min-height:96px}
.pr-cmd-champ input:hover,
.pr-cmd-champ textarea:hover{border-bottom-color:var(--ms-muted)}
.pr-cmd-champ input:focus,
.pr-cmd-champ textarea:focus{
  outline:none;border-bottom-color:var(--ms-accent);border-bottom-width:2px;
  padding-bottom:8px;
}
/* Le focus reste visible au clavier : le filet seul ne suffit pas à signaler
   la position dans un formulaire long. */
.pr-cmd-champ input:focus-visible,
.pr-cmd-champ textarea:focus-visible{outline:2px solid var(--ms-cuivre);outline-offset:3px}
.pr-cmd-champ ::placeholder{color:var(--ms-muted);opacity:1}

/* Jours de tournée : trois choix, pas un menu déroulant à ouvrir. */
.pr-cmd-jours{border:0;padding:0;margin:0 0 26px;display:flex;flex-wrap:wrap;gap:10px 22px}
.pr-cmd-jours legend{padding:0;margin-bottom:12px;float:left;width:100%}
.pr-cmd-choix{display:flex;align-items:center;gap:8px;min-height:44px}
.pr-cmd-choix input{width:18px;height:18px;accent-color:var(--ms-accent);flex:none}
/* L'étiquette occupe toute la hauteur de la ligne : le bouton radio ne fait que
   18px, c'est le texte à côté qui doit offrir la cible tactile de 44px. */
.pr-cmd-choix label{
  display:flex;align-items:center;min-height:44px;cursor:pointer;
  font-family:var(--bb-font-corps);font-size:16px;color:var(--ms-text);
}

.pr-cmd-envoi{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.pr-cmd-rgpd{font-size:14px;color:var(--ms-muted);max-width:34ch;line-height:1.45}

/* État "envoyé" : les champs cèdent la place à la confirmation. Un formulaire
   vide laissé sous un bouton inerte laisse croire que rien n'est parti. */
.pr-cmd-form.est-envoye .pr-cmd-grille,
.pr-cmd-form.est-envoye .pr-cmd-jours,
.pr-cmd-form.est-envoye > .pr-cmd-champ,
.pr-cmd-form.est-envoye .pr-cmd-envoi{display:none}

/* Message de retour, rempli par le JS. */
.pr-cmd-msg{
  margin:24px 0 0;padding:16px 18px;
  border-left:3px solid var(--ms-accent);
  background:var(--ms-surface);
  font-size:16px;line-height:1.5;color:var(--ms-text);
}
.pr-cmd-msg.est-erreur{border-left-color:var(--bb-ferme)}
.pr-cmd-msg[hidden]{display:none}

/* Champ piège à robots : sorti du flux sans display:none (que certains robots
   détectent) et retiré du parcours clavier. */
.pr-cmd-piege{
  position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;
}

@media (max-width:900px){
  .pr-cmd-in{grid-template-columns:1fr;gap:44px}
}
@media (max-width:640px){
  .pr-cmd{padding:52px 0 60px}
  .pr-cmd-grille{grid-template-columns:1fr;gap:22px}
  /* Cible tactile : sur mobile les champs gagnent en hauteur de frappe. */
  .pr-cmd-champ input{padding:11px 0 13px}
  .pr-cmd-envoi .pr-btn{width:100%;text-align:center}
}


/* ---------- MODULE : bandeau film (producteur, particuliers) ----------
   Une bande de matière en très gros plan
   entre le hero et le journal. Elle ne porte aucun texte : mettre du texte
   par-dessus obligerait à assombrir l'image pour rester lisible, et c'est
   exactement le trope qu'on évite ici.

   Le module n'est rendu que si le film existe (cf. build_film dans le moteur). */

.jh-film{position:relative;margin:0;
  height:clamp(220px,38vh,420px);
  overflow:hidden;background:var(--ms-accent);
  line-height:0}
.jh-film-video,
.jh-film-repli{width:100%;height:100%;object-fit:cover;display:block}

/* La vidéo est un décor. Qui a demandé à réduire les animations reçoit la
   première image fixe, pas une boucle qui tourne en fond. */
.jh-film-repli{display:none}
@media (prefers-reduced-motion:reduce){
  .jh-film-video{display:none}
  .jh-film-repli{display:block}
}


/* ---------- MODULE : footer (producteur) ---------- */
.pr-foot{
  margin-top:0;
  /* Défaut : aplat d'encre (site pro). Une DA peut le ramener sur le papier
     en déclarant --jh-pied-fond, --jh-pied-encre et --jh-pied-filet. */
  background:var(--jh-pied-fond,var(--ms-ink));color:var(--jh-pied-encre,var(--ms-paper));
  border-top:1px solid var(--jh-pied-filet,transparent);
}
.pr-foot-in{
  padding-top:52px;padding-bottom:46px;
  display:grid;grid-template-columns:1.2fr 1fr auto;gap:36px;align-items:start;
}
.pr-foot-nom{
  margin:0 0 6px;
  font-family:var(--bb-font-display);font-size:26px;font-weight:500;
}
.pr-foot-sign{margin:0;font-size:15px;opacity:.72}
.pr-foot-coord p{margin:0 0 6px;font-size:15px;opacity:.86}
.pr-foot-coord a:hover{text-decoration:underline}
.pr-foot-nav{display:flex;flex-direction:column;gap:8px;font-size:15px}
.pr-foot-nav a{opacity:.86}
.pr-foot-nav a:hover{opacity:1;text-decoration:underline}

@media (max-width:900px){
  .pr-foot-in{grid-template-columns:1fr;gap:28px}
}
@media (max-width:640px){
  .pr-foot-in{padding-top:40px;padding-bottom:36px}
}


/* ---------- MODULE : gammes (producteur, particuliers) ----------
   Direction "Carte" (2026-10-02). Chaque gamme est un mot, posé en grand
   italique sur le papier : c'est le sommaire de ce que le jardin produit. Pas
   de vignette photo, pas de carte : deux colonnes séparées par un filet.

   Une gamme peut porter sa propre encre (champ "encre" de GAMMES[]) : Pousses
   garde l'aubergine de sa carte, quelle que soit l'encre de la ferme. */

.jh-gammes{border-top:1px solid var(--ms-border);
  padding-block:clamp(56px,9vw,104px) clamp(64px,10vw,120px)}
.jh-gammes-t{display:block;margin:0;color:var(--ms-muted);font-style:normal}
.jh-gammes-deux{margin-top:clamp(28px,5vw,52px);display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr))}
.jh-gamme{padding:6px clamp(24px,5vw,64px) 6px 0}
.jh-gamme + .jh-gamme{padding:6px 0 6px clamp(24px,5vw,64px);border-left:1px solid var(--ms-border)}
.jh-gamme-pour{margin:0;color:var(--ms-cuivre)}
.jh-gamme-nom{margin:18px 0 0;font:italic 500 clamp(68px,10.5vw,132px)/.9 var(--bb-font-display);
  letter-spacing:-.005em;color:var(--ms-ink)}
.jh-gamme .jh-filet{margin:26px 0 20px}
.jh-gamme .jh-dit{margin:0;color:var(--ms-ink)}
.jh-gamme-texte{margin:14px 0 0;color:var(--ms-muted);font-size:16.5px;max-width:26rem;text-wrap:pretty}
.jh-gamme .jh-trait{margin-top:18px}

.jh-gamme--aubergine .jh-gamme-nom,
.jh-gamme--aubergine .jh-dit,
.jh-gamme--aubergine .jh-trait{color:var(--jh-aubergine)}

@media (max-width:760px){
  .jh-gammes-deux{grid-template-columns:1fr}
  .jh-gamme,.jh-gamme + .jh-gamme{padding:0;border-left:0}
  .jh-gamme + .jh-gamme{margin-top:48px;padding-top:44px;border-top:1px solid var(--ms-border)}
}


/* ---------- MODULE : hero typographique (producteur) ----------
   La composition du vertical : le nom en masse, une ligne de terre pleine
   largeur, puis tout ce qui pousse en dessous. C'est le motif du logo transposé
   en mise en page, et c'est ce qui distingue ce hero de celui du CHR (nom + info
   pratique dans un seul bloc). */
.pr-hero{position:relative}

/* --- Au-dessus de la ligne : le nom, posé sur le relevé topographique ---
   Les courbes de niveau donnent le relief du terrain sans une seule image :
   c'est le geste signature du hero. Elles sont dessinées par site.js dans un
   SVG aria-hidden, et respirent très lentement (±1,2 %) pour rester vivantes
   sans jamais capter l'attention au détriment du texte. */
/* Le ciel : dégradé du bleu-vert doux (l'air, le matin) vers l'ivoire.
   C'est le haut du "là où le sol rencontre le ciel", ressenti et non écrit. */
.pr-hero-haut{position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--pr-ciel-clair) 0%, var(--ms-surface) 54%)}
/* Grand écran : le hero est LU, pas parcouru au pouce. Il reste compact pour
   que l'action tombe haut dans la page et qu'on devine la suite sous la ligne
   de terre. On ne cherche pas à remplir la hauteur ici. */
.pr-hero-haut-in{position:relative;z-index:2;padding-top:clamp(28px,5vh,64px);padding-bottom:clamp(28px,5vh,56px)}
.pr-hero-topo{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.pr-hero-topo path{
  fill:none;stroke:var(--ms-accent);
  vector-effect:non-scaling-stroke;
  transform-origin:50% 50%;
  animation:pr-respire 14s ease-in-out infinite;
}
@keyframes pr-respire{0%,100%{transform:scale(1)}50%{transform:scale(1.012)}}
/* Le lieu, précédé d'un filet de terre : la ligne d'horizon en miniature,
   annoncée avant même le nom. */
.pr-hero-situe{
  display:flex;align-items:center;gap:16px;
  margin:0 0 clamp(18px,3.4vh,30px);
  font-family:var(--bb-font-mono);font-size:13px;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--ms-muted);
}
.pr-hero-filet{flex:none;width:44px;height:1px;background:var(--ms-cuivre)}
/* Le nom est traité en AFFICHE, pas en titre de document : il occupe la
   largeur de la composition et écrase le reste, sur grand écran comme sur
   téléphone. Un wordmark timide au milieu du blanc était le principal défaut
   des versions précédentes. */
.pr-hero-nom{
  font-family:'Bricolage Grotesque',var(--bb-font-corps);
  font-weight:800;
  /* Deux contraintes, pas une : la largeur ET la hauteur de l'écran. Un
     portable large mais peu haut (1536x730) est le cas courant, et une taille
     indexée sur la seule largeur y pousse l'action sous la ligne de flottaison.
     Le nom occupe deux lignes à 0,84 d'interligne, soit 1,68 fois sa taille :
     le plafonner à 19vh lui laisse environ un tiers de la hauteur. */
  font-size:clamp(64px,min(16vw,19vh),220px);
  line-height:.84;
  letter-spacing:-.038em;
  color:var(--ms-ink);
  margin:0;
}
/* Deuxième ligne en serif italique vert, décalée à droite : le grotesque brut
   rencontre la voix serif, et le retrait crée le mouvement sans nuire à la
   lecture. C'est la tension du nom, mise en page. */
.pr-hero-nom-2{
  display:block;
  font-family:var(--bb-font-display);
  font-style:italic;
  font-weight:600;
  letter-spacing:-.012em;
  padding-left:1.2em;
  color:var(--ms-accent);
}
/* Sur téléphone, le nom occupe la largeur : c'est lui qu'on doit voir en
   arrivant, pas une ligne de texte perdue dans du blanc. La taille est indexée
   sur le viewport, calée sur la seconde ligne — "Brute" en italique est plus
   large que "Terre" (2,2em contre 2,11em), c'est donc elle qui fixe le
   plafond : 2,2em + 0,34em de retrait doivent tenir dans la mesure. */
@media (max-width:640px){
  .pr-hero-nom{font-size:clamp(64px,34vw,200px)}
  .pr-hero-nom-2{padding-left:.34em}
}

/* --- La ligne de repères ---
   Les quatre mots qui définissent la ferme, en une ligne, séparés par des
   points cuivre. Ils se lisent d'un trait sous la promesse et servent de
   légende au relevé qui court derrière. Le séparateur appartient au mot qui le
   précède (::after) et non au suivant : sur deux lignes, il reste ainsi collé
   en fin de ligne au lieu d'ouvrir la suivante par un point orphelin. */
.pr-hero-reperes{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:10px 16px;margin:0;padding:0;
  font-family:var(--bb-font-mono);font-size:13px;line-height:1.2;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--ms-muted);
}
.pr-hero-reperes li{display:flex;align-items:center;gap:16px}
.pr-hero-reperes li:not(:last-child)::after{content:"·";color:var(--ms-cuivre)}

/* --- La terre : une colline douce en bas du ciel, le sol d'où sort le contenu.
   Le radial donne le volume (bombé au centre, qui s'éteint sur les côtés), la
   courbe SVG posée dessus donne le relief. --- */
.pr-hero-sol{position:relative;height:clamp(72px,9vh,116px);line-height:0}
.pr-hero-sol svg{display:block;width:100%;height:100%}

/* --- Sous la ligne : la terre, d'où sort le contenu ---
   Le dégradé part de la ligne et s'éteint : de la profondeur de sol, pas un
   bloc de couleur. color-mix garde le module dépendant du token, jamais d'une
   valeur en dur. */
.pr-hero-bas{
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--ms-cuivre) 11%, transparent) 0,
    transparent 220px);
  padding-top:44px;padding-bottom:72px;
}
/* La promesse : elle suit le nom, en corps généreux, sur une mesure courte pour
   qu'elle se lise en deux ou trois lignes franches. */
/* Rythme du grand écran : les trois groupes se suivent par des sauts égaux et
   modérés. La hiérarchie est déjà portée par la taille du nom, l'espace n'a
   pas à la répéter. */
.pr-hero-promesse{margin-top:clamp(24px,5vh,52px)}
/* C'est le H1 de la page (le nom de la ferme, lui, est un <p> : cf. la note du
   partial hero-prod). D'où font-family et letter-spacing explicites : sans eux,
   la règle globale h1,h2,h3 de base.css basculerait la phrase en Fraunces
   resserré, alors qu'elle doit rester du corps de texte. */
.pr-hero-phrase{
  max-width:36ch;margin:0;
  font-family:var(--bb-font-corps);letter-spacing:normal;
  font-size:clamp(18px,2.1vw,21px);line-height:1.55;font-weight:500;
  color:var(--ms-text);
}
.pr-hero-reperes{margin-top:clamp(16px,3vh,26px)}
.pr-hero-actions{display:flex;align-items:center;gap:28px;flex-wrap:wrap;margin-top:clamp(20px,4vh,38px)}

/* Les trois faits pro, en lignes de bordereau. Pas de cartes, pas de pictos. */
.pr-hero-faits{margin:0;padding:0}
.pr-hero-fait{
  display:grid;gap:3px;
  padding:0 0 14px;margin-bottom:14px;
  border-bottom:1px solid var(--ms-border);
}
.pr-hero-fait:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.pr-hero-fait dt{
  margin:0;
  font-family:var(--bb-font-mono);font-size:12.5px;
  color:var(--ms-cuivre);
}
.pr-hero-fait dd{margin:0;font-size:16px;line-height:1.45;color:var(--ms-text)}

/* Sur téléphone, le hero EST la page tant qu'on n'a pas défilé. On le cale sur
   la hauteur de l'écran pour que la colonne entière — lieu, nom, promesse,
   repères, bouton — tienne d'un seul regard, sans rien repousser dehors.
   svh, et non vh ni dvh :
     - vh compte la barre d'adresse rétractée : le bas du hero sort de l'écran
       tant qu'on n'a pas défilé ;
     - dvh suit la hauteur EN TEMPS RÉEL. Quand la barre du navigateur se
       rétracte au défilement, le hero grandit et les groupes répartis
       s'écartent sous les yeux : le hero bouge pendant qu'on le lit ;
     - svh est la plus petite hauteur (barres visibles). Elle ne varie jamais,
       donc le calage tient et rien ne bouge au défilement.
   Le padding se règle sur .pr-hero-haut-in, qui le porte, pas sur son
   conteneur (sinon les deux s'ajoutent). */
@media (max-width:640px){
  /* La barre collante reste à l'écran : on retire sa hauteur pour que le bas du
     hero tombe pile sur le bord de l'écran. --pr-bar-h est publiée par site.js
     (repli à 52px si le script n'a pas tourné). */
  .pr-hero{
    display:flex;flex-direction:column;
    min-height:calc(100vh - var(--pr-bar-h, 52px));
    min-height:calc(100svh - var(--pr-bar-h, 52px));
  }
  /* Le relevé passe au second plan : sur un petit écran il occupe la même
     surface que le nom, il doit donc peser beaucoup moins. */
  .pr-hero-topo{opacity:.45}

  /* LE POINT CLÉ DU HERO MOBILE.
     Le contenu n'est pas centré en bloc : les trois groupes sont RÉPARTIS sur
     la hauteur (space-between). L'identité tient le haut, l'action tient le
     bas — dans la zone que le pouce atteint sans déplacer la main — et le vide
     tombe entre les groupes, là où il sépare des idées.
     Centrer produisait l'effet inverse : la hauteur étant fixe, tout espace
     ajouté entre les blocs était repris sur les marges extérieures, et le hero
     paraissait identique quoi qu'on règle. */
  .pr-hero-haut{flex:1;display:flex}
  .pr-hero-haut-in{
    width:100%;display:flex;flex-direction:column;justify-content:space-between;
    gap:40px;padding-top:40px;padding-bottom:40px;
  }

  .pr-hero-situe{margin-bottom:26px;font-size:11.5px;gap:12px}
  .pr-hero-filet{width:30px}
  /* Les marges de rythme du grand écran sont neutralisées : ici c'est la
     répartition qui place les groupes, deux mécanismes qui se cumuleraient. */
  .pr-hero-promesse{margin-top:0}
  .pr-hero-phrase{line-height:1.55}
  .pr-hero-reperes{margin-top:24px;font-size:11.5px;gap:10px 12px}
  .pr-hero-reperes li{gap:12px}
  .pr-hero-actions{margin-top:0;gap:24px}
}


/* ---------- MODULE : journal de ferme (producteur, particuliers) ----------
   Un index de carnet, pas une grille de cartes. Chaque billet est une ligne
   séparée par un filet de terre. La date en monospace rappelle le bordereau du
   vertical, le titre porte en display, l'extrait donne envie. Fond papier pour
   détacher le cœur du site du reste de la page. */
.pr-jour{
  background:var(--ms-paper);
  padding-top:76px;padding-bottom:76px;
}
.pr-jour-tete{max-width:46ch;margin-bottom:44px}
.pr-jour-t{
  font-size:clamp(38px,6.6vw,60px);line-height:1.02;
  color:var(--ms-ink);margin:0 0 16px;
}
.pr-jour-intro{
  margin:0;font-size:17px;line-height:1.6;color:var(--ms-muted);
}

.pr-jour-liste{border-top:1px solid var(--ms-border)}
.pr-jour-item{
  border-bottom:1px solid var(--ms-border);
}
/* Toute la ligne est cliquable via le lien titre ; le survol souligne la terre. */
.pr-jour-lien{
  display:grid;
  /* Trois colonnes : le repère de date, le texte, la vignette. L'image est à
     DROITE et non en tête : dans un sommaire de carnet, c'est le titre qui doit
     accrocher l'œil en premier, la photo confirme. */
  grid-template-columns:130px 1fr 190px;
  gap:8px 36px;align-items:baseline;
  padding:30px 0;
  transition:padding-left .2s ease;
}
.pr-jour-lien:hover{padding-left:10px}
.pr-jour-date{
  font-family:var(--bb-font-mono);font-size:13px;
  color:var(--ms-cuivre);text-transform:lowercase;
  padding-top:4px;
}
.pr-jour-corps{max-width:60ch}
.pr-jour-titre{
  font-size:clamp(25px,3vw,31px);font-weight:600;color:var(--ms-ink);
  margin:0 0 10px;line-height:1.1;
}
.pr-jour-lien:hover .pr-jour-titre{color:var(--ms-accent)}
.pr-jour-extrait{margin:0 0 12px;font-size:16px;line-height:1.55;color:var(--ms-text)}
.pr-jour-plus{
  font-family:var(--bb-font-mono);font-size:13px;font-weight:600;
  color:var(--ms-cuivre);
}

/* --- Vignette de billet ------------------------------------------------------
   La colonne est toujours occupée, même sans photo : sinon la liste se
   désaligne d'une ligne à l'autre selon que le billet est illustré ou non.

   align-self:start contre le align-items:baseline de la grille, qui ferait
   flotter l'image sur la ligne de base du titre. */
.pr-jour-vign{
  display:block;align-self:start;
  aspect-ratio:4/3;overflow:hidden;
  background:color-mix(in srgb, var(--ms-ink) 6%, transparent);
  border-bottom:2px solid var(--ms-cuivre);
}
.pr-jour-vign img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .35s ease;
}
.pr-jour-lien:hover .pr-jour-vign img{transform:scale(1.035)}

/* Sans photo : un aplat de courbes, écho au relevé topographique du hero. Ça
   dit « pas encore de photo », pas « image cassée ». */
.pr-jour-vign-vide{
  background:
    repeating-linear-gradient(
      165deg,
      transparent 0 9px,
      color-mix(in srgb, var(--ms-cuivre) 16%, transparent) 9px 10px
    ),
    color-mix(in srgb, var(--ms-ink) 5%, transparent);
  border-bottom-color:color-mix(in srgb, var(--ms-cuivre) 45%, transparent);
}

@media (max-width:640px){
  .pr-jour{padding-top:52px;padding-bottom:52px}
  /* Sur téléphone, la vignette passe à droite sur les deux lignes de texte :
     une image pleine largeur par billet rendrait la liste interminable. */
  .pr-jour-lien{
    grid-template-columns:1fr 92px;
    grid-template-areas:"date vign" "corps vign";
    gap:6px 16px;padding:24px 0;
  }
  .pr-jour-date{padding-top:0;grid-area:date}
  .pr-jour-corps{grid-area:corps}
  .pr-jour-vign{grid-area:vign;aspect-ratio:1/1}
}

/* Aucun billet illustré dans la liste : la colonne de vignette disparaît pour
   tous. Trois cases vides d'affilée disent « images manquantes », pas « carnet ». */
.pr-jour-liste:not(:has(.pr-jour-vign img)) .pr-jour-vign{display:none}
.pr-jour-liste:not(:has(.pr-jour-vign img)) .pr-jour-lien{grid-template-columns:130px 1fr}
@media (max-width:640px){
  .pr-jour-liste:not(:has(.pr-jour-vign img)) .pr-jour-lien{
    grid-template-columns:1fr;grid-template-areas:"date" "corps";
  }
}


/* ---------- MODULE : maison, qui est derrière (producteur, particuliers) ----------
   Une lettre, pas une fiche. Colonne étroite, interligne généreux, le texte fait
   tout le travail. La première ligne du premier paragraphe est mise en avant pour
   accrocher l'œil sans recourir à un chapô artificiel. */
.pr-maison{
  border-top:1px solid var(--ms-border);
  padding-top:80px;padding-bottom:80px;
}
.pr-maison-t{
  font-size:clamp(38px,6.6vw,60px);line-height:1.02;
  color:var(--ms-accent);
  margin:0 0 32px;
  max-width:20ch;
}
/* Deux colonnes : la lettre à gauche, le portrait vertical à droite. Le
   portrait est en 3/4 : un format vertical tient le regard sur la personne,
   là où un paysage la noierait dans le décor. */
/* Sans portrait, la lettre reste seule dans sa colonne étroite. */
.pr-maison-in:has(.pr-maison-fig){display:grid;grid-template-columns:1.5fr 1fr;gap:60px;align-items:start}
.pr-maison-texte{max-width:62ch}
.pr-maison-fig{margin:0}
.pr-maison-img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;display:block}
.pr-maison-leg{
  margin:10px 0 0;font-family:var(--bb-font-mono);font-size:12px;
  color:var(--ms-muted);line-height:1.45;
}
.pr-maison-texte p{
  margin:0 0 22px;
  font-size:clamp(17px,2vw,19px);line-height:1.7;color:var(--ms-text);
}
.pr-maison-texte p:last-child{margin-bottom:0}
/* Le premier paragraphe, un cran plus fort : c'est l'accroche. */
.pr-maison-texte p:first-of-type{
  font-size:clamp(19px,2.3vw,22px);line-height:1.6;color:var(--ms-ink);
}

@media (max-width:640px){
  .pr-maison{padding-top:56px;padding-bottom:56px}
}

@media (max-width:900px){
  .pr-maison-in:has(.pr-maison-fig){grid-template-columns:1fr;gap:34px}
  .pr-maison-img{aspect-ratio:4/3}
}


/* ---------- MODULE : méthode, comment on cultive (producteur, particuliers) ----------
   Des points numérotés en lignes de bordereau, séparés par un filet de terre.
   Même vocabulaire visuel que les faits du hero et le catalogue pro : numéro en
   monospace, titre en display, explication en corps. Pas de cartes, pas de picto.

   Sur le papier depuis le 2026-10-02 : la section était un aplat d'encre plein
   écran, ce que la direction « Carte » exclut. */
.pr-meth{
  background:var(--ms-surface);color:var(--ms-text);
  border-top:1px solid var(--ms-border);
  padding-top:80px;padding-bottom:80px;
}
.pr-meth-tete{margin-bottom:44px}
/* Deux colonnes seulement quand une image accompagne l'en-tête. */
.pr-meth-tete:has(.pr-meth-fig){
  display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:end;
}
.pr-meth-tete-txt{max-width:44ch}
.pr-meth-fig{margin:0}
.pr-meth-img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;display:block}
.pr-meth-leg{
  margin:10px 0 0;font-family:var(--bb-font-mono);font-size:12px;
  color:var(--ms-muted);line-height:1.45;
}
.pr-meth-t{
  font-size:clamp(38px,6.6vw,60px);line-height:1.02;
  color:var(--ms-ink);margin:0 0 14px;
}
.pr-meth-intro{margin:0;font-size:17px;line-height:1.6;color:var(--ms-muted)}

.pr-meth-liste{border-top:1px solid var(--ms-border)}
.pr-meth-point{
  display:grid;grid-template-columns:64px 1fr;gap:8px 32px;align-items:start;
  padding:28px 0;
  border-bottom:1px solid var(--ms-border);
}
.pr-meth-num{
  font-family:var(--bb-font-mono);font-size:13px;font-weight:500;letter-spacing:.14em;
  color:var(--ms-cuivre);
  padding-top:6px;
}
.pr-meth-titre{
  font-size:clamp(25px,3vw,31px);font-weight:600;color:var(--ms-ink);
  margin:0 0 8px;line-height:1.1;
}
.pr-meth-texte{
  margin:0;font-size:16px;line-height:1.6;color:var(--ms-muted);
  max-width:60ch;
}

@media (max-width:900px){
  .pr-meth-tete:has(.pr-meth-fig){grid-template-columns:1fr;gap:28px;align-items:start}
}
@media (max-width:640px){
  .pr-meth{padding-top:56px;padding-bottom:56px}
  .pr-meth-point{grid-template-columns:1fr;gap:6px;padding:22px 0}
  .pr-meth-num{padding-top:0}
}


/* ---------- MODULE : précommande, réserver sa place (producteur, particuliers) ----------
   La zone d'action, sur le papier, séparée par un filet. Deux colonnes sur desktop :
   la valeur empilée à gauche, le formulaire à droite dans un cartouche à angles
   vifs. La rareté (jauge) est en tête, le prix en bas, petit. */
.pr-preco{
  background:var(--ms-surface);
  padding-top:80px;padding-bottom:84px;
  border-top:1px solid var(--ms-border);
}
.pr-preco-tete{max-width:56ch;margin-bottom:44px}
.pr-preco-t{
  font-size:clamp(38px,6.6vw,60px);line-height:1.02;color:var(--ms-ink);
  margin:0 0 18px;
}
.pr-preco-intro{margin:0 0 30px;font-size:clamp(17px,2vw,19px);line-height:1.65;color:var(--ms-text)}

/* --- Jauge de rareté : la terre ne tient qu'un nombre de paniers, on le montre --- */
.pr-preco-jauge{max-width:440px}
.pr-preco-jauge-chiffres{
  display:flex;justify-content:space-between;align-items:baseline;
  font-family:var(--bb-font-mono);margin-bottom:8px;
}
.pr-preco-jauge-n{font-size:22px;font-weight:600;color:var(--ms-accent)}
.pr-preco-jauge-tot{font-size:14px;color:var(--ms-muted)}
.pr-preco-jauge-piste{
  height:8px;background:color-mix(in srgb, var(--ms-accent) 16%, transparent);
}
.pr-preco-jauge-rempli{height:8px;background:var(--ms-accent)}

/* --- Corps : valeur empilée + formulaire --- */
.pr-preco-corps{
  display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;
}
.pr-preco-fig{margin:0 0 24px}
.pr-preco-img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;display:block}
.pr-preco-leg{
  margin:9px 0 0;font-family:var(--bb-font-mono);font-size:12px;
  color:var(--ms-muted);line-height:1.45;
}
.pr-preco-valeur-t{
  font-family:var(--bb-font-mono);font-size:13px;font-weight:600;
  color:var(--ms-cuivre);margin:0 0 18px;text-transform:uppercase;letter-spacing:.04em;
}
.pr-preco-inclus{display:grid;gap:14px;margin:0 0 30px}
.pr-preco-inclus li{
  position:relative;padding-left:26px;
  font-size:16.5px;line-height:1.5;color:var(--ms-text);
}
/* Une coche dessinée à la bordure, pas un émoji ni un SVG importé. */
.pr-preco-inclus li::before{
  content:"";position:absolute;left:0;top:4px;
  width:11px;height:6px;
  border-left:2px solid var(--ms-accent);border-bottom:2px solid var(--ms-accent);
  transform:rotate(-45deg);
}
.pr-preco-prix{margin:0 0 6px}
.pr-preco-prix-val{
  font-family:var(--bb-font-mono);font-size:19px;font-weight:600;color:var(--ms-ink);
}
.pr-preco-prix-note{margin:0;font-size:13.5px;line-height:1.5;color:var(--ms-muted);max-width:42ch}

/* --- Formulaire : cartouche à angles vifs --- */
.pr-preco-form{
  background:var(--ms-surface);
  border:1px solid var(--ms-border);
  padding:30px 28px;
}
.pr-preco-form-t{
  font-family:var(--bb-font-display);font-style:italic;font-weight:500;font-size:30px;line-height:1.1;color:var(--ms-ink);
  margin:0 0 20px;
}
.pr-preco-champ{display:block;margin-bottom:16px}
.pr-preco-champ span{
  display:block;font-size:13.5px;font-weight:600;color:var(--ms-text);margin-bottom:6px;
}
.pr-preco-champ input,
.pr-preco-champ select,
.pr-preco-champ textarea{
  width:100%;padding:12px 14px;
  font-family:var(--bb-font-corps);font-size:16px;color:var(--ms-text);
  background:var(--ms-paper);
  border:1px solid var(--ms-border);border-radius:var(--bb-radius);
}
.pr-preco-champ textarea{resize:vertical}
.pr-preco-champ input:focus,
.pr-preco-champ select:focus,
.pr-preco-champ textarea:focus{
  outline:2px solid var(--ms-cuivre);outline-offset:1px;border-color:var(--ms-cuivre);
}
.pr-preco-envoi{width:100%;margin-top:6px;border:0;cursor:pointer;text-align:center}
.pr-preco-rassure{
  margin:14px 0 0;font-size:13px;line-height:1.5;color:var(--ms-muted);text-align:center;
}

@media (max-width:820px){
  .pr-preco-corps{grid-template-columns:1fr;gap:36px}
}
@media (max-width:640px){
  .pr-preco{padding-top:56px;padding-bottom:60px}
}


/* ---------- MODULE : tête « Carte » (producteur, particuliers) ----------
   Direction "Carte" (2026-10-02). La composition du recto de la carte Pousses,
   appliquée à la ferme : une ligne d'étiquettes en haut, le nom en grand
   italique centré, un filet, l'accroche en capitales espacées, le lieu, une
   action. La navigation est posée en bas du premier écran, sur un filet.

   Préfixe .jh-* : .pr-hero, .pr-btn et .pr-lien sont pris par le hero
   typographique du site pro, qui continue de se générer avec. */

.jh-skip{position:absolute;left:-9999px;top:0;z-index:100;
  padding:12px 18px;background:var(--ms-accent);color:var(--ms-surface);
  font:600 15px/1 var(--bb-font-corps)}
.jh-skip:focus{left:0}

/* Éléments de langage communs aux modules de la direction. */
.jh-etiq{font:500 11px/1.4 var(--bb-font-mono);letter-spacing:.18em;text-transform:uppercase}
.jh-filet{width:36px;height:1.5px;background:var(--jh-vrille)}
.jh-dit{font:600 clamp(12px,2.6vw,15px)/1.6 var(--bb-font-display);letter-spacing:.3em;
  text-transform:uppercase;text-wrap:balance}
.jh-bouton{display:inline-flex;align-items:center;justify-content:center;min-height:54px;
  padding:0 30px;border-radius:var(--bb-pilule);border:1.5px solid var(--ms-accent);
  background:var(--ms-accent);color:var(--ms-surface);
  font:600 16px/1 var(--bb-font-corps);text-decoration:none;transition:background .2s,color .2s}
.jh-bouton:hover{background:transparent;color:var(--ms-accent)}
.jh-trait{display:inline-flex;align-items:center;min-height:44px;
  font:500 16px/1 var(--bb-font-corps);color:var(--ms-ink);text-decoration:none;
  background:linear-gradient(currentColor,currentColor) 0 calc(50% + 13px)/100% 1px no-repeat}
.jh-trait:hover{color:var(--ms-cuivre)}

/* --- La tête --- */
.jh-tete{background:var(--ms-surface);color:var(--ms-ink)}
.jh-tete-in{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;padding-top:28px}
.jh-tete-haut{display:flex;justify-content:space-between;gap:12px;color:var(--ms-cuivre)}
.jh-tete-bloc{margin-block:auto;padding-block:48px;text-align:center;
  display:flex;flex-direction:column;align-items:center}

/* Le nom : deux lignes, coupe imposée. La taille est réglée sur « Hirondelles »,
   le mot le plus long, pour qu'il tienne toujours dans la mesure. */
.jh-tete-nom{margin:0;font:italic 500 clamp(66px,17.5vw,172px)/.9 var(--bb-font-display);
  letter-spacing:-.005em}
.jh-tete-nom span{display:block;white-space:nowrap}
.jh-tete .jh-filet{margin:34px 0 26px}

/* Le H1 porte l'accroche ET le lieu : c'est la seule balise de titre de la
   page, elle doit dire l'activité et la zone. Les deux lignes gardent chacune
   leur traitement. */
.jh-tete-h1{margin:0;font:inherit;letter-spacing:0}
.jh-tete-h1 > span{display:block}
.jh-tete-ou{margin-top:12px;color:var(--ms-muted);
  font:400 16px/1.6 var(--bb-font-corps);letter-spacing:0;text-transform:none}
.jh-tete-actions{margin-top:38px}

/* --- La navigation, en bas du premier écran --- */
.jh-sommaire{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 28px;
  padding-block:16px 22px;border-top:1px solid var(--ms-border)}
.jh-sommaire a{display:inline-flex;align-items:center;min-height:44px;
  text-decoration:none;color:var(--ms-muted)}
.jh-sommaire a:hover{color:var(--ms-ink)}

@media (max-width:620px){
  .jh-tete-ou .jh-sep{display:none}
  .jh-tete-ou .jh-lieu{display:block}
}
@media (max-width:520px){
  .jh-tete-haut{font-size:9.5px;letter-spacing:.12em}
  .jh-tete-haut span{white-space:nowrap}
  .jh-dit{letter-spacing:.2em}
  /* Les entrées tiennent sur une ligne : une entrée seule sur une deuxième
     rangée fait bancal. */
  .jh-sommaire{gap:0 16px;font-size:10px;letter-spacing:.12em;padding-block:8px 12px}
}


/* ---------- MODULE : zones de livraison + pages de ville (producteur) ----------
   Deux choses habillées ici, parce qu'elles partagent le même vocabulaire :
   - le bloc « où je livre » de l'accueil (.pr-zones), index de villes qui mène
     aux pages dédiées ;
   - la page de ville elle-même (.pr-zone), qui reprend la colonne de lecture de
     l'article et y ajoute un bandeau de repères pratiques.

   Aucune couleur en dur : tout passe par les tokens de la DA. */

/* ================= Index des zones (accueil + bas de page de ville) ========= */
.pr-zones{
  padding:76px 0;
  background:var(--ms-paper);
  border-top:1px solid var(--ms-border);
}
.pr-zones-tete{max-width:62ch;margin-bottom:34px}
.pr-zones-t{
  font-size:clamp(38px,6.6vw,60px);line-height:1.02;color:var(--ms-ink);
  margin:0 0 14px;
}
.pr-zones-intro{margin:0;font-size:17px;line-height:1.65;color:var(--ms-muted)}

.pr-zones-liste{list-style:none;margin:0;padding:0;border-top:1px solid var(--ms-border)}
.pr-zones-item{border-bottom:1px solid var(--ms-border)}

.pr-zones-lien{
  display:grid;
  grid-template-columns:minmax(160px,220px) 1fr auto;
  align-items:baseline;gap:8px 28px;
  padding:22px 4px;
  color:var(--ms-text);
  transition:background .18s ease, padding-left .18s ease;
}
.pr-zones-lien:hover,
.pr-zones-lien:focus-visible{
  background:color-mix(in srgb, var(--ms-accent) 7%, transparent);
  padding-left:14px;
}
.pr-zones-ville{
  font-family:var(--bb-font-display);
  font-size:clamp(21px,2.4vw,26px);font-weight:600;
  color:var(--ms-ink);line-height:1.15;
}
.pr-zones-lien:hover .pr-zones-ville{color:var(--ms-accent)}
.pr-zones-resume{font-size:16px;line-height:1.6;color:var(--ms-muted);max-width:56ch}
.pr-zones-plus{
  font-family:var(--bb-font-mono);font-size:13px;
  color:var(--ms-cuivre);white-space:nowrap;
}
.pr-zones-plus::after{content:" \2192"}

/* Version basse de page de ville : plus discrète, elle ne doit pas concurrencer
   l'appel à réserver placé juste au-dessus. */
.pr-zones-bas{
  padding:0;margin:56px 0 0;background:none;border-top:0;
}
.pr-zones-bas .pr-zones-t{font-size:clamp(20px,2.4vw,24px);margin-bottom:14px}

/* ================= Page de ville ============================================ */
.pr-zone{padding-top:44px;padding-bottom:80px}
.pr-zone-in{max-width:760px}
.pr-zone-h1{
  font-size:clamp(30px,5vw,48px);color:var(--ms-ink);
  margin:0 0 18px;line-height:1.08;max-width:22ch;
}
.pr-zone-intro{
  font-size:clamp(18px,2.1vw,21px);line-height:1.6;
  color:var(--ms-muted);margin:0 0 34px;max-width:62ch;
}

/* Repères pratiques : un bordereau, pas des cartes. Le libellé en monospace au
   dessus de la valeur en display, séparés par un filet de terre. */
.pr-zone-reperes{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:0;margin:0 0 44px;padding:0;
  border-top:2px solid var(--ms-cuivre);
  border-bottom:1px solid var(--ms-border);
}
.pr-zone-repere{padding:18px 20px 18px 0}
.pr-zone-repere + .pr-zone-repere{
  border-left:1px solid var(--ms-border);padding-left:20px;
}
.pr-zone-repere dt{
  font-family:var(--bb-font-mono);font-size:12px;letter-spacing:.02em;
  color:var(--ms-cuivre);margin:0 0 6px;
}
.pr-zone-repere dd{
  font-family:var(--bb-font-display);font-size:19px;font-weight:600;
  color:var(--ms-ink);margin:0;line-height:1.25;
}

.pr-zone-corps .pr-art-h2:first-child{margin-top:0}

@media (max-width:640px){
  .pr-zones{padding:52px 0}
  .pr-zones-lien{
    grid-template-columns:1fr;gap:6px;padding:20px 4px;
  }
  .pr-zones-lien:hover,
  .pr-zones-lien:focus-visible{padding-left:4px}
  .pr-zone{padding-top:32px;padding-bottom:56px}
  .pr-zone-reperes{grid-template-columns:1fr}
  .pr-zone-repere{padding:16px 0}
  .pr-zone-repere + .pr-zone-repere{
    border-left:0;border-top:1px solid var(--ms-border);padding-left:0;
  }
}