/* ═══════════════════════════════════════════════════════════════
   Match — Entry Points
   ═══════════════════════════════════════════════════════════════ */

:root, [data-theme="light"]{
  --bg:#f7f8fa;
  --surface:#ffffff;
  --s2:#f1f3f7;
  --s3:#e7ebf2;
  --border:#e4e7ee;
  --border-hi:#d3d8e3;
  --text:#14161f;
  --text-dim:#4a5169;
  --muted:#8a93ab;
  --accent:#6b5cf5;
  --accent-hi:#564bd8;
  --accent-dim:rgba(107,92,245,.09);
  --chaud:#d64560;
  --tiede:#c08a2e;
  --froid:#3d7fc2;
  --green:#22a06b;
  --radius-sm:3px;
  --radius:4px;
  --radius-lg:8px;
}

/* ── Frame artboard 1 (header) ── */

/* [v1022] .pg-hero et ses descendants supprimés (legacy mort, migré vers .ph Margot
   en v957). Cf CSS_HIERARCHY.md §2.3. */

.dot-sep{ margin:0 8px; opacity:.4; }

/* [v1022] .pg-hero-r supprimé (legacy mort, 0 usage HTML/JS). */

/* boutons */
.b{
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 12px;
  background:var(--s2);
  border:1px solid var(--border);
  border-radius:var(--radius);
  font:500 12.5px/1 -apple-system, 'Inter', sans-serif;
  color:var(--text);
  cursor:pointer;
  transition:background .1s, border-color .1s;
  white-space:nowrap;
}
.b:hover{ background:var(--s3); border-color:var(--border-hi); }
.b.primary{
  background:var(--text);
  color:var(--bg);
  border-color:var(--text);
  font-weight:600;
}
.b.primary:hover{ background:var(--text-dim); border-color:var(--text-dim); }

/* bouton "Tester un bien" — variante avec accent subtil */

/* table mock */

.num{ font-variant-numeric:tabular-nums; font-weight:500; }
.dim{ color:var(--text-dim); }

/* pills statut */
.pill{
  display:inline-flex; align-items:center; gap:5px;
  padding:2px 8px;
  border-radius:99px;
  font-size:11px;
  font-weight:500;
  border:1px solid;
}

/* ── Callout / annotation ── */

/* ═══════════════════════════════════════════════════════════════
   Palette ⌘K
   ═══════════════════════════════════════════════════════════════ */

kbd{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:18px; height:18px;
  padding:0 5px;
  background:var(--s2);
  border:1px solid var(--border);
  border-radius:3px;
  font:500 10.5px/1 'SF Mono', ui-monospace, monospace;
  color:var(--text-dim);
}

/* ══════════════════════════════════════════════════════════════════════
   [v691] Override pour palette ⌘K existante (search-v2.js)
   Margot avait conçu sa propre palette .ep-cmdk dans ce fichier, mais donna
   utilise .dsv2-* (search-v2.js + search-v2.css). On ajoute juste l'accent
   sur l'item "Tester un bien" pour matcher le brief Margot ("icône violette,
   première position"). Le reste hérite de search-v2.css.
   ════════════════════════════════════════════════════════════════════════ */
.dsv2-shortcut.dsv2-shortcut-accent svg{
  color: var(--accent);
}
.dsv2-shortcut.dsv2-shortcut-accent{
  font-weight:600;
}
.dsv2-shortcut.dsv2-shortcut-accent .sc-kbd{
  /* Badge "action" : un peu plus visible que les ⌘N/⌘B mono des autres */
  background: var(--accent-dim);
  color: var(--accent);
  border-color: transparent;
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
}

