@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500&display=swap');

:root {
--fond-main: #2a2c33;
--fond-hover: #ea5e0f;
--fond-actif: #2a2c33;
--separation: #ea5e0f;

--boite-bleue: #277ad8;
--boite-orange: #f49A0b;
--boite-verte: #0db236;
--boite-rouge: #e6345b;

--msg-inf-fond: #88ccf3;
--msg-inf-color: #0f669a;
--msg-conf-fond: #90daa4;
--msg-conf-color: #187510;
--msg-warn-fond: #fad497;
--msg-warn-color: #cc7108;
--msg-err-fond: #f5b4b8;
--msg-err-color: #ad2b2b;
}


html, body {
margin:0;
padding:0;
}

body {
background-color: #e0e0e0;
font-family: 'Rubik', sans-serif;
font-size: 15px;
}

img {
border: none;
}

@font-face {
font-family: 'Fontello';
src: url('../fonts/fontello.eot?59546021');
src: url('../fonts/fontello.eot?59546021#iefix') format('embedded-opentype'),
     url('../fonts/fontello.woff?59546021') format('woff'),
     url('../fonts/fontello.ttf?59546021') format('truetype'),
     url('../fonts/fontello.svg?59546021#fontello') format('svg');
font-weight: normal;
font-style: normal;
}

.fontello {
font-family: Fontello;
}

.resp {
display: none;
}

.noresp {
}

.photoutil {
width: 2.5em;
height: 2.5em;
display: inline-block;
border-radius: 50%;
vertical-align: middle;
}


#header {
position: fixed;
top: 0;
z-index: 90;
width: calc(100% - 8em);
height: 4em;
background-color: var(--fond-main);
line-height: 4em;
padding: 0 4em 0 4em;
}

#header a {
margin-left: 1.5em;
font-size: 1em;
font-weight: 400;
letter-spacing: -1px;
color: #eee;
text-decoration: none;
}

#header #raccourcis {
float: right;
}

#header #raccourcis span.nom {
font-size: 1.2em;
color: #fff;
}

#header #raccourcis span.picto {
font-family: Fontello;
font-size: 1.3em;
font-weight: normal;
}

#navigation {
width: 20em;
height: calc(100% - 5em);
position: fixed;
left: 0;
top: 0;
overflow: auto;
z-index: 100;
padding: 5em 0 0 0;
/*background-color: var(--fond-main);*/
background: linear-gradient(to top, #33353d 0%, #2a2c33 100%);
transition: left 0.3s ease;
}

#navigation p {
margin: 0;
height: 3em;
line-height: 3em;
margin: 2em 0 0 1.5em;
font-weight: 500;
font-size: 0.93em;
color: #bbb;
text-transform: uppercase;
}

#navigation p::after {
display: block;
content: '';
width: 100%;
height: 1px;
/*background-image: -webkit-linear-gradient(left, transparent, #DBDBDB, transparent);*/
background-image: linear-gradient(90deg, #555 0%, #555 70%, transparent 100%);
}

.shownavig {
cursor: pointer;
}

.shownavig span {
font-family: monospace;
}

#navigation p:first-child {
margin-top: 0;
}

#navigation ul {
font-size: 1em;
margin: 0 0 0 0;
padding: 0;
list-style-type: none;
}

#navigation ul li > a {
box-sizing: border-box;
position: relative;
display: block;
height: 4em;
line-height: 4em;
margin: 0 0 0 0;
padding: 0 0 0 2em;
font-weight: 400;
color: #bbb;
text-decoration: none;
text-align: left;
border-left: 3px solid var(--fond-main);
transition: all 0.3s ease;
}

#navigation ul li > a span:first-child {
display: inline-block;
width: 1rem;
font-family: Fontello;
font-size: 1.1em;
margin-right: 1rem;
}

#navigation ul li > a:hover, #navigation ul li > a.actif {
color: #fff;
/*border-left: 3px solid var(--separation);*/
background-color: var(--fond-hover);
}

