/* En-tête ordinateur (≥ 992px) — partials/desktop_header.html.
   Une seule barre en verre dépoli à la place des trois bandeaux historiques : marque,
   onglets du rôle (mêmes que le dock mobile) avec indicateur glissant, bouton « Créer »,
   palette de recherche Ctrl/⌘ K, messagerie, menu du compte. Rétrécit au défilement. */

.sf-dh, .sf-cmdk { display: none; }

@media (min-width: 992px) {
    .sf-dh ~ .top-info-bar,
    .sf-dh ~ .brand-section,
    .sf-dh ~ .main-navbar { display: none !important; }

    /* Barre sombre (vert profond du thème) : icônes et libellés blancs, accents dorés —
       sur fond blanc, certaines icônes claires se perdaient. */
    .sf-dh {
        --dh-h: 74px;
        --dh-ink: #0f2417;           /* texte des menus déroulants (fond blanc) */
        --dh-muted: #5b6b64;
        --dh-on: #fff;               /* texte sur la barre */
        --dh-on-muted: rgba(255, 255, 255, .7);
        --dh-glass: rgba(255, 255, 255, .07);
        --dh-glass-line: rgba(255, 255, 255, .11);
        display: block; position: sticky; top: 0; z-index: 1030;
        background:
            radial-gradient(520px 120px at 12% -40%, rgba(var(--sf-accent-500-rgb, 212, 175, 55), .22), transparent 70%),
            radial-gradient(700px 160px at 88% 140%, rgba(var(--sf-brand-700-rgb, 46, 125, 50), .45), transparent 70%),
            linear-gradient(115deg, var(--sf-brand-950, #0a1a11), var(--sf-brand-900, #0f3d20) 55%, var(--sf-brand-950, #0a1a11));
        box-shadow: 0 10px 30px -18px rgba(5, 15, 9, .8);
        transition: box-shadow .3s ease;
        font-family: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }
    /* Grain de grille très léger, comme les héros des pages publiques. */
    .sf-dh::before {
        content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
        background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
        background-size: 34px 34px; -webkit-mask-image: linear-gradient(90deg, #000, transparent 30%, transparent 70%, #000); mask-image: linear-gradient(90deg, #000, transparent 30%, transparent 70%, #000);
    }
    /* Liseré de marque animé en bas de la barre. */
    .sf-dh::after {
        content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none;
        background: linear-gradient(90deg, transparent, rgba(var(--sf-accent-500-rgb, 212, 175, 55), .2) 20%, var(--sf-accent-500, #D4AF37) 50%, rgba(var(--sf-accent-500-rgb, 212, 175, 55), .2) 80%, transparent);
        background-size: 200% 100%; opacity: .9; animation: sf-dh-line 9s linear infinite;
    }
    @keyframes sf-dh-line { to { background-position: -200% 0; } }
    .sf-dh.is-scrolled { --dh-h: 60px; box-shadow: 0 16px 40px -16px rgba(5, 15, 9, .9); }

    .sf-dh-inner {
        height: var(--dh-h); max-width: 1600px; margin: 0 auto; padding: 0 1.75rem;
        position: relative; display: flex; align-items: center; gap: 1.25rem; transition: height .3s cubic-bezier(.2, .8, .2, 1);
    }

    /* Marque */
    .sf-dh-brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; flex: 0 0 auto; min-width: 0; }
    .sf-dh-logo {
        width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; flex: 0 0 auto;
        background: linear-gradient(145deg, #fff, #e8f3eb); box-shadow: 0 0 0 4px rgba(var(--sf-accent-500-rgb, 212, 175, 55), .16), 0 8px 18px -8px rgba(0, 0, 0, .7);
        transition: transform .3s ease, width .3s ease, height .3s ease;
    }
    .sf-dh.is-scrolled .sf-dh-logo { width: 36px; height: 36px; border-radius: 12px; }
    .sf-dh-brand:hover .sf-dh-logo { transform: rotate(-6deg) scale(1.05); }
    .sf-dh-logo img { width: 30px; height: 30px; object-fit: contain; }
    .sf-dh-brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
    .sf-dh-brand-text strong { font-size: 1.05rem; font-weight: 800; color: var(--dh-on); letter-spacing: -.01em; white-space: nowrap; max-width: 15rem; overflow: hidden; text-overflow: ellipsis; }
    .sf-dh-brand-text small { font-size: .72rem; font-weight: 700; color: var(--sf-accent-300, #f0cd6e); white-space: nowrap; letter-spacing: .02em; }

    /* Onglets + indicateur glissant */
    .sf-dh-nav { position: relative; display: flex; align-items: center; gap: .15rem; padding: .3rem; border-radius: 16px; margin: 0 auto;
        background: rgba(0, 0, 0, .18); box-shadow: inset 0 0 0 1px var(--dh-glass-line); min-width: 0; overflow: hidden; }
    .sf-dh-ink {
        position: absolute; top: .3rem; bottom: .3rem; left: 0; width: 0; border-radius: 12px; opacity: 0; pointer-events: none;
        background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .08));
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), inset 0 -2px 0 var(--sf-accent-500, #D4AF37), 0 10px 22px -12px rgba(0, 0, 0, .8);
        transition: transform .38s cubic-bezier(.2, .8, .2, 1), width .38s cubic-bezier(.2, .8, .2, 1), opacity .2s ease;
    }
    .sf-dh-link {
        position: relative; z-index: 1; display: inline-flex; align-items: center; gap: .5rem; height: 40px; padding: 0 .95rem; border: 0; border-radius: 12px;
        background: transparent; color: var(--dh-on-muted) !important; font-size: .88rem; font-weight: 700; text-decoration: none; white-space: nowrap; cursor: pointer;
        transition: color .25s ease;
    }
    .sf-dh-link i { font-size: .9rem; opacity: .85; }
    .sf-dh-link:hover { color: var(--dh-on) !important; }
    .sf-dh-link.is-active i, .sf-dh-link.is-ink i { color: var(--sf-accent-300, #f0cd6e); opacity: 1; }
    .sf-dh-link.is-active, .sf-dh-link.is-ink { color: #fff !important; }
    .sf-dh-nav:not(.has-ink) .sf-dh-link.is-active { background: rgba(255, 255, 255, .12); }
    .sf-dh-space { margin-left: .15rem; }
    .sf-dh-space::before { content: ""; position: absolute; left: -.2rem; top: 25%; bottom: 25%; width: 1px; background: var(--dh-glass-line); }
    .sf-dh-space[aria-expanded="true"] { color: #fff !important; background: rgba(var(--sf-accent-500-rgb, 212, 175, 55), .16); box-shadow: inset 0 0 0 1px rgba(var(--sf-accent-500-rgb, 212, 175, 55), .35); }
    .sf-dh-space[aria-expanded="true"] i { color: var(--sf-accent-300, #f0cd6e); }
    .sf-dh-badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; display: inline-grid; place-items: center;
        font-size: .66rem; font-weight: 800; color: #fff; background: #ef4444; box-shadow: 0 0 0 2px var(--sf-brand-950, #0a1a11); }
    .sf-dh-badge.is-sos { animation: sf-dh-sos 1.4s ease-out infinite; }
    @keyframes sf-dh-sos { 0% { box-shadow: 0 0 0 2px rgba(239, 68, 68, .7); } 100% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); } }

    /* Actions à droite */
    .sf-dh-actions { display: flex; align-items: center; gap: .55rem; flex: 0 0 auto; }
    .sf-dh-create {
        display: inline-flex; align-items: center; gap: .5rem; height: 42px; padding: 0 1rem; border: 0; border-radius: 13px; cursor: pointer;
        font-size: .86rem; font-weight: 800; color: var(--sf-brand-950, #0a1a11) !important; text-decoration: none;
        background: linear-gradient(135deg, var(--sf-accent-500, #D4AF37), var(--sf-accent-300, #f0cd6e));
        box-shadow: 0 10px 22px -12px rgba(var(--sf-accent-500-rgb, 212, 175, 55), .9); transition: transform .15s ease, box-shadow .2s ease;
    }
    .sf-dh-create:hover { transform: translateY(-1px); box-shadow: 0 14px 26px -12px rgba(var(--sf-accent-500-rgb, 212, 175, 55), 1); }
    .sf-dh-caret { font-size: .62rem; opacity: .7; transition: transform .25s ease; }
    [aria-expanded="true"] > .sf-dh-caret { transform: rotate(180deg); }

    .sf-dh-search {
        display: inline-flex; align-items: center; gap: .6rem; height: 42px; width: 230px; padding: 0 .55rem 0 .9rem; border-radius: 13px; cursor: pointer;
        border: 1px solid var(--dh-glass-line); background: var(--dh-glass); color: var(--dh-on-muted); font-size: .86rem; font-weight: 600;
        transition: border-color .2s ease, box-shadow .2s ease, width .3s ease;
    }
    .sf-dh-search:hover { border-color: rgba(var(--sf-accent-500-rgb, 212, 175, 55), .5); background: rgba(255, 255, 255, .1); box-shadow: 0 0 0 4px rgba(var(--sf-accent-500-rgb, 212, 175, 55), .1); color: #fff; }
    .sf-dh-search span { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .sf-dh-search i { color: var(--sf-accent-300, #f0cd6e); }
    .sf-dh-search kbd { color: rgba(255, 255, 255, .8); background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); box-shadow: none; }
    .sf-dh kbd, .sf-cmdk kbd, .sf-space kbd {
        font-family: inherit; font-size: .68rem; font-weight: 800; color: var(--dh-muted, #5b6b64); background: #fff; padding: .16rem .42rem; border-radius: 7px;
        border: 1px solid rgba(15, 36, 23, .12); box-shadow: 0 1px 0 rgba(15, 36, 23, .12);
    }

    .sf-dh-icon { position: relative; width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; color: #fff !important;
        background: var(--dh-glass); box-shadow: inset 0 0 0 1px var(--dh-glass-line); text-decoration: none; transition: background-color .2s ease, transform .15s ease; }
    .sf-dh-icon:hover { background: rgba(255, 255, 255, .14); transform: translateY(-1px); }
    .sf-dh-dot { position: absolute; top: -4px; right: -4px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; display: grid; place-items: center;
        background: #ef4444; color: #fff; font-size: .66rem; font-weight: 800; box-shadow: 0 0 0 2px var(--sf-brand-950, #0a1a11); }
    .sf-dh-dot[hidden], .sf-dh-pill[hidden] { display: none; }

    .sf-dh-avatar { display: inline-flex; align-items: center; gap: .6rem; height: 46px; padding: 0 .7rem 0 .3rem; border: 0; border-radius: 15px; cursor: pointer;
        background: transparent; transition: background-color .2s ease; }
    .sf-dh-avatar:hover, .sf-dh-avatar[aria-expanded="true"] { background: rgba(255, 255, 255, .09); }
    .sf-dh-avatar .sf-dh-caret { color: #fff; }
    .sf-dh-avatar-ini, .sf-dh-acc-ini { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-weight: 800; font-size: .86rem; color: var(--sf-brand-950, #0a1a11);
        background: linear-gradient(135deg, var(--sf-accent-500, #D4AF37), var(--sf-accent-300, #f0cd6e)); box-shadow: 0 6px 14px -8px rgba(161, 98, 7, .8); }
    .sf-dh-avatar-txt { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
    .sf-dh-avatar-txt strong { font-size: .84rem; color: #fff; max-width: 8.5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .sf-dh-avatar-txt small { font-size: .7rem; color: var(--sf-accent-300, #f0cd6e); font-weight: 700; }

    /* Visiteur */
    .sf-dh-ghost { display: inline-flex; align-items: center; gap: .45rem; height: 42px; padding: 0 1rem; border-radius: 13px; font-weight: 800; font-size: .86rem;
        color: #fff !important; text-decoration: none; border: 1.5px solid rgba(255, 255, 255, .28); transition: background-color .2s ease, border-color .2s ease; }
    .sf-dh-ghost:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .5); }
    .sf-dh-cta { display: inline-flex; align-items: center; gap: .55rem; height: 42px; padding: 0 1.1rem; border-radius: 13px; font-weight: 800; font-size: .86rem;
        color: var(--sf-brand-950, #0a1a11) !important; text-decoration: none; background: linear-gradient(135deg, var(--sf-accent-500, #D4AF37), var(--sf-accent-300, #f0cd6e));
        box-shadow: 0 10px 22px -12px rgba(var(--sf-accent-500-rgb, 212, 175, 55), .9); transition: transform .15s ease; }
    .sf-dh-cta:hover { transform: translateY(-1px); }
    .sf-dh-cta i { font-size: .78rem; transition: transform .2s ease; }
    .sf-dh-cta:hover i { transform: translateX(3px); }

    /* Menus déroulants */
    .sf-dh-pop-wrap { position: relative; }
    .sf-dh-pop {
        position: absolute; right: 0; top: calc(100% + 10px); z-index: 1060; min-width: 300px; padding: .6rem; border-radius: 20px;
        background: #fff; box-shadow: 0 30px 60px -20px rgba(15, 36, 23, .45), 0 0 0 1px rgba(15, 36, 23, .06);
        transform-origin: top right; animation: sf-dh-pop .22s cubic-bezier(.2, .8, .2, 1);
    }
    .sf-dh-pop[hidden] { display: none; }
    @keyframes sf-dh-pop { from { opacity: 0; transform: translateY(-6px) scale(.97); } }
    .sf-dh-pop-kicker { padding: .35rem .6rem .55rem; font-size: .7rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--dh-muted); }
    .sf-dh-create-pop { min-width: 380px; }
    .sf-dh-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
    .sf-dh-tile { display: flex; align-items: center; gap: .7rem; padding: .7rem; border-radius: 14px; text-decoration: none; color: var(--dh-ink) !important; transition: background-color .15s ease; }
    .sf-dh-tile:hover { background: #f3f7f4; }
    .sf-dh-tile-ico { width: 38px; height: 38px; flex: 0 0 auto; border-radius: 12px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--sf-brand-800, #1b5e20), var(--sf-brand-700, #2e7d32)); }
    .sf-dh-tile.is-gold .sf-dh-tile-ico { background: linear-gradient(135deg, #a16207, var(--sf-accent-500, #D4AF37)); }
    .sf-dh-tile.is-blue .sf-dh-tile-ico { background: linear-gradient(135deg, #1d4ed8, #60a5fa); }
    .sf-dh-tile.is-red .sf-dh-tile-ico { background: linear-gradient(135deg, #b91c1c, #ef4444); }
    .sf-dh-tile.is-purple .sf-dh-tile-ico { background: linear-gradient(135deg, #6d28d9, #a78bfa); }
    .sf-dh-tile-txt { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
    .sf-dh-tile-txt strong { font-size: .86rem; }
    .sf-dh-tile-txt small { font-size: .72rem; color: var(--dh-muted); }

    .sf-dh-account { width: 320px; }
    .sf-dh-acc-head { display: flex; align-items: center; gap: .8rem; padding: .8rem; margin-bottom: .4rem; border-radius: 16px; color: #fff;
        background: radial-gradient(240px 120px at 100% 0, rgba(var(--sf-accent-500-rgb, 212, 175, 55), .3), transparent 70%), linear-gradient(135deg, var(--sf-brand-900, #0f3d20), var(--sf-brand-800, #1b5e20)); }
    .sf-dh-acc-ini { width: 46px; height: 46px; border-radius: 14px; font-size: 1rem; }
    .sf-dh-acc-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
    .sf-dh-acc-who strong { font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .sf-dh-acc-who small { font-size: .74rem; opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .sf-dh-acc-who em { font-style: normal; font-size: .7rem; font-weight: 800; color: var(--sf-accent-300, #f0cd6e); display: inline-flex; align-items: center; gap: .35rem; }
    .sf-dh-acc-who em i { font-size: .4rem; color: #4ade80; }
    .sf-dh-acc-list { display: flex; flex-direction: column; }
    .sf-dh-acc-list a, .sf-dh-acc-list button { display: flex; align-items: center; gap: .7rem; padding: .62rem .7rem; border: 0; border-radius: 12px; background: transparent;
        color: var(--dh-ink) !important; text-decoration: none; font-size: .88rem; font-weight: 700; text-align: left; cursor: pointer; transition: background-color .15s ease; }
    .sf-dh-acc-list a:hover, .sf-dh-acc-list button:hover { background: #f3f7f4; }
    .sf-dh-acc-list i { width: 18px; text-align: center; color: var(--dh-muted); }
    .sf-dh-acc-list i.is-gold { color: #a16207; } .sf-dh-acc-list i.is-blue { color: #2563eb; }
    .sf-dh-pill { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #ef4444; color: #fff; font-size: .68rem; font-weight: 800; display: grid; place-items: center; }
    .sf-dh-acc-sep { height: 1px; margin: .4rem .5rem; background: rgba(15, 36, 23, .08); }
    .sf-dh-acc-row { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .55rem .7rem; border: 0; border-radius: 12px; background: transparent;
        font-size: .88rem; font-weight: 700; color: var(--dh-ink); text-align: left; }
    .sf-dh-acc-row > span:first-child { display: flex; align-items: center; gap: .7rem; }
    .sf-dh-acc-row > span:first-child i { width: 18px; text-align: center; color: var(--dh-muted); }
    .sf-dh-acc-row small { display: block; font-size: .7rem; font-weight: 600; color: var(--dh-muted); margin-left: .15rem; }
    .sf-dh-push { cursor: pointer; } .sf-dh-push:hover { background: #f3f7f4; }
    .sf-dh-push > span:first-child { flex-wrap: wrap; }
    .sf-dh-seg { display: inline-flex; padding: 3px; border-radius: 11px; background: #eef2ef; }
    .sf-dh-seg button { width: 32px; height: 28px; border: 0; border-radius: 8px; background: transparent; color: var(--dh-muted); cursor: pointer; transition: background-color .2s ease, color .2s ease; }
    .sf-dh-seg button[aria-pressed="true"] { background: #fff; color: var(--sf-brand-800, #1b5e20); box-shadow: 0 2px 6px -2px rgba(15, 36, 23, .35); }
    .sf-dh-switch { width: 40px; height: 24px; border-radius: 999px; background: #d5ddd8; position: relative; flex: 0 0 auto; transition: background-color .2s ease; }
    .sf-dh-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, .25); transition: transform .22s cubic-bezier(.2, .8, .2, 1); }
    .sf-dh-push.is-on .sf-dh-switch { background: var(--sf-brand-700, #2e7d32); }
    .sf-dh-push.is-on .sf-dh-switch::after { transform: translateX(16px); }
    .sf-dh-logout { display: flex; align-items: center; justify-content: center; gap: .55rem; margin-top: .4rem; padding: .7rem; border-radius: 13px; font-weight: 800; font-size: .86rem;
        color: #b42318 !important; background: #fef2f2; text-decoration: none; transition: background-color .15s ease; }
    .sf-dh-logout:hover { background: #fde2e2; }

    /* ---- Palette Ctrl/⌘ K ------------------------------------------------------ */
    .sf-cmdk { display: block; position: fixed; inset: 0; z-index: 1070; }
    .sf-cmdk[hidden] { display: none; }
    .sf-cmdk-backdrop { position: absolute; inset: 0; background: rgba(8, 20, 13, .45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: sf-cmdk-fade .2s ease; }
    @keyframes sf-cmdk-fade { from { opacity: 0; } }
    .sf-cmdk-panel {
        position: relative; width: min(680px, calc(100vw - 3rem)); margin: 11vh auto 0; border-radius: 22px; overflow: hidden; background: #fff;
        box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .6), 0 0 0 1px rgba(15, 36, 23, .06); animation: sf-cmdk-in .26s cubic-bezier(.2, .8, .2, 1);
        font-family: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }
    @keyframes sf-cmdk-in { from { opacity: 0; transform: translateY(-14px) scale(.98); } }
    .sf-cmdk-field { display: flex; align-items: center; gap: .8rem; padding: 1.05rem 1.25rem; border-bottom: 1px solid rgba(15, 36, 23, .08); }
    .sf-cmdk-field > i { color: var(--sf-brand-700, #2e7d32); font-size: 1.05rem; }
    .sf-cmdk-field input { flex: 1; border: 0; outline: none; font-size: 1.08rem; font-weight: 600; color: #0f2417; background: transparent; }
    .sf-cmdk-list { max-height: min(56vh, 460px); overflow-y: auto; padding: .5rem; overscroll-behavior: contain; }
    .sf-cmdk-group { padding: .7rem .7rem .35rem; font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #8a9a93; }
    .sf-cmdk-item { display: flex; align-items: center; gap: .8rem; padding: .6rem .7rem; border-radius: 13px; text-decoration: none; color: #0f2417 !important; cursor: pointer; }
    .sf-cmdk-item.is-active { background: linear-gradient(135deg, rgba(var(--sf-brand-800-rgb, 27, 94, 32), .1), rgba(var(--sf-brand-700-rgb, 46, 125, 50), .06)); box-shadow: inset 3px 0 0 var(--sf-brand-700, #2e7d32); }
    .sf-cmdk-ico { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 10px; display: grid; place-items: center; background: #f1f5f2; color: var(--sf-brand-800, #1b5e20); font-size: .85rem; }
    .sf-cmdk-item.is-active .sf-cmdk-ico { background: linear-gradient(135deg, var(--sf-brand-800, #1b5e20), var(--sf-brand-700, #2e7d32)); color: #fff; }
    .sf-cmdk-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
    .sf-cmdk-txt strong { font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .sf-cmdk-txt strong mark { padding: 0; background: rgba(var(--sf-accent-500-rgb, 212, 175, 55), .35); color: inherit; border-radius: 3px; }
    .sf-cmdk-txt small { font-size: .74rem; color: #6b7a73; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .sf-cmdk-kind { font-size: .68rem; font-weight: 800; color: #8a9a93; padding: .18rem .5rem; border-radius: 999px; background: #f1f5f2; }
    .sf-cmdk-enter { opacity: 0; color: var(--sf-brand-700, #2e7d32); font-size: .8rem; }
    .sf-cmdk-item.is-active .sf-cmdk-enter { opacity: 1; }
    .sf-cmdk-empty { padding: 2rem 1rem; text-align: center; color: #8a9a93; font-size: .9rem; }
    .sf-cmdk-loading { display: flex; align-items: center; gap: .6rem; padding: .6rem .7rem; font-size: .8rem; color: #8a9a93; }
    .sf-cmdk-foot { display: flex; align-items: center; gap: 1.1rem; padding: .7rem 1.2rem; border-top: 1px solid rgba(15, 36, 23, .08); background: #fafcfb; font-size: .74rem; color: #6b7a73; }
    .sf-cmdk-foot kbd { margin-right: .2rem; }
    .sf-cmdk-brand { margin-left: auto; display: inline-flex; align-items: center; gap: .4rem; font-weight: 800; color: var(--sf-brand-800, #1b5e20); }

    /* ---- « Mon espace » : centre de commande ------------------------------------ */
    .sf-space { display: block; position: fixed; inset: 0; z-index: 1025; }
    .sf-space[hidden] { display: none; }
    .sf-space-backdrop { position: absolute; inset: 0; background: rgba(6, 16, 10, .42); -webkit-backdrop-filter: blur(5px) saturate(.9); backdrop-filter: blur(5px) saturate(.9);
        animation: sf-cmdk-fade .25s ease; }
    .sf-space-panel {
        --tone-green: #1b7a3d; --tone-blue: #2563eb; --tone-teal: #0d9488; --tone-gold: #a16207; --tone-red: #dc2626; --tone-slate: #475569; --tone-orange: #ea580c;
        position: absolute; top: calc(var(--sf-dh-bottom, 74px) + 12px); left: 50%; width: min(1240px, calc(100vw - 2.5rem)); transform: translateX(-50%);
        height: min(640px, calc(100vh - var(--sf-dh-bottom, 74px) - 32px));
        display: grid; grid-template-columns: 290px 1fr; border-radius: 26px; overflow: hidden; background: #f6f9f7;
        box-shadow: 0 50px 100px -30px rgba(0, 0, 0, .65), 0 0 0 1px rgba(255, 255, 255, .08);
        animation: sf-space-in .34s cubic-bezier(.2, .8, .2, 1);
        font-family: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }
    @keyframes sf-space-in { from { opacity: 0; transform: translate(-50%, -14px) scale(.985); } }

    .sf-space-side {
        position: relative; display: flex; flex-direction: column; gap: .9rem; padding: 1.3rem 1.1rem 1rem; color: #fff; overflow: hidden;
        background:
            radial-gradient(280px 200px at 0% 0%, rgba(var(--sf-accent-500-rgb, 212, 175, 55), .25), transparent 70%),
            linear-gradient(170deg, var(--sf-brand-900, #0f3d20), var(--sf-brand-950, #0a1a11));
    }
    .sf-space-side::after { content: ""; position: absolute; right: -90px; bottom: -90px; width: 260px; height: 260px; border-radius: 50%; pointer-events: none;
        border: 1px solid rgba(var(--sf-accent-500-rgb, 212, 175, 55), .18); box-shadow: 0 0 0 40px rgba(var(--sf-accent-500-rgb, 212, 175, 55), .04), 0 0 0 80px rgba(var(--sf-accent-500-rgb, 212, 175, 55), .025); }
    .sf-space-hello { display: flex; align-items: center; gap: .8rem; }
    .sf-space-ini { width: 50px; height: 50px; border-radius: 16px; display: grid; place-items: center; font-weight: 800; color: var(--sf-brand-950, #0a1a11);
        background: linear-gradient(135deg, var(--sf-accent-500, #D4AF37), var(--sf-accent-300, #f0cd6e)); box-shadow: 0 10px 22px -10px rgba(0, 0, 0, .7); flex: 0 0 auto; }
    .sf-space-who { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
    .sf-space-who small { font-size: .74rem; color: rgba(255, 255, 255, .65); font-weight: 600; }
    .sf-space-who strong { font-size: 1.12rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .sf-space-who em { font-style: normal; font-size: .72rem; font-weight: 800; color: var(--sf-accent-300, #f0cd6e); display: inline-flex; align-items: center; gap: .35rem; }
    .sf-space-who em i { font-size: .4rem; color: #4ade80; }
    .sf-space-filter { display: flex; align-items: center; gap: .6rem; height: 44px; padding: 0 .85rem; border-radius: 14px; margin: 0; cursor: text;
        background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); transition: border-color .2s ease, background-color .2s ease; }
    .sf-space-filter:focus-within { border-color: rgba(var(--sf-accent-500-rgb, 212, 175, 55), .6); background: rgba(255, 255, 255, .12); }
    .sf-space-filter i { color: var(--sf-accent-300, #f0cd6e); font-size: .85rem; }
    .sf-space-filter input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: #fff; font-size: .9rem; font-weight: 600; }
    .sf-space-filter input::placeholder { color: rgba(255, 255, 255, .5); }
    .sf-space-todo { display: flex; align-items: center; gap: .55rem; padding: .6rem .8rem; border-radius: 13px; border: 1px solid rgba(var(--sf-accent-500-rgb, 212, 175, 55), .35);
        background: rgba(var(--sf-accent-500-rgb, 212, 175, 55), .12); color: var(--sf-accent-300, #f0cd6e); font-size: .84rem; font-weight: 800; cursor: pointer; text-align: left; }
    .sf-space-todo[hidden] { display: none; }
    .sf-space-todo b { margin-left: auto; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center; background: var(--sf-accent-500, #D4AF37); color: var(--sf-brand-950, #0a1a11); font-size: .72rem; }
    .sf-space-todo.is-active { background: linear-gradient(135deg, var(--sf-accent-500, #D4AF37), var(--sf-accent-300, #f0cd6e)); color: var(--sf-brand-950, #0a1a11); }
    .sf-space-todo.is-active b { background: var(--sf-brand-950, #0a1a11); color: var(--sf-accent-300, #f0cd6e); }
    .sf-space-jump { position: relative; z-index: 1; flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: .15rem; margin: 0 -.3rem; padding: 0 .3rem; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.2) transparent; }
    .sf-space-jump button { display: flex; align-items: center; gap: .65rem; padding: .55rem .6rem; border: 0; border-radius: 12px; background: transparent; color: rgba(255, 255, 255, .78);
        font-size: .86rem; font-weight: 700; text-align: left; cursor: pointer; transition: background-color .15s ease, color .15s ease; }
    .sf-space-jump button:hover, .sf-space-jump button.is-active { background: rgba(255, 255, 255, .09); color: #fff; }
    .sf-space-jump button[hidden] { display: none; }
    .sf-space-jump .sf-space-jico { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; font-size: .78rem; flex: 0 0 auto; background: rgba(255, 255, 255, .08); color: var(--sf-accent-300, #f0cd6e); }
    .sf-space-jump .sf-space-jlabel { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .sf-space-jump .sf-space-jcount { font-size: .7rem; font-weight: 800; color: rgba(255, 255, 255, .45); }
    .sf-space-jump button.has-todo .sf-space-jcount { color: var(--sf-accent-300, #f0cd6e); }
    .sf-space-jump button.has-todo .sf-space-jcount::before { content: "●"; margin-right: .3rem; font-size: .55rem; vertical-align: middle; }
    .sf-space-hint { position: relative; z-index: 1; display: flex; flex-direction: column; gap: .35rem; padding-top: .7rem; border-top: 1px solid rgba(255, 255, 255, .1); font-size: .72rem; color: rgba(255, 255, 255, .55); }
    .sf-space-hint kbd { margin-right: .4rem; color: rgba(255, 255, 255, .85); background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); box-shadow: none; }

    .sf-space-main { overflow-y: auto; padding: 1.3rem 1.4rem 1.6rem; scroll-behavior: smooth; overscroll-behavior: contain; }
    .sf-space-freq { margin-bottom: 1.1rem; }
    .sf-space-freq[hidden] { display: none; }
    .sf-space-freq h6, .sf-space-card-sub { font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #7b8b84; margin: 0 0 .6rem; }
    .sf-space-freq h6 i { color: var(--sf-accent-500, #D4AF37); margin-right: .4rem; }
    .sf-space-freq-row { display: flex; flex-wrap: wrap; gap: .5rem; }
    .sf-space-freq-row a { display: inline-flex; align-items: center; gap: .55rem; padding: .5rem .85rem .5rem .55rem; border-radius: 14px; background: #fff; text-decoration: none;
        color: #0f2417 !important; font-size: .84rem; font-weight: 700; box-shadow: 0 6px 16px -12px rgba(15, 36, 23, .5), inset 0 0 0 1px rgba(15, 36, 23, .06); transition: transform .15s ease, box-shadow .2s ease; }
    .sf-space-freq-row a:hover { transform: translateY(-2px); box-shadow: 0 12px 22px -12px rgba(15, 36, 23, .5), inset 0 0 0 1px rgba(var(--sf-brand-700-rgb, 46, 125, 50), .3); }
    .sf-space-grid { columns: 3 250px; column-gap: 1rem; }
    .sf-space-card { break-inside: avoid; margin: 0 0 1rem; padding: .9rem .75rem .6rem; border-radius: 20px; background: #fff;
        box-shadow: 0 10px 26px -20px rgba(15, 36, 23, .55), inset 0 0 0 1px rgba(15, 36, 23, .05); transition: box-shadow .3s ease; }
    .sf-space-card[hidden] { display: none; }
    .sf-space-card.is-flash { box-shadow: 0 0 0 3px rgba(var(--sf-accent-500-rgb, 212, 175, 55), .55), 0 16px 30px -18px rgba(15, 36, 23, .6); }
    .sf-space-card-head { display: flex; align-items: center; gap: .65rem; padding: 0 .3rem .55rem; }
    .sf-space-card-head .sf-space-ico { width: 34px; height: 34px; border-radius: 11px; font-size: .85rem; color: #fff; }
    .sf-space-card-head strong { flex: 1; font-size: .95rem; color: #0f2417; }
    .sf-space-card-head small { font-size: .7rem; font-weight: 800; color: #9aa8a1; }
    .sf-space-card-sub { padding: .55rem .35rem .25rem; margin: 0; font-size: .64rem; }
    .sf-space-ico { display: grid; place-items: center; flex: 0 0 auto; }
    .sf-space-link { display: flex; align-items: center; gap: .65rem; padding: .48rem .4rem; border-radius: 12px; text-decoration: none; color: #1f2f27 !important; font-size: .86rem; font-weight: 650;
        transition: background-color .15s ease, transform .15s ease; }
    .sf-space-link[hidden] { display: none; }
    .sf-space-link:hover, .sf-space-link:focus-visible { background: #f1f6f2; transform: translateX(3px); outline: none; }
    .sf-space-link .sf-space-ico { width: 28px; height: 28px; border-radius: 9px; font-size: .74rem; }
    .sf-space-link span.sf-space-ltxt { flex: 1; min-width: 0; }
    .sf-space-link mark { padding: 0; background: rgba(var(--sf-accent-500-rgb, 212, 175, 55), .35); border-radius: 3px; color: inherit; }
    .sf-space-link.is-here { background: rgba(var(--sf-brand-700-rgb, 46, 125, 50), .08); }
    .sf-space-link.is-here::after { content: "Ici"; font-size: .64rem; font-weight: 800; color: var(--sf-brand-700, #2e7d32); }
    .sf-space-todo-badge { min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center; font-size: .68rem; font-weight: 800;
        color: var(--sf-brand-950, #0a1a11); background: linear-gradient(135deg, var(--sf-accent-500, #D4AF37), var(--sf-accent-300, #f0cd6e)); }
    /* Teintes : pastille pleine (en-tête de carte) ou claire (lien). */
    .tone-green  { --t: var(--tone-green); }  .tone-blue { --t: var(--tone-blue); }  .tone-teal { --t: var(--tone-teal); }
    .tone-gold   { --t: var(--tone-gold); }   .tone-red  { --t: var(--tone-red); }   .tone-slate { --t: var(--tone-slate); }
    .tone-orange { --t: var(--tone-orange); }
    .sf-space-card-head .sf-space-ico { background: linear-gradient(135deg, var(--t, var(--tone-green)), color-mix(in srgb, var(--t, var(--tone-green)) 70%, #fff)); }
    .sf-space-link .sf-space-ico { color: var(--t, var(--tone-green)); background: color-mix(in srgb, var(--t, var(--tone-green)) 12%, #fff); }
    .sf-space-freq-row .sf-space-ico { width: 28px; height: 28px; border-radius: 9px; font-size: .74rem; color: var(--t, var(--tone-green)); background: color-mix(in srgb, var(--t, var(--tone-green)) 12%, #fff); }
    .sf-space-empty { display: flex; flex-direction: column; align-items: center; gap: .6rem; padding: 3rem 1rem; color: #7b8b84; font-weight: 600; }
    .sf-space-empty[hidden] { display: none; }
    .sf-space-empty > i { font-size: 1.4rem; color: #c3cec8; }
    .sf-space-empty button { border: 0; border-radius: 12px; padding: .55rem 1rem; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--sf-brand-800, #1b5e20), var(--sf-brand-700, #2e7d32)); }

    /* Tablette à l'horizontale, petits ordinateurs : même en-tête que sur grand écran,
       resserré ; les détails ne s'effacent que si la place manque VRAIMENT — paliers
       posés par desktop-header.js (dh-t1 à dh-t4) après mesure, pas par largeur fixe. */
    @media (max-width: 1365.98px) {
        .sf-dh-inner { gap: .75rem; padding: 0 1rem; }
        .sf-dh-link { padding: 0 .75rem; font-size: .84rem; gap: .45rem; }
        .sf-dh-search { width: 180px; }
        .sf-dh-brand-text strong { max-width: 10rem; }
    }
    @media (pointer: coarse) { .sf-dh-search kbd, .sf-cmdk-foot, .sf-space-hint { display: none; } }
    .sf-dh.dh-t1 .sf-dh-search kbd, .sf-dh.dh-t1 .sf-dh-brand-text small { display: none; }
    .sf-dh.dh-t1 .sf-dh-search { width: 150px; }
    .sf-dh.dh-t1 .sf-dh-link { padding: 0 .6rem; }
    .sf-dh.dh-t2 .sf-dh-avatar-txt { display: none; }
    .sf-dh.dh-t2 .sf-dh-search { width: 44px; padding: 0; justify-content: center; }
    .sf-dh.dh-t2 .sf-dh-search span { display: none; }
    .sf-dh.dh-t3 .sf-dh-brand-text { display: none; }
    .sf-dh.dh-t3 .sf-dh-ghost span { display: none; }
    .sf-dh.dh-t3 .sf-dh-ghost { width: 44px; padding: 0; justify-content: center; }
    .sf-dh.dh-t4 .sf-dh-create span { display: none; }
    .sf-dh.dh-t5 .sf-dh-link span:not(.sf-dh-badge) { display: none; }
    .sf-dh.dh-t5 .sf-dh-link { padding: 0 .8rem; }
}
}

@media (min-width: 992px) and (prefers-reduced-motion: reduce) {
    .sf-dh::after { animation: none; }
    .sf-dh-ink, .sf-dh-inner { transition: none; }
}