html, body {
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Palette Coursoft. Deux thèmes (clair par défaut, sombre au choix de l'utilisateur) ; surbrillance et titres en Brown. */
:root {
    --csh-grey: rgb(64,64,64);
    --csh-light-grey: rgb(155,155,155);
    --csh-very-light-grey: rgb(171,171,171);
    --csh-super-light-grey: rgb(230,230,230);
    --csh-dark-grey: rgb(51,51,51);
    --csh-very-dark-grey: rgb(39,39,39);
    --csh-super-dark-grey: rgb(26,26,26);
    --csh-brown: #A1600D;
    --csh-dark-brown: rgb(127,74,0);
    --csh-light-brown: rgb(248,180,85);
    --csh-very-light-brown: rgb(244,189,113);
    --csh-super-dark-brown: rgb(51,30,0);
    --csh-radius: 1rem;
    --csh-radius-sm: .65rem;
    --csh-ease: cubic-bezier(.2,.7,.2,1);
    /* Teintes communes : charte CsLib.Web (cs-tokens.css). */
    --csh-glow: var(--bronze-glow);
    --csh-surface: var(--card-solid);
    --csh-surface-2: var(--bg2);
    --csh-card: var(--card);
    --csh-muted: var(--muted);
    --csh-line: var(--line);
    --csh-shadow: var(--shadow);
}

/* Fond, cartes « en verre » et halo bronze repris de CsBackup Web. */
[data-bs-theme=light] {
    --csh-brown-hi: #BE7A1F;
    --csh-page-bg: radial-gradient(1000px 500px at 85% -10%, var(--csh-glow), transparent 60%),
        radial-gradient(800px 500px at -10% 110%, var(--csh-glow), transparent 60%), #f5f1ec;
    --csh-sidebar: rgba(255,255,255,.55);
    --csh-shadow-sm: 0 1px 2px rgba(60,40,10,.06), 0 1px 3px rgba(60,40,10,.05);
    --csh-shadow-lg: 0 2px 4px rgba(80,50,10,.06), 0 12px 24px rgba(80,50,10,.08), 0 32px 64px -16px rgba(80,50,10,.18);
    --csh-header-bg: rgba(250,246,240,.72);
    --csh-nav-color: rgb(70,62,52);
    --csh-nav-hover: rgba(162,101,16,.1);
    --csh-title: #1a1718;
    --csh-client-bg: rgb(252,240,222);
    --csh-link: var(--csh-dark-brown);

    --bs-body-bg: #f5f1ec;
    --bs-body-bg-rgb: 245,241,236;
    --bs-body-color: #1a1718;
    --bs-body-color-rgb: 26,23,24;
    --bs-secondary-color: var(--csh-muted);
    --bs-secondary-bg: var(--csh-surface-2);
    --bs-tertiary-bg: var(--csh-surface-2);
    --bs-border-color: var(--csh-line);
    --bs-heading-color: var(--csh-title);
    --bs-link-color: var(--csh-dark-brown);
    --bs-link-color-rgb: 127,74,0;
    --bs-link-hover-color: var(--csh-brown);
    --bs-link-hover-color-rgb: 162,101,16;
    --bs-primary: var(--csh-brown);
    --bs-primary-rgb: 162,101,16;
    --bs-primary-text-emphasis: var(--csh-dark-brown);
    --bs-primary-bg-subtle: rgb(252,240,222);
    --bs-primary-border-subtle: var(--csh-very-light-brown);
    --bs-success: rgb(22,128,72);
    --bs-success-rgb: 22,128,72;
    --bs-danger: rgb(204,40,38);
    --bs-danger-rgb: 204,40,38;
    --bs-warning: rgb(176,110,10);
    --bs-warning-rgb: 176,110,10;
    --bs-focus-ring-color: rgba(162,101,16,.35);
}

[data-bs-theme=dark] {
    --csh-brown-hi: #D58B2B;
    --csh-page-bg: radial-gradient(1000px 500px at 85% -10%, var(--csh-glow), transparent 60%),
        radial-gradient(800px 500px at -10% 110%, var(--csh-glow), transparent 60%), #0f0d0e;
    --csh-sidebar: #171415;
    --csh-shadow-sm: 0 1px 2px rgba(0,0,0,.3);
    --csh-shadow-lg: 0 2px 6px rgba(0,0,0,.3), 0 16px 32px rgba(0,0,0,.35), 0 36px 72px -18px rgba(0,0,0,.55);
    --csh-header-bg: rgba(15,13,14,.75);
    --csh-nav-color: #d7d7d7;
    --csh-nav-hover: rgba(255,255,255,.1);
    --csh-title: var(--csh-brown-hi);
    --csh-client-bg: var(--csh-super-dark-brown);
    --csh-link: var(--csh-brown-hi);

    --bs-body-bg: #0f0d0e;
    --bs-body-bg-rgb: 15,13,14;
    --bs-body-color: #f3efe9;
    --bs-body-color-rgb: 243,239,233;
    --bs-secondary-color: var(--csh-muted);
    --bs-secondary-bg: var(--csh-surface);
    --bs-tertiary-bg: var(--csh-surface-2);
    --bs-border-color: var(--csh-line);
    --bs-emphasis-color: #fff;
    --bs-heading-color: var(--csh-brown-hi);
    --bs-link-color: var(--csh-brown-hi);
    --bs-link-color-rgb: 248,180,85;
    --bs-link-hover-color: var(--csh-very-light-brown);
    --bs-link-hover-color-rgb: 244,189,113;
    --bs-primary: var(--csh-brown);
    --bs-primary-rgb: 162,101,16;
    --bs-primary-text-emphasis: var(--csh-light-brown);
    --bs-primary-bg-subtle: var(--csh-super-dark-brown);
    --bs-primary-border-subtle: var(--csh-dark-brown);
    --bs-info: rgb(52,68,75);
    --bs-info-rgb: 52,68,75;
    --bs-success: rgb(47,182,81);
    --bs-success-rgb: 47,182,81;
    --bs-warning: rgb(244,185,8);
    --bs-warning-rgb: 244,185,8;
    --bs-warning-text-emphasis: rgb(255,219,111);
    --bs-danger: rgb(215,42,40);
    --bs-danger-rgb: 215,42,40;
    --bs-danger-text-emphasis: rgb(255,114,112);
    --bs-focus-ring-color: rgba(162,101,16,.5);
    --bs-form-valid-color: rgb(105,251,142);
    --bs-form-invalid-color: rgb(255,114,112);
}

body { background: var(--csh-page-bg); background-attachment: fixed; min-height: 100vh; }

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--csh-brown);
    --bs-btn-border-color: var(--csh-brown);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--csh-dark-brown);
    --bs-btn-hover-border-color: var(--csh-dark-brown);
    --bs-btn-active-bg: var(--csh-dark-brown);
    --bs-btn-active-border-color: var(--csh-dark-brown);
    --bs-btn-disabled-bg: var(--csh-brown);
    --bs-btn-disabled-border-color: var(--csh-brown);
}

