/*
 * Thème metfi : pages héritées de classic, rhabillées en CSS seul.
 * Panier, tunnel de commande, confirmation de commande, connexion, création
 * de compte, mot de passe oublié et pages du compte client, pages CMS,
 * contact, plan du site.
 *
 * Aucun gabarit de ces pages n'est redéfini dans le thème : la structure de
 * classic reste celle sur laquelle s'appuient PS Checkout (paiement),
 * metfi_shipping_ux (bloc #metfi-shipux), metfi_cart_ux, nkmgls, Boxtal et
 * les transporteurs. D'où la règle de cette feuille : elle change couleurs,
 * police, bordures, rayons, marges et tailles ; elle ne masque, ne déplace et
 * ne recouvre aucun élément de ces modules (ni display: none, ni position,
 * ni pseudo-élément posé sur une commande). tests/e2e/tunnel.test.mjs vérifie
 * que leurs boutons radio et cases restent affichés et cliquables. Seule
 * exception, hors modules : l'en-tête de classic du tunnel sur mobile, remis
 * en ligne (voir sa section).
 *
 * Portée : les pages héritées, par l'identifiant ou la classe que classic
 * pose sur <body>, et leur contenu seulement (#wrapper) : l'en-tête et le
 * pied du thème gardent leurs propres règles. La liste des pages est dans
 * :where(), qui ne compte pas dans la spécificité : une règle pèse
 * « #wrapper + ses classes », de quoi passer devant theme.css de classic
 * (sélecteurs de classes) sans écraser les règles du thème à identifiant.
 * Les règles du tunnel qui doivent battre « body#checkout
 * section.checkout-step … » de classic commencent de la même façon.
 *
 * Couleurs, police, rayons et hauteurs : variables --mf-* (config/
 * reglages.json, posées par metfi_theme) et nuances de metfi.css, jamais de
 * valeur en dur sauf en repli dans var(). Seule couleur hors noir et gris :
 * le vert de la charte (message de réussite). Les erreurs gardent le rouge
 * de classic : un champ refusé doit se voir.
 *
 * Points de rupture : ceux de classic pour les colonnes du panier et du
 * tunnel (768 et 992 px), ceux de metfi.css pour le mobile (sous 768 px).
 */

/* =================================================================
 * Base commune des pages héritées
 * ================================================================= */

