#_activite {
	width:       90vw;
	max-width:   1200px;
	margin:      0 auto;
	font-size:   120%;
	line-height: 1.5em;
	font-size:   18px;
	
	}

#_activite._largeur_totale {
	width:     100vw;
	max-width: 100vw;
	
	}

#_activite._largeur_totale._ui_adapted {
	width:     80vw;
	max-width: 80vw;
	}

#_activite._largeur_1400 {
	width:     90vw;
	max-width: 1400px;
	}

#_activite._largeur_1600 {
	width:     90vw;
	max-width: 1600px;
	}

._page {
	padding:        2em;
	display:        flex;
	flex-direction: row;
	flex-wrap:      wrap;
	}

:focus {
	outline: 0
	}

/* UTILITAIRES
************************************************************************************************************************/
._centre {
	justify-content: center;
	}

._droite {
	justify-content: flex-end;
	}

._gras {
	font-family: Bold;
	}

._sousligne {
	text-decoration: underline;
	}

._petit {
	font-size: 100%;
	}

._normal {
	font-size: 125%;
	}

._grand {
	font-size:   150%;
	line-height: 1.5em;
	}

._arrondi {
	border-radius: 6px;
	}

._message {
	padding: .5em;
	}

._texte_centre {
	text-align: center;
}

/* BLOCS
************************************************************************************************************************/

._bloc {
	flex:            0 0 100%;
	padding:         .5em;
	flex-wrap:       wrap;
	display:         flex;
	flex-shrink:     1;
	flex-grow:       1;
	justify-content: flex-start;
	align-content:   flex-start;
	align-items:     flex-start;
	
	}

._bloc > * {
	
	}

._bloc._demi {
	flex: 1 1 50%;
	
	}

._bloc._tiers {
	flex: 0 0 33.333%;
	
	}

._bloc._deux_tiers {
	flex:        1 1 66.666%;
	flex-shrink: 0;
	}

._bloc._quart {
	flex: 1 1 25%;
	
	}

._bloc._trois_quarts {
	flex: 1 1 75%;
	}

/* TYPO
************************************************************************************************************************/
#_activite > * {
	font-size: 2vmin;
	margin:    1em 0 .5em;
	}

._titre {
	font-size:   5vmin;
	font-family: ExtraBold;
	line-height: 6vmin;
	}
/* line-height: 1.1em; */

._titre:not(:first-child) {
	margin: 1em 0 .5em;
	}

._soustitre {
	font-size:   3vmin;
	font-family: Regular;
	margin:      1em 0 .5em;
	line-height: 4vmin;
	}


._soustitre:first-child {
	margin-top: 0;
	}

/* BOUTONS
************************************************************************************************************************/
._btn {
	background-size:  contain;
	background:       silver;
	padding:          .2em;
	color:            white;
	min-height:       2em;
	min-width:        2em;
	display:          inline-block;
	text-align:       center;
	transform-origin: center center;
	transition:       .2s transform cubic-bezier(0, .58, .23, 1.21);
	cursor:           pointer;
	border:           0
	}

._btn._ok {
	background-image: url(../img/btn-ok.png);
	background-size:  cover;
	}

._btn._prec {
	background-image: url(../img/btn-prec.png);
	background-size:  contain;
	}

._btn._suiv {
	background-image: url(../img/btn-suiv.png);
	background-size:  contain;
	}

._btn._rejouer {
	background-image: url(../img/btn-rejouer.png);
	background-size:  contain;
	}

._btn._reecouter {
	background-image: url(../img/btn-reecouter.png);
	background-size:  contain;
	}

._btn._imprimer {
	background-image: url(../img/btn-imprimer.png);
	background-size:  contain;
	}

._btn._docs {
	background-image: url(../img/btn-docs.png);
	background-size:  contain;
	flex-basis:       5vw;
	}

._btn._ecouter {
	background-image: url(../img/btn-ecouter.png);
	background-size:  contain;
	}

._btn._audio {
	background-image: url(../img/btn-audio.png);
	background-size:  contain;
	}

._btn._crayon {
	background-image: url(../img/btn-crayon.png);
	background-size:  contain;
	}

._btn._internet {
	background-image: url(../img/btn-internet.png);
	background-size:  contain;
	}

._btn._video {
	background-image: url(../img/btn-video.png);
	background-size:  contain;
	}

._btn._image {
	background-image: url(../img/btn-image.png);
	background-size:  contain;
	}

._btn._play {
	background-image: url(../img/btn-play.png);
	background-size:  contain;
	}

._btn._pause {
	background-image: url(../img/btn-pause.png);
	background-size:  contain;
	}

._btn._juste {
	background-image: url(../img/btn-juste.png);
	background-size:  contain;
	}

._btn._faux {
	background-image: url(../img/btn-faux.png);
	background-size:  contain;
	}

._btn._menu {
	background-image: url(../img/btn-menu.png);
	background-size:  contain;
	}

._btn._verifier {
	background-image: url(../img/btn-verifier.png);
	background-size:  contain;
	}

._btn._pasmal {
	background-image: url(../img/btn-pasmal.png);
	background-size:  contain;
	}

._btn._grand, ._btn._navigation {
	width: 5vw;
	height: 5vw;
	}


._btn:not(._inactif):hover {
	transform: scale(1.1);
	}

._btn._inactif {
	background-color: silver;
	}

._btn._prec._navigation {
	position: fixed;
	left:     0;
	top:      45vh
	}

._btn._suiv._navigation {
	position: fixed;
	right:    0;
	top:      45vh
	}

a._btn:hover {
	text-decoration: none;
	}

/* MEDIAS
************************************************************************************************************************/
._img {
	width:  100%;
	height: 100%
	}

blockquote {
	margin: 1em 0;
	}

blockquote p {
	margin:    0;
	font-size: 2em;
	}

._phylactere {
	/*position: relative;*/
	border-radius:    .4em;
	border:           0;
	padding:          1em;
	right:            0;
	transform:        scale(.5);
	transform-origin: center center;
	transition:       .5s transform cubic-bezier(0, .58, .23, 1.21);
	background:       #FF9900;
	}

._phylactere:after {
	content:          '';
	position:         absolute;
	bottom:           0;
	left:             50%;
	width:            0;
	height:           0;
	border:           32px solid transparent;
	border-top-color: inherit;
	border-bottom:    0;
	border-right:     0;
	margin-left:      -16px;
	margin-bottom:    -32px;
	z-index: 0;
	
	}

._phylactere:hover:after {
	/*border: 0;*/
	}

._anime ._phylactere {
	transform: scale(1);
	}

._reponse {
	width:            100%;
	margin:           1em 0 1em 0;
	border-radius:    .4em;
	padding:          1em;
	transform:        scale(0);
	transform-origin: right center;
	
	transition:       .5s transform cubic-bezier(0, .58, .23, 1.21) .5s, .3s box-shadow cubic-bezier(0, .58, .23, 1.21);
	cursor:           pointer;
	}


._reponse._inactif {
	background: silver;
	}

#_activite._anime ._reponse {
	transform: scale(1);
	}

#_activite._anime ._reponse:nth-child(1) { transition-delay: .1s }
#_activite._anime ._reponse:nth-child(2) { transition-delay: .2s }
#_activite._anime ._reponse:nth-child(3) { transition-delay: .3s }
#_activite._anime ._reponse:nth-child(4) { transition-delay: .4s }
#_activite._anime ._reponse:nth-child(5) { transition-delay: .5s }

/* QUIZ
************************************************************************************************************************/
#frmQuiz {
	margin:     0 auto;
	text-align: center;
	}

#_activite._quiz._hidden {
	display: none;
	}

#_activite._quiz {
	max-width:   100vw;
	padding-top: 4vw;
	
	}

