/** Shopify CDN: Minification failed

Line 589:0 Expected "*/" to terminate multi-line comment

**/
/*==============================================================
                          SECTION Collage
===============================================================*/

/* --- GRILLE D'IMAGES & VIDÉO --- */
.custom-image-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px; 
  justify-content: flex-start;
  background-color: #ffffff;
  padding: 10px;
}

.grid-item {
  flex: 0 0 calc(50% - 4px);
  max-width: calc(50% - 4px);
  margin-bottom: 15px; 
}

.grid-item img, .grid-item video {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  object-fit: cover;
}

.grid-text {
  margin-top: 8px !important; 
  color: #000000;
  font-family: 'Newsreader', serif;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* --- SÉPARATEUR --- */
.custom-separator-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0 auto;
}

.custom-line {
  height: 1px;
  background-color: #e0e0e0;
  flex-grow: 1;
  max-width: 150px;
}

.custom-dot {
  width: 4px;
  height: 4px;
  background-color: #000;
  border-radius: 50%;
  margin: 0 20px;
}

/* --- FENÊTRE MODALE (POP-UP) --- */
.modal-overlay {
  display: none;
  position: fixed;
  z-index: 10000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.7);
  align-items: center;
  justify-content: center;
}

.modal-content {
  background-color: #fff;
  padding: 40px;
  border: 1px solid #000;
  width: 90%;
  max-width: 450px;
  position: relative;
  text-align: center;
}

/* --- RESPONSIVE --- */
@media (max-width: 600px) {
  .grid-item {
    flex: 0 0 calc(50% - 4px);
    max-width: calc(50% - 4px);
  }
  .custom-line { max-width: 80px; }
}

.collage-wrapper-title {
  margin-top: 0;
  margin-bottom: 3rem;
}

.collage {
  display: grid;
}

.collage__item > * {
  width: 100%;
}

.collage__item .card__content {
  flex-grow: initial;
}

@media screen and (max-width: 749px) {
  .collage {
    grid-column-gap: var(--grid-mobile-horizontal-spacing);
    grid-row-gap: var(--grid-mobile-vertical-spacing);
  }

  .collage--mobile {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .collage--mobile .collage__item--left:nth-child(3n - 2) {
    grid-column: span 2;
  }

  .collage--mobile .collage__item--left:nth-child(3n - 2):nth-last-child(2) {
    grid-column: span 1;
  }

  .collage--mobile .collage__item--left:nth-child(3n) {
    grid-column-start: 2;
  }

  .collage--mobile .collage__item--right:nth-child(3n - 2) {
    grid-column-start: 1;
  }

  .collage--mobile .collage__item--right:nth-child(3n - 2):last-child {
    grid-column: span 2;
  }

  .collage--mobile .collage__item--right:nth-child(3n - 1) {
    grid-column-start: 2;
  }

  .collage--mobile .collage__item--right:nth-child(3n) {
    grid-column: 1 / span 2;
  }
}

@media screen and (min-width: 750px) {
  .collage {
    grid-auto-flow: column;
    grid-column-gap: var(--grid-desktop-horizontal-spacing);
    grid-row-gap: var(--grid-desktop-vertical-spacing);
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .collage__item--left:nth-child(3n - 2) {
    grid-column: 1 / span 2;
    grid-row: span 2;
  }

  .collage__item--left:nth-child(3n - 2):last-child {
    grid-column: 1 / span 3;
  }

  .collage__item--left:nth-child(3n - 1),
  .collage__item--left:nth-child(3n) {
    grid-column-start: 3;
  }

  .collage__item--left:nth-child(3n - 1):last-child {
    grid-row: span 2;
  }

  .collage__item--right:nth-child(3n - 2) {
    grid-column: 1 / span 1;
    grid-row: span 1;
  }

  .collage__item--right:nth-child(3n - 2):last-child {
    grid-column: 1 / span 3;
  }

  .collage__item--right:nth-child(3n - 1) {
    grid-column-start: 1;
  }

  .collage__item--right:nth-child(3n-1):last-child {
    grid-column: span 2;
  }

  .collage__item--right:nth-child(3n) {
    grid-column: 2 / span 2;
    grid-row: span 2;
  }

  .collage__item--collection:only-child,
  .collage__item--product:only-child {
    justify-self: center;
    max-width: 73rem;
    width: 100%;
  }
}

.collage-card {
  height: 100%;
  position: relative;
  border-radius: var(--border-radius);
  border: var(--border-width) solid rgba(var(--color-foreground), var(--border-opacity));
  padding: var(--image-padding);
}

/* Needed for gradient continuity with or without animation, background-attachment: local scopes the gradient to its container which happens automatically when a transform is applied (animation on scroll) */
.collage-card.gradient {
  transform: perspective(0);
}

.collage-card:after {
  content: '';
  position: absolute;
  z-index: -1;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius)
    rgba(var(--color-shadow), var(--shadow-opacity));
  width: calc(var(--border-width) * 2 + 100%);
  height: calc(var(--border-width) * 2 + 100%);
  top: calc(var(--border-width) * -1);
  left: calc(var(--border-width) * -1);
}

.collage-card.product-card-wrapper {
  --border-radius: var(--product-card-corner-radius);
  --border-width: var(--product-card-border-width);
  --border-opacity: var(--product-card-border-opacity);
  --shadow-horizontal-offset: var(--product-card-shadow-horizontal-offset);
  --shadow-vertical-offset: var(--product-card-shadow-vertical-offset);
  --shadow-blur-radius: var(--product-card-shadow-blur-radius);
  --shadow-opacity: var(--product-card-shadow-opacity);
  --shadow-visible: var(--product-card-shadow-visible);
  --image-padding: var(--product-card-image-padding);
}

.collage-card .media {
  height: 100%;
  overflow: hidden;
  border-radius: calc(var(--border-radius) - var(--border-width) - var(--image-padding));
}

.collage-card .deferred-media {
  height: 100%;
  overflow: visible;
}

.collage-card__link {
  display: block;
  height: 100%;
}

.collage-card .deferred-media__poster {
  background-color: transparent;
  border: 0;
}

.collage-card .deferred-media__poster:after {
  content: '';
  position: absolute;
  z-index: 1;
  outline-offset: 0.3rem;
  bottom: calc(var(--border-width) * -1);
  left: calc(var(--border-width) * -1);
  right: calc(var(--border-width) * -1);
  top: calc(var(--border-width) * -1);
}

.collage-card .deferred-media__poster:focus:after {
  box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3);
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
}

