/*************************************
  infinisearch.fr — infinisearch-responsive.css
  Styles responsive (tablette + mobile)
  Mise à jour : 05/2026
*************************************/

/* ── TABLETTE (≤ 1024px) ──────────────────────────────────────────────────── */
@media (max-width: 1024px) {

    .layout {
        grid-template-columns: 1fr 250px;
    }

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

    .hero-title { font-size: 24px; }

    .main { padding: 20px 24px 32px; }
}

/* ── TABLETTE PORTRAIT (≤ 768px) ──────────────────────────────────────────── */
@media (max-width: 768px) {

    /* Header */
    .header { padding: 0 16px; gap: 10px; }
    .tagline { display: none; }
    .header-search { max-width: none; flex: 1 1 0; min-width: 0; margin-left: 0; margin-right: 0; }
    .header-nav { margin-left: 0; }
    .header-nav a:not(.nav-cta) { display: none; }
    .hamburger { margin-left: 0; }

    /* Navbar */
    .navbar { display: none; }
    .hamburger { display: flex; }

    /* Layout */
    .layout {
        grid-template-columns: 1fr;
    }

    .sidebar {
        border-top: 1px solid var(--border);
        padding: 20px 16px;
    }

    /* Main */
    .main { padding: 16px 16px 32px; }

    /* Hero */
    .hero {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .hero-title { font-size: 22px; }

    /* Grille */
    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    /* Page offres */
    .pricing-grid,
    .arguments-block,
    .pricing-section .pricing-grid + .pricing-grid {
        grid-template-columns: 1fr;
    }

    .offres-intro__title { font-size: 24px; }

    /* Formulaires */
    .form-card { padding: 16px; }
    .form-grid-2 { gap: 8px; grid-template-columns: 1fr !important; }
    .form-row { margin-bottom: 16px !important; }
    .form-card > .form-row:last-child { margin-bottom: 0 !important; }

    /* Dropdown recherche */
    .search-dropdown { position: fixed; top: 56px; left: 0; right: 0; width: 100%; border-radius: 0; }
    .compte-table thead,
    .commandes-table thead { display: none; }

    .compte-table tr,
    .commandes-table tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        padding: 12px 10px;
        border-bottom: 1px solid var(--border);
        gap: 8px;
    }

    .compte-table tbody tr:nth-child(even),
    .commandes-table tbody tr:nth-child(even) { background: var(--bg); }

    .compte-table td,
    .commandes-table td { display: block; padding: 0; border: none; font-size: 13px; }

    /* Titre / ref : pleine largeur */
    .compte-td-titre,
    .commandes-td-ref { flex: 1 1 100%; font-weight: 600; }

    /* Date et vues masqués sur mobile */
    .compte-table td:nth-child(2),
    .compte-table td:nth-child(3) { display: none; }
    .commandes-td-date { display: none; }

    /* Offre et montant : visibles */
    .commandes-td-offre,
    .commandes-td-montant { color: var(--text-light); font-size: 12px; }

    /* Actions : pleine largeur, alignées à droite */
    .compte-td-actions,
    .commandes-td-actions { flex: 1 1 100%; display: flex; justify-content: flex-end; gap: 6px; }
}

/* ── MOBILE (≤ 480px) ─────────────────────────────────────────────────────── */
@media (max-width: 480px) {

    /* Header */
    .logo { font-size: 20px; }
    .header { height: 48px; }
    .navbar { top: 48px; }
    .navbar-mobile { top: 48px; max-height: calc(100vh - 48px); }
    .search-dropdown { top: 48px; }

    /* Hero */
    .hero-title { font-size: 20px; }

    /* Grille */
    .grid-4 {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .card-title { font-size: 12px; }

    /* Sidebar */
}