/* ============================================================
   OSAA Group — enhancements.css
   Améliorations purement visuelles, superposées aux styles
   existants de chaque page. Aucun id/classe n'est renommé,
   aucune logique JS n'est modifiée. Chargé APRÈS le <style>
   inline afin de primer à spécificité égale.
   ============================================================ */

/* ---------- Réglages de mouvement ---------- */
:root{
  --ease-out: cubic-bezier(.22,.61,.36,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --dur: .18s;
}

/* Rendu du texte un peu plus net */
body{ text-rendering:optimizeLegibility; }

/* Barres de défilement plus discrètes/cohérentes */
::-webkit-scrollbar-thumb{ background:#C7CFD6; border-radius:8px; transition:background var(--dur) ease; }
::-webkit-scrollbar-thumb:hover{ background:#AAB4BE; }
* { scrollbar-width:thin; }

/* Sélection de texte aux couleurs de la marque */
::selection{ background:rgba(184,90,44,.22); color:var(--ink); }

/* ============================================================
   1. ACCESSIBILITÉ — focus clavier visible et cohérent
   ============================================================ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.nav-item:focus-visible,
.toolbar-btn:focus-visible,
.modal-btn:focus-visible,
.modal-close:focus-visible,
.topbar-bell:focus-visible,
.topbar-user:focus-visible,
.section-link:focus-visible,
.mission-mini:focus-visible,
.site-card:focus-visible,
.report-card:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--rust);
  outline-offset:2px;
  border-radius:6px;
}
/* Champs de saisie : anneau doux plutôt qu'un simple contour */
.login-input:focus-visible,
.modal-input:focus-visible,
.settings-input:focus-visible{
  outline:none;
  border-color:var(--rust);
  box-shadow:0 0 0 3px rgba(184,90,44,.18);
}

/* ============================================================
   2. TRANSITIONS DE BASE sur les éléments interactifs
   ============================================================ */
.nav-item,
.toolbar-btn,
.modal-btn,
.modal-close,
.topbar-bell,
.topbar-user,
.section-link,
.kpi-card,
.card,
.site-card,
.report-card,
.alert-card,
.chart-card,
.mission-mini,
.stat-strip,
.country-badge,
.role-tag,
.login-btn,
.login-input,
.modal-input,
.settings-input,
.toggle,
table tbody tr{
  transition:
    background-color var(--dur) ease,
    border-color var(--dur) ease,
    color var(--dur) ease,
    box-shadow var(--dur) var(--ease-out),
    transform var(--dur) var(--ease-out);
}

/* ============================================================
   3. NAVIGATION LATÉRALE — retour visuel plus riche
   ============================================================ */
.nav-item{ position:relative; }
.nav-item:hover{ transform:translateX(2px); }
.nav-item .icon{ transition:color var(--dur) ease, transform var(--dur) var(--ease-out); }
.nav-item:hover .icon{ transform:scale(1.08); }
.nav-item.active::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:var(--rust); box-shadow:0 0 10px rgba(184,90,44,.55);
}
.sidebar-mark{ transition:transform var(--dur) var(--ease-spring), box-shadow var(--dur) ease; }
.sidebar-brand:hover .sidebar-mark{ transform:rotate(-6deg) scale(1.05); }

/* ============================================================
   4. BOUTONS & PUCES — survol / clic
   ============================================================ */
.toolbar-btn:hover{ background:var(--surface-2); border-color:var(--blueprint-2); color:var(--ink); }
.toolbar-btn:active{ transform:translateY(1px); }
.toolbar-btn.primary:hover{ background:var(--rust-dark); border-color:var(--rust-dark); color:#fff; }

.modal-btn:hover{ filter:brightness(.96); }
.modal-btn.primary:hover{ background:var(--rust-dark); }
.modal-btn:active{ transform:translateY(1px); }
.modal-close:hover{ background:var(--danger-tint); color:var(--danger); }

.login-btn:hover:not(:disabled){ background:var(--rust-dark); }
.login-btn:active:not(:disabled){ transform:translateY(1px); }

.topbar-bell:hover{ background:var(--surface-2); color:var(--ink); border-color:var(--blueprint-2); }
.topbar-bell:hover .bell-dot{ animation:pulse-dot 1.4s infinite; }
.topbar-user:hover .topbar-user-avatar{ box-shadow:0 4px 12px rgba(14,32,51,.28); }

.section-link:hover{ color:var(--rust); }
.section-link .icon{ transition:transform var(--dur) var(--ease-out); }
.section-link:hover .icon{ transform:translateX(2px); }

/* ============================================================
   5. CARTES — légère élévation au survol
   ============================================================ */
.kpi-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-2px); }
.site-card:hover,
.report-card:hover,
.chart-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-2px); border-color:var(--line); }
.mission-mini{ transition:transform var(--dur) var(--ease-out), border-color var(--dur) ease, box-shadow var(--dur) ease; }
.mission-mini:hover{ transform:translateY(-1px); box-shadow:var(--shadow-sm); }
.alert-card:not(.resolved):hover{ box-shadow:var(--shadow-md); transform:translateX(2px); }
.report-thumb{ transition:transform .3s var(--ease-out); }
.report-card:hover .report-thumb{ transform:scale(1.03); }
.report-card{ overflow:hidden; }

