:root {
  --terracotta: #E56A42;
  --terracotta-dark: #993C1D;
  --terracotta-deep: #4A1B0C;
  --teal: #0FBBBD;
  --vert-profond: #0B3D3C;
  --sable: #F7F5EE;
  --cream: #F7F5EE;
  --panel: #FFFFFF;
  --border: #EDE2DC;
  --text: #2B1A12;
  --text-muted: #5B5451;
  --anthracite: #2D2522;
  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 22px;
  font-size: 16px;
}

/* Police d'affichage (titres) : chargée en plusieurs graisses (cf. index.html),
   étendue du logo aux titres pour créer une vraie hiérarchie typographique.
   Le texte courant reste sur la police système, plus légère et très lisible. */
.hero-title,
.content-section-title,
.need-card-title,
.detail-price,
.listing-price,
.step-num,
.owners-banner-title,
.messages-title {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--cream);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
}

input, textarea, select {
  font-family: inherit;
  font-size: 15px;
}

#app {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  padding-bottom: 88px;
  position: relative;
}

@media (min-width: 700px) {
  #app {
    max-width: 640px;
    padding-bottom: 24px; /* Le FAB est masqué sur desktop, plus besoin de la réserve d'espace */
  }
}

/* Header */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 6px;
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--cream);
  transition: padding .2s ease, box-shadow .2s ease;
}

.topbar.scrolled {
  padding: 10px 20px;
  box-shadow: 0 2px 10px rgba(43, 26, 18, 0.06);
}

.topbar.scrolled .brand-mark {
  height: 21px;
}

.topbar.scrolled .brand-text {
  font-size: 19px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 5px;
}

.brand-mark {
  display: block;
  height: 30px;
  width: auto;
  flex-shrink: 0;
  transform: translateY(-1px);
  transition: height .2s ease;
}

.brand-text {
  font-family: 'Fredoka', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 24px;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin: 0;
  color: var(--vert-profond);
  transition: font-size .2s ease;
}

.brand-text-strong,
.footer-brand-name .brand-text-strong {
  font-weight: 700;
  color: var(--terracotta);
}

.brand-text-light,
.footer-brand-name .brand-text-light {
  font-weight: 400;
}

.brand {
  background: transparent;
  border: none;
  padding: 0;
}

/* Navigation centrale desktop */
.topbar-nav {
  display: none;
  align-items: center;
  gap: 28px;
}

.topbar-nav-link {
  font-size: 14px;
  font-weight: 500;
  color: var(--anthracite);
  text-decoration: none;
  opacity: 0.75;
  transition: opacity .15s;
  position: relative;
  padding-bottom: 5px;
}

.topbar-nav-link:hover, .topbar-nav-link.active { opacity: 1; }

.topbar-nav-link.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  border-radius: 1px;
  background: var(--terracotta);
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

@media (min-width: 768px) {
  .topbar-nav { display: flex; }
}

/* Bouton favoris dans le header */
.fav-header-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  color: var(--anthracite);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
}

.fav-header-btn svg path, .inbox-btn svg path {
  stroke-width: 2.1;
}

.fav-header-btn:hover { background: #FAECE7; }

/* Sélecteur de langue + avatar : uniquement desktop (repris dans le menu burger sur mobile) */
.lang-switcher-desktop, .avatar-btn-desktop { display: none; }

@media (min-width: 768px) {
  .lang-switcher-desktop, .avatar-btn-desktop { display: block; }
}

/* Menu burger : uniquement mobile */
.burger-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 768px) {
  .burger-btn { display: none; }
}

/* Contenu du menu burger mobile */
.mobile-menu-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mobile-menu-link {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  padding: 12px 4px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
}
.mobile-menu-link-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--terracotta-dark);
}
.mobile-menu-link-icon svg { width: 20px; height: 20px; }

.mobile-menu-divider {
  height: 1px;
  background: var(--border);
  margin: 10px 0;
}

/* Segmented control (ES | FR | EN) : un seul conteneur arrondi divisé en 3
   onglets égaux, au lieu de 3 boutons séparés et décalés. */
.mobile-menu-langs {
  display: flex;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 3px;
  gap: 0;
}

.mobile-menu-lang-option {
  flex: 1 1 33.333%;
  width: 33.333%;
  padding: 9px 0;
  border-radius: 9px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  transition: background .15s ease, color .15s ease;
}

.mobile-menu-lang-option.active {
  background: var(--terracotta);
  color: white;
}

.mobile-menu-account {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: transparent;
  border: none;
  padding: 10px 4px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.avatar-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--terracotta); /* Fond terracotta principal */
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: white; /* Initiale "G" en blanc net */
  font-size: 15px;
}

/* Etat "invité" (pas de photo, pas de session) : icône ronde et stylisée
   façon Leboncoin, contour anthracite, sans fond plein */
.avatar-btn.avatar-btn--guest {
  background: transparent;
  color: var(--anthracite);
}

/* Sélecteur de langue : texte nu, sans pastille de fond */
.lang-toggle-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--anthracite);
  font-size: 13px;
  letter-spacing: 0.02em;
  transition: background .15s;
}

.lang-toggle-btn:hover { background: rgba(45, 37, 34, 0.06); }

/* Hero */
.hero-wrap {
  padding: 4px 20px 0;
  text-align: center;
}

.hero-title {
  font-size: 26px;
  font-weight: 700;
  margin: 0 0 2px;
  color: var(--text);
  letter-spacing: -0.01em;
}

.hero-subtitle {
  font-size: 15px;
  color: var(--text-muted);
  margin: 0 0 14px;
}

@media (min-width: 768px) {
  .hero-title { font-size: 36px; }
  .hero-subtitle { font-size: 17px; margin: 0 0 20px; }
  .hero-wrap { padding: 8px 20px 2px; }
}

/* Search */
.search-wrap {
  padding: 4px 20px 2px;
}

.search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 11px 14px;
}

.search-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--anthracite);
  opacity: 0.7;
}

.search-box input {
  border: none;
  outline: none;
  flex: 1;
  background: transparent;
  font-size: 15px;
  color: var(--text);
}

.search-box input::placeholder { color: var(--text-muted); }

.search-clear-btn {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 50%;
  background: var(--border);
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  display: none;
}
.search-clear-btn:hover { background: var(--terracotta); color: #fff; }

/* Need Cards (Need-First) */
.needs-wrap {
  padding: 6px 20px 2px;
  scroll-margin-top: 76px;
}

.need-pill-row {
  display: flex;
  gap: 8px;
  margin-bottom: 6px;
}

.need-pill {
  padding: 9px 20px;
  border-radius: 999px;
  background: #FAECE7;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, transform .1s ease;
}

.need-pill:active { transform: scale(0.96); }

.need-pill.active {
  background: var(--terracotta);
  color: #fff;
}

.need-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

/* Cartes de besoin = tuiles "sélecteur", pas des fiches produit : l'image
   occupe toute la tuile (pas de fond blanc encadré) et le libellé est
   incrusté directement sur la photo, en bas, sur un dégradé sombre. Ça les
   découple visuellement des cartes d'annonce en dessous, qui elles gardent
   le format "carte produit" classique (fond blanc, prix, favoris...). */
.need-card {
  position: relative;
  display: block;
  border: none;
  padding: 0;
  cursor: pointer;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--cream);
  aspect-ratio: 900 / 672;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-align: left;
}

.need-card-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.need-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.need-card-image-fallback {
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  font-size: 40px;
}

.need-card-body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px 14px 8px;
  background: linear-gradient(to top, rgba(253, 249, 246, 0.97) 0%, rgba(253, 249, 246, 0.6) 60%, rgba(253, 249, 246, 0) 100%);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.need-card-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.25;
  margin: 0;
}

