body {
    background-color: #fff;
    color: #474444;
    box-sizing: border-box;
}
img{
    width:100%;
}
h1, h2, h3, p{
    margin:0;
}
a{
    text-decoration: none;
}
a.btn{
    transition: text-decoration 0.3s ease, color 0.3s ease;
}
a.btn:hover span{
    text-decoration: underline;
}
.container{
    max-width:1200px;
    margin: 0 auto;
    display: flex;
    flex-flow: row wrap;
    justify-content:space-between; 
    align-items: center;
    position: relative;
}
/*Header EC*/
.header-ec{
    font-family: 'Poppins', sans-serif;
    height:60px;
    background-color: #fff;
    width:100%;
    max-width:1200px;
    margin-bottom:15px;
    display: flex;
    justify-content: space-between; 
    align-items: center;
}
.header-ec .logo img{
    width: 220px;
}
.header-ec h1{
    font-family: 'Poppins', sans-serif;
    color:#9c9c9c;
    font-size: 23px;
    font-weight:500;
}
.header-ec p { 
    font-size: 13px; 
}
.header-ec .phone{
    display: flex;
    align-items: flex-start;
}
@media (max-width:1024px){
    .header-ec{
        flex-wrap: nowrap;
    }
    .header-ec h1 {
        display:none;
    }
}
@media (max-width:767px){
    .header-ec .phone {
        display:none;
    }
    .header-ec .logo img{
        width:140px;
    }
    .header-ec a.btn{
        font-size:11px !important;
    }
}
.icone{
    padding:5px;
}
.icone-bleu{
    color: #629bcb !important;
}
.icone-vert, .texte-vert{
    color:#57b565 !important;
}
.icone-rose, .texte-rose{
    color:#dc6b70 !important;
}
.icone-jaune, .texte-jaune{
    color:#dd9c51 !important;
}
.icone-fond, .texte-fond{
    color:#e0e0e0 !important;
}
.icone-gris, .texte-gris,.texte-gris a{
    color:#9c9c9c !important;
}
.number-blanc, .texte-blanc, .icone-blanc{
    color: #fff !important;
}
.bordure-gris{
    border:1px solid #969696;
}
*:not(a.btn){
    box-sizing : content-box;
  }
.header-ec a.btn, .interface-e1 a.btn, #footer-interface a.btn, .fiche-dae-e3 a.btn, .liste-dae-e4 a.btn{
    font-size:13px;
    color:#fff;
    padding: 8px 12px 7px 9px;
    border-radius:10px;
    margin:5px;
    height:15px;
    display: flex;
    align-items: center;
    line-height:13px;
}
.btn-rose, .fond-rose{
    background-color: #dc6b70;
}
.btn-gris{
    background-color: #969696;
}
.fond-gris{
    background-color: #acacac;
}
.fond-jaune{
    background-color: #dd9c51 !important;
}
.fond-vert{
    background-color: #57b565 !important;
}
.fond-blanc{
    background-color: #fff !important;
}
/*Formulaires E2*/
.form-e2 * {
    font-family: 'Poppins', sans-serif;
    line-height: 1.2em;
}
.interface-e1 *, #footer-interface span, #footer-interface h4{
    font-family: 'Poppins', sans-serif;
    line-height: 1.5em;
}
.form-e2 > div, .interface-e1 > div{
    width:100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}
