/* ==========================================================================
   index.css — Styles extraits des blocs <style> inline de index.html.
   Ordre préservé pour respecter la cascade Webflow.
   ========================================================================== */


/* --- Reset outline Webflow --- */
.wf-force-outline-none[tabindex="-1"]:focus {
  outline: none;
}


/* --- Anti-flash des éléments animés (desktop uniquement) --- */
@media (min-width: 992px) {
  html.w-mod-js:not(.w-mod-ix) [data-w-id="77bc8d44-ca28-4ffe-c15c-d0719032513e"] {
    opacity: 0;
    display: none;
  }
  html.w-mod-js:not(.w-mod-ix) [data-w-id="3c690a61-b725-066d-8866-3ef0b9b93dae"] {
    display: none;
    opacity: 0;
  }
  html.w-mod-js:not(.w-mod-ix) [data-w-id="e65ac358-2cf1-c20f-bf40-8cce34844c0b"] {
    display: none;
    opacity: 0;
  }
  html.w-mod-js:not(.w-mod-ix) [data-w-id="4a346437-3410-d9b8-d020-ed75f8b9a425"] {
    display: none;
    opacity: 0;
  }
  html.w-mod-js:not(.w-mod-ix) [data-w-id="25a07e30-5a1e-b2c2-d3e7-5abc2865cad3"] {
    display: none;
    opacity: 0;
  }
  html.w-mod-js:not(.w-mod-ix) [data-w-id="2a846860-dc0f-e87a-5180-18206d7d9931"] {
    display: none;
  }
}


/* --- Font smoothing global --- */
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -o-font-smoothing: antialiased;
}


/* --- Flickity : overrides globaux --- */
.flickity-viewport {
  width: 100%;
  overflow: visible !important;
}

.flickity-button {
  display: none;
}

*:focus {
  outline: none !important;
}

.flickity-viewport:focus,
.flickity-slider:focus,
.carousel-cell:focus {
  outline: none !important;
  box-shadow: none !important;
}

.flickity-viewport,
.carousel-cell {
  user-select: none;
  -webkit-user-drag: none;
}


/* ==========================================================================
   Utilitaires Webflow (héritage, focus, rich text, spacing, visibilité)
   ========================================================================== */

/* Hérite couleur, décoration, taille de police depuis le parent */
a,
.w-input,
.w-select,
.w-tab-link,
.w-nav-link,
.w-nav-brand,
.w-dropdown-btn,
.w-dropdown-toggle,
.w-slider-arrow-left,
.w-slider-arrow-right,
.w-dropdown-link {
  color: inherit;
  text-decoration: inherit;
  font-size: inherit;
}

/* Focus visible pour navigation clavier */
*[tabindex]:focus-visible,
input[type="file"]:focus-visible {
  outline: 0.125rem solid #4d65ff;
  outline-offset: 0.125rem;
}

/* Retire la marge du premier enfant d'un rich text */
.w-richtext > :not(div):first-child,
.w-richtext > div:first-child > :first-child {
  margin-top: 0 !important;
}

/* Retire la marge du dernier enfant d'un rich text */
.w-richtext > :last-child,
.w-richtext ol li:last-child,
.w-richtext ul li:last-child {
  margin-bottom: 0 !important;
}

/* Désactive complètement les interactions pointeur */
.pointer-events-off {
  pointer-events: none;
}

/* Réactive les interactions pointeur */
.pointer-events-on {
  pointer-events: auto;
}

/* Div carrée 1:1 */
.div-square::after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

/* Centrage horizontal des containers */
.container-medium,
.container-small,
.container-large {
  margin-right: auto !important;
  margin-left: auto !important;
}

