/* DM Sans auto-hébergée (plus de dépendance à fonts.googleapis.com, compatible CSP stricte) */
@font-face {
    font-family: 'DM Sans';
    font-style: italic;
    font-weight: 100 1000;
    font-display: swap;
    src: url('../fonts/rP2Fp2ywxg089UriCZa4Hz-D.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'DM Sans';
    font-style: italic;
    font-weight: 100 1000;
    font-display: swap;
    src: url('../fonts/rP2Fp2ywxg089UriCZa4ET-DNl0.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 100 1000;
    font-display: swap;
    src: url('../fonts/rP2Hp2ywxg089UriCZOIHQ.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 100 1000;
    font-display: swap;
    src: url('../fonts/rP2Hp2ywxg089UriCZ2IHSeH.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    --tsg-font: "DM Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    --tsg-navy: #0b1f3a;
    --tsg-navy-2: #123762;
    --tsg-blue: #155eef;
    --tsg-blue-soft: rgba(21, 94, 239, 0.1);
    --tsg-green: #16a34a;
    --tsg-orange: #f97316;
    --tsg-red: #dc2626;
    --ink: #0f172a;
    --muted: #64748b;
    --line: #e2e8f0;
    --panel: rgba(255, 255, 255, 0.92);
    --page: #f4f7fb;

    /* Échelle d'élévation — plus marquée qu'un simple aplat Tailwind */
    --shadow-xs: 0 2px 6px rgba(15, 23, 42, 0.05);
    --shadow-sm: 0 8px 20px rgba(15, 23, 42, 0.07);
    --shadow: 0 16px 36px rgba(15, 23, 42, 0.10);
    --shadow-lift: 0 24px 48px rgba(15, 23, 42, 0.16);

    /* Échelle de rayon — cartes plus douces, façon POC, sans perdre l'identité TSG */
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 18px;
    --radius-full: 999px;

    --ease-fluid: cubic-bezier(0.22, 1, 0.36, 1);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body,
.font-sans {
    font-family: var(--tsg-font) !important;
}

body {
    min-height: 100vh;
    color: var(--ink);
    background: linear-gradient(180deg, #f8fafc 0%, var(--page) 100%) !important;
}

body::selection {
    color: #fff;
    background: var(--tsg-blue);
}

main,
.container {
    animation: page-in 320ms var(--ease-fluid) both;
}

@keyframes page-in {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes card-in {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.99);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes pop-in {
    0% { opacity: 0; transform: scale(0.9); }
    60% { opacity: 1; transform: scale(1.03); }
    100% { transform: scale(1); }
}

/* ============================================================
   Navigation — sidebar verticale
   ============================================================ */

:root {
    --sidebar-w: 250px;
    --topbar-h: 32px;
}

body.has-sidebar {
    padding-left: var(--sidebar-w);
    /* Réserve l'espace de la barre horizontale .tsg-topbar, pour qu'elle ne recouvre jamais
       le premier élément interactif du contenu de page (boutons d'en-tête, onglets, filtres...). */
    padding-top: var(--topbar-h);
}

.tsg-topbar {
    position: fixed;
    top: 0;
    left: var(--sidebar-w);
    right: 0;
    height: var(--topbar-h);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 20px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(15, 31, 58, 0.06);
}

.tsg-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sidebar-w);
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #0c2038 0%, #0a1830 100%);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 0 40px rgba(6, 12, 26, 0.2);
    z-index: 9999;
    transition: transform 260ms var(--ease-fluid);
}

.tsg-sidebar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 22px 18px 18px;
}

.tsg-sidebar-logo {
    height: 30px;
    width: auto;
    filter: brightness(0) invert(1);
}

.tsg-sidebar-title {
    font-size: 14px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.tsg-sidebar-subtitle {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.38);
}

.tsg-sidebar-nav {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 6px 12px;
    overflow-y: auto;
}

.tsg-sidebar-sep {
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
    margin: 10px 6px;
}

.tsg-sidebar-link.hidden {
    display: none !important;
}

.tsg-sidebar-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    color: rgba(255, 255, 255, 0.62);
    font-size: 13px;
    font-weight: 650;
    text-decoration: none;
    position: relative;
    transition: background-color 180ms ease, color 180ms ease, transform 180ms var(--ease-fluid);
}

.tsg-sidebar-link svg {
    width: 19px;
    height: 19px;
    flex-shrink: 0;
}

.tsg-sidebar-link:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    transform: translateX(2px);
}

.tsg-sidebar-link.active {
    background: rgba(21, 94, 239, 0.18);
    color: #fff;
}

.tsg-sidebar-link.active::before {
    content: "";
    position: absolute;
    left: -12px;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: var(--radius-full);
    background: var(--tsg-blue);
}

.tsg-sidebar-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 14px 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.tsg-sidebar-footer #nav-user-display {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.55);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tsg-sidebar-logout {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    color: rgba(255, 255, 255, 0.55);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background-color 180ms ease, color 180ms ease;
    flex-shrink: 0;
}

.tsg-sidebar-logout:hover {
    background: rgba(220, 38, 38, 0.18);
    color: #fca5a5;
}

.sidebar-toggle-mobile {
    display: none;
    position: fixed;
    top: 14px;
    left: 14px;
    z-index: 9998;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    background: var(--tsg-navy);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
}

.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(6, 12, 26, 0.5);
    z-index: 9998;
}

