@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700;800&display=swap');

body {
    font-family: 'Poppins', sans-serif;
    overflow-x: hidden;
}

/* Animations */
.animate-fade-in { animation: fadeIn 0.3s ease-out; }
.animate-scale-in { animation: scaleIn 0.3s ease-out; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes scaleIn { from { transform: scale(0.95); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* Ticker Infini (Marquee) */
@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.animate-scroll { animation: scroll 40s linear infinite; }

/* TikTok Wiggle */
@keyframes wiggle-yellow {
    0%, 100% { transform: rotate(-3deg) scale(1); box-shadow: 0 0 0 0 rgba(250, 204, 21, 0.7); }
    50% { transform: rotate(3deg) scale(1.05); box-shadow: 0 0 0 10px rgba(250, 204, 21, 0); }
}
.animate-wiggle-yellow { animation: wiggle-yellow 2s ease-in-out infinite; }

/* Custom Scrollbar */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: #f1f1f1;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #94a3b8;
    border-radius: 3px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

/* ========================================================= */
/* 1. STYLES POUR L'IMAGE PRINCIPALE (TAILLE FIXE & ADAPTATION) */
/* ========================================================= */
#main-image-wrapper {
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    
    /* === CORRECTION DE LA TAILLE FIXE (Aspect Ratio 4:3) === */
    height: 0;
    padding-bottom: 75%; /* 75% de la largeur = ratio 4:3 (pour paysage) */
    position: relative;
}

#main-image-display {
    /* L'image occupe le cadre fixe (positionnement absolu par rapport au wrapper) */
    position: absolute;
    top: 0;
    left: 0;
    
    width: 100%;
    height: 100%; 
    display: block;
    transition: transform 0.3s ease;
    
    /* Gestion de l'image dans le cadre (L'image est entière, potentiellement avec des bandes) */
    object-fit: contain; 
}


/* ========================================================= */
/* 2. STYLES POUR LES MINIATURES (AFFICHAGE ET ADAPTATION) */
/* ========================================================= */
.thumbnail-item {
    cursor: pointer;
    height: 80px; 
    
    /* !!! CORRECTION pour voir l'image ENTIÈRE !!! */
    background-size: contain; /* L'image entière est affichée, sans rognage */
    background-repeat: no-repeat; /* Empêche l'image de se répéter */
    
    background-position: center; /* Centre l'image dans l'espace disponible */
    
    /* Style visuel */
    border-radius: 8px;
    opacity: 0.7;
    transition: all 0.2s ease;
    border: 2px solid transparent;

.thumbnail-item:hover {
    opacity: 1;
}

.thumbnail-item.active {
    opacity: 1;
    border-color: #f97316; /* Bordure orange pour l'image sélectionnée */
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #f97316;
}

/* Empêche tout élément de dépasser de l'écran */
html, body {
    max-width: 100%;
    overflow-x: hidden; /* Empêche le défilement horizontal */
    position: relative;
}