/* ============================================================
   Le Cayenne — Mobile optimizations
   Loaded LAST. Mobile-first fixes + touch + readability.
   ============================================================ */

/* ===== Touch targets — ensure 44px minimum ===== */
@media (max-width: 800px) {
  button, .lc-btn, .lc-cat-tab, .lc-diet-chip, .lc-nav-link, .lc-mobile-link {
    min-height: 44px;
  }
  .lc-nav-btn-cart, .lc-nav-btn-account { min-height: 40px; }
}

/* ===== Modal — full screen on mobile ===== */
/* [MOBILE-FULLSCREEN 2026-07-12] Breakpoint aligné à 800px (= celui du footer fixe wizard,
   plus bas) pour éviter que le modal flotte à 680px pendant que le footer est collé en bas
   → footer détaché. On cible aussi .lc-modal--full explicitement (spécificité 0,2,0) pour
   battre sa règle desktop, et on utilise 100dvh pour que le bouton "Continuer" ne passe pas
   sous la barre d'URL mobile. */
@media (max-width: 800px) {
  .lc-modal-backdrop { padding: 0; }
  .lc-modal, .lc-modal--full {
    max-width: 100%;
    max-height: 100vh; height: 100vh;
    max-height: 100dvh; height: 100dvh;
    border-radius: 0;
  }
  .lc-modal-close { top: 12px; right: 12px; }
}

/* ===== Cart drawer — better mobile UX ===== */
@media (max-width: 480px) {
  .lc-cart-drawer { width: 100vw; }
  .lc-cart-head { padding: 18px 18px 12px; }
  .lc-cart-body, .lc-cart-foot { padding-left: 18px; padding-right: 18px; }
  .lc-cart-section { padding-top: 14px; margin-top: 14px; }
}

/* ===== Hero ===== */
@media (max-width: 640px) {
  .lc-hero { padding-top: 24px; padding-bottom: 40px; }
  .lc-hero-text { order: 1; }
  .lc-hero-art { order: 2; aspect-ratio: 1/1; }
  .lc-hero-art-floating { font-size: 11px; padding: 10px 14px; }
  .lc-hero-art-floating--tl { left: -8px; top: 18%; }
  .lc-hero-art-floating--br { right: -8px; bottom: 8%; }
  .lc-hero-stats { gap: 18px; margin-top: 24px; }
  .lc-hero-ctas { flex-direction: column; }
  .lc-hero-ctas .lc-btn { width: 100%; justify-content: center; }
  .lc-search-hero { padding: 4px 4px 4px 18px; }
  .lc-search-hero input { padding: 12px 6px; font-size: 14px; }
  .lc-search-hero-btn { padding: 10px 14px; font-size: 11px; }
}

/* ===== Sections — tighter spacing on mobile ===== */
@media (max-width: 640px) {
  .lc-section { padding: 40px 0; }
  .lc-section-head { margin-bottom: 22px; gap: 14px; }
  .lc-section-head h1, .lc-section-head h2 { font-size: clamp(28px, 8vw, 36px); }
  .lc-section-head p { font-size: 13.5px; }
  .lc-section-head .lc-btn { width: 100%; justify-content: center; }
}

/* ===== Stats grid ===== */
@media (max-width: 600px) {
  .lc-stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .lc-stats-grid > div { padding: 18px 14px !important; }
}

/* ===== Featured card ===== */
@media (max-width: 700px) {
  .lc-featured { border-radius: 22px; }
  .lc-featured-art { min-height: 220px; }
  .lc-featured-bottom { flex-direction: column; align-items: stretch; gap: 12px; }
  .lc-featured-bottom .lc-btn { justify-content: center; }
}

/* ===== Daily special ===== */
@media (max-width: 700px) {
  .lc-special { padding: 24px; flex-direction: column; gap: 18px; }
  .lc-special-art { font-size: 80px; align-self: center; }
  .lc-special-foot { flex-direction: row; flex-wrap: wrap; }
  .lc-special-foot .lc-btn { width: 100%; }
}

/* ===== Why grid - on phones use a single column ===== */
@media (max-width: 480px) {
  .lc-why { grid-template-columns: 1fr; gap: 12px; }
  .lc-why-card { padding: 20px; }
}

/* ===== Testimonials ===== */
@media (max-width: 480px) {
  .lc-testi { grid-template-columns: 1fr; }
  .lc-testi-card { padding: 20px; }
}

/* ===== Gallery — bigger tiles on phone ===== */
@media (max-width: 480px) {
  .lc-gallery { grid-template-columns: repeat(3, 1fr); gap: 8px; }
}

