/* ========================================================== SITE WIDTH - 1440 PX ========================================================== */ @media (min-width: 1400px) { /* * Contenu principal. */ .columns-container.container { max-width: 1440px !important; } /* * Breadcrumb. * Le
    est contenu directement * dans ce .container. */ .breadcrumb { padding-left: 6px; } .container:has(> .breadcrumb) { max-width: 1440px !important; } /* * Header principal. */ .marius-header-main > .container-md { width: 100%; max-width: 1440px !important; margin-left: auto; margin-right: auto; } /* * Navigation principale. */ .marius-main-nav > .container-md { width: 100%; max-width: 1440px !important; margin-left: auto; margin-right: auto; } /* * Bandeau supérieur. */ .zzz-header-top { max-width: 1440px !important; } /* * Méga-menu. */ .ps-mainmenu__desktop .submenu > .container { width: 100% !important; max-width: 1440px !important; margin-left: auto !important; margin-right: auto !important; } } /* ========================================================== MAIN MENU - REMOVE ITEM GAP ========================================================== */ .ps-mainmenu__tree { gap: 0; } /* ========================================================== BREADCRUMB - ALIGNEMENT + HOME + SEPARATEURS ========================================================== */ .breadcrumb { display: flex; align-items: center; } /* Tous les éléments sur le même axe */ .breadcrumb-item { display: inline-flex; align-items: center; line-height: 1.4; } /* Liens */ .breadcrumb-link { display: inline-flex; align-items: center; } /* Maison */ .marius-breadcrumb-home { display: inline-flex; align-items: center; justify-content: center; } .marius-breadcrumb-home__icon { display: block; font-size: 18px; line-height: 1; } /* Séparateur */ body .breadcrumb-item + .breadcrumb-item::before { content: ">" !important; display: inline-flex; align-items: center; float: none !important; padding: 0 5px 0 0; line-height: 1.4; } /* ========================================================== BLOQUE LE DÉPLACEMENT HORIZONTAL DE LA PAGE ========================================================== */ html, body { width: 100%; max-width: 100%; overflow-x: clip; overscroll-behavior-x: none; } /* ========================================================== MARIUS - FICHE PRODUIT ========================================================== */ @media (min-width: 1200px) { .page-product .product__container { gap: 2rem; grid-template-columns: 45% minmax(0, 1fr); } } /* ========================================================== TYPOGRAPHIE ========================================================== */ /* H1 - Nom du produit */ .page-product .product__name { font-family: "Montserrat Condensed", sans-serif; font-size: 32.5px; font-weight: 700; line-height: 37.6px; } /* Titres modules */ .page-product .module-products__title { font-family: "Montserrat", sans-serif; font-size: 16px; font-weight: 700; line-height: 20px; } /* ========================================================= FABRICANT - LOGO FLOTTANT ========================================================= */ .page-product .product__manufacturer { float: left; margin: 0 20px 10px 0; } .page-product .product__manufacturer a { display: block; } .page-product .product__manufacturer-logo { display: block; width: auto; height: auto; max-width: 160px; max-height: 150px; object-fit: contain; } /* ========================================================= VARIANTES PRODUIT - RADIOS EN BOUTONS TEXTE ========================================================= */ .page-product .product-variant__radios { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; } .page-product .product-variant__radio.form-check { position: relative; margin: 0; padding: 0; } /* On garde le vrai radio mais on le cache visuellement */ .page-product .product-variant__radio .form-check-input { position: absolute; opacity: 0; pointer-events: none; } /* Bouton visible */ .page-product .product-variant__radio label { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 7px 14px; font-family: "Montserrat", sans-serif; font-size: 14px; font-weight: 500; line-height: 18px; color: #555; background: #f7f7f7; border: 1px solid #d9d9d9; border-radius: 5px; cursor: pointer; transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease; } /* Texte */ .page-product .product-variant__radio .form-check-label { color: inherit; font: inherit; } /* Sélectionné */ .page-product .product-variant__radio .form-check-input:checked + label { color: #28708f; background: #eef8fc; border-color: #28708f; box-shadow: inset 0 0 0 1px #28708f; } /* Hover */ @media (hover: hover) and (pointer: fine) { .page-product .product-variant__radio label:hover { color: #222; background: #fff; border-color: #aaa; } .page-product .product-variant__radio .form-check-input:checked + label:hover { color: #28708f; background: #eef8fc; border-color: #28708f; } } /* Focus clavier */ .page-product .product-variant__radio .form-check-input:focus-visible + label { outline: 2px solid #28708f; outline-offset: 2px; } .page-product .product__description-short { margin-bottom: 1rem !important; } /* Réduit l'espace sous les variantes */ .page-product .product__variants { margin-bottom: 1rem !important; } .page-product .product-variant { margin-bottom: 0 !important; } .page-product .product-variant__attributes { margin-bottom: 0 !important; } .page-product .product__actions { background: #fff0; border-style: dashed; border: 1px solid #ebebeb; border-radius: 5px; padding: 10px; margin-bottom: 1rem !important; } /* ========================================================= PRIX + DISPONIBILITÉ ========================================================= */ .page-product .marius-product-price-stock { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin: 0 0 1rem 0 !important; padding: 0; border-top: none; } /* ========================================================= Réduit uniquement l'espace avant "Donnez votre avis" ========================================================= */ .page-product .product__add-to-cart-container { margin-block-end: 0.5rem !important; } /* Mobile */ @media (max-width: 767px) { .page-product .product__add-to-cart-container { margin-block-end: 0.5rem !important; } } /* ========================================================== PRODUCT PRICE - SEPARATOR WITH VARIANTS OR PACK CONTENT ========================================================== */ .page-product .product__add-to-cart-container.marius-has-variants .marius-product-price-stock, .page-product .product__add-to-cart-container.marius-has-pack-content .marius-product-price-stock { border-top: none !important; } .page-product .product__actions.marius-actions-when-is-real-product, .page-product .product__actions.marius-actions-when-is-real-pack { padding-top: 10px; } .page-product .product__actions.marius-actions-when-is-fake-pack { padding-top: 0.5rem; } /* ========================================================= PRIX PERSONNALISÉ ========================================================= */ .page-product .marius-product-price { flex: 0 0 auto; min-width: max-content; margin: 0.5rem 0; padding: 0; font-family: "Montserrat", sans-serif; } .page-product .marius-product-price__current { display: flex; flex-wrap: nowrap; align-items: baseline; gap: 5px; white-space: nowrap; } .page-product .marius-product-price__main { font-size: 28px; line-height: 32px; font-weight: 600; color: #c51f2d; white-space: nowrap; } .page-product .marius-product-price__ttc { font-size: 18px; line-height: 22px; font-weight: 600; font-style: italic; color: #c51f2d; white-space: nowrap; } .page-product .marius-product-price__ht { position: relative; top: -3px; font-size: 12px; line-height: 14px; font-weight: 600; font-style: italic; color: #555; white-space: nowrap; } .page-product .marius-product-price__old-line { margin-top: 2px; font-size: 15px; line-height: 20px; color: #666; } .page-product .marius-product-price__old { margin-left: 4px; color: #666; text-decoration: line-through; text-decoration-thickness: 1px; } /* ========================================================= BADGE PRODUIT "NEUF" - MASQUER SUR TOUTES LES PAGES ========================================================= */ .product-flags li.badge.new { display: none !important; } /* ========================================================= DISPONIBILITÉ PRODUIT - BADGE COMPACT ========================================================= */ .page-product .marius-product-price-stock .product__availability { display: block !important; width: 100% !important; margin: 0; } .page-product .product__availability-status { display: inline-flex !important; align-items: flex-start; width: fit-content !important; max-width: 100% !important; min-height: 26px; padding: 4px 9px; gap: 5px; font-family: "Montserrat", sans-serif; font-size: 13px; font-weight: 500; line-height: 16px; border: 1px solid transparent; border-radius: 5px; } /* Icône */ .page-product .product__availability-icon { flex: 0 0 auto; margin: 0; width: auto; height: auto; font-size: 15px; line-height: 16px; } /* Messages */ .page-product .product__availability-messages { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: auto !important; } .page-product .product__availability-messages > span:not(.visually-hidden) { line-height: 16px; } .page-product .product__availability-messages small { display: block !important; margin: 0; font-size: 12px; font-weight: 400; line-height: 16px; } /* En stock */ .page-product .product__availability-status.text-success { color: #286443 !important; background: #e8f3ed !important; border-color: #d2e6da !important; } /* Stock faible */ .page-product .product__availability-status.text-warning {/*ffffffffffffff*/ color: #765b18 !important; background: #fff6da !important; border-color: #eadcae !important; } /* Rupture */ .page-product .product__availability-status.text-danger { color: #8e252b !important; background: #fbeaec !important; border-color: #f1d0d4 !important; } /* ========================================================= LIGNE D'ACHAT ========================================================= */ .page-product .marius-product-buy-row { display: flex; align-items: stretch; gap: 16px; width: 100%; } .page-product .marius-product-buy-row .product__add-to-cart { flex: 1 1 auto; } .page-product .marius-product-buy-row .product__add-to-cart-button { width: 100%; } /* ========================================================= PRIX NATIF HUMMINGBIRD Conservé pour les emplacements qui utilisent encore le rendu natif de PrestaShop. ========================================================= */ .page-product .product__prices { margin-top: 10px; font-family: "Montserrat", sans-serif; } /* Ligne du prix principal */ .page-product .product__prices .product__prices-inline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px; } /* Prix TTC */ .page-product .product__prices .product__price { font-size: 28px; line-height: 32px; font-weight: 500; color: #c51f2d; white-space: nowrap; } /* TTC */ .page-product .product__prices .product__tax-label { font-size: 18px; line-height: 22px; font-weight: 700; font-style: italic; color: #c51f2d; white-space: nowrap; } /* Prix HT */ .page-product .product__prices .product__taxless-price { position: relative; top: -3px; margin-left: 4px; font-size: 12px; line-height: 14px; font-weight: 600; font-style: italic; color: #555; white-space: nowrap; } /* Prix barré si réduction */ .page-product .product__prices .product__regular-price { font-size: 15px; line-height: 20px; color: #666; text-decoration: line-through; text-decoration-thickness: 1px; } /* Prix "au lieu de" pour les packs */ .page-product .product__prices .product__pack-price { display: block; margin-top: 3px; font-size: 15px; line-height: 20px; color: #666; } /* Pour éviter que le bloc taxe tombe trop bas */ .page-product .product__prices .product__tax-infos { display: inline-flex; align-items: baseline; margin-top: 0; } /* ========================================================= PRIX PACK - ANCIEN RENDU Conservé tant qu'un template peut encore utiliser ces classes. ========================================================= */ .page-product .marius-pack-price { margin-top: 14px; padding-top: 12px; border-top: 1px solid #e5e5e5; font-family: "Montserrat", sans-serif; } .page-product .marius-pack-price__current { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px; white-space: nowrap; } .page-product .marius-pack-price__main { font-size: 28px; line-height: 32px; font-weight: 500; color: #c51f2d; white-space: nowrap; } .page-product .marius-pack-price__ttc { font-size: 18px; line-height: 22px; font-weight: 700; font-style: italic; color: #c51f2d; white-space: nowrap; } .page-product .marius-pack-price__ht { position: relative; top: -3px; font-size: 12px; line-height: 14px; font-weight: 600; font-style: italic; color: #555; white-space: nowrap; } .page-product .marius-pack-price__old-line { margin-top: 2px; font-size: 15px; line-height: 20px; color: #666; } .page-product .marius-pack-price__old { margin-left: 4px; color: #666; text-decoration: line-through; text-decoration-thickness: 1px; } /* ========================================================== QUANTITÉ ========================================================== */ .page-product .product-actions__quantity, .page-product .quantity-button__group, .page-product .quantity-button__group .form-control { font-family: "Montserrat", sans-serif; } .page-product .quantity-button__group .btn, .page-product .quantity-button__group .form-control { height: 38px; } .page-product .quantity-button__group .btn { width: 38px; padding: 0; } .page-product .quantity-button__group .form-control { font-size: 16px; font-weight: 400; text-align: center; } /* Mobile */ @media (max-width: 767px) { .page-product .quantity-button__group .form-control { font-size: 14px; } } /* ========================================================== AJOUTER AU PANIER ========================================================== */ .page-product .product__add-to-cart-button { min-height: 38px; font-family: "Montserrat", sans-serif; font-size: 16px; font-weight: 400; border-radius: 5px; text-transform: uppercase; } /* ========================================================= PRODUIT - DÉLAI DE LIVRAISON ========================================================= */ .page-product #estimateddelivery { margin-block-end: 1rem !important; } .page-product #estimateddelivery > div { border-radius: 5px; } /* ========================================================== MARIUS - DÉLAI DE LIVRAISON / CLICK AND COLLECT PrestaShop 9.2 - Design 2026 ========================================================== */ /* Texte de livraison */ .page-product #estimateddelivery .ed_delivery_text { font-size: 14px; font-weight: 400; line-height: 1.45; } /* Mobile */ @media (max-width: 767px) { .page-product #estimateddelivery { padding: 0; } .page-product #estimateddelivery .ed_delivery_text { font-size: 12px; } } /* ========================================================== RESPONSIVE - FICHE PRODUIT ========================================================== */ @media (max-width: 767.98px) { .page-product .product__name { font-size: 28px; line-height: 1.2; } .page-product .product__price { font-size: 26px; } } /* ========================================================== MARIUS - DESCRIPTION PRODUIT Présentation reprise de l'ancien site Couleurs laissées au thème Hummingbird ========================================================== */ /* ========================================================== DESCRIPTION ========================================================== */ .page-product .product__description { font-family: "Montserrat", sans-serif; font-size: 13px; font-weight: 400; font-style: normal; line-height: 20px; letter-spacing: normal; text-align: start; overflow-wrap: break-word; } /* Paragraphes */ .page-product .product__description p { margin: 0 0 10px; padding: 0; } /* Texte en gras */ .page-product .product__description strong, .page-product .product__description b { font-weight: 700; } /* ========================================================== H2 ========================================================== */ .page-product .product__description h2 { margin: 0 0 8px; padding: 0; font-family: "Montserrat Condensed", sans-serif; font-size: 26px; font-weight: 700; font-style: normal; line-height: normal; letter-spacing: .52px; text-transform: none; } /* * L'ancien site ne mettait pas automatiquement 40px * au-dessus des H2. * * On ajoute cependant une séparation entre deux sections * pour éviter que les blocs soient visuellement collés. */ .page-product .product__description > h2:not(:first-child) { margin-top: 40px; } /* ========================================================== H3 ========================================================== */ .page-product .product__description h3 { margin: 10px 0 8px; padding: 0; font-family: "Montserrat Condensed", sans-serif; font-size: 22.75px; font-weight: 700; font-style: normal; line-height: normal; letter-spacing: .455px; text-transform: none; } /* ========================================================== LISTES ========================================================== */ .page-product .product__description ul { margin: 0; padding: 0 0 0 40px; font-family: "Montserrat", sans-serif; font-size: 13px; font-weight: 400; line-height: 20px; list-style-type: disc; list-style-position: outside; } .page-product .product__description li { margin: 0; padding: 0; font-family: "Montserrat", sans-serif; font-size: 13px; font-weight: 400; line-height: 20px; text-align: justify; } /* ========================================================== TABLEAUX DESCRIPTION PRODUIT Style harmonisé avec les blocs produit Marius ========================================================== */ .page-product .product__description table { width: 100%; margin: 5px 0 5px 0; border-collapse: collapse; font-family: "Montserrat", sans-serif; font-size: 13px; font-weight: 400; line-height: 20px; color: #3d3d3d; background-color: #fff; border: 1px solid #dfe5ec; } /* ========================================================== CELLULES ========================================================== */ .page-product .product__description table th, .page-product .product__description table td { padding: 10px 8px; border: 1px solid #dfe5ec; text-align: center; vertical-align: middle; } /* ========================================================== EN-TÊTE ========================================================== */ .page-product .product__description table thead th { font-weight: 600; text-transform: uppercase; color: #222; background-color: #e9eef5; } /* Liens dans l'en-tête */ .page-product .product__description table thead th a { font: inherit; color: inherit; text-transform: inherit; text-decoration: none; } /* ========================================================== CORPS DU TABLEAU ========================================================== */ .page-product .product__description table tbody td { font-weight: 400; color: #3d3d3d; } /* Première colonne */ .page-product .product__description table tbody td:first-child { font-weight: 600; } /* ========================================================== LIGNES ALTERNÉES En-tête = foncé 1re ligne = blanc 2e ligne = foncé 3e ligne = blanc 4e ligne = foncé etc. ========================================================== */ .page-product .product__description table tbody tr:nth-child(odd) td { background-color: #fff; } .page-product .product__description table tbody tr:nth-child(even) td { background-color: #f7f9fc; } /* ========================================================== LIENS ========================================================== */ .page-product .product__description table td a { color: inherit; } /* ========================================================== HOVER TABLEAU Uniquement sur les appareils disposant d'une souris ========================================================== */ .page-product .product__description table tbody tr td { transition: background-color .20s ease, box-shadow .20s ease; } @media (hover: hover) and (pointer: fine) { .page-product .product__description table tbody tr:hover td { background-color: #edf4fc; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), inset 0 -1px 0 rgba(11, 105, 246, .08); } } /* ========================================================== TABLEAUX DESCRIPTION PRODUIT - MOBILE L'en-tête reste affiché : en-tête foncé 1re ligne blanche 2e ligne foncée etc. ========================================================== */ @media (max-width: 767.98px) { .page-product .product__description table { display: table; width: 100%; min-width: 0; max-width: 100%; margin: 12px 0 20px; table-layout: fixed; border-collapse: collapse; font-size: 12px; line-height: 1.35; overflow: visible; border: 1px solid #dfe5ec; } /* Cellules */ .page-product .product__description table th, .page-product .product__description table td { min-width: 0; width: auto; padding: 8px 6px; border-color: #dfe5ec; white-space: normal; overflow-wrap: anywhere; word-break: normal; vertical-align: middle; } /* En-têtes plus compacts */ .page-product .product__description table thead th { padding: 8px 5px; font-size: 11px; line-height: 1.3; background-color: #e9eef5; } /* Première colonne */ .page-product .product__description table th:first-child, .page-product .product__description table td:first-child { font-weight: 600; } /* Alternance mobile : l'en-tête étant toujours visible, on conserve la même séquence que sur desktop */ .page-product .product__description table tbody tr:nth-child(odd) td { background-color: #fff; } .page-product .product__description table tbody tr:nth-child(even) td { background-color: #f7f9fc; } /* Liens : autorise proprement le retour à la ligne */ .page-product .product__description table a { white-space: normal; overflow-wrap: anywhere; } } /* ========================================================= PRODUCTCOMMENTS - Produit dans "Donnez votre avis" ========================================================= */ #post-product-comment-modal .marius-review-product { display: flex; align-items: flex-start; gap: 16px; } /* Image */ #post-product-comment-modal .marius-review-product__image { flex: 0 0 145px; width: 145px; padding: 5px; border: 1px solid #dee2e6; border-radius: 5px; background: #fff; } #post-product-comment-modal .marius-review-product__image .product-cover, #post-product-comment-modal .marius-review-product__image picture { display: block; margin: 0; } #post-product-comment-modal .marius-review-product__image img { display: block; width: 100% !important; height: auto !important; max-width: none; margin: 0; border-radius: 5px; } /* Titre */ #post-product-comment-modal .marius-review-product__title { flex: 1 1 0; min-width: 0; margin: 2px 0 0; font-size: 20px; line-height: 1.35; font-weight: 600; color: #343a40; overflow-wrap: break-word; } /* Mobile étroit */ @media (max-width: 575.98px) { #post-product-comment-modal .marius-review-product { gap: 12px; } #post-product-comment-modal .marius-review-product__image { flex-basis: 110px; width: 110px; } #post-product-comment-modal .marius-review-product__title { font-size: 16px; line-height: 1.35; } } /* ========================================================== IMAGES DESCRIPTION ========================================================== */ .page-product .product__description img { height: auto; } /* Image à droite */ .page-product .product__description .img_long_description_right { display: block; float: right; width: auto; max-width: 50%; height: auto; margin: 10px 0 10px 15px; padding: 0; } /* Image à gauche */ .page-product .product__description .img_long_description_left { display: block; float: left; width: auto; max-width: 50%; height: auto; margin: 10px 15px 10px 0; padding: 0 10px 0 0; } /* Grande bannière */ .page-product .product__description .img_long_description_banner { display: block; float: none; clear: both; width: 100%; max-width: 100%; height: auto; margin: 0 0 10px; padding: 0; } /* ========================================================== NETTOYAGE DES FLOATS ========================================================== */ .page-product .product__description::after { content: ""; display: block; clear: both; } /* ========================================================== RESPONSIVE ========================================================== */ @media (max-width: 767.98px) { .page-product .product__description h2 { font-size: 23px; line-height: 1.25; } .page-product .product__description h3 { font-size: 20px; line-height: 1.3; } /* * Sur mobile on supprime les floats. * Les images occupent toute la largeur disponible. */ .page-product .product__description .img_long_description_left, .page-product .product__description .img_long_description_right { float: none; clear: both; width: 100%; max-width: 100%; height: auto; margin: 15px 0; padding: 0; } .page-product .product__description .img_long_description_banner { width: 100%; max-width: 100%; height: auto; } /* * Tableau défilable horizontalement */ .page-product .product__description table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .page-product .product__description th, .page-product .product__description td { min-width: 120px; } } /* ========================================================== MARIUS - ONGLETS PRODUIT Version finale ========================================================== */ /* ========================================================== CONTENEUR GLOBAL ========================================================== */ .page-product .marius-product-tabs { width: 100%; } /* ========================================================== BARRE DES ONGLETS ========================================================== */ .page-product .marius-product-tabs .nav-tabs { display: flex; flex-wrap: nowrap; align-items: flex-end; gap: 2px; margin: 0; padding: 0; border: 0; } /* ========================================================== ONGLETS INACTIFS ========================================================== */ .page-product .marius-product-tabs .nav-tabs .nav-link { position: relative; display: block; margin: 0; padding: 8px 18px; font-family: "Montserrat", sans-serif; font-size: 17px; font-weight: 600; line-height: 18px; letter-spacing: .15px; text-align: center; text-transform: uppercase; white-space: nowrap; color: #777; background: linear-gradient( to bottom, #f6f6f6 0%, #b6b6b6 100% ); border-top: 1px solid #b6b6b6; border-right: 1px solid #b6b6b6; border-bottom: 0; border-left: 1px solid #b6b6b6; border-radius: 5px 5px 0 0; box-shadow: none; transition: background .20s ease, color .20s ease, border-color .20s ease, box-shadow .20s ease; } /* ========================================================== HOVER ONGLET INACTIF ========================================================== */ @media (hover: hover) and (pointer: fine) { .page-product .marius-product-tabs .nav-tabs .nav-link:not(.active):hover { color: #000; background: linear-gradient( to bottom, #ffffff 0%, #cccccc 100% ); border-color: #b6b6b6; box-shadow: 0 0 4px rgba(0, 0, 0, .18); } } /* ========================================================== ONGLET ACTIF ========================================================== */ .page-product .marius-product-tabs .nav-tabs .nav-link.active, .page-product .marius-product-tabs .nav-tabs .nav-link.active:hover, .page-product .marius-product-tabs .nav-tabs .nav-link.active:focus { position: relative; z-index: 2; color: #fff; background: linear-gradient( to bottom, #6fb828 0%, #5f8e2f 100% ); border-top: 1px solid #5f862f; border-right: 1px solid #5f862f; border-bottom: 1px solid #5f8e2f; border-left: 1px solid #5f862f; /* * Descend d'1 px sur le contenu * pour supprimer le filet blanc. */ margin-bottom: -1px; box-shadow: 0 0 4px rgba(0, 0, 0, .27); } /* Aucun ancien soulignement */ .page-product .marius-product-tabs .nav-tabs .nav-link::after { content: none !important; } /* ========================================================== CONTENU DES ONGLETS ========================================================== */ .page-product .marius-product-tabs .tab-content { position: relative; z-index: 1; margin: 0; padding: 18px 10px 10px; background: #fff; border-top: 1px solid #5f8e2f; border-right: 1px solid #ebebeb; border-bottom: 1px solid #ebebeb; border-left: 1px solid #ebebeb; border-radius: 0 0 5px 5px; box-shadow: none; } /* ========================================================== PANNEAUX ========================================================== */ .page-product .marius-product-tabs .tab-pane { width: 100%; margin: 0; padding: 0; border: 0; background: transparent; } /* Premier élément : pas de marge inutile en haut */ .page-product .marius-product-tabs .tab-pane > :first-child { margin-top: 0; } /* Dernier élément : pas de marge inutile en bas */ .page-product .marius-product-tabs .tab-pane > :last-child { margin-bottom: 0; } /* ========================================================== PRODUCT BOTTOM - DESKTOP ========================================================== */ @media (min-width: 992px) { .page-product .product__bottom { display: block; width: 100%; max-width: 100%; } } /* ========================================================== PRODUCT BOTTOM - TABLETTE ========================================================== */ @media (max-width: 991.98px) { .page-product .product__bottom { margin-block-start: 1.5rem; } } /* ========================================================== PRODUCT BOTTOM - MOBILE ========================================================== */ @media (max-width: 575.98px) { .page-product .product__bottom { margin-block-start: 1.5rem; } } /* ========================================================== TABLETTE ========================================================== */ @media (max-width: 991.98px) { .page-product .marius-product-tabs .nav-tabs { gap: 2px; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; -webkit-overflow-scrolling: touch; } .page-product .marius-product-tabs .nav-tabs .nav-link { flex: 0 0 auto; padding: 8px 14px; font-size: 16px; line-height: 18px; } } /* ========================================================== PRODUCT TABS - MOBILE VERTICAL MÊME STYLE QUE DESKTOP ========================================================== */ @media (max-width: 575.98px) { /* ====================================================== NAVIGATION ====================================================== */ .page-product .marius-product-tabs .nav-tabs { display: flex; flex-direction: column; align-items: stretch; gap: 0; width: 100%; margin: 0; padding: 0; overflow: visible; border: 0; } /* ====================================================== ITEMS ====================================================== */ .page-product .marius-product-tabs .nav-tabs .nav-item { width: 100%; margin: 0; } /* ====================================================== ONGLETS INACTIFS ====================================================== */ .page-product .marius-product-tabs .nav-tabs .nav-link { display: block; width: 100%; margin: 0; padding: 9px 18px; font-family: "Montserrat", sans-serif; font-size: 16px; font-weight: 600; line-height: 20px; letter-spacing: .15px; text-align: center; text-transform: uppercase; white-space: normal; color: #777; background: linear-gradient( to bottom, #f6f6f6 0%, #b6b6b6 100% ); border-top: 1px solid #b6b6b6; border-right: 1px solid #b6b6b6; border-bottom: 0; border-left: 1px solid #b6b6b6; border-radius: 0; box-shadow: none; } /* ====================================================== PREMIER ONGLET ====================================================== */ /* ========================================================== PREMIER ONGLET - COINS SUPÉRIEURS ========================================================== */ .page-product .marius-product-tabs .nav-tabs .nav-item:first-child .nav-link, .page-product .marius-product-tabs .nav-tabs .nav-item:first-child .nav-link.active, .page-product .marius-product-tabs .nav-tabs .nav-item:first-child .nav-link.active:hover, .page-product .marius-product-tabs .nav-tabs .nav-item:first-child .nav-link.active:focus { border-radius: 5px 5px 0 0; } /* ====================================================== ONGLET ACTIF ====================================================== */ .page-product .marius-product-tabs .nav-tabs .nav-link.active, .page-product .marius-product-tabs .nav-tabs .nav-link.active:hover, .page-product .marius-product-tabs .nav-tabs .nav-link.active:focus { z-index: 2; margin: 0; color: #fff; background: linear-gradient( to bottom, #6fb828 0%, #5f8e2f 100% ); border-top: 1px solid #5f862f; border-right: 1px solid #5f862f; border-bottom: 1px solid #5f8e2f; border-left: 1px solid #5f862f; border-radius: 0; box-shadow: 0 0 4px rgba(0, 0, 0, .27); } /* ====================================================== CONTENU ====================================================== */ .page-product .marius-product-tabs .tab-content { margin: 0; padding: 18px 10px 10px; background: #fff; border-top: 1px solid #5f8e2f; border-right: 1px solid #ebebeb; border-bottom: 1px solid #ebebeb; border-left: 1px solid #ebebeb; border-radius: 0 0 5px 5px; box-shadow: none; } } /* ========================================================== PRODUCT PAGE - LIENS CONTENU - LIENS SANS SOULIGNEMENT ========================================================== */ .page-product .marius-product-tabs .tab-content a { color: #333 !important; } .page-product .marius-product-tabs .tab-content a:hover { color: #111 !important; } .page-product .rich-text a, .page-product .rich-text a:hover, .page-product .rich-text a:focus { text-decoration: none !important; } /* ========================================================== PRODUCT CARDS - HOVER SANS ZOOM IMAGE ========================================================== */ /* * Animation de la carte */ .module-products__list .product-miniature { border-radius: 5px; transition: transform .25s ease, box-shadow .25s ease; } /* * L'image reste totalement fixe */ .module-products__list .product-miniature img { transform: none !important; } /* * Desktop uniquement */ @media (hover: hover) and (pointer: fine) { .module-products__list .product-miniature:hover { transform: translateY(-6px); box-shadow: 0 10px 22px -4px rgba(0, 0, 0, .18); } .module-products__list .product-miniature:hover img { transform: none !important; } } /* ========================================================== MARIUS - SLIDER PRODUITS ASSOCIÉS ========================================================== */ /* ========================================================== CONTENEUR GLOBAL ========================================================== */ .page-product .product__accessories { margin: 2em 0 2rem; } .page-product .product__accessories .module-products, .page-product .product__accessories .marius-accessories-slider { position: relative; } /* ========================================================== TITRE STYLE ONGLET ========================================================== */ .page-product .product__accessories .module-products::before { content: ""; position: absolute; top: 35px; left: 0; right: 0; height: 1px; background: #5f8e2f; z-index: 0; } .page-product .product__accessories .section-title { position: relative; z-index: 1; display: table; margin: 0; padding: 8px 18px; font-family: "Montserrat", sans-serif; font-size: 17px; font-weight: 600; line-height: 18px; letter-spacing: .15px; text-transform: uppercase; white-space: nowrap; color: #fff; background: linear-gradient( to bottom, #6fb828 0%, #5f8e2f 100% ); border: 1px solid #5f862f; border-bottom: 0; border-radius: 5px 5px 0 0; box-shadow: 0 0 4px rgba(0, 0, 0, .27); } .page-product .product__accessories .section-title::after { content: none !important; } /* ========================================================== CONTENU / SLIDER ========================================================== */ .page-product .product__accessories .marius-accessories-slider { width: 100%; margin: 0; background: #fff; border-top: 1px solid #5f8e2f; border-right: 1px solid #ebebeb; border-bottom: 1px solid #ebebeb; border-left: 1px solid #ebebeb; border-radius: 0 0 5px 5px; } /* ========================================================== LISTE DES PRODUITS ========================================================== */ .page-product .product__accessories .marius-accessories-slider > .products { display: flex !important; flex-wrap: nowrap !important; gap: 16px !important; width: 100%; margin: 0 !important; padding: 12px 12px 22px; overflow-x: auto !important; overflow-y: hidden !important; scroll-snap-type: x mandatory; scroll-padding-inline: 12px; scroll-behavior: smooth; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .page-product .product__accessories .marius-accessories-slider > .products::-webkit-scrollbar { display: none; } /* ========================================================== PRODUITS - DESKTOP : 4 PRODUITS ========================================================== */ .page-product .product__accessories .marius-accessories-slider > .products > .product-miniature { flex: 0 0 calc((100% - 48px) / 4) !important; min-width: 0 !important; scroll-snap-align: start; border-radius: 5px; transition: transform .25s ease, box-shadow .25s ease; } /* ========================================================== CARTE INTÉRIEURE ========================================================== */ .page-product .product__accessories .product-miniature__inner { overflow: hidden; border-radius: 5px; } /* ========================================================== IMAGE - AUCUN ZOOM ========================================================== */ .page-product .product__accessories .marius-accessories-slider .product-miniature__image { transform: none !important; transition: none !important; } /* ========================================================== HOVER CARTE ========================================================== */ @media (hover: hover) and (pointer: fine) { .page-product .product__accessories .marius-accessories-slider > .products > .product-miniature:hover { transform: translateY(-6px); box-shadow: 0 10px 22px -4px rgba(0, 0, 0, .18); } } /* ========================================================== FLÈCHES ========================================================== */ .page-product .product__accessories .marius-accessories-prev, .page-product .product__accessories .marius-accessories-next { position: absolute; top: 50%; transform: translateY(-50%); z-index: 20; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; color: #212529; background: #fff; border: 1px solid #ddd; border-radius: 50%; font-size: 28px; line-height: 1; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, .12); } .page-product .product__accessories .marius-accessories-prev { left: 12px; } .page-product .product__accessories .marius-accessories-next { right: 12px; } .page-product .product__accessories .marius-accessories-prev:hover, .page-product .product__accessories .marius-accessories-next:hover { background: #f5f5f5; } /* Mobile : navigation au doigt, sans flèches */ @media (max-width: 575.98px) { .page-product .product__accessories .marius-accessories-prev, .page-product .product__accessories .marius-accessories-next { display: none !important; } } /* ========================================================== TABLETTE : 3 PRODUITS ========================================================== */ @media (max-width: 1199px) { .page-product .product__accessories .marius-accessories-slider > .products > .product-miniature { flex-basis: calc((100% - 32px) / 3) !important; } } /* ========================================================== PETITE TABLETTE : 2 PRODUITS ========================================================== */ @media (max-width: 767px) { .page-product .product__accessories .marius-accessories-slider > .products > .product-miniature { flex-basis: calc((100% - 16px) / 2) !important; } } /* ========================================================== MOBILE ========================================================== */ @media (max-width: 575px) { .page-product .product__accessories .marius-accessories-slider > .products > .product-miniature { flex-basis: 85% !important; } } /* ========================================================== PRODUCT CARDS - IMAGE DARK OVERLAY ON HOVER ========================================================== */ .product-miniature .product-miniature__image-link { position: relative; display: block; } .product-miniature .product-miniature__image-link::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .25); opacity: 0; pointer-events: none; transition: opacity .25s ease; border-radius: inherit; } /* ========================================================== PRODUCT CARDS - IMAGE HOVER ========================================================== */ @media (hover: hover) and (pointer: fine) { .product-miniature:hover .product-miniature__image-link::after { opacity: 1; } } /* ========================================================== PRODUCT - Bouton Aperçu rapide ========================================================== */ .page-product .product-miniature__quickview-button { background-color: rgb(255 255 255 / 80%) !important; border: 0 !important; } /* ========================================================== PRODUCT CARD - MASQUER APERÇU RAPIDE SUR MOBILE ========================================================== */ @media (max-width: 767.98px) { .product-miniature__quickview-button, .product-miniature__quickview-touch { display: none !important; } } /* ========================================================== CATEGORY - Bouton Aperçu rapide ========================================================== */ .page-category .product-miniature__quickview-button { background-color: rgb(255 255 255 / 80%) !important; border: 0 !important; } /* ========================================================== CATEGORY - PRODUCT CARDS ========================================================== */ #js-product-list .product-miniature { border-radius: 0; transform: none; box-shadow: none; transition: none; } /* ========================================================== CATEGORY - IMAGE SANS ZOOM ========================================================== */ #js-product-list .product-miniature .product-miniature__image { transform: none !important; scale: none !important; } /* ========================================================== CATEGORY - HOVER CARTE ========================================================== */ @media (hover: hover) and (pointer: fine) { #js-product-list .product-miniature:hover { transform: none !important; box-shadow: none !important; } #js-product-list .product-miniature:hover .product-miniature__inner { border-color: #cfd5dc !important; } #js-product-list .product-miniature:hover .product-miniature__image { transform: none !important; scale: none !important; } } /* ========================================================== MARIUS - PRODUCT ACCESSORIES ARRONDIS SUPÉRIEURS DES IMAGES ========================================================== */ .page-product .product__accessories .product-miniature__top, .page-product .product__accessories .product-miniature__image-container, .page-product .product__accessories .product-miniature__image-link, .page-product .product__accessories .product-miniature__image { border-radius: 5px 5px 0 0 !important; overflow: hidden !important; } .page-product .product__accessories .product-miniature__image { display: block !important; } /* ========================================================== MARIUS - PRODUITS DÉJÀ VUS Même style que PRODUITS ASSOCIÉS ========================================================== */ /* ========================================================== Modules produits pleine largeur. Déjà vus. ========================================================== */ .page-product .ps-viewedproduct > .module-products.container { width: 100%; max-width: 1440px !important; margin-left: auto; margin-right: auto; } /* ========================================================== BLOC GLOBAL ========================================================== */ .page-product .module-products__list { position: relative; width: 100%; margin: 0; background: #fff; border-top: 1px solid #5f8e2f; border-right: 1px solid #ebebeb; border-bottom: 1px solid #ebebeb; border-left: 1px solid #ebebeb; border-radius: 0 0 5px 5px; box-shadow: none; } .page-product .ps-viewedproduct { margin-top: 2em; margin-bottom: 2rem; } /* ========================================================== CONTENEUR ========================================================== */ .page-product .ps-viewedproduct .module-products { position: relative; } /* ========================================================== TITRE STYLE ONGLET ========================================================== */ .page-product .ps-viewedproduct .module-products::before { content: ""; position: absolute; top: 35px; left: 0; right: 0; height: 1px; background: #5f8e2f; z-index: 0; } .page-product .ps-viewedproduct .section-title { position: relative; z-index: 1; display: table; width: auto; margin: 0; padding: 8px 18px; font-family: "Montserrat", sans-serif; font-size: 17px; font-weight: 600; line-height: 18px; letter-spacing: .15px; text-align: left; text-transform: uppercase; white-space: nowrap; color: #fff; background: linear-gradient( to bottom, #6fb828 0%, #5f8e2f 100% ); border-top: 1px solid #5f862f; border-right: 1px solid #5f862f; border-left: 1px solid #5f862f; border-radius: 5px 5px 0 0; box-shadow: 0 0 4px rgba(0, 0, 0, .27); } /* Aucun ancien pseudo élément */ .page-product .ps-viewedproduct .section-title::after { content: none !important; } /* ========================================================== LISTE DES PRODUITS ========================================================== */ .page-product .ps-viewedproduct .module-products__list > .products { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; gap: 16px !important; width: 100%; max-width: 100%; box-sizing: border-box; overflow-x: auto !important; overflow-y: hidden !important; scroll-snap-type: x mandatory; scroll-behavior: smooth; scroll-padding-inline: 12px; scrollbar-width: none; margin: 0 !important; padding-top: 12px; padding-bottom: 22px; padding-left: 12px; padding-right: 12px; } /* Chrome / Edge / Safari */ .page-product .ps-viewedproduct .module-products__list > .products::-webkit-scrollbar { display: none; } /* ========================================================== PRODUITS - DESKTOP : 4 PRODUITS ========================================================== */ .page-product .ps-viewedproduct .module-products__list > .products > .product-miniature { flex: 0 0 calc((100% - 48px) / 4) !important; width: calc((100% - 48px) / 4) !important; max-width: calc((100% - 48px) / 4) !important; min-width: 0 !important; scroll-snap-align: start; border-radius: 5px; transition: transform .25s ease, box-shadow .25s ease; } /* ========================================================== CARTE BLANCHE INTÉRIEURE ========================================================== */ .page-product .ps-viewedproduct .product-miniature__inner { border-radius: 5px; overflow: hidden; } /* ========================================================== HOVER CARTE ========================================================== */ @media (hover: hover) and (pointer: fine) { .page-product .ps-viewedproduct .module-products__list > .products > .product-miniature:hover { transform: translateY(-6px); box-shadow: 0 10px 22px -4px rgba(0, 0, 0, .18); } } /* ========================================================== TABLETTE : 3 PRODUITS ========================================================== */ @media (max-width: 1199px) { .page-product .ps-viewedproduct .module-products__list > .products > .product-miniature { flex-basis: calc((100% - 32px) / 3) !important; width: calc((100% - 32px) / 3) !important; max-width: calc((100% - 32px) / 3) !important; } } /* ========================================================== PETITE TABLETTE : 2 PRODUITS ========================================================== */ @media (max-width: 767px) { .page-product .ps-viewedproduct .module-products__list > .products > .product-miniature { flex-basis: calc((100% - 16px) / 2) !important; width: calc((100% - 16px) / 2) !important; max-width: calc((100% - 16px) / 2) !important; } } /* ========================================================== MOBILE ========================================================== */ @media (max-width: 575px) { .page-product .ps-viewedproduct .module-products__list { } .page-product .ps-viewedproduct .module-products__list > .products > .product-miniature { flex-basis: 85% !important; width: 85% !important; max-width: 85% !important; } } /* ========================================================== MARIUS - PRODUITS DÉJÀ VUS ARRONDIS SUPÉRIEURS DES IMAGES ========================================================== */ .page-product .ps-viewedproduct .product-miniature__top, .page-product .ps-viewedproduct .product-miniature__image-container, .page-product .ps-viewedproduct .product-miniature__image-link, .page-product .ps-viewedproduct .product-miniature__image { border-radius: 5px 5px 0 0 !important; overflow: hidden !important; } .page-product .ps-viewedproduct .product-miniature__image { display: block !important; } /* ========================================================== BLOCK REASSURANCE - HOME + PRODUCT ========================================================== */ /* ========================================================== BLOCK REASSURANCE - MOBILE - MASQUER LES DESCRIPTIONS ========================================================== */ @media (max-width: 575.98px) { body#index .container-blockreassurance .blockreassurance > .row > div > p { display: none; } } /* ========================================================== HOME - ESPACEMENT ========================================================== */ body#index .container-blockreassurance { margin-top: 0; margin-bottom: 0; } /* ========================================================== PRODUCT - GROUPE REASSURANCE + TRUST BAR ========================================================== */ body#product .marius-product-reassurance-group { grid-column: 1 / -1; width: 100%; min-width: 0; margin-top: 0; } body#product .marius-product-reassurance { width: 100%; min-width: 0; margin: 0; } body#product .marius-product-reassurance .container-blockreassurance { width: 100%; max-width: 100%; margin: 0; padding-left: 0; padding-right: 0; } /* ========================================================== CONTENEUR PRINCIPAL REASSURANCE ========================================================== */ body#index .container-blockreassurance .blockreassurance, body#product .marius-product-reassurance .blockreassurance { display: flex; flex-wrap: nowrap; align-items: stretch; width: 100%; padding: 12px 14px; border: 1px solid #e5e7eb; border-radius: 5px; } /* * Le template natif displayBlock.tpl crée une nouvelle .row * après le 4e bloc. * display: contents permet de conserver les 5 éléments * sur une seule ligne. */ body#index .container-blockreassurance .blockreassurance > .row, body#product .marius-product-reassurance .blockreassurance > .row { display: contents; } /* ========================================================== 5 COLONNES DESKTOP ========================================================== */ body#index .container-blockreassurance .blockreassurance > .row > div, body#product .marius-product-reassurance .blockreassurance > .row > div { flex: 0 0 20% !important; width: 20% !important; max-width: 20% !important; margin: 0 !important; padding: 8px 14px !important; text-align: center; } /* ========================================================== ICÔNES ========================================================== */ body#index .container-blockreassurance .block-icon, body#product .marius-product-reassurance .block-icon { display: flex; align-items: center; justify-content: center; height: 45px; margin-bottom: 6px; } body#index .container-blockreassurance .block-icon img, body#index .container-blockreassurance .block-icon img.svg, body#index .container-blockreassurance .block-icon svg, body#product .marius-product-reassurance .block-icon img, body#product .marius-product-reassurance .block-icon img.svg, body#product .marius-product-reassurance .block-icon svg { display: block !important; visibility: visible !important; opacity: 1 !important; width: auto !important; max-width: 40px !important; height: auto !important; max-height: 40px !important; object-fit: contain; } /* * blockreassurance ajoute parfois la classe "invisible" * aux SVG avant traitement. */ body#index .container-blockreassurance .block-icon .invisible, body#product .marius-product-reassurance .block-icon .invisible { visibility: visible !important; } /* ========================================================== TITRE ========================================================== */ body#index .container-blockreassurance .block-title, body#product .marius-product-reassurance .block-title { margin: 4px 0 6px; font-size: 14px; font-weight: 600; line-height: 1.35; text-align: center; } /* ========================================================== DESCRIPTION ========================================================== */ body#index .container-blockreassurance p, body#product .marius-product-reassurance p { margin: 0; font-size: 13px; line-height: 1.4; text-align: center; } /* ========================================================== PRODUCT TRUST BAR ========================================================== */ body#product .marius-product-trustbar { width: 100%; min-width: 0; margin-top: 6px; margin-bottom: 0; } body#product .marius-product-trustbar .marius-trustbar-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; width: 100%; gap: 4px 6px; padding: 4px 0; font-size: 12px; line-height: 1.5; text-align: center; } body#product .marius-product-trustbar .marius-trustbar-item { display: inline; } body#product .marius-product-trustbar .marius-trustbar-inner a { color: inherit; text-decoration: none; } body#product .marius-product-trustbar .marius-trustbar-inner a:hover { text-decoration: underline; } body#product .marius-product-trustbar .marius-trustbar-separator { opacity: .45; } /* ========================================================== TABLETTE 2 BLOCS PAR LIGNE ========================================================== */ @media (max-width: 991px) { body#index .container-blockreassurance .blockreassurance, body#product .marius-product-reassurance .blockreassurance { flex-wrap: wrap; } body#index .container-blockreassurance .blockreassurance > .row > div, body#product .marius-product-reassurance .blockreassurance > .row > div { flex: 0 0 50% !important; width: 50% !important; max-width: 50% !important; padding: 15px !important; } } /* ========================================================== MOBILE 1 BLOC PAR LIGNE ========================================================== */ @media (max-width: 575px) { body#index .container-blockreassurance .blockreassurance > .row > div, body#product .marius-product-reassurance .blockreassurance > .row > div { flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important; padding: 10px 0 !important; } body#product .marius-product-trustbar .marius-trustbar-inner { font-size: 11px; line-height: 1.55; gap: 5px 8px; padding: 6px 0; } body#product .marius-product-trustbar .marius-trustbar-separator { display: none; } } /* ========================================================== PRODUCT THUMBNAILS CAROUSEL - MARIUS ========================================================== */ body#product .product__thumbnails { position: relative; width: 100%; margin-top: 14px; padding: 0 34px; } body#product .product__thumbnails-list { display: flex; flex-wrap: nowrap; gap: 10px; width: 100%; margin: 0; padding: 2px; overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; scroll-snap-type: x proximity; /* Empêche le swipe horizontal de se propager à la page */ overscroll-behavior-x: contain; /* Défilement tactile fluide sur mobile */ -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; } body#product .product__thumbnails-list::-webkit-scrollbar { display: none; } body#product .product__thumbnails-item { flex: 0 0 calc((100% - 30px) / 4); width: calc((100% - 30px) / 4); max-width: calc((100% - 30px) / 4); margin: 0 !important; scroll-snap-align: start; } body#product .product__thumbnail { width: 100%; } body#product .product__thumbnail-image { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; } /* ========================================================== PRODUCT THUMBNAIL - SELECTED ========================================================== */ body#product .product__thumbnail { padding: 0; background: transparent; border: 0; outline: 0; box-shadow: none; } /* Image */ body#product .product__thumbnail-image { display: block; border: 2px solid transparent !important; border-radius: 5px; outline: 0 !important; box-shadow: none !important; opacity: .45; transition: opacity .18s ease, border-color .18s ease; } /* ========================================================== MINIATURE SÉLECTIONNÉE ========================================================== */ body#product .product__thumbnail.marius-thumb-current .product__thumbnail-image { opacity: 1; border-color: #0d6efd !important; } /* ========================================================== SURVOL ========================================================== */ body#product .product__thumbnail:hover .product__thumbnail-image { opacity: .85; } /* * La miniature sélectionnée reste totalement visible * même au survol. */ body#product .product__thumbnail.marius-thumb-current:hover .product__thumbnail-image { opacity: 1; } /* Flèches */ body#product .marius-thumbs-prev, body#product .marius-thumbs-next { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 1px solid #e5e7eb; border-radius: 50%; background: #fff; font-size: 20px; line-height: 1; cursor: pointer; } body#product .marius-thumbs-prev { left: 0; } body#product .marius-thumbs-next { right: 0; } body#product .marius-thumbs-prev:disabled, body#product .marius-thumbs-next:disabled { opacity: .25; cursor: default; } /* ========================================================== TABLETTE ========================================================== */ @media (max-width: 991px) { body#product .product__thumbnails-item { flex: 0 0 calc((100% - 30px) / 4); width: calc((100% - 30px) / 4); max-width: calc((100% - 30px) / 4); } } /* ========================================================== MOBILE ========================================================== */ @media (max-width: 575px) { body#product .product__thumbnails { padding: 0 28px; } body#product .product__thumbnails-item { flex: 0 0 calc((100% - 20px) / 3); width: calc((100% - 20px) / 3); max-width: calc((100% - 20px) / 3); } body#product .marius-thumbs-prev, body#product .marius-thumbs-next { width: 24px; height: 24px; font-size: 18px; } } /* ========================================================== PRODUCT IMAGE MODAL / LIGHTBOX - MARIUS ========================================================== */ body#product #product-modal .modal-dialog { width: calc(100vw - 40px); max-width: 1500px; margin: 20px auto; } body#product #product-modal .modal-content { position: relative; overflow: hidden; border: 0; border-radius: 5px; background: #fff; } /* ========================================================== IMAGE ========================================================== */ body#product #product-modal .carousel-item { position: relative; text-align: center; } body#product #product-modal .carousel-item img { display: block; max-width: 100%; max-height: calc(100vh - 120px); width: auto; height: auto; margin: 0 auto; object-fit: contain; } /* ========================================================== FLÈCHES GAUCHE / DROITE ========================================================== */ body#product #product-modal .carousel-control-prev, body#product #product-modal .carousel-control-next { position: absolute; top: 50%; bottom: auto; transform: translateY(-50%); z-index: 20; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; opacity: 1; border: 1px solid #e5e7eb; border-radius: 50%; background: rgba(255, 255, 255, .95); box-shadow: 0 3px 12px rgba(0, 0, 0, .12); } body#product #product-modal .carousel-control-prev { left: 24px; } body#product #product-modal .carousel-control-next { right: 24px; } /* * On masque complètement les icônes Bootstrap natives */ body#product #product-modal .carousel-control-prev-icon, body#product #product-modal .carousel-control-next-icon { display: none !important; } /* * Nos chevrons */ body#product #product-modal .carousel-control-prev::after, body#product #product-modal .carousel-control-next::after { display: block; color: #111; font-size: 34px; font-weight: 300; line-height: 1; } body#product #product-modal .carousel-control-prev::after { content: "‹"; } body#product #product-modal .carousel-control-next::after { content: "›"; } body#product #product-modal .carousel-control-prev:hover, body#product #product-modal .carousel-control-next:hover { background: #fff; box-shadow: 0 5px 16px rgba(0, 0, 0, .18); } /* ========================================================== TITRE + COMPTEUR ========================================================== */ body#product #product-modal .marius-modal-image-info { position: absolute; left: 20px; right: 20px; bottom: 18px; z-index: 25; padding: 10px 18px; color: #fff; text-align: center; background: rgba(20, 20, 20, .72); border-radius: 5px; pointer-events: none; } body#product #product-modal .marius-modal-image-title { display: block; margin: 0; font-size: 14px; font-weight: 500; line-height: 1.4; } body#product #product-modal .marius-modal-image-count { display: block; margin-top: 3px; font-size: 12px; line-height: 1.2; opacity: .85; } /* ========================================================== BOUTON FERMER ========================================================== */ body#product #product-modal .btn-close, body#product #product-modal .close { position: absolute; top: 14px; right: 14px; z-index: 40; } /* ========================================================== MOBILE ========================================================== */ @media (max-width: 767px) { body#product #product-modal .modal-dialog { width: 100%; max-width: 100%; margin: 0; } body#product #product-modal .modal-content { min-height: 100vh; border-radius: 0; } body#product #product-modal .carousel-item img { max-height: calc(100vh - 80px); } body#product #product-modal .carousel-control-prev, body#product #product-modal .carousel-control-next { width: 38px; height: 38px; } body#product #product-modal .carousel-control-prev { left: 8px; } body#product #product-modal .carousel-control-next { right: 8px; } body#product #product-modal .carousel-control-prev::after, body#product #product-modal .carousel-control-next::after { font-size: 30px; } body#product #product-modal .marius-modal-image-info { left: 8px; right: 8px; bottom: 8px; padding: 8px 10px; } body#product #product-modal .marius-modal-image-title { font-size: 12px; } } /* ========================================================== CART DRAWER RIGHT - MARIUS Hummingbird native modal -> drawer ========================================================== */ /* ========================================================== MODAL ========================================================== */ #blockcart-modal { padding: 0 !important; } /* ========================================================== DRAWER ========================================================== */ #blockcart-modal .modal-dialog { position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 92vw); max-width: 440px; height: 100dvh; margin: 0; transform: translateX(100%); transition: transform .28s ease; } /* * Modal ouvert */ #blockcart-modal.show .modal-dialog { transform: translateX(0); } /* * Bootstrap applique normalement ses propres transformations. * On force le départ depuis la droite. */ #blockcart-modal.fade:not(.show) .modal-dialog { transform: translateX(100%); } /* ========================================================== CONTENU GLOBAL ========================================================== */ #blockcart-modal .modal-content { display: flex; flex-direction: column; width: 100%; height: 100dvh; border: 0; border-radius: 5px 0 0 5px; background: #fff; box-shadow: -8px 0 30px rgba(0, 0, 0, .16); } /* ========================================================== HEADER ========================================================== */ #blockcart-modal .modal-header { flex: 0 0 auto; padding: 18px 20px; border-bottom: 1px solid #e5e7eb; background: #fff; } #blockcart-modal .blockcart-modal__title { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 18px; font-weight: 600; } #blockcart-modal .blockcart-modal__title-icon { color: #16a34a; font-size: 26px; } /* ========================================================== BODY SCROLLABLE ========================================================== */ #blockcart-modal .modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 18px 20px; background: #fff; } /* ========================================================== LISTE DES PRODUITS ========================================================== */ #blockcart-modal .marius-cart-drawer__products { display: flex; flex-direction: column; width: 100%; } /* ========================================================== PRODUIT ========================================================== */ #blockcart-modal .marius-cart-drawer__product { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 12px; align-items: start; padding: 14px 0; border-bottom: 1px solid #e5e7eb; } #blockcart-modal .marius-cart-drawer__product:first-child { padding-top: 0; } /* ========================================================== IMAGE ========================================================== */ #blockcart-modal .marius-cart-drawer__image { width: 78px; } #blockcart-modal .blockcart-modal__image { display: block; width: 78px; height: 78px; object-fit: contain; border-radius: 5px; } /* ========================================================== INFOS PRODUIT ========================================================== */ #blockcart-modal .marius-cart-drawer__product-info { min-width: 0; } #blockcart-modal .blockcart-modal__name { margin: 0 0 4px; font-size: 13px; font-weight: 600; line-height: 1.35; } #blockcart-modal .blockcart-modal__property { margin-top: 2px; color: #6b7280; font-size: 11px; line-height: 1.35; } /* ========================================================== QUANTITÉ + PRIX ========================================================== */ #blockcart-modal .marius-cart-drawer__product-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 7px; } #blockcart-modal .blockcart-modal__quantity { margin: 0; color: #6b7280; font-size: 12px; } #blockcart-modal .blockcart-modal__price { margin: 0; font-size: 13px; font-weight: 600; white-space: nowrap; } /* ========================================================== RÉSUMÉ ========================================================== */ #blockcart-modal .marius-cart-drawer__separator { height: 1px; margin: 20px 0; background: #e5e7eb; } #blockcart-modal .blockcart-modal__nb-products { margin-bottom: 12px; font-size: 13px; } #blockcart-modal .blockcart-modal__total { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 6px 0; font-size: 13px; } #blockcart-modal .blockcart-modal__total .value { flex-shrink: 0; font-weight: 500; } #blockcart-modal .blockcart-modal__total--bold { font-weight: 600; } #blockcart-modal .marius-cart-drawer__grand-total { margin-top: 8px; padding-top: 13px; border-top: 1px solid #e5e7eb; font-size: 16px; } #blockcart-modal .marius-cart-drawer__grand-total .value { font-size: 17px; font-weight: 700; } /* ========================================================== FOOTER FIXE ========================================================== */ #blockcart-modal .marius-cart-drawer__footer { flex: 0 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; padding: 14px 20px 18px; border-top: 1px solid #e5e7eb; background: #fff; } #blockcart-modal .marius-cart-drawer__footer .btn { width: 100%; margin: 0; white-space: nowrap; } #blockcart-modal .marius-cart-drawer__checkout { font-weight: 600; } /* * Contenu ajouté par d'autres modules */ #blockcart-modal .blockcart-modal__cart-footer-extra { grid-column: 1 / -1; width: 100%; } /* ========================================================== BACKDROP ========================================================== */ .modal-backdrop.show { opacity: .42; } /* ========================================================== MOBILE ========================================================== */ @media (max-width: 575px) { #blockcart-modal .modal-dialog { width: 94vw; max-width: 94vw; } #blockcart-modal .modal-content { border-radius: 5px 0 0 5px; } #blockcart-modal .modal-header { padding: 15px; } #blockcart-modal .modal-body { padding: 15px; } #blockcart-modal .marius-cart-drawer__product { grid-template-columns: 66px minmax(0, 1fr); gap: 10px; padding: 12px 0; } #blockcart-modal .marius-cart-drawer__image { width: 66px; } #blockcart-modal .blockcart-modal__image { width: 66px; height: 66px; } #blockcart-modal .marius-cart-drawer__footer { grid-template-columns: 1fr; padding: 12px 15px 15px; } /* * Commander en premier sur mobile */ #blockcart-modal .marius-cart-drawer__checkout { grid-row: 1; } } /* ========================================================== CART DRAWER - HT / TVA / TTC ========================================================== */ #blockcart-modal .marius-cart-drawer__total-ht { margin-top: 10px; padding-top: 12px; border-top: 1px solid #e5e7eb; font-weight: 500; } #blockcart-modal .marius-cart-drawer__tax { color: #6b7280; } #blockcart-modal .marius-cart-drawer__tax .value { color: #6b7280; } #blockcart-modal .marius-cart-drawer__discount .value { font-weight: 600; } #blockcart-modal .marius-cart-drawer__grand-total { margin-top: 8px; padding-top: 12px; border-top: 1px solid #e5e7eb; font-size: 16px; font-weight: 700; } #blockcart-modal .marius-cart-drawer__grand-total .value { font-size: 18px; font-weight: 700; } /* ========================================================== PRODUCT IMAGES - PREVENT NATIVE IMAGE DRAG ========================================================== */ body#product .product-cover img, body#product .product__images img { -webkit-user-drag: none; user-select: none; } /* ========================================================== PACK PRODUCT - attribut de déclinaison ========================================================== */ .product__pack .marius-pack-product-info { display: flex; flex-direction: column; min-width: 0; } .product__pack .marius-pack-attributes { display: block; margin-top: 0.2rem; } .product__pack .marius-pack-attribute { display: block; color: #777; font-size: 0.8125rem; font-style: italic; line-height: 1.3; } .product__pack .product-pack__quantity { margin-left: auto; flex-shrink: 0; text-align: right; } /* ========================================================== PRODUCT - Réduit l'espace sous le prix produit ========================================================== */ .page-product .product__prices.js-product-prices { margin-block-end: 0.65rem !important; margin-bottom: 0.65rem !important; } /* ========================================================== PRODUCT - Espace entre l'ancien prix barré et la remise ========================================================== */ .page-product .marius-product-price__old-line .product__discount-percentage, .page-product .marius-product-price__old-line .product__discount-amount { margin-left: 5px; } /* ========================================================== PACK PRODUIT - "CE PACK CONTIENT" Liste moderne / légère ========================================================== */ .page-product .product__pack { margin: 0 0 1rem 0; padding: 0; font-family: "Montserrat", sans-serif; background: #fff; border: 1px solid #dfe5ec; border-radius: 5px; overflow: hidden; } /* ========================================================== TITRE ========================================================== */ .page-product .product__pack > .h4 { padding: 0.45rem 0.9rem; background: #e9eef5; color: #222; font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; margin: 0; line-height: 22px; text-align: center; border: 0 !important; border-radius: 0 !important; border-bottom: 1px solid #dfe5ec !important; box-shadow: none !important; } /* ========================================================== LISTE ========================================================== */ .page-product .product-pack__list { margin: 0 !important; padding: 0 !important; background: #fff; border: 0 !important; border-radius: 0 !important; gap: 0; overflow: hidden; } /* ========================================================== LIGNES PRODUITS ========================================================== */ .page-product .product-pack__item { margin: 0 !important; padding: 0 !important; background: #fff; border: 0 !important; border-radius: 0 !important; border-bottom: 1px solid #e2e7ed !important; box-shadow: none !important; transition: background-color .2s ease; } /* Une ligne sur deux bleu très clair */ .page-product .product-pack__item:nth-child(even) { background: #f7f9fc; } /* Pas de trait après le dernier produit */ .page-product .product-pack__item:last-child { border-bottom: 0 !important; } /* ========================================================== CONTENU D'UNE LIGNE ========================================================== */ .page-product .product-pack__link { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 84px; margin: 0 !important; padding: 9px 16px; color: inherit; text-decoration: none; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } /* ========================================================== IMAGE ========================================================== */ .page-product .product-pack__image-wrapper { display: flex; align-items: center; justify-content: center; flex: 0 0 72px; width: 72px; height: 72px; margin: 0; padding: 0; background: transparent; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } .page-product .product-pack__image { display: block; width: 100%; height: 100%; object-fit: contain; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } /* ========================================================== NOM + ATTRIBUTS ========================================================== */ .page-product .marius-pack-product-info { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; } .page-product .product-pack__name { display: block; margin: 0; font-size: 14px; line-height: 19px; font-weight: 600; color: #212529; } .page-product .marius-pack-attributes { display: block; margin-top: 3px; } .page-product .marius-pack-attribute { display: block; font-size: 12px; line-height: 16px; font-weight: 400; font-style: italic; color: #6c757d; } /* ========================================================== QUANTITÉ ========================================================== */ .page-product .product-pack__quantity { flex: 0 0 auto; min-width: 30px; margin-left: auto; font-size: 14px; line-height: 20px; font-weight: 600; text-align: right; color: #495057; } /* ========================================================== HOVER DESKTOP ========================================================== */ @media (hover: hover) and (pointer: fine) { .page-product .product-pack__item:hover { background: #edf4fc; } .page-product .product-pack__item:hover .product-pack__name { color: #0b69f6; } } /* ========================================================== MOBILE ========================================================== */ @media (max-width: 575.98px) { .page-product .product__pack { margin: 0; border-radius: 5px; } .page-product .product__pack > .h4 { padding: 11px 12px; font-size: 15px; line-height: 20px; } .page-product .product-pack__link { gap: 10px; min-height: 76px; padding: 8px 10px; } .page-product .product-pack__image-wrapper { flex: 0 0 64px; width: 64px; height: 64px; } .page-product .product-pack__name { font-size: 12px; line-height: 16px; } .page-product .marius-pack-attributes { margin-top: 2px; } .page-product .marius-pack-attribute { font-size: 10px; line-height: 13px; } .page-product .product-pack__quantity { min-width: 23px; font-size: 12px; line-height: 16px; } } /* ========================================================== PRODUCT - avantage quantité ========================================================== */ .page-product .product__discounts { margin: 10px 0 0 0; } .marius-quantity-discounts { overflow: hidden; background: #fff; border: 1px solid #dfe3e8; border-radius: 5px; } .marius-quantity-discounts__title { text-align: center; padding: 0.45rem 0.9rem; background: #e9eef5; color: #222; font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; border-bottom: 1px solid #e5e7eb; } .marius-quantity-discounts__offer { display: grid; grid-template-columns: 1fr 1fr 1.2fr; align-items: center; } .marius-quantity-discounts__offer + .marius-quantity-discounts__offer { border-top: 1px solid #e5e7eb; } .marius-quantity-discounts__item { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.75rem 0.9rem; } .marius-quantity-discounts__label { color: #777; font-size: 0.75rem; line-height: 1.2; } .marius-quantity-discounts__value, .marius-quantity-discounts__saving { color: #222; font-size: 0.95rem; font-weight: 700; line-height: 1.25; } .marius-quantity-discounts__saving { color: #b52b27; } @media (max-width: 575.98px) { .marius-quantity-discounts__offer { grid-template-columns: 1fr 1fr; } .marius-quantity-discounts__item--saving { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; border-top: 1px solid #eef0f2; } } @media (min-width: 576px) { .marius-quantity-discounts__item { align-items: center; text-align: center; } } /* ========================================================== PACK PRODUCT - CENTER REASSURANCE IN LEFT COLUMN ========================================================== */ body#product .product__left:has(.marius-pack-reassurance) { display: flex; flex-direction: column; align-self: stretch; } body#product .marius-pack-reassurance { width: 100%; margin-top: auto; margin-bottom: auto; padding-top: 20px; padding-bottom: 20px; } /* ========================================================== PACK PRODUCT - REASSURANCE 3 + 2 GRID ========================================================== */ @media (min-width: 992px) { /* Le conteneur du module */ body#product .marius-pack-reassurance .container-blockreassurance { width: 100% !important; max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; } /* * On transforme le bloc complet en grille. * display: contents permet de faire participer * directement les éléments contenus dans les .row. */ body#product .marius-pack-reassurance .blockreassurance { display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: 22px 14px !important; width: 100% !important; } body#product .marius-pack-reassurance .blockreassurance > .row { display: contents !important; } /* ====================================================== RESET DES COLONNES BOOTSTRAP DU MODULE ====================================================== */ body#product .marius-pack-reassurance .blockreassurance > .row > [class*="col-"] { width: auto !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 4px !important; padding-right: 4px !important; flex: none !important; text-align: center; } /* ====================================================== PREMIÈRE LIGNE : 3 BLOCS ====================================================== */ body#product .marius-pack-reassurance .blockreassurance > .row:first-child > :nth-child(1), body#product .marius-pack-reassurance .blockreassurance > .row:first-child > :nth-child(2), body#product .marius-pack-reassurance .blockreassurance > .row:first-child > :nth-child(3) { grid-column: span 2; } /* ====================================================== QUATRIÈME BLOC Deuxième ligne, côté gauche ====================================================== */ body#product .marius-pack-reassurance .blockreassurance > .row:first-child > :nth-child(4) { grid-column: 2 / span 2; } /* ====================================================== CINQUIÈME BLOC Deuxième ligne, côté droit ====================================================== */ body#product .marius-pack-reassurance .blockreassurance > .row:nth-child(2) > :first-child { grid-column: 4 / span 2; } } body#product .marius-pack-reassurance .blockreassurance { gap: 30px 14px !important; } /* ========================================================== PRODUCT CONTAINER - REMOVE ROW GAP ========================================================== */ .page-product .product__container { row-gap: 0; } /* ################################################################################################### */ /* ################################################################################################### */ /* ################################################################################################### */ /* ################################################################################################### */ /* ################################################################################################### */ /* ################################################################################################### */ /* ################################################################################################### */ /* ################################################################################################### */ /* ################################################################################################### */ /* ========================================================== HEADER - RESET HUMMINGBIRD GLOBAL STICKY ========================================================== */ #header, .marius-header-main { position: static !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; transform: none !important; } /* ========================================================== HEADER ANNOUNCEMENT ========================================================== */ .marius-header-announcement { width: 100%; background: #FFFFFA; border-bottom: 1px solid #eee7d8; } .zzz-header-top { max-width: 1320px; margin: 0 auto; padding: 8px 15px; text-align: center; color: #333; font-size: 14px; font-weight: 500; line-height: 1.4; } .marius-header-announcement .zzz-header-top p { margin-bottom: 0 !important; } /* ========================================================== MAIN HEADER ========================================================== */ .marius-header-main { position: relative; z-index: 2; width: 100%; background: #fff; } /* ========================================================== MAIN HEADER ROW ========================================================== */ .marius-header-main__row { min-height: 90px; } /* ========================================================== MAIN HEADER LOGO ========================================================== */ .marius-header-main__logo { display: flex; align-items: center; flex: 0 0 auto; } .marius-header-main__h1 { display: block; margin: 0; } .marius-header-main__logo img { display: block; width: auto; max-width: 100%; height: auto; } /* ========================================================== DESKTOP HEADER LOGO | SEARCH | HELP | ACCOUNT | CART Compatible PS_SEARCHBAR + PRESTAHERO TOTAL SEARCH ========================================================== */ @media (min-width: 768px) { /* ====================================================== HEADER CONTAINER ====================================================== */ .marius-header-main > .container-md { width: 100%; max-width: 100%; padding-left: 15px; padding-right: 15px; } /* ====================================================== HEADER ROW ====================================================== */ .marius-header-main__row { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; width: 100%; min-height: 120px; margin: 0 !important; padding-top: 12px; padding-bottom: 12px; gap: 18px; } /* ====================================================== LOGO ====================================================== */ .marius-header-main__logo { order: 1; display: flex; align-items: center; flex: 0 0 300px !important; width: 300px !important; max-width: 300px !important; margin: 0 !important; padding: 0 !important; } .marius-header-main__logo .navbar-brand { display: block; width: 100%; margin: 0; padding: 0; } .marius-header-main__logo img { display: block; width: 100%; max-width: 300px; height: auto; margin: 0; } /* ====================================================== SEARCH Compatible PS_SEARCHBAR + PRESTAHERO TOTAL SEARCH TAKES ALL AVAILABLE SPACE ====================================================== */ #_desktop_ps_searchbar, .marius-header-main__row > .ets_search_block_top { order: 2 !important; display: flex !important; align-items: center !important; flex: 1 1 500px !important; width: auto !important; min-width: 260px !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } /* ====================================================== PRESTASHOP NATIVE SEARCH ====================================================== */ #_desktop_ps_searchbar #ps_searchbar, #_desktop_ps_searchbar .ps-searchbar, #_desktop_ps_searchbar .ps-searchbar__form { display: block; width: 100% !important; max-width: none !important; margin: 0 !important; } #_desktop_ps_searchbar .ps-searchbar__input { width: 100% !important; } /* ====================================================== PRESTAHERO TOTAL SEARCH ====================================================== */ .marius-header-main__row > .ets_search_block_top .ybc_searchbox { display: block; width: 100% !important; max-width: none !important; margin: 0 !important; } .marius-header-main__row > .ets_search_block_top .ybc_search_query { width: 100% !important; max-width: none !important; margin: 0 !important; } /* ====================================================== HELP / CONTACT ====================================================== */ .marius-header-help { order: 3; display: flex !important; align-items: center; flex: 0 0 auto !important; width: auto; margin: 0 !important; padding: 0 !important; } .marius-header-help__link { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 42px; padding: 0 10px; border: 1px solid #e4e4e4; border-radius: 5px; background: #fff; color: #222; font-size: 14px; font-weight: 500; line-height: 1; text-decoration: none; white-space: nowrap; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .marius-header-help__link:hover, .marius-header-help__link:focus { border-color: #ccc; background: #f8f8f8; color: #111; text-decoration: none; } .marius-header-help__icon { display: block; margin: 0; font-size: 20px; line-height: 1; } .marius-header-help__text { display: inline-block; } /* ====================================================== ACCOUNT ====================================================== */ #_desktop_ps_customersignin { order: 4 !important; display: flex !important; align-items: center !important; flex: 0 0 auto !important; width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } /* ====================================================== CART ====================================================== */ #_desktop_ps_shoppingcart { order: 5 !important; display: flex !important; align-items: center !important; flex: 0 0 auto !important; width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } /* ====================================================== REMOVE BOOTSTRAP COLUMN SIDE EFFECTS ====================================================== */ .marius-header-main__row > .col-auto, .marius-header-main__row > [class*="col-"] { max-width: none; } /* ====================================================== HIDE MOBILE ELEMENTS ON DESKTOP ====================================================== */ .marius-header-main__row > .ps-searchbar--mobile, #_mobile_ps_customersignin, #_mobile_ps_shoppingcart { display: none !important; } } /* ========================================================== DESKTOP LARGE SCREEN MATCH SITE CONTENT WIDTH ========================================================== */ @media (min-width: 1200px) { .marius-header-main > .container-md, .marius-main-nav > .container-md { width: 100%; max-width: 1320px; margin-left: auto; margin-right: auto; } .marius-header-main__row { min-height: 110px; padding-top: 10px; padding-bottom: 10px; column-gap: 16px !important; row-gap: 0 !important; } .marius-header-main__logo { flex: 0 0 350px !important; width: 350px !important; max-width: 350px !important; } .marius-header-main__logo img { max-width: 350px; } /* ====================================================== SEARCH PS_SEARCHBAR + PRESTAHERO TOTAL SEARCH ====================================================== */ #_desktop_ps_searchbar, .marius-header-main__row > .ets_search_block_top { flex: 1 1 500px !important; min-width: 350px !important; margin: 0 !important; } /* ====================================================== HELP / ACCOUNT / CART ====================================================== */ .marius-header-help, #_desktop_ps_customersignin, #_desktop_ps_shoppingcart { flex: 0 0 auto !important; margin: 0 !important; } } /* ========================================================== DESKTOP STICKY SEARCH — TOTAL SEARCH ========================================================== */ .marius-desktop-sticky-search__panel { width: 340px; margin-right: 8px; } /* Neutralise les colonnes Bootstrap de Total Search */ .marius-desktop-sticky-search__panel .ets_search_block_top { position: relative; display: block !important; flex: none !important; width: 100% !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } /* Formulaire */ .marius-desktop-sticky-search__panel .ybc_searchbox { position: relative; display: flex !important; align-items: center; width: 100% !important; height: 40px; margin: 0 !important; padding: 0 !important; } /* Champ */ .marius-desktop-sticky-search__panel .ybc_search_query { display: block; width: 100% !important; min-width: 0 !important; max-width: none !important; height: 40px !important; margin: 0 !important; padding: 0 42px 0 12px !important; border: 1px solid #d9d9d9 !important; border-radius: 5px !important; background: #fff !important; font-size: 14px !important; line-height: 38px !important; outline: none !important; box-shadow: none !important; } .marius-desktop-sticky-search__panel .ybc_search_query:focus { border-color: #777 !important; box-shadow: none !important; } /* Bouton loupe */ .marius-desktop-sticky-search__panel .button-search { position: absolute !important; top: 0 !important; right: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 40px !important; min-width: 40px !important; height: 40px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 5px 5px 0 !important; box-shadow: none !important; } /* SVG loupe */ .marius-desktop-sticky-search__panel .button-search svg { display: block; width: 16px; height: 16px; } /* Résultats AJAX */ .marius-desktop-sticky-search__panel .search_block_results { position: absolute; top: 100%; left: 0; width: 100% !important; min-width: 340px; margin: 0 !important; z-index: 10000; } .marius-desktop-sticky-search__panel .search_block_results .autocomplete-suggestions { width: 100% !important; min-width: 340px !important; border-radius: 0 0 5px 5px !important; } /* ========================================================== STICKY SEARCH — TOTAL SEARCH / FALLBACK NATIF ========================================================== */ /* ---------------------------------------------------------- DESKTOP Total Search présent -> masque le formulaire natif ---------------------------------------------------------- */ .marius-desktop-sticky-search__panel .marius-desktop-sticky-search__total:has(.ets_search_block_top) + .marius-desktop-sticky-search__form { display: none !important; } /* ---------------------------------------------------------- MOBILE Total Search présent -> masque le formulaire natif ---------------------------------------------------------- */ .marius-mobile-sticky-search__total:has(.ets_search_block_top) + .marius-mobile-sticky-search__form { display: none !important; } /* ========================================================== MOBILE STICKY SEARCH — TOTAL SEARCH ========================================================== */ @media (max-width: 767.98px) { .marius-mobile-sticky-search__total { display: block; width: 100%; min-width: 0; margin: 0; padding: 0; } .marius-mobile-sticky-search__total .ets_search_block_top { position: relative; display: block !important; width: 100% !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } .marius-mobile-sticky-search__total .ybc_searchbox { position: relative; display: flex !important; align-items: center; width: 100% !important; height: 40px; margin: 0 !important; padding: 0 !important; } .marius-mobile-sticky-search__total .ybc_search_query { display: block; width: 100% !important; min-width: 0 !important; max-width: none !important; height: 40px !important; margin: 0 !important; padding: 0 42px 0 12px !important; border: 1px solid #d9d9d9 !important; border-radius: 5px !important; background: #fff !important; font-size: 14px !important; line-height: 38px !important; outline: none !important; box-shadow: none !important; } .marius-mobile-sticky-search__total .button-search { position: absolute !important; top: 0 !important; right: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 40px !important; min-width: 40px !important; height: 40px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 5px 5px 0 !important; box-shadow: none !important; } .marius-mobile-sticky-search__total .button-search svg { display: block; width: 16px; height: 16px; } /* * Suggestions Total Search */ .marius-mobile-sticky-search__total .search_block_results { position: absolute; top: 100%; left: 0; width: 100% !important; min-width: 100% !important; margin: 0 !important; z-index: 10000; border-radius: 0 0 5px 5px !important; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08); } .marius-mobile-sticky-search__total .box_button_see { border-radius: 0 0 5px 5px !important; } .marius-mobile-sticky-search__total .search_block_results .autocomplete-suggestions { width: 100% !important; min-width: 100% !important; border-radius: 0 0 5px 5px !important; } } /* ========================================================== TOTAL SEARCH — OVERLAY COMPLET TOUT EST GRIS SAUF TOTAL SEARCH ========================================================== */ /* * Overlay natif Total Search : * conserve le voile sur le contenu de la page. */ .bg_overlay_search.active::before { z-index: 100; } /* * Quand Total Search est actif, * grise également le header principal. */ body:has(.bg_overlay_search.active) .marius-header-main::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.3); z-index: 1000; pointer-events: none; } /* * Le header doit servir de référence * au voile supplémentaire. */ body:has(.bg_overlay_search.active) .marius-header-main { position: relative; } /* * TOTAL SEARCH reste au-dessus du voile du header. */ body:has(.bg_overlay_search.active) .marius-header-main .ets_search_block_top { position: relative !important; z-index: 1001 !important; } /* * Champ de recherche au-dessus. */ body:has(.bg_overlay_search.active) .marius-header-main .ets_search_block_top .ybc_searchbox { position: relative; z-index: 1002; } /* * Suggestions au-dessus. */ body:has(.bg_overlay_search.active) .marius-header-main .ets_search_block_top .search_block_results { z-index: 1002; } .search_block_results .box_button_see { border-radius: 0 0 5px 5px !important; } div.search_block_results .autocomplete-suggestions, div#search_block_keyword .autocompletenew-suggestions { border-radius: 0 0 5px 5px !important; } /* ========================================================== MARIUS - YBC SEARCH ARRONDIS DYNAMIQUE DU CHAMP DE RECHERCHE ========================================================== */ /* État normal */ input.ybc_search_query.search_query_top { border-radius: 5px; } /* Suggestions visibles */ body:has( .search_block_results .autocomplete-suggestions:not([style*="display: none"]) ) input.ybc_search_query.search_query_top { border-radius: 5px 5px 0 0 !important; } /* Bouton de recherche : état normal */ .ets_search_block_top .btn.button-search { border-radius: 0 5px 5px 0 !important; } /* Bouton de recherche : suggestions ouvertes */ body:has( .search_block_results .autocomplete-suggestions:not([style*="display: none"]) ) .ets_search_block_top .btn.button-search { border-bottom-right-radius: 0 !important; } /* Champ de recherche : fermé */ .ets_search_block_top input.search_query.form-control.ybc_search_query.search_query_top { border-radius: 5px 5px 5px 5px !important; } /* Champ de recherche : suggestions ouvertes */ body:has( .search_block_results .autocomplete-suggestions:not([style*="display: none"]) ) .ets_search_block_top input.search_query.form-control.ybc_search_query.search_query_top { border-bottom-left-radius: 0 !important; } /* ========================================================== HEADER / NAV / OFFCANVAS - Z-INDEX LAYERS ========================================================== */ .marius-main-nav, .marius-main-nav.is-sticky { z-index: 1020; } /* ========================================================== ACCOUNT DROPDOWN - ABOVE NAVIGATION BUT BELOW OFFCANVAS CART ========================================================== */ @media (min-width: 768px) { .marius-header-main { position: relative !important; z-index: 1030 !important; } #_desktop_ps_customersignin { position: relative; z-index: 1031; } #_desktop_ps_customersignin .dropdown-menu { z-index: 1035 !important; } } /* ========================================================== BOOTSTRAP OFFCANVAS CART / MOBILE MENU ABOVE HEADER ========================================================== */ .offcanvas-backdrop { z-index: 1040 !important; } .offcanvas { z-index: 1045 !important; } /* ========================================================== MAIN NAVIGATION ========================================================== */ .marius-main-nav { position: relative; z-index: 1020; width: 100%; background: #fff; border-top: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; } /* ========================================================== MAIN NAVIGATION ROW ========================================================== */ .marius-main-nav__row { display: flex; align-items: stretch; width: 100%; } /* ========================================================== MAIN NAVIGATION MENU ========================================================== */ .marius-main-nav__menu { display: flex; align-items: stretch; flex: 1 1 auto; min-width: 0; } /* ========================================================== MAIN NAVIGATION - STICKY ========================================================== */ .marius-main-nav.is-sticky { position: fixed; top: 0; right: 0; left: 0; width: 100%; z-index: 1020; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } /* ========================================================== MAIN NAVIGATION PLACEHOLDER ========================================================== */ .marius-main-nav-placeholder { display: none; width: 100%; } .marius-main-nav-placeholder.is-active { display: block; } /* ========================================================== MOBILE STICKY SEARCH HIDDEN BY DEFAULT ========================================================== */ .marius-mobile-sticky-search { display: none; } /* ========================================================== DESKTOP STICKY SEARCH HIDDEN BY DEFAULT ========================================================== */ .marius-desktop-sticky-search { display: none; } /* ========================================================== STICKY CART ========================================================== */ .marius-main-nav__cart { flex: 0 0 auto; } .marius-sticky-cart { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 48px; height: 100%; padding: 0.5rem 0.75rem; color: inherit; text-decoration: none; white-space: nowrap; } .marius-sticky-cart:hover, .marius-sticky-cart:focus { color: inherit; text-decoration: none; } .marius-sticky-cart__icon { margin: 0; font-size: 24px; line-height: 1; } .marius-sticky-cart__count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; margin-left: 4px; font-size: 12px; line-height: 1; } /* ========================================================== DESKTOP STICKY CART ========================================================== */ @media (min-width: 768px) { .marius-main-nav__cart { display: none; } .marius-main-nav.is-sticky .marius-main-nav__cart { display: flex; align-items: stretch; margin-left: 0; } } /* ========================================================== DESKTOP STICKY SEARCH ========================================================== */ @media (min-width: 768px) { .marius-main-nav.is-sticky .marius-desktop-sticky-search { position: relative; display: flex; align-items: center; flex: 0 0 auto; margin-left: auto; } /* ====================================================== SEARCH TOGGLE ====================================================== */ .marius-desktop-sticky-search__toggle { display: flex; align-items: center; justify-content: center; width: 46px; min-width: 46px; height: 46px; margin: 0; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; } .marius-desktop-sticky-search__toggle:hover, .marius-desktop-sticky-search__toggle:focus { background: #f7f7f7; } .marius-desktop-sticky-search__toggle .material-icons { margin: 0; font-size: 24px; line-height: 1; } /* ====================================================== SEARCH PANEL ====================================================== */ .marius-desktop-sticky-search__panel { display: none; width: 340px; margin-right: 8px; } .marius-desktop-sticky-search.is-open .marius-desktop-sticky-search__panel { display: block; } .marius-desktop-sticky-search.is-open .marius-desktop-sticky-search__toggle { display: none; } /* ====================================================== SEARCH FORM ====================================================== */ .marius-desktop-sticky-search__form { position: relative; display: flex; align-items: center; width: 100%; height: 40px; margin: 0; padding: 0; } .marius-desktop-sticky-search__input { display: block; width: 100%; min-width: 0; height: 40px; margin: 0; padding: 0 42px 0 12px; border: 1px solid #d9d9d9; border-radius: 5px; background: #fff; font-size: 14px; line-height: 38px; outline: none; } .marius-desktop-sticky-search__input:focus { border-color: #777; } .marius-desktop-sticky-search__submit { position: absolute; top: 0; right: 0; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; } .marius-desktop-sticky-search__submit .material-icons { margin: 0; font-size: 21px; line-height: 1; } } /* ========================================================== MOBILE HEADER ========================================================== */ @media (max-width: 767.98px) { /* ====================================================== HIDE ORIGINAL HUMMINGBIRD MOBILE ACTIONS ====================================================== */ #header .marius-header-main .ps-searchbar--mobile, #header .marius-header-main #_mobile_ps_customersignin, #header .marius-header-main #_mobile_ps_shoppingcart { display: none !important; visibility: hidden !important; width: 0 !important; height: 0 !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; } /* ====================================================== MOBILE ANNOUNCEMENT ====================================================== */ .zzz-header-top { padding: 7px 12px; font-size: 12px; line-height: 1.35; } /* ====================================================== MOBILE MAIN HEADER ====================================================== */ .marius-header-main { width: 100%; background: #fff; border-bottom: 0; } .marius-header-main > .container-md { width: 100%; padding-left: 15px; padding-right: 15px; } #header .marius-header-main .marius-header-main__row { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: center !important; width: 100%; min-height: 0 !important; margin: 0 !important; padding-top: 14px !important; padding-bottom: 14px !important; gap: 0 !important; } /* ====================================================== KEEP ONLY LOGO ====================================================== */ #header .marius-header-main .marius-header-main__row > :not(.marius-header-main__logo) { display: none !important; } /* ====================================================== MOBILE LOGO ====================================================== */ #header .marius-header-main .marius-header-main__logo { display: flex !important; align-items: center !important; justify-content: center !important; flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; } #header .marius-header-main .marius-header-main__logo .navbar-brand { display: block !important; width: auto; margin: 0 auto !important; padding: 0 !important; } #header .marius-header-main .marius-header-main__logo img { display: block; width: auto; height: auto; max-width: min(88vw, 360px); max-height: 105px; margin: 0 auto; } /* ====================================================== HIDE DESKTOP HELP ====================================================== */ .marius-header-help { display: none !important; } /* ====================================================== HIDE DESKTOP STICKY SEARCH ====================================================== */ .marius-desktop-sticky-search { display: none !important; } /* ====================================================== MOBILE COMPACT NAVIGATION ====================================================== */ .marius-main-nav { width: 100%; background: #fff; border-top: 1px solid #efefef; border-bottom: 1px solid #e8e8e8; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02); } .marius-main-nav > .container-md { width: 100%; padding-left: 10px; padding-right: 10px; } .marius-main-nav__row { display: flex; align-items: center; width: 100%; min-height: 60px; gap: 8px; padding-top: 8px; padding-bottom: 8px; } /* ====================================================== MOBILE MENU ====================================================== */ .marius-main-nav__menu { display: flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; min-width: 44px; } .marius-main-nav__menu .ps-mainmenu { display: flex; align-items: center; justify-content: center; width: 44px; padding: 0; } .marius-main-nav__menu .ps-mainmenu__mobile-toggle { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; } .marius-main-nav__menu .menu-toggle { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 1px solid #e3e3e3; border-radius: 5px; background: #fff; color: #222; text-decoration: none; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } .marius-main-nav__menu .menu-toggle:hover, .marius-main-nav__menu .menu-toggle:focus { background: #f8f8f8; border-color: #d2d2d2; color: #111; } /* ====================================================== CUSTOM HAMBURGER ====================================================== */ .marius-main-nav__menu .menu-toggle .material-icons { position: relative; display: block; width: 22px; height: 16px; margin: 0 !important; padding: 0 !important; overflow: hidden; font-size: 0 !important; line-height: 0 !important; } .marius-main-nav__menu .menu-toggle .material-icons::before { content: ""; position: absolute; top: 1px; left: 0; width: 22px; height: 2px; border-radius: 2px; background: #222; box-shadow: 0 6px 0 #222, 0 12px 0 #222; } /* ====================================================== MOBILE SEARCH ====================================================== */ .marius-mobile-sticky-search { display: block; flex: 1 1 auto; min-width: 0; } .marius-mobile-sticky-search__form { position: relative; display: flex; align-items: center; width: 100%; height: 44px; margin: 0; padding: 0; } .marius-mobile-sticky-search__input { display: block; width: 100%; min-width: 0; height: 44px; margin: 0; padding: 0 46px 0 14px; border: 1px solid #dedede; border-radius: 5px; background: #fafafa; font-size: 14px; line-height: 42px; outline: none; } .marius-mobile-sticky-search__input:focus { border-color: #8b8b8b; background: #fff; box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.04); } .marius-mobile-sticky-search__button { position: absolute; top: 0; right: 0; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; background: transparent; color: #222; cursor: pointer; } .marius-mobile-sticky-search__button .material-icons { margin: 0; font-size: 22px; line-height: 1; } /* ====================================================== MOBILE CART ====================================================== */ .marius-main-nav__cart { display: flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; margin-left: 0; } .marius-sticky-cart { position: relative; display: flex; align-items: center; justify-content: center; width: 44px; min-width: 44px; height: 44px; margin: 0; padding: 0; border: 1px solid #e3e3e3; border-radius: 5px; background: #fff; color: #222; text-decoration: none; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); } .marius-sticky-cart:hover, .marius-sticky-cart:focus { background: #f8f8f8; color: #222; text-decoration: none; } .marius-sticky-cart__icon { margin: 0; font-size: 25px; line-height: 1; } .marius-sticky-cart__count { position: absolute; top: -3px; right: -3px; display: flex; align-items: center; justify-content: center; min-width: 19px; height: 19px; margin: 0; padding: 0 5px; border: 2px solid #fff; border-radius: 5px; background: #e53935; color: #fff; font-size: 10px; font-weight: 700; line-height: 15px; } /* ====================================================== MOBILE STICKY STATE ====================================================== */ .marius-main-nav.is-sticky { position: fixed; top: 0; right: 0; left: 0; width: 100%; z-index: 1020; background: rgba(255, 255, 255, 0.98); box-shadow: 0 3px 12px rgba(0, 0, 0, 0.10); } } /* ========================================================== VERY SMALL MOBILE ========================================================== */ @media (max-width: 374.98px) { .marius-main-nav > .container-md { padding-left: 6px; padding-right: 6px; } .marius-main-nav__row { gap: 5px; } .marius-main-nav__menu { flex-basis: 40px; width: 40px; min-width: 40px; } .marius-main-nav__menu .ps-mainmenu, .marius-main-nav__menu .ps-mainmenu__mobile-toggle, .marius-main-nav__menu .menu-toggle { width: 40px; } .marius-mobile-sticky-search__input { padding-left: 10px; padding-right: 40px; font-size: 13px; } .marius-mobile-sticky-search__button { width: 40px; } .marius-main-nav__cart { flex-basis: 40px; width: 40px; } .marius-sticky-cart { width: 40px; min-width: 40px; } } /* ========================================================== MOBILE MENU - WIDTH ========================================================== */ @media (max-width: 767.98px) { #mobileMenu.ps-mainmenu--mobile { width: 90vw !important; max-width: 90vw !important; } } /* ========================================================== MOBILE MENU + MODALS - LOCK BACKGROUND SCROLL ========================================================== */ @media (max-width: 767.98px) { /* ---------------------------------------------------------- MENU MOBILE ---------------------------------------------------------- */ body.offcanvas-open { overflow: hidden !important; position: fixed !important; width: 100%; } #mobileMenu { overscroll-behavior: contain; touch-action: pan-y; } /* ---------------------------------------------------------- MODALES : panier + avis produit + autres modales Bootstrap ---------------------------------------------------------- */ html:has(body.modal-open) { overflow: hidden !important; overscroll-behavior: none !important; } body.modal-open { overflow: hidden !important; position: fixed !important; width: 100% !important; overscroll-behavior: none !important; touch-action: none; } /* Fond gris : aucun scroll / rebond */ body.modal-open .modal-backdrop { touch-action: none !important; overscroll-behavior: none !important; } /* ---------------------------------------------------------- CONTENU DES MODALES : reste scrollable ---------------------------------------------------------- */ #blockcart-modal .modal-content, #post-product-comment-modal .modal-content { overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; } #post-product-comment-modal .modal-dialog { overscroll-behavior: contain; } } /* ========================================================== MOBILE MENU - BACKDROP ========================================================== */ @media (max-width: 767.98px) { .offcanvas-backdrop { touch-action: none; overscroll-behavior: none; } } /* ========================================================== PAGE - KEEP SCROLLBAR SPACE RESERVED ========================================================== */ html { overflow-y: scroll; } /* ========================================================== CART MODAL - KEEP PAGE POSITION STABLE ========================================================== */ @media (min-width: 768px) { body.modal-open { padding-right: 0 !important; } } /* ========================================================== DESKTOP CART - STABLE WIDTH PREVENT HEADER MOVEMENT WHEN COUNT CHANGES ========================================================== */ @media (min-width: 768px) { #_desktop_ps_shoppingcart { flex: 0 0 110px !important; width: 110px !important; min-width: 110px !important; max-width: 110px !important; margin: 0 !important; padding: 0 !important; } #_desktop_ps_shoppingcart .ps-shoppingcart { width: 100%; } #_desktop_ps_shoppingcart .header-block__action-btn { display: flex; align-items: center; justify-content: center; width: 100%; } #_desktop_ps_shoppingcart .header-block__badge { min-width: 26px; text-align: center; font-variant-numeric: tabular-nums; } } /* ========================================================== DESKTOP MEGA MENU - ABOVE PAGE CONTENT ========================================================== */ @media (min-width: 1200px) { .marius-main-nav { z-index: 1020; } .marius-main-nav .submenu { z-index: 1025 !important; } } /* ################################ */ /* ################################ */ /* ################################ */ /* ################################ */ /* ################################ */ /* ################################ */ /* ========================================================== CART PAGE - ASIDE STACKING KEEP MEGA MENU ABOVE CART SUMMARY ========================================================== */ @media (min-width: 1200px) { .page-cart .cart-grid__aside-wrapper { position: sticky; z-index: 1; } .marius-main-nav { z-index: 1020; } .marius-main-nav .submenu { z-index: 1030 !important; } } /* ========================================================== CART DRAWER - PRODUCT ROW ========================================================== */ .marius-cart-drawer__product { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; column-gap: 12px; padding: 16px 0; border-bottom: 1px solid #e8e8e8; } /* ========================================================== CART DRAWER - PRODUCT IMAGE ========================================================== */ .marius-cart-drawer__image { grid-column: 1; grid-row: 1; width: 64px; } .marius-cart-drawer__image img { display: block; width: 64px; height: 64px; object-fit: contain; } /* ========================================================== CART DRAWER - PRODUCT INFO ========================================================== */ .marius-cart-drawer__product-info { grid-column: 2; grid-row: 1; min-width: 0; padding-right: 36px; } .marius-cart-drawer__product-info .blockcart-modal__name { margin: 0 0 4px; font-size: 13px; font-weight: 600; line-height: 1.3; } /* ========================================================== CART DRAWER - PRODUCT ATTRIBUTES ========================================================== */ .marius-cart-drawer__product-info .blockcart-modal__property { margin: 2px 0 0; color: #777; font-size: 12px; line-height: 1.3; } /* ========================================================== CART DRAWER - QUANTITY + PRICE ========================================================== */ .marius-cart-drawer__product-bottom { display: flex; align-items: center; gap: 8px; margin-top: 7px; padding-right: 2px; } .marius-cart-drawer__product-bottom .blockcart-modal__quantity { margin: 0; color: #777; font-size: 12px; line-height: 1.2; } .marius-cart-drawer__product-bottom .blockcart-modal__price { margin-left: auto; font-size: 13px; font-weight: 600; line-height: 1.2; } /* ========================================================== CART DRAWER - REMOVE BUTTON CENTERED VERTICALLY ========================================================== */ .marius-cart-drawer__remove { position: absolute; top: 50%; right: 2px; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin: 0; padding: 0; border: 0; border-radius: 5px; background: transparent; color: #8a8a8a; cursor: pointer; opacity: 0.8; transition: color 0.15s ease, background-color 0.15s ease, opacity 0.15s ease; } .marius-cart-drawer__remove:hover, .marius-cart-drawer__remove:focus-visible { background: #fff0f0; color: #d32f2f; opacity: 1; outline: none; } /* ========================================================== CART DRAWER - REMOVE ICON ========================================================== */ .marius-cart-drawer__remove-icon { display: block; margin: 0; font-size: 17px; line-height: 1; } /* ========================================================== CART DRAWER - REMOVE SPINNER ========================================================== */ .marius-cart-drawer__remove-spinner { display: none; width: 15px; height: 15px; } /* ========================================================== CART DRAWER - REMOVE LOADING ========================================================== */ .marius-cart-drawer__remove.is-loading .marius-cart-drawer__remove-icon { display: none; } .marius-cart-drawer__remove.is-loading .marius-cart-drawer__remove-spinner { display: inline-block; } /* ========================================================== CART PAGE - PRODUCT LINE DESKTOP LAYOUT IMAGE | PRODUCT INFO | QUANTITY + REMOVE + TOTAL ========================================================== */ @media (min-width: 768px) { .page-cart .product-line { display: grid; grid-template-columns: 110px minmax(0, 1fr) 355px; align-items: center; column-gap: 18px; width: 100%; padding: 0; } /* ====================================================== CART PAGE - IMAGE ====================================================== */ .page-cart .product-line__image { grid-column: 1; grid-row: 1; width: 110px; margin: 0; } .page-cart .product-line__image .product-line__img { display: block; width: 110px; height: 110px; object-fit: contain; } /* ====================================================== CART PAGE - CONTENT ====================================================== */ .page-cart .product-line__content { display: contents; } /* ====================================================== CART PAGE - PRODUCT INFO ====================================================== */ .page-cart .product-line__content-left { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; margin: 0; } /* ====================================================== CART PAGE - PRODUCT TITLE ====================================================== */ .page-cart .product-line__content-left > .product-line__title { display: block; margin: 0; color: #222; font-size: 15px; font-weight: 600; line-height: 1.22; text-decoration: none; } .page-cart .product-line__content-left > .product-line__title:hover { color: #0b69f6; text-decoration: none; } /* ====================================================== CART PAGE - ATTRIBUTES ====================================================== */ .page-cart .product-line__item--info { margin: 1px 0 0; color: #777; font-size: 12px; font-style: italic; line-height: 1.25; } .page-cart .product-line__item--info .product-line__item-label, .page-cart .product-line__item--info .product-line__item-value { color: inherit; } /* ====================================================== CART PAGE - AVAILABILITY ====================================================== */ .page-cart .product-line__item--availability { margin: 1px 0 0; } .page-cart .product-line__item-availability-message { display: flex; align-items: center; gap: 3px; font-size: 11px; line-height: 1.2; } .page-cart .product-line__item-availability-icon { margin: 0; font-size: 14px; line-height: 1; } /* ====================================================== CART PAGE - UNIT PRICE ====================================================== */ .page-cart .product-line__item--prices { margin: 2px 0 0; } .page-cart .product-line__item-price { color: #222; font-size: 13px; font-weight: 600; line-height: 1.2; } /* ====================================================== CART PAGE - RIGHT SIDE QUANTITY | REMOVE | TOTAL ====================================================== */ .page-cart .product-line__content-right { grid-column: 3; grid-row: 1; display: grid; grid-template-columns: 120px 30px 100px; align-items: center; justify-content: end; column-gap: 8px; width: 100%; margin: 0; } /* ====================================================== CART PAGE - QUANTITY ====================================================== */ .page-cart .product-line__quantity-button { grid-column: 1; justify-self: end; margin: 0; } .page-cart .quantity-button__group { display: inline-flex; align-items: center; width: auto; margin: 0; } .page-cart .quantity-button__group .btn { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border-color: #ddd; } .page-cart .quantity-button__group .form-control { width: 52px; height: 34px; padding: 0 4px; text-align: center; border-color: #ddd; } /* ====================================================== CART PAGE - REMOVE BUTTON ====================================================== */ .page-cart .product-line__actions { grid-column: 2; position: static; display: flex; align-items: center; justify-content: center; width: 30px; margin: 0; padding: 0; transform: none; } .page-cart .product-line__actions .js-remove-from-cart { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin: 0; padding: 0; border: 0; border-radius: 5px; background: transparent; color: #777; text-decoration: none; cursor: pointer; transition: color 0.15s ease, background-color 0.15s ease; } .page-cart .product-line__actions .js-remove-from-cart .material-icons { display: block; margin: 0; font-size: 17px; line-height: 1; pointer-events: none; } .page-cart .product-line__actions .js-remove-from-cart:hover, .page-cart .product-line__actions .js-remove-from-cart:focus-visible { background: #fff0f0; color: #d32f2f; text-decoration: none; outline: none; } /* ====================================================== CART PAGE - LINE TOTAL ====================================================== */ .page-cart .product-line__price { grid-column: 3; justify-self: end; width: 100px; margin: 0; color: #d32f2f; font-size: 17px; font-weight: 700; line-height: 1.2; text-align: right; white-space: nowrap; } /* ====================================================== CART PAGE - PRODUCT SEPARATOR ====================================================== */ .page-cart .cart__item { border-bottom: 1px solid #e5e5e5; } .page-cart .cart__item:last-child { border-bottom: 0; } } /* ========================================================== CART PAGE - MOBILE PRODUCT LAYOUT ========================================================== */ @media (max-width: 767.98px) { .page-cart .product-line { display: grid; grid-template-columns: 105px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; row-gap: 8px; align-items: start; width: 100%; padding: 0; } /* ====================================================== CART PAGE - MOBILE IMAGE ====================================================== */ .page-cart .product-line__image { grid-column: 1; grid-row: 1; width: 105px; margin: 0; } .page-cart .product-line__image .product-line__img { display: block; width: 105px; height: 105px; object-fit: contain; } /* ====================================================== CART PAGE - MOBILE CONTENT ====================================================== */ .page-cart .product-line__content { display: contents; } .page-cart .product-line__content-left { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; margin: 0; } /* ====================================================== CART PAGE - MOBILE TITLE ====================================================== */ .page-cart .product-line__content-left > .product-line__title { display: block; margin: 0; color: #222; font-size: 15px; font-weight: 600; line-height: 1.25; text-decoration: none; } /* ====================================================== CART PAGE - MOBILE ATTRIBUTES ====================================================== */ .page-cart .product-line__item--info { margin: 2px 0 0; color: #666; font-size: 12px; line-height: 1.3; } .page-cart .product-line__item--info .product-line__item-label, .page-cart .product-line__item--info .product-line__item-value { color: inherit; } /* ====================================================== CART PAGE - MOBILE AVAILABILITY ====================================================== */ .page-cart .product-line__item--availability { margin: 2px 0 0; } .page-cart .product-line__item-availability-message { display: flex; align-items: center; gap: 3px; font-size: 11px; line-height: 1.2; } .page-cart .product-line__item-availability-icon { margin: 0; font-size: 14px; line-height: 1; } /* ====================================================== CART PAGE - MOBILE UNIT PRICE ====================================================== */ .page-cart .product-line__item--prices { margin: 2px 0 0; } .page-cart .product-line__item-price { color: #222; font-size: 13px; font-weight: 600; line-height: 1.2; } /* ====================================================== CART PAGE - MOBILE ACTION ROW QUANTITY | REMOVE | TOTAL ====================================================== */ .page-cart .product-line__content-right { grid-column: 2; grid-row: 2; display: grid; grid-template-columns: 118px 30px minmax(72px, 1fr); align-items: center; column-gap: 8px; width: 100%; margin: 0; } /* ====================================================== CART PAGE - MOBILE QUANTITY ====================================================== */ .page-cart .product-line__quantity-button { grid-column: 1; justify-self: start; margin: 0; } .page-cart .quantity-button__group { display: inline-flex; align-items: center; width: auto; margin: 0; } .page-cart .quantity-button__group .btn { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; } .page-cart .quantity-button__group .form-control { width: 50px; height: 34px; padding: 0 4px; text-align: center; } /* ====================================================== CART PAGE - MOBILE REMOVE ====================================================== */ .page-cart .product-line__actions { grid-column: 2; position: static; display: flex; align-items: center; justify-content: center; width: 30px; margin: 0; padding: 0; transform: none; } .page-cart .product-line__actions .js-remove-from-cart { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin: 0; padding: 0; border: 0; border-radius: 5px; background: transparent; color: #777; text-decoration: none; } .page-cart .product-line__actions .js-remove-from-cart:hover, .page-cart .product-line__actions .js-remove-from-cart:focus-visible { background: #fff0f0; color: #d32f2f; outline: none; } .page-cart .product-line__actions .js-remove-from-cart .material-icons { margin: 0; font-size: 17px; line-height: 1; pointer-events: none; } /* ====================================================== CART PAGE - MOBILE TOTAL ====================================================== */ .page-cart .product-line__price { grid-column: 3; justify-self: end; margin: 0; color: #d32f2f; font-size: 16px; font-weight: 700; line-height: 1.2; text-align: right; white-space: nowrap; } /* ====================================================== CART PAGE - MOBILE SEPARATOR ====================================================== */ .page-cart .cart__item { border-bottom: 1px solid #e5e5e5; } .page-cart .cart__item:last-child { border-bottom: 0; } } /* ========================================================== CART PAGE - REMOVE ICON FORCE CLICK ON REMOVE LINK ========================================================== */ .page-cart .product-line__actions .js-remove-from-cart .material-icons { pointer-events: none !important; } /* ##################### */ /* ##################### */ /* ##################### */ /* ##################### */ /* ##################### */ /* ##################### */ /* ========================================================== CATEGORY PRIX - MINIATURE PRODUIT ========================================================== */ .product-miniature .marius-miniature-price__current { display: flex; flex-wrap: nowrap; align-items: baseline; gap: 4px; white-space: nowrap; } .product-miniature .marius-miniature-price__main { font-size: 18px; line-height: 22px; font-weight: 600; color: #c51f2d; white-space: nowrap; } .product-miniature .marius-miniature-price__ttc { font-size: 14px; line-height: 18px; font-weight: 600; font-style: italic; color: #c51f2d; white-space: nowrap; } .product-miniature .marius-miniature-price__ht { position: relative; top: -3px; font-size: 10px; line-height: 12px; font-weight: 600; font-style: italic; color: #555; white-space: nowrap; } /* Ancien prix + économie */ .product-miniature .marius-miniature-price__old-line { margin-top: -10px; font-size: 13px; line-height: 15px; color: #666; white-space: nowrap; } .product-miniature .marius-miniature-price__old { margin-left: 3px; color: #666; text-decoration: line-through; text-decoration-thickness: 1px; } .product-miniature .marius-miniature-price__discount { margin-left: 3px; color: #4169e1; } /* ========================================================== CATEGORY PRIX - MOBILE Empêche les prix/remises de déborder de la miniature + remise toujours sur une nouvelle ligne ========================================================== */ @media (max-width: 575.98px) { .product-miniature .marius-miniature-price__ht { display: block; flex-basis: 100%; top: 0; margin-left: 0; font-size: 9px; line-height: 11px; font-weight: 600; font-style: italic; color: #555; white-space: nowrap; } .product-miniature .marius-miniature-price__discount { display: block; margin-left: 0; margin-top: 1px; font-size: 11px; line-height: 13px; } .product-miniature .marius-miniature-price__current { flex-wrap: wrap; column-gap: 4px; row-gap: 0; white-space: normal; } .product-miniature .marius-miniature-price__main { font-size: 18px; line-height: 21px; } .product-miniature .marius-miniature-price__ttc { font-size: 13px; line-height: 16px; } .product-miniature .marius-miniature-price__ht { top: -2px; font-size: 9px; line-height: 11px; } .product-miniature .marius-miniature-price__old-line { margin-top: -8px; font-size: 12px; line-height: 14px; white-space: normal; } .product-miniature .marius-miniature-price__discount { display: block; margin-left: 0; margin-top: 1px; } } @media (max-width: 575.98px) { /* ====================================================== PRIX MINIATURES PRODUIT Même disposition que les catégories ====================================================== */ .page-product .product__accessories .marius-miniature-prices, .page-product .ps-viewedproduct .marius-miniature-prices { display: block !important; } /* Prix TTC + HT */ .page-product .product__accessories .marius-miniature-price__current, .page-product .ps-viewedproduct .marius-miniature-price__current { display: flex !important; flex-wrap: wrap !important; align-items: baseline !important; column-gap: 4px !important; row-gap: 0 !important; width: 100% !important; } /* HT obligatoirement sous le prix TTC */ .page-product .product__accessories .marius-miniature-price__ht, .page-product .ps-viewedproduct .marius-miniature-price__ht { flex-basis: 100% !important; width: 100% !important; margin-left: 0 !important; position: relative; top: -2px; font-size: 9px !important; line-height: 11px !important; } /* "au lieu de 18,50 €" = nouvelle ligne */ .page-product .product__accessories .marius-miniature-price__old-line, .page-product .ps-viewedproduct .marius-miniature-price__old-line { display: block !important; width: 100% !important; margin-top: 0 !important; font-size: 12px !important; line-height: 14px !important; white-space: normal !important; } /* Économisez = encore une nouvelle ligne */ .page-product .product__accessories .marius-miniature-price__discount, .page-product .ps-viewedproduct .marius-miniature-price__discount { display: block !important; width: 100% !important; margin-left: 0 !important; font-size: 11px !important; line-height: 13px !important; } } /* ========================================================== CATEGORY SEO DESCRIPTION ========================================================== */ .marius-category-seo { position: relative; width: 100%; margin-top: 24px; padding: 24px; background: #fff; border: 1px solid #dee2e6; border-radius: 5px; } /* ========================================================== CATEGORY SEO - CONTENU FERME ========================================================== */ .marius-category-seo__content { position: relative; max-height: 420px; overflow: hidden; transition: max-height 0.35s ease; } /* ========================================================== CATEGORY SEO - FONDU BAS ========================================================== */ .marius-category-seo:not(.is-expanded) .marius-category-seo__content::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 80px; pointer-events: none; background: linear-gradient( to bottom, rgba(255, 255, 255, 0), #fff ); } /* ========================================================== CATEGORY SEO - CONTENU OUVERT ========================================================== */ .marius-category-seo.is-expanded .marius-category-seo__content { max-height: none; } /* ========================================================== CATEGORY SEO - BOUTON LIRE PLUS ========================================================== */ .marius-category-seo__toggle { display: flex; align-items: center; gap: 4px; margin: 16px 0 0; padding: 6px 0; border: 0; background: transparent; color: #5f8e2f; font-size: 0.875rem; font-weight: 600; cursor: pointer; } .marius-category-seo__toggle:hover { color: #6fb828; text-decoration: underline; } .marius-category-seo__toggle.is-hidden { display: none; } /* ========================================================== CATEGORY SEO - MOBILE ========================================================== */ @media (max-width: 767.98px) { .marius-category-seo { margin-top: 20px; padding: 16px; } .marius-category-seo__content { max-height: 280px; } .marius-category-seo__toggle { margin-top: 12px; } } /* ========================================================== CATEGORY TREE - MOBILE ========================================================== */ @media (max-width: 767.98px) { .ps-categorytree { display: none; } } /* ========================================================== CATEGORY - SOUS-CATEGORIE ========================================================== */ .page-category .category__header h1 { margin-bottom: 0.5rem; } .page-category .subcategory { width: 100%; margin: 0; } .page-category .subcategory__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 32px; width: 100%; } /* ========================================================== CATEGORY - CARTE SOUS-CATEGORIE ========================================================== */ .page-category .subcategory__link { position: relative; display: block; width: 100%; padding: 0; overflow: hidden; border: 1px solid #d9dee5; border-radius: 5px; background: #fff; color: #111; text-decoration: none; transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } .page-category .subcategory__link:hover { border-color: #b7c0ca; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08); transform: translateY(-1px); color: #111; text-decoration: none; } /* ========================================================== CATEGORY - IMAGE SOUS-CATEGORIE ========================================================== */ .page-category .subcategory__link picture { display: block; width: 100%; } .page-category .subcategory__thumbnail { display: block; width: 100%; height: auto; aspect-ratio: 2.4 / 1; margin: 0; object-fit: cover; object-position: center; } /* ========================================================== PRODUCT LIST - LOAD MORE ========================================================== */ .page-category #js-product-list .products__pagination { display: none; } .page-category .marius-load-more { display: flex; justify-content: center; width: 100%; margin-top: 28px; margin-bottom: 48px; } .page-category .marius-load-more__button { display: inline-flex; align-items: center; justify-content: center; min-width: 180px; min-height: 44px; padding: 10px 22px; border: 1px solid #6fb828; border-radius: 5px; background: #fff; color: #5f8e2f; font-weight: 600; line-height: 1.2; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .page-category .marius-load-more__button:hover { border-color: #5f8e2f; background: #6fb828; color: #fff; } .page-category .marius-load-more__button:disabled { opacity: 0.6; cursor: wait; } /* ========================================================== PRODUCT LIST - LOAD MORE MOBILE ========================================================== */ @media (max-width: 767.98px) { .page-category .marius-load-more { margin-top: 22px; margin-bottom: 32px; } .page-category .marius-load-more__button { width: 100%; } } /* ########### */ /* ########### */ /* ########### */ /* ========================================================== CATEGORY - SOUS-CATEGORIE HOVER IMAGE + TITRE ARRONDI ========================================================== */ .page-category .subcategory__link { position: relative; overflow: hidden; } /* léger assombrissement au survol */ .page-category .subcategory__link::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0); pointer-events: none; transition: background-color 0.2s ease; } .page-category .subcategory__link:hover::after { background: rgba(0, 0, 0, 0.50); } /* le titre reste au-dessus du voile */ .page-category .subcategory__name { z-index: 2; border-radius: 5px; background: rgba(255, 255, 255, 0.92); } /* image avec petit effet doux */ .page-category .subcategory__thumbnail { transition: transform 0.25s ease, filter 0.25s ease; } .page-category .subcategory__link:hover .subcategory__thumbnail { /* transform: scale(1.005); */ } /* ========================================================== CATEGORY - NOM SOUS-CATEGORIE ========================================================== */ .page-category .subcategory__name { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 2; display: flex; align-items: center; justify-content: center; min-height: 38px; padding: 8px 12px; /* État normal : gris foncé + texte blanc */ background: rgba(45, 49, 54, 0.85); border: 1px solid rgba(52, 58, 64, 0.85); border-radius: 5px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14); color: #fff; font-size: 1rem; font-weight: 600; line-height: 1.25; text-align: center; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } /* ========================================================== CATEGORY - NOM SOUS-CATEGORIE HOVER ========================================================== */ .page-category .subcategory__link:hover .subcategory__name { background: rgba(255, 255, 255, 0.85); border-color: rgba(255, 255, 255, 0.90); color: #181818; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16); } /* ========================================================== CATEGORY - SOUS-CATEGORIE MOBILE ========================================================== */ @media (max-width: 767.98px) { .page-category .category__header h1 { margin-bottom: 0.5rem; } .page-category .subcategory { margin: 0 0 1rem; } .page-category .subcategory__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding-inline: 0; padding-block: 0; } .page-category .subcategory__link { position: relative; width: 100%; height: 125px; min-height: 0; padding: 0; overflow: hidden; } .page-category .subcategory__link picture { display: block; width: 100%; height: 100%; } .page-category .subcategory__thumbnail { display: block; width: 100%; object-position: center top; padding: 2px; transform-origin: center top; } .page-category .subcategory__name { left: 2px; right: 2px; bottom: 2px; min-height: 38px; padding: 3px 5px 3px 5px; font-size: 0.75rem; font-weight: 600; line-height: 1.2; } } /* ########### */ /* ########### */ /* ########### */ /* ========================================================== MON COMPTE - INFORMATIONS PERSONNELLES Encadrement du formulaire ========================================================== */ #identity #customer-form { padding: 16px; border: 1px solid #dee2e6; border-radius: 5px; background: #fff; } /* ========================================================== WISHLIST - LISTE STYLE CARTES COMPTE ========================================================== */ /* Supprime la grosse carte/ombre qui entoure toutes les listes */ .wishlist-container > .page-content.card.card-block { margin-top: 1.25rem !important; padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } /* Liste */ .wishlist-container .wishlist-list { margin: 0 !important; padding: 0 !important; } /* Une vraie carte par liste */ .wishlist-container .wishlist-list-item { margin: 16px 0 0 0 !important; background: #fff !important; border: 1px solid #dee2e6 !important; border-radius: 5px !important; box-shadow: none !important; overflow: hidden; } /* Contenu de la carte */ .wishlist-container .wishlist-list-item-link { display: flex !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; min-height: 76px; padding: 16px !important; } /* Nom de la liste */ .wishlist-container .wishlist-list-item-title { margin: 0 !important; } /* Actions à droite */ .wishlist-container .wishlist-list-item-right { display: flex !important; align-items: center !important; gap: 8px; } /* ========================================================= COMPTE CLIENT / WISHLIST — Navigation bas de page ========================================================= */ /* Barre commune */ .account-footer-actions, .wishlist-footer-links { display: flex; align-items: center; width: 100%; min-height: 48px; margin-top: 1.5rem; padding: 0.5rem 1rem; background: #fff; border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); } /* Compte : Retour à gauche / Déconnexion à droite */ .account-footer-actions { justify-content: space-between; gap: 0; } /* Wishlist : Retour centré */ .wishlist-footer-links { justify-content: center; } /* Liens */ .account-footer-actions .account-menu__back, .account-footer-actions .account-menu__signout-bottom, .wishlist-footer-links > a { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; margin: 0; padding: 0; background: transparent; border: 0; box-shadow: none; font-size: 0.875rem; font-weight: 400; line-height: 1.25; text-decoration: none; } /* Retour compte + retour wishlist */ .account-footer-actions .account-menu__back, .wishlist-footer-links > a { color: var(--bs-primary); } /* Déconnexion */ .account-footer-actions .account-menu__signout-bottom { margin-left: 0; color: var(--bs-danger); } /* Icônes */ .account-footer-actions .material-icons, .wishlist-footer-links .material-icons { display: inline-flex; align-items: center; justify-content: center; margin: 0; font-size: 1.125rem; line-height: 1; } /* Icônes Retour */ .account-footer-actions .account-menu__back .material-icons, .wishlist-footer-links .material-icons { color: var(--bs-body-color); } /* Icône Déconnexion */ .account-footer-actions .account-menu__signout-bottom .material-icons { color: var(--bs-danger); } /* Hover */ .account-footer-actions .account-menu__back:hover, .wishlist-footer-links > a:hover { color: var(--bs-link-hover-color); text-decoration: none; } .account-footer-actions .account-menu__signout-bottom:hover { color: var(--bs-danger); text-decoration: none; } /* Wishlist détail : masquer le lien Accueil natif */ .wishlist-footer-links > a:nth-child(2) { display: none !important; } /* ========================================================== COMPTE - RGPD / DONNÉES PERSONNELLES Carte cohérente avec les adresses ========================================================== */ .page-content--customer { border: 1px solid #d9dee5; border-radius: 5px; background: #fff; padding: 1rem; } /* Mobile */ @media (max-width: 575.98px) { .page-content--customer { padding: 16px; } } /* ========================================================= /MON-COMPTE ========================================================= */ /* Pas de barre Retour + Déconnexion sur la page principale */ #my-account .account-footer-actions { display: none !important; } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767.98px) { .account-footer-actions, .wishlist-footer-links { min-height: 48px; padding: 0.5rem 0.75rem; } /* Retour à gauche / Déconnexion à droite */ .account-footer-actions { justify-content: space-between; gap: 0; } /* /mon-compte : Déconnexion seule, centrée */ #my-account .account-menu--main .account-menu__link--signout { display: flex !important; align-items: center; justify-content: center !important; gap: 0.5rem; width: 100%; min-height: 48px; margin-top: 1.5rem; padding: 0.5rem 0.75rem; background: #fff !important; border: 1px solid var(--bs-border-color) !important; border-radius: var(--bs-border-radius) !important; color: var(--bs-danger) !important; font-size: 0.875rem; font-weight: 400; line-height: 1.25; text-align: center; text-decoration: none !important; box-shadow: none !important; } #my-account .account-menu--main .account-menu__link--signout .material-icons { display: inline-flex; align-items: center; justify-content: center; margin: 0 !important; font-size: 1.125rem !important; line-height: 1; color: var(--bs-danger) !important; } } /* ========================================================= DESKTOP ========================================================= */ @media (min-width: 768px) { /* /mon-compte : Déconnexion déjà disponible dans le menu latéral, donc inutile dans la grille */ #my-account .account-menu--main > .account-menu__link--signout { display: none !important; } } /* ########### */ /* ########### */ /* ########### */ /* ========================================================= WISHLIST — Navigation bas de page ========================================================= */ .wishlist-footer-links { display: flex; align-items: center; justify-content: center; width: 100%; margin-top: 1.5rem; padding: 0.75rem 1rem; background: #fff; border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); } /* Masquer le lien Accueil natif */ .wishlist-footer-links > a:nth-child(2) { display: none !important; } .wishlist-footer-links > a { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; margin: 0; padding: 0; color: var(--bs-primary); font-size: 0.875rem; font-weight: 400; line-height: 1.5; text-decoration: none; } .wishlist-footer-links .material-icons { margin: 0; font-size: 1.125rem; line-height: 1; color: var(--bs-body-color); } .wishlist-footer-links > a:hover { color: var(--bs-link-hover-color); text-decoration: none; } @media (max-width: 767.98px) { .wishlist-footer-links { padding: 0.75rem; } } /* ========================================================== WISHLIST — MASQUER LE TRI ========================================================== */ .wishlist-products-container .wishlist-products-container-header .sort-by-row { display: none !important; } /* ========================================================== WISHLIST PRODUIT ========================================================== */ .page-product .wishlist-button-add.wishlist-button-product { width: 38px; height: 38px; padding: 6px; border-width: 1px; border-style: solid; border-radius: 50%; } /* ========================================================== WISHLIST - CARTES COMME LISTE CATEGORIE ========================================================== */ .wishlist-products-list .wishlist-product { position: relative; height: 100%; background: #fff !important; border: 1px solid #e6e9ed !important; border-radius: 5px !important; overflow: hidden; box-shadow: none !important; } /* ========================================================== WISHLIST - HOVER DESKTOP ========================================================== */ @media (min-width: 768px) and (hover: hover) and (pointer: fine) { .wishlist-products-list .wishlist-products-item { overflow: visible !important; } .wishlist-products-list .wishlist-product { transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease !important; } .wishlist-products-list .wishlist-products-item:hover .wishlist-product { transform: translateY(-3px) !important; border-color: #d4d9df !important; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.11) !important; } } /* ========================================================== WISHLIST - PRODUCT CARD + PRODUCT PAGE ========================================================== */ @layer ps-modules { /* ====================================================== CARTES PRODUIT ====================================================== */ .product-miniature__image-container { position: relative; } .product-miniature__image-container .wishlist-button-add { position: absolute !important; top: 10px !important; right: 10px !important; z-index: 10; display: flex !important; align-items: center; justify-content: center; width: 40px !important; min-width: 40px !important; height: 40px !important; padding: 0 !important; margin: 0 !important; border: 1px solid #cfd5dc !important; border-radius: 50% !important; background-color: #fff !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.20) !important; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; } .product-miniature__image-container .wishlist-button-add .material-icons { font-size: 24px !important; line-height: 1 !important; color: #d32f2f !important; opacity: 1; visibility: visible; } .product-miniature__image-container .wishlist-button-add:hover { transform: scale(1.06); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.24) !important; } /* ====================================================== FICHE PRODUIT ====================================================== */ .page-product .wishlist-button-product { display: flex !important; align-items: center; justify-content: center; flex: 0 0 40px !important; width: 40px !important; min-width: 40px !important; height: 40px !important; padding: 0 !important; margin: 0 !important; border: 1px solid #cfd5dc !important; border-radius: 50% !important; background-color: #fff !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.20) !important; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; } .page-product .wishlist-button-product .material-icons { font-size: 24px !important; line-height: 1 !important; color: #d32f2f !important; opacity: 1; visibility: visible; } .page-product .wishlist-button-product:hover { transform: scale(1.06); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.24) !important; } } /* ========================================================== CART - MESSAGE SUPPRESSION MOBILE ========================================================== */ @media (max-width: 767.98px) { .js-cart-update-alert { width: 100%; padding-left: calc(var(--bs-gutter-x) * 0.5); padding-right: calc(var(--bs-gutter-x) * 0.5); } .js-cart-update-alert .alert { width: 100%; margin-left: 0; margin-right: 0; } } /* ========================================================== WISHLIST — modales fermées : ne pas intercepter les clics ========================================================== */ .wishlist-modal:not(.show), .wishlist-modal:not(.show) .modal-dialog, .wishlist-modal:not(.show) .modal-content, .wishlist-modal:not(.show) .modal-header, .wishlist-modal:not(.show) .modal-body, .wishlist-modal:not(.show) .modal-footer { pointer-events: none !important; } /* ========================================================== WISHLIST - BOUTON SUPPRIMER ========================================================== */ @layer ps-modules { .wishlist-products-container .wishlist-product-bottom .wishlist-button-add { display: flex !important; align-items: center; justify-content: center; width: 40px !important; min-width: 40px !important; height: 40px !important; padding: 0 !important; margin: 0 !important; border: 1px solid #d32f2f !important; border-radius: 50% !important; background-color: #fff !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18) !important; cursor: pointer; top: 10px !important; right: 10px !important; left: auto !important; bottom: auto !important; scale: 1 !important; transition: box-shadow 0.2s ease, background-color 0.2s ease; } .wishlist-products-container .wishlist-product-bottom .wishlist-button-add:hover, .wishlist-products-container .wishlist-product-bottom .wishlist-button-add:focus, .wishlist-products-container .wishlist-product-bottom .wishlist-button-add:active { top: 10px !important; right: 10px !important; left: auto !important; bottom: auto !important; scale: 1 !important; background-color: #fff5f5 !important; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.24) !important; } .wishlist-products-container .wishlist-product-bottom .wishlist-button-add .material-icons { font-size: 23px !important; line-height: 1 !important; color: #d32f2f !important; transform: scale(1); transform-origin: center center; transition: transform 0.2s ease; } .wishlist-products-container .wishlist-product-bottom .wishlist-button-add:hover .material-icons, .wishlist-products-container .wishlist-product-bottom .wishlist-button-add:focus .material-icons, .wishlist-products-container .wishlist-product-bottom .wishlist-button-add:active .material-icons { transform: scale(1.12); } } /* ========================================================== WISHLIST - CARTES STYLE CATEGORIE / PANIER ========================================================== */ @layer ps-modules { /* ====================================================== CONTENEUR ====================================================== */ .wishlist-products-container { width: 100% !important; max-width: 100% !important; } .wishlist-products-container #content.page-content { padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } /* ====================================================== GRILLE - DESKTOP LARGE : 4 COLONNES ====================================================== */ .wishlist-products-container .wishlist-products-list { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 16px; row-gap: 24px; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } .wishlist-products-container .wishlist-products-item { width: 100% !important; min-width: 0 !important; max-width: none !important; flex: none !important; margin: 0 !important; padding: 0 !important; } /* ====================================================== CARTE ====================================================== */ .wishlist-products-container .wishlist-product { position: relative; display: flex; flex-direction: column; width: 100% !important; max-width: none !important; height: 100%; overflow: hidden; background: #fff; border-radius: 5px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10); transition: transform .25s ease, box-shadow .25s ease; } /* ====================================================== LIEN PRODUIT ====================================================== */ .wishlist-products-container .wishlist-product-link { display: flex !important; flex-direction: column; flex: 1 1 auto; width: 100%; color: inherit !important; text-decoration: none !important; } /* ====================================================== IMAGE - 100 % ====================================================== */ .wishlist-products-container .wishlist-product-image { position: relative; display: block !important; width: 100% !important; height: auto !important; aspect-ratio: 1 / 1; margin: 0 !important; padding: 0 !important; overflow: hidden; background: #fff; } .wishlist-products-container .wishlist-product-image img { position: absolute !important; inset: 0 !important; display: block !important; width: 100% !important; height: 100% !important; min-width: 0 !important; min-height: 0 !important; max-width: none !important; max-height: none !important; margin: 0 !important; padding: 0 !important; object-fit: cover !important; object-position: center center !important; transform: none !important; } /* ====================================================== MASQUER DISPONIBILITE ====================================================== */ .wishlist-products-container .wishlist-product-availability { display: none !important; } /* ====================================================== INFOS ORDRE : 1. TITRE 2. CARACTERISTIQUES 3. PRIX ====================================================== */ .wishlist-products-container .wishlist-product-right { display: flex !important; flex-direction: column !important; flex: 1 1 auto; width: 100%; padding: 14px 12px 8px; } /* ====================================================== TITRE - STYLE PANIER ====================================================== */ .wishlist-products-container .wishlist-product-title { order: 1; display: block !important; margin: 0 0 5px !important; color: #111 !important; font-size: 15px !important; font-weight: 600 !important; line-height: 1.30 !important; white-space: normal !important; overflow: visible !important; } /* ====================================================== CARACTERISTIQUES - SOUS LE TITRE ====================================================== */ .wishlist-products-container .wishlist-product-combinations { order: 2; display: block !important; width: 100%; margin: 0 0 6px !important; } .wishlist-products-container .wishlist-product-combinations-text { display: block !important; width: 100%; margin: 0 !important; color: #777 !important; font-size: 12px !important; font-weight: 400 !important; font-style: italic !important; line-height: 1.35 !important; } /* ====================================================== MASQUER QUANTITE ====================================================== */ .wishlist-products-container .wishlist-product-combinations-text > span { display: none !important; } /* ====================================================== MASQUER CRAYON ====================================================== */ .wishlist-products-container .wishlist-product-combinations > a { display: none !important; } /* ====================================================== PRIX - EN DERNIER ====================================================== */ .wishlist-products-container .wishlist-product-price { order: 3; display: block !important; margin: 0 !important; color: #111 !important; font-size: 17px !important; font-weight: 700 !important; line-height: 1.2 !important; } /* ====================================================== PRIX - COLLÉ EN BAS À GAUCHE ====================================================== */ .wishlist-products-container .wishlist-product-price { order: 3; display: block !important; margin: auto 0 0 !important; padding-top: 16px; color: #111 !important; font-size: 17px !important; font-weight: 700 !important; line-height: 1.2 !important; text-align: left !important; box-shadow: none !important; text-shadow: none !important; } /* ====================================================== BAS DE CARTE ====================================================== */ .wishlist-products-container .wishlist-product-bottom { display: flex; align-items: center; width: 100%; margin-top: auto; padding: 8px 12px 14px; } .wishlist-products-container .wishlist-product-addtocart:hover { background: #2455e6 !important; border-color: #2455e6 !important; color: #fff !important; } /* ====================================================== POUBELLE ====================================================== */ .wishlist-products-container .wishlist-product-bottom .wishlist-button-add { position: absolute !important; top: 10px !important; right: 10px !important; bottom: auto !important; left: auto !important; z-index: 10; display: flex !important; align-items: center; justify-content: center; width: 40px !important; min-width: 40px !important; height: 40px !important; margin: 0 !important; padding: 0 !important; border: 1px solid #d32f2f !important; border-radius: 50% !important; background: #fff !important; box-shadow: 0 2px 8px rgba(0, 0, 0, .18) !important; scale: 1 !important; } .wishlist-products-container .wishlist-product-bottom .wishlist-button-add .material-icons { margin: 0 !important; color: #d32f2f !important; font-size: 23px !important; line-height: 1 !important; transform: scale(1); transform-origin: center center; transition: transform .2s ease; } .wishlist-products-container .wishlist-product-bottom .wishlist-button-add:hover .material-icons { transform: scale(1.12); } /* ====================================================== HOVER CARTE ====================================================== */ @media (hover: hover) and (pointer: fine) { .wishlist-products-container .wishlist-product:hover { transform: translateY(-6px); box-shadow: 0 10px 22px -4px rgba(0, 0, 0, .18); } } /* ====================================================== DESKTOP MOYEN : 3 COLONNES ====================================================== */ @media (max-width: 1199.98px) { .wishlist-products-container .wishlist-products-list { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 18px; row-gap: 24px; } } /* ====================================================== TABLETTE : 2 COLONNES ====================================================== */ @media (max-width: 991.98px) { .wishlist-products-container .wishlist-products-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; row-gap: 22px; } } /* ====================================================== MOBILE : 2 COLONNES ====================================================== */ @media (max-width: 575.98px) { /* ================================================== GRILLE ================================================== */ .wishlist-products-container .wishlist-products-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 10px; row-gap: 16px; } /* ================================================== CARTE ================================================== */ .wishlist-products-container .wishlist-product { width: 100% !important; min-width: 0 !important; height: 100% !important; } /* ================================================== IMAGE ================================================== */ .wishlist-products-container .wishlist-product-image { position: relative !important; display: block !important; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; aspect-ratio: 1 / 1 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; } .wishlist-products-container .wishlist-product-image img { position: absolute !important; inset: 0 !important; display: block !important; width: 100% !important; height: 100% !important; min-width: 0 !important; min-height: 0 !important; max-width: none !important; max-height: none !important; margin: 0 !important; padding: 0 !important; object-fit: cover !important; object-position: center center !important; transform: none !important; } /* ================================================== INFOS ================================================== */ .wishlist-products-container .wishlist-product-right { display: flex !important; flex-direction: column !important; width: 100% !important; padding: 10px 8px 6px !important; } /* ================================================== TITRE MOBILE ================================================== */ .wishlist-products-container .wishlist-product-title { order: 1; display: block !important; margin: 0 0 4px !important; color: #111 !important; font-size: 13px !important; font-weight: 600 !important; line-height: 1.30 !important; overflow: visible !important; white-space: normal !important; } /* ================================================== CARACTERISTIQUES MOBILE ================================================== */ .wishlist-products-container .wishlist-product-combinations { order: 2; display: block !important; margin: 0 0 5px !important; } .wishlist-products-container .wishlist-product-combinations-text { margin: 0 !important; color: #777 !important; font-size: 10.5px !important; font-weight: 400 !important; font-style: italic !important; line-height: 1.30 !important; } /* ================================================== PRIX MOBILE - EN DERNIER ================================================== */ .wishlist-products-container .wishlist-product-price { order: 3; display: block !important; margin: 0 !important; color: #111 !important; font-size: 15px !important; font-weight: 700 !important; line-height: 1.2 !important; } /* ================================================== PRIX MOBILE - COLLÉ EN BAS À GAUCHE ================================================== */ .wishlist-products-container .wishlist-product-price { order: 3; display: block !important; margin: auto 0 0 !important; padding-top: 12px; color: #111 !important; font-size: 15px !important; font-weight: 700 !important; line-height: 1.2 !important; text-align: left !important; box-shadow: none !important; text-shadow: none !important; } /* ================================================== BAS DE CARTE ================================================== */ .wishlist-products-container .wishlist-product-bottom { width: 100%; margin-top: auto; padding: 8px 8px 10px !important; } /* ================================================== POUBELLE ================================================== */ .wishlist-products-container .wishlist-product-bottom .wishlist-button-add { top: 7px !important; right: 7px !important; width: 36px !important; min-width: 36px !important; height: 36px !important; } .wishlist-products-container .wishlist-product-bottom .wishlist-button-add .material-icons { font-size: 21px !important; } } } /* ====================================================== AJOUTER AU PANIER — MASQUÉ ====================================================== */ .wishlist-products-container .wishlist-product-addtocart { display: none !important; } /* ========================================================= WISHLIST — Évaluations ========================================================= */ .marius-wishlist-review { display: flex; align-items: center; gap: 6px; margin-top: 6px; margin-bottom: 6px; line-height: 1; } .marius-wishlist-stars { position: relative; display: inline-block; font-size: 16px; line-height: 1; letter-spacing: 1px; white-space: nowrap; } .marius-wishlist-stars__empty { color: #d9d9d9; } .marius-wishlist-stars__filled { position: absolute; top: 0; left: 0; overflow: hidden; color: #f5a623; white-space: nowrap; } .marius-wishlist-review__count { font-size: 12px; line-height: 1.2; color: #6c757d; } /* ######### */ /* ######### */ /* ######### */ /* ========================================================== MOBILE MENU - CUSTOMER AREA ========================================================== */ @layer ps-modules { .marius-mobile-account { width: 100%; align-self: stretch; list-style: none; margin: 0; padding: 0; } @media (max-width: 1199.98px) { /* ================================================== SEPARATEUR ================================================== */ .marius-mobile-account__separator { height: 1px; margin: 8px 24px 6px !important; padding: 0 !important; background: #e2e5e9; list-style: none; } /* ================================================== ITEM ================================================== */ .marius-mobile-account__item { margin: 0 !important; padding: 0 20px !important; list-style: none; } /* ================================================== LIEN ================================================== */ .marius-mobile-account__link { display: flex !important; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 5px 8px !important; color: #222 !important; text-decoration: none !important; border-radius: 5px; transition: background-color .18s ease, color .18s ease; } /* ================================================== HOVER ================================================== */ .marius-mobile-account__link:hover, .marius-mobile-account__link:focus { background: #f5f7fa; color: #3565ff !important; } /* ================================================== PRINCIPAL ACCOUNT ================================================== */ .marius-mobile-account__item--main .marius-mobile-account__link { min-height: 46px; padding-top: 5px !important; padding-bottom: 5px !important; } /* ================================================== ICON ================================================== */ .marius-mobile-account__icon { flex: 0 0 22px; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; color: #3565ff; font-size: 20px !important; line-height: 1 !important; } /* ================================================== CONTENT ================================================== */ .marius-mobile-account__content { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; } /* ================================================== TITLE ================================================== */ .marius-mobile-account__title { flex: 1 1 auto; min-width: 0; color: inherit; font-size: 14px; font-weight: 500; line-height: 1.2; } /* ================================================== SUBTITLE ================================================== */ .marius-mobile-account__subtitle { display: block; margin-top: 1px; overflow: hidden; color: #777; font-size: 11px; font-weight: 400; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; } /* ================================================== ARROW ================================================== */ .marius-mobile-account__arrow { flex: 0 0 18px; margin-left: auto; color: #3565ff; font-size: 18px !important; line-height: 1 !important; } /* ================================================== REMOVE DEFAULT MENU SIDE EFFECTS ================================================== */ .marius-mobile-account__item::before, .marius-mobile-account__item::after, .marius-mobile-account__separator::before, .marius-mobile-account__separator::after { content: none !important; } } } /* ========================================================== DESKTOP MAIN MENU - ETAT ACTIF / OUVERT ========================================================== */ @media (min-width: 1200px) { /* ------------------------------------------------------ RESET DES CONTOURS INTERNES AU CLIC SOURIS ------------------------------------------------------ */ .marius-main-nav .ps-mainmenu__tree-link:focus:not(:focus-visible), .marius-main-nav .ps-mainmenu__tree-dropdown-toggle:focus:not(:focus-visible) { outline: none !important; box-shadow: none !important; } /* ------------------------------------------------------ MENU OUVERT Un seul contour autour du lien + flèche ------------------------------------------------------ */ .marius-main-nav .ps-mainmenu__tree-item:has( > .ps-mainmenu__tree-item-wrapper .ps-mainmenu__tree-dropdown-toggle[aria-expanded="true"] ) > .ps-mainmenu__tree-item-wrapper { position: relative; z-index: 5; border: 0 !important; border-radius: 5px; background: #fff; box-shadow: inset 0 0 0 2px #3565ff !important; } /* Texte du menu ouvert */ .marius-main-nav .ps-mainmenu__tree-item:has( > .ps-mainmenu__tree-item-wrapper .ps-mainmenu__tree-dropdown-toggle[aria-expanded="true"] ) > .ps-mainmenu__tree-item-wrapper .ps-mainmenu__tree-link { color: #3565ff !important; } /* ------------------------------------------------------ PAGE COURANTE Seulement lorsqu'aucun mega-menu n'est ouvert ------------------------------------------------------ */ .marius-main-nav .ps-mainmenu__tree:not( :has(.ps-mainmenu__tree-dropdown-toggle[aria-expanded="true"]) ) > .ps-mainmenu__tree-item.current > .ps-mainmenu__tree-item-wrapper { position: relative; z-index: 5; border: 0 !important; border-radius: 5px; background: #fff; box-shadow: inset 0 0 0 2px #3565ff !important; } .marius-main-nav .ps-mainmenu__tree:not( :has(.ps-mainmenu__tree-dropdown-toggle[aria-expanded="true"]) ) > .ps-mainmenu__tree-item.current > .ps-mainmenu__tree-item-wrapper .ps-mainmenu__tree-link { color: #3565ff !important; } /* ------------------------------------------------------ AUCUN CONTOUR SUPPLEMENTAIRE SUR LIEN / FLECHE ------------------------------------------------------ */ .marius-main-nav .ps-mainmenu__tree-item > .ps-mainmenu__tree-item-wrapper .ps-mainmenu__tree-link, .marius-main-nav .ps-mainmenu__tree-item > .ps-mainmenu__tree-item-wrapper .ps-mainmenu__tree-dropdown-toggle { border-color: transparent; } /* ------------------------------------------------------ FOCUS CLAVIER CONSERVE ------------------------------------------------------ */ .marius-main-nav .ps-mainmenu__tree-link:focus-visible, .marius-main-nav .ps-mainmenu__tree-dropdown-toggle:focus-visible { outline: 2px solid #3565ff; outline-offset: -3px; box-shadow: none !important; } /* ------------------------------------------------------ MEGA MENU SOUS LE CONTOUR ------------------------------------------------------ */ .marius-main-nav .ps-mainmenu__tree-item > .submenu { z-index: 2; } } /* ####### */ /* ####### */ /* ####### */ /* ####### */ /* ========================================================== PRODUCT CARD - MOBILE MODERN ========================================================== */ @media (max-width: 767.98px) { /* ====================================================== ESPACE ENTRE LES CARTES ====================================================== */ .page-category #js-product-list .products { column-gap: 10px !important; row-gap: 16px !important; } /* ====================================================== MASQUER APERÇU RAPIDE ====================================================== */ .product-miniature__quickview-button, .product-miniature__quickview-touch { display: none !important; } /* ====================================================== CARTE ====================================================== */ .product-miniature { height: 100%; } .product-miniature__inner { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid #e6e9ed; border-radius: 5px; overflow: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); } /* ====================================================== IMAGE ====================================================== */ .product-miniature__top { flex: 0 0 auto; } .product-miniature__image-container { position: relative; overflow: hidden; background: #fff; border-radius: 5px 5px 0 0; } .product-miniature__image-link { display: block; border: 0 !important; border-radius: 0 !important; } .product-miniature__image { display: block; width: 100%; height: auto; transition: transform 0.25s ease; } /* ====================================================== BAS DE CARTE ====================================================== */ .product-miniature__bottom { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; width: 100%; padding: 10px 10px 12px; } /* ====================================================== INFOS ====================================================== */ .product-miniature__infos { flex: 0 0 auto; } /* ====================================================== TITRE ====================================================== */ .product-miniature__title { display: -webkit-box; min-height: 38px; overflow: hidden; color: #2455e6; font-size: 13px; font-weight: 500; line-height: 1.35; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } /* ====================================================== PRIX ====================================================== */ .product-miniature__price { margin-top: 4px; color: #111; font-size: 15px; font-weight: 700; } /* ====================================================== ACTIONS TOUJOURS EN BAS DE LA CARTE ====================================================== */ .product-miniature__actions { flex: 0 0 auto !important; width: 100% !important; margin-top: auto !important; } /* ====================================================== FORMULAIRE [ − | 1 | + ] [ PANIER ] ====================================================== */ .product-miniature__actions .product-miniature__form { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-start !important; width: 100% !important; gap: 6px !important; margin: 0 !important; padding: 0 !important; } /* ====================================================== BLOC QUANTITÉ ====================================================== */ .product-miniature__form > .quantity-button { display: block !important; flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } /* ====================================================== GROUPE − 1 + ====================================================== */ .product-miniature__form .quantity-button__group { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; width: 100% !important; max-width: none !important; height: 38px !important; margin: 0 !important; padding: 0 !important; overflow: hidden; border: 1px solid #d9dee5 !important; border-radius: 5px !important; } /* ====================================================== BOUTONS − ET + ====================================================== */ .product-miniature__form .quantity-button__group .decrement, .product-miniature__form .quantity-button__group .increment { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 34px !important; width: 34px !important; min-width: 34px !important; max-width: 34px !important; height: 38px !important; min-height: 38px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; } /* ====================================================== CHAMP QUANTITÉ ====================================================== */ .product-miniature__form .quantity-button__group .form-control { display: block !important; flex: 1 1 0 !important; width: 1% !important; min-width: 0 !important; height: 38px !important; min-height: 38px !important; margin: 0 !important; padding: 0 2px !important; border-top: 0 !important; border-bottom: 0 !important; border-left: 1px solid #d9dee5 !important; border-right: 1px solid #d9dee5 !important; border-radius: 0 !important; text-align: center !important; font-size: 14px !important; } /* ====================================================== QUANTITÉ MINIATURE - MOBILE Chiffre et boutons +/- plus petits ====================================================== */ @media (max-width: 575.98px) { /* Chiffre quantité */ .product-miniature__form .quantity-button__group .form-control { font-size: 13px !important; line-height: 38px !important; padding: 0 !important; text-align: center !important; position: relative !important; top: -1px !important; } /* Boutons - et + */ .product-miniature__form .quantity-button__group .decrement, .product-miniature__form .quantity-button__group .increment { padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* Symboles - et + */ .product-miniature__form .quantity-button__group .decrement .material-icons, .product-miniature__form .quantity-button__group .increment .material-icons { font-size: 16px !important; line-height: 1 !important; margin: 0 !important; } } /* ========================================================== MARIUS - CENTRAGE VERTICAL FLÈCHES PRODUITS ASSOCIÉS ========================================================== */ @media (max-width: 575px) { .page-product .product__accessories .marius-accessories-arrow { top: 50% !important; transform: translateY(-50%) !important; } } /* ========================================================== ACCESSOIRES - ACTIONS "Vous aimerez aussi" Icône panier seule sur desktop + mobile ========================================================== */ /* Cache toujours le texte */ .page-product .product__accessories .product-miniature__form > .product-miniature__add .product-miniature__add-text { display: none !important; } /* Bouton panier compact */ .page-product .product__accessories .product-miniature__form > .product-miniature__add { flex: 0 0 38px !important; width: 38px !important; min-width: 38px !important; max-width: 38px !important; height: 38px !important; min-height: 38px !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; } /* ========================================================== ACCESSOIRES - MOBILE ========================================================== */ @media (max-width: 575.98px) { /* Quantité prend tout l'espace disponible */ .page-product .product__accessories .product-miniature__form .quantity-button { flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; max-width: none !important; } .page-product .product__accessories .quantity-button__group { width: 100% !important; } /* - et + */ .page-product .product__accessories .quantity-button__group .decrement, .page-product .product__accessories .quantity-button__group .increment { flex: 0 0 44px !important; width: 44px !important; min-width: 44px !important; max-width: 44px !important; } /* Quantité centrale */ .page-product .product__accessories .quantity-button__group .form-control { flex: 1 1 auto !important; width: 1% !important; min-width: 0 !important; text-align: center !important; } /* Panier légèrement plus grand au doigt sur mobile */ .page-product .product__accessories .product-miniature__form > .product-miniature__add { flex: 0 0 44px !important; width: 44px !important; min-width: 44px !important; max-width: 44px !important; height: 38px !important; } /* - et + : largeur fixe */ .page-product .product__accessories .quantity-button__group > .decrement, .page-product .product__accessories .quantity-button__group > .increment { flex: 0 0 38px !important; width: 38px !important; min-width: 38px !important; max-width: 38px !important; padding: 0 !important; } /* Seul le champ quantité s'étire */ .page-product .product__accessories .quantity-button__group > .form-control { flex: 1 1 0 !important; width: 1% !important; min-width: 0 !important; max-width: none !important; text-align: center !important; } } /* ========================================================== MARIUS - HARMONISATION VOUS AIMEREZ AUSSI + DÉJÀ VUS ========================================================== */ /* Même espacement vertical des 2 sections */ .page-product .product__accessories, .page-product .ps-viewedproduct { margin-top: 2em !important; margin-bottom: 2rem !important; } /* Même largeur / structure du contenu */ .page-product .product__accessories .marius-accessories-slider, .page-product .ps-viewedproduct .module-products__list { width: 100% !important; margin: 0 !important; background: #fff !important; border-top: 1px solid #5f8e2f !important; border-right: 1px solid #ebebeb !important; border-bottom: 1px solid #ebebeb !important; border-left: 1px solid #ebebeb !important; border-radius: 0 0 5px 5px !important; } /* ========================================================== TITRES IDENTIQUES ========================================================== */ .page-product .product__accessories .section-title, .page-product .ps-viewedproduct .section-title { position: relative !important; z-index: 1; display: table !important; margin: 0 !important; padding: 8px 18px !important; font-family: "Montserrat", sans-serif !important; font-size: 17px !important; font-weight: 600 !important; line-height: 18px !important; letter-spacing: .15px; text-transform: uppercase; white-space: nowrap; color: #fff !important; background: linear-gradient( to bottom, #6fb828 0%, #5f8e2f 100% ) !important; border: 1px solid #5f862f !important; border-bottom: 0 !important; border-radius: 5px 5px 0 0 !important; box-shadow: 0 0 4px rgba(0, 0, 0, .27); } .page-product .product__accessories .section-title::after, .page-product .ps-viewedproduct .section-title::after { content: none !important; } /* ========================================================== MÊME LISTE HORIZONTALE ========================================================== */ .page-product .product__accessories .marius-accessories-slider > .products, .page-product .ps-viewedproduct .module-products__list > .products { display: flex !important; flex-wrap: nowrap !important; gap: 16px !important; width: 100% !important; margin: 0 !important; padding: 12px 12px 22px !important; overflow-x: auto !important; overflow-y: hidden !important; scroll-snap-type: x mandatory; scroll-padding-inline: 12px; scroll-behavior: smooth; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .page-product .product__accessories .marius-accessories-slider > .products::-webkit-scrollbar, .page-product .ps-viewedproduct .module-products__list > .products::-webkit-scrollbar { display: none; } /* ========================================================== MÊME LARGEUR DES CARTES DESKTOP = 4 ========================================================== */ .page-product .product__accessories .marius-accessories-slider > .products > .product-miniature, .page-product .ps-viewedproduct .module-products__list > .products > .product-miniature { flex: 0 0 calc((100% - 48px) / 4) !important; min-width: 0 !important; scroll-snap-align: start; border-radius: 5px; } /* TABLETTE = 3 */ @media (max-width: 1199px) { .page-product .product__accessories .marius-accessories-slider > .products > .product-miniature, .page-product .ps-viewedproduct .module-products__list > .products > .product-miniature { flex-basis: calc((100% - 32px) / 3) !important; } } /* PETITE TABLETTE = 2 */ @media (max-width: 767px) { .page-product .product__accessories .marius-accessories-slider > .products > .product-miniature, .page-product .ps-viewedproduct .module-products__list > .products > .product-miniature { flex-basis: calc((100% - 16px) / 2) !important; } } /* ========================================================== DÉJÀ VUS + ACCESSOIRES Toutes les cartes = hauteur de la plus grande ========================================================== */ .page-product .product__accessories .marius-accessories-slider > .products, .page-product .ps-viewedproduct .module-products__list > .products { align-items: stretch !important; } /* Chaque miniature s'étire sur toute la hauteur disponible */ .page-product .product__accessories .marius-accessories-slider > .products > .product-miniature, .page-product .ps-viewedproduct .module-products__list > .products > .product-miniature { height: auto !important; align-self: stretch !important; } /* Le corps de la carte occupe toute la hauteur */ .page-product .product__accessories .product-miniature__container, .page-product .ps-viewedproduct .product-miniature__container { height: 100% !important; display: flex !important; flex-direction: column !important; } /* Les actions quantité/panier restent alignées en bas */ .page-product .product__accessories .product-miniature__form, .page-product .ps-viewedproduct .product-miniature__form { margin-top: auto !important; } /* ========================================================== PRODUIT - DEJA VU + VOUS AIMEREZ AUSSI PRIX MOBILE SUR EXACTEMENT 2 LIGNES ========================================================== */ @media (max-width: 575.98px) { /* LIGNE 1 : 5,65 € TTC (4,71 € HT) */ .page-product .product-miniature .marius-miniature-price__current { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: baseline !important; gap: 0 !important; white-space: nowrap !important; } .page-product .product-miniature .marius-miniature-price__main { flex: 0 0 auto !important; font-size: 22px !important; line-height: 24px !important; } .page-product .product-miniature .marius-miniature-price__ttc { flex: 0 0 auto !important; display: inline !important; margin-left: 7px !important; font-size: 14px !important; line-height: 16px !important; } /* HT reste SUR LA MÊME LIGNE */ .page-product .product-miniature .marius-miniature-price__ht { flex: 0 0 auto !important; flex-basis: auto !important; display: inline !important; width: auto !important; margin-left: 5px !important; position: relative !important; top: -4px !important; font-size: 9px !important; line-height: 10px !important; white-space: nowrap !important; } /* LIGNE 2 : au lieu de 5,95 € (Économisez 5%) */ .page-product .product-miniature .marius-miniature-price__old-line { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: baseline !important; gap: 0 !important; margin-top: 2px !important; font-size: 12px !important; line-height: 14px !important; white-space: nowrap !important; } .page-product .product-miniature .marius-miniature-price__old { flex: 0 0 auto !important; display: inline !important; margin-left: 3px !important; text-decoration: line-through !important; } /* Économisez reste SUR LA MÊME LIGNE */ .page-product .product-miniature .marius-miniature-price__discount { flex: 0 0 auto !important; display: inline !important; width: auto !important; margin-left: 4px !important; font-size: 11px !important; line-height: 13px !important; white-space: nowrap !important; } } /* ========================================================== MOBILE Une grande carte + aperçu de la suivante ========================================================== */ @media (max-width: 575px) { .page-product .product__accessories .marius-accessories-slider > .products > .product-miniature, .page-product .ps-viewedproduct .module-products__list > .products > .product-miniature { flex: 0 0 calc(100% - 42px) !important; min-width: calc(100% - 42px) !important; } } /* ========================================================== DÉJÀ VUS - QUANTITÉ COMPACTE ========================================================== */ /* Le bloc quantité prend l'espace disponible */ .page-product .ps-viewedproduct .product-miniature__form .quantity-button { flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; } /* Groupe complet */ .page-product .ps-viewedproduct .quantity-button__group { display: flex !important; width: 100% !important; min-width: 0 !important; } /* - et + : largeur fixe */ .page-product .ps-viewedproduct .quantity-button__group > .decrement, .page-product .ps-viewedproduct .quantity-button__group > .increment { flex: 0 0 38px !important; width: 38px !important; min-width: 38px !important; max-width: 38px !important; padding: 0 !important; } /* Seul le champ quantité s'étire */ .page-product .ps-viewedproduct .quantity-button__group > .form-control { flex: 1 1 0 !important; width: 1% !important; min-width: 0 !important; max-width: none !important; text-align: center !important; } /* Panier compact */ .page-product .ps-viewedproduct .product-miniature__form > .product-miniature__add { flex: 0 0 44px !important; width: 44px !important; min-width: 44px !important; max-width: 44px !important; height: 38px !important; padding: 0 !important; } /* Pas de texte : icône uniquement */ .page-product .ps-viewedproduct .product-miniature__add-text { display: none !important; } /* ====================================================== FOCUS QUANTITÉ ====================================================== */ .product-miniature__form .quantity-button__group .btn:focus, .product-miniature__form .quantity-button__group .form-control:focus { box-shadow: none !important; } /* ====================================================== BOUTON PANIER ====================================================== */ .product-miniature__form > .product-miniature__add { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 38px !important; width: 38px !important; min-width: 38px !important; max-width: 38px !important; height: 38px !important; min-height: 38px !important; max-height: 38px !important; margin: 0 !important; padding: 0 !important; border-radius: 5px !important; overflow: hidden !important; } /* ====================================================== TEXTE AJOUTER AU PANIER ====================================================== */ .product-miniature__form > .product-miniature__add .product-miniature__add-text { display: none !important; } /* ====================================================== ICÔNE PANIER ====================================================== */ .product-miniature__form > .product-miniature__add .material-icons { display: block !important; margin: 0 !important; font-size: 20px !important; line-height: 1 !important; } /* ====================================================== VOIR DÉTAILS TOUJOURS EN BAS AUSSI ====================================================== */ .product-miniature__details { display: flex; align-items: center; justify-content: center; width: 100% !important; min-height: 38px; padding: 7px 12px; border-radius: 5px; font-size: 12px; font-weight: 500; } } /* ========================================================== PRODUCT CARD - DESKTOP ========================================================== */ /* ========================================================== MARIUS - PRODUCT MINIATURE ALIGNEMENT PRIX + AVIS + ACTIONS EN BAS ========================================================== */ .product-miniature__inner { display: flex; flex-direction: column; height: 100%; } .product-miniature__bottom { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; } .product-miniature__infos { display: flex; flex-direction: column; flex: 1 1 auto; } /* Repousse le prix et les avis vers le bas */ .product-miniature__prices { margin-top: auto; } /* Boutons toujours en bas */ .product-miniature__actions { margin-top: 0; } @media (min-width: 768px) { .product-miniature { overflow: visible; border-radius: 0 !important; background: transparent !important; transform: none !important; box-shadow: none !important; } .product-miniature__inner { position: relative; height: 100%; overflow: hidden !important; background: #fff !important; border: 1px solid #e6e9ed; border-radius: 5px !important; box-shadow: none !important; filter: none !important; outline: none !important; transform: none !important; transition: border-color 0.2s ease; } .product-miniature__inner:hover { border-color: #cfd5dc; box-shadow: none !important; filter: none !important; transform: none !important; } .product-miniature__bottom { padding: 12px; background: transparent !important; border-radius: 0 !important; } } /* ========================================================== PRODUCT CARD - DESKTOP HOVER RELIEF ========================================================== */ @media (min-width: 768px) and (hover: hover) and (pointer: fine) { #js-product-list .product-miniature__inner { transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease !important; } #js-product-list .product-miniature:hover .product-miniature__inner { transform: translateY(-3px) !important; border-color: #d4d9df !important; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.11) !important; } } /* ========================================================== MARIUS - PRODUCT PAGE - MOBILE BUY ROW PrestaShop 9.2 - Design responsive 2026 ========================================================== */ @media (max-width: 767.98px) { /* ====================================================== LIGNE D'ACHAT ====================================================== */ .page-product .product__actions-qty-add { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; width: 100% !important; gap: 7px !important; margin: 0 !important; padding: 0 !important; } /* ====================================================== QUANTITÉ ====================================================== */ .page-product .product__actions-qty-add .product-actions__quantity { flex: 0 0 112px !important; width: 112px !important; min-width: 112px !important; margin: 0 !important; } .page-product .product__actions-qty-add .quantity-button__group { display: flex !important; flex-wrap: nowrap !important; width: 112px !important; height: 44px !important; margin: 0 !important; } .page-product .product__actions-qty-add .quantity-button__group .decrement, .page-product .product__actions-qty-add .quantity-button__group .increment { flex: 0 0 34px !important; width: 34px !important; height: 44px !important; } .page-product .product__actions-qty-add .quantity-button__group .form-control { flex: 1 1 auto !important; min-width: 0 !important; height: 44px !important; padding-left: 2px !important; padding-right: 2px !important; text-align: center !important; } /* ====================================================== BOUTON AJOUTER AU PANIER ====================================================== */ .page-product .product__actions-qty-add .product__add-to-cart { flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; margin: 0 !important; } .page-product .product__actions-qty-add .product__add-to-cart-button { position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-width: 0 !important; height: 44px !important; min-height: 44px !important; margin: 0 !important; padding: 4px 7px 4px 28px !important; white-space: normal !important; overflow-wrap: normal !important; word-break: normal !important; font-size: 12px !important; font-weight: 600 !important; line-height: 1.2 !important; text-align: center !important; } /* ====================================================== ICÔNE PANIER ====================================================== */ .page-product .product__actions-qty-add .product__add-to-cart-button .material-icons { position: absolute !important; top: 50% !important; left: 7px !important; margin: 0 !important; transform: translateY(-50%) !important; font-size: 17px !important; line-height: 1 !important; } /* ====================================================== COEUR / FAVORIS ====================================================== */ .page-product .product__actions-qty-add .wishlist-button-product { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 40px !important; width: 40px !important; min-width: 40px !important; height: 40px !important; margin: 0 !important; align-self: center !important; } } /* ========================================================== PRODUCT PAGE - VERY SMALL MOBILE ========================================================== */ @media (max-width: 389.98px) { /* ====================================================== LIGNE D'ACHAT ====================================================== */ .page-product .product__actions-qty-add { gap: 5px !important; } /* ====================================================== QUANTITÉ ====================================================== */ .page-product .product__actions-qty-add .product-actions__quantity { flex: 0 0 104px !important; width: 104px !important; min-width: 104px !important; } .page-product .product__actions-qty-add .quantity-button__group { width: 104px !important; } .page-product .product__actions-qty-add .quantity-button__group .decrement, .page-product .product__actions-qty-add .quantity-button__group .increment { flex: 0 0 32px !important; width: 32px !important; } /* ====================================================== BOUTON AJOUTER AU PANIER ====================================================== */ .page-product .product__actions-qty-add .product__add-to-cart-button { padding: 4px 5px 4px 24px !important; font-size: 12px !important; line-height: 1.15 !important; } /* ====================================================== ICÔNE PANIER ====================================================== */ .page-product .product__actions-qty-add .product__add-to-cart-button .material-icons { left: 5px !important; font-size: 16px !important; } /* ====================================================== COEUR / FAVORIS ====================================================== */ .page-product .product__actions-qty-add .wishlist-button-product { flex: 0 0 36px !important; width: 36px !important; min-width: 36px !important; height: 36px !important; } } /* ========================================================== PRODUCT PAGE - REASSURANCE - MOBILE COMPACT ICÔNE À GAUCHE / TITRE À DROITE DESCRIPTION MASQUÉE ========================================================== */ @media (max-width: 767.98px) { /* ====================================================== CONTENEUR ====================================================== */ .page-product .marius-product-reassurance .container-blockreassurance { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; } .page-product .marius-product-reassurance .blockreassurance > .row { display: block !important; margin: 0 !important; padding: 0 !important; } /* ====================================================== UNE LIGNE DE RÉASSURANCE ====================================================== */ .page-product .marius-product-reassurance .blockreassurance > .row > [class*="col-"] { display: grid !important; grid-template-columns: 48px minmax(0, 1fr) !important; grid-template-rows: auto !important; column-gap: 4px !important; align-items: center !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 6px 0 !important; text-align: left !important; } /* ====================================================== ICÔNE À GAUCHE ====================================================== */ .page-product .marius-product-reassurance .block-icon { grid-column: 1 !important; grid-row: 1 !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 48px !important; height: 48px !important; margin: 0 !important; padding: 0 !important; align-self: center !important; } .page-product .marius-product-reassurance .block-icon svg, .page-product .marius-product-reassurance .block-icon img { display: block !important; width: 48px !important; max-width: 48px !important; height: 48px !important; max-height: 48px !important; margin: 0 !important; object-fit: contain !important; } /* ====================================================== TITRE À DROITE DE L'ICÔNE ====================================================== */ .page-product .marius-product-reassurance .block-title { grid-column: 2 !important; grid-row: 1 !important; width: 100% !important; margin: 0 !important; padding: 0 !important; font-size: 15px !important; font-weight: 600 !important; line-height: 1.3 !important; text-align: left !important; align-self: center !important; } /* ====================================================== DESCRIPTION MASQUÉE SUR MOBILE ====================================================== */ .page-product .marius-product-reassurance .blockreassurance > .row > [class*="col-"] > p { display: none !important; } } /* ########### */ /* ########### */ /* ########### */ /* ########### */ /* ========================================================== MAIN MENU DESKTOP - MEGA MENU MODERNE PRESTASHOP 9.2 / HUMMINGBIRD ========================================================== */ @media (min-width: 1200px) { /* ====================================================== SOUS-MENU GLOBAL ====================================================== */ .ps-mainmenu__desktop .submenu { width: 100% !important; min-height: 0 !important; height: auto !important; max-height: calc(100vh - 150px) !important; margin: 0 !important; padding: 0 !important; background: #fff !important; border-top: 1px solid #e7eaf0 !important; border-bottom: 1px solid #e3e7ed !important; border-radius: 0 0 10px 10px !important; box-shadow: 0 14px 32px rgba(15, 23, 42, .10) !important; overflow-x: hidden !important; overflow-y: auto !important; } /* ====================================================== CONTENEUR ====================================================== */ .ps-mainmenu__desktop .submenu > .container { width: 100% !important; max-width: 1440px !important; margin: 0 auto !important; padding: 18px 12px 22px 18px !important; } /* ====================================================== LIGNE ====================================================== */ .ps-mainmenu__desktop .submenu__row { display: flex !important; flex-wrap: nowrap !important; align-items: stretch !important; width: 100% !important; margin: 0 !important; --bs-gutter-x: 0 !important; --bs-gutter-y: 0 !important; } /* ====================================================== COLONNE GAUCHE ====================================================== */ .ps-mainmenu__desktop .submenu__left { display: flex !important; flex-direction: column !important; flex: 0 0 300px !important; width: 300px !important; max-width: 300px !important; min-height: 0 !important; margin: 0 !important; padding: 0 20px 0 0 !important; border-right: 1px solid #e6e9ef !important; } /* ====================================================== LIENS GAUCHE ====================================================== */ .ps-mainmenu__desktop .submenu__left-item { position: relative !important; display: flex !important; align-items: center !important; width: 100% !important; min-height: 44px !important; margin: 0 0 4px !important; padding: 10px 14px 10px 14px !important; border: 1px solid transparent !important; border-radius: 5px !important; background: transparent !important; color: #2c3137 !important; font-size: 15px !important; font-weight: 500 !important; line-height: 1.35 !important; text-decoration: none !important; transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease !important; } .ps-mainmenu__desktop .submenu__left-item { box-sizing: border-box !important; } /* ====================================================== FLÈCHE GAUCHE ====================================================== */ .ps-mainmenu__desktop .submenu__left-item[data-ps-has-child="true"] { position: relative !important; padding-right: 35px !important; } .ps-mainmenu__desktop .submenu__left-item[data-ps-has-child="true"]::after { content: "" !important; position: absolute !important; top: 50% !important; right: 14px !important; left: auto !important; width: 7px !important; height: 7px !important; border: 0 !important; border-right: 2px solid #64748b !important; border-bottom: 2px solid #64748b !important; transform: translateY(-50%) rotate(-45deg) !important; transition: border-color .18s ease !important; } /* ====================================================== HOVER GAUCHE ====================================================== */ .ps-mainmenu__desktop .submenu__left-item:hover { background: #f7f9fc !important; border-color: #edf0f5 !important; color: #315ff4 !important; transform: none !important; } .ps-mainmenu__desktop .submenu__left-item[data-ps-has-child="true"]:hover::after { border-right-color: #315ff4 !important; border-bottom-color: #315ff4 !important; transform: translateY(-50%) rotate(-45deg) !important; } /* ====================================================== ONGLET ACTIF ====================================================== */ .ps-mainmenu__desktop .submenu__left-item.active, .ps-mainmenu__desktop .submenu__left-item[aria-selected="true"] { background: #f3f6ff !important; border-color: #e5ebff !important; color: #315ff4 !important; font-weight: 600 !important; transform: none !important; } .ps-mainmenu__desktop .submenu__left-item.active::after, .ps-mainmenu__desktop .submenu__left-item[aria-selected="true"]::after { color: #315ff4 !important; } /* ====================================================== BRANCHE DE LA PAGE COURANTE MAIS NON OUVERTE ====================================================== */ .ps-mainmenu__desktop .submenu__left-item.current:not(.active):not([aria-selected="true"]) { background: transparent !important; border-color: transparent !important; color: #315ff4 !important; font-weight: 600 !important; transform: none !important; } .ps-mainmenu__desktop .submenu__left-item.current:not(.active):not([aria-selected="true"])::after { color: #315ff4 !important; } /* ====================================================== COLONNE DROITE ====================================================== */ .ps-mainmenu__desktop .submenu__right { flex: 1 1 auto !important; width: auto !important; max-width: none !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 2px 0 2px 26px !important; } /* ====================================================== PANNEAUX ====================================================== */ .ps-mainmenu__desktop .submenu__right-items.not-active { display: none !important; } .ps-mainmenu__desktop .submenu__right-items.active { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; column-gap: 18px !important; row-gap: 8px !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } .ps-mainmenu__desktop .submenu__right-items.active > ul { width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } /* ====================================================== LIENS DROITE ====================================================== */ .ps-mainmenu__desktop .submenu__right .menu-item__group-main-item { position: relative !important; display: flex !important; align-items: center !important; width: 100% !important; min-height: 44px !important; padding: 10px 32px 10px 12px !important; border: 1px solid transparent !important; border-radius: 5px !important; background: transparent !important; color: #20242a !important; font-size: 15.5px !important; font-weight: 600 !important; line-height: 1.35 !important; text-decoration: none !important; transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease !important; } /* ====================================================== FLÈCHE DROITE ====================================================== */ .ps-mainmenu__desktop .submenu__right .menu-item__group-main-item::after { content: "→"; position: absolute !important; top: 50% !important; right: 12px !important; opacity: 0 !important; transform: translateY(-50%) translateX(-4px) !important; color: #315ff4 !important; font-size: 16px !important; font-weight: 500 !important; transition: opacity .18s ease, transform .18s ease !important; } /* ====================================================== HOVER DROITE ====================================================== */ .ps-mainmenu__desktop .submenu__right .menu-item__group-main-item:hover { background: #f7f9fc !important; border-color: #edf0f5 !important; color: #315ff4 !important; transform: translateX(2px) !important; } .ps-mainmenu__desktop .submenu__right .menu-item__group-main-item:hover::after { opacity: 1 !important; transform: translateY(-50%) translateX(0) !important; } /* ====================================================== PAGE COURANTE À DROITE ====================================================== */ .ps-mainmenu__desktop .submenu__right .menu-item.current { background: #f3f6ff !important; border-color: #e5ebff !important; color: #315ff4 !important; font-weight: 600 !important; transform: none !important; } .ps-mainmenu__desktop .submenu__right .menu-item.current::after { opacity: 1 !important; transform: translateY(-50%) translateX(0) !important; } /* ====================================================== NIVEAU 4 ====================================================== */ .ps-mainmenu__desktop .submenu__right .menu-item__group--child > li > .menu-item:not(.menu-item__group-main-item) { display: block !important; margin: 1px 0 0 !important; padding: 7px 12px 7px 18px !important; border: 1px solid transparent !important; border-radius: 5px !important; background: transparent !important; color: #5d6672 !important; font-size: 13.5px !important; font-weight: 400 !important; line-height: 1.35 !important; text-decoration: none !important; transition: background-color .18s ease, border-color .18s ease, color .18s ease !important; } .ps-mainmenu__desktop .submenu__right .menu-item__group--child > li > .menu-item:not(.menu-item__group-main-item):hover { background: #f7f9fc !important; border-color: #edf0f5 !important; color: #315ff4 !important; } .ps-mainmenu__desktop .submenu__right .menu-item__group--child > li > .menu-item.current:not(.menu-item__group-main-item) { background: #f3f6ff !important; border-color: #e5ebff !important; color: #315ff4 !important; font-weight: 600 !important; } /* ====================================================== FOCUS ====================================================== */ .ps-mainmenu__desktop .submenu a:focus { outline: none !important; } .ps-mainmenu__desktop .submenu a:focus-visible { outline: 2px solid #315ff4 !important; outline-offset: 2px !important; } /* ====================================================== RESET HAUTEURS ====================================================== */ .ps-mainmenu__desktop .submenu__left, .ps-mainmenu__desktop .submenu__right, .ps-mainmenu__desktop .submenu__right-items, .ps-mainmenu__desktop .submenu__row { height: auto !important; max-height: none !important; } } /* ========================================================== MAIN MENU - MOBILE MODERNE PRESTASHOP 9.2 / HUMMINGBIRD ========================================================== */ @media (max-width: 1199.98px) { /* ====================================================== OFFCANVAS GLOBAL ====================================================== */ .ps-mainmenu--mobile.offcanvas { width: min(92vw, 430px) !important; max-width: 430px !important; background: #fff !important; border: 0 !important; border-right: 1px solid #e7eaf0 !important; box-shadow: 10px 0 32px rgba(15, 23, 42, .12) !important; /* IMPORTANT : empêche le menu de remonter de 52px */ justify-content: flex-start !important; } /* ====================================================== HEADER DU MENU ====================================================== */ .ps-mainmenu--mobile .offcanvas-header { position: relative !important; display: flex !important; align-items: center !important; justify-content: space-between !important; min-height: 72px !important; padding: 14px 22px !important; background: #fff !important; border-bottom: 1px solid #f0f2f5 !important; flex: 0 0 auto !important; } /* ====================================================== BOUTON FERMER ====================================================== */ .ps-mainmenu--mobile .btn-close { display: flex !important; align-items: center !important; justify-content: center !important; width: 40px !important; height: 40px !important; margin: 0 0 0 auto !important; padding: 0 !important; border-radius: 50% !important; background-color: #f7f8fa !important; opacity: .75 !important; transition: background-color .18s ease, opacity .18s ease, transform .18s ease !important; } .ps-mainmenu--mobile .btn-close:hover { background-color: #eef1f5 !important; opacity: 1 !important; transform: rotate(3deg) !important; } /* ====================================================== ZONE MENU ====================================================== */ .ps-mainmenu--mobile .ps-mainmenu__mobile { flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important; background: #fff !important; } .ps-mainmenu--mobile .ps-mainmenu__additionnals { flex: 0 0 auto !important; } /* ====================================================== LISTES ====================================================== */ .ps-mainmenu--mobile .menu__list { margin: 0 !important; padding: 0 !important; list-style: none !important; } /* ====================================================== LI PRINCIPAUX ====================================================== */ .ps-mainmenu--mobile .menu__list > li { position: relative !important; margin: 0 0 4px !important; border-radius: 5px !important; } /* ====================================================== LIENS PRINCIPAUX ====================================================== */ .ps-mainmenu--mobile .menu__link { display: flex !important; align-items: center !important; min-height: 50px !important; padding: 11px 44px 11px 14px !important; border-radius: 5px !important; color: #303740 !important; font-size: 16px !important; font-weight: 500 !important; line-height: 1.35 !important; text-decoration: none !important; transition: background-color .18s ease, color .18s ease !important; } /* ====================================================== HOVER / TOUCH ====================================================== */ .ps-mainmenu--mobile .menu__link:hover { background: #f7f9fc !important; color: #315ff4 !important; } /* ====================================================== CATÉGORIE COURANTE ====================================================== */ .ps-mainmenu--mobile .menu__list > li.current > .menu__link { background: #f3f6ff !important; color: #315ff4 !important; font-weight: 600 !important; } /* ====================================================== BOUTON FLÈCHE À DROITE ====================================================== */ .ps-mainmenu--mobile .menu__toggle-child { position: absolute !important; top: 50% !important; right: 5px !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 40px !important; height: 40px !important; margin: 0 !important; padding: 0 !important; transform: translateY(-50%) !important; border-radius: 50% !important; color: #315ff4 !important; text-decoration: none !important; } .ps-mainmenu--mobile .menu__toggle-child .material-icons { font-size: 22px !important; transition: transform .18s ease !important; } .ps-mainmenu--mobile .menu__toggle-child:hover { background: #f3f6ff !important; } .ps-mainmenu--mobile .menu__toggle-child:hover .material-icons { transform: translateX(2px) !important; } /* ====================================================== SOUS-MENU - HEADER / RETOUR ====================================================== */ .ps-mainmenu--mobile .ps-mainmenu__back-button { display: flex !important; align-items: center !important; min-width: 0 !important; max-width: calc(100% - 52px) !important; margin: 0 !important; } .ps-mainmenu--mobile .js-back-button { position: relative !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; max-width: 100% !important; min-width: 0 !important; min-height: 40px !important; margin: 0 !important; /* même espace gauche / droite */ padding: 7px 34px !important; overflow: visible !important; border-radius: 5px !important; color: #315ff4 !important; font-size: 14px !important; font-weight: 500 !important; text-decoration: none !important; } .ps-mainmenu--mobile .js-back-button .material-icons { position: absolute !important; left: 8px !important; top: 50% !important; margin: 0 !important; transform: translateY(-50%) !important; font-size: 21px !important; } .ps-mainmenu--mobile .js-menu-back-title { display: block !important; min-width: 0 !important; max-width: 100% !important; overflow: visible !important; text-overflow: clip !important; white-space: nowrap !important; text-align: center !important; } .ps-mainmenu--mobile .js-back-button:hover { background: #f3f6ff !important; } /* ========================================================== MOBILE MENU - LIEN CATÉGORIE MÈRE ========================================================== */ #mobileMenu .menu__title { padding: 0 !important; } #mobileMenu .menu__title-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 14px; color: #3568d4; font-weight: 600; text-decoration: none; border-radius: 5px; transition: background-color 0.15s ease, color 0.15s ease; } #mobileMenu .menu__title-link::after { content: none !important; display: none !important; } #mobileMenu .menu__title-link:hover, #mobileMenu .menu__title-link:focus-visible { color: #2857bd; background: #f1f4ff; } #mobileMenu .menu__title-link:active { background: #e8edff; } /* ====================================================== TITRE DU SOUS-MENU ====================================================== */ .ps-mainmenu--mobile .menu__title { margin: 8px 0 14px !important; padding: 0 2px 12px !important; border-bottom: 1px solid #edf0f4 !important; border-radius: 0 !important; color: #15191f !important; font-size: 18px !important; font-weight: 600 !important; line-height: 1.25 !important; } /* ====================================================== SOUS-MENUS ====================================================== */ .ps-mainmenu--mobile .menu--child .menu__link { min-height: 48px !important; padding-top: 10px !important; padding-bottom: 10px !important; font-size: 15.5px !important; font-weight: 500 !important; } /* ====================================================== COMPTE - SÉPARATEUR ====================================================== */ .ps-mainmenu--mobile .marius-mobile-account__separator { height: 1px !important; margin: 18px 10px 14px !important; background: #e5e8ed !important; border: 0 !important; border-radius: 0 !important; } /* ====================================================== LIGNES COMPTE ====================================================== */ .ps-mainmenu--mobile .marius-mobile-account__item { margin: 2px 0 !important; border-radius: 5px !important; } .ps-mainmenu--mobile .marius-mobile-account__link { display: grid !important; grid-template-columns: 34px minmax(0, 1fr) 28px !important; align-items: center !important; min-height: 52px !important; padding: 8px 10px !important; border-radius: 5px !important; color: #252b32 !important; text-decoration: none !important; transition: background-color .18s ease, color .18s ease !important; } .ps-mainmenu--mobile .marius-mobile-account__link:hover { background: #f7f9fc !important; color: #315ff4 !important; } /* ====================================================== ICÔNES COMPTE ====================================================== */ .ps-mainmenu--mobile .marius-mobile-account__icon { display: flex !important; align-items: center !important; justify-content: center !important; width: 32px !important; height: 32px !important; color: #536dfe !important; font-size: 23px !important; } /* ====================================================== TEXTE COMPTE ====================================================== */ .ps-mainmenu--mobile .marius-mobile-account__content { display: flex !important; flex-direction: column !important; min-width: 0 !important; } .ps-mainmenu--mobile .marius-mobile-account__title { color: inherit !important; font-size: 15px !important; font-weight: 500 !important; line-height: 1.3 !important; } .ps-mainmenu--mobile .marius-mobile-account__subtitle { margin-top: 1px !important; color: #77808b !important; font-size: 12.5px !important; font-weight: 400 !important; line-height: 1.25 !important; } /* ====================================================== FLÈCHE COMPTE ====================================================== */ .ps-mainmenu--mobile .marius-mobile-account__arrow { justify-self: end !important; color: #315ff4 !important; font-size: 21px !important; } /* ====================================================== DÉCONNEXION ====================================================== */ .ps-mainmenu--mobile .marius-mobile-account__link--logout { grid-template-columns: 34px minmax(0, 1fr) !important; color: var(--bs-danger) !important; } .ps-mainmenu--mobile .marius-mobile-account__link--logout .marius-mobile-account__icon { display: flex !important; visibility: visible !important; opacity: 1 !important; width: 32px !important; height: 32px !important; color: var(--bs-danger) !important; font-size: 21px !important; line-height: 1 !important; } .ps-mainmenu--mobile .marius-mobile-account__link--logout .marius-mobile-account__title { color: var(--bs-danger) !important; } /* ========================================================== MAIN MENU - MOBILE - ACTIONS BAS ========================================================== */ @media (max-width: 1199.98px) { #mobileMenu .marius-mobile-bottom-actions { display: flex; align-items: center; justify-content: space-between; width: calc(100% - 32px); min-height: 52px; margin: 12px 16px 16px; padding: 6px 14px; list-style: none; background: #fff; border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); } #mobileMenu .marius-mobile-bottom-actions__item { margin: 0; padding: 0; list-style: none; } #mobileMenu .marius-mobile-bottom-actions__link { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; font-size: 14px; font-weight: 400; line-height: 1.2; text-decoration: none !important; } #mobileMenu .marius-mobile-bottom-actions__link .material-icons { font-size: 19px; line-height: 1; } /* Déconnexion */ #mobileMenu .marius-mobile-bottom-actions__link--logout, #mobileMenu .marius-mobile-bottom-actions__link--logout .material-icons { color: #ff4657 !important; } /* Contact */ #mobileMenu .marius-mobile-bottom-actions__link--contact, #mobileMenu .marius-mobile-bottom-actions__link--contact .material-icons { color: #3565ff !important; } } /* ====================================================== FOCUS CLAVIER / ACCESSIBILITÉ ====================================================== */ .ps-mainmenu--mobile a:focus, .ps-mainmenu--mobile button:focus { outline: none !important; } .ps-mainmenu--mobile a:focus-visible, .ps-mainmenu--mobile button:focus-visible { outline: 2px solid #315ff4 !important; outline-offset: 2px !important; } } /* ========================================================== MAIN MENU - MOBILE MODERNE PRESTASHOP 9.2 / HUMMINGBIRD PETITS MOBILES ========================================================== */ @media (max-width: 389.98px) { .ps-mainmenu--mobile.offcanvas { width: 94vw !important; } .ps-mainmenu--mobile .offcanvas-header { padding-left: 16px !important; padding-right: 16px !important; } .ps-mainmenu--mobile .ps-mainmenu__mobile { padding-left: 14px !important; padding-right: 14px !important; } .ps-mainmenu--mobile .marius-mobile-account__link { padding-left: 6px !important; padding-right: 6px !important; } } /* ========================================================== MAIN MENU - MOBILE - CONTACTEZ-NOUS ========================================================== */ @media (max-width: 1199.98px) { #mobileMenu .marius-mobile-contact { width: 100%; padding: 0; } #mobileMenu .marius-mobile-contact__link { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 18px; color: #333; text-decoration: none; } #mobileMenu .marius-mobile-contact__icon { flex: 0 0 auto; color: #5b73ff; font-size: 24px; } #mobileMenu .marius-mobile-contact__title { flex: 1 1 auto; font-size: 16px; } #mobileMenu .marius-mobile-contact__arrow { flex: 0 0 auto; color: #4169e1; font-size: 21px; } } /* ========================================================== PRODUCT - FICHE TECHNIQUE ========================================================== */ .page-product .marius-tech-sheet { display: flex; flex-direction: column; gap: 6px; width: 100%; } /* Une caractéristique */ .page-product .marius-tech-sheet__row { display: grid; grid-template-columns: 2fr 3fr; gap: 8px; } /* Colonne gauche + colonne droite */ .page-product .marius-tech-sheet__name, .page-product .marius-tech-sheet__value { padding: 9px 12px; background: #f1f3f5; font-size: 14px; line-height: 1.4; color: #495057; } /* Nom de la caractéristique */ .page-product .marius-tech-sheet__name { font-weight: 500; } /* Valeur */ .page-product .marius-tech-sheet__value { min-width: 0; } /* ========================================================== MOBILE ========================================================== */ @media (max-width: 575.98px) { .page-product .marius-tech-sheet { gap: 8px; } .page-product .marius-tech-sheet__row { grid-template-columns: 42% minmax(0, 58%); gap: 4px; } .page-product .marius-tech-sheet__name, .page-product .marius-tech-sheet__value { padding: 8px; font-size: 12px; line-height: 1.35; overflow-wrap: anywhere; } .page-product .marius-tech-sheet__name { font-weight: 600; } } /* ========================================================== PRODUCT - DOCUMENTS / TÉLÉCHARGEMENTS ========================================================== */ /* Grille des documents */ .page-product #product_attachments_panel .product__attachments { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; } /* Une carte document */ .page-product #product_attachments_panel .attachment { position: relative; display: flex; flex-direction: column; min-width: 0; height: 100%; margin: 0; padding: 16px; background: #fff; border: 1px solid #dee2e6; border-radius: 5px; box-shadow: none; } /* Nom du document */ .page-product #product_attachments_panel .attachment__name { position: relative; margin: 0 0 8px; padding-left: 22px; font-size: 16px; line-height: 1.35; font-weight: 600; color: #495057; } /* Petit pictogramme document */ .page-product #product_attachments_panel .attachment__name::before { content: ""; position: absolute; top: 3px; left: 3px; width: 11px; height: 16px; border-radius: 1px; background: linear-gradient( 180deg, #67b7e8 0%, #4d91d9 100% ); } /* Description */ .page-product #product_attachments_panel .attachment__description { margin: 0 0 10px; font-size: 14px; line-height: 1.45; color: #6c757d; } /* Lien téléchargement en bas de la carte */ .page-product #product_attachments_panel .attachment__link { position: static; z-index: 1; display: inline-flex; align-items: center; align-self: flex-start; gap: 4px; margin-top: auto; font-size: 13px; line-height: 1.4; color: #6c757d; text-decoration: none; } /* Icône téléchargement */ .page-product #product_attachments_panel .attachment__link .material-icons { font-size: 16px; } /* Survol de la carte */ .page-product #product_attachments_panel .attachment { transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; } .page-product #product_attachments_panel .attachment:hover { border-color: #c7ced6; box-shadow: 0 3px 10px rgba(0, 0, 0, .06); transform: translateY(-1px); } .page-product #product_attachments_panel .attachment:hover .attachment__link { color: #0b69f6; } /* ========================================================== TABLETTE : 2 documents par ligne ========================================================== */ @media (max-width: 991.98px) { .page-product #product_attachments_panel .product__attachments { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } } /* ========================================================== MOBILE : 1 document par ligne ========================================================== */ @media (max-width: 575.98px) { .page-product #product_attachments_panel .product__attachments { grid-template-columns: 1fr; gap: 12px; } .page-product #product_attachments_panel .attachment { padding: 14px; } .page-product #product_attachments_panel .attachment__name { font-size: 15px; } .page-product #product_attachments_panel .attachment__description { font-size: 13px; } } /* ========================================================== PRODUCT - FIN DE DESCRIPTION DOCUMENTS + CONFORMITÉ CE / RED ========================================================== */ /* ---------------------------------------------------------- SÉPARATEUR AVANT LES DOCUMENTS ---------------------------------------------------------- */ .page-product #product_description_panel > hr { width: 100%; margin: 20px 0 10px; border: 0; border-top: 1px solid #d9dee5; opacity: 1; } /* ========================================================== DOCUMENTS JOINTS DANS LA DESCRIPTION ========================================================== */ .page-product #product_description_panel .product-attachments { width: 100%; margin: 0 0 30px; padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; } /* * Grille indépendante de Bootstrap : * 3 cartes desktop / 2 tablette / 1 mobile. */ .page-product #product_description_panel .product-attachments > .row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; width: 100%; margin: 0; padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; } /* Neutralisation des colonnes Bootstrap */ .page-product #product_description_panel .product-attachments .attachment { display: flex; width: auto; max-width: none; min-width: 0; margin: 0; padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; } /* ---------------------------------------------------------- CARTE DOCUMENT ---------------------------------------------------------- */ .page-product #product_description_panel .product-attachments .box-bg { display: flex; width: 100%; min-width: 0; min-height: 180px; height: 100%; margin: 0 !important; padding: 18px; background: #fff; border: 1px solid #dee2e6; border-radius: 5px; box-shadow: none; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; } /* Contenu */ .page-product #product_description_panel .product-attachments figcaption { display: flex; flex-direction: column; flex: 1 1 auto; width: 100%; min-width: 0; } /* Titre */ .page-product #product_description_panel .product-attachments .h5 { margin: 0 0 8px; font-size: 16px; line-height: 1.35; font-weight: 600; } /* Lien du titre */ .page-product #product_description_panel .product-attachments .h5 .li-a { color: #343a40; text-decoration: none; transition: color .2s ease; } /* Description */ .page-product #product_description_panel .product-attachments .atta-desc { margin: 0 0 14px; font-size: 14px; line-height: 1.45; color: #6c757d; } /* Téléchargement aligné en bas */ .page-product #product_description_panel .product-attachments .mb-0 { margin-top: auto !important; font-size: 13px; line-height: 1.4; } /* Lien téléchargement */ .page-product #product_description_panel .product-attachments .mb-0 a { display: inline-flex; align-items: center; gap: 4px; color: #495057; text-decoration: none; transition: color .2s ease; } /* Icône téléchargement */ .page-product #product_description_panel .product-attachments .material-icons { flex: 0 0 auto; font-size: 15px; line-height: 1; } /* ---------------------------------------------------------- HOVER DES CARTES ---------------------------------------------------------- */ @media (hover: hover) and (pointer: fine) { .page-product #product_description_panel .product-attachments .box-bg:hover { border-color: #bfc7d0; box-shadow: 0 4px 14px rgba(0, 0, 0, .07); transform: translateY(-2px); } .page-product #product_description_panel .product-attachments .box-bg:hover .li-a, .page-product #product_description_panel .product-attachments .box-bg:hover .mb-0 a { color: #0b69f6; } } /* ========================================================== TABLETTE ========================================================== */ @media (max-width: 991.98px) { .page-product #product_description_panel .product-attachments > .row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } } /* ========================================================== MOBILE ========================================================== */ @media (max-width: 575.98px) { .page-product #product_description_panel > hr { margin: 16px 0 5px; } .page-product #product_description_panel .product-attachments > .row { grid-template-columns: 1fr; gap: 12px; } .page-product #product_description_panel .product-attachments .box-bg { min-height: 0; padding: 14px; } .page-product #product_description_panel .product-attachments .h5 { font-size: 15px; } .page-product #product_description_panel .product-attachments .atta-desc { font-size: 13px; } } /* ========================================================== CONFORMITÉ CE / RED ========================================================== */ .page-product #product_description_panel .div_product_description_bottom_marius { display: block; width: 100%; margin: 10px 0 0; padding: 0; } /* Texte au-dessus et au-dessous du tableau */ .page-product #product_description_panel .p_product_description_bottom_marius { margin: 0; padding: 0; font-size: 13px; line-height: 1.45; color: #6c757d; } /* Tableau CE / RED */ .page-product #product_description_panel .div_product_description_bottom_marius > table { width: 100%; margin: 6px 0 0; border-collapse: collapse; border-spacing: 0; font-size: 13px; line-height: 1.45; } /* Cellules */ .page-product #product_description_panel .div_product_description_bottom_marius > table th, .page-product #product_description_panel .div_product_description_bottom_marius > table td { padding: 9px 12px; border: 1px solid #e2e6ea; vertical-align: middle; text-align: left; } /* En-tête */ .page-product #product_description_panel .div_product_description_bottom_marius > table thead th { background: #e9eef5; font-weight: 700; color: #222; } /* Alternance des lignes */ .page-product #product_description_panel .div_product_description_bottom_marius > table tbody tr:nth-child(odd) { background: #fff; } .page-product #product_description_panel .div_product_description_bottom_marius > table tbody tr:nth-child(even) { background: #f7f9fc; } /* Liens des normes */ .page-product #product_description_panel .div_product_description_bottom_marius > table td a { color: #76ad2b; text-decoration: none; } .page-product #product_description_panel .div_product_description_bottom_marius > table td a:hover { text-decoration: underline; } /* Liens fabricants */ .page-product #product_description_panel .div_product_description_bottom_marius > .p_product_description_bottom_marius:last-child { margin: 6px 0 0; } .page-product #product_description_panel .div_product_description_bottom_marius > .p_product_description_bottom_marius:last-child a { color: #76ad2b; text-decoration: none; } .page-product #product_description_panel .div_product_description_bottom_marius > .p_product_description_bottom_marius:last-child a:hover { text-decoration: underline; } /* ========================================================== MOBILE ========================================================== */ @media (max-width: 575.98px) { /* Supprime le gutter de .row uniquement sur mobile */ .page-product #product_description_panel .div_product_description_bottom_marius { --bs-gutter-x: 0; } .page-product #product_description_panel .p_product_description_bottom_marius { font-size: 12px; } .page-product #product_description_panel .div_product_description_bottom_marius > table { font-size: 12px; } .page-product #product_description_panel .div_product_description_bottom_marius > table th, .page-product #product_description_panel .div_product_description_bottom_marius > table td { padding: 7px 8px; } } /* ========================================================== EXTRA PROPERTY - CONTENU PRODUIT MARIUS ========================================================== */ /* Conteneur général de l'extra : aucune boîte extérieure */ .page-product .marius-extra-fields-product { border: 0; border-radius: 0; box-shadow: none; background: transparent; padding: 0; width: 100%; font-family: "Montserrat", sans-serif; } /* ========================================================== POINTS ESSENTIELS ========================================================== */ .marius-extra-fields-product .marius-product-essential { overflow: hidden; margin-block-start: 1rem; margin-block-end: 1rem; background: #fff; border: 1px solid #e2e6ea; border-radius: 5px; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05); } /* ========================================================== MARIUS - POINTS ESSENTIELS Alignement vertical des icônes de connectivité ========================================================== */ .marius-extra-fields-product img, .marius-product-essential__content img { display: inline-block; vertical-align: middle; width: 30px; height: 30px; margin: 0 0 6px 0; } /* Titre */ .marius-extra-fields-product .marius-product-essential__title { margin: 0; padding: 15px 20px; background: #e9eef5; border-bottom: 1px solid #e2e6ea; font-size: 18px; line-height: 24px; font-weight: 700; color: #222; text-align: center; } /* Liste */ .marius-extra-fields-product .marius-product-essential__list { display: flex; flex-direction: column; } /* Une caractéristique */ .marius-extra-fields-product .marius-product-essential__row { display: flex; align-items: center; gap: 14px; min-height: 58px; padding: 11px 18px; border-bottom: 1px solid #eceff2; } .marius-extra-fields-product .marius-product-essential__row:last-child { border-bottom: 0; } /* ✓ */ .marius-extra-fields-product .marius-product-essential__icon { display: flex; align-items: center; justify-content: center; flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; background: #eaf7ef; color: #188251; font-size: 17px; line-height: 1; font-weight: 700; } /* Texte */ .marius-extra-fields-product .marius-product-essential__content { display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px; min-width: 0; font-size: 14px; line-height: 20px; color: #555; } .marius-extra-fields-product .marius-product-essential__content strong { color: #222; font-weight: 700; } .marius-extra-fields-product .marius-product-essential__content strong::after { content: " —"; color: #aaa; } /* ========================================================== APPLICATION PRODUIT ========================================================== */ .marius-extra-fields-product .marius-product-application { margin-block-start: 1rem; margin-block-end: 1rem; padding: 20px; background: #f7f9fc; border: 1px solid #e2e6ea; border-radius: 5px; text-align: center; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.04); } .marius-extra-fields-product .marius-product-application__intro { max-width: 760px; margin: 0 auto; } .marius-extra-fields-product .marius-product-application__title { margin: 0 0 6px; font-size: 18px; line-height: 24px; font-weight: 700; color: #222; } .marius-extra-fields-product .marius-product-application__text { margin: 0; font-size: 14px; line-height: 21px; color: #666; } /* Boutons stores */ .marius-extra-fields-product .marius-product-application__stores { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 16px; } .marius-extra-fields-product .marius-product-application__store { display: block; width: 220px; max-width: 100%; border-radius: 5px; transition: transform 0.2s ease, box-shadow 0.2s ease; } .marius-extra-fields-product .marius-product-application__store:hover { transform: translateY(-2px); box-shadow: 0 5px 14px rgba(0, 0, 0, 0.14); } .marius-extra-fields-product .marius-product-application__store img { display: block; width: 100%; height: auto; border-radius: 5px; } /* ========================================================== MOBILE ========================================================== */ @media (max-width: 575.98px) { .marius-extra-fields-product .marius-product-essential { margin-bottom: 14px; border-radius: 5px; } .marius-extra-fields-product .marius-product-essential__title { padding: 13px 14px; font-size: 16px; line-height: 21px; } .marius-extra-fields-product .marius-product-essential__row { align-items: flex-start; min-height: 0; padding: 10px; gap: 10px; } .marius-extra-fields-product .marius-product-essential__icon { flex-basis: 26px; width: 26px; height: 26px; margin-top: 1px; font-size: 15px; } .marius-extra-fields-product .marius-product-essential__content { display: block; font-size: 13px; line-height: 18px; } .marius-extra-fields-product .marius-product-essential__content strong { display: block; margin-bottom: 1px; font-size: 13px; line-height: 18px; } .marius-extra-fields-product .marius-product-essential__content strong::after { content: ""; } /* Application produit */ .marius-extra-fields-product .marius-product-application { padding: 14px 10px; border-radius: 5px; } .marius-extra-fields-product .marius-product-application__title { font-size: 16px; line-height: 21px; } .marius-extra-fields-product .marius-product-application__text { font-size: 13px; line-height: 18px; } .marius-extra-fields-product .marius-product-application__stores { gap: 8px; margin-top: 14px; } .marius-extra-fields-product .marius-product-application__store { width: calc(50% - 4px); } } /* ========================================================== VIDEOS PRODUIT ========================================================== */ .marius-extra-fields-product .marius-product-videos { margin-block-start: 1rem; margin-block-end: 1rem; width: 100%; overflow: hidden; padding: 0; background: #fff; border: 1px solid #e2e6ea; border-radius: 5px; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05); } /* Titre */ .marius-extra-fields-product .marius-product-videos__title { margin: 0; padding: 15px 20px; background: #e9eef5; border-bottom: 1px solid #e2e6ea; font-size: 18px; line-height: 24px; font-weight: 700; color: #222; text-align: center; } /* ========================================================== GRILLE VIDEOS PRODUIT ========================================================== */ .marius-extra-fields-product .marius-product-videos__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: 16px; } /* Une seule vidéo */ .marius-extra-fields-product .marius-product-video:only-child { grid-column: 1 / -1; width: 50%; justify-self: center; } /* Exactement deux vidéos */ .marius-extra-fields-product .marius-product-videos__grid:has(> .marius-product-video:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* ========================================================== TABLETTE ========================================================== */ @media (min-width: 576px) and (max-width: 991.98px) { .marius-extra-fields-product .marius-product-videos__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Lecteur */ .marius-extra-fields-product .marius-product-video:only-child { grid-column: 1 / -1; width: calc(50% - 8px); justify-self: center; } .marius-extra-fields-product .marius-product-video__player { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #000; border-radius: 5px; } .marius-extra-fields-product .marius-product-video__player iframe { display: block; width: 100%; height: 100%; border: 0; } /* ========================================================== MOBILE ========================================================== */ @media (max-width: 575.98px) { .marius-extra-fields-product .marius-product-video:only-child { width: 100%; } .marius-extra-fields-product .marius-product-videos { margin: 14px 0; border-radius: 5px; } .marius-extra-fields-product .marius-product-videos__title { padding: 13px 14px; font-size: 16px; line-height: 21px; } .marius-extra-fields-product .marius-product-videos__grid { grid-template-columns: 1fr; gap: 12px; padding: 10px; } } /* ========================================================== QUESTIONS / RÉPONSES PRODUIT Extra : marius_questions_reponses Harmonisé avec les tableaux .product__description ========================================================== */ .marius-extra-fields-product .marius-product-questions-reponses { width: 100%; margin: 0; font-family: "Montserrat", sans-serif; color: #3d3d3d; } /* ========================================================== BANNIÈRE ========================================================== */ .marius-extra-fields-product .marius-product-questions-reponses > p:first-child { margin: 0 0 12px; padding: 0; } .marius-extra-fields-product .marius-product-questions-reponses .img_long_description_banner { display: block; width: 100%; max-width: 100%; height: auto; margin: 0; border: 0; border-radius: 5px; } /* ========================================================== TABLEAU QUESTIONS / RÉPONSES ========================================================== */ .marius-extra-fields-product .marius-product-questions-reponses table { width: 100%; margin: 5px 0; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-family: "Montserrat", sans-serif; font-size: 13px; font-weight: 400; line-height: 20px; color: #3d3d3d; background-color: #fff; border: 1px solid #dfe5ec; border-radius: 5px; overflow: hidden; } /* ========================================================== CELLULES ========================================================== */ .marius-extra-fields-product .marius-product-questions-reponses table th, .marius-extra-fields-product .marius-product-questions-reponses table td { padding: 10px 12px; border: 0; border-bottom: 1px solid #dfe5ec; text-align: left; vertical-align: middle; } /* Séparation entre Question et Réponse */ .marius-extra-fields-product .marius-product-questions-reponses table th + th, .marius-extra-fields-product .marius-product-questions-reponses table td + td { border-left: 1px solid #dfe5ec; } /* ========================================================== EN-TÊTE Même couleur que les tableaux description ========================================================== */ .marius-extra-fields-product .marius-product-questions-reponses table thead th { padding: 10px 12px; font-weight: 600; text-transform: uppercase; color: #222; background-color: #e9eef5; } /* Question */ .marius-extra-fields-product .marius-product-questions-reponses table thead th:first-child { width: 36%; } /* Réponse */ .marius-extra-fields-product .marius-product-questions-reponses table thead th:last-child { width: 64%; } /* ========================================================== CORPS DU TABLEAU ========================================================== */ .marius-extra-fields-product .marius-product-questions-reponses table tbody td { font-weight: 400; color: #3d3d3d; } /* Question légèrement renforcée */ .marius-extra-fields-product .marius-product-questions-reponses table tbody td:first-child { font-weight: 600; color: #222; } /* ========================================================== LIGNES ALTERNÉES - DESKTOP En-tête = foncé 1re ligne = blanc 2e ligne = foncé 3e ligne = blanc etc. ========================================================== */ .marius-extra-fields-product .marius-product-questions-reponses table tbody tr:nth-child(odd) td { background-color: #fff; } .marius-extra-fields-product .marius-product-questions-reponses table tbody tr:nth-child(even) td { background-color: #f7f9fc; } /* Dernière ligne */ .marius-extra-fields-product .marius-product-questions-reponses table tbody tr:last-child td { border-bottom: 0; } /* ========================================================== LIENS ========================================================== */ .marius-extra-fields-product .marius-product-questions-reponses table td a { color: inherit; } /* ========================================================== HOVER Identique aux tableaux description ========================================================== */ .marius-extra-fields-product .marius-product-questions-reponses table tbody tr td { transition: background-color .20s ease, box-shadow .20s ease; } @media (hover: hover) and (pointer: fine) { .marius-extra-fields-product .marius-product-questions-reponses table tbody tr:hover td { background-color: #edf4fc; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), inset 0 -1px 0 rgba(11, 105, 246, .08); } } /* ========================================================== QUESTIONS / RÉPONSES - MOBILE L'en-tête disparaît. Donc : 1re question/réponse = foncé 2e question/réponse = blanc 3e question/réponse = foncé etc. ========================================================== */ @media (max-width: 767.98px) { .marius-extra-fields-product .marius-product-questions-reponses .img_long_description_banner { border-radius: 5px; } .marius-extra-fields-product .marius-product-questions-reponses > p:first-child { margin-bottom: 10px; } /* En-tête inutile en lecture verticale */ .marius-extra-fields-product .marius-product-questions-reponses table thead { display: none; } .marius-extra-fields-product .marius-product-questions-reponses table { display: block; width: 100%; min-width: 0; max-width: 100%; margin: 12px 0 20px; table-layout: auto; font-size: 12px; line-height: 1.35; border: 1px solid #dfe5ec; border-radius: 5px; overflow: hidden; } .marius-extra-fields-product .marius-product-questions-reponses table tbody { display: block; width: 100%; } /* Une question/réponse = une section du grand bloc */ .marius-extra-fields-product .marius-product-questions-reponses table tbody tr { display: block; width: 100%; border: 0; border-bottom: 1px solid #dfe5ec; } /* * MOBILE : * inversion volontaire de l'alternance. * * Comme l'en-tête foncé est masqué : * ligne 1 = foncé * ligne 2 = blanc */ .marius-extra-fields-product .marius-product-questions-reponses table tbody tr:nth-child(odd) td { background-color: #f7f9fc; } .marius-extra-fields-product .marius-product-questions-reponses table tbody tr:nth-child(even) td { background-color: #fff; } .marius-extra-fields-product .marius-product-questions-reponses table tbody tr:last-child { border-bottom: 0; } /* ------------------------------------------------------ QUESTION ------------------------------------------------------ */ .marius-extra-fields-product .marius-product-questions-reponses table tbody td:first-child { display: block; width: 100%; min-width: 0; padding: 10px 10px 4px; border: 0; font-size: 12px; line-height: 16px; font-weight: 600; color: #222; text-align: left; white-space: normal; overflow-wrap: anywhere; word-break: normal; } /* ------------------------------------------------------ RÉPONSE ------------------------------------------------------ */ .marius-extra-fields-product .marius-product-questions-reponses table tbody td:last-child { display: block; width: 100%; min-width: 0; padding: 2px 10px 10px; border: 0; font-size: 12px; line-height: 17px; font-weight: 400; color: #3d3d3d; text-align: left; white-space: normal; overflow-wrap: anywhere; word-break: normal; } /* Liens */ .marius-extra-fields-product .marius-product-questions-reponses table a { white-space: normal; overflow-wrap: anywhere; } } /* ========================================================== MARIUS - ONGLET PRODUCT SPECIFICATIONS ========================================================== */ .marius-extra-fields-product .marius-product-specifications { font-family: "Montserrat", sans-serif; color: #3d3d3d; } /* CARTE PRODUIT */ .marius-extra-fields-product .marius-product-specifications { margin-bottom: 28px; border: 1px solid #dfe5ec; border-radius: 5px; overflow: hidden; background: #fff; } .marius-extra-fields-product .marius-product-specifications:last-child { margin-bottom: 0; } /* TITRE PRODUIT */ .marius-extra-fields-product .marius-product-specifications > h2 { margin: 0; padding: 14px 16px; background: #e9eef5; border: 0; border-bottom: 1px solid #dfe5ec; color: #2f3742; font-size: 18px; font-weight: 700; line-height: 1.4; } .marius-extra-fields-product .marius-product-specifications > h2 span { font-weight: 400; } /* TITRE DE SECTION */ .marius-extra-fields-product .marius-product-specifications > h3 { margin: 0; padding: 11px 16px; background: #f1f4f8; border: 0; border-bottom: 1px solid #dfe5ec; color: #30353b; font-size: 14px; font-weight: 700; line-height: 1.4; } /* TABLEAU */ .marius-extra-fields-product .marius-product-specifications .marius-spec-table { width: 100%; margin: 0; border: 0; border-collapse: collapse; table-layout: fixed; } .marius-extra-fields-product .marius-product-specifications .marius-spec-table tbody, .marius-extra-fields-product .marius-product-specifications .marius-spec-table tr { border: 0; } .marius-extra-fields-product .marius-product-specifications .marius-spec-table th, .marius-extra-fields-product .marius-product-specifications .marius-spec-table td { padding: 11px 14px; border: 0; border-bottom: 1px solid #dfe5ec; vertical-align: top; text-align: left; font-size: 13px; line-height: 1.5; } /* COLONNE NOM */ .marius-extra-fields-product .marius-product-specifications .marius-spec-table th { width: 28%; border-right: 1px solid #dfe5ec; color: #30353b; font-weight: 600; } /* COLONNE VALEUR */ .marius-extra-fields-product .marius-product-specifications .marius-spec-table td { color: #3d3d3d; font-weight: 400; overflow-wrap: anywhere; } /* ALTERNANCE */ .marius-extra-fields-product .marius-product-specifications .marius-spec-table tr:nth-child(odd) > th, .marius-extra-fields-product .marius-product-specifications .marius-spec-table tr:nth-child(odd) > td { background: #fff; } .marius-extra-fields-product .marius-product-specifications .marius-spec-table tr:nth-child(even) > th, .marius-extra-fields-product .marius-product-specifications .marius-spec-table tr:nth-child(even) > td { background: #f7f9fc; } /* DERNIÈRE LIGNE */ .marius-extra-fields-product .marius-product-specifications .marius-spec-table tr:last-child > th, .marius-extra-fields-product .marius-product-specifications .marius-spec-table tr:last-child > td { border-bottom: 0; } /* LIENS */ .marius-extra-fields-product .marius-product-specifications .marius-spec-table a { font-weight: 600; text-decoration: none; } .marius-extra-fields-product .marius-product-specifications .marius-spec-table a:hover { text-decoration: underline; } /* HOVER DESKTOP */ @media (hover: hover) and (pointer: fine) { .marius-extra-fields-product .marius-product-specifications .marius-spec-table tr:hover > th, .marius-extra-fields-product .marius-product-specifications .marius-spec-table tr:hover > td { background: #eef3f8; } } /* ========================================================== MOBILE ========================================================== */ @media (max-width: 767.98px) { .marius-extra-fields-product .marius-product-specifications { margin-bottom: 20px; } .marius-extra-fields-product .marius-product-specifications > h2 { padding: 13px; font-size: 16px; } .marius-extra-fields-product .marius-product-specifications > h2 span { display: block; margin-top: 2px; font-size: 13px; } .marius-extra-fields-product .marius-product-specifications > h3 { padding: 10px 13px; font-size: 13px; } /* Une spécification par bloc vertical */ .marius-extra-fields-product .marius-product-specifications .marius-spec-table, .marius-extra-fields-product .marius-product-specifications .marius-spec-table tbody, .marius-extra-fields-product .marius-product-specifications .marius-spec-table tr, .marius-extra-fields-product .marius-product-specifications .marius-spec-table th, .marius-extra-fields-product .marius-product-specifications .marius-spec-table td { display: block; width: 100%; } .marius-extra-fields-product .marius-product-specifications .marius-spec-table tr { border: 0; border-bottom: 1px solid #dfe5ec; } .marius-extra-fields-product .marius-product-specifications .marius-spec-table tr:last-child { border-bottom: 0; } /* Libellé */ .marius-extra-fields-product .marius-product-specifications .marius-spec-table th { padding: 9px 12px 2px; border: 0; font-size: 12px; font-weight: 700; } /* Valeur */ .marius-extra-fields-product .marius-product-specifications .marius-spec-table td { padding: 2px 12px 9px; border: 0; font-size: 12px; line-height: 1.5; } /* Alternance mobile */ .marius-extra-fields-product .marius-product-specifications .marius-spec-table tr:nth-child(odd) > th, .marius-extra-fields-product .marius-product-specifications .marius-spec-table tr:nth-child(odd) > td { background: #f7f9fc; } .marius-extra-fields-product .marius-product-specifications .marius-spec-table tr:nth-child(even) > th, .marius-extra-fields-product .marius-product-specifications .marius-spec-table tr:nth-child(even) > td { background: #fff; } } /* ========================================================== MARIUS - ONGLET CONSEILS ET COMPATIBILITE MEME DESIGN QUE PRODUCT SPECIFICATIONS ========================================================== */ /* CARTE PRINCIPALE */ .marius-extra-fields-product .marius-conseils-compatibilite { margin-bottom: 28px; border: 1px solid #dfe5ec; border-radius: 5px; overflow: hidden; background: #fff; color: #3d3d3d; font-family: "Montserrat", sans-serif; } .marius-extra-fields-product .marius-conseils-compatibilite:last-child { margin-bottom: 0; } /* ========================================================== TITRE PRINCIPAL ========================================================== */ .marius-extra-fields-product .marius-conseils-compatibilite > h2 { margin: 0; padding: 14px 16px; background: #e9eef5; border: 0; border-bottom: 1px solid #dfe5ec; border-radius: 0; color: #2f3742; font-size: 18px; font-weight: 700; line-height: 1.4; } /* ========================================================== TITRES DES SECTIONS ========================================================== */ .marius-extra-fields-product .marius-conseils-compatibilite > h3 { margin: 0; padding: 11px 16px; background: #f1f4f8; border: 0; border-bottom: 1px solid #dfe5ec; border-radius: 0; color: #30353b; font-size: 14px; font-weight: 700; line-height: 1.4; } /* ========================================================== TABLEAUX ========================================================== */ .marius-extra-fields-product .marius-conseils-compatibilite .marius-spec-table { width: 100%; margin: 0; border: 0; border-collapse: collapse; border-spacing: 0; table-layout: fixed; } .marius-extra-fields-product .marius-conseils-compatibilite .marius-spec-table tbody, .marius-extra-fields-product .marius-conseils-compatibilite .marius-spec-table tr { border: 0; } .marius-extra-fields-product .marius-conseils-compatibilite .marius-spec-table th, .marius-extra-fields-product .marius-conseils-compatibilite .marius-spec-table td { padding: 11px 14px; border: 0; border-bottom: 1px solid #dfe5ec; vertical-align: top; text-align: left; font-size: 13px; line-height: 1.5; } /* ========================================================== COLONNE LIBELLE ========================================================== */ .marius-extra-fields-product .marius-conseils-compatibilite .marius-spec-table th { width: 28%; border-right: 1px solid #dfe5ec; color: #30353b; font-weight: 600; overflow-wrap: anywhere; } /* ========================================================== COLONNE CONSEILS ========================================================== */ .marius-extra-fields-product .marius-conseils-compatibilite .marius-spec-table td { color: #3d3d3d; font-weight: 400; overflow-wrap: anywhere; } /* ========================================================== ALTERNANCE DES LIGNES ========================================================== */ .marius-extra-fields-product .marius-conseils-compatibilite .marius-spec-table tr:nth-child(odd) > th, .marius-extra-fields-product .marius-conseils-compatibilite .marius-spec-table tr:nth-child(odd) > td { background: #fff; } .marius-extra-fields-product .marius-conseils-compatibilite .marius-spec-table tr:nth-child(even) > th, .marius-extra-fields-product .marius-conseils-compatibilite .marius-spec-table tr:nth-child(even) > td { background: #f7f9fc; } /* ========================================================== DERNIERE LIGNE DE CHAQUE TABLEAU ========================================================== */ .marius-extra-fields-product .marius-conseils-compatibilite .marius-spec-table tr:last-child > th, .marius-extra-fields-product .marius-conseils-compatibilite .marius-spec-table tr:last-child > td { border-bottom: 0; } /* ========================================================== LIENS ========================================================== */ .marius-extra-fields-product .marius-conseils-compatibilite .marius-spec-table a { font-weight: 600; text-decoration: none; } .marius-extra-fields-product .marius-conseils-compatibilite .marius-spec-table a:hover { text-decoration: underline; } /* ========================================================== HOVER DESKTOP ========================================================== */ @media (hover: hover) and (pointer: fine) { .marius-extra-fields-product .marius-conseils-compatibilite .marius-spec-table tr:hover > th, .marius-extra-fields-product .marius-conseils-compatibilite .marius-spec-table tr:hover > td { background: #eef3f8; } } /* ========================================================== MOBILE ========================================================== */ @media (max-width: 767.98px) { .marius-extra-fields-product .marius-conseils-compatibilite { margin-bottom: 20px; } .marius-extra-fields-product .marius-conseils-compatibilite > h2 { padding: 13px; font-size: 16px; } .marius-extra-fields-product .marius-conseils-compatibilite > h3 { padding: 10px 13px; font-size: 13px; } /* Chaque conseil devient un bloc vertical */ .marius-extra-fields-product .marius-conseils-compatibilite .marius-spec-table, .marius-extra-fields-product .marius-conseils-compatibilite .marius-spec-table tbody, .marius-extra-fields-product .marius-conseils-compatibilite .marius-spec-table tr, .marius-extra-fields-product .marius-conseils-compatibilite .marius-spec-table th, .marius-extra-fields-product .marius-conseils-compatibilite .marius-spec-table td { display: block; width: 100%; } .marius-extra-fields-product .marius-conseils-compatibilite .marius-spec-table tr { border: 0; border-bottom: 1px solid #dfe5ec; } .marius-extra-fields-product .marius-conseils-compatibilite .marius-spec-table tr:last-child { border-bottom: 0; } /* Libelle */ .marius-extra-fields-product .marius-conseils-compatibilite .marius-spec-table th { padding: 9px 12px 2px; border: 0; font-size: 12px; font-weight: 700; } /* Texte du conseil */ .marius-extra-fields-product .marius-conseils-compatibilite .marius-spec-table td { padding: 2px 12px 9px; border: 0; font-size: 12px; line-height: 1.5; } /* Alternance mobile */ .marius-extra-fields-product .marius-conseils-compatibilite .marius-spec-table tr:nth-child(odd) > th, .marius-extra-fields-product .marius-conseils-compatibilite .marius-spec-table tr:nth-child(odd) > td { background: #f7f9fc; } .marius-extra-fields-product .marius-conseils-compatibilite .marius-spec-table tr:nth-child(even) > th, .marius-extra-fields-product .marius-conseils-compatibilite .marius-spec-table tr:nth-child(even) > td { background: #fff; } } /* ========================================================== ZZZ VIRTUAL PRODUCT COMMENTS - NOTE FRACTIONNAIRE ========================================================== */ .zzz-vpc-product-rating { display: inline-flex; align-items: center; gap: 0.35rem; } .zzz-vpc-product-rating__stars { position: relative; display: inline-block; font-size: 1rem; line-height: 1; letter-spacing: 1px; white-space: nowrap; } .zzz-vpc-product-rating__empty { color: #d9d9d9; } .zzz-vpc-product-rating__filled { position: absolute; top: 0; left: 0; overflow: hidden; color: #ffb400; white-space: nowrap; } .zzz-vpc-product-rating__average { line-height: 1; } /* ========================================================== PRODUCT — GOOGLE + NOTE + COMMENTAIRES Grille à 3 colonnes égales ========================================================== */ .page-product .product-comments-additional-info:has(.zzz-vpc-product-rating-line) { display: block; flex: 1 1 auto; width: 100%; min-width: 0; margin: 0; } /* ========================================================== GRILLE PRINCIPALE 3 colonnes égales : 33,33 % / 33,33 % / 33,33 % ========================================================== */ .page-product .zzz-vpc-product-rating-line { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; width: 100%; max-width: 100%; margin: 0; padding: 0; column-gap: 0; } /* ========================================================== COLONNE 1 — GOOGLE ÉVALUATIONS ========================================================== */ .page-product .zzz-vpc-product-rating-line .marius-google-evaluations { display: flex; align-items: center; justify-content: flex-start; width: 100%; min-width: 0; margin: 0; padding: 0; line-height: 1; } .page-product .zzz-vpc-product-rating-line .marius-google-evaluations__image { display: block; /* * Taille intrinsèque de l'image. * Aucun redimensionnement imposé. */ width: auto; height: auto; max-width: none; margin: 0; padding: 0; } /* ========================================================== COLONNE 2 — ÉTOILES + NOTE ========================================================== */ .page-product .zzz-vpc-product-rating-line .zzz-vpc-product-rating { display: inline-flex; align-items: center; justify-content: flex-start; width: auto; min-width: 0; margin: 0 !important; padding: 0; /* Espace entre les étoiles et la note (4.5) */ gap: 0.35rem; white-space: nowrap; } /* ========================================================== ÉTOILES ========================================================== */ .page-product .zzz-vpc-product-rating-line .zzz-vpc-product-rating__stars { position: relative; display: inline-block; font-size: 1rem; line-height: 1; letter-spacing: 1px; white-space: nowrap; } .page-product .zzz-vpc-product-rating-line .zzz-vpc-product-rating__empty { color: #d9d9d9; } .page-product .zzz-vpc-product-rating-line .zzz-vpc-product-rating__filled { position: absolute; top: 0; left: 0; overflow: hidden; color: #ffb400; white-space: nowrap; } .page-product .zzz-vpc-product-rating-line .zzz-vpc-product-rating__average { line-height: 1; white-space: nowrap; } /* ========================================================== COLONNE 3 — COMMENTAIRES ========================================================== */ .page-product .zzz-vpc-product-rating-line .additional-links { display: flex; align-items: center; justify-content: flex-start; width: 100%; min-width: 0; margin: 0 !important; padding: 0; text-align: left; } .page-product .zzz-vpc-product-rating-line .additional-links .link-comment { display: inline-flex; align-items: center; justify-content: flex-start; width: auto; margin: 0 !important; padding: 0 !important; white-space: nowrap; text-align: left; } /* ========================================================== MOBILE — GOOGLE + NOTE 2 colonnes centrées / Commentaires masqués ========================================================== */ @media (max-width: 575.98px) { /* * Sur mobile : * - colonne 1 : Google * - colonne 2 : étoiles + note * * Les deux colonnes occupent chacune 50 %. * La colonne "Commentaires" disparaît. */ .page-product .zzz-vpc-product-rating-line { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; max-width: 100%; column-gap: 0; overflow: hidden; } /* COLONNE 1 — GOOGLE Centrée horizontalement */ .page-product .zzz-vpc-product-rating-line .marius-google-evaluations { width: 100%; min-width: 0; max-width: 100%; justify-content: center; } .page-product .zzz-vpc-product-rating-line .marius-google-evaluations__image { width: auto; height: auto; max-width: 100%; } /* COLONNE 2 — ÉTOILES + NOTE Centrées horizontalement */ .page-product .zzz-vpc-product-rating-line .zzz-vpc-product-rating { width: 100%; min-width: 0; max-width: 100%; justify-content: center; gap: 3px; font-size: 0.85rem; } .page-product .zzz-vpc-product-rating-line .zzz-vpc-product-rating__stars { font-size: 0.85rem; letter-spacing: 0; } .page-product .zzz-vpc-product-rating-line .zzz-vpc-product-rating__average { font-size: 0.85rem; } /* COLONNE 3 — COMMENTAIRES Masquée uniquement sur mobile */ .page-product .zzz-vpc-product-rating-line .additional-links { display: none !important; } } /* ========================================================== CHECKOUT — CRÉATION DE COMPTE OPTIONNELLE PRESTASHOP 9.2 / HUMMINGBIRD ========================================================== */ /* ---------------------------------------------------------- CARTE PRINCIPALE Le .mb-3 concerné est celui qui contient la checkbox native ---------------------------------------------------------- */ #checkout-guest-form .mb-3:has(> .form-check > .js-password-form__check) { position: relative; margin: 1rem 0 !important; padding: 16px 18px 16px 70px; background: #f8fbff; border: 1px solid #b8d7ff; border-radius: 5px; box-sizing: border-box; } /* ---------------------------------------------------------- ICÔNE COMPTE ---------------------------------------------------------- */ #checkout-guest-form .mb-3:has(> .form-check > .js-password-form__check)::before { content: "\e853"; position: absolute; left: 20px; top: 26px; font-family: "Material Icons"; font-size: 30px; font-weight: normal; line-height: 1; color: #0d6efd; } /* Séparation verticale */ #checkout-guest-form .mb-3:has(> .form-check > .js-password-form__check)::after { content: ""; position: absolute; left: 55px; top: 14px; width: 1px; height: 44px; background: #d6e7fb; } /* ---------------------------------------------------------- FORM-CHECK NATIF ---------------------------------------------------------- */ #checkout-guest-form .mb-3:has(> .form-check > .js-password-form__check) > .form-check { min-height: 44px; margin: 0; padding-left: 24px; } /* ---------------------------------------------------------- CHECKBOX ---------------------------------------------------------- */ #checkout-guest-form .js-password-form__check { width: 18px; height: 18px; margin-top: 1px; border-color: #adb5bd; cursor: pointer; } #checkout-guest-form .js-password-form__check:checked { background-color: #0d6efd; border-color: #0d6efd; } /* ---------------------------------------------------------- LABEL ---------------------------------------------------------- */ #checkout-guest-form .js-password-form__check + .form-check-label { padding-left: 3px; color: #343a40; cursor: pointer; line-height: 1.4; } #checkout-guest-form .js-password-form__check + .form-check-label .fw-bold { font-weight: 600 !important; } #checkout-guest-form .js-password-form__check + .form-check-label small { color: #6c757d; } /* Texte : "Et gagnez du temps pour votre prochaine commande !" */ #checkout-guest-form .js-password-form__check + .form-check-label em { color: #6c757d; font-size: 13px; font-style: normal; line-height: 1.4; } /* ========================================================== MOT DE PASSE OUVERT ========================================================== */ #checkout-guest-form .mb-3:has( > .form-check > .js-password-form__check:checked ) { padding-bottom: 0; border-radius: 5px; overflow: hidden; } /* ---------------------------------------------------------- BLOC PASSWORD NATIF ---------------------------------------------------------- */ #checkout-guest-form .js-password-form__input-wrapper:not(.d-none) { position: relative; margin-top: 16px !important; margin-left: -70px; margin-right: -18px; padding: 16px 18px 14px 70px; background: #f8fbff; border-top: 1px solid #d6e7fb; } /* ---------------------------------------------------------- FORMULAIRE PASSWORD ---------------------------------------------------------- */ #checkout-guest-form .js-password-form__input-wrapper .form-group { margin-bottom: 0; } #checkout-guest-form .js-password-form__input-wrapper .form-label, #checkout-guest-form .js-password-form__input-wrapper .form-control-label { color: #343a40; font-weight: 600; } /* ---------------------------------------------------------- CHAMP PASSWORD ---------------------------------------------------------- */ #checkout-guest-form .js-password-form__input-wrapper .input-group { width: 100%; } #checkout-guest-form .js-password-form__input-wrapper .form-control { min-height: 38px; } /* ---------------------------------------------------------- BOUTON ŒIL / AFFICHER On conserve le comportement natif Hummingbird ---------------------------------------------------------- */ #checkout-guest-form .js-password-form__input-wrapper button[data-action="show-password"] { min-height: 38px; } /* ========================================================== CHECKOUT — PASSWORD INPUT GROUP Supprime le chevauchement Bootstrap entre input + bouton ========================================================== */ #checkout-guest-form .js-password-form__input-wrapper .input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) { margin-left: 4px; } /* ---------------------------------------------------------- PASSWORD POLICY ---------------------------------------------------------- */ #checkout-guest-form .js-password-form__input-wrapper .password-strength-feedback { margin-top: 8px; } #checkout-guest-form .js-password-form__input-wrapper .progress { height: 5px; overflow: hidden; border-radius: 5px; background: #dee2e6; } /* ========================================================== MOBILE ========================================================== */ @media (max-width: 767.98px) { #checkout-guest-form .mb-3:has(> .form-check > .js-password-form__check) { margin: 15px 0 !important; padding: 14px 14px 14px 55px; } #checkout-guest-form .mb-3:has(> .form-check > .js-password-form__check)::before { left: 14px; top: 23px; font-size: 27px; } #checkout-guest-form .mb-3:has(> .form-check > .js-password-form__check)::after { left: 44px; top: 12px; height: 42px; } #checkout-guest-form .mb-3:has(> .form-check > .js-password-form__check) > .form-check { padding-left: 23px; } #checkout-guest-form .js-password-form__input-wrapper:not(.d-none) { margin-left: -55px; margin-right: -14px; padding: 14px 14px 14px 55px; } } /* ========================================================== HOME - ESPACEMENT ENTRE LES SECTIONS ========================================================== */ .page-content--home { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); } /* ========================================================== PS_CUSTOMTEXT ACCUEIL - MEILLEURES CENTRALES D'ALARME Version compacte 2026 ========================================================== */ .marius-home-alarms { width: 100%; margin: 12px 0 24px; } /* ---------- TITRE ---------- */ .marius-home-alarms__header { margin: 0 0 10px; padding: 12px 15px; text-align: center; background: #fff; border: 1px solid #dfe5ec; border-radius: 5px; } .marius-home-alarms__title { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.25; } .marius-home-alarms__title a { color: #252525; text-decoration: none; } .marius-home-alarms__title span { display: block; } /* ---------- GRILLE 2 x 2 ---------- */ .marius-home-alarms__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } /* ========================================================== CENTRAGE AUTOMATIQUE SI NOMBRE IMPAIR DE CENTRALES ========================================================== */ @media (min-width: 768px) { .marius-home-alarms__grid > .marius-home-alarm-card:last-child:nth-child(odd) { grid-column: 1 / -1; width: calc((100% - 10px) / 2); justify-self: center; } } /* ---------- CARTE ---------- */ .marius-home-alarm-card { display: grid; grid-template-columns: minmax(150px, 42%) minmax(0, 58%); align-items: center; min-width: 0; min-height: 270px; padding: 12px; background: #fff; border: 1px solid #dfe5ec; border-radius: 5px; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; } .marius-home-alarm-card:hover { border-color: #cbd5e1; box-shadow: 0 6px 18px rgba(0, 0, 0, .06); transform: translateY(-2px); } /* ---------- IMAGE ---------- */ .marius-home-alarm-card__image { display: flex; align-items: center; justify-content: center; width: 100%; padding: 5px 12px 5px 0; text-decoration: none; } .marius-home-alarm-card__image img { display: block; width: 100%; max-width: 230px; height: 230px; object-fit: contain; transition: transform .25s ease; } .marius-home-alarm-card:hover .marius-home-alarm-card__image img { transform: scale(1.025); } /* ---------- CONTENU ---------- */ .marius-home-alarm-card__content { min-width: 0; padding: 4px 4px 4px 0; } /* ---------- TITRE PRODUIT ---------- */ .marius-home-alarm-card__title { margin: 0 0 10px; font-size: 15px; font-weight: 700; line-height: 1.3; } .marius-home-alarm-card__title a { color: #252525; text-decoration: none; transition: color .2s ease; } .marius-home-alarm-card__title a:hover { color: var(--bs-primary); } /* ---------- CARACTÉRISTIQUES ---------- */ .marius-home-alarm-card__features { margin: 0; padding: 0; list-style: none; } .marius-home-alarm-card__features li { position: relative; margin: 0 0 5px; padding-left: 15px; color: #4b5563; font-size: 11px; line-height: 1.4; } .marius-home-alarm-card__features li:last-child { margin-bottom: 0; } .marius-home-alarm-card__features li::before { content: "✓"; position: absolute; top: 0; left: 0; color: #198754; font-weight: 700; } /* ---------- TABLETTE ---------- */ @media (max-width: 991.98px) { .marius-home-alarm-card { grid-template-columns: 1fr; align-items: start; } .marius-home-alarm-card__image { padding: 5px 5px 10px; } .marius-home-alarm-card__content { padding: 0 8px 8px; } } /* ---------- MOBILE ---------- */ @media (max-width: 767.98px) { .marius-home-alarms__grid { grid-template-columns: 1fr; } .marius-home-alarm-card { grid-template-columns: minmax(120px, 38%) minmax(0, 62%); min-height: 0; } .marius-home-alarm-card__image { padding: 5px 12px 5px 0; } .marius-home-alarm-card__image img { max-width: 180px; height: 180px; } .marius-home-alarm-card__content { padding: 4px 4px 4px 0; } } /* ---------- PETITS MOBILES ---------- */ @media (max-width: 479.98px) { .marius-home-alarm-card { grid-template-columns: 1fr; } .marius-home-alarm-card__image { padding: 5px 5px 10px; } .marius-home-alarm-card__content { padding: 0 8px 10px; } } /* ---------- ACCESSIBILITÉ ---------- */ @media (prefers-reduced-motion: reduce) { .marius-home-alarm-card, .marius-home-alarm-card__image img { transition: none; } .marius-home-alarm-card:hover, .marius-home-alarm-card:hover .marius-home-alarm-card__image img { transform: none; } } /* ========================================================== ZZZ - HOME PRODUCT / HTML BLOCKS ========================================================== */ .zzz-home-products-block { min-width: 0; } .zzz-home-products-block + .zzz-home-products-block { margin-top: 1.5rem; } /* ========================================================== HEADER / TITRE ========================================================== */ .zzz-home-products-block__header { margin-bottom: 1rem; text-align: center; } .zzz-home-products-block__title { margin: 0; font-size: clamp(1.25rem, 2vw, 1.6rem); font-weight: 700; line-height: 1.25; text-wrap: balance; } .zzz-home-products-block__title a { color: inherit; text-decoration: none; } .zzz-home-products-block__title a:hover { text-decoration: underline; text-underline-offset: .2em; } /* ========================================================== FOOTER / BOUTON VOIR TOUS LES PRODUITS ========================================================== */ .zzz-home-products-block__footer { display: flex; justify-content: center; margin-top: 0; } /* ========================================================== BLOCS HTML ========================================================== */ .zzz-home-products-block__html { min-width: 0; } .zzz-home-products-block__html > :first-child { margin-top: 0; } .zzz-home-products-block__html > :last-child { margin-bottom: 0; } /* ========================================================== CAROUSEL ========================================================== */ .zzz-home-products-block__slider { position: relative; width: 100%; min-width: 0; } /* ========================================================== CONTENEUR PRODUITS ========================================================== */ .zzz-home-products-block__grid { display: flex !important; flex-wrap: nowrap !important; align-items: stretch; gap: 16px !important; width: 100%; min-width: 0; margin: 0 !important; padding: 12px 12px 1rem; overflow-x: auto !important; overflow-y: hidden !important; scroll-snap-type: x mandatory; scroll-padding-inline: 12px; scroll-behavior: smooth; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; } /* Cache scrollbar Chrome / Safari / Edge */ .zzz-home-products-block__grid::-webkit-scrollbar { display: none; } /* ========================================================== PRODUITS - DESKTOP : 4 PRODUITS ========================================================== */ .zzz-home-products-block__grid > .product-miniature { flex: 0 0 calc((100% - 48px) / 4) !important; width: calc((100% - 48px) / 4) !important; max-width: calc((100% - 48px) / 4) !important; min-width: 0 !important; scroll-snap-align: start; border-radius: 5px 5px 0 0; } /* ========================================================== CARTE INTÉRIEURE ========================================================== */ .zzz-home-products-block .product-miniature__inner { overflow: hidden; border-radius: 5px; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease !important; } /* ========================================================== IMAGE - PAS DE ZOOM ========================================================== */ .zzz-home-products-block .product-miniature__image { transform: none !important; } /* ========================================================== HOVER CARTE PRODUIT ========================================================== */ @media (min-width: 768px) and (hover: hover) and (pointer: fine) { .zzz-home-products-block .product-miniature:hover .product-miniature__inner { transform: translateY(-3px) !important; border-color: #d4d9df !important; box-shadow: 0 10px 25px rgba(0, 0, 0, .11) !important; } .zzz-home-products-block .product-miniature:hover .product-miniature__image { transform: none !important; } } /* ========================================================== FLÈCHES MÊME STYLE QUE PRODUITS ASSOCIÉS ========================================================== */ .zzz-home-products-block__prev, .zzz-home-products-block__next { position: absolute; top: 50%; transform: translateY(-50%); z-index: 20; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: 0; padding: 0; color: #212529; background: #fff; border: 1px solid #ddd; border-radius: 50%; font-size: 28px; font-weight: 400; line-height: 1; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, .12); transition: background-color .2s ease, opacity .2s ease; } /* Flèche gauche */ .zzz-home-products-block__prev { left: 12px; } /* Flèche droite */ .zzz-home-products-block__next { right: 12px; } /* Hover flèches */ .zzz-home-products-block__prev:not(:disabled):hover, .zzz-home-products-block__next:not(:disabled):hover { background: #f5f5f5; } /* Flèches désactivées */ .zzz-home-products-block__prev:disabled, .zzz-home-products-block__next:disabled { opacity: .3; cursor: default; pointer-events: none; } /* ========================================================== TABLETTE LARGE : 3 PRODUITS ========================================================== */ @media (max-width: 1199.98px) { .zzz-home-products-block__grid > .product-miniature { flex-basis: calc((100% - 32px) / 3) !important; width: calc((100% - 32px) / 3) !important; max-width: calc((100% - 32px) / 3) !important; } } /* ========================================================== PETITE TABLETTE : 2 PRODUITS ========================================================== */ @media (max-width: 767.98px) { .zzz-home-products-block__grid > .product-miniature { flex-basis: calc((100% - 16px) / 2) !important; width: calc((100% - 16px) / 2) !important; max-width: calc((100% - 16px) / 2) !important; } } /* ========================================================== MOBILE 85% = ON VOIT LE DÉBUT DU PRODUIT SUIVANT ========================================================== */ @media (max-width: 575.98px) { .zzz-home-products-block__grid { gap: 12px !important; padding-left: 12px; padding-right: 12px; scroll-padding-inline: 12px; } .zzz-home-products-block__grid > .product-miniature { flex: 0 0 85% !important; width: 85% !important; max-width: 85% !important; scroll-snap-align: start; } /* Mobile = navigation au doigt */ .zzz-home-products-block__prev, .zzz-home-products-block__next { display: none !important; } } /* ========================================================== MARIUS - ARTICLES ASSOCIÉS SUR PAGE ARTICLE BLOG Carrousel Marius - sans Slick ========================================================== */ /* ========================================================== ESPACEMENT DU BLOC ========================================================== */ .marius-related-blog-singlepost.marius-related-blog { margin: 2em 0 2rem !important; } /* ========================================================== CONTENEUR GLOBAL ========================================================== */ .marius-related-blog-singlepost.marius-related-blog { position: relative; width: 100%; max-width: 100%; margin: 2em 0 2rem; } /* ========================================================== TITRE STYLE ONGLET ========================================================== */ .marius-related-blog-singlepost.marius-related-blog::before { content: ""; position: absolute; top: 35px; left: 0; right: 0; height: 1px; background: #5f8e2f; z-index: 0; } .marius-related-blog-singlepost .marius-related-blog__title { position: relative; z-index: 1; display: table; width: auto; margin: 0 !important; padding: 8px 18px !important; font-family: "Montserrat", sans-serif; font-size: 17px !important; font-weight: 600 !important; line-height: 18px !important; letter-spacing: .15px; text-transform: uppercase; white-space: nowrap; color: #fff !important; background: linear-gradient( to bottom, #6fb828 0%, #5f8e2f 100% ) !important; border: 1px solid #5f862f !important; border-bottom: 0 !important; border-radius: 5px 5px 0 0 !important; box-shadow: 0 0 4px rgba(0, 0, 0, .27) !important; } .marius-related-blog-singlepost .marius-related-blog__title::after { content: none !important; } /* ========================================================== CONTENU / CARROUSEL ========================================================== */ .marius-related-blog-singlepost .marius-related-blog__wrapper { position: relative; width: 100%; margin: 0 !important; padding: 0 !important; background: #fff; border-top: 1px solid #5f8e2f; border-right: 1px solid #ebebeb; border-bottom: 1px solid #ebebeb; border-left: 1px solid #ebebeb; border-radius: 0 0 5px 5px; overflow: hidden; } /* ========================================================== PISTE HORIZONTALE MARIUS ========================================================== */ .marius-related-blog-singlepost .marius-accessories-slider > .marius-related-blog__list { display: flex !important; flex-wrap: nowrap !important; align-items: stretch !important; gap: 16px !important; width: 100%; margin: 0 !important; padding: 12px 12px 22px !important; overflow-x: auto !important; overflow-y: hidden !important; scroll-snap-type: x mandatory; scroll-padding-inline: 12px; scroll-behavior: smooth; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .marius-related-blog-singlepost .marius-accessories-slider > .marius-related-blog__list::-webkit-scrollbar { display: none; } /* ========================================================== CARTE ARTICLE - DESKTOP : 3 ARTICLES ========================================================== */ .marius-related-blog-singlepost .marius-accessories-slider > .marius-related-blog__list > .marius-related-blog__item { position: relative; display: flex !important; flex: 0 0 calc((100% - 32px) / 3) !important; flex-direction: column; min-width: 0 !important; height: auto !important; margin: 0 !important; padding: 0 !important; overflow: hidden; background: #fff !important; border: 1px solid #e1e5e8 !important; border-radius: 5px !important; box-shadow: none !important; scroll-snap-align: start; transition: transform .25s ease, box-shadow .25s ease; } /* ========================================================== HOVER CARTE ========================================================== */ @media (hover: hover) and (pointer: fine) { .marius-related-blog-singlepost .marius-accessories-slider > .marius-related-blog__list > .marius-related-blog__item:hover { transform: translateY(-6px); box-shadow: 0 10px 22px -4px rgba(0, 0, 0, .18) !important; } } /* ========================================================== IMAGE ========================================================== */ .marius-related-blog-singlepost .marius-related-blog__image-link { position: relative; display: block; width: 100%; margin: 0; padding: 0; overflow: hidden; background: #fff; text-decoration: none !important; } .marius-related-blog-singlepost .marius-related-blog__image { position: relative; width: 100%; aspect-ratio: 16 / 9; margin: 0; padding: 0; overflow: hidden; background: #f7f7f7; } .marius-related-blog-singlepost .marius-related-blog__image img { display: block; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; object-fit: cover; transform: none !important; transition: none !important; } /* ========================================================== BADGE ARTICLE DE BLOG ========================================================== */ .marius-related-blog-singlepost .marius-related-blog__flags { position: absolute; top: 8px; left: 8px; z-index: 2; margin: 0; padding: 0; } /* ========================================================== CONTENU ARTICLE ========================================================== */ .marius-related-blog-singlepost .marius-related-blog__content { display: flex; flex: 1 1 auto; flex-direction: column; width: 100%; padding: 14px 12px 15px; } /* ========================================================== TITRE ARTICLE ========================================================== */ .marius-related-blog-singlepost .marius-related-blog__post-title { margin: 0 0 10px !important; padding: 0 !important; font-family: "Montserrat", sans-serif; font-size: 14px !important; font-weight: 600 !important; line-height: 1.3 !important; text-transform: uppercase; } .marius-related-blog-singlepost .marius-related-blog__post-title a { color: #222 !important; text-decoration: none !important; } .marius-related-blog-singlepost .marius-related-blog__post-title a:hover { color: #5f8e2f !important; } /* ========================================================== CATÉGORIES + DATE ========================================================== */ .marius-related-blog-singlepost.marius-related-blog .ybc-blog-sidear-post-meta { margin: 0 0 8px; color: #777; font-size: 11px; line-height: 1.4; } .marius-related-blog-singlepost.marius-related-blog .ybc-blog-sidear-post-meta a { color: #666; text-decoration: none; } .marius-related-blog-singlepost.marius-related-blog .ybc-blog-sidear-post-meta a:hover { color: #5f8e2f; } /* ========================================================== VUES / LIKES / COMMENTAIRES ========================================================== */ .marius-related-blog-singlepost.marius-related-blog .ybc-blog-latest-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 12px; margin: 0 0 8px; padding: 0; color: #777; font-size: 11px; line-height: 1.3; } .marius-related-blog-singlepost.marius-related-blog .ybc-blog-latest-toolbar span { margin: 0; } .marius-related-blog-singlepost.marius-related-blog .ybc-blog-latest-toolbar .ets_svg { display: inline-flex; align-items: center; margin-right: 3px; } .marius-related-blog-singlepost.marius-related-blog .ybc-blog-latest-toolbar svg { width: 13px; height: 13px; } /* ========================================================== DESCRIPTION ========================================================== */ .marius-related-blog-singlepost.marius-related-blog .blog_description { margin: 0 0 12px; color: #666; font-size: 11px; line-height: 1.5; } /* ========================================================== BOUTON LIRE LA SUITE ========================================================== */ .marius-related-blog-singlepost.marius-related-blog .read_more { display: inline-flex; align-items: center; justify-content: center; width: auto; align-self: flex-start; margin-top: 12px; padding: 7px 14px; font-family: "Montserrat", sans-serif; font-size: 12px; font-weight: 500; line-height: 1.2; color: #fff !important; background: linear-gradient( to bottom, #6fb828 0%, #5f8e2f 100% ); border: 1px solid #5f862f; border-radius: 5px; text-decoration: none !important; transition: border-color .2s ease, box-shadow .2s ease; } .marius-related-blog-singlepost.marius-related-blog .read_more:hover, .marius-related-blog-singlepost.marius-related-blog .read_more:focus { color: #fff !important; background: #5f8e2f !important; background-image: none !important; border-color: #527b29; text-decoration: none !important; box-shadow: 0 2px 5px rgba(0, 0, 0, .15); } /* ========================================================== FLÈCHES CARROUSEL MARIUS ========================================================== */ .marius-related-blog-singlepost .marius-accessories-prev, .marius-related-blog-singlepost .marius-accessories-next { position: absolute; top: 50%; z-index: 20; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; transform: translateY(-50%); color: #212529; background: #fff; border: 1px solid #ddd; border-radius: 50%; font-size: 28px; line-height: 1; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, .12); } .marius-related-blog-singlepost .marius-accessories-prev { left: 12px; } .marius-related-blog-singlepost .marius-accessories-next { right: 12px; } .marius-related-blog-singlepost .marius-accessories-prev:hover, .marius-related-blog-singlepost .marius-accessories-next:hover { background: #f5f5f5; } /* ========================================================== TABLETTE : 2 ARTICLES ========================================================== */ @media (max-width: 991.98px) { .marius-related-blog-singlepost .marius-accessories-slider > .marius-related-blog__list > .marius-related-blog__item { flex-basis: calc((100% - 16px) / 2) !important; } } /* ========================================================== MOBILE Une grande carte + aperçu de la suivante ========================================================== */ @media (max-width: 575.98px) { .marius-related-blog-singlepost .marius-accessories-slider > .marius-related-blog__list { padding: 12px 8px 18px !important; scroll-padding-inline: 8px; } .marius-related-blog-singlepost .marius-accessories-slider > .marius-related-blog__list > .marius-related-blog__item { flex-basis: 85% !important; } .marius-related-blog-singlepost .marius-related-blog__content { padding: 12px 10px 14px; } .marius-related-blog-singlepost .marius-related-blog__post-title { font-size: 13px !important; } /* * Navigation tactile sur mobile. */ .marius-related-blog-singlepost .marius-accessories-prev, .marius-related-blog-singlepost .marius-accessories-next { display: none !important; } } /* ========================================================== MARIUS - YBC BLOG / MON COMPTE Harmonisation avec Hummingbird - PrestaShop 9.2 ========================================================== */ /* ---------------------------------------------------------- MENU LATERAL ---------------------------------------------------------- */ .account-menu--sidebar .account-menu__nav :is(#author-blog-comment-link, #author-blog-info-link) { display: flex !important; align-items: center !important; flex-direction: row !important; gap: .5rem !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; flex: none !important; margin: 0 !important; padding: .75rem 1rem !important; color: var(--bs-body-color) !important; font-size: 1rem !important; font-weight: 400 !important; text-decoration: none !important; } .account-menu--sidebar .account-menu__nav :is(#author-blog-comment-link, #author-blog-info-link) .link-item { display: flex !important; align-items: center !important; gap: .5rem !important; min-width: 0; } .account-menu--sidebar .account-menu__nav :is(#author-blog-comment-link, #author-blog-info-link) .ss_icon_group { display: inline-flex !important; align-items: center; justify-content: center; flex: 0 0 24px; width: 24px; height: 24px; } .account-menu--sidebar .account-menu__nav :is(#author-blog-comment-link, #author-blog-info-link) svg { display: block; width: 20px !important; height: 20px !important; fill: currentColor !important; } /* ---------------------------------------------------------- GRILLE CENTRALE ---------------------------------------------------------- */ .account-menu--main :is(#author-blog-comment-link, #author-blog-info-link) { display: flex !important; flex-direction: column !important; align-items: stretch !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 1.25rem 1rem !important; background-color: var(--bs-tertiary-bg) !important; border-radius: var(--bs-border-radius) !important; color: var(--bs-body-color) !important; font-size: 1rem !important; font-weight: 600 !important; text-decoration: none !important; } .account-menu--main :is(#author-blog-comment-link, #author-blog-info-link) .link-item { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: .75rem !important; min-width: 0; font-weight: 600; } .account-menu--main :is(#author-blog-comment-link, #author-blog-info-link) .ss_icon_group { display: inline-flex !important; align-items: center; justify-content: flex-start; height: 24px; } .account-menu--main :is(#author-blog-comment-link, #author-blog-info-link) svg { display: block; width: 24px !important; height: 24px !important; fill: currentColor !important; } /* ---------------------------------------------------------- SURVOL ---------------------------------------------------------- */ .account-menu--sidebar :is(#author-blog-comment-link, #author-blog-info-link):hover, .account-menu--main :is(#author-blog-comment-link, #author-blog-info-link):hover { color: var(--bs-link-hover-color) !important; } /* ========================================================== MARIUS - YBC BLOG / ESPACEMENT MENU LATERAL ========================================================== */ .account-menu--sidebar .account-menu__nav :is(#author-blog-comment-link, #author-blog-info-link) { min-height: 0 !important; height: auto !important; margin: 0 !important; padding: .75rem 1rem !important; } .account-menu--sidebar .account-menu__nav :is(#author-blog-comment-link, #author-blog-info-link) .link-item { margin: 0 !important; padding: 0 !important; line-height: 1.5 !important; } .account-menu--sidebar .account-menu__nav :is(#author-blog-comment-link, #author-blog-info-link) .ss_icon_group { margin: 0 !important; padding: 0 !important; } /* ========================================================== MARIUS - YBC BLOG - PRODUITS ASSOCIÉS STYLE HARMONISÉ AVEC LES CARTES PRODUITS ========================================================== */ /* ========================================================== SECTION ET ONGLET VERT ========================================================== */ #ybc-blog-related-products { position: relative; margin: 2em 0 2rem; } #ybc-blog-related-products::before { content: none !important; } #ybc-blog-related-products .marius-blog-related-products__title { position: relative; z-index: 1; display: table; width: auto; margin: 0; padding: 8px 18px; font-family: "Montserrat", sans-serif; font-size: 17px; font-weight: 600; line-height: 18px; letter-spacing: .15px; text-transform: uppercase; color: #fff; background: linear-gradient( to bottom, #6fb828, #5f8e2f ); border: 1px solid #5f862f; border-bottom: 0; border-radius: 5px 5px 0 0; box-shadow: 0 0 4px rgba(0, 0, 0, .27); } #ybc-blog-related-products .marius-blog-related-products__title::after { content: none !important; } /* ========================================================== CADRE DU CARROUSEL ========================================================== */ #ybc-blog-related-products .marius-accessories-slider { position: relative; width: 100%; margin: 0; background: #fff; border: 1px solid #ebebeb; border-top-color: #5f8e2f; border-radius: 0 0 5px 5px; overflow: hidden; } /* ========================================================== PISTE DES PRODUITS ========================================================== */ #ybc-blog-related-products .marius-accessories-slider > .products { display: flex !important; flex-wrap: nowrap !important; align-items: stretch !important; gap: 16px !important; box-sizing: border-box; width: 100%; margin: 0 !important; padding: 12px 12px 22px !important; overflow-x: auto !important; overflow-y: hidden !important; scroll-snap-type: x mandatory; scroll-padding-inline: 12px; scroll-behavior: smooth; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; } #ybc-blog-related-products .marius-accessories-slider > .products::-webkit-scrollbar { display: none; } /* ========================================================== CARTES - 4 PRODUITS SUR ORDINATEUR ========================================================== */ #ybc-blog-related-products .marius-accessories-slider > .products > .product-miniature { box-sizing: border-box; flex: 0 0 calc((100% - 48px) / 4) !important; min-width: 0 !important; max-width: none !important; align-self: stretch; height: auto !important; margin: 0 !important; padding: 0 !important; background: #fff !important; border: 1px solid #e6e9ed !important; border-radius: 6px !important; /* ### marius 6px FF important ca sa am unghiurile frumoase cand folosesc bordura in jurul imaginii */ box-shadow: none !important; filter: none !important; transform: none !important; scroll-snap-align: start; transition: border-color .2s ease !important; } @media (min-width: 768px) and (hover: hover) and (pointer: fine) { #ybc-blog-related-products .marius-accessories-slider > .products > .product-miniature:hover { border-color: #cfd5dc !important; box-shadow: none !important; transform: none !important; } } /* ========================================================== STRUCTURE INTERNE DES CARTES ========================================================== */ #ybc-blog-related-products .product-container { display: flex !important; flex-direction: column !important; box-sizing: border-box; width: 100%; height: 100%; margin: 0 !important; padding: 0 !important; background: #fff !important; border: 0 !important; border-radius: 5px !important; box-shadow: none !important; overflow: hidden; } /* ========================================================== IMAGE - GRANDE, SANS SÉPARATION NI ZOOM ========================================================== */ #ybc-blog-related-products .left-block { position: relative; width: 100%; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; } #ybc-blog-related-products .left-block::after, #ybc-blog-related-products .left-block::before { content: none !important; } #ybc-blog-related-products .ybc_item_img { display: block; width: 100%; text-decoration: none !important; border: 0 !important; } #ybc-blog-related-products .ybc_item_img img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; transform: none !important; transition: none !important; } #ybc-blog-related-products .left-block img:hover { transform: none !important; } /* ========================================================== INFORMATIONS PRODUIT ========================================================== */ #ybc-blog-related-products .right-block { display: flex !important; flex-direction: column !important; flex: 1 1 auto; width: 100%; margin: 0 !important; padding: 12px 14px 14px !important; background: transparent !important; border: 0 !important; text-align: left !important; } /* ========================================================== TITRES BLEUS - STYLE MARIUS ========================================================== */ #ybc-blog-related-products .right-block h5 { margin: 0 0 8px !important; padding: 0 !important; font-family: "Montserrat", sans-serif; font-size: 15px; font-weight: 400; line-height: 1.5; text-align: left !important; text-transform: none !important; } #ybc-blog-related-products .right-block h5 a { color: #365cff !important; font: inherit !important; text-transform: none !important; text-decoration: none !important; } #ybc-blog-related-products .right-block h5 a:hover { color: #2445d8 !important; text-decoration: none !important; } /* ========================================================== PRIX - STYLE MARIUS ========================================================== */ #ybc-blog-related-products .content_price { display: flex !important; flex-wrap: wrap; align-items: baseline; gap: 3px 7px; margin: 0 0 5px !important; padding: 0 !important; text-align: left !important; background: transparent !important; } #ybc-blog-related-products .content_price .bp-price-label, #ybc-blog-related-products .content_price .bp-price-old-label, #ybc-blog-related-products .content_price .bp-percent-label, #ybc-blog-related-products .content_price .bp-save { display: none !important; } #ybc-blog-related-products .content_price .bp-price { order: 1; margin: 0 !important; color: #c72d2d !important; background: transparent !important; font-size: 17px; font-weight: 700; line-height: 1.3; } #ybc-blog-related-products .content_price .bp-price-display { color: inherit !important; font-weight: inherit !important; } #ybc-blog-related-products .content_price .bp-price::after { content: " TTC"; font-size: 12px; font-style: italic; font-weight: 600; } #ybc-blog-related-products .content_price .bp-price-old { order: 2; margin: 0 !important; color: #858585 !important; background: transparent !important; font-size: 12px; font-weight: 400; line-height: 1.3; } #ybc-blog-related-products .content_price .bp-price-old-display { color: inherit !important; text-decoration: line-through; } #ybc-blog-related-products .content_price .bp-percent { order: 3; margin: 0 !important; padding: 0 !important; color: #365cff !important; background: transparent !important; font-size: 12px; font-weight: 400; line-height: 1.3; } #ybc-blog-related-products .content_price .bp-percent::before { content: "(Économisez "; } #ybc-blog-related-products .content_price .bp-percent::after { content: ")"; } /* ========================================================== AVIS ET ÉTOILES ========================================================== */ #ybc-blog-related-products .right-block .star_content, #ybc-blog-related-products .right-block .star { flex-shrink: 0; } #ybc-blog-related-products .right-block a { text-decoration: none; } /* ========================================================== DESCRIPTION - MASQUÉE COMME LES CARTES MARIUS ========================================================== */ #ybc-blog-related-products .blog-product-desc { display: none !important; } /* ========================================================== FLÈCHES CIRCULAIRES ========================================================== */ #ybc-blog-related-products .marius-accessories-prev, #ybc-blog-related-products .marius-accessories-next { position: absolute; top: 50%; z-index: 20; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; color: #212529; background: #fff; border: 1px solid #ddd; border-radius: 50%; font-size: 28px; line-height: 1; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, .12); transform: translateY(-50%); } #ybc-blog-related-products .marius-accessories-prev { left: 12px; } #ybc-blog-related-products .marius-accessories-next { right: 12px; } #ybc-blog-related-products .marius-accessories-prev:hover, #ybc-blog-related-products .marius-accessories-next:hover { background: #f5f5f5; } /* ========================================================== TABLETTE - 3 PRODUITS ========================================================== */ @media (max-width: 1199px) { #ybc-blog-related-products .marius-accessories-slider > .products > .product-miniature { flex-basis: calc((100% - 56px) / 3) !important; } } /* ========================================================== PETITE TABLETTE - 2 PRODUITS ========================================================== */ @media (max-width: 767px) { #ybc-blog-related-products .marius-accessories-slider > .products > .product-miniature { flex-basis: calc((100% - 40px) / 2) !important; } } /* ========================================================== MOBILE - 85 % AVEC APERÇU DU PRODUIT SUIVANT ========================================================== */ @media (max-width: 575px) { #ybc-blog-related-products .marius-accessories-slider > .products > .product-miniature { flex-basis: 85% !important; } #ybc-blog-related-products .marius-accessories-prev, #ybc-blog-related-products .marius-accessories-next { display: none !important; } #ybc-blog-related-products .right-block { padding: 12px !important; } } /* ========================================================== YBC BLOG - PRODUITS ASSOCIÉS PRIX ET ÉTOILES ALIGNÉS EN BAS ========================================================== */ #ybc-blog-related-products .right-block { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; height: auto !important; } /* Pousse les prix vers le bas */ #ybc-blog-related-products .right-block .content_price { margin-top: auto !important; } /* Garde les avis juste sous les prix */ #ybc-blog-related-products .right-block .content_price + * { margin-top: 4px !important; } /* ========================================================== MARIUS - BLOG - PRIX STYLE VOUS AIMEREZ AUSSI PRIORITÉ SUR YBC BLOG detail_post.css ========================================================== */ /* CONTENEUR PRIX */ #ybc-blog-related-products .right-block .blog-product-extra.content_price { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: baseline !important; align-content: flex-start !important; justify-content: flex-start !important; width: 100% !important; height: auto !important; column-gap: 5px !important; row-gap: 2px !important; margin-top: auto !important; margin-right: 0 !important; margin-bottom: 4px !important; margin-left: 0 !important; padding: 0 !important; text-align: left !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } /* PRIX ACTUEL - PREMIÈRE LIGNE */ #ybc-blog-related-products .right-block .content_price .bp-price { display: block !important; position: static !important; order: 1 !important; flex: 0 0 100% !important; width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 !important; color: #c72d2d !important; background: transparent !important; font-size: 17px !important; font-weight: 700 !important; line-height: 1.3 !important; text-align: left !important; } #ybc-blog-related-products .right-block .content_price .bp-price-display { color: #c72d2d !important; background: transparent !important; font-size: 17px !important; font-weight: 700 !important; text-decoration: none !important; } #ybc-blog-related-products .right-block .content_price .bp-price-label { display: none !important; } /* TTC VISUEL */ #ybc-blog-related-products .right-block .content_price .bp-price::after { content: " TTC" !important; display: inline !important; color: #c72d2d !important; font-size: 12px !important; font-style: italic !important; font-weight: 600 !important; } /* ANCIEN PRIX - DEUXIÈME LIGNE */ #ybc-blog-related-products .right-block .content_price .bp-price-old { display: inline-flex !important; position: static !important; order: 2 !important; flex: 0 0 auto !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; color: #858585 !important; background: transparent !important; font-size: 12px !important; font-weight: 400 !important; line-height: 1.3 !important; text-decoration: none !important; } #ybc-blog-related-products .right-block .content_price .bp-price-old-label { display: inline !important; margin-right: 4px !important; color: #666 !important; font-size: 12px !important; font-weight: 400 !important; } #ybc-blog-related-products .right-block .content_price .bp-price-old-display { display: inline !important; color: #858585 !important; font-size: 12px !important; font-weight: 400 !important; text-decoration: line-through !important; } /* REMISE - APRÈS L'ANCIEN PRIX */ #ybc-blog-related-products .right-block .content_price .bp-percent { display: inline-flex !important; position: static !important; order: 3 !important; flex: 0 0 auto !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; color: #365cff !important; background: transparent !important; border: 0 !important; font-size: 12px !important; font-weight: 400 !important; line-height: 1.3 !important; text-align: left !important; } #ybc-blog-related-products .right-block .content_price .bp-percent-label { display: none !important; } #ybc-blog-related-products .right-block .content_price .bp-percent-display { display: inline !important; margin: 0 !important; padding: 0 !important; color: #365cff !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; font-size: 12px !important; font-weight: 400 !important; line-height: inherit !important; } /* TEXTE ÉCONOMISEZ */ #ybc-blog-related-products .right-block .content_price .bp-percent::before { content: "(Économisez " !important; display: inline !important; } #ybc-blog-related-products .right-block .content_price .bp-percent::after { content: ")" !important; display: inline !important; } /* MASQUER LE MONTANT ÉCONOMISÉ SUPPLÉMENTAIRE */ #ybc-blog-related-products .right-block .content_price .bp-save { display: none !important; } #ybc-blog-related-products .blog-product-list .right-block .content_price .bp-price-display { padding: 0 !important; } /* ========================================================== MARIUS - BLOG - PRODUITS ASSOCIÉS HOVER RELIEF ========================================================== */ @media (min-width: 768px) and (hover: hover) and (pointer: fine) { #ybc-blog-related-products .marius-accessories-slider > .products > .product-miniature { position: relative !important; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease !important; } #ybc-blog-related-products .marius-accessories-slider > .products > .product-miniature:hover { transform: translateY(-5px) !important; box-shadow: 0 10px 22px -4px rgba(0, 0, 0, .18) !important; border-color: #cfd5dc !important; z-index: 2 !important; } } /* ========================================================== MARIUS - YBC BLOG CORRECTION ALIGNEMENT MENU COMPTE MOBILE ========================================================== */ .account-menu--main > #author-blog-comment-link > .link-item, .account-menu--main > #author-blog-info-link > .link-item { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-start !important; width: 100% !important; gap: 12px !important; text-align: left !important; } .account-menu--main > #author-blog-comment-link, .account-menu--main > #author-blog-info-link { min-height: 40px !important; height: auto !important; padding: 10px 12px !important; text-align: left !important; } .account-menu--main > #author-blog-comment-link .ss_icon_group, .account-menu--main > #author-blog-info-link .ss_icon_group { flex: 0 0 20px !important; width: 20px !important; height: 20px !important; } .account-menu--main > #author-blog-comment-link svg, .account-menu--main > #author-blog-info-link svg { width: 20px !important; height: 20px !important; } /* ========================================================== MARIUS - YBC BLOG TABLEAU DES COMMENTAIRES RESPONSIVE ========================================================== */ @media (max-width: 767.98px) { .page-content--customer .ybc-blog-wrapper-form-management .table-responsive { display: block; width: 100%; max-width: 100%; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; } .page-content--customer .ybc-blog-wrapper-form-management .table-responsive form { min-width: max-content; } .page-content--customer .ybc-blog-wrapper-form-management .table-responsive table.configuration { width: max-content; min-width: 100%; margin-bottom: 0; } } /* ========================================================== MARIUS - PRODUCT CARDS ARRONDIS SUPÉRIEURS DES IMAGES ========================================================== */ .product-miniature__image-container, .product-miniature__image-link, .product-miniature__image-link picture, .product-miniature__image { border-radius: 5px 5px 0 0 !important; } .product-miniature__image-link, .product-miniature__image-link picture { overflow: hidden !important; } .product-miniature__image { display: block !important; } /* ========================================================== MARIUS - PRODUCT CARDS BORDER RADIUS GLOBAL ========================================================== */ .product-miniature .product-miniature__inner { border-radius: 6px !important; /* ### marius 6px FF important ca sa am unghiurile frumoase cand folosesc bordura in jurul imaginii */ } .product-miniature .product-miniature__top { border-radius: 5px 5px 0 0 !important; } .product-miniature .product-miniature__image-container, .product-miniature .product-miniature__image-link, .product-miniature .product-miniature__image-link picture, .product-miniature .product-miniature__image { border-radius: 5px 5px 0 0 !important; } /* ========================================================== MARIUS - PRODUCT MINIATURE EXTRA PROPERTY LABELS - 14 DYNAMIC COLORS ========================================================== */ /* ========================================================== LABELS - POSITIONING CONTEXT ========================================================== */ .product-miniature__top { position: relative; } /* ========================================================== LABELS - POSITION ========================================================== */ .product-miniature .marius-miniature-labels { position: static; display: flex; flex-direction: column; align-items: center; gap: 3px; width: 100%; max-width: 100%; padding: 6px 12px 6px 12px !important; background-color: #f2f2f2 !important; pointer-events: none; } /* ========================================================== LABELS - COMMON STYLE ========================================================== */ .product-miniature .marius-miniature-labels__radio, .product-miniature .marius-miniature-labels__network { display: inline-flex; align-items: center; gap: 4px; width: fit-content; max-width: 100%; padding: 3px 6px; border-radius: 3px; font-size: 14px; font-weight: 600; font-family: "Montserrat", sans-serif; line-height: 1.3; overflow-wrap: break-word; } .product-miniature .product-miniature__top > .marius-miniature-labels { position: relative; top: auto; bottom: auto; left: auto; right: auto; z-index: 1; width: 100%; max-width: 100%; margin-top: 6px; padding: 0 6px; pointer-events: none; } /* ========================================================== MARIUS - MOBILE LABELS - UNIFORM HEIGHT ========================================================== */ /* ========================================================== DEFAULT COLORS - FALLBACK ========================================================== */ .product-miniature .marius-miniature-labels__radio { background-color: #95003B; color: #FFFFFF; } .product-miniature .marius-miniature-labels__network { background-color: #AAAAAA; color: #000000; } /* ========================================================== RADIO - MEIAN ASK ========================================================== */ /* Meian - ASK - 433 MHz / 868 MHz */ .product-miniature .marius-miniature-labels__radio.radio-ask-dual { background-color: #95003B; color: #FFFFFF; } /* Meian - ASK - 433 MHz */ .product-miniature .marius-miniature-labels__radio.radio-ask-433 { background-color: #AD3158; color: #FFFFFF; } /* Meian - ASK - 868 MHz */ .product-miniature .marius-miniature-labels__radio.radio-ask-868 { background-color: #78324D; color: #FFFFFF; } /* ========================================================== RADIO - MEIAN FSK ========================================================== */ /* Meian - FSK - 433 MHz / 868 MHz */ .product-miniature .marius-miniature-labels__radio.radio-fsk-dual { background-color: #2563C7; color: #FFFFFF; } /* Meian - FSK - 433 MHz */ .product-miniature .marius-miniature-labels__radio.radio-fsk-433 { background-color: #386EAE; color: #FFFFFF; } /* Meian - FSK - 868 MHz */ .product-miniature .marius-miniature-labels__radio.radio-fsk-868 { background-color: #334F9D; color: #FFFFFF; } /* ========================================================== RADIO - IHORN FSK ========================================================== */ /* iHorn - FSK - 868 MHz */ .product-miniature .marius-miniature-labels__radio.radio-ihorn-fsk { background-color: #187F83; color: #FFFFFF; } /* ========================================================== NETWORK - 4G + ETHERNET ========================================================== */ /* 4G + Ethernet (RJ45) */ .product-miniature .marius-miniature-labels__network.network-4g-ethernet { background-color: #626B75; color: #FFFFFF; } /* ========================================================== NETWORK - 4G + WI-FI ========================================================== */ /* 4G + Wi-Fi */ .product-miniature .marius-miniature-labels__network.network-4g-wifi { background-color: #167D53; color: #FFFFFF; } /* ========================================================== NETWORK - 4G + ETHERNET + WI-FI ========================================================== */ /* 4G + Ethernet (RJ45) + Wi-Fi */ .product-miniature .marius-miniature-labels__network.network-4g-ethernet-wifi { background-color: #273746; color: #FFFFFF; } /* ========================================================== NETWORK - ETHERNET + WI-FI ========================================================== */ /* Ethernet (RJ45) + Wi-Fi */ .product-miniature .marius-miniature-labels__network.network-ethernet-wifi { background-color: #477D88; color: #FFFFFF; } /* ========================================================== NETWORK - ETHERNET ONLY ========================================================== */ /* Ethernet (RJ45) */ .product-miniature .marius-miniature-labels__network.network-ethernet { background-color: #AAB2BA; color: #111827; } /* ========================================================== NETWORK - WI-FI ONLY ========================================================== */ /* Wi-Fi */ .product-miniature .marius-miniature-labels__network.network-wifi { background-color: #3777AD; color: #FFFFFF; } /* ========================================================== NETWORK - 4G ONLY ========================================================== */ /* 4G */ .product-miniature .marius-miniature-labels__network.network-4g { background-color: #4D5968; color: #FFFFFF; } /* ========================================================== CHECK ICON - GREEN ========================================================== */ .product-miniature .marius-miniature-labels__check { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 12px; width: 12px; height: 12px; background: #51b978; color: #FFFFFF; border-radius: 2px; font-size: 10px; font-weight: 600; line-height: 1; } /* ========================================================== MOBILE - LONG LABELS ========================================================== */ @media (max-width: 767px) { .product-miniature .marius-miniature-labels { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 5px !important; gap: 4px; max-width: 100%; width: 100%; } .product-miniature .marius-miniature-labels__radio, .product-miniature .marius-miniature-labels__network { font-size: 10px; font-weight: 600; line-height: 1.3; } .product-miniature .product-miniature__top > .marius-miniature-labels { position: relative; top: auto; bottom: auto; left: auto; right: auto; z-index: 1; width: 100%; max-width: 100%; margin-top: 6px; padding: 0 6px; pointer-events: none; } .product-miniature .marius-miniature-labels__radio, .product-miniature .marius-miniature-labels__network { font-size: 10px; font-weight: 600; line-height: 1.3; } } /* ========================================================== MARIUS - PRODUCT PAGE EXTRA PROPERTY LABELS - 14 DYNAMIC COLORS ========================================================== */ /* ========================================================== LABELS - POSITIONING CONTEXT ========================================================== */ .page-product .product__carousel { position: relative; } /* ========================================================== LABELS - POSITION ========================================================== */ .page-product .product__carousel > .marius-miniature-labels { position: absolute; top: 8px; left: 8px; z-index: 5; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; max-width: calc(100% - 60px); pointer-events: none; } /* ========================================================== LABELS - COMMON STYLE ========================================================== */ .page-product .product__carousel .marius-miniature-labels__radio, .page-product .product__carousel .marius-miniature-labels__network { display: inline-flex; align-items: center; gap: 4px; width: fit-content; max-width: 100%; padding: 3px 6px; border-radius: 3px; font-size: 14px; font-weight: 600; font-family: "Montserrat", sans-serif; line-height: 1.3; overflow-wrap: break-word; } /* ========================================================== DEFAULT COLORS - FALLBACK ========================================================== */ .page-product .product__carousel .marius-miniature-labels__radio { background-color: #95003B; color: #FFFFFF; } .page-product .product__carousel .marius-miniature-labels__network { background-color: #AAAAAA; color: #000000; } /* ========================================================== RADIO - MEIAN ASK ========================================================== */ /* Meian - ASK - 433 MHz / 868 MHz */ .page-product .product__carousel .marius-miniature-labels__radio.radio-ask-dual { background-color: #95003B; color: #FFFFFF; } /* Meian - ASK - 433 MHz */ .page-product .product__carousel .marius-miniature-labels__radio.radio-ask-433 { background-color: #AD3158; color: #FFFFFF; } /* Meian - ASK - 868 MHz */ .page-product .product__carousel .marius-miniature-labels__radio.radio-ask-868 { background-color: #78324D; color: #FFFFFF; } /* ========================================================== RADIO - MEIAN FSK ========================================================== */ /* Meian - FSK - 433 MHz / 868 MHz */ .page-product .product__carousel .marius-miniature-labels__radio.radio-fsk-dual { background-color: #2563C7; color: #FFFFFF; } /* Meian - FSK - 433 MHz */ .page-product .product__carousel .marius-miniature-labels__radio.radio-fsk-433 { background-color: #386EAE; color: #FFFFFF; } /* Meian - FSK - 868 MHz */ .page-product .product__carousel .marius-miniature-labels__radio.radio-fsk-868 { background-color: #334F9D; color: #FFFFFF; } /* ========================================================== RADIO - IHORN FSK ========================================================== */ /* iHorn - FSK - 868 MHz */ .page-product .product__carousel .marius-miniature-labels__radio.radio-ihorn-fsk { background-color: #187F83; color: #FFFFFF; } /* ========================================================== NETWORK - 4G + ETHERNET ========================================================== */ /* 4G + Ethernet (RJ45) */ .page-product .product__carousel .marius-miniature-labels__network.network-4g-ethernet { background-color: #626B75; color: #FFFFFF; } /* ========================================================== NETWORK - 4G + WI-FI ========================================================== */ /* 4G + Wi-Fi */ .page-product .product__carousel .marius-miniature-labels__network.network-4g-wifi { background-color: #167D53; color: #FFFFFF; } /* ========================================================== NETWORK - 4G + ETHERNET + WI-FI ========================================================== */ /* 4G + Ethernet (RJ45) + Wi-Fi */ .page-product .product__carousel .marius-miniature-labels__network.network-4g-ethernet-wifi { background-color: #273746; color: #FFFFFF; } /* ========================================================== NETWORK - ETHERNET + WI-FI ========================================================== */ /* Ethernet (RJ45) + Wi-Fi */ .page-product .product__carousel .marius-miniature-labels__network.network-ethernet-wifi { background-color: #477D88; color: #FFFFFF; } /* ========================================================== NETWORK - ETHERNET ONLY ========================================================== */ /* Ethernet (RJ45) */ .page-product .product__carousel .marius-miniature-labels__network.network-ethernet { background-color: #AAB2BA; color: #111827; } /* ========================================================== NETWORK - WI-FI ONLY ========================================================== */ /* Wi-Fi */ .page-product .product__carousel .marius-miniature-labels__network.network-wifi { background-color: #3777AD; color: #FFFFFF; } /* ========================================================== NETWORK - 4G ONLY ========================================================== */ /* 4G */ .page-product .product__carousel .marius-miniature-labels__network.network-4g { background-color: #4D5968; color: #FFFFFF; } /* ========================================================== CHECK ICON - GREEN ========================================================== */ .page-product .product__carousel .marius-miniature-labels__check { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 12px; width: 12px; height: 12px; background: #51b978; color: #FFFFFF; border-radius: 2px; font-size: 12px; font-weight: 600; line-height: 1; } /* ========================================================== MOBILE - PRODUCT PAGE LABELS ========================================================== */ @media (max-width: 767px) { .page-product .product__carousel > .marius-miniature-labels { top: 8px; left: 8px; max-width: calc(100% - 55px); } .page-product .product__carousel .marius-miniature-labels__radio, .page-product .product__carousel .marius-miniature-labels__network { font-size: 10px; font-weight: 600; line-height: 1.3; } .page-product .product__carousel .marius-miniature-labels__check { font-size: 10px; } } /* ========================================================== EXTRA PROPERTIES - ICÔNES SVG CONNECTIVITÉ RÉSEAU BADGES PRODUITS - MINIATURES ET FICHES PRODUITS ========================================================== */ .marius-miniature-labels__network .marius-network-icon { display: inline-block; width: 13px; height: 13px; vertical-align: -2px; object-fit: contain; } /* ========================================================== EXTRA PROPERTIES - MOBILE BADGES CONNECTIVITÉ - LISIBILITÉ ET ICÔNES SVG ========================================================== */ @media (max-width: 767px) { .product-miniature .marius-miniature-labels__network { display: inline-block; max-width: 100%; text-align: center; font-size: 9px; line-height: 1.5; overflow-wrap: normal; word-break: normal; } .product-miniature .marius-miniature-labels__network .marius-network-icon { width: 11px; height: 11px; vertical-align: -1px; } .product-miniature .marius-miniature-labels__radio { display: inline-block; max-width: 100%; text-align: center; font-size: 9px; line-height: 1.5; overflow-wrap: normal; word-break: normal; } .product-miniature .marius-miniature-labels__radio .marius-network-icon { width: 11px; height: 11px; vertical-align: -1px; } } /* ========================================================== FICHE PRODUIT - PACK ALIGNE SUR LES LABELS ========================================================== */ body#product .product__carousel > .product-flags { position: absolute !important; top: 8px !important; right: 8px !important; left: auto !important; display: flex; width: auto !important; margin: 0 !important; padding: 0 !important; z-index: 5; } /* PACK - MEMES DIMENSIONS QUE RADIO / CONNECTIVITE */ body#product .product__carousel .product-flags .badge.pack::before { content: "🎁"; font-size: 12px; line-height: 1; margin-right: 4px; } body#product .product__carousel > .product-flags > .badge.pack { display: inline-flex; align-items: center; justify-content: center; width: fit-content; height: auto; padding: 3px 6px !important; margin: 0 !important; border-radius: 3px; font-family: "Montserrat", sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; background-color: #0b69f6; color: #ffffff; } /* MOBILE - MEME TAILLE QUE RADIO */ @media (max-width: 767px) { body#product .product__carousel > .product-flags > .badge.pack { font-size: 11px; font-weight: 600; line-height: 1.3; } } @media (max-width: 389.98px) { body#product .product__carousel > .product-flags > .badge.pack { font-size: 11px; } } /* ========================================================== MARIUS - PACK AVANTAGE - CATEGORIES Icône cadeau + alignement à gauche ========================================================== */ body:not(#product) .product-miniature .product-flags { left: 4px !important; top: 2px !important; right: auto !important; text-align: left; } body:not(#product) .product-miniature .product-flags .badge.pack { display: inline-flex; align-items: center; justify-content: flex-start; gap: 4px; } body:not(#product) .product-miniature .product-flags .badge.pack::before { content: "🎁"; font-size: 12px; line-height: 1; flex-shrink: 0; } /* ========================================================== MARIUS - PACK AVANTAGE - TURQUOISE + TEXTE NOIR Fiche produit + catégories + accueil ========================================================== */ .product-flags .badge.pack { background-color: #183B63 !important; border: 1px solid #183B63 !important; color: #ffffff !important; font-weight: 600; } /* ========================================================= MARIUS - PACK AVANTAGE - CORRECTION RECHERCHE ETS ========================================================= */ .ets_item_product .product-miniature__top { position: relative; } .ets_item_product .product-miniature .product-flags { position: absolute !important; top: 2px !important; left: 4px !important; right: auto !important; width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; z-index: 10; text-align: left; list-style: none; } .ets_item_product .product-miniature .product-flags .badge.pack { display: inline-flex !important; align-items: center; justify-content: flex-start; gap: 4px; width: max-content !important; max-width: none !important; white-space: nowrap; } /* ========================================================== MARIUS - CART REASSURANCE - HORIZONTAL 2026 PrestaShop 9.2 - Theme enfant marius_hummingbird DESKTOP : 5 blocs horizontaux TABLETTE : 3 colonnes MOBILE : 2 colonnes ========================================================== */ /* ========================================================== MARIUS - CART - ESPACEMENTS VERTICAUX ========================================================== */ @media (min-width: 768px) { body#cart .cart-grid__content { margin-block-end: 20px !important; } } /* Supprimer la marge native du module reassurance */ body#cart .marius-cart-reassurance .blockreassurance--cart { margin-block: 0 !important; } /* Espacement entre le panier et la reassurance */ body#cart .marius-cart-reassurance { margin: 20px 0; } /* ========================================================== CONTENEUR PRINCIPAL ========================================================== */ body#cart .marius-cart-reassurance { width: 100%; margin: 0; } /* ========================================================== MARIUS - CART REASSURANCE Suppression des marges natives du theme ========================================================== */ body#cart .marius-cart-reassurance .blockreassurance--cart { margin-block: 0 !important; } /* ========================================================== BLOC REASSURANCE - DESKTOP Identique au principe de la fiche produit ========================================================== */ body#cart .marius-cart-reassurance .blockreassurance { display: flex !important; flex-wrap: nowrap; align-items: stretch; width: 100%; gap: 0; padding: 0; border-width: 1px; border-style: solid; border-color: rgb(229, 231, 235); border-radius: 5px; background: #fff; } /* ========================================================== ELEMENTS DE REASSURANCE ========================================================== */ body#cart .marius-cart-reassurance .reassurance { display: flex; flex: 1 1 0; flex-direction: column; align-items: center; justify-content: flex-start; min-width: 0; padding: 10px 12px; text-align: center; text-decoration: none; color: inherit; } /* ========================================================== ICONES ========================================================== */ body#cart .marius-cart-reassurance .reassurance__image { display: flex; align-items: center; justify-content: center; margin-bottom: 8px; } body#cart .marius-cart-reassurance .reassurance__image svg, body#cart .marius-cart-reassurance .reassurance__image img { display: block; width: 42px; height: 42px; object-fit: contain; } /* ========================================================== CONTENU ========================================================== */ body#cart .marius-cart-reassurance .reassurance__content { display: block; width: 100%; } /* ========================================================== TITRES ========================================================== */ body#cart .marius-cart-reassurance .reassurance__title { display: block; font-size: 14px; font-weight: 600; line-height: 1.4; margin-bottom: 6px; } /* ========================================================== DESCRIPTIONS ========================================================== */ body#cart .marius-cart-reassurance .reassurance__desc { display: block; font-size: 13px; font-weight: 400; line-height: 1.5; color: #555; } /* ========================================================== TABLETTE - 768px à 1199px 3 colonnes ========================================================== */ @media (min-width: 768px) and (max-width: 1199px) { body#cart .marius-cart-reassurance .blockreassurance { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: 16px 14px; } body#cart .marius-cart-reassurance .reassurance { padding: 8px; } } /* ========================================================== MOBILE - Jusqu'à 767px 2 colonnes ========================================================== */ @media (max-width: 767px) { body#cart .marius-cart-reassurance { margin: 20px 0; } body#cart .marius-cart-reassurance .blockreassurance { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; padding: 18px 12px; } body#cart .marius-cart-reassurance .reassurance { padding: 6px; } body#cart .marius-cart-reassurance .reassurance__title { font-size: 12px; line-height: 1.4; } body#cart .marius-cart-reassurance .reassurance__desc { font-size: 11px; line-height: 1.5; } body#cart .marius-cart-reassurance .reassurance__image svg, body#cart .marius-cart-reassurance .reassurance__image img { width: 34px; height: 34px; } } /* ========================================================== MARIUS - CART REASSURANCE - 2026 PrestaShop 9.2 - marius_hummingbird DESKTOP : 5 éléments horizontaux TABLETTE : 2 éléments par ligne MOBILE : 1 élément par ligne, compact Même présentation que la fiche produit ========================================================== */ /* ========================================================== CONTENEUR PRINCIPAL ========================================================== */ body#cart .marius-cart-reassurance { width: 100%; min-width: 0; margin: 20px 0; } /* ========================================================== BLOC REASSURANCE ========================================================== */ body#cart .marius-cart-reassurance .blockreassurance { display: flex !important; flex-direction: row; flex-wrap: nowrap; align-items: stretch; width: 100%; min-width: 0; gap: 0; padding: 12px 14px; border: 1px solid #e5e7eb; border-radius: 5px; background: #fff; box-sizing: border-box; } /* ========================================================== SUPPRESSION DES MARGES NATIVES ========================================================== */ body#cart .marius-cart-reassurance .blockreassurance--cart { margin-block: 0 !important; } /* ========================================================== CHAQUE ELEMENT ========================================================== */ body#cart .marius-cart-reassurance .reassurance { display: flex; flex: 1 1 0; flex-direction: column; align-items: center; justify-content: flex-start; width: auto; min-width: 0; min-height: 0; margin: 0; padding: 10px 12px; text-align: center; text-decoration: none; color: inherit; box-sizing: border-box; } /* ========================================================== ICONES ========================================================== */ body#cart .marius-cart-reassurance .reassurance__image { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; width: auto; height: auto; margin: 0 0 8px; padding: 0; } body#cart .marius-cart-reassurance .reassurance__image svg, body#cart .marius-cart-reassurance .reassurance__image img { display: block; width: 42px; height: 42px; max-width: 100%; object-fit: contain; } /* ========================================================== CONTENU ========================================================== */ body#cart .marius-cart-reassurance .reassurance__content { display: block; width: 100%; min-width: 0; margin: 0; padding: 0; } /* ========================================================== TITRES ========================================================== */ body#cart .marius-cart-reassurance .reassurance__title { display: block; margin: 4px 0 6px; padding: 0; font-size: 14px; font-weight: 600; line-height: 1.35; text-align: center; } /* ========================================================== DESCRIPTIONS ========================================================== */ body#cart .marius-cart-reassurance .reassurance__desc { display: block; margin: 0; padding: 0; font-size: 13px; font-weight: 400; line-height: 1.4; text-align: center; color: #555; } /* ========================================================== TABLETTE - JUSQU'A 991px 2 ELEMENTS PAR LIGNE ========================================================== */ @media (max-width: 991px) { body#cart .marius-cart-reassurance .blockreassurance { flex-wrap: wrap; } body#cart .marius-cart-reassurance .reassurance { flex: 0 0 50% !important; width: 50% !important; max-width: 50% !important; padding: 15px !important; } } /* ========================================================== MOBILE - JUSQU'A 575px 1 ELEMENT PAR LIGNE ICONE + TITRE UNIQUEMENT ESPACEMENTS COMPACTS ========================================================== */ @media (max-width: 575px) { /* Conteneur extérieur */ body#cart .marius-cart-reassurance { width: 100%; margin-top: 12px; margin-bottom: 16px; } /* Bloc principal */ body#cart .marius-cart-reassurance .blockreassurance { display: flex !important; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 0; padding: 12px 14px; } /* Chaque élément */ body#cart .marius-cart-reassurance .reassurance { display: flex; flex: 0 0 auto !important; flex-direction: column; align-items: center; justify-content: center; width: 100% !important; max-width: 100% !important; min-height: 0; height: auto; margin: 0 !important; padding: 10px 0 !important; gap: 0; text-align: center; } /* Icônes */ body#cart .marius-cart-reassurance .reassurance__image { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; width: auto; height: auto; margin: 0 0 6px !important; padding: 0 !important; } body#cart .marius-cart-reassurance .reassurance__image svg, body#cart .marius-cart-reassurance .reassurance__image img { display: block; width: 40px; height: 40px; object-fit: contain; } /* Contenu */ body#cart .marius-cart-reassurance .reassurance__content { display: block; width: 100%; margin: 0 !important; padding: 0 !important; } /* Titres */ body#cart .marius-cart-reassurance .reassurance__title { display: block; margin: 0 !important; padding: 0 !important; font-size: 14px; font-weight: 600; line-height: 1.3; text-align: center; } /* Masquer les descriptions */ body#cart .marius-cart-reassurance .reassurance__desc { display: none !important; } /* Masquer les sauts de ligne du module lorsqu'il n'y a plus de description */ body#cart .marius-cart-reassurance .reassurance__content br { display: none; } } /* ========================================================== PANIER - SUPPRESSION DE LA MARGE NATIVE Sous la colonne des produits ========================================================== */ @media (min-width: 768px) { body#cart .cart-grid__content { margin-block-end: 0 !important; } } /* ========================================================== MARIUS - BLOG RELATED - BADGE ARTICLE DE BLOG Icône journal ========================================================== */ .marius-related-blog__flags .badge.pack { display: inline-flex; align-items: center; gap: 4px; font-family: "Montserrat", sans-serif !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1.3 !important; } .marius-related-blog__flags .badge.pack::before { content: "✍️"; display: inline-block; font-size: 12px; line-height: 1; flex-shrink: 0; } /* MOBILE - MEME TAILLE QUE RADIO */ @media (max-width: 767px) { .marius-related-blog__flags .badge.pack { font-size: 11px !important; } } @media (max-width: 389.98px) { .marius-related-blog__flags .badge.pack { font-size: 11px !important; } } @media (max-width: 767px) { .marius-related-blog__flags .badge.pack::before { font-size: 11px !important; } } @media (max-width: 389.98px) { .marius-related-blog__flags .badge.pack::before { font-size: 11px !important; } } /* ========================================================== MARIUS - DISPONIBILITÉ MINIATURES 2026 PrestaShop 9.2 - Thème marius_hummingbird VERT : Article en stock BLEU : Derniers articles en stock ROUGE : Victime de son succès... Position : bas à droite de l'image Disparition au survol sur ordinateur ========================================================== */ /* ========================================================== CONTEXTE DE POSITIONNEMENT ========================================================== */ .product-miniature .product-miniature__top { position: relative; } /* ========================================================== STYLE COMMUN AUX TROIS BADGES ========================================================== */ .product-miniature .marius-miniature-availability { position: absolute; top: auto; right: 6px; bottom: 6px; left: auto; z-index: 8; display: inline-flex; align-items: flex-start; justify-content: flex-start; width: fit-content; max-width: 70%; min-height: 0; padding: 4px 7px; gap: 4px; font-family: "Montserrat", sans-serif; font-size: 11px; font-weight: 500; line-height: 1.3; text-align: left; white-space: normal; border: 1px solid transparent; border-radius: 4px; box-shadow: none; box-sizing: border-box; } /* ========================================================== ICONES ========================================================== */ .product-miniature .marius-miniature-availability .material-icons { display: inline-block; flex: 0 0 auto; margin: 0; font-size: 13px; font-weight: normal; line-height: 1.3; color: inherit; } /* ========================================================== TEXTE ========================================================== */ .product-miniature .marius-miniature-availability span { min-width: 0; font-size: inherit; font-weight: inherit; line-height: inherit; color: inherit; } /* ========================================================== VERT - ARTICLE EN STOCK Même palette que la fiche produit ========================================================== */ .product-miniature .marius-miniature-in-stock { color: #286443; background: rgba(232, 243, 237, 0.96); border-color: #d2e6da; } /* ========================================================== BLEU - DERNIERS ARTICLES EN STOCK ========================================================== */ .product-miniature .marius-miniature-low-stock {/*ffffffffffffff*/ color: #765b18 !important; background: #fff6da !important; border-color: #eadcae !important; } /* ========================================================== ROUGE - RUPTURE DE STOCK Conserver le design déjà validé ========================================================== */ .product-miniature .marius-miniature-out-of-stock { color: #8e252b; background: rgba(251, 234, 236, 0.96); border-color: #f1d0d4; } /* ========================================================== MOBILE - JUSQU'A 575px ========================================================== */ @media (max-width: 575px) { .product-miniature .marius-miniature-availability { right: 4px; bottom: 4px; max-width: 85%; padding: 3px 5px; font-size: 10px; } .product-miniature .marius-miniature-availability .material-icons { font-size: 12px; } } /* ========================================================== DESKTOP - MASQUER AU SURVOL Pour laisser apparaître les promotions et Quick View ========================================================== */ @media (hover: hover) and (pointer: fine) { .product-miniature:hover .marius-miniature-availability { opacity: 0; visibility: hidden; pointer-events: none; } } /* ========================================================== FICHE PRODUIT - MASQUER LE FLAG RUPTURE Le message de disponibilité existe déjà sous le prix ========================================================== */ body#product .product__carousel .product-flags .badge.out_of_stock { display: none !important; } /* ========================================================== MARIUS - DISPONIBILITÉ DES DÉCLINAISONS PrestaShop 9.2 - Design 2026 ========================================================== */ /* ========================================================== MESSAGE PRINCIPAL - RUPTURE DE STOCK ========================================================== */ .product__availability-status.text-danger { display: flex; align-items: center; gap: 7px; width: fit-content; max-width: 100%; font-size: 14px; font-weight: 600; padding: 4px 9px; line-height: 1.45; background: #fff5f5; border: 1px solid #f1d1d1; border-radius: 5px; color: #b93838 !important; box-shadow: none; } /* Icône rupture */ .product__availability-status.text-danger .product__availability-icon { flex: 0 0 auto; margin: 0; color: #c53d3d !important; } /* Texte rupture */ .product__availability-status.text-danger .product__availability-messages { min-width: 0; line-height: 1.45; } /* ========================================================== MESSAGE ALTERNATIF - VERSION DISPONIBLE ========================================================== */ #product-availability .marius-alternative-stock { display: flex; align-items: center; gap: 7px; width: fit-content; max-width: 100%; margin-top: 7px; padding: 4px 9px; background: #effaf3; border: 1px solid #cce9d6; border-radius: 5px; color: #16804a; font-size: 14px; font-weight: 600; line-height: 1.45; box-shadow: none; } /* Coche verte */ #product-availability .marius-alternative-stock__icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 20px; width: 20px; height: 20px; background: #dcf3e5; border-radius: 50%; color: #16804a; font-size: 14px; font-weight: 700; line-height: 1; } /* Texte du message alternatif */ #product-availability .marius-alternative-stock__text { min-width: 0; color: #16804a; } /* ========================================================== MOBILE ========================================================== */ @media (max-width: 767px) { .product__availability-status.text-danger { padding: 4px 9px; font-size: 12px; } #product-availability .marius-alternative-stock { padding: 4px 9px; gap: 5px; font-size: 12px; } } /* ========================================================== MARIUS - HAUTEUR UNIFORME DES BADGES DE STOCK ========================================================== */ #product-availability .product__availability-status.text-danger, #product-availability .marius-alternative-stock { box-sizing: border-box; min-height: 28px; padding-top: 0; padding-bottom: 0; align-items: center; } /* Icône rouge */ #product-availability .product__availability-status.text-danger .product__availability-icon { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex: 0 0 20px; font-size: 20px; line-height: 1; } /* Icône verte */ #product-availability .marius-alternative-stock__icon { width: 20px; height: 20px; flex: 0 0 20px; line-height: 1; } /* Même hauteur de ligne pour les textes */ #product-availability .product__availability-messages, #product-availability .marius-alternative-stock__text { line-height: 20px; } /* ========================================================== MARIUS - DATE DE DISPONIBILITÉ PrestaShop 9.2 - Design 2026 ========================================================== */ #product-availability .marius-availability-date { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; width: fit-content; max-width: 100%; margin-top: 2px; padding: 4px 9px; color: #475569; font-size: 14px; font-weight: 400; line-height: 1.45; } /* Icône colis */ #product-availability .marius-availability-date > span:first-child { flex: 0 0 auto; font-size: 14px; line-height: 1; } /* Libellé */ #product-availability .marius-availability-date strong { color: #334155; font-weight: 600; } /* Mobile */ @media (max-width: 767px) { #product-availability .marius-availability-date { font-size: 12px; padding: 4px 9px; gap: 5px; } } /* ========================================================== MARIUS - ESPACEMENT DES INFORMATIONS COMPLÉMENTAIRES Fiche produit - Desktop ≥ 1200px PrestaShop 9.2 - Design 2026 ========================================================== */ .page-product .product__additional-info { gap: 1rem; } /* ========================================================== MARIUS - ALERTE DISPONIBILITÉ Design harmonisé avec ZZZ OFFERS - 2026 ========================================================== */ .ps-emailalerts__content { margin-block-end: 0; } .ps-emailalerts.ps-emailalerts--product { background: #f7f9fc; border: 1px solid #e2e6ea; border-radius: 5px; padding: 0; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.04); } /* Titre */ .ps-emailalerts.ps-emailalerts--product .ps-emailalerts__content > p.h4 { color: #334155; font-size: 14px; font-weight: 600; line-height: 1.4; } /* Description */ .ps-emailalerts.ps-emailalerts--product .ps-emailalerts__content > p.mb-0:not(.h4) { color: #475569; font-size: 13px; font-weight: 400; line-height: 1.5; } /* Champ e-mail */ .ps-emailalerts.ps-emailalerts--product input[type="email"] { font-size: 14px; } /* Bouton */ .ps-emailalerts.ps-emailalerts--product button[data-ps-action="emailalerts-subscribe"] { font-size: 13px; font-weight: 600; line-height: 1.4; } /* Mobile */ @media (max-width: 767px) { .ps-emailalerts.ps-emailalerts--product { padding: 0; } .ps-emailalerts.ps-emailalerts--product .ps-emailalerts__content > p.mb-0:not(.h4) { font-size: 12px; } } /* ========================================================== MARIUS - PACK AVANTAGE - HAUT GAUCHE ========================================================== */ .product-miniature .product-flags { margin: 0 !important; padding: 0 !important; list-style: none; } body:not(#product) .product-miniature .product-flags { position: absolute; top: 0 !important; left: 0 !important; right: auto; bottom: auto; margin: 0; padding: 0; list-style: none; } .product-miniature .product-flags .badge.pack { position: absolute; top: 6px; left: 6px; right: auto; bottom: auto; z-index: 8; display: inline-flex; align-items: center; justify-content: flex-start; width: fit-content; max-width: 70%; min-height: 0; padding: 3px 6px; gap: 4px; font-family: "Montserrat", sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; white-space: normal; text-align: left; color: #ffffff; background: #203864; border: 1px solid transparent; border-radius: 4px; box-shadow: none; box-sizing: border-box; } /* Mobile */ @media (max-width: 767px) { .product-miniature .product-flags .badge.pack { font-size: 11px; } } @media (max-width: 389.98px) { .product-miniature .product-flags .badge.pack { font-size: 10px; } } /* ========================================================== MARIUS - HOME PRODUCT SLIDER HARMONISATION AVEC LE SLIDER ACCESSOIRES ========================================================== */ /* Cartes de même hauteur dans chaque carrousel */ .zzz-home-products-block__grid { align-items: stretch !important; } .zzz-home-products-block__grid > .product-miniature { align-self: stretch !important; height: auto !important; display: flex !important; flex-direction: column !important; min-height: 0; } /* La carte intérieure occupe toute la hauteur */ .zzz-home-products-block__grid > .product-miniature > .product-miniature__inner { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; height: 100% !important; width: 100%; } /* Informations et commandes alignées verticalement */ .zzz-home-products-block__grid .product-miniature__bottom { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; } .zzz-home-products-block__grid .product-miniature__infos { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; min-height: 0; } .zzz-home-products-block__grid .product-miniature__prices { margin-top: auto !important; } .zzz-home-products-block__grid .product-miniature__actions { flex-shrink: 0 !important; } /* Mobile : même largeur que le slider accessoires */ @media (max-width: 575px) { .zzz-home-products-block__grid > .product-miniature { flex: 0 0 calc(100% - 42px) !important; width: calc(100% - 42px) !important; min-width: calc(100% - 42px) !important; max-width: calc(100% - 42px) !important; } } /* ========================================================== MARIUS - HOME SLIDER QUANTITÉ IDENTIQUE AU SLIDER ACCESSOIRES ========================================================== */ @media (max-width: 767.98px) { /* Le groupe occupe toute la largeur disponible */ .zzz-home-products-block .product-miniature__form .quantity-button__group { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; width: 100% !important; min-width: 0 !important; } /* Boutons moins et plus */ .zzz-home-products-block .quantity-button__group > .decrement, .zzz-home-products-block .quantity-button__group > .increment { flex: 0 0 38px !important; width: 38px !important; min-width: 38px !important; max-width: 38px !important; padding: 0 !important; } /* Seul le champ central s'étire */ .zzz-home-products-block .quantity-button__group > .form-control { flex: 1 1 0 !important; width: 1% !important; min-width: 0 !important; max-width: none !important; text-align: center !important; } } /* ========================================================== MARIUS - BORDURE CARTES PRODUITS ACCUEIL IDENTIQUE AUX CARTES DE LA FICHE PRODUIT ========================================================== */ @media (max-width: 767.98px) { .zzz-home-products-block__grid > .product-miniature > .product-miniature__inner { border: 1px solid #e6e9ed !important; border-radius: 5px !important; background: #fff !important; overflow: hidden !important; } } /* ========================================================== MARIUS - HOME PRODUCTS SLIDER BORDURE IDENTIQUE AU SLIDER ACCESSOIRES ========================================================== */ .zzz-home-products-block__grid { background: #fff !important; border-top: 1px solid #5f8e2f !important; border-right: 1px solid #ebebeb !important; border-bottom: 1px solid #ebebeb !important; border-left: 1px solid #ebebeb !important; border-radius: 0 0 5px 5px !important; } /* ========================================================== MARIUS - HOME PRODUCTS TITRES IDENTIQUES AU SLIDER "VOUS AIMEREZ AUSSI" ========================================================== */ /* Supprimer l'espace entre le titre et le slider */ .zzz-home-products-block__header { margin: 0 !important; text-align: left !important; } /* Onglet vert */ .zzz-home-products-block__title { position: relative !important; z-index: 1; display: table !important; width: auto !important; max-width: 100% !important; margin: 0 !important; padding: 8px 18px !important; font-family: "Montserrat", sans-serif !important; font-size: 17px !important; font-weight: 600 !important; line-height: 18px !important; letter-spacing: 0.15px !important; text-transform: uppercase !important; text-align: left !important; color: #fff !important; background: linear-gradient( to bottom, #6fb828 0%, #5f8e2f 100% ) !important; border: 1px solid #5f862f !important; border-bottom: 0 !important; border-radius: 5px 5px 0 0 !important; box-shadow: 0 0 4px rgba(0, 0, 0, 0.27) !important; } /* Liens des titres de catégories */ .zzz-home-products-block__title a, .zzz-home-products-block__title a:hover { color: #fff !important; text-decoration: none !important; } /* Mobile */ @media (max-width: 767.98px) { .zzz-home-products-block__title { font-size: 17px !important; line-height: 18px !important; padding: 8px 18px !important; white-space: normal !important; overflow-wrap: break-word; } } /* ========================================================== MARIUS - HOME PRODUCTS LARGEUR IDENTIQUE AUX FICHES PRODUITS ========================================================== */ @media (min-width: 1200px) { .zzz-home-products-block > .container { width: 100% !important; max-width: 1440px !important; margin-left: auto !important; margin-right: auto !important; } } /* ========================================================== MARIUS - HOME PRODUCTS SLIDER BOUTON VOIR TOUS LES PRODUITS EN BAS À DROITE ========================================================== */ /* Le slider contient les cartes et le bouton */ .zzz-home-products-block__slider { position: relative; width: 100%; min-width: 0; } /* Bouton aligné à droite sous les cartes */ .zzz-home-products-block__slider .zzz-home-products-block__footer { display: flex !important; justify-content: flex-end !important; align-items: center !important; width: 100%; margin: 0 !important; padding: 0 16px 16px !important; } /* Présentation du bouton */ .zzz-home-products-block__footer .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 8px 16px; font-family: "Montserrat", sans-serif; font-size: 13px; font-weight: 600; border-radius: 5px; text-decoration: none; } /* Mobile */ @media (max-width: 767.98px) { .zzz-home-products-block__slider .zzz-home-products-block__footer { padding: 0 12px 12px !important; } } /* MARIUS - HOME SLIDER - CADRE COMPLET AVEC FOOTER */ /* Bordure autour des cartes ET du bouton */ .zzz-home-products-block--category .zzz-home-products-block__slider { background: #fff !important; border: 1px solid #ebebeb !important; border-top-color: #5f8e2f !important; border-radius: 0 0 5px 5px !important; } /* Supprimer l'ancienne bordure autour des cartes uniquement */ .zzz-home-products-block--category .zzz-home-products-block__grid { background: transparent !important; border: 0 !important; border-radius: 0 !important; } /* Bouton à l'intérieur du cadre, en bas à droite */ .zzz-home-products-block--category .zzz-home-products-block__footer { display: flex !important; justify-content: flex-end !important; padding: 0 15px 15px !important; margin: 0 !important; } @media (max-width: 767.98px) { .zzz-home-products-block--category .zzz-home-products-block__footer { padding: 0 12px 12px !important; } } /* ========================================================== MARIUS - PACK AVANTAGE MINIATURES SUR FICHE PRODUIT - PRESTASHOP 9.2 ========================================================== */ body#product .product-miniature .product-flags { position: absolute; top: 0; left: 0; right: auto; bottom: auto; margin: 0 !important; padding: 0 !important; list-style: none; z-index: 8; } body#product .product-miniature .product-flags .badge.pack { position: absolute; top: 6px; left: 6px; right: auto; bottom: auto; display: inline-flex; align-items: center; justify-content: flex-start; gap: 4px; width: max-content; max-width: 70%; padding: 3px 6px; font-family: "Montserrat", sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; color: #ffffff; background-color: #183B63; border: 1px solid #183B63; border-radius: 4px; white-space: normal; text-align: left; box-sizing: border-box; } body#product .product-miniature .product-flags .badge.pack::before { content: "🎁"; font-size: 12px; line-height: 1; flex-shrink: 0; } @media (max-width: 767px) { body#product .product-miniature .product-flags .badge.pack { font-size: 11px; } } @media (max-width: 389.98px) { body#product .product-miniature .product-flags .badge.pack { font-size: 11px; } } /* ========================================================== MARIUS - ZZZ FOOTER BOTTOM ESPACEMENT AVEC LE BANDEAU FLOTTANT - PRESTASHOP 9.2 ========================================================== */ .footer__main:has(.zzfb) { padding-top: 10px !important; padding-bottom: 40px !important; } @media (max-width: 767.98px) { .zzfb .zzfb__identity { display: none; } } @media (max-width: 767.98px) { .footer__main:has(.zzfb) { padding-top: 0 !important; padding-bottom: 40px !important; } } /* ========================================================== MARIUS - CORRECTION MEGA MENU / MON COMPTE ========================================================== */ @media (min-width: 1200px) { .account-menu--sidebar { z-index: 1; } } /* ========================================================== MARIUS - POINTEUR MENU COMPTE ========================================================== */ #_desktop_ps_customersignin #userMenuButton { cursor: pointer; } /* ========================================================== MARIUS - MENU COMPTE Coins arrondis 5px ========================================================== */ #_desktop_ps_customersignin .dropdown-menu { border-radius: 5px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08); } #_desktop_ps_customersignin .dropdown-menu .dropdown-item:hover { background-color: #f5f7f9; } /* ========================================================== MARIUS - LARGEUR DYNAMIQUE DU MENU COMPTE ========================================================== */ @media (min-width: 1200px) { #_desktop_ps_customersignin .dropdown { width: max-content; max-width: 100%; } #_desktop_ps_customersignin .dropdown-menu { min-width: 100%; width: max-content; max-width: none; border-radius: 5px; } } /* ========================================================== MARIUS BODY ========================================================== */ .page:not(body) { padding-bottom: 1rem !important; } @media (max-width: 767.98px) { .page:not(body) { padding-bottom: 1rem !important; } } /* ========================================================== MARIUS - FIL D'ARIANE ESPACEMENT SOUS LE BREADCRUMB - PRESTASHOP 9.2 ========================================================== */ .breadcrumb__wrapper { margin-bottom: 1rem; } /* ========================================================== YBC BLOG - PERSONNALISATION DU SLIDER NIVO ========================================================== */ #ybc_slider .nivo-caption { background-color: rgba(255, 255, 255, .9); bottom: 45px; color: #313131; font-size: 22px; font-weight: 600; line-height: 30px; padding: 10px 15px; opacity: 1; position: absolute; width: 100%; } /* ========================================================== MARIUS - MOYENS DE PAIEMENT PrestaShop 9.2 - Fiche produit et panier Desktop / Tablette / Mobile ========================================================== */ /* ========================================================== 1. FICHE PRODUIT - CONTENEUR PRINCIPAL ========================================================== */ .page-product #ps_checkout-payment-method-logos-container { width: 100%; min-width: 0; margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; box-sizing: border-box; } /* ========================================================== 2. FICHE PRODUIT - TROIS GROUPES DE LOGOS ========================================================== */ .page-product .marius-payment-methods { display: flex; flex-wrap: nowrap; align-items: center; gap: 10px; width: 100%; min-width: 0; box-sizing: border-box; } /* ========================================================== 3. FICHE PRODUIT - GROUPES DE PAIEMENT ========================================================== */ .page-product .marius-payment-method { display: flex; flex: 0 1 auto; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 4px; min-width: 0; min-height: 32px; padding: 5px 8px; background: #fff; border: 1px solid #d9d9d9; border-radius: 5px; box-sizing: border-box; } /* ========================================================== 4. FICHE PRODUIT - LOGOS ========================================================== */ .page-product .marius-payment-logo { display: block; flex: 0 1 auto; width: auto; height: 20px; max-width: 42px; min-width: 0; object-fit: contain; } /* PayPal 4x */ .page-product .marius-payment-logo--paypal-4x { height: 22px; max-width: none; } /* ========================================================== 5. FICHE PRODUIT - PAIEMENT SECURISE ========================================================== */ .page-product .marius-payment-secure { display: flex; align-items: center; justify-content: flex-start; gap: 4px; width: 100%; min-width: 0; margin-top: 5px; padding: 0; color: #777; font-size: 0.95rem; font-weight: 400; line-height: 18px; text-align: left; } .page-product .marius-payment-secure img { display: block; width: 14px; height: 14px; flex: 0 0 14px; } .page-product .marius-payment-secure span { white-space: nowrap; margin-right: 10px; } @media (max-width: 767.98px) { .page-product .marius-payment-secure span { margin-right: 0; } } .page-product #ps_checkout-payment-method-logos-container.ps_checkout-payment-method-logos-container-marius { margin-top: 1rem !important; margin-bottom: 0.5rem !important; } /* ========================================================== 6. FICHE PRODUIT - VISIBILITE SELON STOCK ========================================================== */ /* Produit disponible */ .page-product .ps_checkout-payment-method-logos-container-marius { display: block; } /* Produit hors stock */ .page-product .ps_checkout-payment-method-logos-container-marius-oos { display: none; } /* ========================================================== 7. FICHE PRODUIT - ORDINATEUR ET TABLETTE Logos + Paiement sécurisé sur une seule ligne ========================================================== */ @media (min-width: 768px) { .page-product #ps_checkout-payment-method-logos-container.ps_checkout-payment-method-logos-container-marius { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: 12px; } .page-product .marius-payment-methods { width: auto; flex: 0 1 auto; } .page-product .marius-payment-secure { width: auto; flex: 0 0 auto; margin-top: 0; white-space: nowrap; } } /* ========================================================== 8. FICHE PRODUIT - MOBILE 767 PX ET MOINS Paiement sécurisé centré au-dessus des logos Trois groupes de logos sur une seule ligne ========================================================== */ @media (max-width: 767.98px) { /* Conteneur principal */ .page-product #ps_checkout-payment-method-logos-container.ps_checkout-payment-method-logos-container-marius { display: block; width: 100%; max-width: 100%; min-width: 0; margin-top: 1rem !important; margin-bottom: 0.5rem !important; padding: 0; } /* Paiement sécurisé centré au-dessus des logos */ .page-product .marius-payment-secure { display: flex; align-items: center; justify-content: center; width: 100%; min-width: 0; margin: 0 0 3px; padding: 0; gap: 5px; color: #777; font-size: 0.95rem; font-weight: 400; line-height: 20px; text-align: center; } .page-product .marius-payment-secure img { display: block; width: 14px; height: 14px; flex: 0 0 14px; } /* Trois colonnes proportionnelles */ .page-product .marius-payment-methods { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.85fr) minmax(0, 0.95fr); align-items: stretch; justify-content: normal; width: 100%; min-width: 0; gap: 6px; } /* Groupes de paiement */ .page-product .marius-payment-method { width: 100%; min-width: 0; gap: 3px; padding: 4px 3px; } /* Logos */ .page-product .marius-payment-logo { height: 18px; max-width: 36px; } /* PayPal 4x */ .page-product .marius-payment-logo--paypal-4x { height: 20px; max-width: 85px; } } /* ========================================================== 9. FICHE PRODUIT - PETITS MOBILES 389 PX ET MOINS Trois groupes compacts - pleine largeur ========================================================== */ @media (max-width: 389.98px) { /* Répartition sur toute la largeur */ .page-product .marius-payment-methods { grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.85fr) minmax(0, 0.95fr); gap: 4px; } /* Groupes plus compacts */ .page-product .marius-payment-method { gap: 2px; min-height: 28px; padding: 3px; } /* Logos plus petits */ .page-product .marius-payment-logo { height: 16px; max-width: 29px; } /* PayPal 4x */ .page-product .marius-payment-logo--paypal-4x { height: 18px; max-width: 68px; } } /* ========================================================== 10. PANIER - MASQUER LES LOGOS AUTOMATIQUES DE PRESTASHOP CHECKOUT Conserver le titre "Paiement sécurisé" ========================================================== */ body#cart #ps_checkout-payment-method-logos-container { display: none !important; } /* ========================================================== 11. PANIER - CONTENEUR DES LOGOS PERSONNALISES ========================================================== */ body#cart .marius-cart-payment { width: 100%; min-width: 0; margin-top: 10px; } /* ========================================================== 12. PANIER - TROIS GROUPES SUR UNE LIGNE ========================================================== */ body#cart .marius-cart-payment .marius-payment-methods { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.85fr) minmax(0, 0.95fr); gap: 5px; width: 100%; min-width: 0; } /* ========================================================== 13. PANIER - GROUPES DE PAIEMENT ========================================================== */ body#cart .marius-cart-payment .marius-payment-method { display: flex; align-items: center; justify-content: center; gap: 2px; min-width: 0; min-height: 30px; padding: 4px 3px; border: 1px solid #d9d9d9; border-radius: 5px; background: #fff; box-sizing: border-box; } /* ========================================================== 14. PANIER - LOGOS ========================================================== */ body#cart .marius-cart-payment .marius-payment-logo { display: block; flex: 0 1 auto; width: auto; height: 16px; max-width: 29px; min-width: 0; object-fit: contain; } /* PayPal 4x */ body#cart .marius-cart-payment .marius-payment-logo--paypal-4x { height: 18px; max-width: 68px; } /* ========================================================== 15. PANIER - ORDINATEUR LARGE ========================================================== */ @media (min-width: 1200px) { body#cart .marius-cart-payment .marius-payment-logo { height: 18px; max-width: 34px; } body#cart .marius-cart-payment .marius-payment-logo--paypal-4x { height: 20px; max-width: 78px; } } /* ========================================================= MARIUS - CONNEXION PREMIUM + CONFIANCE PRESTASHOP 9.2 - CSS OPTIMISE LARGEUR 800 PX - RESPONSIVE - DESIGN EXISTANT CONSERVE ========================================================= */ /* ========================================================= 1. CONTENEUR PRINCIPAL ========================================================= */ body#authentication .marius-login-page { width: 100%; max-width: 800px; margin: 30px auto 40px; } body#authentication .marius-login-page .login__form-wrapper { width: 100%; max-width: none; } /* Masquer le titre extérieur */ body#authentication #main > h1, body#authentication #main > .page-header { display: none !important; } /* ========================================================= 2. CARTE DE CONNEXION PREMIUM ========================================================= */ body#authentication .marius-login-premium { width: 100%; max-width: 800px; margin-left: auto; margin-right: auto; padding: 36px 42px 30px; background: #ffffff; border: 1px solid #e6eaf0; border-radius: 5px; box-shadow: 0 10px 35px rgba(25, 45, 80, 0.06); } /* ========================================================= 3. EN-TETE DU FORMULAIRE ========================================================= */ .marius-login-premium__heading { text-align: center; margin-bottom: 28px; } .marius-login-premium__icon { width: 48px; height: 48px; margin: 0 auto 14px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #eef3ff; color: #4169ff; } .marius-login-premium__icon .material-icons { font-size: 25px; } .marius-login-premium__title { margin: 0 0 8px; font-size: 26px; font-weight: 700; color: #17243a; } .marius-login-premium__subtitle { margin: 0 0 12px; font-size: 14px; color: #64748b; } .marius-login-premium__secure { display: inline-flex; align-items: center; justify-content: center; gap: 5px; color: #188251; font-size: 12px; } .marius-login-premium__secure .material-icons { font-size: 16px; } /* ========================================================= 4. CHAMPS EMAIL ET MOT DE PASSE ========================================================= */ .marius-login-premium__fields input:not([type="hidden"]):not([type="checkbox"]) { background: #ffffff; border: 1px solid #d9e0e9; border-radius: 5px; min-height: 46px; box-shadow: none; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .marius-login-premium__fields input:not([type="hidden"]):not([type="checkbox"]):focus { border-color: #4169ff; box-shadow: 0 0 0 3px rgba(65, 105, 255, 0.10); outline: none; } /* ========================================================= 5. CHAMP MOT DE PASSE + BOUTON OEIL ========================================================= */ body#authentication .marius-login-premium .password-field { display: flex; flex-wrap: nowrap; align-items: stretch; width: 100%; overflow: hidden; border: 1px solid #d9e0e9; border-radius: 5px; background: #ffffff; transition: border-color 0.2s ease, box-shadow 0.2s ease; } body#authentication .marius-login-premium .password-field input.form-control { flex: 1 1 auto; width: 1%; min-width: 0; min-height: 46px; margin: 0; border: 0 !important; border-radius: 0 !important; background: #ffffff; box-shadow: none !important; outline: none !important; } body#authentication .marius-login-premium .password-field button[data-ps-action="toggle-password"] { flex: 0 0 48px; width: 48px; min-height: 46px; margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; border: 0 !important; border-left: 1px solid #e6eaf0 !important; border-radius: 0 !important; background: #f8faff !important; color: #4169ff !important; box-shadow: none !important; outline: none; } body#authentication .marius-login-premium .password-field button .material-icons { font-size: 20px; line-height: 1; } body#authentication .marius-login-premium .password-field button:hover { background: #eef3ff !important; } body#authentication .marius-login-premium .password-field:focus-within { border-color: #4169ff; box-shadow: 0 0 0 3px rgba(65, 105, 255, 0.10); } /* ========================================================= 6. MOT DE PASSE OUBLIE ========================================================= */ .marius-login-premium__forgot { text-align: right; margin: 8px 0 18px; font-size: 13px; } .marius-login-premium__forgot a { color: #4169ff; text-decoration: none; } .marius-login-premium__forgot a:hover { text-decoration: underline; } /* ========================================================= 7. BOUTON CONNEXION ========================================================= */ .marius-login-premium__submit { width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 10px; border-radius: 5px; font-weight: 600; background-color: #4169ff; border-color: #4169ff; transition: background-color 0.2s ease, box-shadow 0.2s ease; } .marius-login-premium__submit:hover { background-color: #3155df; border-color: #3155df; box-shadow: 0 4px 12px rgba(65, 105, 255, 0.18); } .marius-login-premium__submit .material-icons { font-size: 18px; } /* ========================================================= 8. REASSURANCE - LIVRAISON / ASSISTANCE / SECURITE ========================================================= */ .marius-login-premium__trust { display: flex; justify-content: space-between; gap: 10px; margin-top: 26px; padding-top: 18px; border-top: 1px solid #edf0f4; } .marius-login-premium__trust > div { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; color: #64748b; font-size: 11px; } .marius-login-premium__trust .material-icons { font-size: 22px; color: #4169ff; } /* ========================================================= 9. CREATION DE COMPTE - DESIGN MODERNE ========================================================= */ body#authentication .marius-login-page .login__register-prompt { width: 100%; margin-top: 0.5rem; text-align: center; } body#authentication .marius-login-page .login__register-prompt h2 { margin: 0 0 0.5rem; font-size: 14px; font-weight: 400; color: #64748b; } body#authentication .marius-login-page .login__register-prompt .btn { width: 100%; min-height: 44px; display: flex; align-items: center; justify-content: center; border: 1px solid #e2e6ed; border-radius: 5px; background: #ffffff; color: #4169ff; font-size: 14px; font-weight: 500; box-shadow: none; transition: all 0.2s ease; } body#authentication .marius-login-page .login__register-prompt .btn:hover { background: #eef3ff; border-color: #4169ff; color: #3155df; } /* ========================================================= 10. SEPARATEUR EXTERIEUR ========================================================= */ body#authentication .marius-login-page > hr { margin: 1rem 0 0 0; border: 0; border-top: 1px solid #edf0f4; opacity: 0.6; } /* ========================================================= 11. RESPONSIVE TABLETTE ========================================================= */ @media (min-width: 576px) and (max-width: 767.98px) { body#authentication .marius-login-premium { padding: 30px 28px; } } /* ========================================================= 12. RESPONSIVE MOBILE ========================================================= */ @media (max-width: 575.98px) { body#authentication .marius-login-page { margin: 16px auto 30px; } body#authentication .marius-login-premium { padding: 22px 16px; border-radius: 5px; box-shadow: none; } .marius-login-premium__heading { margin-bottom: 24px; } .marius-login-premium__title { font-size: 23px; } .marius-login-premium__trust { gap: 6px; } .marius-login-premium__trust > div { font-size: 10px; } .marius-login-premium__trust .material-icons { font-size: 20px; } } /* ========================================================= MARIUS - INSCRIPTION PREMIUM + CONFIANCE PRESTASHOP 9.2 DESIGN HARMONISE AVEC LA CONNEXION LARGEUR 800 PX - BORDURES 5 PX - RESPONSIVE ========================================================= */ /* ========================================================= 1. CONTENEUR PRINCIPAL ========================================================= */ body#registration .marius-register-page { width: 100%; max-width: 800px; margin: 30px auto 40px; } /* ========================================================= 2. CARTE D'INSCRIPTION PREMIUM ========================================================= */ body#registration .marius-register-premium { width: 100%; max-width: 800px; margin-left: auto; margin-right: auto; padding: 36px 42px 30px; background: #ffffff; border: 1px solid #e6eaf0; border-radius: 5px; box-shadow: 0 10px 35px rgba(25, 45, 80, 0.06); } /* ========================================================= 3. EN-TETE DU FORMULAIRE ========================================================= */ .marius-register-premium__heading { text-align: center; margin-bottom: 28px; } .marius-register-premium__icon { width: 48px; height: 48px; margin: 0 auto 14px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #eef3ff; color: #4169ff; } .marius-register-premium__icon .material-icons { font-size: 25px; } .marius-register-premium__title { margin: 0 0 8px; font-size: 26px; font-weight: 700; color: #17243a; } .marius-register-premium__subtitle { margin: 0 0 12px; font-size: 14px; color: #64748b; } .marius-register-premium__secure { display: inline-flex; align-items: center; justify-content: center; gap: 5px; color: #188251; font-size: 12px; } .marius-register-premium__secure .material-icons { font-size: 16px; } /* ========================================================= 4. CHAMPS DU FORMULAIRE ========================================================= */ body#registration .marius-register-premium__fields input.form-control:not([type="checkbox"]):not([type="radio"]) { min-height: 46px; background: #ffffff; border: 1px solid #d9e0e9; border-radius: 5px; box-shadow: none; transition: border-color 0.2s ease, box-shadow 0.2s ease; } body#registration .marius-register-premium__fields input.form-control:not([type="checkbox"]):not([type="radio"]):focus { border-color: #4169ff; box-shadow: 0 0 0 3px rgba(65, 105, 255, 0.10); outline: none; } /* ========================================================= 5. MOT DE PASSE + BOUTON OEIL ========================================================= */ body#registration .marius-register-premium .password-field { display: flex; flex-wrap: nowrap; align-items: stretch; width: 100%; overflow: hidden; border: 1px solid #d9e0e9; border-radius: 5px; background: #ffffff; transition: border-color 0.2s ease, box-shadow 0.2s ease; } body#registration .marius-register-premium .password-field input.form-control { flex: 1 1 auto; width: 1%; min-width: 0; min-height: 46px; margin: 0; border: 0 !important; border-radius: 0 !important; background: #ffffff; box-shadow: none !important; outline: none !important; } body#registration .marius-register-premium .password-field button[data-ps-action="toggle-password"] { flex: 0 0 48px; width: 48px; min-height: 46px; margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; border: 0 !important; border-left: 1px solid #e6eaf0 !important; border-radius: 0 !important; background: #f8faff !important; color: #4169ff !important; box-shadow: none !important; outline: none; } body#registration .marius-register-premium .password-field button .material-icons { font-size: 20px; line-height: 1; } body#registration .marius-register-premium .password-field button:hover { background: #eef3ff !important; } body#registration .marius-register-premium .password-field:focus-within { border-color: #4169ff; box-shadow: 0 0 0 3px rgba(65, 105, 255, 0.10); } /* ========================================================= 6. CASES A COCHER ET OPTIONS ========================================================= */ body#registration .marius-register-premium input[type="checkbox"], body#registration .marius-register-premium input[type="radio"] { accent-color: #4169ff; } body#registration .marius-register-premium .form-control-comment, body#registration .marius-register-premium .form-text { font-size: 12px; color: #64748b; } /* ========================================================= 7. BOUTON CREER MON COMPTE ========================================================= */ body#registration .marius-register-premium .buttons-wrapper { width: 100%; margin-top: 24px; } body#registration .marius-register-premium .form-control-submit { width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 5px; font-weight: 600; background-color: #4169ff; border-color: #4169ff; transition: background-color 0.2s ease, box-shadow 0.2s ease; } body#registration .marius-register-premium .form-control-submit:hover { background-color: #3155df; border-color: #3155df; box-shadow: 0 4px 12px rgba(65, 105, 255, 0.18); } /* ========================================================= 8. REASSURANCE - LIVRAISON / ASSISTANCE / SECURITE ========================================================= */ .marius-register-premium__trust { display: flex; justify-content: space-between; gap: 10px; margin-top: 26px; padding-top: 18px; border-top: 1px solid #edf0f4; } .marius-register-premium__trust > div { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; color: #64748b; font-size: 11px; } .marius-register-premium__trust .material-icons { font-size: 22px; color: #4169ff; } /* ========================================================= 9. SEPARATEUR EXTERIEUR ========================================================= */ body#registration .marius-register-page > hr { margin: 1rem 0 0 0; border: 0; border-top: 1px solid #edf0f4; opacity: 0.6; } /* ========================================================= 10. DEJA UN COMPTE - DESIGN MODERNE ========================================================= */ body#registration .marius-register-page__login-prompt { width: 100%; margin-top: 0.5rem; text-align: center; } body#registration .marius-register-page__login-prompt p { margin: 0 0 0.5rem; font-size: 14px; font-weight: 400; color: #64748b; } body#registration .marius-register-page__login-prompt .btn { width: 100%; min-height: 44px; display: flex; align-items: center; justify-content: center; border: 1px solid #e2e6ed; border-radius: 5px; background: #ffffff; color: #4169ff; font-size: 14px; font-weight: 500; box-shadow: none; transition: all 0.2s ease; } body#registration .marius-register-page__login-prompt .btn:hover { background: #eef3ff; border-color: #4169ff; color: #3155df; } /* ========================================================= 11. RESPONSIVE TABLETTE ========================================================= */ @media (min-width: 576px) and (max-width: 767.98px) { body#registration .marius-register-premium { padding: 30px 28px; } } /* ========================================================= 12. RESPONSIVE MOBILE ========================================================= */ @media (max-width: 575.98px) { body#registration .marius-register-page { margin: 16px auto 30px; } body#registration .marius-register-premium { padding: 22px 16px; border-radius: 5px; box-shadow: none; } .marius-register-premium__heading { margin-bottom: 24px; } .marius-register-premium__title { font-size: 23px; } .marius-register-premium__trust { gap: 6px; } .marius-register-premium__trust > div { font-size: 10px; } .marius-register-premium__trust .material-icons { font-size: 20px; } } /* ========================================================= MARIUS - INSCRIPTION PREMIUM CONSENTEMENTS RGPD - PRESENTATION HARMONISEE ========================================================= */ body#registration .marius-register-premium .gdpr-consent { margin: 12px 0; } body#registration .marius-register-premium .gdpr-consent .form-check { display: flex; align-items: flex-start; gap: 10px; padding-left: 0; margin-bottom: 0; } body#registration .marius-register-premium .gdpr-consent .form-check-input { flex: 0 0 16px; width: 16px; height: 16px; margin: 3px 0 0; accent-color: #4169ff; } body#registration .marius-register-premium .gdpr-consent .form-check-label { flex: 1; min-width: 0; font-size: 14px; line-height: 1.6; color: #17243a; } body#registration .marius-register-premium .gdpr-consent a { color: #4169ff; text-decoration: underline; text-underline-offset: 2px; } body#registration .marius-register-premium .gdpr-consent a:hover { color: #3155df; } /* ========================================================= MARIUS - INSCRIPTION PREMIUM MASQUER LE LABEL VIDE DU CAPTCHA ========================================================= */ body#registration .marius-register-premium label#field-captcha-label:empty { display: none !important; } /* ========================================================= MARIUS - INSCRIPTION - LABEL CAPTCHA VIDE ========================================================= */ body#registration label#field-captcha-label { display: none !important; } /* ========================================================= MARIUS - CHECKOUT CLASSIQUE + ONE PAGE CHECKOUT MOYENS DE PAIEMENT - DESIGN HARMONISÉ ========================================================= */ /* Conteneurs des moyens de paiement */ body#checkout :is( .payment-options__list, #opc-payment-methods ) { display: block; width: 100%; max-width: 100%; margin: 0; padding: 0; gap: 0 !important; row-gap: 0 !important; column-gap: 0 !important; background: #f8f9fa; border-radius: 5px; overflow: hidden; box-sizing: border-box; } /* Chaque option */ body#checkout :is( .payment-options__list, #opc-payment-methods ) .payment-option { margin: 0 !important; padding: 0; background: #f8f9fa; border-bottom: 1px solid #dee2e6; border-radius: 0; box-sizing: border-box; } /* Première option */ body#checkout :is( .payment-options__list, #opc-payment-methods ) .payment-option:first-child { border-radius: 5px 5px 0 0; } /* Dernière option */ body#checkout :is( .payment-options__list, #opc-payment-methods ) .payment-option:last-child { border-bottom: 0 !important; border-radius: 0 0 5px 5px; } /* Ligne de paiement */ body#checkout :is( .payment-options__list, #opc-payment-methods ) .payment-option__form-check { display: flex; align-items: center; position: relative; margin: 0 !important; padding: 18px 20px 18px 42px; background: transparent; border: 0; border-radius: 0; box-sizing: border-box; min-height: 64px; } /* Alignement des boutons radio */ body#checkout :is( .payment-options__list, #opc-payment-methods ) .payment-option__form-check .form-check-input { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); float: none; margin: 0 !important; flex-shrink: 0; } /* Libellés et logos */ body#checkout :is( .payment-options__list, #opc-payment-methods ) .payment-option__label { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; min-height: 24px; margin: 0; font-size: 15px; font-weight: 600; line-height: 1.5; color: #172b4d; } /* Option sélectionnée */ body#checkout :is( .payment-options__list, #opc-payment-methods ) .payment-option:has(input[type="radio"]:checked) { background: #eef4ff; } /* ========================================================= INFORMATIONS COMPLÉMENTAIRES ========================================================= */ body#checkout :is( .payment-options__list, #opc-payment-methods ) .payment-option__additional-information { width: 100%; max-width: 100%; margin: 0 !important; padding: 0 20px 18px 42px !important; background: #eef4ff; color: #343a40; font-size: 15px; line-height: 1.6; border: 0; border-radius: 0; box-sizing: border-box; } /* Texte du virement bancaire */ body#checkout :is( .payment-options__list, #opc-payment-methods ) .payment-option__additional-information > section > p { margin: 0 !important; padding: 0 !important; line-height: 1.6; } /* Paragraphes */ body#checkout :is( .payment-options__list, #opc-payment-methods ) .payment-option__additional-information p { margin-bottom: 10px; } body#checkout :is( .payment-options__list, #opc-payment-methods ) .payment-option__additional-information p:last-child { margin-bottom: 0; } /* Formulaire carte bancaire */ body#checkout :is( .payment-options__list, #opc-payment-methods ) #ps_checkout-card-fields-form { width: 100%; max-width: 100%; margin: 0 !important; padding: 0 20px 18px 42px !important; background: #eef4ff; border: 0; border-radius: 0; box-sizing: border-box; } /* Préserver les fenêtres modales */ body#checkout :is( .payment-options__list, #opc-payment-methods ) .payment-option__additional-information .modal { background: initial; } /* ========================================================= MARIUS - CHECKOUT CLASSIQUE ALIGNEMENT DES BOUTONS DE PAIEMENT PRESTASHOP 9.2 / PS_CHECKOUT - Retour livraison : ligne séparée - Virement bancaire : pleine largeur - Carte bancaire : pleine largeur - Google Pay : pleine largeur - PayPal : pleine largeur - Hauteur des boutons : 55px ========================================================= */ /* ========================================================= 1. BOUTON RETOUR ET CONFIRMATION ========================================================= */ /* Boutons sur deux lignes */ body#checkout #checkout-payment-step .buttons-wrapper--split { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 4px; } /* Bouton retour à gauche */ body#checkout #checkout-payment-step .buttons-wrapper--split > .js-back { align-self: flex-start !important; width: auto; } /* Conteneur de confirmation PrestaShop */ body#checkout #checkout-payment-step #payment-confirmation { width: 100% !important; max-width: 100% !important; margin: 0 !important; box-sizing: border-box; } /* Bouton virement bancaire */ body#checkout #checkout-payment-step #payment-confirmation .ps-shown-by-js > button { display: flex !important; align-items: center; justify-content: center; width: 100% !important; max-width: 100% !important; min-height: 55px; margin: 0 !important; border-radius: 5px; box-sizing: border-box; } /* ========================================================= 2. CARTE BANCAIRE - PS_CHECKOUT ========================================================= */ /* Conteneur du bouton carte */ body#checkout #checkout-payment-step .js-payment-ps_checkout-card { width: 100% !important; max-width: 100% !important; box-sizing: border-box; } /* Bouton de confirmation carte bancaire */ body#checkout #checkout-payment-step .ps_checkout-button > button.btn { display: flex !important; align-items: center; justify-content: center; width: 100% !important; max-width: 100% !important; min-height: 55px; margin: 0 !important; border-radius: 5px; box-sizing: border-box; } /* ========================================================= 3. GOOGLE PAY ET PAYPAL CONTENEURS PRINCIPAUX ========================================================= */ /* Sections de paiement */ body#checkout #checkout-payment-step .js-payment-ps_checkout-google_pay, body#checkout #checkout-payment-step .js-payment-ps_checkout-paypal { width: 100% !important; max-width: 100% !important; box-sizing: border-box; } /* Conteneurs des boutons */ body#checkout #checkout-payment-step #ps_checkout-google_pay-buttons-container, body#checkout #checkout-payment-step #ps_checkout-paypal-buttons-container { width: 100% !important; max-width: 100% !important; box-sizing: border-box; } /* Conteneurs internes spécifiques */ body#checkout #checkout-payment-step #ps_checkout-google_pay-buttons-container > .ps_checkout-button, body#checkout #checkout-payment-step #ps_checkout-paypal-buttons-container > .ps_checkout-button { display: block !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; box-sizing: border-box; } /* ========================================================= 4. GOOGLE PAY - 100% / 55px ========================================================= */ body#checkout #checkout-payment-step #ps_checkout-google_pay-buttons-container .gpay-card-info-container-fill { width: 100% !important; max-width: 100% !important; height: 55px !important; box-sizing: border-box; } body#checkout #checkout-payment-step #ps_checkout-google_pay-buttons-container .gpay-card-info-container-fill > button { display: block; width: 100% !important; max-width: 100% !important; height: 55px !important; min-height: 55px !important; box-sizing: border-box; border-radius: 5px; } /* ========================================================= 5. PAYPAL - 100% / 55px ========================================================= */ /* Section PayPal */ body#checkout #checkout-payment-step .js-payment-ps_checkout-paypal { align-self: stretch !important; } /* Conteneur principal PayPal */ body#checkout #checkout-payment-step #ps_checkout-paypal-buttons-container { display: block; width: 100% !important; max-width: none !important; } /* Conteneur du SDK PayPal */ body#checkout #checkout-payment-step #ps_checkout-paypal-buttons-container > .ps_checkout-button { display: block !important; width: 100% !important; max-width: none !important; margin: 0 !important; } /* Bouton PayPal */ body#checkout #checkout-payment-step #ps_checkout-paypal-buttons-container .paypal-buttons { display: block !important; width: 100% !important; max-width: none !important; height: 55px !important; min-height: 55px !important; margin: 0 !important; box-sizing: border-box; } /* Iframe PayPal */ body#checkout #checkout-payment-step #ps_checkout-paypal-buttons-container .paypal-buttons > iframe.component-frame { width: 100% !important; height: 100% !important; } /* CHECKOUT CLASSIQUE - TEXTE BOUTON CONFIRMATION */ body#checkout #checkout-payment-step #payment-confirmation .ps-shown-by-js > button { font-size: 18px !important; font-weight: 600 !important; height: 55px !important; } /* ========================================================= MARIUS - CHECKOUT CLASSIQUE CONFIRMER MA COMMANDE - 18PX / 55PX ALIGNEMENT TEXTE + FLECHE ========================================================= */ /* Boutons virement bancaire et carte bancaire */ body#checkout #checkout-payment-step #payment-confirmation .ps-shown-by-js > button, body#checkout #checkout-payment-step #ps_checkout-card-buttons-container .ps_checkout-button > button.btn { display: flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; font-size: 18px !important; font-weight: 600 !important; height: 55px !important; line-height: 1.2 !important; } /* Alignement vertical de la flèche */ body#checkout #checkout-payment-step #payment-confirmation .material-icons, body#checkout #checkout-payment-step #ps_checkout-card-buttons-container .material-icons { display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 24px !important; line-height: 1 !important; margin: 1px 0 0 0 !important; vertical-align: middle !important; } /* ========================================================= MARIUS - CHECKOUT MENU STICKY AU-DESSUS DU PANIER ========================================================= */ /* Récapitulatif du panier */ body#checkout .checkout-grid__aside, body#checkout .checkout-grid__aside-wrapper { z-index: 1 !important; } /* ========================================================= MARIUS - ONE PAGE CHECKOUT GOOGLE PAY - 100% / 55PX ========================================================= */ /* Conteneur Google Pay */ body#checkout .one-page-checkout__footer #ps_checkout-google_pay-buttons-container .gpay-card-info-container-fill { width: 100% !important; max-width: 100% !important; height: 55px !important; box-sizing: border-box; } /* Bouton Google Pay */ body#checkout .one-page-checkout__footer #ps_checkout-google_pay-buttons-container .gpay-card-info-container-fill > button { display: block; width: 100% !important; max-width: 100% !important; height: 55px !important; min-height: 55px !important; box-sizing: border-box; border-radius: 5px; } /* ========================================================= MARIUS - ONE PAGE CHECKOUT CARTE BANCAIRE - 100% / 55PX ========================================================= */ /* Conteneur du bouton carte bancaire */ body#checkout .one-page-checkout__footer .js-payment-ps_checkout-card { width: 100% !important; max-width: 100% !important; box-sizing: border-box; } /* Bouton de confirmation carte bancaire */ body#checkout .one-page-checkout__footer .ps_checkout-button > button.btn, body#checkout .one-page-checkout__footer .ps_checkout-injected-button.btn { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; max-width: 100% !important; height: 55px !important; min-height: 55px !important; margin: 0 !important; border-radius: 5px; box-sizing: border-box; } /* ========================================================= MARIUS - ONE PAGE CHECKOUT VIREMENT BANCAIRE - 100% / 55PX ========================================================= */ /* Conteneur de confirmation */ body#checkout .one-page-checkout__footer #opc-payment-confirmation { width: 100%; max-width: 100%; box-sizing: border-box; } /* ========================================================= MARIUS - ONE PAGE CHECKOUT BOUTON CONFIRMATION PAIEMENT ========================================================= */ body#checkout .one-page-checkout__footer #opc-pay-button { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; max-width: 100% !important; height: 55px !important; min-height: 55px !important; margin: 0 !important; border-radius: 5px; box-sizing: border-box; } /* MOBILE */ @media (max-width: 767.98px) { body#checkout .one-page-checkout__footer #opc-pay-button { height: auto !important; padding: 8px 12px !important; line-height: 1.5 !important; white-space: normal !important; text-align: center !important; } } /* ========================================================= MARIUS - ONE PAGE CHECKOUT FOOTER PAIEMENT - MOBILE Suppression des espacements supérieurs ========================================================= */ @media (max-width: 767.98px) { body#checkout .one-page-checkout__footer { margin-top: 0 !important; padding-top: 0 !important; } /* Formulaire des conditions générales */ body#checkout .one-page-checkout__footer #conditions-to-approve { margin-top: 0 !important; padding-top: 0 !important; } /* Confirmation du paiement */ body#checkout .one-page-checkout__footer #opc-payment-confirmation { margin-top: 0 !important; padding-top: 0 !important; } } /* Bouton de confirmation classique */ body#checkout .one-page-checkout__footer #opc-pay-button { display: block; width: 100% !important; max-width: 100%; box-sizing: border-box; border-radius: 5px; } /* Conteneurs des paiements externes */ body#checkout .one-page-checkout__footer .js-payment-binary { width: 100%; max-width: 100%; padding-right: 2rem !important; box-sizing: border-box; } /* Conteneur des boutons de paiement externes */ body#checkout .one-page-checkout__footer .ps_checkout-button { width: 100%; max-width: 100%; box-sizing: border-box; } /* Bouton carte bancaire */ body#checkout .one-page-checkout__footer .ps_checkout-injected-button.btn { width: 100% !important; max-width: 100%; box-sizing: border-box; border-radius: 5px; } /* ========================================================= MARIUS - ONE PAGE CHECKOUT ADAPTATION MOBILE ========================================================= */ @media (max-width: 575px) { body#checkout .one-page-checkout__footer #opc-payment-confirmation, body#checkout .one-page-checkout__footer .js-payment-binary { padding-right: 1rem !important; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 575px) { body#checkout :is( .payment-options__list, #opc-payment-methods ) .payment-option__form-check { padding: 15px 12px 15px 36px; min-height: 56px; } body#checkout :is( .payment-options__list, #opc-payment-methods ) .payment-option__form-check .form-check-input { left: 12px; } body#checkout :is( .payment-options__list, #opc-payment-methods ) .payment-option__additional-information, body#checkout :is( .payment-options__list, #opc-payment-methods ) #ps_checkout-card-fields-form { padding: 0 12px 15px 36px !important; } } /* ========================================================= MARIUS - RÉASSURANCE PANIER Marges verticales sur mobile uniquement Réassurance mobile - Bordure et coins arrondis ========================================================= */ @media (max-width: 767.98px) { .blockreassurance--cart { margin-block: 2rem 0; } body#checkout .blockreassurance--checkout { border: 1px solid #dee2e6 !important; border-radius: 5px !important; padding: 10px 12px !important; box-sizing: border-box !important; } } /* ========================================================== MARIUS - ONE PAGE CHECKOUT - REASSURANCE MOBILE COMPACT ICÔNE À GAUCHE / TITRE À DROITE DESCRIPTION MASQUÉE IDENTIQUE À LA PAGE PRODUIT ========================================================== */ @media (max-width: 767.98px) { /* ====================================================== CONTENEUR ====================================================== */ body#checkout .blockreassurance--checkout { width: 100% !important; max-width: 100% !important; margin-block: 2rem 0 !important; } /* ====================================================== UNE LIGNE DE RÉASSURANCE ====================================================== */ body#checkout .blockreassurance--checkout > a.reassurance { display: grid !important; grid-template-columns: 48px minmax(0, 1fr) !important; grid-template-rows: auto !important; column-gap: 4px !important; align-items: center !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 6px 0 !important; text-align: left !important; text-decoration: none !important; } /* ====================================================== ICÔNE À GAUCHE ====================================================== */ body#checkout .blockreassurance--checkout .reassurance__image { grid-column: 1 !important; grid-row: 1 !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 48px !important; height: 48px !important; margin: 0 !important; padding: 0 !important; align-self: center !important; } body#checkout .blockreassurance--checkout .reassurance__image svg, body#checkout .blockreassurance--checkout .reassurance__image img { display: block !important; width: 48px !important; max-width: 48px !important; height: 48px !important; max-height: 48px !important; margin: 0 !important; object-fit: contain !important; } /* ====================================================== TITRE À DROITE DE L'ICÔNE ====================================================== */ body#checkout .blockreassurance--checkout .reassurance__content { grid-column: 2 !important; grid-row: 1 !important; display: block !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; text-align: left !important; align-self: center !important; } body#checkout .blockreassurance--checkout .reassurance__title { display: block !important; margin: 0 !important; padding: 0 !important; font-size: 15px !important; font-weight: 600 !important; line-height: 1.3 !important; color: #212529 !important; text-align: left !important; } /* ====================================================== DESCRIPTION MASQUÉE SUR MOBILE ====================================================== */ body#checkout .blockreassurance--checkout .reassurance__desc, body#checkout .blockreassurance--checkout .reassurance__content > br { display: none !important; } } /* ========================================================= MARIUS - PANIER MOBILE ESPACEMENT DES BOUTONS ========================================================= */ @media (max-width: 767.98px) { body#cart .cart-summary__actions .cart__continue-shopping { display: flex !important; align-items: center; justify-content: center; width: 100%; margin: 0 0 10px 0 !important; box-sizing: border-box; } } /* ========================================================= MARIUS - PANIER MOBILE SUPPRESSION MARGE SOUS LA LISTE DES PRODUITS ========================================================= */ @media (max-width: 767.98px) { body#cart .cart-grid__content { margin-block-end: 0 !important; } } /* ========================================================= MARIUS - ONE PAGE CHECKOUT COORDONNÉES CLIENT - DESIGN MODERNE Desktop + Mobile ========================================================= */ body#checkout .marius-contact-modern { border: 1px solid #dee2e6; border-radius: 5px; padding: 16px !important; margin-top: 1rem; box-sizing: border-box; } @media (max-width: 767.98px) { body#checkout .marius-contact-modern { margin-top: 0; padding: 12px !important; } } /* Titre */ body#checkout .marius-contact-modern .one-page-checkout__title { margin: 0 0 18px !important; } /* Champ e-mail */ body#checkout .marius-contact-modern .one-page-checkout__field:has(#field-email) { margin-bottom: 16px !important; } body#checkout .marius-contact-modern label[for="field-email"] { display: block; font-weight: 600; margin-bottom: 8px; } body#checkout .marius-contact-modern #field-email { width: 100%; min-height: 48px; border-radius: 8px; } /* Message sous l'e-mail */ body#checkout .marius-contact-help { display: block; margin-top: 5px; font-size: 12px; color: #6c757d; } /* Liens connexion et inscription */ body#checkout .marius-contact-modern .one-page-checkout__links { display: flex !important; flex-direction: column !important; gap: 5px !important; margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 5px !important; border-top: 1px solid #e9ecef; } /* Chaque ligne */ body#checkout .marius-contact-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; } /* Texte */ body#checkout .marius-contact-description { font-size: 13px; color: #212529; } /* Liens */ body#checkout .marius-contact-row .one-page-checkout__link { font-size: 13px; font-weight: 500; color: #3865f4; text-decoration: none; white-space: nowrap; } body#checkout .marius-contact-row .one-page-checkout__link:hover { text-decoration: underline; } /* Mobile */ @media (max-width: 767.98px) { body#checkout .marius-contact-modern { padding: 12px !important; } body#checkout .marius-contact-row { gap: 8px; } body#checkout .marius-contact-description, body#checkout .marius-contact-row .one-page-checkout__link { font-size: 12px; } } /* ========================================================= MARIUS - ONE PAGE CHECKOUT COORDONNÉES + ADRESSE DE LIVRAISON BORDURE ET ESPACEMENT IDENTIQUES ========================================================= */ /* DESKTOP + MOBILE */ body#checkout .marius-contact-modern, body#checkout .one-page-checkout__section:has(> #opc-delivery-address) { margin-top: 1rem; border: 1px solid #dee2e6 !important; border-radius: 5px !important; padding: 16px !important; box-sizing: border-box !important; } /* MOBILE */ @media (max-width: 767.98px) { body#checkout .marius-contact-modern, body#checkout .one-page-checkout__section:has(> #opc-delivery-address) { padding: 12px !important; } } /* ===================================================== MARIUS - CHECKOUT - BORDURE MODE DE LIVRAISON DESKTOP + MOBILE ===================================================== */ body#checkout section.one-page-checkout__section.js-opc-delivery-section { margin-top: 1rem; border: 1px solid #dee2e6 !important; border-radius: 5px !important; padding: 16px 16px 0 16px !important; box-sizing: border-box !important; } /* Mobile */ @media (max-width: 767.98px) { body#checkout section.one-page-checkout__section.js-opc-delivery-section { padding: 12px !important; } } /* ========================================================= MARIUS - ONE PAGE CHECKOUT MOYEN DE PAIEMENT - BORDURE + ALIGNEMENT ========================================================= */ body#checkout .one-page-checkout__section.js-opc-payment-section { margin-top: 1rem; margin-right: 2rem !important; border: 1px solid #dee2e6 !important; border-radius: 5px !important; padding: 16px !important; box-sizing: border-box; } body#checkout .js-opc-payment-section #opc-payment-methods { width: 100%; max-width: 100%; box-sizing: border-box; } /* MOBILE UNIQUEMENT */ @media (max-width: 767.98px) { body#checkout .one-page-checkout__section.js-opc-payment-section { margin-right: 0 !important; } } /* ========================================================= MARIUS - ONE PAGE CHECKOUT BORDURE CONDITIONS CGV + BOUTON COMMANDER ========================================================= */ body#checkout .one-page-checkout__footer { padding: 0 !important; margin-top: 0 !important; margin-right: 2rem !important; } /* MOBILE */ @media (max-width: 767.98px) { body#checkout .one-page-checkout__footer { margin-right: 0 !important; margin-right: 0 !important; } body#checkout .one-page-checkout__footer #opc-payment-confirmation, body#checkout .one-page-checkout__footer .js-payment-binary { padding-right: 0 !important; } } /* ========================================================= MARIUS - CHECKOUT RECAPITULATIF DE COMMANDE - BORDURE ========================================================= */ body#checkout .checkout-grid__aside, body#checkout .checkout-grid__aside-wrapper { z-index: 1 !important; } body#checkout .checkout-grid__aside .checkout__summary-accordion-item { margin-top: 1rem !important; border: 1px solid #dee2e6 !important; border-radius: 5px !important; padding: 16px !important; box-sizing: border-box !important; } /* MOBILE */ @media (max-width: 767.98px) { body#checkout .checkout-grid__aside .checkout__summary-accordion-item { padding: 12px !important; } body#checkout .checkout-grid__aside { margin-block-end: 0 !important; } }