.need-card-subtitle {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--text-muted);
  line-height: 1.3;
  margin: 0;
  /* Toujours sur une seule ligne, pour garder l'alignement entre toutes les
     tuiles de besoin même si une traduction est un peu plus longue. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.need-card.active {
  box-shadow: inset 0 0 0 3px var(--terracotta), 0 8px 24px rgba(0, 0, 0, 0.18);
}

/* Carrousel des besoins : flèches rondes de navigation (visibles sur desktop
   uniquement ; sur mobile/tablette on garde le défilement au doigt). */
.need-carousel {
  position: relative;
}

.need-carousel-arrow {
  display: none;
  position: absolute;
  top: 42%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.10);
  color: var(--text);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  z-index: 3;
  padding: 0;
  transition: background .15s ease, opacity .15s ease, transform .15s ease;
}

.need-carousel-arrow:hover { background: #FAECE7; }
.need-carousel-arrow:active { transform: translateY(-50%) scale(0.92); }
/* Masquée (pas juste grisée) en bout de course : flèche gauche cachée au
   tout début du carrousel, flèche droite cachée une fois la fin atteinte. */
.need-carousel-arrow.is-disabled { display: none; }
.need-carousel-arrow--left { left: -20px; }
.need-carousel-arrow--right { right: -20px; }

/* Desktop large (ordinateur) : carrousel horizontal des 6 besoins — 4 cartes
   entières + amorce de la 5ème — avec flèches de navigation, pour des
   visuels 3D plus généreux tout en libérant la hauteur. Entre 768px et
   1023px (tablette), la grille 3x2 par défaut est conservée. */
@media (min-width: 1024px) {
  .hero-wrap {
    padding-top: 24px;
  }

  .hero-subtitle {
    margin: 0 0 26px;
  }

  .need-carousel-arrow {
    display: flex;
  }

  /* Les flèches doivent rester dans leur propre espace, à côté des tuiles,
     jamais par-dessus (elles cachaient jusqu'à 20px de la première/dernière
     image, ex: Kärcher, déshumidificateur). On réserve donc une marge dédiée
     de chaque côté du carrousel et on y ancre les flèches, complètement à
     l'extérieur de la grille de tuiles. */
  .need-carousel {
    padding: 0 46px;
    transition: padding-left .15s ease;
  }
  /* Flèche gauche masquée (tout au début du carrousel) : on retire la marge
     qui lui était réservée pour que la première tuile s'aligne pile avec la
     barre de recherche et les cartes d'annonces en dessous. */
  .need-carousel.need-carousel--no-left-arrow {
    padding-left: 0;
  }
  .need-carousel-arrow--left { left: 0; }
  .need-carousel-arrow--right { right: 0; }

  .need-cards-grid {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 16px;
    scrollbar-width: none;
    /* Le masque de défilement (overflow) rogne tout ce qui dépasse sa boîte,
       y compris l'ombre portée et le contour actif des cartes. On ajoute donc
       une marge de respiration à l'INTÉRIEUR du conteneur scrollable, puis on
       l'annule avec une marge négative égale sur l'extérieur : les cartes
       restent alignées au même endroit, mais ombre/contour ont de la place
       avant d'être coupés. */
    padding: 18px 10px;
    margin: -18px -10px;
  }

  .need-cards-grid::-webkit-scrollbar {
    display: none;
  }

  .need-card {
    flex: 0 0 22.5%;
    scroll-snap-align: start;
    border-radius: 18px;
  }

  .need-card-body {
    padding: 12px 16px 10px;
  }

  .need-card-title {
    font-size: 1rem;
    line-height: 1.25;
  }

  .need-card-subtitle {
    font-size: 0.85rem;
    line-height: 1.3;
  }

  .needs-wrap {
    padding: 10px 20px 4px;
  }

  .location-picker-bar {
    padding: 10px 20px 6px;
  }

  .location-picker-bar .search-wrap {
    max-width: 420px;
  }
}

/* Need badge (listing detail) */
.need-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #FAECE7;
  color: var(--terracotta-dark);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 10px;
}
.need-badge-emoji { font-size: 15px; }

/* Badge "prêt solidaire" (gratuit) */
.solidaire-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #E3F6F5;
  color: var(--vert-profond);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 10px;
  margin-left: 8px;
}
.solidaire-badge--card {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 11px;
  padding: 4px 10px;
  margin: 0;
  z-index: 2;
}

/* Suggestions block (listing detail) */
.suggestions-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin: 28px 0 14px;
}

/* Section title */
.section-title {
  padding: 18px 20px 8px;
  font-size: 13px;
  color: var(--text-muted);
}

/* Listings */
.listings {
  padding: 4px 20px 32px;
}

.listings-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

@media (min-width: 768px) {
  /* 4 colonnes FIXES (et non auto-fill) : le nombre de colonnes ne
     dépend plus de la largeur de fenêtre (ce qui causait 3 au lieu de 4
     dès que la fenêtre était partagée avec une autre application). Chaque
     piste est flexible entre 150px et 250px : avec peu d'annonces, les
     cartes gardent leur taille normale (les pistes vides à droite restent
     vides, elles ne s'étirent pas) ; avec beaucoup d'annonces, les 4
     cartes se répartissent la largeur disponible jusqu'à 250px max chacune. */
  .listings-grid {
    grid-template-columns: repeat(4, minmax(150px, 250px));
    justify-content: start;
    gap: 20px;
  }

  .listing-card {
    max-width: 250px;
  }

  #favoritosList {
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
  }
}

.listing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  border-radius: 24px;
  overflow: hidden;
  text-align: left;
  width: 100%;
  padding: 0;
  box-shadow: 0 6px 24px rgba(43, 26, 18, 0.08),
              0 2px 6px rgba(43, 26, 18, 0.05);
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1),
              box-shadow 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Annonces en prêt solidaire : un fin lisere sauge en plus de la pastille,
   pour que le "gratuit" se lise d'un coup d'œil dans la grille, pas
   seulement en lisant le badge de près. */
.listing-card--solidaire {
  box-shadow: inset 0 0 0 2px rgba(11, 61, 60, 0.55),
              0 6px 24px rgba(43, 26, 18, 0.08),
              0 2px 6px rgba(43, 26, 18, 0.05);
}

@media (min-width: 768px) {
  .listing-card:hover {
    transform: scale(1.025);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1),
                0 2px 8px rgba(0, 0, 0, 0.04);
  }
  .listing-card:hover .listing-card-view-btn {
    opacity: 1;
    transform: translateY(0);
  }
}

.listing-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 0;
  flex-shrink: 0;
  background: #F0997B;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  color: var(--terracotta-deep);
  overflow: hidden;
}

.listing-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Bouton discret "Voir l'annonce", révélé au survol de la carte (desktop). */
.listing-card-view-btn {
  position: absolute;
  left: 10px;
  bottom: 10px;
  background: rgba(255, 255, 255, 0.95);
  color: var(--terracotta-dark);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 20px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
}

.listing-info {
  flex: 1;
  min-width: 0;
  padding: 10px 12px 12px;
}

.listing-title {
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.3;
  min-height: 2.6em;
}

.listing-meta {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0 0 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.listing-price {
  font-size: 14px;
  font-weight: 700;
  color: var(--terracotta-dark);
  margin: 0;
}

.empty-state {
  text-align: center;
  padding: 48px 20px;
  color: var(--text-muted);
  grid-column: 1 / -1;
}

.empty-state .empty-icon { font-size: 34px; margin-bottom: 10px; }

/* Empty state Favoris : icône dans un badge arrondi pastel + titre semi-bold,
   bloc parfaitement centré dans la page. */
#favoritosEmpty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

#favoritosEmpty .empty-icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  background: #FDF2E9;
  border-radius: 50%;
  margin: 0 0 12px;
}

#favoritosEmpty p {
  font-weight: 600;
  font-size: 18px;
  margin: 0;
  color: var(--text);
}

/* Fade-out animé lors du retrait d'une carte des favoris (avant re-render) */
.fade-out-remove {
  opacity: 0 !important;
  transform: scale(0.92) !important;
  transition: opacity .2s ease, transform .2s ease !important;
  pointer-events: none !important;
}

/* Floating add button */
.fab {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  display: flex;
  justify-content: flex-end;
  padding: 0 20px;
  pointer-events: none;
  z-index: 30; /* Passe au-dessus des cœurs (z-index: 2) lors du défilement */
}

.fab button {
  pointer-events: auto;
  background: var(--terracotta);
  color: white;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  font-size: 26px;
  box-shadow: 0 12px 28px -6px rgba(200, 82, 54, 0.4), 0 4px 12px rgba(200, 82, 54, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Modal / sheet */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(43, 26, 18, 0.5);
  display: none;
  align-items: flex-end;
  justify-content: center;
  z-index: 50;
}

.overlay.open { display: flex; }

.sheet {
  background: var(--cream);
  width: 100%;
  max-width: 480px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: 20px 20px 28px;
  /* 88% de la hauteur de viewport RÉELLEMENT visible (cf. --vvh, mis à jour
     en JS) plutôt que 100vh brut : sur mobile, avec le clavier virtuel
     ouvert (formulaire de publication d'annonce), 100vh ne se réduit pas et
     la modale peut se retrouver plus haute que l'espace visible, débordant
     alors sous le header fixe en haut de page. */
  max-height: calc(var(--vvh, 100vh) * 0.88);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
  animation: slideUp .2s ease-out;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.18);
}

@keyframes slideUp {
  from { transform: translateY(24px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.sheet-handle {
  width: 36px;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  margin: 0 auto 16px;
}

.sheet-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 16px;
  color: var(--terracotta-deep);
}

/* Modale "Publier une annonce" : en-tête (titre + X) fixé en haut pendant le
   scroll interne du formulaire, pour rester accessible même sur un long
   formulaire mobile avec clavier virtuel ouvert. */
.add-listing-sheet {
  padding: 0;
  display: flex;
  flex-direction: column;
}

.add-listing-sheet .sheet-sticky-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #FFFFFF;
  padding: 20px 20px 12px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.add-listing-sheet .sheet-sticky-header .sheet-handle { margin-bottom: 12px; }
.add-listing-sheet .sheet-sticky-header .sheet-title { margin: 0; }

.add-listing-sheet .sheet-scroll-body {
  padding: 4px 20px 28px;
}

@media (min-width: 768px) {
  .add-listing-sheet .sheet-sticky-header { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
}

.field { margin-bottom: 14px; }

.field label {
  display: block;
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 5px;
}

.field input, .field textarea, .field select {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 11px 12px;
  background: var(--panel);
  color: var(--text);
}

.field textarea { resize: vertical; min-height: 70px; }

.char-counter {
  margin: 4px 2px 0;
  font-size: 12px;
  color: var(--text-muted);
  text-align: right;
}

.btn-primary {
  width: 100%;
  background: var(--terracotta);
  color: white;
  border-radius: 12px;
  padding: 13px;
  font-size: 15px;
  font-weight: 600;
}

.btn-primary:disabled { opacity: 0.6; }

.btn-secondary {
  width: 100%;
  background: transparent;
  color: var(--terracotta-dark);
  padding: 10px;
  font-size: 14px;
  font-weight: 500;
  margin-top: 8px;
}

.form-error {
  color: var(--terracotta-dark);
  font-size: 13px;
  margin: -4px 0 12px;
  display: none;
}

.form-error.show { display: block; }

.form-success {
  color: #2f7a4d;
  font-size: 13px;
  margin: -4px 0 12px;
  display: none;
}

.form-success.show { display: block; }

.auth-forgot-link {
  display: block;
  background: transparent;
  color: var(--text-muted);
  font-size: 13px;
  text-decoration: underline;
  text-align: right;
  margin: -6px 0 14px;
  padding: 2px;
}

.tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
  background: var(--panel);
  border-radius: 10px;
  padding: 4px;
  border: 1px solid var(--border);
}

.tab-btn {
  flex: 1;
  padding: 8px;
  border-radius: 8px;
  background: transparent;
  font-size: 14px;
  color: var(--text-muted);
}

.tab-btn.active {
  background: var(--terracotta);
  color: white;
  font-weight: 600;
}

/* Product detail */
.detail-hero {
  width: 100%;
  height: 200px;
  border-radius: var(--radius);
  background: #F0997B;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 44px;
  color: var(--terracotta-deep);
  margin-bottom: 16px;
  overflow: hidden;
}

.detail-hero img { width: 100%; height: 100%; object-fit: cover; }

.detail-price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 6px;
}

.detail-price {
  font-size: 22px;
  font-weight: 700;
  color: var(--terracotta-dark);
}

.detail-desc {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  margin: 12px 0 18px;
}

.deposit-note {
  background: #FAECE7;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 13px;
  color: var(--terracotta-dark);
  margin-bottom: 18px;
}

.commission-note {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--text-muted);
}

/* Case à cocher "prêt solidaire" (création/édition d'annonce) */
.solidaire-field {
  background: #E3F6F5;
  border-radius: 10px;
  padding: 12px 14px;
}
.solidaire-checkbox-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--vert-profond);
  cursor: pointer;
}
.solidaire-checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--vert-profond);
  cursor: pointer;
}
.solidaire-hint {
  margin: 6px 0 0 28px;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
}
.field-disabled {
  opacity: 0.5;
}

.booking-recap-total--free {
  color: var(--vert-profond);
}
.booking-recap-solidaire-note {
  background: #E3F6F5;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 13px;
  color: var(--vert-profond);
  margin: 6px 0 4px;
}

.rental-unavailable-note {
  margin: -6px 0 14px;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
}

.rental-days-summary {
  margin: -6px 0 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--terracotta-dark);
}

.secure-payment-badge {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
}

.booking-recap-line {
  font-size: 14px;
  color: var(--text);
  margin: 0 0 8px;
}

.booking-recap-total {
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 14px;
}

.booking-recap-explain {
  background: #FAECE7;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 13px;
  color: var(--terracotta-dark);
  margin: 6px 0 4px;
}

.back-btn {
  background: transparent;
  color: var(--text-muted);
  font-size: 14px;
  padding: 4px 0;
  margin-bottom: 8px;
}

.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--terracotta-deep);
  color: white;
  padding: 12px 20px;
  border-radius: 10px;
  font-size: 14px;
  z-index: 100;
  opacity: 0;
  transition: opacity .2s;
  pointer-events: none;
  max-width: 400px;
  text-align: center;
}

.toast.show { opacity: 1; }

/* Profile header */
.profile-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 4px;
}

.profile-avatar-lg {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--terracotta);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 600;
  flex-shrink: 0;
}

.profile-name {
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 2px;
  color: var(--terracotta-deep);
}

.profile-email {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
}

/* Modale de profil : section haute (photo/nom/email + actions) fixe, seule
   la liste "Mes annonces" défile en interne — évite d'avoir à scroller toute
   la modale pour retrouver les boutons "Set up payments" / "Log out". */
