/** Shopify CDN: Minification failed Line 333:39 Unexpected "{" Line 333:48 Expected ":" **/ /* =================================================================== * ===== DÉBUT DE VOTRE CODE CSS PERSONNALISÉ (NEOVEO) - VERSION FINALE (STABILITÉ RESTAURÉE) ===== * =================================================================== */ /* =============================== Couleur d'accent "Bleu Bannière" (NÉCESSAIRE pour le bouton et le contour actif) Utilisation du bleu #4D71F9 =============================== */ :root { --brand-accent-color: #4D71F9; /* Bleu "bannière" du client */ --brand-accent-color-hover: #3C5ADF; /* Une version plus foncée */ } /* =============================== Font : AtypText Semibold NOTE : @font-face déplacé en inline dans layout/theme.liquid car custom.css ne peut pas évaluer Liquid (404 sur l'URL du font). =============================== */ /* =============================== Heading du slideshow =============================== */ .slideshow__slide-heading { font-family: 'AtypText', sans-serif !important; font-weight: 600 !important; font-size: 38px !important; line-height: 1.2 !important; color: #FFFFFF !important; text-transform: uppercase; margin-bottom: 0 !important; position: relative; } .slideshow__slide-heading .highlight { position: relative; font-weight: 700; } .slideshow__slide-heading .highlight::after { content: ""; position: absolute; left: 0; bottom: -3px; width: 100%; height: 5px; background-color: #00FFFF; /* Bleu électrique */ border-radius: 2px; transform: rotate(-2deg); } /* =============================== Positionnement des slides (SWIPER version) =============================== */ .slideshow__slide[data-swiper-slide-index="0"] .slideshow__slide-content, .slideshow__slide.swiper-slide-duplicate[data-swiper-slide-index="0"] .slideshow__slide-content { display: flex !important; flex-direction: column !important; justify-content: flex-start !important; align-items: center !important; padding-top: 5px !important; transform: translateY(-15px) !important; transition: none !important; } .slideshow__slide[data-swiper-slide-index="1"] .slideshow__slide-content, .slideshow__slide[data-swiper-slide-index="2"] .slideshow__slide-content, .slideshow__slide[data-swiper-slide-index="3"] .slideshow__slide-content, .slideshow__slide.swiper-slide-duplicate[data-swiper-slide-index="1"] .slideshow__slide-content, .slideshow__slide.swiper-slide-duplicate[data-swiper-slide-index="2"] .slideshow__slide-content, .slideshow__slide.swiper-slide-duplicate[data-swiper-slide-index="3"] .slideshow__slide-content { display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; padding-top: 0 !important; transform: none !important; } /* =============================== Description : conteneurs =============================== */ .slideshow__slide[data-swiper-slide-index="1"] .slideshow__slide-description, .slideshow__slide[data-swiper-slide-index="2"] .slideshow__slide-description, .slideshow__slide[data-swiper-slide-index="3"] .slideshow__slide-description, .slideshow__slide.swiper-slide-duplicate[data-swiper-slide-index="1"] .slideshow__slide-description, .slideshow__slide.swiper-slide-duplicate[data-swiper-slide-index="2"] .slideshow__slide-description, .slideshow__slide.swiper-slide-duplicate[data-swiper-slide-index="3"] .slideshow__slide-description { display: block !important; width: 100% !important; max-width: 700px !important; margin: 0 auto !important; } /* =============================== Description : texte =============================== */ .slideshow__slide[data-swiper-slide-index="0"] .slideshow__slide-description p, .slideshow__slide[data-swiper-slide-index="0"] .slideshow__slide-description strong, .slideshow__slide.swiper-slide-duplicate[data-swiper-slide-index="0"] .slideshow__slide-description p, .slideshow__slide.swiper-slide-duplicate[data-swiper-slide-index="0"] .slideshow__slide-description strong, .slideshow__slide[data-swiper-slide-index="1"] .slideshow__slide-description p, .slideshow__slide[data-swiper-slide-index="2"] .slideshow__slide-description p, .slideshow__slide[data-swiper-slide-index="3"] .slideshow__slide-description p, .slideshow__slide.swiper-slide-duplicate[data-swiper-slide-index="1"] .slideshow__slide-description p, .slideshow__slide.swiper-slide-duplicate[data-swiper-slide-index="2"] .slideshow__slide-description p, .slideshow__slide.swiper-slide-duplicate[data-swiper-slide-index="3"] .slideshow__slide-description p { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; text-align: center !important; font-size: 16px !important; color: #FFFFFF !important; margin: 0 auto !important; line-height: 1.4 !important; } /* =============================== Bouton =============================== */ .slideshow__slide-button-wrapper .slideshow__slide-button { margin-top: 10px !important; } /* =============================== Responsive mobile Slideshow =============================== */ @media screen and (max-width: 768px) { .slideshow__slide-heading { font-size: 26px !important; margin-bottom: 2px !important; } .slideshow__slide-description p { font-size: 14px !important; margin-bottom: 2px !important; } } /* =============================== Announcement bar =============================== */ .announcement-wrapper { background-color: #FFFFFF; } .announcement-bar { padding-top: 4px !important; padding-bottom: 4px !important; font-size: 11px !important; background-color: #E0F2FF; color: #333333; padding: 6px 20px !important; margin-top: 6px; } /* ===== SUPPRIME LES POINTS DE PAGINATION (Collection List) ===== */ .collection-list .swiper-pagination, .collection-list .swiper-pagination-bullets, .collection-list .swiper-pagination-horizontal { display: none !important; opacity: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; } .collection-list .swiper-container, .collection-list .swiper { padding-bottom: 0 !important; margin-bottom: 0 !important; } /* =================================================================== * ⭐️ CORRECTION FINALE : STYLE DES OPTIONS RADIO DE COULEUR ET TAILLE * =================================================================== */ /* 1. Style des options radio non pastilles (Taille/Poids comme "1KG") */ .radio-option__label { /* Nouvelle forme rectangulaire */ border-radius: 8px !important; font-weight: 500 !important; transition: all 0.25s ease !important; border: 1px solid #cccccc !important; padding: 10px 18px !important; /* Taille légèrement élargie */ background-color: #ffffff !important; color: #333333 !important; line-height: 1.2; } /* Style de l'option radio Telle que "1KG" cochée */ input[type="radio"]:checked + .radio-option__label { /* Passé au NOIR pour la sélection */ background-color: #000000 !important; color: #ffffff !important; border-color: #000000 !important; box-shadow: none !important; /* Option par défaut (1KG) sera donc clairement noire */ } /* 2. FORCER LE STYLE PASTILLE POUR LES COULEURS */ .radio-option input[data-option="Couleur"] + .radio-option__label { /* Force le style Pastille */ width: 34px !important; height: 34px !important; min-width: 34px !important; min-height: 34px !important; border-radius: 50% !important; padding: 0 !important; /* Masque le texte (Noir/Blanc/Gris) */ font-size: 0 !important; text-indent: -9999px !important; overflow: hidden !important; white-space: nowrap !important; /* Style du cercle - bordure par défaut */ border: 2px solid #e0e0e0 !important; position: relative !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; /* Retire toute transformation/opacité par défaut */ transform: none !important; opacity: 1 !important; } /* --- 3. COULEURS SPÉCIFIQUES DES PASTILLES (Non sélectionné) --- */ /* Pastille NOIR (Non sélectionné) */ .radio-option input[value="Noir"][data-option="Couleur"] + .radio-option__label { background-color: #000000 !important; } /* Pastille BLANC (Non sélectionné) */ .radio-option input[value="Blanc"][data-option="Couleur"] + .radio-option__label { background-color: #ffffff !important; border-color: #cccccc !important; /* Bordure plus visible pour le blanc */ } /* Pastille GRIS (Non sélectionné) */ .radio-option input[value="Gris"][data-option="Couleur"] + .radio-option__label { background-color: #808080 !important; } /* --- 4. STYLE ACTIF : Contour bleu sur la pastille sélectionnée (FIX COULEUR ULTIME) --- */ /* Pastille NOIR (Sélectionné) */ .radio-option input[value="Noir"][data-option="Couleur"]:checked + .radio-option__label { background-color: #000000 !important; /* Force la couleur noire */ box-shadow: 0 0 0 3px var(--brand-accent-color) !important; /* Ajoute le contour bleu */ border-color: #999999 !important; /* Bordure pastille */ } /* Pastille BLANC (Sélectionné) */ .radio-option input[value="Blanc"][data-option="Couleur"]:checked + .radio-option__label { background-color: #ffffff !important; /* Force la couleur blanche */ box-shadow: 0 0 0 3px var(--brand-accent-color) !important; /* Ajoute le contour bleu */ border-color: #cccccc !important; /* Bordure plus visible pour le blanc */ } /* Pastille GRIS (Sélectionné) */ .radio-option input[value="Gris"][data-option="Couleur"]:checked + .radio-option__label { background-color: #808080 !important; /* Force la couleur grise */ box-shadow: 0 0 0 3px var(--brand-accent-color) !important; /* Ajoute le contour bleu */ border-color: #999999 !important; /* Bordure pastille */ } /* Règle générique (sécurité) */ .radio-option input[data-option="Couleur"]:checked + .radio-option__label { color: transparent !important; transform: none !important; opacity: 1 !important; } /* =================================================================== * FIN CORRECTION STYLE VARIANTE COULEUR * =================================================================== */ /* =================================================================== * CODE MOBILE (STYLE ELEGOO) pour galerie produit * =================================================================== */ @media screen and (max-width: 767px) { .product-media__slider-thumbnails-container { display: none !important; } .product-media__slider { width: 100%; overflow: hidden; } .product-media__slider .js-product-gallery-slide { width: 80% !important; transition: transform 0.4s ease, opacity 0.4s ease; opacity: 0.4; transform: scale(0.9); } .product-media__slider .js-product-gallery-slide.swiper-slide-active { opacity: 1; transform: scale(1); } .product-media__slider .swiper-slide img { display: block; width: 100%; height: auto; object-fit: contain; } .product-media__slider .swiper-pagination { position: absolute; bottom: 15px !important; width: 100%; } .product-media__slider .swiper-pagination-bullet { width: 2px; height: 12px; background-color: #cccccc; border-radius: 0; opacity: 1; margin: 0 5px !important; transition: all 0.3s ease; } .product-media__slider .swiper-pagination-bullet-active { width: 4px; height: 16px; background-color: #333333; } .product-media__slider-pagination-{{ section.id }}.is-hidden { display: block !important; } } @media screen and (max-width: 480px) { .product-media__slider .js-product-gallery-slide { width: 85% !important; } } /* =================================================================== * CSS PAGE PRODUIT (HAUTEUR) - NeoVeo Thème Ultra * ⭐️ CORRECTION : RETOUR AUX VALEURS OPTIMISÉES (STABILITÉ RESTAURÉE) ⭐️ * =================================================================== */ /* Cibler le conteneur principal de l'image (PC/Grand écran : 420px -> 370px) */ .product__media-wrapper, .product__media-item, .product-media-container { max-height: 370px !important; /* CORRIGÉ */ height: 370px !important; /* CORRIGÉ */ } /* Images de la galerie principale (PC/Grand écran : 420px -> 370px) */ .product__media-wrapper img, .product__media img { max-height: 370px !important; /* CORRIGÉ */ height: 370px !important; /* CORRIGÉ */ width: auto !important; object-fit: contain !important; margin: 0 auto !important; } /* Pour les slides/carousel (PC/Grand écran : 420px -> 370px) */ .product__media-list { max-height: 370px !important; /* CORRIGÉ */ } /* Bouton zoom/modal (PC/Grand écran : 420px -> 370px) */ .product__modal-opener { max-height: 370px !important; /* CORRIGÉ */ height: 370px !important; /* CORRIGÉ */ } /* Thumbnails (miniatures) - garder petites */ .product__media-toggle { max-height: 80px !important; } /* Section media entière */ .product__media-container, .product__column-sticky { height: auto !important; } /* Responsive - Mobile (HAUTEUR : 320px -> 280px) */ @media screen and (max-width: 749px) { .product__media-wrapper, .product__media-item, .product__media-wrapper img, .product__media img { max-height: 280px !important; /* CORRIGÉ */ height: 280px !important; /* CORRIGÉ */ } } /* Responsive - Tablette (HAUTEUR : 380px -> 350px) */ @media screen and (min-width: 750px) and (max-width: 989px) { .product__media-wrapper, .product__media-item, .product__media-wrapper img, .product__media img { max-height: 350px !important; /* CORRIGÉ */ height: 350px !important; /* CORRIGÉ */ } } /* =================================================================== * AJOUT : CSS PAGE PRODUIT (LARGEUR COLONNES PC) * =================================================================== */ /* Ne s'applique QUE sur ordinateur (min 990px) */ @media screen and (min-width: 990px) { .product__media-wrapper { width: 40% !important; flex-shrink: 0; } .product__info-wrapper { width: 60% !important; padding-left: 3rem; } } /* =================================================================== * NOUVEAU : CSS POUR L'ENCACHEMENT DE LA FICHE PRODUIT * (Cible la section d'information principale) * =================================================================== */ /* Ciblage précis du conteneur parent qui englobe toutes les informations du produit (Titre, Prix, Options, Boutons) */ .product-form, .shopify-product-form { /* Styles de l'encadré */ background-color: #ffffff !important; border: 1px solid #eeeeee !important; border-radius: 16px !important; /* Le padding (marge intérieure) est appliqué ici */ padding: 25px !important; /* Ombre */ box-shadow: 0 8px 15px rgba(0, 0, 0, 0.08) !important; /* CRUCIAL : Assure que le padding n'écrase pas le contenu */ box-sizing: border-box !important; /* Enlève la marge extérieure par défaut du thème (si elle existe) */ margin: 0 !important; } /* --- Si la version mobile a un conteneur parent différent (moins probable) --- */ @media screen and (max-width: 749px) { /* Certains thèmes utilisent un autre conteneur sur mobile, nous allons cibler le parent le plus proche */ .page-width:has(.shopify-product-form) > *:first-child, /* Sélecteur complexe mais efficace */ .product__info-container { padding: 0 15px !important; /* Réduit le padding pour le mobile si besoin, pour garder les marges externes */ } } /* =================================================================== * AJUSTEMENT FINAL : RAPPROCHEMENT MAXIMAL (0px ou Négatif) * =================================================================== */ /* Ciblage de tous les blocs d'information directs dans le formulaire produit */ .product-form > div[style*="--offset-top-desktop"] { /* Marge entre les blocs PC/Mobile mise à zéro */ --offset-top-desktop: 0px !important; --offset-top-mobile: 0px !important; } .product-form > div[style*="--offset-bottom-desktop"] { /* Marge sous les blocs PC/Mobile mise à zéro */ --offset-bottom-desktop: 0px !important; --offset-bottom-mobile: 0px !important; } /* =================================================================== * ⭐️ RAPPROCHEMENT ET AÉRATION DES ÉLÉMENTS (FIX FINAL & RAPPROCHEMENT MAXIMAL) * =================================================================== */ /* 1. RAPPROCHER le bloc d'OPTIONS du PRIX (Marge haute minimale: 1px -> 0px) */ .product-options { margin-top: 0px !important; /* AJUSTÉ : Rapprochement maximal du haut */ margin-bottom: 20px !important; /* Maintient un espace normal avant le bouton Acheter */ /* Ces lignes servent de filet de sécurité au cas où le liquid n'est pas modifié */ --offset-top-desktop: 0px !important; --offset-top-mobile: 0px !important; } /* 2. ESPACEMENT PRIX/OPTIONS */ /* S'assurer que le prix n'a pas de marge/padding en bas (pour ne pas doubler l'espace) */ .price-details, .price.product-price, .price-container { /* Ajout de la classe principale pour la cohérence */ margin-top: 0px !important; margin-bottom: 0px !important; padding-bottom: 0px !important; } /* =================================================================== * NOUVELLES MODIFICATIONS CSS MAJEURES ET ALLÉGÉES (HIÉRARCHIE VISUELLE) * =================================================================== */ /* 1. TITRE : MAINTIEN GRAS POUR L'AUTORITÉ (font-weight: 700) */ .product-title-wrapper .product-title, .product-single__title, .product-details__title { font-weight: 700 !important; /* Maintient le titre très visible */ margin-bottom: 5px !important; /* Assure l'espace entre le titre et les avis */ color: #000000 !important; } .product-title-wrapper { margin-bottom: 5px !important; } /* 2. PRIX ACTUEL : ALLÉGÉ EN SEMI-GRAS (font-weight: 600) */ .price-item.price-item--sale { color: #000000 !important; font-weight: 600 !important; /* Semi-gras : moins "criard" que le 700 */ } /* 3. PRIX BARRÉ : GRIS CLAIR ET NORMAL */ .price__old, .price__old .price-item--regular { color: var(--color-price-compare, #909090) !important; font-weight: 400 !important; /* Poids normal pour aérer */ text-decoration: line-through !important; } /* 4. STYLE DE LA RÉDUCTION (-47%) : LE SEUL ELEMENT EN ROUGE VIF ET GRAS (Urgence) */ .product__info-container .badge.badge--sale, .product__info-container .price__sale-badge, .price__discount { background-color: #DC3545 !important; /* ROUGE VIF */ color: #FFFFFF !important; font-weight: 700 !important; /* Le plus gras pour l'impact */ padding: 3px 8px !important; border-radius: 6px !important; } /* 5. CORRECTION ET EMPHASE DU STOCK BAS (URGENCE) */ .product-inventory-status__text--low { color: #DC3545 !important; /* Utiliser le même ROUGE VIF que la réduction */ background-color: transparent !important; font-weight: 700 !important; /* Gras pour l'alerte */ text-transform: uppercase; animation: flashStock 1.5s infinite alternate; /* Ajout d'une animation légère */ } @keyframes flashStock { from { opacity: 1; } to { opacity: 0.7; } } /* 6. STYLE POUR LES ÉTOILES DE NOTATION (Corrige l'aspect cliquable) */ .product-review-rating-wrapper { display: flex; align-items: center; cursor: pointer !important; /* ✅ Curseur Main */ padding: 5px 0; transition: opacity 0.2s ease; } .product-review-rating-wrapper .stars { color: #f39c12; font-size: 16px; letter-spacing: 2px; margin-right: 8px; } /* ✅ RENDRE LE TEXTE "158 AVIS" ÉVIDENT */ .product-review-rating-wrapper .review-count { color: #333333; /* Plus foncé pour la lisibilité */ font-size: 14px; font-weight: 500 !important; /* Un peu plus gras */ /* LIGNE DE SOULIGNEMENT PERMANENTE */ text-decoration: underline !important; text-underline-offset: 3px; /* Espace propre entre le texte et la ligne */ text-decoration-color: #cccccc; /* Ligne grise discrète */ transition: all 0.2s ease; } /* Au survol (PC) : La ligne et le texte deviennent bleus */ .product-review-rating-wrapper:hover .review-count { color: var(--brand-accent-color, #4D71F9) !important; text-decoration-color: var(--brand-accent-color, #4D71F9) !important; } .product-review-rating-wrapper:hover { opacity: 0.8; } /* =================================================================== * ✅ NOUVEAU : STYLE DU BOUTON AJOUTER AU PANIER (STYLE MATÉRIAUX) * =================================================================== */ /* Cible le bouton d'ajout au panier (par défaut du thème Ultra ou le nouveau) */ .product-add-to-cart__button, .product-form__submit { /* Propriétés tirées de .material-action-btn (Bleu Bannière arrondi) */ padding: 14px 20px !important; background-color: var(--brand-accent-color) !important; /* Utilise le Bleu Bannière */ color: #ffffff !important; border: none !important; border-radius: 50px !important; /* Très arrondi */ font-size: 15px !important; font-weight: 600 !important; text-align: center !important; text-decoration: none !important; cursor: pointer !important; transition: background-color 0.3s ease, box-shadow 0.3s ease !important; margin-top: 0 !important; /* Géré par le conteneur */ } /* Style au survol (hover) */ .product-add-to-cart__button:hover, .product-form__submit:hover { background-color: var(--brand-accent-color-hover) !important; /* Version foncée */ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important; } /* =================================================================== * ⭐️ NOUVEAU FIX : BOUTONS D'ACTION (Nouvelle structure Liquid: .custom-action-flexbox) * =================================================================== */ /* 1. Conteneur principal (Flexbox) */ .custom-action-flexbox { display: flex !important; flex-wrap: nowrap !important; gap: 10px; align-items: center; justify-content: space-between; margin: 0 !important; padding: 0 !important; } /* 2. Bouton Ajouter au panier (Moitié gauche) */ .custom-action-flexbox .product-add-to-cart__button.add-to-cart { flex: 1 1 48% !important; min-width: 0; margin: 0 !important; height: 50px !important; } /* 3. Conteneur des boutons dynamiques (Moitié droite) */ .custom-action-flexbox .custom-express-checkout { flex: 1 1 48% !important; min-width: 0; margin: 0 !important; padding: 0 !important; /* Force l'empilement vertical à l'intérieur de ce conteneur de 48% */ display: flex !important; flex-direction: column !important; gap: 5px; } /* 4. Hauteur des boutons de paiement express (assure l'alignement) */ .custom-express-checkout .shopify-payment-button, .custom-express-checkout .shopify-payment-button shopify-paypal-button, .custom-express-checkout .shopify-payment-button shopify-accelerated-checkout { width: 100% !important; height: 48px !important; } .custom-express-checkout .shopify-payment-button .paypal-buttons > iframe, .custom-express-checkout .shopify-payment-button .shopify-accelerated-checkout button, .custom-express-checkout .shopify-payment-button .accelerated-checkout-button { height: 48px !important; min-height: 48px !important; } /* --- MOBILE FIX : Les boutons reviennent en colonne pleine largeur --- */ @media screen and (max-width: 767px) { .custom-action-flexbox { flex-direction: column !important; /* Empilement vertical */ gap: 10px; } .custom-action-flexbox .product-add-to-cart__button.add-to-cart, .custom-action-flexbox .custom-express-checkout { flex: none !important; /* Désactive le flex-grow/shrink */ width: 100% !important; /* Pleine largeur */ } /* Retrouver le style block pour l'empilement naturel sur mobile (pour le bouton paypal) */ .custom-action-flexbox .custom-express-checkout { display: block !important; } } /* ------------------------------------------------------------------- */ /* 🚨 CRUCIAL : Masquer l'ancienne section de boutons du thème */ /* ------------------------------------------------------------------- */ .product-form__buttons { display: none !important; visibility: hidden !important; height: 0 !important; margin: 0 !important; padding: 0 !important; } /* =================================================================== * ADJUSTEMENTS CSS POUR LE TRUSTSCORE/BARRE DE CONFIANCE (STYLE FINAL) * =================================================================== */ .trustscore-container-custom { display: flex; align-items: center; justify-content: center; /* Centrage horizontal */ font-family: Arial, sans-serif; font-size: 14px; color: #333333; /* MODIFICATION CLÉ POUR L'ESPACEMENT AVEC LE BOUTON ACHETER */ /* Augmentation de l'espace (passé de 15px à 25px) */ margin-top: 25px !important; padding-top: 0px; padding-bottom: 5px; white-space: nowrap; } /* Conteneur des étoiles (pour l'alignement) */ .stars-image-wrapper-custom { display: flex; align-items: center; margin-right: 5px; flex-shrink: 0; } /* Image des étoiles : correction des dimensions pour non-déformation */ .trustpilot-stars-img-custom { height: 16px; width: auto; max-width: 90px; vertical-align: middle; } /* Conteneur du texte */ .trustscore-text-custom { display: flex; align-items: center; white-space: nowrap; line-height: 1.2; } /* Texte Trustscore et Trustpilot en NOIR */ .trustscore-label-custom, .trustscore-value-custom, .trustpilot-name-custom { color: #000000; } /* Texte Trustscore (Poids normal) */ .trustscore-label-custom { font-weight: normal; margin-right: 2px; } /* Note 4.8/5 (Poids gras) */ .trustscore-value-custom { font-weight: bold; margin-right: 5px; } /* Nom Trustpilot */ .trustpilot-name-custom { font-weight: normal; margin-left: 5px; margin-right: 3px; } /* L'étoile verte Trustpilot (Symbole Unicode stylisé) */ .trustpilot-logo-star { font-size: 18px; color: #4CAF50; /* Couleur verte de Trustpilot (conservée) */ line-height: 1; display: inline-block; transform: translateY(1px); } /* Adaptation mobile */ @media screen and (max-width: 749px) { .trustscore-container-custom { /* Augmentation de l'espace (passé de 10px à 18px) pour le mobile */ margin-top: 18px !important; font-size: 13px; } .trustpilot-stars-img-custom { height: 15px; } .trustpilot-logo-star { font-size: 16px; } } /* =================================================================== * NETTOYAGE D'ÉLÉMENTS INUTILES (ROBUSTE PAR CLASSE) * =================================================================== */ /* 1. Masquer les règles de quantité verbeuses ("Incrementos de 1", etc.) */ .product__quantity-rules { display: none !important; } /* 2. Masquer le message de stock haut/moyen ("In stock, ready to ship") */ .js-product-high-stock-msg { display: none !important; } /* 3. Masquer le titre du produit dans le fil d'Ariane (breadcrumb) pour éviter la répétition */ .breadcrumb-item:last-child { display: none !important; } /* ------------------------------------------------------------------- */ /* ⭐️ SUPPRESSION DE L'ANCIEN CÔTE À CÔTE PRIX/ENCOCHE CADDIE */ /* ------------------------------------------------------------------- */ .price-and-timeline-wrapper, .delivery-timeline-segment { /* Maintien des règles pour éviter les conflits si le Liquid n'est pas modifié */ display: block !important; visibility: hidden !important; height: 0 !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; } .timeline-step.custom-buy-step { /* Masque l'ancienne structure de l'encoche Caddie */ display: none !important; } /* =================================================================== * ⭐️ NOUVEAU : CHRONOLOGIE COMPACTE (ACHAT -> EXPÉDITION -> LIVRAISON) * (Ceci doit être placé entre le Prix et les Options) * ⭐️ CHEVAUCHEMENT MAXIMAL APPLIQUÉ ⭐️ * ⭐️ AJUSTEMENT 2: RAPPROCHEMENT DU BAS DE CE BLOC ⭐️ * =================================================================== */ /* =================================================================== * ⭐️ NOUVEAU : CHRONOLOGIE COMPACTE (ACHAT -> EXPÉDITION -> LIVRAISON) * (Ceci doit être placé entre le Prix et les Options) * =================================================================== */ /* Conteneur principal: Force l'alignement horizontal, centré */ .timeline-compact-wrapper { display: flex !important; justify-content: space-between !important; align-items: center !important; width: 100% !important; /* Style de la boîte (fond, bordures) */ background-color: #ffffff !important; border: 1px solid #eeeeee !important; border-radius: 12px !important; padding: 12px !important; /* --- CORRECTION ESSENTIELLE POUR LE PC/DÉGAGEMENT --- */ margin-top: 15px !important; /* Marge positive pour dégager le prix */ margin-bottom: 15px !important; /* Espace avant l'élément suivant */ clear: both !important; /* RÈGLE CRUCIALE : Force le bloc à commencer sous le prix */ /* --------------------------------------------------- */ flex-wrap: nowrap !important; overflow-x: auto !important; position: relative; z-index: 2; } /* Ajoutez une media query pour le PC afin de forcer la largeur et le dégagement si le prix est flottant */ @media screen and (min-width: 769px) { .timeline-compact-wrapper { width: 100% !important; clear: both !important; } } /* Style de chaque ÉTAPE (les 3 blocs icône/texte) */ .timeline-compact-wrapper .step-compact { display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; flex-basis: 30% !important; flex-grow: 1 !important; flex-shrink: 1 !important; padding: 0 4px !important; border: none !important; background-color: transparent !important; box-shadow: none !important; } /* 1. Icônes des étapes (Le bloc carré coloré) */ .timeline-compact-wrapper .icon-logo.custom-icon-bg { display: flex !important; justify-content: center !important; align-items: center !important; width: 38px !important; height: 38px !important; border-radius: 8px !important; margin-bottom: 5px !important; flex-shrink: 0; /* ✅ FOND BLEU POUR TOUS */ background-color: var(--brand-accent-color) !important; } .timeline-compact-wrapper .icon-logo.custom-icon-bg svg { width: 20px !important; height: 20px !important; stroke: #FFFFFF !important; stroke-width: 2 !important; /* ✅ EFFET NÉON BLEU */ filter: drop-shadow(0 0 5px rgba(77, 113, 249, 0.7)) drop-shadow(0 0 10px rgba(77, 113, 249, 0.5)); } /* Couleurs spécifiques des icônes (Tous en bleu) */ .timeline-compact-wrapper .custom-buy-step .custom-icon-bg { background-color: var(--brand-accent-color) !important; } .timeline-compact-wrapper .step-shipped-icon .custom-icon-bg { background-color: var(--brand-accent-color) !important; } .timeline-compact-wrapper .step-delivery-icon .custom-icon-bg { background-color: var(--brand-accent-color) !important; } /* 2. Texte de l'étape (Titre) */ .timeline-compact-wrapper .details .title { font-size: 0.75em !important; font-weight: 600 !important; color: #333333 !important; line-height: 1.1 !important; } .timeline-compact-wrapper .details .title .accent-text { color: var(--brand-accent-color) !important; font-weight: 700 !important; display: block !important; } /* 3. Texte de l'étape (Date/Info) */ .timeline-compact-wrapper .details .date { font-size: 0.6em !important; color: #888888 !important; font-weight: 500 !important; line-height: 1.1 !important; } /* 4. FLÈCHES SÉPARATRICES */ .timeline-compact-wrapper .timeline-separator { display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0; width: 15px !important; padding: 0 !important; margin: 0 2px !important; } .timeline-compact-wrapper .timeline-separator svg { width: 14px; height: 14px; stroke: #aaaaaa; stroke-width: 2; } /* Règle mobile de sécurité (Si la flèche est trop compressée) */ @media screen and (max-width: 400px) { .timeline-compact-wrapper { padding: 10px 8px !important; } .timeline-compact-wrapper .timeline-separator { width: 10px !important; } } /* Style pour le jour complet de la livraison (Ex: Ce Mardi) - Doit être en bleu d'accent et en gras */ .timeline-compact-wrapper .details .title .accent-text-delivery { color: var(--brand-accent-color) !important; font-weight: 700 !important; display: block; } /* Assurer que la date de livraison redevienne grise par défaut (comme les autres dates) */ .timeline-compact-wrapper .details .date { font-size: 0.6em !important; color: #888888 !important; font-weight: 500 !important; line-height: 1.1 !important; } /* =================================================================== * FIN CHRONOLOGIE COMPACTE * =================================================================== */ /* ------------------------------------------------------------------- */ /* ⭐️ NOUVEAU : SÉPARATEURS VISUELS (BARRES GRISES) AJOUTÉS À LA DEMANDE DE L'UTILISATEUR */ /* ------------------------------------------------------------------- */ /* 1. Titre et Avis : Suppression de la bordure inférieure pour grouper avec le prix */ .product-title-wrapper { /* Suppression de la bordure du titre */ border-bottom: none !important; padding-bottom: 0 !important; /* Maintient l'espace entre le titre et le prix */ margin-bottom: 10px !important; } /* 2. Prix : Maintien de la bordure pour séparer le groupe (Titre + Prix) du reste */ .price-container { /* Retrait de l'espace pour permettre le chevauchement maximal */ border-bottom: 1px solid #e0e0e0 !important; padding-bottom: 16px !important; margin-bottom: 0px !important; position: relative; z-index: 1; } /* 3. Applique une bordure sous le bloc d'icônes de livraison personnalisé */ .product-custom-liquid { border-bottom: 1px solid #e0e0e0 !important; padding-bottom: 24px !important; margin-bottom: 10px !important; /* AJUSTÉ : Réduit l'espace entre cette barre et les options */ } /* 4. Applique une bordure sous les options de variante (taille/couleur) */ .product-options { border-bottom: 1px solid #e0e0e0 !important; padding-bottom: 16px !important; margin-bottom: 16px !important; } /* 5. Applique une bordure sous le sélecteur de quantité */ .product-quantity { border-bottom: 1px solid #e0e0e0 !important; padding-bottom: 16px !important; margin-bottom: 16px !important; } /* =================================================================== * NOUVEAU : STYLE ACCORDÉON (DÉROULANT DESCRIPTION) - STYLE ELEGOO * Ce code gère la partie "Détails / Caractéristiques" déroulante * =================================================================== */ /* Conteneur global de l'accordéon */ .product-accordion { width: 100%; border-top: 1px solid #e5e5e5; /* Ligne grise du haut */ margin-top: 20px; } /* Chaque item (ligne) de l'accordéon */ .accordion-item { border-bottom: 1px solid #e5e5e5; /* Ligne grise de séparation */ } /* Le bouton cliquable (Titre de section) */ .accordion-header { background-color: transparent; color: #333; /* Couleur du texte sombre */ cursor: pointer; padding: 18px 0; /* Espacement vertical confortable */ width: 100%; border: none; text-align: left; outline: none; font-size: 16px; font-weight: 600; /* Texte en gras (style Elegoo) */ display: flex; justify-content: space-between; align-items: center; transition: background-color 0.2s ease; } /* La zone de contenu (cachée par défaut) */ .accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; background-color: transparent; } /* Padding interne du contenu pour ne pas coller aux bords */ .content-inner { padding: 0 0 20px 0; font-size: 15px; color: #555; /* Texte gris foncé pour la description */ line-height: 1.6; } /* Gestion de l'icône (flèche) à droite */ .accordion-icon { margin-left: 10px; transition: transform 0.3s ease; display: flex; align-items: center; } /* Rotation de la flèche quand la section est ouverte (active) */ .accordion-header.active .accordion-icon { transform: rotate(180deg); } /* =================================================================== * 🧨 PATCH NUCLÉAIRE : SUPPRESSION DU LIEN "PLUS DE MOYENS DE PAIEMENT" * =================================================================== */ /* Cible la balise spécifique de Shopify */ more-payment-options-link { display: none !important; visibility: hidden !important; height: 0 !important; width: 0 !important; opacity: 0 !important; pointer-events: none !important; margin: 0 !important; padding: 0 !important; } /* Cible le lien à l'intérieur (sécurité double) */ .shopify-payment-button__more-options { display: none !important; } /* Cible l'ID spécifique (sécurité triple) */ #more-payment-options-link { display: none !important; } /* =================================================================== * 🎨 DESIGN ACCORDÉON "CARTES FLOTTANTES" (POUR FOND #F5F5F5) * =================================================================== */ /* 1. CONTENEUR PRINCIPAL */ .product-accordion { width: 100%; margin-top: 25px; border-top: none; /* On enlève la ligne du haut */ background-color: transparent; /* Fond transparent pour laisser voir le #F5F5F5 */ display: flex; flex-direction: column; gap: 12px; /* Espace entre les cartes */ } /* 2. CHAQUE CARTE (BLOC BLANC) */ .accordion-item { background-color: #ffffff; /* Carte blanche */ border-radius: 12px; /* Coins arrondis */ border: 1px solid #e0e0e0; /* Légère bordure */ overflow: hidden; /* Pour que le contenu ne dépasse pas des arrondis */ box-shadow: 0 2px 5px rgba(0,0,0,0.02); /* Ombre très subtile */ } /* 3. EN-TÊTE (BOUTONS) */ .accordion-header { width: 100%; padding: 18px 20px; /* ✅ ÉCART SUR LES BORDS AJOUTÉ */ background: transparent; border: none; outline: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; text-align: left; transition: background-color 0.2s ease; } /* Titre de l'onglet */ .accordion-header span:first-child { font-family: 'AtypText', sans-serif !important; font-size: 15px; font-weight: 700; color: #000000; /* ✅ TITRE EN NOIR */ text-transform: uppercase; letter-spacing: 0.5px; } /* Icône (Flèche) */ .accordion-icon { color: #000; /* Flèche noire */ transition: transform 0.3s ease; display: flex; align-items: center; } .accordion-header.active .accordion-icon { transform: rotate(180deg); color: var(--brand-accent-color, #4D71F9); } /* 4. CONTENU (TEXTE) */ .accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.4s ease-out; background-color: #ffffff; } .content-inner { padding: 0 20px 25px 20px; /* ✅ ÉCART GAUCHE/DROITE AJOUTÉ */ font-size: 15px; line-height: 1.6; color: #000000; /* ✅ TEXTE EN NOIR */ } /* --- ÉLÉMENTS INTERNES --- */ /* Alerte Stock */ .neoveo-alert-stock { background: #f0f7ff; border-left: 4px solid var(--brand-accent-color, #4D71F9); padding: 15px; margin-bottom: 20px; border-radius: 4px; color: #000; /* Noir */ } /* ✅ CORRECTION LISTE À PUCES (ALIGNEMENT) */ .rte ul { padding-left: 0; list-style: none; margin-bottom: 15px; } .rte li { margin-bottom: 12px; padding-left: 25px; /* Espace pour le point */ position: relative; color: #000000; /* Noir */ line-height: 1.5; } .rte li::before { content: "•"; color: #000000; /* Point bleu */ font-weight: bold; font-size: 20px; /* Point plus gros */ position: absolute; left: 0; top: -4px; /* ✅ REMONTE LE POINT POUR L'ALIGNER AVEC LE TEXTE */ line-height: 1; } /* Tableau Technique */ .neoveo-specs-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; border: 1px solid #eee; border-radius: 8px; overflow: hidden; color: #000; } .neoveo-specs-table td { padding: 12px 15px; /* Espace dans le tableau */ border-bottom: 1px solid #eee; } .neoveo-specs-table tr:nth-child(even) { background-color: #f9f9f9; } .spec-label { font-weight: 700; width: 45%; } /* Conseil Expert */ .expert-box { background-color: #fffbe6; border: 1px solid #ffe58f; padding: 15px; border-radius: 6px; margin-top: 15px; font-size: 13px; color: #000; /* Noir */ } /* =================================================================== * 🪟 STYLE COMPLET : POLITIQUES (POP-UP) + PARTAGE SOCIAL * =================================================================== */ /* --- 1. LIENS POLITIQUES (CENTRÉS) --- */ .policy-links-container { margin-top: 20px; margin-bottom: 20px; padding-top: 15px; border-top: 1px solid #eee; font-size: 13px; color: #666; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; /* ✅ CENTRÉ */ gap: 8px; } .policy-link-item { cursor: pointer; text-decoration: underline; text-underline-offset: 3px; color: #444; font-weight: 600; transition: color 0.2s; } .policy-link-item:hover { color: var(--brand-accent-color, #4D71F9); } .policy-divider { color: #ccc; font-size: 10px; } /* --- 2. SECTION PARTAGER (NOUVEAU) --- */ .product-share-container { margin-top: 5px; margin-bottom: 25px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; } .share-label { font-size: 11px; color: #999; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; } .share-icons-wrapper { display: flex; gap: 12px; align-items: center; justify-content: center; } /* Style des ronds */ .share-icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background-color: #f5f5f5; /* Gris clair */ color: #333; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Effet rebond */ text-decoration: none; } .share-icon svg { display: block; } /* Couleurs au survol */ .share-icon:hover { transform: translateY(-3px); color: #fff; box-shadow: 0 5px 10px rgba(0,0,0,0.1); } .share-icon.facebook:hover { background-color: #1877F2; } .share-icon.x-twitter:hover { background-color: #000000; } .share-icon.pinterest:hover { background-color: #E60023; } /* --- 3. FOND SOMBRE (OVERLAY) --- */ .neo-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px); z-index: 99999; display: none; opacity: 0; transition: opacity 0.3s ease; } .neo-modal-overlay.active { display: block; opacity: 1; } /* --- 4. LA FENÊTRE MODALE --- */ .neo-modal-box { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -48%) scale(0.96); width: 90%; max-width: 600px; max-height: 85vh; background: #ffffff; border-radius: 12px; box-shadow: 0 20px 50px rgba(0,0,0,0.3); z-index: 100000; display: none; flex-direction: column; opacity: 0; transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); } .neo-modal-box.active { display: flex; opacity: 1; transform: translate(-50%, -50%) scale(1); } /* --- 5. EN-TÊTE AVEC ONGLETS --- */ .neo-tabs-header { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #eee; background: #fafafa; border-radius: 12px 12px 0 0; padding: 0 10px; } .neo-tabs-container { display: flex; gap: 20px; } .neo-tab-btn { background: none; border: none; padding: 18px 5px; font-family: 'AtypText', sans-serif; font-size: 14px; font-weight: 600; color: #888; cursor: pointer; position: relative; transition: color 0.3s ease; } /* Ligne bleue sous l'onglet actif */ .neo-tab-btn::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background-color: var(--brand-accent-color, #4D71F9); transform: scaleX(0); transition: transform 0.3s ease; } .neo-tab-btn.active { color: #000; } .neo-tab-btn.active::after { transform: scaleX(1); } .neo-close-btn { background: none; border: none; font-size: 28px; line-height: 1; color: #aaa; cursor: pointer; padding: 0 15px; } .neo-close-btn:hover { color: #000; } /* --- 6. CONTENU TEXTE (DESIGN PREMIUM) --- */ .neo-modal-body { padding: 25px; overflow-y: auto; font-size: 14px; line-height: 1.6; color: #333; } .tab-content { display: none; animation: fadeIn 0.4s ease; } .tab-content.active { display: block; } @keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } } /* Titres Soulignés */ .neo-modal-body h4 { margin-top: 25px; margin-bottom: 10px; font-family: 'AtypText', sans-serif; font-size: 13px; font-weight: 700; color: #000; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid #ddd; padding-bottom: 5px; display: block; } .neo-modal-body h4:first-child { margin-top: 0; } .neo-modal-body p { margin-bottom: 12px; } .neo-modal-body ul, .neo-modal-body ol { padding-left: 20px; margin-bottom: 15px; } .neo-modal-body li { margin-bottom: 5px; } .neo-modal-body strong { color: #000; } /* Encadré Bleu Black Friday */ .neo-highlight-box { background: #f0f9ff; padding: 15px; border-radius: 6px; border-left: 4px solid #4D71F9; margin: 20px 0; color: #333; font-size: 14px; line-height: 1.5; } .highlight-title { color: #4D71F9; font-weight: 800; text-transform: uppercase; font-size: 12px; margin-bottom: 5px; display: block; } /* --- 7. MOBILE --- */ @media screen and (max-width: 768px) { .neo-modal-box { width: 90%; height: auto; max-height: 80vh; border-radius: 12px; top: 50%; left: 50%; transform: translate(-50%, -45%) scale(0.95); } .neo-modal-box.active { transform: translate(-50%, -50%) scale(1); } } /* =================================================================== * ===== FIN DU CODE CSS COMPLÉTÉ ET FINALISÉ (STABILITÉ RESTAURÉE + ACCORDÉON) ===== * =================================================================== */ /* =================================================================== * NeoVeo overrides — drawer mobile slide depuis la DROITE (UX standard 2025) * Force le burger menu mobile à s'ouvrir depuis la droite * =================================================================== */ #headerDrawerMenu.drawer.header-mobile, .drawer.header-mobile { left: auto !important; right: 0 !important; inset-inline-start: auto !important; inset-inline-end: 0 !important; transform: translateX(100%) !important; } #headerDrawerMenu.drawer.header-mobile.is-active, .drawer.header-mobile.is-active { transform: translateX(0) !important; } /* Sous-menus mobiles : slide-in depuis la droite (au sein du drawer parent) */ .header-mobile__menu-list-wrapper--nested { position: fixed !important; top: 0 !important; bottom: 0 !important; right: 0 !important; left: auto !important; inset-inline-end: 0 !important; inset-inline-start: auto !important; width: 100% !important; max-width: 100vw !important; height: 100vh !important; background: var(--header-mobile-menu-bg, #ffffff) !important; transform: translateX(100%) !important; transition: transform 0.3s ease !important; z-index: 9999 !important; overflow-y: auto !important; } .header-mobile__menu-list-wrapper--nested:not(.is-hidden) { transform: translateX(0) !important; } /* Le bouton "back" en haut du sous-menu (flèche gauche) */ .header-mobile__menu-item--back { border-bottom: 1px solid #e5e7eb !important; font-weight: 600 !important; }/* cache bust 1779916954 */