/** Shopify CDN: Minification failed

Line 197:0 Unexpected "}"

**/
/* --- NOUVEAU STYLE MODERNE COMPLET POUR LA SECTION DIAPORAMA --- */

/* --- Styles Communs (tous les écrans) --- */
.section[id*="__slideshow"] {
  position: relative; /* Indispensable pour positionner les boutons sur PC */
}

/* On masque les contrôles par défaut (points, compteur, play/pause) */
.section[id*="__slideshow"] .slider-counter,
.section[id*="__slideshow"] .slideshow__autoplay,
.section[id*="__slideshow"] .slideshow__control-wrapper {
  display: none !important;
}


/* --- Styles pour Mobile & Tablette (jusqu'à 989px) --- */
@media screen and (max-width: 989px) {
  
  /* Le conteneur du texte qui passe en dessous */
  .section[id*="__slideshow"] .slideshow__text-wrapper {
    padding-top: 0rem; /* Ajoute de l'espace au-dessus du texte */
  }
  
  /* On force le titre et le texte à être sombres sur fond blanc */
  .section[id*="__slideshow"] .slideshow__text .banner__heading,
  .section[id*="__slideshow"] .slideshow__text .banner__text p {
    color: #1a1b18; /* Un noir pas trop agressif. Changez si besoin. */
  }

  /* On force le bouton à être visible sur fond blanc */
  .section[id*="__slideshow"] .slideshow__text .banner__buttons .button {
    background-color: #00453B !important;
    color: white !important;
    border: 2px solid #00453B !important;
  }
  
  /* Les flèches de navigation en dessous */
  .section[id*="__slideshow"] .slideshow__controls {
    position: static;
    margin-top: 0rem;
    display: flex;
    justify-content: center;
    gap: 1.5rem;
  }

  .section[id*="__slideshow"] .slider-button {
    position: static;
    transform: none;
    background-color: #00453B;
    color: white;
    border-radius: 50%;
    width: 44px;
    height: 44px;
  }
}


/* --- Design "Fenêtre" pour PC (à partir de 990px) --- */
@media screen and (min-width: 990px) {
  .section[id*="__slideshow"] {
    margin-top: 2rem;
    margin-bottom: 5rem;
  }

  /* Effet Fenêtre */
  .section[id*="__slideshow"] .slideshow.banner {
    width: 85%;
    margin-left: auto;
    margin-right: auto;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0, 70, 59, 0.1);
  }

  /* Conteneur des boutons sur PC */
  .section[id*="__slideshow"] .slideshow__controls {
    position: static;
    width: 100%;
    height: 100%;
  }

  /* Style et Position des Boutons sur PC */
  .section[id*="__slideshow"] .slider-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    background-color: #00453B; /* Fond blanc semi-transparent */
    backdrop-filter: blur(5px); /* Effet de flou "verre dépoli" */
    color: white;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
  }
  
  /* Positionnement spécifique pour chaque bouton sur PC */
  .section[id*="__slideshow"] .slider-button--prev {
    left: 40px;
  }
  .section[id*="__slideshow"] .slider-button--next {
    right: 40px;
  }

  /* Effet de survol des boutons sur PC */
  .section[id*="__slideshow"] .slider-button:hover {
    background-color: #00453B;
    color: white;
    transform: translateY(-50%) scale(1.1);
  }
}


/* --- DESIGN MODERNE V2 POUR LA SECTION MULTICOLONNE --- */

/* On cible la section directement pour s'assurer que les styles s'appliquent */
.section[id*="__multicolumn"] .grid {
  column-gap: 3rem;
  row-gap: 5rem;
}

  /* 2. STYLE DE LA CARTE (LA "CASE") */
  & .multicolumn-list__item .multicolumn-card {
    background-color: #ffffff; /* Fond blanc pur */
    border-radius: 16px;       /* Coins très arrondis */
    box-shadow: 0 4px 15px rgba(0, 70, 59, 0.05); /* Ombre subtile couleur thème */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%; /* Force la carte à prendre toute la hauteur de sa cellule */
    display: flex;
    flex-direction: column;
  }
  
  /* Animation de survol sur la carte */
  & .multicolumn-list__item:hover .multicolumn-card {
    transform: translateY(-10px);
    box-shadow: 0 12px 40px rgba(0, 70, 59, 0.12); /* Ombre plus prononcée */
  }

  /* 3. STYLE DE L'IMAGE */
  & .multicolumn-card__image-wrapper {
    border-radius: 16px 16px 0 0; /* Coins arrondis uniquement en haut */
    overflow: hidden; /* Nécessaire pour que le radius s'applique à l'image */
  }
  & .multicolumn-card__image {
    /* Aucune animation de zoom sur l'image */
    width: 100%;
    height: 100%;
    object-fit: cover; /* Assure que l'image remplit l'espace sans se déformer */
  }

  /* 4. STYLE DE LA ZONE DE CONTENU */
  & .multicolumn-card__info {
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Pousse le bouton en bas */
  }

  /* 5. STYLE DU BOUTON DANS LA CARTE ("LINK") */
  & .multicolumn-card__info .link {
    /* Transformation en un vrai bouton */
    margin-top: auto; /* Pousse le bouton tout en bas */
    padding: 10px 20px;
    background-color: #00453B;
    color: white;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center; /* Centre le texte et l'icône */
    gap: 8px;
    transition: background-color 0.3s ease, transform 0.3s ease;
  }

  /* Animation de survol du bouton */
  & .multicolumn-card__info .link:hover {
    background-color: #007a68; /* Couleur du thème plus claire */
    transform: scale(1.05); /* Effet de grossissement */
    color: white; /* Garde le texte en blanc */
  }
  
  /* Ajustement de la flèche dans le bouton */
  & .multicolumn-card__info .link .icon-wrap {
    transition: transform 0.3s ease;
  }
  & .multicolumn-card__info .link:hover .icon-wrap {
    transform: translateX(3px);
  }
}

