/* ==========================================================================
   D-Sound — Thème « Admin unifié »
   Repris de help/admin-unified.html (Admin unifié — direction éditoriale).

   Couche de surcharge : ce fichier est chargé APRÈS common.css et ne
   remplace aucun fichier existant. Le retirer de header.tpl suffit à
   revenir à l'ancien design.

   Palette et mesures extraites du mockup :
     fond crème #f2efe8 · surfaces #fffdf8 · filets #e2dacb / #ece7dd
     encre #1b1f26 · texte secondaire #6f7681 · sourdine #8b8375 / #a49b8c
     rail #161a20 · rail actif #333e4d · texte rail #98a0ac
     accent D-Sound #6d3f9e (teinte attribuée à D-Sound dans le mockup)
     pastilles 999px · cartes 18px · typo Instrument Sans
   ========================================================================== */

/* Police du mockup, servie en local (aucun appel externe) */
@font-face {
    font-family: 'Instrument Sans';
    font-style: normal;
    font-weight: 400 700;
    font-stretch: 100%;
    font-display: swap;
    src: url('/web/ressources/fonts/InstrumentSans-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Instrument Sans';
    font-style: normal;
    font-weight: 400 700;
    font-stretch: 100%;
    font-display: swap;
    src: url('/web/ressources/fonts/InstrumentSans-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    --df-bg:            #f2efe8;
    --df-surface:       #fffdf8;
    --df-surface-2:     #f9f5ec;
    --df-surface-3:     #f4efe4;
    --df-line:          #e2dacb;
    --df-line-soft:     #ece7dd;

    --df-ink:           #1b1f26;
    --df-ink-2:         #6f7681;
    --df-muted:         #8b8375;
    --df-faint:         #a49b8c;

    --df-rail:          #161a20;
    --df-rail-edge:     #232a34;
    --df-rail-soft:     #1f2530;
    --df-rail-active:   #333e4d;
    --df-rail-border:   #45515f;
    --df-rail-text:     #98a0ac;
    --df-rail-text-on:  #fffdf8;
    --df-rail-sub:      #7e8794;

    /* Teinte D-Sound du mockup. Une seule variable à changer pour reteinter. */
    --df-accent:        #6d3f9e;
    --df-accent-dark:   #57307f;
    --df-accent-soft:   #f1ebf8;

    --df-ok-bg:         #e7f1e9;
    --df-ok:            #276244;
    --df-ok-line:       #c9e0d1;
    --df-warn-bg:       #f9f0dc;
    --df-warn:          #8a5209;
    --df-warn-line:     #ead9b4;
    --df-bad-bg:        #fbe9e5;
    --df-bad:           #a32e22;
    --df-bad-line:      #eec6be;

    --df-rail-w:        276px;
    --df-topbar-h:      94px;      /* = hauteur de l'encart de marque Dinaudio */
    --df-radius:        18px;
    --df-radius-sm:     12px;
    --df-pill:          999px;

    --df-font: 'Instrument Sans', 'Helvetica Neue', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

/* --------------------------------------------------------------------------
   1. Base
   -------------------------------------------------------------------------- */

html body {
    background-color: var(--df-bg);
    color: var(--df-ink);
    font-family: var(--df-font);
    font-size: 14px;
    line-height: 1.5;
    height: auto !important;      /* neutralise le height:1000px inline */
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

html body ::selection { background: #e6ded0; }
html body ::placeholder { color: var(--df-faint); }

html body a { color: var(--df-accent); text-decoration: none; }
html body a:hover,
html body a:focus { color: var(--df-accent-dark); text-decoration: underline; }

html body input,
html body select,
html body button,
html body textarea { font-family: var(--df-font); }

html body h1, html body h2, html body h3,
html body h4, html body h5, html body h6,
html h2, html h3 {
    color: var(--df-ink);
    font-family: var(--df-font);
    font-weight: 600;
    letter-spacing: -0.01em;
}
html body h1 { font-size: 40px; line-height: 1.05; letter-spacing: -0.015em; }
html body h2 { font-size: 28px; }
html body h3 { font-size: 20px; }
html body h4 { font-size: 17px; }
html body p  { color: var(--df-ink-2); }

html body .subtitle {
    color: var(--df-ink);
    font-size: 40px;
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.015em;
    margin: 0 0 18px;
    padding: 0;
}
html body hr { border-top: 1px solid var(--df-line-soft); margin: 22px 0; }
html body small, html body .small { color: var(--df-muted); }

html body .text-success { color: var(--df-accent); }
html body .text-danger  { color: var(--df-bad); }
html body .text-muted   { color: var(--df-muted); }
html body .link-blue    { color: var(--df-accent); }

/* --------------------------------------------------------------------------
   2. Barre supérieure
   -------------------------------------------------------------------------- */

html body header .headerpanel {
    height: var(--df-topbar-h);
    background: var(--df-surface);
    border-bottom: 1px solid var(--df-line);
}

/* Bloc marque : reprise à l'identique de l'encart Dinaudio (spotflow,
   clientoffice.css : .sf-rail__brand + .sf-brandcard). Même place (haut du
   rail), même carte, même typo, mêmes couleurs. Hauteur = 4 (accent) + 16 + 60 + 14. */
html body .logopanel {
    width: var(--df-rail-w);
    height: var(--df-topbar-h);
    background: var(--df-rail);
    position: relative;
    display: flex;
    align-items: center;
    padding: 20px 14px 14px;      /* 16px + le filet d'accent de 4px */
}
html body .logopanel:before {          /* .sf-rail__accent */
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--df-accent);
}
html body .sf-brandcard {
    width: 100%;
    min-height: 60px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    background: #333e4d;
    border: 1px solid #45515f;
    border-radius: 14px;
    text-align: left;
    color: inherit;
    text-decoration: none;
    font-family: var(--df-font);
}
html body .sf-brandcard:hover { text-decoration: none; color: inherit; border-color: #5a6879; }
html body .sf-brandcard__mark {
    width: 40px; height: 40px; flex: none;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid #333b46;
    background: repeating-linear-gradient(135deg, #242c36, #242c36 5px, #1a2029 5px, #1a2029 10px);
    color: #9aa2ae;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 11px;
    font-weight: 600;
}
html body .sf-brandcard__mark--img {
    padding: 0;
    overflow: hidden;
    /* Dinaudio pose son logo sur #f7f8fa ; le logo D-Sound est un carré sombre
       aux coins transparents, on garde donc le fond du rail derrière. */
    background: #161a20;
    border-color: #333b46;
}
html body .sf-brandcard__mark--img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
html body .sf-brandcard__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
html body .sf-brandcard__name {
    font-weight: 600; font-size: 19px; line-height: 1.1; color: #f7f4ee;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html body .sf-brandcard__sub {
    font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #7e8794;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Onglets de zone (Administration / Médiathèque) */
html body .headermenu { padding-left: 22px; }
html body .headermenu .nav { margin: 0; padding: 28px 0; }   /* (94 - 38) / 2 */
html body .headermenu .nav > li > a {
    height: 38px;
    line-height: 38px;
    padding: 0 18px;
    margin-right: 6px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--df-ink-2);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--df-pill);
}
html body .headermenu .nav > li > a:hover,
html body .headermenu .nav > li > a:focus {
    color: var(--df-ink);
    background: var(--df-surface-3);
}
html body .headermenu .nav-pills > li.active > a,
html body .headermenu .nav-pills > li.active > a:hover,
html body .headermenu .nav-pills > li.active > a:focus {
    background: var(--df-accent);
    border-color: var(--df-accent);
    color: var(--df-rail-text-on);
}

/* --------------------------------------------------------------------------
   3. Rail de navigation
   -------------------------------------------------------------------------- */

html body .leftpanel {
    width: var(--df-rail-w);
    background: var(--df-rail);
    border-right: 1px solid var(--df-rail-edge);
    min-height: calc(100vh - var(--df-topbar-h));
    padding-bottom: 24px;
}

/* Bloc utilisateur */
html body .leftpanel-userinfo {
    padding: 18px 16px;
    border-bottom: 1px solid var(--df-rail-edge);
}
html body .leftpanel-userinfo .btn-group {
    display: block;
    width: 100%;
    background: var(--df-rail-active);
    border: 1px solid var(--df-rail-border);
    border-radius: 14px;
    padding: 12px 14px;
}
html body .leftpanel-userinfo .user-name {
    color: var(--df-rail-text-on);
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.2;
    word-break: break-word;
}
html body .leftpanel-userinfo .img-user {
    float: none;
    margin: 10px 0 0;
    width: 40px; height: 40px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--df-rail-border);
    background: var(--df-rail-soft);
}
html body .leftpanel-userinfo .img-user img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
html body .leftpanel-userinfo a.btn-logout,
html body .leftpanel-userinfo .returnlogin a {
    display: inline-block;
    margin-top: 12px;
    height: 32px;
    line-height: 30px;
    padding: 0 14px;
    border-radius: var(--df-pill);
    border: 1px solid var(--df-rail-border);
    background: transparent;
    color: var(--df-rail-text);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
}
html body .leftpanel-userinfo a.btn-logout:hover,
html body .leftpanel-userinfo .returnlogin a:hover {
    color: var(--df-rail-text-on);
    border-color: var(--df-rail-text);
    text-decoration: none;
}
html body .leftpanel-userinfo .returnlogin { display: block; margin: 0; }

/* Menu */
html body .leftpanel .nav { margin: 16px 12px 0; }
html body .leftpanel .nav > li { margin: 0 0 2px; }
html body .leftpanel .nav li a {
    position: relative;
    display: block;
    min-height: 42px;
    line-height: 1.3;
    padding: 12px 12px 12px 18px;
    border-radius: 10px;
    color: var(--df-rail-text);
    font-size: 13.5px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    background: transparent;
    border: 0;
}
html body .leftpanel .nav li a:hover,
html body .leftpanel .nav li a:focus {
    background: var(--df-rail-soft);
    color: var(--df-rail-text-on);
    text-decoration: none;
}
html body .leftpanel .nav-stacked > li.active > a,
html body .leftpanel .nav-stacked > li.active > a:hover,
html body .leftpanel .nav-stacked > li.active > a:focus {
    background: var(--df-rail-active);
    color: var(--df-rail-text-on);
    font-weight: 600;
}
html body .leftpanel .nav-stacked > li.active > a:before {
    content: "";
    position: absolute;
    left: 6px; top: 50%;
    margin-top: -10px;
    width: 3px; height: 20px;
    border-radius: 2px;
    background: var(--df-accent);
}

/* Fiche client dans le rail */
html body .informations-user {
    margin: 22px 14px 0;
    padding: 16px;
    background: var(--df-rail-soft);
    border: 1px solid var(--df-rail-edge);
    border-radius: 14px;
}
html body .informations-user h3 {
    color: var(--df-rail-text-on);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin: 0 0 10px;
}
html body .informations-user h3 ~ h3 { margin-top: 18px; }
html body .informations-user p {
    color: var(--df-rail-text);
    font-size: 12.5px;
    margin: 0 0 6px;
}
html body .informations-user .informations-user-label {
    color: var(--df-rail-sub);
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   4. Zone de contenu
   -------------------------------------------------------------------------- */

html body .contentpanel {
    /* Filet de sécurité : common.css met `body { color:#fff }` (hérité du fond sombre).
       Tout ce qui hérite dans la zone de contenu part donc de l'encre, pas du blanc. */
    color: var(--df-ink);
    width: calc(100% - var(--df-rail-w));
    background: var(--df-bg);
    padding: 32px;
    min-height: calc(100vh - var(--df-topbar-h));
}
html body .contentpanel > .row { max-width: 1560px; }

/* Pages ouvertes sans chrome (layout="none", fancybox) */
html body .contentpanel[style] { background: var(--df-bg); }

/* --------------------------------------------------------------------------
   5. Cartes / panneaux
   -------------------------------------------------------------------------- */

html body .panel {
    background: var(--df-surface);
    border: 1px solid var(--df-line);
    border-radius: var(--df-radius);
    box-shadow: none;
    margin-bottom: 24px;
    overflow: hidden;
}
/* Motif éditorial du mockup « Admin unifié v2 » : le titre de page vit HORS de la
   carte (eyebrow + grand titre + accroche), la carte ne porte que le contenu.
   :has() est ignoré des très vieux navigateurs, qui retrouvent alors l'ancien
   rendu (carte englobante) sans rien casser. */
html body .panel:has(> .panel-heading) {
    background: transparent;
    border: 0;
    border-radius: 0;
    overflow: visible;
}
html body .panel:has(> .panel-heading) > .panel-body {
    background: var(--df-surface);
    border: 1px solid var(--df-line);
    border-radius: var(--df-radius);
}
html body .panel-heading + .panel-body { clear: both; }
html body .panel-heading {
    background: transparent;
    border-bottom: 0;
    float: none;             /* common.css la fait flotter : source de titres collés/chevauchés */
    width: auto;
    padding: 4px 2px 20px;
    max-width: 1560px;
    color: var(--df-ink);
}
/* Eyebrow : la zone courante, comme dans le mockup */
html body .panel-heading:before {
    content: "Administration";
    display: block;
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--df-muted);
}
html body[data-zone="media"] .panel-heading:before { content: "Médiathèque"; }
/* Menu unique (comptes clients ROLE_USER_ADMIN / ROLE_USER) : plus de zone, donc pas d'eyebrow */
html body[data-menu="single"] .panel-heading:before { display: none; }
html body .panel-heading .panel-title,
html body h4.panel-title,
html body .panel-title {
    color: var(--df-ink);
    font-family: var(--df-font);
    font-size: 40px;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.015em;
    text-transform: none;
    margin: 0;
}
html body .panel-heading p {
    margin: 10px 0 0;
    max-width: 660px;
    color: var(--df-ink-2);
    font-size: 14.5px;
}
html body .panel-body { padding: 24px 30px 30px; }
/* common.css : .nopaddingtop { padding-top:0 !important } — sans !important ici, le premier
   bloc du corps (bandeau de compteurs de /users, par exemple) collait au bord de la carte. */
html body .panel-body.nopaddingtop { padding-top: 22px !important; }
html body .panel.ds-flat > .panel-body.nopaddingtop { padding-top: 0 !important; }
html body .panel-heading + .panel-body { padding-top: 22px; }
/* En-tête avec bouton d'action à droite (/titres/, etc.) : réserve la place du bouton */
html body .panel-heading.folders { padding-right: 230px; }
html body .panel-footer {
    background: var(--df-surface-2);
    border-top: 1px solid var(--df-line-soft);
    color: var(--df-ink-2);
}

/* --------------------------------------------------------------------------
   6. Tableaux
   -------------------------------------------------------------------------- */

html body .table {
    background: transparent;
    color: var(--df-ink);
    margin-bottom: 0;
}
html body .table > thead > tr > th {
    background: transparent;
    border-bottom: 1px solid var(--df-line);
    border-top: 0;
    padding: 0 16px 12px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--df-muted);
    vertical-align: bottom;
}
html body .table > thead.success > tr > th,
html body .table > thead > tr > th.success { background: transparent; color: var(--df-muted); }

html body .table > tbody > tr > td {
    padding: 14px 16px;
    border-top: 0;
    border-bottom: 1px solid var(--df-line-soft);
    vertical-align: middle;
    color: var(--df-ink);
}
html body .table > tbody > tr:last-child > td { border-bottom: 0; }

html body .table-bordered,
html body .table-bordered > thead > tr > th,
html body .table-bordered > tbody > tr > td,
html body .table-bordered > tfoot > tr > td { border-left: 0; border-right: 0; }
html body .table-bordered { border: 0; }

html body .table-striped > tbody > tr:nth-of-type(odd) { background: transparent; }
html body .table-striped > tbody > tr:hover,
html body .table-hover > tbody > tr:hover { background: var(--df-surface-2); }

html body .table > tbody > tr.active > td,
html body .table > tbody > tr > td.active { background: var(--df-surface-3); }
html body .table > tbody > tr.success > td { background: var(--df-ok-bg); }
html body .table > tbody > tr.danger  > td { background: var(--df-bad-bg); }
html body .table > tbody > tr.warning > td { background: var(--df-warn-bg); }

html body .table-responsive { border: 0; }

/* --------------------------------------------------------------------------
   7. Boutons
   -------------------------------------------------------------------------- */

html body .btn {
    height: 40px;
    line-height: 38px;
    padding: 0 18px;
    border-radius: var(--df-pill);
    border: 1px solid transparent;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    box-shadow: none;
    transition: background-color .14s ease, border-color .14s ease, color .14s ease;
}
html body .btn:focus,
html body .btn:active:focus { outline: none; box-shadow: none; }
html body .btn-quirk { border-radius: var(--df-pill); }
html body .btn-wide  { min-width: 120px; }
html body .btn-sm, html body .btn-xs { height: 32px; line-height: 30px; padding: 0 14px; font-size: 12.5px; }
html body .btn-lg { height: 46px; line-height: 44px; padding: 0 24px; font-size: 14px; }
html body .mr5 { margin-right: 8px; }

html body .btn-success,
html body .btn-primary {
    background: var(--df-accent);
    border-color: var(--df-accent);
    color: var(--df-rail-text-on);
}
html body .btn-success:hover, html body .btn-success:focus, html body .btn-success:active,
html body .btn-primary:hover, html body .btn-primary:focus, html body .btn-primary:active {
    background: var(--df-accent-dark);
    border-color: var(--df-accent-dark);
    color: var(--df-rail-text-on);
}

html body .btn-default {
    background: var(--df-surface);
    border-color: var(--df-line);
    color: var(--df-ink);
}
html body .btn-default:hover, html body .btn-default:focus, html body .btn-default:active {
    background: var(--df-surface);
    border-color: var(--df-ink);
    color: var(--df-ink);
}

html body .btn-danger {
    background: var(--df-bad-bg);
    border-color: var(--df-bad-line);
    color: var(--df-bad);
}
html body .btn-danger:hover, html body .btn-danger:focus, html body .btn-danger:active {
    background: var(--df-bad);
    border-color: var(--df-bad);
    color: var(--df-surface);
}

html body .btn-warning {
    background: var(--df-warn-bg);
    border-color: var(--df-warn-line);
    color: var(--df-warn);
}
html body .btn-info {
    background: var(--df-surface);
    border-color: var(--df-line);
    color: var(--df-ink-2);
}
html body .btn-link { color: var(--df-accent); height: auto; line-height: 1.5; padding: 0; }

/* --------------------------------------------------------------------------
   8. Formulaires
   -------------------------------------------------------------------------- */

html body .form-control {
    height: 40px;
    padding: 0 16px;
    background: var(--df-surface);
    border: 1px solid var(--df-line);
    border-radius: var(--df-pill);
    color: var(--df-ink);
    font-size: 13.5px;
    box-shadow: none;
    transition: border-color .14s ease;
}
html body .form-control:focus {
    border-color: var(--df-ink);
    box-shadow: none;
    outline: none;
}
html body textarea.form-control {
    height: auto;
    min-height: 110px;
    padding: 12px 16px;
    border-radius: 16px;
    line-height: 1.5;
}
html body select.form-control { padding-right: 34px; }
html body select[multiple].form-control { height: auto; border-radius: 16px; padding: 8px 12px; }
html body .form-control[disabled],
html body .form-control[readonly] { background: var(--df-surface-3); color: var(--df-muted); }

/* common.css met TOUS les <label> en blanc (hérité du fond sombre) : sur le fond
   crème ils devenaient invisibles (fournisseurs, cases à cocher, filtres de mood). */
html body label { color: var(--df-ink); }
html body .leftpanel label { color: var(--df-rail-text); }

html body .form-horizontal .control-label,
html body .control-label {
    color: var(--df-ink-2);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding-top: 11px;
    text-align: left;
}
html body .form-group { margin-bottom: 18px; }
html body .help-block { color: var(--df-muted); font-size: 12.5px; }

html body .input-group-addon {
    background: var(--df-surface-3);
    border: 1px solid var(--df-line);
    color: var(--df-muted);
    border-radius: var(--df-pill) 0 0 var(--df-pill);
    padding: 0 14px;
}
html body .input-group .form-control:first-child { border-radius: var(--df-pill) 0 0 var(--df-pill); }
html body .input-group .form-control:last-child  { border-radius: 0 var(--df-pill) var(--df-pill) 0; }

html body input[type="checkbox"],
html body input[type="radio"] { accent-color: var(--df-accent); }

/* --------------------------------------------------------------------------
   9. Alertes, étiquettes, pastilles
   -------------------------------------------------------------------------- */

html body .alert {
    border-radius: 14px;
    border-width: 1px;
    padding: 14px 18px;
    font-size: 13.5px;
}
html body .alert-danger  { background: var(--df-bad-bg);  border-color: var(--df-bad-line);  color: var(--df-bad); }
html body .alert-success { background: var(--df-ok-bg);   border-color: var(--df-ok-line);   color: var(--df-ok); }
html body .alert-warning { background: var(--df-warn-bg); border-color: var(--df-warn-line); color: var(--df-warn); }
html body .alert-info    { background: var(--df-surface-3); border-color: var(--df-line);    color: var(--df-ink-2); }

html body .label, html body .badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border-radius: var(--df-pill);
    font-size: 11.5px;
    font-weight: 600;
    background: var(--df-surface-3);
    border: 1px solid var(--df-line);
    color: var(--df-ink-2);
}
html body .label-success, html body .badge-success { background: var(--df-ok-bg);   border-color: var(--df-ok-line);   color: var(--df-ok); }
html body .label-danger,  html body .badge-danger  { background: var(--df-bad-bg);  border-color: var(--df-bad-line);  color: var(--df-bad); }
html body .label-warning, html body .badge-warning { background: var(--df-warn-bg); border-color: var(--df-warn-line); color: var(--df-warn); }

/* --------------------------------------------------------------------------
   10. Pagination, onglets, listes
   -------------------------------------------------------------------------- */

html body .pagination > li > a,
html body .pagination > li > span {
    min-width: 36px;
    height: 36px;
    line-height: 34px;
    text-align: center;
    margin: 0 3px;
    border: 1px solid var(--df-line);
    border-radius: var(--df-pill) !important;
    background: var(--df-surface);
    color: var(--df-ink);
    font-weight: 600;
    font-size: 13px;
}
html body .pagination > li > a:hover { border-color: var(--df-ink); }
html body .pagination > .active > a,
html body .pagination > .active > span,
html body .pagination > .active > a:hover {
    background: var(--df-accent);
    border-color: var(--df-accent);
    color: var(--df-rail-text-on);
}

html body .nav-tabs {
    background: transparent;      /* common.css pose un bandeau gris derrière les onglets */
    border-bottom: 1px solid var(--df-line);
    margin-bottom: 22px;
}
html body .nav-tabs > li > a {
    border: 0;
    border-radius: 0;
    margin-right: 4px;
    padding: 10px 4px;
    margin-left: 0;
    color: var(--df-ink-2);
    font-size: 13.5px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    background: transparent;
}
html body .nav-tabs > li > a:hover { background: transparent; color: var(--df-ink); border: 0; }
html body .nav-tabs > li.active > a,
html body .nav-tabs > li.active > a:hover,
html body .nav-tabs > li.active > a:focus {
    background: transparent;
    border: 0;
    border-bottom: 2px solid var(--df-accent);
    color: var(--df-ink);
}

html body .list-group-item {
    background: var(--df-surface);
    border-color: var(--df-line-soft);
    color: var(--df-ink);
}
html body .well {
    background: var(--df-surface-2);
    border: 1px solid var(--df-line-soft);
    border-radius: var(--df-radius-sm);
    box-shadow: none;
}

/* --------------------------------------------------------------------------
   11. Fenêtres modales et calques
   -------------------------------------------------------------------------- */

html body .modal-content {
    background: var(--df-surface);
    border: 1px solid var(--df-line);
    border-radius: var(--df-radius);
    box-shadow: 0 18px 48px rgba(27, 31, 38, .18);
}
html body .modal-header { border-bottom: 1px solid var(--df-line-soft); padding: 20px 24px; }
html body .modal-title  { color: var(--df-ink); font-size: 20px; font-weight: 600; }
html body .modal-body   { padding: 22px 24px; color: var(--df-ink); }
html body .modal-footer { border-top: 1px solid var(--df-line-soft); padding: 16px 24px; }
html body .modal-backdrop.in { opacity: .45; }

html body .fancybox-content,
html body .fancybox-slide > div {
    background: var(--df-surface);
    border-radius: var(--df-radius);
}

html body .df-tooltip {
    background: var(--df-surface);
    border: 1px solid var(--df-line);
    border-radius: var(--df-radius);
    color: var(--df-ink);
    box-shadow: 0 18px 48px rgba(27, 31, 38, .18);
}
html body .df-tooltip h2 { color: var(--df-ink); font-size: 18px; }
html body .df-tooltip .df-content,
html body .df-tooltip .df-footer { color: var(--df-ink); }
html body .df-tooltip .df-btn-close {
    display: inline-block;
    height: 34px; line-height: 32px; padding: 0 16px;
    border: 1px solid var(--df-line);
    border-radius: var(--df-pill);
    color: var(--df-ink);
    cursor: pointer;
}

/* --------------------------------------------------------------------------
   12. Composants tiers (DataTables, multi-select, jQuery UI)
   -------------------------------------------------------------------------- */

html body .dataTables_wrapper .dataTables_filter input,
html body .dataTables_wrapper .dataTables_length select {
    height: 36px;
    padding: 0 14px;
    background: var(--df-surface);
    border: 1px solid var(--df-line);
    border-radius: var(--df-pill);
    color: var(--df-ink);
}
html body .dataTables_wrapper .dataTables_info,
html body .dataTables_wrapper .dataTables_length,
html body .dataTables_wrapper .dataTables_length label,
html body .dataTables_wrapper .dataTables_filter,
html body .dataTables_wrapper .dataTables_filter label { color: var(--df-ink-2); font-size: 13px; font-weight: 500; }
html body .dataTables_wrapper .dataTables_length select { width: auto; min-width: 74px; }
html body table.dataTable thead th.sorting,
html body table.dataTable thead th.sorting_asc,
html body table.dataTable thead th.sorting_desc { color: var(--df-muted); }
/* Flèches de tri : jamais par-dessus le libellé (les en-têtes sont souvent en text-right),
   posées sur la ligne de base du titre. */
html body table.dataTable thead th.sorting,
html body table.dataTable thead th.sorting_asc,
html body table.dataTable thead th.sorting_desc {
    position: relative;
    padding-right: 30px;
    color: var(--df-muted);
}
html body .table.dataTable thead .sorting:after,
html body .table.dataTable thead .sorting_asc:after,
html body .table.dataTable thead .sorting_desc:after {
    top: auto;
    bottom: 11px;
    right: 10px;
    font-size: 9px;
    line-height: 1;
    opacity: .45;
}
html body .table.dataTable thead .sorting:after { opacity: .25; }

/* Pagination DataTables : la pastille est portée par le <a>, le <li> reste neutre
   (sinon deux pastilles imbriquées, d'où des boutons trop gros et mal centrés). */
html body .dataTables_wrapper .dataTables_paginate .pagination { margin: 0; }
html body .dataTables_wrapper .dataTables_paginate li.paginate_button,
html body .dataTables_wrapper .dataTables_paginate li.paginate_button.active,
html body .dataTables_wrapper .dataTables_paginate li.paginate_button.current {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}
html body .dataTables_wrapper .dataTables_paginate .pagination > li > a,
html body .dataTables_wrapper .dataTables_paginate .pagination > li > span,
html body .dataTables_wrapper .dataTables_paginate .pagination > .paginate_button.next > a,
html body .dataTables_wrapper .dataTables_paginate .pagination > .paginate_button.previous > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    margin: 0 3px;
    padding: 0 12px;
    line-height: 1;
    font-size: 11.5px;
    font-weight: 600;
}
html body .dataTables_wrapper .dataTables_paginate .pagination > .disabled > a,
html body .dataTables_wrapper .dataTables_paginate .pagination > .disabled > span { color: var(--df-faint); }

html body .ms-container .ms-list {
    border: 1px solid var(--df-line);
    border-radius: 16px;
    background: var(--df-surface);
    box-shadow: none;
}
html body .ms-container .ms-selectable li.ms-elem-selectable,
html body .ms-container .ms-selection li.ms-elem-selection {
    border-bottom: 1px solid var(--df-line-soft);
    color: var(--df-ink);
    padding: 9px 14px;
}
html body .ms-container .ms-selectable li.ms-hover,
html body .ms-container .ms-selection li.ms-hover {
    background: var(--df-accent);
    color: var(--df-rail-text-on);
}
html body .ms-container .ms-optgroup-label { color: var(--df-muted); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: 10.5px; }

html body .ui-widget.ui-widget-content {
    border: 1px solid var(--df-line);
    border-radius: var(--df-radius-sm);
    font-family: var(--df-font);
}
html body .ui-slider .ui-slider-range { background: var(--df-accent); }
html body .ui-slider .ui-slider-handle {
    border: 1px solid var(--df-accent);
    background: var(--df-surface);
    border-radius: 50%;
}
html body .ui-datepicker .ui-state-active,
html body .ui-datepicker .ui-widget-header {
    background: var(--df-accent);
    border-color: var(--df-accent);
    color: var(--df-rail-text-on);
}

/* --------------------------------------------------------------------------
   13. Page de connexion
   -------------------------------------------------------------------------- */

html body.signwrapper { background: var(--df-rail); }
html body.signwrapper .signpanel,
html body.signwrapper .sign-overlay { background: var(--df-rail); opacity: 1; }
html body.signwrapper .panel.signin {
    background: var(--df-surface);
    border: 1px solid var(--df-line);
    border-radius: var(--df-radius);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
    overflow: hidden;
}
html body.signwrapper .panel.signin .panel-heading { padding: 30px 30px 0; text-align: left; }
html body.signwrapper .panel.signin h1 {
    color: var(--df-ink);
    font-size: 34px;
    font-weight: 600;
    letter-spacing: -0.015em;
    margin: 0;
}
html body.signwrapper .panel.signin .panel-heading p { color: var(--df-ink-2); margin-top: 8px; }
html body.signwrapper .panel.signin .panel-body { padding: 22px 30px 30px; }

/* Champs du formulaire : le groupe entier (icône + saisie) forme une seule
   pilule légèrement teintée pour se détacher du panneau ; pas de pastille
   derrière l'icône, qui est simplement teintée dans la couleur d'accent et
   suivie d'un petit espace avant le texte. */
html body.signwrapper .panel.signin .input-group {
    background: var(--df-surface-3);
    border: 1px solid var(--df-line);
    border-radius: var(--df-pill);
    transition: border-color .15s ease, background-color .15s ease;
}
html body.signwrapper .panel.signin .input-group:focus-within {
    background: var(--df-surface);
    border-color: var(--df-accent);
}
html body.signwrapper .panel.signin .input-group > .input-group-addon {
    background: transparent;
    border: 0;
    padding: 0 10px 0 16px;
    color: var(--df-accent);
}
html body.signwrapper .panel.signin .input-group > .input-group-addon > i { color: var(--df-accent); }
html body.signwrapper .panel.signin .input-group > .form-control {
    height: 38px;
    padding-left: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}
html body.signwrapper .panel.signin .input-group > .form-control:focus {
    background: transparent;
    border: 0;
    box-shadow: none;
}
html body.signwrapper .panel.signin .btn { width: 100%; }

/* --------------------------------------------------------------------------
   14. Divers propres à D-Sound
   -------------------------------------------------------------------------- */

html body #player-menu { margin: 18px 14px 0; }

html body .list-grid-item {
    background: var(--df-surface);
    border: 1px solid var(--df-line);
    border-radius: var(--df-radius-sm);
    color: var(--df-ink);
}
html body .style-cart-info .content {
    background: var(--df-surface-3);
    border: 1px solid var(--df-line);
    border-radius: var(--df-pill);
    color: var(--df-ink-2);
    font-size: 11.5px;
    font-weight: 600;
    padding: 2px 9px;
}
html body .categorie-list li input {
    background: var(--df-surface);
    border: 1px solid var(--df-line);
    color: var(--df-ink);
}
html body .days-message-box,
html body .display-box {
    background: var(--df-surface);
    border: 1px solid var(--df-line);
    border-radius: var(--df-radius-sm);
    color: var(--df-ink);
}

/* Reprise des éléments hérités de l'ancien fond sombre : sans ces règles,
   du texte blanc resterait posé sur le fond crème. */

html body .track-title { color: var(--df-ink); font-weight: 600; }
html body .track-artist { color: var(--df-ink-2); }

html body .search { color: var(--df-ink); }
html body .search input,
html body .search select {
    background: var(--df-surface);
    border: 1px solid var(--df-line);
    border-radius: var(--df-pill);
    color: var(--df-ink);
    padding: 6px 14px;
}
html body .search-in-current {
    background: var(--df-surface);
    border: 1px solid var(--df-line);
    border-radius: var(--df-pill);
    color: var(--df-ink);
    padding: 8px 16px;
    font-size: 14px;
}

html body .list-track,
html body .list-track-available {
    border: 1px solid var(--df-line);
    border-radius: var(--df-radius-sm);
    overflow: hidden;
    background: var(--df-surface);
}
html body .list-track li,
html body .list-track-available li { background: var(--df-surface); }
html body .list-track li:nth-of-type(odd),
html body .list-track-available li:nth-of-type(odd) { background: var(--df-surface-2); }
html body .list-track .primary,
html body .list-track-available .primary { color: var(--df-ink); font-size: 15px; font-weight: 600; }
html body .list-track .secondary,
html body .list-track-available .secondary { color: var(--df-ink-2); }

html body .reservoir-name { color: var(--df-ink); font-weight: 600; }
html body .reservoir-type {
    background: var(--df-accent);
    color: var(--df-rail-text-on);
    border-radius: var(--df-pill);
    font-size: 11.5px;
    font-weight: 600;
}
html body .reservoir-delete {
    background: var(--df-bad-bg);
    color: var(--df-bad);
    border: 1px solid var(--df-bad-line);
    border-radius: var(--df-pill);
}
html body .subtitle-resevoir { border-bottom-color: var(--df-line); }

html body .opts-select {
    background: var(--df-surface);
    border: 1px solid var(--df-line-soft);
    border-radius: 10px;
}
html body .list-grid-item-txt {
    background: var(--df-accent);
    border-color: var(--df-accent);
    color: var(--df-rail-text-on);
    border-radius: 10px;
}
html body .state-project-list { border-radius: var(--df-pill); font-size: 11.5px; font-weight: 600; }
html body .ellipse-overflow-name { color: var(--df-ink); }
html body .rightpanel { background: var(--df-bg); }

/* Barres de défilement, ton crème */
html body ::-webkit-scrollbar { width: 10px; height: 10px; }
html body ::-webkit-scrollbar-track { background: var(--df-bg); }
html body ::-webkit-scrollbar-thumb { background: #d8cfbd; border-radius: var(--df-pill); border: 2px solid var(--df-bg); }
html body ::-webkit-scrollbar-thumb:hover { background: var(--df-faint); }
html body .leftpanel ::-webkit-scrollbar-track { background: var(--df-rail); }
html body .leftpanel ::-webkit-scrollbar-thumb { background: var(--df-rail-active); border-color: var(--df-rail); }

/* --------------------------------------------------------------------------
   15. Barres de filtres et grilles de vignettes
   Composants partagés par /titres/, les playlists, les messages, les
   opérations et les réservoirs : les régler ici les corrige partout.
   -------------------------------------------------------------------------- */

/* --- 15.1 Barre de filtres ------------------------------------------------ */

html body .search {
    background: var(--df-surface-3);
    border: 0;                    /* pas de cadre dans le cadre : simple bandeau teinté */
    border-radius: 12px;
    padding: 22px 24px 14px;
    margin: 0 0 28px;
    color: var(--df-ink);
    font-size: 13.5px;
    line-height: 2.1;
}
html body .search > input,
html body .search > select,
html body .search input.form-control,
html body .search select.form-control {
    height: 36px;
    margin: 0 8px 10px 0;
    padding: 0 14px;
    background: var(--df-surface);
    border: 1px solid var(--df-line);
    border-radius: var(--df-pill);
    color: var(--df-ink);
    font-size: 13px;
    vertical-align: middle;
}
html body .search > input:focus,
html body .search > select:focus { border-color: var(--df-ink); outline: none; }
html body .search > select { padding-right: 30px; cursor: pointer; }
html body .search .search-query { width: 300px; max-width: 100%; }
html body .search .datepicker,
html body .search .datetimepicker { width: 148px; max-width: 100%; }

/* Pastilles de filtre (styles, ambiances, métriques) : le contraste
   texte gris sur fond gris de l'ancien thème est remplacé ici. */
html body .select-genre,
html body .select-ambiance,
html body .select-genre-generator,
html body .select-metric {
    display: inline-block;
    margin: 0 6px 6px 0;
    padding: 5px 13px;
    background: var(--df-surface);
    border: 1px solid var(--df-line);
    border-radius: var(--df-pill);
    color: var(--df-ink-2);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.45;
    cursor: pointer;
    transition: background-color .13s ease, border-color .13s ease, color .13s ease;
}
html body .select-genre:hover,
html body .select-ambiance:hover,
html body .select-genre-generator:hover,
html body .select-metric:hover {
    border-color: var(--df-ink);
    color: var(--df-ink);
}
html body .select-genre-container .active,
html body .select-ambiance-container .active,
html body .select-metric-container .active,
html body .select-genre.active,
html body .select-ambiance.active,
html body .select-metric.active {
    background: var(--df-accent);
    border-color: var(--df-accent);
    color: var(--df-rail-text-on);
}

html body .select-genre-container,
html body .select-ambiance-container {
    float: none;
    width: 100%;
    line-height: 1.45;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--df-line-soft);
}
html body .select-genre-container > span:first-child,
html body .select-ambiance-container > span:first-child {
    display: block;
    margin-bottom: 9px;
    color: var(--df-muted);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
html body .select-metric-container {
    display: inline-block;
    margin-left: 6px;
    vertical-align: middle;
}

/* Compteur de résultats : visible uniquement quand il est renseigné */
html body p.count-result { margin: 12px 0 4px; color: var(--df-ink-2); font-size: 13px; }
html body p.count-result:not(:empty) {
    display: inline-block;
    margin: 14px 0 4px;
    padding: 5px 14px;
    background: var(--df-surface);
    border: 1px solid var(--df-line);
    border-radius: var(--df-pill);
    color: var(--df-ink);
    font-weight: 600;
}

/* --- 15.2 Grille de vignettes -------------------------------------------- */

html body .container-titres-square,
html body .list-grid.search-container { margin-left: -9px; margin-right: -9px; }

html body .list-grid-item { padding: 9px; }
html body #home-titres .list-grid-item { margin-bottom: 0; }

html body .list-grid-item-contener {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;          /* s'étire dans la colonne, sans height:100% */
    background: var(--df-surface);
    border: 1px solid var(--df-line);
    border-radius: 14px;
    overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
html body .list-grid-item-contener:hover {
    border-color: #d8cfbd;
    box-shadow: 0 10px 26px rgba(27, 31, 38, .10);
    transform: translateY(-2px);
}

html body .img-contener {
    position: relative;
    width: 100%;
    overflow: hidden;
    min-height: 173px;
    background: var(--df-surface-3);
}
html body .list-grid-item img,
html body .list-grid-item video {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 0;
}

/* Titre et artiste : séparés, tronqués proprement */
/* Ciblé sur le bloc texte des vignettes de titres (le <a> qui suit la
   pochette) : les vignettes de playlists ont une autre structure et ne
   doivent pas hériter de ce rembourrage. */
html body .img-contener + a {
    display: block;
    padding: 12px 14px 14px;
    text-decoration: none;
    color: inherit;
}
html body .img-contener + a:hover { text-decoration: none; }
html body .img-contener + a br { display: none; }
html body .track-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 5px;
    min-height: 2.7em;
    color: var(--df-ink);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.35;
}
html body .track-artist {
    display: block;
    margin-top: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--df-ink-2);
    font-size: 12.5px;
}
html body .list-grid-item-contener:hover .track-title { color: var(--df-accent); }

/* Étiquettes de style posées sur la pochette */
html body .style-cart-info {
    left: 8px;
    right: 8px;
    width: auto;
    max-height: 24px;      /* une seule ligne d'étiquettes, jamais toute la pochette */
    overflow: hidden;
    z-index: 3;
    pointer-events: none;
}
html body .style-cart-info.style { top: 8px; }
html body .style-cart-info:not(.style) { top: 36px; }
html body .style-cart-info .content {
    margin: 0 4px 4px 0;
    padding: 3px 9px;
    border-radius: var(--df-pill);
    background: rgba(255, 253, 248, .93);
    color: var(--df-ink);
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.5;
    box-shadow: 0 1px 3px rgba(27, 31, 38, .18);
}
html body .style-cart-info.style .content {
    background: rgba(27, 31, 38, .82);
    color: var(--df-rail-text-on);
}

/* Lecture au survol */
html body .play-overlay { background: rgba(27, 31, 38, .42); }
html body .play-overlay svg { fill: #fffdf8; color: #fffdf8; }

/* Bandeaux de métriques en bas de pochette */
html body .title-stats,
html body .title-stats-btn {
    background: rgba(27, 31, 38, .74);
    color: #f7f4ee;
    font-size: 11px;
    line-height: 1.5;
}
html body .title-stats p { margin: 0 0 2px; color: #f7f4ee; display: flex; }
html body .title-stats-btn {
    padding: 0 12px;
    height: 30px;
    line-height: 30px;
    opacity: 0;
    transition: opacity .15s ease;
}
html body .list-grid-item:hover .title-stats-btn { opacity: 1; }
html body .title-stats { bottom: 30px; }
html body .title-stats-btn a { color: #fffdf8; font-weight: 600; font-size: 11.5px; }
html body .title-stats-btn a:hover { color: #fffdf8; text-decoration: underline; }

/* Bouton d'action en haut de carte (Ajouter des titres, etc.) */
html body .panel-heading { position: relative; }
html body .cartouche-right { top: auto; bottom: 18px; right: 2px; }
html body .cartouche-right .btn-r,
html body .btn-r { margin-top: 0; padding: 0 20px; float: none; }
html body .list-grid-item-contener .delete-item {
    background: rgba(255, 253, 248, .93);
    color: var(--df-bad);
    border-radius: var(--df-pill);
    padding: 2px 10px;
    margin: 8px;
    font-weight: 600;
    z-index: 4;
}

/* Bouton « Afficher plus de titres » : centré et respirant */
html body .display-more-track {
    display: block;
    width: fit-content;
    margin: 26px auto 6px;
    float: none;
}

/* --- 15.3 Vignettes de listes (playlists, messages, programmations, plannings)
   Reprise du mockup « Admin unifié v2 » : pochette en haut, puis un bloc texte
   séparé par un filet, titre sobre en 18 px (et non plus un bandeau plein accent),
   et une ligne de métadonnées en pastilles sous le titre.
   -------------------------------------------------------------------------- */

/* Le lien de la vignette devient une colonne : pochette, titre, puis métadonnées
   alignées sur une même ligne (elles étaient positionnées en absolu). */
html body .list-grid-item-contener > a:not(.delete-item):not(.track-link) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    text-decoration: none;
}
html body .list-grid-item-contener > a > img { flex: 0 0 100%; }

html body .list-grid-item-txt {
    flex: 0 0 100%;
    order: 1;
    margin: 0;
    padding: 14px 14px 10px;
    background: transparent;
    border: 0;
    border-top: 1px solid var(--df-line-soft);
    border-radius: 0;
    color: var(--df-ink);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Métadonnées : poids, date de génération, compteur de nouveautés */
html body .total-weight-playlist,
html body .date-update,
html body .new-songs {
    position: static;
    order: 2;
    display: inline-block;
    max-width: calc(100% - 28px);
    margin: 0 0 10px 14px;
    padding: 3px 10px;
    border-radius: var(--df-pill);
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}
html body .total-weight-playlist {
    background: var(--df-surface-3);
    border: 1px solid var(--df-line);
    color: var(--df-ink-2);
}
/* La date passe sur sa propre ligne, tronquée : elle est longue et faisait
   déborder la vignette. */
html body .date-update {
    order: 3;
    flex: 0 0 100%;
    max-width: 100%;
    margin: 0 14px 12px;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--df-muted);
    font-size: 11px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
}
html body .new-songs { border: 1px solid transparent; color: #fffdf8 !important; }
html body .new-songs.info1 { background: var(--df-bad); border-color: var(--df-bad); }
html body .new-songs.info2 { background: #9a6510; border-color: #9a6510; }
html body .new-songs.info3 { background: var(--df-ok); border-color: var(--df-ok); }

/* Barre de recherche des écrans de liste : pilule blanche, comme dans le mockup */
html body .search-in-current-container {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 22px;
    padding: 12px 18px;
    background: var(--df-surface);
    border: 1px solid var(--df-line);
    border-radius: var(--df-pill);
}
html body .search-in-current-container .search-in-current {
    flex: 1;
    min-width: 200px;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    color: var(--df-ink);
    font-size: 14px;
    outline: none;
}

/* --- 15.4 Composants des écrans D-Sound (mockup « Admin unifié v2 »)
   Bandeau de compteurs, sections avec compteur, cartes utilisateur,
   filtres en pastilles, catégories de messages.
   -------------------------------------------------------------------------- */

/* Bandeau de compteurs : cellules séparées par un filet, grand nombre coloré */
html body .ds-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
    margin: 0 0 22px;
    background: var(--df-line);
    border: 1px solid var(--df-line);
    border-radius: var(--df-radius);
    overflow: hidden;
}
html body .ds-stat { flex: 1 1 160px; min-width: 0; padding: 20px; background: var(--df-surface); }
html body .ds-stat-label { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--df-muted); }
html body .ds-stat-value { display: block; margin-top: 12px; font-size: 40px; font-weight: 600; line-height: .95; letter-spacing: -0.02em; color: var(--df-ink); }
html body .ds-stat-sub { display: block; margin-top: 10px; font-size: 12.5px; color: var(--df-ink-2); }
html body .ds-stat.is-ok .ds-stat-value { color: var(--df-ok); }
html body .ds-stat.is-warn .ds-stat-value { color: #9a6510; }
html body .ds-stat.is-bad .ds-stat-value { color: var(--df-bad); }

/* Section : carte avec en-tête (titre + compteur) */
html body .ds-section {
    margin: 0 0 22px;
    background: var(--df-surface);
    border: 1px solid var(--df-line);
    border-radius: var(--df-radius);
    overflow: hidden;
}
html body .panel-body .ds-section { border-color: var(--df-line-soft); }
html body .ds-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 22px;
    border-bottom: 1px solid var(--df-line-soft);
}
html body .ds-section-title { display: flex; align-items: baseline; gap: 12px; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; color: var(--df-ink); }
html body .ds-section-count { font-size: 12px; font-weight: 500; color: var(--df-muted); }
html body .ds-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 18px 22px;
}
html body .ds-cards > .ds-user-card { flex: 1 1 230px; max-width: 320px; min-width: 0; }
/* Carte avec photo : base plus large pour loger le visuel + « Se connecter » + « Sync » côte à côte. */
html body .ds-cards > .ds-user-card--photo { flex-basis: 300px; max-width: 360px; }
html body .ds-empty { margin: 0; padding: 18px 22px; color: var(--df-muted); }

/* Carte utilisateur : bandeau d'état, identité, action */
html body .ds-user-card {
    float: none;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    background: var(--df-surface);
    border: 1px solid var(--df-line);
    border-radius: 16px;
    overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease;
}
html body .ds-user-card:hover { border-color: var(--df-ink); box-shadow: 0 12px 26px -14px rgba(27, 31, 38, .4); }
html body .ds-user-top {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 14px;
    background: var(--df-surface-2);
    border-bottom: 1px solid var(--df-line-soft);
    font-size: 11px;
}
html body .ds-user-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--df-faint); }
html body .ds-user-dot.is-on { background: #2f7a52; box-shadow: 0 0 0 3px #e7f1e9; }
html body .ds-user-dot.is-off { background: var(--df-bad); box-shadow: 0 0 0 3px var(--df-bad-bg); }
html body .ds-user-version { font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: 600; color: var(--df-ink-2); }
html body .ds-user-date { margin-left: auto; color: var(--df-faint); font-variant-numeric: tabular-nums; }
html body .ds-user-group { color: var(--df-muted); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Carte avec photo : le visuel du client est un carré qui occupe toute la hauteur à gauche,
   l'identité et l'action se rangent à droite. La carte garde la même hauteur qu'une carte sans photo. */
html body .ds-user-card--photo { flex-direction: row; }
html body .ds-user-photo {
    flex: none;
    align-self: stretch;
    width: 112px;
    min-height: 112px;
    background: var(--df-surface-3) center / cover no-repeat;
    border-right: 1px solid var(--df-line-soft);
}
@supports (aspect-ratio: 1 / 1) {
    /* max-width : sans elle, une carte plus haute (magasin sur deux lignes) élargit toutes les photos
       de la rangée et rogne les boutons d'action (« Sync » coupé). */
    html body .ds-user-photo { width: auto; min-width: 96px; max-width: 112px; aspect-ratio: 1 / 1; }
}
html body .ds-user-photo--empty { background-size: 60%; background-color: var(--df-surface-2); }
/* Écran d'un compte d'enseigne : le visuel est une capture de tablette, on l'affiche
   en entier (contain) plutôt que recadrée. */
html body .ds-user-photo--fit { background-size: contain; background-color: var(--df-surface-2); }
html body .ds-user-photo--fit.ds-user-photo--empty { background-size: 60%; }
html body .ds-user-card .ds-user-name.is-disabled { color: var(--df-bad); }
html body .ds-user-actions .ds-user-sync { flex: 0 0 auto; min-width: 62px; }
html body .ds-status-legend { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }
html body .ds-status-legend .ds-badge { display: inline-flex; align-items: center; gap: 7px; }
html body .ds-status-legend .ds-user-dot { box-shadow: none; }
/* Vignettes d'état cliquables (tableau de bord enseigne) : filtre par état des comptes */
html body button.ds-status-filter { cursor: pointer; font: inherit; font-size: 11.5px; font-weight: 600; transition: box-shadow .15s, transform .15s; }
html body button.ds-status-filter:hover { box-shadow: 0 0 0 2px var(--df-surface), 0 0 0 4px var(--df-line); }
html body button.ds-status-filter:focus-visible { outline: 2px solid var(--df-accent); outline-offset: 2px; }
html body button.ds-status-filter.is-active { box-shadow: 0 0 0 2px var(--df-surface), 0 0 0 4px currentColor; }
html body .ds-status-filters.has-active .ds-status-filter:not(.is-active) { opacity: .55; }
html body .ds-user-card.ds-state-hidden { display: none !important; }
html body .ds-user-main { display: flex; flex-direction: column; flex: 1; min-width: 0; }
html body .ds-user-card--photo .ds-user-top { padding: 9px 12px 0; background: none; border-bottom: 0; }
html body .ds-user-card--photo .ds-user-body { padding: 4px 12px 6px; }
html body .ds-user-card--photo .ds-user-actions { padding: 0 12px 10px; }
html body .ds-user-body { display: flex; flex-direction: column; gap: 5px; padding: 12px 14px 10px; flex: 1; }
html body .ds-user-card .ds-user-name {
    position: static; height: auto; width: auto; line-height: 1.3; text-align: left; background: none; padding: 0;
    font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13.5px; font-weight: 600; color: var(--df-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html body .ds-user-store { font-size: 12.5px; color: var(--df-ink-2); line-height: 1.35; }
/* flex-wrap : si la carte est vraiment trop étroite, « Sync » passe à la ligne au lieu d'être coupé. */
html body .ds-user-actions { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 12px; }
html body .ds-user-card .btn { display: block; flex: 1; height: 34px; line-height: 32px; padding: 0 12px; font-size: 12.5px; }
html body .ds-user-card--photo .btn { padding: 0 8px; }

/* Filtres des messages : les boutons radio deviennent des pastilles */
html body .messages-audio .search-in-current-container { gap: 8px; }
html body .messages-audio .search-in-current-container .search-in-current { flex: 1 1 220px; }
html body .messages-audio input.filter { position: absolute; opacity: 0; width: 0; height: 0; }
html body .messages-audio input.filter + label {
    margin: 0;
    padding: 0 14px;
    height: 34px;
    line-height: 32px;
    border: 1px solid #d8cfbd;
    border-radius: var(--df-pill);
    background: transparent;
    color: var(--df-ink-2);
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}
html body .messages-audio input.filter + label:hover { border-color: var(--df-ink); color: var(--df-ink); }
html body .messages-audio input.filter:checked + label { background: var(--df-accent); border-color: var(--df-accent); color: var(--df-rail-text-on); font-weight: 600; }

/* Cartes de messages : la rangée d'actions (télécharger, horaires, jours) était
   positionnée en absolu et recouvrait le lecteur audio ; elle repasse dans le flux. */
html body .messages-audio .list-grid-item-contener { display: flex; flex-direction: column; }
html body .messages-audio .list-grid-item-contener > a { flex: 0 0 auto; }
html body .messages-audio .list-grid-item-contener audio,
html body .messages-audio .list-grid-item-contener .plyr { margin: 0 14px; width: auto; }
html body .messages-audio .programmation-ico {
    position: static;
    width: auto;            /* common.css : width:50%; height:20px; top:-38px; left:50% */
    height: auto;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: auto;
    padding: 10px 14px 12px;
    border-top: 1px solid var(--df-line-soft);
    font-size: 12.5px;
}
html body .messages-audio .programmation-ico .display-days { position: relative; }
html body .messages-audio .programmation-ico img { width: 16px; height: auto; vertical-align: middle; }

/* Catégories de messages (dossiers) : onglets clairs au lieu des icônes sur fond sombre */
/* common.css fait flotter la liste (le corps de page venait se glisser à côté) :
   elle redevient un bloc pleine largeur, et chaque dossier une pastille compacte. */
html body .categorie-list {
    float: none;
    clear: both;
    width: 100%;
    margin: 14px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
}
html body .categorie-list li {
    float: none;
    position: relative;
    width: auto;
    height: auto;
    margin: 0;
    padding: 5px 28px 5px 10px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--df-surface);
    border: 1px solid var(--df-line);
    border-radius: var(--df-pill);
    text-align: left;
    color: var(--df-ink);
}
html body .categorie-list li a { display: inline-flex; line-height: 0; }
html body .categorie-list li br { display: none; }
html body .categorie-list img { width: 18px; height: auto; }
html body .categorie-list li.active { border-color: var(--df-accent); background: var(--df-accent-soft); }
html body .categorie-list li input, html body .categorie-list li.active input {
    width: 118px;
    min-width: 40px;
    max-width: 160px;
    height: 24px;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-bottom: 1px dashed transparent;
    color: var(--df-ink);
    font-size: 12.5px;
    text-align: center;
}
html body .categorie-list li input:focus { border-bottom-color: var(--df-accent); outline: none; }
html body .categorie-list li input:disabled { color: var(--df-ink); }
html body .categorie-list .delete-categorie { position: absolute; top: 50%; right: 9px; margin-top: -8px; line-height: 16px; color: var(--df-bad); font-size: 11px; font-weight: 700; }
html body .categorie-list .add-categorie { justify-content: center; min-width: 42px; padding: 5px 10px; border-style: dashed; color: var(--df-muted); cursor: pointer; font-size: 16px; }
html body .categorie-list .add-categorie-input { width: 120px; }

/* --------------------------------------------------------------------------
   17. Coque du mockup D-Sound (help/D-Sound.html)
   Barre supérieure « marque — écran courant », onglets de zone à droite ;
   rail avec libellé SECTIONS et bloc utilisateur épinglé en bas.
   -------------------------------------------------------------------------- */

html body header .headerpanel { display: flex; float: none; width: 100%; }
html body .logopanel { float: none; flex: none; }
html body .headerbar {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 16px;
    height: var(--df-topbar-h);
    padding: 0 32px;
    background: var(--df-bg);
}
html body .ds-topbar-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
html body .ds-topbar-mark {
    width: 30px; height: 30px; flex: none;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    background: var(--df-rail);
    border: 1px solid var(--df-line);
}
html body .ds-topbar-mark img { width: 100%; height: 100%; object-fit: cover; display: block; }
html body .ds-topbar-app { font-size: 18px; font-weight: 600; color: var(--df-ink); white-space: nowrap; }
html body .ds-topbar-sep { color: #c3bbab; }
html body .ds-topbar-screen {
    font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--df-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html body .headermenu { float: none; margin-left: auto; padding: 0; }
html body .headermenu .nav { margin: 0; padding: 0; display: flex; gap: 6px; }
html body .headermenu .nav > li { float: none; }
html body .headermenu .nav > li > a {
    float: none;
    display: block;
    height: 38px;
    line-height: 36px;
    margin: 0;
    padding: 0 16px;
    border: 1px solid var(--df-line);
    background: var(--df-surface);
    color: var(--df-ink-2);
    font-size: 11.5px;
    letter-spacing: .08em;
}
html body .headermenu .nav > li > a:hover,
html body .headermenu .nav > li > a:focus { border-color: var(--df-ink); color: var(--df-ink); background: var(--df-surface); }

/* Rail : colonne, sélecteur de zone puis menu en haut, utilisateur en bas */
html body .leftpanelinner { display: flex; flex-direction: column; min-height: calc(100vh - var(--df-topbar-h)); }
html body .ds-zone-switch {
    order: 0;
    display: flex;
    gap: 4px;
    margin: 14px 14px 0;
    padding: 4px;
    background: var(--df-rail-soft);
    border: 1px solid var(--df-rail-edge);
    border-radius: 10px;
}
html body .ds-zone-switch__item {
    flex: 1;
    min-width: 0;
    height: 32px;
    line-height: 32px;
    text-align: center;
    border-radius: 7px;
    color: var(--df-rail-text);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}
html body .ds-zone-switch__item:hover,
html body .ds-zone-switch__item:focus { color: var(--df-rail-text-on); text-decoration: none; background: var(--df-rail-active); }
html body .ds-zone-switch__item.is-active { background: var(--df-rail-text-on); color: var(--df-rail); box-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
html body .ds-zone-switch__item.is-active:hover,
html body .ds-zone-switch__item.is-active:focus { background: var(--df-rail-text-on); color: var(--df-rail); }
html body .leftpanel .tab-content { order: 1; flex: 1; }
html body .leftpanel-userinfo {
    order: 2;
    margin-top: auto;
    padding: 14px;
    border-top: 1px solid var(--df-rail-edge);
    border-bottom: 0;
}
html body #mainmenu > .nav:before {
    content: "Sections";
    display: block;
    padding: 10px 8px 8px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #6a7280;
}
html body .leftpanel .nav { margin: 6px 14px 0; }
html body .leftpanel .nav li a { padding-left: 16px; font-size: 13.5px; }
html body .leftpanel .nav-stacked > li.active > a:before { left: 0; }

html body .leftpanel-userinfo .ds-delegated { display: block; margin: 0 0 14px; }
/* Sélecteur aussi précis que l'ancienne règle « .leftpanel-userinfo .returnlogin a »
   (bouton 32 px en ligne), qui l'emportait et faisait se chevaucher la carte et l'identité. */
html body .leftpanel-userinfo .ds-delegated a,
html body .leftpanel-userinfo .returnlogin.ds-delegated a {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 56px;
    margin: 0;
    padding: 10px 12px;
    height: auto;
    line-height: 1.2;
    border: 1px solid #3a3320;
    border-radius: 14px;
    background: #2a2618;
    color: inherit;
    text-decoration: none;
}
html body .ds-delegated a:hover { border-color: #d8b25a; text-decoration: none; }
html body .ds-delegated-ico {
    width: 30px; height: 30px; flex: none;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: #d8b25a;
    color: #1b1f26;
    font-size: 14px;
}
html body .ds-delegated-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
html body .ds-delegated-label { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #d8b25a; }
html body .ds-delegated-action { font-size: 12.5px; font-weight: 600; color: #f7f4ee; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

html body .ds-me { display: flex; align-items: center; gap: 10px; }
html body .leftpanel-userinfo .img-user.ds-me-avatar {
    width: 34px; height: 34px; flex: none;
    margin: 0;
    border-radius: 50%;
    border: 1px solid var(--df-rail-border);
    background: #2a323d;
}
html body .ds-me-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
html body .leftpanel-userinfo .ds-me .user-name {
    width: 100%;
    margin: 0;
    text-align: left;
    font-size: 13px; font-weight: 600; color: #eceae4;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; word-break: normal;
}
/* Identifiant et rôle alignés sur le même bord gauche (le .user-name global est centré) */
html body .ds-me-role { margin: 0; text-align: left; font-size: 11px; color: var(--df-rail-sub); }
html body .leftpanel-userinfo a.btn-logout {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 12px;
    height: 36px;
    line-height: 34px;
    border: 1px solid #2b333e;
    background: transparent;
    color: #8b939f;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
}
html body .leftpanel-userinfo a.btn-logout:hover { background: #1c222b; border-color: #39424f; color: #f7f4ee; }

/* --------------------------------------------------------------------------
   18. Pages en liste du mockup D-Sound (messages, programmations, plannings,
   playlists, boutons) : en-tête éditorial, barre d'outils en pilule,
   sections en cartes, cartes compactes avec lecteur.
   -------------------------------------------------------------------------- */

/* Page « à plat » : le corps de page n'est plus une carte englobante */
html body .panel.ds-flat > .panel-body,
html body .panel.ds-flat:has(> .panel-heading) > .panel-body {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
}
html body .panel.ds-flat .panel-heading { padding-bottom: 24px; }
html body .panel.ds-flat .panel-heading.folders { padding-right: 260px; }
html body .panel.ds-flat .cartouche-right { bottom: 24px; }
html body .panel.ds-flat > .panel-body > hr { display: none; }
html body .ds-page-actions { margin: 4px 0 0; }

/* Barre d'outils : catégories en pastilles, « + », recherche à droite, filtres */
html body .ds-toolbar {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0 0 22px;
    padding: 14px 18px;
    background: var(--df-surface);
    border: 1px solid var(--df-line);
    border-radius: 28px;
}
html body .ds-toolbar-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* Encart de recherche séparé, sous celui des catégories (dossiers nombreux) */
html body .ds-toolbar--search { margin-top: -12px; padding: 10px 18px; }
html body .ds-toolbar--search .ds-search { width: 100%; max-width: 420px; }
html body .ds-toolbar .categorie-list { flex: 1; min-width: 0; margin: 0; gap: 8px; }
html body .ds-toolbar .categorie-list li,
html body .ds-toolbar .categorie-list li.active {
    height: 36px;
    padding: 0;
    border: 1px solid #d8cfbd;
    border-radius: var(--df-pill);
    background: transparent;
    color: var(--df-ink-2);
    font-size: 12.5px;
    font-weight: 500;
}
html body .ds-toolbar .categorie-list li:hover { border-color: var(--df-ink); color: var(--df-ink); }
html body .ds-toolbar .categorie-list li.active { background: var(--df-accent); border-color: var(--df-accent); color: var(--df-rail-text-on); font-weight: 600; }
html body .ds-toolbar .categorie-list li a.ds-pill-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 34px;
    padding: 0 14px;
    line-height: 34px;
    color: inherit;
    text-decoration: none;
}
html body .ds-toolbar .categorie-list li a.ds-pill-link + .ds-pill-tools,
html body .ds-toolbar .categorie-list li .ds-pill-tools { display: inline-flex; align-items: center; gap: 2px; padding-right: 8px; }
html body .ds-toolbar .categorie-list li .ds-pill-count { font-size: 11px; opacity: .75; font-variant-numeric: tabular-nums; }
html body .ds-toolbar .categorie-list li .ds-pill-edit,
html body .ds-toolbar .categorie-list .delete-categorie {
    position: static;
    margin: 0;
    width: 22px; height: 22px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    color: inherit;
    opacity: .6;
    cursor: pointer;
    text-decoration: none;
}
html body .ds-toolbar .categorie-list li .ds-pill-edit:hover,
html body .ds-toolbar .categorie-list .delete-categorie:hover { opacity: 1; background: rgba(27, 31, 38, .08); text-decoration: none; }
html body .ds-toolbar .categorie-list li.active .delete-categorie:hover,
html body .ds-toolbar .categorie-list li.active .ds-pill-edit:hover { background: rgba(255, 255, 255, .18); }
html body .ds-toolbar .categorie-list .delete-categorie { color: var(--df-bad); }
html body .ds-toolbar .categorie-list li.active .delete-categorie { color: var(--df-rail-text-on); }
/* L'icône dossier disparaît ; le champ de renommage n'apparaît qu'en édition */
html body .ds-toolbar .categorie-list li > a:not(.ds-pill-link):not(.delete-categorie) { display: none; }
html body .ds-toolbar .categorie-list li .inputcat { display: none; height: 34px; padding: 0 14px; margin: 0; width: 140px; color: inherit; font-size: 12.5px; text-align: left; border: 0; background: transparent; }
html body .ds-toolbar .categorie-list li.is-editing .inputcat { display: inline-block; }
html body .ds-toolbar .categorie-list li.is-editing .ds-pill-link { display: none; }
/* Dossier fraîchement créé par le « + » (li sans lien-pastille) : le champ est visible */
html body .ds-toolbar .categorie-list li:not(.ds-pill):not(.add-categorie) .inputcat { display: inline-block; }
html body .ds-toolbar .categorie-list .add-categorie,
html body .ds-toolbar .categorie-list li.add-categorie {
    width: 36px; min-width: 36px; height: 36px;
    padding: 0;
    margin: 0;
    top: 0;                 /* common.css : top:27px; margin-top:-5px */
    justify-content: center;
    border: 1px dashed #cfc4ae;
    background: transparent;
    color: var(--df-muted);
    font-size: 16px;
    cursor: pointer;
}
html body .ds-toolbar .categorie-list li.add-categorie:hover { border-color: var(--df-ink); color: var(--df-ink); }

html body .ds-search {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 14px;
    width: 240px;
    max-width: 100%;
    margin: 0;
    background: #f7f3ea;
    border: 1px solid var(--df-line-soft);
    border-radius: var(--df-pill);
    color: var(--df-faint);
    font-weight: 400;
}
html body .ds-search:focus-within { border-color: var(--df-ink); }
html body .ds-search-ico { font-size: 12px; }
html body .ds-search input,
html body .ds-search input.search-in-current {
    flex: 1;
    min-width: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    outline: none;
    color: var(--df-ink);
    font-size: 13px;
}

/* Filtres (type de message) : pastilles compactes sur une seconde ligne */
html body .ds-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--df-line-soft); }
html body .ds-filters-label { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--df-muted); margin-right: 4px; }
html body .ds-filters input.filter { position: absolute; opacity: 0; width: 0; height: 0; }
html body .ds-filters input.filter + label {
    margin: 0;
    padding: 0 12px;
    height: 30px;
    line-height: 28px;
    border: 1px solid #d8cfbd;
    border-radius: var(--df-pill);
    background: transparent;
    color: var(--df-ink-2);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}
html body .ds-filters input.filter + label:hover { border-color: var(--df-ink); color: var(--df-ink); }
html body .ds-filters input.filter:checked + label { background: var(--df-ink); border-color: var(--df-ink); color: var(--df-rail-text-on); font-weight: 600; }

/* Section avec grille de cartes */
html body .ds-section-head .btn { height: 34px; line-height: 32px; padding: 0 13px; font-size: 12.5px; }
html body .ds-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 12px;
    padding: 18px 22px;
}
html body .ds-grid--wide { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
html body .ds-grid--covers { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; padding: 0; }
/* La section 14 encadre .list-grid-item (fond, filet) : dans une grille de cartes,
   ce cadre doublait celui de la carte elle-même. */
html body .ds-grid > .list-grid-item { float: none; width: auto; min-height: 0; margin: 0; padding: 0; display: flex; background: transparent; border: 0; border-radius: 0; }
/* Pochette dans une colonne flex : sans min-height:0, l'image garde sa hauteur
   intrinsèque et repousse le titre et le poids hors de la carte (overflow hidden). */
html body .ds-grid > .list-grid-item img { min-height: 0; flex: 0 0 auto; height: auto; }
html body .ds-grid > .list-grid-item .list-grid-item-contener > a > img { flex-basis: 100%; }
/* Vignette sans lien (playlist nationale) : titre et poids sont enfants directs de la
   colonne flex ; « flex-basis:100% » y vaudrait toute la hauteur et chasserait le poids. */
html body .ds-grid .list-grid-item-contener > .list-grid-item-txt { flex: 0 0 auto; }
html body .ds-grid .list-grid-item-contener > .total-weight-playlist { align-self: flex-start; }
html body .ds-grid > .list-grid-item.display-none { display: none; }

/* Carte compacte : nom + badge, lecteur, actions */
html body .ds-card,
html body .ds-grid .ds-card.list-grid-item-contener {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px;
    background: var(--df-surface);
    border: 1px solid #e6ded0;
    border-radius: 14px;
    box-shadow: none;
    transform: none;
    overflow: visible;
    transition: border-color .15s ease, box-shadow .15s ease;
}
html body .ds-card:hover,
html body .ds-grid .ds-card.list-grid-item-contener:hover { border-color: var(--df-ink); box-shadow: 0 10px 22px -12px rgba(27, 31, 38, .35); transform: none; }
html body .ds-card-head { display: flex; align-items: flex-start; gap: 10px; }
html body .ds-card-name,
html body .ds-card .list-grid-item-txt.ds-card-name {
    flex: 1;
    min-width: 0;
    order: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--df-ink);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.35;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
html body .ds-card-head > a { flex: 1; min-width: 0; color: inherit; text-decoration: none; display: block; }
html body .ds-card-head > a:hover { color: var(--df-accent); text-decoration: none; }
html body .ds-card-meta { font-size: 12px; color: var(--df-ink-2); }
html body .ds-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; }
html body .ds-card-actions { display: flex; align-items: center; gap: 6px; }

html body .ds-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: none;
    padding: 4px 11px;
    border-radius: var(--df-pill);
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    background: var(--df-surface-3);
    border: 1px solid var(--df-line);
    color: var(--df-ink-2);
}
html body .ds-badge--ok     { background: var(--df-ok-bg);     border-color: var(--df-ok-line);   color: var(--df-ok); }
html body .ds-badge--warn   { background: var(--df-warn-bg);   border-color: var(--df-warn-line); color: var(--df-warn); }
html body .ds-badge--bad    { background: var(--df-bad-bg);    border-color: var(--df-bad-line);  color: var(--df-bad); }
html body .ds-badge--accent { background: var(--df-accent-soft); border-color: #d9c8ee;           color: var(--df-accent-dark); }
html body .ds-badge--dark   { background: var(--df-accent); border-color: var(--df-accent); color: var(--df-rail-text-on); }

/* Lecteur compact */
html body .ds-player { display: flex; align-items: center; gap: 10px; }
html body .ds-player audio { display: none; }
html body .ds-play {
    width: 34px; height: 34px; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0;
    border: 1px solid var(--df-accent);
    border-radius: 50%;
    background: transparent;
    color: var(--df-accent);
    font-size: 10px;
    line-height: 1;
    cursor: pointer;
}
html body .ds-play:hover { background: var(--df-accent); color: var(--df-rail-text-on); }
html body .ds-play:disabled, html body .ds-play:disabled:hover { border-color: var(--df-line); color: var(--df-faint); background: transparent; cursor: default; }
html body .ds-play:before { content: "▶"; padding-left: 2px; }
html body .ds-player.is-playing .ds-play:before { content: "❚❚"; padding-left: 0; }
html body .ds-player-bar { flex: 1; height: 4px; border-radius: 2px; background: #eae3d6; position: relative; overflow: hidden; cursor: pointer; }
html body .ds-player-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--df-accent); }
html body .ds-player-time { min-width: 34px; text-align: right; font-size: 11.5px; color: var(--df-muted); font-variant-numeric: tabular-nums; }

/* Boutons ronds d'action */
html body .ds-iconbtn,
html body a.ds-iconbtn,
html body .ds-card .delete-item.ds-iconbtn {
    position: static;
    width: 30px; height: 30px; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    margin: 0;
    padding: 0;
    border: 1px solid #e6ded0;
    border-radius: 50%;
    background: transparent;
    color: var(--df-ink-2);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    z-index: auto;
}
html body .ds-iconbtn:hover,
html body a.ds-iconbtn:hover { border-color: var(--df-ink); color: var(--df-ink); text-decoration: none; }
html body .ds-iconbtn--danger,
html body .ds-card .delete-item.ds-iconbtn--danger { border-color: var(--df-bad-line); color: var(--df-bad); }
html body .ds-iconbtn--danger:hover,
html body .ds-card .delete-item.ds-iconbtn--danger:hover { background: var(--df-bad); border-color: var(--df-bad); color: #fff; }
html body .ds-iconbtn img { width: 14px; height: auto; display: block; }
/* Info-bulles horaires/jours/dates : héritées de common.css (.display-days:hover .days-message-box) */
html body .ds-card .display-days { position: relative; display: inline-flex; background: transparent; }
html body .ds-card .days-message-box { top: 36px; left: 50%; margin-left: -70px; z-index: 30; font-size: 12px; line-height: 1.5; border-radius: 10px; }
html body .ds-card .days-message-box .arrow-left { display: none; }
html body .ds-card .ds-iconbtn .fa { font-size: 12px; }

/* Bouton contour (Éditer, Changer, Dupliquer…) */
html body .btn-outline {
    height: 34px;
    line-height: 32px;
    padding: 0 13px;
    background: transparent;
    border: 1px solid #d8cfbd;
    color: var(--df-ink);
    font-size: 12.5px;
    font-weight: 500;
}
html body .btn-outline:hover, html body .btn-outline:focus { background: transparent; border-color: var(--df-ink); color: var(--df-ink); }
html body .btn-outline.btn-outline--strong { border-color: var(--df-ink); font-weight: 600; }

/* Deux colonnes (programmations : liste + « en cours de diffusion ») */
html body .ds-cols { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, 1fr); gap: 20px; align-items: start; }
html body .ds-cols--even { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
html body .ds-cols > .ds-col { min-width: 0; }
@media (max-width: 1100px) { html body .ds-cols { grid-template-columns: 1fr; } }

/* Panneau sombre « En cours de diffusion » */
html body .ds-onair {
    background: #1b2028;
    border: 1px solid #1b2028;
    border-radius: var(--df-radius);
    overflow: hidden;
    color: #eceae4;
}
html body .ds-onair-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; border-bottom: 1px solid #2b333e; }
html body .ds-onair-title { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; color: #fffdf8; }
html body .ds-onair-count { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #8b939f; }
html body .ds-onair-filter { padding: 12px 22px; border-bottom: 1px solid #262e38; }
html body .ds-onair-search { width: 100%; height: 34px; padding: 0 12px; border: 1px solid #2b333e; border-radius: 8px; background: #1b222b; color: #e4e2dc; font-size: 13px; outline: none; }
html body .ds-onair-search::placeholder { color: #8b939f; }
html body .ds-onair-search:focus { border-color: #d8b25a; }
html body .ds-onair-list { display: flex; flex-direction: column; max-height: 560px; overflow: auto; margin: 0; padding: 0; list-style: none; }
html body .ds-onair-list li { display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 12px 22px; border-bottom: 1px solid #262e38; }
html body .ds-onair-kind {
    flex: none;
    min-width: 36px;
    padding: 2px 7px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-align: center;
    background: #6d3f9e;
    color: #fffdf8;
}
html body .ds-onair-kind--reg { background: #2b333e; color: #c9d0da; }
html body .ds-onair-kind--fer { background: #8a5209; }
html body .ds-onair-time { flex: none; width: 44px; font-size: 13px; font-weight: 600; color: #d8b25a; font-variant-numeric: tabular-nums; }
html body .ds-onair-name { flex: 1; min-width: 0; font-size: 12.5px; line-height: 1.4; color: #e4e2dc; }
html body .ds-onair-ico { display: inline-flex; gap: 6px; margin-left: 8px; vertical-align: middle; }
html body .ds-onair-ico .display-days { display: inline-flex; background: transparent; }
html body .ds-onair-ico img { width: 14px; height: auto; opacity: .8; }
html body .ds-onair-ico .days-message-box { left: auto; right: 0; top: 22px; z-index: 30; }
html body .ds-onair-ico .arrow-left { display: none; }
/* Lecteur compact dans la colonne sombre « En cours de diffusion » : bouton play + temps, pas de barre */
html body .ds-player--onair { flex: none; gap: 6px; margin-left: auto; }
html body .ds-player--onair .ds-play { width: 26px; height: 26px; font-size: 8px; border-color: #d8b25a; color: #d8b25a; }
html body .ds-player--onair .ds-play:hover { background: #d8b25a; color: #1c2229; }
html body .ds-player--onair.is-playing .ds-play { background: #d8b25a; color: #1c2229; }
html body .ds-player--onair .ds-play:disabled, html body .ds-player--onair .ds-play:disabled:hover { border-color: #3a434f; color: #5b6572; background: transparent; }
html body .ds-player--onair .ds-player-time { min-width: 0; font-size: 11px; color: #8b939f; }
html body .ds-player--onair .ds-player-time:empty { display: none; }
html body .ds-onair-foot { padding: 14px 22px; font-size: 11.5px; color: #8b939f; }
html body .ds-onair-empty { padding: 26px 22px; font-size: 13px; color: #8b939f; }

/* Boutons physiques : lignes d'affectation + carte formulaire */
html body .ds-rows { display: flex; flex-direction: column; gap: 10px; padding: 18px 22px; }
html body .ds-row {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 12px 14px;
    border: 1px solid #e6ded0;
    border-radius: 14px;
    background: var(--df-surface);
}
html body .ds-row--free { border-style: dashed; background: transparent; }
html body .ds-key {
    flex: none;
    height: 34px;
    padding: 0 14px;
    display: inline-flex; align-items: center;
    border-radius: var(--df-pill);
    background: var(--df-accent);
    color: var(--df-rail-text-on);
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
}
html body .ds-row--free .ds-key { background: transparent; border: 1px solid #d8cfbd; color: var(--df-muted); font-weight: 600; }
html body .ds-row-body { flex: 1; min-width: 160px; display: flex; flex-direction: column; gap: 3px; }
html body .ds-row-title { font-size: 13.5px; font-weight: 600; color: var(--df-ink); }
html body .ds-row-meta { font-size: 11.5px; color: var(--df-faint); }
html body .ds-row-meta b { font-weight: 600; color: var(--df-ink-2); }
html body .ds-row-chips { display: flex; gap: 6px; flex-wrap: wrap; }
html body .ds-row-actions { display: flex; gap: 8px; align-items: center; }
html body .ds-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; display: inline-block; background: var(--df-faint); vertical-align: middle; }
html body .ds-dot.is-on { background: #2f7a52; box-shadow: 0 0 0 3px var(--df-ok-bg); }
html body .ds-dot.is-off { background: var(--df-bad); box-shadow: 0 0 0 3px var(--df-bad-bg); }

/* Écran « Artistes » : index alphabétique collant à gauche, sections par lettre à droite. */
html body .ds-artists { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 20px; align-items: start; }
html body .ds-alpha-rail {
    position: sticky;
    top: 88px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 14px;
    background: var(--df-surface);
    border: 1px solid var(--df-line);
    border-radius: var(--df-radius);
}
html body .ds-alpha {
    flex: 1 1 34px;
    min-width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0 8px;
    border: 1px solid var(--df-line);
    border-radius: 10px;
    background: var(--df-surface);
    color: var(--df-ink);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
html body .ds-alpha:hover { border-color: var(--df-ink); }
html body .ds-alpha.is-active { background: var(--df-accent); border-color: var(--df-accent); color: var(--df-rail-text-on); }
html body .ds-alpha[data-letter=""] { flex: 1 1 100%; }
html body .ds-alpha-count { font-size: 10px; font-weight: 600; color: var(--df-faint); }
html body .ds-alpha.is-active .ds-alpha-count { color: rgba(255, 253, 248, .7); }

html body .ds-artists-list { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
html body .ds-artist-section {
    background: var(--df-surface);
    border: 1px solid var(--df-line);
    border-radius: var(--df-radius);
    overflow: hidden;
}
html body .ds-artist-letter {
    display: flex; align-items: baseline; gap: 12px;
    padding: 12px 20px;
    background: var(--df-surface-2);
    border-bottom: 1px solid var(--df-line-soft);
    font-size: 16px; font-weight: 600; color: var(--df-ink);
}
html body .ds-artist-letter-count { font-size: 11.5px; font-weight: 500; color: var(--df-muted); }
html body .ds-artist-grid {
    list-style: none;
    margin: 0;
    padding: 12px 20px 16px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 2px 18px;
}
html body .ds-artist-grid li { margin: 0; min-width: 0; }
html body .ds-artist-grid a {
    display: block;
    padding: 6px 8px;
    margin-left: -8px;
    border-radius: 8px;
    color: var(--df-ink);
    font-size: 13.5px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html body .ds-artist-grid a:hover { background: var(--df-surface-3); color: var(--df-accent-dark); text-decoration: none; }
html body .ds-artists-count { margin-left: auto; font-size: 12.5px; color: var(--df-muted); }

@media (max-width: 900px) {
    html body .ds-artists { grid-template-columns: 1fr; }
    html body .ds-alpha-rail { position: static; }
}

/* Écran « Boutons » : une carte par bouton affecté, avec ses compteurs d'appui.
   (Les anciennes règles .btn-liste .user-visuel de common.css imposaient un pavé gris
   300x195 ; le markup n'utilise plus ces classes.) */
html body .ds-btn-card {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
    overflow: hidden;
}
html body .ds-btn-head {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 12px 14px;
    background: var(--df-surface-2);
    border-bottom: 1px solid var(--df-line-soft);
}
html body .ds-btn-state { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--df-ink-2); }
html body .ds-btn-body { display: flex; flex-direction: column; gap: 12px; padding: 14px; }
html body .ds-btn-counters {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    background: var(--df-line-soft);
    border: 1px solid var(--df-line-soft);
    border-radius: 12px;
    overflow: hidden;
}
html body .ds-btn-counter { display: flex; flex-direction: column; gap: 2px; padding: 12px 10px; background: var(--df-surface); text-align: center; }
html body .ds-btn-counter-value { font-size: 26px; font-weight: 600; line-height: 1; color: var(--df-ink); font-variant-numeric: tabular-nums; }
html body .ds-btn-counter-label { font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--df-muted); }
html body .ds-btn-foot { padding: 0 14px 14px; display: flex; }
html body .ds-btn-foot .btn { flex: 1; }

html body .ds-form-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 22px;
    background: var(--df-surface);
    border: 1px solid var(--df-line);
    border-radius: var(--df-radius);
}
html body .ds-form-card .ds-eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--df-muted); }
html body .ds-form-card label { display: flex; flex-direction: column; gap: 6px; margin: 0; font-weight: 400; }
html body .ds-form-card label > span { font-size: 12.5px; color: var(--df-ink-2); }
html body .ds-form-card .form-control { border-radius: 12px; }
html body .ds-form-card .btn-block { width: 100%; }
html body .ds-form-card .ds-help { padding-top: 14px; border-top: 1px solid #f2ede3; font-size: 12px; line-height: 1.5; color: var(--df-muted); }

/* En-tête de page : la description reste sous le titre même avec le bouton à droite */
html body .panel-heading .ds-lead { margin: 10px 0 0; max-width: 660px; color: var(--df-ink-2); font-size: 14.5px; }
html body .weight_title {
    display: inline-block;
    vertical-align: middle;
    margin-left: 12px;
    padding: 3px 11px;
    border-radius: var(--df-pill);
    background: var(--df-surface-3);
    border: 1px solid var(--df-line);
    color: var(--df-ink-2);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.5;
}

/* --------------------------------------------------------------------------
   19. Éditeur de planning (mockup « Planning global »), listes à double
   colonne (multi-select) et composants de formulaire partagés.
   -------------------------------------------------------------------------- */

/* Champs empilés : libellé au-dessus, champ arrondi 12 px */
html body .ds-field { display: flex; flex-direction: column; gap: 6px; margin: 0; font-weight: 400; min-width: 0; }
html body .ds-field > span:first-child { font-size: 12.5px; color: var(--df-ink-2); }
html body .ds-field .form-control { height: 42px; border-radius: 12px; }
html body .ds-eyebrow { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--df-muted); }
html body .ds-section-body { padding: 20px 22px; display: flex; flex-direction: column; gap: 18px; }
html body .ds-subblock { display: flex; flex-direction: column; gap: 10px; }
html body .ds-check-row { display: flex; gap: 22px; flex-wrap: wrap; }
html body .ds-date-range { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
html body .ds-date-range .ds-field { flex: 1 1 180px; }
html body .ds-date-range .form-group { margin: 0; }
html body .ds-date-range .error-date { flex: 0 0 100%; margin: 0; color: var(--df-bad); font-size: 12.5px; }
html body .ds-planning .form-group { margin: 0; }

/* Cases à cocher (.ckbox / .rdiobox) : carré 16 px, coche accent, texte à côté */
html body .ckbox, html body .rdiobox { display: inline-flex; align-items: center; gap: 9px; max-width: none; margin: 0; cursor: pointer; font-size: 13px; color: var(--df-ink); }
html body .ckbox input[type="checkbox"], html body .rdiobox input[type="radio"] { opacity: 1; width: 16px; height: 16px; margin: 0; accent-color: var(--df-accent); cursor: pointer; }
html body .ckbox span, html body .rdiobox span { padding: 0; font-size: 13px; }
html body .ckbox span:before, html body .ckbox span:after, html body .rdiobox span:before, html body .rdiobox span:after { display: none; content: none; }

/* Carte identité du planning : nom + priorité */
html body .ds-planning-ident { display: flex; flex-direction: row; gap: 18px; align-items: flex-end; flex-wrap: wrap; margin: 0 0 22px; }
html body .ds-planning-ident .ds-field--grow { flex: 1 1 320px; }
html body .ds-planning-ident .ds-field--prio { flex: 0 0 200px; }
html body .ds-planning-ident .ds-field--prio .form-control { font-variant-numeric: tabular-nums; }
/* Boutons « Ajouter une plage de dates / un remplacement » : un peu d'air avec
   le champ qui suit (formulaires en grille Bootstrap). */
html body .ds-add-row { margin: 14px 0 6px; float: none; clear: both; }
html body .ds-field-help { flex: 1 1 100%; margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--df-muted); }
html body .ds-field-help strong { color: var(--df-ink-2); }

/* Semaine type : une colonne par jour */
html body .ds-planning-week .pl-container {
    float: none;
    width: auto;
    display: flex;
    gap: 10px;
    padding: 18px 22px;
    border: 0;
    overflow-x: auto;
}
html body .ds-planning-week .pl-container:after { content: none; }
html body .pl-day {
    float: none;
    flex: 1 1 0;
    min-width: 150px;
    width: auto;
    display: flex;
    flex-direction: column;
    padding: 0;
    background: var(--df-surface);
    border: 1px solid #e6ded0;
    border-radius: 14px;
    overflow: hidden;
}
html body .pl-day.Samedi, html body .pl-day.Dimanche { background: #faf7f0; }
html body .pl-day-header {
    position: static;
    top: auto; left: auto;
    transform: none;
    width: auto;
    margin: 0;
    padding: 12px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background: #f7f3ea;
    border-bottom: 1px solid var(--df-line-soft);
}
html body .pl-day.Samedi .pl-day-header, html body .pl-day.Dimanche .pl-day-header { background: #f2ede3; }
html body .pl-day-header:after { content: none; }
html body .panel-heading .pl-day-header p,
html body .pl-day-header p {
    margin: 0;
    background: transparent;
    color: var(--df-muted);
    font-family: var(--df-font);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-align: left;
}
html body .pl-day.Samedi .pl-day-header p, html body .pl-day.Dimanche .pl-day-header p { color: #bcb3a4; }
html body .dupliquerjours { position: static; top: auto; right: auto; width: 22px; height: 22px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; color: var(--df-faint); cursor: pointer; font-size: 12px; background: none; }
html body .dupliquerjours:before { content: "⧉"; font-family: var(--df-font); }
html body .dupliquerjours:hover { background: var(--df-surface-3); color: var(--df-ink); }
html body .pl-day-container {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    width: auto;
    min-height: 120px;
    padding: 8px;
    background: transparent;
    border: 0;
}
html body .pl-programmation {
    flex: none;
    min-height: 48px;
    padding: 8px 10px 8px;
    border-radius: 10px;
    color: #fffdf8;
    font-size: 11.5px;
    line-height: 1.3;
    box-shadow: none;
    overflow: hidden;
    text-wrap: pretty;
}
html body .pl-programmation strong { display: block; margin-bottom: 3px; padding-right: 44px; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
html body .pl-programmation br { display: none; }
html body .pl-edit, html body .pl-remove { top: 7px; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; border-radius: 5px; font-size: 10px; opacity: .8; color: inherit; }
html body .pl-edit { right: 26px; }
html body .pl-remove { right: 6px; }
html body .pl-edit:hover, html body .pl-remove:hover { opacity: 1; background: rgba(255, 255, 255, .22); }
html body .pl-add-content {
    margin: 0;
    padding: 0;
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f9f5ec;
    border-top: 1px solid var(--df-line-soft);
    color: #5f6672;
    font-family: var(--df-font);
    font-size: 12px;
    letter-spacing: 0;
    font-size: 0;            /* le libellé d'origine (« Ajouter une playlist ») est remplacé */
}
html body .pl-add-content:before { content: "+ Playlist"; font-size: 12px; }
html body .pl-add-content:hover { background: var(--df-surface-3); color: var(--df-ink); }
/* Couleurs de playlists conservées (pl-color-N de common.css) ; les plus claires
   passent en encre pour rester lisibles. */
html body .pl-color-5, html body .pl-color-6, html body .pl-color-8, html body .pl-color-12 { color: var(--df-ink); }

/* Fenêtre d'édition d'une plage */
html body .pl-overflow { background: rgba(27, 31, 38, .45); }
html body .pl-edit-container {
    width: 760px;
    max-width: calc(100vw - 40px);
    margin-left: -380px;
    padding: 24px 26px 26px;
    background: var(--df-surface);
    border: 1px solid var(--df-line);
    border-radius: var(--df-radius);
    box-shadow: 0 28px 60px -18px rgba(20, 24, 31, .45), 0 2px 8px rgba(20, 24, 31, .12);
    color: var(--df-ink);
}
@media (max-width: 800px) { html body .pl-edit-container { left: 20px; margin-left: 0; } }
html body .panel-site-traffic .box-home .pl-edit-container h3,
html body .pl-edit-container h3 { margin: 0 0 18px; padding-right: 40px; color: var(--df-ink); font-size: 22px; font-weight: 600; text-transform: none; letter-spacing: -0.01em; }
html body .pl-close { top: 18px; right: 18px; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--df-line); border-radius: 50%; color: var(--df-ink-2); font-size: 12px; }
html body .pl-close:hover { border-color: var(--df-ink); color: var(--df-ink); }
html body .ds-pl-edit-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 22px; }
html body .ds-pl-edit-main { display: flex; flex-direction: column; gap: 14px; }
html body .ds-pl-edit-side { display: flex; flex-direction: column; gap: 10px; padding: 16px; background: var(--df-surface-2); border: 1px solid var(--df-line-soft); border-radius: 14px; }
html body .pl-edit-container .pl-label { display: block; font-weight: 400; font-size: 12.5px; color: var(--df-ink-2); }
html body .pl-edit-container input,
html body .pl-edit-container select,
html body .pl-edit-container .form-control {
    float: none;
    display: block;
    width: 100%;
    height: 42px;
    padding: 0 14px;
    background: var(--df-surface);
    border: 1px solid var(--df-line);
    border-radius: 12px;
    color: var(--df-ink);
    box-shadow: none;
}
/* Message de fermeture : deux champs libellés (quel message, combien de minutes
   avant la fin) et la croix de retrait sur la même ligne. */
html body .ds-pl-edit-help { margin: -2px 0 2px; font-size: 12px; line-height: 1.5; color: var(--df-muted); }
html body .ds-pl-edit-help strong { color: var(--df-ink-2); font-weight: 600; }
html body .pl-edit-container .close-message {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-end;
    padding: 12px;
    background: var(--df-surface);
    border: 1px solid var(--df-line-soft);
    border-radius: 12px;
}
html body .pl-edit-container .close-message-field { display: flex; flex-direction: column; gap: 5px; margin: 0; min-width: 0; font-weight: 400; }
html body .pl-edit-container .close-message-field--msg { flex: 1 1 160px; }
html body .pl-edit-container .close-message-field--min { flex: 0 1 130px; }
html body .pl-edit-container .close-message-label { font-size: 11px; color: var(--df-muted); }
html body .pl-edit-container .close-message select,
html body .pl-edit-container .close-message input { width: 100%; height: 38px; }
html body .pl-edit-container .close-message .minute-fermeture { text-align: center; font-variant-numeric: tabular-nums; }
html body .pl-edit-container .close-message-hint { flex: 1 1 100%; font-size: 11.5px; color: var(--df-faint); }
html body .pl-edit-container .delete-message {
    flex: none;
    width: 32px; height: 38px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--df-bad);
    font-weight: 600;
    cursor: pointer;
}
html body .pl-edit-container .delete-message:hover { background: var(--df-bad-bg); border-radius: 8px; }
html body .pl-edit-container .btn-valid,
html body .pl-edit-container .btn-add-close {
    float: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-transform: none;
    box-shadow: none;
    border-width: 1px;
}
html body .pl-edit-container .btn-valid { margin-top: 18px; }
html body .pl-edit-container .btn-add-close { color: var(--df-ink); background: var(--df-surface); }
html body .pl-edit-container .clear { display: none; }

/* Listes à double colonne (multi-select) : deux cartes « disponibles / sélectionnés »
   avec leur champ de recherche en tête, comme les listes d'attribution du mockup. */
html body .ms-container { display: flex; gap: 12px; max-width: 760px; background: none; }
html body .ms-container:after { content: none; }
html body .ms-container .ms-selectable,
html body .ms-container .ms-selection {
    float: none;
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    background: var(--df-surface);
    color: var(--df-ink);
    border: 1px solid #e6ded0;
    border-radius: 14px;
    overflow: hidden;
}
html body .ms-container .ms-selectable:before,
html body .ms-container .ms-selection:before {
    content: "Disponibles";
    display: block;
    padding: 9px 12px 0;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--df-faint);
    background: #f9f5ec;
}
html body .ms-container .ms-selection:before { content: "Sélectionnés"; color: var(--df-accent); }
html body .ms-container .search-input {
    width: 100%;
    height: 36px;
    margin: 0;
    padding: 0 12px;
    border: 0;
    border-bottom: 1px solid var(--df-line-soft);
    border-radius: 0;
    background: #f9f5ec;
    color: var(--df-ink);
    font-size: 12.5px;
    outline: none;
}
html body .ms-container .ms-list {
    height: 190px;
    border: 0;
    border-radius: 0;
    background: var(--df-surface);
    box-shadow: none;
}
html body .ms-container .ms-list.ms-focus { box-shadow: none; border: 0; }
html body .ms-container .ms-selectable li.ms-elem-selectable,
html body .ms-container .ms-selection li.ms-elem-selection { padding: 10px 12px; font-size: 13px; border-bottom: 1px solid #f2ede3; }
html body .ms-container .ms-selection li.ms-elem-selection { font-weight: 600; }
html body .ms-container .ms-selectable li.ms-hover,
html body .ms-container .ms-selection li.ms-hover { background: var(--df-surface-3); color: var(--df-ink); }
html body .ms-container .ms-selectable li.ms-elem-selectable:after { content: "+"; float: right; color: var(--df-faint); }
html body .ms-container .ms-selection li.ms-elem-selection:after { content: "✕"; float: right; font-size: 10px; color: var(--df-bad); }
/* Grille d'attribution : chaque colonne (Disponibles + Sélectionnés empilés) est séparée
   de la suivante par un trait vertical. Astuce : bordure gauche sur toutes les colonnes,
   décalée de -1px, et overflow hidden sur la grille pour masquer celle de la 1re colonne
   de chaque ligne (fonctionne aussi quand les colonnes passent à la ligne). */
html body .ds-assign-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    column-gap: 0;
    row-gap: 28px;
    margin: 0 -20px;
    overflow: hidden;
}
html body .ds-assign-col {
    display: flex; flex-direction: column; gap: 10px; min-width: 0;
    padding: 0 20px;
    margin-left: -1px;
    border-left: 1px solid var(--df-line);
}
html body .ds-assign-col .ds-eyebrow { padding-bottom: 8px; border-bottom: 1px solid var(--df-line-soft); }
html body .ds-assign-col .ms-container { max-width: none; flex-direction: column; }
/* En colonne, « flex: 1 1 0 » réduirait les deux listes à leurs bordures */
html body .ds-assign-col .ms-container .ms-selectable,
html body .ds-assign-col .ms-container .ms-selection { flex: 0 0 auto; }
html body .ds-assign-col .ms-container .ms-list { height: 150px; }

/* En-têtes du plugin (« Option(s) disponible(s) ») : remplacés par les libellés ci-dessus */
html body .ms-container .opts-select { display: none; }

/* Titres intermédiaires des formulaires (h2 « Gestion des messages… ») */
html body .panel-body h2 { font-size: 20px; margin: 10px 0 14px; padding-top: 18px; border-top: 1px solid var(--df-line-soft); }

/* Zone de dépôt des fichiers (messages, titres) */
html body #drop {
    float: none;
    padding: 34px 24px;
    margin-bottom: 16px;
    border: 1px dashed #cfc4ae;
    border-radius: 16px;
    background: var(--df-surface-2);
    color: var(--df-muted);
    font-size: 13px;
    font-weight: 500;
    text-transform: none;
}
html body #drop a {
    display: inline-block;
    margin: 12px 0 0 10px;
    height: 36px;
    line-height: 36px;
    padding: 0 16px;
    border-radius: var(--df-pill);
    background: var(--df-accent);
    color: var(--df-rail-text-on);
    font-size: 12.5px;
    font-weight: 600;
}
html body #drop a:hover { background: var(--df-accent-dark); color: var(--df-rail-text-on); text-decoration: none; }
html body .upload-files-box { background: var(--df-surface); border: 1px solid var(--df-line); border-radius: var(--df-radius); box-shadow: none; }

/* --------------------------------------------------------------------------
   20. Éditeur de programmation (mockup « Éditer une programmation ») :
       carte d'identité, colonne « Programmation » (glisser-déposer) et
       bibliothèque de messages en accordéon.
   -------------------------------------------------------------------------- */

/* Carte d'identité : nom, dossier, activation sur une même ligne */
html body .ds-prog-ident { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 18px; margin: 0 0 22px; }
html body .ds-prog-ident .ds-field--grow { flex: 1 1 320px; }
html body .ds-prog-ident .ds-field--folder { flex: 1 1 240px; }
/* Activation : bloc pleine largeur sous Nom / Dossier, deux options bien visibles */
html body .ds-prog-activation { flex: 0 0 100%; display: flex; flex-direction: column; gap: 10px; padding-top: 16px; border-top: 1px solid var(--df-line-soft); }
html body .ds-activation-options { display: flex; gap: 12px; flex-wrap: wrap; }
html body .ds-prog-ident .ds-activation-option {
    flex: 1 1 260px;
    display: flex; flex-direction: row; align-items: flex-start; gap: 12px;
    margin: 0; padding: 12px 14px;
    background: var(--df-surface-2);
    border: 1px solid var(--df-line);
    border-radius: var(--df-radius-sm);
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}
html body .ds-prog-ident .ds-activation-option:hover { border-color: var(--df-accent); }
html body .ds-prog-ident .ds-activation-option.is-on { background: var(--df-accent-soft); border-color: var(--df-accent); }
html body .ds-prog-ident .ds-activation-option input[type="checkbox"] { flex: 0 0 auto; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--df-accent); cursor: pointer; }
html body .ds-prog-ident .ds-activation-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
html body .ds-prog-ident .ds-activation-title { font-size: 14px; font-weight: 600; color: var(--df-ink); }
html body .ds-prog-ident .ds-activation-hint { font-size: 12px; color: var(--df-muted); line-height: 1.4; }
html body .ds-prog .form-group { margin: 0; }

/* En-tête de l'éditeur : titre + nombre de titres entre deux messages */
html body .ds-prog-editor { margin: 0 0 22px; }
html body .ds-prog-editor-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin: 0 0 18px;
}
html body .ds-prog-h2 { margin: 0; font-size: 24px; font-weight: 600; letter-spacing: -0.01em; color: var(--df-ink); }
html body .ds-prog-sub { margin: 6px 0 0; max-width: 620px; font-size: 13.5px; color: var(--df-ink-2); }
html body .ds-nbtitle {
    display: flex; align-items: center; gap: 12px;
    height: 44px; margin: 0; padding: 0 8px 0 16px;
    background: var(--df-surface);
    border: 1px solid var(--df-line);
    border-radius: var(--df-pill);
    font-weight: 400;
}
html body .ds-nbtitle > span { font-size: 12.5px; color: var(--df-ink-2); white-space: nowrap; }
html body .ds-nbtitle input {
    width: 56px; height: 32px; padding: 0 4px;
    text-align: center;
    border: 1px solid var(--df-line);
    border-radius: 8px;
    background: var(--df-surface-2);
    color: var(--df-ink);
    font-size: 14px; font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Deux colonnes : programmation à gauche, bibliothèque à droite */
html body .ds-prog-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 18px; align-items: start; }
html body .ds-prog-col { margin: 0; }
html body .ds-prog-col .ds-section-head { gap: 12px; }
html body .ds-prog-step {
    flex: none;
    width: 26px; height: 26px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 8px;
    background: var(--df-rail);
    color: var(--df-rail-text-on);
    font-size: 12px; font-weight: 700;
}
html body .ds-prog-step--alt { background: var(--df-surface-3); border: 1px solid #e6ded0; color: var(--df-muted); }
html body .ds-prog-coltitle { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 15px; font-weight: 600; color: var(--df-ink); }
html body .ds-prog-colsub { font-size: 11.5px; font-weight: 400; color: var(--df-muted); }
html body .ds-clear-prog { cursor: pointer; }

/* Zone de dépôt */
html body .ds-prog-drop { padding: 14px 18px 18px; }
html body .ds-prog-drop .sortable-messages {
    list-style: none;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    overflow: visible;
    display: flex; flex-direction: column; gap: 7px;
}
html body .ds-drop-hint {
    order: 9999; /* toujours en bas de la liste sortable, quelle que soit la position DOM */
    list-style: none;
    margin-top: 12px;
    padding: 22px 16px;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    border: 1px dashed #cfc4ae;
    border-radius: 14px;
    text-align: center;
    transition: border-color .15s ease, background-color .15s ease;
}
html body .ds-drop-hint.is-active { border-color: var(--df-accent); border-style: dashed; }
html body .ds-drop-hint.is-over { background: var(--df-accent-soft); border-color: var(--df-accent); }
html body .ds-drop-hint.is-over .ds-drop-ico, html body .ds-drop-hint.is-over .ds-drop-title { color: var(--df-accent-dark); }
html body .ds-drop-ico { font-size: 19px; color: var(--df-faint); }
html body .ds-drop-title { font-size: 13.5px; font-weight: 600; color: var(--df-ink-2); }
html body .ds-drop-help { font-size: 12.5px; color: var(--df-faint); max-width: 280px; }
html body .ds-prog-foot {
    padding: 13px 18px;
    border-top: 1px solid var(--df-line-soft);
    background: var(--df-surface-2);
    font-size: 11.5px; line-height: 1.5;
    color: var(--df-muted);
}
html body .ds-prog-foot strong { color: var(--df-ink-2); }

/* Bibliothèque : recherche, dossiers en accordéon, liste défilante */
html body .ds-prog-search { padding: 14px 18px; border-bottom: 1px solid var(--df-line-soft); }
html body .ds-prog-search .ds-search { width: 100%; background: var(--df-surface-2); }
html body .ds-prog-lib { padding: 14px 18px 18px; max-height: 660px; overflow: auto; }
html body .ds-prog-lib .categories, html body .ds-prog-lib .messagestodrag { list-style: none; margin: 0; padding: 0; }
html body .ds-prog-lib .messagestodrag { display: flex; flex-direction: column; gap: 6px; }
html body .ds-prog-lib .ds-lib-group { margin: 0 0 8px; }
html body .ds-prog-lib .inner { display: none; padding: 8px 0 4px 12px; }
html body .ds-prog-lib .subcat {
    margin: 10px 0 6px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--df-muted);
    background: transparent;
    padding: 0;
    border-radius: 0;
}
html body .ds-prog-lib .ds-lib-noresult { margin: 12px 2px 0; font-size: 12.5px; color: var(--df-muted); }
html body .selectcats ul li a.toggle {
    display: flex; align-items: center; gap: 9px;
    width: 100%;
    padding: 10px 14px;
    background: var(--df-surface-2);
    color: var(--df-ink);
    border: 1px solid var(--df-line);
    border-radius: 12px;
    font-size: 13.5px; font-weight: 600;
    transition: background .2s ease;
}
html body .selectcats ul li a.toggle:before { content: '›'; color: var(--df-faint); font-size: 15px; line-height: 1; transition: transform .2s ease; }
html body .selectcats ul li a.toggle.is-open:before { transform: rotate(90deg); }
html body .selectcats ul li a.toggle:hover { background: var(--df-surface-3); color: var(--df-ink); text-decoration: none; }

/* Ligne de message (programmation et bibliothèque) */
html body .ds-msgrow {
    display: flex; align-items: center; gap: 9px;
    margin: 0;
    padding: 8px 10px;
    border: 1px solid #e6ded0;
    border-radius: 12px;
    background: var(--df-surface);
    color: var(--df-ink);
}
html body .ds-msgrow:hover { border-color: #d8cfbd; background: var(--df-surface-2); }
html body .ds-msg-grip { flex: none; color: var(--df-faint); font-size: 13px; letter-spacing: -1px; cursor: grab; }
html body .ds-msg-name {
    flex: 1; min-width: 0;
    width: auto;
    color: var(--df-ink);
    font-size: 13.5px; font-weight: 600; line-height: 1.25;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html body .ds-msgrow--folder .ds-msg-name .form-control { height: 32px; border-radius: 8px; font-size: 13px; }
html body .ds-prog .programmation-ico,
html body .ds-msg-tools {
    position: static;
    left: auto; top: auto;
    width: auto; height: auto;
    flex: none;
    display: flex; align-items: center; gap: 7px;
    padding: 0; margin: 0;
    text-align: left;
}
html body .ds-msg-tools .display-days { display: inline-flex; align-items: center; background: transparent; }
html body .ds-msg-tools .display-days img { width: 15px; height: auto; opacity: .75; }
html body .ds-msg-tools .days-message-box { left: auto; right: 0; top: 22px; margin: 0; z-index: 30; font-size: 12px; line-height: 1.5; border-radius: 10px; }
html body .ds-mtype {
    flex: none;
    padding: 2px 8px;
    border-radius: var(--df-pill);
    background: var(--df-surface-3);
    color: var(--df-muted);
    font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    white-space: nowrap;
}
html body .ds-mtype--fix { background: #f0eaf7; color: #5c3585; }
html body .ds-mtype--fer { background: #fbf1e2; color: #8a5209; }
html body .ds-prog .nb-songs-input {
    flex: none;
    float: none;
    display: inline-block;
    width: 38px; height: 30px;
    margin: 0;
    padding: 0 2px;
    text-align: center;
    border: 1px solid var(--df-line);
    border-radius: 8px;
    background: var(--df-surface-2);
    color: var(--df-ink);
    font-size: 13px; font-weight: 600;
    font-variant-numeric: tabular-nums;
}
html body .ds-prog .mfix .nb-songs-input { display: none; }
html body .ds-prog .time-mini-input {
    flex: none;
    float: none;
    width: 74px; height: 32px;
    margin: 0;
    padding: 0 8px;
    display: inline-block;
    border: 1px solid var(--df-line);
    border-radius: 9px;
    background: var(--df-surface);
    color: var(--df-ink);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}
html body .ds-msg-tools .garbage-message {
    flex: none;
    float: none;
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px;
    margin: 0;
    border: 1px solid #e8c4bd;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}
html body .ds-msg-tools .garbage-message:hover { background: var(--df-bad-bg); }
html body .ds-msg-tools .garbage-message img { width: 13px; height: auto; opacity: .7; }

/* Lecteur audiojs miniature dans les lignes de message */
html body .ds-msg-tools .audiojs {
    float: none;
    width: 26px; height: 26px;
    margin: 0;
    border-radius: 50%;
    background: var(--df-surface-3);
    box-shadow: none;
}
html body .ds-msg-tools .audiojs .play-pause { width: 26px; height: 26px; padding: 0; border: 0; }
html body .ds-msg-tools .audiojs p { width: 26px; height: 26px; margin: 0; }
html body .ds-msg-tools .audiojs audio,
html body .ds-msg-tools .audiojs .scrubber,
html body .ds-msg-tools .audiojs .time,
html body .ds-msg-tools .audiojs .error-message { display: none; }

/* Aides visuelles pendant le glisser-déposer */
html body .ds-prog .ui-sortable-helper { box-shadow: 0 14px 30px -14px rgba(20,24,31,.45); }
html body .ds-prog .ui-sortable-placeholder { visibility: visible !important; height: 44px; border: 1px dashed #cfc4ae; border-radius: 12px; background: var(--df-surface-2); }

html body .ds-prog-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding-top: 20px; border-top: 1px solid var(--df-line); }
html body .ds-prog-actions .delete-entity { margin-left: auto; }
html body .btn-danger-outline { background: transparent; border: 1px solid #e8c4bd; color: var(--df-bad); }
html body .btn-danger-outline:hover, html body .btn-danger-outline:focus { background: var(--df-bad-bg); border-color: var(--df-bad); color: var(--df-bad); }

html body .ellipse-overflow-name { color: var(--df-ink); }

@media (max-width: 1100px) {
    html body .ds-prog-cols { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   16. Adaptatif
   -------------------------------------------------------------------------- */

@media (max-width: 1200px) {
    :root { --df-rail-w: 232px; }
    html body .contentpanel { padding: 24px; }
}

@media (max-width: 900px) {
    html body .logopanel { width: 200px; }
    html body .leftpanel { width: 200px; }
    html body .contentpanel { width: calc(100% - 200px); padding: 18px; }
    html body .panel-heading { padding: 18px 18px 0; }
    html body .panel-body { padding: 16px 18px 20px; }
    html body .panel-title, html body .subtitle { font-size: 26px; }
}

/* --------------------------------------------------------------------------
   20. Pages ouvertes dans la fancybox (layout="none") et fiche titre
   -------------------------------------------------------------------------- */

/* Sans rail ni barre haute : pleine largeur, contenu centré, titre compact */
html body .contentpanel.ds-modal-page {
    width: 100%;
    min-height: 0;
    padding: 26px 32px 40px;
}
html body .ds-modal-page > .row { max-width: 1040px; margin-left: auto; margin-right: auto; }
html body .ds-modal-page .panel { margin-bottom: 30px; }
html body .ds-modal-page .panel-heading { padding: 0 2px 14px; }
html body .ds-modal-page .panel-heading:before { margin-bottom: 4px; font-size: 10px; }
html body .ds-modal-page .panel-heading .panel-title,
html body .ds-modal-page .panel-title { font-size: 26px; }
html body .ds-modal-page .panel-heading p { margin-top: 4px; font-size: 13.5px; }
html body .ds-modal-page .panel-body { padding: 22px 24px 24px; }

/* Fiche titre : champs en grille (libellé au-dessus), sections séparées */
html body .ds-song-form .alert { margin-bottom: 18px; }
html body .ds-song-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 18px;
}
html body .ds-song-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
html body .ds-song-grid .ds-span-2 { grid-column: 1 / -1; }
html body .ds-song-grid .ds-field > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html body .ds-song-grid .form-control { width: 100%; max-width: none; }
html body .ds-song-grid select.form-control { padding-right: 30px; }
html body .ds-song-sep {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    margin: 24px 0 12px;
    padding-top: 18px;
    border-top: 1px solid var(--df-line-soft);
}
html body .ds-song-sep .ds-eyebrow { color: var(--df-ink-2); }
html body .ds-song-hint { font-size: 12px; color: var(--df-muted); }

/* Listes double colonne de la fiche : pleine largeur, groupes « Styles / Ambiances » lisibles */
html body .ds-song-ms .ms-container { max-width: none; }
html body .ds-song-ms .ms-container .ms-list { height: 236px; }
html body .ds-song-ms .ms-container li.ms-elem-selectable,
html body .ds-song-ms .ms-container li.ms-elem-selection { background: var(--df-surface); }
html body .ds-song-ms .ms-container li.ms-hover { background: var(--df-surface-3); }
html body .ds-song-ms .ms-container .ms-optgroup-label {
    margin: 0;
    padding: 8px 12px 5px;
    background: var(--df-surface-2);
    border-bottom: 1px solid var(--df-line-soft);
    color: var(--df-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    cursor: pointer;
}
html body .ds-song-ms .ms-container .ms-optgroup-label:hover { color: var(--df-accent); }
html body .ds-song-ms .ms-container .ms-optgroup-container + .ms-optgroup-container .ms-optgroup-label { border-top: 1px solid var(--df-line-soft); }

html body .ds-song-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 26px;
    padding-top: 18px;
    border-top: 1px solid var(--df-line-soft);
}

@media (max-width: 760px) {
    html body .contentpanel.ds-modal-page { padding: 18px; }
    html body .ds-song-grid, html body .ds-song-grid--3 { grid-template-columns: 1fr; }
    html body .ds-song-ms .ms-container { flex-direction: column; }
    html body .ds-song-ms .ms-container .ms-selectable,
    html body .ds-song-ms .ms-container .ms-selection { flex: 0 0 auto; }
}

/* --------------------------------------------------------------------------
   21. Coque collante : la barre haute et le rail de gauche restent visibles
   quand la page est longue ; seule la zone de contenu défile.
   `section` était un simple bloc contenant deux flottants (hauteur nulle) :
   un `position: sticky` sur le rail n'y avait aucun effet, d'où le passage en flex.
   -------------------------------------------------------------------------- */

html body > header { position: sticky; top: 0; z-index: 1020; }
html body > section { display: flex; align-items: flex-start; }
html body > section > .leftpanel {
    float: none;
    flex: none;
    position: sticky;
    top: var(--df-topbar-h);
    height: calc(100vh - var(--df-topbar-h));
    min-height: 0;
    padding-bottom: 0;
    overflow-y: auto;
    overflow-x: hidden;
}
html body > section > .leftpanel .leftpanelinner { min-height: 100%; }
/* La zone de contenu est enveloppée dans un div.mainpanel (header.tpl) : c'est lui l'enfant flex.
   Sans largeur explicite il se rétractait à son contenu ; .contentpanel prend alors toute sa largeur. */
html body > section > .mainpanel { float: none; flex: 1 1 0; min-width: 0; width: auto; }
html body > section > .mainpanel > .contentpanel { float: none; width: 100%; }
/* L'index alphabétique des artistes se cale sous la barre haute désormais fixe */
html body .ds-alpha-rail { top: calc(var(--df-topbar-h) + 16px); }

/* --------------------------------------------------------------------------
   22. Tableaux de liste
   -------------------------------------------------------------------------- */

/* common.css (`.table > .success > tr > th`, 18 px) l'emportait par spécificité sur
   l'en-tête compact voulu par le thème : on réaffirme la typo sur ce sélecteur. */
html body .table > thead.success > tr > th,
html body .table > .success > tr > th {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/* .ds-table : colonnes alignées à gauche (datatable.css force text-right sur tous les td),
   colonnes techniques étroites (ID, type), actions serrées à droite, flèche de tri
   collée au libellé plutôt qu'au bord de la colonne. */
html body .ds-table > thead > tr > th,
html body .ds-table > tbody > tr > td { text-align: left; }
html body .ds-table > thead > tr > th.text-right,
html body .ds-table > tbody > tr > td.text-right { text-align: right; }
html body .ds-table > thead > tr > th.text-center,
html body .ds-table > tbody > tr > td.text-center { text-align: center; }
html body .ds-table > tbody > tr > td { padding: 10px 16px; }
html body .ds-table .ds-col-id { width: 72px; color: var(--df-muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
html body .ds-table .ds-col-type { width: 150px; }
html body .ds-table .ds-col-actions { width: 1%; white-space: nowrap; }
html body .ds-table .ds-col-actions .btn { margin-right: 0; margin-left: 6px; }
html body .ds-table.dataTable thead th.sorting,
html body .ds-table.dataTable thead th.sorting_asc,
html body .ds-table.dataTable thead th.sorting_desc { padding-right: 16px; }
html body .ds-table.dataTable thead .sorting:after,
html body .ds-table.dataTable thead .sorting_asc:after,
html body .ds-table.dataTable thead .sorting_desc:after {
    position: static;
    display: inline-block;
    margin-left: 6px;
    vertical-align: baseline;
}

/* Pastille de type (style / ambiance) */
html body .ds-type {
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--df-pill);
    background: var(--df-surface-3);
    border: 1px solid var(--df-line);
    color: var(--df-ink-2);
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.4;
}
html body .ds-type--ambiance { background: var(--df-accent-soft); border-color: #ddd0ec; color: var(--df-accent); }