body {
	font-family: Regular;
	}

#wrapper {
	margin:      0 auto;
	padding-top: 6vh;
	min-height:  90vh;
	}

#accueil #wrapper, #videotheque #wrapper {
	padding-top: 14vh;
	}

/* MOBILE */
@media screen
and (min-device-width: 320px)
and (max-width: 568px) {
	
	#wrapper {
		padding-top: 20vh;
		}
	}

/* FILTRE
******************************************************************************************/
#e-filter {
	margin:                  0;
	position:                fixed;
	top:                     7vh;
	height:                  7vh;
	font-family:             Bold;
	color:                   white;
	width:                   100%;
	/*padding: 1vh;*/
	z-index:                 20000;
	background:              #d83137;
	-webkit-backdrop-filter: blur(15px);
	backdrop-filter:         blur(15px);
	display:                 flex;
	flex-direction:          column;
	justify-content:         center;
	}

#filter {
	display:         flex;
	justify-content: center;
	width:           100%;
	
	}

#e-filter div {
	padding: 0 1em;
	}

#e-filter select {
	overflow: hidden;
	}


#e-filter input[type=search], #e-filter select {
	height:                29px;
	background:            rgba(0, 0, 0, 0.1);
	color:                 black;
	width:                 20vw;
	font-family:           Bold;
	font-size:             1.5vw;
	border:                0;
	-webkit-border-radius: 95px;
	-moz-border-radius:    95px;
	border-radius:         95px;
	}

#e-filter input[type=search] {
	padding: 0 .5em;
	}

#e-filter input[type=search]::placeholder {
	color: rgba(255, 255, 255, .5);
	}

input[type="search"]::-webkit-search-cancel-button {
	-webkit-appearance: searchfield-cancel-button;
	color:              white;
	}

#e-filter #btn-search {
	border:     0;
	background: 0;
	color:      white;
	}

.resultat form {
	display: inline;
	}

.filter-suggestion {
	background:      0;
	border:          0;
	display:         inline-block;
	text-decoration: underline;
	cursor:          pointer;
	}

#search {
	color: white
	}

/* MOBILE */
@media screen
and (min-device-width: 320px)
and (max-width: 568px) {
	
	#e-filter {
		height: auto;
		}
	
	#filter {
		flex-direction: column;
		}
	
	#filter div {
		flex:   1 1 100%;
		margin: 1vh 0;
		}
	
	#e-filter input[type=search] {
		width: 50vw;
		}
	
	#e-filter select {
		width: 70vw;
		}
		
	}

/* PAGE
************************************************************************************************************************/
._page._largeur_totale {
	width:     100vw;
	max-width: 100vw;
	margin:    0 auto;
	}

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

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

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

._page {
	padding:        2em;
	display:        flex;
	flex-direction: row;
	flex-wrap:      wrap;
	width:          80vw;
	margin:         0 auto;
	}

#inscription ._page {
	min-height: 90vh;
	
	}

/* MOBILE */
@media screen
and (min-device-width: 320px)
and (max-width: 568px) {
	
	._page {
		padding: 0 1em;
		width:   100%;
		}
		
	}

/* 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%;
	}

/* MOBILE */
@media screen
and (min-device-width: 320px)
and (max-width: 568px) {
	
	._bloc._demi, ._bloc._tiers, ._bloc._deux_tiers, ._bloc._quart, ._bloc._trois_quarts {
		flex: 1 1 100%;
		}
		
	}

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

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

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

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

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

#intro {
	margin: 0 0 3em 0;
	}

.link {
	color: #d83137;
	}

#intro .link {
	display:    block;
	
	text-align: right;
	width:      100%;
	}

/* MOBILE */
@media screen
and (min-device-width: 320px)
and (max-width: 568px) {
	._soustitre {
		font-size: 24px;
		
		}
	}

/* VIDEO ACCUEIL
************************************************************************************************************************/
#videos {
	display:        flex;
	flex-direction: column;
	/*width: 100%;*/
	width:          45vw;
	/*height: 18vw;*/
	}


#hero {
	
	width:         100%;
	height:        calc(45vw * 0.56); /* largeur #videos * (9/16) */
	transition:    3.0s backgound ease;
	border-radius: 8px;
	overflow:      hidden;
	background:    silver;
	}

