/* À charger après votre feuille de placement. Aucun style global de mise en page. */
:where([data-water-art]) { position: relative; }
[data-water-end] { opacity: 0; pointer-events: none; transition: opacity 1.5s ease var(--water-delay, 0s); }
.scene-complete [data-water-end] { opacity: 1; pointer-events: auto; }
/* Moteur aquatique commun : ne déplace aucun élément de la composition. */
.art-layer.reveal-ready .main-art, [data-water-art].reveal-ready [data-water-image] { opacity: 0; }
.floating-element { pointer-events: none; }
.water-canvas, .water-ripples { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 2; }
.water-canvas { touch-action: none; }
.water-canvas.painting { cursor: none; }
.water-canvas.is-finished { touch-action: auto; pointer-events: none; }
.water-ripples { pointer-events: none; }
.water-cursor { position: fixed; left: 0; top: 0; width: 72px; height: 72px; margin: -36px; border: 1px solid #365e4c70; border-radius: 50%; z-index: 90; pointer-events: none; opacity: 0; transition: opacity .2s, scale .3s; }
.water-cursor::before { content: ''; position: absolute; inset: 8px; border: 1px solid #365e4c22; border-radius: 50%; }
.water-cursor::after { content: ''; position: absolute; left: 50%; top: 50%; width: 3px; height: 3px; background: #365e4c80; border-radius: 50%; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#experience-message { position: fixed; top: 5rem; left: 50%; transform: translateX(-50%); width: max-content; max-width: min(90vw,580px); padding: .8rem 1rem; border: 1px solid #5b796533; border-radius: 8px; background: #f6f5f0f5; color: #333; font: .8rem/1.5 var(--ui-font, sans-serif); z-index: 150; }
.import-main { position: fixed; top: 12rem; left: 50%; transform: translateX(-50%); z-index: 151; background: #f6f5f0; }
[hidden] { display: none !important; }
.btn-text[aria-disabled="true"] { opacity: .45; cursor: default; }
[data-action="next"] { margin-left: 1.2rem; }
@media (max-width:900px) { .footer-actions { flex-wrap: wrap; gap: 1rem; } [data-action="next"] { margin-left: 0; } }
@media (prefers-reduced-motion:reduce) {
    .preloader-text { animation: none; opacity: .8; }
    .scene-container,#preloader { transition-duration: .01ms; transition-delay: 0s; }
    .scene-loaded .subtitle,.scene-complete .floating-element,.scene-complete .title-block h1,.scene-complete .title-block p { animation-duration: .01ms; animation-delay: 0s; }
    .water-ripples { display: none; }
}

@media (prefers-reduced-motion:reduce) { [data-water-end] { transition-duration: .01ms; transition-delay: 0s; } }

/* Le lien de révélation devient le lien suivant ; sa place dans le DOM ne change pas. */
.btn-text.is-next-scene { display: inline-flex; align-items: center; justify-content: center; background: #090909; color: #fff; border: 1px solid #090909; border-radius: 999px; padding: .9rem 1.35rem; text-decoration: none; transition: background .25s, color .25s; }
.btn-text.is-next-scene:hover { background: #283e34; border-color: #283e34; }
.btn-text.is-next-scene:focus-visible { outline: 2px solid #517b67; outline-offset: 4px; }
.footer-actions { align-items: center; }
@media (prefers-reduced-motion:reduce) {
    .scene-complete .title-block blockquote, .scene-complete .title-block cite { animation-duration: .01ms; animation-delay: 0s; }
}

/* Boutons de l’en-tête : style explicite, y compris sans classe btn-outline. */
.ui-header .controls button {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    color: var(--text-color, #333);
    border: 1px solid rgba(0,0,0,.3);
    border-radius: 999px;
    padding: .5rem 1.2rem;
    margin-left: .5rem;
    font: .8rem var(--ui-font, Arial, sans-serif);
    cursor: pointer;
}
.ui-header .controls button:hover { background: rgba(0,0,0,.05); }


@media (max-width: 900px) {
    .footer-actions {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }

    .footer-actions .btn-text {
        white-space: nowrap;
        font-size: clamp(.55rem, 2.2vw, .7rem);
        letter-spacing: .5px;
    }

    .footer-actions .btn-sound {
        flex-shrink: 0;
        margin: 0;
    }

    .footer-actions .is-next-scene {
        padding: .75rem .9rem;
    }
}