/* ==========================================================================
   SYSTÈME DE DESIGN — Suivi présence & matériel
   Un seul fichier de référence : jetons, composants, thèmes, responsive.
   Les composants réutilisent ces jetons ; aucun style n'est redéfini ailleurs.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. JETONS
   -------------------------------------------------------------------------- */
:root {
    /* Palette */
    --bleu-fonce: #1e3a8a;
    --bleu:       #3b82f6;
    --bleu-600:   #2563eb;
    --violet:     #7c3aed;
    --vert:       #10b981;
    --vert-700:   #047857;
    --orange:     #f59e0b;
    --orange-700: #b45309;
    --rouge:      #ef4444;
    --rouge-700:  #b91c1c;

    /* Surfaces */
    --fond:     #f6f8fc;
    --carte:    #ffffff;
    --carte-2:  #f4f7fb;
    --bord:     #e6ecf4;
    --bord-2:   #cbd5e1;

    /* Dégradés de marque */
    --degrade:       linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
    --degrade-clair: linear-gradient(135deg, #eff6ff 0%, #f5f3ff 100%);

    /* Texte */
    --texte:   #0f172a;
    --texte-2: #475569;
    --texte-3: #64748b;
    --sur-couleur: #ffffff;

    /* Fonds teintés (badges, tuiles, alertes) */
    --bleu-c:   #eff6ff;
    --violet-c: #f5f3ff;
    --vert-c:   #ecfdf5;
    --orange-c: #fffbeb;
    --rouge-c:  #fef2f2;
    --gris-c:   #f1f5f9;

    /* Accent de la page en cours */
    --accent:       var(--bleu-600);
    --accent-fonce: var(--bleu-fonce);
    --accent-clair: var(--bleu-c);

    /* Espacement — échelle de 4 px */
    --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px;
    --e5: 20px; --e6: 24px; --e8: 32px; --e10: 40px;

    /* Rayons */
    --r-s: 10px; --r-m: 14px; --r-l: 20px; --r-plein: 999px;

    /* Ombres : diffuses et colorées plutôt que grises, pour un rendu plus doux */
    --o-1: 0 1px 2px rgba(30, 58, 138, .06);
    --o-2: 0 1px 3px rgba(30, 58, 138, .06), 0 6px 16px rgba(30, 58, 138, .06);
    --o-3: 0 12px 32px rgba(30, 58, 138, .12), 0 2px 6px rgba(30, 58, 138, .06);
    --o-4: 0 28px 70px rgba(15, 23, 42, .26);

    /* Typographie */
    --titre: 'Manrope', 'Segoe UI', system-ui, sans-serif;
    --corps: 'Inter', 'Segoe UI', system-ui, sans-serif;
    --mono:  'IBM Plex Mono', 'Consolas', monospace;

    --t-xs: .75rem; --t-s: .8125rem; --t-b: .9375rem;
    --t-m: 1rem;    --t-l: 1.25rem;  --t-xl: 1.75rem; --t-xxl: 2.5rem;

    /* Mouvement */
    --v-rapide: 120ms cubic-bezier(.4, 0, .2, 1);
    --v-normal: 200ms cubic-bezier(.4, 0, .2, 1);

    --lateral: 260px;
    --lateral-reduit: 76px;
    --haut: 66px;
}

/* Accent par page */
body.p-index      { --accent: var(--bleu-600); --accent-fonce: var(--bleu-fonce); --accent-clair: var(--bleu-c); }
body.p-tableau    { --accent: var(--bleu-600); --accent-fonce: var(--bleu-fonce); --accent-clair: var(--bleu-c); }
body.p-presence   { --accent: var(--vert);     --accent-fonce: var(--vert-700);   --accent-clair: var(--vert-c); }
body.p-materiel   { --accent: var(--bleu);     --accent-fonce: var(--bleu-fonce); --accent-clair: var(--bleu-c); }
body.p-inventaire { --accent: var(--orange);   --accent-fonce: var(--orange-700); --accent-clair: var(--orange-c); }
body.p-agents       { --accent: var(--violet);   --accent-fonce: #5b21b6;           --accent-clair: var(--violet-c); }
body.p-outils       { --accent: var(--bleu);     --accent-fonce: var(--bleu-fonce); --accent-clair: var(--bleu-c); }
body.p-consommables { --accent: var(--orange);   --accent-fonce: var(--orange-700); --accent-clair: var(--orange-c); }
body.p-gestion      { --accent: var(--violet);   --accent-fonce: #5b21b6;           --accent-clair: var(--violet-c); }
body.p-etiquettes { --accent: var(--violet);   --accent-fonce: #5b21b6;           --accent-clair: var(--violet-c); }
body.p-utilisateurs, body.p-sauvegarde,
body.p-diagnostic { --accent: var(--bleu-fonce); --accent-fonce: #172554; --accent-clair: var(--bleu-c); }

/* Thème sombre : seules les surfaces changent, la palette reste identique */
body.sombre {
    --fond:    #0b1220;
    --carte:   #131c2e;
    --carte-2: #1b2537;
    --bord:    #263145;
    --bord-2:  #35425c;
    --texte:   #e8eef8;
    --texte-2: #9fb0c9;
    --texte-3: #7788a3;
    --bleu-c:   #172554;
    --violet-c: #2a1a52;
    --vert-c:   #0a3a2c;
    --orange-c: #402a08;
    --rouge-c:  #451619;
    --gris-c:   #1b2537;
    --o-1: 0 1px 2px rgba(0, 0, 0, .4);
    --o-2: 0 2px 10px rgba(0, 0, 0, .38);
    --o-3: 0 12px 34px rgba(0, 0, 0, .5);

    /* Les teintes « 700 » servent de texte sur les fonds teintés :
       sur surface sombre, elles doivent s'éclaircir et non s'assombrir. */
    --vert-700:   #6ee7b7;
    --orange-700: #fcd34d;
    --rouge-700:  #fca5a5;
    --bleu-fonce: #bfdbfe;
    --violet:     #c4b5fd;
}

/* L'accent foncé sert de texte sur --accent-clair : inversé en thème sombre. */
body.sombre.p-index, body.sombre.p-tableau, body.sombre.p-presence,
body.sombre.p-materiel, body.sombre.p-inventaire, body.sombre.p-gestion,
body.sombre.p-etiquettes, body.sombre.p-utilisateurs, body.sombre.p-sauvegarde,
body.sombre.p-diagnostic, body.sombre.p-agents, body.sombre.p-outils,
body.sombre.p-consommables {
    --accent-fonce: #dbeafe;
}

/* Le dégradé des boutons et jauges garde ses couleurs d'origine en sombre */
body.sombre .bouton-plein, body.sombre .bouton-principal,
body.sombre .marque-logo, body.sombre .avatar {
    background: linear-gradient(135deg, #2563eb, #7c3aed);
    color: #fff;
}

body.sombre .jauge { background: linear-gradient(90deg, #3b82f6, #7c3aed); }
body.sombre .graphe-barre { background: linear-gradient(180deg, #60a5fa, #3b82f6); }
body.sombre .vignette { background: #fff; color: #000; }

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--fond);
    background-image:
        radial-gradient(1100px 520px at 12% -12%, rgba(59, 130, 246, .07), transparent 60%),
        radial-gradient(900px 460px at 92% 4%, rgba(124, 58, 237, .06), transparent 58%);
    background-attachment: fixed;
    color: var(--texte);
    font-family: var(--corps);
    font-size: var(--t-b);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    transition: background var(--v-normal), color var(--v-normal);
}

h1, h2, h3 { margin: 0; font-family: var(--titre); letter-spacing: -.02em; }
h1 { font-size: var(--t-xl); font-weight: 800; line-height: 1.2; }
h2 { font-size: var(--t-m);  font-weight: 700; }

a { color: var(--accent); }
code, .mono { font-family: var(--mono); font-size: .86em; }
.ic { flex: none; vertical-align: middle; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: var(--r-s); }

::selection { background: var(--accent-clair); color: var(--accent-fonce); }

/* --------------------------------------------------------------------------
   2. STRUCTURE
   -------------------------------------------------------------------------- */
.coquille { display: flex; min-height: 100vh; }

.lateral {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--lateral);
    background: var(--carte);
    border-right: 1px solid var(--bord);
    display: flex;
    flex-direction: column;
    padding: var(--e4) var(--e3) var(--e3);
    z-index: 40;
    transition: width var(--v-normal), transform var(--v-normal);
}

body.reduit .lateral { width: var(--lateral-reduit); }
body.reduit .zone { margin-left: var(--lateral-reduit); }
body.reduit .lateral .marque-texte,
body.reduit .lateral .nav a span,
body.reduit .lateral .nav-groupe,
body.reduit .compte-infos { display: none; }
body.reduit .lateral .nav a { justify-content: center; padding-left: 0; padding-right: 0; }
body.reduit .compte { justify-content: center; }

.marque { display: flex; align-items: center; gap: var(--e3); padding: var(--e1) var(--e2) var(--e4); }

.marque-logo {
    width: 44px; height: 44px;
    flex: none;
    border-radius: var(--r-m);
    display: grid;
    place-items: center;
    font-family: var(--titre);
    font-weight: 800;
    font-size: var(--t-b);
}

/* Sans image, on retombe sur les initiales dans une pastille dégradée. */
span.marque-logo {
    background: var(--degrade);
    color: #fff;
    box-shadow: 0 6px 16px rgba(37, 99, 235, .32);
}

img.marque-logo { object-fit: contain; padding: 0; }

/* Le logo complet, sur les pages d'accueil et l'affiche */
.logo-accueil { margin: 0 0 var(--e4); text-align: center; }
.logo-large { max-width: min(280px, 70%); height: auto; display: inline-block; }
.affiche-logo { max-width: 300px; height: auto; margin-bottom: var(--e2); }

/* En thème sombre, le logo garde ses couleurs sur un pastillon clair */
body.sombre img.marque-logo,
body.sombre .logo-large,
body.sombre .affiche-logo {
    background: rgba(255, 255, 255, .92);
    border-radius: var(--r-s);
    padding: 3px;
}

.marque-nom  { display: block; font-family: var(--titre); font-weight: 800; font-size: var(--t-b); line-height: 1.25; }
.marque-sous { display: block; font-size: var(--t-xs); color: var(--texte-3); }

.nav { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }

.nav-groupe {
    font-size: var(--t-xs);
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--texte-3);
    font-weight: 700;
    padding: var(--e4) var(--e3) var(--e1);
}

.nav a {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--e3);
    font-size: var(--t-b);
    font-weight: 500;
    color: var(--texte-2);
    text-decoration: none;
    padding: 11px var(--e3);
    border-radius: var(--r-s);
    transition: background var(--v-rapide), color var(--v-rapide);
}

.nav a .ic { color: var(--puce, var(--texte-3)); transition: color var(--v-rapide); }
.nav a[data-c="index"]      { --puce: var(--bleu-600); }
.nav a[data-c="tableau"]    { --puce: var(--bleu-fonce); }
.nav a[data-c="inventaire"] { --puce: var(--orange); }
.nav a[data-c="presence"]   { --puce: var(--vert); }
.nav a[data-c="materiel"]   { --puce: var(--bleu); }
.nav a[data-c="gestion"]      { --puce: var(--violet); }
.nav a[data-c="agents"]       { --puce: var(--violet); }
.nav a[data-c="outils"]       { --puce: var(--bleu); }
.nav a[data-c="consommables"] { --puce: var(--orange); }
.nav a[data-c="etiquettes"] { --puce: var(--violet); }
.nav a[data-c="utilisateurs"], .nav a[data-c="sauvegarde"] { --puce: var(--bleu-fonce); }
.nav a[data-c="diagnostic"] { --puce: var(--vert); }

.nav a:hover { background: var(--carte-2); color: var(--texte); }

.nav a.actif {
    background: var(--accent-clair);
    color: var(--accent-fonce);
    font-weight: 700;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent);
}

.nav a.actif .ic {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 40%, transparent);
}



.nav a.actif .ic { color: var(--accent); }

.lateral-bas { margin-top: auto; display: grid; gap: var(--e2); padding-top: var(--e3); }

.compte {
    display: flex;
    align-items: center;
    gap: var(--e3);
    padding: var(--e2) var(--e3);
    background: var(--carte-2);
    border-radius: var(--r-s);
}

.compte-infos { min-width: 0; }
.compte-nom  { display: block; font-weight: 700; font-size: var(--t-s); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.compte-role { display: block; font-size: var(--t-xs); color: var(--texte-3); }

.zone { flex: 1; margin-left: var(--lateral); min-width: 0; transition: margin var(--v-normal); }

/* Barre supérieure */
.haut {
    position: sticky;
    top: 0;
    z-index: 30;
    height: var(--haut);
    display: flex;
    align-items: center;
    gap: var(--e3);
    padding: 0 var(--e6);
    background: color-mix(in srgb, var(--carte) 88%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--bord);
    box-shadow: var(--o-1);
}

.haut-titre { font-family: var(--titre); font-weight: 800; font-size: var(--t-m); white-space: nowrap; }

.recherche-globale {
    position: relative;
    flex: 1 1 200px;
    max-width: 380px;
    margin-left: var(--e4);
}

.recherche-globale .ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--texte-3); }
.recherche-globale input { width: 100%; padding-left: 38px; min-height: 40px; }

.haut-actions { margin-left: auto; display: flex; align-items: center; gap: var(--e2); }

.icone-btn {
    position: relative;
    width: 40px; height: 40px;
    display: grid;
    place-items: center;
    background: transparent;
    color: var(--texte-2);
    border: 1px solid transparent;
    border-radius: var(--r-s);
    cursor: pointer;
    transition: background var(--v-rapide), color var(--v-rapide);
}

.icone-btn:hover { background: var(--carte-2); color: var(--texte); }

.pastille-nb {
    position: absolute;
    top: 5px; right: 5px;
    min-width: 17px; height: 17px;
    padding: 0 4px;
    border-radius: var(--r-plein);
    background: var(--rouge);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
}

.pastille-nb[hidden] { display: none; }

.avatar {
    width: 36px; height: 36px;
    border-radius: var(--r-plein);
    background: linear-gradient(135deg, var(--bleu-600), var(--violet));
    color: #fff;
    display: grid;
    place-items: center;
    font-family: var(--titre);
    font-weight: 700;
    font-size: var(--t-s);
    flex: none;
}

/* Menus déroulants */
.menu-conteneur { position: relative; }

.menu-deroulant {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 250px;
    background: var(--carte);
    border: 1px solid var(--bord);
    border-radius: var(--r-m);
    box-shadow: var(--o-3);
    padding: var(--e2);
    z-index: 50;
    animation: surgir var(--v-normal) both;
}

.menu-deroulant[hidden] { display: none; }
.menu-entete { padding: var(--e2) var(--e3); border-bottom: 1px solid var(--bord); margin-bottom: var(--e1); }
.menu-entete strong { display: block; font-size: var(--t-b); }
.menu-entete span { font-size: var(--t-xs); color: var(--texte-3); }

.menu-deroulant a, .menu-deroulant button {
    display: flex;
    align-items: center;
    gap: var(--e3);
    width: 100%;
    padding: 10px var(--e3);
    border: none;
    background: none;
    font: inherit;
    font-size: var(--t-b);
    color: var(--texte-2);
    text-align: left;
    text-decoration: none;
    border-radius: var(--r-s);
    cursor: pointer;
}

.menu-deroulant a:hover, .menu-deroulant button:hover { background: var(--carte-2); color: var(--texte); }
.menu-deroulant .danger { color: var(--rouge-700); }
.menu-deroulant .danger:hover { background: var(--rouge-c); }

.menu-vide { padding: var(--e4) var(--e3); color: var(--texte-3); font-size: var(--t-s); text-align: center; }
.menu-ligne { display: grid; gap: 2px; padding: var(--e2) var(--e3); border-radius: var(--r-s); }
.menu-ligne:hover { background: var(--carte-2); }
.menu-ligne strong { font-size: var(--t-s); font-weight: 600; }
.menu-ligne span { font-size: var(--t-xs); color: var(--texte-3); }

@keyframes surgir { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.contenu { padding: var(--e6) var(--e6) var(--e10); max-width: 1440px; }
.contenu > * { animation: monter var(--v-normal) both; }
@keyframes monter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.pied {
    padding: 0 var(--e6) var(--e6);
    color: var(--texte-3);
    font-size: var(--t-xs);
    display: flex;
    justify-content: space-between;
    gap: var(--e4);
    flex-wrap: wrap;
}

/* Voile du menu coulissant (mobile) */
.voile {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .45);
    z-index: 35;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--v-normal);
}

body.menu-ouvert .voile { opacity: 1; pointer-events: auto; }

/* --------------------------------------------------------------------------
   3. EN-TÊTE DE PAGE
   -------------------------------------------------------------------------- */
.entete-page {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--e5);
    flex-wrap: wrap;
    margin-bottom: var(--e6);
    padding: var(--e6);
    background:
        radial-gradient(600px 200px at 0% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%),
        var(--carte);
    border: 1px solid var(--bord);
    border-radius: var(--r-l);
    box-shadow: var(--o-2);
    overflow: hidden;
}

/* Filet coloré en tête de bandeau : rappelle la couleur de la section */
.entete-page::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 35%, var(--violet)));
}

