/* ══ FAVORIS ET VUE D'OUVERTURE (2026-10-11, U5) ════════════════════════════════════════════════════════════════════════════════
   • .favb-  la barre sous l'en-tête du hub (Shared/BarreFavoris.razor) : pastilles discrètes, glisser-déposer, mode « Réorganiser ».
   • .favm-  l'étoile de l'en-tête du Reporting et du pilotage (Shared/MenuFavoris.razor) et sa liste déroulante.
   • .favl-  la liste dans un menu existant (Shared/ListeFavoris.razor) : feuille du bas du hub, menu « Outils » du pilotage.
   • .favo-  la section « Écran d'ouverture » du panneau Apparence (Shared/ReglageVueOuverture.razor).
   • .cpal-o-act  l'étoile et la maison des lignes de la palette (Shared/CommandPalette.razor).
   Moderne (défaut), Mat et Papier (fin de fichier), clair et sombre, Compact ; téléphone (≤ 640 px) : la barre s'efface au profit
   du menu, l'étoile du pilotage passe dans « Outils ».
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── La barre du hub ── */
.favb {
    display: flex; align-items: center; gap: 6px 8px; flex-wrap: wrap; min-width: 0;
    margin: 4px 0 12px; font-family: var(--font-family);
}
.favb-t {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
    font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--mut1, #8aa0ad);
}
.favb-t svg { color: var(--st-amber, #fbbf24); }
html[data-theme="light"] .favb-t svg { color: #b7791f; }
.favb-l { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; margin: 0; padding: 0; list-style: none; }
.favb-i { display: inline-flex; align-items: center; gap: 2px; min-width: 0; border-radius: 999px; transition: opacity .12s, box-shadow .12s; }
.favb-i[draggable="true"] { cursor: grab; }
.favb-i.is-glisse { opacity: .45; }
.favb-i.is-cible { box-shadow: -3px 0 0 0 var(--brand, #00B1CF); }
.favb-b {
    display: inline-flex; align-items: center; gap: 6px; height: 28px; max-width: 220px; padding: 0 11px 0 9px; border-radius: 999px;
    font: inherit; font-size: 12.5px; font-weight: 620; white-space: nowrap; cursor: pointer;
    color: var(--tx2, #c2cdd6); background: var(--o4, rgba(255,255,255,.04)); border: 1px solid var(--o10, rgba(255,255,255,.1));
    transition: color .12s, background .12s, border-color .12s;
}
.favb-b svg { flex: 0 0 auto; width: 14px; height: 14px; color: var(--mut2, #b6c4cc); }
.favb-lbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.favb-b:hover { color: var(--tx1, #e8eef2); background: color-mix(in srgb, var(--brand, #00B1CF) 10%, transparent);
                border-color: color-mix(in srgb, var(--brand, #00B1CF) 40%, transparent); }
.favb-b:hover svg { color: var(--brand-strong, var(--brand, #00B1CF)); }
.favb-b:focus-visible, .favb-edit:focus-visible, .favb-ed button:focus-visible { outline: 2px solid var(--brand, #00B1CF); outline-offset: 2px; }
.favb-b.verrou { border-style: dashed; }
.favb-verrou { display: inline-flex; color: var(--st-amber, #fbbf24); }
.favb-verrou svg { width: 11px; height: 11px; color: inherit !important; }
html[data-theme="light"] .favb-b { color: #2c3e4a; background: rgba(15, 38, 56, .03); border-color: rgba(15, 38, 56, .14); }
html[data-theme="light"] .favb-b svg { color: #4f6472; }
html[data-theme="light"] .favb-b:hover { color: #10212b; }
html[data-theme="light"] .favb-verrou { color: #8a5a00; }

.favb-ed { display: inline-flex; align-items: center; gap: 1px; }
.favb-ed button, .favb-edit {
    display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 24px; height: 24px; padding: 0 4px; border-radius: 7px;
    font: inherit; font-size: 11.5px; font-weight: 650; cursor: pointer;
    color: var(--mut1, #8aa0ad); background: transparent; border: 1px solid transparent;
}
.favb-ed button:hover:not(:disabled), .favb-edit:hover { color: var(--tx1, #e8eef2); background: var(--o6, rgba(255,255,255,.06)); }
.favb-ed button:disabled { opacity: .35; cursor: default; }
.favb-ed .favb-rm:hover { color: var(--st-red, #f87171) !important; }
.favb-ed svg, .favb-edit svg { width: 13px; height: 13px; }
.favb-edit { opacity: .7; }
.favb:hover .favb-edit, .favb-edit:focus-visible, .favb-edition .favb-edit { opacity: 1; }
.favb-edition .favb-edit { color: var(--brand-strong, var(--brand, #00B1CF)); border-color: color-mix(in srgb, var(--brand, #00B1CF) 40%, transparent); padding: 0 8px; }
html[data-theme="light"] :is(.favb-ed button, .favb-edit):hover:not(:disabled) { color: #10212b; background: rgba(15, 38, 56, .06); }
.favb-annonce, .favm-annonce { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── L'étoile des grandes fenêtres et sa liste ── */
.favm { position: relative; display: inline-flex; flex: 0 0 auto; }
.favm-b.is-fav svg { fill: currentColor; color: var(--st-amber, #fbbf24); }
html[data-theme="light"] .favm-b.is-fav svg { color: #b7791f; }
.favm-l {
    position: absolute; top: calc(100% + 6px); right: 0; z-index: 60; width: min(300px, calc(100vw - 24px));
    display: flex; flex-direction: column; gap: 2px; padding: 6px; border-radius: 12px; text-align: left;
    background: var(--surf-2, #102733); color: var(--tx1, #eafdff); font-family: var(--font-family);
    border: 1px solid color-mix(in srgb, var(--brand, #00B1CF) 24%, transparent); box-shadow: 0 18px 44px rgba(0,0,0,.45);
}
html[data-theme="light"] .favm-l { background: #fff; color: #10212b; box-shadow: 0 18px 44px rgba(30,41,59,.2); }
.favm-t { padding: 6px 8px 4px; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--mut1, #8aa0ad); }
.favm-vide { margin: 4px 8px 8px; font-size: 12.5px; line-height: 1.45; color: var(--mut1, #8aa0ad); }
.favm-i, .favm-epingler {
    display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: 5px 8px; border-radius: 8px; text-align: left;
    font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; color: inherit; background: transparent; border: 1px solid transparent;
}
.favm-i:hover, .favm-epingler:hover { background: color-mix(in srgb, var(--brand, #00B1CF) 12%, transparent); }
.favm-i:focus-visible, .favm-epingler:focus-visible { outline: 2px solid var(--brand, #00B1CF); outline-offset: -2px; }
.favm-i.is-actuelle { background: var(--o4, rgba(255,255,255,.04)); }
html[data-theme="light"] .favm-i.is-actuelle { background: rgba(15, 38, 56, .04); }
.favm-ic { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center;
           background: var(--o6, rgba(255,255,255,.06)); color: var(--mut2, #b6c4cc); }
html[data-theme="light"] .favm-ic { background: rgba(15, 38, 56, .06); color: #4f6472; }
.favm-ic svg { width: 14px; height: 14px; }
.favm-lbl { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.favm-etat { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 650; color: var(--st-amber, #fbbf24); }
html[data-theme="light"] .favm-etat { color: #8a5a00; }
.favm-epingler { margin-top: 4px; border-top: 1px solid var(--o8, rgba(255,255,255,.08)); border-radius: 0 0 8px 8px; padding-top: 8px; color: var(--mut2, #b6c4cc); }
html[data-theme="light"] .favm-epingler { border-top-color: rgba(15, 38, 56, .1); color: #4f6472; }
.favm-epingler[aria-pressed="true"] .favm-ic svg { fill: currentColor; color: var(--st-amber, #fbbf24); }
/* Les gestes de l'en-tête du Reporting ne rétrécissent pas (reporting.css) ; l'étoile non plus. */
.rep-head > .favm { flex-shrink: 0; }
/* Pilotage au téléphone : l'étoile passe dans « Outils » (ListeFavoris), comme Apparence. */
@media (max-width: 640px) { .fintree-head > .favm { display: none; } }

/* ── La liste dans un menu (feuille du bas, « Outils ») ── */
.favl { display: flex; flex-direction: column; }
.favl-t { display: flex; align-items: center; gap: 5px; }
.favl-t svg { color: var(--st-amber, #fbbf24); }
html[data-theme="light"] .favl-t svg { color: #b7791f; }
.favl-verrou { margin-left: auto; display: inline-flex; color: var(--st-amber, #fbbf24); }
html[data-theme="light"] .favl-verrou { color: #8a5a00; }
/* Feuille du bas du hub : seulement au téléphone (au-delà, la barre sous l'en-tête porte les favoris). */
.favl-fab { margin: 4px 0 6px; padding-bottom: 6px; border-bottom: 1px solid var(--o8, rgba(255,255,255,.08)); }
html[data-theme="light"] .favl-fab { border-bottom-color: rgba(15, 38, 56, .1); }
.favl-fab .favl-t { padding: 6px 12px 4px; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--mut1, #8aa0ad); }
@media (min-width: 641px) { .favl-fab { display: none; } }
@media (max-width: 640px) { .favb { display: none; } }

/* ── Écran d'ouverture (panneau Apparence) : section .appx-sec et menus de l'app depuis le 13/10 (styles dans analyses.css,
   « Fenêtre Apparence, refonte du 13/10 ») ; les listes natives .favo-sel sont parties. ── */

/* ── La palette : étoile et maison sur chaque ligne ── */
.cpal-o-act { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 2px; margin-left: 2px; }
.cpal-o-btn {
    display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; border-radius: 7px;
    color: var(--mut1, #8aa0ad); background: transparent; border: 1px solid transparent; cursor: pointer; opacity: 0;
    transition: opacity .1s, color .1s, background .1s;
}
.cpal-o-btn svg { width: 13px; height: 13px; }
.cpal-o.actif .cpal-o-btn, .cpal-o:hover .cpal-o-btn, .cpal-o-btn.on { opacity: 1; }
.cpal-o-btn:hover { color: var(--tx1, #e8eef2); background: var(--o6, rgba(255,255,255,.06)); }
html[data-theme="light"] .cpal-o-btn:hover { color: #10212b; background: rgba(15, 38, 56, .06); }
.cpal-o-fav.on { color: var(--st-amber, #fbbf24); }
.cpal-o-fav.on svg { fill: currentColor; }
html[data-theme="light"] .cpal-o-fav.on { color: #b7791f; }
.cpal-o-ouv.on { color: var(--brand-strong, var(--brand, #00B1CF)); }
/* Écran tactile : pas de survol ; étoile et maison restent visibles, à 40 px. */
@media (hover: none), (pointer: coarse) {
    .cpal-o-btn { opacity: .75; width: 40px; height: 40px; }
    .cpal-o-btn.on { opacity: 1; }
}
/*  12/10 : un PC à écran tactile répond aussi (pointer: coarse) : ses lignes montaient à 48 px pour deux boutons de 40 px (« trop de
    scroll », Arthur). Au-delà du téléphone, 26 px (au-dessus des 24 px du WCAG 2.2) : la ligne reste à 34 px. */
@media ((hover: none) or (pointer: coarse)) and (min-width: 641px) {
    .cpal-o-btn { width: 26px; height: 26px; }
}

/* ── Compact ── */
html[data-density="compact"] .favb { margin: 2px 0 8px; }
html[data-density="compact"] .favb-b { height: 24px; padding: 0 9px 0 7px; font-size: 12px; }
html[data-density="compact"] .favm-i, html[data-density="compact"] .favm-epingler { min-height: 30px; padding: 3px 7px; }
html[data-density="compact"] .favm-ic { width: 22px; height: 22px; }

/* ── Mat : surfaces pleines, filets du style ── */
html[data-style="mat"] .favb-b { background: var(--mt-carte) !important; border-color: var(--mt-trait) !important; box-shadow: none !important; }
html[data-style="mat"] .favb-b:hover { background: var(--mt-carte-2) !important; border-color: color-mix(in srgb, var(--brand, #00B1CF) 40%, var(--mt-trait)) !important; }
html[data-style="mat"] .favm-l { background: var(--mt-carte) !important; border-color: var(--mt-trait) !important; box-shadow: 0 12px 32px rgba(0, 0, 0, .34) !important; }
html[data-style="mat"][data-theme="light"] .favm-l { box-shadow: 0 12px 32px rgba(15, 38, 56, .16) !important; }
html[data-style="mat"] .favm-epingler { border-top-color: var(--mt-trait) !important; }

/* ── Papier : angles droits, titres à empattements ── */
html[data-papier] .favb-b { border-radius: 4px !important; }
html[data-papier] :is(.favb-t, .favm-t, .favl-fab .favl-t) { font-family: var(--pp-serif); text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 700; }
html[data-papier] .favm-l { border-radius: 6px !important; box-shadow: var(--pp-ombre-fen) !important; }
html[data-papier] :is(.favm-i, .favm-epingler, .favm-ic, .cpal-o-btn) { border-radius: 4px !important; }

/* ── Animations réduites ── */
html[data-motion="reduites"] :is(.favb-i, .favb-b, .cpal-o-btn) { transition: none; }
@media (prefers-reduced-motion: reduce) { :is(.favb-i, .favb-b, .cpal-o-btn) { transition: none; } }