/* Elevora CRM — Notifications : la page et le panneau de la cloche (28/09/2026, js/31).
   Célian : « notre page de notification est vraiment nulle […] en termes de rangement ». Modèle
   retenu après recherche (HubSpot, GitHub, Linear, Notion, Slack, Pennylane) : une boîte
   Non lues / Toutes / Archivées en onglets, les filtres rangés dans une colonne avec leurs
   compteurs, puis la liste — « À traiter » d'abord, ensuite par jour.
   Une ligne : un point pour « non lue » (doublé d'un texte pour le lecteur d'écran), l'icône du
   type, le titre (qui porte l'action principale sur toute la ligne), l'heure relative, le contexte
   (priorité écrite en mot, type, client), le détail sur deux lignes au plus, puis ses actions.
   Les lignes d'une section sont dans UNE liste encadrée, séparées par un filet : pas une carte
   par notification, pas de bordure colorée, pas d'ombre (sauf le panneau, qui flotte).
   Couleurs en jetons (css/elevora.css), dans les deux thèmes ; aucune transition ajoutée. */

/* ── La page ── */
/* Pleine largeur, comme les autres pages depuis le 25/09/2026 (« sur mon écran ultra-large, la
   moitié de l'écran est vide ») ; seul le détail d'une ligne garde une largeur de lecture. */
.nf-page{max-width:none}
.nf-barre{display:flex;align-items:flex-end;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;margin:0 0 18px;border-bottom:1px solid var(--border)}
.nf-statuts{display:flex;gap:4px;min-width:0}
.nf-statut{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 14px;margin-bottom:-1px;background:none;border:0;border-bottom:2px solid transparent;border-radius:6px 6px 0 0;font:inherit;font-size:14px;font-weight:500;line-height:1;color:var(--text2);cursor:pointer;white-space:nowrap}
.nf-statut:hover{color:var(--text);background:var(--bg3)}
.nf-statut[aria-selected="true"]{color:var(--accent);border-bottom-color:var(--accent);font-weight:600}
.nf-statut:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.nf-compte{font:500 12px/1 var(--mono);color:var(--text3)}
.nf-statut[aria-selected="true"] .nf-compte{color:var(--accent)}
.nf-outils{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:0 0 8px}
.nf-outils .btn svg{flex-shrink:0}
.nf-alerte-bloc{display:flex;align-items:center;justify-content:space-between;gap:10px 14px;flex-wrap:wrap;padding:12px 14px;margin:0 0 16px;border:1px solid var(--red);border-radius:var(--r);background:var(--red-bg);color:var(--text);font-size:13.5px}
.nf-alerte-bloc p{margin:0}
.nf-cadre{display:grid;grid-template-columns:220px minmax(0,1fr);gap:28px;align-items:start}
.nf-contenu{min-width:0}

/* ── Les filtres, en colonne ── */
.nf-filtres{position:sticky;top:84px}
.nf-filtres-bascule{display:none}
.nf-groupe+.nf-groupe{margin-top:20px}
.nf-groupe-t{margin:0 0 6px;padding:0 10px;font:600 11px/1.3 var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--text3)}
.nf-filtres-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.nf-filtre{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:36px;padding:6px 10px;border:0;border-radius:var(--rs);background:none;font:inherit;font-size:13.5px;line-height:1.3;color:var(--text2);text-align:left;cursor:pointer}
.nf-filtre:hover{background:var(--bg3);color:var(--text)}
.nf-filtre[aria-pressed="true"]{background:var(--glow);color:var(--accent);font-weight:600}
.nf-filtre[aria-pressed="true"] .nf-compte{color:var(--accent)}
.nf-filtre:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.nf-effacer{margin-top:12px}

