/* ============================================
   LES CADRES

   Chacun raconte quelque chose du personnage. Rien n'est
   dessiné : ce sont des bordures, des halos et des
   pulsations. Tu peux tout changer ici sans rien redessiner.
============================================ */

/* --- Les tailles ---
   La taille dit l'IMPORTANCE, la distance dit la PROXIMITÉ.
   Deux informations différentes, deux moyens différents. */

.sys__astre[data-taille="grand"],
.sys__astre[data-taille="grand"] .sys__disque { width: 132px; }
.sys__astre[data-taille="grand"] .sys__disque { height: 132px; }
.sys__astre[data-taille="grand"] { margin: -66px 0 0 -66px; }

.sys__astre[data-taille="petit"],
.sys__astre[data-taille="petit"] .sys__disque { width: 94px; }
.sys__astre[data-taille="petit"] .sys__disque { height: 94px; }
.sys__astre[data-taille="petit"] { margin: -47px 0 0 -47px; }

/* --- CALYNE : elle veille ---
   Un anneau rose et une lueur permanente. Elle est là depuis
   le collège, elle ne s'éteint jamais. */

.sys__astre[data-signature="veille"] .sys__disque {
    border-color: rgba(255, 45, 149, 0.55);
    box-shadow:
        0 0 0 1px rgba(255, 45, 149, 0.2),
        0 0 26px rgba(255, 45, 149, 0.28),
        0 12px 34px rgba(0, 0, 0, 0.55);
}

.sys__astre[data-signature="veille"]::before {
    content: "";
    position: absolute;
    inset: -9px;
    border-radius: 50%;
    border: 1px solid rgba(255, 45, 149, 0.28);
    animation: sig-veille 4.5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes sig-veille {
    0%, 100% { opacity: 0.5;  transform: scale(1); }
    50%      { opacity: 0.95; transform: scale(1.035); }
}

/* --- ARI : froid ---
   Net, sans halo, sans anneau. Il ne sait rien et ne cherche
   rien. C'est le seul dont le cadre ne fait rien. */

.sys__astre[data-signature="froid"] .sys__disque {
    border-color: rgba(174, 200, 226, 0.5);
    border-width: 1px;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.55);
}

/* --- SARAH : une interférence ---
   Une seconde bordure légèrement décalée, qui bat sans
   régularité. Elle est habitée par quelque chose qu'elle
   ignore, et son cadre le sait avant elle. */

.sys__astre[data-signature="interference"] .sys__disque {
    border-color: rgba(236, 72, 153, 0.55);
}

.sys__astre[data-signature="interference"]::before,
.sys__astre[data-signature="interference"]::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.sys__astre[data-signature="interference"]::before {
    inset: -6px;
    border: 1px solid rgba(212, 175, 55, 0.42);
    animation: sig-interf-a 3.1s ease-in-out infinite;
}

.sys__astre[data-signature="interference"]::after {
    inset: -6px;
    border: 1px solid rgba(236, 72, 153, 0.34);
    /* Décalée de deux pixels : c'est ce léger désalignement
       qui fait l'interférence, pas l'animation. */
    transform: translate(2px, -2px);
    animation: sig-interf-b 4.7s ease-in-out infinite;
}

@keyframes sig-interf-a {
    0%, 100% { opacity: 0.25; }
    18%      { opacity: 0.9; }
    34%      { opacity: 0.3; }
    62%      { opacity: 0.75; }
}

@keyframes sig-interf-b {
    0%, 100% { opacity: 0.7; transform: translate(2px, -2px); }
    40%      { opacity: 0.2; transform: translate(-2px, 2px); }
    70%      { opacity: 0.6; transform: translate(3px, 1px); }
}

/* --- ODETTE : les visions ---
   Un liséré qui change de teinte, lentement. Elle voit ce que
   personne ne voit, et elle croit que c'est de la folie. */

.sys__astre[data-signature="visions"] .sys__disque {
    border-color: rgba(251, 146, 60, 0.5);
}

.sys__astre[data-signature="visions"]::before {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 1px solid rgba(251, 146, 60, 0.4);
    animation: sig-visions 11s linear infinite;
    pointer-events: none;
}

@keyframes sig-visions {
    0%   { border-color: rgba(251, 146, 60, 0.42); }
    28%  { border-color: rgba(139, 92, 246, 0.42); }
    54%  { border-color: rgba(0, 212, 255, 0.36); }
    78%  { border-color: rgba(255, 45, 149, 0.4); }
    100% { border-color: rgba(251, 146, 60, 0.42); }
}

/* --- Les autres : neutre ---
   Sacha, REN, Némo. Trop de signatures différentes finirait
   par ne plus rien signifier. */

.sys__astre[data-signature="neutre"] .sys__disque {
    border-color: rgba(255, 255, 255, 0.16);
}

/* --- Les anciens : un traitement commun ---
   Ils appartiennent au même monde, eux. */

.sys__astre[data-signature="ancien"] .sys__disque {
    border-color: rgba(212, 175, 55, 0.5);
    filter: brightness(var(--lumiere, 1)) saturate(0.6);
    box-shadow:
        0 0 0 1px rgba(212, 175, 55, 0.16),
        0 0 24px rgba(212, 175, 55, 0.16),
        0 12px 34px rgba(0, 0, 0, 0.55);
}

.sys__astre[data-signature="ancien"] .sys__nom {
    color: rgba(212, 175, 55, 0.75);
}

.sys__astre[data-signature="ancien"]::before {
    content: "";
    position: absolute;
    inset: -9px;
    border-radius: 50%;
    border: 1px dashed rgba(212, 175, 55, 0.3);
    animation: sig-ancien 26s linear infinite;
    pointer-events: none;
}

@keyframes sig-ancien {
    to { transform: rotate(360deg); }
}

/* Le personnage choisi l'emporte sur sa signature : sa bordure
   bleue doit rester lisible quelle que soit la sienne. */
.sys__astre.est-choisi .sys__disque {
    border-color: var(--bleu, #00d4ff) !important;
}

@media (prefers-reduced-motion: reduce) {
    .sys__astre::before,
    .sys__astre::after { animation: none; }
}

@media (max-width: 980px) {
    .sys__astre[data-taille="grand"],
    .sys__astre[data-taille="grand"] .sys__disque { width: 82px; }
    .sys__astre[data-taille="grand"] .sys__disque { height: 82px; }
    .sys__astre[data-taille="grand"] { margin: -41px 0 0 -41px; }

    .sys__astre[data-taille="petit"],
    .sys__astre[data-taille="petit"] .sys__disque { width: 62px; }
    .sys__astre[data-taille="petit"] .sys__disque { height: 62px; }
    .sys__astre[data-taille="petit"] { margin: -31px 0 0 -31px; }
}