/* =============================================================
   RESPONSIVE — tablettes & mobiles (≤ 980px)
   Complète main.css, navbar.css, footer.css.
   ============================================================= */

/* ============ ≤ 980 px ============ */
@media (max-width: 980px) {

  /* Layout */
  .section { padding: 56px 0; }
  .section--tight { padding: 40px 0; }
  .container { width: 100%; max-width: 100%; padding: 0 20px; }

  .section-head{margin-bottom:32px}

  /* Grilles générales */
  .grid-3, .grid-2 {
    display: grid !important;
    gap: 20px !important;
    grid-template-columns: 1fr !important;
  }

  /* Cartes produits */
  .cards-2, .cards-3, .cards-4 {
    display: grid;
    gap: 22px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }

  /* Typos */
  .section-title { font-size: clamp(26px, 5.4vw, 32px); }
  .section-subtitle { font-size: 14px; }

  /* Tableaux */
  .table {
    display: block;
    width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    -webkit-overflow-scrolling: touch;
  }
  .table th, .table td {
    white-space: nowrap;
    padding: 10px;
    font-size: 14px;
  }

  /* Cartes génériques */
  .card-white, .card { border-radius: 6px; padding: 20px; }

  /* Boutons : tap-target */
  .btn, .btn-primary {
    min-height: 48px;
    padding: 14px 24px;
    text-decoration: none;
    font-size: 11px;
  }
  .btn:focus-visible,
  .btn-primary:focus-visible { outline: 2px solid var(--text-strong); outline-offset: 2px; }

  a, .link-plain, .link-logout { text-decoration: none; }
  @media (hover: hover) {
    a:hover, .link-plain:hover, .link-logout:hover { opacity: .82; }
  }

  /* Images produit uniformes */
  .pcard-thumb { aspect-ratio: 3/4; border-radius: 2px; overflow: hidden; background: var(--surface); }
  .pcard-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }

  /* Badges */
  .badge { font-size: 11px; padding: 4px 8px; }
  .thumb-sm { width: 52px; height: 52px; }

  /* Modals */
  .modal-backdrop { padding: 16px; }
  .modal { width: 100%; max-width: 480px; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; padding: 56px 0 32px; }
  .footer-bottom { font-size: 11px; }

  /* Listes (commandes, adresses) */
  .list li { align-items: flex-start; gap: 10px; }
  .list .btn { min-height: 40px; padding: 10px 16px; }

  /* Profil */
  .actions-plain { gap: 8px; }
  .link-logout { color: #b91c1c; }

  /* Pagination */
  .pagination { gap: 4px; }
  .pagination .page { padding: 8px 12px; min-width: 38px; text-align: center; font-size: 12px; }

  /* ====== HERO index ====== */
  .hero { padding: 48px 0 40px; }
  .hero .grid {
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 32px;
  }
  .hero .title-xl {
    font-size: clamp(40px, 10vw, 60px) !important;
    line-height: 1.02 !important;
  }
  .hero .subtitle { font-size: 11px !important; margin-top: 12px !important; }
  .hero .lead { font-size: 15px !important; line-height: 1.65 !important; margin-top: 18px !important; }
  .hero .actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-top: 26px !important;
  }
  .hero .actions .btn,
  .hero .actions a.btn { width: 100% !important; text-align: center !important; }

  /* Aside card hero */
  .hero aside .card { margin-top: 10px !important; padding: 20px !important; }
  .hero aside .card .thumb { width: 100% !important; max-width: 520px !important; margin: 0 auto !important; aspect-ratio: 3/4 !important; }
  .hero aside .card h3 { font-size: 20px !important; margin: 14px 0 4px !important; }
  .hero aside .card p { font-size: 14px !important; }

  /* Section head */
  .section-head { text-align: center !important; }

  /* Pcard */
  .pcard { border-radius: 0 !important; }
  .pcard-title { font-size: 16px !important; }
  .pcard-sub { font-size: 13px !important; }
  .pcard-price { font-size: 13px !important; }
  .pcard-btn,
  .pcard a.pcard-btn { width: auto !important; text-align: left !important; margin-top: 10px !important; }

  /* Notre Univers */
  .univers-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 32px !important; }
  .univers-title { font-size: clamp(24px, 6vw, 32px) !important; }
  .univers-lead { font-size: 15px !important; }
  .univers-text { font-size: 14px !important; }
  .univers-list { grid-template-columns: 1fr 1fr !important; gap: 6px 16px !important; margin-top: 18px !important; padding-top: 16px !important; }
  .univers-list li { font-size: 11px !important; }

  .univers-card { padding: 32px 20px !important; border-radius: 4px !important; }
  .univers-card-title { font-size: 20px !important; }
  .univers-card-sub { font-size: 14px !important; line-height: 1.6 !important; }
  .univers-stats { gap: 10px !important; margin-top: 18px !important; padding-top: 18px !important; }
  .univers-stats strong { font-size: 24px !important; }
  .univers-stats span { font-size: 10px !important; }

  /* Form */
  .form-card { padding: 24px; }
  .form-input, .form-select, .form-textarea,
  input.form-control, select.form-control, textarea.form-control { padding: 12px; font-size: 15px; }
}

/* ============ ≤ 720 px ============ */
@media (max-width: 720px) {
  .cards-2, .cards-3, .cards-4 { grid-template-columns: 1fr 1fr; gap: 16px; }
  .footer-grid { grid-template-columns: 1fr; }
}

/* ============ ≤ 580 px ============ */
@media (max-width: 580px) {
  .section { padding: 40px 0; }
  .cards-2, .cards-3, .cards-4 { grid-template-columns: 1fr; }
  .thumb-sm { width: 48px; height: 48px; }
  .table th, .table td { padding: 8px; font-size: 13px; }
  .form-card { padding: 18px; }
}

/* ============ ≤ 420 px ============ */
@media (max-width: 420px) {
  .container { padding: 0 14px; }
  .btn, .btn-primary { width: 100%; }
  .section-title { font-size: 22px; }
  .section-subtitle { font-size: 13px; }
  .title-xl { font-size: 38px !important; }
}

/* ============ Footer mobile : liens/contacts uniformes ============ */
@media (max-width: 980px) {
  .f-links a, .f-contact a {
    color: var(--footer-text);
    text-decoration: none;
    opacity: .9;
  }
  @media (hover: hover) {
    .f-links a:hover, .f-contact a:hover { opacity: 1; color:#fff; }
  }
  .f-contact li { align-items: center; }
  .f-contact svg { flex: 0 0 18px; }
}