{{-- Styles pour l'en-tête de document --}}
<style>

    @page {
        margin: 100px 50px 100px 50px;
        counter-increment: page;
    }

    .pageNumber:before {
        content: counter(page);
    }

    .totalPages:before {
        content: counter(pages, decimal);
    }

    .header-section {
        width: 100%;
        padding: 20px;
        align-items: center;
        justify-content: center;
    }
    .header-table {
            width: 95%;
            border-collapse: collapse;
            table-layout: fixed;
    }

    .header-table td {
        padding: 6px;
        font-weight: bold;
        word-wrap: break-word;
        border: 1px solid #000 !important;
        font-family: Georgia, Times New Roman, serif;
    }

    .logo-cell {
        width: 25%;
        text-align: center;
    }

    .title-cell {
        width: 50%;
        text-align: center;
        padding: 10px;
    }

    .ref-cell {
        width: 25%;
        text-align: center;
        font-size: 8pt;
    }


    .society-info {
        margin-bottom: 8px;
    }

    .document-info {
        border-top: 1px solid #000;
        padding-top: 8px;
    }

    .process-title {
        font-size: 20pt;
        font-weight: bold;
        text-transform: uppercase;
        margin-bottom: 3px;
        color: #333;

    }

    .document-title {
        font-size: 12pt;
        color: #000;
        font-family: Georgia, Times New Roman, serif;
    }

    .ref-info {
        line-height: 1.3;
    }

    .ref-code {
        font-size: 8pt;
        font-weight: bold;
        margin-bottom: 3px;
        color: #333;
    }

    .ref-date {
        font-size: 7pt;
        margin-bottom: 2px;
        color: #666;
    }

    .ref-page {
        font-size: 7pt;
        color: #666;
    }
    .header-tr {
        border: 1px solid #000;
    }
</style>

{{-- Contenu de l'en-tête --}}
<div class="header-section">
 <table class="header-table">
        <tr class="header-tr">
            <td class="logo-cell">
                @if (!empty(trim('{logo}')))
                    <img src="{logo}" alt="Logo" style="width: 150px; max-height: 70px; display: block; margin: 0 auto;">

                @endif
            </td>

            <td class="title-cell">
                <div class="society-info">
                    <div class="process-title">{process}</div>
                </div>

                <div class="document-info">

                    <div class="document-title">{title}</div>
                </div>
            </td>

            <td class="ref-cell">
                <div class="ref-info">
                    <div class="ref-code">{code_process}</div>
                    <div class="ref-date">Rédigée le {created_at}</div>
                    <div class="ref-page">
                        Page <span class="pageNumber"></span>
                    </div>
                </div>
            </td>
        </tr>
    </table>
</div>