#hero #preview {
	height:              100%;
	background-size:     cover;
	background-position: center center;
	display:             flex;
	flex-direction:      column;
	justify-content:     flex-end;
	cursor:              pointer;
	}


#hero #preview.hidden, #player.hidden {
	display: none;
	}

#hero #legend {
	background:  rgba(255, 255, 255, .6);
	font-size:   1.5vw;
	font-family: Bold;
	padding:     .5em;
	}


#hero #player {
	height:     100%;
	background: #222;
	}

#player #btn-close {
	position:      absolute;
	width:         2vw;
	height:        2vw;
	border-radius: 100px;
	font-size:     1.3vw;
	text-align:    center;
	color:         white;
	background:    #9f2c32;
	margin-left:   -1em;
	}

#videotheque #player {
	display: none;
	}

#videotheque #player.show {
	display: block;
	}

#message {
	display: none;
	width:   100%;
	color:   white;
	padding: 2em;
	}

#message.show {
	display:         flex;
	flex-direction:  column;
	justify-content: center;
	text-align:      center;
	}

.msg-button {
	padding:       .5em 2em;
	border:        1px solid white;
	border-radius: 8px;
	margin:        1em;
	cursor:        pointer;
	transition:    .5s ease-in-out background-color;
	}

.msg-button:hover {
	background: rgba(255, 255, 255, .2);
	}

.buttons {
	display:         flex;
	justify-content: center;
	}

.visuel {
	max-height: 20vh;
	margin:     2vh 0;
	}

#hero .inner {
	/*padding-top: 60%;*/
	}

#playlist {
	display:         flex;
	flex-direction:  row;
	justify-content: space-between;
	width:           100%;
	margin-top:      4vh;
	}

#playlist .thumb {
	flex:          1 1 12.5%;
	/*background: silver;*/
	width:         12.5%;
	margin:        2px;
	border:        4px transparent solid;
	border-radius: 8px;
	overflow:      hidden;
	cursor:        pointer;
	}

#playlist .thumb .inner {
	padding-top: 90%;
	}

#playlist .thumb.active {
	border: 4px #5e181b solid;
	}

#nav {
	display:   flex;
	flex-wrap: wrap;
	}

#nav .btn {
	background:  #666;
	color:       white;
	font-family: Bold;
	font-size:   1vw;
	flex:        0 0 50%;
	display:     block;
	padding:     1em 0 1em;
	line-height: 1em;
	margin:      0;
	height:      auto;
	transition:  .5s background-color ease, transform .2s ease;
	}

#nav .btn:hover {
	background: #d83137
	}

#navlarge {
	display:   flex;
	flex-wrap: wrap;
	min-width: 40vw;
	}

#navlarge .btn {
	background:  #666;
	color:       white;
	font-family: Bold;
	font-size:   1vw;
	flex:        0 0 25%;
	display:     block;
	padding:     1em 0 1em;
	line-height: 1em;
	margin:      0;
	height:      auto;
	transition:  .5s background-color ease, transform .2s ease;
	}


#navlarge .btn:hover {
	background: #d83137
	}


/* MOBILE */
@media screen
and (min-device-width: 320px)
and (max-width: 568px) {
	
	#nav {
		flex: 0 0 100%;
		
		}
	
	#nav .btn {
		flex:       0 0 100%;
		margin-top: 1em;
		font-size:  18px;
		}
	
	#navlarge {
		flex: 0 0 100%;
		}
	
	#navlarge .btn {
		flex:       0 0 100%;
		margin-top: 1em;
		font-size:  18px;
		}
	
	
	#accueil .visuel {
		margin: 10vh auto;
		}
	
	#accueil ._page {
		width:   95vw;
		padding: 14vh 0 0;
		margin:  0 1vw;
		}
	
	#videos {
		width: 90vw;
		}
	
	#hero {
		height: calc(90vw * .52);
		}
	}

/* VIDEOTHEQUE
************************************************************************************************************************/
#videotheque {
	background: #555;
	}

.videos-grid {
	display:         flex;
	flex-wrap:       wrap;
	justify-content: flex-start;
	align-content:   flex-start;
	width:           100vw;
	}

.videos-grid .item {
	cursor: pointer;
	}