/* ══════════════════════════════════════════════════════════════════════
   [v692] Match Inversé — animations & override fond gris
   ════════════════════════════════════════════════════════════════════════
   Fix 1 (fond gris) : le wrap fullscreen n'a plus la classe .rm-sp-wrap
   (Margot l'utilisait pour la démo avec un mock de page bien sous le
   panel ; en prod on n'en a pas besoin, le panel s'ouvre par-dessus
   la vraie page Clients/Bien). Le visuel transparent vient uniquement
   de #rm-sp-wrap > .rm-sp-overlay.

   Fix 2 (animation) : état initial (sans .rm-open) → overlay opacity:0
   et panel translateX(100%). Avec .rm-open ajoutée (en double-RAF dans
   le JS), transitions vers opacity:1 et translateX(0) sur 280ms.
   ══════════════════════════════════════════════════════════════════════ */

/* Wrap : container fullscreen sans fond propre */
#rm-sp-wrap{
  position:fixed; inset:0;
  z-index:9000;
  pointer-events:none; /* state initial pas interactif */
}
#rm-sp-wrap.rm-open{
  pointer-events:auto;
}

/* Overlay : transition d'opacity */
#rm-sp-wrap > .rm-sp-overlay{
  position:absolute; inset:0;
  opacity:0;
  transition: opacity 240ms cubic-bezier(.2,.8,.2,1);
  pointer-events:none;
}
#rm-sp-wrap.rm-open > .rm-sp-overlay{
  opacity:1;
  pointer-events:auto;
}

/* Sidepanel : slide depuis la droite */
#rm-sp-wrap > .rm-sp{
  /* Position en absolu DANS le wrap (Margot l'avait défini comme ça) */
  position:absolute; top:0; right:0; bottom:0;
  transform: translateX(100%);
  transition: transform 280ms cubic-bezier(.2,.8,.2,1);
  pointer-events:none;
}
#rm-sp-wrap.rm-open > .rm-sp{
  transform: translateX(0);
  pointer-events:auto;
}

/* Sur mobile (≤700px) : panel quasi pleine largeur */
@media (max-width: 700px){
  #rm-sp-wrap > .rm-sp{
    width:100% !important;
    max-width:100% !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   [v693] Match Inversé — sélection multi-row + sub-modal "relances groupées"
   ════════════════════════════════════════════════════════════════════════ */

/* ── Checkbox sur chaque row ───────────────────────────────────────── */
.rm-row-check{
  display:inline-flex;
  align-items:center; justify-content:center;
  cursor:pointer; flex-shrink:0;
  margin-right:8px;
}
.rm-row-check input{
  position:absolute;
  opacity:0; pointer-events:none;
  width:0; height:0;
}
.rm-row-check-box{
  display:block;
  width:16px; height:16px;
  border:1.5px solid var(--border-hi, var(--border));
  border-radius:4px;
  background:var(--surface);
  transition: all .12s ease;
  position:relative;
}
.rm-row-check input:checked + .rm-row-check-box{
  background:var(--accent);
  border-color:var(--accent);
}
.rm-row-check input:checked + .rm-row-check-box::after{
  content:'';
  position:absolute;
  left:4px; top:1px;
  width:4px; height:8px;
  border:solid white;
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
.rm-row-check:hover .rm-row-check-box{
  border-color:var(--accent);
}

/* Row sélectionnée : highlight subtil */
.rm-row[data-selected="true"]{
  background:var(--accent-dim) !important;
  border-color:var(--accent) !important;
}
.rm-row[data-selected="true"] .rm-row-rank{
  color:var(--accent);
  font-weight:700;
}

/* ── Sub-modal "Créer relances groupées" ──────────────────────────── */
#rm-bulk-modal{
  position:fixed; inset:0;
  z-index:9100; /* au-dessus du sidepanel (z:9000) */
  pointer-events:none;
}
#rm-bulk-modal.rm-bulk-open{
  pointer-events:auto;
}
.rm-bulk-overlay{
  position:absolute; inset:0;
  background:rgba(20,22,31,.42);
  opacity:0;
  transition:opacity 200ms ease;
}
:root[data-theme="noir"] .rm-bulk-overlay{ background:rgba(0,0,0,.65); }
#rm-bulk-modal.rm-bulk-open .rm-bulk-overlay{ opacity:1; }

