/* Custom code goes here.  * A template should always ship with an empty custom.css */.preload {    position: absolute;    top: 0;    left: 0;    width: 100%;    height: 100%;    z-index: 9999;    background-repeat: no-repeat;    background-color: #fff;    background-position: center;}@media (max-width: 1199px) {    .thumbnail-container .product-image .quickview {        display: none;    }}@media (min-width: 992px) {    .box-hd-service {        padding-top: 166px;    }}@media (max-width: 991px) {    .box-hd-service {        padding-top: 62px;    }}.product-detail.product-thumbs-left .product-thumb-images .thumb.selected {    opacity: 1;}.product-detail.product-thumbs-left .product-thumb-images.has-arrows .thumb.selected {    opacity: 0.4;}.product-detail.product-thumbs-left .product-thumb-images.has-arrows .slick-list .slick-slide.slick-current .thumb {    opacity: 1;}.lps_results.ac_results {    width: 100% !important;}#product-modal.active {    left: 0;    z-index: 9999;}#product-modal .modal-content .modal-body .product-images {    display: block !important;}#product-modal .modal-dialog {    height: calc(100% - 60px);    transform: translate(0, 0);}#product-modal .modal-content .modal-body figure img {    width: auto;}#product-modal #thumbnails {    padding: 15px 0;    height: calc(100% - 30px);}@media (max-width: 767px) {    .header-top.active {        display: block !important;    }}/* Styles personnalisés pour les pastilles de couleur */.input-color {    border: 1px solid #ccc; /* Couleur de la bordure */    border-radius: 4px; /* Coins arrondis */    padding: 2px; /* Espacement à l'intérieur */}







.product-description, .product-title { /* Modifie les classes selon celles de ta page */

    text-align: justify; /* Justifie le texte */

}





.nav-link[href="#product-reviews"] {

    display: none !important;

}



.psgdpr_consent_icon {

    display: none !important; /* Cache l'icône */

}



.fa-list-ul,

.fa-th {

    display: none;

}



// <uniquifier>: Use a unique and descriptive class name

// <weight>: Use a value from 200 to 1000



.nunito-<uniquifier> {

  font-family: "Nunito", sans-serif;

  font-optical-sizing: auto;

  font-weight: <weight>;

  font-style: normal;

}



/* Appliquer Nunito à tous les éléments */

body {

    font-family: 'Nunito'; /* Utiliser Nunito pour tout le texte */

}



/* Appliquer Nunito Medium pour les éléments en gras */

strong, b {

    font-family: 'Nunito'; /* Assurez-vous que les éléments en gras utilisent Nunito */

    font-weight: 500; /* Utiliser la version Medium pour les éléments en gras */

}





.img-fluid[src*="fr-default-category_default.jpg"] {

    display: none;

}



@media only screen and (max-width: 768px) {

    .zoomContainer {

        width: 100% !important;

        height: auto !important;

        left: 0 !important;

        top: 0 !important;

        transform: none !important;

    }

}





@media only screen and (max-width: 768px) {

    .zoomContainer {

        display: none;

    }

}



@media (max-width: 768px) {

    #thumb-gallery {

        margin-top: 20px; /* Espace au-dessus du carrousel */

    }



    /* Ajuste la taille des flèches pour le mobile */

    .slick-arrow {

        height: 30px; /* Taille pour mobile */

        width: 30px; /* Taille pour mobile */

    }

}







/* Assure que les images prennent toute la largeur */

#thumb-gallery .slick-slide img {

    width: 100%; /* Prend toute la largeur du conteneur */

    height: auto; /* Conserve le ratio d'aspect */

}



/* Ajuste la hauteur du carrousel pour s'adapter aux images */

#thumb-gallery {

    max-width: 100%; /* Évite le débordement */

    overflow: hidden; /* Cache les débordements */

}



/* Styles pour les flèches de navigation (si nécessaire) */

.slick-arrow {

    background-color: rgba(255, 255, 255, 0.7); /* Fond semi-transparent */

    border-radius: 50%; /* Arrondir les flèches */

    height: 40px; /* Ajuste la taille */

    width: 40px; /* Ajuste la taille */

    z-index: 100; /* S'assurer que les flèches soient au-dessus */

}



/* Positionner les flèches correctement */

.slick-prev {

    left: 10px; /* Ajuste l'espacement à gauche */

}



.slick-next {

    right: 10px; /* Ajuste l'espacement à droite */

}





.message__headline {

    padding-top: 10px; /* Ajustez selon vos besoins */

}



<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&display=swap" rel="stylesheet">





.h1.product-detail-name {

    font-family: 'Nunito'; /* Police Nunito */

    font-weight: 700; /* Gras */

}



#subcategories img.img-fluid {

  display: none !important;

}





/* Effet de zoom et bords arrondis au survol */

.submenu-category img {

    transition: transform 0.3s ease, border-radius 0.3s ease;

}



/* Au survol de la catégorie */

.submenu-category:hover img {

    transform: scale(1.05);  /* Zoom légèrement sur l'image */

    border-radius: 20px;     /* Bords plus arrondis */

}





/* Masquer le bloc div#subcategories uniquement pour la page "Collections" */

.category-collections div#subcategories {

    display: none;

}





/* Container de la collection */

.collection-container {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 20px;

    margin-top: 12px;

    justify-items: center;

}



/* Style des éléments de collection */

.collection-item {

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    width: 300px; /* Agrandissement des images */

}



