/* ============================================================
   (Frontend)   Common/CSS/statut-defi.css
   ============================================================
   Z7-STATUT-DEFI  ·  NON VALIDÉ  —  l'ÉTAT OPÉRATIONNEL d'un défi 1V1
   (11/10/2026, première proposition visuelle ; Lenny ajuste après
   recette).

   CE N'EST PAS UN Z7-TAG. Les deux doivent se distinguer d'un coup
   d'oeil :

     Z7-TAG           ce QU'EST le défi (mode, type, région, règle,
                      privé) : petite pastille SOMBRE, coins de 6 px,
                      contour coloré, texte 8 px. Elle ne change jamais
                      pendant la vie du défi.
     Z7-STATUT-DEFI   OÙ EN EST le défi : gélule TEINTÉE de sa couleur,
                      coins ronds, point LUMINEUX, texte 9,5 px. Elle
                      change à chaque étape.

   EMPLOI :
       <span class="z7-statut z7-statut--en-cours">
           <span class="z7-statut-point" aria-hidden="true"></span>En cours
       </span>

   VARIANTES (une couleur par famille d'état, rien d'autre) :
       --attente      gris-bleu   OPEN, en attente d'un adversaire
       --preparation  orange      PREPARATION
       --en-cours     bleu        ONGOING
       --desaccord    rouge-orangé DISAGREED
       --examen       violet      DISPUTED / AWAITING_ADMIN
       --termine      gris neutre états terminaux (recette seulement :
                      « Mes défis en cours » ne les montre pas)

   Une seule source pour les couleurs : `--z7-statut-c`, posée par la
   variante. Le fond, le contour et le halo du point en dérivent.
   ============================================================ */
.z7-statut {
    --z7-statut-c: #94a3b8;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 20px;
    padding: 0 9px 0 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--z7-statut-c) 14%, rgba(5, 8, 15, 0.6));
    border: 1px solid color-mix(in srgb, var(--z7-statut-c) 42%, transparent);
    color: color-mix(in srgb, var(--z7-statut-c) 70%, #fff);
    font-family: Arial, sans-serif;
    font-size: 9.5px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
    box-sizing: border-box;
}
.z7-statut-point {
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--z7-statut-c);
    box-shadow: 0 0 6px 1px color-mix(in srgb, var(--z7-statut-c) 70%, transparent);
}

.z7-statut--attente     { --z7-statut-c: #94a3b8; }
.z7-statut--preparation { --z7-statut-c: #FF9F1C; }
.z7-statut--en-cours    { --z7-statut-c: #33C6FF; }
.z7-statut--desaccord   { --z7-statut-c: #FF5A36; }
.z7-statut--examen      { --z7-statut-c: #B46CFF; }
.z7-statut--termine     { --z7-statut-c: #6b7280; }
/*  Un état terminal ne « vit » plus : pas de halo. */
.z7-statut--termine .z7-statut-point { box-shadow: none; }