/* responsive.css - ALL @media queries collected and grouped by breakpoint */

/* ============================================
   BREAKPOINT: max-width 480px (Mobile small)
   ============================================ */
@media(max-width:480px){
    /* Hero */
    .hero{min-height:80vh;padding:40px 15px;}
    .hero h1{font-size:40px !important;}
    .hero h1 span{font-size:24px !important;}
    .hero p{font-size:15px;}
    .hero-badge{padding:8px 16px;font-size:11px;letter-spacing:1px;}
    .hero-address{padding:10px 18px;font-size:12px;flex-wrap:wrap;justify-content:center;text-align:center;gap:8px;}
    .hero-cta{flex-direction:column;gap:12px;width:100%;padding:0 10px;}
    .hero-cta .btn-primary,.hero-cta .btn-secondary{width:100%;justify-content:center;padding:16px 25px;font-size:14px;}
    .social-hero{gap:15px;margin-top:30px;}
    .social-hero a{width:44px;height:44px;font-size:18px;}

    /* Hero Carousel */
    .hero-arrow{width:36px;height:36px;font-size:14px;}
    .hero-arrow.left{left:10px;}
    .hero-arrow.right{right:10px;}
    .hero-dots{bottom:15px;gap:8px;}
    .hero-dot{width:8px;height:8px;}
    .hero-carousel-admin{top:10px;right:10px;}
    .hero-carousel-admin button{padding:8px 12px;font-size:11px;}
    .carousel-slides-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));}
    .carousel-settings{grid-template-columns:1fr;}

    /* Sections */
    .features-section,.garden-section,.insta-section,.map-section,.reviews-section{padding:50px 15px;}
    .section-header h2{font-size:32px !important;}
    .section-header p{font-size:14px;}
    .feature-card{padding:25px 20px;}
    .feature-icon{width:60px;height:60px;font-size:28px;}
    .feature-card h3{font-size:18px;}
    .feature-card p{font-size:13px;}

    /* Garden */
    .garden-text h2{font-size:32px !important;}
    .garden-text p{font-size:15px;}
    .garden-visual{grid-template-columns:1fr 1fr;gap:12px;}
    .garden-item{padding:20px 15px;}
    .garden-item i{font-size:36px;}
    .garden-item h4{font-size:15px;}
    .garden-item p{font-size:12px;}

    /* Menu */
    .menu-wrap{padding:20px 12px;border-radius:16px;}
    .menu-title{font-size:34px !important;}
    .menu-sub{font-size:13px;letter-spacing:2px;}
    .search-input{padding:14px 18px 14px 45px;font-size:14px;}
    .toplines{padding:15px;font-size:12px;}
    .toplines .min{font-size:14px;}

    .sec{border-radius:14px;margin-bottom:4px;}
    .sec h2{padding:14px 16px;font-size:15px;gap:10px;}
    .sec h2 span{font-size:20px;}
    .items{padding:10px;}
    .item{padding:12px;border-radius:10px;margin-bottom:6px;}
    .row{gap:10px;}
    .name{font-size:15px;margin-bottom:3px;}
    .desc{font-size:12px;margin-top:4px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
    .price{font-size:16px;}
    .addbtn{width:100%;justify-content:center;padding:12px 16px;font-size:13px;margin-top:8px;}
    .addbtn-confirm{padding:10px 16px !important;font-size:12px !important;}
    .addbtn-cancel{padding:6px !important;font-size:11px !important;}

    /* Options */
    .optbody{padding:12px;}
    .grid2{grid-template-columns:1fr !important;}
    .grp{padding:15px;}
    .ck{padding:10px 6px;font-size:13px;}
    .pm{flex-wrap:wrap;gap:8px;padding:10px;}
    .pm .label{font-size:13px;width:100%;text-align:center;}
    .pm .ctrl{width:100%;justify-content:center;}
    .pm button{min-width:44px;min-height:44px;font-size:18px;}
    .opt-group-section{padding:12px;}
    .opt-group-title{font-size:13px;}

    /* Cart */
    .cart-section{padding:20px 15px;margin:15px 10px;border-radius:16px;}
    .cart-top{gap:15px;}
    .cart-top>div:first-child{font-size:24px !important;}
    .cart-top .meta{font-size:14px;}
    .cartrow{flex-direction:column;gap:10px;padding:15px;border-radius:12px;}
    .cartrow .right{width:100%;justify-content:space-between;}
    .cartrow .left b{font-size:16px;}
    .cartrow .price{font-size:18px;min-width:auto;}
    .infopanel{padding:20px 15px;}
    .infogrid{grid-template-columns:1fr !important;}

    /* Checkout */
    .checkout-section{margin:30px auto;padding:0 10px;}
    .checkout-card{padding:20px 15px;border-radius:16px;}
    .checkout-header h2{font-size:32px !important;}
    .checkout-header p{font-size:13px;}
    .order-summary{padding:20px 15px;}
    .summary-total{padding:18px;font-size:18px;}
    .time-slots{grid-template-columns:repeat(3,1fr);gap:8px;}
    .time-slot{padding:10px;font-size:13px;}
    .payment-option{padding:15px;gap:12px;}
    .payment-option label{font-size:14px;}
    .confirm-btn{padding:18px;font-size:15px;}
    .back-btn{padding:12px 20px;font-size:13px;}
    .promo-input-wrap{flex-direction:column;padding:15px;}

    /* About */
    .about-hero{min-height:60vh;padding:60px 15px;}
    .about-hero h1{font-size:38px !important;}
    .about-hero p{font-size:16px;}
    .story-section{padding:60px 15px;}
    .story-text h2{font-size:32px !important;}
    .story-text p{font-size:15px;}
    .story-image, .story-media{height:220px;font-size:56px;border-radius:16px;}
    .values-grid{grid-template-columns:1fr 1fr;gap:15px;}
    .value-card{padding:25px 15px;}
    .value-card i{font-size:36px;margin-bottom:15px;}
    .value-card h3{font-size:18px;margin-bottom:8px;}
    .value-card p{font-size:13px;}

    /* Reviews */
    .reviews-grid{grid-template-columns:1fr;}
    .review-card{padding:20px;}
    .insta-grid{grid-template-columns:repeat(2,1fr);gap:12px;}

    /* Newsletter */
    .newsletter-section{padding:50px 15px;}
    .newsletter-section h2{font-size:32px !important;}
    .newsletter-section p{font-size:15px;}
    .newsletter-form input{min-width:unset;padding:15px 20px;font-size:14px;}
    .newsletter-form button{padding:15px 25px;font-size:13px;}

    /* Map */
    .map-container{height:300px;}
    .map-info{bottom:10px;left:10px;padding:15px;max-width:220px;border-radius:12px;}
    .map-info h3{font-size:16px;}
    .map-info p{font-size:12px;}

    /* Footer */
    footer{padding:50px 15px 30px;margin-top:60px;}
    .footer-grid{gap:30px;}
    .footer-logo{font-size:30px;}
    .footer-col h4{font-size:28px;margin-bottom:15px;}
    .footer-col p,.footer-col a{font-size:13px;}
    .footer-social a{width:44px;height:44px;font-size:18px;}
    .footer-hours{padding:18px;}
    .footer-bottom{font-size:12px;}

    /* FABs */
    .fab-container{bottom:85px;right:12px;gap:10px;}
    .fab{width:46px;height:46px;font-size:18px;}

    /* Chatbot */
    .chatbot-container{width:calc(100vw - 20px);right:10px;bottom:85px;max-width:100vw;border-radius:20px;}
    .chatbot-messages{height:250px;padding:15px;}
    .chatbot-input{padding:10px;}

    /* Mini Cart */
    .miniCart{
        position:fixed !important;
        bottom:calc(55px + env(safe-area-inset-bottom, 0px)) !important;
        right:0 !important;
        left:0 !important;
        width:100% !important;
        max-width:none !important;
        top:auto !important;
        transform:none !important;
        border-radius:0 !important;
        max-height:52px;
        overflow:hidden;
        transition:max-height .3s ease;
    }
    .miniCart.expanded{
        max-height:280px;
    }
    .miniHead{
        border-radius:0 !important;
        padding:14px 20px !important;
    }
    .miniHead b{font-size:14px;}
    .menu-grid{padding-bottom:120px;}
    .miniBody{padding:15px;}
    .miniBtns button{padding:12px;font-size:12px;}

    /* Admin */
    .admin-panel{padding:calc(10px + env(safe-area-inset-top)) 10px calc(10px + env(safe-area-inset-bottom)) 10px;}
    .admin-header{flex-direction:column;align-items:stretch;gap:12px;margin-bottom:20px;padding-bottom:15px;}
    .admin-header h2{font-size:18px;}
    .admin-header>div{display:flex;flex-wrap:wrap;gap:8px;}
    .admin-header .btnBig{padding:10px 15px;font-size:11px;flex:1;min-width:0;white-space:nowrap;}
    .admin-tabs{gap:5px;overflow-x:auto;flex-wrap:nowrap;padding-bottom:8px;}
    .admin-tab{padding:8px 12px;font-size:11px;flex-shrink:0;}
    .admin-grid{grid-template-columns:1fr !important;}
    .admin-section{padding:12px;margin-bottom:12px;border-radius:16px;}
    .admin-section h3{font-size:18px !important;margin-bottom:15px;}

    /* Auth */
    .auth-box{padding:25px 18px;border-radius:20px;}
    .auth-box h3{font-size:24px !important;}
    .auth-box input{padding:15px;font-size:14px;margin-bottom:15px;}
    .auth-box button{padding:15px;font-size:14px;}

    /* Admin badges */
    #adminModeBadge,#adminFrontBadge{
        top:55px !important;
        left:10px !important;
        padding:8px 14px !important;
        font-size:11px !important;
        border-radius:20px !important;
    }
    #adminEditHint{
        max-width:240px !important;
        right:10px !important;
        bottom:85px !important;
        font-size:11px !important;
        padding:12px 15px !important;
    }

    /* Admin access */
    .admin-access{display:none;}
    .admin-access button{padding:8px 14px;font-size:11px;}

    /* Uber */
    .uber-fixed{top:55px !important;right:8px !important;padding:8px 14px !important;font-size:10px !important;gap:6px !important;}

    /* Nav */
    :root{--header-h:50px;}
    .navbar{padding:6px 10px;}
    .logo{font-size:18px;gap:6px;}
    .logo-icon{width:28px;height:28px;font-size:15px;}
    body{padding-bottom:calc(65px + env(safe-area-inset-bottom));}
    .nav-links{padding:10px 15px calc(10px + env(safe-area-inset-bottom)) 15px;gap:15px;}
    .nav-links a{font-size:11px;gap:4px;padding:6px 0;}
    .nav-links a i{font-size:14px;}

    /* Admin Menu Editor Mobile */
    .admin-item-card>div:first-child{flex-direction:column !important;gap:10px !important;}
    .admin-item-card>div:first-child>div:first-child{
        width:100% !important;height:100px !important;
    }
    .admin-item-card>div:first-child>div:first-child>div:first-child{
        width:100% !important;height:100% !important;
    }
    .admin-item-card>div:first-child>div:nth-child(2){min-width:0 !important;}
    .admin-item-card select,
    .admin-item-card input[type="text"],
    .admin-item-card input[type="number"]{font-size:16px !important;min-height:44px;}
    .admin-item-card button{min-width:44px;min-height:44px;}
    .admin-opt-header{flex-direction:column !important;align-items:stretch !important;}
    .admin-opt-header input[type="text"]{min-width:0 !important;width:100% !important;}
    .admin-opt-header select{width:100% !important;}
    .admin-opt-header label{min-height:44px;}
    .admin-opt-header button{align-self:flex-end !important;}

    /* Theme / Floating */
    .theme-grid { grid-template-columns:1fr; }
    .float-style-panel { width:calc(100% - 30px); }
    .fab-add-img { bottom:80px;right:15px;width:48px;height:48px;font-size:20px; }

    /* In-app browser hero */
    @supports (min-height: 100dvh) {
        .hero { min-height: 80dvh; }
    }
}

