:root{
    --bg:#F7F7F4;
    --surface:#FFFFFF;
    --surface-soft:#EFEFEA;
    --border:#E4E4DE;
    --border-soft:#DBDBD3;
    --ink:#221F1A;
    --ink-soft:#8B8474;
    --accent:#A9762E;
    --accent-bg:#EFE7D4;
    --send:#D98A3D;
    --maya:#6B4558;
    --sam:#4F6B4A;
    --radius:16px;
    --radius-sm:11px;
    --shadow: 0 1px 2px rgba(34,31,26,0.04), 0 10px 24px -14px rgba(34,31,26,0.16);
    --nav-h:72px;
    --composer-h:60px;
    --pad-x:8px;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  /* overscroll-behavior-y:contain coupe le « tirer pour rafraîchir » natif du
     navigateur (qui rechargeait toute la page) — le geste est repris par
     js/app.js pour ne recharger que les données. */
  html{overscroll-behavior-y:contain;}
  body{background:#E8E8E3; color:var(--ink); font-family:'Inter',sans-serif; min-height:100vh; -webkit-font-smoothing:antialiased; overscroll-behavior-y:contain;}

  /* indicateur du tirer-pour-rafraîchir */
  .ptr-indicator{
    position:fixed; top:6px; left:50%; transform:translateX(-50%); z-index:90;
    width:32px; height:32px; border-radius:50%; background:var(--surface);
    border:1px solid var(--border); box-shadow:0 4px 14px -6px rgba(0,0,0,.3);
    display:flex; align-items:center; justify-content:center;
    opacity:0; pointer-events:none; transition:opacity .15s ease;
  }
  .ptr-indicator.visible{opacity:1;}
  .ptr-spinner{width:14px; height:14px; border-radius:50%; border:2px solid var(--border); border-top-color:var(--ink-soft);}
  .ptr-indicator.ready .ptr-spinner{border-top-color:var(--accent);}
  .ptr-indicator.spinning .ptr-spinner{animation:ptrSpin .7s linear infinite;}
  @keyframes ptrSpin{to{transform:rotate(360deg);}}
  ::selection{background:var(--accent-bg);}

  /* ---------- MINIMAL SCROLLBARS ---------- */
  #agendaCards, #calAgenda, #overdueList, #remindersList{
    scrollbar-width:thin; scrollbar-color:rgba(34,31,26,0.2) transparent;
  }
  #agendaCards::-webkit-scrollbar, #calAgenda::-webkit-scrollbar,
  #overdueList::-webkit-scrollbar, #remindersList::-webkit-scrollbar{
    width:4px;
  }
  #agendaCards::-webkit-scrollbar-track, #calAgenda::-webkit-scrollbar-track,
  #overdueList::-webkit-scrollbar-track, #remindersList::-webkit-scrollbar-track{
    background:transparent;
  }
  #agendaCards::-webkit-scrollbar-thumb, #calAgenda::-webkit-scrollbar-thumb,
  #remindersList::-webkit-scrollbar-thumb{
    background:rgba(34,31,26,0.18); border-radius:999px;
  }
  #agendaCards::-webkit-scrollbar-thumb:hover, #calAgenda::-webkit-scrollbar-thumb:hover,
  #remindersList::-webkit-scrollbar-thumb:hover{ background:rgba(34,31,26,0.32); }

  /* ---------- LA BANDE DE VUES ----------
     Une barre qui sert à choisir CE QU'ON REGARDE prend partout la même forme :
     une bande pleine largeur sur fond sombre, l'onglet choisi éclairci. C'est
     déjà le langage des onglets du bureau d'entreprise et des discussions ;
     inventer un style par écran fait perdre le repère « ceci choisit une vue ».

     Trois écrans la partagent maintenant : le filtre par genre des projets, le
     Catalogue/Soumissions du back office, et le Actives/Effacées des
     entreprises. Le fond reprend la fin du dégradé des bandes de titre, pour
     qu'ils ne fassent qu'un bloc là où ils se touchent.

     À ne PAS confondre avec un contrôle de formulaire : « Semaine / Mois /
     Année » posé à côté d'un menu déroulant choisit une période, pas une vue —
     il reste une pastille dans sa rangée. */
  .proj-filtre, .admin-comp-seg{display:flex; background:#171512; gap:0; padding:0;}
  .pfiltre-btn, .admin-comp-seg-btn{
    flex:1 1 0; min-width:0; position:relative;
    display:flex; align-items:center; justify-content:center; gap:6px;
    border:none; border-radius:0; background:none; padding:11px 4px 10px;
    font-family:'IBM Plex Mono',monospace; font-size:9.5px; font-weight:700;
    letter-spacing:.07em; text-transform:uppercase; color:rgba(255,255,255,.6);
    transition:background .15s, color .15s; -webkit-tap-highlight-color:transparent;
  }
  .pfiltre-btn:hover, .admin-comp-seg-btn:hover{background:rgba(255,255,255,.08); color:#fff;}
  .pfiltre-btn.on, .admin-comp-seg-btn.active{background:rgba(255,255,255,.16); color:#fff;}
  /* Le compteur de non-lus est calibré pour des onglets-icônes étroits, où il
     se pose en absolu dans un coin. Sur un libellé centré il retombait
     par-dessus le texte : dans une bande, il suit le mot dans le flux. */
  .admin-comp-seg-btn .admin-tab-badge{position:static; top:auto; right:auto; left:auto;}