#navigation #logobas {
position: absolute;
bottom: 2em;
left: calc(50% - 75px);
}

h1 {
margin: 0 0 1em 0;
padding-left: 10em;
font-size: 1.7em;
font-weight: 500;
color: #ffffff;
text-decoration: none;
}

h1 a {
text-decoration: none;
color: #777;
}

#fil {
width: 100%;
height: 3em;
background-color: #fff;
color: #555;
}

#fil { /* Modification Visiondrone */
overflow: hidden;
}

#fil a {
display: inline-block;
height: 3em;
padding: 0 1.5em;
font-weight: 300;
text-decoration: none;
line-height: 3em;
color: #555;
transition: all 0.5s ease;
}

#fil > a { /* Modification Visiondrone */
position: relative;
-webkit-box-shadow: 3px 0px 5px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 3px 0px 5px 0px rgba(0, 0, 0, 0.75);
box-shadow: 5px 0px 10px 0px rgba(0, 0, 0, 0.5);
}

#fil a:first-child {
background-color: var(--fond-main);
color: #ddd;
}

#fil a:hover {
background-color: var(--fond-hover);
color: var(--fond-main);
}

#fil a:first-child:hover {
color: #fff;
}

#fil a + span {
margin: 1em;
font-size: 0.8em;
}


#contboites {
width: 100%;
margin: 2em 0;
display: grid;
grid-template-columns: repeat(4, calc(25% - 1.5em));
grid-template-rows: repeat(1, 12em);
column-gap: 2em;
row-gap: 2em;
/*grid-auto-rows: auto;*/
}

.boite {
position: relative;
border-radius: 0.5em;
padding: 1em;
background-image: linear-gradient(to right bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5));
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.3);
color: #fff;
line-height: 1em;
}

.boite.bleue {
background-color: var(--boite-bleue);
}

.boite.orange {
background-color: var(--boite-orange);
}

.boite.verte {
background-color: var(--boite-verte);
}

.boite.rouge {
background-color: var(--boite-rouge);
}

.boite hr {
width: 100%;
height: 1px;
background: #fff;
border: none;
margin: 1em 0;
}

.boite h3 {
margin: 0;
padding: 0;
font-size: 1.3em;
font-weight: 400;
color: #fff;
}

.boite h3 span {
font-family: Fontello;
margin-right: 0.5em;
}

.boite p, .boite ul {
margin: 1em 0 0.5em 0;
padding: 0;
font-size: 0.9em;
line-height: 1.5em;
list-style-type: disc;
}

.boite p + ul {
margin-top: 0em;
}

.boite ul li {
margin: 0 0 0 2em;
}

.boite p a, .boite ul li a {
color: #fff;
/*text-decoration: none;*/
}

.boite .footer {
position: absolute;
width: calc(100% - 2em);
font-size: 0.8em;
bottom: 0.5em;
border-top: 1px solid #fff;
padding: 0.3em 0;
}

#container {
width: calc(100% - 24em);
margin: 6em 0 0 22em;
padding: 0;
}

.contenu {
padding: 1em 1em 2em 1em;
margin: 2em 0;
background-color: #fff;
border-radius: 0.3em;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.3);
color: #555;
}

.contenu p {
margin: 1em 0;
padding: 0;
font-weight: 400;
color: #555;
}

.contenu a {
color: var(--fond-main);
}

.contenu hr {
width: 100%;
height: 1px;
margin: 0 0 1.5em 0;
background: #999;
border: 0;
}

.contenu ul li a {
font-size: 1em;
font-weight: 400;
color: #555;
}


/* DEBUT TABLES */
table.liste {
width: 100%;
border-spacing: 0;
border-collapse: collapse;
}

table.liste tr {
border-bottom: 1px solid #ddd;
}

table.liste tr:first-child {
border-bottom: 2px solid #ddd;
}

table.liste tr:nth-child(2n) {
background-color: #f5f5f5;
}

table.liste tr:nth-child(2n+1) {
background-color: #ffffff;
}

