body {
	background-color: white;
	color: black;
	font-family: Montserrat;
	font-weight: 400;
}

#menu-button {
	margin-left: 20px;
	padding: 15px;
	border-radius: 10px;
	cursor: pointer;
	font-weight: bold;
}

#menu-button:hover {
	background-color: white;
}

a {
	text-decoration: none;
	color: black;
}

nav {
	position: fixed;
	width: 100%;
	top: 0;
	left: 0;
	margin: 0;
	padding: 5px;

	display: flex;
	align-items: center;
	justify-content: space-between;

	background-color: var(--grey2);

	z-index: 2;
}

nav > div {
	display: flex;
	align-items: center;
	margin-right: 20px;
}
nav > div > * {
	margin: 0 10px 0 10px;
}

main, #main {
	margin-top: 70px;
}

#language-select {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: start;
	max-width: var(--button-height);
	padding: 5px;
	overflow: hidden;
	border-radius: 10px;
	transition: all ease .4s;
}
#language-select.focus {
	background-color: white;
	max-width: 500px;
}
#language-select > div {
	display: flex;
	flex-direction: row;
	align-items: center;
	margin-left: 5px;
}
#language-select.focus > .language {
	margin-right: 5px;
}
#language-select.focus > :not(.language) {
	transform: scale(0);
	width: 0;;
}

#sign-button {
	display: flex;
	flex-direction: column;
	align-items: center;
}

h3 {
	margin: 5px;
}

.en.hide, .fr.hide { display: none !important; }

nav img {
	height: 50px;
	margin: 10px;
	cursor: pointer;;
}
nav img#language-circle {
	height: 60px;
	position: fixed;
	pointer-events: none;
	z-index: -1;
	transition: all ease .3s;
	right: 65px;
}

#language-circle.shifted {
	right: -5px;
}

.dont-show { display: none!important; }

#alertes {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
}

.alert {
	display: flex;
	justify-content: space-between;
	align-items: center;
	
	width: 50%;
	margin: 5px;
	padding: 5px;
	border-radius: 5px;

	overflow: hidden;

	transition: all ease .3s;
	opacity: 1;
	max-height: 100px;
}
.alert.violet {
	border-color: var(--violet1);
	background-color: var(--violet2);
}
.alert.orange {
	border-color: var(--orange1);
	background-color: var(--orange2);
}
.alert.red {
	border-color: var(--red1);
	background-color: var(--red2);
}
.alert.green {
	border-color: var(--green1);
	background-color: var(--green2);
}
.alert.fade {
	opacity: 0;
	transform: translateY(-1em);
	max-height: 0px;
}

.alert .button {
	margin-right: 20px;
	width: 30px;
	height: 30px;
}
.alert .button > img {
	width: 30px;
	height: 30px;
}
.alert span {
	vertical-align: middle;
	margin-left: 20px;
}


.button {
	display: flex;
	align-items: center;
	justify-content: center;

	width: var(--button-height);
	height: var(--button-height);
	border-radius: 5px;
	cursor: pointer;
	/* margin-left: 10px; */
  
	transition: all .3s ease;
}
  
.button.white:hover { background-color: white; }
.button.violet:hover { background-color: var(--violet3); }
.button.orange:hover { background-color: var(--orange3); }
.button.black:hover { background-color: black; }
  
.button > img {
	width: var(--button-height);
	height: var(--button-height);
	transition: all .3s ease;
}

.button:hover > img { scale:  .8; }

.monospace {
	font-family: monospace;
	font-size: 1.1em;
}

.container {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
}
  
.load-cell {
	text-decoration: none;
	border: 1px solid var(--grey1);
	position: relative;
	overflow: hidden;
}
  
.load-cell::before {
	content: "";
	position: absolute;
	top: 0;
	/* left: -200%; */
	width: 200%;
	height: 100%;
	background: linear-gradient(
	  120deg,
	  transparent 0 20%,
	  var(--grey1) 40% 60%,
	  transparent 80% 100%
	);
	animation: load-cell 3s ease infinite;
}

.slide-once {
	display: inline-block;
	padding: 6px;
	border-radius: 5px;
	outline: none;
	border: none;
	color: var(--violet2);

	text-decoration: none;
	cursor: pointer;

	background:  linear-gradient(
	  120deg,
	  transparent 0 20%,
	  var(--violet3) 40% 60%,
	  transparent 80% 100%);
	background-repeat: no-repeat;
	background-size: 50% 100%;
	background-position: -100% 100%;

	transition: all ease .2s;
}
.slide-once:hover {
	background-position: 200% 0;
}

form .fake {
	position: absolute;
	opacity: 0;
	z-index: -1;
	pointer-events: none;
}

input[type="submit"] {
	cursor: pointer;
}

.flex-column {
	display: flex;
	flex-direction: column;
}
.flex-break {
	flex-basis: 100%;
	height: 0;
}

