diff --git a/css/public.css b/css/public.css index d12401a..7263368 100644 --- a/css/public.css +++ b/css/public.css @@ -668,16 +668,35 @@ body { transform: scale(1.05); } -/* Colonne Image (Affiche) */ +/* --- ENVELOPPE DE L'IMAGE (DÉTAIL) --- */ .detail-poster { - flex: 0 0 240px; - width: 240px; - border-radius: 12px; - overflow: hidden; - border: 1px solid rgba(255, 255, 255, 0.05); - box-shadow: 0 20px 45px rgba(0, 0, 0, 0.8); - background: #141414; - align-self: flex-start; + width: 100%; + max-width: 320px; /* Aligne une largeur maximale propre */ + height: auto !important; /* Force la hauteur à s'annuler */ + max-height: none !important; /* Empêche tout bridage vertical */ + display: flex; + align-items: center; + justify-content: center; + background: transparent !important; + border: none !important; + box-shadow: none !important; + overflow: visible !important; /* Permet à l'effet 3D de déborder proprement */ +} + +/* --- L'IMAGE ELLE-MÊME (EFFET BOÎTIER 3D PHYSIQUE NON TRONQUÉ) --- */ +.detail-poster img { + width: 100% !important; + height: auto !important; /* L'image garde ses proportions d'origine */ + object-fit: contain !important; /* S'assure que RIEN n'est coupé */ + display: block; + border-radius: 4px 7px 7px 4px; + + /* Effet tranche de boîtier physique */ + border-left: 8px solid #141414; + border-top: 1px solid rgba(255, 255, 255, 0.15); + + /* Ombres portées */ + box-shadow: -6px 4px 18px rgba(0, 0, 0, 0.6), 6px 12px 28px rgba(0, 0, 0, 0.8); } .detail-poster.poster-critique {