/* CSS spécifique page index */

/* Menu */
@media (min-width: 1200px) {
  a[id^="mmLink-"] {
    padding-bottom: unset !important;
  }

  div#jpresta_hook_displayJPrestaTopCenter {
    width: 100%;
  }

  .jprestamenu .mmLink:not(:last-child)::before {
    border-right: unset !important;
  }

  #mmLink-1::after, #mmLink-2::after, #mmLink-3::after, #mmLink-6::after, #mmLink-7::after, #mmLink-8::after, #mmLink-10::after, #mmLink-12::after, #mmLink-13::after, #mmLink-14::after, #mmLink-15::after,#mmLink-16::after {
    content: unset;
  }
  

  div#header_top {
    position: absolute;
    width: 100%;
    background-color: unset;
  }

  .navbar,
  .jprestamenu {
    background-color: unset !important;
    color: white !important;
  }

  .jprestamenu .mmLink {
    color: white !important;
  }

  .fa-magnifying-glass::before,
  .fa-search::before {
    color: white;
  }

  /* État ouvert : input déroulé vers la gauche, bouton inchangé */
  .search_widget.is-open .input-group .form-control {
    color: white !important;
  }

  .search_widget.is-open .input-group .form-control::placeholder {
    color: white !important;
  }

  .search_widget.is-open .search-close {
    color: white;
  }

  /* État par défaut : sur la vidéo = header transparent, texte blanc */
  #header_top {
    transition: background-color 0.25s ease, color 0.25s ease;
  }

  .search_widget svg path,
  .jpresta_shoppingcartsignin_wrapper svg path {
    stroke: white!important;
  }

  #header_top .jprestamenu .mmLink:hover {
    text-decoration: underline;
    text-decoration-color: rgb(196, 112, 86)!important;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

  /* ===== ÉTAT APRÈS LA VIDÉO : header solide ===== */
  #header_top.header-solid {
    background: #fff;
    color: #000;
    box-shadow: 0px 3px 5px -3px rgba(0, 0, 0, 0.4);

  }

  #header_top.header-solid .search_widget svg path,
  #header_top.header-solid .jpresta_shoppingcartsignin_wrapper svg path {
    stroke: black!important;
  }

  #header_top.header-solid .search_widget.is-open svg path,
  #header_top.header-solid .search_widget:hover svg path
   {
    stroke: white!important;
  }

  /* Effet de "surlignage noir" au hover sur les liens parents */
  #header_top.header-solid .jprestamenu .mmLink {
    position: relative;
  }
  #header_top.header-solid .jprestamenu .mmLink:hover {
    text-decoration: underline;
    text-decoration-color: rgb(196, 112, 86)!important;
    text-decoration-thickness: 2px; /* épaisseur de la ligne */
    text-underline-offset: 4px;
  }

  #header_top.header-solid .navbar,
  #header_top.header-solid .jprestamenu {
    background-color: unset !important;
    color: black !important;
  }

  #header_top.header-solid .jprestamenu .mmLink {
    color: black !important;
  }

  /* État ouvert : input déroulé vers la gauche, bouton inchangé */
  #header_top.header-solid .search_widget.is-open .input-group .form-control {
    color: black !important;
  }

  #header_top.header-solid .fa-magnifying-glass::before,
  #header_top.header-solid .fa-search::before {
    color: black;
  }

  #header_top.header-solid .search_widget.is-open .fa-magnifying-glass::before,
  #header_top.header-solid .search_widget.is-open .fa-search::before {
    color: white;
  }

  /* État ouvert : input déroulé vers la gauche, bouton inchangé */
  #header_top.header-solid .search_widget.is-open .input-group .form-control {
    color: black !important;
  }

  #header_top.header-solid
    .search_widget.is-open
    .input-group
    .form-control::placeholder {
    color: black !important;
  }

  #header_top.header-solid .search_widget.is-open .search-close {
    color: black;
  }
}

/* video */

.video-container{
  position: relative;
  width: 100%;
  height: calc(100vh - var(--header-h));   /* ou 100dvh pour mobile */
  /* margin-top: var(--header-h); évite que le header couvre la vidéo */
}
.video-container::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	/* background: radial-gradient( circle at 50% 50%, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.38) 20%, rgba(0, 0, 0, 0.22) 30%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.05) 50%, rgba(0, 0, 0, 0) 60% ); */
	background-image: linear-gradient( to top, transparent, transparent 94%, rgba(0, 0, 0, 0.6) 100% );
}

.video-fullscreen-wrapper {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
}

