/* ═══════════════════════════════════════════════════════════════════════════
   als-ui.css — Socle d'interface AlsNime
   ---------------------------------------------------------------------------
   Source de vérité unique pour les couleurs, la géométrie et les composants
   partagés par les pages utilisateur et administration.

   Chargé globalement dans default.php, juste après home.css.

   Règle : aucune couleur de thème n'est modifiée. Les valeurs ci-dessous sont
   celles déjà présentes dans home.css et dans les CSS de pages existants,
   simplement centralisées. Les seuls ajouts sont les couleurs sémantiques
   (succès / alerte / erreur / info), qui n'existaient nulle part et qui étaient
   jusqu'ici réinventées page par page.

   Structure du fichier :
     1. Tokens
     2. Alias de rétrocompatibilité (--up-*, --aa-*, --ar-*, --ac-*, --ua-*, --tv-*)
     3. Layout de page
     4. Cartes et sections
     5. KPI
     6. Formulaires et barres d'outils
     7. Tableaux
     8. Badges, puces et pastilles
     9. Boutons et pagination
    10. États vides, squelettes de chargement
    11. Modales
    12. Onglets
    13. Divers (code, séparateurs, retour en haut)
    14. Accessibilité et responsive
   ═══════════════════════════════════════════════════════════════════════════ */


/* ───────────────────────────────────────────────────────────────────────────
   1. TOKENS
   ─────────────────────────────────────────────────────────────────────────── */
:root {
    /* — Surfaces —————————————————————————————————————————————————————————— */
    --als-bg-page:        #0b0c2a;                 /* fond global (home.css)   */
    --als-bg-deep:        rgba(14, 16, 50, 1);     /* fond de zone             */
    --als-surface:        rgba(22, 26, 72, 1);     /* carte                    */
    --als-surface-raised: rgba(26, 30, 86, 1);     /* en-tête de carte         */
    --als-surface-sunken: rgba(18, 22, 62, 1);     /* corps interne            */
    --als-surface-inset:  rgba(8, 10, 35, 0.95);   /* champ de saisie          */
    --als-surface-code:   rgba(6, 8, 28, 0.98);    /* bloc <pre>               */
    --als-surface-hover:  rgba(255, 255, 255, 0.06);
    --als-surface-stripe: rgba(255, 255, 255, 0.03);

    /* — Bordures ——————————————————————————————————————————————————————————— */
    --als-border:         rgba(140, 148, 255, 0.45);
    --als-border-soft:    rgba(140, 148, 255, 0.30);
    --als-border-input:   rgba(160, 168, 255, 0.55);
    --als-border-table:   rgba(255, 255, 255, 0.14);
    --als-border-divider: rgba(255, 255, 255, 0.16);

    /* — Texte — ratios WCAG AA vérifiés sur --als-surface ——————————————————— */
    --als-text:           #eceeff;   /* ≈ 7.8:1 */
    --als-text-heading:   #ffffff;   /* ≈ 12:1  */
    --als-text-muted:     #c8d0ff;   /* ≈ 5.1:1 */
    --als-text-input:     #f8f9ff;   /* ≈ 13:1  */
    --als-text-ph:        #a8b2ff;   /* ≈ 4.5:1 */
    --als-text-link:      #b0bfff;
    --als-text-link-hover:#d0d8ff;
    --als-text-mono:      #d8deff;

    /* — Accents —————————————————————————————————————————————————————————————
       brand   : rouge signature du site, déjà utilisé dans home.css
       accent  : indigo des écrans d'administration, déjà utilisé partout      */
    --als-brand:          #e53637;
    --als-brand-hover:    #ca2027;
    --als-accent:         #818cf8;
    --als-accent-hover:   #6366f1;
    --als-discord:        #5865f2;

    /* — Couleurs sémantiques (ajout) ——————————————————————————————————————— */
    --als-ok:             #34d399;
    --als-ok-bg:          rgba(52, 211, 153, 0.14);
    --als-ok-border:      rgba(52, 211, 153, 0.40);

    --als-warn:           #fbbf24;
    --als-warn-bg:        rgba(251, 191, 36, 0.14);
    --als-warn-border:    rgba(251, 191, 36, 0.40);

    --als-err:            #f87171;
    --als-err-bg:         rgba(248, 113, 113, 0.14);
    --als-err-border:     rgba(248, 113, 113, 0.40);

    --als-info:           #7fc8ff;
    --als-info-bg:        rgba(127, 200, 255, 0.14);
    --als-info-border:    rgba(127, 200, 255, 0.40);

    --als-neutral:        #c8d0ff;
    --als-neutral-bg:     rgba(140, 148, 255, 0.16);
    --als-neutral-border: rgba(140, 148, 255, 0.38);

    --als-magenta:        #f472b6;   /* série de graphiques : erreurs BDD */

    /* — Statuts de visionnage ————————————————————————————————————————————————
       Reprise des 4 couleurs de alslist.css, qui étaient les seules à porter
       cette sémantique. Elles servent désormais à MyAlsList, MySchedule et au
       profil, pour qu'un anime « en cours » ait la même couleur partout.      */
    --als-watching:       #22c55e;
    --als-completed:      #3b82f6;
    --als-planned:        #38bdf8;
    --als-dropped:        #ef4444;

    /* — Géométrie ——————————————————————————————————————————————————————————— */
    --als-radius:         14px;
    --als-radius-sm:      12px;
    --als-radius-xs:      8px;
    --als-radius-pill:    999px;

    --als-shadow:         0 6px 20px rgba(0, 0, 0, 0.65);
    --als-shadow-sm:      0 3px 10px rgba(0, 0, 0, 0.45);

    --als-gap:            1rem;
    --als-pad-card:       1.25rem 1.5rem;

    /* — Typographie ————————————————————————————————————————————————————————— */
    --als-font:           "Mulish", sans-serif;
    --als-font-mono:      ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

    /* — Durées ——————————————————————————————————————————————————————————————— */
    --als-t-fast:         .15s;
    --als-t-base:         .25s;
}


