/* ============================================================
PANIER v2 — DiY District · look 2026 (feuille AUTONOME)
Chargée sur la page panier (voir functions-cart-v2.php).
Tout est scopé sous #cv2-cart et préfixé .cv2- pour ne pas
interférer avec le thème ni le panier de production.
Icônes = SVG locaux (assets/images/icons/, en ![]()
).
============================================================ */
/* Chrome (header minimal + footer) : géré par le tunnel d'achat — voir
custom/functions-tunnel.php, header-checkout.php / footer-checkout.php et
custom/tunnel/tunnel.css. Rien ici. */
#cv2-cart{
--c1:#1f2624; --c2:#fff; --c3:#3a478e; --c4:#f6f6f6;
--c5:#686f8c; --c7:#767676; --c8:#005743; --c9:#cfcfcf;
--c10:#e03c3d; --c12:#38e8bd; --c13:#56f9d0;
--green:#38dbb3; --line:#ececec; --ink-soft:#5b625f; --inset:#f0f0f0;
font-family:"Open Sans",sans-serif;color:var(--c1);line-height:1.6;-webkit-font-smoothing:antialiased;
/* clip (et non hidden) : empêche tout débordement horizontal sans casser le sticky */
overflow-x:clip;
}
#cv2-cart *{box-sizing:border-box}
#cv2-cart .diy-ico{display:inline-block;vertical-align:middle;line-height:1;flex-shrink:0}
#cv2-cart img{max-width:100%;height:auto;display:block}
#cv2-cart a{color:inherit;text-decoration:none}
/* largeur/centrage du contenu gérés par .cv2-grid (voir section LAYOUT) */
/* en-tête de page — largeurs/marges gérées par le CSS du thème */
.cv2-page-head{margin-bottom:20px}
.cv2-crumb{font-size:13px;color:var(--c7);margin-bottom:10px}
.cv2-crumb a:hover{color:var(--c1)}
.cv2-page-head h1{font-family:"Playfair Display",serif;font-weight:700;font-size:40px;letter-spacing:-.01em}
.cv2-count{font-family:"Open Sans";font-size:15px;color:var(--c7);font-weight:400;margin-left:10px}
@media(max-width:768px){.cv2-page-head h1{font-size:28px;display:flex;align-items:baseline;gap:10px}.cv2-count{margin-left:auto}.cv2-crumb{display:none}}
/* ============ LAYOUT 2 colonnes ============ */
/* minmax(0,1fr) (et non 1fr = minmax(auto,1fr)) : empêche le contenu
(input coupon…) d'élargir la colonne au-delà du viewport */
.cv2-grid{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:20px;align-items:start}
.cv2-left{min-width:0}
/* Mobile : colonne unique. gap:0 → la 2e "ligne" (récap, devenu sheet fixe = 0 de
hauteur) ne crée plus d'espace mort sous les produits. */
@media(max-width:980px){.cv2-grid{grid-template-columns:minmax(0,1fr);gap:0}.cv2-summary-col{position:static}}
/* ============ COLONNE GAUCHE : lignes en cartes ============ */
.cv2-items{display:flex;flex-direction:column;gap:14px}
.cv2-items-fade{position:relative}
/* Mobile/tablette : la liste produits coule naturellement avec la page (le récap
est désormais un bottom-sheet, plus aucun récap sous la liste). Le scroll est
celui de la page ; la barre fixe flotte par-dessus. Plus de scroller interne ni
de fades (le markup .diy-scroller/.diy-scroll-fade reste inerte ici). */
.cv2-line{display:grid;grid-template-columns:104px 1fr auto;gap:20px;align-items:center;background:var(--c2);border:1px solid var(--line);border-radius:15px;padding:15px;transition:box-shadow .2s,border-color .2s;position:relative}
.cv2-line:hover{box-shadow:0 6px 22px rgba(58,71,142,.07);border-color:#e2e2e2}
/* recalcul AJAX en cours. SURTOUT PAS de pointer-events:none sur la ligne : ça la
rendait insensible ~2 s dès le 1er clic → le tap suivant (+/−/poubelle) partait
dans le vide (dead clicks Clarity sur bagPlus/bagMinus). Les clics successifs
sont absorbés par pendingQty/débounce et sérialisés par la file de mutations.
Seul le SOUS-TOTAL est estompé (périmé jusqu'au re-render) ; la quantité, elle,
affiche déjà la valeur demandée et la poubelle reste active. */
.cv2-line.updating .cv2-subtotal{opacity:.4;transition:opacity .15s}
@keyframes cv2-spin{to{transform:rotate(360deg)}}
.cv2-thumb{width:104px;height:104px;border-radius:10px;overflow:hidden}
/* spécificité ID nécessaire pour battre `#cv2-cart img{height:auto}` */
#cv2-cart .cv2-thumb img{width:100%;height:100%;object-fit:cover}
#cv2-cart .cv2-thumb a{display:block;width:100%;height:100%}
.cv2-info{min-width:0}
/* titre tronqué sur une seule ligne (… au-delà) — le titre complet reste sur la fiche produit */
.cv2-ptitle{font-family:"Playfair Display",serif;font-weight:500;font-size:19px;line-height:1.2;margin-bottom:9px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cv2-ptitle a{color:inherit}
/* ligne meta : largeur (« size ») + prix au mètre sur une même ligne */
.cv2-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:10px}
.cv2-meta .cv2-chip{font-size:11.5px;font-weight:500;color:var(--ink-soft);background:var(--c4);border-radius:999px;padding:5px 10px}
.cv2-unitprice{font-size:13px;color:var(--c7)}
.cv2-unitprice b{color:var(--c1);font-weight:600}
.cv2-right{display:flex;flex-direction:column;align-items:flex-end;gap:12px;text-align:right}
.cv2-right-top{display:flex;align-items:flex-start;gap:12px}
.cv2-subtotal{font-weight:700;font-size:18px;letter-spacing:-.01em}
.cv2-subtotal .cv2-was{display:block;font-weight:400;font-size:13px;color:var(--c7);text-decoration:line-through}
/* bouton supprimer = poubelle, alignée avec le prix */
.cv2-remove{width:32px;height:32px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;color:var(--c9);transition:.18s;flex-shrink:0;border:none;background:transparent;cursor:pointer;margin-top:-4px}
.cv2-remove .diy-ico{font-size:18px}
.cv2-remove:hover{background:var(--c10)}
.cv2-remove:hover,.cv2-remove:hover .diy-ico{color:#fff}
/* sélecteur quantité pill */
.cv2-qty{display:inline-flex;align-items:center;border:1.5px solid var(--line);border-radius:10px;overflow:hidden}
.cv2-qty button{width:38px;height:40px;border:none;background:transparent;cursor:pointer;color:var(--c1);transition:background .15s;display:flex;align-items:center;justify-content:center}
.cv2-qty button .diy-ico{font-size:15px}
.cv2-qty button:hover{background:var(--c4)}
.cv2-qty .cv2-n{width:42px;border:none;text-align:center;font-size:15px;font-family:inherit;font-weight:600;color:var(--c1);background:transparent;-moz-appearance:textfield}
.cv2-qty .cv2-n::-webkit-outer-spin-button,.cv2-qty .cv2-n::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.cv2-qty .cv2-n:focus{outline:none}
.cv2-qty-single{justify-content:center;min-width:42px;height:40px}
.cv2-qty-single .cv2-n{font-weight:600}
/* helper longueur (m/yd) + loader de recalcul à sa gauche */
.cv2-len-row{display:flex;align-items:center;justify-content:flex-end;gap:8px}
.cv2-line-spin{display:none;width:18px;height:18px;background:url(../images/icons/spinner.svg) no-repeat center/contain;flex-shrink:0}
.cv2-line.updating .cv2-line-spin{display:block}
.cv2-len-helper{font-size:11.5px;color:var(--c7);background:var(--c4);padding:5px 10px;border-radius:999px;white-space:nowrap}
.cv2-len-helper b{color:var(--c1);font-weight:600}
.cv2-update-fallback{display:none}
/* ============ COLONNE DROITE : résumé sticky ============ */
/* sticky : header non fixe sur le panier v2 → simple marge de respiration en haut */
.cv2-summary-col{position:sticky;top:20px;align-self:start;min-width:0}
.cv2-summary{position:relative;background:var(--c4);border:1px solid rgba(0,0,0,.06);border-radius:20px}
/* Le padding vit sur le corps scrollable (.cv2-summary-body) : sur mobile c'est le
scroller du bottom-sheet ; sur desktop c'est juste un conteneur (même rendu). */
.cv2-summary-body{padding:25px}
.cv2-summary h2{font-family:"Playfair Display",serif;font-weight:500;font-size:20px;margin-bottom:20px;padding-bottom:15px;border-bottom:1px solid var(--line)}
/* barre port offert */
.cv2-ship-bar{background:var(--inset);border:1px solid #e5e5e5;border-radius:5px;padding:15px;margin-bottom:20px}
.cv2-ship-msg{font-size:13px;line-height:1.45;margin-bottom:10px;display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap}
.cv2-ship-msg b{color:var(--c1);font-weight:700}
.cv2-ship-msg .diy-ico{color:var(--c8);font-size:16px}
.cv2-ship-track{height:5px;border-radius:999px;background:#d6d6d6;overflow:hidden}
.cv2-ship-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--green),var(--c12));transition:width .4s}
/* lignes de totaux */
.cv2-totals{font-size:14px}
.cv2-row{display:flex;justify-content:space-between;align-items:baseline;padding:10px 0;gap:12px}
.cv2-lbl{color:var(--ink-soft)}
.cv2-lbl small{display:block;font-size:11px;color:var(--c7)}
.cv2-val{font-weight:600;text-align:right;white-space:nowrap}
.cv2-discount{background:#eafaf5;border:1px solid #b7e4d3;border-radius:8px;padding:10px 12px;margin:8px 0}
.cv2-discount .cv2-lbl{display:inline-flex;align-items:center;gap:6px;color:var(--c8);font-weight:600}
.cv2-discount .cv2-lbl .diy-ico{font-size:15px}
.cv2-discount .cv2-val{display:inline-flex;align-items:center;gap:8px;color:var(--c8);font-weight:700}
.cv2-rm-coupon{color:var(--c7);font-weight:700;font-size:16px;line-height:1;text-decoration:none}
.cv2-rm-coupon:hover{color:var(--c10)}
.cv2-sep{height:1px;background:var(--line);margin:5px 0}
.cv2-grand{padding-top:15px}
.cv2-grand .cv2-lbl{font-weight:700;color:var(--c1);font-size:15px}
.cv2-grand .cv2-val{font-weight:700;font-size:20px;letter-spacing:-.01em}
.cv2-grand .cv2-val small{display:block;font-size:10px;font-weight:400;color:var(--c7)}
/* choix du mode d'expédition */
.cv2-ship-choose{margin:10px 0}
.cv2-ship-label{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--c7);margin-bottom:10px}
.cv2-ship-methods{display:flex;flex-direction:column;gap:10px}
.cv2-ship-opt{display:flex;align-items:center;gap:10px;padding:10px 15px;border-radius:5px;background:#fff;border:1px solid #e5e5e5;cursor:pointer;transition:border-color .15s,background .15s;position:relative}
.cv2-ship-opt:hover{border-color:#d8d8d8}
.cv2-ship-opt.selected{border-color:var(--c3);background:#eef1fb}
.cv2-ship-opt input{position:absolute;opacity:0;pointer-events:none}
.cv2-dot{width:20px;height:20px;border-radius:50%;border:2px solid var(--c9);flex-shrink:0;position:relative;transition:border-color .15s}
.cv2-ship-opt.selected .cv2-dot{border-color:var(--c3)}
.cv2-ship-opt.selected .cv2-dot::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--c3)}
.cv2-opt-main{display:flex;flex-direction:column;flex:1;min-width:0}
.cv2-opt-name{font-size:13px;font-weight:600;color:var(--c1);line-height:1.3}
.cv2-opt-delay{font-size:11px;color:var(--c7)}
.cv2-opt-price{font-size:14px;font-weight:700;color:var(--c1);white-space:nowrap}
.cv2-ship-dest{display:flex;align-items:center;justify-content:center;gap:7px;font-size:11px;color:var(--c7);margin-top:10px;flex-wrap:wrap}
.cv2-ship-dest .diy-ico{font-size:15px;color:var(--c5)}
.cv2-edit-dest{color:var(--c3);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.cv2-edit-dest:hover{color:var(--c1)}
.cv2-dest-edit{margin-top:8px}
.cv2-dest-edit[hidden]{display:none}
.cv2-dest-country{width:100%;font-family:inherit;font-size:13px;color:var(--c1);background:#fff;border:1.5px solid var(--line);border-radius:8px;padding:8px 10px;cursor:pointer}
.cv2-dest-country:focus{outline:none;border-color:var(--c3)}
/* coupon ticket */
.cv2-coupon{margin:20px 0 10px;display:flex;align-items:stretch;background:linear-gradient(100deg,#eafaf5,#f3f1fb);border-radius:5px;overflow:hidden}
.cv2-coupon-ic{flex:0 0 46px;background:var(--c3);color:#fff;display:flex;align-items:center;justify-content:center}
.cv2-coupon-ic .diy-ico{font-size:20px}
.cv2-coupon-body{flex:1;min-width:0;display:flex;align-items:center;gap:5px;padding:15px 10px;border:1px solid #c9e1f0}
.cv2-coupon-input{flex:1;min-width:0;border:none;background:transparent;font-family:inherit;font-size:13px;color:var(--c1)}
.cv2-coupon-input:focus{outline:none}
.cv2-coupon-input::placeholder{color:var(--c7)}
.cv2-coupon-apply{border:none;background:none;font-family:inherit;font-size:13px;font-weight:700;color:var(--c3);cursor:pointer;white-space:nowrap}
/* dropdown « codes promo actifs » (sous l'input coupon) */
.cv2-promos{margin:0 0 20px}
.cv2-promos-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;background:none;border:none;cursor:pointer;font-family:inherit;font-size:12.5px;font-weight:600;color:var(--c3);padding:4px 2px}
.cv2-promos-toggle span{display:inline-flex;align-items:center;gap:7px}
.cv2-promos-toggle .diy-ico{font-size:15px}
.cv2-promos-chevron{transition:transform .2s}
.cv2-promos-toggle.open .cv2-promos-chevron{transform:rotate(180deg)}
.cv2-promos-list{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.cv2-promos-list[hidden]{display:none}
.cv2-promo{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:var(--c2);border:1px dashed #bcd4e6;border-radius:5px;padding:9px 12px;cursor:pointer;font-family:inherit;transition:border-color .15s,background .15s}
.cv2-promo:hover{border-color:var(--c3);background:#eef1fb}
.cv2-promo:hover .cv2-promo-apply{color:var(--c3)}
.cv2-promo-code{font-weight:700;font-size:13px;letter-spacing:.04em;color:var(--c1);text-transform:uppercase;white-space:nowrap}
.cv2-promo-desc{flex:1;font-size:11px;color:var(--c7)}
.cv2-promo-apply{font-size:18px;color:var(--c9);flex-shrink:0;transition:color .15s}
/* CTA principal */
.cv2-checkout-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;background:var(--c12);color:var(--c1);border:none;border-radius:10px;min-height:55px;font-size:16px;font-family:inherit;cursor:pointer;transition:background .25s,transform .1s;letter-spacing:.01em}
.cv2-checkout-btn:hover{background:var(--c13)}
.cv2-checkout-btn:active{transform:scale(.99)}
.cv2-checkout-btn .diy-ico{font-size:18px}
/* conteneur des boutons de paiement express (rendus par les passerelles).
max-width + centrage : le bouton PayPal a une largeur MAX interne (SDK PayPal) ;
au-delà (sheet très large sur tablette) il plafonne et paraît plus court que
Google Pay. En plafonnant le conteneur sous cette limite, les deux boutons font
la même largeur. Sans effet sur téléphone / sidebar desktop (déjà plus étroits).
Valeur ajustable selon le rendu voulu. */
.cv2-express{margin-top:12px;display:flex;flex-direction:column;gap:8px;max-width:480px;margin-left:auto;margin-right:auto}
/* Passerelles express (PayPal/PPCP + Stripe-Google Pay) : masque les séparateurs
« — ou — / — or — » injectés par les plugins et neutralise leurs marges internes
pour resserrer les boutons (l'espacement vient du gap de .cv2-express).
!important : on bat des styles tiers (possiblement inline) des plugins. */
#cv2-cart .cv2-express .wc-ppcp-cart-payment-method.or,
#cv2-cart .cv2-express .wc-stripe-payment-method.or{display:none !important}
#cv2-cart .cv2-express .wc-ppcp-cart-payment__methods,
#cv2-cart .cv2-express .wc_stripe_cart_payment_methods,
#cv2-cart .cv2-express .wc-ppcp-cart-payment-method,
#cv2-cart .cv2-express .wc-stripe-payment-method{margin:0 !important}
.cv2-secure-note{display:flex;align-items:center;justify-content:center;gap:5px;font-size:12px;color:var(--c7);margin-top:15px}
.cv2-secure-note .diy-ico{font-size:14px}
/* réassurance */
.cv2-trust{display:flex;justify-content:space-between;gap:10px;margin-top:20px}
.cv2-trust-item{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;flex:1;background:#fff;border:1px solid #e5e5e5;border-radius:10px;padding:15px 5px}
.cv2-trust-item .diy-ico{font-size:25px;color:var(--c3)}
/* étoile « avis vérifiés » en jaune/or (les autres icônes restent indigo) */
.cv2-trust-item .cv2-trust-star{color:#f5b301}
.cv2-trust-item span{font-size:10px;line-height:1.3;color:var(--ink-soft);font-weight:500}
/* état « recalcul en cours » du récap (coupon / port) — overlay sur la carte
interne (.cv2-summary), surtout PAS sur l'aside sticky (sinon il saute).
Élément dédié (et non ::after) pour ne pas entrer en conflit avec les fades
du bottom-sheet, qui utilisent ::before/::after sur .cv2-summary en mobile. */
.cv2-busy-overlay{display:none}
/* pointer-events:none : le voile est un simple retour visuel, il ne doit PAS
intercepter les clics (sinon un clic sur un mode d'expédition pendant le
recalcul est avalé → bug « impossible de sélectionner »). L'ordre des réponses
AJAX est déjà géré par appliedSeq (seule la dernière sélection s'applique). */
.cv2-summary.cv2-busy .cv2-busy-overlay{display:block;position:absolute;inset:0;background:rgba(246,246,246,.55);border-radius:20px;z-index:5;pointer-events:none}
/* loader UNIQUE du tunnel : les 3 points de spinner.svg (icône server-only), même
rendu que le blockUI du checkout restylé dans style.css (.blockUI.blockOverlay) */
.cv2-summary.cv2-busy .cv2-busy-overlay::after{content:"";position:absolute;top:50%;left:50%;width:25px;height:25px;transform:translate(-50%,-50%);background:url(../images/icons/spinner.svg) no-repeat center/contain}
/* barre fixe mobile : pendant la même fenêtre, son montant est périmé lui aussi →
estompé via color (PAS opacity : les 3 points en ::after doivent rester pleins),
points superposés en absolu → aucun décalage de mise en page */
#cv2-sticky-bar.cv2-busy .cv2-sticky-amount{position:relative;color:rgba(31,38,36,.3);transition:color .15s}
#cv2-sticky-bar.cv2-busy .cv2-sticky-amount::after{content:"";position:absolute;top:50%;left:50%;width:20px;height:20px;transform:translate(-50%,-50%);background:url(../images/icons/spinner.svg) no-repeat center/contain}
/* état « attente checkout » : clic paiement pendant une synchro (navigation dès la
fin) OU TTFB du checkout après un clic normal. Posé sur #cv2-cart : survit au
re-render de l'aside (apply() remplace #cv2-summary-wrap) et couvre d'un coup le
CTA du récap ET le CTA de la barre fixe. pointer-events:none : les re-clics sont
volontairement inertes (goCheckout déjà armé / navigation en cours). */
#cv2-cart.cv2-checkout-wait .cv2-checkout-btn{opacity:.65;pointer-events:none}
/* le chevron laisse sa place aux 3 points (même gabarit, flex gap → pas de reflow) */
#cv2-cart.cv2-checkout-wait .cv2-checkout-btn .diy-ico{display:none}
#cv2-cart.cv2-checkout-wait .cv2-checkout-btn::after{content:"";width:22px;height:22px;flex-shrink:0;background:url(../images/icons/spinner.svg) no-repeat center/contain}
/* ============ ÉTAT PANIER VIDE ============ */
.cv2-empty{max-width:560px;margin:20px auto 0;text-align:center;padding:30px 20px}
.cv2-empty-ill{width:60px;height:60px;margin:0 auto 20px;border-radius:50%;background:var(--c4);display:flex;align-items:center;justify-content:center}
.cv2-empty-ill .diy-ico{font-size:27px;color:var(--c3)}
.cv2-empty h2{font-family:"Playfair Display",serif;font-weight:500;font-size:26px;margin-bottom:10px}
.cv2-empty p{font-size:14px;color:var(--c7);margin-bottom:25px;line-height:1.7}
.cv2-empty-back{display:inline-flex;align-items:center;gap:10px;background:var(--c12);color:var(--c1);border-radius:15px;padding:15px 30px;font-weight:700;font-size:15px;transition:background .25s}
.cv2-empty-back:hover{background:var(--c13)}
.cv2-empty-back .diy-ico{font-size:17px}
.cv2-empty-cats{margin-top:35px}
.cv2-empty-cats-t{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--c7);margin-bottom:15px}
.cv2-empty-cats-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.cv2-empty-cats-row a{display:flex;flex-direction:column;align-items:center;gap:8px;width:96px}
.cv2-empty-cats-sw{width:72px;height:72px;border-radius:15px;background:var(--c4) center/cover no-repeat}
.cv2-empty-cats-row span{font-size:12.5px;font-weight:600;color:var(--c1)}
/* ============ BARRE FIXE + RÉCAP DÉPLIABLE (bottom-sheet) ============
Mobile/tablette uniquement. Sur desktop, le récap reste sticky latéral
avec son propre bouton « Procéder au paiement » : tout ce qui suit est
neutralisé hors media query. */
.cv2-sticky-bar{display:none}
.cv2-sheet-backdrop{display:none}
.cv2-sheet-close{display:none}
@media(max-width:980px){
/* Hauteur de la barre fixe, centralisée (padding 10+10 + contenu 50 + safe-area). */
#cv2-cart{--cv2-bar-h:calc(70px + env(safe-area-inset-bottom))}
/* Réserve pour la barre fixe : le dernier produit ne passe pas dessous. Combiné
au gap:0 de la grille, le vide réellement visible est minime (l'essentiel de
cette réserve est masqué SOUS la barre). */
#cv2-cart{padding-bottom:calc(var(--cv2-bar-h) + 8px)}
/* CRITIQUE : la colonne récap DOIT rester en flux normal sur mobile. En sticky
(réglage desktop, déclaré plus bas dans le fichier → il gagnait la cascade ici),
elle crée un stacking context qui piège le z-index du bottom-sheet SOUS le voile
→ le voile peignait par-dessus le bas du récap. static = pas de stacking context. */
.cv2-summary-col{position:static}
/* --- Le récap devient un bottom-sheet glissant depuis le bas --- */
/* Le sheet = carte qui CLIPPE (coins arrondis + fades) ; il s'arrête pile au-dessus
de la barre fixe (bottom = hauteur de barre). Le scroll se fait dans .cv2-summary-body. */
.cv2-summary{
position:fixed;left:0;right:0;bottom:var(--cv2-bar-h);z-index:1001;
/* garde le gris desktop (var(--c4)) — pas de fond blanc sur mobile */
max-height:70vh;overflow:hidden;margin:0;padding:0;
border-radius:20px 20px 0 0;
transform:translateY(110%);
transition:transform .32s cubic-bezier(.4,0,.2,1);
box-shadow:0 -10px 40px rgba(31,38,36,.18);
}
body.cv2-sheet-open .cv2-summary{transform:translateY(0)}
/* Corps scrollable interne du sheet. padding-bottom élargi : la dernière ligne
(« Paiement sécurisé ») passe bien SOUS le fondu bas et reste lisible. */
.cv2-summary-body{max-height:70vh;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:20px}
/* Fondus haut/bas — MÊME système que la liste produits : pilotés par initScrollFades
(.can-up / .can-down), donc visibles UNIQUEMENT s'il reste à scroller dans ce sens
(pas de titre estompé quand on est en haut). */
.cv2-summary::before,
.cv2-summary::after{content:"";position:absolute;left:0;right:0;height:28px;pointer-events:none;opacity:0;transition:opacity .25s ease;z-index:3}
.cv2-summary::before{top:0;border-radius:20px 20px 0 0;background:linear-gradient(to bottom,var(--c4),rgba(246,246,246,0))}
.cv2-summary::after{bottom:0;background:linear-gradient(to top,var(--c4),rgba(246,246,246,0))}
.cv2-summary.can-up::before{opacity:1}
.cv2-summary.can-down::after{opacity:1}
/* CTA du récap masqué sur mobile (la barre fixe porte le bouton). La note
« Paiement sécurisé », elle, reste visible dans le sheet. */
.cv2-summary .cv2-checkout-btn{display:none}
/* Bouton fermer le sheet (rond, en haut à droite). */
.cv2-sheet-close{
display:inline-flex;align-items:center;justify-content:center;
position:absolute;top:18px;right:18px;width:34px;height:34px;border-radius:50%;
background:var(--inset);border:1px solid #e5e5e5;cursor:pointer;color:var(--c1);z-index:4;transition:background .2s}
.cv2-sheet-close:hover{background:#e4e4e4}
.cv2-sheet-close .diy-ico{font-size:18px}
/* --- Voile derrière le sheet (assombrit la page, pas la barre) --- */
.cv2-sheet-backdrop{
display:block;position:fixed;inset:0;z-index:1000;
background:rgba(31,38,36,.45);opacity:0;pointer-events:none;
transition:opacity .3s ease}
body.cv2-sheet-open .cv2-sheet-backdrop{opacity:1;pointer-events:auto}
/* Verrou de scroll de l'arrière-plan quand le sheet est ouvert. */
body.cv2-sheet-open{overflow:hidden}
/* --- Barre fixe en bas : total + toggle détail à gauche, CTA à droite --- */
.cv2-sticky-bar{
display:flex;align-items:stretch;gap:12px;
position:fixed;left:0;right:0;bottom:0;z-index:1002;
background:#fff;border-top:1px solid var(--line);
padding:10px 16px calc(10px + env(safe-area-inset-bottom));
box-shadow:0 -4px 20px rgba(31,38,36,.08)}
/* Bloc total = bouton gris clair (même gris que le bouton retour-boutique) :
« Total » + chevron en haut, prix centré dessous. Lit clairement comme cliquable. */
.cv2-sticky-detail{
display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
flex-shrink:0;min-width:112px;min-height:50px;padding:6px 16px;
background:var(--c4);border:1px solid #e5e5e5;border-radius:5px;cursor:pointer;font-family:inherit;color:var(--c1);
transition:background .2s}
.cv2-sticky-detail:hover{background:#ececec}
.cv2-sticky-top{display:inline-flex;align-items:center;gap:6px;line-height:1}
/* libellé actionnable en bleu brand : dit « ouvre-moi », pas juste « info » */
.cv2-sticky-label{font-size:12px;color:var(--c3);font-weight:600}
/* nowrap sur tout le montant : grossit le bouton plutôt que de couper un gros total */
.cv2-sticky-amount{font-size:17px;font-weight:700;letter-spacing:-.01em;line-height:1.15;white-space:nowrap}
.cv2-sticky-amount .amount{white-space:nowrap}
.cv2-sticky-chevron{font-size:15px;filter:var(--ico-blue);transition:transform .25s}
body.cv2-sheet-open .cv2-sticky-chevron{transform:rotate(180deg)}
/* nudge à l'arrivée : 2 petits rebonds du chevron puis immobile */
@media (prefers-reduced-motion: no-preference){
.cv2-sticky-chevron{animation:funnel-nudge .9s ease .8s 2}
}
/* le CTA réutilise .cv2-checkout-btn : il prend la place restante et sa font
s'adapte (clamp) pour ne jamais passer à la ligne, même total à 6 chiffres. */
.cv2-sticky-cta{flex:1 1 auto;min-width:0;min-height:50px;gap:6px;padding-left:10px;padding-right:10px;font-size:clamp(13px,3.4vw,15px);white-space:nowrap;border-radius:5px}
.cv2-sticky-cta .diy-ico{font-size:16px}
}
/* responsive ligne produit */
@media(max-width:560px){
/* Carte horizontale compacte : vignette à gauche, à droite le titre (1 ligne,
plus petit), la ligne meta puis les contrôles. display:contents sur .cv2-info
remonte titre + meta dans la grille de la ligne. */
.cv2-line{
grid-template-columns:84px 1fr;
grid-template-areas:
"thumb title"
"thumb meta"
"thumb right";
column-gap:10px;row-gap:0px;align-items:start;
}
.cv2-info{display:contents}
.cv2-thumb{width:84px;height:84px;grid-area:thumb}
.cv2-ptitle{grid-area:title;font-size:15px;margin-bottom:0;padding-right:40px} /* place réservée pour la poubelle en absolu */
.cv2-meta{grid-area:meta;margin-bottom:0}
/* la largeur disparaît en mobile, on garde le prix au mètre */
.cv2-meta .cv2-chip-size{display:none}
/* poubelle remontée en haut à droite (au niveau du titre) en absolu ;
sous-total à gauche, quantité à droite ; convertisseur masqué. */
.cv2-right{grid-area:right;flex-direction:row;flex-wrap:wrap;align-items:center;width:100%;text-align:left;gap:6px;margin-top:4px}
.cv2-right .cv2-right-top{display:contents}
.cv2-right .cv2-subtotal{order:1;font-size:16px}
.cv2-right .cv2-qty{order:2;margin-left:auto}
body.cv2-active .cv2-right .cv2-qty-max{order:3;width:100%;text-align:right}
.cv2-remove{position:absolute;top:10px;right:10px;margin-top:0}
.cv2-right .cv2-len-row{display:none}
/* stepper compacté pour tenir sur une ligne même sur iPhone SE (~375px) */
.cv2-qty button{width:32px;height:38px}
.cv2-qty .cv2-n{width:32px}
}
/* === Icones SVG locales (![]()
) -- remplacent la police HugeIcons CDN ===
Un ![]()
n_herite PAS la couleur du texte -> recolorisation au filter CSS.
Blanc = exact ; bleu/vert/or/rouge = approches (ajustables ici). */
:root{
--ico-white:brightness(0) invert(1);
--ico-green:brightness(0) saturate(100%) invert(20%) sepia(98%) saturate(642%) hue-rotate(132deg) brightness(94%) contrast(101%); /* --c8 #005743 */
--ico-blue:brightness(0) saturate(100%) invert(24%) sepia(58%) saturate(1015%) hue-rotate(202deg) brightness(91%) contrast(89%); /* --c3 #3a478e */
--ico-gold:brightness(0) saturate(100%) invert(73%) sepia(54%) saturate(2878%) hue-rotate(1deg) brightness(103%) contrast(101%); /* #f5b301 */
--ico-red:brightness(0) saturate(100%) invert(33%) sepia(73%) saturate(2613%) hue-rotate(338deg) brightness(96%) contrast(89%); /* --c10 #e03c3d */
}
.diy-ico{width:1em;height:1em;display:inline-block;vertical-align:middle}
/* rebond discret du chevron des barres sticky mobiles (panier + checkout) */
@keyframes funnel-nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
/* couleurs panier */
.cv2-ship-msg .diy-ico{filter:var(--ico-green)}
.cv2-trust-item .diy-ico{filter:var(--ico-blue)}
.cv2-trust-item .cv2-trust-star{filter:var(--ico-gold)}
.cv2-empty-ill .diy-ico{filter:var(--ico-blue)}
.cv2-coupon-ic .diy-ico{filter:var(--ico-white)}
.cv2-remove:hover .diy-ico{filter:var(--ico-white)}
/* ============================================================
CHECKOUT v2 — DiY District · « Votre commande » (premier jet)
Scopé sous body.cko2-active. Tokens identiques au panier v2.
Espacements en multiples de 5px. Icônes = SVG locaux (assets/images/icons/).
============================================================ */
body.cko2-active{
--c1:#1f2624; --c2:#fff; --c3:#3a478e; --c4:#f6f6f6;
--c5:#686f8c; --c7:#767676; --c8:#005743; --c9:#cfcfcf;
--c10:#e03c3d; --c11:#5567cd; --c12:#38e8bd; --c13:#56f9d0;
--orange:#fa9e58; --line:#ececec; --ink-soft:#5b625f; --inset:#f0f0f0;
}
/* on masque l'entête produits natif (#heading-products) — on a notre propre titre */
body.cko2-active #heading-products{display:none}
/* ====== Carte « Votre commande » ====== */
body.cko2-active #cko2-review{
background:var(--c4);
border:1px solid rgba(0,0,0,.06);
border-radius:20px;
padding:20px;
font-family:"Open Sans",sans-serif;
color:var(--c1);
}
body.cko2-active #cko2-review *{box-sizing:border-box}
/* voile blockUI (récap + paiement pendant update_checkout) : mêmes blanc et coins
que le voile du panier — les 3 points, eux, viennent déjà de style.css
(.blockUI.blockOverlay:after). Styles inline posés par blockUI → !important. */
body.cko2-active .blockUI.blockOverlay{background:rgba(246,246,246,.55)!important;opacity:1!important;border-radius:20px}
body.cko2-active #cko2-review .diy-ico{display:inline-block;vertical-align:middle;line-height:1;flex-shrink:0}
body.cko2-active .cko2-title{
font-family:"Playfair Display",serif;font-weight:700;font-size:22px;
margin:0 0 20px;padding-bottom:15px;border-bottom:1px solid var(--line);
}
/* ====== Barre « port offert » en tête (avant les produits) — même fond que le panier v2 ====== */
body.cko2-active .cko2-ship-bar{background:var(--inset);border:1px solid #e7e7e7;border-radius:10px;padding:15px;margin-bottom:20px}
body.cko2-active .cko2-ship-msg{font-size:13px;line-height:1.45;margin-bottom:10px;display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;text-align:center;color:var(--ink-soft)}
body.cko2-active .cko2-ship-msg b{color:var(--c1);font-weight:700}
body.cko2-active .cko2-ship-msg .diy-ico{color:var(--c8);font-size:16px}
body.cko2-active .cko2-ship-track{height:5px;border-radius:999px;background:#d6d6d6;overflow:hidden}
body.cko2-active .cko2-ship-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,#38dbb3,var(--c12));transition:width .4s}
/* ====== Lignes produits (cartes) ====== */
/* la marge basse passe sur le wrapper ; .cko2-olines devient la zone scrollable */
body.cko2-active .cko2-olines-wrap{margin-bottom:20px}
body.cko2-active .cko2-olines{display:flex;flex-direction:column;gap:15px}
/* padding haut/bas : la bulle quantité (top:-5px) n'est plus rognée ; padding-right:5px :
la scrollbar ne passe plus sur les items */
body.cko2-active .cko2-olines.diy-scroller{max-height:320px;overflow-y:auto;overflow-x:hidden;padding:8px 10px 8px 0;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--c9) transparent}
body.cko2-active .cko2-olines.diy-scroller::-webkit-scrollbar{width:6px}
body.cko2-active .cko2-olines.diy-scroller::-webkit-scrollbar-thumb{background:var(--c9);border-radius:999px}
/* ====== Indicateur de scroll : fades doux haut/bas (génériques) ======
Le wrapper .diy-scroll-fade porte les dégradés ; le JS ajoute .can-up / .can-down
selon la position de scroll de l'enfant .diy-scroller (fade masqué à l'extrémité atteinte).
--fade-bg = couleur de fond derrière la liste (carte #cko2-review = var(--c4)). */
body.cko2-active .diy-scroll-fade{position:relative;--fade-bg:#f6f6f6;--fade-bg0:rgba(246,246,246,0)}
body.cko2-active .diy-scroll-fade::before,
body.cko2-active .diy-scroll-fade::after{content:"";position:absolute;left:0;right:0;height:32px;pointer-events:none;opacity:0;transition:opacity .25s ease;z-index:3}
body.cko2-active .diy-scroll-fade::before{top:0;background:linear-gradient(to bottom,var(--fade-bg),var(--fade-bg0))}
body.cko2-active .diy-scroll-fade::after{bottom:0;background:linear-gradient(to top,var(--fade-bg),var(--fade-bg0))}
body.cko2-active .diy-scroll-fade.can-up::before{opacity:1}
body.cko2-active .diy-scroll-fade.can-down::after{opacity:1}
body.cko2-active .cko2-oline{display:grid;grid-template-columns:55px 1fr auto;gap:15px;align-items:center;position:relative}
body.cko2-active .cko2-othumb{width:55px;height:55px;border-radius:10px;overflow:hidden;background:var(--inset);flex-shrink:0}
body.cko2-active .cko2-othumb img{width:100%;height:100%;object-fit:cover;display:block}
/* badge quantité posé sur .cko2-oline (PAS dans la vignette overflow:hidden) → non rogné */
body.cko2-active .cko2-oqty{
position:absolute;left:40px;top:-5px;
min-width:20px;height:20px;padding:0 5px;border-radius:999px;
background:var(--c3);color:#fff;font-size:11px;font-weight:700;
display:flex;align-items:center;justify-content:center;border:2px solid var(--c4);
}
/* titre sur UNE ligne (… au-delà) — info détaillée déjà vue sur le panier */
body.cko2-active .cko2-oname{min-width:0;font-size:14px;font-weight:600;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.cko2-active .cko2-oname a{color:inherit;text-decoration:none}
body.cko2-active .cko2-oprice{font-weight:700;font-size:14px;white-space:nowrap;text-align:right}
/* Variations / attributs (Coloris…) sous le nom — le nom reste tronqué sur 1 ligne,
la méta passe dessous en normal (white-space:normal annule le nowrap hérité). */
body.cko2-active .cko2-ometa{white-space:normal;font-weight:400;font-size:12px;line-height:1.3;color:var(--c7);margin-top:3px}
body.cko2-active .cko2-ometa dl,body.cko2-active .cko2-ometa .variation{margin:0;padding:0}
body.cko2-active .cko2-ometa dt{display:inline;margin:0;font-weight:600}
body.cko2-active .cko2-ometa dd{display:inline;margin:0 8px 0 3px}
body.cko2-active .cko2-ometa dd p{display:inline;margin:0}
/* ====== Coupon : ticket identique au panier v2 ====== */
body.cko2-active .cko2-coupon{margin:20px 0 10px;display:flex;align-items:stretch;background:linear-gradient(100deg,#eafaf5,#f3f1fb);border-radius:5px;overflow:hidden}
body.cko2-active .cko2-coupon-ic{flex:0 0 46px;background:var(--c3);color:#fff;display:flex;align-items:center;justify-content:center}
body.cko2-active .cko2-coupon-ic .diy-ico{font-size:20px}
body.cko2-active .cko2-coupon-body{flex:1;min-width:0;display:flex;align-items:center;gap:5px;padding:15px 10px;border:1px solid #c9e1f0}
body.cko2-active .cko2-coupon-input{flex:1;min-width:0;border:none;background:transparent;font-family:inherit;font-size:13px;color:var(--c1)}
body.cko2-active .cko2-coupon-input:focus{outline:none}
body.cko2-active .cko2-coupon-input::placeholder{color:var(--c7)}
body.cko2-active .cko2-coupon-apply{border:none;background:none;font-family:inherit;font-size:13px;font-weight:700;color:var(--c3);cursor:pointer;white-space:nowrap}
body.cko2-active .cko2-coupon-apply:disabled{opacity:.5;cursor:default}
/* dropdown « codes promo actifs » (identique au panier v2) */
body.cko2-active .cko2-promos{margin:0 0 20px}
body.cko2-active .cko2-promos-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;background:none;border:none;cursor:pointer;font-family:inherit;font-size:12.5px;font-weight:600;color:var(--c3);padding:4px 2px}
body.cko2-active .cko2-promos-toggle span{display:inline-flex;align-items:center;gap:7px}
body.cko2-active .cko2-promos-toggle .diy-ico{font-size:15px}
body.cko2-active .cko2-promos-chevron{transition:transform .2s}
body.cko2-active .cko2-promos-toggle.open .cko2-promos-chevron{transform:rotate(180deg)}
body.cko2-active .cko2-promos-list{display:flex;flex-direction:column;gap:8px;margin-top:8px}
body.cko2-active .cko2-promos-list[hidden]{display:none}
body.cko2-active .cko2-promo{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:var(--c2);border:1px dashed #bcd4e6;border-radius:5px;padding:9px 12px;cursor:pointer;font-family:inherit;transition:border-color .15s,background .15s}
body.cko2-active .cko2-promo:hover{border-color:var(--c3);background:#eef1fb}
body.cko2-active .cko2-promo:hover .cko2-promo-apply{color:var(--c3)}
body.cko2-active .cko2-promo-code{font-weight:700;font-size:13px;letter-spacing:.04em;color:var(--c1);text-transform:uppercase;white-space:nowrap}
body.cko2-active .cko2-promo-desc{flex:1;font-size:11px;color:var(--c7)}
body.cko2-active .cko2-promo-apply{font-size:18px;color:var(--c9);flex-shrink:0;transition:color .15s}
/* coupon appliqué : encart vert (identique au panier v2) */
body.cko2-active .cko2-totals tr.cart-discount{display:flex;background:#eafaf5 !important;border:1px solid #b7e4d3 !important;border-radius:8px;margin:8px 0;padding:10px}
body.cko2-active .cko2-totals tr.cart-discount th,
body.cko2-active .cko2-totals tr.cart-discount td{color:var(--c8) !important;font-weight:700}
body.cko2-active .cko2-totals tr.cart-discount td{display:flex;align-items:center;justify-content:flex-end;gap:6px}
/* lien « [Enlever] » remplacé par une simple croix verte (équivalente au panier, sans hover) */
body.cko2-active .cko2-totals .woocommerce-remove-coupon{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;margin-left:6px;font-size:0;line-height:0;text-decoration:none;vertical-align:middle}
body.cko2-active .cko2-totals .woocommerce-remove-coupon::after{content:"\00d7";font-size:16px;line-height:1;font-weight:700;color:var(--c8)}
/* ====== Totaux : table restylée en lignes flex (hooks préservés) ====== */
body.cko2-active .cko2-totals,
body.cko2-active .cko2-totals tbody,
body.cko2-active .cko2-totals tfoot{display:block;width:100%;border:0;margin:0}
body.cko2-active .cko2-totals tr{display:flex;justify-content:space-between;align-items:baseline;gap:15px;padding:10px 0;border:0;margin:0}
body.cko2-active .cko2-totals th,
body.cko2-active .cko2-totals td{display:block;padding:0;border:0;background:none;font-size:14px}
body.cko2-active .cko2-totals th{color:var(--ink-soft);font-weight:400;text-align:left}
body.cko2-active .cko2-totals td{color:var(--c1);font-weight:600;text-align:right;white-space:nowrap}
body.cko2-active .cko2-totals .cart-discount td{color:var(--c8)}
/* Total : identique au panier v2 (.cv2-grand) */
body.cko2-active .cko2-totals .order-total{border-top:1px solid var(--line);margin-top:5px;padding-top:15px}
body.cko2-active .cko2-totals .order-total th{font-weight:700;color:var(--c1);font-size:15px}
body.cko2-active .cko2-totals .order-total td,
body.cko2-active .cko2-totals .order-total td strong,
body.cko2-active .cko2-totals .order-total td .woocommerce-Price-amount{font-weight:700;color:var(--c1);font-size:20px;letter-spacing:-.01em}
/* mode d'expédition (radios natifs, laissés éditables) */
body.cko2-active .cko2-totals tr.shipping{flex-direction:column;align-items:stretch}
body.cko2-active .cko2-totals tr.shipping th{margin-bottom:10px}
body.cko2-active .cko2-totals tr.shipping td{text-align:left;white-space:normal;font-weight:400}
body.cko2-active #shipping_method{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
body.cko2-active #shipping_method li{display:flex;align-items:center;gap:10px;font-size:13px}
body.cko2-active #shipping_method li input{accent-color:var(--c3)}
body.cko2-active #shipping_method li label{color:var(--c1);font-weight:500;margin:0}
body.cko2-active #shipping_method .amount{font-weight:700}
/* ====== Notices (
pleine largeur) : IOSS / DDP US / zones isolées / port ====== */
body.cko2-active .cko2-totals tr.ioss-included-notice,
body.cko2-active .cko2-totals tr.ioss-excluded-notice,
body.cko2-active .cko2-totals tr.ddp-us-notice,
body.cko2-active .cko2-totals tr.remote-zone-notice,
body.cko2-active .cko2-totals tr.progress-bar-shipping{display:block;padding:0}
/* texte informatif (IOSS / DDP / zones isolées) : encart compact, fond + bordure */
body.cko2-active .cko2-totals tr.ioss-included-notice td,
body.cko2-active .cko2-totals tr.ioss-excluded-notice td,
body.cko2-active .cko2-totals tr.ddp-us-notice td,
body.cko2-active .cko2-totals tr.remote-zone-notice td{
display:block;text-align:justify;white-space:normal;
margin:12px 0 0;padding:12px 14px;border-radius:12px;border:1px solid #cfd8f5 !important;
font-size:11px !important;line-height:1.55;color:#2f3a73;background:#eef1fb !important;font-weight:400;
}
body.cko2-active .cko2-totals tr.ioss-included-notice small,
body.cko2-active .cko2-totals tr.ioss-excluded-notice small,
body.cko2-active .cko2-totals tr.ddp-us-notice small,
body.cko2-active .cko2-totals tr.remote-zone-notice small{display:block;font-size:inherit}
/* toutes les notices partagent le même design bleu (défini ci-dessus) */
/* mobile : encart encore plus compact pour gagner de la place */
@media(max-width:560px){
body.cko2-active .cko2-totals tr.ioss-included-notice td,
body.cko2-active .cko2-totals tr.ioss-excluded-notice td,
body.cko2-active .cko2-totals tr.ddp-us-notice td,
body.cko2-active .cko2-totals tr.remote-zone-notice td{margin-top:10px;padding:10px 12px;font-size:11px !important;line-height:1.5}
}
body.cko2-active .cko2-totals tr td a{color:var(--c3);font-weight:600;text-decoration:underline;text-underline-offset:2px}
/* ====== Barre « port offert » : identique au panier v2 ====== */
body.cko2-active .cko2-totals tr.progress-bar-shipping td{
display:block;text-align:left;white-space:normal;
margin:12px 0 0;padding:15px;border-radius:10px;background:var(--inset);color:var(--ink-soft);
}
body.cko2-active .cko2-totals .progress-bar-shipping p{margin:0 0 10px;font-size:13px;line-height:1.45;color:var(--ink-soft)}
body.cko2-active .cko2-totals .progress-bar-shipping p .woocommerce-Price-amount{font-weight:700;color:var(--c1)}
body.cko2-active .cko2-totals .progress-bar-shipping progress{width:100%;height:5px;border:0;border-radius:999px;background:#d6d6d6;overflow:hidden;-webkit-appearance:none;appearance:none}
body.cko2-active .cko2-totals .progress-bar-shipping progress::-webkit-progress-bar{background:#d6d6d6;border-radius:999px}
body.cko2-active .cko2-totals .progress-bar-shipping progress::-webkit-progress-value{background:linear-gradient(90deg,var(--green,#38dbb3),var(--c12));border-radius:999px}
body.cko2-active .cko2-totals .progress-bar-shipping progress::-moz-progress-bar{background:var(--c12);border-radius:999px}
/* la barre « port offert » vit désormais EN HAUT (.cko2-ship-bar) : on neutralise
toute occurrence résiduelle en bas des totaux (sécurité si le hook persiste en AJAX) */
body.cko2-active .cko2-totals tr.progress-bar-shipping{display:none}
/* ====== Titres injectés (avis / paiement) — restyle léger ====== */
body.cko2-active #heading-reviews,
body.cko2-active #heading-payments{
font-family:"Playfair Display",serif;font-weight:700;font-size:18px;margin:25px 0 15px;color:var(--c1);
}
/* ============================================================
CHECKOUT v2 — ACCORDÉON 3 ÉTAPES (form-checkout-v2)
Mapping sur le markup WooCommerce réel. Espacements x5.
============================================================ */
/* entête de page du thème masquée (look épuré) */
body.cko2-active .header-content{display:none}
body.cko2-active .page-content{max-width:none}
body.cko2-active .cko2-form{font-family:"Open Sans",sans-serif;color:var(--c1)}
body.cko2-active .cko2-form .diy-ico{display:inline-block;vertical-align:middle;line-height:1;flex-shrink:0}
/* ====== Layout 2 colonnes ====== */
/* le thème passe form.checkout en display:grid (ancien layout 2 colonnes) →
on le neutralise pour que NOTRE .cko2-grid pilote la mise en page */
body.cko2-active form.checkout.cko2-form{display:block;grid-template-columns:none;max-width:none;margin:0;padding:0}
body.cko2-active .cko2-grid{display:grid;grid-template-columns:1fr 420px;gap:40px;align-items:start}
@media(max-width:980px){body.cko2-active .cko2-grid{grid-template-columns:1fr;gap:25px}}
body.cko2-active .cko2-steps{display:flex;flex-direction:column;gap:15px;min-width:0}
/* ====== Accordéon : étapes ====== */
body.cko2-active .cko2-step{border:1px solid var(--line);border-radius:15px;background:#fff;overflow:hidden;transition:border-color .2s,box-shadow .2s}
body.cko2-active .cko2-step.active{border-color:#d6dbf0;box-shadow:0 6px 22px rgba(58,71,142,.07)}
body.cko2-active .cko2-step-head{display:flex;align-items:center;gap:15px;padding:20px;cursor:pointer;user-select:none}
body.cko2-active .cko2-step.locked .cko2-step-head{cursor:default}
body.cko2-active .cko2-step-num{flex:0 0 30px;width:30px;height:30px;border-radius:50%;background:var(--c4);color:var(--c7);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;transition:.2s}
body.cko2-active .cko2-step.active .cko2-step-num{background:var(--c3);color:#fff}
body.cko2-active .cko2-step.done .cko2-step-num{background:var(--c8);color:#fff}
body.cko2-active .cko2-step-title{flex:1;min-width:0}
body.cko2-active .cko2-step-title .cko2-t{font-family:"Playfair Display",serif;font-weight:700;font-size:22px;line-height:1.2;display:block}
body.cko2-active .cko2-recap{font-size:13px;line-height:1.5;color:var(--c7);margin-top:5px;display:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.cko2-active .cko2-step.done .cko2-recap{display:block}
body.cko2-active .cko2-step-edit{font-size:13px;font-weight:600;color:var(--c3);background:none;border:none;cursor:pointer;font-family:inherit;display:none;align-items:center;gap:5px}
body.cko2-active .cko2-step-edit .diy-ico{font-size:14px}
body.cko2-active .cko2-step.done .cko2-step-edit{display:inline-flex}
body.cko2-active .cko2-step-lock{display:none;color:var(--c9)}
body.cko2-active .cko2-step.locked .cko2-step-lock{display:inline-flex}
body.cko2-active .cko2-step-lock .diy-ico{font-size:17px}
/* Accordéon fluide : transition grid-template-rows 0fr→1fr → s'anime à la hauteur
RÉELLE du contenu (plus le saut du max-height fixe quand Coordonnées >> Livraison). */
body.cko2-active .cko2-step-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s ease}
body.cko2-active .cko2-step.active .cko2-step-body{grid-template-rows:1fr}
/* padding HORIZONTAL toujours ; padding VERTICAL seulement à l'ouverture → replié,
la boîte de padding ne laisse plus dépasser le haut du contenu (collapse réel à 0). */
body.cko2-active .cko2-step-inner{overflow:hidden;min-height:0;padding:0 20px}
body.cko2-active .cko2-step.active .cko2-step-inner{padding:5px 20px 20px}
/* repositionnement doux à l'ouverture : le header tunnel n'est PAS fixe → petite marge */
body.cko2-active .cko2-step{scroll-margin-top:20px}
/* Mêmes propriétés que le mixin btn-main du site (couleurs, hover, radius, police,
transition), mais en pleine largeur pour le checkout (icône conservée). */
body.cko2-active .cko2-step-cta{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;background:var(--c3);color:#fff;border:none;border-radius:5px;min-height:50px;font-size:16px;font-weight:500;font-family:inherit;cursor:pointer;margin-top:20px;transition:background-color .3s,color .3s}
body.cko2-active .cko2-step-cta:hover{background:var(--c11);color:#fff}
body.cko2-active .cko2-step-cta .diy-ico{font-size:17px}
body.cko2-active .cko2-step-err{display:none;align-items:center;gap:10px;background:#fdecec;color:#a02020;border-radius:10px;padding:10px 15px;font-size:12.5px;margin-top:15px}
body.cko2-active .cko2-step-err.show{display:flex}
body.cko2-active .cko2-step-err .diy-ico{font-size:15px;flex-shrink:0}
/* ====== Champs WooCommerce (billing / shipping) ====== */
body.cko2-active .woocommerce-billing-fields > h3,
body.cko2-active .woocommerce-additional-fields > h3{display:none}
body.cko2-active .woocommerce-billing-fields__field-wrapper,
body.cko2-active .woocommerce-shipping-fields__field-wrapper,
body.cko2-active .woocommerce-additional-fields__field-wrapper{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:520px){body.cko2-active .woocommerce-billing-fields__field-wrapper,body.cko2-active .woocommerce-shipping-fields__field-wrapper{grid-template-columns:1fr}}
/* width:auto + float:none : neutralise les largeurs/flottants du thème
(.form-row-first/last) pour que la grille pilote un vrai 50/50 */
body.cko2-active .cko2-form .form-row{margin:0;padding:0;width:auto;float:none;min-width:0}
body.cko2-active .cko2-form .form-row-wide,
body.cko2-active .cko2-form .form-row-full,
body.cko2-active .cko2-form .notes{grid-column:1 / -1}
/* Notes de commande masquées (champ facultatif non souhaité) */
body.cko2-active .cko2-form #order_comments_field{display:none}
/* Champ technique EAS (IOSS) masqué : pas d'UI à afficher au client.
Le plugin EAS injecte un style INLINE `display:block` sur ce form-row → il faut
`!important` pour le battre (l'input caché eascompliance_nonce_calc reste soumis,
display:none n'empêche pas l'envoi du champ). */
body.cko2-active .form-row.eascompliance,
body.cko2-active .cko2-form #eascompliance_field,
body.cko2-active .cko2-form [class*="eascompliance"].form-row{display:none !important}
body.cko2-active .cko2-form .form-row label{display:block;font-size:12px;font-weight:600;color:var(--c7);margin:0 0 5px 2px}
body.cko2-active .cko2-form .form-row label .required,
body.cko2-active .cko2-form .form-row label abbr{color:var(--c10);text-decoration:none;border:0}
body.cko2-active .cko2-form .input-text,
body.cko2-active .cko2-form textarea,
body.cko2-active .cko2-form select{width:100%;min-height:50px;border:1.5px solid var(--line);border-radius:10px;background:#fff;padding:10px 15px;font-family:inherit;font-size:15px;color:var(--c1);transition:border-color .2s}
body.cko2-active .cko2-form textarea{min-height:80px;resize:vertical}
body.cko2-active .cko2-form .input-text:focus,
body.cko2-active .cko2-form textarea:focus,
body.cko2-active .cko2-form select:focus{outline:none;border-color:var(--c3)}
body.cko2-active .cko2-form .select2-container--default .select2-selection--single{height:50px;border:1.5px solid var(--line);border-radius:10px;display:flex;align-items:center;padding:0 10px}
body.cko2-active .cko2-form .select2-container--default .select2-selection--single .select2-selection__rendered{line-height:normal;color:var(--c1);padding:0 5px}
body.cko2-active .cko2-form .select2-container--default .select2-selection--single .select2-selection__arrow{height:48px}
body.cko2-active .cko2-form .select2-container--open .select2-selection--single,
body.cko2-active .cko2-form .select2-container--focus .select2-selection--single{border-color:var(--c3)}
body.cko2-active .cko2-form .woocommerce-account-fields .create-account,
body.cko2-active .cko2-form #ship-to-different-address,
body.cko2-active .cko2-form .checkbox{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;color:var(--ink-soft);font-weight:400;cursor:pointer;margin:15px 0 0}
/* Ces lignes "case à cocher" sont en display:flex ; le clearfix WooCommerce
(.form-row::before/::after{content:" ";display:table}) y devient un flex item fantôme
qui décale la case de ~10px (le gap). On le neutralise pour aligner les cases entre elles. */
body.cko2-active .cko2-form .woocommerce-account-fields .create-account::before,
body.cko2-active .cko2-form .woocommerce-account-fields .create-account::after,
body.cko2-active .cko2-form #ship-to-different-address::before,
body.cko2-active .cko2-form #ship-to-different-address::after{content:none}
body.cko2-active .cko2-form input[type=checkbox]{accent-color:var(--c3);width:16px;height:16px;margin-top:3px;flex-shrink:0}
body.cko2-active .cko2-form #ship-to-different-address label{font-weight:500;margin:0}
body.cko2-active .cko2-form #ship-to-different-address{margin-bottom:10px}
body.cko2-active .cko2-form .form-row.cko2-invalid .input-text,
body.cko2-active .cko2-form .form-row.cko2-invalid select,
body.cko2-active .cko2-form .woocommerce-invalid .input-text{border-color:var(--c10);background:#fff6f6}
/* ====== Mode de livraison (cartes radio, étape 2) ====== */
body.cko2-active .cko2-ship-label{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--c7);margin:20px 0 10px}
body.cko2-active .cko2-zone-note{font-size:11px;color:var(--c7);background:#eef1fb;border-radius:5px;padding:10px;margin-bottom:15px;display:flex;gap:7px;align-items:flex-start}
body.cko2-active .cko2-zone-note .diy-ico{font-size:14px;color:var(--c3);flex-shrink:0;margin-top:1px}
body.cko2-active .cko2-options{display:flex;flex-direction:column;gap:10px}
body.cko2-active .cko2-options.opts-error{outline:1.5px solid var(--c10);outline-offset:5px;border-radius:13px}
body.cko2-active .cko2-opt{display:flex;align-items:center;gap:15px;border:1.5px solid var(--line);border-radius:10px;padding:15px;cursor:pointer;transition:border-color .2s,background .2s;position:relative}
body.cko2-active .cko2-opt:hover{border-color:#d6dbf0}
body.cko2-active .cko2-opt.sel{border-color:var(--c3);background:#f8f9fe}
body.cko2-active .cko2-opt input{position:absolute;opacity:0;pointer-events:none}
body.cko2-active .cko2-radio{flex:0 0 20px;width:20px;height:20px;border-radius:50%;border:2px solid var(--c9);position:relative;transition:.2s}
body.cko2-active .cko2-opt.sel .cko2-radio{border-color:var(--c3)}
body.cko2-active .cko2-opt.sel .cko2-radio::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--c3)}
body.cko2-active .cko2-oc{flex:1;min-width:0}
body.cko2-active .cko2-ot{font-weight:600;font-size:14.5px;display:block}
body.cko2-active .cko2-od{display:block;font-size:12px;color:var(--c7);margin-top:2px}
body.cko2-active .cko2-price{font-weight:700;font-size:15px;white-space:nowrap}
body.cko2-active .cko2-price.free{color:var(--c8)}
body.cko2-active .cko2-ship-empty{font-size:13px;color:var(--c7);padding:10px 0}
/* ====== Paiement (#payment réel) en cartes ====== */
body.cko2-active #payment{background:none;border:0;padding:0}
/* Étape paiement repliée : on retire #payment du flux. L'élément carte Stripe
est un iframe à hauteur fixe qui ÉCHAPPE au clip grid 0fr de l'accordéon sur
Firefox (OK sur Chrome) → un vide apparaît sous le contenu. #payment ne sert
que lorsque l'étape est ouverte ; à l'ouverture (.active) il réapparaît et le
corps de l'accordéon continue de coulisser normalement. */
body.cko2-active .cko2-step:not(.active) #payment{display:none}
body.cko2-active #payment ul.payment_methods{list-style:none;margin:0 0 15px;padding:0;border:0;display:flex;flex-direction:column;gap:10px}
/* li en ligne flex : radio + titre (+ logos) sur la MÊME ligne ;
le payment_box (3e enfant) passe en dessous via flex-wrap */
body.cko2-active #payment ul.payment_methods > li{display:flex;flex-wrap:wrap;align-items:center;gap:10px;border:1.5px solid var(--line);border-radius:10px;padding:15px;transition:border-color .2s,background .2s}
body.cko2-active #payment ul.payment_methods li.wc_payment_method > label{display:flex;align-items:center;gap:10px;flex:1 1 auto;min-width:0;font-weight:600;font-size:14.5px;cursor:pointer;margin:0}
body.cko2-active #payment ul.payment_methods li input[type=radio]{flex:0 0 auto;accent-color:var(--c3);width:18px;height:18px;margin:0}
/* Logos PAR MÉTHODE masqués → chaque ligne « radio + nom » tient sur UNE ligne.
Les moyens de paiement acceptés sont regroupés en bas de l'étape (.cko2-secure). */
body.cko2-active #payment ul.payment_methods li img,
body.cko2-active #payment ul.payment_methods .wc-stripe-card-icons-container{display:none}
/* le contenu déplié (CB Stripe, etc.) occupe toute la largeur sous la ligne titre */
body.cko2-active #payment ul.payment_methods li .payment_box{flex:0 0 100%;width:100%}
/* méthode sélectionnée mise en valeur (cohérent avec les cartes livraison) */
body.cko2-active #payment ul.payment_methods li.wc_payment_method:has(input:checked){border-color:#d2d8f9;background:#f8f9fe}
body.cko2-active #payment .payment_box{background:#f8f9fe;border-radius:10px;padding:15px;margin-top:10px;font-size:13px;color:var(--ink-soft)}
body.cko2-active #payment .payment_box::before{display:none}
/* Mode CB Stripe : formulaire carte collé au plus près (gain de place) */
body.cko2-active #payment .payment_box.payment_method_stripe_cc{margin:0;padding:0}
/* Google Pay / Apple Pay / PayPal rendent leur bouton dans la zone « Commander ». Leur
payment_box inline reste donc TOUJOURS vide ici (notices coupées via les réglages plugin),
mais hérite du padding/margin/fond ci-dessus → un cadre vide apparaîtrait à la sélection.
Aucun réglage plugin ne supprime ce wrapper vide : on le replie en CSS (légitime, structurel).
Les inputs cachés restent soumis ; le mode CB garde sa box (vrai formulaire carte Stripe). */
body.cko2-active #payment .payment_box.payment_method_stripe_googlepay,
body.cko2-active #payment .payment_box.payment_method_stripe_applepay,
body.cko2-active #payment .payment_box.payment_method_ppcp{display:none !important}
/* Apple Pay indisponible (appareil non-Apple) : le JS pose body.cko2-no-applepay (détection
ApplePaySession). Le plugin masque son bouton mais pas le radio dans notre accordéon → on
retire ici le mode Apple Pay de la liste + le bouton express vide. Inerte sur Safari/Apple. */
body.cko2-active.cko2-no-applepay #payment li.payment_method_stripe_applepay,
body.cko2-active.cko2-no-applepay .wc-stripe-applepay-button{display:none !important}
body.cko2-active #payment .woocommerce-terms-and-conditions-wrapper{margin:15px 0;font-size:13px;color:var(--ink-soft)}
body.cko2-active #payment .woocommerce-terms-and-conditions-wrapper a{color:var(--c3);font-weight:600}
/* Même style/taille que btn-main (radius 5px, font 16px/500, transition .3s, pleine largeur),
mais en vert menthe ; hover « à la même manière » : le fond s'éclaircit (--c12 -> --c13). */
body.cko2-active #payment #place_order{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;background:var(--c12);color:var(--c1);border:none;border-radius:5px;min-height:50px;font-size:16px;font-weight:500;font-family:inherit;cursor:pointer;float:none;transition:background-color .3s,color .3s}
body.cko2-active #payment #place_order:hover{background:var(--c13);color:var(--c1)}
/* Zone « Commander » : pas de padding (le bouton gère son propre espacement) */
body.cko2-active #payment .form-row.place-order{padding:0}
/* ====== Réassurance paiement (bas de l'étape) : sécurisé + moyens acceptés — repris du panier v2 ====== */
body.cko2-active .cko2-secure{margin-top:20px;padding-top:20px;border-top:1px solid var(--line)}
body.cko2-active .cko2-secure-note{display:flex;align-items:center;justify-content:center;gap:5px;font-size:12px;color:var(--c7);margin-bottom:12px}
body.cko2-active .cko2-secure-note .diy-ico{font-size:14px}
body.cko2-active .cko2-pay-icons{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
body.cko2-active .cko2-pay-icons .cko2-pi{height:35px;min-width:45px;padding:0 10px;border-radius:5px;background:var(--inset);display:flex;align-items:center;justify-content:center}
body.cko2-active .cko2-pay-icons .cko2-pi .diy-ico{font-size:20px;color:var(--ink-soft)}
body.cko2-active .cko2-pay-icons .cko2-pi svg{height:20px;width:auto;display:block;fill:var(--ink-soft)}
body.cko2-active .cko2-pay-icons .cko2-pi-gpay svg{height:15px}
body.cko2-active .cko2-pay-icons .cko2-pi-apay svg{height:15px}
/* ====== Résumé : livraison lecture seule + réassurance ====== */
body.cko2-active .cko2-totals .cko2-shipping-line th small{display:block;font-size:11px;color:var(--c7);font-weight:400;margin-top:2px}
/* Réassurance : 3 cartes (identiques au panier v2) */
body.cko2-active .cko2-trust{display:flex;justify-content:space-between;gap:10px;margin-top:20px;border-top:1px solid var(--line);padding-top:20px}
body.cko2-active .cko2-trust-item{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;flex:1;background:#fff;border:1px solid #e5e5e5;border-radius:5px;padding:15px 5px}
body.cko2-active .cko2-trust-item .diy-ico{font-size:25px;color:var(--c3)}
body.cko2-active .cko2-trust-item .cko2-trust-star{color:#f5b301}
body.cko2-active .cko2-trust-item span{font-size:10px;line-height:1.3;color:var(--ink-soft);font-weight:500}
/* ====== Colonne résumé sticky ====== */
body.cko2-active .cko2-order-side{position:sticky;top:25px;min-width:0}
@media(max-width:980px){body.cko2-active .cko2-order-side{position:static;order:-1}}
/* ============================================================
CHECKOUT v2 — FIDÉLITÉ MAQUETTE (labels flottants, avis, mobile…)
============================================================ */
/* Lien « Retour au panier » : déplacé dans le header minimal du tunnel
(header-checkout.php + custom/tunnel/tunnel.css → .tunnel-back). */
/* ====== Champs : labels STATIQUES au-dessus (pas d'animation) ======
Gérés par `.cko2-form .form-row label{display:block;...}` (déjà défini plus haut).
Pas de flottant : le label reste simplement au-dessus de l'input. */
/* ====== Résumé : neutralise les bordures de table du thème (.shop_table) ======
(sinon des traits horizontaux moches s'intercalent entre les lignes de totaux) */
body.cko2-active .cko2-totals,
body.cko2-active .cko2-totals tbody,
body.cko2-active .cko2-totals tfoot,
body.cko2-active .cko2-totals tr,
body.cko2-active .cko2-totals th,
body.cko2-active .cko2-totals td{border:0 !important;background:none !important;box-shadow:none !important}
/* on garde nos séparateurs voulus (sous-total/total) */
body.cko2-active .cko2-totals .order-total{border-top:1px solid var(--line) !important}
/* ====== Avis : entête note + 2 cartes statiques (sans slider) ======
--star-y / --verif-g : mêmes filtres de teinte que le slider d'avis du thème
(les SVG full-star/verified sont noirs par défaut, colorés par filtre). */
body.cko2-active{
--star-y:invert(91%) sepia(14%) saturate(1357%) hue-rotate(338deg) brightness(101%) contrast(102%);
--verif-g:brightness(0) saturate(100%) invert(68%) sepia(53%) saturate(525%) hue-rotate(114deg) brightness(99%) contrast(86%);
}
body.cko2-active .cko2-reviews-head{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:5px;margin:25px 0 15px}
/* titre « Ils nous font confiance » aligné sur les autres titres (#heading-*) */
body.cko2-active .cko2-rv-ttl{font-family:"Open Sans",sans-serif;font-weight:500;font-size:18px;letter-spacing:0;text-transform:none;color:var(--c1)}
body.cko2-active .cko2-rv-sc{display:inline-flex;align-items:center;gap:5px;font-size:15px;color:var(--c1)}
body.cko2-active .cko2-rv-stars{display:inline-flex;align-items:center;gap:2px}
/* étoiles de l'entête : agrandies + jaunes */
body.cko2-active .cko2-rv-stars img{height:18px;width:18px;filter:var(--star-y)}
/* 2 cartes d'avis statiques côte à côte (1 colonne en mobile) */
body.cko2-active .cko2-reviews-static{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 5px}
@media(max-width:560px){body.cko2-active .cko2-reviews-static{grid-template-columns:1fr}}
body.cko2-active .cko2-reviews-static .review-container{position:relative;background:var(--c4);border:1px solid #e4e4e4;border-radius:12px;padding:18px;display:flex;flex-direction:column;gap:9px}
body.cko2-active .cko2-reviews-static .customer-infos{display:flex;flex-direction:column;gap:5px}
body.cko2-active .cko2-reviews-static .name{font-family:"Playfair Display",serif;font-size:18px;font-weight:700;color:var(--c1)}
body.cko2-active .cko2-reviews-static .rating{display:flex;gap:2px}
body.cko2-active .cko2-reviews-static .rating img{height:15px;width:15px;filter:var(--star-y)}
body.cko2-active .cko2-reviews-static .customer-review{font-size:13.5px;line-height:1.6;color:var(--ink-soft);max-height:104px;overflow:hidden}
body.cko2-active .cko2-reviews-static .review-infos{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto}
body.cko2-active .cko2-reviews-static .date{font-size:12px;color:var(--c7);font-style:italic}
body.cko2-active .cko2-reviews-static .verified{display:flex;align-items:center;gap:4px;font-size:12px;color:#1fbf97}
body.cko2-active .cko2-reviews-static .verified img{height:14px;width:14px;filter:var(--verif-g)}
body.cko2-active .cko2-reviews-static .verified p{margin:0}
body.cko2-active .cko2-reviews-static .platform-badge{position:absolute;top:10px;right:10px}
body.cko2-active .cko2-reviews-static .platform-badge img{height:18px;width:18px}
/* ====== Récap : bottom-sheet + barre fixe (mobile/tablette) — porté du panier v2 ====== */
body.cko2-active .cko2-msummary-toggle{display:none}
body.cko2-active .cko2-sticky-bar{display:none}
body.cko2-active .cko2-sheet-backdrop{display:none}
body.cko2-active .cko2-sheet-close{display:none}
@media(max-width:980px){
body.cko2-active{--cko2-bar-h:calc(70px + env(safe-area-inset-bottom))}
/* l'ancien toggle du haut est remplacé par la barre fixe en bas */
body.cko2-active .cko2-msummary-toggle{display:none}
/* espace bas : rien ne passe sous la barre fixe. Sélecteur form.checkout.cko2-form
pour battre la règle `padding:0` (même spécificité, déclarée plus haut). */
body.cko2-active form.checkout.cko2-form{padding-bottom:calc(var(--cko2-bar-h) + 20px)}
/* Boutons « Continuer » des étapes masqués sur mobile : la barre fixe est le bouton
d'action unique (elle déclenche ce même bouton, conservé en DOM pour le proxy JS). */
body.cko2-active .cko2-step-cta{display:none}
/* l'aside récap devient un bottom-sheet glissant, calé pile au-dessus de la barre fixe */
body.cko2-active .cko2-order-side{
position:fixed;left:0;right:0;bottom:var(--cko2-bar-h);top:auto;z-index:1001;
margin:0;max-height:75vh;overflow:hidden;background:var(--c4);
border-radius:20px 20px 0 0;box-shadow:0 -10px 40px rgba(31,38,36,.18);
transform:translateY(110%);transition:transform .32s cubic-bezier(.4,0,.2,1);
}
body.cko2-active.cko2-sheet-open .cko2-order-side{transform:translateY(0)}
/* #order_review = zone scrollable du sheet ; #cko2-review perd son cadre (porté par le sheet) */
body.cko2-active .cko2-order-side #order_review{display:block;max-height:75vh;overflow-y:auto;-webkit-overflow-scrolling:touch}
body.cko2-active #cko2-review{border:0;border-radius:0;background:transparent}
/* pas de double-scroll : dans le sheet, la liste produits ne scrolle plus en interne */
body.cko2-active .cko2-olines.diy-scroller{max-height:none;overflow:visible}
/* bouton fermer le sheet (rond, épinglé) */
body.cko2-active .cko2-sheet-close{display:inline-flex;align-items:center;justify-content:center;position:absolute;top:18px;right:18px;width:34px;height:34px;border-radius:50%;background:var(--inset);border:1px solid #e5e5e5;cursor:pointer;color:var(--c1);z-index:5}
body.cko2-active .cko2-sheet-close .diy-ico{font-size:18px}
/* voile derrière le sheet (assombrit la page, pas la barre) */
body.cko2-active .cko2-sheet-backdrop{display:block;position:fixed;inset:0;z-index:1000;background:rgba(31,38,36,.45);opacity:0;pointer-events:none;transition:opacity .3s}
body.cko2-active.cko2-sheet-open .cko2-sheet-backdrop{opacity:1;pointer-events:auto}
body.cko2-active.cko2-sheet-open{overflow:hidden}
/* barre fixe : total + déplier à gauche, CTA d'action à droite */
body.cko2-active .cko2-sticky-bar{display:flex;align-items:stretch;gap:12px;position:fixed;left:0;right:0;bottom:0;z-index:1002;background:#fff;border-top:1px solid var(--line);padding:10px 16px calc(10px + env(safe-area-inset-bottom));box-shadow:0 -4px 20px rgba(31,38,36,.08)}
body.cko2-active .cko2-sticky-detail{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;flex-shrink:0;min-width:112px;min-height:50px;padding:6px 16px;background:var(--c4);border:1px solid #e5e5e5;border-radius:5px;cursor:pointer;font-family:inherit;color:var(--c1)}
body.cko2-active .cko2-sticky-top{display:inline-flex;align-items:center;gap:6px;line-height:1}
/* libellé actionnable en bleu brand : dit « ouvre-moi », pas juste « info » */
body.cko2-active .cko2-sticky-label{font-size:12px;color:var(--c3);font-weight:600}
body.cko2-active .cko2-sticky-amount{font-size:17px;font-weight:700;letter-spacing:-.01em;line-height:1.15;white-space:nowrap}
body.cko2-active .cko2-sticky-amount .amount{white-space:nowrap}
/* recalcul update_checkout en cours (classe posée par funnel.js) : même langage
que le panier — total estompé via color + 3 points superposés */
body.cko2-active .cko2-sticky-bar.cko2-busy .cko2-sticky-amount{position:relative;color:rgba(31,38,36,.3);transition:color .15s}
body.cko2-active .cko2-sticky-bar.cko2-busy .cko2-sticky-amount::after{content:"";position:absolute;top:50%;left:50%;width:20px;height:20px;transform:translate(-50%,-50%);background:url(../images/icons/spinner.svg) no-repeat center/contain}
body.cko2-active .cko2-sticky-chevron{font-size:15px;filter:var(--ico-blue);transition:transform .25s}
body.cko2-active.cko2-sheet-open .cko2-sticky-chevron{transform:rotate(180deg)}
/* nudge à l'arrivée : 2 petits rebonds du chevron puis immobile */
@media (prefers-reduced-motion: no-preference){
body.cko2-active .cko2-sticky-chevron{animation:funnel-nudge .9s ease .8s 2}
}
/* CTA d'action contextuel (indigo « continuer ») */
body.cko2-active .cko2-sticky-cta{flex:1 1 auto;min-width:0;min-height:50px;display:flex;align-items:center;justify-content:center;gap:8px;background:var(--c3);color:#fff;border:none;border-radius:5px;font-family:inherit;font-size:clamp(13px,3.6vw,16px);font-weight:500;cursor:pointer;white-space:nowrap;padding:0 12px;transition:background-color .3s}
body.cko2-active .cko2-sticky-cta:hover{background:var(--c11)}
body.cko2-active .cko2-sticky-cta .diy-ico{font-size:16px}
/* Étape PAIEMENT : pas de CTA dans la barre (le bouton de paiement vit dans l'étape, pas
de doublon). Le total occupe alors toute la largeur de la barre. */
body.cko2-active .cko2-sticky-bar.cko2-bar-pay .cko2-sticky-cta{display:none}
body.cko2-active .cko2-sticky-bar.cko2-bar-pay .cko2-sticky-detail{flex:1 1 auto;min-width:0}
}
/* === Icones SVG locales (![]()
) -- remplacent la police HugeIcons CDN ===
Un ![]()
n_herite PAS la couleur du texte -> recolorisation au filter CSS.
Blanc = exact ; bleu/vert/or/rouge = approches (ajustables ici). */
:root{
--ico-white:brightness(0) invert(1);
--ico-green:brightness(0) saturate(100%) invert(20%) sepia(98%) saturate(642%) hue-rotate(132deg) brightness(94%) contrast(101%); /* --c8 #005743 */
--ico-blue:brightness(0) saturate(100%) invert(24%) sepia(58%) saturate(1015%) hue-rotate(202deg) brightness(91%) contrast(89%); /* --c3 #3a478e */
--ico-gold:brightness(0) saturate(100%) invert(73%) sepia(54%) saturate(2878%) hue-rotate(1deg) brightness(103%) contrast(101%); /* #f5b301 */
--ico-red:brightness(0) saturate(100%) invert(33%) sepia(73%) saturate(2613%) hue-rotate(338deg) brightness(96%) contrast(89%); /* --c10 #e03c3d */
}
.diy-ico{width:1em;height:1em;display:inline-block;vertical-align:middle}
/* couleurs checkout */
.cko2-ship-msg .diy-ico{filter:var(--ico-green)}
.cko2-trust-item .diy-ico{filter:var(--ico-blue)}
.cko2-trust-item .cko2-trust-star{filter:var(--ico-gold)}
.cko2-zone-note .diy-ico{filter:var(--ico-blue)}
.cko2-step-cta .diy-ico{filter:var(--ico-white)}
.cko2-sticky-cta .diy-ico{filter:var(--ico-white)}
.cko2-coupon-ic .diy-ico{filter:var(--ico-white)}
/* ============================================================
CHROME DU TUNNEL D'ACHAT — header + footer minimalistes
Partagé par le panier (cart-v2) ET le checkout (checkout-v2).
Rendu 100% serveur via header-checkout.php / footer-checkout.php
(routés par custom/functions-tunnel.php). Indépendant du
header/footer principal du thème. Icônes = SVG locaux (assets/images/icons/).
============================================================ */
/* ---------- Header tunnel : logo centré, bouton retour rond à gauche ---------- */
.tunnel-header{background:#fff;border-bottom:1px solid #ececec}
.tunnel-header__inner{position:relative;max-width:1300px;margin:0 auto;padding:16px 20px;min-height:78px;display:flex;align-items:center;justify-content:center}
/* Bouton retour : rond, calé à gauche (absolu → ne décale pas le logo centré).
left:20px = bord du contenu (le wrapper a 20px de padding latéral). */
.tunnel-back{position:absolute;left:20px;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#f6f6f6;color:#1f2624;text-decoration:none;transition:background .2s,color .2s}
.tunnel-back:hover{background:#ececec}
.tunnel-back i{font-style:normal;display:inline-flex;align-items:center;justify-content:center;line-height:1;font-size:20px}
.tunnel-logo a{display:inline-block}
.tunnel-logo img{display:block;width:100%;height:auto;max-width:170px;max-height:54px}
@media(max-width:400px){
.tunnel-back{width:38px;height:38px;left:15px}
.tunnel-back i{font-size:18px}
.tunnel-logo img{max-width:130px}
}
/* ---------- Contenu ---------- */
/* page.php rend la section titre/thumbnail (.header-content) : inutile dans le
tunnel, on la masque (panier, checkout ET confirmation). */
body.diy-tunnel .header-content{display:none}
/* Header non fixe → on neutralise la compensation haute du thème. #content (ID)
bat les règles thème `body.page:not(.home) main` et
`body.diy-district.woocommerce-cart main`. max-width / margin / padding-inline
restent hérités du thème (pas besoin de les répéter). */
body.diy-tunnel #content{padding-top:30px;padding-bottom:30px}
/* ---------- Footer tunnel : réduit et rassurant ---------- */
.tunnel-footer{background:#fff;border-top:1px solid #ececec;margin-top:40px}
.tunnel-footer__inner{max-width:1300px;margin:0 auto;padding:22px 20px;display:flex;align-items:center;justify-content:space-between;gap:15px;flex-wrap:wrap}
.tunnel-pay{display:flex;align-items:center;gap:10px}
.tunnel-pay img{display:block;height:24px;width:auto}
.tunnel-legal{margin:0;font-size:12px;color:#767676}
@media(max-width:560px){
.tunnel-footer__inner{flex-direction:column-reverse;justify-content:center;text-align:center}
}
/* ============================================================
CONFIRMATION v2 — DiY District · page « merci » (order-received)
Scopé sous body.diy-thankyou-v2. Tokens identiques au checkout v2.
Icônes = SVG locaux (assets/images/icons/). Espacements en multiples de 5px.
============================================================ */
body.diy-thankyou-v2{
--c1:#1f2624; --c2:#fff; --c3:#3a478e; --c4:#f6f6f6;
--c5:#686f8c; --c7:#767676; --c8:#005743; --c9:#cfcfcf;
--c10:#e03c3d; --c11:#5567cd; --c12:#38e8bd; --c13:#56f9d0;
--orange:#fa9e58; --line:#ececec; --ink-soft:#5b625f; --inset:#f0f0f0;
}
/* ====== Conteneur ======
PAS de padding latéral : la gouttière est déjà fournie par main.site-main (20px).
En ajouter ici doublait la gouttière (40px) et tassait tout sur mobile. */
body.diy-thankyou-v2 .ty2{
max-width:760px;width:100%;margin:0 auto 40px;min-width:0;
font-family:"Open Sans",sans-serif;color:var(--c1);line-height:1.6;
-webkit-font-smoothing:antialiased;
}
/* .woocommerce (parent) est un conteneur flex column (thème) ET margin:0 auto
désactive le stretch → SANS width:100%, .ty2 prend la largeur de son contenu
(titre produit inline-block 233px) et déborde le viewport en « poussant tout ».
width:100% le force à remplir le parent (capé par max-width). */
body.diy-thankyou-v2 .ty2 *{box-sizing:border-box}
body.diy-thankyou-v2 .ty2 .diy-ico{display:inline-block;vertical-align:middle;line-height:1;flex-shrink:0}
body.diy-thankyou-v2 .ty2 img{max-width:100%}
/* ====== Neutralise le style de lien générique du thème ======
Le thème applique `.woocommerce-checkout main .woocommerce .woocommerce-order a`
(indigo + souligné + display:inline-block, spécificité 0,3,2) à TOUS nos liens.
On remonte la spécificité (4 classes via body.woocommerce-checkout) pour reprendre la main. */
body.diy-thankyou-v2.woocommerce-checkout .woocommerce-order.ty2 a,
body.diy-thankyou-v2.woocommerce-checkout .woocommerce-order.ty2 a:hover{text-decoration:none}
/* Le thème ajoute un soulignement animé via a::after (scaleX au hover) — on le neutralise. */
body.diy-thankyou-v2.woocommerce-checkout .woocommerce-order.ty2 a::after,
body.diy-thankyou-v2.woocommerce-checkout .woocommerce-order.ty2 a:hover::after{content:none;display:none}
body.diy-thankyou-v2.woocommerce-checkout .woocommerce-order.ty2 a.ty2-btn{display:flex;color:var(--c1)}
body.diy-thankyou-v2.woocommerce-checkout .woocommerce-order.ty2 .ty2-btn-ghost{color:var(--c1)}
body.diy-thankyou-v2.woocommerce-checkout .woocommerce-order.ty2 .ty2-n a{color:inherit;display:inline}
body.diy-thankyou-v2.woocommerce-checkout .woocommerce-order.ty2 .ty2-n a:hover{color:var(--c3)}
body.diy-thankyou-v2.woocommerce-checkout .woocommerce-order.ty2 a.ty2-social-ic{display:inline-flex}
/* ====== Bandeau succès ====== */
body.diy-thankyou-v2 .ty2-hero{text-align:center;padding:30px 0 25px}
body.diy-thankyou-v2 .ty2-check{
position:relative;
width:84px;height:84px;margin:0 auto 20px;border-radius:50%;
background:radial-gradient(circle at 50% 40%,#e9f7f2,#d8f1e8);
display:flex;align-items:center;justify-content:center;
}
body.diy-thankyou-v2 .ty2-check .diy-ico{font-size:42px;color:var(--c8)}
body.diy-thankyou-v2 .ty2-check--failed{background:radial-gradient(circle at 50% 40%,#fdecec,#f9dada)}
body.diy-thankyou-v2 .ty2-check--failed .diy-ico{color:var(--c10)}
body.diy-thankyou-v2 .ty2-hero h1{
font-family:"Playfair Display",serif;font-weight:700;font-size:34px;
letter-spacing:-.01em;line-height:1.2;margin:0 0 8px;
}
body.diy-thankyou-v2 .ty2-hero p{font-size:15px;color:var(--c7);max-width:520px;margin:0 auto}
body.diy-thankyou-v2 .ty2-hero p b{color:var(--c1);font-weight:600}
body.diy-thankyou-v2 .ty2-order-no{
display:inline-flex;align-items:center;gap:8px;margin-top:16px;
background:var(--c4);border-radius:999px;padding:8px 18px;font-size:14px;font-weight:500;
}
body.diy-thankyou-v2 .ty2-order-no b{color:var(--c3);font-weight:700}
body.diy-thankyou-v2 .ty2-ord-date{white-space:nowrap}
/* ====== Carte générique (gris clair habituel, comme le récap checkout) ====== */
body.diy-thankyou-v2 .ty2-card{
border:1px solid rgba(0,0,0,.06);border-radius:18px;padding:28px;margin-top:20px;background:var(--c4);
}
body.diy-thankyou-v2 .ty2-card h2{
font-family:"Playfair Display",serif;font-weight:500;font-size:20px;
margin:0 0 18px;display:flex;align-items:center;gap:10px;
}
body.diy-thankyou-v2 .ty2-card h2 .diy-ico{font-size:21px;color:var(--c3)}
/* ====== Timeline « Et maintenant ? » ====== */
body.diy-thankyou-v2 .ty2-timeline{display:flex;gap:0;position:relative}
body.diy-thankyou-v2 .ty2-tl-step{flex:1;min-width:0;text-align:center;position:relative}
body.diy-thankyou-v2 .ty2-dot{
width:40px;height:40px;border-radius:50%;background:#e8e8e8;color:var(--c7);
display:flex;align-items:center;justify-content:center;margin:0 auto 12px;
position:relative;z-index:2;border:2px solid #e8e8e8;transition:all .3s;
}
body.diy-thankyou-v2 .ty2-dot .diy-ico{font-size:18px}
body.diy-thankyou-v2 .ty2-tl-step.done .ty2-dot{background:var(--c8);color:#fff;border-color:var(--c8)}
body.diy-thankyou-v2 .ty2-tl-step.current .ty2-dot{background:#fff;color:var(--c3);border-color:var(--c3)}
body.diy-thankyou-v2 .ty2-tl-step::before{
content:"";position:absolute;top:20px;left:-50%;width:100%;height:1px;background:#dcdcdc;z-index:1;
}
body.diy-thankyou-v2 .ty2-tl-step:first-child::before{display:none}
body.diy-thankyou-v2 .ty2-tl-step.done::before,
body.diy-thankyou-v2 .ty2-tl-step.current::before{background:var(--c8)}
body.diy-thankyou-v2 .ty2-tl-lbl{font-size:14px;font-weight:600;color:var(--c1);overflow-wrap:break-word}
body.diy-thankyou-v2 .ty2-tl-sub{font-size:12px;color:var(--c7)}
body.diy-thankyou-v2 .ty2-tl-step.upcoming .ty2-tl-lbl{color:var(--c7);font-weight:500}
/* ====== Récap articles (compact : pas d'image — déjà vue au panier/checkout) ====== */
body.diy-thankyou-v2 .ty2-items{display:flex;flex-direction:column;gap:10px}
body.diy-thankyou-v2 .ty2-it{display:flex;align-items:center;gap:10px;min-width:0}
body.diy-thankyou-v2 .ty2-iqty{flex:0 0 auto;min-width:24px;height:22px;padding:0 7px;border-radius:5px;background:var(--inset);color:var(--c5);font-size:12px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
body.diy-thankyou-v2 .ty2-n{flex:1;min-width:0;font-size:14px;font-weight:600;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.diy-thankyou-v2 .ty2-n a{color:inherit;text-decoration:none}
body.diy-thankyou-v2 .ty2-n a:hover{color:var(--c3)}
body.diy-thankyou-v2 .ty2-p{flex:0 0 auto;font-weight:700;font-size:14px;white-space:nowrap;text-align:right}
/* ====== Totaux ====== */
body.diy-thankyou-v2 .ty2-totals{margin-top:20px}
body.diy-thankyou-v2 .ty2-totrow{display:flex;justify-content:space-between;gap:15px;font-size:14px;padding:9px 0;border-top:1px solid var(--line)}
body.diy-thankyou-v2 .ty2-totrow .lbl{color:var(--ink-soft)}
body.diy-thankyou-v2 .ty2-totrow .val{font-weight:600;white-space:nowrap;text-align:right}
body.diy-thankyou-v2 .ty2-totrow.discount .val{color:var(--c8)}
body.diy-thankyou-v2 .ty2-totrow.grand{margin-top:2px;border-top:1px solid var(--line);padding-top:14px}
body.diy-thankyou-v2 .ty2-totrow.grand .lbl{font-weight:700;font-size:16px;color:var(--c1)}
body.diy-thankyou-v2 .ty2-totrow.grand .val{font-weight:700;font-size:20px}
/* WooCommerce enrobe certaines valeurs (port…) de petites mentions : on les normalise.
white-space:normal OBLIGATOIRE — sinon le sous-texte transporteur (« via DHL
International ») hérite du nowrap de .val, devient insécable (~108px) et fait
déborder toute la carte récap sur mobile. */
body.diy-thankyou-v2 .ty2-totrow .val small{display:block;font-size:11px;color:var(--c7);font-weight:400;white-space:normal}
/* ====== Infos livraison / paiement — SANS fond extérieur (2 col desktop / 1 col mobile), notice pays dessous ====== */
body.diy-thankyou-v2 .ty2-info{margin-top:20px}
body.diy-thankyou-v2 .ty2-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
body.diy-thankyou-v2 .ty2-info-block{background:var(--c4);border:1px solid rgba(0,0,0,.06);border-radius:12px;padding:18px}
body.diy-thankyou-v2 .ty2-ib-head{display:flex;align-items:center;gap:8px;margin-bottom:12px}
body.diy-thankyou-v2 .ty2-ib-head .diy-ico{font-size:18px;color:var(--c3)}
body.diy-thankyou-v2 .ty2-ib-t{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--c7)}
body.diy-thankyou-v2 .ty2-ib-b{font-size:13.5px;line-height:1.6;color:var(--c1)}
body.diy-thankyou-v2 .ty2-ib-b span{color:var(--c7)}
/* ====== Notice douane / TVA ====== */
body.diy-thankyou-v2 .ty2-notice{display:flex;gap:11px;margin-top:18px;padding:14px 15px;border-radius:12px;font-size:13px;line-height:1.55}
body.diy-thankyou-v2 .ty2-notice .diy-ico{font-size:18px;margin-top:1px;flex-shrink:0}
body.diy-thankyou-v2 .ty2-notice b{font-weight:700}
body.diy-thankyou-v2 .ty2-notice--ioss,
body.diy-thankyou-v2 .ty2-notice--ddp{background:#eef1fb;color:#2f3a73;border:1px solid #d3dbf2}
body.diy-thankyou-v2 .ty2-notice--ioss .diy-ico,
body.diy-thankyou-v2 .ty2-notice--ddp .diy-ico{color:var(--c3)}
body.diy-thankyou-v2 .ty2-notice--dap{background:var(--c4);color:var(--ink-soft);border:1px solid var(--line)}
body.diy-thankyou-v2 .ty2-notice--dap .diy-ico{color:var(--c7)}
/* ====== CTA ====== */
body.diy-thankyou-v2 .ty2-cta-row{display:flex;gap:12px;margin-top:24px;flex-wrap:wrap;justify-content:center}
body.diy-thankyou-v2 .ty2-btn{
flex:0 1 290px;min-width:200px;display:flex;align-items:center;justify-content:center;gap:9px;
border-radius:5px;min-height:52px;font-size:15px;font-weight:500;font-family:inherit;
cursor:pointer;text-decoration:none;transition:background-color .3s,color .3s,border-color .3s;
}
body.diy-thankyou-v2 .ty2-btn .diy-ico{font-size:18px}
body.diy-thankyou-v2 .ty2-btn-primary{background:var(--c12);color:var(--c1);border:none}
body.diy-thankyou-v2 .ty2-btn-primary:hover{background:var(--c13);color:var(--c1)}
body.diy-thankyou-v2 .ty2-btn-ghost{background:#fff;color:var(--c1);border:1.5px solid var(--line)}
body.diy-thankyou-v2 .ty2-btn-ghost:hover{border-color:var(--c3);color:var(--c3)}
/* ====== Réseaux sociaux (repris du footer accueil) ====== */
body.diy-thankyou-v2 .ty2-social{margin-top:30px;text-align:center}
body.diy-thankyou-v2 .ty2-social-label{display:block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--c7);margin-bottom:14px}
body.diy-thankyou-v2 .ty2-social-links{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px}
body.diy-thankyou-v2 .ty2-social-ic{
display:inline-flex;width:42px;height:42px;align-items:center;justify-content:center;
border:1px solid var(--line);border-radius:50%;background:var(--c4);
transition:border-color .25s,transform .15s,box-shadow .25s;
}
body.diy-thankyou-v2 .ty2-social-ic:hover{border-color:var(--c3);transform:translateY(-2px);box-shadow:0 4px 12px rgba(58,71,142,.12)}
/* Icônes en bleu : on recolore le SVG de marque via un masque CSS (l'élément span
prend la couleur --c3, le SVG sert de pochoir alpha via la variable --ic). */
body.diy-thankyou-v2 .ty2-social-glyph{width:22px;height:22px;display:block;background:var(--c3);-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
/* ====== Animation badge succès — « tada » sur le check (cercle vert STATIQUE) ======
Keyframes Animate.css « tada » inlinées (préfixées ty2-) — aucun CDN, aucun JS.
Seule l'icône s'anime ; désactivée si l'utilisateur préfère moins de mouvement. */
@media (prefers-reduced-motion: no-preference){
/* :not(--failed) → pas d'anim festive sur l'icône d'un paiement échoué */
body.diy-thankyou-v2 .ty2-check:not(.ty2-check--failed) .diy-ico{animation:ty2-tada 1s ease .25s both}
@keyframes ty2-tada{
0%{transform:scale3d(1,1,1)}
10%,20%{transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg)}
30%,50%,70%,90%{transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)}
40%,60%,80%{transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)}
100%{transform:scale3d(1,1,1)}
}
}
/* ====== Responsive ====== */
@media (max-width:768px){
body.diy-thankyou-v2 .ty2-hero h1{font-size:26px}
body.diy-thankyou-v2 .ty2-card{padding:20px}
}
@media (max-width:560px){
body.diy-thankyou-v2 .ty2-info-grid{grid-template-columns:1fr;gap:16px}
body.diy-thankyou-v2 .ty2-btn{min-width:100%}
/* Pill commande : wrap propre et compact (la date reste insécable) */
body.diy-thankyou-v2 .ty2-order-no{flex-wrap:wrap;justify-content:center;gap:4px 6px;padding:8px 14px;font-size:13px;text-align:center}
/* moins de padding interne sur petit écran → plus de largeur utile */
body.diy-thankyou-v2 .ty2-card{padding:16px}
body.diy-thankyou-v2 .ty2-info-block{padding:14px}
}
/* ====== Mobile (≤480px) : timeline EN COLONNE, aérée ======
En ligne, les pastilles (40px × 4) tassent les libellés sur les petits écrans.
En colonne : chaque étape sur sa ligne (pastille + texte), lisible et sans
débordement (aucune largeur fixe imposée → la page tient à toute largeur). */
@media (max-width:480px){
body.diy-thankyou-v2 .ty2-timeline{flex-direction:column;gap:0}
body.diy-thankyou-v2 .ty2-timeline::before{content:"";position:absolute;left:19px;top:24px;bottom:24px;width:2px;background:#dcdcdc;z-index:0}
body.diy-thankyou-v2 .ty2-tl-step{display:grid;grid-template-columns:40px 1fr;column-gap:14px;align-items:center;text-align:left;padding:11px 0;position:relative;z-index:1}
body.diy-thankyou-v2 .ty2-tl-step::before{display:none}
body.diy-thankyou-v2 .ty2-dot{margin:0;grid-row:1 / 3}
body.diy-thankyou-v2 .ty2-tl-lbl{grid-column:2;grid-row:1;text-align:left;font-size:14px}
body.diy-thankyou-v2 .ty2-tl-sub{grid-column:2;grid-row:2;text-align:left;font-size:12px}
}
/* === Icones SVG locales (![]()
) -- remplacent la police HugeIcons CDN ===
Un ![]()
n_herite PAS la couleur du texte -> recolorisation au filter CSS.
Blanc = exact ; bleu/vert/or/rouge = approches (ajustables ici). */
:root{
--ico-white:brightness(0) invert(1);
--ico-green:brightness(0) saturate(100%) invert(20%) sepia(98%) saturate(642%) hue-rotate(132deg) brightness(94%) contrast(101%); /* --c8 #005743 */
--ico-blue:brightness(0) saturate(100%) invert(24%) sepia(58%) saturate(1015%) hue-rotate(202deg) brightness(91%) contrast(89%); /* --c3 #3a478e */
--ico-gold:brightness(0) saturate(100%) invert(73%) sepia(54%) saturate(2878%) hue-rotate(1deg) brightness(103%) contrast(101%); /* #f5b301 */
--ico-red:brightness(0) saturate(100%) invert(33%) sepia(73%) saturate(2613%) hue-rotate(338deg) brightness(96%) contrast(89%); /* --c10 #e03c3d */
}
.diy-ico{width:1em;height:1em;display:inline-block;vertical-align:middle}
/* couleurs confirmation */
.ty2-check:not(.ty2-check--failed) .diy-ico{filter:var(--ico-green)}
.ty2-check--failed .diy-ico{filter:var(--ico-red)}
.ty2-card h2 .diy-ico{filter:var(--ico-blue)}
.ty2-ib-head .diy-ico{filter:var(--ico-blue)}
.ty2-notice--ddp .diy-ico{filter:var(--ico-blue)}
.ty2-tl-step.done .ty2-dot .diy-ico{filter:var(--ico-white)}
.ty2-tl-step.current .ty2-dot .diy-ico{filter:var(--ico-blue)}
/* Checkbox « Enregistrer sur le compte » (Stripe) : taille + espacement alignés sur les autres cases de la page (le style inline width:auto de Stripe est battu par !important) */
body.cko2-active #payment .woocommerce-SavedPaymentMethods-saveNew{display:flex;align-items:center;gap:10px;margin:12px 0 0}
body.cko2-active #payment .woocommerce-SavedPaymentMethods-saveNew input[type=checkbox]{width:16px !important;height:16px !important;margin:0;accent-color:var(--c3);flex-shrink:0}
body.cko2-active #payment .woocommerce-SavedPaymentMethods-saveNew label{margin:0;font-size:13.5px;color:var(--ink-soft);cursor:pointer}
/* Quantité au maximum (stock) : bouton + grisé + petit message sous le stepper */
body.cv2-active .cv2-plus:disabled,
body.cv2-active .cv2-plus[disabled],
body.cv2-active .cv2-minus:disabled,
body.cv2-active .cv2-minus[disabled]{opacity:.35;cursor:not-allowed}
body.cv2-active .cv2-qty-max{display:block;font-size:11px;line-height:1.3;color:var(--c7);text-align:right}
/* Ligne panier en rupture / stock insuffisant : badge rouge + ligne grisée */
body.cv2-active .cv2-stock-warn{display:inline-block;margin:2px 0 4px;padding:3px 9px;border-radius:6px;background:#fdf0f0;color:#c92a2a;font-size:11px;font-weight:600;line-height:1.3}
body.cv2-active .cv2-line.is-oos{opacity:.65}
/* Page « problème panier » du checkout (cart-errors.php) stylée dans le tunnel */
body.cko2-active .cko2-cart-errors{max-width:520px;margin:40px auto;padding:32px 24px;text-align:center;background:#fff;border:1px solid var(--line);border-radius:20px;font-family:"Open Sans",sans-serif}
body.cko2-active .cko2-cart-errors-ic{width:56px;height:56px;margin:0 auto 16px;border-radius:50%;background:#fdf0f0;display:flex;align-items:center;justify-content:center}
body.cko2-active .cko2-cart-errors-ic .diy-ico{font-size:26px;filter:var(--ico-red)}
body.cko2-active .cko2-cart-errors h1{font-family:"Playfair Display",serif;font-weight:700;font-size:24px;margin:0 0 10px;color:var(--c1)}
body.cko2-active .cko2-cart-errors p{font-size:14px;line-height:1.6;color:var(--ink-soft);margin:0 0 22px}
body.cko2-active .cko2-cart-errors-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--c3);color:#fff;border-radius:5px;min-height:50px;padding:0 30px;font-size:16px;font-weight:500;text-decoration:none;transition:background-color .3s}
body.cko2-active .cko2-cart-errors-btn:hover{background:var(--c11);color:#fff}
body.cko2-active .cko2-cart-errors-btn .diy-ico{font-size:17px;filter:var(--ico-white)}
/* ================================================================
ANTI-ZOOM iOS : Safari iPhone zoome automatiquement au focus sur
tout champ dont la font-size est < 16px. Seuil technique Apple,
pas un choix de design → 16px imposé sur mobile uniquement
(exception assumée à la règle des multiples de 5px), desktop
inchangé. Couvre : formulaire checkout, inputs coupon (panier +
checkout), stepper quantité, champ de recherche Select2 (pays).
================================================================ */
@media(max-width:980px){
body.cko2-active .cko2-form .input-text,
body.cko2-active .cko2-form textarea,
body.cko2-active .cko2-form select,
body.cko2-active .cko2-coupon-input,
body.cko2-active .select2-container .select2-search__field,
body.cv2-active .cv2-coupon-input,
body.cv2-active .cv2-qty .cv2-n{font-size:16px}
}