/* =====================================================
   IVOIRE EXPRESS MARKET
   RESPONSIVE DESIGN
   Fichier : assets/css/responsive.css

   Adaptation :
   - Ordinateurs
   - Petits ordinateurs
   - Tablettes
   - Smartphones
===================================================== */


/* =====================================================
   1. PETITS ORDINATEURS
===================================================== */

@media (max-width: 1100px) {

    .market-header-inner {
        gap: 18px;
    }

    .market-logo {
        width: 260px;
    }

    .market-actions {
        gap: 13px;
    }

    .market-all-categories {
        min-width: 240px;
    }

    .market-menu-links {
        gap: 8px;
    }

    .market-menu-links a {
        padding: 0 7px;
        font-size: 13px;
    }

    .accueil-categories,
    .accueil-produits,
    .accueil-boutiques {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}


/* =====================================================
   2. TABLETTES ET ÉCRANS MOYENS
===================================================== */

@media (max-width: 992px) {

    /* En-tête */

    .market-header-inner {
        min-height: auto;
        padding: 18px 0;
        flex-wrap: wrap;
    }

    .market-logo {
        width: 230px;
    }

    .market-search {
        max-width: none;
    }

    .market-actions {
        gap: 15px;
    }


    /* Page d'accueil */

    .accueil-hero {
        min-height: 350px;
    }

    .accueil-hero-texte {
        width: 70%;
    }

    .accueil-hero h1 {
        font-size: 39px;
    }

    .accueil-categories,
    .accueil-produits,
    .accueil-boutiques {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .accueil-comment {
        grid-template-columns: 1fr;
    }

    .accueil-comment-intro {
        text-align: center;
    }

    .accueil-vendeur {
        flex-wrap: wrap;
    }

    .accueil-vendeur > .accueil-btn {
        margin-left: auto;
    }


    /* Grilles générales */

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


/* =====================================================
   3. NAVIGATION MOBILE ET TABLETTES
===================================================== */

@media (max-width: 991px) {

    .market-topbar-inner {
        flex-wrap: wrap;
        justify-content: center;
        padding: 8px 0;
        text-align: center;
    }

    .market-topbar-gauche,
    .market-topbar-droite {
        justify-content: center;
        flex-wrap: wrap;
    }

    .market-header-inner {
        gap: 15px;
    }

    .market-logo {
        order: 1;
    }

    .market-actions {
        order: 2;
        margin-left: auto;
    }

    .market-search {
        order: 3;
        flex: 0 0 100%;
        width: 100%;
        max-width: none;
    }

    .market-navigation-inner {
        min-height: 60px;
        flex-wrap: wrap;
        gap: 12px;
        padding: 8px 0;
    }

    .market-all-categories {
        flex: 1;
        min-width: 0;
    }

    .market-mobile-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }

    .market-menu-collapse {
        flex: 0 0 100%;
        width: 100%;
    }

    .market-menu-links {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0;
        width: 100%;
    }

    .market-menu-links a {
        min-height: 48px;
        padding: 10px 15px;
        border-bottom: 1px solid var(--iem-bordure);
        border-left: 3px solid transparent;
    }

    .market-menu-links a:hover,
    .market-menu-links a.nav-market-actif {
        border-bottom-color: var(--iem-bordure);
        border-left-color: var(--iem-vert);
        background: var(--iem-vert-clair);
    }
}


/* =====================================================
   4. SMARTPHONES ET PETITES TABLETTES
===================================================== */

@media (max-width: 768px) {

    /* Conteneurs */

    .container {
        width: 94%;
    }

    .section {
        padding: 35px 0;
    }

    .section-title {
        font-size: 23px;
    }


    /* Navigation */

    .market-topbar {
        font-size: 11px;
    }

    .market-header-inner {
        width: 94%;
    }

    .market-logo {
        width: 200px;
    }

    .market-actions {
        gap: 12px;
    }

    .market-search {
        height: 46px;
    }

    .market-search input {
        padding: 0 14px;
        font-size: 13px;
    }

    .market-search button {
        width: 58px;
    }

    .market-navigation-inner {
        width: 94%;
    }


    /* Page d'accueil */

    .accueil-section {
        width: 92%;
        padding: 35px 0;
    }

    .accueil-hero {
        min-height: 350px;

        background:
            linear-gradient(
                90deg,
                rgba(255,255,255,.96),
                rgba(255,255,255,.78)
            ),
            url('../images/banniere.jpg') center / cover no-repeat;
    }

    .accueil-hero-contenu {
        width: 90%;
    }

    .accueil-hero-texte {
        width: 100%;
        max-width: 600px;
        padding: 40px 0;
    }

    .accueil-hero h1 {
        font-size: 34px;
    }

    .accueil-hero-texte > p {
        font-size: 14px;
    }

    .accueil-hero-decoration {
        display: none;
    }

    .accueil-section-entete h2 {
        font-size: 25px;
    }

    .accueil-comment {
        width: 92%;
        padding: 25px 18px;
    }

    .accueil-etapes {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .accueil-vendeur {
        width: 92%;
        padding: 25px 20px;
    }

    .accueil-vendeur-texte h2 {
        font-size: 21px;
    }


    /* Grilles */

    .grid-2 {
        grid-template-columns: 1fr;
    }


    /* Formulaires */

    .form-control {
        font-size: 16px;
    }


    /* Tableaux */

    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .table-responsive table {
        min-width: 600px;
    }


    /* Pied de page */

    .footer-content {
        grid-template-columns: 1fr 1fr;
    }
}


/* =====================================================
   5. PETITS SMARTPHONES
===================================================== */

@media (max-width: 600px) {

    .market-topbar-inner {
        gap: 6px;
    }

    .market-topbar-gauche,
    .market-topbar-droite {
        gap: 9px;
    }

    .market-header-inner {
        gap: 12px;
    }

    .market-logo {
        width: 185px;
    }

    .market-actions {
        gap: 12px;
    }

    .market-account {
        font-size: 0;
        gap: 0;
    }

    .market-account i {
        font-size: 23px;
    }

    .market-register {
        padding: 10px 13px;
        font-size: 12px;
    }

    .market-cart {
        font-size: 27px;
    }

    .market-all-categories {
        min-height: 46px;
        padding: 0 13px;
        font-size: 13px;
    }

    .market-mobile-toggle {
        padding: 9px 12px;
        font-size: 13px;
    }

    .accueil-section-entete p {
        font-size: 13px;
    }

    .accueil-produit-image {
        height: 160px;
    }

    .accueil-categorie-image {
        height: 115px;
    }

    .dashboard {
        padding: 20px 3%;
    }

    .grid,
    .grid-4 {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
}


/* =====================================================
   6. TRÈS PETITS ÉCRANS
===================================================== */

@media (max-width: 480px) {

    /* Navigation */

    .market-topbar {
        font-size: 10px;
    }

    .market-topbar-inner {
        width: 94%;
    }

    .market-header-inner {
        width: 94%;
    }

    .market-logo {
        width: 165px;
    }

    .market-register {
        display: none;
    }

    .market-account i {
        font-size: 21px;
    }

    .market-cart {
        font-size: 25px;
    }

    .market-cart-count {
        min-width: 19px;
        height: 19px;
        font-size: 10px;
    }

    .market-search {
        height: 43px;
    }

    .market-search input {
        font-size: 12px;
        padding: 0 12px;
    }

    .market-search button {
        width: 48px;
        font-size: 18px;
    }

    .market-navigation-inner {
        gap: 8px;
    }

    .market-all-categories {
        font-size: 12px;
        padding: 0 10px;
    }

    .market-mobile-toggle {
        padding: 9px 10px;
        font-size: 12px;
    }


    /* Bannière */

    .accueil-hero {
        min-height: 340px;
    }

    .accueil-hero-texte {
        padding: 32px 0;
    }

    .accueil-hero h1 {
        font-size: 29px;
    }

    .accueil-surtitre {
        font-size: 11px;
    }

    .accueil-hero-texte > p {
        font-size: 13px;
    }

    .accueil-hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .accueil-hero-actions .accueil-btn {
        width: 100%;
    }

    .accueil-avantages {
        flex-direction: column;
        gap: 14px;
        margin-top: 22px;
    }

    .accueil-avantages i {
        font-size: 23px;
    }


    /* Sections */

    .accueil-section {
        width: 92%;
        padding: 28px 0;
    }

    .accueil-section-entete h2 {
        font-size: 22px;
    }

    .accueil-section-entete > span {
        font-size: 10px;
    }


    /* Catégories */

    .accueil-categories {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .accueil-categorie-image {
        height: 105px;
    }

    .accueil-categorie-info {
        padding: 11px;
    }

    .accueil-categorie-info h3 {
        font-size: 14px;
    }

    .accueil-categorie-info p {
        font-size: 11px;
        min-height: 0;
    }


    /* Produits */

    .accueil-produits {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .accueil-produit-image {
        height: 130px;
    }

    .accueil-produit-info {
        padding: 11px;
    }

    .accueil-produit-info h3 {
        font-size: 14px;
    }

    .accueil-prix {
        font-size: 16px;
    }

    .accueil-produit-bouton {
        font-size: 11px;
        padding: 9px 5px;
    }


    /* Boutiques */

    .accueil-boutiques {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .accueil-boutique-card {
        padding: 13px;
    }


    /* Étapes */

    .accueil-comment {
        padding: 22px 15px;
    }

    .accueil-comment-intro h2 {
        font-size: 22px;
    }


    /* Espace vendeur */

    .accueil-vendeur {
        flex-direction: column;
        align-items: flex-start;
        padding: 22px 18px;
    }

    .accueil-vendeur-icone {
        width: 60px;
        height: 60px;
        font-size: 27px;
    }

    .accueil-vendeur-texte h2 {
        font-size: 20px;
    }

    .accueil-vendeur > .accueil-btn {
        width: 100%;
        margin: 0;
    }


    /* Pied de page */

    .footer-content {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .footer {
        padding: 28px 5%;
    }


    /* Boutons généraux */

    .btn {
        padding: 10px 14px;
        font-size: 13px;
    }


    /* Tableaux de bord */

    .grid,
    .grid-2,
    .grid-4 {
        grid-template-columns: 1fr;
    }

    .dashboard-card {
        padding: 16px;
    }
}