/* ===========================================================
   Revicard, back-office : les composants qui manquaient
   Modale, confirmation, menu contextuel, panneau de
   notifications, menu de compte, etats vide, chargement et
   erreur, message de succes.

   POURQUOI CE FICHIER EXISTE
   Les ecrans avaient l'air finis et ne l'etaient pas : plus de
   quatre-vingts elements cliquables ne menaient nulle part. Une
   cloche qui n'ouvre rien, des boutons Plus d'actions muets, et
   aucune confirmation avant un geste destructif. Ces meubles
   sont ecrits une seule fois ici et se posent sur tous les
   ecrans, comme le shell partage.

   Aucun jeton nouveau : tout vient de admin-tokens.css.
   =========================================================== */

/* ------------------------------------------------- le voile
   Un fond assombri et floute, jamais une couleur pleine : le
   contexte reste lisible derriere, on n'a pas l'impression
   d'avoir change de page. */
.voile{
  position:fixed;inset:0;z-index:60;
  background:rgba(12,30,60,.34);
  -webkit-backdrop-filter:blur(6px) saturate(120%);backdrop-filter:blur(6px) saturate(120%);
  display:grid;place-items:center;padding:24px;
  opacity:0;pointer-events:none;transition:opacity .18s var(--ease);
}
.voile.ouvert{opacity:1;pointer-events:auto}

/* ------------------------------------------------- modale */
.modale{
  width:min(560px,100%);max-height:calc(100vh - 48px);overflow:auto;
  border-radius:var(--radius);
  background:var(--glass-dense);
  -webkit-backdrop-filter:var(--blur-strong);backdrop-filter:var(--blur-strong);
  border:1px solid var(--glass-stroke);
  box-shadow:var(--shadow-panel),var(--glass-spec),var(--glass-inner);
  transform:translateY(10px) scale(.985);
  transition:transform .2s var(--ease);
}
.voile.ouvert .modale{transform:none}
.modale.large{width:min(820px,100%)}

.modale-tete{display:flex;align-items:flex-start;gap:14px;padding:20px 22px 0}
.modale-tete .sceau{
  width:40px;height:40px;border-radius:13px;flex:none;display:grid;place-items:center;
  color:var(--royal);background:rgba(43,80,226,.12);border:1px solid rgba(43,80,226,.2);
}
.modale-tete .sceau svg{width:19px;height:19px}
.modale-tete .sceau.danger{color:var(--danger);background:var(--danger-tint);border-color:rgba(208,70,59,.26)}
.modale-tete .sceau.attention{color:var(--draft);background:var(--draft-tint);border-color:rgba(186,117,23,.28)}
.modale-tete h2{font-family:var(--fd);font-size:18px;font-weight:600;letter-spacing:-.02em;line-height:1.25}
.modale-tete p{font-size:13px;color:var(--ink-2);margin-top:6px;line-height:1.6}
.modale-fermer{
  margin-left:auto;width:32px;height:32px;border-radius:10px;flex:none;
  display:grid;place-items:center;color:var(--ink-3);
  background:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.7);
}
.modale-fermer svg{width:16px;height:16px}
.modale-fermer:hover{color:var(--danger);border-color:rgba(208,70,59,.3)}

