/* ==========================================================================
Accueil — parité stricte avec docs/design/templates/german-beautyshop-storefront.html
Chaque valeur ci-dessous a été RELEVÉE au getComputedStyle sur le prototype à 1440x900
(le CSS du prototype est empilé sur ~6 couches : seule la valeur calculée fait foi).
home.css n'est chargé QUE sur l'accueil (functions.php : 'home' => is_front_page()),
donc aucun préfixe `.home` n'est nécessaire : ces règles ne fuient pas sur les autres pages.
========================================================================== */
/* --- Conteneur & rythme vertical -------------------------------------------------
Prototype : `.container{width:min(calc(100% - 48px),var(--container))}` avec
`--container:1320px` => 1320 px de large et 60 px de marge à 1440. base.css impose
1740 px / 48 px (donc 1392 px de large, 24 px de marge) : on réaligne pour l'accueil.
Le header, le bandeau de preuve, le méga-menu et le footer sont padés à la main dans
base.css (`max(32px,calc((100% - 1740px)/2))`) : on les recale sur la même gouttière,
sinon le logo et la nav ne tombent plus sur la colonne du contenu. */
body{background:#fbf8f2}
.gbs-shell{width:min(1320px,calc(100% - 48px))}
.gbs-proofbar,.gbs-header,.gbs-footer,.gbs-mega{padding-inline:max(24px,calc((100% - 1320px)/2))}
.gbs-section{padding-block:96px}
.gbs-section-head{align-items:end;gap:30px;margin-bottom:34px}
.gbs-section-head h2{max-width:820px;margin:8px 0 0;font-size:clamp(42px,4.6vw,64px);font-weight:800;letter-spacing:-.055em;line-height:.98}
.gbs-section-head>p{max-width:430px;color:#62665f;font-size:14px;line-height:1.7}
.gbs-eyebrow{color:#174f3c;font-size:12px;font-weight:850;letter-spacing:.15em}
/* --- Hero ------------------------------------------------------------------------
Le prototype pose le visuel DANS la coque sombre : pas de panneau clair pleine hauteur,
mais une « scène » en dôme (border-radius 50% 50% 24px 24px) posée en bas à droite,
le packshot principal devant, deux flacons inclinés de part et d'autre, la pastille
« Payé à la réception » posée sur le fond sombre à gauche de la scène. */
.gbs-hero{position:relative;display:grid;grid-template-columns:minmax(0,.92fr) minmax(470px,1.08fr);gap:0;min-height:560px;margin-block:22px 46px;padding:0;overflow:hidden;border-radius:28px;background:linear-gradient(132deg,#10231b,#171b17 72%);color:#fff;box-shadow:0 26px 70px rgba(7,43,33,.18)}
.gbs-hero:before{position:absolute;inset:0;z-index:0;background:radial-gradient(circle at 72% 34%,rgba(181,154,91,.23),transparent 34%),linear-gradient(128deg,rgba(255,255,255,.035),transparent 45%);content:"";pointer-events:none}
.gbs-hero__copy{position:relative;z-index:2;display:flex;min-width:0;max-width:none;flex-direction:column;justify-content:center;align-self:stretch;padding:clamp(40px,4.5vw,64px)}
.gbs-hero__copy h1{max-width:660px;margin:16px 0 20px;font-size:clamp(50px,5vw,72px);font-weight:800;line-height:.96;letter-spacing:-.065em}
.gbs-hero__copy>p:not(.gbs-eyebrow){max-width:560px;margin:0;color:rgba(255,255,255,.74);font-size:15px;line-height:1.65}
.gbs-hero .gbs-eyebrow{margin:0;color:#e9ddbf;line-height:normal}
.gbs-hero-offer{display:grid;grid-template-columns:minmax(0,1fr) auto 18px;align-items:center;gap:17px;width:100%;max-width:none;min-height:86px;margin-top:20px;padding:14px 15px;border:1px solid rgba(255,255,255,.18);border-radius:16px;background:rgba(255,255,255,.065);transition:border-color .18s ease,background .18s ease,transform .18s ease}
.gbs-hero-offer:hover,.gbs-hero-offer:focus-visible{border-color:rgba(233,218,179,.58);background:rgba(255,255,255,.1);transform:translateY(-2px)}
.gbs-hero-offer__copy,.gbs-hero-offer__price{display:flex;min-width:0;flex-direction:column}
.gbs-hero-offer__copy>small,.gbs-hero-offer__rating,.gbs-hero-offer__price>strong,.gbs-hero-offer__price>small{line-height:normal}
.gbs-hero-offer__copy>small{color:#e9ddbf;font-size:12px;font-weight:850;letter-spacing:.12em;text-transform:uppercase}
.gbs-hero-offer__copy>strong{display:-webkit-box;overflow:hidden;margin-top:5px;font-size:14px;font-weight:700;line-height:1.25;white-space:normal;overflow-wrap:anywhere;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.gbs-hero-offer__rating{display:flex;align-items:center;gap:6px;margin-top:5px;color:rgba(255,255,255,.64);font-size:12px;font-weight:400}
.gbs-hero-offer__rating b{color:inherit;font-size:12px;font-weight:400;letter-spacing:.06em}
.gbs-hero-offer__price{min-width:100px;align-items:flex-end;white-space:nowrap}
.gbs-hero-offer__price>strong{font-size:21px;font-weight:850;letter-spacing:-.035em}
.gbs-hero-offer__price>small{margin-top:3px;color:rgba(255,255,255,.58);font-size:12px}
.gbs-hero-offer>i{display:grid;width:18px;height:18px;place-items:center;color:#e9ddbf;font-style:normal}
.gbs-hero-offer>i svg{width:18px;height:18px}
.gbs-hero__actions{display:flex;flex-wrap:wrap;gap:11px;margin-top:17px}
.gbs-hero__actions .gbs-button{min-height:48px;padding:14px 23px;gap:9px;font-size:13px;font-weight:800;background:var(--green);border-color:var(--green)}
.gbs-hero__actions .gbs-button svg{width:18px;height:18px}
.gbs-hero__actions .gbs-button--ghost{border:0;background:transparent;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);color:#fff}
.gbs-hero__actions .gbs-button--ghost:hover,.gbs-hero__actions .gbs-button--ghost:focus-visible{background:rgba(255,255,255,.08)}
.gbs-hero__trust{display:flex;flex-wrap:wrap;gap:16px;margin-top:19px;color:rgba(255,255,255,.8);font-size:12px;font-weight:700;line-height:normal}
.gbs-hero__trust span{display:inline-flex;align-items:center;gap:6px}
.gbs-hero__trust svg{width:15px;height:15px;color:#e9ddbf}
.gbs-hero__visual{position:relative;z-index:1;align-self:stretch;min-height:560px;margin:0;border-radius:0;background:none;overflow:visible}
.gbs-hero-stage{position:absolute;display:block;inset:auto 7% 7% auto;width:77%;height:70%;aspect-ratio:auto;border:0;border-radius:50% 50% 24px 24px;background:linear-gradient(145deg,#f9f5eb,#e9dfcb);box-shadow:inset 0 0 0 1px rgba(255,255,255,.5),0 30px 70px rgba(0,0,0,.24)}
.gbs-hero-stage:after{position:absolute;right:10%;bottom:7%;left:10%;height:17%;border-radius:50%;background:rgba(23,23,19,.13);filter:blur(20px);content:""}
/* `display:block`, jamais `grid` : l'ancre porte une hauteur en %, et l'img un `height:100%`.
Dans une grille, la piste implicite est `auto` → le % est cyclique, retombe sur `auto`, et
l'img reprend son ratio intrinsèque (mesuré : 632 px de haut pour une ancre de 344) avant
d'être tranchée par l'`overflow:hidden` du hero. Le template tranche pareil (override V18). */
.gbs-hero-lineup{display:contents}
.gbs-hero-product{--gbs-hero-rotate:0deg;position:absolute;z-index:2;display:block;transform:translateY(0) rotate(var(--gbs-hero-rotate));transform-origin:center;transition:transform .25s ease}
/* `display:block` : même défaut de line-box que `.gbs-lightbox>img` (product.css). L'ancre porte une
hauteur en % et l'img un `height:100%` : inline, le descendeur du strut ajoute 6-7 px sous elle et
l'img déborde son ancre d'autant. Mesure du 2026-08-21 sur le staging : 7 px par packshot en 1440
et 768, 6 px en 375 (où `.gbs-hero-lineup` héritait de 8 px de débordement). Aucun déplacement
visuel : le vide est SOUS l'image, ses rects sont identiques avant/après. */
.gbs-hero-product img{display:block;position:static!important;width:100%!important;height:100%!important;object-fit:contain;filter:drop-shadow(0 20px 18px rgba(23,23,19,.18))}
.gbs-hero-product:hover,.gbs-hero-product:focus-visible{transform:translateY(-5px) rotate(var(--gbs-hero-rotate))}
.gbs-hero__visual .gbs-hero-product.item-1{inset:auto 18% 10% auto;width:48%;height:63%;z-index:2}
.gbs-hero__visual .gbs-hero-product.item-2{--gbs-hero-rotate:4deg;inset:auto 3% 7% auto;width:29%;height:45%;z-index:3}
.gbs-hero__visual .gbs-hero-product.item-0{--gbs-hero-rotate:-5deg;inset:auto auto 8% 15%;width:28%;height:42%;z-index:1}
.gbs-hero-delivery{position:absolute;z-index:5;top:11%;right:8%;left:auto;display:grid;grid-template-columns:none;gap:5px;min-width:175px;padding:15px 17px;border:1px solid rgba(255,255,255,.5);border-radius:16px;background:rgba(255,254,250,.92);color:var(--ink);box-shadow:0 12px 36px rgba(23,23,19,.08);backdrop-filter:blur(12px)}
.gbs-hero-delivery svg{grid-row:auto;width:18px;height:18px;color:var(--green)}
.gbs-hero-delivery strong{font-size:13px;font-weight:700}
.gbs-hero-delivery small{color:var(--muted);font-size:12px}
.gbs-hero-seal{position:absolute;z-index:5;top:16%;left:5%;right:auto;display:grid;width:102px;height:102px;padding:0;place-items:center;border:1px solid rgba(255,255,255,.35);border-radius:50%;color:#e9ddbf;font-size:12px;font-weight:800;line-height:1.35;letter-spacing:.1em;text-align:center;text-transform:uppercase}
/* --- Objectifs -------------------------------------------------------------------
Cartes en ratio 1.55 (et non min-height:270px), rayon 20, dégradé de lisibilité
identique au prototype, pastille flèche 44 px. */
.gbs-objectives-section{padding-block:108px 76px}
.gbs-objectives-section .gbs-section-head h2{font-size:clamp(48px,5vw,72px)}
.gbs-objectives{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.gbs-objectives>a{position:relative;display:block;min-width:0;min-height:0;aspect-ratio:1.55;overflow:hidden;border:0;border-radius:20px;padding:0;background:#10251c;isolation:isolate;box-shadow:0 14px 34px rgba(16,37,28,.11);transition:transform .22s ease,box-shadow .22s ease}
.gbs-objectives>a:hover,.gbs-objectives>a:focus-visible{transform:translateY(-5px);box-shadow:0 24px 54px rgba(16,37,28,.17)}
.gbs-objectives img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .48s cubic-bezier(.2,.7,.2,1)}
.gbs-objectives>a:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,12,9,.02) 28%,rgba(5,12,9,.22) 58%,rgba(5,12,9,.9) 100%);z-index:1;pointer-events:none}
.gbs-objectives strong{position:absolute;z-index:2;inset:auto 72px 24px 24px;color:#fff;font-size:clamp(22px,2.1vw,31px);font-weight:800;letter-spacing:-.045em;line-height:1.04;text-shadow:0 2px 18px rgba(0,0,0,.32)}
.gbs-objectives i{position:absolute;z-index:2;right:20px;bottom:20px;width:44px;height:44px;border-radius:50%;background:rgba(251,248,242,.94);color:#10251c;display:grid;place-items:center;font-style:normal;font-size:18px;line-height:1}
.gbs-objectives>a:hover img,.gbs-objectives>a:focus-visible img{transform:scale(1.035)}
/* --- Bandeau de réassurance ------------------------------------------------------
Prototype : `.trust-container{padding-bottom:88px}` + `.trust-strip` sur le papier, entre
les objectifs (padding bas 76) et les univers (padding haut 0). Valeurs relevées au
getComputedStyle à 1440 : la couche v9 écrase le bandeau initial (rayon 18, fond porcelaine,
items à 104 px et 20 px de padding, y compris sous 640). */
.gbs-trust-container{padding-bottom:88px}
.gbs-trust-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));overflow:hidden;border:1px solid rgba(16,37,28,.14);border-radius:18px;background:#f5f0e7;box-shadow:0 14px 38px rgba(16,37,28,.08)}
.gbs-trust-item{display:flex;min-height:104px;align-items:center;gap:13px;padding:20px}
.gbs-trust-item+.gbs-trust-item{border-inline-start:1px solid var(--line)}
.gbs-trust-item>div{min-width:0}
.gbs-trust-icon{display:grid;width:42px;height:42px;flex:0 0 42px;place-items:center;border-radius:50%;background:#e4eee9;color:var(--green)}
.gbs-trust-icon svg{width:19px;height:19px}
.gbs-trust-item strong{display:block;font-size:13px;font-weight:700;line-height:normal}
.gbs-trust-item div span{display:block;margin-top:4px;color:var(--muted);font-size:12px;line-height:1.45}
/* --- Univers ---------------------------------------------------------------------
Le prototype n'a PAS de bandeau ivoire ici : la section reste sur le papier et n'a
qu'un padding bas. Chaque carte porte son propre dégradé (tone-*). */
.gbs-universe-section{padding-block:0 108px;background:#fbf8f2}
.gbs-universe-section .gbs-section-head{align-items:end;gap:28px;margin-bottom:24px}
.gbs-universe-section .gbs-section-head h2{margin:7px 0 0;font-size:clamp(36px,4vw,52px);letter-spacing:-.05em;line-height:normal}
.gbs-universe-section .gbs-section-head>p{max-width:430px;font-size:14px;line-height:1.65}
.gbs-universes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.gbs-universes .gbs-universe-card{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 118px;align-items:center;min-height:126px;padding:18px;overflow:hidden;border:1px solid rgba(16,37,28,.14);border-radius:17px;background:#f4efe6;box-shadow:0 8px 20px rgba(16,37,28,.05);transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease}
.gbs-universes .gbs-universe-card:hover,.gbs-universes .gbs-universe-card:focus-visible{border-color:rgba(23,79,60,.42);transform:translateY(-3px);box-shadow:0 16px 32px rgba(16,37,28,.1)}
.gbs-universes .gbs-universe-card.tone-hair{background:linear-gradient(145deg,#ebe7df,#c9c2b7)}
.gbs-universes .gbs-universe-card.tone-skincare{background:linear-gradient(145deg,#efe6df,#dac9bd)}
.gbs-universes .gbs-universe-card.tone-supplements{background:linear-gradient(145deg,#e8eadf,#cdd2bd)}
.gbs-universes .gbs-universe-card.tone-bio{background:linear-gradient(145deg,#e6eadf,#c4cfb7)}
.gbs-universe-label{position:relative;z-index:2;display:flex;flex-direction:column}
.gbs-universe-label small{display:block;color:#64685f;font-size:12px;font-weight:700;line-height:1.3}
.gbs-universe-label strong{display:block;margin-top:5px;font-size:20px;font-weight:700;letter-spacing:-.035em;line-height:1.3}
.gbs-universe-products{position:relative;display:block;width:118px;height:98px}
.gbs-universe-products img{position:absolute;right:0;bottom:-8px;width:76px;height:102px;object-fit:contain;filter:drop-shadow(0 10px 9px rgba(16,37,28,.16));transition:transform .24s ease}
.gbs-universe-products .product-0{right:0;bottom:-8px}
.gbs-universe-products .product-1{right:46px;bottom:-8px;width:66px;height:88px;transform:rotate(-4deg)}
.gbs-universe-arrow{position:absolute;z-index:4;right:13px;bottom:13px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#174f3c;color:#fff;opacity:0;transform:translateX(5px);transition:opacity .18s ease,transform .18s ease}
.gbs-universe-arrow svg{width:14px;height:14px}
.gbs-universe-card:hover .gbs-universe-arrow,.gbs-universe-card:focus-visible .gbs-universe-arrow{opacity:1;transform:none}
.gbs-universe-card:hover .gbs-universe-products .product-0,.gbs-universe-card:focus-visible .gbs-universe-products .product-0{transform:translateY(-4px)}
.gbs-universe-card:hover .gbs-universe-products .product-1,.gbs-universe-card:focus-visible .gbs-universe-products .product-1{transform:rotate(-4deg) translateY(-4px)}
/* --- Packs -----------------------------------------------------------------------
Prototype : bandeau #f2ede3, 5 cartes visibles, gouttière 14 px, visuel pleine
largeur de 226 px de haut (pas de vignette encadrée), texte à 20 px de marge. */
.gbs-packs-section{padding-block:96px;background:#f2ede3}
.gbs-packs-section .gbs-section-head h2{font-size:clamp(34px,3.75vw,54px)}
.gbs-carousel-actions{display:flex;align-items:center;gap:10px}
.gbs-carousel-actions>a{margin-inline-start:8px;font-size:13px;text-decoration:underline;text-underline-offset:5px}
/* Le wrapper de teinte reste une vraie boîte (et non display:contents) : moveCarousel()
dans storefront.js mesure `carousel.querySelector(':scope > *')` pour calculer son pas,
et une boîte inexistante ramènerait le défilement des flèches à la seule gouttière. */
.gbs-bundle-tone{display:block;min-width:0;height:100%;scroll-snap-align:start}
.gbs-bundle-carousel{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 56px)/5);gap:14px;overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x mandatory;scrollbar-width:none;padding:6px 2px 16px}
.gbs-bundle-carousel::-webkit-scrollbar{display:none}
/* `padding-top` à 6 px et non 2 : le carrousel calcule `overflow-y:auto` (un axe non-`visible`
force l'autre à `auto`), donc il ROGNE. Avec 2 px, le `translateY(-3px)` du survol coupait
1 px du haut de la carte — visible sur un rayon de 25 px. */
.gbs-bundle-card{scroll-snap-align:start;min-width:0;height:100%;border:1px solid var(--line);border-radius:25px;background:var(--paper);overflow:hidden;box-shadow:0 18px 48px rgba(28,45,36,.08);transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease}
.gbs-bundle-card>a{height:100%;display:grid;grid-template-rows:210px auto auto 1fr;gap:10px;padding:0 0 20px}
.gbs-bundle-card__visual{position:relative;display:flex;align-items:center;justify-content:center;min-width:0;height:210px;overflow:hidden;border-radius:0;background:linear-gradient(145deg,#e8ecdf,#d8cab7)}
.gbs-bundle-tone.tone-skincare .gbs-bundle-card__visual{background:linear-gradient(145deg,#efe3dc,#ddd0c5)}
.gbs-bundle-card__visual img{width:38%;height:176px;object-fit:contain;margin-inline:-6%;filter:drop-shadow(0 13px 12px rgba(24,40,31,.18));transition:transform .24s ease}
/* Packs de QUATRE vignettes. Ce qui est empilé ici, ce sont les boîtes de MARGE : 38 % de
large moins 2 × 6 % de marge négative = 26 % chacune, soit 78 % à trois. Les reprendre
telles quelles à quatre donnerait 104 %, et comme un flex item à taille préférée définie
ne rétrécit pas (son `min-width:auto` se résout à la largeur spécifiée, le packshot étant
intrinsèquement plus large), la ligne déborderait pour de bon : l'`overflow:hidden` du
conteneur rognerait 8 % du premier et du dernier flacon. 4 × (31 − 10) = 84 %, emprise
comparable et même sens de chevauchement. Garde `:has()` : les dix packs à trois produits
ne voient JAMAIS cette règle. Aucun `@media` de ce fichier ne touche à la largeur des
vignettes (seulement aux colonnes du carrousel et à la hauteur du conteneur), donc une
seule déclaration suffit ici — ce n'est pas le cas dans bundle.css. */
.gbs-bundle-card__visual:has(img:nth-child(4)) img{width:31%;margin-inline:-5%}
/* Survol : mêmes valeurs que le reste de la home — le zoom vient de
`.gbs-product-card__link:hover img`, l'élévation et la bordure de
`.gbs-universes .gbs-universe-card:hover`. L'ombre n'est PAS doublée comme sur les cartes
Univers : celle au repos est déjà appuyée et le scroller la rogne. `:has(>a:focus-visible)`
porte la parité clavier, le focusable étant le `` enfant et non la carte. */
.gbs-bundle-card:hover,.gbs-bundle-card:has(>a:focus-visible){border-color:rgba(23,79,60,.42);transform:translateY(-3px);box-shadow:0 22px 54px rgba(28,45,36,.13)}
.gbs-bundle-card:hover .gbs-bundle-card__visual img,.gbs-bundle-card:has(>a:focus-visible) .gbs-bundle-card__visual img{transform:scale(1.035)}
.gbs-bundle-card h3{min-height:44px;margin:10px 20px 0;font-size:20px;font-weight:800;letter-spacing:-.03em;line-height:1.08}
.gbs-bundle-card p{display:-webkit-box;min-height:54px;margin:0 20px;color:var(--muted);font-size:12px;line-height:1.5;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.gbs-bundle-card__price{align-self:end;display:flex;align-items:end;gap:8px;min-height:52px;margin:0 20px}
.gbs-bundle-card__price strong{font-size:22px;font-weight:800;letter-spacing:-.025em}
.gbs-bundle-card__price del{color:var(--muted);font-size:12px}
/* --- Best-sellers : filtres, grille, teintes par produit -------------------------
1) `.gbs-filter-bar` reprend `filter-bar`/`filter-chip` du prototype (mêmes libellés,
même ordre, même style pressé/non pressé).
2) Chaque carte est enveloppée d'un `.gbs-card-tone.tone-*` en `display:contents`
(le markup de la carte vit dans functions.php, hors périmètre) : la teinte de la
vignette est donc pilotée par la catégorie du produit, comme `product-media tone-*`. */
.gbs-bestsellers-section{padding-block:96px;background:#f5f0e7}
.gbs-bestsellers-section .gbs-section-head{align-items:end;margin-bottom:34px}
.gbs-bestsellers-section .gbs-section-head h2{font-size:clamp(46px,4.8vw,68px)}
.gbs-filter-bar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:25px}
.gbs-filter-chip{min-height:44px;border:1px solid rgba(16,37,28,.14);border-radius:999px;padding:10px 17px;color:#30463d;background:rgba(251,248,242,.6);font-size:12px;font-weight:800;cursor:pointer}
.gbs-filter-chip:hover{border-color:var(--line-strong);color:var(--ink)}
.gbs-filter-chip[aria-pressed=true]{border-color:#174f3c;background:#174f3c;color:#fff}
.gbs-products-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px 14px}
.gbs-card-tone{display:contents}
.gbs-card-tone[hidden]{display:none}
.gbs-card-tone.tone-hair .gbs-product-card__media{background:linear-gradient(145deg,#ebe7df,#c9c2b7)}
.gbs-card-tone.tone-skincare .gbs-product-card__media{background:linear-gradient(145deg,#efe6df,#dac9bd)}
.gbs-card-tone.tone-supplements .gbs-product-card__media{background:linear-gradient(145deg,#e8eadf,#cdd2bd)}
.gbs-card-tone.tone-bio .gbs-product-card__media{background:linear-gradient(145deg,#e6eadf,#c4cfb7)}
/* La carte ne porte PAS de `min-height` : le prototype pose `min-height:472px` au palier V9
puis l'annule en V19 (`.product-card{height:100%;min-height:0}`). Reprendre les 472 px
rendait chaque carte 68 px plus haute que son contenu, et `align-content:space-between`
déversait ce surplus dans la gouttière média → titre : 84 px de vide au lieu des 30 px du
prototype (`.product-body{padding-top:16px}` + 14 px de mou de son `min-height:158px`).
`space-between` reste utile : il rabat le titre en bas de la gouttière quand une carte
voisine a un titre plus long, ce qui garde titres et prix alignés sur la rangée. */
.gbs-product-card{display:grid;grid-template-rows:minmax(0,1fr) auto;min-width:0;padding-bottom:2px}
.gbs-product-card__link{display:grid;grid-template-rows:auto auto;align-content:space-between;gap:30px;min-width:0}
.gbs-product-card__media{position:relative;display:grid;place-items:center;min-height:258px;aspect-ratio:auto;border:0;border-radius:19px;background:linear-gradient(145deg,#eee8dc,#ddd2c1);box-shadow:inset 0 0 0 1px rgba(16,37,28,.05);overflow:hidden}
.gbs-product-card__media:after{content:"";position:absolute;right:14%;bottom:7%;left:14%;height:10%;border-radius:50%;background:rgba(23,23,19,.12);filter:blur(16px)}
.gbs-product-card__media em{position:absolute;z-index:2;top:13px;left:13px;padding:7px 10px;border-radius:999px;background:var(--gold-soft);color:var(--ink);font-size:12px;font-style:normal;font-weight:850;letter-spacing:.07em;text-transform:uppercase}
/* L'ombre portee de l'image etait tranchee net par l'`overflow:hidden` de la vignette :
`0 18px 15px` porte a 33 px (decalage + flou) alors qu'il ne reste que 12 px sous l'image a
375 px (17 px en desktop). D'ou une bande sombre a arete dure au bas de la tuile, lue comme
une salissure sur le produit. L'ancrage au sol n'est pas perdu : il est deja assure par
l'ellipse floutee de `.gbs-product-card__media:after`, que ce drop-shadow ne faisait que
doubler. Ramene a une ombre de contact de 12 px de portee, elle tient dans la marge. */
.gbs-product-card__media img{position:relative;z-index:1;inset:auto;width:80%;height:224px;object-fit:contain;filter:drop-shadow(0 4px 8px rgba(23,23,19,.18));transition:transform .24s ease}
.gbs-product-card__link:hover img{transform:scale(1.035)}
/* Rien ne réserve deux lignes au titre — ni `min-height` ici, ni une piste `minmax(44px,auto)`
sur `.gbs-product-card__link` : `-webkit-line-clamp:2` borne déjà les titres longs. Réserver
la seconde ligne laissait 22 px de blanc sous les titres d'une ligne (cartes de ~275 px entre
641 et 1279 px), donc entre le titre et le prix. Le mou remonte dans la gouttière via
`space-between` — le titre reste collé au prix et aligné avec ceux des cartes voisines. */
.gbs-product-card h3{display:-webkit-box;min-width:0;margin:0;color:#10251c;font-size:14px;font-weight:750;line-height:1.55;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* `min-height` garde la rangée d'achat uniforme d'une carte à l'autre (donc les prix alignés) ;
`align-items:start` fait passer le mou EXTERNE de ce `min-height` sous « Disponible » au lieu
de l'empiler au-dessus du prix (le mou interne entre le prix et « Disponible », lui, vient de
`align-content:normal` et ne bouge pas). Le prix barré est en ligne, comme
`.gbs-bundle-card__price` : `order` place le prix réel en premier (WooCommerce sort `del`
avant `ins`), sans réserver de ligne vide sur les cartes sans promo. La règle `ins` neutralise
aussi son soulignement par défaut.
`grid-column:1` sur le `small` est OBLIGATOIRE : le bouton « Ajouter » n'est pas rendu quand le
produit est en rupture (functions.php), la cellule ligne 1 / colonne 2 redevient libre et le
placement automatique y projette « Indisponible » — à côté du prix au lieu d'être dessous. */
.gbs-product-card__buy{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;align-items:start;gap:0 10px;margin-top:14px;min-height:70px}
.gbs-product-card__buy>span{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 8px;color:var(--ink);font-size:20px;font-weight:850;letter-spacing:-.025em;line-height:1.3}
.gbs-product-card__buy>span del{order:2;margin:0;color:var(--muted);font-size:12px}
.gbs-product-card__buy>span ins{order:1;background:transparent;color:inherit;text-decoration:none}
.gbs-product-card__buy small{grid-column:1;display:inline-flex;align-items:center;gap:5px;margin-top:6px;color:var(--green);font-size:12px;font-weight:800}
.gbs-product-card__buy small:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.gbs-add{position:relative;isolation:isolate;grid-row:1/3;grid-column:2;align-self:center;width:auto;min-width:116px;min-height:46px;height:46px;padding:0 8px 0 16px;border-radius:999px;background:linear-gradient(90deg,var(--green),var(--green-dark));color:#fff;display:flex;align-items:center;justify-content:space-between;gap:9px;font-size:12px;font-weight:800}
.gbs-add i{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.15);display:grid;place-items:center;font-size:20px;font-style:normal}
/* ── « Ajouter » : les états d'interaction, absents jusqu'ici ─────────────────────────────
Mesure avant (énumération des règles réellement chargées, staging 2026-08-15) : la feuille
servie ne contenait QUE quatre règles pour `.gbs-add` — celle du dessus, `.gbs-add i`, et
leurs jumelles ≤640px. Ni `:hover`, ni `:focus-visible`, ni `:active`, et rien pour les
classes `loading`/`added` que pose le script AJAX natif de WooCommerce. Le CSS WooCommerce
étant dequeué (functions.php), le bouton n'avait AUCUN retour visuel : ni souris, ni
clavier, ni pendant l'ajout, ni après.
Geste repris de mood.com, mesuré sur sa feuille servie : son « Add to Cart » ne fait qu'UNE
chose — échanger un dégradé à deux pôles en 200 ms (#28a325→#006b41 au repos,
#0a5235→#249122 au survol), sans ombre ni élévation, la couleur du texte ne bougeant pas.
On garde le geste et on jette les couleurs : celles de mood sont celles d'une marque
cannabis. Ici la lumière passe à DROITE au survol, donc vers le jeton « + » — vers l'action.
Verts maison uniquement, dont #0c3427 déjà utilisé par le survol du CTA checkout.
Le calque `::before` en opacité plutôt qu'une transition sur `background-image` :
l'interpolation de deux dégradés n'est pas garantie d'un moteur à l'autre, et quand elle
échoue le fond SAUTE au lieu de fondre. `isolation:isolate` (posée ci-dessus) est la
déclaration porteuse : sans elle, le `z-index:-1` du calque sort du contexte d'empilement
du bouton et passe DERRIÈRE son propre fond — le calque devient invisible. */
.gbs-add:before{content:"";position:absolute;z-index:-1;inset:0;border-radius:inherit;background:linear-gradient(90deg,#0c3427,var(--green));opacity:0}
.gbs-add i{transition:background-color .2s ease,color .2s ease}
.gbs-add:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.gbs-add:active:before{opacity:1;background:linear-gradient(90deg,var(--green-dark),#0c3427)}
/* Survol réservé aux pointeurs fins : sous 640px le bouton fait 44px et déclenche l'ajout au
doigt — un état de survol y resterait collé après le tap.
ET borné à >640px, pas seulement à `hover:fine`. Corrigé après mesure : `(hover:hover) and
(pointer:fine)` reste VRAI dans une fenêtre desktop rétrécie sous 640px — ce n'est pas
l'apanage du tactile. Or à cette largeur la surcharge mobile repeint le calque avec le
dégradé sombre d'appui : le simple survol donnait alors au bouton l'air déjà enfoncé. La
révélation du calque suit donc la même borne que l'inversion du jeton, qui a sa propre
raison d'être bornée (sous 640px le jeton occupe TOUT le bouton, l'inverser retournerait
la pilule entière). Sous 640px il reste `:active`, qui est le bon retour au doigt.
Le `:has()` reste non borné, comme le `.gbs-product-card__link:hover img` d'origine : le
zoom du packshot est inoffensif à toute largeur. Il rattrape le fait que le bouton est
FRÈRE de `.gbs-product-card__link`, pas dedans — le hover de carte l'ignorait. */
@media (hover:hover) and (pointer:fine){
.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-add:before{transition:opacity .2s ease}
.gbs-add:hover:before{opacity:1}
.gbs-add:hover i{background-color:#fff;color:var(--green-dark)}
}
/* Après l'ajout, WooCommerce pose `.added` sur le bouton et injecte un
`Voir le panier` juste après. Mesuré en DOM : 109×24px, 16px,
couleur encre, AUCUN style — il ouvre une 3e rangée dans `.gbs-product-card__buy` (70→74px).
Le tiroir panier s'ouvrant déjà seul au clic (storefront.js, ouverture optimiste), ce lien
est redondant : on le retire et on confirme sur le bouton lui-même. L'animation est
one-shot, et le bloc global `prefers-reduced-motion` de base.css la neutralise déjà (il
écrase `animation-duration`, mais PAS `transition` — d'où le bloc explicite plus bas). */
.gbs-product-card__buy .added_to_cart{display:none}
.gbs-add.loading{opacity:.72}
.gbs-add.added i{animation:gbsAddDone 620ms cubic-bezier(.17,.74,.26,1)}
@keyframes gbsAddDone{0%{transform:scale(1)}35%{transform:scale(1.18)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){
.gbs-add:before,.gbs-add i,.gbs-product-card__media img,.gbs-bundle-card,.gbs-bundle-card__visual img{transition:none}
}
.gbs-products-footer{display:flex;min-height:34px;align-items:center;justify-content:center;gap:14px;margin:26px 0 0;text-align:center}
.gbs-products-footer:empty{display:none}
.gbs-products-footer span{color:var(--muted);font-size:12px}
/* Sortie de bloc des best-sellers. `.gbs-button` est `inline-flex` : de niveau ligne, il ignore
`margin:auto` et reste collé à gauche sous la grille. `display:flex` le repasse en bloc,
`width:fit-content` lui garde sa largeur de contenu, les marges auto le centrent — sans
conteneur supplémentaire. Le fond ivoire de `--outline` (#f6f2e9) et celui de la section
(#f5f0e7) sont à un point l'un de l'autre : la pilule se lit comme un contour pur, ce qui la
distingue des boutons « Ajouter » verts pleins des cartes juste au-dessus. */
.gbs-bestsellers-section .gbs-catalog-all{display:flex;width:fit-content;margin:18px auto 0}
/* Relais WhatsApp sous la grille : le prototype le réserve au mobile (`display:none` au-dessus
de 640 px), le bloc final « Parler à un conseiller » tenant ce rôle sur grand écran. */
.gbs-catalog-help{display:none}
/* --- Authenticité (deux colonnes) -------------------------------------------------
Prototype : `.authenticity-shell` en grid 0.92fr/1.08fr, coque vert profond rayon 34,
colonne gauche ivoire avec deux anneaux 420/310 et trois packshots, colonne droite en
padding clamp(48px,7vw,92px). Les titres suivent l'échelle maison (800 / -.055em) plutôt
que le 700 du prototype, qui compose avec une autre fonte. */
.gbs-authenticity-section{padding-block:96px}
.gbs-authenticity{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);min-height:560px;overflow:hidden;border-radius:34px;background:var(--green-dark);color:#fff;box-shadow:0 22px 65px rgba(23,23,19,.13)}
.gbs-authenticity__visual{position:relative;display:grid;min-height:560px;place-items:center;overflow:hidden;background:linear-gradient(145deg,var(--ivory),var(--stone))}
.gbs-authenticity__visual:before,.gbs-authenticity__visual:after{position:absolute;border:1px solid rgba(23,23,19,.12);border-radius:50%;content:""}
.gbs-authenticity__visual:before{width:420px;height:420px}
.gbs-authenticity__visual:after{width:310px;height:310px}
.gbs-authenticity__products{position:relative;z-index:2;display:flex;align-items:end;justify-content:center;width:86%;height:82%}
/* `object-position:bottom` : ce bloc posait deja ses BOITES par le bas (`align-items:end`
ci-dessus), mais sous `contain` un packshot moins elance que sa boite reste centre dans
le vide et sa base flotte. Mesure du 18/08, rotations neutralisees : 116,4 px d'ecart
entre les bas d'encre en desktop, 39,4 en mobile. Avec cette ligne : 0,0 px.
Trouve par `npm run audit:gbs-alignement`, pas signale — le meme defaut que sur les
pages pack, sur un bloc que personne ne regardait. */
.gbs-authenticity__products img{width:35%;height:83%;object-fit:contain;object-position:bottom;filter:drop-shadow(0 24px 22px rgba(23,23,19,.18))}
.gbs-authenticity__products img:nth-child(1){transform:translateX(14%) rotate(-4deg) scale(.9)}
.gbs-authenticity__products img:nth-child(2){z-index:2;transform:translateY(-2%)}
.gbs-authenticity__products img:nth-child(3){transform:translateX(-14%) rotate(4deg) scale(.88)}
.gbs-authenticity__copy{display:flex;min-width:0;flex-direction:column;justify-content:center;padding:clamp(48px,7vw,92px)}
.gbs-authenticity__copy .gbs-eyebrow{margin:0;color:var(--gold-soft)}
.gbs-authenticity__copy h2{max-width:560px;margin:14px 0 20px;font-size:clamp(48px,5vw,70px);font-weight:800;letter-spacing:-.055em;line-height:.92}
.gbs-authenticity__copy>p:not(.gbs-eyebrow){max-width:520px;margin:0;color:rgba(255,255,255,.72);font-size:14px;line-height:1.75}
.gbs-sourcing-note{display:grid;gap:8px;margin-top:20px;border:1px solid rgba(20,61,47,.14);border-radius:16px;padding:16px 18px;background:rgba(255,253,248,.7)}
.gbs-sourcing-note>strong{color:#0c3427;font-size:15px;font-weight:700;line-height:1.35}
.gbs-sourcing-note>span{color:var(--muted);font-size:13px;line-height:1.55}
.gbs-auth-proofs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:26px}
.gbs-auth-proofs article{display:grid;grid-template-columns:36px minmax(0,1fr);align-items:start;gap:12px;min-height:112px;border:1px solid rgba(255,255,255,.13);border-radius:18px;padding:16px;background:rgba(255,255,255,.055)}
.gbs-auth-proofs svg{width:24px;height:24px;color:var(--gold-soft)}
.gbs-auth-proofs article>span{display:grid;min-width:0;gap:5px}
.gbs-auth-proofs strong{color:#fff;font-size:14px;font-weight:700;line-height:1.3}
.gbs-auth-proofs small{color:rgba(255,255,255,.65);font-size:12px;line-height:1.45}
/* --- Avis & blog -----------------------------------------------------------------
Avis : carte papier 245 px mini, rayon 19, citation 25 px. Blog : vraie carte blanche
(rayon 20, ombre) avec média en ratio 1.55 et copie à 20 px de marge. */
.gbs-reviews-section{background:var(--ivory)}
.gbs-reviews{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.gbs-reviews article{display:flex;flex-direction:column;min-height:245px;padding:24px;border:1px solid rgba(16,37,28,.14);border-radius:19px;background:#fbf8f2}
.gbs-reviews span{color:#89713d;font-size:13px;letter-spacing:.08em}
.gbs-reviews blockquote{min-height:0;margin:24px 0 auto;font-size:25px;font-weight:600;line-height:1.12;letter-spacing:-.01em}
.gbs-reviews strong{margin-top:24px;font-size:13px;font-weight:700}
.gbs-section--stone{padding-block:88px 104px;background:#eee9df}
.gbs-blog{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.gbs-blog>a{display:grid;grid-template-rows:auto auto auto;gap:0;min-width:0;overflow:hidden;border-radius:20px;background:#fff;box-shadow:0 16px 34px rgba(16,37,28,.07)}
.gbs-blog img{width:100%;height:auto;aspect-ratio:1.55;object-fit:cover;border-radius:0}
.gbs-blog strong{margin:20px 20px 0;font-size:22px;font-weight:700;line-height:1.15}
.gbs-blog p{display:-webkit-box;margin:10px 20px 20px;color:var(--muted);font-size:13px;line-height:1.55;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* Lien « Voir tous les conseils » : le prototype le pose à droite du titre de la section
(`.blog-heading>a`, 13/800, vert profond, sans soulignement). */
.gbs-text-link.gbs-blog-all{flex:0 0 auto;color:var(--green-dark);font-size:13px;text-decoration:none}
/* --- FAQ -------------------------------------------------------------------------
Prototype : `.faq-layout` en 0.8fr/1.2fr, gouttière clamp(48px,8vw,112px), liste bordée
d'un filet haut plus dense et d'un filet par ligne. Le « + » du prototype est un ::after
absolu en vert profond ; l'icône du lien texte y était rendue à 125 px (aucune règle de
taille ne l'atteint) : on la ramène à 18 px, comme partout ailleurs sur le site. */
.gbs-faq-layout{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:start;gap:clamp(48px,8vw,112px)}
.gbs-faq-intro .gbs-eyebrow{margin:0}
.gbs-faq-layout h2{margin:12px 0 18px;font-size:clamp(45px,5vw,65px);font-weight:800;letter-spacing:-.055em;line-height:.94}
.gbs-faq-intro>p{margin:13px 0;color:var(--muted);font-size:13px;line-height:1.7}
.gbs-text-link{display:inline-flex;min-height:44px;align-items:center;gap:7px;font-size:13px;font-weight:800;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.gbs-text-link svg{width:18px;height:18px}
.gbs-faq-list{border-top:1px solid var(--line-strong)}
.gbs-faq-list details{margin-bottom:10px;overflow:hidden;border:1px solid rgba(20,61,47,.12);border-radius:16px;background:#f7f3eb;transition:border-color .18s ease,background .18s ease,box-shadow .18s ease}
.gbs-faq-list details[open]{border-color:rgba(35,105,81,.34);background:#edf2eb;box-shadow:0 12px 30px rgba(20,61,47,.08)}
.gbs-faq-list summary{position:relative;display:flex;min-height:60px;align-items:center;padding:12px 56px 12px 18px;color:var(--green-dark);font-size:14px;font-weight:800;line-height:1.35;list-style:none;cursor:pointer}
.gbs-faq-list summary::-webkit-details-marker{display:none}
.gbs-faq-list summary:after{position:absolute;top:50%;right:14px;display:grid;width:32px;height:32px;place-items:center;border-radius:50%;background:rgba(35,105,81,.1);color:var(--green-dark);font-size:18px;font-weight:400;line-height:1;content:"+";transform:translateY(-50%);transition:color .18s ease,background .18s ease}
.gbs-faq-list details[open] summary:after{background:var(--green);color:#fff;content:"−"}
[dir=rtl] .gbs-faq-list summary{padding:12px 18px 12px 56px}
[dir=rtl] .gbs-faq-list summary:after{right:auto;left:14px}
.gbs-faq-answer{max-width:72ch;margin-inline:18px;padding:0 0 18px;color:var(--ink-soft);font-size:12px;line-height:1.7}
.gbs-faq-answer p{margin:0}
/* --- Appel final ------------------------------------------------------------------ */
/* --- Méga-menu : rien ici ----------------------------------------------------------
Ce fichier contenait une copie verbatim de tout `mega.css`. Comme `functions.php` le
charge APRES (deps `['gbs-base','gbs-mega']`), la copie gagnait a specificite egale et
rendait INERTE, sur la seule page d'accueil, toute correction faite dans `mega.css`.
Les valeurs etant alors identiques, le piege etait invisible — jusqu'au premier correctif.
Source unique : `assets/css/mega.css`. Ne pas redupliquer ici. */
/* --- RTL -------------------------------------------------------------------------- */
[dir=rtl] .gbs-hero-delivery{right:auto;left:8%}
[dir=rtl] .gbs-hero-seal{left:auto;right:5%}
[dir=rtl] .gbs-hero-stage{inset:auto auto 7% 7%}
[dir=rtl] .gbs-hero__visual .gbs-hero-product.item-1{inset:auto auto 10% 18%}
[dir=rtl] .gbs-hero__visual .gbs-hero-product.item-2{inset:auto auto 7% 3%}
[dir=rtl] .gbs-hero__visual .gbs-hero-product.item-0{inset:auto 15% 8% auto}
[dir=rtl] .gbs-universe-arrow{right:auto;left:13px}
[dir=rtl] .gbs-universe-products img{right:auto;left:0}
[dir=rtl] .gbs-universe-products .product-1{right:auto;left:46px;transform:rotate(4deg)}
[dir=rtl] .gbs-universe-card:hover .gbs-universe-products .product-1,[dir=rtl] .gbs-universe-card:focus-visible .gbs-universe-products .product-1{transform:rotate(4deg) translateY(-4px)}
[dir=rtl] .gbs-product-card__media em{left:auto;right:13px}
/* L'arabe a besoin de plus d'interligne : à 0.92 (la valeur du prototype, calibrée sur une
fonte latine) les jambages de la 2e ligne touchent la 1re. Mesuré sur « أربع نقاط ثقة قبل
الطلب. » et sur le titre de l'appel final. */
[dir=rtl] .gbs-authenticity__copy h2,[dir=rtl] .gbs-faq-layout h2{line-height:1.15}
[dir=rtl] .gbs-objectives strong{inset:auto 24px 24px 72px}
[dir=rtl] .gbs-objectives i{right:auto;left:20px}
/* --- Adaptatif -------------------------------------------------------------------- */
@media(max-width:1279px){
.gbs-hero{grid-template-columns:minmax(0,1fr) minmax(400px,.92fr)}
.gbs-hero__copy{padding:42px}
.gbs-hero__copy h1{font-size:clamp(47px,5vw,63px)}
.gbs-bundle-carousel{grid-auto-columns:calc((100% - 28px)/3)}
.gbs-products-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:900px){
.gbs-hero{grid-template-columns:1fr;gap:0;min-height:0;padding:0}
.gbs-hero__copy{min-height:0;padding:38px 34px 28px}
.gbs-hero__copy h1{font-size:clamp(48px,8vw,67px)}
.gbs-hero__visual{min-height:420px;margin:0}
.gbs-hero-stage{right:11%;width:72%}
.gbs-objectives-section{padding-block:72px 54px}
.gbs-objectives{grid-template-columns:repeat(2,minmax(0,1fr))}
.gbs-universe-section{padding-block:0 72px}
.gbs-universes{grid-template-columns:repeat(2,minmax(0,1fr))}
.gbs-packs-section,.gbs-bestsellers-section{padding-block:72px}
.gbs-bundle-carousel{grid-auto-columns:calc((100% - 14px)/2)}
.gbs-products-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.gbs-trust-container{padding-bottom:72px}
.gbs-trust-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
.gbs-trust-item:nth-child(3){border-inline-start:0}
.gbs-trust-item:nth-child(3),.gbs-trust-item:nth-child(4){border-top:1px solid var(--line)}
.gbs-authenticity-section,.gbs-faq-section{padding-block:72px}
.gbs-authenticity{grid-template-columns:1fr}
.gbs-authenticity__visual{min-height:470px}
.gbs-faq-layout{grid-template-columns:1fr;gap:28px}
.gbs-reviews,.gbs-blog{grid-template-columns:repeat(2,1fr)}
.gbs-section--stone{padding-block:72px}
}
/*
* 641–900 px : le hero passe en une colonne, le visuel devient large et court (ratio 2,03 à
* 900 px contre 0,97 en desktop). Or les trois produits sont dimensionnés par la HAUTEUR de leur
* boîte (object-fit:contain) alors qu'ils sont positionnés en % de la LARGEUR : les pourcentages
* de la maquette desktop ne tiennent donc qu'à RATIO constant. On le verrouille par une seule
* variable de taille et on centre le bloc. Sans ce garde, l'encre ne couvrait plus que 34 % de la
* largeur et le magnésium flottait à 226 px du Regaine.
* width:min(100%,…) et NON max-width + marges auto : tous les enfants du visuel sont en
* position:absolute, donc sa largeur intrinsèque vaut 0 — des marges auto désactivent le stretch
* de la grille et le visuel s'effondre à 0 px.
* Borne basse à 640.02px et non 641px : `max-width:640px` est inclusif et `min-width:641px`
* aussi, donc une largeur FRACTIONNAIRE entre les deux (zoom navigateur non entier) ne matchait
* aucun des deux blocs et retombait sur l'état d'avant correctif. Convention Bootstrap.
*/
@media(min-width:640.02px) and (max-width:900px){
.gbs-hero__visual{--gbs-hero-size:clamp(420px,64vw,540px);min-height:var(--gbs-hero-size);width:min(100%,calc(var(--gbs-hero-size) * 1.03));justify-self:center}
/* la barrette garde une hauteur fixe : on ancre son BAS sur le haut de l'arche (23 % du haut),
comme en desktop, au lieu de la laisser mordre 15 px sur le carton Regaine */
.gbs-hero-delivery{top:auto;bottom:calc(77% - 10px)}
}
@media(max-width:640px){
.gbs-shell{width:min(1320px,calc(100% - 28px))}
.gbs-proofbar,.gbs-header,.gbs-footer,.gbs-mega{padding-inline:14px}
.gbs-hero{margin-block:14px 44px;border-radius:24px}
.gbs-hero__copy{padding:36px 18px 28px}
.gbs-hero__copy h1{margin:10px 0 14px;font-size:45px;line-height:.91}
.gbs-hero__copy>p:not(.gbs-eyebrow){font-size:14px;line-height:1.55}
.gbs-hero-offer{grid-template-columns:minmax(0,1fr) auto;min-height:86px;gap:10px;margin-top:20px;padding:11px 12px;border-radius:13px}
.gbs-hero-offer>i{display:none}
.gbs-hero-offer__copy>small{font-size:10px}
.gbs-hero-offer__copy>strong{margin-top:3px;font-size:12px}
.gbs-hero-offer__rating{gap:4px;margin-top:3px;font-size:10px;white-space:nowrap}
.gbs-hero-offer__price{min-width:86px;white-space:normal}
.gbs-hero-offer__price>strong{font-size:19px}
.gbs-hero-offer__price>small{font-size:12px;line-height:1.3;text-align:right}
.gbs-hero__actions{display:grid;grid-template-columns:1fr;margin-top:12px}
.gbs-hero__actions .gbs-button{width:100%;min-height:48px;padding-inline:13px;font-size:13px;white-space:nowrap}
.gbs-hero__actions .gbs-button--ghost{display:none}
.gbs-hero__trust{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:13px;font-size:12px}
.gbs-hero__trust span{align-items:flex-start;line-height:1.25}
.gbs-hero__trust span:last-child{display:none}
/* --- La scene remonte AU-DESSUS du bouton --------------------------------------
Mesure du 17/08 sur le staging : a 375x812 le visuel commencait a 598 px de haut de
page et le premier packshot a 635 — soit exactement la ligne de flottaison de Safari.
Trois packshots peints sous la ligne ne valent pas mieux qu'un seul.
`display:contents` promeut les enfants de la colonne de texte en items de la grille
du hero : le visuel se glisse alors entre le chapo et le bouton SANS toucher au
balisage, donc sans rien changer au desktop. La colonne portait le rembourrage et le
z-index — les deux sont rendus a ses enfants. */
.gbs-hero__copy{display:contents}
.gbs-hero__copy>*{position:relative;z-index:2}
.gbs-hero__copy>.gbs-eyebrow{display:none} /* 51 px avant le titre, rembourrage compris */
.gbs-hero__copy>h1{order:2;padding:26px 18px 0}
.gbs-hero__copy>p:not(.gbs-eyebrow){order:3;padding-inline:18px}
.gbs-hero__visual{order:4}
.gbs-hero__actions{order:5;margin-top:0;padding:16px 18px 0}
.gbs-hero__trust{order:6;padding:0 18px 30px}
/* La carte repetait le bouton — le prix 2x, « cure 3 mois » 2x, « livraison offerte »
2x — pour 124 px de hauteur. Elle portait aussi « 333 DH/mois », qui n'est pas un
echeancier mais une division, dans une boutique qui encaisse a la livraison. */
.gbs-hero-offer{display:none}
/* La pastille flottante quitte la scene pour deux raisons mesurees : elle poussait le
groupe de 104 px vers le bas — c'est a elle seule que les trois packshots devaient de
rester sous la ligne de flottaison — et elle affirmait pour les trois une promesse qui
ne vaut que pour la cure Regaine. La promesse reprend sa place dans la reassurance. */
.gbs-hero-delivery{display:none}
.gbs-hero-seal{display:none}
.gbs-hero__trust span:nth-child(2){display:none} /* « Paiement a reception » : deja dans le chapo */
.gbs-hero__trust span:last-child{display:inline-flex}
/* --- La composition des trois produits, recopiee du desktop ---------------------
Hauteur DERIVEE DU GROUPE, pas choisie : le visuel fait 100vw - 28px (la marge de
`.gbs-shell`), le groupe en occupe 82 % de large donc 82/1,0945 = 74,9 % de haut, et
il lui faut 9 % de degagement. D'ou 82,33 % de la largeur du viewport. Le plafond de
314 px est atteint quand la largeur du groupe bute sur son maximum de 312 px. Toute
hauteur en plus serait du vide — et ce vide repousse le bouton sous la ligne.
Les six valeurs de position viennent de la geometrie PEINTE du desktop (les regles
`.item-*` ci-dessus, plus les ratios de `inc/image-variants.php`), pas d'un reglage a
l'oeil : chaque boite a EXACTEMENT le ratio de son image, donc `object-fit:contain` ne
laisse aucune marge transparente. Sur une composition qui se chevauche, une ancre plus
large que son dessin volerait les taps de sa voisine sur une zone ou rien n'est peint. */
.gbs-hero__visual{min-height:clamp(250px,calc(82.33vw - 23px),314px)}
.gbs-hero-stage{right:8%;bottom:5%;width:84%;height:86%}
.gbs-hero-lineup{display:block;position:absolute;left:50%;bottom:4%;width:min(82%,312px);
aspect-ratio:1.0740;transform:translateX(-50%)}
.gbs-hero__visual .gbs-hero-product.item-0{display:block;inset:34.848% auto auto 0;width:31.571%;height:63.636%}
.gbs-hero__visual .gbs-hero-product.item-1{inset:0 auto auto 27.482%;width:56.124%;height:95.455%}
.gbs-hero__visual .gbs-hero-product.item-2{display:block;inset:31.818% auto auto 78.265%;width:21.735%;height:68.182%}
/* MIROIR RTL — en proprietes LOGIQUES, et c'est le point.
La premiere version ecrivait des `right` PHYSIQUES calcules en 100 - gauche - largeur.
C'est faux : cette formule redonne la position LTR exprimee depuis l'autre bord, elle
ne miroite rien. Mesure sur /ar/ a 375 px : item-1 et item-2 restaient a 28,48 % et
75,79 % — leurs regles ne faisaient RIEN — pendant qu'item-0 basculait a 63,54 % et
passait sous item-2 (z-index 3 contre 1) sur 26,4 % de l'enveloppe. Le flacon de
magnesium disparaissait derriere le compte-gouttes et le tiers gauche du socle restait
vide, sur la moitie arabophone du trafic.
Le miroir de `left:X` a largeur fixe est `right:X`. `inset-inline-start` l'exprime sans
arithmetique : ses valeurs sont IDENTIQUES aux `left` du bloc LTR ci-dessus, et c'est
verifiable d'un coup d'oeil — c'est aussi ce que verifie `npm run check:gbs-hero-rtl`.
Meme convention que les regles RTL desktop (l.401-403), dont ce bloc avait devie.
Les rotations ne sont pas inversees, comme en desktop : les miroiter ici ferait diverger
les deux breakpoints. */
[dir=rtl] .gbs-hero__visual .gbs-hero-product.item-0{top:34.848%;bottom:auto;inset-inline-start:0;inset-inline-end:auto}
[dir=rtl] .gbs-hero__visual .gbs-hero-product.item-1{top:0;bottom:auto;inset-inline-start:27.482%;inset-inline-end:auto}
[dir=rtl] .gbs-hero__visual .gbs-hero-product.item-2{top:31.818%;bottom:auto;inset-inline-start:78.265%;inset-inline-end:auto}
/* REPLI. Toute la composition repose sur `aspect-ratio` : c'est lui, et lui seul, qui
donne une hauteur a l'enveloppe positionnee en absolu. Sans support, l'enveloppe fait
0 px de haut, les trois hauteurs en % se resolvent a 0, et le hero se vide — un ecran
blanc, pas une degradation. Le garde retablit alors l'etat anterieur : un packshot,
sa pastille, la carte d'offre. `aspect-ratio` est la plus recente des fonctions
utilisees ici (Safari 15, Chrome 88), donc ce seul test couvre aussi `min()` et
`clamp()`. `display:contents` est plus ancien (Safari 11.1) : s'il manquait, seul le
reordonnancement serait ignore, ce qui degrade sans casser. */
@supports not (aspect-ratio:1/1){
/* Rendre sa boite a la colonne de texte NE SUFFIT PAS : le bloc mobile a deplace le
rembourrage sur ses enfants, qui le gardent. La colonne le reprend en plus, et le
texte se retrouve indente deux fois (18 + 18 px de chaque cote, et 26 px de trop
au-dessus du titre). On rend donc aussi les enfants a leur etat nu. */
.gbs-hero__copy{display:block}
.gbs-hero__copy>h1,.gbs-hero__copy>p:not(.gbs-eyebrow),
.gbs-hero__actions,.gbs-hero__trust{padding:0}
.gbs-hero__actions{margin-top:12px}
.gbs-hero__copy>.gbs-eyebrow{display:block}
.gbs-hero-offer{display:grid}
.gbs-hero-delivery{display:grid;top:7%;right:6%;min-width:132px;padding:9px 11px}
.gbs-hero-delivery small{display:none}
.gbs-hero-lineup{display:contents}
.gbs-hero__visual{min-height:370px}
.gbs-hero__visual .gbs-hero-product.item-1{inset:auto 24% 4% auto;width:52%;height:86%}
.gbs-hero__visual .gbs-hero-product.item-0,.gbs-hero__visual .gbs-hero-product.item-2{display:none}
.gbs-hero__trust span:nth-child(2){display:inline-flex}
.gbs-hero__trust span:last-child{display:none}
}
.gbs-objectives-section{padding-block:56px 40px}
.gbs-objectives{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.gbs-objectives>a{aspect-ratio:.96;border-radius:15px}
.gbs-objectives strong{inset:auto 48px 15px 15px;font-size:18px}
.gbs-objectives i{right:11px;bottom:11px;width:34px;height:34px;font-size:15px}
[dir=rtl] .gbs-objectives strong{inset:auto 15px 15px 48px}
[dir=rtl] .gbs-objectives i{right:auto;left:11px}
.gbs-universe-section{padding-block:0 56px}
.gbs-universes{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.gbs-universes .gbs-universe-card{grid-template-columns:minmax(0,1fr) 62px;min-height:116px;padding:14px;border-radius:14px}
.gbs-universe-label small{font-size:12px}
.gbs-universe-label strong{font-size:17px}
.gbs-universe-products{width:62px;height:86px}
.gbs-universe-products img{width:55px;height:84px}
.gbs-universe-products .product-1{right:29px;width:45px;height:72px}
[dir=rtl] .gbs-universe-products .product-1{left:29px}
.gbs-universe-arrow{display:none}
.gbs-section-head{display:block;margin-bottom:24px}
.gbs-section-head>p{margin-top:10px;font-size:13px}
.gbs-objectives-section .gbs-section-head h2{font-size:42px}
.gbs-packs-section,.gbs-bestsellers-section{padding-block:52px}
.gbs-carousel-actions{flex-wrap:wrap}
.gbs-bundle-carousel{grid-auto-columns:76%;gap:10px}
.gbs-bundle-card>a{grid-template-rows:190px auto auto 1fr}
.gbs-bundle-card__visual{height:190px}
.gbs-bundle-card h3{font-size:18px}
.gbs-filter-bar{flex-wrap:nowrap;margin-inline-end:-14px;overflow-x:auto;padding-inline-end:14px;scrollbar-width:none;scroll-snap-type:x proximity}
.gbs-filter-bar::-webkit-scrollbar{display:none}
.gbs-filter-chip{flex:0 0 auto;scroll-snap-align:center}
.gbs-products-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 10px}
.gbs-product-card__link{grid-template-rows:auto auto;gap:12px}
.gbs-product-card__media{min-height:205px;border-radius:15px}
.gbs-product-card__media img{width:86%;height:182px}
.gbs-product-card__media em{top:8px;left:8px;padding:5px 8px;font-size:10px}
[dir=rtl] .gbs-product-card__media em{left:auto;right:8px}
.gbs-product-card h3{font-size:13px}
.gbs-product-card__buy{grid-template-columns:1fr 44px;min-height:62px;margin-top:10px}
.gbs-product-card__buy>span{font-size:18px}
/* `gap:0` : le bouton garde son libelle dans le DOM, masque par `font-size:0`. Un noeud texte
de largeur nulle reste un ITEM FLEX, donc la gouttiere de 9 px heritee de `.gbs-button`
s'appliquait entre lui et l'icone : le « + » etait pousse de gap/2 = 4,5 px a droite du centre
(mesure : bouton centre a 160,5, icone a 165). Sans libelle visible, elle n'a plus d'objet. */
.gbs-add{width:44px;min-width:44px;height:44px;min-height:44px;padding:0;justify-content:center;gap:0;font-size:0}
.gbs-add i{width:44px;height:44px;background:transparent;font-size:22px}
/* Le jeton occupe ici TOUT le bouton : le calque de survol n'a plus de côté clair à
déplacer, et le survol lui-même est neutralisé (pointeur grossier). Seul `:active` parle,
et on l'assombrit uniformément pour un retour tactile net. */
.gbs-add:before{background:linear-gradient(90deg,var(--green-dark),#0c3427)}
.gbs-trust-container{padding-bottom:56px}
.gbs-trust-item{gap:9px}
.gbs-trust-icon{width:36px;height:36px;flex-basis:36px}
.gbs-trust-icon svg{width:16px;height:16px}
.gbs-trust-item strong{font-size:12px}
/* Pleine largeur pour que la pilule catalogue et le relais WhatsApp qui réapparaît ici
forment deux gabarits identiques empilés, plutôt qu'une pilule courte au-dessus d'une large. */
.gbs-bestsellers-section .gbs-catalog-all{width:100%}
.gbs-catalog-help{display:flex;min-height:48px;align-items:center;justify-content:center;gap:8px;margin-top:13px;border:1px solid var(--line);border-radius:999px;color:var(--green);font-size:12px;font-weight:800}
.gbs-catalog-help svg{width:16px;height:16px;flex:0 0 16px}
.gbs-authenticity-section,.gbs-faq-section{padding-block:52px}
.gbs-authenticity{border-radius:24px}
.gbs-authenticity__visual{min-height:360px}
.gbs-authenticity__copy{padding:42px 24px}
.gbs-authenticity__copy h2{font-size:48px}
.gbs-auth-proofs{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.gbs-auth-proofs article{grid-template-columns:minmax(0,1fr);min-height:132px;gap:8px;padding:13px}
.gbs-auth-proofs svg{width:22px;height:22px}
.gbs-auth-proofs strong{font-size:13px}
.gbs-faq-layout h2{font-size:48px}
.gbs-reviews,.gbs-blog{grid-template-columns:1fr}
.gbs-reviews article{min-height:250px;padding:24px}
.gbs-reviews blockquote{margin:24px 0 auto;font-size:22px}
.gbs-section--stone{padding-block:52px}
.gbs-blog strong{margin:16px 16px 0;font-size:19px}
.gbs-blog p{margin:8px 16px 16px}
}
/* Écrans étroits : le prototype empile la carte offre (à 360 px le prix mangeait 163 des
300 px disponibles et il ne restait plus de place au nom du produit). */
@media(max-width:400px){
.gbs-hero__copy{padding:26px 16px 22px}
.gbs-hero__copy h1{margin:8px 0 12px;font-size:34px;line-height:.98}
.gbs-hero__copy>p:not(.gbs-eyebrow){font-size:13px}
.gbs-hero-offer{grid-template-columns:minmax(0,1fr);gap:8px}
.gbs-hero-offer__price{min-width:0;align-items:flex-start;text-align:left}
.gbs-hero-offer__price>strong{display:inline}
.gbs-hero-offer__price>small{display:inline;margin:0 0 0 6px;text-align:left}
}
@media(max-width:360px){
.gbs-hero__copy{padding:22px 17px 17px}
.gbs-hero__copy h1{margin:5px 0 8px;font-size:32px}
.gbs-hero__copy>p:not(.gbs-eyebrow){font-size:13px}
.gbs-objectives{grid-template-columns:1fr}
.gbs-universes{grid-template-columns:1fr}
.gbs-universes .gbs-universe-card{min-height:110px}
.gbs-trust-strip{grid-template-columns:minmax(0,1fr)}
.gbs-trust-item:nth-child(n+2){border-inline-start:0;border-top:1px solid var(--line)}
.gbs-auth-proofs{grid-template-columns:minmax(0,1fr)}
.gbs-auth-proofs article{min-height:0}
.gbs-product-card__buy>span{font-size:17px}
}
/* Garde l'offre à forte intention et son action visibles sur les écrans courts. */
@media (min-width:901px) and (max-height:800px){
.gbs-hero__copy{padding:34px 40px}
.gbs-hero__copy h1{margin-bottom:.2em;font-size:clamp(48px,4.45vw,57px)}
.gbs-hero__copy>p:not(.gbs-eyebrow){font-size:15px;line-height:1.5}
.gbs-hero-offer{min-height:78px;margin-top:14px;padding-block:9px}
.gbs-hero__actions{margin-top:12px}
.gbs-hero__trust{margin-top:14px}
}
/* ═══ « Voir tous les packs » — plancher tactile, a cout nul ═══════════════════════════════════
Mesure en emulation d'appareil reelle a 320 px : `.gbs-carousel-actions > a` fait 123x20 px
(19,5 px de hauteur calculee), sous les 24x24 de WCAG 2.2 AA 2.5.8. Ce n'est PAS un lien en
ligne dans du texte — c'est un CTA autonome dans l'en-tete de section — donc l'exception
« inline » de 2.5.8 ne s'applique pas. Present en FR et sous /ar/ (96x20).
CE CORRECTIF NE COUTE AUCUN PIXEL DE MISE EN PAGE : `.gbs-carousel-actions` (l.137) est un flex
`align-items:center` qui contient deja les deux ronds de navigation du carrousel a 44x44. La
rangee mesure donc DEJA 44 px de haut ; le lien s'y aligne sans rien pousser.
Mesure a 320 px : lien 19,5 -> 44 px, hauteur de `.gbs-section-head` 136,6 -> 136,6, inchangee. */
@media(max-width:900px){
.gbs-carousel-actions>a{display:inline-flex;align-items:center;min-height:44px}
}