/* ============================================================
   PRIMMODZ — RESPONSIVE MOBILE
   À placer dans assets/css/responsive.css
   et à inclure APRÈS style.css et Bootstrap dans chaque page
   ============================================================ */

/* ============================================================
   1. HEADER / NAVIGATION
   Le header.php utilise une structure <header> custom (pas
   Bootstrap navbar). On lui applique un menu hamburger CSS-only
   et on réorganise le logo + nav pour mobile.
   ============================================================ */

/* --- Reset de base du header --- */
header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
    box-shadow: 0 2px 8px rgba(26, 58, 107, 0.07);
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    gap: 1rem;
}

/* Logo */
.logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
}
.logo img {
    height: 44px;
    width: auto;
}

/* Nav desktop */
header nav ul {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0.2rem;
    flex-wrap: wrap;
}
header nav ul li a {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 0.88rem;
    color: #2d3748;
    text-decoration: none;
    padding: 0.45rem 0.8rem;
    border-radius: 6px;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}
header nav ul li a:hover {
    color: #1a3a6b;
    background: #f4f6fb;
}
/* Lien "Déposer une annonce" mis en évidence */
header nav ul li:last-child a,
header nav ul li a[href="deposer_annonce.php"] {
    background-color: #1a3a6b;
    color: #ffffff !important;
    padding: 0.45rem 1rem;
}
header nav ul li:last-child a:hover,
header nav ul li a[href="deposer_annonce.php"]:hover {
    background-color: #122b52;
}

/* Flash message */
.flash-message {
    padding: 0.65rem 1rem;
    font-size: 0.88rem;
    border-radius: 6px;
    margin: 0 1rem 0.5rem;
}
.flash-success { background: #d1fae5; color: #065f46; border: 1px solid #34d399; }
.flash-error   { background: #fee2e2; color: #991b1b; border: 1px solid #f87171; }
.flash-info    { background: #dbeafe; color: #1e40af; border: 1px solid #93c5fd; }

/* ============================================================
   2. HAMBURGER MENU (CSS-only via checkbox hidden)
   On injecte le toggle via :has() ou avec un label/checkbox.
   Le markup du header.php n'étant pas modifiable ici, on
   utilise une approche JS légère (voir bas de ce fichier).
   ============================================================ */

/* Bouton hamburger — injecté par JS */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    background: none;
    border: 1.5px solid #e2e8f0;
    border-radius: 7px;
    cursor: pointer;
    padding: 6px 7px;
    flex-shrink: 0;
}
.nav-toggle span {
    display: block;
    height: 2px;
    background: #1a3a6b;
    border-radius: 2px;
    transition: transform 0.25s, opacity 0.25s;
}
/* Animation croix */
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* ============================================================
   3. BREAKPOINT MOBILE ≤ 768px
   ============================================================ */
@media (max-width: 768px) {

    /* --- Header --- */
    .nav-toggle { display: flex; }

    header nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #ffffff;
        border-top: 1px solid #e2e8f0;
        box-shadow: 0 8px 24px rgba(26, 58, 107, 0.12);
        z-index: 999;
        padding: 0.5rem 0 1rem;
    }
    header nav.open { display: block; }

    header nav ul {
        flex-direction: column;
        gap: 0;
        padding: 0 1rem;
    }
    header nav ul li { width: 100%; }
    header nav ul li a {
        display: block;
        width: 100%;
        padding: 0.75rem 1rem;
        font-size: 0.95rem;
        border-radius: 8px;
    }
    header nav ul li a[href="deposer_annonce.php"] {
        margin-top: 0.5rem;
        text-align: center;
    }

    /* --- Hero --- */
    .hero {
        padding: 60px 0 50px;
    }
    .hero h1 {
        font-size: 1.5rem;
        letter-spacing: 0.01em;
    }
    .hero p.lead {
        font-size: 0.95rem;
        margin-bottom: 1.5rem !important;
    }

    /* Onglets pleine largeur sur mobile */
    .search-tabs {
        display: flex;
        width: 100%;
    }
    .search-tabs .tab-btn {
        flex: 1;
        padding: 0.6rem 0.5rem;
        font-size: 0.88rem;
    }

    /* Formulaire de recherche */
    .search-form-box {
        padding: 1.2rem 1rem;
        border-radius: 0 0 12px 12px; /* coins top déjà couverts par les onglets */
    }
    /* Chaque champ prend toute la largeur */
    .search-form-box .row > [class*="col-md"] {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    /* Prix min/max côte à côte sur mobile */
    .search-form-box .row > [class*="col-md"]:nth-child(3),
    .search-form-box .row > [class*="col-md"]:nth-child(4) {
        width: 50% !important;
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
    /* Bouton rechercher pleine largeur */
    .search-form-box .btn-search {
        width: 100%;
        padding: 0.7rem;
        font-size: 1rem;
    }

    /* --- Section résultats --- */
    .results-section { padding: 30px 0; }
    .results-section .d-flex {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 0.75rem;
        margin-bottom: 1.2rem !important;
    }
    .results-section h2 { font-size: 1.15rem; }
    .btn-deposer { width: 100%; text-align: center; }

    /* Cards : 1 colonne sur mobile */
    .row .col-md-4 {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    .annonce-card img { height: 200px; }

    /* --- Section "Pourquoi" --- */
    .why-section { padding: 50px 0; }
    .why-section h2 { font-size: 1.3rem; margin-bottom: 1.5rem; }
    /* Les cards why : 1 colonne aussi (col-md-4) → déjà couvert par la règle ci-dessus */

    /* --- Footer --- */
    footer .container,
    .footer .container {
        text-align: center;
    }
    footer .row > [class*="col"],
    .footer .row > [class*="col"] {
        margin-bottom: 1rem;
    }
    footer .d-flex,
    .footer .d-flex {
        justify-content: center !important;
        flex-wrap: wrap;
    }
}

/* ============================================================
   4. BREAKPOINT TABLETTE 769px – 991px
   ============================================================ */
@media (min-width: 769px) and (max-width: 991px) {

    /* Hero moins haut */
    .hero { padding: 80px 0 60px; }

    /* Formulaire : 2 colonnes sur tablette */
    .search-form-box .row > [class*="col-md"] {
        width: 50% !important;
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
    /* Bouton rechercher pleine largeur */
    .search-form-box .col-md-2.d-grid {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* Cards : 2 colonnes sur tablette */
    .row .col-md-4 {
        width: 50% !important;
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
}

/* ============================================================
   5. PETITS MOBILES ≤ 360px
   ============================================================ */
@media (max-width: 360px) {
    .hero h1 { font-size: 1.2rem; }
    .search-form-box { padding: 1rem 0.75rem; }

    /* Prix min/max empilés aussi sur très petit écran */
    .search-form-box .row > [class*="col-md"]:nth-child(3),
    .search-form-box .row > [class*="col-md"]:nth-child(4) {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    .logo img { height: 36px; }
}

/* ============================================================
   6. SCRIPT HAMBURGER
   Le script JS correspondant est intégré directement dans
   chaque page PHP en bas de page (avant </body>).
   Voir index.php et deposer_annonce.php.
   ============================================================ */