/* =============================================================
   BATIYS — MOBILE.CSS v4 (fichier unique consolidé)
   Remplace : mobile-polish.css · mobile-aesthetic.css
              mobile-fixes-v3.css · mobile-pages-harmony.css

   Architecture :
     1. Variables & base
     2. Typographie fluide (≤ 980 px)
     3. Header & navigation (≤ 720 px)
     4. Hero principal (≤ 720 px)
     5. KPI strip (≤ 720 px)
     6. Cards services (≤ 720 px)
     7. Section "Pourquoi BATIYS" (≤ 720 px)
     8. Témoignages (≤ 720 px)
     9. Zones (≤ 720 px)
    10. FAQ (≤ 720 px)
    11. Formulaire contact (≤ 720 px)
    12. Barre d'action mobile (bottom bar)
    13. Pages services secondaires (≤ 720 px)
    14. Footer (≤ 720 px)
    15. Très petits écrans (≤ 480 px)
    16. Safe-area iOS (notch / home bar)
    17. Préférences système
   ============================================================= */

/* ─── 1. VARIABLES & BASE ───────────────────────────────────── */

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

/* Sélection de texte cohérente avec la charte orange */
::selection { background: rgba(229,103,28,.22); color: inherit; }

/* Scrollbar discrète sur desktop */
@media (min-width: 721px) {
  ::-webkit-scrollbar { width: 10px; }
  ::-webkit-scrollbar-track { background: #f4f7fb; }
  ::-webkit-scrollbar-thumb {
    background: rgba(15,39,68,.14);
    border-radius: 6px;
    border: 3px solid #f4f7fb;
  }
  ::-webkit-scrollbar-thumb:hover { background: rgba(15,39,68,.28); }
}

/* ─── 2. TYPOGRAPHIE FLUIDE (≤ 980 px) ──────────────────────── */

@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; }
}

/* ─── BARRE DE SCROLL ────────────────────────────────────────── */

.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  background: linear-gradient(90deg, #E5671C, #FFCBA4);
  width: 0;
  z-index: 1000;
  pointer-events: none;
}

@media (max-width: 720px) {
  .scroll-progress {
    box-shadow: 0 0 8px rgba(229,103,28,.5);
    transition: width .1s linear;
  }
}

/* ─── 3. HEADER & NAVIGATION ────────────────────────────────── */