.videos-grid .item, .videos-grid .front, .videos-grid .back {
	width:    25vw;
	height:   calc(25vw * 0.52);
	overflow: hidden;
	margin:   0;
	padding:  0;
	}

.videos-grid .back {
	position:                absolute;
	display:                 none;
	background:              rgba(0, 0, 0, .6);
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter:         blur(5px);
	margin-top:              calc(25vw * -0.52);
	color:                   white;
	padding:                 1em;
	}

.videos-grid .back p {
	margin: 0 0 2px 0;
	}

.videos-grid .back .gutter {
	display:         flex;
	flex-direction:  column;
	justify-content: flex-end;
	height:          100%;;
	}

.videos-grid .back .titre {
	font-family: Bold;
	font-size:   1.1vw;
	}

.videos-grid .back .auteur {
	font-family: Bold;
	font-size:   .8vw;
	margin:      .5em 0;
	}

.videos-grid .back .small {
	font-family: Regular;
	font-size:   .7vw;
	}


.videos-grid .item:hover .back {
	display: block;
	}

.videos-grid .prix {
	
	height:          100%;
	display:         flex;
	flex-direction:  column;
	justify-content: flex-start;
	
	
	text-align:      center;
	}

.videos-grid .prix > div {
	width:          fit-content;
	padding:        .5em;
	border-radius:  100px;
	font-size:      70%;
	text-transform: uppercase;
	font-family:    Bold;
	background:     rgba(226, 222, 0, 1);
	margin:         8px 20px 4px auto;
	}

/* TAILLES */

/* TEL */
@media only screen and (min-width: 200px)  and (max-width: 700px) {
	.videos-grid .item, .videos-grid .front, .videos-grid .back {
		width:  100vw;
		height: calc(100vw * 0.52);
		}
	
	.videos-grid .back {
		margin-top: calc(100vw * -0.52);
		font-size:  4vw;
		}
	
	.videos-grid .back .titre {
		font-size: 5vw;
		}
	
	.videos-grid .back .auteur {
		font-size: 3vw;
		}
	}

/* < 1200 */
@media only screen and (min-width: 701px)  and (max-width: 1200px) {
	.videos-grid .item, .videos-grid .front, .videos-grid .back {
		width:  33vw;
		height: calc(33vw * 0.52);
		}
	
	.videos-grid .back {
		margin-top: calc(33vw * -0.52);
		}
		
	}

/* < 1920 */
@media only screen and (min-width: 1281px)  and (max-width: 1920px) {
	.videos-grid .item, .videos-grid .front, .videos-grid .back {
		width:  25vw;
		height: calc(25vw * 0.52);
		}
	
	.videos-grid .back {
		margin-top: calc(25vw * -0.52);
		}
		
	}

/* > 1920 */
@media only screen and (min-width: 1921px) {
	.videos-grid .item, .videos-grid .front, .videos-grid .back {
		width:  20vw;
		height: calc(20vw * 0.52);
		}
	
	.videos-grid .back {
		margin-top: calc(20vw * -0.52);
		}
		
	}

#modal-detail #btn-modal-close {
	width:         3vw;
	height:        3vw;
	display:       block;
	border-radius: 100px;
	font-size:     2vw;
	line-height:   1.5em;
	text-align:    center;
	color:         white;
	background:    #9f2c32;
	/*margin-left: -1em;*/
	z-index:       1000;
	}


#modal-detail {
	position:       fixed;
	top:            20vh;
	left:           15vw;
	width:          70vw;
	height:         50vh;
	background:     #333;
	border-radius:  8px;
	z-index:        1000000;
	box-shadow:     0 4px 20px grey;
	padding:        1vw;
	display:        flex;
	flex-direction: row;
	align-content:  space-around;
	overflow-x:     hidden;
	overflow-y:     hidden;
	}

#modal-detail {
	display: none;
	}

#modal-detail #player {
	width:  100%;
	margin: 0 0 0 3vw;
	}


#modal-detail.show {
	display: flex;
	}

#backdrop {
	display:                 none;
	background-color:        white;
	transition:              .5s background-color ease;
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter:         blur(5px);
	}

#backdrop.show {
	position:         absolute;
	display:          block;
	top:              0;
	left:             0;
	width:            100vw;
	height:           100vh;
	background-color: rgba(34, 34, 34, 0.9);
	z-index:          1000000;
	
	
	}

