:root{
    --accent:#5b8cff;
    --bg:#f7f7fb;
    --card-bg:#ffffff;
}
*{box-sizing:border-box}
   
.titleAlbum {
    padding-left: 10px;
}

/* //////////////  MAIN GRID ////////////////// */

/* main album grid  */
.albums {
  margin: 10px;
  border-bottom: black 1px solid;
  border-top: black 1px solid;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 10px;
  padding: 15px;
  justify-content: center; 
}

/* album in main grid */
.album{
    background:var(--card-bg); 
    border-radius:10px; 
    padding:10px; 
    box-shadow:0 6px 18px rgba(20,20,50,0.06); 
    cursor:pointer; 
    transition:transform .15s ease, box-shadow .15s ease; 
    display:flex; 
    flex-direction:column;
}
.album:hover{
    transform:translateY(-6px); 
    box-shadow:0 12px 30px rgba(20,20,50,0.09)
}

/* main image/video from album */
.thumb{
    width:100%; 
    aspect-ratio:1/1; 
    border-radius:8px; 
    overflow:hidden; 
    background: #eee
}
.thumb img{
    width:100%; 
    height:100%; 
    object-fit:cover; 
    display:block
}

/* data title + photos number */
.meta{
    margin-top:8px; 
    display:flex; 
    justify-content:space-between; 
    align-items:center
}
.meta .title{
    font-size:14px; 
    font-weight:600
}
.meta .count{
    font-size:13px; 
    color:#666
}


/* //////////////  IN AN ALBUM  ////////////////// */


/* vue d'album */
.overlay{
    position: relative; 
    display:none; /* pas affiche de base */
    align-items:center; 
    justify-content:center; 
    padding: 28px;
    border-bottom : 1px solid black;
}
.overlay.open{
    display:flex /* affiche grace au js */
}

/* content vue album */
.panel{
    width:100%; 
    max-width:1100px; 
    max-height:90vh; 
    background:var(--card-bg); 
    border-radius:12px; 
    padding:16px; 
    overflow:auto; 
    box-shadow:0 20px 40px rgba(10,10,30,0.3)
}
.panel header{
    display:flex; 
    align-items:center; 
    justify-content:space-between; 
    gap:12px
}
.panel h2{
    margin:0; 
    font-size:16px
}
.grid{
    display:grid; 
    gap:10px; 
    margin-top:12px
}

/* responsive columns for images in album */
@media(min-width:1200px){ 
    .grid{grid-template-columns:repeat(4,1fr)}
 }
@media(min-width:900px) and (max-width:1199px){ 
    .grid{grid-template-columns:repeat(3,1fr)} 
}
@media(min-width:600px) and (max-width:899px){ 
    .grid{grid-template-columns:repeat(2,1fr)} 
}
@media(max-width:599px){ 
    .grid{grid-template-columns:repeat(2,1fr)} 
}

.grid-item{
    aspect-ratio:1/1; 
    border-radius:8px; 
    overflow:hidden; 
    background:#ddd; 
    position:relative
}
.grid-item img{
    width:100%; 
    height:100%; 
    object-fit:cover; 
    display:block
}

.panel .actions{
    display:flex; 
    gap:8px; 
    align-items:center
}
.btn{
    border:0; 
    padding:8px 12px; 
    background:var(--accent);
    color:white; 
    border-radius:8px; 
    cursor:pointer
}
.btn.ghost{
    background:transparent; 
    color:var(--accent); 
    border:1px solid 
    rgba(90,120,255,0.12)
}

/* petit effet au survol */
.grid-item:active{
    transform:scale(.995)
}