/* ───────────────────────────────────────────────────────────────────────────
   2. ALIAS DE RÉTROCOMPATIBILITÉ
   ---------------------------------------------------------------------------
   Les CSS de pages historiques déclaraient chacun leur propre jeu de variables
   avec des valeurs identiques. On les redirige ici vers le socle : les pages
   non encore migrées continuent de fonctionner sans modification, et une
   nuance changée dans la section 1 se propage partout.
   ─────────────────────────────────────────────────────────────────────────── */
:root {
    /* /user/profil — user-profil.css */
    --up-bg-card:         var(--als-surface);
    --up-bg-card-header:  var(--als-surface-raised);
    --up-bg-input:        var(--als-surface-inset);
    --up-border:          var(--als-border);
    --up-border-input:    var(--als-border-input);
    --up-border-table:    var(--als-border-table);
    --up-border-divider:  var(--als-border-divider);
    --up-text-base:       var(--als-text);
    --up-text-heading:    var(--als-text-heading);
    --up-text-muted:      var(--als-text-muted);
    --up-text-input:      var(--als-text-input);
    --up-text-ph:         var(--als-text-ph);
    --up-text-link:       var(--als-text-link);
    --up-text-link-hover: var(--als-text-link-hover);
    --up-radius-card:     var(--als-radius);
    --up-radius-pill:     var(--als-radius-pill);
    --up-shadow-card:     var(--als-shadow);
    --up-shadow-card-sm:  var(--als-shadow-sm);
    --up-discord-color:   var(--als-discord);

    /* /admin/analytic — analytic.css */
    --aa-bg-page:         var(--als-bg-deep);
    --aa-bg-card:         var(--als-surface);
    --aa-bg-card-header:  var(--als-surface-raised);
    --aa-bg-input:        var(--als-surface-inset);
    --aa-border:          var(--als-border);
    --aa-border-input:    var(--als-border-input);
    --aa-border-table:    var(--als-border-table);
    --aa-border-divider:  var(--als-border-divider);
    --aa-text-base:       var(--als-text);
    --aa-text-heading:    var(--als-text-heading);
    --aa-text-muted:      var(--als-text-muted);
    --aa-text-input:      var(--als-text-input);
    --aa-text-ph:         var(--als-text-ph);
    --aa-accent:          var(--als-accent);
    --aa-accent-hover:    var(--als-accent-hover);
    --aa-radius-card:     var(--als-radius);
    --aa-radius-pill:     var(--als-radius-pill);
    --aa-shadow-card:     var(--als-shadow);
    --lg-error:           var(--als-err);
    --lg-security:        var(--als-warn);
    --lg-bdd:             var(--als-magenta);
    --lg-ok:              var(--als-ok);

    /* /admin/request — admin-request.css */
    --ar-bg-card:         var(--als-surface);
    --ar-bg-item:         var(--als-surface);
    --ar-bg-item-header:  var(--als-surface-raised);
    --ar-bg-item-body:    var(--als-surface-sunken);
    --ar-bg-input:        var(--als-surface-inset);
    --ar-bg-pre:          var(--als-surface-code);
    --ar-border:          var(--als-border);
    --ar-border-input:    var(--als-border-input);
    --ar-border-table:    var(--als-border-table);
    --ar-border-divider:  var(--als-border-divider);
    --ar-border-item:     var(--als-border-soft);
    --ar-text-base:       var(--als-text);
    --ar-text-heading:    var(--als-text-heading);
    --ar-text-muted:      var(--als-text-muted);
    --ar-text-input:      var(--als-text-input);
    --ar-text-ph:         var(--als-text-ph);
    --ar-text-link:       var(--als-text-link);
    --ar-text-key:        var(--als-text-muted);
    --ar-accent:          var(--als-accent);
    --ar-radius-card:     var(--als-radius);
    --ar-radius-item:     var(--als-radius-sm);
    --ar-radius-pill:     var(--als-radius-pill);
    --ar-shadow-card:     var(--als-shadow);
    --ar-shadow-item:     var(--als-shadow-sm);

    /* /admin/account — admin-account.css */
    --ac-bg-card:         var(--als-surface);
    --ac-bg-card-header:  var(--als-surface-raised);
    --ac-bg-input:        var(--als-surface-inset);
    --ac-border:          var(--als-border);
    --ac-border-input:    var(--als-border-input);
    --ac-border-table:    var(--als-border-table);
    --ac-border-divider:  var(--als-border-divider);
    --ac-text-base:       var(--als-text);
    --ac-text-heading:    var(--als-text-heading);
    --ac-text-muted:      var(--als-text-muted);
    --ac-text-input:      var(--als-text-input);
    --ac-text-ph:         var(--als-text-ph);
    --ac-accent:          var(--als-accent);
    --ac-radius-card:     var(--als-radius);
    --ac-radius-pill:     var(--als-radius-pill);
    --ac-shadow-card:     var(--als-shadow);

    /* /admin/user_activity — admin-user_activity.css */
    --ua-bg-card:         var(--als-surface);
    --ua-bg-card-header:  var(--als-surface-raised);
    --ua-bg-input:        var(--als-surface-inset);
    --ua-border:          var(--als-border);
    --ua-border-table:    var(--als-border-table);
    --ua-border-divider:  var(--als-border-divider);
    --ua-text-base:       var(--als-text);
    --ua-text-heading:    var(--als-text-heading);
    --ua-text-muted:      var(--als-text-muted);
    --ua-text-mono:       var(--als-text-mono);
    --ua-text-warn:       var(--als-warn);
    --ua-text-link:       var(--als-text-link);
    --ua-accent:          var(--als-accent);
    --ua-radius-card:     var(--als-radius);
    --ua-radius-pill:     var(--als-radius-pill);
    --ua-shadow-card:     var(--als-shadow);

    /* /user/MyAlsList — alslist.css
       Cette page utilisait une palette entièrement distincte (fond #0d0d18,
       accent violet #7c6af7), d'où son aspect « autre site ». On la ramène
       sur le thème. Les 4 couleurs de statut, elles, sont conservées : elles
       portent une information, pas une décoration. */
    --clr-bg:             var(--als-bg-page);
    --clr-surface:        var(--als-surface);
    --clr-surface-2:      var(--als-surface-raised);
    --clr-border:         var(--als-border-soft);
    --clr-text:           var(--als-text);
    --clr-muted:          var(--als-text-muted);
    --clr-accent:         var(--als-accent);
    --clr-watching:       var(--als-watching);
    --clr-completed:      var(--als-completed);
    --clr-planned:        var(--als-planned);
    --clr-dropped:        var(--als-dropped);
    --radius-card:        var(--als-radius-sm);
    --shadow-card:        var(--als-shadow);
    --transition:         var(--als-t-base) ease;

    /* /admin/temporary_verif — temporary_verif.css
       Cette page utilisait des surfaces plus transparentes et un texte plus
       froid. On l'aligne sur le socle : c'est le but de l'harmonisation. */
    --tv-bg-card:         var(--als-surface);
    --tv-bg-card-inner:   var(--als-surface-sunken);
    --tv-bg-input:        var(--als-surface-inset);
    --tv-border:          var(--als-border);
    --tv-border-input:    var(--als-border-input);
    --tv-border-table:    var(--als-border-table);
    --tv-text-muted:      var(--als-text-muted);
    --tv-text-base:       var(--als-text);
    --tv-text-header:     var(--als-text-muted);
    --tv-radius-card:     var(--als-radius);
    --tv-radius-pill:     var(--als-radius-pill);
    --tv-shadow-card:     var(--als-shadow);
}