.oeil {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--t-xs);
    text-transform: uppercase;
    letter-spacing: .1em;
    font-weight: 700;
    color: var(--accent-fonce);
    background: var(--accent-clair);
    padding: 4px 10px;
    border-radius: var(--r-plein);
    margin: 0 0 var(--e2);
}

.intro { color: var(--texte-2); max-width: 64ch; margin: var(--e2) 0 0; font-size: var(--t-b); }

/* --------------------------------------------------------------------------
   4. CARTES
   -------------------------------------------------------------------------- */
.bloc {
    background: var(--carte);
    border: 1px solid var(--bord);
    border-radius: var(--r-l);
    box-shadow: var(--o-2);
    padding: 0 0 var(--e2);
    margin-bottom: var(--e5);
    overflow: hidden;
    transition: box-shadow var(--v-normal);
}

.bloc:hover { box-shadow: var(--o-3); }

.titre-bloc {
    display: flex;
    align-items: center;
    gap: var(--e3);
    font-family: var(--titre);
    font-size: var(--t-m);
    font-weight: 700;
    padding: var(--e4) var(--e6);
    margin: 0 0 var(--e2);
    border-bottom: 1px solid var(--bord);
    background: linear-gradient(180deg, var(--carte-2), var(--carte));
}

.titre-bloc::before {
    content: '';
    width: 4px; height: 20px;
    border-radius: var(--r-plein);
    background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 40%, var(--violet)));
    flex: none;
}

.titre-bloc .ic { color: var(--accent); }

.bloc > *:not(.titre-bloc) { margin-left: var(--e6); margin-right: var(--e6); }
.bloc > .tableau, .bloc > .table-enveloppe { width: calc(100% - var(--e6) * 2); }

