/* ==========================================================================
   Complements de style propres aux blocs du theme.

   Volontairement separe de base.css et theme.css, qui sont la reprise des
   maquettes : ce fichier ne contient que ce que la maquette statique ne
   pouvait pas exprimer, comme l'empilement des diapositives du slider.
   ========================================================================== */

/* ------------------------------------------------------- slider d'accueil */

/* Les diapositives se superposent : une seule est visible a la fois. La
   maquette n'avait qu'une image en flux, elle ne prevoyait pas l'empilement. */
.hero .hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .6s ease, visibility .6s;
}

/* LE DIAPORAMA PREND LA HAUTEUR DE SON IMAGE.

   Le hero est cale a 540 px et les diapositives y sont posees en absolu : sans
   hauteur imposee, le conteneur serait plat. L'image etait donc RECADREE en
   `cover`, et un visuel dont le texte est grave dans les pixels s'en trouvait
   ampute - haut et bas rognes, et sur un ecran large le recadrage mangeait
   jusqu'au tiers de la hauteur.

   La diapositive ACTIVE repasse dans le flux : c'est elle qui donne sa hauteur
   au conteneur, les autres restent en absolu par-dessus. Rien a calculer en
   PHP, rien a declarer sur l'image : le rapport vient du fichier lui-meme, et
   la regle vaut telle quelle dans l'editeur, ou la diapositive est seule et
   toujours active.

   Portee par `:has(.hero-slide)` et non par `[data-hero]` : l'editeur rend une
   diapositive sans l'enveloppe du slider, et le hero editorial des pages
   interieures - une image unique, sans diapositive - garde sa hauteur fixe. */
.hero:has(.hero-slide) {
  height: auto;
  max-height: none;
}

.hero .hero-slide.is-active,
.no-js .hero .hero-slide:first-child {
  position: relative;
  inset: auto;
}

.hero .hero-slide.is-active > img,
.no-js .hero .hero-slide:first-child > img {
  height: auto;
}

.hero .hero-slide.is-active {
  opacity: 1;
  visibility: visible;
  /* La diapositive entrante passe toujours au-dessus de la sortante, y compris
     au retour a la premiere : sans cela, l'ordre du DOM ferait dominer la
     derniere diapositive pendant ce fondu-la. */
  z-index: 1;
}

.hero .hero-slide > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 30% center;
}

/* Le degrade doit vivre DANS la diapositive, pas sur le conteneur.

   Une opacite inferieure a 1 cree un contexte d'empilement : pendant le fondu,
   la diapositive en devient un, et le `.hero-inner { z-index: 2 }` qu'elle
   contient se retrouve confine a l'interieur. Il ne peut alors plus passer
   au-dessus du `.hero::after` du parent, et le texte se retrouve derriere le
   degrade jusqu'a ce que l'opacite atteigne exactement 1.

   En placant le degrade sur la diapositive elle-meme, texte et degrade sont
   toujours dans le meme contexte : l'ordre est stable pendant toute la
   transition. Le degrade du conteneur est neutralise pour ne pas s'ajouter. */
.hero[data-hero]::after {
  content: none;
}

.hero .hero-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(100deg, transparent 34%, rgba(11, 40, 24, .62) 78%);
  /* Un voile decoratif ne doit JAMAIS intercepter un clic. Il porte le meme
     `z-index` que le calque de lien et, etant un pseudo-element, il se peint
     apres lui : sans cette ligne, il avalait les clics sur une diapositive a
     la fois voilee et cliquable. */
  pointer-events: none;
}

.hero .hero-slide .hero-inner {
  z-index: 2;
}

/* Calque de lien : toute la diapositive devient cliquable, sans bouton.
   Au-dessus de la photo, sous `.hero-inner` (z-index 2) : le bouton et les
   liens du texte gardent la main sur leur propre surface. */
.hero .hero-slide__lien {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
}

/* Les pastilles passent devant le calque, sinon elles cessent d'etre
   cliquables sur une diapositive qui porte un lien. */
.hero .dots { z-index: 3; }

/* ET `.hero-inner` LAISSE PASSER LE CLIC. C'est un `.container` : il occupe
   toute la largeur de la diapositive et se pose a `z-index: 2`, au-dessus du
   calque. Mesure au banc d'essai : un clic a droite du texte, sur une zone
   vide, atterrissait sur `.hero-inner` et le lien ne se declenchait pas.

   On le rend transparent aux clics et on rend la colonne de texte a
   elle-meme : le bouton et les liens du texte gardent leur propre surface,
   tout le reste de la diapositive mene au lien. Limite aux diapositives qui
   en portent un, pour ne rien changer ailleurs. */
.hero .hero-slide:has(> .hero-slide__lien) .hero-inner { pointer-events: none; }
/* Seuls les VRAIS boutons reprennent la main. Rendre toute la colonne de texte
   opaque aux clics laissait un trou : cliquer le titre ne declenchait rien,
   alors que cliquer trois centimetres a cote suivait le lien. Un visiteur ne
   peut pas deviner cette frontiere. En echange, le texte du hero ne se
   selectionne plus - un diaporama promotionnel ne se copie pas. */
.hero .hero-slide:has(> .hero-slide__lien) .hero-copy a,
.hero .hero-slide:has(> .hero-slide__lien) .hero-copy .btn { pointer-events: auto; }

/* PAS DE VOILE SUR UN VISUEL COMPLET. Quand la diapositive ne porte aucun texte
   HTML - titre, accroche et bouton tous vides - le degrade n'a plus rien a
   rendre lisible : il ne fait qu'assombrir une illustration dont le texte est
   deja grave dans les pixels. La classe vient de `hero-slide.twig`, qui sait ce
   que la diapositive contient ; le CSS n'a pas a le deviner. */
.hero .hero-slide--visuel::after {
  content: none;
}

@media (max-width: 980px) {
  .hero .hero-slide::after {
    background: linear-gradient(0deg, rgba(11, 40, 24, .72) 20%, rgba(11, 40, 24, .15) 70%);
  }
}

.hero .dots i {
  cursor: pointer;
  border: 0;
  padding: 0;
}

/* Sans JavaScript, la premiere diapositive reste lisible. */
.no-js .hero .hero-slide:first-child {
  opacity: 1;
  visibility: visible;
}

/* --------------------------------------------------------- dans l'editeur */

/* Dans l'editeur les diapositives sont listees les unes sous les autres :
   les empiler les rendrait inaccessibles a la saisie. `inset` et la hauteur de
   l'image sont remis a `auto` pour la meme raison qu'en facade - c'est l'image
   qui donne sa hauteur, et un `height: 100%` dans un parent sans hauteur ne
   veut rien dire. */
.editor-styles-wrapper .hero .hero-slide {
  position: relative;
  inset: auto;
  opacity: 1;
  visibility: visible;
}

.editor-styles-wrapper .hero .hero-slide > img {
  height: auto;
}

/* ------------------------------------------------------- aides de l'editeur

   Les blocs conteneurs dont le rendu final reorganise les enfants affichent
   une note dans l'editeur : sans elle, la disposition saisie ne ressemble pas
   au resultat et c'est deroutant. */
.editor-styles-wrapper .hb-hint {
  margin: 0 0 12px;
  padding: 8px 12px;
  border-left: 3px solid var(--green, #097b35);
  background: var(--bg-soft, #f3efe8);
  font-size: 13px;
  color: var(--grey, #63685f);
}

/* ------------------------------------------------------------------ boutons

   La maquette place ses boutons directement dans le flux ; le bloc les
   enveloppe pour pouvoir gerer l'alignement sans toucher a `.btn`. */
.hb-button {
  margin-top: 26px;
}

.hb-button.is-centre {
  text-align: center;
}

/* -------------------------------------------------------------- pied de page

   La maquette neutralise deja la marge du pied de page quand il suit une
   section : `section + .footer { margin-top: 0 }`. Mais son markup place les
   deux au meme niveau, alors que le theme intercale un <main>. Le selecteur ne
   s'applique donc jamais, et les 60 px reapparaissent sous forme d'une bande de
   fond de page.

   On reproduit l'intention d'origine sur notre structure : pas de marge des
   lors que le contenu se termine par une section, qui apporte deja son
   espacement bas. Un article de blog, lui, en a besoin. */
main:has(> section:last-child) + .footer {
  margin-top: 0;
}

/* ---------------------------------------------------------- fiche produit

   La maquette dessine un selecteur de quantite `.qty` et un bouton `.btn`
   cote a cote. WooCommerce, lui, produit son propre formulaire : on l'habille
   pour qu'il prenne cette apparence plutot que de le reecrire, ce qui ferait
   perdre la gestion du stock, des variations et des nonces. */
.qty-row form.cart {
  display: flex;
  gap: 14px;
  align-items: stretch;
  margin: 0;
  width: 100%;
}

.qty-row .quantity {
  display: flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  /* Meme encombrement que le selecteur `.qty` de la maquette : 96 x 51. */
  padding: 0 16px;
}

.qty-row .quantity input[type="number"] {
  width: 62px;
  border: 0;
  background: transparent;
  text-align: center;
  font-family: var(--poppins);
  font-size: 15px;
  padding: 14px 0;
  -moz-appearance: textfield;
}

.qty-row .quantity input::-webkit-outer-spin-button,
.qty-row .quantity input::-webkit-inner-spin-button {
  opacity: 1;
}

.qty-row button.single_add_to_cart_button {
  flex: 1;
  border: 1px solid var(--green);
  border-radius: var(--radius);
  background: var(--green);
  color: #fff;
  font-family: var(--poppins);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 13px 26px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}

.qty-row button.single_add_to_cart_button:hover {
  background: var(--green-hover);
  border-color: var(--green-hover);
}

/* Rupture de stock : WooCommerce affiche un paragraphe a la place du formulaire. */
.qty-row .stock.out-of-stock {
  color: var(--accent);
  font-weight: 500;
}

/* La maquette suppose des packshots CARRES : `.pdp .gallery .main` a un
   `aspect-ratio: 1/1` et l'image y occupe 56 % de la largeur, hauteur libre.
   Les visuels reels du catalogue sont souvent en portrait : a 56 % de large,
   leur hauteur depasse le carre et pousse le conteneur bien au-dela.

   On borne donc la hauteur et on laisse `object-fit` gerer le rapport. La
   largeur reste une valeur definie : la passer a `auto` recreerait la
   dependance circulaire avec le `sizes="auto"` des images WordPress. */
.pdp .gallery .main img {
  max-height: 78%;
  object-fit: contain;
}

/* -- sur mobile ------------------------------------------------------------ */

/* Le packshot occupe toute la largeur des que la fiche passe sur une colonne :
   un carre de 350 px de cote mange l'ecran avant meme le nom du produit. On
   raccourcit le cadre, et l'image y gagne en largeur pour rester lisible. */
@media (max-width: 640px) {
  .pdp .gallery .main { aspect-ratio: 3 / 2; }
  .pdp .gallery .main img { width: 66%; }
}

/* L'ajout au panier des vignettes est revele au SURVOL - un geste qui n'existe
   pas sur un ecran tactile. Le premier appui y ouvrait donc la fiche produit au
   lieu d'ajouter. On le montre d'emblee des que l'appareil ne sait pas survoler.

   `hover: none` plutot qu'une largeur : une tablette large est concernee, un
   petit ecran muni d'une souris ne l'est pas. */
@media (hover: none) {
  .product-buy,
  .product-buy-lien {
    opacity: 1;
    transform: none;
  }
}

/* --------------------------------------------------- bouton d'achat flottant

   La maquette utilisait un <a> pour l'action de la pilule. Ici c'est un
   <button> : semantiquement plus juste puisqu'il declenche le formulaire, mais
   le navigateur lui applique sa bordure et son fond par defaut. On les
   neutralise, `theme.css` se chargeant du reste de l'apparence. */
.buy-float .lbl {
  border: 0;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.buy-float .lbl:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Commandes « − » et « + » autour de la quantite, ajoutees par site.js pour
   retrouver le selecteur de la maquette. Meme apparence que ses `.qty span`,
   fiche produit comme panier : la classe est la notre, elle suffit a cibler.

   `line-height: 30px` reproduit la hauteur du glyphe dans la maquette, ou les
   commandes sont de simples `<span>` en 20px. Sans elle la pastille perd 5px
   de haut et la ligne du panier avec. */
.hb-qty-step {
  border: 0;
  background: none;
  padding: 0;
  font-size: 20px;
  line-height: 30px;
  color: var(--grey);
  cursor: pointer;
  transition: color .15s;
}

.hb-qty-step:hover { color: var(--green); }
.hb-qty-step:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

/* Les fleches natives feraient doublon avec les deux commandes. */
.qty-row .quantity input[type="number"]::-webkit-outer-spin-button,
.qty-row .quantity input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}



/* ---------------------------------------------------------- catalogue -- */

/* La maquette portait cette grille en attribut `style` sur un div ; ici elle
   a besoin d'un nom, ne serait-ce que pour le repli en petite largeur. */
/* Suggestions de produits sous un champ de recherche.

   La liste est ancree sur le parent du champ, qui doit donc etre positionne.
   Les deux champs concernes - panneau de recherche et barre du catalogue -
   ont chacun le leur, d'ou les deux selecteurs. */
.search-panel .row,
.tool-search { position: relative; }

.suggest-list {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 40;
  margin: 0;
  padding: 6px;
  list-style: none;
  max-height: 320px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .1);
}

.suggest-list li { list-style: none; }

.suggest-list a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 12px;
  border-radius: var(--radius);
  font-size: 14.5px;
  color: var(--ink);
}

.suggest-list a:hover,
.suggest-list a.on { background: var(--green-pale); color: var(--green-dark); }

/* La reference, en repere secondaire : c'est le nom qu'on lit. */
.suggest-list .ref { font-size: 12.5px; color: var(--grey-2); flex: none; }

/* Recherche du catalogue, entre le repli des filtres et le tri. Meme pastille
   blanche que les deux autres outils : la loupe est un bouton de soumission, le
   champ prend la place restante. */
/* Au repos, la loupe seule : le champ n'apparait qu'au clic. Il prenait sinon
   toute la place restante de la barre pour une fonction secondaire. */
.tool-search { flex: 0 0 auto; min-width: 0; gap: 8px; }
.tool-search.est-ouvert { flex: 1 1 220px; }
.tool-search:not(.est-ouvert) input[type="search"] { display: none; }
.tool-search input[type="search"] {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--ink);
  padding: 0;
}
.tool-search input[type="search"]::placeholder { color: var(--grey-2); }
.tool-search input[type="search"]:focus { outline: none; }
.tool-search:focus-within { border-color: var(--green); }
.tool-loupe {
  display: inline-flex;
  align-items: center;
  border: 0;
  background: none;
  padding: 0;
  color: inherit;
  cursor: pointer;
  font-size: inherit;
}
.tool-loupe:hover { color: var(--green); }