/* ── Sections et lignes (page et cloche) ── */
.nf-section+.nf-section{margin-top:24px}
.nf-section-tete{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin:0 0 8px;padding:0 2px}
.nf-section-t{margin:0;display:inline-flex;align-items:baseline;gap:8px;font:600 13.5px/1.3 var(--font);color:var(--text)}
.nf-section-n{font:500 12px/1 var(--mono);color:var(--text3)}
.nf-section-aide{margin:0;font-size:12.5px;color:var(--text3)}
.nf-liste{list-style:none;margin:0;padding:0;background:var(--bg2);border:1px solid var(--border);border-radius:var(--rl);overflow:hidden}
.nf-ligne{position:relative;display:flex;align-items:flex-start;gap:12px;padding:12px 12px 12px 10px}
.nf-ligne+.nf-ligne{border-top:1px solid var(--border)}
.nf-ligne:hover{background:var(--bg3)}
.nf-point{flex:0 0 8px;width:8px;height:8px;margin-top:11px;border-radius:50%}
.nf-nonlue .nf-point{background:var(--accent)}
.nf-ic{flex:0 0 auto;width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--rs);background:var(--bg3);color:var(--text2)}
.nf-ligne:hover .nf-ic{background:var(--bg4)}
.nf-corps{flex:1 1 auto;min-width:0}
.nf-l1{display:flex;align-items:baseline;gap:12px}
/* Le titre porte l'action principale ; sa zone de clic couvre toute la ligne (::after), les
   boutons d'action passent au-dessus. Au clavier, l'anneau de focus entoure la ligne. */
