/* L’Abritant — feuille tunnel : panier, tunnel, confirmation, aperçu du panier (#cart #checkout #order-confirmation).
   Chargée sur toutes les pages : chaque règle est limitée à l’identifiant de page porté par <body> (Hummingbird : body id = page_name).
   Uniquement des jetons var(--…), aucun !important, même couche @layer que l’original quand on redéclare Hummingbird. */

/* Design system V2 : cartes G1_Panier, G2_Tunnel, G3_Confirmation (bureau) et M3_TelephoneAchat (téléphone).

   Deux sortes de règles, comme pages/produit.css :
   1. Classes des cartes (g1-*, g2-*, g3-*, « classes locales à verser au kit ») et composants du kit (pg-*, ab-*) :
      hors couche, comme maquettes.css.
   2. Adaptation de Hummingbird : dans la couche de la règle d’origine (ps-components pour les composants
      cart-summary, product-line, checkout-steps, delivery-option, address-card ; ps-pages pour les grilles ;
      ps-modules pour la fenêtre du panier), préfixée par l’identifiant de page.
   Ne jamais poser de « display » sur un élément que Bootstrap masque par classe (.collapse, .tab-pane, .d-none).

   Sommaire : §1 panier · §2 tunnel : en-tête et étapes · §3 tunnel : étapes 1 à 4 · §4 tunnel : récapitulatif ·
   §5 confirmation · §6 fenêtre « Ajouté au panier » · §7 paliers (1 200 / 992 / 768 / 480 / 380 px). */


/* §1 Panier (G1) : lignes à gauche, récapitulatif collant de 400 px à droite. */
#cart .g1-page { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: var(--espace-12); align-items: start; padding-block: var(--espace-6) var(--espace-16); }
#cart .g1-page--vide { grid-template-columns: minmax(0, 1fr); }
#cart .g1-contenu, #cart .g1-aside { min-width: 0; }
#cart .g1-tete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--espace-2) var(--espace-4); padding-bottom: var(--espace-4); border-bottom: var(--trait-moyen) solid var(--graphite); }
#cart .g1-tete__titre { margin: 0; font-size: clamp(32px, 3.4vw, 48px); line-height: 1.1; color: var(--texte); }
#cart .g1-continuer, #cart .g1-vide__lien { display: inline-flex; align-items: center; gap: var(--espace-2); min-height: var(--cible-min); }
#cart .g1-nb { margin: var(--espace-4) 0 0; font-size: 14px; line-height: 20px; color: var(--texte-doux); }
#cart .g1-vide { margin-top: var(--espace-6); }
#cart .g1-vide svg { color: var(--texte-doux); }
#cart .g1-vide .corps { max-width: 56ch; margin: 0; }

/* Ligne : vignette 120 px, informations, quantité, prix (pg-ligne-panier du kit) */
#cart .g1-ligne .product-line__image a { display: block; }
#cart .g1-ligne .product-line__image picture { display: block; }
#cart .g1-sansphoto { display: flex; align-items: center; justify-content: center; color: var(--texte-doux); }
#cart .g1-ligne__infos { display: grid; gap: var(--espace-2); align-content: start; min-width: 0; }
#cart .g1-ligne__nom { margin: 0; }
#cart .g1-ligne__nom a { color: inherit; text-decoration: underline; text-decoration-thickness: var(--trait-fin); text-underline-offset: 4px; }
#cart .g1-ligne__nom a:focus-visible, #cart .g1-action:focus-visible, #cart .g1-aide a:focus-visible { outline: var(--trait-hauban) solid var(--focus); outline-offset: 2px; }
#cart .g1-besoin { margin: 0; font-size: 15px; line-height: 22px; }
#cart .g1-besoin b { font-weight: 600; }
#cart .g1-ref { margin: 0; font-family: var(--font-technique); font-size: 12px; line-height: 16px; color: var(--texte-doux); }
#cart .g1-ligne .pg-stock, #cart .g1-ligne .pg-eco, #cart .g1-livraison { margin: 0; }
#cart .g1-action { display: inline-flex; align-items: center; gap: var(--espace-2); min-height: var(--cible-min); color: inherit; text-decoration: underline; text-decoration-thickness: var(--trait-fin); text-underline-offset: 3px; }
#cart .g1-action:hover { text-decoration-thickness: var(--trait-moyen); }
#cart .pg-ligne-panier__actions { margin-top: 0; }
#cart .g1-prixligne { display: grid; justify-items: end; gap: 2px; min-width: 112px; text-align: right; }
#cart .g1-prixligne .pg-prix-ref s { font-family: var(--font-technique); }

