/* ================================================================
   ULTRA PRO MOBILE CSS — Soniferba
   Design system mobile-first ultra professionnel
   Version 3.0
================================================================ */

/* ========================
   DESIGN TOKENS
======================== */
:root {
  --up-primary:        #8B0000;
  --up-primary-dark:   #5B0000;
  --up-primary-light:  #B91C1C;
  --up-accent:         #DC0230;

  --up-bg:             #F8F9FB;
  --up-surface:        #FFFFFF;
  --up-surface-2:      #F3F4F6;
  --up-border:         #E5E7EB;
  --up-border-strong:  #D1D5DB;

  --up-text-1:         #111827;
  --up-text-2:         #4B5563;
  --up-text-3:         #9CA3AF;

  --up-radius-sm:      8px;
  --up-radius-md:      12px;
  --up-radius-lg:      16px;
  --up-radius-xl:      24px;
  --up-radius-full:    9999px;

  --up-shadow-xs:      0 1px 3px rgba(0,0,0,.07);
  --up-shadow-sm:      0 2px 8px rgba(0,0,0,.08);
  --up-shadow-md:      0 6px 24px rgba(0,0,0,.09);
  --up-shadow-lg:      0 12px 48px rgba(0,0,0,.11);
  --up-shadow-red:     0 4px 20px rgba(139,0,0,.22);

  --up-nav-h:          64px;
  --up-bottom-h:       62px;

  --up-ease:           cubic-bezier(.4,0,.2,1);
  --up-fast:           .15s;
  --up-normal:         .28s;
  --up-slow:           .5s;
}

/* ========================
   BODY — GLOBAL MOBILE
======================== */
@media (max-width: 992px) {
  html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--up-nav-h) + 8px);
  }

  body {
    background: var(--up-bg) !important;
    padding-bottom: calc(var(--up-bottom-h) + env(safe-area-inset-bottom, 12px)) !important;
    overflow-x: hidden;
  }

  .container {
    width: 100% !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
    max-width: 100% !important;
  }

  section, .section {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }

  /* Fluid type */
  h1 { font-size: clamp(1.9rem, 7vw, 2.8rem) !important; line-height: 1.13 !important; }
  h2 { font-size: clamp(1.45rem, 5vw, 2.1rem) !important; line-height: 1.2 !important; }
  h3 { font-size: clamp(1.1rem, 3.5vw, 1.4rem) !important; line-height: 1.3 !important; }
  p, li { font-size: clamp(.88rem, 2.5vw, 1rem) !important; line-height: 1.72 !important; }

  /* Touch targets */
  a, button, [role="button"], input, select, textarea, label {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
}

/* ========================
   HEADER
======================== */
@media (max-width: 992px) {
  .main-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: var(--up-nav-h) !important;
    background: rgba(255,255,255,.96) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border-bottom: 1px solid var(--up-border) !important;
    box-shadow: 0 2px 16px rgba(0,0,0,.06) !important;
    z-index: 1000 !important;
    padding: 0 !important;
  }

  .main-header .container {
    height: var(--up-nav-h) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 18px !important;
  }

  .logo {
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
  }

  .logo img {
    max-height: 38px !important;
    width: auto !important;
    object-fit: contain !important;
  }

  body {
    padding-top: var(--up-nav-h) !important;
  }
}

/* ========================
   HAMBURGER BUTTON
======================== */
@media (max-width: 992px) {
  .mobile-menu-toggle {
    position: fixed !important;
    top: max(9px, calc(env(safe-area-inset-top) + 9px)) !important;
    right: 16px !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: var(--up-radius-md) !important;
    background: linear-gradient(135deg, var(--up-primary), var(--up-primary-dark)) !important;
    color: #fff !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.15rem !important;
    box-shadow: var(--up-shadow-red) !important;
    z-index: 1100 !important;
    cursor: pointer !important;
    transition: transform var(--up-fast) var(--up-ease),
                box-shadow var(--up-fast) var(--up-ease) !important;
  }

  .mobile-menu-toggle:active {
    transform: scale(.93) !important;
  }
}