.video-container {
  position: relative;
  width: 100%;
  height: auto;
  max-width: 100%;
  display: flex;
   justify-content: center;
}

.video-container video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0; /* suppression des coins arrondis */
  object-fit: cover;
}

/* TEXTE PAR-DESSUS LA VIDÉO */
.lexus-hero-overlay {
  position: absolute;

  z-index: 1;
  color: white;
  font-family: 'Nobel', sans-serif;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
  max-width: 600px;
}

.lexus-hero-title {
  font-size: 2rem!important;
  margin-bottom: 0.5rem;
}

.lexus-hero-subtitle {
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 1rem;
}

.lexus-hero-description {
  font-size: 1.2rem;
  margin-bottom: 0.75rem;
  line-height: 1.2;
}

.lexus-hero-footnote {
  font-size: 0.8rem;
  color: #cccccc;
  margin-bottom: 1.5rem;
  font-style: italic;
  line-height: 1;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

.lexus-hero-button {
position: relative;
  display: inline-block;
  background-color: #ffffffb6;
  color: #1c1c1c;
  padding: 0.75rem 2.5rem;            /* pas d’espace au repos */
  text-decoration: none!important;
  border-radius: 50px;
  transition: background-color 0.25s ease;
  white-space: nowrap;
  overflow: hidden;
}

.lexus-hero-button:hover {
  background-color: #fff !important;
  color: #1c1c1C !important;
  /* épaisseur de bordure = valeur du border (ici 2px) */
  border: 3px solid transparent !important;
  border-radius: 50px;

  /* 2 backgrounds : 1 pour le fond, 1 pour la bordure */
  background:
    /* fond intérieur (remplace #fff par ton fond) */ linear-gradient(
        #fff,
        #fff
      )
      padding-box,
    /* dégradé de bordure top→bottom */
      conic-gradient(
      from 8deg,
      #90603a 0deg,
      #b97a53 12deg,
      #d69b78 24deg,
      #e9b996 36deg,
      #ffd9bd 46deg,   /* bande de lumière */
      #dfa786 58deg,
      #b87450 90deg,
      #9a603f 120deg,
      #d49a78 156deg,
      #f1c8a9 170deg,  /* 2e highlight */
      #b77551 200deg,
      #955e3c 232deg,
      #c68866 266deg,
      #f0c6a6 286deg,  /* micro éclat */
      #a36844 316deg,
      #90603a 360deg
    ) border-box;/* dégradé de bordure */
}

/* === Lexus hero button : anim identique aux tiles === */
.jpresta_jprestacontentanywhere1_displayhometop .content .lexus-hero-button {
  position: relative;
  overflow: hidden;     /* cache la flèche pendant l’étirement */
  white-space: nowrap;
  animation: none;
  /* on ne touche pas aux couleurs/border/shape existants */
}



/* Neutralise un éventuel <span class="arrow"> ajouté avant */
.jpresta_jprestacontentanywhere1_displayhometop .content .lexus-hero-button .arrow {
  display: none !important;
}

/* Flèche injectée : aucune place au repos (absolute) */
.jpresta_jprestacontentanywhere1_displayhometop .content .lexus-hero-button::after {
  content: "→";
  position: absolute;
  top: 50%;
  right: 0.9rem;                         /* position finale visuelle */
  transform: translateY(-50%) scaleX(0); /* compressée = invisible */
  transform-origin: left center;
  opacity: 0;
  pointer-events: none;
    right: 2rem; /* au lieu de 0.9rem */

}

/* Hover : le bouton s’élargit + la flèche s’étire (sans bounce) */
.jpresta_jprestacontentanywhere1_displayhometop .content .lexus-hero-button:hover {
  animation: hero-btn-grow 240ms ease forwards;
}
.jpresta_jprestacontentanywhere1_displayhometop .content .lexus-hero-button:hover::after {
  animation: hero-arrow-stretch 300ms ease forwards;
}

/* Keyframes : bouton (création d’espace à droite) */
@keyframes hero-btn-grow {
  to { padding-right: 4rem; } /* ajuste si besoin */
}

/* Keyframes : flèche (apparition + étirement) */
@keyframes hero-arrow-stretch {
  0%   { opacity: 0; transform: translateY(-50%) scaleX(0); }
  20%  { opacity: 1; transform: translateY(-50%) scaleX(0.4); }
  100% { opacity: 1; transform: translateY(-50%) scaleX(1.4); }
}

/* Accessibilité : moins de mouvement si demandé */
@media (prefers-reduced-motion: reduce) {
  .jpresta_jprestacontanywhere1_displayhometop .content .lexus-hero-button,
  .jpresta_jprestacontentanywhere1_displayhometop .content .lexus-hero-button::after {
    animation: none !important;
    transition: none !important;
  }
  .jpresta_jprestacontentanywhere1_displayhometop .content .lexus-hero-button:hover { padding-right: 4rem; }
  .jpresta_jprestacontentanywhere1_displayhometop .content .lexus-hero-button::after { opacity: 1; transform: translateY(-50%); }
}


/* .lexus-hero-button:hover {
  background-color: #b4a269;
  color: white;
} */

@media (max-width: 767px) {
  .video-container {
    height: 100vh; /* pleine hauteur même sur mobile */
    width: 100vw;
    overflow: hidden;
    position: relative;
  }

  .video-container video {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  /* .lexus-hero-overlay {
    top: 4%; 
    left: 5%;
    right: 5%;
    max-width: none;
  } */
}



/* sign in & cart */

@media (min-width: 1200px) {
  .dropdown-toggle::after,
  .jpresta-icons-user:before,
  .jpresta_jprestashoppingcartsignin_displaytop
    .content
    .jpresta_shoppingcart
    span,
  .jpresta-icons-cart:before {
    color: white;
  }

  .jpresta_jprestashoppingcartsignin_displaytop .content i.jpresta-icons-cart,
  .jpresta_jprestashoppingcartsignin_displaytop .content i.jpresta-icons-user {
    background-color: unset;
  }
}

#header_top.header-solid .dropdown-toggle::after,
#header_top.header-solid .jpresta-icons-user:before,
#header_top.header-solid
  .jpresta_jprestashoppingcartsignin_displaytop
  .content
  .jpresta_shoppingcart
  span,
#header_top.header-solid .jpresta-icons-cart:before {
  color: black;
}

.swiper-pagination {
  position: relative;
}

/* text overlay vidéo */

.lexus-hero-overlay {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  justify-content: space-around;
  text-align: center;
  width: 100%;
}

/* tiles */


.jpresta-tileanywhere .tile-text .tile-btn {
  margin-top: auto !important;
}

.jpresta-tileanywhere .tile-text {
  justify-content: unset !important;
}

.video-container p.uppercase {
  margin-bottom: 0.5rem;
}

a.lexus-hero-button {
  margin-top: auto;
  margin-bottom: 20%;
}

.lexus-greeting {
  top: 10%;
  position: absolute;
}


/* tiles */

.su-tiles-wrapper {
  width: 100%;
  display: flex;
}

.tile-beforetitle {
  margin-top: unset !important;
}

.tile-title {
  margin-top: 0.5rem !important;
}

#jprestatileanywhere9::before {
  background: 75% / cover no-repeat
    url("https://www.lexusboutique-store.eu/img/cms/MainPage%20-%20Why.webp") !important;
}

div#jprestatileanywhere9:hover,  div#jprestatileanywhere10:hover, div#jprestatileanywhere11:hover{
    background: linear-gradient(#0b0b0b, #0b0b0b) padding-box,             /* fond du bloc */
   conic-gradient(
      from 8deg,
      #90603a 0deg,
      #b97a53 12deg,
      #d69b78 24deg,
      #e9b996 36deg,
      #ffd9bd 46deg,   /* bande de lumière */
      #dfa786 58deg,
      #b87450 90deg,
      #9a603f 120deg,
      #d49a78 156deg,
      #f1c8a9 170deg,  /* 2e highlight */
      #b77551 200deg,
      #955e3c 232deg,
      #c68866 266deg,
      #f0c6a6 286deg,  /* micro éclat */
      #a36844 316deg,
      #90603a 360deg
    ) border-box;
    border: 3px solid transparent;
}
/* Cible uniquement la .row qui contient ces tuiles */
.row:has(
    > .jpresta_module.jprestatileanywhere12,
    > .jpresta_module.jprestatileanywhere14,
    > .jpresta_module.jprestatileanywhere8,
    > .jpresta_module.jprestatileanywhere5,
    > .jpresta_module.jprestatileanywhere15
  ) {
  display: flex; /* Bootstrap .row est déjà en flex, on confirme */
  flex-wrap: wrap;
  align-items: stretch;
  /* gap: 16px;  <-- active si tu veux de l’espace entre cartes */
}

/* --- FULL WIDTH à tous les breakpoints pour 5 et 15 --- */
.row:has(
    > .jpresta_module.jprestatileanywhere5,
    > .jpresta_module.jprestatileanywhere15
  )
  > .jpresta_module.jprestatileanywhere5,
.row:has(
    > .jpresta_module.jprestatileanywhere5,
    > .jpresta_module.jprestatileanywhere15
  )
  > .jpresta_module.jprestatileanywhere15 {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100%;
  min-width: 0;
}

#jprestatileanywhere12::before {
    border-radius: 15px;
}
#jprestatileanywhere12 {
    border-radius: 15px;
}
#jprestatileanywhere12 {
    aspect-ratio: 1200/675;
}

/* --- MOBILE: 8/12/14 en 100% --- */
@media (max-width: 767.98px) {
  .row:has(
      > .jpresta_module.jprestatileanywhere12,
      > .jpresta_module.jprestatileanywhere14,
      > .jpresta_module.jprestatileanywhere8
    )
    > .jpresta_module.jprestatileanywhere12,
  .row:has(
      > .jpresta_module.jprestatileanywhere12,
      > .jpresta_module.jprestatileanywhere14,
      > .jpresta_module.jprestatileanywhere8
    )
    > .jpresta_module.jprestatileanywhere14,
  .row:has(
      > .jpresta_module.jprestatileanywhere12,
      > .jpresta_module.jprestatileanywhere14,
      > .jpresta_module.jprestatileanywhere8
    )
    > .jpresta_module.jprestatileanywhere8 {
    flex: 0 0 100% !important; /* 100% */
    max-width: 100% !important;
    width: 100%;
    min-width: 0;
  }
}

/* Mobile: 100% pour 6,7,8,12,13,14 */
@media (max-width: 767.98px) {
  .jprestatileanywhere6,
  .jprestatileanywhere7,
  .jprestatileanywhere8,
  .jprestatileanywhere12,
  .jprestatileanywhere13,
  .jprestatileanywhere14 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100%;
    min-width: 0;
  }
}

/* Tablette/PC: 2 ou 3 colonnes auto (≈50% si 2, ≈33% si 3) */
@media (min-width: 768px) {
  .jprestatileanywhere6,
  .jprestatileanywhere7,
  .jprestatileanywhere8,
  .jprestatileanywhere12,
  .jprestatileanywhere13,
  .jprestatileanywhere14 {
    /* largeur mini d’une carte; ajuste 320px si besoin */
    max-width: 100%;
    min-width: 0;
  }
}

/* Forcer 5 et 15 à rester full width à tous les breakpoints */
.jprestatileanywhere5,
.jprestatileanywhere15 {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100%;
  min-width: 0;
}




.jprestatileanywhere5 .tile-title,
.jprestatileanywhere15 .tile-title{
  font-size: 1.9rem!important;
}

.jprestatileanywhere5 .tile-aftertitle,
.jprestatileanywhere15 .tile-aftertitle{
  font-size:1.2rem;
}