/* Quantité + / − : boutons de 44 px dans un cadre de 48 px (g1-qte) */
@layer ps-components {
  #cart .g1-qte.product-line__quantity-button { max-width: none; }
  #cart .g1-qte .input-group { flex-wrap: nowrap; align-items: center; width: auto; height: var(--controle); background: var(--blanc); border: var(--trait-moyen) solid var(--trait-fort); border-radius: var(--rayon-s); }
  #cart .g1-qte .input-group > .btn { display: inline-flex; align-items: center; justify-content: center; width: var(--cible-min); min-width: var(--cible-min); height: var(--cible-min); padding: 0; color: var(--graphite); background: transparent; border: 0; border-radius: var(--rayon-s); }
  #cart .g1-qte .input-group > .btn:hover { background: var(--jaune-pale); opacity: 1; }
  #cart .g1-qte .input-group > .btn:focus-visible { outline: var(--trait-hauban) solid var(--focus); outline-offset: -2px; box-shadow: none; }
  #cart .g1-qte .input-group > input { flex: none; width: 40px; max-width: 40px; height: var(--cible-min); padding: 0; text-align: center; font-family: var(--font-technique); font-weight: 500; color: var(--texte); background: transparent; border: 0; box-shadow: none; }
  #cart .g1-qte .input-group > input:focus-visible { outline: var(--trait-hauban) solid var(--focus); outline-offset: -2px; }
}

/* Récapitulatif collant (pg-recap du kit) */
#cart .g1-recap { top: calc(var(--scroll-padding-top, 0px) + var(--espace-4)); }
#cart .g1-recap > h2 { margin: 0; }
#cart .g1-totaux { display: grid; gap: var(--espace-3); }
#cart .g1-a-calculer { font-family: var(--font-texte); font-weight: 600; }
#cart .g1-mini { display: flex; align-items: flex-start; gap: var(--espace-2); margin: 0; font-size: 13px; line-height: 18px; color: var(--texte-doux); }
#cart .g1-mini svg { margin-top: 1px; }
#cart .g1-total-ht, #checkout .g1-total-ht { margin: calc(-1 * var(--espace-2)) 0 0; }
#cart .g1-actions { display: grid; gap: var(--espace-3); }
#cart .g1-actions .ab-bouton { width: 100%; }
#cart .g1-actions__total { display: none; }
#cart .g1-aide { margin: 0; }
#cart .g1-aide a { margin-left: auto; color: inherit; font-weight: 600; white-space: nowrap; text-decoration: none; }
#cart .g1-aide a:focus-visible { outline-color: var(--jaune-hauban); }

@layer ps-components {
  #cart .cart-summary__subtotals, #cart .cart-summary__total, #checkout .cart-summary__subtotals, #checkout .cart-summary__total { margin-block-end: 0; }
  #cart .cart-summary__total, #checkout .cart-summary__total { padding-block: 0; border-block: 0; }
  #cart .cart-summary__line, #checkout .cart-summary__line { padding: var(--espace-1) 0; }
  #cart .cart-summary__line.pg-recap__total, #checkout .cart-summary__line.pg-recap__total { padding-top: var(--espace-3); }
  #cart .cart-summary__value, #checkout .cart-summary__value { font-weight: 500; }
  #cart .cart-summary__actions { padding-block-start: 0; }
  #cart .cart-voucher__accordion, #checkout .cart-voucher__accordion { margin-block-end: 0; padding-block-end: 0; border-block-end: var(--trait-fin) solid var(--trait); }
  #cart .cart-voucher__accordion-button, #checkout .cart-voucher__accordion-button { min-height: var(--cible-min); padding: 0; font-weight: 600; color: var(--texte); background: transparent; box-shadow: none; text-decoration: underline; text-underline-offset: 3px; }
  #cart .cart-voucher__accordion-button:focus-visible, #checkout .cart-voucher__accordion-button:focus-visible { outline: var(--trait-hauban) solid var(--focus); outline-offset: 2px; box-shadow: none; }
  #cart .cart-voucher__form, #checkout .cart-voucher__form { gap: var(--espace-2); }
  #cart .cart-voucher__error, #checkout .cart-voucher__error { background: var(--erreur-pale); color: var(--erreur); border: 0; border-radius: var(--rayon-m); }
}

@layer ps-pages {
  #cart .cart-grid__content, #cart .cart-grid__aside { margin-block-end: 0; }
  #cart .cart-grid__aside-wrapper { z-index: auto; }
}


/* §2 Tunnel (G2) : en-tête réduit et étapes. */
#checkout .g2-entete { background: var(--fond); border-bottom: var(--trait-moyen) solid var(--graphite); }
#checkout .g2-entete__barre { display: flex; align-items: center; gap: var(--espace-4) var(--espace-8); min-height: 80px; }
#checkout .g2-entete__logo { display: flex; align-items: center; min-height: var(--cible-min); }
#checkout .g2-entete__logo img { display: block; max-height: var(--logo-icone); width: auto; }
#checkout .g2-entete__logo a { display: inline-flex; align-items: center; min-height: var(--cible-min); color: var(--texte); }
#checkout .g2-entete__secu { display: inline-flex; align-items: center; gap: var(--espace-2); margin: 0; padding: var(--espace-1) var(--espace-3); font-size: 14px; line-height: 20px; font-weight: 600; border: var(--trait-fin) solid var(--trait-fort); border-radius: var(--rayon-s); }
#checkout .g2-entete__tel { display: inline-flex; align-items: center; gap: var(--espace-2); margin: 0 0 0 auto; font-size: 14px; line-height: 20px; }
#checkout .g2-entete__tel-lien { display: inline-flex; align-items: center; gap: var(--espace-2); min-height: var(--cible-min); color: inherit; font-weight: 500; text-decoration: none; }
#checkout .g2-entete__retour { min-height: var(--cible-min); }
#checkout .g2-entete a:focus-visible { outline: var(--trait-hauban) solid var(--focus); outline-offset: 2px; }