@media (max-width: 900px) {
    body.has-sidebar {
        padding-left: 0;
        padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
    }
    .tsg-topbar {
        left: 0;
    }
    .tsg-sidebar {
        transform: translateX(-100%);
    }
    body.sidebar-open .tsg-sidebar {
        transform: translateX(0);
    }
    body.sidebar-open .sidebar-backdrop {
        display: block;
    }
    .sidebar-toggle-mobile {
        display: flex;
    }
    .tsg-bottombar {
        display: flex;
    }
}

/* ============================================================
   Barre d'onglets mobile (bas d'écran, façon appli native)
   ============================================================ */

.tsg-bottombar {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    background: linear-gradient(180deg, #0c2038 0%, #0a1830 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 -8px 24px rgba(6, 12, 26, 0.25);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
    gap: 2px;
}

.tsg-bottombar-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    flex: 1 1 0;
    min-width: 0;
    padding: 6px 2px;
    border-radius: var(--radius-sm);
    color: rgba(255, 255, 255, 0.55);
    text-decoration: none;
    transition: background-color 180ms ease, color 180ms ease;
}

.tsg-bottombar-link.hidden {
    display: none !important;
}

.tsg-bottombar-link svg {
    width: 21px;
    height: 21px;
    flex-shrink: 0;
}