#profileOverlay .sheet.profile-sheet {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.profile-fixed-top { flex-shrink: 0; }
.profile-payments-btn {
  margin-top: 16px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.profile-bookings-btn {
  margin-top: 0;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.profile-logout-btn { margin-top: 0; }
.profile-listings-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-right: 2px;
}

/* Cookie banner */
.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: none;
  justify-content: center;
  padding: 16px;
  z-index: 200;
}

.cookie-banner.show { display: flex; }

.cookie-banner-panel {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 620px;
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 6px 24px rgba(43,26,18,0.14);
  padding: 16px 18px;
  flex-wrap: wrap;
}

.cookie-banner-icons {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}

.cookie-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #fff;
}

.cookie-banner-body {
  flex: 1;
  min-width: 200px;
}

.cookie-banner-title {
  font-weight: 700;
  font-size: 15px;
  margin: 0 0 4px;
  color: var(--text);
}

.cookie-banner p {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 10px;
}

.location-picker-bar {
  display: flex;
  /* stretch (au lieu de center) : le bouton "Toutes les zones" doit prendre
     exactement la même hauteur que la barre de recherche, pas juste être
     centré à côté d'elle avec une hauteur plus petite. */
  align-items: stretch;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 20px 6px;
}

.location-picker-bar .search-wrap {
  padding: 0;
  flex: 1 1 auto;
  min-width: 160px;
}

.filters-right {
  display: flex;
  align-items: stretch;
  gap: 8px;
  flex-shrink: 0;
}

/* Le badge de besoin actif reste une pastille compacte centrée, seul le
   bouton de zone doit s'étirer sur toute la hauteur de la barre. */
.active-need-badge {
  align-self: center;
}

/* Badge du besoin actif : remplace le rôle de l'ancien bouton "Tous" —
   cliquer dessus (la croix) réinitialise le filtre. */
.active-need-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--terracotta);
  color: #fff;
  border: none;
  padding: 6px 8px 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease;
  white-space: nowrap;
}

.active-need-badge:hover,
.active-need-badge:active {
  background: var(--terracotta-dark);
}

.active-need-badge-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  font-size: 13px;
  line-height: 1;
}

/* --- Bouton de localisation (Málaga) propre et arrondi --- */
.location-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #FAECE7 !important;
  color: var(--terracotta-dark);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  border: none !important;
  outline: none;
  cursor: pointer;
  /* Étiré sur toute la hauteur de .location-filter (lui-même étiré sur toute
     la hauteur de la barre de recherche, cf. .location-picker-bar). */
  height: 100%;
  box-sizing: border-box;
}

.location-btn:active {
  background: #F5C4B3 !important;
}

/* --- Filtre de zone : menu déroulant direct au clic, sans modale --- */
.location-filter {
  position: relative;
  display: inline-flex;
  align-items: stretch;
}

/* Croix affichée par-dessus le bouton (à la place du chevron) quand une
   zone est sélectionnée ; clic = réinitialisation immédiate. */
.location-clear-btn {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: none;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: none;
  background: rgba(153, 60, 29, 0.16);
  color: var(--terracotta-dark);
  font-size: 11px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
}
.location-clear-btn:hover { background: rgba(153, 60, 29, 0.28); }

/* Place suffisante à droite du libellé pour que la croix ne chevauche pas le
   nom de la ville sélectionnée. */
.location-filter.has-value .location-btn {
  padding-right: 30px;
}

.location-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 220px;
  max-width: min(280px, calc(100vw - 40px));
  /* Hauteur plafonnée avec défilement interne : le menu ne dépasse jamais du
     bas de l'écran, et c'est la liste elle-même qui défile, jamais la page. */
  max-height: 260px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: #FFFFFF;
  border-radius: var(--radius);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.16), 0 2px 8px rgba(0, 0, 0, 0.06);
  padding: 6px;
  z-index: 50;
}

.location-filter.open .location-dropdown {
  display: block;
}

.location-dropdown-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: none;
  background: transparent;
  border-radius: 10px;
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
}

/* Fond gris/crème léger au survol — pas de pavé plein */
.location-dropdown-item:hover { background: #F4F0EA; }

/* Option sélectionnée : simple accent de texte, plus de gros pavé orange */
.location-dropdown-item.active {
  background: #FAECE7;
  color: var(--terracotta-dark);
  font-weight: 600;
}

/* --- Boutons Favoris en bulle blanche (avec le point corrigé) --- */
.fav-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  z-index: 2;
  border: 1px solid var(--border);
  transition: transform 0.15s, background 0.15s;
}

.fav-btn:active {
  transform: scale(0.92);
}

.fav-btn.active {
  color: var(--terracotta);
  background: #FAECE7;
  border-color: #FAECE7;
}

.fav-btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.fav-btn.active svg {
  fill: var(--terracotta);
}

/* 1. Forcer le gras de l'avatar profil "G" */
.avatar-btn {
  font-weight: 800 !important;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

/* Need Cards : carrousel horizontal défilable au pouce sur mobile */
@media (max-width: 767px) {
  .need-cards-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 12px !important;
    /* Même correctif que sur desktop : de la place à l'intérieur du masque
       de défilement pour que l'ombre et le contour actif ne soient pas
       rognés, sans décaler visuellement les cartes. */
    padding: 14px 6px;
    margin: -14px -6px 0;
  }
  .need-card {
    flex: 0 0 78% !important;
    scroll-snap-align: start;
  }
  .need-cards-grid::-webkit-scrollbar {
    display: none;
  }

  /* La barre "Cerca de ti" passe sur deux lignes si le badge de besoin actif
     ne tient pas à côté du titre et du bouton de localisation. */
  .location-picker-bar {
    flex-wrap: wrap;
    row-gap: 6px;
  }

  .location-picker-bar .search-wrap {
    flex: 1 1 100%;
  }

  .filters-right {
    flex-wrap: wrap;
    margin-left: auto;
  }

  /* Sur mobile, le bouton de zone peut se retrouver n'importe où dans la
     ligne qui s'enroule (parfois assez loin à droite) : un menu ancré à sa
     position déborderait hors de l'écran. On le fixe donc plutôt à
     20px des deux bords de l'écran (mêmes marges que le reste des blocs) ;
     le "top" exact est calculé en JS à l'ouverture, sous le bouton. */
  .location-dropdown {
    position: fixed;
    left: 20px;
    right: 20px;
    width: auto;
    min-width: 0;
    max-width: none;
  }
}
/* ==========================================
   Sections de contenu homepage (Cómo funciona, Condiciones, Por qué, Propietarios, FAQ)
   ========================================== */
.content-section {
  padding: 40px 20px;
  max-width: 900px;
  margin: 0 auto;
  scroll-margin-top: 76px;
}

.content-section-alt {
  background: var(--panel);
  border-radius: var(--radius-lg);
  max-width: 1060px;
}

.content-section-title {
  font-size: 22px;
  font-weight: 600;
  text-align: center;
  margin: 0 0 8px;
  color: var(--text);
}

.content-section-intro {
  text-align: center;
  font-size: 14px;
  color: var(--text-muted);
  max-width: 520px;
  margin: 0 auto 24px;
  line-height: 1.5;
}

@media (min-width: 768px) {
  .content-section-title { font-size: 28px; margin-bottom: 12px; }
}

/* Cómo funciona: 4 étapes */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 24px;
}

@media (min-width: 768px) {
  .steps-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; }
}

.step-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px 16px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.step-num {
  display: block;
  font-size: 22px;
  font-weight: 700;
  color: var(--anthracite);
  margin-bottom: 8px;
}

.step-title {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 6px;
}

.step-desc {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.4;
}

/* Condiciones de alquiler */
.conditions-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 0 24px;
}