.form-e2 .equal-height{
    min-height: 540px;
}
.form-e2 .left-col > div{
    margin:10px 0;
    padding:10px;
    background-image: url(../assets/interv.png);
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 8px;
}
.form-e2 .left-col > div img{
    opacity:0;
}
.form-e2 .titre2-blanc{
    font-size:35px;
    font-weight:600;
    text-transform:uppercase;
    color:#fff;
    background-color:#dc6b70;
    padding: 15px 20px;
    text-align: center;
    border-radius:8px;
    line-height: 53px;
    margin: 2px 0;
}
.form-e2 .titre2-gris{
    font-size:24px;
    font-weight:400;
    color:#969696;
    background-color:#474444;
    padding:10px;
    border-radius:8px;
    margin: 2px 0;
}
.form-e2 .titre2-gris span{
    font-size:16px;
}
.form-e2 h3{
    font-size:20px;
    font-weight:700;
    color:#474444;
    margin: 8px 0;
}
.form-e2 form {
    padding: 10px;
    background: white;
    border-radius: 8px;
    background-color: #acacac;
    margin:10px 0;
}
.form-e2 label{
    font-size:16px;
    font-family: 'Poppins', sans-serif;
    display: inline-block;
    margin: 10px 0;
}
.form-e2 input[type="text"], .form-e2 input[type="email"], .form-e2 textarea, .form-e2 select{
    padding: 5px;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    box-sizing: border-box;
    border:none;
    border-radius:3px;
}
.form-e2 input{
    width:100%;
    height:30px;
}
.form-e2 textarea{
    width:100%;
}
.form-e2 select{
    height:30px;
    width:100%;
}
.form-e2 input:focus-visible, .form-e2 select:focus-visible, .form-e2 textarea:focus-visible{
    outline-color:#569bca;
}
.form-e2 button {
    background-color: #569bca;
    color: white;
    border: none;
    border-radius:3px;
    padding:10px;
    margin-top: 10px;
    cursor: pointer;
    font-weight: 600;
    font-size:13px;
}

