flex (.interva-actions-row, voir wrapCartActions() en JS). */ body.woocommerce-cart .interva-actions-row{ display:flex!important; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:12px 16px; padding-top:8px; width:100%; } body.woocommerce-cart .interva-actions-row .coupon{ flex:1 1 260px; margin:0!important; } body.woocommerce-cart .interva-actions-row button[name="update_cart"]{ flex:0 0 auto; } body.woocommerce-cart .coupon{ display:flex!important; flex-wrap:wrap; gap:8px; } @media (max-width:600px){ body.woocommerce-cart .interva-actions-row{ flex-direction:column; align-items:stretch; } body.woocommerce-cart .interva-actions-row .coupon{ flex:none; width:100%; } body.woocommerce-cart .interva-actions-row button[name="update_cart"]{ width:100%; margin:0!important; float:none!important; } /* .coupon garde flex-wrap:wrap (ligne 239) : le bouton "Appliquer le code promo" (flex:0 0 auto) ne prend que la largeur de son texte une fois passé à la ligne suivante, au lieu de faire la même longueur que le champ texte au-dessus. On force les deux enfants en colonne pleine largeur pour qu'ils matchent exactement. */ body.woocommerce-cart .coupon{ flex-direction:column; align-items:stretch!important; } /* !important obligatoire : la règle de base `.coupon input{flex:1 1 140px}` est PLUS BAS dans le fichier (donc gagnait à spécificité égale) et, en flex-direction:column, ce flex-basis:140px devenait une HAUTEUR — d'où le gros carré. flex:none!important annule la croissance, height:auto rend la hauteur naturelle (~44px), un vrai rectangle long. */ body.woocommerce-cart .coupon input[type="text"], body.woocommerce-cart .coupon #ast-coupon-code, body.woocommerce-cart .coupon .button{ width:100%!important; flex:0 0 auto!important; height:auto!important; margin:0!important; /* le bouton gardait un margin-left:5px du layout en rangée, qui le décalait vs le champ en mode empilé */ } } body.woocommerce-cart .coupon #ast-coupon-code, body.woocommerce-cart .coupon input[type="text"]{ border:1.5px solid var(--iv-framboise)!important; border-radius:10px!important; background:var(--iv-ground); padding:11px 13px; flex:1 1 140px; min-width:120px; box-shadow:4px 4px 0 var(--iv-peche); } body.woocommerce-cart .coupon .button{ border-radius:10px!important; background:transparent; color:var(--iv-framboise); border:1px solid var(--iv-framboise); font-weight:600; flex:0 0 auto; } body.woocommerce-cart .coupon .button:hover{ background:var(--iv-framboise); color:#fff; } /* Bloc totaux -> carte résumé sticky */ body.woocommerce-cart .cart-collaterals .cart_totals{ float:none; width:100%; background:var(--iv-card); border:1px solid var(--iv-hairline); border-radius:var(--iv-radius); padding:22px; box-shadow:var(--iv-shadow-md); position:sticky; top:30px; } body.woocommerce-cart .cart_totals h2{ font-size:12px!important; font-weight:650!important; line-height:1.3!important; letter-spacing:.1em!important; text-transform:uppercase!important; color:var(--iv-muted)!important; margin:0 0 14px!important; white-space:nowrap; border:0!important; background:transparent!important; padding:0!important; } body.woocommerce-cart .cart_totals table{ border:0; margin:0; } body.woocommerce-cart .cart_totals table th, body.woocommerce-cart .cart_totals table td{ border-top:1px solid var(--iv-hairline)!important; border-bottom:1px solid var(--iv-hairline)!important; padding:11px 0; color:var(--iv-marine); } body.woocommerce-cart .cart_totals tr:first-child th, body.woocommerce-cart .cart_totals tr:first-child td{ border-top:0; } body.woocommerce-cart .cart_totals tr.fee th, body.woocommerce-cart .cart_totals tr.fee td{ color:var(--iv-framboise); font-weight:600; } body.woocommerce-cart .cart_totals tr.order-total th{ font-size:16px; } body.woocommerce-cart .cart_totals tr.order-total .amount{ font-size:22px; font-weight:800; letter-spacing:-.01em; } /* Boutons framboise */ body.woocommerce-cart .wc-proceed-to-checkout{ padding-top:16px!important; } body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button, body.woocommerce-checkout #place_order{ background:var(--iv-framboise)!important; color:#fff!important; border:0!important; border-radius:13px!important; font-weight:700!important; font-size:16px!important; letter-spacing:.01em; padding:15px 22px!important; width:100%; text-align:center; box-shadow:0 8px 20px rgba(221,24,59,.26); transition:.16s; } body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover, body.woocommerce-checkout #place_order:hover{ background:var(--iv-framboise-d)!important; transform:translateY(-1px); box-shadow:0 12px 26px rgba(221,24,59,.32); } /* Carrousel produits croisés */ body.woocommerce-cart .cross-sells > h2{ font-size:20px!important; font-weight:700!important; letter-spacing:-.01em!important; margin-bottom:16px!important; } body.woocommerce-cart .cross-sells ul.products{ display:flex!important; gap:16px; overflow-x:auto; padding:4px 2px 16px; margin:0; scroll-snap-type:x mandatory; scrollbar-width:thin; } body.woocommerce-cart .cross-sells ul.products::before, body.woocommerce-cart .cross-sells ul.products::after{ content:none!important; } body.woocommerce-cart .cross-sells ul.products li.product{ flex:0 0 216px; width:216px!important; margin:0!important; scroll-snap-align:start; background:var(--iv-card); border:1px solid var(--iv-hairline); border-radius:var(--iv-radius); padding:12px; box-shadow:var(--iv-shadow-sm); transition:.18s; } body.woocommerce-cart .cross-sells ul.products li.product:hover{ transform:translateY(-3px); box-shadow:var(--iv-shadow-md); border-color:color-mix(in srgb, var(--iv-peche) 70%, transparent); } body.woocommerce-cart .cross-sells ul.products li.product img{ border-radius:var(--iv-radius-sm); margin-bottom:10px; } body.woocommerce-cart .cross-sells ul.products li.product .button{ background:transparent; color:var(--iv-framboise)!important; border:1px solid var(--iv-framboise); border-radius:10px; font-weight:600; width:100%; } body.woocommerce-cart .cross-sells ul.products li.product .button:hover{ background:var(--iv-framboise); color:#fff!important; } /* Panier vide */ .interva-empty{ text-align:center; padding:40px 20px 10px; max-width:520px; margin:0 auto; } .interva-empty__icon{ width:76px; height:76px; margin:0 auto 18px; border-radius:50%; background:var(--iv-creme); display:grid; place-items:center; } .interva-empty__icon .iv-ic{ width:34px; height:34px; color:var(--iv-framboise); } .interva-empty h2{ font-size:23px; letter-spacing:-.01em; margin:0 0 8px; color:var(--iv-marine); } .interva-empty p{ color:var(--iv-muted); margin:0 0 22px; } /* !important sur color : Astra/Elementor ont des règles génériques "a" (dont .elementor-kit-1512 a) plus spécifiques qu'un simple sélecteur de classe — sans !important elles gagnent et rendent le texte quasi invisible (même couleur que le fond, déjà vu sur .interva-mbar__btn). */ .interva-empty__btn{ display:inline-block; background:var(--iv-framboise); color:#fff!important; text-decoration:none; padding:14px 28px; border-radius:13px; font-weight:700; box-shadow:0 8px 20px rgba(221,24,59,.26); transition:.16s; } .interva-empty__btn:hover{ background:var(--iv-framboise-d); color:#fff!important; transform:translateY(-1px); } /* ===================================================================== CAISSE (/commander/) ===================================================================== */ /* Colonne résumé : #order_review contient AUSSI les méthodes de paiement + le bouton Commander (structure WooCommerce standard) — on ne veut PAS tout englober dans une seule carte. Seul le tableau de commande (+ son titre) est regroupé dans une carte compacte via JS (wrapOrderSummary, voir panier.js) ; le reste (paiement, bouton) reste en dehors, sans bordure, comme dans la maquette. */ /* ⚠️ Astra a son propre thème natif de caisse (bordures/padding/float), normalement désactivé par un :not(.elementor-widget-woocommerce-checkout-page) dans son CSS — mais puisqu'on contourne Elementor, ce garde-fou ne s'applique plus et ce thème dormant redevient actif. Certaines de ses règles ont un ID dans le sélecteur (#order_review, #order_review_heading) donc plus spécifiques que les nôtres : tout ce qui touche ces IDs doit avoir !important, sinon Astra regagne la main de façon imprévisible. */ body.woocommerce-checkout #order_review{ background:transparent!important; border:0!important; box-shadow:none!important; padding:0!important; /* PAS de width/float ici : Astra utilise réellement ces propriétés (hors thème dormant) pour placer #order_review en colonne de droite à côté de #customer_details — les forcer casse la mise en page. */ margin-top:20px; /* Sticky posé ICI (sur #order_review, pas sur la carte à l'intérieur) : #order_review lui-même ne fait que la hauteur de son contenu (~400px) alors que #customer_details fait ~1400px — coller la carte à SON parent direct (#order_review, court) ne laisse aucune marge de défilement, donc rien ne semble "coller". Le parent DE #order_review, lui, c'est form.checkout, qui est bien assez haut (colonne de gauche + paiement express) : coller #order_review directement dedans donne à la carte toute la place nécessaire pour suivre le défilement jusqu'au bas de la page. Marche identique en 1 colonne (mobile) puisque form.checkout est aussi haut que TOUT le reste du contenu empilé. */ position:sticky!important; top:20px; } .interva-order-summary-card{ background:var(--iv-card); border:1px solid var(--iv-hairline); border-radius:var(--iv-radius); padding:22px; box-shadow:var(--iv-shadow-md); } body.woocommerce-checkout #order_review_heading{ font-size:12px!important; font-weight:650!important; line-height:1.3!important; letter-spacing:.1em!important; text-transform:uppercase!important; color:var(--iv-muted)!important; margin:0 0 12px!important; white-space:nowrap; border:0!important; float:none!important; padding:0!important; width:auto!important; text-align:left!important; } /* ---------- Récapitulatif « Votre commande » repliable (façon Shopify) ---------- Le titre devient une barre cliquable : libellé + chevron à gauche, total à droite. Sur mobile/tablette la table des articles se déroule au clic ; sur desktop c'est toujours ouvert (colonne latérale). Voir makeSummaryCollapsible() dans panier.js. */ body.woocommerce-checkout #order_review_heading.interva-summary-toggle{ display:flex!important; align-items:center; gap:8px; cursor:pointer; margin:0!important; white-space:normal; } .interva-summary-toggle .interva-summary-total{ margin-left:auto; font-weight:700; font-size:15px; color:var(--iv-marine)!important; letter-spacing:normal; text-transform:none; } .interva-summary-chevron{ width:8px; height:8px; border-right:2px solid var(--iv-muted); border-bottom:2px solid var(--iv-muted); transform:rotate(45deg); transition:transform .2s ease; flex:0 0 auto; margin-bottom:2px; } .interva-order-summary-card.interva-summary-open .interva-summary-chevron{ transform:rotate(-135deg); margin-bottom:-2px; } /* Repli/déroulé : affichage fiable par display (bulletproof) + un glissement fondu animé par keyframes à l'ouverture, pour le « slide fluide » sans les pièges d'interpolation de hauteur. */ @media (max-width:980px){ .interva-order-summary-card:not(.interva-summary-open) .interva-summary-body{ display:none; } .interva-order-summary-card.interva-summary-open .interva-summary-inner{ animation:interva-summary-slide .28s ease-out; } body.woocommerce-checkout #order_review_heading.interva-summary-toggle{ margin:0!important; } .interva-order-summary-card.interva-summary-open #order_review_heading.interva-summary-toggle{ margin:0 0 12px!important; } } @keyframes interva-summary-slide{ from{ opacity:0; transform:translateY(-10px); } to{ opacity:1; transform:translateY(0); } } /* Desktop : toujours ouvert, la barre reste un simple titre, pas d'anim */ @media (min-width:981px){ .interva-summary-chevron, .interva-summary-toggle .interva-summary-total{ display:none!important; } body.woocommerce-checkout #order_review_heading.interva-summary-toggle{ cursor:default; margin:0 0 12px!important; } } @media (prefers-reduced-motion:reduce){ .interva-order-summary-card .interva-summary-inner{ animation:none!important; } } /* ---------- Cartes "Vos coordonnées" / "Méthode de paiement" ---------- Dans la maquette (.panel), chaque section a sa propre carte bordée avec un badge numéroté (1, 2). Voir wrapCheckoutPanels() dans panier.js. */ .interva-panel{ background:var(--iv-card); border:1px solid var(--iv-hairline); border-radius:var(--iv-radius); padding:22px; box-shadow:var(--iv-shadow-sm); margin-bottom:18px; } body.woocommerce-checkout .interva-panel .woocommerce-billing-fields > h3, body.woocommerce-checkout .interva-panel h3.custom-payment-title{ display:flex!important; align-items:center; gap:11px; font-size:17px!important; font-weight:650!important; line-height:1.3!important; letter-spacing:normal!important; text-transform:none!important; color:var(--iv-marine)!important; margin:0 0 18px!important; padding:0!important; border:0!important; white-space:normal; } body.woocommerce-checkout .interva-panel .woocommerce-billing-fields > h3::before, body.woocommerce-checkout .interva-panel h3.custom-payment-title::before{ width:26px; height:26px; border-radius:50%; flex:none; background:var(--iv-framboise); color:#fff; display:grid; place-items:center; font-size:13px; font-weight:700; } body.woocommerce-checkout .interva-panel .woocommerce-billing-fields > h3::before{ content:"1"; } body.woocommerce-checkout .interva-panel h3.custom-payment-title::before{ content:"2"; } body.woocommerce-checkout .interva-panel--payment #payment{ padding:0; background:transparent; border:0; } /* "Avez-vous un code promo ?" — déplacé (voir moveCouponToCheckout en JS) à la fin de la colonne de gauche (#customer_details, jamais remplacé par l'AJAX de recalcul de taxes), sous la méthode de paiement, au lieu d'une grosse bannière en haut de page. */ /* Ni le code promo ni "Déjà client ?" ne sont ancrés à #customer_details : position responsive (voir positionCouponResponsive en JS, mobile vs desktop) — les sélecteurs ciblent donc les classes directement, peu importe leur parent du moment. */ /* Anti-FOUC : WooCommerce rend le lien « Avez-vous un code promo ? » en haut du formulaire, puis notre JS (positionCouponResponsive) le déplace dans le résumé de commande. Sans ça, on le voit apparaître en haut de page puis sauter à sa place — un flicker visible. On le garde masqué TANT QU'il n'est pas à sa position finale (dans #order_review) : purement positionnel, aucun flash, aucun espace réservé en haut. */ body.woocommerce-checkout .woocommerce-form-coupon-toggle{ display:none; } body.woocommerce-checkout #order_review .woocommerce-form-coupon-toggle{ display:block; margin:18px 0 0; } body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info, body.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info{ background:var(--iv-creme)!important; border:1px solid color-mix(in srgb, var(--iv-peche) 60%, transparent)!important; border-radius:var(--iv-radius-sm)!important; padding:12px 16px!important; margin:0!important; font-size:13.5px; color:var(--iv-marine); } body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info::before, body.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info::before{ content:none!important; } body.woocommerce-checkout a.showcoupon, body.woocommerce-checkout a.showlogin{ color:var(--iv-framboise)!important; font-weight:600; } body.woocommerce-checkout form.checkout_coupon{ display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 0!important; padding:0!important; border:0!important; background:none!important; } body.woocommerce-checkout form.checkout_coupon .form-row{ margin:0; flex:1; min-width:160px; } body.woocommerce-checkout form.checkout_coupon input#coupon_code{ width:100%; border:1px solid var(--iv-hairline); border-radius:9px; background:var(--iv-ground); padding:9px 11px; font-family:inherit; font-size:13.5px; min-height:0; } body.woocommerce-checkout form.checkout_coupon button{ border:1px solid var(--iv-framboise)!important; color:var(--iv-framboise)!important; background:transparent!important; border-radius:9px!important; padding:0 16px!important; font-weight:600!important; white-space:nowrap; } body.woocommerce-checkout form.checkout_coupon button:hover{ background:var(--iv-framboise)!important; color:#fff!important; } /* Sur mobile étroit, le bouton "Appliquer le code promo" (texte assez long, white-space:nowrap) déborde de sa pilule quand la case flex rétrécit sous l'espace pris par le champ — on empile plutôt input/bouton pour éliminer le risque de débordement quel que soit le texte. */ @media (max-width:600px){ body.woocommerce-checkout form.checkout_coupon{ flex-direction:column; } body.woocommerce-checkout form.checkout_coupon .form-row{ min-width:0; width:100%; } body.woocommerce-checkout form.checkout_coupon button{ width:100%; padding:11px 16px!important; } } /* "Déjà client ?" — même carte que le code promo, dans son emplacement d'origine (avant le formulaire) sur toutes les tailles d'écran. */ body.woocommerce-checkout .woocommerce-form-login-toggle{ margin:0 0 18px; } body.woocommerce-checkout form.woocommerce-form-login{ background:var(--iv-card); border:1px solid var(--iv-hairline)!important; border-radius:var(--iv-radius); padding:20px!important; margin:0 0 18px!important; box-shadow:var(--iv-shadow-sm); } body.woocommerce-checkout .woocommerce-checkout-review-order-table{ border:0; } /* la maquette n'a pas de libellés de colonnes ("Produit"/"Sous-total") */ body.woocommerce-checkout .woocommerce-checkout-review-order-table thead{ display:none; } /* La ligne visible vient en fait d'un border-bottom natif WooCommerce SANS couleur précisée : il hérite donc du texte (marine, foncé) via currentColor au lieu d'un gris pâle dédié — d'où les lignes trop foncées. On force explicitement border-top ET -bottom en gris pâle, !important pour être sûr de gagner sur la règle native. */ body.woocommerce-checkout .woocommerce-checkout-review-order-table td, body.woocommerce-checkout .woocommerce-checkout-review-order-table th{ border-top:1px solid var(--iv-hairline)!important; border-bottom:1px solid var(--iv-hairline)!important; } body.woocommerce-checkout .woocommerce-checkout-review-order-table .cart_item .product-name{ color:var(--iv-marine); font-weight:600; font-size:13.5px; } body.woocommerce-checkout .woocommerce-checkout-review-order-table img{ width:48px!important; height:48px!important; border-radius:9px; box-shadow:var(--iv-shadow-sm); margin-right:10px; } body.woocommerce-checkout .woocommerce-checkout-review-order-table .fee th, body.woocommerce-checkout .woocommerce-checkout-review-order-table .fee td{ color:var(--iv-framboise); font-weight:600; } body.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total .amount{ font-size:22px; font-weight:800; letter-spacing:-.01em; } /* ---------- Paiement express (Stripe Apple/Google Pay + PayPal) ---------- */ /* Deux widgets natifs distincts (Stripe puis PayPal) s'empilent avec chacun leur séparateur "OU" et un lien de connexion entre les deux. On les regroupe visuellement et on ne garde qu'un seul séparateur (celui de PayPal, juste avant le formulaire). Les boutons eux-mêmes (Apple/Google Pay, PayPal) sont rendus par Stripe/PayPal — leur couleur/thème se règle dans WooCommerce > Réglages > Paiements > Stripe > Paiement express. Voir la note dans la conversation. */ /* Apple Pay + Google Pay (Stripe) et PayPal réunis dans UNE rangée : le bouton PayPal est déplacé DANS le conteneur flex de Stripe via JS (unifyExpressButtons dans panier.js), qui a déjà flex-wrap + gap + center. Le reste du bloc PayPal (fieldset/légende dupliquée/inputs cachés) est masqué — le séparateur "OU" qui suivait Stripe (déjà présent, on ne fait que le réafficher) devient le seul, au bon endroit. */ body.woocommerce-checkout #wc-stripe-express-checkout-element, body.woocommerce-cart #wc-stripe-express-checkout-element{ margin:0 0 10px!important; gap:12px!important; justify-content:center!important; /* Le bouton PayPal express est verrouillé à ~35px par le SDK PayPal (il ignore la hauteur en mode express), les boutons Stripe font 40px. On centre verticalement pour que le petit écart soit symétrique et discret au lieu d'un PayPal collé en haut. */ align-items:center!important; } /* Le bouton RENDU par Stripe (dans son iframe sécurisé) ne s'étire pas pour remplir toute la largeur qu'on lui donne — il reste à sa taille native et laisse un vide à droite si la case est plus large que lui. On ne peut pas agrandir le bouton lui-même (contenu de l'iframe, hors de portée), mais on peut arrêter de FORCER la case à s'étirer (flex-grow:0 au lieu de 1) : la case colle alors à la taille réelle du bouton, et le centrage du conteneur (ci-dessus) équilibre le tout. */ body.woocommerce-checkout #wc-stripe-express-checkout-element > *, body.woocommerce-cart #wc-stripe-express-checkout-element > *{ flex:0 1 220px!important; min-width:0; } /* Stripe donne à CHAQUE bouton (Apple Pay, Google Pay) sa propre bordure + fond blanc par défaut (via son propre CSS, wc_stripe_express_checkout_style) — on les retire pour qu'ils s'intègrent dans la rangée au lieu d'avoir chacun leur encadré, et on aligne la hauteur sur celle du bouton PayPal. */ body.woocommerce-checkout #wc-stripe-express-checkout-element-applePay, body.woocommerce-checkout #wc-stripe-express-checkout-element-googlePay, body.woocommerce-cart #wc-stripe-express-checkout-element-applePay, body.woocommerce-cart #wc-stripe-express-checkout-element-googlePay{ border:0!important; background:transparent!important; padding:0!important; min-height:40px; display:flex!important; align-items:center; } /* Le bouton PayPal express est rendu par le SDK à 150×35px, avec une forme plus étroite que les boutons Stripe (220×40) — PayPal ignore tout réglage de taille en mode express. On l'agrandit UNIFORMÉMENT (sans déformer) pour qu'il atteigne la même HAUTEUR de 40px (scale 40/35 = 1.143) et qu'il soit aligné sur la même ligne que les boutons noirs. Il reste un peu plus étroit (~171px), c'est sa proportion naturelle. */ body.woocommerce-checkout #wc-stripe-express-checkout-element .wc-ppcp-express-checkout-gateway, body.woocommerce-cart #wc-stripe-express-checkout-element .wc-ppcp-express-checkout-gateway{ min-height:40px; display:flex!important; align-items:center; justify-content:center; } body.woocommerce-checkout #wc-stripe-express-checkout-element .wc-ppcp-express-checkout-gateway .button-count_1, body.woocommerce-cart #wc-stripe-express-checkout-element .wc-ppcp-express-checkout-gateway .button-count_1{ transform:scale(1.143); transform-origin:center center; } /* PANIER : la colonne du résumé est étroite, les boutons express s'empilent. Les boutons Stripe rendent à 220px (leur largeur native) mais PayPal remplit toute la colonne (~334px) → largeurs inégales. On met TOUS les boutons express pleine largeur (comme le bouton « Valider la commande » et PayPal), pour qu'ils soient identiques et alignés. (Stripe accepte de s'étirer à 100%, vérifié.) */ body.woocommerce-cart #wc-stripe-express-checkout-element{ flex-direction:column!important; align-items:stretch!important; gap:10px!important; } body.woocommerce-cart #wc-stripe-express-checkout-element > *{ width:100%!important; max-width:100%!important; flex:0 0 auto!important; } /* CAISSE MOBILE : les boutons s'empilent. PayPal (fusionné dans la rangée) reste à 171px (sa largeur de logo à 40px de haut), alors que les boutons Stripe font 220px → inégaux. On égalise tout à 171px, empilé et centré, sans déformer PayPal. */ @media (max-width:980px){ body.woocommerce-checkout #wc-stripe-express-checkout-element{ flex-direction:column!important; align-items:center!important; gap:10px!important; } body.woocommerce-checkout #wc-stripe-express-checkout-element > *{ width:163px!important; max-width:163px!important; flex:0 0 auto!important; } /* Point d'équilibre : à un emplacement de 163px, Stripe rend son bouton à 171px × 40px. Et à 171px de large, PayPal agrandi uniformément (×1.143) fait justement 40px de haut → largeur ET hauteur identiques (171×40). */ body.woocommerce-checkout #wc-stripe-express-checkout-element .wc-ppcp-express-checkout-gateway .button-count_1{ transform:scale(1.143)!important; } } .interva-express-label{ text-align:center; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:var(--iv-marine); margin:0 0 12px; } /* Squelette affiché pendant que Stripe/PayPal chargent + vérifient la disponibilité réelle du portefeuille (voir showExpressSkeleton en JS) — 3 barres au même gabarit que les vrais boutons (48px, coins arrondis), qui pulsent doucement, pour qu'il n'y ait jamais un vide qu'on scroll par-dessus en pensant que la page a fini de charger. */ /* 2 barres (comme les 2 boutons PayPal + Google Pay), empilées, qui pulsent DOUCEMENT en opacité. On a retiré le balayage lumineux (shimmer) qui donnait une impression de « flash » agaçant pendant les secondes d'attente. */ .interva-express-skeleton{ display:flex; flex-direction:column; align-items:center; gap:10px; margin:0 0 10px; } .interva-express-skeleton span{ /* calé sur les vrais boutons express : ~220px de large, centrés, 48px de haut — pour que le squelette donne l'impression que ce sont les boutons eux-mêmes qui se dessinent. */ width:100%; max-width:240px; height:48px; border-radius:8px; background:var(--iv-hairline); animation:interva-express-pulse 1.6s ease-in-out infinite; } .interva-express-skeleton span:nth-child(2){ animation-delay:.25s; } @keyframes interva-express-pulse{ 0%,100%{ opacity:.4; } 50%{ opacity:.75; } } @media (prefers-reduced-motion:reduce){ .interva-express-skeleton span{ animation:none; opacity:.55; } } body.woocommerce-checkout p#wc-stripe-express-checkout-button-separator{ display:flex!important; align-items:center; gap:12px; color:var(--iv-muted2); font-size:11.5px; text-transform:uppercase; letter-spacing:.08em; margin:4px 0 16px!important; } body.woocommerce-checkout p#wc-stripe-express-checkout-button-separator::before, body.woocommerce-checkout p#wc-stripe-express-checkout-button-separator::after{ content:""; flex:1; height:1px; background:var(--iv-hairline); } body.woocommerce-checkout .e-woocommerce-login-section{ margin:2px 0 12px!important; } body.woocommerce-checkout .e-woocommerce-login-section .woocommerce-form-login-toggle{ font-size:12.5px; color:var(--iv-muted); text-align:center; } body.woocommerce-checkout .e-woocommerce-login-section .e-show-login{ color:var(--iv-framboise); font-weight:600; text-decoration:none; } /* bloc PayPal d'origine : son bouton a été déplacé ailleurs, le reste (légende dupliquée, divider, inputs cachés) n'a plus besoin d'être visible */ body.woocommerce-checkout .wc-ppcp-express-checkout{ display:none!important; } /* Colonne infos client */ body.woocommerce-checkout #customer_details h3, body.woocommerce-checkout .woocommerce-billing-fields h3, body.woocommerce-checkout .woocommerce-additional-fields h3{ font-size:17px!important; font-weight:650!important; letter-spacing:-.01em!important; } body.woocommerce-checkout .col2-set .col-1, body.woocommerce-checkout .col2-set .col-2{ width:100%; float:none; } body.woocommerce-checkout form.checkout .form-row input.input-text, body.woocommerce-checkout form.checkout .form-row textarea, body.woocommerce-checkout form.checkout .form-row .select2-selection, body.woocommerce-checkout form.checkout .form-row select{ border:1px solid var(--iv-hairline)!important; border-radius:11px!important; background:var(--iv-ground)!important; padding:12px 13px!important; min-height:46px; } body.woocommerce-checkout form.checkout .form-row input.input-text:focus{ border-color:var(--iv-framboise)!important; outline:2px solid var(--iv-peche); outline-offset:0; } body.woocommerce-checkout form.checkout .form-row label{ color:var(--iv-muted); font-size:12.5px; font-weight:600; } /* ---------- Cartes de paiement (façon Shopify) ---------- */ body.woocommerce-checkout #payment, body.woocommerce-checkout .woocommerce-checkout-payment{ background:transparent!important; border-radius:0; } /* reset du

natif du navigateur (bordure noire par défaut) autour des champs de carte Stripe */ body.woocommerce-checkout .payment_box fieldset{ border:0!important; margin:0!important; padding:0!important; min-width:0; } body.woocommerce-checkout ul.payment_methods{ list-style:none!important; margin:0!important; padding:0!important; border:0!important; display:flex; flex-direction:column; gap:12px; } body.woocommerce-checkout ul.payment_methods li.wc_payment_method{ background:var(--iv-ground); border:1.5px solid var(--iv-hairline); border-radius:14px; padding:0; margin:0; overflow:hidden; transition:.16s; } body.woocommerce-checkout ul.payment_methods li.wc_payment_method:hover{ border-color:var(--iv-peche); } /* état sélectionné */ body.woocommerce-checkout ul.payment_methods li.wc_payment_method:has(input.input-radio:checked){ border-color:var(--iv-framboise); background:color-mix(in srgb, var(--iv-creme) 65%, var(--iv-card)); } /* label = en-tête cliquable pleine largeur */ body.woocommerce-checkout ul.payment_methods li.wc_payment_method > label{ display:flex!important; align-items:center; gap:12px; padding:15px 16px; margin:0; cursor:pointer; font-weight:600; color:var(--iv-marine); font-size:14.5px; } /* pastille radio custom — UNIQUEMENT si :has() est supporté (sinon on garde le radio natif visible) */ @supports selector(:has(*)){ body.woocommerce-checkout ul.payment_methods li.wc_payment_method > input.input-radio{ position:absolute; opacity:0; width:0; height:0; } body.woocommerce-checkout ul.payment_methods li.wc_payment_method > label::before{ content:""; width:20px; height:20px; border-radius:50%; flex:none; border:2px solid var(--iv-muted2); transition:.15s; box-sizing:border-box; } body.woocommerce-checkout ul.payment_methods li.wc_payment_method:has(input.input-radio:checked) > label::before{ border-color:var(--iv-framboise); background:radial-gradient(circle at center, var(--iv-framboise) 0 5px, transparent 6px); } } /* logos alignés à droite */ body.woocommerce-checkout ul.payment_methods li.wc_payment_method > label img{ margin-left:auto; max-height:26px; width:auto; display:inline-block; } body.woocommerce-checkout ul.payment_methods li.wc_payment_method > label img + img{ margin-left:6px; } /* icône bon de commande */ body.woocommerce-checkout ul.payment_methods li.payment_method_purchase_order_gateway > label::after{ content:"Écoles · CPE · organismes"; margin-left:auto; font-size:11px; font-weight:500; color:var(--iv-muted); background:var(--iv-creme); padding:4px 9px; border-radius:7px; } /* tiroir (champs Stripe, message PayPal) */ body.woocommerce-checkout ul.payment_methods li.wc_payment_method .payment_box{ background:transparent!important; margin:0!important; padding:2px 16px 18px 48px!important; border-top:1px dashed var(--iv-hairline); font-size:13.5px; color:var(--iv-muted); } body.woocommerce-checkout ul.payment_methods li.wc_payment_method .payment_box::before{ content:none!important; } /* Bouton commander + réassurance */ body.woocommerce-checkout #payment .place-order{ padding-top:6px; } .interva-secure-note{ display:flex; align-items:center; justify-content:center; gap:7px; color:var(--iv-muted); font-size:12.5px; margin:12px 0 0; width:100%; box-sizing:border-box; } .interva-secure-note .iv-ic{ width:14px; height:14px; color:var(--iv-framboise); } /* ===================================================================== Barre de caisse fixe (mobile), page panier ===================================================================== */ .interva-mbar{ display:none; } @media (max-width:768px){ .interva-mbar{ display:flex; align-items:center; gap:14px; position:fixed; left:0; right:0; bottom:0; z-index:9990; background:var(--iv-card); border-top:1px solid var(--iv-hairline); padding:11px 16px calc(11px + env(safe-area-inset-bottom)); box-shadow:0 -6px 22px rgba(15,23,42,.12); } .interva-mbar__total{ display:flex; flex-direction:column; line-height:1.15; } .interva-mbar__total span{ font-size:11px; color:var(--iv-muted); } .interva-mbar__val{ font-size:17px; font-weight:800; color:var(--iv-marine); } .interva-mbar__val .amount{ font-size:17px; } .interva-mbar__btn{ margin-left:auto; background:var(--iv-framboise); color:#fff!important; text-decoration:none; padding:13px 22px; border-radius:12px; font-weight:700; white-space:nowrap; } .interva-mbar__btn:hover{ background:var(--iv-framboise-d); color:#fff!important; } /* laisser respirer le contenu au-dessus de la barre */ body.woocommerce-cart .site-content{ padding-bottom:84px; } body.woocommerce-cart{ padding-bottom:84px; } /* la barre fixe remplace le lien "Valider la commande" natif, sur mobile */ body.woocommerce-cart .wc-proceed-to-checkout{ display:none!important; } } /* ===================================================================== Panier : 2 colonnes (regroupées en JS, voir panier.js wrapCartColumns) ===================================================================== */ .interva-cart-grid{ display:block; } @media (min-width:981px){ .interva-cart-grid{ display:flex!important; align-items:flex-start; gap:28px; } /* !important nécessaire : woocommerce-layout.min.css force .cart-collaterals{width:100%} qui gagne sinon sur le flex-basis */ .interva-cart-grid > .woocommerce-cart-form{ flex:1 1 0%!important; min-width:0; width:auto!important; } .interva-cart-grid > .cart-collaterals{ flex:0 0 380px!important; width:380px!important; max-width:380px!important; } } @media (max-width:980px){ body.woocommerce-cart .cart_totals{ position:static!important; margin-top:20px; } /* le sticky est posé sur #order_review lui-même (voir plus haut) — top réduit sur mobile vu qu'il n'y a pas de header collant au-dessus. */ body.woocommerce-checkout #order_review{ top:10px; margin-top:0; } /* Caisse mobile : "Votre commande" (résumé) en premier, avant même le paiement express — actuellement en dernier dans le DOM (donc tout en bas de la page une fois empilé). #order_review, la barre express et #customer_details sont tous des enfants directs de form.checkout ; un flex-column + order permet de réordonner l'affichage SANS déplacer quoi que ce soit dans le DOM (le desktop, qui utilise le positionnement natif d'Astra sur ces mêmes éléments, n'est pas touché — ce bloc ne s'applique qu'en dessous de 980px). */ body.woocommerce-checkout form.checkout{ display:flex; flex-direction:column; } /* #order_review contient déjà "Votre commande" (titre + tableau, voir wrapOrderSummary() en JS) : order:-1 suffit, tout suit ensemble. */ body.woocommerce-checkout form.checkout > #order_review{ order:-1; margin-top:0; margin-bottom:20px; } /* le code promo vit maintenant DEDANS #order_review (après la carte, voir positionCouponResponsive() en JS) : il suit automatiquement son order:-1, pas besoin de règle séparée. */ body.woocommerce-checkout form.checkout > .interva-express-label, body.woocommerce-checkout form.checkout > #wc-stripe-express-checkout-element, body.woocommerce-checkout form.checkout > p#wc-stripe-express-checkout-button-separator, body.woocommerce-checkout form.checkout > #customer_details{ order:0; } /* Le bloc "Déjà client ?" (+ son formulaire de connexion) est un FRÈRE de form.checkout, pas dedans. Il doit apparaître EN HAUT sur mobile (invite à se connecter avant de remplir le formulaire, comme sur Shopify) — donc order:0, avant form.checkout (order:1). Le résumé de commande est un enfant de form.checkout (order:-1 en interne), il reste en tête du formulaire, juste sous le bloc de connexion. */ body.woocommerce-checkout > div.woocommerce{ display:flex; flex-direction:column; } body.woocommerce-checkout > div.woocommerce > .woocommerce-form-login-toggle, body.woocommerce-checkout > div.woocommerce > form.woocommerce-form-login{ order:0; margin-top:0; } body.woocommerce-checkout > div.woocommerce > form.checkout{ order:1; } } /* Sticky "Votre commande" : desktop + tablette seulement. Sur téléphone (une seule colonne étroite), le résumé collé en haut empiète sur le reste du contenu pendant le défilement — on le désactive spécifiquement sous 600px (règle placée APRÈS le bloc ≤980px ci-dessus pour gagner sur la plage 0-600px commune aux deux media queries). L'ordre "résumé en premier" reste actif (demande séparée), seul le collage disparaît. */ /* Le sticky casse (chevauchement visuel) dans la plage tablette/téléphone (≤980px) car cette même plage active AUSSI le réordonnancement en une colonne (flex-column + order:-1) — la combinaison sticky + flex-column + contenu ajouté en JS (coupon déplacé dans #order_review) ne recalcule pas correctement la place réservée aux éléments suivants, qui finissent par passer PAR-DESSUS la carte. Le sticky ne fonctionne correctement qu'en vrai desktop 2 colonnes (testé en défilement réel, >980px) : on le limite à cette plage plutôt que de laisser un chevauchement cassé sur tablette. */ @media (max-width:980px){ body.woocommerce-checkout #order_review{ position:static!important; } } @media (prefers-reduced-motion:reduce){ body.woocommerce-cart .cross-sells ul.products{ scroll-behavior:auto; } *{ transition:none!important; } }