/**
 * annonce-carte.css — carte d'annonce (annonce-carte.js), partagée par l'accueil,
 * la galerie et l'aperçu de « Ma vitrine ». Valeurs de repli sur chaque jeton : la
 * carte s'affiche aussi dans l'espace agence, qui ne charge pas editorial.css.
 */
.ac {
    display: block;
    min-width: 0;
    color: var(--encre, #1B1A17);
    text-decoration: none;
    font-family: var(--sans, "Manrope", system-ui, sans-serif);
    border-radius: 2px;
    -webkit-tap-highlight-color: transparent;
}
.ac:focus-visible { outline: 2px solid var(--laiton, #8A6D43); outline-offset: 4px; }

.ac-photo {
    position: relative;
    overflow: hidden;
    border-radius: 2px;
    background: var(--sable, #D9D1C1);
    aspect-ratio: 4 / 3;
}
.ac--meublee .ac-photo { aspect-ratio: 4 / 5; }
.ac-photo img {
    width: 100%; height: 100%; object-fit: cover;
    opacity: 0;
    transition: transform 320ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)), opacity 280ms ease-out;
}
.ac-photo img.is-chargee { opacity: 1; }
.ac-photo-vide {
    width: 100%; height: 100%;
    background: repeating-linear-gradient(135deg, #E4DDCF 0 10px, #DDD5C6 10px 20px);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .ac:hover .ac-photo:not(.ac-photo--multi) img { transform: scale(1.03); }
}

/* Plusieurs photos : piste qui défile au doigt, une photo par cran (façon Airbnb). */
.ac-piste {
    display: flex;
    width: 100%; height: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}
.ac-piste::-webkit-scrollbar { display: none; }
.ac-piste img { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; }

.ac-fleche {
    position: absolute; top: 50%;
    width: 30px; height: 30px; margin-top: -15px;
    border-radius: 50%;
    background: rgba(244, 241, 234, 0.94);
    box-shadow: 0 1px 3px rgba(27, 26, 23, 0.18);
    display: grid; place-items: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 160ms ease-out, transform 120ms ease-out;
}
.ac-fleche::before {
    content: "";
    width: 7px; height: 7px;
    border-top: 1.5px solid var(--encre, #1B1A17);
    border-right: 1.5px solid var(--encre, #1B1A17);
}
.ac-fleche--prec { left: 8px; }
.ac-fleche--prec::before { transform: translateX(1px) rotate(-135deg); }
.ac-fleche--suiv { right: 8px; }
.ac-fleche--suiv::before { transform: translateX(-1px) rotate(45deg); }
.ac-fleche:active { transform: scale(0.94); }
@media (hover: hover) {
    .ac:hover .ac-fleche, .ac:focus-visible .ac-fleche { opacity: 1; }
}
/* Écran tactile : on fait défiler au doigt ; une flèche invisible mais touchable
   empêcherait d'ouvrir la fiche par le bord de la photo. */
@media (hover: none) {
    .ac-fleche { display: none; }
}
.ac-photo.au-debut .ac-fleche--prec,
.ac-photo.a-la-fin .ac-fleche--suiv { visibility: hidden; }

.ac-points {
    position: absolute; left: 50%; bottom: 10px;
    transform: translateX(-50%);
    display: flex; gap: 5px;
    pointer-events: none;
}
.ac-point {
    width: 6px; height: 6px; border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    box-shadow: 0 0 2px rgba(27, 26, 23, 0.35);
    transition: background-color 160ms ease-out, transform 160ms ease-out;
}
.ac-point.is-actif { background: #fff; transform: scale(1.15); }

.ac-dispo {
    position: absolute; left: 10px; top: 10px;
    background: var(--ivoire, #F4F1EA); color: var(--encre, #1B1A17);
    font-size: 11px; font-weight: 600; line-height: 1;
    padding: 6px 8px; border-radius: 2px;
}

.ac-meta {
    display: flex; justify-content: space-between; gap: 10px;
    margin-top: 12px;
    font-size: 12px; color: var(--gris-doux, #7B766C);
    overflow-wrap: anywhere;
}
.ac-meta span:last-child { text-align: right; flex: none; max-width: 50%; }

.ac-titre {
    margin: 3px 0 0;
    font-family: var(--sans, "Manrope", system-ui, sans-serif);
    font-size: 15px; font-weight: 600; line-height: 1.35;
    overflow-wrap: anywhere;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.ac-prix {
    margin: 4px 0 0;
    font-family: var(--serif, "Cormorant Garamond", serif);
    font-size: 22px; font-weight: 600; line-height: 1.1;
    font-variant-numeric: lining-nums;
}
.ac-prix small {
    font-family: var(--sans, "Manrope", system-ui, sans-serif);
    font-size: 12px; font-weight: 500; color: var(--gris-doux, #7B766C);
}