@media (min-width: 768px) {
  .conditions-grid { grid-template-columns: repeat(3, 1fr); padding: 0 32px; }
}

.condition-item {
  border-left: 3px solid var(--anthracite);
  padding: 4px 0 4px 14px;
}

.condition-title {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 4px;
  color: var(--terracotta-deep);
}

.condition-desc {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.5;
}

.link-btn {
  display: block;
  margin: 24px auto 0;
  background: transparent;
  color: var(--anthracite);
  font-size: 13px;
  font-weight: 600;
  text-decoration: underline;
  padding: 20px 24px 4px;
}

.content-section-alt .link-btn { padding-bottom: 24px; }

/* Modale d'info générique (à propos, aide, CGU, confidentialité, mentions légales, plan du site...) */
.info-sheet { max-width: 520px; }
.info-modal-body {
  margin-top: 8px;
  max-height: 60vh;
  overflow-y: auto;
}
.info-modal-body p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
  margin: 0 0 14px;
}
.info-modal-body h4 {
  font-size: 14px;
  font-weight: 700;
  color: var(--terracotta-deep);
  margin: 0 0 4px;
}
.sitemap-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sitemap-link-btn {
  text-align: left;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
}
.sitemap-link-btn:hover { border-color: var(--terracotta); color: var(--terracotta-dark); }

/* Por qué alquilar */
.why-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 24px;
}

@media (min-width: 768px) {
  .why-grid { grid-template-columns: repeat(4, 1fr); }
}

.why-item { text-align: center; }

.why-icon {
  display: block;
  font-size: 28px;
  margin-bottom: 10px;
  color: var(--terracotta-dark);
}

.why-item-title {
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 4px;
}

.why-item-desc {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.4;
}

/* Propietarios */
.owners-banner {
  max-width: 1060px;
  margin: 40px auto;
  padding: 40px 24px;
  text-align: center;
  background: #FAECE7;
  border-radius: var(--radius-lg);
}

.owners-banner-title {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 10px;
  color: var(--terracotta-deep);
}

.owners-banner-subtitle {
  font-size: 14px;
  color: var(--text-muted);
  max-width: 440px;
  margin: 0 auto 20px;
  line-height: 1.5;
}

.owners-banner-cta { display: inline-block; }

@media (min-width: 768px) {
  .owners-banner-title { font-size: 26px; }
}

/* FAQ */
.faq-list {
  max-width: 720px;
  margin: 24px auto 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.faq-item {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 4px 16px;
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  list-style: none;
}

.faq-question::-webkit-details-marker { display: none; }

.faq-chevron {
  color: var(--text-muted);
  transition: transform .2s ease;
  flex-shrink: 0;
}

.faq-item[open] .faq-chevron { transform: rotate(180deg); }

.faq-answer {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0 0 16px;
}

/* --- Mini Footer Warm Minimalist Ajuste --- */
.app-footer {
  text-align: center;
  padding: 36px 20px 40px !important;
  border-top: 1px solid var(--border);
  margin-top: 30px;
}

/* Le bouton flottant "+" (FAB) reste fixé en bas de l'écran même une fois
   arrivé en bas de page : on réserve assez d'espace sous le footer pour
   qu'il ne masque jamais son dernier texte (copyright). Le FAB est caché à
   partir de 768px, donc cette marge supplémentaire ne s'applique qu'au
   mobile, là où le problème existe. */
@media (max-width: 767px) {
  .app-footer {
    padding-bottom: 96px !important;
  }
}

.footer-brand { margin-bottom: 28px; }

.footer-brand-mark {
  display: block;
  height: 37px;
  width: auto;
  margin: 0 auto 6px;
}

.footer-brand-name {
  font-family: 'Fredoka', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 26px;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin: 0 0 4px;
  color: var(--vert-profond);
}

.footer-brand-baseline {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  margin: 0;
  letter-spacing: 0.01em;
}

.footer-columns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 32px;
  text-align: left;
  max-width: 900px;
  margin: 0 auto 24px;
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 140px;
}

.footer-col-title {
  font-weight: 700;
  font-size: 13px;
  color: var(--text);
  margin: 0 0 4px;
}

.footer-col a,
.footer-col a:visited {
  color: var(--text-muted) !important;
  text-decoration: none !important;
  font-size: 13px;
}

.footer-col a:hover { text-decoration: underline !important; }

.footer-social {
  display: flex;
  gap: 8px;
}

.footer-social-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--terracotta-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  transition: background .15s ease, transform .15s ease;
}
.footer-social-icon:hover {
  background: var(--terracotta);
  transform: translateY(-2px);
}

.footer-copy {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0;
  opacity: 0.8;
}

/* Largeur max globale sur grand écran */
#app, #screen-home, .topbar, .search-wrap {
  max-width: 1100px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Très grands écrans : le conteneur de 1100px laissait beaucoup de marge
   blanche inutilisée sur les écrans larges. On l'élargit et on ajoute une
   5ème colonne à la grille d'annonces, plutôt que de garder 4 colonnes
   plafonnées à 250px quelle que soit la taille de l'écran. */
@media (min-width: 1440px) {
  #app, #screen-home, .topbar, .search-wrap {
    max-width: 1320px !important;
  }
  .listings-grid {
    grid-template-columns: repeat(5, minmax(150px, 250px)) !important;
  }
}

@media (min-width: 768px) {
  /* Masquer le bouton FAB (+) orange flottant sur desktop (le bouton header suffit) */
  .fab { display: none !important; }
}
/* Bouton Publier dans le header */
.btn-publish-desktop {
  display: none;
}

@media (min-width: 768px) {
  .btn-publish-desktop {
    display: inline-flex !important;
    align-items: center;
    background-color: #D85A30;
    color: #FFFFFF;
    border: none;
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    gap: 6px;
  }

  .btn-publish-desktop span:first-child {
    font-size: 17px;
    font-weight: 700;
    line-height: 1;
  }

  /* Cacher TOUS les boutons flottants (+) en bas sur PC */
  button[onclick*="publish"],
  button[onclick*="item"],
  .fab,
  .fab-btn,
  .fab-button,
  .floating-btn,
  #fabBtn,
  button[aria-label*="Publier"],
  button[aria-label*="Publicar"] {
    display: none !important;
  }
}
/* Bouton de fermeture (X) des pop-ups */
.sheet { position: relative; }
.sheet-close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  border-radius: 50%;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sheet-close:hover { background: rgba(43, 26, 18, 0.08); }

/* Pop-up centrée sur desktop (au lieu du bottom-sheet mobile) + need cards plus grandes */
@media (min-width: 768px) {
  .overlay { align-items: center; }
  .sheet { border-radius: var(--radius-lg); }
  .sheet-handle { display: none; }

  .need-cards-grid { gap: 8px; }
}

/* Multi-photo upload preview */
.photo-preview-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.photo-thumb {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--panel);
}
.photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 50%;
  background: rgba(43, 26, 18, 0.65);
  color: #fff;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.photo-remove:hover { background: rgba(43, 26, 18, 0.85); }

/* Price / deposit side by side */
.field-row {
  display: flex;
  gap: 12px;
  margin-bottom: 14px;
}
.field-row .field { flex: 1; margin-bottom: 0; }

/* Detail screen photo gallery thumbnails */
.detail-gallery {
  display: none;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.detail-thumb {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid transparent;
  padding: 0;
  cursor: pointer;
  background: var(--panel);
}
.detail-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.detail-thumb.active { border-color: var(--terracotta); }

/* Desktop: two-column layout for the add-listing photo + fields */
@media (min-width: 768px) {
  .photo-thumb { width: 84px; height: 84px; }
}

/* "My listings" rows in profile sheet — liste horizontale compacte, indépendante des cartes grille */
.my-listing-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px;
  width: 100%;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}

