/* SRONOU — composants.
   Habille les composants Bootstrap 5.3 avec les tokens de sronou-tokens.css, SANS changer le balisage
   existant (.btn, .card, .table, .badge, .alert, .nav-tabs, .pagination, .form-*, .dropdown, .modal…),
   puis ajoute les composants propres à SRONOU (.sr-*).

   Règles du système (détail : Docs/Design_System_SRONOU.md) :
   - aucune valeur de couleur en dur ici : uniquement des tokens --sr-* ;
   - profondeur par bordure fine, ombre réservée aux surcouches (menus, modales) ;
   - un seul bouton .btn-primary par vue ;
   - jamais la couleur seule pour porter un statut : pastille + libellé (+ icône). */

/* ---------- Base ---------- */

body {
    font-family: var(--sr-font-sans);
    font-size: var(--sr-text-body);
    line-height: var(--sr-leading-normal);
    color: var(--sr-fg);
    background-color: var(--sr-canvas);
    -webkit-font-smoothing: antialiased;
    font-variant-ligatures: none;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 600;
    line-height: var(--sr-leading-tight);
    letter-spacing: -0.01em;
}

h1, .h1 { font-size: var(--sr-text-h1); }
h2, .h2 { font-size: var(--sr-text-h2); }
h3, .h3 { font-size: var(--sr-text-h3); }
h4, .h4, h5, .h5 { font-size: var(--sr-text-title); }

.display-4, .display-5 { font-weight: 600; letter-spacing: -0.02em; }

a { color: var(--sr-link); text-underline-offset: 0.18em; }
a:hover { color: var(--sr-link-hover); }

.text-muted, .text-body-secondary { color: var(--sr-fg-muted) !important; }
small, .small { font-size: var(--sr-text-sm); }

::selection { background: var(--sr-highlighter); color: var(--sr-ink-900); }

/* Focus : anneau visible partout, jamais supprimé */
:focus-visible {
    outline: 2px solid var(--sr-focus-outline);
    outline-offset: 2px;
}

/* ---------- Boutons ---------- */

.btn {
    --bs-btn-font-weight: 500;
    --bs-btn-border-radius: var(--sr-radius-md);
    --bs-btn-padding-x: 1rem;
    --bs-btn-padding-y: 0.5rem;
    --bs-btn-focus-box-shadow: var(--sr-shadow-focus);
    min-height: var(--sr-control-h);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    line-height: 1.25;
    background-image: none;
    transition: background-color var(--sr-duration-base) var(--sr-ease),
                border-color var(--sr-duration-base) var(--sr-ease),
                color var(--sr-duration-base) var(--sr-ease);
}

.btn-sm { min-height: var(--sr-control-h-sm); --bs-btn-padding-x: 0.75rem; --bs-btn-padding-y: 0.25rem; --bs-btn-font-size: var(--sr-text-sm); }
.btn-lg { min-height: var(--sr-control-h-lg); --bs-btn-padding-x: 1.5rem; --bs-btn-font-size: 1.0625rem; }

/* Pas de dégradé ni d'ombre : un bouton plein, un survol plus foncé. */
.btn-primary {
    --bs-btn-color: var(--sr-on-accent);
    --bs-btn-bg: var(--sr-accent);
    --bs-btn-border-color: var(--sr-accent);
    --bs-btn-hover-color: var(--sr-on-accent);
    --bs-btn-hover-bg: var(--sr-accent-strong);
    --bs-btn-hover-border-color: var(--sr-accent-strong);
    --bs-btn-active-color: var(--sr-on-accent);
    --bs-btn-active-bg: var(--sr-accent-strong);
    --bs-btn-active-border-color: var(--sr-accent-strong);
    --bs-btn-disabled-color: var(--sr-on-accent);
    --bs-btn-disabled-bg: var(--sr-accent);
    --bs-btn-disabled-border-color: var(--sr-accent);
}

.btn-outline-primary {
    --bs-btn-color: var(--sr-accent-fg);
    --bs-btn-border-color: var(--sr-accent);
    --bs-btn-hover-color: var(--sr-on-accent);
    --bs-btn-hover-bg: var(--sr-accent);
    --bs-btn-hover-border-color: var(--sr-accent);
    --bs-btn-active-color: var(--sr-on-accent);
    --bs-btn-active-bg: var(--sr-accent-strong);
    --bs-btn-active-border-color: var(--sr-accent-strong);
    --bs-btn-disabled-color: var(--sr-accent-fg);
    --bs-btn-disabled-border-color: var(--sr-accent);
}

/* Secondaire : contour neutre, pour les actions courantes (la majorité des .btn-outline-secondary existants) */
.btn-secondary,
.btn-outline-secondary {
    --bs-btn-color: var(--sr-fg);
    --bs-btn-bg: var(--sr-panel);
    --bs-btn-border-color: var(--sr-line-strong);
    --bs-btn-hover-color: var(--sr-fg);
    --bs-btn-hover-bg: var(--sr-hover);
    --bs-btn-hover-border-color: var(--sr-line-field);
    --bs-btn-active-color: var(--sr-fg);
    --bs-btn-active-bg: var(--sr-selected);
    --bs-btn-active-border-color: var(--sr-line-field);
    --bs-btn-disabled-color: var(--sr-fg-inactive);
    --bs-btn-disabled-bg: var(--sr-panel);
    --bs-btn-disabled-border-color: var(--sr-line);
}

.btn-success {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--sr-success-solid);
    --bs-btn-border-color: var(--sr-success-solid);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #0b6324;
    --bs-btn-hover-border-color: #0b6324;
    --bs-btn-active-bg: #0b6324;
    --bs-btn-active-border-color: #0b6324;
}

.btn-outline-success {
    --bs-btn-color: var(--sr-success);
    --bs-btn-border-color: var(--sr-success);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--sr-success-solid);
    --bs-btn-hover-border-color: var(--sr-success-solid);
    --bs-btn-active-bg: var(--sr-success-solid);
    --bs-btn-active-border-color: var(--sr-success-solid);
}

.btn-danger {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--sr-danger-solid);
    --bs-btn-border-color: var(--sr-danger-solid);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #9f1d14;
    --bs-btn-hover-border-color: #9f1d14;
    --bs-btn-active-bg: #9f1d14;
    --bs-btn-active-border-color: #9f1d14;
}

.btn-outline-danger {
    --bs-btn-color: var(--sr-danger);
    --bs-btn-border-color: var(--sr-danger);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--sr-danger-solid);
    --bs-btn-hover-border-color: var(--sr-danger-solid);
    --bs-btn-active-bg: var(--sr-danger-solid);
    --bs-btn-active-border-color: var(--sr-danger-solid);
}

.btn-link {
    --bs-btn-color: var(--sr-link);
    --bs-btn-hover-color: var(--sr-link-hover);
    min-height: 0;
}

/* Action de barre d'outils : sans contour, teinte au survol */
.btn-ghost {
    --bs-btn-color: var(--sr-fg-secondary);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--sr-fg);
    --bs-btn-hover-bg: var(--sr-hover);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-bg: var(--sr-selected);
    --bs-btn-active-border-color: transparent;
}

/* ---------- Formulaires ---------- */

.form-label {
    font-size: var(--sr-text-sm);
    font-weight: 500;
    color: var(--sr-fg);
    margin-bottom: 0.375rem;
}

.form-control,
.form-select {
    min-height: var(--sr-control-h);
    color: var(--sr-fg);
    background-color: var(--sr-field);
    border: 1px solid var(--sr-line-field);
    border-radius: var(--sr-radius-md);
    transition: border-color var(--sr-duration-base) var(--sr-ease), box-shadow var(--sr-duration-base) var(--sr-ease);
}

.form-control::placeholder { color: var(--sr-fg-muted); opacity: 1; }
.form-control-sm, .form-select-sm { min-height: var(--sr-control-h-sm); }
textarea.form-control { min-height: 6rem; }

.form-control:hover:not(:disabled):not([readonly]),
.form-select:hover:not(:disabled) { border-color: var(--sr-ink-700); }

.form-control:focus,
.form-select:focus {
    color: var(--sr-fg);
    background-color: var(--sr-field);
    border-color: var(--sr-accent);
    box-shadow: var(--sr-shadow-focus);
    outline: none;
}

.form-control:disabled,
.form-select:disabled { background-color: var(--sr-sunken); color: var(--sr-fg-inactive); }

.form-text { color: var(--sr-fg-muted); font-size: var(--sr-text-xs); }

.form-check-input { border-color: var(--sr-line-field); }
.form-check-input:checked { background-color: var(--sr-accent); border-color: var(--sr-accent); }
.form-check-input:focus { border-color: var(--sr-accent); box-shadow: var(--sr-shadow-focus); }

.is-invalid, .form-control.input-validation-error { border-color: var(--sr-danger) !important; }
.field-validation-error, .invalid-feedback, .text-danger { color: var(--sr-danger) !important; font-size: var(--sr-text-sm); }

/* ---------- Cartes : bordure fine, en-tête neutre ---------- */

.card {
    --bs-card-border-color: var(--sr-line);
    --bs-card-border-radius: var(--sr-radius-lg);
    --bs-card-inner-border-radius: calc(var(--sr-radius-lg) - 1px);
    --bs-card-bg: var(--sr-panel);
    --bs-card-cap-bg: var(--sr-panel);
    --bs-card-cap-padding-y: 0.875rem;
    --bs-card-spacer-x: 1.25rem;
    border: 1px solid var(--sr-line);
    border-radius: var(--sr-radius-lg);
    box-shadow: none;
}

.card-header {
    background: var(--sr-panel);
    color: var(--sr-fg);
    font-weight: 600;
    font-size: var(--sr-text-title);
    border: 0;
    border-bottom: 1px solid var(--sr-line);
    border-radius: var(--sr-radius-lg) var(--sr-radius-lg) 0 0 !important;
}

.card-footer { background: var(--sr-panel); border-top: 1px solid var(--sr-line); }
.card-title { font-size: var(--sr-text-title); font-weight: 600; }

.sr-card--attention { border-inline-start: 4px solid var(--sr-danger-fill); }

/* ---------- Tableaux : en-tête creux, survol de ligne ---------- */

.table {
    --bs-table-color: var(--sr-fg);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--sr-line);
    --bs-table-striped-bg: var(--sr-hover);
    --bs-table-striped-color: var(--sr-fg);
    --bs-table-hover-bg: var(--sr-selected);
    --bs-table-hover-color: var(--sr-fg);
    font-size: var(--sr-text-sm);
    font-variant-numeric: tabular-nums;
    vertical-align: middle;
}

.table > :not(caption) > * > * { padding: 0.75rem 1rem; }

.table > thead {
    --bs-table-bg: var(--sr-sunken);
    --bs-table-color: var(--sr-fg-secondary);
    --bs-table-border-color: var(--sr-line-strong);
}

.table > thead > tr > th {
    color: var(--sr-fg-secondary);
    font-size: var(--sr-text-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--sr-line-strong);
    white-space: nowrap;
}

/* Les anciens en-têtes .table-light / .table-dark prennent le même fond creux */
.table > thead.table-light,
.table > thead.table-dark,
.table > .table-light,
.table > .table-dark {
    --bs-table-bg: var(--sr-sunken);
    --bs-table-color: var(--sr-fg-secondary);
}

.table-responsive,
.card > .table,
.card > .table-responsive { border-radius: var(--sr-radius-lg); }

/* ---------- Badges : lavis + texte lisible (AA), jamais de blanc sur couleur vive ---------- */

.badge {
    --sr-badge-fg: var(--sr-neutral);
    --sr-badge-bg: var(--sr-neutral-subtle);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.28em 0.65em;
    font-size: var(--sr-text-xs);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.01em;
    border-radius: var(--sr-radius-sm);
    color: var(--sr-badge-fg) !important;
    background-color: var(--sr-badge-bg) !important;
}

.badge.bg-primary   { --sr-badge-fg: var(--sr-accent-fg); --sr-badge-bg: var(--sr-accent-wash); }
.badge.bg-success   { --sr-badge-fg: var(--sr-success);   --sr-badge-bg: var(--sr-success-subtle); }
.badge.bg-warning   { --sr-badge-fg: var(--sr-warning);   --sr-badge-bg: var(--sr-warning-subtle); }
.badge.bg-danger    { --sr-badge-fg: var(--sr-danger);    --sr-badge-bg: var(--sr-danger-subtle); }
.badge.bg-info      { --sr-badge-fg: var(--sr-info);      --sr-badge-bg: var(--sr-info-subtle); }
.badge.bg-secondary,
.badge.bg-light,
.badge.bg-dark      { --sr-badge-fg: var(--sr-neutral);   --sr-badge-bg: var(--sr-neutral-subtle); }

/* Puce de métadonnée (étiquette neutre avec pastille de couleur optionnelle) */
.sr-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2em 0.6em;
    font-size: var(--sr-text-xs);
    font-weight: 500;
    color: var(--sr-fg-secondary);
    background: var(--sr-neutral-subtle);
    border-radius: var(--sr-radius-sm);
}

.sr-tag::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--sr-tag-dot, transparent);
}

/* ---------- Alertes / bannières ---------- */

.alert {
    --sr-alert-fg: var(--sr-info);
    --sr-alert-bg: var(--sr-info-subtle);
    color: var(--sr-fg);
    background: var(--sr-alert-bg);
    border: 1px solid transparent;
    border-inline-start: 4px solid var(--sr-alert-fg);
    border-radius: var(--sr-radius-md);
}

