/* paraphe — feuille de style unique : parcours signataire et interface d'administration.
 *
 * Reprend le langage visuel de **pdf-tester** : mêmes jetons, mêmes noms, même bascule clair/sombre.
 * Deux outils Tanaguru qui se ressemblent coûtent moins à maintenir qu'un thème par produit, et un
 * agent qui passe de l'un à l'autre n'a rien à réapprendre.
 *
 * **Ce qui n'est pas décoratif, et doit survivre à toute refonte :**
 *   - le focus reste visible en toutes circonstances — jamais `outline: none` ;
 *   - les contrastes dépassent 4,5:1 pour le texte et 3:1 pour les bordures de champs, **dans les deux
 *     thèmes** (valeurs mesurées, portées en commentaire de chaque jeton) ;
 *   - les cibles de pointage font au moins 44 px de haut : le parcours de signature se fait souvent sur
 *     un téléphone, où les 24 px exigés sont atteignables mais pénibles ;
 *   - rien n'est porté par la seule couleur — chaque état est aussi écrit ;
 *   - la taille de base est en `rem`, donc suit les préférences du navigateur ; la mise en page tient au
 *     zoom 200 % et en largeur 320 px, sans défilement horizontal.
 *
 * Note d'histoire, pour que l'erreur ne se répète pas : ces règles vivaient dans
 * `templates/signing/assets/`, hors des chemins d'AssetMapper. Elles n'étaient donc **jamais servies** —
 * la production affichait le squelette Symfony, `background-color: skyblue` compris, et aucune des
 * garanties ci-dessus ne s'appliquait réellement.
 */

/* ---------------------------------------------------------------- jetons */
:root {
    --bg: #e9ecef;
    --surface: #ffffff;
    --panel: #f4f6f7;
    --panel-2: #eceff2;
    --border: #d4dade;
    --border-strong: #767f88;   /* 4,1:1 sur --surface, au-delà des 3:1 exigés pour une bordure de champ */
    --ink: #14191e;   /* 17,7:1 */
    --muted: #59636d;   /* 6,1:1 */
    --faint: #6c757e;   /* 4,7:1 */
    --accent: #126b74;   /* 6,2:1 */
    --accent-ink: #0b5158;   /* 9,0:1 */
    --accent-wash: #e2f0f0;
    --critical: #a5271d;   /* 7,2:1 */
    --critical-wash: #fbeceb;
    --warn: #7d5009;   /* 6,9:1 */
    --warn-wash: #f9f0df;
    --ok: #2f7d47;   /* 5,1:1 */
    --ok-wash: #e7f2ea;
    --radius: 6px;
    --shadow: 0 1px 0 rgba(20, 25, 30, .04), 0 2px 6px rgba(20, 25, 30, .05);
    --mono: ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", Menlo, Consolas, monospace;
    --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Thème sombre : suit la préférence du système. */
@media (prefers-color-scheme: dark) {
    :root {
        --bg: #0f141a;
        --surface: #161d24;
        --panel: #1a222b;
        --panel-2: #1f2831;
        --border: #2b353f;
        --border-strong: #65727d;   /* 3,4:1 sur --surface, au-delà des 3:1 exigés pour une bordure de champ */
        --ink: #e7ecf0;   /* 14,3:1 */
        --muted: #a8b2bc;   /* 7,9:1 */
        --faint: #97a1ab;   /* 6,5:1 */
        --accent: #4fbcc2;   /* 7,5:1 */
        --accent-ink: #8fd6da;   /* 10,4:1 */
        --accent-wash: #123037;
        --critical: #f08a80;   /* 7,0:1 */
        --critical-wash: #34201e;
        --warn: #dda44a;   /* 7,7:1 */
        --warn-wash: #2f2716;
        --ok: #6cc487;   /* 8,0:1 */
        --ok-wash: #16291d;
        --shadow: 0 1px 0 rgba(0, 0, 0, .2), 0 2px 8px rgba(0, 0, 0, .28);
    }
}

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 1rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* Focus visible en toutes circonstances. Trois pixels et un décalage : contre une bordure de champ déjà
   épaisse, deux pixels collés se confondent avec le champ lui-même. */
:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
    border-radius: 2px;
}

a { color: var(--accent-ink); }
a:hover { text-decoration-thickness: 2px; }

h1 { font-size: 1.6rem; line-height: 1.25; margin: 0 0 1rem; }
h2 { font-size: 1.25rem; line-height: 1.3; margin: 2rem 0 0.75rem; }
h3 { font-size: 1.05rem; margin: 1.5rem 0 0.5rem; }

