/* ==========================================================================
   Zone « badges » : badges QR imprimables, bornes de pointage, espace employé,
   écran de scan sur téléphone, paramètres. Classes préfixées « bdg- »
   (sauf .ecran-scan*, imposées par scan.php).
   ========================================================================== */

/* ---------- Badge (carte CR80 85,6 × 54 mm, papier : toujours clair) ---------- */

.bdg-carte {
    --p-texte: #1c1714;
    --p-texte-2: #6b625b;
    --p-marque: #9a4510;
    --p-marque-doux: #fbefe4;
    --rx: 0deg; --ry: 0deg; --ty: 0px; --echelle: 1;
    container-type: inline-size;
    position: relative; display: block; width: 100%; aspect-ratio: 85.6 / 54;
    background: #fff; color: var(--p-texte); color-scheme: light;
    border-radius: 14px; overflow: hidden; isolation: isolate;
    box-shadow: 0 0 0 1px var(--bord), var(--ombre-2);
    transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(var(--ty)) scale(var(--echelle));
    transition: transform var(--d-3) var(--ease-out), box-shadow var(--d-3) var(--ease-out), opacity var(--d-3) var(--ease-out), filter var(--d-3) var(--ease-out);
    cursor: pointer; -webkit-user-select: none; user-select: none;
    font-family: var(--police); font-feature-settings: 'cv11', 'ss01';
}
/* Halo chaud qui suit le pointeur */
.bdg-carte::after {
    content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0;
    background: radial-gradient(circle at var(--mx, 50%) var(--my, 0%), rgba(233, 162, 59, .16), rgba(233, 162, 59, 0) 55%);
    transition: opacity var(--d-3) var(--ease-out);
}
.bdg-carte:hover { --ty: -3px; box-shadow: 0 0 0 1px var(--bord-fort), var(--ombre-3); }
.bdg-carte:hover::after { opacity: 1; }
.bdg-carte-int {
    position: absolute; inset: 0; padding: 4.6cqw 5cqw 4.4cqw;
    display: grid; grid-template-columns: minmax(0, 1fr) 33cqw; grid-template-rows: auto minmax(0, 1fr) auto; column-gap: 4cqw;
}
.bdg-carte-haut {
    grid-column: 1 / -1; position: relative; display: flex; align-items: center; gap: 2.2cqw; min-width: 0;
    padding-bottom: 2.6cqw; margin-bottom: 2.8cqw;
}
.bdg-carte-haut::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: max(1px, .32cqw); border-radius: 1px;
    background: linear-gradient(90deg, #c45d17, #e9a23b 42%, rgba(233, 162, 59, .12) 78%, rgba(233, 162, 59, 0));
}
.bdg-carte-logo {
    width: 7.6cqw; height: 7.6cqw; border-radius: 2.1cqw; flex: none; display: grid; place-items: center;
    background: linear-gradient(145deg, #f6c46e, #d9792a 70%, #b85a16);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
}
.bdg-carte-logo svg { width: 5.2cqw; height: 5.2cqw; color: #fff7ea; }
.bdg-carte-entreprise { min-width: 0; font-size: 3.5cqw; font-weight: 700; letter-spacing: -.01em; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bdg-carte-type { margin-left: auto; flex: none; font-size: 2.15cqw; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: var(--p-marque); }
.bdg-carte-identite { grid-column: 1; grid-row: 2; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.bdg-carte-nom {
    font-size: 6.9cqw; font-weight: 800; letter-spacing: -.025em; line-height: 1.02; overflow-wrap: anywhere;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.bdg-carte-prenoms {
    margin-top: .9cqw; font-size: 4.7cqw; font-weight: 500; line-height: 1.18; color: var(--p-texte);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.bdg-carte-poste {
    align-self: flex-start; max-width: 100%; margin-top: 2.4cqw; padding: .7cqw 2.2cqw; border-radius: 99px;
    font-size: 2.8cqw; font-weight: 650; line-height: 1.3; color: var(--p-marque); background: var(--p-marque-doux);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bdg-carte-infos { grid-column: 1; grid-row: 3; display: flex; gap: 6cqw; min-width: 0; }
.bdg-carte-infos span { display: flex; flex-direction: column; min-width: 0; font-size: 3.05cqw; font-weight: 650; line-height: 1.2; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bdg-carte-infos small { margin-bottom: .5cqw; font-size: 1.9cqw; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: var(--p-texte-2); }
.bdg-carte-qr { grid-column: 2; grid-row: 2 / 4; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: .4cqw; }
.bdg-carte-qr-code { display: block; width: 33cqw; aspect-ratio: 1; }
.bdg-carte-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 2.55cqw; font-weight: 600; letter-spacing: .14em; color: var(--p-texte-2); white-space: nowrap; }

/* QR code dessiné par badges.js : apparition « imprimée » de haut en bas */
.bdg-qr-svg { display: block; width: 100%; height: 100%; }
.bdg-qr-pret .bdg-qr-svg { animation: bdg-qr-revele var(--d-4) var(--ease-out) both; animation-delay: calc(120ms + var(--i, 0) * 45ms); }
.bdg-qr-erreur { display: grid; place-items: center; font-size: .75rem; color: var(--texte-3); background: var(--surface-3); border-radius: 8px; }

/* ---------- Page « Badges QR » ---------- */

.bdg-message-selection a { font-weight: 600; margin-left: 6px; }
.bdg-barre { padding: 14px 16px; }
@media (min-width: 1001px) {
    .bdg-barre {
        position: sticky; top: calc(var(--topbar) + 12px); z-index: 20;
        background: color-mix(in srgb, var(--surface) 86%, transparent);
        -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px);
        box-shadow: var(--ombre-2);
    }
}
.bdg-barre-ligne { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.bdg-barre-actions { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--bord); }
.bdg-puces { display: flex; gap: 6px; flex-wrap: wrap; min-width: 0; }
.bdg-puce {
    display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 8px 0 13px; border-radius: 999px;
    border: 1px solid var(--bord); background: var(--surface); color: var(--texte-2); text-decoration: none;
    font-size: .84rem; font-weight: 550; white-space: nowrap;
    transition: background var(--d-2) var(--ease-out), color var(--d-2), border-color var(--d-2), transform var(--d-2) var(--ease-out);
}
.bdg-puce span {
    min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center;
    background: var(--surface-3); color: var(--texte-2); font-size: .72rem; font-weight: 650; font-variant-numeric: tabular-nums;
    transition: background var(--d-2), color var(--d-2);
}
.bdg-puce:hover { border-color: var(--bord-fort); color: var(--texte); }
.bdg-puce:active { transform: scale(.97); }
.bdg-puce.actif { background: var(--texte); border-color: var(--texte); color: var(--surface); }
.bdg-puce.actif span { background: color-mix(in srgb, var(--surface) 22%, transparent); color: var(--surface); }
.bdg-recherche { position: relative; display: block; margin: 0; width: 280px; max-width: 100%; color: var(--texte-3); }
.bdg-recherche .ico { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; pointer-events: none; }
.bdg-recherche input { min-height: 36px; padding: 7px 12px 7px 36px; font-weight: 400; }
.bdg-total { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.bdg-total-texte { font-size: .86rem; color: var(--texte-2); white-space: nowrap; }
.bdg-total-texte strong { display: inline-block; min-width: 1ch; color: var(--texte); font-size: 1.02rem; font-variant-numeric: tabular-nums; }
.btn[data-bdg-imprimer][disabled] { opacity: .45; }

.bdg-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 318px), 1fr)); gap: 26px 22px; margin: 22px 0 8px; perspective: 1400px; }
.bdg-element { scroll-margin-top: calc(var(--topbar) + 16px); min-width: 0; display: flex; flex-direction: column; gap: 10px; animation: bdg-apparition var(--d-4) var(--ease-out) both; animation-delay: calc(var(--i, 0) * 45ms); }
.bdg-element[hidden] { display: none; }
@media (min-width: 1001px) { .bdg-element { scroll-margin-top: calc(var(--topbar) + 160px); } }
.bdg-element.bdg-exclu .bdg-carte { --echelle: .965; opacity: .42; filter: grayscale(.9) contrast(.9); box-shadow: 0 0 0 1px var(--bord); }
.bdg-element.bdg-exclu .bdg-carte:hover { opacity: .7; }
.bdg-element.bdg-nouveau .bdg-carte { animation: bdg-nouveau 1.8s var(--ease-out) .4s 2; }
.bdg-pied { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 2px; }
.bdg-pied-case { margin: 0; font-size: .84rem; color: var(--texte-2); }
.bdg-pied-case input { width: 17px; height: 17px; }
.bdg-element:not(.bdg-exclu) .bdg-pied-case { color: var(--texte); }

.bdg-conseils { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 28px; }
.bdg-conseil { display: flex; gap: 12px; padding: 16px; border: 1px solid var(--bord); border-radius: var(--rayon); background: var(--surface-2); }
.bdg-conseil strong { display: block; font-size: .88rem; margin-bottom: 2px; }
.bdg-conseil p { margin: 0; font-size: .82rem; color: var(--texte-2); }
.bdg-conseil-icone, .bdg-aide-icone {
    width: 34px; height: 34px; border-radius: 10px; flex: none; display: grid; place-items: center;
    background: var(--marque-doux); color: var(--marque-texte);
}
.bdg-conseil-icone .ico, .bdg-aide-icone .ico { width: 17px; height: 17px; }
@media (max-width: 900px) { .bdg-conseils { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
    .bdg-recherche { width: 100%; order: -1; }
    .bdg-puces {
        flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 0 16px 2px; scrollbar-width: none; max-width: calc(100% + 32px);
        /* Fondu sur les bords : on devine que la rangée défile */
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 28px), transparent);
        mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 28px), transparent);
    }
    .bdg-puces::-webkit-scrollbar { display: none; }
    .bdg-total { margin-left: 0; width: 100%; justify-content: space-between; }
    .bdg-grille { gap: 22px; }
}

