/* ==========================================================================
   Satofly — surface ACCUEIL (public/home.html)
   CSS spécifique à la page d'accueil. S'appuie sur satofly.css (tokens,
   .btn, .glass, .gauge-*, .badge-remise, .reassure, .photo/.veil-*,
   .sarcelle-section, .review-card) — dont le MOTEUR DE RECHERCHE (.engine,
   .ef, .stepper, .ac-*), partagé avec la page de résultats et donc décrit
   dans satofly.css. Ce fichier ne garde que ce qui est propre à l'accueil.
   ========================================================================== */

/* ---- 1. Hero ------------------------------------------------------------ */
.hero-home {
  position: relative;
  min-height: 820px;
  display: flex;
  align-items: center;
  /* Pas d'`overflow: hidden` ici : il coupait la liste d'autocomplétion du
     moteur de recherche, qui descend sous le hero. Les couches photo et halo
     sont en `inset: 0` — elles ne débordent donc jamais, et c'est chacune
     d'elles qui porte le rognage. */
  padding: 86px 0 40px;          /* réserve l'en-tête flottant transparent */
  background: var(--sarcelle-900);
}
.hero-photo { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
/* Vidéo de fond : couche la plus basse du hero. Le voile --veil-hero
   (.veil-hero::before) doit repasser AU-DESSUS — sans ce z-index il serait
   peint avant l'élément <video>, positionné et donc plus haut dans l'ordre
   d'empilement. */
.hero-photo::before { z-index: 1; }
/* Voile supplémentaire : la photo d'aile au-dessus des nuages est très
   claire, le titre crème doit rester parfaitement lisible par-dessus. */
.hero-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(102deg, rgba(3, 31, 37, 0.70) 0%, rgba(3, 31, 37, 0.42) 46%,
                    rgba(3, 31, 37, 0.10) 76%, rgba(3, 31, 37, 0) 100%),
    linear-gradient(180deg, rgba(3, 31, 37, 0.34) 0%, rgba(3, 31, 37, 0) 34%);
}
@media (max-width: 900px) {
  /* Écrans étroits : le titre occupe toute la largeur, on assombrit à plat. */
  .hero-scrim { background: linear-gradient(180deg, rgba(3, 31, 37, 0.46), rgba(3, 31, 37, 0.30) 55%, rgba(3, 31, 37, 0.52)); }
}
.hero-halo {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(1100px 520px at 78% 12%,
              rgba(235, 175, 134, 0.24), transparent 70%);
}
.hero-inner { position: relative; z-index: 2; width: 100%; }

.hero-title {
  font-family: var(--ui); font-weight: 800;
  font-size: clamp(40px, 7.2vw, 76px); line-height: 1.0;
  letter-spacing: -0.045em; color: var(--creme);
  max-width: 840px; margin-bottom: 20px; text-wrap: pretty;
}
.hero-lede {
  max-width: 560px; font-weight: 400; font-size: 20px; line-height: 1.6;
  color: var(--creme-86); margin-bottom: 40px; text-wrap: pretty;
}

/* Recherches récentes (accueil uniquement, JS) */
.recent-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 4px 4px; }
.recent-row[hidden] { display: none; }
.recent-title { font-family: var(--ui); font-weight: 700; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--creme-76); }
.recent-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.recent-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--glass-12); border-radius: var(--r-pill); padding: 6px 6px 6px 14px; }
.recent-link { font-family: var(--ui); font-weight: 600; font-size: 13px; color: var(--creme); }
.recent-link:hover { color: #fff; }
.recent-del { border: 0; background: transparent; color: var(--creme-76); cursor: pointer; font-size: 12px; line-height: 1; padding: 4px; border-radius: var(--r-pill); }
.recent-del:hover { color: var(--creme); }

/* Ligne de réassurance sous le moteur */
.hero-reassure { margin-top: 28px; }

/* ---- 2. Bandeau remise ------------------------------------------------- */
.discount-band { background: var(--creme); }
.discount-band .wrap {
  display: flex; flex-wrap: wrap; align-items: center; gap: 20px 40px;
  padding-block: 26px;
}
.discount-figure { display: flex; align-items: baseline; gap: 12px; }
.discount-num {
  font-family: var(--ui); font-weight: 800; font-size: 44px; line-height: 1;
  letter-spacing: -0.04em; color: var(--sarcelle-900);
}
.discount-cap { font-family: var(--ui); font-weight: 700; font-size: 15px; line-height: 1.3; color: var(--gris); max-width: 180px; }
/* Texte de la remise : occupe la place laissée par l'ancienne jauge. */
.discount-note {
  flex: 1; min-width: 260px; max-width: 620px;
  font-size: 15px; line-height: 1.6; color: var(--gris); text-wrap: pretty;
}
.discount-pill {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--ui); font-weight: 700; font-size: 14px; line-height: 1.4;
  color: var(--sarcelle-900); background: #fff; border-radius: var(--r-pill);
  padding: 13px 20px; box-shadow: var(--sh-card);
}
.discount-pill .sf-icon { color: var(--abricot-800); flex: none; }

