/* =============================================================================
   splashscreen.css — Grand écran d'accueil (components/splashscreen.php).
   Occupe tout l'écran (100dvh) ; l'en-tête flottant passe par-dessus l'image.
   ============================================================================= */

.splash {
    position: relative;
    height: 100vh;
    height: 100dvh;
    width: 100%;
    overflow: hidden;
    background-color: var(--green-dark);
}

/* ---------- MODE FIXE (accueil) ----------
   Le splashscreen reste en place pendant le défilement ; la suite de la page passe par-dessus.
   --splash-progress (0 → 1) est calculé par splashscreen.js : 0 en haut de page,
   1 quand on a défilé d'un écran. Il pilote le flou et la disparition des boutons. */

.splash--sticky {
    --splash-blur: 12px;
    /* intensité du flou une fois recouvert */
    --splash-tint: linear-gradient(180deg, rgba(236, 242, 253, 0.25), rgba(247, 243, 244, 0.212));
    /* voile clair : texte foncé lisible */
    position: sticky;
    top: 0;
    z-index: 0;
}

/* Voile flou au-dessus de la scène, de plus en plus visible en défilant */
.splash-frost {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: var(--splash-tint);
    -webkit-backdrop-filter: blur(var(--splash-blur));
    backdrop-filter: blur(var(--splash-blur));
    opacity: var(--splash-progress, 0);
}

/* Boutons et indication : s'effacent rapidement dès qu'on commence à défiler */
.splash--sticky .splash-overlay {
    opacity: calc(1 - var(--splash-progress, 0) * 3);
}

.splash--sticky.is-covered .splash-overlay {
    visibility: hidden;   /* plus cliquables une fois effacés */
}

/* Tout ce qui suit le splashscreen passe au-dessus de lui */
.splash--sticky ~ * {
    position: relative;
    z-index: 1;
}

/* Seule cette zone défile, et seulement horizontalement */
.splash-viewport {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    /* barre de défilement masquée (Firefox) */
    cursor: grab;
}

.splash-viewport::-webkit-scrollbar {
    display: none;
    /* barre de défilement masquée (Chrome, Safari) */
}

.splash-viewport.is-dragging {
    cursor: grabbing;
}

.splash-viewport:focus-visible {
    outline: 3px solid var(--green-light);
    outline-offset: -3px;
}

/* Scène : taille fixée par splashscreen.js (celle de l'image à l'écran).
   Tous les calques s'y superposent et défilent ensemble. */
   .splash-scene {
    position: relative;
    flex: none;
}

.splash-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* Les calques animés laissent passer les gestes (défilement) vers la scène */
.splash-lotties,
.splash-snow {
    pointer-events: none;
}

/* Une animation Lottie : position et largeur en % de l'image (voir components/splashscreen.php) */
.splash-lottie {
    position: absolute;
}

/* Sans JavaScript : simple image */
.splash-fallback {
    flex: none;
    display: block;
    height: 100%;
    width: auto;
    max-width: none;
}

/* Interface par-dessus la scène (toujours au-dessus de tous les calques) : laisse passer
   les gestes vers la scène, sauf sur ses propres boutons et liens.
   En haut : accroche (sous l'en-tête flottant). En bas : indication puis boutons. */
   .splash-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: calc(var(--header-offset) + 1.5rem) var(--gutter) 2rem;
    pointer-events: none;
    z-index: 2;
}

.splash-overlay a,
.splash-overlay button {
    pointer-events: auto;
    text-shadow: 0px 0px 5px rgb(24, 82, 48);
}

/* ---------- ACCROCHE (en haut) ----------
   Texte clair avec une ombre douce : reste lisible sur n'importe quelle image ou animation. */
   .splash-hero {
    max-width: 50rem;
    text-align: center;
    color: var(--green-dark);
}

.splash-title {
    padding: 0;
    font-size: 1.9rem;
    line-height: 1.25;
    color: inherit;
    text-shadow: inherit;
}

.splash-subtitle {
    margin-top: 0.75rem;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.4;
}

/* ---------- BAS : INDICATION + BOUTONS ---------- */
.splash-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-top: auto;     /* toujours collé en bas, avec ou sans accroche */
}

/* Boutons côte à côte, tous de la même largeur (celle du plus long).
   Sur très petit écran, ils s'empilent (toujours de même largeur). */
   .splash-actions {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 0.75rem;
    padding-bottom: 6px; /* place pour l'ombre 3D */
}

.splash-actions .btn {
    padding: 0.65rem 1.4rem;
    font-size: 1rem;
    white-space: nowrap;
}

/* Indication « faites glisser », affichée seulement si l'image dépasse de l'écran */
.splash-hint {
    padding: 0.5rem 1rem;
    border-radius: var(--radius-pill);
    background-color: rgba(15, 56, 52, 0.7);
    color: var(--white);
    font-size: 0.9rem;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.splash.is-scrollable .splash-hint {
    opacity: 1;
}

.splash.has-scrolled .splash-hint {
    opacity: 0;
}

@media (max-width: 359px) {
    .splash-actions {
        grid-auto-flow: row;
    }
}

@media (min-width: 768px) {
    .splash-overlay {
        padding-top: calc(var(--header-offset) + 2.5rem);
        padding-bottom: 3rem;
    }

    .splash-title {
        font-size: 2.6rem;
    }

    .splash-subtitle {
        font-size: 1.3rem;
    }

    .splash-actions {
        gap: 10rem;
    }

    .splash-actions .btn {
        padding: 0.75rem 1.8rem;
        font-size: 1.1rem;
    }
}

/* Ordinateur : boutons plus grands, relief 3D un peu plus marqué */
@media (min-width: 1024px) {
    .splash-actions .btn {
        padding: 1rem 2.5rem;
        font-size: 1.35rem;
    }

    .splash-actions .btn--3d {
        box-shadow:
            0 3px 0 var(--btn-depth-1),
            0 6px 0 var(--btn-depth-2),
            0 8px 12px rgba(0, 0, 0, 0.25);
    }

    .splash-actions .btn--3d:hover,
    .splash-actions .btn--3d:focus-visible {
        box-shadow:
            0 4px 0 var(--btn-depth-1),
            0 7px 0 var(--btn-depth-2),
            0 10px 14px rgba(0, 0, 0, 0.25);
    }

    .splash-actions .btn--3d:active {
        transform: translateY(4px);
        box-shadow:
            0 1px 0 var(--btn-depth-1),
            0 2px 0 var(--btn-depth-2),
            0 3px 4px rgba(0, 0, 0, 0.25);
    }
}