/* ============================================================
   Le bon de commande imprimé.

   Feuille à part, et non un morceau d'app.css : ce fichier ne
   décrit pas une interface, il décrit du papier. Il s'écrit donc
   en millimètres, ignore le thème de l'application, et ne dépend
   d'aucune variable MudBlazor — un document doit sortir identique
   de deux navigateurs et de deux thèmes.

   Ce qui est commun à tout document imprimé — le format de la
   feuille, le cadre d'aperçu, la barre d'action, la règle
   @media print — vit dans paper.css. Ici, ce que le bon de
   commande dit, et lui seul.

   Ce qui remplace le classeur Excel, point par point :
     - les pointillés « ………… » saisis à la main deviennent une
       bordure en pointillé, qui tient la ligne à toutes les
       largeurs ;
     - les colonnes de montants sont en chiffres tabulaires, donc
       alignées sans qu'on ait à compter les espaces ;
     - les filets verticaux disparaissent : c'est l'alignement qui
       sépare les colonnes, et il le fait mieux ;
     - une seule teinte, le vert Allegro, et seulement sur les
       filets de section. Le reste est noir sur blanc, parce que ce
       document part à l'imprimante d'un client.
   ============================================================ */

/* La feuille porte aussi la classe « paper », qui lui donne son format et son fond ; ce qui
   suit n'est que la mise en page du bon de commande. Le document tient sur une page, d'où la
   colonne flex : c'est elle qui pousse le bloc de signature en pied de feuille. */
.of {
    --of-ink: #14181d;
    --of-muted: #5d646f;
    --of-rule: #d9dde2;
    --of-hair: #ecEEF1;
    --of-accent: #0e6e63;

    padding: 10mm 12mm 8mm;
    font-size: 8pt;
    line-height: 1.28;

    display: flex;
    flex-direction: column;
}

/* --- En-tête --- */
.of-head {
    display: flex;
    align-items: flex-start;
    gap: 10mm;
    padding-bottom: 2mm;
    border-bottom: 2px solid var(--of-ink);
}

.of-eyebrow {
    margin: 0 0 1mm;
    font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
    font-size: 7pt;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--of-accent);
}

.of-title {
    margin: 0;
    font-family: "IBM Plex Sans Condensed", "IBM Plex Sans", sans-serif;
    font-size: 16pt;
    font-weight: 700;
    letter-spacing: -.015em;
    line-height: 1.08;
}

.of-intro {
    margin: 1mm 0 0;
    max-width: 118mm;
    font-size: 7.6pt;
    color: var(--of-muted);
}

/* Le millésime : c'est le premier repère quand trois versions traînent sur un bureau. */
/* Millésime et logo sur une même ligne, et non l'un sous l'autre : empilés, ils coûtaient
   assez de hauteur pour faire déborder les grilles les plus longues sur une deuxième page. */
.of-stamp {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 3.5mm;
}

.of-stamp-id {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .5mm;
    text-align: right;
}

/* Le logo de gamme sur son aplat. Les quatre logos de gamme sont blancs : c'est ainsi
   qu'ils ont été dessinés, et le classeur les posait déjà sur un fond sombre. L'aplat reste
   petit — un logo pleine largeur en réserve coûterait une cartouche par bon de commande. */
/* --- Les trois gammes ---

   Les classeurs distinguaient les gammes par la couleur de l'aplat posé derrière le logo :
   bleu Popsy, bleu clair Allegro Online, vert Subito. Ce sont les teintes relevées dans les
   fichiers d'origine, au code hexadécimal près — c'est à elles qu'un commercial reconnaît un
   bon de commande avant même de l'avoir lu.

   Deux valeurs par gamme, et ce n'est pas un caprice : l'aplat porte un logo blanc et peut
   donc rester clair, alors que la même teinte en texte de 7 points sur du papier blanc ne se
   lirait plus. La seconde est la version foncée, réservée à ce qui s'écrit. */
:root {
    --range-popsy: #4472c4;
    --range-popsy-ink: #2f5597;
    --range-online: #65a3e1;
    --range-online-ink: #2573c1;
    --range-subito: #70ad47;
    --range-subito-ink: #4e7a32;
}

/* La classe vient de la clé du logo : le document ne porte pas de couleur en base, il porte sa
   gamme, et la couleur en découle. Placées après .of, ces règles gagnent sur son accent. */
