/* ============================================================================
   CATALOGUE D'ÉTATS (/app/rapports) — annuaire des restitutions EasyTime.
   Port de la passation « design_handoff_catalogue_etats » (Design 12).

   Feuille propre à cet écran (règle du gabarit, CLAUDE.md « Screen
   stylesheets ») : les classes .crp-* ne servent qu'ici. L'en-tête
   (.ecran-tete/.ecran-fil), le résumé (.ecran-resume) et le sélecteur de vue
   (.mx-seg) viennent des feuilles partagées et ne sont pas répétés ici.

   AUCUNE COULEUR EN DUR : tout pointe --et-*, ce qui rend l'écran correct en
   thème sombre sans bloc [data-theme] à part — les jetons portent déjà les
   deux jeux de valeurs (easytech-theme.css).

   CINQ BLOCS SONT TOMBÉS LE 2026-09-09 avec les gloses de l'écran : .crp-note
   (la description de chaque ligne), .crp-bloc-note (celle de chaque domaine),
   .crp-ecran (« à maquetter »), .crp-legende (le pied) et .crp-ligne-terne
   (le libellé d'un état sans lien — il n'en reste aucun). La marque « M » est
   partie avec eux. Ce que l'état calcule est écrit là où il se calcule :
   l'écran d'un état affiche sa formule sous la table et dans ses exports.
   ============================================================================ */

.crp-barre {
    display: flex; align-items: center; gap: 10px; row-gap: 10px; flex-wrap: wrap;
    padding: 10px 14px; margin: 16px 0;
    background: var(--et-surface-2); border: 1px solid var(--et-hairline);
}

.crp-recherche {
    flex: 1 1 280px; min-width: 220px; height: 42px; padding: 0 12px;
    background: var(--et-surface); border: 1px solid var(--et-filet-fort);
    font-family: var(--et-font); font-size: 14px; color: var(--et-ink);
}
.crp-recherche:focus { outline: none; border-color: var(--et-form-blue); }

.crp-pilules, .crp-marques { display: flex; gap: 6px; flex-wrap: wrap; }

.crp-pilule {
    height: 32px; padding: 0 12px; border-radius: var(--et-r-pill);
    border: 1px solid var(--et-hairline); background: var(--et-surface);
    font-family: var(--et-font); font-size: 12px; font-weight: 400;
    color: var(--et-inerte); cursor: pointer; white-space: nowrap;
}
.crp-pilule:hover { border-color: var(--et-form-blue); }

.crp-pilule.est-active { border-color: var(--et-filet-fort); font-weight: 600; }
.crp-pilule.est-active[data-rythme="Quotidien"] { background: var(--et-avertissement-bg); color: var(--et-avertissement-ink); }
.crp-pilule.est-active[data-rythme="Hebdo"] { background: var(--et-info-bg); color: var(--et-lien-survol); }
.crp-pilule.est-active[data-rythme="Mensuel"] { background: var(--et-succes-bg); color: var(--et-succes-ink); }
.crp-pilule.est-active[data-rythme="À la demande"] { background: var(--et-surface-2); color: var(--et-muted); }

.crp-marque {
    height: 32px; padding: 0 10px; display: inline-flex; align-items: center; gap: 7px;
    border: 1px solid var(--et-filet-fort); background: var(--et-surface);
    font-family: var(--et-font); cursor: pointer; white-space: nowrap;
}
.crp-marque:hover { border-color: var(--et-form-blue); }
.crp-marque.est-active { background: var(--et-info-bg); border-color: var(--et-info-bord); }

/* La case est .mx-case (modele-erp.css). Seul écart : 13 px et non 17 — elle est
   posée dans une pilule EN LIGNE de 32 px de haut, à côté d'un intitulé de 12 px,
   et non dans une liste d'options verticale. */
.crp-marque-case { --mx-case-t: 13px; }

.crp-marque-lbl { font-size: 12px; font-weight: 400; color: var(--et-muted); }
.crp-marque.est-active .crp-marque-lbl { font-weight: 600; color: var(--et-lien-survol); }

