/* CSS Document */
/*css font add*/
 @font-face {
     font-family: "Open Sans";
     src: url("../fonts/OpenSans-Regular.ttf") format("truetype");
}
 @font-face {
     font-family: "Open Sans semi";
     src: url("../fonts/OpenSans-SemiBold.ttf") format("truetype");
}
/*end css font add*/
 html, body {
     min-height: 100vh;
}
 body {
     overflow-x: hidden;
}
 .red {
     text-decoration: none!important;
     background-color: none!important;
}
/* Header and Navigation */
#topbar {
    padding: 5px 10px;
    background: #F6F6F6;
    color: #AAA;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
    position: relative;
}
#topbar a {
    display: block;
    position: absolute;
    right: 10px;
    top: 5px;
    color: #AAA;
    text-decoration: none;
}
#ban_content {
    background: #F6F6F6;
    font-family: Helvetica, Arial, sans-serif;
    width: 100%;
    height: auto;
    top: 0;
    left: 0;
    z-index: 99999;
    font-size: 12px;
    padding: 4px 8px;
    color: #AAA;
}

#span_impressum {
    float: right;
    color: #7E7D7D;
}

#ban_content a {
    color: #7E7D7D;
    text-decoration: none;
}

#ban_content a:hover {
    color: #AAA;
    text-decoration: underline;
}
/*--------------------------HEADER------------------------*/
 #main-header {
     display: grid;
     grid-template-columns: 80px 27% 2fr;
     align-items: center;
     background-color: var(--white);
     width: 100%;
     box-shadow:0 .25rem .75rem rgba(0, 0, 0, .05);
     padding: 0 0 0 15px;
}
 #main-header h1 {
     font-size: 1.5em;
     font-weight: 200;
     color: #707070;
     font-family: "Open Sans" 
}
/*--------------------------NAVIGATION------------------------*/
 nav {
     color: #6D6D6D;
     width: max-content;
}
 .current {
     font-weight: bold;
     text-decoration: underline;
}
 .menu-toggle {
     display: none;
}
 nav ul {
     list-style-type: none;
}
 nav ul a {
     color:#8B8A8A;
     display:flex;
}
 nav ul a:hover{
     color:#555555;
}
 nav li {
     margin:30px 15px 0 0;
    /*! display:inline-flex;
     */
     display: grid;
}
 .menu {
     display: flex;
     font-family: "Open Sans";
     font-weight: 200;
}
/*--------------------------SIDE BAR------------------------*/
#compte-eel li {
     font-size: 1em;
     list-style-type: square;
}
 #side-bar {
     padding-left: 15px;
     padding-right:15px;
}
 #side-bar a{
    text-decoration:none;
}
 #bloc-important{
     background:#D2D2D2;
     border: solid;
     border-radius: 6px;
     border-width: thin;
     border-color: #d0d0d0;
     padding: 10px 10px 0px 10px;
     color: #707070;
     margin-bottom: 10px;
     display: none;
}
 #bloc-important ul{
     padding-left: 20px;
}
 #bloc-important a{
     color: #707070;
}
 .bloc-communication {
  	background: white;
     border: solid;
     border-width: thin;
     border-color: #d0d0d0;
     padding: 10px;
     color: #707070;
     margin-bottom: 10px;
     border-radius: 5px;
}
.bloc-communication a{ 
	 color: #707070;
	 text-decoration:none; 
	 }
