/* Catalogue — fil d'Ariane, recherche, facettes multi-sélection, chips, grille, pagination.
   Le tiroir de filtres sous 900 px est ouvert par storefront.js (`[data-gbs-filters]` bascule
   `.gbs-filters.is-open`) ; tout le reste fonctionne sans JavaScript.
   La pastille d'objectif `.gbs-product-card__tag` est stylée dans tone.css : elle est commune à
   toutes les surfaces de carte, elle n'est donc PAS redéfinie ici. */

.gbs-sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;white-space:nowrap}

.gbs-catalog{padding-bottom:90px;overflow-x:clip}

/* Fil d'Ariane — Accueil / Catalogue / sélection, comme le template. */
.gbs-catalog-breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:26px 0 30px;color:var(--muted);font-size:13px}
.gbs-catalog-breadcrumb a{color:var(--muted);text-decoration:underline;text-underline-offset:5px}
.gbs-catalog-breadcrumb a:hover,.gbs-catalog-breadcrumb a:focus-visible{color:var(--green)}
.gbs-catalog-breadcrumb span[aria-hidden]{color:var(--line-strong)}
.gbs-catalog-breadcrumb [aria-current]{color:var(--ink)}
.gbs-catalog .woocommerce-breadcrumb{display:none}

.gbs-catalog-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.5fr);align-items:end;gap:34px;margin-bottom:26px;padding-bottom:28px;border-bottom:1px solid var(--line-strong)}
.gbs-catalog-head h1{margin:.05em 0 0;font-size:clamp(44px,5.9vw,84px);font-weight:700;letter-spacing:normal;line-height:.94;overflow-wrap:anywhere}
.gbs-catalog-head__note{margin:0;color:var(--muted);font-size:14px;line-height:1.6}

/* Chips de filtres actifs : un clic retire la valeur, c'est un lien — pas de JavaScript requis. */
.gbs-catalog-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.gbs-chip{display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:0 11px;border:1px solid var(--line-strong);border-radius:999px;background:var(--paper);color:var(--ink);font-size:12px;font-weight:700;text-decoration:none}
.gbs-chip svg{width:13px;height:13px;flex:0 0 13px;color:var(--muted)}
.gbs-chip:hover,.gbs-chip:focus-visible{border-color:var(--green);color:var(--green)}
.gbs-chip:hover svg,.gbs-chip:focus-visible svg{color:var(--green)}
.gbs-chip--clear{border-style:dashed;color:var(--green)}

