/* TYPOS */

@font-face {
	font-family: "GarabossePerle";
	src: url(../fonts/Garabosse-Perle.ttf);
}

@font-face {
	font-family: "GarabosseParangon";
	src: url(../fonts/Garabosse-Parangon.ttf);
}

@font-face {
	font-family: "GarabosseGaillarde";
	src: url(../fonts/Garabosse-Gaillarde.ttf);
}

@font-face {
	font-family: "Fluxische";
	src: url(../fonts/FluxischElse-Regular.otf);
}

@font-face {
	font-family: "Panchi";
	src: url(../fonts/PanchiMono.otf);
}

:root{
    --bleu: rgb(191, 221, 255);
				--violetfonce:rgb(149, 0, 255);
				--violetclair:rgb(162, 152, 232);
}


/* ==== GENERAL  ===== */

body {
	background-color:rgb(149, 0, 255); 
	overflow: hidden;
	width: 100vw;
	height: 100vh;
	margin: 0;
		cursor:
		url("../img/curseur-normal.png") 4 4,
		auto;
}

div {

	width: fit-content;
}




button {
	all: unset;
	cursor: pointer;

	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	z-index: 15;
}

#responsive {

	display: none;
}

/* ======= GESTION DU LETTRAGE ======= */

.boite-lettrage {
	width: fit-content;


}

.lettrage {
filter: brightness(0) saturate(100%) invert(86%) sepia(49%) saturate(1200%) hue-rotate(179deg) brightness(105%) contrast(101%);
	position: absolute;
		-webkit-filter: drop-shadow(0.1em 0.7em 1em #ffff);
	filter: drop-shadow(0em 0em 0.8em #ffff);
	z-index: -10;
	display: block;
	top: 20vh;
	width: 60vw;
	left: 0vw;
	margin: auto;
	right: 0vw;

	/** -webkit-filter: drop-shadow(0.1em 0.4em 1em #79afff);
 filter: drop-shadow(-1.3em -0.2em 0.4em #79afff);**/
}

/* ======= GESTION DU CADENAS ======= */
a:hover {
	cursor: pointer;
}

#cache {
	display: none;
	/*position: absolute;
	left: 60vw;
	top: 64vh;*/
	width: 12vw;
	z-index: 1;
}

#visible {
	display: block;
	/*position: absolute;
	left: 60vw;
	top: 64vh;*/
	width: 12vw;
	z-index: 1;
}

.cadenas:hover #visible {
	display: none;

}

.cadenas {
	position: relative;
	margin-top:10pt;
	left: 50vw;
	top:33vh;
	-webkit-filter: drop-shadow(0.1em 0.7em 1em #ffff);
	filter: drop-shadow(-1.3em -0.2em 0.7em #ffff);
}

.cadenas:hover #cache {
	display: block;
		cursor: url("../img/curseur-pointeur.png") 18 4,
    pointer;
}

.cadenas:hover {
	-webkit-filter: drop-shadow(0.1em 0.4em 1em #ffff);
	filter: drop-shadow(-1.3em -0.2em 0.4em #ffff);

}


@media only screen and (max-width: 700px) {

.lettrage {
filter: brightness(0) saturate(100%) invert(86%) sepia(49%) saturate(1200%) hue-rotate(179deg) brightness(105%) contrast(101%);
	position: absolute;
		-webkit-filter: drop-shadow(0.1em 0.7em 1em #ffff);
	filter: drop-shadow(0em 0em 0.8em #ffff);
	position: absolute;
	z-index: -10;
	display: block;
	top: 27vh;
	width: 87vw;
	left: 0vw;
	margin: auto;
	right: 0vw;

	/** -webkit-filter: drop-shadow(0.1em 0.4em 1em #79afff);
 filter: drop-shadow(-1.3em -0.2em 0.4em #79afff);**/
}
	

#responsive {

	display: block;
}

/* ======= GESTION DU CADENAS ======= */



#visible {
	display: block;
	/*position: absolute;
	left: 60vw;
	top: 64vh;*/
	width: 30vw;

}

.cadenas:hover #visible {
	display: none;
}

.cadenas {
	position: relative;
	margin-top:10pt;
	left: 37vw;
	top:33vh;
	-webkit-filter: drop-shadow(0.1em 0.7em 1em #bfddff);
	filter: drop-shadow(-1.3em -0.2em 0.7em #bfddff);
		z-index: 50000;
}

.cadenas:hover #cache {
	display: none;
}






.bulles {
	/* display: none; */
	position: absolute;
	/* background-color: rgb(249, 253, 254); */
	font-family: "Panchi";
	/* color: blue; */
	text-align: left;
	top: 50vh ;
	left: 17vw;
	padding: 10pt 20pt 1pt 15pt;
	height: fit-content;
	min-height: 5em;
	width: 60vw;
	/* border: 2pt dotted pink; */
	/* filter: drop-shadow(0.1em 0.8em 1em #79afff); */
	/* border-radius: 100%; */
	/* box-shadow: 0px 2px 3px 0px rgba(212, 0, 255, 0.5), inset 0 -1px 3px 3px rgba(38, 0, 255, 0.4); */
	transition: all 150ms ease-in-out;
	z-index:1;
}




button {
	touch-action: manipulation;
	cursor: pointer;
	position: relative;
	padding: 1.25rem 3.75rem;
	border-radius: 1.87rem;
	font-size: 15pt;
  transition: all 150ms ease-in-out;
  border: 1px solid #01288045;
  background-image: linear-gradient(-180deg, #ffff 0%, #bfddff 100%);
  box-shadow: 0 0.5rem 0.625rem 0 rgba(0, 0, 0, 0.2), 0 -0.125rem 0.75rem var(--violetfonce) inset, 0 0.375rem 0.125rem rgba(255, 255, 255, 0.4) inset, 0 0.125rem 0.25rem 0 rgb(180, 70, 207) inset;
}

button p {
	color: var(--violetfonce);
	background-image: linear-gradient(0deg, #fcfcfc -10%, #FEFAFD 100%);
	-webkit-background-clip: text;
	background-clip: text;
	filter: drop-shadow(0 2px 2px var(--bleu));
}

button::before {
	content: "";
	display: block;
	height: 0.125rem;
	position: absolute;
	top: 0.25rem;
	left: 50%;
	transform: translateX(-50%);
	width: calc(100% - 3.75rem);
	background: #fff;
	border-radius: 100%;

	opacity: 0.7;
	background-image: linear-gradient(-270deg, rgba(255, 255, 255, 0.00) 0%, #FFFFFF 20%, #FFFFFF 80%, rgba(255, 255, 255, 0.00) 100%);
}

button::after {
	content: "";
	display: block;
	height: 0.125rem;
	position: absolute;
	bottom: 0.375rem;
	left: 50%;
	transform: translateX(-50%);
	width: calc(100% - 3.75rem);
	background: #fff;
	border-radius: 100%;

	filter: blur(1px);
	opacity: 0.05;
	background-image: linear-gradient(-270deg, rgba(255, 255, 255, 0.00) 0%, #FFFFFF 20%, #FFFFFF 80%, rgba(255, 255, 255, 0.00) 100%);
}

button:hover {
	filter: brightness(1.1);
}

button:active {
	transform: scale(.96);
}




}