@layer ps-base {
  #checkout .g2-entete .navbar-brand { max-height: none; max-width: none; padding: 0; margin: 0; }
  #checkout .g2-entete .navbar-brand .logo { max-height: var(--logo-icone); max-width: 16rem; }
}

/* Étapes : faite = coche sapin, courante = jaune pâle et trait graphite (pg-etapes du kit) */
@layer ps-components {
  #checkout .checkout-steps { margin-block-end: var(--espace-8); padding-block: 0; background: transparent; border-block-end: var(--trait-moyen) solid var(--graphite); }
  #checkout .checkout-steps__desktop { max-width: var(--conteneur); padding-inline: var(--marge); box-sizing: content-box; }
  #checkout .checkout-steps__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; margin: 0; padding: 0; }
  #checkout .checkout-steps__step { display: flex; align-items: center; gap: var(--espace-3); padding: var(--espace-4) var(--espace-3); text-align: left; color: var(--texte-doux); }
  #checkout .checkout-steps__step::before, #checkout .checkout-steps__step::after { display: none; }
  #checkout .checkout-steps__number { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 32px; height: 32px; margin: 0; font-family: var(--font-technique); font-size: 14px; font-weight: 600; color: var(--texte-doux); background: var(--blanc); border: var(--trait-moyen) solid var(--trait-fort); border-radius: 50%; }
  #checkout .checkout-steps__btn { min-height: var(--cible-min); padding: 0; font-size: 15px; line-height: 20px; font-weight: 600; text-align: left; color: inherit; text-decoration: none; }
  #checkout .checkout-steps__btn:focus-visible { outline: var(--trait-hauban) solid var(--focus); outline-offset: 2px; box-shadow: none; }
  #checkout .checkout-steps__step--current { color: var(--texte); background: var(--jaune-pale); box-shadow: inset 0 -3px 0 var(--graphite); }
  #checkout .checkout-steps__step--current .checkout-steps__number { color: var(--toile); background: var(--graphite); border-color: var(--graphite); }
  #checkout .checkout-steps__step--current .checkout-steps__btn { color: var(--texte); }
  #checkout .checkout-steps__step--success { color: var(--texte); }
  #checkout .checkout-steps__step--success .checkout-steps__number { font-size: 0; color: var(--toile); background: var(--sapin); border-color: var(--sapin); }
  #checkout .checkout-steps__step--success .checkout-steps__number::before { content: "✓"; font-size: 14px; }
  #checkout .checkout-steps__step--success .checkout-steps__btn { color: var(--texte); }

  /* Téléphone : « Étape 2 sur 4 », étape suivante, anneau de progression en sapin */
  #checkout .checkout-steps__mobile { gap: var(--espace-3); padding-block: var(--espace-3); }
  #checkout .checkout-steps__step-mobile { flex: 1; gap: var(--espace-1); }
  #checkout .checkout-steps__title { font-family: var(--font-titre); font-size: 19px; line-height: 24px; font-weight: 700; }
  #checkout .checkout-steps__subtitle { font-size: 13px; line-height: 18px; color: var(--texte-doux); }
  #checkout .progress-ring__circle { stroke: var(--sapin); }
  #checkout .progress-ring__background-circle { stroke: var(--trait); }
  #checkout .progress-ring__text { fill: var(--texte); font-family: var(--font-technique); }
}
#checkout .g2-pas__haut { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--espace-1) var(--espace-3); }
#checkout .g2-pas__num { font-size: 13px; line-height: 18px; font-weight: 600; }


/* §3 Tunnel : contenu des étapes (une carte blanche par étape, seule la courante est ouverte). */
#checkout .step { padding: var(--espace-4) var(--espace-8) var(--espace-6); background: var(--blanc); border: var(--trait-fin) solid var(--trait); border-radius: var(--rayon-m); }
#checkout .step__title .page-title-section { margin: 0; font-family: var(--font-titre); font-size: 24px; line-height: 30px; font-weight: 700; color: var(--texte); }
#checkout .step__title hr { margin: var(--espace-3) 0 var(--espace-4); border: 0; border-top: var(--trait-fin) solid var(--trait); opacity: 1; }
#checkout .g2-note { display: flex; align-items: flex-start; gap: var(--espace-2); margin: var(--espace-3) 0 0; font-size: 13px; line-height: 18px; color: var(--texte-doux); }
#checkout .g2-note svg { margin-top: 1px; }
#checkout .g2-fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
#checkout .g2-legende { float: none; width: auto; margin: 0 0 var(--espace-3); padding: 0; }

