/* ==========================================================================
   HBCB — Feuille de style de la boutique
   Handball Club Brignolais · handballbrignoles.fr
   WordPress + Hello Elementor + Elementor Pro + WooCommerce + Variation Swatches
   --------------------------------------------------------------------------
   VERSION 2.2 — 18/10/2026
   2.0 : refonte complète. Les correctifs posés au fil de l'eau (galerie,
   loupe, panier latéral, colonnes du tableau panier) sont intégrés dans leur
   section d'origine, plus en fin de fichier.
   2.1 : bloc « Retrait au gymnase » du tunnel de commande (section 11).
   2.2 : galerie produit (section 08). Les règles de mise en page posées sur la
   piste et les vues du diaporama entraient en conflit avec flexslider et
   donnaient une image à 4000 × 5000. Elles sont retirées, il ne reste qu'un
   max-width. Corrigé et vérifié en direct sur la fiche du sac de sport.
   --------------------------------------------------------------------------
   OÙ METTRE CE FICHIER
   Déposer à /wp-content/hbcb/hbcb-boutique.css
   puis l'appeler par l'extrait PHP « HBCB — CSS boutique » dans WPCode.
   Ne plus coller ce contenu dans Elementor → Réglages du site : on perd le
   cache navigateur, la minification LiteSpeed et l'historique des versions.
   --------------------------------------------------------------------------
   ORGANISATION
   00 Tokens              07 Prix
   01 Base boutique       08 Fiche produit
   02 Hero                09 Barre mobile d'achat
   03 Nav collections     10 Panier · 10 bis Panier latéral
   04 Carte produit       11 Commande
   05 Badges              12 Mon compte
   06 Boutons             13 Messages · 14 Vides · 15 A11y · 16 Responsive
   ========================================================================== */


/* ==========================================================================
   00 · TOKENS
   Les valeurs marine et or sont relevées sur le site existant.
   Contrastes vérifiés : encre/blanc 17,3:1 · marine/or 12,8:1 · or/marine 12,8:1
   RÈGLE ABSOLUE : jamais de texte blanc sur l'or (1,5:1, illisible).
   Sur un aplat or, le texte est toujours marine.
   ========================================================================== */
:root {
  --hb-marine-900: #040C35;   /* header, footer, aplats sombres */
  --hb-marine-800: #081545;   /* hero, cartes sombres */
  --hb-marine-700: #0E2560;   /* boutons secondaires, survol */
  --hb-or:         #F7D101;   /* accent, CTA */
  --hb-or-600:     #DFBC00;   /* survol de l'or */
  --hb-cyan:       #009FE3;   /* accent secondaire — FOND UNIQUEMENT, texte marine
                                 (blanc sur ce cyan = 2,97:1, sous le seuil WCAG) */

  --hb-encre:      #101A33;   /* texte courant */
  --hb-gris-600:   #5A6478;   /* texte secondaire */
  --hb-gris-400:   #8C94A6;   /* décoratif et gros texte seulement (3:1) */
  --hb-fond:       #F5F7FB;   /* fond des pages boutique */
  --hb-blanc:      #FFFFFF;
  --hb-bordure:    #E2E7F1;
  --hb-succes:     #15724A;
  --hb-alerte:     #B3261E;

  --hb-r-sm: 10px;            /* champs, badges */
  --hb-r-md: 16px;            /* cartes */
  --hb-r-lg: 22px;            /* grands blocs */

  --hb-ombre:       0 2px 10px rgba(3, 10, 54, .06);
  --hb-ombre-haute: 0 14px 34px rgba(3, 10, 54, .16);

  --hb-t: .22s cubic-bezier(.2, .7, .3, 1);   /* transition courante */

  --hb-gap: 24px;
  --hb-max: 1240px;
}


/* ==========================================================================
   01 · BASE BOUTIQUE
   ========================================================================== */
.woocommerce-page,
.post-type-archive-product,
.tax-product_cat,
.single-product {
  background-color: var(--hb-fond);
}

.woocommerce-page .hb-wrap,
.post-type-archive-product .hb-wrap {
  max-width: var(--hb-max);
  margin-inline: auto;
  padding-inline: 20px;
}

/* Fil d'Ariane, commun à toutes les pages boutique */
.woocommerce-breadcrumb {
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--hb-gris-600);
  margin-bottom: 20px;
}
.woocommerce-breadcrumb a {
  color: var(--hb-gris-600);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--hb-t), color var(--hb-t);
}
.woocommerce-breadcrumb a:hover {
  color: var(--hb-marine-900);
  border-bottom-color: var(--hb-or);
}

/* Le tri natif de WooCommerce, remis au propre */
.woocommerce-ordering select,
.hb-select {
  appearance: none;
  background-color: var(--hb-blanc);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%235A6478' stroke-width='2' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  border: 1px solid var(--hb-bordure);
  border-radius: var(--hb-r-sm);
  padding: 12px 40px 12px 14px;
  font-size: 15px;
  color: var(--hb-encre);
  min-height: 48px;
  cursor: pointer;
}
.woocommerce-result-count {
  color: var(--hb-gris-600);
  font-size: 14px;
}


/* ==========================================================================
   02 · HERO DE LA BOUTIQUE
   Conteneur Elementor auquel on ajoute la classe hb-hero.
   L'image de fond se pose dans Elementor, le voile se fait ici : il garantit
   la lisibilité quelle que soit la photo mise derrière.
   ========================================================================== */
