/* ============================================================
   ABSTRICT · Mobile + Accessibilité
   Chargé APRÈS design-v5.css → gagne la cascade.
   Responsive complet + améliorations d'accessibilité.
   ============================================================= */

/* === Contraste (WCAG AA — texte secondaire lisible) === */
:root { --text-muted: #6b6b76; }
body.dark { --text-muted: #9a9aa3; }

/* === Général === */
html { scroll-behavior: smooth; }
body { -webkit-tap-highlight-color: transparent; }
section[id] { scroll-margin-top: 68px; } /* ancres sous la topbar sticky */
main:focus { outline: none; }

/* === Skip link (accessibilité clavier) === */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 10001;
  background: var(--accent); color: #fff;
  padding: 12px 18px; border-radius: 0 0 var(--radius-lg) 0;
  font-weight: 600; font-size: 14px; text-decoration: none;
  box-shadow: var(--shadow-md);
}
.skip-link:focus { left: 0; }

/* === Focus visible (renforce la règle v5) === */
*:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius);
}

/* === Topbar : actions + bouton menu mobile === */
.topbar-actions { display: flex; gap: 8px; align-items: center; }
@media (min-width: 901px) { .topnav { margin-left: auto; } } /* desktop : liens à droite */
.nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 40px; height: 40px; border: 1px solid var(--border);
  background: transparent; color: var(--text-secondary);
  border-radius: var(--radius); cursor: pointer;
  transition: color 150ms var(--ease), border-color 150ms var(--ease);
}
.nav-toggle:hover { color: var(--text); border-color: var(--text-muted); }

/* === Navigation mobile par pages (app-like) — cachée sur desktop === */
.bottom-nav {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--border);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  justify-content: space-around;
  box-shadow: 0 -4px 24px rgba(0,0,0,.06);
}
.bottom-tab {
  flex: 1; max-width: 120px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 10px; font-weight: 500;
  padding: 6px 4px; border-radius: var(--radius);
  min-height: 48px;
  transition: color 150ms var(--ease), transform 150ms var(--ease);
}
.bottom-tab svg { width: 20px; height: 20px; }
.bottom-tab.active { color: var(--accent); }
.bottom-tab:active { transform: scale(.94); }
.bottom-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* === Tableau comparatif : scroll horizontal === */
#compareTableContainer { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.compare-table { min-width: 520px; }

/* ============================================================
   MOBILE ≤ 900px
   ============================================================ */
@media (max-width: 900px) {
  .topbar { height: 56px; padding: 0 12px; }
  .nav-toggle { display: flex; }
  .bottom-nav { display: flex; }

  /* App-like : une seule page visible à la fois */
  .builder, #performance, #library { display: none; }
  .builder .sidebar, .builder .picker { display: none; }
  body[data-page="catalog"] .builder      { display: grid; }
  body[data-page="catalog"] .picker       { display: block; }
  body[data-page="config"]  .builder      { display: grid; }
  body[data-page="config"]  .sidebar      { display: block; }
  body[data-page="perf"]    #performance  { display: block; }
  body[data-page="lib"]     #library      { display: block; }
  main { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .footer { display: none; }

  /* Nav en tiroir sous la topbar */
  .topnav {
    position: absolute; top: 56px; left: 0; right: 0; z-index: 90;
    display: none; flex-direction: column; align-items: stretch;
    gap: 2px; margin: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    padding: 10px;
  }
  .topnav.open { display: flex; }
  .topnav.open a {
    display: block !important;
    padding: 12px 14px; border-radius: var(--radius);
    font-size: 14px;
  }
  .topnav.open a.active { background: var(--bg-alt); color: var(--text); }
  .theme-toggle { width: 40px; height: 40px; }

  /* Builder : le catalogue d'abord, la config ensuite */
  .builder { grid-template-columns: 1fr; }
  .picker { order: -1; padding: var(--space-4) var(--space-3); min-width: 0; }
  .sidebar {
    order: 2; width: 100%; position: static; height: auto;
    max-height: none; overflow: visible;
    padding: var(--space-4);
    border-right: none;
  }
  .stamp { width: 56px; height: 56px; }

  /* Barre de recherche sticky, sous la topbar */
  .picker-head {
    position: sticky; top: 56px; z-index: 80;
    padding: var(--space-3) var(--space-3);
    background: var(--bg);
    border-bottom: 1px solid var(--border);
  }

  /* Cibles tactiles ≥ 44px */
  .btn { min-height: 44px; }
  .tab { min-height: 44px; }
  .filter { min-height: 40px; }
  .slot { min-height: 44px; }
  .modal-close { width: 40px; height: 40px; }

  /* Sections */
  .section-perf, .section-lib { padding: 32px 16px; }
  .perf-grid, .workload-grid, .stress-grid, .console-grid, .lib-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }
  .wizard-choices { grid-template-columns: 1fr; }

  /* Actions : 2 colonnes (tablette), primaire en pleine largeur */
  .actions { grid-template-columns: 1fr 1fr; }
  .actions .btn-primary { grid-column: 1 / -1; }
}

