/* ============================================================================
   DealUp — responsive.css
   Adaptations desktop large -> tablette -> mobile.
   Ordre : du plus large au plus étroit.
   ========================================================================== */

/* ---------- Desktop compact (<= 1180px) ---------- */
@media (max-width: 1180px) {
  :root { --page-x: 22px; }
  .nav__link { padding: 8px 11px; font-size: .84rem; }
  .deals-layout { grid-template-columns: 230px minmax(0, 1fr); gap: 22px; }
}

/* ---------- Tablette large (<= 1024px) ---------- */
@media (max-width: 1024px) {
  .detail { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .detail__media { aspect-ratio: 16 / 10; }
  .settings-grid { grid-template-columns: minmax(0, 1fr); }
  .grid--stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Tablette (<= 900px) : filtres en tiroir ---------- */
@media (max-width: 900px) {
  /* Six entrées de navigation : l'en-tête se resserre avant de passer en barre basse. */
  .app-header__inner { gap: 10px; }
  .nav { margin-left: 4px; gap: 0; }
  .nav__link { padding: 8px 8px; font-size: .8rem; }
  .account-name { display: none; }
  .deals-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }

  .filters-toggle { display: inline-flex; }

  /* Hors ouverture explicite, le panneau est masqué sur ces tailles. */
  .filters-panel { display: none; }
  .filters-panel.is-open {
    display: block;
    position: fixed; z-index: 95;
    inset: 12px 12px 12px auto;
    top: 12px !important;
    width: min(340px, calc(100vw - 24px));
    max-height: none;
    overflow-y: auto;
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-lg);
    padding: 6px 22px 22px;
    animation: panel-in var(--t-slow) var(--ease) both;
  }
  .filters-panel__head {
    position: sticky; top: 0; z-index: 2;
    background: var(--surface); padding: 18px 0 12px;
    border-bottom: 1px solid var(--line); margin-bottom: 4px;
  }
  .filters-panel__close { display: grid; }
}