.hb-hero {
  position: relative;
  isolation: isolate;
  background-color: var(--hb-marine-800);
}
.hb-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgba(3, 10, 54, .62) 0%,
    rgba(3, 10, 54, .78) 100%
  );
}
.hb-hero h1,
.hb-hero .hb-hero__titre {
  color: var(--hb-blanc);
  text-wrap: balance;      /* évite le mot orphelin sur la dernière ligne */
}
.hb-hero .hb-accent { color: var(--hb-or); }
.hb-hero p {
  color: rgba(255, 255, 255, .88);
  max-width: 62ch;
  margin-inline: auto;
}


/* ==========================================================================
   03 · NAVIGATION DES COLLECTIONS
   Liens texte plutôt qu'un filtre AJAX : sur un petit catalogue, les URLs
   /collections/... restent propres et indexables. Le filtre de taxonomie
   d'Elementor Pro ne fonctionne pas avec « Requête actuelle » sur une archive.
   Balisage : <nav class="hb-collections"><a>…</a></nav>
   ========================================================================== */
.hb-collections {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 var(--hb-gap);
}
.hb-collections a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--hb-bordure);
  border-radius: 999px;
  background: var(--hb-blanc);
  color: var(--hb-encre);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--hb-t), border-color var(--hb-t), color var(--hb-t);
}
.hb-collections a:hover { border-color: var(--hb-marine-700); }
.hb-collections a[aria-current="page"],
.hb-collections a.is-active {
  background: var(--hb-marine-900);
  border-color: var(--hb-marine-900);
  color: var(--hb-blanc);
}


/* ==========================================================================
   04 · CARTE PRODUIT
   Deux balisages cohabitent sur le site :
   .hb-card               → conteneur racine d'un Élément de boucle Elementor
   ul.products li.product → rendu natif WooCommerce (produits liés, archives)

   Le natif ne génère aucun conteneur interne : sans retrait posé sur la carte
   elle-même, le titre et le prix se collent au bord. On met donc le padding
   sur le <li>, et l'image ressort par marge négative pour rester à fleur.
   ========================================================================== */
.hb-card,
.woocommerce ul.products li.product {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--hb-blanc);
  border: 1px solid var(--hb-bordure);
  border-radius: var(--hb-r-md);
  overflow: hidden;
  box-shadow: var(--hb-ombre);
  transition: transform var(--hb-t), box-shadow var(--hb-t), border-color var(--hb-t);
}
.hb-card:hover,
.woocommerce ul.products li.product:hover {
  transform: translateY(-4px);
  box-shadow: var(--hb-ombre-haute);
  border-color: transparent;
}

/* ---------- Visuel ----------
   Le ratio est réservé en CSS pour que la grille ne saute pas au chargement. */
.hb-card__media,
.woocommerce ul.products li.product a img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--hb-blanc);
  margin: 0;
  overflow: hidden;
}
.hb-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s cubic-bezier(.2, .7, .3, 1);
}
.hb-card:hover .hb-card__media img { transform: scale(1.045); }

/* ---------- Corps, version Elementor ---------- */
.hb-card__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 16px 18px;
  flex: 1 1 auto;
}
.hb-card__cat {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--hb-gris-600);
}
.hb-card__titre,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 17px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--hb-marine-900);
  margin: 0;
  /* deux lignes maximum : toutes les cartes gardent la même hauteur */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hb-card__meta {
  font-size: 13px;
  color: var(--hb-gris-600);
}
.hb-card__pied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 12px;
}

/* Toute la carte est cliquable, sans imbriquer de lien dans un lien */
.hb-card__lien::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.hb-card__pied .hb-btn {
  position: relative;
  z-index: 2;
}

/* ---------- Corps, version native WooCommerce ---------- */
.woocommerce ul.products li.product { padding: 0 18px 18px !important; }

.woocommerce ul.products li.product a img {
  width: calc(100% + 36px) !important;
  max-width: none !important;
  margin: 0 -18px 16px !important;
}
.woocommerce ul.products li.product h2.woocommerce-loop-product__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 17px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
  color: var(--hb-marine-900) !important;
  padding: 0 !important;
  margin: 0 0 6px !important;
}
.woocommerce ul.products li.product .price {
  display: block !important;
  font-size: 18px !important;
  margin: 0 0 14px !important;
}

/* Les deux boutons occupent toute la largeur et s'empilent.
   En ligne, ils débordent dès que le libellé s'allonge. */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart {
  display: flex !important;
  width: 100% !important;
  justify-content: center !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.woocommerce ul.products li.product .button      { margin-top: auto !important; }
.woocommerce ul.products li.product .added_to_cart { margin-top: 8px !important; }

/* Le lien qui enveloppe image, titre et prix ne doit rien ajouter */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
  display: block;
  text-decoration: none;
}


/* ==========================================================================
   05 · BADGES
   <span class="hb-badge hb-badge--event">Événement</span>
   ========================================================================== */
.hb-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--hb-marine-900);
  color: var(--hb-blanc);
}
.hb-badge--event   { background: var(--hb-or); color: var(--hb-marine-900); }
.hb-badge--nouveau { background: var(--hb-succes); color: var(--hb-blanc); }
.hb-badge--rupture { background: var(--hb-gris-600); color: var(--hb-blanc); }

/* La pastille Promo native de WooCommerce, alignée sur la même grammaire */
.woocommerce span.onsale {
  position: absolute;
  top: 12px;
  left: 12px;
  right: auto;
  min-height: 28px;
  min-width: 0;
  line-height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--hb-or);
  color: var(--hb-marine-900);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  margin: 0;
}


