/*
 * Le vocabulaire « console » des temps forts : un fond nuit tramé de points,
 * une lueur cyan, un faisceau de lumière qui fait le tour du cadre, et des
 * coins de visée. Il remplace l'aplat de dégradé, qui finissait par se répéter
 * d'une section à l'autre.
 *
 * Trois pièces indépendantes, à combiner :
 * - .console  : le fond et les jetons sémantiques (texte blanc, traits clairs) ;
 * - .faisceau : la bordure lumineuse animée (occupe ::after) ;
 * - .visee    : les quatre coins de visée (occupe ::before).
 */

.console {
    --fond: #070320;
    --fond-eleve: #0e0838;
    --texte: #ffffff;
    --texte-doux: rgb(235 238 255 / 0.78);
    --texte-tres-doux: rgb(235 238 255 / 0.58);
    --trait: rgb(140 200 255 / 0.14);
    --trait-fort: rgb(140 200 255 / 0.34);
    --circuit-piste: rgb(140 200 255 / 0.08);
    --circuit-noeud: rgb(46 163 242 / 0.4);
    --accent: var(--cyan);

    /* Le fond en variable : un composant qui redéfinit son arrière-plan plus
       loin dans la cascade peut le reprendre tel quel. */
    --console-fond:
        radial-gradient(circle at 1px 1px, rgb(160 210 255 / 0.13) 1px, transparent 1.5px) 0 0 / 22px 22px,
        radial-gradient(38rem 24rem at 88% -8%, rgb(46 163 242 / 0.24), transparent 62%),
        radial-gradient(34rem 26rem at -4% 108%, rgb(113 34 246 / 0.3), transparent 62%),
        #070320;

    position: relative;
    isolation: isolate;
    color: var(--texte);
    background: var(--console-fond);
}

/*
 * Faisceau : un arc de lumière cyan → violet qui tourne sur la bordure. Le
 * dégradé conique est découpé à 1 px par un masque ; l'angle est une propriété
 * enregistrée, donc animable sans JavaScript.
 */
@property --faisceau-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

.faisceau::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    padding: 1px;
    border-radius: inherit;
    pointer-events: none;
    background:
        conic-gradient(from var(--faisceau-angle),
            transparent 0% 62%,
            rgb(46 163 242 / 0.9) 76%,
            rgb(154 92 255 / 0.9) 86%,
            transparent 96%),
        linear-gradient(rgb(140 200 255 / 0.16), rgb(140 200 255 / 0.16));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    animation: faisceau 7s linear infinite;
}

@keyframes faisceau {
    to { --faisceau-angle: 360deg; }
}

/* Coins de visée : huit traits de 1 px posés en dégradés, aucun élément. */
.visee::before {
    --l: 1.1rem;
    --c: rgb(46 163 242 / 0.8);

    content: "";
    position: absolute;
    inset: clamp(0.75rem, 1.5vw, 1.25rem);
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(var(--c), var(--c)) top left / var(--l) 1px,
        linear-gradient(var(--c), var(--c)) top left / 1px var(--l),
        linear-gradient(var(--c), var(--c)) top right / var(--l) 1px,
        linear-gradient(var(--c), var(--c)) top right / 1px var(--l),
        linear-gradient(var(--c), var(--c)) bottom left / var(--l) 1px,
        linear-gradient(var(--c), var(--c)) bottom left / 1px var(--l),
        linear-gradient(var(--c), var(--c)) bottom right / var(--l) 1px,
        linear-gradient(var(--c), var(--c)) bottom right / 1px var(--l);
    background-repeat: no-repeat;
}

/* Sur fond console, le bouton plein passe en blanc et prend une lueur cyan. */
.console .bouton--plein {
    background: #fff;
    color: var(--encre);
    box-shadow: 0 0 0 1px rgb(255 255 255 / 0.4), 0 10px 40px -8px rgb(46 163 242 / 0.65);
}

.console .bouton--plein:hover {
    background: #fff;
    box-shadow: 0 0 0 1px #fff, 0 10px 50px -4px rgb(46 163 242 / 0.9);
}

.console .bouton--fantome::before {
    background: #fff;
}

.console .bouton--fantome:hover {
    color: var(--encre);
    border-color: #fff;
}

@media (prefers-reduced-motion: reduce) {
    .faisceau::after {
        animation: none;
        --faisceau-angle: 200deg;
    }
}