.alert-success { --sr-alert-fg: var(--sr-success-fill); --sr-alert-bg: var(--sr-success-subtle); }
.alert-warning { --sr-alert-fg: var(--sr-warning-fill); --sr-alert-bg: var(--sr-warning-subtle); }
.alert-danger  { --sr-alert-fg: var(--sr-danger-fill);  --sr-alert-bg: var(--sr-danger-subtle); }
.alert-info    { --sr-alert-fg: var(--sr-info-fill);    --sr-alert-bg: var(--sr-info-subtle); }
.alert-secondary { --sr-alert-fg: var(--sr-ink-400);    --sr-alert-bg: var(--sr-neutral-subtle); }
.alert a { font-weight: 500; }

/* ---------- Navigation : onglets, pills, pagination ---------- */

.nav-tabs {
    --bs-nav-tabs-border-color: var(--sr-line);
    --bs-nav-tabs-link-active-bg: transparent;
    --bs-nav-tabs-link-active-color: var(--sr-accent-fg);
    --bs-nav-tabs-link-active-border-color: transparent transparent var(--sr-accent);
    --bs-nav-tabs-link-hover-border-color: transparent transparent var(--sr-line-strong);
    border-bottom: 1px solid var(--sr-line);
}

.nav-tabs .nav-link { color: var(--sr-fg-secondary); font-weight: 500; border-width: 0 0 2px; border-radius: 0; background: none; }
.nav-tabs .nav-link:hover { color: var(--sr-fg); }
.nav-tabs .nav-link.active { color: var(--sr-accent-fg); border-bottom-color: var(--sr-accent); background: none; }

.nav-pills .nav-link { color: var(--sr-fg-secondary); border-radius: var(--sr-radius-md); font-weight: 500; }
.nav-pills .nav-link.active { color: var(--sr-on-accent); background-color: var(--sr-accent); }

.pagination {
    --bs-pagination-color: var(--sr-fg);
    --bs-pagination-bg: var(--sr-panel);
    --bs-pagination-border-color: var(--sr-line-strong);
    --bs-pagination-hover-color: var(--sr-fg);
    --bs-pagination-hover-bg: var(--sr-hover);
    --bs-pagination-hover-border-color: var(--sr-line-field);
    --bs-pagination-focus-color: var(--sr-fg);
    --bs-pagination-focus-bg: var(--sr-hover);
    --bs-pagination-focus-box-shadow: var(--sr-shadow-focus);
    --bs-pagination-active-color: var(--sr-on-accent);
    --bs-pagination-active-bg: var(--sr-accent);
    --bs-pagination-active-border-color: var(--sr-accent);
    --bs-pagination-disabled-color: var(--sr-fg-inactive);
    --bs-pagination-disabled-bg: var(--sr-panel);
    --bs-pagination-disabled-border-color: var(--sr-line);
    --bs-pagination-border-radius: var(--sr-radius-md);
    font-size: var(--sr-text-sm);
}

.page-link { font-variant-numeric: tabular-nums; }

/* ---------- Listes, accordéons, menus, modales, barres de progression ---------- */

.list-group {
    --bs-list-group-bg: var(--sr-panel);
    --bs-list-group-border-color: var(--sr-line);
    --bs-list-group-color: var(--sr-fg);
    --bs-list-group-action-hover-bg: var(--sr-hover);
    --bs-list-group-action-hover-color: var(--sr-fg);
    --bs-list-group-active-bg: var(--sr-accent);
    --bs-list-group-active-border-color: var(--sr-accent);
    --bs-list-group-active-color: var(--sr-on-accent);
    --bs-list-group-border-radius: var(--sr-radius-lg);
}

.accordion {
    --bs-accordion-bg: var(--sr-panel);
    --bs-accordion-color: var(--sr-fg);
    --bs-accordion-border-color: var(--sr-line);
    --bs-accordion-border-radius: var(--sr-radius-lg);
    --bs-accordion-inner-border-radius: calc(var(--sr-radius-lg) - 1px);
    --bs-accordion-btn-color: var(--sr-fg);
    --bs-accordion-btn-bg: var(--sr-panel);
    --bs-accordion-active-color: var(--sr-accent-fg);
    --bs-accordion-active-bg: var(--sr-accent-subtle);
    --bs-accordion-btn-focus-box-shadow: var(--sr-shadow-focus);
}

.accordion-button { font-weight: 500; }

.dropdown-menu {
    --bs-dropdown-bg: var(--sr-raised);
    --bs-dropdown-color: var(--sr-fg);
    --bs-dropdown-border-color: var(--sr-line);
    --bs-dropdown-border-radius: var(--sr-radius-md);
    --bs-dropdown-link-color: var(--sr-fg);
    --bs-dropdown-link-hover-bg: var(--sr-hover);
    --bs-dropdown-link-hover-color: var(--sr-fg);
    --bs-dropdown-link-active-bg: var(--sr-accent);
    --bs-dropdown-link-active-color: var(--sr-on-accent);
    box-shadow: var(--sr-shadow-raised);
}

.modal-content {
    background: var(--sr-raised);
    color: var(--sr-fg);
    border: 1px solid var(--sr-line);
    border-radius: var(--sr-radius-xl);
    box-shadow: var(--sr-shadow-raised);
}

.modal-header, .modal-footer { border-color: var(--sr-line); }
.modal-backdrop { --bs-backdrop-bg: var(--sr-ink-900); }

.progress {
    --bs-progress-bg: var(--sr-sunken);
    --bs-progress-bar-bg: var(--sr-accent);
    --bs-progress-border-radius: var(--sr-radius-pill);
    --bs-progress-height: 0.5rem;
}

/* ---------- Composants SRONOU ---------- */

/* En-tête de page : titre, description, actions à droite */
.sr-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--sr-space-3) var(--sr-space-5);
    margin-bottom: var(--sr-space-5);
}

.sr-page-header h1,
.sr-page-header .sr-page-title { margin: 0; font-size: var(--sr-text-h2); }
.sr-page-header p { margin: 0.25rem 0 0; color: var(--sr-fg-muted); }
.sr-page-actions { display: flex; flex-wrap: wrap; gap: var(--sr-space-2); }

/* Surtitre en capitales */
.sr-eyebrow {
    font-size: var(--sr-text-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sr-fg-highlight);
}

/* Carte d'indicateur (KPI) : fond de panneau, pastille d'icône teintée, grand chiffre */
.sr-kpi,
.stat-card {
    --sr-kpi-tint: var(--sr-accent-wash);
    --sr-kpi-ink: var(--sr-accent-fg);
    background: var(--sr-panel) !important;
    color: var(--sr-fg) !important;
    border: 1px solid var(--sr-line);
    border-radius: var(--sr-radius-lg);
    box-shadow: none;
    margin-bottom: var(--sr-space-4);
    overflow: hidden;
}

.stat-card.bg-success, .sr-kpi--success { --sr-kpi-tint: var(--sr-success-subtle); --sr-kpi-ink: var(--sr-success); }
.stat-card.bg-warning, .sr-kpi--warning { --sr-kpi-tint: var(--sr-warning-subtle); --sr-kpi-ink: var(--sr-warning); }
.stat-card.bg-danger,  .sr-kpi--danger  { --sr-kpi-tint: var(--sr-danger-subtle);  --sr-kpi-ink: var(--sr-danger); }
.stat-card.bg-info,    .sr-kpi--info    { --sr-kpi-tint: var(--sr-info-subtle);    --sr-kpi-ink: var(--sr-info); }
.stat-card.bg-secondary, .sr-kpi--neutral { --sr-kpi-tint: var(--sr-neutral-subtle); --sr-kpi-ink: var(--sr-neutral); }

.stat-card-body,
.sr-kpi-body { display: flex; align-items: center; gap: var(--sr-space-4); padding: var(--sr-space-4) var(--sr-space-5); }

.stat-icon,
.sr-kpi-icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    font-size: 1.25rem;
    opacity: 1;
    color: var(--sr-kpi-ink);
    background: var(--sr-kpi-tint);
    border-radius: var(--sr-radius-md);
}

.stat-number,
.sr-kpi-value {
    font-size: var(--sr-text-kpi);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.stat-label,
.sr-kpi-label { font-size: var(--sr-text-sm); color: var(--sr-fg-secondary); opacity: 1; }
.stat-meta { font-size: var(--sr-text-xs); color: var(--sr-fg-muted); opacity: 1; }

/* Statut : pastille + libellé (jamais la couleur seule) */
.sr-status {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: var(--sr-text-sm);
    font-weight: 500;
    color: var(--sr-fg);
}

.sr-status::before {
    content: "";
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
    background: var(--sr-status-dot, var(--sr-ink-400));
}

.sr-status--success { --sr-status-dot: var(--sr-success-fill); }
.sr-status--warning { --sr-status-dot: var(--sr-warning-fill); }
.sr-status--danger  { --sr-status-dot: var(--sr-danger-fill); }
.sr-status--info    { --sr-status-dot: var(--sr-info-fill); }
.sr-status--brand   { --sr-status-dot: var(--sr-accent); }

/* État vide : explique, puis propose l'action suivante */
.sr-empty {
    display: grid;
    justify-items: center;
    gap: var(--sr-space-2);
    padding: var(--sr-space-7) var(--sr-space-5);
    text-align: center;
    color: var(--sr-fg-secondary);
}

.sr-empty-icon {
    display: grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    font-size: 1.5rem;
    color: var(--sr-accent-fg);
    background: var(--sr-accent-wash);
    border-radius: var(--sr-radius-lg);
}

.sr-empty h3 { margin: var(--sr-space-2) 0 0; font-size: var(--sr-text-title); }
.sr-empty p { max-width: 34rem; margin: 0 0 var(--sr-space-2); }

/* Ligne de réglage : libellé à gauche, contrôle à droite, séparées par des filets */
.sr-setting {
    display: grid;
    grid-template-columns: minmax(8rem, 12rem) 1fr;
    gap: var(--sr-space-2) var(--sr-space-5);
    padding: var(--sr-space-4) 0;
    border-bottom: 1px solid var(--sr-line);
}

.sr-setting:last-child { border-bottom: 0; }
.sr-setting-label { font-weight: 500; }
.sr-setting-hint { display: block; margin-top: 0.125rem; font-size: var(--sr-text-xs); font-weight: 400; color: var(--sr-fg-muted); }

/* Chargement */
.sr-skeleton {
    display: block;
    min-height: 1em;
    background: linear-gradient(90deg, var(--sr-sunken) 25%, var(--sr-hover) 50%, var(--sr-sunken) 75%);
    background-size: 200% 100%;
    border-radius: var(--sr-radius-sm);
    animation: sr-shimmer 1.4s var(--sr-ease) infinite;
}

@keyframes sr-shimmer { to { background-position: -200% 0; } }

@media (prefers-reduced-motion: reduce) {
    .sr-skeleton { animation: none; }
}

/* Surbrillance « marqueur » (jalons, mots clés) : le soleil du logo */
.sr-marker { background: linear-gradient(transparent 58%, var(--sr-highlighter) 58%); padding: 0 0.15em; }

/* Section de page : alterne les surfaces (light / gray / dark) pour rythmer une page longue */
.sr-section { padding: var(--sr-space-7) var(--sr-space-5); background: var(--sr-canvas); color: var(--sr-fg); }
.sr-section[data-surface="light"] { background: var(--sr-panel); }

/* =====================================================================================
   Comportements repris de Quorly : actions de ligne au survol, toasts, confirmation,
   mouvement. Toujours sur tokens ; tout le mouvement s'arrête sous prefers-reduced-motion.
   ===================================================================================== */

/* ---------- Tableaux : actions de ligne révélées au survol ----------
   La dernière cellule qui contient des boutons (ou une cellule .sr-row-actions) est masquée jusqu'au
   survol ou au focus clavier de la ligne. Toujours visible sur écran tactile (pas de survol), tant
   qu'un menu de la ligne est ouvert, et pour les tableaux marqués .sr-actions-visible. */
.table > tbody > tr > td.sr-row-actions,
.table > tbody > tr > td:last-child:has(.btn) {
    text-align: end;
}

.table > tbody > tr > td.sr-row-actions form,
.table > tbody > tr > td:last-child:has(.btn) form { display: inline-block; margin: 0; }

.table > tbody > tr > td:last-child .btn-outline-secondary,
.table > tbody > tr > td.sr-row-actions .btn-outline-secondary {
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-border-color: var(--sr-line-strong);
}

@media (hover: hover) and (pointer: fine) {
    /* Le contenu de la cellule, pas la cellule : son fond de ligne (rayures, survol) reste continu. */
    .table:not(.sr-actions-visible) > tbody > tr > td.sr-row-actions > *,
    .table:not(.sr-actions-visible) > tbody > tr > td:last-child:has(.btn) > * {
        opacity: 0;
        transition: opacity var(--sr-duration-quick) var(--sr-ease);
    }

    .table > tbody > tr:hover > td.sr-row-actions > *,
    .table > tbody > tr:focus-within > td.sr-row-actions > *,
    .table > tbody > tr:hover > td:last-child:has(.btn) > *,
    .table > tbody > tr:focus-within > td:last-child:has(.btn) > *,
    .table > tbody > tr > td:last-child:has(.show) > * {
        opacity: 1;
    }
}

.table > tbody > tr > * { transition: box-shadow var(--sr-duration-micro) var(--sr-ease); }
.table:not(.table-striped) > tbody > tr:hover > * { --bs-table-bg-state: var(--sr-hover); }

/* ---------- Boutons : pression, état « en cours » (anti double-envoi, posé par site.js) ---------- */

.btn { transition-property: background-color, border-color, color, box-shadow, transform; transition-duration: var(--sr-duration-micro); }
.btn:active:not(:disabled) { transform: scale(var(--sr-scale-press)); }

.btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 1rem;
    height: 1rem;
    border: 2px solid var(--sr-spinner, var(--sr-on-accent));
    border-inline-end-color: transparent;
    border-radius: 50%;
    animation: sr-spin 0.7s linear infinite;
}

