html {
	overflow-y: scroll;
}

body {
	color: #E6E6E6;
	font-family: ubuntu, arial, sans-serif;
	background-color: #fff;
	padding-bottom: 1em;
	 animation: fadein 2s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

p {
	font-family: ubuntu, arial, sans-serif;
	font-size: 0.9em;
	color: #E6E6E6;
	margin: .3em;
}

.titre {
	color: #e75137;
	font-weight: bold;
}

h1 {
	text-align: left;
	font-size: 1.5em;
	font-weight: bold;
	color: #e75137;
	margin-top: -8px;
}

.nom {
	text-align: left;
	color: #FFF;
	font-size: 2em;
	margin: 0 5.4%;
	padding-top: .2em;
}
h2 {
	margin-top: -0.3em;
	margin-bottom: .5em;
	color: #e75137;
}

h2 span {
	color: #7E7E7EB0;
}

h2 span:hover {
	color: #e75137;
	border-bottom: 1px solid #e75137;
}

a {
	text-decoration: none;
	margin-top: .5em;
	color: #474747;
	outline: 0;
	margin: auto;
	border-bottom: 1px solid transparent;
}

a:hover{
	color: #e75137;
	text-decoration: none;
	outline: 0;
	border-bottom: 1px solid #e75137;
}

a:active,
a:focus  {
	border-bottom: 1px solid transparent;
}
a.lienext:hover,
a.lienext:active,
a.lienext:focus,
a.croix:hover,
a.croix:active,
a.croix:focus,
a.cell,
a.cell:hover,
a.cell:active,
a.cell:focus {
	border-bottom: none;
}

.enveloppe {
	margin: 0 auto;
}

.hidden {
	display: none;
}

.unhidden {
	display: block;
}

.sommaire {
	margin: -250px 5% 15px 5%;
	border-radius: 5px;
	padding: .7em .5em .5em;
	background-color: #ffffff;
	box-shadow: 2px 2px 4px 2px #bbb8b845;
}

.etoile {
	color: #e75137;
	font-weight: bold;
	font-size: 1.2em;
	line-height: .8em;
	vertical-align: bottom;
}

.etoile::after {
    content: '*';
}

.celtit {
	width: 98%;
	margin: auto;
	grid-column: 1 / -1;
}

.close {
	float: right;
	font-size: 3em;
	margin-top: -20px;
	margin-right: -20px;
	transition: all .5s ease-in-out;
}

a.c2 {
	background-color: #00f800;
	padding: 0 0.6em;
	margin-right: .2em;
	border-radius: 20px;
	color: green;
	font-weight: bold;
	cursor: pointer;
	outline: 0;
}

a.c3 {
	background-color: orange;
	padding: 0 0.6em;
	margin-right: .2em;
	border-radius: 20px;
	color: #e75137;
	font-weight: bold;
	cursor: pointer;
	outline: 0;
}

.cycle {
	position: absolute;
	bottom: 0.2em;
	right: 0.2em;
}

.lien {
	position: absolute;
	bottom: 0.1em;
	left: 0.5em;
}

.conteneur {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	grid-column-gap: 10px;
	border-radius: 3px;
	margin: 0 5%;
	border: 1px solid #adadad70;
	padding: 15px;
	margin-bottom: 15px;
	background-color: #ffffff;
	box-shadow: 2px 2px 4px 2px #c0c0c030;
}

a.c2 span {
	position: absolute;
	width: 120px;
	color: #4E4E4E;
	background: #00f800;
	height: 30px;
	line-height: 30px;
	text-align: center;
	visibility: hidden;
	border: 2px solid #4E4E4E;
	border-radius: 6px;
}

a.c2 span:after {
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -8px;
	width: 0;
	height: 0;
	border-top: 8px solid #4E4E4E;
	border-right: 8px solid transparent;
	border-left: 8px solid transparent;
}

a.c3 span {
	position: absolute;
	width: 120px;
	color: #4E4E4E;
	background: orange;
	height: 30px;
	line-height: 30px;
	text-align: center;
	visibility: hidden;
	border: 2px solid #4E4E4E;
	border-radius: 6px;
}

a.c3 span:after {
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -8px;
	width: 0;
	height: 0;
	border-top: 8px solid #4E4E4E;
	border-right: 8px solid transparent;
	border-left: 8px solid transparent;
}

a:hover.c2 span,
a:hover.c3 span {
	visibility: visible;
	opacity: 0.8;
	bottom: 25px;
	left: 50%;
	margin-left: -62px;
	z-index: 999;
}

.collophon {
	position: fixed;
	bottom: 5%;
	opacity: .5;
	transform-origin: top left;
	transform: translateY(100%) rotate(-90deg);
	font-size: .9em;
	background-color: #4846467A;
	padding: 0.1em 1em;
	border-radius: 50px;
}

.collophon:hover {
	opacity: 1;
}

.collophon a:hover {
  text-decoration: none;
  border-bottom: 0px solid #e75137;
}

header {
	position: relative;
	height: 300px;
	background-color: #e75137;
	clip-path: polygon(0px 0px, 100% 0px, 100% 35.32%, 0px 106px);
	z-index: -100;
	margin: -10px -8px 0;
}

.retour {
	float: right;
	margin-right: 5.2%;
	margin-top: -40px;
	transition: all .5s;
}

.retour1 {
  float: right;
  margin-right: 7%;
  margin-top: -40px;
  transition: all .5s;
}
.retour:hover ,
.retour1:hover {
	transform: rotate(45deg);
}

.pastille {
	width: 250px;
	min-height: 110px;
	margin: 0 auto;
	border-radius: 10px;
	margin-bottom: 1.5em;
	text-align: center;
	background-color: #FFF;
	box-shadow: 4px 5px 15px #b0acacab;
	display: flex;
	position: relative;
	border: 1px solid transparent;
	transition: all .5s ease-in-out;
}

.pastille:hover {
	background: linear-gradient(90deg, rgba(231, 81, 55, 0.63) 0%, rgb(255, 255, 255) 4%);
	box-shadow: 0px 0px 0px;
	border: 1px solid #E6E6E6;
}

.intertitre {
	font-size: 1em;
	font-weight: bold;
	color: #7e7e7e;
	width: 95%;
	text-align: center;
	margin-left: .5em;
	margin-right: .5em;
}

.bttn {
	border: 0 solid #212121;
	padding: 0;
	cursor: pointer;
	margin-left: .7em;
	background: transparent;
	position: relative;
}

.bttn:active {
	transform: translateY(1px) translateX(-1px);
	opacity: .7;
}

.btcp {
	top: .5em;
	position: absolute;
}

.btcode {
	top: .5em;
	position: absolute;
	right: .6em
}
/*.msg-temporaire-clipboard{
	position: absolute;
	left: 45%;
	border: 2px solid #444343;
	border-radius: 10px;
	display: inline-block;
	padding: .5em 1em;
	background: #7E7E7E;
	color:#FFF;
	top: 250px;
	opacity: .9;
}
.msg-temporaire-clipboard:after {
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -8px;
	width: 0;
	height: 0;
	border-top: 8px solid #4E4E4E;
	border-right: 8px solid transparent;
	border-left: 8px solid transparent;
}*/
.msg-temporaire-clipboard{
	position: absolute;
	left: 45%;
	border: 2px solid #fff;
	border-radius: 5px;
	display: inline-block;
	padding: .5em 1em;
	background: #fff;
	color:#e75137;
	top: 250px;
	opacity: 1;
	box-shadow: 2px 2px 4px 2px #37373745;
}
.msg-temporaire-clipboard:after {
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -8px;
	width: 0;
	height: 0;
	border-top: 8px solid #fff;
	border-right: 8px solid transparent;
	border-left: 8px solid transparent;
}
.maj {
	bottom: 5px;
	position: fixed;
	color: #b9b9b9;
	font-size: .8em;
}