table.liste tr.actif {
background-color: var(--fond-hover);
}

table.liste tr.actif a {
color: #ffffff;
}

table.liste tr:nth-child(n+2):hover {
background-color: var(--fond-hover) !important;
}

table.liste tr:nth-child(n+2):hover td {
color: #ffffff;
}

table.liste tr:nth-child(n+2):hover a {
color: #ffffff;
}

table.liste tr th {
font-weight: 500;
}

table.liste tr th:first-child a {
display: inline-block;
width: 2em;
height: 2em;
line-height: 2em;
font-family: Fontello;
color: #555;
text-decoration: none;
}

table.liste tr th.tri:hover {
background-color: var(--fond-actif);
color: #ffffff;
cursor: pointer;
}

table.liste tr th.actif {
position: relative;
border-bottom: 3px solid var(--separation);
}

table.liste tr th.actif::after {
position: absolute;
font-family: Fontello;
right: 1em;
}

table.liste tr th.asc::after { content: '\e812'; }
table.liste tr th.desc::after { content: '\e811'; }

table.liste tr td, table.liste tr th {
height: 3em;
padding: 0.5em 1em;
text-align: left;
color: #555;
}

table.liste tr td a {
color: #555;
padding: 1em 1em 1em 0;
}

table.liste tr td:first-child, table.liste tr th:first-child {
width: 2em;
text-align: center;
}

table.liste tr td:nth-child(2), table.liste tr th:nth-child(2) {
width: auto;
}
/* FIN TABLES */

/* Modification RLDWIND */
table.liste2 tr td, table.liste2 tr th {
height: 1.8em;
}

table.liste2 tr td a {
/*padding: 0.5em;*/
display: block;
padding: 0;
width: 100%;
height: 1.8em;
line-height: 1.8em;
text-decoration-style: dotted;
}

table.liste2 tr td a:hover {
}


h2 { /* Modification Visiondrone */
margin: 0 0 1em 0;
padding: 0;
font-size: 1.2em;
font-weight: 400;
letter-spacing: -0.05em;
color: var(--fond-main);
}

h2 > span {
font-weight: 500;
}

.contenu h2 select {
width: 15em;
border: none;
border-bottom: 1px dotted #999;
background-color: unset;
opacity: 0.5;
padding: 0.3em 1em;
-webkit-appearance: none;
   -moz-appearance: none;
        appearance: none;
}

.contenu h2 select.actif {
opacity: 1;
}

h3 {
margin: 0 0 1em 0;
padding: 0;
font-size: 1.2em;
font-weight: 400;
letter-spacing: -0.05em;
color: #777;
}

h3 > span {
font-weight: 500;
}

#upload h3 {
text-align: center;
margin: 1em 0 1em 0;
font-weight: 500;
}

.contenu #psupp {
margin: 1.5em 0 0 4em;
}

.message {
position: relative;
display: none;
/*line-height: 5em;*/
padding: 1.5em 5em 1.5em 2em;
margin-top: 2em;
margin-bottom: 2em;
text-align: justify;
overflow: hidden;
}

.message a.msgclose {
position: absolute;
/*top: 1.25em;*/
right: 1.25em;
font-family: Fontello;
font-size: 1.5em;
color:#ccc;
text-decoration: none;
opacity: 0.8;
}

.message.inf {
background-color: var(--msg-inf-fond);
border-left: 3px solid var(--msg-inf-color);
color: var(--msg-inf-color);
}

.message.inf a.msgclose {
color: var(--msg-inf-color);
}

.message.conf {
background-color: var(--msg-conf-fond);
border-left: 3px solid var(--msg-conf-color);
color: var(--msg-conf-color);
}

.message.conf a.msgclose {
color: var(--msg-conf-color);
}

.message.warn {
background-color: var(--msg-warn-fond);
border-left: 3px solid var(--msg-warn-color);
color: var(--msg-warn-color);
}

.message.warn a.msgclose {
color: var(--msg-warn-color);
}