.catalog-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 40px;
  align-items: start;
}

/* Repli demande par le bouton « Filtrer ». */
.catalog-layout.facets-closed { grid-template-columns: 1fr; }
.catalog-layout.facets-closed .facets { display: none; }

.catalog-empty { color: var(--grey); }
.catalog-empty a { color: var(--green); text-decoration: underline; }

/* Le tri : meme silhouette que le bouton « Filtrer », mais c'est un
   formulaire, donc le select doit se fondre dedans. */
.tool-sort { padding-top: 0; padding-bottom: 0; }
.tool-sort label {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.tool-sort select {
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  padding: 13px 0;
  cursor: pointer;
  min-width: 0;
  max-width: 100%;
}

.tool-sort select:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
/* En dessous de 640 px, les trois outils ne tiennent pas sur une ligne.

   « Filtrer » et la loupe restent ensemble - deux pastilles courtes - et le tri
   passe seul en dessous, sur toute la largeur : c'est lui qui porte le texte le
   plus long. Sans cet ordre, la loupe se serait retrouvee seule sur sa ligne. */
@media (max-width: 640px) {
  .toolbar { gap: 10px; }
  .toolbar .tool { padding: 12px 16px; font-size: 14.5px; }
  .tool-search { order: 2; }
  .tool-sort { order: 3; flex: 1 1 100%; }
  .tool-sort select { flex: 1; }
  .tool-search.est-ouvert { flex: 1 1 100%; }
}

/* Boutons de repli : utiles sans JavaScript, superflus avec. site.js les
   retire une fois la soumission automatique en place. */
.facets-go { margin: 18px 0; }

/* Repli des groupes de facettes.

   Le titre porte un bouton pleine largeur : `.facets h4` etait deja en flex
   avec `space-between`, c'est le bouton qui reprend cette mise en page. */
.facets h4 .facet-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
}
.facets h4 .facet-toggle:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; }

/* Le chevron n'est visible, et le titre cliquable, que si site.js a branche
   le repli : pas de commande morte quand le JavaScript ne s'execute pas. */
.facets h4 .facet-toggle .chev { display: none; }
.facets.is-collapsible h4 .facet-toggle { cursor: pointer; }
.facets.is-collapsible h4 .facet-toggle .chev { display: inline-flex; }

.facets .facet-toggle .svic { transition: transform .18s ease; }
.facets .facet.is-closed .facet-toggle .svic { transform: rotate(-90deg); }
.facets .facet.is-closed .facet-body { display: none; }
.facets .facet.is-closed { padding-bottom: 14px; }

@media (max-width: 980px) {
  .catalog-layout { grid-template-columns: 1fr; }
  .catalog-layout .facets { display: none; }
  .catalog-layout.facets-open .facets { display: block; margin-bottom: 30px; }
}

/* -------------------------------------------------------------- panier -- */

/* La maquette aligne le titre du panier a gauche et le reduit : c'est un
   ecran de tunnel, pas une page editoriale. */
.page-title.cart-title { text-align: left; font-size: 32px; }

.cart-line .cart-line-body { min-width: 0; }

/* Les visuels produit ne sont pas carres : sans hauteur maximale, une bouteille
   etire toute la ligne. Meme correctif que sur la galerie de la fiche produit,
   la largeur reste definie pour que `sizes` garde un sens. */
.cart-line .ph { overflow: hidden; padding: 10px; }
.cart-line .ph a { display: contents; }
.cart-line .ph img {
  width: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Quantite : meme pastille que sur la fiche produit. site.js y injecte les
   commandes moins et plus.

   Elle vit dans la colonne des montants, alignee a droite sous le prix : c'est
   le total que le client surveille quand il change une quantite, les deux
   doivent donc se lire d'un seul regard. */
.cart-line-qty { margin-top: 12px; display: flex; justify-content: flex-end; }
.cart-line-qty .quantity {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 6px 14px;
  font-family: var(--poppins);
  background: #fff;
}

/* Largeur de la pastille, fiche produit comme panier.

   La maquette n'affiche qu'un chiffre en texte, large de sept pixels ; il nous
   faut un champ saisissable, qui en demande vingt-cinq pour deux chiffres. A
   gouttiere egale (16px dans la maquette) la pastille depasserait de quinze
   pixels. On rend donc ces pixels sur l'espacement interne : la largeur
   totale, seule a peser sur la mise en page, retombe sur celle de la maquette,
   et la densite visuelle reste comparable puisque le champ occupe la place que
   le chiffre laissait vide. */
.qty-row .quantity,
.cart-line-qty .quantity { gap: 8px; }

.qty-row .quantity input[type="number"],
.cart-line-qty .quantity input[type="number"] {
  width: 2.5ch;
  border: 0;
  background: none;
  text-align: center;
  font: inherit;
  line-height: 30px;
  padding: 0;
  -moz-appearance: textfield;
}
.cart-line-qty .quantity input[type="number"]::-webkit-outer-spin-button,
.cart-line-qty .quantity input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.cart-line-qty .quantity label { display: none; }

.cart-line .remove {
  display: inline-block;
  margin-top: 10px;
  font-size: 13.5px;
  color: var(--grey);
  text-decoration: underline;
}
.cart-line .remove:hover { color: var(--ink); }

.cart-vider {
  display: inline-block;
  margin-top: 22px;
  font-size: 14.5px;
  color: var(--grey);
  text-decoration: underline;
}
.cart-vider:hover { color: var(--ink); }

/* Le bouton de mise a jour ne sert que sans JavaScript : site.js le declenche
   des qu'une quantite change, et le masque une fois branche. */
.cart-actions { margin-top: 22px; }
.cart-actions.is-auto { display: none; }

/* Livraison : la liste des modes ne tient pas sur une ligne en flex. */
.panel .row.cart-shipping { display: block; padding: 12px 0; }
.panel .row.cart-shipping ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.panel .row.cart-shipping li {
  display: flex;
  align-items: baseline;
  gap: 9px;
  font-size: 14.5px;
  padding: 5px 0;
}
.panel .row.cart-shipping li input { accent-color: var(--green); }
.panel .row.cart-shipping li label { cursor: pointer; }
.panel .row.cart-shipping .woocommerce-shipping-destination {
  font-size: 13px;
  color: var(--grey);
  margin: 8px 0 0;
}

.panel .wc-proceed-to-checkout { margin-top: 20px; }
.panel .cart-continuer { margin-top: 10px; }
/* « Prescrire cette commande » : meme ecart que les deux boutons au-dessus. Le
   formulaire qui l'enveloppe n'a aucune marge propre. */
.panel .prescription-action { margin-top: 10px; }

/* Tete de l'ecran « Mes prescriptions » : le titre et le bouton d'ouverture. */
.prescriptions-tete {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 20px;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 22px;
}
.prescriptions-tete h2 { margin: 0; }

/* Bandeau du mode prescription : la sortie doit se voir au premier coup d'oeil. */
.prescription-banniere { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; }
.prescription-banniere a { font-weight: 600; }

/* Sortie du mode prescription, en bas du formulaire. Meme action que le lien
   de la banniere, donc meme poids visuel : en gras et en vert de marque, pour
   qu'un praticien qui a fini de composer la trouve sans la chercher. */
.prescription-form__sortie { margin-top: 22px; }
.prescription-form__sortie a { font-weight: 700; color: var(--green); }
.prescription-form__sortie a:hover { text-decoration: underline; }

/* Note du praticien, sous le nom du produit en mode prescription. */
.prescription-note { display: block; margin: 10px 0 0; max-width: 420px; }
.prescription-note span {
  display: block;
  font-size: 12px;
  color: var(--grey);
  margin: 0 0 4px;
}
.prescription-note textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px 10px;
  font: inherit;
  font-size: 14px;
  resize: vertical;
}
.prescription-note textarea:focus { border-color: var(--green); outline: none; }
/* L'envoi est silencieux : seul l'echec doit se voir. */
.prescription-note textarea.est-en-cours { opacity: .6; }
.prescription-note textarea.est-en-echec { border-color: #c9553d; }
.panel .field { margin-bottom: 14px; }

.cart-panel-coupon { margin-top: 20px; }

/* Cagnotte de fidelite, panneau de la colonne de droite du panier.

   Le nombre de points est le seul element compose en Poppins et en vert : la
   maquette en fait le point d'entree du panneau, tout le reste y est du
   commentaire. */
/* Bouton par defaut du formulaire du panier : present pour capter la touche
   Entree, jamais vu ni atteint au clavier. `display:none` conviendrait aussi,
   la specification retenant le premier bouton de l'arbre sans regarder son
   affichage, mais un element hors flux se comporte mieux avec les extensions
   qui parcourent le formulaire. */
.hb-defaut { position: absolute; width: 1px; height: 1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); }

.cart-points-partielle { font-size: 13px; color: var(--grey); margin: -6px 0 12px; }
.cart-points-vide { font-size: 15px; color: var(--grey); margin: 0 0 6px; }
.cart-points-aide { font-size: 13px; color: var(--grey); margin: 12px 0 0; text-align: center; }
.cart-points-actions { margin-top: 18px; }
.cart-points-actions.is-auto { display: none; }

.cart-points { margin-top: 20px; }
.cart-points-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.cart-points-head .n {
  font-family: var(--poppins);
  font-size: 26px;
  font-weight: 600;
  color: var(--green);
}
.cart-points-head .m { font-size: 14px; color: var(--grey); }
.cart-points-rule { font-size: 13.5px; color: var(--grey); margin: 0 0 16px; line-height: 1.5; }
.cart-points-used { font-size: 14.5px; color: var(--green); font-weight: 600; margin: 0 0 12px; }
.cart-points-locked { font-size: 13.5px; color: var(--grey); margin: 0; }
.cart-points .btn { margin-top: 0; }
.panel .row.cart-points-earn {
  font-size: 13px;
  color: var(--grey-2);
  border-top: 1px solid var(--line-2);
  padding-top: 10px;
  margin-top: 16px;
}

/* Ligne de remise du recapitulatif. Une remise se lit differemment d'un cout :
   la maquette la met en vert et en gras pour qu'elle ne se confonde pas avec
   les frais de livraison, juste au-dessus. */
.panel .row.fee-negative { color: var(--green); font-weight: 600; }

