/* Extrait tel quel du monocode V1 — parité totale. */
      /* ─ Bouton Notes — MÊME STYLE que les boutons d'action grid (action-btn-note : jaune pastel + border-left 4px) ─ */
      #nb-hdr-btn:not(.hdr-rond) {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 14px;
        background: #fff4d0;
        border: 1px solid rgba(245, 158, 11, 0.4);
        border-left: 4px solid #f59e0b;
        color: #92400e;
        border-radius: 10px;
        cursor: pointer;
        font-family: inherit;
        font-size: 12.5px;
        font-weight: 600;
        letter-spacing: 0.01em;
        text-transform: none;
        transition: 0.15s;
        line-height: 1.2;
      }
      #nb-hdr-btn:not(.hdr-rond):hover {
        background: #fce9a8;
        border-color: #f59e0b;
        border-left-color: #f59e0b;
        transform: translateY(-1px);
      }
      #nb-hdr-btn:not(.hdr-rond) svg {
        width: 15px;
        height: 15px;
        color: #f59e0b;
      }
      #nb-hdr-btn:not(.hdr-rond) .nb-hdr-btn-count {
        background: #f59e0b;
        color: #fff;
        font-size: 10px;
        font-weight: 800;
        padding: 1px 6px;
        border-radius: 9px;
        min-width: 18px;
        text-align: center;
        display: none;
        line-height: 1.4;
      }
      #nb-hdr-btn:not(.hdr-rond) .nb-hdr-btn-count.show {
        display: inline-block;
      }

      /* ─ (ancien) icône bouton header — conservé pour compat ─ */
      .hdr-btn-icon {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 10px;
      }
      .nb-hdr-label {
        font-size: 12px;
      }
      .nb-hdr-count {
        background: var(--navy);
        color: #fff;
        font-size: 10px;
        font-weight: 700;
        padding: 1px 6px;
        border-radius: 9px;
        min-width: 14px;
        display: none;
        line-height: 1.4;
      }
      .nb-hdr-count.show {
        display: inline-block;
      }
      /* ─ Panel Notes : slide qui descend depuis le HAUT (style notifications drop-down) ─ */
      #nb-panel {
        position: fixed;
        top: -720px;
        right: 24px;
        width: 440px;
        max-width: calc(100vw - 48px);
        max-height: 80vh;
        z-index: 9001;
        background: var(--bg, #f5f4ee);
        border: 1px solid #fcd34d;
        border-top: 4px solid #f59e0b;
        border-radius: 0 0 14px 14px;
        box-shadow:
          0 18px 50px rgba(245, 158, 11, 0.25),
          0 8px 20px rgba(15, 23, 42, 0.1);
        display: flex;
        flex-direction: column;
        transition:
          top 0.28s cubic-bezier(0.4, 0, 0.2, 1),
          opacity 0.2s;
        font-family: inherit;
        opacity: 0;
        pointer-events: none;
      }
      #nb-panel.open {
        top: 0;
        opacity: 1;
        pointer-events: auto;
      }
      /* Overlay très discret derrière, ferme au clic */
      #nb-overlay {
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.18);
        z-index: 9000;
        display: none;
      }
      #nb-overlay.open {
        display: block;
      }
      .nb-head {
        padding: 14px 16px;
        border-bottom: 1px solid var(--gray-200);
        display: flex;
        align-items: center;
        gap: 11px;
        background: #fffbeb;
      }
      .nb-av {
        width: 38px;
        height: 38px;
        border-radius: 10px;
        background: #f59e0b;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 12px;
        flex-shrink: 0;
        letter-spacing: 0.5px;
      }
      .nb-ht {
        font-weight: 700;
        color: var(--navy);
        font-size: 14px;
        line-height: 1.2;
      }
      .nb-hs {
        font-size: 11px;
        color: var(--gray-500);
        margin-top: 2px;
      }
      .nb-x {
        margin-left: auto;
        background: none;
        border: none;
        color: var(--gray-500);
        cursor: pointer;
        font-size: 22px;
        line-height: 1;
        padding: 4px 8px;
      }
      .nb-x:hover {
        color: var(--gray-900);
      }
      .nb-toolbar {
        display: flex;
        gap: 6px;
        padding: 9px 12px;
        border-bottom: 1px solid var(--gray-200);
        background: var(--white, #fff);
        align-items: center;
      }
      .nb-filter {
        flex-shrink: 0;
        padding: 4px 10px;
        border-radius: 13px;
        font-size: 11.5px;
        font-weight: 600;
        border: 1px solid var(--gray-200);
        background: var(--gray-50);
        color: var(--gray-700);
        cursor: pointer;
      }
      .nb-filter.active {
        background: var(--navy);
        color: #fff;
        border-color: var(--navy);
      }
      .nb-toolbar-count {
        margin-left: auto;
        font-size: 11px;
        color: var(--gray-500);
        font-weight: 500;
      }
      .nb-body {
        flex: 1;
        overflow-y: auto;
        padding: 14px;
        display: flex;
        flex-direction: column;
        gap: 10px;
      }
      .nb-empty {
        text-align: center;
        color: var(--gray-500);
        font-size: 12.5px;
        padding: 40px 20px;
        line-height: 1.55;
      }
      .nb-note {
        background: var(--white, #fff);
        border: 1px solid var(--gray-200);
        border-radius: 11px;
        padding: 11px 13px;
        transition: 0.12s;
        position: relative;
      }
      .nb-note:hover {
        border-color: var(--navy);
        box-shadow: 0 2px 12px rgba(18, 110, 130, 0.08);
      }
      .nb-note-meta {
        font-size: 10.5px;
        color: var(--gray-500);
        text-transform: uppercase;
        letter-spacing: 0.4px;
        font-weight: 600;
        margin-bottom: 6px;
        display: flex;
        align-items: center;
        gap: 8px;
      }
      .nb-note-badge {
        padding: 1px 6px;
        border-radius: 7px;
        font-size: 9.5px;
        letter-spacing: 0.3px;
        background: rgba(34, 197, 94, 0.13);
        color: #16a34a;
        border: 1px solid rgba(34, 197, 94, 0.3);
      }
      .nb-note-badge.archive {
        background: var(--gray-100);
        color: var(--gray-500);
        border-color: var(--gray-200);
      }
      .nb-note-badge.used {
        background: rgba(59, 130, 246, 0.13);
        color: #1d4ed8;
        border-color: rgba(59, 130, 246, 0.3);
      }
      .nb-note-text {
        font-size: 13px;
        color: var(--gray-900);
        line-height: 1.55;
        white-space: pre-wrap;
        word-wrap: break-word;
      }
      .nb-note-actions {
        display: flex;
        gap: 5px;
        margin-top: 9px;
        flex-wrap: wrap;
      }
      .nb-note-btn {
        font-size: 11px;
        padding: 4px 9px;
        border-radius: 8px;
        border: 1px solid var(--gray-200);
        background: var(--gray-50);
        color: var(--gray-700);
        cursor: pointer;
        font-weight: 600;
      }
      .nb-note-btn:hover {
        background: var(--navy);
        color: #fff;
        border-color: var(--navy);
      }
      .nb-note-btn.primary {
        background: var(--navy);
        color: #fff;
        border-color: var(--navy);
      }
      .nb-note-btn.primary:hover {
        background: var(--navy-dark);
      }
      .nb-note-btn.danger:hover {
        background: #b91c1c;
        border-color: #b91c1c;
        color: #fff;
      }
      .nb-input {
        padding: 11px 12px;
        border-top: 1px solid var(--gray-200);
        display: flex;
        gap: 8px;
        background: var(--white, #fff);
      }
      .nb-input textarea {
        flex: 1;
        resize: none;
        border: 1px solid var(--gray-200);
        border-radius: 10px;
        padding: 9px 11px;
        font-size: 13px;
        font-family: inherit;
        max-height: 120px;
        line-height: 1.4;
        background: var(--bg, #f5f4ee);
        color: var(--gray-900);
      }
      .nb-input textarea:focus {
        outline: none;
        border-color: var(--navy);
      }
      .nb-add {
        background: var(--navy);
        color: #fff;
        border: none;
        border-radius: 10px;
        padding: 0 14px;
        cursor: pointer;
        font-weight: 600;
        font-size: 12.5px;
      }
      .nb-add:hover {
        background: var(--navy-dark);
      }
      .nb-foot {
        font-size: 10px;
        color: var(--gray-400);
        text-align: center;
        padding: 6px;
      }
      /* ─ Modal mini-picker pour "Attacher à un dossier" ─ */
      .nb-picker-back {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.35);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 10;
        padding: 18px;
      }
      .nb-picker {
        background: var(--white, #fff);
        border-radius: 12px;
        width: 100%;
        max-width: 340px;
        padding: 16px;
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
      }
      .nb-picker h3 {
        margin: 0 0 10px;
        font-size: 13px;
        font-weight: 700;
        color: var(--navy);
      }
      .nb-picker input {
        width: 100%;
        padding: 8px 10px;
        border: 1px solid var(--gray-200);
        border-radius: 8px;
        font-size: 12.5px;
        margin-bottom: 10px;
        font-family: inherit;
      }
      .nb-picker input:focus {
        outline: none;
        border-color: var(--navy);
      }
      .nb-picker-list {
        max-height: 240px;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        gap: 4px;
        margin-bottom: 10px;
      }
      .nb-picker-item {
        padding: 8px 10px;
        border: 1px solid var(--gray-200);
        border-radius: 8px;
        cursor: pointer;
        font-size: 12px;
        background: var(--gray-50);
      }
      .nb-picker-item:hover {
        background: var(--navy);
        color: #fff;
        border-color: var(--navy);
      }
      .nb-picker-cancel {
        font-size: 11.5px;
        color: var(--gray-500);
        background: none;
        border: none;
        cursor: pointer;
        padding: 4px;
      }
      /* ─ Attachments dans le panel Notes ─ */
      .nb-attach-bar {
        display: flex;
        gap: 6px;
        padding: 8px 12px;
        border-top: 1px solid var(--gray-200);
        background: var(--gray-50);
        flex-wrap: wrap;
      }
      .nb-attach-btn {
        flex: 1;
        min-width: 90px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 7px 10px;
        background: #fff;
        border: 1px solid var(--gray-200);
        border-radius: 9px;
        cursor: pointer;
        font-size: 11.5px;
        font-weight: 600;
        color: var(--gray-700);
        font-family: inherit;
      }
      .nb-attach-btn:hover {
        border-color: #3b82f6;
        color: #1d4ed8;
        background: #eff6ff;
      }
      .nb-attach-btn svg {
        width: 14px;
        height: 14px;
      }
      .nb-pending-bar {
        padding: 8px 12px;
        border-top: 1px solid var(--gray-200);
        background: #eff6ff;
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
      }
      .nb-pending-label {
        font-size: 11px;
        color: #1d4ed8;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.4px;
      }
      .nb-pending-thumb {
        position: relative;
        width: 40px;
        height: 40px;
        border-radius: 7px;
        overflow: hidden;
        border: 1px solid var(--gray-200);
        background: #fff;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .nb-pending-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .nb-pending-thumb .nb-pending-x {
        position: absolute;
        top: -5px;
        right: -5px;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: #dc2626;
        color: #fff;
        font-size: 10px;
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
        padding: 0;
      }
      .nb-pending-thumb-file {
        font-size: 9.5px;
        text-align: center;
        color: var(--gray-700);
        font-weight: 700;
        padding: 2px;
        word-break: break-all;
        line-height: 1.15;
      }
      /* Attachments dans une note enregistrée */
      .nb-note-atts {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
        margin-top: 8px;
      }
      .nb-note-att {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 3px 7px;
        background: #eff6ff;
        color: #1d4ed8;
        border: 1px solid rgba(59, 130, 246, 0.3);
        border-radius: 7px;
        font-size: 11px;
        font-weight: 600;
        cursor: pointer;
        text-decoration: none;
      }
      .nb-note-att:hover {
        background: #dbeafe;
      }
      .nb-note-att svg {
        width: 11px;
        height: 11px;
      }
      .nb-note-att-thumb {
        width: 60px;
        height: 60px;
        border-radius: 7px;
        overflow: hidden;
        border: 1px solid var(--gray-200);
        cursor: pointer;
      }
      .nb-note-att-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }