.gbs-bundle-single,.gbs-bundle-archive{padding-bottom:clamp(76px,9vw,132px)}
.gbs-bundle-single .woocommerce-breadcrumb,.gbs-bundle-archive .woocommerce-breadcrumb{margin:20px 0 28px;color:#686860;font-size:14px;line-height:1.45;white-space:nowrap;overflow-x:auto;scrollbar-width:none}.gbs-bundle-single .woocommerce-breadcrumb a,.gbs-bundle-archive .woocommerce-breadcrumb a{text-decoration:underline;text-underline-offset:5px}
/* Single bundle */
/* Proportions du template : la colonne de texte est la plus large des deux (.92 / 1.08). */
.gbs-bundle-hero{display:grid;grid-template-columns:minmax(0,.92fr) minmax(420px,1.08fr);gap:clamp(38px,5vw,78px);align-items:center;clear:both;isolation:isolate}
/* `align-items:flex-end` et non `center`. Centrer alignait les BOITES sur un axe median,
et leurs hauteurs different (78 %, 86 % pour la deuxieme) : les bas divergeaient deja.
Mesure du 18/08 au bas d'ENCRE, desktop 1440 : 102,6 px d'ecart sur beaute-de-l-interieur,
35,9 sur routine-densite-priorin. Le defaut touchait les 11 packs.
Meme parti que `.gbs-authenticity__products` (home.css:327), qui compose exactement de la
meme facon et pose ses packshots par le bas depuis toujours. */
.gbs-bundle-hero__visual{position:relative;min-width:0;aspect-ratio:1;border:1px solid var(--line);border-radius:32px;background:radial-gradient(circle at 50% 42%,#fbf6e9 0,#e8e6dc 62%,#d5ddcc 100%);display:flex;align-items:flex-end;justify-content:center;direction:ltr;overflow:hidden;padding:8%;isolation:isolate}
.gbs-bundle-discount{position:absolute;z-index:4;top:14px;inset-inline-start:14px;padding:8px 11px;border-radius:999px;background:var(--green);color:#fff;font-size:12px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
/* `object-position:bottom` : sous `contain`, un packshot moins elance que sa boite est
centre VERTICALEMENT DANS LE VIDE et sa base flotte. Aligner les boites ne suffit donc
pas — il faut aussi coller le dessin au bas de la sienne. Sans cette ligne, la moitie du
defaut subsiste.
Reste apres ces deux corrections : la marge transparente cuite dans les fichiers
eux-memes (89 % des 406 packshots en portent une, mediane 8 %). Elle est traitee en
amont, par recadrage des masters sur leur bbox alpha. */
.gbs-bundle-hero__visual img{position:relative;width:37%;height:78%!important;max-width:none;object-fit:contain;object-position:bottom;filter:drop-shadow(0 18px 22px rgba(20,34,28,.16))}.gbs-bundle-hero__visual img:first-child{z-index:1;transform:translateX(14%) rotate(-3deg)}.gbs-bundle-hero__visual img:nth-child(2){z-index:3;width:41%;height:86%!important}.gbs-bundle-hero__visual img:nth-child(3){z-index:2;transform:translateX(-14%) rotate(3deg)}
/* Éventail de QUATRE flacons. Les pourcentages de largeur sont des RATIOS, pas des tailles :
les images sont des flex items à `flex-shrink:1` et leur somme dépasse toujours la boîte
de contenu (37+41+37 = 115 % à trois), donc le navigateur les ramène à 100 % en gardant
la proportion. 30/33/33/30 conserve la même hiérarchie (paire centrale plus grande) et le
même remplissage. Les `translateX` sont exprimés en pourcentage de la largeur PROPRE de
chaque image : ce sont eux qui creusent le chevauchement et écartent les extrêmes des
bords, l'`overflow:hidden` étant sinon atteint. `!important` sur les hauteurs : sans lui,
une hauteur en pourcentage sur une ![]()
ne se résout pas dans ce conteneur.
`:has()` garde les dix packs à trois produits strictement inchangés. */
.gbs-bundle-hero__visual:has(img:nth-child(4)) img{width:30%;height:72%!important}
.gbs-bundle-hero__visual:has(img:nth-child(4)) img:nth-child(1){z-index:1;transform:translateX(40%) rotate(-6deg)}
.gbs-bundle-hero__visual:has(img:nth-child(4)) img:nth-child(2){z-index:3;width:33%;height:80%!important;transform:translateX(14%) rotate(-2deg)}
.gbs-bundle-hero__visual:has(img:nth-child(4)) img:nth-child(3){z-index:3;width:33%;height:80%!important;transform:translateX(-14%) rotate(2deg)}
.gbs-bundle-hero__visual:has(img:nth-child(4)) img:nth-child(4){z-index:1;transform:translateX(-40%) rotate(6deg)}
.gbs-bundle-hero__copy{min-width:0}.gbs-bundle-hero__copy>.gbs-eyebrow{margin:0 0 14px;color:var(--green);font-size:13px;font-weight:700;letter-spacing:.13em;text-transform:uppercase}.gbs-bundle-hero__copy h1{max-width:15ch;margin:0 0 24px;font-size:clamp(40px,4.2vw,58px);font-weight:800;line-height:1;letter-spacing:-.04em;overflow-wrap:anywhere}
.gbs-bundle-brief{margin:0 0 22px;padding:22px 24px;border:1px solid rgba(8,56,43,.16);border-radius:20px;background:linear-gradient(135deg,#f5f0e5,#e8eee7)}.gbs-bundle-brief .gbs-eyebrow{margin:0 0 8px;color:var(--green);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}.gbs-bundle-brief__lead{margin:0;max-width:58ch;color:var(--ink-soft,#2d2d28);font-size:16px;font-weight:600;line-height:1.55}
.gbs-bundle-brief__body{margin:10px 0 0;max-width:62ch;color:#3f5149;font-size:15px;line-height:1.66}
.gbs-bundle-brief p:last-child{margin-bottom:0}
.gbs-bundle-benefits{display:grid;gap:10px;margin:0 0 22px;padding:0;list-style:none}
.gbs-bundle-benefits li{display:flex;align-items:flex-start;gap:10px;min-width:0;color:var(--green-dark,#174536);font-size:14px;font-weight:650;line-height:1.45}
.gbs-bundle-benefits li::before{content:"";flex:0 0 7px;width:7px;height:7px;margin-top:6px;border-radius:1px;background:var(--gold);transform:rotate(45deg)}
.gbs-bundle-benefits li>span{min-width:0;overflow-wrap:anywhere}
.gbs-bundle-total{display:flex;flex-wrap:wrap;align-items:flex-end;gap:6px 14px;margin:0 0 20px;font-variant-numeric:tabular-nums}.gbs-bundle-total strong{color:#111813;font-size:clamp(34px,3.6vw,46px);font-weight:800;line-height:.92;letter-spacing:-.03em}.gbs-bundle-total>span{display:grid;gap:2px;padding-bottom:4px}.gbs-bundle-total del{color:#8a8a80;font-size:15px}.gbs-bundle-total>span b{color:var(--green);font-size:13px;font-weight:700}
.gbs-bundle-add{width:100%;min-height:58px;border:0;font-size:16px}.gbs-bundle-single .gbs-reassurance{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:14px;border:1px solid var(--line);border-radius:16px;background:#f4f0e8;overflow:hidden}.gbs-bundle-single .gbs-reassurance span{min-height:68px;padding:11px;display:flex;align-items:center;justify-content:center;gap:8px;border-inline-start:1px solid var(--line);font-size:12px;text-align:center}.gbs-bundle-single .gbs-reassurance span:first-child{border-inline-start:0}.gbs-bundle-single .gbs-reassurance svg{flex:0 0 20px;width:20px;height:20px;color:var(--green)}
.gbs-bundle-components{margin-top:clamp(64px,8vw,110px);clear:both}.gbs-bundle-components>header{margin-bottom:28px}.gbs-bundle-components>header .gbs-eyebrow{margin:0 0 10px;color:var(--green);font-size:13px;font-weight:700;letter-spacing:.13em;text-transform:uppercase}.gbs-bundle-components>header h2{max-width:24ch;margin:0;font-size:clamp(32px,3.4vw,50px);font-weight:800;line-height:1.02;letter-spacing:-.035em}
/* Carte de composant : vignette étroite + colonne de texte, comme le template. */
.gbs-bundle-components__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:stretch}
/* À QUATRE composants, trois colonnes laissent une carte orpheline sur une deuxième ligne :
on passe en 2 × 2. Attention, la contre-règle du bloc `@media(max-width:1000px)` plus bas
est OBLIGATOIRE : `:has(> :nth-child(4))` pèse (0,2,0) contre (0,1,0) pour le sélecteur nu
de la media query, donc sans elle cette règle gagnerait AUSSI sous 1000 px et imposerait
deux colonnes jusqu'à 320 px, où chaque carte fait déjà 104 px de vignette + texte. */
.gbs-bundle-components__grid:has(> :nth-child(4)){grid-template-columns:repeat(2,minmax(0,1fr))}
.gbs-bundle-component{display:grid;min-width:0;grid-template-columns:118px minmax(0,1fr);gap:16px;padding:16px;border:1px solid var(--line);border-radius:22px;background:#fbf8f2}
.gbs-bundle-component__media{position:relative;display:block;min-height:150px;border-radius:16px;background:radial-gradient(circle,#f7f2e8,#e1e7dc);overflow:hidden}
.gbs-bundle-component__media img{position:absolute;inset:8%;width:84%;height:84%;object-fit:contain;filter:drop-shadow(0 10px 12px rgba(20,34,28,.13));transition:transform .2s ease}
.gbs-bundle-component:hover .gbs-bundle-component__media img{transform:scale(1.035)}
.gbs-bundle-component__copy{display:flex;flex-direction:column;min-width:0}
.gbs-bundle-component__copy .gbs-eyebrow{margin:0 0 6px;color:var(--muted);font-size:11px;font-weight:800;letter-spacing:.12em;line-height:1.3;text-transform:uppercase;overflow-wrap:anywhere}
.gbs-bundle-component__copy h3{margin:0 0 10px;font-size:17px;font-weight:700;line-height:1.24;overflow-wrap:anywhere}
.gbs-bundle-component__copy h3 a{color:inherit;text-decoration:none}
.gbs-bundle-component__copy h3 a:hover,.gbs-bundle-component__copy h3 a:focus-visible{color:var(--green);text-decoration:underline;text-underline-offset:4px}
.gbs-bundle-component__price{margin:0;color:var(--green);font-size:19px;font-weight:700;font-variant-numeric:tabular-nums}
.gbs-bundle-component__price del{color:#8a8a80;font-size:14px;font-weight:600}
/* Ce que le composant apporte. La classe `.gbs-keypoints` est celle de la fiche produit, du
gabarit A+ et de la page magnésium — mais ses règles vivent dans `product.css`, qui n'est
PAS chargée ici : l'enqueue de `functions.php` sert `bundle.css` sur `is_singular('gbs_bundle')`
et `product.css` sur `is_product()`, jamais les deux. Réutiliser la classe sans porter ses
règles aurait rendu une liste à puces nue. Valeurs reprises à l'identique de product.css:18,
à deux exceptions près : la puce « ✦ » passe en gris (elle voisine ici la puce verte des
bénéfices du pack, deux verts se disputaient l'œil) et la teneur est mise en retrait, parce
que c'est une justification, pas une promesse. */
.gbs-bundle-component__about{list-style:none;padding:0;margin:10px 0 0;display:grid;grid-template-columns:1fr;gap:7px;color:#174536;font-size:12px;font-weight:650;line-height:1.35}
.gbs-bundle-component__about li{position:relative;min-width:0;padding-inline-start:20px;overflow-wrap:anywhere}
.gbs-bundle-component__about li::before{content:"✦";position:absolute;inset-inline-start:0;top:-1px;color:#9aa79f;font-size:14px;line-height:1.2}
.gbs-bundle-component__serving{color:#6d7c74;font-weight:500;font-variant-numeric:tabular-nums}
/* Mentions de l'article 10(2) : présentes, lisibles, jamais dominantes. L'avertissement se
distingue de la mention générale par un filet, pas par une couleur d'alerte — c'est une
information de dosage, pas une erreur. */
.gbs-bundle-note--claims{margin-top:10px;font-style:italic}
.gbs-bundle-note--warning{margin-top:10px;padding-inline-start:12px;border-inline-start:2px solid var(--green);color:#4a5a52}
.gbs-bundle-component__notice{margin-top:auto;padding-top:10px}
.gbs-bundle-component__notice summary{display:flex;min-height:44px;align-items:center;color:var(--green-dark,#174536);font-size:12px;font-weight:800;line-height:1.35;cursor:pointer;border-top:1px solid var(--line);padding-top:12px}
.gbs-bundle-component__notice[open] summary{margin-bottom:2px}
.gbs-bundle-component__notice p{margin:0 0 2px;color:#4a5a52;font-size:12.5px;line-height:1.6}
.gbs-bundle-note{margin:22px 0 0;max-width:88ch;color:var(--muted);font-size:13px;line-height:1.65}
/* Autres routines (même tonalité) — réutilise la carte de l'archive */
.gbs-bundle-related{margin-top:clamp(56px,7vw,92px);clear:both}
.gbs-bundle-related>header{margin-bottom:24px}
.gbs-bundle-related>header .gbs-eyebrow{margin:0 0 10px;color:var(--green);font-size:13px;font-weight:700;letter-spacing:.13em;text-transform:uppercase}
.gbs-bundle-related>header h2{max-width:22ch;margin:0;font-size:clamp(28px,2.8vw,38px);font-weight:800;line-height:1.08;letter-spacing:-.03em}
.gbs-bundle-related .gbs-bundle-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:1000px){.gbs-bundle-related .gbs-bundle-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Bundle archive */
.gbs-bundle-archive .gbs-catalog-head{display:grid;grid-template-columns:minmax(0,850px) 1fr;gap:40px;align-items:end;margin:8px 0 38px;padding:clamp(32px,5vw,68px);border-radius:30px;background:linear-gradient(120deg,#0a382c,#153f34);color:#fff}.gbs-bundle-archive .gbs-catalog-head .gbs-eyebrow{margin:0 0 13px;color:#e8d5a5;font-size:13px;font-weight:700;letter-spacing:.13em;text-transform:uppercase}.gbs-bundle-archive .gbs-catalog-head h1{margin:0 0 14px;color:#fff;font-size:clamp(42px,5vw,68px);font-weight:800;line-height:1;letter-spacing:-.045em}.gbs-bundle-archive .gbs-catalog-head p:last-child{margin:0;max-width:62ch;color:rgba(255,255,255,.74);font-size:16px;line-height:1.65}
.gbs-bundle-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.gbs-bundle-grid .gbs-bundle-card{min-width:0;border:1px solid var(--line);border-radius:23px;background:#fbf8f2;overflow:hidden}.gbs-bundle-grid .gbs-bundle-card>a{display:grid;height:100%;grid-template-rows:205px auto auto 1fr auto;padding:16px;color:inherit;text-decoration:none}/* Trois vignettes dans une boîte : positions absolues chiffrées (1 % + 33 % × 3 = 99 %).
En flex, trois images à 37 % faisaient 111 % — mesuré : la 1re et la 3e sortaient de la
boîte et `overflow:hidden` les ROGNAIT au lieu de les contenir. */
.gbs-bundle-grid .gbs-bundle-card__visual{position:relative;display:block;direction:ltr;height:205px;border-radius:17px;background:radial-gradient(circle,#f7f2e8,#dfe7db);overflow:hidden}/* `height` EXPLICITE, jamais `auto` entre top et bottom : sur une ![]()
, `height:auto`
se résout par le ratio intrinsèque (mesuré : 397 px de haut dans une boîte de 205 px,
rognés en silence par `overflow:hidden`), pas par le positionnement. */
.gbs-bundle-grid .gbs-bundle-card__visual img{position:absolute;top:12%;width:33%;height:76%;max-width:none;object-fit:contain;filter:drop-shadow(0 11px 13px rgba(20,34,28,.13))}.gbs-bundle-grid .gbs-bundle-card__visual img:nth-child(1){left:1%}.gbs-bundle-grid .gbs-bundle-card__visual img:nth-child(2){left:33.5%;z-index:2}.gbs-bundle-grid .gbs-bundle-card__visual img:nth-child(3){left:66%}
/* QUATRE vignettes : même arithmétique que les trois positions ci-dessus (1 % + 33 % × 3),
ramenée à 25 % × 4 = 100 % pile. Les `z-index` sont posés sur les quatre enfants et pas
seulement sur le deuxième : à ce palier les vignettes sont jointives, mais la variante
du bloc 760 px les fait se chevaucher, et un `z-index:2` résiduel sur le seul enfant 2
y produirait un empilement incohérent (2 par-dessus 1 et 3, mais 4 par-dessus 3). */
.gbs-bundle-grid .gbs-bundle-card__visual:has(img:nth-child(4)) img{width:25%}
.gbs-bundle-grid .gbs-bundle-card__visual:has(img:nth-child(4)) img:nth-child(1){left:0;z-index:1}
.gbs-bundle-grid .gbs-bundle-card__visual:has(img:nth-child(4)) img:nth-child(2){left:25%;z-index:2}
.gbs-bundle-grid .gbs-bundle-card__visual:has(img:nth-child(4)) img:nth-child(3){left:50%;z-index:3}
.gbs-bundle-grid .gbs-bundle-card__visual:has(img:nth-child(4)) img:nth-child(4){left:75%;z-index:4}
.gbs-bundle-grid .gbs-bundle-card h3{margin:17px 0 8px;font-size:22px;font-weight:800;line-height:1.12;letter-spacing:-.02em}.gbs-bundle-grid .gbs-bundle-card p{margin:0;color:#686860;font-size:14px;line-height:1.55;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.gbs-bundle-grid .gbs-bundle-card__price{display:flex;flex-wrap:wrap;align-items:baseline;gap:7px 10px;margin-top:16px;font-variant-numeric:tabular-nums}.gbs-bundle-grid .gbs-bundle-card__price del{color:#777;font-size:14px}.gbs-bundle-grid .gbs-bundle-card__price strong{color:#111813;font-size:24px}.gbs-bundle-grid .gbs-bundle-card__price span{color:var(--green);font-size:12px;font-weight:700}.gbs-bundle-grid .gbs-bundle-card>a:hover h3,.gbs-bundle-grid .gbs-bundle-card>a:focus-visible h3{color:var(--green)}.gbs-bundle-grid .gbs-bundle-card>a:focus-visible{outline:3px solid var(--focus);outline-offset:-4px;border-radius:21px}
@media(max-width:1300px){.gbs-bundle-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1000px){.gbs-bundle-hero{grid-template-columns:minmax(0,1fr) minmax(370px,.92fr);gap:32px}.gbs-bundle-hero__copy h1{font-size:42px}.gbs-bundle-components__grid{grid-template-columns:1fr}.gbs-bundle-components__grid:has(> :nth-child(4)){grid-template-columns:1fr}.gbs-bundle-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.gbs-bundle-single,.gbs-bundle-archive{padding-bottom:82px}.gbs-bundle-single .woocommerce-breadcrumb,.gbs-bundle-archive .woocommerce-breadcrumb{margin:15px 0 18px}.gbs-bundle-hero{grid-template-columns:1fr;gap:24px}.gbs-bundle-hero__visual{aspect-ratio:auto;height:clamp(300px,82vw,380px);border-radius:24px}.gbs-bundle-hero__copy h1{max-width:none;margin-bottom:20px;font-size:36px}.gbs-bundle-brief{padding:19px 20px}.gbs-bundle-total strong{font-size:34px}.gbs-bundle-single .gbs-reassurance{grid-template-columns:1fr}.gbs-bundle-single .gbs-reassurance span{min-height:52px;justify-content:flex-start;border-inline-start:0;border-top:1px solid var(--line)}.gbs-bundle-single .gbs-reassurance span:first-child{border-top:0}.gbs-bundle-components{margin-top:58px}.gbs-bundle-components>header{margin-bottom:22px}.gbs-bundle-components>header h2{font-size:32px}.gbs-bundle-component{grid-template-columns:104px minmax(0,1fr);gap:13px;padding:13px}.gbs-bundle-component__media{min-height:132px}.gbs-bundle-component__copy h3{font-size:16px}.gbs-bundle-note{margin-top:18px}.gbs-bundle-related{margin-top:52px}.gbs-bundle-related>header{margin-bottom:18px}.gbs-bundle-related .gbs-bundle-grid{grid-template-columns:1fr}.gbs-bundle-benefits{gap:9px;margin-bottom:20px}.gbs-bundle-benefits li{font-size:13.5px}.gbs-bundle-discount{top:11px;inset-inline-start:11px;padding:7px 10px}.gbs-bundle-archive .gbs-catalog-head{display:block;margin-bottom:26px;padding:30px 24px;border-radius:24px}.gbs-bundle-archive .gbs-catalog-head h1{font-size:38px}.gbs-bundle-grid{grid-template-columns:1fr}.gbs-bundle-grid .gbs-bundle-card>a{grid-template-columns:126px minmax(0,1fr);grid-template-rows:auto auto 1fr auto;column-gap:15px}.gbs-bundle-grid .gbs-bundle-card__visual{grid-row:1/5;width:126px;height:164px}
/* Vignette mobile : 104 px de large ne laissaient que 34 px par flacon (mesuré) — on
élargit et on chevauche, comme la pile du template, en restant dans la boîte. */
.gbs-bundle-grid .gbs-bundle-card__visual img{width:46%;height:74%}
.gbs-bundle-grid .gbs-bundle-card__visual img:nth-child(1){left:0}
.gbs-bundle-grid .gbs-bundle-card__visual img:nth-child(2){left:27%}
.gbs-bundle-grid .gbs-bundle-card__visual img:nth-child(3){left:54%}
/* Variante à QUATRE, RÉPÉTÉE ici et pas seulement en desktop. `:has()` prend la spécificité
de son argument : `…__visual:has(img:nth-child(4)) img` pèse (0,3,2), contre (0,2,1) pour
la règle nue de ce bloc — la variante desktop l'emporterait donc à TOUTES les tailles si
celle-ci ne la redéclarait pas. Entre les deux `:has()`, à spécificité égale, c'est
l'ordre source qui tranche, et ce bloc vient après.
40 % de large et un pas de 20 % : 60 % + 40 % = 100 % pile, chevauchement de 20 %. */
.gbs-bundle-grid .gbs-bundle-card__visual:has(img:nth-child(4)) img{width:40%;height:74%}
.gbs-bundle-grid .gbs-bundle-card__visual:has(img:nth-child(4)) img:nth-child(1){left:0}
.gbs-bundle-grid .gbs-bundle-card__visual:has(img:nth-child(4)) img:nth-child(2){left:20%}
.gbs-bundle-grid .gbs-bundle-card__visual:has(img:nth-child(4)) img:nth-child(3){left:40%}
.gbs-bundle-grid .gbs-bundle-card__visual:has(img:nth-child(4)) img:nth-child(4){left:60%}
.gbs-bundle-grid .gbs-bundle-card h3{margin-top:2px}.gbs-bundle-grid .gbs-bundle-card__price{margin-top:10px}}
@media(max-width:430px){.gbs-bundle-hero__copy h1{font-size:33px}.gbs-bundle-hero__visual{height:310px;padding:6%}.gbs-bundle-brief p:last-child{font-size:15px}.gbs-bundle-add{font-size:14px}.gbs-bundle-archive .gbs-catalog-head h1{font-size:34px}.gbs-bundle-grid .gbs-bundle-card>a{grid-template-columns:104px minmax(0,1fr);column-gap:13px;padding:13px}.gbs-bundle-grid .gbs-bundle-card__visual{width:104px;height:150px}.gbs-bundle-grid .gbs-bundle-card h3{font-size:19px}.gbs-bundle-grid .gbs-bundle-card p{font-size:13px;-webkit-line-clamp:2}.gbs-bundle-grid .gbs-bundle-card__price strong{font-size:21px}}
[dir="rtl"] .gbs-bundle-hero__copy,[dir="rtl"] .gbs-bundle-components,[dir="rtl"] .gbs-bundle-related,[dir="rtl"] .gbs-bundle-archive{text-align:right}
@media(prefers-reduced-motion:reduce){.gbs-bundle-components__grid img{transition:none}}
/* ═══ Fil d'Ariane des packs — plancher tactile ═══════════════════════════════════════════════
Quatrieme et derniere famille de fil d'Ariane du theme a rester sous le minimum WCAG 2.2 AA
2.5.8 (24x24). Mesure en emulation d'appareil reelle : `nav.woocommerce-breadcrumb > a` fait
46x18 sur /packs/ et 46x18 / 36x18 sur /pack//, en FR comme sous /ar/ (29x18 et 36x18).
Les trois autres familles sont deja traitees ailleurs, chacune dans SA feuille, parce qu'aucune
n'est chargee sur les routes des autres :
`.gbs-product .woocommerce-breadcrumb a` et `.aplus-product .woocommerce-breadcrumb a`
-> product.css, charge uniquement sur la fiche produit ;
`.gbs-catalog-breadcrumb a` -> catalog.css, charge uniquement sur le catalogue ;
ici -> bundle.css, seule feuille du theme chargee sur
/packs/ et /pack/* (feuilles servies mesurees : brands, base, mega, tone, bundle).
AUCUN RISQUE D'ENROULEMENT ici, contrairement au catalogue : le conteneur est deja
`white-space:nowrap` + `overflow-x:auto` (l.2), donc le fil defile horizontalement au lieu de
passer a la ligne. Mesure : une seule rangee avant comme apres.
MARGES COMPENSEES. `align-items:center` repartit le gain (44 - 20,3 = 23,7 px) en parts
invisibles egales de ~12 px. Sans compensation le descendait de 243,3 a 267 px (+23,7),
mesure a 320 px sur /packs/. On retire donc ~12 px a chaque marge du bloc <=760 px
(`15px 0 18px`, l.61) : residuel mesure +0,7 px. Le texte reste ou il etait, seule la surface
tactile grandit.
Palier a 760 px : c'est celui de ce fichier (l.61), pas les 900 px du catalogue. */
@media(max-width:760px){
.gbs-bundle-single .woocommerce-breadcrumb,
.gbs-bundle-archive .woocommerce-breadcrumb{margin-block:2px 5px}
.gbs-bundle-single .woocommerce-breadcrumb a,
.gbs-bundle-archive .woocommerce-breadcrumb a{display:inline-flex;align-items:center;min-height:44px}
}