:root {
    /* Palette — ardoise froide + un seul accent teal (univers securite/technique) */
    --ink: #111A22;
    --ink-2: #18242E;
    --ink-line: #263743;
    --ink-text: #9FB0BA;
    --ink-text-hi: #FFFFFF;

    --bg: #F6F8F9;
    --surface: #FFFFFF;
    --border: #E4E9EC;
    --hairline: #EEF1F3;
    --text: #16232C;
    --muted: #5A6B74;
    --faint: #84949C;

    --accent: #0E7C86;
    --accent-hi: #0B929E;
    --accent-tint: #E4F1F2;

    --ok: #1F7A54;       --ok-bg: #E3F0E9;
    --grace: #9A6412;    --grace-bg: #FBF0D9;
    --expire: #B23A2B;   --expire-bg: #F7E4E0;
    --neutre: #6B7A82;   --neutre-bg: #EDF1F2;

    --mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
    --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

    --r: 10px;
    --shadow: 0 1px 2px rgba(16,26,34,.04), 0 4px 16px rgba(16,26,34,.04);
    --shadow-hi: 0 2px 6px rgba(16,26,34,.06), 0 12px 32px rgba(16,26,34,.10);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    font-family: 'IBM Plex Sans', system-ui, -apple-system, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
body { background: #F4F6F8; }

/* En-têtes des écrans hérités (les écrans refondus utilisent les classes Bootstrap) */
.app-content h1:not(.h4):not(.h5) { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 1.3rem; color: #16232C; }

/* Signature : les cles / codes en jetons monospaces (teinte marque) */
code {
    font-family: var(--mono);
    font-size: 0.82em;
    letter-spacing: 0.02em;
    background: #EAF1FB;
    color: #1B2A5E;
    padding: 0.16em 0.5em;
    border-radius: 6px;
    white-space: nowrap;
}
code.court { background: transparent; padding: 0; color: var(--muted); letter-spacing: 0; }

label { display: block; font-size: 0.8rem; font-weight: 500; color: var(--muted); margin: 0.85rem 0 0.35rem; }

.ico { display: inline-flex; width: 18px; height: 18px; flex: none; }
.ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

input, select, textarea {
    width: 100%; font-family: inherit; font-size: 0.92rem; color: var(--text);
    background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 0.52rem 0.68rem;
    transition: border-color .12s ease, box-shadow .12s ease;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }

/* UNE CASE À COCHER N'EST PAS UN CHAMP DE SAISIE.
   La mesure ci-dessus vise « input » sans distinction de type : elle donnait donc
   « width: 100% » aux cases et aux radios, qui remplissaient leur ligne et
   écrasaient le libellé posé à côté — à zéro, texte débordant hors de sa boîte,
   sans que rien ne le signale. Deux cas se sont vus le 2026-09-09 sur le seul
   écran VNT-09, à une heure d'intervalle ; SOIXANTE-SIX règles du dépôt
   rattrapaient déjà la mesure une par une, avec sept tailles différentes.

   *** POURQUOI :where() — LA SEULE PARTIE DÉLICATE ***
   Écrite « input[type="checkbox"] », cette règle vaudrait 0,1,1 en spécificité.
   Elle battrait alors les rattrapages posés sur une CLASSE DE L'INPUT, qui ne
   valent que 0,1,0 — et en particulier .tbl-case du gabarit de liste, que
   lot02-cibles-tactiles.css porte à 24 px sous 1024 px. La règle tactile serait
   perdue, alors que « une cible ne rétrécit jamais » (docs/cibles-tactiles.md).

   :where() a une spécificité NULLE : « input:where([type=…]) » vaut donc 0,0,1,
   exactement comme la règle qu'elle corrige. Elle l'emporte sur elle par l'ordre
   — elle est juste en dessous, dans le même fichier — et perd contre les 66
   rattrapages, tous en 0,1,0 ou plus, qui gardent chacun sa taille. Une règle
   générale doit être la plus faible de la cascade, pas la plus forte.

   LES VALEURS SONT CELLES DU GABARIT, et non un choix de plus : .mx-check et la
   règle des bascules disent toutes deux 17 px avec accent-color
   var(--et-form-blue). C'est ce qu'une case à cocher est dans cette charte, et
   c'est désormais ce qu'elle est partout où aucune règle ne dit autre chose.
   flex: none va avec : sans lui, une ligne serrée la ferait rétrécir sous ses
   17 px — l'autre moitié du même défaut. */
input:where([type="checkbox"], [type="radio"]) {
    flex: none;
    width: 17px;
    height: 17px;
    accent-color: var(--et-form-blue);
}

.splash { min-height: 100vh; display: grid; place-items: center; color: var(--muted); font-size: 0.95rem; background: var(--bg); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* =====================================================================
   Écran de connexion — LES .cx-* ONT DÉMÉNAGÉ : css/ecran-connexion.css.
   Ils vivaient ici, dans la feuille que TOUS les écrans chargent, pour des
   classes qu'un seul emploie. Ils suivent désormais la règle des .ecran-*.css :
   un écran, une feuille, un <link> dans App.razor. Rien n'est resté derrière.
   ===================================================================== */

/* =====================================================================
   Structure du shell (façon AdminLTE) — le thème gère les couleurs.
   ===================================================================== */
.app-wrapper { min-height: 100vh; }
.app-sidebar {
    position: fixed; inset: 0 auto 0 0;
    width: 250px; height: 100vh; overflow-y: auto;
    z-index: 1040; transition: transform .2s ease;
}
.app-header {
    position: sticky; top: 0; z-index: 1030;
    margin-left: 250px; transition: margin-left .2s ease;
    min-height: 56px;
}
.app-main {
    margin-left: 250px; min-height: 100vh;
    display: flex; flex-direction: column;
    transition: margin-left .2s ease;
}
.app-content { flex: 1; padding: 14px 0 28px; }
.app-footer { padding: 12px 16px; }

.sidebar-collapse .app-sidebar { transform: translateX(-100%); }
.sidebar-collapse .app-header,
.sidebar-collapse .app-main { margin-left: 0; }

.sidebar-brand { padding: 14px 16px; }
.sidebar-menu .nav-link { display: flex; align-items: center; gap: .6rem; padding: .55rem .75rem; }
.sidebar-menu .nav-link .nav-icon { width: 1.15rem; text-align: center; flex: none; }
.sidebar-menu .nav-link p { margin: 0; }

@media (max-width: 992px) {
    .app-header, .app-main { margin-left: 0; }
    .app-sidebar { transform: translateX(-100%); }
    .app-wrapper:not(.sidebar-collapse) .app-sidebar { transform: none; box-shadow: 0 0 40px rgba(0,0,0,.35); }
}

/* Badge rouge (statuts de licence expirée / révoquée) — complète et-active/expired/none du thème */
.badge.et-danger { background: #FCEBEA; color: #9F1B12; font-weight: 600; }
.badge.et-danger .bi { margin-left: -.35rem; }

/* =====================================================================
   Certificat « Droits de Licence produit » (écran + impression PDF)
   ===================================================================== */
.cert-zone { background: #E9ECF1; padding: 24px 0; }
.cert {
    background: #fff; width: 210mm; max-width: 100%; min-height: 297mm;
    margin: 0 auto; padding: 22mm 20mm; box-shadow: 0 4px 24px rgba(0,0,0,.12);
    color: #1A2230; display: flex; flex-direction: column;
}
.cert-date { text-align: right; font-size: 12px; color: #333; font-weight: 700; }
.cert-logo { display: flex; justify-content: center; margin: 6px 0 4px; }
.cert-logo img { height: 84px; width: auto; }
.cert-titre { text-align: center; font-size: 24px; font-weight: 800; text-decoration: underline; margin: 6px 0 26px; }
.cert-soustitre { text-align: center; font-size: 17px; font-weight: 700; margin: 22px 0 14px; }
.cert-table { width: 78%; margin: 0 auto; border-collapse: separate; border-spacing: 0 8px; }
.cert-table td { border: 1px solid #B9C1CC; padding: 9px 16px; font-size: 13.5px; background: #fff; }
.cert-table td.lbl { font-weight: 700; width: 45%; }
.cert-table td.val { text-align: center; }
.cert-table td.val.strong { font-weight: 700; }
.cert-spacer { flex: 1; }
.cert-footer { border-top: 1px solid #D5DBE2; margin-top: 20px; padding-top: 10px; font-size: 8.5px; color: #444; display: flex; gap: 24px; }
.cert-footer .col { flex: 1; }
.cert-footer .marque { font-weight: 800; }
.cert-footer .marque .b { color: #1B2A5E; } .cert-footer .marque .o { color: #F26C16; }
.cert-web { text-align: center; font-size: 9px; color: #1B2A5E; margin-top: 6px; }

/* Impression : n'imprimer que le certificat, sans le shell */
@media print {
    .app-header, .app-sidebar, .app-footer, .no-print { display: none !important; }
    .app-main { margin: 0 !important; }
    .app-content, .app-content .container-fluid { padding: 0 !important; }
    body, .cert-zone { background: #fff !important; }
    .cert { box-shadow: none; width: auto; padding: 0; margin: 0; }
    @page { size: A4; margin: 12mm; }
}

/* Certificat d'authenticité (nouveau design) — impression */
.cert2-desk { display:flex; align-items:flex-start; justify-content:center; padding:28px 12px; background:#E9ECEF; }
@media print {
    .cert2-desk { background:#fff !important; padding:0 !important; min-height:0 !important; display:block !important; }
    .cert2-page { box-shadow:none !important; }
    @page { size: A4; margin: 0; }
}