/* ---- En-tête de section (accueil) -------------------------------------- */
.home-head {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: 16px; margin-bottom: 26px;
}
.home-head h2 {
  font-family: var(--ui); font-weight: 800; font-size: clamp(30px, 4vw, 40px);
  line-height: 1.05; letter-spacing: -0.035em; color: var(--encre);
}
.home-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--ui); font-weight: 700; font-size: 15px; line-height: 1;
  color: var(--sarcelle-900);
}
.home-link .sf-icon { flex: none; }
.home-link:hover { color: var(--encre); }
.home-link-count {
  font-family: var(--mono); font-weight: 500; font-size: 12px; line-height: 1;
  color: var(--gris); background: var(--creme-200);
  border-radius: var(--r-pill); padding: 5px 9px;
}
/* Lien « voir tout » + flèches du carrousel, regroupés à droite du titre. */
.home-head-side { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }

/* ==========================================================================
   Carrousels horizontaux (.sfc) — « Là où l'on part cette semaine » et
   « Ils sont déjà partis ». Le défilement est NATIF : un conteneur
   overflow-x + scroll-snap. Il fonctionne donc au doigt, au trackpad et à la
   molette même sans JavaScript ; sf-home.js n'ajoute que les flèches, leur
   état de bout de course et les touches fléchées.
   ========================================================================== */
.sfc-scroller {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  /* Pleine largeur du bloc : les tuiles affleurent le bord de la fenêtre sur
     mobile, et leurs ombres ne sont pas rognées. Le padding rétablit
     l'alignement sur la gouttière du site. */
  margin-inline: calc(var(--gutter) * -1);
  padding: 8px var(--gutter) 30px;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}
.sfc-scroller::-webkit-scrollbar { width: 0; height: 0; }
.sfc-scroller:focus { outline: none; }
.sfc-scroller:focus-visible {
  outline: 3px solid var(--sarcelle-700); outline-offset: -6px;
  border-radius: var(--r-lg);
}
/* .sfc-rail porte aussi .dest-grid / .reviews-grid pour hériter du style des
   cartes ; le sélecteur composé neutralise la grille au profit d'une piste
   flexible, quel que soit l'ordre des règles dans le fichier. */
.sfc-rail.dest-grid,
.sfc-rail.reviews-grid {
  display: flex;
  align-items: stretch;
  gap: 16px;
  width: max-content;
  max-width: none;
}
.sfc-item { scroll-snap-align: start; flex: 0 0 auto; }
.sfc-rail.dest-grid .sfc-item { width: 300px; }
.sfc-rail.reviews-grid .sfc-item { width: 340px; display: flex; flex-direction: column; }
.sfc-rail .dest-tile:focus-visible,
.sfc-rail .review-card:focus-visible {
  outline: 3px solid var(--abricot-500); outline-offset: 3px;
}