/* ============================================================
   MOBILE ≤ 640px
   ============================================================ */
@media (max-width: 640px) {
  /* Catalogue : 2 colonnes compactes */
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .card-ill { height: 88px; }
  .card-body { padding: 10px 12px; }
  .card-title { font-size: 12px; line-height: 1.25; }
  .card-meta { font-size: 8px; }
  .card-specs { grid-template-columns: 1fr; gap: 3px; padding-top: 8px; }
  .card-price { padding: 8px 12px; font-size: 12px; }
  .price-tier { font-size: 8px; padding: 1px 6px; }
  .card-links { flex-direction: column; align-items: stretch; gap: 6px; padding: 0 12px 10px; }
  .card-link { justify-content: center; min-height: 40px; }

  /* Modales : feuille du bas plein écran */
  .modal { padding: 0; align-items: flex-end; }
  .modal-card {
    /* !important : bat les max-width inline (ex : style="max-width:460px") */
    max-width: 100% !important; width: 100%;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    max-height: 92vh; max-height: 92dvh; overflow-y: auto;
    padding: 20px 16px calc(16px + env(safe-area-inset-bottom));
  }
  .modal-wide { max-width: 100% !important; }
  .modal-card textarea { height: 40vh !important; }

  /* Toast : pleine largeur, texte replié, au-dessus de la nav mobile */
  .toast {
    left: 16px !important; right: 16px !important;
    bottom: calc(92px + env(safe-area-inset-bottom)) !important;
    white-space: normal; text-align: center;
    transform: translateY(16px);
  }
  .toast.show { transform: translateY(0); }

  /* Multi-cart */
  .multi-cart {
    width: calc(100vw - 24px); right: 12px; left: 12px;
    bottom: calc(144px + env(safe-area-inset-bottom)); max-height: 70vh;
  }
  .multi-cart-toggle-floater { right: 16px; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 96; }

  /* Inputs 16px → évite le zoom iOS au focus */
  .picker-search input, #apiKeyInput, .modal-row input,
  .elec-settings input, textarea, .compare-select select { font-size: 16px; }

  /* Actions : retour à 1 colonne (boutons pleine largeur) */
  .actions { grid-template-columns: 1fr; }

  /* Performances */
  .perf-stat { padding: 14px 8px; }
  .perf-num { font-size: 22px; }

  /* Tier + tech chips */
  .tier-seg { font-size: 9px; letter-spacing: .2px; }
  .tech-grid { grid-template-columns: 1fr 1fr; }

  /* Comparateur */
  .compare-offer { grid-template-columns: 36px 1fr auto; gap: 6px; }
  .compare-head h3 { font-size: 14px; word-break: break-word; }

  /* Masque le watermark bas-droite (gêne le floater panier) */
  body::before { display: none; }
}

/* ============================================================
   MOBILE ≤ 380px
   ============================================================ */
@media (max-width: 380px) {
  .grid { grid-template-columns: 1fr; }
  .actions { grid-template-columns: 1fr; }
  .tech-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   ACCESSIBILITÉ — mouvement réduit
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}