body {
    margin: 0;
    font-family: Arial;
    background-color: #b3b3b4; /* couleur de fallback */
    background-image: url('../../assets/img/bg.png'); /* chemin vers ton image */
    background-repeat: no-repeat; /* évite la répétition */
    background-size: cover;       /* couvre tout le body */
    background-position: center;  /* centre l'image */
}

#menu{
    position:fixed;top:0;left:0;right:0;background:#222;color:white;
    padding:8px;z-index:9999;display:flex;gap:20px;align-items:center;
}
#container{display:flex;height:calc(100vh - 60px);margin-top:60px;gap:10px;padding:10px;}
.panel{flex:1;border:1px solid #ccc;display:flex;flex-direction:column;
    background-color: rgba(34, 34, 34, 0.7); /* 0.7 = 70% opaque */
color:#aaa;}
.header{display:flex;gap:5px;padding:5px;}
.header input{flex:1;}
.rootBtn{width:32px;cursor:pointer;}
ul{list-style:none;padding-left:20px;margin:0;overflow:auto;}
li{display:flex;align-items:center;cursor:pointer;padding:2px;}
li:hover{background:#323232;}
li img{margin-right:5px;cursor:pointer;}
img.thumb{width:50px;}
#popup{
    position:fixed;top:0;left:0;width:100%;height:100%;
    background:rgba(0,0,0,0.7);display:none;align-items:center;justify-content:center;
    z-index:10000;
}
#popup img{max-width:90%;max-height:90%;box-shadow:0 0 20px #000;display:block;margin:auto;}
#logPopup{
    display:none;position:fixed;top:10%;left:10%;width:80%;height:80%;
    background:white;color:black;overflow:auto;padding:20px;z-index:10001;box-shadow:0 0 20px #000;
}
#logPopup pre{white-space:pre-wrap;}
#logPopup button{position:absolute;top:10px;right:10px;}
input#thumbSize{width:60px;}


.newFolderBtn {
    width: 32px;
    height: 32px;
    background-color: transparent; /* ← IMPORTANT */
    background-image: url("../../assets/img/folder_add.png");
    background-size: 32px 32px;
    background-repeat: no-repeat;
    background-position: center;
    border: none;
    padding: 0;                     /* ← IMPORTANT */
    cursor: pointer;
}





#panelControls{
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:15px;
}

#panelControls button{
    font-size:24px;
    padding:10px 12px;
    cursor:pointer;
    border:1px solid #aaa;
    background:#f5f5f5;
    border-radius:6px;
}

#panelControls button:hover{
    background:#ddd;
}


li.selected{
    background:#cce5ff;
}



#newFolderPopup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    background: white;
    border: 1px solid #ccc;
    padding: 20px;
}




#contextMenu {
    position: fixed;
    z-index: 20000;   /* doit être supérieur à tous les autres z-index */
    display: none;
    background: #222;
    color: #fff;
    border-radius: 6px;
    padding: 4px 0;
    min-width: 160px;
    box-shadow: 0 4px 12px rgba(0,0,0,.4);
    font-size: 14px;
}



#contextMenu .ctx-item {
    padding: 8px 12px;
    cursor: pointer;
}

#contextMenu .ctx-item:hover {
    background: #444;
}

#renamePopup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    background: white;
    border: 1px solid #ccc;
    padding: 20px;
}
#renamePopup .popupContent {
    width: 400px;       /* Largeur fixe */
    max-width: 90%;     /* Pour rester responsive */
}

#renamePopup label {
    display: flex;
    flex-direction: column; /* texte au-dessus de l'input */
    gap: 5px;               /* petit espace entre label et input */
}

#renamePopup input[type="text"] {
    width: 100%;             /* prend toute la largeur disponible */
    box-sizing: border-box;  /* inclut le padding et bordure dans la largeur */
    padding: 6px 8px;        /* optionnel, pour plus de confort */
    font-size: 14px;
}



#deletePopup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    background: white;
    border: 1px solid #ccc;
    padding: 20px;
}