/* =========================================================
   ICONES ET ILLUSTRATIONS

   L'icone ne porte ni couleur ni epaisseur dans son dessin : elle
   prend stroke: currentColor, donc la couleur du texte qu'elle
   accompagne, et son trait et sa taille dans les jetons. Placee
   devant un libelle, elle s'aligne sur la ligne de texte.

   L'illustration n'existe que sur les etats vides et dans
   l'espace parent, jamais sur les ecrans de finances. Ses aplats
   lisent --illustration-*, qui suivent la couleur de l'ecole.
   ---
   Icons take currentColor and token sizes. Illustrations appear
   only on empty states and in the parent space, never on finance
   screens; their fills follow the school colour.
   ========================================================= */

.icone {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: var(--icon-stroke);
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: -0.18em;
}

.icone--sm { width: var(--icon-size-sm); height: var(--icon-size-sm); }
.icone--lg { width: var(--icon-size-lg); height: var(--icon-size-lg); }

/* Le ton d'une icone qui ne partage pas la couleur du texte voisin :
   secondaire, devant une ligne de tableau ou un champ, parle plus bas
   que le texte ; les trois autres portent l'action ou un statut. Ils
   se posent sur l'icone (classe="icone-succes") ou sur son contexte.
   ---
   Tone of an icon that differs from its neighbouring text. */
.icone-secondaire { color: var(--icon-secondary); }
.icone-action { color: var(--action-primary); }
.icone-succes { color: var(--status-success); }
.icone-avertissement { color: var(--status-warning); }

.illustration {
    display: block;
    width: min(100%, var(--illustration-width));
    height: auto;
    margin-inline: auto;
}

/* Une icone pleine : l'etat atteint d'un palier, une etoile
   gagnee. Le dessin reste celui de la planche. */
.icone--plein { fill: currentColor; }

/* L'etat vide : l'illustration, un titre, une phrase, centres et
   aeres. Compact dans une ligne de tableau ou une carte etroite.
   ---
   Empty state; compact inside a table row or a narrow card. */
.etat-vide {
    display: grid;
    justify-items: center;
    gap: var(--space-1);
    padding: var(--space-6) var(--space-4);
    text-align: center;
}

.etat-vide .illustration { margin-bottom: var(--space-2); }

.etat-vide__titre {
    margin: 0;
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
}

.etat-vide__texte {
    max-width: 46ch;
    margin: 0;
    font-size: var(--text-base);
    color: var(--text-muted);
}

.etat-vide--compact { padding: var(--space-4) var(--space-3); }
.etat-vide--compact .illustration { width: min(100%, calc(var(--illustration-width) * .6)); }
.etat-vide--compact .etat-vide__titre { font-size: var(--text-md); }