.my-listing-row:hover {
  background: #F4F0EA;
  border-color: var(--terracotta-deep);
}

/* Même traitement "prêt solidaire" que les cartes de la grille (liseré
   sauge) et que le badge de prix, pour que "Mes annonces" reste cohérent
   avec le reste du site plutôt que d'afficher un trompeur "0 € / jour". */
.my-listing-row--solidaire {
  border-color: rgba(11, 61, 60, 0.45);
  box-shadow: inset 0 0 0 1px rgba(11, 61, 60, 0.45);
}

.my-listing-row--solidaire:hover {
  border-color: rgba(11, 61, 60, 0.7);
}

.my-listing-row--solidaire .my-listing-price {
  color: var(--vert-profond);
}

.my-listing-thumb {
  width: 56px;
  height: 56px;
  border-radius: 9px;
  flex-shrink: 0;
  background: #F0997B;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: var(--terracotta-deep);
  overflow: hidden;
}

.my-listing-thumb img { width: 100%; height: 100%; object-fit: cover; }

.my-listing-info { flex: 1; min-width: 0; padding-right: 76px; }

.my-listing-title {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.my-listing-price {
  font-size: 13px;
  font-weight: 600;
  color: var(--terracotta-dark);
  margin: 0;
}

/* Edit / delete buttons on "My listings" rows — le crayon est l'action mise
   en avant, la corbeille reste discrète par défaut et n'agit qu'après
   confirmation dans une modale dédiée (jamais de suppression directe). */
.my-listing-actions {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  display: flex;
  gap: 6px;
}
.my-listing-actions button {
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--panel);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.my-listing-actions svg { width: 15px; height: 15px; }
.my-listing-edit-btn { color: var(--terracotta-dark); }
.my-listing-edit-btn:hover { background: var(--terracotta); border-color: var(--terracotta); color: #fff; transform: scale(1.06); }
.my-listing-delete-btn { color: var(--text-muted); }
.my-listing-delete-btn:hover { background: #C0392B; border-color: #C0392B; color: #fff; transform: scale(1.06); }

/* Écran "Mes réservations" (effectuées + reçues) */
.bookings-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.booking-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}

.booking-row-deposit {
  font-size: 12px;
  color: var(--terracotta-dark);
  margin: 3px 0 0;
}

.booking-row-actions {
  flex-basis: 100%;
  display: flex;
  justify-content: flex-end;
}

.booking-row-action-btn {
  width: auto;
  margin-top: 0;
  padding: 8px 16px;
  font-size: 13px;
}

.booking-row:hover {
  background: #F4F0EA;
  border-color: var(--terracotta-deep);
}

.booking-row-info { min-width: 0; }

.booking-row-title {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.booking-row-dates {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0;
}

.booking-row-meta {
  flex-shrink: 0;
  text-align: right;
}

.booking-row-amount {
  font-size: 13px;
  font-weight: 700;
  color: var(--terracotta-dark);
  margin: 0 0 4px;
}

.booking-row-status {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  background: #E9F5EC;
  color: #2E7D46;
}

.booking-row-status--cancelled {
  background: #F4EFEA;
  color: var(--text-muted);
}

.booking-row-status--completed {
  background: #EAF0F7;
  color: #2C5C8A;
}

.booking-row-status--pending_deposit {
  background: #FBEDE6;
  color: var(--terracotta-dark);
}

.empty-state-inline {
  font-size: 13px;
  color: var(--text-muted);
  padding: 6px 0 2px;
}

/* Desktop: cap the listing detail screen width and give the hero photo a saner ratio */
@media (min-width: 768px) {
  #screen-detail {
    max-width: 640px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .detail-hero { height: 360px; }

  /* Desktop: wider "My listings" panel, shown as a 2-column grid */
  #profileOverlay .sheet { max-width: 620px; }
  #myListingsList {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  /* Les cellules de grille ont un min-width auto par défaut, ce qui empêchait
     le titre de rétrécir et cassait l'ellipsis (texte tronqué qui débordait). */
  #myListingsList .my-listing-row {
    min-width: 0;
  }
}

/* Language dropdown switcher */
.lang-switcher {
  position: relative;
}
.lang-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.16);
  padding: 6px;
  min-width: 150px;
  z-index: 60;
}
.lang-menu.open {
  display: block;
}
.lang-option {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: none;
  background: none;
  border-radius: 8px;
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
}
.lang-option:hover {
  background: var(--cream);
}
.lang-option.active {
  background: #FAECE7;
  color: var(--terracotta-dark);
  font-weight: 600;
}

/* Photo drag & drop zone */
.photo-dropzone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 20px 12px;
  border: 1.5px dashed var(--border);
  border-radius: var(--radius);
  background: var(--cream);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.photo-dropzone:hover,
.photo-dropzone.dragover {
  border-color: var(--terracotta);
  background: #FAECE7;
}
.photo-dropzone-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.photo-dropzone-icon {
  color: var(--text-muted);
}
.photo-dropzone-text {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
}
/* Texte court "Añadir fotos" sur mobile (pas de vrai glisser-déposer sur
   téléphone) ; texte complet "glisser/déposer" gardé pour le desktop. */
.photo-dropzone-text-desktop { display: none; }
@media (min-width: 768px) {
  .photo-dropzone-text-mobile { display: none; }
  .photo-dropzone-text-desktop { display: block; }
}

/* Inline field validation */
.field-error-msg {
  display: none;
  margin: 4px 0 0;
  font-size: 12px;
  color: #C0392B;
}
.field-error-msg.show {
  display: block;
}
.input-error {
  border-color: #C0392B !important;
}

/* Puces "Besoin" du formulaire de publication — remplace le <select>, une
   couleur distincte par besoin (cf. NEEDS[].color en JS, exposée via la
   variable --tag-color inline sur chaque bouton). */
.need-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px;
  border: 1.5px solid transparent;
  border-radius: 14px;
}
.need-tags.input-error {
  border-color: #C0392B !important;
}
.need-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1.5px solid var(--tag-color, var(--border));
  background: var(--panel);
  color: var(--tag-color, var(--text));
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.need-tag:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(43, 26, 18, 0.1);
}
.need-tag.active {
  background: var(--tag-color);
  color: #fff;
  box-shadow: 0 4px 10px -2px rgba(0, 0, 0, 0.25);
}

/* Avatar upload / crop */
.avatar-edit-wrap {
  position: relative;
  flex-shrink: 0;
  width: 56px;
  height: 56px;
}
.profile-avatar-lg img,
.avatar-btn img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.avatar-edit-badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--cream);
  background: var(--terracotta-dark, var(--terracotta));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.avatar-edit-badge:hover { filter: brightness(1.08); }
.avatar-crop-stage {
  display: flex;
  justify-content: center;
  margin: 12px 0;
}
#avatarCropCanvas {
  border-radius: 50%;
  background: var(--panel);
  cursor: grab;
  touch-action: none;
}
#avatarCropCanvas:active { cursor: grabbing; }
.avatar-zoom-range {
  width: 100%;
  margin: 4px 0 18px;
}

/* Owner info on listing detail */
.detail-owner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 14px;
}
.detail-owner-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--terracotta);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 15px;
  flex-shrink: 0;
  overflow: hidden;
}
.detail-owner-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.detail-owner-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.detail-owner-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  margin: 0;
}
.detail-owner-date {
  font-size: 12px;
  color: var(--text);
  opacity: 0.6;
  margin: 0;
}

/* Messaging: inbox bell + badge */
.inbox-btn {
  position: relative;
  background: transparent;
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--anthracite);
  cursor: pointer;
}
.inbox-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  background: var(--terracotta-dark);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  line-height: 1;
}

