/* Fond animé de la zone de connexion (2026-11-01) - cf. Views/Shared/_FondAnime.cshtml.
   Remplace l'image bg.jpg de .hero-block-inner : ciel, nuages qui défilent, mer qui scintille, herbe qui ondule.
   Animations CSS seulement (transform/opacity/background-position), coupées si l'utilisateur a demandé à réduire
   les animations (prefers-reduced-motion). */

/* Pas d'overflow:hidden ici : le bloc de connexion (.connect-box) déborde volontairement sous le cadre ;
   c'est .fond-anime qui découpe la scène aux coins arrondis */
.hero-block-inner {
    background-image: none;
}

.hero-block-inner > .container {
    position: relative;
    z-index: 1;
}

.hero-block-inner > .connect-box {
    z-index: 2;
}

.fond-anime {
    position: absolute;
    inset: 0;
    top: 0; right: 0; bottom: 0; left: 0;
    border-radius: 30px;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}

.fond-anime > * {
    position: absolute;
}

/* Ciel : bleu soutenu en haut, voile clair vers l'horizon (le titre reste lisible) */
.fa-ciel {
    top: 0; right: 0; bottom: 0; left: 0;
    background: linear-gradient(180deg, #5aa6e0 0%, #86bfeb 22%, #b6dbf5 48%, #d9eefa 63%, #e8f5fc 68%);
}

.fa-soleil {
    top: -25%;
    left: -10%;
    width: 70%;
    height: 70%;
    background: radial-gradient(closest-side, rgba(255, 255, 255, .75), rgba(255, 255, 255, 0));
    animation: fa-lueur 9s ease-in-out infinite alternate;
}

/* Nuages : ellipses floues qui traversent lentement le ciel */
.fa-nuage {
    left: 0;
    width: 340px;
    height: 70px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255, 255, 255, .95), rgba(255, 255, 255, .55) 55%, rgba(255, 255, 255, 0));
    filter: blur(6px);
    animation: fa-nuage linear infinite;
    will-change: transform;
}

.fa-nuage::before,
.fa-nuage::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: inherit;
}

.fa-nuage::before { width: 55%; height: 120%; left: 15%; top: -45%; }
.fa-nuage::after { width: 40%; height: 95%; left: 48%; top: -30%; }

.fa-nuage-1 { top: 7%;  animation-duration: 95s;  animation-delay: -10s; }
.fa-nuage-2 { top: 16%; animation-duration: 130s; animation-delay: -70s; width: 240px; height: 50px; }
.fa-nuage-3 { top: 4%;  animation-duration: 110s; animation-delay: -45s; width: 420px; opacity: .8; }
.fa-nuage-4 { top: 27%; animation-duration: 150s; animation-delay: -120s; width: 220px; height: 50px; opacity: .7; }
.fa-nuage-5 { top: 21%; animation-duration: 120s; animation-delay: -20s; width: 300px; opacity: .85; }
.fa-nuage-6 { top: 34%; animation-duration: 170s; animation-delay: -95s; width: 380px; height: 55px; opacity: .55; }

/* Collines bleutées à l'horizon */
.fa-collines {
    left: 0;
    bottom: 32%;
    width: 100%;
    height: 10%;
}

/* Mer : de l'horizon jusqu'au pied de la colline, avec des reflets qui glissent */
.fa-mer {
    left: 0;
    right: 0;
    top: 68%;
    bottom: 0;
    background: linear-gradient(180deg, #74bfe0 0%, #5fb1d8 30%, #8fd0ea 70%, #b5e2f2 100%);
    overflow: hidden;
}

/* Reflets : fines lignes claires horizontales, rendues visibles par plages qui glissent (masque animé) */
.fa-reflets {
    top: 0; right: 0; bottom: 0; left: 0;
    position: absolute;
    background-image: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 6px, rgba(255, 255, 255, .7) 7px, rgba(255, 255, 255, 0) 9px);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, transparent 26%, transparent 40%, #000 55%, transparent 68%, transparent 80%, #000 90%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 12%, transparent 26%, transparent 40%, #000 55%, transparent 68%, transparent 80%, #000 90%, transparent 100%);
    -webkit-mask-size: 200% 100%;
    mask-size: 200% 100%;
    opacity: .5;
    animation: fa-reflets 18s linear infinite, fa-scintille 3.5s ease-in-out infinite alternate;
}

.fa-reflets-2 {
    background-image: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 11px, rgba(255, 255, 255, .6) 12px, rgba(255, 255, 255, 0) 14px);
    opacity: .35;
    animation-duration: 27s, 5s;
    animation-direction: reverse, alternate;
    animation-delay: 0s, -2s;
}

/* Colline d'herbe au premier plan */
.fa-colline-herbe {
    left: 0;
    bottom: 0;
    width: 100%;
    height: 30%;
}

.fa-brins {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: fa-vent 5s ease-in-out infinite alternate;
}

.fa-brins-2 { animation-duration: 6.5s; animation-delay: -2s; }
.fa-brins-3 { animation-duration: 4.2s; animation-delay: -1s; }

@keyframes fa-nuage {
    from { transform: translateX(-450px); }
    to { transform: translateX(calc(100vw + 50px)); }
}

@keyframes fa-lueur {
    from { opacity: .6; }
    to { opacity: 1; }
}

@keyframes fa-reflets {
    from { -webkit-mask-position: 0% 0; mask-position: 0% 0; }
    to { -webkit-mask-position: 200% 0; mask-position: 200% 0; }
}

@keyframes fa-scintille {
    from { opacity: .3; }
    to { opacity: .6; }
}

@keyframes fa-vent {
    0% { transform: skewX(0deg); }
    50% { transform: skewX(-6deg); }
    100% { transform: skewX(3deg); }
}

/* Téléphone : horizon un peu plus bas, nuages plus petits */
@media (max-width: 768px) {
    .fa-nuage { width: 200px; height: 45px; }
    /* pas de photo sur téléphone, le formulaire suit le titre : horizon juste sous le sous-titre,
       mer puis herbe derrière le formulaire (visibles sur ses côtés) */
    .fa-collines { bottom: 52%; height: 4%; }
    .fa-mer {
        top: 48%;
        background: linear-gradient(180deg, #74bfe0 0%, #5fb1d8 20%, #8fd0ea 45%, #b5e2f2 55%, #4c8f55 62%, #4c8f55 100%);
    }
    .fa-colline-herbe { bottom: auto; top: 70%; height: 12%; }
}

/* Téléphone : cases Utilisateur / Mot de passe visibles dès l'ouverture, sans faire défiler (2026-11-01).
   L'illustration (header.png) est masquée et les marges réduites ; le formulaire suit le titre. */
@media (max-width: 768px) {
    .hero-block { padding: 15px 15px 0; }
    .hero-block-inner { padding-top: 40px; }
    .hero-content-text { padding-top: 125px; }
    .hero-content-text .col-md-6 { display: none; }
    .form-connect { padding: 18px 25px; }
    .connect-box-inner img { margin-bottom: 10px; }
}

/* "Réduire les animations" (souvent simplement les effets d'animation de Windows désactivés, comme sur le PC de
   l'administrateur) : nuages et herbe gardent leur mouvement lent (demandé), seuls les effets clignotants
   (scintillement de la mer, lueur du soleil) sont coupés */
@media (prefers-reduced-motion: reduce) {
    .fa-soleil { animation: none; }
    .fa-reflets { animation: fa-reflets 18s linear infinite; opacity: .4; }
    .fa-reflets-2 { animation: fa-reflets 27s linear infinite reverse; opacity: .3; }
}