/* Fiche produit Exoring : galerie (mosaique desktop / carrousel mobile),
   cartes de description, neutralisation de la marge du carrousel video et
   badge de stock.

   Migre le 2026-10-14 depuis wp-content/themes/twentytwentyfour/functions.php,
   ou ce CSS etait injecte en inline via wp_add_inline_style(). Le theme parent
   est ecrase a chaque mise a jour : ce fichier permet de remettre le theme
   d origine et de pouvoir le mettre a jour librement.
   Contenu repris a l identique, par extraction automatique (aucune reecriture).
   Charge uniquement sur les fiches produit par exo-fiche-produit.php. */


        .wp-block-woocommerce-product-image-gallery,
        .woocommerce div.product div.images.woocommerce-product-gallery {
            width: 100% !important; max-width: 100% !important; float: none !important;
        }

        /* Le JS de galerie etant decharge, on force la galerie visible (WooCommerce
           la met a opacity:0 puis flexslider la rallumait). */
        .woocommerce-product-gallery { opacity: 1 !important; }

        /* Securite : neutralise toute geometrie inline residuelle de flexslider */
        .woocommerce-product-gallery .flex-viewport { height: auto !important; overflow: visible !important; width: 100% !important; }
        .woocommerce-product-gallery__wrapper { transform: none !important; transition: none !important; width: 100% !important; }
        .flex-control-nav { display: none !important; }

        /* Desktop >=769px : mosaique 2 colonnes */
        @media (min-width: 769px) {
            .woocommerce-product-gallery__wrapper {
                display: grid !important;
                grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
                gap: 8px;
            }
            .woocommerce-product-gallery__image {
                width: 100% !important; max-width: 100% !important; min-width: 0;
                margin: 0 !important; float: none !important;
                aspect-ratio: 1 / 1; overflow: hidden; border-radius: 6px;
            }
            .woocommerce-product-gallery__image a,
            .woocommerce-product-gallery__image img {
                display: block; width: 100% !important; height: 100% !important; object-fit: cover;
            }
            .woocommerce-product-gallery__trigger { display: none !important; }
        }

        /* Mobile <=768px : carrousel swipe scroll-snap (aucun JS) */
        @media (max-width: 768px) {
            .woocommerce-product-gallery__wrapper {
                display: flex !important; gap: 8px;
                overflow-x: auto; scroll-snap-type: x mandatory;
                scrollbar-width: none; -webkit-overflow-scrolling: touch;
            }
            .woocommerce-product-gallery__wrapper::-webkit-scrollbar { display: none; }
            .woocommerce-product-gallery__image {
                flex: 0 0 100% !important; width: 100% !important; min-width: 100%;
                margin: 0 !important; float: none !important; scroll-snap-align: start;
            }
            .woocommerce-product-gallery__image img { width: 100% !important; height: auto; display: block; }
        }

        /* Bloc video temoignages (bloc reutilisable #4066, .exo-video-wrap) :
           en CSS additionnel (Personnaliser > CSS additionnel), une marge
           negative mobile "mange" le padding global du theme pour laisser
           le carrousel affleurer les bords - technique pensee pour la page
           d accueil, ou ce padding global existe reellement. Sur la fiche
           produit ce padding vaut 0, donc la meme marge negative tirait le
           carrousel hors ecran des deux cotes : cartes sans bordure visible
           + ecart a droite + page non centree en responsive. On neutralise
           cette marge ici, uniquement sur la fiche produit. */
        @media (max-width: 900px) {
            .exo-video-wrap { margin-left: 0 !important; margin-right: 0 !important; }
        }

        /* Description produit (onglet "Description") : intro + photo produit a droite,
           puis 3 cartes Composition / Utilisation / Montage et entretien. Remplace le
           mur de texte brut par une mise en page aeree, coherente avec le reste du site
           (cartes arrondies + icone, meme esprit que les pages Comment / Pourquoi). */
        .exo-desc-intro-row { gap: 32px; margin-bottom: 8px; }
        .exo-desc-intro { font-size: 1.05rem; line-height: 1.65; }
        .exo-desc-photo-col { text-align: center; }
        .exo-desc-photo img {
            border-radius: 16px;
            box-shadow: 0 8px 24px rgba(0,0,0,.08);
        }
        .exo-desc-cards { gap: 20px; margin-top: 16px; }
        .exo-desc-cards .exo-desc-card {
            background: #f7f9fc;
            border-radius: 14px;
            padding: 26px 24px;
            box-shadow: 0 2px 10px rgba(0,0,0,.05);
        }
        .exo-desc-card h4 {
            display: flex; align-items: center; gap: 12px;
            font-size: 1.05rem; margin-top: 0; margin-bottom: 12px;
        }
        .exo-desc-card h4::before {
            content: "";
            display: inline-block;
            width: 36px; height: 36px; flex: 0 0 36px;
            border-radius: 50%;
            background-color: #eaf3fe;
            background-repeat: no-repeat;
            background-position: center;
            background-size: 18px 18px;
        }
        .exo-desc-card--composition h4::before {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f74b8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-5.5-7-11a7 7 0 0 1 14 0c0 5.5-7 11-7 11z'/%3E%3C/svg%3E");
        }
        .exo-desc-card--utilisation h4::before {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f74b8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 2l4 4-4 4'/%3E%3Cpath d='M3 11V9a4 4 0 0 1 4-4h14'/%3E%3Cpath d='M7 22l-4-4 4-4'/%3E%3Cpath d='M21 13v2a4 4 0 0 1-4 4H3'/%3E%3C/svg%3E");
        }
        .exo-desc-card--montage h4::before {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f74b8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a4 4 0 0 0-5.4 5.4L3 18l3 3 6.3-6.3a4 4 0 0 0 5.4-5.4l-2.8 2.8-2-2 2.8-2.8z'/%3E%3C/svg%3E");
        }

        /* Message "Plus que X en stock dans ce coloris" : badge discret au lieu
           du texte brut WooCommerce, pour signaler la raretee sans etre alarmant. */
        p.stock.exo-stock-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: #fff4e5;
            color: #b45309;
            font-weight: 600;
            font-size: 0.9rem;
            padding: 8px 14px;
            border-radius: 999px;
            margin: 4px 0 16px;
        }
        p.stock.exo-stock-badge::before {
            content: "";
            width: 8px; height: 8px;
            flex: 0 0 8px;
            border-radius: 50%;
            background: #f59e0b;
        }

        /* "En stock" (vert) et "Rupture de stock" (rouge) : meme pastille que
           le badge "Plus que X" (orange), demande du 2026-10-27. Les textes
           restent ceux de WooCommerce (traduction Loco). */
        p.stock.in-stock:not(.exo-stock-badge),
        p.stock.out-of-stock {
            /* inline-block et non inline-flex : "<strong>En stock</strong>, expedie..."
               donnerait deux items flex, avec un ecart parasite avant la virgule. */
            display: inline-block;
            font-weight: 600;
            font-size: 0.9rem;
            padding: 8px 14px;
            border-radius: 999px;
            margin: 4px 0 16px;
        }
        p.stock.in-stock:not(.exo-stock-badge)::before,
        p.stock.out-of-stock::before {
            content: "";
            display: inline-block;
            width: 8px; height: 8px;
            margin-right: 8px;
            vertical-align: 0.1em;
            border-radius: 50%;
        }
        p.stock.in-stock:not(.exo-stock-badge) {
            background: #e8f6ec;
            color: #15803d;
        }
        p.stock.in-stock:not(.exo-stock-badge)::before {
            background: #22c55e;
        }
        p.stock.out-of-stock {
            background: #fdecec;
            color: #b91c1c;
        }
        p.stock.out-of-stock::before {
            background: #ef4444;
        }

        /* Date de retour sous "Rupture de stock" (exo-stock-badge.php 1.2, 2026-10-29). */
        .exo-stock-reappro {
            margin: -6px 0 16px;
            font-size: 0.9rem;
            color: #444;
        }
        .exo-stock-reappro strong { color: #111; }