.deux-colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e5); align-items: start; }
.grille-2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--e5); align-items: start; }

/* --------------------------------------------------------------------------
   5. CARTES STATISTIQUES
   -------------------------------------------------------------------------- */
.grille-kpi { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--e4); margin-bottom: var(--e5); }

.kpi {
    position: relative;
    background: var(--carte);
    border: 1px solid var(--bord);
    border-radius: var(--r-l);
    box-shadow: var(--o-2);
    padding: var(--e5);
    display: grid;
    gap: var(--e2);
    overflow: hidden;
    transition: transform var(--v-normal), box-shadow var(--v-normal);
}

/* Halo de la teinte, en fond de carte */
.kpi::before {
    content: '';
    position: absolute;
    top: -40px; right: -40px;
    width: 130px; height: 130px;
    border-radius: 50%;
    background: var(--teinte, var(--accent));
    opacity: .07;
    pointer-events: none;
}

.kpi:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 36px color-mix(in srgb, var(--teinte, var(--accent)) 22%, transparent);
}

.kpi-haut { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); }

.kpi-icone {
    width: 44px; height: 44px;
    display: grid;
    place-items: center;
    border-radius: var(--r-m);
    background: var(--teinte, var(--bleu-600));
    color: #fff;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--teinte, var(--bleu-600)) 38%, transparent);
}

.kpi-valeur {
    font-family: var(--titre);
    font-size: var(--t-xxl);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.03em;
    color: var(--texte);
}

.kpi-label { font-size: var(--t-s); color: var(--texte-2); }

.kpi-evol {
    display: inline-flex;
    align-items: center;
    gap: var(--e1);
    font-size: var(--t-xs);
    font-weight: 700;
    padding: 3px var(--e2);
    border-radius: var(--r-plein);
}

.kpi-evol.hausse { background: var(--vert-c);   color: var(--vert-700); }
.kpi-evol.baisse { background: var(--rouge-c);  color: var(--rouge-700); }
.kpi-evol.stable { background: var(--gris-c);   color: var(--texte-2); }
.kpi-compare { font-size: var(--t-xs); color: var(--texte-3); }

/* Teintes tournantes */
.grille-kpi .kpi:nth-child(1) { --teinte: var(--bleu-600); --teinte-c: var(--bleu-c); }
.grille-kpi .kpi:nth-child(2) { --teinte: var(--violet);   --teinte-c: var(--violet-c); }
.grille-kpi .kpi:nth-child(3) { --teinte: var(--orange);   --teinte-c: var(--orange-c); }
.grille-kpi .kpi:nth-child(4) { --teinte: var(--vert);     --teinte-c: var(--vert-c); }
.grille-kpi .kpi.kpi-alerte   { --teinte: var(--rouge);    --teinte-c: var(--rouge-c); }
.kpi-alerte .kpi-valeur { color: var(--rouge-700); }

/* --------------------------------------------------------------------------
   6. BOUTONS
   -------------------------------------------------------------------------- */
.bouton {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--e2);
    min-height: 42px;
    padding: 10px var(--e4);
    font-family: var(--corps);
    font-size: var(--t-b);
    font-weight: 600;
    color: var(--bleu-fonce);
    background: var(--carte);
    border: 1px solid var(--bord-2);
    border-radius: var(--r-s);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--v-rapide), border-color var(--v-rapide),
                color var(--v-rapide), box-shadow var(--v-rapide), transform var(--v-rapide);
}

.bouton:hover {
    background: var(--accent-clair);
    border-color: color-mix(in srgb, var(--accent) 35%, transparent);
    color: var(--accent-fonce);
    box-shadow: var(--o-1);
}
.bouton:active { transform: translateY(1px); box-shadow: none; }

.bouton[disabled], .bouton.desactive { opacity: .5; pointer-events: none; }

/* Principal : dégradé bleu → violet */
.bouton-plein, .bouton-principal {
    background: var(--degrade);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 14px rgba(37, 99, 235, .3);
}

.bouton-plein:hover, .bouton-principal:hover {
    background: linear-gradient(135deg, #1d4ed8, #6d28d9);
    color: #fff;
    box-shadow: 0 8px 22px rgba(37, 99, 235, .38);
    transform: translateY(-1px);
}

.bouton-plein:active, .bouton-principal:active { transform: translateY(0); }

/* Teintes assombries : le blanc doit rester lisible dessus (≥ 4,5:1). */
.bouton-succes { background: #047857; border-color: transparent; color: #fff; }
.bouton-succes { box-shadow: 0 4px 14px rgba(4, 120, 87, .28); }
.bouton-succes:hover { background: #065f46; color: #fff; transform: translateY(-1px); }
.bouton-avert  { background: #b45309; border-color: transparent; color: #fff; }
.bouton-avert:hover { background: #92400e; color: #fff; }
.bouton-danger { background: #b91c1c; border-color: transparent; color: #fff; }
.bouton-danger { box-shadow: 0 4px 14px rgba(185, 28, 28, .26); }
.bouton-danger:hover { background: #991b1b; color: #fff; transform: translateY(-1px); }

.bouton-petit { min-height: 34px; padding: 6px var(--e3); font-size: var(--t-s); }
.bouton-large { width: 100%; }

/* Indicateur de chargement */
.bouton.charge { color: transparent !important; pointer-events: none; }
.bouton.charge::after {
    content: '';
    position: absolute;
    width: 17px; height: 17px;
    border: 2px solid rgba(255, 255, 255, .45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: tourne .6s linear infinite;
}
.bouton.charge:not(.bouton-plein):not(.bouton-succes):not(.bouton-avert):not(.bouton-danger)::after {
    border-color: var(--bord-2); border-top-color: var(--accent);
}
@keyframes tourne { to { transform: rotate(360deg); } }

.groupe-boutons { display: flex; gap: var(--e2); flex-wrap: wrap; }

/* Actions en ligne dans les tableaux */
.lien {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 30px;
    padding: 3px var(--e2);
    background: none;
    border: 1px solid transparent;
    border-radius: var(--r-s);
    font: inherit;
    font-size: var(--t-s);
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
    cursor: pointer;
    transition: background var(--v-rapide);
}

.lien:hover { background: var(--accent-clair); }
.lien-danger { color: var(--rouge-700); }
.lien-danger:hover { background: var(--rouge-c); }
.en-ligne { display: inline; }
.col-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e1); }

/* --------------------------------------------------------------------------
   7. FORMULAIRES
   -------------------------------------------------------------------------- */
.formulaire { display: grid; gap: var(--e4); margin-bottom: var(--e5); }
.formulaire-large { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); align-items: end; }
.formulaire-large button { grid-column: 1 / -1; justify-self: start; }
.champs-groupe { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--e4); }

.formulaire label, .filtre label {
    display: grid;
    gap: 6px;
    font-size: var(--t-s);
    font-weight: 600;
    color: var(--texte-2);
}

input[type="text"], input[type="password"], input[type="number"],
input[type="search"], input[type="datetime-local"], input[type="date"], select, textarea {
    font-family: var(--corps);
    font-size: var(--t-b);
    background: var(--carte);
    border: 1px solid var(--bord-2);
    border-radius: var(--r-s);
    color: var(--texte);
    padding: 11px var(--e3);
    min-height: 44px;
    transition: border-color var(--v-rapide), box-shadow var(--v-rapide);
}

input::placeholder { color: var(--texte-3); }

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-clair);
}

input[type="file"] { font-size: var(--t-s); color: var(--texte-2); }
select { appearance: none; padding-right: var(--e8); background-image: linear-gradient(45deg, transparent 50%, var(--texte-2) 50%), linear-gradient(135deg, var(--texte-2) 50%, transparent 50%); background-position: calc(100% - 18px) 19px, calc(100% - 13px) 19px; background-size: 5px 5px; background-repeat: no-repeat; }

.champ-erreur input, .champ-erreur select { border-color: var(--rouge); }
.message-erreur { display: flex; align-items: center; gap: 5px; color: var(--rouge-700); font-size: var(--t-xs); font-weight: 600; }

.filtre { display: flex; align-items: flex-end; gap: var(--e3); flex-wrap: wrap; }

.case { display: flex; gap: var(--e3); align-items: flex-start; margin-bottom: var(--e3); font-size: var(--t-b); }
.case input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--accent); }
.case-danger span { color: var(--rouge-700); }

.ligne-champ { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ligne-champ input[type="number"] { width: 80px; min-height: 34px; padding: 4px var(--e2); font-size: var(--t-s); }
.ligne-champ input[type="file"] { max-width: 148px; font-size: var(--t-xs); }
.champs-consommable[hidden], .champs-unique[hidden] { display: none; }
.champs-consommable, .champs-unique { display: grid; gap: var(--e4); }

/* --------------------------------------------------------------------------
   8. TABLEAUX
   -------------------------------------------------------------------------- */
.table-outils {
    display: flex;
    align-items: center;
    gap: var(--e3);
    flex-wrap: wrap;
    margin-bottom: var(--e3);
}

.table-recherche { position: relative; flex: 1 1 220px; max-width: 340px; }
.table-recherche .ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--texte-3); }
.table-recherche input { width: 100%; padding-left: 38px; min-height: 40px; }
.table-compte { font-size: var(--t-s); color: var(--texte-3); margin-left: auto; }

.table-enveloppe { overflow-x: auto; }
.tableau { width: 100%; border-collapse: collapse; margin-bottom: var(--e3); }