.message.err {
background-color: var(--msg-err-fond);
border-left: 3px solid var(--msg-err-color);
color: var(--msg-err-color);
}

.message.err a.msgclose {
color: var(--msg-err-color);
}

.notifs {
display: none;
background-color: #a00;
width: 1.8em;
height: 1.8em;
line-height: 1.8em;
color: #fff;
font-size: 0.8em;
margin-left: 1em;
border-radius: 50%;
text-align: center;
}

.notifs.visible {
display: inline-block;
}


/* DEBUT RECHERCHE */
h2 a {
text-decoration-style: dotted;
}

#recherche {
float: right;
position: relative;
margin-top: 0;
opacity: 0.5;
}

#recherche a {
display: inline-block;
height: 1.25em;
margin-left: 0.5em;
font-size: 1.2em;
font-family: Fontello;
line-height: 1.25em;
text-decoration: none;
vertical-align: top;
}

#recherche input[type='text'] {
font-size: inherit;
width: 15em;
height: 1.5em;
padding: 0 1em;
}
/* FIN RECHERCHE */


/* DEBUT UPLOAD */
#upload {
width: 70%;
padding: 1em;
margin: 2em auto;
border: 3px dotted #999;
background-color: #f8f8f8;
}

#upload #picto {
font-family: Fontello;
font-size: 4em;
margin: 1em 0 1em 0;
text-align: center;
}

#upload #title {
font-size: 0.8em;
font-style: italic;
margin: 2em 0 0 0;
text-align: center;
}

#progress {
display: none;
float: right;
margin: 1em 0 0 0;
}

.uploadover {
border: 3px dotted var(--fond-main) !important;
background: var(--fond-actif) !important;
}
/* FIN UPLOAD */


#menuresp {
display: none;
transition: all 0.5s ease;
}

#menuresp.open {
-webkit-transform: rotate(90deg);
        transform: rotate(90deg);
}

.clear {
clear:both;
}



/*
@media only screen and (min-width: 320px) and (max-width: 479px) {
@media only screen and (min-width: 480px) and (max-width: 767px) {
@media only screen and (min-width: 768px) and (max-width: 991px) {
@media only screen and (min-width: 992px) and (max-width: 1199px) {
*/


@media only screen and (min-width: 480px) and (max-width: 767px) {

	#menuresp {
	display: inline-block;
	}

	#header {
	width: calc(100% - 4em);
	padding: 0 2em;
	}

	#navigation {
	left: -24em;
	}

	#navigation.opening {
	left: 0;
	}

	#navigation #logobas {
	display: none;
	}

	#contboites {
	grid-template-columns: repeat(2, calc(50% - 1em));
	grid-template-rows: repeat(2, 12em);
	}

	#container {
	width: calc(100% - 2em);
	margin: 6em 0 0 1em;
	}

	.contenu #psupp {
	margin: 2em 0;
	}

	.resp {
	display: initial;
	}

	.noresp {
	display: none;
	}

	#fil a:nth-child(n+2) span.noresp {
	display: inline !important;
	}

}


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

	#menuresp {
	display: inline-block;
	}

	#header {
	width: calc(100% - 4em);
	padding: 0 2em;
	}

	#navigation {
	left: -24em;
	}

	#navigation.opening {
	left: 0;
	}

	#navigation #logobas {
	display: none;
	}

	#contboites {
	grid-template-rows: repeat(4, 12em);
	grid-template-columns: repeat(1, 100%);
	}

	#container {
	width: calc(100% - 2em);
	margin: 6em 0 0 1em;
	}

	#fil a {
	padding: 0 1em;
	}

	#fil a:nth-child(n+2) {
	padding: 0;
	}

	#recherche {
	float: none;
    margin-bottom: 1em;
	}

	#recherche input[type="text"] {
	width: calc(100% - 4em);
	padding: 0 1em;
	}

	.contenu #psupp {
	margin: 2em 0;
	}

	.resp {
	display: initial;
	}

	.noresp {
	display: none;
	}


}