/* =====================================================================================
   T-FICHES — MISE EN PAGE DES FICHES PARTENAIRE (client et fournisseur)

   ⚠️⚠️ TOUT CE FICHIER EST BORNÉ À `.pfx`, ET CE N'EST PAS UNE PRÉCAUTION DE STYLE.
   Les classes `fpro-grid` / `fpro-bloc` que ces deux fiches utilisaient sont définies dans
   `app.css` (GLOBAL) et portées par 38 ÉCRANS (mesuré). Y poser des largeurs de carte
   toucherait les 38. Ce dépôt a payé DEUX FOIS ce défaut en T-UI (`.btn-filtres`, puis
   `.crud-toolbar-actions`) : les deux fois, ce sont des écrans que la tranche ne touchait
   même pas qui se sont cassés.
   ⇒ vocabulaire PROPRE, et un test d'étage 1 (`FichePartenaireTests`) vérifie que chaque
   règle d'ici part de `.pfx` — un préfixe protège les classes, pas les balises.

   ⚠️ Aucune couleur en dur : les jetons de `:root` (app.css) font foi.
   ===================================================================================== */

/* ---- La grille : 12 colonnes, des cartes de LARGEURS DIFFÉRENTES ------------------
   C'est elle qui supprime les vides : une carte fiscale étroite à côté de coordonnées
   larges, plutôt que trois colonnes égales dont une aux trois quarts vide. */
.pfx-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 14px;
    align-items: start;
}

/* ---- COLONNES-PILES : ce qui supprime le vide DE RANGÉE ---------------------------
   ⚠️⚠️ DÉVIATION ASSUMÉE VS LA MAQUETTE, et c'est le but même de la tranche.
   La maquette pose les cartes en `span` dans une grille de RANGÉES : chaque rangée
   prend la hauteur de sa carte la plus haute, donc une carte courte à côté d'une carte
   longue laisse un vide sous elle — et sa rangée 3 ne faisait que 9 colonnes sur 12.
   Or supprimer les vides EST la demande. Ici chaque colonne est une PILE indépendante :
   les cartes s'y suivent sans espace, et les deux colonnes se remplissent chacune à son
   rythme. Le vide de rangée devient INEXPRIMABLE au lieu d'être géré.
   ⚠️ Les cartes gardent des largeurs différentes (5 / 7 / 12) — c'est bien le visuel de
   la maquette ; c'est la mécanique dessous qui change. */
.pfx-col {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.pfx-col--s5 { grid-column: span 5; }
.pfx-col--s7 { grid-column: span 7; }

.pfx-c {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-10);
    overflow: hidden;
    min-width: 0;
}

.pfx-c--s3  { grid-column: span 3; }
.pfx-c--s4  { grid-column: span 4; }
.pfx-c--s5  { grid-column: span 5; }
.pfx-c--s7  { grid-column: span 7; }
.pfx-c--s12 { grid-column: span 12; }

/* ---- En-tête de carte ------------------------------------------------------------ */
.pfx-ch {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--line);
    background: var(--paper);
}

.pfx-ch-ic {
    color: var(--teal);
    display: flex;
    align-items: center;
    flex: none;
}

.pfx-ch-t {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: .01em;
}

.pfx-ch-sp { flex: 1 1 auto; }

.pfx-cb { padding: 13px 14px; }

/* ---- Champs ----------------------------------------------------------------------- */
.pfx-g {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 11px 12px;
}

.pfx-f {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.pfx-f--w2   { grid-column: span 2; }
.pfx-f--full { grid-column: 1 / -1; }

.pfx-f label {
    font-size: 12px;
    color: var(--slate);
    font-weight: 500;
    margin: 0;
}

.pfx-hint {
    font-size: 11.5px;
    color: var(--slate);
    line-height: 1.4;
}

/* ---- Les champs rarement remplis, REPLIÉS -----------------------------------------
   ⚠️ REPLIÉS, JAMAIS RETIRÉS : les six autres identifiants fiscaux et les quatre champs
   bancaires servent à qui en a besoin. Ce qui coûtait, c'est qu'ils occupaient la place
   de ce qu'on remplit tous les jours. */
.pfx-opt {
    margin-top: 11px;
    border-top: 1px dashed var(--line);
    padding-top: 10px;
}

.pfx-opt summary {
    cursor: pointer;
    color: var(--teal);
    font-size: 12.5px;
    font-weight: 550;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 6px;
}

.pfx-opt summary::-webkit-details-marker { display: none; }

.pfx-opt summary::before {
    content: "\25B8";
    display: inline-block;
    transition: transform .15s ease;
}

.pfx-opt[open] summary::before { transform: rotate(90deg); }

.pfx-opt-n {
    color: var(--slate);
    font-weight: 400;
}

.pfx-opt .pfx-g { margin-top: 11px; }

/* ---- Soldes : des CHIFFRES, plus des champs ---------------------------------------
   ⚠️⚠️ Un solde CALCULÉ affiché dans un `input readonly disabled` laisse croire qu'on
   pourrait le saisir — et qu'il est grisé par accident. Ce sont des valeurs dérivées :
   elles s'affichent comme telles. Seuls les soldes INITIAUX restent saisissables. */
.pfx-solde {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--line);
}