/* ==========================================================================
   06 · BOUTONS
   Trois niveaux seulement. Au-delà, la hiérarchie se dilue.
   Grammaire du site :
     grille        → marine, texte or        (discret, on parcourt)
     fiche produit → or plein, texte marine  (fort, on achète)
     après ajout   → cyan, texte marine      (confirmation, on poursuit)
   ========================================================================== */
.hb-btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: var(--hb-r-sm);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  background: var(--hb-marine-900);
  color: var(--hb-blanc);
  transition: background-color var(--hb-t), color var(--hb-t),
              border-color var(--hb-t), transform var(--hb-t);
}
.hb-btn:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
  background: var(--hb-marine-700);
  color: var(--hb-blanc);
  transform: translateY(-1px);
}

/* Primaire — or, texte marine. C'est le bouton d'achat. */
.hb-btn--or,
.woocommerce button.single_add_to_cart_button,
.woocommerce .checkout-button,
.woocommerce #place_order {
  background: var(--hb-or) !important;
  color: var(--hb-marine-900) !important;
  border-color: var(--hb-or) !important;
}
.hb-btn--or:hover,
.woocommerce button.single_add_to_cart_button:hover,
.woocommerce .checkout-button:hover,
.woocommerce #place_order:hover {
  background: var(--hb-or-600) !important;
  color: var(--hb-marine-900) !important;
  border-color: var(--hb-or-600) !important;
}

/* Secondaire — contour */
.hb-btn--ghost {
  background: transparent;
  color: var(--hb-marine-900);
  border-color: var(--hb-bordure);
}
.hb-btn--ghost:hover {
  background: var(--hb-blanc);
  border-color: var(--hb-marine-700);
  color: var(--hb-marine-900);
}

/* Désactivé — jamais transparent, sinon il reste cliquable à l'œil */
.woocommerce button.button:disabled,
.woocommerce button.button.disabled,
.woocommerce a.button.disabled {
  background: var(--hb-gris-400) !important;
  color: var(--hb-blanc) !important;
  border-color: var(--hb-gris-400) !important;
  opacity: 1 !important;
  cursor: not-allowed;
  transform: none !important;
}

/* État de chargement WooCommerce, sans le GIF d'origine */
.woocommerce .button.loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}
.woocommerce .button.loading::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  color: var(--hb-marine-900);
  animation: hb-spin .7s linear infinite;
}
@keyframes hb-spin { to { transform: rotate(360deg); } }

/* « Ajouter au panier » sur la grille — produits simples */
.woocommerce a.add_to_cart_button,
.woocommerce-page a.add_to_cart_button,
.woocommerce a.button.product_type_simple {
  background: var(--hb-marine-900) !important;
  color: var(--hb-or) !important;
  border: 2px solid var(--hb-marine-900) !important;
  border-radius: var(--hb-r-sm) !important;
  font-weight: 700 !important;
  transition: background-color var(--hb-t), color var(--hb-t),
              border-color var(--hb-t), transform var(--hb-t) !important;
}
.woocommerce a.add_to_cart_button:hover,
.woocommerce-page a.add_to_cart_button:hover,
.woocommerce a.button.product_type_simple:hover {
  background: var(--hb-marine-700) !important;
  color: var(--hb-or) !important;
  border-color: var(--hb-marine-700) !important;
  transform: translateY(-1px) !important;
}

/* « Voir le panier », affiché après un ajout en AJAX.
   Texte marine et non blanc : du blanc sur ce cyan donne 2,97:1,
   sous le seuil de 3:1, donc illisible en extérieur. En marine : 6,37:1. */
.woocommerce a.added_to_cart,
.woocommerce-page a.added_to_cart {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 44px !important;
  padding: 0 20px !important;
  margin-left: 10px !important;
  background: var(--hb-cyan) !important;
  color: var(--hb-marine-900) !important;
  border: 2px solid var(--hb-cyan) !important;
  border-radius: var(--hb-r-sm) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  vertical-align: middle !important;
  transition: background-color var(--hb-t), color var(--hb-t),
              border-color var(--hb-t), transform var(--hb-t) !important;
}
.woocommerce a.added_to_cart:hover,
.woocommerce-page a.added_to_cart:hover {
  background: var(--hb-marine-900) !important;
  color: var(--hb-or) !important;
  border-color: var(--hb-marine-900) !important;
  transform: translateY(-1px) !important;
}
.woocommerce a.added_to_cart:active,
.woocommerce-page a.added_to_cart:active { transform: translateY(0) !important; }


/* ==========================================================================
   07 · PRIX
   Le prix ne se branche jamais sur une couleur fonctionnelle du kit
   (Succès, Alerte) : au premier changement de kit, il vire au vert ou au rouge.
   ========================================================================== */
.woocommerce .price,
.hb-prix {
  color: var(--hb-marine-900);
  font-weight: 700;
  font-size: 18px;
  font-variant-numeric: tabular-nums;   /* les prix s'alignent en colonne */
}
.woocommerce .price del {
  color: var(--hb-gris-400);
  font-weight: 500;
  margin-right: 8px;
}
.woocommerce .price ins {
  text-decoration: none;
  color: var(--hb-marine-900);
}
.single-product .woocommerce div.product p.price { font-size: 28px; }
.hb-prix__suffixe {
  font-size: 13px;
  font-weight: 500;
  color: var(--hb-gris-600);
  margin-left: 6px;
}


/* ==========================================================================
   08 · FICHE PRODUIT
   ========================================================================== */
