/*
 * SISPE : styles des éléments communs (menu, notifications, barre « Retour », menus des visiteurs, en-têtes...).
 * Auparavant écrits dans des <style> au milieu du <body> (non conforme W3C) ; chargés désormais dans le <head>
 * par layouts/partials/pwa-head. Contenu repris à l'identique.
 */

/* ===== Menu latéral (layouts/partials/action-sidebar) ===== */
.sp-shell { flex: 1; display: flex; align-items: stretch; min-width: 0; }
.sp-shell > main { flex: 1; min-width: 0; }
.sp-sidebar { width: 250px; flex: 0 0 250px; background: #fff; border-right: 1px solid var(--sispe-accent-light);
          box-shadow: 2px 0 12px rgba(139,111,71,.06); transition: margin-left .25s ease, transform .25s ease; }
.sp-side-scroll { position: sticky; top: 70px; max-height: calc(100vh - 70px); overflow-y: auto; padding: 1rem .75rem 2rem; }
.sp-side-me { display: flex; align-items: center; gap: .7rem; padding: .7rem .75rem; margin-bottom: 1rem; border-radius: 12px;
          background: linear-gradient(135deg, var(--sispe-accent-ultra-light), var(--sispe-accent-light)); border: 1px solid var(--sispe-accent-light); }
.sp-side-avatar { flex: 0 0 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, var(--sispe-primary), var(--sispe-primary-light));
              color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.sp-side-me-txt { min-width: 0; line-height: 1.2; }