/* ───────────────────────────────────────────────────────────────────────────
   3. LAYOUT DE PAGE
   ─────────────────────────────────────────────────────────────────────────── */
.als-page {
    min-height: 60vh;
    color: var(--als-text);
    padding-block: 1.5rem 3rem;
}

.als-page h1,
.als-page h2,
.als-page h3,
.als-page h4,
.als-page h5,
.als-page h6 {
    color: var(--als-text-heading);
    font-weight: 600;
}

.als-page p,
.als-page li,
.als-page label,
.als-page td,
.als-page th,
.als-page dd,
.als-page dt { color: var(--als-text); }

.als-page a { color: var(--als-text-link); }
.als-page a:hover,
.als-page a:focus-visible { color: var(--als-text-link-hover); }

.als-muted { color: var(--als-text-muted) !important; }

.als-section-title {
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--als-text-muted);
    margin: 0;
}

/* En-tête de page : titre + sous-titre à gauche, actions à droite.
   Trame commune à toutes les pages migrées. */
.als-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--als-gap);
    background: var(--als-surface);
    border: 1px solid var(--als-border);
    border-radius: var(--als-radius);
    box-shadow: var(--als-shadow);
    padding: var(--als-pad-card);
    margin-bottom: 1.25rem;
}
.als-head-title { min-width: 0; }
.als-head-title h1 { font-size: 1.5rem; margin: 0 0 .25rem; }
.als-head-sub { color: var(--als-text-muted); font-size: .9rem; margin: 0; }
.als-head-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }


/* ───────────────────────────────────────────────────────────────────────────
   4. CARTES
   ─────────────────────────────────────────────────────────────────────────── */
.als-card {
    background: var(--als-surface);
    border: 1px solid var(--als-border);
    border-radius: var(--als-radius);
    box-shadow: var(--als-shadow);
    padding: var(--als-pad-card);
    color: var(--als-text);
}
.als-card-tight { padding: .875rem 1rem; }
.als-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
    border-bottom: 1px solid var(--als-border-divider);
    padding-bottom: .75rem;
    margin-bottom: 1rem;
}
.als-card-sunken {
    background: var(--als-surface-sunken);
    border: 1px solid var(--als-border-soft);
    border-radius: var(--als-radius-sm);
    padding: .875rem 1rem;
}


/* ───────────────────────────────────────────────────────────────────────────
   5. KPI
   ---------------------------------------------------------------------------
   Bande de compteurs placée systématiquement juste sous l'en-tête de page.
   ─────────────────────────────────────────────────────────────────────────── */
.als-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
    /* start, et non stretch : une tuile au contenu long ne doit pas imposer sa
       hauteur à toute la rangée. Une tuile de KPI porte une valeur courte —
       si le contenu est une phrase, c'est qu'il faut une carte, pas un KPI. */
    align-items: start;
    gap: .75rem;
    margin-bottom: 1.25rem;
}

.als-kpi {
    background: var(--als-surface);
    border: 1px solid var(--als-border);
    border-left: 3px solid var(--als-neutral-border);
    border-radius: var(--als-radius-sm);
    box-shadow: var(--als-shadow-sm);
    padding: .8rem .95rem;
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
}
.als-kpi-label {
    font-size: .72rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--als-text-muted);
    line-height: 1.25;
}
.als-kpi-value {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--als-text-heading);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.als-kpi-hint { font-size: .72rem; color: var(--als-text-muted); }

