/* =========================================================================
   ESDI MANAGER — 20-modale-widget.css (v3, 2026-09-22)
   LA MODALE « NOUVEAU WIDGET » (public/js/esdi-dashboard-modale.js).

   LA CHAÎNE DE HAUTEURS, et pourquoi elle est écrite ainsi : la boîte a une hauteur FIXE ; le corps est
   un flex item (flex:1, min-height:0) qui NE prend PAS `height:100%` — un pourcentage y doublerait la
   hauteur de l'en-tête et du pied, et le contenu déborderait de la boîte (le défaut mesuré le 21/09 :
   la molette faisait défiler la page DERRIÈRE la modale). Chaque colonne défile DANS le corps
   (overflow:auto, min-height:0), et le body est verrouillé tant que la modale est ouverte.
   Jetons du DS uniquement ; mouvements courts, coupés par prefers-reduced-motion.
   ========================================================================= */
html.esdi-modale-ouverte, body.esdi-modale-ouverte { overflow: hidden !important; }

.esdi-modale--widget .esdi-modale__boite { width: min(1240px, 100%); height: min(92vh, 900px); max-height: none; display: flex; flex-direction: column; }
.esdi-modale--widget .esdi-modale__tete, .esdi-modale--widget .esdi-modale__pied { flex: 0 0 auto; }
.esdi-modale--widget .esdi-modale__corps { flex: 1 1 auto; min-height: 0; padding: 0; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) 380px; }
.esdi-wm__scene { position: relative; min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 18px 22px 22px; background: var(--bg); }
.esdi-wm__inspecteur { min-width: 0; min-height: 0; display: flex; flex-direction: column; border-left: 1px solid var(--line); background: var(--bg-card); }
.esdi-wm__onglets { flex: 0 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--line); }
.esdi-wm__volet { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 14px 16px 22px; }

.esdi-wm__titre { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faded); margin: 0 0 10px; }
.esdi-wm__sous-titre { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-faded); margin: 16px 0 8px; }
.esdi-wm__champ { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.esdi-wm__label { font-size: 12px; font-weight: 600; color: var(--ink-soft); }
.esdi-wm__switch { display: flex; align-items: center; gap: 8px; font-size: 13px; margin: 8px 0; cursor: pointer; }
.esdi-wm__switch input { width: 16px; height: 16px; accent-color: var(--primary-500); }
.esdi-wm__aide { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--ink-soft); margin-top: 8px; }
.esdi-wm__aide i, .esdi-wm__aide svg { width: 13px; height: 13px; flex: 0 0 auto; }

/* ── La scène : cadre d'aperçu, barre rapide, puces ────────────────────── */
.esdi-wm__cadre { border: 1px dashed var(--line); border-radius: 18px; padding: 14px 16px 16px; background: var(--bg-card); }
.esdi-wm__titre-input { width: 100%; border: 0; border-bottom: 2px solid transparent; background: transparent; font-size: 20px; font-weight: 650; color: var(--ink); padding: 4px 2px; margin-bottom: 10px; letter-spacing: -.01em; transition: border-color .15s; }
.esdi-wm__titre-input:focus { outline: none; border-bottom-color: var(--accent-500); }
.esdi-wm__titre-input::placeholder { color: var(--ink-faded); font-weight: 500; }
.esdi-wm__apercu { display: flex; justify-content: center; align-items: center; min-height: 320px; padding: 14px; background: var(--bg); border-radius: 14px; background-image: radial-gradient(rgba(127,127,127,.18) 1px, transparent 1px); background-size: 16px 16px; }
.esdi-wm__apercu .esdi-widget { box-shadow: 0 10px 30px -14px rgba(0,0,0,.25); transition: width .22s cubic-bezier(.16,1,.3,1), height .22s cubic-bezier(.16,1,.3,1), opacity .15s; }
.esdi-wm__apercu .esdi-widget:hover { transform: none; }
.esdi-wm__apercu--perime .esdi-widget { opacity: .6; }
/* Le fantôme : la carte « à compléter », avec la liste de ce qui manque — jamais un message rouge. */
.esdi-wm__fantome { width: 60%; min-height: 150px; border: 2px dashed var(--line); border-radius: 14px; padding: 16px 18px; background: var(--bg-card); color: var(--ink-soft); display: flex; flex-direction: column; gap: 6px; }
.esdi-wm__fantome-titre { font-size: 13px; font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 6px; }
.esdi-wm__fantome-titre i, .esdi-wm__fantome-titre svg { width: 15px; height: 15px; color: var(--accent-600); }
.esdi-wm__fantome-item { display: flex; align-items: center; gap: 6px; font-size: 12.5px; }
.esdi-wm__fantome-item i, .esdi-wm__fantome-item svg { width: 13px; height: 13px; color: var(--ink-faded); }
.esdi-wm__fantome-item--fait { color: var(--ink-faded); text-decoration: line-through; }
.esdi-wm__fantome-item--fait i, .esdi-wm__fantome-item--fait svg { color: var(--sig-ok); }
.esdi-wm__fantome-item button { border: 0; background: none; color: var(--primary-500); font-weight: 600; padding: 0; cursor: pointer; }
.esdi-wm__alerte { margin-top: 10px; font-size: 12.5px; color: var(--sig-alert-text); background: var(--sig-alert-bg); border-radius: 8px; padding: 6px 10px; }

