body {
	margin: 0 auto;
}

@font-face {
	font-family: OrangeKid;
	font-display: block;
	src: url("../orangekid.ttf") format("truetype"),
	url("../orangekid.woff") format("woff");
}

:root {
	--verrou-non: rgb(248, 56, 64);
	--verrou-oui: rgb(248, 192, 104);
	--couleur-nature: rgb(224,208,200);
	--couleur-menthe: rgb(224,240,248);
	--couleur-fraise: rgb(248,200,224);
	--couleur-banane: rgb(248,248,176);
	--couleur-cacahuete: rgb(248,216,184);
	--couleur-raisin: rgb(224,208,240);
	--couleur-melon: rgb(216,240,216);
	--couleur-perso: var(--couleur-nature);
}

img {
	image-rendering: pixelated;
	image-rendering: -moz-crisp-edges;
	image-rendering: -webkit-crisp-edges;
}

@keyframes bouton_entree {
	0% {
		background-color: rgb(168,16,64);
	}
	70% {
		background-color: rgb(248,16,112);
	}
	100% {
		background-color: rgb(168,16,64);
	}
}

@keyframes anim_fleche_fav {
	0% {
		margin-right: -4px
	}
	50% {
		margin-right: 4px
	}
	100% {
		margin-right: -4px
	}

}
@keyframes anim_fleche_lecteur {
	0% {
		margin-left: -4px
	}
	50% {
		margin-left: 4px
	}
	100% {
		margin-left: -4px
	}

}

@keyframes anim_fleche_haut {
	0% {
		top: 0px
	}
	50% {
		top: 8px
	}
	100% {
		top: 0px
	}

}

@keyframes anim_fleche_bas {
	0% {
		bottom: 0px
	}
	50% {
		bottom: 8px
	}
	100% {
		bottom: 0px
	}

}

@keyframes anim_plume {
	0% {
		margin-top: -8px;
		margin-left: -8px;
	}
	50% {
		margin-top: 0px;
		margin-left: 0px;
	}
	100% {
		margin-top: -8px;
		margin-left: -8px;
	}
}

#lecteur {
	background-color: black;
	visibility: hidden;
	position: relative;
	overflow: hidden;
	font-smooth: never;
	font-smoothing: none;
	-webkit-font-smoothing:none;
	-moz-osx-font-smoothing: grayscale;
}
#lecteur.complet {
	visibility: visible;
	width: 480px;
	height: 320px;
}
#lecteur.reduit {
	visibility: visible;
	width: 480px;
	height: 92px;
}

.ecran {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	transition: opacity .2s ease-out;
	transition-delay: 0s;
	opacity: 0;
	z-index: 0;
}
#ecran_courant {
	z-index: 1;
	opacity: 1;
	transition-delay: .3s;
}

#conteneur_ogv {
	display: none;
}
#div_boutons {
	height: 36px;
	margin: 182px 14px 6px 4px;
	padding: 0px;
	padding-left: 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
#lecteur.reduit #div_boutons {
	margin-top: 6px;
}
#div_boutons div {
	display: flex;
	align-items: center;
}
.bouton {
	margin: 0 5px;
	width: 20px;
	float: left;
	height: 20px;
	display: flex;
	user-select: none;
	--fond-boutons: rgb(168, 168, 168);
	background-color: var(--fond-boutons);
	cursor: pointer;
	justify-content: center;
	box-shadow:		
		2px		0		0	0		var(--fond-boutons),
		-2px	0		0	0		var(--fond-boutons),
		0px		-2px	0	0		var(--fond-boutons),
		0px		2px		0	0		var(--fond-boutons);
	-ms-box-shadow:		
		2px		0		0	0		var(--fond-boutons),
		-2px	0		0	0		var(--fond-boutons),
		0px		-2px	0	0		var(--fond-boutons),
		0px		2px		0	0		var(--fond-boutons),
}
.bouton.selection {
	padding: 2px;
	margin: 0 3px;
	--fond-boutons: var(--couleur-perso);
}
.bouton:not(.desactive):active, .bouton.actif {
	padding: 2px;
	margin: 0 3px;
	--fond-boutons: rgb(248, 248, 248);
}
.bouton.decoche {
	--fond-boutons: rgb(248, 248, 248);
}
.bouton.coche {
	padding: 2px;
	margin: 0 3px;
	--fond-boutons: rgb(248, 248, 248);
}