#_activite._quiz ._page {
	display:   flex;
	flex-wrap: nowrap;
	padding:   0;
	width:     85vw;
	margin:    0 auto;
	}

#_activite._quiz #question {
	display:         flex;
	flex-direction:  column;
	justify-content: center;
	height:          70vh;
	text-align:      center;
	}

#_activite._quiz #reponse {
	display:         flex;
	flex-direction:  column;
	justify-content: center;
	height:          70vh;
	}

#_activite._quiz #perso {
	z-index: 100;
	height:  40%;
	width:   auto;
	margin:  0 auto;
	}

#_activite._quiz h2 {
	position:       fixed;
	z-index:        -10;
	top:            0;
	width:          100%;
	margin:         0;
	height:         90vh;
	font-size:      30vw;
	font-family:    ExtraBold;
	color:          #f9f9f9;
	
	margin:         0;
	text-transform: uppercase;
	}

#_activite._quiz #_options {
	width:          30vw;
	display:        flex;
	flex-direction: column;
	margin:         0 auto;
	}

#_activite._quiz #_options > div {
	display:        flex;
	flex-direction: column;
	margin:         2vh 0;
	}

#_activite._quiz #_options > div > div {
	margin: .5vh 0;
	}

#_activite._quiz ._btn._prec.sommatif, #_activite._quiz ._btn._suiv.sommatif {
	display: none;
	}

#_activite._quiz ._bloc._demi {
	display:         flex;
	flex-direction:  column;
	flex-wrap:       nowrap;
	/*align-content: center;*/
	justify-content: flex-start;
	height:          20vh;
	}

#_activite._quiz ._reponse.correct.formatif {
	background: green;
	color:      white;
	}

#_activite._quiz ._reponse.incorrect.formatif {
	background: maroon;
	color:      white;
	}

#_activite._quiz ._etape {
	opacity: .8;
	
	}

#_activite._quiz ._etape.correct {
	background-image: url(../img/btn-ok.png);
	background-size:  contain;
	}

#_activite._quiz ._etape.incorrect {
	background-image: url(../img/btn-ko.png);
	background-size:  contain;
	}

#_activite._quiz ._etape._courant {
	opacity:   1;
	transform: scale(1.5);
	}

#_activite._quiz ._reponse:hover {
	box-shadow: 0 4px 8px grey;
	}

#_activite._quiz ._media {
	text-align: center;
	margin:     .5em 0 0 0;
	max-height: 30vh;
	}


#_activite._quiz ._media img {
	max-height:         30vh;
	-webkit-transform:  scale(1);
	transform:          scale(1);
	transform-origin: center bottom;
	-webkit-transition: .3s ease-in-out;
	transition:         .3s ease-in-out;

	}

#_activite._quiz ._media img:hover {
	-webkit-transform: scale(1.8);
	transform:         scale(1.8);
	}

#_activite._quiz #avatar {
	height:          10vh;
	display:         flex;
	justify-content: flex-end;
	width:           100%;
	margin-top:      -15vh;
	}

#_activite._quiz #avatar .avatar._petit {
	margin: 0;
	}

#_activite._quiz #avatar img {
	height: 100%;
	width:  auto;
	}

#_activite ._progression {
	position:        fixed;
	bottom:          5vh;
	width:           85%;
	height:          1em;
	text-align:      center;
	display:         flex;
	justify-content: center;
	z-index:         500;
	}

#_activite ._progression a {
	margin:                .4em;
	display:               block;
	-webkit-border-radius: 100px;
	-moz-border-radius:    100px;
	border-radius:         100px;
	width:                 1em;
	height:                1em;
	}

#_activite._quiz .spacer {
	width: 30vw;
	
	}

#_activite._quiz #messageLogin {
	text-align: center;
	margin:1em 5em;
}


/* DICTEES
************************************************************************************************************************/

/* UI*/
#_activite._dictee {
	background: silver;
	padding:    0 0 5vh 0;
	margin:     0;
	width:      100%;
	height:     auto;
	max-width:  100vw;
	min-height: 100vh;
	}