.collection-link {

    text-decoration: none;

    color: inherit;

}



/* Style du titre */

.collection-title {

    font-family: 'Harmonia Pro', sans-serif;

    font-size: 16px;

    font-weight: bold;

    text-transform: uppercase;

    color: black;

    margin-bottom: 0px;

}



/* Style du sous-titre */

.collection-subtitle {

    font-family: 'Nunito', sans-serif;

    font-size: 12px;

    color: #666666;

    margin: 5px 0 10px; /* Espace entre sous-titre et image */

}



/* Style de l'image avec effet de survol */

.collection-image {

    width: 100%;

    max-width: 300px; /* Agrandissement des images */

    border-radius: 8px;

    transition: transform 0.3s ease;

}



.certification-container {

  margin-top: 12px;

  font-family: Nunito, sans-serif;

  color: #666666;

  font-size: 16px;

}



.certification-logos {

  display: flex;

  justify-content: space-between;

  margin-top: 20px;

}



.certification-item {

  width: 48%;

  text-align: center;

}



.certification-item img {

  width: 190px; /* Taille du logo */

  transition: transform 0.3s ease;

  cursor: pointer;

  margin-bottom: 12px; /* Espace entre le logo et la description */

}



.certification-item img:hover {

  transform: scale(1.1);

}



.certification-text {

  font-family: Nunito, sans-serif;

  font-size: 16px;

  color: #666666;

  margin-top: 8px;

  text-align: center;

}







/* Cache langue et devise */

div.row.box-nav2.ApRow.has-bg.bg-fullwidth-container {

    display: none;

}





/* Cache barre blanche avec nombre de produits en haut des listes de produit */

#js-product-list-top {

    display: none !important;

}





.product-detail.product-image-gallery .product-thumb-images {

    margin: 0;

}

@media (max-width: 480px) {

  .box-dptop {

    padding: 0 5px 15px 5px;

  }

}

/* Custom header mobile*/

@media (max-width: 991px) {

    .wr-button-mobile {

        margin-top: 0;

        

    }

    .box-dptop .header-logo {

        flex: 0 0 100%;

    }

   .top-right-header {padding-right: 40px;}

    .box-dptop > div:nth-child(2){

        padding-right: 24px;

    }

.box-dptop .header-logo {

    margin: 0;

}

    .box-menu .wr-button-mobile {

        padding-left: 0;

    }

}

@media (max-width: 767px)  and (max-width: 991px){

.box-menu .wr-button-mobile {

        top: 40px;

        right: 15px;

}

}

@media (max-width: 767px) {

.box-menu .wr-button-mobile {

        top: 18px;

        right: 30px;

}

}



@media (max-width: 480px) {

    .box-dptop .header-logo {

        position: static;

        transform: none;

    }

}



@media (max-width: 480px) {

    .box-dptop > div:nth-child(2) {

                 position: static !important;

    }

}



.box-dptop > .menu-desktop {

    position: static !important;

    flex: 1;

  

}

@media (min-width: 992px){

.box-dptop > .menu-desktop {

   display: block !important;

}

}

.box-dptop .top-right-header {

    display: flex;

    justify-content: flex-end;

}



}

.leo-megamenu .navbar-nav > li > a {

    padding: 15px 20px;

}



@media (max-width: 1199px) and (min-width: 992px){

    .menu-desktop {

        order: 3;

    }

    

    .box-dptop {

        flex-wrap: wrap;

        padding-bottom: 0;

    }

}

@media (max-width: 1199px) {

    .leo-megamenu .navbar-nav > li > a {

        padding: 20px 10px;

    }

}
.leo-megamenu .fa.fa-bars {
  color: #000 !important;
}
@media (max-width: 480px) {
    .box-dptop {
        padding: 10px 0 !important;
        display: flex  !important;
    }
    .box-dptop > div:nth-child(2) {
        margin-bottom: 0  !important;
    }
    .box-menu .wr-button-mobile {
        top: 13px;
    }
}

@media (min-width: 1200px) {
    #product .container {
        width: 1717px !important;
        max-width: 100%;
    }
}


/* Ajouter la police GrandCru-LightS */
@font-face {
    font-family: 'GrandCru-LightS';
    src: url('https://boutique.nydel-france.fr/themes/leo_monogven/assets/fonts/GrandCru-LightS.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

/* Importer la police Nunito de Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600&display=swap');

/* Style général pour le texte - Version bureau */
.nydel-story {
    font-family: 'Nunito', sans-serif;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

.nydel-story .nydel-title {
    font-family: 'GrandCru-LightS', sans-serif;
    font-size: 28px;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 15px;
    line-height: 1.6; /* Augmente l'interligne */
}

.nydel-story p {
    font-size: 18px;
    line-height: 1.6;
}

/* Changer la police du titre sur mobile uniquement */
@media (max-width: 768px) {
    .nydel-story {
        font-family: 'Nunito', sans-serif; /* Garder Nunito pour le corps sur mobile */
    }

    /* Cibler spécifiquement le titre sur mobile */
    .nydel-story .nydel-title {
        font-family: 'GrandCru-LightS', sans-serif;
        font-size: 24px; /* Réduire la taille pour mobile */
        text-transform: uppercase;
    }

    /* Cibler le texte du paragraphe sur mobile */
    .nydel-story p {
        font-size: 16px; /* Ajuster la taille du texte pour mobile */
        line-height: 1.4;
    }
}