/* Barre d'outils : compteur, déclencheur mobile, recherche, tri. */
.gbs-catalog-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:22px}
.gbs-catalog-count{margin:0;min-width:max-content;color:var(--ink);font-size:13px;font-variant-numeric:tabular-nums}
.gbs-catalog-count strong{font-weight:800}
.gbs-catalog-search{display:flex;flex:1;align-items:center;gap:8px;min-width:min(100%,240px);max-width:430px}
.gbs-catalog-search input{width:100%;min-height:46px;padding:0 18px;border:1px solid var(--line-strong);border-radius:999px;background:var(--paper);color:var(--ink);font:inherit;font-size:15px}
.gbs-catalog-search input::placeholder{color:var(--muted)}
.gbs-catalog-search input:focus-visible{outline:2px solid var(--green);outline-offset:1px}
.gbs-catalog-search__submit{display:grid;place-items:center;width:46px;height:46px;flex:0 0 46px;padding:0;border:1px solid var(--green);border-radius:50%;background:var(--green);color:#fff;cursor:pointer}
.gbs-catalog-search__submit svg{width:17px;height:17px}
.gbs-catalog-sort{display:flex;align-items:center;gap:6px;margin-inline-start:auto}
.gbs-catalog-sort select{min-height:46px;padding:0 13px;border:1px solid var(--line-strong);border-radius:13px;background:var(--paper);color:var(--ink);font:inherit;font-size:13px}
.gbs-catalog-sort__submit{display:grid;place-items:center;width:46px;height:46px;flex:0 0 46px;padding:0;border:1px solid var(--line-strong);border-radius:13px;background:var(--paper);color:var(--green);cursor:pointer}
.gbs-catalog-sort__submit svg{width:15px;height:15px;transform:rotate(-90deg)}
.gbs-rtl .gbs-catalog-sort__submit svg{transform:rotate(90deg)}

.gbs-filter-trigger{display:none;align-items:center;gap:8px;min-height:46px;padding:0 15px;border:1px solid var(--green);border-radius:13px;background:var(--green);color:#fff;font:inherit;font-size:13px;font-weight:800;text-decoration:none;cursor:pointer}
.gbs-filter-trigger__count{display:grid;place-items:center;min-width:21px;height:21px;padding:0 5px;border-radius:999px;background:rgba(255,255,255,.2);font-size:11px;font-variant-numeric:tabular-nums}

.gbs-catalog-layout{display:grid;grid-template-columns:248px minmax(0,1fr);gap:26px;align-items:start}
.gbs-catalog-results{min-width:0}

/* Panneau de facettes. Chaque groupe est un <details> : ouvert/fermé sans JavaScript, et les
   deux premiers (plus ceux qui portent une sélection) s'ouvrent d'office comme le template. */
/* `display:block` et non `grid` : une zone de grille épouse exactement la hauteur de son item,
   donc `position:sticky` n'y a aucune course et la barre « Afficher les résultats » ne se
   collait pas au bas du panneau défilant (mesuré : top 1225 px pour une fenêtre de 1000). */
.gbs-filters{position:sticky;top:106px;display:block;max-height:calc(100dvh - 126px);overflow:auto;border:1px solid var(--line);border-radius:18px;background:var(--ivory);scrollbar-width:thin}
.gbs-filters__heading{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:56px;padding:0 16px;border-bottom:1px solid var(--line)}
.gbs-filters__heading strong{font-size:15px;font-weight:700}
.gbs-filters__clear{min-height:44px;display:inline-flex;align-items:center;color:var(--green);font-size:12px;font-weight:700;text-decoration:underline;text-underline-offset:4px}
.gbs-filters__clear.is-idle{color:var(--muted);text-decoration:none;opacity:.55}
.gbs-filters__close{display:none;place-items:center;width:44px;height:44px;padding:0;border:0;background:transparent;color:var(--ink);cursor:pointer}
.gbs-filters__close svg{width:16px;height:16px}

.gbs-filter-group{border-bottom:1px solid var(--line)}
.gbs-filter-group summary{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:50px;padding:0 16px;font-size:13px;font-weight:700;cursor:pointer;list-style:none}
.gbs-filter-group summary::-webkit-details-marker{display:none}
.gbs-filter-group summary::marker{content:''}
.gbs-filter-group summary svg{width:14px;height:14px;flex:0 0 14px;color:var(--muted);transition:transform .18s ease}
.gbs-filter-group[open] summary svg{transform:rotate(180deg)}
.gbs-filter-group summary:hover{color:var(--green)}
.gbs-filter-options{display:grid;gap:2px;padding:0 10px 12px}
.gbs-filter-option{display:grid;grid-template-columns:18px minmax(0,1fr) auto;align-items:center;gap:9px;min-height:40px;padding:4px 7px;border-radius:10px;font-size:12px;line-height:1.35;cursor:pointer}
.gbs-filter-option:hover{background:rgba(33,94,75,.08)}
.gbs-filter-option input{width:18px;height:18px;margin:0;accent-color:var(--green)}
.gbs-filter-option span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gbs-filter-option small{color:var(--muted);font-size:11px;font-variant-numeric:tabular-nums}
.gbs-filter-option:has(input:checked){background:rgba(33,94,75,.1)}
.gbs-filter-option:has(input:checked) span{font-weight:700}
.gbs-filters__apply{position:sticky;bottom:0;padding:12px;background:linear-gradient(to top,var(--ivory) 68%,transparent)}
.gbs-filters__apply .gbs-button{width:100%}

.gbs-catalog .gbs-products-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px 16px}

/* Carte de catalogue. Les rangées sont posées EN HAUT : l'espace résiduel d'une rangée de grille
   tombe sous le bloc prix, il ne s'insère plus entre le titre et le prix. Avant correction, la
   combinaison `grid-template-rows:auto 1fr` + `align-self:end` creusait jusqu'à 84 px de vide. */
.gbs-catalog .gbs-product-card{display:grid;grid-template-rows:auto auto auto;align-content:start;min-width:0}
.gbs-catalog .gbs-product-card__link{display:grid;grid-template-rows:auto minmax(40px,auto);align-content:start;gap:12px}
.gbs-catalog .gbs-product-card__media{position:relative;display:grid;place-items:center;aspect-ratio:1;border:0;border-radius:19px;background:linear-gradient(145deg,#eee8df,#e0e8da);overflow:hidden}
.gbs-catalog .gbs-product-card__media em{position:absolute;z-index:2;top:12px;left:12px;padding:6px 10px;border-radius:999px;background:var(--gold-soft);font-size:12px;font-weight:800;font-style:normal;letter-spacing:.07em;text-transform:uppercase}
.gbs-rtl .gbs-catalog .gbs-product-card__media em{left:auto;right:12px}
.gbs-catalog .gbs-product-card__media img{position:absolute;inset:8%;width:84%;height:84%;object-fit:contain;filter:drop-shadow(0 5px 9px rgba(0,0,0,.14))}
.gbs-catalog .gbs-product-card h3{display:-webkit-box;margin:0;font-size:14px;line-height:1.4;font-weight:700;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* Note et nombre d'avis — repère de confiance du template, posé entre le titre et le prix. */
.gbs-catalog .gbs-product-card__rating{display:inline-flex;align-items:center;gap:5px;margin-top:8px;color:var(--green-dark);font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums}
.gbs-catalog .gbs-product-card__rating svg{width:13px;height:13px;flex:0 0 13px}

/* `min-height` = la hauteur du bouton (46px, 48px sous 640px), plus celle de « prix + libellé de
   stock » : le catalogue ne rend plus « Disponible », donc 58px n'y laissaient qu'un creux sous le
   prix. Le bouton, qui couvre `grid-row:1/3`, tient le plancher à lui seul. Mesuré : la ligne de
   prix reste alignée sur toutes les cartes, et la carte en rupture (seule à garder son `<small>`)
   dépasse de 3px sans décaler quoi que ce soit. */
.gbs-catalog .gbs-product-card__buy{align-self:start;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;gap:1px 9px;margin-top:14px;min-height:46px}
.gbs-catalog .gbs-product-card__buy>span{font-size:20px;font-weight:800;letter-spacing:-.025em;font-variant-numeric:tabular-nums}
/* Prix barré : `gbs_storefront_product_price_html()` rend `<del>` + `<ins>` sur les fiches en
   promotion. Le barré passe au-dessus, en petit, et `<ins>` reprend le corps du prix courant. */
.gbs-catalog .gbs-product-card__buy>span del{display:block;color:var(--muted);font-size:12px;font-weight:700;text-decoration:line-through}
.gbs-catalog .gbs-product-card__buy>span ins{display:block;background:transparent;color:inherit;text-decoration:none}
/* Sur le catalogue le seul `<small>` encore rendu est « Indisponible » : il sortait dans le vert
   de la marque, soit une rupture peinte en couleur de succès. Neutre. */
.gbs-catalog .gbs-product-card__buy small{color:var(--muted);font-size:12px}
.gbs-catalog .gbs-add{position:relative;isolation:isolate;grid-column:2;grid-row:1/3;align-self:center;min-width:116px;min-height:46px;padding:4px 5px 4px 13px;border-radius:999px;background:linear-gradient(90deg,var(--green),var(--green-dark));color:#fff;display:flex;align-items:center;justify-content:space-between;gap:8px}
.gbs-catalog .gbs-add i{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.14);font-style:normal;font-size:22px}
/* ── « Ajouter » : miroir des états d'interaction écrits pour l'accueil ────────────────────
   Le bouton est produit par la MÊME fonction (`gbs_product_card()`) mais habillé par une
   feuille différente : `home.css` n'est enqueue que sur `is_front_page()`, `catalog.css` que
   sur `is_shop() || is_product_taxonomy()`. Et la règle ne peut pas être mutualisée dans
   `base.css` : `.gbs-catalog .gbs-add` vaut (0,2,0), autant que `.gbs-add:hover`, et
   `catalog.css` charge APRÈS `base.css` — une règle partagée serait donc écrasée ici.
   D'où cette duplication, volontaire. Le raisonnement complet est en tête du bloc jumeau
   dans `home.css` (dégradé à deux pôles repris de mood.com, calque en opacité, isolation).

   Le catalogue n'avait même pas le zoom de packshot de l'accueil : la transition d'image est
   donc déclarée ici, sinon le `scale` sauterait. */
.gbs-catalog .gbs-add:before{content:"";position:absolute;z-index:-1;inset:0;border-radius:inherit;background:linear-gradient(90deg,#0c3427,var(--green));opacity:0}
.gbs-catalog .gbs-add i{transition:background-color .2s ease,color .2s ease}
.gbs-catalog .gbs-add:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.gbs-catalog .gbs-add:active:before{opacity:1;background:linear-gradient(90deg,var(--green-dark),#0c3427)}
.gbs-catalog .gbs-product-card__media img{transition:transform .24s ease}
/* Bornage >640px identique à `home.css` (le raisonnement complet y est) : `(hover:hover) and
   (pointer:fine)` reste vrai dans une fenêtre desktop rétrécie, et la surcharge mobile du
   calque y est le dégradé d'appui — le survol seul faisait paraître le bouton enfoncé. */
@media (hover:hover) and (pointer:fine){
  .gbs-catalog .gbs-product-card__link:hover img{transform:scale(1.035)}
  .gbs-catalog .gbs-product-card:has(.gbs-add:hover) .gbs-product-card__media img{transform:scale(1.035)}
}
@media (hover:hover) and (pointer:fine) and (min-width:641px){
  .gbs-catalog .gbs-add:before{transition:opacity .2s ease}
  .gbs-catalog .gbs-add:hover:before{opacity:1}
  .gbs-catalog .gbs-add:hover i{background-color:#fff;color:var(--green-dark)}
}
.gbs-catalog .gbs-product-card__buy .added_to_cart{display:none}
.gbs-catalog .gbs-add.loading{opacity:.72}
.gbs-catalog .gbs-add.added i{animation:gbsAddDone 620ms cubic-bezier(.17,.74,.26,1)}
/* `@keyframes` REDÉCLARÉ : celui de `home.css` n'existe pas ici, et une `animation` dont le
   nom n'est pas défini est inerte SANS la moindre erreur — panne muette classique. */
@keyframes gbsAddDone{0%{transform:scale(1)}35%{transform:scale(1.18)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){
  .gbs-catalog .gbs-add:before,.gbs-catalog .gbs-add i,.gbs-catalog .gbs-product-card__media img{transition:none}
}

.gbs-catalog-empty{display:grid;justify-items:center;gap:10px;min-height:260px;align-content:center;padding:40px 20px;border:1px solid var(--line);border-radius:22px;background:var(--paper);text-align:center}
.gbs-catalog-empty h2{margin:0;font-size:26px}
.gbs-catalog-empty p{margin:0;color:var(--muted);font-size:14px}
.gbs-catalog-empty .gbs-button{margin-top:8px}

/* `woocommerce_pagination()` rend un `<ul class="page-numbers">` dont les `<li>` n'ont AUCUNE
   classe : `list-style:none` et `padding:0` sont normalement posés par `woocommerce-layout.css`,
   que `functions.php` dequeue en bloc (`woocommerce_enqueue_styles` → tableau vide). Sans ce
   reset, le `li` retombe sur la feuille UA et reste `display:list-item` — la blockification
   imposée par le `display:flex` du parent ne le convertit PAS, `list-item` étant déjà de niveau
   bloc — donc son `::marker` se dessinait en `outside`, un « • » dans chaque `gap`. Le
   `padding-inline-start:40px` de la feuille UA décalait en prime la rangée de 20px à droite
   malgré `justify-content:center`. Même défaut que la grille shortcode de `page.css`. */
.woocommerce-pagination{margin-top:50px}
.woocommerce-pagination ul{display:flex!important;flex-wrap:wrap;justify-content:center;gap:8px;border:0!important;list-style:none;margin:0;padding:0}
.woocommerce-pagination li{border:0!important;list-style:none}
/* `.dots` est l'ellipsis des pages sautées, pas une destination : lui donner le cercle bordé
   d'un numéro le fait passer pour un lien. Même hauteur pour rester sur la ligne de base. */
.woocommerce-pagination a,.woocommerce-pagination span:not(.dots){min-width:46px;height:46px!important;border:1px solid var(--line)!important;border-radius:50%;display:grid!important;place-items:center;font-variant-numeric:tabular-nums}
.woocommerce-pagination .dots{min-width:24px;height:46px;display:grid;place-items:center;border:0;color:var(--muted)}
.woocommerce-pagination .current{background:var(--green)!important;color:#fff!important}

.gbs-bundle-archive{padding-bottom:90px}
.gbs-bundle-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.gbs-bundle-grid .gbs-bundle-card{border:1px solid var(--line);border-radius:24px;background:#fff;overflow:hidden}
.gbs-bundle-grid .gbs-bundle-card>a{height:100%;display:grid;grid-template-rows:230px auto auto 1fr;gap:10px;padding:15px}
.gbs-bundle-grid .gbs-bundle-card__visual{display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:18px;background:linear-gradient(145deg,#e8e8df,#dde6d9)}
.gbs-bundle-grid .gbs-bundle-card__visual img{width:38%;height:82%;object-fit:contain;margin-inline:-6%}
.gbs-bundle-grid h3{margin:0;font-size:22px}
.gbs-bundle-grid p{margin:0;color:#686860}
.gbs-bundle-card__price{display:flex;align-items:baseline;gap:8px;align-self:end}
.gbs-bundle-card__price strong{font-size:24px}

@media(max-width:1300px){
.gbs-catalog .gbs-products-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.gbs-bundle-grid{grid-template-columns:repeat(3,1fr)}
}

@media(max-width:900px){
.gbs-catalog-head{grid-template-columns:1fr;align-items:start;gap:14px}
.gbs-catalog-layout{grid-template-columns:1fr}
.gbs-filter-trigger{display:inline-flex}
.gbs-catalog-sort{margin-inline-start:0}
.gbs-catalog-search{order:4;flex-basis:100%;max-width:none}
/* `visibility` NE se transitionne PAS avec `transform` : sur une page chargée directement sur
   `#gbs-filters`, la transition combinée gelait le panneau sur son état fermé (mesuré :
   `:target` reconnu, `translateX(105%)` conservé). Elle bascule donc sèchement — tout de suite
   à l'ouverture, après la glissade à la fermeture. */
.gbs-filters{position:fixed;z-index:430;inset:0 0 0 auto;width:min(400px,92vw);max-height:none;border:0;border-radius:0;box-shadow:-18px 0 46px rgba(23,23,19,.14);transform:translateX(105%);visibility:hidden;transition:transform .22s ease,visibility 0s linear .22s}
.gbs-rtl .gbs-filters{inset:0 auto 0 0;box-shadow:18px 0 46px rgba(23,23,19,.14);transform:translateX(-105%)}
/* `:target` double la bascule JavaScript : si storefront.js ne s'exécute pas — un asset servi
   depuis un cache navigateur périmé suffit —, le tiroir reste atteignable par le seul lien. */
.gbs-filters.is-open{transform:translateX(0);visibility:visible;transition:transform .22s ease,visibility 0s}
/* Le chemin `:target` ouvre SANS transition : une transition de `transform` posée dès la
   première computation de style ne démarre pas, et le panneau restait gelé sur sa position
   fermée alors que `:target` était bien reconnu (mesuré ; `transition:none` le débloque). */
.gbs-filters:target{transform:translateX(0);visibility:visible;transition:none}
.gbs-rtl .gbs-filters.is-open,.gbs-rtl .gbs-filters:target{transform:translateX(0)}
.gbs-filters__heading{position:sticky;top:0;z-index:2;background:var(--ivory)}
.gbs-filters__close{display:grid}
.gbs-catalog .gbs-products-grid{grid-template-columns:repeat(3,1fr)}
.gbs-bundle-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:640px){
.gbs-catalog-breadcrumb{margin:16px 0 18px;font-size:12px}
.gbs-catalog-head{margin-bottom:18px;padding-bottom:20px}
.gbs-catalog-head h1{font-size:clamp(34px,11vw,43px)}
.gbs-catalog-head__note{font-size:13px}
.gbs-catalog-toolbar{gap:8px}
.gbs-catalog-count{order:1}
.gbs-filter-trigger{order:2}
.gbs-catalog-sort{order:3;flex:1}
.gbs-catalog-sort select{width:100%;min-width:0}
.gbs-catalog .gbs-products-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 11px}
.gbs-catalog .gbs-product-card__link{grid-template-rows:auto minmax(40px,auto);gap:10px}
.gbs-catalog .gbs-product-card h3{font-size:14px}
.gbs-catalog .gbs-product-card__buy{grid-template-columns:1fr 48px}
.gbs-catalog .gbs-add{width:48px;min-width:48px;height:48px;padding:5px;justify-content:center;gap:0;font-size:0}
.gbs-catalog .gbs-add i{background:transparent}
/* Pilule réduite à un cercle : plus de côté clair à déplacer, et le survol est de toute façon
   neutralisé (pointeur grossier). `:active` assombrit uniformément. */
.gbs-catalog .gbs-add:before{background:linear-gradient(90deg,var(--green-dark),#0c3427)}
.gbs-catalog-empty{padding:30px 16px}
.gbs-bundle-grid{grid-template-columns:1fr}
.gbs-bundle-grid .gbs-bundle-card>a{grid-template-rows:210px auto auto 1fr}
}

/* ═══ Fil d'Ariane du catalogue — plancher tactile ════════════════════════════════════════════
   Mesure (emulation d'appareil reelle, 320 et 390 px, FR et /ar/) : les liens du fil d'Ariane
   du catalogue font 39x18 et 59x18 px sur /shop/ et /categorie-produit/*. WCAG 2.2 AA 2.5.8
   exige 24x24 ; le gabarit produit est deja a 44 (`.gbs-product .woocommerce-breadcrumb a`,
   product.css). Le catalogue etait le dernier fil d'Ariane laisse a la line-height.

   Deux verrous rendaient toute regle generique inoperante ici, d'ou cette regle dediee :
   `product.css` n'est PAS enqueue sur /shop/ (feuilles servies : base, brands, catalog, mega,
   tone), et la ligne 17 masque le fil d'Ariane WooCommerce natif du catalogue.

   Borne a 900 px — le meme palier que la bascule mobile du catalogue : au-dela, le pointeur est
   fin et un fil d'Ariane de 44 px de haut creuserait inutilement le haut de page.

   MARGES COMPENSEES : `align-items:center` repartit la hauteur gagnee en parts INVISIBLES egales
   au-dessus et au-dessous du texte. Sans compensation le <h1> descendait de 186 a 212 px (mesure
   a 320 px) — 26 px de vide au-dessus de la ligne de flottaison sur toutes les pages catalogue.
   On retire donc la moitie du gain a chaque marge du conteneur : le texte reste exactement ou il
   etait, seule la surface tactile grandit.

   LA COMPENSATION DEPEND DE LA TAILLE DE POLICE, D'OU DEUX PALIERS. Sous 640 px la police vaut
   12 px (l.209), la ligne 18 px, le gain 44-18 = 26, la moitie 13 : marges `16-13 / 18-13`.
   Entre 641 et 900 px la police vaut 13 px (l.12), la ligne 19,5 px, le gain 24,5, la moitie
   ~12 : marges `26-12 / 30-12`. Compenser 13 aux deux paliers faisait REMONTER le <h1> de 1,5 px
   dans la bande haute. Si l.12 ou l.209 bouge, refaire ce calcul.

   INVARIANT : la compensation ne tient que tant que le fil d'Ariane occupe UNE SEULE ligne. Le
   conteneur est `flex-wrap:wrap` ; chaque ligne supplementaire contenant un <a> couterait 44 px
   non compenses. Le fil le plus long reellement produit (« Accueil / Catalogue / Vitamines »)
   mesure 196 px pour 308 disponibles a 320 px, et son dernier element est un `<span aria-current>`
   non cliquable — donc hors du plancher, et a 18 px il resterait compense. */
@media(max-width:900px){
  .gbs-catalog-breadcrumb{margin-block:14px 18px}
  .gbs-catalog-breadcrumb a{display:inline-flex;align-items:center;min-height:44px}
}
@media(max-width:640px){
  .gbs-catalog-breadcrumb{margin-block:3px 5px}
}