/* =====================================================================
   Fiesta — Couche mobile-first (parcours client)
   ---------------------------------------------------------------------
   Couche ADDITIVE et réversible : chargée APRÈS les CSS existants.
   Objectif : rendre tout le parcours client confortable sur mobile
   sans réécrire les gabarits. Les règles desktop existantes restent
   intactes (corrections limitées aux petits écrans + quelques règles
   universelles sans risque).
   Pour désactiver : retirer le <link> mobile-first.css des layouts.
   ===================================================================== */

/* ------------------------------------------------------------------ */
/* 1. Universel (toutes tailles) — anti-débordement & médias fluides   */
/* ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html, body {
    max-width: 100%;
    overflow-x: hidden;            /* supprime le scroll horizontal parasite */
}

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

/* Les tableaux larges deviennent défilables au lieu de casser la page */
.table-responsive { -webkit-overflow-scrolling: touch; }

/* Évite qu'un mot/URL très long élargisse la page */
p, span, a, h1, h2, h3, h4, h5, li, td, th, .cardBody span { overflow-wrap: anywhere; }

/* ================================================================== */
/* 2. TABLETTE ET MOBILE  (<= 991px)                                   */
/* ================================================================== */
@media (max-width: 991.98px) {
    /* Confort de lecture des conteneurs pleine largeur */
    .container-fluid { padding-left: 14px; padding-right: 14px; }

    /* Bannières de catégorie moins hautes */
    .topMain { padding: 28px 16px; background-position: center; }
    .topMain .breadcumb, .breadcumb { font-size: 1.6rem; }
    .topMain .category { font-size: .8rem; }
}

/* ================================================================== */
/* 3. MOBILE  (<= 767px)                                               */
/* ================================================================== */
@media (max-width: 767.98px) {

    /* ---- Typographie : on réduit les très gros titres ---- */
    h1, .h1 { font-size: 1.6rem; line-height: 1.2; }
    h2, .h2 { font-size: 1.35rem; line-height: 1.25; }
    h3, .h3 { font-size: 1.15rem; }
    .section-title { font-size: 1.5rem !important; }

    /* ---- En-tête : logo et icônes proportionnés ---- */
    .logo-head img { max-height: 64px; width: auto; }
    .head-icon-group { justify-content: center; }
    .head-icon-group img { width: 32px !important; height: auto; }

    /* ---- Navigation : items confortables au doigt ---- */
    #navigation .navbar-nav .cool-link {
        display: block;
        padding: 12px 6px;
        font-size: 1rem;
    }
    #navigation .navbar-toggler {
        padding: 10px 14px;
        font-size: 1rem;
        border: 1px solid rgba(255,255,255,.5);
        border-radius: 6px;
    }
    /* Sous-menus déroulants lisibles en pleine largeur */
    #navigation .dropdown-menu {
        position: static !important;
        float: none;
        width: 100%;
        box-shadow: none;
    }

    /* ---- Cibles tactiles : boutons & liens d'action ---- */
    .btn, .btn-fiesta, .btn-fiesta-outline, .cartAddlock, .cartAcartAddlock {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    /* Boutons d'action principaux en pleine largeur sur mobile */
    .btn-lg, .btn-js-block, .btn-block-mobile {
        width: 100%;
        margin-bottom: 10px;
    }
    .float-lg-right { float: none !important; }

    /* ---- Formulaires : champs pleine largeur & taille de saisie ---- */
    .form-control, .custom-select, select, input[type="text"],
    input[type="email"], input[type="tel"], input[type="number"], textarea {
        width: 100%;
        font-size: 16px;            /* évite le zoom auto iOS au focus */
    }
    .input-group { flex-wrap: nowrap; }

    /* ---- Catalogue : 2 produits par ligne sur mobile ---- */
    /* Rattrape les colonnes Bootstrap 3 (col-xs-*) ignorées par BS4 */
    [class*="col-xs-12"] { flex: 0 0 100%; max-width: 100%; }
    [class*="col-xs-6"]  { flex: 0 0 50%;  max-width: 50%;  }
    [class*="col-xs-4"]  { flex: 0 0 33.333%; max-width: 33.333%; }
    [class*="col-xs-3"]  { flex: 0 0 50%;  max-width: 50%;  }
    [class^="col-xs-"], [class*=" col-xs-"] {
        position: relative;
        width: 100%;
        padding-right: 8px;
        padding-left: 8px;
    }

    /* Carte produit compacte et homogène */
    .cardBox { height: auto; }
    .cardBox .zoom-box img, .cardBox .img-fluid { width: 100%; object-fit: cover; }
    .cardBody span { font-size: .85rem; line-height: 1.2; }
    .cardFooter { font-size: .9rem; }

    /* ---- Panier & récap : tableaux compacts ---- */
    .table-responsive > .table { min-width: 520px; } /* défilement propre */
    .table td, .table th { padding: .5rem; font-size: .85rem; vertical-align: middle; }

    /* ---- Modales : occupent l'écran proprement ---- */
    .modal-dialog { margin: .5rem; }
    .modal-xl, .modal-lg { max-width: calc(100% - 1rem); }

    /* ---- Pied de page : centré et aéré ---- */
    footer .col-md-2 { display: none; }
    footer .ft-info, footer .text-justify { text-align: center !important; }
    footer .font-size-24 { font-size: 1rem; }
}

/* ================================================================== */
/* 4. PETIT MOBILE  (<= 480px)                                         */
/* ================================================================== */
@media (max-width: 480px) {
    .topMain .breadcumb, .breadcumb { font-size: 1.35rem; }

    /* Quantité + bouton ajouter empilés et pleine largeur */
    .cardFooter .input-group { width: 100%; }
    .cartAddBlock .cartAdd, .cartAddBlock .cartAddlock { width: 100%; }

    /* Bandeau d'icônes d'en-tête plus serré */
    .head-icon-group img { width: 28px !important; }
}