/* ═══════════════════════════════════════════════════════════
           VARIABLES CSS - PALETTE BOUTIQUE
           ═══════════════════════════════════════════════════════════ */
        :root {
            --joy-rouge: #FF0000;
            --joy-fond: rgba(0,0,0,0.15);
            --joy-carte: rgba(255,255,255,0.06);
            --joy-image-bg: rgba(255,255,255,0.04);
            --joy-bordure: rgba(255,255,255,0.15);
            --joy-blanc: #FFFFFF;
            --joy-gris: #999999;
            --joy-gold: #C9A961;
        }
        html, body { overflow-x: hidden !important; max-width: 100vw !important; }

        /* Fond transparent — laisse le background de joystore-interface visible */
        .single-product .site-main,
        .single-product #main,
        .single-product #primary,
        .single-product .entry-content,
        .single-product .product,
        .single-product .summary,
        .single-product .summary.entry-summary,
        .single-product .woocommerce-notices-wrapper { background: transparent !important; }

        .joystore-product-wrapper {
            width: 100%; max-width: 100vw; overflow-x: hidden;
            box-sizing: border-box; padding: 20px 15px;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            background: transparent;
        }
        @media (min-width: 769px) { .joystore-product-wrapper { padding: 40px 30px; max-width: 1200px; margin: 0 auto; } }

        .joystore-product-summary {
            background: var(--joy-carte); border: 2px solid var(--joy-bordure);
            border-radius: 12px; padding: 10px 20px 20px 20px;
            max-width: 600px; margin: 0 auto;
        }
        @media (min-width: 769px) {
            /* Dans la colonne gauche, pas de contrainte de largeur */
            .joystore-pc-left .joystore-product-summary {
                max-width: none; margin: 0;
                border-radius: 16px; padding: 15px 24px 24px 24px;
            }
            .joystore-product-summary { padding: 15px 30px 30px 30px; border-radius: 16px; }
        }

        .joystore-product-header { display: flex; gap: 15px; align-items: flex-start; }

        .joystore-product-image {
            flex: 0 0 100px; width: 100px; height: 100px;
            background: var(--joy-image-bg); border-radius: 10px;
            overflow: hidden; border: 2px solid var(--joy-bordure);
        }
        @media (min-width: 769px) { .joystore-product-image { flex: 0 0 120px; width: 120px; height: 120px; } }
        .joystore-product-image img { width: 100%; height: 100%; object-fit: cover; }

        .joystore-product-info { flex: 1; min-width: 0; }

        .joystore-product-title {
            font-size: 16px; font-weight: 700; color: var(--joy-blanc);
            margin: 0 0 10px 0; line-height: 1.3;
        }
        @media (min-width: 769px) { .joystore-product-title { font-size: 20px; } }

        .joystore-product-meta {
            display: flex; align-items: center; gap: 8px;
            font-size: 12px; color: var(--joy-gris); margin-bottom: 8px; flex-wrap: wrap;
        }
        .joystore-meta-item { display: flex; align-items: center; gap: 4px; }
        .joystore-meta-separator { color: var(--joy-bordure); }

        .joystore-product-rating { font-size: 12px; color: var(--joy-gris); margin-bottom: 8px; }
        .joystore-star { font-size: 14px; }

        .joystore-product-warning {
            background: rgba(255,0,0,0.1); border-left: 3px solid var(--joy-rouge);
            padding: 8px 12px; font-size: 12px; color: var(--joy-blanc);
            border-radius: 4px; margin-top: 10px;
        }

        .joystore-spacer-30 { height: 30px; }
        .joystore-spacer-15 { height: 15px; }
        .joystore-spacer-10 { height: 10px; }
        .joystore-spacer-4  { height: 4px; }
        @media (max-width: 768px) { .joystore-spacer-15 { height: 12px; } }

        .joystore-field-label {
            display: block; color: var(--joy-blanc);
            font-size: 13px; font-weight: 600; margin-bottom: 8px;
        }
        .joystore-required { color: var(--joy-rouge); margin-left: 3px; }

        .joystore-variation-selector {
            background: rgba(0,0,0,0.15) !important; border: 1px solid var(--joy-bordure);
            border-radius: 8px; padding: 12px 15px;
            display: flex; justify-content: space-between; align-items: center;
            cursor: pointer; transition: all 0.3s;
        }
        .joystore-variation-selector:hover { border-color: var(--joy-rouge) !important; background: rgba(0,0,0,0.15) !important; }
        .joystore-variation-selected { color: #FFFFFF !important; font-size: 14px; }
        .joystore-variation-arrow { color: var(--joy-gris); font-size: 12px; }

        .joystore-custom-field { width: 100%; }
        .joystore-field-compact { margin-bottom: 4px; }
        .joystore-field-last { margin-bottom: 0; }

        .joystore-field-input {
            width: 100%; background: rgba(0,0,0,0.15) !important; border: 2px solid rgba(255,255,255,0.45) !important;
            border-radius: 8px; padding: 12px 15px; color: #FFFFFF !important;
            font-size: 14px; transition: all 0.3s; box-sizing: border-box;
            -webkit-appearance: none; appearance: none;
        }
        .joystore-field-input:focus { border-color: var(--joy-rouge) !important; outline: none !important; background: rgba(0,0,0,0.15) !important; }
        .joystore-field-input::placeholder { color: var(--joy-gris) !important; }

        .joystore-field-select {
            background: rgba(0,0,0,0.15) !important; color: #FFFFFF !important;
            border: 2px solid rgba(255,255,255,0.45) !important;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23999999' d='M6 9L1 4h10z'/%3E%3C/svg%3E") !important;
            background-repeat: no-repeat !important; background-position: right 12px center !important;
            padding-right: 35px !important; appearance: none; -webkit-appearance: none;
        }
        .joystore-field-select:focus { background-color: #000000 !important; border-color: var(--joy-rouge) !important; }
        .joystore-field-select option { background: rgba(0,0,0,0.15) !important; color: #FFFFFF !important; }

        .joystore-password-wrapper { position: relative; width: 100%; }
        .joystore-password-wrapper .joystore-field-input { padding-right: 45px; }
        .joystore-toggle-password {
            position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
            background: none; border: none; cursor: pointer; padding: 5px;
            display: flex; align-items: center; justify-content: center;
            color: var(--joy-gris); transition: color 0.3s;
        }
        .joystore-toggle-password:hover { color: var(--joy-blanc) !important; }

        /* Sélecteur de quantité — COPIE du bloc du panier (.joy-qw/.joy-qb/.joy-qi) :
           un seul cadre bordé, fond transparent, séparateurs internes.
           Avant : trois éléments détachés de 36 px sur fond opaque, avec un
           champ blanc de 60 px — bien plus lourd que celui du panier.

           Les !important sont nécessaires : WooCommerce et le thème stylent
           « input.qty » de leur côté, ce qui redonnait au champ un fond clair
           et une taille de champ de formulaire. */
        .joystore-quantity-section { display: flex; justify-content: space-between; align-items: center; }
        .joystore-quantity-label { color: var(--joy-blanc); font-size: 14px; font-weight: 600; }
        .joystore-quantity-controls {
            display: flex; align-items: center; background: transparent;
            border: 1px solid var(--joy-bordure); border-radius: 6px;
            overflow: hidden; height: 28px; flex-shrink: 0;
        }
        .joystore-quantity-controls .joystore-qty-btn {
            background: none !important; border: none !important;
            color: var(--joy-blanc, #FFFFFF) !important;
            font-size: 14px; font-weight: 600; cursor: pointer;
            padding: 0 10px; height: 28px; line-height: 1; border-radius: 0;
            width: auto; box-shadow: none !important;
            display: flex; align-items: center; justify-content: center;
            user-select: none; -webkit-tap-highlight-color: transparent;
        }
        /* Survol réservé aux appareils à souris : sur mobile, le :hover reste
           « collé » après un tap. */
        @media (hover: hover) {
            .joystore-quantity-controls .joystore-qty-btn:hover {
                background: rgba(255,255,255,0.08) !important;
                color: var(--joy-blanc, #FFFFFF) !important;
            }
        }
        .joystore-quantity-controls .joystore-qty-btn:focus,
        .joystore-quantity-controls .joystore-qty-btn:focus-visible,
        .joystore-quantity-controls .joystore-qty-btn:active {
            outline: none;
            background: rgba(255,255,255,0.12) !important;
            color: var(--joy-blanc, #FFFFFF) !important;
        }
        .joystore-quantity-controls input.joystore-qty-input,
        .joystore-quantity-controls input.qty {
            flex: 0 0 40px !important; width: 40px !important;
            min-width: 0 !important; max-width: 40px !important;
            height: 28px !important; min-height: 0 !important;
            background: transparent !important;
            border: none !important;
            border-left: 1px solid var(--joy-bordure) !important;
            border-right: 1px solid var(--joy-bordure) !important;
            border-radius: 0 !important; box-shadow: none !important;
            color: var(--joy-blanc) !important;
            font-size: 12px !important; font-weight: 700 !important;
            line-height: 28px !important; text-align: center !important;
            padding: 0 !important; margin: 0 !important;
            -moz-appearance: textfield;
        }
        .joystore-quantity-controls input.joystore-qty-input:focus {
            outline: none !important; background: rgba(255,255,255,0.06) !important;
        }
        .joystore-quantity-controls input.joystore-qty-input::-webkit-outer-spin-button,
        .joystore-quantity-controls input.joystore-qty-input::-webkit-inner-spin-button {
            -webkit-appearance: none; margin: 0;
        }

        /* Une ligne fine : « Total » à gauche, le montant à droite ; « + N JoyCoins » dessous quand le programme est ouvert. */
        .joystore-price-section {
            background: rgba(255,255,255,0.03); border: 1px solid var(--joy-bordure);
            border-radius: 10px; padding: 11px 14px; margin-bottom: 15px;
        }
        .joystore-price-main { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0; }
        .joystore-price-section .jsjc-sous-prix { margin: 6px 0 0; text-align: right; font-size: 12px; }
        .joystore-price-label { color: var(--joy-gris, #9ca3af); font-size: 14px; font-weight: 600; }
        .joystore-price-amount { color: var(--joy-rouge); font-size: 20px; font-weight: 700; }
        @media (min-width: 769px) { .joystore-price-amount { font-size: 24px; } }
        .joystore-price-divider { height: 1px; background: var(--joy-bordure); margin-bottom: 10px; }
        .joystore-joy-coins { display: flex; align-items: center; gap: 8px; color: var(--joy-gris); font-size: 12px; }
        .joystore-coin-icon { font-size: 16px; }

        .joystore-btn {
            border: none; cursor: pointer; font-weight: 700;
            text-transform: uppercase; transition: all 0.3s;
            font-family: inherit; line-height: 1.2;
        }
        .joystore-btn:focus { outline: none; }
        .joystore-buttons-row-1 { display: flex; gap: 10px; width: 100%; justify-content: center; }

        /* Panier / Commander : deux moitiés strictement égales (bordure de 2 px
           comprise dans la largeur). */
        .joystore-btn-cart {
            flex: 1 1 0; min-width: 0; box-sizing: border-box;
            max-width: 320px;
            background: linear-gradient(135deg, var(--joy-gold) 0%, #B39150 100%);
            border: 2px solid #D4B872; color: #000000 !important; font-weight: 800;
            padding: 15px 10px; border-radius: 10px; font-size: 13px; min-height: 55px;
            box-shadow: 0 4px 12px rgba(201,169,97,0.3); transition: all 0.3s ease;
        }
        @media (max-width: 768px) { .joystore-btn-cart { font-size: 11px; padding: 12px 8px; min-height: 50px; } }
        .joystore-btn-cart:hover:not(:disabled),
        .joystore-btn-cart:focus:not(:disabled),
        .joystore-btn-cart:active:not(:disabled) {
            background: linear-gradient(135deg, #D4B872 0%, var(--joy-gold) 100%) !important;
            color: #000000 !important;
            transform: translateY(-3px); box-shadow: 0 6px 20px rgba(201,169,97,0.5);
        }
        .joystore-btn-cart:disabled {
            background: linear-gradient(135deg, #6B5B3A 0%, #4A3F28 100%);
            border-color: #6B5B3A; color: rgba(0,0,0,0.5) !important; cursor: not-allowed; opacity: 0.5;
        }

        .joystore-btn-direct {
            flex: 1 1 0; min-width: 0; box-sizing: border-box; border: 2px solid transparent;
            max-width: 320px; background: var(--joy-rouge); color: #FFFFFF !important;
            padding: 15px 10px; border-radius: 10px; font-size: 13px; min-height: 55px;
        }
        @media (max-width: 768px) { .joystore-btn-direct { font-size: 11px; padding: 12px 8px; min-height: 50px; } }
        .joystore-btn-direct:hover:not([disabled]),
        .joystore-btn-direct:focus:not([disabled]),
        .joystore-btn-direct:active:not([disabled]) {
            background: #AA0000 !important; color: #FFFFFF !important;
        }
        .joystore-btn-direct[disabled] { background: #660000; cursor: not-allowed; opacity: 0.5; color: #FFFFFF !important; }
        /* Bouton seul dans la ligne → centré, pas étiré sur toute la largeur */
        .joystore-btn-full { flex: 0 0 auto !important; width: 100%; max-width: 360px !important; }

        .joystore-buttons-row-2 { width: 100%; }

        .joystore-tabs-section {
            background: var(--joy-carte); border: 2px solid var(--joy-bordure);
            border-radius: 12px; overflow: hidden; max-width: 600px; margin: 0 auto;
        }
        .joystore-tab-item { border-bottom: 1px solid var(--joy-bordure); }
        .joystore-tab-item:last-child { border-bottom: none; }
        .joystore-tab-header {
            padding: 15px 20px; display: flex; justify-content: space-between;
            align-items: center; cursor: pointer; transition: background 0.3s;
            /* Tactile : sans ces règles, poser le doigt sur l'en-tête pour
               faire défiler la page sélectionnait le titre et déclenchait le
               rectangle de surbrillance gris d'Android — l'utilisateur avait
               l'impression d'avoir cliqué alors qu'il ne faisait que défiler. */
            -webkit-user-select: none; user-select: none;
            -webkit-tap-highlight-color: transparent;
            /* Le défilement vertical reste géré par le navigateur, pas par le
               geste de l'élément : le doigt fait défiler la page normalement. */
            touch-action: pan-y;
        }
        /* Survol réservé aux appareils à souris : sur mobile, le :hover reste
           « collé » après un appui et l'onglet paraît actif à tort. */
        @media (hover: hover) and (pointer: fine) {
            .joystore-tab-header:hover { background: rgba(255,255,255,0.05) !important; }
        }
        /* Retour visuel au vrai appui, lui, sur tous les appareils. */
        .joystore-tab-header:active { background: rgba(255,255,255,0.05) !important; }
        .joystore-tab-title { color: var(--joy-blanc); font-size: 14px; font-weight: 600; }
        /* Flèche dessinée en CSS (et non un caractère ▲▼ : selon le navigateur/iPhone,
           ces glyphes passent en emoji ou se décalent de la ligne de base). */
        .joystore-tab-icon { flex: none; width: 8px; height: 8px; margin: 0 4px 3px 12px; border-right: 2px solid var(--joy-rouge); border-bottom: 2px solid var(--joy-rouge); transform: rotate(45deg); transition: transform .2s; }
        .joystore-tab-item.is-open .joystore-tab-icon { margin-bottom: 0; margin-top: 3px; transform: rotate(225deg); }
        /* Lignes « ✔ texte » : icône SVG (identique partout) + texte aligné, retours à la ligne propres. */
        .joystore-tab-content .joystore-check { display: flex; align-items: flex-start; gap: 10px; margin: 8px 0 0; }
        .joystore-tab-content .joystore-check svg { flex: none; margin-top: 3px; }
        .joystore-tab-content .joystore-check span { flex: 1; min-width: 0; }
        .joystore-tab-content { display: none; padding: 0 20px 15px 20px; color: var(--joy-gris); font-size: 13px; line-height: 1.6; }
        .joystore-tab-item.is-open .joystore-tab-content { display: block; }

        /* Contraindre les images dans les avis (gravatar WooCommerce) */
        .joystore-tab-content img,
        .joystore-tab-content .woocommerce-review__photo img,
        .joystore-tab-content .comment-author img,
        .joystore-tab-content .gravatar,
        .joystore-tab-content img.avatar {
            width: 40px !important;
            height: 40px !important;
            max-width: 40px !important;
            border-radius: 50% !important;
            object-fit: cover !important;
            display: inline-block !important;
            flex-shrink: 0 !important;
        }
        /* Mise en forme générale des avis */
        .joystore-tab-content .woocommerce-Reviews { color: var(--joy-blanc); }
        .joystore-tab-content .comment_container { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 16px; }
        .joystore-tab-content .comment-text { flex: 1; min-width: 0; }
        .joystore-tab-content .woocommerce-review__author { color: var(--joy-blanc); font-weight: 600; font-size: 13px; }
        .joystore-tab-content .woocommerce-review__published-date { color: var(--joy-gris); font-size: 11px; }
        .joystore-tab-content .description p { margin: 6px 0 0; font-size: 13px; color: var(--joy-gris); }

        /* ═══════════════════════════════════════════════════════════
           LAYOUT PC — 2 COLONNES (min-width: 769px)
           ═══════════════════════════════════════════════════════════ */
        @media (min-width: 769px) {
            .joystore-pc-layout {
                display: flex;
                gap: 28px;
                align-items: flex-start;
                max-width: 1200px;
                margin: 0 auto;
            }

            /* Colonne gauche : image + titre + packs */
            .joystore-pc-left {
                flex: 1 1 0;
                min-width: 0;
            }

            /* Colonne droite : champs + prix + boutons */
            .joystore-pc-right {
                flex: 0 0 360px;
                width: 360px;
                position: sticky;
                top: 124px;
            }

            /* Sur PC : la carte left devient transparente (wrap géré par les colonnes) */
            .joystore-pc-layout .joystore-pc-left .joystore-product-summary {
                background: var(--joy-carte);
            }

            /* Header produit PC : image grande + infos */
            .joystore-pc-left .joystore-product-header {
                flex-direction: column;
                gap: 16px;
                align-items: flex-start;
            }
            .joystore-pc-left .joystore-product-image {
                flex: none;
                width: 100%;
                aspect-ratio: 1 / 1;
                height: auto;
                border-radius: 14px;
                display: flex; align-items: center; justify-content: center;
            }
            /* Sur PC, l'image se voit en entier, sans recadrage — le
               thumbnail 100x100 du header mobile (plus haut) reste en
               "cover" volontairement, il est trop petit pour que ça se voie. */
            .joystore-pc-left .joystore-product-image img { object-fit: contain; }
            .joystore-pc-left .joystore-product-title { font-size: 22px; }

        }

        @media (min-width: 769px) {
            /* Sur PC : le form-wrapper est dans la colonne droite — style card */
            #joystore-form-wrapper {
                background: var(--joy-carte);
                border: 2px solid var(--joy-bordure);
                border-radius: 16px;
                padding: 24px;
                backdrop-filter: blur(12px);
                -webkit-backdrop-filter: blur(12px);
                max-width: none;
            }
            /* Masquer le spacer-15 initial sur PC (pas besoin dans la card droite) */
            #joystore-form-wrapper > .joystore-spacer-15:first-child { display: none; }
        }

        /* Sur mobile : layout colonne unique */
        @media (max-width: 768px) {
            .joystore-pc-layout { flex-direction: column; }
            .joystore-pc-left { width: 100%; }
            .joystore-pc-right { width: 100%; position: static; }
            /* Sur mobile le form-wrapper reprend le style carte standard */
            #joystore-form-wrapper {
                background: var(--joy-carte);
                border: 2px solid var(--joy-bordure);
                border-radius: 12px;
                padding: 10px 20px 20px 20px;
                max-width: 600px;
                margin: 16px auto 0;
            }
        }

        /*
         * Ces deux sections restaient plafonnées à 600px — l'héritage du
         * layout mobile — alors que juste au-dessus (image + prix), la
         * page passe à 1100px sur PC. Ça créait un changement brutal de
         * largeur entre deux sections voisines.
         */
        @media (min-width: 769px) {
            .joystore-tabs-section,
            .joystore-related-section { max-width: 1200px !important; }
        }

        .joystore-related-section { max-width: 600px; margin: 0 auto; }
        .joystore-related-title { color: var(--joy-blanc); font-size: 18px; font-weight: 700; text-align: center; margin-bottom: 20px; }
        .joystore-related-card {
            flex: 0 0 130px !important; width: auto !important; scroll-snap-align: start;
            background: var(--joy-carte); border: 2px solid var(--joy-bordure);
            border-radius: 10px; overflow: hidden; text-decoration: none; transition: all 0.3s;
        }
        .joystore-related-card:hover { border-color: var(--joy-rouge) !important; transform: translateY(-3px); }
        .joystore-related-image { width: 100%; height: 120px; background: var(--joy-image-bg); }
        .joystore-related-image img { width: 100%; height: 100%; object-fit: cover; }
        .joystore-related-name {
            padding: 10px; color: var(--joy-blanc); font-size: 12px; font-weight: 500;
            line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2;
            -webkit-box-orient: vertical; overflow: hidden;
        }

        /* Modal variation */
        .joystore-variation-modal {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 20px;
        }
        /* Fond aligné sur les autres fenêtres du site : semi-transparent avec
           flou. À 0.95 d'opacité, la page disparaissait complètement derrière
           et la fenêtre semblait provenir d'ailleurs — le client ne voyait plus
           qu'il était toujours sur la boutique. */
        .joystore-variation-overlay {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0,0,0,0.55);
            backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
        }
        /* Boîte translucide, comme les cartes du site. Le fond était opaque et
           tranchait avec tout le reste — on voyait bien qu'il venait d'ailleurs.
           Le flou lui donne de la matière sans la rendre pleine. */
        .joystore-variation-content {
            position: relative;
            background: var(--joy-carte);
            backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
            border: 1px solid var(--joy-bordure);
            border-radius: 16px; max-width: 500px; width: 100%; max-height: 80vh;
            box-shadow: 0 20px 60px rgba(0,0,0,.55);
            overflow: hidden; display: flex; flex-direction: column;
        }
        .joystore-variation-header {
            padding: 20px; border-bottom: 1px solid var(--joy-bordure);
            display: flex; justify-content: space-between; align-items: center;
        }
        .joystore-variation-title { color: var(--joy-blanc); font-size: 18px; font-weight: 700; margin: 0; }
        .joystore-variation-close { background: none; border: none; color: var(--joy-gris); cursor: pointer; padding: 5px; }
        .joystore-variation-close:hover { color: var(--joy-blanc) !important; }
        .joystore-variation-body { padding: 20px; overflow-y: auto; flex: 1; min-height: 0; overscroll-behavior: contain; }
        .joystore-variation-option {
            background: var(--joy-fond); border: 2px solid var(--joy-bordure);
            border-radius: 10px; padding: 15px; margin-bottom: 12px; cursor: pointer;
            transition: all 0.3s; display: flex; align-items: center; gap: 15px;
        }
        .joystore-variation-option:hover:not(.joystore-variation-disabled) { border-color: var(--joy-rouge) !important; }
        .joystore-variation-option.joystore-variation-selected { background: rgba(255,0,0,0.1); border-color: var(--joy-rouge); }
        .joystore-variation-option.joystore-variation-disabled { opacity: 0.55; cursor: not-allowed; }
        .joystore-variation-radio { position: relative; flex-shrink: 0; }
        .joystore-variation-radio input[type="radio"] { position: absolute; opacity: 0; }
        .joystore-radio-custom { display: block; width: 20px; height: 20px; border: 2px solid var(--joy-bordure); border-radius: 50%; position: relative; }
        .joystore-variation-option.joystore-variation-selected .joystore-radio-custom { border-color: var(--joy-rouge); }
        .joystore-variation-option.joystore-variation-selected .joystore-radio-custom::after {
            content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
            width: 10px; height: 10px; background: var(--joy-rouge); border-radius: 50%;
        }
        .joystore-variation-info { flex: 1; min-width: 0; }
        .joystore-variation-name { color: var(--joy-blanc); font-size: 14px; font-weight: 600; }
        .joystore-variation-stock { font-size: 11px; display: inline-flex; align-items: center; gap: 4px; margin-top: 5px; padding: 2px 8px; border-radius: 20px; font-weight: 700; letter-spacing: .3px; }
        .joystore-variation-stock.joystore-stock-outofstock { color: #fff; background: #374151; border: 1px solid #374151; }
        .joystore-variation-stock.joystore-stock-onbackorder { color: #2980B9; background: rgba(41,128,185,0.1); border: 1px solid rgba(41,128,185,0.25); }
        .joystore-badge-nouveau { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; letter-spacing: .3px; color: #27AE60; background: rgba(39,174,96,0.12); border: 1px solid rgba(39,174,96,0.3); margin-top: 5px; }
        .joystore-variation-prices { text-align: right; flex-shrink: 0; }
        .joystore-price-old { text-decoration: line-through; color: var(--joy-gris); font-size: 12px; display: block; }
        .joystore-price-new { color: var(--joy-rouge); font-size: 16px; font-weight: 700; display: block; }
        .joystore-variation-footer { padding: 20px; border-top: 1px solid var(--joy-bordure); }
        .joystore-variation-btn {
            width: 100%; background: var(--joy-rouge); color: #FFFFFF !important; border: none;
            padding: 15px; border-radius: 10px; font-size: 15px; font-weight: 700;
            text-transform: uppercase; cursor: pointer; transition: all 0.3s;
        }
        .joystore-variation-btn:hover,
        .joystore-variation-btn:focus,
        .joystore-variation-btn:active { background: #AA0000 !important; color: #FFFFFF !important; }
        .joystore-btn-confirm:hover,
        .joystore-btn-confirm:focus,
        .joystore-btn-confirm:active { background: #0a6560 !important; color: #FFFFFF !important; }

        /* Bulle variation */
        .joystore-variation-bubble { position: absolute; z-index: 99999; animation: joystore-bubble-bounce 2s infinite; }
        .joystore-bubble-content { background: #FFFFFF; color: #000000; padding: 12px 18px; border-radius: 20px; font-size: 14px; font-weight: 700; box-shadow: 0 4px 20px rgba(0,0,0,0.3); max-width: 280px; text-align: center; line-height: 1.4; }
        .joystore-bubble-arrow { width: 0; height: 0; border-left: 15px solid transparent; border-right: 15px solid transparent; border-top: 20px solid #FFFFFF; margin: 0 auto; }
        @keyframes joystore-bubble-bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }

        /* ═══════════════════════════════════════════════════════════════
           TABLETTE ET PC — packs, onglets, avis, produits similaires
           Mobile < 769 · Tablette 769–1024 · PC ≥ 1025
           (Aperçu validé : image à gauche · infos, packs, champs, total et
            boutons à droite · onglets et similaires en pleine largeur)
           ═══════════════════════════════════════════════════════════════ */

        /* — Tablette : deux colonnes, image réduite — */
        @media (min-width: 769px) and (max-width: 1024px) {
            .joystore-pc-layout { padding: 0 24px; box-sizing: border-box; align-items: stretch !important; }
            .joystore-pc-left .joystore-product-image { flex: none; width: 100%; max-width: 300px; margin: 0 auto; }
            /* Les deux cartes gardent la même hauteur (pas de petite carte à côté d'une grande). */
            .joystore-pc-right { display: flex; flex-direction: column; }
            .joystore-pc-right #joystore-form-wrapper { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; }
        }

        /* — PC : grille image | infos + formulaire — */
        @media (min-width: 1025px) {
            .joystore-pc-layout {
                display: grid; grid-template-columns: minmax(0, 480px) minmax(0, 1fr); grid-template-rows: auto 1fr;
                column-gap: 40px; row-gap: 0; align-items: start;
                width: calc(100% - 48px); max-width: 1200px; margin: 0 auto; padding: 0; box-sizing: border-box;
            }
            .joystore-pc-left,
            .joystore-pc-left .joystore-product-summary,
            .joystore-pc-left .joystore-product-header { display: contents; }
            .joystore-pc-left .joystore-product-image {
                grid-column: 1; grid-row: 1 / span 2; width: 100%; max-width: none; height: auto; margin: 0;
                aspect-ratio: 1 / 1; flex: none; position: sticky !important; top: 124px;
            }
            .joystore-pc-left .joystore-product-info { grid-column: 2; grid-row: 1; min-width: 0; padding-bottom: 8px; }
            .joystore-pc-left .joystore-product-title { font-size: 30px; line-height: 1.15; }
            .joystore-pc-right { grid-column: 2; grid-row: 2; position: static; top: auto; width: auto; flex: none; min-width: 0; }
            #joystore-form-wrapper {
                background: none; border: none; padding: 0; border-radius: 0; box-shadow: none;
                backdrop-filter: none; -webkit-backdrop-filter: none;
            }
        }

        /* — Packs ouverts (PC) : 8 par page, 2 colonnes × 4 lignes — */
        .joystore-packs { display: none; }
        @media (min-width: 1025px) {
            .joystore-packs { display: block; padding-top: 6px; }
            .joystore-packs-title { display: flex; align-items: center; justify-content: space-between; color: #fff; font-size: 13px; font-weight: 600; margin-bottom: 10px; }
            .joystore-packs-total { font-style: normal; color: var(--joy-gris); font-size: 11px; font-weight: 500; }
            .joystore-packs-frame { position: relative; }
            .joystore-packs-track {
                display: flex; overflow-x: auto; overflow-y: hidden;
                scroll-snap-type: x mandatory; scrollbar-width: none;
                overscroll-behavior-x: contain; touch-action: pan-x pan-y; -webkit-overflow-scrolling: touch;
            }
            .joystore-packs-track::-webkit-scrollbar { display: none; }
            .joystore-packs-page {
                flex: 0 0 100%; scroll-snap-align: start; box-sizing: border-box;
                display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
                grid-template-rows: repeat(4, 54px); gap: 10px; padding: 0 2px;
            }
            .joystore-pack {
                display: flex; align-items: center; gap: 12px; text-align: left;
                padding: 6px 14px; margin: 0; min-width: 0;
                background: var(--joy-fond) !important; color: #fff !important;
                border: 2px solid var(--joy-bordure) !important; border-radius: 10px !important;
                font-family: inherit; font-size: 13px; line-height: 1.2; cursor: pointer;
                box-shadow: none !important; text-transform: none; letter-spacing: 0;
                transition: border-color .2s, background .2s;
            }
            .joystore-pack-radio { flex: 0 0 20px; width: 20px; height: 20px; border: 2px solid var(--joy-bordure); border-radius: 50%; position: relative; }
            .joystore-pack.is-selected .joystore-pack-radio { border-color: var(--joy-rouge); }
            .joystore-pack.is-selected .joystore-pack-radio::after {
                content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--joy-rouge);
            }
            .joystore-pack-main  { flex: 1 1 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
            .joystore-pack-name  { font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
            .joystore-pack-price { flex: 0 0 auto; text-align: right; display: flex; flex-direction: column; align-items: flex-end; }
            .joystore-pack-now   { color: var(--joy-rouge); font-weight: 700; font-size: 14px; }
            .joystore-pack-old   { color: var(--joy-gris); font-size: 10px; text-decoration: line-through; }
            .joystore-pack-tag   { font-size: 10px; font-weight: 600; padding: 0; background: none; }
            .joystore-pack-tag-off { color: var(--joy-gris); }
            .joystore-pack-tag-pre { color: #4aa3e0; }
            .joystore-pack:hover:not(:disabled),
            .joystore-pack:focus-visible { border-color: rgba(255,0,0,.7) !important; background: rgba(255,0,0,.05) !important; color: #fff !important; outline: none; }
            .joystore-pack.is-selected { border-color: var(--joy-rouge) !important; background: rgba(255,0,0,.1) !important; color: #fff !important; }
            .joystore-pack.joystore-pack-off { opacity: .5; cursor: not-allowed; }
            .joystore-packs-nav {
                position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
                width: 34px; height: 34px; padding: 0; margin: 0; border-radius: 50% !important;
                display: flex; align-items: center; justify-content: center;
                background: rgba(20,10,14,.9) !important; color: #fff !important;
                border: 1px solid var(--joy-bordure) !important; box-shadow: 0 4px 14px rgba(0,0,0,.4) !important;
                font-size: 22px; line-height: 1; cursor: pointer;
                backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
                transition: opacity .2s, background .2s, border-color .2s;
            }
            .joystore-packs-prev { left: -17px; }
            .joystore-packs-next { right: -17px; }
            .joystore-packs-nav:hover { background: var(--joy-rouge) !important; border-color: var(--joy-rouge) !important; color: #fff !important; }
            .joystore-packs-nav.is-off { opacity: .25; pointer-events: none; }
            .joystore-packs-foot { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 12px; color: var(--joy-gris); font-size: 11px; font-weight: 600; }
            .joystore-packs-dots { display: inline-flex; gap: 6px; }
            .joystore-packs-dot { display: block; width: 6px; height: 6px; border-radius: 6px; background: rgba(255,255,255,.25); transition: width .2s, background .2s; }
            .joystore-packs-dot.is-on { width: 18px; background: var(--joy-rouge); }
            .joystore-packs-count .joystore-packs-cur { color: #fff; }

            /* Le sélecteur déroulant cède la place à la grille ouverte */
            .joystore-variation-section > .joystore-field-label,
            #joystore-variation-trigger { display: none !important; }
        }

        /* — Onglets horizontaux (PC) ; l'accordéon reste ailleurs — */
        .joystore-tabbar { display: none; }
        @media (min-width: 1025px) {
            .joystore-tabs-section { overflow: visible; }
            .joystore-tabbar { display: flex; gap: 4px; padding: 6px 10px 0; border-bottom: 1px solid var(--joy-bordure); }
            .joystore-tabbtn {
                position: relative; padding: 14px 20px; margin: 0 0 -1px; cursor: pointer;
                background: transparent !important; color: var(--joy-gris) !important;
                border: none !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important;
                font-family: inherit; font-size: 14px; font-weight: 600; text-transform: none; letter-spacing: 0;
                box-shadow: none !important; transition: color .2s, border-color .2s;
            }
            .joystore-tabbtn:hover, .joystore-tabbtn:focus-visible { color: #fff !important; background: transparent !important; outline: none; }
            .joystore-tabbtn.is-active { color: #fff !important; border-bottom-color: var(--joy-rouge) !important; }
            .joystore-tab-header { display: none !important; }
            .joystore-tab-item { border-bottom: none; }
            .joystore-tab-item .joystore-tab-content { display: none !important; padding: 22px 26px; }
            .joystore-tab-item.is-active .joystore-tab-content { display: block !important; }
        }

        /* — Avis : cartes compactes, 1 / 2 / 3 colonnes — */
        .joystore-reviews { display: grid; grid-template-columns: 1fr; gap: 10px; }
        .joystore-review { background: rgba(255,255,255,.04); border: 1px solid var(--joy-bordure); border-radius: 10px; padding: 12px 14px; min-width: 0; }
        .joystore-review-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
        .joystore-review-avatar { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; background: rgba(255,0,0,.16); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; }
        .joystore-review-who { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
        .joystore-review-who strong { color: #fff; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .joystore-review-who small { color: var(--joy-gris); font-size: 11px; }
        .joystore-review-stars { flex: 0 0 auto; color: #f5b301; font-size: 12px; letter-spacing: 1px; white-space: nowrap; }
        .joystore-review-stars i { font-style: normal; color: rgba(255,255,255,.18); }
        .joystore-review-text { margin: 0 !important; color: #d4d4de; font-size: 13px !important; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
        .joystore-reviews-more {
            display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; padding: 11px 14px;
            border: 1px solid var(--joy-bordure); border-radius: 10px; color: #fff !important; text-decoration: none !important;
            font-size: 13px; font-weight: 600; transition: border-color .2s, background .2s;
        }
        .joystore-reviews-more:hover { border-color: var(--joy-rouge) !important; background: rgba(255,0,0,.08) !important; color: #fff !important; }
        .joystore-reviews-more span { color: var(--joy-rouge); }
        @media (min-width: 769px)  { .joystore-reviews { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
        @media (min-width: 1025px) { .joystore-reviews { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

        /* — Produits similaires : une seule ligne, flèches seulement si l'on peut défiler — */
        .joystore-related-wrap { position: relative; }
        .joystore-related-scroll {
            display: flex !important; flex-wrap: nowrap; gap: 14px; overflow-x: auto; overflow-y: hidden;
            padding: 4px 2px 10px; scroll-snap-type: x proximity; scrollbar-width: none;
            overscroll-behavior-x: contain; touch-action: pan-x pan-y; -webkit-overflow-scrolling: touch;
        }
        .joystore-related-scroll::-webkit-scrollbar { display: none; }
        .joystore-related-scroll.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
        .joystore-related-scroll.is-dragging a { pointer-events: none; }
        .joystore-related-nav { display: none; }
        @media (min-width: 769px) {
            .joystore-related-scroll { cursor: grab; }
            .joystore-related-card { flex: 0 0 calc((100% - 3 * 14px) / 4) !important; }
            .joystore-related-image { height: auto; aspect-ratio: 1 / 1; }
            .joystore-related-nav {
                position: absolute; top: calc(50% - 20px); transform: translateY(-50%); z-index: 2;
                width: 34px; height: 34px; padding: 0; margin: 0; border-radius: 50% !important;
                display: flex; align-items: center; justify-content: center;
                background: rgba(20,10,14,.9) !important; color: #fff !important;
                border: 1px solid var(--joy-bordure) !important; box-shadow: 0 4px 14px rgba(0,0,0,.4) !important;
                font-size: 22px; line-height: 1; cursor: pointer;
                backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
                transition: opacity .2s, background .2s, border-color .2s;
            }
            .joystore-related-prev { left: -17px; }
            .joystore-related-next { right: -17px; }
            .joystore-related-nav:hover { background: var(--joy-rouge) !important; border-color: var(--joy-rouge) !important; color: #fff !important; }
            .joystore-related-nav.is-off { opacity: .25; pointer-events: none; }
            .joystore-related-nav.is-none { display: none !important; }
        }
        @media (min-width: 1025px) {
            .joystore-related-card { flex: 0 0 calc((100% - 5 * 14px) / 6) !important; }
        }

        /* — Fenêtre de choix des packs : panneau qui monte du bas sur mobile — */
        @media (max-width: 768px) {
            .joystore-variation-modal { align-items: flex-end !important; padding: 0 !important; }
            .joystore-variation-content {
                max-width: none; width: 100%; max-height: 78vh; max-height: 78dvh;
                border-radius: 20px 20px 0 0; border-bottom: none;
                animation: joystore-sheet-up .28s cubic-bezier(.2,.8,.2,1);
                padding-bottom: env(safe-area-inset-bottom, 0);
            }
            .joystore-variation-content::before {
                content: ''; display: block; width: 40px; height: 4px; border-radius: 4px;
                background: rgba(255,255,255,.25); margin: 8px auto 0; flex: 0 0 auto;
            }
            .joystore-variation-header { padding: 12px 18px 14px; }
            .joystore-variation-body { padding: 14px 16px; }
            .joystore-variation-footer { padding: 12px 16px 16px; flex: 0 0 auto; }
        }
        @keyframes joystore-sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }

        /* — Cœur, message de gel et alerte stock — */
        .joystore-favori-btn { transition: transform .2s; }
        .joystore-favori-btn:hover, .joystore-favori-btn:focus { background: none !important; transform: scale(1.12); }
        .joystore-stock-slot { margin-bottom: 4px; }
        .joystore-stock-slot .joystore-notif-stock { margin: 0 0 8px !important; }
        .joystore-notif-stock-btn:hover { background: #A00000 !important; color: #fff !important; }

        /* ── 3.0 — LE THÈME NE REPEINT PAS LES BOUTONS DE LA BOUTIQUE ─────────────
           Certains thèmes colorent TOUS les boutons et champs de la page avec des
           règles plus fortes que celles-ci (ex. Twenty Twenty-One : Commander gris
           au lieu de rouge). Mêmes valeurs que plus haut, attachées à la fiche
           (#joystore-form-wrapper, #joystore-variation-modal) pour l'emporter.
           Les états survol / désactivé restent ceux définis plus haut. */
        #joystore-form-wrapper .joystore-btn-direct { background: var(--joy-rouge); border: 2px solid transparent; color: #FFFFFF; }
        #joystore-form-wrapper .joystore-btn-direct[disabled] { background: #660000; }
        #joystore-form-wrapper .joystore-btn-cart { background: linear-gradient(135deg, var(--joy-gold) 0%, #B39150 100%); border: 2px solid #D4B872; }
        #joystore-form-wrapper .joystore-btn-cart:disabled { background: linear-gradient(135deg, #6B5B3A 0%, #4A3F28 100%); border-color: #6B5B3A; }
        #joystore-form-wrapper .joystore-field-input { border-radius: 8px; padding: 12px 15px; }
        #joystore-form-wrapper .joystore-password-wrapper .joystore-field-input { padding-right: 45px; }
        #joystore-form-wrapper .joystore-toggle-password { background: none; border: none; padding: 5px; color: var(--joy-gris); }
        #joystore-variation-modal .joystore-variation-close { background: none; border: none; padding: 5px; color: var(--joy-gris); }
        #joystore-variation-modal .joystore-variation-btn { background: var(--joy-rouge); border: none; color: #FFFFFF; padding: 15px; border-radius: 10px; }