:root
{
	--body-background: #E3F2FD;
	--a-color: #333;
	--h3-color: white;
	--category-left-background: #ffebee;
	--category-left-box-shadow: 0px 1px 5px #90caf9;
	--ol-li-border-bottom: 1px solid white;
	--li-hover-color: #1565C0;
	--li-hover-span-color: #1565C0;
	--ol-li-hover-background: white;
	--global-content-box-shadow: 0px 1px 5px #90CAF9;
	--menu-bar-background: #2973c6;
	--content-site-content-other-background: #ffebee;
	--zone-image-site-background: #fff;
	--site-name-color: white;
	--site-name-background: rgba(21,101,192,0.7);
	--description-color: #333;
	--site-hover-description-color: #1565C0;
	--go-home2-a-go-cat-a-color: white;
	--go-home2-a-go-cat-a-background: #2973c6;
	--go-home2-a-go-cat-a-box-shadow: 0px 1px 5px #90CAF9;
	--go-home2-a-hover-background: #90CAF9;
	--go-home2-a-hover-color: #0D47A1;
	--go-cat-a-hover-background: #90CAF9;
	--go-cat-a-hover-color: #0D47A1;
	--category-background: #fff;
	--category-name-color: white;
	--category-name-background: rgba(21,101,192,0.5);
	--small-color: #FFCC80;
}

.darkmode
{
	--body-background: #1A202C;
	--a-color: #efc9a4;
	--h3-color: #efc9a4;
	--category-left-background: #3a434c;
	--category-left-box-shadow: 0px 0px 0px;
	--ol-li-border-bottom: 1px solid #2E2E2E;
	--li-hover-color: #02dac5;
	--li-hover-span-color: #02dac5;
	--ol-li-hover-background: #515a61;
	--global-content-box-shadow: 0px 0px 0px;
	--menu-bar-background: #2d3848;
	--content-site-content-other-background: #353d47;
	--zone-image-site-background: #515a61;
	--site-name-color: #FFCC80;
	--site-name-background: rgba(53,52,50,0.7);
	--description-color: #efc9a4;
	--site-hover-description-color: #1DDECB;
	--go-home2-a-go-cat-a-color: #EFC7A3;
	--go-home2-a-go-cat-a-background: #515a61;
	--go-home2-a-go-cat-a-box-shadow: 0px 0px 0px;
	--go-home2-a-hover-background: #eaeaea;
	--go-home2-a-hover-color: #353d47;
	--go-cat-a-hover-background: #eaeaea;
	--go-cat-a-hover-color: #353d47;
	--category-background: #515a61;
	--category-name-color: #FFCC80;
	--category-name-background: rgba(53,52,50,0.5);
	--small-color: #02DAC5;
}

body
{
	background: var(--body-background);
}

*
{
	box-sizing: border-box;
	margin: 0;
	font-family: arial;
}

a
{
	text-decoration: none;
	color: var(--a-color);
}

a:visited
{
	text-decoration: none;
}

h3
{
	margin-top: 8px;
	padding: 10px 15px 0 15px;
	/*float: left;
	margin-top: 8px;
	padding-left: 15px; */
	color: var(--h3-color);
	font-size: 30px;
}

.total-content
{
	margin-bottom: 20px;
	max-width: 1900px;
	display: flex;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	/*-webkit-flex-flow: row wrap;*/
	-webkit-flex-wrap: nowrap;
	margin: 0 auto;
}

.category-left 
{
	background: var(--category-left-background);
	margin-right: 10px;
	margin-top: 50px;
	flex: 0 0 300px;	
	white-space: nowrap; /* white-space et overflow pour ellipsis dans li */
	overflow: hidden;     
	box-shadow: var(--category-left-box-shadow);
	border-radius: 5px;
}

.category-left  img
{
	position: absolute;
	transition: transform .7s ease-in-out;
	margin: 10px 0 0 3px;
}

/* ol li dans category-left */
ol
{
	list-style: none;
	padding: 0px;
}

ol li
{
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-align: left;
	font-size: 14px;
	font-weight: 700;
	border-bottom: var(--ol-li-border-bottom); 
	height: 50px;
	line-height: 50px;	
	color: #efc9a4; /* Pour colorer "..." ellipsis */
	display: flex;
	min-width: 0;
}

/* pour rendre zone entièrement cliquable (ajouter:  display: flex min-width: 0 dans ol li) */
li a
{
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  transition: 0.3s;
}

li span
{
	margin-left: 37px;
}

li:hover img
{
	transform: rotateY(360deg);
}

li:hover a
{
	font-size: 16px;
	color: var(--li-hover-color);
	transition: 0.3s;
}

.category-left li:hover span
{
	color: var(--li-hover-span-color);
}

.current-category
{
	background:rgba(21,101,192,0.5);
}

.current-category:hover
{
	background:rgba(21,101,192,0.5); /* a modifier!!! et ajouter en haut */
}

ol li:hover
{
	background: var(--ol-li-hover-background);
	transition: 0.3s;
}

/* Contenu global sans category-left */
.global-content
{
	max-width: 1600px;
	margin-right: 15px;
	box-shadow: var(--global-content-box-shadow);
}

.menu-bar
{
	margin: 0 auto;
	max-width: 1600px;
	min-height: 50px;
	background: var(--menu-bar-background);
	border-radius: 1px 1px 0 0;
}

.content-site, .content-other
{
	margin: 0 auto;
	max-width: 1600px;
	max-height: 200000px;
	background: var(--content-site-content-other-background);
	overflow: hidden;
}

