/*
    ========================================
    HERO-VISUAL.CSS
    Auteur                : Renaud
    Création              : 11 décembre 2025
    Dernière modification : 11 décembre 2025
    ========================================
*/
/**
*   @project   DEVENIR-ARTISAN.NET
*   Style de l'image principale du Hero (Livre 3D).
*   Contient l'animation de flottement.
*   
*   @file  css/hero-visual.css
*
*   @see   includes/hero-visual.php
*/

/* --- BLOCK : Hero Visual (Conteneur) --- */
.hero-visual {
    /* PLACEMENT */
    display: block;
    margin: 0;
    width: 100%;
    
    /* Centrage */
    display: flex;
    justify-content: center;
}

/* --- ELEMENT : Image --- */
.hero-visual__image {
    /* PLACEMENT */
    width: 100%;
    max-width: 550px; 
    height: auto;
    
    /* VISUEL */
    border-radius: 20px; 
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); /* Ombre profonde */
    object-fit: cover;

    /* EFFET (Animation) */
    animation: floatImage 6s ease-in-out infinite;
}

/* --- RESPONSIVE --- */
@media (max-width: 991px) {
    .hero-visual__image {
        max-width: 400px; 
    }
}

/* --- KEYFRAMES --- */
@keyframes floatImage {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-15px); }
    100% { transform: translateY(0); }
}

/* DEBUG */
/*
.hero-visual { border: 2px dashed purple; }
*/