/* Message d'erreur ou de confirmation de WooCommerce, sans sa feuille. */
.woocommerce-message, .woocommerce-error, .woocommerce-info {
  list-style: none;
  margin: 0 0 24px;
  padding: 14px 18px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--bg-card);
  font-size: 15px;
}
.woocommerce-error { border-color: #c9553d; color: #8d3826; }
.woocommerce-message { border-color: var(--green); }

/* WooCommerce donne le focus a la notification pour que les lecteurs d'ecran
   l'annoncent. Le contour du navigateur se lit alors comme une erreur, juste
   apres un ajout au panier reussi.

   Le retirer est sans consequence ici, et seulement ici : le conteneur porte
   `tabindex="-1"`, personne ne peut donc l'atteindre en tabulant, et son
   `role="alert"` suffit a l'annonce. Le lien qu'il contient, lui, reste dans
   l'ordre de tabulation et garde son propre indicateur. */
.woocommerce-message:focus,
.woocommerce-error:focus,
.woocommerce-info:focus,
.woocommerce-message:focus-visible,
.woocommerce-error:focus-visible,
.woocommerce-info:focus-visible { outline: none; }

.woocommerce-message a, .woocommerce-info a { color: var(--green); text-decoration: underline; }
.woocommerce-error a { color: inherit; text-decoration: underline; }

@media (max-width: 980px) {
  .cart-layout { grid-template-columns: 1fr; }
}

/* Ligne offerte : pas de quantite ni de lien de retrait, elle suit le palier.
   Le badge remplace ces commandes pour que la ligne ne paraisse pas amputee. */
.cart-line-offert {
  display: inline-block;
  margin-top: 10px;
  padding: 3px 10px;
  border-radius: var(--radius-lg);
  background: var(--green);
  color: #fff;
  font-family: var(--poppins);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* ------------------------------------------------- tunnel en blocs -- */

/* Appariement des champs d'adresse.

   Le formulaire du bloc est un flex : les champs demi-largeur se rangent deux
   par deux, dans l'ordre du DOM. Avec les deux champs ajoutes, l'appariement
   par defaut donnait « Titre | Prénom » puis « Nom » seul, et « Num° » colle au
   code postal.

   On ne touche pas a l'ordre du DOM, qui est aussi l'ordre de tabulation :
   seules les largeurs changent, ce qui suffit a regrouper ce qui va ensemble.

   Le numero de rue ne peut pas etre place entre la rue et la boite : le bloc
   rend « Appartement » dans le meme composant que « Adresse », en ignorant
   l'index. On les met donc cote a cote, les deux etant des complements
   d'adresse courts. */

/* Le titre occupe sa ligne, pour que « Prénom » et « Nom » se retrouvent. */
.wc-block-components-select-input-herbolistique-title { flex: 0 0 100% !important; }

/* La boite partage sa ligne avec le numero. */
.wc-block-components-address-form__address_2 { flex: 1 0 calc(50% - 12px) !important; }

/* Habillage du tunnel.

   Le bloc Checkout arrive avec la feuille de style de WooCommerce : correcte,
   mais etrangere au site - pas de vert, pas de Poppins, des boutons gris. On ne
   remplace pas ses styles, on les reaccorde aux memes variables que le reste du
   theme, pour qu'une evolution de la charte suive ici sans retouche.

   Rien ne touche a la structure : le bloc est un composant React dont le DOM
   nous echappe, et deplacer ses elements en CSS se paierait a la premiere mise
   a jour. */

/* -- titres -- */

.wp-block-woocommerce-checkout .wc-block-components-title,
.wp-block-woocommerce-checkout .wc-block-components-checkout-step__title,
.wc-block-components-checkout-order-summary__title-text {
  font-family: var(--poppins);
  font-size: 19px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0;
}

.wp-block-woocommerce-checkout .wc-block-components-checkout-step__description {
  font-size: 14.5px;
  color: var(--grey);
}

/* -- champs -- */

.wp-block-woocommerce-checkout .wc-block-components-text-input input,
.wp-block-woocommerce-checkout .wc-block-components-select select,
.wp-block-woocommerce-checkout .wc-block-components-textarea {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-family: var(--raleway);
  font-size: 15px;
  color: var(--ink);
  background: #fff;
}

.wp-block-woocommerce-checkout .wc-block-components-text-input input:focus,
.wp-block-woocommerce-checkout .wc-block-components-select select:focus,
.wp-block-woocommerce-checkout .wc-block-components-textarea:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 1px var(--green);
  outline: none;
}

/* Le libelle flottant reprend la couleur d'accent quand le champ est actif. */
.wp-block-woocommerce-checkout .wc-block-components-text-input.is-active label,
.wp-block-woocommerce-checkout .wc-block-components-text-input input:focus + label {
  color: var(--green);
}

/* -- choix de livraison et de paiement -- */

.wp-block-woocommerce-checkout .wc-block-components-radio-control__option,
.wp-block-woocommerce-checkout .wc-block-components-radio-control-accordion-option {
  border-radius: var(--radius);
  font-size: 15px;
}

.wp-block-woocommerce-checkout .wc-block-components-radio-control-accordion-option,
.wp-block-woocommerce-checkout .wc-block-components-radio-control__option {
  border-color: var(--line);
}

/* L'option retenue se voit : bordure verte et fond pale, comme les cartes
   selectionnees ailleurs sur le site. */
.wp-block-woocommerce-checkout .wc-block-components-radio-control__option-checked,
.wp-block-woocommerce-checkout .wc-block-components-radio-control-accordion-option--checked-option-highlighted,
.wp-block-woocommerce-checkout .wc-block-components-radio-control__option--checked-option-highlighted {
  border-color: var(--green) !important;
  background: var(--green-pale);
}

.wp-block-woocommerce-checkout .wc-block-components-radio-control__input:checked {
  border-color: var(--green);
  color: var(--green);
}

.wp-block-woocommerce-checkout .wc-block-components-radio-control__secondary-label {
  font-family: var(--poppins);
  font-weight: 600;
  font-size: 14px;
}

/* -- cases a cocher -- */

.wp-block-woocommerce-checkout .wc-block-components-checkbox__input:checked {
  background: var(--green);
  border-color: var(--green);
}

/* BLOC VIDE DE POSTNL DANS LE RESUME DE COMMANDE.

   L'extension `woo-postnl` glisse `#postnl_checkout_option` entre la ligne de
   livraison et le total, par un Slot/Fill du tunnel en blocs - il n'est donc
   pas dans le contenu de la page de commande, et aucune modification de cette
   page ne l'enleve.

   IL NE PEUT RIEN AFFICHER D'UTILE EN L'ETAT. Dans les reglages de
   l'extension, `enable_pickup_points` vaut `no` et la liste
   `supported_shipping_methods` est VIDE : aucune des options qu'il porte -
   points d'enlevement, jour de livraison - n'est activee. Mesure sur le
   staging : l'element fait 418 x 2 px et ne contient rien ; chez le client il
   tourne en rond sur un sablier qui n'aboutit jamais.

   AUCUN REGLAGE NE PERMET DE L'ENLEVER. Verifie dans l'extension :
   `Main::checkout_blocks()` enregistre son integration DES QUE le tunnel est
   en blocs, sans condition - aucune case a cocher ne la gouverne. Et couper
   l'extension n'est pas une option : c'est elle qui fournit la methode
   « Livraison - PostNL », choisie par 14 des 200 dernieres commandes, ainsi
   que l'impression des etiquettes.

   C'EST DONC UN PANSEMENT ASSUME. La regle masque le symptome ; le script de
   l'extension continue de se charger et d'appeler PostNL en mode production.
   L'autre voie - desinscrire ses scripts de tunnel - a ete ecartee au profit
   de celle-ci. Le jour ou PostNL sera reellement configure, il suffira de
   retirer ces trois selecteurs. */
#postnl_checkout_option,
.postnl_checkout_container,
.postnl-co-tr {
  display: none !important;
}

/* -- ordre des deux colonnes -- */

/* L'ORDRE DES COLONNES NE DOIT PAS DEPENDRE DU DERNIER ENFANT.

   WooCommerce range le resume a droite par un seul selecteur :

     .wc-block-components-sidebar-layout:has(> :last-child.wp-block-woocommerce-checkout-fields-block)
       { flex-direction: row-reverse; }

   Le resume est PREMIER dans le DOM, le formulaire second ; c'est ce
   `row-reverse` - et lui seul - qui les remet dans le bon sens a l'ecran. Il
   suffit donc qu'un script tiers ajoute UN SEUL noeud a la fin du conteneur
   pour que `:last-child` ne designe plus le formulaire : la regle ne s'applique
   plus, le flex repasse en `row`, et le resume saute a gauche, colle au bord.

   Mesure : avec un `<div></div>` vide ajoute a la fin du conteneur, a 1440 px,
   le resume passe de x=917 a x=64 et le formulaire de x=64 a x=523. Le noeud
   ajoute n'a besoin ni de taille ni de contenu - c'est le « bloc fantome » du
   retour client, et le resume a gauche en est la consequence directe, pas un
   second defaut.

   On pose donc l'ordre explicitement, et on donne aux enfants inconnus un rang
   qui les renvoie SOUS les deux colonnes plutot qu'entre elles. Le tunnel garde
   sa mise en page quoi qu'on lui ajoute.

   La regle reste enfermee dans la meme requete de conteneur que WooCommerce :
   sous 700 px le tunnel est en une colonne, et le resume doit y rester EN HAUT,
   dans l'ordre du DOM.

   LA DOUBLE CLASSE N'EST PAS UNE COQUETTERIE. `:has()` prend le poids de son
   argument le plus lourd : la regle de WooCommerce pese trois classes
   (`.wc-block-components-sidebar-layout` + `:last-child` + la classe du bloc).
   Une selection a deux classes ne la bat pas, et une a trois ne fait que
   l'egaler - on dependrait alors de l'ordre de chargement des feuilles. Les
   deux elements portent `wc-block-checkout` en plus de leur classe propre :
   quatre classes, la question est tranchee sans compter sur rien d'autre. */

@container (min-width: 700px) {
  .wp-block-woocommerce-checkout.wc-block-checkout .wc-block-components-sidebar-layout.wc-block-checkout {
    flex-direction: row;
  }

  .wp-block-woocommerce-checkout.wc-block-checkout .wc-block-components-sidebar-layout.wc-block-checkout > * {
    order: 3;
  }

  .wp-block-woocommerce-checkout.wc-block-checkout .wc-block-components-sidebar-layout.wc-block-checkout > .wc-block-checkout__main {
    order: 1;
  }

  .wp-block-woocommerce-checkout.wc-block-checkout .wc-block-components-sidebar-layout.wc-block-checkout > .wc-block-checkout__sidebar {
    order: 2;
  }
}

/* -- resume de la commande -- */

.wc-block-checkout__sidebar .wc-block-components-checkout-order-summary,
.wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.wc-block-checkout__sidebar .wc-block-components-totals-wrapper {
  border-color: var(--line);
}

.wc-block-components-totals-item__label { font-size: 15px; color: var(--grey); }
.wc-block-components-totals-item__value { font-size: 15px; }

/* Le total est le chiffre que le client cherche : on le detache. */
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-family: var(--poppins);
  font-weight: 600;
  font-size: 18px;
  color: var(--ink);
}

.wc-block-components-order-summary-item__description .wc-block-components-product-name {
  font-family: var(--poppins);
  font-size: 14px;
  font-weight: 600;
}

/* La pastille de quantite : WooCommerce impose son fond blanc, d'ou le
   `!important`. Sans lui le chiffre devient blanc sur blanc. */
.wc-block-components-order-summary-item__quantity {
  background: var(--green) !important;
  border-color: var(--green);
  color: #fff;
}

/* -- boutons -- */

.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button {
  background: var(--green);
  border: 1.5px solid var(--green);
  border-radius: var(--radius);
  color: #fff;
  font-family: var(--poppins);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 15px 30px;
  transition: background .15s;
}

.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button:hover:not(:disabled) {
  background: var(--green-hover);
  border-color: var(--green-hover);
}

.wp-block-woocommerce-checkout .wc-block-components-checkout-return-to-cart-button {
  font-family: var(--poppins);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink);
}

.wp-block-woocommerce-checkout .wc-block-components-checkout-return-to-cart-button:hover {
  color: var(--green);
}

/* Le depliant des codes promo est un bouton, pas un titre : on le pose comme
   un lien discret. */
.wp-block-woocommerce-checkout .wc-block-components-panel__button {
  font-family: var(--raleway);
  font-size: 15px;
  color: var(--ink);
}

/* -- liens et messages -- */

.wp-block-woocommerce-checkout a { color: var(--green); }

.wp-block-woocommerce-checkout .wc-block-components-checkout-policies__item a {
  text-decoration: underline;
}

/* ------------------------------------------- page de confirmation -- */

/* La page « Commande reçue » n'est PAS un bloc : c'est le gabarit classique de
   WooCommerce, qui arrive sans aucun style - listes a puces, colonnes de
   tableau centrees par defaut du navigateur. On lui donne la meme grammaire
   qu'au reste : Poppins pour les titres, cartes douces, chiffres a droite.

   Elle sert aussi a l'ecran « Commande » de l'espace client, qui partage ces
   classes. */

.woocommerce-order { max-width: 780px; margin: 0 auto; }

/* WooCommerce pose 80px de padding EN HAUT ET EN BAS de ces deux sections,
   pense pour un gabarit pleine page. En bas, ces 80px tombaient sous le dernier
   element - l'encadre de retrait - et ouvraient un trou de 164px avant les
   adresses. C'est la marge ci-dessous, et elle seule, qui espace les sections. */
/* `:not(.woocommerce-info)` : la passerelle de paiement pose ses instructions
   dans une section qui porte la MEME classe. Sans cette exception, son encart
   perdait le rembourrage qui le rend lisible. */
.woocommerce-order .woocommerce-order-details:not(.woocommerce-info),
.woocommerce-order .woocommerce-customer-details {
  padding-top: 0;
  padding-bottom: 0;
}
.woocommerce-order .woocommerce-customer-details { margin-top: 44px; }

.woocommerce-order .woocommerce-notice--success {
  margin: 0 0 28px;
  padding: 16px 20px;
  border: 1px solid var(--green-pale-2);
  border-radius: var(--radius);
  background: var(--green-pale);
  font-size: 16px;
}

/* Le recapitulatif en tete : une liste a puces devient une grille de
   couples libelle / valeur. */
.woocommerce-order-overview {
  list-style: none;
  margin: 0 0 40px;
  padding: 22px 26px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 20px 26px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.woocommerce-order-overview li {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: var(--poppins);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--grey);
}

.woocommerce-order-overview li strong {
  display: block;
  margin-top: 7px;
  font-family: var(--raleway);
  font-size: 16px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink);
}

/* -- titres de section -- */

.woocommerce-order-details__title,
.woocommerce-column__title,
.woocommerce-customer-details h2,
.woocommerce-order-pickup h2 {
  font-family: var(--poppins);
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 14px;
}

/* -- tableau du detail -- */

.woocommerce-table--order-details {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 40px;
}

.woocommerce-table--order-details th,
.woocommerce-table--order-details td {
  /* Le navigateur centre les `th` par defaut : c'est ce qui donnait cet
     alignement flottant, sans colonne lisible. */
  text-align: left;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  vertical-align: top;
}

.woocommerce-table--order-details thead th {
  font-family: var(--poppins);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--grey);
}

/* Les montants se lisent alignes a droite, jamais autrement. */
.woocommerce-table--order-details .product-total,
.woocommerce-table--order-details tfoot td {
  text-align: right;
  white-space: nowrap;
}

.woocommerce-table--order-details tfoot th { font-weight: 600; }

/* La derniere ligne du pied est le total : on le detache comme ailleurs. */
.woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-table--order-details tfoot tr:last-child td {
  font-family: var(--poppins);
  font-size: 18px;
  font-weight: 600;
  border-bottom: 0;
}

.woocommerce-table--order-details .product-name a { color: var(--ink); }
.woocommerce-table--order-details .product-quantity { color: var(--grey); font-weight: 600; }

/* -- retrait en boutique -- */

/* Servi par `Core\Pickup\Checkout::dansLaPage()`. Encadre plutot que fondu
   dans la page : c'est un rendez-vous, le client doit le retrouver d'un coup
   d'oeil en rouvrant le message. */
.woocommerce-order-pickup {
  margin: 0;
  padding: 22px 26px;
  background: var(--green-pale);
  border: 1px solid var(--green-pale-2);
  border-radius: var(--radius-lg);
}

.woocommerce-order-pickup h2 { margin-bottom: 4px; }
.woocommerce-order-pickup p { margin: 0; font-size: 16px; }

/* -- adresses -- */

.woocommerce-customer-details .woocommerce-columns--addresses {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
}