.bouton.bouton_verr.decoche {
	--fond-boutons: #F31E32;
}
.bouton.bouton_verr.coche {
	--fond-boutons: #35DE7E;
}

.bouton img {
	transform-origin: center;
	transform: scale(2);
	align-items: center;
	object-fit: contain;
	display: flex;
	filter: invert(39%) sepia(16%) saturate(555%) hue-rotate(349deg) brightness(92%) contrast(91%);
}
.bouton.decoche img {
	filter: invert(18%) sepia(93%) saturate(5218%) hue-rotate(348deg) brightness(103%) contrast(91%);
}
.bouton.coche img {
	filter: invert(76%) sepia(28%) saturate(1063%) hue-rotate(87deg) brightness(94%) contrast(88%);
}
.bouton.coche.selection:not(.bouton_verr) img {
	filter: invert(77%) sepia(47%) saturate(5324%) hue-rotate(333deg) brightness(99%) contrast(91%);
}
.bouton.selection img {
	filter: invert(46%) sepia(11%) saturate(1866%) hue-rotate(329deg) brightness(103%) contrast(89%);
}
.bouton:not(.desactive):active img, .bouton.actif img {
	filter: invert(58%) sepia(31%) saturate(1070%) hue-rotate(335deg) brightness(97%) contrast(93%)			
}
.bouton.bouton_verr img, .bouton.bouton_verr:active img {
	filter: invert(99%) sepia(4%) saturate(1405%) hue-rotate(196deg) brightness(118%) contrast(90%);
}

#surcouche_options {
	z-index: 200;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
#lecteur.reduit #surcouche_options {
	display: none;
}

.cadre {
	background: rgb(224,208,200);
	background: var(--couleur-perso);
	font-smooth: never;
	font-smoothing: none;
	-webkit-font-smoothing: none;
	-moz-osx-font-smoothing: grayscale;
	font-family: OrangeKid;
	margin: 4px;
}

.cadre ul {
	margin: 0px;
	padding-left: 0px;
}

.cadre li {
	font-size: 27px;
	white-space: nowrap;
	list-style-type: none;
	font-smooth: never;
	font-smoothing: none;
	-webkit-font-smoothing:none;
	-moz-osx-font-smoothing: grayscale;
	padding-left: 6px;
	/*padding-top: 18px;
	margin-top: -18px;*/
	margin-bottom: 1px;
	overflow: visible;
}

.cadre li:last-child {
	margin-bottom: 0px;
}

.cadre li a {
	color: black;
	display: inline-block;
	width: 100%;
	text-decoration: none;
	margin-left: 20px;
	cursor: pointer;
}

.bordure_simple {
	-ms-box-shadow:
		0		-4px	0	-2px	var(--couleur-perso),
		0		4px		0	-2px	var(--couleur-perso),
		
		0px		0		0	4px		white,
		-0px	-4px	0	2px		white,
		-0px	4px		0	2px		white,
		
		-2px	0		0	4px	black,
		2px		0		0	4px	black,
		0px		-2px	0	4px	black,
		0px		2px		0	4px	black,
		0px		6px		0	2px	black,
		0px		-6px	0	2px	black;
	box-shadow:
		0		-4px	0	-2px	var(--couleur-perso),
		0		4px		0	-2px	var(--couleur-perso),
		
		0px		0		0	4px	white,
		-0px	-4px	0	2px	white,
		-0px	4px		0	2px	white,
		
		-2px	0		0	4px	black,
		2px		0		0	4px	black,
		0px		-2px	0	4px	black,
		0px		2px		0	4px	black,
		0px		6px		0	2px	black,
		0px		-6px	0	2px	black;
}

#cadre_options {
	margin: auto;
	position: relative;
	padding-top: 5px;
}