/* ===== Loyalty ===== */
@media (max-width: 800px) {
  .lc-loyalty { gap: 18px; }
  .lc-wallet { padding: 22px; }
  .lc-wallet-bal-num { font-size: 56px; }
  .lc-wallet-code { gap: 12px; padding: 14px; }
  .lc-wallet-code-qr { width: 72px; height: 72px; }
  .lc-wallet-code-cta { padding: 8px 10px; font-size: 10.5px; }
  .lc-actions, .lc-rdl-actions { grid-template-columns: 1fr 1fr; gap: 8px; }
  .lc-rdl-actions > * { padding: 14px 6px; }
  .lc-tier-stop-label { font-size: 8.5px; letter-spacing: 0.06em; }
  .lc-achievements { grid-template-columns: repeat(2, 1fr); }
  .lc-streak { padding: 16px; gap: 12px; }
  .lc-streak-icon { font-size: 32px; }
  .lc-streak-title { font-size: 18px; }
  .lc-streak div:last-child { font-size: 26px !important; }
  .lc-leader { padding: 18px; }
}

/* ===== Profile grid (loyalty v2 tabs) ===== */
@media (max-width: 700px) {
  .lc-profile-grid { gap: 14px; }
  .lc-profile-card { padding: 20px; }
  .lc-profile-name { font-size: 22px; }
}

/* ===== Funnel pickup grid ===== */
@media (max-width: 560px) {
  .lcf-pickup-rows { grid-template-columns: 1fr 1fr; }
  .lcf-pickup-slot { padding: 12px 8px; font-size: 12px; }
  .lcf-pickup-slot-time { font-size: 13px; }
  .lcf-pickup-day { padding: 10px 12px; }
  .lcf-pickup-day-n { font-size: 18px; }
  .lcf-grid { gap: 14px; }
  .lcf-card { padding: 22px; border-radius: 20px; }
  .lcf-card h2 { font-size: 26px; }
  .lcf-summary { padding: 20px; border-radius: 20px; }
  .lcf-summary-row-thumb { width: 36px; height: 36px; font-size: 18px; }
  .lcf-summary-totals-row.is-total b { font-size: 22px; }
  .lcf-steps { font-size: 12px; }
  .lcf-step-num { width: 24px; height: 24px; font-size: 11px; }
}

/* ===== Funnel CTA bar — sticky bottom on mobile ===== */
@media (max-width: 700px) {
  .lcf-cta-bar {
    position: fixed; bottom: 0; left: 0; right: 0;
    margin: 0; padding: 14px 16px calc(env(safe-area-inset-bottom, 12px) + 12px);
    background: var(--cream); border-top: 1px solid var(--gray-1);
    z-index: 20;
  }
  .lcf-page { padding-bottom: 120px; }
  .lcf-cta-bar-back { padding: 14px 16px; font-size: 13px; }
  .lcf-cta-bar-next { padding: 14px 18px; font-size: 14px; }
  .lcf-cta-bar-next b { padding: 5px 10px; font-size: 11px; }
}

/* ===== Payment methods ===== */
@media (max-width: 480px) {
  .lcf-paymethod { padding: 14px; gap: 12px; }
  .lcf-paymethod-icon { width: 44px; height: 32px; font-size: 9px; }
  .lcf-paymethod-name { font-size: 13.5px; }
  .lcf-paymethod-meta { font-size: 11px; }
  .lcf-cardform { padding: 14px; }
}

/* ===== Confirmation ticket ===== */
@media (max-width: 480px) {
  .lcf-confirm { padding: 30px 16px; }
  .lcf-confirm h1 { font-size: 38px; }
  .lcf-confirm-check { width: 80px; height: 80px; }
  .lcf-ticket { padding: 18px; }
  .lcf-ticket-qr-mock { width: 150px; height: 150px; }
  .lcf-confirm-ctas { flex-direction: column; }
  .lcf-confirm-ctas .lc-btn { width: 100%; justify-content: center; }
}

/* ===== Tracking ===== */
@media (max-width: 480px) {
  .lcf-track { padding: 24px; }
  .lcf-track h2 { font-size: 48px; }
  .lcf-track-step-dot { width: 32px; height: 32px; font-size: 14px; }
  .lcf-track-step-label { font-size: 10px; }
  .lcf-track-bar { top: 32px; }
}

/* ===== Wizard mobile ===== */
@media (max-width: 800px) {
  .lc-wiz-header { padding: 20px 20px 12px; }
  .lc-wiz-body { padding: 12px 20px 100px; }
  .lc-wiz-options { grid-template-columns: 1fr !important; }
  .lc-wiz-footer {
    position: fixed; bottom: 0; left: 0; right: 0;
    padding: 14px 20px calc(env(safe-area-inset-bottom, 12px) + 12px);
    background: rgba(255,255,255,0.96);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--gray-1);
    z-index: 10;
  }
  .lc-wiz-foot-next { padding: 14px 18px; font-size: 13px; gap: 8px; }
  .lc-wiz-foot-next-total { padding: 5px 10px; font-size: 11px; }
}

