/* ====================================================================
 *  MIAMY — Fixes responsive globaux (front public)
 *
 *  Charger APRÈS Bootstrap pour pouvoir overrider. Cible les inline
 *  styles en pixels durs des pages PHP existantes.
 *
 *  Breakpoints :
 *    < 992px    : tablette + mobile (drawer header s'active)
 *    < 768px    : mobile (gros pass de simplification)
 *    < 576px    : petit mobile
 *    < 380px    : très petit (iPhone SE 1, vieux Android)
 * ==================================================================== */

/* ============================================================
 *  ANTI-DÉBORDEMENT UNIVERSEL (toutes tailles)
 *  Note: NE PAS toucher au max-width de .container — Bootstrap
 *  le gère selon le breakpoint (540/720/960/1140/1320px).
 * ============================================================ */
html, body { overflow-x: hidden; }
img { max-width: 100%; height: auto; }
pre, code { white-space: pre-wrap; word-break: break-word; }

/* Form fields focus orange Miamy partout */
.form-control:focus, .form-select:focus {
    border-color: #ff8c4d !important;
    box-shadow: 0 0 0 .2rem rgba(232, 93, 42, .12) !important;
}
.btn-primary:not(.ck-btn-orange):not(.bo-action-btn) {
    background-color: #e85d2a;
    border-color: #e85d2a;
}
.btn-primary:not(.ck-btn-orange):not(.bo-action-btn):hover,
.btn-primary:not(.ck-btn-orange):not(.bo-action-btn):focus {
    background-color: #cc4d1f;
    border-color: #cc4d1f;
}

/* ============================================================
 *  TABLETTE (< 992px)
 * ============================================================ */
@media (max-width: 991.98px) {
    /* Heros padding desktop trop fort */
    section[style*="padding:90px 0 110px"],
    section[style*="padding:90px 0 100px"],
    section[style*="padding:80px 0 90px"],
    section[style*="padding:70px 0 80px"] {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }
    /* H1 hero trop gros */
    section h1[style*="font-size:3rem"],
    section h1[style*="font-size: 3rem"],
    section h1[style*="font-size:3.2rem"],
    section h1[style*="font-size: 3.2rem"] {
        font-size: 2.2rem !important;
    }
    /* Cache image décorative cot droit du hero (gain de place) */
    section .col-lg-6.d-none.d-lg-block,
    section .col-lg-5.d-none.d-lg-block {
        display: none !important;
    }
    /* Hero pour-les-restaurateurs : col-lg-7 prend 100% */
    section .col-lg-7 { flex: 0 0 100%; max-width: 100%; }
}

/* ============================================================
 *  MOBILE (< 768px) — gros pass
 * ============================================================ */