.btn-outline-secondary.is-loading,
.btn-secondary.is-loading,
.btn-ghost.is-loading,
.btn-outline-primary.is-loading,
.btn-outline-danger.is-loading,
.btn-outline-success.is-loading,
.btn-link.is-loading { --sr-spinner: var(--sr-fg); }
.btn-danger.is-loading, .btn-success.is-loading { --sr-spinner: #fff; }

/* ---------- Menus et modales : entrée douce ---------- */

.dropdown-menu { padding: var(--sr-space-1); }
.dropdown-menu.show { animation: sr-pop-in var(--sr-duration-quick) var(--sr-ease-out); }
.dropdown-item { border-radius: var(--sr-radius-sm); transition: background-color var(--sr-duration-micro) var(--sr-ease); }
.dropdown-header { font-size: var(--sr-text-xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--sr-fg-muted); }
.dropdown-divider { border-color: var(--sr-line); }

.modal.fade .modal-dialog {
    transform: translateY(var(--sr-distance-medium)) scale(var(--sr-scale-enter));
    transition: transform var(--sr-duration-fast) var(--sr-ease-out);
}
.modal.show .modal-dialog { transform: none; }
.modal-backdrop { --bs-backdrop-bg: #020612; --bs-backdrop-opacity: 0.55; }

.collapsing { transition-duration: var(--sr-duration-fast); transition-timing-function: var(--sr-ease-out); }

/* ---------- Toasts (succès, erreurs, avertissements) ----------
   Pile en bas à droite (à gauche en RTL), aria-live. Les messages TempData du serveur y arrivent ;
   le JS peut en ajouter via Sronou.toast(). Succès/info se ferment seuls (5 s, en pause au survol),
   erreurs et avertissements restent jusqu'à fermeture. */
.sr-toasts {
    position: fixed;
    right: var(--sr-space-4);
    bottom: var(--sr-space-4);
    z-index: 1090;
    display: flex;
    flex-direction: column-reverse;
    gap: var(--sr-space-2);
    width: min(24rem, calc(100vw - 2rem));
    pointer-events: none;
}

.sr-toast {
    --sr-toast-ink: var(--sr-info-fill);
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: start;
    gap: var(--sr-space-3);
    padding: var(--sr-space-3) var(--sr-space-3) var(--sr-space-3) var(--sr-space-4);
    color: var(--sr-fg);
    background: var(--sr-raised);
    border: 1px solid var(--sr-line);
    border-radius: var(--sr-radius-lg);
    box-shadow: var(--sr-shadow-raised);
    pointer-events: auto;
    animation: sr-toast-in var(--sr-duration-fast) var(--sr-ease-out) both;
}

.sr-toast.is-leaving { animation: sr-toast-out var(--sr-duration-quick) var(--sr-ease) both; }
.sr-toast--success { --sr-toast-ink: var(--sr-success-fill); }
.sr-toast--warning { --sr-toast-ink: var(--sr-warning-fill); }
.sr-toast--danger  { --sr-toast-ink: var(--sr-danger-fill); }
.sr-toast-icon { font-size: 1.15rem; line-height: 1.35rem; color: var(--sr-toast-ink); }
.sr-toast-title { display: block; font-size: var(--sr-text-sm); font-weight: 600; }
.sr-toast-body { font-size: var(--sr-text-sm); line-height: 1.4; color: var(--sr-fg-secondary); overflow-wrap: anywhere; }
.sr-toast-close { margin: -0.25rem -0.25rem 0 0; }

/* Barre de temps restant (toasts qui se ferment seuls) */
.sr-toast[data-autohide]::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 2px;
    background: var(--sr-toast-ink);
    opacity: 0.6;
    transform-origin: left center;
    animation: sr-toast-timer var(--sr-toast-delay, 5000ms) linear forwards;
}
.sr-toast[data-autohide]:hover::after { animation-play-state: paused; }

/* ---------- Dialogue de confirmation (remplace window.confirm) ---------- */

.sr-confirm .modal-content { padding: var(--sr-space-2); }
.sr-confirm .modal-footer { border: 0; padding-top: 0; }
.sr-confirm .modal-body { display: flex; gap: var(--sr-space-4); align-items: flex-start; }
.sr-confirm-icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    font-size: 1.15rem;
    color: var(--sr-accent-fg);
    background: var(--sr-accent-wash);
    border-radius: 50%;
}
.sr-confirm.is-danger .sr-confirm-icon { color: var(--sr-danger); background: var(--sr-danger-subtle); }
.sr-confirm-title { margin: 0 0 var(--sr-space-1); font-size: var(--sr-text-title); font-weight: 600; }
.sr-confirm-message { margin: 0; color: var(--sr-fg-secondary); white-space: pre-line; }

/* ---------- Page Apparence (Profil) : cartes d'aperçu, reprises de Quorly ---------- */

.sr-pref-group { border: 1px solid var(--sr-line); border-radius: var(--sr-radius-xl); background: var(--sr-panel); }
.sr-pref-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sr-space-4); padding: var(--sr-space-4) var(--sr-space-5); }
.sr-pref-row + .sr-pref-row { border-top: 1px solid var(--sr-line); }
.sr-pref-row-label { font-weight: 600; }
.sr-pref-row-label small { display: block; font-weight: 400; color: var(--sr-fg-muted); font-size: var(--sr-text-xs); }
.sr-pref-options { display: flex; flex-wrap: wrap; gap: var(--sr-space-3); margin: 0; padding: 0; border: 0; }

.sr-pref-option { display: grid; gap: var(--sr-space-2); justify-items: center; font-size: var(--sr-text-sm); color: var(--sr-fg-secondary); background: none; border: 0; padding: 0; }
.sr-pref-option[aria-pressed="true"] { color: var(--sr-fg); font-weight: 600; }
.sr-pref-card {
    display: block;
    width: 7.5rem;
    height: 4.75rem;
    padding: 4px;
    border: 2px solid var(--sr-line-strong);
    border-radius: var(--sr-radius-lg);
    transition: border-color var(--sr-duration-quick) var(--sr-ease), transform var(--sr-duration-micro) var(--sr-ease);
}
.sr-pref-option:hover .sr-pref-card { border-color: var(--sr-line-field); }
.sr-pref-option[aria-pressed="true"] .sr-pref-card { border-color: var(--sr-accent); box-shadow: 0 0 0 3px var(--sr-accent-wash); }
.sr-pref-option:active .sr-pref-card { transform: scale(var(--sr-scale-press)); }

/* Mini-fenêtres : couleurs littérales voulues (elles illustrent un mode, pas le mode courant) */
.sr-mini { position: relative; display: flex; width: 100%; height: 100%; overflow: hidden; border-radius: calc(var(--sr-radius-lg) - 5px); background: #ffffff; }
.sr-mini--dark { background: #0b1120; }
.sr-mini-side { width: 28%; background: #e3e8f0; }
.sr-mini--dark .sr-mini-side { background: #18233a; }
.sr-mini-side--tinted { background: linear-gradient(180deg, var(--sr-sidebar-from), var(--sr-sidebar-to)); }
.sr-mini-side--uniform { background: var(--sr-panel); border-inline-end: 1px solid var(--sr-line-strong); }
.sr-mini-body { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 0 8px; }
.sr-mini-body span { height: 5px; border-radius: 999px; background: #c5cddb; }
.sr-mini--dark .sr-mini-body span { background: #3a4762; }
.sr-mini-body span:nth-child(1) { width: 75%; }
.sr-mini-body span:nth-child(2) { width: 50%; }
.sr-mini-body span:nth-child(3) { width: 62%; background: var(--sr-accent); }
.sr-mini--system { background: none; }
.sr-mini--system > .sr-mini { position: absolute; inset: 0; }
.sr-mini--system > .sr-mini--dark { clip-path: inset(0 0 0 50%); }
.sr-mini--themed { background: var(--sr-canvas); }
.sr-mini--themed .sr-mini-body span { background: var(--sr-line-strong); }
.sr-mini--themed .sr-mini-body span:nth-child(3) { background: var(--sr-accent); }

/* Navigation du compte (Profil) */
.sr-account { display: grid; gap: var(--sr-space-5); }
@media (min-width: 992px) { .sr-account { grid-template-columns: 15rem 1fr; align-items: start; } }
.sr-account-nav { position: sticky; top: calc(var(--sr-topbar-h) + 6rem); display: flex; flex-direction: column; gap: 2px; padding: var(--sr-space-2); background: var(--sr-panel); border: 1px solid var(--sr-line); border-radius: var(--sr-radius-lg); }
.sr-account-nav a { display: flex; align-items: center; gap: var(--sr-space-3); height: 2.25rem; padding: 0 var(--sr-space-3); font-size: var(--sr-text-sm); color: var(--sr-fg); text-decoration: none; border-radius: var(--sr-radius-md); transition: background-color var(--sr-duration-micro) var(--sr-ease); }
.sr-account-nav a i { width: 1rem; text-align: center; color: var(--sr-fg-secondary); }
.sr-account-nav a:hover { background: var(--sr-hover); }
.sr-account-nav a.active { color: var(--sr-accent-fg); font-weight: 600; background: var(--sr-selected); }
.sr-account-nav a.active i { color: var(--sr-accent-fg); }
.sr-account-body > h3:first-child { font-size: var(--sr-text-h3); margin-bottom: var(--sr-space-4); }

/* ---------- Thème sombre : détails Bootstrap ---------- */

:root[data-theme="dark"] .btn-close { filter: invert(1) grayscale(1) brightness(1.6); }
:root[data-theme="dark"] .form-control::-webkit-calendar-picker-indicator { filter: invert(0.85); }
:root[data-theme="dark"] .bg-light { background-color: var(--sr-sunken) !important; }
:root[data-theme="dark"] .bg-white { background-color: var(--sr-panel) !important; }
:root[data-theme="dark"] .text-dark { color: var(--sr-fg) !important; }
:root[data-theme="dark"] .text-black-50 { color: var(--sr-fg-muted) !important; }
:root[data-theme="dark"] .border,
:root[data-theme="dark"] .border-top,
:root[data-theme="dark"] .border-bottom { border-color: var(--sr-line) !important; }
:root[data-theme="dark"] .form-floating > label { color: var(--sr-fg-muted); }
:root[data-theme="dark"] .form-floating > .form-control:focus ~ label::after,
:root[data-theme="dark"] .form-floating > .form-control:not(:placeholder-shown) ~ label::after { background-color: var(--sr-field); }

/* Bascule de thème sans flash de transitions (classe posée le temps d'un rendu par site.js) */
.sr-theme-switching *,
.sr-theme-switching *::before,
.sr-theme-switching *::after { transition: none !important; }

/* ---------- Apparition de contenu ---------- */

.t-reveal { animation: sr-reveal var(--sr-duration-slow) var(--sr-ease) both; }

@keyframes sr-page-in { from { opacity: 0; transform: translateY(var(--sr-distance-small)); } }
@keyframes sr-reveal { from { opacity: 0; filter: blur(var(--sr-blur-small)); } }
@keyframes sr-fade-in { from { opacity: 0; } }
@keyframes sr-pop-in { from { opacity: 0; transform: translateY(-4px) scale(var(--sr-scale-enter)); } }
@keyframes sr-toast-in { from { opacity: 0; transform: translateY(var(--sr-distance-medium)) scale(var(--sr-scale-enter)); } }
@keyframes sr-toast-out { to { opacity: 0; transform: translateX(var(--sr-distance-medium)); } }
@keyframes sr-toast-timer { to { transform: scaleX(0); } }
@keyframes sr-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .sr-page, .sr-toast, .sr-toast.is-leaving, .dropdown-menu.show, .t-reveal { animation: none !important; }
    .btn:active:not(:disabled), .sr-icon-btn:active { transform: none; }
    .modal.fade .modal-dialog { transform: none; }
}

/* ==========================================================================
   Formulaires : champs obligatoires, sections, barre d'actions collante,
   liste avec ajout (combobox), sélection multiple en étiquettes
   ========================================================================== */

/* Astérisque posé par RequiredLabelTagHelper sur les libellés des champs [Required] */
.sr-required { color: var(--sr-danger); font-weight: 600; margin-inline-start: 0.2em; }

/* Le résumé d'erreurs vide (validation-summary-valid) ne doit rien afficher */
.validation-summary-valid { display: none !important; }
.validation-summary-errors ul { margin: 0; padding-inline-start: 1.1rem; }
.form-select.input-validation-error,
.input-validation-error + .sr-combobox-toggle,
.sr-multiselect-control:has(+ .sr-combobox-menu + select.input-validation-error) { border-color: var(--sr-danger) !important; }
.form-control.input-validation-error:focus,
.form-select.input-validation-error:focus { box-shadow: 0 0 0 3px var(--sr-danger-subtle); }

.sr-form-section { padding-block: var(--sr-space-4) var(--sr-space-2); }
.sr-form-section + .sr-form-section { border-top: 1px solid var(--sr-line); }
.sr-form-section-title {
    margin: 0 0 var(--sr-space-3);
    font-size: var(--sr-text-sm);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sr-fg-muted);
}

/* Barre d'actions du formulaire (Quorly) : collée en bas de l'écran tant que la fin du formulaire n'est
   pas visible, puis reprend sa place. L'action principale reste toujours à portée. */
.sr-form-actions {
    position: sticky;
    bottom: 0;
    z-index: 1010;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sr-space-2) var(--sr-space-3);
    margin-top: var(--sr-space-5);
    margin-inline: calc(var(--sr-space-4) * -1);
    padding: var(--sr-space-3) var(--sr-space-4);
    background: color-mix(in srgb, var(--sr-panel) 88%, transparent);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--sr-line);
    box-shadow: 0 -8px 20px -16px rgba(0, 0, 0, 0.45);
}
.sr-form-hint { margin-inline-start: auto; font-size: var(--sr-text-xs); color: var(--sr-fg-muted); }
.sr-form-hint .sr-required { margin-inline: 0 0.15em; }

/* Liste avec ajout */
.sr-combobox, .sr-multiselect { position: relative; }
.sr-combobox > .form-control { padding-inline-end: 2.25rem; }
.sr-combobox-toggle {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    width: 2.25rem;
    display: grid;
    place-items: center;
    border: 0;
    background: none;
    color: var(--sr-fg-muted);
    font-size: 0.75rem;
    cursor: pointer;
}
.sr-combobox-menu {
    position: absolute;
    z-index: 1030;
    inset-inline: 0;
    top: calc(100% + 4px);
    max-height: 16rem;
    overflow-y: auto;
    margin: 0;
    padding: var(--sr-space-1);
    list-style: none;
    background: var(--sr-raised);
    border: 1px solid var(--sr-line-strong);
    border-radius: var(--sr-radius-md);
    box-shadow: var(--sr-shadow-raised);
    animation: sr-pop-in var(--sr-duration-quick) var(--sr-ease-out) both;
}
.sr-combobox-menu[hidden] { display: none; }
.sr-combobox-menu > li {
    display: flex;
    align-items: center;
    gap: var(--sr-space-2);
    padding: 0.45rem 0.6rem;
    border-radius: var(--sr-radius-sm);
    cursor: pointer;
    color: var(--sr-fg);
}
.sr-combobox-menu > li:hover,
.sr-combobox-menu > li.is-active { background: var(--sr-accent-wash); }
.sr-combobox-menu > li.is-current { font-weight: 600; }
.sr-combobox-menu > .sr-combobox-add { color: var(--sr-accent); font-weight: 600; }
.sr-combobox-menu > .sr-combobox-add:not(:first-child) { border-top: 1px solid var(--sr-line); border-radius: 0 0 var(--sr-radius-sm) var(--sr-radius-sm); margin-top: var(--sr-space-1); }
.sr-combobox-menu > .sr-combobox-empty { cursor: default; color: var(--sr-fg-muted); font-size: var(--sr-text-sm); }
.sr-combobox-menu > .sr-combobox-empty:hover { background: none; }

/* Sélection multiple en étiquettes */
.sr-multiselect-control {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sr-space-1);
    min-height: calc(1.5em + 0.75rem + 2px);
    padding-block: 0.3rem;
    cursor: text;
}
.sr-multiselect-control.is-focused { border-color: var(--sr-accent); box-shadow: var(--sr-shadow-focus); }
.sr-multiselect-chips { display: contents; list-style: none; margin: 0; padding: 0; }
.sr-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    max-width: 100%;
    padding: 0.15rem 0.25rem 0.15rem 0.6rem;
    border-radius: var(--sr-radius-pill);
    background: var(--sr-accent-wash);
    color: var(--sr-fg);
    font-size: var(--sr-text-sm);
    font-weight: 500;
    animation: sr-pop-in var(--sr-duration-quick) var(--sr-ease-out) both;
}
[dir="rtl"] .sr-chip { padding: 0.15rem 0.6rem 0.15rem 0.25rem; }
.sr-chip-remove {
    display: grid;
    place-items: center;
    width: 1.25rem;
    height: 1.25rem;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--sr-fg-muted);
    font-size: 0.7rem;
    cursor: pointer;
}
.sr-chip-remove:hover, .sr-chip-remove:focus-visible { background: var(--sr-line-strong); color: var(--sr-fg); }
.sr-multiselect-input {
    flex: 1 0 8rem;
    min-width: 8rem;
    border: 0;
    outline: 0;
    background: none;
    color: var(--sr-fg);
    padding: 0.15rem 0.25rem;
}
.sr-multiselect-menu .sr-check {
    display: grid;
    place-items: center;
    flex: 0 0 1.1rem;
    height: 1.1rem;
    border: 1px solid var(--sr-line-field);
    border-radius: 4px;
    font-size: 0.65rem;
    color: transparent;
}
.sr-multiselect-menu li[aria-selected="true"] .sr-check { background: var(--sr-accent); border-color: var(--sr-accent); color: var(--sr-on-accent); }

