.gbs-main--checkout{max-width:none;padding:0;background:#fff}.woocommerce form.checkout{margin:0}.gbs-checkout-layout{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(430px,.75fr);align-items:start;min-height:calc(100vh - 76px)}.gbs-checkout-form-pane{padding:clamp(42px,6vw,92px) max(28px,calc((100vw - 1280px)/2));padding-inline-end:clamp(44px,7vw,110px)}.gbs-checkout-form-pane h1{margin:5px 0 15px;font-size:clamp(38px,4.3vw,60px);font-weight:800;letter-spacing:-.05em;line-height:1.02}.gbs-checkout-intro{max-width:620px;margin:0 0 32px;color:#686860;font-size:18px}.gbs-country-fixed{grid-column:1/-1;display:flex;align-items:center;gap:14px;min-height:62px;margin:0;padding:12px 16px;border:1px solid var(--line);border-radius:14px;background:#f5f2ec}.gbs-country-fixed svg{width:25px;height:25px;color:var(--green)}.gbs-country-fixed div{display:flex;flex-direction:column}.gbs-country-fixed small{color:#686860}.gbs-customer-details,.gbs-customer-details .col-1{float:none!important;width:auto!important}.woocommerce-billing-fields>h3{display:none}
.gbs-field-group-head{grid-column:1/-1;display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:26px 0 2px;padding-top:20px;border-top:1px solid var(--line)}
.gbs-field-group-head:first-child{margin-top:6px;padding-top:0;border-top:0}
.gbs-field-group-head h3{margin:0;font-size:17px;font-weight:800;letter-spacing:-.02em}
.gbs-field-group-head span{color:var(--muted);font-size:12px}
.gbs-country-fixed em{margin-inline-start:auto;color:var(--muted);font-size:12px;font-style:normal}.woocommerce-billing-fields__field-wrapper{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px 14px;max-width:680px}.woocommerce-billing-fields__field-wrapper .form-row{float:none!important;width:auto!important;margin:0;padding:0}.woocommerce-billing-fields__field-wrapper .form-row-wide{grid-column:1/-1}.woocommerce-billing-fields label{display:block;margin:0 0 7px;font-size:13px;font-weight:800}.woocommerce-billing-fields input.input-text,.woocommerce-billing-fields select{width:100%;height:54px;padding:0 16px;border:1px solid #cbc7bf;border-radius:10px;background:#fff;color:var(--ink);font-family:inherit;font-size:16px;box-shadow:none}.woocommerce-billing-fields input:focus{outline:3px solid var(--focus);border-color:var(--green)}.woocommerce-invalid input.input-text{border-color:#a53224!important}
/* La rangée du pays porte un input HIDDEN (billing_country=MA) : sans cette règle, sa cellule
   vide occupe une ligne de la grille (gap compris) là où le bloc « Pays de livraison : Maroc »
   dit déjà tout. Le label est aussi vidé côté PHP (GBS_Checkout::fields()) — ceci est le filet.
   display:none ne retire PAS un input hidden de la soumission du formulaire. */
#billing_country_field{display:none}
/* Verdict du même contrôle que le serveur (0[67] + 8 chiffres), rendu au blur par storefront.js
   sous le champ — même rouge que la bordure .woocommerce-invalid. */
.gbs-phone-hint{display:block;margin-top:7px;color:#a53224;font-size:12px;line-height:1.4}.woocommerce-error{margin:0 0 24px!important;border:1px solid #cc8277!important;border-radius:14px;background:#fff1ef;color:#74281f}.gbs-checkout-sidebar{position:sticky;top:96px;align-self:start;display:grid;align-content:start;gap:18px;padding:clamp(30px,4vw,65px) max(24px,calc((100vw - 1280px)/2));padding-inline-start:clamp(28px,4vw,58px);background:#f3efe7}.gbs-checkout-order-panel{position:static;padding:28px;border:1px solid #d8d1c4;border-radius:26px;background:#f8f5ef}.gbs-checkout-order-panel h2{margin:4px 0 22px;font-size:28px;font-weight:800;letter-spacing:-.035em}.woocommerce-checkout-review-order-table{width:100%;border:0!important;border-collapse:collapse}.woocommerce-checkout-review-order-table th,.woocommerce-checkout-review-order-table td{padding:13px 0!important;border:0!important;border-bottom:1px solid #d8d1c4!important}.woocommerce-checkout-review-order-table .product-name{padding-inline-end:18px!important}.woocommerce-checkout-review-order-table tfoot .order-total th,.woocommerce-checkout-review-order-table tfoot .order-total td{padding-top:20px!important;font-size:24px}.woocommerce-checkout-review-order-table .gbs-checkout-shipping-goal td{padding:19px 0!important}.gbs-checkout-order-panel .gbs-shipping-progress strong,.gbs-checkout-order-panel .gbs-shipping-progress span{color:var(--deep)!important}.gbs-checkout-order-panel .gbs-shipping-progress strong{display:block;margin-bottom:4px;font-size:13px;letter-spacing:.09em;text-transform:uppercase}.gbs-checkout-order-panel .gbs-shipping-progress i{display:block;height:8px;margin-top:11px;border-radius:999px;background:#d9ddd5;overflow:hidden}.gbs-checkout-order-panel .gbs-shipping-progress b{display:block;height:100%;border-radius:inherit;background:var(--green)}.woocommerce-checkout-payment{margin-top:22px!important;background:transparent!important}.woocommerce-checkout-payment ul.payment_methods{padding:0!important;border:0!important}.woocommerce-checkout-payment li{padding:15px;border:1px solid var(--line);border-radius:14px;background:#fff}.woocommerce-checkout-payment .payment_box{margin:8px 0 0!important;padding:0!important;background:transparent!important}.woocommerce-checkout-payment .payment_box:before{display:none!important}.woocommerce-terms-and-conditions-wrapper{font-size:13px;color:#686860}.woocommerce #payment #place_order{float:none;width:100%;min-height:60px;margin:16px 0 0;border:0;border-radius:999px;background:var(--green);color:#fff;font-family:inherit;font-size:15px;font-weight:800}.gbs-checkout-recommendations{position:static;padding:22px;border:1px solid #d8d1c4;border-radius:22px;background:#fff}.gbs-checkout-recommendations h2{margin:5px 0 16px;font-size:23px}.gbs-checkout-recommendations .gbs-recommendations{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.gbs-checkout-recommendations .gbs-reco-card{min-height:0;padding:10px;grid-template-columns:68px minmax(0,1fr);grid-template-rows:auto auto}.gbs-checkout-recommendations .gbs-reco-card__media{grid-row:1/3;width:68px;height:82px}.gbs-checkout-recommendations .gbs-reco-card strong{font-size:13px;line-height:1.3;-webkit-line-clamp:2}.gbs-checkout-recommendations .gbs-reco-card__action>span{font-size:14px}.gbs-checkout-recommendations .gbs-reco-card button{width:44px;height:44px}.woocommerce-order-received .gbs-main{min-height:70vh}.woocommerce-order{max-width:900px;margin:60px auto;padding:30px}.woocommerce-thankyou-order-received{font-size:30px;color:var(--green)}
@media(max-width:900px){.gbs-checkout-layout{grid-template-columns:1fr;min-height:0}.gbs-checkout-form-pane{grid-row:1;padding:32px 16px 130px}.gbs-checkout-sidebar{grid-row:2;padding:6px 16px 24px}.gbs-checkout-order-panel{position:static;padding:20px;border-radius:20px}.gbs-checkout-order-panel h2{font-size:28px}.gbs-checkout-recommendations{position:static;margin-top:12px;padding:18px}.gbs-checkout-form-pane h1{font-size:33px;line-height:1.05}.gbs-checkout-intro{margin-bottom:18px;font-size:15px}.woocommerce-billing-fields>h3{margin:22px 0 15px;font-size:23px}.woocommerce-billing-fields__field-wrapper{max-width:none}.woocommerce #payment #place_order{position:fixed;z-index:170;left:12px;right:12px;bottom:max(10px,env(safe-area-inset-bottom));width:calc(100% - 24px);box-shadow:0 12px 36px rgba(0,0,0,.25)}}
@media(max-width:520px){.woocommerce-billing-fields__field-wrapper{grid-template-columns:1fr}.woocommerce-billing-fields__field-wrapper .form-row{grid-column:1}.gbs-checkout-form-pane h1{font-size:30px}.gbs-checkout-intro{font-size:16px}.gbs-checkout-order-panel{padding:16px}.gbs-checkout-sidebar{padding-inline:10px}}

/* ── UNE seule colonne collante, pas deux freres collants ─────────────────────────────────────
   Defaut mesure sur le staging (1440x900, panier de 10 lignes) : `.gbs-checkout-order-panel` et
   `.gbs-checkout-recommendations` etaient DEUX freres `position:sticky`, le second epingle a
   `top:calc(96px + 520px)` — une hypothese codee en dur sur la hauteur du premier. Des que le
   panier depasse ~3 produits le panneau depasse 520 px (mesure : 1289 px) et les deux se
   recouvrent : 298 px de chevauchement a scrollY 1300, 426 px a 1700. `elementFromPoint` sur la
   ligne « Total a payer au livreur » renvoyait `DIV.gbs-recommendations`, et le centre du bouton
   « Commander » renvoyait `BUTTON.gbs-reco-card__add` — cliquer pour commander AJOUTAIT un produit.

   La reference resout ca en ne rendant collant que le CONTENEUR, ses enfants restant statiques
   (`body.is-checkout .checkout-sidebar{position:sticky;display:grid;align-self:start;gap:16px}`
   + `.checkout-sidebar .checkout-order-summary{position:static}`) : deux enfants d'une meme grille
   ne peuvent pas se superposer, quelle que soit la hauteur du premier.

   Effet de bord recherche sur le second defaut — un `sticky` plus haut que le viewport epingle son
   haut et rend son bas inatteignable : le deplacement d'un sticky est borne par son bloc conteneur.
   Quand le panier est long, la colonne DEVIENT l'element le plus haut de `.gbs-checkout-layout`,
   donc sa course vaut zero et elle defile normalement — le total redevient atteignable. Quand le
   panier est court, `min-height:calc(100vh - 76px)` laisse de la course et elle colle. Aucun
   `max-height`, aucun defilement interne, aucun JS.
   Sous 900 px, `.gbs-checkout-sidebar{display:contents}` prime : la colonne n'a plus de boite,
   `position`/`gap` y sont donc sans objet, et l'ordre recapitulatif -> formulaire -> reco tient. */

/* ── Recapitulatif sur-mesure (woocommerce/checkout/review-order.php) ─────────────────────
   Le tableau WooCommerce natif n'avait ni image, ni « Quantite : N », et empilait les metas
   de ligne en lignes de tableau. Anatomie calquee sur le template : vignette + corps + prix. */
.gbs-review-order thead{display:none}
/* WooCommerce couvre le recapitulatif d'un voile blanc semi-transparent pendant chaque
   recalcul (ville, frais de livraison, coupon). Le voile donnait l'impression que le bloc
   etait desactive — et pouvait rester visible assez longtemps sur le staging. On conserve
   l'overlay qui bloque les doubles clics, mais sans delaver les montants ; le petit indicateur
   vert porte seul l'etat de chargement. */
.gbs-checkout-order-panel .blockUI.blockOverlay{background:transparent!important;opacity:1!important;cursor:wait}
.gbs-checkout-order-panel .blockUI.blockOverlay::after{content:"";box-sizing:border-box;position:absolute;inset-block-start:14px;inset-inline-end:14px;width:24px;height:24px;border:3px solid rgba(33,94,75,.2);border-top-color:var(--green);border-radius:50%;background:#f8f5ef;box-shadow:0 0 0 6px rgba(248,245,239,.94);animation:gbs-checkout-review-spin .7s linear infinite}
@keyframes gbs-checkout-review-spin{to{transform:rotate(1turn)}}
@media(prefers-reduced-motion:reduce){.gbs-checkout-order-panel .blockUI.blockOverlay::after{animation:none;border-color:var(--green)}}
.gbs-review-order .gbs-review-line td{vertical-align:top}
.gbs-review-order .gbs-review-line .product-name{display:flex;align-items:flex-start;gap:12px}
.gbs-review-line__media{flex:0 0 64px;position:relative;width:64px;height:64px;border-radius:14px;background:var(--stone);overflow:hidden}
.gbs-review-line__media img{position:absolute;inset:10%;width:80%;height:80%;object-fit:contain}
.gbs-review-line__body{display:flex;min-width:0;flex-direction:column;gap:3px}
.gbs-review-line__body strong{font-size:13px;font-weight:700;line-height:1.35}
.gbs-review-line__qty{color:var(--muted);font-size:12px}
.gbs-review-line__meta{color:var(--muted);font-size:11px;line-height:1.4}
.gbs-review-line__meta p{margin:0}
.gbs-review-order .product-total{white-space:nowrap;text-align:end;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
.gbs-review-order tfoot th{font-size:13px;font-weight:700;text-align:start}
.gbs-review-order tfoot td{text-align:end;font-variant-numeric:tabular-nums}
.gbs-review-order .gbs-review-total th{font-size:15px;font-weight:800;letter-spacing:-.02em}
.gbs-review-order .gbs-review-total td{font-size:26px;font-weight:800;letter-spacing:-.03em}

/* ══ Parite avec le template de reference — checkout ═══════════════════════════════════════════
   Les regles ci-dessous portent l'anatomie qui manquait : pourcentage dans la jauge, ligne de
   livraison chiffree, CTA porteur du montant, section paiement dans le formulaire, recapitulatif
   repliable et barre de soumission collee en mobile. */

/* ── Jauge de livraison : la reference affiche le pourcentage atteint ─────────────────────── */
.gbs-checkout-order-panel .gbs-shipping-progress__copy{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.gbs-checkout-order-panel .gbs-shipping-progress__copy p{display:flex;min-width:0;flex-direction:column;gap:2px;margin:0}
.gbs-checkout-order-panel .gbs-shipping-progress__percent{flex:0 0 auto;color:var(--green);font-size:12px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.5}
.gbs-checkout-order-panel .gbs-shipping-progress__copy span:not(.gbs-shipping-progress__percent){font-size:12px;line-height:1.4}
/* Seuil franchi : la jauge n'a plus rien a dire, elle cede la place au delai annonce. */
.gbs-checkout-order-panel .gbs-shipping-progress--unlocked{display:flex;flex-wrap:wrap;align-items:center;gap:2px 14px;padding-block:13px}
.gbs-shipping-progress__done,.gbs-shipping-progress__eta{display:inline-flex;align-items:center;gap:7px;font-size:12px}
.gbs-shipping-progress__done strong{font-size:13px;font-weight:800;letter-spacing:0;text-transform:none}
.gbs-shipping-progress__done svg{width:16px;height:16px;flex:0 0 16px}
.gbs-shipping-progress__eta{color:var(--muted)}
.gbs-shipping-progress__eta svg{width:15px;height:15px;flex:0 0 15px}
.gbs-checkout-order-panel .gbs-shipping-progress--unlocked .gbs-shipping-progress__eta{color:#586055}

/* ── Ligne « Livraison » : un intitule, un montant, plus de puce de liste ─────────────────── */
.gbs-review-order ul#shipping_method,.gbs-review-order .woocommerce-shipping-methods{margin:0;padding:0;list-style:none}
.gbs-review-order ul#shipping_method li{margin:0;padding:0;list-style:none}
.gbs-review-order .woocommerce-shipping-totals td{text-align:end}
.gbs-review-order .woocommerce-shipping-totals label{margin:0;font-weight:inherit}
.gbs-delivery-label{display:block}
.gbs-delivery-hint{display:block;margin-top:2px;color:var(--muted);font-size:11px;font-weight:400;line-height:1.3}
.gbs-delivery-amount{font-variant-numeric:tabular-nums}
.gbs-delivery-amount.is-pending,.gbs-delivery-free{color:var(--muted);font-weight:700}

/* ── Recapitulatif : densite de la reference (le staging aerait chaque ligne) ─────────────── */
.gbs-review-order tfoot .cart-subtotal th,.gbs-review-order tfoot .cart-subtotal td,
.gbs-review-order tfoot .woocommerce-shipping-totals th,.gbs-review-order tfoot .woocommerce-shipping-totals td,
.gbs-review-order tfoot .fee th,.gbs-review-order tfoot .fee td{padding:7px 0!important;border-bottom:0!important;font-size:13px;line-height:1.4;vertical-align:top}
.gbs-review-order tfoot .cart-subtotal th{padding-top:14px!important}
.gbs-review-order tfoot .order-total th,.gbs-review-order tfoot .order-total td{padding-top:14px!important;border-top:1px solid #d8d1c4!important;border-bottom:0!important}

/* ── CTA porteur du montant, dans le recapitulatif ────────────────────────────────────────── */
.gbs-review-submit{display:block;width:100%;min-height:60px;margin-top:18px;padding:14px 20px;border:0;border-radius:999px;background:var(--green);color:#fff;font-family:inherit;font-size:15px;font-weight:800;line-height:1.2;cursor:pointer}
.gbs-review-submit:hover{background:#0c3427}
.gbs-review-submit:focus-visible{outline:3px solid var(--focus);outline-offset:2px}

/* ── Reperes de confiance : visibles a TOUTES les tailles ─────────────────────────────────────
   La reference les masquait en bureau (regle @media 901px supprimee le 2026-08-16, decision
   utilisateur) : au-dessus de 900px la seule reassurance restante etait la note d'inspection de
   la colonne gauche — paiement au livreur, delai 24-48 h et verification du colis disparaissaient
   precisement la ou le recapitulatif et le CTA vivent. */
.gbs-order-trust{display:grid;gap:9px;margin-top:18px}
.gbs-order-trust span{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12px;line-height:1.4}
.gbs-order-trust svg{width:15px;height:15px;flex:0 0 15px;color:var(--green)}
.gbs-order-gift-note{display:flex;align-items:flex-start;gap:8px;margin:14px 0 0;padding:10px 11px;border-radius:10px;background:rgba(233,221,191,.42);color:#6b5a2f;font-size:12px;line-height:1.45}
.gbs-order-gift-note svg{width:15px;height:15px;flex:0 0 15px}

/* ── Paiement : desormais une section du formulaire, pas du recapitulatif ─────────────────── */
/* La carte reste PLEINE LARGEUR (mesuree 629,1 px a 1280, identique a `#place_order`). Ne pas la
   passer en `width:max-content` : essaye en aout 2026, l'utilisateur a refuse la carte rétrécie.
   Sa hauteur est calee sur celle des champs du formulaire (54 px, mesuree sur
   `#billing_first_name`), via `min-height` et non `height` — si le libelle passe a la ligne
   (viewport etroit, arabe, ou 2e passerelle au libelle plus long), la carte grandit au lieu de
   rogner. Le `padding:6px` vertical n'a AUCUN effet sur le cas nominal — 21 (libelle) + 12 + 2
   = 35 px, donc `min-height` gagne et la carte reste a 54 px — mais il garantit un coussin le
   jour ou le contenu depasse 54 px. Sans lui, une carte a deux lignes collerait le texte a sa
   bordure : `min-height` empeche le rognage, pas le collage. */
.gbs-checkout-payment-section{max-width:680px}
.gbs-checkout-payment-section .woocommerce-checkout-payment{margin-top:14px!important}
.gbs-checkout-payment-section li.wc_payment_method{display:flex;align-items:center;gap:12px;min-height:54px;padding:6px 16px;border:1px solid #cfd8cd;border-radius:14px;background:#eef3ec;list-style:none}
.gbs-checkout-payment-section li.wc_payment_method>label{flex:0 0 auto;order:2;margin:0;font-size:14px;font-weight:800}
/* ── La pastille disait « non coche » sur un radio qui l'EST ────────────────────────────────
   Avant : `border:6px solid vert` + `background:#fff` peignait un anneau EPAIS a trou blanc,
   soit la forme canonique du radio NON coche. Le vrai `input` porte pourtant `checked` — c'est
   `wc-checkout.js` qui lui pose `style="display:none"`, precisement parce que `cod_only()` fait
   de COD l'unique passerelle et qu'il n'y a donc rien a choisir. Cette pastille est alors la
   SEULE chose visible : elle doit lire « coche ».

   Deux couches plutot qu'un etat cuit en dur. Base = anneau vide ; etat coche sous `:has()`.
   Le jour ou une 2e passerelle est activee, Woo re-affiche les radios et une pastille cochee en
   dur mentirait sur la ligne non selectionnee. Et un navigateur sans `:has()` jette la seconde
   regle et garde la premiere : il retombe sur l'anneau vide — c'est-a-dire sur l'apparence
   d'AVANT ce correctif, donc sur le defaut d'origine, et non sur un etat neutre. Ce repli est
   le moins mauvais (une pastille muette plutot qu'aucune pastille), pas un repli correct ;
   il ne concerne que Firefox < 121 et de tres vieux Safari, marginaux mi-2026.
   Meme filet, meme raisonnement que `form.checkout:has(.gbs-checkout-mobile-bar) #place_order`
   plus bas. Specificites : (0,2,2) pour la base, (0,3,3) pour l'etat coche — l'ordre entre les
   deux lignes n'a donc aucune importance.

   `box-sizing:border-box` est explicite et NON redondant : `base.css` pose `*{box-sizing:
   border-box}`, et `*` ne matche que des ELEMENTS, jamais les pseudo-elements generes. Le
   `::before` restait donc en `content-box`, ou `20px + 2x6px` peint 32 px — et c'est CE
   pseudo-element, pas le texte (21 px), qui imposait les 65 px de hauteur.

   Repli `#215e4b` = valeur EFFECTIVE de `--green` mesuree sur la page rendue ; `base.css` definit
   le token deux fois et `#174f3c` est la definition perdante. Le repli suit ce qui est peint. */
.gbs-checkout-payment-section li.wc_payment_method:before{content:"";order:1;flex:0 0 20px;box-sizing:border-box;width:20px;height:20px;margin:0;border:2px solid var(--green,#215e4b);border-radius:50%;background:#fff;box-shadow:none}
.gbs-checkout-payment-section li.wc_payment_method:has(input:checked):before{background:var(--green,#215e4b);box-shadow:inset 0 0 0 3px #fff}
.gbs-checkout-payment-section .payment_box{order:3;flex:1 0 100%;margin:0!important;padding:0!important;color:var(--muted);font-size:12px;line-height:1.45}
.gbs-checkout-payment-section .payment_box p{margin:0}
.gbs-checkout-payment-section .woocommerce-terms-and-conditions-wrapper{margin-top:14px}
.gbs-inspect-note{display:flex;align-items:flex-start;gap:9px;max-width:680px;margin:14px 0 0;padding:12px 13px;border-radius:12px;background:var(--stone);color:#4b5347;font-size:12px;line-height:1.5}
.gbs-inspect-note strong{color:var(--ink);font-weight:800}
.gbs-inspect-note svg{width:16px;height:16px;flex:0 0 16px;margin-top:1px;color:var(--green)}

/* ── Notices WooCommerce : la reference n'a pas de bandeau brut pleine largeur ────────────── */
.gbs-main--checkout .woocommerce-notices-wrapper:empty{display:none}
.gbs-main--checkout .woocommerce-message,.gbs-main--checkout .woocommerce-info{display:flex;flex-wrap:wrap;align-items:center;gap:10px;width:min(1280px,calc(100% - 48px));margin:18px auto 0!important;padding:13px 17px!important;border:1px solid #cfd8cd!important;border-radius:14px;background:#eef3ec!important;color:var(--ink)!important;font-size:13px;line-height:1.45}
.gbs-main--checkout .woocommerce-message:before,.gbs-main--checkout .woocommerce-info:before{display:none!important}
.gbs-main--checkout .woocommerce-message .button{min-height:40px;padding:9px 17px;border-radius:999px;background:var(--green);color:#fff;font-size:12px;font-weight:800}

/* ── Recapitulatif repliable : deplie et sans <summary> en bureau ─────────────────────────── */
.gbs-order-details__summary{display:none}
/* Pas de `display` force ici : sous 900 px c'est le navigateur qui doit masquer le corps d'un
   <details> ferme. Le forcer a `block` laissait le recapitulatif deplie en mobile, donc le
   formulaire repousse sous un long pave — l'inverse de ce que la reference fait. */
@media(min-width:901px){
    /* Un <details> ferme masque son contenu via le slot du navigateur : on le force a l'afficher,
       et on retire le marqueur, pour que le meme balisage serve de panneau fixe en bureau. */
    .gbs-order-details::details-content{content-visibility:visible;block-size:auto;overflow:visible}
    .gbs-order-details:not([open])>.gbs-order-details__body{display:block}

    /* NE PAS masquer `#place_order` en bureau — verifie dans le template, contre l'intuition.
       Deux pastilles « Commander » identiques sur le meme ecran ressemblent a un defaut, mais la
       reference fait exactement ca au-dessus de 900 px : elle EMET les deux boutons (lignes 14563
       `button.checkout-submit` en fin de formulaire, et 14571 `button.checkout-summary-submit`
       dans le recapitulatif) et ne les masque QUE dans des media queries etroites —
       `.checkout-form-card .checkout-submit{display:none}` vit sous `@media(max-width:640px)`, et
       `body.is-checkout .checkout-form-card .checkout-submit{display:none}` sous
       `@media(max-width:900px)`. Aucune regle ne les masque au-dela. Verification faite par
       appariement d'accolades sur le fichier, pas a l'oeil : lire ces deux regles hors de leur
       media query fait conclure l'inverse. Le masquage mobile de notre cote (ligne ~265,
       `form.checkout:has(.gbs-checkout-mobile-bar) #place_order`) est donc deja la parite exacte. */
}

/* ── Barre de soumission collee : mobile uniquement ───────────────────────────────────────── */
.gbs-checkout-mobile-bar{display:none}

@media(max-width:900px){
    /* La reference place le recapitulatif AVANT le formulaire, replie. `display:contents` sort les
       enfants de l'aside pour que la grille puisse les ordonner independamment : recapitulatif,
       puis formulaire, puis recommandations. */
    .gbs-checkout-sidebar{display:contents}
    .gbs-checkout-order-panel{grid-row:1;margin:10px 12px 0;padding:0;border-radius:16px;background:#f3efe7}
    .gbs-checkout-form-pane{grid-row:2;padding-bottom:104px}
    .gbs-checkout-recommendations{grid-row:3;margin:12px;border-radius:18px}

    .gbs-order-details__summary{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:15px 17px;font-size:14px;font-weight:700;cursor:pointer;list-style:none}
    .gbs-order-details__summary::-webkit-details-marker{display:none}
    .gbs-order-details__summary strong{font-size:16px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
    .gbs-order-details[open] .gbs-order-details__summary{border-bottom:1px solid #ded7ca}
    .gbs-order-details__body{padding:16px 17px 19px}
    .gbs-order-details__body h2{margin-top:0}

    /* Le bouton natif reprend sa place dans le flux : c'est la barre collee qui soumet. */
    .woocommerce #payment #place_order{position:static;width:100%;left:auto;right:auto;bottom:auto;box-shadow:none}
    .gbs-review-submit{display:none}

    .gbs-checkout-mobile-bar{position:fixed;z-index:170;right:0;bottom:0;left:0;display:flex;align-items:center;gap:12px;padding:9px 12px calc(9px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:rgba(251,248,242,.98);box-shadow:0 -12px 34px rgba(23,23,19,.12)}
    /* Le total est le CONTRAT a la remise du colis (paiement a la livraison) : il ne peut pas
       etre la plus petite chose de la barre.
       ⚠️ Le combinateur du libelle est DIRECT (`>span`), et ce n'est pas cosmetique : `wc_price()`
       rend le montant dans un `<span class="woocommerce-Price-amount">` A L'INTERIEUR du <strong>.
       En descendant (`>div span`), la regle du libelle atteignait donc AUSSI ce span et peignait
       le total a 11 px — la taille declaree sur le <strong> ne se voyait nulle part, puisque tout
       le texte du montant vit dans l'enfant. Mesure du 2026-08-17 a 375 px : <strong> a 17 px,
       montant reellement peint a 11 px, colonne bridee a 74 px par un `min-width` qui masquait
       l'anomalie. Le `min-width` fixe cede la place a une largeur de CONTENU (`flex:0 0 auto` +
       `nowrap`), sinon un total a cinq chiffres se ferait rogner par le bouton en `flex:1`.
       20 px, pas davantage — les numerales geantes sont un rejet utilisateur explicite. */
    .gbs-checkout-mobile-bar>div{display:flex;flex:0 0 auto;min-width:0;flex-direction:column;gap:1px;line-height:1.15}
    .gbs-checkout-mobile-bar>div>span{color:var(--muted);font-size:12px}
    .gbs-checkout-mobile-bar>div strong{font-size:20px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.03em;white-space:nowrap}
    .gbs-checkout-mobile-bar>div strong .woocommerce-Price-amount{font-size:inherit;font-weight:inherit}
    .gbs-checkout-mobile-bar button{flex:1 1 auto;min-width:150px;min-height:52px;padding:12px 16px;border:0;border-radius:999px;background:var(--green);color:#fff;font-family:inherit;font-size:15px;font-weight:800;cursor:pointer}
    .gbs-main--checkout .woocommerce-message,.gbs-main--checkout .woocommerce-info{width:calc(100% - 24px);margin-top:12px!important}
}

/* ── Reprises apres comparaison capture a capture avec la reference ───────────────────────── */

/* Le libelle et le montant du total se cassaient sur deux lignes chacun : la reference les tient
   sur une seule, montant a droite. */
.gbs-review-order .gbs-review-total th{padding-inline-end:14px!important;font-size:14px;line-height:1.3}
.gbs-review-order .gbs-review-total td{white-space:nowrap;font-size:25px;line-height:1.1}
.gbs-review-order .gbs-review-total th,.gbs-review-order .gbs-review-total td{vertical-align:baseline}

/* Densite : la reference serre ses lignes, le staging aerait chaque rangee de 13 px + un filet. */
.gbs-review-order .gbs-review-line td{padding:11px 0!important}
.gbs-review-order .gbs-review-line:first-child td{padding-top:4px!important}
.woocommerce-checkout-review-order-table .gbs-checkout-shipping-goal td{padding:13px 0!important;border-bottom:0!important}
.gbs-checkout-order-panel{padding:24px}
.gbs-checkout-order-panel h2{margin:4px 0 16px;font-size:26px}

/* Le bloc de paiement ne passait pas a la ligne : la description restait collee au libelle et se
   faisait couper par le bord de la carte. */
.gbs-checkout-payment-section li.wc_payment_method{flex-wrap:wrap}
.gbs-checkout-payment-section li.wc_payment_method>label{flex:1 1 auto}

/* La notice WooCommerce porte `tabindex="-1"` et recoit le focus au chargement : le navigateur
   dessinait un contour bleu vif en haut de la page. */
.gbs-main--checkout .woocommerce-message:focus,.gbs-main--checkout .woocommerce-info:focus{outline:none}

@media(max-width:900px){
    /* La barre repliee doit rester une barre : le panneau conservait son padding de 20 px, qui
       s'ajoutait a celui du <summary> et doublait sa hauteur. */
    .gbs-checkout-order-panel{padding:0!important;border:1px solid #ded7ca}
    .gbs-order-details__summary{min-height:0;padding:13px 16px}
    /* La notice d'ajout au panier passait son bouton a la ligne et mangeait un tiers de l'ecran. */
    .gbs-main--checkout .woocommerce-message{align-items:center;padding:11px 13px!important;font-size:12px}
    .gbs-main--checkout .woocommerce-message .button{min-height:36px;padding:7px 14px;font-size:11px}
}

/* ══ Confirmation (woocommerce/checkout/thankyou.php) ══════════════════════════════════════
   Mesures reprises du template : carte 720 px centree, padding 48, pastille de succes 78 px,
   bandeau recapitulatif en trois colonnes borde haut et bas. */
.woocommerce-order-received .gbs-main{background:var(--stone)}
/* `max-width:640px` et `margin:60px auto` viennent de base.css (hors de ce chantier) : combines a
   notre gouttiere de 80 px, ils reduisaient la carte a 480 px au lieu des 720 px du template, ce
   qui cassait le titre sur trois lignes. On neutralise ici, la carte portant deja sa propre
   largeur (`width:min(720px,100%)`). */
.gbs-confirmation{max-width:none;margin:0;padding:clamp(28px,5vw,64px) max(16px,calc((100% - 1280px)/2))}
.gbs-confirmation__card{width:min(720px,100%);margin:0 auto;padding:48px;border:1px solid var(--line);border-radius:34px;background:#fff;box-shadow:0 18px 44px rgba(23,23,19,.07);text-align:center}
.gbs-confirmation__icon{display:grid;width:78px;height:78px;margin:0 auto 22px;place-items:center;border-radius:50%;background:var(--green);color:#fff}
.gbs-confirmation__icon svg{width:34px;height:34px}
.gbs-confirmation__card .gbs-eyebrow{margin-bottom:8px}
.gbs-confirmation__title{margin:0 0 10px;font-size:clamp(29px,3.4vw,42px);font-weight:800;letter-spacing:-.04em;line-height:1.05}
.gbs-confirmation__lead{max-width:520px;margin:0 auto;color:var(--muted);font-size:15px;line-height:1.5}

.gbs-confirmation__recap{display:flex;align-items:center;justify-content:center;gap:18px;margin:25px auto;padding:18px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.gbs-confirmation__recap>div{flex:1;min-width:0}
.gbs-confirmation__recap span{color:var(--muted);font-size:12px}
.gbs-confirmation__recap strong{display:block;margin-top:4px;color:var(--ink);font-size:18px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em}

.gbs-confirmation__order,.gbs-confirmation__next{margin:14px 0 0;padding:16px 18px;border:1px solid rgba(20,61,47,.12);border-radius:16px;text-align:start}
.gbs-confirmation__order{margin-top:18px}
.gbs-confirmation__order ul,.gbs-confirmation__next ol{margin:9px 0 0;padding:0 0 0 1px;list-style:none}
.gbs-confirmation__order li{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:5px 0;font-size:14px;line-height:1.35}
.gbs-confirmation__order li small{flex:0 0 auto;color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}
.gbs-confirmation__shipping{margin:12px 0 0;color:var(--muted);font-size:13px}
.gbs-confirmation__next ol{counter-reset:gbsstep;list-style:none}
.gbs-confirmation__next li{position:relative;padding:5px 0 5px 26px;font-size:14px;line-height:1.4;counter-increment:gbsstep}
.gbs-confirmation__next li:before{content:counter(gbsstep);position:absolute;inset-inline-start:0;top:5px;display:grid;width:18px;height:18px;place-items:center;border-radius:50%;background:var(--green);color:#fff;font-size:11px;font-weight:800}

.gbs-confirmation__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin-top:22px}
.gbs-confirmation__actions .gbs-button svg{width:18px;height:18px}

@media(max-width:600px){
    .gbs-confirmation__card{padding:30px 20px;border-radius:26px}
    .gbs-confirmation__recap{display:grid;grid-template-columns:1fr;gap:12px;text-align:start}
    .gbs-confirmation__actions .gbs-button{width:100%}
}

/* Titre de confirmation aligne sur la reference : `.confirmation-card h1` y vaut
   clamp(34px,5vw,52px). Un premier reglage l'avait plafonne a 37 px avec un max-width de 14ch pour
   eviter trois lignes — mais notre libelle est simplement plus long que celui du prototype
   (« Simulation confirmée. »), et le rapetisser cassait la typographie au lieu de la respecter.
   On garde donc la taille du template et on laisse le titre occuper deux lignes. */
.gbs-confirmation__title{max-width:none;margin-inline:auto;font-size:clamp(30px,3.6vw,52px);letter-spacing:-.05em;line-height:1.02}

/* ══ Passe de mesure mobile — ce qui a ete constate, et ce qui ne l'a pas ete ═══════════════
   Mesure a 375 px, FR et AR, dans huit etats (recapitulatif replie, deplie, page defilee en bas,
   champs satures, panier a trois unites) :
     · `documentElement.scrollWidth == clientWidth == 375` dans les huit — le checkout ne deborde
       pas horizontalement. Les seuls elements qui sortent de la boite du document (192 px) sont
       les cartes de `.gbs-recommendations`, dont l'ancetre porte `overflow-x:auto` et un
       `scroll-snap` : c'est le carrousel voulu (scrollWidth 536 pour un clientWidth de 313), pas
       une fuite de mise en page. Une sonde qui compte les bords droits sans regarder le premier
       ancetre defilant compte ce carrousel comme un debordement.
     · la barre de soumission collee EST peinte : `position:fixed`, rect top 741 -> bottom 812 sur
       un viewport de 812, 375 px de large, et un `elementFromPoint` en son centre renvoie son
       propre bouton. Sa chaine d'ancetres est form.checkout -> ... -> html : aucun <details>.
   Rien n'est donc corrige de ces deux cotes-la. Les trois reglages ci-dessous portent sur des
   defauts effectivement mesures pendant cette passe. */

/* ── Trou de 62 px avant le champ « Ville » (mobile ET bureau) ─────────────────────────────
   Le plugin `woo-city-shipping-dropdown-one` masque `#billing_country_field` puis injecte, dans
   un <style> en ligne, `p#billing_city_field{margin-top:45px!important}` pour reboucher le vide
   que ce masquage laissait dans la mise en page WooCommerce d'origine. Notre grille gere deja son
   interligne (`gap:17px`), si bien que ces 45 px s'AJOUTENT : la piste mesurait 113,5 px pour un
   champ de 69 px, soit 62 px de blanc entre « Pays de livraison » et « Ville », aux deux largeurs.
   Le selecteur du plugin vaut (1,0,1) et son <style> passe apres notre feuille : on ne peut pas le
   battre a l'ordre, seulement a la specificite. */
.woocommerce-billing-fields__field-wrapper p#billing_city_field{margin-top:0!important}

@media(max-width:900px){
    /* ── La barre collee laissait lire le texte qu'elle recouvre ───────────────────────────
       `rgba(251,248,242,.98)` n'est accompagne d'aucun `backdrop-filter` : ces 2 % de transparence
       n'achetent aucun flou, ils laissent seulement passer ce qui defile dessous. Releve sur les
       pixels de la capture : le fond propre vaut (251,248,242), et les lettres du titre
       « Livraison » qui passent derriere le tirent a (246,243,237) — un fantome parfaitement
       lisible. Meme teinte, sans le canal alpha. */
    .gbs-checkout-mobile-bar{background:#fbf8f2}

    /* ── Un seul appel a l'action ──────────────────────────────────────────────────────────
       La reference masque le bouton du formulaire des lors que la barre collee existe
       (`.checkout-form-card .checkout-submit{display:none}`) ; ici les deux coexistaient, soit
       deux pastilles vertes « Commander » identiques sur le meme ecran. Le bouton de la barre est
       un vrai `type="submit"` rattache au formulaire — verifie dans le DOM : `button.form` est
       bien `form#gbs-checkout-form` — il soumet donc seul.
       Le `:has()` n'est pas cosmetique : si la barre n'est pas rendue, la regle entiere est sans
       effet et le bouton natif reste le seul chemin de soumission. Un navigateur qui ignore
       `:has()` jette le selecteur et retombe sur ce meme filet. Jamais de checkout muet. */
    form.checkout:has(.gbs-checkout-mobile-bar) #place_order{display:none}
}

/* ═══ Conditions generales — plancher tactile de la case bloquante ════════════════════════════
   ✅ CE FICHIER EST DEPLOYABLE DEPUIS `main` (verifie le 2026-08-16). L'avertissement qui vivait
   ici disait le contraire ; sa premisse est tombee. Mesure : le `checkout.css` SERVI et
   `origin/main` ont le MEME md5 (`f633ba225da08b96e80227608bd287e6`, 345 lignes, 35 384 octets),
   et `main` porte desormais `.gbs-checkout-mobile-bar` (declaration 146, definition 168-172,
   masquage de `#place_order` 300). Le deploiement complet du 2026-08-16 00:24:07 a remis la
   lignee `main` en ligne : il n'y a plus de surensemble a preserver, donc plus rien a perdre.
   Le deploiement reste un `scp` de FICHIER ENTIER — la regle a retenir n'est pas « ne jamais
   deployer depuis main », c'est « mesurer le md5 servi AVANT d'envoyer » (`gbs-deploy.mjs --check`).

   Mesure (emulation d'appareil reelle, 390 px, panier de 15 articles) : `input#terms` fait
   13x13 px, et son <label> — la cible REELLE, puisqu'il enveloppe la case (markup WooCommerce
   core `checkout/terms.php`, aucun override dans le theme) — est `display:inline` et ne fait que
   339x17 px. C'est le controle qui bloque la commande : en dessous des 24x24 exiges par
   WCAG 2.2 AA 2.5.8, et de loin le pire ratio importance/taille du tunnel.

   On ne touche PAS au carreau : son 13x13 est un rendu natif, le grossir changerait l'aspect du
   tunnel — surface sur laquelle une autre lignee travaille. Seul le label passe en flex avec un
   plancher de 44 px. Mesure apres injection sur le tunnel servi : 339x17 -> 362x44, case
   inchangee a 13x13, bouton de commande non deplace.

   PAS DE `gap` ICI, ET C'EST DELIBERE. Le label contient TROIS items flex : la case, le texte, et
   `<abbr class="required">*</abbr>`. Un `gap:10px` s'applique donc AUSSI devant l'asterisque : il
   le decollait de 20 px (ecart texte->asterisque 3 -> 23 px) et les 20 px voles au texte le
   faisaient passer sur DEUX lignes a 390 px (span 307x17 -> 303x39). La marge va sur la seule
   case, en logique pour rester juste en RTL. Mesure de la variante retenue : span 307x20, une
   ligne, ecart 3 px, label toujours 362x44.

   LIGNEE (mise a jour 2026-08-16) : cette regle EST en ligne — le servi est `main`, md5 identique.
   L'ancienne note decrivait un servi de 763 lignes issu de `fix/gbs-checkout-sticky-parity` ; ce
   n'est plus l'etat du serveur depuis le deploiement complet de 00:24:07.
   Il reste UNE lignee divergente, mais elle n'est pas servie : `fix/gbs-checkout-icons` (1078
   lignes, poussee, SANS PR). Elle porte a sa ligne 1076 un
   `li.wc_payment_method:only-child{width:max-content}` qui ferait tomber la carte de paiement de
   680 a ~224 px. Si cette branche est un jour rebasee ou cherry-pickee sur `main`, ABANDONNER ce
   commit (`e7e9263f`) : la carte pleine largeur est un choix explicite de l'utilisateur.

   Borne a 900 px, le palier mobile du theme. */
@media (max-width: 900px) {
  .woocommerce-terms-and-conditions-wrapper .woocommerce-form__label-for-checkbox {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
  .woocommerce-terms-and-conditions-wrapper .woocommerce-form__label-for-checkbox > input {
    margin-inline-end: 10px;
  }
}

/* ── Recommandations du tunnel : ligne compacte sous 900 px ───────────────────────────────────
   Mesure du 2026-08-17 sur le staging a 375 px : le bloc « Deux ajouts utiles » occupait
   552 px de haut pour DEUX produits — la carte seule faisait 403 px, dont 241 px de visuel —
   et le carrousel n'en montrait qu'une et demie, la seconde coupee au bord.

   Cause : `render_cards()` pose `is-compact`, et cette variante de `base.css` est la carte
   VERTICALE (`display:flex;flex-direction:column`, media `width:100%;aspect-ratio:1/1`). Les
   overrides compacts de ce fichier ne redeclaraient PAS `display` : a specificite egale ils
   ne pouvaient donc pas defaire la colonne, et `grid-template-columns:68px …` restait calcule
   mais inerte sur un conteneur flex. Ici on redeclare `display` ET on gagne en specificite
   (`.gbs-checkout-recommendations .gbs-reco-card.is-compact`, 0-3-0 contre 0-2-0).

   Forme retenue : la ligne de commerce classique — vignette 60 px, titre sur 2 lignes, prix
   dessous, bouton « + » a 44 px (plancher tactile) sur la droite. Mesure apres : ~86 px par
   carte. `auto-fit` rend deux lignes cote a cote des que la place existe (tablette), une seule
   colonne au telephone ; plus de defilement horizontal, donc plus de carte coupee.

   `grid-template-rows` est EXPLICITE parce que la vignette et le bouton s'etendent en `1/-1` :
   sur une grille sans rangees explicites, `-1` designe la fin de la grille EXPLICITE, soit la
   rangee 1 — l'extension serait silencieusement sans effet. Le badge « Debloque la livraison
   offerte » (absent au-dessus du seuil, donc invisible sur la capture d'origine) est place en
   rangee 3 : il ne parait que sous 800 DH et n'ecrase alors aucune des deux rangees. */
@media (max-width: 900px) {
  .gbs-checkout-recommendations .gbs-recommendations {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
    gap: 10px;
    overflow: visible;
    scroll-snap-type: none;
  }
  .gbs-checkout-recommendations .gbs-reco-card.is-compact {
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr) 44px;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 2px 12px;
    min-height: 0;
    padding: 10px;
  }
  .gbs-checkout-recommendations .gbs-reco-card.is-compact .gbs-reco-card__link,
  .gbs-checkout-recommendations .gbs-reco-card.is-compact .gbs-reco-card__foot {
    display: contents;
  }
  .gbs-checkout-recommendations .gbs-reco-card.is-compact .gbs-reco-card__media {
    grid-column: 1;
    grid-row: 1 / -1;
    width: 60px;
    height: 60px;
    aspect-ratio: auto;
    border-radius: 12px;
  }
  /* La pastille d'objectif est en `position:absolute` dans la vignette : lisible sur 241 px,
     elle deborderait sur 60 px. L'objectif reste porte par la fiche produit. */
  .gbs-checkout-recommendations .gbs-reco-card.is-compact .gbs-reco-card__tag {
    display: none;
  }
  .gbs-checkout-recommendations .gbs-reco-card.is-compact strong {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    height: auto;
    -webkit-line-clamp: 2;
  }
  .gbs-checkout-recommendations .gbs-reco-card.is-compact .gbs-reco-card__price {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    font-size: 15px;
  }
  .gbs-checkout-recommendations .gbs-reco-card.is-compact .gbs-reco-card__add {
    grid-column: 3;
    grid-row: 1 / -1;
    width: 44px;
    min-height: 44px;
    padding: 0;
  }
  .gbs-checkout-recommendations .gbs-reco-card.is-compact .gbs-reco-card__unlock {
    grid-column: 2 / -1;
    grid-row: 3;
  }
}