/*
 * Hero modèle 2 (Theme Builder › Hero › Modèle 2) — partial themes/builder/partials/heroes/hero-model-2.blade.php
 * Chargé uniquement quand ce modèle est actif. Toutes les règles sont préfixées .tlhr2 pour ne rien changer ailleurs.
 * Variables : --tlhr2-h (hauteur), --tlhr2-bg / --tlhr2-overlay / --tlhr2-text (couleurs du hero), --main-color.
 */
.tlhr2 {
  --tlhr2-accent: var(--main-color, #E16923);
  --tlhr2-accent-light: color-mix(in srgb, var(--tlhr2-accent) 70%, #fff);
  --tlhr2-search-overlap: 84px;
  position: relative;
  width: 100%;
  height: var(--tlhr2-h, 600px);
  min-height: 520px;
  overflow: hidden;
  background: var(--tlhr2-bg);
  color: var(--tlhr2-text);
}
.tlhr2 *, .tlhr2 *::before, .tlhr2 *::after { box-sizing: border-box; }
.tlhr2 svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tlhr2 :focus-visible { outline: 3px solid #fff; outline-offset: 3px; border-radius: 8px; }
.tlhr2-slider { position: absolute; inset: 0; }

/* ── Diapositives : fondu + léger zoom ── */
.tlhr2-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 1s ease, visibility 1s; }
.tlhr2-slide.is-on { opacity: 1; visibility: visible; z-index: 1; }
.tlhr2-slide img, .tlhr2-slide-fill {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; display: block;
  transform: scale(1.1); transition: transform 7s ease-out;
}
.tlhr2-slide.is-on img, .tlhr2-slide.is-on .tlhr2-slide-fill { transform: scale(1); }
/* Voile : couleur du voile du Theme Builder, plus dense à gauche (texte) et en bas (moteur) */
.tlhr2-slide::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--tlhr2-overlay) 78%, transparent) 0%, color-mix(in srgb, var(--tlhr2-overlay) 35%, transparent) 55%, color-mix(in srgb, var(--tlhr2-overlay) 10%, transparent) 100%),
    linear-gradient(0deg, color-mix(in srgb, var(--tlhr2-overlay) 60%, transparent) 0%, transparent 40%);
}
.tlhr2-slide-link { position: absolute; inset: 0; z-index: 2; }

