/* Container général */
.sml-wrapper {
    display: flex;
    gap:10px;
	min-height:85vh;
}

/* Sidebar gauche */
.sml-sidebar {
    width: 15%;
  /*height: 80vh;
  overflow: auto;*/
  text-align: center;
 
}
/* CSS à ajouter pour du stycky-----------BUG--------decommenter main.js pour fonctionnement*/
/*
.ContainSidebar.sticky-fixed {
  position: fixed;
  top: 80px;           
  z-index: 9999;
  width: auto;         
  left: auto;        
}
.ContainSidebar-placeholder {
  display: none;
}*/

/* Liste des catégories */
/* Bouton principal */
.sml-dropdown-toggle {
    background: #F9F6EE;
    color: #141413;
    padding: 12px 20%;
    cursor: pointer;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    user-select: none;
}

/* Flèche */
.sml-arrow {
    border: solid #141413;
    border-width: 0 1px 1px 0;
    display: inline-block;
    padding: 6px;
	margin-top:-6px;
    transform: rotate(45deg);
    transition: all 0.3s;
}

.sml-dropdown-toggle.active .sml-arrow {
    transform: rotate(-135deg); /* flèche vers le haut */
	margin-top:8px;
	transition: all 0.3s;
}

/* Ouverte */
.sml-dropdown.open {
    max-height: 500px; /* assez pour contenir toutes les années */
	overflow-y:auto;
}

.sml-dropdown {
    margin: 0;
    padding: 0;
    list-style: none;
    
    max-height: 0;              /* caché */
    overflow: hidden;           /* masque le reste */
    transition: max-height 0.4s ease-in-out;  /* animation slide */
}

/* Ouverte */
.sml-dropdown.open {
    max-height: 500px; /* assez pour contenir toutes les années */
}


.sml-category-list ul {
	margin:0px;
}
.sml-category-list li {
    cursor: pointer;
    padding: 0px 10px;
	font-size:0.9em;
    border-bottom: 0px solid #141413;
	background-color:#F9F6EE;
	color:#141413;
	list-style:none;
    transition: all 0.3s;
}
.sml-category-list li:hover {
    background: #141413;
	color:#F9F6EE;
	transition: all 0.3s;
}
.sml-category-list li.active {
     background: #141413;
	color:#F9F6EE;
	transition: all 0.3s;
}

/* Container films */
.sml-grid {
    width: 85%;
	
    position: relative;
}
.sml-grid a{
	display:flex;
	width:23%;
	margin:1% 1%;
	display:inline-block;
	position:relative;
	aspect-ratio:3 / 4;
	overflow:hidden;
}
.ContainList{
	display:flex;
	flex-wrap: wrap;
}
.NameCat{
	text-align:center;
	
	padding:20px 0;
	border:1px solid #141413;
	font-size:1.2em;
	width:100%;
	margin-bottom:20px;
}


.movie-item-loop{
	width:100%;
	position:absolute;
	aspect-ratio:3 / 4;
	display:inline-block;
	background-size:100% 100%;
	background-position:center;
	background-repeat:no-repeat;
	bottom:0%;
	transition:all 0.5s;
}
.movie-item-loopShow{
	width:100%;
	position:absolute;
	aspect-ratio:3 / 4;
	display:inline-block;
	background-size:100% 100%;
	background-position:center;
	background-repeat:no-repeat;
	top:100%;
	transition:all 0.5s;
}

.sml-grid a:hover .movie-item-loop{
	bottom:100%;
	transition:all 0.3s;
}
.sml-grid a:hover .movie-item-loopShow{
	top:0%;
	transition:all 0.3s;
}

.movie-item-loop:hover{
	background-size:115% 115%;
	transition:all 0.3s;
}


/* Loader */
#sml-loading {
    display: none;
     width: 85%;
    position: absolute;
    top: 0px;
    left: 15%;
    color: #141413;
	height:85vh;
	background-color:#F9F6EE;
	z-index:10;
	text-align: center;
	padding-top: 15%;
}

/* Grille de films */
.sml-movie-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 colonnes sur desktop */
    gap: 20px;
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}

/* Film individuel */
.sml-movie-item img {
    width: 100%;
    display: block;
    border-radius: 6px;
}

/* Fade-in lors du chargement */
.sml-movie-list.fade-in {
    opacity: 0;
}

/* Responsive */
@media(max-width: 999px){
    .sml-wrapper {
        flex-direction: column;
    }
    .sml-sidebar, .sml-grid {
        width: 100%;
    }
    
	.sml-category-list li{
		display:inline-block;
		width:auto;
	}
	.sml-grid a{
		width:31.33333%;
	}
}

@media(max-width: 768px){
   	.sml-grid a{
		width:48%;
	}
}

@media(max-width: 480px){
   
}