/* Messaging: conversation list */
.conversation-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.conversation-item .conv-info {
  flex: 1;
  min-width: 0;
}
.conversation-item .conv-name {
  font-weight: 600;
  margin: 0;
  color: var(--text);
}
.conversation-item .conv-listing {
  font-size: 12px;
  color: var(--text-muted);
  margin: 2px 0;
}
.conversation-item .conv-last {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.conversation-item.unread .conv-last {
  color: var(--text);
  font-weight: 600;
}
.conversation-item .conv-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--terracotta);
  flex-shrink: 0;
}
.conversation-item .conv-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.conversation-item .conv-time {
  font-size: 11px;
  color: var(--text-muted);
}

/* Messaging: chat thread */
.chat-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--cream);
  padding: 14px 16px;
  margin-top: 8px;
  box-shadow: 0 1px 3px rgba(43,26,18,0.06);
}
.chat-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.chat-header-info {
  flex: 1;
  min-width: 0;
}
.chat-view-listing-btn {
  flex-shrink: 0;
  background: transparent;
  border: 1.5px solid var(--terracotta);
  color: var(--terracotta-dark);
  font-size: 12px;
  font-weight: 600;
  padding: 7px 12px;
  border-radius: 20px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.chat-view-listing-btn:hover {
  background: var(--terracotta);
  color: #fff;
}
.chat-listing-thumb {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  overflow: hidden;
  background: #F0997B;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}
.chat-listing-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.chat-header .chat-with-name {
  font-weight: 600;
  margin: 0;
}
.chat-header .chat-listing-title {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0;
}
.chat-messages {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 0;
}

.chat-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: auto;
  color: var(--text-muted);
  font-size: 13px;
}
.chat-loading::before {
  content: "";
  width: 14px;
  height: 14px;
  border: 2px solid var(--border);
  border-top-color: var(--terracotta);
  border-radius: 50%;
  animation: chatSpin .7s linear infinite;
}
@keyframes chatSpin {
  to { transform: rotate(360deg); }
}
.chat-bubble {
  max-width: 75%;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.4;
  word-wrap: break-word;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.chat-bubble.sent {
  align-self: flex-end;
  background: var(--terracotta);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.chat-bubble.received {
  align-self: flex-start;
  background: var(--panel);
  border: 1px solid var(--border);
  border-bottom-left-radius: 4px;
}
.chat-bubble .chat-time {
  display: block;
  font-size: 10px;
  opacity: 0.7;
  margin-top: 4px;
}
.chat-input-row {
  display: flex;
  gap: 8px;
  padding: 12px 0 4px;
  border-top: 1px solid var(--border);
}
.chat-input-row input {
  flex: 1;
  padding: 10px 14px;
  border-radius: 20px;
  border: 1px solid var(--border);
  font-size: 14px;
  font-family: inherit;
}
.chat-input-row .btn-primary {
  padding: 10px 20px;
  border-radius: 20px;
  width: auto;
  flex-shrink: 0;
  white-space: nowrap;
}

/* Écrans Messages (inbox) / Chat — bases communes mobile + desktop. Le
   padding/hauteur vivaient auparavant en style inline ; ils sont ici pour
   pouvoir être proprement redéfinis au-delà de 768px (cf. plus bas). */
.screen-inbox-panel { padding: 16px 20px; }
.screen-chat-panel {
  padding: 16px 20px;
  height: calc(var(--vvh, 100vh) - 60px);
  box-sizing: border-box;
  flex-direction: column;
}

.messages-title { margin: 4px 0 14px; font-size: 20px; }

.inbox-search-wrap { margin-bottom: 12px; }
.inbox-search-input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
  font-size: 14px;
  font-family: inherit;
  color: var(--text);
}
.inbox-search-input::placeholder { color: var(--text-muted); }

/* Miniature produit dans la liste des conversations, à la place du rond
   d'initiales générique — aide surtout à distinguer plusieurs conversations
   sur des annonces différentes en un coup d'œil. */
.conv-thumb {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  overflow: hidden;
  background: #F0997B;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  color: #fff;
  font-weight: 600;
}
.conv-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Conversation active : fond doux + léger contour bordeaux pour repérer tout
   de suite quel chat est ouvert dans le panneau de droite (desktop). */
.conversation-item {
  border-radius: 12px;
  padding: 12px 10px;
  transition: background .15s ease;
}
.conversation-item.active {
  background: #F8F6F0;
  box-shadow: inset 0 0 0 1.5px var(--terracotta-dark);
}

.chat-empty-state {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 8px;
  color: var(--text-muted);
  text-align: center;
  padding: 20px;
}
.chat-empty-state .empty-icon { font-size: 40px; }

/* Split-screen desktop : liste des conversations à gauche, fil de discussion
   à droite, tous deux visibles en permanence dès qu'on est dans "Messages".
   Sur mobile, #messagesDesktopWrap est display:contents (aucun effet), donc
   la navigation écran par écran existante n'est pas touchée. */
#messagesDesktopWrap { display: contents; }

@media (min-width: 768px) {
  #messagesDesktopWrap {
    display: flex;
    align-items: stretch;
    max-width: 1200px;
    margin: 16px auto 24px;
    height: calc(var(--vvh, 100vh) - 76px);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    background: var(--panel);
    box-shadow: 0 4px 20px rgba(43, 26, 18, 0.06);
  }

  /* Ni l'inbox ni le chat ne sont la vue active (ex: on est sur une autre
     page) : la boîte elle-même disparaît au lieu de laisser un cadre blanc
     vide. Uniquement en desktop — sur mobile le wrapper reste display:contents
     dans tous les cas, donc cette règle n'a aucun effet à corriger là-bas. */
  #messagesDesktopWrap.messaging-inactive {
    display: none;
  }

  .screen-inbox-panel {
    width: 360px;
    flex: 0 0 360px;
    border-right: 1px solid var(--border);
    height: 100%;
    overflow-y: auto;
    box-sizing: border-box;
  }

  .screen-chat-panel {
    flex: 1 1 auto;
    height: 100%;
    padding: 0;
  }

  #messagesDesktopWrap .back-btn { display: none; }

  .chat-card {
    height: 100%;
    margin-top: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 20px 24px;
  }
}

/* Rounded custom scrollbar for modal sheets */
.sheet::-webkit-scrollbar {
  width: 8px;
}
.sheet::-webkit-scrollbar-track {
  background: transparent;
}
.sheet::-webkit-scrollbar-thumb {
  background: rgba(43, 26, 18, 0.25);
  border-radius: 10px;
}
.sheet::-webkit-scrollbar-thumb:hover {
  background: rgba(43, 26, 18, 0.4);
}
.sheet {
  scrollbar-width: thin;
  scrollbar-color: rgba(43, 26, 18, 0.25) transparent;
}


.btn-outline {
  width: 100%;
  background: transparent;
  color: var(--terracotta-dark);
  border: 2px solid var(--terracotta-dark);
  border-radius: 12px;
  padding: 11px;
  font-size: 15px;
  font-weight: 600;
  margin-top: 8px;
  cursor: pointer;
}
.btn-outline:hover {
  background: rgba(43, 26, 18, 0.06);
}

/* ==========================================
   Phase 3 : animations au survol (desktop) & finitions
   ========================================== */