/* ===== Account form ===== */
@media (max-width: 800px) {
  /* [TERRAIN-HEAL 2026-07-16 · WEB-ACC-MODAL] À l'ouverture du clavier mobile le viewport rétrécit ;
     sans piste bornée + scroll, le CTA « Recevoir le code » + les CGU étaient clippés par overflow:hidden
     → connexion bloquée. On borne la piste grille et on rend le formulaire scrollable, aligné en haut. */
  .lc-acc { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr); }
  .lc-acc-art { display: none; }
  .lc-acc-form { padding: 24px; overflow-y: auto; justify-content: flex-start; }
  .lc-acc-title { font-size: 38px; }
  .lcf-tabs { width: 100%; justify-content: center; }
  .lcf-tabs .lcf-tab { flex: 1; }
}

/* ===== Menu ===== */
@media (max-width: 600px) {
  .lc-menu-search { padding: 10px 16px; }
  .lc-menu-search input { font-size: 14px; padding: 10px 0; }
}

/* ===== About ===== */
@media (max-width: 700px) {
  .lc-timeline-row { grid-template-columns: 1fr; gap: 8px; padding: 18px; }
  .lc-timeline-year { font-size: 20px; }
  .lc-values { gap: 12px; }
  .lc-value { padding: 20px; }
  .lc-value-num { font-size: 48px; }
  .lc-team-card { padding: 20px; }
  .lc-team-avatar { width: 70px; height: 70px; font-size: 28px; }
}

/* ===== FAQ ===== */
@media (max-width: 480px) {
  .lc-faq-q { padding: 16px 18px; font-size: 14px; }
  .lc-faq-q-icon { width: 28px; height: 28px; }
  .lc-faq-item.is-open .lc-faq-a { padding: 0 18px 18px; }
  .lc-faq-a p { font-size: 13px; }
}

/* ===== Press ===== */
@media (max-width: 480px) {
  .lc-press { padding: 20px; gap: 12px; }
  .lc-press-logo { font-size: 16px; }
  .lc-press-quote { font-size: 9.5px; }
}

/* ===== App download ===== */
@media (max-width: 800px) {
  .lc-app-cta { padding: 24px; gap: 24px; }
  .lc-app-cta h3 { font-size: 32px; }
  .lc-app-phone { width: 160px; }
}

/* ===== Compare block ===== */
@media (max-width: 480px) {
  .lc-compare { padding: 24px; }
  .lc-compare-col { padding: 18px; }
}

/* ===== Hours card ===== */
@media (max-width: 700px) {
  .lc-hours { padding: 28px 24px; }
  .lc-hours-title { font-size: 32px; }
  .lc-hours-row { font-size: 13px; padding: 8px 0; }
}

/* ===== Footer ===== */
@media (max-width: 700px) {
  .lc-footer-grid { gap: 26px; margin-bottom: 32px; }
  .lc-footer-brand h3 { font-size: 32px; }
  .lc-footer-end { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* ===== Orders ===== */
@media (max-width: 600px) {
  .lc-section .lc-container > div[style*="display: grid"][style*="gap: 12px"] > div > div {
    flex-direction: column; align-items: stretch !important; gap: 14px !important;
  }
}

/* ===== Prevent horizontal scroll globally ===== */
html, body { overflow-x: hidden; max-width: 100%; }
* { max-width: 100vw; }

/* ===== Fluid container padding ===== */
@media (max-width: 480px) {
  :root { --gutter: 16px; }
}

/* ===== Reduce hero floating cards on tiny screens ===== */
@media (max-width: 380px) {
  .lc-hero-art-floating { display: none; }
}

/* ===== Tabs scrollable on mobile ===== */
@media (max-width: 700px) {
  .lc-cat-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    margin: 0 -16px 18px;
    padding: 0 16px 6px;
    scrollbar-width: none;
  }
  .lc-cat-tabs::-webkit-scrollbar { display: none; }
  .lc-cat-tab { flex-shrink: 0; }
}

/* ===== Better tap feedback ===== */
.lc-btn:active, .lc-card-item:active, .lc-cat-tab:active,
.lcf-paymethod:active, .lcf-pickup-slot:active, .lcf-pickup-day:active {
  transform: scale(0.97);
  transition: transform 80ms ease;
}

/* ===== Scroll snap for horizontal carousels on mobile ===== */
@media (max-width: 700px) {
  .lc-menu-grid {
    grid-template-columns: 1fr !important;
  }
}