.collage-card .deferred-media__poster:focus-visible:after {
  box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3);
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
}

.collage-card .deferred-media__poster:focus:not(:focus-visible),
.collage-card .deferred-media__poster:focus:not(:focus-visible):after {
  outline: none;
  box-shadow: none;
}

.collage-card .deferred-media__poster:focus {
  outline: none;
  box-shadow: none;
}

/*==============================================================
                          SECTION BANNIÈRE PERSONNALISÉE
===============================================================*/

/* --- BANNIÈRE PERSONNALISÉE AVEC POSITIONS --- */
.custom-hero-container {
  width: 100%;
  margin: 20px 0;
  position: relative;
}

.hero-image-wrapper {
  position: relative;
  width: 100%;
  display: flex;
}

.hero-image-wrapper img {
  width: 100%;
  height: auto;
  display: block;
}

.hero-text-overlay {
  position: absolute;
  z-index: 2;
  width: auto; /* Le cadre s'adapte à la longueur du texte */
  max-width: 80%; /* Évite que le texte ne touche le bord droit */
}

.hero-title {
  font-family: 'Newsreader', serif !important;
  font-weight: 300;
  margin: 0;
  line-height: 1.1;
  text-transform: none;
  /* Rend la taille dynamique : elle s'adapte entre mobile et desktop */
  font-size: calc({{ section.settings.font_size }}px * 0.7) !important;
}

.hero-subtitle {
  font-family: 'Newsreader', serif !important;
  font-weight: 300;
  line-height: 1.4;
  margin-bottom: 0;
  font-size: calc({{ section.settings.sub_font_size }}px * 0.8) !important;
}

/* --- OVERLAY POUR LA BANNIÈRE --- */
.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1; /* Se place entre l'image et le texte */
  transition: background-color 0.3s ease;
}

.hero-text-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 5% 7%; /* Marge de sécurité pour que le texte ne colle pas aux bords */
  display: flex;
  box-sizing: border-box;
  z-index: 2;
}

.hero-text-content {
  display: flex;
  flex-direction: column;
  max-width: 600px; /* Évite que le texte ne s'étale trop sur les écrans larges */
}

.hero-subtitle {
  font-family: 'Newsreader', serif;
  font-weight: 300;
  margin-top: 15px; /* Espace entre titre et sous-titre */
  margin-bottom: 0;
  line-height: 1.4;
  font-style: italic; /* Optionnel, pour un look plus "éditorial" */
}

/* --- STYLE DE BASE (MOBILE) --- */
.hero-title {
  font-family: 'Newsreader', serif !important;
  font-weight: 300;
  margin: 0;
  line-height: 1.1;
  text-transform: none;
  font-size: 28px !important; /* Taille fixe pour mobile */
}

.hero-subtitle {
  font-family: 'Newsreader', serif !important;
  font-weight: 300;
  line-height: 1.4;
  font-size: 16px !important; /* Taille fixe pour mobile */
}

/* --- STYLE DESKTOP (ORDINATEUR) --- */
@media (min-width: 768px) {
  .hero-title {
    /* Le CSS récupère la valeur du curseur ici */
    font-size: {{ section.settings.font_size }}px !important;
  }
  .hero-subtitle {
    font-size: {{ section.settings.sub_font_size }}px !important;
  }
}
  
  .hero-text-overlay {
    padding: 15px;
  }
}

