/* =====================================================
   Be Estate — Design system partagé
   Inclure dans toutes les pages via <link rel="stylesheet" href="styles.css">
   après le CDN Tailwind et tailwind-config.js
   ===================================================== */

/* Base */
html { scroll-behavior: smooth; }
body {
  font-family: 'Outfit', system-ui, sans-serif;
  background: #FAF8F3;
  color: #2A2720;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.font-serif-italic { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; }
.ease-luxe { transition-timing-function: cubic-bezier(0.32, 0.72, 0, 1); }

/* Sélection de texte à la marque + focus clavier visible (a11y) */
::selection { background: #C8831A; color: #FFFFFF; }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2px solid #C8831A;
  outline-offset: 3px;
  border-radius: 6px;
}

/* ——— Nav pill ——— */
.nav-pill {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border: 1px solid rgba(42, 39, 32, 0.06);
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 8px 32px -12px rgba(42, 39, 32, 0.18);
}

/* ——— Boutons ——— */
.btn-primary {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 18px 14px 22px;
  background: #2A2720; color: #FFFFFF;
  border-radius: 999px;
  font-weight: 600; font-size: 14px;
  transition: all .35s cubic-bezier(0.32, 0.72, 0, 1);
  border: none; cursor: pointer; text-decoration: none;
  position: relative; overflow: hidden;
}
/* Reflet lumineux qui balaie le bouton au survol */
.btn-primary::before {
  content: '';
  position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.20), transparent);
  transform: skewX(-18deg);
  transition: left .65s cubic-bezier(0.32, 0.72, 0, 1);
  pointer-events: none;
}
.btn-primary:hover::before { left: 130%; }
@media (prefers-reduced-motion: reduce) { .btn-primary::before { display: none; } }
.btn-primary:hover { background: #4A4639; transform: translateY(-1px); box-shadow: 0 12px 28px -12px rgba(42, 39, 32, 0.45); }
.btn-primary:active { transform: translateY(0) scale(0.98); }
.btn-primary .icon-wrap {
  width: 28px; height: 28px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.14);
  transition: transform .35s cubic-bezier(0.32, 0.72, 0, 1);
}
.btn-primary:hover .icon-wrap { transform: translateX(3px); }