/* Planche d'impression (construite par badges.js, visible à l'impression seulement) */
.bdg-impression { display: none; }
@page bdg-planche { size: A4 portrait; margin: 0; }

/* ---------- Mon espace (employé) ---------- */

.bdg-accueil {
    position: relative; overflow: hidden; isolation: isolate;
    display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
    padding: 26px 28px; margin-bottom: 18px; border-radius: var(--rayon-l); border: 1px solid var(--bord);
    background:
        radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--dore) 22%, transparent), transparent 55%),
        linear-gradient(135deg, var(--marque-doux), var(--surface) 70%);
    box-shadow: var(--ombre-1);
}
.bdg-accueil::before {
    content: ''; position: absolute; z-index: -1; right: -60px; bottom: -90px; width: 280px; height: 280px; border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--marque-vif) 18%, transparent);
    box-shadow: 0 0 0 36px color-mix(in srgb, var(--marque-vif) 4%, transparent), 0 0 0 72px color-mix(in srgb, var(--marque-vif) 3%, transparent);
    animation: bdg-flotte 14s var(--ease-in-out) infinite alternate;
}
.bdg-accueil-identite { display: flex; align-items: center; gap: 18px; min-width: 0; }
.bdg-accueil-avatar { width: 60px; height: 60px; font-size: 1.15rem; box-shadow: 0 0 0 4px var(--surface), 0 8px 20px -8px rgba(110, 48, 8, .45); }
.bdg-accueil h1 { margin: 2px 0 4px; font-size: 1.85rem; letter-spacing: -.03em; animation: bdg-glisse var(--d-4) var(--ease-out) 60ms both; }
.bdg-accueil-date { margin: 0; font-size: .78rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--marque-texte); }
.bdg-accueil-sous { margin: 0; color: var(--texte-2); font-size: .9rem; }
.bdg-accueil-actions .btn .ico { width: 19px; height: 19px; }

