/* ============================================================
   BATIYS — MOBILE POLISH v3
   Refonte mobile complète : typo fluide, touches confort,
   cards aérées, formulaires lisibles, animations sobres.
   À charger APRÈS style.css.
   ============================================================ */

/* ─── FLUID TYPOGRAPHY (toutes tailles) ───────────────── */
@media (max-width: 980px) {
  body { -webkit-text-size-adjust: 100%; }
  h1 { font-size: clamp(1.75rem, 6vw, 2.4rem) !important; line-height: 1.15 !important; }
  h2 { font-size: clamp(1.45rem, 5vw, 2rem) !important; line-height: 1.2 !important; }
  h3 { font-size: clamp(1.2rem, 4.2vw, 1.6rem) !important; line-height: 1.25 !important; }
  h4 { font-size: clamp(1rem, 3.6vw, 1.15rem) !important; }
  p, li { font-size: clamp(.95rem, 3.4vw, 1rem) !important; line-height: 1.65 !important; }
}

/* ============================================================
   ≤ 720 px : refonte mobile générale
   ============================================================ */
@media (max-width: 720px) {

  /* ─── HEADER & NAV ───────────────────────────────────── */
  header {
    height: 64px !important;
    padding: 0 16px !important;
  }
  .site-logo-img {
    width: 38px !important; height: 38px !important;
  }
  .logo-text h1 {
    font-size: 1.05rem !important;
    line-height: 1 !important;
  }
  .logo-text small {
    font-size: .62rem !important;
  }

  /* Burger bien dimensionné, tap target 44x44 */
  .hamburger {
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
  }

  /* Le bouton devis du desktop est masqué sur mobile (déjà géré) */
  .nav-links .btn-devis { display: none !important; }

  /* Overlay menu fullscreen plus moderne */
  .nav-overlay {
    padding: 90px 24px 30px !important;
    background: linear-gradient(180deg, #0a1d35 0%, #15365b 100%) !important;
  }
  .nav-overlay a:not(.btn-devis) {
    font-size: 1.2rem !important;
    padding: 14px 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.08);
    transition: padding-left .25s ease, color .25s ease;
  }
  .nav-overlay a:not(.btn-devis):hover {
    padding-left: 8px !important;
    color: var(--orange, #E5671C) !important;
  }

  /* ─── HERO ───────────────────────────────────────────── */
  .ch-v2-hero,
  .ab-hero, .cn-hero, .dg-hero, .nl-hero {
    padding: 80px 18px 40px !important;
  }
  .ch-v2-hero-inner {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    text-align: left;
  }
  .ch-v2-badge {
    font-size: .78rem !important;
    padding: 7px 12px !important;
  }
  .ch-v2-hero h1 {
    margin-top: 14px !important;
  }
  .ch-v2-hero .lead {
    font-size: 1rem !important;
    line-height: 1.65 !important;
  }
  .hero-btns {
    flex-direction: column;
    gap: 12px !important;
    margin-top: 20px !important;
    width: 100%;
  }
  .hero-btns .btn-primary,
  .hero-btns .btn-outline-light {
    width: 100% !important;
    justify-content: center;
    padding: 14px 18px !important;
    font-size: 1rem !important;
    border-radius: 14px !important;
  }

  /* Mini-trust sous le hero */
  .ch-v2-trust-mini {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 18px !important;
    padding: 14px 16px !important;
    background: rgba(255,255,255,.06) !important;
    border-radius: 14px;
    backdrop-filter: blur(6px);
  }
  .ch-v2-trust-mini .stars-row {
    font-size: .9rem !important;
    letter-spacing: 1px;
  }
  .ch-v2-trust-mini small {
    font-size: .82rem !important;
    line-height: 1.45 !important;
  }

  /* Hero card image (à droite sur desktop, en-dessous sur mobile) */
  .ch-v2-hero-card {
    border-radius: 22px !important;
    box-shadow: 0 22px 50px rgba(8, 23, 39, .35) !important;
    aspect-ratio: 4 / 3;
    min-height: 0 !important;
  }
  .ch-v2-hero-card .overlay {
    padding: 14px 16px !important;
    backdrop-filter: blur(10px);
    background: linear-gradient(180deg, transparent, rgba(0,0,0,.7)) !important;
  }
  .ch-v2-hero-card .chip { font-size: .72rem !important; padding: 5px 10px !important; }

  /* ─── KPI STRIP ──────────────────────────────────────── */
  .kpi-strip {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    padding: 24px 16px !important;
    border-radius: 22px !important;
  }
  .kpi-strip .kpi-item {
    padding: 18px 14px !important;
    text-align: center;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .08);
  }
  .kpi-strip .kpi-num {
    font-size: 1.85rem !important;
    margin-bottom: 6px !important;
  }
  .kpi-strip .kpi-num em {
    font-size: 1rem !important;
  }
  .kpi-strip .kpi-label {
    font-size: .78rem !important;
    line-height: 1.45 !important;
  }

  /* ─── SECTION TITLES ──────────────────────────────────── */
  .section-title {
    margin-bottom: 28px !important;
  }
  .section-title .eyebrow {
    font-size: .72rem !important;
    padding: 5px 12px !important;
  }
  .section-title h3 {
    margin-top: 12px !important;
    margin-bottom: 10px !important;
  }
  .section-title p {
    font-size: .96rem !important;
    line-height: 1.6 !important;
  }

  /* ─── SECTIONS PADDING UNIFIÉ ───────────────────────── */
  .ch-v2-services,
  .ch-v2-why,
  .ch-v2-process,
  .ch-v2-pricing-section,
  .ch-v2-gallery,
  .ch-v2-testimonials,
  .ch-v2-zones,
  .ch-v2-faq-section,
  .bty-section {
    padding: 56px 16px !important;
  }

  /* ─── SERVICES CARDS ─────────────────────────────────── */
  .ch-v2-services-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .ch-v2-card {
    border-radius: 22px !important;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(15, 39, 68, .07);
  }
  .ch-v2-card-media {
    aspect-ratio: 16 / 10;
  }
  .ch-v2-card-media img {
    transition: transform .5s ease;
  }
  .ch-v2-card:hover .ch-v2-card-media img,
  .ch-v2-card:active .ch-v2-card-media img {
    transform: scale(1.04);
  }
  .ch-v2-card-media .chip {
    font-size: .68rem !important;
    padding: 5px 11px !important;
  }
  .ch-v2-card-media h3 {
    font-size: 1.18rem !important;
    line-height: 1.25 !important;
  }
  .ch-v2-card-body {
    padding: 22px 20px !important;
  }
  .ch-v2-card-body p {
    font-size: .95rem !important;
    line-height: 1.6 !important;
  }
  .ch-v2-card-body ul li {
    font-size: .9rem !important;
    padding-left: 22px !important;
  }
  .ch-v2-card-footer {
    margin-top: 16px !important;
    padding-top: 16px !important;
  }
  .ch-v2-card-footer .link-arrow {
    font-size: .92rem !important;
    font-weight: 700;
  }

  /* ─── WHY BATIYS (image + badge 4,9/5) ───────────────── */
  .ch-v2-why-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .ch-v2-why-image {
    min-height: 280px !important;
    border-radius: 22px !important;
  }
  .ch-v2-why-image .badge-float {
    right: 14px !important;
    bottom: 14px !important;
    max-width: calc(100% - 28px) !important;
    min-width: 0 !important;
    padding: 18px 20px 22px !important;
    border-radius: 18px !important;
  }
  .ch-v2-why-image .badge-float-stars {
    font-size: .88rem !important;
    margin-bottom: 6px !important;
  }
  .ch-v2-why-image .badge-float .big {
    font-size: 1.7rem !important;
    margin-bottom: 10px !important;
  }
  .ch-v2-why-image .badge-float .big-suffix {
    font-size: .85rem !important;
  }
  .ch-v2-why-image .badge-float small {
    font-size: .78rem !important;
    line-height: 1.55 !important;
  }
  .ch-v2-why-points {
    gap: 16px !important;
  }
  .ch-v2-why-point {
    grid-template-columns: 44px 1fr !important;
    gap: 14px !important;
  }
  .ch-v2-why-point .ic {
    width: 42px !important; height: 42px !important;
    font-size: 1.1rem !important;
    border-radius: 12px !important;
  }
  .ch-v2-why-point h4 {
    font-size: 1rem !important;
    margin-bottom: 4px !important;
  }
  .ch-v2-why-point p {
    font-size: .9rem !important;
    line-height: 1.6 !important;
  }

  /* ─── TESTIMONIALS ───────────────────────────────────── */
  .ch-testimonials {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    max-width: 460px;
    margin: 0 auto !important;
  }
  .ch-testimonial {
    padding: 22px 20px !important;
    border-radius: 20px !important;
  }
  .ch-testimonial blockquote {
    font-size: .95rem !important;
    line-height: 1.65 !important;
    margin-bottom: 16px !important;
  }
  .ch-testimonial .stars { font-size: .92rem !important; margin-bottom: 10px !important; }
  .ch-testimonial-author { gap: 11px !important; padding-top: 12px !important; }
  .ch-testimonial-author .avatar {
    width: 40px !important; height: 40px !important;
    font-size: .82rem !important;
  }

  /* ─── ZONES ──────────────────────────────────────────── */
  .ch-v2-zones .zones-intro p { font-size: .95rem !important; line-height: 1.6 !important; }
  .ch-v2-regions {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    margin-top: 24px !important;
  }
  .ch-v2-region {
    padding: 18px 18px !important;
    border-radius: 16px !important;
  }
  .ch-v2-region h4 {
    font-size: 1rem !important;
    margin-bottom: 8px !important;
  }
  .ch-v2-region .cities {
    font-size: .82rem !important;
    line-height: 1.6 !important;
  }
  .ch-v2-zones .zones-cta-call {
    padding: 22px 20px !important;
    flex-direction: column !important;
    text-align: center;
  }
  .ch-v2-zones .zones-cta-call p {
    text-align: center !important;
    font-size: .92rem !important;
  }
  .ch-v2-zones .zones-cta-icon {
    width: 50px !important; height: 50px !important;
    font-size: 1.5rem !important;
    margin: 0 auto;
  }
  .ch-v2-zones .zones-cta-btn {
    width: 100%;
    text-align: center;
    padding: 13px 20px !important;
    font-size: 1.02rem !important;
  }

  /* ─── FAQ ───────────────────────────────────────────── */
  .ch-v2-faq-section .faq-tabs {
    gap: 6px !important;
    overflow-x: auto;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    padding: 4px 16px;
    margin: 24px -16px 22px !important;
    width: calc(100% + 32px) !important;
    max-width: none !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .ch-v2-faq-section .faq-tabs::-webkit-scrollbar { display: none; }
  .ch-v2-faq-section .faq-tab {
    flex-shrink: 0;
    font-size: .82rem !important;
    padding: 8px 14px !important;
  }
  .faq-item {
    border-radius: 14px !important;
  }
  .faq-q {
    padding: 16px 16px !important;
    font-size: .92rem !important;
    gap: 12px !important;
    min-height: 56px;
  }
  .faq-a p {
    padding: 0 16px 18px !important;
    font-size: .9rem !important;
    line-height: 1.65 !important;
  }
  .faq-icon {
    font-size: 1.05rem !important;
  }
  .ch-v2-faq-section .faq-tag {
    font-size: .62rem !important;
    padding: 3px 8px !important;
  }
  .ch-v2-faq-section .faq-bottom-cta {
    padding: 18px 20px !important;
    font-size: .9rem !important;
    margin-top: 26px !important;
  }

  /* ─── BUTTONS PRIMAIRES ──────────────────────────────── */
  .btn-primary,
  .btn-outline-light {
    min-height: 48px;
  }

  /* ─── FORMULAIRE CONTACT ─────────────────────────────── */
  .bty-intro {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    text-align: left;
  }
  .bty-intro-title {
    font-size: clamp(1.5rem, 6vw, 2rem) !important;
    line-height: 1.2 !important;
  }
  .bty-intro-sub {
    font-size: .96rem !important;
    line-height: 1.6 !important;
  }
  .bty-phone-big {
    font-size: 1.35rem !important;
    padding: 12px 18px !important;
    width: 100%;
    text-align: center;
    justify-content: center;
  }
  .bty-trust-row {
    justify-content: center !important;
  }
  .bty-card {
    padding: 24px 20px !important;
    border-radius: 22px !important;
  }
  .bty-form .bty-grid-3,
  .bty-form .bty-grid-2 {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .bty-field input,
  .bty-field select,
  .bty-field textarea {
    padding: 13px 14px !important;
    font-size: 16px !important; /* évite le zoom iOS */
    border-radius: 12px !important;
  }
  .bty-field textarea { min-height: 120px; }
  .bty-form button[type=submit] {
    width: 100% !important;
    padding: 16px 20px !important;
    font-size: 1.02rem !important;
    border-radius: 14px !important;
  }

  /* ─── ANIMATIONS REVEAL : plus douces sur mobile ────── */
  .reveal-up,
  .reveal-left,
  .reveal-right {
    transform: translateY(14px) !important;
  }
}

/* ============================================================
   ≤ 480 px : très petits écrans
   ============================================================ */
@media (max-width: 480px) {
  .ch-v2-services, .ch-v2-why, .ch-v2-process, .ch-v2-pricing-section,
  .ch-v2-gallery, .ch-v2-testimonials, .ch-v2-zones, .ch-v2-faq-section,
  .bty-section {
    padding: 44px 14px !important;
  }
  .ch-v2-hero {
    padding: 70px 14px 36px !important;
  }
  .ch-v2-hero h1 {
    font-size: 1.75rem !important;
  }
  .ch-v2-card-body { padding: 20px 18px !important; }
  .ch-v2-region { padding: 16px 16px !important; }
  .faq-q { padding: 14px 14px !important; }

  /* Téléphone : numéro plus serré */
  .bty-phone-big { font-size: 1.2rem !important; }
}

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

/* ============================================================
   TOUCHE FINALE — POLISH UNIVERSEL
   ============================================================ */

/* Sur mobile, désactiver le hover lift (sinon ça fait des bugs au tap) */
@media (hover: none) and (pointer: coarse) {
  .ch-v2-card:hover,
  .ch-testimonial:hover,
  .module-tile:hover {
    transform: none !important;
  }
  /* Mais on garde un feedback au tap (active state) */
  .ch-v2-card:active,
  .ch-testimonial:active {
    transform: scale(.99) !important;
    transition: transform .15s ease !important;
  }
}

/* Améliorer la sélection de texte */
::selection {
  background: rgba(229, 103, 28, .25);
  color: inherit;
}

/* Scrollbar plus discrète sur tout le site */
@media (min-width: 721px) {
  ::-webkit-scrollbar { width: 12px; }
  ::-webkit-scrollbar-track { background: #f4f7fb; }
  ::-webkit-scrollbar-thumb {
    background: rgba(15, 39, 68, .15);
    border-radius: 8px;
    border: 3px solid #f4f7fb;
  }
  ::-webkit-scrollbar-thumb:hover { background: rgba(15, 39, 68, .3); }
}

/* Empêcher iOS de zoomer sur les inputs (taille 16px minimum) */
input[type=text],
input[type=email],
input[type=tel],
input[type=number],
input[type=search],
input[type=password],
select,
textarea {
  font-size: 16px;
}

/* Smooth scroll global */
html { scroll-behavior: smooth; }