.tsg-bottombar-link span {
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.tsg-bottombar-link:active {
    background: rgba(255, 255, 255, 0.08);
}

.tsg-bottombar-link.active {
    color: #fff;
    background: rgba(21, 94, 239, 0.18);
}

/* ============================================================
   Surfaces & cartes
   ============================================================ */

.bg-white {
    background-color: var(--panel) !important;
}

.rounded-xl,
.rounded-2xl,
.rounded-3xl {
    border-radius: var(--radius-lg) !important;
}

.rounded-lg {
    border-radius: var(--radius-md) !important;
}

.rounded {
    border-radius: var(--radius-sm) !important;
}

.shadow-xl,
.shadow-lg {
    box-shadow: var(--shadow) !important;
}

.shadow-md {
    box-shadow: var(--shadow-sm) !important;
}

.shadow-sm {
    box-shadow: var(--shadow-xs) !important;
}

.border,
.border-gray-200,
.border-gray-100,
.divide-gray-100 > :not([hidden]) ~ :not([hidden]) {
    border-color: var(--line) !important;
}

.bg-gray-50,
.bg-gray-100,
.bg-slate-100 {
    background-color: #f8fafc !important;
}

label,
.tracking-wider,
.tracking-widest {
    letter-spacing: 0 !important;
}

/* Toute carte blanche avec ombre devient une vraie "tuile" élevée,
   avec un survol prononcé quand elle est interactive. */
.rounded-xl.shadow-md,
.rounded-2xl.shadow-md,
.rounded-xl.shadow-xl,
.rounded-2xl.shadow-xl {
    transition: transform 260ms var(--ease-fluid), box-shadow 260ms var(--ease-fluid), border-color 200ms ease;
}

a.cursor-pointer,
div.cursor-pointer,
[onclick] {
    transition: transform 260ms var(--ease-fluid), box-shadow 260ms var(--ease-fluid), background-color 200ms ease, border-color 200ms ease;
}

a.cursor-pointer:hover,
div.cursor-pointer:hover,
[onclick]:not(button):not(a):hover {
    transform: translateY(-6px) scale(1.01);
    box-shadow: var(--shadow-lift) !important;
    border-color: rgba(21, 94, 239, 0.25) !important;
}

[onclick]:focus-visible,
.cursor-pointer:focus-visible {
    outline: 2px solid var(--tsg-blue);
    outline-offset: 3px;
}

/* ============================================================
   Formulaires
   ============================================================ */

input,
select,
textarea {
    min-height: 42px;
    border: 1px solid var(--line) !important;
    border-radius: var(--radius-sm) !important;
    background-color: rgba(255, 255, 255, 0.95) !important;
    color: var(--ink) !important;
    transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease, transform 160ms ease;
}

input:hover,
select:hover,
textarea:hover {
    border-color: #cbd5e1 !important;
}

input:focus,
select:focus,
textarea:focus {
    border-color: rgba(21, 94, 239, 0.55) !important;
    box-shadow: 0 0 0 4px var(--tsg-blue-soft) !important;
    outline: none !important;
}

/* ============================================================
   Boutons
   ============================================================ */

button,
a[class*="bg-"] {
    border-radius: var(--radius-sm) !important;
    transition: transform 200ms var(--ease-fluid), box-shadow 200ms var(--ease-fluid), background-color 200ms ease, border-color 200ms ease, filter 200ms ease;
}

button:hover,
a[class*="bg-"]:hover {
    transform: translateY(-2px);
    filter: brightness(1.04);
    box-shadow: var(--shadow-sm);
}

button:active,
a[class*="bg-"]:active {
    transform: translateY(0);
    filter: brightness(0.98);
}

button:disabled {
    filter: none;
    transform: none !important;
}

/* ============================================================
   Tableaux
   ============================================================ */

table {
    border-collapse: separate;
    border-spacing: 0;
}

thead {
    background: #f8fafc !important;
}

tbody tr {
    transition: background-color 200ms ease, transform 200ms var(--ease-fluid), box-shadow 200ms var(--ease-fluid);
    animation: card-in 300ms var(--ease-fluid) both;
}

tbody tr:hover {
    background-color: rgba(21, 94, 239, 0.05) !important;
    transform: scale(1.004);
    box-shadow: inset 3px 0 0 var(--tsg-blue);
    position: relative;
    z-index: 1;
}

#rows > tr:nth-child(1) { animation-delay: 0ms; }
#rows > tr:nth-child(2) { animation-delay: 25ms; }
#rows > tr:nth-child(3) { animation-delay: 50ms; }
#rows > tr:nth-child(4) { animation-delay: 75ms; }
#rows > tr:nth-child(5) { animation-delay: 100ms; }
#rows > tr:nth-child(6) { animation-delay: 125ms; }
#rows > tr:nth-child(7) { animation-delay: 150ms; }
#rows > tr:nth-child(8) { animation-delay: 175ms; }
#rows > tr:nth-child(n+9) { animation-delay: 200ms; }

/* ============================================================
   Cartes d'anomalies (bandeau horizontal type POC)
   ============================================================ */

#anomalies-list > div {
    transition: transform 260ms var(--ease-fluid), box-shadow 260ms var(--ease-fluid);
    animation: card-in 320ms var(--ease-fluid) both;
}

#anomalies-list > div:hover {
    transform: translateY(-6px) scale(1.04);
}

#anomalies-list > div:nth-child(1) { animation-delay: 0ms; }
#anomalies-list > div:nth-child(2) { animation-delay: 45ms; }
#anomalies-list > div:nth-child(3) { animation-delay: 90ms; }
#anomalies-list > div:nth-child(4) { animation-delay: 135ms; }
#anomalies-list > div:nth-child(n+5) { animation-delay: 180ms; }

#anomalies-list {
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: var(--line) transparent;
}

#anomalies-list::-webkit-scrollbar {
    height: 6px;
}

#anomalies-list::-webkit-scrollbar-thumb {
    background: var(--line);
    border-radius: var(--radius-full);
}

#anomalies-list::-webkit-scrollbar-thumb:hover {
    background: #cbd5e1;
}