.jpresta_jprestatileanywhere5_displayhome .content, .jpresta_jprestatileanywhere15_displayhome .content {
    margin: 0px 0px 25px 0px;
border: 2px solid transparent !important;
	background: linear-gradient(#f8f9fa, #f8f9fa) padding-box, conic-gradient( from 8deg, #90603a 0deg, #b97a53 12deg, #d69b78 24deg, #e9b996 36deg, #ffd9bd 46deg, #dfa786 58deg, #b87450 90deg, #9a603f 120deg, #d49a78 156deg, #f1c8a9 170deg, #b77551 200deg, #955e3c 232deg, #c68866 266deg, #f0c6a6 286deg, #a36844 316deg, #90603a 360deg ) border-box;
    border-radius: 15px 15px 15px 15px;
}



/* Neutraliser les classes Bootstrap de colonne sur ces tuiles (ex: col-lg-4) */
.jpresta_module.jprestatileanywhere6,
.jpresta_module.jprestatileanywhere7,
.jpresta_module.jprestatileanywhere8,
.jpresta_module.jprestatileanywhere12,
.jpresta_module.jprestatileanywhere13,
.jpresta_module.jprestatileanywhere14,
.jpresta_module.jprestatileanywhere5,
.jpresta_module.jprestatileanywhere15 {
  width: auto; /* laisse flex gérer */
  margin: 0; /* utile si tu utilises gap sur le parent */
}

/* === Anim bouton + flèche pour les .btn.btn-light dans .tile-btn === */
.tile-btn .btn.btn-light {
  position: relative;
  overflow: hidden; /* cache la flèche pendant l’étirement */
  white-space: nowrap; /* évite les retours à la ligne */
  animation: none;
  transition: background-color 0.25s ease; /* ne change pas le style visuel existant */
}

/* Flèche injectée : ne prend AUCUNE place (absolute), étirée au hover */
.tile-btn .btn.btn-light::after {
  content: "→";
  position: absolute;
  top: 50%;
  right: 0.9rem; /* position finale visuelle */
  transform: translateY(-50%) scaleX(0); /* compressée au repos => invisible */
  transform-origin: left center;
  opacity: 0;
  pointer-events: none;
}

/* Hover : bouton s’élargit (place pour la flèche) + flèche s’étire (sans bounce) */
.tile-btn .btn.btn-light:hover {
  animation: btn-grow-light 240ms ease forwards;
}
.tile-btn .btn.btn-light:hover::after {
  animation: arrow-stretch-light 300ms ease forwards;
}

/* Bouton dans .tile-btn avec bordure cuivre fondue */
.tile-btn .btn.btn-light{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .6rem;

  border: 2px solid transparent!important;
  border-radius: 999px; /* ajuste si besoin */
  color: #212529;

  

  transition: background .25s ease, transform .18s ease, box-shadow .18s ease;
}



/* Hover : micro-rotation du reflet + légère élévation */
.tile-btn .btn.btn-light:hover{
  border: 2px solid transparent!important;
  background:
    linear-gradient(#f8f9fa, #f8f9fa) padding-box,
    conic-gradient(
      from 8deg,
      #90603a 0deg,
      #b97a53 12deg,
      #d69b78 24deg,
      #e9b996 36deg,
      #ffd9bd 46deg,   /* bande de lumière */
      #dfa786 58deg,
      #b87450 90deg,
      #9a603f 120deg,
      #d49a78 156deg,
      #f1c8a9 170deg,  /* 2e highlight */
      #b77551 200deg,
      #955e3c 232deg,
      #c68866 266deg,
      #f0c6a6 286deg,  /* micro éclat */
      #a36844 316deg,
      #90603a 360deg
    ) border-box;
  transform: translateY(-1px);
  box-shadow:unset!important;
}

/* (facultatif) états active/focus */
.tile-btn .btn.btn-light:active{
  transform: translateY(0);
  box-shadow: 0 .05rem .25rem rgba(0,0,0,.18);
}
.tile-btn .btn.btn-light:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(223,167,134,.35);
}


/* Keyframes : bouton (juste padding-right) */
@keyframes btn-grow-light {
  /* part de la valeur courante de padding-right */
  to {
    padding-right: 2.6rem;
  } /* ajuste si tu veux plus/moins d’espace */
}

/* Keyframes : flèche (apparition + étirement) */
@keyframes arrow-stretch-light {
  0% {
    opacity: 0;
    transform: translateY(-50%) scaleX(0);
  }
  20% {
    opacity: 1;
    transform: translateY(-50%) scaleX(0.4);
  }
  100% {
    opacity: 1;
    transform: translateY(-50%) scaleX(1.15);
  } /* étirement sans rebond */
}

/* (Optionnel) Anim sortie douce au mouseout
   – à activer si tu veux un retour progressif :
.tile-btn .btn.btn-light {
  --_anim-out: btn-shrink-light 220ms ease forwards;
}
.tile-btn .btn.btn-light:not(:hover) { animation: var(--_anim-out); }
@keyframes btn-shrink-light { to { padding-right: initial; } }
*/

/* Accessibilité : réduit les mouvements si l’utilisateur l’a demandé */
@media (prefers-reduced-motion: reduce) {
  .tile-btn .btn.btn-light,
  .tile-btn .btn.btn-light::after {
    animation: none !important;
    transition: none !important;
  }
  .tile-btn .btn.btn-light:hover {
    padding-right: 2.6rem;
  } /* état final sans anim */
  .tile-btn .btn.btn-light::after {
    opacity: 1;
    transform: translateY(-50%);
  }
}

/*products*/

li.pm-flag.out_of_stock {
  top: 235px !important;
}

/* how what who */

.copper-border-clip {
  position: relative;
  border-radius: 16px;
  padding: 1rem;                              /* espace intérieur */
  background:
    linear-gradient(#0b0b0b, #0b0b0b) padding-box,             /* fond du bloc */
    linear-gradient(180deg, #DFA786, #90603A) border-box;      /* bordure */
  border: 2px solid transparent;              /* nécessaire au clip */
}


/* carousel products */

.product-miniature .pm-flag.out_of_stock{
  display: none;
}

h1.title-index {
    visibility: hidden;
}