/* Flèches précédent / suivant */
.sfc-nav { display: flex; align-items: center; gap: 8px; }
.sfc-btn {
  width: 42px; height: 42px; flex: none; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--r-pill); cursor: pointer;
  background: var(--creme-200); color: var(--sarcelle-900);
  box-shadow: var(--sh-card);
  transition: background .15s ease-out, color .15s ease-out, transform .1s ease-out;
}
.sfc-btn:hover:not(:disabled) { background: var(--sarcelle-900); color: var(--creme); }
.sfc-btn:active:not(:disabled) { transform: scale(0.94); }
.sfc-btn:focus-visible { outline: 3px solid var(--sarcelle-700); outline-offset: 3px; }
.sfc-btn:disabled { opacity: 0.34; cursor: default; box-shadow: none; }
/* Piste plus courte que la fenêtre : les flèches n'ont plus de sens. */
.sfc.is-static .sfc-nav { display: none; }
@media (max-width: 720px) {
  /* Mobile : défilement tactile naturel, pas de flèches à viser au pouce. */
  .sfc-nav { display: none; }
  .sfc-rail.dest-grid .sfc-item { width: min(80vw, 300px); }
  .sfc-rail.reviews-grid .sfc-item { width: min(86vw, 340px); }
  .sfc-scroller { padding-bottom: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .sfc-scroller { scroll-behavior: auto; }
  .sfc-btn { transition: none; }
}

/* ---- 3. Tuiles destination --------------------------------------------- */
.home-dests { padding: 56px 0 0; }
.dest-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.dest-tile {
  position: relative; height: 400px; border-radius: var(--r-lg);
  overflow: hidden; display: block; box-shadow: var(--sh-photo);
  transition: box-shadow .15s ease-out, transform .15s ease-out;
}
.dest-tile:hover { transform: translateY(-2px); box-shadow: 0 24px 54px rgba(3, 31, 37, 0.22); }
.dest-photo { position: absolute; inset: 0; }
.dest-badge { position: absolute; top: 16px; right: 16px; z-index: 2; }
.dest-info { position: absolute; left: 22px; right: 22px; bottom: 20px; z-index: 2; }
.dest-name {
  display: block; font-family: var(--ui); font-weight: 800; font-size: 27px;
  line-height: 1.1; letter-spacing: -0.03em; color: var(--creme); margin-bottom: 6px;
}
/* Le prix ne se coupe jamais en deux : si la ligne est trop courte, c'est
   le qualificatif qui passe au-dessus. */
.dest-row { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 10px; flex-wrap: wrap; }
.dest-hint { font-family: var(--mono); font-weight: 400; font-size: 13px; line-height: 1.3; color: var(--creme-76); flex: 1 1 auto; min-width: 0; }
.dest-price { display: flex; align-items: baseline; gap: 8px; flex: none; white-space: nowrap; }
.dest-strike { font-family: var(--mono); font-weight: 400; font-size: 13px; line-height: 1; color: rgba(249, 245, 236, 0.6); text-decoration: line-through; }
.dest-now { font-family: var(--mono); font-weight: 500; font-size: 20px; line-height: 1; color: var(--creme); }

/* Bandeau « Où l'on dort cette semaine » — alimenté par popular_hotels.
   Chaque pastille ouvre une recherche hôtel valide (ville + dates). */
.hotel-strip { margin-top: 26px; }
.hotel-strip-title { display: block; color: var(--gris); margin-bottom: 12px; }
.hotel-strip-row { display: flex; flex-wrap: wrap; gap: 10px; }
.hotel-chip {
  display: inline-flex; align-items: baseline; gap: 9px;
  background: var(--creme-200); border-radius: var(--r-pill);
  padding: 11px 18px; min-width: 0;
  transition: background .15s ease-out, transform .1s ease-out;
}
.hotel-chip:hover { background: var(--sarcelle-100); transform: translateY(-1px); }
.hotel-chip .sf-icon { color: var(--sarcelle-700); flex: none; align-self: center; }
.hotel-chip-city {
  font-family: var(--ui); font-weight: 700; font-size: 15px; line-height: 1.2;
  color: var(--encre);
}
.hotel-chip-hint {
  font-family: var(--ui); font-weight: 400; font-size: 13px; line-height: 1.2;
  color: var(--gris); white-space: nowrap;
}
.hotel-chip-price { font-size: 14px; line-height: 1.2; color: var(--sarcelle-900); }
.hotel-chip-unit { color: var(--gris); font-weight: 400; }
@media (max-width: 620px) {
  .hotel-chip-hint { display: none; }
}

/* ---- 4. Cartes d'inspiration ------------------------------------------- */
.home-insp { padding: 56px 0 0; }
.insp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 16px; }
.insp-card { position: relative; height: 440px; border-radius: var(--r-lg); overflow: hidden; display: block; box-shadow: var(--sh-photo); }
.insp-photo { position: absolute; inset: 0; }
.insp-body { position: absolute; left: 34px; top: 34px; right: 34px; max-width: 300px; z-index: 2; }
.insp-eyebrow { display: block; font-family: var(--ui); font-weight: 700; font-size: 11px; line-height: 1; letter-spacing: 0.16em; text-transform: uppercase; color: var(--abricot-500); margin-bottom: 14px; }
.insp-title { display: block; font-family: var(--ui); font-weight: 800; font-size: 34px; line-height: 1.08; letter-spacing: -0.03em; color: var(--creme); margin-bottom: 14px; }
.insp-text { display: block; font-family: var(--ui); font-weight: 400; font-size: 16px; line-height: 1.55; color: var(--creme-86); }
.insp-cta { position: absolute; left: 34px; bottom: 34px; z-index: 2; }
@media (max-width: 480px) {
  .insp-grid { grid-template-columns: 1fr; }
  .insp-body { position: static; padding: 34px 34px 0; max-width: none; }
  .insp-card { height: auto; min-height: 440px; }
}