/* ---------- Mobile (<= 720px) ---------- */
@media (max-width: 720px) {
  :root { --page-x: 16px; --gap: 14px; --header-h: 60px; }

  body { font-size: 14.5px; padding-bottom: env(safe-area-inset-bottom); }

  /* La navigation principale passe en barre basse. */
  .nav { display: none; }

  /* En-tête compact : seul l'avatar identifie le compte. */
  .account-name { display: none; }

  .app-main { padding: 20px var(--page-x) 96px; }

  /* Navigation basse */
  .bottom-nav {
    position: fixed; z-index: 70; left: 0; right: 0; bottom: 0;
    display: grid; grid-template-columns: repeat(5, 1fr);
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    background: rgba(10, 10, 10, .92);
    backdrop-filter: saturate(180%) blur(18px);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    border-top: 1px solid var(--line);
  }
  .bottom-nav__link {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 8px 2px 6px; border-radius: var(--r-md);
    color: var(--ink-400); font-size: .66rem; font-weight: 600;
    min-height: 52px;
    transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
  }
  .bottom-nav__link .icon { width: 21px; height: 21px; transition: transform var(--t-base) var(--ease-spring); }
  .bottom-nav__link:active { background: rgba(255, 255, 255, .08); transform: scale(.96); }
  .bottom-nav__link.is-active { color: var(--violet-600); }
  .bottom-nav__link.is-active .icon { transform: translateY(-2px) scale(1.08); }

  .app-footer { display: none; }

  /* Statistiques (démonstration) : une colonne */
  .grid--stats { grid-template-columns: minmax(0, 1fr); }
  .stat { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 16px; }
  .stat__icon { margin-bottom: 0; }
  .stat__value { font-size: 1.55rem; }
  .stat__delta { margin-top: 0; }

  /* Cartes deals */
  .grid--deals { grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 12px; }
  .deal-card__ribbon { font-size: .63rem; padding: 4px 8px; white-space: nowrap; }
  .deal-card__specs { gap: 4px 10px; font-size: .72rem; }
  .deal-card__body { padding: 12px 13px 14px; gap: 10px; }
  .deal-card__price { font-size: 1.16rem; }
  .deal-card__title { font-size: .88rem; }
  .deal-card__foot { flex-direction: column; align-items: stretch; gap: 10px; }
  .deal-card__cta .btn { width: 100%; }
  .deal-card__source { display: none; }

  .deal-row { grid-template-columns: 76px minmax(0, 1fr); gap: 12px; }
  .deal-row__aside { grid-column: 1 / -1; }

  /* Alertes */
  .grid--alerts { grid-template-columns: minmax(0, 1fr); }
  .alert-card__head { flex-wrap: wrap; }
  .alert-card__status { margin-left: 0; order: 3; }
  .alert-card__link { grid-column: 1 / -1; justify-self: stretch; justify-content: center; margin-top: 6px; }
  .alert-card__actions .btn { flex: 1 1 auto; justify-content: center; min-height: 40px; }

  /* Formulaires & modale */
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .modal-wrap { padding: 0; align-items: flex-end; }
  .modal {
    width: 100% !important; max-height: 92dvh;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    animation: sheet-in var(--t-slow) var(--ease) both;
  }
  .modal.is-out { animation: sheet-out var(--t-base) var(--ease) both; }
  @keyframes sheet-in  { from { transform: translateY(26px); opacity: .6; } to { transform: none; opacity: 1; } }
  @keyframes sheet-out { to { transform: translateY(30px); opacity: 0; } }
  .modal__head { padding: 20px 20px 16px; }
  .modal__body { padding: 20px; }
  .modal__foot { padding: 14px 20px calc(14px + env(safe-area-inset-bottom)); }
  .modal__foot .btn { flex: 1 1 auto; min-height: 46px; }
  .modal__reassure { order: -1; flex-basis: 100%; }

  /* Panneau notifications plein écran */
  .notif-panel {
    inset: auto 0 0 0; top: 8vh;
    width: 100%; border-radius: var(--r-xl) var(--r-xl) 0 0;
    animation: sheet-in var(--t-slow) var(--ease) both;
  }
  .notif-panel.is-out { animation: sheet-out var(--t-base) var(--ease) both; }
  .notif-panel__foot { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }

  /* Détail */
  .detail__facts { grid-template-columns: minmax(0, 1fr); }
  .detail__price { font-size: 2rem; }
  .detail__cta .btn { flex: 1 1 100%; min-height: 48px; }
  .score-panel { gap: 16px; padding: 18px; }

  /* Barre d'outils */
  .toolbar { padding: 12px; gap: 10px; }
  .toolbar--sticky { top: calc(var(--header-h) + 6px); }
  .toolbar .input-group { flex-basis: 100%; }
  .toolbar__sort { flex: 1 1 auto; }
  .toolbar__sort .select { flex: 1; }

  .toast-stack { bottom: calc(76px + env(safe-area-inset-bottom)); width: calc(100% - 32px); }
  .toast { width: 100%; justify-content: center; text-align: center; }

  .section { margin-top: 32px; }
  .section__head { flex-direction: column; align-items: flex-start; gap: 8px; }

  /* Cibles tactiles confortables */
  .btn { min-height: 42px; }
  .icon-btn { width: 40px; height: 40px; }
  .chip { min-height: 34px; }
}

/* ---------- Petit mobile (<= 400px) ---------- */
@media (max-width: 400px) {
  .logo__text { font-size: .98rem; }
  .bottom-nav__link span { font-size: .62rem; }
  .detail__thumbs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Très petits écrans (<= 359px) : une seule colonne ---------- */
@media (max-width: 359px) {
  .grid--deals { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Pointeur grossier : pas d'effets de survol parasites ---------- */
@media (hover: none) {
  .card--hover:hover, .deal-card:hover, .stat:hover, .alert-card:hover, .deal-row:hover,
  .opp-card:hover { transform: none; }
  .btn:hover { transform: none; box-shadow: none; }
  .btn--primary:hover { box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 22px -12px rgba(255, 255, 255, .35); }
  .opp-card:hover .opp-card__img, .deal-card--live:hover .opp-card__img, .illus:hover img { transform: none; }
}

/* ---------- Impression ---------- */
@media print {
  .app-header, .bottom-nav, .notif-panel, .scrim, .toast-stack, .app-footer, .fav-btn, .live-pill { display: none !important; }
  body { background: #fff; color: #111; }
  .card, .deal-card, .stat, .opp-card { box-shadow: none; break-inside: avoid; }
}


/* ---------- Opportunités ---------- */

@media (max-width: 720px) {
  .view__head { align-items: flex-start; gap: 14px; }
  .dash-head__side { width: 100%; justify-content: space-between; }
  .opp-filters { flex: 1; }
  .opp-filters .chip { flex: 1; justify-content: center; }

  .opp-detail { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .opp-detail__media { aspect-ratio: 16 / 10; max-height: 220px; }
  .opp-detail__row dt { min-width: 88px; }
}

@media (max-width: 520px) {
  .grid--opps { grid-template-columns: minmax(0, 1fr); }
  .opp-card__media { aspect-ratio: 16 / 9; }
}