.single-product div.product .product_title {
  color: var(--hb-marine-900);
  line-height: 1.15;
  text-wrap: balance;
}

/* ---------- Tableau des variations : on efface le style de table natif ---- */
.single-product table.variations,
.single-product table.variations tr,
.single-product table.variations td,
.single-product table.variations th {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.single-product table.variations th.label {
  padding-bottom: 8px !important;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--hb-gris-600);
}
.single-product table.variations td.value { padding-bottom: 20px !important; }

/* ---------- Pastilles de taille (Variation Swatches) ----------
   50 px parce que le plugin ne propose que 45 ou 50, pas 48.
   Les tailles épuisées restent visibles, floutées par le plugin
   (comportement « Blur » et non « Hidden ») : voir qu'une taille existe
   mais n'est pas disponible crée de l'intention, la masquer la tue. */
.single-product .variable-items-wrapper .variable-item {
  min-width: 50px !important;
  height: 50px !important;
  border-radius: var(--hb-r-sm) !important;
  border: 1px solid var(--hb-bordure) !important;
  box-shadow: none !important;
  font-weight: 700;
  color: var(--hb-encre);
  transition: border-color var(--hb-t), background-color var(--hb-t), color var(--hb-t);
}
.single-product .variable-items-wrapper .variable-item:hover {
  border-color: var(--hb-marine-700) !important;
}
.single-product .variable-items-wrapper .variable-item.selected {
  background: var(--hb-marine-900) !important;
  border-color: var(--hb-marine-900) !important;
  color: var(--hb-blanc) !important;
}
.single-product .variable-items-wrapper .variable-item.disabled {
  opacity: .4 !important;
  cursor: not-allowed;
}

/* Lien « Effacer » dédoublé par le plugin : le second est marqué en JS,
   jamais supprimé du DOM, sinon le plugin perd sa référence. */
.single-product .reset_variations {
  font-size: 13px;
  color: var(--hb-gris-600) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.single-product .reset_variations.hb-reset-dupe { display: none !important; }

/* ---------- Sélecteur de quantité ----------
   Volontairement limité au formulaire d'achat et au tableau panier.
   Un sélecteur global attraperait aussi la quantité du panier latéral,
   qui n'est qu'un texte, et lui collerait un cadre vide par-dessus le prix. */
.single-product form.cart .quantity,
.woocommerce-cart td.product-quantity .quantity {
  display: inline-flex !important;
  align-items: stretch;
  border: 1px solid var(--hb-bordure);
  border-radius: var(--hb-r-sm);
  height: 48px;
  overflow: hidden;
  background: var(--hb-blanc);
}
.woocommerce button.hb-qty {
  width: 44px;
  border: none !important;
  background: transparent !important;
  color: var(--hb-encre) !important;
  font-size: 18px;
  line-height: 1;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: background-color var(--hb-t), color var(--hb-t);
}
.woocommerce button.hb-qty:hover,
.woocommerce button.hb-qty:focus-visible {
  background: var(--hb-marine-900) !important;
  color: var(--hb-blanc) !important;
  transform: none !important;
}
.single-product form.cart .quantity input.qty,
.woocommerce-cart td.product-quantity .quantity input.qty {
  width: 54px;
  border: none !important;
  border-inline: 1px solid var(--hb-bordure) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  padding: 0 !important;
  appearance: textfield;
  -moz-appearance: textfield;
}
.woocommerce .quantity input.qty::-webkit-outer-spin-button,
.woocommerce .quantity input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ---------- Galerie ----------
   NE PAS remettre ici de mise en page sur la piste ni sur les vues.
   Le diaporama flexslider de WooCommerce pose lui-même, en style en ligne, la
   largeur de la piste (width: 800 %) et celle de chaque vue (500 px, flottante,
   recalculées à chaque redimensionnement). Une règle qui lui impose autre chose
   le fait diverger : avec un wrapper en `display: flex` et des vues en
   `flex: 0 0 100 %`, la vue prend les 800 % de la piste, soit 4000 px, et
   l'image suit à 4000 × 5000 — d'où le sac affiché dix fois trop grand et flou.
   Mesuré sur la fiche du sac de sport le 18/10/2026.
   Deux garde-fous suffisent :
   1. max-width sur les images, pour qu'aucune ne déborde de sa vue ;
   2. la loupe, qui injecte une copie agrandie en position absolue et ne doit
      surtout pas être traitée comme les autres images. Elle est masquée ici et
      désinscrite côté PHP (extrait WPCode). */
.single-product .woocommerce-product-gallery {
  background: var(--hb-blanc);
  border: 1px solid var(--hb-bordure);
  border-radius: var(--hb-r-md);
  overflow: hidden;
}
.single-product .woocommerce-product-gallery img.zoomImg { display: none !important; }

.single-product .woocommerce-product-gallery__wrapper img:not(.zoomImg) {
  display: block;
  max-width: 100%;
  height: auto;
}

.single-product .flex-control-thumbs {
  display: flex !important;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px !important;
  padding: 0 !important;
}
.single-product .flex-control-thumbs li {
  width: auto !important;
  max-width: 68px;
  margin: 0 !important;
  float: none !important;
  list-style: none;
}
.single-product .flex-control-thumbs img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  opacity: .5;
  cursor: pointer;
  transition: opacity var(--hb-t);
}
.single-product .flex-control-thumbs img:hover,
.single-product .flex-control-thumbs img.flex-active { opacity: 1; }