/* Étape 1 : « Commander sans compte » / « Déjà client ? » en onglets */
@layer ps-components {
  #checkout .g2-onglets { gap: var(--espace-2); margin-block-end: var(--espace-6); border-bottom: var(--trait-fin) solid var(--trait); }
  #checkout .g2-onglets .nav-link { display: inline-flex; align-items: center; min-height: var(--cible-min); padding: 0 var(--espace-3); font-weight: 600; color: var(--texte-doux); border-bottom: var(--trait-hauban) solid transparent; }
  #checkout .g2-onglets .nav-link.active { color: var(--texte); background: var(--jaune-pale); border-bottom-color: var(--graphite); }
  #checkout .g2-onglets .nav-link:focus-visible { outline: var(--trait-hauban) solid var(--focus); outline-offset: 2px; box-shadow: none; }
}

/* Étape 2 : cartes d’adresse */
@layer ps-components {
  #checkout .address-card { background: var(--blanc); border: var(--trait-moyen) solid var(--trait-fort); border-radius: var(--rayon-m); }
  #checkout .address-card--radio.selected, #checkout .address-card--radio:hover { background: var(--jaune-pale); border-color: var(--graphite); }
  #checkout .address-card__alias { font-family: var(--font-titre); font-size: 19px; line-height: 24px; font-weight: 700; }
  #checkout .address-card__actions a { display: inline-flex; align-items: center; min-height: var(--cible-min); color: var(--texte); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
}

/* Étape 3 : modes de livraison en cartes radio (pg-choix) ; état coché lu sur le bouton radio */
@layer ps-components {
  #checkout .delivery-option__item { background: transparent; border-block-end: 0; }
  #checkout .delivery-option__label { cursor: pointer; }
  #checkout .delivery-option__label:has(input:checked) { background: var(--jaune-pale); border-color: var(--graphite); box-shadow: inset 0 0 0 1px var(--graphite); }
  #checkout .delivery-option__label:has(input:focus-visible) { outline: var(--trait-hauban) solid var(--focus); outline-offset: 2px; }
  #checkout .delivery-option__check.form-check { min-height: 0; margin: 0; padding: 0; }
  #checkout .delivery-option__check .form-check-input { float: none; margin: 2px 0 0; }
  #checkout .delivery-option__carrier { align-items: flex-start; gap: var(--espace-3); }
  #checkout .delivery-option__carrier-logo { width: 48px; height: 48px; object-fit: contain; border-radius: var(--rayon-s); }
  #checkout .delivery-option__carrier-name { display: block; font-weight: 600; }
  #checkout .delivery-option__content { display: block; color: var(--texte-doux); }
  #checkout .delivery-option__price { text-align: right; }
  #checkout .delivery-option__extra[data-active] .delivery-option__extra-content { padding: var(--espace-3) var(--espace-4) var(--espace-4); }
}
@layer ps-pages {
  #checkout .delivery-options__list { margin-block-end: var(--espace-6); }
}

/* Étape 4 : moyens de paiement en cartes radio, récapitulatif, rétractation, CGV, bouton final */
#checkout .g2-paiements { margin-bottom: var(--espace-6); }
#checkout .g2-paiement { grid-template-columns: 20px minmax(0, 1fr); align-items: center; cursor: pointer; }
#checkout .g2-paiement:has(input:checked) { background: var(--jaune-pale); border-color: var(--graphite); box-shadow: inset 0 0 0 1px var(--graphite); }
#checkout .g2-paiement:has(input:focus-visible) { outline: var(--trait-hauban) solid var(--focus); outline-offset: 2px; }
#checkout .g2-paiement .payment-option__label { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--espace-2) var(--espace-4); cursor: pointer; }
#checkout .g2-paiement__logo { max-height: 32px; width: auto; }
@layer ps-components {
  #checkout .payment-option__form-check.form-check { min-height: var(--controle); margin: 0; padding: var(--espace-4); }
  #checkout .payment-option__form-check .form-check-input { float: none; margin: 0; }
  #checkout .payment-option__additional-information { padding: var(--espace-3) var(--espace-4) 0; font-size: 15px; line-height: 22px; }
}
@layer ps-pages {
  #checkout .payment-options__list { gap: var(--espace-3); }
}

