/* ============================= */
/* RESET GLOBAL */
/* ============================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #050521;
}

body {
    min-height: 100dvh;
}

/* ============================= */
/* STRUCTURE GÉNÉRALE */
/* ============================= */

.page {
    width: 100vw;
    height: 100dvh;

    display: flex;
    justify-content: center;
    align-items: center;

    overflow: hidden;
}

.image-wrapper {
    position: relative;

    width: min(100vw, calc(100dvh * 9 / 16));
    height: min(100dvh, calc(100vw * 16 / 9));

    aspect-ratio: 9 / 16;

    overflow: hidden;
}

@media (orientation: landscape) {

    .image-wrapper {
        width: min(100vw, calc(100dvh * 16 / 9));
        height: min(100dvh, calc(100vw * 9 / 16));

        aspect-ratio: 16 / 9;
    }
}

/* ============================= */
/* IMAGES DE FOND */
/* ============================= */

.fond {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    display: block;

    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}

.fond-landscape {
    display: block;
}

.fond-portrait {
    display: none;
}

/* ============================= */
/* ZONES CLIQUABLES */
/* ============================= */

.zones {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;

    z-index: 5000;

    pointer-events: none;
}

.zones .zone {
    pointer-events: auto;
}

.zones.landscape {
    display: block;
}

.zones.portrait {
    display: none;
}

.zone {
    position: absolute;
    display: block;
    background: transparent;
}

.zone:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* ============================= */
/* LIENS SECONDAIRES */
/* ============================= */

.lien-secondaire {
    display: flex;
    align-items: center;
    justify-content: center;

    text-decoration: none;
    color: #fff8d8;
    font-family: Arial, sans-serif;
    font-size: 0.9rem;

    background: rgba(5, 5, 33, 0.65);
    border: 1px solid rgba(255, 248, 216, 0.45);
    border-radius: 999px;

    padding: 0.3rem 0.7rem;

    backdrop-filter: blur(3px);
    white-space: nowrap;
}

/* ============================= */
/* ACCUEIL — ZONES LANDSCAPE */
/* ============================= */

.landscape .histoires {
    top: 38%;
    left: 14%;
    width: 28%;
    height: 9%;
    border-radius: 30px;
}

.landscape .chansons {
    top: 55%;
    left: 19%;
    width: 27%;
    height: 9%;
    border-radius: 30px;
}

.landscape .jeux {
    top: 72%;
    left: 26%;
    width: 28%;
    height: 9%;
    border-radius: 30px;
}

.landscape .surprises {
    top: 82%;
    left: 68%;
    width: 20%;
    height: 7%;
    border-radius: 30px;
}

.landscape .albums {
    top: 2%;
    left: 55%;
    width: 14%;
    height: 5%;
}

.landscape .parents {
    top: 2%;
    left: 70%;
    width: 14%;
    height: 5%;
}

.landscape .contact {
    top: 2%;
    left: 85%;
    width: 14%;
    height: 5%;
}

/* ============================= */
/* ACCUEIL — ZONES PORTRAIT */
/* ============================= */

.portrait .histoires {
    top: 47%;
    left: 23%;
    width: 58%;
    height: 6%;
}

.portrait .chansons {
    top: 57%;
    left: 23%;
    width: 58%;
    height: 6%;
}

.portrait .jeux {
    top: 67%;
    left: 23%;
    width: 58%;
    height: 6%;
}

.portrait .surprises {
    top: 86%;
    left: 34%;
    width: 40%;
    height: 6%;
}

.portrait .albums {
    top: 2%;
    left: 40%;
    width: 24%;
    height: 4.5%;
    font-size: 0.7rem;
}

.portrait .parents {
    top: 2%;
    left: 6%;
    width: 26%;
    height: 4.5%;
    font-size: 0.7rem;
}

.portrait .contact {
    top: 2%;
    right: 6%;
    width: 24%;
    height: 4.5%;
    font-size: 0.7rem;
}

/* ============================= */
/* PORTRAIT GLOBAL */
/* ============================= */