.of-range-allegro-popsy {
    --of-range: var(--range-popsy);
    --of-accent: var(--range-popsy-ink);
}

.of-range-allegro-online {
    --of-range: var(--range-online);
    --of-accent: var(--range-online-ink);
}

.of-range-allegro-subito {
    --of-range: var(--range-subito);
    --of-accent: var(--range-subito-ink);
}

.of-badge {
    display: block;
    flex: none;
    padding: 1.8mm 2.5mm;
    border-radius: 1.2mm;

    /* Sans gamme, l'aplat reste l'encre du document : un logo blanc doit se voir. */
    background: var(--of-range, var(--of-ink));
}

.of-badge img {
    display: block;
    width: 30mm;
    height: auto;
}

.of-stamp-year {
    font-family: "IBM Plex Sans Condensed", sans-serif;
    font-size: 15pt;
    font-weight: 700;
    line-height: 1;
    color: var(--of-accent);
}

.of-stamp-code {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 6.5pt;
    letter-spacing: .06em;
    color: var(--of-muted);
}

/* --- La grille --- */
.of-grid {
    width: 100%;
    border-collapse: collapse;
    margin-top: 2.4mm;
}

.of-grid thead th {
    padding: 0 0 1mm;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 6.5pt;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--of-muted);
    text-align: right;
    white-space: nowrap;
}

.of-c-label {
    text-align: left;
    width: auto;
}

.of-c-price {
    width: 26mm;
    text-align: right;
    vertical-align: top;
    padding-left: 4mm;
    white-space: nowrap;
}

/* Le titre de section : un filet plein sous le nom, à la couleur d'accent.
   Il ouvre le groupe sans le boîter, ce qui garde la grille légère. */
.of-section th {
    text-align: left;
    padding: 2.2mm 0 .8mm;
    border-bottom: 1.5px solid var(--of-accent);
}

.of-grid tbody:first-of-type .of-section th {
    padding-top: 1mm;
}

.of-section-title {
    font-family: "IBM Plex Sans Condensed", sans-serif;
    font-size: 9.5pt;
    font-weight: 600;
    letter-spacing: -.005em;
}

.of-section-subtitle {
    margin-left: 2mm;
    font-size: 7.2pt;
    font-weight: 400;
    color: var(--of-muted);
}

.of-subheading th {
    text-align: left;
    padding: 2.2mm 0 .6mm;
    font-size: 7.8pt;
    font-weight: 600;
    color: var(--of-ink);
}

.of-note td {
    padding: .4mm 0 1mm;
    font-size: 6.8pt;
    font-style: italic;
    color: var(--of-muted);
}

/* Une ligne de prestation. Le filet est un cheveu : il guide l'œil jusqu'au montant
   sans quadriller la page. */
.of-line > td {
    padding: .7mm 0;
    border-bottom: 1px solid var(--of-hair);
    vertical-align: top;
}

.of-line:last-child > td {
    border-bottom: 0;
}

.of-label {
    font-weight: 500;
}

/* La case à cocher. Un carré dessiné en bordure : il s'imprime toujours, là où un
   <input type=checkbox> dépend des réglages du navigateur. */
.of-tick {
    display: inline-block;
    width: 2.9mm;
    height: 2.9mm;
    margin-right: 2mm;
    border: 1px solid #9aa1ac;
    border-radius: .6mm;
    vertical-align: -.5mm;
    flex: none;
}

.of-bullets {
    margin: .6mm 0 0 5mm;
    padding: 0;
    list-style: none;
    columns: 2;
    column-gap: 6mm;
}

.of-bullets li {
    position: relative;
    padding-left: 2.6mm;
    font-size: 6.9pt;
    color: var(--of-muted);
    break-inside: avoid;
}

.of-bullets li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .95em;
    width: 1.6mm;
    height: 1px;
    background: #b6bcc4;
}

/* Les montants : chasse fixe et chiffres tabulaires, donc alignés colonne par colonne
   sans qu'on ait à y penser. */
.of-money {
    font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
    font-variant-numeric: tabular-nums;
    font-size: 8.6pt;
    font-weight: 500;
}

.of-unit {
    display: block;
    font-size: 6.8pt;
    color: var(--of-muted);
}

.of-footnote {
    margin: 1.3mm 0 0;
    font-size: 6.6pt;
    color: var(--of-muted);
}

/* --- Blocs sous la grille --- */
.of-block-title {
    display: block;
    margin-bottom: .9mm;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 6.5pt;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--of-muted);
}