.pfx-solde:last-of-type { border-bottom: 0; }

.pfx-solde-l {
    font-size: 12.5px;
    color: var(--slate);
}

.pfx-solde-v {
    font-size: 17px;
    font-weight: 640;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
    white-space: nowrap;
}

/* Créance/dette non nulle : de l'argent qu'on attend ou qu'on doit — il se voit. */
.pfx-solde-v--du  { color: var(--amber); }
.pfx-solde-v--nil { color: var(--slate); }

/* ---- Commutateur ------------------------------------------------------------------ */
.pfx-sw {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    padding: 9px 11px;
    border: 1px solid var(--line);
    border-radius: var(--r-8);
    background: var(--paper);
}

.pfx-sw-t { font-size: 13px; font-weight: 550; }
.pfx-sw-d { font-size: 11.5px; color: var(--slate); margin-top: 1px; }

/* ---- Bloc vide (aucun chantier) --------------------------------------------------- */
.pfx-vide {
    color: var(--slate);
    font-size: 12.5px;
    padding: 9px 11px;
    background: var(--paper);
    border: 1px dashed var(--line);
    border-radius: var(--r-8);
}

/* ---- Barre d'actions de l'en-tête -------------------------------------------------
   Le code de la fiche et l'indicateur de modifications vivent à côté du titre, dans la
   barre COLLANTE : on ne défile plus pour savoir s'il reste quelque chose à valider. */
.pfx-code {
    font-size: 12px;
    color: #9fb0c6;
    background: rgba(255, 255, 255, .09);
    padding: 2px 9px;
    border-radius: var(--r-20);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pfx-dirty {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--amber);
    white-space: nowrap;
}

/* ---- Message de confirmation ------------------------------------------------------ */
.pfx-toast {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 12px;
    padding: 10px 13px;
    border: 1px solid var(--line);
    border-left: 4px solid var(--green);
    border-radius: var(--r-9);
    background: var(--surface);
}

.pfx-toast-t { font-weight: 640; font-size: 13.5px; color: var(--ink); }
.pfx-toast-d { color: var(--slate); font-size: 12.5px; margin-top: 2px; }

/* ---- Position GPS (client) --------------------------------------------------------- */
.pfx-gps {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-8);
    padding: 9px 11px;
}

.pfx-gps-co {
    font-variant-numeric: tabular-nums;
    font-size: 13px;
    font-weight: 550;
    color: var(--ink);
}

.pfx-gps-me { font-size: 11.5px; color: var(--slate); margin-top: 2px; }

.pfx-gps-btns {
    display: flex;
    gap: 8px;
    margin-top: 9px;
    flex-wrap: wrap;
}

/* ---- Note de formule --------------------------------------------------------------- */
.pfx-note {
    margin-top: 9px;
    font-size: 11.5px;
    color: var(--slate);
    line-height: 1.45;
}

/* ---- Sous 1100 px puis 768 px : les cartes s'élargissent, puis s'empilent -----------
   ⚠️ Sans ces deux paliers, une carte de 3 colonnes sur un écran étroit rendrait un
   champ de quelques pixels — c'est-à-dire pire que la mise en page qu'on remplace. */
@media (max-width: 1100px) {
    .pfx-c--s3, .pfx-c--s4, .pfx-c--s5 { grid-column: span 6; }
    .pfx-c--s7 { grid-column: span 12; }
    .pfx-col--s5, .pfx-col--s7 { grid-column: span 12; }
}

@media (max-width: 768px) {
    .pfx-grid { gap: 11px; }

    .pfx-c--s3, .pfx-c--s4, .pfx-c--s5, .pfx-c--s7, .pfx-c--s12 {
        grid-column: span 12;
    }

    .pfx-col--s5, .pfx-col--s7 { grid-column: span 12; }

    .pfx-g { grid-template-columns: 1fr; }

    .pfx-f--w2 { grid-column: span 1; }
}