/* ============================================================
   Le papier.

   Ce que deux documents imprimés ont en commun : le format de la
   feuille, l'aperçu posé sur un fond gris, la barre d'action qui
   ne s'imprime pas, et la règle @media print qui retire
   l'application tout autour.

   Ce qu'un document dit lui est propre et vit dans sa propre
   feuille de style — order-form.css pour le bon de commande,
   news-sheet.css pour les nouveautés. Rien ici ne parle d'un
   contenu : ni couleur de gamme, ni colonne de montants.

   Le fichier s'écrit en millimètres et ignore le thème de
   l'application : un document doit sortir identique de deux
   navigateurs et de deux thèmes. C'est aussi pourquoi il ne
   dépend d'aucune variable MudBlazor.
   ============================================================ */

/* --- La feuille ---

   Une A4. Ce qu'elle porte à l'intérieur — marges, corps de
   texte, interligne — appartient au document : deux feuilles de
   la même taille ne se lisent pas au même rythme. */
.paper {
    box-sizing: border-box;
    width: 210mm;
    min-height: 297mm;
    margin: 0 auto;
    background: #ffffff;
    color: #14181d;
    font-family: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
}

.paper *,
.paper *::before,
.paper *::after {
    box-sizing: inherit;
}

/* --- Aperçu à l'écran : la feuille se pose sur un fond, avec une ombre discrète.
       Rien de tout cela ne s'imprime, la règle @media print le reprend. --- */
.paper-frame {
    background: #eceef1;
    padding: 20px;
    overflow: auto;
}

.paper-frame .paper {
    box-shadow: 0 1px 3px rgba(18, 22, 32, .12), 0 8px 24px rgba(18, 22, 32, .08);
    border: 1px solid #dfe3e8;
}

/* --- Aperçu réduit dans un éditeur ---

   L'échelle, et rien d'autre. Réduire les tailles une à une donnerait un aperçu qui ment sur
   les retours à la ligne, donc sur le nombre de pages — et c'est justement ce qu'on regarde.

   « zoom » plutôt que « transform: scale() » : la transformation ne réduit que le dessin, pas
   la boîte. La feuille continuait d'occuper ses 210 mm dans la mise en page, et le cadre —
   large de 380 px — offrait une barre de défilement horizontale pour aller voir du vide. Le
   zoom réduit la boîte elle-même : plus de débordement, plus de marge négative à rattraper,
   et un document de deux pages reste juste (une marge fixe ne reprenait qu'une page).

   Le facteur est calculé pour qu'une A4 entre dans une colonne d'éditeur : 210 mm valent
   793 px, réduits à 357 px, ce qui laisse de la place à l'ascenseur vertical. */
.paper-compact {
    --paper-scale: .45;

    zoom: var(--paper-scale);
}

/* Repli pour les navigateurs sans « zoom » : on retrouve la transformation, mais l'origine
   passe en haut à gauche et les marges négatives reprennent la place que la boîte garde. */
@supports not (zoom: 1) {
    .paper-compact {
        transform: scale(var(--paper-scale));
        transform-origin: top left;
        margin: 0 calc(-210mm * (1 - var(--paper-scale))) calc(-297mm * (1 - var(--paper-scale))) 0;
    }
}

/* ============================================================
   L'impression. C'est la sortie visée : le reste n'est qu'un
   aperçu.

   Le portail ne fabrique pas de PDF côté serveur — il met en
   page une feuille, et laisse la boîte d'impression du
   navigateur la rendre : « Destination : Enregistrer au format
   PDF ». Le fichier obtenu est exactement ce qu'on a sous les
   yeux, ce qu'une seconde mise en page à tenir ne garantirait
   pas.
   ============================================================ */
@media print {
    @page {
        size: A4 portrait;
        /* Marge nulle : ce sont les marges de la feuille qui font la marge, sinon elles
           s'ajoutent à celle du navigateur et le document déborde d'une page. */
        margin: 0;
    }

    /* Tout ce qui n'appartient pas à la feuille disparaît. Les deux premières lignes valent
       pour toute l'application : une barre haute et un menu de navigation n'ont jamais rien à
       faire sur du papier, et les imprimer était déjà faux avant ces documents. */
    .mud-appbar,
    .mud-drawer,
    .no-print {
        display: none !important;
    }

    /* Le contenu occupe la page entière une fois le menu retiré : sans cela, la marge que
       MudBlazor réserve au tiroir décalerait la feuille vers la droite. */
    .mud-main-content {
        margin: 0 !important;
        padding: 0 !important;
    }

    body {
        background: #fff;
    }

    .print-page {
        margin: 0;
        padding: 0;
    }

    .paper-frame {
        background: none;
        padding: 0;
        overflow: visible;
    }

    .paper {
        box-shadow: none;
        border: 0;
        width: auto;
        min-height: auto;
        margin: 0;

        /* Les filets, les pastilles et les titres colorés font partie du document : sans cette
           règle, les navigateurs les retirent « pour économiser l'encre » et la hiérarchie
           tombe. */
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .paper-compact {
        zoom: 1;
        transform: none;
        margin: 0;
    }
}

/* ============================================================
   La barre d'action d'une page d'impression. Elle ne s'imprime
   pas : elle porte no-print.
   ============================================================ */
.print-page {
    min-height: 100vh;
    background: #eceef1;
}

.paper-bar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    background: #fff;
    border-bottom: 1px solid #dfe3e8;
    font-family: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
    font-size: 13px;
}

.paper-bar-name {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-weight: 500;
    color: #14181d;
}

.paper-bar-name .numeric {
    font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
    font-size: 11px;
    color: #5d646f;
}

/* Ce qui n'est pas publié, ou pas traduit, doit se voir avant que la feuille parte chez un
   client. */
.paper-warning {
    padding: 2px 8px;
    border: 1px solid #d8a94b;
    border-radius: 3px;
    background: #fdf6e7;
    color: #8a5610;
    font-size: 11.5px;
    font-weight: 500;
}