/* ---------- Onglets : on retire les triangles décoratifs ---------- */
.single-product .woocommerce-tabs ul.tabs {
  border-bottom: 1px solid var(--hb-bordure) !important;
  padding: 0 !important;
  margin: 0 0 28px !important;
}
.single-product .woocommerce-tabs ul.tabs li {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 32px 0 0 !important;
  padding: 0 0 14px !important;
}
.single-product .woocommerce-tabs ul.tabs li::before,
.single-product .woocommerce-tabs ul.tabs li::after { display: none !important; }
.single-product .woocommerce-tabs ul.tabs li a {
  color: var(--hb-gris-600) !important;
  font-weight: 700;
  padding: 0 !important;
}
.single-product .woocommerce-tabs ul.tabs li.active a { color: var(--hb-marine-900) !important; }
.single-product .woocommerce-tabs ul.tabs li.active {
  box-shadow: inset 0 -3px 0 0 var(--hb-or) !important;
}
.single-product .woocommerce-tabs .panel {
  padding: 0 !important;
  min-height: 220px;   /* le footer ne bouge plus d'un onglet à l'autre */
}
.single-product table.shop_attributes th,
.single-product table.shop_attributes td {
  border: none !important;
  border-bottom: 1px solid var(--hb-bordure) !important;
  padding: 13px 0 !important;
  background: transparent !important;
  font-style: normal !important;
}

/* Encart retrait au gymnase, à poser sous le bouton d'achat */
.hb-retrait {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid var(--hb-bordure);
  border-left: 4px solid var(--hb-or);
  border-radius: var(--hb-r-sm);
  background: var(--hb-blanc);
  font-size: 14px;
  line-height: 1.5;
  color: var(--hb-encre);
}
.hb-retrait strong { color: var(--hb-marine-900); }


/* ==========================================================================
   09 · BARRE MOBILE D'ACHAT
   Le bouton d'achat sort de l'écran dès qu'on lit la description.
   Cette barre le ramène en permanence. Mobile uniquement.
   Balisage à poser en bas du template Produit :
   <div class="hb-achat-mobile"><span class="hb-achat-mobile__prix">…</span>
     <a href="#hb-achat" class="hb-btn hb-btn--or">Choisir ma taille</a></div>
   ========================================================================== */
.hb-achat-mobile { display: none; }

@media (max-width: 767px) {
  .single-product .hb-achat-mobile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 998;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: var(--hb-blanc);
    border-top: 1px solid var(--hb-bordure);
    box-shadow: 0 -6px 20px rgba(3, 10, 54, .10);
  }
  .hb-achat-mobile__prix {
    font-size: 18px;
    font-weight: 700;
    color: var(--hb-marine-900);
    white-space: nowrap;
  }
  .hb-achat-mobile .hb-btn { flex: 1 1 auto; }
  /* On libère la hauteur de la barre pour ne rien masquer en bas de page */
  .single-product .site-footer,
  .single-product footer { padding-bottom: 84px; }
}


/* ==========================================================================
   10 · PANIER
   ========================================================================== */
.woocommerce-cart table.shop_table {
  border: 1px solid var(--hb-bordure);
  border-radius: var(--hb-r-md);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  background: var(--hb-blanc);
}
.woocommerce-cart table.shop_table th {
  background: var(--hb-marine-900);
  color: var(--hb-blanc);
  font-size: 13px;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 14px 16px;
  border: none;
}
.woocommerce-cart table.shop_table td {
  padding: 16px;
  border-top: 1px solid var(--hb-bordure);
  vertical-align: middle;
}
.woocommerce-cart table.shop_table img {
  width: 72px;
  height: 90px;              /* 4:5, cohérent avec la grille */
  object-fit: cover;
  border-radius: 8px;
}

/* Colonnes chiffrées centrées : sans cela, les en-têtes PRIX, QUANTITÉ et
   SOUS-TOTAL ne tombent pas d'aplomb avec les valeurs en dessous. */
.woocommerce-cart table.shop_table th.product-price,
.woocommerce-cart table.shop_table th.product-quantity,
.woocommerce-cart table.shop_table th.product-subtotal,
.woocommerce-cart table.shop_table td.product-price,
.woocommerce-cart table.shop_table td.product-quantity,
.woocommerce-cart table.shop_table td.product-subtotal { text-align: center !important; }
.woocommerce-cart table.shop_table td.product-quantity .quantity { margin-inline: auto; }

.woocommerce-cart a.remove {
  width: 32px; height: 32px;
  line-height: 30px;
  font-size: 20px;
  color: var(--hb-gris-600) !important;
  border: 1px solid var(--hb-bordure);
  border-radius: 50%;
  background: var(--hb-blanc) !important;
  transition: color var(--hb-t), border-color var(--hb-t);
}
.woocommerce-cart a.remove:hover {
  color: var(--hb-alerte) !important;
  border-color: var(--hb-alerte);
  background: var(--hb-blanc) !important;
}

/* ---------- Totaux ---------- */
.woocommerce-cart .cart_totals,
.woocommerce-checkout .woocommerce-checkout-review-order {
  background: var(--hb-blanc);
  border: 1px solid var(--hb-bordure);
  border-radius: var(--hb-r-md);
  padding: 22px;
}
.woocommerce-cart .cart_totals h2,
.woocommerce-checkout h3 {
  font-size: 18px;
  color: var(--hb-marine-900);
  margin-top: 0;
}
.woocommerce table.shop_table_responsive tbody th,
.woocommerce-cart .cart_totals table th {
  background: transparent;
  color: var(--hb-gris-600);
  text-transform: none;
  letter-spacing: 0;
  font-size: 15px;
}
.woocommerce-cart .cart_totals .order-total td,
.woocommerce-cart .cart_totals .order-total th {
  font-size: 19px;
  font-weight: 700;
  color: var(--hb-marine-900);
  border-top: 2px solid var(--hb-marine-900) !important;
}
.woocommerce-cart .checkout-button { width: 100%; margin-top: 10px; }
.woocommerce-cart .coupon input[type="text"] { min-height: 48px; }

