/*
* Custom code goes here.
* A template should always ship with an empty custom.css
*/
/* Background blanc*/
body {
background: #ffffff;
}
}
/* Ecriture noire sur le début des pages catégories, sur mobile 480 Resolution */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
{ .showing {
color: #000;
}}
/* Ecriture noire sur le début des pages catégories, sur mobile 640 Resolution */
@media only screen
and (min-device-width : 360px)
and (max-device-width : 640px)
{ .showing {
color: #000;
}}
/* Background blanc sur ordinateur pour 768/1024px résolution */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
{ body {
background-color: #fff;
}
}
/* Background blanc sur ordinateur pour 1030/1366px résolution */
@media only screen
and (min-width: 1030px)
and (max-width: 1366px)
{ body {
background-color: #fff;
}
}
/* Background blanc sur ordinateur pour 1370/1605px résolution */
@media only screen
and (min-width: 1370px)
and (max-width: 1605px)
{ body {
background-color: #fff;
}}
/* Header fond 1c1c1c POUR ORDINATEUR ET MOBILE */
#header .header-nav {
background: #1c1c1c;
}
#header .header-top {
background: #1c1c1c;
}
/* Header fond 1c1c1c une partie POUR ORDINATEUR UNIQUEMENT */
@media only screen
and (min-width : 768px)
{ .header-bg {
background: #1c1c1c;
}}
/* A ENLEVER A ENLEVER A ENLEVER - Header fond 1c1c1c une partie POUR MOBILE UNIQUEMENT */
@media only screen
and (max-width : 768px)
{ .header-bg {
background: #1c1c1c;
}}
.top-info p {
color: #7a7a7b;
}
a {
color: #7a7a7b;
}
#steavisgarantisFooterText {
font-size: 12px;
color: #c4cfdf;
}
/* AJOUT D'UNE MARGE POUR LA PHRASE AVIS GARANTIE POUR UN MEILLEUR AFFICHAGE SUR MOBILE UNIQUEMENT */
@media only screen and (min-width:320px) and (max-width:640px) {
#steavisgarantisFooterText {
padding-bottom: 3.5rem;
}}
.right-col-logo {
text-align: -webkit-center;
}
#_desktop_cart .header .cart-count {
top: 0px;
}
#header .header-nav .cart-preview.active a, #header .header-nav .cart-preview.active i {
color: #fff;
}
#header {
color: #7a7a7b;
}
.block-category #category-description p:first-child {
margin-bottom: 1.25rem;
margin-right: 10rem;
color: c4cfdf;
}
.block-category .category-cover img {
width: auto;
}
@media (max-width: 768px) {
.block-category .category-cover img {
width: 100%;
height: auto;
}}
@media (min-width: 992px)
.col-md-4 {
top: -1rem;
}
.ybc-menu-toggle {
background-color: #1761e6;
}
#products article.product-miniature div.thumbnail-container, article.product-miniature div.thumbnail-container {
min-height: 450px;
}
@media only screen
and (min-device-width : 320px)
and (max-device-width : 640px)
{ #products article.product-miniature div.thumbnail-container, article.product-miniature div.thumbnail-container {
width: 100%;
height: auto;
}}
#products article.product-miniature div.product-description, article.product-miniature div.product-description{height: 172px;text-align: center;}
#products article.product-miniature div.product-description input.input-group.form-control, article.product-miniature div.product-description input.input-group.form-control{width: 30%;margin-left: auto;margin-right: auto;margin-bottom: 12px;margin-top: 10px;}
.front-product-cart {
display: none;
}
/* Ajout de padding-bottom pour le bas des vignettes blanches des miniatures produits, afin que les prix apparaissent dans le cadre s'il y a un titre avec beaucoup de mots et aussi un prix avec beaucoup de détails comme une promo. Aussi, Changement de padding-bottom de 10rem à 10.5rem afin que le titre du produit, le bouton d'ajout de panier et le prix, remontent tous un peu, pour ne pas dépasser la case blanche de la vignette produit. */
#products article.product-miniature div.product-description, article.product-miniature div.product-description {
height: 150px;
padding-bottom: 10.5rem;
margin-top: 0.2rem;
}
/* Cacher photo magasin & Fenêtre Facebook pour catégories For 480 Resolution */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
{ .ad {
display: none;
}
}
/* Cacher photo magasin & Fenêtre Facebook pour catégories For 640 Resolution */
.ad {
display: none;
}
/* Ajuster position panier sur ordinateur pour 768/1024px résolution */
@media only screen and (min-width : 768px)
{ #header .header-nav .blockcart .header {
margin-top: -0.5rem;
}}
/* Ajuster position panier sur ordinateur pour 1030/1366px résolution */
@media only screen
and (min-width: 1030px)
and (max-width: 1366px)
{ #header .header-nav .blockcart .header {
margin-top: -0.5rem;
}
}
/* Ajuster position panier sur Desktop pour 1370/1605px résolution */
@media only screen
and (min-width: 1370px)
and (max-width: 1605px)
{ #header .header-nav .blockcart .header {
margin-top: -0.5rem;
}
}
/* Ajuster cercle bleu (nombre d'articles) du panier sur ordinateur pour 768/1024px résolution */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
{ #_desktop_cart .header .cart-count {
top: 3px;
}
}
/* Ajuster cercle bleu (nombre d'articles) du panier sur ordinateur pour 1030/1366px résolution */
@media only screen
and (min-width: 1030px)
and (max-width: 1366px)
{ #_desktop_cart .header .cart-count {
top: 3px;
}
}
/* Ajuster cercle bleu (nombre d'articles) du panier sur Desktop pour 1370/1605px résolution */
@media only screen
and (min-width: 1370px)
and (max-width: 1605px)
{ #_desktop_cart .header .cart-count {
top: 3px;
}
}
/* Espacer au-dessus du logo du Header 360px640 */
@media only screen
and (min-device-width : 360px)
and (max-device-width : 640px)
{ #header .header-nav .top-logo a img {
margin-top: 1rem;
margin-left: -5rem;
max-width: 240px;
}}
body {
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
/* Font Size "Compte pro" 1024 Resolution */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
{ .header_proaccount {
font-size: 14px;
}}
/* Font Size "Compte pro" 1366 Resolution */
@media only screen
and (min-width: 1030px)
and (max-width: 1366px)
{ .header_proaccount {
font-size: 14px;
}}
/* Font Size "Compte pro" 1605 Resolution */
@media only screen
and (min-width: 1370px)
and (max-width: 1605px)
{ .header_proaccount {
font-size: 14px;
}}
/* Marge "CONNEXION" 1024 Resolution */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
{ #header .header-nav .user-info {
margin-top: 6px;
}}
/* Marge "CONNEXION" 1366 Resolution */
@media only screen
and (min-width: 1030px)
and (max-width: 1366px)
{ #header .header-nav .user-info {
margin-top: 6px;
}}
/* Marge "CONNEXION" 1605 Resolution */
@media only screen
and (min-width: 1370px)
and (max-width: 1605px)
{ #header .header-nav .user-info {
margin-top: 6px;
}}
/* Marge "PROMOTIONS" 1024 Resolution */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
{ .wish-list {
margin-top: 4px;
}}
/* Marge "PROMOTIONS" 1366 Resolution */
@media only screen
and (min-width: 1030px)
and (max-width: 1366px)
{ .wish-list {
margin-top: 4px;
}}
/* Marge "PROMOTIONS" 1605 Resolution */
@media only screen
and (min-width: 1370px)
and (max-width: 1605px)
{ .wish-list {
margin-top: 4px;
}}
/* Marge "Panier" 1024 Resolution */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
{ #header .header-nav .blockcart .header {
margin-top: -0.3rem;
}}
/* Marge "Panier" 1366 Resolution */
@media only screen
and (min-width: 1030px)
and (max-width: 1366px)
{ #header .header-nav .blockcart .header {
margin-top: -0.3rem;
}}
/* Marge "Panier" 1605 Resolution */
@media only screen
and (min-width: 1370px)
and (max-width: 1605px)
{ #header .header-nav .blockcart .header {
margin-top: -0.3rem;
}}
/* Menu fixe bleu sur mobile 480 Resolution */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
{ .ybc-menu-toggle {
display: block;
position: fixed;
top: 0px;
left: 0;
right: 0;
}}
/* Menu fixe bleu mobile 640 Resolution */
@media only screen
and (min-device-width : 360px)
and (max-device-width : 640px)
{ .ybc-menu-toggle {
display: block;
position: fixed;
top: 0px;
left: 0;
right: 0;
}}
/* Faire disparaitre icone menu à trois barres blanche sur mobile 480 Resolution */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
{ #header .header-nav #menu-icon {
display: none;
}}
/* Faire disparaitre icone menu à trois barres blanche sur mobile 640 Resolution */
@media only screen
and (min-device-width : 360px)
and (max-device-width : 640px)
{ #header .header-nav #menu-icon {
display: none;
}}
/* Recentrer numéro de téléphone et barre de recherche sur mobile 480 Resolution */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
{ .header-phone p.h4 {
margin-left: 2rem;
}}
/* Recentrer numéro de téléphone et barre de recherche sur mobile 640 Resolution */
@media only screen
and (min-device-width : 360px)
and (max-device-width : 640px)
{ .header-phone p.h4 {
margin-left: 2rem;
}}
/* Diminuer marge de la vignette du produit (case avec image quand on arrive sur une page produit) sur mobile 480 Resolution */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
{ #product #content {
margin-top: -2.5rem;
}}
/* Diminuer marge de la vignette du produit (case avec image quand on arrive sur une page produit) sur mobile 640 Resolution */
@media only screen
and (min-device-width : 360px)
and (max-device-width : 640px)
{ #product #content {
margin-top: -3.5rem;
}}
.product-information {
margin-top: 1rem;
}
/* Augmenter marge du titre des produits suggérés (VOUS AIMEREZ AUSSI...) à la fin d'une page produit, en sur mobile 480 Resolution */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
{ .tabs {
margin-bottom: 1rem;
}}
/* Augmenter marge du titre des produits suggérés (VOUS AIMEREZ AUSSI...) à la fin d'une page produit sur mobile 640 Resolution */
@media only screen
and (min-device-width : 360px)
and (max-device-width : 640px)
{ .tabs {
margin-bottom: 1rem;
}}
/* Changer couleur de block des pages catégories en blanc (visible sur ordi, par sur mobile, vérifier si pas de défaut et display: none) */
.block-category {
background: #ffffff;
}
/* Changer couleur de TITRES H1 / H2 / H3 de block des pages catégories en noir (vérifier si pas de défaut et display: none) */
.block-category h1, .block-category h2, .block-category h3 {
color: #000000;
}
/* Changer couleur de texte de block des pages catégories en noir (vérifier si pas de défaut et display: none) */
.block-category #category-description p:first-child {
color: 000000;
}
/* DIMINUER TAILLE DE IMAGE PRODUIT DANS LE BLOC QUAND L'AJOUT AU PANIER EST CLIQUE, sur mobile 480 Resolution */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
{ #blockcart-modal .product-image {
width: 35%;
}}
/* DIMINUER TAILLE DE IMAGE PRODUIT DANS LE BLOC QUAND L'AJOUT AU PANIER EST CLIQUE, sur mobile 640 Resolution */
@media only screen
and (min-device-width : 360px)
and (max-device-width : 640px)
{ #blockcart-modal .product-image {
width: 35%;
}}
/* Augmenter marge des boutons POURSUIVRE MES ACHATS / COMMANDER dans le bloc vert (quand on clic sur Ajouter au panier), sur mobile 480 Resolution */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
{ #blockcart-modal .cart-content .cart-content-btn .btn {
margin-top: 1rem;
}}
/* Augmenter marge des boutons POURSUIVRE MES ACHATS / COMMANDER dans le bloc vert (quand on clic sur Ajouter au panier), sur mobile 640 Resolution */
@media only screen
and (min-device-width : 360px)
and (max-device-width : 640px)
{ #blockcart-modal .cart-content .cart-content-btn .btn {
margin-top: 1rem;
}}
/* Ajuster l'alignement de la petite case des quantités de produits sur la page de panier. Attention, surveiller s'il y a d'autres éléments changés, sur mobile 480 Resolution */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
{ .col-xs-6 {
width: 45%;
}}
/* Ajuster l'alignement de la petite case des quantités de produits sur la page de panier. Attention, surveiller s'il y a d'autres éléments changés, sur mobile 640 Resolution */
@media only screen
and (min-device-width : 360px)
and (max-device-width : 640px)
{ .col-xs-6 {
width: 45%;
}}
/* ELARGIR LA MARGE ENTRE LES LIGNES D'OPTIONS DE PAIEMENT, sur mobile 480 Resolution */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
{ body#checkout section.checkout-step .payment-options .payment-option {
margin-bottom: 1.5rem;
}}
/* ELARGIR LA MARGE ENTRE LES LIGNES D'OPTIONS DE PAIEMENT, sur mobile 640 Resolution */
@media only screen
and (min-device-width : 360px)
and (max-device-width : 640px)
{ body#checkout section.checkout-step .payment-options .payment-option {
margin-bottom: 1.5rem;
}}
/* Retirer choozeo dans footer */
.choozeo a img {
display: none;
}
/* Retirer le décalage de la barre bleu de la newsletter sur footer, uniquement pour ordi pour 768/1024px résolution */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
{ .block_newsletter {
padding-top: 0px;
}}
/* Retirer le décalage de la barre bleu de la newsletter sur footer, uniquement pour ordi pour 1030/1366px résolution */
@media only screen
and (min-width: 1030px)
and (max-width: 1366px)
{ .block_newsletter {
padding-top: 0px;
}}
/* Retirer le décalage de la barre bleu de la newsletter sur footer, uniquement pour ordi pour 1370/1605px résolution */
@media only screen
and (min-width: 1370px)
and (max-width: 1605px)
{ .block_newsletter {
padding-top: 0px;
}}
/* Marge sur le dessus du footer, sur mobile 480 Resolution */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
{ .footer-container {
padding-top: 10px;
}}
/* Marge sur le dessus du footer, sur mobile 640 Resolution */
@media only screen
and (min-device-width : 360px)
and (max-device-width : 640px)
{ .footer-container {
padding-top: 10px;
}}
.block_newsletter form input {
height: 1rem;
}
.block_newsletter form .newsletter-btn {
height: 2.5rem;
}
/* Distinguer en ajoutant une marge sur "Commander en Invité / Connexion", sur mobile 480 Resolution */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
{ .nav-inline .nav-item+.nav-item, .nav-inline .nav-link+.nav-link {
margin-top: 1rem;
}}
/* Distinguer en ajoutant une marge sur "Commander en Invité / Connexion", sur mobile 640 Resolution */
@media only screen
and (min-device-width : 360px)
and (max-device-width : 640px)
{ .nav-inline .nav-item+.nav-item, .nav-inline .nav-link+.nav-link {
margin-top: 1rem;
}}
/* Diminuer taille des titres H3 et H4, sur mobile 480 Resolution */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
{ .h3, .h4, h3, h4 {
font-size: 1rem;
margin-top: 0.5rem;
}}
/* Diminuer taille des titres H3 et H4, sur mobile 640 Resolution */
@media only screen
and (min-device-width : 360px)
and (max-device-width : 640px)
{ .h3, .h4, h3, h4 {
font-size: 1rem;
margin-top: 0.5rem;
}}
.newsletter-bg {
background-color: #2472ff;
background-image: none;
padding-bottom: 1rem;
}
.footer-container {
background-color: #0c2132;
background-image: none;
}
/* Recentrer le bouton OK de l'inscription à newsletter sur page accueil, sur mobile 480 Resolution */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
{ .block_newsletter form .newsletter-btn {
font-size: 1rem;
font-weight: 700;
}}
/* Recentrer le bouton OK de l'inscription à newsletter sur page accueil, sur mobile 640 Resolution */
@media only screen
and (min-device-width : 360px)
and (max-device-width : 640px)
{ .block_newsletter form .newsletter-btn {
font-size: 1rem;
font-weight: 700;
}}
li.product-flag {
font-weight: 700;
z-index: 2;
}
/* Ajuster taille du tableau des remises sur quantité - étape 1 - sur mobile 480 Resolution */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
{ table {
display: table-caption;
}}
/* Ajuster taille du tableau des remises sur quantité - étape 1 - sur mobile 640 Resolution */
@media only screen
and (min-device-width : 360px)
and (max-device-width : 640px)
{ table {
display: table-caption;
}}
/* Ajuster taille du tableau des remises sur quantité - étape 2 - sur mobile 480 Resolution */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
{ .product-discounts>.table-product-discounts thead tr th {
padding: 1rem 0.5rem;
}}
/* Ajuster taille du tableau des remises sur quantité - étape 2 - sur mobile 640 Resolution */
@media only screen
and (min-device-width : 360px)
and (max-device-width : 640px)
{ .product-discounts>.table-product-discounts thead tr th {
padding: 1rem 0.5rem;
}}
/* Ajuster taille du tableau des remises sur quantité - étape 3 - sur mobile 480 Resolution */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
{ .product-discounts>.product-discounts-title {
margin-top: 1.5rem;
}}
/* Ajuster taille du tableau des remises sur quantité - étape 3 - sur mobile 640 Resolution */
@media only screen
and (min-device-width : 360px)
and (max-device-width : 640px)
{ .product-discounts>.product-discounts-title {
margin-top: 1.5rem;
}}
/* Désactiver l'affichage des flèches sur toutes résolutions */
.carousel .carousel-control.left, .carousel .carousel-control.right {
display: none;
}}
/* Ajout d'un écart pour l'affichage d'éléments sur page produit, uniquement pour ordi pour 768/1024px résolution */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
{ .product-prices div {
margin-top: 0.625rem;
}}
/* Ajout d'un écart pour l'affichage d'éléments sur page produit, uniquement pour ordi pour 1030/1366px résolution */
@media only screen
and (min-width: 1030px)
and (max-width: 1366px)
{ .product-prices div {
margin-top: 0.625rem;
}}
/* Ajout d'un écart pour l'affichage d'éléments sur page produit, uniquement pour ordi pour 1370/1605px résolution */
@media only screen
and (min-width: 1370px)
and (max-width: 1605px)
{ .product-prices div {
margin-top: 0.625rem;
}}
/* Ajustement écart sur des éléments de page produit - sur mobile 480 Resolution */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
{ #blockcart-modal .product-name {
margin-top: 1.5rem;
margin-bottom: 1.5rem;
}}
/* Ajustement écart sur des éléments de page produit - sur mobile 480 Resolution */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
{ #blockcart-modal .product-name {
margin-top: 1.5rem;
margin-bottom: 1.5rem;
}}
/* Modification largeur colonnes de pages catégories, uniquement pour ordi pour 768/1024px résolution */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
{ .col-lg-4 {
width: 50.00%;
}}
/* Modification largeur colonnes de pages catégories, uniquement pour ordi pour 1030/1366px résolution */
@media only screen
and (min-width: 1030px)
and (max-width: 1366px)
{ .col-lg-4 {
width: 50.00%;
}}
/* Modification largeur colonnes de pages catégories, uniquement pour ordi pour 1370/1605px résolution */
@media only screen
and (min-width: 1370px)
and (max-width: 1605px)
{ .col-lg-4 {
width: 50.00%;
}}
/* Changer la couleur de la fleche bas qui déroule le menu de recherche - ATTENTION SUR D'AUTRES CHANGEMENTS, VIGILANCE */
#category #left-column #search_filters .facet .navbar-toggler {
color: black;
}
/* Changer la couleur du fond de la recherche, de noir à blanc */
#search_filters, #search_filters_brands, #search_filters_suppliers {
background: #ffffff;
}
/* Agrandissement des icônes de réassurance - sur mobile 480 Resolution */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
{ #search_filters .facet .facet-title, #search_filters_brands .facet .facet-title, #search_filters_suppliers .facet .facet-title {
color: #000!important;
}}
/* Agrandissement des icônes de réassurance - sur mobile 640 Resolution */
@media only screen
and (min-device-width : 360px)
and (max-device-width : 640px)
{ #search_filters .facet .facet-title, #search_filters_brands .facet .facet-title, #search_filters_suppliers .facet .facet-title {
color: #000!important;
}}
/* Petite marge haute sur la section de newsletter sur page d'accueil - ordi 768/1024px résolution */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
{ .newsletter-bg {
padding-top: 1rem;
padding-bottom: 1rem;
}}
/* Petite marge haute sur la section de newsletter sur page d'accueil - ordi 1030/1366px résolution */
@media only screen
and (min-width: 1030px)
and (max-width: 1366px)
{ .newsletter-bg {
padding-top: 1rem;
padding-bottom: 1rem;
}}
/* Petite marge haute sur la section de newsletter sur page d'accueil - ordi 1370/1605px résolution */
@media only screen
and (min-width: 1370px)
and (max-width: 1605px)
{ .newsletter-bg {
padding-top: 1rem;
padding-bottom: 1rem;
}}
.custom-checkbox {
margin-left: 0.5rem;
}
/* Appliquer width: 100% uniquement aux miniatures de catégories et une petite marge bottom - toutes résolutions */
.subcategory-image img {
width: 100%;
margin-bottom: 0.5rem;
}
/* Petite marge sur le titre en haut de chaque page de catégorie - sur mobile 640 Resolution */
@media only screen
and (min-device-width : 360px)
and (max-device-width : 640px)
{ #category #content-wrapper, #category #search_filter_toggler {
margin-top: 0rem;
}}
/* CHANGEMENT MAJEUR sur les titres des produits. Font size, line-height, et transformation de Uppercase en math-auto. Être vigilant sur des changements surprises ! */
#products .product-title a, .featured-products .product-title a, .product-accessories .product-title a, .product-miniature .product-title a {
font-weight: 600;
line-height: 1.2rem;
text-transform: uppercase;
font-size: 12px;
}
/* Ajout de petites marges top et bottom pour la phrase "Il y a X article dans votre panier", sur la fenêtre d'ajout de produit - sur mobile 480 Resolution */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
{ #blockcart-modal .cart-products-count {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}}
/* Ajout de petites marges top et bottom pour la phrase "Il y a X article dans votre panier", sur la fenêtre d'ajout de produit - sur mobile 640 Resolution */
@media only screen
and (min-device-width : 360px)
and (max-device-width : 640px)
{ #blockcart-modal .cart-products-count {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}}
/* Ajout d'une petite marge top pour les boutons CONTINUER ACHAT et COMMANDER 1/3/4 FOIS quand on ajoute un produit dans le panier - ordi 768/1024px résolution */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
{ #blockcart-modal .cart-content .cart-content-btn {
margin-top: 0.5rem;
}}
/* Ajout d'une petite marge top pour les boutons CONTINUER ACHAT et COMMANDER 1/3/4 FOIS quand on ajoute un produit dans le panier - ordi 1030/1366px résolution */
@media only screen
and (min-width: 1030px)
and (max-width: 1366px)
{ #blockcart-modal .cart-content .cart-content-btn {
margin-top: 0.5rem;
}}
/* Ajout d'une petite marge top pour les boutons CONTINUER ACHAT et COMMANDER 1/3/4 FOIS quand on ajoute un produit dans le panier - ordi 1370/1605px résolution */
@media only screen
and (min-width: 1370px)
and (max-width: 1605px)
{ #blockcart-modal .cart-content .cart-content-btn {
margin-top: 0.5rem;
}}
/* Ajouts de marges gauche/droite/haut/bas pour la phrase Avis Garantis dans le footer - sur mobile 480 Resolution */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
{ #steavisgarantisFooterVerif {
margin-left: 2rem;
margin-right: 2rem;
margin-top: 2rem;
margin-bottom: -2rem;
}}
/* Ajouts de marges gauche/droite/haut/bas pour la phrase Avis Garantis dans le footer - sur mobile 640 Resolution */
@media only screen
and (min-device-width : 360px)
and (max-device-width : 640px)
{ #steavisgarantisFooterVerif {
margin-left: 2rem;
margin-right: 2rem;
margin-top: 2rem;
margin-bottom: -2rem;
}}
/* Ajout d'd marge de la phrase Avis Garantis dans le footer pour vue ordi uniquement - ordi 768/1024px résolution */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
{ .footer-container .links {
margin-bottom: 1rem;
}}
/* Ajout d'une marge de la phrase Avis Garantis dans le footer pour vue ordi uniquement - ordi 1030/1366px résolution */
@media only screen
and (min-width: 1030px)
and (max-width: 1366px)
{ .footer-container .links {
margin-bottom: 1rem;
}}
/* Ajout d'une marge de la phrase Avis Garantis dans le footer pour vue ordi uniquement - ordi 1370/1605px résolution */
@media only screen
and (min-width: 1370px)
and (max-width: 1605px)
{ .footer-container .links {
margin-bottom: 1rem;
}}
/* Marge haut pour les horaires de magasin sur mobile - sur mobile 480 Resolution */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
{ #stores .page-stores .store-item-container .divide-left {
margin-top: 1rem;
}}
/* Marge haut pour les horaires de magasin sur mobile - sur mobile 640 Resolution */
@media only screen
and (min-device-width : 360px)
and (max-device-width : 640px)
{ #stores .page-stores .store-item-container .divide-left {
margin-top: 1rem;
}}
/* Hauteur de ligne sur les coordonnées indiquées dans la page magasin sur mobile - sur mobile 480 Resolution */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
{ #stores .page-stores .store-item-container .store-description a, #stores .page-stores .store-item-container .store-description address {
line-height: 1.5rem;
}}
/* Hauteur de ligne sur les coordonnées indiquées dans la page magasin sur mobile - sur mobile 640 Resolution */
@media only screen
and (min-device-width : 360px)
and (max-device-width : 640px)
{ #stores .page-stores .store-item-container .store-description a, #stores .page-stores .store-item-container .store-description address {
line-height: 1.5rem;
}}
/* Agrandissement de ligne de Titre H1 + REDUCTION FONT-SIZE de 1.375rem; à 1.1rem; - ordi 768/1024px résolution */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
{ .h1, h1 {
line-height: 2rem;
font-size: 1.1rem;
}}
/* Agrandissement de ligne de Titre H1 + REDUCTION FONT-SIZE de 1.375rem; à 1.1rem; - ordi 1030/1366px résolution */
@media only screen
and (min-width: 1030px)
and (max-width: 1366px)
{ .h1, h1 {
line-height: 2rem;
font-size: 1.1rem;
}}
/* Agrandissement de ligne de Titre H1 + REDUCTION FONT-SIZE de 1.375rem; à 1.1rem; - ordi 1370/1605px résolution */
@media only screen
and (min-width: 1370px)
and (max-width: 1605px)
{ .h1, h1 {
line-height: 2rem;
font-size: 1.1rem;
}}
/* Agrandissement de ligne de Titre H1 + REDUCTION FONT-SIZE de 1.375rem; à 1.1rem; - sur mobile 480 Resolution */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
{ .h1, h1 {
line-height: 1.6rem;
font-size: 1.1rem;
}}
/* Agrandissement de ligne de Titre H1 + REDUCTION FONT-SIZE de 1.375rem; à 1.1rem; - sur mobile 640 Resolution */
@media only screen
and (min-device-width : 360px)
and (max-device-width : 640px)
{ .h1, h1 {
line-height: 1.6rem;
font-size: 1.1rem;
}}
/* Changement de couleur des boutons pour bleu prononcé + AJOUT BORDER CAR IL YA UN TRAIT BLEU QUI DEPASSAIT */
.btn-primary {
background: #16f;
border: #2472ff;
}
/* Changement de couleur des phrases "Tous les nouveaux produits" et "Tous les produits" sur page d'accueil */
#products .all-product-link, .featured-products .all-product-link, .product-accessories .all-product-link, .product-miniature .all-product-link {
color: #0024ff!important;
}
.featured-products .all-product-link {
text-align: center;
width: 100%;
}
/* Nouvelle couleur bleue pour bouton d'ajout panier sur page de fiche produit */
.add .add-to-cart {
background: linear-gradient(45deg,#2472ff,#0024ff);
}
/* Nouvelle couleur bleue pour bouton d'ajout panier (EN CLIQUANT DESSUS, HOVER) sur page de fiche produit */
.btn-primary.focus, .btn-primary:focus, .btn-primary:hover {
color: #ffffff;
background: linear-gradient(45deg,#e20c28,#f7233e);
}
/* Bordure rouge pour BOUTONS (EN CLIQUANT DESSUS, HOVER) - MOBILE UNIQUEMENT */
@media (max-width: 768px) {
.btn-primary:hover {
border-color: #e20c28;
}}
/* Nouveau bleu pour le mega menu sauf les onglets déroulants de sous-menu, se règlent dans le module */
.categories-bg {
background: #1761e6;
}
/* Nouveau bleu pour stocky header, pour ordi - ordi 768/1024px résolution */
@media only screen and (min-width : 768px)
{ .ets_mm_megamenu.sticky_enabled.scroll_heading {
background: #1761e6;
}}
/* Ajustement des Titres des Featured product Sliders (Promotions et Cartes Cadeau) - sur mobile 480 Resolution */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
{ .mpm-featuredproducts-slider-title {
font-size: 1.2rem;
margin-top: 1rem;
}}
/* Ajustement des Titres des Featured product Sliders (Promotions et Cartes Cadeau) sur mobile 640 Resolution */
@media only screen
and (min-device-width : 360px)
and (max-device-width : 640px)
{ .mpm-featuredproducts-slider-title {
font-size: 1.2rem;
margin-top: 1rem;
}}
/* SUR MOBILE : AJUSTER L'ECART DE "CONTINUER MES ACHATS" DANS LA PAGE DU PANIER, ATTENTION CA CHANGE D'AUTRES TRUCS, ETRE VIGILANT ET ENLEVER SI BESOIN, sur mobile 480 Resolution */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
{ .card {
margin-top: 0.5rem;
}}
/* SUR MOBILE : AJUSTER L'ECART DE "CONTINUER MES ACHATS" DANS LA PAGE DU PANIER, ATTENTION CA CHANGE D'AUTRES TRUCS, ETRE VIGILANT ET ENLEVER SI BESOIN, sur mobile 640 Resolution */
@media only screen
and (min-device-width : 360px)
and (max-device-width : 640px)
{ .card {
margin-top: 0.5rem;
}}
/* SUR MOBILE : AUGMENTER L'ECART DE LA PHRASE A COCHER "EMBALLAGE CADEAU", sur mobile 480 Resolution */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
{ .opartgift {
margin-top: 1rem;
}}
/* SUR MOBILE : AUGMENTER L'ECART DE LA PHRASE A COCHER "EMBALLAGE CADEAU", sur mobile 640 Resolution */
@media only screen
and (min-device-width : 360px)
and (max-device-width : 640px)
{ .opartgift {
margin-top: 1rem;
}}
/* SUR MOBILE : AUGMENTER MARGE DU BOUTON "Ajouter" SOUS LA CASE CODE PROMO, sur mobile 480 Resolution */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 640px)
{ .block-promo .promo-input + button {
margin-top: -0.3rem;
}}
/* Changement MAJEUR SUR LES TITRES : ENLEVER LES MAJUSCULES (UPPERCASE) ET REMETTRE LES TITRES en orthographe normal */
.h1, .h2, .h3 {
text-transform: math-auto;
}
/* Agrandissement de l'écart de ligne (line-height) pour le texte d'annonce de la promo dans les étapes du checkout */
.cart-grid-right .promo-discounts .cart-summary-line .label {
line-height: 1.5rem;
}
/* Augmenter l'écart margin-top pour espacer les textes de chaque code promo */
.cart-summary-line {
margin-top: 10px;
}
/* Diminuer l'écart margin-bottom de "VOus avez un code promo ?" pour ramener les textes des promos en-dessous */
.block-promo.promo-highlighted {
margin-bottom: -15px;
}
/* Agrandissement de l'écart de ligne (line-height) pour le texte en général, surtout titres des descriptions des fiches produits */
.page-bg .h1, .page-bg .h2, .page-bg .h3, .page-bg .h4, .page-bg .h5, .page-bg .h6, .page-bg h1, .page-bg h2, .page-bg h3, .page-bg h4, .page-bg h5, .page-bg h6 {
line-height: 1.5rem;
}
/* Changement du padding de 30px à 15px pour faire apparaître les images des miniatures produits en entier, suite à l'ajout de padding bottum dans le bas du cadre (voir l'édition CSS qui est juste au-dessus) */
.product-thumbnail {
padding: 15px 15px 0 15px;
}
/* Faire passer le mega menu (version sticky) au-dessus des boutons paypal */
.ets_mm_megamenu.sticky_enabled.scroll_heading {
z-index: 1000;
}
/* Augmenter la margin-top des titres des catégories (miniatures catégories) pour améliorer la lisibilité */
h1, h2, h3, h4, h5, h6 {
margin-top: 0.6rem;
}
/* SUR MOBILE : centrer certaines options de déroulement dans le mega menu, sur mobile 640 Resolution */
@media only screen
and (min-device-width : 360px)
and (max-device-width : 640px)
{ .ets_mm_block_content ul li:not(.item_has_img) {
float: inherit;
}}
/* SUR MOBILE : centrer certaines options de déroulement dans le mega menu, sur mobile 480 Resolution */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
{ .ets_mm_block_content ul li:not(.item_has_img) {
float: inherit;
}}
/* SUR MOBILE : centrer certaines options de déroulement dans le mega menu, sur mobile 640 Resolution */
@media only screen
and (min-device-width : 360px)
and (max-device-width : 640px)
{ .ets_mm_block_content ul li:not(.item_has_img) {
float: inherit;
}}
/* SUR MOBILE : couleur bleue pour les petits liens cliquables dans le mega menu, sur mobile 640 Resolution */
@media only screen
and (min-device-width : 360px)
and (max-device-width : 640px)
{ #header .ets_mm_block_content a {
color: #000;
}}
/* Réduction de l'écart de lettre dans le prix pour afficher le prix en promo à côté, surtout pour les produits avec des tarifs très longs. Avant, line-spacing à 1px, maintenant, line-spacing à 0.5px. Aussi, Ajout de padding-top pour descentre un peu les prix des vignettes produits. - TOUTES RESOLUTIONS */
#products .product-price-and-shipping, .featured-products .product-price-and-shipping, .product-accessories .product-price-and-shipping, .product-miniature .product-price-and-shipping {
letter-spacing: 0.5px;
padding-top: 0.7rem;
}
button.obfuscation {
text-decoration: underline;
cursor: pointer;
border: 0;
background: none;
}
button.menu_link_obfuscation {
color: #ffffff;
text-transform: uppercase;
background: none;
border: none;
padding: 0;
font-weight: 600;
}
#header .layout_layout1 span.menu_link_obfuscation_low {
cursor:pointer;
line-height: 30px;
}
#header .layout_layout1 li:hover > span.menu_link_obfuscation_low {
color: #ec4249;
}
#header .layout_layout1 .mm_columns_ul .ets_mm_block>p.h4 button.menu_link_obfuscation_lvl_2 {
color: #0024ff;
cursor: pointer;
border: none;
background: none;
text-transform: uppercase;
padding: 0;
}
#header .layout_layout1 .ets_mm_block_content ul li span.menu_link_obfuscation_low::before {
content: ".";
display: inline-block;
font-size: 34px;
line-height: 0;
margin-right: 3px;
vertical-align: 2px;
}
@media screen and (max-width: 1024px) {
button.menu_link_obfuscation {
color: #3f3f3f;
font-weight: bold;
padding: 10px 15px;
float: left;
}
span.arrow.closed {
width: 100%;
}
span.arrow.opened {
right: 9%;
}
.mm_menus_ul .arrow::before,
.mm_menus_ul .arrow::after {
left: 90%;
}
}
@media (min-width: 768px) {
.layout_layout1 .mm_menus_li {
height: 60px;
}
.layout_layout1 .mm_menus_li>button.menu_link_obfuscation:before {
content: "";
height: 1px;
left: 0;
position: absolute;
top: -1px;
transition: all 0.3s ease 0s;
-webkit-transition: all 0.3s ease 0s;
width: 100%;
opacity: 0;
}
.mm_has_sub>button.menu_link_obfuscation .mm_arrow:after {
border-left: 4px solid rgba(0, 0, 0, 0);
border-right: 4px solid rgba(0, 0, 0, 0);
border-top: 4px solid;
content: "";
display: inline-block;
font-size: 81%;
vertical-align: 3px;
margin-left: 1px;
}
.layout_layout1:not(.ybc_vertical_menu) .mm_menus_li:hover > button.menu_link_obfuscation,
.ets_mm_megamenu.layout_layout1.ybc_vertical_menu:hover,
#header .layout_layout1:not(.ybc_vertical_menu) .mm_menus_li:hover > button.menu_link_obfuscation,
.ets_mm_megamenu.layout_layout1.ybc_vertical_menu:hover {
background: #ffffff;
cursor: pointer;
}
.layout_layout1 .mm_menus_li:hover > button.menu_link_obfuscation,
.layout_layout1 .mm_menus_li.active > button.menu_link_obfuscation,
#header .layout_layout1 .mm_menus_li:hover > button.menu_link_obfuscation,
.layout_layout1:hover .ybc-menu-vertical-button,
.layout_layout1 .mm_extra_item button[type="submit"]:hover i,
#header .layout_layout1 .mm_menus_li.active > button.menu_link_obfuscation {
color: #8ab2ff;
}
}
/* CACHER LES INFOS AU DESSUS DE LA BANNIERE, LE TEMPS DE TROUVER LE BON TRUC A MODIFIER */
.top-info {
display: none;
}
/* EDITION DE IMG AFIN QU'ELLE SE METTE TOUJOURS SUR LA LARGEUR MAXIMALE SANS DEPASSER L'ECRAN, pour mobile uniquement */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 640px)
{ img {
max-width: 100%;
height: 100%;
}}
/* Début - BARRE DE PROMOTION ANNONCE-SITE */
#annonce-site {
width: 100%;
font-weight: 600;
font-size: 15.5px;
text-align: center;
color: #fff;
line-height: 1.4rem;
padding-bottom: 5px;
padding-left: 6px;
padding-right: 6px;
background-color: #1c1c1c;
}
@media (min-width: 768px) {
#annonce-site {
padding-top: 5px;
}
}
@media only screen and (min-device-width : 320px) and (max-device-width : 640px) {
#annonce-site {
padding-bottom: 15px;
}
}
#promo-header-progress {
position: relative;
background-color: #333;
overflow: hidden;
padding: 6px 8px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
@media (max-width: 768px) {
#promo-header-progress {
margin-top: 5px;
}}
@media (min-width: 768px) {
#promo-header-progress {
margin-top: 10px;
}}
.progress-fill.partial {
background-color: #1c1c1c;
}
.progress-fill {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 0%;
background: linear-gradient(45deg,#ffe300,#f00);
transition: width 0.5s ease-in-out;
z-index: 1;
}
#promo-progress-text {
position: relative;
z-index: 2;
font-weight: 600;
color: #fff;
line-height: 1.4;
white-space: normal; /* autorise retour à la ligne */
overflow-wrap: break-word; /* coupe proprement */
word-break: break-word;
max-width: 100%; /* empêche débordement */
}
@keyframes pulse-progress {
0% { opacity: 1; }
50% { opacity: 0.4; }
100% { opacity: 1; }
}
.progress-fill.pulse-once {
animation: pulse-progress 0.5s ease-in-out 0s 2;
}
@keyframes loading-stripes {
0% { background-position: 0 0; }
100% { background-position: 40px 0; }
}
#promo-header-progress::before {
content: "";
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
background: repeating-linear-gradient(
45deg,
rgba(255, 255, 255, 0.05) 0,
rgba(255, 255, 255, 0.05) 10px,
transparent 10px,
transparent 20px
);
background-size: 40px 40px;
animation: loading-stripes 1s linear infinite;
z-index: 0;
}
/* Animation arrêtée si .no-animation est présente */
#promo-header-progress.no-animation::before {
animation: none !important;
}
/* Fin - BARRE DE PROMOTION ANNONCE-SITE */
/* Début - BARRE DE COORDONNEES + Accessoires Camions depuis 2012 */
.coordonnees-btn {
color: #2472ff;
text-decoration: none;
border: 1px solid #2472ff;
padding: 5px 6px; /* légèrement réduit */
border-radius: 4px;
font-size: 0.78rem; /* très légère réduction */
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 1 auto;
text-align: center;
line-height: 1.2;
white-space: nowrap;
max-width: 100%; /* limite pour retour ligne contrôlé */
}
.coordonnees-btn i {
margin-right: 3px; /* légèrement réduit */
font-size: 0.9rem;
vertical-align: middle;
}
/* Spécifique au bouton "Contactez-nous" si besoin */
.btn-contact {
overflow: visible;
text-overflow: initial;
}
/* Spécifique au bouton "Livraison chez vous" */
.btn-livraison {
overflow: visible;
text-overflow: initial;
}
/* Hover */
.coordonnees-btn:hover {
background-color: #2472ff;
color: #fff;
}
.coordonnees-btn:hover i {
color: #fff !important;
}
/* Modal */
.modal {
display: none;
position: fixed;
z-index: 9999;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.modal:target {
display: block;
}
.modal-backdrop {
position: absolute;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.6);
top: 0;
left: 0;
z-index: 1;
display: block;
}
.modal-content-zones-livraison {
background: #fff;
color: #000;
margin: 10% auto;
padding: 20px;
width: 90%;
max-width: 360px;
border-radius: 8px;
position: relative;
z-index: 2;
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.modal-title {
font-weight: bold;
font-size: 1.1rem;
margin-bottom: 10px;
}
.modal-content-zones-livraison ul {
margin: 0;
padding-left: 1rem;
}
.modal-content-zones-livraison .close {
position: absolute;
top: 10px;
right: 14px;
text-decoration: none;
font-size: 2rem;
color: #333;
font-weight: bold;
line-height: 1;
}
.modal-content-zones-livraison .close:hover {
color: #000;
}
/* Fin - BARRE DE COORDONNEES + Accessoires Camions depuis 2012 */
/* Couleur noir Titres Produits Vignettes, TOUTES RESOLUTIONS */
#products .product-title a, .featured-products .product-title a, .product-accessories .product-title a, .product-miniature .product-title a {
color: #000;
}
/* Couleur lien sous titre de megamenu de gris clair à noir - sur mobile 480 Resolution */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
{ #header a {
color: #2472ff;
}}
/* Couleur lien sous titre de megamenu de gris clair à noir - sur mobile 640 Resolution */
@media only screen
and (min-device-width : 360px)
and (max-device-width : 640px)
{ #header a {
color: #2472ff;
}}
/* Centrer les résultats de recherche pour éviter les dépassements, et ajout d'une petite margin-bottom, sur téléphone uniquement */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 640px)
{ #ui-id-1 {
left: 0px !important;
width: 99% !important;
}
.ui-menu .ui-menu-item a {
margin-bottom: 0.5rem;
}}
/* Enlever les bordures du Mega Menu, seulement sur vue ordinateur */
@media only screen and (min-width:768px) {
.layout_layout1 .mm_menus_li:nth-child(2) {
border-left: 0px solid #e7e7e7;
}
.layout_layout1 .mm_menus_li {
border-right: 0px solid #e7e7e7;
}
.layout_layout1 .mm_menus_li:last-child {
border-right: 0px solid #e7e7e7;
}}
/* Enlever les bordures de CONNEXION ET PROMOTION dans le header, seulement sur vue ordinateur */
@media only screen and (min-width:768px) {
#_desktop_user_info {
border-left: 0px solid rgba(255,255,255,.2);
border-bottom: 0px solid rgba(255,255,255,.2);
border-right: 0px solid rgba(255,255,255,.2);
}
.wish-list {
border-bottom: 0px solid rgba(255,255,255,.2);
border-right: 0px solid rgba(255,255,255,.2);
}}
/* COULEUR NOIRE POUR TEXTE P, un peu de LINE-HEIGHT et ajoutde MARGIN-BOTTOM POUR NE PLUS AVOIR A FAIRE ENTREE + ESPACE, TOUTES RESOLUTIONS */
p {
color: #000;
line-height: 1.5rem;
margin-bottom: 0.5rem;
}
/* Flèches des Promotions sur page accueil (module featuredproducts) changé d'une couleur claire (invisible) à couleur noire, TOUT */
.mpm-featuredproducts-slider-navigation span {
color: #000;
}
/* Positionnement du titre Promotion sur page accueil (module featuredproducts), ajustement, SUR MOBILE */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 640px)
{ .mpm-featuredproducts-slider-title {
margin-top: 0.2rem;
}}
.reassurance-item {
flex: 0 0 16.66%;
text-align: center;
color: white;
font-weight: bold;
font-size: 16px;
white-space: nowrap;
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
}
.reassurance-item i {
font-size: 14px;
}
@keyframes scrollReassurance {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
}
@media (min-width: 1200px) {
.container {
width: 1230px;
}}
/* AGRANDIR VIGNETTES PRODUITS POUR MEILLEURE EXPERIENCE, ET LEGER PADDING LEFT+RIGHT SUR LES TITRES PRODUITS DES VIGNETTES, SUR MOBILE UNIQUEMENT */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 640px)
{ .product-thumbnail img {
width: 100%;
height: auto;
}
.product-miniature .thumbnail-container {
width: 100%;
height: auto;
}
.featured-products .product-title, .product-miniature .product-title {
padding-left: 0.5rem;
padding-right: 0.5rem;
}}
/* AJUSTER ECART DU PRIX PRODUIT DANS LE PANIER, TOUTES RESOLUTIONS */
.product-line-info {
margin-bottom: 0.5rem;
}
/* COULEUR TEXTE PROMO DANS PANIER ET CHECKOUT, TOUTES RESOLUTIONS */
.block-promo .cart-summary-line .label, .block-promo .promo-name {
color: #00a812;
}
.cart-grid-right .promo-discounts .cart-summary-line .label {
color: #00a812;
}
/* Ajustement du Header dans le checkout, SUR MOBILE */
@media only screen
and (min-device-width : 360px)
and (max-device-width : 640px)
{ .hidden-md-up.text-sm-center.mobile {
padding-top: 0px;
}
body#checkout #header .header-nav {
height: 8.5rem;
}
#header .header-nav {
padding-top: 2.5rem;
}}
/* Léger padding-left pour les listes, sur Mobile uniquement */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 640px)
{ ul {
padding-left: 10px;
}}
/* AJUSTER le dessus de header (SE CONNECTER et PANIER) et AJUSTER l'alignement de SE CONNECTER ET PANIER, sur ordinateur*/
/* AJUSTER la marge-top de la barre de recherche, elle faisait descendre des éléments, sur ordinateur*/
@media only screen and (min-width:768px) {
#header .header-nav .user-info {
margin-top: 3px;
}
#header .header-nav .right-nav {
margin-top: -1px;
}
#header .header-top .search-widget {
margin-top: 0.1rem;
}}
/* Enlever la bordure shadow au dessus du titre des produits dans chaque miniature pour une meilleure visibilité, sur mobile */
@media only screen
and (min-device-width : 360px)
and (max-device-width : 640px)
{ .featured-products .thumbnail-container .product-description {
box-shadow: none;
}
#products .thumbnail-container .product-description {
box-shadow: none;
}}
/* BARRE DE RECHERCHE EN WIDTH 100% ET EN RETIRANT LA MARGE ORIGINALE de -20PX, sur mobile */
@media only screen
and (min-device-width : 360px)
and (max-device-width : 640px)
{ #header .header-top .search-widget {
width: 100%;
margin-right: 0px;
}}
/* ARRANGER L'AFFICHAGE DU LOGO, résolutions mobiles jusqu'à 640px */
@media only screen
and (max-width : 640px)
{ #header .logo {
height: auto;
}}
/* ARRANGER L'AFFICHAGE DU LOGO, résolutions entre 641px et 767px */
@media only screen
and (min-width : 641px)
and (max-width : 767px)
{ #header .header-nav .top-logo a img {
max-height: 70px;
}}
/* ARRANGER L'AFFICHAGE DU LOGO, résolutions entre 768px et 991px */
@media only screen
and (min-width : 768px)
and (max-width : 991px)
{ #header .header-nav .top-logo a img {
max-height: 100px;
max-width: 306px;
}
#header .logo {
max-width: 280px;
max-height: 100px;
}}
/* AGRANDIR ET ADAPTER L'AFFICHAGE DU LOGO, résolutions à partir de 992 px (ordinateur, tablette...) */
@media only screen
and (min-width : 992px)
{ #header .logo {
max-height: 120px;
max-width: 367px;
}}
/* CHANGER LA COULEUR DES LIENS HEADER (MEGA MENU ET BARRES HEADER DU BLANC #fff AU ROUGE #e20c28 toutes résolutions */
#header a:hover {
color: #e20c28;
}
/* MISE EN FORME DU FIL D'ARIANE (BREADCRUMB) SUR ORDINATEUR */
@media only screen and (min-width:768px)
{ #wrapper .breadcrumb {
padding: 10px;
text-align: center;
}}
/* DESIGN DE LA BARRE DE RECHERCHE, TOUTES RESOLUTIONS */
#header .header-top .search-widget form input {
border: 2px solid #2472ff;
border-radius: 20px;
}
.search-widget form button[type="submit"] {
color: #fff;
}
/* ARRANGER L'AFFICHAGE DES VIGNETTES DES CATEGORIES (SOUS-CATEGORIES) SURTOUT SUR ORDINATEUR, TOUTES RESOLUTIONS */
#subcategories .innercat {
padding: 0px;
transition: none;
}
/* ARRANGER L'AFFICHAGE DES VIGNETTES DES CATEGORIES (SOUS-CATEGORIES) UNIQUEMENT SUR GRANDES RESOLUTIONS ORDINATEUR */
@media only screen and (min-width: 1606px)
{ #subcategories .innercat {
height: 10rem;
}}
/* Style pour les grands écrans (4 rubriques par ligne) */
.product-item {
width: calc(25% - 10px);
}
/* Pour les tablettes et écrans intermédiaires (2 rubriques par ligne) */
@media (max-width: 768px) {
.product-item {
width: calc(50% - 10px); /* 2 rubriques par ligne */
}
}
/* Pour les petits écrans (1 rubrique par ligne) */
@media (max-width: 480px) {
.product-item {
width: 100%; /* 1 rubrique par ligne */
}
}
@media (min-width: 768px)
{ #header .header-top {
padding-bottom: 0px;
}}
/* REDUIRE UN PEU LA MARGIN-BOTTOM SOUS LA BARRE DE RECHERCHE, SUR MOBILE UNIQUEMENT */
@media only screen
and (min-device-width : 360px)
and (max-device-width : 640px)
{ #header .header-top {
margin-bottom: -10px;
}}
/* CACHER L'AFFICHAGE DE "NOUVEAU" SUR VIGNETTES PRODUITS */
.featured-products .product-miniature .product-flags .new {
display: none;
}
#products .product-miniature .product-flags .new {
display: none;
}
.product-accessories .product-miniature .product-flags .new {
display: none;
}
.main-product-flag .new {
display: none;
}
/* AJOUT D'UNE MARGIN-TOP SUR L'IMAGE DU PRODUIT CAR IL MANQUE UN PEU LE DESSUS VERS LE HEADER, SUR MOBILE UNIQUEMENT */
@media only screen
and (min-device-width : 360px)
and (max-device-width : 640px)
{ .product-cover {
margin-top: 1.25rem;
}}
#products .product-miniature .on-sale.on-sale {
background: #e20c28;
border-radius: 0px;
font-size: 14px;
font-weight: 600;
margin: 5px 9px;
opacity: 90%;
padding: 2px;
}
.product-accessories .product-miniature .on-sale.on-sale {
background: #e20c28;
border-radius: 0px;
font-size: 14px;
font-weight: 600;
margin: 5px 9px;
opacity: 90%;
padding: 2px;
}
.featured-products .product-miniature .on-sale.on-sale {
background: #e20c28;
border-radius: 0px;
font-size: 14px;
font-weight: 600;
margin: 5px 9px;
opacity: 90%;
padding: 2px;
}
li.product-flag.on-sale {
background: #e20c28;
opacity: 90%;
}
/* AGRANDIR LA MARGE (PADDING DANS CE CAS-LA) POUR LE TEXTE DE BLOC DE TEXTE PERSONNALISE, SUR LA PAGE D'ACCUEIL, SUR MOBILE UNIQUEMENT */
@media only screen
and (min-device-width : 360px)
and (max-device-width : 640px)
{ #custom-text {
padding: 1rem;
}}
/* LEGERE MARGE ENTRE "Prix" ET LE MONTANT DU PRODUIT */
.price {
margin-left: 0.2rem;
}
/* MISE EN FORME DES SECTIONS SUR PAGE D'ACCUEIL */
.categories-home h2 {
text-align: center;
margin-bottom: 2rem;
font-size: 1.8rem;
}
.categories-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
}
.category-box {
border-radius: 12px;
overflow: hidden;
transition: box-shadow 0.3s ease;
position: relative;
}
.category-box img {
width: 100%;
height: auto;
display: block;
filter: brightness(75%);
}
.category-box a {
display: block;
color: inherit;
text-decoration: none;
}
.category-box h3 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
font-size: 1.1rem;
font-weight: bold;
color: white;
z-index: 2;
text-align: center;
width: 90%;
pointer-events: none; /* permet de cliquer à travers vers l'image si nécessaire */
background: linear-gradient(to right, rgba(0, 0, 0, 0.7), rgba(36, 114, 255, 0.4));
padding: 0.4rem 0.8rem;
border-radius: 6px;
border-radius: 6px;
border: 2px solid #2472ff;
text-shadow: 0 0 6px #e20c28;
text-transform: uppercase;
letter-spacing: 1px;
}
.category-box p {
margin: 0;
font-size: 0.95rem;
}
/* CHANGER TAILLE TITRE H2 DE BLOCS DE TEXTE PERSONNALISE, SUR LA PAGE D'ACCUEIL */
#custom-text h2 {
text-transform: inherit;
font-size: 1.2rem;
line-height: 1.5;
}
/* DESIGN POUR CONTENU PAGE D'ACCUEIL */
.intro-ctc {
padding: 2rem 1rem;
background-color: #f7f7f7;
line-height: 1.6;
}
.compatibility-block {
margin-top: 2rem;
background-color: #fff;
box-shadow: 0 0 5px rgba(0,0,0,0.1);
border-left: 4px solid #b30000;
padding: 1rem;
}
.compatibility-block h3 {
margin-bottom: 1rem;
font-size: 1.1rem;
}
.compatibility-list li {
margin-bottom: 0.5rem;
}
.compatibility-list {
columns: 2;
}
@media (max-width: 768px) {
.compatibility-list {
columns: 1;
}}
.about-ctc {
padding: 2rem 1rem;
}
.ctc-container {
display: flex;
gap: 2rem;
}
.about-ctc-text {
line-height: 1.6;
}
.about-ctc-text h2 {
margin-bottom: 1rem;
}
@media (max-width: 991px) {
.ctc-container {
flex-direction: column;
}}
.accessories-types {
padding: 2rem 1rem;
line-height: 1.6;
background: #f7f7f7;
}
.accessories-types h2 {
margin-bottom: 1rem;
border-left: 4px solid #b30000;
background: #fff;
padding: 1rem;
}
.accessory-category {
margin-bottom: 2rem;
border: 1px solid #eee;
border-radius: 6px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.accessory-category h3 {
margin-bottom: 1rem;
color: #333;
}
.accessory-category ul li {
margin-bottom: 0.4rem;
}
.accessory-section {
display: flex;
flex-direction: column;
gap: 2rem;
}
.accessory-block {
display: flex;
gap: 2rem;
margin: 1rem 0rem 1rem 0rem;
}
.accessory-text {
flex: 1 1 60%;
min-width: 300px;
line-height: 1.6;
}
.accessory-image {
flex: 1 1 35%;
min-width: 250px;
}
.accessory-image img {
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
@media (max-width: 991px) {
.accessory-block {
flex-direction: column;
}}
@media (min-width: 991px) {
.accessory-section {
padding: 2rem 1rem;
}
.accessory-text {
padding: 0rem 2rem 0rem 2rem;
}}
.accessory-guides {
gap: 2rem;
margin-top: 2rem;
}
.guide-text h3 {
font-size: 1.2rem;
margin-bottom: 1rem;
position: relative;
line-height: 1.4;
}
.budget-range {
margin-top: 1.5rem;
padding: 1rem;
border-left: 4px solid #ddd;
background-color: #fff;
border-radius: 6px;
}
.budget-range h4 {
font-size: 1.1rem;
margin-bottom: 0.5rem;
color: #333;
}
.budget-range p {
margin: 0;
font-size: 0.95rem;
color: #444;
}
.guide-text ul {
margin: 1rem 0;
}
.guide-text li {
margin-bottom: 0.3rem;
font-size: 0.95rem;
color: #444;
}
.budget-range {
padding: 1.2rem 1.5rem;
}}
.custom-list {
padding-left: 0px;
}
@media (min-width: 768px) {
.guide-block {
padding: 2rem;
}
.accessory-guides {
display: flex;
padding: 0 1rem;
}
.guide-block {
padding: 1.5rem;
}}
@media (min-width: 1024px) {
.accessory-guides {
max-width: 960px;
margin: 2rem auto;
}}
/* Corriger affichage de "Ce produit n'est plus disponible", sur mobile uniquement */
@media only screen
and (min-device-width : 360px)
and (max-device-width : 640px)
{ .alert-danger {
margin-bottom: 3rem;
}}
/* CODE CSS POUR LA NOTIFICATION DU SIFFLET TURC 12 VOLTS */
.custom-toast {
position: fixed;
bottom: 20px;
left: 20px; /* Changement ici pour passer à gauche */
background-color: #ffe08a;
color: #333;
padding: 15px 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.2);
z-index: 9999;
max-width: 320px;
animation: fadeOut 0s ease-in 7s forwards;
display: flex;
align-items: center;
gap: 10px;
justify-content: space-between; /* Assure que le texte est à gauche, croix à droite */
}
.toast-close {
font-size: 18px;
cursor: pointer;
color: #333;
font-weight: bold;
background: none;
border: none;
padding: 0;
margin-left: auto; /* Garde la croix alignée à droite */
}
.toast-toggle:checked + .custom-toast {
display: none;
}
@keyframes fadeOut {
to {
opacity: 0;
visibility: hidden;
}}
/* Début - EDITIONS BLOCS REASSURANCE */
#product #block-reassurance {
box-shadow: rgba(0, 0, 0, 0.2) 2px 2px 8px 0;
border-radius: 10px;
}
@media (max-width: 768px) {
#product #block-reassurance {
margin: 0 0 0.5rem 0;
}}
@media (min-width: 768px) {
#product #block-reassurance {
margin: -.5rem 0rem 1rem 0;
}}
#block-reassurance li {
border-bottom: 0px;
margin: -0.5rem 0.3rem;
}
@media (min-width: 768px) {
#block-reassurance li .block-reassurance-item {
padding: 1rem;
}}
@media (max-width: 768px) {
#block-reassurance li .block-reassurance-item {
padding: 1rem 0rem;
}}
/* Fin - EDITIONS BLOCS REASSURANCE */
/* Début - EDITIONS PANIER & CHECKOUT - TOUT */
/* Panier */
.cart-grid-body .card-block h1 {
margin-bottom: -0.7rem;
}
/* Formulaire checkout */
.form-control {
background-color: #fff;
color: #333;
border: 1px solid #ccc;
padding: .5rem 0.75rem;
border-radius: 4px;
transition: border-color 0.2s, box-shadow 0.2s;
}
body#checkout section#content {
margin-top: 1rem;
}
/* Alignements éléments transporteurs */
@media (max-width: 575px) {
.delivery-option img {
margin-bottom: 0.5rem;
}
body#checkout section.checkout-step .delivery-option label {
padding-left: 3rem;
margin: -1.3rem 0rem 0rem 0rem;
}}
/* Fin - EDITIONS PANIER & CHECKOUT - TOUT */
/* FAIRE DEFILER DOUCEMENT EN CAS DE LIEN CLIQUABLE VERS UN ENDROIT D'UNE PAGE */
html {
scroll-behavior: smooth;
}
/* FAIRE APPARAITRE IMAGES DE CARTES PAYPLUG SUR MOBILE */
@media (max-width: 1023px) {
.payplugPaymentOption label img {
display: inline-block;
}}
/* Début - BADGE EN STOCK FACILEMENT POUR PRODUITS ID */
.badge-en-stock {
background: #e20c28;
color: #fff;
font-size: 14px;
text-align: center;
opacity: 100%;
padding: 4px 6px;
border-radius: 3px;
font-weight: 600;
text-transform: uppercase;
font-family: 'Segoe UI','Roboto',sans-serif;
word-break: break-word;
margin-bottom: 4px;
}
.fa-truck::before {
margin-right: 4px;
}
/* Fin - BADGE EN STOCK FACILEMENT POUR PRODUITS ID */
/* Début - BADGE-CHOCOLAT POUR TOUS PRODUITS ID */
.badge-chocolat {
color: #ffffff;
background-color: #17b201;
text-align: center;
opacity: 100%;
padding: 4px 4px 8px 4px;
font-size: 14px;
font-weight: 600;
word-break: break-word;
}
/* Fin - BADGE EN STOCK FACILEMENT POUR PRODUITS ID */
/* Début - BADGE VISIERE AVEC VISSERIE POUR PRODUITS ID */
.badge-visiere-avec-visserie {
right: 7px;
top: 1px;
background: #1c1c1c;
color: #fff;
padding: 1px 6px;
font-size: 14px;
font-weight: 600;
word-break: break-word;
text-align: center;
}
/* Fin - BADGE VISIERE AVEC VISSERIE POUR PRODUITS ID */
/* Début - CODE CSS POUR L'AFFICHAGE DES TITRES DES PRODUITS MINIATURES AVEC BOUTON [VOIR +] */
.product-title-link {
cursor: pointer;
line-height: 1.4;
text-align: center;
margin: 0.5rem 0.2rem 0.5rem 0.5rem;
font-size: 1rem;
font-weight: 600;
}
.truncated-title {
color: inherit;
text-decoration: none;
pointer-events: auto;
}
.truncated-title .short {
white-space: normal;
word-break: break-word;
overflow-wrap: anywhere;
}
.truncated-title .full {
display: none;
white-space: normal;
}
.title-toggle {
display: none !important;
appearance: none;
border: 0;
margin: 0;
padding: 0;
position: absolute;
left: -9999px;
height: 0;
width: 0;
}
.title-toggle:checked + .product-title-link .truncated-title .short {
display: none;
}
.title-toggle:checked + .product-title-link .truncated-title .full {
display: inline;
}
.title-toggle:checked + .product-title-link .see-more {
display: none;
}
.see-more {
font-size: 1rem;
color: #e20c28;
font-weight: 600;
text-decoration: underline;
pointer-events: auto;
white-space: nowrap;
margin-left: 5px;
}
.product-description {
width: 100%;
}
@media (max-width: 768px) {
.see-more {
font-size: 1.1rem;
line-height: 1.6;
}
.product-title-link {
text-align: left;
}}
/* Fin - CODE CSS POUR L'AFFICHAGE DES TITRES DES PRODUITS MINIATURES AVEC BOUTON [VOIR +] */
/* Début - EDITION CSS DE l'AFFICHAGE PRIX (ATTENTION VERIFIER AFFICHAGE SUR CATEGORIES ET FICHES PRODUITS */
.price {
background: #fff !important;
color: #2472ff !important;
font-weight: 800;
}
.current-price {
background: none;
color: #2472ff;
}
/* Fin - EDITION CSS DE l'AFFICHAGE PRIX (ATTENTION VERIFIER AFFICHAGE SUR CATEGORIES ET FICHES PRODUITS */
/* Début - CODE CSS POUR MISES EN FORME DES PRODUITS SUR 2 RANGEES - PAGE D'ACCUEIL - MOBILE UNIQUEMENT */
@media (max-width: 768px) {
.products {
margin-left: -4px;
margin-right: -4px;
}
.products article.product-miniature {
width: 50%;
box-sizing: border-box; /* pour éviter les bugs futurs */
padding: 0 4px 10px;
margin: 0;
}
.product-thumbnail {
padding: 7px 7px 0 7px;
}
.btn-primary {
padding: 0.7rem;
margin-right: 10px;
font-size: 14px;
}
article.product-miniature div.thumbnail-container {
min-height: 375px;
box-shadow: 0 0;
}
#products .product-miniature, .featured-products .product-miniature {
margin: 0;
box-sizing: border-box;
padding: 0 4px 10px;
}
#products article.product-miniature div.thumbnail-container, article.product-miniature div.thumbnail-container {
min-height: 375px;
box-shadow: 0 0;
}}
/* Fin CODE CSS POUR MISES EN FORME DES PRODUITS SUR 2 RANGEES - PAGE D'ACCUEIL - MOBILE UNIQUEMENT*/
/* CACHER POURCENTAGES OU MONTANTS DE REDUCTIONS QUAND PRODUITS EST REMISE - TOUTES RESOLUTIONS*/
#products .product-miniature .discount-percentage.discount-percentage {
display: none;
}
#products .product-miniature .discount-amount.discount-amount {
display: none;
}
.featured-products .product-miniature .discount-percentage.discount-percentage {
display: none;
}.product-accessories .product-miniature .discount-percentage.discount-percentage {
display: none;
}
/* AMELIORATIONS AFFICHAGE BOUTON AJOUT PANIER SUR FICHE PRODUIT - MOBILE UNIQUEMENT */
@media (max-width: 768px) {
.product-quantity .add .add-to-cart {
font-size: 14px;
padding: 0rem 1.5rem 0 1rem;
}}
/* EDITIONS SUR AFFICHAGE PRIX DANS FICHE PRODUIT, ET CACHER LE "VOUS ECONOMISEZ XX" SUR FICHE PRODUIT */
.has-discount .discount {
display: none;
}
.product-discount .regular-price {
font-weight: 600;
font-size: 1.2rem;
}
/* EDITIONS SUR PRODUCT AVAILABILITY POUR FICHES PRODUITS */
#product-availability {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 0.92rem;
line-height: 1.5;
color: #2c2c2c;
word-break: break-word;
position: relative;
font-weight: 400;
}
#product-availability .product-available {
margin-top: -1.3rem;
}
#product-availability .product-last-items {
margin-top: -1.3rem;
}
#product-availability .product-unavailable {
margin-top: -1.3rem;
}
.product-availability-block {
background: #f0f0f0;
padding: 1rem 1.2rem;
}
.product-availability-block .availability-label {
font-weight: 600;
font-size: 0.95rem;
color: #2b2b2b;
letter-spacing: 0.2px;
}
#product-availability i.material-icons {
font-size: 22px;
margin-top: -3px;
flex-shrink: 0;
}
@media (max-width: 768px) {
.product-availability-block {
margin: 1rem 0 0 0;
padding: 1rem 1rem 0.5rem 1rem;
}
#product-availability {
font-size: 0.85rem;
gap: 8px;
}
#product-availability i.material-icons {
font-size: 20px;
}}
@media (min-width: 768px) {
.product-availability-block {
margin: 0.5rem 0 0 0;
}}
/* Début - CODE CSS POUR PAGINATION */
/* Ligne 1 : les flèches */
.pagination-arrows {
display: flex;
justify-content: center;
gap: 20px;
margin-bottom: 10px;
flex-wrap: wrap;
}
.arrow-btn {
padding: 20px 16px;
border-radius: 6px;
font-size: 16px;
min-width: 140px;
text-align: center;
transition: background 0.2s;
border: 1px solid #1c1c1c;
}
.arrow-btn:hover {
color: #2472ff;
}
.arrow-btn.disabled {
background-color: #ccc;
pointer-events: none;
cursor: default;
}
/* Ligne 2 : numéros de page */
.pagination .page-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
font-size: 16px;
padding: 0;
margin: 0 auto;
max-width: 100%;
box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0);
}
.pagination .page-list li a {
display: flex;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 44px;
font-size: 18px;
font-weight: 600;
border: 1px solid #ccc;
border-radius: 4px;
padding: 6px 12px;
text-decoration: none;
color: #333;
white-space: nowrap;
}
.pagination .page-list li.current a {
background: #005ed8;
color: white;
pointer-events: none;
}
.pagination .page-list li a:hover {
background: #f5f5f5;
}
.spacer {
display: flex;
align-items: center;
justify-content: center;
min-width: 20px;
font-size: 18px;
}
@media (max-width: 768px) {
.pagination > div:first-child {
text-align: center;
color: #1c1c1c;
margin-bottom: 1rem;
}
.pagination {
margin-top: 0rem;
margin-bottom: 2rem;
}}
/* Fin - CODE CSS POUR PAGINATION */
.banner {
margin-top: 0px;
}
.featured-products .product-miniature .discount-amount.discount-amount {
background: #00a812;
display: none;
}
.product-accessories .product-miniature .discount-amount.discount-amount {
display: none;
}
/* Début - Editions pour CHECKOUT LIVRAISON, AGRANDIR TEXTE, AUGMENTER MARGES DES FORMS, POUR MOBILE UNIQUEMENT */
@media (max-width: 768px) {
.form-control-label {
font-size: 1.1rem;
font-weight: 600;
}
.form-control-comment {
padding-top: 0rem;
}
body#checkout .form-group {
margin-bottom: 1.5rem;
}}
/* Fin - Editions pour CHECKOUT LIVRAISON, AGRANDIR TEXTE, AUGMENTER MARGES DES FORMS, POUR MOBILE UNIQUEMENT */
/* Code CSS pour "Vérifiez bien la zone sélectionnée (France, DOM, Corse…) pour éviter des frais de port incorrects" dans le formulaire d'adresse de livraison */
.zone-warning {
margin-top: 5px;
font-size: 0.88rem;
color: #444;
background: #fffbea;
border-left: 4px solid #ffc107;
padding: 10px 12px;
border-radius: 3px;
line-height: 1.5;
}
.zone-warning strong {
color: #b54000;
}
.zone-warning .zone-list {
padding-left: 1.2em;
margin: 6px 0 0;
list-style-type: disc;
}
/* Code CSS pour barre-telephone-email-ordi SUR ORDI UNIQUEMENT */
#barre-telephone-email-ordi {
width: 100%;
background-color: #000;
border-bottom: 2px solid #2472ff;
color: #fff;
font-weight: 600;
font-size: 16px;
padding: 8px 15px;
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
white-space: nowrap;
overflow: hidden;
}
#barre-telephone-email-ordi .coordonnees-link {
color: #fff;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
#barre-telephone-email-ordi .coordonnees-link i {
color: #fff;
}
#barre-telephone-email-ordi .separator {
color: #fff;
}
/* PAGE DE VENTE JUILLET */
.juillet-hero {
text-align: center;
padding: 0.5em 1em;
background: #f9f9f9;
}
.juillet-hero img {
max-width: 100%;
height: auto;
margin-bottom: 1em;
}
.juillet-hero h1 {
font-size: 1.8em;
color: #01ca3b;
margin-bottom: 0.5em;
}
.juillet-desc {
font-size: 1.1em;
color: #333;
margin-bottom: 1.5em;
}
.juillet-dates {
display: block;
margin-top: 0.5em;
font-weight: bold;
color: #000;
}
.juillet-cta {
display: inline-block;
background-color: #01ca3b;
color: #fff;
padding: 0.8em 1.5em;
border-radius: 5px;
text-decoration: none;
font-weight: bold;
transition: background 0.3s ease;
}
.juillet-cta:hover {
background-color: #01952c;
}
.juillet-info-bon {
margin-top: 2em;
background: #e6fbe9;
padding: 1em;
border-left: 5px solid #01ca3b;
font-size: 0.95em;
}
.offre-promo-juillet {
display: flex;
justify-content: center;
flex-wrap: wrap;
padding: 1em 1em;
}
.promo-item-juillet {
max-width: 400px;
text-align: center;
margin: 1em;
border: 1px solid #ddd;
padding: 1.5em;
border-radius: 10px;
background: #fff;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.promo-item-juillet img {
max-width: 100%;
height: auto;
margin-bottom: 1em;
}
.promo-texte-juillet {
font-size: 1.5em;
margin: 1em 0;
color: #000;
}
.promo-code-juillet a {
display: inline-block;
margin-top: 0.5em;
font-weight: bold;
color: #ff1c1c;
font-size: 1.5em;
}
.promo-code-juillet a:hover {
text-decoration: underline;
}
/* Responsive pour mobile */
@media screen and (max-width: 600px) {
.offre-promo-juillet {
flex-direction: column;
align-items: center;
}
.promo-juillet-item {
width: 90%;
}}
/* AFFICHER "Mettre le code promo" SUR RESOLUTIONS JUSQU'A 992 PIXELS (QUAND SECTION S'AFFICHE A DROITE) */
/* DESIGN POUR "Mettre le code promo" dans page du panier */
@media screen and (min-width: 992px) {
.bouton-panier-code-promo {
display: none;
}}
.bouton-panier-code-promo {
background-color: #fff;
color: red;
font-weight: 600;
padding: 7px 7px 9px 4px;
margin-left: 15px;
margin-bottom: 10px;
clip-path: polygon(3% 5%,100% 1%,97% 93%,0% 97%);
border: 11px solid red;
font-size: 14px;
}
/* AGRANDISSEMENT DU TEXTE D'ERREUR PROMO */
.block-promo .promo-code .alert-danger {
font-size: 1rem;
line-height: 1.8rem;
}
/* ALIGNEMENT GAUCHE DE LABEL (OPTION DE PAIEMENT VIREMENT BANCAIRE), ATTENTION CA PEUT IMPACTER D'AUTRES TRUCS, VERIFIER */
label {
text-align: left;
}
/* ================================
CORRECTIONS QUANTITÉ + AJOUTER AU PANIER
================================ */
/* Case quantité (desktop + mobile) */
.bootstrap-touchspin {
width: 47px; /* Avant 100% */
box-shadow: none; /* Avant 2px 2px 4px rgba(0,0,0,.2) */
}
/* Boutons flèches ^ et v (tous écrans, mais neutralisé ensuite par media queries) */
.product-quantity .input-group-btn-vertical .btn {
background: linear-gradient(45deg, #2472ff, #0024ff);
color: #fff;
border: 0; /* simplifie */
}
/* Supprime la bordure des boutons */
.bootstrap-touchspin .btn-touchspin {
border: 0;
}
/* Ajustement spécifique de la flèche bas */
.bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-down {
margin-top: 0; /* Avant -2px → corrige le décalage entre [^] et [v] */
}
/* Flèches [^] [v] mises horizontalement */
.bootstrap-touchspin .input-group-btn-vertical > .btn {
display: initial;
width: 35px; /* largeur des boutons quantité qui impacte fiche produit ET panier ! */
}
/* ================================
MOBILE (max-width: 768px)
================================ */
@media (max-width: 768px) {
.product-quantity .input-group-btn-vertical .btn {
padding: 0.5rem 0.9rem 1.5rem; /* ↑↓ bien visibles */
margin-right: 0.3rem; /* Ecart entre ↑↓ */
}
.product-quantity .input-group-btn-vertical {
margin-top: 0.3rem;
}
.product-quantity .input-group-btn-vertical .btn i {
font-size: 1.1rem; /* Avant 1rem */
top: .5rem; /* Avant 0.125rem */
left: 0.3rem; /* Avant 0.1875rem */
}
.bootstrap-touchspin .input-group-btn-vertical > .btn {
margin-top: 1rem;
}}
/* ================================
DESKTOP (min-width: 768px)
================================ */
@media (min-width: 768px) {
/* Aligne les flèches correctement */
.product-quantity .input-group-btn-vertical {
display: flex;
gap: 0.5rem; /* espace régulier entre ^ et v */
}
/* Flèches centrées verticalement et horizontalement */
.bootstrap-touchspin .input-group-btn-vertical > .btn {
align-items: center;
justify-content: center;
height: 40px; /* même hauteur pour ↑ et ↓ */
margin-right: 0; /* évite les décalages */
padding: 0;
line-height: 1;
margin-top: 1.5rem;
}
/* Icônes flèches */
.product-quantity .input-group-btn-vertical .btn i {
font-size: 1.1rem; /* Avant 1rem */
position: static; /* supprime top/left → centrage parfait */
}
}
/* Ajustement hauteur de l'icône de profil QUANT ON EST CONNECTE SEULEMENT, sur mobile 320px sur 640px Resolution */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 640px)
{ .fal.fa-shopping-basket {
margin-top: 0.4rem;
}}
/* OFFRE OCTOBRE - A SUPPRIMER - Cacher sur desktop/tablette */
.promo-mobile {
display: none;
}
/* OFFRE OCTOBRE - A SUPPRIMER - Cacher sur mobile */
.promo-desktop {
display: block;
}
/* OFFRE OCTOBRE - A SUPPRIMER - Version mobile uniquement */
@media only screen and (max-width: 767px) {
.promo-mobile {
display: block;
}
.promo-desktop {
display: none;
}
}
/* ANNONCES HEADER */
#annonce-site-2 {
width: 100%;
font-weight: 600;
font-size: 15.5px;
text-align: center;
line-height: 1.4rem;
padding-left: 0.5rem;
padding-right: 0.5rem;
color: #fff;
}
#annonce-site-3 {
width: 100%;
font-weight: 600;
color: #fff;
text-align: center;
font-size: 15.5px;
line-height: 1.4rem;
padding: 0.2rem 3rem;
background: #ff0764;
margin-top: .3rem;
margin-bottom: 8px;
}
#annonce-site-4 {
width: 100%;
color: #fff;
font-size: 15.5px;
font-weight: 600;
text-align: center;
margin-top: 0.3rem;
margin-bottom: 0.5rem;
background: #1e6bff;
line-height: 1.4rem;
padding-left: 1.3rem;
padding-right: 1.3rem;
}
@media (max-width: 768px) {
#annonce-site-3 {
clip-path: polygon(7% 0, 95% 0, 93% 100%, 5% 100%);
}
#annonce-site-4 {
clip-path: polygon(5% 0,97% 0,94% 100%,3% 100%);
}
}
/* CACHER "TRIER PAR" à côté de la case TRIER LES ACCESSOIRES, TOUTES RESOLUTIONS */
.products-selection .sort-by {
display: none;
}
/* AJUSTER ICONE COMPTE POUR RESOLUTIONS ECRAN HORIZONTAL MOBILE (VERIFIER SI PAS D'IMPACT SUR AUTRES RESOLUTIONS */
@media only screen
and (min-device-width : 642px)
and (max-device-width : 766px)
{ .far.fa-user.login-icon {
margin-top: 7px;
}}
.block-categories .category-top-menu .category-name i {
color: #fff;
}
/* === EDITIONS MODULE PANIER CROSS SELLING === */
.promotion-top {
padding: 14px 0px 2px 0px !important;
}
button.reduction {
background: #459702;
font-weight: 600;
}
/* === MISE EN FORME DU TEXTE DANS PANIER POUR INDIQUER CODE DE REDUCTION POUR AUTRE ACHAT, SI COMMANDE VALIDEE === */
.texte-code-promo-apres-commande {
margin-top: 25px;
margin-bottom: 10px;
}
@media (min-width: 768px) {
.texte-code-promo-apres-commande {
padding: 0px 22px 0px 22px;
}}
@media (max-width: 768px) {
.texte-code-promo-apres-commande {
padding: 0px 17px 0px 17px;
}}
/* === COULEUR BOUTON REFERENCES === */
.btn-references {
color: #000;
background-color: #fff;
clip-path: polygon(3% 5%,100% 1%,97% 93%,0% 97%);
box-shadow: 1px 4px 1px 1px #fff;
border: 15px solid #2472ff;
text-decoration: underline;
}
/* empêche l’icône d’être soulignée */
.btn-references i {
text-decoration: none;
}
/* texte seul souligné */
.btn-references-text {
text-decoration: underline;
}
/* === Marge gauche formulaire de paiement Payplug (impacte aussi affichage des autres paiements) changée de 2.875rem à 0rem === */
body#checkout .additional-information {
margin-left: 0rem;
}
/* NOUVEAU BLOC REASSURANCE (OPTIMISÉ ECOMMERCE) */
.product-reassurance-lite {
padding: 12px 14px;
border: 1px solid #eee;
border-radius: 8px;
background: #fafafa;
}
.reassurance-list {
list-style: none;
padding: 0;
margin: 0;
}
.reassurance-list li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 14px;
line-height: 1.5;
color: #222;
padding: 6px 0;
}
/* séparation discrète entre items */
.reassurance-list li + li {
border-top: 1px solid #f0f0f0;
}
/* icône plus visible */
.reassurance-list .icon {
display: flex;
width: 22px;
height: 22px;
min-width: 22px;
margin-top: 1px;
color: #111;
}
/* SVG mieux proportionné */
.reassurance-list svg {
width: 100%;
height: 100%;
fill: currentColor;
}
/* texte un peu plus lisible */
.reassurance-list span:last-child {
font-weight: 500;
}
/* MOBILE OPTIMISÉ */
@media (max-width: 768px) {
.product-reassurance-lite {
padding: 10px 12px;
}
.reassurance-list li {
font-size: 13.5px;
}
.reassurance-list .icon {
width: 20px;
height: 20px;
}
/* AJUSTEMMENT FONT [Description] [Référence] [Avis] en réduisant font-size afin que ça reste sur une ligne pour certains téléphones */
.tabs .nav-tabs .nav-item {
font-size: 14.5px;
}}
/* CODE CSS POUR BOUTON STOCK STYLE POPUP SOUS BLOCK PRODUCT AVAILABILITY */
.stock-info-trigger-wrapper .coordonnees-btn {
display: block;
width: 100%;
text-align: center;
padding: 10px;
}
/* CODE CSS POUR BLOC MOYENS DE PAIEMENTS SUR FICHES PRODUITS */
.product-payment-lite {
margin-bottom: 20px;
padding: 12px 14px;
border: 1px solid #eee;
border-radius: 8px;
background: #fafafa;
}
.product-payment-lite .payment-title {
margin-bottom: 8px;
}
.product-payment-lite .payment-list {
list-style: none;
padding: 0;
margin: 0;
}
.product-payment-lite li {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
margin-bottom: 6px;
}
.product-payment-lite li:last-child {
margin-bottom: 0;
}
.product-payment-lite .icon {
display: flex;
align-items: center;
justify-content: center;
color: #2e7d32;
}
/* Code pour "Précisions sur les stocks de Product Availability (product-add-to-cart.tpl) */
.bouton-stock-product-availability {
color: #2472ff;
padding: 8px 0 10px 0;
font-size: 0.78rem;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 1 auto;
text-align: center;
white-space: nowrap;
max-width: 100%;
background-color: #dedede;
width: 100%;
}
.bouton-stock-product-availability i {
margin-right: 3px;
font-size: 0.9rem;
vertical-align: middle;
}
.bouton-stock-product-availability:hover {
background-color: #2472ff;
color: #fff;
}
.bouton-stock-product-availability:hover i {
color: #fff !important;
}
/* Personnalisations de l'affichage du texte "{product.quantity} en stock ! Commandez avant 13H etc (product-add-to-cart.tpl) */
.stock-message {
font-size: 14px;
line-height: 1.6;
}
.stock-message .stock-qty {
font-weight: bold;
}
/* Barre Header avec coordonnées style popup + Widget Avis Garantis */
.top-bar-flex {
display: none; /* caché par défaut (desktop) */
}
/* MOBILE */
@media (max-width: 768px) {
.top-bar-flex {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: nowrap;
overflow: hidden;
padding: 5px 25px;
}}
/* TABLETTE */
@media (min-width: 481px) and (max-width: 1024px) {
.top-bar-flex {
display: flex;
}}
/* GAUCHE */
.top-bar-left {
display: flex;
align-items: center;
flex: 0 0 auto;
}
/* BOUTON ICÔNES */
.top-contact-btn {
gap: 6px;
padding: 4px 8px;
}
.top-contact-btn i {
margin: 0;
font-size: 14px;
}
/* DROITE */
.top-bar-right {
display: flex;
align-items: center;
flex: 1 1 auto;
justify-content: flex-end;
overflow: hidden;
}
/* WIDGET */
.grc-site-rating {
white-space: nowrap;
transform-origin: right center;
}
/* IMPORTANT POUR MOBILE */
@media (max-width: 480px) {
.top-contact-btn {
padding: 3px 6px;
}
.grc-site-rating {
transform: scale(0.90);
}}
/* DESIGN POUR BOUTON ICONES TELEPHONE + MAIL (BARRE MOBILE AVEC WIDGET AVIS GARANTIS) */
.coordonnees-btn.btn-contact.top-contact-btn {
color: #fff !important;
border-color: #fff;
}