#liste_options {
	width: 200px;
	padding-bottom: 8px;
	padding-right: 50px;
}
#liste_options.liste_couleurs {
	width: 140px;
}

#cadre_bouton_options {
	margin: 10px 8px;
	width: fit-content;
	height: 20px;
	float: left;
	margin-left: 8px;
	position: relative;
	background: var(--couleur-perso);
	cursor: pointer;
}

.plume_selection {
	left: -8px;
	animation-name: anim_plume;
	animation-duration: 1s;
	animation-timing-function: steps(4,start);
	animation-iteration-count: infinite;
}

.plume_survol {
	left: -8px;
	margin-left: -8px;
	margin-top: -8px;
}

#lecteur.reduit #cadre_bouton_options {
	display: none;
}

#bouton_options, #bouton_partage, #bouton_entree {
	vertical-align: top;
}
#bouton_entree {
	height: 12px;
	margin-left: 2px;
	top: 0px;
	padding: 2px 4px 6px 4px;
	animation-name: bouton_entree;
	animation-duration: 1.5s;
	animation-timing-function: steps(1,start);
	animation-iteration-count: infinite;
	box-shadow:		
		2px		0		0	0		rgb(32,32,32),
		-2px	0		0	0		rgb(32,32,32),
		0px		-2px	0	0		rgb(32,32,32),
		0px		2px		0	0		rgb(32,32,32);
	-ms-box-shadow:		
		2px		0		0	0		rgb(32,32,32),
		-2px	0		0	0		rgb(32,32,32),
		0px		-2px	0	0		rgb(32,32,32),
		0px		2px		0	0		rgb(32,32,32);

}
#bouton_options, #bouton_partage {
	height: 10px;
	top: 0;
	padding: 4px;
}

#div_bouton_tout {
	z-index: 50;
	width: fit-content;
	float: left;
	position: absolute;
	cursor: pointer;
	display: none;
	top: 17px;
	left: 142px;
	width: 266px;
	opacity: .5;
}
#div_bouton_tout:hover {
	opacity: 1;
}
#lecteur.reduit #div_bouton_tout {
	display: flex;
}
#lien_bouton_tout {
	display: flex;
	margin: auto;
	left: 0;
	right: 0;
	background-color: var(--couleur-perso);
	box-shadow:		
		2px		0		0	0		white,
		-2px	0		0	0		white,
		0px		-2px	0	0		white,
		0px		2px		0	0		white;
	-ms-box-shadow:		
		2px		0		0	0		white,
		-2px	0		0	0		white,
		0px		-2px	0	0		white,
		0px		2px		0	0		white;
}
#lien_bouton_tout img {
	height: 10px;
	margin: 2px 3px;
}

#cadre_morceau {
	height: 32px;
	margin: 0 6px;
	padding: 4px;
	background-color: rgb(248, 248, 248);;
	box-shadow:		
		2px		0		0	0		rgb(248, 248, 248),
		-2px	0		0	0		rgb(248, 248, 248),
		0px		-2px	0	0		rgb(248, 248, 248),
		0px		2px		0	0		rgb(248, 248, 248);
	-ms-box-shadow:		
		2px		0		0	0		rgb(248, 248, 248),
		-2px	0		0	0		rgb(248, 248, 248),
		0px		-2px	0	0		rgb(248, 248, 248),
		0px		2px		0	0		rgb(248, 248, 248);
}
#div_compteur {
	width: 54px;
	height: 100%;
	float: left;
	display: flex;
	align-items: center;
	justify-content: center;
}
#div_compteur img {
	transform-origin: top left;
	width: 18px;
	height: 18px;
	margin-right: -2px;
}
#div_compteur img:first-child {
	z-index: 2;
}
#div_compteur img:nth-child(2) {
	z-index: 1;
}
.complet #div_compteur img:hover, .complet #div_compteur img.actif {
	opacity: .8;
}