.sp-side-me-txt strong { display: block; font-size: .88rem; color: var(--sispe-primary-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-side-me-txt small { font-size: .72rem; color: #8a7a62; text-transform: uppercase; letter-spacing: .04em; }
.sp-side-foot { margin-top: 1.5rem; padding: 1rem .75rem 0; border-top: 1px solid var(--sispe-accent-light); }
.sp-side-mail { display: block; color: #8a7a62; font-size: .74rem; margin-bottom: .6rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-side-logout { width: 100%; display: flex; align-items: center; gap: .7rem; padding: .55rem .75rem; border-radius: 8px; border: 1px solid #f1c9c9;
              background: #fff5f5; color: #b02a2a; font-weight: 600; font-size: .9rem; transition: background .15s; }
.sp-side-logout:hover { background: #fde8e8; }
.sp-side-group { margin-bottom: 1rem; }
.sp-side-title { display: flex; justify-content: space-between; align-items: center; padding: .25rem .75rem; margin-bottom: .25rem;
             font-size: .68rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #a89880; text-decoration: none; }
.sp-side-toggle { font-size: .78rem; color: var(--sispe-primary-dark); background: var(--sispe-accent-ultra-light); border-radius: 8px; padding: .5rem .75rem; }
.sp-side-toggle .sp-side-caret { font-size: .65rem; transition: transform .2s; }
.sp-side-toggle:not(.collapsed) .sp-side-caret { transform: rotate(180deg); }
.sp-side-link { display: flex; align-items: center; gap: .7rem; padding: .55rem .75rem; margin: 1px 0; border-radius: 8px;
            color: #4a4033; text-decoration: none; font-size: .9rem; font-weight: 500; border-left: 3px solid transparent; transition: background .15s, color .15s; }
.sp-side-link i { width: 18px; text-align: center; color: var(--sispe-primary-light); }
.sp-side-link:hover { background: var(--sispe-accent-ultra-light); color: var(--sispe-primary-dark); }
.sp-side-link.active { background: var(--sispe-accent-light); color: var(--sispe-primary-dark); font-weight: 700; border-left-color: var(--sispe-primary); }
.sp-side-link.active i { color: var(--sispe-primary); }
.sp-side-toggle-btn { background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.35); color: #fff; border-radius: 8px;
                  width: 38px; height: 38px; margin-right: .75rem; display: inline-flex; align-items: center; justify-content: center; }
.sp-side-toggle-btn:hover { background: rgba(255,255,255,.28); }
.sp-side-backdrop { display: none; }

/* Poignée de repli du volet (bureau) : reste visible même volet fermé */
.sp-side-handle { position: fixed; top: 150px; left: 250px; transform: translateX(-50%); z-index: 1030; width: 28px; height: 28px; border-radius: 50%;
              border: 1px solid var(--sispe-accent-light); background: #fff; color: var(--sispe-primary); box-shadow: 0 2px 8px rgba(107,85,56,.25);
              display: flex; align-items: center; justify-content: center; font-size: .7rem; padding: 0; cursor: pointer;
              transition: left .25s ease, transform .25s ease, background .15s, color .15s; }
.sp-side-handle:hover { background: var(--sispe-primary); color: #fff; }
.sp-side-handle i { transition: transform .25s ease; }
body.sp-side-collapsed .sp-side-handle i { transform: rotate(180deg); }
.sp-side-close { display: none; margin-left: auto; width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(139,111,71,.12); color: var(--sispe-primary-dark); }
/* Bureau : barre repliable */

/* Volet replié (bureau) : barre d'icônes fine, chaque rubrique garde son icône */
@media (min-width: 992px) {
body.sp-side-collapsed .sp-sidebar { width: 68px; flex-basis: 68px; }
body.sp-side-collapsed .sp-side-scroll { padding: 1rem .5rem 2rem; overflow-x: hidden; }
body.sp-side-collapsed .sp-side-me { justify-content: center; padding: .5rem; background: none; border: 0; }
body.sp-side-collapsed .sp-side-me-txt, body.sp-side-collapsed .sp-side-close { display: none; }
body.sp-side-collapsed .sp-side-label, body.sp-side-collapsed .sp-side-link .badge { display: none; }
body.sp-side-collapsed .sp-side-link { justify-content: center; padding: .65rem 0; border-left: 0; }
body.sp-side-collapsed .sp-side-link i { width: auto; font-size: 1.05rem; }
body.sp-side-collapsed .sp-side-link.active { box-shadow: inset 3px 0 0 var(--sispe-primary); }
body.sp-side-collapsed .sp-side-group { margin-bottom: .35rem; padding-top: .35rem; border-top: 1px solid var(--sispe-accent-light); }
body.sp-side-collapsed .sp-side-title { display: none; }
body.sp-side-collapsed .sp-side-group .collapse { display: block !important; height: auto !important; }
body.sp-side-collapsed .sp-side-foot { padding: 1rem 0 0; }
body.sp-side-collapsed .sp-side-mail, body.sp-side-collapsed .sp-side-logout span { display: none; }
body.sp-side-collapsed .sp-side-logout { justify-content: center; padding: .6rem 0; }
body.sp-side-collapsed .sp-side-handle { left: 68px; transform: translateX(-50%); width: 28px; height: 28px; border-radius: 50%; }
}
/* Mobile / tablette : tiroir */
@media (max-width: 991.98px) {
.sp-side-handle { display: none; }
.sp-side-close { display: inline-flex; align-items: center; justify-content: center; }
.sp-sidebar { position: fixed; top: 0; bottom: 0; right: 0; left: auto; z-index: 1050; margin-left: 0; transform: translateX(100%); width: 280px; box-shadow: -6px 0 24px rgba(0,0,0,.18); }
.sp-side-scroll { top: 0; max-height: 100vh; height: 100vh; padding-top: 1.25rem; }
body.sp-side-open .sp-sidebar { transform: translateX(0); }
body.sp-side-open .sp-side-backdrop { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 1040; }
}

/* ===== Cloche des notifications (layouts/partials/notification-bell) ===== */
.sp-bell { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; color: #fff; background: rgba(255,255,255,.14); border: 0; text-decoration: none; }
.sp-bell:hover, .sp-bell.show { background: rgba(255,255,255,.26); color: #fff; }
.sp-bell .cnt { position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: #E53935; color: #fff; font-size: .68rem; font-weight: 800; display: flex; align-items: center; justify-content: center; border: 2px solid #8B6F47; }
.sp-notif-menu { width: 380px; max-width: 92vw; padding: 0; border-radius: 14px; overflow: hidden; }
.sp-notif-head { display: flex; justify-content: space-between; align-items: center; padding: .75rem 1rem; background: #FFF9F5; border-bottom: 1px solid #F0E6D2; font-weight: 700; color: #6B5538; }
.sp-notif-list { max-height: 60vh; overflow-y: auto; }
.sp-notif { display: flex; gap: .7rem; padding: .75rem 1rem; border-bottom: 1px solid #F5EEE0; white-space: normal; text-decoration: none; color: #333; }
.sp-notif:hover { background: #FFFBF5; color: #333; }
.sp-notif.unread { background: #FFF8E1; }
.sp-notif .ic { flex: 0 0 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: .95rem; }
.sp-notif .ic.info { background: #E3F2FD; color: #1565C0; }
.sp-notif .ic.warning { background: #FFF3E0; color: #EF6C00; }
.sp-notif .ic.other { background: #F0E6D2; color: #8B6F47; }
.sp-notif .ic.danger { background: #FFEBEE; color: #C62828; }
.sp-notif .tt { font-weight: 700; font-size: .85rem; }
.sp-notif .tx { font-size: .78rem; color: #5b4d3a; margin-top: .1rem; }
.sp-notif .tm { font-size: .68rem; color: #9a8b74; margin-top: .2rem; }
.sp-notif-foot { padding: .6rem 1rem; text-align: center; background: #FFF9F5; }

/* ===== Barre « Retour » et fil d'Ariane (layouts/partials/back-bar) ===== */
.sp-backbar { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem 1rem; margin-bottom: 1rem; }
.sp-back { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .95rem .35rem .4rem; border-radius: 999px; border: 1px solid #E4D8C4; background: #fff;
           color: #6B5538; font-weight: 700; font-size: .88rem; text-decoration: none; box-shadow: 0 2px 8px rgba(107,85,56,.08); transition: all .15s; }
.sp-back .ic { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #8B6F47, #A0826D); color: #fff; font-size: .75rem; }
.sp-back:hover { background: #FFF9F5; border-color: #8B6F47; color: #6B5538; transform: translateX(-2px); }
.sp-crumbs { display: flex; flex-wrap: wrap; align-items: center; list-style: none; margin: 0; padding: 0; font-size: .85rem; color: #8a7a62; }
.sp-crumbs li + li::before { content: '›'; margin: 0 .45rem; opacity: .6; }
.sp-crumbs a { color: #6B5538; font-weight: 600; text-decoration: none; }
.sp-crumbs a:hover { text-decoration: underline; }
.sp-crumbs li[aria-current] { color: #3d3020; font-weight: 600; }
@media print { .sp-backbar { display: none !important; } }

/* ===== Menu « Mon compte » des visiteurs (layouts/partials/account-menu) ===== */
        /* Charte SISPE : menu « Mon compte » des visiteurs */
        .dropdown-menu:has(> .acm) { min-width: 18.5rem; padding: 0; overflow: hidden; border-radius: 14px; border: 1px solid #EFE6D6; box-shadow: 0 14px 34px rgba(61, 48, 32, .18); }
        .acm-head { padding: .9rem 1rem .75rem; background: linear-gradient(135deg, #FFF9F5, #F5ECDD); border-bottom: 1px solid #EFE6D6; }
        .acm-head .t { font-weight: 800; color: #3d3020; font-size: .95rem; }
        .acm-head .d { font-size: .78rem; color: #8a7a62; }
        .acm-login { display: flex; align-items: center; justify-content: center; gap: .5rem; margin: .8rem 1rem .2rem; padding: .6rem; border-radius: 10px;
            background: linear-gradient(135deg, #6B5538, #A0826D); color: #fff !important; font-weight: 700; text-decoration: none; transition: filter .15s; }
        .acm-login:hover, .acm-login:focus-visible { filter: brightness(1.08); color: #fff; }
        .acm-sep { display: flex; align-items: center; gap: .6rem; margin: .75rem 1rem .35rem; font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #8a7a62; }
        .acm-sep::before, .acm-sep::after { content: ''; flex: 1; height: 1px; background: #EFE6D6; }
        .acm-choice { display: flex; align-items: center; gap: .7rem; margin: 0 .5rem; padding: .55rem .5rem; border-radius: 10px; color: #3d3020 !important; text-decoration: none; }
        .acm-choice:hover, .acm-choice:focus-visible { background: #FFF6EC; }
        .acm-choice .ic { flex: 0 0 34px; height: 34px; border-radius: 9px; background: #F5ECDD; color: #8B6F47; display: inline-grid; place-items: center; }
        .acm-choice:hover .ic { background: #8B6F47; color: #fff; }
        .acm-choice .l { font-weight: 700; font-size: .88rem; line-height: 1.2; }
        .acm-choice .s { display: block; font-size: .74rem; color: #8a7a62; font-weight: 500; }
        .acm-choice .chev { margin-left: auto; color: #C9BBA4; font-size: .75rem; }
        .acm-foot { margin: .5rem 0 0; padding: .55rem 1rem; background: #FAF6EF; border-top: 1px solid #EFE6D6; font-size: .72rem; color: #8a7a62; }

/* ===== Menu mobile des visiteurs (layouts/partials/visitor-mobile-menu) ===== */
/* Charte SISPE : menu mobile des visiteurs, lisible du petit téléphone à la tablette */
.vmm { padding: .35rem .1rem .5rem; }
.vmm-title { margin: .9rem .2rem .45rem; font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .72); }
.vmm-title:first-child { margin-top: .2rem; }
.vmm-card { background: #fff; border-radius: 14px; padding: .85rem; box-shadow: 0 8px 22px rgba(40, 30, 15, .22); }
.vmm-login { display: flex; align-items: center; justify-content: center; gap: .5rem; padding: .7rem; border-radius: 11px;
    background: linear-gradient(135deg, #6B5538, #A0826D); color: #fff !important; font-weight: 700; text-decoration: none; }
.vmm-login:active { filter: brightness(1.08); }
.vmm-or { display: flex; align-items: center; gap: .6rem; margin: .8rem 0 .55rem; font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #8a7a62; }
.vmm-or::before, .vmm-or::after { content: ''; flex: 1; height: 1px; background: #EFE6D6; }
.vmm-roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.vmm-role { display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: .65rem .3rem; border: 1px solid #EFE6D6; border-radius: 11px;
    background: #FFFBF5; color: #3d3020 !important; text-decoration: none; text-align: center; font-size: .8rem; font-weight: 700; line-height: 1.15; }
.vmm-role i { width: 34px; height: 34px; border-radius: 9px; background: #F5ECDD; color: #8B6F47 !important; display: grid; place-items: center; margin: 0 !important; font-size: .95rem; }
.vmm-role:active, .vmm-role:hover { border-color: #D4A574; background: #FFF6EC; }
.vmm-note { margin: .6rem 0 0; font-size: .72rem; color: #8a7a62; text-align: center; }
.vmm-row { display: flex; align-items: center; gap: .7rem; padding: .7rem .8rem; border-radius: 12px; background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .22); color: #fff !important; text-decoration: none; font-weight: 700; }
.vmm-row .ic { flex: 0 0 34px; height: 34px; border-radius: 9px; background: rgba(255, 255, 255, .2); display: grid; place-items: center; }
.vmm-row .ic i { margin: 0 !important; color: #fff !important; }
.vmm-row small { display: block; font-weight: 500; opacity: .8; font-size: .74rem; }
.vmm-row .chev { margin-left: auto; opacity: .7; font-size: .8rem; }
.vmm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.vmm-grid a { display: flex; align-items: center; gap: .5rem; padding: .6rem .65rem; border-radius: 11px; background: rgba(255, 255, 255, .1);
    color: #fff !important; text-decoration: none; font-size: .84rem; font-weight: 600; line-height: 1.2; }
.vmm-grid a i { margin: 0 !important; color: #F0E6D2 !important; width: 1.1rem; text-align: center; }
.vmm-grid a:active, .vmm-grid a:hover, .vmm-row:hover { background: rgba(255, 255, 255, .22); }
/* Petit téléphone : profils sur une colonne, en lignes */
@media (max-width: 359.98px) {
    .vmm-roles { grid-template-columns: 1fr; }
    .vmm-role { flex-direction: row; justify-content: flex-start; padding: .5rem .6rem; text-align: left; }
    .vmm-grid { grid-template-columns: 1fr; }
}
/* Tablette : plus d'air, rubriques sur quatre colonnes */
@media (min-width: 768px) {
    .vmm { padding: .6rem .4rem .8rem; }
    .vmm-card { padding: 1.1rem; }
    .vmm-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ===== Proposition d'installation (layouts/partials/install-offer) ===== */
.pwa-offer { border: 0; border-radius: 20px; box-shadow: 0 20px 50px rgba(0, 0, 0, .25); }
.pwa-offer-icon { border-radius: 50%; box-shadow: 0 6px 18px rgba(107, 85, 56, .3); }
.pwa-offer-list li { display: flex; gap: .6rem; align-items: flex-start; margin-bottom: .45rem; }
.pwa-offer-list i { color: var(--sispe-primary, #8B6F47); margin-top: .2rem; width: 1rem; text-align: center; }
.pwa-offer-steps { padding-left: 1.2rem; background: #FFF9F5; border: 1px solid #F0E6D2; border-radius: 12px; padding: .85rem .85rem .85rem 2rem; }
.pwa-offer-steps li { margin-bottom: .35rem; }
.pwa-offer-steps li:last-child { margin-bottom: 0; }

/* ===== Fiche d'une séance (layouts/partials/session-summary) ===== */
.sx-card { background: #fff; border: 1px solid #EFE6D6; border-radius: 16px; overflow: hidden; }
.sx-top { background: linear-gradient(135deg,#6B5538,#A0826D); color: #fff; padding: 1rem 1.2rem; }
.sx-top .ec { font-size: 1.15rem; font-weight: 800; }
.sx-top .meta { opacity: .9; font-size: .88rem; }
.sx-state { display: flex; gap: .7rem; align-items: flex-start; padding: .75rem 1.2rem; border-bottom: 1px solid #EFE6D6; font-size: .88rem; }
.sx-state i { font-size: 1.1rem; margin-top: .1rem; }
.sx-state.ok { background: #EEF7EE; color: #1B5E20; } .sx-state.draft { background: #F5F2EC; color: #5a4a35; } .sx-state.cancel { background: #FDECEC; color: #8E1B1B; }
.sx-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .6rem; padding: 1rem 1.2rem 0; }
.sx-grid > div { background: #FFFBF5; border: 1px solid #EFE6D6; border-radius: 10px; padding: .55rem .75rem; }
.sx-grid .l { font-size: .72rem; color: #8a7a62; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.sx-grid .v { font-weight: 700; color: #3d3020; }
.sx-body { padding: 1rem 1.2rem 1.1rem; }
.sx-body h6 { font-size: .74rem; color: #8a7a62; text-transform: uppercase; letter-spacing: .05em; font-weight: 800; margin: .8rem 0 .25rem; }
.sx-body h6:first-child { margin-top: 0; }
.sx-body p { margin: 0; color: #3d3020; white-space: pre-line; }

/* ===== En-tête de page (components/page-hero) ===== */
.sp-hero { background: linear-gradient(135deg, #6B5538, #A0826D); color: #fff; border-radius: 16px; padding: 1.15rem 1.4rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.sp-hero h1 { color: #fff; font-size: 1.55rem; margin: 0 0 .25rem; }
.sp-hero p { margin: 0; opacity: .92; font-size: .9rem; max-width: 62rem; }
.sp-hero-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.sp-hero-actions .btn-light { color: #6B5538; font-weight: 700; }
.sp-hero-extra { margin-top: .6rem; }

/* ===== Lancement d'une évaluation (pedagogic/partials/evaluation-launch) ===== */
.ev-launch .ev-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem 1rem; align-items: center; padding: .75rem 1rem; border-top: 1px solid #F0E6D2; }
.ev-launch .ev-row:first-child { border-top: 0; }
.ev-launch .ev-name { font-weight: 700; color: #3b3125; }
.ev-launch .ev-meta { font-size: .82rem; color: #6c757d; }
.ev-launch .ev-done { font-size: .78rem; font-weight: 700; color: #2E7D32; background: #E8F5E9; border-radius: 999px; padding: .1rem .55rem; white-space: nowrap; }
.ev-launch .progress { height: 6px; background: #F0E6D2; width: 140px; }
.ev-launch .progress-bar { background: #1565C0; }
@media (max-width: 575px) { .ev-launch .ev-row { grid-template-columns: 1fr; } }


/* ===== Pointage des présences aux TD avec le badge QR (pedagogic/td-groups/badge, attendance ; group-delegate/attendance ; student/attendance) ===== */
.at-card { background: #fff; border: 1px solid #F0E6D2; border-radius: 14px; padding: 1.1rem 1.25rem; height: 100%; }
.at-card h2 { font-size: 1.05rem; font-weight: 800; color: #6B5538; margin: 0 0 .5rem; }
.at-card p { color: #6f604c; font-size: .9rem; }
.at-choice.is-current { border-color: #8B6F47; box-shadow: 0 0 0 3px rgba(139,111,71,.15); }
.at-tag { display: inline-flex; align-items: center; gap: .35rem; border-radius: 999px; padding: .2rem .7rem; font-size: .78rem; font-weight: 700; background: #FFF8E1; color: #6B5538; border: 1px solid #D4A574; }
.at-steps { list-style: none; counter-reset: at; padding: 0; margin: 0; }
.at-steps li { counter-increment: at; display: flex; gap: .7rem; align-items: flex-start; padding: .4rem 0; font-size: .9rem; color: #555; }
.at-steps li::before { content: counter(at); flex: 0 0 26px; height: 26px; border-radius: 50%; background: #8B6F47; color: #fff; font-weight: 700; font-size: .8rem; display: flex; align-items: center; justify-content: center; }

/* Badge (aperçu, impression et affichage sur le téléphone du délégué) */
.at-badge { max-width: 340px; margin: 0 auto; background: #fff; border: 2px solid #8B6F47; border-radius: 18px; overflow: hidden; text-align: center; }
.at-badge-top { background: linear-gradient(135deg, #6B5538, #A0826D); color: #fff; padding: .7rem 1rem; }
.at-badge-top strong { display: block; font-size: 1.05rem; letter-spacing: .3px; }
.at-badge-top small { opacity: .9; }
.at-qr { padding: 1rem 1.25rem .5rem; }
.at-qr svg { width: 100%; height: auto; max-width: 280px; display: block; margin: 0 auto; }
.at-badge-bottom { padding: 0 1rem 1rem; color: #6B5538; font-size: .85rem; }
.at-badge-bottom strong { display: block; font-size: 1.15rem; }
.at-timer { height: 5px; background: #F0E6D2; border-radius: 3px; overflow: hidden; margin: .5rem auto 0; max-width: 280px; }
.at-timer > span { display: block; height: 100%; width: 100%; background: #8B6F47; transition: width 1s linear; }

/* Liste d'appel */
.at-head { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: .75rem; }
.at-counts { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.at-count { border-radius: 999px; padding: .25rem .8rem; font-weight: 700; font-size: .85rem; }
.at-count.ok { background: #E8F5E9; color: #2E7D32; }
.at-count.no { background: #FFEBEE; color: #C62828; }
.at-present { color: #2E7D32; font-weight: 700; }
.at-absent { color: #C62828; font-weight: 700; }
.at-slots .list-group-item { display: flex; justify-content: space-between; align-items: center; gap: .5rem; font-size: .88rem; }
.at-slots .list-group-item.active { background: #8B6F47; border-color: #8B6F47; }

/* Scanner de l'espace étudiant */
.at-scanner { position: relative; max-width: 420px; margin: 0 auto; border-radius: 16px; overflow: hidden; background: #2b2218; aspect-ratio: 1 / 1; }
.at-scanner video { width: 100%; height: 100%; object-fit: cover; display: block; }
.at-scanner .at-frame { position: absolute; inset: 14%; border: 3px solid rgba(255,248,225,.9); border-radius: 18px; pointer-events: none; }
.at-scanner .at-idle { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; color: #F0E6D2; text-align: center; padding: 1rem; }
.at-scanner .at-idle i { font-size: 3rem; }
.at-result { max-width: 420px; margin: 1rem auto 0; border-radius: 12px; padding: .85rem 1rem; font-weight: 600; display: none; }
.at-result.is-ok { display: block; background: #E8F5E9; color: #1B5E20; border: 1px solid #A5D6A7; }
.at-result.is-error { display: block; background: #FFEBEE; color: #B71C1C; border: 1px solid #EF9A9A; }
.at-result.is-warn { display: block; background: #FFF3E0; color: #8a4b00; border: 1px solid #FFCC80; }

@media print {
    .at-noprint, .at-page .sp-hero, .at-page .alert { display: none !important; }
    .at-badge { border-width: 2px; break-inside: avoid; }
}

/* ===== Tableaux de bord et pages des délégués (préfixe dl- : distinct du dh- propre au tableau de bord du chef de département) ===== */
.dl-hero { border-radius: 16px; background: linear-gradient(135deg,#6B5538,#8B6F47 55%,#A0826D); color: #fff; padding: 1.2rem 1.4rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; box-shadow: 0 6px 20px rgba(107,85,56,.12); }
.dl-hero > div:first-child { flex: 1 1 380px; min-width: 0; }
.dl-hero .sub { opacity: .9; font-size: .9rem; }
.dl-hero h1 { font-size: 1.55rem; margin: .1rem 0 .2rem; font-weight: 800; color: #fff; }
.dl-facts { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .55rem; }
.dl-facts span { background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.25); border-radius: 999px; padding: .1rem .65rem; font-size: .8rem; font-weight: 600; }
.dl-rate { text-align: right; min-width: 220px; flex: 0 0 auto; }
.dl-rate .big { font-size: 2.2rem; font-weight: 800; line-height: 1; }
.dl-rate .track { height: 8px; border-radius: 4px; background: rgba(255,255,255,.25); overflow: hidden; margin: .45rem 0 .25rem; }
.dl-rate .track > span { display: block; height: 100%; background: #F3D9A4; }
.dl-rate .btn { margin-top: .6rem; font-weight: 800; }
.dl-acts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .6rem; }
.dl-acts a { display: flex; align-items: center; gap: .6rem; padding: .6rem .8rem; border-radius: 12px; border: 1px solid #E4D8C4; background: #fff; color: #3d3020; font-weight: 600; font-size: .86rem; text-decoration: none; transition: border-color .15s, background .15s; }
.dl-acts a i { flex: 0 0 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: #F0E6D2; color: #6B5538; }
.dl-acts a.main i { background: linear-gradient(135deg,#8B6F47,#A0826D); color: #fff; }
.dl-acts a:hover { border-color: #8B6F47; background: #FFFBF5; color: #3d3020; }
.dl-kpi { background: #fff; border: 1px solid #EFE6D6; border-left: 5px solid #8B6F47; border-radius: 12px; padding: .85rem 1rem; height: 100%; }
.dl-kpi small { display: block; color: #8a7a62; font-size: .78rem; }
.dl-kpi small:first-child { font-weight: 700; text-transform: uppercase; letter-spacing: .03em; font-size: .72rem; }
.dl-kpi .v { font-size: 1.55rem; font-weight: 800; color: #3d3020; line-height: 1.2; margin: .15rem 0; }
.dl-kpi.is-warn { border-left-color: #EF6C00; } .dl-kpi.is-warn .v { color: #B85C00; }
.dl-kpi.is-bad { border-left-color: #C62828; } .dl-kpi.is-bad .v { color: #C62828; }
.dl-kpi.is-ok { border-left-color: #2E7D32; }
.dl-filter { background: #fff; border: 1px solid #EFE6D6; border-radius: 14px; padding: .55rem 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .85rem; }
.dl-filter label { font-size: .78rem; font-weight: 700; color: #6B5538; margin: 0; }
.dl-filter select { max-width: 240px; }
.dl-head { background: linear-gradient(135deg,#6B5538,#8B6F47) !important; color: #fff; }
.dl-head h2, .dl-head h5 { color: #fff; }
.dl-section { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: .3rem 1rem; margin: 0 0 .75rem; }
.dl-section h2 { font-size: 1.2rem; font-weight: 800; color: #3d3020; margin: 0; }
.dl-section small { color: #8a7a62; }
.dl-chart { position: relative; height: 270px; }
.dl-empty { min-height: 200px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #8a7a62; font-size: .88rem; }
.dl-empty i { font-size: 1.6rem; opacity: .45; margin-bottom: .45rem; }
.dl-table thead th { white-space: nowrap; font-size: .78rem; color: #6B5538; }
.dl-cell { display: inline-block; min-width: 54px; padding: .15rem .5rem; border-radius: 999px; font-weight: 700; font-size: .82rem; color: #fff; }
.dl-cell.ok { background: #2E7D32; } .dl-cell.warn { background: #EF6C00; } .dl-cell.bad { background: #C62828; }
.dl-bar { height: 8px; border-radius: 4px; background: #F0E6D2; overflow: hidden; min-width: 80px; }
.dl-bar > span { display: block; height: 100%; }
.dl-bar.ok > span { background: linear-gradient(90deg, #2E7D32, #66BB6A); }
.dl-bar.warn > span { background: linear-gradient(90deg, #EF6C00, #FFB74D); }
.dl-bar.bad > span { background: linear-gradient(90deg, #C62828, #EF5350); }
.dl-att { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .6rem .9rem; border-radius: 8px; border: 1px solid #F0E6D2; border-left: 4px solid; margin-bottom: .5rem; text-decoration: none; color: #333; background: #fff; font-size: .9rem; }
.dl-att:hover { background: #FFF9F5; color: #333; }
.dl-att.danger { border-left-color: #C62828; } .dl-att.warning { border-left-color: #EF6C00; } .dl-att.info { border-left-color: #8B6F47; }
.dl-sem { background: #FFF9F5; border-left: 4px solid #D4A574; }
.dl-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0; background: #fff; border: 1px solid #EFE6D6; border-radius: 14px; overflow: hidden; }
.dl-strip > div { padding: .8rem 1rem; border-right: 1px solid #F0E6D2; }
.dl-strip > div:last-child { border-right: 0; }
.dl-strip small { display: block; color: #8a7a62; font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.dl-strip strong { display: block; font-size: 1.3rem; color: #3d3020; }
.dl-strip span { font-size: .8rem; color: #6f604c; }
.dl-strip .is-bad strong { color: #C62828; }
.dl-info dt { color: #8B6F47; font-weight: 700; text-transform: uppercase; font-size: .72rem; letter-spacing: .04em; }
.dl-info dd { margin: 0 0 .6rem; color: #3d3020; }
@media (max-width: 575px) { .dl-rate { text-align: left; min-width: 0; } .dl-strip > div { border-right: 0; border-bottom: 1px solid #F0E6D2; } }