/* ========================
   NAV DRAWER
======================== */
@media (max-width: 992px) {
  .main-nav {
    position: fixed !important;
    top: 0 !important;
    right: -100% !important;
    width: min(82vw, 340px) !important;
    height: 100dvh !important;
    height: 100vh !important;
    background: var(--up-surface) !important;
    z-index: 1050 !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    box-shadow: -8px 0 40px rgba(0,0,0,.18) !important;
    transition: right var(--up-normal) var(--up-ease) !important;
  }

  .main-nav.active {
    right: 0 !important;
  }

  /* Red header strip inside drawer */
  .main-nav::before {
    content: 'Menu' !important;
    display: flex !important;
    align-items: flex-end !important;
    padding: 0 20px 16px !important;
    height: calc(var(--up-nav-h) + max(0px, env(safe-area-inset-top))) !important;
    background: linear-gradient(135deg, var(--up-primary), var(--up-primary-dark)) !important;
    color: rgba(255,255,255,.6) !important;
    font-size: .75rem !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    flex-shrink: 0 !important;
  }

  .main-nav ul {
    list-style: none !important;
    padding: 10px 12px 24px !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    height: auto !important;
  }

  .main-nav ul li {
    margin: 0 !important;
    opacity: 1 !important;
    animation: none !important;
  }

  .main-nav ul li a,
  .main-nav .nav-item {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    padding: 13px 16px !important;
    border-radius: var(--up-radius-md) !important;
    color: var(--up-text-1) !important;
    font-size: .93rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    border: none !important;
    border-left: none !important;
    border-bottom: none !important;
    background: transparent !important;
    height: auto !important;
    justify-content: flex-start !important;
    transition: background var(--up-fast) var(--up-ease),
                color var(--up-fast) var(--up-ease) !important;
    letter-spacing: .2px !important;
  }

  .main-nav ul li a:hover,
  .main-nav .nav-item:hover {
    background: var(--up-surface-2) !important;
    color: var(--up-primary) !important;
    transform: none !important;
  }

  .main-nav ul li a.active,
  .main-nav .nav-item.active {
    background: linear-gradient(135deg, var(--up-primary), var(--up-primary-dark)) !important;
    color: #fff !important;
    transform: none !important;
    box-shadow: var(--up-shadow-red) !important;
  }

  .main-nav ul li a::after,
  .main-nav .nav-item::after {
    display: none !important;
  }

  /* Contact link in nav = special */
  .main-nav ul li a[href="contact.html"],
  .main-nav ul li a[href*="contact"] {
    background: linear-gradient(135deg, var(--up-primary), var(--up-accent)) !important;
    color: #fff !important;
    margin-top: 8px !important;
    border-radius: var(--up-radius-md) !important;
    justify-content: center !important;
    font-weight: 700 !important;
    box-shadow: var(--up-shadow-red) !important;
  }

  /* Overlay */
  .nav-overlay {
    background: rgba(0,0,0,.45) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    z-index: 1040 !important;
  }

  /* Close button */
  .menu-close-button {
    position: fixed !important;
    top: max(10px, env(safe-area-inset-top)) !important;
    right: 14px !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    background: rgba(255,255,255,.18) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: none !important;
    z-index: 1200 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: .95rem !important;
    cursor: pointer !important;
    transition: background var(--up-fast) !important;
  }

  .menu-close-button:active {
    background: rgba(255,255,255,.3) !important;
  }
}

/* ========================
   BOTTOM NAVIGATION BAR
======================== */
.bottom-nav {
  display: none;
}