#_en_tete {
	background: white;
	margin:     0;
	padding:    0;
	position:   fixed;
	width:      100%;
	height:     12vh;
	z-index:    1000;
	}

#_barre-outils {
	font-size:       120%;
	width:           70vw;
	height:          11vh;
	margin:          0vh auto 0;
	display:         flex;
	justify-content: space-between;
	align-content:   end;
	padding:         4px 0;
	}

#_outils {
	display:         flex;
	flex-direction:  column;
	justify-content: flex-end;
	height:          100%;
	flex: 1 1 60%
	}


#_activite._dictee #pause._btn._ecouter {
	
	background-image: url(../img/btn-play.png);
	background-size:  contain;
	transform:        scale(1.4);
	margin:           0 1vw;

	}

#_outils #_typo {
	display:         flex;
	flex-direction:  row;
	justify-content: space-between;
	}

#_outils select {
	margin: 0 40px 6px 4px;
	}

#_actions {
	display:         flex;
	flex-direction:  column;
	justify-content: flex-end;
	flex: 1 1 40%;
	text-align: right;
	}

#_activite._dictee ._page {
	
	display:             flex;
	flex-direction:      row;
	align-items:         baseline;
	justify-content:     flex-start;
	width:               70vw;
	left:                15vw;
	/*top:calc(15vh + 10px );*/
	line-height:         2em;
	box-shadow:          0px 6px 24px #333;
	padding:             calc(15vh + 10px) 3vw 3vw;
	margin:              0vh auto 5vh;
	background:          white;
	font-size:           120%;
	hanging-punctuation: allow-end;
	
	}

#_activite._dictee ._page div {
	display:         flex;
	flex-direction:  row;
	align-items:     center;
	justify-content: flex-start;
	}

#_activite._dictee #dictee-regle {
	height:              20px;
	font-size:           120%;
	top:                 19vh;
	
	width:               70vw;
	left:                calc(15vw - 8px);
	/*left:                */
	background:          url(../img/bg-dictee.png) no-repeat;
	background-size:     auto 20px;
	background-position: left center;
	margin:              0 auto;
	z-index:             3500;
	position:            fixed;
	}

#_activite._dictee ._select-label {
	height: .6em;
	}

#_activite._dictee #btn-valider {
	position: fixed;
	top:      55vh;
	right:    1vw;
	}

#_activite._dictee #btn-rejouer {
	position: fixed;
	top:      55vh;
	right:    calc(1vw + 4.5em);
	}


#_activite._dictee #_consigne {
	position:         fixed;
	top:              20vh;
	left:             1vw;
	background:       #ffe82b;
	padding:          .5em;
	z-index:          1500;
	box-shadow:       0 3px 8px rgba(0, 0, 0, .5);
	font-size:        1vw;
	max-width:        15vw;
	color:            #555;
	transform-origin: center center;
	transition:       1s transform cubic-bezier(0, .58, .23, 1.21);
	transform:        scale(1.2);
	}

#_activite._dictee #_consigne._anime {
	transform: scale(1);
	}

#_activite._dictee #_consigne #btn-close {
	color:   rgba(0, 0, 0, .5);
	float:   right;
	display: block;
	}

#_activite._dictee .decoupage {
	font-family:    Bold;
	font-size:      60%;
	vertical-align: super;
	color:          red;
	padding:        0 .5em;
	}

#_activite._dictee .input {
	display:         flex;
	flex-direction:  column;
	justify-content: center;
	}

#_activite._dictee input {
	border:      2px solid white;
	background:  #f0f0f0;
	padding:     0;
	margin:      0 .2em;
	color:       #3673ab;
	font-family: Regular;
	text-align:  center;
	max-height:  2em;
	max-width:   700px;
	}

#_activite._dictee input:focus {
	border: 2px solid orange
	}

#_activite._dictee input::placeholder {
	font-family: Regular;
	font-size:   80%;
	color:       silver;
	position:    relative;
	text-align:  center;
	}