/* ── Textes ── */
.tlhr2-content {
  position: relative; z-index: 2; height: 100%;
  display: flex; flex-direction: column; justify-content: center; gap: 18px;
  padding-bottom: calc(var(--tlhr2-search-overlap) + 40px);
}
.tlhr2:not(.tlhr2--with-search) .tlhr2-content { padding-bottom: 70px; }
.tlhr2--under-header .tlhr2-content { padding-top: 120px; }
.tlhr2-content > * { max-width: 680px; margin: 0; }
.tlhr2-content--center { align-items: center; text-align: center; }
.tlhr2-content--right { align-items: flex-end; text-align: end; }
.tlhr2 .tlhr2-title {
  color: var(--tlhr2-text); font-size: clamp(36px, 5.6vw, 76px); font-weight: 800; line-height: 1.04;
  letter-spacing: -.02em; text-wrap: balance; text-shadow: 0 2px 24px rgba(0, 0, 0, .25);
}
.tlhr2 .tlhr2-accent {
  font-family: "Instrument Serif", Georgia, "Times New Roman", serif !important; /* passe devant la police imposée au site */
  font-style: italic; font-weight: 400; font-size: 1.1em; letter-spacing: 0; color: var(--tlhr2-accent-light);
}
.tlhr2 .tlhr2-text { color: var(--tlhr2-text); opacity: .9; font-size: 18px; line-height: 1.55; max-width: 52ch; }
.tlhr2 .tlhr2-cta {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 24px; border-radius: 999px; background: var(--tlhr2-accent); color: #fff !important;
  font-weight: 700; font-size: 15px; text-decoration: none;
  box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--tlhr2-accent) 80%, transparent);
  transition: transform .15s, filter .15s;
}
.tlhr2-content--center .tlhr2-cta { align-self: center; }
.tlhr2-content--right .tlhr2-cta { align-self: flex-end; }
.tlhr2 .tlhr2-cta:hover { transform: translateY(-1px); filter: brightness(.93); }
.tlhr2-cta svg { width: 17px; height: 17px; }
.tlhr2-slide.is-on .tlhr2-content > * { animation: tlhr2-in .8s cubic-bezier(.2, .7, .2, 1) both; }
.tlhr2-slide.is-on .tlhr2-content > :nth-child(2) { animation-delay: .1s; }
.tlhr2-slide.is-on .tlhr2-content > :nth-child(3) { animation-delay: .2s; }
@keyframes tlhr2-in { from { opacity: .001; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* ── Compteur, barres de progression, flèches ── */
.tlhr2-ui {
  position: absolute; z-index: 3; left: 0; right: 0; margin-inline: auto;
  bottom: calc(var(--tlhr2-search-overlap) + 32px);
  display: flex; align-items: center; gap: 20px; color: #fff;
}
.tlhr2:not(.tlhr2--with-search) .tlhr2-ui { bottom: 28px; }
.tlhr2-count { font-size: 14px; opacity: .85; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tlhr2-count b { font-size: 22px; font-weight: 700; }
.tlhr2-bars { display: flex; gap: 8px; flex: 1; max-width: 320px; }
.tlhr2-bars button { flex: 1; height: 4px; padding: 0; border: 0; border-radius: 4px; background: rgba(255, 255, 255, .3); cursor: pointer; overflow: hidden; }
.tlhr2-bars i { display: block; width: 0; height: 100%; background: #fff; }
.tlhr2-bars button.is-done i { width: 100%; }
.tlhr2-bars button.is-run i { animation: tlhr2-bar 6s linear forwards; }
.tlhr2:hover .tlhr2-bars button.is-run i { animation-play-state: paused; }
@keyframes tlhr2-bar { to { width: 100%; } }
.tlhr2-arrows { margin-inline-start: auto; display: flex; gap: 10px; }
.tlhr2-arrows button {
  width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .1); color: #fff;
  backdrop-filter: blur(8px); transition: background .2s, color .2s;
}
.tlhr2-arrows button:hover { background: #fff; color: #1e1e22; }
.tlhr2-arrows svg { width: 20px; height: 20px; }
html[dir="rtl"] .tlhr2-arrows svg { transform: scaleX(-1); }

/* ── Moteur de recherche dans une carte qui chevauche le bas de la diaporama ── */
/* Marge sous la carte : environ 64 px avec le haut de la 1re ligne du Page Builder (40 px), comme la maquette */
.tlhr2-search-wrap { position: relative; z-index: 20; margin-top: calc(-1 * 84px); margin-bottom: 24px; }
.tlhr2-search {
  background: #fff; border-radius: 24px; padding: 12px;
  box-shadow: 0 30px 60px -30px rgba(23, 23, 27, .45), 0 2px 6px rgba(23, 23, 27, .06);
}
/* Onglets : pastilles discrètes, l'onglet actif en orange clair */
.tlhr2-search .builder-search-tabs { gap: 4px; margin-bottom: 10px !important; padding: 2px 2px 0; }
.tlhr2-search .builder-search-tab-btn {
  border: 0 !important; background: transparent !important; color: #6e6e76 !important;
  padding: 8px 14px; border-radius: 999px; font-weight: 600; font-size: 13.5px; transition: background .15s, color .15s;
}
.tlhr2-search .builder-search-tab-btn:hover { color: #1e1e22 !important; }
.tlhr2-search .builder-search-tab-btn.is-active {
  background: color-mix(in srgb, var(--main-color, #E16923) 10%, #fff) !important;
  color: color-mix(in srgb, var(--main-color, #E16923) 82%, #000) !important;
}
/* Champs : le cadre blanc des moteurs devient un fond gris clair dans la carte */
.tlhr2-search .builder-hotel-shell,
.tlhr2-search .builder-flight-shell,
.tlhr2-search .builder-activity-shell {
  background: #F6F4F1 !important; border-color: transparent !important; box-shadow: none !important; border-radius: 16px !important;
}

@media (max-width: 860px) {
  .tlhr2 { --tlhr2-search-overlap: 64px; height: max(var(--tlhr2-h, 600px), 560px); }
  .tlhr2-content { justify-content: flex-end; padding-bottom: calc(var(--tlhr2-search-overlap) + 86px); }
  .tlhr2:not(.tlhr2--with-search) .tlhr2-content { padding-bottom: 80px; }
  .tlhr2-ui { bottom: calc(var(--tlhr2-search-overlap) + 30px); }
  .tlhr2-arrows { display: none; }
  .tlhr2 .tlhr2-text { font-size: 16px; }
  .tlhr2-search-wrap { margin-top: -64px; margin-bottom: 16px; }
  .tlhr2-search { padding: 8px; border-radius: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .tlhr2-slide, .tlhr2-slide img, .tlhr2-slide-fill { transition: opacity .3s !important; transform: none !important; }
  .tlhr2-slide.is-on .tlhr2-content > * { animation: none; }
  .tlhr2-bars button.is-run i { animation: none; width: 100%; }
}