/* Accueil : hero + moteur, blocs de sélection, arguments, newsletter */
:root {
  --home-primary: #009aad;
  --home-primary-dark: #1e8284;
  --home-primary-soft: #e6f5f7;
  --home-orange: #9abf58;
  --home-ink: #1d2433;
  --home-muted: #5d6475;
  --home-line: #e6e9ef;
  --home-radius: var(--radius-xl, 16px);
  --home-shadow: 0 12px 32px rgba(15, 41, 77, .12);
  --home-shadow-sm: 0 4px 14px rgba(15, 41, 77, .08);
}

/* ---------- Hero ---------- */
/* Mobile : le bleu s'arrête à mi-hauteur du moteur, le bas de la carte déborde sur le fond blanc */
.home-hero { position: relative; background: var(--home-primary) top / 100% calc(100% - 10rem) no-repeat; }
.home-hero .carousel-item img { width: 100%; height: clamp(320px, 42vw, 560px); object-fit: cover; }
.home-hero .carousel-item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.05) 40%, rgba(0,0,0,.45) 100%); pointer-events: none; }
.home-hero .carousel-caption { z-index: 2; bottom: 9rem; text-align: left; left: 0; right: 0; }
.home-hero .carousel-caption .font-48 { font-size: clamp(1.75rem, 3.2vw, 3rem); font-weight: 600; line-height: 1.15; text-shadow: 0 2px 12px rgba(0,0,0,.35); margin-bottom: .5rem; }
.home-hero .carousel-caption .font-36 { font-size: clamp(1rem, 1.6vw, 1.375rem); text-shadow: 0 1px 8px rgba(0,0,0,.35); }
.home-hero .carousel-indicators { bottom: 7.5rem; z-index: 3; }
.home-hero .carousel-control-prev, .home-hero .carousel-control-next { z-index: 3; bottom: 7rem; width: 6%; }

