/* ================================================================
   DevisExpress — dx-mobile.css
   Optimisation mobile-first complète
   Ne casse rien — surcharge uniquement les valeurs problématiques
   ================================================================ */

/* ── Base universelle mobile ── */
@media (max-width: 640px) {

  /* Corps */
  body {
    font-size: 16px;
    line-height: 1.55;
  }

  /* Container : padding latéral confortable */
  .container,
  .dx-page-hero__wrap {
    width: 100% !important;
    padding: 0 16px !important;
  }

  /* ── Titres — hiérarchie claire ── */
  h1, .heroTitle, .dxPageTitle, .dx-page-hero__title {
    font-size: clamp(24px, 7vw, 32px) !important;
    line-height: 1.1 !important;
    letter-spacing: -.025em !important;
  }

  h2, .sectionTitle, .dxSection__title {
    font-size: clamp(18px, 5.5vw, 22px) !important;
    line-height: 1.15 !important;
  }

  h3 { font-size: 17px !important; }

  p, .heroSub, .dxPageSub, .dxHero__sub {
    font-size: 15px !important;
    line-height: 1.6 !important;
  }

  /* ── Boutons — touch targets 44px min ── */
  .btn, .dxBtn, .dxBtnPrimary, .btnPrimary,
  button:not(.dxBurger):not(.pwToggle):not(.dxModalClose):not(.star):not(#dxBtnPinFilter):not(#btnMicQ):not(#btnSearchQ):not(#dxToggleFilters):not(.dxVoiceBtn):not(#dxSendArrow):not([id*="Send"]):not([id*="Arrow"]) {
    min-height: 48px !important;
    padding: 12px 18px !important;
    font-size: 15px !important;
    border-radius: 14px !important;
    touch-action: manipulation;
  }

  /* Rangées de boutons : empilés sur mobile */
  .btnRow, .dxHero__cta, .dxMiniCard__a, .formActions > div {
    flex-direction: column !important;
    gap: 10px !important;
  }

  .btnRow .btn, .btnRow a.btn,
  .dxHero__cta .btn, .dxHero__cta a {
    width: 100% !important;
    justify-content: center !important;
  }

  /* ── Formulaires — full width, lisibles ── */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="password"],
  select,
  textarea,
  .dxInput {
    font-size: 16px !important; /* évite zoom auto iOS */
    min-height: 48px !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
    width: 100% !important;
  }

  textarea { min-height: 100px !important; }

  label {
    font-size: 14px !important;
    margin-bottom: 6px !important;
    display: block !important;
  }

  /* ── Grilles → 1 colonne ── */
  .heroGrid,
  .dxHero,
  .dxCards2,
  .murGrid,
  .statsRow,
  .dxHero__proof,
  .dx-account-grid,
  .dx-grid2,
  .reviewGrid,
  .mainGrid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* ── Hero bandeau ── */
  .dx-page-hero {
    padding: 24px 0 48px !important;
  }

  .dx-page-hero__inner {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }

  .dx-page-hero__badge { display: none !important; }
  .dx-page-hero__eyebrow { font-size: 10px !important; }
  .dx-page-hero__title { font-size: clamp(22px, 6.5vw, 28px) !important; }
  .dx-page-hero__sub { font-size: 13px !important; }

  /* ── Cartes demandes ── */
  .murCard, .dxPost {
    padding: 14px 14px !important;
    border-radius: 16px !important;
  }

  .murService, .dxPostTitle {
    font-size: 16px !important;
    font-weight: 900 !important;
  }

  .murMeta, .dxPostMeta {
    font-size: 12px !important;
  }

  /* ── Section profil offreur ── */
  .dx-section-body {
    padding: 14px 14px !important;
  }

  .dx-section-title {
    font-size: 15px !important;
  }

  /* ── Dashboard stats ── */
  #dxDashStats {
    gap: 20px !important;
  }

  #dxDashStats > div > div:first-child {
    font-size: 26px !important;
  }

  #dxDashActions {
    flex-direction: column !important;
    gap: 10px !important;
  }

  #dxDashActions > * {
    min-width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }

  /* ── Historique table ── */
  table {
    font-size: 13px !important;
    display: block !important;
    overflow-x: auto !important;
  }

  th, td {
    padding: 8px 10px !important;
    white-space: nowrap;
  }

  /* ── Footer ── */
  .siteFooter .footerInner,
  .siteFooter .footerRow,
  [data-dx-footer] .footerInner {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 10px !important;
  }

  .footerLinks, .footLinks {
    justify-content: center !important;
    flex-wrap: wrap !important;
  }

  /* ── Modales ── */
  .dxModalCard {
    margin: 5vh 12px !important;
    padding: 16px !important;
    border-radius: 20px !important;
  }

  /* ── Abonnement ── */
  .dx-sub-card {
    border-radius: 16px !important;
  }

  /* ── Mur : filtre bouton épinglées ── */
  #dxBtnPinFilter {
    min-height: 40px !important;
    font-size: 16px !important;
    padding: 8px 14px !important;
  }

  /* ── Page hero overlap réduit mobile ── */
  .dx-below-hero {
    margin-top: -18px !important;
  }

  /* ── pageWrap ── */
  .pageWrap {
    padding: 14px 0 24px !important;
  }
}