@media (orientation: portrait) {

    .image-wrapper {
        width: min(100vw, calc(100dvh * 9 / 16));
        height: min(100dvh, calc(100vw * 16 / 9));

        aspect-ratio: 9 / 16;
    }

    .fond-landscape {
        display: none;
    }

    .fond-portrait {
        display: block;
    }

    .zones.landscape {
        display: none;
    }

    .zones.portrait {
        display: block;
    }
}

/* ============================= */
/* BOUTONS RETOUR / ACCUEIL */
/* ============================= */

.landscape .retour-accueil {
    top: 2.2%;
    left: 84%;
    width: 14%;
    height: 8%;
    border-radius: 20px;
}

.portrait .retour-accueil {
    top: 1.3%;
    left: 76%;
    width: 21%;
    height: 4.5%;
    border-radius: 15px;
}

.landscape .retour-fleche {
    top: 2%;
    left: 1.5%;
    width: 5%;
    height: 8%;
    border-radius: 999px;
}

.portrait .retour-fleche {
    top: 1.5%;
    left: 2%;
    width: 8%;
    height: 4%;
    border-radius: 999px;
}

/* ============================= */
/* MENTIONS LÉGALES */
/* ============================= */

.legal-auto {
    position: fixed;
    left: 12px;
    bottom: 10px;
    z-index: 9999;

    font-family: Arial, sans-serif;
    font-size: 0.72rem;
    color: rgba(255, 248, 216, 0.65);
    text-decoration: none;

    background: rgba(5, 5, 33, 0.25);
    padding: 3px 6px;
    border-radius: 6px;
}

.legal-auto:hover {
    color: #ffffff;
    text-decoration: underline;
}

/* ============================= */
/* PLAY OVERLAY */
/* ============================= */

.play-overlay {
    position: absolute;
    width: min(600px, 70vw);
    height: min(600px, 70vw);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 50;

    display: flex;
    align-items: center;
    justify-content: center;

    transition: opacity 0.5s ease;

    pointer-events: none;
}

.play-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

.play-button {
    pointer-events: auto;

    width: 120px;
    height: 120px;

    border: none;
    border-radius: 50%;

    background: radial-gradient(circle, #d9a7ff, #8d3dd8);
    cursor: pointer;

    box-shadow: 0 0 30px rgba(199, 125, 255, 0.7);

    animation: pulse 2s infinite;
    position: relative;
}

.play-button::before {
    content: "";
    position: absolute;
    left: 48%;
    top: 50%;
    transform: translate(-40%, -50%);

    border-left: 34px solid white;
    border-top: 21px solid transparent;
    border-bottom: 21px solid transparent;
}

.play-button.tap-feedback {
    animation: tapFlash 0.25s ease;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.08); }
    100% { transform: scale(1); }
}

@keyframes tapFlash {
    0% { transform: scale(1); }
    50% { transform: scale(1.08); }
    100% { transform: scale(1); }
}

/* ============================= */
/* PLAY BUTTON — HISTOIRES */
/* ============================= */

.page-histoire .play-button {

    background:
        radial-gradient(
            circle,
            #9fe7ff,
            #0d1a7c
        );

    box-shadow:
        0 0 30px rgba(80, 170, 255, 0.75);

}

/* ============================= */
/* AJUSTEMENT PLAY — LANDSCAPE */
/* ============================= */

@media (orientation: landscape) {

    .page-histoire .play-overlay {

        left: 57%;
        top: 48%;

    }

}

/* ============================= */
/* ECRAN BRAVO */
/* ============================= */

.bravo-screen {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    opacity: 0;
    pointer-events: none;

    z-index: 45;

    overflow: hidden;

    transition: opacity 0.4s ease;
}

.bravo-screen.visible {
    opacity: 1;
}

/* ============================= */
/* PLUIE D'ÉTOILES BRAVO */
/* ============================= */

.bravo-stars {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    pointer-events: none;
    overflow: hidden;

    z-index: 80;
}