.form-e2 button:hover {
    background-color: #dc6b70;
}
@media (min-width:768px) {
    .form-e2{
        min-height: 90vh;
    }
    .form-e2 .left-col, .interface-e1 .left-col{
        width:49.5%;
    }
    .form-e2 .right-col, .interface-e1 .right-col{
        width:49.5%;
    }
    .form-e2 .titre2-gris{
        height:116px;
    }

}
@media (min-width:1025px) {
    .form-e2 .left-col ,.interface-e1 .left-col{
        width:39%;
    }
    .form-e2 .right-col, .interface-e1 .right-col{
        width:60%;
    }
    .form-e2 .titre2-gris{
        font-size:35px;
    }
    .form-e2 .titre2-gris span{
        font-size:20px;
    }
    .form-e2 input{
        width:50%;
    }
}
/*Interface E1*/
.interface-e1{
    justify-content:center;
    align-items: flex-start;
    position: relative;
}
.interface-e1 p, .interface-e1 a, .interface-e1 li{
    font-size:14px;
    color:#9c9c9c;
    font-weight:500;
}
#compte, #rapport, #compte-form, #liste-dae, #carte{  
    padding:10px;
    border-radius:8px;
    margin:5px;
}
#compte, #compte-form{
    background-color:#d6d6d6;
    min-height:120px;
    padding: 20px 10px;
}
#rapport, #liste-dae, #carte{
    background-color:#e0e0e0;
    min-height:560px;
}
#rapport > div:last-child{
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}
.titre{
    display:flex;
    justify-content: space-between;
    margin: 10px;
    max-height: 60px;
}
.titre2-noir{
    font-size:28px;
    color:#474444; 
    font-weight: 600;
    margin: 0 0 0 5px;
}
.titre3-noir{
    font-size:19px;
    color:#474444; 
    font-weight: 600; 
    margin: 0;  
}
.titre2-noir span, .titre3-noir span{
    display: block;
    font-size:13px;
    line-height: 10px;
    color:#dc6b70;
    font-weight:500;
}
#compte{
    display: flex;
    flex-flow: row nowrap;
    font-size: 14px;
}
#compte > div,#compte > ul {
    width:50%;
}
#compte > div{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 0 10px;
}
#compte > ul{
    display: flex;
    flex-direction: column;
    justify-content: center;

}
#compte > ul li{
    list-style-type: none;
}
#compte .icone{
    width:14px;
    height:14px;
    color:#969696;
}
#rapport{
    display:flex;
    flex-flow: column nowrap;
    justify-content: space-between;
}
.col-3, .col-2, .col-5{
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}
.icone-box{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding:5px;
}
.col-5 > div{
    width:18%;
}
.col-3 .icone-box{
    width:30%;
    border-right: 1px solid #969696;
    margin-top: 16px;
}
.col-3 .icone-box:last-child{
    border:none;
}
.col-2 .icone-box{
    width:50%;
    margin-right:10px;
}
#consommables-jaune .texte-jaune, #consommables-rose .texte-rose{
    font-weight:600;
}
#consommables-jaune > div:last-child > div:last-child{
    margin-right:0;
}
.col-2 > div{
    width:50%;
    display: flex;
    flex-flow: column nowrap;
}
.col-2 > div > div:first-child{
    flex:1 1 100%;
    display: flex;
    margin-bottom:10px;
}
.col-2 > div > div:last-child{
    display: flex;
    flex-flow: row nowrap;
}
.icone-box .icone{
    width:65px;
    height:65px;
    font-size:55px;
}
.icone-box .number, .icone-box .number-blanc{
    font-size:45px;
    font-weight: 600;
}
#rapport .icone-box .texte-rose, #rapport .icone-box .texte-gris{
    font-weight:600;
}
.icone-box-rose{
    background-color:#dc6b70;
    border-radius: 13px;
}
.icone-box-jaune{
    background-color:#dd9c51;
    border-radius:13px;
}
.icone-box-rose .icone, .icone-box-jaune .icone{
    width:30px;
    height:30px;
    font-size:30px;

}
#compte-form .icone-box:nth-child(3){
    border-right: 1px solid #969696;
}
#compte-form .icone-box .icone:hover i{
    color:#fff;
}
#compte-form > .texte-gris{
    display: flex;
    align-items: center;
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    width:15%;
}
#compte-form .icone-box .icone{
    width:55px;
    height:55px;
    font-size:44px;
}
#compte-form .icone-box p{
    font-size:19px;
    font-weight:600;
}
#compte-form .icone-box small{
    font-size:8px;
    text-transform: uppercase;
    font-weight:600;
}
#liste-dae{
    display: flex;
    flex-flow: column nowrap ;
    /*justify-content: space-between;*/
    width:59%;
    margin-left: 0;
} 
#liste-dae > div:last-child{
    flex-wrap:wrap;
}
#liste-dae .header-liste{
    flex: 1 1 100%;
    display: flex;
    justify-content: space-between;
}
.header-liste{
    height:35px;
}
.header-liste > div:nth-child(2), .header-liste > div:last-child{
    background-color: rgba(255,255,255, 0.25);
    border-radius:13px;
}
.header-liste .icone-noir{
    margin-right:3px;
}
.dae{
    height:70px;
}
.dae, .header-liste{
    display: flex;
    flex-flow:row wrap;
    justify-content: space-between;
    margin: 5px 0;
}
 .header-liste > div{
    font-size:11px;
    display: flex;
    align-items:center;
    padding:10px;
 }
 .header-liste > div:first-child{
    padding:0;
 }
