html {
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
    font-size: 1rem;
}

body {
   margin: 0 auto;
   padding: 0;
   font-family: "Open Sans", Arial, sans-serif;
   background: #f3f3f3;
   color: #333;
   width: 64rem;
}

.entete > header {
   margin: 0;
   padding: 1rem 1rem 0;
   color: #333;
   background: #f3f3f3;
   z-index: 1;
   display: flex;
   justify-content: space-around;
   align-items: center;
}
.entete > header > * {
   padding: 0 2rem;
}
.logoab {
   height: 80px;
}
.logoclient {
   height: 60px;
}
.btnespace {
   flex: 1 1 auto;
   position: relative;
   display: flex;
   justify-content: space-around;
   align-items: center;
}
.icone {
   width: 40px;
   height: 40px;
   fill: #ccc;
}
.icone:hover {
   fill: #000;
}
.btnespace > span {
   position: absolute;
   top: 65%;
   left: 50%;
   transform: translate(-50%, -50%);
   padding: 0.25rem 0.5rem;
   color: #f66;
   font-size: 1rem;
   font-weight: bold;
}

body > footer {
   background: #f3f3f3;
   display: flex;
   flex-direction: column;
}
.credits {
   font-size: 1.1rem; 
   line-height: 1.2rem;
   color: #828282;
   text-align: center;
}
.credits em {
   font-size: 0.9rem;
   font-weight: normal;
}

main {
   margin: 0;
   padding: 0;
   background: #f3f3f3;
   display: flex;
}

#bureau {
   flex: 0 0 40rem;
   margin: 1rem;
   padding: 1rem;
   border-radius: 20px;
   background: #fff;
}
.accueil {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100%;
}
.bonhommeab {
   height: 445px;
}
#cote {
   flex: 0 0 18rem;
   margin: 1rem;
   padding: 0;
   text-align: center;
}
.deconnexion {
   display: inline-block;
   margin: 0 1rem;
   padding: 0.35rem 1rem;
   font-size: 1.5rem;
   border-left: 1px solid #333;
   border-right: 1px solid #333;
   border-radius: 7px;
   color: #f99;
   text-align: center;
}
.deconnexion:hover {
   border-color: #b10e10;
}
#cote h1 {
   margin: 2rem;
   font-size: 0.9rem;
   font-weight: lighter;
   text-align: center;
}
.localisation {
   width: 4rem;
   height: 4rem;
}
#cote h2 {
   font-size: 1.1rem;
   display: flex;
   justify-content: center;
   align-items: center;
}
#moteur {
   margin: 1rem;
   display: flex;
}
#recherche {
   margin: 0 0.5rem;
   border: 3px solid #b10e10;
   border-radius: 0.5rem;
   text-align: center;
   font-size: 1.2rem;
   color: #b10e10;
   line-height: 2rem;
   width: 12rem;
}
#btnrecherche {
   padding: 0;
   border: 0;
   width: 2.5rem;
   height: 2.5rem;
   background: transparent;
}
#btnrecherche svg {
   width: 2.5rem;
   height: 2.5rem;
   fill: #b10e10;
}

#installations {
   margin: 0;
   padding: 0;
   list-style: none;
   height: calc(100vh - 400px);
   overflow: auto;
}
#installations li {
   margin: 0;
   padding: 0;
   text-align: center;
}
.adresse {
   display: inline-block;
   margin: 0 0.5rem 0.25rem;
   padding: 0.25rem;
   border: 5px solid #333;
   border-radius: 7px;
   background: #fff;
   color: #333;
   width: 15rem;
   font-size: 1.1rem;
}
.adresse:hover {
   border-color: #b10e10;
}
.adresse.on {
   border-color: #b10e10;
   color: #b10e10;
}

