/* ==========================================================================
   YONA COSMETICS : la couche WordPress et WooCommerce.

   Le moteur (styles.css) habille le site que nous écrivons, à l'identique de
   l'aperçu validé. Ce fichier habille tout ce que le CMS écrit tout seul et
   que l'aperçu n'avait pas : la grille de la boutique, le bouton d'ajout au
   panier, les avis de la boutique, le panier, la commande, le compte, le
   contenu d'une page libre, le formulaire de recherche.
   Aucune valeur esthétique en dur : tout vient de tokens.css.

   Deux pièges connus, traités ici plutôt que découverts en production :

   1. SPÉCIFICITÉ. `.woocommerce ul.products` bat `ul.products`. Chaque règle
      de grille est donc écrite aux deux niveaux, et la valeur CALCULÉE est
      contrôlée à la recette, pas la présence de la règle dans le fichier.
   2. LE CLEARFIX. La feuille de WooCommerce pose `ul.products::before` et
      `::after` en `display:table` : dans une grille, ces deux pseudo-éléments
      deviennent deux cellules fantômes qui décalent toute la rangée. On les
      éteint explicitement.

   Le panier et la commande sont rendus par les blocs WooCommerce (React).
   Leurs états ne se peignent pas en `border` : le cadre de l'option cochée
   est un `box-shadow: inset`, le cadre de survol un `::after` en
   `currentColor`. On corrige donc là où l'état est réellement peint.
   ========================================================================== */

/* ==========================================================================
   1. La grille de la boutique et des catégories
   ========================================================================== */

ul.products,
.woocommerce ul.products,
.woocommerce-page ul.products{
  display:grid;grid-template-columns:repeat(2,1fr);gap:var(--e6) var(--e4);
  margin:0;padding:0;list-style:none;
}
@media (min-width:780px){
  ul.products,
  .woocommerce ul.products,
  .woocommerce-page ul.products{grid-template-columns:repeat(3,1fr);gap:var(--e6) var(--e5)}
}
/* les deux cellules fantômes du clearfix de WooCommerce */
ul.products::before,ul.products::after,
.woocommerce ul.products::before,.woocommerce ul.products::after,
.woocommerce-page ul.products::before,.woocommerce-page ul.products::after{
  content:none;display:none;
}
ul.products li.product,
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product{
  width:auto;float:none;margin:0;clear:none;
  display:flex;flex-direction:column;position:relative;
}
/* la carte porte aussi .carte : le moteur l'habille déjà, on ne redit rien */
.woocommerce ul.products li.product .carte__nom,
.woocommerce ul.products li.product .prix{margin-left:0}

/* ==========================================================================
   2. Boutons WooCommerce
   WooCommerce peint ses boutons `.alt` avec des sélecteurs plus spécifiques
   que les nôtres : on ne dépend jamais de l'ordre des feuilles.

   `:not(.btn)` partout : dès qu'un bouton porte NOTRE classe, c'est notre
   système de boutons qui gouverne, y compris ses variantes claires posées
   sur un fond sombre. Sans cette exclusion, `.woocommerce a.button` (0,2,1)
   repeindrait un `.btn.btn--clair` (0,2,0) en encre sur carmin.
   ========================================================================== */

.woocommerce a.button:not(.btn),.woocommerce button.button:not(.btn),
.woocommerce input.button:not(.btn),
.woocommerce a.button.alt:not(.btn),.woocommerce button.button.alt:not(.btn),
.woocommerce input.button.alt:not(.btn),
.woocommerce #respond input#submit,
.woocommerce button.button.alt.disabled:not(.btn),
a.button:not(.btn),button.button:not(.btn),input.button:not(.btn),
.wc-block-components-button:not(.is-link){
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  min-height:54px;padding:0 var(--e5);
  border:1px solid var(--encre);border-radius:var(--r-0);
  background:var(--encre);color:var(--ivoire);
  font-family:var(--f-texte);font-size:var(--t-menu);font-weight:var(--g-fort);
  letter-spacing:.005em;line-height:1.3;text-align:center;text-decoration:none;
  text-transform:none;cursor:pointer;
  transition:background var(--duree-court) var(--courbe),
    color var(--duree-court) var(--courbe),
    border-color var(--duree-court) var(--courbe);
}
.woocommerce a.button:not(.btn):hover,.woocommerce button.button:not(.btn):hover,
.woocommerce input.button:not(.btn):hover,
.woocommerce a.button.alt:not(.btn):hover,.woocommerce button.button.alt:not(.btn):hover,
.woocommerce input.button.alt:not(.btn):hover,
a.button:not(.btn):hover,button.button:not(.btn):hover,input.button:not(.btn):hover,
.wc-block-components-button:not(.is-link):hover{
  background:var(--bleu-nuit);border-color:var(--bleu-nuit);color:var(--ivoire);
}
.woocommerce a.button.disabled,.woocommerce button.button:disabled,
.woocommerce button.button.alt.disabled,
.wc-block-components-button:not(.is-link):disabled{opacity:.45;cursor:not-allowed}

/* la carte de la boucle : bouton pleine largeur, comme en aperçu */
.carte .button,.carte .added_to_cart{width:100%;margin-top:var(--e3);position:relative;z-index:1}
.carte .button.loading{opacity:.6}
.carte .added_to_cart{
  min-height:46px;padding:0 var(--e4);font-size:var(--t-petit);
  background:transparent;color:var(--encre);border-color:var(--filet-fort);
}
.carte .added_to_cart:hover{background:var(--encre);color:var(--ivoire);border-color:var(--encre)}
.carte .button.add_to_cart_button{min-height:46px;padding:0 var(--e4);font-size:var(--t-petit)}

/* --------------------------------------------------------------------------
   2 bis. Nos `.btn` dans les pages WooCommerce (correctif du 11/09/2026)
   L'exclusion `:not(.btn)` ci-dessus empêche NOTRE habillage de repeindre un
   `.btn`. La feuille native de WooCommerce, elle, n'exclut rien :
   `.woocommerce a.button` (0,2,1 sous `:where()`) et
   `.woocommerce ul.products li.product .button` (0,3,2) battent `.btn--plein`
   (0,1,0). Mesuré le 11/09 : les 30 boutons « Ajouter » de la boutique, des
   trois gammes et du bloc « Ce qui va avec » sortaient gris lavande, texte
   gris, le mot décalé de 29 px sur mobile et de 153 px sur ordinateur.
   Présent depuis la V4 : la recette contrôlait la présence du bouton, pas sa
   couleur calculée. On rétablit le système `.btn` de styles.css à une
   spécificité qui gagne, variante par variante. Toute nouvelle variante de
   `.btn` s'ajoute ici aussi.
   -------------------------------------------------------------------------- */
.woocommerce a.button.btn,.woocommerce button.button.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  min-height:54px;margin:0;padding:0 var(--e5);
  border:1px solid transparent;border-radius:var(--r-0);
  font-size:var(--t-menu);font-weight:var(--g-fort);letter-spacing:.005em;line-height:inherit}
.woocommerce a.button.btn--petit,.woocommerce button.button.btn--petit{min-height:46px;padding:0 var(--e4);font-size:var(--t-petit)}
.woocommerce a.button.btn--plein,.woocommerce button.button.btn--plein{background:var(--encre);color:var(--ivoire)}
.woocommerce a.button.btn--plein:hover,.woocommerce button.button.btn--plein:hover{background:var(--bleu-nuit);color:var(--ivoire)}
.woocommerce a.button.btn--fil,.woocommerce button.button.btn--fil{background:transparent;color:var(--encre);border-color:var(--filet-fort)}
.woocommerce a.button.btn--fil:hover,.woocommerce button.button.btn--fil:hover{background:var(--encre);color:var(--ivoire);border-color:var(--encre)}
.woocommerce a.button.btn--clair,.woocommerce button.button.btn--clair{background:var(--blanc);color:var(--encre)}
.woocommerce a.button.btn--clair:hover,.woocommerce button.button.btn--clair:hover{background:var(--encre);color:var(--blanc)}
.woocommerce a.button.btn--fil-clair,.woocommerce button.button.btn--fil-clair{background:transparent;color:var(--blanc);border-color:var(--filet-clair)}
.woocommerce a.button.btn--fil-clair:hover,.woocommerce button.button.btn--fil-clair:hover{background:var(--blanc);color:var(--encre);border-color:var(--blanc)}
.woocommerce ul.products li.product .button.btn{display:flex;width:100%;margin-top:var(--e3)}
/* « Ce qui va avec » : ses cartes ne portent pas `.product`, le `margin:0` ci-dessus y
   collait le bouton sous l'accroche (0 px mesuré le 17/09, 16 px partout ailleurs). */
