:root{
  --hhb-blue:#09374f;
  --hhb-sep:#eaeaea;
}

/* Grille */
.hhb-results{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}
@media (max-width:1024px){ .hhb-results{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:680px){  .hhb-results{ grid-template-columns:1fr; } }

/* Carte = flex colonne */
.hhb-card{
  position:relative;
  border:1px solid var(--hhb-sep);
  border-radius:4px;
  overflow:hidden;
  background:#fff;
  display:flex;
  flex-direction:column;
}

/* Couche lien couvrante (toute la carte clicable) */
.hhb-card-cover{
  position:absolute;
  inset:0;
  z-index:1;
  text-indent:-9999px; /* invisible */
  outline:0;
}

/* Visuels */
.hhb-card .hhb-media{ position:relative; z-index:2; }
.hhb-card .hhb-media img.thumb{
  width:100%;
  height:220px;
  object-fit:cover;
  display:block;
}

/* Emblème (image non croppée) */
.hhb-emblem {
    position: absolute;
    left: 12px;
    top: 12px;
    background: #ffffff29;
    border-radius: 4px;
    padding: 6px;
    width: 70px;
}
.hhb-emblem img{ max-width:55px; height:auto; display:block; }

/* Corps */
.hhb-body{
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:8px;
  position:relative;
  z-index:2;
  flex:1 1 auto;           /* ← pousse le footer en bas */
}

/* Titre + wishlist à droite */
.hhb-title-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:8px;
}
.hhb-title {
    font-weight: 500;
    font-size: 18px !important;
    letter-spacing: 0.5px;
    margin: 0;
    font-family: 'Montserrat';
    color: #09374f;
    text-transform: uppercase;
    margin: 0.8rem 0 0rem !important;
}
.hhb-wishlist{ display:flex; align-items:center; }

/* Assure que le cœur passe au-dessus de la couche-lien */
.hhb-wishlist .hhb-wl-add{ position:relative; z-index:10; }

/* Sous-ligne adresse/continent & description */
.hhb-sub{ color:#555; }
.hhb-desc{ color:#333; font-size:14px; }

/* Tags */
.hhb-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; }
.hhb-tag{
  background:#f4f4f7;
  border:1px solid #eee;
  border-radius:4px;
  padding:4px 8px;
  font-size:12px;
}

/* Pastilles dynamiques */
.hhb-pills{ display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.hhb-pill{
  border-radius:4px; padding:4px 10px; font-size:12px; border:1px solid transparent;
}
.hhb-pill.status.ok{  background:#eaf7ea; color:#0a6b0a; border-color:#cde7cd; }
.hhb-pill.status.ko {
    background: #e6f1f7;
    color: #09374f;
    border-color: #c3ddeb;
}
.hhb-pill.status.soon{background:#fff5e5; color:#8a5200; border-color:#ffe0a8; }
.hhb-pill.dates.ok{   background:#eaf7ea; color:#0a6b0a; border-color:#cde7cd; }
.hhb-pill.dates.ko{   background:#fdeaea; color:#a01313; border-color:#facccc; }
.hhb-pill.dest.ok{    background:#eaf7ea; color:#0a6b0a; border-color:#cde7cd; }
.hhb-pill.dest.hint{  background:#f4f4f7; color:#333;   border-color:#e9e9e9;  }
.hhb-pill.trav.ok{    background:#eaf7ea; color:#0a6b0a; border-color:#cde7cd; }
.hhb-pill.trav.ko{    background:#fdeaea; color:#a01313; border-color:#facccc; }

/* Footer collé en bas de la fiche */
.hhb-footer{
  position:relative; 
  z-index:2;               /* ← passe au-dessus de .hhb-card-cover */
  padding:12px;
  border-top:1px solid #f0f0f0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:0;                /* pas d’espace parasite */
}
.hhb-price{ font-weight:700; color: #09374f; }

/* Lien neutre si utilisé localement */
.hhb-link{ text-decoration:none; color:inherit; }


.hhb-card{ position:relative; display:flex; flex-direction:column; }
.hhb-media,.hhb-body,.hhb-footer{ position:relative; z-index:2; }

.hhb-card{ cursor:pointer; }
.hhb-title-row .hhb-wishlist{ position:relative; z-index:10; } /* le cœur au-dessus, tranquille */

.hhb-emblem {
    border: 0;
}
.hhb-card {
	transition: all .4s ease;
}
.hhb-card .hhb-media {
    overflow: hidden;
}
.hhb-card .hhb-media img.thumb {
		transition: all .4s ease;
}
.hhb-card:hover .hhb-media img.thumb {
    transform: scale(1.1);
		transition: all .4s ease;
}
.hhb-card:hover {
    background: #ffffffad;
	transition: all .4s ease;
}