#checkout .g2-verifier { display: grid; gap: var(--espace-3); margin-bottom: var(--espace-6); }
#checkout .g2-verifier > h2 { margin: 0; }
#checkout .g2-revoir { display: grid; margin: 0; border: var(--trait-fin) solid var(--trait); border-radius: var(--rayon-m); }
#checkout .g2-revoir > div { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: var(--espace-4); align-items: center; min-height: 52px; padding: var(--espace-2) var(--espace-4); border-top: var(--trait-fin) solid var(--trait); font-size: 15px; line-height: 22px; }
#checkout .g2-revoir > div:first-child { border-top: 0; }
#checkout .g2-revoir dt { font-family: var(--font-technique); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; font-weight: 500; color: var(--texte-doux); }
#checkout .g2-revoir dd { display: flex; align-items: center; justify-content: space-between; gap: var(--espace-4); margin: 0; min-width: 0; }
#checkout .g2-revoir__valeur { min-width: 0; overflow-wrap: anywhere; }
#checkout .g2-revoir address { margin: 0; font-style: normal; }
#checkout .g2-revoir__total dd { font-weight: 600; }
#checkout .g2-modif { display: inline-flex; flex: none; align-items: center; gap: var(--espace-1); min-height: var(--cible-min); padding: 0 var(--espace-1); color: var(--texte); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; background: transparent; border: 0; cursor: pointer; }
#checkout .g2-modif:focus-visible { outline: var(--trait-hauban) solid var(--focus); outline-offset: 2px; }
#checkout .g2-legal { margin-bottom: var(--espace-4); }
#checkout .g2-legal__titre { margin: 0; font-family: var(--font-titre); font-size: 19px; line-height: 24px; font-weight: 700; }
#checkout .g2-legal p { margin: 0; }
#checkout .g2-conditions { display: grid; gap: var(--espace-2); margin-bottom: var(--espace-4); }
#checkout .g2-cgv { align-items: center; min-height: var(--controle); margin: 0; padding: var(--espace-3) var(--espace-4); font-size: 15px; line-height: 22px; background: var(--fond); border-radius: var(--rayon-s); }
#checkout .g2-cgv a { color: inherit; font-weight: 600; text-decoration: underline; text-decoration-thickness: var(--trait-moyen); text-underline-offset: 4px; }
#checkout .g2-cgv a:focus-visible { outline: var(--trait-hauban) solid var(--focus); outline-offset: 2px; }
@layer bs-components {
  #checkout .g2-cgv.form-check .form-check-input { float: none; flex: none; width: 20px; height: 20px; margin: 0; }
}
#checkout .g2-final__valider { display: grid; gap: var(--espace-2); width: 100%; }
#checkout .g2-commander { width: 100%; min-height: 56px; padding: var(--espace-2) var(--espace-4); font-size: 17px; line-height: 22px; white-space: normal; text-align: center; }
#checkout .g2-final__montant { justify-content: center; margin: 0; }
@layer ps-components {
  #checkout .g2-final.buttons-wrapper { flex-direction: column-reverse; align-items: stretch; gap: var(--espace-3); margin-top: var(--espace-4); }
  #checkout .g2-final.buttons-wrapper .js-back { align-self: flex-start; width: auto; }
}


/* §4 Tunnel : grille et récapitulatif à droite (380 px). */
@layer ps-pages {
  #checkout .checkout-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--espace-12); align-items: start; margin-inline: 0; }
  #checkout .checkout-grid > .checkout-grid__content, #checkout .checkout-grid > .checkout-grid__aside { width: auto; max-width: none; min-width: 0; margin-top: 0; padding-inline: 0; }
  #checkout .checkout-grid__aside-wrapper { top: calc(var(--scroll-padding-top, 0px) + var(--espace-4)); z-index: auto; }
  #checkout .checkout__summary-accordion-item { background: var(--blanc); border: var(--trait-moyen) solid var(--graphite); border-radius: var(--rayon-m); overflow: hidden; }
  #checkout .checkout__summary-accordion-wrapper { padding: var(--espace-6); }
}
@layer ps-components {
  #checkout .cart-summary__products-number { font-family: var(--font-titre); font-size: 19px; line-height: 24px; font-weight: 700; }
  #checkout .cart-summary-product__img { width: 56px; height: 56px; object-fit: contain; background: var(--blanc); border: var(--trait-fin) solid var(--trait); border-radius: var(--rayon-s); }
  #checkout .cart-summary-product__link { color: var(--texte); font-weight: 600; }
  #checkout .cart-summary-product__total { font-family: var(--font-technique); font-weight: 500; }
}
#checkout .checkout__summary-accordion .accordion-button { min-height: var(--cible-min); font-family: var(--font-titre); font-size: 19px; font-weight: 700; color: var(--texte); background: var(--blanc); box-shadow: none; }
#checkout .checkout__summary-accordion .accordion-button:focus-visible { outline: var(--trait-hauban) solid var(--focus); outline-offset: -3px; box-shadow: none; }