/* Blocs WooCommerce, si la page bascule un jour sur le bloc Panier */
.wp-block-woocommerce-cart .wc-block-cart-items__row { border-color: var(--hb-bordure); }
.wp-block-woocommerce-cart .wc-block-components-product-image img { border-radius: 8px; }
.wc-block-components-totals-item__value { color: var(--hb-marine-900); font-weight: 700; }


/* ==========================================================================
   10 bis · PANIER LATÉRAL  (widget Menu Cart d'Elementor Pro)
   Ce panneau n'est pas du balisage WooCommerce, il a ses propres classes et
   ignore toute la section 10. Il vit dans l'en-tête, donc sur toutes les
   pages du site, pas seulement la boutique.

   PIÈGE : .elementor-menu-cart__container n'est pas le panneau, c'est le
   voile plein écran qui le contient. Lui donner un fond opaque masque le
   site entier. On ne style que __main.
   ========================================================================== */
.elementor-menu-cart__main {
  background: var(--hb-blanc) !important;
  padding: 20px !important;
}
.elementor-menu-cart__product { border-bottom: 1px solid var(--hb-bordure) !important; }
.elementor-menu-cart__product-image img { border-radius: 8px; }
.elementor-menu-cart__product-name,
.elementor-menu-cart__product-name a {
  color: var(--hb-marine-900) !important;
  font-weight: 700;
  text-decoration: none;
}
.elementor-menu-cart__product-price {
  color: var(--hb-encre) !important;
  font-weight: 600;
}
.elementor-menu-cart__subtotal {
  color: var(--hb-marine-900) !important;
  font-size: 17px;
  font-weight: 700;
  border-top: 1px solid var(--hb-bordure) !important;
  padding-top: 14px !important;
}
.elementor-menu-cart__footer-buttons .elementor-button {
  min-height: 48px;
  border-radius: var(--hb-r-sm) !important;
  font-weight: 700 !important;
}
.elementor-menu-cart__footer-buttons .elementor-button--view-cart {
  background: var(--hb-marine-900) !important;
  color: var(--hb-or) !important;
  border: 2px solid var(--hb-marine-900) !important;
}
.elementor-menu-cart__footer-buttons .elementor-button--checkout {
  background: var(--hb-or) !important;
  color: var(--hb-marine-900) !important;
  border: 2px solid var(--hb-or) !important;
}
.elementor-menu-cart__close-button { color: var(--hb-gris-600) !important; }


/* ==========================================================================
   11 · COMMANDE
   ========================================================================== */
.woocommerce form .form-row { margin-bottom: 18px; }
.woocommerce form .form-row label {
  display: block;
  margin-bottom: 7px;
  font-size: 14px;
  font-weight: 600;
  color: var(--hb-encre);
}
.woocommerce form .form-row .required {
  color: var(--hb-alerte);
  text-decoration: none;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-account input.input-text,
.select2-container .select2-selection--single {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--hb-bordure) !important;
  border-radius: var(--hb-r-sm) !important;
  background: var(--hb-blanc);
  font-size: 16px;            /* 16px : empêche le zoom automatique sur iOS */
  color: var(--hb-encre);
  transition: border-color var(--hb-t), box-shadow var(--hb-t);
}
.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(--hb-marine-700) !important;
  box-shadow: 0 0 0 3px rgba(14, 42, 94, .14);
}
.woocommerce form .form-row textarea { min-height: 110px; }

/* Erreur attachée au champ, pas seulement en haut de page */
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select {
  border-color: var(--hb-alerte) !important;
  box-shadow: 0 0 0 3px rgba(179, 38, 30, .12);
}
.woocommerce form .form-row.woocommerce-validated input.input-text {
  border-color: var(--hb-succes) !important;
}

/* Récapitulatif et moyens de paiement */
.woocommerce-checkout #payment {
  background: var(--hb-blanc) !important;
  border: 1px solid var(--hb-bordure);
  border-radius: var(--hb-r-md);
  padding: 18px;
}
.woocommerce-checkout #payment ul.payment_methods {
  border-bottom: 1px solid var(--hb-bordure);
  padding: 0 0 14px;
  margin: 0 0 14px;
}
.woocommerce-checkout #payment ul.payment_methods li {
  list-style: none;
  padding: 10px 0;
}
.woocommerce-checkout #payment div.payment_box {
  background: var(--hb-fond) !important;
  border-radius: var(--hb-r-sm);
  font-size: 14px;
  color: var(--hb-encre);
}
.woocommerce-checkout #payment div.payment_box::before { display: none !important; }
.woocommerce-checkout #place_order { width: 100%; min-height: 54px; font-size: 16px; }

/* Note au-dessus des champs de facturation : explique pourquoi l'adresse est
   facultative. Discrète, c'est une explication, pas une alerte. */
.hb-note-facturation {
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--hb-gris-600);
}

