/*
    ==========================================================
    PROJECT : SITE-GENERIQUE
    FILE    : css/hero-visual.css
    AUTH    : Renaud
    CREATED : 24 décembre 2025
    UPDATED : 26 février 2026
    ==========================================================
*/

/**
*   @project        SITE-GENERIQUE
*   @description    Composant Visuel du Hero.
*                   Affiche l'image produit ou d'ambiance dans la colonne droite.
*                   Ombre portée pour profondeur.
*   
*   @file           css/hero-visual.css
*
*   @see            includes/hero-visual.php
*   @see            css/color-semantic.css
*/


/* --- BLOCK --- */
.hero-visual {
    /* PLACEMENT */
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    width: 100%;
}


/* --- ELEMENT : Image --- */
.hero-visual__image {
    /* PLACEMENT */
    display: block;
    max-width: 100%;
    height: auto;
    max-height: 450px;

    /* VISUEL */
    object-fit: contain;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.3));
    border: 3px solid transparent;
    border-radius: 5px;

    /* EFFET */
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.hero-visual__image:hover {
    /* VISUEL */
    border-color: var(--color-blue-090);

    /* EFFET */
    transform: translateY(-3px);
}


/* --- RESPONSIVE (Tablette < 1150px) --- */
@media (max-width: 1150px) {
    .hero-visual {
        /* PLACEMENT */
        display: none; /* Masqué sur tablette (géré par hero-content.css) */
    }
}


/* --- RESPONSIVE (Mobile < 768px) --- */
@media (max-width: 768px) {
    .hero-visual {
        /* PLACEMENT */
        display: none;
    }
}