/* Troncature après 3 lignes */
.text-style-3lines {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* Troncature après 2 lignes */
.text-style-2lines {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Flex inline */
.display-inlineflex {
  display: inline-flex;
}

/* Cache un élément */
.hide {
  display: none !important;
}

/* Retire le chevron par défaut du <select> Webflow */
select {
  -webkit-appearance: none;
}

@media screen and (max-width: 991px) {
  .hide,
  .hide-tablet {
    display: none !important;
  }
}

@media screen and (max-width: 767px) {
  .hide-mobile-landscape {
    display: none !important;
  }
}

@media screen and (max-width: 479px) {
  .hide-mobile {
    display: none !important;
  }
}

/* --- Reset spacing individuel --- */
.margin-0        { margin:  0rem !important; }
.padding-0       { padding: 0rem !important; }
.spacing-clean   { padding: 0rem !important; margin: 0rem !important; }

.margin-top      { margin-right: 0rem !important; margin-bottom: 0rem !important; margin-left: 0rem !important; }
.padding-top     { padding-right: 0rem !important; padding-bottom: 0rem !important; padding-left: 0rem !important; }

.margin-right    { margin-top: 0rem !important; margin-bottom: 0rem !important; margin-left: 0rem !important; }
.padding-right   { padding-top: 0rem !important; padding-bottom: 0rem !important; padding-left: 0rem !important; }

.margin-bottom   { margin-top: 0rem !important; margin-right: 0rem !important; margin-left: 0rem !important; }
.padding-bottom  { padding-top: 0rem !important; padding-right: 0rem !important; padding-left: 0rem !important; }

.margin-left     { margin-top: 0rem !important; margin-right: 0rem !important; margin-bottom: 0rem !important; }
.padding-left    { padding-top: 0rem !important; padding-right: 0rem !important; padding-bottom: 0rem !important; }

.margin-horizontal  { margin-top: 0rem !important; margin-bottom: 0rem !important; }
.padding-horizontal { padding-top: 0rem !important; padding-bottom: 0rem !important; }

.margin-vertical    { margin-right: 0rem !important; margin-left: 0rem !important; }
.padding-vertical   { padding-right: 0rem !important; padding-left: 0rem !important; }

/* Troncature avec ellipsis à 100% de largeur */
.truncate-width {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Masque la scrollbar native */
.no-scrollbar {
  -ms-overflow-style: none;
  overflow: -moz-scrollbars-none;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}


/* --- Swiper : slide active --- */
.swiper-slide.is-active .slider-main_image {
  transform: translate(-15%);
}


/* ==========================================================================
   Color schemes (variables CSS pour thèmes 1 à 10)
   ========================================================================== */

.color-scheme-1 {
  /* Toutes les sections pointent vers Color Scheme 1 par défaut */
}

.color-scheme-2 {
  --color-scheme-1--text:       var(--color-scheme-2--text);
  --color-scheme-1--background: var(--color-scheme-2--background);
  --color-scheme-1--foreground: var(--color-scheme-2--foreground);
  --color-scheme-1--border:     var(--color-scheme-2--border);
  --color-scheme-1--accent:     var(--color-scheme-2--accent);
}

.color-scheme-3 {
  --color-scheme-1--text:       var(--color-scheme-3--text);
  --color-scheme-1--background: var(--color-scheme-3--background);
  --color-scheme-1--foreground: var(--color-scheme-3--foreground);
  --color-scheme-1--border:     var(--color-scheme-3--border);
  --color-scheme-1--accent:     var(--color-scheme-3--accent);
}

.color-scheme-4 {
  --color-scheme-1--text:       var(--color-scheme-4--text);
  --color-scheme-1--background: var(--color-scheme-4--background);
  --color-scheme-1--foreground: var(--color-scheme-4--foreground);
  --color-scheme-1--border:     var(--color-scheme-4--border);
  --color-scheme-1--accent:     var(--color-scheme-4--accent);
}

.color-scheme-5 {
  --color-scheme-1--text:       var(--color-scheme-5--text);
  --color-scheme-1--background: var(--color-scheme-5--background);
  --color-scheme-1--foreground: var(--color-scheme-5--foreground);
  --color-scheme-1--border:     var(--color-scheme-5--border);
  --color-scheme-1--accent:     var(--color-scheme-5--accent);
}

.color-scheme-6 {
  --color-scheme-1--text:       var(--color-scheme-6--text);
  --color-scheme-1--background: var(--color-scheme-6--background);
  --color-scheme-1--foreground: var(--color-scheme-6--foreground);
  --color-scheme-1--border:     var(--color-scheme-6--border);
  --color-scheme-1--accent:     var(--color-scheme-6--accent);
}

.color-scheme-7 {
  --color-scheme-1--text:       var(--color-scheme-7--text);
  --color-scheme-1--background: var(--color-scheme-7--background);
  --color-scheme-1--foreground: var(--color-scheme-7--foreground);
  --color-scheme-1--border:     var(--color-scheme-7--border);
  --color-scheme-1--accent:     var(--color-scheme-7--accent);
}

.color-scheme-8 {
  --color-scheme-1--text:       var(--color-scheme-8--text);
  --color-scheme-1--background: var(--color-scheme-8--background);
  --color-scheme-1--foreground: var(--color-scheme-8--foreground);
  --color-scheme-1--border:     var(--color-scheme-8--border);
  --color-scheme-1--accent:     var(--color-scheme-8--accent);
}

.color-scheme-9 {
  --color-scheme-1--text:       var(--color-scheme-9--text);
  --color-scheme-1--background: var(--color-scheme-9--background);
  --color-scheme-1--foreground: var(--color-scheme-9--foreground);
  --color-scheme-1--border:     var(--color-scheme-9--border);
  --color-scheme-1--accent:     var(--color-scheme-9--accent);
}

.color-scheme-10 {
  --color-scheme-1--text:       var(--color-scheme-10--text);
  --color-scheme-1--background: var(--color-scheme-10--background);
  --color-scheme-1--foreground: var(--color-scheme-10--foreground);
  --color-scheme-1--border:     var(--color-scheme-10--border);
  --color-scheme-1--accent:     var(--color-scheme-10--accent);
}

/* Slider dots : hérite de la couleur du thème */
.w-slider-dot {
  background-color: var(--color-scheme-1--text);
  opacity: 0.20;
}

.w-slider-dot.w-active {
  background-color: var(--color-scheme-1--text);
  opacity: 1;
}

.w-slider-nav-invert .w-slider-dot {
  background-color: var(--color-scheme-1--text) !important;
  opacity: 0.20 !important;
}

.w-slider-nav-invert .w-slider-dot.w-active {
  background-color: var(--color-scheme-1--text) !important;
  opacity: 1 !important;
}


/* ==========================================================================
   Marquee horizontal (bandeau défilant infini)
   ========================================================================== */

.track-horizontal {
  position: absolute;
  white-space: nowrap;
  will-change: transform;
  animation: marquee-horizontal 160s linear infinite;
}

@keyframes marquee-horizontal {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}


/* --- GSAP : masque les éléments avant animation --- */
[data-gsap] {
  visibility: hidden;
}


/* --- Footer : fond noir + texte blanc sur toutes les pages --- */
.background-wooden {
  background-image: none;
  background-color: #000;
  --color--text: #fff;
  color: #fff;
}

.background-wooden a,
.background-wooden .footer15_link,
.background-wooden .footer15_legal-link,
.background-wooden .footer15_credit-text {
  color: #fff;
}

/* --- Wordmark VINO'S MAKEUP dans le footer --- */
.footer-brand-text {
  color: #fff;
  font-family: Bradford, "Times New Roman", serif;
  font-weight: 500;
  font-size: clamp(3rem, 12vw, 12rem);
  line-height: 1;
  letter-spacing: -0.02em;
  text-align: center;
  padding: 2rem 1rem;
  white-space: nowrap;
}