/* =================================================================
   flyout-panel.css - Grand panneau flottant ancre a un coin

   Source du pattern : CRM app.js toggleSearchMail() / searchMailPanel
   (lignes 240-271) - le panneau de recherche de courriels Outlook.
   Repris fidelement : position fixed ancree haut-droite, largeur ~700px,
   max-height 80vh, tete fixe + corps scrollable. Adapte au socle : fond
   glass (--bg-elevated + blur, comme modal.css), variables du socle.

   Different de modal.css (overlay centre plein ecran, bloquant) et de
   popover.css (petit, ancre a un trigger). Le flyout-panel est un grand
   panneau autonome ancre a un coin de l'ecran, non bloquant.

   Structure HTML :
     <div class="flyout-panel" id="monPanneau">
       <div class="flyout-panel-head">
         <span class="flyout-panel-title">Recherche de courriels</span>
         <button class="flyout-panel-close" title="Fermer">&#x2715;</button>
       </div>
       <div class="flyout-panel-tools">          <!-- optionnel : champs/filtres fixes -->
         <input type="text" placeholder="...">
         <button class="btn btn-sm">Rechercher</button>
       </div>
       <div class="flyout-panel-body">
         ... contenu scrollable ...
       </div>
     </div>

   Ouverture : ajouter la classe .open (toggle en JS).
   Ancrage : .flyout-left pour ancrer a gauche au lieu de droite.
   ================================================================= */

.flyout-panel {
  position: fixed;
  top: 64px;
  right: 12px;
  width: 700px;
  max-width: calc(100vw - 24px);
  max-height: 80vh;
  display: none;
  flex-direction: column;
  overflow: hidden;
  background:
    radial-gradient(circle at 70% 10%, var(--accent-glow) 0%, transparent 45%),
    var(--bg-elevated);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-dropdown);
}
.flyout-panel.open {
  display: flex;
}

/* Ancrage a gauche (defaut : a droite) */
.flyout-panel.flyout-left {
  right: auto;
  left: 12px;
}

/* === TETE : zone fixe (titre + bouton fermer) === */
.flyout-panel-head {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.flyout-panel-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.flyout-panel-close {
  margin-left: auto;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-xs);
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  transition: var(--transition-norm);
  flex-shrink: 0;
}
.flyout-panel-close:hover {
  border-color: var(--error);
  color: var(--error-text);
}

/* === OUTILS : zone fixe optionnelle sous la tete (champs, filtres) === */
.flyout-panel-tools {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

/* === CORPS : zone scrollable === */
.flyout-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--gap-md) 16px;
}