@media (max-width: 992px) {
  .bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(var(--up-bottom-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: rgba(255,255,255,.97);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-top: 1px solid var(--up-border);
    box-shadow: 0 -4px 24px rgba(0,0,0,.08);
    z-index: 980;
    align-items: stretch;
    transition: transform var(--up-normal) var(--up-ease);
  }

  .bottom-nav.hidden {
    transform: translateY(100%);
  }

  .bottom-nav__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 7px 2px 6px;
    text-decoration: none;
    color: var(--up-text-3);
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    position: relative;
    transition: color var(--up-fast) var(--up-ease);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  .bottom-nav__item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 28px;
    height: 3px;
    background: var(--up-primary);
    border-radius: 0 0 4px 4px;
    transition: transform var(--up-fast) var(--up-ease);
  }

  .bottom-nav__item.active {
    color: var(--up-primary);
  }

  .bottom-nav__item.active::before {
    transform: translateX(-50%) scaleX(1);
  }

  .bottom-nav__item i {
    font-size: 1.18rem;
    transition: transform var(--up-fast) var(--up-ease);
    display: block;
  }

  .bottom-nav__item.active i {
    transform: scale(1.12);
  }

  .bottom-nav__item:active {
    background: var(--up-surface-2);
  }

  /* Central CTA button (Contact) */
  .bottom-nav__item--cta {
    padding-top: 0 !important;
    padding-bottom: 6px;
    color: var(--up-primary) !important;
    justify-content: flex-end;
  }

  .bottom-nav__item--cta::before {
    display: none;
  }

  .bottom-nav__cta-wrap {
    width: 46px;
    height: 46px;
    background: linear-gradient(135deg, var(--up-primary), var(--up-accent));
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(139,0,0,.38);
    margin-bottom: 3px;
    margin-top: -14px;
    transition: transform var(--up-fast) var(--up-ease),
                box-shadow var(--up-fast) var(--up-ease);
  }

  .bottom-nav__item--cta:active .bottom-nav__cta-wrap {
    transform: scale(.92);
  }

  .bottom-nav__item--cta i {
    color: #fff !important;
    font-size: 1.1rem !important;
    transform: none !important;
  }

  .bottom-nav__item--cta .bottom-nav__label {
    color: var(--up-primary);
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
  }

  .bottom-nav__label {
    line-height: 1;
  }
}

/* ========================
   HERO — PAGE ACCUEIL
======================== */
@media (max-width: 768px) {
  .hero-premium {
    min-height: 100svh !important;
    padding-top: max(90px, calc(var(--up-nav-h) + env(safe-area-inset-top) + 20px)) !important;
    padding-bottom: 48px !important;
    margin-top: 0 !important;
  }

  .hero-title {
    font-size: clamp(2rem, 7.5vw, 2.8rem) !important;
    line-height: 1.1 !important;
    margin-bottom: 18px !important;
  }

  .hero-badge {
    font-size: .7rem !important;
    padding: 7px 13px !important;
    letter-spacing: .8px !important;
    margin-bottom: 18px !important;
  }

  .hero-subtitle-group {
    margin-bottom: 28px !important;
    width: 100% !important;
  }

  .hero-subtitle-primary {
    font-size: .95rem !important;
  }

  .hero-subtitle-secondary {
    font-size: .82rem !important;
  }

  .hero-actions {
    flex-direction: column !important;
    width: 100% !important;
    gap: 10px !important;
  }

  .btn-premium {
    width: 100% !important;
    justify-content: center !important;
    padding: 15px 20px !important;
    font-size: .92rem !important;
    border-radius: var(--up-radius-full) !important;
    min-height: 50px !important;
  }

  .hero-footer {
    width: 100% !important;
    border-radius: var(--up-radius-lg) !important;
    padding: 14px 16px !important;
    gap: 14px !important;
    flex-direction: column !important;
  }

  .trust-separator {
    width: 40px !important;
    height: 1px !important;
    background: rgba(255,255,255,.2) !important;
  }

  .hero-chat-highlight {
    width: 100% !important;
    padding: 12px 14px !important;
  }
}