.dae .img-dae{
    width:15%;
}
.dae .img-dae{
    display: flex;
    align-items: center;
    justify-content: center;
}
.dae img {
    border-radius: 13px;
}
.dae .adresse, .header-liste > div:nth-child(2){
    width:50%;  
}
.dae .etat-dae, .header-liste >div:last-child{
    width:20%;
}
.dae .adresse{
    background-color:#acacac;
}
.dae .etat-dae{
     background-color:#fff;
}
.dae ul{
    margin:0;
    padding:10px;
    border-radius:13px;
}
.dae ul li {
    list-style-type: none;
    font-size:11px;
}
#carte{
    display: flex;
    flex-flow: column nowrap ;
    width:32%;
    margin-right:0;
}
#carte > div:last-child{
    background-image: url(../assets/cart.webp);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 8px;
    width:100%;
    height:100%;
}
@media(max-width:1099px){
    #rapport .col-2 > div{
        width:100%;
    }
    .titre2-noir{
        line-height: 28px;
    }
    .titre2-noir span, .titre3-noir span{
        line-height:18px;
    }
    #rapport, #liste-dae, #carte{
        min-height:760px;
    }
}
#footer-interface{
    width:1200px;
    margin:0 15px;
}
#footer-interface h4{
    font-size:14px;
    font-weight:600;
}
@media(max-width:1024px){
    #liste-dae, #carte{
        width:100%;
    }
    #carte, #footer-interface{
        position:absolute;
        top:100%;
        left:0;
        z-index:1;
        max-width:99%;
        padding:0;
    }
    #carte{
        min-height: 350px;
    }
    #carte > div:last-child{
        height:300px;
    }
    #footer-interface{
        margin-top:400px;
        flex-direction: column;
        align-items: flex-start;
    }
    #compte, #compte-form{
        min-height:280px;
    }
    #compte-form.col-5 > div{
        width:30%;
    }
    #compte > div{
        justify-content: center;
    }
    #compte-form .icone-box:nth-child(3){
        border: none;
    }
}
@media(max-width:767px){
    .dae .img-dae{
        width:13%;
    }
}
@media(max-width:520px){
    .dae .img-dae{
        width:17%;
    }
    #compte, #compte-form, #rapport, #liste-dae, #carte{
        min-height:auto;
    }
}
/* Fiche DAE E3*/
.fiche-dae-e3 *{
    font-family: 'Poppins', sans-serif;
    line-height: 1.5em;
}
.fiche-dae-e3 .left-col, .fiche-dae-e3 .right-col{
    width:39%;
}
.fiche-dae-e3 .center-col{
    width:20%;
}
.fiche-dae-e3 h3{
    font-size:19px;
    font-weight:600;
    margin:0;
}
#dae-titre, #statut-dae, .fiche-dae-e3 #compte-form{
    background-color: #d6d6d6;;
    padding: 10px;
    border-radius:8px;
    min-height:120px;
    margin-bottom:10px;
}
#informations, #rapport-dae, #position{
    border-radius: 8px;
    background-color: #e0e0e0;
    padding:20px 10px;
}
#informations, #rapport-dae , .fiche-dae-e3 .right-col > div:last-child{
    min-height: 765px;
    box-sizing: border-box;
    display: flex;
    flex-direction:column;
    justify-content: space-between;
}
.fiche-dae-e3 #dae-titre{
    display: flex;
    align-items: center;
}
.fiche-dae-e3 #dae-titre img, .fiche-dae-e3 #dae-titre h2{
    margin-left:25px;
}
.fiche-dae-e3 #dae-titre img{
    width:25%;
    border-radius: 8px;
}
#informations{
    display:flex;
    flex-flow: row wrap;
    margin:0;
}
#informations h3{
    flex:1 1 100%;
    padding:10px;
}
#informations > div{
    display:flex;
    flex-direction: column;
    padding:10px;
    width:45%;
}
#informations > div span:first-child{
    font-size:11px;
    font-weight:600;
    margin-bottom:10px;
}
#informations > div span:last-child{
    font-size:13px;
    padding:10px;
    border-radius:8px;
}
#informations > div i{
    padding-right:10px
}
#statut-dae{
    display: flex;
    justify-content: center;
}
#statut-dae h2{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size:15px;
    font-weight:400;
    text-transform: uppercase;
    max-width:95%;
}
#statut-dae h2::before, #statut-dae h2::after{
    content: "";
    display: block;
    width: 30px; 
    height:1px;        
    background: #474444;
    margin:5px;
}
#rapport-dae{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
#rapport-dae > div:first-child span{
    display:flex;
    justify-content: center;
    margin: 20px 0;
}
#rapport-dae > div:first-child .icone-rose{
    font-size: 96px;
}
#rapport-dae > div:first-child .icone-vert{
    font-size: 96px;
    /*transform: rotate(90deg);*/
}
#rapport-dae > div:last-child  p{
    margin: 10px 0;
    font-size:15px;
}
#rapport-dae > div:last-child > div{
    margin:50px 0;
}
#rapport-dae > div:last-child > div > div{
    padding: 10px;
    border-radius: 8px;
    font-size:15px;
    display: flex;
    align-items: center;
    justify-content: center;
}
#rapport-dae > div:last-child > div > div > span:first-child{
    margin-right:15px;
    font-size: 30px;
}
.fiche-dae-e3 #compte-form{
    justify-content: space-between;
    margin:0 0 10px 0;
}
.fiche-dae-e3 #compte-form .icone-box{
    width:30%;
    border-right: 1px solid #acacac;
}
.fiche-dae-e3 #compte-form .icone-box:last-child{
    border:none;
}
#position{
    margin-bottom: 10px;
    min-height:480px;
}
#position > div{
    display: flex;
    justify-content: space-between;
    font-size:15px;
    margin-bottom: 5px;
}
#position > div span{
    padding:10px 0;
}
#position > div span:last-child{
    width:70%;
    line-height:18px;
}
#position > div:last-child span.bordure-gris{
    width: 30%;
}
#position > div span.bordure-gris{
    padding:10px;
    border-radius: 8px;
}
.fiche-dae-e3 #carte{
    width:auto;
    min-height: auto;
    margin:0;
}
.fiche-dae-e3 #carte > div:first-child{
    margin:10px 0;
}
.fiche-dae-e3 #carte > div:last-child{
    min-height:155px;
}
@media(max-width:1110px){
    #position > div, #rapport-dae > div:last-child p{
        font-size:13px;
    }
    .fiche-dae-e3 #carte > div:last-child{
        height: 180px;
    }
    #informations > div{
        width:44%;
    }
}
@media(max-width:1024px){
    .fiche-dae-e3 .left-col, .fiche-dae-e3 .center-col, .fiche-dae-e3 .right-col, .fiche-dae-e3 #carte{
        width:100%;
    }
    .fiche-dae-e3 .center-col, .fiche-dae-e3 .right-col{
        margin-top:10px;
    }
    #informations, #rapport-dae, .fiche-dae-e3 .right-col > div:last-child{
        min-height: auto;
    }
    .fiche-dae-e3 #dae-titre img{
        width:10%;
    }
    #rapport-dae > div{
        margin: 0 auto;
    }
    #rapport-dae > div:last-child > div{
        margin:15px 0;
    }
    #carte {
       padding-right:3px;
    }
    #carte h3{
        padding-left:10px;
    }
}
/* Maquette E4 Liste des DAE*/
.liste-dae-e4 *{
    font-family: 'Poppins', sans-serif;
    line-height: 1.5em;
    font-size:13px;
}
.liste-dae-e4  table {
    white-space: nowrap;
    border-collapse: separate; /* nécessaire pour que border-radius fonctionne */
    border-spacing: 0;
    width: auto;
    margin:0 auto;
}
.liste-dae-e4 .table-container {
    overflow-x: auto;
    margin:0 auto;
}
.liste-dae-e4 thead {
    background-color: #f0f0f0;
}
.liste-dae-e4 th:first-child{
    border-left:none;
    border-top-left-radius:8px ;
}
.liste-dae-e4 th:last-child{
    border-right:none;
    border-top-right-radius:8px ;
}
.liste-dae-e4 tr:last-child td:first-child{
    border-bottom-left-radius:8px;
}
.liste-dae-e4 tr:last-child td:last-child{
    border-bottom-right-radius:8px;
}
.liste-dae-e4 th, .liste-dae-e4 td {
    text-align: center;
    border: 1px solid #ccc;
    border-top: none;
    padding:5px;
}
.liste-dae-e4 td img{
    width:75px;
}
/* Responsive à partir de 768px et moins */
@media screen and (max-width: 1024px) {
    .liste-dae-e4 table.responsive-table{
        width:90%;
    }
    .responsive-table thead {
        display: none;
    }

    .responsive-table tr {
        display: block;
        margin-bottom: 15px;
        border: 1px solid #ccc;
        padding: 20px;
        border-radius: 8px;
    }

    .responsive-table td {
        display: flex;
        justify-content: space-between;
        text-align: left;
        padding: 10px 0;
        border: none;
    }
    .responsive-table td::before {
        content: attr(data-label);
        font-weight: bold;
        flex-basis: 40%;
        margin-right:20px;
    }
}