/**
 * Thèmes publics — couche mobile native (Atlas / Harbor / Noir)
 * Chargée après theme.css. Cible : téléphones & tablettes étroites.
 */
:root {
  --th-header-h: 64px;
  --th-safe-top: env(safe-area-inset-top, 0px);
  --th-safe-bottom: env(safe-area-inset-bottom, 0px);
  --th-safe-left: env(safe-area-inset-left, 0px);
  --th-safe-right: env(safe-area-inset-right, 0px);
  --th-touch: 44px;
  --th-mobile-radius: 16px;
  --th-mobile-pad: 1rem;
}

/* Backdrop menu (créé via CSS + body.th-nav-open) */
.th-nav-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgba(15, 23, 42, 0.45);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
}

@media (max-width: 1100px) {
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body.th-body {
    padding-left: var(--th-safe-left);
    padding-right: var(--th-safe-right);
    overscroll-behavior-y: none;
  }

  body.th-nav-open {
    overflow: hidden;
    touch-action: none;
  }

  body.th-nav-open .th-nav-backdrop {
    display: block;
  }

  /* Header type barre d’app */
  .th-header {
    top: 0;
    padding-top: var(--th-safe-top);
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    backdrop-filter: saturate(180%) blur(16px);
  }

  body.theme-noir .th-header,
  body.theme-harbor .th-header {
    background: rgba(10, 14, 23, 0.88);
  }

  .th-header-bar {
    height: var(--th-header-h) !important;
    max-height: var(--th-header-h) !important;
    padding-inline: 0.15rem;
    gap: 0.4rem;
  }

  .th-brand-logo {
    height: 36px !important;
    max-width: min(132px, 42vw) !important;
  }

  .th-brand-name {
    font-size: 0.92rem;
    max-width: 28vw;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .th-nav-toggle {
    width: var(--th-touch) !important;
    height: var(--th-touch) !important;
    border-radius: 12px !important;
    padding: 10px !important;
    gap: 5px !important;
  }

  .th-login-btn,
  .th-logout-btn,
  .th-nav-lang .lang-switcher-btn {
    min-height: var(--th-touch) !important;
    height: var(--th-touch) !important;
    border-radius: 12px !important;
    padding-inline: 0.85rem !important;
  }

  .th-user-chip {
    width: var(--th-touch) !important;
    height: var(--th-touch) !important;
    min-width: var(--th-touch) !important;
    min-height: var(--th-touch) !important;
  }

  .th-avatar,
  img.th-avatar {
    width: var(--th-touch) !important;
    height: var(--th-touch) !important;
    max-width: var(--th-touch) !important;
    max-height: var(--th-touch) !important;
    min-width: var(--th-touch) !important;
    min-height: var(--th-touch) !important;
  }

  /* Masquer logout texte : l’avatar suffit ; gain de place */
  .th-logout-form {
    display: none !important;
  }

  /* Drawer plein écran type app */
  .th-nav-links {
    position: fixed !important;
    left: 0;
    right: 0;
    top: calc(var(--th-header-h) + var(--th-safe-top));
    bottom: 0;
    display: none !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.35rem !important;
    padding: 0.75rem var(--th-mobile-pad) calc(1.25rem + var(--th-safe-bottom)) !important;
    z-index: 60;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: none !important;
    border-radius: 0 0 24px 24px;
    background: #fff;
    animation: thDrawerIn 0.22s ease;
  }

  body.theme-noir .th-nav-links,
  body.theme-harbor .th-nav-links {
    background: #0f1520;
  }

  .th-nav-links.is-open {
    display: flex !important;
  }

  .th-nav-links .th-nav-link {
    display: flex !important;
    align-items: center;
    min-height: var(--th-touch);
    padding: 0.85rem 1rem !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    border-radius: 14px;
    border-bottom: 0 !important;
  }

  .th-nav-links .th-nav-link.is-active {
    background: rgba(10, 31, 68, 0.08);
  }

  body.theme-noir .th-nav-links .th-nav-link.is-active,
  body.theme-harbor .th-nav-links .th-nav-link.is-active {
    background: rgba(255, 255, 255, 0.08);
  }

  .th-nav-phone-in-menu {
    margin-top: 0.75rem !important;
    align-self: stretch !important;
    justify-content: center !important;
    min-height: var(--th-touch) !important;
    height: auto !important;
    border-radius: 14px !important;
    font-size: 0.95rem !important;
  }

  .th-container {
    width: min(1180px, calc(100% - 1.5rem));
  }

  /* Hero compact type écran d’accueil app */
  .th-hero {
    min-height: auto !important;
    align-items: flex-start;
    overflow: visible !important;
  }

  .th-hero-media,
  .th-page-hero-bg {
    overflow: hidden;
  }

  .th-hero-content {
    padding: 1.75rem 0 2rem !important;
    max-width: none !important;
  }

  .th-hero h1,
  .th-page-hero h1 {
    font-size: clamp(1.65rem, 7.5vw, 2.15rem) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em;
  }

  .th-hero-sub {
    font-size: 1rem !important;
  }

  .th-hero-desc {
    font-size: 0.95rem;
    margin-bottom: 1.1rem !important;
  }

  .th-hero-actions {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 0.65rem !important;
    width: 100%;
  }

  .th-hero-actions .th-btn {
    width: 100%;
    min-height: var(--th-touch);
    border-radius: 14px !important;
    font-size: 1rem !important;
  }

  .th-hero-track {
    width: 100%;
    max-width: 100% !important;
    height: auto !important;
    box-sizing: border-box;
    border-radius: 16px !important;
    padding: 0.8rem 0.85rem !important;
    margin-bottom: 0.75rem;
  }

  .th-hero-track-title {
    margin: 0 0 0.5rem !important;
    font-size: 1rem !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }

  .th-track-form {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch;
    flex: 0 0 auto !important;
    height: auto !important;
    gap: 0.5rem !important;
    width: 100%;
  }

  .th-track-submit {
    flex: 0 0 auto !important;
    width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding: 0 0.9rem !important;
  }

  #th_hero_tracking_number,
  .th-track-input {
    flex: none !important;
    align-self: stretch;
    width: 100% !important;
    max-width: 100%;
    min-width: 0 !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    box-sizing: border-box !important;
    border-radius: 10px !important;
    font-size: 16px !important;
    padding: 0 12px !important;
    line-height: 40px !important;
  }

  .th-track-input {
    color: #1a1a2e !important;
    background: #fff !important;
    -webkit-text-fill-color: #1a1a2e;
  }

  .th-track-input::placeholder {
    color: #64748b;
    opacity: 1;
    -webkit-text-fill-color: #64748b;
  }

  body.theme-noir .th-track-input {
    color: #fff !important;
    background: #151515 !important;
    -webkit-text-fill-color: #fff;
  }

  body.theme-noir .th-track-input::placeholder {
    color: #94a3b8;
    -webkit-text-fill-color: #94a3b8;
  }

  /* Sections & grilles : une colonne, rythme app */
  .th-section {
    padding: 2.25rem 0 !important;
    scroll-margin-top: calc(var(--th-header-h) + var(--th-safe-top) + 0.5rem);
  }

  .th-section-title {
    font-size: clamp(1.35rem, 5.5vw, 1.7rem) !important;
    line-height: 1.2;
  }

  .th-values {
    padding: 1.35rem 0 !important;
  }

  .th-values-grid,
  .th-stats-grid,
  .th-services-grid,
  .th-quick-grid,
  .th-quality-grid,
  .th-blog-grid,
  .th-testimonials-grid,
  .th-about-grid,
  .th-contact-layout,
  .th-footer-grid,
  .th-form-row,
  .th-contact-strip-grid {
    grid-template-columns: 1fr !important;
    gap: 0.85rem !important;
  }

  .th-values-grid,
  .th-stats-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    overflow: visible;
  }

  .th-value-item,
  .th-stat {
    min-width: 0;
    border-radius: var(--th-mobile-radius);
  }

  .th-card,
  .th-service-card,
  .th-quick-card,
  .th-quote {
    border-radius: var(--th-mobile-radius) !important;
    padding: 1.15rem !important;
  }

  .th-btn {
    min-height: var(--th-touch);
    border-radius: 14px !important;
    padding: 0.8rem 1.15rem !important;
  }

  .th-track-submit.th-btn {
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    padding: 0 0.9rem !important;
  }

  .th-page-hero {
    padding: 2.25rem 0 1.75rem !important;
  }

  .th-page-hero.has-media {
    min-height: 200px !important;
    align-items: flex-end;
  }

  /* Footer mobile : stack + safe area */
  .th-footer {
    padding-top: 2rem !important;
    padding-bottom: var(--th-safe-bottom);
  }

  .th-footer-grid {
    gap: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }

  .th-assist-inner {
    display: grid !important;
    gap: 0.85rem;
    text-align: center;
  }

  .th-assist .th-btn {
    width: 100%;
  }

  .th-contact-strip {
    padding: 1.15rem 0 !important;
  }

  .th-contact-strip-item {
    padding: 0.65rem 0;
  }

  /* Formulaires : inputs 16px anti-zoom */
  .th-form input,
  .th-form textarea,
  .th-newsletter input {
    font-size: 16px !important;
    min-height: var(--th-touch);
    border-radius: 12px !important;
  }

  /* Accordion FAQ tactile */
  .th-acc-item summary {
    min-height: var(--th-touch);
    display: flex;
    align-items: center;
    padding: 0.85rem 0.25rem;
    font-weight: 700;
  }

  /* Blog cards */
  .th-blog-cover {
    margin: -1.15rem -1.15rem 0.85rem !important;
    border-radius: var(--th-mobile-radius) var(--th-mobile-radius) 0 0 !important;
  }

  /* Espace pour bannière APK éventuelle */
  body.th-body {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
}

@media (max-width: 760px) {
  .th-header-actions .th-nav-lang-bar {
    display: none !important;
  }

  .th-nav-links.is-open .th-nav-lang-mobile {
    display: flex !important;
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid rgba(148, 163, 184, 0.35);
  }

  .th-nav-lang-mobile[hidden] {
    display: none !important;
  }

  .th-hero-overlay {
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.55) 0%,
      rgba(255, 255, 255, 0.88) 55%,
      rgba(255, 255, 255, 0.96) 100%
    ) !important;
  }

  body.theme-noir .th-hero-overlay {
    background: linear-gradient(
      180deg,
      rgba(6, 10, 18, 0.35) 0%,
      rgba(6, 10, 18, 0.72) 50%,
      rgba(6, 10, 18, 0.92) 100%
    ) !important;
  }

  body.theme-noir .th-hero {
    color: #fff;
  }
}