.of-included,
.of-options,
.of-fields {
    margin-top: 2mm;
    padding-top: 1.5mm;
    border-top: 1px solid var(--of-rule);
    break-inside: avoid;
}

.of-included ul,
.of-options ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .4mm 5mm;
    font-size: 7.4pt;
}

.of-included ul {
    grid-template-columns: repeat(3, 1fr);
}

.of-included li {
    position: relative;
    padding-left: 3.4mm;
}

.of-included li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .5em;
    width: 1.4mm;
    height: 1.4mm;
    border-radius: 50%;
    background: var(--of-accent);
}

.of-options li {
    display: flex;
    align-items: flex-start;
}

/* --- Champs à remplir ---

   Le trait pointillé remplace les « …………… » tapés dans le classeur. Il tient sa
   largeur quelle que soit la longueur de l'intitulé, ce qu'une suite de points ne
   savait pas faire : c'est pour ça que les colonnes du classeur ne s'alignaient jamais. */
.of-row {
    display: flex;
    gap: 4mm;
    margin-bottom: 1.7mm;
}

.of-row label {
    display: flex;
    align-items: flex-end;
    gap: 2mm;
    font-size: 7.4pt;
    color: var(--of-muted);
    white-space: nowrap;
    padding-bottom: .3mm;
    border-bottom: 1px dotted #a9b0b9;
    min-height: 4.1mm;
}

.of-grow {
    flex: 1 1 auto;
    min-width: 0;
}

.of-w-vat {
    flex: 0 0 52mm;
}

.of-w-small {
    flex: 0 0 26mm;
}

.of-choices {
    align-items: center;
    gap: 5mm;
    margin-bottom: 1.2mm;
}

.of-choice-label {
    font-size: 7.4pt;
    color: var(--of-muted);
}

.of-choice {
    display: inline-flex;
    align-items: center;
    font-size: 7.4pt;
}

/* --- Signature --- */
.of-sign {
    margin-top: auto;
    padding-top: 2.5mm;
    display: flex;
    gap: 7mm;
    align-items: flex-end;
    break-inside: avoid;
}

.of-sign-terms {
    flex: 1 1 auto;
    font-size: 6.9pt;
    color: var(--of-muted);
    max-width: 96mm;
}

.of-sign-terms p {
    margin: 0 0 1.5mm;
}

.of-instructions {
    font-style: italic;
}

.of-sign-boxes {
    display: flex;
    gap: 4mm;
    flex: 0 0 auto;
}

.of-sign-box {
    width: 30mm;
    height: 14mm;
    border: 1px solid var(--of-rule);
    border-radius: 1mm;
    padding: 1.4mm 2mm;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 6.5pt;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--of-muted);
}

.of-sign-box-wide {
    width: 52mm;
}

/* --- Pied de page --- */
.of-foot {
    margin-top: 3mm;
    padding-top: 1.6mm;
    border-top: 1px solid var(--of-ink);
    display: flex;
    align-items: flex-start;
    gap: 5mm;
    font-size: 6.5pt;
    color: var(--of-muted);
}

.of-foot > div {
    display: flex;
    flex-direction: column;
    gap: .3mm;
}

/* Le logo de société, en couleur : c'est le seul des quatre qui existe en version pour fond
   clair, et il tient donc sa place au pied de la feuille sans rien derrière lui. */
.of-foot-logo {
    flex: none;
    width: 26mm;
    height: auto;
    align-self: flex-start;
    margin-top: -.5mm;
}

.of-foot span:first-child {
    font-weight: 600;
    color: var(--of-ink);
}

.of-foot-mail {
    flex: 1 1 auto;
    align-items: center;
    text-align: center;
    padding-top: .2mm;
}

.of-foot-mail span:first-child {
    font-weight: 500;
    color: var(--of-accent);
}

.of-foot-right {
    text-align: right;
    align-items: flex-end;
}

/* ============================================================
   L'impression.

   Le socle — le format de page, le retrait de l'application
   autour, le cadre d'aperçu — est dans paper.css. Ne reste ici
   que ce qui est propre au bon de commande : l'écran d'édition,
   au cas où l'on ferait Ctrl+P depuis lui plutôt que depuis la
   page d'impression.
   ============================================================ */
@media print {
    .price-edit-pane,
    .price-preview-head {
        display: none !important;
    }
}