/* Hide JS-generated mobile tariff cards on desktop/tablet widths above 768px. */
.mobile-price-cards { display:none; }
.mobile-picture { display:block; width:100%; height:100%; }
/*
 * DetaCars V39 — MOBILE / TABLET ONLY
 * Every visual override is limited to max-width: 1024px.
 * Original desktop stylesheet (1025px+) remains completely untouched.
 */

/* ===== <= 1024 px: navigation, readable content and safe layouts ===== */
@media (max-width: 1024px) {
  :root { --mobile-gutter: clamp(14px, 3.2vw, 28px); }
  html { scroll-padding-top: 82px; overflow-x: clip; }
  body { min-width: 0; overflow-x: clip; font-size: 16px; }
  body.mobile-menu-open, body.modal-visible { overflow: hidden !important; }
  *, *::before, *::after { min-width: 0; }
  main, main > section, header, footer { max-width: 100%; }
  .container { width: calc(100% - 2 * var(--mobile-gutter)) !important; max-width: var(--max); }
  img, picture, video, svg { max-width: 100%; height: auto; }
  .hero-image img, .service-media img, .service-detail-hero img,
  .contact-media img, .compare img { height: 100%; width: 100%; object-fit: cover; }
  .skip-link { position: fixed; top: 4px; left: 8px; z-index: 2000; padding: 12px; background: #a756fb; color: #fff; transform: translateY(-160%); }
  .skip-link:focus { transform: translateY(0); }
  button, a, summary { -webkit-tap-highlight-color: transparent; }
  .btn, .text-link, .service-open, .open-catalogue-service,
  .catalogue-arrows button, .booking-back, .booking-close, .dialog-close,
  .menu-toggle, .price-tab, .goal-card, .booking-calendar-head button,
  .quick-dock a { min-height: 44px !important; }
  .menu-toggle, .catalogue-arrows button, .booking-close, .dialog-close,
  .booking-calendar-head button { min-width: 44px !important; }
  input, select, textarea { font-size: 16px !important; }
  .service-content p, .service-card-body p, .section-head > p,
  .hero-copy > p, .contact-copy > p, .result-copy > p,
  .price-panel-copy p, .faq .accordion p, .polish-levels p,
  .pricing-footer p { font-size: 16px !important; line-height: 1.65 !important; }
  .section-head h2, .result h2, .faq h2, .contact h2 {
    font-size: clamp(36px, 6.5vw, 62px) !important;
    line-height: 1.04 !important;
    overflow-wrap: anywhere;
  }
  .pricing-orb, .orb, .beam, .scan, .contact-line, .cursor-glow { animation: none !important; }
  .cursor-glow { display: none !important; }
  .reveal { transition-duration: .35s !important; }

  /* Navbar: visible booking action and accessible drawer across tablet + phone */
  .site-header { z-index: 700 !important; }
  .nav { height: 76px !important; position: relative; gap: 8px; }
  .brand { flex: 0 0 auto; }
  .brand img { width: 67px; }
  .nav-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
  .nav-actions .btn-small { display: inline-flex !important; align-items: center; justify-content: center; width: auto !important; min-width: 0; margin: 0; padding: 11px 15px !important; white-space: nowrap; font-size: 13px; }
  .nav-cta-mobile { display: none; }
  .menu-toggle { display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 6px; flex: 0 0 46px !important; width: 46px; height: 46px !important; padding: 10px; border-radius: 12px; }
  .menu-toggle span { width: 22px; }
  .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
  .nav-links, .nav-links.open {
    position: fixed !important; top: 76px !important; left: 0 !important; right: 0 !important;
    width: 100% !important; height: calc(100dvh - 76px) !important;
    max-height: none !important; padding: 18px var(--mobile-gutter) max(34px, env(safe-area-inset-bottom)) !important;
    flex-direction: column !important; justify-content: flex-start !important; align-items: stretch !important;
    gap: 0 !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch;
    background: rgba(9, 6, 16, .98) !important; border-bottom: 1px solid #342541;
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    visibility: hidden; opacity: 0; pointer-events: none;
    transform: translateY(-12px); transition: opacity .22s ease, transform .22s ease, visibility .22s;
    z-index: 701;
  }
  .nav-links.open { display: flex !important; visibility: visible; opacity: 1; pointer-events: auto; transform: none; }
  .nav-links a, .nav-links.open a { display: flex; align-items: center; flex: 0 0 auto; min-height: 66px !important; width: 100%; padding: 14px 8px !important; font-size: clamp(19px, 3.2vw, 24px) !important; border-bottom: 1px solid #ffffff14; }
  .nav-links a[href="#tarifs"]::after { display: none; }

  /* Sections and images: avoid fixed widths and side overflow */
  .hero { min-height: 0 !important; }
  .hero-grid { display: grid !important; grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important; gap: 24px !important; }
  .hero-copy, .hero-visual, .hero-actions { min-width: 0; }
  .hero-copy h1 { font-size: clamp(37px, 5.2vw, 66px) !important; line-height: .99 !important; overflow-wrap: normal; letter-spacing: -.045em !important; }
  .hero-copy h1 span { white-space: normal; }
  .hero-visual { min-height: 410px !important; }
  .hero-image { min-height: 410px !important; }
  .hero-chips { flex-wrap: wrap; }
  .ticker { width: 100%; max-width: 100%; overflow: hidden !important; }
  .ticker > div { width: max-content; }
  .service-row, .service-row.reverse { grid-template-columns: minmax(0, 1fr) !important; }
  .service-media { min-height: 290px !important; }
  .service-content { padding: 28px !important; }
  .service-content p, .service-content li { font-size: 16px !important; }
  .service-content li { line-height: 1.45; }
  .service-content .text-link { display: inline-flex; align-items: center; }
  .goal-selector { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .goal-card { min-width: 0 !important; }
  .service-carousel { max-width: 100%; scroll-snap-type: x mandatory; overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch; }
  .service-card { scroll-snap-align: start; }
  .service-card-body p { font-size: 16px !important; }
  .service-search input { font-size: 16px !important; }
  .pricing-tabs { min-width: 0; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .pricing-tabs::-webkit-scrollbar { display: none; }
  .price-tab { flex: 0 0 auto; min-width: 175px !important; scroll-snap-align: start; }
  .price-tab span { font-size: 14px !important; }
  .price-panel-copy h3 { font-size: clamp(32px, 5vw, 48px) !important; overflow-wrap: anywhere; }
  .polish-levels { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .polish-levels article { min-height: 300px; }
  .compare-wrap, .compare { max-width: 100%; }
  .compare { touch-action: pan-y !important; }
  .compare input[type="range"] { touch-action: pan-y !important; }
  .compare-line span { width: 58px !important; height: 58px !important; }
  .brand-row { justify-content: center; gap: 18px 25px; }
  .accordion summary { display: flex; align-items: center; min-height: 64px !important; font-size: 16px !important; line-height: 1.45; }
  .accordion summary span { flex: 0 0 auto; }
  .faq-grid { gap: 28px; }
  .contact-grid { gap: 38px; }
  .contact-actions .btn { font-size: 14px; }
  .footer-links a { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px !important; }
  .quick-dock { right: calc(12px + env(safe-area-inset-right)) !important; bottom: calc(12px + env(safe-area-inset-bottom)) !important; }
  .quick-dock a { width: 48px !important; height: 48px !important; }

  /* Reservation and service detail dialogs must fit the visual viewport */
  .booking-dialog { max-height: min(92dvh, 850px); }
  .booking-main { min-width: 0; }
  .booking-fields input, .booking-fields textarea { font-size: 16px !important; }
  .booking-calendar-head button { min-width: 44px !important; min-height: 44px !important; }
  .booking-dates button { min-height: 44px !important; min-width: 0 !important; }
  .booking-slots button { min-height: 52px !important; }
  .booking-back { min-width: 72px !important; }
  .booking-actions .btn { min-height: 48px !important; }
  #serviceDialog { max-width: calc(100vw - 18px); max-height: calc(100dvh - 18px); overflow-y: auto; }
  .service-detail-main .dialog-body, .service-detail-main .dialog-list span,
  .service-detail-ideal p, .service-detail-heading p { font-size: 16px !important; line-height: 1.65 !important; }
  .service-detail-reassurance { font-size: 14px !important; }
}

/* ===== <= 768 px: true single-column mobile/tablet and tariff cards ===== */
@media (max-width: 768px) {
  html { scroll-padding-top: 74px; }
  .nav { height: 72px !important; }
  .nav-links, .nav-links.open { top: 72px !important; height: calc(100dvh - 72px) !important; }
  .hero { padding-top: 88px !important; }
  .hero-grid, .result-grid, .faq-grid, .contact-grid { grid-template-columns: minmax(0,1fr) !important; }
  .hero-copy { order: 0; }
  .hero-visual { order: 1 !important; min-height: 360px !important; }
  .hero-image { min-height: 360px !important; }
  .hero-copy h1 { font-size: clamp(39px, 7.8vw, 62px) !important; line-height: .97 !important; }
  .hero-actions { display: grid !important; grid-template-columns: minmax(0,1fr) !important; }
  .hero-actions .btn { display: flex; width: 100% !important; justify-content: space-between !important; }
  .hero-floating, .hero-script, .orbit-ring { display: none !important; }
  .hero-stat { bottom: 14px !important; right: 14px !important; }
  .hero-badge-live { top: 16px !important; left: 16px !important; }
  .section-pad { padding-top: 72px !important; padding-bottom: 72px !important; }
  .section-head { display: block !important; margin-bottom: 30px !important; }
  .section-head > p { margin-top: 15px !important; }
  .service-media { min-height: 245px !important; }
  .service-content h3 { font-size: clamp(36px, 8vw, 52px) !important; }
  .goal-selector { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 8px !important; }
  .goal-card { min-height: 94px !important; padding: 12px !important; }
  .goal-card b { font-size: 16px !important; }
  .goal-card:first-child { grid-column: 1/-1; min-height: 70px !important; }
  .service-carousel { grid-auto-columns: minmax(0, min(87%, 400px)) !important; gap: 12px !important; padding-right: 12% !important; }
  .service-card-visual { min-height: 200px !important; }
  .service-card-body { padding: 22px !important; }
  .catalogue-toolbar { display: grid !important; grid-template-columns: minmax(0,1fr) auto; }
  .catalogue-toolbar-copy { grid-column: 1/-1; }
  .catalogue-toolbar .service-search { min-width: 0; }
  .pricing-shell { overflow: visible !important; }
  .pricing-tabs { display: flex !important; gap: 8px !important; margin: 0 0 13px !important; padding: 3px 0 10px !important; }
  .price-tab { min-width: 172px !important; min-height: 57px !important; }
  .price-panel { padding: 20px 14px !important; gap: 17px !important; }
  .price-panel-copy { padding-bottom: 8px !important; }
  .price-panel-copy p { font-size: 16px !important; }
  .price-pills { flex-wrap: wrap; }
  /* Replace tables ONLY on mobile. Cards read the prices from the original HTML tables. */
  .express-table-wrap { display: none !important; }
  .mobile-price-cards { display: grid !important; grid-template-columns: 1fr; gap: 12px; width: 100%; }
  .mobile-price-card { min-width: 0; overflow: hidden; border: 1px solid rgba(206,147,255,.17); border-radius: 17px; background: linear-gradient(145deg,#16101f,#0e0b13); }
  .mobile-price-card.mobile-price-featured { border-color: rgba(190,104,255,.42); background: linear-gradient(145deg,#251531,#110b19); }
  .mobile-price-heading { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:7px 12px; padding: 17px 16px 14px; border-bottom: 1px solid #ffffff12; }
  .mobile-price-heading h4 { margin: 0; font-size: clamp(17px,3.4vw,20px); line-height: 1.35; }
  .mobile-price-heading span { font-size: 12px; font-weight: 700; color: #cf9fff; }
  .mobile-price-amounts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); margin:0; padding:6px 12px 12px; }
  .mobile-price-amount { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:5px; padding:13px 5px; border-bottom: 1px solid #ffffff0e; }
  .mobile-price-amount:nth-last-child(-n+2) { border-bottom:0; }
  .mobile-price-amount:nth-child(odd) { padding-right:10px; border-right:1px solid #ffffff0e; }
  .mobile-price-amount:nth-child(even) { padding-left:10px; }
  .mobile-price-amount dt { margin:0; font-size: 13px; font-weight: 600; color:#bfb4c8; }
  .mobile-price-amount dd { margin:0; color:#fff; font-family: Oswald, sans-serif; font-size:clamp(21px,4.1vw,26px); font-weight:700; white-space:nowrap; }
  .mobile-price-featured .mobile-price-amount dd { color:#dfa9ff; }
  .express-extras { grid-template-columns:1fr !important; }
  .express-extras span { font-size:14px !important; }
  .pricing-footer { display:grid !important; grid-template-columns:1fr !important; gap:14px !important; }
  .pricing-footer .btn { width:100% !important; justify-content:space-between; }
  .polish-levels { grid-template-columns: 1fr !important; gap:12px; }
  .polish-levels article { min-height: 250px; padding: 22px; }
  .polish-levels h4 { margin:28px 0 10px; }
  .recommend-label { position:static; align-self:flex-end; margin-bottom:10px; }
  .quote-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .quote-grid .quote-card { min-height: 185px; }
  .compare { aspect-ratio: 4/3 !important; height:auto !important; min-height:0 !important; }
  .compare .after-img,.compare .before-wrap img { object-position:center !important; }
  .compare-caption { display:flex; flex-wrap:wrap; gap:6px 15px; }
  .brand-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; text-align:center; }
  .brand-row b { font-size:clamp(15px,3vw,19px); }
  .contact-media { height:300px !important; }
  .contact-actions { display:grid !important; grid-template-columns:1fr !important; gap:10px !important; }
  .contact-actions .btn { width:100% !important; justify-content:space-between !important; padding:12px 16px !important; min-height:54px !important; }
  .qr-line { display:none !important; }
  .contact-cards { grid-template-columns:1fr 1fr; }
  footer .footer-main { display:grid !important; grid-template-columns:1fr !important; gap:24px; text-align:center; justify-items:center; }
  .footer-links { display:flex !important; flex-wrap:wrap; gap:2px 18px; justify-content:center; }
  .footer-main p { font-size:16px; }
  .footer-bottom { display:flex !important; flex-direction:column; align-items:center; text-align:center; gap:4px; }

  /* Full-screen 4-step booking workflow with fixed, safe-area-aware actions */
  .booking-dialog { position:fixed !important; inset:0 !important; width:100vw !important; max-width:100vw !important; height:100dvh !important; max-height:100dvh !important; margin:0 !important; padding:0 !important; border:0 !important; border-radius:0 !important; overflow:hidden !important; }
  .booking-dialog[open] { display:block; }
  .booking-shell { display:block !important; height:100% !important; }
  .booking-aside { display:none !important; }
  .booking-close { position:fixed !important; top:calc(10px + env(safe-area-inset-top)) !important; right:calc(12px + env(safe-area-inset-right)) !important; width:48px !important; height:48px !important; z-index:10; }
  .booking-main { box-sizing:border-box; height:100dvh !important; padding:calc(66px + env(safe-area-inset-top)) 16px calc(112px + env(safe-area-inset-bottom)) !important; overflow-y:auto !important; overflow-x:hidden !important; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
  .booking-progress { margin:0 55px 25px 0 !important; }
  .booking-progress span { min-width:32px !important; width:32px !important; height:32px !important; }
  .booking-step h3 { font-size:clamp(23px,4.5vw,32px) !important; line-height:1.16; }
  .booking-services { grid-template-columns:1fr !important; }
  .booking-services label span { min-height:68px !important; }
  .booking-services label span b { font-size:16px !important; }
  .booking-services label span small { font-size:13px !important; }
  .vehicle-picker-clean { grid-template-columns:1fr !important; }
  .vehicle-picker-clean label > span { min-height:72px !important; }
  .booking-dates { display:grid !important; grid-template-columns:repeat(7,minmax(0,1fr)) !important; gap:4px !important; overflow:visible !important; }
  .booking-dates button { min-height:44px !important; width:100% !important; padding:0 !important; }
  .booking-dates button span { width:38px; height:38px; max-width:100%; font-size:14px !important; }
  .booking-dates .calendar-empty { min-height:44px !important; }
  .calendar-weekdays { grid-template-columns:repeat(7,minmax(0,1fr)); }
  .calendar-weekdays span { font-size:11px !important; }
  .booking-calendar-card { padding:12px !important; }
  .booking-calendar-head { grid-template-columns:44px minmax(0,1fr) 44px !important; }
  .booking-calendar-head b { font-size:16px !important; }
  .booking-slots { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .booking-slots button { min-height:54px !important; }
  .booking-slots button b { font-size:16px !important; }
  .booking-slots button small { font-size:12px !important; }
  .booking-fields { grid-template-columns:1fr !important; }
  .booking-fields label { font-size:13px !important; }
  .booking-fields .full { grid-column:auto !important; }
  .booking-fields input, .booking-fields textarea { min-height:48px !important; }
  .booking-actions { position:fixed !important; z-index:8; left:0 !important; right:0 !important; bottom:0 !important; margin:0 !important; padding:12px 16px calc(12px + env(safe-area-inset-bottom)) !important; display:flex !important; gap:10px !important; background:linear-gradient(180deg,rgba(9,8,13,.9),#09080d 18%) !important; border-top:1px solid #403049; }
  .booking-actions .btn { width:auto !important; flex:1; white-space:normal; text-align:center; }
  .booking-back { padding:10px 12px !important; flex:0 0 auto; }
  .booking-summary { grid-template-columns:1fr !important; }
  .payment-card { flex-wrap:wrap; }
  #serviceDialog { width:calc(100vw - 16px) !important; max-height:calc(100dvh - 16px) !important; }
  .service-detail-hero { height: min(340px,40dvh) !important; }
  .service-detail-heading { left:18px !important; right:18px !important; bottom:18px !important; }
  .service-detail-heading .dialog-title { font-size:clamp(35px,7vw,58px) !important; }
  .service-detail-content { grid-template-columns:minmax(0,1fr) !important; padding:22px 17px 25px !important; gap:19px !important; }
  .service-detail-main .dialog-list { grid-template-columns:1fr !important; }
  .service-detail-aside { position:static !important; }
  .service-detail-aside .dialog-actions { grid-template-columns:1fr !important; }
}

/* ===== <= 480 px: phones (including narrow iPhone widths) ===== */
@media (max-width: 480px) {
  :root { --mobile-gutter:14px; }
  .nav { height:68px !important; }
  .nav-links, .nav-links.open { top:68px !important; height:calc(100dvh - 68px) !important; }
  .brand img { width:57px !important; }
  .nav-actions { gap:6px; }
  .nav-actions .btn-small { padding:10px 11px !important; font-size:13px; }
  .nav-cta-desktop { display:none !important; }
  .nav-cta-mobile { display:inline !important; }
  .menu-toggle { flex-basis:44px !important; width:44px; height:44px !important; }
  .hero { padding-top:83px !important; }
  .hero-copy h1 { font-size: clamp(34px, 8.45vw, 42px) !important; letter-spacing:-.055em !important; line-height:.99 !important; }
  .hero-copy > p { font-size:16px !important; }
  .hero-grid { gap:22px !important; }
  .hero-visual { min-height:270px !important; }
  .hero-image { min-height:270px !important; }
  .hero-image img { object-position:54% 50%; }
  .hero-stat { display:none !important; }
  .hero-badge-live { font-size:10px; }
  .hero-chips { display:flex !important; flex-wrap:wrap !important; overflow:visible !important; gap:7px !important; }
  .hero-chips span { flex:0 1 auto !important; }
  .section-pad { padding-top:62px !important; padding-bottom:62px !important; }
  .section-head h2,.result h2,.faq h2,.contact h2 { font-size:clamp(32px,8.9vw,43px) !important; }
  .service-media { min-height:210px !important; }
  .service-content { padding:22px 18px !important; }
  .service-content h3 { font-size:clamp(34px,9vw,43px) !important; }
  .goal-card { padding:11px !important; }
  .goal-card small,.goal-card i { font-size:11px !important; }
  .goal-card b { font-size:15px !important; }
  .service-carousel { grid-auto-columns:88% !important; }
  .service-card { min-height:0 !important; }
  .service-card-visual { min-height:182px !important; }
  .service-card-body > div { display:flex; flex-wrap:wrap; gap:10px; }
  .service-card-body p { font-size:16px !important; }
  .price-panel { padding:17px 12px !important; }
  .price-tab { min-width:154px !important; }
  .mobile-price-amounts { padding:5px 10px 9px; }
  .mobile-price-amount dt { font-size:12px; }
  .mobile-price-amount dd { font-size:24px; }
  .quote-grid { grid-template-columns:1fr !important; }
  .quote-grid .quote-card { min-height:150px; }
  .polish-levels article { min-height:235px; }
  .compare { aspect-ratio:3/4 !important; }
  .compare-label { padding:8px 10px !important; font-size:11px !important; }
  .compare-line span { width:56px !important; height:56px !important; }
  .result-facts span { font-size:14px; }
  .contact-media { height:230px !important; }
  .contact-cards { grid-template-columns:1fr !important; }
  .contact-cards b { font-size:15px !important; }
  .contact-actions .btn { font-size:13px !important; }
  .footer-links { display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; text-align:center; width:100%; }
  .quick-dock { right:calc(9px + env(safe-area-inset-right)) !important; bottom:calc(9px + env(safe-area-inset-bottom)) !important; gap:6px !important; }
  .quick-dock a { width:44px !important; height:44px !important; font-size:14px; border-radius:13px; }
  .booking-main { padding-left:13px !important; padding-right:13px !important; }
  .booking-calendar-card,.slot-panel { padding:9px !important; }
  .booking-dates { gap:2px !important; }
  .booking-dates button span { width:34px !important; height:34px !important; }
  .booking-calendar-head { gap:4px !important; }
  .booking-actions { padding-left:13px !important; padding-right:13px !important; }
  .booking-actions .btn { font-size:13px !important; padding:10px !important; }
  #serviceDialog .dialog-close { min-width:44px !important; min-height:44px !important; }
}

/* ===== <= 360 px: smallest supported screens (320 / 360 px) ===== */
@media (max-width: 360px) {
  :root { --mobile-gutter:11px; }
  .nav-actions .btn-small { padding:9px 10px !important; }
  .hero-copy h1 { font-size:clamp(31px,9.2vw,34px) !important; }
  .hero-chips span { font-size:11px; }
  .hero-visual,.hero-image { min-height:235px !important; }
  .section-head h2,.result h2,.faq h2,.contact h2 { font-size:32px !important; }
  .goal-card { padding:9px !important; }
  .goal-card b { font-size:14px !important; }
  .price-tab { min-width:146px !important; }
  .mobile-price-amounts { padding:4px 8px 9px; }
  .mobile-price-amount { padding-left:4px !important; padding-right:4px !important; }
  .mobile-price-amount dt { font-size:12px; }
  .mobile-price-amount dd { font-size:22px; }
  .booking-main { padding-left:10px !important; padding-right:10px !important; }
  .booking-calendar-card { padding:6px !important; }
  .booking-dates { gap:0 !important; }
  .booking-dates button span { width:31px !important; height:31px !important; }
  .booking-actions { padding-left:10px !important; padding-right:10px !important; }
  .booking-actions .btn { font-size:12px !important; }
}

/* Universal within the mobile ruleset: prefer the user's motion preference */
@media (max-width: 1024px) and (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto !important; }
  *,*::before,*::after { animation:none !important; transition:none !important; }
  .reveal { opacity:1 !important; transform:none !important; }
}

/* Booking step animation used a transform, which made fixed footer buttons
   relative to the step instead of the screen on Chromium/iOS. */
@media (max-width:768px) {
  .booking-step.active { animation:none !important; transform:none !important; }
  .quick-dock { display:flex !important; flex-direction:row !important; gap:8px !important; left:50% !important; right:auto !important; bottom:calc(9px + env(safe-area-inset-bottom)) !important; transform:translateX(-50%); padding:6px; border:1px solid rgba(189,105,255,.25); border-radius:17px; background:rgba(9,7,14,.92); box-shadow:0 8px 32px rgba(0,0,0,.45); }
  body:has(.booking-dialog[open]) .quick-dock, body:has(#serviceDialog[open]) .quick-dock, body.mobile-menu-open .quick-dock { display:none !important; }
  main { padding-bottom:65px; }
}

/* Mobile background WebP alternatives avoid downloading full-resolution PNG cards. */
@media(max-width:1024px){
.service-card-visual.image-clean { background-image:linear-gradient(180deg,transparent,rgba(6,4,9,.76)),url("assets/mobile/detailing.webp") !important; }
.service-card-visual.image-polish { background-image:linear-gradient(180deg,transparent,rgba(6,4,9,.76)),url("assets/mobile/polissage.webp") !important; }
.service-card-visual.image-ppf { background-image:linear-gradient(180deg,transparent,rgba(6,4,9,.76)),url("assets/mobile/ppf.webp") !important; }
.service-card-visual.image-tint { background-image:linear-gradient(180deg,transparent,rgba(6,4,9,.76)),url("assets/mobile/vitres.webp") !important; }
.service-card-visual.image-express { background-image:linear-gradient(180deg,transparent,rgba(6,4,9,.76)),url("assets/mobile/lavage-express.webp") !important; }
.service-card-visual.image-ceramic { background-image:linear-gradient(180deg,transparent,rgba(6,4,9,.76)),url("assets/mobile/ceramique.webp") !important; }
.service-card-visual.image-engine { background-image:linear-gradient(180deg,transparent,rgba(6,4,9,.76)),url("assets/mobile/nettoyage-moteur.webp") !important; }
.service-card-visual.image-ozone { background-image:linear-gradient(180deg,transparent,rgba(6,4,9,.76)),url("assets/mobile/traitement-ozone.webp") !important; }
.service-card-visual.image-hydro { background-image:linear-gradient(180deg,transparent,rgba(6,4,9,.76)),url("assets/mobile/hydrophobe-vitres.webp") !important; }
.service-card-visual.image-roof { background-image:linear-gradient(180deg,transparent,rgba(6,4,9,.76)),url("assets/mobile/hydrophobe-capote.webp") !important; }
.service-card-visual.image-leather { background-image:linear-gradient(180deg,transparent,rgba(6,4,9,.76)),url("assets/mobile/soin-cuir.webp") !important; }
.service-card-visual.image-headlight { background-image:linear-gradient(180deg,transparent,rgba(6,4,9,.76)),url("assets/mobile/renovation-phares.webp") !important; }
.service-card-visual.image-plastic { background-image:linear-gradient(180deg,transparent,rgba(6,4,9,.76)),url("assets/mobile/renovation-plastiques.webp") !important; }
 .compare .mobile-picture {position:absolute;inset:0;width:100%;height:100%;}
}

@media(max-width:360px){
  .booking-calendar-card { width:calc(100% + 20px); margin-left:-10px; padding:4px !important; }
  .booking-dates button { min-width:44px !important; min-height:44px !important; }
}

/* Desktop picture wrappers preserve the original image box and layout. */
@media (min-width:1025px) {
  .mobile-picture { display:contents; }
}

/* Phone tariff rows: each vehicle has its own generous horizontal line.
   This avoids cramped labels/prices at 320–430 px, especially Van & exception. */
@media (max-width:480px) {
  .mobile-price-amounts { grid-template-columns:minmax(0,1fr) !important; padding:4px 15px 11px; }
  .mobile-price-amount { flex-wrap:nowrap; min-height:47px; padding:10px 1px !important; border-right:0 !important; border-bottom:1px solid rgba(255,255,255,.085) !important; }
  .mobile-price-amount:last-child { border-bottom:0 !important; }
  .mobile-price-amount dt { font-size:15px !important; }
  .mobile-price-amount dd { font-size:25px !important; }
}

/* V40 — Tarifs accessibles sans JavaScript : les deux grilles de cartes sont dans le HTML.
   Les onglets masquent les panneaux seulement après leur initialisation réussie. */
@media (max-width: 768px) {
  .pricing-shell .price-panel { display:grid !important; grid-template-columns:minmax(0,1fr) !important; }
  html.js-pricing-ready .pricing-shell .price-panel:not(.active) { display:none !important; }
  html:not(.js-pricing-ready) .pricing-shell .price-panel { margin-bottom:16px; }
  html:not(.js-pricing-ready) .pricing-tabs { display:none !important; }
  .mobile-price-cards { display:grid !important; min-width:0 !important; visibility:visible !important; opacity:1 !important; }
  .mobile-price-card, .mobile-price-heading, .mobile-price-amounts { min-width:0 !important; }
  /* Popup d'envoi : état d'envoi et solution de secours sans ajouter de faux paiement. */
  .request-info { max-width:100%; overflow-wrap:anywhere; }
  .request-info strong { font-size:clamp(17px,4.3vw,23px); line-height:1.2; }
  .booking-alternate { font-size:14px; color:#d7c8e5; padding:10px 2px 0; }
  .booking-wa-link { min-height:44px; padding:9px 4px; color:#cf93ff; text-decoration:underline; text-underline-offset:4px; }
  .request-result { margin:12px 0 16px; padding:16px; border:1px solid #a755e6; border-radius:14px; background:#1b1125; font-size:15px; line-height:1.6; overflow-wrap:anywhere; }
  .request-result.is-success { border-color:#875ab5; }
  .request-fallback-link { display:inline-flex; min-height:44px; align-items:center; color:#edccff; margin-top:6px; text-decoration:underline; }
  .booking-step.request-sent .booking-pay { display:none; }
  /* Calendrier 320–360 px : sept colonnes ne doivent pas déborder. */
  .booking-calendar-card { width:100% !important; margin-left:0 !important; min-width:0 !important; }
  .booking-dates { width:100%; min-width:0 !important; grid-template-columns:repeat(7,minmax(0,1fr)) !important; }
  .booking-dates button { width:100% !important; min-width:0 !important; min-height:44px !important; }
  .booking-dates button span { max-width:100%; }
  .booking-calendar-head > div { min-width:0; }
  .booking-calendar-head b { overflow-wrap:anywhere; }
  .quick-dock { bottom:calc(8px + env(safe-area-inset-bottom)) !important; }
  main { padding-bottom:calc(84px + env(safe-area-inset-bottom)); }
  /* Les inputs de 16 px évitent le zoom Safari. */
  .booking-fields input,.booking-fields textarea,.service-search input { font-size:16px !important; }
}
@media (max-width: 360px) {
  .booking-dates button { min-width:0 !important; }
  .booking-dates button span { width:min(31px,100%) !important; }
  .mobile-price-heading { padding:15px 13px; }
}

/* Résilience sans JavaScript : la visibilité des fiches/tarifs ne dépend pas des animations de révélation. */
@media (max-width: 768px) {
 html:not(.js-pricing-ready) .reveal { opacity:1 !important; transform:none !important; }
}

/* V40 — Un loader ne doit jamais bloquer le site mobile si le script ne se charge pas. */
@media (max-width: 768px) { .loader { display:none !important; } }