/* ============================================================
   Chiffres clés (scores, compteurs) — petit effet d'apparition
   ============================================================ */

#avg-score-display,
#count {
    display: inline-block;
    animation: pop-in 420ms var(--ease-fluid) both;
}

/* ============================================================
   Badges / pills
   ============================================================ */

.rounded-lg[class*="text-[10px]"],
.rounded-lg[class*="text-[7px]"],
.rounded-lg[class*="text-[9px]"] {
    border-radius: var(--radius-full) !important;
    padding-left: 0.65em !important;
    padding-right: 0.65em !important;
}

/* ============================================================
   Poignée de glisser-déposer réutilisable
   (préparation UI pour le réordonnancement du référentiel
   équipements / catégories du module Inventaire à venir)
   ============================================================ */

.drag-handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 32px;
    cursor: grab;
    color: #94a3b8;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -2px;
    user-select: none;
    touch-action: none;
    transition: color 160ms ease, background-color 160ms ease;
    border-radius: var(--radius-sm);
}

.drag-handle::before {
    content: "⋮⋮";
}

.drag-handle:hover {
    color: var(--tsg-blue);
    background: var(--tsg-blue-soft);
}

.drag-handle:active {
    cursor: grabbing;
}

.is-dragging {
    opacity: 0.5;
    box-shadow: none !important;
}

.drop-target {
    box-shadow: 0 -3px 0 var(--tsg-blue) !important;
}

/* ============================================================
   Modale image
   ============================================================ */

#imageModal {
    transition: opacity 220ms ease;
}

#imageModal img {
    animation: card-in 260ms var(--ease-fluid) both;
}

/* ============================================================
   Écran de connexion
   ============================================================ */

.hero-shell {
    min-height: 100vh;
    background:
        linear-gradient(120deg, rgba(11, 31, 58, 0.86), rgba(15, 23, 42, 0.62)),
        var(--hero-image) center / cover no-repeat fixed !important;
}

.auth-panel {
    width: min(92vw, 420px);
    border: 1px solid rgba(255, 255, 255, 0.72);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: var(--shadow-lift);
    backdrop-filter: blur(18px);
    border-radius: var(--radius-lg);
    animation: card-in 380ms var(--ease-fluid) both;
}

.auth-button {
    min-height: 48px;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--tsg-navy) 0%, var(--tsg-navy-2) 100%);
    color: #fff;
    font-weight: 900;
    box-shadow: 0 12px 24px rgba(11, 31, 58, 0.28);
}

.auth-button:hover {
    box-shadow: 0 16px 32px rgba(11, 31, 58, 0.36);
}

/* ============================================================
   Librairie de composants réutilisables — base évolutive
   pour les futures pages (module Inventaire, etc.). Ces classes
   fonctionnent seules, sans dépendre des utilitaires Tailwind.
   ============================================================ */

.app-section-title {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.tsg-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 1.1rem 1.25rem;
    transition: transform 260ms var(--ease-fluid), box-shadow 260ms var(--ease-fluid);
}

.tsg-card--interactive {
    cursor: pointer;
}

.tsg-card--interactive:hover {
    transform: translateY(-6px) scale(1.01);
    box-shadow: var(--shadow-lift);
}

.tsg-card--accent-navy { border-left: 6px solid var(--tsg-navy); }
.tsg-card--accent-blue { border-left: 6px solid var(--tsg-blue); }
.tsg-card--accent-green { border-left: 6px solid var(--tsg-green); }
.tsg-card--accent-orange { border-left: 6px solid var(--tsg-orange); }
.tsg-card--accent-red { border-left: 6px solid var(--tsg-red); }

.tsg-stat {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.tsg-stat .value {
    font-size: 2rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    color: var(--ink);
}

.tsg-stat .label {
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
}

.tsg-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    padding: 0.3em 0.75em;
    border-radius: var(--radius-full);
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border: 1px solid transparent;
}

