/* ═══════════════════════════════════════════════════════════════════════════
   Icônes de l'interface — charte §7
   Trait 1,8 px, grille 24, une seule couleur (`currentColor`), jamais d'emoji.
   Tracés Lucide (licence ISC). Le jeu JS est dans `static/js/icones.js` ;
   les templates écrivent le même SVG directement dans le HTML.
   ═══════════════════════════════════════════════════════════════════════════ */

.ecs-icone {
    display: inline-block;
    vertical-align: -0.15em;
    flex-shrink: 0;
}

/* Icône posée devant un libellé dans un bouton / une ligne de menu. */
.ecs-icone--avant {
    margin-right: 6px;
}

/* Pastille pleine — repère de type de couche (remplace les ronds emoji).
   La couleur est portée par un token, pas par un glyphe. */
.ecs-pastille {
    display: inline-block;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Anneau de chargement — remplace ⏳ / ⌛ / ⟳.
   Épaisseur alignée sur le trait des icônes (1,8 px). */
.ecs-anneau {
    display: inline-block;
    border: 1.8px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: ecs-spin 0.8s linear infinite;
    flex-shrink: 0;
}

@keyframes ecs-spin {
    to { transform: rotate(360deg); }
}

/* Respect de la préférence système « moins d'animations ». */
@media (prefers-reduced-motion: reduce) {
    .ecs-anneau {
        animation-duration: 2.4s;
    }
}