/* ════════════════════════════════════════════════════════════════════════
   FINITION — couche transverse appliquée à TOUTES les pages du portail.
   Le portail interroge Odoo (jusqu'à ~1 s) : sans retour visuel, l'attente
   passe pour de la lenteur. On rend l'état du système lisible, et on soigne
   les moments de transition. Chargée en dernier.
   ════════════════════════════════════════════════════════════════════════ */

/* ─── Barre de progression de navigation ──────────────────────────────── */
.nav-progress {
  position: fixed; top: 0; left: 0; height: 2.5px; width: 0;
  background: linear-gradient(90deg, var(--odoo-teal, #017E84), #00A09D);
  z-index: 9999; opacity: 0; pointer-events: none;
  box-shadow: 0 0 8px rgba(0, 160, 157, .5);
  transition: width .25s ease, opacity .2s ease;
}
.nav-progress.on { opacity: 1; }

/* ─── Boutons occupés : le clic est pris en compte, visiblement ───────── */
.is-busy {
  position: relative; pointer-events: none;
  color: transparent !important;
}
.is-busy::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  color: #fff; animation: spin .6s linear infinite;
}
.btn-ghost.is-busy::after, .stk-btn--ghost.is-busy::after { color: #6B7280; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ─── Messages flash : entrée franche, sortie discrète ────────────────── */
.flash {
  animation: flashIn .32s cubic-bezier(.22,.61,.36,1) backwards;
  transition: opacity .4s ease, transform .4s ease, margin .4s ease, max-height .4s ease;
  overflow: hidden;
}
@keyframes flashIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}
.flash.fading { opacity: 0; transform: translateY(-6px); max-height: 0; margin-bottom: 0; }

/* ─── Accessibilité clavier : on doit toujours voir où l'on est ──────── */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--odoo-purple, #714B67);
  outline-offset: 2px;
  border-radius: 4px;
}
/* Sauter la navigation : premier élément atteint au clavier */
.skip-link {
  position: absolute; left: -9999px; top: 8px; z-index: 10000;
  background: var(--odoo-purple, #714B67); color: #fff;
  padding: 9px 16px; border-radius: 8px; font-size: 13px; font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { left: 8px; }

/* ─── Liens de navigation : léger déplacement, pas de saut ────────────── */
.rail__link { transition: background .16s ease, color .16s ease, transform .16s ease; }
.rail__link:hover { transform: translateX(1px); }
.rail__link.active { position: relative; }
.rail__link.active::before {
  content: ""; position: absolute; left: -10px; top: 6px; bottom: 6px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--odoo-teal, #017E84);
}

/* ─── Tables : la ligne survolée se détache sans bouger la grille ─────── */
table.gn tbody tr { transition: background .14s ease; }

/* ─── Cartes KPI : réaction douce au survol, cohérente avec .stk-tile ─── */
.kpi-card, .kpi-hero, .alert-card {
  transition: transform .22s cubic-bezier(.22,.61,.36,1), box-shadow .22s ease;
}
.kpi-card:hover { transform: translateY(-2px); }

/* ─── Boutons : appui perceptible ─────────────────────────────────────── */
.btn { transition: transform .12s ease, background .15s ease, border-color .15s ease, filter .15s ease; }
.btn:active { transform: translateY(1px); }

/* ─── Impression : sortir le contenu, pas l'interface ─────────────────── */
@media print {
  .nav-progress, .skip-link { display: none !important; }
}

/* ─── Respect du réglage « animations réduites » ──────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .nav-progress { transition: none; }
  .flash { animation: none; transition: none; }
  .rail__link:hover, .kpi-card:hover { transform: none; }
  .is-busy::after { animation: none; }
}