/* ============================================================
   BATIYS — MOBILE AESTHETIC v1
   Couche de POLISH visuel pour mobile.
   À charger APRÈS style.css + mobile-polish.css.
   Focus : finitions, micro-interactions, perception premium.
   ============================================================ */

/* ============================================================
   1. BOTTOM ACTION BAR (sticky CTA mobile)
   ============================================================
   Barre fixe en bas d'écran avec [Appeler] + [Devis gratuit].
   Standard sur les sites pro modernes : ne casse jamais le funnel.
   ============================================================ */

.mobile-bottom-bar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 950;
  padding: 10px 12px max(10px, env(safe-area-inset-bottom)) 12px;
  background: rgba(255, 255, 255, .82);
  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 .35s cubic-bezier(.4, 0, .2, 1);
}
.mobile-bottom-bar.is-visible {
  transform: translateY(0);
}
.mobile-bottom-bar-inner {
  display: flex;
  gap: 8px;
  max-width: 460px;
  margin: 0 auto;
}
.mbb-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  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, .08);
  color: #0F2744;
  border: 1px solid rgba(15, 39, 68, .12);
}
.mbb-btn-call:hover,
.mbb-btn-call:active {
  background: rgba(15, 39, 68, .14);
  transform: scale(.98);
}
.mbb-btn-quote {
  background: linear-gradient(135deg, #E5671C, #D05714);
  color: #fff;
  box-shadow: 0 4px 12px 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, .25), transparent);
  transform: translateX(-100%);
  animation: mbb-shine 4s ease-in-out infinite;
}
@keyframes mbb-shine {
  0%, 60%, 100% { transform: translateX(-100%); }
  80%          { transform: translateX(100%); }
}
.mbb-btn-quote:active { transform: scale(.98); }
.mbb-icon {
  font-size: 1rem;
  line-height: 1;
  flex-shrink: 0;
}

@media (max-width: 720px) {
  .mobile-bottom-bar { display: block; }
  /* Quand la bottom bar est active, on pousse le contenu pour que rien ne soit caché */
  body { padding-bottom: 80px !important; }
  /* On masque le bouton flottant historique pour ne pas avoir 2 CTA empilés */
  .btn-flottant { display: none !important; }
  /* On remonte aussi la bannière cookie pour ne pas qu'elle chevauche */
  .cookie-banner { bottom: 80px !important; }
}

/* ============================================================
   2. HEADER MOBILE QUI SE RÉTRACTE AU SCROLL
   ============================================================
   Le header devient ultra-compact quand on scroll = +20% de surface utile.
   ============================================================ */

@media (max-width: 720px) {
  header {
    transition:
      height .3s cubic-bezier(.4, 0, .2, 1),
      padding .3s cubic-bezier(.4, 0, .2, 1),
      background-color .3s ease,
      backdrop-filter .3s ease !important;
  }
  header.scrolled {
    height: 54px !important;
    box-shadow: 0 2px 14px rgba(15, 39, 68, .08) !important;
  }
  header.scrolled .site-logo-img {
    width: 32px !important;
    height: 32px !important;
    transition: width .3s ease, height .3s ease;
  }
  header.scrolled .logo-text h1 {
    font-size: .94rem !important;
  }
  header.scrolled .logo-text small {
    display: none !important;
  }
}

/* ============================================================
   3. SAFE-AREA INSETS iOS (notch + 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(80px, env(safe-area-inset-top, 80px) + 80px) !important;
    padding-left: max(24px, env(safe-area-inset-left)) !important;
    padding-right: max(24px, env(safe-area-inset-right)) !important;
  }
}

/* ============================================================
   4. HERO IMMERSIF MOBILE
   ============================================================
   Sur mobile, le hero devient plus immersif :
   image en background full-bleed, dégradé bas pour lisibilité.
   ============================================================ */

@media (max-width: 720px) {
  .ch-v2-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 90px 18px 50px !important;
  }
  .ch-v2-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
      radial-gradient(ellipse at 50% 100%, rgba(229, 103, 28, .12) 0%, transparent 60%),
      linear-gradient(180deg, transparent 30%, rgba(10, 29, 53, .15) 100%);
    pointer-events: none;
  }
  /* Hero card : on lui donne du "lift" */
  .ch-v2-hero-card {
    position: relative;
    transform: translateY(0);
    box-shadow:
      0 4px 12px rgba(8, 23, 39, .15),
      0 22px 56px rgba(8, 23, 39, .35) !important;
  }
  .ch-v2-hero-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, transparent 70%, rgba(229, 103, 28, .12) 100%);
    pointer-events: none;
    border: 1px solid rgba(255, 255, 255, .08);
  }
  /* Mini-trust mobile : design glass + icône check */
  .ch-v2-trust-mini {
    position: relative;
    overflow: hidden;
  }
  .ch-v2-trust-mini::before {
    content: '✓';
    position: absolute;
    top: -10px;
    right: -10px;
    font-size: 70px;
    color: rgba(229, 103, 28, .08);
    font-weight: 900;
    pointer-events: none;
  }
}

/* ============================================================
   5. SECTION BRIDGES (transitions subtiles entre sections)
   ============================================================
   Au lieu de coupures nettes, des dégradés discrets qui guident l'œil.
   ============================================================ */

@media (max-width: 720px) {
  .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 {
    position: relative;
  }
  /* Bridge subtil entre 2 sections claires */
  .ch-v2-services + .ch-v2-why::before,
  .ch-v2-why + .ch-v2-process::before,
  .ch-v2-process + .ch-v2-pricing-section::before,
  .ch-v2-pricing-section + .ch-v2-testimonials::before,
  .ch-v2-testimonials + .ch-v2-zones::before {
    content: '';
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 40px; height: 4px;
    background: linear-gradient(90deg, transparent, rgba(229, 103, 28, .35), transparent);
    border-radius: 4px;
  }
}

/* ============================================================
   6. CARDS — OMBRES PREMIUM EN COUCHES
   ============================================================
   3 ombres superposées = profondeur réaliste. Touch-feedback à l'appui.
   ============================================================ */

@media (max-width: 720px) {
  .ch-v2-card,
  .ch-testimonial,
  .ch-v2-region,
  .dg-scope-card {
    box-shadow:
      0 1px 1px rgba(15, 39, 68, .04),
      0 4px 8px rgba(15, 39, 68, .04),
      0 12px 24px rgba(15, 39, 68, .06) !important;
    transition: transform .25s cubic-bezier(.4, 0, .2, 1), box-shadow .25s ease !important;
  }
  /* Touch feedback : compression légère à l'appui (effet haptique visuel) */
  .ch-v2-card:active,
  .ch-testimonial:active,
  .ch-v2-region:active,
  .dg-scope-card:active {
    transform: scale(.98) !important;
    box-shadow:
      0 1px 2px rgba(15, 39, 68, .08),
      0 2px 4px rgba(15, 39, 68, .04) !important;
    transition-duration: .12s !important;
  }
}

/* ============================================================
   7. PHOTOS — KEN BURNS DOUX SUR LES IMAGES HERO
   ============================================================
   Effet de zoom infini très lent, donne de la vie aux images statiques.
   ============================================================ */

@media (max-width: 720px) {
  .ch-v2-hero-card img,
  .ch-v2-card-media img,
  .dg-scope-media img {
    transition: transform 1.4s cubic-bezier(.22, 1, .36, 1) !important;
  }
  .ch-v2-hero-card img {
    animation: ma-kenburns 24s ease-in-out infinite alternate;
  }
}
@keyframes ma-kenburns {
  0%   { transform: scale(1) translate(0, 0); }
  100% { transform: scale(1.06) translate(-1%, -1%); }
}

/* ============================================================
   8. TYPOGRAPHIE PREMIUM MOBILE
   ============================================================
   Mieux : letter-spacing optique, line-heights affinées,
   couleurs adoucies pour le confort de lecture longue durée.
   ============================================================ */

@media (max-width: 720px) {
  body {
    text-rendering: optimizeLegibility;
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  }
  /* Eyebrow : badge pré-titre plus chic */
  .eyebrow,
  .section-title .eyebrow {
    font-size: .7rem !important;
    letter-spacing: 1.6px !important;
    text-transform: uppercase;
    background: linear-gradient(135deg, rgba(229, 103, 28, .15), rgba(229, 103, 28, .06)) !important;
    border: 1px solid rgba(229, 103, 28, .2);
    padding: 6px 12px !important;
    border-radius: 999px !important;
    color: var(--orange, #E5671C) !important;
    font-weight: 700 !important;
    display: inline-block;
  }
  /* Titres avec un letter-spacing négatif pour serrer les caractères */
  h1, h2, h3 {
    letter-spacing: -.02em !important;
  }
  /* Paragraphes plus aérés */
  p {
    line-height: 1.7 !important;
    color: #455565 !important;
  }
  /* Liens dans le corps : underline plus subtile */
  main a:not(.btn):not(.btn-light):not(.btn-primary):not(.btn-outline-light):not(.legal-toc-list a):not(.faq-bottom-link) {
    text-decoration-color: rgba(229, 103, 28, .35);
    text-underline-offset: 3px;
    transition: text-decoration-color .2s ease;
  }
  main a:hover:not(.btn) {
    text-decoration-color: var(--orange);
  }
}

/* ============================================================
   9. KPI STRIP — design "premium card" sur mobile
   ============================================================ */

@media (max-width: 720px) {
  .kpi-strip {
    background:
      linear-gradient(135deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01)),
      linear-gradient(180deg, #15365b, #0a1d35) !important;
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .08),
      0 18px 40px rgba(8, 23, 39, .25) !important;
  }
  .kpi-strip .kpi-item {
    backdrop-filter: blur(8px);
    transition: transform .25s ease;
  }
  .kpi-strip .kpi-item:active {
    transform: scale(.97);
  }
  .kpi-strip .kpi-num {
    background: linear-gradient(135deg, #fff 30%, #ffcfa8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
  .kpi-strip .kpi-num em {
    background: none;
    -webkit-text-fill-color: rgba(255, 255, 255, .55);
  }
}

/* ============================================================
   10. FORMULAIRE CONTACT — finition mobile haut de gamme
   ============================================================ */

@media (max-width: 720px) {
  .bty-card {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .98), #fff) !important;
    box-shadow:
      0 1px 1px rgba(15, 39, 68, .04),
      0 6px 14px rgba(15, 39, 68, .06),
      0 24px 48px rgba(15, 39, 68, .12) !important;
  }
  .bty-field input,
  .bty-field select,
  .bty-field textarea {
    background: #fafbfd !important;
    border-width: 1.5px !important;
    transition: all .22s cubic-bezier(.4, 0, .2, 1) !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;
    transform: translateY(-1px);
  }
  /* Submit : bouton premium pulse-on-idle */
  .bty-form button[type=submit] {
    background: linear-gradient(135deg, #E5671C, #D05714) !important;
    box-shadow:
      0 4px 12px rgba(229, 103, 28, .3),
      inset 0 1px 0 rgba(255, 255, 255, .25) !important;
    position: relative;
    overflow: hidden;
  }
  .bty-form button[type=submit]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .3), transparent);
    transform: translateX(-100%);
    animation: ma-btn-shine 5s ease-in-out infinite;
  }
}
@keyframes ma-btn-shine {
  0%, 70%, 100% { transform: translateX(-100%); }
  85%           { transform: translateX(100%); }
}