#_activite._dictee ._entete {
	width: 100%;
	/*margin: 1em 0 2em 0;*/
	}

#_actions>div {
	display: flex;
	justify-content: flex-end;
}

#_actions a {
	margin: 0 4px;
}

@media screen and (max-width: 1024px) {
	#_actions a {
		transform: scale(0.6);
		margin: 0 1px;
	}

	#_activite._dictee #pause._btn._ecouter {
		transform: scale(.8);
		margin: 0 1px;
	}
}

/* TYPO */
#_activite._dictee h1 {
	width:          100%;
	font-size:      200%;
	font-family:    Regular;
	font-weight:    900;
	padding-bottom: .5em;
	margin:         1em 0;
	border-bottom:  1px solid silver
	}

#_activite._dictee h2 {
	width:          100%;
	font-size:      100%;
	text-transform: initial;
	
	color:          #888;
	text-align:     right;
	padding:        .5em 0 2em 0;
	margin-top:     2em;
	border-top:     1px solid silver;
	font-size:      75%;
	}

/* MEMO MACHINES
************************************************************************************************************************/

._memo .consigne {
	display:         flex;
	flex-direction:  column;
	flex-wrap:       nowrap;
	justify-content: center;
	height:          80vh;
	}

._memo .choix {
	display:         flex;
	flex-direction:  column;
	flex-wrap:       nowrap;
	justify-content: center;
	}

._memo .choix ._item {
	display: block;
	float:   left;
	margin:  0 1em 1em 0;
	padding: 1em 2em;
	}

._memo ._page {
	flex-wrap: nowrap;
	}

._memo_carte {
	background: radial-gradient(circle, #dedede, #b1b1b1) fixed;
	width:            50vw;
	height:           calc(50vw / 2);
	background:       silver;
	border-radius:    20px;
	transform-origin: 50% 50%;
	position:         absolute;
	top:              10vh;
	left:             25vw;
	transition:       .7s all cubic-bezier(0, .58, .23, 1.21);;
	padding:          30px;
	box-shadow:       rgba(0, 0, 0, .5) 0px 10px 20px;
	text-align:       center;
	display: flex;
	flex-direction: column;
	justify-content: space-between;

	}

._memo_carte.active {
	transform:  rotate(0deg);
	background: url(../img/bg-memo-1.png)  ;
	}

._memo_carte.active h1 {
	display: none;
	}

._memo_carte.inactive {
	transform: scale(.3) translateX(-120vw) translateY(-0vh);
	background: url(../img/bg-memo-1.png) ; 
	radial-gradient(circle, "#dedede", "#b1b1b1");
	}

._memo_carte.inactive h1 {
	font-family: Regular;
	color:gray;
	align-self: center;
	justify-self: center;
  padding-top: .2em;
	}

._memo_carte.inactive h2, ._memo_carte.inactive h3, ._memo_carte.inactive input, ._memo_carte.inactive button ,._memo_carte.inactive h4 {
	display: none;
	}

._memo_carte h1 {
	color:       white;
	font-size:   16vw;
	text-align:  center;
	font-family: Bold;
	line-height: 1em;
	padding:     0;
	}

._memo_carte.echec h2 {
	color: white;
	}

._memo_carte h2 {
	font-size: 2vw;
	padding-top: 1em;
	}

._memo_carte h3 {
	color:     white;
	font-size: 1vw;
	margin:    1.5em;
	order:100
	}

._memo_carte h4 {
	font-size: 2vw;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	}

._memo_carte h4 div {
align-self: center;
	flex: 0 1 auto
	}

._memo_carte.done, ._memo_question {
	/*display: none;*/
	}

._memo_carte input {
	font-size: 2vw;
	width:auto;
	}

._memo_carte.done.succes {
	transform:  scale(.2) translateX(200vw) translateY(-30vh) rotate(2deg);
	background: radial-gradient(circle, #6ade74, #50a050) ;
	}


._memo_carte.done.echec {
	transform: scale(.2) translateX(200vw) translateY(30vh) rotate(-4deg);
	}

._memo_carte.echec {
	background: radial-gradient(circle, #de3f47, #730e14) ;
	
	}

._memo_erreur {
	animation: _memo_erreur_animation 1s;
	}


._memo_carte.echec input[type=text] {
	color:         white;
	border-bottom: 3px solid white;
	}


._memo_score {
	position:   absolute;
	z-index:    100;
	height:     36px;
	width:      100%;
	text-align: center;
	font-size:  24px;
	color:      white
	}

._memo_carte ._btn {
	margin: 0;
	}

._memo_carte input[type=text] {
	border:        0;
	border-bottom: 3px solid grey;
	background:    transparent;
	text-align:    center;
	}

.audios {
	display: none
	}

@keyframes _memo_erreur_animation {
	10%, 90% {
		transform: translate3d(-1px, 0, 0);
		}
	
	20%, 80% {
		transform: translate3d(2px, 0, 0);
		}
	
	30%, 50%, 70% {
		transform: translate3d(-4px, 0, 0);
		}
	
	40%, 60% {
		transform: translate3d(4px, 0, 0);
		}
	}

/* TIROIR
************************************************************************************************************************/
#_tiroir_wrapper {
	width: 5vw;
	}

#_tiroir {
	position:    fixed;
	top:         0vh;
	height:      100vh;
	width:       15vw;
	left:        94vw;
	display:     flex;
	align-items: center;
	transition:  .5s left cubic-bezier(0, .58, .23, 1.21);
	overflow:    hidden;
	}

#_tiroir._gauche {
	left: 0vw;
	order:1;
	}