.als-kpi-ok      { border-left-color: var(--als-ok); }
.als-kpi-warn    { border-left-color: var(--als-warn); }
.als-kpi-err     { border-left-color: var(--als-err); }
.als-kpi-info    { border-left-color: var(--als-info); }
.als-kpi-accent  { border-left-color: var(--als-accent); }
.als-kpi-brand   { border-left-color: var(--als-brand); }

.als-kpi-ok    .als-kpi-value { color: var(--als-ok); }
.als-kpi-warn  .als-kpi-value { color: var(--als-warn); }
.als-kpi-err   .als-kpi-value { color: var(--als-err); }
.als-kpi-info  .als-kpi-value { color: var(--als-info); }


/* ───────────────────────────────────────────────────────────────────────────
   6. FORMULAIRES ET BARRES D'OUTILS
   ─────────────────────────────────────────────────────────────────────────── */
.als-toolbar {
    background: var(--als-surface);
    border: 1px solid var(--als-border);
    border-radius: var(--als-radius);
    box-shadow: var(--als-shadow-sm);
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
}

.als-label {
    display: block;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .03em;
    color: var(--als-text-muted);
    margin-bottom: .3rem;
}

.als-input,
.als-page .form-control.als-input,
.als-page .form-select.als-input {
    background-color: var(--als-surface-inset);
    border: 1px solid var(--als-border-input);
    color: var(--als-text-input);
    border-radius: var(--als-radius-xs);
    font-size: .9rem;
}
.als-input::placeholder { color: var(--als-text-ph); opacity: 1; }
.als-input:focus,
.als-page .form-control.als-input:focus,
.als-page .form-select.als-input:focus {
    background-color: var(--als-surface-inset);
    border-color: var(--als-accent);
    color: var(--als-text-input);
    box-shadow: 0 0 0 .2rem rgba(129, 140, 248, .28);
}
.als-input:disabled,
.als-input[readonly] { opacity: .75; }

/* Interrupteurs Bootstrap dans le thème sombre */
.als-page .form-check-input {
    background-color: var(--als-surface-inset);
    border-color: var(--als-border-input);
}
.als-page .form-check-input:checked {
    background-color: var(--als-accent);
    border-color: var(--als-accent);
}
.als-page .form-check-input:focus {
    border-color: var(--als-accent);
    box-shadow: 0 0 0 .2rem rgba(129, 140, 248, .28);
}

/* Ligne de réglage : libellé à gauche, contrôle à droite */
.als-setting {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .8rem 0;
    border-bottom: 1px solid var(--als-border-divider);
}
.als-setting:last-child { border-bottom: 0; }
.als-setting-label { font-size: .9rem; color: var(--als-text); }


/* ───────────────────────────────────────────────────────────────────────────
   7. TABLEAUX
   ─────────────────────────────────────────────────────────────────────────── */
.als-table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--als-text);
    --bs-table-striped-bg: var(--als-surface-stripe);
    --bs-table-striped-color: var(--als-text);
    --bs-table-hover-bg: var(--als-surface-hover);
    --bs-table-hover-color: var(--als-text-heading);
    --bs-table-border-color: var(--als-border-table);
    color: var(--als-text);
    margin-bottom: 0;
}
.als-table > :not(caption) > * > * {
    background-color: transparent;
    border-bottom-color: var(--als-border-table);
    padding: .55rem .7rem;
}
.als-table thead th {
    color: var(--als-text-muted);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
    border-bottom: 1px solid var(--als-border-table);
}
.als-table td { vertical-align: middle; }
.als-table-fixed { table-layout: fixed; }

