/* ==========================================================
   QFEF PREMIUM GLOBAL V1
   Bannières / affiliation / hébergement
   ========================================================== */


/* ----------------------------------------------------------
   BANNIERE CONVERSION
   ---------------------------------------------------------- */

.qf-conversion-inner{
  position:relative !important;
  isolation:isolate !important;
  overflow:hidden !important;

  display:grid !important;
  grid-template-columns:minmax(280px,.9fr) minmax(420px,1.35fr) !important;
  align-items:center !important;
  gap:clamp(24px,4vw,54px) !important;

  margin:32px 0 !important;
  padding:clamp(26px,4vw,48px) !important;

  border-radius:30px !important;
  border:1px solid rgba(255,255,255,.14) !important;

  background:
    radial-gradient(circle at 8% 0%,
      rgba(255,255,255,.16) 0,
      rgba(255,255,255,0) 30%),
    radial-gradient(circle at 100% 100%,
      rgba(60,130,246,.20) 0,
      rgba(60,130,246,0) 38%),
    linear-gradient(135deg,
      #0b1425 0%,
      #142642 52%,
      #183b67 100%) !important;

  box-shadow:
    0 28px 70px rgba(15,23,42,.22),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
}

.qf-conversion-inner::before{
  content:"";
  position:absolute;
  z-index:-1;
  width:330px;
  height:330px;
  right:-140px;
  top:-180px;
  border-radius:50%;
  border:70px solid rgba(255,255,255,.035);
  pointer-events:none;
}

.qf-conversion-inner::after{
  content:"";
  position:absolute;
  z-index:-1;
  left:0;
  right:0;
  bottom:0;
  height:3px;
  background:linear-gradient(
    90deg,
    #f59e0b,
    #fbbf24 35%,
    #60a5fa 70%,
    transparent
  );
}

.qf-conversion-copy{
  position:relative !important;
  z-index:2 !important;
}

.qf-conversion-kicker{
  display:inline-flex !important;
  align-items:center !important;

  margin:0 0 14px !important;
  padding:8px 13px !important;

  border-radius:999px !important;
  border:1px solid rgba(255,255,255,.15) !important;

  background:rgba(255,255,255,.08) !important;
  color:#fbbf24 !important;

  font-size:.78rem !important;
  font-weight:850 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
}

.qf-conversion-copy > strong{
  display:block !important;
  margin:0 0 14px !important;
  max-width:650px !important;

  color:#fff !important;
  font-size:clamp(1.65rem,3vw,2.8rem) !important;
  line-height:1.08 !important;
  letter-spacing:-.035em !important;
}

.qf-conversion-copy > small{
  display:block !important;
  max-width:620px !important;

  color:rgba(255,255,255,.70) !important;
  font-size:.95rem !important;
  line-height:1.6 !important;
}


/* ----------------------------------------------------------
   ACTIONS CONVERSION
   ---------------------------------------------------------- */

.qf-conversion-actions{
  position:relative !important;
  z-index:2 !important;

  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:12px !important;
}

.qf-conversion-actions .qf-conv-btn,
.qf-conversion-actions .qf-v36-choice{
  position:relative !important;

  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:12px !important;

  min-width:0 !important;
  min-height:68px !important;
  box-sizing:border-box !important;

  padding:14px 16px !important;

  border-radius:17px !important;
  border:1px solid rgba(255,255,255,.14) !important;

  background:rgba(255,255,255,.085) !important;
  color:#fff !important;

  text-decoration:none !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 10px 26px rgba(0,0,0,.10) !important;

  transition:
    transform .18s ease,
    background .18s ease,
    border-color .18s ease,
    box-shadow .18s ease !important;
}

.qf-conversion-actions .qf-conv-btn:hover,
.qf-conversion-actions .qf-v36-choice:hover{
  transform:translateY(-3px) !important;
  background:rgba(255,255,255,.14) !important;
  border-color:rgba(255,255,255,.28) !important;
}

.qf-conversion-actions .qf-conv-primary{
  grid-column:1 / -1 !important;

  background:linear-gradient(
    135deg,
    #ffffff 0%,
    #f7f9fc 100%
  ) !important;

  color:#111827 !important;
  border-color:rgba(255,255,255,.75) !important;

  box-shadow:0 14px 34px rgba(0,0,0,.16) !important;
}

.qf-conversion-actions .qf-conv-primary span{
  color:#111827 !important;
}

.qf-conversion-actions .qf-home-booking{
  border-color:rgba(96,165,250,.38) !important;
}

.qf-home-action-icon{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  width:40px !important;
  height:40px !important;
  flex:0 0 40px !important;

  border-radius:12px !important;
  background:rgba(255,255,255,.10) !important;

  font-size:1.15rem !important;
}

.qf-home-action-content strong{
  display:block !important;
  margin:0 0 3px !important;

  color:#fff !important;
  font-size:.98rem !important;
}

.qf-home-action-content small{
  display:block !important;

  color:rgba(255,255,255,.62) !important;
  font-size:.78rem !important;
}


/* mobilité */

.qf-v36-mobility-choices{
  grid-column:1 / -1 !important;

  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:12px !important;

  margin:0 !important;
  padding:0 !important;
}

.qf-v36-mobility-choices strong{
  display:block !important;
  color:#fff !important;
  font-size:.94rem !important;
}

.qf-v36-mobility-choices small{
  display:block !important;
  color:rgba(255,255,255,.60) !important;
  font-size:.77rem !important;
}

.qf-v36-hide-old-car{
  display:none !important;
}


/* ----------------------------------------------------------
   BANDE DE REASSURANCE
   ---------------------------------------------------------- */

.qf-v3-trust{
  position:relative !important;
  overflow:hidden !important;

  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:0 !important;

  margin:28px 0 !important;
  padding:0 !important;

  border-radius:24px !important;
  border:1px solid #e5eaf1 !important;

  background:
    linear-gradient(
      135deg,
      #ffffff 0%,
      #f7f9fc 55%,
      #f3f7fb 100%
    ) !important;

  box-shadow:0 18px 45px rgba(15,23,42,.075) !important;
}

.qf-v3-trust::before{
  content:"";
  position:absolute;

  left:0;
  top:0;
  bottom:0;
  width:5px;

  background:linear-gradient(
    180deg,
    #f59e0b,
    #2563eb
  );
}

.qf-v3-trust > div{
  position:relative !important;

  padding:24px 24px 24px 28px !important;

  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}

.qf-v3-trust > div:not(:last-child)::after{
  content:"";

  position:absolute;
  right:0;
  top:20%;

  width:1px;
  height:60%;

  background:#e3e8ef;
}

.qf-v3-trust strong{
  display:block !important;
  margin:0 0 7px !important;

  color:#111827 !important;
  font-size:.95rem !important;
}

.qf-v3-trust small{
  display:block !important;

  color:#667085 !important;
  font-size:.84rem !important;
  line-height:1.55 !important;
}


/* ----------------------------------------------------------
   ROAD TRIP / DISCOVER
   ---------------------------------------------------------- */

.discover.reveal,
.discover.reveal.visible{
  position:relative !important;
  isolation:isolate !important;
  overflow:hidden !important;

  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  align-items:center !important;
  gap:28px !important;

  margin:32px 0 !important;
  padding:clamp(25px,4vw,40px) !important;

  border-radius:26px !important;
  border:1px solid rgba(255,255,255,.10) !important;

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(245,158,11,.16),
      transparent 35%
    ),
    linear-gradient(
      135deg,
      #101827 0%,
      #172337 58%,
      #263851 100%
    ) !important;

  color:#fff !important;

  box-shadow:
    0 24px 60px rgba(15,23,42,.17),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
}

