/* =========================
HERO / SLIDER — BASE
========================= */
.hero-slider,
.wsite-section-bg-image {
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-color: #fff; /* fond neutre pendant le chargement */
}
/* =========================
Anti-flash (fade-in)
========================= */
.hero-slider,
.wsite-section-bg-image {
opacity: 0;
transition: opacity 0.6s ease-in-out;
}
.hero-loaded .hero-slider,
.hero-loaded .wsite-section-bg-image {
opacity: 1;
}
/* =========================
TABLET (iPad)
========================= */
@media (max-width: 1024px) {
.hero-slider,
.wsite-section-bg-image {
height: 70vh;
background-position: center top;
}
}
/* =========================
MOBILE (iPhone portrait)
========================= */
@media (max-width: 768px) {
.hero-slider,
.wsite-section-bg-image {
height: 55vh;
background-size: cover;
background-position: center top;
}
}
/* =========================
MOBILE LANDSCAPE (iPhone horizontal) — NO CROP
========================= */
@media (max-width: 900px) and (orientation: landscape) {
.hero-slider,
.wsite-section-bg-image {
height: 100vh;
background-size: contain; /* évite la découpe */
background-position: center center;
background-repeat: no-repeat;
background-color: #000; /* mets #fff si tu veux fond blanc */
}
}