/* ---- 5. Trois étapes (section sarcelle) -------------------------------- */
.home-steps { margin-top: 72px; padding-block: 80px; }
.home-steps h2 {
  font-family: var(--ui); font-weight: 800; font-size: clamp(30px, 4vw, 40px);
  line-height: 1.05; letter-spacing: -0.035em; color: var(--creme); margin-bottom: 12px;
}
.home-steps-lede { max-width: 520px; font-family: var(--ui); font-weight: 400; font-size: 17px; line-height: 1.6; color: var(--creme-76); margin-bottom: 40px; }
.steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 16px; }
.step-card {
  background: var(--glass-08);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-radius: 22px; padding: 30px;
}
.step-head { display: flex; align-items: center; gap: 13px; margin-bottom: 16px; }
.step-num {
  width: 38px; height: 38px; flex: none; border-radius: var(--r-pill);
  background: var(--abricot-500); color: var(--encre);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ui); font-weight: 800; font-size: 16px; line-height: 1;
}
.step-title { font-family: var(--ui); font-weight: 800; font-size: 21px; line-height: 1.2; letter-spacing: -0.025em; color: var(--creme); }
.step-text { font-family: var(--ui); font-weight: 400; font-size: 16px; line-height: 1.6; color: var(--creme-86); text-wrap: pretty; }

/* ---- 6. Avis ----------------------------------------------------------- */
.home-reviews { padding: 72px 0 0; }
.reviews-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 16px; }
.reviews-grid .review-card { padding: 30px; border-radius: 22px; box-shadow: var(--sh-card); }
.reviews-grid .review-quote {
  margin-bottom: 20px; font-family: var(--ui); font-weight: 700; font-size: 19px;
  line-height: 1.45; letter-spacing: -0.015em; color: var(--encre); text-wrap: pretty;
}
.reviews-grid .review-author { font-family: var(--mono); font-weight: 400; font-size: 13px; line-height: 1.4; color: var(--gris); }
/* Auteur : avatar initiale + prénom (aligné sur /avis, sans émoji). */
.review-meta { display: flex; align-items: center; gap: 11px; }
/* En carrousel, les cartes ont la même hauteur : l'auteur reste collé en bas. */
.sfc-rail.reviews-grid .review-meta { margin-top: auto; }
.review-avatar {
  width: 34px; height: 34px; flex: none; border-radius: var(--r-pill);
  background: var(--sarcelle-100); color: var(--sarcelle-900);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--ui); font-weight: 800; font-size: 14px; line-height: 1;
}

