/* ==========================================================================
   ÉCRAN — RELEVÉ DE COMPTE CLIENT (/app/pos/credit/releve/{id})

   Sa propre feuille, comme le veut la charte. Elle remplace un bloc <style>
   posé dans le .razor : celui-ci était réémis à chaque rendu du composant,
   n'entrait jamais dans le cache du navigateur, et portait une couleur en dur
   (#888) que la charte interdit.

   CE DOCUMENT N'EST PAS UN ÉCRAN, C'EST UNE PIÈCE
     Il n'est pas consulté, il est ENVOYÉ : un client qui conteste son encours
     reçoit ce papier. Tout part donc de la page A4 — largeur de bloc, marges,
     et un @media print qui retire ce qui n'existe pas sur le papier.

   NOIR ET BLANC PAR DÉFAUT
     Aucune information n'est portée par la seule couleur : le sens d'un
     mouvement est dans son signe, pas dans une teinte. Une imprimante
     monochrome — celle du bureau, en pratique — ne doit rien faire perdre.
   ========================================================================== */

.releve-page {
    max-width: 820px;
    margin: 0 auto;
    padding: 24px;
    color: var(--et-ink);
    font-family: var(--et-font);
}

.releve-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-bottom: 16px;
}

/* ----- En-tête du document ------------------------------------------------ */

.releve-entete {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 14px;
    margin-bottom: 18px;
    border-bottom: 3px solid var(--et-form-strip);
}

.releve-entete img { width: 56px; height: 56px; object-fit: contain; flex: none; }

.releve-titre {
    margin: 0;
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--et-ink);
}

.releve-date { margin-top: 2px; font-size: 13px; color: var(--et-muted); }

/* ----- Identité du compte -------------------------------------------------
   La même grammaire que le formulaire dense du gabarit : libellé à droite dans
   une colonne fixe, valeur à gauche du bord. Reprise ici plutôt qu'empruntée à
   .mx-champ, dont la mesure de 158 px est calée sur une fiche de saisie et non
   sur un document imprimé de 820 px. */

.releve-info { margin: 0 0 20px; }

.releve-info > div {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 12px;
    padding: 3px 0;
}

.releve-info dt {
    margin: 0;
    text-align: right;
    font-size: 13px;
    font-weight: 500;
    color: var(--et-muted);
}

.releve-info dd { margin: 0; font-size: 14px; }

.releve-alerte { color: var(--et-danger-ink); font-weight: 700; }

/* ----- Mouvements --------------------------------------------------------- */

.releve-mouvements {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.releve-mouvements th {
    padding: 7px 8px;
    text-align: left;
    font-family: var(--et-font-mono);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--et-table-head-encre);
    border-bottom: 1px solid var(--et-hairline);
}

.releve-mouvements td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--et-hairline);
}

.releve-mouvements .text-end { text-align: right; font-variant-numeric: tabular-nums; }

.releve-pied {
    margin-top: 22px;
    padding-top: 10px;
    border-top: 1px solid var(--et-hairline);
    font-size: 12px;
    color: var(--et-faint);
    text-align: center;
}

/* ----- Impression ---------------------------------------------------------
   Les boutons disparaissent, les marges rendent la main à celles de
   l'imprimante, et les lignes du tableau ne se coupent pas entre deux pages —
   un mouvement scindé sur deux feuilles se relit deux fois. */

@media print {
    .releve-actions { display: none; }
    .releve-page { max-width: none; padding: 0; }
    .releve-mouvements tr { break-inside: avoid; }
    .releve-mouvements thead { display: table-header-group; }
}

/* --- Palier de largeur (convention : docs/conventions-responsive.md) --------
   Même correction qu'à ecran-regles-comptabilisation.css, et pour la même
   raison : la rangée d'en-tête du relevé est une copie privée de la rangée
   dense — assumée plus haut dans cette feuille, sa colonne de 160 px étant
   calée sur un document de 820 px — mais la copie n'a pas repris le palier.

   Le seuil est celui du gabarit, 720 px : en dessous, une colonne d'intitulé
   de 160 px ne laisse plus assez de place à la valeur. */
@media (max-width: 720px) {
    .releve-info > div { grid-template-columns: minmax(0, 1fr); gap: 3px; }
    .releve-info dt { text-align: left; }
}