.btn-outline-primary {
    --bs-btn-color: var(--csh-light-brown);
    --bs-btn-border-color: var(--csh-brown);
    --bs-btn-hover-bg: var(--csh-brown);
    --bs-btn-hover-border-color: var(--csh-brown);
    --bs-btn-active-bg: var(--csh-dark-brown);
    --bs-btn-active-border-color: var(--csh-dark-brown);
}

.navbar-brand, h1, h2, h3, h4, h5, h6 { color: var(--csh-title); }
h1 { font-weight: 700; font-size: 1.75rem; }

/* Cartes et tableaux en surfaces arrondies, à la manière de CsBackup. */
.card { --bs-card-bg: var(--csh-surface); --bs-card-border-color: var(--csh-line); --bs-card-border-radius: var(--csh-radius);
    --bs-card-cap-bg: transparent; box-shadow: var(--csh-shadow); }
.content > .table, .content .table:not(.table-sm) { background: var(--csh-card); backdrop-filter: blur(14px); border-radius: var(--csh-radius); overflow: hidden;
    box-shadow: var(--csh-shadow); --bs-table-border-color: var(--csh-line); }
.table > thead th { font-size: .7rem; letter-spacing: .09em; text-transform: uppercase; color: var(--bs-secondary-color); font-weight: 600; }
.form-control, .form-select { border-radius: .6rem; }
[data-bs-theme=light] .form-control, [data-bs-theme=light] .form-select { background-color: var(--csh-surface); }
.btn { border-radius: .6rem; }
.badge { border-radius: 1rem; font-weight: 500; }

