/* style.css*/
*{margin: 0;padding: 0;}
body {font-size: 1.3em;font-family:Roboto,"Helvetica Neue",Arial,"Segoe UI",sans-serif;line-height: 1.6em;font-weight: 400;margin: 0;padding: 0;color: #636363;}
html{margin: 0;padding: 0;}
h1::first-letter{text-transform: uppercase;}
h2::first-letter{text-transform: uppercase;}
li {list-style-type: none;}
a{color: #000000;text-decoration: none;}
a:hover{text-decoration: underline;}
figcaption{margin-bottom: 1.5rem;}
#general{width: 70%;margin: auto;}
.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9{margin: 0;padding: 0;}
.col-md-4{text-align: center;}
.col-md-6{text-align: center;}
.row {justify-content: center;margin: 0;padding: 0;}
.rowSmall{justify-content: center;margin: 0;padding: 0 1rem 0 1rem;}
.btn, .btn-link{color: #fff;font-weight: bold;}
.btn-primary{background-color: #ff0000;color: #fff;font-weight: bold;border: none;margin-top: 1rem;margin-bottom: 2rem;}
.btn-primary.focus, .btn-primary:focus{-webkit-box-shadow: none;box-shadow: none;color: #fff;}
.btn-primary:hover {color: #fff;background-color: #8F080D;border-color: #8F080D;}
.btn-primary:visited{color: #fff;}
.small{width: 40%;}
.xsmall{width: 15%;margin-left: 3rem;}
.card{padding: 0;margin: 0;text-align: center;width: 100%;border-radius: 0;border: none;border-top: 3px solid #ff0000;border-bottom: 3px solid #fff;padding-top: 2rem;}
.card-img-top {width: 20%;height:auto;border:none;}
.card-img-bottom{width: 80%;height:auto;display: block;margin: auto;border-radius: 3px;}
/*** Cosmétique *******************************/
/*conteneur placé ici supprime les marges de la page!!!*/
#conteneur{padding: 0;margin: 0;}
/*** header *******************************/
/* .logoHead{width: 30%;} */
/* .carte{width: 50%;} */
#header{background-color: #ff0000;color: #fff;padding: 2rem 4rem 0.5rem 4rem;}
#header h1{font-size: 3.5rem;text-transform: uppercase;padding-top: 8%;} 
#logoL{text-align: left;}
#logoR{text-align: right;}
/*** nav *******************************/
#nav{margin: 0;padding: 0;display: flex;justify-content: center;}
.nav-list{display: flex;flex-wrap: wrap;justify-content: center;margin-top: 1rem;margin-bottom: 1rem;}
.nav-link:active{color: #008000;}
.nav-link:focus, .nav-link:hover {text-decoration: underline;color: #ff0000;}
.nav-item{font-size: 1.3em;margin: 0;padding: 0;}
.nav-item:active{color: #ff0000;}
/*** contenu <main> ************************/
.bordeau{color: #8F080D;}
.rouge{color: #ff0000;}
.blanc{color:#fff;}
.noir{color: #000000;}
#contenu a:hover{color: #ff0000;}
#contenu{text-align: center;color: #484848;}
#titrePage{width: 100%;background-color: #ff0000;padding-top: 1.5rem;padding-bottom: 1.5rem; color: #fff;font-size: 2.8rem;margin-bottom: 1.8rem;}
.subtitle {font-size: 1.3em;line-height: 1.2em;letter-spacing: 0em;margin-bottom: 20px;color: #8F080D;}
.imgMedium{width: 90%;max-width: 820px; height : auto;margin-bottom: 2.5rem;}
.galerie{width: 90%;max-width: 820px; height : auto;margin-bottom: 0.5rem;margin-top: 0.5rem;}

#btnUpi{position: fixed;bottom: 15px;right:30px;cursor:pointer;width:40px;min-height: 40px;display: none;}
/*page accueil*/
.deuxColonnes{border-right: 2px solid #000000;margin-bottom: 1rem;}
.enBas{margin-top: 50px;}
/*page situation*/
/* la carte google dans la page situation */
#google{margin-bottom: 2rem; width:820px;height:300px;border: none;}
/*page vehicule*/
#imgFlotte{margin-top: 2rem;}
/*page tarif*/
#tabTarif{width:800px;margin-left:auto;margin-right: auto;}
/* .tabTarif{width:100%;margin-left: auto;margin-right: auto;} */
caption {padding-top: .75rem;padding-bottom: .75rem;color: #8F080D;text-align: center;caption-side: top;}
/* th, td{margin: 0;padding: 0;text-align: left;} */
.prix{text-align: center;}
tr:nth-child(even){background-color:rgba(247, 0, 0, 0.103);}
/*page contact*/
/* La carte google dans la page contact */
#gogol{width:500px;height:300px;border: none;}
/*le formulaire*/
#erreurPhp{width:50%;background-color: #f1b7b7;padding-left: 0.5rem;}
label{margin-top: 1rem;}
input, textarea{width: 87%;}
textarea{min-height: 6rem;}
form{text-align: left;padding-left: 4rem;padding-top: 2rem;}
#customForm input:focus, textarea:focus {background-color: #ebffff;}
#customForm input.error{background: #f8dbdb;border-color: #e77776;}
#customForm textarea.error{background: #f8dbdb;border-color: #e77776;}
#customForm span{margin-left: 1.5rem;font-style: italic;}
#customForm span.error{color: #ff0000;}
/* recaptcha google ************** */
.grecaptcha-badge {width: 70px !important;overflow: hidden !important;transition: all 0.3s ease !important;right: 120px !important;}
.grecaptcha-badge:hover {width: 256px !important;}
#btnEnvoyer:hover{background-color: #adff2f;}
#btnEnvoyer{background-color: #008000;}
/*change l'alignement de la carte de visite*/
/* .aligneForm{margin-top: 7rem;} */
#carteContact{margin-top:7rem !important;box-shadow: gray 0 0 5px !important;}
/*page traitement*/
#oui{background-color: #008000;}
#traitement{width:800px;margin-left:auto;margin-right: auto;}
.traitement{width:100%;margin-left: auto;margin-right: auto;}
.alignHaut{vertical-align: top;}
/* .mesErreur{color: red;visibility: hidden;} */
/*** footer *******************************/
.ligneTop{border-top: 1px solid #fff;}
#foot{padding: 2rem 3rem 1rem 3rem;background-color: #ff0000;color: #fff;}
#foot strong{color: #fff;}
#foot ul{margin-top: 0 !important ;margin-bottom: 0 !important ;}
#foot a:hover{color: #fff;}
#foot p, #footer a{color: #000000 !important ;}

@media screen and (max-width: 700px){
    #tabTarif{width:90%;margin-left: auto;margin-right: auto;}
    .table thead {
    display: none !important;
    }

    .table tr{
    display: block !important;
    /* margin-bottom: 40px !important; */
    }

    .table td {
    display: block !important; 
    text-align: right !important;
    }

    .table td:before {
    content: attr(data-label) !important;
    float: left !important;
    font-weight: bold !important;
    }
    }

@media screen and (min-width: 260px) and (max-width: 931px)
{
    #header h1{font-size: 1.5em;}
    #header img{display:block;margin-left: auto;margin-right: auto;}
    .logoHead{width: 30%;height: auto;}
    .carte{width: 50%;height: auto;}
    .nav-item{font-size: 1em;}
    .deuxColonnes{border:none;padding-left: 0.5rem;padding-right: 0.5rem;}
    .enBas{margin-top: 16px;}
    .ligneTop{margin-top:2em;}
    ul{margin-left: 0.5rem;margin-right: 0.5rem;padding-left: 0;}
    #carteContact{margin-top:1rem !important;width:80%;height:auto;box-shadow: gray 0 0 5px !important;}
    form{padding-left: 1rem;padding-top: 0rem;}
    #erreurPhp{width:90%;background-color: #f1b7b7;padding-left: 0.5rem;}

    #traitement{width:80%;margin-left: auto;margin-right: auto;padding-right: 0.5rem;}
    .traitement{width:80%;margin-left: auto;margin-right: auto;}
    .small{width: 80%;}
    .xsmall{width: 80%;margin-left: 0.2rem;}
    #google{margin-top: 0.3rem;margin-bottom: 2rem; width:80%;height:auto;border: none;}
    #gogol{margin-top: 0.3rem;margin-bottom: 2rem; width:80%;height:300px;border: none;}
    /* recaptcha google ************** */
.grecaptcha-badge {width: 50px !important;overflow: hidden !important;transition: all 0.3s ease !important;right: 10px !important;bottom:60px !important}
.grecaptcha-badge:hover {width: 256px !important;}
}