/* ==============================================================
   IMMO-2026.08.12-02  —  style_site_vitrine.css
   Historique :
   - 2026.08.12-02 : correctif de contraste renforce (la premiere
                     version, un simple .sp-btn-vert, perdait contre
                     une regle plus specifique de la feuille
                     d'origine).
   - 2026.08.12-01 : creation. Mosaique d'accueil de la vitrine
                     bailleur, et correctif de contraste sur le
                     bouton plein.

   Les classes sp-* viennent de style_site_public.css : on ne
   redefinit ici que ce qui est propre a la vitrine, plus un
   correctif explicitement signale.
   ============================================================== */

/* ── Correctif de contraste ────────────────────────────────────── */
/* Le texte du bouton plein sort sombre sur fond sombre, donc
   illisible. La regle fautive est dans style_site_public.css, que je
   n'ai pas : ce correctif la contourne, il ne la remplace pas.
   A SUPPRIMER une fois la feuille d'origine corrigee.

   Selecteurs volontairement multiples et specifiques : une simple
   classe perdait contre la regle d'origine, plus specifique. On cible
   aussi -webkit-text-fill-color, qui prime sur color quand elle est
   posee (cas d'un texte en degrade). */
.sp-body .sp-hero-actions a.sp-btn.sp-btn-vert,
.sp-body a.sp-btn.sp-btn-vert,
.sp-body .sp-btn.sp-btn-vert,
a.sp-btn-vert {
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
}

.sp-body .sp-hero-actions a.sp-btn.sp-btn-vert:hover,
.sp-body a.sp-btn.sp-btn-vert:hover,
.sp-body a.sp-btn.sp-btn-vert:focus {
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
}

/* ── Mosaique d'accueil ────────────────────────────────────────── */
/* Remplace la photo unique du premier logement : la vitrine doit
   montrer un ensemble, pas un bien en particulier. */
.vt-mosaique {
    position: relative;
    display: grid;
    gap: 10px;
    border-radius: 16px;
    overflow: hidden;
}

/* Un seul logement : une grande image, comme avant. */
.vt-mosaique--1 {
    grid-template-columns: 1fr;
    grid-template-rows: 420px;
}

/* Deux logements : deux bandes verticales de meme hauteur. */
.vt-mosaique--2 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 420px;
}

/* Trois et plus : une grande a gauche, deux empilees a droite. */
.vt-mosaique--3 {
    grid-template-columns: 1.6fr 1fr;
    grid-template-rows: 205px 205px;
}

.vt-mosaique--3 .vt-tuile:first-child {
    grid-row: span 2;
}

.vt-tuile {
    position: relative;
    display: block;
    overflow: hidden;
    background: #eef1ee;
    border-radius: 12px;
}

.vt-tuile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}

.vt-tuile:hover img {
    transform: scale(1.04);
}

/* Nom du logement, lisible quelle que soit la photo grace au degrade. */
.vt-tuile-nom {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 22px 14px 10px;
    font-size: .92rem;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(to top, rgba(20, 32, 24, .78), rgba(20, 32, 24, 0));
}

.vt-mosaique--3 .vt-tuile:not(:first-child) .vt-tuile-nom {
    font-size: .84rem;
    padding: 18px 12px 8px;
}

/* Compteur des logements non montres */
.vt-mosaique-plus {
    position: absolute;
    right: 12px;
    top: 12px;
    padding: 5px 12px;
    font-size: .82rem;
    font-weight: 600;
    color: #21402f;
    background: rgba(255, 255, 255, .92);
    border-radius: 20px;
}

@media (max-width: 900px) {
    .vt-mosaique--1,
    .vt-mosaique--2 { grid-template-rows: 280px; }
    .vt-mosaique--3 { grid-template-rows: 150px 150px; }
}

@media (max-width: 600px) {
    /* Sur mobile, la grande image seule : trois vignettes minuscules
       n'apportent rien et alourdissent le chargement. */
    .vt-mosaique--2,
    .vt-mosaique--3 {
        grid-template-columns: 1fr;
        grid-template-rows: 260px;
    }
    .vt-mosaique--2 .vt-tuile:not(:first-child),
    .vt-mosaique--3 .vt-tuile:not(:first-child) { display: none; }
    .vt-mosaique--3 .vt-tuile:first-child { grid-row: span 1; }
}