.bravo-stars::before,
.bravo-stars::after {
    content:
    "✦                          ✨                                   ✧                              ✦\A"
    "                 ✧                               ✦\A"
    "      ✨                                      ✦                         ✧\A"
    "                             ✧\A"
    "✦                                               ✨\A"
    "                             ✧                           ✦                         ✨\A"
    "          ✦\A"
    "                                  ✨                              ✧\A"
    "✧                                                      ✦\A"
    "                     ✨\A"
    "                                   ✦                              ✧\A"
    "      ✧                                              ✨\A"
    "                            ✦\A"
    "✨                                                       ✧\A"
    "                ✦                        ✨\A"
    "                                           ✧\A"
    "   ✨                                 ✦                                ✧\A"
    "                          ✦\A"
    "✧                                      ✨                         ✦";

    position: absolute;
    left: 0;
    top: -100%;

    width: 100%;
    height: 200%;

    white-space: pre;
    text-align: center;

    font-size: clamp(1.2rem, 3vw, 2.8rem);
    line-height: 14vh;
    letter-spacing: 0;

    color: rgba(255, 245, 180, 0.95);

    text-shadow:
        0 0 8px rgba(255, 255, 255, 0.95),
        0 0 18px rgba(255, 220, 120, 0.9),
        0 0 30px rgba(180, 120, 255, 0.8);

    animation:
        bravo-stars-fall 7s linear infinite,
        bravo-stars-twinkle 0.9s ease-in-out infinite alternate;
}

.bravo-stars::after {
    top: -140%;
    opacity: 0.75;
    transform: scale(0.75);
    animation-delay: 3.5s, 0.4s;
}

@keyframes bravo-stars-fall {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(120%);
    }
}

@keyframes bravo-stars-twinkle {
    from {
        opacity: 0.35;
        filter: brightness(0.8);
    }

    to {
        opacity: 1;
        filter: brightness(1.4);
    }
}

/* ============================= */
/* TEXTES EN CALQUE — GÉNÉRIQUE */
/* ============================= */

.texte-calque {
    position: absolute;
    z-index: 35;

    color: #fff8ea;
    text-align: center;

    font-family: Georgia, "Times New Roman", serif;

    text-shadow:
        0 2px 6px rgba(0,0,0,0.95),
        0 0 18px rgba(0,0,0,0.85),
        0 0 28px rgba(0,0,0,0.55);

    line-height: 1.42;
}

/* voile très léger derrière le texte */

.texte-calque::before{
    content:"";

    position:absolute;
    inset:-4% -6%;

    z-index:-1;

    background:
        radial-gradient(
            ellipse at center,
            rgba(0,0,0,0.42) 0%,
            rgba(0,0,0,0.22) 45%,
            rgba(0,0,0,0.00) 78%
        );

    filter: blur(12px);
}

/* paragraphes */

.texte-calque p{
    margin:0 0 1.25rem;
}

.texte-calque p:last-child{
    margin-bottom:0;
}

/* phrase finale */

.texte-calque .phrase-finale{
    color:#efb7ff;
    font-weight:bold;
}

/* signature */

.texte-calque .signature{
    margin-top:1.4rem;

    color:#ffd976;

    font-style:italic;
}

/* ============================= */
/* PAGE PARENTS */
/* ============================= */

.texte-parents{

    left:50%;
    top:55%;

    transform:translate(-50%, -50%);

    width:min(74vw, 1080px);

    font-size:clamp(1.08rem, 1.45vw, 1.6rem);

    padding:0;
}

/* ============================= */
/* PORTRAIT */
/* ============================= */

@media (orientation: portrait){

    .texte-parents{

        top:53%;

        width:84vw;

        font-size:clamp(1rem, 3vw, 1.32rem);

        line-height:1.36;
    }

    .texte-calque::before{

        inset:-8% -10%;

        filter:blur(18px);
    }

}

/* ============================= */
/* ALBUMS AMAZON */
/* ============================= */

.landscape .albums-amazon{

    top: 36%;
    left: 19%;

    width: 68%;
    height: 50%;

    border-radius: 28px;
}

.portrait .albums-amazon{

    top: 28%;
    left: 11%;

    width: 78%;
    height: 62%;

    border-radius: 24px;
}

/* ============================= */
/* BOUTON INSTALLATION SMARTPHONE */
/* ============================= */