@media (prefers-reduced-motion: reduce) {
    .sr-combobox-menu, .sr-chip { animation: none !important; }
}

/* ==========================================================================
   Listes : barre de filtres au-dessus du tableau, actions de ligne en icônes
   ========================================================================== */
.sr-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sr-space-2);
    margin-bottom: var(--sr-space-3);
    padding: var(--sr-space-2);
    background: var(--sr-panel);
    border: 1px solid var(--sr-line);
    border-radius: var(--sr-radius-lg);
}
.sr-toolbar .form-select { width: auto; min-width: 10rem; }
.sr-toolbar .form-select.is-filtered { border-color: var(--sr-accent); background-color: var(--sr-accent-wash); font-weight: 500; }
.sr-toolbar-search { position: relative; flex: 1 1 16rem; min-width: 12rem; max-width: 26rem; }
.sr-toolbar-search > i {
    position: absolute;
    inset-inline-start: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--sr-fg-muted);
    font-size: 0.85rem;
    pointer-events: none;
}
.sr-toolbar-search > .form-control { padding-inline-start: 2.1rem; }
.sr-toolbar-count { margin-inline-start: auto; padding-inline: var(--sr-space-2); font-size: var(--sr-text-sm); color: var(--sr-fg-muted); white-space: nowrap; }
/* Avec JavaScript, les filtres s'appliquent tout seuls : le bouton ne sert qu'en secours. */
.js-ready .sr-toolbar[data-autosubmit] .sr-toolbar-apply { display: none; }

