/* ─────────────────────────────────────────────────────────────
   Le document lui-même : le registre, tel qu'il sort du serveur.

   Une seule feuille de styles pour les deux endroits où il apparaît —
   l'aperçu en direct du générateur et la page de téléchargement. Elles
   divergeaient : l'aperçu était reconstruit en JavaScript avec ses propres
   règles, la page de téléchargement avait les siennes, et le PDF une
   troisième mise en page. On montrait un document, on en livrait un autre.

   Les couleurs passent par les variables : écrites en dur, elles survivent
   aux refontes et le document reste au thème d'avant.
   ───────────────────────────────────────────────────────────── */

/* La feuille : format paysage, comme le PDF. */
.rup-paper {
    background: var(--color-surface);
    max-width: 1000px;
    margin: 0 auto;
    padding: 32px 36px;
    box-shadow: var(--shadow-lg, 0 4px 24px rgba(15, 23, 42, 0.12));
    border-radius: 4px;
    overflow-x: auto;
}

.rup-doc {
    color: var(--color-text);
    font-size: 13px;
    line-height: 1.5;
    /* Les chiffres d'un registre se lisent en colonne : matricules, dates,
       numéros de sécurité sociale. Sans chasse fixe, ils ne s'alignent pas. */
    font-variant-numeric: tabular-nums;
}
.rup-doc h1 {
    font-size: 20px;
    text-align: center;
    letter-spacing: 0.06em;
    margin: 0 0 4px;
    color: var(--color-text);
}
.rup-subtitle {
    text-align: center;
    color: var(--color-text-light);
    margin: 0 0 22px;
}
.rup-doc h2 {
    font-size: 15px;
    margin: 22px 0 10px;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--color-primary);
    color: var(--color-primary-dark);
}

.rup-table {
    width: 100%;
    border-collapse: collapse;
    margin: 8px 0 4px;
    font-size: 12px;
}
.rup-table th,
.rup-table td {
    border: 1px solid var(--color-border);
    padding: 5px 7px;
    text-align: left;
    vertical-align: top;
}
.rup-table th {
    background: var(--color-primary-bg);
    font-weight: 600;
    color: var(--color-primary-dark);
}
.rup-table-emp { font-size: 11px; }
.rup-auth { font-size: 10px; color: var(--color-text-light); }
.rup-empty { text-align: center; color: var(--color-text-muted); }

/* Le sceau : ce qui distingue le registre établi du tableau imprimé. */
.rup-seal {
    margin-top: 18px;
    padding-top: 12px;
    border-top: 1px solid var(--color-border);
}
.rup-footer { font-size: 11px; color: var(--color-text-light); text-align: center; }
.rup-fingerprint {
    margin: 4px 0 6px;
    font-family: var(--font-mono, "SFMono-Regular", Consolas, Menlo, monospace);
    font-size: 10px;
    letter-spacing: 0.06em;
    color: var(--color-text);
    text-align: center;
    word-break: break-all;
}
.rup-legal { font-size: 10px; color: var(--color-text-muted); text-align: center; margin: 2px 0; }

/* ── Spécimen ────────────────────────────────────────────────
   Le gratuit répond à la requête sans finir le travail : il faut que ça se
   voie dans le document, pas seulement dans le texte de la page. */
.rup-specimen-banner {
    margin: -8px 0 18px;
    padding: 8px 12px;
    background: var(--color-accent);
    color: #fff;
    text-align: center;
    font-size: 11px;
    line-height: 1.5;
    border-radius: 3px;
}
.rup-specimen-banner strong { letter-spacing: 0.12em; }
.rup-specimen-banner span {
    display: block;
    font-size: 10px;
    opacity: 0.92;
}
.rup-seal-specimen { border-top-color: var(--color-accent); }
.rup-legal-strong {
    color: var(--color-accent);
    font-weight: 600;
    font-size: 10.5px;
    text-align: left;
}

/* Le filigrane oblique : visible à l'écran comme sur un tirage papier, et
   assez discret pour qu'on lise quand même le tableau en dessous. */
.rup-doc-specimen {
    position: relative;
}
.rup-doc-specimen::before {
    content: "SPÉCIMEN";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(-24deg);
    font-size: clamp(3rem, 12vw, 7rem);
    font-weight: 800;
    letter-spacing: 0.1em;
    color: var(--color-accent);
    opacity: 0.06;
    pointer-events: none;
    z-index: 1;
}

@media (max-width: 640px) {
    .rup-paper { padding: 20px 14px; }
}