#cadre_titre {
	font-family: OrangeKid;
	font-size: 27px;
	line-height: 1.1;	
	white-space: nowrap;
	padding-left: 8px;
	padding-right: 10px;
	position: relative;
	height: 100%;
	box-sizing: border-box;
	margin-left: 64px;
	background-color: var(--couleur-perso);
	box-shadow:		
		2px		0		0	0		var(--couleur-perso),
		-2px	0		0	0		var(--couleur-perso),
		0px		-2px	0	0		var(--couleur-perso),
		0px		2px		0	0		var(--couleur-perso);
	-ms-box-shadow:		
		2px		0		0	0		var(--couleur-perso),
		-2px	0		0	0		var(--couleur-perso),
		0px		-2px	0	0		var(--couleur-perso),
		0px		2px		0	0		var(--couleur-perso);
}
#lien_titre {
	color: inherit;
	text-decoration: none;
}
#indicateurs_titre {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-right: 16px;
	position: absolute;
	top: 0px;
	bottom: 0px;
	right: 0px;
}
#indicateurs_titre img {
	transform: scale(2);
	transform-origin: right;
	object-fit: contain;
	margin-left: 16px;
}
#fav {
	visibility: hidden;
}

#surcouche_verrou {
	z-index: 200;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	cursor: not-allowed;
}
#fleches_verrou {
	position: absolute;
	transform: scale(2);
	bottom: 21px;
	left: 200px;
	cursor: pointer;
}
#lecteur.reduit #fleches_verrou {
	top: 19px;
	left: 248px;
}

#fleches_verrou.verrou0 {
	background-color: var(--verrou-non);
}
#fleches_verrou.verrou1 {
	background: linear-gradient(90deg, var(--verrou-oui) 25%, var(--verrou-non) 25%);
}
#fleches_verrou.verrou2 {
	background: linear-gradient(90deg, var(--verrou-oui) 50%, var(--verrou-non) 50%);
}
#fleches_verrou.verrou3 {
	background: linear-gradient(90deg, var(--verrou-oui) 75%, var(--verrou-non) 75%);
}
#fleches_verrou.verrou4 {
	background-color: var(--verrou-oui);
}

#fleche_fav, #fleche_lecteur {
	position: absolute;
	transform: scale(2);
	cursor: pointer;
	bottom: 12px;
	animation-duration: 1.2s;
	animation-timing-function: steps(4,start);
	animation-iteration-count: infinite;
}
#lecteur.reduit #fleche_fav, #lecteur.reduit #fleche_lecteur {
	display: none;
}

#fleche_fav {
	right: 14px;
	animation-name: anim_fleche_fav;
	transform-origin: bottom right;
}

#fleche_lecteur {
	left: 14px;
	animation-name: anim_fleche_lecteur;
	transform-origin: bottom left;
}

#div_fav_boutons {
	height: 36px;
	left: 4px;
	right: 20px;
	position: absolute;
	top: 10px;
	padding: 0px;
	padding-left: 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
#div_fav_boutons div {
	display: flex;
	align-items: center;
}
#div_fav_boutons #boutons_fav_2 {
	margin-right: -100px;
}

#cadre_liste {
	background-color: var(--couleur-perso);
	position: absolute;
	left: 8px;
	right: 8px;
	top: 56px;
	height: 210px;
	font-family: OrangeKid;	
	font-display: block;
	font-size: 27px;		
	-ms-box-shadow:
		0	-4px	0	-2px	var(--couleur-perso),
		0	4px		0	-2px	var(--couleur-perso),
		
		-2px	0		0	2px	rgb(248, 248, 248),
		2px		0		0	2px	rgb(248, 248, 248),
		-0px	-6px	0	0px	rgb(248, 248, 248),
		-0px	6px		0	0px	rgb(248, 248, 248),
		0px 	-2px	0	2px	rgb(248, 248, 248),
		0px		2px		0	2px	rgb(248, 248, 248),
		
		-4px	0		0	2px	black,
		4px		0		0	2px	black,
		0px		0		0	4px	black,
		0px		-4px	0	2px	black,
		0px		4px		0	2px	black,
		0px		8px		0	0px	black,
		0px		-8px	0	0px	black;
	box-shadow:
		0		-4px	0	-2px	var(--couleur-perso),
		0		4px		0	-2px	var(--couleur-perso),
		
		-2px	0		0	2px	rgb(248, 248, 248),
		2px		0		0	2px	rgb(248, 248, 248),
		-0px	-6px	0	0px	rgb(248, 248, 248),
		-0px	6px		0	0px	rgb(248, 248, 248),
		0px 	-2px	0	2px	rgb(248, 248, 248),
		0px		2px		0	2px	rgb(248, 248, 248),
		
		-4px	0		0	2px	black,
		4px		0		0	2px	black,
		0px		0		0	4px	black,
		0px		-4px	0	2px	black,
		0px		4px		0	2px	black,
		0px		8px		0	0px	black,
		0px		-8px	0	0px	black;
}

