/* =========================================================
   MOSAÏQUE DE RÉFÉRENCES EN EN-TÊTE (une grande photo, deux petites, légendées) + lien vers #references
   Sortie de business-charte.css le 2026-11-14 pour être partagée par les pages Professionnel et Bureau d'études.
   À charger APRÈS les feuilles de la page (business-charte.css, engineer-charte.css).
   ========================================================= */
.pro-mosaic {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.pro-mosaic__item {
    position: relative;
    display: block;
    margin: 0;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    color: #fff;
    background: #0B2B29;
    border-radius: 18px;
    box-shadow: 0 18px 44px rgba(11, 43, 41, 0.18);
    text-decoration: none !important;
}

.pro-mosaic__item--main {
    grid-column: 1 / -1;
    aspect-ratio: 16 / 9;
}

/* Pages locales (zones/_zone.html.twig) : une seule photo locale, légendée, au format de l'ancienne illustration */
.pro-mosaic--single .pro-mosaic__item--main {
    aspect-ratio: 4 / 3;
}

/* Remplace le style de la photo unique (.pro-intro__visual img, .sol-page .hero-visual img) */
.pro-intro .pro-mosaic .pro-mosaic__item img,
.sol-page .hero-visual.pro-mosaic .pro-mosaic__item img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
    border-radius: 0;
    box-shadow: none;
    transition: transform 0.6s ease;
}

a.pro-mosaic__item:hover img,
a.pro-mosaic__item:focus-visible img {
    transform: scale(1.04);
}

a.pro-mosaic__item:focus-visible {
    outline: 3px solid #63D3C2;
    outline-offset: 3px;
}

/* Légende sur dégradé vert nuit */
.pro-mosaic__caption {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 2.5rem 0.9rem 0.8rem;
    background: linear-gradient(to top, rgba(11, 43, 41, 0.92) 0%, rgba(11, 43, 41, 0.6) 55%, rgba(11, 43, 41, 0) 100%);
}

.pro-mosaic__tag {
    align-self: flex-start;
    margin-bottom: 0.2rem;
    padding: 0.12rem 0.55rem;
    color: #0B2B29;
    background: #63D3C2;
    border-radius: 999px;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.pro-mosaic__title {
    color: #fff;
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.25;
}

.pro-mosaic__item--main .pro-mosaic__title {
    font-size: 1.2rem;
}

.pro-mosaic__meta {
    color: #CFE6E1;
    font-size: 0.82rem;
    line-height: 1.35;
}

.pro-mosaic__more {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.15rem;
    color: #63D3C2;
    font-size: 0.82rem;
    font-weight: 700;
}

.pro-mosaic__more i {
    transition: transform 0.2s ease;
}

a.pro-mosaic__item:hover .pro-mosaic__more i {
    transform: translateX(3px);
}

@media (max-width: 480px) {
    .pro-mosaic {
        gap: 0.5rem;
    }

    .pro-mosaic__caption {
        padding: 2rem 0.65rem 0.6rem;
    }

    .pro-mosaic__title {
        font-size: 0.85rem;
    }

    .pro-mosaic__item--main .pro-mosaic__title {
        font-size: 1.05rem;
    }

    .pro-mosaic__meta,
    .pro-mosaic__more {
        font-size: 0.75rem;
    }
}

/* Mosaïque sur petit écran : les petites photos gardent titre et lien, sans étiquette, pour laisser voir l'image */
@media (max-width: 480px) {
    .pro-mosaic__item:not(.pro-mosaic__item--main) .pro-mosaic__tag {
        display: none;
    }
}

/* En-tête sur mobile et tablette : la mosaïque de références remonte juste sous le titre
   (titre, sous-titre, mosaïque, texte, bouton) pour montrer des références concrètes dès l'arrivée */
@media (max-width: 900px) {
    .pro-intro__grid {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .pro-intro__content {
        display: contents;
    }

    .pro-intro__title { order: 1; }
    .pro-intro__tag { order: 2; }
    .pro-intro .pro-mosaic { order: 3; margin-bottom: 1.6rem; }
    .pro-intro__lead { order: 4; }
    .pro-intro__actions { order: 5; }
}

/* Lien sous la mosaïque vers le carrousel complet des références */
.pro-mosaic__all {
    grid-column: 1 / -1;
    justify-self: center;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.35rem;
    padding: 0.45rem 1rem;
    color: #0A5048;
    background: #F0F8F6;
    border: 1px solid #CFE6E1;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none !important;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.pro-mosaic__all i {
    color: #0D8A7E;
    transition: transform 0.2s ease;
}

.pro-mosaic__all:hover {
    color: #0D8A7E;
    border-color: #0D8A7E;
}

.pro-mosaic__all:hover i {
    transform: translateY(2px);
}

/* Ancre du carrousel : ne pas passer sous la barre de navigation fixe */
#references,
#realisations {
    scroll-margin-top: 80px;
}