.woocommerce .carte .button.btn{display:flex;width:100%;margin-top:var(--e3)}

/* ==========================================================================
   3. La fiche produit : quantité et ajout au panier
   ========================================================================== */

.fiche form.cart{display:flex;flex-wrap:wrap;gap:var(--e2);margin:var(--e4) 0 0;align-items:stretch}
/* Dans la zone d'achat, le formulaire prend sa propre ligne (quantité puis
   bouton), et WhatsApp la ligne suivante : rien ne s'intercale entre le prix
   et le bouton, et rien ne se retrouve à 90 px de large sur un petit écran. */
.fiche__achat form.cart{flex:1 1 100%;margin:0}
.fiche__achat>.btn{flex:1 1 100%}
.fiche form.cart .quantity{display:flex;align-items:stretch}
.fiche .quantity input.qty,
.woocommerce .quantity input.qty{
  width:5.5rem;min-height:54px;padding:0 .5rem;text-align:center;
  border:1px solid var(--filet-fort);border-radius:var(--r-0);
  background:var(--ivoire-clair);color:var(--encre);
  font-family:var(--f-texte);font-size:var(--t-menu);font-weight:var(--g-fort);
}
.fiche form.cart .single_add_to_cart_button{flex:1 1 15rem}
.fiche .woocommerce-variation-add-to-cart{display:flex;gap:var(--e2);flex-wrap:wrap;width:100%}
.fiche__achat .btn{flex:1 1 215px}
.fiche__stock{margin-top:var(--e3);font-size:var(--t-petit);color:var(--encre-douce)}
.fiche__stock.est-rupture{color:var(--carmin);font-weight:var(--g-fort)}

/* ==========================================================================
   4. Avis de la boutique (messages WooCommerce)
   ========================================================================== */

.woocommerce-message,.woocommerce-info,.woocommerce-error,
.woocommerce-noreviews,.wc-block-components-notice-banner{
  border:1px solid var(--filet);border-left:3px solid var(--or);
  background:var(--ivoire-clair);color:var(--encre);
  border-radius:var(--r-0);padding:var(--e3) var(--e4);margin:0 0 var(--e4);
  font-size:var(--t-petit);list-style:none;
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--e3);
}
.woocommerce-error{border-left-color:var(--carmin)}
.woocommerce-message a.button,.woocommerce-info a.button{
  min-height:46px;padding:0 var(--e4);font-size:var(--t-petit);margin-left:auto;
}
.wc-block-components-notice-banner>svg{flex:none;fill:var(--or)}
.wc-block-components-notice-banner.is-error>svg{fill:var(--carmin)}

/* ==========================================================================
   5. Barre d'outils d'archive : compteur, tri, pagination
   ========================================================================== */

.boutique-outils{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--e3) var(--e4);
  margin-bottom:var(--e5);
}
.woocommerce-result-count{margin:0;font-size:var(--t-petit);color:var(--encre-douce)}
.woocommerce-ordering{margin:0 0 0 auto}
.woocommerce-ordering select,
.woocommerce-ordering .orderby{
  min-height:46px;padding:0 var(--e3);
  border:1px solid var(--filet-fort);border-radius:var(--r-0);
  background:var(--ivoire-clair);color:var(--encre);
  font-family:var(--f-texte);font-size:var(--t-petit);font-weight:var(--g-corps);
}
.woocommerce-pagination{margin-top:var(--e6);text-align:center}
.woocommerce-pagination ul{display:inline-flex;gap:var(--e2);list-style:none;margin:0;padding:0;border:0}
.woocommerce-pagination ul li{border:0;margin:0}
.woocommerce-pagination a,.woocommerce-pagination span{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:46px;min-height:46px;padding:0 .6rem;
  border:1px solid var(--filet);text-decoration:none;font-size:var(--t-petit);
}
.woocommerce-pagination .current{background:var(--encre);border-color:var(--encre);color:var(--ivoire)}

/* ==========================================================================
   6. Panier, commande, compte : les blocs WooCommerce
   Ils arrivent avec leur propre palette (blanc dur, violet, arrondis).
   On les repose dans la DA : ivoire, encre, filets, aucun arrondi.
   ========================================================================== */

.wp-block-woocommerce-cart,.wp-block-woocommerce-checkout{
  max-width:var(--page);margin-inline:auto;
}
.wc-block-components-panel,.wc-block-cart,.wc-block-checkout,
.wc-block-components-sidebar-layout{color:var(--encre)}
.wc-block-components-title,
.wc-block-cart__empty-cart__title,
.wc-block-components-checkout-step__title{
  font-family:var(--f-titre)!important;font-weight:var(--g-titre)!important;
  color:var(--encre)!important;line-height:1.12;letter-spacing:-.012em;
}
.wc-block-components-checkout-step__title{font-size:var(--t-h3)!important;margin-bottom:var(--e3)!important}
.wc-block-components-product-name{
  font-family:var(--f-titre);font-weight:var(--g-titre)!important;
  font-size:var(--t-h4)!important;color:var(--encre)!important;text-decoration:none;
}
a.wc-block-components-product-name:hover{color:var(--bleu-nuit)!important;text-decoration:underline;text-underline-offset:.2em}
.wc-block-components-formatted-money-amount,
.wc-block-components-totals-item__value{
  font-family:var(--f-titre);font-weight:var(--g-titre)!important;color:var(--encre)!important;
}
.wc-block-components-totals-footer-item .wc-block-components-formatted-money-amount{font-size:1.35rem}
.wc-block-cart-items__header{
  font-family:var(--f-texte)!important;font-size:var(--t-petit)!important;
  font-weight:var(--g-fort)!important;letter-spacing:0!important;text-transform:none!important;
  color:var(--encre-douce)!important;border-bottom:1px solid var(--filet)!important;
}
.wc-block-cart-items__row,
.is-large.wc-block-cart .wc-block-cart-items td,
.is-large.wc-block-checkout .wc-block-components-order-summary-item,
.wc-block-components-sidebar .wc-block-components-panel,
.wc-block-components-totals-wrapper{border-color:var(--filet)!important}
.wc-block-components-sidebar-layout .wc-block-components-sidebar{
  background:var(--ivoire-clair);border:1px solid var(--filet);
  border-radius:var(--r-0);padding:var(--e4);
}
.wc-block-components-product-metadata,
.wc-block-components-order-summary-item__description,
.wc-block-components-checkout-step__description,
.wc-block-components-checkout-step__heading-content{
  color:var(--encre-douce)!important;font-size:var(--t-petit)!important;
}
.wc-block-components-totals-item__label{color:var(--encre)!important}

/* --- les champs : lisibles, jamais fades --------------------------------- */
.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-block-components-combobox-control input,
.wc-blocks-components-select__select,
.wc-block-components-form select,
select.wc-blocks-components-select__select{
  background:var(--ivoire-clair)!important;color:var(--encre)!important;
  border:1px solid var(--filet-fort)!important;border-radius:var(--r-0)!important;
  min-height:54px!important;font-family:var(--f-texte)!important;
  font-size:var(--t-corps)!important;font-weight:var(--g-corps)!important;
  transition:border-color var(--duree-court),box-shadow var(--duree-court);
}
/* le conteneur de la liste est blanc par défaut : il redevient transparent */
.wc-block-components-address-form .wc-blocks-components-select .wc-blocks-components-select__container{
  background:transparent;border-radius:var(--r-0)}
.wc-block-components-text-input label,
.wc-blocks-components-select__label{color:var(--encre-douce)!important;font-size:var(--t-petit)!important}
.wc-block-components-text-input.is-active label,
.wc-block-components-text-input input:focus+label{color:var(--encre)!important}
.wc-block-components-text-input input::placeholder,
.wc-block-components-textarea::placeholder{color:var(--encre-douce);opacity:1}
.wc-block-components-text-input input:focus,
.wc-block-components-textarea:focus,
.wc-blocks-components-select__select:focus,
.wc-block-components-combobox-control input:focus{
  outline:none!important;border-color:var(--encre)!important;
  box-shadow:0 0 0 3px rgba(1,81,110,.18)!important;
}
.wc-block-components-validation-error{color:var(--carmin)!important;font-size:var(--t-mini)!important}

/* --- quantité ------------------------------------------------------------ */
.wc-block-components-quantity-selector{
  border:1px solid var(--filet-fort)!important;border-radius:var(--r-0)!important;background:var(--ivoire-clair)}