.discover.reveal .kicker{
  display:inline-flex !important;

  margin:0 0 11px !important;
  padding:7px 12px !important;

  border-radius:999px !important;
  border:1px solid rgba(245,158,11,.22) !important;

  background:rgba(245,158,11,.12) !important;
  color:#fbbf24 !important;

  font-size:.76rem !important;
  font-weight:850 !important;
}

.discover.reveal h3{
  margin:0 0 9px !important;

  color:#fff !important;
  font-size:clamp(1.45rem,2.4vw,2.2rem) !important;
}

.discover.reveal p{
  margin:0 !important;
  max-width:720px !important;

  color:rgba(255,255,255,.69) !important;
  line-height:1.65 !important;
}

.discover.reveal .btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  min-height:56px !important;
  padding:14px 22px !important;

  border-radius:15px !important;
  border:1px solid rgba(255,255,255,.85) !important;

  background:#fff !important;
  color:#111827 !important;

  text-decoration:none !important;
  font-weight:850 !important;

  box-shadow:0 13px 30px rgba(0,0,0,.16) !important;

  transition:
    transform .18s ease,
    box-shadow .18s ease !important;
}

.discover.reveal .btn:hover{
  transform:translateY(-3px) !important;
  box-shadow:0 18px 35px rgba(0,0,0,.22) !important;
}