.nf-titre{flex:1 1 auto;min-width:0;margin:0;padding:0;background:none;border:0;font:inherit;font-size:14px;line-height:1.45;color:var(--text2);text-align:left;cursor:pointer;overflow-wrap:anywhere}
.nf-nonlue .nf-titre{color:var(--text);font-weight:600}
.nf-titre::after{content:"";position:absolute;inset:0}
.nf-titre:focus{outline:none}
.nf-titre:focus-visible::after{outline:2px solid var(--accent);outline-offset:-2px}
.nf-quand{flex:0 0 auto;font-size:12px;line-height:1.45;color:var(--text3);white-space:nowrap}
.nf-contexte{margin:2px 0 0;display:flex;flex-wrap:wrap;align-items:baseline;font-size:12.5px;line-height:1.45;color:var(--text3)}
.nf-sep{margin:0 6px}
.nf-prio{font-weight:600}
.nf-prio-urgent{color:var(--red)}
.nf-prio-important{color:var(--amber)}
.nf-desc{max-width:110ch;margin:3px 0 0;font-size:13px;line-height:1.45;color:var(--text2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.nf-actions{position:relative;z-index:1;flex:0 0 auto;display:flex;gap:2px;margin:-3px -4px 0 0}
.nf-act{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;padding:0;border:0;border-radius:var(--rs);background:none;color:var(--text3);cursor:pointer}
.nf-act:hover{background:var(--bg4);color:var(--text)}
.nf-act:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
/* À la souris, les actions apparaissent au survol ou au focus de la ligne ; au doigt, toujours. */
@media (hover:hover) and (pointer:fine){
  .nf-actions{opacity:0}
  .nf-ligne:hover .nf-actions,.nf-ligne:focus-within .nf-actions{opacity:1}
}
.nf-vide{padding:40px 20px;text-align:center;font-size:13.5px;color:var(--text2);background:var(--bg2);border:1px solid var(--border);border-radius:var(--rl)}
.nf-vide p{margin:0 0 4px}
.nf-vide .nf-vide-t{margin:0 0 6px;font:600 15px/1.4 var(--font);color:var(--text)}
.nf-vide .btn{margin-top:12px}
.nf-chargement{padding:24px 4px;font-size:13.5px;color:var(--text3)}

/* ── Le panneau de la cloche ── */
#notif-panel.nf-cloche{position:absolute;top:48px;right:0;z-index:200;width:420px;max-width:calc(100vw - 16px);overflow:hidden;background:var(--bg2);border:1px solid var(--border2);border-radius:var(--rl);box-shadow:0 12px 40px rgba(0,0,0,.28)}
#notif-panel.nf-cloche:focus{outline:none}
/* css/elevora.css pose un fond --bg4 sur tout bouton focalisé du panneau (anciens boutons à
   icône) : sur le titre, c'est la ligne entière qui porte l'anneau, pas un surlignage du texte. */
#notif-panel .nf-titre:focus-visible{background:none!important}
.nf-cloche-tete{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 10px 10px 16px;border-bottom:1px solid var(--border)}
.nf-cloche-tete h2{margin:0;font-size:15px;font-weight:600}
.nf-cloche-liste{max-height:min(480px,70vh);overflow-y:auto;padding:12px 10px}
.nf-cloche-pied{display:flex;justify-content:space-between;gap:10px;padding:6px 8px;border-top:1px solid var(--border)}
.nf-lien{min-height:32px;padding:6px 8px;background:none;border:0;border-radius:var(--rs);font:inherit;font-size:13px;font-weight:500;color:var(--accent);cursor:pointer}
.nf-lien:hover{background:var(--bg3)}
.nf-lien:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.nf-cloche .nf-section+.nf-section{margin-top:14px}
.nf-cloche .nf-section-t{font-size:12.5px}
.nf-cloche .nf-ligne{gap:10px;padding:10px 8px 10px 8px}
.nf-cloche .nf-ic{width:26px;height:26px}
.nf-cloche .nf-point{margin-top:9px}
.nf-cloche .nf-titre{font-size:13px}
.nf-cloche .nf-l1{flex-wrap:wrap;gap:0 10px}
.nf-cloche .nf-contexte{font-size:12px}
.nf-cloche .nf-desc{font-size:12.5px;-webkit-line-clamp:1}
.nf-cloche .nf-vide{padding:28px 12px;background:none;border:0}
.nf-plus{margin:12px 4px 2px;font-size:12.5px;color:var(--text3)}

/* ── Tablette et téléphone ── */
/* css/mobile.css borne le panneau à 80 % de l'écran et le fait défiler en entier : le pied (« Voir
   toutes », « Préférences ») sortait de l'écran, sous une seconde barre de défilement. Seule la
   liste défile ; en-tête et pied restent en place. */
@media (max-width:768px){
  #notif-panel.nf-cloche{overflow:hidden}
  .nf-cloche-liste{max-height:calc(80dvh - 124px)}
}
@media (max-width:900px){
  .nf-cadre{grid-template-columns:minmax(0,1fr);gap:12px}
  .nf-filtres{position:static}
  /* La colonne de filtres se replie derrière un bouton « Filtres » qui dit le filtre posé. */
  .nf-filtres-bascule{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:8px 12px;border:1px solid var(--border2);border-radius:var(--r);background:var(--bg2);font:inherit;font-size:13.5px;color:var(--text);cursor:pointer}
  .nf-filtres-bascule:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  .nf-filtres-bascule[aria-expanded="true"]{border-color:var(--accent)}
  .nf-filtres-resume{font-weight:600;color:var(--accent)}
  .nf-filtres-corps{display:none;margin-top:10px;padding:12px 8px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r)}
  .nf-filtres-corps.ouvert{display:block}
}
@media (max-width:560px){
  .nf-barre{flex-direction:column;align-items:stretch;gap:6px}
  .nf-statut{flex:1 1 0;justify-content:center;padding:10px 6px;font-size:13.5px}
  .nf-outils{padding:4px 0 10px}
  .nf-outils .btn{flex:1 1 auto;justify-content:center;white-space:normal;text-align:center}
  .nf-ligne{gap:10px;padding:12px 8px 12px 8px}
  .nf-ic{display:none}
  .nf-l1{flex-direction:column;gap:1px}
  /* Les actions s'empilent à droite : elles ne prennent qu'une colonne de 32 px au texte, et restent
     visibles (sur un téléphone, rien ne se survole). */
  .nf-actions{flex-direction:column;opacity:1;margin:-4px -2px 0 0}
}