div#albumSupaBox {

	/* & * { border: 1px solid #fff4; padding: 2px; box-sizing: border-box; background-color: #FF003311;} */

	/* #albumSupaGrid */
	& ul.album-supa-grid {
		display: grid;
		transition: padding 200ms ease; transition-delay: 400ms;



		& img { }
		& svg.gal-type { display: block; width: 16px; fill: #888; }
		& i.qolorsqare { transform: scale(0.5); transition: transform 0.3s ease;}


		& > li {
			& > div.alb-header {
				position: relative;
				display: block;
				overflow: hidden;
			}

			&.opened {
				/* border: 1px solid red; */
				& i.qolorsqare { transform: scale(1);}
			}
		}

		& div.alb-cache { position: absolute; left: 0; right: 0; top: 0; bottom: 0; }

		& div.logo-by-tiny {
			display: block; width:27px; height:15px; border-radius: 26px; margin-right: 8px;
			background: transparent url('../../images/logo-bouygues.png') no-repeat center center; background-size: 100%;
		}

		& div.alb-titre-box {
			/* border: 4px solid crimson; */
			& > div {
				&:nth-child(1) { padding-left: 8px;}
				&:nth-child(2) { text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; }
				&:nth-child(3) { text-transform: uppercase; letter-spacing: 0.05em; }
				&:nth-child(4) { text-transform: uppercase; letter-spacing: 0.05em; }
				&:nth-child(5) {}
			}
		}

		& ul.alb-count {
			display: flex;
			/* opacity: 0; */
			/* transform: translateX(16px); */
			/* transition: all 200ms linear; */

			& > li {
				display: flex; flex-direction: row; justify-content: end; align-items: center;
				font-size: 0.75rem;
				& span { padding-left: 0px; padding-top: 0px;}
				& i { margin-left: 12px;}

			}
		}

		& div.alb-sub-area {
			overflow: hidden; transition: max-height 200ms ease; max-height: 0;
			& div.alb-sub-inside {
				& a.alb-sub-grid {
					display: grid; grid-template-columns: 48px 6fr 5fr 174px;
					border-top: 1px solid #0002;

					& > div {
						display: flex; flex-direction: row; justify-content: start; align-items: center;
						padding: 6px 0 4px 0;
						&:nth-child(1) { padding-left: 16px;}
						&:nth-child(2) { }
						&:nth-child(3) {
							overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
							/* & small { display: inline-block; width: 800px; border: 1px solid red;} */
						}
						&:nth-child(4) { }
					}



					/* display: none; */
				}
			}
		}



		&.grid-cards {
			grid-template-columns: repeat(1, 1fr); gap: 1rem;
			padding-top: 1rem;

			& > li {
				cursor: pointer;
				& > div.alb-header {
					min-height: 200px;
					/* aspect-ratio: 4/3; */
				}
			}

			& img { display: block; position: absolute; left: 0; right: -24px; top: 0; bottom: 0;z-index: 0; object-fit: cover; }

			& div.alb-titre-area {
				& div.alb-titre-box {
					/* border: 3px solid red; */
					position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 1;
					padding: 12px 12px 12px 12px;
					display: flex; flex-direction: column; justify-content: space-between; align-items: start;
					color: #fff;
					& > div {
						&:nth-child(1) { display: none; }
						&:nth-child(2) {
							position: absolute; top: 66%; width: calc(100% - 2rem); bottom: 0; z-index: 1; line-height: 1rem; transition: all 200ms ease;
							& div.logo-by-tiny { position: absolute; bottom: 8px; right: -16px; transition: all 200ms ease; }
							& svg { display: none;}
						}
						&:nth-child(3) {
							display: none;
						}
						&:nth-child(4) { position: absolute; bottom: 6px; z-index: 1;  font-weight: 700; font-size: 0.8rem; opacity: 0.5; transition: all 200ms ease; }
						&:nth-child(5) {}
					}


				}
			}

			& div.alb-cache { z-index: 0; top: 60%; transition: all 200ms ease; }
			& div.alb-cache-degrad { position: absolute; left: 0; right: -400px; top: -400px; bottom: 0;  transition: all 800ms ease; }

			& ul.alb-count {
				/* border: 1px solid limegreen; */
				position: absolute; top: 0; right: -12px; opacity:0; z-index: 2;
				padding: 12px 12px 12px 12px;
				flex-direction: column; justify-content: start; align-items: end;
				transition: all 200ms linear;

				& > li {
					& i { }
					&:nth-child(4) { display: none;}
				}
			}

			& div.alb-sub-area {
				display: none;
			}


			& > li {
				&:hover {
					& ul.alb-count {
						right: 0; opacity: 1;
					}
					& div.alb-cache { top: 84%;}
					& div.alb-cache-degrad { top: 0; right: 0;  }

					& div.alb-titre-box {
						& > div {
							&:nth-child(2) {
								top: 84%; line-height: 2rem;
								& div.logo-by-tiny {bottom: -20px; }
							}
							&:nth-child(4) { bottom: -24px; }
						}
					}
				}
			}
		}

		&.grid-table {
			grid-template-columns: repeat(1, 1fr); gap: 0px;

			& > li {
				border-bottom: 1px solid #0002;
				& > div.alb-header {
				}
			}

			& img { display: none; width: 0px; }

			& div.alb-cache-degrad { display: none; }

			& div.alb-titre-box {
				display: grid; grid-template-columns: 48px 6fr 3fr 2fr 174px;
				background-color: #fff;

				& > div {
					display: flex; flex-direction: row; justify-content: start; align-items: center;
					padding: 6px 0 4px 0;
					&:nth-child(1) { padding-left: 8px; cursor: pointer; }
					&:nth-child(2) {
						display: flex; flex-direction: row; justify-content: space-between; align-items: center;
						overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
						& svg { display: none; position: absolute; left: 16px; background-color: #fff;}
						&:hover {
							text-decoration: underline; text-underline-offset: 4px;
							& svg { display: block; }
						}
					}
					&:nth-child(3) { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
					&:nth-child(4) { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
					&:nth-child(5) {}
				}
			}

			& div.alb-cache { display: none;}

			& ul.alb-count {
				/* border: 1px solid limegreen; */
				flex-direction: row; justify-content: space-between; align-items: start;
				width: 174px; opacity: 0.6;

				& > li {
					& i { display: none; }
					& svg { display: block; width: 16px; margin: 0 auto; }

					&:nth-child(1) { width: 56px; padding-right: 6px; }
					&:nth-child(2) { width: 36px; padding-right: 6px; }
					&:nth-child(3) { width: 36px; padding-right: 6px; }
					&:nth-child(4) { width: 46px; padding-right: 6px; }
				}
			}

			& div.alb-sub-area {

			}
		}


	}
}

ul.grid-albums {
  display: grid; list-style: none; grid-gap: 1rem; line-height: 0;

  & li {
    overflow: hidden;

    & figure {
      position: relative; padding-bottom: 125%;

      & figcaption {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        color: #fff;
        /*   background: rgba(0,0,0, .2); */
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        line-height: 1.5em;
        padding: 0;
        font-size: .875rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .125em;
        pointer-events: none;
      }
      & img {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: .8;
        transition: all .3s;

        &:hover { opacity: 1; }
      }
    }
  }
}
ul.grid-albums-mozaik {
	  display: grid; grid-gap: 1rem; list-style: none;

	& li {
		overflow: hidden;
		background-position: center bottom; background-size: cover; background-repeat: no-repeat ;

		& a {
			/* border: 1px solid red; */
			display: block; position: relative;padding: 0px;
			background: linear-gradient(to bottom right, #0000 30%, #0005 130%); color: #fff;
			font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .125em;
			display: flex; flex-direction: column; justify-content: center; align-items: stretch;
			transition: all 0.3s ease;

			& * {
				box-sizing: border-box; margin: 0; padding: 0px;
				/* border: 1px solid #fff; padding: 1px; background-color: #f002; */
			}

			& div.alb-cache {
				position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 0;
				font-size: 0px; opacity: 0;
				transform: translateY(-96px);
				transition: all 400ms ease;
			}

			& div.alb-count {
				padding: 12px 12px 80px 12px;
				display: flex; flex-direction: row; justify-content: space-between; align-items: start;
				opacity: 0; transform: translateX(16px); transition: all 400ms ease;

				& > div {
					& > dl {
						display: flex; flex-direction: row; justify-content: end; align-items: center;
						& dt { padding-left: 8px; padding-top: 2px;}
						& dd { font-size: 0.75rem; padding-bottom: 2px;}
					}
				}
			}

			& div.alb-titre-area {
				padding: 10px 12px 0px 12px; min-height: 80px;
				display: flex; flex-direction: row; justify-content: space-between; align-items: start;
				transform: translateY(0px); transition: all 400ms ease;

				& div.alb-titre-cell {
					display: flex;  flex-direction: column; justify-content: space-between; min-height: 64px;
					line-height: 1rem; transition: line-height 200ms linear;

					& span { }
					& date { font-size: 0.65rem; opacity: 0.6; }
				}

				& div.logo-by { transform: translateY(0px); transition: all 400ms linear; margin-left: 32px; }
			}

			&:hover {
				& div.alb-count { opacity: 1; transform: translateX(0px); }

				& div.alb-cache { opacity: 1; transform: translateY(0px); }

				& div.alb-titre-area {
					transform: translateY(50px); padding: 4px 12px 0px 12px;
					& div.alb-titre-cell { line-height: 1.5rem; }

					& div.logo-by { transform: translateY(-40px); }

				}
			}
		}


		/* &:nth-child(1) {
			grid-row: 1 / span 2; grid-column: 1 / span 2;
		} */
	}
}



.logo-by,
.logo-by-tiny { display: block; border-radius: 26px; background: transparent url('../../images/logo-bouygues.png') no-repeat center center; background-size: 100%;  }
.logo-by { width: 48px; height:26px;  }
.logo-by-tiny { width:36px; height:20px; margin: 0 auto; }

.logo-google-two, .logo-google-one {   background: transparent url('../../images/googlegalpha.png') no-repeat center center; background-size: 100%;  }
.logo-youtube-two, .logo-youtube-one  {  background: white url('../../images/logo-youtube-red.png') no-repeat center center; background-size: 150%;   }
.logo-google-one, .logo-youtube-one { position:absolute;  width:24px; height: 24px; top: 12px; right: 12px; border-radius: 50%; }
.logo-google-two, .logo-youtube-two {  width:24px; height: 24px; border-radius: 50%; }

/* .grid-albums li:hover .logo-google-one,
.grid-albums-mozaik li:hover .logo-google-two,
.grid-albums li:hover .logo-youtube-one,
.grid-albums-mozaik li:hover .logo-youtube-two { opacity: 1} */





code {
	border: none; font-size: 0px; color: #BBB;
	display: none;
}


div.grid-collect-intro {
	display: grid; grid-template-columns: repeat(1, 1fr); gap: 1rem;

	& > div {
		&:nth-child(1) { padding-right: 3rem;}
	}
}

ul.nav-collection {
	font-size: 0.7rem;
	display: flex; flex-direction: column; justify-content: start; align-items: start; flex-wrap: wrap; gap: 0 1rem;
	margin: 1rem 0 2rem 0;
	height: 154px;
	& li {
		width: calc( 50% - 0.5rem);
		& a {
			position: relative; padding: 4px 0 2px 8px;
			display: flex; flex-direction: row; justify-content: flex-start; align-items: center;
			overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
			text-transform: uppercase; letter-spacing: 0.05em;
			transition: all 200ms ease;

			&:after {
				content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; border-radius: 4px;
				background-color: #000; transition: width 200ms ease;
			}

			&[aria-current] {
				background-color: #000; color: white; padding-left: 8px;
				pointer-events: none;
				&:after { }
			}

			&:hover { background-color: #000; color: white; padding-left: 12px;}
		}

		&:nth-child(1) {
			/* & a { padding: 20px 0 0 0;} */
		}
	}
}




@media screen and (min-width: 512px) {
	div#albumSupaBox {
		& ul.album-supa-grid {
			&.grid-cards { grid-template-columns: repeat(1, 1fr); }
		}
	}
}
@media screen and (min-width: 640px) {}


@media screen and (min-width: 768px) {
	div#albumSupaBox {
		& ul.album-supa-grid {
			&.grid-cards { grid-template-columns: repeat(2, 1fr); }
		}
	}

	div.grid-collect-intro {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media screen and (min-width: 960px) {
	div#albumSupaBox {
		& ul.album-supa-grid {
			&.grid-cards { grid-template-columns: repeat(3, 1fr); }
		}
	}
}
@media screen and (min-width: 1200px) {
	div#albumSupaBox {
		& ul.album-supa-grid {
			&.grid-cards { grid-template-columns: repeat(4, 1fr); }

			& li {
				&:nth-child(1) {
					grid-row: 1 / span 2; grid-column: 1 / span 2;
					& > div.alb-header {
						min-height: calc( 400px + 1rem);;
						/* aspect-ratio: 4/3; */
					}
				}
			}
		}
	}
}