/* ============================================================
   5DEVIS.CH — mobile.css
   Responsive complet — tous écrans smartphone
   À charger APRÈS main.css dans layouts/main.php
   <link rel="stylesheet" href="<?= APP_URL ?>/assets/css/mobile.css">
   ============================================================ */

/* ======================
   BASE MOBILE — tout écran
   ====================== */
*, *::before, *::after { box-sizing: border-box; }

img, video, iframe { max-width: 100%; height: auto; }

/* ======================
   NAVBAR — Mobile
   ====================== */
@media (max-width: 768px) {

    /* Header compact */
    .header { position: sticky; top: 0; z-index: 200; }

    .navbar {
        min-height: 60px;
        padding: 0 16px;
        flex-wrap: nowrap;
        gap: 8px;
    }

    /* Logo plus petit */
    .logo { font-size: 1.2rem; gap: 8px; }
    .logo-icon { width: 32px; height: 32px; font-size: 1rem; }

    /* Cacher les liens nav */
    .nav-links {
        display: none;
        position: fixed;
        top: 60px;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--white);
        flex-direction: column;
        padding: 20px 16px;
        overflow-y: auto;
        z-index: 199;
        box-shadow: 0 4px 32px rgba(0,0,0,.15);
        gap: 4px;
    }
    .nav-links.open { display: flex; }

    /* Links dans menu mobile */
    .nav-link {
        padding: 14px 16px;
        font-size: 16px;
        border-radius: var(--radius-md);
        width: 100%;
    }

    /* Dropdown mobile → flat */
    .dropdown {
        position: static;
        box-shadow: none;
        border: none;
        padding: 0 0 0 16px;
        min-width: 0;
        display: block;
    }
    .dropdown-grid { grid-template-columns: 1fr; }

    /* Burger visible */
    .burger { display: flex !important; }

    /* Nav right compact */
    .nav-right { gap: 6px; margin-left: auto; }
    .btn-nav { padding: 7px 12px; font-size: 13px; }

    /* Cacher "Devenir partenaire" texte long */
    .nav-right .btn-nav.btn-secondary span { display: none; }

    /* Lang switcher compact */
    .lang-switcher { gap: 1px; }
    .lang-btn { padding: 4px 6px; font-size: 11px; }
}

@media (max-width: 380px) {
    .navbar { padding: 0 12px; }
    .logo-text { display: none; }
    /* Afficher seulement le logo icône */
    .logo::after { content: '5devis.ch'; font-size: 1.1rem; font-weight: 800; }
}

/* ======================
   HERO — Mobile
   ====================== */
@media (max-width: 1024px) {
    .hero { padding: 48px 0 40px; }
    .hero-content { grid-template-columns: 1fr; gap: 32px; }
    .hero-visual { display: none; }
    .hero-title { font-size: clamp(1.6rem, 5vw, 2.2rem); }
}

@media (max-width: 768px) {
    .hero { padding: 32px 0; }
    .hero-badge { font-size: 12px; padding: 6px 12px; }
    .hero-title { font-size: 1.7rem; line-height: 1.25; }
    .hero-subtitle { font-size: 1rem; margin-bottom: 24px; }
    .hero-form { padding: 16px; }
    .hero-form-row { flex-direction: column; gap: 10px; }
    .hero-form-field { min-width: 0; }
    .btn-hero { width: 100%; justify-content: center; }
    .hero-trust { gap: 12px; }
    .hero-trust span { font-size: 13px; }
}

@media (max-width: 480px) {
    .hero { padding: 24px 0; }
    .hero-title { font-size: 1.5rem; }
}

/* ======================
   STATS BAR — Mobile
   ====================== */
@media (max-width: 768px) {
    .stats-bar { padding: 24px 0; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 0; }
    .stat-item { padding: 12px 8px; }
    .stat-item:nth-child(2) { border-right: none; }
    .stat-item:nth-child(3) { border-top: 1px solid rgba(255,255,255,.2); border-right: 1px solid rgba(255,255,255,.2); }
    .stat-item:last-child { border-top: 1px solid rgba(255,255,255,.2); }
    .stat-number { font-size: 1.5rem; }
    .stat-label { font-size: 12px; }
}

@media (max-width: 380px) {
    .stats-grid { grid-template-columns: 1fr 1fr; }
    .stat-number { font-size: 1.3rem; }
}

/* ======================
   SECTIONS — Mobile
   ====================== */
@media (max-width: 768px) {
    .section { padding: 40px 0; }
    .section-header { margin-bottom: 32px; }
    .section-header h2 { font-size: 1.5rem; }
    .section-header p { font-size: 1rem; }
}

@media (max-width: 480px) {
    .section { padding: 32px 0; }
    .container { padding: 0 14px; }
}

/* ======================
   SERVICES GRID — Mobile
   ====================== */
