/* Yafoye — LA carte d'annonce, sa mise en forme.
 *
 * FICHIER PRODUIT — ne pas modifier a la main.
 * Il est recopie depuis public/explorer-annonces.html par `npm run carte`,
 * lance avant chaque deploiement. Pour changer l'apparence d'une carte,
 * on modifie Explorer : les deux ecrans suivent.
 *
 * Le gabarit, lui, est partage depuis la V101.603
 * (app/ui/carte-annonce.js). Ce qui reste propre a Yafoye Match vit sous
 * ses propres noms de classe et n'a pas sa place ici.
 */

.card{background:#fff;border:1px solid #e4eaf1;border-radius:20px;overflow:hidden;box-shadow:0 10px 28px rgba(3,27,58,.07)}
.media{height:220px;background:#e8eef5;position:relative}
.media img,.media video{width:100%;height:100%;object-fit:cover}
.badge{position:absolute;top:12px;left:12px;background:#fff;color:#031b3a;padding:7px 10px;border-radius:999px;font-size:11px;font-weight:900;box-shadow:0 6px 18px #031b3a22}
.body{padding:15px}
.body h2{font-size:17px;margin:0 0 9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.place{font-size:13px;color:#64748b;display:flex;gap:7px;min-height:34px}
.price{font-weight:900;font-size:17px;margin:10px 0}
.price-pin{appearance:none;cursor:pointer;font-family:Manrope,Arial,sans-serif;background:#fff;border:1px solid #031b3a;border-radius:999px;color:#031b3a;font-weight:900;padding:7px 10px;box-shadow:0 5px 16px #031b3a33;white-space:nowrap}
@media(max-width:620px){
  .media{height:235px}
}
.media img,.media video{-webkit-user-drag:none;user-select:none;-webkit-user-select:none}
.card-link{display:block;color:inherit;text-decoration:none;height:100%}
.specs{display:grid;gap:7px;margin:11px 0}
.spec{display:flex;gap:8px;color:#667085;font-size:12px}
.spec i{width:15px;color:#087e91}
.card:hover h2{text-decoration:underline;text-underline-offset:3px}
.card{overflow:visible;border-radius:20px;padding:0;background:#fff}
.media{height:285px;border-radius:20px;overflow:hidden}
.body{padding:14px 3px 5px}
@media(max-width:620px){
  .media{height:275px;border-radius:18px}
  .body{padding:12px 2px 4px}
}
.badge{background:#16a34a!important;color:#fff!important}
.badge.popular{background:#00a8c6!important;color:#fff!important}
.body{display:flex!important;flex-direction:column!important;gap:6px!important}
.body h2{order:1;margin-bottom:2px!important}
.price{order:2;margin:0!important}
.place{order:3;display:flex!important;align-items:center!important;gap:6px!important;min-height:0!important;margin:2px 0 0!important;line-height:1.25!important}
.place i{color:#d9a441!important;flex:0 0 auto}
.place span{display:inline!important}
.specs{order:4;margin:0!important;gap:5px!important}
.card.is-focused{outline:3px solid #00a8c6;outline-offset:3px;animation:yiFocusPulse 1.1s ease 2}
.spec-gratuite{background:#eaf8f1!important;color:#07966d!important;font-weight:800!important}
.spec-gratuite i{color:#07966d!important}
.yi-card-gallery{width:100%;height:100%;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.yi-card-gallery::-webkit-scrollbar{display:none}
.yi-card-slide{flex:0 0 100%;width:100%;height:100%;scroll-snap-align:start;position:relative}
.yi-card-slide img{width:100%;height:100%;object-fit:cover;display:block}
.yi-card-dots{position:absolute;z-index:6;left:50%;bottom:10px;transform:translateX(-50%);display:flex;align-items:center;gap:5px;padding:4px 7px;border-radius:999px;background:rgba(3,27,58,.18);backdrop-filter:blur(7px)}
.yi-card-dot{width:5px;height:5px;border:0;padding:0;border-radius:50%;background:rgba(255,255,255,.62);transition:.2s}
.yi-card-dot.active{width:7px;height:7px;background:#fff}
.yi-card-arrow{position:absolute;z-index:7;top:50%;transform:translateY(-50%);width:30px;height:30px;border:0;border-radius:50%;background:rgba(255,255,255,.94);color:#031b3a;box-shadow:0 4px 13px rgba(3,27,58,.2);opacity:0;transition:.2s}
.media:hover .yi-card-arrow{opacity:1}
.yi-card-arrow.prev{left:9px}
.yi-card-arrow.next{right:9px}
@media(max-width:620px){
  .yi-card-arrow{display:none}
}
.yi-card-slide video{width:100%;height:100%;object-fit:cover;display:block;background:#e9eef4}
.price-pin{border:0!important;background:#fff!important;color:#222!important;border-radius:999px!important;padding:7px 11px!important;font:800 12px/1 Poppins,Arial,sans-serif!important;box-shadow:0 2px 8px rgba(0,0,0,.22)!important;transition:transform .18s ease,background .18s ease,color .18s ease!important}
.price-pin:hover,.price-pin:focus{transform:scale(1.08)!important;background:#222!important;color:#fff!important;outline:none!important}
.yi-price-marker,
.price-marker,
.map-price-marker,
.gm-style .yi-price-marker{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:auto!important;
  height:32px!important;
  padding:0 11px!important;
  border:1px solid rgba(0,0,0,.14)!important;
  border-radius:999px!important;
  background:#fff!important;
  color:#222!important;
  font:700 13px/1 Poppins,Arial,sans-serif!important;
  letter-spacing:-.2px!important;
  white-space:nowrap!important;
  box-shadow:0 2px 8px rgba(0,0,0,.18)!important;
  transform:translateZ(0)!important;
}
.yi-price-marker:hover,
.price-marker:hover,
.map-price-marker:hover{
  transform:scale(1.05)!important;
  z-index:20!important;
}
.yi-price-marker.active,
.price-marker.active,
.map-price-marker.active{
  background:#222!important;
  color:#fff!important;
  border-color:#222!important;
}
.yi-card-dots{
  max-width:82px!important;
  width:auto!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  justify-content:flex-start!important;
  gap:5px!important;
  padding:5px 8px!important;
  scrollbar-width:none!important;
  scroll-behavior:smooth!important;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 13px,#000 calc(100% - 13px),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 13px,#000 calc(100% - 13px),transparent 100%);
}
.yi-card-dots::-webkit-scrollbar{display:none!important}
.yi-card-dot{
  flex:0 0 6px!important;
  width:6px!important;
  height:6px!important;
  min-width:6px!important;
  border:0!important;
  border-radius:999px!important;
  padding:0!important;
  background:rgba(255,255,255,.58)!important;
  box-shadow:0 1px 3px rgba(0,0,0,.18)!important;
  transition:width .22s ease,flex-basis .22s ease,background .22s ease,opacity .22s ease!important;
  opacity:.82;
}
.yi-card-dot.active{
  flex-basis:18px!important;
  width:18px!important;
  min-width:18px!important;
  background:#fff!important;
  opacity:1!important;
}
@media(max-width:620px){
  .yi-card-dots{max-width:74px!important;bottom:9px!important}
}
.card i:not(.yi-favorite-btn i):not(.spec i),
.card .fa:not(.yi-favorite-btn .fa):not(.spec .fa),
.card .fas:not(.yi-favorite-btn .fas):not(.spec .fas),
.card .far:not(.yi-favorite-btn .far):not(.spec .far),
.card .fab,
.card .fa-solid:not(.yi-favorite-btn .fa-solid):not(.spec .fa-solid),
.card .fa-regular:not(.yi-favorite-btn .fa-regular),
.card .fa-brands,
.yi-card i,
.yi-card .fa,
.yi-card .fas,
.yi-card .far,
.yi-card .fab,
.yi-card .fa-solid,
.yi-card .fa-regular,
.yi-card .fa-brands,
.ad-card i,
.ad-card [class*="fa-"]{
  color:#8b919a!important;
  -webkit-text-fill-color:#8b919a!important;
  background:none!important;
}
.yi-favorite-btn i{color:#c3cbd3!important;-webkit-text-fill-color:#c3cbd3!important;opacity:1}
.yi-favorite-btn.is-favorite i{color:#d9534f!important;-webkit-text-fill-color:#d9534f!important;opacity:1}
.spec i{color:#087e91!important;-webkit-text-fill-color:#087e91!important}
.price,
.card-price,
.yi-card-price,
.price-main,
.price-value,
.price-suffix,
.price-unit,
.card-price-unit,
.yi-price-unit,
.yi-card-price span,
.card .price span{
  display:inline!important;
  visibility:visible!important;
  opacity:1!important;
}
.price,
.card-price,
.yi-card-price,
.price-main,
.price-value{
  color:#111827!important;
  -webkit-text-fill-color:#111827!important;
}
.price-suffix,
.price-unit,
.card-price-unit,
.yi-price-unit,
.card .price small,
.yi-card-price small{
  color:#667085!important;
  -webkit-text-fill-color:#667085!important;
  font-size:.82em!important;
  font-weight:400!important;
  white-space:nowrap!important;
}
.price-pin,
.yi-price-pin,
.marker-price,
.leaflet-marker-icon.price-marker,
.map-price-marker{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:72px!important;
  height:34px!important;
  padding:0 12px!important;
  border-radius:999px!important;
  background:#fff!important;
  color:#111827!important;
  -webkit-text-fill-color:#111827!important;
  border:1px solid rgba(17,24,39,.10)!important;
  box-shadow:0 4px 14px rgba(15,23,42,.18)!important;
  font-size:12px!important;
  font-weight:600!important;
  white-space:nowrap!important;
  opacity:1!important;
  visibility:visible!important;
}
.price-pin::after,
.yi-price-pin::after,
.marker-price::after,
.map-price-marker::after{
  content:""!important;
  position:absolute!important;
  left:50%!important;
  bottom:-5px!important;
  width:10px!important;
  height:10px!important;
  background:#fff!important;
  border-right:1px solid rgba(17,24,39,.10)!important;
  border-bottom:1px solid rgba(17,24,39,.10)!important;
  transform:translateX(-50%) rotate(45deg)!important;
}
.price-pin.active,
.yi-price-pin.active,
.marker-price.active,
.map-price-marker.active{
  background:#031B3A!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}
.price-pin.active::after,
.yi-price-pin.active::after,
.marker-price.active::after,
.map-price-marker.active::after{
  background:#031B3A!important;
}
.price,
.card-price,
.yi-card-price{
  color:#111827!important;
  -webkit-text-fill-color:#111827!important;
  font-weight:700!important;
  font-size:17px!important;
}
.price small,
.price-unit,
.price-suffix{
  color:inherit!important;
  font-weight:500!important;
}
.media-track,
.slider-track,
.carousel-track,
.yi-media-track{
  overscroll-behavior-inline:contain;
  scroll-snap-type:x mandatory;
}
.media-track>*,
.slider-track>*,
.carousel-track>*,
.yi-media-track>*{
  scroll-snap-align:start;
}
.card.yi-match-card{border-color:rgba(0,168,198,.28);box-shadow:0 14px 38px rgba(3,27,58,.11)}
.card{height:auto!important;min-height:0!important;align-self:start!important;display:block!important;overflow:hidden!important}
.card-link{height:auto!important;min-height:0!important;display:block!important}
.card .media{height:240px!important;min-height:240px!important;max-height:240px!important;display:block!important;background:#e8eef5!important}
.card .yi-card-gallery,.card .yi-card-slide{height:100%!important;min-height:0!important;max-height:none!important}
.card .body{height:auto!important;min-height:0!important;padding:13px 14px 15px!important}
.card .body h2,.card .price,
.yf-type-pro{
  display:inline-flex;align-items:center;gap:6px;
  margin:2px 0 6px;
  font-size:11.5px;font-weight:800;
  color:#5b6675;
}
.yf-type-pro i{font-size:11px;color:#0099e6}
.yf-card-meta-row{
  display:flex;align-items:center;gap:8px;
  margin:2px 0 6px;
}
.yf-card-meta-row .yf-type-pro{margin:0}
.yf-card-meta-row .yi-published-time{margin-left:auto}
.card .place,.card .specs{flex:none!important}
@media(max-width:620px){
  .card{height:auto!important;min-height:0!important;max-height:none!important}
  .card-link{height:auto!important;min-height:0!important}
  .card .media{height:220px!important;min-height:220px!important;max-height:220px!important}
  .card .body{padding:12px 12px 14px!important}
}
.yf-formules-carte{display:grid;gap:4px;margin:10px 0}
.yf-formule{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.yf-formule-groupe{display:grid;gap:5px}
.yf-formule-ouvrable{width:100%;padding:0;border:0;background:none;cursor:pointer;text-align:left;align-items:center}
.yf-formule-ouvrable i{color:#8b919a;font-size:10px;transition:transform .18s ease}
.yf-formule-ouvrable.est-ouvert i{transform:rotate(180deg)}
.yf-formule-horaires{display:flex;flex-wrap:wrap;gap:5px;padding:7px 8px;border-radius:10px;background:#f4fbfd}
.yf-formule-horaires span{padding:4px 8px;border:1px solid #cfe6ec;border-radius:999px;background:#fff;color:#0b3f6b;font:850 10.5px Manrope,sans-serif}
.yf-formule-horaires[hidden]{display:none!important}
.yf-formule-nom{display:flex;align-items:baseline;gap:6px;min-width:0;color:#42566f;font:850 11.5px/1.3 Manrope,sans-serif}
.yf-formule-nom small{color:#7d8ea3;font:700 10px/1.3 Manrope,sans-serif;white-space:nowrap}
.yf-formule-prix{flex:0 0 auto;color:#03203f;font:900 14px/1.2 Sora,Manrope,sans-serif;white-space:nowrap}
.card .yf-formules-carte ~ .specs{gap:5px!important}
.card .yf-formules-carte ~ .specs .spec{padding:5px 8px!important;font-size:9.5px!important}
@media(max-width:400px){
  .yf-formule-nom{font-size:11px}
  .yf-formule-nom small{font-size:9.5px}
  .yf-formule-prix{font-size:13px}
}
.yf-prix-ligne{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  flex-wrap:wrap;
}
.yf-prix-ligne .price{margin:10px 0}
.yf-visite{
  display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;
  padding:6px 10px;border-radius:999px;
  font:850 10px/1 Manrope,Poppins,Arial,sans-serif;white-space:nowrap;
}
.yf-visite i{font-size:11px}
.yf-visite-gratuite{background:#eaf8f1;border:1px solid #c6e9d7;color:#07966d}
.yf-visite-gratuite i{color:#07966d!important;-webkit-text-fill-color:#07966d!important}
.yf-visite-payante{background:#fff6e4;border:1px solid #f0dcb4;color:#9a6500}
.yf-visite-payante i{color:#9a6500!important;-webkit-text-fill-color:#9a6500!important}
@media(max-width:400px){
  .yf-visite{font-size:9px;padding:5px 8px}
}
.specs{display:flex!important;flex-wrap:wrap!important;gap:6px!important}
.spec{display:inline-flex!important;align-items:center!important;gap:6px!important;padding:7px 9px!important;border-radius:999px!important;background:#f5f8fc!important;border:1px solid #e1e9f2!important;color:#42566f!important;font-size:10px!important;font-weight:850!important}
.spec i{width:auto!important;color:#087e91!important;font-size:11px!important}
.place i{color:#748497!important}
.yi-favorite-btn{position:absolute;z-index:11;top:11px;right:11px;width:34px;height:34px;border:0;border-radius:50%;background:rgba(255,255,255,.92);backdrop-filter:blur(6px);color:#0b213a;display:grid;place-items:center;cursor:pointer;box-shadow:0 5px 16px rgba(3,27,58,.14)}
.yi-favorite-btn i{color:#c3cbd3!important;font-size:15px;opacity:1}
.yi-favorite-btn.is-favorite i{color:#d9534f!important;opacity:1}
.card{position:relative}
.badge{position:absolute!important;z-index:10!important;top:11px!important;left:11px!important;display:inline-flex!important;align-items:center!important;gap:6px!important;padding:6px 9px!important;border:1px solid rgba(255,255,255,.6)!important;border-radius:999px!important;background:rgba(255,255,255,.86)!important;backdrop-filter:blur(10px)!important;color:#135d4a!important;font:850 8px/1 Manrope,sans-serif!important;box-shadow:0 5px 16px rgba(3,27,58,.12)!important}
.badge::before{content:"";width:6px;height:6px;flex:0 0 6px;border-radius:50%;background:#16a36d;box-shadow:0 0 0 3px rgba(22,163,109,.12)}
.badge.reserved{background:rgba(254,232,232,.92)!important;border-color:rgba(192,57,43,.34)!important;color:#8a1f1f!important}
.badge.reserved::before{background:#c0392b;box-shadow:0 0 0 3px rgba(192,57,43,.14)}
.card h2{color:#031b3a!important}
.card .price{color:#031b3a!important}
.card .place{color:#64748b!important}