/*
 * Styles de la page d'accueil (templates/static/index.html.twig).
 * Les images de fond (--hero-image / --hero-section-2-image) sont injectées en inline
 * depuis le template via l'URL versionnée générée par Twig (fonction asset()).
 */

:root {
    /* Bleu échantillonné dans le ciel de la photo hero-section-2 (les_caps.webp) */
    --sky-blue: #255fa9;
    --sky-blue-dark: #1e4c87;
    --sky-blue-rgb: 37, 95, 169;
}

/* Override des styles globaux pour cette page */
body.home-page {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}



/* Hero fullscreen avec navbar transparente */
.hero-fullscreen {
    position: relative;
    width: 100%;
    min-height: 100vh;
    min-height: 100svh;
    background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.5)), var(--hero-image);
    background-repeat: no-repeat;
    background-position: var(--hero-position, center center);
    background-size: cover;
    background-attachment: scroll;
    display: flex;
    flex-direction: column;
}

/* Navbar transparente sur la photo */
.navbar-hero {
    background: transparent !important;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    transition: background-color 0.3s ease;
}

.navbar-hero.scrolled {
    background: rgba(255, 255, 255, 0.85) !important;
    position: fixed;
}

.navbar-hero .nav-link {
    color: rgba(255, 255, 255, 0.9) !important;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
    font-weight: 500;
}

.navbar-hero .nav-link:hover {
    color: #fff !important;
}

.navbar-hero .navbar-brand {
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

/* Fond clair une fois scrollé : texte en gris doux plutôt qu'en blanc (illisible sur blanc) */
.navbar-hero.scrolled .nav-link {
    color: #6c757d !important;
    text-shadow: none;
}

.navbar-hero.scrolled .nav-link:hover {
    color: #495057 !important;
}

.navbar-hero.scrolled .navbar-brand {
    text-shadow: none;
}

.navbar-hero.scrolled .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(108, 117, 125, 0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Contenu centré du hero */
.hero-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
    padding: 100px 2rem 2rem;
}

.hero-content h1 {
    font-size: 4rem;
    line-height: 1.05;
    font-weight: 700;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
    margin-bottom: 1.5rem;
    animation: fadeInUp 1s ease-out;
}

.hero-content h1 > span {
    display: block;
}

.hero-content h1 .hero-title-connector {
    margin-top: -0.45em;
}

.hero-content .lead {
    font-size: 1.75rem;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
    margin-bottom: 2.5rem;
    max-width: 700px;
    animation: fadeInUp 1s ease-out 0.3s both;
}

.hero-content .btn-cta {
    background-color: var(--sky-blue);
    border-color: var(--sky-blue);
    font-weight: 500;
    font-size: 0.9rem;
    padding: 1rem 2.5rem;
    border-radius: 50px;
    box-shadow: 0 4px 15px rgba(var(--sky-blue-rgb), 0.4);
    transition: all 0.3s ease;
    animation: fadeInUp 1s ease-out 0.6s both;
}

.hero-content .btn-cta:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(var(--sky-blue-rgb), 0.5);
}

/* Indicateur de scroll */
.scroll-indicator {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    animation: bounce 2s infinite;
    color: white;
    font-size: 2rem;
    opacity: 0.8;
    cursor: pointer;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateX(-50%) translateY(0);
    }
    40% {
        transform: translateX(-50%) translateY(-15px);
    }
    60% {
        transform: translateX(-50%) translateY(-8px);
    }
}

/* Sections du contenu */
.content-section {
    padding: 5rem 0;
}

.card-ski {
    border: none;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    height: 100%;
    border-radius: 15px;
}

.card-ski:hover {
    transform: translateY(-5px);
}

.text-blue-ski {
    color: var(--sky-blue) !important;
}

.section-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 3rem;
}

.feature-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--sky-blue) 0%, var(--sky-blue-dark) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    color: white;
    font-size: 2rem;
    box-shadow: 0 4px 15px rgba(var(--sky-blue-rgb), 0.3);
}

/* Section photo intercalaire */
.hero-section-2 {
    position: relative;
    width: 100%;
    min-height: 60vh;
    background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.5)), var(--hero-section-2-image);
    background-repeat: no-repeat;
    background-position: var(--hero-section-2-position, center center);
    background-size: cover;
    background-attachment: scroll;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
}

.hero-section-2 h2 {
    font-size: 3rem;
    font-weight: 700;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
    margin-bottom: 1rem;
}

.hero-section-2 p {
    width: 100%;
    font-size: 1.5rem;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
    max-width: 600px;
    margin-right: auto;
    margin-left: auto;
}

.trail-map-content {
    width: min(100% - 2rem, 900px);
    padding: 4rem 0;
    text-align: center;
}

.trail-map-panel {
    margin: 2rem auto 0;
    padding: 1.5rem;
    max-width: 760px;
    background: rgba(0, 0, 0, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.35);
}

.trail-map-gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.trail-map-card {
    margin: 0;
}

.trail-map-image {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    max-height: 260px;
    object-fit: contain;
    background: #fff;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.trail-map-image:hover {
    transform: scale(1.02);
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.35);
}

.trail-map-card p {
    margin: 0.5rem 0 0;
    color: #fff;
    font-size: 0.9rem;
}

.trail-map-card .trail-map-difficulty {
    margin-top: 0.2rem;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.8rem;
}

.trail-map-help {
    margin-top: 1.25rem;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
}

@media (max-width: 768px) {
    .trail-map-gallery {
        grid-template-columns: 1fr;
    }
}

/* Aligne le bleu Bootstrap (bg-primary/badge bg-primary) sur la teinte du ciel, uniquement sur cette page */
body.home-page .bg-primary {
    background-color: var(--sky-blue) !important;
}

@media (max-width: 1024px) {
    .hero-section-2 {
        min-height: 50vh;
        background-attachment: scroll;
    }
    .hero-section-2 h2 {
        font-size: 2rem;
    }
    .hero-section-2 p {
        font-size: 1.1rem;
    }
}

/* Responsive */
@media (max-width: 1024px) {
    .hero-fullscreen {
        /* background-attachment: fixed est instable sur iOS/iPadOS (image mal cadrée ou tremblante) */
        background-attachment: scroll;
        min-height: 100svh;
    }
}

/* Palier tablette (ex: iPad portrait/paysage) */
@media (min-width: 769px) and (max-width: 1024px) {
    .hero-content {
        padding: 90px 2rem 2rem;
    }
    .hero-content h1 {
        font-size: 3rem;
    }
    .hero-content .lead {
        font-size: 1.4rem;
    }
}

/* En orientation paysage (tablette/mobile), la hauteur d'écran réduite force un
   recadrage vertical important. On remonte le point focal pour garder le sujet
   principal des photos visible (au lieu du centre pur qui montre trop de ciel/sol).
   Ajustez le second pourcentage (35% / 40%) si le cadrage ne convient toujours pas. */
@media (orientation: landscape) and (max-height: 900px) {
    .hero-fullscreen {
        background-position: var(--hero-position, center 35%);
    }
    .hero-section-2 {
        background-position: var(--hero-section-2-position, center 40%);
    }
}

@media (max-width: 768px) {
    .hero-content h1 {
        font-size: 2.5rem;
    }
    .hero-content .lead {
        font-size: 1.25rem;
    }
    .hero-fullscreen {
        background-attachment: scroll;
    }
}