* { font-family: 'Inter', system-ui, -apple-system, sans-serif; box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body { -webkit-font-smoothing: antialiased; }

        /* Prevent iOS zoom on input focus */
        input, select, textarea { font-size: 16px !important; }

        /* Tailwind grid classes missing from static build */
        .grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
        .col-span-3 { grid-column: span 3 / span 3; }
        .col-span-4 { grid-column: span 4 / span 4; }
        .col-span-5 { grid-column: span 5 / span 5; }

        /* Shipping + billing: CP / Ville / Pays */
        .v6-geo-grid {
            display: grid;
            grid-template-columns: repeat(12, minmax(0, 1fr));
            gap: 0.75rem;
        }
        .v6-geo-grid > .v6-geo-cp { grid-column: span 3 / span 3; min-width: 0; }
        .v6-geo-grid > .v6-geo-city { grid-column: span 5 / span 5; min-width: 0; }
        .v6-geo-grid > .v6-geo-country { grid-column: span 4 / span 4; min-width: 0; }

        .v6-billing-geo {
            display: grid;
            grid-template-columns: 2fr 3fr;
            gap: 0.75rem;
        }
        .v6-billing-geo > .v6-billing-cp,
        .v6-billing-geo > .v6-billing-city { min-width: 0; }
        .v6-billing-geo > .v6-billing-country {
            grid-column: 1 / -1;
        }

        @media (max-width: 1023px) {
            /* Ligne 1: CP (~40%, min pour 5 chiffres + check) + Ville ; Ligne 2: Pays full */
            .v6-geo-grid {
                grid-template-columns: minmax(8.5rem, 40%) 1fr;
            }
            .v6-geo-grid > .v6-geo-cp { grid-column: 1; }
            .v6-geo-grid > .v6-geo-city { grid-column: 2; }
            .v6-geo-grid > .v6-geo-country { grid-column: 1 / -1; }

            .v6-billing-geo {
                grid-template-columns: minmax(8.5rem, 40%) 1fr;
            }
            .v6-billing-geo > .v6-billing-cp { grid-column: 1; }
            .v6-billing-geo > .v6-billing-city { grid-column: 2; }
            .v6-billing-geo > .v6-billing-country { grid-column: 1 / -1; }
        }

        /* Safari: force native styling off to fix padding/placeholder bugs */
        input:not([type="checkbox"]):not([type="radio"]), textarea {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
        }

        /* Safari: ensure autofilled inputs float the label */
        .fl input:-webkit-autofill + label {
            top: 8px;
            transform: translateY(0);
            font-size: 11px;
            color: #6b7280;
            font-weight: 500;
        }

        /* Loading spinner */
        .spinner {
            border: 3px solid rgba(255,255,255,0.3);
            border-top-color: #fff;
            border-radius: 50%;
            width: 22px;
            height: 22px;
            animation: spin 0.6s linear infinite;
            display: inline-block;
        }
        .spinner-dark {
            border: 3px solid #e5e7eb;
            border-top-color: #16a34a;
            border-radius: 50%;
            width: 22px;
            height: 22px;
            animation: spin 0.6s linear infinite;
            display: inline-block;
        }
        @keyframes spin { to { transform: rotate(360deg); } }

        /* Sticky sidebar on desktop */
        @media (min-width: 1024px) {
            .sticky-sidebar {
                position: sticky;
                top: 1.5rem;
                max-height: calc(100vh - 3rem);
                overflow-y: auto;
            }
        }

        /* Mobile sticky CTA + anti-overflow (fixed cassé si doc plus large que le viewport) */
        @media (max-width: 1023px) {
            html {
                overflow-x: clip;
                max-width: 100%;
            }
            body {
                overflow-x: clip;
                max-width: 100%;
                /* --mobile-cta-h = hauteur contenu CTA (sans safe-area) ; safe-area ajoutée ici */
                padding-bottom: calc(var(--mobile-cta-h, 112px) + env(safe-area-inset-bottom, 0px) + 8px);
            }
            :root {
                --mobile-cta-h: 112px;
            }
            .mobile-sticky-cta {
                position: fixed;
                left: 0;
                right: 0;
                bottom: 0;
                width: 100%;
                max-width: 100%;
                box-sizing: border-box;
                z-index: 9990;
                height: auto;
                max-height: none;
                overflow: visible;
                background: #fff;
                box-shadow: 0 -2px 12px rgba(0,0,0,0.1);
                padding-bottom: env(safe-area-inset-bottom, 0px);
                min-width: 0;
            }
            .mobile-sticky-cta-inner {
                padding: 8px 12px 8px;
                overflow: visible;
                max-width: 100%;
                min-width: 0;
                box-sizing: border-box;
            }
            .mobile-sticky-cta-btn {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 0.35rem;
                width: 100%;
                max-width: 100%;
                min-width: 0;
                box-sizing: border-box;
                padding: 10px 12px;
                font-size: clamp(0.75rem, 3.1vw, 0.9375rem);
                line-height: 1.25;
                min-height: 44px;
                height: auto;
                max-height: none;
                overflow: visible;
                /* nowrap élargissait le flex min-content → overflow-x page → fixed rogné */
                white-space: normal;
                flex-wrap: wrap;
                text-align: center;
            }
            .mobile-sticky-cta-btn > span,
            .mobile-sticky-cta-btn > i {
                min-width: 0;
                max-width: 100%;
                overflow: visible;
                white-space: normal;
            }
            .mobile-trust-line {
                display: flex;
                align-items: center;
                justify-content: center;
                flex-wrap: wrap;
                gap: 0.75rem;
                margin-top: 6px;
                font-size: 10px;
                line-height: 1;
                color: #6b7280;
                max-width: 100%;
            }
            .mobile-trust-line span {
                display: inline-flex;
                align-items: center;
                gap: 3px;
            }
            .mobile-trust-line i { font-size: 9px; }

            /* Contain PayPal/Stripe iframe z-indexes so they don't overlap the sticky CTA */
            #express-checkout-top {
                position: relative;
                z-index: 1;
            }

            /* Header + logo plus bas */
            header > .max-w-6xl {
                padding-top: 0.5rem;
                padding-bottom: 0.5rem;
            }
            header img.h-8 {
                height: 1.5rem; /* 24px vs 32px */
                width: auto;
            }
            header .text-xl { font-size: 1rem; }

            /* Stepper compact */
            header + .bg-white.border-b > .max-w-6xl {
                padding-top: 0.5rem;
                padding-bottom: 0.5rem;
            }
            .step-num {
                width: 26px;
                height: 26px;
                font-size: 12px;
            }
            .step-item.active .step-num {
                box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.15);
            }
            .step-label { font-size: 10px; }
            .stepper-lines {
                top: 12px;
                left: 13px;
                right: 13px;
            }

            main.max-w-6xl {
                padding-top: 0.5rem;
                padding-bottom: 0.5rem;
                max-width: 100%;
                min-width: 0;
                overflow-x: clip;
            }

            /* Express Link/PayPal : moins d’air (hauteur réelle via SDK ~40) */
            #express-checkout-top-mount,
            #paypal-express-container {
                min-height: 0;
            }
            #paypal-express-container > div,
            #paypal-express-container iframe {
                max-height: 44px;
            }

            /* Contenu livraison : empêcher min-content d’élargir le doc */
            label.shipping-option,
            .relais-recap-card,
            .selectedPointRelaisRecap,
            .shipping-tabs,
            #shippingMethods,
            #section-shipping {
                max-width: 100%;
                min-width: 0;
            }
            .shipping-tab {
                min-width: 0;
            }
            .shipping-delta {
                white-space: normal;
                text-align: right;
                max-width: 9.5rem;
            }
            .relais-hours {
                grid-template-columns: 4.75rem minmax(0, 1fr);
                max-width: 100%;
            }
            .relais-hours-time {
                min-width: 0;
                overflow-wrap: anywhere;
                word-break: break-word;
            }

            /* Sur mobile, les sections checkout sont sans card chrome (pas de fond blanc/bordure/padding)
               car le titre est déjà donné par le stepper et la place est précieuse. */
            #section-shipping,
            #payment-section {
                background: transparent;
                border: 0;
                border-radius: 0;
                padding: 0;
            }
            /* On masque aussi le h2 redondant avec le stepper */
            #section-shipping > h2,
            #payment-section > h2 {
                display: none;
            }
        }

        /* Inline field errors */
        .field-error {
            color: #dc2626;
            font-size: 0.75rem;
            margin-top: 0.25rem;
            display: none;
        }
        .field-error.visible {
            display: block;
        }
        .input-error {
            border-color: #dc2626 !important;
        }
        .input-valid {
            border-color: #16a34a !important;
        }

        /* ================================================= */
        /* === Shipping option card — structure complète === */
        /* ================================================= */
        label.shipping-option {
            position: relative;
            display: flex;
            align-items: flex-start;
            gap: 10px;
            padding: 10px 12px;
            min-height: 0;
            min-width: 0;
            max-width: 100%;
            box-sizing: border-box;
            border: 2px solid #e5e7eb;
            border-radius: 12px;
            background: #fff;
            cursor: pointer;
            transition: border-color 0.2s ease, background-color 0.2s ease,
                        box-shadow 0.2s ease, transform 0.2s ease;
        }
        @media (min-width: 1024px) {
            label.shipping-option { padding: 14px 16px; gap: 14px; }
        }
        label.shipping-option:hover:not(.active) {
            transform: translateY(-1px);
            border-color: #9ca3af;
            box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
        }
        label.shipping-option.active {
            border-color: #16a34a;
            background: rgba(22, 163, 74, 0.05);
            box-shadow: 0 4px 16px rgba(22, 163, 74, 0.15);
        }
        /* Focus-visible : on laisse le focus ring du radio natif (géré par
           `focus:ring-2 focus:ring-primary` côté Tailwind), pas de outline
           additionnel sur le label lui-même pour éviter le double effet. */

        /* Radio custom (reste aussi stylé via #shippingMethods input plus bas) */
        .shipping-radio {
            width: 20px;
            height: 20px;
            min-width: 20px;
            margin-top: 2px;
            flex-shrink: 0;
        }

        /* Icône type de livraison */
        label.shipping-option-fast,
        label.shipping-option:has(.shipping-badge-cheap) {
            margin-top: 10px;
            padding-top: 18px;
        }
        @media (min-width: 1024px) {
            label.shipping-option-fast,
            label.shipping-option:has(.shipping-badge-cheap) { padding-top: 22px; }
        }
        label.shipping-option-fast:not(.active) {
            background: #fff;
            border-color: #e5e7eb;
        }
        .shipping-icon {
            width: 22px;
            height: 22px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            font-size: 13px;
        }
        .shipping-icon img { width: 18px; height: 18px; object-fit: contain; display: block; }
        .shipping-icon-relais { color: #16a34a; }
        .shipping-icon-home   { color: #2563eb; }

        /* Checkmark animé sur la pastille icône quand sélectionné */
        /* Body (date, prix, transporteur) */
        .shipping-body {
            flex: 1;
            min-width: 0;
            position: relative;
        }
        .shipping-head {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            gap: 8px;
        }
        .shipping-carrier-line {
            display: flex;
            align-items: center;
            gap: 8px;
            min-width: 0;
            margin: 0;
        }
        .shipping-carrier-name {
            font-size: 15px;
            font-weight: 700;
            color: #111827;
            line-height: 1.25;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .shipping-price-col {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 2px;
            flex-shrink: 0;
        }
        .shipping-carrier-price {
            font-size: 15px;
            font-weight: 700;
            color: #111827;
            white-space: nowrap;
        }
        .shipping-price-free { color: #059669; }
        .shipping-delta {
            font-size: 11px;
            font-weight: 700;
            color: #c2410c;
            white-space: nowrap;
        }
        .shipping-promise-date {
            margin: 2px 0 0;
            font-size: 13px;
            line-height: 1.3;
            color: #374151;
        }
        .shipping-promise-date strong {
            font-weight: 700;
            color: #15803d;
        }
        .shipping-delays {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-top: 6px;
        }
        .shipping-delay {
            display: inline-flex;
            align-items: baseline;
            gap: 4px;
            padding: 3px 8px;
            border-radius: 6px;
            background: #f8fafc;
            border: 1px solid #e5e7eb;
        }
        .shipping-delay-label {
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            color: #6b7280;
            line-height: 1.2;
        }
        .shipping-delay-value {
            font-size: 13px;
            font-weight: 800;
            color: #111827;
            line-height: 1.25;
            white-space: nowrap;
        }
        .shipping-delay-ship--fast {
            background: #fff7ed;
            border-color: #fdba74;
        }
        .shipping-delay-ship--fast .shipping-delay-label,
        .shipping-delay-ship--fast .shipping-delay-value { color: #c2410c; }
        .shipping-delay-ship--mid {
            background: #fffbeb;
            border-color: #fcd34d;
        }
        .shipping-delay-ship--mid .shipping-delay-value { color: #b45309; }

        .shipping-tabs {
            display: flex;
            gap: 6px;
            padding: 3px;
            background: #f3f4f6;
            border-radius: 10px;
        }
        .shipping-tab {
            flex: 1;
            min-width: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            border: 0;
            background: transparent;
            color: #4b5563;
            font-size: 13px;
            font-weight: 600;
            padding: 8px 10px;
            border-radius: 8px;
            cursor: pointer;
        }
        .shipping-tab.active {
            background: #fff;
            color: #111827;
            box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
        }
        .shipping-tab-count {
            font-size: 11px;
            font-weight: 700;
            color: #6b7280;
            background: #e5e7eb;
            border-radius: 999px;
            min-width: 18px;
            padding: 0 5px;
            line-height: 18px;
        }
        .shipping-tab.active .shipping-tab-count {
            background: #dcfce7;
            color: #15803d;
        }
        .shipping-panel {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        .shipping-panel.is-hidden { display: none; }

        /* Date de livraison */
        .carrier-date-short,
        .carrier-date-long {
            white-space: nowrap;
        }
        /* Toggle court/long par breakpoint */
        .carrier-date-long { display: none; }
        @media (min-width: 1024px) {
            .carrier-date-short { display: none; }
            .carrier-date-long { display: inline; }
        }

        /* Badge "Recommandé" sur le transporteur par défaut */
        .shipping-badge-fast,
        .shipping-badge-cheap {
            position: absolute;
            top: -8px;
            left: 16px;
            color: #fff;
            font-size: 9px;
            font-weight: 800;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            padding: 3px 8px;
            border-radius: 999px;
            white-space: nowrap;
            pointer-events: none;
        }
        .shipping-badge-fast { background: #ea580c; box-shadow: 0 2px 6px rgba(234, 88, 12, 0.25); }
        .shipping-badge-cheap { background: #0369a1; box-shadow: 0 2px 6px rgba(3, 105, 161, 0.25); }
        .shipping-tab-from {
            font-size: 11px;
            font-weight: 700;
            color: #15803d;
        }
        [data-paypal-hidden="1"] { display: none !important; }

        /* Bouton "Choisir un point relais" — plein (contraste sur carte active pâle et carte blanche) */
        .selectPointRelais { margin-top: 8px; }
        .selectPointRelais .openRelaisModal {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: #16a34a;
            border: 1px solid #15803d;
            padding: 7px 14px;
            font-size: 12px;
            font-weight: 700;
            color: #fff;
            cursor: pointer;
            border-radius: 6px;
            box-shadow: 0 1px 3px rgba(22, 163, 74, 0.35);
            transition: background 0.15s, box-shadow 0.15s;
        }
        .selectPointRelais .openRelaisModal:hover {
            background: #15803d;
            box-shadow: 0 2px 6px rgba(22, 163, 74, 0.4);
        }
        .selectedPointRelaisRecap {
            margin-top: 8px;
        }
        .relais-recap-card {
            background: #fff;
            border: 1px solid #d1d5db;
            border-radius: 8px;
            padding: 10px 12px;
            color: #111827;
            box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
        }
        .relais-recap-name {
            font-size: 13px;
            font-weight: 700;
            color: #111827;
            line-height: 1.3;
        }
        .relais-recap-addr {
            font-size: 12px;
            color: #4b5563;
            margin-top: 2px;
            line-height: 1.35;
        }
        .relais-recap-map {
            display: inline-block;
            font-size: 11px;
            font-weight: 600;
            color: #16a34a;
            margin-top: 4px;
        }
        .relais-recap-map:hover { text-decoration: underline; }
        .selectedPointRelaisRecap .relais-point-details {
            border-top-color: #e5e7eb;
        }
        .relais-status {
            font-size: 11px;
            font-weight: 600;
            margin-top: 2px;
            line-height: 1.3;
        }
        .relais-status-open { color: #16a34a; }
        .relais-status-closed { color: #6b7280; }
        .relais-weight-alert {
            margin-top: 6px;
            font-size: 11px;
            font-weight: 600;
            color: #c2410c;
            background: #fff7ed;
            border: 1px solid #fdba74;
            border-radius: 6px;
            padding: 4px 8px;
            display: flex;
            align-items: center;
            gap: 6px;
            line-height: 1.3;
        }

        /* Modal relais — corps liste (+ carte desktop) */
        .relais-modal-body {
            flex: 1 1 auto;
            min-height: 0;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        #relaisPointsList {
            flex: 1 1 auto;
            min-height: 200px;
            overflow-y: auto;
        }
        .relais-map-panel {
            display: none;
        }
        .relais-marker {
            background: transparent !important;
            border: none !important;
        }
        .relais-marker-dot {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background: #fff;
            border: 3px solid #15803d;
            box-shadow:
                0 0 0 2px #fff,
                0 2px 8px rgba(15, 23, 42, 0.28);
            transition: transform 0.15s ease, box-shadow 0.15s ease;
        }
        .relais-marker-core {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #15803d;
        }
        .relais-marker.is-selected .relais-marker-dot {
            width: 36px;
            height: 36px;
            background: #16a34a;
            border: 3px solid #fff;
            box-shadow:
                0 0 0 2px #16a34a,
                0 4px 14px rgba(22, 163, 74, 0.45);
        }
        .relais-marker.is-selected .relais-marker-core {
            width: 10px;
            height: 10px;
            background: #fff;
        }
        .relais-marker.is-hovered .relais-marker-dot {
            transform: scale(1.12);
        }
        .relais-map-popup-name {
            font-size: 13px;
            font-weight: 700;
            color: #111827;
            line-height: 1.25;
            margin-bottom: 2px;
        }
        .relais-map-popup-addr {
            font-size: 11px;
            color: #4b5563;
            line-height: 1.35;
        }
        .relais-map-popup-status {
            margin-top: 6px;
            font-size: 11px;
            font-weight: 600;
        }
        .relais-map-popup-status.relais-status-open { color: #16a34a; }
        .relais-map-popup-status.relais-status-closed { color: #6b7280; }
        @media (min-width: 1024px) {
            .relais-modal-dialog {
                max-width: 960px !important;
                width: min(960px, 94vw);
                height: min(720px, 85vh);
            }
            .relais-modal-body {
                flex-direction: row;
                align-items: stretch;
                gap: 12px;
                padding: 0 12px 0 0;
            }
            #relaisPointsList {
                flex: 1 1 50%;
                width: 50%;
                min-width: 0;
            }
            .relais-map-panel {
                display: block;
                flex: 1 1 50%;
                width: 50%;
                min-height: 420px;
                position: relative;
                margin: 12px 0 12px 0;
                border-radius: 12px;
                border: 1px solid #e5e7eb;
                overflow: hidden;
                background: #e8ecf0;
                box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
            }
            .relais-map {
                position: absolute;
                inset: 0;
                z-index: 0;
                background: #e8ecf0;
            }
            .relais-map .leaflet-control-attribution {
                font-size: 9px;
                background: rgba(255, 255, 255, 0.78) !important;
                color: #9ca3af;
                margin: 0 !important;
                padding: 2px 6px !important;
                border-radius: 6px 0 0 0;
                box-shadow: none !important;
                max-width: 70%;
                line-height: 1.3;
            }
            .relais-map .leaflet-control-attribution a {
                color: #9ca3af;
            }
            .relais-map .leaflet-control-zoom {
                border: none !important;
                box-shadow: none !important;
                margin: 12px !important;
            }
            .relais-map .leaflet-control-zoom a {
                width: 30px !important;
                height: 30px !important;
                line-height: 30px !important;
                border: 1px solid #e5e7eb !important;
                border-radius: 8px !important;
                background: #fff !important;
                color: #374151 !important;
                box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12) !important;
                font-size: 14px !important;
            }
            .relais-map .leaflet-control-zoom a:hover {
                background: #f9fafb !important;
                color: #16a34a !important;
            }
            .relais-map .leaflet-control-zoom-in {
                margin-bottom: 6px !important;
            }
            .relais-map .leaflet-control-zoom-out {
                border-top: 1px solid #e5e7eb !important;
            }
            .relais-map .leaflet-popup-content-wrapper {
                border-radius: 10px;
                box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);
                border: 1px solid #e5e7eb;
                padding: 0;
            }
            .relais-map .leaflet-popup-content {
                margin: 10px 12px;
                min-width: 140px;
                max-width: 220px;
                line-height: 1.35;
            }
            .relais-map .leaflet-popup-tip {
                box-shadow: none;
                border: 1px solid #e5e7eb;
                background: #fff;
            }
            .relais-map .leaflet-popup-close-button {
                display: none;
            }
        }

        /* Modal points relais — détails à la sélection */
        #relaisPointsList label.relais-point {
            border-width: 2px;
        }
        #relaisPointsList label.relais-point.is-selected {
            border-color: #16a34a;
            background: rgba(22, 163, 74, 0.06);
            box-shadow: 0 0 0 1px rgba(22, 163, 74, 0.2);
        }
        .relais-point-details {
            margin-top: 10px;
            padding-top: 10px;
            border-top: 1px solid #bbf7d0;
        }
        .relais-details-title {
            font-size: 11px;
            font-weight: 700;
            color: #15803d;
            margin-bottom: 6px;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .relais-hours {
            display: grid;
            grid-template-columns: 5.25rem minmax(0, 1fr);
            column-gap: 10px;
            row-gap: 3px;
            font-size: 11px;
            line-height: 1.35;
            max-width: 100%;
            min-width: 0;
        }
        .relais-hours-day { color: #6b7280; }
        .relais-hours-time {
            color: #111827;
            font-variant-numeric: tabular-nums;
            min-width: 0;
            overflow-wrap: anywhere;
        }
        .relais-hours-closed {
            color: #9ca3af;
            font-style: italic;
        }
        .relais-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-top: 8px;
        }
        .relais-meta-chip {
            font-size: 10px;
            font-weight: 600;
            padding: 3px 8px;
            border-radius: 999px;
            background: #f0fdf4;
            color: #15803d;
            border: 1px solid #bbf7d0;
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }

        /* Respect prefers-reduced-motion */
        @media (prefers-reduced-motion: reduce) {
            label.shipping-option,
            label.shipping-option:hover:not(.active),
            .shipping-check-badge {
                transition: none !important;
                transform: none !important;
            }
        }

        /* Exit intent animation */
        @keyframes bounce-in {
            0% { transform: scale(0.8); opacity: 0; }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); opacity: 1; }
        }
        .animate-bounce-in {
            animation: bounce-in 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        }

        /* === Floating labels === */
        .fl {
            position: relative;
        }
        .fl input:not(.iti__tel-input), .fl select {
            padding: 20px 12px 6px 12px !important;
            font-size: 15px;
            height: 52px;
        }
        .fl .iti__tel-input {
            padding-top: 20px !important;
            padding-bottom: 6px !important;
            padding-right: 12px !important;
            /* padding-left managed by intl-tel-input for flag offset */
            font-size: 15px;
            height: 52px;
        }
        .fl select { padding-top: 22px !important; }
        .fl > label {
            position: absolute;
            left: 13px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 15px;
            color: #9ca3af;
            pointer-events: none;
            transition: all 0.15s ease;
            margin: 0;
            line-height: 1;
            background: transparent;
            z-index: 1;
        }
        /* Float label up when focused or has content */
        .fl input:focus + label,
        .fl input:not(:placeholder-shown) + label,
        .fl select + label {
            top: 8px;
            transform: translateY(0);
            font-size: 11px;
            color: #6b7280;
            font-weight: 500;
        }
        .fl input:focus + label { color: var(--primary, #16a34a); }
        .fl select:focus + label { color: var(--primary, #16a34a); }
        /* intl-tel-input: label is sibling of .iti wrapper, not of input */
        .fl .iti { width: 100%; }
        .fl .iti + label { left: 52px; }
        .fl:focus-within > .iti + label,
        .fl.fl-active > .iti + label {
            top: 8px;
            transform: translateY(0);
            font-size: 11px;
            color: #6b7280;
            font-weight: 500;
        }
        .fl:focus-within > .iti + label { color: var(--primary, #16a34a); }

        /* CGV shake animation */
        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            20%, 60% { transform: translateX(-6px); }
            40%, 80% { transform: translateX(6px); }
        }
        .shake { animation: shake 0.4s ease-in-out; }
        .cgv-wrapper.cgv-error #cgvText,
        .cgv-wrapper.cgv-error #cgvText a {
            color: #dc2626;
        }

        /* Cart value change animations */
        @keyframes flash-saving {
            0% { background-color: rgba(22, 163, 74, 0.18); color: #15803d; }
            100% { background-color: transparent; }
        }
        @keyframes flash-change {
            0% { background-color: rgba(59, 130, 246, 0.12); }
            100% { background-color: transparent; }
        }
        .flash-saving { animation: flash-saving 0.7s ease-out; border-radius: 4px; }
        .flash-change { animation: flash-change 0.7s ease-out; border-radius: 4px; }

        @keyframes slide-out {
            to { opacity: 0; transform: translateX(-20px); max-height: 0; padding: 0; margin: 0; overflow: hidden; }
        }
        .slide-out { animation: slide-out 0.35s ease-out forwards; }

        @keyframes fade-in {
            from { opacity: 0; transform: translateY(6px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .fade-in { animation: fade-in 0.3s ease-out; }

        /* Quantity pulse */
        @keyframes qty-pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.3); }
            100% { transform: scale(1); }
        }
        .qty-pulse { animation: qty-pulse 0.25s ease-out; }

        /* Cart item attributes details */
        ul.item-attributes {
            list-style: none;
            margin: 0;
            padding: 0;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1px 16px;
        }
        ul.item-attributes li {
            padding: 4px 0;
            font-size: 11px;
            line-height: 1.35;
            border-bottom: 1px solid rgba(0,0,0,0.04);
        }
        ul.item-attributes li .attr-label {
            color: #94a3b8;
            font-size: 10px;
        }
        ul.item-attributes li .attr-value {
            color: #1e293b;
            font-weight: 500;
        }
        ul.item-attributes q { font-style: normal; quotes: none; }

        /* Mobile multi-step wizard */
        @media (max-width: 1023px) {
            .checkout-section[data-step] { display: none; }
            .checkout-section[data-step].mobile-active { display: block; }
            /* Billing section follows step 1 */
            #billingAddressFields { /* inherits from parent */ }
        }
        @media (min-width: 1024px) {
            .checkout-section[data-step] { display: block !important; }
            .mobile-step-nav { display: none !important; }
        }

        /* Progress stepper */
        .stepper-wrapper { position: relative; }
        .stepper-steps { display: flex; justify-content: space-between; position: relative; z-index: 1; }
        .step-item { display: flex; flex-direction: column; align-items: center; gap: 4px; background: none; border: none; padding: 0; cursor: pointer; color: #9ca3af; transition: color 0.2s; }
        .step-num { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 14px; font-weight: 700; background: #e5e7eb; color: #6b7280; transition: all 0.2s; }
        .step-label { font-size: 11px; font-weight: 500; white-space: nowrap; }
        .step-item.active { color: #16a34a; }
        .step-item.active .step-num { background: #16a34a; color: #fff; box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.15); }
        .step-item.active .step-label { font-weight: 600; }
        .step-item.done { color: #16a34a; }
        .step-item.done .step-num { background: #dcfce7; color: #16a34a; }
        .stepper-lines { position: absolute; top: 15px; left: 16px; right: 16px; display: flex; z-index: 0; }
        .step-line { flex: 1; height: 2px; background: #e5e7eb; transition: background 0.2s; }
        .step-line.done { background: #16a34a; }

        /* Smooth total transitions */
        #mobileCartTotal, #mobilePayTotal, #desktopPayTotal, #sidebarPayTotal {
            transition: color 0.3s ease;
        }

        /* Custom scrollbar */
        ::-webkit-scrollbar { width: 6px; }
        ::-webkit-scrollbar-track { background: #f1f5f9; }
        ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }

        /* City autocomplete dropdown */
        .city-suggestions {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            background: #fff;
            border: 1px solid #d1d5db;
            border-top: 0;
            border-radius: 0 0 8px 8px;
            max-height: 160px;
            overflow-y: auto;
            z-index: 20;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }
        .city-suggestions button {
            width: 100%;
            text-align: left;
            padding: 10px 16px;
            font-size: 14px;
            border: 0;
            background: none;
            cursor: pointer;
        }
        .city-suggestions button:hover,
        .city-suggestions button:focus {
            background: #f0fdf4;
        }

        /* Address autocomplete suggestions */
        .address-suggestions {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            background: #fff;
            border: 1px solid #d1d5db;
            border-top: 0;
            border-radius: 0 0 8px 8px;
            max-height: 200px;
            overflow-y: auto;
            z-index: 20;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }
        .address-suggestions button {
            width: 100%;
            text-align: left;
            padding: 10px 16px;
            font-size: 14px;
            border: 0;
            background: none;
            cursor: pointer;
        }
        .address-suggestions button:hover,
        .address-suggestions button:focus {
            background: #f0fdf4;
        }
        .address-suggestions .addr-main { font-weight: 500; }
        .address-suggestions .addr-detail { font-size: 12px; color: #6b7280; }

        /* intl-tel-input full width */
        .iti__tel-input { width: 100%; }

        /* CLS prevention: reserve space for async-loaded content */
        #cart-items { min-height: 120px; }
        #mobile-cart-items { min-height: 80px; }
        #shippingMethods { min-height: 170px; }
        #payment-element { min-height: 0; }
        .iti { width: 100%; min-height: 52px; }

        /* Skeleton loader */
        .skeleton {
            background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
            background-size: 200% 100%;
            animation: skeleton-shimmer 1.5s ease-in-out infinite;
            border-radius: 6px;
        }
        @keyframes skeleton-shimmer {
            0% { background-position: 200% 0; }
            100% { background-position: -200% 0; }
        }

        /* Cart loading overlay */
        .cart-loading-overlay {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 5;
        }

        /* === 1. Pay button busy shimmer === */
        @keyframes btn-busy-shimmer {
            0% { transform: translateX(-100%); }
            100% { transform: translateX(100%); }
        }
        .pay-btn-busy {
            position: relative;
            overflow: hidden;
            pointer-events: none;
            opacity: 0.85;
        }
        .pay-btn-busy::after {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.25) 50%, transparent 100%);
            animation: btn-busy-shimmer 1.5s ease-in-out infinite;
        }
        .spinner-inline {
            display: inline-block;
            width: 16px;
            height: 16px;
            border: 2px solid rgba(255,255,255,0.4);
            border-top-color: #fff;
            border-radius: 50%;
            animation: spin 0.6s linear infinite;
            vertical-align: middle;
            margin-left: 6px;
        }
        @keyframes price-pop {
            0% { transform: scale(1); }
            40% { transform: scale(1.08); color: #16a34a; }
            100% { transform: scale(1); }
        }
        .price-pop { animation: price-pop 0.4s ease-out; display: inline-block; }

        /* === 2. Input focus lift + checkmark === */
        input:not([type="radio"]):not([type="checkbox"]):not(.iti__tel-input):focus,
        select:focus {
            box-shadow: 0 0 0 3px rgba(22,163,74,0.15) !important;
            transition: box-shadow 0.2s ease, border-color 0.2s ease;
        }
        input:not([type="radio"]):not([type="checkbox"]):not(.iti__tel-input),
        select {
            transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
        }
        .input-valid:not(.iti__tel-input) {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2316a34a' viewBox='0 0 16 16'%3E%3Cpath d='M13.485 4.929a1 1 0 0 1 0 1.414l-6 6a1 1 0 0 1-1.414 0l-3-3a1 1 0 1 1 1.414-1.414L6.764 10.2l5.293-5.293a1 1 0 0 1 1.414 0z'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 12px center;
            padding-right: 36px !important;
        }
        .field-error.visible {
            animation: field-error-in 0.2s ease-out;
        }
        @keyframes field-error-in {
            from { opacity: 0; transform: translateY(-4px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* === 3. Mobile step slide === */
        @keyframes step-slide-in {
            from { opacity: 0; transform: translateX(40px); }
            to { opacity: 1; transform: translateX(0); }
        }
        @keyframes step-slide-in-back {
            from { opacity: 0; transform: translateX(-40px); }
            to { opacity: 1; transform: translateX(0); }
        }
        @media (max-width: 1023px) {
            .checkout-section[data-step].mobile-active[data-direction="forward"] {
                animation: step-slide-in 0.35s cubic-bezier(0.22, 1, 0.36, 1);
            }
            .checkout-section[data-step].mobile-active[data-direction="backward"] {
                animation: step-slide-in-back 0.35s cubic-bezier(0.22, 1, 0.36, 1);
            }
        }

        /* === 4. Custom radio shipping === */
        #shippingMethods input[type="radio"] {
            appearance: none;
            -webkit-appearance: none;
            border: 2px solid #d1d5db;
            border-radius: 50%;
            background: #fff;
            position: relative;
            cursor: pointer;
            transition: border-color 0.2s ease;
        }
        #shippingMethods input[type="radio"]:checked {
            border-color: #16a34a;
        }
        #shippingMethods input[type="radio"]:checked::after {
            content: '';
            position: absolute;
            top: 50%; left: 50%;
            width: 10px; height: 10px;
            background: #16a34a;
            border-radius: 50%;
            transform: translate(-50%, -50%) scale(0);
            animation: radio-fill 0.2s ease-out forwards;
        }
        @keyframes radio-fill {
            to { transform: translate(-50%, -50%) scale(1); }
        }
        /* === 5. Price bump handled in JS (animateElement) === */

        /* === 6. Pay button hover lift === */
        #v6PayButton:not(:disabled):hover,
        #v6SidebarPayButton:not(:disabled):hover,
        #v6MobilePayButton:not(:disabled):hover,
        #v6MobileContinueButton:not(:disabled):hover {
            transform: translateY(-1px);
            box-shadow: 0 8px 25px rgba(22,163,74,0.25);
        }
        #v6PayButton:not(:disabled):active,
        #v6SidebarPayButton:not(:disabled):active,
        #v6MobilePayButton:not(:disabled):active,
        #v6MobileContinueButton:not(:disabled):active {
            transform: translateY(0);
            box-shadow: 0 2px 8px rgba(22,163,74,0.15);
        }

        /* === 7. Desktop section appear === */
        @media (min-width: 1024px) {
            .checkout-section {
                opacity: 0;
                transform: translateY(12px);
                animation: section-appear 0.4s ease-out forwards;
            }
            .checkout-section:nth-child(1) { animation-delay: 0s; }
            .checkout-section:nth-child(2) { animation-delay: 0.08s; }
            .checkout-section:nth-child(3) { animation-delay: 0.16s; }
            .checkout-section:nth-child(4) { animation-delay: 0.24s; }
        }
        @keyframes section-appear {
            from { opacity: 0; transform: translateY(12px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* Stacking: chaque section crée un stacking context (transform de l'animation).
           On force l'ordre d'empilement décroissant pour que les dropdowns d'autocomplete
           d'une section puissent s'afficher au-dessus des sections suivantes. */
        #section-info     { position: relative; z-index: 4; }
        #section-shipping { position: relative; z-index: 3; }
        #payment-section  { position: relative; z-index: 2; }

        /* === 8. Reduced motion === */
        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
            }
        }

/* Cart item zoom cursor */
.cart-item-thumb { cursor: zoom-in !important; }