/**
 * _notifications-cloche.css
 * ─────────────────────────────────────────────────────────────
 * La cloche du bandeau et son panneau déroulant.
 * Gabarit : templates/base/_cloche_notifications.html.twig
 * Logique : public/js/notifications.js
 *
 * AUCUNE COULEUR EN DUR DANS CE FICHIER, et ce n'est pas une coquetterie.
 * Le mode sombre du projet bascule en redéfinissant des variables sur
 * `html[data-theme="dark"] body`. Un `#fff` écrit ici resterait blanc en
 * sombre — un panneau blanc éclatant au milieu d'une page navy. Les tokens
 * `--notif-*` sont déclarés en clair dans public/css/base/_variables.css et
 * redéfinis dans public/css/mode_sombre.css. Un test le vérifie :
 * tests/Controller/NotificationClocheTest.php.
 *
 * DEUX VARIANTES, UNE SEULE DIFFÉRENCE : OÙ S'OUVRE LE PANNEAU.
 *   .cloche--sidebar → barre latérale de l'app, colonne verticale à gauche :
 *                      le panneau part vers la DROITE, et s'ouvre VERS LE
 *                      HAUT (ancré par le bas du bouton) pour ne pas
 *                      recouvrir le contenu qui suit la cloche.
 *   .cloche--topbar  → topbar landing, barre horizontale : le panneau
 *                      tombe SOUS la cloche, aligné à droite.
 */

.cloche {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

/* LA REGLE SANS LAQUELLE TOUT LE RESTE MENT.
   Le navigateur masque un élément `hidden` par une règle de sa feuille par
   défaut, `[hidden] { display: none }` — que N'IMPORTE QUELLE déclaration
   d'auteur sur `display` bat. Un `display: inline-flex` posé ici suffit donc
   à rendre visible une cloche que le gabarit livre `hidden` et que le
   JavaScript n'a jamais dévoilée : la promesse « pas de routeur, pas de
   cloche » tomberait en silence, avec un lint vert et des tests verts.
   Même chose pour le panneau, dont `ouvrir()` / `fermer()` ne font que
   basculer `hidden`. Précédent maison : public/css/multi-questions.css:349
   et :431. */
.cloche[hidden],
.cloche__panneau[hidden] {
  display: none;
}

.cloche--sidebar {
  margin: 4px auto 0;
  align-self: center;
}

/* ── Le bouton ────────────────────────────────────────────────── */
.cloche__bouton {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--notif-icon);
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
}

.cloche__bouton:hover,
.cloche__bouton[aria-expanded="true"] {
  background: var(--notif-item-hover-bg);
  color: var(--notif-text);
}

.cloche__bouton .material-symbols-outlined {
  font-size: 20px;
  line-height: 1;
}

/* ── La pastille ──────────────────────────────────────────────── */
/* Elle est en `hidden` tant qu'il n'y a rien à annoncer : « 0 non lue »
   se dit en n'affichant rien du tout, jamais en affichant « 0 ». */
.cloche__pastille {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--notif-badge-bg);
  color: var(--notif-badge-ink);
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  box-sizing: border-box;
  pointer-events: none;
}

/* ── Le panneau ───────────────────────────────────────────────── */
.cloche__panneau {
  position: absolute;
  z-index: 200; /* le header de l'app est à 100 */
  width: 320px;
  max-width: min(320px, calc(100vw - 24px));
  max-height: 70vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  background: var(--notif-panel-bg);
  border: 1px solid var(--notif-panel-border);
  border-radius: var(--radius, 14px);
  box-shadow: var(--notif-panel-shadow);
  color: var(--notif-text);
  text-align: left;
}

/* Barre latérale verticale : le panneau sort sur le côté, et s'ouvre vers
   le haut (ancré sur le bas du bouton) plutôt que vers le bas, pour ne pas
   recouvrir le contenu de la page sous la cloche. */
.cloche--sidebar .cloche__panneau {
  bottom: 0;
  left: calc(100% + 10px);
}

/* Topbar horizontale : le panneau tombe dessous, aligné à droite pour ne
   jamais déborder du bord de la fenêtre. */
.cloche--topbar .cloche__panneau {
  top: calc(100% + 10px);
  right: 0;
}

/* ── En-tête du panneau ───────────────────────────────────────── */
.cloche__entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--notif-panel-border);
}

.cloche__titre {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--notif-text);
}

.cloche__entete-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cloche__lien-action {
  border: none;
  background: transparent;
  padding: 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--notif-unread-marker);
  cursor: pointer;
  text-align: right;
}

.cloche__lien-action:hover {
  text-decoration: underline;
}

/* ── La liste ─────────────────────────────────────────────────── */
.cloche__liste {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cloche__item {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-bottom: 1px solid var(--notif-panel-border);
  background: transparent;
  color: var(--notif-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.cloche__item:hover {
  background: var(--notif-item-hover-bg);
}

/* Le liseré gauche est le SEUL signal « non lue ». Pas de gras seul :
   sur un panneau de dix lignes on ne distingue plus rien. */
.cloche__item--non-lue {
  border-left: 3px solid var(--notif-unread-marker);
  padding-left: 9px;
}

.cloche__item-titre {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--notif-text);
}

/* Deux lignes au maximum dans la liste : le panneau doit rester scannable.
   `-webkit-box` est le seul moyen largement supporté de tronquer sur un
   nombre de lignes ; le clic déplie (voir .cloche__item--deplie). */
.cloche__item-message {
  display: -webkit-box;
  margin-top: 2px;
  font-size: 0.78rem;
  color: var(--notif-text-muted);
  overflow: hidden;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Le clic sur une notification SANS lien déplie son message en entier,
   plutôt que de ne rien faire du tout. */
.cloche__item--deplie .cloche__item-message {
  display: block;
  -webkit-line-clamp: none;
  line-clamp: none;
  overflow: visible;
}

.cloche__item-date {
  display: block;
  margin-top: 4px;
  font-size: 0.7rem;
  color: var(--notif-text-muted);
}

/* « Cet élément n'existe plus » : la cible a disparu entre-temps. Discret,
   dans la ligne, jamais une page 404 nue. */
.cloche__item-avertissement {
  display: block;
  margin-top: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--notif-badge-bg);
}

/* ── Vide et pied ─────────────────────────────────────────────── */
.cloche__vide {
  margin: 0;
  padding: 18px 12px;
  text-align: center;
  font-size: 0.8rem;
  color: var(--notif-text-muted);
}

.cloche__pied {
  display: block;
  padding: 10px 12px;
  border-top: 1px solid var(--notif-panel-border);
  font-size: 0.78rem;
  font-weight: 600;
  text-align: center;
  color: var(--notif-unread-marker);
  text-decoration: none;
}

.cloche__pied:hover {
  background: var(--notif-item-hover-bg);
}

/* ── Petits écrans ────────────────────────────────────────────── */
/* Sous 640px la sidebar passe en barre du bas : un panneau qui sort « à
   droite » finirait hors écran. On le recentre. */
@media (max-width: 640px) {
  .cloche--sidebar .cloche__panneau {
    top: auto;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
  }
}