.woocommerce-customer-details address {
  font-style: normal;
  font-size: 15px;
  line-height: 1.6;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

@media (max-width: 640px) {
  .woocommerce-order-overview { grid-template-columns: 1fr 1fr; }
  .woocommerce-customer-details .woocommerce-columns--addresses { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------ espace client -- */

/* Grille de tuiles, reprise des styles en ligne de la maquette 08-compte. */
.account-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.account-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
  display: block;
}
.account-card:hover { border-color: var(--green); }
.account-card .ic { font-size: 26px; margin-bottom: 12px; line-height: 1; }
.account-card h3 { font-size: 17px; font-weight: 600; margin-bottom: 6px; }
.account-card p { font-size: 14.5px; color: var(--grey); margin: 0; }

/* Sortie du compte : discrete et centree sous les tuiles. Ce n'est pas une
   action que l'on vient chercher, elle n'a pas a se disputer l'oeil avec
   « Mes commandes » ou « Mes prescriptions ». */
.account-logout { margin: 34px 0 0; text-align: center; }

.account-logout a {
  font-size: 14px;
  color: var(--grey);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.account-logout a:hover { color: var(--green); }

.page-title.account-title { text-align: left; font-size: 32px; }

/* Bandeau de fidelite : centre et adouci, comme dans la maquette. */
.account-cagnotte {
  max-width: 520px;
  margin: 0 auto 40px;
  text-align: center;
  background: var(--green-pale);
  border-color: var(--green-pale-2);
}
.account-cagnotte .solde {
  font-family: var(--poppins);
  font-size: 34px;
  font-weight: 600;
  color: var(--green);
}
.account-cagnotte p { margin: 6px 0 16px; font-size: 15px; }

/* Barre du compte : bandeau pleine largeur sous l'en-tete.

   Le fond est un cran plus chaud que la page (--bg-soft #f3efe8 contre --paper
   #faf8f4), ce qui pose une progression lisible en trois niveaux : en-tete
   presque blanc, bandeau creme, page creme claire. Un filet suffit a le
   fermer ; un trait epais concurrencerait l'en-tete.

   Rendue par base.twig, hors des conteneurs : dans un conteneur elle se lirait
   comme du contenu de page. Absente du tableau de bord, ou les tuiles jouent ce
   role. */
.account-bar {
  background: var(--bg-soft);
  border-bottom: 1px solid var(--line);
}
.account-bar ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 18px 0;
}
.account-bar .chip { display: inline-block; background: #fffdfa; }
.account-bar .chip.on { background: #fff; }

/* En petite largeur la barre defile plutot que de s'empiler sur quatre lignes. */
@media (max-width: 860px) {
  .account-bar ul {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 16px;
  }
  .account-bar ul::-webkit-scrollbar { display: none; }
  .account-bar li { flex: none; }
}

/* Connexion et inscription cote a cote. */
.account-login { display: grid; gap: 26px; }
.account-login--double { grid-template-columns: 1fr 1fr; align-items: start; }
.account-login-pane { padding: 30px; }
.account-login .page-title { font-size: 24px; margin: 0 0 22px; }
.account-remember { display: flex; align-items: center; gap: 10px; font-size: 14.5px; margin-bottom: 18px; }
.account-remember input { accent-color: var(--green); }
.account-lost { margin: 14px 0 0; font-size: 14.5px; }
.account-lost a { color: var(--grey); text-decoration: underline; }
.account-lost a:hover { color: var(--green); }
.account-note { font-size: 14.5px; color: var(--grey); }
.account-login .required { color: var(--green); }

/* WooCommerce dispose ses ecrans en deux colonnes ; le tableau de bord et les
   sous-ecrans occupent toute la largeur, la navigation etant au-dessus. */
.woocommerce-MyAccount-content { width: 100%; }

/* Tableaux de commandes et de telechargements : sans la feuille de
   WooCommerce, ils sortent sans aucune bordure ni espacement. */
.woocommerce-MyAccount-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.woocommerce-MyAccount-content table th,
.woocommerce-MyAccount-content table td {
  text-align: left;
  padding: 14px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
/* `thead th` seulement : WooCommerce emploie aussi des `th` en corps de
   tableau, qui heritaient sinon du trait sombre reserve a l'en-tete. */
.woocommerce-MyAccount-content table thead th {
  font-family: var(--poppins);
  font-size: 14px;
  font-weight: 600;
  border-bottom-color: var(--ink);
}
.woocommerce-MyAccount-content table tbody th { font-weight: 600; }
.woocommerce-MyAccount-content table td:last-child,
.woocommerce-MyAccount-content table th:last-child { text-align: right; }
.woocommerce-MyAccount-content table .button,
.woocommerce-MyAccount-content .button {
  display: inline-block;
  background: var(--green);
  color: #fff;
  border: 1px solid var(--green);
  border-radius: var(--radius-lg);
  padding: 9px 18px;
  font-family: var(--poppins);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.woocommerce-MyAccount-content .button:hover { background: var(--green-hover); border-color: var(--green-hover); }

/* Formulaires d'adresse et d'informations : WooCommerce y met ses propres
   classes de ligne, on les aligne sur les champs du theme. */
.woocommerce-MyAccount-content .woocommerce-Address { margin-bottom: 30px; }
.woocommerce-MyAccount-content .woocommerce-Address-title { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
/* `:not(.account-card h3)` : les tuiles vivent dans ce meme conteneur et
   gardent leur propre taille, celle de la maquette. */
.woocommerce-MyAccount-content .woocommerce-Address-title h2,
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content :not(.account-card) > h3 {
  font-family: var(--poppins);
  font-size: 19px;
  font-weight: 600;
  margin: 0 0 14px;
}
.woocommerce-MyAccount-content .form-row { display: block; margin-bottom: 18px; }
.woocommerce-MyAccount-content .form-row label { display: block; font-size: 14px; color: var(--grey); margin-bottom: 7px; }
.woocommerce-MyAccount-content .form-row input[type="text"],
.woocommerce-MyAccount-content .form-row input[type="email"],
.woocommerce-MyAccount-content .form-row input[type="tel"],
.woocommerce-MyAccount-content .form-row input[type="password"],
.woocommerce-MyAccount-content .form-row select,
.woocommerce-MyAccount-content .form-row textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 13px 16px;
  font-family: var(--raleway);
  font-size: 15px;
  background: #fff;
}
.woocommerce-MyAccount-content fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; margin: 26px 0; }
.woocommerce-MyAccount-content fieldset legend { font-family: var(--poppins); font-weight: 600; padding: 0 8px; }

@media (max-width: 980px) {
  .account-grid { grid-template-columns: repeat(2, 1fr); }
  .account-login--double { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .account-grid { grid-template-columns: 1fr; }
}

/* Tableaux de l'espace praticien : ils reprennent l'habillage des tableaux du
   compte, defini plus haut, et n'ont besoin que de la largeur. */
.account-table { width: 100%; border-collapse: collapse; font-size: 15px; }

/* Historique de la cagnotte : les points s'alignent a droite et se lisent en
   chiffres tabulaires, sinon les colonnes de + et de - ne se comparent pas. */
.account-table td.num, .account-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.account-table td.num.gain { color: var(--green); font-weight: 600; }
.account-table td.num.perte { color: var(--grey); }
.account-note { font-size: 14.5px; color: var(--grey); }
.account-actions { margin: 22px 0; }

/* DataTables sans sa feuille complete : on masque le selecteur de longueur,
   comme le faisait lumber, et on aligne la recherche sur les champs du site. */
.dt-length { display: none; }
.dt-search input {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 9px 14px;
  font-family: var(--raleway);
  font-size: 14.5px;
  margin-left: 8px;
}
.dt-paging { margin-top: 18px; }
.dt-paging button { border: 1px solid var(--line); background: #fff; border-radius: var(--radius); padding: 6px 12px; margin-right: 6px; cursor: pointer; }
.dt-paging button.current { border-color: var(--green); color: var(--green); }

/* ------------------------------------- espace praticien, vues detail -- */

/* Portage de la feuille de `lumber` pour les rapports Herbolistimed et les
   prescriptions, dans les couleurs du theme : le turquoise #3b8878 devient le
   vert de la charte, les fonds vifs des reponses deviennent des teintes du
   site, et les angles reprennent le rayon commun.

   Les noms de classes viennent des gabarits portes ; les renommer aurait
   demande de toucher a une logique d'affichage dense (ordre des champs, table
   de remplacement ACF) pour un gain nul. */

.herbolistimed-admin .back,
.prescriptor-admin .back {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-size: 14.5px;
  margin-bottom: 30px;
}
.herbolistimed-admin .back a,
.prescriptor-admin .back a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--grey);
  text-decoration: underline;
}
.herbolistimed-admin .back a:hover,
.prescriptor-admin .back a:hover { color: var(--green); }
.herbolistimed-admin .back svg { fill: var(--green); }

.herbolistimed-admin .introduction { margin-bottom: 40px; }
.herbolistimed-admin.single .before,
.herbolistimed-admin.single .html { margin: 40px 0; }

/* Le conteneur ordonne ses enfants par `order`, pose en ligne par le gabarit. */
.herbolistimed-fields-wrapper { display: flex; flex-direction: column; }
.herbolistimed-fields-wrapper > .first { order: 1 !important; }

.herbolistimed-admin .identity { margin-bottom: 30px; }
.herbolistimed-admin .identity h2 { font-family: var(--poppins); font-size: 19px; font-weight: 600; margin-bottom: 12px; }
.herbolistimed-admin .informations {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  font-size: 15px;
}

.herbolistimed-admin.single .answer {
  display: flex;
  padding: 10px 14px;
  margin-bottom: 10px;
  border-radius: var(--radius);
  font-size: 15px;
}
.herbolistimed-admin.single .answer.ok { background: var(--green-pale); }
.herbolistimed-admin.single .answer.nok { background: #f7e4e0; }
.herbolistimed-admin.single .answer.ok,
.herbolistimed-admin.single .answer.nok,
.herbolistimed-admin.single .answer.eject { justify-content: space-between; }

.herbolistimed-admin.single .answer .label.bolder { font-weight: 700; }
.herbolistimed-admin.single .answer .value { padding-left: 20px; }
.herbolistimed-admin.single .answer .value.checkbox { font-size: 1.5em; line-height: 1; }
.herbolistimed-admin.single .answer .value.hidden { font-weight: 700; text-align: right; }

.herbolistimed-admin.single .answer.has-title { flex-wrap: wrap; }
.herbolistimed-admin.single .answer.has-title.eject .extra-title { order: 1; width: 70%; }
.herbolistimed-admin.single .answer.has-title.eject .label { order: 3; width: 100%; }
.herbolistimed-admin.single .answer.has-title.eject .value { order: 2; width: 27%; padding-left: 3%; }

.herbolistimed-admin.single .answer.bordered {
  border: 2px dotted var(--green);
  margin-bottom: 15px;
}
.herbolistimed-admin.single .answer .extra-title { margin-bottom: 10px; }
.herbolistimed-admin.single .answer .extra-title > span {
  display: inline-block;
  background: var(--green);
  color: #fff;
  padding: 5px 10px;
  border-radius: var(--radius-lg);
  font-family: var(--poppins);
  font-size: 13px;
  font-weight: 600;
}
.herbolistimed-admin.single .answer.bordered .extra-title > span {
  position: relative;
  top: -9px;
  left: -12px;
  border-radius: var(--radius) 0 var(--radius-lg) 0;
}

.herbolistimed-admin .products { margin-top: 8px; font-size: 14px; color: var(--grey); }
.herbolistimed-admin .products a { color: var(--green); text-decoration: underline; }

/* Prescriptions : une ligne dont la quantite achetee ne suit pas la
   prescription est signalee, comme dans l'ancien theme. */
.prescriptor-admin .identity h2,
.prescriptor-admin .details h2 { font-family: var(--poppins); font-size: 19px; font-weight: 600; margin-bottom: 14px; }
.prescriptor-admin table img { display: block; border-radius: var(--radius); }
/* Donnees d'article dans le panier : au premier chef la posologie du praticien.

   Encadree plutot que fondue dans la ligne : c'est une consigne, pas une
   caracteristique du produit, et elle ne doit pas se confondre avec le format
   ou la reference juste au-dessus. */
.cart-line-data { margin: 10px 0 4px; }
.cart-line-data__item {
  margin: 0 0 6px;
  padding: 9px 13px;
  border-left: 3px solid var(--green);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--green-pale);
  font-size: 14.5px;
  line-height: 1.45;
}
.cart-line-data__item:last-child { margin-bottom: 0; }
.cart-line-data__cle {
  display: block;
  margin: 0 0 2px;
  font-family: var(--poppins);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--green-dark);
}
.cart-line-data__item p { margin: 0; }

/* Detail d'une prescription : le patient a gauche, les produits a droite.

   La fiche du patient est courte et de largeur previsible ; les tableaux, eux,
   s'elargissent des qu'on leur ajoute la posologie. D'ou une colonne fixe et
   une colonne souple. */
.prescription-detail {
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr);
  gap: 34px;
  align-items: start;
}

.prescription-detail .identity {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
}

.prescription-fiche { margin: 0; }
.prescription-fiche dt {
  font-family: var(--poppins);
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--grey);
  margin: 14px 0 3px;
}
.prescription-fiche dt:first-child { margin-top: 0; }
.prescription-fiche dd { margin: 0; font-size: 15px; word-break: break-word; }

/* Lien de partage : l'adresse est longue et doit rester lisible et
   selectionnable, d'ou la coupure sur n'importe quel caractere. */
.prescription-partage { margin: 22px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line); }
.prescription-partage h3 {
  font-family: var(--poppins);
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 6px;
}
.prescription-partage a {
  display: block;
  font-size: 13px;
  line-height: 1.45;
  color: var(--green);
  word-break: break-all;
}

.prescription-message { margin: 22px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line); }
.prescription-message h3 {
  font-family: var(--poppins);
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 6px;
}
.prescription-message p { margin: 0 0 8px; font-size: 14.5px; }

/* Tableaux de produits. */
.prescription-table { margin: 0 0 12px; }
.prescription-table th {
  font-family: var(--poppins);
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--grey);
  text-align: left;
  padding: 0 12px 10px 0;
  border-bottom: 1px solid var(--line);
}
.prescription-table td {
  padding: 12px 12px 12px 0;
  border-bottom: 1px solid var(--line-2);
  vertical-align: top;
}
.prescription-table th.num, .prescription-table td.num { text-align: right; padding-right: 18px; }
/* La vignette est tiree de la taille « thumbnail », soit 150px de source :
   on peut donc l'afficher a 80px sans la degrader. A 48px, on ne reconnaissait
   pas le produit. */
.prescription-table td.visuel { width: 92px; padding-right: 16px; }
.prescription-table td.visuel img {
  width: 80px;
  height: auto;
  border: 1px solid var(--line-2);
}
.prescription-table td.nom a { font-weight: 600; color: var(--ink); }
.prescription-table td.nom a:hover { color: var(--green); }
.prescription-table .reference {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  color: var(--grey-3);
}
/* La posologie est le texte du praticien : elle respire, et ne se serre pas
   comme un chiffre. */
.prescription-table td.posologie {
  font-size: 14px;
  color: var(--grey);
  min-width: 200px;
  white-space: pre-line;
}

@media (max-width: 900px) {
  .prescription-detail { grid-template-columns: 1fr; gap: 24px; }
}