.tableau th {
    font-size: var(--t-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--texte-2);
    text-align: left;
    padding: var(--e3) var(--e4);
    background: var(--carte-2);
    border-bottom: 1px solid var(--bord);
    white-space: nowrap;
}

.tableau th:first-child { border-radius: var(--r-s) 0 0 0; }
.tableau th:last-child  { border-radius: 0 var(--r-s) 0 0; }

.tableau th[data-tri] { cursor: pointer; user-select: none; }
.tableau th[data-tri]:hover { color: var(--accent); }
.tableau th[data-tri]::after { content: '↕'; margin-left: 6px; opacity: .35; font-size: .9em; }
.tableau th[data-tri][data-sens="asc"]::after  { content: '↑'; opacity: 1; color: var(--accent); }
.tableau th[data-tri][data-sens="desc"]::after { content: '↓'; opacity: 1; color: var(--accent); }

.tableau td { padding: var(--e4); border-bottom: 1px solid var(--bord); vertical-align: middle; }
.tableau tbody tr { transition: background var(--v-rapide); }
.tableau tbody tr:hover td { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.tableau tr:last-child td { border-bottom: none; }
.tableau .fort { font-family: var(--titre); font-weight: 700; }

/* Ligne et carte d'édition */
.ligne-edition[hidden], .fiche-edition[hidden] { display: none; }

.ligne-edition td {
    background: var(--accent-clair);
    padding: var(--e5);
}

.fiche-edition {
    display: grid;
    gap: var(--e3);
    margin: var(--e3) 0 0;
    padding: var(--e4);
    background: var(--accent-clair);
    border-radius: var(--r-m);
    animation: monter var(--v-normal) both;
}

.fiche-edition label { display: grid; gap: 5px; font-size: var(--t-s); font-weight: 600; color: var(--texte-2); }
.edition-boutons { display: flex; gap: var(--e2); flex-wrap: wrap; grid-column: 1 / -1; }
.formulaire.edition { margin-bottom: var(--e2); }

.ligne-alerte td { background: var(--rouge-c); }
.ligne-active td { background: var(--vert-c); }
.ligne-eteinte { opacity: .55; }

.note-ligne { display: block; font-size: var(--t-xs); color: var(--texte-3); margin-top: 2px; }
.col-barre { width: 18%; min-width: 90px; }

.jauge { display: block; height: 8px; border-radius: var(--r-plein); background: linear-gradient(90deg, var(--bleu-600), var(--violet)); min-width: 5px; }
.jauge-alerte { background: linear-gradient(90deg, #f87171, var(--rouge)); }

.col-photo { width: 76px; }
.vignette-photo { display: block; width: 44px; height: 44px; object-fit: cover; border-radius: var(--r-s); border: 1px solid var(--bord); background: var(--carte-2); }
.vignette-vide { background: repeating-linear-gradient(45deg, var(--carte-2) 0 6px, var(--fond) 6px 12px); }
img.vignette-photo { cursor: zoom-in; transition: transform var(--v-rapide); }
img.vignette-photo:hover { transform: scale(1.06); }

/* --- Matériel détenu par un agent (page Présence) ------------------------ */
.tenus { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }

.tenu {
    display: flex;
    align-items: center;
    gap: var(--e3);
    padding: var(--e2);
    background: var(--orange-c);
    border: 1px solid #f8dcae;
    border-radius: var(--r-m);
    max-width: 340px;
}

.tenu-retard { background: var(--rouge-c); }

.tenu-photo {
    width: 64px; height: 64px;
    flex: none;
    border-radius: var(--r-s);
    object-fit: cover;
    background: var(--carte);
    border: 1px solid var(--bord);
    cursor: zoom-in;
    transition: transform var(--v-rapide), box-shadow var(--v-rapide);
}

img.tenu-photo:hover { transform: scale(1.06); box-shadow: var(--o-2); }

.tenu-photo-vide {
    display: grid;
    place-items: center;
    color: var(--orange-700);
}

.tenu-retard .tenu-photo-vide { color: var(--rouge-700); }

.tenu-corps { min-width: 0; display: grid; gap: 0; line-height: 1.3; }
.tenu-nom { font-size: var(--t-b); font-weight: 700; color: var(--orange-700); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tenu-retard .tenu-nom { color: var(--rouge-700); }
.tenu-sous { font-size: var(--t-xs); color: var(--texte-2); white-space: nowrap; }

.pagination { display: flex; align-items: center; justify-content: flex-end; gap: var(--e2); padding-bottom: var(--e3); }
.pagination[hidden] { display: none; }
.pagination-info { font-size: var(--t-s); color: var(--texte-2); margin-right: auto; }

.vide { color: var(--texte-3); padding: var(--e3) 0 var(--e4); }
.etapes { margin: 0 0 var(--e4); padding-left: var(--e5); display: grid; gap: var(--e2); color: var(--texte-2); }

/* --------------------------------------------------------------------------
   9. BADGES
   -------------------------------------------------------------------------- */
.etiquette {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--t-xs);
    font-weight: 700;
    padding: 4px 11px;
    border-radius: var(--r-plein);
    background: var(--gris-c);
    color: var(--texte-2);
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .05);
    margin-right: var(--e1);
    white-space: nowrap;
}

.etiquette-ok    { background: var(--vert-c);   color: var(--vert-700); }
.etiquette-jaune { background: var(--orange-c); color: var(--orange-700); }
.etiquette-refus { background: var(--rouge-c);  color: var(--rouge-700); }
.etiquette-info  { background: var(--bleu-c);   color: var(--bleu-fonce); }
.etiquette-eteinte { background: var(--gris-c); color: var(--texte-3); }

/* --------------------------------------------------------------------------
   10. ALERTES EN PAGE
   -------------------------------------------------------------------------- */
.alerte {
    display: grid;
    gap: var(--e1);
    padding: var(--e4) var(--e5);
    background: var(--carte);
    border: 1px solid var(--bord);
    border-left: 4px solid var(--bord-2);
    border-radius: var(--r-m);
    box-shadow: var(--o-1);
    margin-bottom: var(--e4);
    font-size: var(--t-b);
}

.alerte-ok    { border-left-color: var(--vert);  background: var(--vert-c); }
.alerte-refus { border-left-color: var(--rouge); background: var(--rouge-c); }

/* --------------------------------------------------------------------------
   11. NOTIFICATIONS (toasts)
   -------------------------------------------------------------------------- */
.toasts {
    position: fixed;
    top: calc(var(--haut) + 12px);
    right: var(--e5);
    z-index: 70;
    display: grid;
    gap: var(--e2);
    width: min(370px, calc(100vw - 32px));
}

.toast {
    display: flex;
    align-items: flex-start;
    gap: var(--e3);
    padding: var(--e3) var(--e4);
    background: var(--carte);
    border: 1px solid var(--bord);
    border-left: 4px solid var(--bleu-600);
    border-radius: var(--r-m);
    box-shadow: var(--o-3);
    animation: glisser var(--v-normal) both;
}

.toast.sortie { animation: partir var(--v-normal) both; }
.toast-icone { color: var(--bleu-600); margin-top: 2px; }
.toast-corps { flex: 1; min-width: 0; }
.toast-titre { display: block; font-weight: 700; font-size: var(--t-b); }
.toast-texte { display: block; font-size: var(--t-s); color: var(--texte-2); }
.toast-fermer { background: none; border: none; color: var(--texte-3); cursor: pointer; padding: 2px; border-radius: var(--r-s); }
.toast-fermer:hover { background: var(--carte-2); color: var(--texte); }

.toast-succes { border-left-color: var(--vert); }   .toast-succes .toast-icone { color: var(--vert-700); }
.toast-erreur { border-left-color: var(--rouge); }  .toast-erreur .toast-icone { color: var(--rouge-700); }
.toast-avert  { border-left-color: var(--orange); } .toast-avert  .toast-icone { color: var(--orange-700); }

@keyframes glisser { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes partir  { to { opacity: 0; transform: translateX(24px); } }

/* --------------------------------------------------------------------------
   12. FENÊTRES MODALES
   -------------------------------------------------------------------------- */
.modale {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    place-items: center;
    padding: var(--e5);
    background: rgba(15, 23, 42, .5);
    backdrop-filter: blur(4px);
    animation: fondu var(--v-normal) both;
}

.modale[hidden] { display: none; }

.modale-boite {
    width: min(620px, 100%);
    max-height: calc(100vh - 40px);
    overflow: auto;
    background: var(--carte);
    border-radius: var(--r-l);
    box-shadow: var(--o-4);
    padding: var(--e5);
    display: grid;
    gap: var(--e4);
    animation: modale-entre var(--v-normal) both;
}

.modale-petite .modale-boite { width: min(440px, 100%); }
.modale-entete { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--e4); }
.modale-titre { margin: 0; font-family: var(--titre); font-weight: 800; font-size: var(--t-l); }
.modale-texte { margin: 0; color: var(--texte-2); }
.modale-pied { display: flex; justify-content: flex-end; gap: var(--e2); flex-wrap: wrap; }

.modale-avatar {
    width: 46px; height: 46px;
    border-radius: var(--r-m);
    display: grid;
    place-items: center;
    background: var(--rouge-c);
    color: var(--rouge-700);
    flex: none;
}

@keyframes fondu { from { opacity: 0; } to { opacity: 1; } }
@keyframes modale-entre { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }

/* --- Visionneuse de photo ------------------------------------------------ */
.loupe {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: grid;
    place-items: center;
    padding: var(--e5);
    background: rgba(15, 23, 42, .82);
    backdrop-filter: blur(4px);
    cursor: zoom-out;
    animation: fondu var(--v-normal) both;
}

.loupe[hidden] { display: none; }

.loupe img {
    max-width: min(92vw, 900px);
    max-height: 82vh;
    border-radius: var(--r-m);
    box-shadow: var(--o-4);
    background: #fff;
    animation: modale-entre var(--v-normal) both;
}

.loupe-legende {
    margin-top: var(--e4);
    color: #fff;
    font-family: var(--titre);
    font-weight: 700;
    font-size: var(--t-m);
    text-align: center;
}

.loupe-legende span { display: block; font-family: var(--corps); font-weight: 400; font-size: var(--t-s); opacity: .8; margin-top: 2px; }

/* --------------------------------------------------------------------------
   13. POSTE DE SCAN
   -------------------------------------------------------------------------- */
.kiosque { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, .9fr); gap: var(--e5); align-items: start; }

.kiosque-scan, .kiosque-etat {
    background: var(--carte);
    border: 1px solid var(--bord);
    border-radius: var(--r-l);
    box-shadow: var(--o-2);
    padding: var(--e6);
}

.interlock { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e3); margin: 0 0 var(--e5); padding: 0; }