.bdg-espace-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-bottom: 18px; }
.bdg-espace-trio > .carte { margin: 0; display: flex; flex-direction: column; animation: entree var(--d-4) var(--ease-out) both; }
.bdg-espace-trio > :nth-child(2) { animation-delay: 60ms; }
.bdg-espace-trio > :nth-child(3) { animation-delay: 120ms; }
@media (max-width: 1180px) {
    .bdg-espace-trio { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bdg-espace-trio > .bdg-telephone { grid-column: 1 / -1; }
}
@media (max-width: 760px) { .bdg-espace-trio { grid-template-columns: minmax(0, 1fr); } }

.bdg-pointage .carte-entete { flex-wrap: nowrap; align-items: flex-start; }
.bdg-pointage .carte-entete > div { min-width: 0; }
.bdg-pointage .carte-entete > .badge, .bdg-pointage .carte-entete > .bdg-en-poste { flex: none; margin-top: 2px; }
.bdg-en-poste { display: inline-flex; align-items: center; gap: 8px; padding: 2px 10px 2px 9px; border-radius: 999px; background: var(--ok-fond); color: var(--ok); font-size: .76rem; font-weight: 600; line-height: 1.6; }
.bdg-chrono { list-style: none; margin: 4px 0 0; padding: 0; position: relative; }
.bdg-etape { position: relative; display: flex; align-items: flex-start; gap: 14px; padding: 6px 0 18px; }
.bdg-etape:last-child { padding-bottom: 4px; }
.bdg-etape:not(:last-child)::before {
    content: ''; position: absolute; left: 17px; top: 44px; bottom: 2px; width: 2px; border-radius: 2px;
    background: linear-gradient(var(--ok), color-mix(in srgb, var(--ok) 25%, var(--bord)));
    transform-origin: top; animation: bdg-trait var(--d-5) var(--ease-out) .35s both;
}
.bdg-etape-point {
    width: 36px; height: 36px; border-radius: 50%; flex: none; display: grid; place-items: center;
    background: var(--ok-fond); color: var(--ok); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ok) 30%, transparent);
    animation: echelle var(--d-3) var(--ease-ressort) .15s both;
}
.bdg-etape-point .ico { width: 17px; height: 17px; }
.bdg-etape-attente .bdg-etape-point { background: var(--surface-2); color: var(--texte-3); box-shadow: inset 0 0 0 1.5px var(--bord-fort); border: 0; outline: 2px dashed transparent; animation-delay: .5s; }
.bdg-etape-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bdg-etape-texte small { font-size: .74rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--texte-3); }
.bdg-etape-texte strong { font-size: 1.6rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.bdg-etape-vide { color: var(--texte-3); }
.bdg-source { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--texte-2); }
.bdg-source .ico { width: 14px; height: 14px; color: var(--texte-3); }
.bdg-etape > .badge { margin-top: 6px; }
.bdg-pointage-notes { margin-top: auto; display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px dashed var(--bord); }
.bdg-pointage-notes:empty { display: none; }
.bdg-note { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: .82rem; color: var(--texte-2); animation: bdg-glisse var(--d-4) var(--ease-out) .45s both; }
.bdg-note .ico { width: 15px; height: 15px; margin-top: 2px; flex: none; color: var(--texte-3); }
.bdg-note strong { color: var(--texte); font-weight: 600; }
.bdg-note-info { padding: 8px 10px; border-radius: var(--rayon-s); background: var(--info-fond); color: var(--texte-2); }
.bdg-note-info .ico { color: var(--info); }
.bdg-pointage-etat { display: flex; gap: 14px; align-items: flex-start; padding: 6px 0; }
.bdg-pointage-etat strong { display: block; font-size: 1rem; margin-bottom: 2px; }
.bdg-pointage-etat p { margin: 0; color: var(--texte-2); font-size: .88rem; }
.bdg-pointage-icone { width: 44px; height: 44px; border-radius: 13px; flex: none; display: grid; place-items: center; animation: echelle var(--d-3) var(--ease-ressort) .15s both; }
.bdg-pointage-icone .ico { width: 21px; height: 21px; }
.bdg-ton-ok { background: var(--ok-fond); color: var(--ok); }
.bdg-ton-attention { background: var(--attention-fond); color: var(--attention); }
.bdg-ton-alerte { background: var(--alerte-fond); color: var(--alerte); }
.bdg-ton-info { background: var(--info-fond); color: var(--info); }
.bdg-ton-neutre { background: var(--surface-3); color: var(--texte-2); }

.bdg-monbadge-corps { display: flex; align-items: flex-start; gap: 18px; flex: 1; padding-top: 4px; }
.bdg-monbadge-qr {
    width: 136px; flex: none; aspect-ratio: 1; padding: 4px; border-radius: 14px; background: #fff;
    box-shadow: 0 0 0 1px var(--bord), var(--ombre-2); cursor: zoom-in;
    transition: transform var(--d-3) var(--ease-out), box-shadow var(--d-3) var(--ease-out);
}
.bdg-monbadge-qr:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 0 0 1px var(--bord-fort), var(--ombre-3); }
.bdg-monbadge-qr .bdg-qr-svg { border-radius: 10px; }
.bdg-monbadge-infos { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.bdg-monbadge-infos small { font-size: .74rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--texte-3); }
.bdg-monbadge-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.08rem; font-weight: 650; letter-spacing: .1em; }
.bdg-monbadge-infos .aide { margin: 4px 0 12px; }

.bdg-telephone-corps { display: flex; align-items: flex-start; gap: 18px; flex: 1; padding-top: 4px; }
.bdg-illustration {
    position: relative; width: 74px; height: 128px; flex: none; border-radius: 16px; padding: 7px;
    background: linear-gradient(160deg, var(--surface-3), var(--surface-2)); box-shadow: inset 0 0 0 1.5px var(--bord-fort), var(--ombre-1);
}
.bdg-illustration::before { content: ''; position: absolute; top: 4px; left: 50%; width: 18px; height: 3px; margin-left: -9px; border-radius: 3px; background: var(--bord-fort); }
.bdg-illustration-ecran {
    position: relative; height: 100%; display: grid; place-items: center; overflow: hidden; border-radius: 10px;
    background: var(--surface); color: var(--texte); box-shadow: inset 0 0 0 1px var(--bord);
}
.bdg-illustration-ecran .ico { width: 34px; height: 34px; stroke-width: 1.6; }
.bdg-illustration-ligne {
    position: absolute; left: 6px; right: 6px; top: 22%; height: 2px; border-radius: 2px;
    background: var(--marque-vif); box-shadow: 0 0 10px 1px var(--marque-vif);
    animation: bdg-balayage 2.6s var(--ease-in-out) infinite alternate;
}
.bdg-etapes, .ecran-scan-etapes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: .88rem; color: var(--texte-2); counter-reset: none; }
.bdg-etapes li, .ecran-scan-etapes li { display: flex; gap: 10px; align-items: flex-start; }
.bdg-etapes strong, .ecran-scan-etapes strong { color: var(--texte); font-weight: 600; }
.bdg-etapes .bdg-num, .ecran-scan-etapes .bdg-num {
    width: 22px; height: 22px; border-radius: 50%; flex: none; display: grid; place-items: center; margin-top: 0;
    background: var(--marque-doux); color: var(--marque-texte); font-size: .74rem; font-weight: 700;
}
.bdg-telephone-aide { display: flex; gap: 6px; align-items: flex-start; margin: 14px 0 0; padding-top: 12px; border-top: 1px dashed var(--bord); }
.bdg-telephone-aide .ico { width: 14px; height: 14px; margin-top: 1px; }

