/* ============================================================================
   ÉCRAN « RÈGLES D'IMPUTATION » (PST-03) — classes .rcp-*

   Sa propre feuille, et son propre <link> dans App.razor : un écran qui
   s'ajoute à la queue de modele-erp.css fait collisionner toutes les branches
   sur la dernière ligne du fichier et sur la clé de cache partagée — jamais sur
   la substance (voir CLAUDE.md).

   AUCUNE COULEUR EN DUR : tout passe par les jetons --et-* de
   easytech-theme.css. Une classe employée par un DEUXIÈME écran remonterait
   dans le gabarit (modele-erp.css §11), jamais l'inverse.

   2026-09-03 — CETTE PHRASE ÉTAIT SINCÈRE ET FAUSSE. Cinq des jetons employés
   ici n'existaient nulle part : --et-text, --et-text-muted, --et-border,
   --et-accent-soft, --et-accent-strong. Un var() sans repli qui ne résout pas
   rend la déclaration invalide « at computed-value time » : la propriété tombe à
   sa valeur initiale ou héritée, SANS ERREUR ni avertissement. Les puces de
   critère n'avaient donc aucune bordure, et les comptes aucun fond — l'écran ne
   rendait pas ce que cette feuille décrit. Les cinq sont remplacés par les
   jetons réels de la charte ; .rcp-compte reprend la paire --et-navy-soft /
   --et-navy-ink, celle que .code-chip emploie déjà pour le même rôle. 
   ============================================================================ */

/* LA CHAÎNE DES CRITÈRES — ce qu'une règle restreint, dans l'ordre de son poids.
   Des puces plutôt qu'une phrase : on lit une population d'un coup d'œil, et
   l'absence de puce dit « socle » sans avoir à l'écrire. */
.rcp-criteres {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

.rcp-critere {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 7px;
    border: 1px solid var(--et-form-border);
    border-radius: 0;
    background: var(--et-surface-2);
    color: var(--et-ink);
    font-size: 12px;
    line-height: 17px;
    white-space: nowrap;
}

/* LE SOCLE se distingue d'une règle ciblée : c'est la seule qui s'applique à
   tout le monde, et la confondre avec les autres fait chercher longtemps
   pourquoi « tout le monde » a changé de compte. */
.rcp-socle {
    border-style: dashed;
    color: var(--et-muted);
}

/* LES COMPTES FIXÉS vs HÉRITÉS. L'écart est le sujet même de l'écran : un champ
   vide n'est pas un compte effacé, c'est un compte hérité de la société. */
.rcp-comptes {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
}

.rcp-compte {
    font-family: var(--et-font-mono);
    font-size: 12px;
    line-height: 17px;
    padding: 1px 6px;
    border-radius: 0;
    background: var(--et-navy-soft);
    color: var(--et-navy-ink);
    white-space: nowrap;
}

.rcp-herite {
    color: var(--et-muted);
    font-style: italic;
    font-size: 12px;
}

/* LA SIMULATION — le panneau qui répond à « laquelle s'applique ? ». */
.rcp-simulation {
    border: 1px solid var(--et-hairline);
    border-radius: 0;
    background: var(--et-surface-2);
    padding: 12px 14px;
}

.rcp-simulation dl {
    display: grid;
    grid-template-columns: 158px 1fr;
    gap: 4px 12px;
    margin: 0;
}

.rcp-simulation dt {
    color: var(--et-muted);
    font-weight: 500;
    text-align: right;
}

.rcp-simulation dd {
    margin: 0;
    font-family: var(--et-font-mono);
}

/* --- Palier de largeur (convention : docs/conventions-responsive.md) --------
   La liste de simulation reprend la RANGÉE DENSE du gabarit — colonne
   d'intitulé fixe, valeur à droite — mais en copie privée, donc sans le palier
   que .mx-champ porte à 720 px (modele-erp.css:714). En dessous, les 158 px
   mangent la moitié de l'écran et l'intitulé devient plus large que la donnée
   qu'il annonce.

   L'intitulé repasse À GAUCHE en même temps qu'il monte : sur une seule
   colonne, l'alignement à droite n'a plus de bord à suivre. */
@media (max-width: 720px) {
    .rcp-simulation dl { grid-template-columns: minmax(0, 1fr); gap: 3px; }
    .rcp-simulation dt { text-align: left; }
}