*{
margin:0;
padding:0;
box-sizing:border-box;
}


body{

height:100vh;

background:#050505;

display:flex;

justify-content:center;

align-items:center;

font-family:Arial, sans-serif;

}





/* =========================
   TELEPHONE
========================= */


.phone{

width:min(92vw,380px);

aspect-ratio:9/19.5;

background:#050505;

border:3px solid #333;

border-radius:45px;

overflow:hidden;

position:relative;

box-shadow:
0 0 40px #000,
inset 0 0 20px #111;

}





/* =========================
   CUBE
========================= */


#cube-zone{

position:absolute;

top:20px;

width:100%;

height:30%;

}







/* =========================
   FACE PRINCIPALE
========================= */


.face-view{

position:absolute;

top:38%;

height:42%;

width:100%;

display:flex;

justify-content:center;

align-items:center;

}



.face-grid{

width:270px;

aspect-ratio:1;

display:grid;

grid-template-columns:repeat(3,1fr);

gap:6px;

background-image:url("logos/fond-logos.png");

background-size:105%;

background-position:center;

}





.hotspot{

background:transparent;

border:none;

cursor:pointer;

border-radius:10px;

}



.hotspot:hover{

box-shadow:
0 0 15px #d4af37;

}








/* =========================
   DOCUMENTS
========================= */


#documents-screen{

position:absolute;

inset:0;

background:#050505;

display:none;

color:white;

padding:20px;

z-index:10;

}





.document-header{

height:55px;

display:flex;

align-items:center;

justify-content:center;

}





#face-title{

color:#d4af37;

font-size:22px;

text-transform:uppercase;

text-shadow:
0 0 10px #d4af37;

}





#back-button{

position:absolute;

left:15px;

top:18px;

background:none;

border:none;

color:#d4af37;

font-size:32px;

}





/* =========================
   CATEGORIES
========================= */


#category-menu{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:15px;

margin-top:25px;

}



#category-menu button{

height:65px;

background:#111;

border:1px solid #d4af37;

border-radius:14px;

color:#d4af37;

font-size:16px;

font-weight:bold;

text-shadow:
0 0 8px #d4af37;

box-shadow:
0 5px 15px #000;

}





#category-menu button:active{

transform:scale(.96);

}







#category-title{

text-align:center;

color:#d4af37;

font-size:18px;

margin:20px 0;

text-transform:uppercase;

}





/* =========================
   DOCUMENT LISTE
========================= */


#document-list{

height:calc(100% - 190px);

overflow-y:auto;

padding:10px;

}





.document-card{

background:#111;

border:1px solid #333;

border-radius:15px;

margin-bottom:20px;

padding:15px;

display:flex;

flex-direction:column;

align-items:center;

box-shadow:

0 8px 20px #000;

}





.document-card.selected{

border:2px solid #d4af37;

box-shadow:

0 0 20px #d4af37;

}





.document-card img{

width:100%;

height:210px;

object-fit:cover;

border-radius:10px;

}





.document-card video{

width:100%;

max-height:210px;

border-radius:10px;

}





.document-icon{

font-size:70px;

}





.document-name{

color:#d4af37;

margin-top:10px;

font-size:13px;

text-align:center;

}







/* =========================
   AJOUT
========================= */


#add-zone{

position:absolute;

bottom:0;

left:0;

height:70px;

width:100%;

background:#050505;

border-top:1px solid #333;

display:flex;

justify-content:center;

align-items:center;

z-index:15;

}





#add-zone label{

width:230px;

padding:12px;

border-radius:12px;

border:1px dashed #d4af37;

color:#d4af37;

text-align:center;

font-weight:bold;

}







#delete-button{

position:absolute;

right:20px;

bottom:20px;

background:#800;

color:white;

border:none;

border-radius:50%;

width:45px;

height:45px;

font-size:22px;

display:none;

}





/* =========================
   VISIONNEUSE
========================= */


#viewer{

position:absolute;

inset:0;

background:#050505;

display:none;

z-index:30;

}





#close-viewer{

position:absolute;

top:20px;

left:20px;

background:none;

border:none;

color:#d4af37;

font-size:32px;

z-index:2;

}





#viewer-content{

width:100%;

height:100%;

display:flex;

align-items:center;

justify-content:center;

padding:25px;

}





#viewer-content img{

max-width:100%;

max-height:85%;

}





#viewer-content video{

width:100%;

max-height:85%;

}







/* =========================
   SECURITE
========================= */


#security-screen,

#recovery-screen{

position:absolute;

inset:0;

background:rgba(0,0,0,.95);

display:none;

justify-content:center;

align-items:center;

z-index:50;

}





.security-box{

width:85%;

background:#111;

border:1px solid #d4af37;

border-radius:20px;

padding:25px;

text-align:center;

box-shadow:

0 0 30px #000;

}





.security-box h2{

color:#d4af37;

margin-bottom:15px;

text-shadow:

0 0 10px #d4af37;

}





.security-box p{

color:white;

margin-bottom:15px;

}





.security-box input{

width:100%;

height:45px;

margin:8px 0;

background:#050505;

border:1px solid #333;

border-radius:10px;

color:white;

padding:10px;

}





.security-box button{

width:100%;

height:45px;

margin-top:10px;

background:#111;

border:1px solid #d4af37;

border-radius:10px;

color:#d4af37;

font-weight:bold;

}





.security-box button:hover{

background:#d4af37;

color:#050505;

}







/* =========================
   RESPONSIVE INTERNE
========================= */


@media(max-height:650px){

.face-grid{

width:220px;

}


}