/* ================================
FENÊTRES FLOTTANTES : petites fenêtres déplaçables par leur barre de titre (js/fenetre-flottante.js).
Portfolio : "implication" à gauche. Accueil : des petits SynthDefs.
================================ */
.fenetre-flottante {
    position: fixed;
    left: 1rem;
    top: 11rem;
    z-index: 50;
    width: 16rem;
    font-size: 0.85rem;
    color: var(--blanc);
    background: rgba(28, 4, 32, 0.94);
    border: 1px solid var(--rose);
    box-shadow: 6px 6px 0 rgba(241, 187, 187, 0.45);
}

.fenetre-flottante-titre {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.3rem 0.25rem 0.6rem;
    font-family: var(--police-titre);
    font-size: 0.8rem;
    letter-spacing: 1px;
    color: var(--violet-fonce);
    background: var(--rose);
    cursor: grab;
    user-select: none;
    touch-action: none;   /* sur écran tactile : le doigt déplace la fenêtre, pas la page */
}
.fenetre-flottante.en-deplacement .fenetre-flottante-titre { cursor: grabbing; }

.fenetre-flottante-reduire {
    padding: 0 0.45rem;
    font: inherit;
    line-height: 1.3;
    color: var(--violet-fonce);
    background: none;
    border: 1px solid var(--violet-fonce);
    cursor: pointer;
}

.fenetre-flottante-liste {
    margin: 0;
    padding: 0.7rem 0.9rem 0.8rem 1.9rem;
    list-style: "▸ ";
}
.fenetre-flottante-liste li { margin: 0.25rem 0; padding-left: 0.2rem; }
.fenetre-flottante-liste li::marker { color: var(--rose); }

.fenetre-flottante.reduite .fenetre-flottante-liste { display: none; }

/* fenêtre de code (accueil) */
.fenetre-flottante.code { width: auto; max-width: 24rem; }
.fenetre-flottante-code {
    margin: 0;
    padding: 0.6rem 0.8rem;
    max-height: 16rem;
    overflow: auto;
    white-space: pre;
    font-family: "DejaVu Sans Mono", ui-monospace, monospace;
    font-size: 0.66rem;
    line-height: 1.5;
    color: #c0c8d4;
}
.fenetre-flottante.code.reduite .fenetre-flottante-code { display: none; }

/* couleurs de l'IDE SuperCollider */
.fenetre-flottante .sc-classe      { color: #7ce2fd; font-weight: bold; }
.fenetre-flottante .sc-motcle      { color: #f077c3; font-weight: bold; }
.fenetre-flottante .sc-symbole     { color: #6fc98a; }
.fenetre-flottante .sc-nombre      { color: #b7a6f2; }
.fenetre-flottante .sc-variable    { color: #e0a060; }
.fenetre-flottante .sc-chaine      { color: #a8a8b4; }
.fenetre-flottante .sc-commentaire { color: #6e7386; font-style: italic; }

/* petit écran : les fenêtres restent flottantes et se déplacent au doigt (par la barre de titre),
   en plus petit ; la fenêtre "implication" part du bas de l'écran pour ne pas cacher le titre */
@media (max-width: 900px) {
    .fenetre-flottante { width: min(16rem, 75vw); font-size: 0.8rem; }
    .fenetre-flottante:not(.code) { top: auto; bottom: 1.5rem; left: 0.6rem; }
    .fenetre-flottante.code { max-width: 85vw; }
    .fenetre-flottante-code { max-height: 40vh; font-size: 0.6rem; }
}