/* ============================================================
   FooyDeuk — Responsive (couche finale, chargée en dernier)

   Approche mobile-first appliquée a posteriori : on cible
   - desktop par défaut (déjà couvert par les CSS de composants)
   - tablette ≤ 1024px (2 colonnes → 1, sidebars qui passent en dessous)
   - mobile ≤ 768px (1 colonne, fonts réduites, sticky-bars dédiés)
   - petit mobile ≤ 480px (densification fine)

   Les breakpoints sont harmonisés ici (1024 / 768 / 480) — les vieilles
   media queries dans les CSS de pages restent en place mais sont
   complétées ici.
   ============================================================ */

/* =========================================================
   ====== TABLETTE (≤ 1024px) ======
   Les grids 2 colonnes passent à 1, sidebars repositionnées.
   ========================================================= */
@media (max-width: 1024px) {

  /* --- HOME (index) --- */
  .hero-immersive { min-height: calc(100svh - var(--header-h)); padding: 40px 0; }
  .hero-i-stack { flex-direction: column; text-align: center; gap: 24px; }
  .hero-i-text h1 { font-size: clamp(2rem, 7vw, 4rem); }
  .hero-i-actions { justify-content: center; flex-wrap: wrap; }
  .hood-mosaic { grid-template-columns: 1fr 1fr; grid-auto-rows: 220px; }
  .hood-mosaic .t-big,
  .hood-mosaic .t-tall,
  .hood-mosaic .t-wide { grid-column: auto; grid-row: auto; }
  .vibes-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .usp-v2-grid { grid-template-columns: 1fr 1fr; gap: 18px; }
  .cta-v2-box { grid-template-columns: 1fr; padding: 36px 28px; gap: 26px; }
  .cta-v2-visual { display: none; }

  /* --- LISTINGS --- */
  .filter-row1 { flex-wrap: wrap; gap: 10px; }
  .filter-row1 .searchbar-mini { flex: 1 1 100%; order: -1; }
  .filter-row2 { flex-direction: column; align-items: stretch; gap: 14px; }
  .filter-row2 .quick-selects { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
  .filter-divider { display: none; }
  .results-controls { flex-wrap: wrap; gap: 10px; }

  /* --- PROPERTY --- */
  .prop-page .prop-body { grid-template-columns: 1fr; }
  .prop-sidebar { position: static; margin-top: 28px; }
  .prop-gallery { grid-template-columns: 1fr 1fr; grid-template-rows: 200px 200px; }
  .prop-gallery .gal-main { grid-row: span 1; }
  .stats-tiles { grid-template-columns: 1fr 1fr; }

  /* --- NEIGHBORHOOD --- */
  .nb-grid { grid-template-columns: 1fr; gap: 32px; }
  .nb-sidebar { position: static; }
  .nb-stat-grid { grid-template-columns: 1fr 1fr; gap: 0; }
  .nb-stat { padding: 14px; border-bottom: 1px solid var(--border-soft); }
  .nb-stat:nth-child(2n) { border-right: none; }
  .nb-stat:nth-last-child(-n+2) { border-bottom: none; }

  /* --- AGENT detail --- */
  .agent-hero { grid-template-columns: 1fr; text-align: center; }
  .agent-photo-big { margin: 0 auto; }
  .agent-stats { grid-template-columns: 1fr 1fr; }
  .agent-body { grid-template-columns: 1fr; gap: 32px; }
  .agent-sidebar { position: static; }

  /* --- MAP (la carte passe en dessous de la liste) --- */
  .map-page { grid-template-columns: 1fr; }
  .map-list { max-height: none; }
  .map-canvas { height: 60vh; min-height: 380px; }

  /* --- DASHBOARD --- */
  .dash { grid-template-columns: 1fr; }
  .dash-side {
    position: static;
    height: auto;
    max-height: none;
    overflow-y: visible;
    border-right: none;
    border-bottom: 1px solid var(--border-soft);
    padding: 16px 18px;
    margin-bottom: 0;
  }
  .dash-side-label { padding: 0 8px; margin: 12px 0 4px; }
  .dash-nav { display: flex; flex-wrap: wrap; gap: 6px; }
  .dash-nav a { padding: 8px 12px; font-size: .82rem; min-height: 38px; }
  .dash-nav a.logout { margin-top: 8px; padding-top: 8px; }
  .dash-main { padding: 22px 18px 60px; }
  .stat-cards { grid-template-columns: 1fr 1fr; gap: 12px; }
  .grid-2 { grid-template-columns: 1fr; }
  .visit-row { grid-template-columns: 48px 1fr auto; gap: 10px; }
  .activity-item .desc { font-size: .8rem; }
  .panel { padding: 18px 16px; }

  /* --- PROFILE --- */
  .profile-grid { grid-template-columns: 1fr; gap: 24px; }
  .profile-side { position: static; }
  .profile-tabs { display: flex; flex-direction: row; flex-wrap: wrap; gap: 6px; overflow-x: auto; }
  .profile-tab { flex: 0 0 auto; padding: 8px 14px; font-size: .84rem; }

  /* --- ABOUT --- */
  .story { grid-template-columns: 1fr; gap: 28px; }
  .usp-grid { grid-template-columns: 1fr 1fr; }
  .stat-strip { grid-template-columns: 1fr 1fr; gap: 16px; }
  .timeline { grid-template-columns: 1fr; }

  /* --- CONTACT --- */
  .contact-grid { grid-template-columns: 1fr; }
  .faq-grid { grid-template-columns: 1fr; }

  /* --- LEGAL --- */
  .legal-grid { grid-template-columns: 1fr; }
  .legal-side { position: static; display: flex; gap: 8px; flex-wrap: wrap; }

  /* --- MY-LISTINGS / MY-REQUESTS --- */
  .ml-head, .req-head { flex-direction: column; align-items: stretch; gap: 14px; }
  .ml-head > div:last-child { display: flex; gap: 8px; }
  .ml-head > div:last-child .btn { flex: 1; justify-content: center; min-height: 44px; }
  .ml-stats, .req-stats { grid-template-columns: 1fr 1fr; gap: 12px; }
  .interest-row { grid-template-columns: 1fr; gap: 12px; }

  /* --- URGENT BAR (dashboard / my-listings) — stack en mobile --- */
  .urgent-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 18px;
  }
  .urgent-bar .meta { width: 100%; }
  .urgent-bar .actions { width: 100%; }
  .urgent-bar .urgent-cta { width: 100%; justify-content: center; }

  /* --- 404 --- */
  .err-grid { grid-template-columns: 1fr; text-align: center; }
  .err-visual { max-width: 280px; margin: 0 auto; }

  /* --- WALLET --- */
  .hero-grid { grid-template-columns: 1fr; gap: 18px; }
  .stats-grid { grid-template-columns: 1fr 1fr; }

  /* --- SUBSCRIPTIONS --- */
  .plans { grid-template-columns: 1fr; }

  /* --- KYC --- */
  .uploads { grid-template-columns: 1fr; }
}


/* =========================================================
   ====== MOBILE (≤ 768px) ======
   Single column partout, fonts plus petites, sticky-bars adaptées.
   ========================================================= */