.bloc-communication:hover {
  	 background: #eee;
  	 cursor:pointer;
  	 text-decoration:none;
}
a > .bloc-communication { 
	 color: #707070;
	 text-decoration:none; 
	 }
	 
 #regle-usage{
     background: white;
     border: solid;
     border-width: thin;
     border-color: #d0d0d0;
     padding: 20px;
     color: #707070;
     margin-bottom: 10px;
}
 #regle-usage ul{
     margin: 0px;
     padding: 15px;
}
 #regle-usage a{
     color: #707070;
}
/*--------------------------CONTENT------------------------*/
 #main-content{
     background: #F9F9F9;
     display: grid;
     grid-template-columns: minmax(255px, 300px) 2fr;
     padding-top: 10px;
}
 #main-content h1{
     font-weight: 400;
     color: #6D6D6D;
     padding: 0px;
     margin: 0px;
     grid-column: 1 / 3 ;
     display: none;
     font-family: "Open Sans Semi", Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
}
 #main-content h1 img {
     vertical-align: baseline;
     margin-right: 10px;
     display: none;
}
 #content {
     display: grid;
     grid-template-columns:1fr 1fr 1fr;
     grid-gap: 15px;
     padding-right: 10px;
}
 #content h1 img {
     vertical-align: baseline;
     margin-right: 10px;
}
 #content-flex {
     display: flex;
     flex-direction: column;
     height: 78em;
     flex-wrap: wrap;
}
 #content-flex-enseignant-ep {
     display: flex;
     flex-direction: column;
     height: 102em;
     flex-wrap: wrap;
     column-gap: 5px;
}
 #content-flex-enseignant-co {
     display: flex;
     flex-direction: column;
     height: 130em;
     flex-wrap: wrap;
     column-gap: 5px;
}
 #content-flex-enseignant-es {
     display: flex;
     flex-direction: column;
     height: 122em;
     flex-wrap: wrap;
     column-gap: 5px;
}
 #content-flex h2, #content-flex-enseignant-ep h2,#content-flex-enseignant-co h2, #content-flex-enseignant-es h2{
     font-size: 1.75em;
     color: #707070;
     padding-bottom: 15px;
     font-family: "Open Sans";
}
 #content-flex h3, #content-flex-enseignant-ep h3, #content-flex-enseignant-co h3, #content-flex-enseignant-es h3{
     font-size: 1em;
     color: #707070;
     font-family: "Open Sans semi";
     margin: 0px;
     display: inline;
}
 #content-center{
     display: grid;
     margin-right: 10px;
}
 .break{
     flex-basis: 100%;
     width: 0;
}


 .aide {
    /* padding: 5px;
     */
     border: #BABABA solid 1px;
     border-radius: 15px;
     padding-left: 5px;
     padding-right: 5px;
     margin-left: 10px;
}
 div.content-app:nth-child(5) > div:nth-child(2) > h3:nth-child(2) > a:nth-child(1){
     color:#707070;
}
 div.bloc-text h3 a{
     color:#707070;
}
.header-bloc-texte {
     display: grid;
     grid-template-columns: 2fr auto auto;
}
.header-bloc-texte-1-icon {
     display: grid;
     grid-template-columns: 2fr auto;
}

 .block-app_1,.block-app_2,.block-app_3,.block-app_4,.block-app_5,.block-app_6{
     border: thin #9B9B9B;
     box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
     padding: 10px;
     background: #FFFFFF;
     margin-bottom:10px;
}
 .block-app_1 a,.block-app_2 a,.block-app_3 a,.block-app_4 a,.block-app_5 a,.block-app_6 a{
     color: #8B8A8A;
}
 .bloc-app_3{
     page-break-before: right;
}
 .bloc-text a:hover{
    text-decoration: none;
}
 .bloc-text{
     /*! padding: 5px; */
     padding: 10px;
}
 .block-aide{
    display: inline;
    border: #707070 solid 1px;
    padding: 0px 6px 0px;
    border-radius: 14px;
    color: #707070;
    background: white;
}
 .block-aide:hover {
    color: white;
    background: #707070;
}
.block-suggestion {
    display: inline;
    border: #7f7f7f solid 1px;
    padding: 0px 4px 0px;
    border-radius: 14px;
    color: #707070;
    background: white;

}