@media (max-width: 1100px) {
    .services-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    .service-card { padding: 18px 14px; gap: 8px; }
    .service-icon { width: 44px; height: 44px; font-size: 20px; }
    .service-name { font-size: 0.9rem; }
}

@media (max-width: 400px) {
    .services-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
    .service-card { padding: 14px 10px; }
    .service-desc { display: none; }
    .service-cta { font-size: 12px; }
}

/* ======================
   STEPS — Mobile
   ====================== */
@media (max-width: 900px) {
    .steps-grid {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }
    .step-arrow { display: none; }
}

@media (max-width: 540px) {
    .steps-grid { grid-template-columns: 1fr; gap: 20px; }
    .step-item { padding: 0 8px; }
    .step-icon { width: 56px; height: 56px; }
}

/* ======================
   AVANTAGES — Mobile
   ====================== */
@media (max-width: 1024px) {
    .avantages-layout { grid-template-columns: 1fr; gap: 32px; }
    .trust-box { padding: 24px; }
}

/* ======================
   PARTENAIRE SECTION — Mobile
   ====================== */
@media (max-width: 1024px) {
    .partenaire-marketing-grid { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 768px) {
    .partenaire-tarif { flex-direction: column; gap: 12px; }
    .ceb-grid { grid-template-columns: repeat(5, 1fr); gap: 6px; }
    .ceb-item { font-size: 10px; padding: 6px 4px; }
}

/* ======================
   FOOTER — Mobile
   ====================== */
@media (max-width: 1024px) {
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 768px) {
    .footer { padding: 40px 0 24px; }
    .footer-grid { grid-template-columns: 1fr; gap: 24px; }
    .footer-bottom { flex-direction: column; text-align: center; gap: 12px; }
    .footer-links-2col { grid-template-columns: 1fr; }
}

/* ======================
   AUTH PAGES — Mobile
   ====================== */
@media (max-width: 768px) {
    .auth-page { padding: 24px 16px; align-items: flex-start; padding-top: 32px; }
    .auth-card { padding: 28px 20px; border-radius: var(--radius-lg); }
    .auth-title { font-size: 1.4rem; }
}

@media (max-width: 380px) {
    .auth-card { padding: 24px 16px; }
}

/* ======================
   FORMULAIRES DEVIS — Mobile
   ====================== */
@media (max-width: 768px) {
    /* Stepper compact */
    .devis-stepper {
        gap: 0;
        overflow-x: auto;
        justify-content: flex-start;
        padding-bottom: 8px;
        -webkit-overflow-scrolling: touch;
    }
    .devis-step-label { font-size: 11px; }
    .devis-step-num { width: 28px; height: 28px; font-size: 12px; }
    .devis-step-line { width: 24px; }

    /* Grid form 2-col → 1-col */
    [style*="grid-template-columns:1fr 1fr"],
    [style*="grid-template-columns: 1fr 1fr"],
    [style*="grid-template-columns:1fr 1fr 1fr"],
    [style*="grid-template-columns: 1fr 1fr 1fr"],
    [style*="grid-template-columns:120px 1fr 1fr"],
    [style*="grid-template-columns: 120px 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    /* Main+sidebar → stack */
    [style*="grid-template-columns:2fr 1fr"],
    [style*="grid-template-columns: 2fr 1fr"],
    [style*="grid-template-columns:1fr 420px"],
    [style*="grid-template-columns:1fr 380px"] {
        grid-template-columns: 1fr !important;
    }

    /* Sticky sidebar → static */
    [style*="position:sticky"],
    [style*="position: sticky"] { position: static !important; }

    /* Boutons full width sur mobile */
    .btn-primary.btn-xl,
    .btn-primary.btn-lg,
    .form-step .btn {
        width: 100%;
        justify-content: center;
    }

    /* Ligne devis form scroll */
    #lignes-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .ligne-devis { min-width: 520px; }

    /* Checkboxes 2 col sur mobile */
    [style*="grid-template-columns:1fr 1fr 1fr"][style*="gap:8px"],
    [style*="grid-template-columns: 1fr 1fr 1fr"][style*="gap:8px"] {
        grid-template-columns: 1fr 1fr !important;
    }
}

@media (max-width: 480px) {
    /* form padding réduit */
    form[style*="padding:40px"] { padding: 20px 16px !important; }
    [style*="padding:40px;"] { padding: 20px 16px !important; }

    /* Checkboxes 1 col sur très petit écran */
    [style*="grid-template-columns:1fr 1fr"][style*="gap:8px"] {
        grid-template-columns: 1fr !important;
    }
}

/* ======================
   DEVIS STEPPER — step labels hidden on very small
   ====================== */
@media (max-width: 380px) {
    .devis-step-label { display: none; }
    .devis-stepper { justify-content: center; }
}

/* ======================
   TABLES — Mobile scroll
   ====================== */
@media (max-width: 768px) {
    .table-wrap {
        margin: 0 -14px;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }
    .data-table { font-size: 13px; }
    .data-table th,
    .data-table td { padding: 10px 12px; }
}

/* ======================
   DASHBOARD STATS — Mobile
   ====================== */
@media (max-width: 768px) {
    .dashboard-stats { grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 24px; }
    .stat-card { padding: 16px; }
    .stat-card-value { font-size: 1.5rem; }
}

@media (max-width: 480px) {
    .dashboard-stats { grid-template-columns: 1fr 1fr; gap: 10px; }
    .stat-card-value { font-size: 1.3rem; }
}

/* ======================
   FLASH MESSAGES — Mobile
   ====================== */
@media (max-width: 768px) {
    .flash { padding: 12px 16px; font-size: 13px; }
}

/* ======================
   CANTON PILLS — Mobile
   ====================== */
@media (max-width: 768px) {
    .cantons-grid { gap: 6px; }
    .canton-pill { padding: 8px 12px; font-size: 13px; }
}

/* ======================
   CTA SECTION — Mobile
   ====================== */
@media (max-width: 768px) {
    .cta-section { padding: 48px 0; }
    .cta-box h2 { font-size: 1.6rem; }
    .cta-box p { font-size: 1rem; margin-bottom: 24px; }
    .how-cta { flex-direction: column; align-items: center; }
    .how-cta .btn { width: 100%; max-width: 320px; justify-content: center; }
}

/* ======================
   SECTION HEADER — Mobile
   ====================== */
@media (max-width: 768px) {
    .section-header { margin-bottom: 28px; }
    h1 { font-size: clamp(1.5rem, 6vw, 2rem); }
    h2 { font-size: clamp(1.25rem, 5vw, 1.75rem); }
}

/* ======================
   SERVICE DETAIL PAGE — Mobile
   ====================== */
@media (max-width: 768px) {
    /* Service detail cantons grid */
    [style*="display:flex;gap:8px;justify-content:center;flex-wrap:wrap"] {
        gap: 6px !important;
    }

    /* Devis confirmation card */
    .auth-card, [style*="max-width:600px"] { width: 100% !important; }
}

/* ======================
   CANTON DETAIL — Mobile
   ====================== */
@media (max-width: 1024px) {
    /* 2-col layout → 1-col */
    .container [style*="grid-template-columns:2fr 1fr"],
    .container [style*="grid-template-columns: 2fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
}

/* ======================
   BUTTONS — Mobile
   ====================== */
@media (max-width: 480px) {
    .btn-xl { padding: 14px 20px; font-size: 15px; }
    .btn-lg { padding: 12px 20px; font-size: 14px; }

    /* Stack button groups */
    [style*="display:flex;gap:16px;justify-content:center"] {
        flex-direction: column !important;
        align-items: center !important;
    }
    [style*="display:flex;gap:12px;flex-wrap:wrap"] {
        flex-direction: column !important;
    }
}

/* ======================
   HOME PAGE SPECIAL — Mobile
   ====================== */
@media (max-width: 768px) {
    /* Partenaire avantages grid */
    .partenaire-avantages { gap: 10px; }

    /* Canton exclusive box */
    .ceb-grid { grid-template-columns: repeat(4, 1fr); }
    .ceb-item { font-size: 10px; padding: 6px 4px; }
    .ceb-legend { flex-wrap: wrap; gap: 8px; font-size: 11px; }
}

/* ======================
   TOUCH IMPROVEMENTS
   ====================== */
@media (hover: none) {
    /* Remove hover transforms on touch devices */
    .service-card:hover { transform: none; }
    .btn-primary:hover { transform: none; }

    /* Larger touch targets */
    .nav-link { min-height: 44px; }
    .btn { min-height: 44px; }
    .form-control { min-height: 44px; }
    input[type="checkbox"] { width: 20px; height: 20px; }
}

/* ======================
   SCROLLBAR HIDDEN — horizontal
   ====================== */
.devis-stepper::-webkit-scrollbar,
#lignes-container::-webkit-scrollbar,
.table-wrap::-webkit-scrollbar { height: 3px; }

.devis-stepper::-webkit-scrollbar-thumb,
#lignes-container::-webkit-scrollbar-thumb,
.table-wrap::-webkit-scrollbar-thumb {
    background: var(--gray-300);
    border-radius: 2px;
}

/* ======================
   SAFE AREA — iPhone notch
   ====================== */
@supports (padding: max(0px)) {
    .header { padding-left: max(0px, env(safe-area-inset-left)); padding-right: max(0px, env(safe-area-inset-right)); }
    .container { padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); }
    .footer { padding-bottom: max(24px, env(safe-area-inset-bottom)); }
}