/**
 * Mobile Responsive Improvements — DN Audition
 * Loaded last to override prior CSS conflicts.
 * Targets: 320, 360, 390, 414, 768.
 */

/* ===== 0. Global hardening ===== */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { overflow-x: hidden; }
*, *::before, *::after { box-sizing: border-box; }
img, svg, video, iframe { max-width: 100%; height: auto; }

/* Skip link visible on focus */
.skip-link:focus,
.skip-link:focus-visible {
  position: fixed !important;
  top: 8px !important;
  left: 8px !important;
  width: auto !important;
  height: auto !important;
  padding: 10px 14px !important;
  clip: auto !important;
  clip-path: none !important;
  background: #ffffff !important;
  color: #1a1a1a !important;
  border-radius: 6px !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.15) !important;
  z-index: 999999 !important;
  font-weight: 600 !important;
}

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

/* ===== 1. Sticky Mobile CTA — slim, side-by-side, safe-area aware ===== */
@media (max-width: 768px) {
  .mobile-cta,
  .mobile-cta--split {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    background: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    box-shadow: 0 -4px 16px rgba(0,0,0,0.08) !important;
    border-top: 1px solid rgba(0,0,0,0.06);
    z-index: 998 !important;
  }
  .mobile-cta .mobile-cta-btn,
  .mobile-cta--split .mobile-cta-btn {
    min-height: 48px !important;
    height: 48px !important;
    padding: 0 12px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border-radius: 12px !important;
    white-space: nowrap !important;
    line-height: 1 !important;
  }
  .mobile-cta .mobile-cta-btn svg,
  .mobile-cta--split .mobile-cta-btn svg {
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
  }
  .mobile-cta-call {
    background: #ffffff !important;
    color: var(--primary-color, #2c3e2c) !important;
    border: 1.5px solid var(--primary-color, #2c3e2c) !important;
  }
  .mobile-cta-rdv {
    background: var(--primary-color, #2c3e2c) !important;
    color: #ffffff !important;
    border: 1.5px solid var(--primary-color, #2c3e2c) !important;
  }

  /* Hide redundant floating CTA on mobile when sticky bar is present */
  .floating-cta { display: none !important; }
  .desktop-sticky-call { display: none !important; }

  /* Push body content above sticky bar */
  body { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
}

/* Hide mobile sticky bar on tablet+ */
@media (min-width: 769px) {
  .mobile-cta,
  .mobile-cta--split { display: none !important; }
}

/* ===== 2. Header / Navigation ===== */
@media (max-width: 768px) {
  .site-header .container { padding-inline: 16px !important; }

  /* Trust row: hide non-essential bits, keep phone */
  .header-trust-row {
    flex-direction: row !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    padding: 6px 0 !important;
    font-size: 12px !important;
  }
  .header-trust-row span { display: none !important; }
  .header-trust-row a {
    color: var(--primary-color, #2c3e2c) !important;
    font-weight: 600 !important;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
  }

  .header-inner {
    gap: 8px !important;
    padding: 8px 0 !important;
  }

  /* Compact RDV button — keep visible but smaller */
  .header-actions { gap: 8px !important; }
  .header-rdv-btn {
    padding: 10px 14px !important;
    font-size: 13px !important;
    min-height: 40px !important;
    border-radius: 10px !important;
  }
  .header-phone-link { display: none !important; }

  /* Burger button: 44x44, on the right after CTA */
  .mobile-menu-toggle {
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer;
    position: relative;
  }
  .mobile-menu-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--primary-color, #2c3e2c);
    border-radius: 2px;
    transition: transform .25s ease, opacity .2s ease;
    position: absolute;
    left: 11px;
  }
  .mobile-menu-toggle span:nth-child(1) { top: 14px; }
  .mobile-menu-toggle span:nth-child(2) { top: 21px; }
  .mobile-menu-toggle span:nth-child(3) { top: 28px; }
  .mobile-menu-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .mobile-menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .mobile-menu-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
}

/* Tiny screens: drop the in-header CTA, keep phone */
@media (max-width: 360px) {
  .header-rdv-btn { display: none !important; }
}

/* Mobile menu drawer (full screen) */
@media (max-width: 768px) {
  .main-nav {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100dvh !important;
    background: #ffffff !important;
    z-index: 9998 !important;
    padding: 88px 24px 32px !important;
    transform: translateX(100%) !important;
    transition: transform .35s cubic-bezier(.2,.8,.2,1) !important;
    overflow-y: auto !important;
    visibility: hidden !important;
    opacity: 1 !important;
    display: block !important;
    box-shadow: none !important;
  }
  .main-nav.active {
    transform: translateX(0) !important;
    visibility: visible !important;
  }
  .main-nav ul {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .main-nav ul li { width: 100%; }
  .main-nav ul a {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 56px !important;
    padding: 16px 4px !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #1a1a1a !important;
    border-bottom: 1px solid rgba(0,0,0,.06) !important;
    text-decoration: none !important;
  }

  /* Burger above the drawer */
  .mobile-menu-toggle { z-index: 9999 !important; }

  /* Body scroll lock when menu open */
  body.menu-open { overflow: hidden !important; }
}

/* ===== 3. Hero ===== */
@media (max-width: 768px) {
  .hero-section { padding: 96px 0 48px !important; min-height: auto !important; }

  /* Display the mobile slider, hide desktop block */
  .hero-desktop { display: none !important; }
  .hero-slider-mobile { display: block !important; }

  .hero-slide-content {
    padding: 0 20px !important;
    text-align: center;
  }
  .hero-section h1 {
    font-size: clamp(1.75rem, 7vw, 2.25rem) !important;
    line-height: 1.15 !important;
    margin: 0 0 12px !important;
    text-wrap: balance;
  }
  .hero-title-line,
  .hero-title-highlight {
    display: inline !important;
  }
  .hero-title-highlight { color: var(--accent-color, #d4a35d); }
  .hero-section h1 br { display: none; }

  .hero-description {
    font-size: 15px !important;
    line-height: 1.5 !important;
    max-width: 36ch;
    margin: 0 auto 18px !important;
  }

  .hero-buttons {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    justify-content: center !important;
  }
  .hero-section .btn {
    padding: 12px 18px !important;
    min-height: 48px !important;
    font-size: 14px !important;
    line-height: 1.1 !important;
    border-radius: 12px !important;
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
  }
  .hero-section .btn svg { width: 16px; height: 16px; }

  .hero-scroll-indicator { display: none !important; }
  .hero-bg-shapes { display: none !important; }

  /* Slide image: ensure proper crop */
  .hero-slide-image img {
    object-fit: cover !important;
    object-position: 70% 40% !important;
    min-height: 380px;
  }
  .hero-slide-overlay {
    background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.65) 100%) !important;
  }

  .hero-slider-dots {
    display: flex !important;
    gap: 8px !important;
    justify-content: center !important;
    margin-top: 16px !important;
  }
  .hero-slider-dot {
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    border: none !important;
    background: rgba(255,255,255,.5) !important;
    cursor: pointer;
    padding: 0 !important;
    transition: background .25s, width .25s;
  }
  .hero-slider-dot.active { background: #ffffff !important; width: 22px !important; border-radius: 6px !important; }
}

/* ===== 4. Reassurance bar (CRITICAL: text was invisible) ===== */
.reassurance-bar {
  background: #f4f7f1 !important;
  padding: 28px 0 !important;
  border-block: 1px solid rgba(44, 62, 44, 0.08);
}
.reassurance-bar .reassurance-items {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 16px !important;
}
.reassurance-bar .reassurance-item {
  color: #2c3e2c !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 14px !important;
  line-height: 1.3 !important;
  text-align: left !important;
}
.reassurance-bar .reassurance-item span {
  color: #2c3e2c !important;
  font-weight: 600 !important;
}
.reassurance-bar .reassurance-icon {
  width: 36px !important;
  height: 36px !important;
  background: #2c3e2c !important;
  color: #ffffff !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
.reassurance-bar .reassurance-icon svg {
  width: 18px !important;
  height: 18px !important;
  stroke: #ffffff !important;
  color: #ffffff !important;
}

@media (max-width: 768px) {
  .reassurance-bar { padding: 20px 0 !important; }
  .reassurance-bar .reassurance-items {
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
  }
  .reassurance-bar .reassurance-item {
    font-size: 13px !important;
    gap: 8px !important;
  }
  .reassurance-bar .reassurance-icon {
    width: 32px !important;
    height: 32px !important;
  }
  .reassurance-bar .reassurance-icon svg {
    width: 16px !important;
    height: 16px !important;
  }
}

@media (max-width: 380px) {
  .reassurance-bar .reassurance-items {
    grid-template-columns: 1fr !important;
  }
}

/* ===== 5. Sections — fluid titles, tighter padding on mobile ===== */
@media (max-width: 768px) {
  .section,
  section[class*="-section"] {
    padding-block: 48px !important;
  }
  .section-header { margin-bottom: 28px !important; }
  .section-title,
  .section h2,
  section[class*="-section"] > .container > .section-header > h2 {
    font-size: clamp(1.5rem, 5.5vw, 2rem) !important;
    line-height: 1.2 !important;
    text-wrap: balance;
  }
  .section-subtitle,
  .section-header p {
    font-size: 15px !important;
    line-height: 1.5 !important;
  }
  .container { padding-inline: 20px !important; }
}
@media (max-width: 380px) {
  .container { padding-inline: 16px !important; }
}

/* ===== 6. Services ===== */
@media (max-width: 768px) {
  .services-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding-inline: 0 !important;
  }
  .service-card {
    width: auto !important;
    max-width: 100% !important;
    padding: 24px 20px !important;
  }
  .service-card .description,
  .service-card p {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}
@media (min-width: 700px) and (max-width: 900px) {
  .services-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ===== 7. Gallery ===== */
@media (max-width: 768px) {
  .gallery-hero {
    border-radius: 16px !important;
    overflow: hidden;
  }
  .gallery-hero-text,
  .gallery-overlay-text {
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    padding: 16px !important;
    background: linear-gradient(transparent, rgba(0,0,0,.75)) !important;
    color: #ffffff !important;
  }
  .gallery-grid,
  .gallery-mini-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .gallery-item-mini,
  .gallery-mini-grid > * {
    width: auto !important;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 12px;
  }
  .gallery-item-mini img,
  .gallery-mini-grid img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
}

/* ===== 8. Engagements / Why us / Pourquoi appareiller — denser on mobile ===== */
@media (max-width: 768px) {
  .engagements-grid,
  .why-us-grid,
  .pourquoi-grid,
  .patients-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
}
@media (min-width: 480px) and (max-width: 768px) {
  .engagements-grid,
  .why-us-grid,
  .pourquoi-grid,
  .patients-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}
@media (max-width: 768px) {
  .why-us-card,
  .engagement-card,
  .pourquoi-card,
  .patient-card {
    padding: 20px 18px !important;
    text-align: left !important;
  }
  .why-us-card h3,
  .engagement-card h3,
  .pourquoi-card h3 {
    font-size: clamp(1.05rem, 4.5vw, 1.2rem) !important;
    line-height: 1.3 !important;
    text-align: left !important;
  }
  .why-us-card p,
  .engagement-card p,
  .pourquoi-card p {
    font-size: 14px !important;
    line-height: 1.5 !important;
    text-align: left !important;
  }
}

/* ===== 9. Technologies ===== */
@media (max-width: 768px) {
  .tech-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }
  .tech-card {
    padding: 18px 14px !important;
    min-height: auto !important;
  }
  .tech-card h3 {
    font-size: 14px !important;
    line-height: 1.25 !important;
  }
  .tech-card p {
    font-size: 12.5px !important;
    line-height: 1.4 !important;
  }
  .tech-brands {
    display: flex !important;
    overflow-x: auto !important;
    gap: 24px !important;
    padding: 16px 4px !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .tech-brands > * { scroll-snap-align: center; flex-shrink: 0; }
  .tech-brands::-webkit-scrollbar { display: none; }
}
@media (max-width: 380px) {
  .tech-grid { grid-template-columns: 1fr !important; }
}

/* ===== 10. Déroulement / process steps ===== */
@media (max-width: 768px) {
  .deroulement-steps,
  .process-steps,
  .steps-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .deroulement-step,
  .process-step,
  .step-card {
    padding: 20px !important;
    text-align: left !important;
  }
}

/* ===== 11. Testimonials carousel ===== */
@media (max-width: 768px) {
  .testimonials-carousel,
  .testimonials-grid {
    overflow: hidden !important;
    grid-template-columns: 1fr !important;
  }
  .carousel-track {
    display: flex !important;
    gap: 16px !important;
    will-change: transform;
  }
  .testimonial-card,
  .google-review-card {
    width: calc(100vw - 48px) !important;
    max-width: calc(100vw - 48px) !important;
    flex-shrink: 0 !important;
    padding: 20px !important;
  }
  .testimonial-card p,
  .google-review-card p {
    font-size: 14.5px !important;
    line-height: 1.55 !important;
  }
}

/* ===== 12. FAQ ===== */
@media (max-width: 768px) {
  .faq-section .faq-list,
  .faq-section .faq-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .faq-question {
    min-height: 56px !important;
    padding: 16px !important;
    font-size: 15px !important;
    line-height: 1.35 !important;
    text-align: left !important;
  }
  .faq-answer {
    padding: 0 16px 16px !important;
    font-size: 14.5px !important;
    line-height: 1.6 !important;
  }
}
.faq-question svg,
.faq-question .faq-icon {
  transition: transform .25s ease;
}
.faq-question[aria-expanded="true"] svg,
.faq-item.active .faq-question svg,
.faq-item.active .faq-question .faq-icon {
  transform: rotate(180deg);
}

/* ===== 13. CTA section ===== */
@media (max-width: 768px) {
  .cta-section {
    padding: 48px 0 !important;
  }
  .cta-content-wrapper { padding: 0 8px; }
  .cta-section h2 {
    font-size: clamp(1.4rem, 5.5vw, 1.85rem) !important;
    line-height: 1.2 !important;
  }
  .cta-section p {
    font-size: 15px !important;
    line-height: 1.55 !important;
  }
  .cta-features {
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 18px !important;
    font-size: 13.5px !important;
  }
  .cta-buttons {
    flex-direction: column !important;
    gap: 10px !important;
    align-items: stretch !important;
  }
  .cta-buttons .btn {
    width: 100% !important;
    min-height: 50px !important;
    padding: 14px 18px !important;
    font-size: 15px !important;
    justify-content: center !important;
  }
  .cta-icon-wrapper { margin-bottom: 16px !important; }
  .cta-icon { width: 56px !important; height: 56px !important; }
  .cta-icon svg { width: 28px !important; height: 28px !important; }
}

/* ===== 14. Contact / Form ===== */
/* Form input font-size 16px to prevent iOS zoom on focus */
.contact-form input,
.contact-form textarea,
.contact-form select,
#contact-form input,
#contact-form textarea,
#contact-form select {
  font-size: 16px !important;
  min-height: 48px;
}
.contact-form textarea,
#contact-form textarea {
  min-height: 110px;
}

@media (max-width: 768px) {
  .contact-form-wrapper {
    padding: 24px 18px !important;
    border-radius: 16px !important;
  }
  .contact-form-wrapper h3 {
    font-size: 1.2rem !important;
    margin-bottom: 14px !important;
  }
  .contact-form .form-row {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .contact-form input,
  .contact-form textarea,
  #contact-form input,
  #contact-form textarea {
    width: 100% !important;
    padding: 14px 16px !important;
    border-radius: 10px !important;
  }
  .contact-form .btn,
  #contact-form .btn {
    width: 100% !important;
    min-height: 52px !important;
    font-size: 16px !important;
    margin-top: 4px !important;
  }
  .contact-info h3 {
    font-size: 1.15rem !important;
    margin-bottom: 8px !important;
  }
  .contact-item {
    gap: 12px !important;
  }
  .contact-icon {
    width: 40px !important;
    height: 40px !important;
  }
  .contact-icon svg {
    width: 20px !important;
    height: 20px !important;
  }
  .contact-features li {
    font-size: 14px !important;
    gap: 8px !important;
    min-height: 28px;
  }
}

/* ===== 15. Footer ===== */
@media (max-width: 768px) {
  .site-footer {
    padding: 40px 0 24px !important;
  }
  .footer-rdv-panel {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
    padding: 24px !important;
    border-radius: 16px !important;
    text-align: left;
  }
  .footer-rdv-panel h2 {
    font-size: clamp(1.2rem, 5vw, 1.6rem) !important;
    line-height: 1.25 !important;
  }
  .footer-rdv-panel p {
    font-size: 14.5px !important;
    line-height: 1.55 !important;
  }
  .footer-rdv-actions {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }
  .footer-rdv-actions .btn {
    width: 100% !important;
    justify-content: center !important;
    min-height: 50px !important;
  }
  .footer-call-link {
    text-align: center;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .footer-inner {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .footer-brand p,
  .footer-contact p {
    font-size: 14px !important;
    line-height: 1.55 !important;
  }
  .footer-proof-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .footer-proof-grid span {
    padding: 6px 10px !important;
    font-size: 12px !important;
    border-radius: 999px;
  }
  .footer-links h4,
  .footer-contact h4 {
    font-size: 15px !important;
    margin-bottom: 10px !important;
  }
  .footer-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  /* Touch-friendly footer links */
  .site-footer a,
  .footer-contact-link,
  .footer-links a {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 44px !important;
    padding: 8px 0 !important;
    font-size: 14.5px !important;
    line-height: 1.4 !important;
  }
  .footer-bottom {
    padding-top: 20px !important;
    margin-top: 24px !important;
    text-align: center;
  }
  .footer-bottom p {
    font-size: 12.5px !important;
    line-height: 1.5 !important;
  }
}

/* ===== 16. Buttons baseline ===== */
@media (max-width: 768px) {
  .btn {
    min-height: 44px;
  }
  .btn-lg {
    min-height: 52px !important;
    padding: 14px 20px !important;
    font-size: 15px !important;
  }
}

/* ===== 17. Map iframe ===== */
.contact-map iframe {
  max-width: 100%;
  border: 0;
}

/* ===== 18. Tablet portrait ===== */
@media (min-width: 700px) and (max-width: 1024px) {
  .container { padding-inline: 28px !important; }
  .footer-inner { grid-template-columns: 2fr 1fr 1fr !important; }
}

/* ===== 19. Visually hidden util ===== */
.visually-hidden,
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ===== 20. Patient cards & badges (override custom.css) ===== */
@media (max-width: 768px) {
  .patients-grid,
  .patients-grid-8 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }
  .patient-card { border-radius: 14px !important; overflow: hidden; }
  .patient-image img,
  .patient-card img {
    width: 100% !important;
    height: 200px !important;
    object-fit: cover !important;
  }
  .patient-overlay,
  .patient-card .patient-info {
    padding: 12px !important;
  }
  .patient-name {
    font-size: 14px !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;
  }
  .patient-badge,
  .featured-badge {
    font-size: 12px !important;
    padding: 5px 10px !important;
    border-radius: 999px !important;
    line-height: 1.1 !important;
    letter-spacing: 0.01em;
    font-weight: 600 !important;
  }
}
@media (max-width: 380px) {
  .patients-grid,
  .patients-grid-8 {
    grid-template-columns: 1fr !important;
  }
  .patient-image img,
  .patient-card img { height: 220px !important; }
}

/* ===== 21. Gallery showcase / featured (override custom.css gaps) ===== */
@media (max-width: 768px) {
  .gallery-showcase {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .gallery-featured {
    min-height: 280px !important;
    border-radius: 16px !important;
    overflow: hidden;
  }
  .gallery-featured img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  .gallery-featured-overlay {
    padding: 16px !important;
  }
  .gallery-featured-overlay h3 {
    font-size: 18px !important;
    line-height: 1.25 !important;
    margin: 0 0 6px !important;
  }
  .gallery-featured-overlay p {
    font-size: 14px !important;
    line-height: 1.45 !important;
  }
  .gallery-features {
    padding: 14px !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
  }
  .gallery-masonry {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
}

/* ===== 22. Carousel arrows: ensure 44px touch target ===== */
@media (max-width: 768px) {
  .carousel-arrow,
  .carousel-prev,
  .carousel-next,
  .testimonials-carousel-arrow {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .carousel-arrow svg,
  .carousel-prev svg,
  .carousel-next svg {
    width: 20px !important;
    height: 20px !important;
  }
}

/* ===== 23. Hero stats (mobile compact) ===== */
@media (max-width: 768px) {
  .hero-stats {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    margin-top: 18px !important;
    padding: 14px 8px !important;
    border-radius: 14px !important;
  }
  .hero-stats .stat-item {
    padding: 0 !important;
    text-align: center !important;
  }
  .hero-stats .stat-number {
    font-size: clamp(1.25rem, 5.5vw, 1.6rem) !important;
    line-height: 1 !important;
  }
  .hero-stats .stat-label {
    font-size: 11.5px !important;
    line-height: 1.25 !important;
    margin-top: 4px !important;
  }
}

/* ===== 24. Brand logos / partner row ===== */
@media (max-width: 768px) {
  .brand-logos,
  .brands-row,
  .tech-brands-grid {
    display: flex !important;
    overflow-x: auto !important;
    gap: 24px !important;
    padding: 8px 4px 12px !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .brand-logos > *,
  .brands-row > * {
    flex-shrink: 0 !important;
    scroll-snap-align: center;
  }
  .brand-logo,
  .brand-logo-img {
    max-height: 36px !important;
    width: auto !important;
    object-fit: contain !important;
  }
  .brand-logos::-webkit-scrollbar,
  .brands-row::-webkit-scrollbar { display: none; }
}

/* ===== 25. Reassurance bar items: avoid tiny text on smallest screens ===== */
@media (max-width: 380px) {
  .reassurance-bar { padding: 16px 0 !important; }
  .reassurance-bar .reassurance-item { font-size: 13px !important; }
}

/* ===== 26. Header trust row visibility on small screens ===== */
@media (max-width: 480px) {
  .header-trust-row {
    padding: 4px 0 !important;
    font-size: 12px !important;
  }
  .header-trust-row a { font-size: 13px !important; }
}

/* ===== 27. Section title — protect against custom.css overrides ===== */
@media (max-width: 768px) {
  .hero-section h1,
  .hero-slide-content h1 {
    font-size: clamp(1.6rem, 7.2vw, 2.1rem) !important;
    line-height: 1.15 !important;
    margin: 0 0 12px !important;
  }
  /* Fluid descriptive text in hero slides */
  .hero-slide-content p,
  .hero-description {
    font-size: 14.5px !important;
    line-height: 1.5 !important;
  }
}

/* ===== 28. Engagements list — ensure cards do not fight padding ===== */
@media (max-width: 768px) {
  .engagement-card,
  .why-us-card,
  .pourquoi-card,
  .patient-card .patient-info,
  .deroulement-step,
  .process-step {
    border-radius: 14px !important;
  }
}

/* ===== 29. Numbers / Stats row in why-us, deroulement ===== */
@media (max-width: 768px) {
  .step-number,
  .deroulement-step-number,
  .why-us-card-number {
    width: 36px !important;
    height: 36px !important;
    font-size: 14px !important;
    line-height: 36px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
  }
}

/* ===== 30. Sticky header height management ===== */
@media (max-width: 768px) {
  .site-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 999 !important;
    background: #ffffff !important;
    box-shadow: 0 2px 12px rgba(0,0,0,.06) !important;
  }
  /* Avoid jump: consistent header height ~64px+trust row */
  .site-header .container { padding-top: 4px !important; padding-bottom: 4px !important; }
}

/* ===== 31. Defensive: trim huge horizontal padding from custom.css ===== */
@media (max-width: 768px) {
  .container,
  .premium-container,
  .section > .container {
    padding-inline: 20px !important;
    max-width: 100% !important;
  }
}
@media (max-width: 380px) {
  .container,
  .premium-container,
  .section > .container {
    padding-inline: 16px !important;
  }
}

/* ===== 32. Engagements icons sizing ===== */
@media (max-width: 768px) {
  .engagement-icon,
  .why-us-icon,
  .pourquoi-icon,
  .service-icon {
    width: 48px !important;
    height: 48px !important;
    margin-bottom: 12px !important;
  }
  .engagement-icon svg,
  .why-us-icon svg,
  .pourquoi-icon svg,
  .service-icon svg {
    width: 24px !important;
    height: 24px !important;
  }
}

/* ===== 33. Map / contact info card stacking ===== */
@media (max-width: 768px) {
  .contact-grid,
  .contact-content {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .contact-map,
  .contact-info {
    width: 100% !important;
  }
  .contact-map iframe {
    width: 100% !important;
    height: 280px !important;
    border-radius: 14px !important;
  }
}

/* ===== 34. Anti-zoom on form fields (iOS) — already set, scoped reinforcement ===== */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="search"],
textarea,
select {
  font-size: max(16px, 1rem) !important;
}

/* ===== 35. Section spacing rhythm consistency on mobile ===== */
@media (max-width: 768px) {
  .reassurance-bar + section,
  section + section {
    border-top: none;
  }
  .section-header h2 + p,
  .section-header > p {
    margin-top: 8px !important;
  }
}

/* ===== 36. Dot leader / decorative shapes off on mobile ===== */
@media (max-width: 768px) {
  .decoration,
  .bg-shape,
  .floating-shape,
  .blur-bubble {
    display: none !important;
  }
}