/* Utilitaires thème */
    .a-text   { color: var(--accent) !important; }
    .a-bg     { background-color: var(--accent) !important; }
    .a-bg:hover { background-color: var(--accent-dark) !important; }
    .a-border { border-color: var(--accent) !important; }
    .a-ring   { --tw-ring-color: var(--accent); }

    /* Puce « voir les rapports de ce contexte » — surface les rapports /rapports
       depuis chaque page métier (couleurs du thème, pas de couleur en dur) */
    .lien-rapport {
      color: var(--text-secondary);
      border: 1px solid var(--border);
      transition: color .15s ease, border-color .15s ease;
    }
    .lien-rapport:hover { color: var(--accent); border-color: var(--accent); }

    /* Force le popover date picker en mode clair (thèmes Dolbaye tous lumineux) */
    input[type="date"],
    input[type="datetime-local"],
    input[type="time"],
    input[type="month"],
    input[type="week"] {
      color-scheme: light;
    }

    /* Mobile: prevent iOS auto-zoom */
    @media (max-width: 640px) {
      input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
      select, textarea {
        font-size: 16px !important;
        min-height: 40px;
        padding-top: 0.4rem !important;
        padding-bottom: 0.4rem !important;
      }
    }

    /* Nav */
    nav.site-nav {
      background: var(--nav-bg) !important;
      box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 2px 12px rgba(15,23,42,.18);
    }
    .nav-active  {
      background: color-mix(in srgb, var(--accent) 22%, transparent) !important;
      color: #fff !important; font-weight: 600;
      box-shadow: inset 0 -2px 0 var(--accent);
    }
    .nav-item    { color: rgba(255,255,255,.72); }
    .nav-item:hover { color: #fff; background: rgba(255,255,255,.09); }
    .nav-avatar  { background: var(--accent); }

    /* Tableaux alternés */
    .table-ibelina thead th {
      background: #f8fafc;
      font-size: 0.7rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: #94a3b8;
      padding: 0.65rem 1rem;
      border-bottom: 1px solid #e2e8f0;
    }
    .table-ibelina tbody td { padding: 0.7rem 1rem; border-bottom: 1px solid #f1f5f9; }
    .table-ibelina tbody tr:last-child td { border-bottom: none; }

    /* Flash messages */
    @keyframes slideDown {
      from { opacity: 0; transform: translateY(-8px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .flash-msg { animation: slideDown 0.25s ease; }
    .flash-msg.dismissing {
      transition: opacity 0.35s, transform 0.35s, max-height 0.4s, margin 0.4s, padding 0.4s;
      opacity: 0 !important;
      transform: translateY(-6px);
      max-height: 0 !important;
      margin: 0 !important;
      padding-top: 0 !important;
      padding-bottom: 0 !important;
      overflow: hidden;
    }

    /* Confirm modal */
    .modal-backdrop { backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }

    /* Spinner CSS pur — pas de innerHTML */
    @keyframes ibspin { to { transform: rotate(360deg); } }
    .ib-spinner {
      display: inline-block;
      width: 0.9rem; height: 0.9rem;
      border: 2px solid rgba(255,255,255,.35);
      border-top-color: currentColor;
      border-radius: 50%;
      animation: ibspin 0.65s linear infinite;
      vertical-align: -0.15em;
      margin-right: 0.4rem;
      flex-shrink: 0;
    }

    /* ── Propagation variables thème → classes Tailwind ── */
    body { background: var(--bg-page) !important; color: var(--text-primary); }

    /* ── Socle Dolbaye : typographie ── */
    body { font-family: system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; }
    h1 { font-size: 1.5rem; line-height: 1.85rem; font-weight: 700; }
    h2 { font-size: 1.125rem; font-weight: 600; }
    .ib-eyebrow { font-size: .6875rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-secondary); font-weight: 600; }
    /* Alignement des montants/colonnes numériques */
    .tnum, table td, table th { font-variant-numeric: tabular-nums; }

    /* ── Socle Dolbaye : cartes ── */
    .ib-card {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 1rem;
      box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 4px 16px rgba(15,23,42,.05);
    }
    .ib-card-hover { transition: box-shadow .18s ease, transform .18s ease; }
    .ib-card-hover:hover { box-shadow: 0 4px 12px rgba(15,23,42,.10), 0 12px 28px rgba(15,23,42,.08); transform: translateY(-1px); }
    /* Barre d'accent indigo à gauche des cartes importantes */
    .card-accent { position: relative; }
    .card-accent::before {
      content: ""; position: absolute; left: 0; top: 0; bottom: 0;
      width: 3px; border-radius: 1rem 0 0 1rem; background: var(--accent);
    }

    .bg-white  { background-color: var(--bg-card) !important; }
    .bg-gray-50, .bg-slate-50,
    .bg-gray-50\/40, .bg-gray-50\/50, .bg-gray-50\/60, .bg-gray-50\/80,
    .bg-slate-50\/60, .bg-slate-50\/80 { background-color: var(--bg-card-alt) !important; }
    .bg-gray-100, .bg-slate-100 { background-color: var(--bg-card-alt) !important; }
    .bg-gray-200 { background-color: var(--bg-card-alt) !important; }

    .text-gray-900, .text-gray-800, .text-gray-700 { color: var(--text-primary) !important; }
    .text-gray-600, .text-gray-500, .text-gray-400, .text-gray-300 { color: var(--text-secondary) !important; }
    .text-slate-900, .text-slate-800, .text-slate-700, .text-slate-600 { color: var(--text-primary) !important; }
    .text-slate-500, .text-slate-400, .text-slate-300 { color: var(--text-secondary) !important; }

    .border, .border-gray-100, .border-gray-200, .border-gray-300,
    .border-slate-100, .border-slate-200, .border-slate-300 { border-color: var(--border) !important; }
    .divide-gray-200 > * + * { border-color: var(--border) !important; }

    .table-ibelina tbody tr:nth-child(even) { background-color: var(--bg-card-alt) !important; }
    .table-ibelina tbody tr:hover { background-color: color-mix(in srgb, var(--accent) 6%, var(--bg-card)) !important; }
    .table-ibelina thead th { position: sticky; top: 0; z-index: 1; }
    .table-ibelina thead th {
      background: var(--bg-card-alt);
      color: var(--text-secondary);
      border-bottom-color: var(--border);
    }
    .table-ibelina tbody td { border-bottom-color: var(--border); }

    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]),
    select, textarea {
      background-color: var(--bg-card) !important;
      color: var(--text-primary) !important;
      border-color: var(--border) !important;
    }
    input::placeholder, textarea::placeholder { color: var(--text-secondary) !important; }

    input:focus:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select:focus, textarea:focus {
      outline: none !important;
      border-color: var(--accent) !important;
      box-shadow: 0 0 0 2px var(--accent) !important;
    }

    .hover\:bg-gray-50:hover, .hover\:bg-slate-50:hover,
    .hover\:bg-slate-50\/60:hover, .hover\:bg-slate-50\/80:hover { background-color: var(--bg-card-alt) !important; }
    .hover\:bg-gray-100:hover { background-color: var(--bg-card-alt) !important; }

    /* ── Badges (bg-*-100) : fond clair + texte sémantique scoped ── */
    .bg-green-100  { background-color: #dcfce7 !important; }
    .bg-green-100 * { color: #15803d !important; }
    .bg-red-100    { background-color: #fee2e2 !important; }
    .bg-red-100 *  { color: #dc2626 !important; }
    .bg-amber-100  { background-color: #fef3c7 !important; }
    .bg-amber-100 *{ color: #b45309 !important; }
    .bg-blue-100   { background-color: #dbeafe !important; }
    .bg-blue-100 * { color: #1d4ed8 !important; }
    .bg-purple-100 { background-color: #f3e8ff !important; }
    .bg-purple-100 *{ color: #7e22ce !important; }
    .bg-orange-100 { background-color: #ffedd5 !important; }
    .bg-orange-100 *{ color: #c2410c !important; }
    .bg-gray-100 span, .bg-gray-100 p { color: var(--text-secondary) !important; }

    /* KPIs mortalité (3 niveaux) — toujours prioritaires */
    .text-green-600 { color: #16a34a !important; }
    .text-red-600   { color: #dc2626 !important; }
    .text-amber-500 { color: #f59e0b !important; }

    /* ── Cartes palette bg-*-50 : fond clair par défaut ── */
    .bg-blue-50    { background-color: #eff6ff !important; }
    .bg-violet-50  { background-color: #f5f3ff !important; }
    .bg-rose-50    { background-color: #fff1f2 !important; }
    .bg-teal-50    { background-color: #f0fdfa !important; }
    .bg-orange-50  { background-color: #fff7ed !important; }
    .bg-indigo-50  { background-color: #eef2ff !important; }
    .bg-pink-50    { background-color: #fdf2f8 !important; }
    .bg-red-50, .bg-red-50\/30  { background-color: #fef2f2 !important; }
    .bg-green-50, .bg-green-50\/40, .bg-green-50\/50   { background-color: #f0fdf4 !important; }
    .bg-purple-50  { background-color: #faf5ff !important; }
    .bg-amber-50, .bg-amber-50\/20, .bg-amber-50\/30, .bg-amber-50\/40 { background-color: #fffbeb !important; }
    .bg-emerald-50, .bg-emerald-50\/20, .bg-emerald-50\/40 { background-color: #ecfdf5 !important; }
    .bg-cyan-50    { background-color: #ecfeff !important; }

    /* ── Thèmes sombres : bg-*-50 → versions foncées ── */
    /* .is-dark est ajouté par JS quand système = mode sombre */
    [data-theme="dark"] .bg-blue-50,    [data-theme="aqua"] .bg-blue-50,    .is-dark .bg-blue-50    { background-color: #1a2d3d !important; }
    [data-theme="dark"] .bg-violet-50,  [data-theme="aqua"] .bg-violet-50,  .is-dark .bg-violet-50  { background-color: #1e1a2d !important; }
    [data-theme="dark"] .bg-emerald-50, [data-theme="aqua"] .bg-emerald-50, .is-dark .bg-emerald-50,
    [data-theme="dark"] .bg-emerald-50\/20, [data-theme="aqua"] .bg-emerald-50\/20, .is-dark .bg-emerald-50\/20,
    [data-theme="dark"] .bg-emerald-50\/40, [data-theme="aqua"] .bg-emerald-50\/40, .is-dark .bg-emerald-50\/40 { background-color: #1a2d24 !important; }
    [data-theme="dark"] .bg-rose-50,    [data-theme="aqua"] .bg-rose-50,    .is-dark .bg-rose-50    { background-color: #2d1a1e !important; }
    [data-theme="dark"] .bg-teal-50,    [data-theme="aqua"] .bg-teal-50,    .is-dark .bg-teal-50    { background-color: #1a2d2a !important; }
    [data-theme="dark"] .bg-orange-50,  [data-theme="aqua"] .bg-orange-50,  .is-dark .bg-orange-50  { background-color: #2d1f1a !important; }
    [data-theme="dark"] .bg-indigo-50,  [data-theme="aqua"] .bg-indigo-50,  .is-dark .bg-indigo-50  { background-color: #1a1a2d !important; }
    [data-theme="dark"] .bg-pink-50,    [data-theme="aqua"] .bg-pink-50,    .is-dark .bg-pink-50    { background-color: #2d1a2d !important; }
    [data-theme="dark"] .bg-red-50,     [data-theme="aqua"] .bg-red-50,     .is-dark .bg-red-50,
    [data-theme="dark"] .bg-red-50\/30, [data-theme="aqua"] .bg-red-50\/30, .is-dark .bg-red-50\/30 { background-color: #2d1a1a !important; }
    [data-theme="dark"] .bg-green-50,   [data-theme="aqua"] .bg-green-50,   .is-dark .bg-green-50,
    [data-theme="dark"] .bg-green-50\/40, [data-theme="aqua"] .bg-green-50\/40, .is-dark .bg-green-50\/40,
    [data-theme="dark"] .bg-green-50\/50, [data-theme="aqua"] .bg-green-50\/50, .is-dark .bg-green-50\/50 { background-color: #1a2d1a !important; }
    [data-theme="dark"] .bg-purple-50,  [data-theme="aqua"] .bg-purple-50,  .is-dark .bg-purple-50  { background-color: #1e1a2d !important; }
    [data-theme="dark"] .bg-amber-50,   [data-theme="aqua"] .bg-amber-50,   .is-dark .bg-amber-50,
    [data-theme="dark"] .bg-amber-50\/20, [data-theme="aqua"] .bg-amber-50\/20, .is-dark .bg-amber-50\/20,
    [data-theme="dark"] .bg-amber-50\/30, [data-theme="aqua"] .bg-amber-50\/30, .is-dark .bg-amber-50\/30,
    [data-theme="dark"] .bg-amber-50\/40, [data-theme="aqua"] .bg-amber-50\/40, .is-dark .bg-amber-50\/40 { background-color: #2d2a1a !important; }
    [data-theme="dark"] .bg-cyan-50,    [data-theme="aqua"] .bg-cyan-50,    .is-dark .bg-cyan-50    { background-color: #1a2d2d !important; }

    /* Couleurs de titre palette (text-*-800) : claires en thèmes sombres */
    [data-theme="dark"] .text-blue-800,    [data-theme="aqua"] .text-blue-800,    .is-dark .text-blue-800    { color: #93c5fd !important; }
    [data-theme="dark"] .text-violet-800,  [data-theme="aqua"] .text-violet-800,  .is-dark .text-violet-800  { color: #c4b5fd !important; }
    [data-theme="dark"] .text-emerald-800, [data-theme="aqua"] .text-emerald-800, .is-dark .text-emerald-800 { color: #6ee7b7 !important; }
    [data-theme="dark"] .text-rose-800,    [data-theme="aqua"] .text-rose-800,    .is-dark .text-rose-800    { color: #fda4af !important; }
    [data-theme="dark"] .text-teal-800,    [data-theme="aqua"] .text-teal-800,    .is-dark .text-teal-800    { color: #5eead4 !important; }
    [data-theme="dark"] .text-orange-800,  [data-theme="aqua"] .text-orange-800,  .is-dark .text-orange-800  { color: #fdba74 !important; }
    [data-theme="dark"] .text-indigo-800,  [data-theme="aqua"] .text-indigo-800,  .is-dark .text-indigo-800  { color: #a5b4fc !important; }
    [data-theme="dark"] .text-amber-700,   [data-theme="aqua"] .text-amber-700,   .is-dark .text-amber-700   { color: #fcd34d !important; }
    [data-theme="dark"] .text-green-800,   [data-theme="aqua"] .text-green-800,   .is-dark .text-green-800   { color: #86efac !important; }
    [data-theme="dark"] .text-green-700,   [data-theme="aqua"] .text-green-700,   .is-dark .text-green-700   { color: #4ade80 !important; }
    [data-theme="dark"] .text-red-700,     [data-theme="aqua"] .text-red-700,     .is-dark .text-red-700     { color: #fca5a5 !important; }
    [data-theme="dark"] .text-indigo-700,  [data-theme="aqua"] .text-indigo-700,  .is-dark .text-indigo-700  { color: #a5b4fc !important; }

    /* ── Socle Dolbaye : boutons ── */
    .btn-primary {
      background: var(--accent); color: var(--text-on-accent);
      border-radius: .75rem; padding: .55rem 1rem; font-weight: 600;
      box-shadow: 0 1px 2px rgba(15,23,42,.10);
      transition: background .15s ease, transform .05s ease;
      min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    }
    .btn-primary:hover { background: var(--accent-dark); }
    .btn-primary:active { transform: scale(.99); }
    .btn-primary:disabled { opacity: .55; cursor: not-allowed; }
    .btn-secondary {
      background: var(--bg-card); color: var(--text-primary);
      border: 1px solid var(--border); border-radius: .75rem;
      padding: .55rem 1rem; font-weight: 600; min-height: 40px;
      display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    }
    .btn-secondary:hover { background: var(--bg-card-alt); }
    /* ── Socle Dolbaye : badges uniformes (classe dédiée) ── */
    .badge {
      display: inline-flex; align-items: center; gap: .25rem;
      border-radius: 9999px; padding: .15rem .6rem; font-weight: 600; font-size: .75rem;
      white-space: nowrap;
    }
    .flatpickr-day.selected, .flatpickr-day.selected:hover,
    .flatpickr-day.startRange, .flatpickr-day.endRange {
      background: var(--accent) !important;
      border-color: var(--accent) !important;
    }
    .flatpickr-day:hover { background: color-mix(in srgb, var(--accent) 15%, white); }
    .flatpickr-months .flatpickr-month { background: var(--nav-bg); color: #fff; }
    .flatpickr-current-month, .flatpickr-monthDropdown-months,
    .numInputWrapper input { color: #fff !important; }
    .flatpickr-weekday { color: rgba(255,255,255,.7) !important; background: var(--nav-bg) !important; }
    @media (max-width: 640px) {
      .flatpickr-calendar { font-size: 15px; }
      .flatpickr-day { height: 42px; line-height: 42px; }
    }

    /* ═══════════════════════════════════════════════════════════════════
       APP-SHELL 2026 — sidebar métier + barre de commande + tabbar mobile
       Theme-agnostique : tout passe par les variables de thème.
       ═══════════════════════════════════════════════════════════════════ */
    .shell { min-height: 100svh; }

    /* ── Sidebar ── */
    .sb {
      position: fixed; inset: 0 auto 0 0; z-index: 60;
      width: 248px; display: flex; flex-direction: column;
      background: var(--nav-bg); color: rgba(255,255,255,.85);
      transform: translateX(-100%);
      transition: transform .28s cubic-bezier(.2,.7,.3,1);
      box-shadow: 4px 0 24px rgba(2,5,12,.25);
    }
    .sb.ouverte { transform: translateX(0); }
    @media (min-width: 1024px) {
      .sb { transform: none; box-shadow: 1px 0 0 rgba(255,255,255,.07); }
    }
    .sb-overlay {
      position: fixed; inset: 0; z-index: 55;
      background: rgba(2,5,12,.55); backdrop-filter: blur(3px);
      opacity: 0; pointer-events: none; transition: opacity .25s ease;
    }
    .sb-overlay.visible { opacity: 1; pointer-events: auto; }
    @media (min-width: 1024px) { .sb-overlay { display: none; } }

    .sb-brand {
      display: flex; align-items: center; gap: .65rem;
      padding: 1rem 1.1rem .85rem; color: #fff;
      font-weight: 800; font-size: 1.05rem; letter-spacing: -.02em;
    }
    .sb-brand-name { white-space: nowrap; }

    .sb-search {
      display: flex; align-items: center; gap: .5rem;
      margin: 0 .8rem .6rem; padding: .5rem .7rem;
      border-radius: .7rem; font-size: .8rem;
      color: rgba(255,255,255,.55);
      background: rgba(255,255,255,.07);
      border: 1px solid rgba(255,255,255,.10);
      transition: background .15s ease, border-color .15s ease;
    }
    .sb-search:hover { background: rgba(255,255,255,.12); color: rgba(255,255,255,.8); }
    .sb-kbd {
      font-size: .62rem; font-family: inherit; padding: .1rem .35rem;
      border-radius: .35rem; border: 1px solid rgba(255,255,255,.22);
      color: rgba(255,255,255,.5); background: rgba(255,255,255,.06);
    }

    .sb-nav { flex: 1; overflow-y: auto; padding: .3rem .8rem 1rem; }
    .sb-groupe {
      font-size: .6rem; text-transform: uppercase; letter-spacing: .14em;
      color: rgba(255,255,255,.38); font-weight: 700;
      padding: .9rem .35rem .35rem;
    }
    .sb-link {
      display: flex; align-items: center; gap: .6rem;
      padding: .48rem .6rem; margin-bottom: 1px;
      border-radius: .6rem; font-size: .84rem;
      color: rgba(255,255,255,.72);
      transition: background .13s ease, color .13s ease;
    }
    .sb-link svg { opacity: .7; }
    .sb-link:hover { background: rgba(255,255,255,.08); color: #fff; }
    .sb-link.nav-active { color: #fff; }

    .sb-footer { padding: .6rem .8rem calc(.8rem + env(safe-area-inset-bottom)); border-top: 1px solid rgba(255,255,255,.10); }
    .sb-theme summary {
      display: flex; align-items: center; gap: .55rem; cursor: pointer;
      list-style: none; padding: .45rem .6rem; border-radius: .6rem;
      font-size: .78rem; color: rgba(255,255,255,.65);
    }
    .sb-theme summary::-webkit-details-marker { display: none; }
    .sb-theme summary:hover { background: rgba(255,255,255,.08); color: #fff; }
    .sb-theme-liste { padding: .25rem 0 .4rem; }
    .sb-theme-item {
      width: 100%; display: flex; align-items: center; gap: .5rem;
      padding: .4rem .6rem; border-radius: .5rem; font-size: .78rem;
      color: rgba(255,255,255,.7);
    }
    .sb-theme-item:hover { background: rgba(255,255,255,.08); color: #fff; }
    .sb-theme-item.actif { color: #fff; font-weight: 600; }

    .sb-user { display: flex; align-items: center; gap: .4rem; margin-top: .3rem; }
    .sb-user-lien {
      flex: 1; min-width: 0; display: flex; align-items: center; gap: .6rem;
      padding: .45rem .6rem; border-radius: .7rem; color: rgba(255,255,255,.85);
    }
    .sb-user-lien:hover { background: rgba(255,255,255,.08); }
    .sb-logout {
      display: flex; align-items: center; justify-content: center;
      width: 36px; height: 36px; border-radius: .6rem;
      color: rgba(255,255,255,.55);
    }
    .sb-logout:hover { background: rgba(248,113,113,.15); color: #fca5a5; }

    /* ── En-tête : marque + bouton épingle ── */
    .sb-tete { display: flex; align-items: center; }
    .sb-brand { flex: 1; min-width: 0; }
    .sb-pin {
      display: none;                    /* mobile : la barre est un drawer */
      align-items: center; justify-content: center;
      width: 30px; height: 30px; margin-right: .7rem; border-radius: .5rem;
      color: rgba(255,255,255,.5); flex-shrink: 0;
      transition: background .13s ease, color .13s ease;
    }
    @media (min-width: 1024px) { .sb-pin { display: inline-flex; } }
    .sb-pin:hover { background: rgba(255,255,255,.12); color: #fff; }
    .sb-pin[aria-pressed="true"] { color: var(--accent); }   /* épinglée = active */

    /* ── Mode rail (barre détachée / réduite) — desktop uniquement ──
       Largeur réduite aux icônes ; s'ouvre en survol (overlay, ne pousse pas
       le contenu). Les libellés sont masqués tant que la barre n'est pas
       survolée. État piloté par la classe .sb-reduite sur <html>. */
    @media (min-width: 1024px) {
      :root.sb-reduite .sb { width: 66px; }
      :root.sb-reduite .col-main { margin-left: 66px; }
      :root.sb-reduite .sb:hover {
        width: 248px; box-shadow: 4px 0 24px rgba(2,5,12,.35);
      }
      /* centre les icônes quand replié et non survolé */
      :root.sb-reduite .sb:not(:hover) .sb-brand,
      :root.sb-reduite .sb:not(:hover) .sb-search,
      :root.sb-reduite .sb:not(:hover) .sb-link,
      :root.sb-reduite .sb:not(:hover) .sb-theme summary,
      :root.sb-reduite .sb:not(:hover) .sb-user-lien { justify-content: center; }
      /* masque les libellés quand replié et non survolé */
      :root.sb-reduite .sb:not(:hover) .sb-brand-name,
      :root.sb-reduite .sb:not(:hover) .sb-pin,
      :root.sb-reduite .sb:not(:hover) .sb-search span,
      :root.sb-reduite .sb:not(:hover) .sb-search .sb-kbd,
      :root.sb-reduite .sb:not(:hover) .sb-groupe,
      :root.sb-reduite .sb:not(:hover) .sb-link span,
      :root.sb-reduite .sb:not(:hover) .sb-theme summary span,
      :root.sb-reduite .sb:not(:hover) .sb-user-lien div,
      :root.sb-reduite .sb:not(:hover) .sb-logout { display: none; }
      /* évite l'ouverture du sélecteur de thème quand replié (clic accidentel) */
      :root.sb-reduite .sb:not(:hover) .sb-theme[open] .sb-theme-liste { display: none; }
    }

    /* ── Colonne principale ── */
    .col-main { display: flex; flex-direction: column; min-height: 100svh; }
    @media (min-width: 1024px) { .col-main { margin-left: 248px; } }

    .topbar {
      position: sticky; top: 0; z-index: 40;
      display: flex; align-items: center; gap: .6rem;
      padding: 0 .9rem; height: 54px;
      background: color-mix(in srgb, var(--bg-page) 82%, transparent);
      backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
      border-bottom: 1px solid var(--border);
    }
    .topbar-burger {
      display: flex; align-items: center; justify-content: center;
      width: 38px; height: 38px; border-radius: .6rem;
      color: var(--text-secondary);
    }
    .topbar-burger:hover { background: var(--bg-card-alt); color: var(--text-primary); }
    @media (min-width: 1024px) { .topbar-burger { display: none; } }
    .topbar-titre {
      font-size: .95rem; font-weight: 700; color: var(--text-primary);
      letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    /* Mobile : titre centré dans la barre (entre le burger et les actions).
       Positionné en absolu → indépendant des largeurs gauche/droite ; non
       cliquable pour ne jamais intercepter le burger ou la recherche. */
    @media (max-width: 1023px) {
      .topbar-titre {
        position: absolute; left: 50%; transform: translateX(-50%);
        max-width: 52%; text-align: center; pointer-events: none;
      }
    }
    .topbar-action {
      display: inline-flex; align-items: center; gap: .4rem;
      padding: .42rem .75rem; border-radius: .65rem;
      font-size: .78rem; font-weight: 600;
      background: var(--accent); color: var(--text-on-accent);
      transition: filter .15s ease;
    }
    .topbar-action:hover { filter: brightness(1.08); }
    .topbar-recherche {
      display: flex; align-items: center; justify-content: center;
      width: 38px; height: 38px; border-radius: .6rem;
      color: var(--text-secondary); border: 1px solid var(--border);
      background: var(--bg-card);
    }
    .topbar-recherche:hover { color: var(--text-primary); border-color: var(--accent); }

    .contenu {
      flex: 1; width: 100%; max-width: 1240px; margin: 0 auto;
      padding: 1.25rem .8rem calc(84px + env(safe-area-inset-bottom));
    }
    @media (min-width: 640px)  { .contenu { padding: 1.5rem 1.25rem calc(90px + env(safe-area-inset-bottom)); } }
    @media (min-width: 1024px) { .contenu { padding: 1.75rem 2rem 2.5rem; } }

    /* ── Tabbar mobile ── */
    .tabbar {
      position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
      display: grid; grid-template-columns: repeat(5, 1fr);
      align-items: end; gap: 0;
      padding: .35rem .4rem calc(.4rem + env(safe-area-inset-bottom));
      background: color-mix(in srgb, var(--nav-bg) 94%, transparent);
      backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
      border-top: 1px solid rgba(255,255,255,.10);
    }
    @media (min-width: 1024px) { .tabbar { display: none; } }
    .tab {
      display: flex; flex-direction: column; align-items: center; gap: .15rem;
      padding: .35rem .2rem .2rem; border-radius: .7rem;
      font-size: .6rem; font-weight: 600; letter-spacing: .02em;
      color: rgba(255,255,255,.55); background: none; border: none;
    }
    .tab svg { width: 21px; height: 21px; }
    .tab-actif { color: #fff; }
    .tab-actif svg { color: var(--accent); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 60%, transparent)); }
    .tab-eclair {
      justify-self: center; align-self: center;
      display: flex; align-items: center; justify-content: center;
      width: 50px; height: 50px; margin-top: -18px;
      border-radius: 9999px;
      background: linear-gradient(165deg, color-mix(in srgb, var(--accent) 80%, white), var(--accent) 60%, var(--accent-dark));
      color: var(--text-on-accent);
      box-shadow: 0 0 0 4px color-mix(in srgb, var(--nav-bg) 94%, transparent),
                  0 6px 18px color-mix(in srgb, var(--accent) 45%, transparent);
    }
    .tab-eclair svg { width: 22px; height: 22px; }
    .tab-eclair:active { transform: scale(.94); }

    /* ── Palette de commande (⌘K) ── */
    .palette { position: fixed; inset: 0; z-index: 200; }
    .palette-fond {
      position: absolute; inset: 0;
      background: rgba(2, 5, 12, .55);
      backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    }
    .palette-boite {
      position: relative; margin: 12vh auto 0; width: min(560px, calc(100vw - 2rem));
      background: var(--bg-card); border: 1px solid var(--border);
      border-radius: 1rem; overflow: hidden;
      box-shadow: 0 30px 80px rgba(2, 5, 12, .5);
      animation: palette-pop .18s cubic-bezier(.2,.7,.3,1);
    }
    @keyframes palette-pop { from { opacity: 0; transform: translateY(-8px) scale(.98); } }
    .palette-entete {
      display: flex; align-items: center; gap: .6rem;
      padding: .8rem 1rem; border-bottom: 1px solid var(--border);
      color: var(--text-secondary);
    }
    .palette-entete input {
      flex: 1; background: none !important; border: none !important;
      box-shadow: none !important; outline: none !important;
      font-size: .95rem; color: var(--text-primary) !important; padding: 0 !important;
    }
    .palette-entete .sb-kbd { border-color: var(--border); color: var(--text-secondary); background: var(--bg-card-alt); }
    .palette-liste { max-height: 46vh; overflow-y: auto; padding: .4rem; }
    .palette-item {
      display: flex; align-items: center; gap: .7rem; width: 100%;
      padding: .55rem .7rem; border-radius: .6rem; font-size: .86rem;
      color: var(--text-primary); text-align: left;
    }
    .palette-item .groupe {
      font-size: .62rem; text-transform: uppercase; letter-spacing: .08em;
      color: var(--text-secondary); min-width: 74px;
    }
    .palette-item:hover, .palette-item.selection {
      background: color-mix(in srgb, var(--accent) 14%, transparent);
    }
    .palette-item.selection { box-shadow: inset 2px 0 0 var(--accent); }
    .palette-vide { padding: 1.2rem; text-align: center; color: var(--text-secondary); font-size: .85rem; }

    /* Lien sidebar actif : barre verticale à gauche (variante du .nav-active) */
    .sb-link.nav-active {
      background: color-mix(in srgb, var(--accent) 20%, transparent) !important;
      box-shadow: inset 2.5px 0 0 var(--accent);
      font-weight: 600;
    }
    .sb-link.nav-active svg { opacity: 1; color: var(--accent); }

/* ──────────────────────────────────────────────────────────────────────────
   Feuille « Modifier le suivi » (mobile) — app/templates/vagues/_detail_suivi_table.html

   Trois défauts signalés le 2026-08-06 : le bouton « Sauvegarder » était
   invisible et le défilement semblait bloqué.
   1. La feuille était en `z-50`, soit le MÊME niveau que `.tabbar` — qui vient
      après dans le DOM et passait donc devant, masquant le bas du formulaire.
      Corrigé côté gabarit (`z-[300]`).
   2. `90vh` : sur mobile, `vh` se réfère au viewport le PLUS GRAND (barre
      d'URL rétractée). La feuille dépassait donc la zone réellement visible.
      `dvh` suit la hauteur courante ; `vh` reste en repli.
   3. Le formulaire est long : le bouton d'enregistrement est désormais un pied
      collant, atteignable sans défiler jusqu'en bas.
   ────────────────────────────────────────────────────────────────────────── */
.feuille-suivi {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: var(--bg-card);
  border-radius: 1rem 1rem 0 0;
  padding: 1rem 1rem 0;
  max-height: 90vh;
  max-height: 88dvh;
  overflow-y: auto;
  overscroll-behavior: contain;      /* le défilement ne « fuit » pas vers la page */
  -webkit-overflow-scrolling: touch;
}

.feuille-suivi-tete {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: .75rem;
}

/* Pied collant : reste au bas de la zone visible de la feuille. Le fond opaque
   est indispensable, les champs défilent dessous. */
#modal-edit-suivi-content .actions-suivi {
  position: sticky;
  bottom: 0;
  margin: .5rem -1rem 0;
  padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom));
  background: var(--bg-card);
  border-top: 1px solid rgba(128, 128, 128, .18);
}

/* Cibles de tap confortables au doigt — les boutons du tableau sont calibrés
   pour la souris (text-xs, py-1). */
#modal-edit-suivi-content .actions-suivi button {
  min-height: 44px;
  padding-left: 1.1rem; padding-right: 1.1rem;
  font-size: .8125rem;
}
#modal-edit-suivi-content .actions-suivi button[type="submit"] { flex: 1; }