.wc-block-components-quantity-selector__button,
.wc-block-components-quantity-selector__input{
  color:var(--encre)!important;background:transparent!important;
  font-family:var(--f-texte)!important;font-weight:var(--g-fort)!important;font-size:var(--t-petit)!important;
}
.wc-block-components-quantity-selector__button{min-width:40px;min-height:40px}

/* --- étapes du tunnel ---------------------------------------------------- */
.wc-block-checkout__form>.wc-block-components-checkout-step~.wc-block-components-checkout-step{
  padding-top:var(--e5)!important;border-top:1px solid var(--filet);
}
.wc-block-components-address-form__address_2-toggle,
.wc-block-components-checkbox__label,
.wc-block-components-checkout-terms,
.wc-block-components-radio-control__label,
.wc-block-components-radio-control__description{font-size:var(--t-petit)!important;color:var(--encre)}
.wc-block-components-radio-control__description{color:var(--encre-douce)}
.wc-block-components-checkout-terms a{color:var(--bleu-nuit)!important}

/* --- options de livraison et de paiement ---------------------------------
   WooCommerce peint le cadre de l'option cochée en `box-shadow: inset` et le
   séparateur en `::after`. Rien ici ne passe par `border`. -------------- */
.wc-block-components-radio-control--highlight-checked::after{border-color:var(--filet)!important}
.wc-block-components-radio-control__option::after,
.wc-block-components-radio-control-accordion-option::after{background:var(--filet)!important}
.wc-block-components-radio-control__option-checked,
.wc-block-components-radio-control-accordion-option--checked-option-highlighted{
  box-shadow:inset 0 0 0 1px var(--encre)!important;background:var(--ivoire-clair)!important;
}
.wc-block-components-radio-control__input{
  background:transparent!important;border:1px solid var(--filet-fort)!important}
.wc-block-components-radio-control__input:checked{border-color:var(--bleu-nuit)!important}
.wc-block-components-radio-control__input:checked::before{background:var(--bleu-nuit)!important}
.wc-block-components-radio-control__input:focus{
  outline:none!important;box-shadow:0 0 0 3px rgba(1,81,110,.22)!important}

/* --- cases à cocher ------------------------------------------------------ */
.wc-block-components-checkbox .wc-block-components-checkbox__input[type=checkbox]{
  background:var(--ivoire-clair)!important;border:1px solid var(--filet-fort)!important;
  border-radius:var(--r-0)!important;min-width:24px;min-height:24px}
.wc-block-components-checkbox .wc-block-components-checkbox__input[type=checkbox]:checked{
  background:var(--bleu-nuit)!important;border-color:var(--bleu-nuit)!important}
.wc-block-components-checkbox .wc-block-components-checkbox__input[type=checkbox]:focus{
  outline:none!important;box-shadow:0 0 0 3px rgba(1,81,110,.22)!important}
.wc-block-components-checkbox__mark{fill:var(--ivoire)!important}

/* --- le paiement à la livraison, mis en avant ---------------------------- */
.yona-cod{
  margin-top:var(--e4);padding:var(--e4);
  border:1px solid var(--filet);border-left:3px solid var(--or);background:var(--ivoire-clair);
}
.yona-cod b{display:block;font-family:var(--f-titre);font-weight:var(--g-titre);
  font-size:var(--t-h4);margin-bottom:.3rem}
.yona-cod p{color:var(--encre-douce);font-size:var(--t-petit);max-width:52ch}

/* ==========================================================================
   7. Panier et commande en version classique (courts-codes)
   Une boutique peut être installée avec les anciens courts-codes plutôt
   qu'avec les blocs. Les deux chemins sont habillés.
   ========================================================================== */