.rm-bulk-pane{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%, -45%) scale(.96);
  opacity:0;
  width:520px; max-width:92vw;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:0 24px 48px rgba(20,22,31,.18);
  display:flex; flex-direction:column;
  overflow:hidden;
  transition:transform 220ms cubic-bezier(.2,.8,.2,1), opacity 220ms ease;
}
:root[data-theme="noir"] .rm-bulk-pane{ box-shadow:0 24px 48px rgba(0,0,0,.6); }
#rm-bulk-modal.rm-bulk-open .rm-bulk-pane{
  transform:translate(-50%, -50%) scale(1);
  opacity:1;
}

.rm-bulk-head{
  padding:18px 22px 12px;
  border-bottom:1px solid var(--border);
}
.rm-bulk-head h3{
  font-family:'Plus Jakarta Sans', var(--font);
  font-size:17px; font-weight:700;
  margin:0 0 4px;
  letter-spacing:-.01em;
}
.rm-bulk-sub{
  font-size:12.5px;
  color:var(--text-dim);
}

.rm-bulk-body{
  padding:18px 22px;
  display:flex; flex-direction:column; gap:16px;
}
.rm-bulk-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
.rm-bulk-field label{
  display:block;
  font-size:10px; font-weight:700;
  letter-spacing:.6px; text-transform:uppercase;
  color:var(--muted);
  margin-bottom:6px;
}
.rm-bulk-field input[type="text"]{
  width:100%;
  padding:9px 12px;
  font-size:13px;
  font-family:inherit;
  color:var(--text);
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--radius);
  outline:none;
  transition:border-color .12s;
}
.rm-bulk-field input[type="text"]:focus{
  border-color:var(--accent);
}

.rm-bulk-pills{
  display:flex; gap:6px;
  flex-wrap:wrap;
}
.rm-bulk-pills button{
  padding:7px 12px;
  font-size:12px; font-weight:600;
  font-family:inherit;
  color:var(--text-dim);
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--radius);
  cursor:pointer;
  transition:all .12s;
}
.rm-bulk-pills button:hover{
  border-color:var(--accent);
  color:var(--text);
}
.rm-bulk-pills button.active{
  background:var(--accent);
  border-color:var(--accent);
  color:white;
}

.rm-bulk-foot{
  display:flex; justify-content:flex-end; gap:8px;
  padding:14px 22px;
  border-top:1px solid var(--border);
  background:var(--bg);
}

/* ══════════════════════════════════════════════════════════════════════
   [v694] Fix scroll layout du sidepanel Match Inversé
   ════════════════════════════════════════════════════════════════════════
   Cause : v692 a introduit un wrapper #rm-results-zone (split shell/results)
   qui cassait la chaîne flex de Margot. Le pattern original prévoyait .rm-list
   en flex:1+overflow-y:auto comme enfant DIRECT de .rm-sp ; en passant par
   un wrapper sans flex, la liste perdait sa hauteur contrainte et débordait
   silencieusement → header coupé en haut, footer caché en bas, pas de scroll.

   Fix : transforme #rm-results-zone en sous-flex column qui prend l'espace
   restant dans .rm-sp et contient son propre overflow. La .rm-list interne
   retrouve naturellement son scroll.

   min-height:0 est CRITIQUE : sans ça, un enfant flex avec overflow:auto
   ne calcule pas sa hauteur correctement (Chrome/Safari/FF, tous concernés).
   ════════════════════════════════════════════════════════════════════════ */
#rm-sp-wrap > .rm-sp > #rm-results-zone{
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

/* ══════════════════════════════════════════════════════════════════════
   [v695] Compaction lignes résultats + couleurs modal noir/blanc + history
   ════════════════════════════════════════════════════════════════════════ */

/* ─── Lignes résultats plus compactes ─── */
/* Margot original : padding ~15px, gap 14px → trop d'air, listes courtes
   en "pages". On réduit pour densifier.
   Anthony : "réduit la hauteur des lignes de résultats" + "réduis l'espace
   entre l'avatar et les infos". */