.bdg-espace-grille { margin-bottom: 18px; }
.bdg-insecable { white-space: nowrap; }
.bdg-facultatif { margin-left: 4px; font-weight: 450; font-size: .76rem; color: var(--texte-3); }
.bdg-infos { gap: 11px 24px; }
.bdg-bulletins li { padding: 12px 0; flex-wrap: wrap; }
.bdg-bulletin { display: flex; align-items: center; gap: 12px; min-width: 0; }
.bdg-bulletin-icone { width: 38px; height: 38px; border-radius: 11px; flex: none; display: grid; place-items: center; background: var(--surface-3); color: var(--texte-2); }
.bdg-bulletin strong { display: block; font-weight: 600; }
.bdg-bulletin small { font-size: .82rem; }
.bdg-montant { display: inline !important; font-variant-numeric: tabular-nums; color: var(--texte); }

@media (max-width: 640px) {
    .bdg-accueil { padding: 20px 18px; gap: 16px; }
    .bdg-accueil-identite { align-items: flex-start; gap: 14px; }
    .bdg-accueil-avatar { width: 48px; height: 48px; font-size: .95rem; }
    .bdg-accueil h1 { font-size: 1.5rem; }
    .bdg-accueil-actions, .bdg-accueil-actions .btn { width: 100%; }
    .bdg-monbadge-qr { width: 118px; }
    .bdg-illustration { width: 64px; height: 112px; }
}