:where(#cart, #checkout, #order-confirmation, #cms, #contact, #sitemap, .page-customer-account) #wrapper {
  color: var(--mf-couleurs-encre, #141414);
}

/* Air avant le pied de page du thème (classic colle le contenu au pied). */
:where(#cart, #order-confirmation, #cms, #contact, #sitemap, .page-customer-account) #header:has(.mf-entete) ~ #wrapper {
  padding-bottom: 72px;
}

/* -------------------------------------------------------------- textes
 * Classic écrit les paragraphes en gris clair #7a7a7a sur 15 px et le
 * contenu du compte en 14 px : texte de la charte, 15 à 16 px.
 */
:where(#cart, #checkout, #order-confirmation, #cms, #contact, #sitemap, .page-customer-account) #wrapper :is(p, li, dd, dt, address) {
  color: var(--mf-couleurs-texte, #444444);
  line-height: 1.6;
}
:where(#cart, #checkout, #order-confirmation, #cms, #contact, #sitemap, .page-customer-account) #wrapper :is(.text-muted, small, .form-control-comment) {
  color: var(--mf-couleurs-texte-doux, #6b6b6b) !important; /* classic : .text-muted en !important */
}
.page-customer-account #wrapper #content {
  color: var(--mf-couleurs-texte, #444444);
  font-size: 15px;
}
:where(#cart, #checkout, #order-confirmation, #cms, #contact, #sitemap, .page-customer-account) #wrapper :is(label, .label, .form-control-label) {
  color: var(--mf-couleurs-encre, #141414);
}
:where(#cart, #checkout, #order-confirmation, #cms, #contact, #sitemap, .page-customer-account) #wrapper hr {
  border-top-color: var(--mf-couleurs-bordure, #e6e6e4);
}
/* Images et vidéos du contenu d'une page CMS, posées par l'éditeur du
 * back-office avec leur taille d'origine (890 px de large dans le règlement
 * du jeu concours) : jamais plus larges que la colonne. Classic les laisse
 * dépasser, et sur téléphone le bord de l'écran en rognait les deux tiers. */
:where(#cms) #wrapper .page-cms :is(img, video) {
  max-width: 100%;
  height: auto;
}

/* -------------------------------------------------------------- titres
 * Classic : titres en majuscules, graisse 500 à 700. Charte : titres en
 * 800, sans majuscules forcées.
 */
:where(#cart, #checkout, #order-confirmation, #cms, #contact, #sitemap, .page-customer-account) #wrapper :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
  font-family: inherit;
  font-weight: var(--mf-typo-graisse-titres, 800);
  color: var(--mf-couleurs-encre, #141414);
  text-transform: none;
  letter-spacing: -0.01em;
}
/* Titre de la page (en-tête de page de classic, titre du panier). */
:where(#cart, #order-confirmation, #cms, #contact, #sitemap, .page-customer-account) #wrapper :is(.page-header h1, .cart-container > .card-block > h1, .card-title.h1) {
  margin: 8px 0 24px;
  font-size: 36px;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

/* --------------------------------------------------------------- liens
 * Liens à l'encre (classic : bleu #24b9d7, survol #198195), soulignés au
 * survol ; soulignés en permanence dans le texte courant, où rien d'autre ne
 * les distinguerait.
 */
:where(#cart, #checkout, #order-confirmation, #cms, #contact, #sitemap, .page-customer-account) #wrapper a:not(.btn) {
  color: var(--mf-couleurs-encre, #141414);
}
:where(#cart, #checkout, #order-confirmation, #cms, #contact, #sitemap, .page-customer-account) #wrapper a:not(.btn):is(:hover, :focus) {
  color: var(--mf-nuance-encre-adoucie, #555555);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}
:where(#cart, #checkout, #order-confirmation, #cms, #contact, #sitemap, .page-customer-account) #wrapper :is(p, .condition-label, .alert, .page-cms, .forgot-password, .no-account, .sign-in) a:not(.btn) {
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}
:where(#cart, #checkout, #order-confirmation, #cms, #contact, #sitemap, .page-customer-account) #wrapper a:not(.btn) .material-icons {
  color: inherit;
}
/* Contour de focus au clavier seulement (Bootstrap : à chaque clic aussi). */
:where(#cart, #checkout, #order-confirmation, #cms, #contact, #sitemap, .page-customer-account) #wrapper a:focus-visible {
  outline: 2px solid var(--mf-couleurs-encre, #141414);
  outline-offset: 2px;
}
:where(#cart, #checkout, #order-confirmation, #cms, #contact, #sitemap, .page-customer-account) #wrapper a:focus:not(:focus-visible) {
  outline: none;
}

/* ---------------------------------------------------- fil d'Ariane
 * Comme celui des listes : un peu d'air sous l'en-tête du site, liens à
 * l'encre, page courante en texte doux.
 */
:where(#cart, #checkout, #order-confirmation, #cms, #contact, #sitemap, .page-customer-account) #wrapper .breadcrumb {
  padding: 16px 0 4px;
  font-size: 14px;
}
:where(#cart, #checkout, #order-confirmation, #cms, #contact, #sitemap, .page-customer-account) #wrapper .breadcrumb li a {
  color: var(--mf-couleurs-encre, #141414);
  font-weight: 600;
}
:where(#cart, #checkout, #order-confirmation, #cms, #contact, #sitemap, .page-customer-account) #wrapper .breadcrumb li:last-child,
:where(#cart, #checkout, #order-confirmation, #cms, #contact, #sitemap, .page-customer-account) #wrapper .breadcrumb li::after {
  color: var(--mf-couleurs-texte-doux, #6b6b6b);
}

/* ------------------------------------------------------------- boutons
 * Bouton plein (btn-primary) et bouton contour (btn-secondary, btn-tertiary,
 * btn-outline-*), aux mesures des .mf-btn de metfi.css. Le display de
 * classic est gardé (inline-block, ou block pour .center-block) : le texte
 * est centré par la hauteur de ligne et un remplissage calculé sur la
 * hauteur des boutons (24 px de ligne, 3 px de bordure).
 */
:where(#cart, #checkout, #order-confirmation, #cms, #contact, #sitemap, .page-customer-account) #wrapper :is(.btn-primary, .btn-secondary, .btn-tertiary, .btn-outline-primary, .btn-outline-secondary) {
  box-sizing: border-box;
  min-height: var(--mf-formes-hauteur-bouton, 48px);
  margin: 0;
  padding: calc((var(--mf-formes-hauteur-bouton, 48px) - 27px) / 2) 24px;
  border: 1.5px solid var(--mf-couleurs-encre, #141414);
  border-radius: var(--mf-formes-rayon, 4px);
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: normal;
  text-transform: none;
  white-space: normal; /* libellés longs sur mobile : à la ligne plutôt que hors de l'écran */
  box-shadow: none;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
:where(#cart, #checkout, #order-confirmation, #cms, #contact, #sitemap, .page-customer-account) #wrapper .btn-primary,
:where(#cart, #checkout, #order-confirmation, #cms, #contact, #sitemap, .page-customer-account) #wrapper .btn-primary:is(:hover, :focus, :active, .active, .focus, .disabled, :disabled) {
  border-color: var(--mf-couleurs-encre, #141414);
  background-color: var(--mf-couleurs-encre, #141414);
  color: var(--mf-couleurs-fond, #ffffff);
}
:where(#cart, #checkout, #order-confirmation, #cms, #contact, #sitemap, .page-customer-account) #wrapper .btn-primary:is(:hover, :focus, :active, .active):not(:disabled, .disabled) {
  border-color: var(--mf-nuance-encre-survol, #333333);
  background-color: var(--mf-nuance-encre-survol, #333333);
}
:where(#cart, #checkout, #order-confirmation, #cms, #contact, #sitemap, .page-customer-account) #wrapper :is(.btn-secondary, .btn-tertiary, .btn-outline-primary, .btn-outline-secondary),
:where(#cart, #checkout, #order-confirmation, #cms, #contact, #sitemap, .page-customer-account) #wrapper :is(.btn-secondary, .btn-tertiary, .btn-outline-primary, .btn-outline-secondary):is(.disabled, :disabled) {
  border-color: var(--mf-couleurs-encre, #141414);
  background-color: transparent;
  color: var(--mf-couleurs-encre, #141414);
}
:where(#cart, #checkout, #order-confirmation, #cms, #contact, #sitemap, .page-customer-account) #wrapper :is(.btn-secondary, .btn-tertiary, .btn-outline-primary, .btn-outline-secondary):is(:hover, :focus, :active, .active):not(:disabled, .disabled) {
  border-color: var(--mf-couleurs-encre, #141414);
  background-color: var(--mf-couleurs-encre, #141414);
  color: var(--mf-couleurs-fond, #ffffff);
}
/* Bouton indisponible (« Commander » tant que les conditions ne sont pas
   acceptées, panier vide) : même encre, estompée (classic : 0,65). */
:where(#cart, #checkout, #order-confirmation, #cms, #contact, #sitemap, .page-customer-account) #wrapper .btn:is(.disabled, :disabled) {
  opacity: 0.4;
}
:where(#cart, #checkout, #order-confirmation, #cms, #contact, #sitemap, .page-customer-account) #wrapper :is(.btn-info, .btn-outline-info, .btn-link) {
  border-color: var(--mf-couleurs-encre, #141414);
  background-color: transparent;
  color: var(--mf-couleurs-encre, #141414);
}
/* Anneau de focus au clavier seulement (classic en pose un à chaque clic). */
:where(#cart, #checkout, #order-confirmation, #cms, #contact, #sitemap, .page-customer-account) #wrapper .btn:focus-visible {
  outline: 2px solid var(--mf-couleurs-encre, #141414);
  outline-offset: 2px;
}
:where(#cart, #checkout, #order-confirmation, #cms, #contact, #sitemap, .page-customer-account) #wrapper .btn:focus:not(:focus-visible) {
  outline: none;
}
:where(#cart, #checkout, #order-confirmation, #cms, #contact, #sitemap, .page-customer-account) #wrapper :is(.btn-primary, .btn-secondary) .material-icons {
  vertical-align: -6px;
}

/* --------------------------------------------------------------- champs
 * Contour encre de 1,5 px (charte : boutons contour et sélecteur de
 * quantité de la maquette), fond blanc, 16 px (iOS ne zoome pas sur le
 * champ), anneau d'encre au focus (classic : contour bleu de 3 px).
 * background-color seulement : les listes de classic dessinent leur flèche
 * en image de fond.
 */
:where(#cart, #checkout, #order-confirmation, #cms, #contact, #sitemap, .page-customer-account) #wrapper :is(.form-control, .custom-select, .promo-input) {
  box-sizing: border-box;
  min-height: var(--mf-formes-hauteur-bouton, 48px);
  padding: 10px 14px;
  border: 1.5px solid var(--mf-couleurs-encre, #141414);
  border-radius: var(--mf-formes-rayon, 4px);
  background-color: var(--mf-couleurs-fond, #ffffff);
  color: var(--mf-couleurs-encre, #141414);
  font-family: inherit;
  font-size: 16px;
  line-height: 1.5;
}
:where(#cart, #checkout, #order-confirmation, #cms, #contact, #sitemap, .page-customer-account) #wrapper :is(.form-control, .custom-select, .promo-input):focus {
  border-color: var(--mf-couleurs-encre, #141414);
  outline: none;
  background-color: var(--mf-couleurs-fond, #ffffff);
  color: var(--mf-couleurs-encre, #141414);
  box-shadow: 0 0 0 1px var(--mf-couleurs-encre, #141414);
}
:where(#cart, #checkout, #order-confirmation, #cms, #contact, #sitemap, .page-customer-account) #wrapper :is(.form-control, .promo-input)::placeholder {
  color: var(--mf-couleurs-texte-doux, #6b6b6b);
}
:where(#cart, #checkout, #order-confirmation, #cms, #contact, #sitemap, .page-customer-account) #wrapper :is(.form-control:disabled, .form-control[readonly]) {
  border-color: var(--mf-couleurs-bordure, #e6e6e4);
  background-color: var(--mf-couleurs-fond-doux, #f3f3f1);
}
:where(#cart, #checkout, #order-confirmation, #cms, #contact, #sitemap, .page-customer-account) #wrapper textarea.form-control {
  min-height: 96px;
}
:where(#cart, #checkout, #order-confirmation, #cms, #contact, #sitemap, .page-customer-account) #wrapper .form-control-label {
  font-size: 15px;
  font-weight: 700;
}
/* Groupe champ + bouton (mot de passe « Montrer », pièce jointe) : classic
   l'entoure de bleu au focus ; le champ porte déjà l'anneau d'encre. */
:where(#cart, #checkout, #order-confirmation, #cms, #contact, #sitemap, .page-customer-account) #wrapper .input-group.focus {
  outline: none;
}
:where(#cart, #checkout, #order-confirmation, #cms, #contact, #sitemap, .page-customer-account) #wrapper .input-group .form-control:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
:where(#cart, #checkout, #order-confirmation, #cms, #contact, #sitemap, .page-customer-account) #wrapper .input-group .input-group-btn > .btn {
  min-height: var(--mf-formes-hauteur-bouton, 48px);
  padding: 0 16px;
  border: 1.5px solid var(--mf-couleurs-encre, #141414);
  border-radius: 0 var(--mf-formes-rayon, 4px) var(--mf-formes-rayon, 4px) 0;
  background: var(--mf-couleurs-encre, #141414);
  color: var(--mf-couleurs-fond, #ffffff);
  font-size: 14px;
  font-weight: 700;
  text-transform: none;
}
:where(#cart, #checkout, #order-confirmation, #cms, #contact, #sitemap, .page-customer-account) #wrapper .input-group .input-group-btn > .btn:hover {
  background: var(--mf-nuance-encre-survol, #333333);
}
/* Pièce jointe du formulaire de contact (bootstrap-filestyle). */
:where(#cart, #checkout, #order-confirmation, #cms, #contact, #sitemap, .page-customer-account) #wrapper .group-span-filestyle .btn-default {
  display: inline-flex;
  align-items: center;
  min-height: var(--mf-formes-hauteur-bouton, 48px);
  border: 1.5px solid var(--mf-couleurs-encre, #141414);
  border-radius: 0 var(--mf-formes-rayon, 4px) var(--mf-formes-rayon, 4px) 0;
  background: var(--mf-couleurs-encre, #141414);
  color: var(--mf-couleurs-fond, #ffffff);
  font-size: 14px;
  font-weight: 700;
  text-transform: none;
}

/* Cases natives (« Utiliser aussi cette adresse pour la facturation ») :
   cochées à l'encre plutôt qu'au bleu du navigateur. */
:where(#cart, #checkout, #order-confirmation, #cms, #contact, #sitemap, .page-customer-account) #wrapper :is(input[type="checkbox"], input[type="radio"]) {
  accent-color: var(--mf-couleurs-encre, #141414);
}

/* Boutons radio et cases de classic (.custom-radio, .custom-checkbox) : mêmes
   tailles et même place que dans classic (le champ invisible qui reçoit le
   clic est posé dessus), contour et marque à l'encre. */
:where(#cart, #checkout, #order-confirmation, #cms, #contact, #sitemap, .page-customer-account) #wrapper .custom-radio {
  border: 1.5px solid var(--mf-couleurs-encre, #141414);
  background: var(--mf-couleurs-fond, #ffffff);
}
:where(#cart, #checkout, #order-confirmation, #cms, #contact, #sitemap, .page-customer-account) #wrapper .custom-radio input[type="radio"]:checked + span {
  top: 1.5px;
  left: 1.5px;
  background-color: var(--mf-couleurs-encre, #141414);
}
:where(#cart, #checkout, #order-confirmation, #cms, #contact, #sitemap, .page-customer-account) #wrapper .custom-checkbox input[type="checkbox"] + span {
  border: 1.5px solid var(--mf-couleurs-encre, #141414);
  border-radius: var(--mf-formes-rayon-badge, 3px);
  background: var(--mf-couleurs-fond, #ffffff);
}
:where(#cart, #checkout, #order-confirmation, #cms, #contact, #sitemap, .page-customer-account) #wrapper .custom-checkbox input[type="checkbox"]:checked + span {
  background: var(--mf-couleurs-encre, #141414);
}
:where(#cart, #checkout, #order-confirmation, #cms, #contact, #sitemap, .page-customer-account) #wrapper .custom-checkbox input[type="checkbox"] + span .checkbox-checked {
  color: var(--mf-couleurs-fond, #ffffff);
}
:where(#cart, #checkout, #order-confirmation, #cms, #contact, #sitemap, .page-customer-account) #wrapper :is(.custom-radio input[type="radio"], .custom-checkbox input[type="checkbox"]):focus-visible + span {
  outline: 2px solid var(--mf-couleurs-encre, #141414);
  outline-offset: 2px;
}

/* -------------------------------------------------------------- alertes
 * Information et avertissement en neutre (fond doux, filet), réussite avec
 * le vert de la charte, erreur dans le rouge de classic. Aussi pour les
 * notifications de toutes les pages (#notifications, gabarit de classic).
 */
:where(#cart, #checkout, #order-confirmation, #cms, #contact, #sitemap, .page-customer-account) #wrapper .alert,
#notifications .alert {
  padding: 14px 16px;
  border-radius: var(--mf-formes-rayon, 4px);
  font-size: 15px;
  line-height: 1.5;
}
:where(#cart, #checkout, #order-confirmation, #cms, #contact, #sitemap, .page-customer-account) #wrapper :is(.alert-info, .alert-warning),
#notifications :is(.alert-info, .alert-warning) {
  border-color: var(--mf-couleurs-bordure, #e6e6e4);
  background-color: var(--mf-couleurs-fond-doux, #f3f3f1);
  color: var(--mf-couleurs-encre, #141414);
}
:where(#cart, #checkout, #order-confirmation, #cms, #contact, #sitemap, .page-customer-account) #wrapper .alert-warning,
#notifications .alert-warning {
  border-color: var(--mf-couleurs-encre, #141414);
}
:where(#cart, #checkout, #order-confirmation, #cms, #contact, #sitemap, .page-customer-account) #wrapper .alert-success,
#notifications .alert-success {
  border-color: var(--mf-couleurs-stock, #1f7a3a);
  background-color: var(--mf-couleurs-fond-doux, #f3f3f1);
  color: var(--mf-couleurs-encre, #141414);
}
:where(#cart, #checkout, #order-confirmation, #cms, #contact, #sitemap, .page-customer-account) #wrapper .alert :is(p, li),
#notifications .alert :is(p, li) {
  color: inherit;
}
:where(#cart, #checkout, #order-confirmation, #cms, #contact, #sitemap, .page-customer-account) #wrapper .alert :is(.alert-link, .material-icons),
#notifications .alert :is(.alert-link, .material-icons) {
  color: inherit;
}

/* =================================================================
 * Panier (#cart) et résumé du panier (panier et tunnel)
 * ================================================================= */

/* Lignes du panier : photo sur fond doux (photos produits de la charte),
   nom et prix à l'encre (classic : prix en bleu, remise en orange). */
:where(#cart, #checkout) #wrapper .cart-item {
  border-bottom-color: var(--mf-couleurs-bordure, #e6e6e4);
}
:where(#cart, #checkout) #wrapper .product-line-grid-left .product-image {
  display: block;
  overflow: hidden;
  border-radius: var(--mf-formes-rayon, 4px);
  background: var(--mf-couleurs-fond-doux, #f3f3f1);
}
:where(#cart, #checkout) #wrapper :is(.product-line-grid-left .product-image img, #cart-summary-product-list img) {
  mix-blend-mode: multiply;
}
:where(#cart, #checkout) #wrapper .product-line-grid-body > .product-line-info > .label {
  color: var(--mf-couleurs-encre, #141414);
  font-size: 16px;
  font-weight: 700;
}
:where(#cart, #checkout, #order-confirmation, .page-customer-account) #wrapper :is(.product-price, .has-discount.product-price, .product-price .price, .current-price .price) {
  color: var(--mf-couleurs-encre, #141414);
  font-weight: 800;
}
:where(#cart, #checkout, #order-confirmation, .page-customer-account) #wrapper .regular-price {
  color: var(--mf-couleurs-texte-doux, #6b6b6b);
  font-weight: 400;
}
/* Remise (Black Friday) : badge noir de la charte, comme sur les vignettes. */
:where(#cart, #checkout, #order-confirmation, .page-customer-account) #wrapper .has-discount .discount {
  padding: 4px 8px;
  border-radius: var(--mf-formes-rayon-badge, 3px);
  background: var(--mf-couleurs-encre, #141414);
  color: var(--mf-couleurs-fond, #ffffff);
  font-size: 13px;
  font-weight: 800;
}
:where(#cart, #checkout) #wrapper .product-line-grid-body .unit-price-cart,
:where(#cart, #checkout) #wrapper .product-line-info :is(.label, .value) {
  color: var(--mf-couleurs-texte-doux, #6b6b6b);
}
:where(#cart, #checkout) #wrapper .product-line-grid-right :is(.product-price, .cart-line-product-actions, .remove-from-cart) {
  color: var(--mf-couleurs-encre, #141414);
}

/*
 * Partie droite d'une ligne du panier (quantité, prix de la ligne,
 * suppression) : une rangée souple au lieu des colonnes fixes de classic,
 * trop étroites pour une quantité aux zones tactiles de la charte (62 px de
 * large sur un téléphone). La colonne vide que classic garde sur mobile pour
 * aligner la quantité sous le nom est retirée : la rangée prend toute la
 * largeur de la ligne.
 *
 * Quantité et prix passent à la ligne quand la place manque (de 768 à
 * 1199 px, la ligne n'occupe que 8/12 du cadre ; sur un téléphone de 320 px) :
 * le prix ne rétrécit jamais (PrestaShop écrit « 1 980,00 € » avec des
 * espaces insécables, il ne peut pas se couper) et se range alors sous la
 * quantité, à droite, la suppression restant à côté. Sans ce retour à la
 * ligne, le prix débordait sur l'icône de suppression.
 */
#cart #wrapper .product-line-grid-right > .row,
#cart #wrapper .product-line-grid-right > .row > .col-md-10 > .row {
  display: flex;
  align-items: center;
}
#cart #wrapper .product-line-grid-right > .row > .col-md-10 > .row {
  flex-wrap: wrap;
  row-gap: 4px;
}
#cart #wrapper .product-line-grid-right > .row > .hidden-md-up:empty {
  display: none;
}
#cart #wrapper .product-line-grid-right > .row > .col-md-10 {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}
#cart #wrapper .product-line-grid-right .qty {
  flex: 0 0 auto;
  width: auto;
  padding-right: 8px;
}
#cart #wrapper .product-line-grid-right .price {
  flex: 0 0 auto;
  width: auto;
  margin-left: auto;
  padding-left: 8px;
  white-space: nowrap;
  text-align: right;
}
#cart #wrapper .product-line-grid-right > .row > .col-md-2 {
  flex: 0 0 auto;
  width: auto;
}

/*
 * Quantité (TouchSpin, posé par le script de classic sur le champ) :
 * « − quantité + » sur une ligne, comme le sélecteur de la fiche, chaque
 * bouton à la zone tactile de la charte (--mf-zone-tactile de metfi.css :
 * 44 px, 48 px sur mobile). Ce sont les boutons de classic, que le script du
 * panier écoute (.js-decrease-product-quantity, .js-increase-product-quantity) :
 * seuls leur taille et leur ordre d'affichage changent. Leur conteneur
 * vertical (.input-group-btn-vertical) n'a plus de boîte (display: contents)
 * et les boutons se rangent de part et d'autre du champ (order). Les flèches
 * haut et bas de classic deviennent « − » et « + » (glyphes remove et add de
 * la même police d'icônes).
 */
#cart #wrapper .bootstrap-touchspin {
  display: inline-flex;
  float: none;
  width: auto;
  align-items: stretch;
  border: 1.5px solid var(--mf-couleurs-encre, #141414);
  border-radius: var(--mf-formes-rayon, 4px);
  background: var(--mf-couleurs-fond, #ffffff);
}
#cart #wrapper .bootstrap-touchspin:focus-within {
  box-shadow: 0 0 0 1px var(--mf-couleurs-encre, #141414);
}
#cart #wrapper .bootstrap-touchspin .input-group-btn-vertical {
  display: contents;
}
#cart #wrapper .bootstrap-touchspin input.form-control,
#cart #wrapper .bootstrap-touchspin input.form-control:focus {
  order: 2;
  float: none;
  box-sizing: border-box;
  width: 48px;
  min-height: 0;
  height: var(--mf-zone-tactile, 44px);
  padding: 0 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-weight: 700;
  text-align: center;
}
#cart #wrapper .bootstrap-touchspin .btn-touchspin {
  display: flex;
  position: relative;
  float: none;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: var(--mf-zone-tactile, 44px);
  max-width: none;
  height: var(--mf-zone-tactile, 44px);
  margin: 0;
  padding: 0;
  border: 0;
  background-color: transparent;
  color: var(--mf-couleurs-encre, #141414);
}
#cart #wrapper .bootstrap-touchspin .btn-touchspin:hover {
  background-color: var(--mf-couleurs-fond-doux, #f3f3f1);
}
#cart #wrapper .bootstrap-touchspin .btn-touchspin:focus-visible {
  outline-offset: -4px; /* dans le cadre du sélecteur */
}
#cart #wrapper .bootstrap-touchspin .bootstrap-touchspin-down {
  order: 1;
  border-radius: var(--mf-formes-rayon, 4px) 0 0 var(--mf-formes-rayon, 4px);
}
#cart #wrapper .bootstrap-touchspin .bootstrap-touchspin-up {
  order: 3;
  border-radius: 0 var(--mf-formes-rayon, 4px) var(--mf-formes-rayon, 4px) 0;
}
#cart #wrapper .bootstrap-touchspin .btn-touchspin i {
  position: static;
  font-size: 20px;
  line-height: 1;
}
#cart #wrapper .bootstrap-touchspin .touchspin-down::after {
  content: "\e15b"; /* remove : − */
}
#cart #wrapper .bootstrap-touchspin .touchspin-up::after {
  content: "\e145"; /* add : + */
}

/* Colonne de droite du panier : encadré sur fond doux. */
#cart #wrapper .cart-grid-right .cart-summary {
  padding: 24px;
  border-radius: var(--mf-formes-rayon, 4px);
  background: var(--mf-couleurs-fond-doux, #f3f3f1);
}
#cart #wrapper .cart-grid-right .cart-summary .card-block {
  padding-left: 0;
  padding-right: 0;
}
#cart #wrapper .cart-container > .card-block {
  padding-left: 0;
  padding-right: 0;
}
#cart #wrapper .cart-grid-body > a.label {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 8px;
  color: var(--mf-couleurs-encre, #141414);
  font-size: 15px;
  font-weight: 700;
}

/* Lignes de totaux (panier, tunnel, confirmation). */
:where(#cart, #checkout, #order-confirmation) #wrapper .cart-summary-line :is(.label, .value) {
  color: var(--mf-couleurs-encre, #141414);
  font-size: 15px;
}
:where(#cart, #checkout, #order-confirmation) #wrapper .cart-summary-line .label {
  color: var(--mf-couleurs-texte, #444444);
}
:where(#cart, #checkout, #order-confirmation) #wrapper .cart-summary-line .value {
  font-weight: 700;
}
:where(#cart, #checkout, #order-confirmation) #wrapper .cart-summary-line.cart-total :is(.label, .value) {
  color: var(--mf-couleurs-encre, #141414);
  font-size: 18px;
  font-weight: 800;
}
:where(#cart, #checkout) #wrapper :is(.card-block.cart-detailed-subtotals + .cart-summary-totals .cart-total, .cart-summary-subtotals-container) {
  border-color: var(--mf-couleurs-bordure, #e6e6e4);
}
:where(#cart, #checkout) #wrapper .cart-summary-line .label .code {
  color: var(--mf-couleurs-encre, #141414);
  font-weight: 700;
}

/* Code promo : lien « Vous avez un code promo ? », champ et bouton côte à côte. */
:where(#cart, #checkout) #wrapper .block-promo :is(.promo-code-button a, .cancel-promo, .promo-name .cart-summary-line .label) {
  color: var(--mf-couleurs-encre, #141414);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}
:where(#cart, #checkout) #wrapper .block-promo .promo-code form {
  display: flex;
  gap: 8px;
}
:where(#cart, #checkout) #wrapper .block-promo .promo-input {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  height: auto;
  margin: 0;
  text-indent: 0;
}
:where(#cart, #checkout) #wrapper .block-promo .promo-input + button {
  flex: 0 0 auto;
  margin: 0;
  border: 1.5px solid var(--mf-couleurs-encre, #141414);
}
:where(#cart, #checkout) #wrapper .block-promo .promo-code {
  padding: 16px 0;
}
:where(#cart, #checkout) #wrapper .block-promo .promo-highlighted {
  color: var(--mf-couleurs-texte, #444444);
}

/* =================================================================
 * Tunnel de commande (#checkout)
 *
 * Fond doux, une carte blanche par étape, le résumé du panier dans une
 * carte à droite. Sélecteurs « body#checkout section.checkout-step … » :
 * ceux de classic, à spécificité égale, que cette feuille (chargée après)
 * remplace.
 * ================================================================= */

body#checkout #wrapper {
  background: var(--mf-couleurs-fond-doux, #f3f3f1);
}
body#checkout section#content {
  margin-bottom: 48px;
}

/* -------------------------------------------------------------- étapes */
body#checkout section.checkout-step {
  margin-bottom: 12px;
  padding: 20px 24px;
  border: 1px solid var(--mf-couleurs-bordure, #e6e6e4);
  border-radius: var(--mf-formes-rayon, 4px);
  background-color: var(--mf-couleurs-fond, #ffffff);
}
body#checkout section.checkout-step .step-title {
  padding-bottom: 0;
  border-bottom: 0;
  color: var(--mf-couleurs-encre, #141414);
  font-size: 20px;
  font-weight: var(--mf-typo-graisse-titres, 800);
  line-height: 33px; /* hauteur de la pastille du numéro d'étape */
  text-transform: none;
  letter-spacing: -0.01em;
}
/* Classic retire la bordure de la dernière étape (étapes d'un seul bloc). */
body#checkout section.checkout-step:last-child {
  border: 1px solid var(--mf-couleurs-bordure, #e6e6e4);
}
body#checkout section.checkout-step.-current .step-title {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--mf-couleurs-bordure, #e6e6e4);
}
body#checkout section.checkout-step.-current + .checkout-step .step-title {
  padding-top: 0;
  border-top: 0;
}
body#checkout section.checkout-step.-complete:first-of-type .step-title {
  padding-top: 0;
}
/* Numéro d'étape : pastille contour, pleine pour l'étape en cours
   (classic : vert #00c062) ; coche des étapes faites à l'encre (classic :
   vert #4cbb6c). */
body#checkout section.checkout-step .step-number {
  box-sizing: border-box;
  border: 1.5px solid var(--mf-couleurs-encre, #141414);
  border-radius: 50%;
  color: var(--mf-couleurs-encre, #141414);
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
}
body#checkout section.checkout-step.-reachable.-current .step-number {
  border: 1.5px solid var(--mf-couleurs-encre, #141414);
  background-color: var(--mf-couleurs-encre, #141414);
  color: var(--mf-couleurs-fond, #ffffff);
}
body#checkout section.checkout-step .done {
  color: var(--mf-couleurs-encre, #141414);
}
body#checkout section.checkout-step.-reachable.-complete h1 .step-edit {
  color: var(--mf-couleurs-texte-doux, #6b6b6b);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
}
body#checkout section.checkout-step.-reachable.-complete h1 .step-edit:hover {
  color: var(--mf-couleurs-encre, #141414);
  text-decoration: underline;
}
body#checkout section.checkout-step .content {
  padding: 20px 8px 4px;
}
body#checkout section.checkout-step small {
  color: var(--mf-couleurs-texte-doux, #6b6b6b);
}

/* Onglets « Commander en tant qu'invité | Connexion ». */
body#checkout section.checkout-step .nav-inline .nav-link {
  color: var(--mf-couleurs-texte-doux, #6b6b6b);
  font-weight: 700;
}
body#checkout section.checkout-step .nav-inline .nav-link.active {
  color: var(--mf-couleurs-encre, #141414);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.35em;
}
body#checkout section.checkout-step .nav-inline .nav-separator {
  color: var(--mf-couleurs-bordure, #e6e6e4);
}

/* Adresses enregistrées : carte choisie bordée d'encre (classic : bleu). */
body#checkout section.checkout-step .address-item {
  border: 1.5px solid var(--mf-couleurs-bordure, #e6e6e4);
  border-radius: var(--mf-formes-rayon, 4px);
  background: var(--mf-couleurs-fond, #ffffff);
}
body#checkout section.checkout-step .address-item.selected {
  border: 1.5px solid var(--mf-couleurs-encre, #141414);
  background: var(--mf-couleurs-fond, #ffffff);
}
body#checkout section.checkout-step :is(.delete-address, .edit-address, .add-address a, .cancel-address) {
  color: var(--mf-couleurs-encre, #141414);
  font-weight: 600;
}

/* Modes de livraison : lignes natives en cartes, la ligne choisie bordée
   d'encre. Le bloc de metfi_shipping_ux (.shipux-*) garde ses styles. */
body#checkout section.checkout-step .delivery-options .delivery-option {
  border: 1.5px solid var(--mf-couleurs-bordure, #e6e6e4);
  border-radius: var(--mf-formes-rayon, 4px);
  background: var(--mf-couleurs-fond, #ffffff);
}
body#checkout section.checkout-step .delivery-options .delivery-option:has(input[type="radio"]:checked) {
  border-color: var(--mf-couleurs-encre, #141414);
}
body#checkout section.checkout-step .delivery-options .delivery-option :is(.carrier-name, .carrier-price) {
  color: var(--mf-couleurs-encre, #141414);
  font-weight: 700;
}
body#checkout section.checkout-step .delivery-options .delivery-option .carrier-delay {
  color: var(--mf-couleurs-texte, #444444);
}
body#checkout #delivery label {
  color: var(--mf-couleurs-texte, #444444);
  font-size: 14px;
}
body#checkout #delivery textarea {
  box-sizing: border-box;
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--mf-couleurs-encre, #141414);
  border-radius: var(--mf-formes-rayon, 4px);
  font-family: inherit;
  font-size: 16px;
}
body#checkout #delivery textarea:focus {
  outline: none;
  box-shadow: 0 0 0 1px var(--mf-couleurs-encre, #141414);
}

/* Moyens de paiement : chaque option en carte, l'option choisie bordée
   d'encre. Formulaires et boutons de PS Checkout (sous l'option) intacts. */
body#checkout section.checkout-step .payment-options .payment-option {
  margin-bottom: 8px;
  padding: 12px 16px;
  border: 1.5px solid var(--mf-couleurs-bordure, #e6e6e4);
  border-radius: var(--mf-formes-rayon, 4px);
  background: var(--mf-couleurs-fond, #ffffff);
}
body#checkout section.checkout-step .payment-options .payment-option:has(input[type="radio"]:checked) {
  border-color: var(--mf-couleurs-encre, #141414);
}
body#checkout section.checkout-step .payment-options .payment-option label {
  color: var(--mf-couleurs-encre, #141414);
  font-size: 15px;
  font-weight: 700;
}
body#checkout section.checkout-step #conditions-to-approve {
  padding-top: 16px;
}
body#checkout .condition-label label {
  color: var(--mf-couleurs-texte, #444444);
  font-size: 15px;
}
body#checkout #payment-confirmation {
  margin-top: 8px;
}

/* -------------------------------------------- résumé du panier (droite) */
body#checkout .cart-grid-right #js-checkout-summary {
  padding: 20px 24px;
  border: 1px solid var(--mf-couleurs-bordure, #e6e6e4);
  border-radius: var(--mf-formes-rayon, 4px);
  background: var(--mf-couleurs-fond, #ffffff);
}
body#checkout .cart-grid-right #js-checkout-summary .card-block {
  padding-left: 0;
  padding-right: 0;
}
body#checkout .cart-grid-right .card .cart-summary-subtotals-container {
  border-top-color: var(--mf-couleurs-bordure, #e6e6e4);
  border-bottom-color: var(--mf-couleurs-bordure, #e6e6e4);
}
body#checkout .cart-grid-right .card .cart-summary-subtotals-container .cart-summary-line .value {
  font-weight: 700;
}
body#checkout .cart-summary-products :is(p, a) {
  color: var(--mf-couleurs-encre, #141414);
  font-weight: 600;
}
body#checkout #cart-summary-product-list img {
  border: 0;
  border-radius: var(--mf-formes-rayon, 4px);
  background: var(--mf-couleurs-fond-doux, #f3f3f1);
}

/* ------------------------------------------- en-tête et pied du tunnel
 * Le tunnel garde l'en-tête de classic (checkout/_partials/header.tpl) : logo
 * de la boutique, lien de contact (displayNav1) et, sur mobile, menu,
 * connexion et panier d'en-tête (displayNav2). Rhabillé ici : filet au lieu
 * de l'ombre, logo à la hauteur de celui du thème, liens à l'encre.
 */
body#checkout #header {
  border-bottom: 1px solid var(--mf-couleurs-bordure, #e6e6e4);
  background: var(--mf-couleurs-fond, #ffffff);
  color: var(--mf-couleurs-encre, #141414);
  box-shadow: none;
}
body#checkout #header .header-nav {
  border-bottom: 0;
}
body#checkout #header a,
body#checkout #header .material-icons {
  color: var(--mf-couleurs-encre, #141414);
}
body#checkout #header a:is(:hover, :focus) {
  color: var(--mf-nuance-encre-adoucie, #555555);
}
body#checkout #header #contact-link a {
  font-size: 15px;
  font-weight: 600;
}
body#checkout #header .header-nav .logo {
  width: auto;
  max-height: none;
  height: 40px;
}
@media (min-width: 768px) {
  /* Logo et lien de contact sur la même ligne, centrés en hauteur. */
  body#checkout #header .header-nav .row {
    display: flex;
    align-items: center;
    min-height: 72px;
  }
  body#checkout #header .header-nav #_desktop_contact_link #contact-link {
    margin-top: 0;
  }
}
/* Panier d'en-tête du thème (modules/ps_shoppingcart/ps_shoppingcart.tpl)
   affiché par displayNav2 : classic stylise ce hook en pavé gris de 3 rem
   (#header .header-nav .blockcart), et colore ses liens en gris puis en bleu. */
body#checkout #header .header-nav .blockcart.mf-panier {
  height: auto;
  margin: 0;
  padding: 0;
  background: transparent;
}
body#checkout #header .header-nav .blockcart.mf-panier a,
body#checkout #header .header-nav .blockcart.mf-panier a:is(:hover, :focus) {
  color: var(--mf-couleurs-encre, #141414);
}
/* Menu mobile de classic (ps_mainmenu), déplié par l'icône du menu. */
body#checkout #mobile_top_menu_wrapper .top-menu a[data-depth="0"] {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 16px;
  border-bottom: 1px solid var(--mf-couleurs-bordure, #e6e6e4);
  color: var(--mf-couleurs-encre, #141414);
  font-size: 17px;
  font-weight: 700;
  text-transform: none;
}
body#checkout #mobile_top_menu_wrapper .top-menu a:is(:hover, :focus),
body#checkout #mobile_top_menu_wrapper .js-top-menu-bottom a {
  color: var(--mf-couleurs-encre, #141414);
}
body#checkout #mobile_top_menu_wrapper .js-top-menu-bottom #contact-link {
  padding: 12px 16px;
  font-weight: 600;
}

/*
 * Sur mobile (classic : .hidden-md-up sous 768 px), les éléments de
 * displayNav2 et de l'en-tête s'empilent : le panier du thème, en bloc,
 * repousse l'icône du menu, la connexion et le logo (70 px de haut) sous
 * lui. Remis sur une ligne de 60 px comme l'en-tête mobile du thème : menu à
 * gauche, logo au centre, connexion puis panier à droite. Zones tactiles de
 * 48 px (charte : 48 à 54 px sur mobile).
 */
@media (max-width: 767.98px) {
  body#checkout #header .header-nav .container {
    padding: 0;
  }
  body#checkout #header .header-nav .row {
    margin: 0;
  }
  body#checkout #header .header-nav .mobile {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    min-height: 60px;
    padding: 0 8px;
  }
  body#checkout #header .header-nav .mobile > * {
    float: none;
  }
  body#checkout #header .header-nav .mobile > .clearfix {
    display: none;
  }
  body#checkout #header .header-nav #menu-icon {
    display: flex;
    order: 1;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin: 0;
  }
  body#checkout #header .header-nav #menu-icon .material-icons {
    line-height: 1;
  }
  body#checkout #header .header-nav #_mobile_logo {
    display: flex;
    order: 2;
    flex: 1 1 auto;
    justify-content: center;
    min-width: 0;
  }
  body#checkout #header .header-nav #_mobile_logo .logo {
    height: 30px;
  }
  body#checkout #header .header-nav #_mobile_user_info {
    order: 3;
  }
  body#checkout #header .header-nav #_mobile_user_info .user-info {
    margin: 0;
  }
  body#checkout #header .header-nav #_mobile_user_info .user-info a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
  }
  body#checkout #header .header-nav .mf-panier-entete {
    order: 4;
  }
  /* Bande de displayTop : vide dans le tunnel (classic y masque la
     recherche) mais gardée, elle porte le menu déplié ; sans ses 20 px de
     marge haute et basse. */
  body#checkout #header .header-top {
    padding: 0;
  }
}

body#checkout #footer {
  padding: 24px 16px;
  background: var(--mf-couleurs-fond-doux, #f3f3f1);
  color: var(--mf-couleurs-texte-doux, #6b6b6b);
  font-size: 13px;
}
body#checkout #footer a {
  color: var(--mf-couleurs-texte-doux, #6b6b6b);
}

/* =================================================================
 * Compte client, connexion, création de compte, mot de passe oublié
 * ================================================================= */

.page-customer-account #wrapper #content {
  padding: 0;
  background: transparent;
}
.page-customer-account #wrapper #content :is(.forgot-password, .no-account) {
  font-size: 15px;
}
.page-customer-account #wrapper .page-footer .account-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  color: var(--mf-couleurs-encre, #141414);
  font-weight: 700;
}
/* Tuiles de « Mon compte » : icône et libellé à l'encre (classic : bleu au survol). */
.page-my-account #wrapper #content .links a,
.page-my-account #wrapper #content .links a:hover i,
#wrapper .account-list a:hover {
  color: var(--mf-couleurs-encre, #141414);
}
.page-my-account #wrapper #content .links a .link-item {
  border-radius: var(--mf-formes-rayon, 4px);
  background: var(--mf-couleurs-fond-doux, #f3f3f1);
  font-weight: 700;
  text-transform: none;
}
/* Mot de passe oublié : champ et bouton d'envoi côte à côte (classic), un
   peu d'écart entre les deux. */
.page-password #wrapper .center-email-fields .form-control-submit {
  margin-left: 8px;
}
.page-addresses #wrapper .address,
.page-order-detail #wrapper .box,
#history #wrapper .orders .order {
  border-radius: var(--mf-formes-rayon, 4px);
}
.page-addresses #wrapper .address .address-footer {
  border-top-color: var(--mf-couleurs-bordure, #e6e6e4);
}

/* =================================================================
 * Pages CMS, plan du site, contact
 * ================================================================= */

/* Texte des pages CMS : largeur de lecture, aligné à gauche (classic :
   justifié, qui creuse des trous sur mobile). */
#cms #wrapper .page-content.page-cms {
  max-width: 820px;
  padding: 0;
  background: transparent;
  text-align: left;
}
#cms #wrapper .page-content.page-cms :is(p, li) {
  font-size: 16px;
  line-height: 1.7;
}
#cms #wrapper .page-content.page-cms :is(h2, .h2) {
  margin: 32px 0 12px;
  font-size: 24px;
  line-height: 1.25;
}
#cms #wrapper .page-content.page-cms :is(h3, .h3, h4, .h4) {
  margin: 24px 0 8px;
  font-size: 19px;
  line-height: 1.3;
}
#cms #wrapper .page-content.page-cms > :first-child {
  margin-top: 0;
}

#sitemap #wrapper .sitemap :is(h2, .h2) {
  font-size: 20px;
}
/* Classic : « Plan Du Site », chaque mot capitalisé. */
#sitemap #wrapper .sitemap-title {
  text-transform: none;
}

/* Contact : bloc d'informations (ps_contactinfo) et formulaire (contactform). */
#contact #wrapper .contact-rich :is(h4, .h4) {
  font-size: 20px;
}
#contact #wrapper .contact-rich :is(.icon .material-icons, .block .icon i) {
  color: var(--mf-couleurs-encre, #141414);
}
#contact #wrapper .contact-rich hr {
  border-top-color: var(--mf-couleurs-bordure, #e6e6e4);
}
#contact #wrapper .contact-rich :is(.data, .data a) {
  color: var(--mf-couleurs-texte, #444444);
  font-size: 15px;
}
#contact #wrapper .contact-form :is(h3, .h3) {
  margin-bottom: 24px;
  font-size: 28px;
  letter-spacing: -0.02em;
}

/* ------------------------------------------------------------- mobile */
@media (max-width: 767.98px) {
  :where(#cart, #checkout, #order-confirmation, #cms, #contact, #sitemap, .page-customer-account) #wrapper :is(.btn-primary, .btn-secondary, .btn-tertiary, .btn-outline-primary, .btn-outline-secondary) {
    min-height: var(--mf-formes-hauteur-bouton-mobile, 52px);
    padding-top: calc((var(--mf-formes-hauteur-bouton-mobile, 52px) - 27px) / 2);
    padding-bottom: calc((var(--mf-formes-hauteur-bouton-mobile, 52px) - 27px) / 2);
  }
  :where(#cart, #checkout, #order-confirmation, #cms, #contact, #sitemap, .page-customer-account) #wrapper :is(.form-control, .custom-select, .promo-input),
  :where(#cart, #checkout, #order-confirmation, #cms, #contact, #sitemap, .page-customer-account) #wrapper .input-group .input-group-btn > .btn,
  :where(#cart, #checkout, #order-confirmation, #cms, #contact, #sitemap, .page-customer-account) #wrapper .group-span-filestyle .btn-default {
    min-height: var(--mf-formes-hauteur-bouton-mobile, 52px);
  }
  :where(#cart, #order-confirmation, #cms, #contact, #sitemap, .page-customer-account) #wrapper :is(.page-header h1, .cart-container > .card-block > h1, .card-title.h1) {
    margin-bottom: 16px;
    font-size: 28px;
  }
  :where(#cart, #order-confirmation, #cms, #contact, #sitemap, .page-customer-account) #header:has(.mf-entete) ~ #wrapper {
    padding-bottom: 48px;
  }
  #cart #wrapper .cart-grid-right .cart-summary {
    padding: 20px;
  }
  /* Quantité : zone tactile mobile (48 px) pour les boutons − et +. */
  #cart #wrapper .bootstrap-touchspin input.form-control,
  #cart #wrapper .bootstrap-touchspin input.form-control:focus {
    height: var(--mf-zone-tactile-mobile, 48px);
  }
  #cart #wrapper .bootstrap-touchspin .btn-touchspin {
    width: var(--mf-zone-tactile-mobile, 48px);
    height: var(--mf-zone-tactile-mobile, 48px);
  }
  /* Bouton de validation du paiement : toute la largeur, sous le pouce. */
  body#checkout #payment-confirmation .btn-primary {
    width: 100%;
  }
  body#checkout section.checkout-step {
    padding: 16px;
  }
  body#checkout section.checkout-step .step-title {
    font-size: 18px;
  }
  body#checkout section.checkout-step .content {
    padding: 16px 0 0;
  }
  body#checkout .cart-grid-right #js-checkout-summary {
    padding: 16px;
  }
  /* Mot de passe oublié : bouton sous le champ, à sa largeur. */
  .page-password #wrapper .center-email-fields .form-control-label {
    text-align: left;
  }
  .page-password #wrapper .center-email-fields .form-control-submit {
    display: block;
    width: auto;
    margin: 12px 15px 0;
  }
  #cms #wrapper .page-content.page-cms :is(h2, .h2) {
    font-size: 21px;
  }
  #contact #wrapper .contact-form :is(h3, .h3) {
    font-size: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :where(#cart, #checkout, #order-confirmation, #cms, #contact, #sitemap, .page-customer-account) #wrapper :is(.btn-primary, .btn-secondary, .btn-tertiary, .btn-outline-primary, .btn-outline-secondary) {
    transition: none;
  }
}