.bouton-installation {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-top: 1.8rem;
    padding: 0.95rem 1.6rem;

    border-radius: 999px;

    text-decoration: none;

    color: #fffdf5;

    font-family: Arial, sans-serif;
    font-weight: bold;

    font-size: clamp(0.95rem, 1.1vw, 1.15rem);

    background:
        linear-gradient(
            180deg,
            rgba(194, 120, 255, 0.96),
            rgba(110, 55, 210, 0.96)
        );

    box-shadow:
        0 0 18px rgba(196, 120, 255, 0.55),
        0 0 34px rgba(120, 80, 255, 0.35);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        filter 0.2s ease;
}

.bouton-installation:hover {
    transform: scale(1.03);

    filter: brightness(1.08);

    box-shadow:
        0 0 24px rgba(220, 150, 255, 0.8),
        0 0 42px rgba(130, 90, 255, 0.5);
}

.bouton-installation:active {
    transform: scale(0.98);
}

@media (orientation: portrait) {

    .bouton-installation {
        width: 100%;

        margin-top: 1.4rem;
        padding: 1rem 1.2rem;

        font-size: clamp(0.95rem, 3vw, 1.08rem);
    }

}

/* ============================= */
/* PAGE DOCUMENT */
/* ============================= */

.page-document .image-wrapper {
    position: relative;
}

/* ============================= */
/* ZONE SCROLLABLE */
/* ============================= */

.document-scroll {

    position: absolute;

    left: 49%;
    top: 54%;

    transform: translate(-50%, -50%);

    width: min(66vw, 1080px);
    height: 65%;

    overflow-y: auto;
    overflow-x: hidden;

    z-index: 35;

    border-radius: 28px;

    padding: 2.2rem 2.4rem;

    scrollbar-width: thin;
    scrollbar-color:
        rgba(255,255,255,0.35)
        rgba(255,255,255,0.08);

    background:
        radial-gradient(
            ellipse at center,
            rgba(0,0,0,0.34) 0%,
            rgba(0,0,0,0.18) 55%,
            rgba(0,0,0,0.04) 100%
        );

    backdrop-filter: blur(2px);

    box-shadow:
        inset 0 0 30px rgba(255,255,255,0.04),
        0 0 40px rgba(0,0,0,0.35);
}

/* ============================= */
/* SCROLLBAR WEBKIT */
/* ============================= */

.document-scroll::-webkit-scrollbar {
    width: 10px;
}

.document-scroll::-webkit-scrollbar-track {

    background:
        rgba(255,255,255,0.08);

    border-radius: 999px;
}

.document-scroll::-webkit-scrollbar-thumb {

    background:
        rgba(255,255,255,0.35);

    border-radius: 999px;
}

/* ============================= */
/* CONTENU DOCUMENT */
/* ============================= */

.document-contenu {

    color: #fff8ea;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    text-shadow:
        0 2px 6px rgba(0,0,0,0.95),
        0 0 18px rgba(0,0,0,0.75);

    line-height: 1.6;

    font-size:
        clamp(1.05rem, 1.15vw, 1.28rem);
}

/* ============================= */
/* TITRE PRINCIPAL */
/* ============================= */

.document-contenu h1 {

    margin-bottom: 1.8rem;

    text-align: center;

    color: #ffd976;

    font-size:
        clamp(1.8rem, 2.4vw, 3rem);

    line-height: 1.15;

    text-shadow:
        0 2px 10px rgba(0,0,0,0.95),
        0 0 22px rgba(255,215,120,0.35);
}

/* ============================= */
/* SOUS-TITRES */
/* ============================= */

.document-contenu h2 {

    margin-top: 2rem;
    margin-bottom: 1rem;

    color: #efb7ff;

    font-size:
        clamp(1.25rem, 1.5vw, 1.8rem);
}

/* ============================= */
/* PARAGRAPHES */
/* ============================= */

.document-contenu p {

    margin-bottom: 1.2rem;
}

/* ============================= */
/* LISTES */
/* ============================= */

.document-contenu ol {

    padding-left: 1.5rem;

    margin-bottom: 1.5rem;
}

.document-contenu li {

    margin-bottom: 0.75rem;
}