/* Bouton icône (actions de ligne) : carré, sans fond, libellé en infobulle (data-tip) */
.btn-icon {
    --bs-btn-padding-x: 0;
    --bs-btn-padding-y: 0;
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid transparent;
    border-radius: var(--sr-radius-md);
    background: transparent;
    color: var(--sr-fg-secondary);
    font-size: 0.875rem;
    vertical-align: middle;
}
.btn-icon:hover, .btn-icon:focus-visible { background: var(--sr-sunken); color: var(--sr-fg); border-color: var(--sr-line); }
.btn-icon--danger:hover, .btn-icon--danger:focus-visible { background: var(--sr-danger-subtle); color: var(--sr-danger); }
.btn-icon--success:hover, .btn-icon--success:focus-visible { background: var(--sr-success-subtle, rgba(25, 135, 84, 0.12)); color: var(--sr-success, #198754); }
.btn-icon[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    z-index: 1040;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translate(-50%, 2px);
    padding: 0.25rem 0.5rem;
    border-radius: var(--sr-radius-sm);
    background: var(--sr-ink-900, #0b1120);
    color: #fff;
    font-size: var(--sr-text-xs);
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--sr-duration-quick) var(--sr-ease-out), transform var(--sr-duration-quick) var(--sr-ease-out);
}
.btn-icon[data-tip]:hover::after, .btn-icon[data-tip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
:root[data-theme="dark"] .btn-icon[data-tip]::after { background: #e8edf7; color: #0b1120; }
.sr-row-actions { white-space: nowrap; text-align: end; }
.sr-row-actions form { display: inline; }

/* Fiche cours : contenus d'une leçon, visibles en clair (icône, titre, type) */
.sr-content-list { flex-basis: 100%; list-style: none; margin: 0; padding: 0 0 0 1.25rem; display: grid; gap: 0.25rem; }
.sr-content-list li { display: flex; align-items: center; gap: var(--sr-space-2); font-size: var(--sr-text-sm); }
.sr-content-list i { color: var(--sr-accent); width: 1rem; text-align: center; }

/* Question de quiz : une ligne par proposition (case « correcte » + texte) */
.sr-option-row { display: flex; align-items: center; gap: var(--sr-space-3); margin-bottom: var(--sr-space-2); }
.sr-option-row > .form-check-input { flex: 0 0 auto; width: 1.25rem; height: 1.25rem; margin: 0; }

/* ==========================================================================
   Texte mis en forme : éditeur (data-richtext) et contenu affiché (.sr-prose)
   ========================================================================== */
.sr-richtext {
    position: relative;
    border: 1px solid var(--sr-line-field);
    border-radius: var(--sr-radius-md);
    background: var(--sr-panel);
    transition: border-color var(--sr-duration-quick) var(--sr-ease-out), box-shadow var(--sr-duration-quick) var(--sr-ease-out);
}
.sr-richtext.is-focused { border-color: var(--sr-accent); box-shadow: var(--sr-shadow-focus); }
.sr-richtext:has(.input-validation-error) { border-color: var(--sr-danger); }
.sr-richtext-toolbar {
    position: sticky;
    top: calc(var(--sr-topbar-h) + 4.25rem);
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0.35rem;
    border-bottom: 1px solid var(--sr-line);
    border-radius: var(--sr-radius-md) var(--sr-radius-md) 0 0;
    background: var(--sr-sunken);
}
.sr-richtext-group { display: flex; gap: 2px; padding-inline-end: 0.25rem; border-inline-end: 1px solid var(--sr-line); }
.sr-richtext-group:last-child { border-inline-end: 0; }
.sr-richtext-btn {
    position: relative;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: var(--sr-radius-sm);
    background: none;
    color: var(--sr-fg-secondary);
    font-size: 0.85rem;
    cursor: pointer;
}
.sr-richtext-btn:hover, .sr-richtext-btn:focus-visible { background: var(--sr-panel); color: var(--sr-fg); }
.sr-richtext-btn.is-active { background: var(--sr-accent-wash); color: var(--sr-accent); }
.sr-richtext-small { font-size: 0.7rem; }
.sr-richtext-btn[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    z-index: 1040;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translate(-50%, 2px);
    padding: 0.25rem 0.5rem;
    border-radius: var(--sr-radius-sm);
    background: var(--sr-ink-900, #0b1120);
    color: #fff;
    font-size: var(--sr-text-xs);
    font-weight: 500;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--sr-duration-quick) var(--sr-ease-out), transform var(--sr-duration-quick) var(--sr-ease-out);
}
.sr-richtext-btn[data-tip]:hover::after, .sr-richtext-btn[data-tip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
:root[data-theme="dark"] .sr-richtext-btn[data-tip]::after { background: #e8edf7; color: #0b1120; }
.sr-richtext-editor { padding: 0.75rem 1rem; outline: 0; color: var(--sr-fg); overflow-wrap: anywhere; }
.sr-richtext-editor:empty::before { content: attr(data-placeholder); color: var(--sr-fg-muted); }
/* Le <textarea> d'origine reste dans le formulaire (envoi, validation) mais n'est plus visible. */
.sr-richtext-source { position: absolute !important; inset-inline-start: 0; bottom: 0; width: 1px !important; height: 1px !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; opacity: 0; pointer-events: none; resize: none; }

.sr-prose { line-height: 1.6; }
.sr-prose > :first-child { margin-top: 0; }
.sr-prose > :last-child { margin-bottom: 0; }
.sr-prose p { margin: 0 0 0.75em; }
.sr-prose h3 { margin: 1.1em 0 0.5em; font-size: 1.2rem; font-weight: 700; }
.sr-prose h4 { margin: 1em 0 0.4em; font-size: 1.05rem; font-weight: 700; }
.sr-prose ul, .sr-prose ol { margin: 0 0 0.75em; padding-inline-start: 1.5em; }
.sr-prose li + li { margin-top: 0.25em; }
.sr-prose blockquote { margin: 0 0 0.75em; padding: 0.5em 1em; border-inline-start: 3px solid var(--sr-accent); background: var(--sr-sunken); border-radius: 0 var(--sr-radius-sm) var(--sr-radius-sm) 0; color: var(--sr-fg-secondary); }
.sr-prose pre { margin: 0 0 0.75em; padding: 0.75em 1em; border-radius: var(--sr-radius-md); background: var(--sr-ink-900, #0b1120); color: #e8edf7; font-family: var(--bs-font-monospace); font-size: 0.875em; white-space: pre-wrap; }
.sr-prose code { font-family: var(--bs-font-monospace); font-size: 0.9em; }
.sr-prose a { color: var(--sr-accent); text-decoration: underline; }
.sr-prose hr { margin: 1em 0; border-color: var(--sr-line-strong); }

/* État vide d'une liste (partiel _EmptyState) : panneau au centre, phrase, explication, création en bas */
.sr-empty--panel {
    min-height: 18rem;
    align-content: center;
    margin-block: var(--sr-space-2) var(--sr-space-4);
    background: var(--sr-panel);
    border: 1px dashed var(--sr-line-strong);
    border-radius: var(--sr-radius-lg);
    animation: sr-reveal var(--sr-duration-slow) var(--sr-ease-out) both;
}
.sr-empty--panel h3 { color: var(--sr-fg); font-size: 1.125rem; font-weight: 700; }
.sr-empty--panel .btn { margin-top: var(--sr-space-2); }

/* Onglets d'une page (cours : Contenu / Discussions) */
.sr-tabs {
    display: flex;
    gap: var(--sr-space-1);
    margin: 0 0 var(--sr-space-4);
    border-bottom: 1px solid var(--sr-line);
    overflow-x: auto;
}
.sr-tab {
    display: inline-flex;
    align-items: center;
    gap: var(--sr-space-2);
    padding: 0.6rem 0.9rem;
    margin-bottom: -1px;
    border-bottom: 2px solid transparent;
    color: var(--sr-fg-secondary);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--sr-duration-quick) var(--sr-ease-out), border-color var(--sr-duration-quick) var(--sr-ease-out);
}
.sr-tab:hover { color: var(--sr-fg); }
.sr-tab.is-active { color: var(--sr-accent); border-bottom-color: var(--sr-accent); }
.sr-tab i { font-size: 0.85em; }
@media (prefers-reduced-motion: reduce) { .sr-empty--panel { animation: none; } }

/* Carte de cours (catalogue) : toute la carte ouvre le cours. Durée, langue, domaine apparaissent au
   survol par fondu, sans changer la hauteur : les autres cartes de la rangée ne bougent pas. */
.sr-course-card {
    display: flex;
    flex-direction: column;
    gap: var(--sr-space-2);
    height: 100%;
    padding: var(--sr-space-4) var(--sr-space-5);
    background: var(--sr-panel);
    border: 1px solid var(--sr-line);
    border-radius: var(--sr-radius-lg);
    color: var(--sr-fg);
    text-decoration: none;
    transition: transform var(--sr-duration-fast) var(--sr-ease-out), box-shadow var(--sr-duration-fast) var(--sr-ease-out), border-color var(--sr-duration-fast) var(--sr-ease-out);
}
.sr-course-card:hover, .sr-course-card:focus-visible {
    color: var(--sr-fg);
    border-color: color-mix(in srgb, var(--sr-accent) 35%, var(--sr-line));
    box-shadow: var(--sr-shadow-raised);
    transform: translateY(-2px);
}
/* Image d'illustration : bandeau en haut de la carte, qui déborde du remplissage. */
.sr-course-card.has-image { padding-top: 0; overflow: hidden; }
.sr-course-card-image {
    display: block;
    width: calc(100% + 2 * var(--sr-space-5));
    max-width: none;
    height: 9rem;
    margin: 0 calc(-1 * var(--sr-space-5)) var(--sr-space-1);
    object-fit: cover;
    background: var(--sr-line);
}
/* En-tête de la fiche : la vignette à gauche, titre et sous-titre à droite (le h1 reste enfant direct, voir theme.css). */
.sr-course-head.has-image { display: grid; grid-template-columns: auto 1fr; column-gap: var(--sr-space-3); align-items: center; }
.sr-course-head.has-image > .sr-course-hero-image { grid-row: 1 / span 2; }
.sr-course-head.has-image > h1, .sr-course-head.has-image > p { grid-column: 2; }
.sr-course-hero-image { width: 3.5rem; height: 3.5rem; object-fit: cover; border-radius: var(--sr-radius-lg); border: 1px solid var(--sr-line); }
.sr-course-image-preview { max-width: 16rem; max-height: 9rem; object-fit: cover; border-radius: var(--sr-radius-lg); border: 1px solid var(--sr-line); }
.sr-course-card-eyebrow {
    color: var(--sr-accent);
    font-size: var(--sr-text-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.sr-course-card-title { margin: 0; font-size: 1.125rem; font-weight: 700; line-height: 1.35; }
.sr-course-card-tags { display: flex; flex-wrap: wrap; gap: var(--sr-space-1); margin-top: auto; padding-top: var(--sr-space-1); }
.sr-course-card-more {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sr-space-1) var(--sr-space-3);
    padding-top: var(--sr-space-2);
    border-top: 1px solid var(--sr-line);
    font-size: var(--sr-text-sm);
    color: var(--sr-fg-secondary);
    opacity: 0;
    transform: translateY(4px);
    transition: opacity var(--sr-duration-fast) var(--sr-ease-out), transform var(--sr-duration-fast) var(--sr-ease-out);
}
.sr-course-card-more i { color: var(--sr-fg-muted); margin-inline-end: 0.2rem; }
.sr-course-card-go { margin-inline-start: auto; color: var(--sr-accent); font-weight: 600; }
.sr-course-card-go i { color: inherit !important; margin: 0 0 0 0.2rem; }
.sr-course-card:hover .sr-course-card-more,
.sr-course-card:focus-visible .sr-course-card-more { opacity: 1; transform: none; }
/* Écran tactile : pas de survol, les infos restent visibles */
@media (hover: none) { .sr-course-card-more { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sr-course-card, .sr-course-card-more { transition: none; } .sr-course-card:hover { transform: none; } }

/* ==========================================================================
   Arborescence (contenu d'un cours) : module > leçons > contenus, quiz, labs
   ========================================================================== */
.sr-tree, .sr-tree ul { list-style: none; margin: 0; padding: 0; }
.sr-tree { background: var(--sr-panel); border: 1px solid var(--sr-line); border-radius: var(--sr-radius-lg); padding: var(--sr-space-2); }
.sr-tree-node--module + .sr-tree-node--module { border-top: 1px solid var(--sr-line); margin-top: var(--sr-space-1); padding-top: var(--sr-space-1); }
.sr-tree-row {
    display: flex;
    align-items: center;
    gap: var(--sr-space-2);
    min-height: 2.5rem;
    padding: 0.15rem var(--sr-space-2);
    border-radius: var(--sr-radius-md);
    transition: background-color var(--sr-duration-micro) var(--sr-ease-out);
}
.sr-tree-row:hover { background: var(--sr-sunken); }
.sr-tree-toggle {
    display: flex;
    align-items: center;
    gap: var(--sr-space-2);
    min-width: 0;
    padding: 0.25rem 0;
    border: 0;
    background: none;
    color: var(--sr-fg);
    text-align: start;
    cursor: pointer;
}
.sr-tree-toggle:focus-visible { outline: none; box-shadow: var(--sr-shadow-focus); border-radius: var(--sr-radius-sm); }
.sr-tree-chevron { width: 1rem; font-size: 0.7rem; color: var(--sr-fg-muted); transition: transform var(--sr-duration-quick) var(--sr-ease-out); }
[dir="rtl"] .sr-tree-chevron { transform: scaleX(-1); }
.is-open > .sr-tree-row .sr-tree-chevron { transform: rotate(90deg); }
.sr-tree-spacer { flex: 0 0 1rem; }
.sr-tree-icon { flex: 0 0 1.15rem; text-align: center; color: var(--sr-accent); }
.sr-tree-node--lesson > .sr-tree-row .sr-tree-icon { color: color-mix(in srgb, var(--sr-accent) 70%, var(--sr-fg-muted)); }
.sr-tree-icon--open { display: none; }
.is-open > .sr-tree-row .sr-tree-icon--open { display: inline-block; }
.is-open > .sr-tree-row .sr-tree-icon--closed { display: none; }
.sr-tree-icon--file { color: var(--sr-fg-secondary); }
.sr-tree-icon--quiz { color: var(--sr-info, #0d6efd); }
.sr-tree-icon--lab { color: var(--sr-warning, #b86e00); }
.sr-tree-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--sr-fg); }
a.sr-tree-label { text-decoration: none; }
a.sr-tree-label:hover { color: var(--sr-accent); text-decoration: underline; }
.sr-tree-node--module > .sr-tree-row .sr-tree-label { font-weight: 700; }
.sr-tree-node--lesson > .sr-tree-row .sr-tree-label { font-weight: 600; }
.sr-tree-meta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--sr-space-1); font-size: var(--sr-text-xs); color: var(--sr-fg-muted); white-space: nowrap; }
.sr-tree-duration { color: var(--sr-fg-muted); }
.sr-tree-actions { display: inline-flex; align-items: center; gap: 2px; margin-inline-start: auto; }
.sr-tree-actions form { display: inline; }
/* Actions révélées au survol de la ligne (toujours visibles au clavier et au tactile) */
@media (hover: hover) and (pointer: fine) {
    .sr-tree-actions { opacity: 0; transition: opacity var(--sr-duration-quick) var(--sr-ease-out); }
    .sr-tree-row:hover > .sr-tree-actions, .sr-tree-row:focus-within > .sr-tree-actions { opacity: 1; }
}
/* Enfants : retrait + filet vertical comme un explorateur de fichiers ; repli animé */
.sr-tree-children { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--sr-duration-fast) var(--sr-ease-out); }
.sr-tree-children > div { min-height: 0; }
/* Rogné seulement replié : ouvert, les infobulles des icônes peuvent dépasser. */
.sr-tree-node:not(.is-open) > .sr-tree-children > div { overflow: hidden; }
.is-open > .sr-tree-children { grid-template-rows: 1fr; }
.sr-tree-children > div > ul { margin-inline-start: 1.05rem; padding-inline-start: var(--sr-space-3); border-inline-start: 1px solid var(--sr-line-strong); }
.sr-tree-note { margin: 0.25rem 0 0.5rem calc(1.05rem + var(--sr-space-3)); padding-inline-start: var(--sr-space-3); font-size: var(--sr-text-sm); color: var(--sr-fg-muted); }
@media (prefers-reduced-motion: reduce) { .sr-tree-children, .sr-tree-chevron { transition: none; } }

/* ==========================================================================
   Discussion : la question, puis les réponses, puis les réponses aux réponses (2 niveaux)
   ========================================================================== */
.sr-post {
    padding: var(--sr-space-4) var(--sr-space-5);
    background: var(--sr-panel);
    border: 1px solid var(--sr-line);
    border-radius: var(--sr-radius-lg);
    scroll-margin-top: 6rem;
}
.sr-post:target { border-color: color-mix(in srgb, var(--sr-accent) 50%, var(--sr-line)); box-shadow: var(--sr-shadow-focus); }
.sr-post--question { border-inline-start: 4px solid var(--sr-accent); margin-bottom: var(--sr-space-5); }
.sr-post--question .sr-post-body { font-size: 1.0625rem; }
.sr-post-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sr-space-2); margin-bottom: var(--sr-space-2); }
.sr-post-author { font-weight: 700; }
.sr-post-kind { display: inline-flex; align-items: center; gap: 0.3rem; font-size: var(--sr-text-xs); color: var(--sr-fg-muted); }
.sr-post-kind--question { color: var(--sr-accent); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.sr-post-date { margin-inline-start: auto; font-size: var(--sr-text-sm); color: var(--sr-fg-muted); }
.sr-post-body { margin: 0 0 var(--sr-space-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.sr-post-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin-inline-start: -0.4rem; }
.sr-post-actions form { display: inline; margin: 0; }
.sr-post-actions .btn-icon.is-active { color: var(--sr-accent); background: var(--sr-accent-wash); }
.sr-like { width: auto; min-width: 2.25rem; padding-inline: 0.5rem; gap: 0.35rem; display: inline-flex; align-items: center; }
.sr-like.is-active, .sr-like.is-active:hover { color: #c98a00; background: color-mix(in srgb, #f5b301 14%, transparent); }
.sr-like-n { font-size: var(--sr-text-sm); font-variant-numeric: tabular-nums; }
.sr-like-count { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0 0.5rem; font-size: var(--sr-text-sm); color: var(--sr-fg-muted); }
.sr-post-inline { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--sr-space-2); margin-top: var(--sr-space-3); }
.sr-post-inline .form-control { flex: 1 1 18rem; }
.sr-post-inline--reply { flex-direction: column; align-items: stretch; }
.sr-post-inline--reply .btn { align-self: flex-start; }
.sr-thread-count { font-size: var(--sr-text-sm); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--sr-fg-muted); margin: 0 0 var(--sr-space-3); }
.sr-thread, .sr-thread-replies { list-style: none; margin: 0; padding: 0; }
.sr-thread > li + li { margin-top: var(--sr-space-3); }
/* Second niveau : en retrait, relié à la réponse par un filet, fond plus discret */
.sr-thread-replies {
    margin-top: var(--sr-space-2);
    margin-inline-start: var(--sr-space-6, 2rem);
    padding-inline-start: var(--sr-space-4);
    border-inline-start: 2px solid var(--sr-line-strong);
}
.sr-thread-replies > li + li { margin-top: var(--sr-space-2); }
.sr-post--reply { background: var(--sr-sunken); padding: var(--sr-space-3) var(--sr-space-4); }
@media (max-width: 575.98px) { .sr-thread-replies { margin-inline-start: var(--sr-space-3); } }

/* Champ en lecture seule (ex. e-mail de connexion du profil) : visiblement non modifiable */
.form-control[readonly] { background: var(--sr-sunken); color: var(--sr-fg-secondary); }

/* ==========================================================================
   Tableau de bord (accueil) : indicateurs, graphiques, à faire, ligue, badges
   ========================================================================== */
.sr-dash-actions { display: flex; flex-wrap: wrap; gap: var(--sr-space-2); margin-inline-start: auto; }

/* Bandeau apprenant : série, points, badges, rang, activité de la semaine */
.sr-dash-hero {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--sr-space-2);
    margin-bottom: var(--sr-space-4);
    padding: var(--sr-space-3);
    background: var(--sr-panel);
    border: 1px solid var(--sr-line);
    border-radius: var(--sr-radius-lg);
}
.sr-dash-hero-item { display: flex; align-items: center; gap: var(--sr-space-3); padding: var(--sr-space-2) var(--sr-space-3); border-radius: var(--sr-radius-md); }
.sr-dash-hero-item + .sr-dash-hero-item { border-inline-start: 1px solid var(--sr-line); }
.sr-dash-hero-item strong { display: block; font-size: 1.5rem; font-weight: 700; line-height: 1.1; }
.sr-dash-hero-item span:not(.sr-dash-hero-icon) { display: block; font-size: var(--sr-text-sm); color: var(--sr-fg-muted); }
.sr-dash-hero-icon { display: grid; place-items: center; flex: 0 0 2.75rem; height: 2.75rem; border-radius: 50%; font-size: 1.2rem; }
.sr-dash-hero-icon.is-flame { color: #d9480f; background: rgba(253, 126, 20, 0.14); }
.sr-dash-hero-icon.is-star { color: #b77900; background: rgba(245, 179, 1, 0.18); }
.sr-dash-hero-icon.is-badge { color: var(--sr-accent); background: var(--sr-accent-wash); }
.sr-dash-hero-icon.is-rank { color: #6b4fbb; background: rgba(107, 79, 187, 0.13); }
:root[data-theme="dark"] .sr-dash-hero-icon.is-flame { color: #ff8a4c; }
:root[data-theme="dark"] .sr-dash-hero-icon.is-star { color: #ffc53d; }
:root[data-theme="dark"] .sr-dash-hero-icon.is-rank { color: #a996f0; }
.sr-delta { display: inline-flex; align-items: center; gap: 0.25rem; margin-top: 0.15rem; font-size: var(--sr-text-xs); font-weight: 600; color: var(--sr-fg-muted); }
.sr-delta.is-up { color: var(--sr-success); }
.sr-delta.is-down { color: var(--sr-danger); }
@media (max-width: 767.98px) { .sr-dash-hero-item + .sr-dash-hero-item { border-inline-start: 0; } }

/* Indicateurs */
.sr-dash-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--sr-space-3); margin-bottom: var(--sr-space-4); }
.sr-dash-tile {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--sr-space-3);
    padding: var(--sr-space-4);
    background: var(--sr-panel);
    border: 1px solid var(--sr-line);
    border-radius: var(--sr-radius-lg);
    color: var(--sr-fg);
    text-decoration: none;
    transition: border-color var(--sr-duration-fast) var(--sr-ease-out), box-shadow var(--sr-duration-fast) var(--sr-ease-out);
}
.sr-dash-tile.is-link:hover, .sr-dash-tile.is-link:focus-visible { color: var(--sr-fg); border-color: color-mix(in srgb, var(--sr-accent) 35%, var(--sr-line)); box-shadow: var(--sr-shadow-raised); }
.sr-dash-tile-body { display: flex; flex-direction: column; min-width: 0; }
.sr-dash-tile-body strong { font-size: 1.75rem; font-weight: 700; line-height: 1.1; }
.sr-dash-tile-body span { font-size: var(--sr-text-sm); color: var(--sr-fg-secondary); }
.sr-dash-tile-body small { font-size: var(--sr-text-xs); color: var(--sr-fg-muted); }
.sr-dash-tile-go { margin-inline-start: auto; color: var(--sr-fg-muted); font-size: 0.75rem; opacity: 0; transition: opacity var(--sr-duration-fast) var(--sr-ease-out); }
.sr-dash-tile.is-link:hover .sr-dash-tile-go, .sr-dash-tile.is-link:focus-visible .sr-dash-tile-go { opacity: 1; }
.sr-dash-tile-icon { display: grid; place-items: center; flex: 0 0 3rem; height: 3rem; border-radius: var(--sr-radius-md); font-size: 1.15rem; }
.sr-dash-tile-icon.is-sm { flex-basis: 2.25rem; height: 2.25rem; font-size: 0.9rem; }
.sr-dash-tile-icon.is-accent { color: var(--sr-accent); background: var(--sr-accent-wash); }
.sr-dash-tile-icon.is-success { color: var(--sr-success); background: var(--sr-success-subtle); }
.sr-dash-tile-icon.is-warning { color: var(--sr-warning); background: var(--sr-warning-subtle); }
.sr-dash-tile-icon.is-danger { color: var(--sr-danger); background: var(--sr-danger-subtle); }
.sr-dash-tile-icon.is-info { color: var(--sr-info); background: var(--sr-info-subtle); }
.sr-dash-tile-icon.is-neutral { color: var(--sr-neutral); background: var(--sr-neutral-subtle); }

/* Grille : contenu principal + colonne latérale */
.sr-dash-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: var(--sr-space-4); align-items: start; }
.sr-dash-main, .sr-dash-side { display: flex; flex-direction: column; gap: var(--sr-space-4); min-width: 0; }
@media (max-width: 1199.98px) { .sr-dash-grid { grid-template-columns: minmax(0, 1fr); } }

.sr-dash-card { padding: var(--sr-space-4) var(--sr-space-5); background: var(--sr-panel); border: 1px solid var(--sr-line); border-radius: var(--sr-radius-lg); }
.sr-dash-card-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--sr-space-2) var(--sr-space-4); margin-bottom: var(--sr-space-3); }
.sr-dash-card-title { margin: 0; font-size: 1rem; font-weight: 700; }
.sr-dash-card-sub { margin: 0.1rem 0 0; font-size: var(--sr-text-sm); color: var(--sr-fg-muted); }
.sr-dash-more { font-size: var(--sr-text-sm); font-weight: 600; text-decoration: none; white-space: nowrap; }
.sr-dash-eyebrow { display: block; font-size: var(--sr-text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sr-accent); }

/* Reprendre */
.sr-dash-continue { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sr-space-4); background: linear-gradient(120deg, var(--sr-accent-wash), var(--sr-panel) 70%); }
.sr-dash-continue-icon { display: grid; place-items: center; flex: 0 0 3.5rem; height: 3.5rem; border-radius: var(--sr-radius-lg); color: #fff; background: var(--sr-accent); font-size: 1.4rem; }
.sr-dash-continue-body { flex: 1 1 16rem; min-width: 0; }
.sr-dash-continue-body h2 { margin: 0.15rem 0 0.2rem; font-size: 1.2rem; font-weight: 700; }
.sr-dash-continue-body p { margin: 0 0 var(--sr-space-2); color: var(--sr-fg-secondary); }
.sr-dash-progress { display: block; height: 8px; margin-bottom: 0.3rem; border-radius: 999px; background: color-mix(in srgb, var(--sr-accent) 14%, transparent); overflow: hidden; }
.sr-dash-progress > span { display: block; height: 100%; border-radius: inherit; background: var(--sr-accent); }
.sr-dash-progress.is-thin { height: 6px; margin: 0.35rem 0 0; }

/* Mes formations */
.sr-dash-courses { list-style: none; margin: 0; padding: 0; }
.sr-dash-courses li + li { border-top: 1px solid var(--sr-line); }
.sr-dash-courses a { display: flex; align-items: center; gap: var(--sr-space-3); padding: var(--sr-space-3) var(--sr-space-2); margin: 0 calc(-1 * var(--sr-space-2)); border-radius: var(--sr-radius-md); color: var(--sr-fg); text-decoration: none; }
.sr-dash-courses a:hover { background: var(--sr-sunken); }
.sr-dash-course-icon { display: grid; place-items: center; flex: 0 0 2.25rem; height: 2.25rem; border-radius: var(--sr-radius-md); color: var(--sr-accent); background: var(--sr-accent-wash); }
.sr-dash-course-icon.is-done { color: var(--sr-success); background: var(--sr-success-subtle); }
.sr-dash-course-body { flex: 1 1 auto; min-width: 0; }
.sr-dash-course-title { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-dash-course-meta { flex: 0 0 auto; text-align: end; font-weight: 700; font-variant-numeric: tabular-nums; }
.sr-dash-course-meta small { display: block; font-weight: 400; font-size: var(--sr-text-xs); color: var(--sr-fg-muted); }

/* À faire, sessions */
.sr-dash-tasks { list-style: none; margin: 0; padding: 0; }
.sr-dash-tasks li { display: flex; align-items: center; gap: var(--sr-space-3); padding: var(--sr-space-2) 0; }
.sr-dash-tasks li + li { border-top: 1px solid var(--sr-line); }
.sr-dash-task-body { flex: 1 1 auto; min-width: 0; }
.sr-dash-task-body strong { display: block; font-size: var(--sr-text-sm); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-dash-task-body small { display: block; font-size: var(--sr-text-xs); color: var(--sr-fg-muted); }
.sr-dash-tasks .btn { flex: 0 0 auto; }
.sr-dash-allclear { padding: var(--sr-space-4) 0; text-align: center; color: var(--sr-fg-muted); }
.sr-dash-allclear i { font-size: 1.5rem; color: var(--sr-success); }
.sr-dash-allclear p { margin: var(--sr-space-2) 0 0; font-size: var(--sr-text-sm); }

/* Ligue (classement de l'organisation) */
.sr-league { list-style: none; margin: 0; padding: 0; }
.sr-league li { display: flex; align-items: center; gap: var(--sr-space-3); padding: 0.45rem var(--sr-space-2); margin: 0 calc(-1 * var(--sr-space-2)); border-radius: var(--sr-radius-md); }
.sr-league li.is-me { background: var(--sr-accent-wash); }
.sr-league-rank { flex: 0 0 1.5rem; text-align: center; font-weight: 700; color: var(--sr-fg-muted); font-variant-numeric: tabular-nums; }
.sr-league-rank.is-top1 { color: #b77900; }
.sr-league-rank.is-top2 { color: #7b8794; }
.sr-league-rank.is-top3 { color: #a8622a; }
.sr-league-name { flex: 1 1 auto; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-league-name small { font-weight: 400; color: var(--sr-fg-muted); }
.sr-league-points { font-weight: 700; font-variant-numeric: tabular-nums; }
.sr-league-points small { font-weight: 400; color: var(--sr-fg-muted); }

/* Badges */
.sr-badges { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sr-space-2); list-style: none; margin: 0; padding: 0; }
.sr-badges li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.35rem; padding: var(--sr-space-3) var(--sr-space-2); border: 1px dashed var(--sr-line-strong); border-radius: var(--sr-radius-md); text-align: center; color: var(--sr-fg-muted); }
.sr-badges li.is-earned { border-style: solid; border-color: color-mix(in srgb, #f5b301 45%, var(--sr-line)); color: var(--sr-fg); background: color-mix(in srgb, #f5b301 7%, var(--sr-panel)); }
.sr-badge-medal { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--sr-neutral-subtle); font-size: 1rem; }
.sr-badges li.is-earned .sr-badge-medal { color: #fff; background: linear-gradient(135deg, #f5b301, #d97706); }
.sr-badge-name { font-size: var(--sr-text-xs); font-weight: 600; line-height: 1.25; }

/* Classement horizontal */
.sr-rank { list-style: none; margin: 0; padding: 0; }
.sr-rank li + li { margin-top: var(--sr-space-3); }
.sr-rank-head { display: flex; justify-content: space-between; gap: var(--sr-space-3); font-size: var(--sr-text-sm); }
.sr-rank-label { min-width: 0; font-weight: 600; color: var(--sr-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; }
a.sr-rank-label:hover { color: var(--sr-accent); text-decoration: underline; }
.sr-rank-value { font-weight: 700; font-variant-numeric: tabular-nums; }
.sr-rank-track { height: 8px; margin-top: 0.3rem; border-radius: 999px; background: var(--sr-neutral-subtle); }
.sr-rank-track > span { display: block; height: 100%; min-width: 4px; border-radius: 999px; background: var(--viz-1, #2a78d6); }
.sr-rank-meta { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 0.15rem; font-size: var(--sr-text-xs); color: var(--sr-fg-muted); }

/* ---- Graphiques (palette de données validée, clair / sombre) ---- */
.sr-viz, .sr-rank {
    --viz-1: #2a78d6; --viz-2: #eb6834; --viz-3: #1baf7a; --viz-4: #eda100;
    --viz-grid: rgba(22, 35, 63, 0.09); --viz-ink: #52514e;
}
:root[data-theme="dark"] .sr-viz, :root[data-theme="dark"] .sr-rank {
    --viz-1: #3987e5; --viz-2: #d95926; --viz-3: #199e70; --viz-4: #c98500;
    --viz-grid: rgba(255, 255, 255, 0.08); --viz-ink: #c3c2b7;
}
.sr-viz-legend { display: flex; flex-wrap: wrap; gap: var(--sr-space-1) var(--sr-space-4); list-style: none; margin: 0; padding: 0; font-size: var(--sr-text-sm); color: var(--sr-fg-secondary); }
.sr-viz-legend li { display: inline-flex; align-items: center; gap: 0.4rem; }
.sr-viz-legend strong { color: var(--sr-fg); font-variant-numeric: tabular-nums; }
.sr-viz-legend--block { margin-top: var(--sr-space-3); }
.sr-viz-swatch { width: 10px; height: 10px; border-radius: 2px; flex: 0 0 auto; }
.sr-viz-chart { position: relative; }
.sr-viz-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.sr-viz-grid { stroke: var(--viz-grid); stroke-width: 1; shape-rendering: crispEdges; }
.sr-viz-grid.is-base { stroke: var(--sr-line-strong); }
.sr-viz-tick, .sr-viz-xlabel { fill: var(--sr-fg-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.sr-viz-value { fill: var(--sr-fg); font-size: 11px; font-weight: 700; }
.sr-viz-bar { transition: opacity var(--sr-duration-quick) var(--sr-ease-out); }
.sr-viz-hit { fill: transparent; cursor: default; outline: none; }
.sr-viz-group.is-active .sr-viz-bar { opacity: 0.8; }
.sr-viz-group.is-active .sr-viz-hit { fill: var(--viz-grid); }
@media (max-width: 575.98px) { .sr-viz-xlabel.is-odd { display: none; } }
.sr-viz-tip {
    position: absolute;
    z-index: 5;
    min-width: 9rem;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--sr-line);
    border-radius: var(--sr-radius-md);
    background: var(--sr-panel);
    box-shadow: var(--sr-shadow-raised);
    font-size: var(--sr-text-sm);
    pointer-events: none;
    transform: translate(-50%, calc(-100% - 8px));
}
.sr-viz-tip-title { display: block; margin-bottom: 0.25rem; font-size: var(--sr-text-xs); color: var(--sr-fg-muted); }
.sr-viz-tip-row { display: flex; align-items: center; gap: 0.45rem; }
.sr-viz-tip-row b { font-variant-numeric: tabular-nums; }
.sr-viz-tip-key { width: 12px; height: 3px; border-radius: 2px; }
.sr-viz-tip-row span:last-child { color: var(--sr-fg-secondary); }
.sr-viz-table { margin-top: var(--sr-space-2); font-size: var(--sr-text-sm); }
.sr-viz-table summary { width: fit-content; color: var(--sr-fg-muted); cursor: pointer; }
.sr-viz-table table { margin-top: var(--sr-space-2); }

/* Barre segmentée haute : une part par statut, 2 px d'air, coins de 4 px, part en % à l'intérieur */
.sr-viz-segbar { display: flex; gap: 2px; height: 28px; }
.sr-viz-seg { position: relative; display: flex; align-items: center; min-width: 4px; padding-inline: 0.5rem; border-radius: 4px; color: #fff; font-size: var(--sr-text-xs); font-weight: 700; outline: none; }
.sr-viz-seg.is-slot-1 { background: var(--viz-1); }
.sr-viz-seg.is-slot-2 { background: var(--viz-2); }
.sr-viz-seg.is-slot-3 { background: var(--viz-3); }
.sr-viz-seg.is-slot-4 { background: var(--viz-4); color: #0b0b0b; }
:root[data-theme="dark"] .sr-viz-seg.is-slot-4 { color: #fff; }
.sr-viz-seg:hover, .sr-viz-seg:focus-visible { filter: brightness(1.08); box-shadow: 0 0 0 2px var(--sr-panel), 0 0 0 4px var(--sr-focus-ring); }

/* Infobulle générique (parts de barre, badges) : même rendu que celle des boutons icônes */
.sr-viz-seg[data-tip]::after, .sr-badges li[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    z-index: 1040;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translate(-50%, 2px);
    padding: 0.25rem 0.5rem;
    border-radius: var(--sr-radius-sm);
    background: var(--sr-ink-900, #0b1120);
    color: #fff;
    font-size: var(--sr-text-xs);
    font-weight: 500;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--sr-duration-quick) var(--sr-ease-out), transform var(--sr-duration-quick) var(--sr-ease-out);
}
.sr-viz-seg[data-tip]:hover::after, .sr-viz-seg[data-tip]:focus-visible::after,
.sr-badges li[data-tip]:hover::after, .sr-badges li[data-tip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
:root[data-theme="dark"] .sr-viz-seg[data-tip]::after, :root[data-theme="dark"] .sr-badges li[data-tip]::after { background: #e8edf7; color: #0b1120; }
@media (prefers-reduced-motion: reduce) { .sr-dash-tile, .sr-viz-bar, .sr-dash-tile-go { transition: none; } }

/* Fil d'Ariane : niveaux intermédiaires cliquables, tronqués proprement */
.sr-crumb-link { max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--sr-fg-secondary); font-size: var(--sr-text-sm); text-decoration: none; }
a.sr-crumb-link:hover { color: var(--sr-accent); text-decoration: underline; }
.sr-crumb-link.is-static { color: var(--sr-fg-muted); }
.sr-crumbs .sr-crumb-page { max-width: 18rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Logo de l'organisation dans la puce de l'espace : carré arrondi, image entière, fond neutre */
img.sr-ws-avatar.is-logo { object-fit: contain; background: #fff; padding: 2px; border: 1px solid var(--sr-line); }

img.sr-ws-avatar.is-logo { width: 1.75rem; height: 1.75rem; }

/* Graphique sans donnée sur la période : un message posé sur la zone de tracé (axes conservés) */
.sr-viz-empty { position: absolute; inset: 0 0 2.5rem 2.5rem; display: grid; place-items: center; margin: 0; font-size: var(--sr-text-sm); color: var(--sr-fg-muted); pointer-events: none; }

/* Tableau de bord sur petit écran : indicateurs sur deux colonnes, graphique lisible (défilement horizontal) */
@media (max-width: 575.98px) {
    .sr-dash-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sr-space-2); }
    .sr-dash-tile { flex-direction: column; align-items: flex-start; gap: var(--sr-space-2); padding: var(--sr-space-3); }
    .sr-dash-tile-body strong { font-size: 1.4rem; }
    .sr-dash-tile-icon { flex-basis: auto; width: 2.5rem; height: 2.5rem; }
    .sr-dash-tile-go { display: none; }
    .sr-dash-card { padding: var(--sr-space-3) var(--sr-space-4); }
    .sr-viz-chart { overflow-x: auto; overscroll-behavior-x: contain; }
    .sr-viz-chart svg { min-width: 520px; }
    .sr-viz-xlabel.is-odd { display: inline; }
}

/* Formulaire + aperçu collant à droite (création / modification de cours) */
.sr-form-with-summary { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); gap: var(--sr-space-5); align-items: start; }
.sr-form-with-summary > .sr-form { min-width: 0; }
@media (max-width: 1199.98px) { .sr-form-with-summary { grid-template-columns: minmax(0, 1fr); } .sr-form-summary { order: -1; } }
/* Même décalage que la barre d'outils de l'éditeur : sous la barre du haut ET le titre de page collant. */
.sr-form-summary { position: sticky; top: calc(var(--sr-topbar-h) + 4.75rem); max-height: calc(100vh - var(--sr-topbar-h) - 11rem); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
@media (max-width: 1199.98px) { .sr-form-summary { position: static; max-height: none; } }
.sr-form-summary-card { padding: var(--sr-space-4); background: var(--sr-panel); border: 1px solid var(--sr-line); border-radius: var(--sr-radius-lg); box-shadow: var(--sr-shadow-raised); }
.sr-form-summary-head { display: flex; align-items: center; gap: var(--sr-space-3); margin-bottom: var(--sr-space-3); }
.sr-form-summary-head p { margin: 0; font-size: var(--sr-text-xs); color: var(--sr-fg-muted); }
.sr-form-summary-heading { margin: 0; font-size: 1rem; font-weight: 700; }
.sr-form-summary-icon { display: grid; place-items: center; flex: 0 0 2.25rem; height: 2.25rem; border-radius: var(--sr-radius-md); color: var(--sr-accent); background: var(--sr-accent-wash); }
.sr-form-summary-hero { padding: var(--sr-space-3); margin-bottom: var(--sr-space-3); border-radius: var(--sr-radius-md); background: linear-gradient(120deg, var(--sr-accent-wash), var(--sr-sunken) 85%); }
.sr-form-summary-eyebrow { display: block; font-size: var(--sr-text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sr-accent); }
.sr-form-summary-eyebrow:empty, .sr-form-summary-eyebrow.is-empty { display: none; }
.sr-form-summary-title { display: block; margin: 0.15rem 0 var(--sr-space-2); font-size: 1.05rem; line-height: 1.3; overflow-wrap: anywhere; }
.sr-form-summary-title.is-empty { color: var(--sr-fg-muted); font-style: italic; font-weight: 600; }
.sr-form-summary-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.sr-form-summary-progress { margin-bottom: var(--sr-space-2); }
.sr-form-summary-progress-head { display: flex; justify-content: space-between; font-size: var(--sr-text-sm); color: var(--sr-fg-secondary); }
.sr-form-summary-progress-head strong { color: var(--sr-fg); font-variant-numeric: tabular-nums; }
.sr-form-summary-section { margin: var(--sr-space-3) 0 var(--sr-space-2); padding-top: var(--sr-space-3); border-top: 1px solid var(--sr-line); font-size: var(--sr-text-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sr-fg-muted); }
.sr-form-summary-list { margin: 0; }
.sr-form-summary-list > div { display: flex; justify-content: space-between; gap: var(--sr-space-3); padding: 0.3rem 0; font-size: var(--sr-text-sm); }
.sr-form-summary-list dt { flex: 0 0 auto; font-weight: 500; color: var(--sr-fg-secondary); }
.sr-form-summary-list dt i { width: 1.25rem; text-align: center; color: var(--sr-fg-muted); }
.sr-form-summary-list dd { margin: 0; min-width: 0; font-weight: 600; text-align: end; overflow-wrap: anywhere; }
.sr-form-summary-list dd.is-empty { color: var(--sr-fg-muted); font-weight: 400; font-style: italic; }
.sr-form-summary-checks { list-style: none; margin: 0; padding: 0; font-size: var(--sr-text-sm); }
.sr-form-summary-checks li { display: flex; align-items: baseline; gap: 0.5rem; padding: 0.2rem 0; color: var(--sr-fg-muted); }
.sr-form-summary-checks li > i { width: 1rem; text-align: center; }
.sr-form-summary-checks li > i::before { content: "\f111"; font-weight: 400; }
.sr-form-summary-checks li.is-on { color: var(--sr-fg); }
.sr-form-summary-checks li.is-on > i { color: var(--sr-success); }
.sr-form-summary-checks li.is-on > i::before { content: "\f058"; font-weight: 900; }
.sr-form-summary-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.sr-form-summary-chip { padding: 0.15rem 0.55rem; border-radius: 999px; font-size: var(--sr-text-xs); font-weight: 600; color: var(--sr-accent); background: var(--sr-accent-wash); }
.sr-form-summary-muted { font-size: var(--sr-text-sm); font-style: italic; color: var(--sr-fg-muted); }

/* Accueil : analyses (ex-page /Reporting) fondues dans le tableau de bord, même grille */
.sr-dash-filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sr-space-2); margin: calc(-1 * var(--sr-space-2)) 0 var(--sr-space-4); padding: var(--sr-space-2) var(--sr-space-3); background: var(--sr-panel); border: 1px solid var(--sr-line); border-radius: var(--sr-radius-lg); }
.sr-dash-filterbar-label { margin-inline-end: var(--sr-space-1); font-size: var(--sr-text-sm); font-weight: 600; color: var(--sr-fg-secondary); white-space: nowrap; }
.sr-dash-filterbar-label i { color: var(--sr-fg-muted); }
.sr-dash-filterbar .form-control { width: auto; }
.sr-dash-filterbar .form-select { width: auto; min-width: 13rem; margin-inline-start: var(--sr-space-2); }
.sr-dash-filterbar-sep { color: var(--sr-fg-muted); }
.sr-dash-tiles.is-quad { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 991.98px) { .sr-dash-tiles.is-quad { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sr-dash-pair { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--sr-space-4); align-items: start; }
.sr-dash-pair > .sr-dash-card { min-width: 0; }
.sr-dash-full { grid-column: 1 / -1; display: flex; flex-direction: column; gap: var(--sr-space-4); min-width: 0; }
.sr-dash-grid [id^="reports-"] { scroll-margin-top: calc(var(--sr-topbar-h) + 5rem); }
.sr-reports-empty { display: flex; align-items: center; gap: var(--sr-space-2); margin: 0; padding: var(--sr-space-4) 0; font-size: var(--sr-text-sm); color: var(--sr-fg-muted); }
.sr-reports-more { margin-top: var(--sr-space-3); }
.sr-reports-more > summary { width: fit-content; font-size: var(--sr-text-sm); font-weight: 600; color: var(--sr-accent); cursor: pointer; }
.sr-reports-more > summary + * { margin-top: var(--sr-space-3); }
.sr-rank.is-success .sr-rank-track > span { background: var(--viz-3); }
.sr-rank.is-info .sr-rank-track > span { background: var(--viz-1); }
.sr-rank.is-warning .sr-rank-track > span { background: var(--viz-4); }
.sr-rank.is-accent .sr-rank-track > span { background: var(--sr-accent); }
.sr-rank.is-neutral .sr-rank-track > span { background: var(--viz-2); }
.sr-reports-table { margin: 0 calc(-1 * var(--sr-space-2)); }
.sr-reports-table th { font-size: var(--sr-text-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--sr-fg-muted); white-space: nowrap; }
.sr-reports-table td { font-size: var(--sr-text-sm); }
.sr-reports-col-progress { width: 26%; min-width: 9rem; }
.sr-reports-person { display: inline-flex; align-items: center; gap: var(--sr-space-2); font-weight: 600; }
.sr-reports-person .sr-avatar { width: 1.75rem; height: 1.75rem; font-size: 0.65rem; }
.sr-reports-progress { display: flex; align-items: center; gap: var(--sr-space-2); }
.sr-reports-progress .sr-dash-progress { flex: 1 1 auto; margin: 0; }
.sr-reports-progress b { flex: 0 0 3rem; text-align: end; font-variant-numeric: tabular-nums; }
.sr-dash-progress.is-danger { background: var(--sr-danger-subtle); }
.sr-dash-progress.is-danger > span { background: var(--sr-danger); }
.sr-reports-status { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.1rem 0.5rem; border-radius: 999px; font-size: var(--sr-text-xs); font-weight: 600; white-space: nowrap; }
.sr-reports-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.sr-reports-status.is-success { color: var(--sr-success); background: var(--sr-success-subtle); }
.sr-reports-status.is-danger { color: var(--sr-danger); background: var(--sr-danger-subtle); }
.sr-reports-status.is-info { color: var(--sr-info); background: var(--sr-info-subtle); }
.sr-reports-status.is-neutral { color: var(--sr-neutral); background: var(--sr-neutral-subtle); }

/* Labs : consignes + rendu à gauche, état et historique à droite (apprenant comme correcteur) */
.sr-lab-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: var(--sr-space-4); align-items: start; }
.sr-lab-main, .sr-lab-side { display: flex; flex-direction: column; gap: var(--sr-space-4); min-width: 0; }
@media (max-width: 1199.98px) { .sr-lab-layout { grid-template-columns: minmax(0, 1fr); } }
.sr-lab-submission + .sr-lab-submission { margin-top: var(--sr-space-3); padding-top: var(--sr-space-3); border-top: 1px solid var(--sr-line); }
.sr-lab-submission-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sr-space-2); margin-bottom: var(--sr-space-2); }
.sr-lab-submission-head small { color: var(--sr-fg-muted); font-size: var(--sr-text-xs); }
.sr-lab-status { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.2rem 0.6rem; border-radius: 999px; font-size: var(--sr-text-sm); font-weight: 600; }
.sr-lab-status.is-success { color: var(--sr-success); background: var(--sr-success-subtle); }
.sr-lab-status.is-warning { color: var(--sr-warning); background: var(--sr-warning-subtle); }
.sr-lab-status.is-info { color: var(--sr-info); background: var(--sr-info-subtle); }
.sr-lab-answer { padding: var(--sr-space-3); border-radius: var(--sr-radius-md); background: var(--sr-sunken); font-size: var(--sr-text-sm); }
.sr-lab-attachments { display: flex; flex-direction: column; gap: 0.25rem; margin-top: var(--sr-space-2); font-size: var(--sr-text-sm); }
.sr-lab-attachments a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-lab-feedback { margin-top: var(--sr-space-3); padding: var(--sr-space-2) var(--sr-space-3); border-inline-start: 3px solid currentColor; border-radius: var(--sr-radius-sm); background: var(--sr-sunken); font-size: var(--sr-text-sm); }
.sr-lab-feedback.is-success { color: var(--sr-success); }
.sr-lab-feedback.is-warning { color: var(--sr-warning); }
.sr-lab-feedback strong { display: block; font-size: var(--sr-text-xs); }
.sr-lab-feedback p { margin: 0.25rem 0 0; color: var(--sr-fg); white-space: pre-line; }
.sr-lab-instructions-mini { max-height: 22rem; overflow-y: auto; font-size: var(--sr-text-sm); }

/* Assistant IA : bulle flottante en bas à droite + panneau de discussion */
.sr-assist { position: fixed; right: var(--sr-space-5); bottom: var(--sr-space-5); z-index: 1030; display: flex; flex-direction: column; align-items: flex-end; gap: var(--sr-space-3); }
body:has(.sr-form-actions) .sr-assist { bottom: 5.5rem; }
.sr-assist-fab { display: grid; place-items: center; width: 56px; height: 56px; border: 0; border-radius: 50%; color: #fff; font-size: 1.3rem; background: linear-gradient(135deg, var(--sr-brand-500, #1f62d6), var(--sr-brand-800, #0b2f78)); box-shadow: 0 10px 28px -8px rgba(11, 47, 120, 0.55); transition: transform var(--sr-duration-quick) var(--sr-ease-out); }
.sr-assist-fab:hover { transform: translateY(-2px) scale(1.04); }
.sr-assist-fab:focus-visible { outline: 3px solid var(--sr-focus-ring); outline-offset: 3px; }
.sr-assist.is-open .sr-assist-fab i::before { content: "\f00d"; }
.sr-assist-panel { order: -1; display: flex; flex-direction: column; width: min(400px, calc(100vw - 2rem)); height: min(600px, calc(100vh - 9rem)); background: var(--sr-panel); border: 1px solid var(--sr-line); border-radius: var(--sr-radius-lg); box-shadow: var(--sr-shadow-raised); overflow: hidden; }
.sr-assist-panel[hidden] { display: none; }
.sr-assist-head { display: flex; align-items: center; gap: var(--sr-space-2); padding: var(--sr-space-3) var(--sr-space-3) var(--sr-space-3) var(--sr-space-4); color: #fff; background: linear-gradient(120deg, var(--sr-brand-600, #1049b8), var(--sr-brand-800, #0b2f78)); }
.sr-assist-head .btn-icon { color: #fff; }
.sr-assist-head .btn-icon:hover { background: rgba(255, 255, 255, 0.15); color: #fff; }
.sr-assist-avatar { display: grid; place-items: center; flex: 0 0 2.25rem; height: 2.25rem; border-radius: 50%; background: rgba(255, 255, 255, 0.18); }
.sr-assist-titles { flex: 1 1 auto; min-width: 0; }
.sr-assist-titles h2 { margin: 0; font-size: 1rem; font-weight: 700; color: #fff; }
.sr-assist-titles p { margin: 0; font-size: var(--sr-text-xs); opacity: 0.85; }
.sr-assist-log { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: var(--sr-space-4); display: flex; flex-direction: column; gap: var(--sr-space-3); background: var(--sr-sunken); }
.sr-assist-welcome p { margin: 0 0 var(--sr-space-3); font-size: var(--sr-text-sm); color: var(--sr-fg-secondary); }
.sr-assist-suggestions { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sr-space-2); }
.sr-assist-chip { padding: 0.45rem 0.8rem; border: 1px solid var(--sr-line-strong); border-radius: 999px; background: var(--sr-panel); color: var(--sr-fg); font-size: var(--sr-text-sm); text-align: start; }
.sr-assist-chip:hover { border-color: var(--sr-accent); color: var(--sr-accent); }
.sr-assist-msg { max-width: 88%; padding: 0.6rem 0.85rem; border-radius: 16px; font-size: var(--sr-text-sm); line-height: 1.5; overflow-wrap: anywhere; }
.sr-assist-msg.is-user { align-self: flex-end; color: #fff; background: var(--sr-accent); border-bottom-right-radius: 4px; white-space: pre-wrap; }
.sr-assist-msg.is-assistant { align-self: flex-start; background: var(--sr-panel); border: 1px solid var(--sr-line); border-bottom-left-radius: 4px; }
.sr-assist-msg.is-assistant p { margin: 0 0 0.45rem; }
.sr-assist-msg.is-assistant p:last-child, .sr-assist-msg.is-assistant ul:last-child, .sr-assist-msg.is-assistant ol:last-child { margin-bottom: 0; }
.sr-assist-msg.is-assistant ul, .sr-assist-msg.is-assistant ol { margin: 0 0 0.45rem; padding-inline-start: 1.2rem; }
.sr-assist-msg.is-assistant pre { margin: 0 0 0.45rem; padding: 0.5rem; border-radius: var(--sr-radius-sm); background: var(--sr-sunken); font-size: var(--sr-text-xs); white-space: pre-wrap; }
.sr-assist-msg.is-pending { color: var(--sr-fg-muted); font-style: italic; }
.sr-assist-msg.is-error { color: var(--sr-danger); border-color: color-mix(in srgb, var(--sr-danger) 35%, var(--sr-line)); }
.sr-assist-form { display: flex; align-items: flex-end; gap: var(--sr-space-2); padding: var(--sr-space-3); border-top: 1px solid var(--sr-line); background: var(--sr-panel); }
.sr-assist-form textarea { flex: 1 1 auto; min-height: 42px; max-height: 140px; resize: none; padding: 0.55rem 0.75rem; border: 1px solid var(--sr-line-field, var(--sr-line)); border-radius: var(--sr-radius-md); background: var(--sr-panel); color: var(--sr-fg); font: inherit; font-size: var(--sr-text-sm); }
.sr-assist-form textarea:focus { outline: none; border-color: var(--sr-accent); box-shadow: var(--sr-shadow-focus); }
.sr-assist-send { flex: 0 0 auto; width: 42px; height: 42px; padding: 0; border-radius: var(--sr-radius-md); }
.sr-assist-note { margin: 0; padding: 0 var(--sr-space-3) var(--sr-space-2); font-size: 0.7rem; color: var(--sr-fg-muted); background: var(--sr-panel); text-align: center; }
@media (max-width: 575.98px) {
    .sr-assist { right: var(--sr-space-3); bottom: var(--sr-space-3); }
    .sr-assist-panel { width: calc(100vw - 1.5rem); height: calc(100vh - 7rem); }
}
@media (prefers-reduced-motion: reduce) { .sr-assist-fab { transition: none; } }

/* Mode d'accès des fichiers de cours (arbre du cours, formulaire d'envoi) */
.sr-access-badge { display: inline-flex; align-items: center; gap: 0.3rem; margin-inline-start: 0.35rem; padding: 0.1rem 0.5rem; border-radius: 999px; font-size: var(--sr-text-xs); font-weight: 600; color: var(--sr-fg-secondary); background: var(--sr-neutral-subtle); position: relative; }
.sr-access-badge.is-protected { color: var(--sr-success); background: var(--sr-success-subtle); }
.sr-access-choice legend { font-size: inherit; font-weight: 600; }
.sr-access-choice .form-check-label i { width: 1.1rem; color: var(--sr-fg-muted); }

/* Lecture dans la plateforme (Views/Lessons/Read) */
.sr-reader-notice { display: flex; align-items: center; gap: var(--sr-space-2); margin: 0 0 var(--sr-space-3); padding: var(--sr-space-2) var(--sr-space-3); border-radius: var(--sr-radius-md); font-size: var(--sr-text-sm); color: var(--sr-success); background: var(--sr-success-subtle); }
.sr-reader-notice.is-author { color: var(--sr-info); background: var(--sr-info-subtle); }
.sr-reader { position: relative; }
.sr-reader-content { transition: filter var(--sr-duration-quick) var(--sr-ease-out); }
[data-protected-reader] .sr-reader-content { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
[data-protected-reader] img { -webkit-user-drag: none; pointer-events: none; }
.sr-reader.is-obscured .sr-reader-content { filter: blur(28px) grayscale(1); }
.sr-reader-shield { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 20vh; gap: var(--sr-space-2); color: var(--sr-fg-secondary); text-align: center; }
.sr-reader-shield[hidden] { display: none; }
.sr-reader-shield i { font-size: 2rem; }
.sr-reader-pages { display: flex; flex-direction: column; align-items: center; gap: var(--sr-space-4); }
.sr-reader-page { width: min(100%, 980px); margin: 0; }
.sr-reader-page img { display: block; width: 100%; height: auto; min-height: 200px; border: 1px solid var(--sr-line); border-radius: var(--sr-radius-md); background: #fff; box-shadow: var(--sr-shadow-raised); }
.sr-reader-page figcaption { margin-top: var(--sr-space-1); text-align: center; font-size: var(--sr-text-xs); color: var(--sr-fg-muted); }
.sr-reader-empty { padding: var(--sr-space-6) 0; text-align: center; color: var(--sr-fg-muted); }
.sr-reader-media, .sr-reader-frame { position: relative; overflow: hidden; border-radius: var(--sr-radius-lg); border: 1px solid var(--sr-line); background: #000; }
.sr-reader-media video { display: block; width: 100%; max-height: 75vh; }
.sr-reader-frame { background: #fff; }
.sr-reader-frame iframe { display: block; width: 100%; height: 75vh; border: 0; }
@media print {
    /* Contenu protégé : rien à imprimer, seul le message (traduit) du bouclier apparaît. */
    [data-protected-reader] .sr-reader-content { display: none !important; }
    [data-protected-reader] .sr-reader-shield { position: static; display: flex !important; padding-top: 2rem; }
}

/* Listes paginées du tableau de bord (data-collapse + site.js) */
[data-collapse] > [hidden] { display: none !important; }
.sr-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sr-space-2); margin-top: var(--sr-space-3); }
.sr-pager[hidden], .sr-pager-nav[hidden] { display: none !important; }
.sr-pager-nav { display: inline-flex; align-items: center; gap: var(--sr-space-2); }
.sr-pager-status { min-width: 3.5rem; text-align: center; font-size: var(--sr-text-sm); font-variant-numeric: tabular-nums; color: var(--sr-fg-secondary); }
.sr-pager-btn { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border: 1px solid var(--sr-line); border-radius: 999px; background: var(--sr-panel); color: var(--sr-fg); cursor: pointer; }
.sr-pager-btn:hover:not(:disabled) { background: var(--sr-accent-subtle); }
.sr-pager-btn:disabled { opacity: .4; cursor: default; }
[dir="rtl"] .sr-pager-btn i { transform: scaleX(-1); }
.sr-pager-all { margin-inline-start: auto; padding: .3rem .8rem; border: 0; border-radius: 999px; background: transparent; font-size: var(--sr-text-sm); font-weight: 600; color: var(--sr-accent); cursor: pointer; }
.sr-pager-all:hover { background: var(--sr-accent-subtle); }
.sr-dash-tiles + .sr-pager { margin: calc(-1 * var(--sr-space-2)) 0 var(--sr-space-4); }

/* ---- IA : génération et correction assistée (formateurs) ---- */
.sr-ai-text { white-space: pre-wrap; }
.sr-ai-questions { padding-left: 1.25rem; }
.sr-ai-suggested { outline: 2px solid var(--sr-primary, #0d3f9c); outline-offset: 2px; }

/* ---- Cloche de notifications (barre du haut) ---- */
.sr-bell { position: relative; }
.sr-bell-btn { position: relative; }
.sr-bell-badge {
    position: absolute;
    inset-block-start: -0.2rem;
    inset-inline-end: -0.2rem;
    min-width: 1.1rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    background: var(--bs-danger, #dc3545);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.1rem;
    text-align: center;
}
.sr-bell-menu { min-width: min(24rem, 92vw); max-height: 70vh; overflow-y: auto; }
.sr-notif-unread { background: var(--bs-warning-bg-subtle, rgba(255, 193, 7, 0.08)); }

/* ---- Décompte d'une épreuve : fixe sous la barre du haut, l'échéance est celle du serveur ---- */
.sr-exam-timer {
    position: sticky;
    top: var(--sr-topbar-h, 3.5rem);
    z-index: 1020;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-block-end: 1rem;
    padding: 0.6rem 1rem;
    border-radius: 0.5rem;
    background: var(--bs-secondary-bg, #e9ecef);
    color: var(--bs-body-color, #212529);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.sr-exam-timer-value { font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.sr-exam-timer.is-low { background: var(--bs-danger-bg-subtle, #f8d7da); color: var(--bs-danger-text-emphasis, #58151c); }
.sr-exam-timer-note { margin-inline-start: auto; font-weight: 600; }