/* Lignes de tableau : survol plus affirmé */
table tbody tr:hover{ background:var(--blueprint-tint); }

/* Bascules (toggles) : transition douce du curseur */
.toggle::after{ transition:left var(--dur) var(--ease-spring), background var(--dur) ease; }

/* ============================================================
   6. MODALES — entrée animée
   ============================================================ */
#modal-overlay{
  transition:opacity .2s ease;
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
}
#modal-overlay.actif{ animation:overlay-in .22s ease both; }
#modal-overlay.actif .modal-card{ animation:modal-in .3s var(--ease-spring) both; }
@keyframes overlay-in{ from{ opacity:0; } to{ opacity:1; } }
@keyframes modal-in{
  from{ opacity:0; transform:translateY(14px) scale(.97); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}

/* ============================================================
   7. ÉTATS DE CHARGEMENT & VIDES
   ============================================================ */
/* .empty sert à la fois de "Chargement…" et de "Aucune donnée" */
.empty{
  animation:empty-in .35s var(--ease-out) both;
  line-height:1.6;
}
/* Petit pouls sur le texte de chargement pour signaler l'activité */
.empty:not(.is-final){ position:relative; }
@keyframes empty-in{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } }

/* Utilitaire squelette réutilisable (chargement) */
.skeleton, .skeleton-line{
  background:linear-gradient(100deg, var(--surface-2) 30%, var(--line-soft) 50%, var(--surface-2) 70%);
  background-size:200% 100%;
  animation:skeleton-shimmer 1.3s ease-in-out infinite;
  border-radius:6px;
}
@keyframes skeleton-shimmer{ from{ background-position:200% 0; } to{ background-position:-200% 0; } }

/* Carte d'entrée pour l'écran de connexion (toujours visible) */
.login-card{ animation:login-in .5s var(--ease-out) both; }
@keyframes login-in{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }

/* ============================================================
   8. GRAPHIQUES (page Analytique) — respiration & lisibilité
   ============================================================ */
.chart-card{ position:relative; }
.chart-card canvas{ transition:opacity .3s ease; }
.legend-item{ transition:color var(--dur) ease, opacity var(--dur) ease; cursor:default; }
.legend-item:hover{ color:var(--ink); }
.legend-dot{ box-shadow:0 0 0 3px rgba(0,0,0,.04); }

/* ============================================================
   9. RESPECT DE prefers-reduced-motion
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .nav-item:hover,
  .kpi-card:hover,
  .site-card:hover,
  .report-card:hover,
  .chart-card:hover,
  .alert-card:not(.resolved):hover{ transform:none; }
}

/* ============================================================
   10. RESPONSIVE — tablette & mobile
   Le sidebar fixe de 238px devient une barre de navigation
   horizontale en haut ; les tableaux défilent latéralement.
   ============================================================ */
@media (max-width:860px){
  .app{ flex-direction:column; }

  .sidebar{
    width:100%; flex-direction:row; align-items:center; gap:4px;
    padding:10px 12px; overflow-x:auto; overflow-y:hidden;
    position:sticky; top:0; z-index:60;
    border-bottom:1px solid rgba(255,255,255,.1);
    -webkit-overflow-scrolling:touch;
  }
  .sidebar::-webkit-scrollbar{ height:0; }
  .sidebar-brand{
    border-bottom:none; margin-bottom:0; padding:0 12px 0 2px;
    flex-shrink:0; gap:9px;
  }
  .sidebar-sub{ display:none; }
  .nav-section-label{ display:none; }
  .sidebar-bottom, .sidebar-ruler, .sidebar-user{ display:none; }
  .nav-item{
    border-left:none !important; border-bottom:2px solid transparent;
    padding:8px 13px; white-space:nowrap; border-radius:8px 8px 0 0;
    flex-shrink:0;
  }
  .nav-item:hover{ transform:none; }
  .nav-item.active{
    border-left:none; border-bottom:2px solid var(--rust);
    background:rgba(184,90,44,.16);
  }
  .nav-item.active::before{ display:none; }

  .topbar{ padding:12px 16px; flex-wrap:wrap; gap:10px 14px; }
  .topbar-mid{ order:5; flex-basis:100%; justify-content:stretch; }
  .topbar-search{ max-width:none; }

  .content{ padding:18px 16px 56px; }

  /* Tableaux : défilement horizontal propre au lieu d'écraser */
  .card{ overflow-x:auto; }
  .card table{ min-width:560px; }

  .modal-card{ max-width:100%; }
  .stat-strip{ flex-direction:column; }
  .stat-strip > div{ border-right:none; border-bottom:1px solid var(--line); }
  .stat-strip > div:last-child{ border-bottom:none; }
}

@media (max-width:520px){
  .kpi-row{ grid-template-columns:1fr; }
  .reports-grid{ grid-template-columns:1fr; }
  .topbar-title{ font-size:16px; }
  .content{ padding:16px 12px 48px; }
}