.crp-vue { margin-left: auto; }

.crp-vide {
    padding: 22px 18px; background: var(--et-surface); border: 1px solid var(--et-hairline);
    font-size: 13px; color: var(--et-muted); margin-bottom: 16px;
}

.crp-grille {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(560px, 1fr));
    gap: 14px; align-items: start;
}
@media (max-width: 1180px) { .crp-grille { grid-template-columns: 1fr; } }

.crp-bloc { background: var(--et-surface); border: 1px solid var(--et-hairline); }

.crp-bloc-tete {
    display: flex; align-items: baseline; gap: 10px; padding: 11px 16px;
    background: var(--et-surface-2); border-bottom: 2px solid var(--et-hairline);
}
.crp-bloc-barre { flex: none; width: 3px; height: 15px; background: var(--et-form-blue); }
.crp-bloc-titre {
    flex: 1; min-width: 0; font-family: var(--et-font-mono); font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .16em; color: var(--et-table-head-encre);
}
.crp-bloc-compte { flex: none; font-family: var(--et-font-mono); font-size: 12px; color: var(--et-faint); }

.crp-ligne { display: flex; align-items: flex-start; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--et-rang); }
.crp-ligne:last-child { border-bottom: none; }
.crp-ligne:hover { background: var(--et-surface-3); }
.crp-ligne-corps { flex: 1; min-width: 0; }
.crp-ligne-tete { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }

.crp-ligne-lien { font-size: 14px; font-weight: 600; color: var(--et-form-blue-encre); text-decoration: none; }
.crp-ligne-lien:hover { color: var(--et-form-blue-d); text-decoration: underline; }

.crp-badge-marque { padding: 1px 7px; font-size: 12px; font-weight: 600; white-space: nowrap; border: 1px solid; }
.crp-badge-marque[data-marque="L"] { background: var(--et-avertissement-bg); border-color: var(--et-avertissement-bord); color: var(--et-avertissement-ink); }
.crp-badge-marque[data-marque="P"] { background: var(--et-info-bg); border-color: var(--et-info-bord); color: var(--et-lien-survol); }

.crp-meta { margin-top: 5px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.crp-rythme {
    padding: 1px 7px; border-radius: var(--et-r-pill); font-family: var(--et-font-mono);
    font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .1em;
}
.crp-rythme[data-rythme="Quotidien"] { background: var(--et-avertissement-bg); color: var(--et-avertissement-ink); }
.crp-rythme[data-rythme="Hebdo"] { background: var(--et-info-bg); color: var(--et-lien-survol); }
.crp-rythme[data-rythme="Mensuel"] { background: var(--et-succes-bg); color: var(--et-succes-ink); }
.crp-rythme[data-rythme="À la demande"] { background: var(--et-surface-2); color: var(--et-muted); }
.crp-dest { font-size: 12px; color: var(--et-faint); }

.crp-sorties { flex: none; display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; max-width: 190px; }
.crp-badge-sortie { padding: 2px 7px; font-family: var(--et-font-mono); font-size: 12px; font-weight: 500; letter-spacing: .06em; white-space: nowrap; border: 1px solid; }
.crp-badge-sortie[data-sortie="Écran"] { background: var(--et-surface-2); border-color: var(--et-hairline); color: var(--et-muted); }
.crp-badge-sortie[data-sortie="PDF"] { background: var(--et-danger-badge-bg); border-color: var(--et-danger-bord); color: var(--et-danger-ink); }
.crp-badge-sortie[data-sortie="XLSX"] { background: var(--et-succes-bg); border-color: var(--et-succes-bord); color: var(--et-succes-ink); }
/* CSV : sortie réelle de l'écran générique des états et des deux rapports d'heures. Teinte
   neutre et non celle du tableur — un CSV n'est pas un classeur mis en forme, et les deux
   badges se lisent souvent côte à côte sur la même ligne. */
.crp-badge-sortie[data-sortie="CSV"] { background: var(--et-surface-2); border-color: var(--et-filet-fort); color: var(--et-neutre); }