/* Axper Europe — css/simple.css
   Mise en page « Simple » : mêmes couleurs et même typographie Axper, mais une interface plus posée.
   Chargé en dernier, il reprend les réglages des autres feuilles sans les modifier
   (le retirer de index.html rend l'ancienne mise en page).

   - menu à plat, collé au bord gauche (plus d'îlot flottant) ;
   - barre du haut intégrée à la page ;
   - blocs posés sur la page : un fin contour au lieu des ombres ;
   - survols calmes : plus de blocs qui se soulèvent ni d'icônes qui tournent ;
   - moins de clignotements (pastilles et points d'alerte fixes). */

:root {
  --gap: 16px;
  --side-w: 244px;
  --radius: 16px;
  --radius-lg: 18px;
  --spring: cubic-bezier(.3, 1.2, .5, 1); /* rebond plus discret */
}

/* ============ Menu : bande fixe collée au bord ============ */
.sidebar {
  inset: 0 auto 0 0; border-radius: 0; box-shadow: none; padding: 22px 14px 14px;
  border-right: 1px solid var(--line);
}
.main { margin-left: var(--side-w); padding: 0 32px 44px; }
.nav-collapse { top: 28px; left: calc(var(--side-w) - 46px); }
html.nav-collapsed .nav-collapse { left: calc((var(--side-w) - 32px) / 2); }

.sidebar nav { gap: 2px; margin-top: 16px; }
.nav-section { margin: 18px 13px 6px; }
.section-dot::after { display: none; } /* points de rubrique fixes */
.nav-link { height: 40px; }
.nav-link:hover .ico, .nav-link:active { transform: none; }
.nav-link b, .nav-link b.urgent { animation: none; }

/* ============ Barre du haut : intégrée, pleine largeur ============ */
.topbar {
  position: sticky; top: 0; z-index: 20; min-height: 64px; margin: 0 -32px 8px; padding: 12px 32px;
  background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft);
}
.topbar-button, .theme-toggle { box-shadow: none; border: 1px solid var(--line); }
.topbar-button:hover { transform: none; background: var(--surface-2); }
.page-header { margin-top: 18px; }

/* ============ Boutons : moins de relief ============ */
.primary { box-shadow: none; }
.primary:hover:not(:disabled), .danger-button:hover { transform: none; }
.primary:hover .ico { transform: none; }
.secondary { box-shadow: none; border: 1px solid var(--line); }
.secondary:hover:not(:disabled) { transform: none; background: var(--surface-2); }
:is(.surface, .dash-card, .ship-card, dialog, .auth-card) :is(.secondary, .icon-button) { border: 0; }
.icon-button { box-shadow: none; border: 1px solid var(--line-soft); }
.icon-button:hover:not(:disabled) { transform: none; }

/* ============ Blocs posés sur la page ============ */
.metric, .surface, .dash-card, .ship-card, .next-card, .notice-banner { box-shadow: none; }
.metric, .surface, .dash-card, .ship-card { border: 1px solid var(--line); }
.metric { transition: border-color .25s, background-color .35s var(--ease); }
.metric:hover { transform: none; border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
a.metric:active, button.metric:active { transform: none; background: var(--surface-2); }
.next-card, .notice-banner { transition: filter .2s; }
.next-card:hover, .notice-banner:hover { transform: none; filter: brightness(1.03); }
.dash-item:hover, .day-chip:hover, .day-event:hover { transform: none; }
.dash-card-head a:hover .ico, .notice-banner:hover .notice-cta .ico { transform: translateX(2px); }

/* Vue d'ensemble allégée : lien « + N autres » sous une liste raccourcie */
.dash-more {
  display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; margin-top: 8px; padding: 6px 10px; border-radius: 10px;
  font-size: 13px; font-weight: 600; color: var(--muted); text-decoration: none; transition: background-color .2s, color .2s;
}
.dash-more:hover { background: var(--surface-2); color: var(--text); }
.dash-more .ico { transition: transform .3s var(--ease); }
.dash-more:hover .ico { transform: translateX(2px); }

/* Tableaux : le survol colore la ligne, sans faire bouger les icônes */
tbody tr:hover .product-icon, tbody tr:hover .site-avatar, tbody tr:hover .avatar-badge { transform: none; }
.search:focus-within .ico { transform: none; }

/* Pastilles et points d'alerte : fixes (la couleur suffit à attirer l'œil) */
.pill.empty::before, .dot.late, .row-tag.late .ico, .day-now::after { animation: none; }

/* Fenêtres : apparition en fondu, sans rebond */
dialog[open] { animation: pop .3s var(--ease); }

/* ============ Mobile ============ */
@media (max-width: 900px) {
  :root { --side-w: 0px; --gap: 12px; }
  .sidebar { border-right: 0; box-shadow: var(--shadow-lg); border-radius: 0 20px 20px 0; }
  .main { padding: 0 16px 28px; }
  .topbar { margin: 0 -16px 4px; padding: 10px 16px; min-height: 0; }
  .menu-toggle { box-shadow: none; border: 1px solid var(--line); }
}