@media (max-width: 560px) {
  .th-values-grid,
  .th-stats-grid {
    grid-template-columns: 1fr !important;
  }
}

@keyframes thDrawerIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Réduction motion */
@media (prefers-reduced-motion: reduce) {
  .th-nav-links,
  .th-reveal,
  .th-card {
    animation: none !important;
    transition: none !important;
  }
}

/* Icônes de la barre valeurs : blanc sur fond coloré (Harbor : l'or du thème est le même teal que le bandeau). */
.th-values .th-value-icon {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 44px !important;
  height: 44px !important;
  color: #fff !important;
  background: rgba(255, 255, 255, 0.16) !important;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 12px;
  overflow: visible;
}

.th-values .th-icon-svg,
.th-values .th-icon-svg svg,
.th-service-icon .th-icon-svg,
.th-service-icon .th-icon-svg svg {
  display: block !important;
  width: 26px !important;
  height: 26px !important;
  max-width: 26px;
  color: #fff !important;
  stroke: currentColor;
  flex: 0 0 26px;
}

.th-hero-media iframe,
.th-page-hero-bg iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 56.25vw;
  min-height: 100%;
  min-width: 177.78vh;
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none;
}

.th-page-hero-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Champ numéro de suivi : une seule ligne, ne grandit jamais avec le hero. */
#th_hero_tracking_number {
  flex: none !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  padding: 0 12px !important;
  line-height: 40px !important;
  box-sizing: border-box !important;
}