#_tiroir._ouvert {
	width: 30vw;

	}

#_tiroir._apercu {
	left: 88vw
	}

#_tiroir._apercu._gauche {
	left: -6vw;
	}

#_tiroir ._btn {
	margin-top: -40vh;
	width:      5vw;
	height:     5vw;
	display:    block;
	flex:       0 0 5vw;
	}

#_tiroir._gauche ._btn {
	margin-top: -40vh;
	width:      5vw;
	height:     5vw;
	display:    block;
	flex:       0 0 5vw;
	order: 2;
	}

#_tiroir._gauche._ouvert  {
	overflow: inherit;
	width: 20vw;
	}

#_tiroir._ouvert ._btn {
	/*flex: 0 0 auto;*/
	
	}


#_tiroir ._contenu {
	height:         85vh;
	display:        flex;
	flex-direction: column;
	
	overflow-y:     scroll;
	overflow-x:     hidden;
	padding:        1vw;
	box-shadow:     0 4px 8px rgba(0, 0, 0, .5);
	}



#_tiroir._ouvert ._contenu {
	flex: 0 0 100%;
	
	}

#_tiroir ._item {
	width:      15vw;
	height:     15vw;
	flex:       0 0 auto;
	
	margin:     1vw;
	background: silver;
	}

 #_tiroir._devoirs ._item {
	background: transparent;
	}

#_tiroir ._item a {
	color:white;
	text-align: center;
	font-size: 90%;
	display: block;
	}

#_tiroir ._item a:hover {
	text-decoration: none;
	}

#_tiroir ._item img{
	max-width: 15vw;
	}

/* LOGIN
************************************************************************************************************************/
._login_panel {
	background:          url(../img/personnage_login.png) no-repeat;
	background-size:     contain;
	background-position: bottom left;
	display:             flex;
	width:               20vw;
	}

._login_form {
	display:         flex;
	justify-content: center;
	width:           100%;
	min-width:       800px;
	text-align:      center;
	margin:          10vh 0 0 0;
	
	}

._login_form h3 {
	font-family:    ExtraBold;
	text-transform: uppercase;
	margin:         1em 0;
	font-size:      150%;
	}

._login_form p {
	padding: .5em 0;
	/*display: flex;*/
	/*justify-content: flex-start;*/
	width:   60vw;
	
	}

