/* ==========================================================================
   Iron TV — règles responsive (mobile-first)
   Base : ≤ 479px. Points d'arrêt : 480 / 768 / 1024 / 1280 px.
   ========================================================================== */

/* ------------------------------------- Navigation mobile (< 1024px) */
@media (max-width: 1023.98px) {
  .nav-toggle { display: flex; }

  .nav {
    position: fixed;
    inset: var(--ir-header-h) 0 auto;
    z-index: 95;
    display: flex; flex-direction: column; gap: var(--ir-s4);
    max-height: calc(100dvh - var(--ir-header-h));
    padding: var(--ir-s5) var(--ir-gutter) var(--ir-s7);
    background: var(--ir-bg-alt);
    border-bottom: 1px solid var(--ir-border);
    box-shadow: var(--ir-shadow-lg);
    overflow-y: auto;
    /* Fermé par défaut : retiré du flux ET de l'ordre de tabulation. */
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    /* `visibility` est une propriété discrète : on la bascule d'un coup, à la fin
       de la fermeture et au tout début de l'ouverture, pour que le panneau soit
       visible et focalisable dès le premier instant. */
    transition: transform .22s var(--ir-ease), opacity .22s var(--ir-ease), visibility 0s linear .22s;
  }
  .nav.is-open {
    transform: none;
    opacity: 1;
    visibility: visible;
    transition: transform .22s var(--ir-ease), opacity .22s var(--ir-ease), visibility 0s linear 0s;
  }

  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__link {
    padding: var(--ir-s4) var(--ir-s2);
    border-bottom: 1px solid var(--ir-border);
    font-size: 1.0625rem;
  }
  .nav__actions { flex-direction: column; align-items: stretch; gap: var(--ir-s3); }
  .nav__actions .btn { width: 100%; min-height: 48px; font-size: var(--ir-fs-sm); }

  /* Verrouille le défilement de la page quand le menu est ouvert. */
  body.nav-open { overflow: hidden; }
}

/* Petits écrans : le logo respire moins. */
@media (max-width: 359.98px) {
  .brand__logo { height: 46px; }
  .btn { padding-inline: var(--ir-s4); }
}

/* -------------------------------------------------------- ≥ 480px */
@media (min-width: 480px) {
  .cta-row .btn { flex: 0 1 auto; }
  .cookie__actions { flex-wrap: nowrap; }
}

/* -------------------------------------------------------- ≥ 768px */
@media (min-width: 768px) {
  :root { --ir-fs-body: 1.0625rem; }

  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .offers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .offer--featured { grid-column: span 2; }

  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer__bottom { flex-wrap: nowrap; }

  .cookie { padding: var(--ir-s5) var(--ir-s6); }
  .cookie__inner { grid-template-columns: 1fr auto; }

  .wa-float { width: 58px; height: 58px; right: var(--ir-s5); bottom: var(--ir-s5); }
}

/* ------------------------------------------------------- ≥ 1024px */
@media (min-width: 1024px) {
  .nav { display: flex; align-items: center; gap: var(--ir-s5); }
  .nav-toggle, .nav-backdrop { display: none !important; }

  .hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: var(--ir-s8); }

  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .offers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .offer--featured { grid-column: auto; transform: translateY(-10px); }
  .offer--featured:hover { transform: translateY(-13px); }

  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .steps__item { flex-direction: column; }

  .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }

  .cta-band__inner { grid-template-columns: minmax(0, 1fr) auto; gap: var(--ir-s7); }
}

/* ------------------------------------------------------- ≥ 1280px */
@media (min-width: 1280px) {
  .nav__list { gap: var(--ir-s3); }
  .nav__link { padding-inline: var(--ir-s4); }
}

/* -------------------------------- Tableau comparatif sur petit écran */
/* En dessous de 768px le tableau bascule en cartes empilées : plus de
   défilement horizontal, chaque cellule porte son propre libellé. */
@media (max-width: 767.98px) {
  .compare-wrap { border: 0; overflow: visible; }
  .compare { min-width: 0; }
  .compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .compare tbody { display: block; }
  .compare tbody tr {
    display: block; margin-bottom: var(--ir-s5); padding: var(--ir-s4);
    background: var(--ir-surface); border: 1px solid var(--ir-border); border-radius: var(--ir-r-lg);
  }
  .compare tbody th {
    display: block; padding: 0 0 var(--ir-s3); border-bottom: 1px solid var(--ir-border);
    color: var(--ir-text); font-size: 1rem; font-weight: 700;
  }
  .compare tbody td {
    display: flex; justify-content: space-between; gap: var(--ir-s4);
    padding: var(--ir-s3) 0; border-bottom: 1px solid var(--ir-border);
    text-align: right;
  }
  .compare tbody td:last-child { border-bottom: 0; }
  .compare tbody td::before {
    content: attr(data-label);
    flex: none; color: var(--ir-text-dim); font-weight: 650; text-align: left;
  }
}

/* --------------------------------------- Impression (pages légales) */
@media print {
  .site-header, .site-footer, .wa-float, .cookie, .cta-band, .breadcrumb, .skip-link { display: none !important; }
  body { background: #fff; color: #000; }
  .container { max-width: none; }
  a { color: #000; }
}

/* -------------------------------------- Parcours d'achat (produit + commande) */
@media (max-width: 479.98px) {
  /* À 320 px, deux cartes d'appareil côte à côte deviennent illisibles. */
  .choice-group--grid { grid-template-columns: 1fr; }
  .spec-grid { grid-template-columns: 1fr; }
  .panel { padding: var(--ir-s4); }
  .order-line { flex-wrap: wrap; }
  .order-line__price { width: 100%; text-align: right; }
}

@media (min-width: 480px) {
  .phone-row { grid-template-columns: minmax(150px, 42%) minmax(0, 1fr); }
}

@media (min-width: 768px) {
  .choice-group--grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .spec-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .panel { padding: var(--ir-s6); }
}

@media (min-width: 1024px) {
  /* Deux colonnes, résumé collant. Il reste DANS sa colonne de grille : il ne
     peut donc jamais recouvrir le footer ni le contenu. */
  .checkout__grid { grid-template-columns: minmax(0, 1fr) 380px; gap: var(--ir-s7); }
  .checkout__aside {
    position: sticky;
    top: calc(var(--ir-header-h) + var(--ir-s4));
    max-height: calc(100vh - var(--ir-header-h) - var(--ir-s6));
    overflow-y: auto;
  }
  .product__top { grid-template-columns: minmax(0, 1fr) 380px; gap: var(--ir-s8); }
  .choice-group--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* La barre d'action mobile disparaît : le résumé collant prend le relais. */
  .mobile-bar { display: none !important; }
}

@media (min-width: 1280px) {
  .choice-group--grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .flow { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}