/* ACTIVITES
************************************************************************************************************************/

.activites-grid {
	margin-top:      2vw;
	display:         flex;
	flex-wrap:       wrap;
	justify-content: center;
	align-content:   flex-start;
	/*overflow:        hidden;*/
	padding:         8vh 9vw;
	width:           100%;
	}

.logged .activites-grid {
	width: 80vw;
	}

.group .activites-grid {
	padding: 0;
	}

#activite-grid a, #activite-grid a:hover {
	text-decoration: none;
	}

.activites-grid .item {
	width:            20vw;
	height:           20vw;
	
	display:          flex;
	flex-direction:   column;
	text-decoration:  none;
	color:            #666;
	transform-origin: 50% 50%;
	transition:       .2s all cubic-bezier(0, .58, .23, 1.21);
	cursor:           pointer;
	flex-wrap:        wrap;
	}

.activites-grid .placeholder {
	width:  20vw;
	height: 20vw;
	/*flex-basis: 1;*/
	/*background: #f0f0f0;*/
	
	}

.activites-grid .item:hover {
	color:     black;
	transform: scale(1.1);
	
	}

.activites-grid .item .icon {
	width:           14vw;
	height:          14vw;
	border-radius:   4px;
	background:      silver;
	margin:          0 auto;
	display:         flex;
	flex-direction:  column;
	justify-content: space-between;
	}


.activites-grid .item:not(.zoom):hover .icon {
	box-shadow: 0 4px 20px rgba(0, 0, 0, .5);
	}

.activites-grid .item .label h3 {
	text-align:  center;
	font-family: Regular;
	font-size:   1.2vw;
	margin-top:  8px;
	}

.activites-grid .item.group .label h3 {
	font-family: Bold;
	}

.activites-grid .item .detail {
	display: none;
	}

.activites-grid .item.group .activites-grid {
	display: none
	}

.activites-grid .item.zoom .infos {
	overflow-y: auto;
	height:     90%;
	}


/* ZOOM */
.item.zoom, #modal-detail {
	
	position:       fixed;
	top:            20vh;
	left:           15vw;
	width:          70vw;
	height:         60vh;
	background:     #f0f0f0;
	border-radius:  8px;
	z-index:        1000000;
	box-shadow:     0 4px 20px black;
	padding:        1vw;
	display:        flex;
	flex-direction: row;
	align-content:  space-around;
	overflow-x:     hidden;
	overflow-y:     hidden;
	}

#videotheque.item.zoom, #videotheque #modal-detail {
	background: #333;
	}

/* MOBILE */
@media screen
and (min-device-width: 320px)
and (max-width: 568px) {
	.item.zoom, #modal-detail {
		width:  80vw;
		height: 40vh;
		top:    30vh;
		left:   5vw;
		}
	
	#modal-detail #btn-modal-close {
		width:     8vw;
		height:    7vw;
		font-size: 5vw;
		}
		
	}

#modal-detail {
	display: none;
	}

#modal-detail.show {
	display: flex;
	}


.item.zoom:hover {
	transform: scale(1);
	}

.item.zoom .detail {
	display: block;
	}

.item.zoom .icon {
	width:      calc(70vw / 4.5);
	height:     calc(70vw / 4.5);
	margin:     0 0 5vh 0;
	transition: .2s all cubic-bezier(0, .58, .23, 5);
	
	}

.item.zoom .infos {
	flex:   1 0 25%;
	height: 55vh;
	}

.activites-grid .item .numero {
	background:                 rgba(0, 0, 0, .5);
	color:                      white;
	width:                      3em;
	text-align:                 center;
	font-size:                  60%;
	border-top-left-radius:     4px;
	border-bottom-right-radius: 4px;
	align-self:                 flex-start;
	}

.activites-grid .item .consignes {
	display:         flex;
	justify-content: flex-end;
	}

.activites-grid .item .top {
	display:         flex;
	justify-content: space-between;
	width:           100%;
	height:          fit-content;
	align-content:   flex-start;
	}

.activites-grid .item {
	overflow: hidden;
	}

.activites-grid .item .nouveau {
	font-family:               bold;
	padding:                   .1em .2em;
	background:                black;
	color:                     #777;
	font-size:                 100%;
	text-transform:            uppercase;
	border-top-right-radius:   4px;
	border-bottom-left-radius: 4px;
	}


.activites-grid .item.zoom .nouveau {
	font-size: 130%;
	}

.activites-grid .item .prof {
	position:                   absolute;
	text-align:                 center;
	font-size:                  60%;
	border-bottom-right-radius: 4px;
	border-top-left-radius:     4px;
	width:                      8vw;
	height:                     8vw;
	margin:                     auto;
	background:                 url(../img/label-profs.png) no-repeat;
	background-size:            cover;
	}

.activites-grid .item.zoom .prof {
	width:  calc(70vw / 4.5);
	height: calc(70vw / 4.5);
	}

.activites-grid .item .consignes_audio {
	text-align:                 center;
	font-size:                  60%;
	border-bottom-right-radius: 4px;
	border-top-left-radius:     4px;
	width:                      calc(70vw / 18);
	height:                     calc(70vw / 18);
	background:                 url(../img/btn-ecouter.png) rgba(0, 0, 0, .5) no-repeat;
	
	background-size:            cover;
	}

.item.zoom .numero {
	font-size: 150%
	}

.item.zoom .label {
	flex:       1 0 70%;
	text-align: left;
	height:     55vh;
	
	}

.item.zoom .label h3 {
	color:        #777;
	font-size:    4vw;
	font-family:  ExtraBold;
	text-align:   left;
	padding-left: 1vw;
	}

.close {
	display:    flex;
	flex:       1 0 2%;
	font-size:  3vw;
	color:      #777;
	text-align: right;
	cursor:     pointer;
	
	}

.item.zoom .infos, .fiche-info {
	font-size:      100%;
	color:          #666;
	text-transform: uppercase;
	font-family:    Light;
	
	}

.activites-grid .infos h4, .fiche-info h4 {
	font-size: 1.5vh;
	margin:    1em 0 0em;
	
	}

.activites-grid .infos span, .fiche-info span {
	padding:       .1em .3em;
	text-align:    center;
	background:    silver;
	border-radius: 2px;
	font-size:     1.4vh;
	}

.fiche-info span {
	margin: 0 .2em 0 0;
	}

.fiche-info span img {
	height: 1em;
	}


.activites-grid .infos form {
	display: inline-block;
	}

.activites-grid .infos .tags, .fiche-info .tags {
	padding:       .1em .2em;
	background:    #777;
	color:         white;
	border-radius: 4px;
	border:        0;
	cursor:        pointer;
	font-size:     1.4vh;
	margin:        0 0 1px 0;
	}

.activites-grid .description {
	font-size: 2.5vmin;
	}

.activites-grid .description.detail {
	max-height: 52vh;
	overflow-y: auto;
	padding:    1vw;
	}

.activites-grid .description .indication-pedagogique h5 {
	font-family: Bold;
	/*font-size:   90%;*/
	}

.activites-grid .description .indication-pedagogique {
	margin:     2em 0 0 0;
	padding:    1em 0 0 0;
	border-top: 1px solid silver;
	}

.activites-grid .description .indication-pedagogique, .activites-grid .description .indication-pedagogique p, .activites-grid .description .indication-pedagogique li {
	font-size: 90%;
	}

.item.zoom .tools {
	flex:            0 0 100%;
	height:          auto;
	margin-top:      auto;
	display:         flex;
	justify-content: flex-end;
	}

.item.zoom .tools a {
	margin: 0 0 0 .2em;
	}

.item.zoom .suggestions .icon {
	width:   8vw;
	height:  8vw;
	margin:  0 20px 0 0;
	padding: 0;
	}

.activites-grid .suggestions .item {
	margin:  0;
	padding: 0;
	}

.button {
	padding:       .5em 2em;
	text-align:    center;
	background:    gray;
	color:         white;
	font-family:   ExtraBold;
	font-size:     2vmin;
	border-radius: 4px;
	}

.button:hover {
	color:           white;
	text-decoration: none;
	}

.button.principal {
	background: #777;
	color:      white;
	}


/* 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;
	z-index:     30000;
	}


#_tiroir._ouvert {
	width: 30vw;
	}

#_tiroir._apercu {
	left: 88vw
	}

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

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

#_tiroir ._contenu {
	height:         85vh;
	display:        flex;
	flex-direction: column;
	background:     #9f2c32;
	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;
	padding:       1em;
	color:         #222;
	border-radius: 8px;
	}

#_tiroir .download {
	padding-left:        4em;
	background-image:    url(../img/btn-crayon.png);
	background-repeat:   no-repeat;
	background-position: left center;
	background-size:     3em 3em;
	line-height:         1em;
	font-size:           90%;
	transition:          .5s ease transform;
	transform-origin:    center center;
	font-family:         Bold;
	}

#_tiroir .download:hover {
	transform:       scale(1.1);
	text-decoration: none;
	}

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


/* MOBILE */
@media screen
and (min-device-width: 320px)
and (max-width: 568px) {
	
	
	#_tiroir_wrapper {
		width: 90vw;
		}
	
	#_tiroir {
		position: inherit;
		width:    100%;
		height:   auto;
		}
	
	#_tiroir ._btn {
		display: none;
		}
	
	#_tiroir ._contenu {
		height:        auto;
		width:         100%;
		background:    none;
		margin-bottom: 10vh;
		box-shadow:    none;
		overflow:      inherit;
		}
	
	#_tiroir ._item {
		width: auto;
		}
		
	}


/* RGPD
******************************************************************************************/
#rgpd {
	position:                fixed;
	bottom:                  0;
	padding:                 2em;
	left:                    0;
	width:                   100vw;
	z-index:                 1000;
	color:                   rgba(76, 19, 24, 0.76);
	backdrop-filter:         blur(1px);
	-webkit-backdrop-filter: blur(1px);
	color:                   white;
	display:                 flex;
	flex-direction:          row;
	justify-content:         space-between;
	text-transform:          uppercase;
	font-size:               1.2vw;
	}

#rgpd .texte {
	flex: 0 0 50%;
	
	}

#rgpd .bouton {
	flex: 0 1 20%;
	}

#rgpd .rgpd_boutton {
	padding:        .5em 2em;
	text-align:     center;
	text-transform: uppercase;
	border:         1px solid white;
	border-radius:  2px;
	color:          white;
	background:     transparent;
	margin:         0;
	justify-self:   center;
	align-self:     center;
	display:        block;
	cursor:         pointer;
	transition:     .5s background-color ease, .5s color ease;
	}

#rgpd .rgpd_boutton:hover {
	color:           rgba(76, 19, 24, 0.76);
	background:      white;
	text-decoration: none;
	}


#help.tutorial {
	display:                 block;
	opacity:                 1;
	z-index:                 100;
	background:              rgba(255, 255, 255, .6);
	backdrop-filter:         blur(3px);
	-webkit-backdrop-filter: blur(3px);
	}

#help.tutorial .content {
	height:          100%;
	display:         flex;
	flex-direction:  column;
	justify-content: center;
	}

#help.tutorial video {
	margin:     auto;
	max-height: 100%;
	}


/* 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._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;
	color:           white;
	}

/* RESULTATS
	*************************************************************************************************************************/
.erreur {
	margin:        1em;
	background:    maroon;
	color:         white;
	padding:       1em;
	border-radius: 4px;
	}

.resultat {
	text-align: center;
	margin:     10vh auto;
	}

.resultat h6 {
	font-family: ExtraBold;
	font-size:   10vw;
	}

.resultat h1 {
	font-size: 3vw;
	}


/* PIED DE PAGE
************************************************************************************************************************/
#footer {
	/*position: absolute;;*/
	background: #9f2c32;
	bottom:     0;
	width:      100%;
	min-height: 10vh;
	text-align: right;
	color:      white;
	font-size:  1vw;
	/*padding-bottom: 2vh;*/
	}

#footer a {
	color:       rgba(255, 255, 255, .8);
	padding:     0 4em;
	font-family: Bold;
	transition:  .5s color ease;
	}

#footer a:hover {
	color:           white;
	text-decoration: none;
	}

/* INSCRIPTIONS
************************************************************************************************************************/
.timeout {
	margin:      5em auto;
	text-align:  center;
	font-family: Bold;
	}


.frm {
	width: 100%;
	}

