/* ==========================================================================
   PERF.CSS — corrections de performance et nouveaux éléments
   Chargé après theme.css : ces règles priment.
   ========================================================================== */


/* --- 0. Les styles sont chargés : on affiche la page (voir <style id="cb-critical"> dans header.php) --- */
body {
    opacity: 1;
    animation: none;
}
body.home {
    background-color: #020308; /* jamais de blanc derrière les scènes pendant leur chargement */
}

/* Barre de défilement masquée sur la page d'accueil (ordinateur), comme dans la v1.
   (Avant, c'était le JS de l'écran "Start" qui la masquait ; le scroll reste possible
   à la molette, au clavier et au pavé tactile.) */
@media (min-width: 992px) {
    html:has(> body.home) {
        scrollbar-width: none;      /* Chrome, Edge, Firefox récents */
        -ms-overflow-style: none;   /* anciens Edge */
    }
    html:has(> body.home)::-webkit-scrollbar,
    body.home::-webkit-scrollbar {
        display: none;              /* Safari et anciens Chrome */
    }
}


/* --- 1. Les éléments animés par GSAP ne doivent pas avoir de transition CSS ---
   GSAP met à jour ces éléments à chaque image pendant le scroll. Une "transition"
   CSS sur les mêmes propriétés crée un décalage (effet de retard / saccades). */
#elsass .layer,
#elsass .layers__hery,
#livingroom .layers__hery2,
#livingroom .bg-window,
#livingroom .room,
#livingroom .room-shadow,
#livingroom .lampe,
#livingroom .tv-night,
#couverture,
#couverture .texte-couverture,
.carousel-prestations,
.carousel-prestations .h2-prestations,
.h2-portfolio, .h2-youtube,
#contact .layer,
#contact .layers_dark_scene {
    transition: none !important;
}


/* --- 2. Animations CSS en boucle : en pause quand la scène n'est pas à l'écran ---
   (nuages, oiseaux, lumière de la TV, fumée du café, rayon de soleil…)
   Le JS ajoute .is-visible sur la scène affichée. */
#elsass:not(.is-visible) *,
#livingroom:not(.is-visible) *,
#contact:not(.is-visible) * {
    animation-play-state: paused !important;
}



/* --- 3. Cosmos : image affichée immédiatement, la 3D prend le relais en fondu --- */
#spaceCodebless {
    background-color: #020308;
    background-image: url("../images/skybox/skybox-poster.webp");
    background-image: image-set(url("../images/skybox/skybox-poster.avif") type("image/avif"), url("../images/skybox/skybox-poster.webp") type("image/webp"));
    background-size: cover;
    background-position: center;
}
#spaceCodebless canvas {
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.8s ease;
}
#spaceCodebless canvas.is-ready {
    opacity: 1;
}
/* Au-delà de 2 écrans de scroll, le cosmos s'éteint (fond noir, comme avant) */
#spaceCodebless.is-off {
    background-image: none;
}
#spaceCodebless.is-off canvas {
    visibility: hidden;
}


/* --- 3 bis. Images avec largeur/hauteur (ajoutées par cb_img pour éviter les sauts de page) ---
   La hauteur s'adapte toujours à la largeur affichée : aucune image déformée.
   :where() = priorité nulle, toute règle de theme.css passe devant. */
:where(img[width][height]) {
    height: auto;
}


/* --- 4. Icônes SVG (remplacent Font Awesome) --- */
.cb-icon {
    display: inline-block;
    height: 1em;
    overflow: visible;
    vertical-align: -0.125em;
}


/* --- 5. Bouton son ---
   Coupé par défaut : icône "muet". En lecture : barres animées. */
#audio-button {
    border: 0;
    background: transparent;
    padding: 0;
    color: #FFFFFF;
    cursor: pointer;
}
#audio-button .playing { display: flex; }
#audio-button:not(.is-playing) .playing { display: none; }
#audio-button.is-playing .press-play { display: none; }
#audio-button .press-play {
    display: block;
    width: 2rem;
    height: 2rem;
    box-sizing: border-box;
    top: 0;
}
#audio-button .sound-hint {
    position: absolute;
    right: calc(100% + 0.75rem);
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.1);
    padding: 0.35rem 0.7rem;
    border-radius: 2rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s ease;
}
#audio-button.show-hint .sound-hint { opacity: 1; }
#audio-button:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 4px; border-radius: 0.3rem; }


/* --- 6. Vidéos des prestations (remplacent les GIF) ---
   Même cadrage que l'image de la carte qu'elles remplacent au survol. */
.content-prestation video.img-cover {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}
.modal-prestation video.img-cover {
    width: 100%;
    height: auto;
    aspect-ratio: 1140 / 600;
    object-fit: cover;
    display: block;
    background: #020308;
}


/* --- 7. Rayon de soleil du café (ordinateur) ---
   1) Pendant le scroll, GSAP le fait tourner et apparaître en fondu (parallax.js).
   2) Arrivé en fin de course, il "respire" doucement. Les images-clés gardent le même
      décalage (-13px) que la fin du mouvement GSAP : aucun saut de position. */
@media (min-width: 992px) {
    #contact .layers .layers__sunlight.sun-on {
        animation: cb-sunlight 2s linear infinite;
    }
}
@keyframes cb-sunlight {
    0%   { transform: translateX(-13px) scale(1) rotate(2deg);   opacity: 0.9; }
    50%  { transform: translateX(-13px) scale(0.9) rotate(0deg); opacity: 0.75; }
    100% { transform: translateX(-13px) scale(1) rotate(2deg);   opacity: 0.9; }
}


/* --- 8. Mobile : parallax classique (voir parallax.js) ---
   Le salon s'affiche en plein écran ; la couverture et les prestations suivent en dessous. */
@media (max-width: 991.98px) {
    #livingroom {
        padding-top: 100vh;
        padding-top: 100svh;
    }
    #livingroom .bg-window,
    #livingroom .room,
    #livingroom .room-shadow,
    #livingroom .lampe,
    #livingroom .tv-night {
        display: block;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        height: 100svh;
        transform-origin: 50% 55%;
    }
    #livingroom .layers__hery2 {
        display: flex;
        align-items: center;
        top: 0;
        left: 0;
        right: 0;
        height: 100vh;
        height: 100svh;
    }
    #livingroom .layers__hery2 .texteHery2 .le-mot2 {
        font-size: 1.5rem;
        line-height: 2rem;
    }
    #elsass .layers,
    #contact .layers {
        height: 100vh;
        height: 100svh;
    }
    /* Parallax mobile : couches un peu plus grandes que l'écran pour pouvoir
       bouger à des vitesses différentes sans laisser de vide en haut ou en bas */
    #elsass .layers .layer {
        top: -12%;
        height: 124%;
    }
    #livingroom .bg-window {
        top: -8vh;
        top: -8svh;
        height: 116vh;
        height: 116svh;
    }
}