@media (hover: hover) {
  .btn-primary {
    transition: background .15s ease, transform .1s ease;
  }
  .btn-primary:hover:not(:disabled) {
    background: var(--terracotta-dark);
  }
  .btn-primary:active:not(:disabled) { transform: scale(0.98); }

  .btn-secondary {
    transition: background .15s ease;
    border-radius: 10px;
  }
  .btn-secondary:hover {
    background: rgba(43, 26, 18, 0.06);
  }

  .fab button {
    transition: transform .15s ease, box-shadow .15s ease;
  }
  .fab button:hover {
    transform: scale(1.06);
    box-shadow: 0 16px 34px -6px rgba(200, 82, 54, 0.48), 0 6px 14px rgba(200, 82, 54, 0.26);
  }

  .need-card:hover,
  .need-card:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22), 0 4px 10px rgba(0, 0, 0, 0.14);
  }

  .location-btn {
    transition: background .15s ease;
  }
  .location-btn:hover {
    background: #F5DCD2 !important;
  }

  .avatar-btn, .inbox-btn, .burger-btn {
    transition: background .15s ease;
  }
  .inbox-btn:hover, .burger-btn:hover {
    background: rgba(43, 26, 18, 0.06);
  }

  .tab-btn {
    transition: background .15s ease, color .15s ease;
  }
  .tab-btn:hover:not(.active) {
    background: rgba(43, 26, 18, 0.05);
  }

  .step-card, .faq-item {
    transition: transform .15s ease, box-shadow .15s ease;
  }
  .step-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  }
  .faq-item:hover {
    border-color: var(--terracotta);
  }

  .owners-banner-cta {
    transition: transform .15s ease;
  }
  .owners-banner-cta:hover {
    transform: translateY(-2px);
  }

  .topbar-nav-link, .mobile-menu-link {
    transition: opacity .15s ease, background .15s ease;
  }
  .mobile-menu-link:hover {
    background: rgba(43, 26, 18, 0.05);
    border-radius: 8px;
  }
}

/* ==========================================
   Calendrier de réservation (flatpickr) : mêmes couleurs que le reste de
   l'app, et jours déjà réservés bien visibles (rouge/barré) plutôt que le
   simple grisé par défaut.
   ========================================== */
.flatpickr-calendar {
  font-family: inherit;
  box-shadow: 0 8px 24px rgba(43, 26, 18, 0.16);
  border-radius: var(--radius);
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background: var(--terracotta-dark);
  border-color: var(--terracotta-dark);
}
.flatpickr-day:hover {
  background: #F4F0EA;
}
.flatpickr-day.today {
  border-color: var(--terracotta);
}
/* Jours indisponibles (déjà réservés, ou avant aujourd'hui) : fond rouge
   pâle + texte barré, pour qu'on comprenne d'un coup d'œil que c'est pris. */
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
  background: #FBEAEA;
  color: #B23B3B;
  text-decoration: line-through;
  opacity: 0.85;
  cursor: not-allowed;
}
.flatpickr-months .flatpickr-month,
.flatpickr-current-month .flatpickr-monthDropdown-months,
span.flatpickr-weekday {
  color: var(--terracotta-deep);
}
.flatpickr-day.flatpickr-disabled.today {
  border-color: transparent;
}

#rentalStartDate, #rentalEndDate {
  cursor: pointer;
  background: var(--panel);
}

/* ==========================================
   Audit UX/UI : navigation basse mobile, skeleton loader, toggle
   gratuit/payant, galerie swipeable, recherche compacte desktop.
   ========================================== */

/* Sur mobile, favoris et messages basculent dans la barre basse : on retire
   les icônes équivalentes du header pour l'alléger. Le profil reste
   accessible via le menu burger. */
@media (max-width: 767px) {
  .fav-header-btn, .inbox-btn { display: none !important; }
  /* .avatar-btn (règle plus bas dans ce fichier, "forcer le gras de
     l'avatar") remet display:flex sans condition de largeur, ce qui
     rendait ce bouton visible sur mobile malgré .avatar-btn-desktop.
     Le profil est désormais dans la barre basse : on force sa disparition
     ici, en dernier dans la cascade, pour ne plus avoir les deux. */
  .avatar-btn-desktop { display: none !important; }
}

/* Barre de navigation basse mobile */
.bottom-nav {
  display: none;
}

@media (max-width: 767px) {
  .bottom-nav {
    display: flex;
    align-items: center;
    justify-content: space-around;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(64px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: rgba(253, 249, 246, 0.86);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-top: 1px solid var(--border);
    z-index: 45;
  }

  body.chat-fullscreen .bottom-nav { display: none; }

  #app { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }

  .fab { display: none !important; }

  /* Sans ça, la bannière cookie (position: fixed, bottom: 0) se pose
     directement par-dessus la barre de navigation basse au lieu de flotter
     au-dessus : on la remonte de la hauteur de la barre. */
  .cookie-banner { bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
}

.bottom-nav-item {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: transparent;
  border: none;
  padding: 6px 0;
  color: var(--text-muted);
}

.bottom-nav-item .bottom-nav-icon { position: relative; display: flex; }

.bottom-nav-label {
  font-size: 10.5px;
  font-weight: 600;
}

.bottom-nav-item.active {
  color: var(--terracotta);
}

.bottom-nav-publish {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--terracotta);
  color: white;
  font-size: 26px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-14px);
  box-shadow: 0 12px 28px -6px rgba(200, 82, 54, 0.4), 0 4px 12px rgba(200, 82, 54, 0.22);
}

.bottom-nav-publish:active { transform: translateY(-14px) scale(0.94); }

/* Recherche compacte desktop : apparaît dans le header une fois scrollé,
   pour ne pas obliger à remonter tout en haut pour relancer une recherche. */
.topbar-search-btn {
  display: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  color: var(--anthracite);
  align-items: center;
  justify-content: center;
  transition: background .15s, opacity .15s;
  opacity: 0;
  pointer-events: none;
}

@media (min-width: 768px) {
  .topbar-search-btn { display: flex; }
  .topbar.scrolled .topbar-search-btn { opacity: 1; pointer-events: auto; }
  .topbar-search-btn:hover { background: #FAECE7; }
}

/* Toggle segmenté Gratuit / Payant (feuille de publication) */
.solidaire-toggle {
  display: flex;
  gap: 4px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px;
  margin-bottom: 10px;
}

.solidaire-toggle-btn {
  flex: 1;
  padding: 9px 6px;
  border-radius: 8px;
  background: transparent;
  border: none;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
  text-align: center;
  transition: background .15s ease, color .15s ease;
}

.solidaire-toggle-btn[data-mode="free"].active {
  background: var(--vert-profond);
  color: #fff;
}

.solidaire-toggle-btn[data-mode="paid"].active {
  background: var(--terracotta);
  color: #fff;
}

/* Galerie photo swipeable (fiche annonce) */
.detail-hero {
  touch-action: pan-y;
  cursor: grab;
}

.detail-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: -10px 0 14px;
}

.detail-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--border);
  transition: background .15s ease, transform .15s ease;
}

.detail-dot.active {
  background: var(--terracotta);
  transform: scale(1.25);
}

/* Skeleton loader (grille d'annonces, le temps du premier chargement) */
.skeleton-card {
  border-radius: 24px;
  overflow: hidden;
  background: var(--panel);
  box-shadow: 0 6px 24px rgba(43, 26, 18, 0.06);
}

.skeleton-thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
}

.skeleton-thumb,
.skeleton-line {
  background: linear-gradient(100deg, #EFE6DE 30%, #F8F2EC 50%, #EFE6DE 70%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.4s ease-in-out infinite;
}

.skeleton-line {
  height: 10px;
  border-radius: 6px;
  margin: 10px 12px;
}

.skeleton-line--title { width: 70%; }
.skeleton-line--sub { width: 45%; margin-top: 8px; margin-bottom: 14px; }

@keyframes skeletonShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}