:root{--font-family-body: "Poppins", "Helvetica", "Arial", "sans-serif";--font-family-label: "Poppins", "Helvetica", "Arial", "sans-serif";--font-family-semi: "Poppins", "Helvetica", "Arial", "sans-serif";--font-family-title: "Poppins", "Helvetica", "Arial", "sans-serif";--ax-form-bi-width: 1px;--ax-form-btn-width: 1px;}@media (max-width: 767px){#box-product-grid .archive-wrapper-items{margin-left: calc(-10px/2);margin-right: calc(-10px/2);}#box-product-grid .archive-wrapper-items > .item{padding-left: calc(10px/2);padding-right: calc(10px/2);margin-bottom: 10px;}}@media (min-width: 768px) and (max-width: 1024px){#box-product-grid .archive-wrapper-items{margin-left: calc(-20px/2);margin-right: calc(-20px/2);}#box-product-grid .archive-wrapper-items > .item{padding-left: calc(20px/2);padding-right: calc(20px/2);margin-bottom: 20px;}}@media (min-width: 1025px) and (max-width: 1199px){#box-product-grid .archive-wrapper-items{margin-left: calc(-30px/2);margin-right: calc(-30px/2);}#box-product-grid .archive-wrapper-items > .item{padding-left: calc(30px/2);padding-right: calc(30px/2);margin-bottom: 30px;}}@media (min-width: 1200px){#box-product-grid .archive-wrapper-items{margin-left: calc(-30px/2);margin-right: calc(-30px/2);}#box-product-grid .archive-wrapper-items > .item{padding-left: calc(30px/2);padding-right: calc(30px/2);margin-bottom: 30px;}}@media (max-width: 767px){#box-product-grid .archive-wrapper-items > .item{-ms-flex: 0 0 calc(100%/2); flex: 0 0 calc(100%/2); max-width: calc(100%/2);}}@media (min-width: 768px) and (max-width: 1024px){#box-product-grid .archive-wrapper-items > .item{-ms-flex: 0 0 calc(100%/2); flex: 0 0 calc(100%/2); max-width: calc(100%/2);}}@media (min-width: 1025px) and (max-width: 1199px){#box-product-grid .archive-wrapper-items > .item{-ms-flex: 0 0 calc(100%/5); flex: 0 0 calc(100%/5); max-width: calc(100%/5);}}@media (min-width: 1200px){#box-product-grid .archive-wrapper-items > .item{-ms-flex: 0 0 calc(100%/5); flex: 0 0 calc(100%/5); max-width: calc(100%/5);}}@media (min-width: 1025px){.container{max-width:1800;}}header.is-sticked.is-scroll-up #header-sticky, header.is-sticked.is-scroll-down #header-sticky{-webkit-transform: none; transform: none; visibility: visible; opacity: 1; pointer-events: all;}/* Harmonisation largeur conteneur - toutes pages = 1800px */ .container { max-width: 1800px !important; width: 100% !important; } /* ===== SmartBlog - Bords arrondis 10px sur toutes les images ===== */ /* SmartBlog - bords arrondis 10px */ .wrapper-imgs { border-radius: 10px; overflow: hidden; display: block; } .wrapper-imgs picture, .wrapper-imgs picture img { border-radius: 10px; display: block; } /* SmartBlog - bords arrondis homepage (slider Elementor) */ .blog-thumbnail a { display: block; border-radius: 10px; overflow: hidden; } .blog-thumbnail .wrapper-imgs, .blog-thumbnail .wrapper-imgs picture { border-radius: 10px; overflow: hidden; display: block; } .blog-thumbnail .wrapper-imgs img { border-radius: 10px; display: block; } /* ===== Page liste blog - 5 colonnes, style homepage ===== */ .blog-type-1 .archive-wrapper-items { display: flex; flex-wrap: wrap; gap: 24px; } .blog-type-1 .archive-wrapper-items .item { flex: 0 0 calc(20% - 20px); max-width: calc(20% - 20px); } /* Image arrondie */ .blog-type-1 .blog-thumbnail a { display: block; border-radius: 10px; overflow: hidden; } .blog-type-1 .wrapper-imgs, .blog-type-1 .wrapper-imgs picture { border-radius: 10px; overflow: hidden; display: block; } .blog-type-1 .wrapper-imgs img { border-radius: 10px; display: block; width: 100%; height: 220px; object-fit: cover; } /* Bas de carte */ .blog-type-1 .element-bottom { padding: 12px 0 0; } .blog-type-1 .post-date { font-size: 12px; color: #999; display: block; margin-bottom: 6px; } .blog-type-1 .blog-title { font-size: 15px; font-weight: 600; margin: 0 0 10px; line-height: 1.4; } .blog-type-1 .blog-title a { color: #1a1a1a; text-decoration: none; } .blog-type-1 .blog-title a:hover { color: #0873ab; } /* Lien "View more" avec flèche */ .blog-type-1 .read-more { font-size: 13px; font-weight: 600; color: #1a1a1a; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; } .blog-type-1 .read-more::after { content: "›"; font-size: 16px; line-height: 1; } .blog-type-1 .read-more:hover { color: #0873ab; } /* Responsive tablette : 3 colonnes */ @media (max-width: 1024px) { .blog-type-1 .archive-wrapper-items .item { flex: 0 0 calc(33.333% - 16px); max-width: calc(33.333% - 16px); } } /* Responsive mobile : 1 colonne */ @media (max-width: 640px) { .blog-type-1 .archive-wrapper-items .item { flex: 0 0 100%; max-width: 100%; } } /* © Pascal Evrard / Agence digitale afondlacom’ */ /* Je force tous les liens présents dans les blocs du blog */ .blog-content a:hover, .blog-content a:focus, .blog-content a:active, .blog-item a:hover, .blog-item a:focus, .blog-item a:active, .post-content a:hover, .post-content a:focus, .post-content a:active, .widget-content .block_content a:hover, .widget-content .block_content a:focus, .widget-content .block_content a:active, .element-bottom a:hover, .element-bottom a:focus, .element-bottom a:active, .blog-title a:hover, .blog-title a:focus, .blog-title a:active, .read-more:hover, .read-more:focus, .read-more:active { color: #044465 !important; } /* © Pascal Evrard / Agence digitale afondlacom’ */ /* Je redéfinis la couleur hover globale des liens */ :root { --color-a-hover: #044465; } /* © Pascal Evrard / Agence digitale afondlacom’ */ /* Je synchronise la couleur principale avec mes hover */ :root { --color-primary: #044465; } /* ============================================= Bouton comparateur — couleurs personnalisées ============================================= */ /* Bouton "Retour à l'accueil" sur la page comparateur vide */ /* Bouton comparateur */ .btn-primary { background-color: #0873ab !important; border-color: #0873ab !important; border-radius: 6px !important; transition: background-color 0.2s ease, border-color 0.2s ease; } .btn-primary:hover { background-color: #044465 !important; border-color: #044465 !important; } /* ============================================= Forcer product-type-2 sur les listings ============================================= */ /* Boutons action circulaires bleus */ #js-product-list .buttons-action { display: flex !important; flex-direction: column !important; position: absolute !important; top: 10px !important; right: 10px !important; gap: 6px !important; } #js-product-list .btn-action { width: 36px !important; height: 36px !important; border-radius: 50% !important; background-color: #0873ab !important; color: #fff !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 0 !important; border: none !important; } #js-product-list .btn-action i, #js-product-list .btn-action::before { font-size: 16px !important; } #js-product-list .btn-action:hover { background-color: #044465 !important; } /* Bouton Ajouter au panier en bas de carte */ #js-product-list .add-to-cart { width: 100% !important; background-color: #0873ab !important; color: #fff !important; border: none !important; padding: 10px !important; font-size: 13px !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; border-radius: 0 !important; } #js-product-list .add-to-cart:hover { background-color: #044465 !important; } /* Bords arrondis sur les cartes produit du listing */ #js-product-list .item-inner, #js-product-list .js-product-miniature { border-radius: 6px !important; overflow: hidden !important; } /* Réduire l'espace vide sous l'image dans les cartes listing */ #js-product-list .element-top { margin-bottom: 0 !important; padding-bottom: 0 !important; } #js-product-list form { margin-top: 0 !important; margin-bottom: 0 !important; } /* Supprimer l'espace réservé au formulaire dans les cartes listing */ #js-product-list form { position: absolute !important; bottom: 0 !important; left: 0 !important; width: 100% !important; z-index: 2 !important; } #js-product-list .js-product-miniature { position: relative !important; } /* ============================================= Cartes produit listing — design custom ============================================= */ /* Bords arrondis */ #js-product-list .item-inner, #js-product-list .js-product-miniature { border-radius: 12px !important; overflow: hidden !important; } /* Position relative pour le bouton absolu */ #js-product-list .js-product-miniature { position: relative !important; } /* Boutons action circulaires */ #js-product-list .btn-action { width: 36px !important; height: 36px !important; border-radius: 50% !important; background-color: #0873ab !important; color: #fff !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 0 !important; border: none !important; } #js-product-list .btn-action:hover { background-color: #044465 !important; } /* Bouton Ajouter au panier — positionné sur l'image */ #js-product-list form { position: absolute !important; bottom: 0 !important; left: 0 !important; width: 100% !important; z-index: 2 !important; margin: 0 !important; display: none !important; } #js-product-list .js-product:hover form { display: block !important; } #js-product-list .input-group-add-cart { display: none !important; } #js-product-list .add-to-cart { width: 100% !important; background-color: #0873ab !important; color: #fff !important; border: none !important; padding: 10px !important; font-size: 13px !important; text-transform: uppercase !important; border-radius: 0 !important; } #js-product-list .add-to-cart:hover { background-color: #044465 !important; } /* Titre produit */ #js-product-list .product_name a { font-size: 18px !important; font-weight: 600 !important; } /* Prix */ #js-product-list .price { font-size: 24px !important; font-weight: 700 !important; } /* Espacement bas de carte */ #js-product-list .element-bottom { padding: 10px 10px 10px !important; margin: 0 !important; } #js-product-list .element-bottom { min-height: 0 !important; }