/* ============================================================================
   EasyCertif — les documents imprimables (.cfi-*)
   ----------------------------------------------------------------------------
   Trois écrans : le rapport périodique (/app/certif/rapport, .cfi-r-*), la facture imprimable (/app/certif/certifiees/{id}/imprimer) et
   la liste à certifier imprimable (/app/certif/factures/imprimer). Leur mise en
   page est celle d'EasyTaxe (Historique/Imprimer, Factures/Imprimer) : en-tête
   émetteur / FACTURE, blocs « Facturé à » et « Détails », lignes avec leurs
   taxes en deux colonnes de largeur fixe, bloc de certification avec QR,
   totaux, pied de conformité.

   LES COULEURS SONT CELLES DE LA CHARTE, PAS CELLES D'EASYTAXE : la marine
   (--et-blue) tient le rôle de sa marine, l'orange de marque en encre de rang
   700 (--et-orange-700, 4,55:1 sur blanc) celui de son orange, et les états
   prennent leur couple fond / encre (-bg / -ink).

   À L'IMPRESSION, la feuille seule : tout le reste de la page est masqué
   (même mécanisme que la situation de travaux d'EasyProjects, .pjl-imprimable),
   et le format A4 est posé par <FormatImpression> à l'ouverture, pour que
   Ctrl+P donne la même feuille que le bouton.
   ============================================================================ */

.cfi-corps { display: flex; justify-content: center; padding: 16px 0 24px; }

.cfi-feuille {
    width: 210mm; max-width: 100%; box-sizing: border-box;
    padding: 14mm 12mm; background: var(--et-surface); color: var(--et-ink);
    border: 1px solid var(--et-hairline); box-shadow: var(--et-ombre-flottant);
    font-size: 13px;
}

/* ---- En-tête : émetteur à gauche, FACTURE à droite --------------------------- */
.cfi-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.cfi-societe { font-size: 20px; font-weight: 800; color: var(--et-blue); }
.cfi-accroche { font-size: 12px; font-weight: 700; color: var(--et-orange-700); letter-spacing: 1px; text-transform: uppercase; margin: 3px 0; }
.cfi-sous { font-size: 12px; color: var(--et-muted); }
.cfi-titre-doc { font-size: 24px; font-weight: 800; color: var(--et-blue); text-align: right; }
.cfi-numero { font-size: 14px; font-weight: 700; color: var(--et-orange-700); text-align: right; font-family: var(--et-font-mono); margin-top: 4px; }
.cfi-droite { text-align: right; }
.cfi-badge {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 8px;
    font-size: 12px; font-weight: 800; padding: 5px 12px; border-radius: 20px; letter-spacing: .4px;
}
.cfi-badge.est-certifiee { background: var(--et-succes-bg); border: 1px solid var(--et-succes-bord); color: var(--et-succes-ink); }
.cfi-badge.est-attente { background: var(--et-avertissement-bg); border: 1px solid var(--et-avertissement-bord); color: var(--et-avertissement-ink); }

/* Le filet marine / orange sous l'en-tête. */
.cfi-filet { height: 3px; margin: 14px 0 16px; background: linear-gradient(90deg, var(--et-blue) 0%, var(--et-blue) 62%, var(--et-orange-700) 62%, var(--et-orange-700) 100%); }

/* ---- Blocs « Facturé à » / « Détails » -------------------------------------- */
.cfi-deux { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; margin-bottom: 18px; }
.cfi-boite { border: 1px solid var(--et-hairline); }
.cfi-boite-tete {
    background: var(--et-surface-2); padding: 7px 12px; font-size: 12px; font-weight: 800; letter-spacing: 1px;
    color: var(--et-muted); text-transform: uppercase; border-bottom: 1px solid var(--et-hairline);
}
.cfi-boite-corps { padding: 10px 12px; }
.cfi-client { font-size: 14px; font-weight: 700; }
.cfi-client-ligne { font-size: 12px; color: var(--et-muted); margin-top: 3px; line-height: 1.45; overflow-wrap: anywhere; }
.cfi-client-ligne.est-vide { font-style: italic; }
.cfi-ids { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 5px; font-size: 12px; color: var(--et-muted); }
.cfi-ids b { color: var(--et-ink); font-family: var(--et-font-mono); }
.cfi-kv { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; font-size: 12px; }
.cfi-kv span:first-child { color: var(--et-muted); }
.cfi-kv span:last-child { font-weight: 700; text-align: right; }