.home-hero-intro { color: #fff; padding-top: 1.5rem; padding-bottom: 1rem; }
.home-hero-intro .title { font-size: 1.5rem; font-weight: 600; margin: 0 0 .25rem; }
.home-hero-intro p { margin: 0; opacity: .9; }

/* ---------- Moteur ---------- */
.home-engine { position: relative; z-index: 5; padding-bottom: 1rem; }
@media (min-width: 992px) {
  .home-hero { background: none; }
  .home-engine { margin-top: -7.5rem; padding-bottom: 0; }
}
.home-engine-card { background: #fff; border-radius: var(--home-radius); box-shadow: var(--home-shadow); padding: 1rem; }
@media (min-width: 768px) { .home-engine-card { padding: 1.25rem 1.5rem 1.5rem; } }

.home-engine-tabs { display: flex; gap: .5rem; margin: 0 0 1rem; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.home-engine-tabs::-webkit-scrollbar { display: none; }
.home-engine-tabs a { display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; padding: .5rem 1rem; border-radius: var(--radius-pill); font-weight: 600; font-size: .9375rem; text-decoration: none; background: #f4f6f9; transition: background-color .15s, color .15s; }
.home-engine-tabs a:hover { background: var(--home-primary-soft); color: var(--home-primary); }
.home-engine-tabs a[aria-current="page"] { background: var(--home-primary); color: #fff; }
.home-engine-tabs svg { width: 16px; height: 16px; fill: currentColor; flex: none; }

/* Champs du moteur (balisage de hotels/inc/search-form.ejs, inchangé pour search-form.js) */
.home-engine .engine .input-separate .form-control,
.home-engine .engine .form-control-border { border: 1px solid var(--home-line); border-radius: var(--radius-lg); background: #fff; transition: border-color .15s, box-shadow .15s; }
.home-engine .engine .form-control-border { height: 44px; padding-top: 8px; }
.home-engine .engine .form-control-border .form-control { border: 0; box-shadow: none; background: transparent; }
.home-engine .engine .input-separate .form-control:focus,
.home-engine .engine .form-control-border:focus-within { border-color: var(--home-primary); box-shadow: 0 0 0 3px rgba(0, 154, 173, .15); }
.home-engine .engine .label-pos,
.home-engine .engine .form-control-border .form-label { font-size: 12px !important; font-weight: 600; }
.home-engine .engine button[type="submit"] { background: #f28c1e; border-color: #f28c1e; color: #fff; }
.home-engine .engine button[type="submit"]:hover,
.home-engine .engine button[type="submit"]:focus-visible { background: #d9740a; border-color: #d9740a; }
.home-engine .engine button[type="submit"] { min-height: 44px; border-radius: var(--radius-lg); font-size: 1.0625rem; box-shadow: 0 6px 16px rgba(242, 140, 30, .35); }
.home-engine .engine .guests { border-radius: var(--radius-lg); box-shadow: var(--home-shadow); border: 1px solid var(--home-line); }
.home-engine .engine a[data-bs-toggle="collapse"] { color: var(--home-primary) !important; font-weight: 600; font-size: .875rem; }

/* ---------- Sections ---------- */
.home-section { padding: 2rem 0; }
@media (min-width: 768px) { .home-section { padding: 3.5rem 0; } }
.home-section-alt { background: #f6f8fb; }
.home-section-head { margin-bottom: 1.25rem; }
.home-section-head h1, .home-section-head h2 { font-size: clamp(1.375rem, 2.2vw, 1.75rem); font-weight: 600; margin-bottom: .25rem; }
.home-section-head p { margin: 0; }

/* Recherches récentes : défilement horizontal */
.home-recent { display: flex; gap: .75rem; overflow-x: auto; padding-bottom: .5rem; margin-bottom: 2rem; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.home-recent form { flex: 0 0 auto; scroll-snap-align: start; }
.home-recent button { display: flex; align-items: center; gap: .75rem; text-align: left; background: #fff; border: 1px solid var(--home-line); border-radius: var(--radius-lg); padding: .625rem 1rem; transition: border-color .15s, box-shadow .15s; }
.home-recent button:hover, .home-recent button:focus-visible { border-color: var(--home-primary); box-shadow: var(--home-shadow-sm); }
.home-recent .icon { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--radius); background: var(--home-primary-soft); color: var(--home-primary); }
.home-recent .city { font-weight: 600; }
.home-recent .meta { font-size: 13px; }

/* Cartes hôtels / voyages */
.home-card { position: relative; height: 100%; background: #fff; border-radius: var(--home-radius); overflow: hidden; box-shadow: var(--home-shadow-sm); transition: transform .2s, box-shadow .2s; }
.home-card:hover { transform: translateY(-4px); box-shadow: var(--home-shadow); }
.home-card-media { position: relative; aspect-ratio: 4 / 3; background: #eef1f5; overflow: hidden; }
.home-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.home-card:hover .home-card-media img { transform: scale(1.05); }
.home-card-price { position: absolute; left: .75rem; bottom: .75rem; background: #fff; border-radius: var(--radius); padding: .25rem .625rem; box-shadow: var(--home-shadow-sm); line-height: 1.2; }
.home-card-price small { display: block; font-size: 11px; }
.home-card-price strong { color: #212529; font-size: 1.125rem; }
.home-card-body { padding: .875rem 1rem 1rem; }
.home-card-title { font-size: 1.0625rem; font-weight: 600; margin: 0 0 .25rem; line-height: 1.3; }
.home-card-title a { color: #212529; text-decoration: none; }
.home-card-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.home-card-place { font-size: 14px; margin: 0; }
.home-card-stars { margin-left: .25rem; }
.home-card-tag { display: flex; align-items: center; gap: .5rem; margin-top: .625rem; padding: .375rem .625rem; border-radius: var(--radius); background: #f2f7ea; color: #4d6b1f; font-size: 13px; }
.home-card-tag svg { flex: none; fill: var(--home-orange); }
.home-card-tag p { margin: 0; }

.home-section .owl-stage { display: flex; }
.home-section .owl-item { display: flex; padding: 4px 2px 12px; }
.home-section .owl-item .item { width: 100%; }

/* Arguments */
.home-reasons { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .home-reasons { grid-template-columns: repeat(5, 1fr); gap: 1.25rem; } }
.home-reasons li { display: flex; flex-direction: column; align-items: center; gap: .75rem; text-align: center; padding: 1.25rem .75rem; background: #fff; border: 1px solid var(--home-line); border-radius: var(--home-radius); }
.home-reasons li:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 768px) { .home-reasons li:last-child:nth-child(odd) { grid-column: auto; } }
.home-reasons .icon { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; background: var(--home-primary-soft); }
.home-reasons h3 { font-size: 14px; font-weight: 600; margin: 0; }

/* FAQ */
.home-faq h3 { font-size: 1.0625rem; font-weight: 600; margin-top: 1.25rem; }

/* Newsletter */
.home-news { display: grid; gap: 1rem; align-items: center; padding: 1.5rem; border-radius: var(--home-radius); background: var(--home-primary); color: #fff; }
@media (min-width: 992px) { .home-news { grid-template-columns: 1.2fr 1fr auto; padding: 2rem 2.5rem; gap: 2rem; } }
.home-news h2 { font-size: 1.25rem; font-weight: 600; margin: 0; color: #fff; }
.home-news .form-control { height: 44px; border: 0; border-radius: var(--radius-lg) 0 0 var(--radius-lg); }
.home-news .btn { border-radius: 0 var(--radius-lg) var(--radius-lg) 0 !important; padding: 0 1.25rem; }
.home-news .result-news { margin-top: .5rem; }
.home-news .social { display: flex; align-items: center; gap: .5rem; margin: 0; padding: 0; list-style: none; font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .home-card, .home-card-media img { transition: none; }
  .home-card:hover, .home-card:hover .home-card-media img { transform: none; }
}

/* ---------- Bandeau moteur « Votre voyage commence ici » ---------- */
.home-engine-band {
  position: relative; padding: 1.75rem 0 2rem;
  background:
    radial-gradient(circle at 88% 15%, rgba(255, 255, 255, .18) 0, rgba(255, 255, 255, 0) 32%),
    radial-gradient(circle at 8% 110%, rgba(154, 191, 88, .35) 0, rgba(154, 191, 88, 0) 38%),
    linear-gradient(120deg, var(--home-primary) 0%, var(--home-primary-dark) 100%);
  border-bottom: 4px solid var(--home-orange);
}
.home-engine-band .home-engine-tabs a:not([aria-current="page"]) { background: #f4f6f9; color: var(--home-ink); }
.home-engine-band .home-engine-tabs a:not([aria-current="page"]) svg { fill: var(--home-primary); }
.home-engine-band .home-engine-tabs a:not([aria-current="page"]):hover { background: var(--home-primary-soft); color: var(--home-primary-dark); }
@media (min-width: 768px) { .home-engine-band { padding: 3rem 0 3.5rem; } }
.home-engine-title { color: #fff; font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 700; margin: 0 0 .25rem; }
.home-engine-sub { color: rgba(255, 255, 255, .85); margin: 0 0 1.25rem; }
.home-engine-band .home-engine { margin-top: 0; padding-bottom: 0; }

/* ---------- Univers « Personnalisez votre voyage » ---------- */
.home-postcard { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: var(--home-radius); overflow: hidden; color: #fff; text-decoration: none; box-shadow: var(--home-shadow-sm); }
.home-postcard img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.home-postcard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, .75) 100%); }
.home-postcard-body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: flex; flex-direction: column; gap: .375rem; padding: 1rem; }
.home-postcard-title { font-size: 1.25rem; font-weight: 700; line-height: 1.2; }
.home-postcard-text { font-size: .875rem; opacity: .9; }
.home-postcard-price small { opacity: .85; }
.home-postcard-price strong { font-size: 1.25rem; }
.home-postcard-cta { align-self: flex-start; margin-top: .25rem; padding: .375rem .875rem; border-radius: var(--radius-pill, 50rem); background: #fff; color: var(--home-primary); font-weight: 600; font-size: .875rem; transition: background-color .2s, color .2s; }
.home-postcard:hover img, .home-postcard:focus-visible img { transform: scale(1.06); }
.home-postcard:hover .home-postcard-cta, .home-postcard:focus-visible .home-postcard-cta { background: var(--home-orange); color: #fff; }
.home-postcard:focus-visible { outline: 3px solid var(--home-orange); outline-offset: 3px; }

.home-btn { border-radius: var(--radius-pill, 50rem); padding: .5rem 1.5rem; font-weight: 600; border-color: var(--home-primary); color: var(--home-primary); }
.home-btn:hover, .home-btn:focus-visible { background: var(--home-primary); border-color: var(--home-primary); color: #fff; }

/* ---------- Nos engagements ---------- */
.home-commitments { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .home-commitments { grid-template-columns: repeat(3, 1fr); } }
.home-commitments li { display: flex; align-items: center; gap: 1rem; padding: .75rem; background: #fff; border: 1px solid var(--home-line); border-radius: var(--home-radius); transition: box-shadow .2s, transform .2s; }
.home-commitments li:hover { box-shadow: var(--home-shadow-sm); transform: translateY(-2px); }
.home-commitments img { width: 96px; height: auto; flex: none; border-radius: calc(var(--home-radius) - 6px); }
.home-commitments h3 { font-size: 1rem; font-weight: 700; color: var(--home-primary); margin: 0 0 .25rem; }
.home-commitments p { margin: 0; font-size: .9375rem; }

@media (prefers-reduced-motion: reduce) {
  .home-postcard img, .home-commitments li { transition: none; }
}

/* ---------- Carte hôtel partagée (views/hotels/inc/hotel-card.ejs) ---------- */
.home-card-tag .bi { flex: none; color: var(--home-orange); }
.home-card-place .bi { color: var(--home-primary); }
.home-card-discount { position: absolute; top: .75rem; right: .75rem; background: var(--home-orange); color: #fff; font-weight: 700; font-size: .875rem; padding: .2rem .55rem; border-radius: var(--radius-pill, 50rem); }
.home-card-note { margin: .5rem 0 0; font-size: 12px; font-weight: 500; }

/* ---------- Page ville (views/hotels/city.ejs) ---------- */
.city-hero { background: var(--home-primary); padding: 1rem 0 2rem; color: #fff; }
.city-hero .breadcrumb { margin-bottom: 1rem; }
.city-hero .breadcrumb a, .city-hero .breadcrumb-item.active, .city-hero .breadcrumb-item + .breadcrumb-item::before { color: rgba(255, 255, 255, .85); }
.city-hero h1 { font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 700; margin: 0 0 .25rem; }
.city-hero-sub { margin: 0 0 1.25rem; opacity: .9; }
.city-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.city-content { margin-top: 2.5rem; }

/* Bouton « Voir l'offre » des cartes hôtels, aligné en bas de carte */
.home-card-action { margin-top: auto; padding-top: .875rem; }
.home-card { display: flex; flex-direction: column; }
.home-card-body { display: flex; flex-direction: column; flex: 1; }
.home-card-cta { display: inline-flex; align-items: center; justify-content: center; gap: .375rem; width: 100%; padding: .55rem 1rem; border-radius: var(--radius-pill, 50rem); background: var(--home-primary); color: #fff; font-weight: 600; font-size: .9rem; transition: background-color .2s; }
.home-card:hover .home-card-cta, .home-card:focus-within .home-card-cta { background: var(--home-orange); }
.home-card .bi-arrow-right { transition: transform .2s; }
.home-card:hover .bi-arrow-right { transform: translateX(3px); }