/* =============================================================
   DIRECTION ARTISTIQUE — "Terre Brute"
   Maraîchage de plein champ, vente aux professionnels.

   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
   la DA d'un site (champ "da" du client.json) suffit à repeindre tous les
   modules d'un coup, sans en toucher un seul.

   Les noms de tokens sont IDENTIQUES à ceux du vertical CHR : une DA reste
   interchangeable d'un vertical à l'autre. Seules les valeurs changent.

   Valeurs issues de la charte du logo Terre Brute (livrables/microferme/logo) :
   vert profond #35502c, crème #F1E7D2, terre #6b4a2f, titrage Fraunces.
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,500;1,9..144,600&family=Bricolage+Grotesque:opsz,wght@12..96,700;12..96,800&family=Karla:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  /* — Couleurs — (toutes vérifiées WCAG AA sur leurs fonds d'usage) */
  --ms-accent:#35502C;      /* vert profond du logo, couleur d'action */
  --ms-ink:#1B2416;         /* presque noir végétal, titres et fonds sombres */
  --ms-surface:#F4EDDD;     /* fond principal, crème du logo éclairci */
  --ms-text:#1B2416;        /* texte courant */
  --ms-muted:#5A6350;       /* texte secondaire, contraste 5.4 sur surface */
  --ms-border:rgba(27,36,22,.16);
  --ms-paper:#E9DFC7;       /* fond alterné, crème pleine du logo */
  --ms-cuivre:#7A4E2C;      /* terre : accent chaud, chiffres et filets d'appui */
  --ms-bouteille:#35502C;

  /* — Typographies — */
  --bb-font-display:'Fraunces',Georgia,serif;         /* titres, comme le logo */
  --bb-font-corps:'Karla',system-ui,sans-serif;       /* texte courant */
  --bb-font-mono:'IBM Plex Mono',ui-monospace,monospace; /* prix, unités, mois */

  /* — Forme — */
  --bb-radius:0px;          /* angles vifs : un catalogue pro est un bordereau,
                               pas une carte arrondie de landing page SaaS. */

  /* — États (repris du CHR pour compatibilité des DA) — */
  --bb-ouvert:#5C8A4A;
  --bb-ferme:#B4553C;
  --bb-neutre:#8A9083;
}

/* Signature de cette DA : la lumière sur la terre. Un dégradé vertical très
   faible, clair en haut et plus terreux en bas, qui donne du sol à la page sans
   aucun asset. Il court sur toute la hauteur du document (pas d'attachment fixe :
   sur une longue page catalogue, un fond figé au viewport se remarque et coûte
   des repaints sur mobile).
   Une DA sombre ou une DA "marché" ne l'aurait pas : c'est ce qui la distingue. */
body{
  background-image:linear-gradient(180deg,
    rgba(255,255,255,.55) 0,
    rgba(255,255,255,0) 26%,
    rgba(122,78,44,.06) 100%);
}


/* =============================================================
   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-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;
}
.pr-art-marque:hover{color:var(--ms-accent)}

/* --- 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 terre plutôt que fond encre : la barre est la ligne de sol de la page,
   elle rappelle le motif du logo dès le premier pixel. */
.pr-bar{
  position:sticky;top:0;z-index:30;
  background:var(--ms-cuivre);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 : footer (producteur) ---------- */
.pr-foot{
  margin-top:0;
  background:var(--ms-ink);color:var(--ms-paper);
}
.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 : 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. */
.pr-hero-haut{position:relative;overflow:hidden}
/* 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 ligne de terre : horizon pleine largeur, jamais un filet de tableau --- */
.pr-hero-sol{height:3px;background:var(--ms-cuivre)}

/* --- 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(30px,4.4vw,44px);
  color:var(--ms-ink);margin:0 0 14px;
}
.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(21px,2.6vw,27px);color:var(--ms-ink);
  margin:0 0 10px;line-height:1.15;
}
.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}
}


/* ---------- 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{
  padding-top:80px;padding-bottom:80px;
}
.pr-maison-t{
  font-size:clamp(30px,4.4vw,46px);
  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. */
.pr-maison-in{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{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. */
.pr-meth{
  background:var(--ms-ink);color:var(--ms-paper);
  padding-top:80px;padding-bottom:80px;
}
.pr-meth-tete{
  display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:end;
  margin-bottom:44px;
}
.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-paper);opacity:.6;line-height:1.45;
}
.pr-meth-t{
  font-size:clamp(30px,4.4vw,44px);
  color:var(--ms-surface);margin:0 0 12px;
}
.pr-meth-intro{margin:0;font-size:17px;line-height:1.6;color:var(--ms-paper);opacity:.8}

.pr-meth-liste{border-top:1px solid rgba(244,237,221,.18)}
.pr-meth-point{
  display:grid;grid-template-columns:64px 1fr;gap:8px 32px;align-items:start;
  padding:28px 0;
  border-bottom:1px solid rgba(244,237,221,.18);
}
.pr-meth-num{
  font-family:var(--bb-font-mono);font-size:15px;font-weight:600;
  color:var(--bb-ouvert);
  padding-top:6px;
}
.pr-meth-titre{
  font-size:clamp(20px,2.4vw,25px);color:var(--ms-surface);
  margin:0 0 8px;line-height:1.15;
}
.pr-meth-texte{
  margin:0;font-size:16px;line-height:1.6;color:var(--ms-paper);opacity:.86;
  max-width:60ch;
}

@media (max-width:900px){
  .pr-meth-tete{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, détachée par un fond légèrement teinté d'accent (color-mix,
   jamais une valeur en dur : la teinte suit la DA). 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:color-mix(in srgb, var(--ms-accent) 8%, var(--ms-surface));
  padding-top:80px;padding-bottom:84px;
  border-top:3px solid var(--ms-cuivre);
}
.pr-preco-tete{max-width:56ch;margin-bottom:44px}
.pr-preco-t{
  font-size:clamp(30px,4.6vw,48px);color:var(--ms-ink);
  margin:0 0 16px;
}
.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-size:22px;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 : 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(26px,3.4vw,38px);color:var(--ms-ink);
  margin:0 0 12px;line-height:1.12;
}
.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;
  }
}