/* §5 Confirmation (G3) : succès, livraison, prochaines étapes à gauche ; récapitulatif, compte, aide à droite. */
#order-confirmation .g3-page { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: var(--espace-12); align-items: start; padding-block: var(--espace-6) var(--espace-12); }
#order-confirmation .g3-gauche, #order-confirmation .g3-droite { display: grid; gap: var(--espace-8); align-content: start; min-width: 0; }
#order-confirmation .g3-droite { gap: var(--espace-6); }
#order-confirmation .g3-succes { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--espace-6); align-items: start; padding: var(--espace-8); background: var(--sapin-pale); border-radius: var(--rayon-m); }
#order-confirmation .g3-succes__ico { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; color: var(--toile); background: var(--sapin); border-radius: 50%; }
#order-confirmation .g3-succes__texte { display: grid; gap: var(--espace-2); min-width: 0; }
#order-confirmation .g3-succes__texte p { margin: 0; }
#order-confirmation .g3-succes__surtitre { font-family: var(--font-technique); font-size: 12px; line-height: 16px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--sapin); }
#order-confirmation .g3-succes h1 { margin: 0; font-size: clamp(32px, 3.4vw, 48px); line-height: 1.1; color: var(--texte); }
#order-confirmation .g3-chapo { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.5; }
#order-confirmation .g3-num { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espace-1) var(--espace-3); margin-top: var(--espace-2); font-size: 15px; }
#order-confirmation .g3-num b { font-size: 20px; letter-spacing: .06em; font-weight: 600; overflow-wrap: anywhere; }
#order-confirmation .g3-succes .ab-lien { display: inline-flex; align-items: center; min-height: var(--cible-min); }

#order-confirmation .g3-virement { display: grid; gap: var(--espace-3); padding: var(--espace-6); font-size: 15px; line-height: 22px; background: var(--blanc); border: var(--trait-fin) solid var(--trait); border-radius: var(--rayon-m); }
#order-confirmation .g3-virement p { margin: 0; }
#order-confirmation .g3-statut { display: inline-flex; align-items: center; gap: var(--espace-2); margin: 0; font-family: var(--font-texte); font-size: 17px; line-height: 24px; font-weight: 600; }
#order-confirmation .g3-statut--attente { color: var(--attention); }
#order-confirmation .g3-iban { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--espace-1) var(--espace-4); margin: 0; padding: var(--espace-3) var(--espace-4); font-size: 14px; background: var(--fond); border-radius: var(--rayon-s); }
#order-confirmation .g3-iban dt { font-weight: 400; color: var(--texte-doux); }
#order-confirmation .g3-iban dd { margin: 0; font-family: var(--font-technique); font-weight: 500; overflow-wrap: anywhere; }
#order-confirmation .g3-note { font-size: 13px; line-height: 18px; color: var(--texte-doux); }

#order-confirmation .g3-date { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--espace-6); align-items: center; padding: var(--espace-6) var(--espace-8); background: var(--blanc); border: var(--trait-moyen) solid var(--graphite); border-radius: var(--rayon-m); }
#order-confirmation .g3-date p, #order-confirmation .g3-date address { margin: 0; }
#order-confirmation .g3-date__surtitre { margin: 0 0 var(--espace-1); font-family: var(--font-technique); font-size: 12px; line-height: 16px; letter-spacing: .08em; text-transform: uppercase; font-weight: 500; color: var(--texte-doux); }
#order-confirmation .g3-date__adresse { font-size: 15px; line-height: 22px; font-style: normal; }

#order-confirmation .g3-suite > h2 { margin: 0 0 var(--espace-6); }
#order-confirmation .g3-etapes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--espace-4); margin: 0; padding: 0; list-style: none; }
#order-confirmation .g3-etapes li { display: grid; gap: var(--espace-2); align-content: start; padding: var(--espace-4); font-size: 15px; line-height: 22px; background: var(--blanc); border: var(--trait-fin) solid var(--trait); border-radius: var(--rayon-m); }
#order-confirmation .g3-etapes b { font-weight: 600; }
#order-confirmation .g3-etapes__n { display: inline-flex; align-items: center; gap: var(--espace-2); font-family: var(--font-technique); font-size: 12px; line-height: 16px; letter-spacing: .08em; text-transform: uppercase; color: var(--texte-doux); }
#order-confirmation .g3-etapes li.fait .g3-etapes__n { color: var(--sapin); }

#order-confirmation .g3-renoncer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--espace-3) var(--espace-6); padding: var(--espace-4) var(--espace-6); font-size: 15px; line-height: 22px; border: var(--trait-fin) solid var(--trait-fort); border-radius: var(--rayon-m); }