._login_form span {
	/*flex: 0 0 2em*/
	display: inline-block;
	}

._login_form p.description {
	justify-content: center;
	margin:          2em 0 1em 0;
	}

._login_form label {
	/*width:       8em;*/
	/*display:     inline-block;*/
	font-family: Bold;
	text-align:  left;
	}

._login_form li {
	text-align:    left;
	font-size:     1.5vw;
	margin-bottom: 2em;
	}

._login_form input[type=text] {
	width: 8em;
	}

._login_form ._erreur {
	font-family:  ExtraBold;
	color:        maroon;
	border-color: maroon;
	margin:       0 0 0 .5em;
	}

._login_form ._btn._connexion {
	background-image:    url(../img/btn-login.png);
	background-size:     1.7em;
	background-repeat:   no-repeat;
	background-position: center left;
	padding-left:        2em;
	line-height:         2em;
	}


/* CONNEXION - PAGE DE LOGIN 
************************************************************************************************************************/

._login_connection {
	display:         flex;
	justify-content: center;
	width:           100%;
	min-width:       600px;
	text-align:      center;
	margin:          0 0 0 0;
	
	}

._login_connection h3 {
	display: inline-block;
	font-family:    ExtraBold;
	color: white;
	text-transform: uppercase;
	margin:         1em 0;
	font-size:      180%;
	width:           100%;
	}

._login_connection p {
	padding: .5em 0;
	/*display: flex;*/
	/*justify-content: flex-start;*/
	width:   60vw;
	
	}

._login_connection span {
	/*flex: 0 0 2em*/
	display: inline-block;
	}

._login_connection p.description {
	justify-content: center;
	margin:          2em 0 1em 0;
	}

._login_connection label {
	/*width:       8em;*/
	/*display:     inline-block;*/
	font-family: Bold;
	text-align:  left;
	}

._login_connection li {
	text-align:    left;
	font-size:     1.2vw;
	margin-bottom: 2em;
	}

._login_connection input[type=text] {
	width: 8em;
	height: 2em;
	}
._login_connection input[type=password] {
	width: 8em;
	height: 2em;
	}

._login_connection ._erreur {
	font-family:  ExtraBold;
	color:        maroon;
	border-color: maroon;
	margin:       0 0 0 .5em;
	}

._login_connection ._btn._connexion {
	background-image:    url(../img/btn-login.png);
	background-size:     1.7em;
	background-repeat:   no-repeat;
	background-position: center left;
	padding-left:        2em;
	line-height:         2em;
	}






/* LISTE
************************************************************************************************************************/
._liste {
	display:        flex;
	flex-direction: column;
	width:          80vw;
	max-width:      1000px;
	margin:         0 auto;
	
	}

._element_liste {
	display:         flex;
	justify-content: space-between;
	margin:          1em 0;
	border-radius:   8px;
	padding:         1em;
	}

._element_liste:hover {
	text-decoration: none;
	}

._element_liste ._centre {
	flex: 0 0 70%;
	}

._element_liste ._titre, ._element_liste .illustration {
	flex: 0 0 15%;
	}

/* RESULTATS
************************************************************************************************************************/

#_resultats {
	width:      60vw;
	max-width:  1200px;
	margin:     0 auto;
	text-align: left;
	}

._resultats_item {
	
	display:         flex;
	justify-content: space-between;
	align-content:   center;
	margin:          0 0 2em 0;
	padding:         .5em;
	border-radius:   4px;
	}

._resultats_item ._resultats_question, ._resultats_item ._resultats_reponse {
	flex:       0 0 38%;
	align-self: center;
	}

._resultats_item ._resultats_question {
	font-family: Bold;
	align-self:  center;
	}

._resultats_item ._resultats_resultat {
	flex:       0 0 10%;
	align-self: center;
	}

._resultats_item ._resultats_numero {
	flex:        0 0 5%;
	font-size:   300%;
	font-family: ExtraBold;
	padding:     0 0 0 0;
	align-self:  center;
	}