/* ---- 7. Bandeau final -------------------------------------------------- */
.home-final { padding: 72px 0 80px; }
.final-card {
  position: relative; border-radius: 28px; overflow: hidden; min-height: 330px;
  display: flex; align-items: center; box-shadow: 0 24px 60px rgba(3, 31, 37, 0.2);
}
.final-photo { position: absolute; inset: 0; }
.final-body { position: relative; z-index: 2; padding: 52px; max-width: 620px; }
.final-body h2 {
  font-family: var(--ui); font-weight: 800; font-size: clamp(28px, 4vw, 40px);
  line-height: 1.05; letter-spacing: -0.035em; color: var(--creme); margin-bottom: 16px;
}
.final-body p { font-family: var(--ui); font-weight: 400; font-size: 17px; line-height: 1.6; color: var(--creme-86); margin-bottom: 28px; text-wrap: pretty; }
.final-actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 560px) { .final-body { padding: 36px 28px; } }

/* Le bandeau final enchaîne directement sur la section partenaires. */
.page-home .home-final { padding-bottom: 56px; }
/* ---- Partenaires : bandeau STATIQUE, logos incrustés -------------------
   Demande : « une dizaine », « sans mouvement », « logos incrustés dans le
   fond avec un effet à la limite ». Les marques sont donc peintes EN CREUX
   dans le fond sarcelle : masque monochrome crème très atténué, plus un
   liseré sombre décalé d'1 px qui creuse la forme (effet gravé). Rien ne
   bouge ; seule l'opacité monte doucement au survol. */
.brands { padding-block: 72px 78px; }
.brands .brands-head { max-width: 720px; margin-bottom: 44px; }
.brands .brands-head .eyebrow { color: var(--abricot-500); }
.brands h2 {
  font-size: clamp(26px, 3.4vw, 38px); letter-spacing: -0.03em;
  color: var(--creme); margin: 10px 0 14px;
}
.brands-lede { font-size: 17px; line-height: 1.6; color: var(--creme-76); }

.brands-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 30px 26px;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  align-items: center;
}
.brand-tile {
  display: flex; align-items: center; justify-content: center;
  min-height: 56px;
}

/* Logo = masque : la couleur vient du CSS, jamais du fichier. */
.brand-mark {
  display: block; width: 100%; height: 40px;
  background-color: var(--creme);
  -webkit-mask-image: var(--mark); mask-image: var(--mark);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  opacity: 0.30;
  /* Le creux : une ombre intérieure imitée par un filtre. */
  filter: drop-shadow(0 1px 0 rgba(3, 31, 37, 0.55));
  transition: opacity .25s ease-out;
}
.brand-tile:hover .brand-mark { opacity: 0.62; }

/* Marques sans logo libre (Amadeus) : wordmark au même traitement. */
.brand-word {
  font-family: var(--ui); font-weight: 800; font-size: 21px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--creme); opacity: 0.30;
  text-shadow: 0 1px 0 rgba(3, 31, 37, 0.55);
  transition: opacity .25s ease-out;
}
.brand-tile:hover .brand-word { opacity: 0.62; }

.brands-note {
  margin-top: 40px; font-size: 12.5px; line-height: 1.5;
  color: var(--creme-66);
}

@media (prefers-reduced-motion: reduce) {
  .brand-mark, .brand-word { transition: none; }
}
@media (max-width: 720px) {
  .brands { padding-block: 52px 56px; }
  .brands-grid { gap: 24px 18px; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); }
  .brand-mark { height: 32px; }
  .brand-word { font-size: 17px; }
}

/* Mention « et bien d'autres » sous la grille de partenaires. */
.brands-more {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 38px; padding: 11px 20px;
  border-radius: var(--r-pill); background: var(--glass-10);
  font-family: var(--ui); font-weight: 700; font-size: 15px;
  color: var(--creme-86);
}
.brands-more .sf-icon { color: var(--abricot-500); flex: none; }
@media (max-width: 720px) {
  .brands-more { margin-top: 28px; font-size: 14px; padding: 10px 16px; }
}

/* Titre du hero en deux temps : la seconde ligne est légèrement adoucie pour
   que « −40 % » reste le point d'accroche. */
.hero-title-2 { color: var(--creme-86); }
/* Seconde phrase du chapeau : un cran en dessous, elle porte le détail. */
.hero-lede-2 { display: block; margin-top: 8px; color: var(--creme-76); font-size: 0.94em; }