/* =====================================================================
   ÉCRAN — PORTAIL CLIENT, VOLET VENTE (CDC EasySales LOT 9, tâche T7)

   Préfixe .pcv-* (portail client vente). Une feuille par écran, chargée
   dans App.razor APRÈS modele-erp.css : c'est la règle du CLAUDE.md, et
   sa raison est mécanique — appendue à la queue du gabarit, chaque
   branche ajoutant un écran collisionnerait avec toutes les autres sur
   la dernière ligne du fichier et sur sa clé de cache, jamais sur la
   substance.

   AUCUNE COULEUR EN DUR. Tout passe par var(--et-*). Un hexadécimal
   écrit ici survivrait à la prochaine révision de la charte, et c'est
   exactement ce que la bascule du 2026-09-02 a eu à défaire sur
   110 feuilles.

   CE QUI N'EST PAS ICI : la liste (.tbl-* d'easytime-shell.css, via
   Tableau.razor), le cadre de page et la grille de fiche (.mx-* de
   modele-erp.css). Ils sont empruntés, pas redéfinis — une classe
   utilisée par deux écrans monte dans le gabarit, jamais l'inverse.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. LE BANDEAU DE SITUATION — « ce que vous devez », en tête de compte.

   Bâti sur la vignette d'indicateur d'EasyCompta : fond de surface,
   filet, bordure gauche de 4 px colorée par --vig. L'écran choisit son
   rôle avec style="--vig: var(--et-danger)" et n'écrit aucune couleur.
   --------------------------------------------------------------------- */
.pcv-situation {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.pcv-chiffre {
    background: var(--et-surface);
    border: 1px solid var(--et-hairline);
    border-left: 4px solid var(--vig, var(--et-form-blue));
    padding: 10px 12px;
}

.pcv-chiffre-libelle {
    font-family: var(--et-font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--vig, var(--et-form-blue));
}

.pcv-chiffre-valeur {
    font-family: var(--et-font-mono);
    font-size: 16px;
    color: var(--et-ink);
    margin-top: 2px;
}

.pcv-chiffre-note {
    font-size: 11px;
    color: var(--et-muted);
    margin-top: 2px;
}

/* ---------------------------------------------------------------------
   2. LA PROVENANCE DU CHIFFRE.

   « Mon compte » peut lire le grand livre ou, à défaut d'EasyCompta, les
   pièces de vente. Les deux sont légitimes et ne donnent pas le même
   nombre : l'écran le DIT plutôt que de laisser deviner. Discret par
   construction — c'est une précision, pas une alerte.
   --------------------------------------------------------------------- */
.pcv-source {
    font-size: 11px;
    color: var(--et-muted);
    margin-bottom: 10px;
}

/* ---------------------------------------------------------------------
   3. L'ENGAGEMENT — accepter un devis.

   UN SEUL BOUTON ORANGE PAR ÉCRAN, et c'est celui-là : la classe
   .btn-accent du thème, jamais une couleur locale. Ce bloc ne fait que
   lui donner sa place et son texte d'accompagnement.
   --------------------------------------------------------------------- */
.pcv-engagement {
    background: var(--et-surface);
    border: 1px solid var(--et-hairline);
    padding: 12px;
    margin-top: 12px;
}

.pcv-engagement-texte {
    font-size: 12px;
    color: var(--et-muted);
    line-height: 1.5;
    margin-bottom: 10px;
}

.pcv-engagement-fait {
    font-size: 12px;
    color: var(--et-succes-ink);
    line-height: 1.5;
}

/* ---------------------------------------------------------------------
   4. LE TOTAL D'UNE PIÈCE, aligné à droite comme sur le document.
   --------------------------------------------------------------------- */
.pcv-totaux {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    margin-top: 10px;
    font-family: var(--et-font-mono);
    font-size: 13px;
}

.pcv-totaux-ligne { display: flex; gap: 16px; }
.pcv-totaux-libelle { color: var(--et-muted); }
.pcv-totaux-fort { font-size: 16px; color: var(--et-ink); }

/* ---------------------------------------------------------------------
   5. LA NOTE DE PIED d'un document — telle qu'elle s'imprime sur le PDF.
   --------------------------------------------------------------------- */
.pcv-note {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--et-hairline);
    font-size: 12px;
    font-style: italic;
    color: var(--et-muted);
    white-space: pre-wrap;
}

/* ---------------------------------------------------------------------
   6. LES PREUVES DE LIVRAISON.

   Une par ligne, sobre : le client veut savoir QU'une preuve existe, de
   quel type, signée par qui et quand. Le reste est à nous.
   --------------------------------------------------------------------- */
.pcv-preuve {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px solid var(--et-hairline);
    font-size: 12px;
}

