/* ===================================
🔮 ARCHIVISTE HELSING V5.2
=================================== */

#archiviste-bouton {
    position: fixed;
    right: 25px;
    bottom: 90px;
    cursor: pointer;
    z-index: 9999;
    text-align: center;
    user-select: none;
}

/* ===================================
🔮 CRISTAL
=================================== */

.cristal {
    font-size: 58px;
    line-height: 1;
    animation: lumiereCristal 2.4s infinite ease-in-out;
    filter:
        drop-shadow(0 0 10px #7b00ff)
        drop-shadow(0 0 22px #9b5cff);
    transition: transform .3s ease;
}

#archiviste-bouton:hover .cristal {
    transform: scale(1.18);
    filter:
        drop-shadow(0 0 15px #c78cff)
        drop-shadow(0 0 35px #9b5cff)
        drop-shadow(0 0 55px #7b00ff);
}

/* ===================================
📜 NOM DE L'ARCHIVISTE
=================================== */

.titre-archiviste {
    font-size: 14px;
    color: #e2c6ff;
    font-family: "Times New Roman", serif;
    text-shadow:
        0 0 8px #7b00ff,
        0 0 15px #9b5cff;
    margin-top: 6px;
    transition: .3s;
}

#archiviste-bouton:hover .titre-archiviste {
    color: #ffffff;
}

/* ===================================
✨ ANIMATION DU CRISTAL
=================================== */

@keyframes lumiereCristal {

    0% {
        transform: scale(1);
        filter:
            drop-shadow(0 0 8px #7b00ff)
            drop-shadow(0 0 15px #9b5cff);
    }

    50% {
        transform: scale(1.12);
        filter:
            drop-shadow(0 0 15px #9b5cff)
            drop-shadow(0 0 30px #d8aaff)
            drop-shadow(0 0 45px #7b00ff);
    }

    100% {
        transform: scale(1);
        filter:
            drop-shadow(0 0 8px #7b00ff)
            drop-shadow(0 0 15px #9b5cff);
    }

}

/* ===================================
📜 FENÊTRE DES ARCHIVES
=================================== */

#archiviste-fenetre {
    display: none;

    position: fixed;

    right: 25px;
    bottom: 180px;

    width: 350px;
    max-width: calc(100vw - 50px);

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(123,0,255,.16),
            transparent 45%
        ),
        linear-gradient(
            145deg,
            rgba(5,5,8,.98),
            rgba(20,12,32,.98)
        );

    color: white;

    border: 2px solid #c9a227;
    border-radius: 20px;

    padding: 20px;

    z-index: 9999;

    box-shadow:
        0 0 15px rgba(155,92,255,.8),
        0 0 35px rgba(123,0,255,.45),
        inset 0 0 25px rgba(155,92,255,.08);

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

    animation: apparitionArchiviste .35s ease-out;
}

/* ===================================
✨ APPARITION
=================================== */

@keyframes apparitionArchiviste {

    from {
        opacity: 0;
        transform: translateY(15px) scale(.95);
    }

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

}

/* ===================================
🔮 TITRE
=================================== */

#archiviste-fenetre h3 {

    margin-top: 0;
    margin-bottom: 12px;

    text-align: center;

    color: #ffd86b;

    font-size: 25px;

    text-shadow:
        0 0 8px #ffd86b,
        0 0 18px #9b5cff;

}

/* ===================================
✨ MESSAGE D'ACCUEIL
=================================== */

.message-accueil {

    text-align: center;

    color: #dfc4ff;

    margin-bottom: 15px;

    font-size: 16px;

    text-shadow:
        0 0 8px #7b00ff;

}

/* ===================================
📜 ZONE DE DISCUSSION
=================================== */

#discussion {

    max-height: 260px;

    overflow-y: auto;

    padding: 8px;

    margin-bottom: 12px;

    line-height: 1.55;

    text-align: left;

    background:
        rgba(0,0,0,.25);

    border-radius: 12px;

    scrollbar-width: thin;

    scrollbar-color:
        #9b5cff #111;

}

/* Barre de défilement Chrome */

#discussion::-webkit-scrollbar {
    width: 7px;
}

#discussion::-webkit-scrollbar-track {
    background: #111;
    border-radius: 10px;
}

#discussion::-webkit-scrollbar-thumb {
    background: #7b00ff;
    border-radius: 10px;
}

/* ===================================
💬 MESSAGES
=================================== */

#discussion p {

    margin: 8px 3px;

}

#discussion p b {

    color: #ffd86b;

}

/* ===================================
⌨️ CHAMP DE QUESTION
=================================== */

#question {

    box-sizing: border-box;

    width: 100%;

    padding: 11px 12px;

    border-radius: 10px;

    border: 1px solid #c9a227;

    outline: none;

    background:
        rgba(5,5,5,.95);

    color: white;

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

    font-size: 15px;

    box-shadow:
        inset 0 0 10px rgba(0,0,0,.8);

}

#question::placeholder {

    color: #aaa;

}

#question:focus {

    border-color: #d8aaff;

    box-shadow:
        0 0 12px rgba(155,92,255,.7),
        inset 0 0 10px rgba(0,0,0,.8);

}

/* ===================================
📜 BOUTON ENVOYER
=================================== */

#archiviste-fenetre button {

    display: block;

    margin: 12px auto 0;

    padding: 10px 22px;

    background:
        linear-gradient(
            180deg,
            #18121f,
            #0b090e
        );

    color: #ffd86b;

    border:
        1px solid #c9a227;

    border-radius: 10px;

    cursor: pointer;

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

    font-size: 16px;

    transition: .25s;

}

#archiviste-fenetre button:hover {

    background: #332400;

    color: white;

    box-shadow:
        0 0 12px #ffd86b,
        0 0 25px rgba(155,92,255,.5);

    transform: translateY(-1px);

}

/* ===================================
📱 PETITS ÉCRANS
=================================== */

@media (max-width: 600px) {

    #archiviste-bouton {

        right: 15px;
        bottom: 70px;

    }

    .cristal {

        font-size: 48px;

    }

    .titre-archiviste {

        font-size: 12px;

    }

    #archiviste-fenetre {

        right: 10px;
        bottom: 130px;

        width: calc(100vw - 40px);

        padding: 15px;

    }

    #discussion {

        max-height: 220px;

    }

}