/* ========================
   PRODUCT CARDS
======================== */
@media (max-width: 768px) {
  .products-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    padding: 0 !important;
  }

  .product-card {
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: var(--up-radius-lg) !important;
    box-shadow: var(--up-shadow-sm) !important;
    border: 1px solid var(--up-border) !important;
    transition: box-shadow var(--up-normal) var(--up-ease) !important;
  }

  .product-card:hover {
    transform: none !important;
    box-shadow: var(--up-shadow-md) !important;
  }

  .product-image {
    height: 210px !important;
  }

  .product-content {
    padding: 20px !important;
  }

  .product-title {
    font-size: 1.15rem !important;
    margin-bottom: 10px !important;
  }

  .product-description {
    font-size: .9rem !important;
    margin-bottom: 16px !important;
  }

  .product-link {
    min-height: 46px !important;
    padding: 12px 20px !important;
    font-size: .88rem !important;
    border-radius: var(--up-radius-full) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .product-badge {
    font-size: .68rem !important;
    padding: 5px 12px !important;
  }
}

/* Card horizontal layout on very small screens */
@media (max-width: 480px) {
  .product-card {
    display: grid !important;
    grid-template-columns: 120px 1fr !important;
    grid-template-rows: 1fr !important;
    max-height: 155px !important;
    overflow: hidden !important;
  }

  .product-card .product-image {
    height: 155px !important;
    width: 120px !important;
    border-radius: var(--up-radius-lg) 0 0 var(--up-radius-lg) !important;
  }

  .product-card .product-content {
    padding: 14px 14px 14px 14px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    overflow: hidden !important;
  }

  .product-card .product-title {
    font-size: .95rem !important;
    margin-bottom: 6px !important;
    padding-bottom: 8px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .product-card .product-description {
    font-size: .78rem !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    margin-bottom: 10px !important;
    flex: 1 !important;
  }

  .product-card .product-features {
    display: none !important;
  }

  .product-card .product-link {
    padding: 7px 12px !important;
    font-size: .75rem !important;
    min-height: 34px !important;
    border-width: 1.5px !important;
  }
}

/* ========================
   SERVICES / INFO BOXES
======================== */
@media (max-width: 768px) {
  .services-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .store-info-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .service-box,
  .info-box {
    padding: 22px 18px !important;
    border-radius: var(--up-radius-lg) !important;
    background: var(--up-surface) !important;
    border: 1px solid var(--up-border) !important;
    box-shadow: var(--up-shadow-xs) !important;
  }

  .service-box:hover,
  .info-box:hover {
    transform: none !important;
    box-shadow: var(--up-shadow-sm) !important;
  }

  .service-box h3,
  .info-box h3 {
    font-size: 1.05rem !important;
    margin-bottom: 8px !important;
  }
}

/* ========================
   STORE HERO
======================== */
@media (max-width: 768px) {
  .store-hero {
    height: 220px !important;
  }

  .store-overlay {
    padding: 20px 18px !important;
  }

  .store-overlay h2 {
    font-size: 1.5rem !important;
  }
}

/* ========================
   BRANDS CAROUSEL
======================== */
@media (max-width: 768px) {
  .brands-slider,
  .brands-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 12px !important;
    padding: 8px 0 12px !important;
  }

  .brands-slider::-webkit-scrollbar,
  .brands-grid::-webkit-scrollbar {
    display: none !important;
  }

  .brand-slide {
    flex-shrink: 0 !important;
    scroll-snap-align: center !important;
    min-width: 130px !important;
    height: 80px !important;
    border-radius: var(--up-radius-md) !important;
    background: var(--up-surface) !important;
    border: 1px solid var(--up-border) !important;
    box-shadow: var(--up-shadow-xs) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px !important;
    transition: box-shadow var(--up-fast) !important;
  }

  .brand-slide:hover {
    transform: none !important;
    box-shadow: var(--up-shadow-sm) !important;
  }

  .brand-slide img {
    max-height: 46px !important;
    object-fit: contain !important;
  }
}