/* Bloc « Retrait au gymnase », injecté juste avant les moyens de paiement par
   l'extrait PHP « HBCB - Retrait au gymnase ». Il ne remplace pas la ligne
   d'expédition de WooCommerce : il dit au licencié OÙ et QUAND il récupère sa
   commande, ce que la ligne « Expédition : Retrait au gymnase » ne dit pas.
   Filet jaune à gauche plutôt qu'un fond coloré : lisible, et le bloc ne se
   confond pas avec un message d'erreur. */
.hb-retrait {
  /* Le conteneur de récapitulatif applique une disposition en colonnes à ses
     enfants : sans ces trois déclarations, le titre et les paragraphes du bloc
     se retrouvent côte à côte. On réaffirme la mise en page du bloc plutôt que
     d'aller désactiver celle du parent, qui sert au reste du récapitulatif. */
  display: block !important;
  width: 100% !important;
  column-count: 1 !important;
  margin: 0 0 18px;
  padding: 14px 16px;
  border: 1px solid var(--hb-bordure);
  border-left: 4px solid var(--hb-or);
  border-radius: var(--hb-r-sm);
  background: var(--hb-fond);
}
.hb-retrait__titre {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 700;
  color: var(--hb-marine-900);
}
.hb-retrait p {
  margin: 0 0 6px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--hb-encre);
}
.hb-retrait p:last-child { margin-bottom: 0; }
.hb-retrait > * { display: block !important; width: 100% !important; flex: none !important; }
.hb-retrait strong { color: var(--hb-marine-900); }

/* Page de confirmation */
.woocommerce-order .woocommerce-order-overview,
.woocommerce-order table.shop_table {
  background: var(--hb-blanc);
  border: 1px solid var(--hb-bordure);
  border-radius: var(--hb-r-md);
  padding: 18px;
}
.woocommerce-order .woocommerce-order-overview li {
  border-right: 1px solid var(--hb-bordure);
  color: var(--hb-gris-600);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.woocommerce-order .woocommerce-order-overview li strong {
  display: block;
  margin-top: 4px;
  font-size: 16px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--hb-marine-900);
}


/* ==========================================================================
   12 · MON COMPTE
   La navigation verticale par défaut est une liste nue. On la transforme en
   bloc lisible, et en barre défilante sur mobile.
   ========================================================================== */
.woocommerce-account .woocommerce-MyAccount-navigation {
  background: var(--hb-blanc);
  border: 1px solid var(--hb-bordure);
  border-radius: var(--hb-r-md);
  padding: 8px;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul {
  margin: 0; padding: 0; list-style: none;
}
.woocommerce-account .woocommerce-MyAccount-navigation li { margin: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: flex;
  align-items: center;
  min-height: 46px;
  padding: 0 14px;
  border-radius: var(--hb-r-sm);
  color: var(--hb-encre);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition: background-color var(--hb-t), color var(--hb-t);
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
  background: var(--hb-fond);
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
  background: var(--hb-marine-900);
  color: var(--hb-blanc);
}
.woocommerce-account .woocommerce-MyAccount-content {
  background: var(--hb-blanc);
  border: 1px solid var(--hb-bordure);
  border-radius: var(--hb-r-md);
  padding: 24px;
}
.woocommerce-account .woocommerce-MyAccount-content table.shop_table {
  border: none;
  background: transparent;
}
.woocommerce-account .woocommerce-MyAccount-content table.shop_table th {
  background: transparent;
  color: var(--hb-gris-600);
  border-bottom: 1px solid var(--hb-bordure);
}
.woocommerce-account .woocommerce-orders-table__cell-order-status {
  font-weight: 700;
  color: var(--hb-marine-900);
}

/* Connexion et inscription côte à côte */
.woocommerce-account:not(.logged-in) .woocommerce form.login,
.woocommerce-account:not(.logged-in) .woocommerce form.register {
  background: var(--hb-blanc);
  border: 1px solid var(--hb-bordure);
  border-radius: var(--hb-r-md);
  padding: 26px;
}


/* ==========================================================================
   13 · MESSAGES
   ========================================================================== */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 10px;
  border: 1px solid var(--hb-bordure);
  border-left-width: 4px;
  border-radius: var(--hb-r-sm);
  background: var(--hb-blanc) !important;
  color: var(--hb-encre);
  padding: 15px 18px !important;
  margin-bottom: 22px;
  font-size: 15px;
  list-style: none;
}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { display: none !important; }
.woocommerce-message { border-left-color: var(--hb-succes); }
.woocommerce-info    { border-left-color: var(--hb-marine-700); }
.woocommerce-error   { border-left-color: var(--hb-alerte); }
.woocommerce-message .button,
.woocommerce-info .button { margin-left: auto; }


/* ==========================================================================
   14 · ÉTATS VIDES
   Un panier vide ou une collection vide sont des moments de navigation,
   pas des culs-de-sac. Toujours une porte de sortie.
   ========================================================================== */
.hb-vide {
  text-align: center;
  padding: 56px 24px;
  background: var(--hb-blanc);
  border: 1px dashed var(--hb-bordure);
  border-radius: var(--hb-r-lg);
}
.hb-vide__titre {
  font-size: 20px;
  font-weight: 700;
  color: var(--hb-marine-900);
  margin: 0 0 8px;
}
.hb-vide p {
  color: var(--hb-gris-600);
  margin: 0 auto 20px;
  max-width: 44ch;
}
.woocommerce .cart-empty { font-size: 18px; color: var(--hb-marine-900); }


/* ==========================================================================
   15 · ACCESSIBILITÉ
   ========================================================================== */