.woocommerce table.shop_table,
.woocommerce table.woocommerce-table{
  width:100%;border-collapse:collapse;border:0;border-radius:var(--r-0);
  font-size:var(--t-petit);margin-bottom:var(--e5);
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td{
  padding:var(--e3) var(--e2);border:0;border-bottom:1px solid var(--filet);text-align:left;
}
.woocommerce table.shop_table th{
  font-family:var(--f-texte);font-weight:var(--g-fort);color:var(--encre-douce);
}
.woocommerce table.shop_table .product-name a{text-decoration:none;font-family:var(--f-titre);
  font-weight:var(--g-titre);font-size:var(--t-h4)}
.woocommerce .cart_totals h2,
.woocommerce-checkout h3,
.woocommerce-account h2,
.woocommerce-order h2{font-family:var(--f-titre);font-weight:var(--g-titre);
  font-size:var(--t-h3);margin:var(--e5) 0 var(--e4)}
.woocommerce form .form-row{display:grid;gap:.35rem;margin:0 0 var(--e3)}
.woocommerce form .form-row label{font-size:var(--t-petit);color:var(--encre-douce)}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single{
  min-height:54px;padding:0 var(--e3);
  border:1px solid var(--filet-fort);border-radius:var(--r-0);
  background:var(--ivoire-clair);color:var(--encre);
  font-family:var(--f-texte);font-size:var(--t-corps);font-weight:var(--g-corps);
}
.woocommerce form .form-row textarea{padding:var(--e3);min-height:8rem;line-height:1.6}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus{
  outline:none;border-color:var(--encre);box-shadow:0 0 0 3px rgba(1,81,110,.18);
}
.woocommerce #payment,
.woocommerce-checkout-review-order{
  border:1px solid var(--filet);background:var(--ivoire-clair);padding:var(--e4);border-radius:var(--r-0);
}
.woocommerce #payment ul.payment_methods{list-style:none;margin:0 0 var(--e4);padding:0;border:0}
.woocommerce #payment ul.payment_methods li{padding-block:var(--e2);border-bottom:1px solid var(--filet)}
.woocommerce #payment div.payment_box{
  background:transparent;color:var(--encre-douce);font-size:var(--t-petit);padding:var(--e2) 0 0;
}
.woocommerce #payment div.payment_box::before{display:none}
.woocommerce-order-overview{
  display:grid;gap:0;list-style:none;margin:0 0 var(--e5);padding:0;
}
.woocommerce-order-overview li{
  display:grid;gap:.2rem var(--e4);padding-block:var(--e3);border-top:1px solid var(--filet);
  font-size:var(--t-petit);color:var(--encre-douce);
}
.woocommerce-order-overview li:last-child{border-bottom:1px solid var(--filet)}
.woocommerce-order-overview li strong{font-family:var(--f-titre);font-weight:var(--g-titre);
  font-size:var(--t-h4);color:var(--encre)}
@media (min-width:720px){
  .woocommerce-order-overview li{grid-template-columns:minmax(0,14rem) minmax(0,1fr);align-items:baseline}
}
.woocommerce-MyAccount-navigation ul{display:flex;flex-wrap:wrap;gap:var(--e4);list-style:none;
  margin:0 0 var(--e5);padding:0 0 var(--e3);border-bottom:1px solid var(--filet)}
.woocommerce-MyAccount-navigation a{text-decoration:none;color:var(--encre-douce);font-size:var(--t-menu)}
.woocommerce-MyAccount-navigation li.is-active a{color:var(--encre);font-weight:var(--g-fort)}
.woocommerce-form-login,.woocommerce-form-register{
  border:1px solid var(--filet);padding:var(--e5);max-width:36rem;background:var(--ivoire-clair);
}
.woocommerce .col2-set{display:grid;gap:var(--e5)}
@media (min-width:900px){.woocommerce .col2-set{grid-template-columns:1fr 1fr;gap:var(--e6)}}
.woocommerce .col2-set .col-1,.woocommerce .col2-set .col-2{width:auto;float:none}

/* ==========================================================================
   8. Le contenu d'une page WordPress simple (le panier et la commande y vivent)
   ========================================================================== */

.entry{padding-block:var(--e6) var(--section)}
.entry>*+*{margin-top:var(--e4)}
.entry h2{font-family:var(--f-titre);font-weight:var(--g-titre);font-size:var(--t-h3);
  margin-top:var(--e6);font-variation-settings:'opsz' 24}
.entry h3{font-family:var(--f-titre);font-weight:var(--g-titre);font-size:var(--t-h4);margin-top:var(--e5)}
.entry p,.entry li{color:var(--encre-douce)}
.entry ul,.entry ol{display:grid;gap:0}
.entry ul li{padding-block:var(--e3);border-top:1px solid var(--filet)}
.entry ul li:last-child{border-bottom:1px solid var(--filet)}
/* `:not(.wc-block-components-button)` : dans le panier, « Valider la commande » est un LIEN habillé en
   bouton. Cette règle de lien, plus spécifique que celle du bouton, l'écrivait en bleu nuit sur encre :
   2:1 de contraste sur le bouton qui mène à la commande (mesuré le 17/09, recette des langues). */