.btn-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 20px; border-radius: 999px;
  border: 1px solid rgba(42, 39, 32, 0.16);
  color: #2A2720; font-weight: 500; font-size: 14px;
  background: transparent; cursor: pointer; text-decoration: none;
  transition: all .35s cubic-bezier(0.32, 0.72, 0, 1);
}
.btn-ghost:hover { background: #FFFFFF; border-color: rgba(42, 39, 32, 0.35); }

/* ——— Choix / menus ——— */
select:not([multiple]) {
  appearance: none !important;
  -webkit-appearance: none !important;
  min-height: 46px;
  padding-right: 44px !important;
  background-color: #FFFFFF !important;
  background-image:
    linear-gradient(45deg, transparent 50%, #2A2720 50%),
    linear-gradient(135deg, #2A2720 50%, transparent 50%) !important;
  background-position:
    calc(100% - 20px) 52%,
    calc(100% - 14px) 52% !important;
  background-size: 6px 6px, 6px 6px !important;
  background-repeat: no-repeat !important;
  border: 1px solid rgba(42, 39, 32, 0.14) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 10px 24px -22px rgba(42, 39, 32,.32);
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
select:not([multiple]):hover {
  border-color: rgba(42, 39, 32, 0.28) !important;
  transform: translateY(-1px);
}
select:not([multiple]):focus {
  border-color: #3A362D !important;
  box-shadow: 0 0 0 4px rgba(58, 54, 45,.08), 0 14px 28px -24px rgba(42, 39, 32,.4);
}

.choice-grid {
  display: grid;
  gap: 8px;
}
.choice-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.choice-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.choice-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(42, 39, 32,.12);
  background: #FFFFFF;
  color: #3A362D;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
  cursor: pointer;
  transition: background .25s ease, border-color .25s ease, color .25s ease, transform .25s ease;
}
.choice-pill:hover {
  transform: translateY(-1px);
  border-color: rgba(42, 39, 32,.28);
}
.choice-pill.selected {
  background: #2A2720;
  border-color: #2A2720;
  color: #FFFFFF;
}
@media (max-width: 640px) {
  .choice-grid.cols-2,
  .choice-grid.cols-3 { grid-template-columns: 1fr; }
}

/* ——— Eyebrow ——— */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: #4A4639;
}
.eyebrow::before { content: ''; width: 24px; height: 1px; background: #C8831A; }
.eyebrow.center::before,
.eyebrow.center::after { content: ''; width: 24px; height: 1px; background: #C8831A; }
.eyebrow.center::after { display: inline-block; }

/* ——— Langue ——— */
.lang-btn { padding: 6px 10px; font-size: 11px; font-weight: 500; color: #475569; border-radius: 999px; transition: all .25s ease; letter-spacing: 0.05em; background: none; border: none; cursor: pointer; }
.lang-btn:hover { color: #2A2720; }
.lang-btn.lang-active { background: #2A2720; color: #FFFFFF; }
#lang-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }

/* ——— Hamburger ——— */
/* ——— Bandeau pilule IA (promu depuis index.astro le 24/07/2026 —
       utilisé par annonces/location pour l'entrée recherche IA ;
       index garde sa copie locale identique) ——— */
.estim-banner {
  display: inline-flex; align-items: center; gap: 10px;
  flex-wrap: wrap; justify-content: center;
  padding: 9px 18px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(42, 39, 32, 0.09);
  font-size: 13px;
  transition: border-color .3s ease, transform .3s cubic-bezier(0.32, 0.72, 0, 1);
}
.estim-banner:hover { border-color: rgba(200, 131, 26, 0.5); transform: translateY(-1px); }
.estim-badge {
  padding: 2px 9px; border-radius: 999px;
  background: rgba(200, 131, 26, 0.12); color: #A96B10;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
}

/* ——— bee-select : listbox custom partagée (extraite de la home le
   04/08/2026 — public/bee-select.js). Le style « transparent » de base sert
   la barre de recherche de la home ; la variante .bee-select--field imite un
   champ de formulaire (.field/.estim-field) pour les selects natifs
   améliorés via data-bee-enhance. ——— */
.bee-select { position: relative; }
.bee-select-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; background: transparent; border: none; padding: 0;
  font-family: inherit; font-size: 14px; font-weight: 500; color: #2A2720;
  cursor: pointer; text-align: left;
}
.bee-select-chevron {
  color: #A39E8F; flex-shrink: 0;
  transition: transform .3s cubic-bezier(0.32, 0.72, 0, 1);
}
.bee-select.open .bee-select-chevron { transform: rotate(180deg); }
.bee-select:hover .bee-select-chevron { color: #C8831A; }
.bee-select-menu {
  position: absolute; top: calc(100% + 12px); left: -8px; z-index: 40;
  min-width: calc(100% + 32px);
  margin: 0; padding: 6px; list-style: none;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border: 1px solid rgba(42, 39, 32, 0.08);
  border-radius: 16px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 24px 60px -18px rgba(42, 39, 32, 0.28),
    0 4px 12px -6px rgba(42, 39, 32, 0.10);
  animation: bee-menu-in .25s cubic-bezier(0.32, 0.72, 0, 1);
}
.bee-select-menu-right { left: auto; right: -8px; }
@keyframes bee-menu-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}
.bee-select-option {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 9px 12px; border-radius: 11px;
  font-size: 13.5px; font-weight: 500; color: #2A2720;
  cursor: pointer; white-space: nowrap; outline: none;
  transition: background .2s ease;
}
.bee-select-option:hover, .bee-select-option:focus-visible { background: rgba(200, 131, 26, 0.10); }
.bee-select-option::after {
  content: ''; width: 14px; height: 14px; flex-shrink: 0; opacity: 0;
  background: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 7.5L5.5 10.5L11.5 3.5' stroke='%23C8831A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.bee-select-option[aria-selected="true"]::after { opacity: 1; }
/* Variante chip (filtres secondaires de la home) */
.bee-select--chip .bee-select-trigger {
  width: auto; padding: 6px 12px; border-radius: 999px;
  border: 1px solid rgba(42, 39, 32, 0.12);
  background: rgba(255, 255, 255, 0.8);
  font-size: 11.5px; font-weight: 600; color: #4A4639;
  transition: border-color .3s cubic-bezier(0.32, 0.72, 0, 1);
}
.bee-select--chip .bee-select-trigger:hover,
.bee-select--chip .bee-select-trigger:focus-visible { border-color: rgba(200, 131, 26, 0.55); }
.bee-select--chip .bee-select-menu { left: 0; min-width: 160px; }
/* Variante champ de formulaire (selects natifs améliorés) */
.bee-select--field .bee-select-trigger {
  background: #FAF8F3;
  border: 1px solid rgba(42, 39, 32, 0.09);
  border-radius: 16px;
  padding: 12px 16px;
  transition: border-color .3s ease;
}
.bee-select--field .bee-select-trigger:hover,
.bee-select--field .bee-select-trigger:focus-visible { border-color: rgba(200, 131, 26, 0.55); }
.bee-select--field .bee-select-menu { left: 0; min-width: 100%; }
.bee-select--field select[data-bee-native] {
  position: absolute; width: 1px; height: 1px; opacity: 0;
  pointer-events: none; margin: 0; padding: 0; border: 0;
}

/* ——— Mise en avant IA (chantier « poids visuel », 04/08/2026) ———
   Deux niveaux promus ici pour être PARTAGÉS (ne pas réinventer par page) :
   - .ia-band    : bande sombre pleine largeur (home) — le gros bloc.
   - .ia-callout : carte intermédiaire (annonces/location) — plus visible que
                   l'ancienne pilule .estim-banner, moins lourde que la bande.
   La pilule .estim-banner reste pour les entrées discrètes (hero home). */
.ia-band {
  position: relative; overflow: hidden;
  border-radius: 32px;
  background: linear-gradient(135deg, #2A2720, #14130F);
  padding: 40px 36px;
  color: #FFFFFF;
}
.ia-band::after {
  content: ""; position: absolute; top: -90px; right: -60px;
  width: 260px; height: 260px; border-radius: 999px;
  background: rgba(200, 131, 26, 0.22); filter: blur(70px);
  pointer-events: none;
}
.ia-band-inner { position: relative; display: grid; gap: 28px; }
@media (min-width: 768px) { .ia-band-inner { grid-template-columns: 1.05fr 1fr; align-items: center; } .ia-band { padding: 48px 46px; } }
.ia-band-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #E5B458; }
.ia-band-title { margin-top: 12px; font-size: clamp(24px, 3.2vw, 34px); font-weight: 700; letter-spacing: -0.015em; line-height: 1.12; }
.ia-band-sub { margin-top: 12px; font-size: 14.5px; line-height: 1.6; color: rgba(255, 255, 255, 0.65); max-width: 46ch; }
.ia-band-cta {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 22px;
  background: #C8831A; color: #FFFFFF;
  padding: 13px 24px; border-radius: 999px;
  font-size: 14px; font-weight: 700;
  transition: background .3s ease, transform .3s cubic-bezier(0.32, 0.72, 0, 1);
}
.ia-band-cta:hover { background: #E5B458; transform: translateY(-1px); }
.ia-band-list { display: grid; gap: 10px; }
.ia-band-item {
  display: block; padding: 13px 16px; border-radius: 16px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.09);
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.ia-band-item:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(229, 180, 88, 0.45); transform: translateX(3px); }
.ia-band-item-title { font-size: 13.5px; font-weight: 700; color: #FFFFFF; }
.ia-band-item-sub { margin-top: 2px; font-size: 12px; color: rgba(255, 255, 255, 0.55); line-height: 1.45; }

.ia-callout {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 18px 22px; border-radius: 20px;
  background: linear-gradient(120deg, rgba(200, 131, 26, 0.1), rgba(255, 255, 255, 0.75));
  border: 1px solid rgba(200, 131, 26, 0.3);
  transition: border-color .3s ease, transform .3s cubic-bezier(0.32, 0.72, 0, 1), box-shadow .3s ease;
}
.ia-callout:hover { border-color: rgba(200, 131, 26, 0.6); transform: translateY(-2px); box-shadow: 0 18px 44px -26px rgba(200, 131, 26, 0.5); }
.ia-callout-icon {
  width: 42px; height: 42px; border-radius: 13px; flex-shrink: 0;
  background: rgba(200, 131, 26, 0.14); color: #8E5C0D;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 19px;
}
.ia-callout-title { font-size: 14.5px; font-weight: 700; color: #2A2720; }
.ia-callout-sub { font-size: 12.5px; color: rgba(42, 39, 32, 0.6); margin-top: 1px; }
.ia-callout-cta { margin-left: auto; font-size: 13px; font-weight: 700; color: #8E5C0D; white-space: nowrap; }

/* ——— Pastilles raccourcis mobile (sous le header) ——— */
.mobile-chip {
  pointer-events: auto; /* le conteneur est pointer-events-none (header fixed) */
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(42, 39, 32, 0.09);
  box-shadow: 0 8px 24px -14px rgba(42, 39, 32, 0.35);
  font-size: 12px; font-weight: 600; color: #2A2720;
  text-decoration: none; white-space: nowrap;
}
.mobile-chip svg { color: #C8831A; flex-shrink: 0; }
.mobile-chip:active { transform: scale(0.97); }

/* display:block indispensable : sur un span inline, width/height sont ignorés
   et les 3 barres absolues s'effondrent (burger invisible — bug depuis la
   migration Astro, corrigé le 23/07/2026). */
.hamburger { display: block; width: 22px; height: 14px; position: relative; }
.hamburger span {
  display: block; height: 1.5px; background: #2A2720; border-radius: 1px;
  position: absolute; left: 0; right: 0;
  transition: all .35s cubic-bezier(0.32, 0.72, 0, 1);
}
.hamburger span:nth-child(1) { top: 2px; }
.hamburger span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.hamburger span:nth-child(3) { bottom: 2px; }
.hamburger.open span:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { bottom: 50%; transform: translateY(50%) rotate(-45deg); }

/* ——— Footer ——— */
.footer-link { display: block; padding: 6px 0; font-size: 13px; color: #94A3B8; transition: color .25s ease; text-decoration: none; }
.footer-link:hover { color: #FFFFFF; }

/* ——— Reveal animation ——— */
/* Pas de filter:blur (paint coûteux) ni de durée >500ms : la page paraissait lente. */
[data-reveal] {
  opacity: 0; transform: translateY(16px);
  transition:
    opacity 450ms cubic-bezier(0.32, 0.72, 0, 1),
    transform 450ms cubic-bezier(0.32, 0.72, 0, 1);
}
/* ⚠️ `transform: none` et NON `translateY(0)` (04/08/2026) : un transform, même
   identité, crée un CONTEXTE D'EMPILEMENT. Chaque bloc [data-reveal] en devenait
   un, à z-index auto, peint dans l'ordre du DOM — un menu déroulant ouvert dans
   un bloc (z-index: 40 sur .bee-select-menu) restait donc prisonnier de ce bloc
   et passait SOUS les blocs suivants. Symptômes signalés par Nico le 04/08/2026
   sur /annonces : menus de recherche rapide masqués par le callout IA, menu de
   tri masqué par la grille de cartes. Même famille que le piège
   `.search-card { z-index: 2 }` de la home. Ne pas remettre translateY(0). */
[data-reveal].revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ——— Grain overlay ——— */
.grain::before {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .5;
}

/* ——— Listing card (partagé index / annonces / location) ——— */
.listing-card {
  background: #FFFFFF;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(42, 39, 32, 0.06);
  transition: all .4s cubic-bezier(0.32, 0.72, 0, 1);
}
.listing-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 48px -20px rgba(42, 39, 32, 0.25);
  border-color: rgba(42, 39, 32, 0.12);
}
.listing-card .img-wrap { position: relative; overflow: hidden; aspect-ratio: 4/3; }
.listing-card .img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(0.32, 0.72, 0, 1); }
.listing-card:hover .img-wrap img { transform: scale(1.05); }

/* ——— Heart button & badge (partagé index / annonces / location) ——— */
.heart-btn {
  position: absolute; top: 12px; right: 12px;
  width: 36px; height: 36px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  transition: all .2s ease;
  cursor: pointer; border: none;
  color: #2A2720;
}
.heart-btn:hover { background: #FFFFFF; color: #C8831A; transform: scale(1.05); }
.heart-btn.liked { color: #C8831A; }
.heart-btn.liked svg { fill: #C8831A; }

.listing-badge {
  position: absolute; top: 12px; left: 12px;
  padding: 4px 10px;
  background: rgba(42, 39, 32, 0.92);
  backdrop-filter: blur(6px);
  color: #FFFFFF;
  font-size: 10px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 999px;
}
.listing-badge.gold { background: rgba(200, 131, 26, 0.94); }


/* ===== Barre de recherche classique (promue depuis index.astro le
   16/08/2026) — la home est passée à la chatbox IA, la barre par filtres
   a déménagé en haut d'/annonces. Styles partagés, pas dupliqués. ===== */
/* Barre de recherche continue : une seule bande blanche, fins séparateurs
   verticaux entre les champs (pattern atHome.lu), CTA gold intégré. */
.search-bar {
  display: flex; align-items: stretch;
  background: #FFFFFF;
  border: 1px solid rgba(42, 39, 32, 0.08);
  border-radius: 18px;
  box-shadow: 0 2px 10px -6px rgba(42, 39, 32, 0.10);
}
.search-field {
  flex: 1 1 0; min-width: 0;
  padding: 9px 16px 8px;
}
.search-field + .search-field { border-left: 1px solid rgba(42, 39, 32, 0.08); }
.search-field-q { flex: 1.8 1 0; }
/* Chatbox de la home (16/08/2026) — remplace .search-bar, qui a
   déménagé en haut d'/annonces. Même famille visuelle : fond clair,
   CTA gold (.search-cta réutilisé, pas de 2e CTA doré). */
.chatbox { margin-top: 4px; }
.chatbox-row {
  display: flex; align-items: center; gap: 10px;
  background: #FFFFFF;
  border: 1px solid rgba(42, 39, 32, 0.1);
  border-radius: 999px;
  padding: 6px 6px 6px 18px;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.chatbox-row:focus-within {
  border-color: rgba(200, 131, 26, 0.55);
  box-shadow: 0 0 0 4px rgba(200, 131, 26, 0.1);
}
.chatbox-spark { font-size: 15px; line-height: 1; flex-shrink: 0; }
.chatbox-input {
  flex: 1; min-width: 0; border: none; outline: none; background: transparent;
  font-size: 15px; color: #2A2720; padding: 12px 0;
}
.chatbox-input::placeholder { color: rgba(42, 39, 32, 0.4); }
.chatbox-hint {
  margin-top: 8px; padding: 0 4px;
  font-size: 11.5px; line-height: 1.5; color: rgba(42, 39, 32, 0.5);
}
.chatbox-chips { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.chatbox-chip {
  padding: 7px 13px; border-radius: 999px;
  border: 1px solid rgba(42, 39, 32, 0.12);
  background: rgba(255, 255, 255, 0.7);
  font-size: 12px; font-weight: 600; color: #4A4639;
  cursor: pointer; text-align: left;
  transition: border-color .25s ease, background .25s ease;
}
.chatbox-chip:hover { border-color: rgba(200, 131, 26, 0.55); background: #FFFFFF; }
@media (max-width: 640px) {
  .chatbox-row { flex-wrap: wrap; border-radius: 22px; padding: 10px; }
  .chatbox-input { flex-basis: calc(100% - 30px); padding: 6px 0; }
  .chatbox-row .search-cta { width: 100%; margin: 4px 0 0; }
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Selects natifs (data-bee-enhance) DANS la barre de recherche : la home
   n'utilisait que des listbox custom ; /annonces garde ses <select> réels
   (ids lus par applyListingFilters) — on les aligne visuellement. */
.search-select {
  appearance: none; -webkit-appearance: none;
  border: none; background: transparent;
  font-weight: 600; color: #2A2720; cursor: pointer;
  padding-right: 18px;
}
.search-field [data-bee-select] .bee-select-trigger,
.search-field .bee-select-trigger { padding-left: 0; }


.search-cta {
  align-self: stretch;
  margin: 6px; padding: 0 26px;
  border-radius: 13px; border: none;
  background: #C8831A; color: #FFFFFF;
  font-family: inherit; font-weight: 600; font-size: 14px;
  cursor: pointer; white-space: nowrap;
  transition: background .3s ease, transform .3s cubic-bezier(0.32, 0.72, 0, 1), box-shadow .3s ease;
}
.search-cta:hover {
  background: #A96B10; transform: translateY(-1px);
  box-shadow: 0 10px 24px -10px rgba(200, 131, 26, 0.55);
}
.search-cta:active { transform: translateY(0) scale(0.98); }
@media (max-width: 767px) {
  .search-bar { flex-direction: column; align-items: stretch; }
  .search-field + .search-field { border-left: none; border-top: 1px solid rgba(42, 39, 32, 0.08); }
  .search-cta { margin: 8px; padding: 13px; }
}

/* ============================================================
   THÈME SOMBRE DE L'ESPACE PRO (/pro/*) — call Thomas 16/08/2026.
   « L'utilisateur doit sentir instantanément qu'il est côté pro. »
   Décision : PAS d'orange — on reste dans l'identité (navy profond,
   texte cream, accents gold). Tout est scopé sous `body.pro-dark`
   (posé par bodyClass sur les seules pages /pro/*) : le reste du site
   n'est pas touché, Nav et Footer publics gardent leur apparence
   ailleurs.
   ⚠️ Le PDF de devis reste CLAIR (document imprimable) — voir le bloc
   @media print en fin de section.
   ============================================================ */
body.pro-dark {
  background: #14130F;      /* navy-950 */
  color: #F2F0E8;           /* cream-100 */
}
/* Le grain/texture de fond du site clair n'a pas lieu d'être ici */
body.pro-dark::before { display: none; }

/* --- Surfaces : les cartes blanches deviennent des cartes navy --- */
body.pro-dark .bg-white { background-color: #1C1A15; }         /* navy-900 */
body.pro-dark .bg-cream-100\/50,
body.pro-dark .bg-cream-100\/60,
body.pro-dark .bg-cream-50 { background-color: #23211A; }
body.pro-dark .border-navy-100\/60,
body.pro-dark .border-navy-100,
body.pro-dark .border-navy-100\/80 { border-color: rgba(242, 240, 232, 0.12); }
body.pro-dark .border-dashed { border-color: rgba(242, 240, 232, 0.18); }

/* --- Texte --- */
body.pro-dark .text-navy-900 { color: #F2F0E8; }
body.pro-dark .text-navy-800 { color: #EAE7DC; }
body.pro-dark .text-navy-600 { color: #B0AB9C; }
body.pro-dark .text-navy-700\/70,
body.pro-dark .text-navy-700\/65,
body.pro-dark .text-navy-700\/60,
body.pro-dark .text-navy-700\/55,
body.pro-dark .text-navy-700\/50,
body.pro-dark .text-navy-700\/45 { color: #B0AB9C; }
body.pro-dark .text-gold { color: #E5B458; }        /* gold.soft : AA sur navy */
body.pro-dark .eyebrow { color: #E5B458; }

/* --- Nav & footer sur /pro : teintés pour l'effet « je change d'univers » --- */
body.pro-dark .nav-pill {
  background: rgba(28, 26, 21, 0.92);
  border-color: rgba(242, 240, 232, 0.12);
  color: #F2F0E8;
}
body.pro-dark .nav-pill a,
body.pro-dark .nav-pill button { color: #EAE7DC; }
body.pro-dark .nav-pill .text-navy-800 { color: #EAE7DC; }
body.pro-dark footer { background: #14130F; }

/* --- Champs de formulaire --- */
body.pro-dark .estim-field,
body.pro-dark .pp-card-next,
body.pro-dark input[type="text"],
body.pro-dark input[type="email"],
body.pro-dark input[type="number"],
body.pro-dark input[type="date"],
body.pro-dark input[type="time"],
body.pro-dark textarea,
body.pro-dark select {
  background: #23211A;
  border-color: rgba(242, 240, 232, 0.14);
  color: #F2F0E8;
}
body.pro-dark .estim-field::placeholder,
body.pro-dark input::placeholder,
body.pro-dark textarea::placeholder { color: rgba(242, 240, 232, 0.35); }
body.pro-dark .estim-label { color: #B0AB9C; }
body.pro-dark .estim-field:focus-visible { border-color: rgba(229, 180, 88, 0.6); }
/* bee-select (widget custom) */
body.pro-dark .bee-select-trigger { background: #23211A; color: #F2F0E8; border-color: rgba(242, 240, 232, 0.14); }
body.pro-dark .bee-select-menu { background: #1C1A15; border-color: rgba(242, 240, 232, 0.14); color: #F2F0E8; }
body.pro-dark .bee-select-option:hover,
body.pro-dark .bee-select-option[aria-selected="true"] { background: rgba(229, 180, 88, 0.14); }

/* --- Boutons --- */
body.pro-dark .btn-primary { background: #E5B458; color: #14130F; }
body.pro-dark .btn-primary:hover { background: #C8831A; color: #FFFFFF; }
body.pro-dark .btn-ghost {
  border-color: rgba(242, 240, 232, 0.2);
  color: #EAE7DC;
  background: transparent;
}
body.pro-dark .btn-ghost:hover { border-color: #E5B458; color: #E5B458; }

/* --- ProNav --- */
body.pro-dark .pro-badge { color: #E5B458; }
body.pro-dark .pro-badge-beta { background: rgba(229, 180, 88, 0.16); color: #E5B458; }
body.pro-dark .pro-tab {
  background: #1C1A15;
  border-color: rgba(242, 240, 232, 0.14);
  color: #B0AB9C;
}
body.pro-dark .pro-tab:hover { border-color: rgba(229, 180, 88, 0.55); color: #EAE7DC; }
body.pro-dark .pro-tab.active { background: #E5B458; border-color: #E5B458; color: #14130F; }

/* --- Pipeline --- */
body.pro-dark .pp-col { background: rgba(242, 240, 232, 0.04); border-color: rgba(242, 240, 232, 0.08); }
body.pro-dark .pp-col-title { color: #B0AB9C; }
body.pro-dark .pp-col-count { background: rgba(242, 240, 232, 0.12); color: #EAE7DC; }
body.pro-dark .pp-card { background: #1C1A15; border-color: rgba(242, 240, 232, 0.12); }
body.pro-dark .pp-card-title { color: #F2F0E8; }
body.pro-dark .pp-card-client { color: #B0AB9C; }
body.pro-dark .pp-card-meta { color: rgba(242, 240, 232, 0.45); }
body.pro-dark .pp-card-next { color: #F2F0E8; }
body.pro-dark .pp-move { background: #23211A; border-color: rgba(242, 240, 232, 0.16); color: #EAE7DC; }
body.pro-dark .pp-move:not(:disabled):hover { border-color: #E5B458; }
/* Alertes : plus clair sur fond sombre (AA) */
body.pro-dark .pp-alert-red { color: #FCA5A5; }
body.pro-dark .pp-alert-amber { color: #F0C070; }
body.pro-dark .pp-quote-link { background: rgba(229, 180, 88, 0.16); color: #E5B458; }
body.pro-dark .pp-quote-link:hover { background: rgba(229, 180, 88, 0.26); }
body.pro-dark .pp-plan-link { background: rgba(147, 197, 253, 0.16); color: #93C5FD; }
body.pro-dark .pp-plan-link:hover { background: rgba(147, 197, 253, 0.26); }
body.pro-dark .pp-site-link { background: rgba(134, 239, 172, 0.16); color: #86EFAC; }
body.pro-dark .pp-site-link:hover { background: rgba(134, 239, 172, 0.26); }

/* --- Badges de statut (devis, chantiers, consultation) : contrastés AA --- */
body.pro-dark .pro-qs-draft,
body.pro-dark .ch-st-open { background: rgba(242, 240, 232, 0.14); color: #EAE7DC; }
body.pro-dark .pro-qs-sent { background: rgba(147, 197, 253, 0.18); color: #93C5FD; }
body.pro-dark .pro-qs-accepted,
body.pro-dark .ch-st-done { background: rgba(134, 239, 172, 0.18); color: #86EFAC; }
body.pro-dark .pro-qs-declined { background: rgba(252, 165, 165, 0.18); color: #FCA5A5; }
body.pro-dark .pro-qs-expired { background: rgba(240, 192, 112, 0.18); color: #F0C070; }
body.pro-dark .ch-margin-ok { color: #86EFAC; }
body.pro-dark .ch-margin-neg { color: #FCA5A5; }
body.pro-dark .ch-margin-none { color: #B0AB9C; }
body.pro-dark .ch-margin-big { color: #F2F0E8; }
body.pro-dark .ch-margin-label { color: #B0AB9C; }

/* --- Listes (devis, chantiers, tarifs, agenda) --- */
body.pro-dark .pro-quote-row,
body.pro-dark .ch-row { background: #1C1A15; border-color: rgba(242, 240, 232, 0.12); }
body.pro-dark .pro-quote-row:hover,
body.pro-dark .ch-row:hover { border-color: rgba(229, 180, 88, 0.5); }
body.pro-dark .pro-quote-number,
body.pro-dark .pro-quote-total,
body.pro-dark .ch-row-client { color: #F2F0E8; }
body.pro-dark .pro-quote-client,
body.pro-dark .pro-quote-date,
body.pro-dark .ch-row-addr { color: #B0AB9C; }
body.pro-dark .pro-item-row,
body.pro-dark .pq-line,
body.pro-dark .ch-exp-row,
body.pro-dark .dc-line { border-bottom-color: rgba(242, 240, 232, 0.1); }
body.pro-dark .pro-order-btn { background: #23211A; border-color: rgba(242, 240, 232, 0.16); color: #EAE7DC; }
body.pro-dark .pro-row-del,
body.pro-dark .md-remove,
body.pro-dark .ch-photo-del { background: #23211A; border-color: rgba(242, 240, 232, 0.16); color: #FCA5A5; }
body.pro-dark .pq-line-total,
body.pro-dark .ch-exp-amount,
body.pro-dark .ch-exp-label { color: #F2F0E8; }
body.pro-dark .ch-exp-meta { color: #B0AB9C; }
body.pro-dark .pq-total-row { color: #B0AB9C; border-bottom-color: rgba(242, 240, 232, 0.1); }
body.pro-dark .pq-total-main { color: #F2F0E8; }
body.pro-dark .estim-chip { background: #23211A; border-color: rgba(242, 240, 232, 0.16); color: #EAE7DC; }
body.pro-dark .estim-chip.active { background: #E5B458; border-color: #E5B458; color: #14130F; }
body.pro-dark .ch-bar { background: rgba(242, 240, 232, 0.14); }
body.pro-dark .ch-bar-fill { background: #E5B458; }

/* --- Agenda --- */
body.pro-dark .ag-view-btn { color: rgba(242, 240, 232, 0.55); }
body.pro-dark .ag-viewswitch { background: rgba(242, 240, 232, 0.07); }
body.pro-dark .ag-view-btn.active { background: #E5B458; color: #14130F; }
body.pro-dark .ag-nav-btn { background: #23211A; border-color: rgba(242, 240, 232, 0.16); color: #EAE7DC; }
body.pro-dark .ag-day-head { background: rgba(242, 240, 232, 0.05); }
body.pro-dark .ag-day-head.today { background: rgba(229, 180, 88, 0.18); }
body.pro-dark .ag-day-name { color: #B0AB9C; }
body.pro-dark .ag-day-num { color: #F2F0E8; }
body.pro-dark .ag-hour-label,
body.pro-dark .ag-gutter-label,
body.pro-dark .ag-month-dayname,
body.pro-dark .ag-month-more { color: rgba(242, 240, 232, 0.45); }
body.pro-dark .ag-day-col,
body.pro-dark .ag-allday-cell,
body.pro-dark .ag-month-cell { background: rgba(242, 240, 232, 0.04); }
body.pro-dark .ag-month-cell.today { background: rgba(229, 180, 88, 0.18); }
body.pro-dark .ag-month-num { color: #EAE7DC; }
body.pro-dark .ag-slot { border-top-color: rgba(242, 240, 232, 0.08); }
body.pro-dark .ag-slot:hover { background: rgba(229, 180, 88, 0.1); }
/* Événements : fonds plus soutenus + texte clair (AA sur navy) */
body.pro-dark .ag-ev-metre { background: rgba(229, 180, 88, 0.22); border-color: #E5B458; color: #F5DFB0; }
body.pro-dark .ag-ev-visite { background: rgba(147, 197, 253, 0.2); border-color: #93C5FD; color: #BFDBFE; }
body.pro-dark .ag-ev-chantier { background: rgba(134, 239, 172, 0.2); border-color: #86EFAC; color: #BBF7D0; }
body.pro-dark .ag-ev-autre { background: rgba(242, 240, 232, 0.14); border-color: #B0AB9C; color: #EAE7DC; }
body.pro-dark .ag-sync { background: rgba(229, 180, 88, 0.08); border-color: rgba(229, 180, 88, 0.3); }
body.pro-dark .ag-sync-sum { color: #E5B458; }
body.pro-dark .ag-sync-url { background: #23211A; border-color: rgba(242, 240, 232, 0.14); color: #EAE7DC; }

/* --- Photos de chantier --- */
body.pro-dark .ch-photo-phase { color: #B0AB9C; }
body.pro-dark .ch-photo-add { background: rgba(229, 180, 88, 0.16); color: #E5B458; }
body.pro-dark .ch-photo-cell { background: rgba(242, 240, 232, 0.06); }
body.pro-dark .ch-photo-empty { color: rgba(242, 240, 232, 0.4); }

/* --- Divers --- */
body.pro-dark .pro-row-saved { color: #86EFAC; }
body.pro-dark code { color: #EAE7DC; }

/* ⚠️ IMPRESSION : le PDF de devis est un DOCUMENT (il part chez le client
   et s'imprime) — il reste CLAIR quoi qu'il arrive. On neutralise le thème
   sombre à l'impression. */
@media print {
  body.pro-dark { background: #FFFFFF; color: #2A2720; }
  body.pro-dark #pq-print-report,
  body.pro-dark #estim-print-report { background: #FFFFFF; color: #2A2720; }
  body.pro-dark #pq-print-report *,
  body.pro-dark #estim-print-report * { color: inherit; }
}