/* ═══════════════════════════════════════════════════════════════════════════
   ElectroCAD — Feuille PARTAGEE des editeurs d arbre du panneau admin
   (« Ordre des symboles IEC » + « Palette EBFIND ») — namespace ecso-
   MOBILE-FIRST : le cas d'usage principal est l'édition au téléphone.
   - une seule colonne, aucun défilement horizontal
   - cibles tactiles >= 44 px, champs a 16 px (pas de zoom iOS)
   - reordonnancement au doigt (appui long) + boutons de secours haut/bas
   - suppression par BALAYAGE VERS LA GAUCHE (motif habituel de Luiz)
   Palette : variables --admin-* du panneau admin (theme clair ET sombre).
   ═══════════════════════════════════════════════════════════════════════════ */

.ecso {
    color: var(--admin-text, #F6F6F8);
    /* place pour le bouton flottant + la barre de nav mobile */
    padding-bottom: 96px;
    overflow-x: hidden;
}
.ecso * { box-sizing: border-box; }

/* ─── Barre d'outils (collante en haut) ──────────────────────────────────── */
.ecso-bar {
    position: sticky; top: 0; z-index: 6;
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    padding: 10px 0 10px;
    margin-bottom: 10px;
    background: var(--admin-bg-0, #0A0A0B);
    border-bottom: 1px solid var(--admin-border, rgba(255, 255, 255, .08));
}
.ecso-bar__head { flex: 1 1 100%; }
.ecso-bar__spacer { display: none; }
.ecso-title { font-size: 1.02rem; font-weight: 800; margin: 0; letter-spacing: -.01em; }
.ecso-sub { font-size: .78rem; line-height: 1.35; color: var(--admin-text-3, #A6A4A0); margin-top: 3px; }

.ecso-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    min-height: 44px; min-width: 44px;
    border: 1px solid var(--admin-border-strong, rgba(255, 255, 255, .14));
    background: var(--admin-bg-3, rgba(255, 255, 255, .02));
    color: var(--admin-text, #F6F6F8);
    border-radius: var(--admin-radius-sm, 8px);
    padding: 9px 13px; font-size: .82rem; font-weight: 600; cursor: pointer;
    transition: border-color .15s, background .15s, transform .1s;
    -webkit-tap-highlight-color: transparent;
}
.ecso-btn:hover { border-color: var(--admin-red, #DC2626); background: var(--admin-bg-hover, rgba(255, 255, 255, .04)); }
.ecso-btn:active { transform: translateY(1px); }
.ecso-btn--primary { background: var(--admin-red, #DC2626); border-color: var(--admin-red, #DC2626); color: #fff; }
.ecso-btn--primary:hover { background: var(--admin-red-strong, #B91C1C); border-color: var(--admin-red-strong, #B91C1C); }
.ecso-btn--icon { padding: 8px 10px; font-size: .78rem; }
.ecso-btn[disabled] { opacity: .5; cursor: not-allowed; }
/* le trio d'outils secondaires tient sur une ligne au telephone */
.ecso-tools { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
.ecso-tools .ecso-btn { flex: 1 1 auto; }

/* ─── Bandeau meta ───────────────────────────────────────────────────────── */
.ecso-meta {
    display: flex; flex-direction: column; gap: 7px;
    padding: 11px 13px; margin-bottom: 12px;
    background: var(--admin-bg-2, rgba(20, 20, 24, .45));
    border: 1px solid var(--admin-border, rgba(255, 255, 255, .08));
    border-radius: var(--admin-radius, 12px);
    font-size: .8rem; color: var(--admin-text-2, #C6C6CB);
}
.ecso-meta b { color: var(--admin-text, #F6F6F8); font-weight: 700; }
.ecso-meta__row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ecso-meta__path {
    font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
    font-size: .7rem; color: var(--admin-text-4, #807E7A); word-break: break-all;
}
.ecso-flag {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 11px; border-radius: 20px; font-size: .74rem; font-weight: 700;
    border: 1px solid var(--admin-border, rgba(255, 255, 255, .08));
    color: var(--admin-text-3, #A6A4A0);
}
.ecso-flag--dirty { color: var(--admin-amber, #F59E0B); border-color: var(--admin-amber, #F59E0B); background: rgba(245, 158, 11, .08); }
.ecso-flag--saved { color: var(--admin-emerald, #10B981); border-color: rgba(16, 185, 129, .4); }

/* ─── Champs ─────────────────────────────────────────────────────────────── */
.ecso-input {
    background: var(--admin-bg-3, rgba(255, 255, 255, .02));
    border: 1px solid var(--admin-border, rgba(255, 255, 255, .08));
    border-radius: 8px; color: inherit; font: inherit;
    font-size: 16px;                /* 16 px : empeche le zoom automatique iOS */
    min-height: 44px; padding: 8px 10px; width: 100%; min-width: 0;
}
.ecso-input:focus {
    outline: none;
    border-color: var(--admin-red, #DC2626);
    box-shadow: 0 0 0 3px var(--admin-red-soft, rgba(220, 38, 38, .08));
    background: var(--admin-bg-hover, rgba(255, 255, 255, .04));
}
.ecso-input--name { font-weight: 700; }
.ecso-input--letter { text-align: center; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.ecso-input--sym { font-family: ui-monospace, Consolas, monospace; font-size: 16px; }
.ecso-field { display: flex; flex-direction: column; gap: 4px; flex: 1 1 100%; }
.ecso-field__lbl {
    font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: var(--admin-text-4, #807E7A);
}
.ecso-fields { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 10px 10px; }

/* barre OK / Annuler affichee SOUS le champ en cours d'edition :
   dans le flux, donc jamais masquee par le clavier virtuel */
.ecso-editbar {
    display: flex; gap: 8px; align-items: center; flex: 1 1 100%;
    padding: 7px 0 2px;
}
.ecso-editbar .ecso-btn { flex: 1 1 auto; }
.ecso-editbar__hint { font-size: .7rem; color: var(--admin-text-4, #807E7A); flex: 1 1 100%; }

/* ─── Balayage vers la gauche = supprimer ────────────────────────────────── */
.ecso-sw { position: relative; overflow: hidden; border-radius: inherit; }
.ecso-sw__bg {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-end;
    gap: 8px; padding-right: 18px; background: var(--admin-red, #DC2626); color: #fff;
    font-weight: 800; font-size: .82rem; border-radius: inherit; pointer-events: none;
    opacity: 0; transition: opacity .12s;
}
.ecso-sw.is-swiping .ecso-sw__bg, .ecso-sw.is-armed .ecso-sw__bg { opacity: 1; }
.ecso-sw__fg {
    position: relative; background: transparent; border-radius: inherit;
    transition: transform .18s cubic-bezier(.2, .8, .3, 1);
    will-change: transform;
}
/* pendant le balayage seulement : fond OPAQUE, sinon le rouge transparaitrait
   au travers des fonds rgba() du panneau admin */
.ecso-sw.is-swiping .ecso-sw__fg,
.ecso-sw.is-armed .ecso-sw__fg { background: var(--admin-bg-0, #0A0A0B); transition: none; }

/* ─── Lignes ─────────────────────────────────────────────────────────────── */
.ecso-row {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 8px 8px 4px;
    user-select: none; -webkit-user-select: none;
    /* pan-y : le defilement vertical reste natif, l'horizontal nous revient
       (= balayage vers la gauche pour supprimer) */
    touch-action: pan-y;
}
.ecso-row__title {
    flex: 1 1 auto; min-width: 0; font-weight: 700; font-size: .92rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ecso-row__sub {
    flex: 1 1 100%; font-size: .72rem; color: var(--admin-text-4, #807E7A);
    padding: 0 8px 7px 40px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* au telephone la rangee d'actions passe SOUS le titre (sinon elle deborde
   de l'ecran et les boutons deviennent inatteignables) */
.ecso-acts {
    display: flex; align-items: center; justify-content: flex-end; gap: 6px;
    flex: 1 1 100%; padding-left: 36px;
}

.ecso-handle {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 40px; min-height: 44px;
    cursor: grab; color: var(--admin-text-4, #807E7A); font-size: 1.05rem;
    border-radius: 8px; flex: 0 0 auto; touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}
.ecso-handle:active { cursor: grabbing; color: var(--admin-red, #DC2626); }

.ecso-chev {
    background: none; border: 0; color: var(--admin-text-3, #A6A4A0);
    cursor: pointer; min-width: 44px; min-height: 44px; font-size: .85rem;
    display: inline-flex; align-items: center; justify-content: center;
    transition: transform .15s; flex: 0 0 auto;
}
.ecso-cat.is-open > .ecso-sw .ecso-chev, .ecso-grp.is-open > .ecso-sw .ecso-chev { transform: rotate(90deg); }

.ecso-badge {
    background: var(--admin-bg-3, rgba(255, 255, 255, .02));
    border: 1px solid var(--admin-border, rgba(255, 255, 255, .08));
    color: var(--admin-text-3, #A6A4A0);
    border-radius: 20px; padding: 3px 9px; font-size: .68rem; font-weight: 700;
    white-space: nowrap; flex: 0 0 auto;
}

/* ─── Catégories / groupes / symboles ────────────────────────────────────── */
.ecso-cat {
    background: var(--admin-bg-1, rgba(20, 20, 24, .65));
    border: 1px solid var(--admin-border, rgba(255, 255, 255, .08));
    border-radius: var(--admin-radius, 12px);
    margin: 9px 0;
}
.ecso-groups { display: none; flex-direction: column; gap: 7px; padding: 2px 8px 10px 10px; }
.ecso-cat.is-open > .ecso-groups { display: flex; }

.ecso-grp {
    background: var(--admin-bg-3, rgba(255, 255, 255, .02));
    border: 1px solid var(--admin-border, rgba(255, 255, 255, .08));
    border-radius: var(--admin-radius-sm, 8px);
}
.ecso-syms { display: none; flex-direction: column; gap: 6px; padding: 2px 6px 9px 8px; }
.ecso-grp.is-open > .ecso-syms { display: flex; }

.ecso-sym {
    background: var(--admin-bg-2, rgba(20, 20, 24, .45));
    border: 1px solid var(--admin-border, rgba(255, 255, 255, .08));
    border-radius: 8px;
}
.ecso-sym .ecso-row { padding: 6px 6px 6px 2px; }
.ecso-sym .ecso-row__title { font-family: ui-monospace, Consolas, monospace; font-weight: 600; font-size: .84rem; }

.ecso-check {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
    font-size: .8rem; color: var(--admin-text-2, #C6C6CB); cursor: pointer; flex: 1 1 100%;
}
.ecso-check input { width: 22px; height: 22px; accent-color: var(--admin-red, #DC2626); }

/* ─── Glissement : l'element saisi SE SOULEVE ────────────────────────────── */
.ecso-cat.is-drag, .ecso-grp.is-drag, .ecso-sym.is-drag { opacity: .9; }
.is-lifted {
    transform: scale(1.025);
    box-shadow: 0 18px 40px -10px rgba(0, 0, 0, .75), 0 0 0 2px var(--admin-red, #DC2626);
    position: relative; z-index: 20;
    transition: transform .14s ease, box-shadow .14s ease;
}
/* case d'accueil qui suit le doigt */
.ecso-ph {
    border: 2px dashed var(--admin-red, #DC2626);
    background: var(--admin-red-soft, rgba(220, 38, 38, .08));
    border-radius: 10px; margin: 4px 0; pointer-events: none;
    animation: ecso-ph-in .12s ease;
}
@keyframes ecso-ph-in { from { opacity: 0; transform: scaleY(.6); } to { opacity: 1; transform: none; } }
/* depot : le contenu se remet en place en douceur */
.ecso-cat, .ecso-grp, .ecso-sym { transition: transform .16s ease; }
@media (prefers-reduced-motion: reduce) {
    .is-lifted, .ecso-ph, .ecso-cat, .ecso-grp, .ecso-sym { transition: none; animation: none; }
}
.ecso-drop-before { box-shadow: inset 0 3px 0 0 var(--admin-red, #DC2626); }
.ecso-drop-after { box-shadow: inset 0 -3px 0 0 var(--admin-red, #DC2626); }

.ecso-empty { font-size: .78rem; font-style: italic; color: var(--admin-text-4, #807E7A); padding: 6px 4px; }

/* ─── Erreurs / avertissements ───────────────────────────────────────────── */
.ecso-errors {
    background: var(--admin-red-soft, rgba(220, 38, 38, .08));
    border: 1px solid var(--admin-red, #DC2626);
    border-radius: var(--admin-radius-sm, 8px);
    padding: 11px 13px; margin-bottom: 12px; font-size: .8rem; line-height: 1.4;
}
.ecso-errors ul { margin: 6px 0 0; padding-left: 18px; }
.ecso-errors li { margin: 3px 0; word-break: break-word; }
.ecso-errors--warn { background: rgba(245, 158, 11, .08); border-color: var(--admin-amber, #F59E0B); }

/* ─── Bouton flottant « Enregistrer » ────────────────────────────────────── */
.ecso-fab {
    position: fixed; right: 14px; z-index: 950;
    bottom: calc(78px + env(safe-area-inset-bottom, 0px));  /* au-dessus de la nav mobile a12 */
    display: inline-flex; align-items: center; gap: 9px;
    min-height: 52px; padding: 12px 18px;
    border: 0; border-radius: 30px;
    background: var(--admin-slate, #807E7A); color: #fff;
    font-size: .86rem; font-weight: 800; cursor: pointer;
    box-shadow: 0 12px 30px -8px rgba(0, 0, 0, .6);
    transition: background .2s, transform .1s;
    -webkit-tap-highlight-color: transparent;
}
.ecso-fab:active { transform: translateY(1px); }
.ecso-fab.is-dirty { background: var(--admin-red, #DC2626); animation: ecso-pulse 2.2s ease-in-out infinite; }
@keyframes ecso-pulse {
    0%, 100% { box-shadow: 0 12px 30px -8px rgba(0, 0, 0, .6), 0 0 0 0 rgba(220, 38, 38, .45); }
    50%      { box-shadow: 0 12px 30px -8px rgba(0, 0, 0, .6), 0 0 0 10px rgba(220, 38, 38, 0); }
}
@media (prefers-reduced-motion: reduce) { .ecso-fab.is-dirty { animation: none; } }

/* ─── ≥ 760 px : mise en page horizontale (desktop / tablette) ───────────── */
@media (min-width: 760px) {
    .ecso { padding-bottom: 40px; }
    .ecso-bar { padding: 12px 0; }
    .ecso-bar__head { flex: 0 1 auto; }
    .ecso-bar__spacer { display: block; flex: 1 1 auto; }
    .ecso-tools { width: auto; flex: 0 0 auto; }
    .ecso-tools .ecso-btn { flex: 0 0 auto; }
    .ecso-search { flex: 0 1 240px; width: 240px; }
    .ecso-meta { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
    .ecso-field { flex: 0 1 auto; }
    .ecso-field--name { flex: 1 1 240px; }
    .ecso-field--sub { flex: 1 1 200px; }
    .ecso-field--letter { flex: 0 0 78px; }
    .ecso-field--fam { flex: 0 0 150px; }
    .ecso-field--sym { flex: 1 1 210px; }
    .ecso-check { flex: 0 0 auto; }
    .ecso-acts { flex: 0 0 auto; padding-left: 0; gap: 4px; }
    .ecso-fab { bottom: 24px; right: 24px; }
    .ecso-groups { padding-left: 30px; }
    .ecso-syms { padding-left: 26px; }
}

/* ─── Pastille de couleur ACI (onglet Palette EBFIND) ────────────────────── */
.eceb-dot {
    display: inline-block; width: 18px; height: 18px; border-radius: 5px;
    border: 1px solid var(--admin-border-strong, rgba(255, 255, 255, .14));
    flex: 0 0 auto;
}

/* ═══ Menu contextuel — feuille qui monte du bas ═════════════════════════════
   Ouvert au bouton ⋮, a l'appui long sur une ligne, ou au clic droit.
   Grandes lignes tactiles (>= 52 px), safe-area respectee.
─────────────────────────────────────────────────────────────────────────────── */
.ecso-sheet-wrap { position: fixed; inset: 0; z-index: 1200; }
.ecso-sheet-veil {
    position: absolute; inset: 0; background: rgba(0, 0, 0, .5);
    opacity: 0; transition: opacity .18s ease;
}
.ecso-sheet-wrap.is-open .ecso-sheet-veil { opacity: 1; }
.ecso-sheet {
    position: absolute; left: 0; right: 0; bottom: 0;
    max-height: 82vh; overflow-y: auto; overscroll-behavior: contain;
    background: var(--admin-bg-0, #0A0A0B);
    border-top: 1px solid var(--admin-border-strong, rgba(255, 255, 255, .14));
    border-radius: 18px 18px 0 0;
    padding: 8px 10px calc(14px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -18px 50px -12px rgba(0, 0, 0, .7);
    transform: translateY(102%); transition: transform .22s cubic-bezier(.2, .8, .3, 1);
}
.ecso-sheet-wrap.is-open .ecso-sheet { transform: translateY(0); }
.ecso-sheet__grip {
    width: 44px; height: 4px; border-radius: 4px; margin: 4px auto 10px;
    background: var(--admin-text-4, #807E7A); opacity: .5;
}
.ecso-sheet__title {
    font-size: .95rem; font-weight: 800; padding: 2px 10px 2px;
    color: var(--admin-text, #F6F6F8);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ecso-sheet__sub {
    font-size: .76rem; color: var(--admin-text-3, #A6A4A0); padding: 2px 10px 8px;
}
.ecso-sheet__sep {
    height: 1px; margin: 6px 10px; background: var(--admin-border, rgba(255, 255, 255, .08));
}
.ecso-sheet__item {
    display: flex; align-items: center; gap: 13px; width: 100%;
    min-height: 54px; padding: 10px 14px; margin: 2px 0;
    border: 0; border-radius: 12px; background: transparent;
    color: var(--admin-text, #F6F6F8); font: inherit; font-size: .92rem; font-weight: 600;
    text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.ecso-sheet__item:hover, .ecso-sheet__item:focus-visible {
    background: var(--admin-bg-hover, rgba(255, 255, 255, .04)); outline: none;
}
.ecso-sheet__item:focus-visible { box-shadow: inset 0 0 0 2px var(--admin-red, #DC2626); }
.ecso-sheet__item i { width: 22px; text-align: center; color: var(--admin-text-3, #A6A4A0); font-size: 1rem; }
.ecso-sheet__item.is-danger, .ecso-sheet__item.is-danger i { color: var(--admin-red, #DC2626); }
.ecso-sheet__item[disabled] { opacity: .4; cursor: not-allowed; }
.ecso-sheet__lbl { flex: 1 1 auto; min-width: 0; }
.ecso-sheet__hint {
    flex: 0 0 auto; font-size: .74rem; font-weight: 600;
    color: var(--admin-text-4, #807E7A); max-width: 46%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ecso-sheet__cancel {
    margin-top: 6px; justify-content: center;
    border: 1px solid var(--admin-border, rgba(255, 255, 255, .08));
    color: var(--admin-text-3, #A6A4A0);
}
.ecso-sheet__cancel .ecso-sheet__lbl { flex: 0 0 auto; }

@media (min-width: 760px) {
    /* sur grand ecran la feuille devient une carte centree */
    .ecso-sheet {
        left: 50%; right: auto; bottom: auto; top: 50%;
        transform: translate(-50%, -46%) scale(.97); opacity: 0;
        width: 400px; max-height: 76vh; border-radius: 16px;
        border: 1px solid var(--admin-border-strong, rgba(255, 255, 255, .14));
        transition: transform .16s ease, opacity .16s ease;
    }
    .ecso-sheet-wrap.is-open .ecso-sheet { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    .ecso-sheet__grip { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .ecso-sheet, .ecso-sheet-veil { transition: none; }
}

/* ═══ SKIN « PALETTE AUTOCAD » ═══════════════════════════════════════════════
   Couleurs RELEVEES DANS LE CODE, pas approchees :
   Shared\DarkTheme.cs:84-94 (classe Palette), consommees par
   ElectroSchema\SymbolPaletteV2.cs:77-83 et ElectroCADRibbon\PaletteSearch.cs.
   Le theme suit la sysvar AutoCAD COLORTHEME ; ici il suit le theme de l admin.
─────────────────────────────────────────────────────────────────────────────── */
.ecso {
    --ac-bg:      #1A1D23;   /* BgDark     — fond general de la palette        */
    --ac-card:    #232730;   /* BgCard     — en-tete, liste, tuile             */
    --ac-hover:   #2D3340;   /* BgHover    — survol                            */
    --ac-accent:  #3ECF8E;   /* Accent     — bordure survol, tag, surlignage   */
    --ac-text:    #E8ECF4;   /* TextPrimary                                    */
    --ac-muted:   #8B95A5;   /* TextMuted  — groupes, footer                   */
    --ac-border:  #2D3340;   /* BorderCol                                      */
    --ac-star:    #F5C242;   /* favori (en dur, SymbolPaletteV2.cs:1446)       */
}
[data-theme="light"] .ecso {
    --ac-bg: #F8FAFC; --ac-card: #F1F5F9; --ac-hover: #E2E8F0;
    --ac-accent: #3ECF8E; --ac-text: #0F172A; --ac-muted: #64748B; --ac-border: #CBD5E1;
}

/* le panneau prend l identite de la palette */
.ecso.is-acad .ecso-cat {
    background: var(--ac-card); border-color: var(--ac-border);
}
.ecso.is-acad .ecso-grp { background: var(--ac-bg); border-color: var(--ac-border); }
.ecso.is-acad .ecso-groups { background: var(--ac-bg); }
.ecso.is-acad .ecso-row__title { color: var(--ac-text); }
.ecso.is-acad .ecso-grp .ecso-row__title { color: var(--ac-muted); font-weight: 600; }
.ecso.is-acad .ecso-badge { color: var(--ac-muted); border-color: var(--ac-border); background: var(--ac-card); }

/* ─── Grille de symboles, calquee sur SymbolPaletteV2.BuildCard ───────────────
   Carte 78-128 px (RecomputeCardSize l.1249-1278), vignette 4:3 ~0.66,
   titre 9.5px SemiBold sur 2 lignes, tag 8.5px couleur Accent,
   survol = fond BgHover + bordure Accent (l.2330-2334).                        */
.ecso-tiles {
    /* ⚠ flex-direction: row OBLIGATOIRE — sans lui, le column hérité de
       .ecso-syms empilait les vignettes en LISTE verticale (bug signalé
       par Luiz le 07.08) au lieu de la grille de la palette AutoCAD. */
    display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px;
    padding: 8px; background: var(--ac-bg); border-radius: 8px;
}
.ecso-tile {
    width: 108px; padding: 5px; border-radius: 6px;
    background: var(--ac-card); border: 1px solid var(--ac-border);
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    cursor: grab; position: relative; touch-action: pan-y;
    transition: background .12s, border-color .12s, transform .12s;
}
.ecso-tile:hover { background: var(--ac-hover); border-color: var(--ac-accent); }
.ecso-tile.is-drag { opacity: .9; }
/* les PNG sont OPAQUES a fond blanc (RenderThumbnail l.866) : la case reste
   blanche dans les deux themes, exactement comme la palette AutoCAD */
.ecso-tile__img {
    width: 96px; height: 70px; background: #fff; border-radius: 4px;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.ecso-tile__img img { width: 96px; height: 70px; object-fit: contain; display: block; }
.ecso-tile__ph {
    width: 96px; height: 70px; display: flex; align-items: center; justify-content: center;
    color: #94a3b8; font-size: 10px; font-weight: 700; letter-spacing: .04em;
}
.ecso-tile__lbl {
    font-size: 9.5px; font-weight: 600; line-height: 1.2; text-align: center;
    color: var(--ac-text); max-height: 24px; overflow: hidden; word-break: break-all;
}
.ecso-tile__tag { font-size: 8.5px; color: var(--ac-accent); font-weight: 700; }
.ecso-tile__star { position: absolute; top: 1px; right: 3px; font-size: 12px; color: var(--ac-star); }
.ecso-tile__menu {
    position: absolute; top: 1px; left: 1px; width: 26px; height: 26px;
    border: 0; border-radius: 6px; background: transparent; color: var(--ac-muted);
    cursor: pointer; opacity: 0; transition: opacity .12s;
}
.ecso-tile:hover .ecso-tile__menu, .ecso-tile:focus-within .ecso-tile__menu { opacity: 1; }
/* au doigt, le bouton reste toujours atteignable */
@media (pointer: coarse) { .ecso-tile__menu { opacity: 1; } }

.ecso-viewtoggle { display: flex; gap: 6px; }

/* ─── Vignettes à fond TRANSPARENT (rendues depuis symbol_IEC_lib.dwg) ────────
   Traits noirs sur transparent : en thème sombre on inverse pour obtenir des
   traits clairs, exactement comme la palette AutoCAD en COLORTHEME=0.          */
.ecso-tile__img.is-transparent { background: transparent; }
.ecso-tile__img.is-transparent img { filter: invert(1) brightness(1.15); }
[data-theme="light"] .ecso-tile__img.is-transparent img { filter: none; }

/* ─── Grille de blocs EBFIND (07.08) — vignettes du cache DARK du produit ── */
.ecso-tile__img.is-darkbg { background: #1A1F2E; }
.ecso-tile__img.is-darkbg .ecso-tile__ph { color: #64748B; }
.eceb-tile { cursor: pointer; }
.eceb-tile .ecso-tile__tag {
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.eceb-tile__check {
    position: absolute; top: 2px; right: 4px; z-index: 2;
    color: var(--ac-accent, #3ECF8E); font-size: 15px;
}
.eceb-tile-sep {
    flex: 1 1 100%; height: 6px; border-radius: 3px; margin: 2px 0;
    background: var(--ac-border, #334155);
}

/* ─── Sélection multiple de blocs (EBFIND, 07.08) ────────────────────────── */
.eceb-selbar {
    position: sticky; top: 0; z-index: 6;
    background: var(--ac-bg, #1c2230); border: 1px solid var(--ac-accent, #3ECF8E);
    border-radius: 8px; padding: 8px 10px; margin: 6px 0;
}
.ecso-sym.is-sel { box-shadow: inset 0 0 0 2px var(--ac-accent, #3ECF8E); border-radius: 8px; }
.eceb-pick { font-size: 1.05rem; min-width: 34px; }

/* ─── Nuancier ACI (bottom-sheet) ────────────────────────────────────────── */
.ecso-sheet--wide { max-height: 88vh; }
.ecso-sw2row { display: flex; gap: 3px; margin: 0 0 3px; }
.ecso-sw2row--big { gap: 6px; margin: 4px 0 10px; flex-wrap: wrap; }
.ecso-sw2 {
    flex: 1 1 0; min-width: 0; height: 32px; border: 0; border-radius: 4px;
    padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent;
    box-shadow: inset 0 0 0 1px rgba(128,128,128,.35);
}
.ecso-sw2row--big .ecso-sw2 { flex: 0 0 46px; height: 46px; border-radius: 8px; }
.ecso-sw2:hover { transform: scale(1.12); position: relative; z-index: 2; }
.ecso-sw2sec {
    font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
    color: var(--admin-text-4, #807E7A); margin: 10px 0 5px;
}

/* pastille de couleur dans une liste filtrable */
.ecso-dotaci {
    width: 22px; height: 22px; border-radius: 5px; flex: 0 0 auto;
    box-shadow: inset 0 0 0 1px rgba(128,128,128,.4);
}
.ecso-sheet__item.is-current { background: var(--admin-bg-hover, rgba(255,255,255,.04)); }
.ecso-sheet__item.is-current .ecso-sheet__lbl { font-weight: 800; }

/* vignette dans l'en-tête d'un bottom-sheet */
.ecso-sheet__thumb {
    display: flex; justify-content: center; margin: 2px 0 8px;
}
.ecso-sheet__thumb img {
    width: 96px; height: 96px; object-fit: contain;
    background: #1A1D23; border-radius: 8px; padding: 4px;
    border: 1px solid var(--admin-border, rgba(255,255,255,.08));
}

/* ─── Vignettes de blocs EBFIND ──────────────────────────────────────────
   Rendus du cache « dark » du produit : traits clairs sur fond transparent.
   On garde donc une case SOMBRE dans les deux thèmes, comme la palette
   AutoCAD — inverser fausserait les couleurs réelles des blocs.            */
.eceb-thumb {
    width: 44px; height: 44px; flex: 0 0 auto; border-radius: 6px;
    background: #1A1D23; border: 1px solid var(--admin-border, rgba(255,255,255,.08));
    display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.eceb-thumb img { width: 40px; height: 40px; object-fit: contain; display: block; }
.eceb-thumb--ph { color: #6b7280; font-size: 9px; font-weight: 700; }

/* ─── Attributs réels d'un bloc (catalogue DWG) ──────────────────────────── */
.eceb-attr {
    border: 1px solid var(--admin-border, rgba(255,255,255,.08));
    border-radius: 8px; padding: 8px 10px; margin: 6px 0;
    background: var(--admin-bg-3, rgba(255,255,255,.02));
}
.eceb-attr.is-locked { opacity: .62; background: transparent; border-style: dashed; }
.eceb-attr__head {
    display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
    font-size: .82rem; margin-bottom: 4px;
}
.eceb-attr__head b { font-family: ui-monospace, Consolas, monospace; letter-spacing: .02em; }
.eceb-attr__head i { color: var(--admin-text-4, #807E7A); font-size: .78rem; }
.eceb-attr__sub {
    font-size: .72rem; color: var(--admin-text-4, #807E7A); line-height: 1.35; margin-bottom: 4px;
}

/* jeton de mise en page dans une palette (séparateur, tuile logo) */
.eceb-token { border-style: dashed; opacity: .85; }
.ecso-sheet__item.is-disabled { opacity: .42; cursor: not-allowed; }

/* ═══ HIÉRARCHIE À DEUX NIVEAUX ══════════════════════════════════════════════
   Reprend la grammaire de SymbolPaletteV2 : le CHAPITRE est un bandeau de
   niveau 1 (fond soutenu, libellé en capitales), le GROUPE lui est visiblement
   SUBORDONNÉ (retrait, filet de rattachement, libellé plus petit et discret).
   Objectif : savoir d'un coup d'oeil, au téléphone, à quel niveau on se trouve.
─────────────────────────────────────────────────────────────────────────────── */

/* ─ Niveau 1 : chapitre ─ */
.ecso-cat > .ecso-sw > .ecso-sw__fg > .ecso-row {
    padding: 12px 10px 12px 4px;
    background: linear-gradient(180deg, var(--admin-bg-hover, rgba(255,255,255,.04)) 0%, transparent 100%);
    border-bottom: 1px solid var(--admin-border, rgba(255,255,255,.08));
}
.ecso-cat > .ecso-sw > .ecso-sw__fg > .ecso-row > .ecso-row__title {
    font-size: 1rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
}
.ecso-cat.is-open > .ecso-sw > .ecso-sw__fg > .ecso-row {
    background: var(--admin-bg-hover, rgba(255,255,255,.04));
}

/* ─ Niveau 2 : groupe, rattaché par un filet ─ */
.ecso-groups { position: relative; }
.ecso-cat.is-open > .ecso-groups::before {
    content: ''; position: absolute; left: 3px; top: 0; bottom: 8px; width: 2px;
    background: var(--admin-border-strong, rgba(255,255,255,.14)); border-radius: 2px;
}
.ecso-grp { position: relative; margin-left: 10px; }
.ecso-grp::before {                      /* petite amorce horizontale vers le filet */
    content: ''; position: absolute; left: -10px; top: 21px; width: 8px; height: 2px;
    background: var(--admin-border-strong, rgba(255,255,255,.14));
}
.ecso-grp > .ecso-sw > .ecso-sw__fg > .ecso-row > .ecso-row__title {
    font-size: .84rem; font-weight: 600; text-transform: none;
    color: var(--admin-text-2, #C6C6CB);
}

/* ─ Badges métier : lettre IEC / famille ─ */
.ecso-tag {
    display: inline-flex; align-items: center; gap: 4px;
    border-radius: 6px; padding: 2px 8px; font-size: .68rem; font-weight: 700;
    white-space: nowrap; flex: 0 0 auto; border: 1px solid transparent;
}
.ecso-tag__k { opacity: .62; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
/* valeur PROPRE au niveau courant : plein */
.ecso-tag--own {
    background: var(--admin-red-soft, rgba(220,38,38,.08));
    border-color: var(--admin-red, #DC2626);
    color: var(--admin-text, #F6F6F8);
}
/* valeur HÉRITÉE du parent : discrète, en italique */
.ecso-tag--inherit {
    background: transparent; border-color: var(--admin-border, rgba(255,255,255,.08));
    color: var(--admin-text-4, #807E7A); font-style: italic; font-weight: 600;
}
/* SURCHARGE au niveau du symbole : accent vert (comme la palette produit) */
.ecso-tag--override {
    background: rgba(62,207,142,.12); border-color: #3ECF8E; color: #3ECF8E;
}
[data-theme="light"] .ecso-tag--override { color: #0b7a52; }

/* ─ Compteurs de niveau ─ */
.ecso-count { font-size: .7rem; color: var(--admin-text-4, #807E7A); font-weight: 700; white-space: nowrap; }
.ecso-cat > .ecso-sw > .ecso-sw__fg > .ecso-row .ecso-count { color: var(--admin-text-3, #A6A4A0); }

/* ─ Même grammaire pour EBFIND : palette = niveau 2 sous son groupe ─ */
.ecso-cat[data-kind="grpx"] > .ecso-groups::before {
    content: ''; position: absolute; left: 3px; top: 0; bottom: 8px; width: 2px;
    background: var(--admin-border-strong, rgba(255,255,255,.14)); border-radius: 2px;
}
.ecso-sym[data-kind="pal"] { margin-left: 10px; position: relative; }
.ecso-sym[data-kind="pal"]::before {
    content: ''; position: absolute; left: -10px; top: 21px; width: 8px; height: 2px;
    background: var(--admin-border-strong, rgba(255,255,255,.14));
}
.ecso-sym[data-kind="pal"] .ecso-row__title { font-size: .84rem; font-weight: 600; }

@media (min-width: 760px) {
    .ecso-grp, .ecso-sym[data-kind="pal"] { margin-left: 14px; }
    .ecso-grp::before, .ecso-sym[data-kind="pal"]::before { left: -14px; width: 12px; }
}
/* contraste garanti sur fond rouge clair, sans dépendre de --admin-text */
[data-theme="light"] .ecso-tag--own { color: #7F1D1D; }