.als-cell-strong { color: var(--als-text-heading); font-weight: 600; }
.als-cell-sub    { font-size: .78rem; color: var(--als-text-muted); }
.als-cell-num    { font-variant-numeric: tabular-nums; text-align: right; }
.als-cell-clip {
    max-width: 22rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Enveloppe de tableau défilable, sans double bordure */
.als-table-wrap { overflow-x: auto; }


/* ───────────────────────────────────────────────────────────────────────────
   8. BADGES, PUCES, PASTILLES
   ─────────────────────────────────────────────────────────────────────────── */
.als-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .2rem .6rem;
    border-radius: var(--als-radius-pill);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1.5;
    white-space: nowrap;
    border: 1px solid transparent;
}
.als-badge-ok      { background: var(--als-ok-bg);      color: var(--als-ok);      border-color: var(--als-ok-border); }
.als-badge-warn    { background: var(--als-warn-bg);    color: var(--als-warn);    border-color: var(--als-warn-border); }
.als-badge-err     { background: var(--als-err-bg);     color: var(--als-err);     border-color: var(--als-err-border); }
.als-badge-info    { background: var(--als-info-bg);    color: var(--als-info);    border-color: var(--als-info-border); }
.als-badge-neutral { background: var(--als-neutral-bg); color: var(--als-neutral); border-color: var(--als-neutral-border); }
.als-badge-brand   { background: rgba(229, 54, 55, .16); color: #ff8b8b; border-color: rgba(229, 54, 55, .45); }
.als-badge-discord { background: rgba(88, 101, 242, .18); color: #b9c0ff; border-color: rgba(88, 101, 242, .5); }

/* Puce d'état colorée */
.als-dot {
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    display: inline-block;
    flex: 0 0 auto;
    background: var(--als-neutral);
}
.als-dot-ok   { background: var(--als-ok); }
.als-dot-warn { background: var(--als-warn); }
.als-dot-err  { background: var(--als-err); }
.als-dot-info { background: var(--als-info); }

/* Petite étiquette monospace pour identifiants et valeurs techniques */
.als-kbd {
    display: inline-block;
    padding: .1rem .45rem;
    border-radius: var(--als-radius-xs);
    background: var(--als-surface-inset);
    border: 1px solid var(--als-border-soft);
    color: var(--als-text-mono);
    font-family: var(--als-font-mono);
    font-size: .76rem;
    white-space: nowrap;
}

/* Métadonnée sous forme « libellé : valeur » */
.als-meta { display: flex; align-items: center; gap: .35rem; font-size: .8rem; }
.als-meta-label { color: var(--als-text-muted); }
.als-metas { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem .9rem; }


/* ───────────────────────────────────────────────────────────────────────────
   9. BOUTONS ET PAGINATION
   ─────────────────────────────────────────────────────────────────────────── */
.als-pill { border-radius: var(--als-radius-pill) !important; }

.als-page .btn-primary {
    background-color: var(--als-accent);
    border-color: var(--als-accent);
    color: #0d1030;
    font-weight: 600;
}
.als-page .btn-primary:hover,
.als-page .btn-primary:focus-visible {
    background-color: var(--als-accent-hover);
    border-color: var(--als-accent-hover);
    color: #ffffff;
}
.als-page .btn-outline-light {
    border-color: var(--als-border-input);
    color: var(--als-text);
}
.als-page .btn-outline-light:hover,
.als-page .btn-outline-light:focus-visible {
    background-color: var(--als-surface-hover);
    border-color: var(--als-accent);
    color: var(--als-text-heading);
}

/* Bouton icône discret */
.als-btn-icon {
    background: transparent;
    border: 1px solid transparent;
    color: var(--als-text-muted);
    border-radius: var(--als-radius-xs);
    line-height: 1;
    padding: .3rem .45rem;
}
.als-btn-icon:hover,
.als-btn-icon:focus-visible {
    background: var(--als-surface-hover);
    border-color: var(--als-border-soft);
    color: var(--als-text-heading);
}

/* Pied de liste : compteur à gauche, pagination à droite */
.als-listfoot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 1rem;
    padding-top: .875rem;
    border-top: 1px solid var(--als-border-divider);
}

.als-pagination { --bs-pagination-border-radius: var(--als-radius-xs); margin: 0; }
.als-pagination .page-link {
    background-color: var(--als-surface-inset);
    border-color: var(--als-border-soft);
    color: var(--als-text);
}
.als-pagination .page-link:hover,
.als-pagination .page-link:focus-visible {
    background-color: var(--als-surface-hover);
    border-color: var(--als-accent);
    color: var(--als-text-heading);
}
.als-pagination .page-item.active .page-link {
    background-color: var(--als-accent);
    border-color: var(--als-accent);
    color: #0d1030;
    font-weight: 700;
}
.als-pagination .page-item.disabled .page-link {
    background-color: var(--als-surface-inset);
    border-color: var(--als-border-table);
    color: var(--als-text-ph);
    opacity: .55;
}


/* ───────────────────────────────────────────────────────────────────────────
   10. ÉTATS VIDES ET CHARGEMENT
   ─────────────────────────────────────────────────────────────────────────── */
.als-empty {
    background: var(--als-surface);
    border: 1px dashed var(--als-border-soft);
    border-radius: var(--als-radius);
    padding: 2.5rem 1.25rem;
    text-align: center;
    color: var(--als-text-muted);
}
.als-empty-title {
    color: var(--als-text-heading);
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: .35rem;
}
.als-empty p { color: var(--als-text-muted); margin-bottom: 0; }
.als-empty .btn { margin-top: 1rem; }

.als-loading { color: var(--als-text-muted); text-align: center; padding: 1.75rem 0; }

.als-skel {
    display: block;
    height: .85rem;
    border-radius: var(--als-radius-xs);
    background: linear-gradient(90deg,
        var(--als-surface-inset) 0%,
        rgba(140, 148, 255, .18) 50%,
        var(--als-surface-inset) 100%);
    background-size: 200% 100%;
    animation: als-skel-slide 1.2s ease-in-out infinite;
}
@keyframes als-skel-slide {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}


/* ───────────────────────────────────────────────────────────────────────────
   11. MODALES
   ─────────────────────────────────────────────────────────────────────────── */
.als-modal .modal-content {
    background: var(--als-surface);
    border: 1px solid var(--als-border);
    border-radius: var(--als-radius);
    color: var(--als-text);
    box-shadow: var(--als-shadow);
}
.als-modal .modal-header {
    border-bottom: 1px solid var(--als-border-divider);
    background: var(--als-surface-raised);
    border-radius: var(--als-radius) var(--als-radius) 0 0;
}
.als-modal .modal-footer { border-top: 1px solid var(--als-border-divider); }
.als-modal .modal-title  { color: var(--als-text-heading); font-weight: 600; }
.als-modal .btn-close    { filter: invert(1) grayscale(100%); opacity: .8; }
.als-modal .btn-close:hover { opacity: 1; }
.als-modal .form-control,
.als-modal .form-select {
    background-color: var(--als-surface-inset);
    border: 1px solid var(--als-border-input);
    color: var(--als-text-input);
}
.als-modal .form-control::placeholder { color: var(--als-text-ph); }
.als-modal .form-control:focus,
.als-modal .form-select:focus {
    background-color: var(--als-surface-inset);
    border-color: var(--als-accent);
    color: var(--als-text-input);
    box-shadow: 0 0 0 .2rem rgba(129, 140, 248, .28);
}


/* ───────────────────────────────────────────────────────────────────────────
   12. ONGLETS
   ─────────────────────────────────────────────────────────────────────────── */
.als-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    border-bottom: 1px solid var(--als-border-divider);
    margin-bottom: 1.25rem;
    padding-bottom: .5rem;
}
.als-tabs .nav-link,
.als-tab {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .4rem .95rem;
    border-radius: var(--als-radius-pill);
    border: 1px solid var(--als-border-soft);
    background: transparent;
    color: var(--als-text-muted);
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
    transition: background var(--als-t-fast), border-color var(--als-t-fast), color var(--als-t-fast);
}
.als-tabs .nav-link:hover,
.als-tab:hover {
    background: var(--als-surface-hover);
    border-color: var(--als-border-input);
    color: var(--als-text-heading);
}
.als-tabs .nav-link.active,
.als-tab.active,
.als-tab[aria-selected="true"] {
    background: var(--als-neutral-bg);
    border-color: var(--als-accent);
    color: var(--als-text-heading);
}
.als-tab-count {
    font-size: .7rem;
    font-weight: 700;
    padding: .05rem .4rem;
    border-radius: var(--als-radius-pill);
    background: var(--als-surface-inset);
    color: var(--als-text-muted);
}