@media (max-width: 768px) {

  /* --- Containers globaux --- */
  .container { padding: 0 16px; }
  section { padding: clamp(28px, 6vw, 44px) 0; }

  /* --- HOME --- */
  /* M17 W3 : hero mobile à 70svh — laisse apparaître la section "sélection"
     en bas du viewport, incite au scroll plutôt que de remplir tout l'écran */
  .hero-immersive { min-height: calc(70svh - var(--header-h)); padding: 32px 0; }
  .hero-logo { width: 100px; height: 100px; }
  .hero-i-text h1 { font-size: clamp(1.8rem, 8vw, 2.6rem); line-height: 1.05; }
  .hero-i-text .lead { font-size: 0.95rem; line-height: 1.55; }
  .hero-i-eyebrow { font-size: .8rem; }
  .hero-i-actions { width: 100%; flex-direction: column; }
  .hero-i-actions .btn { width: 100%; justify-content: center; }
  .listings-v2-head { flex-direction: column; align-items: stretch; gap: 12px; }
  .listings-v2-head .head-cta { align-self: flex-start; }
  .cat-row-v2 { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
  .cat-row-v2::-webkit-scrollbar { display: none; }
  .cat-pill-v2 { flex: 0 0 auto; }
  .cards-grid-v2 { grid-template-columns: 1fr; gap: 18px; }
  .hood-mosaic { grid-template-columns: 1fr; grid-auto-rows: 200px; }
  .vibes-grid { grid-template-columns: 1fr 1fr; }
  .usp-v2-grid { grid-template-columns: 1fr; gap: 14px; }
  .quiz-card { padding: 26px 22px; }
  .cta-v2-box { padding: 28px 22px; }
  .cta-v2-actions { flex-direction: column; gap: 10px; }
  .cta-v2-actions .btn { width: 100%; justify-content: center; }

  /* --- LISTINGS --- */
  .filter-shell { padding: 12px 0; }
  .filter-row1 { gap: 8px; }
  .segmented { width: 100%; }
  .segmented button { flex: 1; padding: 9px 8px; font-size: .82rem; }
  .filter-btn { padding: 9px 12px; font-size: .82rem; }
  .filter-row2 .quick-selects { grid-template-columns: 1fr 1fr; }
  .type-chips { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 6px; }
  .type-chips::-webkit-scrollbar { display: none; }
  .t-chip { flex: 0 0 auto; }
  .results-bar { flex-direction: column; align-items: stretch; gap: 12px; }
  .cards-grid { grid-template-columns: 1fr; gap: 18px; }

  /* --- PROPERTY --- */
  .prop-page { padding-bottom: 90px; }  /* place pour le sticky bottom-bar mobile */
  .prop-gallery { grid-template-columns: 1fr; grid-template-rows: auto; gap: 8px; }
  .prop-gallery .gal-main { aspect-ratio: 4/3; }
  .prop-gallery .gal-thumb { aspect-ratio: 4/3; }
  .highlights-chips { gap: 6px; }
  .stats-tiles { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat-tile { padding: 14px 12px; }
  .stat-tile .num { font-size: 1.4rem; }
  .tabs-scrollspy { overflow-x: auto; gap: 4px; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .tabs-scrollspy::-webkit-scrollbar { display: none; }
  .tabs-scrollspy a { flex: 0 0 auto; padding: 10px 14px; font-size: .84rem; }
  .visit-cal-grid { grid-template-columns: repeat(7, 1fr); gap: 4px; }
  .visit-cal-day { font-size: .78rem; padding: 6px 2px; }
  /* CTA Interest : passe en colonne sur mobile pour que le bouton ne dévore
     pas la largeur de la zone texte (sinon "Ce bien vous intéresse?" se réduit
     à 1 caractère par ligne). */
  .interest-cta {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 16px;
    text-align: center;
  }
  .interest-cta .info .head { font-size: 1rem; }
  .interest-cta .info .sub { font-size: 0.84rem; line-height: 1.45; }
  .interest-cta .btn-interest,
  .interest-cta button {
    width: 100%;
    justify-content: center;
    white-space: normal;        /* autorise le retour à la ligne si nécessaire */
    padding: 13px 20px;
  }

  /* Doublon de CTA : la sidebar contact descend sous le contenu en mobile et
     refait apparaître le bouton "Je suis intéressé(e)" + le prix.
     Comme on a déjà le sticky bottom-bar avec prix + CTA, on masque la box
     duplicate de la sidebar pour ne pas saturer la page. */
  .contact-card { display: none; padding: 18px; }

  /* --- NEIGHBORHOOD --- */
  .nb-cover { height: 50vh; min-height: 320px; }
  .nb-cover h1 { font-size: clamp(2rem, 8vw, 3rem); }
  .nb-cover .tagline { font-size: 0.96rem; }
  .nb-cover .meta { gap: 8px; }
  .nb-section { padding: 22px 18px; }
  .nb-highlights { grid-template-columns: 1fr; }
  .nb-listings { grid-template-columns: 1fr; }
  .score-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .resident-reviews { grid-template-columns: 1fr; }

  /* --- AGENT detail --- */
  .agent-cover { padding: 44px 0 56px; }
  .agent-photo-big { width: 140px; height: 140px; }
  .agent-headline h1 { font-size: clamp(1.6rem, 7vw, 2.2rem); }
  .agent-headline .meta { justify-content: center; gap: 10px; }
  .agent-headline .langs { justify-content: center; gap: 6px; }
  .agent-stats { grid-template-columns: 1fr 1fr; gap: 8px; }
  .agent-section { padding: 22px 18px; }
  .portfolio-grid { grid-template-columns: 1fr; gap: 16px; }

  /* --- AGENTS list --- */
  .ag-grid { grid-template-columns: 1fr; gap: 18px; }
  .ag-toolbar { flex-direction: column; align-items: stretch; padding: 12px; }
  .ag-search { min-width: auto; flex: 0 1 auto; }
  .ag-count { padding: 4px 0 0; }
  .agent-cta { grid-template-columns: 1fr; padding: 28px 22px; }
  .agent-cta-visual { display: none; }

  /* --- MAP --- */
  .map-page { grid-template-columns: 1fr; }
  .map-list { padding: 14px; max-height: none; }
  .map-canvas { height: 52vh; min-height: 320px; }
  /* 3 modes géo : on garde la grille 3 cols même sur mobile, juste compact */
  .loc-modes .lm-tabs { grid-template-columns: repeat(3, 1fr); gap: 3px; }
  .lm-tab { padding: 9px 4px 8px; gap: 3px; }
  .lm-tab .lm-sub { display: none; }
  .lm-tab .lm-ic { width: 26px; height: 26px; font-size: 0.78rem; }
  .lm-tab .lm-lbl { font-size: 0.72rem; }
  .map-controls { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 6px; }
  .map-controls::-webkit-scrollbar { display: none; }
  .map-chip { flex: 0 0 auto; }

  /* --- DASHBOARD --- */
  .dash-greet { flex-direction: column; align-items: stretch; gap: 14px; }
  .dash-greet h2 { font-size: 1.4rem; }
  .stat-cards { grid-template-columns: 1fr 1fr; }
  .stat-card .num { font-size: 1.5rem; }
  .panel { padding: 20px 16px; }

  /* --- MESSAGES (3 colonnes → 1 visible à la fois)
     Les classes utilisées par messages-core.js sont `is-thread` et
     `is-info-open` (pas show-thread / show-info — ces noms étaient
     incorrects dans une version antérieure). --- */
  .tg-page {
    grid-template-columns: 1fr !important;
    height: 100vh;
    height: 100dvh;
  }
  .tg-sidebar { width: 100%; height: 100%; min-width: 0; }
  .tg-thread { display: none; height: 100%; padding-bottom: env(safe-area-inset-bottom, 0); }
  .tg-info { display: none; }
  .tg-page.is-thread .tg-sidebar { display: none; }
  .tg-page.is-thread .tg-thread { display: flex; }
  .tg-page.is-info-open .tg-info {
    display: flex;
    position: fixed;
    inset: 0;
    width: 100vw;
    max-width: 100vw;
    z-index: 30;
    background: var(--surface);
  }
  /* Bulles : empêche le débordement horizontal */
  .tg-msg { max-width: 82%; }
  .tg-msg-photo { width: 100%; max-width: 100%; height: auto; aspect-ratio: 4/3; }
  .tg-thread-body { padding: 12px 12px 16px; }
  .tg-thread-head { padding: 10px 12px; gap: 10px; }
  .tg-th-actions { gap: 0; }
  .tg-input { padding: 10px 10px 12px; gap: 6px; }
  .tg-input button { width: 38px; height: 38px; }
  .tg-pinned-bar { padding: 8px 12px; }
  .tg-search-bar { padding: 8px 12px; }
  /* Composer stable avec clavier mobile */
  /* Reply quote ne déborde pas dans la bulle */
  .tg-reply-quote .preview { max-width: 180px; }
  .tg-msg-prop { max-width: 100%; grid-template-columns: 64px 1fr; }
  .tg-msg-prop img { width: 64px; height: 48px; }

  /* --- PROFILE --- */
  .form-grid { grid-template-columns: 1fr; gap: 14px; }
  .pane-head h2 { font-size: 1.4rem; }
  .theme-grid { grid-template-columns: 1fr 1fr; }
  .toggle-row { flex-direction: row; align-items: center; gap: 12px; padding: 14px 0; }

  /* --- FAVORITES --- */
  .sugg-head { flex-direction: column; align-items: stretch; gap: 12px; }

  /* --- NOTIFICATIONS --- */
  .notif-grid { grid-template-columns: 1fr; }
  .notif-side { display: flex; flex-direction: row; overflow-x: auto; padding-bottom: 6px; gap: 6px; }
  .notif-side::-webkit-scrollbar { display: none; }
  .notif-tab { flex: 0 0 auto; }

  /* --- ABOUT --- */
  .usp-grid { grid-template-columns: 1fr; gap: 14px; }
  .stat-strip { grid-template-columns: 1fr 1fr; }
  .stat-card-v3 .num { font-size: 1.6rem; }
  .timeline-wrap { overflow-x: auto; }
  .timeline { grid-template-columns: 1fr; padding-left: 32px; }
  .tl-item { padding: 18px; }

  /* --- CONTACT --- */
  .info-item { gap: 10px; }
  .form-card form .form-row { grid-template-columns: 1fr; gap: 12px; }

  /* --- HELP --- */
  .help-hero h1 { font-size: clamp(1.6rem, 6vw, 2.2rem); }
  .help-categories { grid-template-columns: 1fr 1fr; gap: 12px; }
  .help-cat { padding: 18px 16px; }
  .help-cat h3 { font-size: 1rem; }
  .help-section { padding: 22px 18px; }
  .help-contact { padding: 28px 20px; }
  .help-contact .actions { flex-direction: column; gap: 10px; }
  .help-contact .btn { width: 100%; justify-content: center; }

  /* --- LEGAL --- */
  .legal-section { padding: 26px 18px; }
  .legal-section h2 { font-size: 1.3rem; }

  /* --- LOGIN --- */
  .auth { grid-template-columns: 1fr; }
  .auth-side { padding: 30px 22px 0;
    min-height: auto;
    text-align: center; display: none; }
  .auth-side .auth-hero h1 { font-size: clamp(1.5rem, 6vw, 2rem); }
  .auth-quote, .auth-perks { display: none; }
  .auth-main { padding: 24px 22px 40px; }
  .auth-top { margin-bottom: 18px; left: 16px; right: 16px; top: 16px; }
  .form .form-row { grid-template-columns: 1fr; gap: 12px; }

  /* --- PUBLIER / EDIT-LISTING --- */
  .pub-grid { grid-template-columns: 1fr; gap: 18px; }
  .pub-stepper {
    position: static;
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    padding: 12px;
    gap: 8px;
  }
  .pub-stepper::-webkit-scrollbar { display: none; }
  .pub-step { flex: 0 0 auto; padding: 8px 12px; font-size: .82rem; }
  .pub-section { padding: 22px 18px; }
  .pub-section-head { gap: 12px; }
  .pub-section-num { width: 36px; height: 36px; font-size: 1.05rem; }
  .pub-row.cols-2,
  .pub-row.cols-4 { grid-template-columns: 1fr; gap: 14px; }
  .type-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .amenities-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .pub-actions { flex-direction: column; align-items: stretch; gap: 14px; }
  .pub-actions-btns { flex-direction: column-reverse; gap: 8px; }
  .pub-actions-btns button,
  .pub-actions-btns a { width: 100%; justify-content: center; }
  .choice-cards { grid-template-columns: 1fr; gap: 10px; }

  /* --- WALLET --- */
  .wallet-hero { padding: 22px 18px; }
  .balance { font-size: clamp(2rem, 9vw, 3rem); }
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .tx-head { flex-direction: column; align-items: stretch; gap: 10px; }
  .tx-filters { overflow-x: auto; }

  /* --- SUBSCRIPTIONS --- */
  .quota-stat { grid-template-columns: 1fr; gap: 10px; }
  .plan-card { padding: 22px 18px; }
  .plan-card .price { font-size: 1.6rem; }

  /* --- KYC --- */
  .kyc-wrap { padding: 24px 18px; }
  .upload-zone { padding: 22px 16px; }
  .info-box { font-size: .88rem; }

  /* --- 404 --- */
  .err .code { font-size: clamp(4rem, 18vw, 6rem); }
  .err h1 { font-size: clamp(1.5rem, 6vw, 2rem); }
  .err-actions { flex-direction: column; gap: 10px; }
  .err-actions .btn { width: 100%; justify-content: center; }
  .err-suggest .links { grid-template-columns: 1fr 1fr; gap: 8px; }

  /* --- Comparator floating bar --- */
  .comparator-bar { padding: 10px 14px; gap: 8px; }
  .comparator-bar .cmp-slots { gap: 6px; }
  .comparator-bar .cmp-slot { width: 44px; height: 44px; }

  /* --- Sticky bottom-bar property page --- */
  .sticky-actions {
    bottom: 14px;
    left: 14px;
    right: 14px;
    border-radius: var(--r);
    padding: 10px 14px;
  }
  .sticky-actions .price { font-size: 1rem; }
}


/* =========================================================
   ====== PETIT MOBILE (≤ 480px) ======
   Densification finale, 1 colonne stricte, fonts mini.
   ========================================================= */
@media (max-width: 480px) {

  .container { padding: 0 14px; }

  /* --- HOME --- */
  /* M17 W3 : hero ultra-mobile aussi à 70svh pour laisser respirer le bas */
  .hero-immersive { min-height: calc(70svh - var(--header-h)); padding: 24px 0; }
  .hero-logo { width: 80px; height: 80px; }
  .vibes-grid { grid-template-columns: 1fr; }
  .vibe-card { padding: 22px 18px; }

  /* --- AGENT, AGENTS --- */
  .agent-stats { grid-template-columns: 1fr; gap: 8px; }

  /* --- DASHBOARD --- */
  .stat-cards { grid-template-columns: 1fr; }

  /* --- PROPERTY --- */
  .stats-tiles { grid-template-columns: 1fr 1fr; }
  .highlights-chips .chip { font-size: .78rem; padding: 6px 12px; }

  /* --- LISTINGS --- */
  .filter-row2 .quick-selects { grid-template-columns: 1fr; }

  /* --- 404 --- */
  .err-suggest .links { grid-template-columns: 1fr; }

  /* --- WALLET / SUBS / STATS --- */
  .stats-grid,
  .quota-stat { grid-template-columns: 1fr; }

  /* --- ABOUT --- */
  .stat-strip { grid-template-columns: 1fr; }

  /* --- PUBLIER --- */
  .type-grid,
  .amenities-grid { grid-template-columns: 1fr; }

  /* --- HELP --- */
  .help-categories { grid-template-columns: 1fr; }

  /* --- MESSAGES --- */
  .tg-sidebar-head { padding: 10px 12px; }
  .tg-me-name { font-size: .92rem; }

  /* --- Touch targets minimum 44×44 --- */
  .icon-btn { min-width: 40px; min-height: 40px; }
  .nav-link { padding: 10px 12px; }
  .btn-sm { padding: 10px 14px; font-size: .84rem; }

  /* --- Theme toggle compact --- */
  .menu-toggle { display: inline-grid; }
}


/* =========================================================
   ====== ULTRA PETIT (≤ 360px) ======
   Anti-débordement sur les anciens téléphones (iPhone SE etc.).
   ========================================================= */
@media (max-width: 360px) {
  .container { padding: 0 12px; }
  h1 { font-size: clamp(1.4rem, 8vw, 1.9rem); }
  h2 { font-size: 1.2rem; }
  .brand-text { font-size: 1rem; }
  .nav-actions { gap: 2px; }
}


/* =========================================================
   ====== FINITIONS PAR PAGE (utilisateur connecté) ======
   Couvre :
   - login / publier / edit-listing / kyc / wallet / subscriptions
   - dashboard / favorites / my-listings / my-requests
   - profile / notifications / messages
   ========================================================= */

/* ===== LOGIN — Tablette : conserver la moitié visuelle, mobile : 100% form ===== */
@media (max-width: 1024px) and (min-width: 769px) {
  .auth { grid-template-columns: 1fr; }
  .auth-side {
    min-height: 220px;
    padding: 28px 32px;
    display: flex !important;
  }
  .auth-side .auth-perks { margin-top: 14px; }
  .auth-side .auth-quote { margin-top: 14px; }
  .auth-main { padding: 36px 32px 48px; max-width: 720px; }
  .auth-top { left: 24px; right: 24px; top: 18px; }
}
@media (max-width: 768px) {
  .auth-main { padding: 72px 18px 40px; }
  .auth-tabs { margin-bottom: 22px; }
  .auth-tab { padding: 11px 8px; font-size: .88rem; }
  .pane h2 { font-size: clamp(1.3rem, 5.5vw, 1.7rem); }
  .pane > p { margin-bottom: 20px; font-size: .92rem; }
  .field-g input { padding: 12px 14px; font-size: .94rem; }
  .form-row-flex { gap: 8px; }
  .social-login { grid-template-columns: 1fr; gap: 8px; }
}

/* ===== PUBLIER / EDIT-LISTING — Stepper, sections, media grid ===== */
@media (max-width: 1024px) {
  .pub-grid { grid-template-columns: 1fr; gap: 18px; }
  .pub-stepper {
    position: sticky;
    top: var(--header-h);
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    gap: 8px;
    padding: 10px 12px;
    z-index: 20;
    border-radius: 14px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .pub-stepper::-webkit-scrollbar { display: none; }
  .pub-stepper-title { display: none; }
  .pub-step {
    flex: 0 0 auto;
    padding: 8px 14px 8px 8px;
    font-size: .84rem;
    white-space: nowrap;
  }
  .pub-progress { display: none; }
  .pub-row.cols-3, .pub-row.cols-4 { grid-template-columns: 1fr 1fr; }
  .type-grid { grid-template-columns: repeat(3, 1fr); }
  .amenities-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .pub-main { padding: 18px 0 60px; }
  .pub-head { padding: 32px 0 22px; }
  .pub-section { padding: 22px 18px; border-radius: 18px; }
  .pub-section-head { gap: 12px; padding-bottom: 16px; margin-bottom: 18px; }
  .pub-section-num { width: 36px; height: 36px; font-size: 1rem; border-radius: 12px; }
  .pub-section-head h2 { font-size: 1.05rem; }
  .pub-section-head p { font-size: .82rem; }
  .pub-row { gap: 14px; margin-bottom: 14px; }
  .pub-row.cols-2, .pub-row.cols-3, .pub-row.cols-4 { grid-template-columns: 1fr; }
  .choice-card { padding: 14px 14px; }
  .type-card { padding: 14px 10px; }
  .photo-drop { padding: 28px 18px; }
  .photo-drop .ic { width: 54px; height: 54px; font-size: 1.4rem; }
  .photo-drop h4 { font-size: 1rem; }
  .photo-previews { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .pub-actions {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    padding: 22px 20px;
    gap: 14px;
  }
  .pub-actions-btns { flex-direction: column-reverse; width: 100%; gap: 8px; }
  .pub-actions-btns button,
  .pub-actions-btns a { width: 100%; justify-content: center; padding: 13px 18px; min-height: 46px; }
  .stepper { width: 100%; justify-content: space-between; }
  .stepper input { flex: 1; }
  .switch-row { gap: 12px; padding: 12px 0; }
  .doc-upload { padding: 12px 14px; gap: 12px; }
  .doc-upload .ic { width: 38px; height: 38px; }
  /* edit-listing — media tiles */
  .media-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
  .media-tile .m-handle, .media-tile .m-remove,
  .media-tile .m-cover-btn { width: 28px; height: 28px; }
  .media-tile .m-cover-btn { left: 42px; }
}
@media (max-width: 480px) {
  .photo-previews { grid-template-columns: 1fr; }
  .media-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .pub-section { padding: 18px 14px; }
  .pub-section-head h2 { font-size: 1rem; }
  .pub-head h1 { font-size: 1.4rem; }
}

/* ===== KYC ===== */
@media (max-width: 768px) {
  .kyc-wrap { padding: 20px 16px 60px; }
  .kyc-form { padding: 22px 18px; }
  .uploads { grid-template-columns: 1fr; gap: 12px; }
  .upload-zone { padding: 22px 16px; min-height: 130px; }
  .kyc-status { padding: 14px 16px; gap: 12px; flex-direction: row; }
  .kyc-status .title { font-size: 1rem; }
  .kyc-status .desc { font-size: .84rem; }
  .ocr-result { padding: 14px; font-size: .85rem; }
  .submit-btn { padding: 13px; font-size: 1rem; min-height: 46px; }
}
@media (max-width: 480px) {
  .kyc-status { flex-direction: column; gap: 8px; }
  .kyc-status i { font-size: 1.3rem; }
}

/* ===== WALLET ===== */
@media (max-width: 1024px) {
  .wallet-wrap { padding: 24px 18px 60px; }
  .wallet-hero { padding: 28px 24px; }
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
}
@media (max-width: 768px) {
  .wallet-wrap { padding: 18px 14px 60px; }
  .wallet-hero { padding: 22px 18px; border-radius: var(--r-lg); }
  .wallet-hero .label { font-size: .78rem; }
  .wallet-hero .balance { font-size: clamp(2rem, 9vw, 2.8rem); }
  .wallet-hero .balance small { font-size: .95rem; }
  .wallet-hero .actions { gap: 8px; flex-direction: column; }
  .wallet-hero .actions .btn-warm,
  .wallet-hero .actions .btn-ghost {
    width: 100%;
    padding: 12px 18px;
    min-height: 46px;
    text-align: center;
  }
  .sparkline { height: 80px; }
  .stat-card { padding: 14px 16px; }
  .stat-card .value { font-size: 1.4rem; }
  .stat-card .icon { width: 32px; height: 32px; margin-bottom: 6px; }
  .tx-list { margin-top: 26px; border-radius: var(--r); }
  .tx-head { padding: 14px 16px; flex-direction: column; align-items: stretch; gap: 10px; }
  .tx-filters { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .tx-filters::-webkit-scrollbar { display: none; }
  .tx-filters button { flex: 0 0 auto; }
  .tx-row { padding: 12px 16px; gap: 10px; grid-template-columns: 36px 1fr auto; }
  .tx-icon { width: 32px; height: 32px; font-size: .85rem; }
  .tx-amount { font-size: 1rem; white-space: nowrap; }
  .tx-meta .tx-kind { font-size: .9rem; }
  .tx-meta .tx-note {
    font-size: .78rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* Modal topup */
  .topup-modal { padding: 14px; }
  .topup-card { padding: 22px 18px; border-radius: var(--r); }
  .topup-card h3 { font-size: 1.15rem; }
  .topup-presets { gap: 6px; }
  .topup-presets button { padding: 10px 6px; min-width: 70px; font-size: .85rem; min-height: 42px; }
  .topup-card .btn-row { flex-direction: column-reverse; gap: 8px; }
  .topup-card .btn-row button,
  .topup-card .btn-row a { width: 100%; justify-content: center; min-height: 44px; }
}
@media (max-width: 480px) {
  .stats-grid { grid-template-columns: 1fr; }
  .tx-row { grid-template-columns: 32px 1fr auto; gap: 8px; padding: 10px 14px; }
  .tx-amount { font-size: .94rem; }
}

/* ===== SUBSCRIPTIONS ===== */
@media (max-width: 1024px) {
  .subs-wrap { padding: 24px 18px 60px; }
  .plans { grid-template-columns: 1fr; gap: 16px; }
  .quota-stat { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .subs-wrap { padding: 18px 14px 60px; }
  .stat-tile { padding: 14px 16px; }
  .stat-tile .value { font-size: 1.6rem; }
  .plan-card { padding: 22px 18px; border-radius: var(--r-lg); }
  .plan-card h3 { font-size: 1.2rem; }
  .plan-card .price { font-size: 1.8rem; margin: 10px 0 4px; }
  .plan-card .features { margin: 14px 0; }
  .plan-card .features li { padding: 7px 0; font-size: .9rem; }
  .plan-card button { padding: 12px; min-height: 46px; }
  .plan-card .ribbon { top: 12px; right: 12px; font-size: .72rem; padding: 3px 10px; }
  .subs-list { padding: 18px 16px; margin-top: 24px; }
  .sub-row { flex-wrap: wrap; gap: 8px; padding: 12px 0; }
  .sub-row .sub-status { flex-shrink: 0; }
}

/* ===== DASHBOARD — affinage ===== */
@media (max-width: 768px) {
  .dash-greet h2 { font-size: 1.3rem; }
  .dash-user { padding: 12px; gap: 10px; }
  .dash-user .avatar { width: 40px; height: 40px; font-size: .96rem; }
  .stat-card { padding: 16px; border-radius: var(--r); }
  .stat-card .ic { width: 36px; height: 36px; margin-bottom: 10px; }
  .stat-card .num { font-size: 1.45rem; }
  .panel-head { padding-bottom: 12px; margin-bottom: 14px; }
  .panel-head h3 { font-size: 1.02rem; }
  .activity-item { gap: 10px; padding: 10px 0; }
  .activity-item .ic { width: 36px; height: 36px; }
  .activity-item .title { font-size: .88rem; }
  .activity-item .time { font-size: .72rem; }
  .visit-row { gap: 10px; padding: 10px 0; grid-template-columns: 44px 1fr; }
  .visit-row > * { min-width: 0; }
  .visit-row .btn-sm { grid-column: 1 / -1; justify-self: stretch; text-align: center; }
  .premium-panel { padding: 22px 18px; }
  .premium-panel h3 { font-size: 1.1rem; }
  .alert-row { gap: 10px; }
  .alert-row .badge { font-size: .68rem; padding: 3px 8px; }
}
@media (max-width: 480px) {
  .stat-cards { grid-template-columns: 1fr; gap: 10px; }
  .dash-main { padding: 18px 14px 50px; }
  .dash-side { padding: 12px 14px; }
}

/* ===== FAVORITES ===== */
@media (max-width: 1024px) {
  .fav-toolbar { gap: 10px; padding: 12px; }
}
@media (max-width: 768px) {
  .fav-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .fav-segments {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    width: 100%;
  }
  .fav-segments::-webkit-scrollbar { display: none; }
  .fav-segments button {
    flex: 0 0 auto;
    padding: 8px 14px;
    white-space: nowrap;
  }
  .fav-toolbar .grow { display: none; }
  .fav-sort { width: 100%; justify-content: space-between; }
  .fav-sort select { flex: 1; min-width: 0; padding: 9px 30px 9px 12px; }
  .fav-clear {
    width: 100%;
    justify-content: center;
    padding: 10px;
    min-height: 44px;
  }
  .empty-fav { padding: 50px 22px; }
  .empty-fav .ic { width: 64px; height: 64px; font-size: 1.6rem; }
  .empty-fav h3 { font-size: 1.2rem; }
  .sugg-head { flex-direction: column; align-items: stretch; gap: 10px; }
  .sugg-head .head-cta { align-self: flex-start; }
}

/* ===== MY-LISTINGS — cards horizontales → empilées ===== */
@media (max-width: 1024px) {
  .ml-row {
    grid-template-columns: 130px 1fr;
    grid-template-areas:
      "img info"
      "stats stats"
      "actions actions";
    gap: 12px 14px;
    padding: 14px;
    align-items: start;
  }
  .ml-row .ml-img { grid-area: img; }
  .ml-row .ml-info { grid-area: info; align-self: center; }
  .ml-row .ml-stats-row {
    grid-area: stats;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }
  .ml-row .ml-stats-row .ml-stat-mini {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
    background: var(--bg-cream);
    padding: 8px 6px;
    border-radius: 12px;
  }
  [data-theme="dark"] .ml-row .ml-stats-row .ml-stat-mini { background: rgba(255,255,255,.04); }
  .ml-row .ml-actions {
    grid-area: actions;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 6px;
  }
}
@media (max-width: 768px) {
  .ml-wrap { padding: 22px 0 60px; }
  .ml-row {
    grid-template-columns: 110px 1fr;
    gap: 10px 12px;
    padding: 12px;
    border-radius: var(--r);
  }
  .ml-row .ml-img { border-radius: var(--r-sm); }
  .ml-info .title { font-size: .94rem; }
  .ml-info .meta { font-size: .76rem; gap: 6px; }
  .ml-stat-mini { padding: 6px 4px; font-size: .8rem; }
  .ml-stat-mini .num { font-size: 1rem; }
  .ml-stat-mini .lbl { font-size: .6rem; }
  .ml-action-btn { width: 40px; height: 40px; }
  .ml-empty { padding: 50px 22px; }
}
@media (max-width: 480px) {
  .ml-row { grid-template-columns: 96px 1fr; gap: 10px; padding: 10px; }
}

/* ===== MY-REQUESTS ===== */
@media (max-width: 1024px) {
  .req-toolbar { gap: 12px; }
  .req-search { flex: 1 1 100%; order: -1; }
  .req-tabs { width: 100%; }
}
@media (max-width: 768px) {
  .req-wrap { padding: 22px 0 60px; }
  .req-head h1 { font-size: 1.5rem; }
  .req-tabs { gap: 4px; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px; }
  .req-tabs::-webkit-scrollbar { display: none; }
  .req-tab { flex: 0 0 auto; padding: 8px 12px; font-size: .82rem; }
  .req-stats { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .req-stat { padding: 14px 12px; border-radius: 14px; }
  .req-stat .num { font-size: 1.3rem; }
  .req-stat .ic { width: 30px; height: 30px; margin-bottom: 8px; font-size: .82rem; }
  .req-stat .lbl { font-size: .74rem; }
  .req-card {
    grid-template-columns: 90px 1fr;
    gap: 12px;
    padding: 12px;
    align-items: start;
    border-radius: 14px;
  }
  .req-card .req-img { aspect-ratio: 1; }
  .req-info .title { font-size: .92rem; }
  .req-info .meta { font-size: .76rem; gap: 6px; margin-bottom: 6px; }
  .req-action {
    grid-column: 1 / -1;
    width: 100%;
  }
  .req-action button,
  .req-action a {
    width: 100%;
    justify-content: center;
    padding: 11px 14px;
    min-height: 44px;
  }
}
@media (max-width: 480px) {
  .req-stats { grid-template-columns: 1fr; gap: 8px; }
  .req-card { grid-template-columns: 78px 1fr; }
  .req-info .reason { font-size: .78rem; padding: 6px 10px; }
}

/* ===== PROFILE ===== */
@media (max-width: 1024px) {
  .profile-wrap { padding: 22px 0 60px; }
  .profile-grid { gap: 18px; }
  .profile-side {
    position: static;
    padding: 22px 18px;
  }
  .profile-tabs {
    flex-direction: row;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 4px;
    margin-top: 16px;
    padding-bottom: 4px;
  }
  .profile-tabs::-webkit-scrollbar { display: none; }
  .profile-tab {
    flex: 0 0 auto;
    padding: 9px 14px;
    font-size: .86rem;
    white-space: nowrap;
  }
  .profile-avatar-block { margin-bottom: 16px; }
  .profile-avatar { width: 88px; height: 88px; font-size: 2rem; }
}
@media (max-width: 768px) {
  .profile-pane { padding: 22px 18px; border-radius: 18px; }
  .pane-head { margin-bottom: 18px; }
  .pane-head h2 { font-size: 1.3rem; }
  .pane-head p { font-size: .9rem; }
  .form-grid { grid-template-columns: 1fr; gap: 12px; margin-bottom: 14px; }
  .form-group input, .form-group select, .form-group textarea {
    padding: 11px 12px;
    font-size: .92rem;
    min-height: 44px;
  }
  .pref-summary { grid-template-columns: 1fr; gap: 10px; }
  .pref-item { padding: 12px 14px; gap: 10px; }
  .toggle-row .meta .lbl { font-size: .9rem; }
  .toggle-row .meta .desc { font-size: .8rem; }
  .danger-zone { padding: 16px; margin-top: 24px; }
  .theme-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .theme-card { padding: 12px; }
  .theme-preview { height: 50px; }
  .completion-card { padding: 18px 16px; }
  .completion-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .completion-steps { grid-template-columns: 1fr; gap: 8px; }
}

/* ===== NOTIFICATIONS ===== */
@media (max-width: 1024px) {
  .notif-wrap { padding: 22px 0 60px; }
  .notif-grid { grid-template-columns: 1fr; gap: 16px; }
  .notif-side {
    position: static;
    flex-direction: row;
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 10px;
    gap: 4px;
  }
  .notif-side::-webkit-scrollbar { display: none; }
  .notif-tab {
    flex: 0 0 auto;
    width: auto;
    padding: 9px 14px;
    font-size: .84rem;
    white-space: nowrap;
  }
}
@media (max-width: 768px) {
  .notif-item {
    position: relative;
    grid-template-columns: 36px 1fr;
    grid-template-rows: auto auto;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 12px;
  }
  .notif-item .ic { width: 36px; height: 36px; font-size: .88rem; }
  .notif-item .notif-actions {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    margin-top: 4px;
  }
  .notif-item .notif-actions button { width: 34px; height: 34px; }
  .notif-body .title { font-size: .9rem; }
  .notif-body .desc { font-size: .82rem; }
  .notif-pane-head { padding: 16px 18px; flex-wrap: wrap; gap: 8px; }
  .notif-pane-head h2 { font-size: 1.1rem; }
  .notif-pane-head .actions button { padding: 7px 10px; font-size: .8rem; }
  .notif-list { padding: 6px; }
}

/* ===== MESSAGES — finitions tablette ===== */
@media (max-width: 1024px) and (min-width: 769px) {
  .tg-page { grid-template-columns: 300px 1fr; }
  .tg-page.is-info-open { grid-template-columns: 300px 1fr; }
  .tg-thread-head { padding: 10px 16px; }
  .tg-thread-body { padding: 14px 16px; }
}
@media (max-width: 480px) {
  .tg-sidebar-head { padding: 10px 12px; gap: 10px; }
  .tg-me-avatar { width: 36px; height: 36px; }
  .tg-sidebar-search { margin: 10px 12px 6px; padding: 9px 12px; }
  .tg-tabs { padding: 5px 10px; }
  .tg-tab { padding: 6px 10px; font-size: .74rem; }
  .tg-conversations { padding: 4px 6px 12px; }
  .tg-conv { padding: 8px; gap: 10px; grid-template-columns: 46px 1fr; }
  .tg-conv-avatar { width: 46px; height: 46px; }
  .tg-conv-name { font-size: .88rem; }
  .tg-conv-preview { font-size: .78rem; }
  .tg-thread-head { padding: 8px 10px; gap: 8px; }
  .tg-th-avatar { width: 36px; height: 36px; }
  .tg-th-name { font-size: .94rem; }
  .tg-th-status { font-size: .72rem; }
  .tg-msg {
    max-width: 86%;
    padding: 7px 11px 5px;
    font-size: .88rem;
  }
  .tg-input { padding: 8px 8px 10px; gap: 5px; }
  .tg-input button { width: 36px; height: 36px; font-size: .85rem; }
  .tg-input-text { padding: 5px 10px; border-radius: var(--r-lg); }
  .tg-input-text textarea { font-size: .9rem; }
  .tg-msg-photo { width: 100%; height: 180px; }
  /* Emoji picker doesn't overflow */
  .tg-emoji-pop {
    width: calc(100vw - 24px);
    max-width: 320px;
    right: 12px;
    bottom: 70px;
  }
}

/* =========================================================
   ====== TOUCH TARGETS — minimum 40px partout ======
   ========================================================= */
@media (max-width: 768px) {
  /* Boutons d'action de toutes ces pages */
  .req-tab, .fav-segments button, .profile-tab,
  .notif-tab, .pub-step, .tx-filters button,
  .auth-tab, .ml-action-btn, .tg-tab {
    min-height: 38px;
  }
  /* Switches : touch zone large */
  .toggle-switch, .switch { cursor: pointer; }
  /* Liens dans modales accessibles */
}

/* =========================================================
   ====== ANTI-DEBORDEMENT GLOBAL ======
   Empêche le scroll horizontal causé par des éléments
   inattendus (images sans max-width, code blocks, etc.)
   ========================================================= */
@media (max-width: 1024px) {
  html, body { overflow-x: hidden; max-width: 100vw; }
  /* Inputs ne dépassent jamais */
  input, textarea, select { max-width: 100%; }
  img, video, iframe, svg { max-width: 100%; }
  .container { max-width: 100%; }
}


/* =========================================================
   ============================================================
   ====== AGENT B — 13 PAGES PUBLIQUES (Sprint responsive) ======
   ============================================================
   Affinage final pour :
   index, listings, property, neighborhood, agent, agents,
   region, map, about, contact, help, legal, 404.
   ============================================================
   ========================================================= */


/* =========================================================
   ====== HOME — Refinements ======
   ========================================================= */

/* Tablette : searchbar v3 (6 cols) trop dense → bascule 2x2 dès 968 */
@media (max-width: 968px) {
  .searchbar-v3 {
    grid-template-columns: 1fr 1fr;
    padding: 10px;
    gap: 6px;
  }
  .searchbar-v3 .sb-tabs { grid-column: 1 / -1; margin-right: 0; }
  .searchbar-v3 .sb-tabs button { flex: 1; justify-content: center; }
  .searchbar-v3 .sb-field { padding: 8px 12px; }
  .searchbar-v3 .sb-field + .sb-field::before { display: none; }
  .searchbar-v3 .sb-go { grid-column: 1 / -1; width: 100%; justify-content: center; }
  .cmd-row { gap: 12px; }
}

/* Mobile : hero, vibes, mosaïque, CTA */
@media (max-width: 768px) {
  .hero-i-stack { padding-bottom: 24px; }
  .hero-i-trust { gap: 14px; font-size: 0.78rem; }
  .hero-i-trust .item i { width: 24px; height: 24px; font-size: 0.66rem; }
  .vibe-card { padding: 22px 18px; min-height: 0; }
  .hood-tile-v2 .info .name { font-size: 1rem; }
  .hood-tile-v2.t-big .info .name { font-size: 1.2rem; }
  .cmd-band { padding: 12px 0 14px; }
  .quiz-card { padding: 22px 18px; }
  .quiz-card h3 { font-size: 1.15rem; }
  .quiz-q { padding: 14px; }
  .quiz-q-options button { padding: 9px 14px; font-size: 0.86rem; }
}

/* Petit mobile : densification finale */
@media (max-width: 480px) {
  .searchbar-v3 { grid-template-columns: 1fr; }
  .searchbar-v3 .sb-tabs { width: 100%; }
  .hero-i-text h1 { line-height: 1.05; letter-spacing: -0.02em; }
  .hero-i-trust { display: none; }
  .listings-v2-head .head-cta { padding: 9px 14px; font-size: 0.8rem; }
  .quiz-card { padding: 18px 14px; }
  .hood-mosaic { grid-auto-rows: 160px; }
}


/* =========================================================
   ====== LISTINGS — Refinements ======
   ========================================================= */
@media (max-width: 768px) {
  .lst-head { padding: 24px 0 18px; }
  .lst-head h1 { font-size: clamp(1.4rem, 6vw, 2rem); }
  .lst-head-mini { gap: 10px; flex-wrap: wrap; font-size: 0.84rem; }
  .filter-shell { top: var(--header-h); padding: 10px 0; }
  .filter-row1 .filter-btn span:not(.filter-btn-badge) { display: none; }
  .filter-btn-badge { font-size: 0.72rem; padding: 1px 7px; }
  .results-bar h2 { font-size: 1rem; }
  .results-controls .sort-wrap select { font-size: 0.84rem; padding: 7px 28px 7px 12px; }
  .view-toggle button { padding: 7px 10px; }
  .pagination .page-more { width: 100%; justify-content: center; }
  /* Modal filtres avancés */
  .modal-overlay { padding: 12px; }
  .modal-head { padding: 16px 18px; }
  .modal-head h3 { font-size: 1.1rem; }
  .modal-body { padding: 18px; }
  .modal-foot { padding: 14px 18px; flex-wrap: wrap; gap: 10px; }
  .modal-foot .btn { flex: 1 1 140px; justify-content: center; }
  .range-inputs { grid-template-columns: 1fr 1fr; gap: 10px; }
  .chip-pick { padding: 9px 16px; font-size: 0.84rem; }
}

@media (max-width: 480px) {
  .range-inputs { grid-template-columns: 1fr; }
  .chip-row { gap: 6px; }
  .chip-pick { padding: 8px 14px; font-size: 0.8rem; }
  .amen-grid { grid-template-columns: 1fr; }
}


/* =========================================================
   ====== PROPERTY — Refinements ======
   ========================================================= */
@media (max-width: 1024px) {
  .gallery { height: auto; }
}

@media (max-width: 768px) {
  /* Header de bien : actions wrap proprement */
  .prop-actions-top { gap: 6px; }
  .prop-actions-top button { padding: 9px 14px; font-size: 0.8rem; }

  /* Galerie 1 colonne propre */
  .gallery {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    height: auto;
    gap: 8px;
  }
  .g-item { height: 200px; aspect-ratio: 16/10; }
  .g-item:nth-child(1) {
    grid-column: span 1;
    grid-row: span 1;
    aspect-ratio: 4/3;
    height: 240px;
  }

  /* Stats 2x2 strict */
  .stats-row,
  .stats-tiles { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat-tile { padding: 16px 14px; }
  .stat-tile .num { font-size: 1.35rem; }
  .stat-tile .ic { width: 32px; height: 32px; margin-bottom: 10px; font-size: 0.82rem; }

  /* Tabs scrollspy : bord-edge propre */
  .prop-tabs {
    margin-left: -16px;
    margin-right: -16px;
    padding: 0 16px;
    top: var(--header-h);
    max-width: 100vw;
  }
  .prop-tab { padding: 12px 14px; font-size: 0.82rem; }

  /* Highlights chips densifiés */
  .highlights-row { gap: 6px; }
  .highlight-chip { padding: 6px 12px 6px 6px; font-size: 0.78rem; }
  .highlight-chip i { width: 22px; height: 22px; font-size: 0.7rem; }

  /* Sidebar contact : padding réduit */
  .contact-price .num { font-size: 1.5rem; }
  .alt-actions { grid-template-columns: 1fr 1fr; gap: 6px; }

  /* Visit calendar */
  .visit-cal { grid-template-columns: repeat(7, 1fr); gap: 3px; }
  .visit-day { padding: 6px 2px; min-height: 48px; }
  .visit-day .day { font-size: 0.92rem; }
  .visit-day .dow, .visit-day .mon { font-size: 0.56rem; }

  /* Caractéristiques par catégories */
  .feats-categorized { grid-template-columns: 1fr; gap: 16px; }
  .nearby-grid { grid-template-columns: 1fr; gap: 10px; }

  /* Pull-quote */
  .pull-quote { padding: 18px 16px; font-size: 0.96rem; margin-left: 0; margin-right: 0; }

  /* Mortgage row */
  .mortgage-row { grid-template-columns: 1fr 1fr; gap: 10px; }
}

@media (max-width: 480px) {
  .g-item { height: 180px; }
  .g-item:nth-child(1) { height: 220px; }
  .stat-tile { padding: 14px 12px; }
  .stat-tile .num { font-size: 1.2rem; }
  .prop-collapsible > summary { padding: 12px 14px; font-size: 0.92rem; }
  .prop-collapsible > summary .helper-inline { display: none; }
  .prop-collapsible > *:not(summary) { padding: 0 14px 14px; }
  .visit-day .day { font-size: 0.84rem; }
  .review-card { padding: 14px; }
  .mortgage-row { grid-template-columns: 1fr; gap: 10px; }
}

@media (max-width: 360px) {
  .g-item { height: 160px; }
  .g-item:nth-child(1) { height: 200px; }
  .stats-row, .stats-tiles { gap: 8px; }
  .stat-tile { padding: 12px 10px; }
  .stat-tile .num { font-size: 1.1rem; }
  .stat-tile .lbl { font-size: 0.66rem; letter-spacing: 0.02em; }
}


/* =========================================================
   ====== NEIGHBORHOOD — Refinements ======
   ========================================================= */
@media (max-width: 768px) {
  .nb-cover { height: auto; min-height: 360px; padding: 30px 0; }
  .nb-cover .container { padding-bottom: 24px; }
  .nb-cover .crumbs { font-size: 0.78rem; margin-bottom: 12px; }
  .nb-cover h1 { font-size: clamp(1.9rem, 8vw, 2.8rem); line-height: 1.05; }
  .nb-cover .tagline { font-size: 0.95rem; max-width: none; }
  .nb-cover .meta { gap: 10px 14px; font-size: 0.86rem; }

  .score-tile { padding: 14px 12px; }
  .score-tile .val { font-size: 1.15rem; }

  .price-trend-svg { width: 100%; height: auto; }
  .price-trend-card { padding: 18px 16px; }

  .resident-card { padding: 18px; }
  .resident-card .quote { font-size: 0.92rem; }

  .nb-mood-tags { gap: 6px; }
  .nb-mood-tags span { font-size: 0.7rem; padding: 3px 10px; }

  .nb-section { padding: 20px 16px; }
}

@media (max-width: 480px) {
  .nb-cover h1 { font-size: clamp(1.7rem, 9vw, 2.2rem); }
  .nb-section { padding: 18px 14px; }
}

@media (max-width: 360px) {
  .score-grid { grid-template-columns: 1fr; }
}


/* =========================================================
   ====== AGENT detail — Refinements ======
   ========================================================= */
@media (max-width: 768px) {
  .agent-cover { padding: 36px 0 44px; }
  .agent-photo-big { width: 128px; height: 128px; }
  .agent-headline h1 { font-size: clamp(1.5rem, 7vw, 2rem); }
  .agent-headline .meta { gap: 8px; font-size: 0.84rem; flex-wrap: wrap; }
  .agent-headline .langs span { font-size: 0.72rem; padding: 3px 9px; }
  .agent-actions { gap: 8px; flex-wrap: wrap; }
  .agent-actions .btn { flex: 1 1 auto; min-width: 130px; justify-content: center; padding: 10px 14px; font-size: 0.86rem; }
  .agent-stats .num { font-size: 1.3rem; }
  .agent-stats .lbl { font-size: 0.7rem; }
  .agent-section { padding: 22px 16px; }
  .portfolio-grid { grid-template-columns: 1fr; gap: 14px; }
}

@media (max-width: 480px) {
  .agent-photo-big { width: 110px; height: 110px; }
  .agent-headline h1 { font-size: 1.5rem; }
}

@media (max-width: 360px) {
  .agent-stats { grid-template-columns: 1fr; }
  .agent-actions .btn { width: 100%; }
}


/* =========================================================
   ====== AGENTS list — Refinements ======
   ========================================================= */
@media (max-width: 1024px) {
  .ag-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
  .ag-toolbar { flex-wrap: wrap; gap: 10px; }
  .ag-search { flex: 1 1 200px; min-width: 0; }
}

@media (max-width: 768px) {
  .ag-grid { grid-template-columns: 1fr; gap: 16px; }
  .ag-toolbar { flex-direction: column; align-items: stretch; padding: 12px; gap: 10px; }
  .ag-search { width: 100%; flex: 0 1 auto; }
  .ag-sort, .ag-sort select { width: 100%; }
  .ag-card { padding: 18px; }
  .agent-cta { grid-template-columns: 1fr; padding: 28px 22px; gap: 18px; text-align: center; }
  .agent-cta h2 { font-size: clamp(1.3rem, 6vw, 1.8rem); }
}


/* =========================================================
   ====== MAP — Refinements ======
   ========================================================= */
@media (max-width: 1024px) {
  .map-page {
    grid-template-columns: 1fr;
    height: auto;
    min-height: calc(100vh - var(--header-h));
  }
  body:has(.map-page) { overflow: auto; height: auto; }
  .map-list { max-height: none; padding: 16px; border-right: none; border-bottom: 1px solid var(--border-soft); }
  .map-canvas { height: 60vh; min-height: 360px; position: relative; }
}

@media (max-width: 768px) {
  .map-list { padding: 14px; }
  .loc-modes { padding: 5px; margin-bottom: 12px; }
  .lm-tabs { gap: 3px; padding: 3px; }
  .lm-tab { padding: 9px 5px 7px; min-height: 52px; }
  .lm-tab .lm-ic { width: 24px; height: 24px; font-size: 0.72rem; }
  .lm-tab .lm-lbl { font-size: 0.7rem; }
  .lm-detail { padding: 10px 8px 6px; }
  .lm-status { padding: 7px 10px; font-size: 0.74rem; }

  .map-controls { padding-bottom: 8px; -webkit-overflow-scrolling: touch; }
  .map-chip { padding: 7px 12px; font-size: 0.78rem; flex: 0 0 auto; }

  .radius-slider-wrap { padding: 12px 4px; }
  .radius-slider-val { font-size: 0.84rem; }

  .mini-card { padding: 10px; gap: 10px; }
  .mini-card .img { width: 80px; height: 80px; flex-shrink: 0; }
  .mini-card .title { font-size: 0.86rem; line-height: 1.3; }
  .mini-card .price { font-size: 0.92rem; }
  .map-canvas { height: 56vh; min-height: 320px; }
  .map-legend { display: none; }
}

@media (max-width: 480px) {
  .lm-tab { padding: 8px 4px; }
  .lm-tab .lm-lbl { font-size: 0.66rem; }
  .map-canvas { height: 48vh; min-height: 280px; }
  .mini-card .img { width: 72px; height: 72px; }
}


/* =========================================================
   ====== ABOUT — Refinements ======
   ========================================================= */
@media (max-width: 768px) {
  .about-hero { padding: 50px 0 32px; text-align: center; }
  .about-hero h1 { font-size: clamp(1.7rem, 7vw, 2.4rem); }
  .about-hero .lead { font-size: 0.95rem; }
  .story-visual { aspect-ratio: 16/10; max-height: 320px; }
  .story-badge { padding: 14px 18px; font-size: 0.8rem; }
  .stat-card-v3 { padding: 20px 14px; }
  .stat-card-v3 .num { font-size: 1.5rem; }
  .stat-card-v3 .lbl { font-size: 0.74rem; }
  .tl-item { padding: 16px; }
  .tl-item h3 { font-size: 1rem; }
  .tl-item p { font-size: 0.88rem; }
}

@media (max-width: 480px) {
  .timeline { padding-left: 26px; }
  .tl-item::after { width: 12px; }
}


/* =========================================================
   ====== CONTACT — Refinements ======
   ========================================================= */
@media (max-width: 768px) {
  .info-card { padding: 26px 20px; }
  .info-card h3 { font-size: 1.2rem; }
  .info-item { padding: 12px; gap: 10px; }
  .info-item .ic { width: 36px; height: 36px; font-size: 0.86rem; }
  .form-card { padding: 24px 20px; }
  .form-card h3 { font-size: 1.2rem; }
  .faq-item summary { padding: 14px 18px; font-size: 0.92rem; }
  .faq p { font-size: 0.88rem; }
}


/* =========================================================
   ====== HELP — Refinements ======
   ========================================================= */
@media (max-width: 768px) {
  .help-hero { padding: 36px 0 28px; }
  .help-hero h1 { font-size: clamp(1.5rem, 6vw, 2rem); }
  .help-hero p { font-size: 0.95rem; }
  .help-search { padding: 10px 16px; }
  .help-section h2 { font-size: 1.25rem; }
  .help-contact { padding: 28px 20px; border-radius: 18px; margin-bottom: 36px; }
  .help-contact h3 { font-size: 1.25rem; }
  .help-contact .actions { flex-direction: column; }
  .help-contact .actions .btn { width: 100%; justify-content: center; }
}


/* =========================================================
   ====== LEGAL — Refinements ======
   La sidebar latérale devient un menu horizontal scrollable.
   ========================================================= */
@media (max-width: 768px) {
  .legal-wrap { padding: 24px 0 40px; }
  .legal-grid { gap: 14px; }
  .legal-side {
    position: static;
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    gap: 6px;
    padding: 10px;
    -webkit-overflow-scrolling: touch;
  }
  .legal-side::-webkit-scrollbar { display: none; }
  .legal-side a { flex: 0 0 auto; white-space: nowrap; padding: 8px 12px; font-size: 0.84rem; }
  .legal-content { padding: 22px 18px; font-size: 0.92rem; }
  .legal-section h2 { font-size: 1.25rem; }
  .legal-section h3 { font-size: 1.02rem; margin-top: 18px; }
}

@media (max-width: 480px) {
  .legal-content { padding: 18px 14px; border-radius: var(--r); }
  .legal-section ul { margin-left: 18px; }
}


/* =========================================================
   ====== 404 — Refinements ======
   ========================================================= */
@media (max-width: 768px) {
  .err { padding: 24px 0; }
  .err-grid { gap: 24px; }
  .err-text .code { font-size: clamp(4rem, 18vw, 6.5rem); margin-bottom: 12px; }
  .err-text h1 { font-size: clamp(1.4rem, 6vw, 1.9rem); }
  .err-text p { font-size: 0.95rem; }
  .err-visual { max-width: 240px; }
  .err-suggest { margin-top: 28px; padding-top: 20px; }
  .err-suggest a { padding: 7px 12px; font-size: 0.78rem; }
}

@media (max-width: 480px) {
  .err-visual { max-width: 180px; }
  .err-actions { width: 100%; }
  .err-actions .btn { width: 100%; }
}


/* =========================================================
   ====== STICKY ELEMENTS — empilement propre ======
   ========================================================= */
@media (max-width: 768px) {
  .filter-shell { top: var(--header-h); }
}


/* =========================================================
   ====== FORM CONTROLS — iOS no-zoom (16px min) ======
   ========================================================= */
@media (max-width: 768px) {
  .form-card input,
  .form-card textarea,
  .form-card select,
  .contact-form input,
  .contact-form textarea,
  .help-search input,
  .interest-modal input,
  .interest-modal textarea {
    font-size: 16px;
  }
}


/* =========================================================
   ====== FOOTER — Layout mobile ======
   ========================================================= */
@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
}
@media (max-width: 600px) {
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
  .footer-bottom-links { justify-content: center; flex-wrap: wrap; }
}


/* =========================================================
   ====== NAVBAR — Mobile compact ======
   ========================================================= */
@media (max-width: 900px) {
  /* Currency + lang pickers prennent trop de place sur tablette/mobile */
  .navbar .cur-picker,
  .navbar .lang-picker { display: none !important; }
}

@media (max-width: 768px) {
  .navbar .nav-links { display: none; }

  /* ===== Toolbar mobile : items alignés, gap régulier ===== */
  .navbar .nav-actions {
    gap: 6px;
    align-items: center;
  }

  /* Icon-buttons unifiés à 38×38 */
  .navbar .nav-actions .icon-btn {
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
    padding: 0;
    flex: 0 0 38px;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    box-sizing: border-box;
  }

  /* Cadre cohérent pour les icon-btn "nus" (loupe, cœur, burger) */
  .navbar .nav-actions .icon-btn:not([data-theme-toggle]) {
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--border-soft);
  }
  [data-theme="dark"] .navbar .nav-actions .icon-btn:not([data-theme-toggle]) {
    background: rgba(255, 255, 255, 0.04);
    box-shadow: inset 0 0 0 1px rgba(244, 167, 64, 0.20);
  }

  /* Sur mobile, on simplifie : on masque loupe + favoris (accessibles via drawer)
     pour laisser respirer les CTAs Connexion / Inscription */
  .navbar .nav-actions .nav-search,
  .navbar .nav-actions .nav-fav { display: none; }

  /* CTAs Connexion / Inscription : compacts mais lisibles */
  .navbar .nav-actions .nav-cta-login,
  .navbar .nav-actions .nav-cta-signup {
    padding: 8px 14px;
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
    flex: 0 0 auto;
  }
  .navbar .nav-actions .nav-cta-login {
    padding: 7px 12px; /* léger contraste avec le primary à droite */
  }

  .navbar .brand-text { font-size: 0.96rem; }

  /* Padding de la barre légèrement réduit pour la respiration latérale */
  .navbar .nav-inner { padding: 0 14px; gap: 10px; }
  .navbar .brand { padding: 4px 4px; gap: 8px; }
}

@media (max-width: 480px) {
  /* Taille uniforme 36×36 sur petits écrans */
  .navbar .nav-actions .icon-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    flex: 0 0 36px;
  }
  .navbar .nav-actions { gap: 4px; }

  /* CTAs encore un peu plus compacts */
  .navbar .nav-actions .nav-cta-login,
  .navbar .nav-actions .nav-cta-signup {
    padding: 7px 11px;
    font-size: 0.76rem;
  }
  .navbar .nav-actions .nav-cta-login { padding: 6px 9px; }

  /* Brand plus petit */
  .navbar .brand-text { font-size: 0.88rem; }
  .navbar .brand-logo { width: 34px; height: 34px; }
  .navbar .nav-inner { padding: 0 12px; gap: 8px; }
}

@media (max-width: 360px) {
  /* iPhone SE : on masque "Connexion" (le bouton Inscription reste visible
     et primaire ; la connexion se fait depuis le drawer ou la même page) */
  .navbar .nav-actions .nav-cta-login { display: none; }
  .navbar .brand-text { display: none; }
  .navbar .brand { padding: 2px; }
  .navbar .nav-actions { gap: 3px; }
  .navbar .nav-inner { padding: 0 10px; }
}


/* =========================================================
   ====== PROPERTY CARD — densification mobile ======
   ========================================================= */
@media (max-width: 480px) {
  .prop-card { border-radius: 18px; }
  .prop-img { aspect-ratio: 16/11; }
  .prop-body { padding: 14px 14px 16px; }
  .prop-title { font-size: 1rem; line-height: 1.3; }
  .prop-price { font-size: 1.15rem; }
  .prop-features-chips { gap: 4px; }
}


/* =========================================================
   ====== FAB STACK — éviter overlap sur property page ======
   ========================================================= */
@media (max-width: 768px) {
  .prop-page .fab-whatsapp,
  .prop-page .chat-fab { bottom: 84px; }
  .fab-whatsapp { width: 52px; height: 52px; }
}


/* =========================================================
   ====== UTILITAIRES anti-overflow spécifiques ======
   ========================================================= */
@media (max-width: 768px) {
  .prop-tabs,
  .tabs-scrollspy { max-width: 100vw; }
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
  pre, code { max-width: 100%; overflow-x: auto; }
}


/* =========================================================
   ====== DARK MODE — ajustements mobile ======
   ========================================================= */
@media (max-width: 768px) {
  [data-theme="dark"] .filter-shell { background: var(--bg); }
  [data-theme="dark"] .prop-tabs { background: rgba(11,20,16,0.95); }
}


/* =========================================================
   ====== PRINT (PDF export property) ======
   Déjà géré par PdfExport.print() mais on prévoit un fallback.
   ========================================================= */
@media print {
  .navbar,
  .drawer,
  .footer,
  .sticky-actions,
  .comparator-bar,
  .interest-cta,
  .chat-fab,
  .fab-whatsapp,
  .skip-link {
    display: none !important;
  }
  body { background: white; color: black; }
  a { color: inherit; text-decoration: none; }
}


/* =========================================================
   ============================================================
   ====== SPRINT RESPONSIVE — Messages / Demandes /
            My-listings / Dashboard (mai 2026) ======
   Inspiré du système JëufJëul (dashboard.css L2763-3300) :
   - body.messages-mobile-chat-open pour neutraliser la nav
   - is-thread → vue thread fullscreen, sidebar masquée
   - Composer Telegram-style 36×36 padding compact + safe-area
   - Action ribbon en strip horizontal scrollable
   - Cards tables → cards verticales empilées sur mobile
   ============================================================
   ========================================================= */

/* ---- TABLETTE (≤ 1024px) — Messages : layout 2-pane resserré ---- */
@media (max-width: 1024px) and (min-width: 769px) {
  /* Status ribbon (conv-validated) : padding réduit, chips plus petits */
  .conv-status-ribbon { padding: 4px 12px; }
  .ribbon-action { padding: 4px 9px; font-size: .68rem; }

  /* Header thread : nom seul + chip Validé inline, status sur 2e ligne */
  .tg-thread-head { padding: 8px 14px; }
  .tg-th-chip { font-size: .6rem; padding: 2px 7px; }

  /* Demandes — colonne tilt-mobile : count à la ligne, pas wrap dégradé */
  .dem-row { grid-template-columns: 46px 1fr auto; gap: 12px; padding: 12px 16px; }
  .dem-group-head { padding: 14px 16px; gap: 12px; }
  .dem-group-img { width: 54px; height: 54px; }

  /* My-listings — image 110px en tablette (areas définis dans bloc précédent) */
  .ml-row { grid-template-columns: 110px 1fr; gap: 12px; padding: 12px; }
  .ml-demandes-link { padding: 12px 16px; }
}


/* ---- MOBILE (≤ 768px) — Messages : fullscreen thread + composer compact ---- */
@media (max-width: 768px) {

  /* ====== MESSAGES : neutralisation absolue de la nav + viewport plein ======
     Pattern porté de JëufJëul (dashboard.css L2803-2821 :
     body.messages-mobile-chat-open .navbar { display:none }).
     La page messages cache déjà navbar/footer via {% block %} mais on
     verrouille height à 100dvh pour éviter les barres mobiles. */
  html:has(.tg-page),
  body:has(.tg-page) {
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
  }

  /* Header thread (≤ 768px) : grid 2 lignes (back+persona / chip+actions)
     pour pouvoir wrapper proprement le chip "Validé" sans casser le layout.
     Inspiré chat-panel-head JëufJëul L3032-3047 (grid-template-areas). */
  .tg-thread-head {
    padding: 8px 12px;
    gap: 8px;
    min-height: 56px;
  }
  .tg-thread-head .tg-back {
    min-width: 36px; min-height: 36px;
    width: 36px; height: 36px;
  }
  .tg-thread-head .tg-th-avatar { width: 34px; height: 34px; }
  .tg-thread-head .tg-th-name {
    font-size: .92rem;
    gap: 5px;
    line-height: 1.1;
  }
  .tg-thread-head .tg-th-status-inline {
    font-size: .68rem;
    line-height: 1.1;
  }
  .tg-thread-head .tg-th-chip {
    font-size: .58rem;
    padding: 2px 6px;
    flex-shrink: 0;
  }
  .tg-thread-head .tg-icon-btn { width: 36px; height: 36px; font-size: .88rem; }

  /* ====== STATUS RIBBON — strip horizontal scrollable ======
     Pattern JëufJëul chat-status-states L3136-3144 : flex nowrap + overflow-x. */
  .conv-status-ribbon {
    padding: 6px 12px;
    gap: 8px;
    flex-wrap: nowrap;
    overflow-x: auto;
    align-items: stretch;
  }
  .conv-status-ribbon .ribbon-copy {
    flex: 0 0 auto;
    min-width: 0;
    flex-wrap: nowrap;
  }
  .conv-status-ribbon .ribbon-copy strong { font-size: .7rem; }
  .conv-status-ribbon .ribbon-copy span { font-size: .66rem; max-width: 160px; }
  .conv-status-ribbon .ribbon-states {
    flex: 1 1 auto;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    gap: 5px;
  }
  .conv-status-ribbon .ribbon-states::-webkit-scrollbar { display: none; }
  .conv-status-ribbon .ribbon-action {
    flex: 0 0 auto;
    min-height: 30px;
    padding: 5px 9px;
    font-size: .64rem;
    white-space: nowrap;
  }

  /* ====== COMPOSER (.tg-input) — JëufJëul chat-composer-shell L3183-3206 ======
     Grid 4 cols 36px + 1fr + 36px + 36px, safe-area bottom. */
  .tg-input {
    grid-template-columns: 36px minmax(0,1fr) 36px 36px;
    gap: 5px;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0));
  }
  .tg-input button { width: 36px; height: 36px; border-radius: 12px; font-size: .85rem; }
  .tg-input-text {
    min-height: 36px;
    padding: 0 8px;
    border-radius: 14px;
  }
  .tg-input-text textarea {
    /* iOS no-zoom : 16px obligatoire au focus pour éviter le zoom automatique */
    font-size: 16px !important;
    padding: 8px 0;
    line-height: 1.35;
    min-height: 24px;
  }
  .tg-input-text .emoji-trigger {
    width: 26px !important; height: 26px !important;
    font-size: .96rem;
  }
  /* Reply preview au-dessus du composer : padding réduit */
  .tg-reply-preview { padding: 6px 12px; gap: 8px; }
  .tg-reply-preview .text { font-size: .76rem; }

  /* Bulles — max-width 86% (laisse respirer l'avatar) */
  .tg-msg { max-width: 86%; }
  .tg-msg-prop img { width: 60px; height: 46px; }

  /* Sidebar (vue list) : conv rows touchables ≥ 64px */
  .tg-conv {
    min-height: 64px;
    padding: 10px 12px;
  }
  .tg-archive-toggle, .tg-archive-back {
    padding: 11px 14px;
    min-height: 42px;
    font-size: .8rem;
  }
  .tg-sidebar-search {
    padding: 9px 12px;
  }
  .tg-sidebar-search input {
    /* iOS no-zoom */
    font-size: 16px !important;
  }

  /* Panneau info droit : overlay fullscreen (déjà géré L294-302 mais on
     renforce la sortie quand is-info-open) */
  .tg-page.is-info-open .tg-info {
    width: 100vw !important;
    height: 100dvh;
  }

  /* ====== DEMANDES (≤ 768px) — header en colonne, row 2-niveaux ====== */
  .dem-wrap { padding: 20px 0 60px; }
  .dem-head {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-bottom: 18px;
  }
  .dem-head .btn { width: 100%; justify-content: center; }

  .dem-group { margin-bottom: 14px; border-radius: var(--r); }
  .dem-group-head {
    flex-wrap: wrap;
    padding: 12px 14px;
    gap: 10px;
  }
  .dem-group-img { width: 48px; height: 48px; border-radius: var(--r-sm); }
  .dem-group-info .title { font-size: .92rem; }
  .dem-group-info .meta { font-size: .72rem; gap: 6px; }
  .dem-group-count {
    padding: 5px 11px;
    font-size: .72rem;
  }

  /* Row leader : passe en 2 colonnes, bouton Répondre pleine largeur */
  .dem-row {
    grid-template-columns: 42px 1fr;
    grid-template-rows: auto auto;
    gap: 10px 12px;
    padding: 12px 14px;
  }
  .dem-row.dem-row-leader { padding-left: 11px; }
  .dem-row > .dem-actions {
    grid-column: 1 / -1;
    width: 100%;
  }
  .dem-row .dem-respond {
    width: 100%;
    justify-content: center;
    padding: 12px 16px;
    font-size: .9rem;
    min-height: 44px;
  }
  .dem-av { width: 42px; height: 42px; }
  .dem-info .name { font-size: .9rem; }
  .dem-info .when { font-size: .72rem; gap: 6px; }
  .dem-info .name .urgent-tag { font-size: .58rem; padding: 2px 6px; }

  /* Toggle "X autres en attente" + lignes secondaires */
  .dem-rest-toggle { padding: 10px 14px; font-size: .78rem; min-height: 40px; }
  .dem-row-rest {
    flex-wrap: wrap;
    padding: 8px 14px;
    gap: 8px;
  }
  .dem-rest-info { gap: 6px; }
  .dem-rest-info .name { font-size: .82rem; }
  .dem-rest-info .when { font-size: .7rem; }
  .dem-rest-lock { font-size: .66rem; padding: 3px 8px; }

  .dem-empty { padding: 50px 22px; border-radius: 18px; }
  .dem-empty i { font-size: 1.9rem; }
  .dem-empty h3 { font-size: 1.15rem; }

  /* ====== MY-LISTINGS (≤ 768px) — raccourci demandes + stats strip ====== */
  .ml-demandes-link {
    flex-wrap: wrap;
    padding: 12px 14px;
    gap: 10px;
    border-radius: 14px;
  }
  .ml-demandes-link .ic { width: 36px; height: 36px; font-size: .92rem; }
  .ml-demandes-link .meta { flex: 1 1 calc(100% - 50px); min-width: 0; }
  .ml-demandes-link .title { font-size: .9rem; }
  .ml-demandes-link .lbl { font-size: .68rem; }
  .ml-demandes-link .cta {
    width: 100%;
    justify-content: center;
    padding: 10px 14px;
    min-height: 42px;
  }

  /* Stats strip horizontal : reste sur 1 ligne, peut wrap à 2 si nécessaire.
     Gap réduit, padding compact, font-size adapté. */
  .ml-stats-strip {
    gap: 10px 14px;
    padding: 10px 14px;
    border-radius: 14px;
    justify-content: space-between;
  }
  .ml-stat-mini-row {
    gap: 6px;
    font-size: .78rem;
  }
  .ml-stat-mini-row .num { font-size: .95rem; }
  .ml-stat-mini-row .lbl { display: none; } /* L'icône + le nombre suffisent en mobile */
  .ml-stat-mini-row i { font-size: .82rem; }
}


/* ---- PETIT MOBILE (≤ 480px) — densification finale ---- */
@media (max-width: 480px) {

  /* Header thread : ultra compact */
  .tg-thread-head { padding: 7px 10px; gap: 7px; }
  .tg-thread-head .tg-back { width: 32px; height: 32px; }
  .tg-thread-head .tg-th-avatar { width: 32px; height: 32px; }
  .tg-thread-head .tg-th-name { font-size: .88rem; }
  .tg-thread-head .tg-th-status-inline { font-size: .64rem; }
  .tg-thread-head .tg-th-chip { font-size: .54rem; padding: 2px 5px; }
  .tg-thread-head .tg-icon-btn { width: 32px; height: 32px; font-size: .82rem; }

  /* Composer encore plus compact */
  .tg-input {
    grid-template-columns: 34px minmax(0,1fr) 34px 34px;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0));
    gap: 4px;
  }
  .tg-input button { width: 34px; height: 34px; border-radius: 11px; font-size: .82rem; }

  /* Status ribbon */
  .conv-status-ribbon { padding: 5px 10px; }
  .conv-status-ribbon .ribbon-copy strong { font-size: .64rem; }
  .conv-status-ribbon .ribbon-copy span { font-size: .6rem; max-width: 130px; }
  .conv-status-ribbon .ribbon-action {
    min-height: 28px;
    padding: 4px 8px;
    font-size: .58rem;
  }

  /* Demandes : padding ultra compact */
  .dem-wrap { padding: 16px 0 50px; }
  .dem-group { border-radius: 14px; }
  .dem-group-head { padding: 10px 12px; gap: 8px; }
  .dem-group-img { width: 42px; height: 42px; }
  .dem-row { padding: 10px 12px; gap: 8px 10px; }
  .dem-row.dem-row-leader { padding-left: 9px; }
  .dem-respond { font-size: .82rem; padding: 11px 14px; }
  .dem-av { width: 38px; height: 38px; }

  /* My-listings : stats strip plus serré */
  .ml-stats-strip {
    gap: 8px 12px;
    padding: 8px 12px;
  }
  .ml-stat-mini-row { font-size: .74rem; gap: 5px; }
  .ml-stat-mini-row .num { font-size: .9rem; }
  .ml-demandes-link { padding: 10px 12px; border-radius: 12px; }
  .ml-demandes-link .ic { width: 32px; height: 32px; font-size: .85rem; }
}


/* ---- ULTRA PETIT (≤ 360px) — sauvegarde ergonomique ---- */
@media (max-width: 360px) {
  .tg-thread-head .tg-th-name { font-size: .84rem; }
  .tg-thread-head .tg-icon-btn { width: 30px; height: 30px; }
  .tg-input { padding: 5px 6px calc(6px + env(safe-area-inset-bottom, 0)); }
  .dem-respond { font-size: .78rem; }
  .ml-stats-strip { gap: 6px 10px; }
}


/* ---- TOUCH TARGETS — sécurité finale sur les pages cibles ---- */
@media (max-width: 768px) and (hover: none) {
  /* Composer messages : tous les boutons ≥ 36px (déjà OK ci-dessus,
     mais on s'assure que le hover-only state ne masque rien) */
  .tg-msg-quick-actions { display: none !important; } /* hover-only, inutile au touch */

  /* Demandes / My-listings : actions interactives min 44px hauteur */
  .dem-respond,
  .ml-demandes-link .cta,
  .ml-action-btn,
  .nav-cta-publish,
  .ml-action-stack-btn,
  .ml-stack-action-link {
    min-height: 44px;
    min-width: 44px;
  }

  /* Inputs textuels : iOS no-zoom partout sur les pages cibles */
  .tg-sidebar-search input,
  .tg-input-text textarea {
    font-size: 16px !important;
  }
}


/* =========================================================
   ====== ACCESSIBILITÉ : prefers-reduced-motion ======
   Bloc AUTORITAIRE chargé en dernier — gagne sur tous les CSS de page.
   Utilise 0.01ms plutôt que "none" pour ne pas casser les états
   finaux d'animations (pattern recommandé WCAG 2.1 SC 2.3.3).
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}