.prescription-order.nok td { background: #faf3f3; }
.prescription-order.nok td:first-child { box-shadow: inset 3px 0 0 #c9553d; }

/* Feuille d'impression : voir plus bas. */

/* ==================================================== impression du rapport ==
   Les rapports Herbolistimed sont imprimes et remis au patient : la sortie
   papier compte autant que l'ecran.

   Parti pris : on garde les couleurs qui portent un sens (le vert des titres de
   section, les teintes vert et rouge des reponses conformes ou non), et on
   retire tout le reste. `print-color-adjust: exact` est indispensable, sans lui
   les navigateurs suppriment les aplats et les reponses deviennent
   indistinctes.
   ========================================================================== */

@page {
  size: A4;
  margin: 15mm 14mm 18mm;
}

@media print {
  /* Tout l'habillage du site disparait. */
  .header, .footer, .promo, .breadcrumb, .account-bar, .scrim, .drawer,
  .search-panel, .megamenu, .woocommerce-MyAccount-navigation,
  #wpadminbar, .no-print, .no-print * { display: none !important; }

  html, body {
    background: #fff !important;
    color: #000;
    font-size: 10.5pt;
    line-height: 1.45;
  }

  section, section.tight { padding: 0 !important; }
  .container, .container-sm { max-width: 100%; width: 100%; padding: 0; margin: 0; }
  .woocommerce-MyAccount-content { width: 100%; max-width: 100%; margin: 0; float: none; }

  /* En-tete courant, ajoute a l'impression seulement.

     `position: fixed` se repete sur chaque page a l'impression : un rapport de
     plusieurs feuillets remis a un patient doit s'identifier a chaque page, pas
     seulement sur la premiere. La marge haute de `@page` lui reserve la place. */
  .herbolistimed-admin.single::before {
    content: "Laboratoires Herbolistique — Rapport Herbolistimed";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    font-family: var(--poppins);
    font-size: 9pt;
    font-weight: 600;
    color: var(--green);
    border-bottom: 1.5pt solid var(--green);
    padding-bottom: 3mm;
  }

  /* Decale le contenu sous l'en-tete courant. */
  .herbolistimed-admin.single { padding-top: 9mm; }

  /* Identite : encadre sobre, jamais coupe entre deux pages. */
  .herbolistimed-admin .identity { margin-bottom: 7mm; break-inside: avoid; }
  .herbolistimed-admin .identity h2 { font-size: 12pt; margin-bottom: 3mm; }
  .herbolistimed-admin .informations {
    border: 0.7pt solid #999;
    border-radius: 0;
    padding: 4mm 5mm;
    gap: 2mm 10mm;
    font-size: 10pt;
  }

  .herbolistimed-admin .introduction { margin-bottom: 7mm; font-size: 10pt; }
  .herbolistimed-admin.single .before,
  .herbolistimed-admin.single .html { margin: 6mm 0; }

  /* Un titre ne doit pas rester seul en bas de page, ni une reponse etre
     coupee en deux. */
  .herbolistimed-admin h2,
  .herbolistimed-admin .extra-title { break-after: avoid; }
  .herbolistimed-admin.single .answer,
  .herbolistimed-admin .answer-wrapper { break-inside: avoid; }

  .herbolistimed-admin.single .answer {
    padding: 2.5mm 3mm;
    margin-bottom: 2.5mm;
    border-radius: 0;
    font-size: 10pt;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .herbolistimed-admin.single .answer.ok { background: #e8f1ea !important; }
  .herbolistimed-admin.single .answer.nok { background: #f7e4e0 !important; }
  .herbolistimed-admin.single .answer.bordered { border-width: 1pt; border-style: solid; }

  .herbolistimed-admin.single .answer .extra-title > span {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    border-radius: 0;
    font-size: 8.5pt;
    padding: 1mm 2.5mm;
  }
  .herbolistimed-admin.single .answer.bordered .extra-title > span { top: -4mm; left: -4mm; }

  /* Les liens produit gardent leur libelle mais perdent leur soulignement :
     une URL n'est d'aucune utilite sur papier. */
  .herbolistimed-admin .products { font-size: 9pt; color: #333; }
  .herbolistimed-admin .products a { color: #000; text-decoration: none; }
  .herbolistimed-admin a[href]::after { content: none !important; }
}

/* -------------------------------------------------------- bibliotheque -- */

.resource-retour { font-size: 14.5px; margin-bottom: 18px; }
.resource-retour a { color: var(--grey); text-decoration: underline; }
.resource-retour a:hover { color: var(--green); }

.resource-intro { margin-left: 0; margin-bottom: 40px; }

.resource-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.resource-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fffdfa;
}
.resource-card:hover { border-color: var(--green); }

.resource-card .ph { aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-card); }
.resource-card .ph img { width: 100%; height: 100%; object-fit: cover; display: block; }

.resource-card .bd { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.resource-card h3 { font-family: var(--poppins); font-size: 18px; font-weight: 600; }
.resource-card .rte { font-size: 14.5px; color: var(--grey); }
.resource-card .rte p { margin: 0; }
.resource-card .btn { margin-top: auto; align-self: flex-start; }

@media (max-width: 980px) { .resource-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .resource-grid { grid-template-columns: 1fr; } }

.resource-nav { justify-content: flex-start; margin-bottom: 34px; }

.resource-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.resource-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 26px;
  background: #fffdfa;
}
.resource-item h3 { font-family: var(--poppins); font-size: 17px; font-weight: 600; line-height: 1.35; }
.resource-item h3 a:hover { color: var(--green); }
/* Pastille de type et date sur une meme ligne : deux informations courtes,
   une seule rangee. `align-self` passe sur la rangee, sinon elle s'etirerait
   sur toute la largeur de la carte et la pastille avec elle. */
.resource-item .resource-meta {
  align-self: flex-start;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
}
.resource-item .date {
  font-size: 13px;
  color: var(--grey-2);
  white-space: nowrap;
}

.resource-item .type {
  font-family: var(--poppins);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--green);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 3px 10px;
  margin: 0;
}
.resource-item .rte { font-size: 14.5px; color: var(--grey); }
.resource-item .rte p { margin: 0 0 8px; }
.resource-item .btn { margin-top: auto; align-self: flex-start; }

@media (max-width: 860px) { .resource-list { grid-template-columns: 1fr; } }

/* --------------------------------------------- detail d'une commande -- */

/* Resume en tete : les trois informations qu'on cherche en arrivant. */
.order-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 40px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fffdfa;
  padding: 20px 24px;
  margin-bottom: 36px;
}
.order-summary-item { display: flex; align-items: baseline; gap: 8px; }
.order-summary-item .k { font-size: 14px; color: var(--grey); }
.order-summary-item .v { font-family: var(--poppins); font-size: 16px; font-weight: 600; }

/* Pastille d'etat. Les couleurs distinguent ce qui avance, ce qui est acquis
   et ce qui s'est arrete, sans multiplier les teintes. */
.order-status {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--radius-lg);
  font-family: var(--poppins);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: var(--bg-soft);
  color: var(--ink);
}
.order-status.is-completed { background: var(--green-pale); color: var(--green); }
.order-status.is-processing,
.order-status.is-on-hold { background: #fdf0e2; color: #9a5b18; }
.order-status.is-cancelled,
.order-status.is-failed,
.order-status.is-refunded { background: #f7e4e0; color: #8d3826; }

/* WooCommerce enveloppe le numero, la date et le statut dans des `<mark>` :
   le navigateur les surligne en jaune. Neutralise partout dans le compte. */
.woocommerce-MyAccount-content mark,
.order-status-note mark {
  background: none;
  color: inherit;
  font-weight: 600;
}
.order-status-note { color: var(--grey); font-size: 15px; }

/* Adresses : le balisage est deja en deux colonnes, il n'attendait qu'une
   largeur. En italique par defaut, ce qui n'est pas notre usage. */
.woocommerce-customer-details .woocommerce-columns--addresses {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px;
  margin-top: 10px;
}
.woocommerce-customer-details .woocommerce-column {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 24px;
  background: #fffdfa;
}
.woocommerce-customer-details address {
  font-style: normal;
  font-size: 15px;
  line-height: 1.6;
  color: var(--grey);
}
.woocommerce-customer-details address p { margin: 8px 0 0; }
.woocommerce-customer-details .woocommerce-column__title { margin-bottom: 10px; }

/* Journal de la commande. */
.order-updates { list-style: none; margin: 0; padding: 0; }
.order-update {
  border-left: 2px solid var(--line);
  padding: 0 0 18px 18px;
  position: relative;
}
.order-update .meta { font-size: 13.5px; color: var(--grey-2); margin: 0 0 4px; }
.order-update .rte { font-size: 15px; }

/* La zone de notifications reste dans le flux meme vide, d'ou un grand blanc
   sous le titre. */
.woocommerce-MyAccount-content .woocommerce-notices-wrapper:empty { display: none; }

/* WooCommerce structure le detail d'une commande en `<section>`, et le theme
   applique a cette balise le rythme des bandes de page : 80px de padding
   vertical. Sur un ecran de compte, cela ouvrait un blanc de la hauteur d'un
   ecran entre le resume et le tableau. On rend l'espacement aux marges. */
.woocommerce-MyAccount-content section { padding: 0; }
.woocommerce-MyAccount-content section + section { margin-top: 40px; }

@media (max-width: 860px) {
  .woocommerce-customer-details .woocommerce-columns--addresses { grid-template-columns: 1fr; }
}

/* Note de la passerelle de paiement.

   Mollie l'insere dans une SECONDE `section.woocommerce-order-details`,
   imbriquee dans la premiere et portant la meme classe. Elle arrive avec son
   fond mais sans marge ni padding : collee au tableau, texte au ras du bord.
   C'est ce conteneur qu'on habille, pas le paragraphe qu'il contient, sinon on
   obtient deux encadres l'un dans l'autre. */
.woocommerce-order-details .woocommerce-order-details {
  margin-top: 28px;
  padding: 16px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 15px;
}
.woocommerce-order-details .woocommerce-order-details > p { margin: 0; }

/* Recherche dans la bibliotheque. */
.resource-search {
  display: flex;
  gap: 12px;
  align-items: stretch;
  max-width: 620px;
  margin: 0 0 34px;
}
.resource-search .field { flex: 1; margin: 0; }
.resource-search .sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.resource-search input[type="search"] {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 13px 16px;
  font-family: var(--raleway);
  font-size: 15px;
  background: #fff;
}
.resource-search input[type="search"]:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.resource-search .btn { flex: none; }

.resource-results-title {
  font-family: var(--poppins);
  font-size: 19px;
  font-weight: 600;
  margin: 0 0 22px;
}

/* ------------------------------------------------------------------ builder

   Pages editoriales composees avec le constructeur ACF (gabarit « Contenu »).
   Vingt-deux pages en dependent : lettres d'information, seminaires, dossiers.

   Le contenu vient de `lumber`, l'habillage est celui de la maquette. On
   reprend donc ses conteneurs, ses bandeaux et sa typographie plutot que de
   porter les anciennes feuilles, qui reposaient sur une autre echelle de
   couleurs et de tailles. */

.builder > section.node { padding: 56px 0; }

/* Le titre de la page fournit deja l'air du haut. */
.node-titre { padding-bottom: 0; }
.node-titre + .builder > section.node:first-child { padding-top: 32px; }

/* Deux bandeaux de meme couleur se suivent : un seul espacement entre eux,
   sinon la couleur se coupe en deux au milieu d'une meme idee. */
.builder > section.node + section.node.theme-default { padding-top: 0; }
.builder > section.node.theme-default:has(+ .theme-default) { padding-bottom: 0; }

/* Habillages proposes par le champ ACF, ramenes aux bandeaux de la maquette. */
.node.theme-lightgreen { background: var(--green-pale); }
.node.theme-grey { background: var(--bg-soft); }

/* Aucun equivalent sombre dans la maquette : on reprend le vert du pied de
   page, qui est le seul fond fonce du site, pour ne pas introduire une
   troisieme famille de verts. */
.node.theme-darkgreen { background: var(--green); }
.node.theme-darkgreen,
.node.theme-darkgreen .rte p,
.node.theme-darkgreen .rte li,
.node.theme-darkgreen h1,
.node.theme-darkgreen h2,
.node.theme-darkgreen h3,
.node.theme-darkgreen h4 { color: #fff; }
.node.theme-darkgreen .rte a { color: #fff; text-decoration: underline; }

/* Titres saisis dans l'editeur enrichi. La maquette centre ses titres de
   section, mais ceux-ci sont dans le fil du texte : ils restent alignes a
   gauche, avec le meme caractere et le meme filet vert.

   MEME ECHELLE QUE LES BLOCS DE COEUR plus bas : les deux familles de pages
   cohabitent, un lecteur qui passe de l'une a l'autre ne doit pas voir la
   hierarchie changer. */
.builder .rte h1,
.builder .rte h2,
.builder .rte h3,
.builder .rte h4 {
  font-family: var(--poppins);
  font-weight: 700;
  line-height: 1.28;
  margin: 34px 0 16px;
  text-align: left;
  color: var(--ink);
}
.builder .rte > :first-child { margin-top: 0; }
.builder .rte h1 { font-size: var(--titre-1); }
.builder .rte h2 { font-size: var(--titre-2); }
.builder .rte h3 { font-size: var(--titre-3); }
.builder .rte h4 {
  font-size: var(--titre-4);
  font-variant-caps: small-caps;
  letter-spacing: .02em;
}

/* Meme soulignement herite que dans les blocs de coeur : pose en ligne dans le
   contenu, il ne cede qu'a `!important`. */
.builder .rte :is(h1, h2, h3, h4, h5, h6),
.builder .rte :is(h1, h2, h3, h4, h5, h6) * { text-decoration: none !important; }

.node.theme-darkgreen .rte :is(h1, h2, h3, h4) { color: #fff; }

.builder .rte h2::after {
  content: "";
  display: block;
  width: 64px;
  height: 4px;
  margin-top: 14px;
  border-radius: 4px;
  background: var(--green);
}
.node.theme-darkgreen .rte h2::after { background: #fff; }

.builder .rte a { color: var(--green); text-decoration: underline; }
.builder .rte > :last-child { margin-bottom: 0; }

/* Images : elles arrivent aux dimensions d'origine, souvent tres larges. */
.node-image { margin: 0; }
.node-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}

/* Deux colonnes. `align-items` vient du champ ACF, il est pose en ligne. */
.node-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.node-col > * + * { margin-top: 24px; }

/* Variante pleine largeur : les colonnes touchent les bords, le texte garde
   sa respiration a l'interieur. Les images y sont a fond perdu, sans arrondi
   qui laisserait un liere de fond visible dans l'angle. */
.node.node-full { padding: 0; }
.node.node-full .node-duo { gap: 0; align-items: stretch; }
.node.node-full .node-col { display: flex; flex-direction: column; justify-content: center; }
.node.node-full .rte { padding: 56px clamp(24px, 5vw, 72px); }
.node.node-full .node-image img { border-radius: 0; height: 100%; object-fit: cover; }

@media (max-width: 860px) {
  .builder > section.node { padding: 40px 0; }
  .node-duo { grid-template-columns: 1fr; gap: 32px; }
  .node.node-full .rte { padding: 36px 24px; }
  .builder .rte h2 { font-size: 22px; }
}

/* --------------------------------------------------- blocs de coeur

   Depuis la migration du constructeur ACF, les pages editoriales sont ecrites
   avec les blocs de coeur de WordPress - titre, paragraphe, liste - poses dans
   le bloc Section. Ils ont donc besoin de la typographie editoriale de la
   maquette, que seule la classe `.rte` portait jusqu'ici.

   Les titres sont alignes a gauche, contrairement a `.section-title` : ils sont
   dans le fil du texte, pas en tete de section.

   PORTEE. Tout s'accroche a `.wp-block-herbolistique-section` ET a la classe
   `wp-block-heading` que l'editeur pose sur ses titres. Les titres des
   composants - carte produit, carte article, colonne de pied de page, panneau
   de filtres - n'ont pas cette classe : la boutique, le tunnel, l'espace client
   et l'en-tete restent hors de portee meme quand une grille est posee dans une
   section.

   Les tailles viennent des jetons `--titre-*` declares dans `theme.css` : la
   hierarchie se corrige a un seul endroit. */

.wp-block-herbolistique-section .wp-block-heading {
  font-family: var(--poppins);
  font-weight: 700;
  line-height: 1.28;
  /* L'alignement est impose plutot que laisse au choix de l'editeur : la
     hierarchie demandee est la meme sur toutes les pages, et un titre centre
     au milieu d'un texte au fer a gauche se lit comme un reste de gabarit. */
  text-align: left;
  color: var(--ink);
}

/* H1 : le plus grand cran de la serie. Il n'y en a qu'un par page, il sert de
   reperage et non de rythme.

   PAS DE COULEUR. Le client l'avait demande en orange ; a 38 px la teinte vire
   au criard. Toute la serie reste a l'encre, la hierarchie se lit a la taille.
   Voir `--orange-titre` dans `theme.css`. */
.wp-block-herbolistique-section h1.wp-block-heading {
  font-size: var(--titre-1);
  margin: 0 0 20px;
}
.wp-block-herbolistique-section h2.wp-block-heading { font-size: var(--titre-2); margin: 0 0 18px; }
.wp-block-herbolistique-section h3.wp-block-heading { font-size: var(--titre-3); margin: 30px 0 14px; }
.wp-block-herbolistique-section h4.wp-block-heading {
  font-size: var(--titre-4);
  margin: 26px 0 12px;
  /* PETITES CAPITALES plutot que `text-transform: uppercase` : la casse saisie
     par le redacteur est conservee, l'initiale et les noms propres gardent leur
     capitale pleine et se detachent du reste. Une majuscule forcee ecraserait
     cette distinction et deformerait sigles, unites et noms latins de plantes,
     frequents dans ces pages.
     Poppins n'embarque pas de vrai jeu de petites capitales : le navigateur les
     synthetise en reduisant des capitales, ce qui les resserre. Le pas de casse
     leur rend l'air qui leur manque. */
  font-variant-caps: small-caps;
  letter-spacing: .02em;
}
.wp-block-herbolistique-section h5.wp-block-heading,
.wp-block-herbolistique-section h6.wp-block-heading { font-size: 15.5px; margin: 22px 0 10px; }

/* Filet vert sous le H2 : c'est lui qui marque la coupure entre deux parties,
   le H3 et le H4 n'en portent pas. Meme motif que sur les titres de section du
   constructeur, pour que les deux familles de pages se ressemblent. */
.wp-block-herbolistique-section h2.wp-block-heading::after {
  content: "";
  display: block;
  width: 64px;
  height: 4px;
  margin-top: 14px;
  border-radius: 4px;
  background: var(--green);
}

/* SOULIGNEMENTS HERITES DE LA VERSION BETA.

   Deux intertitres arrivent du contenu avec un `text-decoration: underline`
   pose EN LIGNE, dans un `<span>` colle depuis un traitement de texte
   (« INTRODUCTION », « DOULEURS CHRONIQUES ET INFLAMMATION »). Un attribut de
   style l'emporte sur n'importe quel selecteur : seul `!important` le
   neutralise. La portee reste celle des titres editoriaux, le reste du site
   garde ses soulignements - lien de paragraphe, bandeau promo, pied de page.

   Corriger le contenu resterait preferable ; la regle evite qu'un copier-coller
   ne reintroduise le trait a chaque nouvelle page. */
.wp-block-herbolistique-section .wp-block-heading,
.wp-block-herbolistique-section .wp-block-heading * { text-decoration: none !important; }

/* Fond vert profond : la serie repasse en blanc, filet compris. Meme poids que
   les regles ci-dessus, d'ou la position apres elles. */
.band-forest :is(h1, h2, h3, h4, h5, h6).wp-block-heading { color: #fff; }
.band-forest h2.wp-block-heading::after { background: #fff; }

/* Titre en tete de section : il n'y a rien au-dessus dont il faille s'ecarter. */
.wp-block-herbolistique-section .container > .wp-block-heading:first-child,
.wp-block-herbolistique-section .rte > .wp-block-heading:first-child { margin-top: 0; }

/* Paragraphes et listes hors `.rte`, c'est-a-dire poses directement dans une
   section. La colonne de texte du bloc Deux colonnes les enveloppe deja. */
.wp-block-herbolistique-section .container > p { font-size: 15.5px; line-height: 1.62; margin: 0 0 16px; }

/* Chapeau de liste : la phrase qui ouvre « Nos cures » ou « Les packs », posee
   juste au-dessus de la grille. Centree et de mesure courte - etalee sur toute
   la largeur du conteneur, une ligne unique se lit comme un reste de gabarit.
   MEME PORTEE QUE LA REGLE CI-DESSUS, sinon son `margin: 0` l'emporte. */
.wp-block-herbolistique-section .container > p.section-lead {
  max-width: 58ch;
  margin: -6px auto 34px;
  text-align: center;
  color: var(--grey);
  font-size: 17px;
  line-height: 1.6;
}

/* LE `-6px` NE VAUT QUE SOUS UN TITRE. Il sert a rattraper l'interligne du
   titre au-dessus ; quand le chapeau CLOT une section - la phrase qui suit la
   grille d'engagements de « Qualite & certifications » - il faisait mordre le
   texte de 6 px sur la derniere rangee de cartes. Invisible tant que les
   cartes etaient un aplat sans bord, franc des qu'elles en portent un.
   Plus d'elements dans le selecteur du titre : il reprend la main dessous. */
.wp-block-herbolistique-section .container > * + p.section-lead { margin-top: 30px; }
.wp-block-herbolistique-section .container > h2 + p.section-lead,
.wp-block-herbolistique-section .container > h3 + p.section-lead { margin-top: -6px; }
/* =======================================================================
   ANCIENNES NEWS MIGREES DEPUIS LE CONSTRUCTEUR ACF

   Une ligne du constructeur est devenue une section. Ce decoupage venait de
   l'outil d'edition et non du propos : un titre seul occupait sa propre ligne
   et se retrouve aujourd'hui separe de son texte par deux fois 80 px, et un
   simple filet occupe une bande de 178 px.

   Les trois regles ci-dessous se declenchent sur la FORME de la section, pas
   sur la page : aucune section des pages editoriales ne se termine par un
   titre, ni ne contient un filet pour seul contenu. Verifie sur « Demarche
   RSE », « Qualite & certifications », « Nos partenaires », « Les essentiels »
   et « Nos cures » : zero correspondance. Elles ne touchent donc que les
   contenus migres, sans rien figer dans leur HTML.
   ======================================================================= */

/* DEUX SECTIONS DE SUITE, UNE SEULE RESPIRATION.

   Une ligne du constructeur est devenue une section, et chacune porte 80 px
   en haut comme en bas : deux sections qui se suivent laissaient donc 160 px
   entre elles. Mesure sous la banniere de « Cerveau - Intestin » : 160 px
   entre le bas du visuel et la premiere phrase, pour un visuel haut de 170 px.

   Le bas de la premiere section suffit a separer : on annule le haut de la
   seconde. L'ecart tombe a 80 px, et le document entier se resserre de
   1 840 px sur cette page - du vide hérité d'un decoupage technique, pas d'une
   intention de mise en page.

   LES BANDES DE COULEUR SONT EXCLUES. Une bande marque une rupture, elle a
   besoin de ses 80 px pour se detacher de ce qui l'entoure. */
body.content-migre .wp-block-herbolistique-section:not([class*="band-"]) + .wp-block-herbolistique-section:not([class*="band-"]) {
  padding-top: 0;
}

/* UN TITRE QUI CLOT UNE SECTION APPARTIENT A LA SUIVANTE. Il introduit ce qui
   vient apres, pas ce qui precede : le laisser a 160 px de son texte en fait
   un titre orphelin. */
.wp-block-herbolistique-section:has(> .container > :last-child.wp-block-heading) { padding-bottom: 22px; }
.wp-block-herbolistique-section:has(> .container > :last-child.wp-block-heading) + .wp-block-herbolistique-section { padding-top: 0; }

/* UNE SEULE COLONNE POUR TOUT LE DOCUMENT. Le constructeur mettait les titres
   seuls et les textes en colonne de lecture (988 px) et les lignes texte+image
   en pleine largeur (1312 px) : au fil de la page, le bord gauche sautait de
   64 a 226 px quatorze fois. Le vide de 160 px entre deux sections le masquait
   ; une fois les titres recolles a leur texte, il saute aux yeux.

   C'EST LE TRAITEMENT DEJA APPLIQUE AUX ARTICLES MIGRES, qui contraignent tous
   leurs conteneurs a 68 rem (`body.single-post ... > .container`, theme.css) et
   dont la lecture est reguliere pour cette raison. `content-migre` est posee
   par Theme::classeContenuMigre() sur les seuls contenus convertis : les pages
   editoriales composees a la main gardent leurs pleines largeurs. */
/* PAGES SEULEMENT. Un article migre porte lui aussi `content-migre`, mais sa
   colonne est fixee ailleurs (theme.css, `body.single-post`) et va desormais
   jusqu'au bord du menu : sans `.page`, cette regle - posee dans une feuille
   chargee plus tard - reprenait la main et le ramenait a 1088 px. */
body.content-migre.page .wp-block-herbolistique-section > .container { max-width: 68rem; }

/* UNE URL COLLEE TELLE QUELLE NE CASSE PAS LA PAGE. Les anciens contenus
   citent leurs sources en collant l'adresse entiere : un mot de 446 px sans
   espace, que rien ne peut couper. `break-word` ne coupe qu'en dernier
   recours, il ne change donc rien aux mots ordinaires. */
.wp-block-herbolistique-section .container a,
.rte a { overflow-wrap: break-word; }

/* LE `<pre>` HERITE NE DOIT PAS DEBORDER. Vingt-et-un contenus migres portent
   un `<pre>` autour d'une phrase ordinaire - un reste de copier-coller, pas du
   code. Son `white-space: pre` empeche tout retour a la ligne : sur un ecran
   de 390 px, « Douleurs chroniques » debordait de 249 px. On autorise le
   retour a la ligne, et on laisse defiler ce qui ne peut vraiment pas se
   couper, plutot que de pousser la page entiere. */
.wp-block-herbolistique-section pre,
.rte pre {
  white-space: pre-wrap;
  overflow-wrap: break-word;
  max-width: 100%;
  overflow-x: auto;
}

/* UN FILET SEUL N'EST PAS UNE SECTION. Sa propre marge fait la respiration ;
   la bande de 80 px au-dessus et au-dessous n'ajoutait que du vide. */
.wp-block-herbolistique-section:has(> .container > hr:only-child),
.wp-block-herbolistique-section:has(> .container > .wp-block-separator:only-child) { padding-top: 0; padding-bottom: 0; }

/* Aucune feuille ne traitait le filet : il sortait au trait gris 1 px du
   navigateur, sur toute la largeur de la colonne. On lui donne la ligne du
   theme, courte et centree, qu'il vienne d'un ancien `<hr>` ou du bloc
   Separateur de Gutenberg. */
.wp-block-herbolistique-section .container > hr,
.wp-block-herbolistique-section .container > .wp-block-separator {
  height: 0;
  border: 0;
  border-top: 1px solid var(--line-2);
  background: none;
  max-width: 190px;
  margin: 52px auto;
}

/* LA NOTE DE FIN SE PERDAIT DANS LE PIED DE PAGE. « Document reserve a l'usage
   des praticiens de sante » arrive sur `band-forest`, exactement le meme vert
   que le pied (#097b35) : la bande et le pied se touchaient sans separation
   visible, et la phrase se lisait comme une ligne egaree du pied de page.
   Le filet clair marque la limite, comme celui qui decoupe deja le pied. */
main > .wp-block-herbolistique-section.band-forest:last-child {
  padding: 44px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  text-align: center;
}

.wp-block-herbolistique-section .container > ul,
.wp-block-herbolistique-section .container > ol { padding-left: 20px; margin: 0 0 16px; }
.wp-block-herbolistique-section .container > ul li,
.wp-block-herbolistique-section .container > ol li { font-size: 15.5px; line-height: 1.6; margin-bottom: 7px; }

/* Liens EDITORIAUX d'une section : ceux qui vivent dans un paragraphe, une
   liste ou un titre.

   La regle portait sur tous les `a` de la section. Or une carte produit EST un
   lien, qui enveloppe son titre, ses benefices et son prix : la carte entiere
   se retrouvait verte et soulignee des qu'une grille etait posee dans une
   section. Meme chose pour les vignettes et les boutons.

   On vise donc le contenu redactionnel, ce que la regle voulait dire. Les
   composants portent deja leur propre habillage.

   LE TITRE EST SORTI DE LA LISTE : un lien pose dans un intertitre garde sa
   couleur verte mais perd son trait, les titres du site n'en portant pas. */
.wp-block-herbolistique-section :is(p, li) a {
  color: var(--green);
  text-decoration: underline;
}
.wp-block-herbolistique-section .wp-block-heading a { color: var(--green); }
.band-forest :is(p, li) a,
.band-forest .wp-block-heading a { color: #fff; }

/* ------------------------------------------------- puces editoriales

   Trois habillages, pour que le redacteur hierarchise une liste sans changer de
   bloc : une enumeration simple, une liste d'acquis, une marche a suivre. Les
   deux derniers se posent dans « Classe(s) CSS additionnelle(s) » du bloc
   Liste, `liste-coches` et `liste-numerotee`. Sans classe, une liste a puces
   prend le premier habillage : les pages deja ecrites en profitent sans avoir a
   etre reprises une a une.

   La puce est un pseudo-element et non un `::marker` : le marqueur n'accepte ni
   dimension ni decalage, or les trois formes n'ont ni la meme taille ni le meme
   appui sur la ligne. `list-style: none` libere la place, le retrait du `ul`
   reserve la gouttiere et la puce s'y pose en absolu.

   La portee est celle du contenu editorial : `wp-block-list` est pose par le
   bloc Liste, et `.builder .rte` couvre les pages restees au constructeur ACF.
   Les listes des composants - benefices d'une carte produit, liens du pied de
   page - n'ont ni l'une ni l'autre. */

.wp-block-herbolistique-section :is(ul.wp-block-list, ul.liste-puces, ul.liste-coches),
.builder .rte ul {
  list-style: none;
  padding-left: 26px;
  margin: 0 0 16px;
}
.wp-block-herbolistique-section :is(ul.wp-block-list, ul.liste-puces, ul.liste-coches) > li,
.builder .rte ul > li { position: relative; }

/* 1. Pastille ronde. L'appui en `em` suit la taille du texte : sur une liste
      reduite la puce reste calee sur la premiere ligne. */
.wp-block-herbolistique-section :is(ul.wp-block-list, ul.liste-puces) > li::before,
.builder .rte ul > li::before {
  content: "";
  position: absolute;
  left: -18px;
  top: .58em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
}

/* 2. Coche. Deux bords d'une boite vide tournes d'un quart de tour : pas de
      police d'icones a charger, et le trait suit la couleur de la charte. */
.wp-block-herbolistique-section ul.liste-coches > li::before,
.builder .rte ul.liste-coches > li::before {
  content: "";
  position: absolute;
  left: -20px;
  top: .3em;
  width: 6px;
  height: 11px;
  border-radius: 0;
  background: none;
  border-right: 2px solid var(--green);
  border-bottom: 2px solid var(--green);
  transform: rotate(45deg);
}

/* 3. Numerotation en pastille. Le compteur CSS plutot que le numero natif :
      lui seul peut etre habille. */
.wp-block-herbolistique-section ol.liste-numerotee,
.builder .rte ol.liste-numerotee {
  list-style: none;
  counter-reset: puce-num;
  padding-left: 36px;
  margin: 0 0 16px;
}
.wp-block-herbolistique-section ol.liste-numerotee > li,
.builder .rte ol.liste-numerotee > li { position: relative; counter-increment: puce-num; }
.wp-block-herbolistique-section ol.liste-numerotee > li::before,
.builder .rte ol.liste-numerotee > li::before {
  content: counter(puce-num);
  position: absolute;
  left: -32px;
  top: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  font-family: var(--poppins);
  font-size: 12px;
  font-weight: 600;
  line-height: 24px;
  text-align: center;
}

/* Sur un aplat vert, une puce verte disparait. Meme poids que les regles
   ci-dessus, d'ou la position apres elles. */
.band-forest :is(ul.wp-block-list, ul.liste-puces) > li::before,
.node.theme-darkgreen .rte ul > li::before { background: #fff; }
.band-forest ul.liste-coches > li::before,
.node.theme-darkgreen .rte ul.liste-coches > li::before {
  background: none;
  border-right-color: #fff;
  border-bottom-color: #fff;
}
.band-forest ol.liste-numerotee > li::before,
.node.theme-darkgreen .rte ol.liste-numerotee > li::before { background: #fff; color: var(--green); }

/* Images posees dans une section ou une colonne. */
.wp-block-herbolistique-section figure.wp-block-image { margin: 0 0 20px; }
.wp-block-herbolistique-section figure.wp-block-image:last-child { margin-bottom: 0; }
.wp-block-herbolistique-section figure.wp-block-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}

/* ------------------------------------------------- fil conducteur

   LE CLIENT NE DEMANDE QU'UNE CHOSE PAR SON NOM sur la page RSE : « joli fil
   conducteur ». C'est ce trait, repris de la page francaise - un filet vertical
   jaune termine par une pointe verte, pose entre deux sections. Il ne dit rien
   de plus que l'enchainement des titres, mais il le MONTRE : la page se lit
   comme une suite d'etapes et non comme une pile de bandes.

   IL NE S'AJOUTE PAS A L'ESPACE, IL L'OCCUPE. Une section respire de 80 px en
   haut comme en bas : un trait de 76 px pose entre deux sections aurait porte
   l'ecart a 236 px, et la page se serait disloquee la ou elle devait se lier.
   Les marges negatives le font tenir DANS les 160 px qui existent deja - il
   reste 42 px d'air de part et d'autre, et les deux sections se rapprochent
   meme de 20 px.

   Les couleurs viennent des jetons de la charte : le filet reprend le jaune
   Herbolistique, la pointe le vert signature. Aucune valeur en dur. */

.fil {
  position: relative;
  /* Au-dessus du fond des bandes : le trait traverse souvent la limite entre
     deux couleurs, et disparaitrait sous l'aplat de la seconde. */
  z-index: 1;
  width: 2px;
  height: 76px;
  margin: -46px auto;
  background: var(--yellow);
}

/* La pointe : un carre tourne d'un quart de tour plutot qu'un triangle en
   `border`, qui aurait fige sa couleur dans quatre declarations. */
.fil::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 9px;
  height: 9px;
  background: var(--green);
  transform: translateX(-50%) rotate(45deg);
}

/* Derniere marche avant la conclusion : meme trait, pointe plus large. */
.fil.is-grand::after {
  width: 17px;
  height: 17px;
  bottom: -4px;
}

/* Un fil pose DANS une section, et non entre deux, n'a pas de marge de section
   a occuper : il reprend alors un ecart normal. */
.wp-block-herbolistique-section .fil { margin: 22px auto; }

/* LE FIL DOIT TOUCHER LA SORTIE DU SCHEMA.

   Le schema dessine son trait de sortie a sa propre limite basse, mais la
   section qui le porte ajoute 80 px de marge en dessous, et le fil qui suit
   n'en remonte que 46 : il restait 34 px de vide entre le trait horizontal et
   le trait vertical. Sur un fil conducteur, cette coupure se voit d'autant plus
   qu'elle est exactement ce que le trait sert a eviter.

   On annule la marge restante plutot que de retirer celle de la section : le
   remplissage bas sert encore aux sections de schema qui ne sont PAS suivies
   d'un fil. */
.wp-block-herbolistique-section:has(.schema) + .fil { margin-top: -80px; }

@media (max-width: 860px) {
  /* Les sections tombent a 52 px de marge : le trait se raccourcit pour tenir
     dans les 104 px disponibles sans coller aux textes. */
  .fil { height: 54px; margin: -30px auto; }
}

/* ------------------------------------------------- chiffres qui se lisent

   DEUX RETOURS DU CLIENT SUR LA MEME CAUSE : « on voit tres peu les chiffres,
   changer l'affichage des ronds verts ». Le rond vert de `herbolistique/step`
   est dessine pour un rang d'etape, un ou deux caracteres. La page RSE y avait
   pose « 1 273 t », « 120 000 », « 1,7 M » : le navigateur reduisait le texte
   jusqu'a le rendre illisible, et la couleur du disque ne laissait qu'un point
   vert.

   Deux reponses, selon ce que le chiffre raconte :

   1. une EVOLUTION (2022 vs 2024) devient un panneau a pastilles : la pastille
      ne porte plus que l'annee - deux a quatre caracteres, ce pour quoi un
      disque est fait - et la valeur redescend dans la phrase, au corps du
      texte, en gras ;
   2. une LISTE D'EQUIVALENCES devient des cartes ou le nombre est ecrit en
      toutes lettres, sans disque. */

/* 1. Panneau a pastilles ------------------------------------------------- */

.pastilles {
  max-width: 660px;
  margin: 0 auto;
  padding: 26px 30px 28px;
  background: #fffdfa;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.pastilles > h3 {
  font-family: var(--poppins);
  font-size: var(--titre-4);
  font-weight: 600;
  text-align: center;
  margin: 0 0 22px;
}

.pastille-ligne { display: flex; align-items: center; gap: 16px; }
.pastille-ligne + .pastille-ligne { margin-top: 16px; }

/* `flex: 0 0 auto` ET une largeur fixe : sans cela une phrase longue ecrase la
   pastille en ovale, et les deux lignes du panneau ne s'alignent plus. */
.pastille {
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--green-pale);
  color: var(--green);
  font-family: var(--poppins);
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pastille-ligne p { margin: 0; font-size: 15.5px; line-height: 1.6; }
.pastille-ligne p strong { color: var(--ink); }

/* 2. Cartes de chiffres cles --------------------------------------------- */

/* DEUX COLONNES ETROITES, ET NON CINQ LARGES. La page se lit sur un axe
   vertical - c'est tout le propos du fil conducteur : une rangee de cinq
   cartes de 250 px la coupe en deux et rompt la descente. */
.steps-3.is-chiffres {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  max-width: 660px;
  margin: 0 auto;
}

/* Un nombre impair de cartes laisse la derniere seule : centree, elle ferme la
   colonne au lieu de pencher a gauche. */
.steps-3.is-chiffres > .step-card:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  width: calc(50% - 9px);
  margin: 0 auto;
}

.is-chiffres .step-card {
  display: flex;
  flex-direction: column;
  padding: 20px 18px;
}

/* Le disque disparait : plus de fond, plus de rayon, plus de largeur imposee.
   Le nombre devient ce qu'il est, un nombre ecrit. */
.is-chiffres .step-card .num {
  display: block;
  width: auto;
  height: auto;
  margin: 0 0 6px;
  background: none;
  border-radius: 0;
  color: var(--green);
  font-size: 27px;
  line-height: 1.15;
}

.is-chiffres .step-card h3 { font-size: 15px; margin-bottom: 10px; }

/* `margin-top: auto` cale toutes les sources sur le bas de leur carte, quelle
   que soit la longueur de l'intitule : la rangee garde une ligne de pied. */
.is-chiffres .step-card p {
  margin-top: auto;
  font-size: 12px;
  color: var(--grey-2);
}

@media (max-width: 640px) {
  .pastilles { padding: 20px 18px 22px; }
  .pastille-ligne { gap: 12px; }
  .pastille { width: 46px; height: 46px; font-size: 13px; }
}

/* ------------------------------------------------- schema a encadres

   Le perimetre du Bilan Carbone, montre plutot qu'enumere : six encadres
   parcourus en serpentin, relies par le meme filet jaune que le fil conducteur.
   Repris de la page francaise, dont le client dit preferer la mise en page.

   LES LIAISONS SE DEDUISENT DU RANG, elles ne sont pas dans le balisage. Le
   site d'origine pose a la main une classe sur chaque case pour tracer ses
   traits : une case ajoutee oblige alors a rejouer tout le jeu de classes, et
   une case retiree laisse un trait qui ne mene nulle part. Ici :

     - toute case de la colonne de gauche tend un trait vers sa voisine ;
     - la descente change de bord a chaque rangee, puisque le parcours change de
       sens : a droite apres une rangee lue vers la droite (rangs 2, 6, 10),
       a gauche apres une rangee lue vers la gauche (rangs 3, 7, 11) ;
     - la derniere case descend puis rejoint l'axe central, ou le fil conducteur
       reprend la descente.

   Les deux ecarts de la grille sont des variables : les traits de liaison les
   reprennent, et un ecart corrige n'en laisse aucun dans le vide. */

.schema {
  --schema-ecart: 64px;   /* entre les deux colonnes */
  --schema-saut: 56px;    /* d'une rangee a la suivante, et sortie du schema */

  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--schema-ecart);
  row-gap: var(--schema-saut);
  max-width: 660px;
  /* La marge haute laisse passer le medaillon de la premiere rangee, qui
     deborde de l'encadre ; la marge basse reserve la sortie du serpentin. */
  margin: 34px auto 0;
  padding-bottom: var(--schema-saut);
}

.schema-case {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 104px;
  padding: 26px 18px 18px;
  background: #fffdfa;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-align: center;
}

.schema-case p {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink);
}

/* Le medaillon chevauche le bord haut de l'encadre : il signale la case sans
   lui prendre de hauteur de lecture. Son fond vert pale le detache aussi bien
   du creme que des bandes colorees, ce qu'une icone posee a nu ne ferait pas. */
.schema-ic {
  position: absolute;
  top: -21px;
  left: 50%;
  transform: translateX(-50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--green-pale);
  color: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
}

.schema-ic svg { width: 21px; height: 21px; }

/* Liaison horizontale : de la colonne de gauche vers sa voisine. */
.schema > *:nth-child(odd):not(:last-child)::before {
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  width: var(--schema-ecart);
  height: 2px;
  background: var(--yellow);
}

/* Descente d'une rangee a la suivante, cote droit puis cote gauche. */
.schema > *:nth-child(4n + 2)::after,
.schema > *:nth-child(4n + 3)::after,
.schema > *:last-child::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 2px;
  height: var(--schema-saut);
  background: var(--yellow);
  transform: translateX(-50%);
}

/* Sortie : le trait quitte la derniere case et rejoint l'axe de la page. Avec
   deux colonnes egales, le centre d'une colonne est a un quart de la largeur
   du centre du schema, plus le quart de l'ecart. */
.schema::after {
  content: "";
  position: absolute;
  bottom: 0;
  height: 2px;
  width: calc(25% + var(--schema-ecart) / 4);
  background: var(--yellow);
}

.schema:has(> *:last-child:nth-child(even))::after { left: 50%; }
.schema:has(> *:last-child:nth-child(odd))::after { right: 50%; }

/* Sur une colonne, le serpentin n'a plus de sens : tout descend en ligne. */
@media (max-width: 720px) {
  .schema {
    grid-template-columns: 1fr;
    max-width: 380px;
    --schema-saut: 42px;
  }

  .schema > *:nth-child(odd):not(:last-child)::before { content: none; }

  .schema > *:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    width: 2px;
    height: var(--schema-saut);
    background: var(--yellow);
    transform: translateX(-50%);
  }

  /* La derniere case descend droit sur l'axe : pas de coude a tracer. */
  .schema::after { display: none; }
}

/* ------------------------------------------------- section centree

   Reglage « Texte centre » du bloc Section. La page RSE se lit de haut en bas,
   le long du fil conducteur : un paragraphe au fer a gauche sous un titre
   centre y ouvre un decrochage a chaque section.

   LES ELEMENTS DE LISTE RESTENT AU FER A GAUCHE, seul le bloc de liste est
   centre : une puce suivie de deux lignes centrees ne se relit plus, la seconde
   ligne ne revenant pas sous la premiere. `width: fit-content` ramene chaque
   element a sa mesure et la marge automatique le pose sur l'axe. */

.wp-block-herbolistique-section.is-centre .container > p,
.wp-block-herbolistique-section.is-centre .container > .wp-block-heading {
  text-align: center;
}

.wp-block-herbolistique-section.is-centre .container > :is(ul, ol) > li {
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* ------------------------------------------------- formulaires d'extension

   Caldera Forms sur la page contact, Ninja Forms sur les pages d'inscription.
   Les deux apportent leur propre feuille de style, batie sur une grille
   Bootstrap qui ne connait ni les couleurs ni les rayons de la maquette. On ne
   la remplace pas - ce serait se rendre dependant de leur balisage - on
   reprend seulement les champs, qui sont la partie visible. */

.wp-block-herbolistique-section .caldera-grid .form-group { margin-bottom: 18px; }

.wp-block-herbolistique-section .caldera-grid label,
.nf-form-cont .nf-field-label label {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
  margin-bottom: 7px;
}

.wp-block-herbolistique-section .caldera-grid .form-control,
.nf-form-cont .nf-field-element input:not([type="button"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.nf-form-cont .nf-field-element textarea,
.nf-form-cont .nf-field-element select {
  width: 100%;
  /* `height: auto` indispensable : la grille de Caldera est batie sur
     Bootstrap 3, qui fixe une hauteur de 34 px. Sans cela le champ garde
     cette hauteur et le remplissage n'a aucun effet visible. */
  height: auto;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.4;
  color: var(--ink);
  box-shadow: none;
}
.wp-block-herbolistique-section .caldera-grid .form-control:focus,
.nf-form-cont .nf-field-element input:focus,
.nf-form-cont .nf-field-element textarea:focus {
  outline: none;
  border-color: var(--green);
}

.wp-block-herbolistique-section .caldera-grid textarea,
.nf-form-cont .nf-field-element textarea { min-height: 150px; resize: vertical; }

/* Le bouton d'envoi reprend l'aspect des boutons du site.

   Caldera lui donne la classe `Button`, heritee de l'ancien theme, et non la
   classe `btn` de sa propre grille : c'est bien celle-la qu'il faut viser. */
.wp-block-herbolistique-section .caldera-grid input[type="submit"],
.wp-block-herbolistique-section .caldera-grid .Button,
.wp-block-herbolistique-section .caldera-grid .btn,
.nf-form-cont .nf-field-element input[type="button"],
.nf-form-cont .nf-field-element input[type="submit"] {
  display: inline-block;
  padding: 12px 26px;
  border: 1px solid var(--green);
  border-radius: var(--radius-lg);
  background: var(--green);
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .15s;
}
.wp-block-herbolistique-section .caldera-grid input[type="submit"]:hover,
.wp-block-herbolistique-section .caldera-grid .Button:hover,
.wp-block-herbolistique-section .caldera-grid .btn:hover,
.nf-form-cont .nf-field-element input[type="button"]:hover,
.nf-form-cont .nf-field-element input[type="submit"]:hover { opacity: .88; }

/* ------------------------------------------------- Ninja Forms, la suite

   Les regles ci-dessus ne visaient que les champs. Le reste du formulaire -
   listes, barre d'etape, boutons de navigation, choix multiples - restait a
   l'apparence de l'extension. Sur le questionnaire Herbolistimed, qui n'est
   fait que de cela, le resultat n'avait plus rien du site.

   ON NE TOUCHE PAS AU BALISAGE. Ninja Forms le genere, et il change d'une
   version a l'autre : tout se regle depuis la feuille. */

/* LES PUCES N'ONT RIEN A FAIRE LA.

   L'extension range ses champs dans des `ul` : chaque choix et le bouton
   « Suivant » se retrouvaient precedes d'une puce, comme s'il s'agissait d'une
   liste a lire.

   DEUX PUCES A ETEINDRE, PAS UNE. Le marqueur natif du navigateur, et la
   pastille verte que le theme pose en `::before` sur les listes editoriales -
   une mesure du rendu montre un disque de 7 px en `rgb(9, 123, 53)` la ou la
   liste n'a aucune classe. La seconde regle reprend la portee de celle du
   theme pour l'emporter par l'ordre, sans `!important`. */
.nf-form-cont ul,
.nf-form-cont ol,
.nf-form-cont li {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}

/* La portee est calquee sur celle du theme - deux classes et deux elements -
   pour l'emporter par l'ordre de declaration, ce fichier posant ses regles de
   formulaire apres celles des listes editoriales. */
.nf-form-cont .nf-form-content ul > li::before,
.nf-form-cont .nf-form-content ol > li::before,
.nf-form-cont .nf-form-content ul > li::after,
.nf-form-cont .nf-form-content ol > li::after { content: none; }

/* Barre d'avancement : un filet, pas un pave. Elle mesurait 50 px de haut sur
   un fond gris etranger a la palette, et s'affichait vide au premier ecran -
   une bande grise sans raison apparente. */
.nf-form-cont .nf-progress-container {
  height: 4px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
  margin: 0 0 34px;
}

.nf-form-cont .nf-progress {
  height: 100%;
  background: var(--green);
  transition: width .3s ease;
}

/* Boutons de navigation d'un formulaire a etapes.

   LA PORTEE EST CALQUEE SUR CELLE DE L'EXTENSION. Sa propre regle est
   `.nf-form-content input[type="button"]` : un selecteur de classe seul, meme
   plus long, perd contre elle a cause du selecteur d'attribut. On reprend donc
   la meme forme avec une classe de plus, ce qui suffit a l'emporter sans
   recourir a `!important` - lequel se paie ensuite a chaque surcharge. */
.nf-form-cont .nf-form-content input.nf-next,
.nf-form-cont .nf-form-content input.nf-previous,
.nf-form-cont .nf-form-content input[type="button"],
.nf-form-cont .nf-form-content input[type="submit"],
.nf-form-cont .nf-form-content button {
  display: inline-block;
  padding: 12px 26px;
  border: 1px solid var(--green);
  border-radius: var(--radius-lg);
  background: var(--green);
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .15s;
}

/* « Precedent » est un retour en arriere, pas l'action attendue : il se pose
   en retrait pour ne pas se disputer l'oeil avec « Suivant ». */
.nf-form-cont .nf-form-content input.nf-previous {
  background: transparent;
  color: var(--green);
}

.nf-form-cont .nf-form-content input.nf-next:hover,
.nf-form-cont .nf-form-content input.nf-previous:hover,
.nf-form-cont .nf-form-content input[type="button"]:hover,
.nf-form-cont .nf-form-content input[type="submit"]:hover,
.nf-form-cont .nf-form-content button:hover { opacity: .88; background: var(--green); }

/* Choix simples et multiples : la case reprend le vert du site, et le libelle
   devient cliquable sur toute sa ligne. */
.nf-form-cont .nf-field-element input[type="radio"],
.nf-form-cont .nf-field-element input[type="checkbox"] {
  width: auto;
  height: auto;
  margin: 0 10px 0 0;
  accent-color: var(--green);
  vertical-align: middle;
}

.nf-form-cont .nf-field-element label {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-weight: 400;
  cursor: pointer;
  padding: 5px 0;
}

/* Un intitule de champ reste en gras : il annonce, il ne se choisit pas. */
.nf-form-cont .nf-field-label label { font-weight: 600; }

/* De l'air entre les questions. L'extension les colle les unes aux autres, ce
   qui, sur un questionnaire de sante, donne un mur de cases. */
.nf-form-cont .nf-field-container { margin-bottom: 26px; }

/* ----- Les questions a cocher, une par ligne -----

   L'extension range ce type de champ en deux colonnes : l'intitule a GAUCHE,
   aligne a DROITE dans 372 px, et la case seule dans 567 px a cote. Mesure
   faite sur le questionnaire Herbolistimed. Trois consequences :

   - une question de quatre mots passe sur trois lignes, alors que la moitie
     droite de l'ecran reste vide ;
   - le texte, aligne a droite, change de point de depart a chaque ligne :
     l'oeil doit le rechercher a chaque question ;
   - la case arrive APRES la question, a l'oppose du sens de lecture.

   On remet donc l'ordre naturel sans toucher au balisage : la case d'abord, la
   question ensuite, sur toute la largeur. `order` suffit, l'extension continue
   de produire ce qu'elle veut.

   LE CONTENEUR DE FLEX EST `.field-wrap`, DEUX CRANS PLUS BAS. L'arbre reel
   est `.nf-field-container > .nf-field > .field-wrap > (.nf-field-label,
   .nf-field-element)` : poser le flex sur l'un des deux niveaux superieurs
   laisse l'intitule et la case exactement au meme endroit, ce que la mesure a
   montre deux fois avant que je n'aille lire le balisage. */
.nf-form-cont .nf-form-content .checkbox-container.label-left,
.nf-form-cont .nf-form-content .listcheckbox-container.label-left {
  margin-bottom: 8px;
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  transition: border-color .15s;
}

.nf-form-cont .nf-form-content .checkbox-container.label-left .field-wrap,
.nf-form-cont .nf-form-content .listcheckbox-container.label-left .field-wrap {
  display: flex;
  align-items: flex-start;
  gap: 14px;

  /* `nowrap` EST INDISPENSABLE. L'extension laisse le retour a la ligne ouvert
     et donne une largeur au libelle : des qu'une question depasse une ligne,
     les deux colonnes ne tiennent plus cote a cote et la case saute AU-DESSUS
     du texte. Constate sur la question la plus longue du questionnaire. */
  flex-wrap: nowrap;
}

.nf-form-cont .nf-form-content .checkbox-container.label-left:hover,
.nf-form-cont .nf-form-content .listcheckbox-container.label-left:hover {
  border-color: var(--green);
}

.nf-form-cont .nf-form-content .checkbox-container.label-left .field-wrap .nf-field-element,
.nf-form-cont .nf-form-content .listcheckbox-container.label-left .field-wrap .nf-field-element {
  order: 0;
  flex: 0 0 auto;
  width: auto;
  /* La case s'aligne sur la premiere ligne du texte, pas sur le milieu d'une
     question de trois lignes. */
  margin-top: 2px;
}

.nf-form-cont .nf-form-content .checkbox-container.label-left .field-wrap .nf-field-label,
.nf-form-cont .nf-form-content .listcheckbox-container.label-left .field-wrap .nf-field-label {
  order: 1;
  flex: 1 1 auto;
  width: auto;
  /* Sans `min-width: 0`, un enfant de flex refuse de descendre sous la largeur
     de son contenu : le texte pousserait la case hors de la carte. */
  min-width: 0;
  margin: 0;
  text-align: left;
}

/* Une question n'est pas un intitule de champ : elle se lit, elle ne s'annonce
   pas. Le gras des autres libelles la rendrait plus lourde que la reponse. */
.nf-form-cont .nf-form-content .checkbox-container.label-left .nf-field-label label,
.nf-form-cont .nf-form-content .listcheckbox-container.label-left .nf-field-label label {
  font-weight: 400;
  line-height: 1.45;
  cursor: pointer;
}

/* CASES ET BOUTONS RADIO GARDENT LEUR DESSIN NATIF.

   La regle des champs de saisie ci-dessus leur posait une bordure claire et un
   fond blanc : sur une carte blanche, la case devenait litteralement invisible,
   et c'est ce que montrait la capture avant correction. Le navigateur sait les
   dessiner ; on ne lui demande que la taille et la couleur d'accent. */
.nf-form-cont .nf-form-content input[type="checkbox"],
.nf-form-cont .nf-form-content input[type="radio"] {
  appearance: auto;
  -webkit-appearance: auto;
  width: 18px;
  height: 18px;
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  flex: 0 0 auto;
  accent-color: var(--green);

  /* L'extension masque la vraie case (`opacity: 0`) et en dessine une en
     pseudo-element sur le LIBELLE. Ce dessin restait donc a la fin du texte,
     a l'oppose de la case reelle qu'on vient de remettre a gauche - on voyait
     un carre a droite et rien a gauche. On rend la vraie case et on eteint le
     decor : une case native se coche au clavier et se lit par les lecteurs
     d'ecran, ce qu'un carre en CSS ne fait pas. */
  opacity: 1;
}

.nf-form-cont .nf-form-content .checkbox-container.label-left .nf-field-label label::before,
.nf-form-cont .nf-form-content .checkbox-container.label-left .nf-field-label label::after,
.nf-form-cont .nf-form-content .listcheckbox-container.label-left .nf-field-label label::before,
.nf-form-cont .nf-form-content .listcheckbox-container.label-left .nf-field-label label::after {
  content: none;
}

.nf-form-cont .nf-error-msg { color: var(--rouge, #c0392b); font-size: 13.5px; }

/* L'asterisque des champs obligatoires, en rouge sur fond creme, tirait l'oeil
   plus que les intitules eux-memes. */
.wp-block-herbolistique-section .caldera-grid .field_required { color: var(--grey-2); font-weight: 400; }

/* Encadre creme : ses titres suivent la meme echelle que le reste, mais sans
   le filet vert, qui alourdirait un panneau deja delimite par son fond. */
.contact-side h2.wp-block-heading { font-size: 21px; margin: 0 0 16px; }
.contact-side h2.wp-block-heading::after { display: none; }
.contact-side h3.wp-block-heading { font-size: 15px; text-transform: uppercase; letter-spacing: .04em; margin: 22px 0 6px; }
.contact-side p { font-size: 15px; line-height: 1.6; margin: 0; }
.contact-side a { color: var(--green); font-weight: 600; }

/* Décompte sous la pagination du blog : « Affichage 1 à 9 sur 71 articles ». */
.post-decompte { text-align: center; color: var(--grey); font-size: 14.5px; margin: 18px 0 0; }

/* Carte d'article : la maquette ne met pas de couleur sur le titre, mais le
   survol doit se voir, la carte entière étant un lien. */
.post h3 { transition: color .15s; }
.post:hover h3 { color: var(--green); }
.post:hover .ph img { transform: scale(1.04); }
.post .ph img { transition: transform .45s ease; }

/* Le visuel de l'article suit la largeur de lecture, comme le texte. */
.article > img { width: 100%; height: auto; }
.article .meta a { color: inherit; }
.article .meta a:hover { color: var(--green); }

/* ------------------------------------------------ en-tete : largeur juste --

   MESURE, PAS ESTIMATION. L'en-tete reclame 1217px de contenu (logo 225 +
   navigation 811 + icones 181) et n'en dispose que de 1180 a 1280 : les icones
   sortaient de 35px et posaient une barre de defilement horizontale sur tout
   le site.

   Deux reglages, chacun a sa plage :

   1. entre 1280 et 1400, resserrer l'ecart des entrees de 22 a 12px
      rend 50px - il en faut 37, la marge couvre les arrondis ;
   2. en dessous de 1280, aucun resserrement raisonnable ne suffit (il
      manquerait encore 77px a 1200, 265px a 1000). La navigation se replie
      donc dans le menu deroulant, comme elle le faisait deja sous 980px. */

@media (max-width: 1400px) and (min-width: 1280px) {
  .mainnav { gap: 12px; }
}

@media (max-width: 1279px) {
  .mainnav,
  .header-icons .search-lbl,
  .hide-mobile { display: none; }

  .burger { display: block; font-size: 24px; }
}