@media (max-width: 750px) {
  .hero-text-overlay {
    /* Empêche le texte de sortir de l'écran sur mobile */
    left: clamp(5%, {{ section.settings.pos_x }}%, 85%) !important;
    bottom: clamp(5%, {{ section.settings.pos_y }}%, 85%) !important;
    max-width: 90%;
  }
}
/*============ Bouton ========================*/
/* --- Style de base (Desktop) --- */
.hero-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 20px !important; /* Taille plus lisible sur mobile */ 
  padding: 12px 45px; /* Largeur généreuse sur ordi */
  min-width: 200px;
  /* ... vos autres styles (Newsreader, transitions, etc.) ... */
}

/* --- Style spécifique pour MOBILE --- */
@media screen and (max-width: 749px) {
  .hero-button {
    /* 1. On change la nature de l'élément pour qu'il accepte une largeur fixe */
    display: block !important;
    font-size: 20px !important; /* Taille plus lisible sur mobile */ 
    
    /* 2. On définit une largeur fixe et on empêche tout dépassement */
    width: 100px !important;    /* Ajustez ce chiffre pour la largeur souhaitée */
    min-width: 80px !important;
    max-width: 160px !important;

    /* 3. On centre le bloc lui-même */
    margin-left: auto !important;
    margin-right: auto !important;

    /* 4. On centre le texte à l'intérieur verticalement et horizontalement */
    padding: 12px 0 !important;
    text-align: center !important;
    line-height: 1.2 !important;

    /* 5. Sécurité pour le texte */
    box-sizing: border-box !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }
}

/* --- Effet au clic (Feedback visuel) --- */

.hero-button:active {
  transform: scale(0.97);          /* Le bouton rétrécit très légèrement (effet enfoncé) */
  background-color: #f4f4f4;       /* Change subtilement le fond (si le bouton est clair) */
  opacity: 0.8;                    /* Légère transparence */
  transition: transform 0.1s ease; /* Transition très rapide pour la réactivité */
}

/* Optionnel : Si votre bouton a un fond noir à l'origine */
/*
.hero-button:active {
  background-color: #333 !important; 
  color: #fff !important;
}
*/

/* L'effet au survol (Hover) */
.hero-button:hover {
  opacity: 1;
  background-color: transparent !important; /* Le fond devient transparent */
  border: 1px solid {{ section.settings.button_bg_color }}; /* Un contour apparaît */
  color: {{ section.settings.button_bg_color }} !important; /* Le texte prend la couleur du fond précédent */
  transform: translateY(-1px);
}

@media (max-width: 767px) {
  .hero-button {
    padding: 8px 22px !important;
    font-size: 13px !important;
    letter-spacing: 0.05em;
  }
}

/*============== End BANNIÈRE PERSONNALISÉE ===========*/


/*=================== chevrons plus fins ============================*/
/* --- Personnalisation des flèches Swiper (Look Minimaliste) --- */

.swiper-button-next,
.swiper-button-prev {
  background-color: transparent; /* Suppression du fond si présent */
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* On change la taille de l'icône via la variable Swiper */
:root {
  --swiper-navigation-size: 30px; /* Plus petit et élégant */
}

/* On affine le trait des flèches par défaut */
.swiper-button-next::after,
.swiper-button-prev::after {
  font-family: swiper-icons; /* On garde l'icône native */
  font-size: var(--swiper-navigation-size);
  font-weight: 100 !important; /* Force le trait le plus fin possible */
  letter-spacing: 0;
  text-transform: none;
  font-variant: initial;
  line-height: 1;
}

/* Effet au survol : les flèches se déplacent légèrement */
.swiper-button-next:hover {
  transform: translateX(5px);
}

.swiper-button-prev:hover {
  transform: translateX(-5px);
}

/* Adaptation pour mobile : on rend les flèches un peu plus discrètes */
@media screen and (max-width: 749px) {
  /* On fait réapparaître les flèches */
  .swiper-button-next,
  .swiper-button-prev {
    display: flex !important; 
    top: auto;
    bottom: 20px; /* On les place en bas pour ne pas gêner le visage sur les photos */
    transform: scale(0.7); /* On les réduit un peu pour mobile */
  }

  .swiper-button-prev {
    left: 10px;
  }

  .swiper-button-next {
    right: 10px;
  }

  /* On réduit la taille du texte pour laisser de la place aux flèches */
  .slide-content {
    padding: 20px 40px;
    margin-bottom: 50px; /* On remonte le texte pour ne pas chevaucher les flèches */
  }
}
/*=================== chevrons plus fins ============================*/

/* Force l'affichage même si le JS tarde à se charger */
.swiper {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.swiper-wrapper {
  display: flex !important;
}

.swiper-slide {
  flex-shrink: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-size: cover !important;
  background-position: center !important;
  min-height: 400px; /* Assure une hauteur minimum visuelle */
}
/*=============== SLIDESHOW ==============