/* ========================
   TIMELINE
======================== */
@media (max-width: 768px) {
  .timeline-items {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 12px !important;
    padding: 0 0 8px !important;
  }

  .timeline-items::-webkit-scrollbar { display: none !important; }

  .timeline-item {
    flex-shrink: 0 !important;
    width: 240px !important;
    scroll-snap-align: start !important;
  }

  .timeline-content {
    padding: 16px !important;
    border-radius: var(--up-radius-lg) !important;
    height: 100% !important;
  }
}

/* ========================
   SECTION HEADINGS
======================== */
@media (max-width: 768px) {
  .section-title,
  section > .container > h2,
  .section > .container > h2 {
    font-size: clamp(1.4rem, 5.5vw, 2rem) !important;
    margin-bottom: 10px !important;
    line-height: 1.2 !important;
  }

  .section-subtitle,
  section > .container > p.subtitle {
    font-size: .9rem !important;
    margin-bottom: 36px !important;
    color: var(--up-text-2) !important;
  }
}

/* ========================
   BUTTONS — GLOBAL
======================== */
@media (max-width: 768px) {
  button,
  .cta-button,
  .btn-premium,
  a.btn,
  a[class*="btn-"],
  input[type="submit"],
  input[type="button"] {
    min-height: 48px !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .cta-button,
  .btn-premium,
  a.cta-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 50px !important;
    padding: 13px 26px !important;
    border-radius: var(--up-radius-full) !important;
    font-size: .9rem !important;
    font-weight: 700 !important;
    letter-spacing: .2px !important;
  }
}

/* ========================
   FORMS
======================== */
@media (max-width: 768px) {
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    font-size: 16px !important;
    border-radius: var(--up-radius-md) !important;
    min-height: 50px !important;
    padding: 13px 16px !important;
    border: 1.5px solid var(--up-border-strong) !important;
    background: var(--up-surface) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    transition: border-color var(--up-fast) !important;
  }

  input:not([type="checkbox"]):not([type="radio"]):focus,
  select:focus,
  textarea:focus {
    border-color: var(--up-primary) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(139,0,0,.09) !important;
  }

  textarea {
    min-height: 130px !important;
    resize: vertical !important;
  }

  label {
    font-size: .82rem !important;
    font-weight: 700 !important;
    color: var(--up-text-2) !important;
    margin-bottom: 6px !important;
    display: block !important;
    letter-spacing: .2px !important;
  }

  .form-group {
    margin-bottom: 18px !important;
  }

  form button[type="submit"],
  .form-submit {
    width: 100% !important;
    justify-content: center !important;
    background: linear-gradient(135deg, var(--up-primary), var(--up-primary-dark)) !important;
    color: #fff !important;
    min-height: 54px !important;
    border-radius: var(--up-radius-full) !important;
    font-size: .98rem !important;
    font-weight: 700 !important;
    border: none !important;
    cursor: pointer !important;
    box-shadow: var(--up-shadow-red) !important;
    letter-spacing: .3px !important;
    display: flex !important;
    align-items: center !important;
    transition: transform var(--up-fast),
                box-shadow var(--up-fast) !important;
  }

  form button[type="submit"]:active,
  .form-submit:active {
    transform: scale(.98) !important;
  }
}

/* ========================
   CONTACT PAGE
======================== */
@media (max-width: 768px) {
  .contact-grid,
  .contact-wrapper,
  .sav-content-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .contact-info,
  .contact-form-wrapper,
  .sav-form-container {
    padding: 24px 20px !important;
    border-radius: var(--up-radius-lg) !important;
    background: var(--up-surface) !important;
    box-shadow: var(--up-shadow-sm) !important;
    border: 1px solid var(--up-border) !important;
  }

  .store-map-container {
    height: 220px !important;
    border-radius: var(--up-radius-lg) !important;
    overflow: hidden !important;
  }
}