.list-group { --bs-list-group-active-bg: var(--csh-brown); --bs-list-group-active-border-color: var(--csh-brown); }
.pagination { --bs-pagination-active-bg: var(--csh-brown); --bs-pagination-active-border-color: var(--csh-brown); }
.nav-pills { --bs-nav-pills-link-active-bg: var(--csh-brown); }
.form-check-input:checked { background-color: var(--csh-brown); border-color: var(--csh-brown); }
.table { --bs-table-bg: transparent; --bs-table-hover-bg: rgba(162,101,16,.12); }
::selection { background: var(--csh-brown); color: #fff; }

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color);
  border-color: var(--csh-brown);
}

.content {
    padding-top: 1.1rem;
    padding-bottom: 3rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid rgb(47,182,81);
}

.invalid {
    outline: 1px solid rgb(255,114,112);
}

.validation-message {
    color: rgb(255,114,112);
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "Une erreur s’est produite."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: transparent;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    color: var(--bs-secondary-color);
}

/* CsHotline */
.session-row { cursor: pointer; }
.frame-thumb { width: 100%; aspect-ratio: 16 / 10; object-fit: contain; background: var(--csh-surface-2); border-radius: .5rem; }
.tip-card { border-left-width: .3rem !important; }
.event-data { max-width: 40rem; white-space: pre-wrap; word-break: break-word; font-size: .85em; }
.live-dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; background: rgb(215,42,40); animation: live-pulse 1.4s infinite; }
/* État du poste TeamViewer du contact, dans le bouton du panneau de l'appel. */
.tv-state { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; margin-right: .25rem; vertical-align: middle; border: 1px solid #fff; }
.tv-state.online { background: #2fb344; }
.tv-state.offline { background: #adb5bd; }
@keyframes live-pulse { 50% { opacity: .3; } }
.text-pre-wrap { white-space: pre-wrap; }

/* Panneau de l'appel en cours */
.live-panel { position: fixed; top: 0; right: 0; bottom: 0; width: 24rem; z-index: 20; display: flex; flex-direction: column;
    padding: 1rem; background: var(--csh-surface); border-left: 2px solid var(--csh-brown); box-shadow: var(--csh-shadow); }
.live-panel.collapsed { width: auto; bottom: auto; border-bottom: 2px solid var(--csh-brown); border-bottom-left-radius: .5rem; }
.live-panel-header { margin-bottom: .75rem; }
.live-transcript { flex: 1; overflow-y: auto; display: flex; flex-direction: column-reverse; }
.transcript-line { padding: .35rem .5rem; margin-bottom: .35rem; border-radius: .6rem; background: var(--csh-surface-2); }
.transcript-line.client { background: var(--csh-client-bg); }
.transcript-line .speaker { font-weight: 600; color: var(--csh-link); margin-right: .35rem; }
.live-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.live-side { flex-shrink: 0; max-height: 55%; overflow-y: auto; }
.live-advice { padding: .6rem; border-radius: .6rem; border: 1px solid var(--csh-brown); }
@media (min-width: 992px) { .page:has(.live-panel:not(.collapsed)) main { margin-right: 24rem; } }
@media (max-width: 991.98px) { .live-panel:not(.collapsed) { width: 100%; top: auto; height: 50vh; border-left: 0; border-top: 2px solid var(--csh-brown); } }

/* Volet latéral des messages et traces du client (par-dessus le panneau d'appel) */
.side-drawer-backdrop { position: fixed; inset: 0; z-index: 1040; background: rgba(0,0,0,.35); }
.side-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(64rem, 100vw); z-index: 1045; display: flex; flex-direction: column;
    background: var(--csh-surface); border-left: 2px solid var(--csh-brown); box-shadow: var(--csh-shadow-lg); animation: side-drawer-in .2s ease-out; }
.side-drawer-header { padding: 1rem 1rem 0; }
.side-drawer-body { flex: 1; min-height: 0; overflow-y: auto; padding: 1rem; }
@keyframes side-drawer-in { from { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .side-drawer { animation: none; } }

/* Logo selon le thème */
.logo-on-dark { display: none !important; }
[data-bs-theme=dark] .logo-on-light { display: none !important; }
[data-bs-theme=dark] .logo-on-dark { display: block !important; }

/* Type de session dans la liste : W = appel Wazo, T = TeamViewer. */
.kind-wazo { background-color: #6c3fc5; color: #fff; }
.kind-teamviewer { background-color: #0e8ee9; color: #fff; }

/* Liste des sessions en cartes */
.session-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1rem; }
.session-card {
    display: flex; flex-direction: column; padding: 1rem 1.1rem; cursor: pointer;
    background: var(--csh-surface); border: 1px solid var(--csh-line); border-radius: var(--csh-radius); box-shadow: var(--csh-shadow);
    transition: transform .1s ease, box-shadow .1s ease;
}
.session-card:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(80,50,10,.08), 0 8px 22px rgba(80,50,10,.1); }
.session-card-title { font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: var(--csh-title); }

/* ---------- Finitions : surfaces, ombres et espacements communs à toutes les pages ---------- */
h1 { font-size: 1.65rem; letter-spacing: -.01em; margin-bottom: 1.4rem; }
h2, .h4, .h5 { letter-spacing: -.01em; font-weight: 650; }
h2.h4, h2.h5 { margin-bottom: .9rem; }
.content > h1:first-child, .content > div:first-child > h1 { margin-top: .25rem; }

a, .btn, .form-control, .form-select, .nav-link, .card, .badge, .transcript-line {
    transition: color .15s var(--csh-ease), background-color .15s var(--csh-ease), border-color .15s var(--csh-ease),
        box-shadow .2s var(--csh-ease), transform .2s var(--csh-ease);
}

/* Cartes : plus d'air, bordure discrète, ombre en couches. */
.card { --bs-card-bg: var(--csh-card); border-color: var(--csh-line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    --bs-card-spacer-y: 1.25rem; --bs-card-spacer-x: 1.5rem; --bs-card-cap-padding-y: .9rem;
    --bs-card-cap-padding-x: 1.5rem; }
.card-header { border-bottom-color: var(--csh-line); font-weight: 600; }
.card .card-body > h2:first-child, .card .card-body > .h5:first-child { margin-bottom: 1rem; }
.card.mb-2 { box-shadow: var(--csh-shadow-sm); }
.card.mb-2:hover { box-shadow: var(--csh-shadow); }

/* Tableaux : en-tête teinté, lignes aérées, séparateurs fins. */
.table { --bs-table-border-color: var(--csh-line); margin-bottom: 1.5rem; }
.table > :not(caption) > * > * { padding: .8rem 1rem; border-bottom-color: var(--csh-line); }
.table-sm > :not(caption) > * > * { padding: .5rem .75rem; }
.table > thead th { background: transparent; border-bottom: 1px solid var(--csh-line); white-space: nowrap; }
.table > tbody > tr:last-child > * { border-bottom: 0; }
.content > .table, .content .table:not(.table-sm) { border: 1px solid var(--csh-line); border-collapse: separate; border-spacing: 0; }
.card .table { box-shadow: none !important; background: transparent !important; border: 0 !important; }
.session-row:hover > * { background: rgba(162,101,16,.06); }

/* Champs et boutons. */
.form-control, .form-select { border-radius: var(--csh-radius-sm); border-color: var(--csh-line); padding: .5rem .8rem; }
.form-control-sm, .form-select-sm { padding: .3rem .6rem; border-radius: .5rem; }
.form-control:hover, .form-select:hover { border-color: var(--csh-very-light-brown); }
.form-label { font-weight: 500; font-size: .875rem; margin-bottom: .35rem; color: var(--bs-secondary-color); }
.form-text { font-size: .8rem; }
.btn { border-radius: var(--csh-radius-sm); font-weight: 500; padding: .45rem 1rem; }
.btn-sm { padding: .25rem .65rem; border-radius: .5rem; }
.btn-link { padding-left: 0; padding-right: 0; }
.btn-primary { background-image: linear-gradient(135deg, var(--csh-brown), var(--csh-brown-hi)); border-color: transparent; box-shadow: 0 6px 18px var(--csh-glow); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 22px var(--csh-glow); }
.btn-primary:active { transform: none; }
[data-bs-theme=light] .btn-outline-primary { --bs-btn-color: var(--csh-dark-brown); --bs-btn-hover-color: #fff; }
.btn-outline-secondary { --bs-btn-border-color: var(--csh-line); --bs-btn-color: var(--bs-body-color);
    --bs-btn-hover-bg: var(--csh-surface-2); --bs-btn-hover-border-color: var(--csh-very-light-brown); --bs-btn-hover-color: var(--csh-link);
    --bs-btn-active-bg: var(--csh-surface-2); --bs-btn-active-color: var(--csh-link); --bs-btn-active-border-color: var(--csh-brown); }
[data-bs-theme=light] .btn-outline-secondary { background: var(--csh-surface); }
.btn-group > .btn { box-shadow: none; transform: none !important; }
.btn-group { border: 1px solid var(--csh-line); border-radius: 12px; overflow: hidden; }
.btn-group > .btn { border: 0; border-radius: 0 !important; background-color: transparent; color: var(--csh-muted); }
.btn-group > .btn.btn-primary, .btn-group > .btn.active { background: var(--csh-brown); color: #fff; }

/* Alertes, badges, listes, pagination. */
.alert { border-radius: var(--csh-radius-sm); border: 0; box-shadow: var(--csh-shadow-sm); padding: .85rem 1.1rem; }
.badge { padding: .4em .7em; letter-spacing: .01em; }
.list-group { --bs-list-group-border-color: var(--csh-line); --bs-list-group-bg: var(--csh-surface);
    border-radius: var(--csh-radius-sm); box-shadow: var(--csh-shadow-sm); }
.list-group-item { padding: .7rem 1rem; }
.pagination { --bs-pagination-border-radius: .55rem; --bs-pagination-bg: var(--csh-surface); --bs-pagination-border-color: var(--csh-line);
    --bs-pagination-color: var(--csh-link); gap: .25rem; }
.pagination .page-link { border-radius: .55rem !important; }
dl.row dt { font-weight: 500; color: var(--bs-secondary-color); }
dl.row dd { margin-bottom: .45rem; }
hr { border-color: var(--csh-line); opacity: 1; }

/* En-tête collant translucide. */
.top-row { backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); }

/* Panneau de l'appel en cours : surface flottante, bulles adoucies. */
.live-panel { border-left: 0; box-shadow: var(--csh-shadow-lg); padding: 1.1rem 1.1rem 1rem; }
.live-panel::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: linear-gradient(var(--csh-light-brown), var(--csh-brown)); }
.live-panel.collapsed { border-bottom: 0; border-bottom-left-radius: var(--csh-radius); }
.live-panel.collapsed::before { inset: auto 0 0 0; width: auto; height: 3px; }
.live-panel-header { padding-bottom: .65rem; border-bottom: 1px solid var(--csh-line); }
.live-advice { border: 0; background: var(--csh-surface-2); box-shadow: inset 3px 0 0 var(--csh-brown); padding: .75rem .9rem; border-radius: var(--csh-radius-sm); }
.transcript-line { padding: .5rem .7rem; margin-bottom: .45rem; border-radius: .8rem; box-shadow: var(--csh-shadow-sm); }
.transcript-line.client { border-bottom-left-radius: .25rem; }
.transcript-line:not(.client) { border-bottom-right-radius: .25rem; margin-left: 1.25rem; }
.transcript-line.client { margin-right: 1.25rem; }
@media (max-width: 991.98px) { .live-panel:not(.collapsed) { border-top: 0; border-radius: var(--csh-radius) var(--csh-radius) 0 0; }
    .live-panel:not(.collapsed)::before { inset: 0 0 auto 0; width: auto; height: 3px; } }

/* Cartes de session. */
.session-cards { gap: 1.1rem; }
.session-card { padding: 1.1rem 1.25rem; background: var(--csh-card); border-color: var(--csh-line); backdrop-filter: blur(14px); }
.session-card:hover { transform: translateY(-2px); border-color: var(--csh-brown-hi); box-shadow: var(--csh-shadow-lg); }

/* Vignettes d'images. */
.frame-thumb { border-radius: var(--csh-radius-sm); box-shadow: var(--csh-shadow-sm); }
.frame-thumb:hover { box-shadow: var(--csh-shadow); }

/* Barre de défilement discrète. */
* { scrollbar-width: thin; scrollbar-color: var(--csh-line) transparent; }

/* Pages de compte (connexion…) : carte centrée. */
.auth-card { max-width: 26rem; margin: 3rem auto; box-shadow: var(--csh-shadow-lg); }
.auth-card .card-body { padding: 2.25rem 2rem 2rem; }
.auth-divider { display: flex; align-items: center; gap: .75rem; margin: 1.25rem 0; color: var(--bs-secondary-color); font-size: .8rem;
    text-transform: uppercase; letter-spacing: .1em; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--csh-line); }
.form-floating > .form-control { height: 3.4rem; }

/* Logo seul en coin, avant la connexion. */
.corner-logo { position: fixed; top: 1.25rem; left: 1.5rem; z-index: 10; }
.corner-logo .brand-logo { height: 2.5rem; width: auto; }

/* Puce d'étiquette : la couleur se choisit par un petit rond, sans texte qui dépasse. */
.tag-color { appearance: none; -webkit-appearance: none; width: .9rem; height: .9rem; padding: 0; border: 2px solid currentColor;
    border-radius: 50%; background: transparent; color: inherit; font-size: 0; cursor: pointer; opacity: .7; flex-shrink: 0; }
.tag-color:hover { opacity: 1; }
.tag-color option { font-size: .9rem; color: var(--bs-body-color); background: var(--bs-body-bg); }
.tag-remove { width: .55rem; height: .55rem; padding: 0; background-size: .55rem; opacity: .6; }
.text-bg-danger .tag-remove, .text-bg-dark .tag-remove, .text-bg-primary .tag-remove, .text-bg-secondary .tag-remove,
.text-bg-success .tag-remove { filter: invert(1) grayscale(100%) brightness(200%); }
/* En thème sombre, la puce « dark » se confondait avec le fond. */
[data-bs-theme=dark] .text-bg-dark { background-color: #4b5563 !important; color: #fff !important; }

/* ---------- Éléments CsBackup réutilisables ---------- */
/* .muted, .glass, .icon et .dot viennent de CsLib.Web (cs-tokens.css). */
.badge { border-radius: 999px; font-weight: 600; }