/* ───────────────────────────────────────────────────────────────────────────
   13. DIVERS
   ─────────────────────────────────────────────────────────────────────────── */
.als-pre {
    background: var(--als-surface-code);
    border: 1px solid var(--als-border-soft);
    border-radius: var(--als-radius-xs);
    color: var(--als-text-mono);
    font-family: var(--als-font-mono);
    font-size: .8rem;
    padding: .7rem .85rem;
    margin: 0;
    max-height: 60vh;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

.als-code {
    font-family: var(--als-font-mono);
    font-size: .8rem;
    color: var(--als-text-mono);
}

.als-divider {
    border: 0;
    border-top: 1px solid var(--als-border-divider);
    opacity: 1;
    margin: 1.25rem 0;
}

/* Note de bas de page : mentions RGPD, rappels de fonctionnement */
.als-footnote {
    color: var(--als-text-muted);
    font-size: .8rem;
    line-height: 1.6;
    margin: 1.25rem 0 0;
}

/* Barre de progression fine (scores, quotas) */
.als-bar {
    height: .35rem;
    border-radius: var(--als-radius-pill);
    background: var(--als-surface-inset);
    overflow: hidden;
}
.als-bar > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--als-accent);
}
.als-bar-ok   > span { background: var(--als-ok); }
.als-bar-warn > span { background: var(--als-warn); }
.als-bar-err  > span { background: var(--als-err); }