/* ========================
   FOOTER
======================== */
@media (max-width: 768px) {
  .footer-content {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    text-align: left !important;
  }

  .footer-logo {
    margin: 0 0 14px !important;
  }

  .footer-bottom-content {
    flex-direction: column !important;
    gap: 10px !important;
    text-align: center !important;
  }

  footer,
  .main-footer {
    padding-bottom: calc(var(--up-bottom-h) + env(safe-area-inset-bottom, 12px) + 20px) !important;
  }
}

/* ========================
   PAGE HERO (inner pages)
======================== */
@media (max-width: 768px) {
  .page-hero,
  .sav-hero,
  .hero-inner {
    padding-top: calc(var(--up-nav-h) + 32px) !important;
    padding-bottom: 48px !important;
    min-height: auto !important;
  }

  .page-hero h1,
  .sav-hero h1,
  .hero-inner h1 {
    font-size: clamp(1.8rem, 6.5vw, 2.4rem) !important;
  }
}

/* ========================
   NOTICE / LEGAL
======================== */
@media (max-width: 768px) {
  .notice-content {
    padding: 22px 18px !important;
    border-radius: var(--up-radius-lg) !important;
  }
}

/* ========================
   FLOATING ELEMENTS
======================== */
@media (max-width: 992px) {
  /* Push floating phone/call buttons above bottom nav */
  .floating-phone,
  .call-float-btn,
  [class*="float"][class*="phone"],
  [class*="float"][class*="call"] {
    bottom: calc(var(--up-bottom-h) + env(safe-area-inset-bottom, 0px) + 16px) !important;
  }
}

/* ========================
   SECTION DIVIDERS
======================== */
@media (max-width: 768px) {
  section + section,
  .section + .section {
    border-top: 1px solid var(--up-border);
  }
}

/* ========================
   GUIDE / CHECKLIST PAGES
======================== */
@media (max-width: 768px) {
  .guide-steps,
  .checklist-items {
    gap: 12px !important;
  }

  .guide-step,
  .checklist-item {
    padding: 18px 16px !important;
    border-radius: var(--up-radius-lg) !important;
  }
}

/* ========================
   CATALOGUE PAGE
======================== */
@media (max-width: 768px) {
  .catalogue-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .catalogue-card {
    border-radius: var(--up-radius-lg) !important;
    overflow: hidden !important;
  }
}

/* ========================
   HISTOIRE PAGE
======================== */
@media (max-width: 768px) {
  .histoire-timeline {
    padding-left: 20px !important;
  }

  .histoire-timeline::before {
    left: 8px !important;
  }
}

/* ========================
   STORISTE PAGE
======================== */
@media (max-width: 768px) {
  .sdf-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .sdf-media {
    display: none !important;
  }

  .storiste-card {
    padding: 20px 18px !important;
    border-radius: var(--up-radius-lg) !important;
  }

  .sdf-actions {
    flex-direction: column !important;
    gap: 10px !important;
  }

  .btn-primary,
  .btn-secondary {
    width: 100% !important;
    justify-content: center !important;
    display: flex !important;
    align-items: center !important;
    text-align: center !important;
    min-height: 48px !important;
  }
}

/* ========================
   VIEWPORT HEIGHT HELPER
======================== */
@media (max-width: 992px) {
  .vh-full {
    height: calc(var(--vh, 1vh) * 100);
    height: 100dvh;
  }
}

/* ========================
   REDUCED MOTION
======================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ========================
   DESKTOP SCROLLBAR
======================== */
@media (min-width: 993px) {
  ::-webkit-scrollbar { width: 6px; }
  ::-webkit-scrollbar-track { background: var(--up-surface-2); }
  ::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 3px; }
  ::-webkit-scrollbar-thumb:hover { background: #94A3B8; }
}

/* ========================
   ANIMATIONS
======================== */
@keyframes up-slide-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes up-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes up-pop {
  0%   { transform: scale(.95); }
  60%  { transform: scale(1.02); }
  100% { transform: scale(1); }
}