@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,400&family=Outfit:wght@200;300;400;500&display=swap');
.em-cart-global {
/* Palette alignée sur front-page.css (DA v4 noir/or du site) */
--or: #FFD050; /* or vif — prix, accents, total */
--or2: #E09820; /* or profond — hover boutons pill */
--or3: #FFD050; /* or vif — soulignés / puces */
--or-bd: rgba(224,152,32,0.28);
--f0: #FFD050; /* fond des boutons pill (doré) */
--f1: #1E1710; /* surface élevée sur fond noir (vignettes, pastilles) */
--f2: rgba(224,152,32,0.20); /* bordures discrètes sur fond noir */
--f3: rgba(224,152,32,0.35); /* bordures inputs */
--e0: #0E0B06; /* fond de page + texte sur boutons dorés */
--e1: #FDFAF5; /* texte principal (ivoire) */
--e2: #FDFAF5; /* texte boutons − + */
--e4: rgba(253,250,245,0.68); /* texte secondaire */
--e5: rgba(253,250,245,0.45); /* texte tertiaire / placeholders */
--card: #17130D; /* fond des cards (identique .emh-card) */
--card-bd: rgba(224,152,32,0.42); /* contour des cards produits — plus visible que --f2 */
--rouge: #FF6B5E;
--rouge-bg: rgba(255,107,94,0.14);
--serif: 'Cormorant Garamond', Georgia, serif;
--sans: 'Outfit', system-ui, sans-serif;
--ease: cubic-bezier(0.16,1,0.3,1);
--pill: 50px;
background: var(--e0);
font-family: var(--sans);
color: var(--e1);
min-height: 100vh;
}
/* ════ FOND NOIR PLEINE PAGE ════
Le thème applique un fond clair (--f0, cream) à par défaut
(style.css global). Le widget .em-cart-global ne colore que sa
propre boîte, imbriquée dans le container Elementor "boxed" — d'où
la bande claire visible de part et d'autre. On force le noir sur
/ pour cette page uniquement (ce fichier n'est chargé
que sur is_cart()). */
html, body.woocommerce-cart {
background: #0E0B06 !important;
min-height: 100vh;
}
/* ════ BARRE DE PROGRESSION DE LECTURE (#pbar) — masquée sur le panier ════
#pbar est fixée en haut de tout l'écran (position:fixed, top:0, left:0)
et se remplit selon le scroll de la page — pertinent sur un article long,
mais sans rapport ici, et facilement confondue avec un élément cassé du
bloc "Total panier" quand celui-ci se trouve en haut de la fenêtre au
moment du scroll. Le panier a déjà son propre repère de progression
(l'indicateur d'étapes 1-2-3) : #pbar est donc redondante ici. */
body.woocommerce-cart #pbar {
display: none !important;
}
/* (Le correctif de cohérence d'or du header, initialement scopé ici à
body.woocommerce-cart uniquement, a été généralisé directement dans
style.css — le header étant partagé par toutes les pages, dont la page
d'accueil, le limiter au panier laissait le même défaut visible
ailleurs. Devenu redondant, retiré d'ici le 2026-08-07.) */
/* ════ HEADER ════ */
.em-cart-header { text-align:center; padding:44px 24px 0; }
.em-cart-header .eyebrow {
display:block; font-size:9px; letter-spacing:.35em;
text-transform:uppercase; color:var(--e5); margin-bottom:8px;
}
.em-cart-header h1 {
font-family:var(--serif); font-size:clamp(1.8rem,4vw,2.8rem);
font-weight:500; color:var(--e1); margin:0 0 14px;
}
.em-cart-header h1::after {
content:''; display:block; width:80px; height:1px;
margin:14px auto 0;
background:linear-gradient(to right,transparent,var(--or3),transparent);
}
.em-cart-divider { display:flex; align-items:center; gap:14px; justify-content:center; margin-top:20px; }
.em-cart-divider span { flex:1; max-width:60px; height:.5px; background:linear-gradient(90deg,transparent,var(--or-bd)); }
.em-cart-divider span:last-child { background:linear-gradient(270deg,transparent,var(--or-bd)); }
.em-cart-divider i { width:5px; height:5px; background:var(--or3); transform:rotate(45deg); flex-shrink:0; display:block; }
/* ════ LAYOUT ════ */
.em-cart-layout { max-width:560px; margin:auto; padding:28px 16px 72px; }
/* ════ INDICATEUR D'ÉTAPES ════ */
.em-cart-global .em-steps {
display:flex; align-items:center; justify-content:center;
gap:8px; list-style:none; margin:0 0 28px; padding:0;
font-family:var(--sans);
}
.em-cart-global .em-step {
display:flex; align-items:center; gap:7px;
font-size:11px; letter-spacing:.06em; color:var(--e5);
}
.em-cart-global .em-step-num {
display:flex; align-items:center; justify-content:center;
width:20px; height:20px; border-radius:50%;
border:1px solid var(--f3); font-size:10px; color:var(--e4);
flex-shrink:0;
}
.em-cart-global .em-step.is-active { color:var(--e1); }
.em-cart-global .em-step.is-active .em-step-num {
background:var(--f0); border-color:var(--f0); color:var(--e0); font-weight:600;
}
.em-cart-global .em-step-arrow { color:var(--e5); font-size:13px; }
@media (max-width:480px) {
.em-cart-global .em-step-label { display:none; }
.em-cart-global .em-steps { gap:6px; }
}
/* ════ PANIER VIDE ════ */
.em-cart-global .cart-empty.woocommerce-info,
.em-cart-global .wc-empty-cart-message {
text-align:center !important; font-family:var(--serif) !important;
font-size:18px !important; font-style:italic !important;
color:var(--e4) !important; background:none !important;
border:none !important; padding:30px 0 10px !important;
margin:0 !important; box-shadow:none !important;
}
.em-cart-global .cart-empty.woocommerce-info::before { display:none !important; }
.em-cart-global .return-to-shop { text-align:center !important; margin:20px 0 40px !important; }
.em-cart-global .return-to-shop a,
.em-cart-global a.button.wc-backward {
display:inline-block !important; font-family:var(--sans) !important;
font-size:11px !important; letter-spacing:.18em !important;
text-transform:uppercase !important; color:var(--e0) !important;
background:var(--f0) !important; border:none !important;
border-radius:var(--pill) !important; padding:14px 36px !important;
text-decoration:none !important; transition:all .4s var(--ease) !important;
box-shadow:0 8px 24px rgba(224,152,32,.22) !important;
}
.em-cart-global .return-to-shop a:hover { transform:translateY(-2px); box-shadow:0 10px 30px rgba(224,152,32,.32) !important; }
/* ════ SUGGESTIONS ════ */
#em-cart-suggestions { margin-top:56px; text-align:center; }
#em-cart-suggestions h3 { font-family:var(--serif); font-weight:500; font-size:22px; color:var(--e1); margin-bottom:0; }
#em-cart-suggestions h3::after {
content:''; display:block; width:50px; height:1px;
margin:10px auto 24px;
background:linear-gradient(to right,transparent,var(--or3),transparent);
}
.em-sg { display:grid; grid-template-columns:1fr 1fr; gap:12px; max-width:600px; margin:0 auto; }
.em-sg--single { grid-template-columns:1fr; max-width:400px; }
/* Ombre douce permanente (avant : uniquement au survol) — la card se
détache légèrement du fond noir au lieu d'être posée à plat, cohérent
avec les autres cards du site (ex. cards produit : box-shadow 0 1px 4px
rgba(0,0,0,.35)). */
.em-sc {
/* 22px / 14px (vignette) : même arrondi que les cards cross-sell des
fiches produit — cohérence sitewide, 2026-08-08. */
background:var(--card); border:1px solid var(--f2); border-radius:22px;
padding:18px 16px; text-align:center; transition:all .3s var(--ease);
box-shadow:0 4px 18px rgba(0,0,0,.3);
}
.em-sc:hover { border-color:var(--or2); transform:translateY(-3px); box-shadow:0 10px 28px rgba(224,152,32,.18); }
.em-sc-thumb {
width:84px; height:100px; margin:0 auto 12px; border-radius:14px;
background:var(--f1); border:1px solid var(--card-bd); overflow:hidden;
display:flex; align-items:center; justify-content:center;
flex-shrink:0;
}
.em-sc-thumb img { width:100%; height:100%; object-fit:contain; object-position:center; padding:4px; box-sizing:border-box; }
.em-sc h4 { font-family:var(--serif); font-weight:500; font-size:15px; color:var(--e1); margin-bottom:5px; }
.em-sc .em-pr { font-size:13px; color:var(--e4); margin-bottom:3px; }
.em-sc .em-pr strong { color:var(--e1); font-weight:500; }
.em-sc .em-pr del { color:var(--e5); font-size:11px; }
.em-sc .em-pg { font-size:10px; color:var(--e5); letter-spacing:.06em; margin-bottom:12px; }
.em-sc a.em-btn {
display:inline-block; font-family:var(--sans); font-size:9px;
letter-spacing:.18em; text-transform:uppercase; color:var(--e0);
background:var(--f0); padding:9px 18px; border-radius:var(--pill);
text-decoration:none; transition:all .3s var(--ease);
}
.em-sc a.em-btn:hover { transform:translateY(-2px); box-shadow:0 6px 18px rgba(224,152,32,.3); }
/* Suggestion unique (panier NON vide, "Vous pourriez aussi aimer") :
layout horizontal (vignette à gauche, texte à droite) plutôt que la
même mise en page verticale que la grille 2×2 du panier vide — évite le
rendu "petite card perdue au milieu de la page". Le nombre de
suggestions reste volontairement à 1 (recommandation contextuelle
précise basée sur le contenu réel du panier, cf. functions.php) : on
ne le change pas, seule la présentation change. */
.em-sg--single .em-sc {
display:flex; align-items:center; gap:16px; text-align:left; padding:16px;
}
.em-sg--single .em-sc-thumb { margin:0; }
.em-sg--single .em-sc h4,
.em-sg--single .em-sc .em-pr,
.em-sg--single .em-sc .em-pg { margin-bottom:4px; }
.em-sg--single .em-sc a.em-btn {
margin-top:2px;
/* CTA secondaire : contour discret plutôt que le remplissage doré plein
du CTA principal "Finaliser ma commande" — un produit complémentaire
ne doit pas concurrencer visuellement l'action principale. */
background:transparent; color:var(--or3);
border:1px solid var(--or-bd);
}
.em-sg--single .em-sc a.em-btn:hover {
background:rgba(224,152,32,.1); border-color:var(--or2); box-shadow:none;
}
@media (max-width:480px) {
.em-sg--single .em-sc { flex-direction:column; text-align:center; }
}
.em-sep { width:40px; height:1px; margin:36px auto 0; background:linear-gradient(to right,transparent,var(--or-bd),transparent); }
/* ════ TABLEAU → CARDS ════ */
.em-cart-global table.shop_table {
border:none !important; border-collapse:separate !important;
border-spacing:0 8px !important; width:100% !important;
background:transparent !important;
}
.em-cart-global table.shop_table thead { display:none !important; }
.em-cart-global table.shop_table tbody tr {
/* 22px : même arrondi que les autres cards du site (cross-sell,
accueil) — cohérence sitewide, 2026-08-08. */
background:var(--card) !important; border-radius:22px !important;
box-shadow:0 1px 4px rgba(0,0,0,.35) !important;
display:grid !important;
grid-template-columns:108px 1fr auto !important;
grid-template-rows:auto auto !important;
align-items:center !important;
margin-bottom:10px !important;
overflow:hidden !important;
border:1px solid var(--card-bd) !important;
}
.em-cart-global table.shop_table tbody td {
border:none !important; background:transparent !important;
padding:0 !important; font-size:14px !important; vertical-align:middle !important;
}
/* Bouton × */
.em-cart-global table.shop_table td.product-remove {
grid-column:3 !important; grid-row:1 !important;
display:flex !important; align-items:center !important;
/* 16px : même inset que le bord haut/gauche de la vignette juste à côté
(uniformisation des paddings de bord de card). */
justify-content:center !important; padding:16px 16px 0 0 !important;
}
.em-cart-global table.shop_table td.product-remove a.remove {
width:26px !important; height:26px !important; border-radius:50% !important;
background:var(--f1) !important; display:flex !important;
align-items:center !important; justify-content:center !important;
font-size:14px !important; color:var(--e5) !important;
text-decoration:none !important; transition:background .2s,color .2s !important;
}
.em-cart-global table.shop_table td.product-remove a.remove:hover {
background:var(--rouge-bg) !important; color:var(--rouge) !important;
}
/* Image */
.em-cart-global table.shop_table td.product-thumbnail {
grid-column:1 !important; grid-row:1 / 3 !important;
padding:16px !important; display:flex !important;
align-items:center !important; justify-content:center !important;
}
.em-cart-global table.shop_table td.product-thumbnail a {
display:flex !important; align-items:center !important; justify-content:center !important;
width:84px !important; height:100px !important;
background:var(--f1) !important; border-radius:14px !important;
overflow:hidden !important; border:1px solid var(--card-bd) !important;
}
.em-cart-global table.shop_table td.product-thumbnail img {
width:100% !important; height:100% !important;
object-fit:contain !important; object-position:center !important;
padding:4px !important; box-sizing:border-box !important;
border:none !important; border-radius:0 !important;
display:block !important; margin:0 !important; max-width:unset !important;
}
/* Nom */
.em-cart-global table.shop_table td.product-name {
grid-column:2 !important; grid-row:1 !important;
padding:16px 8px 4px 4px !important;
display:flex !important; flex-direction:column !important;
}
.em-cart-global table.shop_table td.product-name a {
font-family:var(--sans) !important; font-weight:500 !important;
font-size:14px !important; color:var(--e1) !important;
text-decoration:none !important; line-height:1.35 !important;
}
.em-cart-global table.shop_table td.product-name a:hover { color:var(--or) !important; }
.em-cart-global table.shop_table td.product-name .variation,
.em-cart-global table.shop_table .product-price,
.em-cart-global table.shop_table .product-subtotal { display:none !important; }
/* Rappel du format (PDF numérique) sous le nom du produit */
.em-cart-global table.shop_table td.product-name .em-fmt-badge {
display:inline-flex !important; align-items:center !important; gap:4px !important;
font-family:var(--sans) !important; font-size:10px !important;
letter-spacing:.04em !important; color:var(--e5) !important;
margin-top:3px !important;
}
.em-cart-global table.shop_table td.product-name .em-fmt-badge svg { flex-shrink:0; opacity:.8; }
/* Quantité + prix */
.em-cart-global table.shop_table td.product-quantity {
grid-column:2 !important; grid-row:2 !important;
padding:0 8px 16px 4px !important;
display:flex !important; align-items:center !important; gap:12px !important;
}
/* Sélecteur de quantité retiré : ebooks PDF vendus à l'unité (produit
"vendu individuellement" côté WooCommerce → input quantité déjà en
type="hidden" nativement). On masque explicitement au cas où, en
garde-fou. */
.em-cart-global table.shop_table .quantity { display:none !important; }
/* Prix dans la card */
.em-cart-global .em-item-price {
font-family:var(--serif) !important; font-size:16px !important;
font-weight:400 !important; color:var(--or) !important;
margin-left:auto !important; padding-right:14px !important;
}
.em-cart-global .em-item-price del { font-size:12px !important; color:var(--e5) !important; margin-right:4px !important; }
/* ════ COUPON ════ */
.em-cart-global .actions,
.em-cart-global .coupon {
background:transparent !important; border:none !important; padding:0 !important;
}
.em-cart-global .coupon {
display:flex !important; gap:8px !important; align-items:center !important;
float:none !important; flex-wrap:wrap !important; margin-bottom:8px !important;
}
.em-cart-global .coupon input#coupon_code {
font-family:var(--sans) !important; font-size:16px !important;
border:1px solid var(--f3) !important; background:var(--card) !important;
border-radius:var(--pill) !important; padding:11px 18px !important;
color:var(--e1) !important; outline:none !important; flex:1 !important;
}
/* font-size 16px minimum : évite le zoom automatique iOS Safari au focus */
.em-cart-global .coupon input#coupon_code::placeholder { color:var(--e5) !important; }
.em-cart-global .coupon input#coupon_code:focus { border-color:var(--or) !important; }
.em-cart-global .coupon button {
font-family:var(--sans) !important; font-size:10px !important;
letter-spacing:.16em !important; text-transform:uppercase !important;
color:var(--e1) !important; background:transparent !important;
border:1px solid var(--f3) !important; border-radius:var(--pill) !important;
padding:11px 18px !important; cursor:pointer !important;
white-space:nowrap !important; transition:all .3s var(--ease) !important;
}
.em-cart-global .coupon button:hover { border-color:var(--or) !important; color:var(--or) !important; }
/* Code promo replié par défaut (lien discret) : évite de laisser penser
que le prix affiché n'est pas définitif. */
.em-cart-global .coupon.em-coupon-hidden { display:none !important; }
.em-cart-global .em-coupon-toggle {
display:inline-block !important; background:none !important; border:none !important;
padding:4px 0 !important; margin:0 0 4px !important;
font-family:var(--sans) !important; font-size:12px !important;
color:var(--e4) !important; text-decoration:underline !important;
text-underline-offset:3px !important; cursor:pointer !important;
transition:color .25s var(--ease) !important;
}
.em-cart-global .em-coupon-toggle:hover { color:var(--or) !important; }
/* Message coupon — centré, une ligne */
.em-cart-global .woocommerce-notices-wrapper,
.em-cart-global .woocommerce-error,
.em-cart-global .woocommerce-message,
.em-cart-global .woocommerce-info {
text-align:center !important; font-size:11px !important;
background:transparent !important; border:none !important;
box-shadow:none !important; padding:6px 0 0 !important;
color:var(--e4) !important; list-style:none !important;
}
.em-cart-global .woocommerce-error li { list-style:none !important; }
/* Cache Mettre à jour + sous-total */
.em-cart-global button[name="update_cart"] { display:none !important; }
.em-cart-global .cart_totals .cart-subtotal { display:none !important; }
/* ════ TOTAUX ════ */
.em-cart-global .cart_totals {
/* Respiration "Apple" entre les cards produit et le bloc total —
20px était trop tassé pour marquer une vraie rupture de section. */
margin-top:48px !important; background:transparent !important;
border:none !important; padding:0 !important;
}
.em-cart-global .cart_totals h2 { font-family:var(--serif) !important; font-size:22px !important; font-weight:600 !important; color:var(--e1) !important; margin-bottom:12px !important; }
.em-cart-global .cart_totals table {
border:none !important; background:transparent !important;
width:100% !important; border-radius:0 !important; box-shadow:none !important;
/* border-collapse:separate (pas collapse) : avec collapse, le rendu du
border-radius par cellule est cassé dans la plupart des navigateurs et
laisse échapper un fragment de bordure/fond hors du coin arrondi —
c'est le "reliquat doré" qui débordait en haut à gauche du total. */
border-collapse:separate !important; border-spacing:0 !important;
}
.em-cart-global .cart_totals table th {
font-family:var(--sans) !important; font-size:10px !important;
letter-spacing:.14em !important; text-transform:uppercase !important;
color:var(--e4) !important; padding:14px 0 !important;
border:none !important; border-bottom:1px solid var(--f2) !important;
font-weight:300 !important; background:transparent !important;
}
.em-cart-global .cart_totals table td {
font-family:var(--serif) !important; font-size:17px !important;
color:var(--e1) !important; padding:14px 0 !important;
border:none !important; border-bottom:1px solid var(--f2) !important;
text-align:right !important; background:transparent !important;
}
/* Total final — l'information la plus importante de la page à ce stade.
CAUSE RÉELLE DU BUG (identifiée en inspectant le CSS core WooCommerce
servi en production) : woocommerce.css impose
".cart_totals table th { width:35% }" — jamais neutralisé ici. Le fond,
la bordure et le border-radius étaient posés séparément sur | et
| , deux cellules de tableau adjacentes à largeur FIXE (35% / 65%),
chacune arrondie sur ses 4 coins. Résultat : deux boîtes indépendantes
visuellement distinctes — d'où le décrochement de fond/bordure au
milieu du bloc, et "TOTAL" flottant dans une colonne à 35% bien plus
large que son texte (perçu comme un excès d'espace vide interne).
Fix : la | elle-même devient le SEUL conteneur visuel (fond, bordure,
radius, padding) en display:flex — th/td redeviennent de simples blocs
de texte sans aucune décoration propre, positionnés par
justify-content:space-between. Plus aucune notion de largeur figée à
35/65%, donc plus de coin arrondi "fantôme" au milieu de la card. */
.em-cart-global .cart_totals .order-total {
display:flex !important; align-items:center !important;
justify-content:space-between !important; gap:12px !important;
background:rgba(255,208,80,.09) !important;
border:1px solid var(--or-bd) !important;
padding:18px 16px !important;
overflow:hidden !important;
border-radius:12px !important;
position:relative !important;
}
.em-cart-global .cart_totals .order-total th,
.em-cart-global .cart_totals .order-total td {
background:none !important; border:none !important; border-radius:0 !important;
padding:0 !important; margin:0 !important; width:auto !important;
overflow:visible !important; position:static !important;
}
.em-cart-global .cart_totals .order-total th {
font-size:11px !important; flex-shrink:0 !important;
}
.em-cart-global .cart_totals .order-total td {
/* Le montant doit rester l'information la plus visible de tout le bloc :
taille et poids relevés pour créer un vrai écart hiérarchique avec le
libellé "TOTAL" (11px, discret) juste à côté. */
font-weight:700 !important; font-size:clamp(28px,7.5vw,34px) !important; color:var(--or) !important;
}
/* ════ BOUTON COMMANDER ════ */
.em-cart-global .wc-proceed-to-checkout {
display:flex !important; flex-direction:column !important; gap:8px !important;
/* Sépare visuellement le cluster CTA du bloc total juste au-dessus —
avant, les widgets de paiement fractionné (#payment-method-message,
.ppcp-messages) collaient directement au bord bas de la card total. */
margin-top:32px !important;
}
.em-cart-global .wc-proceed-to-checkout a.checkout-button,
.em-cart-global a.checkout-button {
display:block !important; width:100% !important; text-align:center !important;
font-family:var(--sans) !important; font-size:15px !important;
font-weight:500 !important;
letter-spacing:.02em !important; text-transform:none !important;
color:var(--e0) !important; background:var(--f0) !important;
border:none !important; border-radius:var(--pill) !important;
padding:17px 32px !important; margin-top:8px !important;
text-decoration:none !important; transition:all .3s var(--ease) !important;
box-shadow:0 6px 20px rgba(224,152,32,.22) !important;
}
.em-cart-global .wc-proceed-to-checkout a.checkout-button:hover,
.em-cart-global .wc-proceed-to-checkout a.checkout-button:focus-visible {
transform:translateY(-3px);
filter:brightness(1.06);
box-shadow:0 14px 36px rgba(224,152,32,.42) !important;
}
.em-cart-global .wc-proceed-to-checkout a.checkout-button:focus-visible {
outline:2px solid var(--or) !important; outline-offset:3px !important;
}
.em-cart-global .wc-proceed-to-checkout a.checkout-button:active {
transform:translateY(-1px);
}
/* Réassurance juste sous le CTA principal — au moment clé de la décision.
Contraste relevé (2026-08-07) : var(--e4)/--e5 étaient trop proches du
fond noir pour un message qui doit rassurer, pas se fondre dans le décor. */
.em-cart-global .em-cart-trust {
display:flex !important; align-items:center !important; justify-content:center !important;
gap:6px !important; font-family:var(--sans) !important; font-size:11.5px !important;
letter-spacing:.03em !important; color:rgba(253,250,245,.82) !important; margin:2px 0 0 !important;
}
.em-cart-global .em-cart-trust svg { color:var(--or); flex-shrink:0; }
.em-cart-global .em-cart-guarantee {
/* .62 → .72 : aligné sur l'opacité déjà utilisée pour .ppcp-messages
juste en dessous, pour un contraste légèrement relevé sans devenir
criard (demande explicite : rester discret). */
text-align:center !important; font-family:var(--serif) !important; font-style:italic !important;
font-size:12.5px !important; color:rgba(253,250,245,.72) !important; margin:2px 0 4px !important;
}
/* Séparateur avant les moyens de paiement secondaires */
.em-cart-global .em-pay-sep {
display:flex !important; align-items:center !important; gap:12px !important;
margin:10px 0 2px !important;
}
.em-cart-global .em-pay-sep span {
flex:1 !important; height:.5px !important; background:var(--f2) !important;
}
.em-cart-global .em-pay-sep em {
font-style:normal !important; font-family:var(--sans) !important; font-size:10px !important;
letter-spacing:.14em !important; text-transform:uppercase !important; color:var(--e5) !important;
white-space:nowrap !important;
}
/* ════ PAYPAL + GPAY ════ */
.em-cart-global .em-express-row {
display:flex !important; gap:8px !important; align-items:center !important; margin-top:0 !important;
}
.em-cart-global .em-express-row > * { flex:1 !important; min-width:0 !important; }
/* Wrappers des boutons de paiement express — pas de fond imposé, les
boutons (PayPal, Amazon Pay, Apple/Google Pay) gardent leur rendu natif
directement sur le fond noir de la page. Pas de height/max-height fixes :
ces boutons (et leur iframe) peuvent avoir besoin de plus de place
(ex. PayPal en layout vertical, messages "Pay Later") — une hauteur
imposée trop petite tronque leur contenu. On ne fixe qu'un plancher
(min-height) et on laisse le reste s'adapter au contenu réel.
min-height/opacity harmonisés avec .em-express-row iframe,button plus
bas (44px/.92 partout — avant, le wrapper visait 44px mais son iframe
interne visait 38px : deux SDK différents (PayPal / Stripe) pouvaient
donc rendre des hauteurs visuellement différentes malgré un wrapper
commun). align-items:center recentre le contenu si l'iframe est plus
petite que le plancher fixé. */
.em-cart-global .ppc-button-wrapper,
.em-cart-global [class*="wcpay-express-checkout"] {
display:flex !important; align-items:center !important; justify-content:center !important;
border-radius:var(--pill) !important;
box-sizing:border-box !important;
min-height:44px !important;
opacity:.92 !important;
}
.em-cart-global #wc-stripe-express-checkout-element {
border-radius:var(--pill) !important;
box-sizing:border-box !important;
}
.em-cart-global .em-express-row iframe,
.em-cart-global .em-express-row button {
width:100% !important; min-height:44px !important; border-radius:var(--pill) !important;
}
/* Texte légal paiement fractionné (PayPal Pay Later "3 versements…" +
Stripe/Klarna "Payez en 4 échéances…") — information secondaire, ne doit
pas concurrencer le total ni le CTA. On borne la taille/couleur/marge du
CONTENEUR ici ; le texte affiché à l'intérieur est injecté par un iframe
du prestataire de paiement (PayPal SDK / Stripe Elements) et son propre
poids de police (souvent gras + blanc par défaut) n'est pas modifiable
depuis notre CSS — seul un réglage dans la config du widget côté
PayPal/Stripe peut changer ça. #payment-method-message n'avait jusqu'ici
aucun style : il héritait du rendu brut, plus lourd visuellement que
.ppcp-messages juste à côté — on aligne les deux. */
.em-cart-global .ppcp-messages,
.em-cart-global #payment-method-message {
font-size:11px !important; color:rgba(253,250,245,.6) !important;
text-align:center !important; margin:0 0 10px !important; line-height:1.5 !important;
}
/* Coupon — décalage vers la droite */
.em-cart-global .coupon {
padding-right: 16px !important;
}
.em-cart-global .actions {
padding-right: 16px !important;
}
/* Actions (coupon) — padding pour ne pas coller au bord */
.em-cart-global table.shop_table td.actions {
grid-column: 1 / -1 !important;
padding: 12px 16px 16px 16px !important;
background: transparent !important;
border: none !important;
}
.em-cart-global table.shop_table tr.cart_item + tr td.actions,
.em-cart-global table.shop_table .actions {
display: block !important;
width: 100% !important;
padding: 12px 16px !important;
}
.em-cart-global .coupon {
padding: 0 !important;
margin: 0 !important;
width: 100% !important;
}
.em-cart-global .coupon input#coupon_code {
max-width: 220px !important;
}
/* (L'ancien padding-right:16px dédié à .order-total td a été retiré : le
padding horizontal de la card "Total" est désormais géré au niveau du
conteneur unique .order-total lui-même, voir plus haut — un padding
résiduel ici casserait le nouvel alignement flex space-between.) */
.em-cart-global .cart_totals table td,
.em-cart-global .cart_totals table th {
padding-right: 16px !important;
}
/* ════ MOBILE ════ */
@media (max-width:640px) {
.em-sg { grid-template-columns:1fr !important; }
.em-express-row { flex-direction:column !important; }
.em-express-row > * { flex:none !important; width:100% !important; }
}