/* ============================================
   BREAKPOINT: 481px - 768px (Mobile large)
   ============================================ */
@media(min-width:481px) and (max-width:768px){
    .cart-section{padding:25px 20px;margin:25px 15px;}
    .checkout-card{padding:30px 20px;}
    .cartrow{padding:18px;}
    .miniCart{
        position:fixed !important;
        bottom:75px !important;
        right:15px !important;
        top:auto !important;
        transform:none !important;
    }
    .admin-grid{grid-template-columns:1fr !important;}
    .values-grid{grid-template-columns:1fr 1fr;}
}

/* ============================================
   BREAKPOINT: max-width 768px (Tablet)
   ============================================ */
@media(max-width:768px){
    /* Root */
    :root{--header-h:60px;}

    /* Navbar */
    .navbar{padding:8px 15px;}
    .nav-content{flex-wrap:nowrap;gap:10px;}
    .logo{font-size:22px;gap:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
    .logo-icon{width:32px;height:32px;font-size:18px;flex-shrink:0;}
    .nav-links{
        position:fixed;
        bottom:0;
        left:0;
        right:0;
        background:var(--bg);
        padding:15px 20px;
        border-top:2px solid var(--accent-modern);
        justify-content:flex-start;
        gap:20px;
        z-index:999;
    }
    .nav-links li{flex-shrink:0;}
    body{padding-bottom:80px;}

    /* Uber */
    .uber-fixed{top:90px;right:10px;padding:10px 18px;font-size:11px;}

    /* FABs */
    .fab-container{bottom:100px;right:20px;}

    /* Garden */
    .garden-grid{grid-template-columns:1fr;}

    /* General */
    .hero h1{font-size:55px;}
    .hero h1 span{font-size:32px;}
    .menu-title{font-size:42px;}
    .about-hero h1{font-size:52px;}
    .fab{width:50px;height:50px;font-size:20px;}
    .section-header h2{font-size:42px;}
    .story-text h2{font-size:42px;}

    /* Story */
    .story-block{grid-template-columns:1fr;gap:40px;}
    .story-block:nth-child(even) .story-text{order:1;}

    /* Orders */
    .order-header{flex-direction:column;}
    .order-info-row{flex-direction:column;gap:8px;}
    .order-actions{justify-content:stretch;}
    .order-actions .order-btn{flex:1;justify-content:center;}

    /* Menu item row */
    .menu-item-row{grid-template-columns:1fr 1fr;gap:10px;}

    /* In-app browser nav */
    .nav-links {
        bottom: env(safe-area-inset-bottom, 0px);
    }

    /* Side cart in webview */
    .sidecart {
        padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px));
    }

    /* In-app browser specific */
    .in-app-browser .nav-links {
        bottom: env(safe-area-inset-bottom, 0px);
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    }

    .in-app-browser body {
        padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px));
    }

    .in-app-browser .miniCart {
        bottom: calc(75px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* Instagram inline feed */
    #translateBtn{width:14px;height:14px;font-size:8px;top:3px;left:3px;}
    #translateDropdown{top:20px;left:3px;}
}

/* ============================================
   BREAKPOINT: min-width 600px
   ============================================ */
@media(min-width:600px){
    .grid2{grid-template-columns:1fr 1fr;}
    .infogrid{grid-template-columns:1fr 1fr;}
}

@media(max-width:600px){
    #instaFeedGrid{grid-template-columns:repeat(3,1fr);gap:2px;}
}

/* ============================================
   BREAKPOINT: min-width 900px
   ============================================ */
@media(min-width:900px){
    .menu-grid{grid-template-columns:1fr 1fr;}
}

/* ============================================
   BREAKPOINT: min-width 1200px
   ============================================ */
@media(min-width:1200px){
    .menu-layout{grid-template-columns:1fr 380px;align-items:start;}
    .sidecart{display:block;}
}

/* Affichage miniCart uniquement en dessous de 1200px */
@media(max-width:1199px){
    #page-menu .miniCart{display:block;}
}

/* ============================================
   Touch targets (pointer:coarse)
   ============================================ */
@media(hover:none) and (pointer:coarse){
    .ck{padding:12px 8px;min-height:44px;}
    .pm button{min-width:44px;min-height:44px;}
    .addbtn{min-height:48px;}
    .time-slot{min-height:44px;display:flex;align-items:center;justify-content:center;}
    .payment-option{min-height:56px;}
    .inp{min-height:48px;font-size:16px;}
    .search-input{font-size:16px;}
    .opthead{min-height:48px;}
    .sc-btn{min-height:48px;}
    /* Grip drag catégories admin - zone tactile élargie */
    .sec h2 .fa-grip-lines{
        padding:12px 14px;margin:-12px -4px -12px -14px;
        min-width:44px;min-height:44px;display:inline-flex;
        align-items:center;justify-content:center;font-size:18px;
    }
    /* Grip drag articles admin - zone tactile élargie */
    .item-grip{
        padding:12px 10px !important;min-width:44px;min-height:44px;
        display:inline-flex !important;align-items:center;justify-content:center;
    }
}