/* ---------- HEADER ---------- */
  /* top:var(--vvtop) : quand le clavier ouvre, iOS fait défiler la page sous un
     viewport visuel réduit — un sticky à top:0 se cale alors au-dessus de la
     zone visible. --vvtop (js/app.js) le redescend dans le champ de vision. */
  .header-bar{position:sticky; top:var(--vvtop, 0px); z-index:20; background:var(--surface); padding:14px calc(var(--pad-x) + 6px) 13px calc(var(--pad-x) + 6px); border-bottom:1px solid var(--border); margin:0 calc(var(--pad-x) * -1);}
  .topbar{display:flex; align-items:center; justify-content:space-between;}
  .brand-group{display:flex; align-items:center; gap:9px;}
  .logo-mark{width:32px; height:32px; border-radius:50%; background:var(--surface); border:1px solid var(--border-soft); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
  .logo-mark svg{width:20px; height:20px;}
  .brand-text{display:flex; flex-direction:column; line-height:1.15;}
  .brand-text .name{font-size:16px; font-weight:600; font-style:italic;}
  .brand-text .tag{font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-soft); margin-top:2px;}
  .icons{display:flex; gap:7px;}
  .icon-circle{width:32px; height:32px; padding:0; border-radius:50%; background:var(--bg); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--ink-soft); transition:background .15s, color .15s, border-color .15s;}
  #profileBtn{overflow:hidden;}
  .icon-circle img{width:100%; height:100%; object-fit:cover;}
  /* Un seul espace affiché alors qu’on en a plusieurs : des tâches existent
     hors de l’écran. L’icône passe au rouge — le SVG trace en currentColor,
     changer la couleur du bouton suffit. */
  #spacesBtn.filtered{color:#D6362C;}
  #spacesBtn.filtered:hover{color:#D6362C;}

  .notif-badge{position:absolute; top:-3px; right:-3px; min-width:16px; height:16px; padding:0 3px; border-radius:999px; background:#D6362C; color:#fff; font-size:9.5px; font-weight:700; display:flex; align-items:center; justify-content:center; border:1.5px solid var(--surface); font-family:'IBM Plex Mono',monospace;}

  /* ---------- SÉLECTEUR D'ESPACES ---------- */
  .space-switcher{position:static;}
  #spacesBtn{position:relative;}
  .space-dropdown{
    position:absolute; top:100%; left:var(--pad-x); width:calc(100% - 2 * var(--pad-x));
    background:var(--surface); border:none; border-bottom:1px solid var(--border);
    border-radius:0 0 16px 16px; padding:12px 14px 14px;
    box-shadow:0 22px 45px -22px rgba(0,0,0,.4); z-index:41;
    opacity:0; pointer-events:none; transform:translateY(-10px);
    transition:opacity .16s ease, transform .16s ease;
  }
  .space-dropdown.open{opacity:1; pointer-events:auto; transform:translateY(0);}
  .space-dropdown-list{max-height:min(56vh, 340px);}
  .space-dropdown-head{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:0 2px 4px;}
  .space-dropdown-label{font-family:'IBM Plex Mono',monospace; font-size:9.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); padding:2px 4px;}
  .space-dropdown-list{display:flex; flex-direction:column; gap:2px; max-height:220px; overflow-y:auto;}
  .space-dropdown-row{display:flex; align-items:center; gap:2px;}
  .space-dropdown-item{display:flex; align-items:center; justify-content:space-between; gap:8px; flex:1; min-width:0; text-align:left; border:none; background:none; border-radius:9px; padding:9px 10px; font-size:13px; font-weight:600; color:var(--ink); font-family:'Inter',sans-serif;}
  .space-dropdown-item span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .space-dropdown-item:hover{background:var(--bg);}
  .space-dropdown-item.active{color:var(--accent);}
  .space-check{width:12px; height:12px; stroke:var(--accent); flex-shrink:0;}
  .space-gear-btn{flex-shrink:0; width:26px; height:26px; border-radius:8px; border:none; background:none; color:var(--ink-soft); display:flex; align-items:center; justify-content:center;}
  .space-gear-btn:hover{background:var(--bg); color:var(--ink);}
  .space-gear-btn svg{width:14px; height:14px;}
  .space-dropdown-new{width:100%; margin-top:8px; border:1.5px dashed var(--border-soft); background:none; border-radius:9px; padding:9px; font-size:12.5px; font-weight:600; color:var(--ink-soft); font-family:'Inter',sans-serif;}
  .space-dropdown-new:hover{color:var(--ink); border-color:var(--ink-soft);}
  .space-dropdown-item.all-spaces{border-bottom:1px solid var(--border); border-radius:0; padding-bottom:11px; margin-bottom:4px;}

  /* position:fixed (et non absolute dans l'en-tête) : la roue existe aussi dans
     la page Profil, qui est en z-index 60 — un menu ancré à l'en-tête passerait
     dessous. Sa position est calculée au clic (voir openSpaceGearMenu). */
  .space-gear-menu{position:fixed; top:0; left:0; width:210px; max-width:calc(100vw - 32px); background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:6px; box-shadow:0 20px 50px -20px rgba(0,0,0,.35); z-index:75; opacity:0; pointer-events:none; transform:translateY(-6px); transition:opacity .15s ease, transform .15s ease;}
  .space-gear-menu.open{opacity:1; pointer-events:auto; transform:translateY(0);}
  .space-gear-item{display:flex; align-items:center; gap:9px; width:100%; text-align:left; border:none; background:none; border-radius:9px; padding:10px; font-size:13px; font-weight:600; color:var(--ink); font-family:'Inter',sans-serif;}
  .space-gear-item svg{width:14px; height:14px; flex-shrink:0; color:var(--ink-soft);}
  .space-gear-item:hover{background:var(--bg);}
  .space-gear-item.danger{color:#D6362C;}
  .space-gear-item.danger svg{color:#D6362C;}
  .space-gear-item.danger:hover{background:#F3DAD7;}


  /* ---------- choisir la personne ----------
     Meme facture que le menu d'une tache : un panneau pose sous le bouton, en
     position fixe car le cadre .phone-wrap est en overflow:clip. Une liste
     plutot qu'un defilement : a dix personnes, cliquer neuf fois pour atteindre
     la derniere n'est pas une facon de repartir la charge. */
  /* Deux formes : une carte posée près de la pastille qu'on vient de toucher —
     c'est là que le geste se termine —, et un panneau pleine largeur sous
     l'en-tête pour le filtre, qui porte sur tout l'écran. */
  .who-picker{
    position:fixed; top:0; left:0; width:224px; max-width:calc(100vw - 32px);
    max-height:min(60vh, 340px); overflow-y:auto; -webkit-overflow-scrolling:touch;
    background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:6px;
    box-shadow:0 20px 50px -20px rgba(0,0,0,.35); z-index:77;
    opacity:0; pointer-events:none; transform:translateY(-6px);
    transition:opacity .15s ease, transform .15s ease;
  }
  .who-picker.pleine-largeur{
    width:100%; max-width:none; max-height:min(60vh, 380px);
    border:none; border-bottom:1px solid var(--border); border-radius:0 0 16px 16px;
    padding:8px 10px 12px; box-shadow:0 22px 45px -22px rgba(0,0,0,.4);
    transform:translateY(-10px);
  }
  /* Après les deux formes : c'est l'état ouvert qui doit l'emporter. */
  .who-picker.open{opacity:1; pointer-events:auto; transform:translateY(0);}
  .who-row{
    width:100%; display:flex; align-items:center; gap:9px; padding:7px 8px;
    border:none; background:none; border-radius:9px; cursor:pointer; text-align:left;
    font-family:'Inter',sans-serif; font-size:13px; color:var(--ink);
  }
  .who-row:hover{background:var(--bg);}
  .who-row.choisi{background:var(--accent-bg);}
  /* La pile « tout le monde » prendrait la moitie de la largeur a huit
     personnes : elle est reduite pour laisser le nom lisible. */
  .who-row-avatar{flex-shrink:0; display:flex; align-items:center; max-width:58px;}
  .who-picker .avatar-both .avatar{width:17px; height:17px; font-size:7.5px;}
  .who-picker .avatar-both .avatar:first-child{margin-right:-6px;}
  .who-row-name{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .who-row-check{width:12px; height:12px; flex-shrink:0; color:var(--accent);}
  .who-sep{height:1px; background:var(--border); margin:5px 4px;}
  /* Le panneau a la place d'être plus confortable. */
  .who-picker.pleine-largeur .who-row{gap:10px; padding:10px;}
  /* L'avatar reste la cible du clic : on signale qu'il ouvre quelque chose. */
  .who-cible{cursor:pointer; display:inline-flex; align-items:center; -webkit-tap-highlight-color:transparent;}