/* General */
:root {
  --kia-city-gray: #9da1a2;
  --title--1: clamp(2.8rem, 4vw, 4rem);
  --title--2: clamp(2.4rem, 3vw, 3rem);
  --title--3: clamp(2.2rem, 2.8vw, 2.8rem);
  --title--4: clamp(1.6rem, 2vw, 2rem);
}

body {
  line-height: normal;
}

:is(.title--2, .paragraphe--default, .slider button) {
  font-family: "kiam", sans-serif;
}

:is(.title--2, .title--4) {
  margin-bottom: clamp(1.2rem, 1.8vw, 1.8rem);
}

.title--1 {
  font-size: var(--title--1);
  font-family: "kiam", sans-serif;
}

.title--2 {
  font-size: var(--title--2);
}

.title--3 {
  font-size: var(--title--3);
}

.title--4 {
  font-size: var(--title--4);
  font-family: "kiam";
}

section.section_slider,
.section_contact {
  margin-bottom: clamp(3rem, 5vw, 5rem);
}

/* For model_item */
.model__showcase {
  background-color: #e1e2e6;
  position: relative;
  justify-content: space-between;
}

.wrapper-model__logos {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: space-between;
  /* align-items: center; */
  /* padding-inline: clamp(1.5rem, 2.5vw, 3rem) */
}

.wrapper-model__logos img:first-child {
  order: 2;
}

.model__logo {
  width: auto;
  max-width: 26vw;
  object-fit: contain;
  /* margin-inline: clamp(0rem, 3vw, 3rem); */
}

.logo--offer {
  height: clamp(4.25rem, 5vw, 5rem);
  left: 0;
}

.logo--brand {
  height: clamp(2.5rem, 3vw, 3rem);
  margin-left: auto;
}

.model__trim>button {
  display: block;
  margin-inline: auto;
  color: #9da1a2;
  font-size: 1.2rem;
}

.model__promo,
.model__condition {
  text-align: center;
  line-height: 1.4;
  padding: clamp(1.3rem, 1.4vw, 1.4rem) 0.8rem;
  border: 1px solid #707070;
  border-radius: 10px;
  font-size: clamp(1.2rem, 1.4vw, 1.4rem);
}

.model__details:has(+ .model__condition), .model__details:has(+ .model__promo) {
  margin-bottom: clamp(2.4rem, 3vw, 3rem);
}

.model__condition:has(+ .model__promo) {
  margin-bottom: 1rem;
}

.model__powertrain {
  list-style-type: none;
  display: flex;
  justify-content: center;
  align-items: center;
  text-wrap: balance;
  text-align: center;
  width: min(100%, 70ch);
}

.model__powertrain li {
  position: relative;
  padding-inline: 2rem;
  line-height: normal;
}

.model__powertrain li:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  display: block;
  border-right: 2px solid rgba(124, 127, 128, 0.25);
  height: 100%;
}

.model__details {
  margin-top: clamp(1.2rem, 2vw, 2rem);
}

.model__trim-title {
  padding-bottom: clamp(1.6rem, 4vw, 2.5rem);
}

/* Picture */
.model__showcase .model__showcase--img {
  width: 100%;
  max-width: 45rem;
}

@media (min-width: 40em) {
  .model__container.active {
    min-height: 0 !important;
  }

  .model__container.active>* {
    align-self: start;
  }

  .model__container.active .model__trim {
    position: relative;
    left: 0;
    top: 0;
    width: auto;
    grid-column: 1;
    grid-row: 1 / span 99;
    align-self: start;
  }

  .model__btn,
  .model__details,
  .model__price,
  .model__promo,
  .tabs__btns {
    grid-column: 2;
  }

  .model__price {
    grid-row: 1;
    align-self: start;
  }

  .model__details {
    align-self: start;
  }
}

.model__trim-title,
p.model__price {
  font-size: 2.4rem;
  font-family: "kiam", sans-serif;
}

.model__item {
  background-color: hsla(0, 0%, 94%, 0.5);
  border-radius: 1rem;
  /* padding: 1.6rem 1.6rem 1.6rem 2rem; */
  padding: 2.2rem;
  position: relative;
  display: flex;
  align-items: center;
  /* Alignement vertical du contenu */
  gap: 1.8rem;
  /* Espacement entre l'icône et le texte, si besoin */
  list-style: none;
  margin-bottom: 1.6rem;
}

.model__item::before {
  content: "";
  display: block;
  width: 1.7rem;
  height: 1.2rem;
  background-image: url(/content/dam/kwcms/kme/fr/fr/assets/offers/css/check.svg);
  background-size: cover;
  background-repeat: no-repeat;
  flex-shrink: 0;
  /* Ne pas rétrécir */
}

.model__item>div>*:not(:last-child) {
  margin-bottom: 0.5rem;
  /* Espacement entre l'icône et le texte */
}

.model__item h3 {
  line-height: 1.3;
  font-family: "kiam";
}

.model__item h3+span {
  font-family: "kial";
  font-size: 1.2rem;
}

.hidden {
  display: none;
}

/* For model_item */

/* SLIDER */

.section_slider * {
  text-wrap: balance;
  line-height: normal;
}

.section_slider {
  position: relative;
}

.bloc_slider--title {
  width: 100%;
  margin-inline: auto;
  text-align: left;
  margin: clamp(5rem, 7vw, 7rem) auto;
  width: min(100%, 85ch);
}

.bloc_slider--title>*:not(:last-child) {
  margin-bottom: 1.6rem;
}

.paragraphe--default,
.wrapper-links button span {
  font-size: clamp(1.2rem, 1.4vw, 1.4rem);
  font-weight: 400;
  line-height: 1.5;
}