.esdi-wm__rapide { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 12px 2px 0; }
.esdi-wm__rapide .btn i, .esdi-wm__rapide .btn svg { width: 14px; height: 14px; vertical-align: -2px; }
.esdi-wm__puces { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 10px 2px 0; }
.esdi-wm__puce { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px 5px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-card); color: var(--ink); font-size: 12.5px; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .12s; }
.esdi-wm__puce:hover { border-color: var(--accent-500); }
.esdi-wm__puce:active { transform: scale(.97); }
.esdi-wm__puce--actif { border-color: var(--primary-500); box-shadow: 0 0 0 2px rgba(27,90,168,.15); }
.esdi-wm__puce--incomplet::after { content: ''; width: 7px; height: 7px; border-radius: 999px; background: var(--sig-warn); }
.esdi-wm__puce i, .esdi-wm__puce svg { width: 13px; height: 13px; color: var(--ink-faded); }
.esdi-wm__puce-sup { color: var(--ink-faded); padding: 0 3px; border-radius: 6px; line-height: 1; }
.esdi-wm__puce-sup:hover { color: var(--sig-alert); background: var(--sig-alert-bg); }
.esdi-wm__disposition { width: auto; margin-left: auto; }

/* ── Le catalogue ──────────────────────────────────────────────────────── */
.esdi-wm__famille { margin-bottom: 12px; }
.esdi-wm__famille-lib { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faded); margin: 8px 0 6px; }
.esdi-wm__tuiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 6px; }
.esdi-wm__inspecteur .esdi-wm__tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.esdi-wm__tuile { position: relative; display: flex; align-items: center; gap: 8px; padding: 8px 9px; text-align: left; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-card); color: var(--ink); cursor: pointer; transition: border-color .15s, transform .15s, box-shadow .15s, opacity .15s; }
.esdi-wm__tuile:hover { border-color: var(--accent-500); transform: translateY(-1px); box-shadow: 0 6px 16px -10px rgba(0,0,0,.25); }
.esdi-wm__tuile:active { transform: scale(.98); }
.esdi-wm__tuile--actif { border-color: var(--primary-500); background: var(--bg-section-cool); box-shadow: 0 0 0 2px rgba(27, 90, 168, .15); }
.esdi-wm__tuile--grise { opacity: .45; }
.esdi-wm__tuile--grise:hover { opacity: .8; border-color: var(--sig-warn); }
.esdi-wm__tuile-ico { width: 26px; height: 26px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; background: rgba(127,127,127,.10); color: var(--ink-soft); flex: 0 0 auto; }
.esdi-wm__tuile-ico i, .esdi-wm__tuile-ico svg { width: 14px; height: 14px; }
.esdi-wm__tuile-lib { font-size: 12px; font-weight: 500; line-height: 1.2; min-width: 0; padding-right: 34px; }
.esdi-wm__tuile-forme { position: absolute; top: 4px; right: 6px; font-family: var(--font-mono); font-size: 9px; letter-spacing: .06em; color: var(--ink-faded); }
.esdi-wm__picker { position: absolute; inset: 12px; z-index: 5; background: var(--bg-card); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-lg); padding: 14px 16px; overflow: auto; overscroll-behavior: contain; animation: wm-pose .2s cubic-bezier(.16,1,.3,1) both; }
.esdi-wm__picker-tete { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }

/* ── L'inspecteur ──────────────────────────────────────────────────────── */
.esdi-wm__onglet { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 4px 8px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--ink-faded); font-size: 11px; font-weight: 600; cursor: pointer; transition: color .15s, border-color .15s; position: relative; }
.esdi-wm__onglet i, .esdi-wm__onglet svg { width: 16px; height: 16px; }
.esdi-wm__onglet:hover { color: var(--ink); }
.esdi-wm__onglet--actif { color: var(--primary-500); border-bottom-color: var(--primary-500); }
.esdi-wm__onglet--a-faire::after { content: ''; position: absolute; top: 8px; right: 14px; width: 7px; height: 7px; border-radius: 999px; background: var(--sig-warn); }
.esdi-wm__vide-ins { padding: 24px 16px; }

/* Les jeux de données : liste, les incompatibles grisés avec un remplacement proposé. */
.esdi-wm__jeux { display: flex; flex-direction: column; gap: 4px; }
.esdi-wm__jeu { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-card); color: var(--ink); text-align: left; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .12s; }
.esdi-wm__jeu:hover { border-color: var(--accent-500); }
.esdi-wm__jeu:active { transform: scale(.99); }
.esdi-wm__jeu--actif { border-color: var(--primary-500); background: var(--bg-section-cool); box-shadow: 0 0 0 2px rgba(27,90,168,.15); }
.esdi-wm__jeu--grise .esdi-wm__jeu-txt, .esdi-wm__jeu--grise .esdi-wm__jeu-ico { opacity: .42; }
.esdi-wm__jeu--grise { background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(127,127,127,.05) 6px 12px); }
.esdi-wm__jeu--nouveau { border-style: dashed; color: var(--primary-500); }
.esdi-wm__jeu-ico { width: 26px; height: 26px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; background: rgba(127,127,127,.10); color: var(--ink-soft); flex: 0 0 auto; }
.esdi-wm__jeu-ico i, .esdi-wm__jeu-ico svg { width: 14px; height: 14px; }
.esdi-wm__jeu-txt { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.esdi-wm__jeu-lib { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.esdi-wm__jeu-sous { font-size: 11px; color: var(--ink-faded); }
.esdi-wm__jeu-rep { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; color: var(--sig-warn-text); background: var(--sig-warn-bg); flex: 0 0 auto; }
.esdi-wm__jeu-rep i, .esdi-wm__jeu-rep svg { width: 12px; height: 12px; }
.esdi-wm__cases { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.esdi-wm__case { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; cursor: pointer; }
.esdi-wm__case input { accent-color: var(--primary-500); }
.esdi-wm__champ--a-faire .esdi-wm__label::after { content: ' · à choisir'; color: var(--sig-warn-text); font-weight: 500; }

/* Apparence : accents, tailles, banque d'icônes. */
.esdi-wm__accents { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.esdi-wm__accent { width: 26px; height: 26px; border-radius: 999px; border: 2px solid var(--bg-card); box-shadow: 0 0 0 1px var(--line); cursor: pointer; background: var(--ink-faded); transition: transform .12s cubic-bezier(.16,1,.3,1), box-shadow .12s; }
.esdi-wm__accent:hover { transform: scale(1.14); }
.esdi-wm__accent--neutre { background: linear-gradient(135deg, var(--bg-card), var(--ink-faded)); }
.esdi-wm__accent--bleu { background: var(--primary-500); }
.esdi-wm__accent--cyan { background: var(--accent-500); }
.esdi-wm__accent--vert { background: var(--sig-ok); }
.esdi-wm__accent--orange { background: var(--sig-warn); }
.esdi-wm__accent--rouge { background: var(--sig-alert); }
.esdi-wm__accent--violet { background: #8a5fd0; }
.esdi-wm__accent--actif { box-shadow: 0 0 0 2px var(--primary-500); transform: scale(1.14); }
.esdi-wm__tailles { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: var(--bg-card); }
.esdi-wm__taille { min-width: 36px; padding: 5px 10px; border: 0; background: transparent; color: var(--ink-soft); font-size: 12px; font-weight: 700; font-family: var(--font-mono); cursor: pointer; transition: background .15s, color .15s; }
.esdi-wm__taille + .esdi-wm__taille { border-left: 1px solid var(--line); }
.esdi-wm__taille:hover { background: var(--bg-section-cool); color: var(--ink); }
.esdi-wm__taille--actif { background: var(--primary-500); color: #fff; }
.esdi-wm__banque { display: flex; flex-direction: column; gap: 8px; }
.esdi-wm__banque-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 4px; }
.esdi-wm__banque-theme { grid-column: 1 / -1; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faded); margin-top: 6px; }
.esdi-wm__ico-btn { position: relative; height: 40px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg-card); color: var(--ink-soft); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color .12s, color .12s, transform .12s; }
.esdi-wm__ico-btn:hover { border-color: var(--accent-500); color: var(--ink); transform: translateY(-1px) scale(1.06); }
.esdi-wm__ico-btn--actif { border-color: var(--primary-500); color: var(--primary-500); background: var(--bg-section-cool); box-shadow: 0 0 0 2px rgba(27,90,168,.15); }
.esdi-wm__ico-btn i, .esdi-wm__ico-btn svg { width: 18px; height: 18px; }
.esdi-wm__ico-lib { position: absolute; bottom: 2px; font-size: 8px; letter-spacing: .04em; text-transform: uppercase; }

/* Édition depuis l'aperçu : ce qui se modifie se signale au survol. */
.esdi-wm__apercu .wg-titre, .esdi-wm__apercu .wg-ico, .esdi-wm__apercu .wg-val, .esdi-wm__apercu .wg-elem, .esdi-wm__apercu .wg-pied { cursor: pointer; border-radius: 8px; transition: box-shadow .15s, background .15s; }
.esdi-wm__apercu .wg-titre:hover, .esdi-wm__apercu .wg-val:hover, .esdi-wm__apercu .wg-pied:hover, .esdi-wm__apercu .wg-ico:hover { box-shadow: 0 0 0 2px var(--accent-500); background: rgba(63,190,204,.08); }
.esdi-wm__apercu .wg-elem:hover { box-shadow: 0 0 0 2px var(--accent-500); background: rgba(63,190,204,.06); }
.esdi-wm__apercu .wg-elem--courant { box-shadow: 0 0 0 2px var(--primary-500); }

/* Pied. */
.esdi-wm__pied { justify-content: space-between !important; flex-wrap: wrap; gap: 10px; }
.esdi-wm__decrire { display: flex; align-items: center; gap: 8px; flex: 1 1 420px; min-width: 0; }
.esdi-wm__decrire-lib { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); white-space: nowrap; }
.esdi-wm__decrire .form-control { min-width: 0; flex: 1 1 auto; }
.esdi-wm__decrire .btn i, .esdi-wm__decrire .btn svg { width: 14px; height: 14px; vertical-align: -2px; }
.esdi-wm__actions { display: flex; gap: 8px; }

/* Mouvements des modales (ouverture / fermeture), partagés avec les petites modales de l'éditeur. */
.esdi-modale { animation: wm-voile .18s ease-out both; }
.esdi-modale .esdi-modale__boite { animation: wm-boite .22s cubic-bezier(.16,1,.3,1) both; }
.esdi-modale--sortie { animation: wm-voile .16s ease-in reverse both; pointer-events: none; }
.esdi-modale--sortie .esdi-modale__boite { animation: wm-boite .16s ease-in reverse both; }
.esdi-wm__volet--entre { animation: wm-glisse .18s cubic-bezier(.16,1,.3,1) both; }
@keyframes wm-voile { from { opacity: 0; } to { opacity: 1; } }
@keyframes wm-boite { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes wm-pose { from { opacity: 0; transform: translateY(6px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes wm-glisse { from { opacity: 0; transform: translateX(6px); } to { opacity: 1; transform: none; } }

@media (max-width: 991.98px) {
    .esdi-modale--widget .esdi-modale__boite { height: 96vh; }
    .esdi-modale--widget .esdi-modale__corps { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
    .esdi-wm__inspecteur { border-left: 0; border-top: 1px solid var(--line); }
}
@media (prefers-reduced-motion: reduce) { .esdi-modale, .esdi-modale .esdi-modale__boite, .esdi-wm__volet--entre, .esdi-wm__picker, .esdi-wm__apercu .esdi-widget { animation: none !important; transition: none !important; } }
[data-theme="dark"] .esdi-wm__apercu { background-image: radial-gradient(rgba(255,255,255,.10) 1px, transparent 1px); }

/* ── v3 : deux volets à droite ; le panneau Données & réglages SOUS l'aperçu ─────────────── */
.esdi-wm__onglets { grid-template-columns: repeat(2, 1fr); }
.esdi-wm__cadre .esdi-wm__rapide { margin-top: 12px; }
.esdi-wm__panneau { margin-top: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--bg-card); padding: 14px 16px 16px; }
.esdi-wm__panneau-tete { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.esdi-wm__panneau-tete i, .esdi-wm__panneau-tete svg { width: 16px; height: 16px; color: var(--accent-600); }
.esdi-wm__panneau-titre { font-size: 14px; font-weight: 650; color: var(--ink); }
.esdi-wm__panneau-forme { margin-left: auto; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .04em; color: var(--ink-faded); }
.esdi-wm__panneau-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.esdi-wm__col { min-width: 0; }
.esdi-wm__col .esdi-wm__sous-titre { margin-top: 8px; }
@media (max-width: 1199.98px) { .esdi-wm__panneau-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767.98px) { .esdi-wm__panneau-grille { grid-template-columns: 1fr; } }
/* Le sélecteur de jeu : un bouton résumé + une liste déroulante riche. */
.esdi-wm__jeu-select { position: relative; }
.esdi-wm__jeu--bouton { width: 100%; }
.esdi-wm__jeu--vide { border-style: dashed; color: var(--ink-soft); }
.esdi-wm__jeu-chevron { margin-left: auto; width: 14px; height: 14px; color: var(--ink-faded); }
.esdi-wm__jeux--liste { margin-top: 6px; max-height: 320px; overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--line); border-radius: 12px; padding: 6px; background: var(--bg-card); box-shadow: var(--shadow-md); animation: wm-pose .16s ease-out both; }
.esdi-wm__jeux--liste .esdi-wm__jeu { border-color: transparent; }
.esdi-wm__jeux--liste .esdi-wm__jeu:hover { border-color: var(--accent-500); }
.esdi-wm__jeux--liste .esdi-wm__jeu--actif { border-color: var(--primary-500); }
.esdi-wm__scene .esdi-wm__catalogue .esdi-wm__tuiles { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }

/* ── Le jeu « pas encore utilisé » (modale widget) et l'IA grisée sans a_pilotage_ia ─────────── */
.esdi-wm__jeu-neuf { margin-left: 6px; font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--sig-warn-text); background: var(--sig-warn-bg); border-radius: 999px; padding: 1px 7px; vertical-align: middle; }
.esdi-wm__ia-grise { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-faded); }
.esdi-wm__ia-grise i, .esdi-wm__ia-grise svg { width: 14px; height: 14px; opacity: .6; }

/* ═══ « MES JEUX DE DONNÉES » (esdi-dashboard-donnees.js) ══════════════════ */
.esdi-modale--donnees .esdi-modale__boite { width: min(1080px, 100%); height: min(92vh, 880px); max-height: none; display: flex; flex-direction: column; }
.esdi-modale--donnees .esdi-modale__tete, .esdi-modale--donnees .esdi-modale__pied { flex: 0 0 auto; }
.esdi-modale--donnees .esdi-modale__corps { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 14px 18px 20px; background: var(--bg); }
.esdi-dj__barre { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.esdi-dj__barre .form-control { max-width: 380px; }
.esdi-dj__resume { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-soft); }
.esdi-dj__filtre { border: 1px solid var(--line); background: var(--bg-card); border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 600; color: var(--sig-warn-text); cursor: pointer; }
.esdi-dj__filtre--vide { color: var(--ink-soft); }
.esdi-dj__filtre:hover { border-color: var(--accent-500); }
.esdi-dj__liste { display: flex; flex-direction: column; gap: 10px; }
.esdi-dj__vide { text-align: center; padding: 40px 20px; border: 1px dashed var(--line); border-radius: 16px; color: var(--ink-soft); }
.esdi-dj__vide-ico, .esdi-dj__vide-ico svg { width: 28px; height: 28px; color: var(--accent-600); margin-bottom: 8px; }
.esdi-dj__carte { border: 1px solid var(--line); border-radius: 16px; background: var(--bg-card); padding: 14px 16px 12px; animation: wm-pose .2s cubic-bezier(.16,1,.3,1) both; }
.esdi-dj__carte--inutilise { border-left: 3px solid var(--sig-warn); }
.esdi-dj__tete { display: flex; align-items: flex-start; gap: 10px; }
.esdi-dj__ico { width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: rgba(127,127,127,.10); color: var(--accent-700); flex: 0 0 auto; }
.esdi-dj__ico i, .esdi-dj__ico svg { width: 15px; height: 15px; }
.esdi-dj__titres { min-width: 0; flex: 1 1 auto; }
.esdi-dj__lib { font-size: 15px; font-weight: 650; margin: 0; color: var(--ink); }
.esdi-dj__sous { font-size: 11.5px; color: var(--ink-faded); font-family: var(--font-mono); letter-spacing: .02em; margin-top: 2px; }
.esdi-dj__badges { display: flex; gap: 6px; flex: 0 0 auto; }
.esdi-dj__badge { font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 999px; color: var(--ink-soft); background: rgba(127,127,127,.12); white-space: nowrap; }
.esdi-dj__badge--warn { color: var(--sig-warn-text); background: var(--sig-warn-bg); }
.esdi-dj__badge--vide { color: var(--ink-faded); border: 1px dashed var(--line); background: transparent; }
.esdi-dj__grille { display: grid; grid-template-columns: 1.1fr 1fr 1.2fr; gap: 16px; margin-top: 12px; }
@media (max-width: 899.98px) { .esdi-dj__grille { grid-template-columns: 1fr; } }
.esdi-dj__col { min-width: 0; }
.esdi-dj__col-titre { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faded); margin-bottom: 6px; }
.esdi-dj__champs { display: flex; flex-wrap: wrap; gap: 4px; }
.esdi-dj__champ { font-size: 11.5px; padding: 2px 8px; border-radius: 999px; background: var(--bg-section-cool); color: var(--ink-soft); border: 1px solid var(--line); }
.esdi-dj__champ--plus { color: var(--ink-faded); }
.esdi-dj__usages { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; }
.esdi-dj__usage { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink); }
.esdi-dj__usage i, .esdi-dj__usage svg { width: 13px; height: 13px; color: var(--ink-faded); flex: 0 0 auto; }
.esdi-dj__alim { display: flex; align-items: center; gap: 10px; }
.esdi-dj__alim-texte { min-width: 0; flex: 1 1 auto; }
.esdi-dj__alim-lib { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; }
.esdi-dj__alim-lib i, .esdi-dj__alim-lib svg { width: 14px; height: 14px; color: var(--accent-600); }
.esdi-dj__alim-sous { font-size: 11.5px; color: var(--ink-faded); }
.esdi-dj__actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(127,127,127,.12); }
.esdi-dj__actions .btn i, .esdi-dj__actions .btn svg, .esdi-dj__col .btn i, .esdi-dj__col .btn svg, .esdi-dj__pied .btn i, .esdi-dj__pied .btn svg { width: 13px; height: 13px; vertical-align: -2px; }
.esdi-dj__pied { justify-content: space-between !important; flex-wrap: wrap; gap: 10px; }
.esdi-dj__pied-gauche, .esdi-dj__pied-droite { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.esdi-dj__modes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.esdi-dj__mode { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-card); color: var(--ink); text-align: left; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.esdi-dj__mode:hover { border-color: var(--accent-500); }
.esdi-dj__mode--actif { border-color: var(--primary-500); box-shadow: 0 0 0 2px rgba(27,90,168,.15); background: var(--bg-section-cool); }
.esdi-dj__mode--grise { opacity: .5; cursor: not-allowed; }
.esdi-dj__mode-ico, .esdi-dj__mode-ico svg { width: 16px; height: 16px; color: var(--accent-600); flex: 0 0 auto; margin-top: 2px; }
.esdi-dj__mode-txt { display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.esdi-dj__mode-txt strong { font-size: 12.5px; }
.esdi-dj__mode-txt span { color: var(--ink-faded); }
.esdi-dj__lignes { display: flex; flex-direction: column; gap: 4px; max-height: 300px; overflow: auto; }
.esdi-dj__ligne { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(80px, 1fr) ; gap: 4px; align-items: center; }
.esdi-dj__ligne .btn { width: 32px; }
.esdi-dj__ligne--entete { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-faded); }
.esdi-modale--petite .esdi-modale__boite { width: min(560px, 100%); }