/* --- STYLE MODERNE V4 POUR LE CARROUSEL MULTICOLONNE (FINAL & ROBUSTE) --- */

/* --- Conteneur Général (tous écrans) --- */
.section[id*="__multicolumn"] .slider-mobile-gutter {
  position: relative;
  padding: 0 3rem; /* Espace sur les côtés pour les boutons */
}

/* Cache le compteur de slides inutile (tous écrans) */
.section[id*="__multicolumn"] .slider-counter {
  display: none !important;
}

/* --- AFFICHAGE SUR MOBILE (Jusqu'à 749px) --- */
@media screen and (max-width: 749px) {
  
  /* FORCE 1 COLONNE PAR 1 */
  .section[id*="__multicolumn"] .multicolumn-list.grid {
    grid-template-columns: 100% !important; /* Force une seule colonne qui prend toute la largeur */
    --grid-mobile-horizontal-spacing: 0;
    padding: 0;
  }

  /* Ajuste la taille de chaque slide sur mobile */
  .section[id*="__multicolumn"] .multicolumn-list__item {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* --- BOUTONS DE NAVIGATION (tous écrans) --- */

/* Conteneur des boutons */
.section[id*="__multicolumn"] .slider-buttons {
  display: block !important; /* On s'assure qu'ils sont toujours visibles */
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  left: 0;
  z-index: 5;
  pointer-events: none; /* Le conteneur ne doit pas être cliquable */
}

/* Style et position des boutons Précédent/Suivant */
.section[id*="__multicolumn"] .slider-button {
  pointer-events: all; /* Mais les boutons, oui */
  position: absolute;
  top: 0; /* Aligné par rapport au conteneur .slider-buttons */
  
  /* Style Visuel */
  background-color: #00453B;
  color: white;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  border: 1px solid #E2E8F0;
  transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
  cursor: pointer;
}

.section[id*="__multicolumn"] .slider-button--prev {
  left: 0;
}
.section[id*="__multicolumn"] .slider-button--next {
  right: 0;
}

/* Effet de survol (ne s'appliquera que sur les appareils avec souris) */
.section[id*="__multicolumn"] .slider-button:hover {
  background-color: #00453B;
  color: white;
  transform: scale(1.1);
}

/* Ajustements de taille pour les très petits écrans */
@media screen and (max-width: 749px) {
  .section[id*="__multicolumn"] .slider-mobile-gutter {
    padding: 0 3rem; /* On réduit un peu l'espace sur les côtés */
  }
  .section[id*="__multicolumn"] .slider-button {
    width: 38px;
    height: 38px;
  }
}

/* --- DESIGN MODERNE POUR LES CARTES PRODUITS (COLLECTION VEDETTE) --- */

/* On cible toutes les sections de collection vedette */
.section[id*="__featured-collection"] {

  /* 1. STYLE GLOBAL DE LA CARTE PRODUIT */
  & .card-wrapper {
    background-color: #ffffff;
    border-radius: 16px;
    box-shadow: 0 4px 15px rgba(0, 70, 59, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden; /* Important pour les coins arrondis de l'image */
  }

  /* Animation de survol sur la carte */
  & .card-wrapper:hover {
    transform: translateY(-10px);
    box-shadow: 0 12px 40px rgba(0, 70, 59, 0.12);
  }

  /* 2. STYLE DE L'IMAGE */
  /* On s'assure que l'image remplit bien l'espace */
  & .card--standard .card__inner {
    border-radius: 16px 16px 0 0;
  }
  
  /* 3. STYLE DE LA ZONE DE CONTENU (TITRE, PRIX, BOUTON) */
  & .card__content {
    padding: 2rem;
  }
  & .card-information {
    text-align: left; /* Force l'alignement à gauche pour un look pro */
  }
  & .card-information .price {
    margin-top: 1rem;
    margin-bottom: 2rem; /* Plus d'espace avant le bouton */
  }

  /* 4. STYLE DU BOUTON "AJOUTER AU PANIER" (QUICK ADD) */
  & .quick-add button.quick-add__submit {
    width: 100%; /* Le bouton prend toute la largeur */
    margin-top: 1.5rem;
    background-color: #00453B;
    color: white !important;
    border: 2px solid #00453B;
    border-radius: 8px;
    padding: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px; /* Espace pour le futur spinner */
  }

  /* Animation de survol du bouton */
  & .quick-add button.quick-add__submit:hover {
    background-color: #007a68;
    transform: scale(1.03); /* Effet de grossissement subtil */
  }
  
  /* Style du bouton quand il est en chargement */
  & .quick-add button.quick-add__submit[aria-disabled="true"] {
    background-color: #f1f1f1;
  }

  /* Cacher le texte quand le spinner de chargement est visible */
  & .quick-add button.quick-add__submit.loading > span {
    display: none;
  }

  /* --- RENDRE LE BOUTON VISIBLE EN PERMANENCE --- */
  /* C'est la partie la plus importante. Par défaut, le bouton n'apparaît qu'au survol sur PC */
  @media screen and (min-width: 990px) {
    .section[id*="__featured-collection"] .quick-add {
      opacity: 1;
      transform: translateY(0);
    }

    /* On garde une petite animation d'apparition au survol de la carte */
    .section[id*="__featured-collection"] .card-wrapper .quick-add {
      opacity: 0;
      transform: translateY(10px);
      transition: opacity 0.3s ease, transform 0.3s ease;
    }
    .section[id*="__featured-collection"] .card-wrapper:hover .quick-add {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

/* --- AJUSTEMENT DE LA TAILLE DE L'IMAGE DANS LA SECTION "LIGNES MULTIPLES" --- */

/* On ne l'applique que sur les écrans larges (PC et grandes tablettes) */
@media screen and (min-width: 750px) {

  /* On cible la grille qui contient l'image et le texte */
  .section[id*="__multirow"] .image-with-text__grid {
    /* On change la distribution des colonnes */
    grid-template-columns: 1fr 1.5fr !important; /* L'image prend 1 part, le texte 1.5 parts */
    align-items: center; /* Centre verticalement l'image et le texte */
  }

  /* On s'assure que la colonne de l'image est bien la première */
  .section[id*="__multirow"] .image-with-text__media-item {
    grid-column: 1;
  }
  
  /* On s'assure que la colonne de texte est bien la deuxième */
  .section[id*="__multirow"] .image-with-text__text-item {
    grid-column: 2;
  }
  
  /* Cas où l'image est à droite (pour l'alternance) */
  .section[id*="__multirow"] .image-with-text__grid--reverse .image-with-text__media-item {
    grid-column: 2;
  }
  
  .section[id*="__multirow"] .image-with-text__grid--reverse .image-with-text__text-item {
    grid-column: 1;
  }

  /* Pour un meilleur alignement du contenu texte */
  .section[id*="__multirow"] .image-with-text__content {
    padding: 2rem 4rem; /* Ajoute un peu plus d'espace autour du texte */
  }
}

/* --- DESIGN "SUPERPOSITION DOUCE" POUR LA SECTION IMAGE AVEC TEXTE PERSONNALISÉE --- */

/* On ne l'applique que sur PC */
@media screen and (min-width: 990px) {

  

  /* On utilise notre nouvelle classe personnalisée comme ancre */
  .custom-image-with-text-section .image-with-text__media {
    border-radius: 20px !important;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0, 70, 59, 0.15);
  }
  
  .custom-image-with-text-section .image-with-text__media img {
    transition: transform 0.4s ease;
  }
  
  .custom-image-with-text-section .image-with-text:hover .image-with-text__media img {
    transform: scale(1.05);
  }
  
  .custom-image-with-text-section .image-with-text__content {
    background-color: #ffffff;
    border-radius: 16px !important;
    padding: 4rem !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.5);
  }
  
  .custom-image-with-text-section .image-with-text__grid:not(.image-with-text__grid--reverse) .image-with-text__text-item {
    transform: translateX(-2%);
  }

  .custom-image-with-text-section .image-with-text__grid.image-with-text__grid--reverse .image-with-text__text-item {
    transform: translateX(2%);
  }
  
  .custom-image-with-text-section .image-with-text__content .button {
    background-color: #00453B;
    color: white;
    border: 2px solid #00453B;
    border-radius: 8px;
    padding: 12px 24px;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(0, 70, 59, 0.2);
  }

  .custom-image-with-text-section .image-with-text__content .button:hover {
    background-color: transparent;
    color: #00453B;
    transform: translateY(-2px);
  }
}

/* --- CORRECTION RESPONSIVE POUR LES GRILLES DE PRODUITS (MOBILE) --- */

/* On cible TOUTES les grilles de produits sur les écrans de moins de 750px */
@media screen and (max-width: 749px) {

  /* 1. FORCER UNE SEULE COLONNE */
  /* C'est la règle la plus importante. On écrase le style "grid--2-col-tablet-down" de Dawn */
  .grid.product-grid.grid--2-col-tablet-down {
    grid-template-columns: 1fr !important;
  }

  /* 2. AJOUTER UN ESPACEMENT VERTICAL */
  .grid.product-grid {
    row-gap: 2.5rem !important; /* Ajoute un espace de 25px entre chaque rangée */
  }
  
  /* 3. CORRIGER L'ESPACE DANS LES CARTES (POUR LE STYLE "SPLIT") */
  /* On annule les styles PC pour le design "vanovation-card" */
  .vanovation-card {
    padding-bottom: 0 !important;
  }
  
  .vanovation-card .card {
    display: block !important;
  }
  
  .vanovation-card .card__content {
    padding: 1.5rem 1.5rem 0 1.5rem !important;
  }
  
  .vanovation-card .quick-add {
    position: static !important;
    border-top: none !important;
    padding: 1.5rem !important;
    border-radius: 0;
  }
}

/* --- AMÉLIORATION SLIDER "PEEK" POUR MULTICOLONNE SUR PC --- */

/* On ne l'applique que sur les grands écrans */
@media screen and (min-width: 990px) {

  /* On s'assure que le conteneur du slider est bien visible */
  .section[id*="__multicolumn"] slider-component {
    display: block;
    position: relative; /* Pour positionner les flèches */
    margin: 0 -5rem; /* Crée l'espace pour voir les cartes sur les côtés */
    padding: 0 5rem;
  }

  /* On active le comportement de slider sur la liste */
  .section[id*="__multicolumn"] .multicolumn-list.grid {
    display: flex; /* On passe en mode flexbox */
    overflow-x: auto; /* Permet le défilement horizontal */
    scroll-snap-type: x mandatory; /* Aimante les cartes lors du scroll */
    scroll-behavior: smooth; /* Défilement doux */
    -webkit-overflow-scrolling: touch; /* Améliore le scroll sur Safari */
    padding-bottom: 2rem; /* Espace pour la barre de scroll */
  }

  /* On cache la barre de scroll moche */
  .section[id*="__multicolumn"] .multicolumn-list.grid::-webkit-scrollbar {
    display: none;
  }

  /* Chaque carte devient un élément du slider */
  .section[id*="__multicolumn"] .multicolumn-list.grid .multicolumn-list__item {
    scroll-snap-align: start; /* Aligne le début de chaque carte */
    flex: 0 0 calc(33.33% - 2rem); /* Chaque carte prend 1/3 de la largeur, moins un peu de gap */
    width: calc(33.33% - 2rem);
  }

  /* On ajoute des boutons de navigation personnalisés */
  .section[id*="__multicolumn"] .slider-buttons {
    display: none; /* On cache les boutons par défaut */
  }

  /* Vous pouvez ajouter ici le style des flèches si vous le souhaitez,
     mais le scroll manuel est souvent plus moderne sur PC. */
}

/* --- CORRECTION : SUPPRIMER LA BORDURE AUTOUR DE L'IMAGE DANS "LIGNES MULTIPLES" --- */

/* On cible spécifiquement le conteneur de l'image dans cette section */
.section[id*="__multirow"] .image-with-text__media {
  border: none !important; /* Force la suppression de toute bordure */
  box-shadow: 0 15px 40px rgba(0, 70, 59, 0.15); /* On remet l'ombre qui a pu être supprimée */
}

.section[id*="__multirow"] .image-with-text__content {
    border-radius: 20px; /* <-- LA LIGNE AJOUTÉE */
    padding: 4rem !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.5);
  }

 .section[id*="__multirow"] .button{
     border: none !important; 
     
  }

 
  /* --- CORRECTION FORCÉE DE LA COULEUR DU TEXTE DE LA BANNIÈRE SUR MOBILE (V2) --- */

/* On cible uniquement les écrans de taille mobile */
@media screen and (max-width: 749px) {

  /*
    On utilise un sélecteur très spécifique pour écraser les styles du thème.
    On cible le titre (h2) et le paragraphe (p) UNIQUEMENT à l'intérieur
    de la boîte de contenu de la bannière.
  */
  
  .banner__box .banner__heading,
  .banner__box .banner__text p {
    color: #000000 !important; /* On force la couleur noire sans discussion */
  }
}