/* ── Entre 641px et 860px : tablette ── */
@media (min-width: 641px) and (max-width: 860px) {
  .heroGrid, .dxHero {
    grid-template-columns: 1fr !important;
  }

  .dxCards2 {
    grid-template-columns: 1fr 1fr !important;
  }

  .container {
    padding: 0 20px !important;
  }

  .btn, .dxBtn {
    min-height: 44px !important;
  }

  input, select, textarea {
    font-size: 16px !important;
  }
}

/* Padding interne cartes sur mobile — éviter texte collé aux bords */
@media (max-width: 640px) {
  .card, .card.pad, section.card {
    padding: 16px !important;
  }
  .card > *:first-child {
    margin-top: 0 !important;
  }
  .fieldCard, .dx-section-body {
    padding: 14px 16px !important;
  }
  /* Titres de section pas collés */
  .sectionTitle, .fieldTitle, .dx-section-title {
    padding: 0 2px !important;
  }
}

/* DX FIX HEADER MOBILE COMPACT — 20260526
   Objectif : éviter le header haché sur téléphone.
   CSS uniquement : aucun changement auth, paiement, API, Radar. */
@media (max-width: 640px) {
  #dx-header-slot {
    width: 100% !important;
    max-width: 100vw !important;
    overflow: visible !important;
  }

  [data-dx-header] {
    width: 100% !important;
    max-width: 100vw !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    box-sizing: border-box !important;
  }

  [data-dx-header] .dxShell {
    width: 100% !important;
    max-width: calc(100vw - 20px) !important;
    min-height: 54px !important;
    height: 54px !important;
    padding: 0 8px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  [data-dx-header] .dxBrand {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: none !important;
    overflow: hidden !important;
    gap: 8px !important;
  }

  [data-dx-header] .dxBrandBolt {
    flex: 0 0 34px !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
  }

  [data-dx-header] .dxBrandText {
    min-width: 0 !important;
    max-width: 145px !important;
    overflow: hidden !important;
  }

  [data-dx-header] .dxBrandText strong {
    display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 145px !important;
    font-size: 15px !important;
    line-height: 1.05 !important;
  }

  [data-dx-header] .dxBrandText small {
    display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 145px !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
    opacity: .78 !important;
  }

  [data-dx-header] .dxNav {
    display: none !important;
  }

  [data-dx-header] .dxActions {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: auto !important;
  }

  [data-dx-header] .dxActions #authBtn,
  [data-dx-header] .dxBtnPrimary {
    display: none !important;
  }

  [data-dx-header] .dxIconBtn {
    flex: 0 0 36px !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    padding: 0 !important;
    border-radius: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
  }

  [data-dx-header] .dxBurger {
    flex: 0 0 40px !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    padding: 0 !important;
    border-radius: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  [data-dx-header] .dxBurgerLabel {
    display: none !important;
  }
}

@media (max-width: 370px) {
  [data-dx-header] .dxBrandText {
    max-width: 118px !important;
  }

  [data-dx-header] .dxBrandText strong {
    max-width: 118px !important;
    font-size: 14px !important;
  }

  [data-dx-header] .dxBrandText small {
    display: none !important;
  }
}