.entry a:not(.btn):not(.button):not(.wc-block-components-button){color:var(--bleu-nuit);text-underline-offset:.2em}
.entry table{width:100%;border-collapse:collapse}
.entry--etroit{max-width:var(--texte-large);margin-inline:auto}

/* ==========================================================================
   9. Le panier dans l'entête
   Écrit en toutes lettres, pas en pictogramme : les icônes en rangée ont
   été retirées de ce site, et un panier qui se lit se trouve mieux qu'un
   panier qui se devine.
   ========================================================================== */

.entete__outils{display:flex;align-items:center;gap:var(--e3);flex:none}
@media (min-width:981px){.nav{margin-left:auto}}
.entete__panier{
  display:inline-flex;align-items:center;gap:.4em;
  min-height:44px;padding-block:.4rem;
  font-size:var(--t-menu);font-weight:var(--g-corps);text-decoration:none;
}
.entete__panier:hover{text-decoration:underline;text-underline-offset:.3em}
.entete__n{
  font-family:var(--f-titre);font-weight:var(--g-titre);font-size:var(--t-menu);
  font-variation-settings:'opsz' 20;
}
.entete__n::before{content:"("}
.entete__n::after{content:")"}
.entete__n[data-vide="1"]{display:none}

/* ==========================================================================
   10. Les filtres de la boutique
   Ce sont des liens vers les pages de catégorie, pas des boutons : sans
   JavaScript ils naviguent, avec JavaScript ils filtrent sur place. L'état
   se dit donc en `aria-current`, jamais en `aria-pressed`.
   ========================================================================== */

a.filtre{text-decoration:none;display:inline-block}
.filtre[aria-current="true"]{
  color:var(--encre);font-weight:var(--g-fort);border-bottom-color:var(--encre);
}

/* ==========================================================================
   11. Le formulaire de recherche
   ========================================================================== */

.recherche{display:flex;flex-wrap:wrap;gap:var(--e2);margin-top:var(--e4);max-width:34rem}
.recherche input[type="search"]{
  flex:1 1 14rem;min-height:54px;padding:0 var(--e3);
  border:1px solid var(--filet-fort);border-radius:var(--r-0);
  background:var(--ivoire-clair);color:var(--encre);
  font-family:var(--f-texte);font-size:var(--t-corps);font-weight:var(--g-corps);
}
.recherche input[type="search"]:focus{
  outline:none;border-color:var(--encre);box-shadow:0 0 0 3px rgba(1,81,110,.18);
}
.recherche input[type="search"]::placeholder{color:var(--encre-douce);opacity:1}

/* ==========================================================================
   12. Les étiquettes réservées aux lecteurs d'écran
   WordPress et WooCommerce posent leurs libellés invisibles sur leurs
   propres classes. Sans ces trois lignes, l'étiquette du champ de quantité
   et celle du tri s'affichent en clair au milieu de la page.
   ========================================================================== */

.screen-reader-text,.sr-only{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
}
.screen-reader-text:focus,.sr-only:focus{
  position:static;width:auto;height:auto;clip-path:none;
}

/* Les options d'une liste déroulante sont peintes par le système : la graisse
   ne s'y applique pas toujours, on la déclare quand même pour que rien du
   thème ne descende sous 450. */
.woocommerce-ordering select option,
.wc-blocks-components-select__select option{font-weight:var(--g-corps)}

/* ==========================================================================
   Panier vide (bloc WooCommerce). Le contenu de la page panier porte nos
   deux boutons, comme le gabarit cart-empty.php du thème : jamais un
   cul-de-sac, on ramène vers les soins (11/09 : le bloc disait
   « Your cart is currently empty! » et proposait des boutons illisibles).
   ========================================================================== */
.wp-block-woocommerce-empty-cart-block{text-align:center;padding-block:var(--e5) var(--e6)}
.wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title{font-size:var(--t-h2);margin:0}
.wp-block-woocommerce-empty-cart-block p{max-width:36ch;margin:var(--e3) auto 0;color:var(--encre-douce)}
.panier-vide__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--e2);margin-top:var(--e5)}
.panier-vide__actions .btn{width:min(100%,17rem)}