.tsg-badge--success { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.tsg-badge--warning { background: #fff7ed; color: #b45309; border-color: #fed7aa; }
.tsg-badge--danger { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.tsg-badge--info { background: var(--tsg-blue-soft); color: var(--tsg-navy-2); border-color: rgba(21, 94, 239, 0.25); }
.tsg-badge--neutral { background: #f1f5f9; color: #475569; border-color: var(--line); }

.tsg-list-row {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: #fff;
    transition: transform 220ms var(--ease-fluid), box-shadow 220ms var(--ease-fluid), border-color 200ms ease;
}

.tsg-list-row:hover {
    transform: translateX(4px);
    box-shadow: var(--shadow-sm);
    border-color: rgba(21, 94, 239, 0.25);
}

.tsg-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 3rem 1.5rem;
    color: var(--muted);
    font-size: 0.85rem;
    font-style: italic;
    text-align: center;
}

/* ============================================================
   Contrôle de réponse (écran d'audit structuré) — larges cibles
   tactiles pour usage terrain/tablette, 4 états visuellement distincts.
   ============================================================ */

.answer-btn {
    padding: 12px 6px;
    border-radius: var(--radius-sm);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    text-align: center;
    background: #f8fafc;
    border: 1px solid var(--line);
    color: #94a3b8;
    transition: transform 180ms var(--ease-fluid), background-color 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
    cursor: pointer;
}

.answer-btn:hover {
    border-color: #cbd5e1;
    transform: translateY(-1px);
}

.answer-btn:active {
    transform: translateY(0);
}

.answer-btn.selected-yes { background: #ecfdf5; border-color: #a7f3d0; color: #047857; box-shadow: var(--shadow-xs); }
.answer-btn.selected-no { background: #fef2f2; border-color: #fecaca; color: #b91c1c; box-shadow: var(--shadow-xs); }
.answer-btn.selected-na { background: #f1f5f9; border-color: #cbd5e1; color: #475569; box-shadow: var(--shadow-xs); }
.answer-btn.selected-nv { background: #fff7ed; border-color: #fed7aa; color: #b45309; box-shadow: var(--shadow-xs); }

/* Barre de progression compacte, réutilisable */
.tsg-progress-track {
    height: 8px;
    background: #eef1f4;
    border-radius: var(--radius-full);
    overflow: hidden;
}

.tsg-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--tsg-blue), #4c8dff);
    border-radius: var(--radius-full);
    transition: width 320ms var(--ease-fluid);
}

/* Carte question dans le flux d'audit structuré */
.tsg-question {
    padding-top: 14px;
    margin-top: 14px;
    border-top: 1px solid var(--line);
}

.tsg-question:first-child {
    padding-top: 0;
    margin-top: 0;
    border-top: 0;
}

/* Carte de progression d'audit toujours visible pendant le scroll d'une longue fiche
   (classe plutôt qu'un style inline : incompatible avec la CSP stricte style-src 'self'). */
.tsg-sticky-progress {
    position: sticky;
    top: var(--topbar-h);
    z-index: 50;
}

/* Pulse temporaire pour signaler la question où l'on reprend un brouillon restauré. */
.tsg-row-highlight {
    animation: tsg-row-pulse 2.2s ease-out;
    border-radius: 10px;
}

@keyframes tsg-row-pulse {
    0% { background-color: rgba(37, 99, 235, 0.14); box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.3); }
    100% { background-color: transparent; box-shadow: 0 0 0 2px rgba(37, 99, 235, 0); }
}

.tsg-question.is-answered-no,
.tsg-question.is-answered-nv {
    background: #fffaf5;
    border-radius: var(--radius-sm);
    padding: 12px;
    margin-left: -12px;
    margin-right: -12px;
    border-top-color: transparent;
}

/* ============================================================
   Accessibilité
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-delay: 0ms !important;
        transition-duration: 0.001ms !important;
    }
}

@media (max-width: 768px) {
    .container,
    main {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    nav .max-w-7xl {
        gap: 0.75rem;
    }
}

/* ============================================================
   Mobile — densité, confort tactile et modales plein écran
   ============================================================ */
@media (max-width: 640px) {
    /* Desserre les paddings pensés pour un écran large : moins de vide inutile sur téléphone */
    .p-8 { padding: 1.1rem !important; }
    .p-10 { padding: 1.35rem !important; }
    .px-8 { padding-left: 1.1rem !important; padding-right: 1.1rem !important; }
    .py-16 { padding-top: 1.75rem !important; padding-bottom: 1.75rem !important; }
    .py-8 { padding-top: 1.1rem !important; padding-bottom: 1.1rem !important; }
    .pb-16 { padding-bottom: 1.75rem !important; }
    .pb-12 { padding-bottom: 1.25rem !important; }

    /* Cibles tactiles confortables (recommandation ~44px) sur les champs de formulaire */
    select,
    input[type="text"],
    input[type="number"],
    input[type="password"],
    input[type="email"],
    input[type="date"] {
        min-height: 42px;
    }

    /* Retire le flash de surbrillance tactile Android/iOS pour un rendu plus "app native" */
    button, a, .tsg-card--interactive {
        -webkit-tap-highlight-color: transparent;
    }

    button:active,
    .tsg-card--interactive:active {
        transform: scale(0.98);
    }

    /* Fenêtres modales génériques (#app-modal) en feuille pleine largeur ancrée en bas,
       plus proche des habitudes d'une app mobile qu'une boîte de dialogue centrée */
    #app-modal {
        align-items: flex-end !important;
        padding: 0 !important;
    }

    #app-modal > .tsg-card {
        width: 100%;
        max-width: 100%;
        max-height: 85vh;
        overflow-y: auto;
        border-radius: 20px 20px 0 0;
        padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
        animation: sheet-up 220ms var(--ease-fluid) both;
    }

    @keyframes sheet-up {
        from { transform: translateY(100%); }
        to { transform: translateY(0); }
    }
}

/* ============================================================
   Fenêtre de confirmation (TSG.confirmDialog) — remplace confirm()
   ============================================================ */
.tsg-dialog-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(6, 12, 26, 0.55);
    animation: tsg-dialog-fade 160ms ease both;
}
.tsg-dialog {
    width: 100%;
    max-width: 400px;
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lift);
    padding: 24px;
    text-align: center;
    animation: tsg-dialog-in 260ms var(--ease-fluid) both;
}
.tsg-dialog-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 14px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--tsg-blue-soft);
    color: var(--tsg-navy-2);
}
.tsg-dialog--danger .tsg-dialog-icon { background: #fef2f2; color: var(--tsg-red); }
.tsg-dialog-icon svg { width: 24px; height: 24px; }
.tsg-dialog-title { font-size: 1.125rem; font-weight: 900; color: var(--ink); margin-bottom: 6px; }
.tsg-dialog-message { font-size: 0.875rem; font-weight: 500; color: var(--muted); line-height: 1.5; }
.tsg-dialog-warning {
    margin-top: 14px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: #fff7ed;
    border: 1px solid #fed7aa;
    color: #9a3412;
    font-size: 0.8125rem;
    font-weight: 700;
    text-align: left;
}
.tsg-dialog-actions { display: flex; gap: 10px; margin-top: 22px; }
.tsg-dialog-btn {
    flex: 1;
    padding: 11px 14px;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    font-weight: 800;
    cursor: pointer;
    transition: background-color 150ms ease, transform 150ms ease;
}
.tsg-dialog-btn:active { transform: scale(0.97); }
.tsg-dialog-btn--cancel { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.tsg-dialog-btn--cancel:hover { background: #f8fafc; }
.tsg-dialog-btn--confirm { background: var(--tsg-navy); color: #fff; border: 1px solid var(--tsg-navy); }
.tsg-dialog-btn--confirm:hover { background: var(--tsg-navy-2); }
.tsg-dialog--danger .tsg-dialog-btn--confirm { background: var(--tsg-red); border-color: var(--tsg-red); }
.tsg-dialog--danger .tsg-dialog-btn--confirm:hover { background: #b91c1c; }
@keyframes tsg-dialog-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes tsg-dialog-in { from { opacity: 0; transform: translateY(12px) scale(0.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .tsg-dialog-backdrop, .tsg-dialog { animation: none; }
}

/* Bouton-icône posé dans un champ (ex. œil du mot de passe) : pas d'effet de survol des boutons. */
.tsg-icon-btn,
.tsg-icon-btn:hover,
.tsg-icon-btn:active {
    background: transparent;
    box-shadow: none;
    transform: none;
    filter: none;
}

/* Petite liste déroulante intégrée à l'en-tête d'une carte (ex. filtre client de la tendance du score). */
.tsg-select-sm { min-height: 32px; height: 32px; padding-top: 0; padding-bottom: 0; }
@media (max-width: 900px) {
    .tsg-select-sm { min-height: 36px; height: 36px; }
}
.tsg-dialog-message { white-space: pre-line; }