/* ============================= */
/* TEXTE IMPORTANT */
/* ============================= */

.document-contenu strong {

    color: #ffe7a8;
}

/* ============================= */
/* PORTRAIT */
/* ============================= */

@media (orientation: portrait) {

    .document-scroll {

        top: 50%;

        width: 65vw;
        height: 70%;

        padding:
            1.4rem
            1.2rem
            1.8rem;

        border-radius: 24px;
    }

    .document-contenu {

        font-size:
            clamp(1rem, 3.2vw, 1.18rem);

        line-height: 1.5;
    }

    .document-contenu h1 {

        font-size:
            clamp(1.7rem, 6vw, 2.5rem);
    }

    .document-contenu h2 {

        font-size:
            clamp(1.2rem, 4.5vw, 1.6rem);
    }

}

/* ============================= */
/* PAGE CONTACT */
/* ============================= */

.page-contact .contact-mail {
    z-index: 40;
    border-radius: 999px;

    cursor: pointer;
    pointer-events: auto;
}

.page-contact .contact-bouton-animation {
    position: absolute;
    pointer-events: none;
    z-index: 15;
    border-radius: 999px;

    animation:
        contact-bouton-respire 2.8s ease-in-out infinite,
        contact-bouton-lueur 2.2s ease-in-out infinite;
}

/* Zone cliquable + halo — paysage
   IMPORTANT :
   contact-mail est placé directement dans .image-wrapper,
   pas dans .zones.landscape / .zones.portrait.
*/

.page-contact .contact-mail,
.page-contact .contact-bouton-animation {
    left: 20%;
    top: 50%;
    width: 57%;
    height: 23%;
}

/* Zone cliquable + halo — portrait */

@media (orientation: portrait) {

    .page-contact .contact-mail,
    .page-contact .contact-bouton-animation {
        left: 16%;
        top: 37%;
        width: 68%;
        height: 14%;
    }

}

@keyframes contact-bouton-respire {

    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.025);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes contact-bouton-lueur {

    0% {
        box-shadow:
            0 0 10px rgba(255, 220, 120, 0.32),
            0 0 26px rgba(255, 180, 60, 0.18);
    }

    50% {
        box-shadow:
            0 0 26px rgba(255, 245, 170, 0.82),
            0 0 58px rgba(255, 190, 80, 0.48),
            0 0 92px rgba(190, 120, 255, 0.28);
    }

    100% {
        box-shadow:
            0 0 10px rgba(255, 220, 120, 0.32),
            0 0 26px rgba(255, 180, 60, 0.18);
    }
}

/* ===============================
   Rêvolin d'Or — étoile magique
   =============================== */

.revolin-or-etoile {
    position: fixed;
    z-index: 9999;

    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;

    background: radial-gradient(circle, #fff7b8 0%, #ffd447 45%, #b87900 100%);
    color: white;

    font-size: 30px;
    line-height: 44px;
    text-align: center;

    cursor: pointer;

    box-shadow:
        0 0 10px rgba(255, 230, 120, 0.9),
        0 0 24px rgba(255, 190, 40, 0.75),
        0 0 42px rgba(255, 220, 90, 0.45);

    transform: translate(-50%, -50%) scale(1);
    animation: revolinOrPulse 2.4s ease-in-out infinite;
}

.revolin-or-etoile::after {
    content: "";
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    border: 1px solid rgba(255, 230, 120, 0.45);
    animation: revolinOrHalo 2.4s ease-in-out infinite;
}

.revolin-or-etoile.revolin-or-active {
    animation: revolinOrTrouve 0.8s ease-out forwards;
}

@keyframes revolinOrPulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.9;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.18);
        opacity: 1;
    }
}

@keyframes revolinOrHalo {
    0%, 100% {
        opacity: 0.35;
        transform: scale(0.9);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.18);
    }
}

@keyframes revolinOrTrouve {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(2.6);
        opacity: 0;
    }
}
/* ===============================
   Rêvolin d'Or — overlay apparition
   =============================== */

.revolin-or-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(0, 0, 0, 0.72);

    opacity: 0;
    pointer-events: none;

    transition: opacity 0.8s ease;
}

