/* ---------- NOTES ÉVOLUTIVES ----------
     Une ligne peut s'ouvrir vers le bas sur son fil de notes. Elle est donc
     enveloppée : .xrow-wrap contient la ligne et, quand elle est ouverte, la
     zone. Cette enveloppe casse l'alternance en :nth-child des blocs — c'est
     désormais la classe .alt, posée par le rendu, qui la porte. */

  /* Agenda — fond blanc / crème, séparateur entre les enveloppes. */
  .trow-wrap{background:var(--surface);}
  .trow-wrap.alt{background:var(--bg);}
  .trow-wrap .arow{background:transparent; border-bottom:none;}
  .trow-wrap:not(:last-child){border-bottom:1px solid var(--border);}
  /* Dans la vue « journée complète » les lignes sont des cartes détachées. */
  .hour-row .trow-wrap{border-radius:9px; overflow:hidden; border-bottom:none;}

  /* À garder en tête — deux crèmes alternés. */
  .rrow-wrap{background:#F0F0EA;}
  .rrow-wrap.alt{background:#E4E4DB;}
  .rrow-wrap .rrow{background:transparent;}

  /* Important — rouge vif. */
  .urow-wrap{background:#E5342A;}
  .urow-wrap.alt{background:#CF2A21;}
  .urow-wrap .urow{background:transparent;}

  /* En retard — rouge sombre. */
  .orow-wrap{background:#5E2124;}
  .orow-wrap.alt{background:#4A1A1C;}
  .orow-wrap .orow{background:transparent;}

  /* ---------- le déclencheur ----------
     C'est l'icône déjà présente devant le texte qui ouvre la zone : la pastille
     de catégorie, l'éclair, le triangle. Le bouton ne fait que l'envelopper —
     rien ne bouge visuellement, il gagne seulement un compteur et un état. */
  .note-trigger{
    position:relative; flex-shrink:0; padding:0; border:none; background:none;
    color:inherit; display:flex; align-items:center; justify-content:center;
    cursor:pointer; -webkit-tap-highlight-color:transparent;
  }
  .note-trigger .icon-badge{pointer-events:none;}
  .note-count{
    position:absolute; top:-3px; right:-4px; min-width:14px; height:14px; padding:0 3px;
    border-radius:999px; background:var(--accent-fill); color:#fff;
    font-family:'IBM Plex Mono',monospace; font-size:8.5px; font-weight:700; line-height:14px;
    text-align:center; box-shadow:0 0 0 1.5px var(--surface);
  }
  /* Ouverte, l'icône se cerne : on voit d'où vient la zone dépliée. */
  .note-trigger.ouvert{box-shadow:0 0 0 2px var(--accent); border-radius:50%;}

  /* La bulle des lignes d'horaire : elles ne portent aucune icône, celle-ci en
     tient lieu plutôt que d'en ajouter une deuxième ailleurs. */
  .note-trigger-bulle{width:22px; height:22px; color:var(--ink-soft); opacity:.4; transition:opacity .15s ease, color .15s ease;}
  .note-trigger-bulle .note-bulle{width:14px; height:14px;}
  .note-trigger-bulle:hover{opacity:1; color:var(--ink);}
  .note-trigger-bulle.has{opacity:1; color:var(--accent);}
  .note-trigger-bulle.ouvert{opacity:1; color:var(--accent); border-radius:7px;}

  /* Sur les bandes rouges, le brun de l'accent disparaîtrait. */
  .note-trigger.sur-sombre .note-count{background:#fff; color:#8B2016; box-shadow:0 0 0 1.5px rgba(0,0,0,.18);}
  .note-trigger.sur-sombre.ouvert{box-shadow:0 0 0 2px rgba(255,255,255,.85);}
  /* Le compteur d'une liste repliée : savoir qu'il y a quelque chose dessous
     sans avoir à l'ouvrir. */
  .note-count-chip{
    display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:9px; font-weight:700;
    background:var(--accent-fill); color:#fff; border-radius:999px; padding:1px 6px; vertical-align:1px;
  }

  /* ---------- la zone dépliée ----------
     Un voile sombre translucide plutôt qu'une couleur fixe : la même règle
     fonctionne sur le blanc de l'agenda, le crème des rappels et le rouge des
     alertes, et se lit partout comme un creux. */
  .note-panel{
    background:rgba(0,0,0,.055); border-top:1px solid rgba(0,0,0,.09);
    animation:noteOuvre .16s ease;
  }
  @keyframes noteOuvre{ from{opacity:0; transform:translateY(-3px);} to{opacity:1; transform:none;} }
  .note-panel.sur-sombre{background:rgba(0,0,0,.3); border-top-color:rgba(255,255,255,.16);}

  /* ---------- une note ---------- */
  .note-item{padding:8px 13px; border-bottom:1px solid rgba(0,0,0,.07);}
  .note-item:last-child{border-bottom:none;}
  .note-item-head{display:flex; align-items:center; gap:7px; margin-bottom:2px;}
  .note-author{font-size:11px; font-weight:700; color:var(--ink); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .note-when{font-family:'IBM Plex Mono',monospace; font-size:9px; color:var(--ink-soft); flex-shrink:0;}
  .note-body{font-size:12.5px; line-height:1.45; color:var(--ink); word-break:break-word;}
  .note-empty{padding:9px 13px 4px; font-size:11.5px; font-style:italic; color:var(--ink-soft);}
  .note-del{
    margin-left:auto; flex-shrink:0; height:18px; padding:0 2px; border:none; background:none;
    color:var(--ink-soft); display:flex; align-items:center; justify-content:center; cursor:pointer;
  }
  .note-del svg{width:12px; height:12px;}
  .note-del:hover{color:#E5342A;}
  /* Effacer se confirme sur place : un dialogue par-dessus ferait perdre de vue
     la note qu'on est justement en train d'effacer. */
  .note-del.armed{
    width:auto; padding:1px 8px; border-radius:999px; background:#E5342A; color:#fff;
    font-size:9.5px; font-weight:700; font-family:'Inter',sans-serif;
  }
  .note-del.armed:hover{color:#fff; background:#C42A21;}

  /* Sur fond sombre, tout le texte de la zone passe en clair. */
  .note-panel.sur-sombre .note-item{border-bottom-color:rgba(255,255,255,.12);}
  .note-panel.sur-sombre .note-author{color:#fff;}
  .note-panel.sur-sombre .note-when{color:rgba(255,255,255,.6);}
  .note-panel.sur-sombre .note-body{color:rgba(255,255,255,.92);}
  .note-panel.sur-sombre .note-empty{color:rgba(255,255,255,.7);}
  .note-panel.sur-sombre .note-del{color:rgba(255,255,255,.65);}
  .note-panel.sur-sombre .note-del:hover{color:#fff;}

  /* ---------- la barre d'écriture ---------- */
  .note-add{display:flex; align-items:center; gap:7px; padding:8px 13px 10px;}
  .note-add input{
    flex:1; min-width:0; border:1px solid var(--border-soft); border-radius:9px; background:var(--surface);
    padding:7px 9px; font-family:'Inter',sans-serif; font-size:12.5px; color:var(--ink);
  }
  .note-add input:focus{outline:none; border-color:var(--accent);}
  .note-add button{
    flex-shrink:0; border:none; border-radius:9px; background:var(--action); color:#fff;
    font-family:'Inter',sans-serif; font-size:11.5px; font-weight:600; padding:7px 11px; cursor:pointer;
  }
  .note-panel.sur-sombre .note-add input{
    background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.28); color:#fff;
  }
  .note-panel.sur-sombre .note-add input::placeholder{color:rgba(255,255,255,.55);}
  .note-panel.sur-sombre .note-add input:focus{border-color:#fff;}
  .note-panel.sur-sombre .note-add button{background:#fff; color:#8B2016;}

  /* ---------- le bloc d'une liste, sous ses articles ----------
     Une liste s'ouvre déjà en accordéon : ses notes vivent dedans, sans second
     niveau à déplier. */
  .list-notes{border-top:1px solid var(--border); background:rgba(0,0,0,.03);}
  .list-notes-head{
    font-family:'IBM Plex Mono',monospace; font-size:8.5px; font-weight:700;
    text-transform:uppercase; letter-spacing:.09em; color:var(--ink-soft);
    padding:8px 13px 3px; display:flex; align-items:center; gap:6px;
  }

  /* ---------- le texte de la note dans la notification ----------
     Reçue, elle doit dire ce qui a été écrit : sinon il faut aller le chercher,
     et la notification n'a servi à rien. Coupée à trois lignes, ouverte au clic. */
  .notif-note{
    margin-top:5px; padding:7px 9px; border-radius:9px; background:var(--surface);
    border:1px solid var(--border); border-left:3px solid #3F5C63;
    font-size:12.5px; line-height:1.45; color:var(--ink);
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
  }
  .notif-note.open{display:block; -webkit-line-clamp:none; overflow:visible;}

  /* Les bandes d'alerte sont volontairement courtes (16vh / 20vh) : une zone de
     notes ouverte dedans ne se verrait pas. Elles s'agrandissent le temps de la
     consultation, et syncTodayLayout (js/app.js) rend l'espace aux deux blocs
     du dessous puisqu'il mesure leur hauteur réelle. */
  #urgentList:has(.note-panel){max-height:42vh;}
  #overdueList:has(.note-panel){max-height:42vh;}

  /* ---------- LE LIEN VERS UNE NOTE DU CARNET ----------
     Dans le fil, un lien ne se lit pas : il s'ouvre. Il porte donc la forme
     d'un bouton, pas celle d'un paragraphe. */
  .note-lien{
    display:flex; align-items:center; gap:8px; width:100%; margin-top:2px;
    background:var(--surface); border:1px solid var(--border); border-radius:8px;
    padding:8px 10px; text-align:left; cursor:pointer; color:var(--ink);
    font-family:'Inter',sans-serif; font-size:13px; font-weight:600;
  }
  .note-lien:hover{border-color:var(--accent); color:var(--accent);}
  .note-lien svg{width:15px; height:15px; flex-shrink:0; color:var(--accent);}
  .note-lien span{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .note-lien em{
    font-style:normal; font-family:'IBM Plex Mono',monospace; font-size:9.5px;
    letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); flex-shrink:0;
  }
  /* Sur fond sombre — la bande des retards, la tête d'un projet. */
  .sur-sombre .note-lien{
    background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.22); color:#fff;
  }
  .sur-sombre .note-lien em{color:rgba(255,255,255,.6);}
  .sur-sombre .note-lien svg{color:#fff;}

  /* Le bouton qui ouvre le choix, dans la barre d'écriture. */
  .note-add .note-lier{
    flex-shrink:0; width:34px; padding:0; display:flex; align-items:center; justify-content:center;
  }
  .note-add .note-lier svg{width:16px; height:16px;}

  /* La bulle sur une carte de projet : à gauche du genre, alignée sur le titre. */
  .proj-note-bulle{display:flex; align-items:center; flex-shrink:0;}

  /* ---------- CHOISIR LA NOTE À LIER ---------- */
  .lier-liste{padding:10px 12px 24px;}
  .lier-ligne{
    display:block; width:100%; text-align:left; cursor:pointer;
    background:var(--surface); border:1px solid var(--border); border-radius:10px;
    padding:13px 14px; margin-bottom:8px; color:var(--ink); font-family:'Inter',sans-serif;
  }
  .lier-ligne:hover{border-color:var(--ink-soft);}
  .lier-ligne.posee{opacity:.5; cursor:default;}
  .lier-titre{display:block; font-size:14.5px; font-weight:600; line-height:1.35;}
  .lier-meta{
    display:block; margin-top:4px; font-family:'IBM Plex Mono',monospace; font-size:9.5px;
    letter-spacing:.07em; text-transform:uppercase; color:var(--ink-soft);
  }
  .lier-vide{padding:26px 6px; text-align:center; color:var(--ink-soft); font-size:14px; line-height:1.6;}

  /* La bulle d'une ligne de projet : devant le titre, alignée sur sa première
     ligne de texte, et assez discrète pour ne pas voler la lecture. */
  .note-trigger-prow{
    display:inline-flex; vertical-align:-3px; margin-right:6px;
    width:20px; height:20px; padding:0; flex-shrink:0;
  }
  .note-trigger-prow svg{width:13px; height:13px;}
  .note-trigger-prow .note-count{font-size:8px; min-width:12px; height:12px; line-height:12px;}
  /* Le fil s'ouvre sous la ligne, sur toute la largeur du tableau. */
  .prow + .note-panel{margin:0 0 6px; border-radius:8px;}

  /* La bande noire de la page de choix : même gradient et même typographie
     que les bandes de titre des écrans. */
  .lier-bande{
    display:flex; align-items:center; gap:10px; padding:12px 16px;
    background:linear-gradient(135deg,#2B2824 0%,#171512 100%);
  }
  .lier-bande h3{
    margin:0; font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:700;
    letter-spacing:.09em; text-transform:uppercase; color:#fff;
  }
  .lier-recherche{display:flex; align-items:center; gap:8px; padding:12px 12px 2px;}
  .lier-recherche .proj-search{flex:1; min-width:0;}

  /* ---------- LE CATALOGUE ----------
     Même langage que la page de choix d'une note : bande noire, recherche,
     alphabet en tête de groupe. Ce qui change, c'est la ligne — une fiche a
     une image, un prix et surtout une provenance, qui est la moitié de la
     réponse à « je le prends où ? ». */
  .cat-lettre{
    font-family:'IBM Plex Mono',monospace; font-size:9.5px; font-weight:700;
    letter-spacing:.14em; color:var(--ink-soft); margin:14px 0 6px 3px;
  }
  .cat-lettre:first-child{margin-top:2px;}
  .cat-ligne{
    display:flex; align-items:center; gap:11px; width:100%; text-align:left; cursor:pointer;
    background:var(--surface); border:1px solid var(--border); border-radius:10px;
    padding:10px 12px; margin-bottom:8px; color:var(--ink); font-family:'Inter',sans-serif;
  }
  .cat-ligne:hover{border-color:var(--ink-soft);}
  .cat-vignette{
    width:44px; height:44px; flex-shrink:0; border-radius:8px; overflow:hidden;
    background:var(--bg); display:flex; align-items:center; justify-content:center;
  }
  .cat-vignette img{width:100%; height:100%; object-fit:cover;}
  .cat-vignette-vide{color:var(--ink-soft); font-size:17px; line-height:1;}
  /* min-width:0 sur la colonne de texte : sans lui, un long titre pousse la
     pastille « Pub » hors de la carte au lieu de se couper. */
  .cat-corps{display:flex; flex-direction:column; gap:2px; flex:1; min-width:0;}
  .cat-titre{font-size:14px; font-weight:600; line-height:1.3;}
  .cat-meta{font-size:11.5px; color:var(--ink-soft); line-height:1.35;}
  .cat-provenance{
    font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:.05em;
    color:var(--ink-soft); margin-top:2px; line-height:1.4;
  }
  /* Le seul endroit où on met de la couleur : c'est l'information qui décide. */
  .cat-provenance.ici{color:#4A7C4E; font-weight:600;}
  .cat-provenance.vient{color:#8A6A2F;}
  .cat-provenance.neutre{opacity:.75;}

  /* Les deux boutons posés dans la barre d'écriture. Discrets : ils ouvrent
     une possibilité, ils ne réclament pas le geste.

     La barre d'ajout d'un article habille TOUS ses boutons pour le bouton
     « Ajouter » : fond noir et 14px de rembourrage horizontal. Sur un bouton
     de 30px, il ne restait pas 2px pour une icône de 16 — d'où deux pastilles
     noires vides. `.list-item-add .cat-ouvre` (0,2,0) passe devant
     `.list-item-add button` (0,1,1) sans dépendre de l'ordre des feuilles. */
  .cat-ouvre,
  .list-item-add .cat-ouvre{
    width:30px; height:30px; flex-shrink:0; padding:0; border-radius:999px;
    border:1px solid var(--border); background:var(--surface); color:var(--ink-soft);
    display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
    box-sizing:border-box; font-size:0;
  }
  .cat-ouvre svg,
  .list-item-add .cat-ouvre svg{width:16px; height:16px;}
  .cat-ouvre:hover,
  .list-item-add .cat-ouvre:hover{border-color:var(--ink-soft); color:var(--ink); opacity:1;}