/* ---------- CONTEXT BAR ---------- */
  .context-bar{
    margin:0 calc(var(--pad-x) * -1) 18px; padding:10px var(--pad-x); background:linear-gradient(135deg,#2B2824 0%,#171512 100%);
    color:#fff; display:flex; align-items:center; justify-content:space-between; gap:10px;
  }
  .ctx-mid{display:flex; flex-direction:column; align-items:center; flex:1; min-width:0;}
  .context-bar .cdate{font-size:13px; font-weight:600; text-transform:capitalize;}
  .context-bar .clabel{font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.68);}
  .day-nav{width:28px; height:28px; border-radius:50%; border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.08); color:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0; padding:0;}
  .day-nav:hover{background:rgba(255,255,255,.18);}
  .day-nav svg{width:13px; height:13px;}

  .screen{display:none;}
  .screen.active{display:block; animation:fade .2s ease;}
  @media (prefers-reduced-motion:no-preference){ @keyframes fade{from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:none;}} }

  /* Le titre d'un écran est une bande noire collée à l'en-tête, comme la barre
     du jour et comme l'en-tête d'un bloc ouvert en grand : trois façons de
     nommer ce qu'on regarde, une seule écriture. D'où padding-top:0 — une
     bande de fond clair entre les deux les ferait flotter. */
  .screen-pad{padding-top:0;}
  .screen-title{
    display:flex; align-items:center; justify-content:flex-start;
    margin:0 calc(var(--pad-x) * -1) 18px; padding:13px var(--pad-x);
    background:linear-gradient(135deg,#2B2824 0%,#171512 100%);
  }
  .screen-title h1{
    margin:0; font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:700;
    letter-spacing:.09em; text-transform:uppercase; color:#fff;
  }

  /* La règle complète est plus bas (le titre est devenu un bouton) ; seule la
     marge reste ici, avec les autres espacements de la page. */
  .section-label{margin:16px 0 7px;}
  .section-label:first-of-type{margin-top:0;}
  .empty{font-size:13px; color:var(--ink-soft); padding:6px 2px 4px 8px; font-style:italic;}
  #overdueList > .empty{padding:12px var(--pad-x); background:#3E5540; color:#fff; font-style:normal; font-size:12.5px;}

  .avatar{width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:9.5px; font-weight:700; color:#fff; flex-shrink:0; border:none; padding:0;}
  .avatar.none{background:rgba(0,0,0,.12); color:var(--ink-soft); border:1.3px dashed rgba(0,0,0,.25);}
  .avatar-both{display:inline-flex; align-items:center;}
  .avatar-both .avatar{border:1.5px solid var(--surface); box-sizing:content-box;}
  .avatar-both .avatar:first-child{margin-right:-9px; z-index:1;}
  .avatar-both .avatar:nth-child(2){margin-right:-9px;}
  .avatar-both .avatar-extra{background:var(--ink-soft); font-size:8.5px;}


  /* ---------- un bloc en plein écran ----------
     Les deux blocs de la journée se partagent l'espace. Avec beaucoup de
     lignes, ce partage n'aide plus : le titre ouvre son bloc en grand, sans
     cadre ni bordure, et la flèche revient à la vue partagée. */
  .section-label{
    display:flex; align-items:center; gap:7px; width:100%;
    background:none; border:none; padding:0; cursor:pointer; text-align:left;
    font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.08em;
    text-transform:uppercase; color:var(--ink-soft);
  }
  .section-label-texte{flex:1; min-width:0;}
  .section-label-retour{display:none; align-items:center; justify-content:center; width:26px; height:26px; margin-left:-4px; border-radius:50%; color:var(--ink); background:var(--surface); border:1px solid var(--border); flex-shrink:0;}
  .section-label-retour svg{width:13px; height:13px;}
  .section-label-loupe{display:flex; align-items:center; justify-content:center; width:20px; height:20px; color:var(--ink-soft); opacity:.55; flex-shrink:0;}
  .section-label-loupe svg{width:12px; height:12px;}
  .section-label:hover .section-label-loupe{opacity:1; color:var(--ink);}

  /* Le bloc ouvert prend toute la place restante ; l'autre et les bandes
     d'alerte s'effacent — on est venu regarder une seule chose. */
  /* .active en plus : sans lui, ces deux classes (deux sélecteurs contre un)
     l'emportaient sur « .screen{display:none} » et l'écran Tâches restait
     affiché par-dessus Projets ou Calendrier. */
  .screen.active.focus-agenda, .screen.active.focus-rappels{display:flex; flex-direction:column; min-height:0;}
  .screen.focus-agenda #urgentList, .screen.focus-agenda #overdueList,
  .screen.focus-rappels #urgentList, .screen.focus-rappels #overdueList,
  .screen.focus-agenda .context-bar, .screen.focus-rappels .context-bar{display:none;}
  .screen.focus-agenda #remindersLabel, .screen.focus-agenda #remindersList,
  .screen.focus-rappels #agendaLabel, .screen.focus-rappels #agendaCards{display:none;}

  /* Ouvert, le titre devient l'en-tête de l'écran : la même bande noire pleine
     largeur que la barre du jour et que les menus du bureau d'entreprise. Un
     libellé gris sur fond clair ne ferait pas un en-tête. */
  .screen.focus-agenda #agendaLabel, .screen.focus-rappels #remindersLabel{
    /* width:auto : avec width:100% les marges négatives ne débordaient que d'un
       côté, et la bande s'arrêtait avant le bord droit. */
    width:auto;
    /* Collée à l'en-tête de l'app : les deux bandes se suivent, sans bande de
       fond clair entre elles. */
    margin:0 calc(var(--pad-x) * -1);
    padding:13px 14px;
    background:linear-gradient(135deg,#2B2824 0%,#171512 100%);
    color:#fff; font-size:11px; letter-spacing:.09em;
  }
  /* Un carré du même noir que la bande, tenu par un simple liseré blanc : un
     noir plus profond faisait une tache, pas un bouton. */
  .screen.focus-agenda #agendaLabel .section-label-retour,
  .screen.focus-rappels #remindersLabel .section-label-retour{
    display:flex; margin-left:0; width:30px; height:30px;
    border-radius:9px; background:none; border:1px solid rgba(255,255,255,.55); color:#fff;
    transition:background .15s ease, border-color .15s ease;
  }
  .screen.focus-agenda #agendaLabel .section-label-retour svg,
  .screen.focus-rappels #remindersLabel .section-label-retour svg{width:14px; height:14px;}
  .screen.focus-agenda #agendaLabel .section-label-retour:hover,
  .screen.focus-rappels #remindersLabel .section-label-retour:hover{background:rgba(255,255,255,.14); border-color:#fff;}
  .screen.focus-agenda #agendaLabel .section-label-loupe,
  .screen.focus-rappels #remindersLabel .section-label-loupe{display:none;}

  /* Sans cadre : la liste occupe la largeur pleine et défile seule. */
  .screen.focus-agenda #agendaCards, .screen.focus-rappels #remindersList{
    flex:1; min-height:0; max-height:none !important;
    margin:0 calc(var(--pad-x) * -1); border:none; border-radius:0;
  }

  /* Le pied du bloc ouvert : il ferme la liste. Sans lui, la dernière ligne
     s'arrête dans le vide et le bloc se fond dans le fond de la page. */
  .bloc-fin{
    background:var(--surface);
    border-top:1px solid var(--border); border-bottom:1px solid var(--border);
    padding:12px 14px 13px; text-align:center;
    font-family:'IBM Plex Mono',monospace; font-size:9px; font-weight:700;
    text-transform:uppercase; letter-spacing:.09em; color:var(--ink-soft);
  }