.cellule {
    position: relative;
    background: var(--carte-2);
    border: 1px solid var(--bord);
    border-radius: var(--r-m);
    padding: var(--e4) var(--e4) var(--e3) 48px;
    min-height: 104px;
    display: grid;
    align-content: start;
    gap: 3px;
    transition: background var(--v-normal), border-color var(--v-normal);
}

.cellule-num {
    position: absolute;
    top: var(--e4); left: var(--e3);
    width: 24px; height: 24px;
    display: grid;
    place-items: center;
    border-radius: var(--r-s);
    background: var(--carte);
    border: 1px solid var(--bord-2);
    font-family: var(--mono);
    font-size: var(--t-xs);
    color: var(--texte-3);
}

.cellule-titre { font-family: var(--titre); font-size: var(--t-b); font-weight: 700; }
.cellule-valeur { font-family: var(--mono); font-size: var(--t-s); color: var(--texte-3); word-break: break-all; }

.cellule.attendue {
    background: var(--bleu-c);
    border-color: var(--bleu);
    box-shadow: 0 0 0 4px rgba(59, 130, 246, .12);
}
.cellule.attendue .cellule-num { background: var(--bleu-600); border-color: var(--bleu-600); color: #fff; animation: battement 1.3s ease-in-out infinite; }
.cellule.attendue .cellule-valeur { color: var(--bleu-fonce); font-weight: 600; }
.cellule.remplie {
    background: var(--vert-c);
    border-color: var(--vert);
    box-shadow: 0 0 0 4px rgba(16, 185, 129, .12);
}
.cellule.remplie .cellule-num { background: var(--vert); border-color: var(--vert); color: #fff; }
.cellule.remplie .cellule-valeur { color: var(--vert-700); font-weight: 600; }
.cellule.inactive { opacity: .5; }

@keyframes battement { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

.zone-saisie { display: grid; gap: 6px; margin-bottom: var(--e3); }
.zone-saisie label { font-size: var(--t-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--texte-2); }

#champ-scan { font-family: var(--mono); font-size: var(--t-l); padding: var(--e4) var(--e4); min-height: 64px; border-width: 2px; width: 100%; }
#champ-scan:focus { border-color: var(--bleu-600); box-shadow: 0 0 0 4px var(--bleu-c); }

/* --- Reconnaissance en direct du champ de lecture ------------------------ */
.saisie-enveloppe { position: relative; }

.suggestions {
    position: absolute;
    top: calc(100% + 6px);
    left: 0; right: 0;
    z-index: 20;
    margin: 0;
    padding: var(--e1);
    list-style: none;
    background: var(--carte);
    border: 1px solid var(--bord);
    border-radius: var(--r-m);
    box-shadow: var(--o-3);
    max-height: 320px;
    overflow-y: auto;
}

.suggestions[hidden] { display: none; }

.suggestion {
    display: flex;
    align-items: center;
    gap: var(--e3);
    padding: 10px var(--e3);
    border-radius: var(--r-s);
    cursor: pointer;
}

.suggestion:hover, .suggestion.actif { background: var(--accent-clair); }

.sug-genre { width: 6px; height: 34px; border-radius: 3px; flex: none; background: var(--bord-2); }
.sug-agent       { background: var(--violet); }
.sug-outil       { background: var(--bleu); }
.sug-consommable { background: var(--orange); }

.sug-corps { flex: 1; min-width: 0; display: grid; gap: 1px; }
.sug-nom { font-weight: 700; font-size: var(--t-b); }
.sug-etat { font-size: var(--t-xs); color: var(--texte-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sug-code { font-size: var(--t-xs); color: var(--texte-3); white-space: nowrap; }

/* Ligne d'annonce : ce que le code désigne et ce que le scan va produire */
.apercu {
    margin: 0 0 var(--e2);
    padding: 10px var(--e4);
    border-radius: var(--r-s);
    font-size: var(--t-s);
    font-weight: 600;
    background: var(--gris-c);
    color: var(--texte-2);
    border-left: 4px solid var(--bord-2);
}

.apercu[hidden] { display: none; }
.apercu-ok        { background: var(--vert-c);   color: var(--vert-700);   border-left-color: var(--vert); }
.apercu-attention { background: var(--orange-c); color: var(--orange-700); border-left-color: var(--orange); }
.apercu-refus     { background: var(--rouge-c);  color: var(--rouge-700);  border-left-color: var(--rouge); }

/* --- Récapitulatif de l'enregistrement ----------------------------------- */
.enregistre {
    margin-top: var(--e4);
    padding: var(--e4) var(--e5);
    background: var(--carte-2);
    border: 1px solid var(--bord);
    border-radius: var(--r-m);
    animation: monter var(--v-normal) both;
}

.enregistre[hidden] { display: none; }

.enregistre-titre {
    display: flex;
    align-items: center;
    gap: var(--e2);
    margin: 0 0 var(--e3);
    font-family: var(--titre);
    font-size: var(--t-s);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--vert-700);
}

.enregistre-liste {
    display: grid;
    grid-template-columns: minmax(120px, auto) 1fr;
    gap: 6px var(--e4);
    margin: 0;
    font-size: var(--t-s);
}

.enregistre-liste dt { color: var(--texte-2); font-weight: 600; }
.enregistre-liste dd { margin: 0; font-family: var(--mono); font-size: var(--t-xs); word-break: break-word; }

.aide { color: var(--texte-2); font-size: var(--t-s); margin: 0; }

.rappel {
    display: flex;
    align-items: center;
    gap: var(--e2);
    margin: 0 0 var(--e3);
    padding: var(--e3) var(--e4);
    background: var(--bleu-c);
    color: var(--bleu-fonce);
    border-radius: var(--r-s);
    font-size: var(--t-s);
    font-weight: 500;
}

.file-attente {
    display: flex;
    align-items: center;
    gap: var(--e2);
    margin: 0 0 var(--e3);
    padding: var(--e3) var(--e4);
    background: var(--orange-c);
    color: var(--orange-700);
    border-radius: var(--r-s);
    font-size: var(--t-s);
    font-weight: 700;
}

.file-attente[hidden] { display: none; }

/* Badge mémorisé : l'agent peut enchaîner plusieurs articles */
.badge-actif {
    display: flex;
    align-items: center;
    gap: var(--e2);
    flex-wrap: wrap;
    margin: 0 0 var(--e3);
    padding: 10px var(--e4);
    background: var(--violet-c);
    color: #5b21b6;
    border-radius: var(--r-s);
    font-size: var(--t-s);
}

.badge-actif[hidden] { display: none; }
.badge-actif strong { font-weight: 700; }
.badge-reste {
    margin-left: auto;
    font-size: var(--t-xs);
    padding: 2px var(--e2);
    background: rgba(124, 58, 237, .12);
    border-radius: var(--r-plein);
}
.badge-actif .lien { color: #5b21b6; }

.actions-tactiles { display: flex; flex-wrap: wrap; gap: var(--e3); margin-bottom: var(--e4); }

.jeton {
    flex: 1 1 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 76px;
    padding: var(--e3) var(--e4);
    font-family: var(--corps);
    font-size: var(--t-b);
    font-weight: 700;
    background: var(--jc, var(--carte-2));
    color: var(--jf, var(--texte));
    border: 1px solid var(--jb, var(--bord));
    border-radius: var(--r-m);
    cursor: pointer;
    transition: transform var(--v-rapide), filter var(--v-rapide), box-shadow var(--v-rapide);
}

.jeton[data-action="ENTREE"] { --jc: var(--vert-c);   --jf: var(--vert-700);   --jb: transparent; }
.jeton[data-action="SORTIE"] { --jc: var(--gris-c);   --jf: var(--texte);      --jb: var(--bord); }
.jeton[data-action="PRISE"]  { --jc: var(--bleu-c);   --jf: var(--bleu-fonce); --jb: transparent; }
.jeton[data-action="RETOUR"] { --jc: var(--violet-c); --jf: #5b21b6;           --jb: transparent; }

.jeton:hover { filter: brightness(.97); box-shadow: var(--o-1); }
.jeton:active { transform: translateY(1px); }
.jeton-vide { flex: 0 0 auto; min-height: 76px; color: var(--texte-3); font-weight: 600; background: var(--carte); }
.touche { font-family: var(--mono); font-size: var(--t-xs); opacity: .7; font-weight: 400; }

.camera { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; margin-bottom: var(--e4); }
.camera-note { color: var(--texte-3); font-size: var(--t-s); }

.camera-note-alerte {
    color: var(--orange-700);
    font-weight: 600;
    background: var(--orange-c);
    padding: var(--e2) var(--e3);
    border-radius: var(--r-s);
}

.ardoise {
    border: 1px solid var(--bord);
    border-left: 5px solid var(--bord-2);
    background: var(--carte-2);
    border-radius: var(--r-m);
    padding: var(--e5);
    min-height: 140px;
    transition: background var(--v-normal), border-color var(--v-normal);
}

.ardoise-titre { font-family: var(--titre); font-size: var(--t-xl); font-weight: 800; line-height: 1.15; margin: 0 0 var(--e1); }
.ardoise-message { margin: 0; font-size: var(--t-m); color: var(--texte-2); }
.ardoise-details { list-style: none; margin: var(--e3) 0 0; padding: 0; display: grid; gap: 3px; font-family: var(--mono); font-size: var(--t-s); color: var(--texte-3); }
.ardoise-ok {
    background: linear-gradient(135deg, var(--vert-c), var(--carte) 75%);
    border-color: var(--vert);
    border-left-color: var(--vert);
}
.ardoise-ok .ardoise-titre { color: var(--vert-700); }
.ardoise-refus {
    background: linear-gradient(135deg, var(--rouge-c), var(--carte) 75%);
    border-color: var(--rouge);
    border-left-color: var(--rouge);
}
.ardoise-refus .ardoise-titre { color: var(--rouge-700); }

.compteurs { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e3); margin-bottom: var(--e5); }

.compteur {
    display: grid;
    gap: 2px;
    padding: var(--e3) var(--e4);
    background: var(--cc, var(--carte-2));
    border-radius: var(--r-m);
}

.compteurs .compteur:nth-child(1) { --cc: var(--vert-c);   --cf: var(--vert-700); }
.compteurs .compteur:nth-child(2) { --cc: var(--bleu-c);   --cf: var(--bleu-fonce); }
.compteurs .compteur:nth-child(3) { --cc: var(--orange-c); --cf: var(--orange-700); }
.compteurs .compteur:nth-child(4) { --cc: var(--violet-c); --cf: #5b21b6; }
.compteur-valeur { font-family: var(--titre); font-size: var(--t-xl); font-weight: 800; line-height: 1; color: var(--cf, var(--texte)); }
.compteur-label { font-size: var(--t-xs); color: var(--texte-2); }
.compteur-alerte { --cc: var(--rouge-c); --cf: var(--rouge-700); }

.liste-materiel, .liste-journal { list-style: none; margin: 0 0 var(--e5); padding: 0; display: grid; gap: var(--e2); }

.materiel-ligne { display: flex !important; align-items: center; gap: var(--e3); }
.materiel-corps { flex: 1; min-width: 0; display: grid; gap: 1px; }

.materiel-photo {
    width: 62px; height: 62px;
    flex: none;
    border-radius: var(--r-s);
    object-fit: cover;
    background: var(--carte);
    border: 1px solid var(--bord);
}

.materiel-photo-vide { background: repeating-linear-gradient(45deg, var(--carte) 0 5px, var(--carte-2) 5px 10px); }
img.materiel-photo { cursor: zoom-in; transition: transform var(--v-rapide); }
img.materiel-photo:hover { transform: scale(1.06); }

.liste-materiel li, .liste-journal li {
    padding: var(--e3);
    display: grid;
    gap: 2px;
    font-size: var(--t-s);
    background: var(--carte-2);
    border-radius: var(--r-s);
    border-left: 3px solid var(--bleu);
}

.liste-materiel .code, .liste-journal .heure { font-family: var(--mono); font-size: var(--t-xs); color: var(--texte-3); }
.liste-materiel .nom { font-family: var(--titre); font-weight: 700; }
.liste-materiel .porteur, .liste-journal .qui { color: var(--texte-3); font-size: var(--t-xs); }
.liste-materiel .duree { font-family: var(--mono); font-size: var(--t-xs); color: var(--orange-700); font-weight: 600; }
.liste-journal li { border-left-color: var(--vert); }
.liste-journal .quoi { font-weight: 600; }
.liste-journal li.refus { background: var(--rouge-c); border-left-color: var(--rouge); }
.liste-journal li.refus .heure { color: var(--rouge-700); }
.liste-materiel li.vide, .liste-journal li.vide { color: var(--texte-3); border-left-color: var(--bord); background: transparent; }

.kiosque-etat > .titre-bloc { margin: 0 0 var(--e3); padding: 0 0 var(--e3); }

/* Fenêtre de visée */
.cadre-scan { position: relative; width: 100%; aspect-ratio: 4/3; border-radius: var(--r-m); overflow: hidden; background: var(--carte-2); }
.lecteur, .lecteur video, .lecteur canvas { width: 100%; height: 100%; object-fit: cover; display: block; }
.lecteur > img { display: none; }
.viseur {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 72%;
    aspect-ratio: 1;
    max-width: 76vh;
    pointer-events: none;
}
.coin { position: absolute; width: 36px; height: 36px; border: 4px solid var(--bleu); }
.coin-hg { top: 0; left: 0;  border-right: none; border-bottom: none; border-radius: 6px 0 0 0; }
.coin-hd { top: 0; right: 0; border-left: none;  border-bottom: none; border-radius: 0 6px 0 0; }
.coin-bg { bottom: 0; left: 0;  border-right: none; border-top: none; border-radius: 0 0 0 6px; }
.coin-bd { bottom: 0; right: 0; border-left: none;  border-top: none; border-radius: 0 0 6px 0; }
.ligne-scan {
    position: absolute;
    left: 4%; right: 4%;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, transparent, var(--bleu), transparent);
    animation: balayage 2.4s ease-in-out infinite;
}

@keyframes balayage { 0%, 100% { top: 3%; } 50% { top: 94%; } }

.modale-etape { margin: 0; padding: var(--e3) var(--e4); background: var(--bleu-c); color: var(--bleu-fonce); border-radius: var(--r-s); font-weight: 600; font-size: var(--t-s); }
.modale-retour { margin: 0; padding: var(--e3) var(--e4); border-radius: var(--r-s); font-weight: 600; font-size: var(--t-s); background: var(--vert-c); color: var(--vert-700); }
.modale-retour[hidden] { display: none; }
.modale-retour.refus { background: var(--rouge-c); color: var(--rouge-700); }
.modale-aide { margin: 0; color: var(--texte-3); font-size: var(--t-xs); }

/* --------------------------------------------------------------------------
   13 bis. FICHES EN CARTES (outils, consommables)
   -------------------------------------------------------------------------- */
.grille-fiches {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: var(--e4);
    margin-bottom: var(--e5);
}

.fiche {
    position: relative;
    display: grid;
    gap: var(--e3);
    align-content: start;
    padding: var(--e5);
    padding-left: calc(var(--e5) + 4px);
    background: var(--carte);
    border: 1px solid var(--bord);
    border-radius: var(--r-l);
    box-shadow: var(--o-2);
    transition: transform var(--v-normal), box-shadow var(--v-normal);
}

.fiche:hover { transform: translateY(-2px); box-shadow: var(--o-3); }

/* Un liseré de couleur porte l'état, visible d'un coup d'œil dans la grille */
.fiche::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    border-radius: var(--r-l) 0 0 var(--r-l);
    background: var(--fc, var(--bord-2));
}

.fiche-dispo       { --fc: var(--vert); }
.fiche-sorti       { --fc: var(--orange); }
.fiche-maintenance { --fc: var(--texte-3); }
.fiche-alerte      { --fc: var(--rouge); }

.fiche-haut { display: flex; align-items: flex-start; gap: var(--e3); }

.fiche-photo {
    width: 88px; height: 88px;
    flex: none;
    object-fit: cover;
    border-radius: var(--r-m);
    border: 1px solid var(--bord);
    background: var(--carte-2);
}

img.fiche-photo { cursor: zoom-in; transition: transform var(--v-rapide), box-shadow var(--v-rapide); }
img.fiche-photo:hover { transform: scale(1.04); box-shadow: var(--o-2); }

.fiche-photo-vide {
    display: grid;
    place-items: center;
    color: var(--fc, var(--texte-3));
    background: color-mix(in srgb, var(--fc, var(--bord)) 12%, var(--carte-2));
    border-color: transparent;
}

.fiche-titre { flex: 1; min-width: 0; display: grid; gap: 2px; }
.fiche-titre strong { font-family: var(--titre); font-size: var(--t-m); font-weight: 700; line-height: 1.25; }
.fiche-titre .mono { font-size: var(--t-xs); color: var(--texte-2); }

.fiche-categorie {
    justify-self: start;
    margin-top: var(--e1);
    padding: 2px 9px;
    border-radius: var(--r-plein);
    background: var(--carte-2);
    font-size: var(--t-xs);
    font-weight: 600;
    color: var(--texte-2);
}

.fiche-nombre {
    font-family: var(--titre);
    font-size: 2.1rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.03em;
    color: var(--vert-700);
}

.fiche-nombre.alerte { color: var(--rouge-700); }

.fiche-etat { display: grid; gap: var(--e1); justify-items: start; }
.fiche-etat .note-ligne { margin: 0; }

.fiche-jauge { display: grid; gap: 6px; }
.fiche-jauge-texte { display: flex; justify-content: space-between; gap: var(--e3); font-size: var(--t-xs); color: var(--texte-2); flex-wrap: wrap; }
.fiche-jauge-texte strong { color: var(--texte); }
.fiche-jauge .jauge { background: linear-gradient(90deg, var(--fc, var(--bleu)), color-mix(in srgb, var(--fc, var(--bleu)) 65%, #000)); }

.fiche-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--e2);
    padding-top: var(--e3);
    border-top: 1px solid var(--bord);
}

.ligne-champ-label { font-size: var(--t-xs); font-weight: 600; color: var(--texte-2); }

/* Identité dans les tableaux (page Agents) */
.cellule-identite { display: flex; align-items: center; gap: var(--e3); }

.pastille-avatar {
    width: 38px; height: 38px;
    flex: none;
    border-radius: var(--r-plein);
    display: grid;
    place-items: center;
    background: var(--accent-clair);
    color: var(--accent-fonce);
    font-family: var(--titre);
    font-weight: 700;
    font-size: var(--t-xs);
}

.cellule-identite strong { display: block; font-size: var(--t-b); }
.cellule-identite .note-ligne { margin-top: 0; }

/* --------------------------------------------------------------------------
   14. TABLEAU DE BORD
   -------------------------------------------------------------------------- */
.raccourcis { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--e3); margin-bottom: var(--e5); }

.raccourci {
    display: flex;
    align-items: center;
    gap: var(--e3);
    padding: var(--e4);
    background: var(--carte);
    border: 1px solid var(--bord);
    border-radius: var(--r-m);
    box-shadow: var(--o-1);
    text-decoration: none;
    color: var(--texte);
    transition: transform var(--v-normal), box-shadow var(--v-normal), border-color var(--v-normal);
}

.raccourci:hover { transform: translateY(-2px); box-shadow: var(--o-2); border-color: var(--rc, var(--bleu)); }
.raccourci-ic {
    width: 44px; height: 44px;
    display: grid;
    place-items: center;
    border-radius: var(--r-m);
    background: var(--rc, var(--bleu-600));
    color: #fff;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--rc, var(--bleu-600)) 34%, transparent);
}
.raccourci strong { display: block; font-size: var(--t-b); font-weight: 700; }
.raccourci span { display: block; font-size: var(--t-xs); color: var(--texte-3); }
.raccourci .ic-fin { margin-left: auto; color: var(--texte-3); }

.graphe {
    display: flex;
    align-items: stretch;
    gap: var(--e2);
    height: 210px;
    padding: var(--e3) 0 0;
}

.graphe-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    min-width: 0;
}

/* La tige prend toute la hauteur restante : c'est elle qui donne l'échelle. */
.graphe-tige {
    flex: 1;
    width: 100%;
    max-width: 46px;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.graphe-barre {
    width: 100%;
    border-radius: var(--r-s) var(--r-s) 0 0;
    background: linear-gradient(180deg, var(--bleu), var(--bleu-600));
    min-height: 4px;
    transition: filter var(--v-rapide);
    animation: pousse .5s cubic-bezier(.2, .8, .3, 1) both;
}

.graphe-col:hover .graphe-barre { filter: brightness(1.1); }
.graphe-jour { font-size: var(--t-xs); color: var(--texte-3); white-space: nowrap; }
.graphe-val  { font-size: var(--t-xs); font-weight: 700; color: var(--texte-2); }
@keyframes pousse { from { transform: scaleY(0); transform-origin: bottom; } to { transform: none; } }

.legende { display: flex; gap: var(--e4); flex-wrap: wrap; font-size: var(--t-xs); color: var(--texte-2); padding-bottom: var(--e3); }
.legende span { display: inline-flex; align-items: center; gap: 6px; }
.legende i { width: 10px; height: 10px; border-radius: 3px; background: var(--bleu-600); display: inline-block; }

.activites { list-style: none; margin: 0 0 var(--e4); padding: 0; display: grid; gap: var(--e2); }

.activite {
    display: flex;
    align-items: flex-start;
    gap: var(--e3);
    padding: var(--e3);
    border-radius: var(--r-s);
    transition: background var(--v-rapide);
}

.activite:hover { background: var(--carte-2); }
.activite-ic { width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--r-s); background: var(--ac, var(--bleu-c)); color: var(--af, var(--bleu-600)); }
.activite-corps { flex: 1; min-width: 0; }
.activite-titre { display: block; font-size: var(--t-s); font-weight: 600; }
.activite-sous  { display: block; font-size: var(--t-xs); color: var(--texte-3); }
.activite-heure { font-family: var(--mono); font-size: var(--t-xs); color: var(--texte-3); white-space: nowrap; }
.activite.ok    { --ac: var(--vert-c);   --af: var(--vert-700); }
.activite.refus { --ac: var(--rouge-c);  --af: var(--rouge-700); }
.activite.info  { --ac: var(--orange-c); --af: var(--orange-700); }

/* Squelettes de chargement */
.squelette { background: linear-gradient(90deg, var(--carte-2) 25%, var(--bord) 50%, var(--carte-2) 75%); background-size: 200% 100%; animation: scintille 1.3s infinite; border-radius: var(--r-s); }
@keyframes scintille { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* --------------------------------------------------------------------------
   14 bis. POINTAGE LIBRE PAR TÉLÉPHONE
   Page publique, pensée pour un écran de téléphone tenu à bout de bras.
   -------------------------------------------------------------------------- */
.mobile-plein {
    background:
        radial-gradient(700px 320px at 8% -6%, var(--bleu-c), transparent 62%),
        radial-gradient(620px 300px at 96% 104%, var(--violet-c), transparent 58%),
        var(--fond);
    min-height: 100vh;
}

.pointage { width: min(560px, 100%); margin: 0 auto; padding: var(--e4) var(--e4) var(--e8); display: grid; gap: var(--e4); }

.pointage-tete { display: flex; align-items: center; gap: var(--e3); padding: var(--e2) 0 var(--e1); }
.pointage-tete strong { display: block; font-family: var(--titre); font-size: var(--t-b); }
.pointage-tete span span { display: block; font-size: var(--t-xs); color: var(--texte-2); }

.carte-p {
    background: var(--carte);
    border: 1px solid var(--bord);
    border-radius: var(--r-l);
    box-shadow: var(--o-2);
    padding: var(--e5);
    display: grid;
    gap: var(--e3);
    animation: monter var(--v-normal) both;
}

.carte-p h1 { display: flex; align-items: center; gap: var(--e2); font-size: 1.6rem; }
.carte-p h2 { display: flex; align-items: center; gap: var(--e2); font-size: var(--t-m); }
.carte-p .formulaire { margin: 0; }
.carte-p-refus { border-color: #f6cccc; background: var(--rouge-c); }
.carte-p-refus h1 { color: var(--rouge-700); }

.carte-p-agent { text-align: center; justify-items: center; }
.carte-p-agent .formulaire { width: 100%; }
.avatar-grand { width: 68px; height: 68px; font-size: var(--t-l); border-radius: var(--r-l); }

.intro-p { margin: 0; color: var(--texte-2); font-size: var(--t-b); }

.verdict {
    display: grid;
    gap: var(--e1);
    padding: var(--e4) var(--e5);
    border-radius: var(--r-m);
    border-left: 5px solid var(--bord-2);
    background: var(--carte);
    box-shadow: var(--o-1);
    animation: monter var(--v-normal) both;
}

.verdict strong { font-family: var(--titre); font-size: var(--t-l); }
.verdict span { font-size: var(--t-b); }
.verdict ul { margin: var(--e2) 0 0; padding-left: var(--e5); font-size: var(--t-s); color: var(--texte-2); }
.verdict-ok    { background: var(--vert-c);  border-left-color: var(--vert); }
.verdict-ok strong { color: var(--vert-700); }
.verdict-refus { background: var(--rouge-c); border-left-color: var(--rouge); }
.verdict-refus strong { color: var(--rouge-700); }

.note-camera {
    margin: 0;
    padding: var(--e3) var(--e4);
    background: var(--orange-c);
    color: var(--orange-700);
    border-radius: var(--r-s);
    font-size: var(--t-s);
    line-height: 1.5;
}

.note-camera[hidden] { display: none; }
.note-camera strong { display: block; margin-bottom: 2px; }

.pied-liens { display: flex; gap: var(--e4); flex-wrap: wrap; justify-content: center; }

.pointage-pied {
    display: grid;
    gap: var(--e2);
    justify-items: center;
    text-align: center;
    font-size: var(--t-xs);
    color: var(--texte-2);
    padding-bottom: var(--e5);
}

/* Les boutons de pointage doivent être atteignables au pouce */
.pointage .bouton-large { min-height: 58px; font-size: var(--t-m); }

/* --------------------------------------------------------------------------
   15. PAGES SIMPLES (connexion, installation)
   -------------------------------------------------------------------------- */
.page-simple {
    display: grid;
    place-items: center;
    min-height: 100vh;
    padding: var(--e6) var(--e5);
    background:
        radial-gradient(900px 440px at 10% -10%, var(--bleu-c), transparent 62%),
        radial-gradient(780px 400px at 92% 110%, var(--violet-c), transparent 58%),
        var(--fond);
}

.carte-install {
    width: min(620px, 100%);
    background: var(--carte);
    border: 1px solid var(--bord);
    border-radius: var(--r-l);
    box-shadow: var(--o-3);
    padding: var(--e8);
    animation: monter var(--v-normal) both;
}

.carte-install::before {
    content: '';
    display: block;
    height: 4px;
    margin: calc(var(--e8) * -1) calc(var(--e8) * -1) var(--e6);
    border-radius: var(--r-l) var(--r-l) 0 0;
    background: linear-gradient(90deg, var(--bleu-600), var(--violet));
}

.liens-install { display: grid; gap: var(--e2); margin-top: var(--e5); }
.note { color: var(--texte-3); font-size: var(--t-s); }

/* --------------------------------------------------------------------------
   16. PLANCHES DE CODES-BARRES
   -------------------------------------------------------------------------- */
.bloc-impression { margin-bottom: var(--e8); }
.consigne { color: var(--texte-2); font-size: var(--t-s); margin: 0 0 var(--e4); }
.planche { display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); gap: var(--e3); }

.vignette {
    background: #fff;
    color: #000;
    border: 1px solid var(--bord-2);
    border-radius: var(--r-m);
    padding: var(--e4);
    display: grid;
    gap: 3px;
    justify-items: center;
    text-align: center;
    page-break-inside: avoid;
    break-inside: avoid;
}

.vignette-titre { font-family: var(--titre); font-weight: 700; font-size: var(--t-b); line-height: 1.25; }
.vignette-sous { font-size: var(--t-xs); color: #475569; }
.vignette-rang { font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .12em; color: #94a3b8; }
.vignette-action { border-width: 2px; border-color: #000; }
.vignette svg { max-width: 100%; height: auto; }
/* La marge blanche autour du QR (« zone de silence ») est exigée par la norme :
   sans elle, beaucoup de lecteurs échouent. Quatre modules minimum, soit ~12 px
   pour un code de 148 px. On la garde même si l'étiquette est découpée au ras. */
.cb-qr {
    display: grid;
    place-items: center;
    margin: var(--e2) 0 var(--e1);
    padding: 12px;
    background: #fff;
}

.cb-qr img, .cb-qr canvas { display: block; }
.cb-texte { font-family: var(--mono); font-size: var(--t-s); letter-spacing: .04em; }

/* --- Affiche de pointage (une page A4) ----------------------------------- */
.regler-url {
    display: grid;
    gap: var(--e2);
    max-width: 640px;
    margin: 0 auto var(--e4);
    padding: var(--e4);
    background: var(--carte-2);
    border: 1px solid var(--bord);
    border-radius: var(--r-m);
}

.regler-url label { font-size: var(--t-s); font-weight: 600; color: var(--texte-2); }
.regler-url .ligne-champ input { flex: 1 1 240px; min-height: 42px; font-family: var(--mono); font-size: var(--t-s); }
.puce-url { font-family: var(--mono); font-size: var(--t-xs); }

.affiche {
    background: #fff;
    color: #0f172a;
    border: 2px solid var(--bord-2);
    border-radius: var(--r-l);
    padding: var(--e8);
    text-align: center;
    display: grid;
    justify-items: center;
    gap: var(--e3);
    max-width: 640px;
    margin: 0 auto;
    page-break-inside: avoid;
}

.affiche-oeil { margin: 0; font-size: var(--t-s); font-weight: 700; text-transform: uppercase; letter-spacing: .22em; color: var(--bleu-600); }
.affiche-titre { margin: 0; font-family: var(--titre); font-size: 2rem; font-weight: 800; }
.affiche-qr { padding: var(--e4); border: 1px solid var(--bord); border-radius: var(--r-m); }
.affiche-consigne { margin: 0; font-size: 1.35rem; font-weight: 700; }

.affiche-etapes {
    margin: var(--e2) 0 0;
    padding-left: var(--e5);
    text-align: left;
    display: grid;
    gap: 6px;
    font-size: var(--t-b);
    color: #334155;
    max-width: 420px;
}

.affiche-note {
    margin: var(--e2) 0 0;
    padding: var(--e3) var(--e4);
    background: #f1f5f9;
    border-radius: var(--r-s);
    font-size: var(--t-s);
    color: #334155;
    max-width: 420px;
}

.affiche-url { margin: var(--e2) 0 0; font-size: var(--t-xs); color: #64748b; word-break: break-all; }

/* --------------------------------------------------------------------------
   17. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1350px) {
    .deux-colonnes, .grille-2 { grid-template-columns: 1fr; }
}

@media (max-width: 1150px) {
    .kiosque { grid-template-columns: 1fr; }
    .grille-kpi { grid-template-columns: repeat(2, 1fr); }
    .col-barre { display: none; }
}

@media (max-width: 900px) {
    :root { --haut: 60px; }

    .lateral { transform: translateX(-100%); box-shadow: var(--o-4); width: 282px; }
    body.menu-ouvert .lateral { transform: none; }
    body.reduit .lateral { width: 282px; }
    body.reduit .lateral .marque-texte,
    body.reduit .lateral .nav a span,
    body.reduit .lateral .nav-groupe,
    body.reduit .compte-infos { display: block; }
    body.reduit .lateral .nav a { justify-content: flex-start; padding: 11px var(--e3); }

    .zone, body.reduit .zone { margin-left: 0; }
    .haut { padding: 0 var(--e4); }
    .recherche-globale { display: none; }
    .haut-titre { font-size: var(--t-b); }
    .contenu { padding: var(--e4) var(--e4) var(--e8); }
    .pied { padding: 0 var(--e4) var(--e5); }
    .toasts { top: auto; bottom: var(--e4); right: var(--e4); left: var(--e4); width: auto; }

    .entete-page { padding: var(--e4); }
    h1 { font-size: 1.45rem; }
    .grille-kpi { grid-template-columns: 1fr 1fr; gap: var(--e3); }
    .kpi { padding: var(--e4); }
    .kpi-valeur { font-size: 1.85rem; }
    .kpi-icone { width: 36px; height: 36px; }

    .interlock { grid-template-columns: 1fr; gap: var(--e2); }
    .enregistre-liste { grid-template-columns: 1fr; gap: 2px; }
    .tenu { max-width: none; }
    .tenu-photo { width: 56px; height: 56px; }
    .materiel-photo { width: 54px; height: 54px; }
    .enregistre-liste dd { margin-bottom: var(--e2); }
    .suggestions { max-height: 260px; }
    .cellule { min-height: 0; }
    .grille-fiches { grid-template-columns: 1fr; gap: var(--e3); }
    .fiche { padding: var(--e4); padding-left: calc(var(--e4) + 4px); }
    .fiche-actions { gap: var(--e2); }
    .fiche-actions .ligne-champ { width: 100%; }
    .ardoise-titre { font-size: 1.4rem; }

    /* Les lignes deviennent des cartes */
    .table-enveloppe { overflow: visible; }
    .tableau, .tableau tbody, .tableau tr, .tableau td { display: block; width: 100%; }
    .tableau thead { display: none; }
    .tableau tr {
        background: var(--carte-2);
        border: 1px solid var(--bord);
        border-radius: var(--r-m);
        padding: var(--e3);
        margin-bottom: var(--e2);
    }
    .tableau tr:hover td, .tableau tbody tr:hover td { background: transparent; }
    .tableau td { border: none; padding: 3px 0; }
    .tableau td[data-libelle]::before {
        content: attr(data-libelle) ' ';
        font-size: var(--t-xs);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .05em;
        color: var(--texte-3);
        margin-right: 6px;
    }
    .tableau .col-actions { padding-top: var(--e2); }
    .bloc > .tableau, .bloc > .table-enveloppe { width: calc(100% - var(--e4) * 2); }
    .bloc > *:not(.titre-bloc) { margin-left: var(--e4); margin-right: var(--e4); }
    .titre-bloc { padding: var(--e3) var(--e4); }

    .modale { padding: var(--e3); align-items: end; }
    .modale-boite { width: 100%; max-height: calc(100vh - 24px); }
    .modale-pied .bouton { flex: 1 1 auto; }
    .cadre-scan { aspect-ratio: auto; min-height: 300px; }
    .modale-aide { display: none; }
    .filtre { width: 100%; }
    .filtre .bouton { flex: 1 1 auto; }
    .formulaire-large button, .formulaire > button { width: 100%; }
    .carte-install { padding: var(--e5); }
    .carte-install::before { margin: calc(var(--e5) * -1) calc(var(--e5) * -1) var(--e5); }
}

@media (max-width: 520px) {
    .grille-kpi { grid-template-columns: 1fr; }
    .compteurs { grid-template-columns: 1fr 1fr; }
    .jeton { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* --------------------------------------------------------------------------
   18. IMPRESSION
   -------------------------------------------------------------------------- */
@media print {
    html, body { background: #fff; }
    .lateral, .haut, .pied, .voile, .toasts, .sans-impression, .titre-bloc, .consigne, .table-outils, .pagination { display: none !important; }
    .hors-impression { display: none !important; }
    .zone { margin-left: 0 !important; }
    .contenu { padding: 0; max-width: none; }
    .bloc-impression { margin: 0; }
    .planche { grid-template-columns: repeat(3, 1fr); gap: 6mm; }
    .planche-actions { grid-template-columns: repeat(2, 1fr); }
    .regler-url {
    display: grid;
    gap: var(--e2);
    max-width: 640px;
    margin: 0 auto var(--e4);
    padding: var(--e4);
    background: var(--carte-2);
    border: 1px solid var(--bord);
    border-radius: var(--r-m);
}

.regler-url label { font-size: var(--t-s); font-weight: 600; color: var(--texte-2); }
.regler-url .ligne-champ input { flex: 1 1 240px; min-height: 42px; font-family: var(--mono); font-size: var(--t-s); }
.puce-url { font-family: var(--mono); font-size: var(--t-xs); }

.affiche { border: none; padding: 0; max-width: none; }
    .affiche-titre { font-size: 2.4rem; }
    .affiche-consigne { font-size: 1.6rem; }
    .vignette { border-color: #000; }
}