.revolin-or-overlay.visible {
    opacity: 1;
    pointer-events: auto;
}

.revolin-or-overlay.disparition {
    opacity: 0;
}

.revolin-or-scene {
    position: relative;

    width: min(92vw, 760px);
    height: min(92vh, 760px);

    display: flex;
    align-items: center;
    justify-content: center;

    animation: revolinOrSceneApparition 0.9s ease-out both;
}

.revolin-or-image {
    max-width: 100%;
    max-height: 100%;

    object-fit: contain;

    filter:
        drop-shadow(0 0 18px rgba(255, 220, 90, 0.75))
        drop-shadow(0 0 42px rgba(255, 180, 60, 0.45));

    user-select: none;
    -webkit-user-drag: none;

    animation: revolinOrFlottement 4.8s ease-in-out infinite;
}

.revolin-or-coeur.attente-toucher {
    cursor: pointer;
    animation:
        revolinOrFlottement 4.8s ease-in-out infinite,
        revolinOrCoeurPulse 1.8s ease-in-out infinite;
}

.revolin-or-poeme {
    width: min(92vw, 760px);
    max-height: 92vh;

    filter:
        drop-shadow(0 0 22px rgba(255, 230, 140, 0.85))
        drop-shadow(0 0 46px rgba(170, 120, 255, 0.45));

    animation:
        revolinOrPoemeApparition 1.2s ease-out both,
        revolinOrFlottementPoeme 7s ease-in-out infinite;
}

.revolin-or-scene.transition-poeme {
    animation: revolinOrFlashPoeme 0.7s ease-in-out both;
}

/* ===============================
   Rêvolin d'Or — étoiles douces du poème
   =============================== */

.revolin-or-scene.mode-poeme::before {
    content:
        "✦        ✧              ✨\A"
        "      ✧             ✦\A"
        "✨             ✧          ✦\A"
        "         ✦          ✨\A"
        "   ✧              ✦       ✧\A"
                "✦        ✧              ✨\A"
        "      ✧             ✦\A"
        "✨             ✧          ✦\A"
        "         ✦          ✨\A"
        "   ✧              ✦       ✧";

    position: absolute;
    inset: 0;

    pointer-events: none;

    white-space: pre;
    text-align: center;

    font-size: clamp(1rem, 2.4vw, 2rem);
    line-height: 18vh;

    color: rgba(255, 240, 180, 0.42);

    text-shadow:
        0 0 8px rgba(255, 255, 255, 0.65),
        0 0 18px rgba(255, 220, 120, 0.45),
        0 0 30px rgba(170, 120, 255, 0.30);

    opacity: 0;

    z-index: 6;

    animation:
        revolinOrPoemeEtoiles 5.5s ease-in-out infinite;
}

.revolin-or-scene.mode-poeme .revolin-or-poeme {
    position: relative;
    z-index: 3;
}

@keyframes revolinOrPoemeEtoiles {
    0% {
        opacity: 0;
        transform: translateY(10px) scale(0.96);
        filter: blur(2px);
    }

    25% {
        opacity: 0.45;
    }

    55% {
        opacity: 0.22;
        transform: translateY(-8px) scale(1.02);
        filter: blur(0);
    }

    80% {
        opacity: 0.68;
    }

    100% {
        opacity: 0;
        transform: translateY(-18px) scale(1.06);
        filter: blur(3px);
    }
}

@keyframes revolinOrSceneApparition {
    from {
        opacity: 0;
        transform: scale(0.86);
        filter: blur(8px);
    }

    to {
        opacity: 1;
        transform: scale(1);
        filter: blur(0);
    }
}

@keyframes revolinOrFlottement {
    0%, 100% {
        transform: translateY(0) scale(1);
        filter:
            drop-shadow(0 0 18px rgba(255, 220, 90, 0.75))
            drop-shadow(0 0 42px rgba(255, 180, 60, 0.45));
    }

    50% {
        transform: translateY(-10px) scale(1.018);
        filter:
            drop-shadow(0 0 26px rgba(255, 245, 170, 0.95))
            drop-shadow(0 0 58px rgba(255, 190, 70, 0.65));
    }
}

@keyframes revolinOrCoeurPulse {
    0%, 100% {
        transform: scale(1);
        filter:
            drop-shadow(0 0 18px rgba(255, 220, 90, 0.75))
            drop-shadow(0 0 42px rgba(255, 180, 60, 0.45));
    }

    50% {
        transform: scale(1.035);
        filter:
            drop-shadow(0 0 26px rgba(255, 245, 170, 1))
            drop-shadow(0 0 62px rgba(255, 200, 80, 0.8));
    }
}

@keyframes revolinOrPoemeApparition {
    from {
        opacity: 0;
        transform: scale(0.94);
        filter: blur(10px);
    }

    to {
        opacity: 1;
        transform: scale(1);
        filter:
            drop-shadow(0 0 22px rgba(255, 230, 140, 0.85))
            drop-shadow(0 0 46px rgba(170, 120, 255, 0.45));
    }
}

@keyframes revolinOrFlottementPoeme {
    0%, 100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-6px) scale(1.01);
    }
}

@keyframes revolinOrFlashPoeme {
    0% {
        filter: brightness(1);
    }

    50% {
        filter: brightness(1.8);
    }

    100% {
        filter: brightness(1);
    }
}

@media (orientation: portrait) {
    .revolin-or-scene {
        width: 96vw;
        height: 88vh;
    }

    .revolin-or-poeme {
        width: 96vw;
        max-height: 88vh;
    }
}
/* ===============================
   Rêvolin d'Or — bouton fermeture
   =============================== */

.revolin-or-fermer {
    position: fixed;

    top: max(14px, calc(50vh - min(46vh, 380px) + 14px));
    right: max(14px, calc(50vw - min(46vw, 380px) + 14px));

    width: 42px;
    height: 42px;

    border: none;
    border-radius: 50%;

    background: rgba(20, 20, 40, 0.72);
    color: #fff4c8;

    font-size: 26px;
    line-height: 42px;
    text-align: center;

    cursor: pointer;
    z-index: 10020;

    backdrop-filter: blur(4px);

    box-shadow: 0 0 12px rgba(255, 220, 120, 0.35);

    transition:
        transform 0.18s ease,
        background 0.18s ease,
        box-shadow 0.18s ease;
}

.revolin-or-fermer:hover {
    transform: scale(1.08);

    background:
        rgba(40, 40, 70, 0.92);

    box-shadow:
        0 0 18px rgba(255, 235, 170, 0.75);
}

.revolin-or-fermer:active {
    transform: scale(0.96);
}

@media (orientation: portrait) {

    .revolin-or-fermer {
        top: 10px;
        right: 10px;

        width: 46px;
        height: 46px;

        font-size: 28px;
        line-height: 46px;
    }

}
/* ===============================
   Rêvolin d'Or — recommencer les rencontres
   =============================== */

.recommencer-revolin-or {
    position: fixed;
    right: 12px;
    bottom: 12px;
    z-index: 99999;

    border: 1px solid rgba(255, 230, 150, 0.28);
    border-radius: 999px;

    padding: 7px 12px;

    background: rgba(8, 8, 32, 0.56);
    color: rgba(255, 245, 210, 0.78);

    font-family: Arial, sans-serif;
    font-size: 12px;

    cursor: pointer;

    backdrop-filter: blur(4px);

    box-shadow:
        0 0 10px rgba(255, 220, 120, 0.16);

    opacity: 0.55;

    transition:
        opacity 0.2s ease,
        transform 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}

.recommencer-revolin-or:hover {
    opacity: 1;
    transform: scale(1.035);

    background: rgba(20, 20, 50, 0.86);

    box-shadow:
        0 0 16px rgba(255, 225, 140, 0.36);
}

.recommencer-revolin-or.confirme {
    opacity: 1;
    color: #fff4c8;

    box-shadow:
        0 0 18px rgba(255, 230, 130, 0.55);
}

/* ===============================
   Rêvolin d'Or — disparition magique
   =============================== */

.revolin-or-fadeout {
    opacity: 0 !important;

    transition:
        opacity 2.5s ease;
}