code, .mono { font-family: var(--mono); font-size: 0.9em; }
code {
    background: var(--panel-2);
    padding: 0.1em 0.35em;
    border-radius: 3px;
    /* Une empreinte SHA-256 doit pouvoir se couper : sinon elle pousse la page en largeur. */
    word-break: break-all;
}

/* Chiffres à largeur fixe : les horodatages d'un journal s'alignent, donc se comparent. */
time, td, .tabular { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- ossature */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 10;
    padding: 0.75rem 1rem;
    background: var(--surface);
    color: var(--accent-ink);
    border: 2px solid var(--accent);
    border-radius: 0 0 var(--radius) 0;
}
/* Il apparaît au focus — c'est tout son objet, et il reste le premier élément atteignable. */
.skip-link:focus { left: 0; }

.page-header {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    padding: 0.75rem 1.5rem;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.brand {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--mono);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ink);
}

/* La marque suit le thème : c'est ce que ne permettrait pas un `<img>`, dont les couleurs sont figées
   dans le fichier et jureraient sur fond sombre. */
.brand__icon { width: 1.4em; height: 1.4em; flex: none; }
.brand__icon .bm-bg { fill: var(--accent-ink); }
.brand__icon .bm-nib { fill: var(--surface); }
.brand__icon .bm-hole { fill: var(--accent-ink); }
.brand__icon .bm-slit { stroke: var(--accent-ink); stroke-width: 1.5; stroke-linecap: round; fill: none; }

.page-header nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    margin-left: auto;
}

.page {
    max-width: 44rem;
    margin: 0 auto;
    padding: 2rem 1.5rem 3rem;
}
/* Les tableaux de l'administration ont besoin de plus de large que le parcours. */
.page--wide { max-width: 72rem; }

.page-footer {
    max-width: 44rem;
    margin: 0 auto;
    padding: 1.5rem;
    color: var(--muted);
    font-size: 0.9rem;
    border-top: 1px solid var(--border);
}

/* ---------------------------------------------------------------- formulaires */
.field { margin: 1.25rem 0; }

label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.35rem;
}

.hint {
    margin: 0.35rem 0 0;
    color: var(--muted);
    font-size: 0.9rem;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="file"],
textarea,
select {
    width: 100%;
    max-width: 30rem;
    min-height: 2.75rem;
    padding: 0.5rem 0.65rem;
    font: inherit;
    color: var(--ink);
    background: var(--surface);
    border: 2px solid var(--border-strong);
    border-radius: var(--radius);
}

textarea { min-height: 6rem; }

.field--checkbox { display: flex; align-items: flex-start; gap: 0.75rem; }
.field--checkbox label { font-weight: 400; margin: 0; }
.field--checkbox input[type="checkbox"] {
    /* Cible confortable, y compris au doigt. */
    width: 1.5rem;
    height: 1.5rem;
    margin-top: 0.1rem;
    flex: none;
    accent-color: var(--accent);
}

fieldset {
    margin: 1.5rem 0;
    padding: 1rem 1.25rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}
legend { font-weight: 600; padding: 0 0.4rem; }

/* ---------------------------------------------------------------- actions */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0.5rem 1.1rem;
    font: inherit;
    font-weight: 600;
    color: var(--ink);
    background: var(--surface);
    border: 2px solid var(--border-strong);
    border-radius: var(--radius);
    cursor: pointer;
    text-decoration: none;
}
.button:hover { background: var(--panel-2); }

.button--primary {
    color: var(--surface);
    background: var(--accent-ink);
    border-color: var(--accent-ink);
}
.button--primary:hover { background: var(--accent); border-color: var(--accent); }

.button--quiet {
    min-height: 2.25rem;
    padding: 0.35rem 0.75rem;
    font-size: 0.9rem;
    font-weight: 500;
}

.button--danger { color: var(--critical); border-color: var(--critical); }
.button--danger:hover { background: var(--critical-wash); }

.secondary-action {
    display: inline-block;
    margin-top: 1rem;
    color: var(--muted);
}

.actions { list-style: none; margin: 1.5rem 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1rem; }
/* Barre de filtres : le champ y perd ses marges verticales.
 *
 * Sans cela, la marge basse de `.field` s'ajoutait sous le `<select>` et poussait le bouton d'un cran
 * vers le bas — `align-items: flex-end` alignait bien les boîtes, mais l'une d'elles portait une marge
 * que l'autre n'avait pas. Défaut visible sur la liste des enveloppes. */
.filters { display: flex; gap: 1rem; align-items: flex-end; flex-wrap: wrap; }
.filters .field { margin: 0; }
/* Et la hauteur du bouton s'aligne sur celle du champ : `.button--quiet` la réduit à 2,25 rem, ce qui
   dans une barre de filtres se lit comme un défaut d'alignement — parce que c'en est un. */
.filters .button { margin-bottom: 0; min-height: 2.75rem; }

/* ---------------------------------------------------------------- messages */
/* La couleur ne porte jamais l'information : le texte du message le fait, la barre latérale n'est qu'un
   renfort. Les variantes se distinguent aussi par leur rôle ARIA côté gabarit — `alert` pour ce qui doit
   interrompre, `status` pour ce qui informe sans voler le focus. */
.message {
    margin: 1.25rem 0;
    padding: 0.85rem 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 5px solid var(--muted);
    border-radius: var(--radius);
}
.message--error { border-left-color: var(--critical); background: var(--critical-wash); }
.message--warning { border-left-color: var(--warn); background: var(--warn-wash); }
.message--success { border-left-color: var(--ok); background: var(--ok-wash); }
.message--info { border-left-color: var(--accent); background: var(--accent-wash); }

/* ---------------------------------------------------------------- listes de faits */
.summary {
    margin: 1.5rem 0;
    padding: 1rem 1.25rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    display: grid;
    grid-template-columns: minmax(10rem, auto) 1fr;
    gap: 0.5rem 1.5rem;
}
.summary dt { font-weight: 600; color: var(--muted); }
.summary dd { margin: 0; }

@media (max-width: 34rem) {
    /* Colonne unique sous 544 px : deux colonnes y écraseraient les valeurs longues. */
    .summary { grid-template-columns: 1fr; gap: 0.15rem; }
    .summary dd { margin-bottom: 0.6rem; }
}

/* Texte destiné aux seuls lecteurs d'écran : il complète un libellé trop court pour être compris hors
   contexte — « 3 » seul ne dit pas « page 3 ». Jamais `display: none`, qui le retirerait aussi de la
   restitution vocale. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ---------------------------------------------------------------- pagination */
.pagination { margin: 1.5rem 0; }
.pagination ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.pagination a,
.pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0 0.6rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    text-decoration: none;
}
/* La page courante n'est pas un lien, et ne se signale pas par la seule couleur : elle porte
   `aria-current="page"`, et un encadré plus épais. */
.pagination [aria-current="page"] {
    font-weight: 700;
    border-width: 3px;
    border-color: var(--accent);
    color: var(--ink);
}
.pagination__gap { border: 0; background: none; min-width: auto; }

/* ---------------------------------------------------------------- tableaux */
/* Le tableau défile dans sa propre boîte ; la page, elle, ne défile jamais horizontalement — ce qui
   casserait la lecture au zoom 200 %. */
main { overflow-x: auto; }

table {
    border-collapse: collapse;
    width: 100%;
    margin: 1rem 0;
    background: var(--surface);
    font-size: 0.95rem;
}
caption {
    text-align: left;
    font-weight: 600;
    color: var(--muted);
    margin-bottom: 0.5rem;
}
th, td {
    border: 1px solid var(--border);
    padding: 0.5rem 0.75rem;
    text-align: left;
    vertical-align: top;
}
thead th { background: var(--panel); }
tbody tr:nth-child(even) { background: var(--panel); }

/* ---------------------------------------------------------------- divers */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}

@media print {
    .page-header nav, .actions, .skip-link { display: none; }
    body { background: #fff; color: #000; }
}

/* ---------------------------------------------------------------- canevas de signature

   Le tracé est capté trois fois plus grand qu'il n'est affiché (cf. le contrôleur Stimulus) : la
   hauteur en CSS est donc une hauteur d'affichage, pas la résolution du tracé. L'impression est la
   seule raison d'être de cette zone, et un tracé capté à la taille de l'écran en sort crénelé.

   `touch-action: none` est indispensable : sans lui, un glissement du doigt fait défiler la page au
   lieu de dessiner, sur tout téléphone. */
.signature-pad {
    display: block;
    width: 100%;
    max-width: 32rem;
    height: 9rem;
    margin: 0 0 0.75rem;
    background: var(--surface);
    border: 2px dashed var(--border-strong);
    border-radius: var(--radius);
    touch-action: none;
    cursor: crosshair;
}
.signature-pad:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }