/* ==========================================================================
   PREMIUM MOBILE APP — rendu "Application Mobile Native" sur mobile
   Remplacé le comportement Divi par défaut (empilement vertical) par :
   1. Swipe horizontal tactile (scroll-snap) — catégories, piliers, témoignages, galerie
   2. Bottom Tab Navigation (4 onglets, blur + bordure lumineuse)
   3. Hero 100dvh, glassbox ancré en bas, boutons pleine largeur
   4. Grille de logos compacte 3 colonnes
   5. Coins arrondis + ombres douces (cartes "app")
   ========================================================================== */

/* Le FAB devis (+/×) est retiré à TOUTES les largeurs : redondant avec la
   tabbar mobile et les CTA desktop, et perçu comme un "+" parasite. */
.cmc-dv-fab,
.cmc-dv-overlay,
.cmc-dv-panel { display: none !important; }

/* --------------------------------------------------------------------------
   2. BOTTOM TAB NAVIGATION — barre fixe bas d'écran (mobile ≤ 980px comme le
   menu "téléphone" de Divi). Masquée sur desktop.
   -------------------------------------------------------------------------- */
.tco-tabbar {
  display: none;
}
@media (max-width: 980px) {
  .tco-tabbar {
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99990;
    background: rgba(6, 10, 20, .84);
    -webkit-backdrop-filter: blur(10px) saturate(150%);
    backdrop-filter: blur(10px) saturate(150%);
    border-top: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 -12px 32px -14px rgba(0, 0, 0, .65);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .tco-tab {
    position: relative;
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 10px 4px 9px;
    color: rgba(255, 255, 255, .62);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .02em;
    text-decoration: none !important;
    -webkit-tap-highlight-color: transparent;
    transition: color .25s ease, background .25s ease;
  }
  .tco-tab svg {
    width: 23px;
    height: 23px;
    display: block;
  }
  .tco-tab:active,
  .tco-tab.is-active { color: #FF7900; }
  .tco-tab:focus-visible {
    outline: 2px solid #FF7900;
    outline-offset: -2px;
    border-radius: 12px;
  }
  /* Petit indicateur lumineux au-dessus de l'onglet actif */
  .tco-tab.is-active::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 46px;
    height: 2.5px;
    border-radius: 0 0 6px 6px;
    background: linear-gradient(90deg, #FF7900, #FFB266);
    box-shadow: 0 0 14px rgba(255, 121, 0, .65);
  }

  /* Cache le header Divi par défaut : la tabbar remplace la navigation */
  #main-header,
  #et-fixed-header { display: none !important; }
  /* Supprime les FAB flottants (chat + devis) : redondants avec la tabbar */
  .cmc-dv-fab,
  .cmc-dv-overlay,
  .cmc-dv-panel,
  .cmc-chat,
  .cmc-chat-win { display: none !important; }
  /* Reserve la place sous le footer pour ne pas masquer le contenu */
  body { padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
}

/* --------------------------------------------------------------------------
   1. SWIPE HORIZONTAL TACTILE (≤ 767px)
   Catégories (6), piliers (4), témoignages (3) : scroll-snap x mandatory.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .tim-cat-grid,
  .tim-pilier-grid,
  .tim-testi-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-left: -20px;
    margin-right: -20px;
    padding: 4px 20px 16px;
  }
  .tim-cat-grid::-webkit-scrollbar,
  .tim-pilier-grid::-webkit-scrollbar,
  .tim-testi-grid::-webkit-scrollbar { display: none; }

  .tim-cat-card,
  .tim-pilier,
  .tim-testi-card {
    flex: 0 0 78%;
    width: 78%;
    max-width: 78%;
    scroll-snap-align: center;
  }
  .tim-cat-card h4 { font-size: .98rem; }
  .tim-pilier { padding: 26px 18px; }
  .tim-testi-card { padding: 26px 22px 24px; }

  /* Galerie "Le Meilleur de Nos Marques" : swipe natif (JS désactivé côté CSS) */
  .tim-gallery-viewport {
    overflow-x: auto !important;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 10px 0 16px;
  }
  .tim-gallery-viewport::-webkit-scrollbar { display: none; }
  .tim-gallery-track {
    transform: none !important;
    transition: none !important;
  }
  .tim-gallery-slide {
    flex: 0 0 82%;
    width: 82%;
    scroll-snap-align: center;
    border-radius: 18px;
    box-shadow: 0 18px 44px -18px rgba(10, 16, 40, .4);
  }
  .tim-gallery-nav { display: none !important; }
  #timGalleryDots { display: none !important; }
  .tim-gallery-carousel { margin: 0; }

  /* Stats (15+ / 10 000+ / 98 %) : ligne compacte de 3 puces */
  .tim-testi-stats {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  .tim-stat { padding: 14px 6px; border-radius: 16px; }
  .tim-stat-num { font-size: 22px; }
  .tim-stat-label { font-size: 10.5px; }
}

/* --------------------------------------------------------------------------
   3. HERO 100dvh — glassbox ancré vers le bas, boutons pleine largeur
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  /* Mode "application" (accueil uniquement) : on retire la topbar et le bandeau
     promo pour que le hero occupe exactement l'écran (top: 0 → 100dvh) */
  body.home .tim-topbar,
  body.home .tco-promo { display: none !important; }

  #tim-hero { min-height: 100dvh; min-height: 100svh; }
  #tim-hero .cmc-slider {
    height: 100dvh;
    height: 100svh;
    height: 100vh;
    min-height: 0;
  }
  #tim-hero .cslide-content {
    align-items: flex-end;
    padding-bottom: calc(132px + env(safe-area-inset-bottom, 0px));
  }
  #tim-hero .cmc-shell {
    width: 100%;
    padding: 0 14px;
  }
  #tim-hero .glassbox {
    width: 100%;
    max-width: 100%;
    padding: 22px 18px 20px;
    border-radius: 22px;
    gap: 10px;
  }
  #tim-hero .cmc-title { font-size: clamp(23px, 6.6vw, 31px); }
  #tim-hero .cmc-desc { font-size: 13.5px; line-height: 1.5; }
  #tim-hero .cmc-btns {
    flex-direction: column;
    width: 100%;
    gap: 10px;
  }
  #tim-hero .cmc-btns .el-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 18px;
    font-size: 15px;
  }
  /* Points de navigation au-dessus de la vague + tabbar */
  #tim-hero .cmc-dots {
    bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  }
}

/* --------------------------------------------------------------------------
   4. GRILLE DE LOGOS COMPACTE ("Les Meilleures Marques du Marché")
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .tim-brand-carousel {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
  .tim-brand-item {
    width: auto !important;
    padding: 10px 6px;
    border-radius: 14px;
  }
  .tim-brand-item img { max-height: 34px; }
  .tim-brand-item span { font-size: 11px; }
}

/* --------------------------------------------------------------------------
   5. UI PREMIUM — cohérence "app" : coins arrondis + ombres douces
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .tim-cat-card,
  .tim-pilier,
  .tim-testi-card {
    border-radius: 20px;
  }
  .tim-cat-card {
    min-height: 168px;
    box-shadow:
      0 22px 48px -24px rgba(4, 6, 12, .45),
      inset 0 1px 0 0 rgba(255, 255, 255, .9);
  }
  /* Bandeau CTA : boutons pleine largeur (pouce) */
  .tim-cta-band .tim-cta-inner > div {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .tim-cta-band .tim-cta-inner a {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}

/* Pause du snap quand on réduit les animations */
@media (prefers-reduced-motion: reduce) {
  .tim-cat-grid,
  .tim-pilier-grid,
  .tim-testi-grid,
  .tim-gallery-viewport {
    scroll-behavior: auto;
  }
}

/* ==========================================================================
   6. VERSION MOBILE « APP » — nettoyage complet (≤ 980px)
   Header fixe (logo MATEC centré, fond clair premium), suppression du
   footer / témoignages / recherche / topbar, carrousels catégories+piliers.
   ========================================================================== */

/* ----- Header mobile fixe : logo MATEC centré, fond clair "glass" ----- */
.tim-mobile-header {
  display: none;
}
@media (max-width: 980px) {
  .tim-mobile-header {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99995;
    height: 54px;
    align-items: center;
    justify-content: center;
    background: rgba(249, 250, 252, .92);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    backdrop-filter: blur(14px) saturate(160%);
    border-bottom: 1px solid rgba(10, 14, 32, .08);
    box-shadow: 0 12px 30px -20px rgba(6, 10, 20, .4);
  }
  .tim-mobile-header .tim-mobile-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
  }
  .tim-mobile-header .tim-mobile-logo img {
    max-height: 34px;
    width: auto;
    display: block;
  }
  .tim-mobile-logo-text {
    font-family: 'Montserrat', 'Open Sans', sans-serif !important;
    font-weight: 800;
    font-size: 19px;
    letter-spacing: .18em;
    color: #060A14;
    line-height: 1;
  }
  .tim-mobile-logo-text em {
    font-style: normal;
    color: #FF7900;
  }

  /* ----- Nettoyage "app" : tout ce qui surcharge le mobile ----- */
  .tim-footer-rich,
  #footer-bottom { display: none !important; }
  .tim-testi-premium { display: none !important; }
  .tim-topbar,
  .tco-promo { display: none !important; }
  .et_search_outer,
  .et_search_form_container,
  .et-search-form,
  #et_search_icon,
  .cmc-search-trigger,
  .cmc-search-overlay,
  #cmcSearchOverlay { display: none !important; }

  /* Barre d'admin WP (« Edit category », « + New »…) masquée en mobile :
     elle recouvre le header fixe. Le margin-top:32/46px qu'elle ajoute au
     <html> est réinitialisé (:root l'emporte sur la règle html de WP). */
  #wpadminbar { display: none !important; }
  :root { margin-top: 0 !important; }
  #et_mobile_nav_menu,
  .et_mobile_menu,
  #et_mobile_menu { display: none !important; }
  a[href*="my-account"],
  a[href*="mon-compte"],
  a[aria-label*="compte" i],
  a[aria-label*="membre" i],
  a[aria-label*="account" i],
  .woocommerce-MyAccount-navigation { display: none !important; }

  /* ----- Le header fixe prend la place en haut (hors hero home) ----- */
  body:not(.home) { padding-top: 54px; }
  #tim-hero { padding-top: 54px; }

  /* ----- Carrousels (swipe) : catégories + piliers ----- */
  .tim-cat-grid,
  .tim-pilier-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-left: -20px;
    margin-right: -20px;
    padding: 4px 20px 16px;
  }
  .tim-cat-grid::-webkit-scrollbar,
  .tim-pilier-grid::-webkit-scrollbar { display: none; }
  .tim-cat-card,
  .tim-pilier {
    flex: 0 0 78%;
    width: 78%;
    max-width: 78%;
    scroll-snap-align: center;
  }
}

/* ----- Hero home : exactement l'écran, header compris (≤ 767px) ----- */
@media (max-width: 767px) {
  body.home { padding-top: 0; }
  #tim-hero { min-height: 0; padding-top: 54px; }
  #tim-hero .cmc-slider {
    height: calc(100dvh - 54px);
    height: calc(100svh - 54px);
    min-height: 0;
  }
}

/* ----- Badge compteur panier sur l'onglet tabbar ----- */
.tco-tab-badge {
  position: absolute;
  top: 3px;
  left: 50%;
  margin-left: 11px;
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  border-radius: 999px;
  background: #F87503;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
  pointer-events: none;
}