.content-other
{
	padding-bottom: 0px;
}

.site
{
	display: inline-block;
	float: left;
	height: 0;
	width: 23.2%;
	padding-bottom: 23.2%; /* en attendant qu'il y ai une description */
	/*padding-bottom: calc(23.2% + 100px);*/ /* On mettra ça quand il y aura une déscription (5 ligne max) */
	margin: 0.9%;
	transition: transform .2s;
}

.zone-image-site
{
	background: var(--zone-image-site-background);
	/*margin: 0.9% 0.9% 110px 0.9% ;*/
	/*height: 300px;*/
	transition: transform .2s;
}

.zone-image-site:hover
{	
	transform: scale(1.05);
}

.site-link
{
	display: block;
	width: 100%;
	position: relative;
	overflow: hidden;
	bottom: 0;
}

.site-link img
{
	width: 100%;
	height: auto;
	float: left;
}

.no-js  img .lazyload 
{ 
	display : none ;    
}

/* Permet de faire apparaitre l'image progressivement  */
.lazyload, .lazyloading
{
	opacity: 0;
}

.lazyloaded
{
	opacity: 1;
	transition: opacity 300ms;
}

.site-name
{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	font-size: 22px;
	font-weight: 700;
	color: var(--site-name-color);
	padding: 5px;
	background: var(--site-name-background);
	text-align: center;
	z-index: 5; /* inutile?? */
	line-height: 17px;
	-o-text-overflow: ellipsis;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

.favicon
{
	vertical-align: -3px;
	height: 16px !important;
	width: 16px !important;
	display: inline-block;
	background: url("https://www.youpornlist.com/images/sprite-ypl.png");
	margin: 0 5px 2px 5px;
}

.description
{
	padding-top: 10px;
	o-text-overflow: ellipsis;
	text-overflow: ellipsis;
	overflow: hidden;
	text-align: left;
	display: -webkit-box;
	-webkit-line-clamp: 5;
	-webkit-box-orient: vertical;
	color: var(--description-color);
	font-weight: 550;
	transition: 0.3s;
}

.site:hover .description
{
	color: var(--site-hover-description-color);
	transition: 0.3s;
}

.go-home2, .go-cat
{
	text-align: center;
	transition: .3s ease;
}

.go-home2 a, .go-cat a
{
	display: inline-block;
	color: var(--go-home2-a-go-cat-a-color);
	font-weight: bold;
	font-size: 20px;
	margin: 15px 0;
	padding: 10px 10px 5px 10px;
	background: var(--go-home2-a-go-cat-a-background);
	border-radius: 2px 2px 2px 2px;
	transition: .3s ease;
	text-transform: uppercase;
	box-shadow: var(--go-home2-a-go-cat-a-box-shadow);
}

/*********** go-home2 et go-cat identique, à optimiser!!! ***************/
.go-home2 a:hover
{
	text-decoration: none;
	background: var(--go-home2-a-hover-background);
	color: var(--go-home2-a-hover-color);	
}

.go-cat a:hover
{
	text-decoration: none;
	background: var(--go-cat-a-hover-background);
	color: var(--go-cat-a-hover-color);
}

.logo-home, .logo-home2
{
	float: left;
	padding-right: 8px;
}

.logo-home2
{
	margin-top: -8px;
}


/* Partie "CATEGORY" */
.category
{
	display: inline-block;
	float: left;
	height: 0;
	width: 23.2%;
	padding-bottom: 23.2%;
	background: var(--category-background);
	margin: 0.9%;
	/*height: 300px;*/
	transition: transform .2s;
}

.category:hover
{	
	transform: scale(1.05);
}

.category-link
{
	display: block;
	width: 100%;
	position: relative;
	overflow: hidden;
}

.category img
{
	width: 100%;
	height: auto;
	float: left;
}

.category-name
{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	font-size: 17px;
	font-weight: 700;
	color: var(--category-name-color);
	padding: 5px;
	background: var(--category-name-background);
	text-align: center;
	z-index: 5;
	line-height: 17px;
	-o-text-overflow: ellipsis;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

/* "View XXX sites!"" */
small
{
	display: block;
	font-size: 15px;
	font-weight: 600;
	color: var(--small-color);
	line-height: 18px;
	overflow: hidden;
	-o-text-overflow: ellipsis;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}

@media screen and (max-width: 1300px)
{
	.category-left 
	{
		flex: 0 0 200px;
	}

	li a
	{
		font-size: 10px;
	}

	li:hover a
	{
		font-size: 12px;
	}
}

@media screen and (max-width: 1050px)
{
	.category-left 
	{
		display: none;
	}

	.global-content
	{
		width: 94%;
		margin: 0 auto;
	}

	.site, .category
	{
	width: 46%;
	padding-bottom: 46%;
	/*padding-bottom: calc(46% + 90px);*/
	margin: 2%;
	}
}

@media screen and (max-width: 850px)
{
	.go-home
	{
		display: none;
	}

	h3
	{
		text-align: center;
	}
}

@media screen and (max-width: 550px)
{
	h3
	{
		margin-top: 12px;
		padding-left: 10px;
		font-size: 27px;
	}

	.site, .category
	{
		width: 94%;
		padding-bottom: 94%;
		/*padding-bottom: calc(94% + 95px);*/
		margin: 3%;
	}
}

@media screen and (max-width: 400px)
{
	h3
	{
		margin-top: 13px;
		padding-left: 10px;
		font-size: 22px;
	}
}