.woocommerce a:focus-visible,
.woocommerce button:focus-visible,
.woocommerce input:focus-visible,
.woocommerce select:focus-visible,
.hb-card a:focus-visible,
.hb-collections a:focus-visible {
  outline: 3px solid var(--hb-or);
  outline-offset: 2px;
  border-radius: 4px;
}
/* Le focus ne doit jamais passer sous la barre mobile */
@media (max-width: 767px) {
  .single-product :focus-visible { scroll-margin-bottom: 96px; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .hb-card:hover { transform: none; }
  .hb-card:hover .hb-card__media img { transform: none; }
}

/* Lecteurs d'écran uniquement */
.hb-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}


/* ==========================================================================
   16 · RESPONSIVE
   Points de rupture alignés sur ceux d'Elementor :
   tablette ≤ 1024px, mobile ≤ 767px.
   Elementor hérite vers le bas uniquement : une valeur posée sur mobile ne
   remonte jamais vers la tablette.
   ========================================================================== */

/* ---------- Tablette ---------- */
@media (max-width: 1024px) {
  .hb-card__titre { font-size: 16px; }
  .single-product .woocommerce-tabs ul.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    row-gap: 10px;
  }
  .single-product .woocommerce-tabs ul.tabs li { margin: 0 !important; }
  .woocommerce-account .woocommerce-MyAccount-navigation li a { min-height: 48px; }
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
  .hb-card__body { padding: 13px 13px 15px; }
  .hb-card__titre { font-size: 15px; }
  .hb-card__cat { font-size: 11px; }
  .hb-badge { height: 24px; padding: 0 9px; font-size: 11px; top: 9px; left: 9px; }

  /* Carte native : retrait réduit, l'image suit par la même marge négative */
  .woocommerce ul.products li.product { padding: 0 13px 14px !important; }
  .woocommerce ul.products li.product a img {
    width: calc(100% + 26px) !important;
    margin: 0 -13px 12px !important;
  }
  .woocommerce ul.products li.product h2.woocommerce-loop-product__title,
  .woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 15px !important; }
  .woocommerce ul.products li.product .price { font-size: 16px !important; }

  /* Navigation des collections : une seule ligne qui défile au doigt */
  .hb-collections {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin-inline: -20px;
    padding-inline: 20px;
    scroll-snap-type: x proximity;
  }
  .hb-collections::-webkit-scrollbar { display: none; }
  .hb-collections a { flex: 0 0 auto; scroll-snap-align: start; }

  /* Onglets produit : même principe */
  .single-product .woocommerce-tabs ul.tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 20px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .single-product .woocommerce-tabs ul.tabs::-webkit-scrollbar { display: none; }
  .single-product .woocommerce-tabs ul.tabs li { flex: 0 0 auto; white-space: nowrap; }
  .single-product .woocommerce-tabs .panel { min-height: 0; }

  /* Panier : le tableau devient une pile de fiches */
  .woocommerce-cart table.shop_table_responsive thead { display: none; }
  .woocommerce-cart table.shop_table_responsive tr {
    display: block;
    border: 1px solid var(--hb-bordure);
    border-radius: var(--hb-r-md);
    background: var(--hb-blanc);
    margin-bottom: 12px;
    padding: 12px;
  }
  .woocommerce-cart table.shop_table_responsive td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    border: none;
    padding: 7px 0 !important;
    text-align: right !important;
  }
  .woocommerce-cart table.shop_table_responsive td::before {
    content: attr(data-title);
    font-size: 13px;
    font-weight: 600;
    color: var(--hb-gris-600);
    text-align: left;
  }
  .woocommerce-cart table.shop_table_responsive td.product-remove { justify-content: flex-end; }
  .woocommerce-cart table.shop_table_responsive td.product-remove::before { content: ""; }
  /* En pile, le centrage des colonnes chiffrées n'a plus de sens */
  .woocommerce-cart table.shop_table td.product-price,
  .woocommerce-cart table.shop_table td.product-quantity,
  .woocommerce-cart table.shop_table td.product-subtotal { text-align: right !important; }
  .woocommerce-cart table.shop_table td.product-quantity .quantity { margin-inline: 0; }

  /* Le bouton d'achat occupe toute la largeur */
  .woocommerce div.product form.cart .button,
  .woocommerce .checkout-button,
  .woocommerce #place_order { width: 100%; }
  .woocommerce div.product form.cart .quantity { margin-bottom: 12px; }

  /* Mon compte : navigation horizontale défilante */
  .woocommerce-account .woocommerce-MyAccount-navigation ul {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation ul::-webkit-scrollbar { display: none; }
  .woocommerce-account .woocommerce-MyAccount-navigation li a { white-space: nowrap; }
  .woocommerce-account .woocommerce-MyAccount-content { padding: 18px; }

  /* Messages : le bouton passe dessous plutôt que de serrer le texte */
  .woocommerce-message .button,
  .woocommerce-info .button { margin-left: 0; width: 100%; }
}

/* ---------- Petits écrans ---------- */
@media (max-width: 480px) {
  /* Les deux boutons de la grille s'empilent au lieu de se serrer */
  .woocommerce a.added_to_cart,
  .woocommerce-page a.added_to_cart {
    margin-left: 0 !important;
    margin-top: 8px !important;
    width: 100%;
    justify-content: center !important;
  }
}

@media (max-width: 400px) {
  .hb-card__pied { flex-direction: column; align-items: stretch; }
  .hb-card__pied .hb-btn { width: 100%; }
}

/* ==========================================================================
   FIN
   ========================================================================== */