/* ----------------------------------------------------------
   CARTES AFFILIATION DES PAGES
   ---------------------------------------------------------- */

.qf-aff-card{
  position:relative !important;
  overflow:hidden !important;

  border-radius:18px !important;
  border:1px solid #e4e9f0 !important;

  background:
    linear-gradient(
      145deg,
      #ffffff 0%,
      #f8fafc 100%
    ) !important;

  box-shadow:0 12px 30px rgba(15,23,42,.07) !important;

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease !important;
}

.qf-aff-card:hover{
  transform:translateY(-3px) !important;

  border-color:#cbd5e1 !important;

  box-shadow:
    0 18px 38px rgba(15,23,42,.12) !important;
}


/* Booking */

.qf-aff-card[href*="kqzyfj.com/click-101860781-12677526"]{
  border-color:#bfdbfe !important;

  background:
    linear-gradient(
      145deg,
      #f7fbff 0%,
      #edf5ff 100%
    ) !important;
}

.qf-aff-card[href*="kqzyfj.com/click-101860781-12677526"]::before{
  content:"";

  position:absolute;
  top:0;
  left:0;
  right:0;

  height:4px;

  background:linear-gradient(
    90deg,
    #003b95,
    #2563eb
  );
}


/* Expedia */

.qf-aff-card[href*="expedia.com/affiliate"]{
  border-color:#dbeafe !important;
}

.qf-aff-card[href*="expedia.com/affiliate"]::before{
  content:"";

  position:absolute;
  top:0;
  left:0;
  right:0;

  height:4px;

  background:linear-gradient(
    90deg,
    #1668e3,
    #60a5fa
  );
}


/* ----------------------------------------------------------
   GRAND BLOC HEBERGEMENT
   ---------------------------------------------------------- */

.expedia-hotels > .section-content > div{
  position:relative !important;
  overflow:hidden !important;

  border-radius:28px !important;
  border:1px solid #e3e9f0 !important;

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(37,99,235,.08),
      transparent 36%
    ),
    linear-gradient(
      135deg,
      #f8fbff 0%,
      #ffffff 52%,
      #fffaf2 100%
    ) !important;

  box-shadow:
    0 22px 55px rgba(15,23,42,.10) !important;
}


/* boutons Booking/Expedia du grand bloc */

.expedia-hotels a[href*="kqzyfj.com/click-101860781-12677526"],
.expedia-hotels a[href*="expedia.com/affiliate"]{
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    filter .18s ease !important;
}

.expedia-hotels a[href*="kqzyfj.com/click-101860781-12677526"]:hover,
.expedia-hotels a[href*="expedia.com/affiliate"]:hover{
  transform:translateY(-2px) !important;
  filter:brightness(1.04) !important;
}

.expedia-hotels a[href*="kqzyfj.com/click-101860781-12677526"]{
  background:
    linear-gradient(
      135deg,
      #003b95,
      #0759c7
    ) !important;

  border-radius:14px !important;

  box-shadow:
    0 10px 24px rgba(0,59,149,.22) !important;
}

.expedia-hotels a[href*="expedia.com/affiliate"]{
  background:
    linear-gradient(
      135deg,
      #1668e3,
      #3b82f6
    ) !important;

  border-radius:14px !important;

  box-shadow:
    0 10px 24px rgba(22,104,227,.20) !important;
}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media(max-width:900px){

  .qf-conversion-inner{
    grid-template-columns:1fr !important;
    gap:24px !important;
    border-radius:24px !important;
  }

  .qf-conversion-actions{
    grid-template-columns:1fr !important;
  }

  .qf-conversion-actions .qf-conv-primary{
    grid-column:auto !important;
  }

  .qf-v36-mobility-choices{
    grid-column:auto !important;
    grid-template-columns:1fr !important;
  }

  .qf-v3-trust{
    grid-template-columns:1fr !important;
  }

  .qf-v3-trust > div:not(:last-child)::after{
    right:24px;
    left:28px;
    top:auto;
    bottom:0;

    width:auto;
    height:1px;
  }

  .discover.reveal,
  .discover.reveal.visible{
    grid-template-columns:1fr !important;
  }

  .discover.reveal .btn{
    width:100% !important;
    box-sizing:border-box !important;
  }

}