#order-confirmation .g3-recap { position: static; }
#order-confirmation .g3-recap > h2 { margin: 0; }
#order-confirmation .g3-articles { display: grid; gap: var(--espace-3); margin: 0; padding: 0; list-style: none; }
#order-confirmation .g3-art { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: var(--espace-3); align-items: start; font-size: 14px; line-height: 20px; }
#order-confirmation .g3-art img, #order-confirmation .g3-sansphoto { width: 56px; height: 56px; object-fit: contain; background: var(--blanc); border: var(--trait-fin) solid var(--trait); border-radius: var(--rayon-s); }
#order-confirmation .g3-sansphoto { display: flex; align-items: center; justify-content: center; color: var(--texte-doux); }
#order-confirmation .g3-art .pg-mono { font-size: 13px; white-space: nowrap; }
#order-confirmation .g3-total-ht { margin: calc(-1 * var(--espace-2)) 0 0; }
#order-confirmation .g3-compte { display: grid; gap: var(--espace-4); padding: var(--espace-6); }
#order-confirmation .g3-aide { margin: 0; }
#order-confirmation .g3-aide a { margin-left: auto; color: inherit; font-weight: 600; white-space: nowrap; text-decoration: none; }
#order-confirmation .g3-aide a:focus-visible { outline: var(--trait-hauban) solid var(--jaune-hauban); outline-offset: 2px; }
#order-confirmation .g3-suivre:focus-visible, #order-confirmation .ab-lien:focus-visible { outline: var(--trait-hauban) solid var(--focus); outline-offset: 2px; }


/* §6 Fenêtre « Ajouté au panier » (ps_shoppingcart), sur toutes les pages : limitée à #blockcart-modal. */
@layer ps-modules {
  #blockcart-modal .blockcart-modal__title { display: inline-flex; align-items: center; gap: var(--espace-3); margin: 0; font-family: var(--font-titre); font-size: 24px; line-height: 30px; font-weight: 700; color: var(--texte); }
  #blockcart-modal .blockcart-modal__title-icon { color: var(--sapin); }
  #blockcart-modal .blockcart-modal__image { width: 120px; height: 120px; margin: 0; object-fit: contain; background: var(--blanc); border: var(--trait-fin) solid var(--trait); border-radius: var(--rayon-m); }
  #blockcart-modal .blockcart-modal__name, #blockcart-modal .blockcart-modal__property, #blockcart-modal .blockcart-modal__price, #blockcart-modal .blockcart-modal__nb-products { margin: 0; }
  #blockcart-modal .blockcart-modal__property { font-size: 15px; line-height: 22px; }
  #blockcart-modal .blockcart-modal__total--bold { font-weight: 600; }
}
@layer bs-components {
  #blockcart-modal .modal-content { color: var(--texte); background: var(--fond); border: var(--trait-moyen) solid var(--graphite); border-radius: var(--rayon-m); box-shadow: var(--ombre-flottante); }
  #blockcart-modal .modal-header, #blockcart-modal .modal-footer { border-color: var(--trait); }
  #blockcart-modal .btn-close { box-sizing: border-box; width: var(--cible-min); height: var(--cible-min); margin: 0 0 0 auto; padding: 0; opacity: 1; }
  #blockcart-modal .btn-close:focus-visible { outline: var(--trait-hauban) solid var(--focus); outline-offset: 2px; box-shadow: none; }
}
#blockcart-modal .blockcart-modal__corps { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--espace-6); }
#blockcart-modal .blockcart-modal__product { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--espace-4); align-items: start; }
#blockcart-modal .blockcart-modal__infos { display: grid; gap: var(--espace-1); min-width: 0; }
#blockcart-modal .blockcart-modal__ref { margin: 0; font-family: var(--font-technique); font-size: 12px; line-height: 16px; color: var(--texte-doux); }
#blockcart-modal .blockcart-modal__quantity { margin: 0; font-size: 14px; color: var(--texte-doux); }
#blockcart-modal .blockcart-modal__summary { display: grid; gap: var(--espace-2); align-content: start; padding: var(--espace-4); background: var(--blanc); border: var(--trait-fin) solid var(--trait); border-radius: var(--rayon-m); }
#blockcart-modal .blockcart-modal__nb-products { font-size: 13px; color: var(--texte-doux); }
#blockcart-modal .blockcart-modal__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--espace-3); }


/* §7 Paliers : 1 200 / 992 / 768 / 480 / 380 px. */
@media (max-width: 1199.98px) {
  #cart .g1-page, #order-confirmation .g3-page { grid-template-columns: minmax(0, 1fr) 340px; gap: var(--espace-8); }
  #order-confirmation .g3-etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  @layer ps-pages {
    #checkout .checkout-grid { grid-template-columns: minmax(0, 1fr) 340px; gap: var(--espace-8); }
  }
}

@media (max-width: 991.98px) {
  #cart .g1-page, #order-confirmation .g3-page { grid-template-columns: minmax(0, 1fr); }
  #cart .g1-recap { position: static; }
  #checkout .g2-entete__barre { gap: var(--espace-3) var(--espace-4); }
  @layer ps-pages {
    #checkout .checkout-grid { grid-template-columns: minmax(0, 1fr); gap: var(--espace-6); }
    /* Téléphone et tablette : récapitulatif replié en tête (carte M3) */
    #checkout .checkout-grid > .checkout-grid__aside { order: -1; }
    #checkout .checkout-grid__aside-wrapper { position: static; }
    #checkout .checkout__summary-accordion-wrapper { padding: 0 var(--espace-4) var(--espace-4); }
  }
  @layer ps-components {
    #checkout .checkout-steps__desktop { padding-inline: var(--espace-4); }
    #checkout .checkout-steps__step { padding: var(--espace-3) var(--espace-2); }
  }
}