#rm-sp-wrap > .rm-sp .rm-list .rm-row{
  padding: 10px 16px;            /* était ~15px 22px */
  gap: 8px;                      /* gap général de la row : avatar/infos plus serrés */
}
#rm-sp-wrap > .rm-sp .rm-list .rm-row .rm-row-rank{
  margin-right: 0;
  min-width: 16px;               /* compact mais lisible */
}
#rm-sp-wrap > .rm-sp .rm-list .rm-row .rm-avatar{
  margin-right: 2px;             /* presque collé à .rm-row-main */
}
#rm-sp-wrap > .rm-sp .rm-list .rm-row .rm-row-main{
  gap: 2px;                      /* serre nom + meta + chips */
}
#rm-sp-wrap > .rm-sp .rm-list .rm-row .rm-row-meta{
  font-size: 11px;
  margin-bottom: 2px;
}
#rm-sp-wrap > .rm-sp .rm-list .rm-row .rm-chips{
  gap: 4px;                      /* chips Zone / Prix / Surface / Pièces / Type / Étage plus serrées */
}
#rm-sp-wrap > .rm-sp .rm-list .rm-row .rm-chip{
  padding: 1px 6px;
  font-size: 10.5px;
}

/* ─── Modal "Créer relances groupées" : couleurs noir/blanc (pas violet) ─── */
/* Anthony : "pas de violet, plutôt blanc / noir". Pills active et bouton primary
   passent en bg:var(--text), color:var(--bg). */
#rm-bulk-modal .rm-bulk-pills button.active{
  background: var(--text);
  border-color: var(--text);
  color: var(--bg);
}
#rm-bulk-modal .rm-btn-primary{
  background: var(--text);
  border-color: var(--text);
  color: var(--bg);
}
#rm-bulk-modal .rm-btn-primary:hover{
  background: var(--text-dim);
  border-color: var(--text-dim);
}

/* ─── Panneau historique des recherches ─── */
.rm-history{
  padding: 10px 16px 12px;
  background: var(--s2);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.rm-history-head{
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.rm-history-list{
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rm-history-item{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 7px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 12px;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: border-color .12s, background .12s;
}
.rm-history-item:hover{
  border-color: var(--accent);
  background: var(--accent-dim);
}
.rm-history-bits{
  font-weight: 500;
  color: var(--text);
}
.rm-history-ago{
  font-size: 10.5px;
  color: var(--muted);
  font-weight: 500;
  flex-shrink: 0;
  margin-left: 12px;
}

/* ══════════════════════════════════════════════════════════════════════
   [v696] Fix grid décalé sur .rm-row
   ════════════════════════════════════════════════════════════════════════
   Le CSS Margot d'origine définit .rm-row avec 5 colonnes :
     grid-template-columns: 22px 28px 1fr auto auto;
       → rank / avatar / main / match% / actions
   Depuis v693 j'ai ajouté la checkbox comme 1er enfant DOM sans déclarer
   sa colonne dans la grille. Conséquence : 6 enfants dans 5 colonnes →
   les enfants se placent en auto-flow dans les colonnes existantes (mal),
   le 6ème déborde sur une ligne 2. Visuellement ça passait quand le contenu
   était court mais dès qu'un acquéreur avait beaucoup de codes postaux,
   la colonne auto qui contenait par erreur .rm-row-main s'élargissait et
   décalait toute la rangée → chips mal alignés sous le nom.

   Fix : override grid-template-columns à 6 cols (checkbox 18px en tête).
   ════════════════════════════════════════════════════════════════════════ */
#rm-sp-wrap > .rm-sp .rm-list .rm-row{
  grid-template-columns: 18px 22px 28px 1fr auto auto;
  /* checkbox / rank / avatar / main / match% / actions */
}

/* La checkbox elle-même : center vertical pour aligner avec rank+avatar */
#rm-sp-wrap > .rm-sp .rm-list .rm-row .rm-row-check{
  margin-right: 0;
  align-self: flex-start;
  margin-top: 2px; /* aligne avec le baseline du rank/avatar */
}