._resultats_item ._resultats_question img {
	width:  100%;
	height: 100px;
	width:  auto;
	margin: .5em
	}

._resultats_item p {
	margin-top: 1em;
	}

._resultats_item ._juste, ._resultats_item ._faux {
	
	align-self:  center;
	font-family: ExtraBold;
	}


/* ESPERLUETTE
************************************************************************************************************************/
.jumbotron {
	}

.jumbotron .button-bar {
	display:         flex;
	justify-content: space-between;
	margin:          0;
	padding:         0;
	}


.esperluette .button, .esperluette .btn-success {
	width:   fit-content;
	height:  fit-content;
	padding: 0 1em 0 0;
	margin:  1em;
	}

.mainFilter .btn-success {
	padding:    1em;
	align-self: center;
	width:      fit-content;
	height:     auto;
	}


.jumbotron .btn, .grid .btn, .esperluette .btn-success.save, #filter-form .button {
	padding:    1em;
	align-self: center;
	width:      fit-content;
	height:     auto;
	border:     0
	}

#filter-form .button {
	padding: .3em;
	}


#_activite.esperluette > * {
	font-size: 90%;
	}

#_activite.esperluette h1 {
	font-size:     150%;
	font-family:   ExtraBold;
	margin:        1em 0 .5em 0;
	border-bottom: 1px solid silver
	}

.esperluette .button.back.top {
	display: none;
	}

.esperluette .form-control {
	width: 70vw;
	}

.esperluette .row.header {
	width:      100%;
	text-align: right;
	}

.esperluette .col-lg-7 {
	width:     100%;
	flex:      1 1 100%;
	max-width: none;
	float:     right
	}

.esperluette .col-lg-3 {
	display: none;
	}

.esperluette #filter-form {
	width: 100%;
	}

.esperluette label > span {
	font-weight: 800;
	margin:      1em 0 1em 0;
	}

.esperluette .help_text {
	font-size:   70%;
	font-weight: 100;
	color:       grey;
	}

.esperluette .custom-file {
	margin-bottom: 1em;
	}

.esperluette label {
	width: 60vw;
	}

.esperluette textarea {
	height: 6em;
	display: block;
}

.esperluette textarea>div {
	width: 70vw;
}
.esperluette  .w-50 {
	width: 70vw!important;
}


/************************************************************************************************************************/
/* COULEURS DE FOND
/***********************************************************************************************************************/
body._fond_rouge {
	background: radial-gradient(circle, #ff8480, #ff4a39) fixed;
	}

body._fond_gris {
	background: radial-gradient(circle, #dedede, #b1b1b1) fixed;
	}

body._fond_bleu {
	background: radial-gradient(circle, #9cc1de, #869dc4) fixed;
	}

body._fond_vert {
	background: radial-gradient(circle, #c1dea7, #b6de65) fixed;
	}

body._fond_orange {
	background: radial-gradient(circle, #deb684, #de9947) fixed;
	}

body._fond_jaune {
	background: radial-gradient(circle, #ded687, #dec74d) fixed;
	}


/************************************************************************************************************************/
/* ANIMATION
/***********************************************************************************************************************/
@-moz-keyframes jiggle {
	0% {
		-moz-transform: rotate(-1deg);
		}
	50% {
		-moz-transform: rotate(1deg);
		}
	}

@-webkit-keyframes jiggle {
	0% {
		-webkit-transform: rotate(-1deg);
		}
	50% {
		-webkit-transform: rotate(1deg);

		}
	}

._animation_jiggle {
	-webkit-animation:              jiggle .5s infinite;
	-moz-animation-duration:        2s;
	-moz-animation-name:            jiggle;
	-moz-animation-iteration-count: infinite;
	}

iframe._inomaths {
	width: 100%;
	height: 93vh;
	border:0;
}

iframe._inomaths .row{
	border:1px dotted red 
}