/* Flouter l'arrière plan des SweetAlerts */
body.swal2-shown > [aria-hidden='true'] {
	transition: 0.1s filter;
	filter: blur(3px);
}
.blured {
	transition: .5s filter;
	filter: blur(3px);
	pointer-events: none;
}
.swal2-radio {
	display: grid !important;
  	text-align: left !important;
}

/* Affichage des étoiles */
.ratings {
	display: inline-block;

	position: relative;
	vertical-align: middle;
	color: #b1b1b1;
	overflow: hidden;
}

.ratings.inline {
	display: flex;
	justify-content: start;
	align-items: center;
}
  
.full-stars, .full-circles{
	position: absolute;
	left: 0;
	top: 0;
	white-space: nowrap;
	overflow: hidden;
	color: #fde16d;
}
  
.empty-stars:before, .full-stars:before {
	content: "\2605\2605\2605\2605\2605";
	font-size: 14pt;
}
.empty-circles:before, .full-circles:before {
	content: "\0025CF\0025CF\0025CF\0025CF\0025CF";
	font-size: 14pt;
}


a.direct-link {
	display: inline-block;
	padding: 6px;

	text-decoration: none;

	color: var(--violet1);
	background:  linear-gradient(to right, var(--violet1), var(--violet1));
	background-size: 0 2px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size 400ms;
}
a.direct-link:hover {
	background-size: 100% 2px;
}

a.direct-link2, button.slide {
	display: inline-block;
	padding: 6px;
	border-radius: 5px;
	border: var(--violet1) 1px solid;

	text-decoration: none;
	cursor: pointer;

	color: var(--violet1);
	background:  linear-gradient(to right, var(--violet2), var(--violet2));
	background-size: 0 100%;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: 400ms;
}
a.direct-link2:hover, button.slide:hover {
	background-size: 100% 100%;
	color: white;
}

.remove {
	display: none !important;
}

.grey {
	color: var(--grey0);
}

.empty-stars:before, .empty-circles:before {
	-webkit-text-stroke: 1px #848484;
}
  
.full-stars:before, .full-circles:before {
	-webkit-text-stroke: 1px orange;
}

 /* The switch - the box around the slider */
 .switch {
	position: relative;
	display: inline-block;
	width: 60px;
	height: 34px;
  }
  
  /* Hide default HTML checkbox */
  .switch input {
	opacity: 0;
	width: 0;
	height: 0;
  }
  
  /* The slider */
  .slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	-webkit-transition: .4s;
	transition: .4s;
  }
  
  .slider:before {
	position: absolute;
	content: "";
	height: 26px;
	width: 26px;
	left: 4px;
	bottom: 4px;
	background-color: white;
	-webkit-transition: .4s;
	transition: .4s;
  }
  
  input:checked + .slider {
	background-color: var(--violet2);
  }
  
  input:focus + .slider {
	box-shadow: 0 0 1px var(--violet2);
  }
  
  input:checked + .slider:before {
	-webkit-transform: translateX(26px);
	-ms-transform: translateX(26px);
	transform: translateX(26px);
  }
  
  /* Rounded sliders */
  .slider.round {
	border-radius: 34px;
  }
  
  .slider.round:before {
	border-radius: 50%;
  }

.transparent {
	opacity: 0;
	pointer-events: none;
}

  
  /* Webkit-text-stroke is not supported on firefox or IE */
  /* Firefox */
@-moz-document url-prefix() {
	.full-stars{
		color: #ECBE24;
	}
}

@media (max-width:  1300px) {
	#menu-button {
		padding: 10px;
	}

	nav img {
		margin: 8px;
		height: 45px;
	}
	
	nav img#language-circle {
		height: 55px;
		right: 56px;
	}
}

@keyframes load-cell {
	0% { left: -200%; }
	20% { left: 100%; }
	100% { left: 100%; }
}

@keyframes click {
	0% { background-color: var(--violet2); color: white; }
}
@keyframes click-white {
	0% { background: white; color: var(--violet1); }
}

@keyframes bounce {
	0% { transform: scale(1.2); background-color: white; }
}


:root {
	--orange1: #f90;
	--orange2: rgb(255, 181, 70);
	--orange3: rgb(255, 208, 160);
	--violet1: #8b6fc0;
	--violet2: #ab95d6;
	--violet3: #e0d7f1;
	--blue1: #195aaf;
	--blue2: #4896bd;
	--blue3: #b5d4e2;
	--blue4: #e4f1f8;
	--green1: #32ad3d;
	--green2: #bbe7bf;
	--green3: #85dc8d;
	--red1: #700a0a;
	--red2: #b44f4f;
	--red3: #f0b1b1;
	--red4: #f3d9d9;
	--mobile-max-width: 720px;
	--grey0: #646464;
	--grey1: #aaa;
	--grey2: #eee;

	--button-height: 30px;
}

::selection {
	background: var(--violet3);
}