/* ---- Lignes ------------------------------------------------------------------ */
.cfi-section { font-size: 12px; font-weight: 800; letter-spacing: 1px; color: var(--et-muted); text-transform: uppercase; margin: 4px 0 8px; }
.cfi-lignes { width: 100%; border-collapse: collapse; margin-bottom: 18px; }
.cfi-lignes th { /* densité voulue : papier — la facture A4 d'EasyTaxe */
    background: var(--et-blue); color: var(--et-sur-marine); font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .4px; padding: 7px 9px; text-align: left;
}
.cfi-lignes td { /* densité voulue : papier — la facture A4 d'EasyTaxe */ padding: 7px 9px; font-size: 12px; border-bottom: 1px solid var(--et-rang); vertical-align: top; }
.cfi-lignes tbody tr:nth-child(even) td { background: var(--et-surface-2); }
.cfi-lignes .est-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cfi-desig { font-weight: 600; }
.cfi-discret { color: var(--et-muted); font-size: 12px; }

/* Taxes : deux colonnes de largeur FIXE — libellé, montant — pour que les montants tombent au
   même endroit d'une ligne à l'autre ; tabular-nums aligne les chiffres. */
.cfi-taxes { display: inline-grid; grid-template-columns: 10em 5.4em; column-gap: 8px; row-gap: 2px; align-items: baseline; }
.cfi-tx-nom { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cfi-tx-mt { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---- Certification et totaux ----------------------------------------------- */
.cfi-bas { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; margin-top: 8px; align-items: start; }
.cfi-certif { display: flex; gap: 14px; align-items: flex-start; border: 1px solid var(--et-succes-bord); background: var(--et-succes-bg); padding: 12px 14px; overflow-wrap: anywhere; }
.cfi-certif-txt { flex: 1; min-width: 0; font-size: 12px; color: var(--et-muted); }
.cfi-certif-titre { font-size: 12px; font-weight: 800; color: var(--et-succes-ink); letter-spacing: .3px; margin-bottom: 6px; }
.cfi-certif-txt b, .cfi-mono { color: var(--et-ink); font-family: var(--et-font-mono); }
.cfi-qr { flex: 0 0 auto; text-align: center; font-size: 12px; color: var(--et-muted); }
.cfi-qr img { width: 92px; height: 92px; display: block; border: 1px solid var(--et-succes-bord); background: var(--et-surface); padding: 3px; margin-bottom: 3px; }
.cfi-attente { border: 1px dashed var(--et-avertissement-bord); background: var(--et-avertissement-bg); padding: 14px; color: var(--et-avertissement-ink); font-size: 12px; }

.cfi-totaux { border: 1px solid var(--et-hairline); }
.cfi-total { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 8px 13px; font-size: 12px; }
.cfi-total.est-alt { background: var(--et-surface-2); }
.cfi-total.est-somme { border-top: 1px solid var(--et-hairline); font-weight: 700; }
/* Le libellé peut se réduire, le montant jamais. */
.cfi-total span:first-child { min-width: 0; }
.cfi-total span:last-child { flex: 0 0 auto; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cfi-total.est-net { background: var(--et-blue); color: var(--et-sur-marine); font-weight: 800; font-size: 14px; }

.cfi-pied {
    border-top: 1px solid var(--et-hairline); margin-top: 20px; padding-top: 10px;
    display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; font-size: 12px; color: var(--et-muted);
}
.cfi-pied span:last-child { flex: 0 0 auto; text-align: right; }

/* ---- La liste à certifier imprimable ----------------------------------------- */
.cfi-liste h2 { font-size: 18px; margin: 0 0 2px; color: var(--et-ink); }
.cfi-liste .cfi-sous { margin-bottom: 18px; }
.cfi-liste table { width: 100%; border-collapse: collapse; }
.cfi-liste th, .cfi-liste td { /* densité voulue : papier — la liste à certifier imprimable */ padding: 8px 10px; font-size: 12px; border-bottom: 1px solid var(--et-rang); text-align: left; vertical-align: top; }
.cfi-liste th { background: var(--et-surface-2); text-transform: uppercase; color: var(--et-muted); }
.cfi-liste .est-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cfi-liste .est-taxes { color: var(--et-muted); }
.cfi-liste tfoot td { font-weight: 700; border-top: 2px solid var(--et-ink); }
.cfi-liste tfoot tr.est-recap td { font-weight: 400; border-top: 0; color: var(--et-muted); }
.cfi-liste tfoot tr.est-recap .cfi-tx-nom { color: var(--et-ink); }

/* ---- Le rapport périodique des factures certifiées ------------------------- */
.cfi-rapport .mx-faits { margin: 4px 0 16px; }
.cfi-r-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; margin-bottom: 16px; }
.cfi-r-tete h2 { font-size: 20px; font-weight: 700; color: var(--et-blue); margin: 0 0 2px; }
.cfi-r-meta { font-size: 12px; color: var(--et-muted); text-align: right; line-height: 1.7; flex: 0 0 auto; }
.cfi-r-criteres { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.cfi-r-vide { padding: 28px; text-align: center; color: var(--et-muted); border: 1px solid var(--et-hairline); }
.cfi-r-section {
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px;
    font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--et-muted);
    padding: 12px 0 8px; border-bottom: 1px solid var(--et-hairline);
}
.cfi-r-section .mx-seg { text-transform: none; letter-spacing: normal; font-weight: 400; }
.cfi-r-table { width: 100%; border-collapse: collapse; margin-bottom: 16px; }
.cfi-r-table th {
    background: var(--et-surface-2); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
    color: var(--et-muted); padding: var(--et-cellule-tete-y) 14px; text-align: left; border-bottom: 1px solid var(--et-hairline);
}
.cfi-r-table td { padding: var(--et-cellule-y) 14px; font-size: 13px; border-bottom: 1px solid var(--et-rang); }
.cfi-r-table .est-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cfi-r-table tr.est-groupe td { background: var(--et-surface-2); font-weight: 700; color: var(--et-blue); }
.cfi-r-table td.est-retrait { padding-left: 26px; }
.cfi-r-table tr.est-total td { background: var(--et-blue); color: var(--et-sur-marine); font-weight: 800; border-bottom: 0; }
.cfi-r-methode { margin-top: 14px; }

/* Fenêtre étroite : les totaux passent sous la certification, les deux blocs s'empilent. */
@media (max-width: 720px) {
    .cfi-feuille { padding: 12px; }
    .cfi-bas, .cfi-deux { grid-template-columns: minmax(0, 1fr); }
    .cfi-tete { flex-wrap: wrap; }
    .cfi-r-tete { flex-wrap: wrap; }
    .cfi-r-meta { text-align: left; }
    .cfi-r-table th, .cfi-r-table td { padding: 8px; }
}

/* ---- Impression : la feuille seule ------------------------------------------- */
@media print {
    body:where(:has(.cfi-imprimable)) * { visibility: hidden; }
    .cfi-imprimable, .cfi-imprimable * { visibility: visible; }
    .cfi-imprimable { position: absolute; left: 0; top: 0; width: 100%; border: 0; box-shadow: none; padding: 0; }
    .cfi-hors-impression { display: none !important; }
    /* Aucun de ces blocs ne doit être scindé par un saut de page. */
    .cfi-bas, .cfi-certif, .cfi-totaux, .cfi-pied, .cfi-boite, .cfi-rapport .mx-faits { break-inside: avoid; page-break-inside: avoid; }
    .cfi-lignes thead, .cfi-liste thead { display: table-header-group; }
    .cfi-lignes tr, .cfi-liste tr { break-inside: avoid; page-break-inside: avoid; }
    .cfi-filet, .cfi-lignes th, .cfi-total.est-net, .cfi-badge, .cfi-certif, .cfi-attente, .cfi-r-table tr.est-total td, .cfi-r-table tr.est-groupe td {
        -webkit-print-color-adjust: exact; print-color-adjust: exact;
    }
}

/* Le PDF du studio de documents, quand un modèle du studio imprime les factures du dossier. */
.appgrid .cfi-studio { display: block; width: 100%; height: 80vh; border: 1px solid var(--et-hairline); background: var(--et-surface-2); }