@media (max-width: 767.98px) {
  /* Titres sur l’échelle téléphone */
  #cart .g1-tete__titre, #order-confirmation .g3-succes h1 { font-size: 34px; line-height: 38px; }

  /* Panier : ligne en deux rangées (vignette 88 px + informations ; quantité + prix) */
  #cart .g1-ligne.pg-ligne-panier { grid-template-columns: 88px minmax(0, 1fr); gap: var(--espace-2) var(--espace-3); padding: var(--espace-4) 0; }
  #cart .g1-ligne.pg-ligne-panier img, #cart .g1-ligne .pg-sansphoto { width: 88px; height: 88px; }
  #cart .g1-ligne .g1-qte { grid-column: 1; }
  #cart .g1-ligne .g1-prixligne { grid-column: 2; align-self: center; }

  /* Panier : récapitulatif collant en bas d’écran (total + « Commander »), seul bouton jaune */
  #cart .g1-page { padding-bottom: 168px; }
  #cart .g1-actions { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; padding: var(--espace-3) var(--espace-4) var(--espace-4); background: var(--blanc); border-top: var(--trait-moyen) solid var(--graphite); box-shadow: var(--ombre-flottante); }
  #cart .g1-actions__total { display: flex; align-items: baseline; justify-content: space-between; gap: var(--espace-3); margin: 0; }
  #cart .g1-actions__total b { font-family: var(--font-titre); font-size: 24px; line-height: 28px; font-weight: 750; }

  /* Tunnel : en-tête réduit (logo, « Paiement sécurisé », téléphone en bouton de 44 px) */
  #checkout .g2-entete__barre { min-height: 58px; flex-wrap: wrap; padding-block: var(--espace-1); }
  #checkout .g2-entete__logo img { max-height: 40px; }
  #checkout .g2-entete__secu { margin-left: auto; padding: 0; font-size: 13px; border: 0; }
  #checkout .g2-entete__tel { margin-left: 0; }
  #checkout .g2-entete__tel-texte, #checkout .g2-entete__tel-num, #checkout .g2-entete__retour span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  #checkout .g2-entete__tel-lien, #checkout .g2-entete__retour { justify-content: center; width: var(--cible-min); height: var(--cible-min); padding: 0; border: var(--trait-moyen) solid var(--graphite); border-radius: var(--rayon-s); background: var(--blanc); }
  #checkout .g2-entete__retour { order: -1; }

  /* Tunnel : étapes en carte pleine largeur, bouton final collant en bas d’écran */
  #checkout .step { padding: var(--espace-4); }
  #checkout #checkout-payment-step .step__content { padding-bottom: 140px; }
  #checkout .g2-final__valider { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; padding: var(--espace-3) var(--espace-4) var(--espace-4); background: var(--blanc); border-top: var(--trait-moyen) solid var(--graphite); box-shadow: var(--ombre-flottante); }
  #checkout .g2-revoir > div { grid-template-columns: minmax(0, 1fr); gap: var(--espace-1); }

  /* Confirmation : une colonne, succès et livraison en tête */
  #order-confirmation .g3-succes { grid-template-columns: minmax(0, 1fr); gap: var(--espace-4); padding: var(--espace-6); }
  #order-confirmation .g3-date { grid-template-columns: minmax(0, 1fr); gap: var(--espace-3); padding: var(--espace-4); }
  #order-confirmation .g3-etapes { grid-template-columns: minmax(0, 1fr); }

  /* Fenêtre du panier : une colonne */
  #blockcart-modal .blockcart-modal__corps { grid-template-columns: minmax(0, 1fr); }
  #blockcart-modal .blockcart-modal__actions .ab-bouton { flex: 1 1 100%; }
  @layer ps-components {
    #checkout .checkout-steps__desktop { display: none; }
  }
}

@media (max-width: 479.98px) {
  #cart .g1-tete { flex-direction: column; align-items: flex-start; }
  #blockcart-modal .blockcart-modal__product { grid-template-columns: 88px minmax(0, 1fr); }
  #blockcart-modal .blockcart-modal__image { width: 88px; height: 88px; }
  #order-confirmation .g3-art { grid-template-columns: 56px minmax(0, 1fr); }
  #order-confirmation .g3-art .pg-mono { grid-column: 2; }
}

@media (max-width: 379.98px) {
  #checkout .g2-entete__logo img { max-height: 40px; max-width: 9rem; }
  #checkout .g2-entete__secu svg { display: none; }
  #cart .g1-qte .input-group > input { width: 32px; max-width: 32px; }
}