.frm label {
	font-size:   18px;
	font-weight: bold;
	display:     block;
	margin:      2em 0 0 0;
	font-family: Bold;
	}

.help_text {
	color: grey
	}

.help_text.small {
	font-size: 80%;
	margin:    0;
	}

.frm input, .frm select {
	/*width:     25em;*/
	width:     100%;
	font-size: 16px;
	padding:   .4em;
	}

.frm input[type=checkbox] {
	width: 1em;
	}

.frm input {
	border: 2px solid silver;
	
	}

#time_input {
	display: inherit;
	}

#time_input select {
	width: 5em;
	}

#niveaux_id option {
	font-size: 16px;
	}

._btn {
	background:    #9f2c32;
	border-radius: 4px;
	padding:       .2em 1em;
	min-height:    0;
	font-size:     14px;
	margin:        10px 0;
	font-weight:   bold;
	}

._btn._back {
	
	background:   grey;
	margin-right: .5em;
	}

.line {
	width:         100%;
	border-bottom: 1px solid rgb(96, 125, 139);
	margin:        10px 0;
	padding:       10px 0;
	}

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

#enseignants table {
	width: 100%;
	}

#enseignants textarea {
	width:  100%;
	height: 8em;
	}

.full {
	width: 100%;
	}

video {
	background: black;
	}

#btn-delete-video {
	display:    block;
	width:      fit-content;
	float:      right;
	height:     2.4em;
	background: #9f2c32;
	}

.help_text {
	font-size: 80%;
	}


/* JURY
************************************************************************************************************************/
#jury #frmLogin {
	width: 40vw;
	margin:  0 auto;
	}

#jury #frmLogin .btn {
	width: fit-content;
	}

#jury #btn-pswd-back {
	width: 5em;
	}

#jury-wrapper {
	display: block;

	width: 100%;
	}
#films-list {
	width: 100%;
	margin: 1em 0;
	}

.film-item {
	background: #f0f0f0;
	margin: 20px auto;
	border-radius: 4px;
	padding: .5em 1em;
	display: flex;
	color:black;
	transition:.5s ease box-shadow
	}

.film-item.evalue {
	background: rgba(0, 128, 0, 0.31);
	}

.film-item:hover {
	text-decoration: none;
	color:black;
	box-shadow: 0 10px 30px black;
	}

.film-item .video {
	width: 400px;
	margin: 0 20px 0 0;
	}

.film-item .video img {
	width: 400px;
	margin: 0 20px 0 0;
	}

.film-item video {
	width: 400px;
	max-width: 400px;
	height: 200px;
	}


.film-item h4 {
	font-weight: bold;
	font-size: 150%;
	}

.film-item h6 {
	color:grey;
	font-size: 100%;
	}

#note-wrapper {
	display: flex;
	justify-content: space-between;
	}

#note-wrapper .col {
	flex: 0 0 48%
	}

#note-wrapper video {
	width: 100%;
	
	}

#note-wrapper label {
	width: 50%;
	display: inline-block;
	font-weight: bold;

	}

#note-wrapper .line {
	border-bottom: 1px dotted silver;
	}

#jury ._btn-bar {
	display: flex;
	justify-content: space-between;
	margin: 1em 0;
	}

#jury ._btn {
	color:white;
	font-size: .8vw;
	}

#jury .message {
	margin: 2em 0;
	}

#jury .message table td {
	border: 1px solid black;
	border-collapse: collapse;
  display: inline-block;
	width: 3.5em;
	height: 3em;
	font-size: 1.2em;
	line-height: 1.1em;
	background: white;
	text-align: center;
	}
#jury .message table td em {
	display: block;
	font-size: 7px;
	color:grey
	}

#jury #frmPrint {
	display: flex;
	justify-content: center;
	background: #f0f0f0;
	}

#jury #frmPrint>div {
	padding: 1em;
	display: flex;
	justify-content: space-between;
	align-self: center;
	}

#jury #subnav a {
	display: inline-block;
	background: #f0f0f0;
	padding: .5em 1em;
	text-align: center;
	margin: 0 2em;
	color:grey
	}

#jury.films #subnav a.film, #jury.impression #subnav a.pdf ,#jury #subnav a.active {
	background:     #9f2c32;
	color:white;
	font-weight: bold;
	border-radius: 4px;
	}