@media (max-width: 720px) {

  header {
    height: 62px !important;
    padding: 0 16px !important;
    transition: height .3s cubic-bezier(.4,0,.2,1),
                background-color .3s ease !important;
  }
  header.scrolled {
    height: 54px !important;
    box-shadow: 0 2px 16px rgba(15,39,68,.1) !important;
  }
  header.scrolled .logo-text small { display: none !important; }
  header.scrolled .logo-text h1 { font-size: .95rem !important; }

  .logo-text h1 { font-size: 1.05rem !important; line-height: 1 !important; }
  .logo-text small { font-size: .62rem !important; }

  /* Burger : tap target 44 × 44 px (WCAG 2.5.5) */
  .hamburger {
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    border-radius: 12px !important;
    background: var(--orange, #E5671C) !important;
  }

  /* Masquer le bouton devis desktop */
  header .btn-devis,
  header .btn-quote,
  .nav-links .btn-devis { display: none !important; }

  /* ══════════════════════════════════════════════════════
     MENU OVERLAY PREMIUM — nouveau design
     ══════════════════════════════════════════════════════ */

  .nav-overlay {
    padding: 0 !important;
    background: linear-gradient(160deg, #0a1d35 0%, #0d2540 100%) !important;
    gap: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
  }

  /* En-tête du menu avec la marque */
  .nav-overlay-brand-header {
    padding: 22px 22px 18px !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    position: sticky !important;
    top: 0 !important;
    background: rgba(10,29,53,.95) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    z-index: 2 !important;
  }
  .nav-overlay-logo {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
  }
  .nav-overlay-logo img {
    height: 28px !important;
    width: auto !important;
  }
  .nav-overlay-logo-name {
    display: block !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1rem !important;
    font-weight: 900 !important;
    color: #fff !important;
    letter-spacing: .08em !important;
    line-height: 1 !important;
  }
  .nav-overlay-logo-name span { color: var(--orange, #E5671C) !important; }
  .nav-overlay-logo-sub {
    display: block !important;
    font-size: .6rem !important;
    color: rgba(255,255,255,.5) !important;
    text-transform: uppercase !important;
    letter-spacing: .12em !important;
    margin-top: 2px !important;
  }

  /* Liens de navigation */
  .nav-overlay-links {
    display: flex !important;
    flex-direction: column !important;
    padding: 10px 16px !important;
    gap: 4px !important;
    flex: 1 !important;
  }
  .nav-overlay-links a {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 15px 14px !important;
    border-radius: 14px !important;
    color: rgba(255,255,255,.85) !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    background: transparent !important;
    border: none !important;
    transition: background .2s, color .2s, transform .2s !important;
  }
  .nav-overlay-links a:hover,
  .nav-overlay-links a:active {
    background: rgba(255,255,255,.07) !important;
    color: #fff !important;
    transform: translateX(4px) !important;
  }
  .nav-overlay-links a[aria-current="page"] {
    background: rgba(229,103,28,.14) !important;
    color: #FFCBA4 !important;
    border-left: 3px solid rgba(229,103,28,.8) !important;
    border-radius: 0 14px 14px 0 !important;
    padding-left: 11px !important;
  }
  .nav-overlay-links a::before { display: none !important; }
  .nav-ol-ico {
    font-size: 1.1rem !important;
    flex-shrink: 0 !important;
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255,255,255,.07) !important;
    border-radius: 9px !important;
    transition: background .2s !important;
  }
  .nav-overlay-links a:hover .nav-ol-ico,
  .nav-overlay-links a:active .nav-ol-ico {
    background: rgba(229,103,28,.2) !important;
  }

  /* Section contact dans l'overlay */
  .nav-overlay-contact {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    margin: 6px 16px !important;
    padding: 0 !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    background: rgba(255,255,255,.04) !important;
  }
  .nav-overlay-tel,
  .nav-overlay-mail {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 14px 16px !important;
    font-size: .96rem !important;
    font-weight: 600 !important;
    color: rgba(255,255,255,.82) !important;
    text-decoration: none !important;
    transition: background .2s, color .2s !important;
    background: transparent !important;
    border-radius: 0 !important;
    border: none !important;
  }
  .nav-overlay-tel {
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
  }
  .nav-overlay-tel:hover, .nav-overlay-mail:hover,
  .nav-overlay-tel:active, .nav-overlay-mail:active {
    background: rgba(255,255,255,.06) !important;
    color: #fff !important;
    transform: none !important;
  }
  .nav-overlay-tel::before,
  .nav-overlay-mail::before { display: none !important; }
  .nav-ol-contact-ic {
    font-size: 1rem !important;
    flex-shrink: 0 !important;
  }

  /* Bouton CTA principal */
  .nav-overlay-cta {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin: 14px 16px 20px !important;
    padding: 16px 20px !important;
    background: linear-gradient(135deg, #E5671C 0%, #C24E0C 100%) !important;
    color: #fff !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    border-radius: 16px !important;
    border: none !important;
    box-shadow: 0 8px 24px rgba(229,103,28,.45) !important;
    transition: transform .2s, box-shadow .2s !important;
    letter-spacing: .01em !important;
    min-height: 54px !important;
  }
  .nav-overlay-cta:hover { transform: translateY(-2px) !important; box-shadow: 0 12px 30px rgba(229,103,28,.55) !important; }
  .nav-overlay-cta:active { transform: scale(.98) !important; }
  .nav-overlay-cta::before { display: none !important; }
  .nav-ol-cta-arrow {
    font-size: 1.2rem !important;
    opacity: .8 !important;
  }

  /* Bouton devis hérité (ancienne version pages) */
  .nav-overlay .btn-quote,
  .nav-overlay .btn-devis-mobile {
    margin: 14px 16px 20px !important;
    width: calc(100% - 32px) !important;
    justify-content: center !important;
    border-radius: 16px !important;
    padding: 16px 20px !important;
    font-size: 1rem !important;
    min-height: 54px !important;
  }
}

/* ─── 4. HERO PRINCIPAL ─────────────────────────────────────── */

@media (max-width: 720px) {
  .ch-v2-hero {
    min-height: 100svh !important;
  }
  .ch-v2-hero-inner {
    padding: 80px 18px 90px;
  }
  .ch-v2-badge {
    font-size: .76rem !important;
    padding: 7px 13px !important;
  }
  .ch-v2-hero h1 {
    font-size: clamp(1.9rem, 7.5vw, 2.6rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -.025em;
    margin-top: 14px !important;
    margin-bottom: 18px !important;
  }
  .ch-v2-hero h1 em {
    color: #FFCBA4 !important;
    -webkit-text-fill-color: #FFCBA4 !important;
  }
  .ch-v2-hero .lead {
    font-size: 1.02rem !important;
    line-height: 1.65 !important;
    color: rgba(255,255,255,.9) !important;
    -webkit-text-fill-color: rgba(255,255,255,.9) !important;
    margin-bottom: 24px !important;
  }
  .ch-v2-hero .lead strong {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
  }
  .hero-btns {
    flex-direction: column !important;
    gap: 10px !important;
    margin-top: 18px !important;
    width: 100%;
  }
  .hero-btns .btn-primary,
  .hero-btns .btn-outline-light {
    width: 100% !important;
    justify-content: center !important;
    padding: 15px 20px !important;
    font-size: 1rem !important;
    border-radius: 14px !important;
    min-height: 52px !important;
  }
  /* Trust mini : fond verre */
  .ch-v2-trust-mini {
    margin-top: 20px !important;
    padding: 13px 16px !important;
    background: rgba(255,255,255,.07) !important;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 14px;
    backdrop-filter: blur(8px);
    gap: 12px !important;
  }
  .ch-v2-trust-mini .stars-row { font-size: .9rem !important; letter-spacing: 2px; }
  .ch-v2-trust-mini small { font-size: .82rem !important; line-height: 1.45 !important; }
}

/* ─── 5. KPI STRIP ──────────────────────────────────────────── */

@media (max-width: 720px) {
  .ch-v2-metrics { padding: 0 !important; }
  .kpi-strip {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0 !important;
    padding: 0 !important;
  }
  .kpi-strip .kpi-item {
    text-align: left;
    padding: 28px 20px !important;
    background: transparent !important;
    border: none !important;
    border-right: 1px solid rgba(255,255,255,.1) !important;
    border-bottom: 1px solid rgba(255,255,255,.1) !important;
    border-radius: 0 !important;
    transition: background .2s ease !important;
  }
  .kpi-strip .kpi-item:nth-child(2n) { border-right: none !important; }
  .kpi-strip .kpi-item:nth-child(3),
  .kpi-strip .kpi-item:nth-child(4) { border-bottom: none !important; }
  .kpi-strip .kpi-item:active { background: rgba(255,255,255,.04) !important; }
  .kpi-strip .kpi-num {
    font-size: 2rem !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    background: none !important;
    background-image: none !important;
    background-clip: border-box !important;
    -webkit-background-clip: border-box !important;
    line-height: 1 !important;
    margin-bottom: 8px !important;
  }
  .kpi-strip .kpi-num span.count-up,
  .kpi-strip .kpi-num span {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    background: none !important;
  }
  .kpi-strip .kpi-num em {
    color: rgba(255,215,165,.9) !important;
    -webkit-text-fill-color: rgba(255,215,165,.9) !important;
    background: none !important;
    font-size: 1.2rem !important;
  }
  .kpi-strip .kpi-label {
    font-size: .78rem !important;
    line-height: 1.45 !important;
    color: rgba(255,255,255,.7) !important;
  }
}

/* ─── SECTION TITLES ─────────────────────────────────────────── */

@media (max-width: 720px) {
  .section-title {
    text-align: center;
    margin-bottom: 26px !important;
  }
  .section-title .eyebrow {
    display: inline-flex;
    font-size: .7rem !important;
    letter-spacing: 1.4px !important;
    padding: 6px 14px !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg,rgba(229,103,28,.15),rgba(229,103,28,.06)) !important;
    border: 1px solid rgba(229,103,28,.22) !important;
    color: var(--orange,#E5671C) !important;
    -webkit-text-fill-color: var(--orange,#E5671C) !important;
    font-weight: 700 !important;
    margin-bottom: 10px !important;
  }
  .section-title h3 {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
    background: none !important;
    background-image: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: var(--bleu,#0F2744) !important;
    color: var(--bleu,#0F2744) !important;
  }
  .section-title p { font-size: .96rem !important; line-height: 1.6 !important; color: #4B5867 !important; }

  /* Sections uniformes */
  .ch-v2-services,
  .ch-v2-why,
  .ch-v2-process,
  .ch-v2-testimonials,
  .ch-v2-faq-section,
  .ch-v2-final { padding: 56px 18px !important; }

  .ch-v2-zones { padding: 56px 18px !important; }
  .ch-v2-metrics { padding: 0 !important; }
}

/* ─── 6. CARDS SERVICES ─────────────────────────────────────── */

@media (max-width: 720px) {
  .ch-v2-services-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  .ch-v2-card {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    border-radius: 22px !important;
    box-shadow: 0 4px 16px rgba(15,39,68,.07), 0 1px 3px rgba(15,39,68,.04) !important;
  }
  .ch-v2-card:active {
    transform: scale(.99) !important;
    transition-duration: .12s !important;
  }
  .ch-v2-card-media {
    position: relative !important;
    aspect-ratio: 16 / 10 !important;
    height: auto !important;
    flex-shrink: 0;
    overflow: hidden !important;
  }
  .ch-v2-card-media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    position: absolute !important;
    inset: 0 !important;
    transition: transform .6s cubic-bezier(.22,1,.36,1) !important;
  }
  .ch-v2-card:hover .ch-v2-card-media img,
  .ch-v2-card:active .ch-v2-card-media img { transform: scale(1.04) !important; }
  .ch-v2-card-media::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg,rgba(10,29,53,0) 40%,rgba(10,29,53,.75) 100%) !important;
  }
  .ch-v2-card-media .chip {
    position: absolute !important;
    top: 12px !important; left: 12px !important; z-index: 3 !important;
    background: rgba(255,255,255,.92) !important;
    color: var(--bleu,#0F2744) !important;
    border: 1px solid rgba(15,39,68,.1) !important;
    backdrop-filter: blur(8px) !important;
    font-size: .68rem !important;
    padding: 4px 10px !important;
    font-weight: 700 !important;
    text-shadow: none !important;
  }
  .ch-v2-card-media h3 {
    position: absolute !important;
    left: 0 !important; right: 0 !important; bottom: 0 !important;
    z-index: 2 !important;
    padding: 14px 16px !important;
    font-size: 1.1rem !important;
    line-height: 1.25 !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    background: none !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 3px rgba(0,0,0,.4) !important;
  }
  .ch-v2-card-body { padding: 22px 20px !important; }
  .ch-v2-card-body p { font-size: .95rem !important; line-height: 1.6 !important; margin-bottom: 14px !important; color: #4B5867 !important; }
  .ch-v2-card-body ul { margin-bottom: 16px !important; gap: 8px !important; }
  .ch-v2-card-body li { font-size: .9rem !important; padding-left: 22px !important; color: #4B5867 !important; }
  .ch-v2-card-footer { padding-top: 14px !important; margin-top: 0 !important; }
  .ch-v2-card-footer .link-arrow { font-size: .92rem !important; font-weight: 700; }
}

/* ─── 7. POURQUOI BATIYS ────────────────────────────────────── */

@media (max-width: 720px) {
  .ch-v2-why-grid {
    grid-template-columns: 1fr !important;
    gap: 34px !important;
  }
  .ch-v2-why-image {
    min-height: 300px !important;
    border-radius: 22px !important;
    overflow: hidden;
  }
  .ch-v2-why-image img {
    width: 100% !important; height: 100% !important;
    object-fit: cover;
  }
  .ch-v2-why-image .badge-float {
    right: 14px !important;
    bottom: 14px !important;
    max-width: calc(100% - 28px) !important;
    min-width: 0 !important;
    padding: 16px 18px 20px !important;
    border-radius: 18px !important;
  }
  .ch-v2-why-image .badge-float-stars { font-size: .85rem !important; }
  .ch-v2-why-image .badge-float .big { font-size: 1.6rem !important; margin-bottom: 8px !important; }
  .ch-v2-why-image .badge-float small { font-size: .76rem !important; line-height: 1.5 !important; }
  .ch-v2-why-copy h2 {
    background: none !important; background-image: none !important;
    -webkit-background-clip: border-box !important; background-clip: border-box !important;
    -webkit-text-fill-color: var(--bleu,#0F2744) !important;
    color: var(--bleu,#0F2744) !important;
  }
  .ch-v2-why-points { gap: 14px !important; }
  .ch-v2-why-point {
    grid-template-columns: 44px 1fr !important;
    gap: 14px !important;
    align-items: flex-start;
  }
  .ch-v2-why-point .ic {
    width: 44px !important; height: 44px !important;
    font-size: 1.1rem !important;
    border-radius: 12px !important;
    flex-shrink: 0;
  }
  .ch-v2-why-point h4 {
    font-size: 1rem !important; margin-bottom: 4px !important;
    color: var(--bleu,#0F2744) !important;
    -webkit-text-fill-color: var(--bleu,#0F2744) !important;
  }
  .ch-v2-why-point p { font-size: .9rem !important; line-height: 1.6 !important; color: #4B5867 !important; }
}

/* ─── 8. TÉMOIGNAGES ────────────────────────────────────────── */

@media (max-width: 720px) {
  .ch-testimonials {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    max-width: 480px;
    margin: 0 auto !important;
  }
  .ch-testimonial {
    padding: 24px 20px !important;
    border-radius: 20px !important;
    background: #fff !important;
    border: 1px solid #e8eef5 !important;
    box-shadow: 0 4px 16px rgba(15,39,68,.06) !important;
    position: relative;
    overflow: hidden;
  }
  .ch-testimonial::before {
    content: '"';
    position: absolute; top: -16px; right: 16px;
    font-size: 90px; line-height: 1;
    font-family: 'Fraunces', Georgia, serif;
    color: rgba(229,103,28,.07);
    font-weight: 700;
    pointer-events: none;
  }
  .ch-testimonial:active { transform: scale(.99) !important; }
  .ch-testimonial .stars { font-size: .92rem !important; margin-bottom: 10px !important; }
  .ch-testimonial blockquote {
    font-size: .95rem !important;
    line-height: 1.65 !important;
    margin-bottom: 16px !important;
    font-style: italic;
    color: #3a4859 !important;
  }
  .ch-testimonial-author { gap: 11px !important; padding-top: 12px !important; border-top: 1px solid #eef2f7; }
  .ch-testimonial-author .avatar {
    width: 40px !important; height: 40px !important;
    font-size: .82rem !important;
    background: linear-gradient(135deg,#E5671C,#FFCBA4) !important;
    box-shadow: 0 4px 10px rgba(229,103,28,.25) !important;
  }
}

/* ─── 9. ZONES D'INTERVENTION ───────────────────────────────── */

@media (max-width: 720px) {
  .ch-v2-zones h2,
  .ch-v2-zones h3,
  .ch-v2-zones h4 {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    background: none !important;
  }
  .ch-v2-zones .zones-intro p {
    font-size: .96rem !important;
    line-height: 1.65 !important;
    color: rgba(255,255,255,.82) !important;
    -webkit-text-fill-color: rgba(255,255,255,.82) !important;
  }
  .ch-v2-regions {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    margin-top: 24px !important;
  }
  .ch-v2-region {
    background: rgba(255,255,255,.04) !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    border-radius: 16px !important;
    padding: 16px 14px !important;
    transition: background .2s ease, border-color .2s ease !important;
  }
  .ch-v2-region:active {
    background: rgba(255,255,255,.08) !important;
    transform: scale(.98);
  }
  .ch-v2-region h4 {
    font-size: .95rem !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    background: none !important;
    margin-bottom: 6px !important;
  }
  .ch-v2-region .cities {
    font-size: .78rem !important;
    line-height: 1.6 !important;
    color: rgba(255,255,255,.72) !important;
  }
  .ch-v2-zones .zones-cta-call {
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 22px 20px !important;
    text-align: center !important;
  }
  .ch-v2-zones .zones-cta-call p {
    text-align: center !important;
    font-size: .92rem !important;
    line-height: 1.6 !important;
    color: rgba(255,255,255,.85) !important;
    -webkit-text-fill-color: rgba(255,255,255,.85) !important;
    flex: none !important;
  }
  .ch-v2-zones .zones-cta-call p strong { color: #fff !important; -webkit-text-fill-color: #fff !important; }
  .ch-v2-zones .zones-cta-btn {
    width: 100% !important;
    text-align: center !important;
    padding: 13px 20px !important;
    font-size: 1rem !important;
  }
}

@media (max-width: 480px) {
  .ch-v2-regions { grid-template-columns: 1fr !important; }
}

/* ─── 10. FAQ ────────────────────────────────────────────────── */

@media (max-width: 720px) {
  .ch-v2-faq-section .faq-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    justify-content: flex-start !important;
    gap: 7px !important;
    padding: 4px 18px 8px !important;
    margin: 22px -18px 22px !important;
    width: calc(100% + 36px) !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 !important;
    font-size: .82rem !important;
    padding: 8px 15px !important;
    white-space: nowrap !important;
  }
  .faq-list { border-top: none !important; }
  .faq-item {
    background: #fff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    margin-bottom: 8px !important;
    transition: border-color .22s, box-shadow .22s !important;
  }
  .faq-item.open {
    border-color: var(--orange,#E5671C) !important;
    box-shadow: 0 6px 18px rgba(229,103,28,.1) !important;
  }
  .faq-q {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    width: 100% !important;
    padding: 16px 16px !important;
    background: none !important;
    border: none !important;
    text-align: left !important;
    cursor: pointer !important;
    font-size: .92rem !important;
    font-weight: 600 !important;
    color: var(--bleu,#0F2744) !important;
    line-height: 1.35 !important;
    min-height: 56px;
  }
  .faq-q-text {
    display: inline !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    color: var(--bleu,#0F2744) !important;
  }
  .faq-tag {
    display: none !important; /* masqué sur mobile pour lisibilité */
  }
  .faq-icon {
    flex: 0 0 28px !important;
    width: 28px !important; height: 28px !important;
    background: rgba(229,103,28,.1) !important;
    color: var(--orange,#E5671C) !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important; justify-content: center !important;
    font-size: 1.05rem !important;
    line-height: 1 !important;
    transition: transform .3s ease, background .22s ease !important;
  }
  .faq-item.open .faq-icon {
    background: var(--orange,#E5671C) !important;
    color: #fff !important;
    transform: rotate(45deg) !important;
    box-shadow: 0 3px 8px rgba(229,103,28,.3) !important;
  }
  .faq-item:not(.open) .faq-a {
    max-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
  }
  .faq-item.open .faq-a {
    max-height: 800px !important;
    overflow: hidden !important;
    transition: max-height .4s ease !important;
  }
  .faq-a p {
    padding: 2px 16px 18px !important;
    margin: 0 !important;
    font-size: .9rem !important;
    line-height: 1.65 !important;
    color: #4B5867 !important;
    -webkit-text-fill-color: #4B5867 !important;
  }
  .ch-v2-faq-section .faq-bottom-cta {
    padding: 18px 20px !important;
    margin: 24px auto 0 !important;
    border-radius: 18px !important;
    font-size: .9rem !important;
  }
}

/* ─── 11. FORMULAIRE CONTACT ─────────────────────────────────── */

@media (max-width: 720px) {
  .bty-section {
    padding: 56px 18px !important;
  }
  .bty-intro {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .bty-intro-title {
    font-size: clamp(1.5rem, 6vw, 1.95rem) !important;
    line-height: 1.2 !important;
    background: none !important;
    -webkit-text-fill-color: #fff !important;
    color: #fff !important;
  }
  .bty-intro-title em { color: #FFCBA4 !important; -webkit-text-fill-color: #FFCBA4 !important; }
  .bty-intro-sub {
    font-size: .95rem !important;
    line-height: 1.6 !important;
    color: rgba(255,255,255,.82) !important;
    -webkit-text-fill-color: rgba(255,255,255,.82) !important;
  }
  .bty-intro-contact {
    align-items: flex-start !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  .bty-phone-big {
    font-size: 1.35rem !important;
  }
  .bty-no-recruit {
    padding: 12px 14px !important;
    gap: 10px !important;
    font-size: .88rem !important;
    border-radius: 12px !important;
  }
  .bty-card {
    padding: 24px 20px 22px !important;
    border-radius: 22px !important;
    box-shadow: 0 20px 48px rgba(6,18,31,.28) !important;
  }
  .bty-grid-3,
  .bty-grid-2 {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .bty-legend { padding-bottom: 12px !important; margin-bottom: 14px !important; }
  .bty-step-title { font-size: 1rem !important; }
  .bty-step-hint { font-size: .75rem !important; }
  .bty-field input,
  .bty-field select,
  .bty-field textarea {
    padding: 13px 14px !important;
    font-size: 16px !important;
    border-radius: 12px !important;
    background: #fafbfd !important;
    transition: border-color .2s, box-shadow .2s, background .2s !important;
  }
  .bty-field input:focus,
  .bty-field select:focus,
  .bty-field textarea:focus {
    background: #fff !important;
    border-color: var(--orange,#E5671C) !important;
    box-shadow: 0 0 0 4px rgba(229,103,28,.12) !important;
  }
  .bty-field textarea { min-height: 120px; }
  .bty-submit-row {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    text-align: center !important;
  }
  .bty-reassurance {
    justify-content: center !important;
    font-size: .78rem !important;
    gap: 4px 12px !important;
  }
  .bty-submit {
    width: 100% !important;
    padding: 15px 20px !important;
    font-size: 1rem !important;
    border-radius: 14px !important;
  }
}

/* ─── 12. BARRE D'ACTION MOBILE (bottom bar) ────────────────── */

.mobile-bottom-bar {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 950;
  padding: 10px 14px max(10px, env(safe-area-inset-bottom)) 14px;
  background: rgba(255,255,255,.86);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-top: 1px solid rgba(15,39,68,.08);
  box-shadow: 0 -6px 24px rgba(15,39,68,.08);
  transform: translateY(110%);
  transition: transform .32s cubic-bezier(.4,0,.2,1);
}
.mobile-bottom-bar.is-visible { transform: translateY(0); }
.mobile-bottom-bar-inner {
  display: flex;
  gap: 8px;
  max-width: 480px;
  margin: 0 auto;
}
.mbb-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 13px 14px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .92rem;
  font-weight: 700;
  text-decoration: none;
  border-radius: 14px;
  transition: transform .2s ease, box-shadow .2s ease;
  white-space: nowrap;
  letter-spacing: .01em;
}
.mbb-btn-call {
  background: rgba(15,39,68,.07);
  color: #0F2744;
  border: 1px solid rgba(15,39,68,.12);
}
.mbb-btn-call:active { background: rgba(15,39,68,.14); transform: scale(.97); }
.mbb-btn-quote {
  background: linear-gradient(135deg,#E5671C,#D05714);
  color: #fff;
  box-shadow: 0 4px 14px rgba(229,103,28,.35);
  position: relative; overflow: hidden;
}
.mbb-btn-quote::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
  transform: translateX(-100%);
  animation: mbb-shine 5s ease-in-out infinite;
}
@keyframes mbb-shine {
  0%, 65%, 100% { transform: translateX(-100%); }
  82% { transform: translateX(100%); }
}
.mbb-btn-quote:active { transform: scale(.97); }
.mbb-icon { font-size: .95rem; line-height: 1; flex-shrink: 0; }

@media (max-width: 720px) {
  .mobile-bottom-bar { display: block; }
  body { padding-bottom: 76px !important; }
  .btn-flottant { display: none !important; }
}

/* ─── 13. PAGES SERVICES SECONDAIRES ─────────────────────────── */

@media (max-width: 720px) {

  /* Heros génériques */
  section.dg-hero,
  section.nl-hero,
  .hero-service {
    min-height: auto !important;
    padding: 90px 18px 52px !important;
  }
  section.dg-hero .dg-hero-inner,
  section.nl-hero .nl-hero-inner {
    grid-template-columns: 1fr !important;
    padding: 0 !important;
    gap: 28px !important;
  }
  section.dg-hero h1, section.nl-hero h1, .hero-service h1 {
    font-size: clamp(1.85rem, 6.5vw, 2.4rem) !important;
    line-height: 1.12 !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    margin-bottom: 14px !important;
  }
  section.dg-hero h1 em, section.nl-hero h1 em { color: #FFCBA4 !important; -webkit-text-fill-color: #FFCBA4 !important; }
  section.dg-hero .lead, section.nl-hero .lead, .hero-service .lead, .hero-service .hero-sub {
    font-size: 1rem !important;
    line-height: 1.65 !important;
    color: rgba(255,255,255,.92) !important;
    -webkit-text-fill-color: rgba(255,255,255,.92) !important;
    margin-bottom: 22px !important;
  }
  .hero-service .btn-primary, .hero-service .btn-outline-light {
    width: 100% !important; justify-content: center !important;
    padding: 14px 22px !important; font-size: 1rem !important;
    border-radius: 14px !important; min-height: 52px !important;
  }

  /* Cards / grilles partagées */
  .dg-empathy-grid, .nl-services-grid, .nl-freq-grid,
  .ch-v2-services-grid, .blocs-grid, .infos-grid, .cards-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .dg-scope-cards { grid-template-columns: 1fr !important; gap: 16px !important; }
  .dg-scope-body { padding: 18px !important; }
  .dg-scope-body h4 {
    font-size: 1rem !important;
    color: var(--bleu,#0F2744) !important;
    -webkit-text-fill-color: var(--bleu,#0F2744) !important;
  }
  .loc-cats-grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }

  /* Sections secondaires */
  section.dg-empathy, section.dg-scope, section.dg-process,
  section.dg-guarantees, section.nl-services, section.nl-process,
  section.nl-trust, section.nl-pricing, section.loc-categories,
  section.blocs-section, section.infos-section, section.cta-section {
    padding: 50px 18px !important;
  }

  /* Guarantees fond sombre */
  section.dg-guarantees h2, section.dg-guarantees h3, section.dg-guarantees h4,
  section.nl-trust h2, section.nl-trust h3 {
    color: #fff !important; -webkit-text-fill-color: #fff !important;
  }
  section.dg-guarantees p, section.dg-guarantees small,
  section.nl-trust p, section.nl-trust small {
    color: rgba(255,255,255,.85) !important; -webkit-text-fill-color: rgba(255,255,255,.85) !important;
  }
  .dg-g-grid { grid-template-columns: 1fr !important; gap: 14px !important; }

  /* CTA rich */
  .ch-cta-rich { padding: 30px 18px !important; border-radius: 20px !important; margin: 10px 0 !important; }
  .ch-cta-card-inner { grid-template-columns: 1fr !important; gap: 18px !important; }
  .ch-cta-rich h2, .ch-cta-rich h3 { color: #fff !important; -webkit-text-fill-color: #fff !important; }
  .ch-cta-rich p { color: rgba(255,255,255,.9) !important; -webkit-text-fill-color: rgba(255,255,255,.9) !important; }
  .ch-cta-rich .btn-primary, .ch-cta-rich a[class*="btn"] {
    width: 100% !important; justify-content: center !important;
    padding: 14px 20px !important; border-radius: 14px !important;
  }

  /* Process illustré */
  .ch-process-illustrated { grid-template-columns: 1fr !important; gap: 26px !important; }
  .ch-process-list { gap: 12px !important; }
  .ch-process-item { padding: 16px 16px !important; gap: 14px !important; border-radius: 14px !important; }
  .ch-process-num { width: 36px !important; height: 36px !important; font-size: .9rem !important; border-radius: 10px !important; flex-shrink: 0; }
  .ch-process-item h4 { font-size: 1rem !important; margin-bottom: 3px !important; }
  .ch-process-item p { font-size: .9rem !important; line-height: 1.55 !important; }

  /* CTA section fond sombre */
  section.cta-section h2, section.cta-section h3 {
    color: #fff !important; -webkit-text-fill-color: #fff !important;
  }
  section.cta-section p {
    color: rgba(255,255,255,.9) !important; -webkit-text-fill-color: rgba(255,255,255,.9) !important;
  }

  /* Bouton flottant téléphone : remplacé par bottom bar */
  a.btn-flottant { display: none !important; }

  /* Trust bar */
  .trust-bar, .trust-strip {
    padding: 18px 16px !important;
    flex-direction: column !important;
    gap: 10px !important;
    text-align: center !important;
  }
}

/* ─── 14. FOOTER ─────────────────────────────────────────────── */

@media (max-width: 720px) {
  footer.site-footer-premium {
    padding: 40px 18px 24px !important;
  }
  .site-footer-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .site-footer-bottom {
    flex-direction: column !important;
    gap: 8px !important;
    text-align: center !important;
    font-size: .8rem !important;
    line-height: 1.55 !important;
    padding-top: 20px !important;
    border-top: 1px solid rgba(255,255,255,.08) !important;
    margin-top: 20px !important;
  }
  .site-footer-brand img { max-height: 36px; }
  .site-footer-heading { font-size: .72rem !important; margin-bottom: 10px !important; }
  .site-footer-links { gap: 8px !important; }
  .site-footer-links a { font-size: .9rem !important; }
  footer.site-footer-premium .tel {
    display: inline-flex !important;
    width: 100%;
    justify-content: center !important;
    margin-top: 12px !important;
    padding: 12px 16px !important;
    border-radius: 12px !important;
  }
}

/* ─── 15. TRÈS PETITS ÉCRANS (≤ 480 px) ──────────────────────── */

@media (max-width: 480px) {
  .ch-v2-services, .ch-v2-why, .ch-v2-testimonials,
  .ch-v2-faq-section, .ch-v2-zones, .bty-section {
    padding: 44px 14px !important;
  }
  .ch-v2-hero-inner { padding: 72px 14px 84px !important; }
  .ch-v2-hero h1 { font-size: 1.75rem !important; }
  .bty-phone-big { font-size: 1.2rem !important; }
  .kpi-strip { padding: 18px 14px !important; gap: 8px !important; }
  .ch-v2-card-body { padding: 18px 16px !important; }
  .ch-v2-region { padding: 14px 14px !important; }
  .faq-q { padding: 13px 14px !important; font-size: .9rem !important; }
  .bty-card { padding: 20px 16px !important; border-radius: 18px !important; }
  section.dg-hero, section.nl-hero, .hero-service {
    padding: 80px 14px 44px !important;
  }
  .loc-cats-grid { grid-template-columns: 1fr !important; }
  .ch-v2-regions { grid-template-columns: 1fr !important; }
}

/* ─── 16. SAFE-AREA iOS (notch / dynamic island / home bar) ──── */

@supports (padding: max(0px)) {
  header {
    padding-top: env(safe-area-inset-top) !important;
    padding-left: max(16px, env(safe-area-inset-left)) !important;
    padding-right: max(16px, env(safe-area-inset-right)) !important;
  }
  .nav-overlay {
    padding-top: max(84px, calc(env(safe-area-inset-top) + 72px)) !important;
    padding-left: max(24px, env(safe-area-inset-left)) !important;
    padding-right: max(24px, env(safe-area-inset-right)) !important;
  }
  .mobile-bottom-bar {
    padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
  }
}

/* ─── 17. PRÉFÉRENCES SYSTÈME ─────────────────────────────────── */

/* Respect des préférences d'animation */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .mobile-bottom-bar { transition: none !important; }
  .mbb-btn-quote::before { animation: none !important; }
}

/* Dark mode minimal : bottom bar */
@media (prefers-color-scheme: dark) {
  .mobile-bottom-bar {
    background: rgba(15,25,40,.88);
    border-top-color: rgba(255,255,255,.08);
  }
  .mbb-btn-call {
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.9);
    border-color: rgba(255,255,255,.12);
  }
}

/* Pas de hover sur touch screens (évite les bugs de hover persistant) */
@media (hover: none) and (pointer: coarse) {
  .ch-v2-card:hover,
  .ch-testimonial:hover,
  .ch-v2-region:hover { transform: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   PAGE SYNDROME DE DIOGÈNE — OPTIMISATIONS MOBILE SPÉCIFIQUES
   ═══════════════════════════════════════════════════════════════ */

/* ─── HERO DIOGÈNE MOBILE ────────────────────────────────────── */
@media (max-width: 720px) {

  /* Hero : plus compact, bien aéré */
  section.dg-hero {
    min-height: auto !important;
    padding: 0 !important;
  }
  section.dg-hero .dg-hero-inner {
    grid-template-columns: 1fr !important;
    padding: 86px 18px 52px !important;
    gap: 24px !important;
  }

  /* Badge FR : taille optimale mobile */
  .dg-hero .dg-hero-inner > div:first-child > div:first-child {
    font-size: .7rem !important;
    padding: 6px 12px !important;
    gap: 6px !important;
    margin-bottom: 14px !important;
  }

  /* Titre hero */
  section.dg-hero h1 {
    font-size: clamp(1.8rem, 7vw, 2.4rem) !important;
    line-height: 1.1 !important;
    margin-bottom: 14px !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
  }
  section.dg-hero h1 em {
    color: #FFCBA4 !important;
    -webkit-text-fill-color: #FFCBA4 !important;
  }

  /* Lead */
  section.dg-hero .lead {
    font-size: .98rem !important;
    line-height: 1.7 !important;
    color: rgba(255,255,255,.88) !important;
    -webkit-text-fill-color: rgba(255,255,255,.88) !important;
    margin-bottom: 22px !important;
  }

  /* Boutons hero — centrés et compacts */
  .dg-hero .hero-btns {
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    margin-top: 0 !important;
    width: 100% !important;
  }
  .dg-hero .hero-btns .btn-primary,
  .dg-hero .hero-btns .btn-outline-light {
    width: 88% !important;
    max-width: 340px !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 13px 18px !important;
    font-size: .93rem !important;
    border-radius: 14px !important;
    min-height: 48px !important;
  }

  /* Aside KPI cards — compact */
  .dg-hero-side {
    padding: 20px !important;
    border-radius: 20px !important;
    gap: 12px !important;
    background: rgba(255,255,255,.07) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
  }
  .dg-hero-side h3 {
    font-size: 1rem !important;
    margin-bottom: 4px !important;
  }
  .dg-hero-side .kpi {
    padding: 12px 14px !important;
    gap: 12px !important;
    border-radius: 12px !important;
  }
  .dg-hero-side .kpi .ic {
    width: 38px !important; height: 38px !important;
    font-size: 1.1rem !important;
    border-radius: 10px !important;
    flex-shrink: 0 !important;
  }
  .dg-hero-side .kpi strong { font-size: .9rem !important; }
  .dg-hero-side .kpi span { font-size: .78rem !important; }

  /* Trust bar : scroll horizontal */
  .trust-bar {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 0 !important;
    padding: 0 !important;
    text-align: left !important;
  }
  .trust-bar::-webkit-scrollbar { display: none !important; }
  .trust-bar .trust-item {
    flex-shrink: 0 !important;
    padding: 14px 16px !important;
    font-size: .8rem !important;
    white-space: nowrap !important;
    border-right: 1px solid #e6ecf2 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }
  .trust-bar .trust-item:last-child { border-right: none !important; }

  /* Section empathy : image d'abord */
  .dg-empathy { padding: 52px 18px !important; }
  .dg-empathy-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .dg-empathy-img {
    min-height: 260px !important;
    border-radius: 20px !important;
    order: -1 !important; /* Image en premier */
  }
  .dg-empathy h2 {
    font-size: clamp(1.4rem, 5.5vw, 1.85rem) !important;
    color: var(--bleu, #0F2744) !important;
    -webkit-text-fill-color: var(--bleu, #0F2744) !important;
    margin-bottom: 14px !important;
  }
  .dg-empathy p { font-size: .95rem !important; line-height: 1.7 !important; }
  .dg-empathy .link-arrow { font-size: .95rem !important; }

  /* Sections scope + cases + process */
  section.dg-scope { padding: 52px 18px !important; }
  .dg-scope-cards { grid-template-columns: 1fr !important; gap: 14px !important; }
  .dg-scope-body { padding: 18px 16px 20px !important; }

  section.dg-cases { padding: 52px 18px !important; }
  .dg-cases-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    margin-top: 28px !important;
  }
  .dg-case { padding: 20px 16px 18px !important; border-radius: 16px !important; }
  .dg-case-ic {
    width: 40px !important; height: 40px !important;
    font-size: 1.2rem !important;
    border-radius: 10px !important;
    margin-bottom: 12px !important;
  }
  .dg-case h4 { font-size: .95rem !important; margin-bottom: 6px !important; }
  .dg-case p { font-size: .84rem !important; line-height: 1.55 !important; }
  .dg-cases-foot { font-size: .88rem !important; margin-top: 28px !important; }

  section.dg-process { padding: 52px 18px !important; }
  .dg-guarantees { padding: 52px 18px !important; }
  .dg-g-grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  .dg-g-card { padding: 20px 16px !important; border-radius: 16px !important; }
  .dg-g-card .ic { width: 42px !important; height: 42px !important; font-size: 1.2rem !important; margin-bottom: 12px !important; }
  .dg-g-card h4 { font-size: .95rem !important; }
  .dg-g-card p { font-size: .84rem !important; }

  /* Contact section Diogène */
  .dg-contact-section { padding: 52px 18px 60px !important; }
  .dg-contact-inner { gap: 32px !important; }
  .dg-contact-title { font-size: clamp(1.6rem, 6.5vw, 2rem) !important; }
  .dg-contact-desc { font-size: .95rem !important; }
  .dg-trust-list li { font-size: .9rem !important; }
  .dg-form-card {
    padding: 22px 16px 24px !important;
    border-radius: 20px !important;
    box-shadow: 0 16px 40px rgba(4,12,24,.35) !important;
  }
  .dg-row-2 { grid-template-columns: 1fr !important; gap: 12px !important; }
  .dg-field input,
  .dg-field select,
  .dg-field textarea {
    padding: 12px 13px !important;
    font-size: 16px !important; /* anti-zoom iOS */
    border-radius: 11px !important;
  }
  .dg-btn-submit {
    padding: 15px 18px !important;
    font-size: .98rem !important;
    border-radius: 13px !important;
  }

  /* Mobile bottom bar sur page Diogène : lien vers le bon #contact */
  .mobile-bottom-bar .mbb-btn-quote[href="index.html#contact"] {
    /* override vers le contact Diogène si nécessaire */
  }
}

/* ─── TRÈS PETITS ÉCRANS — Diogène (≤ 480px) ─────────────────── */
@media (max-width: 480px) {
  section.dg-hero .dg-hero-inner { padding: 76px 14px 44px !important; }
  .dg-cases-grid { grid-template-columns: 1fr !important; }
  .dg-g-grid { grid-template-columns: 1fr !important; }
  .dg-scope-cards { gap: 12px !important; }
  .dg-contact-section { padding: 44px 14px 52px !important; }
  .dg-form-card { padding: 18px 14px 20px !important; border-radius: 18px !important; }
}

/* ─── HOVER: none — désactive effets hover inutiles sur touch ─── */
@media (hover: none) and (pointer: coarse) {
  .dg-case:hover,
  .dg-scope-card:hover,
  .dg-g-card:hover { transform: none !important; }
  .dg-btn-submit:hover { transform: none !important; }
  .nav-overlay-links a:hover { transform: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   OPTIMISATIONS MOBILES v5 — Navigation, formulaires, Diogène
   ═══════════════════════════════════════════════════════════════ */

/* ─── NAV OVERLAY SIMPLE — index.html & nettoyage.html ──────── */
/* Ces pages ont des <a> directs dans .nav-overlay (sans wrapper
   .nav-overlay-links), ce qui leur donnait un look basique.
   On les aligne sur le style premium des pages Diogène/Location. */
@media (max-width: 720px) {

  /* Conteneur de l'overlay simple : padding haut/bas cohérent */
  .nav-overlay {
    padding: 16px 0 24px !important;
    justify-content: flex-start !important;
  }

  /* Liens directs (pas de .nav-overlay-links) */
  .nav-overlay > a:not(.btn-quote):not(.nav-overlay-cta):not(.btn-devis) {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 15px 18px !important;
    margin: 2px 10px !important;
    border-radius: 14px !important;
    color: rgba(255,255,255,.88) !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    background: transparent !important;
    border: none !important;
    transition: background .2s, color .2s !important;
  }
  /* Supprime la flèche "→" héritée du style.css */
  .nav-overlay > a:not(.btn-quote):not(.nav-overlay-cta):not(.btn-devis)::before {
    display: none !important;
  }
  .nav-overlay > a:not(.btn-quote):not(.nav-overlay-cta):not(.btn-devis):hover,
  .nav-overlay > a:not(.btn-quote):not(.nav-overlay-cta):not(.btn-devis):active {
    background: rgba(255,255,255,.07) !important;
    color: #fff !important;
    transform: translateX(3px) !important;
  }
  /* Page courante — liseré orange */
  .nav-overlay > a[aria-current="page"] {
    background: rgba(229,103,28,.13) !important;
    color: #FFCBA4 !important;
    border-left: 3px solid rgba(229,103,28,.7) !important;
    border-radius: 0 14px 14px 0 !important;
    padding-left: 15px !important;
    margin-left: 10px !important;
  }
  /* CTA / bouton devis dans l'overlay simple */
  .nav-overlay > .btn-quote {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    margin: 14px 10px 6px !important;
    padding: 16px 20px !important;
    width: calc(100% - 20px) !important;
    min-height: 54px !important;
    background: linear-gradient(135deg, #E5671C 0%, #C24E0C 100%) !important;
    color: #fff !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    border-radius: 16px !important;
    border: none !important;
    box-shadow: 0 8px 24px rgba(229,103,28,.45) !important;
    transition: transform .2s, box-shadow .2s !important;
  }
  .nav-overlay > .btn-quote::before { display: none !important; }
  .nav-overlay > .btn-quote:hover { transform: translateY(-2px) !important; }
  .nav-overlay > .btn-quote .btn-quote-check { display: none !important; }
  .nav-overlay > .btn-quote .btn-quote-label {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #fff !important;
  }
}

/* ─── DIOGÈNE — Trust pills (dg-trust-grid) ─────────────────── */
@media (max-width: 720px) {
  section:has(.dg-trust-grid) {
    padding: 14px 12px !important;
  }
  .dg-trust-grid {
    gap: 7px !important;
  }
  .dg-trust-grid .trust-item {
    padding: 9px 9px !important;
    font-size: .71rem !important;
    gap: 5px !important;
    line-height: 1.3 !important;
    border-right: none !important;
    background: #f5f8fc !important;
    border: 1px solid #e6ecf2 !important;
    border-radius: 10px !important;
  }
  .dg-trust-grid .trust-item .t-ico {
    font-size: .88rem !important;
    display: block !important;
    flex-shrink: 0 !important;
  }
}

/* ─── DIOGÈNE — Hero : centrer texte & boutons ───────────────── */
@media (max-width: 720px) {
  .dg-hero .dg-hero-inner > div:first-child {
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  .dg-hero .lead {
    text-align: center !important;
  }
  /* Boutons — centrés et compacts */
  .dg-hero .hero-btns {
    width: 100% !important;
    align-items: center !important;
    flex-direction: column !important;
    gap: 10px !important;
  }
  .dg-hero .hero-btns .btn-primary,
  .dg-hero .hero-btns .btn-outline-light {
    width: 88% !important;
    max-width: 340px !important;
    text-align: center !important;
    justify-content: center !important;
    padding: 13px 18px !important;
    font-size: .93rem !important;
    min-height: 48px !important;
    border-radius: 14px !important;
  }
  /* Badge "France entière" */
  .dg-hero .dg-hero-inner > div:first-child > div:first-child {
    align-self: center !important;
  }
}

/* ─── DIOGÈNE — Section contact : centrage & aération ────────── */
@media (max-width: 720px) {
  .dg-contact-info {
    text-align: center !important;
  }
  .dg-contact-info .eyebrow {
    display: inline-block !important;
  }
  .dg-contact-title {
    text-align: center !important;
    font-size: clamp(1.5rem, 6.5vw, 1.9rem) !important;
    margin: 14px 0 14px !important;
  }
  .dg-contact-desc {
    font-size: .93rem !important;
    text-align: center !important;
  }
  .dg-trust-list {
    text-align: left !important;
    max-width: 340px !important;
    margin: 0 auto 24px !important;
  }
  .dg-direct-contacts {
    justify-content: center !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  .dg-contact-tel,
  .dg-contact-mail {
    font-size: .88rem !important;
  }
}

/* ─── HOMEPAGE — Formulaire contact : améliorations mobile ──── */
@media (max-width: 720px) {
  /* Padding de section */
  .bty-section {
    padding: 52px 14px !important;
  }
  /* Intro : centré sur mobile */
  .bty-intro {
    text-align: center !important;
    grid-template-columns: 1fr !important;
  }
  .bty-intro-copy {
    text-align: center !important;
  }
  .bty-intro-sub {
    max-width: 100% !important;
  }
  .bty-intro-contact {
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    gap: 8px !important;
  }
  .bty-phone-big {
    font-size: 1.3rem !important;
  }
  .bty-trust-row {
    font-size: .8rem !important;
  }
  /* Carte formulaire */
  .bty-card {
    padding: 20px 14px 18px !important;
    border-radius: 18px !important;
  }
  /* Upload zone */
  .bty-upload-zone {
    padding: 14px 12px !important;
    border-radius: 12px !important;
  }
  .bty-upload-icon {
    font-size: 1.4rem !important;
    margin-bottom: 5px !important;
  }
  .bty-upload-txt {
    font-size: .82rem !important;
  }
  .bty-upload-hint {
    font-size: .7rem !important;
  }
  .bty-upload-preview {
    gap: 6px !important;
    margin-top: 8px !important;
  }
  .bty-upload-thumb {
    width: 58px !important;
    height: 58px !important;
    border-radius: 8px !important;
  }
  /* Notice recrutement */
  .bty-no-recruit {
    padding: 11px 13px !important;
    gap: 9px !important;
    border-radius: 11px !important;
    font-size: .83rem !important;
  }
  .bty-no-recruit-text strong {
    font-size: .87rem !important;
  }
  /* Fieldset legend */
  .bty-legend {
    gap: 11px !important;
    padding-bottom: 11px !important;
    margin-bottom: 12px !important;
  }
  .bty-step-num {
    width: 30px !important;
    height: 30px !important;
    font-size: .9rem !important;
    flex-shrink: 0 !important;
  }
  .bty-step-title {
    font-size: .97rem !important;
  }
  .bty-step-hint {
    font-size: .73rem !important;
  }
}

/* ─── HOVER: none — pages secondaires ───────────────────────── */
@media (hover: none) and (pointer: coarse) {
  .nav-overlay > a:not(.btn-quote):hover { transform: none !important; }
}