#aucun_fav {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

#zone_defil_haut, #zone_defil_bas, #fleche_haut, #fleche_bas {
	position: absolute;
	cursor: pointer;
	display: block;
	right: 8px;
	width: 30px;
	height: 20px;
	z-index: 200;
	/*background-color: rgba(255,0,0,.5);*/
}
#zone_defil_haut, #zone_defil_bas {
	left: 426px;
	/*background-color: rgba(0,255,0,.5);*/
	z-index: 100;
}
#fleche_haut {
	top: -2px;
	height: 8px;
}
#fleche_bas {
	bottom: -2px;
	height: 6px;
}

#fleche_haut img, #fleche_bas img, #fleche_retourne img {
	position: absolute;
	transform: scale(2);
	animation-duration: 1s;
	animation-timing-function: steps(4,start);
	animation-iteration-count: infinite;
	display: block;
	left: 0;
	right: 0;
	margin: auto;
}
#fleche_haut img, #fleche_bas img {
	pointer-events: none;
}

#cadre_liste .desactive {
	cursor: default;
}

#cadre_liste .desactive img {
	visibility: hidden;
}
#fleche_haut img {
	transform-origin: top center;
	animation-name: anim_fleche_haut;
}
#fleche_bas img {
	transform-origin: bottom center;
	animation-name: anim_fleche_bas;
}

#defil_fav {
	position: relative;
	top: 6px;
	left: 0px;
	height: 200px;
	margin-right: -100px;
	padding-right: 100px;
	overflow-y: hidden;
	overflow-y: scroll;
}

#liste_fav {
	font-size: 27px;		
	list-style-type: none;
	top: 0px;
	left: 0;
	width: 100%;
	min-height: 80%;
	margin: 0;
	margin-bottom: -2px;
	padding: 0px 0;
	position: relative;
	background-color: var(--couleur-perso);
}
#liste_fav:empty {
	visibility: hidden;
}

#liste_fav li {
	padding-left: 24px;
	height: 19px;
	width: 420px;
	margin-left: 10px;
	margin-top: 6px;
}
#liste_fav li:first-child {
	margin-top: 2px;
}
#liste_fav li a {
	height: 25px;
	/*overflow: hidden;*/
	line-height: 0.7;
	position: relative;
	top: -3px;
	white-space: nowrap;
	width: 350px;
	cursor: pointer;
	user-select: none;
	display: block;
	color: inherit;
	text-decoration: none;
}

#liste_fav li.courant {
	background-color: rgb(248, 220, 200);
	box-shadow:		
		2px		0		0	0		rgb(248, 220, 200),
		-2px	0		0	0		rgb(248, 220, 200),
		0px		-2px	0	0		rgb(248, 220, 200),
		0px		2px		0	0		rgb(248, 220, 200);
	-ms-box-shadow:		
		2px		0		0	0		rgb(248, 220, 200),
		-2px	0		0	0		rgb(248, 220, 200),
		0px		-2px	0	0		rgb(248, 220, 200),
		0px		2px		0	0		rgb(248, 220, 200);
}

#liste_fav li.lecture_arret, #liste_fav li.lecture_en_cours {
	background-repeat: no-repeat;
	background-size: 20px;
	background-position-x: 396px;
	background-position-y: center;
	image-rendering: pixelated;
}

#liste_fav li.lecture_arret {
	background-image: url("roue_stop.png");
}
#liste_fav li.lecture_en_cours {
	background-image: url("roue_charge.gif");
}