/* Barre de progression épaisse, à remplissage coloré.
   Déplacée depuis alslist.css : elle y portait déjà le préfixe als-, ce qui
   créait une ambiguïté avec le socle. Elle est désormais réellement partagée.
   La largeur est appliquée en JS depuis data-width, pour ne pas dépendre d'un
   style inline (CSP style-src). */
.als-progress {
    height: .4rem;
    border-radius: var(--als-radius-pill);
    background: var(--als-surface-inset);
    overflow: hidden;
}
.als-progress-fill {
    height: 100%;
    border-radius: inherit;
    background: var(--als-accent);
    transition: width var(--als-t-base) ease;
}
.als-progress-watching  { background: var(--als-watching); }
.als-progress-completed { background: var(--als-completed); }
.als-progress-planned   { background: var(--als-planned); }
.als-progress-dropped   { background: var(--als-dropped); }
.als-progress-success   { background: var(--als-watching); }

/* Pile de notifications : au-dessus des modales Bootstrap (z-index 1055) */
.als-toast-stack { z-index: 1100; }

/* Retour en haut de page */
.als-backtop {
    position: fixed;
    right: 1.1rem;
    bottom: 1.25rem;
    z-index: 30;
    display: none;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border-radius: 50%;
    background: var(--als-surface);
    border: 1px solid var(--als-border-input);
    color: var(--als-text);
    box-shadow: var(--als-shadow);
    line-height: 1;
}
.als-backtop.is-visible { display: inline-flex; align-items: center; justify-content: center; }
.als-backtop:hover,
.als-backtop:focus-visible { background: var(--als-surface-hover); color: var(--als-text-heading); }

/* Zone de graphique : hauteur contrainte pour éviter les sauts de mise en page */
.als-chart { position: relative; width: 100%; }
.als-chart canvas { max-width: 100%; }
.als-chart-donut { max-width: 260px; margin-inline: auto; }


/* ───────────────────────────────────────────────────────────────────────────
   14. ACCESSIBILITÉ ET RESPONSIVE
   ─────────────────────────────────────────────────────────────────────────── */

/* Focus clavier visible partout — obligatoire, ne pas retirer */
.als-page :focus-visible,
.als-modal :focus-visible {
    outline: 2px solid var(--als-accent);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .als-skel { animation: none; }
    .als-page *,
    .als-modal * {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}

@media (max-width: 767.98px) {
    .als-page { padding-block: 1rem 2.5rem; }
    .als-head,
    .als-card { padding: 1rem; }
    .als-head-title h1 { font-size: 1.25rem; }
    .als-kpis { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: .5rem; }
    .als-kpi-value { font-size: 1.3rem; }
    .als-listfoot { justify-content: center; }
    .als-cell-clip { max-width: 12rem; }
}

@media print {
    .als-head-actions,
    .als-toolbar,
    .als-backtop,
    .als-pagination { display: none !important; }
    .als-card,
    .als-head { box-shadow: none; }
}