@media (max-width: 767.98px) {

    /* === HEROS === */
    section[style*="padding:"] {
        padding-top: 36px !important;
        padding-bottom: 44px !important;
    }
    section[style*="padding:50px 0"] {
        padding-top: 28px !important;
        padding-bottom: 28px !important;
    }
    .section_padding { padding: 32px 0 !important; }
    .ck-section { padding: 24px 0 50px !important; }

    /* === Titres === */
    section h1,
    section h1[style*="font-size"] {
        font-size: 1.7rem !important;
        line-height: 1.18 !important;
        letter-spacing: -.01em !important;
        word-break: normal;
        hyphens: none;
    }
    section h2,
    section h2[style*="font-size"] {
        font-size: 1.35rem !important;
        line-height: 1.25 !important;
    }
    section h3 { font-size: 1.1rem !important; }
    section h4 { font-size: 1rem !important; }
    section h5 { font-size: .95rem !important; }
    section .lead, section p[style*="font-size:1.2"],
    section p[style*="font-size:1.15"], section p[style*="font-size:1.1"] {
        font-size: .96rem !important;
    }

    /* === HERO IMAGE / DÉCORATIONS === */
    /* Cercle décoratif rond 280px → 180px sur mobile */
    [style*="width:280px"][style*="height:280px"] {
        width: 180px !important; height: 180px !important;
    }
    [style*="width:400px"],
    [style*="width:500px"],
    [style*="height:400px"],
    [style*="height:500px"] {
        width: 200px !important; height: 200px !important;
    }
    /* Pills flottantes décoratives → cachées en mobile */
    section .position-absolute[style*="background:#fff"][style*="border-radius:100px"] {
        display: none !important;
    }
    /* Hero icon font fa-5x → fa-3x en mobile */
    section .fa-5x { font-size: 2.4rem !important; }

    /* === STATS hero (chiffres + label) === */
    [style*="font-size:3.5rem"] { font-size: 1.8rem !important; }
    [style*="font-size:3.2rem"] { font-size: 1.7rem !important; }
    [style*="font-size:3rem"]:not(h1):not(h2):not(h3) { font-size: 1.6rem !important; }
    [style*="font-size:2.4rem"] { font-size: 1.4rem !important; }
    [style*="font-size:2.3rem"] { font-size: 1.4rem !important; }
    [style*="font-size:2.2rem"] { font-size: 1.35rem !important; }
    [style*="font-size:2rem"]:not(h1):not(h2) { font-size: 1.25rem !important; }
    [style*="font-size:1.5rem"] { font-size: 1.1rem !important; }

    /* === Encart prix latéral du hero pour-les-restaurateurs === */
    [style*="background:rgba(255,255,255,.05)"][style*="backdrop-filter"] {
        padding: 20px 16px !important;
    }

    /* === BARRE DE RECHERCHE INLINE → STACK === */
    form.bg-white.shadow.rounded-pill,
    form.rounded-pill[class*="d-flex"] {
        flex-wrap: wrap !important;
        border-radius: 14px !important;
        padding: 8px !important;
    }
    form.bg-white.shadow.rounded-pill input.form-control,
    form.rounded-pill[class*="d-flex"] input.form-control {
        flex: 1 1 100%;
        margin-bottom: 8px;
        padding: .55rem 1rem !important;
    }
    form.bg-white.shadow.rounded-pill button,
    form.rounded-pill[class*="d-flex"] button {
        flex: 1 1 100%;
        border-radius: 100px !important;
        padding: .55rem 1.2rem !important;
    }
    form.bg-white.shadow.rounded-pill .fa-search { display: none !important; }

    /* === STATS row 4 col → 2 col (déjà col-md-3 col-6 mais on reforce le tassement) === */
    .row.text-center > .col-md-3 small,
    .row.text-center > .col-6 small { font-size: .72rem !important; }

    /* === GRILLES BOOTSTRAP === */
    /* col-md-3 / col-lg-3 sans col-X explicite : forcer 12 cols par défaut bootstrap auto, OK */
    /* Garantir que tout col-lg-X devient 100% en mobile (Bootstrap le fait déjà) */

    /* === BOUTONS === */
    /* Boutons grands plein largeur dans heros et CTA */
    section .btn.btn-lg,
    section .ck-btn-orange {
        width: 100% !important;
        font-size: 1rem !important;
        padding: 12px 20px !important;
    }
    /* Sauf si dans une row de boutons côte à côte */
    section .d-flex.gap-3 .btn-lg,
    section .d-flex.gap-2 .btn-lg {
        flex: 1 1 100%;
    }

    /* === CARDS === */
    .card-body, .card-body.p-4 { padding: 16px !important; }
    [class*="rounded"][style*="padding:32px"] { padding: 18px !important; }
    [style*="padding:36px"] { padding: 18px !important; }
    [style*="padding:28px"] { padding: 16px !important; }

    /* === Comparatif tableau Miamy vs concurrents === */
    .table-responsive table { font-size: .82rem; }
    .table th, .table td {
        padding: 8px 6px !important;
        font-size: .82rem !important;
    }
    .table th:first-child, .table td:first-child {
        position: sticky; left: 0; background: #fff; z-index: 1;
    }

    /* === Tarifs cards : pas de scale === */
    [style*="transform:scale(1.02)"],
    [style*="transform: scale(1.02)"] { transform: none !important; }
    [style*="border-radius:18px"][style*="padding:36px 28px"] {
        padding: 24px 18px !important;
    }
    /* Prix gros 3rem → 2rem */
    [style*="font-size:3rem"]:not(h1):not(h2) { font-size: 1.8rem !important; }

    /* === FOOTER === */
    .miamy-footer { padding: 40px 0 0 !important; }
    .miamy-footer h5.col-title { margin-bottom: .8rem; font-size: .85rem; }
    .miamy-footer ul li { margin-bottom: .35rem; font-size: .88rem; }
    .miamy-footer .row > [class*="col-"] { margin-bottom: 1.2rem; }
    .miamy-footer-bottom {
        margin-top: 30px !important;
        padding: 1rem 0 !important;
        font-size: .78rem;
    }
    .miamy-footer-bottom .d-flex {
        flex-direction: column;
        gap: 6px !important;
        text-align: center;
    }
    .miamy-back-top {
        bottom: 16px !important; right: 16px !important;
        width: 40px !important; height: 40px !important;
    }

    /* === PANIER FAB (cart-fab) coin bas droit === */
    [id="cart-fab"], [id="cartFab"] {
        bottom: 16px !important; right: 16px !important;
        font-size: .85rem !important;
        padding: 10px 16px !important;
    }

    /* === COMMANDE — bandeau brun récap : compact === */
    .ck-recap-header { padding: 12px 14px !important; font-size: 1rem !important; }
    .ck-grand span:first-child { font-size: 1rem !important; }
    .ck-grand span:last-child { font-size: 1.25rem !important; }

    /* === Form fields anti-zoom iOS === */
    input, select, textarea, .form-control, .form-select {
        font-size: 16px !important;
    }

    /* === Container plus serré === */
    .container { padding-left: 14px !important; padding-right: 14px !important; }

    /* === Min-height fixe (hero restaurant) === */
    [style*="min-height:440px"] { min-height: 240px !important; }
    [style*="padding-bottom:110px"] { padding-bottom: 30px !important; }

    /* === Info strip resto 4 cols → 2 cols === */
    [style*="grid-template-columns:repeat(4"],
    [style*="grid-template-columns: repeat(4"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    /* === Sticky désactivé (récap commande, sidebar) === */
    [style*="position:sticky"] {
        position: relative !important;
        top: auto !important;
    }

    /* === Newsletter section : stack vertical === */
    section[style*="linear-gradient(135deg, #e85d2a 0%, #ff8c4d 100%)"] form,
    section[style*="linear-gradient(135deg,#e85d2a 0%,#ff8c4d 100%)"] form {
        flex-direction: column !important;
    }
    section[style*="linear-gradient(135deg, #e85d2a 0%, #ff8c4d 100%)"] form input,
    section[style*="linear-gradient(135deg, #e85d2a 0%, #ff8c4d 100%)"] form button {
        width: 100% !important;
    }

    /* === FAQ accordion === */
    .accordion-button { font-size: .92rem !important; padding: 12px 14px !important; }
    .accordion-body { padding: 12px 14px !important; font-size: .9rem; }

    /* === Eyebrow pills plus petits === */
    section .rounded-pill[style*="font-size:.85rem"] {
        font-size: .75rem !important;
        padding: 4px 10px !important;
    }

    /* === Hero cards image (coups de cœur) hauteur réduite === */
    img[style*="height:200px"] { height: 150px !important; }
    img[style*="height:220px"] { height: 160px !important; }
    img[style*="height:250px"] { height: 170px !important; }

    /* === Catégories card padding === */
    .category-card { padding: 16px 8px !important; }
    .category-card .fa-2x { font-size: 1.4rem !important; }
    .category-card h5 { font-size: .85rem !important; margin-top: 4px; }

    /* === Pills/badges qui peuvent déborder === */
    .badge, .miamy-pill { white-space: normal !important; word-break: break-word; }

    /* === Page commande : récap mobile === */
    .ck-card-header { padding: 12px 14px !important; }
    .ck-card-header h5 { font-size: .92rem !important; }
    .ck-mode { padding: 12px 8px !important; }
    .ck-mode i { font-size: 1.3rem !important; margin-bottom: 4px !important; }
    .ck-mode__lbl { font-size: .8rem !important; }

    /* === PAGE RESTAURANT : éviter casse === */
    /* Scrollable menu sticky en haut → relative en mobile */
    section[id="resto-menu"] [style*="position:sticky"] {
        position: relative !important;
        top: auto !important;
    }
}

/* ============================================================
 *  PETIT MOBILE (< 576px)
 * ============================================================ */
@media (max-width: 575.98px) {
    section h1, section h1[style*="font-size"] { font-size: 1.5rem !important; }
    section h2, section h2[style*="font-size"] { font-size: 1.2rem !important; }

    section[style*="padding:"] {
        padding-top: 28px !important;
        padding-bottom: 36px !important;
    }
    .section_padding { padding: 24px 0 !important; }

    /* Container plus serré */
    .container { padding-left: 12px !important; padding-right: 12px !important; }

    /* Cards padding minimum */
    .card-body, .card-body.p-4, [class*="rounded"][style*="padding:"] {
        padding: 14px !important;
    }

    /* Stats numbers */
    [style*="font-size:2.4rem"],
    [style*="font-size: 2.4rem"] { font-size: 1.3rem !important; }

    /* Boutons CTA en mobile */
    section .btn.btn-lg { font-size: .92rem !important; padding: 10px 16px !important; }

    /* Modal commande pleins écran */
    .modal-dialog { margin: 8px !important; }

    /* Pills flottantes hero liste-restaurants — encore plus cachées */
    section .position-absolute { font-size: .7rem !important; }

    /* Cercle décoratif liste-restaurants : encore réduit */
    [style*="width:180px"][style*="height:180px"] {
        width: 130px !important; height: 130px !important;
    }
    [style*="width:280px"] .fa-utensils { font-size: 3rem !important; }
}

/* ============================================================
 *  TRÈS PETIT (< 380px) — iPhone SE 1, vieux Android
 * ============================================================ */
@media (max-width: 379.98px) {
    section h1, section h1[style*="font-size"] { font-size: 1.35rem !important; }
    section h2, section h2[style*="font-size"] { font-size: 1.1rem !important; }
    .container { padding-left: 10px !important; padding-right: 10px !important; }
    .card-body { padding: 12px !important; }

    /* Eyebrow pills minuscules */
    section .rounded-pill { font-size: .68rem !important; padding: 3px 8px !important; }

    /* Header brand plus petit */
    .miamy-brand .brand-text, .navbar-brand { font-size: 1.1rem !important; }
}

/* ============================================================
 *  TOUCH TARGETS — minimum 44x44px partout pour iOS guidelines
 * ============================================================ */
@media (max-width: 767.98px) {
    button, .btn, a.btn {
        min-height: 40px;
    }
    a.nav-link, .drawer-link, .miamy-icon-btn {
        min-height: 44px;
        display: inline-flex !important;
        align-items: center;
    }
}