.block-suggestion:hover {
  color: white;
  background: #707070;
}
 .description{
     color:#8B8A8A;
}
 #content h2{
     font-size: 1.75em;
     color: #707070;
     padding-bottom: 15px;
}
 #content h3{
     font-size: 1em;
     font-weight: bolder;
     color: #707070;
}
 .content-app {
     display:grid;
     grid-template-columns: 70px 2fr;
     margin-bottom:0;
     align-items: center;
     padding-bottom: 6px;
     /*border-bottom: solid 0.5px #e1e1e1;*/
}
 .content-app:hover {
     /*text-decoration: underline;*/
     background-color: #f8f8f8;
}
 .content-app img{
     width: 50px;
}
.europresse img{
     width: 45px;
}
.underline {
  text-decoration: underline;
}
 .block-app{
     border: thin #9B9B9B;
     box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
     padding: 10px;
     background: #FFFFFF;
     grid-row: 2;
}
 .block-app a {
     color: #8B8A8A;
}
 a.btn {
     margin-left: 5px;
     padding: 0px;
}
 #logo-etat img {
     width: 100px;
}
 footer{
     clear: both;
     display: grid;
     grid-template-columns: 3fr 5fr 1fr;
     background-color: var(--white);
     width: 100%;
     box-shadow:0 .25rem .75rem rgba(0, 0, 0, .05);
     align-items: baseline;
     padding: 10px;
}
 footer a {
     text-decoration: none;
     color: #707070;
}
 @media screen and (max-width: 480px) and (min-width: 360px) {
     #main-content {
         background: #F9F9F9;
         display: grid;
         grid-template-columns: 1fr;
         padding: 10px;
    }
     #main-header {
         display: grid;
         grid-template-columns: 40px 1fr 13%;
         align-items: center;
         background-color: var(--white);
         width: 100%;
         box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
         padding: 10px;
         position:sticky;
         top:0;
    }
     #content-center {
         display:block;
    }
     #content-center h1{
         font-size: 1em;
         display: block;
    }
     #content-flex h2{
         font-size: 1.2em;
         color: #707070;
         padding-bottom: 15px;
         font-family: 'Open Sans';
    }
     #main-header h1 {
         font-size: 1em;
         font-weight: 200;
         color: #707070;
         font-family: "Open Sans";
         display: block;
    }
     #main-content h1 img {
         vertical-align: baseline;
         margin-right: 10px;
         display: flex;
    }
     #logo img{
         width: 35px;
    }
     #content{
         background: #F9F9F9;
         display: block;
    }
     #content-flex {
         display: flex;
         flex-direction: column;
         height: auto;
         flex-wrap: wrap;
    }
     #content-flex-enseignant-ep, #content-flex-enseignant-co,#content-flex-enseignant-es {
         display: flex;
         flex-direction: column;
         height: auto;
         flex-wrap: wrap;
    }
     #main-content h1{
         font-size:1.3em;
         margin-bottom: 10px;
         display: flex;
    }
     #main-content h2{
         font-size:1.2em;
    }
     #main-content h1 img {
         vertical-align: bottom;
    }
     #content-center{
         width: 100%;
         margin:10px;
    }
     #side-bar{
         order: 2;
    }
     .menu {
         display: none;
    }
     .menu-toggle{
         display: block;
         width: 46px;
         background: none;
         border: none;
    }
     footer {
         background-color: var(--white);
         box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
         align-items: baseline;
         text-align: center;
         padding: 10px;
         display: block;
         height: 100%;
    }
     .block-app {
         margin-bottom: 10px;
    }
     #content h1{
         font-size:2em;
    }
     nav {
         color: #6D6D6D;
         display: inline-grid;
         grid-column: 1 / 4;
         position: relative;
    }
     nav li {
         margin: 10px 15px 10px 0;
         display: grid;
    }
     .block-app_1, .block-app_2, .block-app_3, .block-app_4, .block-app_5, .block-app_6 {
         border: thin #9B9B9B;
         box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
         padding: 10px;
         background: #FFFFFF;
         width: 97%;
    }
     .block-app_1{
         order:1;
    }
     .block-app_2{
         order:2;
    }
     .block-app_3{
         order:3;
    }
     .block-app_4{
         order:4;
    }
     .block-app_5{
         order:5;
    }
     .block-app_6{
         order:6;
    }
}
 @media screen and (max-width: 576px) and (min-width: 480px) {
     #main-content {
         background: #F9F9F9;
         display: grid;
         grid-template-columns: 1fr;
         padding: 10px;
    }
     #main-header {
         display: grid;
         grid-template-columns: 40px 1fr 13%;
         align-items: center;
         background-color: var(--white);
         width: 100%;
         box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
         padding: 10px;
         position:sticky;
         top:0;
    }
     #main-header h1{
         font-size: 1.2em;
         font-weight: 200;
         color: #707070;
         font-family: "Open Sans";
         display:flex;
    }
     #main-content h1 img {
         vertical-align: baseline;
         margin-right: 10px;
         display: flex;
    }
     #main-content h1{
         font-size:1.3em;
         margin-bottom: 10px;
         display: flex;
    }
     #content-flex h2{
         font-size: 1.2em;
         color: #707070;
         padding-bottom: 15px;
    }
     #logo img{
         width: 35px;
    }
     #side-bar{
         grid-column: 1 / 3;
         grid-row: 2;
    }
     nav {
         color: #6D6D6D;
         display: inline-grid;
         grid-column: 1 / 4;
         position: relative;
    }
     nav li {
         margin: 10px 15px 10px 0;
         display: grid;
    }
     .menu {
         display: none;
    }
     .menu-toggle{
         display: block;
         width: 47px;
         background: none;
         border: none;
    }
     #content{
         display: block;
    }
     #content-center {
         display:block;
    }
     #content-center h1{
         font-size: 1.2em;
         display:flex;
         margin-bottom: 10px;
    }
     #content-flex {
         display: flex;
         flex-direction: column;
         height: auto;
         flex-wrap: wrap;
    }
     #content-flex-enseignant-ep, #content-flex-enseignant-co,#content-flex-enseignant-es {
         display: flex;
         flex-direction: column;
         height: auto;
         flex-wrap: wrap;
    }
     footer {
         background-color: var(--white);
         box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
         align-items: baseline;
         text-align: center;
         padding: 10px;
         display: block;
    }
     .block-app_1, .block-app_2, .block-app_3, .block-app_4, .block-app_5, .block-app_6 {
         border: thin #9B9B9B;
         box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
         padding: 10px;
         background: #FFFFFF;
         width: 100%;
    }
     .block-app_1{
         order:1;
    }
     .block-app_2{
         order: 5;
    }
     .block-app_3{
         order:3;
    }
     .block-app_4{
         order: 5;
    }
     .block-app_5{
         order: 2;
    }
     .block-app_6{
         order: 4;
    }
}
 @media screen and (max-width: 768px) and (min-width: 576px) {
     #main-content {
         background: #F9F9F9;
         display: grid;
         grid-template-columns: 1fr;
         padding: 10px;
    }
     #main-header {
         display: grid;
         grid-template-columns: 40px 1fr 13%;
         align-items: center;
         background-color: var(--white);
         width: 100%;
         box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
         padding: 10px;
         position:sticky;
         top:0;
    }
     #main-header h1{
         font-size: 1.2em;
         font-weight: 200;
         color: #707070;
         font-family: "Open Sans";
         display:flex;
    }
     #main-content h1 img {
         vertical-align: baseline;
         margin-right: 10px;
         display: flex;
    }
     #main-content h1{
         font-size:1.3em;
         margin-bottom: 10px;
         display: flex;
    }
     #content-flex h2{
         font-size: 1.2em;
         color: #707070;
         padding-bottom: 15px;
    }
     #logo img{
         width: 35px;
    }
     #side-bar{
         grid-column: 1 / 3;
         grid-row: 2;
    }
     nav {
         color: #6D6D6D;
         display: inline-grid;
         grid-column: 1 / 4;
         position: relative;
    }
     nav li {
         margin: 10px 15px 10px 0;
         display: grid;
    }
     .menu {
         display: none;
    }
     .menu-toggle{
         display: block;
         width: 47px;
         background: none;
         border: none;
    }
     #content{
         display: block;
    }
     #content-center {
         display:block;
    }
     #content-center h1{
         font-size: 1.5em;
         display:flex;
         margin-bottom: 10px;
    }
     #content-flex {
         display: flex;
         flex-direction: column;
         height: auto;
         flex-wrap: wrap;
    }
     #content-flex-enseignant-es{
         display: flex;
         flex-direction: column;
         height: 154em;
         flex-wrap: wrap;
    }
     #content-flex-enseignant-ep {
         display: flex;
         flex-direction: column;
         height: 148em;
         flex-wrap: wrap;
         column-gap: normal;
    }
     #content-flex-enseignant-co {
         display: flex;
         flex-direction: column;
         height: 158em;
         flex-wrap: wrap;
    }
     footer {
         background-color: var(--white);
         box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
         align-items: baseline;
         text-align: center;
         padding: 10px;
         display: block;
    }
     .block-app_1, .block-app_2, .block-app_3, .block-app_4, .block-app_5, .block-app_6 {
         border: thin #9B9B9B;
         box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
         padding: 10px;
         background: #FFFFFF;
         width:230px;
    }
}
 @media screen and (max-width: 900px) and (min-width: 768px){
     #main-content{
         background: #F9F9F9;
         display: grid;
         padding-top: 30px;
         padding-bottom: 10px;
         grid-template-columns: 1fr 1fr 1fr 1fr;
    }
     #main-header {
         display: grid;
         grid-template-columns: 74px 1fr 13%;
         align-items: center;
         background-color: var(--white);
         width: 100%;
         box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
         padding: 10px 0 0 10px;
    }
     .menu-toggle{
         display: block;
         width: 47px;
         background: none;
         border: none;
    }
     .menu {
         display: none;
    }
     .bloc-text {
         line-height: 1em;
    }
     #side-bar{
         grid-column: 1 / 3;
         grid-row: 2;
    }
     #content {
         display: grid;
         grid-template-columns: auto;
         grid-row: 1;
         grid-column: 1/3;
        /* grid-gap: 15px;
         */
        /* padding-right: 10px;
         */
        /* order: 1;
         */
    }
     .block-app_1,.block-app_2,.block-app_3,.block-app_4,.block-app_5,.block-app_6{
         border: thin #9B9B9B;
         box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
         padding: 10px;
         background: #FFFFFF;
         width: 264px;
    }
     #content-center{
         display:flex;
    }
     #content-flex {
         display: flex;
         flex-direction: column;
         height: 80em;
         flex-wrap: wrap;
         gap: 10px;
    }
     #content-flex-enseignant-ep {
         display: flex;
         flex-direction: column;
         height: 120em;
         flex-wrap: wrap;
         column-gap: 10px;
    }
     #content-flex-enseignant-co{
         height:125em;
    }
     nav{
         color: #6D6D6D;
         display: inline-grid;
         grid-column: 1 / 4;
         position: relative;
    }
}
 @media screen and (max-width: 1024px) and (min-width: 900px) {
     #main-content {
         background: #F9F9F9;
         display: grid;
         padding-top: 10px;
         padding-bottom: 10px;
    }
     .menu {
         display:none;
    }
     #side-bar {
         grid-column: 1 / 3;
         grid-row: 2;
    }
     #content {
         display: grid;
         grid-template-columns: auto;
         grid-row: 1;
         grid-column: 1/3;
        /* grid-gap: 15px;
         */
        /* padding-right: 10px;
         */
        /* order: 1;
         */
    }
     .menu-toggle {
         display: block;
         width: 47px;
         background: none;
         border: none;
    }
     #main-header {
         display: grid;
         grid-template-columns: 70px 1fr 13%;
         align-items: center;
         background-color: var(--white);
         width: 100%;
         box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
         padding: 10px 0 0 10px;
    }
     #content-flex {
         display: flex;
         flex-direction: column;
         height: 83em;
         flex-wrap: wrap;
         gap: 10px;
    }
     .block-app_1,.block-app_2,.block-app_3,.block-app_4,.block-app_5,.block-app_6{
         border: thin #9B9B9B;
         box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
         padding: 10px;
         background: #FFFFFF;
         width: 318px;
    }
     #content-flex-enseignant-ep {
         display: flex;
         flex-direction: column;
         height: 124em;
         flex-wrap: wrap;
    }
}
 @media screen and (max-width: 1200px) and (min-width: 1024px) {
     #main-content {
         background: #F9F9F9;
         display: grid;
         padding-top: 10px;
         padding-bottom: 10px;
    }
     .menu {
         display: flex!important;
    }
     #side-bar{
         grid-column: 1 / 3;
         grid-row: 2;
    }
     #content {
         display: grid;
         grid-template-columns: auto;
         grid-row: 1;
         grid-column: 1/3;
        /* grid-gap: 15px;
         */
        /* padding-right: 10px;
         */
        /* order: 1;
         */
    }
     .menu-toggle{
         display: none;
    }
     #main-header {
         display: grid;
         grid-template-columns: 71px 8% 1fr;
         align-items: center;
         background-color: var(--white);
         width: 100%;
         box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
         padding: 10px 0 0 10px;
    }
     #content-flex {
         display: flex;
         flex-direction: column;
         height: 81em;
         flex-wrap: wrap;
         gap: 10px;
    }
     .block-app_1,.block-app_2,.block-app_3,.block-app_4,.block-app_5,.block-app_6{
         border: thin #9B9B9B;
         box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
         padding: 10px;
         background: #FFFFFF;
         width: 125%;
    }
     #content-flex-enseignant-ep {
         display: flex;
         flex-direction: column;
         height: 112em;
         flex-wrap: wrap;
         column-gap: 5px;
    }
}
 @media screen and (min-width: 1200px) {
     #main-content{
         background: #F9F9F9;
         display: grid;
         grid-template-columns: minmax(255px, 300px) 2fr;
         padding-top: 10px;
    }
     .menu{
         display: flex!important;
    }
     #main-header{
         display: grid;
         grid-template-columns: 75px 15% 2fr;
         align-items: center;
         background-color: var(--white);
         width: 100%;
         box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
         padding: 0px 0 0 15px;
    }
     .block-app_1,.block-app_2,.block-app_3,.block-app_4,.block-app_5,.block-app_6 {
         border: thin #9B9B9B;
         box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
         padding: 10px;
         background: #FFFFFF;
         width: 32%;
    }
}
@media screen and (max-width: 1398px) and (min-width: 1198px) {
     #content-flex-enseignant-es {
         display: flex;
         flex-direction: column;
         flex-wrap: wrap;
         column-gap: normal;
         height: 127em;
    }
    #content-flex-enseignant-ep {
         display: flex;
         flex-direction: column;
         height: 125em;
         flex-wrap: wrap;
         column-gap: normal;
    }
    #content-flex-enseignant-co {
     display: flex;
     flex-direction: column;
     height: 134em;
     flex-wrap: wrap;
     column-gap: 5px;
    }
}
@media screen and (min-width: 1900px) and (min-width: 1399px) {
    #content-flex-enseignant-co {
     display: flex;
     flex-direction: column;
     height: 127em;
     flex-wrap: wrap;
     column-gap: 5px;
    }
 
}