.revolin-or-disparition-magique {
    position: relative;
    overflow: visible;
}

.revolin-or-disparition-magique::after {

    content: "";

    position: absolute;
    inset: -10%;

    pointer-events: none;

    background:
        radial-gradient(circle, rgba(255,255,255,0.95) 0%, transparent 12%),
        radial-gradient(circle, rgba(255,240,180,0.9) 0%, transparent 10%),
        radial-gradient(circle, rgba(255,220,120,0.8) 0%, transparent 8%);

    background-size:
        120px 120px,
        160px 160px,
        220px 220px;

    animation:
        revolinOrEtoilesDisparition 1.6s ease-out forwards;

    opacity: 0;
}

@keyframes revolinOrEtoilesDisparition {

    0% {
        opacity: 0;
        transform: scale(0.9);
        filter: blur(2px);
    }

    20% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: scale(1.35);
        filter: blur(10px);
    }
}

/* ===============================
   Rêvolin d'Or — mini statut page
   =============================== */

.revolin-or-statut-page {
    position: absolute;

    top: 13%;
    right: 3%;

    z-index: 9000;

    width: 15%;
    max-width: 100px;
    min-width: 105px;

    padding: 7px 8px;

    text-align: center;
    font-family: Arial, sans-serif;

    color: #fff6c8;

    background:
        radial-gradient(
            ellipse at center,
            rgba(255, 220, 110, 0.16),
            rgba(15, 10, 45, 0.72)
        );

    border: 0px solid rgba(255, 230, 150, 0.34);
    border-radius: 16px;

    box-shadow:
        0 0 8px rgba(255, 220, 120, 0.18),
        0 0 18px rgba(150, 90, 255, 0.12);

    backdrop-filter: blur(4px);

    pointer-events: none;
}

.revolin-or-statut-page .revolin-or-etoiles-niveau {
    font-size: clamp(0.7rem, 1.1vw, 0.95rem);
    line-height: 1;
    letter-spacing: 1px;
    color: #ffd85a;

    text-shadow:
        0 0 4px rgba(255,255,255,0.65),
        0 0 8px rgba(255,220,90,0.45);
}

.revolin-or-statut-page .revolin-or-niveau-texte {
    margin-top: 3px;
    font-size: clamp(0.48rem, 0.7vw, 0.62rem);
    line-height: 1.2;
    font-weight: bold;
    color: rgba(255,248,220,0.88);
}

.revolin-or-statut-page .revolin-or-badge {
    margin-top: 5px;
    padding-top: 5px;
    border-top: 1px solid rgba(255,230,150,0.18);

    font-size: clamp(0.48rem, 0.7vw, 0.62rem);
    line-height: 1.2;
    font-weight: bold;

    color: #fff8dd;

    text-shadow:
        0 0 5px rgba(255,255,255,0.35),
        0 0 10px rgba(255,220,120,0.18);
}

@media (orientation: portrait) {

    .revolin-or-statut-page {
        top: 8%;
        right: 2%;

        width: 28%;
        max-width: 100px;
        min-width: 96px;

        padding: 6px 7px;
        border-radius: 14px;
    }

    .revolin-or-statut-page .revolin-or-etoiles-niveau {
        font-size: clamp(0.62rem, 2.5vw, 0.85rem);
    }

    .revolin-or-statut-page .revolin-or-niveau-texte,
    .revolin-or-statut-page .revolin-or-badge {
        font-size: clamp(0.46rem, 1.9vw, 0.58rem);
    }
}

/* ==========================
   DEBUG — accès maintenance
========================== */

.debug-link{

position:fixed;

top:10px;

right:10px;

z-index:99999;

width:18px;
height:18px;

display:flex;

align-items:center;
justify-content:center;

text-decoration:none;

font-size:11px;

color:
rgba(
255,
240,
160,
0.45
);

background:
rgba(
0,
0,
0,
0.12
);

border-radius:50%;

backdrop-filter:
blur(4px);

transition:
all
.25s;

user-select:none;

opacity:.22;

}

.debug-link:hover{

opacity:.9;

transform:
scale(
1.15
);

}

.debug-link:active{

transform:
scale(
0.92
);

}