{{-- Sans cette declaration, dompdf lit le document en Windows-1252 : les deux
     octets UTF-8 du « ° » ressortent en deux caracteres sans glyphe, et le
     titre affiche « COMMANDE N?? ». --}}
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<style>
    @page {
        margin: 0;
    }

    body {
        margin: 0;
        /* Helvetica est integree au format PDF : dompdf ne l'embarque pas, la
           fiche pese quelques ko au lieu de 430 avec DejaVu. Elle ne couvre
           que Windows-1252, ce qui suffit aux noms de clients et de couleurs
           — si un jour l'un d'eux en sort, il faudra repasser a DejaVu et
           accepter le poids. */
        font-family: "Helvetica", sans-serif;
        color: #1b2537;
    }

    /* Bandeau de tete : le logo a gauche, le numero de commande a droite.
       C'est ce qu'on lit en premier quand la fiche est posee sur un etabli. */
    table.entete {
        width: 100%;
        border-collapse: collapse;
        table-layout: fixed;
    }

    table.entete td {
        padding: 20mm 20mm 0 20mm;
        vertical-align: top;
    }

    table.entete td.logo img {
        width: 50mm;
    }

    table.entete td.numero {
        text-align: right;
    }

    .surtitre {
        font-size: 8.5pt;
        font-weight: bold;
        letter-spacing: 2.5px;
        color: #8a94a6;
        text-transform: uppercase;
    }

    .commande-no {
        font-size: 32pt;
        font-weight: bold;
        color: #012970;
        line-height: 1;
        margin-top: 2mm;
    }

    .devis-no {
        font-size: 10.5pt;
        color: #48566e;
        margin-top: 3mm;
    }

    .devis-no strong {
        color: #1b2537;
    }

    /* Le negoce se dit dans le bandeau, a cote du numero : c'est la commande
       qui est de negoce, pas sa couleur. Le logo le dit deja, mais un mot
       ecrit vaut mieux qu'un logo qu'on ne reconnait pas au premier coup. */
    .negoce {
        display: inline-block;
        margin-top: 4mm;
        padding: 1.5mm 3mm;
        font-size: 8pt;
        font-weight: bold;
        letter-spacing: 1.5px;
        color: #ffffff;
        background: #012970;
    }

    /* Le filet ferme le bandeau. Deux epaisseurs plutot qu'une : le trait fin
       sous le trait epais donne de la tenue a l'impression, ou un aplat
       unique bave. */
    .filet {
        margin: 11mm 20mm 0 20mm;
        border-top: 2.5pt solid #012970;
    }

    .filet-fin {
        margin: 1.2mm 20mm 0 20mm;
        border-top: 0.5pt solid #c9d1de;
    }

    /* Corps : trois lignes encadrees, posees dans le vide entre le bandeau et
       le pied plutot qu'accrochees sous le filet. Cinq informations ne
       remplissent pas une A4 : un bloc centre se lit comme une composition,
       un bloc en haut comme une page inachevee.

       La marge du haut est calculee a la main — dompdf ne centre pas
       verticalement. Le bandeau finit vers 62mm, le pied commence a 275 :
       un bloc de 108mm pose 46mm plus bas tombe dans le centre optique,
       legerement au-dessus du milieu geometrique comme il se doit. La
       Le bloc fait toujours trois lignes, la nature du negoce se logeant sur
       celle du client : la marge n'a donc plus a s'ajuster. */
    table.champs {
        width: 170mm;
        margin: 46mm 20mm 0 20mm;
        border-collapse: collapse;
        table-layout: fixed;
        border: 0.5pt solid #c9d1de;
    }

    table.champs td {
        padding: 9mm 10mm;
        height: 18mm;
        vertical-align: middle;
        border-bottom: 0.5pt solid #dfe4ec;
    }

    table.champs tr.derniere td {
        border-bottom: none;
    }

    .intitule {
        font-size: 8pt;
        font-weight: bold;
        letter-spacing: 1.8px;
        color: #8a94a6;
        text-transform: uppercase;
    }

    .valeur {
        font-size: 18pt;
        font-weight: bold;
        margin-top: 2mm;
        /* Les libelles de couleur sont longs (« RAL 6005 Vert Basque ») :
           sans ca, dompdf deborde du cadre au lieu de couper. */
        word-wrap: break-word;
    }

    /* La nature accolee au nom du client : plus petite et plus claire que lui,
       pour que le nom reste ce qu'on lit en premier. */
    .valeur-accolee {
        font-size: 12pt;
        font-weight: normal;
        color: #48566e;
    }

    .valeur-secondaire {
        font-size: 12pt;
        color: #48566e;
        margin-top: 1.5mm;
    }

    /* Une fiche par page. Le conteneur fait la hauteur d'une A4 pour que le QR
       et le pied, poses en absolu dedans, tombent au bas de LEUR page et pas
       au bas du document.

       C'est ce qui remplace le position:fixed d'origine : dompdf repete un
       element fixe sur chaque page, ce qui allait tant qu'une fiche faisait un
       document a elle seule, et collerait le QR de la premiere commande sur
       toutes les etiquettes des qu'on en imprime un lot. */
    .fiche {
        position: relative;
        height: 297mm;
    }

    /* Le saut se pose avant chaque fiche sauf la premiere : apres la derniere,
       il ajouterait une page blanche en fin de document. */
    .saut {
        page-break-before: always;
    }

    /* Le QR se pose au-dessus du pied, a droite : c'est un outil, pas une
       information de la fiche, il n'a rien a faire dans le bloc central.

       45mm de cote. La trame fait 33 modules, soit 1,36 mm par module a cette
       taille : un telephone lit un QR a environ dix fois sa largeur, donc de
       pres d'un demi-metre au lieu de trente centimetres a 28 mm. C'est ce
       qu'il faut pour viser une fiche punaisee sans venir coller l'objectif.

       C'est aussi a peu pres le maximum : le bloc des champs finit une dizaine
       de millimetres plus haut, et grandir encore les ferait se toucher. */
    .qr {
        position: absolute;
        bottom: 22mm;
        right: 20mm;
        text-align: center;
    }

    .qr img {
        width: 45mm;
        height: 45mm;
    }

    .qr-legende {
        margin-top: 1.5mm;
        font-size: 7pt;
        color: #8a94a6;
        letter-spacing: 0.3px;
    }

    .pied {
        position: absolute;
        bottom: 14mm;
        left: 20mm;
        right: 20mm;
        border-top: 0.5pt solid #c9d1de;
        padding-top: 2.5mm;
        font-size: 8pt;
        color: #8a94a6;
    }

    .pied .droite {
        float: right;
    }
</style>

@foreach ($fiches as $fiche)
    @include('pdf.commandes._fiche', $fiche + ['saut' => !$loop->first])
@endforeach