/* ============================================================
   11. FAQ — finition mobile (accordéon plus smooth)
   ============================================================ */

@media (max-width: 720px) {
  .faq-item {
    background: #fff !important;
    border: 1px solid #e8eef5 !important;
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease !important;
  }
  .faq-item:active {
    transform: scale(.99);
  }
  .faq-item.open {
    border-color: var(--orange, #E5671C) !important;
    box-shadow: 0 8px 22px rgba(229, 103, 28, .12) !important;
  }
  .faq-icon {
    background: rgba(229, 103, 28, .1);
    width: 28px; height: 28px;
    border-radius: 50%;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    color: var(--orange) !important;
    font-size: 1rem !important;
    transition: all .3s cubic-bezier(.4, 0, .2, 1);
  }
  .faq-item.open .faq-icon {
    background: var(--orange) !important;
    color: #fff !important;
    transform: rotate(45deg);
    box-shadow: 0 4px 10px rgba(229, 103, 28, .35);
  }
}

/* ============================================================
   12. ZONES — région cards avec gradient
   ============================================================ */

@media (max-width: 720px) {
  .ch-v2-region {
    background: linear-gradient(135deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)) !important;
    border: 1px solid rgba(255, 255, 255, .1) !important;
    backdrop-filter: blur(6px);
    transition: all .3s ease;
  }
  .ch-v2-region h4 {
    color: #fff !important;
    background: linear-gradient(135deg, #fff, #ffcfa8);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

/* ============================================================
   13. TESTIMONIALS — design plus chic
   ============================================================ */

@media (max-width: 720px) {
  .ch-testimonial {
    background:
      linear-gradient(135deg, #fff, #fafbfd) !important;
    position: relative;
    overflow: hidden;
  }
  .ch-testimonial::before {
    content: '"';
    position: absolute;
    top: -20px;
    right: 14px;
    font-size: 100px;
    color: rgba(229, 103, 28, .08);
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
  }
  .ch-testimonial blockquote {
    position: relative;
    z-index: 1;
  }
  .ch-testimonial-author .avatar {
    background: linear-gradient(135deg, #E5671C, #FFCBA4) !important;
    box-shadow:
      0 4px 10px rgba(229, 103, 28, .25),
      inset 0 1px 0 rgba(255, 255, 255, .35);
  }
}

/* ============================================================
   14. SCROLL PROGRESS BAR (top of viewport)
   ============================================================
   Indicateur fin et discret du scroll position.
   ============================================================ */

@media (max-width: 720px) {
  .scroll-progress {
    position: fixed;
    top: 0; left: 0;
    height: 2px;
    background: linear-gradient(90deg, #E5671C, #FFCBA4);
    width: 0;
    z-index: 1000;
    box-shadow: 0 0 8px rgba(229, 103, 28, .5);
    transition: width .1s linear;
    pointer-events: none;
  }
}

/* ============================================================
   15. REVEAL ANIMATIONS — TIMING AFFINÉ MOBILE
   ============================================================ */

@media (max-width: 720px) {
  .reveal-up,
  .reveal-left,
  .reveal-right {
    transition:
      opacity .5s cubic-bezier(.34, 1.56, .64, 1),
      transform .5s cubic-bezier(.34, 1.56, .64, 1) !important;
  }
}

/* ============================================================
   16. RESPECT REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .ch-v2-hero-card img,
  .mbb-btn-quote::before,
  .bty-form button[type=submit]::before {
    animation: none !important;
  }
  .mobile-bottom-bar { transition: none !important; }
}

/* ============================================================
   17. DARK MODE READY (iOS gestures dark)
   ============================================================ */

@media (max-width: 720px) and (prefers-color-scheme: dark) {
  .mobile-bottom-bar {
    background: rgba(15, 25, 40, .85);
    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);
  }
}