.modale-corps{padding:16px 22px 4px;font-size:13.5px;color:var(--ink-2);line-height:1.65}
.modale-corps .rappel{
  margin-top:12px;padding:12px 14px;border-radius:var(--radius-sm);
  background:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.7);
  font-size:12.5px;color:var(--ink-3);
}
.modale-pied{display:flex;justify-content:flex-end;gap:10px;padding:18px 22px 20px;flex-wrap:wrap}
.btn-danger{
  background:linear-gradient(135deg,#C0392E,var(--danger));color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 10px 22px -8px rgba(208,70,59,.6);
}
.btn-danger:hover{transform:translateY(-1px)}

/* ------------------------------------------------- menu contextuel
   Ancre sous le bouton qui l'ouvre. Il se referme au clic
   ailleurs, a la touche Echap, et au defilement. */
.menu{
  position:absolute;z-index:70;min-width:212px;padding:6px;
  border-radius:var(--radius-sm);
  background:var(--glass-dense);
  -webkit-backdrop-filter:var(--blur-strong);backdrop-filter:var(--blur-strong);
  border:1px solid var(--glass-stroke);
  box-shadow:var(--shadow-panel),var(--glass-spec);
  opacity:0;transform:translateY(-4px);pointer-events:none;
  transition:opacity .14s var(--ease),transform .14s var(--ease);
}
.menu.ouvert{opacity:1;transform:none;pointer-events:auto}
.menu-titre{padding:8px 10px 5px;font-size:10px;text-transform:uppercase;
  letter-spacing:.1em;color:var(--ink-3);font-weight:600}
.menu-item{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  padding:9px 10px;border-radius:9px;border:0;background:none;
  font-size:13px;color:var(--ink-2);
}
.menu-item svg{width:15px;height:15px;color:var(--ink-3);flex:none}
.menu-item:hover{background:rgba(255,255,255,.6);color:var(--royal)}
.menu-item:hover svg{color:var(--royal)}
.menu-item.danger{color:var(--danger)}
.menu-item.danger svg{color:var(--danger)}
.menu-item.danger:hover{background:var(--danger-tint);color:var(--danger)}
.menu-trait{height:1px;margin:5px 8px;background:rgba(12,30,60,.09)}

/* ------------------------------------------------- panneau
   Notifications et menu de compte partagent la meme boite. */
.flottant{
  position:absolute;z-index:70;width:min(360px,calc(100vw - 32px));
  border-radius:var(--radius);overflow:hidden;
  background:var(--glass-dense);
  -webkit-backdrop-filter:var(--blur-strong);backdrop-filter:var(--blur-strong);
  border:1px solid var(--glass-stroke);
  box-shadow:var(--shadow-panel),var(--glass-spec);
  opacity:0;transform:translateY(-6px);pointer-events:none;
  transition:opacity .16s var(--ease),transform .16s var(--ease);
}
.flottant.ouvert{opacity:1;transform:none;pointer-events:auto}
.flottant-tete{display:flex;align-items:center;gap:10px;padding:14px 16px;
  border-bottom:1px solid rgba(12,30,60,.08)}
.flottant-tete h3{font-family:var(--fd);font-size:14px;font-weight:600;letter-spacing:-.01em}
.flottant-tete .compte{margin-left:auto;font-family:var(--fm);font-size:10.5px;font-weight:600;
  color:var(--royal);background:rgba(43,80,226,.12);border:1px solid rgba(43,80,226,.22);
  padding:2px 8px;border-radius:8px}
.flottant-corps{max-height:min(60vh,420px);overflow:auto}
.flottant-pied{padding:11px 16px;border-top:1px solid rgba(12,30,60,.08)}
.flottant-pied a{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;
  font-weight:550;color:var(--royal)}
.flottant-pied a svg{width:14px;height:14px;stroke-width:2.4;transition:transform .18s}
.flottant-pied a:hover svg{transform:translateX(3px)}

.notif{display:flex;align-items:flex-start;gap:11px;padding:12px 16px;width:100%;
  text-align:left;background:none;border:0;border-bottom:1px solid rgba(12,30,60,.06)}
.notif:last-child{border-bottom:none}
.notif:hover{background:rgba(255,255,255,.5)}
.notif .ic{width:30px;height:30px;border-radius:10px;flex:none;display:grid;place-items:center}
.notif .ic svg{width:15px;height:15px}
.notif.info .ic{background:rgba(43,80,226,.12);color:var(--royal)}
.notif.ok .ic{background:var(--ok-tint);color:var(--ok)}
.notif.attention .ic{background:var(--draft-tint);color:var(--draft)}
.notif.danger .ic{background:var(--danger-tint);color:var(--danger)}
.notif .t{flex:1;min-width:0}
.notif .t b{display:block;font-size:13px;font-weight:550;color:var(--ink);line-height:1.35}
.notif .t small{display:block;font-size:11.5px;color:var(--ink-3);margin-top:2px;line-height:1.5}
.notif .quand{font-family:var(--fm);font-size:10.5px;color:var(--ink-3);flex:none;padding-top:2px}
/* une notification non lue se signale par un point, pas par un fond criard */
.notif .neuf{width:7px;height:7px;border-radius:50%;background:var(--royal);flex:none;margin-top:9px}

/* la pastille du bouton cloche ne s'affiche que s'il y a vraiment quelque chose */
.icon-btn .dot{display:none}
.icon-btn[data-neuf] .dot{display:block}

/* ------------------------------------------------- menu de compte */
.compte-tete{display:flex;align-items:center;gap:12px;padding:16px}
.compte-tete .av{
  width:40px;height:40px;border-radius:13px;flex:none;display:grid;place-items:center;
  font-family:var(--fd);font-weight:600;font-size:13px;color:#fff;
  background:linear-gradient(160deg,var(--royal-soft),var(--royal));
}
.compte-tete .qui b{display:block;font-size:13.5px;font-weight:600}
.compte-tete .qui small{display:block;font-size:11.5px;color:var(--ink-3);margin-top:1px}
.compte-tete .qui .adresse{font-family:var(--fm);font-size:10.5px;color:var(--ink-3);margin-top:3px}

/* ------------------------------------------------- etats
   Une liste vide, une page qui charge et une page en erreur ne
   doivent jamais etre un ecran blanc : chacune se dit. */
.etat-page{display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:52px 24px;max-width:420px;margin:0 auto}
.etat-page .sceau{
  width:56px;height:56px;border-radius:18px;display:grid;place-items:center;
  color:var(--royal);background:rgba(43,80,226,.10);border:1px solid rgba(43,80,226,.18);
  margin-bottom:16px;
}
.etat-page .sceau svg{width:24px;height:24px}
.etat-page.erreur .sceau{color:var(--danger);background:var(--danger-tint);border-color:rgba(208,70,59,.26)}
.etat-page h3{font-family:var(--fd);font-size:16.5px;font-weight:600;letter-spacing:-.015em}
.etat-page p{font-size:13px;color:var(--ink-3);margin-top:8px;line-height:1.6}
.etat-page .actions{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap;justify-content:center}
.etat-page code{font-family:var(--fm);font-size:11.5px;background:rgba(12,30,60,.06);
  padding:2px 7px;border-radius:6px;color:var(--ink-2)}

/* chargement : des blocs qui respirent, pas un tourniquet */
.squelette{display:flex;flex-direction:column;gap:12px;padding:18px 20px}
.squelette .barre{height:14px;border-radius:7px;
  background:linear-gradient(90deg,rgba(12,30,60,.07),rgba(12,30,60,.13),rgba(12,30,60,.07));
  background-size:220% 100%;animation:respire 1.4s ease-in-out infinite}
.squelette .barre.courte{width:38%}
.squelette .barre.moyenne{width:64%}
@keyframes respire{
  0%{background-position:120% 0}
  100%{background-position:-120% 0}
}
@media (prefers-reduced-motion:reduce){
  .squelette .barre{animation:none;background:rgba(12,30,60,.1)}
}

/* ------------------------------------------------- messages
   Un geste qui a abouti se dit, brievement, en bas a droite. */
.messages{position:fixed;right:20px;bottom:20px;z-index:80;
  display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.message{
  display:flex;align-items:center;gap:11px;padding:12px 16px;
  border-radius:var(--radius-sm);max-width:380px;
  background:var(--glass-dense);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:1px solid var(--glass-stroke);
  box-shadow:var(--shadow-panel),var(--glass-spec);
  font-size:13px;color:var(--ink);
  opacity:0;transform:translateY(8px);transition:.2s var(--ease);
}
.message.ouvert{opacity:1;transform:none}
.message svg{width:17px;height:17px;flex:none}
.message.ok svg{color:var(--ok)}
.message.danger svg{color:var(--danger)}
.message.info svg{color:var(--royal)}

/* ------------------------------------------------- rien ne defile sous le voile */
body.fige{overflow:hidden}