.enteteadresse {
   padding-bottom: 0.5rem;
   display: flex;
   justify-content: center;
   align-items: center;
}
.enteteadresse button {
   margin: 0;
   padding: 0;
   border: 0;
   background: transparent;
}
#ongletreleves,
#ongletreleves30,
#ongletinterventions {
   margin-left: 0.5rem;
   width: 5rem;
   height: 5rem;
}
.ong {
   width: 4rem;
   height: 4rem;
   fill: #333;
}
.ong:hover {
   fill: #b10e10;
}
.enteteadresse svg.on {
   fill: #b10e10;
}
.adresseencours {
   margin-left: 0.5rem;
   padding: 0 1rem;
   border: 0;
   width: 20rem;
   height: 6.85rem;
   display: flex;
   align-items: center;
}

.section {
   flex: 1 1 auto;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-around;
}

.bloc {
   flex: 1 1 auto;
   margin: 2rem 1rem;
   padding: 3rem 0;
   border-radius: 20px;
   background: #fff;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-around;
}
.bloc > * {
   flex: 1 1 auto;
   margin: 0;
   padding: 0;
   width: inherit;
   display: flex;
   flex-direction: column;
   justify-content: space-around;
   align-items: center;
}
.bloc > a {
   margin: 1rem;
   border-radius: 7px;

}

.article {
   margin: 1rem auto;
   padding: 1rem;
   border: 0;
   width: 80%;
   max-width: 760px;
   font-size: 1.2rem;
   line-height: 1.5rem;
}
.article h1 {
   font-family: Georgia, 'Times New Roman', Times, serif;
   font-size: 200%;
   line-height: 100%;
   text-align: center;
   color: #999;
}
.logos {
   margin: 0 auto;
   padding: 0;
   border: 0;
   width: 80%;
   height: 70px;
   overflow: auto;
   display: flex;
   flex-wrap: nowrap;
   list-style: none;
}
.logos img {
   padding: 0 2rem;
   height: 50px;
   filter: grayscale(100%);
}

table {
   width: 100%;
}
.coldate {
   width: 16%;
}
.colindex {
   width: 14%;
}
.colindex30 {
   width: 12%;
}
.colremarques {
   width: 26%;
   text-align: left;
}
.coldescriptif {
   width: 84%;
   text-align: left;
}
th {
   padding: 0.5rem;
   border: 0;
   background: #b10e10;
   color: #fff;
   font-size: 0.8rem;
   font-weight: normal;
}
.tbody {
   margin: 0;
   padding: 1rem 0 0;
   display: block;
   height: calc(100vh - 405px);
   overflow: auto;
}
td {
   padding: 0.5rem;
   border: 0;
   background: #f9f9f9;
   color: #000;
   font-size: inherit;
   text-align: center;
}
tr:nth-child(even) td {
   background: rgb(255, 234, 234);
   color: #000;
}

em {
   display: block;
   font-size: 14px;
   line-height: 15px;
   font-weight: bold;
   color: #828282;
}
figure {
   margin: 0;
   text-align: center;
}
img {
   max-width: 100%; 
}
video {
   max-width: 100%; 
}
a {
   color: #999;
   text-decoration: none;
}
a:hover {
   border-radius: 7px;
   background: rgba(220, 220, 220, 0.25);
}

.fsaisie {
   display: block;
   padding: 0.5rem 1rem;
   border: 1px solid #6f6258;
   border-radius: 5px;
   width: 85%;
   color: #b10e10;
   font-size: 1.2rem;
}

.fsaisie:focus {
   outline: none;
   box-shadow: 0 0 1rem #b10e10;
}

.fsubmit {
   display: inline-block;
   margin: 1rem;
   padding: 0.5rem 1rem;
   border: 5px solid #b10e10;
   border-radius: 5px;
   background: #b10e10;
   color: #fff;
   -webkit-appearance: none;
   font-size: 1rem;
}

.fsubmit:hover {
   background: #fff;
   color: #b10e10;
}


.agauche {
   text-align: left;
}
.adroite {
   text-align: right;
}
.centre {
   text-align: center;
}
.enligne {
   display: inline-block;
   width: inherit;
}
.alerte,
.ko {
    border-color: #f66;
    color: #f66;
}
.ok {
    border-color: #363;
    color: #363;
}
.visuelgauche {
   display: flex;
}
.visuelgauche > figure {
   padding: 2rem;
}