/* =========================================================
   Template "Page d'attente" (tpl-waiting)
   Page jetable — tout en dur, aucun bloc Zone/Col/Block.
   Masque le header/footer standard du thème pour tenir sur
   un seul écran (100dvh, pas de scroll), en gardant l'esprit
   "mystique/bohème" de Morgane (lune, or, script Sacramento).
   ========================================================= */

/* #tpl_waiting reçoit un padding-top inline injecté par front.js pour compenser
   #header en position:fixed (cf. tpl-home.css) : on l'annule, et on masque le
   chrome standard du thème puisque cette page est autonome et plein écran. */
body:has(#tpl_waiting) {
    overflow: hidden;
}
body:has(#tpl_waiting) #header,
body:has(#tpl_waiting) #footer,
body:has(#tpl_waiting) #sub-footer,
body:has(#tpl_waiting) #go-top {
    display: none;
}

#tpl_waiting {
    padding: 0 !important;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    background-color: var(--c-dark);
    color: var(--c-text-light);
    text-align: left;
}

/* ===== Photo (danseuse) plein cadre + double dégradé :
   - horizontal, pour assombrir progressivement vers la droite où vit le texte
   - vertical, léger voile haut/bas pour unifier avec le reste du thème
   Même recette que #hero (tpl-home.css), adaptée : ici le texte occupe la
   zone déjà sombre de la photo (fond de scène), pas besoin d'un voile fort. */
.waiting-photo {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(100deg, rgba(20, 24, 15, 0) 36%, rgba(20, 24, 15, 0.55) 62%, rgba(20, 24, 15, 0.88) 100%),
        linear-gradient(180deg, rgba(20, 24, 15, 0.4) 0%, rgba(20, 24, 15, 0) 22%, rgba(20, 24, 15, 0) 78%, rgba(20, 24, 15, 0.6) 100%),
        url('../../images/morgane-danse.jpg');
    background-size: cover;
    background-position: 28% 38%;
}

/* ===== Panneau de texte, aligné à droite sur la zone sombre de la photo
   (même idiome que #hero) — pas de bordure ni d'ombre portée (on évite l'effet
   "carte" posée sur la photo) : juste un voile translucide + flou léger, filet
   de sécurité pour la lisibilité une fois le texte posé sur un fond qui n'est
   pas toujours uni (cf. le recadrage mobile, sur le tissu de la jupe). ===== */
.waiting-panel {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 440px;
    margin-right: 7vw;
    padding: 34px 36px;
    background: rgba(20, 24, 15, 0.38);
    backdrop-filter: blur(3px);
}

/* Logotype : lune + nom + baseline forment un bloc cohérent, centré sur lui-même
   (align-self) même si le reste du panneau reste aligné à gauche — la lune se
   positionne ainsi toujours au-dessus du nom, jamais "posée au hasard" dans un coin. */
#waiting-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: center;
    margin-bottom: 24px;
}

#waiting-moon {
    position: relative;
    color: var(--c-gold);
    font-size: 34px;
    margin-bottom: 14px;
    animation: waiting-float 5s ease-in-out infinite;
    text-shadow: 0 0 24px rgba(179, 146, 90, 0.5);
}
@keyframes waiting-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}

#waiting-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
/* line-height > 1 (au lieu de 1, qui colle au cadre nominal de la police) réserve
   la place sous la ligne de base pour les boucles/jambages du script Sacramento —
   sans ça, "Morgane" mord sur la baseline juste en dessous. */
#waiting-name {
    font-family: var(--font-script);
    font-size: 56px;
    line-height: 1.35;
    color: var(--c-text-light);
}
#waiting-baseline {
    margin-top: 4px;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 3.5px;
    text-transform: uppercase;
    color: var(--c-gold);
}

/* Petit repère lotus (fa-spa), dans le même esprit que .block_title::before (layout.css) */
#waiting-rule {
    display: block;
    margin-bottom: 20px;
}
#waiting-rule::before {
    content: '\f5bb';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 18px;
    color: var(--c-gold);
    opacity: 0.85;
}

#tpl_waiting .title {
    color: var(--c-text-light);
    font-size: 32px;
    padding-bottom: 14px;
}

#tpl_waiting .body {
    color: rgba(248, 243, 234, 0.82);
    font-size: 14.5px;
}

#waiting-social {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
    margin-top: 28px;
}
#waiting-social a {
    color: var(--c-text-light);
    font-size: 17px;
    display: inline-flex;
    text-decoration: none;
    transition: color 250ms ease-in-out, transform 250ms ease-in-out;
}
#waiting-social a:hover,
#waiting-social a:focus {
    color: var(--c-gold);
    transform: scale(1.2);
    text-decoration: none;
}

/* =========================================================
   Responsive — priorité absolue : jamais de scroll, ni en
   largeur (petit mobile) ni en hauteur (mobile en paysage,
   petits laptops).
   ========================================================= */
@media screen and (max-width: 767.98px) {
    /* Recadrage vertical (portrait) : la photo perd beaucoup de largeur, on recentre
       davantage sur la danseuse plutôt que sur le vide à droite. Le panneau repasse
       centré, en bas d'écran, sur un voile qui unifie toute la largeur — plus sûr
       qu'un dégradé directionnel une fois la photo réduite à une bande étroite. */
    .waiting-photo {
        background-image:
            linear-gradient(0deg, rgba(20, 24, 15, 0.85) 0%, rgba(20, 24, 15, 0.35) 42%, rgba(20, 24, 15, 0.15) 65%, rgba(20, 24, 15, 0.55) 100%),
            url('../../images/morgane-danse.jpg');
        background-position: 38% 30%;
    }

    #tpl_waiting {
        justify-content: flex-end;
        align-items: center;
        padding-bottom: 6vh !important;
    }

    .waiting-panel {
        align-items: center;
        text-align: center;
        max-width: 340px;
        margin: 0 auto;
        padding: 22px 26px;
        background: rgba(20, 24, 15, 0.32);
    }
    #waiting-moon {
        font-size: 30px;
    }
    #waiting-name {
        font-size: 44px;
    }
    #waiting-baseline {
        font-size: 9px;
        letter-spacing: 2.5px;
    }
    #tpl_waiting .title {
        font-size: 25px;
        padding-bottom: 10px;
    }
    #tpl_waiting .body {
        font-size: 13.5px;
    }
    #waiting-social {
        justify-content: center;
        margin-top: 20px;
        gap: 16px;
    }
}

/* Respecte prefers-reduced-motion : coupe le flottement de la lune, décoratif
   et non déclenché par l'utilisateur. */
@media (prefers-reduced-motion: reduce) {
    #waiting-moon {
        animation: none;
    }
}

/* Petites hauteurs (mobile en paysage, laptop avec barre d'adresse ouverte, ...) :
   on resserre plutôt que de laisser le contenu déborder du viewport. */
@media screen and (max-height: 680px) {
    #waiting-moon {
        font-size: 24px;
        margin-bottom: 8px;
    }
    #waiting-logo {
        margin-bottom: 12px;
    }
    #waiting-name {
        font-size: 34px;
    }
    #waiting-rule {
        margin-bottom: 10px;
    }
    #tpl_waiting .title {
        font-size: 21px;
        padding-bottom: 6px;
    }
    #tpl_waiting .body {
        font-size: 12.5px;
        line-height: 1.4;
    }
    #waiting-social {
        margin-top: 12px;
    }
}