/* Mon badge en plein écran : fond blanc, QR maximal */
dialog.bdg-grand {
    width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
    background: #fff; color: #1c1714; color-scheme: light; overflow: auto;
}
dialog.bdg-grand::backdrop { background: #fff; }
dialog.bdg-grand[open] { animation: fondu var(--d-3) var(--ease-out); }
.bdg-vt dialog.bdg-grand[open] { animation: none; }
.bdg-grand-int {
    min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    padding: max(24px, env(safe-area-inset-top)) 20px max(28px, env(safe-area-inset-bottom)); text-align: center;
}
.bdg-grand-fermer {
    position: absolute; top: max(14px, env(safe-area-inset-top)); right: 14px; width: 48px; height: 48px; border-radius: 50%;
    border: 1px solid #e8e2da; background: #faf8f6; color: #1c1714; display: grid; place-items: center; cursor: pointer;
    transition: transform var(--d-2) var(--ease-out), background var(--d-2);
}
.bdg-grand-fermer:hover { background: #f1ede8; }
.bdg-grand-fermer:active { transform: scale(.92); }
.bdg-grand-fermer .ico { width: 22px; height: 22px; }
.bdg-grand-entreprise { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font-weight: 650; font-size: .95rem; color: #5d544d; }
.bdg-grand-entreprise .bdg-carte-logo { width: 30px; height: 30px; border-radius: 9px; }
.bdg-grand-entreprise .bdg-carte-logo svg { width: 20px; height: 20px; }
.bdg-grand h2 { margin: 0; font-size: clamp(1.4rem, 6vw, 2rem); letter-spacing: -.03em; color: #1c1714; }
.bdg-grand-poste { margin: 0 0 10px; color: #6b625b; font-size: .95rem; }
.bdg-grand-qr { width: min(82vw, 56vh, 440px); aspect-ratio: 1; }
.bdg-grand-code { margin: 4px 0 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: clamp(1.2rem, 5.4vw, 1.6rem); font-weight: 650; letter-spacing: .14em; color: #1c1714; }
.bdg-grand-aide { display: flex; align-items: center; gap: 8px; max-width: 360px; margin: 10px 0 0; padding: 10px 14px; border-radius: 12px; background: #fdf3e2; color: #8a4a06; font-size: .86rem; text-align: left; }
.bdg-grand-aide .ico { width: 20px; height: 20px; flex: none; }
:root.bdg-grand-ouvert { overflow: hidden; }

/* Transition du petit QR vers le plein écran (View Transitions) */
:root.bdg-vt .topbar, :root.bdg-vt .sidebar, :root.bdg-vt .sidebar nav a.actif, :root.bdg-vt .onglets a.actif { view-transition-name: none; }
:root.bdg-vt::view-transition-old(root) { animation: 220ms var(--ease-out) both bdg-fondu-sortie; }
:root.bdg-vt::view-transition-new(root) { animation: 320ms var(--ease-out) both fondu; }
:root.bdg-vt::view-transition-group(bdg-qr) { animation-duration: 460ms; animation-timing-function: cubic-bezier(.2, .9, .25, 1); z-index: 10; }
:root.bdg-vt::view-transition-old(bdg-qr), :root.bdg-vt::view-transition-new(bdg-qr) { animation-duration: 460ms; height: 100%; object-fit: contain; }

/* ---------- Bornes de pointage ---------- */

.bdg-bornes { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 18px; align-items: start; margin-bottom: 18px; }
.bdg-bornes-principal { min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.bdg-bornes-principal > .carte, .bdg-bornes > .carte { margin: 0; animation: entree var(--d-4) var(--ease-out) both; }
.bdg-bornes-principal > .carte + .carte { animation-delay: 120ms; }
.bdg-bornes > .bdg-installer { animation-delay: 70ms; position: sticky; top: calc(var(--topbar) + 20px); }
@media (max-width: 1100px) {
    .bdg-bornes { grid-template-columns: minmax(0, 1fr); }
    .bdg-bornes > .bdg-installer { position: static; }
    /* Première installation (tablette) : le formulaire passe devant */
    .bdg-bornes-vide > .bdg-installer { order: -1; }
}

/* Alerte : QR de l'entrée inutilisable par les téléphones (adresse locale ou non sécurisée) */
.bdg-alerte {
    --ton: var(--attention); --ton-fond: var(--attention-fond);
    position: relative; overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 4px 16px;
    margin-bottom: 18px; padding: 18px 20px; border-radius: var(--rayon-l);
    background: linear-gradient(100deg, var(--ton-fond), var(--surface) 75%);
    border: 1px solid color-mix(in srgb, var(--ton) 32%, var(--bord)); box-shadow: var(--ombre-1);
    animation: entree var(--d-4) var(--ease-out) both;
}
.bdg-alerte::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--ton); }
.bdg-alerte-alerte { --ton: var(--alerte); --ton-fond: var(--alerte-fond); }
.bdg-alerte-icone {
    width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
    background: color-mix(in srgb, var(--ton) 14%, var(--surface)); color: var(--ton);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ton) 22%, transparent);
}
.bdg-alerte-icone .ico { width: 20px; height: 20px; }
.bdg-alerte-texte { min-width: 0; font-size: .88rem; color: var(--texte-2); }
.bdg-alerte-texte > strong { display: block; margin: 1px 0 4px; font-size: .98rem; font-weight: 650; color: var(--texte); }
.bdg-alerte-texte p { margin: 0 0 6px; }
.bdg-alerte-texte p:last-child { margin-bottom: 0; }
.bdg-alerte-texte ul { margin: 0 0 8px; padding-left: 18px; }
.bdg-alerte-texte li { margin-bottom: 3px; }
.bdg-alerte-texte li::marker { color: var(--ton); }
.bdg-alerte-texte li strong { color: var(--texte); font-weight: 600; }
.bdg-alerte-texte code { padding: 1px 6px; border-radius: 6px; background: var(--surface-3); color: var(--texte); overflow-wrap: anywhere; }
.bdg-alerte-action { align-self: center; }
@media (max-width: 760px) {
    .bdg-alerte { grid-template-columns: auto minmax(0, 1fr); padding: 16px; }
    .bdg-alerte-action { grid-column: 1 / -1; justify-self: stretch; margin-top: 10px; }
}

.bdg-borne-liste { list-style: none; margin: 0 -8px; padding: 0; }
.bdg-borne:has(details[open]) { z-index: 6; }
.bdg-borne { position: relative; border-radius: var(--rayon); animation: entree var(--d-4) var(--ease-out) both; animation-delay: calc(120ms + var(--i, 0) * 45ms); transition: background var(--d-2); }
.bdg-borne + .bdg-borne::before { content: ''; position: absolute; top: 0; left: 8px; right: 8px; height: 1px; background: var(--bord); }
.bdg-borne:hover { background: var(--surface-2); }
.bdg-borne-ligne { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 6px 14px; padding: 14px 8px; }
.bdg-borne-icone {
    width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
    background: linear-gradient(145deg, var(--marque-doux), color-mix(in srgb, var(--dore) 16%, var(--surface))); color: var(--marque-texte);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--marque-vif) 16%, transparent);
}
.bdg-borne-icone .ico { width: 20px; height: 20px; }
.bdg-borne-inactive .bdg-borne-icone { background: var(--surface-3); color: var(--texte-3); box-shadow: none; }
.bdg-borne-inactive .bdg-borne-titre strong, .bdg-borne-inactive .bdg-borne-meta { color: var(--texte-3); }
.bdg-borne-titre { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.bdg-borne-titre strong { font-weight: 650; font-size: .95rem; overflow-wrap: anywhere; }
.bdg-borne-meta { margin-top: 1px; font-size: .8rem; color: var(--texte-2); }
.bdg-etiquette.bdg-etiquette-neutre { background: var(--surface-3); color: var(--texte-2); }
.bdg-etiquette { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 999px; font-size: .7rem; font-weight: 650; letter-spacing: .02em; background: var(--marque-doux); color: var(--marque-texte); white-space: nowrap; }
.bdg-borne-etat { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.bdg-borne-etat small { font-size: .74rem; color: var(--texte-3); white-space: nowrap; }
.bdg-activite { display: inline-flex; align-items: center; gap: 8px; font-size: .8rem; color: var(--texte-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.bdg-activite-point { width: 8px; height: 8px; border-radius: 50%; background: var(--bord-fort); flex: none; transition: background var(--d-3); }
.bdg-activite.bdg-en-ligne { color: var(--ok); font-weight: 600; }
.bdg-activite.bdg-en-ligne .bdg-activite-point { background: var(--ok); animation: pulsation 2s var(--ease-out) infinite; }
.bdg-borne-actions { display: flex; align-items: flex-start; gap: 8px; justify-content: flex-end; }
.bdg-borne-edition summary { list-style: none; }
.bdg-borne-edition summary::-webkit-details-marker { display: none; }
.bdg-borne-edition[open] summary { background: var(--surface-3); }
.bdg-borne-form {
    position: absolute; z-index: 5; right: 0; margin-top: 8px; width: min(340px, calc(100vw - 48px));
    display: grid; gap: 12px; padding: 16px; border-radius: var(--rayon); background: var(--surface); border: 1px solid var(--bord);
    box-shadow: var(--ombre-3); transform-origin: top right; animation: bdg-pop var(--d-3) var(--ease-ressort);
}
.bdg-borne-edition { position: relative; }
.bdg-borne-form .btn { justify-self: end; }
@media (max-width: 700px) {
    .bdg-borne-ligne { grid-template-columns: auto minmax(0, 1fr); }
    .bdg-borne-etat { grid-column: 2; align-items: flex-start; text-align: left; flex-direction: row; flex-wrap: wrap; gap: 2px 10px; }
    .bdg-borne-actions { grid-column: 1 / -1; justify-content: flex-start; padding-left: 56px; }
    .bdg-borne-edition { position: static; }
    .bdg-borne-form { left: 8px; right: 8px; width: auto; transform-origin: top left; }
    .bdg-borne { position: relative; }
}

.bdg-installer-entete { display: flex; gap: 14px; align-items: center; margin-bottom: 16px; }
.bdg-installer-entete h2 { margin: 0; }
.bdg-installer-entete p { margin: 2px 0 0; font-size: .86rem; color: var(--texte-2); }
.bdg-installer-icone {
    width: 46px; height: 46px; border-radius: 14px; flex: none; display: grid; place-items: center; color: #fff;
    background: linear-gradient(145deg, var(--marque-vif), var(--marque)); box-shadow: var(--ombre-btn), 0 8px 18px -8px rgba(196, 93, 23, .6);
}
.bdg-installer-icone .ico { width: 22px; height: 22px; }
.bdg-installer-champs { grid-template-columns: minmax(0, 1fr); }
.bdg-modes { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.bdg-modes legend { padding: 0; margin-bottom: 5px; color: var(--texte); font-size: .84rem; font-weight: 550; }
.bdg-mode {
    position: relative; display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 12px 40px 12px 12px; cursor: pointer;
    border: 1px solid var(--bord-fort); border-radius: var(--rayon); background: var(--surface);
    transition: border-color var(--d-2), background var(--d-2), box-shadow var(--d-2), transform var(--d-2) var(--ease-out);
}
.bdg-mode:hover { border-color: var(--texte-3); }
.bdg-mode:active { transform: scale(.99); }
.bdg-mode input { position: absolute; opacity: 0; pointer-events: none; }
.bdg-mode:has(input:focus-visible) { outline: 2px solid var(--marque-vif); outline-offset: 2px; }
.bdg-mode.actif, .bdg-mode:has(input:checked) { border-color: var(--marque-vif); background: color-mix(in srgb, var(--marque-doux) 70%, var(--surface)); box-shadow: 0 0 0 3px var(--anneau); }
.bdg-mode-icone { width: 34px; height: 34px; border-radius: 10px; flex: none; display: grid; place-items: center; background: var(--surface-3); color: var(--texte-2); transition: background var(--d-2), color var(--d-2); }
.bdg-mode-icone .ico { width: 17px; height: 17px; }
.bdg-mode.actif .bdg-mode-icone, .bdg-mode:has(input:checked) .bdg-mode-icone { background: var(--marque-vif); color: #fff; }
.bdg-mode-texte { min-width: 0; }
.bdg-mode-texte strong { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .88rem; font-weight: 600; }
.bdg-mode-texte small { display: block; margin-top: 1px; font-size: .8rem; line-height: 1.45; color: var(--texte-2); font-weight: 400; }
.bdg-mode-coche {
    position: absolute; top: 12px; right: 12px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
    border: 1.5px solid var(--bord-fort); color: transparent; transition: background var(--d-2), border-color var(--d-2), color var(--d-2), transform var(--d-3) var(--ease-ressort);
}
.bdg-mode-coche .ico { width: 12px; height: 12px; stroke-width: 3; }
.bdg-mode.actif .bdg-mode-coche, .bdg-mode:has(input:checked) .bdg-mode-coche { background: var(--marque-vif); border-color: var(--marque-vif); color: #fff; transform: scale(1.06); }
.bdg-installer-avertissement { margin: 16px 0 0; font-size: .84rem; }
.bdg-installer .form-actions { margin-top: 16px; }
.bdg-installer .form-actions .btn { width: 100%; min-height: 44px; }

.bdg-aide-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 28px; }
.bdg-aide-element { display: flex; gap: 12px; padding: 12px 0; }
.bdg-aide-element strong { display: block; font-size: .9rem; margin-bottom: 3px; }
.bdg-aide-element p { margin: 0; font-size: .84rem; color: var(--texte-2); }
.bdg-aide-element a { display: inline-block; margin-top: 6px; font-weight: 600; font-size: .82rem; text-decoration: none; }
.bdg-aide-element a:hover { text-decoration: underline; }
.bdg-statut { display: flex; align-items: center; gap: 6px; width: fit-content; margin-top: 8px; padding: 3px 9px; border-radius: 8px; font-size: .78rem; font-weight: 600; }
.bdg-statut .ico { width: 14px; height: 14px; }
@media (max-width: 700px) { .bdg-aide-grille { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Paramètres ---------- */

.bdg-param { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 28px; align-items: start; }
.bdg-param-nav.onglets {
    position: sticky; top: calc(var(--topbar) + 20px); flex-direction: column; width: auto; gap: 2px; padding: 6px; margin: 0;
    background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon-l); box-shadow: var(--ombre-1);
}
.bdg-param-nav.onglets a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; }
.bdg-param-nav.onglets a .ico { width: 17px; height: 17px; color: var(--texte-3); transition: color var(--d-2); }
.bdg-param-nav.onglets a:hover { background: var(--surface-2); }
.bdg-param-nav.onglets a.actif { background: var(--marque-doux); color: var(--marque-texte); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--marque-vif) 18%, transparent); }
.bdg-param-nav.onglets a.actif .ico { color: var(--marque-vif); }
.bdg-param-contenu { min-width: 0; }
.bdg-param-entete { display: flex; gap: 14px; align-items: center; margin-bottom: 18px; }
.bdg-param-entete h2 { margin: 0; font-size: 1.2rem; }
.bdg-param-entete p { margin: 2px 0 0; color: var(--texte-2); font-size: .88rem; }
.bdg-param-icone {
    width: 44px; height: 44px; border-radius: 13px; flex: none; display: grid; place-items: center;
    background: linear-gradient(145deg, var(--marque-doux), color-mix(in srgb, var(--dore) 18%, var(--surface))); color: var(--marque-texte);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--marque-vif) 16%, transparent);
    animation: echelle var(--d-3) var(--ease-ressort) both;
}
.bdg-param-icone .ico { width: 21px; height: 21px; }
.bdg-param-section { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 18px 32px; padding: 22px 24px; animation: entree var(--d-4) var(--ease-out) both; }
.bdg-param-section:nth-of-type(2) { animation-delay: 50ms; }
.bdg-param-section:nth-of-type(3) { animation-delay: 100ms; }
.bdg-param-section:nth-of-type(n+4) { animation-delay: 150ms; }
.bdg-param-section-titre h3 { margin: 0 0 4px; font-size: .95rem; }
.bdg-param-section-titre p { margin: 0; font-size: .82rem; color: var(--texte-3); }
.bdg-param-champs { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 0 20px; margin-bottom: -18px; }
.bdg-param-horaires { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bdg-param-note { grid-column: 1 / -1; margin: 0; padding: 12px 14px; border-radius: var(--rayon-s); background: var(--surface-2); border: 1px solid var(--bord); }
.bdg-champ { position: relative; min-width: 0; display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: 0; align-content: start; }
.bdg-champ-titre { align-self: end; }
.bdg-champ-aides { padding-bottom: 18px; }
.bdg-champ-aides .aide { margin: 4px 0 0; }
.bdg-champ-aides .bdg-aide-defaut { margin-top: 2px; }
.bdg-champ-titre { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-bottom: 5px; }
.bdg-champ-titre label { margin: 0; }
.bdg-champ-modifie label::after { content: ''; display: inline-block; width: 6px; height: 6px; margin-left: 6px; border-radius: 50%; background: var(--marque-vif); vertical-align: middle; animation: echelle var(--d-3) var(--ease-ressort); }
.bdg-defaut {
    display: inline-flex; align-items: center; gap: 4px; flex: none; padding: 1px 7px; border: 0; border-radius: 6px; background: none;
    color: var(--texte-3); font: inherit; font-size: .74rem; font-weight: 550; cursor: pointer; white-space: nowrap;
    transition: background var(--d-2), color var(--d-2);
}
.bdg-defaut .ico { width: 12px; height: 12px; transition: transform var(--d-4) var(--ease-out); }
.bdg-defaut:hover { background: var(--surface-3); color: var(--texte); }
.bdg-defaut:hover .ico { transform: rotate(-200deg); }
.bdg-defaut[hidden] { display: none; }
.bdg-saisie { position: relative; }
.bdg-saisie-unite input { padding-right: 62px; font-variant-numeric: tabular-nums; }
.bdg-unite { position: absolute; right: 1px; top: 1px; bottom: 1px; display: grid; place-items: center; min-width: 44px; padding: 0 10px; border-left: 1px solid var(--bord); border-radius: 0 9px 9px 0; background: var(--surface-2); color: var(--texte-3); font-size: .78rem; font-weight: 600; pointer-events: none; }
.bdg-adresse-actuelle { display: flex; align-items: flex-start; gap: 6px; }
.bdg-adresse-actuelle .ico { width: 14px; height: 14px; margin-top: 1px; color: var(--ok); }
.bdg-adresse-actuelle.bdg-adresse-risque .ico { color: var(--attention); }
.bdg-adresse-actuelle code { padding: 0 5px; border-radius: 5px; background: var(--surface-3); color: var(--texte-2); overflow-wrap: anywhere; }
.bdg-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .86rem; max-width: 380px; line-height: 1.6; }
.bdg-param-barre {
    z-index: 15; display: flex; align-items: center; justify-content: flex-end; gap: 14px;
    margin-top: 4px; padding: 0; border: 1px solid transparent; border-radius: var(--rayon-l);
}
/* Barre flottante dès qu'une valeur est modifiée */
.bdg-param-form.bdg-modifie .bdg-param-barre {
    position: sticky; bottom: 14px; padding: 12px 14px; border-color: color-mix(in srgb, var(--marque-vif) 40%, var(--bord));
    background: color-mix(in srgb, var(--surface) 86%, transparent); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px);
    box-shadow: var(--ombre-3); animation: bdg-glisse var(--d-3) var(--ease-out);
}
.bdg-param-etat { display: inline-flex; align-items: center; gap: 8px; margin-right: auto; font-size: .84rem; font-weight: 550; color: var(--texte-2); animation: bdg-glisse var(--d-3) var(--ease-out); }
.bdg-param-etat[hidden] { display: none; }
.bdg-param-point { width: 8px; height: 8px; border-radius: 50%; background: var(--marque-vif); box-shadow: 0 0 0 3px var(--anneau); }
.bdg-feries-liste li { padding: 10px 0; }
.bdg-ferie { display: flex; align-items: center; gap: 12px; min-width: 0; }
.bdg-ferie > span:last-child { min-width: 0; }
.bdg-ferie strong { display: block; font-weight: 600; font-size: .9rem; }
.bdg-ferie small { font-size: .8rem; }
.bdg-ferie-date { width: 44px; flex: none; display: flex; flex-direction: column; align-items: center; padding: 4px 0; border-radius: 10px; background: var(--marque-doux); color: var(--marque-texte); line-height: 1.1; }
.bdg-ferie-date strong { font-size: 1.05rem; font-weight: 700; }
.bdg-ferie-date small { font-size: .66rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: inherit; }
.bdg-passe .bdg-ferie-date { background: var(--surface-3); color: var(--texte-3); }
.bdg-passe .bdg-ferie strong { color: var(--texte-2); }
.bdg-feries-auto { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--bord); }
.bdg-feries-auto .btn { white-space: normal; max-width: 100%; text-align: left; }
.bdg-liste-puces { margin: 0 0 6px; padding-left: 18px; color: var(--texte-2); }
.bdg-liste-puces li { margin-bottom: 6px; }
.bdg-liste-puces strong { color: var(--texte); }
@media (max-width: 1180px) {
    .bdg-param { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .bdg-param-nav.onglets { position: static; flex-direction: row; width: fit-content; max-width: 100%; background: var(--surface-3); border: 0; box-shadow: none; padding: 4px; }
    .bdg-param-nav.onglets a { padding: 7px 12px; }
    .bdg-param-nav.onglets a.actif { background: var(--surface); color: var(--texte); box-shadow: var(--ombre-2); }
    .bdg-param-section { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}
@media (max-width: 640px) {
    .bdg-param-nav.onglets a .ico { display: none; }
    .bdg-param-section { padding: 18px 16px; }
    .bdg-param-horaires { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 12px; }
    .bdg-param-form.bdg-modifie .bdg-param-barre { bottom: 10px; }
    .bdg-param-barre .btn { flex: none; }
}

/* ---------- Écran de résultat du scan (téléphone) ---------- */

.page-scan .page-simple-contenu { place-items: start center; padding-top: clamp(8px, 4vh, 48px); }
.page-scan { --ton: var(--info); --ton-fond: var(--info-fond); }
.page-scan:has(.ecran-scan-ok) { --ton: var(--ok); --ton-fond: var(--ok-fond); }
.page-scan:has(.ecran-scan-attention) { --ton: var(--attention); --ton-fond: var(--attention-fond); }
.page-scan:has(.ecran-scan-alerte) { --ton: var(--alerte); --ton-fond: var(--alerte-fond); }
.page-scan {
    background:
        radial-gradient(120% 70% at 50% -10%, color-mix(in srgb, var(--ton) 16%, transparent), transparent 70%),
        var(--fond);
    background-attachment: fixed;
}
.ecran-scan {
    width: 100%; max-width: 420px; display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: 34px 24px 28px; border-radius: 24px; background: var(--surface); border: 1px solid var(--bord); box-shadow: var(--ombre-3);
    position: relative; overflow: hidden; animation: bdg-monte var(--d-4) var(--ease-out) both;
}
.ecran-scan::before {
    content: ''; position: absolute; inset: 0 0 auto 0; height: 4px;
    background: linear-gradient(90deg, transparent, var(--ton), transparent); opacity: .85;
}
.ecran-scan-ok { --ton: var(--ok); --ton-fond: var(--ok-fond); }
.ecran-scan-attention { --ton: var(--attention); --ton-fond: var(--attention-fond); }
.ecran-scan-info { --ton: var(--info); --ton-fond: var(--info-fond); }
.ecran-scan-alerte { --ton: var(--alerte); --ton-fond: var(--alerte-fond); }
.ecran-scan-icone {
    position: relative; width: 104px; height: 104px; margin-bottom: 18px; border-radius: 50%; display: grid; place-items: center;
    background: var(--ton-fond); color: var(--ton);
    animation: bdg-pop var(--d-4) var(--ease-ressort) .05s both;
}
.ecran-scan-icone::after {
    content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--ton); opacity: 0;
    animation: bdg-onde 1.4s var(--ease-out) .55s 2;
}
.ecran-scan-icone svg { width: 66px; height: 66px; }
.ecran-scan-icone .ico { width: 44px; height: 44px; stroke-width: 1.7; }
.ecran-scan-icone .chargeur { width: 46px; height: 46px; border-width: 3.5px; border-color: color-mix(in srgb, var(--ton) 25%, transparent); border-top-color: var(--ton); }
.ecran-scan-info .ecran-scan-icone::after, [data-etat="confirmer"] .ecran-scan-icone::after { animation-iteration-count: infinite; animation-duration: 2.2s; }
.ecran-scan-salut { margin: 0 0 4px; font-size: 1.02rem; font-weight: 550; color: var(--texte-2); animation: bdg-glisse var(--d-4) var(--ease-out) .15s both; }
.ecran-scan h1 { margin: 0; font-size: 1.45rem; letter-spacing: -.025em; animation: bdg-glisse var(--d-4) var(--ease-out) .2s both; }
.ecran-scan-heure {
    margin: 12px 0 0; font-size: clamp(4rem, 22vw, 5.6rem); font-weight: 750; line-height: 1; letter-spacing: -.055em;
    font-variant-numeric: tabular-nums; color: var(--ton);
    animation: bdg-heure var(--d-5) var(--ease-out) .28s both;
}
.ecran-scan-date { margin: 6px 0 0; font-size: .82rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--texte-3); animation: bdg-glisse var(--d-4) var(--ease-out) .4s both; }
.ecran-scan-texte { margin: 14px 0 0; color: var(--texte-2); font-size: .95rem; max-width: 34ch; animation: bdg-glisse var(--d-4) var(--ease-out) .45s both; }
.ecran-scan-heure + .ecran-scan-date + .ecran-scan-texte {
    padding: 10px 14px; border-radius: 12px; background: var(--ton-fond); color: var(--texte); font-size: .88rem; font-weight: 500;
}
.ecran-scan-actions { width: 100%; margin-top: 24px; display: flex; justify-content: center; animation: bdg-glisse var(--d-4) var(--ease-out) .55s both; }
.ecran-scan-actions form { margin: 0; }
.ecran-scan-actions .btn { min-height: 46px; padding: 10px 20px; border-radius: 12px; }
.ecran-scan-etapes { width: 100%; margin-top: 22px; padding: 16px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--bord); text-align: left; animation: bdg-glisse var(--d-4) var(--ease-out) .5s both; }
.ecran-scan form#form-pointer { margin: 0; }
/* Pictogrammes propres à un état (QR expiré, lien refusé, Wi-Fi requis) : tracé plus fin */
.ecran-scan-icone .ecran-scan-trace { stroke-width: 3.2; }
.ecran-scan-icone .ecran-scan-trace-24 { stroke-width: 2.7; }
.ecran-scan-note {
    display: flex; gap: 8px; align-items: flex-start; width: 100%; margin: 12px 0 0; padding: 10px 12px; border-radius: 12px;
    background: var(--ton-fond); color: var(--texte-2); font-size: .84rem; text-align: left; animation: bdg-glisse var(--d-4) var(--ease-out) .55s both;
}
.ecran-scan-note .ico { width: 16px; height: 16px; margin-top: 2px; flex: none; color: var(--ton); }
@media (max-width: 480px) {
    .page-scan .page-simple-contenu { padding: 6px 12px 28px; }
    .ecran-scan { padding: 30px 18px 22px; border-radius: 22px; }
    .ecran-scan-actions .btn, .ecran-scan-actions form { width: 100%; }
}

/* ---------- Mouvement ---------- */

@keyframes bdg-apparition { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes bdg-qr-revele { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes bdg-nouveau { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--marque-vif) 70%, transparent), var(--ombre-2); } 70%, 100% { box-shadow: 0 0 0 14px transparent, var(--ombre-2); } }
@keyframes bdg-glisse { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes bdg-monte { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes bdg-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes bdg-onde { from { opacity: .55; transform: scale(1); } to { opacity: 0; transform: scale(1.55); } }
@keyframes bdg-heure { from { opacity: 0; transform: translateY(14px); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes bdg-trait { from { transform: scaleY(0); } to { transform: none; } }
@keyframes bdg-balayage { from { top: 18%; } to { top: 78%; } }
@keyframes bdg-flotte { from { transform: translate(0, 0); } to { transform: translate(-26px, -18px); } }
@keyframes bdg-fondu-sortie { to { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
    .bdg-carte { transform: none !important; }
    .bdg-illustration-ligne { animation: none; top: 48%; }
}

/* ---------- Impression ---------- */

@media print {
    /* Planche de badges : seule la planche s'imprime */
    .bdg-page-badges .bdg-ecran, .bdg-page-badges .lien-evitement { display: none !important; }
    .bdg-page-badges, .bdg-page-badges .app-main, .bdg-page-badges .contenu {
        background: #fff !important; margin: 0 !important; padding: 0 !important; min-height: 0 !important; max-width: none !important; display: block !important;
    }
    .bdg-page-badges .bdg-impression { display: block !important; }
    .bdg-feuille {
        page: bdg-planche; position: relative; width: 210mm; height: 296.6mm; overflow: hidden; break-inside: avoid;
        -webkit-print-color-adjust: exact; print-color-adjust: exact;
    }
    .bdg-feuille + .bdg-feuille { break-before: page; }
    .bdg-feuille * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .bdg-feuille-entete { position: absolute; top: 6mm; left: 21.5mm; right: 21.5mm; margin: 0; display: flex; justify-content: space-between; gap: 6mm; font-size: 6.5pt; line-height: 1.2; color: #8f857c; }
    .bdg-feuille-entete span { max-width: 78mm; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .bdg-coupe { position: absolute; left: 0; top: 0; width: 210mm; height: 297mm; }
    .bdg-coupe line { stroke: #1c1714; stroke-width: .2; }
    .bdg-planche { position: absolute; left: 19.4mm; top: 13.5mm; width: 171.2mm; display: grid; grid-template-columns: 85.6mm 85.6mm; grid-auto-rows: 54mm; }
    .bdg-planche .bdg-carte {
        width: 85.6mm; height: 54mm; aspect-ratio: auto; border-radius: 0; cursor: default;
        box-shadow: none !important; transform: none !important; opacity: 1 !important; filter: none !important; animation: none !important;
        outline: .1mm solid #ebe4dc; outline-offset: -.05mm;
    }
    .bdg-planche .bdg-carte::after { display: none; }
    .bdg-planche .bdg-qr-svg { animation: none !important; clip-path: none !important; }
    /* Espace employé : le badge plein écran ne s'imprime pas */
    dialog.bdg-grand { display: none !important; }
}