#slider-avantage .wrapper-slider {
  background-image: url("/content/dam/kwcms/kme/fr/fr/assets/media/entreprises/page-produits/sliders/Img_kia-fiscalite_D_1024x700.webp");
  background-size: cover;
  background-position: center;
}

.wrapper-slider {
  margin-inline: auto;
  overflow: hidden;
  position: relative;
  display: flex;
}

.slider-track {
  display: flex;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  flex-grow: 1;
  width: 100%;
}

.slider {
  flex: 0 0 100%;
  height: 45rem;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: start;
}

.container>div {
  position: relative;
}

.container>div>section:not(:last-child) {
  margin-bottom: clamp(4rem, 5vw, 5rem);
}

/* Images et Picture */
.slider img,
.slider picture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  filter: brightness(0.95) contrast(1);
}

.slider .slider-default {
  color: #fff;
  text-align: left;
  align-self: end;
  padding: 2.5rem;
  position: relative;
  z-index: 1;
  width: min(100%, 60ch);
}


.overlay img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(5px);
  transform: scale(1.01);
  transition: filter 0.2s cubic-bezier(0.4,0,0.2,1);
  animation: blurFadeIn 0.2s cubic-bezier(0.4,0,0.2,1);
}

@keyframes blurFadeIn {
  from { filter: blur(3px); }
  to { filter: blur(6px); }
}

.overlay {
  position: relative;
  overflow: hidden;
}


.overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: hsla(0, 0%, 0%, 0.5);
  z-index: 0;
}

.slider:has(.slide-hidden)::after,
.slide-hidden {
  display: none;
}

.slider-hidden {
  color: #fff;
  z-index: 1;
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 2.5rem;
}

.wrapper-navigation {
  display: grid;
  grid-template-areas: "stack";
  margin-top: 0.75rem;
}

.wrapper-navigation>* {
  grid-area: stack;
}

.wrapper-direction {
  justify-self: end;
}

.wrapper-direction .arrow-btn:active {
  opacity: 1;
}

.wrapper-direction button img {
  height: 30px;
  aspect-ratio: 1 / 1;
  display: block;
}

.btn_slider {
  font-size: clamp(1.2rem, 1.5vw, 1.5rem);
  padding: 1rem 2.1em;
  margin-top: clamp(3rem, 4vw, 4rem);
  border-radius: 9999px;
  border: 1px solid #fff;
}

.wrapper-links {
  display: flex;
  justify-content: center;
  gap: 0.5rem;

  color: #7c7f80;
  text-align: center;
}

.wrapper-links button span {
  font-size: 1.2rem;
  font-family: "kial";
}

.wrapper-links button.active {
  position: relative;
  color: #ffff;
}

.wrapper-links button span,
.slider-hidden {
  display: none;
}

.wrapper-links button:after {
  content: "";
  height: 0.6rem;
  aspect-ratio: 1 / 1;
  background-color: hsla(205, 72%, 7%, 0.1);
  display: block;
  border-radius: 9999px;
}

.wrapper-links button.active:after {
  content: "";
  background-color: hsla(205, 72%, 7%, 0.5);
}

.wrapper-direction button:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

@media (min-width: 40rem) {
  .bloc_slider--title {
    text-align: center;
  }

  .wrapper-navigation {
    margin-top: 0;
  }

  .slider {
    justify-content: center;
    height: 70rem;
  }

  .slider-hidden {
    text-align: center;
    justify-content: center;
    width: min(100%, 70ch);
    margin-inline: auto;
  }

  .slider img {
    aspect-ratio: 6/4;
  }

  .slider .slider-default {
    text-align: center;
    align-self: center;
    padding: 0;
  }

  #slider-avantage .wrapper-links {
    /* min-width: 65%; */
  }

  .wrapper-links {
    position: absolute;
    bottom: 5rem;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    padding: 1.5rem 3.5rem;
    border-radius: 9999px;
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    color: hsla(0, 0%, 100%, 0.5);
    font-size: 1.4rem;

    min-height: 65px;
  }

  .wrapper-links button {
    /*  width: min(100%, 12ch); 
      flex: 1;*/
  }

  .wrapper-links button span {
    display: block;
    margin-inline: 1rem;
  }

  .wrapper-links button:after,
  .wrapper-links button.active:after {
    content: unset;
  }

  .wrapper-direction {
    display: none;
  }
}

/* BLOC CONTACT */
.section_contact {
  background-color: #fff;
  padding: 3rem;
  text-align: center;
  position: static;
  transition: position 0.3s;
}

.section_contact h2 {
  font-family: "kiab";
  margin-bottom: 1rem;
}

.btn {
  background-color: var(--kia-midnight-black);
  color: var(--kia-polar-white);
  border: 0.1rem solid var(--kia-midnight-black);
  font-size: 1.4rem;
  text-decoration: none;
  padding: 1.4rem;
  display: inline-block;
  text-align: center;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s,
    text-decoration 0.2s;
  margin-top: 1rem;
  width: min(100%, 400px);
}

/* Sticky uniquement en mobile (exemple max-width: 768px) */
@media (max-width: 768px) {
  .section_contact {
    transition: transform 0.3s ease, opacity 0.3s ease;
  }

  .section_contact.sticky--active {
    position: sticky;
    bottom: 0;
    z-index: 1000;
    padding: 0;
    background-color: transparent;
    animation: smoothSlideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }

  @keyframes smoothSlideUp {
    from {
      transform: translateY(100%);
      opacity: 0;
    }

    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  .section_contact.sticky--active> :is(h2, p) {
    display: none;
  }

  .section_contact.sticky--active>.btn {
    width: 100%;
    margin-top: 0;
  }
}