.pcv-preuve:last-child { border-bottom: 0; }
.pcv-preuve-type { font-weight: 600; color: var(--et-ink); }
.pcv-preuve-qui { color: var(--et-muted); }
.pcv-preuve-quand { margin-left: auto; color: var(--et-muted); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------
   7. PALIERS — docs/conventions-responsive.md.

   Recette à 390 / 768 / 1280 / 1600 px ; paliers pris dans l'échelle
   retenue (560 / 640 / 720 / 1024 / 1100), jamais une largeur inventée
   pour l'occasion.

   LA RÈGLE TACTILE (docs/cibles-tactiles.md) : sous 1024 px, aucune
   cible interactive ne descend sous 44 × 44 px, et une cible ne rétrécit
   jamais. Le gabarit la tient déjà pour .tbl-* et la coquille ; ce qui
   suit ne concerne que les cibles propres à cet écran.
   --------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .pcv-engagement .btn,
    .pcv-engagement .mx-btn {
        min-height: 44px;
        min-width: 44px;
    }
}

@media (max-width: 720px) {
    /* Une seule colonne de chiffres : deux côte à côte sur 390 px
       tronqueraient un montant, et un montant tronqué ne se lit pas. */
    .pcv-situation { grid-template-columns: 1fr; }

    .pcv-totaux { align-items: stretch; }
    .pcv-totaux-ligne { justify-content: space-between; }
}

@media (max-width: 560px) {
    .pcv-preuve { flex-wrap: wrap; }
    .pcv-preuve-quand { margin-left: 0; width: 100%; }
}

/* ---------------------------------------------------------------------------
   MES DEMANDES (/portail-client) — portage au gabarit du 2026-09-09.

   L'écran était le dernier du portail entièrement écrit en framework : cadre de
   page, cartes, grille 5/7, groupe de liste. Tout ce qui avait un équivalent est
   parti au gabarit (.mx-carte, .mx-form, .mx-champ, .mx-seg, .mx-blocage) ; ne
   restent ici que les rôles que le gabarit ne nomme pas — une grille maître /
   détail, une liste de sélection, un corps de message.

   Les noms ont été confrontés aux 164 feuilles avant d'ouvrir la famille : deux
   blocs homonymes ne cassent pas le build, ils fusionnent (conventions-nommage).
   --------------------------------------------------------------------------- */

/* Maître / détail. Le 5/7 de la grille d'origine devient 4/7 en fractions : la
   colonne de gauche ne porte que numéro, objet et date, elle n'a pas besoin de
   plus. Une seule colonne sous 1024 px — palier de l'échelle retenue. */
.pcv-cols {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap: 12px;
    align-items: start;
}

.pcv-espace { margin-bottom: 12px; }
.pcv-tete-fin { margin-left: auto; }
.pcv-fin { justify-content: flex-end; margin-top: 12px; }

/* LISTE DE SÉLECTION. Ce n'est pas le gabarit de liste .tbl-* : il n'y a pas de
   colonnes, chaque entrée est un bloc de trois lignes qu'on désigne. Le retenu
   se marque par un filet à gauche et l'aplat de rangée, PAS par un aplat de
   couleur pleine — l'entrée reste lisible, et le bleu plein ferait concurrence
   au seul bouton d'engagement de l'écran. */
.pcv-liste { display: flex; flex-direction: column; }
.pcv-liste-item {
    display: block; width: 100%; text-align: left;
    padding: 9px 14px;
    border: 0; border-bottom: 1px solid var(--et-hairline);
    border-left: 3px solid transparent;
    background: var(--et-surface); color: var(--et-ink);
    font-family: inherit; cursor: pointer;
}
.pcv-liste-item:last-child { border-bottom: 0; }
.pcv-liste-item:hover { background: var(--et-rang); }
.pcv-liste-item:focus-visible { outline: 2px solid var(--et-form-blue); outline-offset: -2px; }
.pcv-liste-item.est-retenu {
    background: var(--et-tint);
    border-left-color: var(--et-form-blue);
}

.pcv-liste-rang { display: flex; align-items: center; gap: 8px; }
.pcv-liste-num { flex: 1; font-size: 13px; font-weight: 600; }
.pcv-liste-objet {
    margin-top: 2px; font-size: 13px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* LA DATE PREND --et-muted, PAS --et-faint, ET C'EST UNE MESURE. La rangée
   change de fond sous le curseur (--et-rang) et à la sélection (--et-tint) :
   --et-faint y rend 4,22:1 et 4,41:1, sous AA, alors qu'il passe sur blanc
   (4,94:1). Mesurer contre le fond le plus sombre que la rangée traverse, pas
   le plus blanc. --et-muted rend 6,27 / 5,36 / 5,60 sur les trois. */
.pcv-liste-quand { margin-top: 2px; font-size: 12px; color: var(--et-muted); }

/* Corps d'un message et d'une description : le texte saisi par un humain garde
   ses retours à la ligne. Le filet de gauche situe l'échange sans l'encadrer. */
.pcv-message {
    padding-left: 10px; margin-bottom: 10px;
    border-left: 2px solid var(--et-hairline);
}
.pcv-texte { font-size: 13px; line-height: 1.45; white-space: pre-wrap; }

@media (max-width: 1024px) {
    .pcv-cols { grid-template-columns: minmax(0, 1fr); }
}