/* =========================================================================
   GCA Mobilité — Photos
   Styles spécifiques aux photos téléchargées (Pexels / Unsplash).
   Importé APRÈS gca-mobilite-design-system.css et site.css.
   Utilise UNIQUEMENT les tokens du design system.
   ========================================================================= */

/* ---------- Hero illustration : on remplace le SVG par une photo ----------
   La classe .hero-illustration existe déjà dans site.css pour le SVG.
   Quand elle s'applique à un <img>, on cale le ratio et le rendu sans
   toucher au layout grid existant.
   ------------------------------------------------------------------------ */

img.hero-illustration {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-soft);
    background: var(--gca-cream-soft);
}

/* ---------- Photo d'illustration secondaire (hero compact MaPrimeAdapt') ---- */

.photo-illustration {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    background: var(--gca-cream-soft);
    margin-top: 1.5rem;
}

/* ---------- Vignettes de réalisations dans les service-card ----------------
   On ajoute une photo en haut d'une .service-card sans modifier la card.
   ------------------------------------------------------------------------ */

.service-photo {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius);
    border: 1px solid var(--gca-border);
    margin-bottom: 1rem;
    background: var(--gca-cream-soft);
}

/* ---------- Forced colors / reduced motion ---------------------------------
   Les images doivent rester visibles en forced-colors.
   ------------------------------------------------------------------------ */

@media (forced-colors: active) {
    img.hero-illustration,
    .photo-illustration,
    .service-photo {
        border: 1px solid CanvasText;
    }
}