/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
/*header,*/
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    /*font: inherit;*/
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
/*header,*/
hgroup,
menu,
nav,
section {
    display: block;
}

body {
    line-height: 1;
    height: 100%;

}

ol,
ul {}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

html {
    height: 100%;
    width: 100%;
}

p {
    margin-bottom: 0 !important;
}


@font-face {
    font-family: Georgia;
    src: url(../../fonts/Georgia.ttf);
}

.body {
    width: 100%;
    /*background-color: #fffad6;*/
}

.body-js {
    overflow-y: hidden;
}

/*----------------header--------------------*/
/*.header{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 3;
    overflow: hidden;
    height: 100px;
    width: 100%;
    background-color: white;
    display: flex;
    align-items: center;
    border-bottom: 2px solid #404041;
    background-color: #fffad6;

}*/

/*.header-categorie{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 3;
    overflow: hidden;
    height: 100px;
    width: 100%;
    display: flex;
    align-items: center;
    border-bottom: 2px solid #404041;
    background-color: #fffad6;
}*/

/*#header-mobile-categorie{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 3;
    overflow: hidden;
    height: 110px;
    width: 100%;
    background-color: #fffad6;
}

#header-progress{
    display: none;
    right: 0;
    z-index: 9;
    overflow: hidden;
    width: 100%;
    background-color: white;
}*/

:root {
    --line-border-fill: orange;
    --line-border-empty: #bdbdbd;
}

#container-bar-progress {
    height: 130px;
    width: 100%;
    box-shadow: 0px 0px 5px #555;
    background-color: white;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
}

/*.icone-user-co-mobile {
    display: none;
}*/

.prev {
    margin-right: 20px !important;
}

#close {
    margin-left: 20px;
}

#container-icone-categorie {
    width: 100%;
    box-shadow: 0px 0px 5px #555;
    background-color: #fffad6;
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 2px solid #404041;
}

.progress-header {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    justify-content: space-between;
    margin-bottom: 30px;
    max-width: 100%;
    width: 350px;
    margin: auto;
    margin-top: 90px;
}

.progress-header::before {
    content: "";
    background-color: var(--line-border-empty);
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    height: 4px;
    width: 100%;
    z-index: -1;
    transition: 0.4s ease;
}

#progress {
    background-color: var(--line-border-fill);
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    height: 4px;
    width: 10%;
    z-index: -1;
    transition: 0.4s ease;
}

.circle {
    background-color: #fff;
    color: #999;
    border-radius: 50%;
    height: 40px;
    width: 40px;
    border: 3px solid #b2bec3;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.4s ease;

}

.circle.active2 {
    border-color: var(--line-border-fill);
}

/*.btn-progress{
    background-color: var(--line-border-fill);
    color: #fff;
    border-radius: 6px;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    padding: 8px 23px;
    margin: 5px;
    font-size: 14px;
}

.btn-progress:focus{
    outline: 0;
}

.btn-progress:active{
    transform: scale(0.97);
}

.btn-progress:disabled{
    background-color: var(--line-border-empty);
    cursor: not-allowed;
}*/

/*.menu-burger{

    display: none!important;
}*/

/*.container-logo-index{
   margin-left: 40px;
}*/

/*.logo{
    width: 270px;
    height: 40px;
}*/

/*.button-rejoindre-header{
    border-radius: 7px;
    background-color: orange;
    border: 1px solid #ffbc40;
    color: white;
    cursor: pointer;
    outline-style:none;
    margin-right: 40px;
    margin-left: auto;
    height: 35px;
    width: 235px;
    margin-right: 30px;
    margin-left: auto;
}*/

/*.button-inscription-particulier{
    border-radius: 7px;
    background-color: orange;
    border: 1px solid #ffbc40;
    color: white;
    cursor: pointer;
    outline-style:none;
    margin-right: 40px;
    height: 35px;
    width: 108px;
    margin-right: 30px;
}*/

/*.button-connexion{

    border-radius: 7px;
    background-color: orange;
    border: 1px solid #ffbc40;
    width: 100px;
    color: white;
    cursor: pointer;
    float: right;
    height: 35px;
    width: 108px;
    margin-right: 30px;
}*/


/*.container-banniere-header{
    height: 24%;
    width: 100%;
}

.banniere-header{
    height: 100%;
    width: 100%;
}*/
.container-barre-recherche {
    height: 75px;
    background-color: red;
}

#liste-type-annonce,
#liste-categorie,
#liste-region,
#liste-departement,
.ville-barre-recherche,
.rechercher-barre-recherche {
    font-size: 1.4vw;
    margin-top: 1%;
}

.submit-barre-recherche {
    font-size: 1.3vw;
    margin-left: 7px;
}

/*.erreur{

    font-size: 1vw!important;
    color: red!important;
}

.erreur-connexion{

    font-size: 15px!important;
    color: red!important;
    font-weight: bold;
    padding-top: 15px;
    text-align: center;
}*/

/*.erreurmecano{

    font-size: 1vw!important;
}*/

.erreur-recherche {
    font-size: 25px;
    font-weight: bold;
    width: 100%;
    text-align: center;
    margin-bottom: 60px !important;
    color: red;
}

button {
    outline: 0 !important;

}

/*.button-notif{
    position: relative;
    margin-right: 20px;
    border-radius: 7px;
    background-color: orange;
    color: pink;
    border: 1px solid #ffbc40;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 35px;
    width: 50px;
    cursor: pointer;
    order: 4;
}*/

.count {
    display: none;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: -12px;
    right: -12px;
    border: 2px solid red;
    background-color: red;
    color: white;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    font-weight: bold;
}

.fa-bell {
    color: white;
    font-size: 22px;
}

/*.button-annonce{
  border-radius: 7px;
    background-color: orange;
    border: 1px solid #ffbc40;
    width: 100px;
    color: white;
    cursor: pointer;
    order: 1;
    margin-right: 20px;
    height: 35px;
    margin-left: auto;
}*/


/*.button-profils{
    border-radius: 7px;
    background-color: orange;
    border: 1px solid #ffbc40;
    width: 100px;
    color: white;
    cursor: pointer;
    order: 2;
    margin-right: 20px;
    height: 35px;
}*/

.button-affichage-diagno {
    border-radius: var(--border-radius);
    min-height: 40px;
    border: none;
    color: var(--grey-light);
    background-color: var(--third-color);
    scale: 1;
    margin: 10px 0;
    cursor: pointer;
    width: 80%;
}

/* .button-affichage-facture {
    border-radius: 7px;
    background-color: orange;
    border: 1px solid #ffbc40;
    width: 100px;
    color: white;
    cursor: pointer;
    order: 2;
    height: 35px;

} */

.button-remplir-diagno {
    border-radius: var(--border-radius);
    min-height: 40px;
    border: none;
    color: var(--grey-light);
    background-color: var(--third-color);
    scale: 1;
    margin: 10px 0;
    cursor: pointer;
}


.btn-paiement-offre {
    border-radius: var(--border-radius);
    min-height: 40px;
    border: none;
    color: var(--grey-light);
    background-color: var(--third-color);
    scale: 1;
    margin: 10px 0;
    cursor: pointer;
}

.btn-paiement-diagno {
    border-radius: 7px;
    background-color: orange;
    border: 1px solid #ffbc40;
    width: 200px;
    color: white;
    cursor: pointer;
    order: 2;
    height: 35px;
}

.btn-supr-panne-diagno {
    border-radius: 7px;
    background-color: orange;
    border: 1px solid #ffbc40;
    width: 200px;
    color: white;
    cursor: pointer;
    height: 35px;
}


/*.button-deconnexion{
    border-radius: 7px;
    background-color: orange;
    border: 1px solid #ffbc40;
    width: 139px;
    color: white;
    cursor: pointer;
    order: 3;
    margin-right: 20px;
    height: 35px;
}*/

/* #res{
    margin-bottom: 0;
}

.container-notif{
    display: none;

}

.container-notif-js{
    display: block;
    width: 455px;
    position: fixed;
    top: 68px;
    right: 14px;
    background-color: white;
    min-height: 124px;
    max-height: 322px;
    border-radius: 7px;
    overflow-y: scroll;

} */

/* #titre-notif{
    width: 100%;
    background-color: #404041;
    text-align: center;
    border-top-right-radius: 7px;
    border-top-left-radius: 7px;
    color: #ffbc40;
}
 */
/* .container-offre-notif{
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    height: 100px;
    border-bottom: 2px solid grey;
    cursor: pointer;
} */

/* .avatar-offre-notif {
    width: 60px;
    border-radius: 50%;
    clear: both;
    border: 2px solid orange;
    margin-left: 20px;
    height: 60px;
} */

/* .container-prenom-nom-notif {
    display: flex;
    flex-direction: row;
}

.prenom-notif {
    font-size: 18px;
    margin-left: 20px;
    color: orange;
    display: inline-block;
}

.nom-notif {
    font-size: 18px;
    margin-left: 1%;
    color: orange;
    margin-right: auto;
    display: inline-block;
}
 */
/* .container-prenom-nom-text-notif{
    display: flex;
    flex-direction: column;
} */
/*
.text-offre-notif{
    margin-left: 20px;
} */

/* .date-notif{
    margin-left: 20px;
    margin-top: 65px;
} */

/* .container-annonce-post-notif{
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    height: 100px;
    border-bottom: 2px solid grey;
    cursor: pointer;
}

.avatar-annonce-notif {
    width: 60px;
    border-radius: 50%;
    clear: both;
    border: 2px solid orange;
    margin-left: 20px;
    height: 60px;
}
 */
/* .prenom-annonce-notif {
    font-size: 18px;
    margin-left: 20px;
    color: orange;
    display: inline-block;
} */

.container-confirmation-rdv-notif {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    height: 100px;
    border-bottom: 2px solid grey;
    cursor: pointer;
}

.button-profil-particulier {

    margin-left: 51%;
    clear: both;

}


/*.container-accueil{
    display: flex;
    flex-flow: row wrap;
    width: 100%;
    padding-top: 80px;
    position: relative;
    background-color: #fffad6;
}*/

#overlay-popup-rib {
    display: flex;
    position: fixed;
    top: 0;
    height: 100%;
    width: 100%;
    z-index: 9;
    background-color: #000000bd;
    justify-content: center;
    align-items: center;
}

.container-overlay-rib {
    background-color: white;
    height: 200px;
    width: 650px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container-texte-overlay-rib p {
    font-family: "Open Sans Condensed", sans-serif;
    font-weight: 700;
    color: #404041;
    font-size: 20px;
}

.btn-index-rib {
    border-radius: 7px;
    padding: 0px 20px;
    margin-left: auto;
    margin-right: auto;
    background-color: orange;
    border: 1px solid #ffbc40;
    height: 40px;
    display: block;
    color: white;
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
}

#btn-index-rib2 {
    border-radius: 7px;
    padding: 0px 20px;
    margin-left: auto;
    margin-right: auto;
    background-color: orange;
    border: 1px solid #ffbc40;
    height: 40px;
    display: none;
    color: white;
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
}

.container-texte-overlay-rib span {
    color: #6acdfe;
}

#overlay-popup-completer-particulier {
    display: none;
    position: fixed;
    top: 0;
    height: 100%;
    width: 100%;
    z-index: 9;
    background-color: #000000bd;
    justify-content: center;
    align-items: center;
}

#popup-completer-particulier {
    background-color: white;
    width: 1000px;
    height: 400px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 15px;
}

.btn-modif-profil{
    display: block;
    margin-left: auto;
    margin-right: auto;
    border-radius: var(--border-radius);
    min-height: 40px;
    border: none;
    background-color: var(--third-color);
    scale: 1;
}

.btn-modif-profil a{
    color: var(--grey-light);
}

#popup-completer-profil-particulier {

    padding-left: 100px;
    padding-right: 100px;
}

#overlay-popup-remplir {
    display: none;
    position: fixed;
    top: 0;
    height: 100%;
    width: 100%;
    z-index: 9;
    background-color: #000000bd;
    justify-content: center;
    align-items: center;
}

#popup-remplir {
    background-color: white;
    width: 1000px;
    height: 535px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 15px;
}

#popup-completer-profil {

    padding-left: 100px;
    padding-right: 100px;
}

.btn-fermer-popup-remplir {
    font-size: 15px;
    float: right;
    text-decoration: underline;
    cursor: pointer;
    margin-right: 15px;
    margin-top: 10px;
}

.btn-fermer-popup-remplir:hover {
    color: orange;
}

#popup-completer-profil h1 {
    clear: both;
    text-align: center;
    font-family: "Open Sans Condensed", sans-serif;
    font-weight: 700;
    color: orange;
}

#popup-completer-profil span {
    color: #6acdfe;
}

#popup-completer-profil p {
    font-family: "Open Sans Condensed", sans-serif;
    font-weight: 700;
    color: #404041;
    font-size: 20px;
}

#popup-completer-profil-particulier h1 {
    clear: both;
    text-align: center;
    font-family: "Open Sans Condensed", sans-serif;
    font-weight: 700;
    color: orange;
}

#popup-completer-profil-particulier span {
    color: #6acdfe;
}

#popup-completer-profil-particulier p {
    font-family: "Open Sans Condensed", sans-serif;
    font-weight: 700;
    color: #404041;
    font-size: 20px;
}

.container-bonhomme {
    text-align: center;
    height: 80%;
    width: 50%;
    padding-top: 2%;

}

.container-bonhomme img {}

.container-bonhomme-js {
    display: none;

}

.container-slogan {
    width: 50%;
    display: block;
}

.container-slogan-js {
    display: none;
}

.container-slogan-mobile {
    display: none;
}

.slogan {
    padding-top: 100px;
    width: 720px;
    text-transform: uppercase;
    font-family: "Open Sans Condensed", sans-serif;
    font-weight: 700;
    color: #404041;
    font-size: 50px;
    margin-left: auto;
    margin-right: auto;

}

.slogan span {
    color: orange;
}

.container-icone-index {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    width: 500px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    cursor: pointer;


}

/*.container-voiture-index:nth-child(1){
    border: 2px solid orange;
    box-shadow: 1px 1px 12px #555;
    border-radius: 20px;
    width: 115px;
    height: 115px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white;
}*/

/*.container-voiture-index:nth-child(2){
    border: 2px solid orange;
    box-shadow: 1px 1px 12px #555;
    border-radius: 20px;
    width: 115px;
    height: 115px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white;
}

.container-voiture-index:nth-child(3){
    border: 2px solid orange;
    box-shadow: 1px 1px 12px #555;
    border-radius: 20px;
    width: 115px;
    height: 115px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white;
}

.container-voiture-index:nth-child(4){
    border: 2px solid orange;
    box-shadow: 1px 1px 12px #555;
    border-radius: 20px;
    width: 115px;
    height: 115px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white;
}*/

.voiture-index {
    color: orange;
    font-size: 70px;
    padding: 2px;
}

/*.button-publication{
    display: block;
    font-size: 34px;
    border-radius: 20px;
    background-color: orange;
    border: 1px solid #ffbc40;
    color: white;
    cursor: pointer;
    margin-top: 6%;
    margin-left: auto;
    margin-right: auto;
    text-transform: uppercase;
    font-family: "Open Sans Condensed",sans-serif;
    font-weight: 700;
    padding: 27px 20px;

}*/

.button-repondre-annonce {
    display: block;
    font-size: 34px;
    border-radius: 20px;
    background-color: orange;
    border: 1px solid #ffbc40;
    color: white;
    cursor: pointer;
    margin-top: 6%;
    margin-left: auto;
    margin-right: auto;
    text-transform: uppercase;
    font-family: "Open Sans Condensed", sans-serif;
    font-weight: 700;
    padding: 27px 20px;

}

.container-btn-ccm {
    width: 300px;
    margin-left: auto;
    margin-right: auto;
}

.comment {
    font-size: 25px;
    color: orange;
}

.comment2 {

    font-size: 25px;
    color: orange;
    margin-top: 12%;
    margin-bottom: 4% !important;
    text-align: center;
    font-weight: 500;

}

@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400');

.bg,
.button {
    width: 50px;
    height: 50px;
    border-radius: 100%;
}

@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400');

.bg2,
.button2 {
    width: 50px;
    height: 50px;
    border-radius: 100%;
    margin-left: auto;
    margin-right: auto;
}

.bg {
    animation: pulse 1.2s ease infinite;
    background: #ffa500;
}

.bg2 {
    animation: pulse 1.2s ease infinite;
    background: #ffa500;
}

.button {
    width: 50px;
    height: 50px;
    border-radius: 100%;
}

.button {
    margin-top: -50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    background: #ffa500;
    background-size: 18px;
    cursor: pointer;
    outline: none;
}

.button a {
    position: absolute;
    color: #FFF;
    font-size: 17px;
}

.fleche {
    width: 30%;
    height: 30%;
}

@keyframes pulse {
    0% {
        transform: scale(1, 1);
    }

    50% {
        opacity: 0.3;
    }

    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

/*.container-formulaire-connexion{
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
}*/

/*.formulaire-connexion{
    margin-left: 10%;
    height: 70%;
    width: 80%;
    text-align: center;
}*/

/*.container-formulaire-connexion input{
    border: 2px solid orange!important;
}*/

/*.titre-connexion{
    color: orange;
    font-weight: bold;
    font-size: 25px;
    margin-bottom: 20px!important;
    margin-top: 14px;
}*/

/*.texte-pas-inscrit{
    color: #404041;
    font-size: 15px;
    text-align: left;
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 10px!important;
}*/

/*.btn-mdp-oublie{
    display: block;
    color: #404041;
    font-size: 15px;
    text-align: left;
    font-weight: bold;
}*/

/*.button-inscription-particulier-mobile{
    color: orange!important;
    text-decoration: underline red;
    font-size: 15px!important;
    margin-left: 15px;
    cursor: pointer!important;
}*/

/*.btn-connexion{
    background-color: #ffa500!important;
}*/

/*.icone-fermer {
    color: orange!important;
    font-size: 30px;
    position: absolute;
    top: -4px;
    right: 20px;
    cursor: pointer;
}*/

/*.icone-fermer-particulier{
    color: orange!important;
    font-size: 30px;
    position: absolute;
    top: 2%;
    right: 4%;
    cursor: pointer;
}*/


.container-formulaire-inscription-particulier {
    display: none;

}

.container-formulaire-inscription-particulier-js {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    overflow: auto;

}

/*.formulaire-inscription-particulier{
    padding-top: 6%;
    margin-left: 10%;
    height: auto;
    width: 80%;
    text-align: center;
}*/

.formulaire-inscription-mecano {
    padding-top: 6%;
    margin-left: 10%;
    height: 70%;
    width: 80%;
    text-align: center;
}

.select-statue-inscription {
    display: none;
}

/*.container-formulaire-inscription-particulier-js p{
    color: orange;
    font-weight: bold;
    font-size: 25px;
    margin-bottom: 7%!important;
}*/

/*.container-formulaire-inscription-particulier-js input{
    border: 2px solid orange!important;
}

.container-formulaire-inscription-particulier-js select{
    border: 2px solid orange!important;
}*/

/*.btn-inscription-particulier{
    margin-top: 6%;
    background-color: #ffa500!important;
}*/

/*.msg-creer-compte{
    color: red!important;
    font-size: 20px!important;
    margin-bottom: 2%!important;
    display: none;
}*/

.container-formulaire-inscription-mecano {
    display: none;

}

.container-formulaire-inscription-mecano-js {
    display: block;
    position: absolute;
    top: 19%;
    left: 66%;
    width: 20%;
    height: auto;
    border: 2px solid orange;
    border-radius: 20px;
}



.container-formulaire-inscription-mecano-js p {
    color: orange;
    font-weight: bold;
    font-size: 1.5vw;
    margin-bottom: 7% !important;
}

.container-formulaire-inscription-mecano-js input {
    border: 2px solid orange !important;
}

.btn-inscription-mecano {
    margin-top: 6%;
    background-color: #ffa500 !important;
}

.overlay-popup-aide {
    position: fixed;
    bottom: 22%;
    left: 0;
    height: 60%;
    width: 40%;
    z-index: 9;
    background-color: #000000bd;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    cursor: pointer;

}

.overlay-popup-aide-js {
    left: -36%;
    transition: 3s;
}

.overlay-popup-aide:hover {
    left: 0;
}


.overlay-popup-aide svg {
    color: orange;
    font-size: 40px;
    position: absolute;
    right: 23px;
}

.popup-aide {
    height: 80%;
    width: 80%;
    z-index: 10;
    background-color: white;
    border: 2px solid orange;
    border-radius: 20px;

}

.container-popup-aide1,
.container-popup-aide2,
.container-popup-aide3,
.container-popup-aide4 {
    margin-left: 10%;
    margin-right: 10%;
    margin-top: 25px;
}

.container-popup-aide1 h1,
.container-popup-aide2 h1,
.container-popup-aide3 h1,
.container-popup-aide4 h1 {
    padding-top: 3%;
    text-align: center;
    font-family: "Open Sans Condensed", sans-serif;
    font-weight: 700;
    color: #404041;
    font-size: 20px;
}

.container-popup-aide1 h2,
.container-popup-aide2 h2,
.container-popup-aide3 h2,
.container-popup-aide4 h2 {
    padding-top: 3%;
    text-align: center;
    font-family: "Open Sans Condensed", sans-serif;
    font-weight: 700;
    color: #404041;
    font-size: 20px;
}

.container-popup-aide1 span,
.container-popup-aide2 span,
.container-popup-aide3 span,
.container-popup-aide4 span {
    color: orange;
}

.container-popup-aide1 p,
.container-popup-aide2 p,
.container-popup-aide3 p,
.container-popup-aide4 p {
    font-family: "Open Sans Condensed", sans-serif;
    font-weight: 700;
    color: #404041;
    font-size: 17px;
}

/*.btn-popup-aide1,
.btn-popup-aide2,
.btn-popup-aide3,
.btn-popup-aide4{
    border-radius: 7px;
    padding: 0px 20px;
    margin-left: auto;
    margin-right: auto;
    background-color: orange;
    border: 1px solid #ffbc40;
    height: 40px;
    display: block;
    color: white;
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
    margin-top: 30px;
}*/

.overlay-popup-inscription-erreur {
    display: none;
    position: fixed;
    top: 0;
    height: 100%;
    width: 100%;
    z-index: 9;
    background-color: #000000bd;
}


.overlay-popup-inscription {
    display: none;
    position: fixed;
    top: 0;
    height: 100%;
    width: 100%;
    z-index: 9;
    background-color: #000000bd;
}

.popup-inscription {
    margin: auto;
    height: 80%;
    width: 500px;
    z-index: 10;
    background-color: white;
    border: 2px solid orange;
    border-radius: 20px;
    margin-top: 5%;
}

.overlay-popup-connexion-erreur {
    display: none;
    position: fixed;
    top: 0;
    height: 100%;
    width: 100%;
    z-index: 9;
    background-color: #000000bd;
}

.overlay-popup-connexion {
    display: none;
    position: fixed;
    top: 0;
    height: 100%;
    width: 100%;
    z-index: 9;
    background-color: #000000bd;
}

/*.popup-connexion{
    margin-top: 16%;
    margin-left: auto;
    margin-right: auto;
    min-height: 338px;
    width: 500px;
    z-index: 10;
    background-color: white;
    border: 2px solid orange;
    border-radius: 20px;
}*/




#scene {
    width: 100%;
    height: 100%;
}

.img-mecano {
    margin-left: 15%;
    width: 60%;

}

.carnet {
    top: 5% !important;
    left: 63% !important;
}

.cle2 {
    top: 5% !important;
    left: 80% !important;
}

.tournevis {
    top: 29% !important;
    left: 90% !important;
}

.huile {
    top: 70% !important;
    left: 85% !important;
}

.stylo {
    top: 90% !important;
    left: 80% !important;
}

.triangle {
    top: 87% !important;
    left: 3% !important;
}

.cligno {
    top: 65% !important;
    left: 6% !important;
}

.vis {
    top: 35% !important;
    left: 0% !important;
}

.cle {
    top: 5% !important;
    left: 6% !important;
}

.button-pub a {}






.button-publication-js {
    margin-top: 0.7% !important;
    height: 35px;
    width: 235px;
    font-size: 14px !important;
    position: fixed;
    top: 18px;
    left: 430px;
    border-radius: 7px !important;
    background-color: orange;
    border: 1px solid rgb(255, 188, 64);
    color: white;
    cursor: pointer;
    z-index: 8;
    padding: 7px 20px !important;
}

.button-publication-js-end {
    display: none;
}

.button-repondre-annonce-js {
    margin-top: 0.7%;
    height: auto;
    font-size: 21px;
    width: auto;
    position: fixed;
    top: 14px;
    left: 800px;
    max-width: 375px;
    border-radius: 7px;
    background-color: orange;
    border: 1px solid rgb(255, 188, 64);
    color: white;
    cursor: pointer;
    z-index: 8;
    padding: 7px 20px;
}

.button-repondre-annonce-js-end {
    display: none;
}



.container-explication {
    position: relative;
    background-color: white;
    overflow: hidden;
    height: 60%;

}


.comment-ca-marche {
    text-align: center;
    width: 100%;
    background-color: #daecff;
    padding-bottom: 40px;
}

.titre-pk-mobile {
    display: none;
}

.titre-comment {
    display: inline-block;
    font-size: 45px;
    text-transform: uppercase;
    font-family: "Open Sans Condensed", sans-serif;
    font-weight: 700;
    color: #404041;
    margin-bottom: 35px;
    margin-top: 50px;

}

.titre-comment-js {
    font-size: 60px;
    position: absolute;
    transition: 2s;
    top: 30%;
    left: 30%;
    text-transform: uppercase;
    font-size: 4.125em;
    font-family: "Open Sans Condensed", sans-serif;
    font-weight: 700;
    color: #404041;


}

.container-comment-marche {
    display: flex;
    flex-flow: row wrap;
}

.etape1 {
    text-align: center;
    width: 340px;
    border-radius: 167px;
    margin-left: auto;
}

.etape1 img {
    width: 170px;
}

.etape1-left {
    margin-left: 15%;
}



.etape1 p {
    font-family: "Open Sans Condensed", sans-serif;
    font-weight: 700;
    color: #404041;
    margin-top: 15px;
}

.etape2 {
    text-align: center;
    width: 340px;
    border-radius: 167px;
    margin-left: 10%;
    margin-right: 10%
}

.etape2 img {
    width: 170px;
}



.etape2 p {
    font-family: "Open Sans Condensed", sans-serif;
    font-weight: 700;
    color: #404041;
    margin-top: 15px;
    width: 90%;
    margin-left: 5%;
    margin-right: 5%
}

.etape3 {
    text-align: center;
    width: 340px;
    margin-right: auto;

}

.etape3 img {
    width: 170px;
}

.etape3 p {
    font-family: "Open Sans Condensed", sans-serif;
    font-weight: 700;
    color: #404041;
    margin-top: 15px;
}

.confiance {

    text-align: center;
    width: 100%;
    background-color: #fffad6;
    padding-bottom: 80px;

}

.titre-pk {

    display: inline-block;
    font-size: 45px;
    text-transform: uppercase;
    font-family: "Open Sans Condensed", sans-serif;
    font-weight: 700;
    color: #404041;
    margin-bottom: 8%;
    margin-top: 100px;

}


.container-temps {
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    align-items: center;

}

.container-img-temps {
    width: 50%;
    padding-left: 200px;
}


.img-temps {
    width: 380px;
    height: 300px;
    border-radius: 5px;
}

.container-texte-temps {
    width: 50%;
    padding-top: 50px;
    padding-right: 200px;
}

.titre-temps {
    width: 592px;
    text-transform: uppercase;
    font-size: 40px;
    font-family: "Open Sans Condensed", sans-serif;
    font-weight: 700;
    color: #404041;
    text-align: left !important;
    margin-left: auto;
    margin-right: auto;
}

.titre-temps span {
    color: orange;
}

.texte-temps {
    margin-left: auto;
    margin-right: auto;
    width: 592px;
    text-align: left !important;
    font-family: "Open Sans Condensed", sans-serif;
    font-weight: 700;
}

.container-tel {
    margin-top: 80px;
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
}

.container-img-tel {
    width: 50%;
    padding-right: 200px;
}


.img-tel {
    width: 440px;
    height: 330px;
}

.container-texte-tel {
    width: 50%;
    padding-top: 50px;
    padding-left: 200px;
}

.titre-tel {
    width: 592px;
    text-transform: uppercase;
    font-size: 40px;
    font-family: "Open Sans Condensed", sans-serif;
    font-weight: 700;
    color: rgb(64, 64, 65);
    margin-left: auto;
    margin-right: auto;
    text-align: left !important;
}

.titre-tel span {
    color: orange;
}

.texte-tel {
    margin-left: auto;
    margin-right: auto;
    width: 592px;
    text-align: left !important;
    font-family: "Open Sans Condensed", sans-serif;
    font-weight: 700;
}


.container-argent {
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    margin-top: 80px;
    align-items: center;

}

.container-img-argent {
    width: 50%;
    padding-left: 200px;
}

.img-argent {
    width: 345px;
    height: 286px;
}

.container-texte-argent {
    width: 50%;
    padding-top: 50px;
    padding-right: 200px;
}

.titre-argent {
    width: 592px;
    text-transform: uppercase;
    font-size: 40px;
    font-family: "Open Sans Condensed", sans-serif;
    font-weight: 700;
    color: rgb(64, 64, 65);
    margin-left: auto;
    margin-right: auto;
    text-align: left !important;
}

.titre-argent span {
    color: orange;
}

.texte-argent {
    margin-left: auto;
    margin-right: auto;
    width: 592px;
    text-align: left !important;
    font-family: "Open Sans Condensed", sans-serif;
    font-weight: 700;
}


.bouton {
    color: black;
    /* couleur du texte */
    cursor: pointer;
    /* apparence du curseur */
    display: inline-block;
    /* autorise les marges sur un élément "a" */
    border: solid 2px white;
    /* applique une bordure rouge */
    padding: 5px;
    /* espace entre la bordure et le texte */
    background-color: #00a4ff;
    text-decoration: none;
    font-size: 71px;
    margin-left: 34%;

    margin-top: 2%;

}

.container-dernier-avis-annonce {
    width: 100%;
    margin-top: 200px;
    display: flex;
    flex-flow: row wrap;

}

.container-avis-index {
    width: 50%;
}

.container-avis-index h4 {
    text-align: center;
    margin-bottom: 50px;
    margin-top: 10px;
    width: 100%;
    text-transform: uppercase;
    font-family: "Open Sans Condensed", sans-serif;
    font-weight: 700;
    color: #404041;
    font-size: 45px;
}

.avis-index {
    display: flex;
    flex-direction: row;
    height: 140px;
    width: 600px;
    box-shadow: 1px 1px 12px #555;
    margin-right: auto;
    border-radius: 26px;
    margin-left: auto;
    background-color: white;
}

.avis-index img {
    height: 70%;
    width: 80%;
    border-radius: 20px;
    margin-top: 6%;
}

.avis-avatar-prenom-index {
    flex-direction: column;
    width: 120px;
    height: 100%;
    text-align: center;

}

.avis-avatar-prenom-index p {
    font-size: 20px;
}

.avis-etoile-avis-index {
    width: 480px;
    font-size: 20px;
}

.container-annonce-index {
    width: 50%;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
}

.container-annonce-index h4 {
    text-align: center;
    margin-bottom: 50px;
    margin-top: 10px;
    width: 100%;
    text-transform: uppercase;
    font-family: "Open Sans Condensed", sans-serif;
    font-weight: 700;
    color: #404041;
    font-size: 45px;
}

.annonce-index {
    position: relative;
    box-shadow: 1px 1px 12px #555;
    height: 300px;
    width: 320px;
    background-color: white;
    margin-left: 10px;
    margin-top: 1px;
    border-radius: 86px;
    cursor: pointer;
    margin-bottom: 7px;
    text-align: center;
}

.titre-petite-annonce-index {

    font-size: 25px;
    font-weight: bold;
    margin-top: 15px;
    text-align: center;
}

.container-prenom-nom-petit-prix-index {
    width: 100%;
    margin-top: 10px;
    overflow: hidden;
}

.marque-petite-annonce-index {
    float: left;
    font-size: 19px;
    margin-left: 16px;
    font-weight: bold;

}

.modele-petite-annonce-index {
    float: left;
    font-size: 19px;
    margin-left: 30px;
    font-weight: bold;

}


.icone-vehicule-index {
    font-size: 95px;
    margin-top: 20px;
    color: orange;

}

.container-petit-prix-index {
    width: 100%;
    margin-top: 5px;
    display: flex;
    flex-direction: row;
}

.prix1-petite-annonce-index {
    font-size: 30px;
    margin-left: auto;
    text-transform: uppercase;
    font-family: "Open Sans Condensed", sans-serif;
    font-weight: 700;
    color: #46d5fa;

}

.prix2-petite-annonce-index {
    font-size: 30px;
    margin-right: auto;
    text-transform: uppercase;
    font-family: "Open Sans Condensed", sans-serif;
    font-weight: 700;
    color: #46d5fa;

}

/* .icone-pos-index {
    color: red;
    font-size: 30px;
}

.p-ville-petite-annonce-index {
    text-align: center;
    margin-top: 5px;
    text-transform: capitalize;
    font-size: 18px;
    font-weight: bold;
} */


/*----------------------ville----------------------------*/

.container-ville {
    background-color: #404041;
    width: 100%;

}

.container-ville h1 {
    padding-top: 1%;
    text-align: center;
    font-size: 40px;
    color: #fffad6;
}

.container-liste-ville {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    width: 100%;
    margin-top: 35px;
}

.container-liste-ville ul {
    list-style-type: none;
    color: #fffad6;
}

.liste-ville:nth-child(1) {
    width: 250px;
}

.liste-ville:nth-child(2) {
    width: 250px;
}

.liste-ville:nth-child(3) {
    width: 250px;
}

.liste-ville:nth-child(4) {
    width: 250px;
}

.container-liste-ville li {
    font-family: "Open Sans Condensed", sans-serif;
    font-weight: 700;
    font-size: 18px;

}

.icone-ville {
    color: orange;
    font-size: 1.5rem;
    margin-right: 10px;
}

/*-----------------newsletter---------------------------------*/

.newsletter {
    height: 90px;
    width: 100%;
    background-color: orange;
    display: flex;
    flex-direction: row;
    padding: 22px;
    margin-bottom: 3%;
}

.container-text-newsletter {
    width: 40%;
}

.container-text-newsletter p {
    color: white;
    font-size: 30px;
    text-align: center;
    margin-bottom: 5px !important;
}

.container-text-newsletter i {
    color: white;
    font-size: 2rem;
    text-align: center;
    margin-bottom: 5px !important;
}

.container-form-newsletter {
    width: 60%;
}

.formulaire-newsletter {
    height: 100%;
    position: relative;
    width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.email-newsletter {
    width: 100% !important;
    height: 100% !important;
    border-radius: 20px !important;

}

.btn-newsletter {
    position: absolute;
    top: 0%;
    right: 0;
    height: 100%;
    background-color: #46d5fa;
    color: white;
    border: 0;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    cursor: pointer;
    width: 148px;
    font-size: 20px;
}

.fa-arrow-right {
    margin-left: 2%;
}

.text-categorie {

    text-transform: uppercase;
    font-size: 80px;
    font-family: "Open Sans Condensed", sans-serif;
    color: #00dbf3;
    font-weight: bold;
    text-align: center;
    margin-top: 11%;
}

.text-categorie-js {

    display: none;
}



.text-remplir-form {

    display: none;
}

.text-remplir-form-js {

    text-transform: uppercase;
    font-size: 65px;
    font-family: "Open Sans Condensed", sans-serif;
    color: #00dbf3;
    font-weight: bold;
    text-align: center;
    margin-top: 7%;
}

.text-dispo-form {

    display: none;
}

.text-dispo-form-js {

    text-transform: uppercase;
    font-size: 4.125em;
    font-family: "Open Sans Condensed", sans-serif;
    color: #00dbf3;
    font-weight: bold;
    text-align: center;
    margin-top: 6%;
}

.text-recap-form {

    display: none;
}

.text-recap-form-js {

    text-transform: uppercase;
    font-size: 4.125em;
    font-family: "Open Sans Condensed", sans-serif;
    color: #00dbf3;
    font-weight: bold;
    text-align: center;
    margin-top: 7%;
}

.btn-precedent-categorie

/*,
.btn-precedent-liste-reparation*/
    {
    display: none;
    border-radius: 3px;
    background-color: orange;
    border: 1px solid #ffbc40;
    width: 100px;
    color: white;
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 33px;
}

/*#text-pre-annonce{
    width: 100%;
    text-align: center;
    padding-bottom: 70px;
    padding-top: 160px;
    background-color: #404041;
}

#text-pre-annonce h1{
color: #ffbc40;
}

#text-pre-annonce p{
    width: 912px;
    margin: auto;
    margin-top: 40px;
    font-weight: 500;
    color: white;
    font-size: 18px;
}*/

/*#etape-1-annonce{
    color: black;
    width: 100%;
    text-align: center;
    padding: 40px 20px 50px 20px;
    background-color: #fffad6;
}

#etape-1-annonce h2{
    margin-bottom: 30px;
    font-size: 40px;
    color: #84d5fb;
}

#etape-1-annonce h3{
    margin-bottom: 20px;
    font-size: 30px;
        color: #404041;
}

.etape-1-annonce-text{
    color: #404041;
    font-weight: 500;
}

#etape-1-annonce p{
    margin-bottom: 10px;
    font-size: 17px;
}*/

.i-camping-car-white {
    display: none;
}

/*.trait-noir-publier{
    margin-right: auto;
    margin-left: auto;
    width: 60%;
    border: 1px solid #404041;
}*/

/* #etape-2-annonce{
    display: none;
    width: 100%;
    padding: 20px;
    background-color: #fffad6;
} */

/* #etape-2-annonce h2{
    margin-bottom: 30px;
    font-size: 40px;
    color: #84d5fb;
    margin-top: 30px;
    text-align: center;
} */

/* #etape-2-annonce span{
    color: orange;
}

#etape-2-annonce h3{
    margin-bottom: 20px;
    font-size: 30px;
    color: #404041;
    text-align: center;
}

.etape-2-annonce-text{
    color: #404041;
    font-weight: 500;
}
 */
/* #etape-3-annonce {
    width: 100%;
    padding: 20px;
    background-color: #fffad6;
}

#etape-3-annonce h2 {
    margin-bottom: 30px;
    font-size: 40px;
    color: #84d5fb;
    margin-top: 30px;
    text-align: center;
}

#etape-3-annonce h3 {
    margin-bottom: 20px;
    font-size: 30px;
    color: #404041;
    text-align: center;
}

.etape-3-annonce-text {
    color: #404041;
    font-weight: 500;
    text-align: center;
}
 */

.titre-voiture,
.titre-moto,
.titre-pro,
.titre-nautique {
    display: none;
}

/* #etape-2-annonce p{
    text-align: center;
} */

/*.container-vehicule{
    overflow: hidden;
    width: 938px;
    margin: auto;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    margin-top: 70px;
}*/

/* .container-vehicule-js {
    display: inline-block;
    position: absolute;
    top: 26%;
    left: 45%;
}
 */
/* .container-vehicule a:hover{
    text-decoration: none;
} */

.container2-vehicule-js {
    width: 100%;
}

.icone-vehicule-categorie-js {
    font-size: 70px;
    color: orange;
}

/* #form-voiture,
#form-moto,
#form-vehicule-pro,
#form-camping-car{

    overflow: hidden;
    padding: 15px;
    margin-left: auto;
    margin-right: auto;
} */

.form-voiture-js {
    overflow: hidden;
    padding: 15px;
}

.form-voiture-calandar {
    position: absolute;
    opacity: 0;
    width: 0px !important;
    height: 0px !important;
}


/*.container-voiture,
.container-moto,
.container-vehicule-pro,
.container-camping-car{

    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 1px 1px 12px #555;
    height: 100%;
    width: 100%;
    background-color: white;
    border-radius: 25px;
    cursor: pointer;
    border: 2px solid orange;

}*/

.icone-vehicule-categorie {
    width: 100%;
    font-size: 65px;
    color: orange;

}

/*.container-voiture-js,
.container-moto-js,
.container-vehicule-pro-js,
.container-camping-car-js {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    border: 2px solid #00dbf3;
    box-shadow: 1px 1px 12px #555;
    border-radius: 17px;
    margin-left: 1%;
}*/

/*.text-voiture,
.text-moto,
.text-vehicule-pro,
.text-camping-car{

    z-index: 999;
    display: none;
}*/

.image-voiture,
.image-moto,
.image-bateau,
.image-vehicule-agricole {

    width: 100%;

}

.image-voiture {

    margin-top: 23%;
}

.image-moto {

    margin-top: 5%;
}

.image-bateau {

    margin-top: 16%;
}

.image-vehicule-agricole {

    margin-top: 3%;
}

.image-voiture-js,
.image-moto-js,
.image-scooter-js,
.image-bateau-js,
.image-vehicule-agricole-js,
.image-tondeuse-js {

    height: 100%;
    width: 100%;

}


.i-voiture-hover,
.i-moto-hover,
.i-vehicule-pro-hover,
.i-camping-car-hover {
    display: none;
}

.i-voiture-checked,
.i-moto-checked,
.i-vehicule-pro-checked,
.i-camping-car-checked {
    color: white !important;
}


/*.container-voiture:hover,
.container-moto:hover,
.container-vehicule-pro:hover,
.container-camping-car:hover{

    background-color: white;

}*/

/*.container-voiture:hover .text-voiture,
.container-moto:hover .text-moto,
.container-vehicule-pro:hover .text-vehicule-pro,
.container-camping-car:hover .text-camping-car{
    display: block;
    text-transform: uppercase;
    font-size: 14px;
    font-family: "Open Sans Condensed",sans-serif;
    color: orange;
    font-weight: bold;
}*/

/* .container-voiture-clique,
.container-moto-clique,
.container-vehicule-pro-clique,
.container-camping-car-clique{
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 1px 1px 12px #555;
    height: 100%;
    width: 100%;
    background-color: orange;
    border-radius: 25px;
    cursor: pointer;
    border: 2px solid white;
}
 */
/* #container-form-description-voiture,
#container-form-description-moto,
#container-form-description-vehicule-pro,
#container-form-description-camping-car {
    background: #404041;
    padding: 60px 30px 30px 30px !important;
    margin: 40px auto 0 !important;
    max-width: 1300px;
    border-radius: 10px;
}
 */
#next-form-description-voiture,
#next-form-description-moto,
#next-form-description-vehicule-pro,
#next-form-description-camping-car {
    display: none;
}

#next-form-dispo-voiture,
#next-form-dispo-moto,
#next-form-dispo-vehicule-pro,
#next-form-dispo-camping-car {
    display: none;
}

#terminer-form-mobile-voiture,
#terminer-form-mobile-moto,
#terminer-form-mobile-vehicule-pro,
#terminer-form-mobile-camping-car {
    display: none;
    margin-left: auto;
    margin-right: auto;
    background-color: var(--primary-color);
    border-radius: var(--border-radius);
    border: none;
    margin-top: 20px;
    align-items: center;
    color: var(--light);
    justify-content: center;
    height: 40px;
    gap: 15px;
    padding: 0 40px;
    cursor: pointer;
    scale: 1;
    transition: box-shadow 0.3s ease, background-color 2s ease, transform 1s ease;
}

#btn-confirmation-recap-voiture,
#btn-confirmation-recap-moto,
#btn-confirmation-recap-vehicule-pro,
#btn-confirmation-recap-camping-car {
    display: none;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 5%;

}

/* .form-annonces {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
} */

/* #form-vehicule-annonce-voiture {
    display: flex;
    flex-wrap: wrap;
    min-height: 340px;
    width: 490px;
    margin-right: 200px;
    text-align: left;
} */

/*#form-vehicule-annonce-voiture h1 {
    color: #ffbc40;
    font-size: 40px;
}

#form-vehicule-annonce-voiture label {
    color: white;
    font-size: 17px;
}*/

/* #form-vehicule-annonce-moto {
    display: flex;
    flex-wrap: wrap;
    height: 375px;
    width: 490px;
    margin-right: 200px;
    text-align: left;
}
 */
#form-vehicule-annonce-moto h1 {
    color: #ffbc40;
    font-size: 40px;
}


/* .container-descrip-cat {
    text-align: left;
    width: 530px;
} */

/*.pasInfo {
    font-size: 16px;
    color: #f35656;
}*/

/* .container-descrip-cat h1 {
    color: #ffbc40;
    font-size: 40px;
} */

/* .container-descrip-cat label {
    color: white;
    font-size: 17px;
}
 */
#autreAdressCat1,
#autreAdressCat2,
#autreAdressCat3 {
    display: none;
    width: 270px;
    margin-top: 5px;
}

#autreAdressCatMoto {
    display: none;
    width: 400px;
}

#autreAdressCatVehiculePro {
    display: none;
    width: 400px;
}

#autreAdressCatCampingCar {
    display: none;
    width: 400px;
}

#scrollTopCat {
    position: absolute;
    top: 0;
}

#scrollTopCat2 {
    position: absolute;
    top: 0;
}

.form-annonces-js {

    display: flex;
    flex-flow: row wrap;
    width: 100%;
    margin-top: 4%;
    margin-bottom: 8% !important;

}

.form-annonces-js h1{
    font-size: large;
    color: var(--third-color-lighter);
    padding: 50px 0 15px;
}


/* .input-form-vehicule {
    width: 48%;
    padding-left: 1%;
    padding-right: 1%;
}
 */

.form-description-diagnostique {
    height: 120px;
    width: 100%;
}



.container-form-marque-modele input,
.container-form-marque-modele select {

    box-shadow: 1px 1px 12px #555;
    border: 2px solid orange;
    color: orange !important;
    font-weight: bold;

}

.text-container-form-marque-modele {

    text-transform: uppercase;
    font-size: 50px;
    font-family: "Open Sans Condensed", sans-serif;
    color: #00dbf3;
    font-weight: bold;
    margin-bottom: 3% !important;

}

.container-form-marque-modele select {

    height: 30%;
    font-size: 30px;
    margin-top: 10%;

}

.container-form-marque-modele input {

    height: 30%;
    font-size: 30px;

}

.container-tout-titre-description {
    height: 100%;
    width: 380px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.text-container-form-titre-description {

    text-transform: uppercase;
    font-size: 50px;
    font-family: "Open Sans Condensed", sans-serif;
    color: #00dbf3;
    font-weight: bold;
    margin-bottom: 3% !important;

}

.container-form-titre-description {
    border: 2px solid #ffa500;
    position: relative;
    box-shadow: 1px 1px 12px #555;
    width: 100%;
    height: 290px;
    padding: 9%;
    border-radius: 10%;

}



.container-form-titre-description input::placeholder,
.container-form-titre-description textarea::placeholder {
    color: orange;
    font-weight: bold;
}

/* .titre-diagnostique {
    color: orange;
    font-size: 25px;
    font-weight: bold;

} */

.container-form-titre-description input {

    height: 30%;
    font-size: 30px;
    box-shadow: 1px 1px 12px #555;
    border: 2px solid orange;
    color: orange !important;
    font-weight: bold;

}

.container-form-titre-description textarea {

    height: 60% !important;
    font-size: 20px;
    box-shadow: 1px 1px 12px #555;
    border: 2px solid orange;
    color: orange !important;
    font-weight: bold;


}

.description-diagnostique {

    margin-top: 20% !important;

}

.container-tout-prix-bouton {
    height: 100%;
    width: 380px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.text-container-form-prix-bouton {

    text-transform: uppercase;
    font-size: 50px;
    font-family: "Open Sans Condensed", sans-serif;
    color: #00dbf3;
    font-weight: bold;
    margin-bottom: 3% !important;

}

.container-form-prix-bouton {
    border: 2px solid #ffa500;
    position: relative;
    box-shadow: 1px 1px 12px #555;
    width: 100%;
    height: 290px;
    padding: 9%;
    border-radius: 10%;

}



.container-form-prix-bouton input::placeholder {
    color: orange;
    font-weight: bold;
}

.container-form-prix-bouton input {

    height: 30%;
    font-size: 30px;
    border: 2px solid orange;
    box-shadow: 1px 1px 12px #555;
    color: orange !important;
    font-weight: bold;

}

.prix-diagnostique {
    position: absolute;
    top: 14%;
    left: 38%;
    color: #46d5fa;
    font-size: 3vw;
    font-weight: bold;

}

.container-form-prix-bouton button {

    height: 36%;
    font-size: 35px;
    width: 100%;
    margin-top: 14%;


}

.btn-form-prix-diagnostique {

    margin-top: 34% !important;

}

.btn-suivant-annonce {
    color: #fff !important;
    background-color: #ffa500 !important;
    border-color: #00dbf3 !important;
}

.btn-suivant-annonce:hover {
    color: #fff !important;
    background-color: #00dbf3 !important;
    border-color: #ffa500 !important;
}


.container-calendrier {
    display: none;
}

.container-calendrier-js {
    display: block;
}

.container-calendrier-js p {
    display: none;
}

table {
    border-collapse: unset !important;
}

.calendrier-categorie {
    width: 70% !important;
    margin-left: auto;
    margin-right: auto;
    border-radius: 20px;
    border: 9px solid orange !important;
    margin-top: 2%
}

.border-top-right-radius {
    border-top-right-radius: 8px;
}

.border-top-left-radius {
    border-top-left-radius: 8px;
}

.border-bottom-right-radius {
    border-bottom-right-radius: 8px;
}

.border-bottom-left-radius {
    border-bottom-left-radius: 8px;
}

/* th {
    border: 1px solid orange !important;
    font-weight: bold;
}

td {
    border: 1px solid orange !important;
    font-weight: bold;
}

.table td,
.table th {
    padding: .60rem !important;
} */

.btn-precedent-calandar {
    border-radius: 27px;
    background-color: orange;
    border: 1px solid #ffbc40;
    width: 100px;
    color: white;
    cursor: pointer;
    margin-left: 10%;
}

.btn-confirmer-calendrier {
    color: white;
    background-color: orange;
    margin-left: 45%;
    border: none;
    padding: 3px 10px;
    font-weight: bold;
    font-size: 33px;
    border-radius: 10px;
    margin-bottom: 10%;
    margin-top: 0%;
    cursor: pointer;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

#recap-annonce {
    flex-flow: row wrap;
    display: none;
    width: 100%;
    margin-bottom: 5%;
}
/*
#container-recap-text-annonce {
    width: 100%;
} */

#container-recap-titre-annonce {
    width: 100%;
    height: 150px;
}

/* .container-titre-annonce-recap {
    width: 100%;
    height: 100%;
    background-color: #fffad6;
    display: flex;
    justify-content: center;
    align-items: center;
} */

.container-titre-annonce-recap h2 {
    color: #ffbc40;
}

/* .container-titre-annonce-recap p {
    color: #66ccff;
    font-size: 40px;
    font-weight: 700;
} */

/* #container-vehicule-panne-recap-annonce {
    width: 100%;
    background-color: #404041;
    display: flex;
    flex-flow: row wrap;
    padding-top: 50px;
    padding-bottom: 50px;
} */

/* #container-recap-text-dispo-annonce {
    width: 100%;
    display: flex;
    flex-direction: row;
} */

/* .container-recap-panne {
    width: 500px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
} */

/* .container-description-annonce-recap {
    width: 500px;
    margin-left: 250px;
    padding-top: 50px;
    font-size: 18px;
    font-weight: 500;
    color: #ffbc40;
} */

/* .container-description-annonce-recap p {
    color: #66ccff;
} */

/* .container-piece-annonce-recap {
    margin-left: 250px;
    padding-top: 50px;
    font-size: 18px;
    font-weight: 500;
    color: #ffbc40;
} */

/* .container-piece-annonce-recap span {
    font-size: 25px;
    font-weight: 500;
    color: #66ccff;
} */

/* .container-lieu-annonce-recap {
    margin-left: 250px;
    padding-top: 50px;
    color: #ffbc40;
    width: 635px;
} */

/* .container-lieu-annonce-recap span {
    font-size: 25px;
    font-weight: 500;
    color: #66ccff;
} */

/* .container-dispo-jour-recap {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    padding-top: 50px;
} */

/* .container-dispo-heure-recap {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    padding-top: 50px;
}
 */
/* .container-recap-dispo h2 {
    font-size: 40px;
    color: #ffbc40;
    text-align: center;
    padding-top: 50px;
} */

/* .container-recap-panne h4 {
    text-align: center;
    font-size: 2vw;
    font-family: "Open Sans Condensed", sans-serif;
    color: #ffbc40;
    font-weight: bold;

} */

/* .recap-panne {
    padding-top: 2%;
    width: 100%;
    min-height: 250px;
    height: auto;
} */

.recap-panne2 {
    position: relative;
    padding-top: 2%;
    width: 100%;
    min-height: 30%;
    height: auto;
    border: 2px solid orange;
    border-radius: 22px;

}

.recap-panne3 {
    position: relative;
    padding-top: 2%;
    width: 100%;
    min-height: 250px;
    height: auto;
    border: 2px solid orange;
    border-radius: 14px;

}

.container-recap-dispo {
    display: none;
}

.container-recap-dispo h4 {
    text-align: center;
    font-size: 2vw;
    font-family: "Open Sans Condensed", sans-serif;
    color: #00dbf3;
    font-weight: bold;

}

.container-recap-panne-j-h {
    width: 100%;
    overflow: hidden;
}

.recap-panne-journee {
    color: orange;
    font-weight: bold;
    font-size: 1.2vw;
    margin-left: 4%;
    float: left;

}

.recap-panne-horaire {
    color: #67cdff;
    font-weight: bold;
    font-size: 1.2vw;
    margin-right: 8%;
    float: right;

}

/* #form-recap-panne p {
    color: #66ccff;
    font-weight: bold;
    font-size: 1.2vw;
    margin-left: 4%;
    clear: both;
} */

.btn-modifier-panne {
    position: absolute;
    bottom: 2%;
    left: 40%;
    border-radius: 7px;
    background-color: orange;
    border: 1px solid #ffbc40;
    color: white;
    cursor: pointer;
}

/* .btn-confirmation-recap {
    display: none;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2%;
    font-size: 2vw;
    padding: 3px 10px;
    text-transform: uppercase;
    font-weight: bold;
    border-radius: 10px;
    background-color: orange;
    border: 1px solid #ffbc40;
    color: white;
    cursor: pointer;
    margin-bottom: 50px;
} */

.container-recap-text-annonce {
    height: 100%;
    width: 40%;
    margin-left: 5%;
}

.container-recap-text-annonce span {
    font-weight: bold;
    font-size: 1.3vw;
}


.titre-recap-text-annonce {
    text-transform: uppercase;
    font-size: 2vw;
    font-family: "Open Sans Condensed", sans-serif;
    color: #00dbf3;
    font-weight: bold;
    text-align: center;
    margin-top: 2%;
}


.marque-recap-annonce {
    margin-left: 10%;
    font-size: 1.1vw;
}

.modele-recap-annonce {
    float: left;
    margin-left: 34%;
    font-size: 1.1vw;
}

.container-voiture-recap-annonce {
    margin-top: 2%;
    height: 8.5%;
    width: 12%;
    border: 2px solid #00dbf3;
    box-shadow: 1px 1px 12px #555;
    border-radius: 17px;
    margin-left: auto;
    margin-right: auto;
    clear: both;
    display: flex;
    justify-content: center;
    align-items: center;
}

.icone-vehicule-recap {
    font-size: 4vw;
    color: orange;

}

.description-recap-annonce {
    clear: both;
    margin-top: 2%;
    font-size: 1.1vw;
    margin-right: 5%;
    margin-left: 5%;
}

.container-recap-text-annonce h4 {
    text-align: center;
    font-size: 2vw;
    font-family: "Open Sans Condensed", sans-serif;
    color: #00dbf3;
    font-weight: bold;
}

.formulaire-profil-particulier,
.formulaire-profil-prestataire,
.formulaire-inscription-prestataire
/*.formulaire-avis*/ {

    margin-top: 10%;
    text-align: center;

}

#panne-voiture {
    display: none;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    width: 100%;
    margin-top: 110px;
}

#panne-moto {
    display: none;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    width: 100%;
    margin-top: 110px;
}

#panne-vehicule-pro {
    display: none;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    width: 100%;
    margin-top: 110px;
}

#panne-camping-car {
    display: none;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    width: 100%;
    margin-top: 110px;
}

#panne-voiture p {
    text-align: left;
}

/*.titre-et-boite-panne{
    width: 700px;
    display: flex;
    flex-direction: row;
    order: 2;
}*/

/*.liste-reparation{
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    width: 640px;
    order: 1;
}*/

.liste-reparation-moto {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    width: 640px;
    order: 1;
}

.text-choisir-panne {

    display: none;
}

.text-choisir-panne-js {

    text-transform: uppercase;
    font-size: 65px;
    font-family: "Open Sans Condensed", sans-serif;
    color: #00dbf3;
    font-weight: bold;
    margin-left: auto;
    margin-top: 2%;
}

/*.container-reparation-client{
    position: relative;
    width: 400px;
    min-height: 600px;
    height: auto;
    border-left: 20px solid orange;
    border-right: 20px solid orange;
    border-top: 30px solid orange;
    border-bottom: 30px solid orange;
    padding: 50px 10px 50px 10px;
    margin: auto;
    margin-top: 0;
    background-color: #ebfcfc;
    box-shadow: 1px 1px 12px #555;
    border-radius: 5px;
}*/

/*.container-reparation-client img{
    position: absolute;
    top: -75px;
    left: 76px;
}*/

/*#form-toute-panne{
    width: 100%;
    height: 100%;
    margin-bottom: 10%;
}*/

/*#form-toute-panne p{
    color: orange;
    font-weight: bold;
    font-size: 20px;
    border-bottom: 2px solid orange;
    padding-bottom: 10px;
    margin-top: 15px;
    text-align: start;
    width: 93%;
}*/

/*.corbeille-panne{
    color: orange;
    position: absolute;
    right: 4%;
    margin-top: -10%;
    cursor: pointer;
}*/

/*.btn-validation-panne{
    position: absolute;
    bottom: 20px;
    left: 21%;
    background-color: orange;
    color: white;
    cursor: pointer;
    font-size: 19px;
    padding: 6px 68px;
}*/

#erreur-validation-panne {
    color: red !important;
    margin-top: 24% !important;
    text-align: center !important;
}

/* .checked-panne{
    background-color: orange;
    color: white;
    border: 2px solid white;
} */

.checked-panne-i {
    color: white !important;
}

/*#form-toute-panne-moto{
    width: 100%;
    height: 100%;
    margin-bottom: 10%;
}

#form-toute-panne-moto p{
    color: orange;
    font-weight: bold;
    font-size: 20px;
    border-bottom: 2px solid orange;
    padding-bottom: 10px;
    margin-top: 15px;
    text-align: start;
    width: 93%;
}


#form-toute-panne-vehicule-pro{
    width: 100%;
    height: 100%;
    margin-bottom: 10%;
}

#form-toute-panne-vehicule-pro p{
    color: orange;
    font-weight: bold;
    font-size: 20px;
    border-bottom: 2px solid orange;
    padding-bottom: 10px;
    margin-top: 15px;
    text-align: start;
    width: 93%;
}

#form-toute-panne-camping-car{
    width: 100%;
    height: 100%;
    margin-bottom: 10%;
}

#form-toute-panne-camping-car p{
    color: orange;
    font-weight: bold;
    font-size: 20px;
    border-bottom: 2px solid orange;
    padding-bottom: 10px;
    margin-top: 15px;
    text-align: start;
    width: 93%;
}*/

#myForm2 {
    height: 100%;
}

.liste-reparation-bas {
    margin-bottom: 13% !important;
    margin-left: 12% !important;
    height: 17%;
}

/*.btn-reparation{
    box-shadow: 1px 1px 12px #555;
    height: 95px;
    margin-left: 2%;
    margin-top: 2%;
    width: 300px;
    border: 0;
    color: orange;
    font-weight: bold;
    font-size: 20px;
    border-radius: 15px;
    cursor: pointer;
    background-color: white;
    border: 2px solid orange;
}*/

/*#formPanne48{
    box-shadow: 1px 1px 12px #555;
    height: 95px;
    margin-left: 2%;
    margin-top: 2%;
    width: 300px;
    border: 0;
    color: orange;
    font-weight: bold;
    font-size: 20px;
    border-radius: 15px;
    cursor: pointer;
    background-color: white;
    float: left;
    margin-right: 0.3%;
    border: 2px solid orange;

}*/

/*.btn-reparation-devis{
    height: 100%;
    width: 100%;
    border: 0;
    color: orange;
    font-weight: bold;
    font-size: 20px;
    border-radius: 26px;
    cursor: pointer;
    background-color: white;
}*/

/* #panne-moto,
#panne-vehicule-pro,
#panne-camping-car {
    display: none;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    width: 100%;
    margin-top: 110px;
} */

/* TJR EN TEST */
.overlay-popup {
    display: none;
}

.overlay-popup-js {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    height: 100%;
    width: 100%;
    z-index: 9;
    background-color: #000000bd;
}

/*.popup{
    height: 740px;
    width: 1200px;
    z-index: 10;
    background-color: white;
}*/

/*container-text-popup{
    margin-left: 10%;
    margin-right: 10%;
}*/

/*.container-text-popup h1{
    padding-top: 3%;
    text-align: center;
    font-family: "Open Sans Condensed",sans-serif;
    font-weight: 700;
    color: #404041;
    font-size: 40px;
}*/

/*.container-text-popup h2{
    margin-top: 2%;
    text-align: center;
    font-family: "Open Sans Condensed",sans-serif;
    font-weight: 700;
    color: orange;
    font-size: 30px;
}

.container-text-popup span{
    color: orange;
}*/

/*.container-text-popup p{

    font-family: "Open Sans Condensed",sans-serif;
    font-weight: 700;
    color: #404041;
    font-size: 19px;
}

.text-important-popup{
    color: orange!important;
}

.container-text-popup button{
    border-radius: 7px;
    padding: 0px 20px;
    margin-left: auto;
    margin-right: auto;
    background-color: orange;
    border: 1px solid #ffbc40;
    height: 40px;
    display: block;
    color: white;
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
}

.container-text-popup button:hover{
    border: 2px solid #ff9400;
}*/









.overlay-popup-etes-vous-sur1,
.overlay-popup-etes-vous-sur4,
.overlay-popup-etes-vous-sur5,
.overlay-popup-etes-vous-sur6 {
    display: none;
}

.overlay-popup-etes-vous-sur1-js,
.overlay-popup-etes-vous-sur4-js,
.overlay-popup-etes-vous-sur5-js,
.overlay-popup-etes-vous-sur6-js {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    height: 100%;
    width: 100%;
    z-index: 9;
    background-color: #000000bd;
}

/* .popup-etes-vous-sur1,
.popup-etes-vous-sur4,
.popup-etes-vous-sur5,
.popup-etes-vous-sur6 {

    z-index: 10;
    background-color: #fffad6;
    border-radius: 20px;
    padding: 5%;
} */

/* .container-text-popup-etes-vous-sur1,
.container-text-popup-etes-vous-sur4,
.container-text-popup-etes-vous-sur5,
.container-text-popup-etes-vous-sur6 {
    margin-left: 10%;
    margin-right: 10%;
} */

/* .container-text-popup-etes-vous-sur1 h1,
.container-text-popup-etes-vous-sur4 h1,
.container-text-popup-etes-vous-sur5 h1,
.container-text-popup-etes-vous-sur6 h1 {
    padding-top: 20px;
    text-align: center;
    font-family: "Open Sans Condensed", sans-serif;
    font-weight: 700;
    color: #404041;
    font-size: 35px;
} */

.text-popup-etes-vous-sur2,
.text-popup-etes-vous-sur3,
.text-popup-etes-vous-sur4,
.text-popup-etes-vous-sur5,
.text-popup-etes-vous-sur6 {
    display: none;
    padding-top: 28%;
    text-align: center;
    font-family: "Open Sans Condensed", sans-serif;
    font-weight: 700;
    color: var(--light);
    font-size: 23px;

}

.container-annuler-modifier-rdv-offre{
    display: none;
}

.container-btn-annuler-modifier-rdv-offre{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-bottom: 10%;
}

.container-modifier-rdv-offre{
    display: none;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 5%;
}


.text-annuler-modifier-rdv-offre1{
    color: var(--third-color);
    margin-bottom: 10%;
}

.text-annuler-modifier-rdv-offre2{
    color: var(--third-color);
    padding: 5%;
}

.container-modifier-rdv-offre h1{
    color: var(--third-color);
}

.container-modifier-rdv-offre h2{
    color: red;
    padding: 5% 7% 10% 7%;
    font-size: 12px;
}

.container-modifier-rdv-offre input{
    margin-bottom: 5%;
    border: 1px solid black;
}

.btn-valider-modifier-rdv-offre{
    border-radius: var(--border-radius);
    min-height: 40px;
    border: none;
    color: var(--grey-light);
    background-color: var(--third-color);
    scale: 1;
    margin: 10px 0;
    cursor: pointer;
    width: 100%;
}

.btn-retour-annuler-modifier-rdv-offre{
    display: none;
    color: var(--third-color);
    margin-bottom: 10%;
    cursor: pointer;
}

.container-confirmation-modifier-rdv-offre{
    display: none;
    padding: 5%;
}

.container-confirmation-modifier-rdv-offre h1{
    color: var(--third-color);
}


#date-preview{
    padding: 5% 7% 10% 7%;
    color: var(--third-color);
}

.container-btn-confirmation-modifier-rdv-offre{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.btn-non-confirmation-modifier-rdv-offre,
#btn-oui-confirmation-modifier-rdv-offre{
    border-radius: var(--border-radius);
    min-height: 40px;
    border: none;
    color: var(--grey-light);
    background-color: var(--third-color);
    scale: 1;
    margin: 10px 0;
    cursor: pointer;
    width: 100%;
}





.container-btn-etes-vous-sur1,
.container-btn-etes-vous-sur4,
.container-btn-etes-vous-sur5,
.container-btn-etes-vous-sur6 {
    display: flex;
    flex-flow: row;
    justify-content: center;
    margin-top: 45px;
}

/* .btn-oui-etes-vous-sur1,
.btn-oui-etes-vous-sur4,
.btn-oui-etes-vous-sur5 {
    font-size: 30px;
    padding: 3px 10px;
    font-weight: bold;
    border-radius: 10px;
    background-color: #1a8d1a;
    border: 1px solid #ffbc40;
    color: white;
    cursor: pointer;
    margin-right: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
} */

.container-btn-etes-vous-sur{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.btn-oui-etes-vous-sur2,
.btn-oui-etes-vous-sur3,
.btn-oui-etes-vous-sur4,
.btn-oui-etes-vous-sur5,
.btn-oui-etes-vous-sur6 {
    display: none;
    color: var(--third-color-lighter);
    border: none;
    font-size: small;
    padding: 11px 0;
    font-weight: bold;
    border-radius: 10px;
    cursor: pointer;
    width: 100px;
}

/* .btn-non-etes-vous-sur1,
.btn-non-etes-vous-sur4 {
    font-size: 30px;
    padding: 3px 10px;
    font-weight: bold;
    border-radius: 10px;
    background-color: #d32424;
    border: 1px solid #ffbc40;
    color: white;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
} */

.btn-non-etes-vous-sur2,
.btn-non-etes-vous-sur3,
.btn-non-etes-vous-sur4,
.btn-non-etes-vous-sur5,
.btn-non-etes-vous-sur6 {
    display: none;
    padding: 11px 0;
    font-weight: bold;
    border-radius: 10px;
    cursor: pointer;
    width: 100px;
    color: var(--third-color-lighter);
    border: none;
    font-size: small;
}

.btn-annuler-rdv-offre,
.btn-modifier-rdv-offre {
    border-radius: var(--border-radius);
    min-height: 40px;
    border: none;
    color: var(--grey-light);
    background-color: var(--third-color);
    scale: 1;
    margin: 10px 0;
    cursor: pointer;
}

/*.btn-reparation-liste{
    box-shadow: 1px 1px 12px #555;
    height: 95px;
    margin-left: 2%;
    margin-top: 2%;
    width: 300px;
    border: 0;
    color: orange;
    font-weight: bold;
    font-size: 20px;
    border-radius: 15px;
    cursor: pointer;
    background-color: white;
    border: 2px solid orange;
}*/

/* .liste-reparation-freinage,
.liste-reparation-direction,
.liste-reparation-entretien,
.liste-reparation-carrosserie,
.liste-reparation-peinture,
.liste-reparation-diagno-chauffage,
.liste-reparation-diagno-moteur,
.liste-reparation-diagno-freinage,
.liste-reparation-diagno-divers,
.liste-reparation-moteur,
.liste-reparation-clim,
.liste-reparation-echapement,
.liste-reparation-divers,
.liste-reparation-pneu,
.liste-reparation-embrayage,
.liste-reparation-diagno-demarrage,
.liste-reparation-diagno-suspension,
.liste-reparation-diagno-echapement,
.liste-reparation-chauffe-eau,
.liste-reparation-circuit-gaz,
.liste-reparation-circuit-eau {
    display: none;
    flex-flow: row wrap;
    justify-content: space-between;
    position: relative;
}

.liste-reparation-chaine-moto,
.liste-reparation-batterie-moto,
.liste-reparation-echapement-moto,
.liste-reparation-pneu-moto,
.liste-reparation-freinage-moto,
.liste-reparation-moteur-moto,
.liste-reparation-suspension-moto,
.liste-reparation-revision-moto,
.liste-reparation-diagno-batterie-moto,
.liste-reparation-diagno-freinage-moto,
.liste-reparation-diagno-electronique-moto,
.liste-reparation-divers-moto
{
    display: none;
    flex-flow: row wrap;
    justify-content: space-between;
    position: relative;
} */

.btn-outline-dark {
    background-color: white !important;
}

.btn-outline-dark:hover {
    background-color: black !important;
}

#third-detail {
    display: none;
}

.hard {
    background-color: #0793bd;
}



.titre-question-formulaire {

    font-size: 1.3vw;
    text-align: center;
    font-weight: bold;
    margin-top: 6%;
    margin-bottom: 7%;
}

.container-marque-formulaire {

    margin-bottom: 4%;
    margin-top: 4%;
    margin-left: 10%;


}

.marque-formulaire {

    font-size: 1.6vw;
    margin-left: 22%;

}

#autre-marque-formulaire {

    font-size: 1.5vw;
    margin-left: 22%;
    width: 48%;
    display: none;

}

#text-autre-marque {

    font-size: 1.5vw;
    margin-left: 3%;
    width: 48%;
    display: none;
}

.text-autre-marque-formulaire {

    font-size: 1.6vw;
    margin-left: 22%;

}

.btn-radio-marque {

    width: 6%;
    height: 23px;
    margin-left: 10%;
    margin-bottom: 1px;
}

.btn-radio-autre-marque {

    width: 6%;
    height: 23px;
    margin-left: 10%;
    margin-bottom: 1px;
}

.container-modele-formulaire {

    height: 20%;
    width: 100%;
}

.textarea-modele {
    height: 45%;
    margin-left: 22%;
    width: 55%;
    margin-top: 8%;
    text-align: center;
}

.btn-radio-piece {

    width: 6%;
    height: 23px;
    margin-bottom: 1px;
}

.container-piece-formulaire {
    margin-bottom: 18%;
    margin-top: 19%;
    margin-left: 4%;
}

.piece-formulaire {

    font-size: 1.2vw;
    margin-left: 4%;
}

#container-detail-formulaire {

    height: 60%;
    width: 100%;
    margin-top: 16%;
}

.textarea-detail {
    height: 52%;
    margin-left: 5%;
    width: 90%;
    margin-top: 8%;
    text-align: center;
}

#container-localisation-formulaire {
    height: 20%;
    width: 100%;
    margin-top: 11%;
    margin-bottom: 11%;

}

.textarea-localisation {
    height: 40%;
    margin-left: 14%;
    width: 73%;
    margin-top: 11%;
    text-align: center;
}

#container-prix-formulaire {

    height: 20%;
    width: 100%;
    margin-bottom: 23%;
}

.textarea-prix {
    height: 45%;
    margin-left: 22%;
    width: 55%;
    margin-top: 8%;
    text-align: center;
}


.container-annonce-particulier {
    margin-top: 5%;
    margin-left: 10%;
    border: 2px solid black;
    height: 150px;
    width: 50%;
}

.container-text-annonce-particulier {
    float: left;
    border-right: 2px solid black;
    width: 75%;
    height: 100%;
}

.container-prix-annonce-particulier {
    float: left;
    width: 24%;
    height: 100%;
}

.photo-user-annonce-particulier {
    width: 13%;
    float: left;
}

.user-annonce-particulier {
    font-size: 5vw;
    margin-left: 16%;
}

.prix-annonce-particulier {
    margin-top: 21%;
    text-align: center;
    font-size: 3vw;
}

.btn-precedent-form {

    border-radius: 27px;
    background-color: orange;
    border: 1px solid #ffbc40;
    width: 100px;
    color: white;
    cursor: pointer;
    margin-left: 10%;

}



.form-prix1 {
    width: 49% !important;
    float: left;
    margin-bottom: 5%;
    margin-right: 2%;
}

.form-prix2 {
    width: 49% !important;
    float: left;
    margin-bottom: 5%;
}

/*------------------------Profil--------------------------------*/

/*-------------------------Profil Public----------------------------*/
.container-profil-monprofil {
    margin-bottom: 5%;
    display: flex;
    flex-flow: row wrap;

}

/*#container-menu-profil{
    width: 100%;
    background-color: #404041;
    padding-top: 30px;

}*/

/*.menu-profil{
    box-shadow: 1px 1px 12px #555;
    width: 785px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 15px;
    border: 2px solid orange;
    background-color: white;
    margin-bottom: 0;
}*/

/*.menu-profil-mobile{
    display: none;
}*/

/*.btn-profil-monprofil,
.btn-mesannonces-profil,
.btn-mesoffres-profil,
.btn-mesreponse-profil,
.btn-historique-profil,
.btn-mesrdv-profil{
    border: 0;
    font-size: 20px;
    margin-left: 2%;
    background-color: white;
    color: #404041;
    cursor: pointer;
    font-weight: bold;
    border-right: 1px solid orange;
    padding-right: 5%;
}

.btn-profil-monprofil{

margin-left: 5%;
}

.btn-historique-profil{
    border: 0!important;

}

.btn-profil-monprofil:hover,
.btn-mesannonces-profil:hover,
.btn-mesoffres-profil:hover,
.btn-mesrdv-profil:hover,
.btn-mesreponse-profil:hover,
.btn-historique-profil:hover{
    background-color: white;
    color: orange;

}

.btn-profil-monprofil-mecano ,
.btn-mesannonces-profil-mecano ,
.btn-mesreponse-profil-mecano ,
.btn-historique-profil-mecano {
    border: 0;
    font-size: 1vw;
    margin-left: 5%;
    background-color: white;
    color: black;
    cursor: pointer;
    font-weight: bold;
    border-right: 1px solid orange;
    padding-right: 5%;
}

.btn-historique-profil-mecano {
    border: 0!important;

}

.btn-profil-monprofil-mecano:hover,
.btn-mesannonces-profil-mecano:hover,
.btn-mesreponse-profil-mecano:hover,
.btn-historique-profil-mecano:hover{
    background-color: white;
    color: orange;

}*/

/*#container-profil{
    padding-top: 100px;
    width: 100%;
    background-color: #fffad6;
}*/

/*.container-info-perso{
    width: 60%;
    margin-left: auto;
    margin-right: auto;
}

.container-info-perso h1{
    text-align: center;
    margin-bottom: 3%;
    font-family: "Open Sans Condensed",sans-serif;
    color: #404041;
    font-weight: bold;
    font-size: 40px;

}

.container-info-perso p{
    font-size: 20px;
    font-weight: 700;
}*/

/*#container-total-repa{
    margin-top: 60px;
}

#container-total-repa h2{
    text-align: center;
    font-size: 25px;
    color: #ffbc40;
    font-weight: 700;
    border: 2px solid #404041;
    background-color: #404041;
    width: 360px;
    height: 50px;
    border-radius: 7px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
}

#container-total-repa span{
    color: #67cdff;
    margin-left: 10px;
}

#trait-profil{
    width: 80%;
    border: 1px solid orange;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
}*/

/*#container-qmsm{
    min-height: 200px;
    width: 100%;
    margin-top: 100px;
    color: #ffbc40;
}*/

/*#container-qmsm h1{
    font-size: 20px;
    font-weight: 700;
    text-align: left;
}

.text-qmsm{
    font-size: 17px!important;
    color: #ffbc40;
    width: 780px;
}*/

.membre-profil {
    font-size: 20px;
    font-weight: 700;
    color: #404041;
    margin-top: 50px;
    color: #ffbc40;
}

.membre-profil span {
    color: #66ccff;
}

.ville-profil {
    font-size: 20px;
    font-weight: 700;
    color: #ffbc40;
    margin-top: 20px;
}

.ville-profil span {
    color: #66ccff;
}

#container-repa-categorie {
    display: flex;
    flex-flow: row;
    width: 80%;
    margin-top: 80px;
    margin-left: auto;
    margin-right: auto;
}

#container-repa-categorie h3 {
    font-size: 17px;
    color: #ffbc40;
    font-weight: 700;
    margin: 0 !important;
}

#container-repa-categorie p {
    text-align: center;
    color: #67cdff;
}

#container-voiture-repa {
    border: 2px solid #404041;
    background-color: #404041;
    width: 250px;
    height: 80px;
    border-radius: 7px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
}

#container-moto-repa {
    border: 2px solid #404041;
    background-color: #404041;
    width: 250px;
    height: 80px;
    border-radius: 7px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-right: 10px;
    margin-bottom: 10px;
}

#container-camion-repa {
    border: 2px solid #404041;
    background-color: #404041;
    width: 250px;
    height: 80px;
    border-radius: 7px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-right: 10px;
    margin-bottom: 10px;
}

#container-camping-repa {
    border: 2px solid #404041;
    background-color: #404041;
    width: 250px;
    height: 80px;
    border-radius: 7px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-right: 10px;
    margin-bottom: 10px;
}

#container-info-profil {
    width: 100%;
    display: flex;
    flex-flow: column;
    margin-top: 20px;
}

#container-img-valide {
    width: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-right: 20px;
}

#container-img-valide img {
    margin-top: 15px;
}

#container-text-valide {
    width: 600px;
    display: flex;
    flex-direction: row;
}

.container-gauche-text-valide {
    margin-right: auto;
}

/*.text-mail-valide {
    margin-top: 35px;
    color: #ffbc40;
    font-size: 18px;
    font-weight: 700;
}*/

/*.text-tel-valide{
    margin-top: 30px;
    color: #ffbc40;
    font-size: 18px;
    font-weight: 700;
}

.text-identite-valide{
    margin-top: 35px;
    color: #ffbc40;
    font-size: 18px;
    font-weight: 700;
}

.text-diplome-valide{
    margin-top: 30px;
    color: #ffbc40;
    font-size: 18px;
    font-weight: 700;
}

.img-tel-valide{
    width: 35px;
}

.img-diplome-valide{
    width: 60px;
}

.img-identite-valide{
    width: 60px;
}

.img-mail-valide{
    width: 40px;
}*/

/* #container-competence-meca {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    order: 2;
    width: 100%;
    margin-top: -5px;
    margin-bottom: 20px;
}

#container-ico-validation {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    order: 3;
    width: 100%;
    margin-top: 20px;
    margin-bottom: 30px;
} */

/* #container-ico-validation h1 {
    font-size: 25px;
    color: white;
} */

/* #container-ico-competence-meca {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    width: 600px;
    border: 2px solid salmon;
    margin-top: 20px;
} */

/* .trait-orange-annonce-complete {
    border: 1px solid #ffbc40;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 40px;

} */

/* #container-competence-meca h1 {
    font-size: 25px;
    color: plum;
} */

/* .voiture-profil {
    font-size: 30px;
    margin-top: 10px;
}

.camping-profil {

    margin-top: 15px;
} */

/*#container-banniere-profil{
    width: 100%;
    padding-top: 15px;
    background-color: #404041;
    display: flex;
    flex-flow: column wrap;
    justify-content: space-around;
    order: 1;
}*/

/*#container-avatar-profil{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 20px;
    margin-bottom: 20px;
}

#container-avatar-profil h1{
    color: #ffbc40;

}

#container-ico-validation-mobile{
    display: none;
}*/


/*----------------avis profils--------------------*/

/* .container-avis-mecano-background {
    margin-top: 50px;
    width: 100%;
    background-color: #404041;
    padding-bottom: 50px;
} */


/*.container-avis-mecano {
    margin-left: auto;
    margin-right: auto;
    border: 3px solid yellow;
    display: flex;
}*/

/* .container-avis-mecano h3 {
    text-align: center;
    margin-bottom: 60px;
    font-family: "Open Sans Condensed", sans-serif;
    color: #ffbc40;
    font-weight: bold;
    font-size: 40px;
}
 */
/* .btn-modif-profil {
    display: block;
    border-radius: 7px;
    padding: 5px 15px;
    margin-left: auto;
    margin-right: auto;
    background-color: orange;
    border: 1px solid #ffbc40;
    height: 35px;


} */

/* .btn-modif-profil a {
    color: white;
} */

/* .avis {
    display: flex;
    flex-flow: row;
    height: 150px;
    width: 60%;
    margin-bottom: 5%;
    border-bottom: 2px solid #ffbc40;
    margin-left: auto;
    margin-right: auto;
} */

.avis-avatar-prenom {
    flex-direction: column;
    position: relative;
    width: 130px;
}

.avis-avatar-prenom p {
    text-align: center;
    text-transform: capitalize;
    color: white;
    font-weight: bold;
    background-color: #46d5fa;
    overflow: hidden;
    position: absolute;
    bottom: 0;
    width: 100%;
    border-bottom-left-radius: 14px;
    height: 25px;
    font-size: 16px;

}

/* .avis img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
} */

/* .avis-etoile-avis {
    flex-direction: column;
    width: 80%;
    position: relative;
}
 */
/* .container-left-avis {
    overflow: hidden;
} */

/* .container-left-avis p {
    color: #ffbc40;
    font-weight: bold;
}
 */
/* .avis-etoile-avis p {
    position: absolute;
    top: 50%;
    left: 10%;
    color: white;
    font-weight: 700;
}
 */

.rating {

    transform: translate(-50%, -50%) rotateY(180deg);
    display: flex;
}

.rating input {
    display: none;
}

.rating label {

    display: block;
    cursor: pointer;
    width: 100px;
}



.rating label:before {

    content: '\f0ad';
    font-family: fontAwesome;
    position: relative;
    display: block;
    font-size: 100px;
    color: orange;
}

.rating label:after {

    content: '\f0ad';
    font-family: fontAwesome;
    position: absolute;
    display: block;
    font-size: 100px;
    color: #1f9cff;
    top: 0;
    opacity: 0;
    transition: .5s;
    text-shadow: 0 2px 5px rgba(0, 0, 0, .5);

}

.rating label:hover:after,
.rating label:hover~label:after,
.rating input:checked~label:after {

    opacity: 1;

}

.note-mecano {

    content: '\f0ad';
    font-family: fontAwesome;
    position: relative;
    display: block;
    font-size: 100px;
    color: orange;
}

/* .rating-avis {

    transform: translate(-50%, -50%) rotateY(180deg);
    display: flex;
    margin-left: 34%;
    margin-bottom: 5%;
}

.rating-avis input {
    display: none;
}

.rating-avis label {

    display: block;
    cursor: pointer;
    width: 100px;
}



.rating-avis label:before {

    content: '\f0ad';
    font-family: fontAwesome;
    position: relative;
    display: block;
    font-size: 100px;
    color: orange;
}

.rating-avis label:after {

    content: '\f0ad';
    font-family: fontAwesome;
    position: absolute;
    display: block;
    font-size: 100px;
    color: #1f9cff;
    top: 0;
    opacity: 0;
    transition: .5s;
    text-shadow: 0 2px 5px rgba(0, 0, 0, .5);
}

.rating-avis label:hover:after,
.rating-avis label:hover~label:after,
.rating-avis input:checked~label:after {
    opacity: 1;
}
 */

/* .rating2 {

    transform: translate(-50%, -50%) rotateY(180deg);
    display: flex;
    width: 31%;
    margin-left: 11%;
    margin-top: 6%;

}

.rating2 input {
    display: none;
}

.rating2 label {

    display: block;
    cursor: pointer;

}



.rating2 label:before {

    content: '\f0ad';
    font-family: fontAwesome;
    position: relative;
    display: block;
    font-size: 25px;

} */

/*.rating-profil{

    transform: rotateY(180deg) ;
    display: flex;

}*/

/* .rating-profil input{
    display: none;
} */

/*.rating-profil label {

    display: block;
    cursor: pointer;

}*/

/* .rating-profil label:before{

    content: '\f0ad';
    font-family: fontAwesome;
    position: relative;
    display: block;
    font-size: 40px;

} */

/* .btn-voir-plus {
    display: block;
    margin-left: auto;
    margin-right: auto;
    border-radius: 7px;
    background-color: orange;
    border: 1px solid #ffbc40;
    width: 139px;
    height: 35px;
    color: white;
    cursor: pointer;
}

.btn-voir-moins {
    display: block;
    margin-left: auto;
    margin-right: auto;
    border-radius: 7px;
    background-color: orange;
    border: 1px solid #ffbc40;
    width: 139px;
    height: 35px;
    color: white;
    cursor: pointer;
} */

.popup-form-avis {
    margin-top: 12%;
    margin-left: 34%;
    height: 51%;
    width: 30%;
    z-index: 10;
    background-color: white;
    border: 2px solid orange;
}

.text-form-avis {
    margin-top: 8%;
    text-align: center;
    font-size: 20px !important;
}

/*.formulaire-avis textarea {
    width: 46%;
    height: 100px;
    border: 2px solid orange;
    margin-top: -4%;
}*/

.btn-valider-avis {
    background-color: orange !important;
    border-color: orange !important;
    margin-top: 7%;
}

/*.btn-profil-clicked{
    color: orange!important;
}*/

.container-row {
    height: 100%;
}

.container-profil-info-public {
    position: relative;
    height: 700px;
    width: 380px;
    margin-left: 7%;
    margin-top: 50px;
    box-shadow: 1px 1px 12px #555;
    border-radius: 50px;
}

.container-orange {

    height: 22%;
    width: 100%;
    background-color: orange;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;



}

/*.avatar-profil{
    border-radius: 50%;
    height: 100px;
    width: 100px;
    border:2px solid #ffbc40;
}*/



.container-profil-info-public p {

    font-size: 1.2rem;
    margin-left: 23%;
}

.container-profil-info-public h2 {

    text-transform: capitalize;
    text-align: center;
    margin-top: 34%;
}

.p-ville {

    text-transform: capitalize;
}

.icone-calendrier {
    color: red;
    font-size: 30px;
}

/* .icone-pos {
    color: red;
    font-size: 30px;
    margin-right: 10px;
} */

.container-profil-info-public a {

    font-size: 1.2rem;
    color: orange;
    text-align: center;
    display: block;
}

.container-description {
    margin-top: 16%;
    margin-bottom: 2%;
}

.container-description h4 {
    margin-left: 5%;
    margin-top: 19%;
}

.container-description p {
    margin-left: 5%;
    font-size: 0.96rem;
    text-align: left;
    color: grey;
}

.container-competence {
    margin-top: 2%;
    margin-bottom: 7%;
}

.container-competence h4 {
    margin-left: 5%;
    margin-bottom: 5%;
}

.image-competence-voiture {
    width: 15%;
    float: left;
    margin-left: 10%;
}

.image-competence-moto {
    width: 21%;
    float: left;
    margin-left: 4%;
}

.image-competence-scooter {
    width: 18%;
    float: left;
    margin-left: 2%;
}

.image-competence-camion {
    width: 29%;
    float: left;
    margin-left: 10%;
}

.image-competence-agricole {
    width: 16%;
    float: left;
    margin-left: 4%;
}

.image-competence-bateau {
    width: 13%;
    float: left;
    margin-left: 4%;
}

.container-mesannonce-monprofil {
    display: none;
}

/* .container-mesannonce-monprofil-js {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    width: 100%;
} */

.container-mesoffres-monprofil {
    display: none;
}

.container-mesoffres-monprofil-js {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    width: 100%;
}

.container-mesrdv-monprofil {
    display: none;
}

.container-mesrdv-monprofil-js {
    background-color: var(--third-color);
    border-radius: var(--border-radius);
    width: 90%;
    padding: 5%;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    margin-bottom: 2rem;
    margin-top: 5%;
}

.container-historique-monprofil {
    display: none;
}

/* .container-historique-monprofil-js {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    width: 100%;
    padding-bottom: 80px;
} */

.titre-mesrdv-monprofil {
    text-align: center;
    color: #404041;
    font-size: 40px;
    font-weight: bold;
    margin-top: 50px;
}

.container-mesreponses-monprofil {
    width: 100%;
    height: 100%;
    display: none;
}

.container-mesrdv-profil {
    display: none;
}

.container-mesrdv-profil-js {

    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin-top: 7%;
    justify-content: space-around;
}

.madescription {
    width: 30%;
    height: 30%;
    background-color: orange;
    float: left;
}

/* .annonce-profil {
    position: relative;
    box-shadow: 1px 1px 12px #555;
    height: 195px;
    width: 800px;
    background-color: white;
    border-radius: 10px;
    cursor: pointer;
    margin-bottom: 2%;
    margin-left: 10px;
    margin-right: 10px;
    display: flex;
    flex-flow: row wrap;
    margin-top: 20px;
} */

.button-devis {
    margin-top: 24%;
    margin-left: -13%;
    background-color: orange !important;
    border-color: orange !important;
    color: white;
}

/*---------------diagnostique---------------------*/



.container-form-devis {
    width: 100%;
    padding: 5% 10%;
}

.container-form-devis h2{
    text-align: center;
}

.container-form-devis form{
    margin-top: 5%;
    background: var(--third-color);
    border-radius: var(--border-radius)8px;
    padding: 5%;
    width: 50%;
    margin-left: auto;
    margin-right: auto;
}

.container-form-devis p{
    color: var( --light);
    font-weight: 500;
    font-size: 1rem;
}

@media (max-width: 1300px) {

      .container-form-devis p{
        font-size: 0.8rem;
    }

}

@media (max-width: 1050px) {

     .container-form-devis form{
        width: 70%;
    }

}

@media (max-width: 750px) {

     .container-form-devis form{
        width: 90%;
    }

}

@media (max-width: 500px) {

     .container-form-devis form{
        width: 100%;
    }

    .container-form-devis p{
        font-size: 0.6rem;
    }

}


.container-form-devis textarea {
    border: 2px solid orange !important;
    margin-top: 5%;
}

.container-btn-devis{
    width: 100%;
}

.container_add_input_devis{
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 5%;
}

.btn-devis-css {
    background-color: var(--primary-color);
    color: var( --light);
    padding: 10px;
    border: 2px solid transparent;
    border-radius: var(--border-radius);
    cursor: pointer;
    display: inline-block;
    min-width: 200px;
    transition: transform 1s ease, color 1s ease, font-weight 1s ease;
    text-align: center;
    margin-bottom: 5%;
}

.panne-devis-css {
    width: 80%!important;
    margin-right: 5%;
}

.prix-devis-css {
    width: 100px !important;
}



.btn_devis_supprimer {
  background: none;
  border: none;
  cursor: pointer;
  margin-left: 2%;
}

.croix_devis_supprimer{
    height: 20px;
    width: 20px;
    fill: var(--primary-color);
}

.input-jour-devis {
    margin-bottom: 20px;
}

.input-prix {
    float: left;
    width: 20% !important;
    margin-bottom: 4%;
}

.input-valider-devis {
    border-radius: var(--border-radius);
    min-height: 40px;
    width: 100%;
    background-color: var(--primary-color);
    border: 2px solid var(--primary-color);
    color: var(--light);
    cursor: pointer;
    padding: 4px 40px;
    font-weight: 500;
    text-align: center;
    margin-top: 5%;
}

/*-------------------------Profil Particulier----------------------------*/

/*#container-menu-modif-profil{
    width: 100%;
    background-color: #404041;
    padding-top: 125px;
}*/

.menu-modif-profil {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    background-color: var(--light);
    box-shadow: var(--box-shadow);
    width: 90%;
    justify-content: space-evenly;
    justify-items: center;
    min-height: 50px;
    border-radius: var(--border-radius);
    z-index: 1;
}

.btn-modif-monprofil {
    border: none;
    background-color: transparent;
    cursor: pointer;
    color: var(--third-color-lighter);
    transition: 0.3s color ease;
    border: 2px solid transparent;
    transition: border 0.3s ease;
}

.btn-modif-document {
    border: none;
    background-color: transparent;
    cursor: pointer;
    color: var(--third-color-lighter);
    transition: 0.3s color ease;
    border: 2px solid transparent;
    transition: border 0.3s ease;
}

.btn-modif-paiement {
    border: none;
    background-color: transparent;
    cursor: pointer;
    color: var(--third-color-lighter);
    transition: 0.3s color ease;
    border: 2px solid transparent;
    transition: border 0.3s ease;
}

.btn-modif-monprofil:hover,
.btn-modif-document:hover,
.btn-modif-paiement:hover {
    color: orange;
}



/*#container-form-profil2{
    overflow: hidden;
    width: 100%;
    padding-top: 140px;
    clear: both;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    background-color: #404041;
    padding-bottom: 100px;
}*/

/*.container-form-info{
    overflow: hidden;
    width: 50%;
}*/

/*.container-form-info span{
    color: red;
}

.container-form-info h1{
    text-align: center;
    color: white;
}*/


#container-form-rib h1 {
    text-align: center;
    color: white;
}

#container-form-rib h3 {
    text-align: center;
    color: red;
    font-size: 18px;
    padding: 4%;
}

#container-form-rib {
    display: none;
}

#form-rib {
    padding: 2% 5% 5% 5%;
}

.formulaire-rib {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
}

.btn-rib{
    font-weight: 600;
    min-height: 40px;
    transition: transform 1s ease!important;
    color: var(--body) !important;
    margin-top: 30px;
}

.view_bank_account {
    background-color: #fff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 300px;
    text-align: left;
    margin-right: auto;
    margin-left: auto;
    margin-top: 5%;
    margin-bottom: 10%;
}

.view_bank_account h2 {
    font-size: 1.5em;
    margin-bottom: 10px;
    text-align: center;
    color: #333;
}

.view_bank_account p {
    font-size: 1em;
    margin: 8px 0;
    color: #555;
}

.view_bank_account strong {
    color: #333;
}

.change-iban-btn {
    display: inline-block;
    margin-top: 20px;
    padding: 10px 20px;
    background-color: #007BFF;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    text-align: center;
}

.change-iban-btn:hover {
    background-color: #0056b3;
}

.container-view-iban-btn {
    padding: 20px;
    border: 2px solid #ffbc40;
    margin-top: 80px;
}

.view-iban-rib {
    text-align: center;
    color: white;
    font-weight: bold;
    font-size: 20px;
}

.btn-supr-rib {
    display: block;
    min-width: 120px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    padding: 0.4rem 0;
    text-align: center;
    background-color: #ffbc40;
    color: #fff;
    text-decoration: none;
    border: 1px solid #fff;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    font-size: 18px;
}

.btn-supr-rib:hover {
    background-color: #fb0000;
}

.formulaire-info {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
}

/*.formulaire-info input{
    font-weight: 700;
    color: #495057;
}

.formulaire-info select{
    font-weight: 700;
    color: #495057;
}*/

/*.formulaire-info textarea{
    font-weight: 700;
}*/

/*.formulaire-info label{
    color: #ffbc40;
    font-weight: bold;
    font-size: 20px;
}*/

#adresse-cplt {
    width: 100%;
}

.container-ville-cdp-cplt {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
}

.container-ville-cplt {
    width: 49%;
    margin-right: 1%;
}

#ville-cplt {
    width: 100%;
}

.container-code_postal-cplt {
    width: 49%;
    margin-left: 1%;
}

#code_postal-cplt {
    width: 100%;
}

.container-tel-date-cplt {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
}

.container-tel-cplt {
    width: 49%;
    margin-right: 1%;
}

#tel-cplt {
    width: 100%;
}

.container-inputDate_n {
    width: 49%;
    margin-left: 1%;
}

#inputDate_n {
    width: 100%;
    height: calc(2.25rem + 2px);
    border-radius: .25rem;
    border: 0;
    padding: .375rem .75rem;
}

#container-lieu-n-lieu-r {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
}

.container-lieu_n {
    width: 49%;
    margin-right: 1%;
}

.container-lieu_n select {
    width: 100%;
    height: calc(2.25rem + 2px);
    border-radius: .25rem;
    border: 0;
    padding: .375rem .75rem;
}

.container-lieu_r select {
    width: 100%;
    height: calc(2.25rem + 2px);
    border-radius: .25rem;
    border: 0;
    padding: .375rem .75rem;
}

.container-lieu_r {
    width: 49%;
    margin-left: 1%;
}

.container-description-cplt {
    width: 100%;
    margin-top: 20px;
}

#description-cplt {
    width: 100%;
    height: 100px;
}

.container-avatar-cplt {
    margin-top: 20px;
}


/* .avatar-cplt {
    font-size: 17px;
    border: 2px solid white;
    border-radius: .25rem;
    font-weight: 700;
} */

/*.valider-cplt {
    margin-top: 35px;
    font-weight: 700;
}*/

.competence-cplt {
    color: var(--third-color);
    font-weight: bold;
    font-size: 25px;
    text-align: center;
    margin-top: 25px;
}

.container-competence-cplt {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    text-align: center;
    margin-top: 20px;
}

#container-form-document {
    display: none;
}

.container-form-info{
    padding: 2% 5% 5% 5%;
}

#form-document {
    padding: 2% 5% 5% 5%;
}

#form-document h1 {
    color: white;
    text-align: center;
}

#form-document label {
    color: var(--third-color);
}

#form-document span {
    color: var(--third-color);
}

#form-document a {
    color: #66ccff;
    font-weight: bold;
    font-size: 17px;
    text-decoration: underline;
}

.formulaire-document {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
}

.formulaire-document input {
    font-weight: 700;
    color: #495057;
}

.formulaire-document select {
    font-weight: 700;
    color: #495057;
}

#container-adresse-entreprise-doc {
    display: none;
}

#adresse-entreprise-doc {
    width: 100%;
}

#container-siren {
    clear: both;
    width: 100%;
    margin-bottom: 30px;
}

#container-diplome-doc {
    padding: 20px;
    border-bottom: 2px solid #ffbc40;
    border-left: 2px solid #ffbc40;
    border-right: 2px solid #ffbc40;
}

#diplome-doc {
    width: 100%;
    color: white;
    margin-bottom: 30px;
}

.valider-doc {
    width: 100%;
    font-weight: 600;
    min-height: 40px;
    transition: transform 1s ease !important;
    color: var(--body) !important;
    margin-top: 30px;
}

#statue-select {
    margin-bottom: 20px;
}

#container-nom-entreprise-doc {
    padding: 20px;
    border-top: 2px solid #ffbc40;
    border-left: 2px solid #ffbc40;
    border-right: 2px solid #ffbc40;
}

#container-siren-doc {
    padding: 20px;
    border-top: 2px solid var(--third-color);
    border-left: 2px solid var(--third-color);;
    border-right: 2px solid var(--third-color);;
}



#container-recto-verso-doc {
    padding: 20px;
    border: 2px solid var(--third-color);
}

.texte-verifie {
    font-size: 20px;
    font-weight: bold;
    float: right;
    margin-bottom: 15px !important;
}

#container-identite-recto {
    clear: both;
    width: 100%;
    margin-bottom: 30px;
}

#container-identite-recto-doc {
    width: 49%;
    margin-right: 1%;
}

#container-identite-verso-doc {
    width: 49%;
    margin-top: 30px;
}

/*-------------------------Annonces-résumé----------------------------*/
/*#container-barre-recherche{

padding-top: 130px;
width: 100%;


 }*/

/* .barre-recherche{
    width: 1350px;
    background-color: orange;
    height: 90px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 20px;
    position: relative;

 }*/

/*.form-barre-recherche{
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
 }*/

/*#categorie-recherche{
    margin-left: 0!important;
}*/

/*#categorie-recherche,

#region,
#department,
#city {
    width: 280px;
    margin-left: 2%;
    margin-top: 2%;
    font-family: "Open Sans Condensed",sans-serif;
    font-weight: 700;

}*/

/*.btn-recherche {
    position: absolute;
    bottom: -30px;
    left: 43.5%;
    background-color: #66ccff;
    color: white;
    border-radius: 7px;
    border: 0;
    font-size: 30px;
    font-family: "Open Sans Condensed",sans-serif;
    font-weight: 700;
    cursor: pointer;

}*/

.container-annonce {
    background-color: var(--third-color);
    border-radius: var(--border-radius);
    width: 90%;
    padding: 5%;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    margin-bottom: 2rem;

}

/*.annonce {
    position: relative;
    box-shadow: 1px 1px 12px #555;
    height: 195px;
    width: 800px;
    background-color: white;
    cursor: pointer;
    margin-bottom: 2%;
    margin-left: 10px;
    margin-right: 10px;
    display: flex;
    flex-flow: row wrap;
    margin-top: 20px;
}*/

/* .container-vehicule-annonce-resumer {
    height: 100%;
    width: 30%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container-vehicule-annonce-resumer img {
    width: 60%;
} */

/* .titre-petite-annonce {

    font-size: 25px;
    font-weight: bold;
    margin-top: 10px;
    margin-left: 32px;
    color: #66ccff;
} */

/* #container-droite-annonce-resumer {
    width: 70%;
} */

/* #container-description-vehicule-annonce-resumer {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    width: 100%;
    margin-top: 35px;
} */

/* #container-description-vehicule-annonce-resumer div {}

#container-description-vehicule-annonce-resumer h3 {
    font-size: 20px;
}

#container-description-vehicule-annonce-resumer p {
    text-align: center;
    color: #ffa500;
    font-weight: bold;
} */

.avatar-petite-annonce {

    width: 38%;
    height: 38%;
    margin-left: 31%;
    border-radius: 50%;
    clear: both;

}

.icone-vehicule {
    width: 100%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    font-size: 7em;
    margin-top: 4%;
    color: orange;

}



.container-prenom-nom-petit-prix {

    width: 100%;
    height: 10%;
    margin-top: 3%;

}

.marque-petite-annonce {
    float: left;
    font-size: 1.3em;
    margin-left: 3%;

}

.modele-petite-annonce {
    float: left;
    font-size: 1.3em;
    margin-left: 14%;

}

.prenom-petite-annonce {
    float: left;
    font-size: 1.2vw;
    margin-left: 30%;

}

.nom-petite-annonce {
    float: left;
    font-size: 1.2vw;
    margin-left: 1%;

}

.container-petit-prix {
    display: flex;
    margin-left: auto;
    margin-right: auto;
    width: 106px;
    flex-direction: row;
    justify-content: center;
    overflow: hidden;
    margin-top: 4%;
}

.prix1-petite-annonce {
    font-size: 2em;
}

.prix2-petite-annonce {
    font-size: 2em;
}

/* .p-ville-petite-annonce {
    margin-top: 3%;
    text-transform: capitalize;
    margin-left: 32px;
    color: #404041;
    font-weight: 600;
} */

.localisation-petite-annonce {
    clear: both;
    margin-left: 36%;
    font-size: 0.9vw;

}

/* .date-publi-resumer {
    margin-left: 190px;
} */

.btn-voir-annonce {
    margin-top: 3%;
    margin-left: 30%;
    text-align: center;
    color: white !important;
    background-color: orange !important;
    border: orange !important;
}









/*-------------------------Annonces-complete---------------------------*/

.container-profil-annonce-complet {
    display: flex;
    flex-direction: row;
    width: 100%;
}

.container-titre-complete-offre {
    width: 100%;
    padding: 120px 5% 0 5%;
    display: flex;
    flex-direction: row;
}


.titre-annonce-complete {
    font-size: 3.4rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 2rem;
    color: var(--title_section);
}

#container-gauche-droite-annonce-complete {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
}

#container-droite-annonce-complete {
    text-align: center;
    margin-right: 200px;
}

#container-gauche-annonce-complete {
    margin-left: 200px;
}

.icone-vehicule-complet {
    font-size: 50px;
    color: #ffbc40;
}

.container-profil-info-public2 {
    width: 40%;
    display: none;
    flex-flow: column;
    position: relative;

}

.container-profil-info-public2 img {
    border-radius: 50%;
    height: 80px;
    width: 80px;
    margin-left: auto;
    margin-right: auto;
    object-fit: cover;
}

.container-profil-info-public2 h2 {
    text-transform: capitalize;
    text-align: center;
    font-size: 18px;
}

.container-titre-annonce-complete{
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
}

/*.rating-profil-complete {
    position: absolute !important;
    top: 140px !important;
    left: 103px !important;
}

.rating-profil-complete label:before {
    font-size: 20px !important;
}*/

.container-annonce-complete {
    overflow: hidden;
    height: auto;
    min-height: 30%;
    width: 96% !important;
    background-color: white;
    margin-left: 2%;
    margin-top: 1.5%;
    border: 2px solid orange;
    border-radius: 0px;
    border-radius: 22px;


}

.container-annonce-complete span {
    font-weight: bold;
    font-size: 25px;

}

.container-profil-annonce-complete {
    overflow: hidden;
}


.container-description-annonce-complet {

    margin-left: 11%;
    margin-top: 7%;
}

.marque-annonce-complete {

    margin-left: 17%;
    font-size: 1.1vw;
    margin-top: 2%;
    color: #00dbf3;
}

.modele-annonce-complete {
    float: left;
    margin-left: 10%;
    margin-bottom: 10%;
    font-size: 1.1vw;
    margin-top: 2%;
    color: #00dbf3;
}

.font-orange {

    color: orange;
}

.annee-annonce-complete {
    float: left;
    margin-left: 10%;
    margin-bottom: 10%;
    font-size: 1.1vw;
    margin-top: 2%;
    color: #00dbf3;
}

.piece_fournie-annonce-complete {
    float: left;
    margin-left: 10%;
}

.trait-annonce-complete {
    border: 1px solid orange;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

#container-description-annonce-complete {
    width: 500px;
    margin-left: 250px;
    padding-top: 50px;
    font-size: 18px;
    font-weight: 500;
    color: #ffbc40;

}

#container-piece-annonce-complete {
    margin-left: 250px;
    padding-top: 50px;
    font-size: 18px;
    font-weight: 500;
    color: #ffbc40;
}

#container-piece-annonce-complete span {
    font-size: 25px;
    font-weight: 500;
    color: #66ccff;
}

.description-annonce-complete {

}



#container-vehicule-panne-annonce-complete {
    width: 100%;
    background-color: #404041;
    display: flex;
    flex-flow: row wrap;
    padding-top: 200px;
    padding-bottom: 50px;
}


#container-vehicule-annonce-complete {
    width: 100%;
    overflow: hidden;
    margin: auto;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    gap: 15px;
    padding: 3% 5% 5% 5%;

}

#container-vehicule-annonce-complete h3 {
    color: var(--third-color-lighter);
    margin-bottom: 10px;
    font-weight: 600;
}

#container-vehicule-annonce-complete div {
    border: 2px solid var(--third-color-transparent);
    transition: scale 0.3s ease, box-shadow 0.6s ease;
    scale: 0.98;
    display: flex;
    flex-direction: column;
    min-height: 110px;
    width: 160px;
    justify-content: center;
    align-items: center;
    border-radius: var(--border-radius);
    text-align: center;
    color: var(--third-color);
}
}

/* #container-vehicule-recap-annonce {
    width: 599px;
    overflow: hidden;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    padding-bottom: 80px;
    margin-left: auto;

}
 */
/* #container-vehicule-recap-annonce h3 {
    color: #ffbc40;
}
 */
/* #container-vehicule-recap-annonce p {
    color: #66ccff;
    font-size: 23px;
} */



/* #container-vehicule-recap-annonce div {
    width: 150px;
    text-align: center;
}
 */

#calendrier-annonce-complete {
    width: 30% !important;
    margin-top: 4%;
    margin-left: 5%;
}

.calendrier-annonce-complete p {
    display: none;
}

.prix1-annonce-complete {
    font-size: 50px;
    font-weight: bold;
}

.prix2-annonce-complete {
    font-size: 50px;
    font-weight: bold;
}

/*.button-annonce-complete{

    background-color: orange!important;
    border-color: orange!important;
    color: white!important;
    cursor: pointer;
}*/

.trait-offre-mecano {
    width: 40%;
    border: 1px solid orange;
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;
}


.container-annonce-panne-dispo {
    width: 100%;
    padding-top: 5.5%;
    padding-left: 5%;
    padding-right: 5%;
    display: flex;
    flex-direction: row;
    background-color: #fffad6;
    position: relative;
}

.container-annonce-panne {
    width: 100%;
    background-color: var(--third-color);
    padding: 50px 0;
    text-align: center;
}

.container-annonce-panne h2 {
    color: var(--light);
    font-weight: bold;
    font-size: 2rem;
    margin-bottom: 5px;
}

.container-liste-panne-annonce{
    width: 500px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

.container-annonce-panne p {
    color: var(--grey-light);
    padding: 5px;
}

.container-annonce-dispo {
    width: 1700px;
    margin-right: 100px;
}

#container-text-dispo-annonce-complete {
    width: 100%;
    padding: 5%;
}

#container-text-dispo-annonce-complete h4{
    color: var(--primary-color);
    font-size: 1.6rem;
    padding: 15px 0;
}

#container-text-dispo-annonce-complete p{
    color: var(--third-color-lighter);
    font-size: 1.2rem;
    padding-bottom: 15px;
}


#container-dispo-jour-annonce-complete {
    display: flex;
    flex-flow: row wrap;
    text-align: center;
}

.container-annonce-dispo h2 {
    font-size: 40px;
    color: #ffbc40;
    text-align: center;
    padding-top: 50px;
}

#container-lundi-annonce-complete,
#container-mardi-annonce-complete,
#container-mercredi-annonce-complete,
#container-jeudi-annonce-complete,
#container-vendredi-annonce-complete,
#container-samedi-annonce-complete,
#container-dimanche-annonce-complete {
    background-color: var(--light);
    color: var(--third-color-lighter);
    padding: 10px;
    border: 2px solid var(--third-color-transparent);
    border-radius: var(--border-radius);
    margin: 5px;
    cursor: pointer;
    display: inline-block;
    min-width: 200px;
    transition: transform 1s ease, color 1s ease, font-weight 1s ease;
    scale: 1;
}

#container-lundi-annonce-complete p,
#container-mardi-annonce-complete p,
#container-mercredi-annonce-complete p,
#container-jeudi-annonce-complete p,
#container-vendredi-annonce-complete p,
#container-samedi-annonce-complete p,
#container-dimanche-annonce-complete  p{
    
    padding: 10px;
}

#container-dispo-heure-annonce-complete {
    display: flex;
    flex-flow: row wrap;
    text-align: center;
}

#container-matin-annonce-complete,
#container-midi-annonce-complete,
#container-aprem-annonce-complete,
#container-soir-annonce-complete {
    background-color: var(--light);
    color: var(--third-color-lighter);
    padding: 10px;
    border: 2px solid var(--third-color-transparent);
    border-radius: var(--border-radius);
    margin: 5px;
    cursor: pointer;
    display: inline-block;
    min-width: 200px;
    transition: transform 1s ease, color 1s ease, font-weight 1s ease;
    scale: 1;
}

#container-matin-annonce-complete p,
#container-midi-annonce-complete p,
#container-aprem-annonce-complete p,
#container-soir-annonce-complete p{
    padding: 10px;
}

.container-dispo-complete {
    width: 100%;
    overflow: hidden;
}

.jour-dispo-complete {
    float: left;
    margin-left: 4%;
}

.heure-dispo-complete {
    float: right;
    margin-right: 8%;
}


#container-titre-and-offre-mecano{
    width: 100%;
    background-color: var(--third-color);
    padding: 5%;
    margin-bottom: 5%;
}

.text-pre-annonce-completes_container{
    line-height: 0;
}

.mention_image_annonce-completes{
    height: 150px;
    border-radius: 8px 8px 0 0;
}

#text-pre-annonce-completes{
    text-align: center;
    background-color: var(--secondary-color-dark);
    border-radius: 0 0 8px 8px;
    padding: 2% 0;
}

.section_pre-annonce-completes_text{
        color: var(--light);
        font-size: 2.5rem;
}

.container-offre-mecano {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    width: 100%;
    padding: 5%;
    align-items: center;
}

.trait-gris {

    width: 60%;
    height: 1%;
    margin-left: 20%;
    border-bottom: 1px solid #dcd5cc;
    position: absolute;
    bottom: 4%;

}

/* .container-offre-rdv {
    width: 342px;
    height: 350px;
    border: 2px solid orange;
    border-radius: 22px;
    margin-top: 3%;
    margin-left: 3%;
    margin-right: 3%;
    box-shadow: 1px 1px 12px #555;
    text-align: center;
} */

/* .container-prenom-nom-offre-rdv {
    width: 100%;
    height: 10%;
    margin-top: 3%;
    margin-bottom: 2%;

} */

/* .container-prenom-nom-offre-rdv a {
    display: flex;
    flex-direction: row;
} */

/* .prenom-offre-rdv {
    font-size: 23px;
    margin-left: auto;
    color: orange;
    font-weight: bold;
}

.nom-offre-rdv {
    font-size: 23px;
    margin-left: 1%;
    color: orange;
    margin-right: auto;
    font-weight: bold;
} */

/*.titre-offre-rdv {
    font-size: 23px;
    margin-left: 1%;
    color: #00dbf3;
    margin-right: auto;
    font-weight: bold;
    text-align: center;
}*/

/* .avatar-offre-rdv {
    width: 30px;
    border-radius: 50%;
    clear: both;
    border: 2px solid orange;
    margin-bottom: 2%;
    height: 30px;
    object-fit: cover;
    margin-top: 4%;
} */

/* .prix-offre-rdv {
    font-size: 28px;
    font-weight: bold;
    text-align: center;
    clear: both;
    color: #00dbf3;
} */

/* .jour-offre-rdv {
    font-size: 23px;
    font-weight: bold;
    text-align: center;
    clear: both;
    color: orange;
} */

/* .heure-offre-rdv {
    font-size: 23px;
    font-weight: bold;
    text-align: center;
    clear: both;
    color: orange;
}
 */
.btn-terminer-rdv {
    border-radius: var(--border-radius);
    min-height: 40px;
    border: none;
    color: var(--grey-light);
    background-color: var(--third-color);
    scale: 1;
    margin: 10px 0;
    cursor: pointer;
    width: 80%;
}

.btn-deplacer-rdv {
    border-radius: 7px;
    background-color: orange;
    border: 1px solid #ffbc40;
    width: 100px;
    color: white;
    cursor: pointer;
    margin-top: 10px;
}

.btn-annuler-rdv {
    border-radius: 7px;
    background-color: orange;
    border: 1px solid #ffbc40;
    width: 100px;
    color: white;
    cursor: pointer;
    margin-top: 10px;
}

.btn-accepter-rdv {
    border-radius: var(--border-radius);
    min-height: 40px;
    border: none;
    color: var(--grey-light);
    background-color: var(--third-color);
    scale: 1;
    margin: 10px 0;
    width: 90px;
    cursor: pointer;
}

.btn-refuser-rdv {
    border-radius: var(--border-radius);
    min-height: 40px;
    border: none;
    color: var(--grey-light);
    background-color: var(--third-color);
    scale: 1;
    margin: 10px 0;
    width: 90px;
    cursor: pointer;
}

.container-paiement {
    text-align: center;
}

.text-paiement {
    margin-top: 200px;
    text-transform: uppercase;
    font-size: 45px;
    font-family: "Open Sans Condensed", sans-serif;
    color: orange;
    font-weight: bold;
    text-align: center;
}

.text-paiement span {

    color: #66ccff;

}

.btn-paiement-oui {
    border-radius: 7px;
    background-color: green;
    border: 1px solid #ffbc40;
    width: 150px;
    font-size: 40px;
    color: white;
    cursor: pointer;
    margin-top: 200px;
    margin-bottom: 410px;
}

.btn-paiement-non {
    border-radius: 7px;
    background-color: red;
    border: 1px solid #ffbc40;
    width: 150px;
    font-size: 40px;
    color: white;
    cursor: pointer;
    margin-top: 200px;
    margin-bottom: 410px;
}

.container-offre-annonce {
    width: 300px;
    border-radius: 22px;
    margin: 2% auto;
    box-shadow: var(--box-shadow);
    text-align: center;
    background-color: var(--light);
    padding: 15px 5px;
}

.container-offre-annonce-js{
    margin-left: auto;
    margin-right: auto;
}

.container_offre_annonce_haut_css {
    width: 300px;
    border-radius: 22px;
    margin: 2% auto;
    box-shadow: var(--box-shadow);
    text-align: center;
    background-color: var(--light);
    padding: 15px 5px;
}

.container-prenom-nom-offre-mecano {
    width: 100%;
    height: 10%;
    margin-top: 3%;
    margin-bottom: 5%;

}

.container-prenom-nom-offre-mecano a {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 5px;
}

.prenom-offre-mecano {
    color: var(--third-color-lighter);
}

.nom-offre-mecano {
    color: var(--third-color-lighter);
}

.avatar-offre-mecano {
    width: 60px;
    border-radius: 50px;
    clear: both;
    margin: 15px 0;
    height: 60px;
    object-fit: cover;
}

.titre-offre-mecano{
    color: var(--third-color);
    font-weight: bold;
    text-align: center;
}

.prix-offre-mecano {
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
    clear: both;
    color: var(--secondary-color);
}

.jour-offre-mecano {
    text-align: center;
    color: var(--third-color-lighter);
    padding: 5%;
    padding-bottom: 3%;
}

.heure-offre-mecano {
    font-weight: bold;
    text-align: center;
    color: var(--third-color);
}

.btn-accepter-offre {
    border-radius: var(--border-radius);
    min-height: 40px;
    border: none;
    color: var(--grey-light);
    background-color: var(--third-color);
    scale: 1;
    margin: 10px 0;
    cursor: pointer;
}

.btn-supprimer-offre {
    margin-top: 3%;
    background-color: orange !important;
    border-color: orange !important;
}

.container-modifier-offre {
    display: none;
    width: 100%;
    background-color: #c87ecd;
    height: 90%;
    position: absolute;
    border-top-right-radius: 22px;
    border-bottom-right-radius: 22px;
    margin-top: 17px;
}

.anim-modifier-btn {
    animation-name: anim;
    animation-duration: 4s;
    animation-fill-mode: forwards;
}

@keyframes anim {

    from {
        left: 0%
    }

    to {
        left: 330px;
    }

}

.container-prix-btn-offre {
    width: 190px;
    border: 2px solid orange;
    border-radius: 11px;
    margin-left: auto;
    margin-right: auto;
}

.btn-faire-offre {
    width: 100%;
    background-color: #ffa500 !important;
    border-color: #ffa500 !important;
}

.btn-faire-offre:hover {

    background-color: #00dbf3 !important;
    border-color: #00dbf3 !important;
}

.container-btn-indic-offre {
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
}



/*-------------------------Offre annonce----------------------------*/

.overlay-popup-offre {
    display: none;
}

.overlay-popup-offre-js {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    height: 100%;
    width: 100%;
    z-index: 9;
    background-color: #000000bd;
    left: 0;
}

.popup-form-offre {
    display: none;
}

.text-prix-frais {
    font-size: 14px;
    margin-top: 30px;
    color: var(--light);
    font-weight: 500;
}

@media screen and (max-width: 1300px) {
    .text-prix-frais {
    
    }
}

@media screen and (max-width: 950px) {
    .text-prix-frais {
        font-size: 17px;
    }
}

.container-btn-valid-offre {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    gap: 20px;
}

.formulaire-offre {
    width: 100%;
    padding: 7%;
    margin-bottom: 0;
}

.formulaire-offre label {
    margin-top: 30px;
    font-size: 14px;
    color: var(--light);
    font-weight: 500;
    margin-bottom: 10px;
}

.text-forfait-diagno{
    color: var(--secondary-color);
    margin-top: 20px;
    font-weight: 600;
}

.button-annonce-complete{
    cursor: pointer;
    margin-top: 10px;
}

.container-text-popup-offre {
    margin-left: auto;
    margin-right: auto;
    width: 30%;
}

@media screen and (max-width: 1100px) {
    .container-text-popup-offre {
        width: 100%;
    }
}

.container-ico-question {
    width: 40px;
    height: 40px;                             
    background-color: var(--primary-color);
    color: var(--light); 
    font-weight: bold;          /* texte en gras */
    font-size: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.popup-frais {
    display: none;
}

.text-popup-frais {
    line-height: 20px;
    font-size: 0.9rem;
}

.popup-frais-hover {
    display: flex;
    align-items: center;
    position: absolute;
    top: 150px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--light);
    width: 300px;
    height: 150px;
    color: var(--third-color);
    border-radius: 7px;
    padding: 0 15px;
    z-index: 10;
}

.popup-frais-hover span {
    margin-bottom: 9px;
    display: inline-block;
    margin-left: 7px;
}

.container-offre-haut-mecano {
    width: 100%;
    height: 100%;
    text-align: center;
}

.container-prenom-nom-offre-haut-mecano {
    width: 100%;
    height: 10%;
    margin-top: 3%;
    margin-bottom: 5%;
}

.container-prenom-nom-offre-haut-mecano a {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 5px;
}


.prenom-offre-haut-mecano {
    color: var(--third-color-lighter);
}

.nom-offre-haut-mecano {
    color: var(--third-color-lighter);
}

.titre-offre-haut-mecano{
    color: var(--third-color);
    font-weight: bold;
}

.avatar-offre-haut-mecano {
    width: 60px;
    border-radius: 50px;
    clear: both;
    margin: 15px 0;
    height: 60px;
    object-fit: cover;
}

.prix-offre-haut-mecano {
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
    clear: both;
    color: var(--secondary-color);
}

.jour-offre-haut-mecano {
    color: var(--third-color-lighter);
    padding: 5%;
    padding-bottom: 3%;
}

.heure-offre-haut-mecano {
    font-weight: bold;
    color: var(--third-color)
}

.btn-supprimer-offre-haut {
    margin-top: 3%;
    background-color: orange !important;
    border-color: orange !important;
}



/*---------------  footer -----------------------*/


.footer {
    overflow: hidden;
    height: auto;
    background-color: #fffad6;
    padding-top: 30px;
    border-top: 2px solid orange;
}

.trait-orange {
    width: 100%;
    margin-bottom: 2%;
    height: 200px;
    background-color: orange;
}

.a-propos {
    width: 20%;
    height: 100%;
}

.contact {
    width: 20%;
    height: 100%;
}

.categorie-footer {

    width: 20%;
    height: 100%;
}

.reseau {

    width: 20%;
    height: 100%;
    display: inline;
}

.service {

    width: 20%;
    height: 100%;
}

.titre-service {
    text-align: center;
    color: #66ccff;
    font-family: "Open Sans Condensed", sans-serif;
    font-weight: 700;
}

.service p {
    text-align: center;
    color: #404041;
    font-family: "Open Sans Condensed", sans-serif;
    font-weight: 700;
}

.service p:hover {
    color: orange;
}

.titre-a-propos {
    text-align: center;
    color: #66ccff;
    font-family: "Open Sans Condensed", sans-serif;
    font-weight: 700;
}

.a-propos p {
    text-align: center;
    color: #404041 !important;
    font-family: "Open Sans Condensed", sans-serif;
    font-weight: 700;
}

.a-propos a {
    text-align: center;
    color: #404041 !important;
    font-family: "Open Sans Condensed", sans-serif;
    font-weight: 700;
}

/*.a-propos a:hover{
    color: orange!important;
}*/

.titre-contact {
    text-align: center;
    color: #66ccff;
    font-family: "Open Sans Condensed", sans-serif;
    font-weight: 700;
}

.contact p {
    text-align: center;
    color: #404041;
    font-family: "Open Sans Condensed", sans-serif;
    font-weight: 700;
}

.contact p:hover {
    color: orange;

}

.titre-categorie-footer {
    text-align: center;
    color: #66ccff;
    font-family: "Open Sans Condensed", sans-serif;
    font-weight: 700;
}

.categorie-footer li {
    text-align: center;
    text-decoration: none;
    list-style: none;
}

.categorie-footer a {
    color: #404041 !important;
    font-family: "Open Sans Condensed", sans-serif;
    font-weight: 700;

}

*.categorie-footer a:hover {
    color: orange !important;
    font-family: "Open Sans Condensed", sans-serif;
    font-weight: 700;

}

*/ .trait-acueil {
    width: 100%;
    border: 1px solid #404041;
    margin-right: auto;
    margin-left: auto;
    margin-top: 50px;
    margin-bottom: 15px;
}

.titre-reseau {
    text-align: center;
}

.reseau p {
    text-align: center;
}

.facebook {
    color: #395693 !important;
    font-family: "Open Sans Condensed", sans-serif;
    font-weight: 700;
    padding-right: 1%;
}

.instagram {
    color: #f26f43 !important;
    font-family: "Open Sans Condensed", sans-serif;
    font-weight: 700;
    padding-right: 1%;
}

.youtube {
    color: red !important;
    font-family: "Open Sans Condensed", sans-serif;
    font-weight: 700;
}



.copyright {
    color: #404041;
    font-family: "Open Sans Condensed", sans-serif;
    font-weight: 700;
    margin-bottom: 15px !important;
}

.logo-footer {

    width: 20%;
    margin: auto;
    display: block;
    margin-top: 0.3%;
}


#myForm2 {
    width: 100%;
}



th {
    text-align: center !important;
}

.today {
    background: orange;
}

.dateclick {
    background: blue;
}

.active {
    color: red;
}

/* table td:hover {
    background: orange;
    cursor: pointer;
} */

table td .daytitle:nth-child(3) {
    display: none;
}

table td .daytitle-hover {
    position: absolute;
    left: 582px;
    top: 15%;
    width: 442px;
    list-style: none;
    margin: 0px 0px 0px 16px;
    padding: 0px;
    color: #D90000;
    font-size: 41px;
    display: block;
    font-weight: bold;
}



.checked {
    background-color: orange;
}

.img-mecano-bientot {
    position: absolute;
    top: 15%;
    left: 20%;
}

.carnet-bientot {
    position: absolute;
    top: 11%;
    left: 67%;
    list-style: none;
}

.cle2-bientot {
    position: absolute;
    top: 15%;
    left: 84%;
    list-style: none;
}

.tournevis-bientot {
    position: absolute;
    top: 36%;
    left: 92%;
    list-style: none;
}

.huile-bientot {
    position: absolute;
    top: 68%;
    left: 88%;
    list-style: none;
}

.stylo-bientot {
    position: absolute;
    top: 87%;
    left: 83%;
    list-style: none;
}

.triangle-bientot {
    position: absolute;
    top: 85%;
    left: 7%;
    list-style: none;
}

.cligno-bientot {
    position: absolute;
    top: 64%;
    left: 10%;
    list-style: none;
}

.vis-bientot {
    position: absolute;
    top: 38%;
    left: 6%;
    list-style: none;
}

.cle-bientot {
    position: absolute;
    top: 9%;
    left: 12%;
    list-style: none;
}

.container-bonhomme-bientot {
    position: relative;
    margin-top: 2%;
    margin-left: 5%;
    height: 80%;
    width: 40%;
    overflow: hidden;
    background-attachment: fixed;
}

.button-publication-bientot {
    height: 100px;
    font-size: 45px;
    width: 80%;
    position: absolute;
    top: 57%;
    left: 54%;
    max-width: 500px;
    border-radius: 27px;
    background-color: orange;
    border: 1px solid #ffbc40;
    color: white;
    cursor: pointer;
}

.slogan-bientot {
    text-transform: uppercase;
    font-size: 4.125em;
    font-family: "Open Sans Condensed", sans-serif;
    font-weight: 700;
    color: #00dbf3;
    position: absolute;
    left: 54%;
    top: 17%;
    font-size: 50px;
    width: 39%;
}

.container-condition-mangopay p {
    font-family: "Open Sans Condensed", sans-serif;
    font-weight: 700;
    color: #404041;
}


.container-condition-mangopay h3 {
    text-align: center;
    color: orange;
}

.container-condition-mangopay h4 {
    text-align: center;
    color: orange;
}

.container-condition-mangopay h5 {
    text-align: center;
    color: orange;
}

.container-condition-mangopay span {
    color: orange;
    font-weight: bold;
}

/*.container-titre-mangopay {
    margin-left: 15%;
    margin-right: 15%;
    margin-top: 140px;
}

.container-titre-mangopay h1{
    text-align: center;
    font-family: "Open Sans Condensed",sans-serif;
    font-weight: 700;
    color: #404041;
    font-size: 35px;
}

.container-titre-mangopay h2{
    text-align: center;
    font-family: "Open Sans Condensed",sans-serif;
    font-weight: 700;
    color: #404041;
    font-size: 28px;
}

.container-avertissement-mangopay{
border:2px solid orange;
}*/



.container-avertissement-mangopay h4 {
    color: orange;
    text-align: center;
    margin-top: 1%;
}

.container-avertissement-mangopay p {
    text-align: center;
    font-weight: bold;
}

.container-definition-mangopay {
    margin-left: 15%;
    margin-right: 15%;
}

.container-objet-mangopay {
    margin-left: 15%;
    margin-right: 15%;
}

.container-souscription-mangopay {
    margin-left: 15%;
    margin-right: 15%;
}

.container-ouverture-mangopay {
    margin-left: 15%;
    margin-right: 15%;
}

.container-ouverture-mangopay {
    margin-left: 15%;
    margin-right: 15%;
}

.container-compte-paiement-mangopay {
    margin-left: 15%;
    margin-right: 15%;
}


.container-liste-mangopay {
    margin-left: 15%;
    margin-right: 15%;

}

/*---------------  condition Drivossito -----------------------*/

/*
.container-condition-drivossito h1{
    margin-top: 8%;
    text-align: center;
    font-family: "Open Sans Condensed",sans-serif;
    font-weight: 700;
    color: #404041;
}


.container-condition-drivossito h3{
    text-align: center;
    color: orange;
}

.container-condition-drivossito h4{
    text-align: center;
    color: orange;
}

.container-condition-drivossito span{
    color: orange;
    font-weight: bold;
}

.container-liste-condition-drivossito{
    margin-left: 15%;
    margin-right: 15%;

}*/

/*.container-liste-preambule-drivossito{
    margin-left: 15%;
    margin-right: 15%;
}

.container-liste-preambule-drivossito p{
    font-weight: bold;
    font-size: 20px;
}*/

 /*----------------fin-annonce--------------------*/

/*.container-text-fin-annonce {
    text-align: center;
    margin-top: 2%;
    width: 50%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50px;
}

.button-terminer-fin-annonce {
    border-radius: 7px;
    background-color: orange;
    border: 1px solid #ffbc40;
    width: 150px;
    color: white;
    cursor: pointer;
    height: 50px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    font-size: 25px;
    font-weight: 700;
}

.container-text-fin-annonce p {
    color: #ffbc40;
    font-weight: bold;
    font-size: 1.2vw;
}

.container-text-fin-annonce span {
    color: #00dbf3;
    font-weight: bold;
    font-size: 1.2vw;
}

.container-mecano-fin-annonce {
    width: 320px;
    margin-left: auto;
    margin-right: auto;
    height: auto;
    margin-top: 8%;
}

.img-mecano-fin-annonce {
    width: 100%;
}

#compteur {
    margin-top: 2%;
    color: orange;
    font-weight: bold;
    font-size: 5.2vw;
    text-align: center;
}

#hukh {
    width: 10%;
} */

/*-------------------page recrutement mécano-------------------------------*/


/*#container-recrutement {
    background-color: #fffad6;
}

.container-recrutement {
    width: 40%;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 50px;
}*/

/*.titre-recrutement{
    text-align: center;
    font-family: "Open Sans Condensed",sans-serif;
    font-weight: 700;
    color: #404041;
    padding-top: 150px;
    font-size: 40px;
}

.titre-recrutement span{
    color: orange;
    font-weight: bold;
}*/

/*.preambule{
    font-weight: bold;
    font-size: 20px;
}*/


/*.container-recrutement span{
    color: orange;
    font-weight: bold;
}

.container-recrutement img{
    width: 600px;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.container-recrutement h2{
    text-align: center;
    color: orange;
}

.container-recrutement p{
    margin-left: auto;
    margin-right: auto;
    font-weight: bold;
    color: #404041;
}*/

.container-recutement-condition h2 {
    font-size: 20px;
    border: 2px solid orange;
    padding: 1em 3em 1em 2em;
    color: orange;
    cursor: pointer;
}

.container-recutement-condition h2:hover {
    background-color: #404041;
    color: white;
}

#reponse11 {
    font-size: 16px;
    color: #404041;
    margin-top: 20px;
}

.ici {
    cursor: pointer;
    font-size: 16px !important;
}

/*-------------------qui sommes nous-------------------------------*/

/*.container-nous h1{
    text-align: center;
    font-family: "Open Sans Condensed",sans-serif;
    font-weight: 700;
    color: #404041;
    padding-top: 150px;
    font-size: 40px;
}

.container-nous span{
    color: orange;
    font-weight: bold;
}

.container-nous p{
    font-weight: bold;
    color: #404041;
    font-size: 19px;
}*/


/*-------------------mentions legales-------------------------------*/

/*.container-mentions{
    width: 40%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 150px;
    padding-bottom: 50px;
}

.container-mentions h1{
    font-size: 40px;
    text-align: center;
    font-family: "Open Sans Condensed",sans-serif;
    font-weight: 700;
    color: orange;
    margin-bottom: 40px;
}

.container-mentions p{
    font-weight: bold;
    color: #404041;
    font-size: 19px;
}*/

/*--------------------------faq-------------------------------*/

/*#container-faq{

    background-color: #fffad6;
}

.container-faq{
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 150px;
    padding-bottom: 100px;
}

.container-faq h1{
    text-align: center;
    font-family: "Open Sans Condensed",sans-serif;
    font-weight: 700;
    color: #404041;
    font-size: 50px;
    margin-bottom: 40px;
}

.container-question{
    width: 60%;
    margin-left: auto;
    margin-right: auto;
    height: auto;
    cursor: pointer;
    border-bottom: dashed #66ccff;
}

.container-question h2{
    padding: 1em 3em 1em 2em;
    color: orange;
    font-size: 22px;
}
.container-question p{
    font-weight: bold;
    font-size: 18px;
    padding-bottom: 1%;
}

.container-faq button{
    margin-top: 5%;
    margin-left: auto;
    margin-right: auto;
    display: block;
    border: 3px solid #66ccff;
    font-size: 2rem;
    padding: 1rem;
    cursor: pointer;
    color: orange;
    background-color: white;
}

.container-faq button:hover{

    background-color: #66ccff;
    color: white;
    border: 3px solid #66ccff;


}*/


/*#menu2 {
    display: none;
    position: fixed;
    top: 0;
    background-color: #fffad6;
    width: 400px;
    height: 100%;
    border: 2px solid orange;
    cursor: pointer;
}

#menu2 li{
    margin-left: 20px;
    margin-top: 20px;
    list-style:none;
}*/

/*.trait-menu{
    width: 100%;
    border: 1px solid orange;
    margin: auto;
}*/

.container-logo-mobile {
    margin-top: 22px;
    margin-bottom: 35px;
    display: block;
    margin-left: 40px;
}

/*.a-menu{
    text-decoration: none;
    color: #404041;
    font-size: 20px!important;
    font-weight: bold;
}*/

/*.li-menu{
    margin-bottom: 20px;
    text-align: left;
}*/

/*.icone-burger {
    font-size: 34px;
    margin-left: 35px;
    margin-top: -4px;
    color: #404041;
    cursor: pointer;
}*/

.menu-user {
    display: none;
    background-color: red;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
}


/*----------------------------diagnostic---------------------------*/

.container-diagnostic {
    margin-top: 130px;
    width: 36%;
    height: 86%;
    margin-left: 32%;
    margin-bottom: 5%;
}

.diagnostic {
    width: 100%;
    border: 2px solid orange;
    height: 100%;
    position: relative;
}

.header-facture {
    display: flex;
    flex-direction: row;
    border-bottom: 2px solid orange;
    padding: 8px;
}

.container-adresse-facture {
    display: flex;
    flex-direction: row;
    margin-top: 2%;
    margin-bottom: 2%;
}

.container-n-facture {
    margin-left: 2%;
}

.container-n-facture p {
    font-family: "Open Sans Condensed", sans-serif;
    font-weight: 700;
    font-size: 15px;
}

.container-date-facture {
    margin-left: 66%;
}

.container-date-facture p {
    font-family: "Open Sans Condensed", sans-serif;
    font-weight: 700;
    font-size: 15px;
}

.container-dst-facture {
    width: 50%;

}

.span-facture {
    font-family: "Open Sans Condensed", sans-serif;
    font-weight: 700;
    color: orange;
    font-size: 25px;
}

.container-dst-facture p {
    font-family: "Open Sans Condensed", sans-serif;
    font-weight: 700;
    font-size: 15px;
    margin-left: 20%;
}



.container-client-facture {
    width: 50%;
}

.container-client-facture p {
    font-family: "Open Sans Condensed", sans-serif;
    font-weight: 700;
    font-size: 15px;
    margin-left: 20%;
}

.container-vehicule-facture {
    width: 100%;
    border-top: 2px solid orange;
    border-bottom: 2px solid orange;
    height: 50px;
    padding: 10px;
}

.container-vehicule-facture p {
    font-family: "Open Sans Condensed", sans-serif;
    font-weight: 700;
    font-size: 20px;
}

.container-presta-prix-facture {
    width: 100%;
    display: flex;
    flex-direction: row;
    margin-top: 2%;

}

.container-prestation-facture {
    width: 80%;

}

.container-prestation-facture h2 {
    margin-left: 5%;

}

.container-prestation-facture p {
    margin-left: 5%;
    font-family: "Open Sans Condensed", sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: orange;

}

.container-prix-facture {
    width: 200px;

}

.container-prix-facture p {
    font-family: "Open Sans Condensed", sans-serif;
    font-weight: 700;
    font-size: 18px;
    margin-left: 8%;

}

.container-total-facture {
    border-top: 2px solid orange;
    height: 50px;
    width: 100%;
    padding: 5px;
    position: absolute;
    bottom: 0;
}

.container-total-facture p {
    float: right;
    margin-right: 30px;
    font-family: "Open Sans Condensed", sans-serif;
    font-weight: 700;
    font-size: 24px;
}

@import url('https://fonts.googleapis.com/css?family=Abel');

.center {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
}

.card {
    width: 450px;
    height: 250px;
    background-color: #fff;
    background-color: #ffac3a;
    box-shadow: 0 8px 16px -8px rgba(0, 0, 0, 0.4);
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    margin: 1.5rem;
}

.card h1 {
    text-align: center;
}

.card .additional {
    position: absolute;
    width: 150px;
    height: 100%;
    background-color: #ffac3a;
    transition: width 0.4s;
    overflow: hidden;
    z-index: 2;
}

.card.green .additional {
    background: linear-gradient(#92bCa6, #A2CCB6);
}


.card:hover .additional {
    width: 100%;
    border-radius: 0 5px 5px 0;
}

.card .additional .user-card {
    width: 150px;
    height: 100%;
    position: relative;
    float: left;
}

.card .additional .user-card::after {
    content: "";
    display: block;
    position: absolute;
    top: 10%;
    right: -2px;
    height: 80%;
    border-left: 2px solid rgba(0, 0, 0, 0.025);

}

.card .additional .user-card .level,
.card .additional .user-card .points {
    top: 15%;
    color: #fff;
    text-transform: uppercase;
    font-size: 0.75em;
    font-weight: bold;
    background: rgba(0, 0, 0, 0.15);
    padding: 0.125rem 0.75rem;
    border-radius: 100px;
    white-space: nowrap;
}

.card .additional .user-card .points {
    top: 85%;
}

.card .additional .user-card svg {
    top: 50%;
}

.card .additional .more-info {
    width: 300px;
    float: left;
    position: absolute;
    left: 150px;
    height: 100%;
}

.card .additional .more-info h1 {
    color: #fff;
    margin-bottom: 0;
}

.card.green .additional .more-info h1 {
    color: #224C36;
}

.card .additional .coords {
    margin: 0 1rem;
    color: #fff;
    font-size: 1rem;
}

.card.green .additional .coords {
    color: #325C46;
}

.card .additional .coords span+span {
    float: right;
}

.card .additional .stats {
    font-size: 2rem;
    display: flex;
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    right: 1rem;
    top: auto;
    color: #fff;
}

.card.green .additional .stats {
    color: #325C46;
}

.card .additional .stats>div {
    flex: 1;
    text-align: center;
}

.card .additional .stats i {
    display: block;
}

.card .additional .stats div.title {
    font-size: 0.75rem;
    font-weight: bold;
    text-transform: uppercase;
}

.card .additional .stats div.value {
    font-size: 1.5rem;
    font-weight: bold;
    line-height: 1.5rem;
}

.card .additional .stats div.value.infinity {
    font-size: 2.5rem;
}

.card .general {
    width: 300px;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    box-sizing: border-box;
    padding: 1rem;
    padding-top: 0;
}

.card .general .more {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    font-size: 0.9em;
    color: orange;
}

/*----------------------------partenaire---------------------------*/

#partenaire {
    margin-top: 90px;
    text-align: center;
}

.bar-recherche-partenaire {
    width: 55%;
    margin: auto;
    display: flex;
    flex-flow: row wrap;
    margin-top: 30px !important;

}

.btn-bar-partenaire {
    width: 90% !important;
    margin-right: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.btn-search-partenaire {
    width: 10% !important;
    color: white !important;
    background-color: orange !important;
    border-color: orange !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.locale-ligne {
    width: 55%;
    height: 30px;
    background-color: white;
    margin: auto;
    display: flex;
    flex-flow: row wrap;
    margin-top: 50px;
}

#locale {
    height: 100%;
    background-color: orange;
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#locale p {
    cursor: pointer;
}

#ligne {
    height: 100%;
    background-color: #66ccff;
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#ligne p {

    cursor: pointer;
}

#section-partenaire-admin {
    width: 30%;
}

.partenaire {
    width: 55%;
    height: 180px;
    margin: auto;
    display: flex;
    flex-flow: row wrap;
    margin-top: 60px;
    background-color: white;
}

.container-logo-partenaire {
    height: 100%;
    width: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo-partenaire {
    width: 170px;
    height: 100px;
}

.container-titre-partenaire {
    height: 100%;
    width: 520px;
}

.titre-partenaire {
    margin-top: 15px;
    font-size: 30px;
    color: #404041;
}

.description-partenaire {
    font-size: 15px;
    color: #404041;
    width: 90%;
    height: 80px;
    word-wrap: break-word;
    margin-top: 20px;
}


.lieu-partenaire {
    font-size: 20px;
    color: #404041;
}

.container-reduction-partenaire {
    height: 100%;
    width: 210px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.reduction-partenaire {
    font-size: 20px;
    color: #66ccff;
    font-weight: bold;
}

/* .container-disponibilite {
    margin-top: 50px;
    text-align: center;
}

.container-disponibilite h1 {
    font-size: 40px;
    color: #ffbc40;
} */

/* .container-semaine {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    margin-top: 60px;
    margin-bottom: 60px;
} */

/* #lundi,
#mardi,
#mercredi,
#jeudi,
#vendredi,
#samedi,
#dimanche,
#matin,
#midi,
#aprem,
#soir,
#lundiMoto,
#mardiMoto,
#mercrediMoto,
#jeudiMoto,
#vendrediMoto,
#samediMoto,
#dimancheMoto,
#matinMoto,
#midiMoto,
#apremMoto,
#soirMoto,
#lundiVehiculePro,
#mardiVehiculePro,
#mercrediVehiculePro,
#jeudiVehiculePro,
#vendrediVehiculePro,
#samediVehiculePro,
#dimancheVehiculePro,
#matinVehiculePro,
#midiVehiculePro,
#apremVehiculePro,
#soirVehiculePro,
#lundiCampingCar,
#mardiCampingCar,
#mercrediCampingCar,
#jeudiCampingCar,
#vendrediCampingCar,
#samediCampingCar,
#dimancheCampingCar,
#matinCampingCar,
#midiCampingCar,
#apremCampingCar,
#soirCampingCar {
    display: none;
}
 */

/* .btn-checkbox-lundi,
.btn-checkbox-mardi,
.btn-checkbox-mercredi,
.btn-checkbox-jeudi,
.btn-checkbox-vendredi,
.btn-checkbox-samedi,
.btn-checkbox-dimanche {
    width: 50px;
    height: 50px;
    background: #fff;
    border-radius: 5px;
    text-align: center;
    padding: 48px 50px;
    cursor: pointer;
    color: #66ccff;
    border: 5px solid transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 500;

}
 */
/* #lundi:checked~.btn-checkbox-lundi {
    border-color: orange;
    color: orange;
}

#mardi:checked~.btn-checkbox-mardi {
    border-color: orange;
    color: orange;
}

#mercredi:checked~.btn-checkbox-mercredi {
    border-color: orange;
    color: orange;
}

#jeudi:checked~.btn-checkbox-jeudi {
    border-color: orange;
    color: orange;

}

#vendredi:checked~.btn-checkbox-vendredi {
    border-color: orange;
    color: orange;
}

#samedi:checked~.btn-checkbox-samedi {
    border-color: orange;
    color: orange;
}

#dimanche:checked~.btn-checkbox-dimanche {
    border-color: orange;
    color: orange;
}


#lundiMoto:checked~.btn-checkbox-lundi {
    border-color: orange;
    color: orange;
}

#mardiMoto:checked~.btn-checkbox-mardi {
    border-color: orange;
    color: orange;
}

#mercrediMoto:checked~.btn-checkbox-mercredi {
    border-color: orange;
    color: orange;
}

#jeudiMoto:checked~.btn-checkbox-jeudi {
    border-color: orange;
    color: orange;

}

#vendrediMoto:checked~.btn-checkbox-vendredi {
    border-color: orange;
    color: orange;
}

#samediMoto:checked~.btn-checkbox-samedi {
    border-color: orange;
    color: orange;
}

#dimancheMoto:checked~.btn-checkbox-dimanche {
    border-color: orange;
    color: orange;
}

#lundiVehiculePro:checked~.btn-checkbox-lundi {
    border-color: orange;
    color: orange;
}

#mardiVehiculePro:checked~.btn-checkbox-mardi {
    border-color: orange;
    color: orange;
}

#mercrediVehiculePro:checked~.btn-checkbox-mercredi {
    border-color: orange;
    color: orange;
}

#jeudiVehiculePro:checked~.btn-checkbox-jeudi {
    border-color: orange;
    color: orange;

}

#vendrediVehiculePro:checked~.btn-checkbox-vendredi {
    border-color: orange;
    color: orange;
}

#samediVehiculePro:checked~.btn-checkbox-samedi {
    border-color: orange;
    color: orange;
}

#dimancheVehiculePro:checked~.btn-checkbox-dimanche {
    border-color: orange;
    color: orange;
}

#lundiCampingCar:checked~.btn-checkbox-lundi {
    border-color: orange;
    color: orange;
}

#mardiCampingCar:checked~.btn-checkbox-mardi {
    border-color: orange;
    color: orange;
}

#mercrediCampingCar:checked~.btn-checkbox-mercredi {
    border-color: orange;
    color: orange;
}

#jeudiCampingCar:checked~.btn-checkbox-jeudi {
    border-color: orange;
    color: orange;

}

#vendrediCampingCar:checked~.btn-checkbox-vendredi {
    border-color: orange;
    color: orange;
}

#samediCampingCar:checked~.btn-checkbox-samedi {
    border-color: orange;
    color: orange;
}

#dimancheCampingCar:checked~.btn-checkbox-dimanche {
    border-color: orange;
    color: orange;
} */

/* .container-heure {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    margin-top: 60px;
} */

/*.btn-checkbox-matin,
.btn-checkbox-midi,
.btn-checkbox-aprem,
.btn-checkbox-soir {
    width: 145px;
    height: 50px;
    background: #fff;
    border-radius: 5px;
    cursor: pointer;
    color: #66ccff;
    border: 5px solid transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 500;

}*/

/* #matin:checked~.btn-checkbox-matin {
    border-color: orange;
    color: orange;
}

#midi:checked~.btn-checkbox-midi {
    border-color: orange;
    color: orange;
}

#aprem:checked~.btn-checkbox-aprem {
    border-color: orange;
    color: orange;
}

#soir:checked~.btn-checkbox-soir {
    border-color: orange;
    color: orange;
}

#matinMoto:checked~.btn-checkbox-matin {
    border-color: orange;
    color: orange;
}

#midiMoto:checked~.btn-checkbox-midi {
    border-color: orange;
    color: orange;
}

#apremMoto:checked~.btn-checkbox-aprem {
    border-color: orange;
    color: orange;
}

#soirMoto:checked~.btn-checkbox-soir {
    border-color: orange;
    color: orange;
}

#matinVehiculePro:checked~.btn-checkbox-matin {
    border-color: orange;
    color: orange;
}

#midiVehiculePro:checked~.btn-checkbox-midi {
    border-color: orange;
    color: orange;
}

#apremVehiculePro:checked~.btn-checkbox-aprem {
    border-color: orange;
    color: orange;
}

#soirVehiculePro:checked~.btn-checkbox-soir {
    border-color: orange;
    color: orange;
}

#matinCampingCar:checked~.btn-checkbox-matin {
    border-color: orange;
    color: orange;
}

#midiCampingCar:checked~.btn-checkbox-midi {
    border-color: orange;
    color: orange;
}

#apremCampingCar:checked~.btn-checkbox-aprem {
    border-color: orange;
    color: orange;
}

#soirCampingCar:checked~.btn-checkbox-soir {
    border-color: orange;
    color: orange;
}
 */
/* .btn-validation-form-annonce {
    border-radius: 7px;
    background-color: #ffbc40;
    border: 1px solid #ffbc40;
    color: white;
    cursor: pointer;
    font-size: 33px;
    padding: 4px 20px;
    font-weight: 500;
    margin-top: 50px;
} */

.icone-user-deco {
    display: none;
}

.icone-user-co {
    display: none;
}

.btn-checkbox-jour-recap {
    background-color: var(--light);
    color: var(--third-color-lighter);
    padding: 10px;
    border: 2px solid var(--third-color-transparent);
    border-radius: var(--border-radius);
    margin: 5px;
    cursor: pointer;
    display: inline-block;
    min-width: 200px;
    transition: transform 1s ease, color 1s ease, font-weight 1s ease;
    scale: 1;

}

/* .btn-checkbox-heure-recap {
    padding: 5%;
    min-height: 50px;
    background: #fff;
    border-radius: 5px;
    cursor: pointer;
    color: #66ccff;
    border: 5px solid transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 500;

} */

.container-btn-cont-mobile {
    display: none;
}

.container-texte-nous {
    width: 45%;
    margin-left: auto;
    margin-right: auto;
}

.container-texte-recrutement {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

/* #container-annonce-profil-public {
    width: 100%;
    background-color: #fffad6;
} */


/*------------------------------ facture devis ----------------------------------------*/

.containe_facture_devis{
    padding:110px 10% 10% 10%;
}


.container-devis-monprofil {
    padding: 50px;
    width: 900px;
    margin-left: auto;
    margin-right: auto;
    border: 2px solid black;
}

.logo_devis{
    width: 200px;
}

.container-devis-monprofil h2{
    font-size: 20px;
}

.vehicule-devis-monprofil{
    margin-left: 20px;
}
/* .container-facture {
    width: 500px;
    border: 2px solid black;
    margin-left: 100px;
    background-color: white;
    margin-bottom: 40px;
    margin-left: auto;
    margin-right: auto;
}

.container-facture p {
    font-weight: 600;
} */

.entete-devis-monprofil {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: space-between;
}

.numero-devis-monprofil {

}

.date-devis-monprofil {

}

table.facture {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

table.facture thead {
  background-color: #333;
  color: white;
}

table.facture th{
  padding: 10px;
}

table.facture td {
  border: 1px solid #ccc;
  padding: 10px;
  vertical-align: top;
}

.td_facture{
  text-align: right; 
}

table.facture td ul {
  margin: 5px 0 0 20px;
  padding-left: 0;
}

table.recapitulatif {
    margin-left: auto;
    width: 60%;
    border-collapse: collapse;
    margin-top: 20px;
}

table.recapitulatif thead {
  background-color: #333;
  color: white;
}

table.recapitulatif th{
  padding: 10px;
}

table.recapitulatif td {
  border: 1px solid #ccc;
  padding: 10px;
  vertical-align: top;
}

.td_recapitulatif{
  text-align: right; 
}

table.recapitulatif td ul {
  margin: 5px 0 0 20px;
  padding-left: 0;
}

/* .trait-noir-devis-monprofil {
    border-top: 1px solid black;
    width: 94%;
    margin-left: auto;
    margin-right: auto;
}
 */

/* .adresse-devis-monprofil {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    margin: 10px auto;
} */

/* .vehicule-devis-monprofil p {
    margin-left: 20px;
    margin-top: 5px;
    margin-bottom: 5px !important;
} */

/* .container-panne-devis-monprofil {
    display: flex;
    flex-flow: column wrap;
    justify-content: space-around;
} */

/* .panne-devis-monprofil {
    display: flex;
    flex-flow: row wrap;
    margin-top: 20px;
    margin-bottom: 20px;
} */

.nom-panne-devis-monprofil {
    margin-left: 60px;
    text-transform: uppercase;
    font-size: 13px;
}

.prix-ht-panne-devis-monprofil {
    margin-left: auto;
    margin-right: 60px;
    text-transform: uppercase;
    font-size: 13px;
}

.prix-ttc-panne-devis-monprofil {
    margin-right: 60px;
    text-transform: uppercase;
    font-size: 13px;
}

/* .trait-noir-panne-devis-monprofil {
    border-top: 1px solid black;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
} */

/* .container-prix-totale-monprofil {
    display: flex;
    flex-flow: row wrap;
    margin-top: 20px;
    border-top: 2px solid black;
} */

/* .container-prix-total-facture {
    display: flex;
    flex-flow: row wrap;
    margin-top: 20px;
    border-top: 2px solid black;
} */

/* .texte-prix-totale-monprofil {
    margin-left: 20px;
    margin-top: 10px;
    margin-bottom: 5px !important;
}
 */
/* .prix-totale-monprofil {
    margin-left: auto;
    margin-right: 20px;
    margin-top: 10px;
    margin-bottom: 5px !important;
} */

/* .container-titre-panne-devis-monprofil {
    display: flex;
    flex-flow: row wrap;
    margin-bottom: 5px;
}
 */
/* .titre-panne-devis-monprofil {
    margin-left: 60px;
    margin-top: 10px;
    margin-bottom: 5px !important;
}
 */
/* .titre-prix-ht-devis-monprofil {
    margin-left: auto;
    margin-right: 35px;
    margin-top: 10px;
    margin-bottom: 5px !important;
}
 */
/* .titre-prix-ttc-devis-monprofil {
    margin-right: 42px;
    margin-top: 10px;
    margin-bottom: 5px !important;
} */

/* .frais-drivossito-monprofil {
    display: flex;
    flex-flow: row wrap;
    margin-top: 20px;
    margin-bottom: 5px;
}
 */
.deduction-drivossito-monprofil {
    display: flex;
    flex-flow: row wrap;
    margin-top: 20px;
    padding-bottom: 20px;
    border-bottom: 2px solid black;
}

/* .titre-frais-service-monprofil {
    margin-left: 20px;
} */

/* .pourcentage-frais-service-monprofil {
    margin-left: auto;
    margin-right: 20px;
} */

/* .total-prix-monprofil {
    display: flex;
    flex-flow: row wrap;
    margin-top: 20px;
    padding-bottom: 20px;
    border-bottom: 2px solid black;
} */

/* .titre-prix-totale-monprofil {
    margin-left: 60px;
} */

/* .prix-ht-totale-monprofil {
    margin-left: auto;
    margin-right: 60px;
    text-transform: uppercase;
    font-size: 13px;
} */

/* .prix-ttc-totale-monprofil {
    margin-right: 27px;
    text-transform: uppercase;
    font-size: 13px;
} */

/*----------------Recuperation mot de passe----------*/

/*.container-recup-mdp{
    width: 100%;
    height: auto;
}*/

/*.container-form-recup-mdp{
    margin-top: 200px;
    background-color: #404041;
    margin-left: auto;
    margin-right: auto;
    width: 700px;
    height: 220px;
    margin-bottom: 200px;
    padding: 20px 20px;
}*/

/*.container-recup-mdp h4{
    font-size: 20px;
    color: #fffad6;
}*/

/*.text-recup-mail{
    font-size: 15px;
    color: #fffad6;
}*/

/*.email-form-recup-mdp{
    width: 40%!important;
}*/

/*.submit-form-recup-mdp{
    margin-top: 10px;
    background-color: orange;
    color: white;
    font-weight: 600!important;
}*/

.erreur-recup-mdp {
    font-weight: 500;
    font-size: 20px;
    color: red;

}

.popup-form-offre-mobile {
        display: flex;
        justify-content: center;
        align-items: center;
        position: fixed;
        top: 0;
        height: 100%;
        width: 100%;
        z-index: 9;
        background-color: var(--third-color);
        color: var(--light);
        margin: 0;
}

.container-btn-faire-offre-mobile {
    z-index: 1;
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    bottom: 0;
    width: 100%;
    height: 60px;
    background-color: var(--third-color);
    box-shadow: 0px 0px 5px #555;
}

.button-faire-offre-mobile{
    border-radius: var(--border-radius);
    min-height: 40px;
    border: none;
    color: var(--grey-light);
    background-color: var(--third-color);
    scale: 1;
    margin: 10px 0;
    background-color: var(--primary-color);
    padding: 0 5%;
    font-weight: 600;
    cursor: pointer;  
}

/*.icone-fermer-offre-mobile{
    display: none;
}*/

/*.aucune-description-profil {
    text-align: center;
    color: #d51616;
    font-weight: 700;
    font-size: 20px;
    margin-top: 50px;
}*/

.icone-notif-mobile {
    display: none;
}

.paiement-sucess {
    color: orange;
    font-weight: bold;
    font-size: 1.2vw;
    text-align: center;
}

.paiement-failed {
    color: #ff3535;
    font-weight: bold;
    font-size: 1.2vw;
    text-align: center;
}

.text-attente-confirm {
    color: green;
    font-weight: 500;
    font-size: 12px;
    padding-bottom: 3%;
    padding-top: 4%;
}

.btn-annuler-offre {
    color: red;
    display: inline-block;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
}

.btn-annuler-offre:hover {
  text-decoration: underline;
}

.btn-annuler-modifier-rdv-offre{
    border-radius: var(--border-radius);
    min-height: 40px;
    border: none;
    color: var(--grey-light);
    background-color: var(--third-color);
    scale: 1;
    margin: 10px 0;
    cursor: pointer;
}

.btn-annuler-rdv-after-paiement{
    border-radius: var(--border-radius);
    min-height: 40px;
    border: none;
    color: var(--grey-light);
    background-color: var(--third-color);
    scale: 1;
    margin: 10px 0;
    cursor: pointer;
}

.container-vehicule-annonce-resumer svg {
        stroke: var(--primary-color);
        fill: var(--primary-color);
        width: 70px;
        height: 70px;
}

.btn-liste-reparation-autre{
    color: var(--primary-color);
}

.container-icone-fermer-offre-mobile{
    position: absolute;
    top: 70px;
    right: 35px;
    cursor: pointer;

}

.icone-fermer-offre-mobile{
    font-size: 2rem;
}



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

    .container-bonhomme img {
        width: 750px;
    }

    .slogan {
        width: 664px;
        font-size: 46px;
    }

    .container-icone-index {
        width: 458px;
        margin-top: 20px;
    }

    /*.container-voiture-index:nth-child(1) {
    border-radius: 15px;
    width: 105px;
    height: 100px;
}

.container-voiture-index:nth-child(2) {
    border-radius: 15px;
    width: 105px;
    height: 100px;
}

.container-voiture-index:nth-child(3) {
    border-radius: 15px;
    width: 105px;
    height: 100px;
}

.container-voiture-index:nth-child(4) {
    border-radius: 15px;
    width: 105px;
    height: 100px;
}*/

    .voiture-index {
        font-size: 62px;
    }

    /*.button-publication {
    font-size: 30px;
    border-radius: 20px;
}*/

    .button-repondre-annonce {
        font-size: 30px;
        border-radius: 20px;
    }

    .annonce-index {
        border-radius: 40px;
    }

    .container-ville {
        margin-top: 5%;
    }

    .button-repondre-annonce-js {
        font-size: 15px !important;
        padding: 10px 10px !important;
        height: auto;
        font-size: 20px !important;
        border-radius: 10px !important;
    }

    .text-categorie {
        font-size: 70px;
        margin-top: 11%;
    }

    .text-choisir-panne-js {
        font-size: 60px;
        margin-top: 2%;
        margin-right: 5%;
    }

    /*#form-toute-panne p {
    font-size: 21px;
}*/

    .text-dispo-form-js {
        font-size: 55px;
        margin-top: 8%;
    }

    .text-recap-form-js {
        font-size: 55px;
        margin-top: 8%;
    }

    .container-profil-info-public {
        height: 640px;
    }

    .container-description {
        margin-top: 11%;
    }

    .container-faq h1 {
        margin-top: 10px;
        margin-bottom: 5%;
    }

    .container-question h2 {
        font-size: 25px;
    }

    /*.container-recrutement h1 {
    margin-top: 7%;
}

.container-recrutement h2 {
    font-size: 30px;
}

.container-recrutement p {
    font-size: 18px;
}*/

    .i-bateau {
        height: 50px;
        width: 70px;
    }




}

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

    /*.logo {
    width: 310px;
    height: 45px;
}*/

    .container-bonhomme img {
        width: 700px;
    }

    .slogan {
        width: 620px;
        font-size: 43px;
    }

    .container-icone-index {
        width: 415px;
    }

    /*.container-voiture-index:nth-child(1) {
    border-radius: 13px;
    width: 95px;
    height: 90px;
}

.container-voiture-index:nth-child(2) {
    border-radius: 13px;
    width: 95px;
    height: 90px;
}

.container-voiture-index:nth-child(3) {
    border-radius: 13px;
    width: 95px;
    height: 90px;
}

.container-voiture-index:nth-child(4) {
    border-radius: 13px;
    width: 95px;
    height: 90px;
}*/

    .voiture-index {
        font-size: 55px;
    }

    /*.button-publication {
    font-size: 27px;
    border-radius: 13px;
    margin-top: 41px;
}*/

    .button-repondre-annonce {
        font-size: 27px;
        border-radius: 13px;
        margin-top: 41px;
    }

    .button-repondre-annonce-js {
        font-size: 15px !important;
        padding: 10px 10px !important;
        height: auto;
        font-size: 17px !important;
        border-radius: 10px !important;
        max-width: 315px;
        margin-top: 14px !important;
        left: 800px;
    }

    .titre-comment {
        font-size: 45px;
        margin-bottom: 50px;
    }


    .text-categorie {
        font-size: 70px;
    }

    .icone-carte {
        font-size: 65px;
        margin-top: 12%;
    }

    .etape2 p {
        margin-top: 15%;
        font-size: 15px;
    }

    .etape3 p {
        margin-top: 15%;
        font-size: 15px;
    }

    .titre-pk {
        font-size: 45px;
        margin-bottom: 130px;
        margin-top: 60px;
    }

    .titre-temps {
        width: 490px;
        font-size: 40px;
    }

    .texte-temps {
        width: 490px;
    }

    .container-texte-tel {
        padding-top: 6%;
    }

    .titre-tel {
        width: 577px;
        font-size: 39px;
    }

    .texte-tel {
        width: 577px;
    }

    .container-texte-argent {
        padding-top: 2%;
    }

    .titre-argent {
        width: 490px;
        font-size: 40px;
    }

    .texte-argent {
        width: 490px;
    }

    /* .rating2 {
        margin-left: 27%;
        margin-top: 7%;
    }

    .rating2 label:before {
        font-size: 35px;
    } */


    .text-categorie {
        font-size: 60px;
    }

    .text-choisir-panne-js {
        font-size: 55px;
    }

    .text-remplir-form-js {
        font-size: 55px;
        margin-top: 9%;
    }

    .text-container-form-marque-modele {
        font-size: 45px;
    }

    .text-container-form-titre-description {
        font-size: 45px;
    }

    .text-container-form-prix-bouton {
        font-size: 45px;
    }

    .container-form-marque-modele {
        border-radius: 15px;
    }

    .container-form-titre-description {
        border-radius: 15px;
    }

    .container-form-prix-bouton {
        border-radius: 15px;
    }

   /*  #form-recap-panne p {
        font-size: 18px;
    } */

    .container-faq h1 {
        margin-top: 10px;
        font-size: 48px;
    }

    /*.container-info-perso {
    width: 80%;
}*/










}


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


    .container-bonhomme img {
        width: 640px;
    }

    .slogan {
        width: 580px;
        font-size: 40px;
    }

    .container-icone-index {
        width: 387px;
    }

    /*.container-voiture-index:nth-child(1) {
    border-radius: 13px;
    width: 90px;
    height: 85px;
}

.container-voiture-index:nth-child(2) {
    border-radius: 13px;
    width: 90px;
    height: 85px;
}

.container-voiture-index:nth-child(3) {
    border-radius: 13px;
    width: 90px;
    height: 85px;
}

.container-voiture-index:nth-child(4) {
    border-radius: 13px;
    width: 90px;
    height: 85px;
}*/

    .voiture-index {
        font-size: 50px;
    }

    /*.button-publication {
    font-size: 24px;
    border-radius: 14px;
}*/


    .button-repondre-annonce {
        font-size: 24px;
        border-radius: 14px;
    }

    .button-repondre-annonce-js {
        left: 750px;
    }


    .container-img-tel {
        padding-right: 0;
        padding-left: 100px;
    }

    .text-categorie {
        font-size: 60px;
    }

    .text-categorie {
        font-size: 55px;
    }

    .text-choisir-panne-js {
        font-size: 50px;
    }

    .text-remplir-form-js {
        font-size: 50px;
    }

    .calendrier-categorie {
        width: 80% !important;
        margin-top: 2%;
    }

    .text-dispo-form-js {
        font-size: 50px;
        margin-top: 8%;
    }

    .text-recap-form-js {
        font-size: 50px;
        margin-top: 8%;
    }

    .titre-mes-annonces {
        font-size: 50px;
    }

    .text-paiement {
        margin-top: 250px;
        font-size: 40px;
    }

    .container-texte-nous {
        width: 50%;
    }

    /*.container-recrutement {
    width: 50%;
}*/


}

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

    .button-repondre-annonce-js {
        left: 670px;
        font-size: 14px !important;
        padding: 10px 15px !important;
    }

    .container-bonhomme img {
        width: 550px;
    }

    .slogan {
        width: 533px;
        font-size: 37px;
        padding-top: 10.5%;
    }

    .container-icone-index {
        width: 370px;
        margin-top: 10px;
    }

    /*.container-voiture-index:nth-child(1){
    border-radius: 10px;
    width: 85px;
    height: 80px;
}

.container-voiture-index:nth-child(2){
    border-radius: 10px;
    width: 85px;
    height: 80px;
}

.container-voiture-index:nth-child(3){
    border-radius: 10px;
    width: 85px;
    height: 80px;
}

.container-voiture-index:nth-child(4){
    border-radius: 10px;
    width: 85px;
    height: 80px;
}*/

    /*.button-publication {
    font-size: 23.5px;
    padding: 22px 20px;
}*/

    .button-repondre-annonce {
        font-size: 23.5px;
        padding: 22px 20px;
    }

    .titre-comment {
        font-size: 45px;
    }

    .icone-crayon {
        font-size: 60px;
        margin-top: 17%;
    }

    .icone-cle-marche {
        font-size: 60px;
        margin-top: 17%;
    }

    .icone-carte {
        font-size: 60px;
        margin-top: 17%;
    }

    .titre-pk {
        font-size: 45px;
    }

    .titre-temps {
        width: 425px;
        font-size: 35px;
    }

    .texte-temps {
        width: 425px;
        font-size: 15px;
    }

    .titre-tel {
        width: 518px;
        font-size: 35px;
    }

    .texte-tel {
        width: 518px;
        font-size: 15px;
    }

    .titre-argent {
        width: 370px;
        font-size: 35px;
    }

    .texte-argent {
        width: 370px;
        font-size: 15px;
    }




    .container-avis-index h4 {
        font-size: 37px;
    }

    .container-annonce-index h4 {
        font-size: 37px;
    }

    .avis-index {
        height: 140px;
        width: 500px;
        border-radius: 15px;
    }

    .annonce-index {
        height: 270px;
        width: 290px;
        margin-left: 10px;
        margin-top: 1px;
        border-radius: 25px;
    }

    .icone-vehicule-index {
        font-size: 72px;
        margin-top: 15px;
    }

    .container-ville h1 {
        font-size: 35px;
    }

    .container-liste-ville li {
        font-size: 16px;
    }



    .container-img-temps {
        padding-left: 0;
    }

    .container-texte-temps {
        padding-right: 0;
    }

    .container-img-argent {
        padding-left: 0;
    }

    .container-texte-argent {
        padding-right: 0;
    }



    .text-categorie {
        font-size: 50px;
    }

    .text-choisir-panne-js {
        font-size: 45px;
    }

    /* .form-panne-centre {
    height: 89px;
}
 */
    .text-remplir-form-js {
        font-size: 45px;
    }

    .container-tout-marque-modele {
        width: 300px;
    }

    .text-container-form-marque-modele {
        font-size: 40px;
        margin-bottom: 5% !important;
    }

    .container-form-marque-modele {
        height: 240px;
        padding: 9%;
        padding-top: 2%;
    }

    .container-tout-titre-description {
        width: 300px;
    }


    .text-container-form-titre-description {
        font-size: 40px;
        margin-bottom: 5% !important;
    }

    .container-form-titre-description {
        height: 240px;
        padding: 9%;
    }

    .container-tout-prix-bouton {
        width: 300px;
    }

    .text-container-form-prix-bouton {
        font-size: 40px;
        margin-bottom: 5% !important;
    }

    .container-form-prix-bouton {
        width: 100%;
        height: 240px;
        padding: 9%;
        ;
    }

    .container-form-marque-modele select {
        font-size: 25px;
    }

    .container-form-marque-modele input {
        font-size: 25px;
    }

    .container-form-titre-description input {
        font-size: 25px;
    }

    .container-form-prix-bouton input {
        font-size: 25px;
    }

    /* td {
        font-size: 13px;
    } */

    th {
        font-size: 13px;
    }

    /* .container-recap-panne {
        width: 25%;
        margin-left: 3%;
    } */

    .container-recap-text-annonce {
        margin-left: 3%;
    }

    .text-dispo-form-js {
        font-size: 45px;
    }

    .text-recap-form-js {
        font-size: 45px;
    }

    /* .container-mecano-fin-annonce {
        width: 260px;
    } */

    .container-orange {
        border-top-left-radius: 30px;
        border-top-right-radius: 30px;
    }

    .container-profil-info-public {
        height: 540px;
        width: 340px;
        border-radius: 30px;
    }

    .container-profil-info-public img {
        height: 22%;
        width: 37%;
        top: 10%;
        left: 31%;
    }

    /*.rating-profil label:before {
    font-size: 32px;
}*/

    .container-profil-info-public h2 {
        margin-top: 31%;
        font-size: 25px;
    }

    .icone-calendrier {
        font-size: 25px;
    }

    .container-profil-info-public p {
        font-size: 17px;
    }

    .container-profil-info-public p {
        font-size: 17px;
    }

  /*   .icone-pos {
        font-size: 25px;
    } */

    .container-description {
        margin-top: 3%;
        margin-bottom: 2%;
    }

    .container-description h4 {
        margin-left: 5%;
        font-size: 21px;
    }

    .container-description p {
        font-size: 15px;
    }

    /*.container-avis-mecano h3 {
        font-size: 30px;
    }*/

    /* .avis {
        height: 120px;
    } */

    .titre-mes-annonces {
        font-size: 45px;
    }

    /*.container-recrutement h1 {
    margin-top: 9%;
    font-size: 33px;
}*/

    .container-faq h1 {
        margin-top: 10px;
        font-size: 40px;
    }

    .container-question h2 {
        font-size: 23px;
    }

    .container-question p {
        font-size: 18px;
    }

    .container-annonce-dispo h2 {
        font-size: 30px;
        margin-bottom: 25px;
    }

    #container-description-annonce-complete {
        margin-left: 150px;
    }

    #container-piece-annonce-complete {
        margin-left: 150px;

    }

   /*  .container-lieu-annonce-recap {
        margin-left: 150px;

    } */

    .container-prix-btn-offre {
        width: 190px;
        height: 109px;
    }

    .prix1-annonce-complete {
        font-size: 45px;
    }

    .prix2-annonce-complete {
        font-size: 45px;
    }

    .comment2 {
        font-size: 21px;
        margin-top: 7%;
        margin-bottom: 4% !important;
    }

    .bg2,
    .button2 {
        width: 40px;
        height: 40px;
    }

    .button {
        margin-top: -40px;
        width: 40px;
        height: 40px;
    }

    /* .rating2 {
        margin-left: 132px;
    } */

    .container-texte-nous {
        width: 50%;
    }



    /* .popup{
    height: 700px;
    width: 1000px;
} */


    /*.container-text-popup h1{
    padding-top: 3%;
    font-size: 31px;
}

.container-text-popup h2{
    margin-top: 2%;
    font-size: 27px;
}

.container-text-popup p{
    font-size: 17px;
}*/

    .container-titre-mangopay {
        margin-left: 10%;
        margin-right: 10%;
    }

    .i-bateau {
        height: 45px;
        width: 60px;
    }

    .text-popup-etes-vous-sur2{
        padding-top: 0;
    }

}


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

    /*.logo {
    width: 269px;
    height: 40px;
}*/

    .container-avis-index h4 {
        font-size: 35px;
    }

    .container-annonce-index h4 {
        font-size: 35px;
    }

    .text-categorie {
        font-size: 50px;
    }

    .marque-annonce-complete {
        margin-left: 13%;
    }

    .container-annonce-complete span {
        font-weight: bold;
        font-size: 23px;
    }

    .text-paiement {
        font-size: 35px;
    }

    .titre-comment {
        font-size: 40px;
    }

    .titre-pk {
        font-size: 40px;
    }

    .button-repondre-annonce-js {
        left: 580px;

    }

    /*.barre-recherche {
    width: 1030px;
}*/

    /*#categorie-recherche, #region, #department, #city {
    width: 190px;
}*/

    .container-texte-nous {
        width: 62%;
    }

    /*.container-recrutement {
    width: 60%;
}*/

    /*.container-form-info {
    overflow: hidden;
    width: 64%;
}*/


    /*
.titre-et-boite-panne {
    width: 485px;
}*/


}


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


    /*.logo {
    width: 300px;
    height: 45px;
}*/


    .container-bonhomme img {
        width: 500px;
    }

    .slogan {
        width: 489px;
        font-size: 34px;
    }

    .container-icone-index {
        width: 350px;
        margin-top: 10px;
    }

    /*.container-voiture-index:nth-child(1){
    border-radius: 10px;
    width: 80px;
    height: 75px;
}

.container-voiture-index:nth-child(2){
    border-radius: 10px;
    width: 80px;
    height: 75px;
}

.container-voiture-index:nth-child(3){
    border-radius: 10px;
    width: 80px;
    height: 75px;
}

.container-voiture-index:nth-child(4){
    border-radius: 10px;
    width: 80px;
    height: 75px;
}*/

    .voiture-index {
        font-size: 45px;
        padding: 2px;
    }

    /*.button-publication {
    font-size: 22px;
    border-radius: 14px;
    margin-top: 35px;
    padding: 20px 20px;
}*/

    .button-repondre-annonce {
        font-size: 22px;
        border-radius: 14px;
        margin-top: 35px;
        padding: 20px 20px;
    }

    .container-avis-index h4 {
        font-size: 30px;
    }

    .container-annonce-index h4 {
        font-size: 30px;
    }

    .avis-index {
        height: 115px;
        width: 420px;
        border-radius: 17px
    }

    .annonce-index {
        height: 220px;
        width: 240px;
        margin-left: 10px;
        margin-top: 1px;
        border-radius: 25px;
    }

    .titre-petite-annonce-index {
        font-size: 22px;
        margin-top: 6px;
    }

    .marque-petite-annonce-index {
        float: left;
        font-size: 13px;
        margin-left: 16px;
    }

    .modele-petite-annonce-index {
        float: left;
        font-size: 13px;
        margin-left: 30px;
    }

    .icone-vehicule-index {
        font-size: 60px;
        margin-top: 15px;
    }

    .prix1-petite-annonce-index {
        font-size: 25px;
    }

    .prix2-petite-annonce-index {
        font-size: 25px;
    }

    /* .icone-pos-index {
        font-size: 24px;
    } */


    .etape1,
    .etape2,
    .etape3 {
        width: 280px;
    }

    /*.container-barre-recherche {
    width: 850px;

}

.container-barre-recherche select{
    font-size: 16px;
    padding-left: 5px;
    padding-right: 0;


}*/

    #depart-recherche {
        float: left;
        width: 16%;
        margin-left: 2%;
        margin-top: 2%;
        font-family: "Open Sans Condensed", sans-serif;
        font-weight: 700;
    }

    /* .container-avis-mecano {

        width: 640px;
    } */

    .titre-mes-annonces {

        font-size: 60px;

    }

    .titre-comment {
        font-size: 40px;
    }


    .titre-pk {
        font-size: 40px;
    }



    .container-texte-tel {
        padding-left: 0;
    }


    .container-ville h1 {
        font-size: 30px;
    }

    .container-liste-ville li {
        font-size: 15px;
    }

    .text-categorie {
        font-size: 45px;
    }

    .text-remplir-form-js {
        font-size: 40px;
    }

    .text-choisir-panne-js {
        font-size: 40px;
    }

    /*#form-toute-panne p {
    font-size: 19px;
}*/

    .text-container-form-marque-modele {
        font-size: 35px;
    }

    .text-container-form-titre-description {
        font-size: 35px;
    }

    .text-container-form-prix-bouton {
        font-size: 35px;
    }

    .text-dispo-form-js {
        font-size: 40px;
        margin-top: 10%;
    }

    .text-recap-form-js {
        font-size: 40px;
        margin-top: 10%;
    }

    .recap-annonce {
        margin-top: 2%;
    }

    .container-recap-text-annonce h4 {
        font-size: 35px;
    }

    .container-recap-text-annonce {
        margin-left: 20%;
        width: 60%;
        order: 1;

    }

    .titre-recap-text-annonce {
        font-size: 28px;
    }

    .container-recap-text-annonce span {
        font-size: 20px;
    }

    .marque-recap-annonce {
        font-size: 20px;
    }

    .container-voiture-recap-annonce {
        height: 66px;
        width: 74px;
        border-radius: 10px;
    }

    .icone-vehicule-recap {
        font-size: 42px;
    }

    .description-recap-annonce {
        font-size: 20px;
    }

    .container-prix-annonce-complete {
        width: 150px;
    }

    .prix1-annonce-complete {
        font-size: 40px;
    }

    .prix2-annonce-complete {
        font-size: 40px;
    }

    .p-ville-annonce-complete {
        font-size: 20px;
    }

    /* .container-recap-panne {
        width: 35%;
        margin-top: 3%;
        margin-left: 13%;
        order: 2;
    }
 */


   /*  .btn-confirmation-recap {
        margin-left: auto;
        margin-right: auto;
        margin-top: 2%;
        font-size: 30px;
        order: 4;
        width: 200px;
        border-radius: 10px;
    } */

    /* #form-recap-panne p {
        font-size: 19px;
    } */

    .recap-panne-journee {
        font-size: 19px;
    }

    .recap-panne-horaire {
        font-size: 19px;
    }

    /* .container-mecano-fin-annonce {
        width: 220px;
    } */

    /* .container-text-fin-annonce {
        margin-top: 2%;
        width: 60%;
    }

    .container-text-fin-annonce p {
        font-size: 19px;
    }

    .container-text-fin-annonce span {
        font-size: 19px;
    } */

    /* .container-avis-mecano {
        width: 570px;
    } */

    /* .avis {
        height: 115px;
    } */

    .titre-mes-annonces {
        font-size: 40px;
    }

    .container-annonce-complete span {
        font-size: 21px;
    }

    .container-voiture-annonce {
        height: 50px;
        width: 55px;
    }

    .p-ville-annonce-complete {
        font-size: 18px;
    }

    .container-orange2 {
        border-top-left-radius: 35px;
        border-top-right-radius: 35px;
    }

    .container-annonce-dispo {
        width: 350px;
        min-height: 185px;
    }

    .container-annonce-dispo h2 {
        font-size: 25px;
    }

    .container-annonce-dispo p {
        font-size: 17px;
    }

    .container-prix-btn-offre {
        width: 150px;
        height: 90px;
    }

    .prix1-annonce-complete {
        font-size: 35px;
    }

    .prix2-annonce-complete {
        font-size: 35px;
    }

    .btn-faire-offre {
        width: 100%;
        background-color: #ffa500 !important;
        border-color: #ffa500 !important;
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }

    .comment2 {
        font-size: 19px;
        margin-top: 7%;
        margin-bottom: 4% !important;
    }

    .btn-paiement-offre {
        width: 190px;
        height: 30px;
        margin-top: 7px;
    }

    .prix-offre-mecano {
        font-size: 24px;
    }

    .jour-offre-mecano {
        font-size: 18px;
    }

    .heure-offre-mecano {
        font-size: 18px;
    }

    .text-paiement {
        font-size: 30px;
    }

    /*.btn-profil-monprofil,
.btn-mesannonces-profil,
.btn-mesoffres-profil,
.btn-mesreponse-profil,
.btn-historique-profil,
.btn-mesrdv-profil {
    padding-right: 4%;
}*/

    /*.container-info-perso {
    width: 90%;
}*/

    /*.titre-recrutement {
    font-size: 30px;
}*/

    .icone-vehicule-complet {
        font-size: 35px;
    }

    .container-voiture-annonce-complete {
        height: 55px;
        width: 60px !important;
    }

    #container-description-annonce-complete h2 {
        font-size: 25px;
    }

    #container-piece-annonce-complete h2 {
        font-size: 25px;
    }

   /*  .container-lieu-annonce-recap h2 {
        font-size: 25px;
    } */

    /* .container-lieu-annonce-recap span {
        font-size: 22px;
    } */

    #container-piece-annonce-complete span {
        font-size: 22px;
    }

    .description-annonce-complete {
        font-size: 22px;
    }

    .container-annonce-dispo {
        width: 50%;
        margin-right: 0;
    }

    #container-text-annonce-complete {
        width: 50%;
    }

    #container-description-annonce-complete {
        width: auto;
        margin-left: 80px;

    }

   /*  .container-lieu-annonce-recap {
        width: auto;
        margin-left: 80px;
    } */

    #container-piece-annonce-complete {
        margin-left: 80px;
    }

    .container-titre-mangopay h1 {
        font-size: 30px;
    }

    .container-titre-mangopay h2 {
        font-size: 25px;
    }

    /*.container-mentions {
    width: 50%;
}*/





}

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

    /*.liste-reparation {
    width: 100%;
    order: 2;
}*/
    /*
.titre-et-boite-panne {
    width: 800px;
    margin-bottom: 35px;
}*/

    /*.container-reparation-client {
    position: relative;
    width: 1200px;
    min-height: 200px;
    height: auto;
    border-left: 20px solid orange;
    border-right: 20px solid orange;
    border-top: 30px solid orange;
    border-bottom: 30px solid orange;
    padding: 50px 10px 50px 10px;
    margin: auto;
    margin-top: 0;
    background-color: #ebfcfc;
    box-shadow: 1px 1px 12px #555;
    border-radius: 5px;
}*/

    /*.container-reparation-client img {
    top: -87px;
    left: 272px;
}*/

    /*.liste-reparation-freinage,
.liste-reparation-direction,
.liste-reparation-entretien,
.liste-reparation-carrosserie,
.liste-reparation-peinture,
.liste-reparation-diagno-chauffage,
.liste-reparation-diagno-moteur,
.liste-reparation-diagno-freinage,
.liste-reparation-diagno-divers,
.liste-reparation-moteur,
.liste-reparation-clim,
.liste-reparation-echapement,
.liste-reparation-divers,
.liste-reparation-pneu,
.liste-reparation-embrayage,
.liste-reparation-diagno-demarrage,
.liste-reparation-diagno-suspension,
.liste-reparation-diagno-echapement,
.liste-reparation-chauffe-eau,
.liste-reparation-circuit-gaz,
.liste-reparation-circuit-eau,
.liste-reparation-chaine-moto,
.liste-reparation-batterie-moto,
.liste-reparation-echapement-moto,
.liste-reparation-pneu-moto,
.liste-reparation-freinage-moto,
.liste-reparation-moteur-moto,
.liste-reparation-suspension-moto,
.liste-reparation-revision-moto,
.liste-reparation-diagno-batterie-moto,
.liste-reparation-diagno-freinage-moto,
.liste-reparation-diagno-electronique-moto,
.liste-reparation-divers-moto{
    width: 100%;
    order: 2;
}*/

    /*.button-rejoindre-header{
    display: none;
}*/

    /*.button-inscription-particulier {
    margin-left: auto;
}*/

    /*.button-profils,*/
    /*.button-deconnexion,*/
    /*.button-annonce {
        display: none;
    }*/

    /* .icone-user-co {
        display: block;
        font-size: 25px;
        color: red;
        margin-left: auto;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 50px;
        height: 50px;
        cursor: pointer;
    } */
}

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

    /*.header{
    height: 85px;
}*/

    /*.logo {
    width: 240px;
    height: 35px;
}*/

    /*.button-publication-js {
    margin-top: 6px!important;
}*/

    .button-repondre-annonce-js {
        margin-top: 6px !important;
    }

    .container-bonhomme img {
        width: 350px;
    }

    .slogan {
        width: 390px;
        font-size: 27px;
    }

    .container-icone-index {
        width: 265px;
        margin-top: 10px;
    }

    /*.container-voiture-index:nth-child(1){
    border-radius: 8px;
    width: 60px;
    height: 55px;
}

.container-voiture-index:nth-child(2){
    border-radius: 8px;
    width: 60px;
    height: 55px;
}

.container-voiture-index:nth-child(3){
    border-radius: 8px;
    width: 60px;
    height: 55px;
}

.container-voiture-index:nth-child(4){
    border-radius: 8px;
    width: 60px;
    height: 55px;
}*/

    .voiture-index {
        font-size: 34px;
        padding: 2px;
    }

    /*.button-publication {
    font-size: 16px;
    border-radius: 11px;
    margin-top: 31px;
    padding: 14px 20px;
}*/

    .button-repondre-annonce {
        font-size: 16px;
        border-radius: 11px;
        margin-top: 31px;
        padding: 14px 20px;
    }

    .bg,
    .button {
        width: 30px;
        height: 30px;
        border-radius: 100%;
        top: 91%;
        left: 48%;
    }

    .button {
        width: 30px;
        height: 30px;
        border-radius: 100%;
    }

    .titre-comment {
        font-size: 30px;
    }

    .comment {
        position: absolute;
        top: 84%;
        left: 41%;
        text-transform: uppercase;
        font-family: "Open Sans Condensed", sans-serif;
        font-weight: 700;
        font-size: 16px;

    }

    .etape1,
    .etape2,
    .etape3 {
        width: 240px;
    }

    .etape1 img,
    .etape2 img,
    .etape3 img {
        width: 150px;
    }

    .etape1 h2,
    .etape2 h2,
    .etape3 h2 {
        font-size: 25px;
    }

    .etape1 p,
    .etape2 p,
    .etape3 p {
        margin-top: 15px;
        font-size: 15px;
    }

    /* .rating2 {

        margin-left: 132px;
        margin-top: 34px;
    } */

    /* .container-avis-mecano {
        margin-top: 80px;
        margin-left: auto;
        margin-right: 20px;
        width: 536px;
    } */

    .icone-crayon {
        font-size: 50px;
        margin-top: 22%;
    }

    .icone-cle-marche {
        font-size: 50px;
        margin-top: 22%;
    }

    .icone-carte {
        font-size: 50px;
        margin-top: 22%;
    }


    .titre-pk {
        font-size: 30px;
        margin-bottom: 55px;
    }


    .container-img-temps {
        padding-top: 3%;
    }

    .img-temps {
        width: 270px;
        height: 230px;
    }

    .titre-temps {
        width: 337px;
        font-size: 28px;
    }

    .texte-temps {
        width: 337px;
        font-size: 14px;
    }

    .container-img-tel {
        padding-left: 50px;
        padding-top: 10px;

    }

    .img-tel {
        width: 300px;
        height: 230px;
    }

    .titre-tel {
        width: 414px;
        font-size: 28px;
    }

    .texte-tel {
        width: 414px;
        font-size: 14px;
    }

    .img-argent {
        width: 270px;
        height: 230px;
    }

    .titre-argent {
        width: 337px;
        font-size: 28px;
    }

    .texte-argent {
        width: 337px;
        font-size: 14px;
    }

    .footer h4 {
        font-size: 20px;
    }

    .container-dernier-avis-annonce {
        margin-top: 10%;
    }

    .container-avis-index h4 {
        font-size: 25px;
    }

    .container-annonce-index h4 {
        font-size: 25px;
    }

    .avis-index {
        height: 95px;
        width: 360px;
        border-radius: 17px;
    }

    .avis-index img {
        height: 100%;
        width: 100%;
        border-bottom-left-radius: 19px;
        border-top-left-radius: 19px;
        margin-top: 0;
        border-bottom-right-radius: 0;
        border-top-right-radius: 0;
    }

    .avis-avatar-prenom-index {
        position: relative;
        width: 160px;
    }

    .avis-avatar-prenom-index p {
        color: white;
        font-weight: bold;
        background-color: #46d5fa;
        overflow: hidden;
        position: absolute;
        bottom: 0;
        width: 100%;
        border-bottom-left-radius: 17px;
        height: 25px;
        font-size: 16px;
    }

    /* .rating2 {
        margin-left: 75px;
        margin-top: 24px;
    }

    .rating2 label:before {
        font-size: 22px;
    } */

    .annonce-index {
        height: 192px;
        width: 200px;
        margin-left: 10px;
        margin-top: 1px;
        border-radius: 25px;
    }

    .titre-petite-annonce-index {
        font-size: 19px;
        margin-top: 6px;
    }

    .container-prenom-nom-petit-prix-index {
        margin-top: 8px;
    }

    .marque-petite-annonce-index {
        font-size: 14px;
    }

    .icone-vehicule-index {
        font-size: 50px;
        margin-top: 10px;
    }

    .prix1-petite-annonce-index {
        font-size: 23px;
    }

    .prix2-petite-annonce-index {
        font-size: 23px;
    }

    /* .icone-pos-index {
        font-size: 17px;
    } */

    /* .p-ville-petite-annonce-index {
        margin-top: 5px;
        font-size: 14px;
    } */

    .container-ville h1 {
        font-size: 25px;
    }

    /*.li-menu, .a-menu {
    font-size: 20px!important;
}*/

    /*.button-deconnexion {
        display: none;
    }*/

    /*.button-annonce {
        display: none;
    }*/

    /*.button-profils {
        display: none;
    }*/

    .button-publication-js {
        left: 61.9%;
    }

    .button-repondre-annonce-js {
        left: 61.9%;
    }

    /*.li-menu-profil-mobile{
    border-top: 2px solid white;
}*/

    /*.a-menu-profil{
    margin-top: 4%!important;
}*/

    .container-texte-tel {
        padding-left: 10px;
    }

    .container-liste-ville ul {
        width: 34%;
        margin-left: 15%;

    }

    .text-categorie {
        font-size: 35px;
    }

    .text-choisir-panne-js {
        font-size: 35px;
        margin-top: 5%;
    }

    /*#form-toute-panne p {
    font-size: 14px;
}*/

    .container-vehicule-js {
        top: 20%;
        left: 32%;
    }

    /*.btn-validation-panne {
    position: absolute;
    bottom: 2%;
    left: 35%;
    z-index: 2;
}*/
    /*
.form-voiture-js {
    width: 92px!important;
    height: 85px!important;
} */

    .container-voiture-js,
    .container-moto-js,
    .container-bateau-js,
    .container-vehicule-agricole-js {
        border-radius: 10px;
    }

    .icone-vehicule-categorie-js {
        font-size: 45px;
    }

    .text-remplir-form-js {
        font-size: 35px;
    }


    .container-tout-marque-modele {
        width: 240px;
    }

    .text-container-form-marque-modele {
        font-size: 30px;
        margin-bottom: 5% !important;
    }

    .container-form-marque-modele {
        height: 205px;
        padding: 9%;
        padding-top: 2%;
        border-radius: 10%;
    }

    .container-tout-titre-description {
        width: 240px;
    }

    .text-container-form-titre-description {
        font-size: 30px;
        margin-bottom: 5% !important;
    }

    .container-form-titre-description {
        height: 205px;
        padding: 9%;
        border-radius: 10%;
    }

    .container-tout-prix-bouton {
        width: 240px;
    }

    .text-container-form-prix-bouton {
        font-size: 30px;
        margin-bottom: 5% !important;
    }

    .container-form-prix-bouton {
        width: 100%;
        height: 205px;
        padding: 9%;
        border-radius: 10%;
    }

    .container-form-marque-modele select {
        font-size: 23px;
    }

    .container-form-marque-modele input {
        font-size: 23px;
    }

    .container-form-titre-description input {
        font-size: 23px;
    }

    .container-form-prix-bouton input {
        font-size: 23px;
    }

    .container-form-prix-bouton button {
        font-size: 28px;
    }

    .text-dispo-form-js {
        font-size: 35px;
        margin-top: 7%;
    }

    .text-recap-form-js {
        font-size: 35px;
        margin-top: 7%;
    }

    .calendrier-categorie {
        width: 80% !important;
        margin-left: 10%;
        border-radius: 20px;
        border: 9px solid orange !important;
        margin-top: 1%;
    }

    /* th {
        font-size: 13px;
    }

    .table td,
    .table th {
        padding: .25rem !important;
    }

    td {
        font-size: 13px;
    } */

    .btn-confirmer-calendrier {
        font-size: 25px;
        font-weight: bold;
    }

    .titre-recap-text-annonce {
        font-size: 25px;
        margin-top: 0;
    }

    .container-recap-text-annonce h4 {
        font-size: 30px;
    }

    /* .container-recap-panne h4 {
        font-size: 30px;
    } */

    .container-recap-dispo h4 {
        font-size: 30px;
    }

    .recap-annonce {
        margin-top: 2%;
    }

    /* .recap-panne {
        min-height: 140px;
        border-radius: 14px;
    } */

    .recap-panne3 {
        min-height: 140px;
        border-radius: 14px;
    }

    /* .container-mecano-fin-annonce {
        width: 185px;
    }

    .container-text-fin-annonce p {
        font-size: 17px;
    }

    .container-text-fin-annonce span {
        font-size: 17px;
    } */

    /*.container-recrutement h1 {
    margin-top: 11%;
    font-size: 27px;
}

.container-recrutement h2 {
    font-size: 25px;
}

.container-recrutement p {
    font-size: 15px;
}*/

    .container-faq h1 {
        margin-top: 10px;
        font-size: 35px;
    }

    .container-question h2 {
        font-size: 20px;
    }

    .container-question p {
        font-size: 15px;
    }

    .container-nous p {
        font-weight: bold;
        font-size: 17px;
    }

    /* .container-recap-panne {
        width: 40%;
        margin-top: 3%;
        margin-left: 8%;
        order: 2;
    } */


    /* .avis {
        height: 100px;
    } */

    /* .container-avis-mecano {
        margin-top: 80px;
        margin-left: auto;
        margin-right: auto;
        width: 700px;
    } */

    /* .container-avis-mecano h3 {
        margin-bottom: 8%;
    }
 */
    .container-profil-info-public {
        height: 490px;
        width: 300px;
    }

    /*.rating-profil label:before {
    font-size: 27px;
}*/

    .container-profil-info-public h2 {
        margin-top: 31%;
        font-size: 22px;
    }

    .icone-calendrier {
        font-size: 22px;
    }

    /* .icone-pos {
        font-size: 22px;
    } */

    .container-profil-info-public p {
        font-size: 15px;
    }

    .container-description h4 {
        font-size: 19px;
    }

    .container-description p {
        font-size: 14px;
    }

    .titre-mes-annonces {
        font-size: 35px;
    }

    .container-annonce-complete span {
        font-size: 19px;
    }

    .icone-vehicule-complet {
        font-size: 35px;
        color: orange;
    }

    .p-ville-annonce-complete {
        font-size: 16px;
    }

    .container-annonce-dispo {
        width: 300px;
        min-height: 165px;
        margin-left: auto;
        margin-right: auto;
    }

    .container-annonce-dispo p {
        font-size: 15px;
    }

    .container-prix-btn-offre {
        width: 150px;
        height: 83px;
    }

    .prix1-annonce-complete {
        font-size: 30px;
    }

    .prix2-annonce-complete {
        font-size: 30px;
    }

    .comment2 {
        font-size: 17px;
        margin-top: 7%;
        margin-bottom: 4% !important;
    }

    .text-paiement {
        font-size: 28px;
    }

    /*.barre-recherche {
    width: 870px;
}*/

    /*#categorie-recherche, #region, #department, #city {
    width: 160px;
    font-size: 13px;
}

.barre-recherche {
    width: 870px;
    border-radius: 11px;
    height: 75px;
}

#container-voiture-repa, #container-moto-repa, #container-camion-repa, #container-camping-repa {
    width: 210px;
}*/

    /* .popup{
    height: 660px;
    width: 700px;
} */


    /*.container-text-popup h1{
    padding-top: 3%;
    font-size: 29px;
}

.container-text-popup h2{
    margin-top: 2%;
    font-size: 25px;
}

.container-text-popup p{
    font-size: 14px;
}*/

    /*.container-form-info {
    overflow: hidden;
    width: 90%;
}*/

    #form-rib {
        overflow: hidden;
        width: 90%;
    }

    #form-document {
        width: 60%;
    }

    .formulaire-document {
        width: 100%;
    }

    /* .voiture-profil {
        font-size: 30px;
        margin-top: 10px;
    } */

    /*#container-profil {
    padding-top: 85px;
}*/

    #container-vehicule-panne-annonce-complete {
        padding-top: 60px;
        padding-bottom: 5px;
    }

    .i-bateau {
        height: 28px;
        width: 40px;
    }

    #container-repa-categorie h3 {
        font-size: 14px;
    }

    /*.btn-recherche {
    left: 42%;
    font-size: 25px;
}*/

}

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

    .button-publication-js {
        left: 560px;
    }

    .button-repondre-annonce-js {
        left: 560px;
    }

    .container-avis-index {
        width: 100%;
    }

    .container-annonce-index {
        width: 100%;
        margin-top: 10%;
    }

    .container-ville {
        margin-top: 5%;
    }

    /* td {
        font-size: 12px;
    }

    th {
        font-size: 12px;
    } */

    #container-progress {
        width: 100%;
        height: 100px;
        background-color: #fffad6;
    }

    /*.container-mentions {
    width: 62%;
}*/

    /* .container-vehicule {
        width: 539px;
        margin-top: 45px;
    } */

}


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

    /*.container-accueil {
    height: 430px;
}*/

    .slogan {
        width: 317px;
        font-size: 22px;
    }

    .container-bonhomme {
        height: 80%;
        width: 50%;
        padding-left: 2%;
        text-align: start;
    }

    .container-slogan {
        padding-top: 1%;
    }

    .container-bonhomme img {
        width: 314px;
    }

    .container-icone-index {
        width: 235px;
        margin-top: 10px;
    }

    /*.container-voiture-index:nth-child(1) {
    border-radius: 7px;
    width: 55px;
    height: 50px;
}

.container-voiture-index:nth-child(2) {
    border-radius: 7px;
    width: 55px;
    height: 50px;
}

.container-voiture-index:nth-child(3) {
    border-radius: 7px;
    width: 55px;
    height: 50px;
}

.container-voiture-index:nth-child(4) {
    border-radius: 7px;
    width: 55px;
    height: 50px;
}*/

    .voiture-index {
        font-size: 30px;
        padding: 2px;
    }

    /*.button-publication {
    font-size: 14px;
    border-radius: 11px;
    margin-top: 20px;
    padding: 14px 20px;
}*/

    .button-repondre-annonce {
        font-size: 14px;
        border-radius: 11px;
        margin-top: 20px;
        padding: 14px 20px;
    }

    .titre-comment {
        font-size: 30px;
        margin-top: 40px;
    }

    .etape1,
    .etape2,
    .etape3 {
        width: 190px;
    }

    .etape1 img,
    .etape2 img,
    .etape3 img {
        width: 135px;
    }

    .etape1 h2,
    .etape2 h2,
    .etape3 h2 {
        font-size: 25px;
    }

    .etape1 p,
    .etape2 p,
    .etape3 p {
        width: 190px;
        margin-right: auto;
        margin-left: auto;
    }

    .titre-pk {
        font-size: 25px;
    }

    .container-img-temps {
        padding-top: 7%;
    }

    .img-temps {
        width: 230px;
        height: 200px;
    }

    .titre-temps {
        width: 301px;
        font-size: 25px;
    }

    .texte-temps {
        width: 301px;
        font-size: 14px;
    }


    .container-img-tel {
        padding-top: 2%;
    }

    .img-tel {
        width: 275px;
        height: 200px;
    }


    .titre-tel {
        width: 370px;
        font-size: 25px;
    }

    .texte-tel {
        width: 370px;
        font-size: 14px;
    }


    .img-argent {
        width: 230px;
        height: 200px;
    }

    .titre-argent {
        width: 301px;
        font-size: 25px;
    }

    .texte-argent {
        width: 301px;
        font-size: 14px;
    }

    .container-ville h1 {
        font-size: 20px;
    }

    .liste-ville1 {
        margin-left: 1%;
    }

    .liste-ville4 {
        display: none;
    }

    .container-liste-ville ul {
        width: 26%;
    }

    .container-liste-ville li {
        font-size: 14px;
    }

    .icone-ville {
        font-size: 20px;
    }

    .newsletter {
        height: 70px;
        padding: 14px;
        margin-bottom: 3%;
    }

    .formulaire-newsletter {
        width: 345px;
    }

    .container-form-newsletter {
        width: 34%;
        margin-left: 8%;
    }

    .btn-newsletter {
        width: 110px;
        font-size: 15px;
    }

    .service {
        width: 50% !important;
        margin-top: 3%;
    }

    .titre-service {
        font-size: 20px;
    }

    .service p {
        font-size: 15px;
    }

    .categorie-footer {
        width: 50% !important;
        margin-top: 3%;
    }

    .titre-categorie-footer {
        font-size: 20px;
    }

    .categorie-footer li {
        font-size: 15px;
    }

    .a-propos {
        width: 50% !important;
        margin-top: 3%;
    }

    .titre-a-propos {
        font-size: 20px;
    }

    .a-propos p {
        font-size: 15px;
    }

    .contact {
        width: 50% !important;
        margin-top: 3%;
    }

    .titre-contact {
        font-size: 20px;
    }

    .contact p {
        font-size: 15px;
    }

    .reseau p {
        margin-top: 4%;
    }

    .button-publication-js {
        left: 65.9%;
    }

    .button-repondre-annonce-js {
        left: 65.9%;
    }


    /*.container-barre-recherche {
    width: 680px;
    height: 8.7%;

}

.container-barre-recherche select{
    font-size: 15px;
    padding-left: 5px;
    padding-right: 0;


}

#categorie-recherche {
    width: 15%;
}

#depart-recherche {
    width: 19%;
}

#ville-recherche {
    width: 10%;

}*/



    .icone-crayon {
        font-size: 3rem;
        margin-top: 12%;
    }

    .icone-cle-marche {
        font-size: 3rem;
        margin-top: 12%;
    }

    .icone-carte {
        font-size: 3rem;
        margin-top: 12%;
    }

    /*.container-voiture:hover .text-voiture,
.container-moto:hover .text-moto,
.container-bateau:hover .text-bateau,
.container-vehicule-agricole:hover .text-vehicule-agricole{
    font-size: 30px;
}*/


    .text-categorie {
        font-size: 30px;
    }

    .text-choisir-panne-js {
        font-size: 30px;
        margin-top: 0;
        margin-right: 0;
    }

    .container-vehicule-js {
        top: 105px;
        left: 44%;
    }

    /* .form-voiture-js {
    width: 80px!important;
    height: 75px!important;
} */

    .icone-vehicule-categorie-js {
        font-size: 30px;
    }

    .container-voiture-js,
    .container-moto-js,
    .container-bateau-js,
    .container-vehicule-agricole-js {
        border-radius: 8px;
    }

    /*.btn-validation-panne {
    position: fixed;
    bottom: 1px;
    z-index: 1;
    margin: 0;
}*/

    /*#form-toute-panne p {
    font-size: 17px;
}*/

    .container-tout-marque-modele {
        width: 200px;
    }

    .text-container-form-marque-modele {
        font-size: 25px;
    }

    .container-form-marque-modele {
        height: 170px;
        border-radius: 13px;
    }

    .container-form-marque-modele select {
        font-size: 17px;
    }

    .container-form-marque-modele input {
        font-size: 17px;
    }

    .container-tout-titre-description {
        width: 200px;
    }

    .text-container-form-titre-description {
        font-size: 25px;
    }

    .container-form-titre-description {
        height: 170px;
        border-radius: 13px;
    }

    .container-form-titre-description input {
        font-size: 17px;
    }

    .container-form-titre-description textarea {
        height: 50% !important;
        font-size: 15px;
    }

    .container-tout-prix-bouton {
        width: 200px;
    }

    .text-container-form-prix-bouton {
        font-size: 25px;
    }

    .container-form-prix-bouton {
        height: 170px;
        border-radius: 13px;
    }

    .container-form-prix-bouton input {
        font-size: 15px;
    }

    .container-form-prix-bouton button {
        height: 60px;
        font-size: 25px;
    }

    .form-annonces-js {
        margin-top: 0;
    }


    .text-remplir-form-js {
        font-size: 30px;
        margin-top: 14%;
    }

    .text-dispo-form-js {
        margin-top: 12%;
        font-size: 30px;
    }

    .text-recap-form-js {
        font-size: 30px;
        margin-top: 12%;
    }

    .container-recap-text-annonce {
        width: 80%;
        margin-left: 10%;
        order: 1;
    }

    .container-recap-text-annonce h4 {
        font-size: 25px;
    }

    .titre-recap-text-annonce {
        font-size: 25px;
        margin-top: 0%;
    }

    .marque-recap-annonce {
        margin-left: 2%;
        font-size: 20px;
    }

    .container-recap-text-annonce span {
        font-size: 20px;
    }

    .modele-recap-annonce {
        float: left;
        margin-left: 34%;
        font-size: 20px;
    }

    .description-recap-annonce {
        clear: both;
        margin-top: 2%;
        font-size: 20px;
        margin-right: 5%;
        margin-left: 5%;
    }


    .container-voiture-recap-annonce {
        margin-top: 2%;
        height: 50px;
        width: 60px;
        border-radius: 9px;

    }

    .icone-vehicule-recap {
        font-size: 40px;
    }



    /* .icone-pos {
        font-size: 25px;
    } */

   /*  .container-recap-panne {
        width: 40%;
        margin-left: auto;
        margin-right: auto;
        order: 2;
        margin-top: 5%;
    }
 */
    /* .container-recap-panne h4 {
        font-size: 25px;

    }
 */
   /*  #form-recap-panne p {
        font-size: 15px;
    } */


    .container-recap-dispo h4 {
        font-size: 25px;
    }

    .recap-panne-journee {
        font-size: 15px;
    }

    .recap-panne-horaire {
        font-size: 15px;
    }

 /*    .btn-confirmation-recap {
        margin-top: 4%;
        font-size: 20px;
        border-radius: 10px;
        order: 4;
        width: 130px;
    } */

    /* .container-mecano-fin-annonce {
        width: 150px;
        margin-top: 6%;
    }

    .container-text-fin-annonce {
        width: 70%;
    }

    .container-text-fin-annonce p {
        font-size: 16px;
    }

    .container-text-fin-annonce span {
        font-size: 16px;
    } */

    /*.li-menu-logo{
    display: none!important;
}

.li-menu, .a-menu {
    font-size: 18px!important;
}*/

    /*.container-recrutement h1 {
    margin-top: 13%;
    font-size: 21px;
}

.container-recrutement h2 {
    font-size: 20px;
}

.container-recrutement p {
    font-size: 13px;
}*/

    .container-faq h1 {
        margin-top: 10px;
        font-size: 30px;
    }

    .container-question h2 {
        font-size: 18px;
    }

    .container-question p {
        font-size: 13px;
    }

    .container-faq button {
        font-size: 20px;
        font-weight: bold;
    }

    .container-nous p {
        font-size: 15px;
    }

    .container-profil-info-public {
        height: 385px;
        width: 265px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 2%;
    }

    /*.rating-profil label:before {
    font-size: 23px;
}*/

    .container-profil-info-public h2 {
        margin-top: 27%;
        font-size: 20px;
    }

    .icone-calendrier {
        font-size: 18px;
    }

    .container-profil-info-public p {
        font-size: 14px;
    }

    /* .icone-pos {
        font-size: 18px;
    } */

    .container-description h4 {
        font-size: 16px;
    }

    .container-description p {
        font-size: 11px;
    }

    .container-profil-info-public a {
        font-size: 15px;
    }

    /* .container-avis-mecano {
        margin-top: 6%;
        margin-left: auto;
        margin-right: auto;
        width: 481px;
    } */

    /* .btn-voir-plus {
        margin-right: 40%;
        margin-top: 10px;
        width: 139px;
    } */

    .titre-mes-annonces {
        font-size: 30px;
    }

    .container-profil-info-public img {
        height: 22%;
        width: 34%;
        top: 10%;
        left: 33%;
    }

    /*.btn-recherche {
    left: 43%;
    font-size: 25px;
}*/

    .container-annonce-complete span {
        font-size: 17px;
    }

    .container-voiture-annonce {
        height: 40px;
        width: 45px;
        border-radius: 5px;
    }

    .icone-vehicule-complet {
        font-size: 30px;
        color: orange;
    }



    .container-annonce-panne-dispo {
        flex-flow: row wrap;
    }

 

    .container-annonce-dispo {
        width: 100%;
        min-height: 165px;
        order: 2;
        margin-left: auto;
    }

    .container-annonce-dispo h2 {
        padding-top: 30px;
    }

    .container-btn-indic-offre {
        order: 3;
        margin-top: 4%;
    }

    .formulaire-offre label {
        font-size: 17px;
        color: var(--light);
        font-weight: 500;
    }

    .text-paiement {
        font-size: 23px;
    }

    #header-progress {
        display: block;
    }

    /* #etape-3-annonce {
        display: none;
        padding: 0;
    }

    #etape-3-annonce h2 {
        display: none;
    }

    #etape-3-annonce h3 {
        display: none;
    }

    #etape-3-annonce p {
        display: none;
    } */

    /* #form-vehicule-annonce-voiture,
    #form-vehicule-annonce-moto,
    #form-vehicule-annonce-vehicule-pro,
    #form-vehicule-annonce-camping-car {
        min-height: 400px;
        width: 100%;
    } */

    /* #form-vehicule-annonce-voiture h1 {
        margin-bottom: 25px;
        font-size: 30px;
    }

    .input-form-vehicule {
        width: 100%;
    } */

    /* .container-descrip-cat {
        display: none;
        width: 100%;
    }
 */
    /* .container-descrip-cat label {
        font-size: 25px;
        font-weight: bold;
    } */

    /*#etape-1-annonce {
    width: 100%;
    padding: 0;
    padding-top: 35px;
    padding-bottom: 35px;
}*/

    .next-form-description {
        display: none;
    }

    .next-form-dispo {
        display: none;
    }

    .btn-prev-vehicule {
        display: none;
    }

    .btn-prev-titre {
        display: none;
    }

    .btn-prev-dispo {
        display: none;
    }

    /*#form-vehicule-annonce-voiture,
    #form-vehicule-annonce-moto,
    #form-vehicule-annonce-vehicule-pro,
    #form-vehicule-annonce-camping-car {
        margin-right: 0;
    }*/

 /*    .container-disponibilite {
        display: none;
        margin-top: 0;
        text-align: left;
    }

    .container-disponibilite h1 {
        font-size: 25px;
        font-weight: bold;
        margin-bottom: 30px;
    } */


    /* .container-semaine {
        display: flex;
        flex-flow: row wrap;
        justify-content: start;
        margin-bottom: 30px;
    } */

    #lundi,
    #mardi,
    #mercredi,
    #jeudi,
    #vendredi,
    #samedi,
    #dimanche,
    #matin,
    #midi,
    #aprem,
    #soir {
        opacity: 0;
    }

    /* .btn-checkbox-lundi,
    .btn-checkbox-mardi,
    .btn-checkbox-mercredi,
    .btn-checkbox-jeudi,
    .btn-checkbox-vendredi,
    .btn-checkbox-samedi,
    .btn-checkbox-dimanche {
        width: 50px;
        height: 50px;
        background: #fff;
        border-radius: 5px;
        text-align: center;
        padding: 40px 40px;
        cursor: pointer;
        color: #585c68;
        border: 5px solid transparent;
        display: flex;
        justify-content: center;
        align-items: center;

    } */

   /*  .container-heure {
        display: flex;
        flex-flow: row wrap;
    } */

    /*.btn-checkbox-matin,
    .btn-checkbox-midi,
    .btn-checkbox-aprem,
    .btn-checkbox-soir {
        width: 145px;
        height: 50px;
        background: #fff;
        border-radius: 5px;
        cursor: pointer;
        color: #585c68;
        border: 5px solid transparent;
        display: flex;
        justify-content: center;
        align-items: center;

    }*/

    #form-annonces {
        display: block;
    }

    /*#menu2 {
    display: none;
    position: fixed;
    top: 0;
    background-color: #fffad6;
    width: 350px;
    height: 100%;
    border: 2px solid orange;
}*/

    /*.icone-fermer {
    font-size: 30px;
    top: 10px;
    right: 17px;
}*/

    .confiance {
        padding-bottom: 0;
    }

    /*.btn-validation-panne {

    font-size: 13px;
    padding: 8px 30px;
}*/

    .trait-noir-publier {
        display: none;
    }

    #container-form-annonce-mobile {
        padding: 100px 30px 60px 30px !important;

    }

    #header-mobile-categorie {
        background-color: transparent;
    }

    /*.barre-recherche {
    width: 740px;
    height: 70px;
    border-radius: 13px;
}

#categorie-recherche, #region, #department, #city {
    width: 130px;
}*/

    .container-annonce {
        margin-top: 35px;
    }

    .icone-vehicule {
        font-size: 70px;
    }

    /* .date-publi-resumer {
        margin-left: 30px;
    } */

    /* #container-description-vehicule-annonce-resumer {
        margin-top: 17px;
    } */

    /*.menu-profil {
    width: 730px;
}*/

    /*.btn-profil-monprofil,
.btn-mesannonces-profil,
.btn-mesoffres-profil,
.btn-mesreponse-profil,
.btn-historique-profil,
.btn-mesrdv-profil {
    font-size: 19px;

}*/

    #container-voiture-repa,
    #container-moto-repa,
    #container-camion-repa,
    #container-camping-repa {
        width: 170px;
    }

    #container-repa-categorie h3 {
        font-size: 15px;
    }

    .text-qmsm {
        font-size: 15px !important;
        width: 600px;
    }

    /*.titre-recrutement {
    font-size: 24px;
}*/

    /*.container-recrutement p {
    font-size: 18px;
}

.container-recrutement {
    width: 80%;
}*/

    #container-vehicule-panne-annonce-complete {
        width: 100%;
        padding-top: 5px;
        padding-bottom: 50px;

    
    #container-text-dispo-annonce-complete {
        display: flex;
        flex-direction: column;
    }

    #container-text-annonce-complete {
        width: 100%;
    }

    /*.trait-noir-annonce-complete{
    width: 70%;
    border: 1px solid #404041;
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;

}*/

    #form-document {
        width: 70%;
    }

    /*.container-texte-nous {
    width: 70%;
}*/

    /*.container-nous h1 {
    font-size: 30px;
}*/

    .container-titre-mangopay h1 {
        font-size: 25px;
    }

    .container-titre-mangopay h2 {
        font-size: 20px;
    }

    /*#text-pre-annonce p {
    width: 580px;
    margin: auto;
    margin-top: 40px;
    font-weight: 500;
    color: white;
    font-size: 18px;
}*/
    /*
.titre-et-boite-panne {
    width: 580px;
    margin-bottom: 35px;
}*/

    /*.container-reparation-client {
    position: relative;
    width: 100%;
    min-height: 200px;
    height: auto;
    border-left: 20px solid orange;
    border-right: 20px solid orange;
    border-top: 30px solid orange;
    border-bottom: 30px solid orange;
    padding: 50px 10px 50px 10px;
    margin: auto;
    margin-top: 0;
    background-color: #ebfcfc;
    box-shadow: 1px 1px 12px #555;
    border-radius: 5px;
}*/

    /*.container-reparation-client img {
    top: -87px;
    left: 166px;
}*/

    .popup-form-offre {
        display: none;
    }

    .container-form-devis {
        width: 80%;
        margin-left: auto;
        margin-right: auto;
        margin-top: 10%;
    }

    .container-form-devis p {
        font-size: 13px;
        font-weight: 500;
    }

    .button-affichage-diagno {
        margin-top: 4px;
    }

    .button-remplir-diagno {
        margin-top: 4px;
    }

    .container-devis-monprofil {
        width: 100%;
        margin-left: 0;
    }

    .container-devis-monprofil p {
        font-size: 12px;
    }

    /* .container-facture {
        width: 100%;
        margin-left: 0;
    }
 */
    /* .container-facture p {
        font-size: 12px;
    } */


    .btn-afficher-offre-mobile {
        width: 150px !important;
    }

    .container-profil-info-public2 {
        margin-right: auto;
        order: 2;
        margin-top: 10px;
        padding-top: 0;
    }

    .rating-profil {
        margin-left: auto;
        margin-right: auto;
        position: static !important;
        margin-top: 5px
    }

    .container-profil-info-public2 h2 {
        margin-top: 0;
    }

    #container-description-annonce-complete {
        padding-left: 20px;
        margin-left: 0;
        padding-top: 25px;
    }

    #container-description-annonce-complete h2 {
        font-size: 20px;
    }

    .description-annonce-complete {
        font-size: 16px;
    }

    #container-piece-annonce-complete {
        padding-left: 20px;
        margin-left: 0;
        padding-top: 25px;
    }

    #container-piece-annonce-complete h2 {
        font-size: 20px;
    }

    #container-piece-annonce-complete span {
        font-size: 18px;
    }

   /*  .container-lieu-annonce-recap {
        padding-left: 20px;
        margin-left: 0;
        padding-top: 25px;
    }

    .container-lieu-annonce-recap h2 {
        font-size: 20px;
    } */

    /* .container-lieu-annonce-recap span {
        font-size: 18px;
    } */

    #container-dispo-jour-annonce-complete {
        padding-top: 0;
    }

    #container-lundi-annonce-complete,
    #container-mardi-annonce-complete,
    #container-mercredi-annonce-complete,
    #container-jeudi-annonce-complete,
    #container-vendredi-annonce-complete,
    #container-samedi-annonce-complete,
    #container-dimanche-annonce-complete {
        margin-left: 0;
    }

    #container-dispo-heure-annonce-complete {
        padding-top: 0;
    }

    #container-matin-annonce-complete,
    #container-midi-annonce-complete,
    #container-aprem-annonce-complete,
    #container-soir-annonce-complete {
        margin-left: 0;
    }

    .container-annonce-panne-dispo {
        padding-top: 0;
    }

    .trait-offre-mecano {
        width: 70%;
        position: relative;
    }

    .container-profil-info-public2 img {
        height: 65px;
        width: 65px;
    }

    .btn-paiement-offre {
        margin-top: 4px;
    }

    .avatar-offre-mecano {
        width: 80px;
        height: 80px;
    }

    .btn-paiement-diagno {
        margin-top: 10px;
        margin-left: auto;
        display: block;
        margin-right: auto;
        margin-bottom: 10px;
    }

    .btn-supr-panne-diagno {
        width: 80px;
        height: 25px;
        margin-left: 4px;
        font-size: 13px;
    }

    .formulaire-offre {
        width: 100%;
        margin-left: 0;
    }

    .text-prix-frais {
        color: #404041;
        font-weight: 500;
    }

    .popup-frais-hover {
        top: -127px;
        left: 0;
        width: 270px;
        height: 140px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .text-popup-frais {
        font-size: 14px;
        font-weight: 600;
    }

    /*.icone-fermer-offre-mobile{
    display: block;
    color: orange!important;
    position: absolute;
    cursor: pointer;
    top: 10px;
    right: 17px;
    font-size: 2rem;
}*/

    .popup-frais-hover span {
        color: #ffbc40;
    }

    .prenom-offre-haut-mecano {
        font-size: 30px;
        font-weight: 500;
    }

    .nom-offre-haut-mecano {
        font-size: 30px;
        font-weight: 500;
        margin-left: 10px;
    }

    .avatar-offre-haut-mecano {
        width: 100px;
        margin-top: 10px;
    }

    .jour-offre-haut-mecano {
        margin-top: 10px;
    }

    .heure-offre-haut-mecano {
        margin-top: 10px;
        margin-bottom: 20px !important;
    }

    .prix-offre-haut-mecano {
        margin-top: 10px;
    }

    .text-popup-etes-vous-sur2,
    .text-popup-etes-vous-sur3 {
        padding-top: 0;
    }

    .btn-oui-etes-vous-sur3 {
        margin-left: 0;
    }

    .text-popup-etes-vous-sur4 {
        font-size: 21px;
    }

    .btn-oui-etes-vous-sur4,
    .btn-non-etes-vous-sur4 {
        font-size: 25px;
        margin-left: 0;
    }

    /*#container-avatar-profil {
    margin-bottom: 30px;
    margin-top: 20px;
}*/

    /*.avatar-profil {
    height: 80px;
    width: 80px;
}*/

    /*#container-avatar-profil h1 {
    font-size: 25px;
    margin-top: 10px;
}*/

    .btn-modif-profil {
        margin-top: 5px;
    }

    /* #container-competence-meca {
        width: 100%;
        margin-top: -5px;
        margin-bottom: 20px;
    }

    #container-ico-competence-meca {
        display: flex;
        width: 45%;
        flex-flow: row wrap;
        justify-content: space-around;
    }

    #container-ico-validation-mobile {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-bottom: 20px;
    } */

    /* #container-ico-validation-mobile h1 {
        font-size: 20px;
        color: white;
    }

    #container-ico-text-validation-mobile {
        display: flex;
        flex-direction: row;
    }

    #container-ico-text-validation-mobile p {
        color: #ffbc40;
        font-size: 15px;
        font-weight: 500;
    }

    #container-ico-text-validation-mobile-gauche {
        margin-right: 60px;
    } */

    /* .avis {
        width: 100%;
    } */

    /* .container-left-avis p {
        color: #ffbc40;
        text-align: center;
    } */

    .overlay-popup-aide {
        bottom: 0;
        height: 100%;
        width: 100%;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    .overlay-popup-aide-js {
        left: 0;
    }

    .popup-aide {
        border-radius: 10px;
        height: 230px;
        margin-top: -180px;
        z-index: 11;
    }

    .container-popup-aide1 h1,
    .container-popup-aide2 h1,
    .container-popup-aide3 h1,
    .container-popup-aide4 h1 {
        padding-top: 20px;
        font-size: 14px;
    }

    .container-popup-aide1 h2,
    .container-popup-aide2 h2,
    .container-popup-aide3 h2,
    .container-popup-aide4 h2 {
        font-size: 14px;
    }

    .container-popup-aide1 p,
    .container-popup-aide2 p,
    .container-popup-aide3 p,
    .container-popup-aide4 p {
        font-size: 14px;
        text-align: left;
    }

    /*.btn-popup-aide1,
.btn-popup-aide2,
.btn-popup-aide3,
.btn-popup-aide4 {
    padding: 0px 15px;
    font-size: 15px;
    margin-top: 20px;
}*/

    /*.icone-user-co-mobile-popup {
        display: block;
        z-index: 10;
        font-size: 26px;
        margin-right: 17px;
        margin-top: -4px;
        color: orange;
    }*/

    .image-clignote {
        animation-duration: 1.5s;
        animation-name: clignoter;
        animation-iteration-count: infinite;
        transition: none;
    }

    @keyframes clignoter {
        0% {
            opacity: 1;
        }

        40% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    .container-btn-mesannonces-profil-mobile-popup {
        z-index: 10;
        width: 100px;
        color: #fffad6;
        margin-top: 16px;
        cursor: pointer;
    }

    .texte1-popup-aide1,
    .texte2-popup-aide1,
    .texte3-popup-aide1,
    .texte4-popup-aide1,
    .texte5-popup-aide1 {
        display: none;
    }

    /* .annonce-profil {
        height: 300px;
        width: 330px;
        border-radius: 19px;
        margin-bottom: 2%;
    }
 */
    .z-index-popup {
        z-index: 10;
    }

    .texte5-popup-aide1 {
        margin-top: 10px;
    }

    .popup-aide-js-1 {
        height: 300px;

    }

    /* .container-notif-js {
    width: 100%;
    top: 54px;
    right: 0;
    border-radius: 0px;
} */

    /* #titre-notif {
    border-top-right-radius: 0;
    border-top-left-radius: 0;
} */

    /* #container-annonce-profil-public {
        padding-bottom: 0;
    } */

    #container-ico-validation {
        display: none;
    }

    /*.btn-recherche {
    left: 41%;
    font-size: 25px;
}*/

    .container-toute-annonce {
        padding-top: 100px;
    }

    /* .container-vehicule-annonce-resumer {
        height: 80px;
        width: 100%;
    } */

    /* #container-droite-annonce-resumer {
        width: 100%;
    } */

    /* .titre-petite-annonce {
        text-align: center;
        margin-left: 0;
        margin-top: 0;
    } */

    /* .container-marque-annonce-resumer {
        width: 50%;
        text-align: center;
    } */

    /* .container-modele-annonce-resumer {
        width: 50%;
        text-align: center;
    } */

    /* .container-kilometre-annonce-resumer {
        width: 50%;
        text-align: center;
    } */

    /* .p-ville-petite-annonce {
        font-size: 14px;
        margin-left: 25px;
    }
 */
    .trait-orange-annonce-complete {
        width: 70%;
    }

}}

@media screen and (max-width: 900px) {
    .container-ico-ville-petite-annonce {  
        width: 53%;
    }
}


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

.section_pre-annonce-completes_text {
    font-size: 1.5rem;
}

.section_pre-annonce_text_recap{
    font-size: 1.5rem;
}

.section_pre-annonce_text{
    font-size: 1.5rem;
}

.step_first_section_title{
    font-size: 0.9rem;
    text-align: left;
}

}


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

    .text-paiement {
        font-size: 22px;
    }

.liste-reparation {
    
    width: 100%;
}

.container-reparation-client {
    width: 100%;
}

.liste-reparation-freinage,
.liste-reparation-direction,
.liste-reparation-entretien,
.liste-reparation-carrosserie,
.liste-reparation-peinture,
.liste-reparation-diagno-chauffage,
.liste-reparation-diagno-moteur,
.liste-reparation-diagno-freinage,
.liste-reparation-diagno-divers,
.liste-reparation-moteur,
.liste-reparation-clim,
.liste-reparation-echapement,
.liste-reparation-divers,
.liste-reparation-pneu,
.liste-reparation-autre,
.liste-reparation-embrayage,
.liste-reparation-diagno-demarrage,
.liste-reparation-diagno-suspension,
.liste-reparation-diagno-echapement,
.liste-reparation-chauffe-eau,
.liste-reparation-circuit-gaz,
.liste-reparation-circuit-eau,
.liste-reparation-chaine-moto,
.liste-reparation-batterie-moto,
.liste-reparation-echapement-moto,
.liste-reparation-pneu-moto,
.liste-reparation-freinage-moto,
.liste-reparation-moteur-moto,
.liste-reparation-suspension-moto,
.liste-reparation-revision-moto,
.liste-reparation-diagno-batterie-moto,
.liste-reparation-diagno-freinage-moto,
.liste-reparation-diagno-electronique-moto,
.liste-reparation-divers-moto {
    width: 100%;
}

    /*.barre-recherche {
    width: 470px;
    height: 120px;
}*/

    /*.menu-profil-mobile {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    text-align: center;
    width: 100%;
    margin-top: 0;
    background-color: #404041;
    margin-bottom: 0;
}

.container-btn-profil-monprofil-mobile, .container-btn-mesannonces-profil-mobile, .container-btn-mesoffres-profil-mobile, .container-btn-mesrdv-profil-mobile, .container-btn-historique-profil-mobile .container-button-deconnexion-mobile {
    width: 100px;
    color: #fffad6;
    margin-top: 16px;
    cursor: pointer;
}*/

    /*#container-menu-profil {
display: none;
}*/

    /*.ico-annonce-monprofil,
.ico-profil-monprofil,
.ico-rdv-monprofil,
.ico-historique-monprofil,
.ico-deco-monprofil,
.ico-offre-monprofil{
    font-size: 30px;
}*/

    #container-voiture-repa,
    #container-moto-repa,
    #container-camion-repa,
    #container-camping-repa {
        width: 260px;
    }

    #container-camion-repa,
    #container-camping-repa {
        margin-top: 20px;
    }

    /* .popup{
    height: 100%;
    width: 100%;
    overflow-y: scroll;
} */


    /* .container-text-popup h1 {
        padding-top: 3%;
        font-size: 24px;
    } */

    /*
.container-text-popup h2{
    margin-top: 2%;
    font-size: 22px;
}

.container-text-popup p{
    font-size: 14px;
}*/

    .menu-modif-profil {
        width: 550px;
    }

    .btn-modif-monprofil {
        font-size: 16px;
        margin-left: 2%;
        padding-right: 5%;
        width: 150px;
    }

    .btn-modif-document {
        font-size: 15px;
        margin-left: 2%;
        padding-right: 5%;
        width: 150px;
    }

    .btn-modif-paiement {
        font-size: 16px;
        margin-left: 2%;
        padding-right: 5%;
        width: 150px;
    }

    #container-ico-validation {
        display: none;
    }

    /*.button-connexion{
    display: none;
}*/

    /*.button-inscription{
    display: none;
}*/

    .ici {
        display: block !important;
    }

    .icone-user-deco {
        display: block;
        font-size: 25px;
        color: #404041;
    }

    /*.container-logo-index {
    margin-left: auto;
    margin-right: auto;
}*/

    /*#categorie-recherche {
    width: 40%;
    float: none;
    margin-left: 0;
}*/

    /*#region {
    width: 40%;
    float: none;
    margin-left: 0;
}

#department {
    width: 40%;
    float: none;
    margin-left: 0;
}

#city{
    width: 40%;
    float: none;
    margin-left: 0;
}*/

    /*.btn-recherche {
    left: 34%;
    font-size: 25px;
}*/


}


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

    .header {
        height: 70px;
    }

    .container-slogan {
        display: none;
    }

    /*.container-accueil {
    height: auto;
}*/

    .container-slogan-mobile {
        width: 100%;
        display: block;
        text-align: center;
    }

    .slogan {
        width: 463px;
        font-size: 29px;
        padding-top: 20px;
    }

    .container-bonhomme {
        display: none;
    }

    .container-bonhomme-mobile {
        margin-top: 6%;
        margin-bottom: 5%;
    }

    .container-bonhomme-mobile img {
        width: 320px;
    }

    .container-icone-index {
        width: 375px;
        margin-top: 4%;
    }

    /*.container-voiture-index:nth-child(1) {
    border-radius: 10px;
    width: 85px;
    height: 80px;
}

.container-voiture-index:nth-child(2) {
    border-radius: 10px;
    width: 85px;
    height: 80px;
}

.container-voiture-index:nth-child(3) {
    border-radius: 10px;
    width: 85px;
    height: 80px;
}

.container-voiture-index:nth-child(4) {
    border-radius: 10px;
    width: 85px;
    height: 80px;
}*/

    .voiture-index {
        font-size: 50px;
        padding: 2px;
    }


    /*.container-voiture-index {
    margin-left: 2%;
    border-radius: 20px;
    width: 20%;
    height: 88%;
}*/

    .voiture-index {}

    .comment {
        display: none !important;
    }

    /*.button-publication {
   left: 60.9%;
   font-size: 1.5em;
   margin-bottom: 50px;
}*/

    .button-repondre-annonce {
        left: 60.9%;
        font-size: 1.5em;
        margin-bottom: 50px;
    }

    .container-bonhomme {}

    .img-mecano {
        width: 100%;
        margin: 0;

    }

    /*.button-annonce {
        display: none !important;
    }*/


    /*.button-inscription-particulier {
    float: right;
}*/

    /*.button-connexion {
    float: right;
}*/

    .etape1,
    .etape2,
    .etape3 {
        width: 100%;
    }

    .etape2 {
        margin-left: auto;
        margin-right: auto;
    }

    .etape2,
    .etape3 {
        margin-top: 80px;
    }

    .etape1 img,
    .etape2 img,
    .etape3 img {
        width: 220px;
    }

    .etape1 h2,
    .etape2 h2,
    .etape3 h2 {
        font-size: 40px;
    }

    .etape1 p,
    .etape2 p,
    .etape3 p {
        width: 320px;
        font-size: 21px;
    }

    .titre-comment {
        font-size: 35px;
    }


    .icone-crayon {
        font-size: 50px;
        margin-top: 14%;
    }

    .icone-cle-marche {
        font-size: 50px;
        margin-top: 14%;
    }

    .icone-carte {
        font-size: 50px;
        margin-top: 14%;
    }

    .container-titre-pk {
        height: auto;
    }

    .titre-pk {
        font-size: 28px;
    }

    .container-img-temps {
        padding-top: 7%;
        width: 100%;
    }

    .img-temps {
        width: 270px;
        height: 225px;
    }

    .container-texte-temps {
        width: 100%;
    }

    .titre-temps {
        width: 410px;
        font-size: 32px;
    }

    .texte-temps {
        margin-top: 20px;
        width: 410px;
        font-size: 15px;
    }

    .container-tel {
        margin-top: 10%;
        display: flex;
    }

    .container-texte-tel {
        padding-top: 9%;
        width: 100%;
        order: 2;
    }

    .titre-tel {
        width: 475px;
        font-size: 32px;
    }

    .texte-tel {
        margin-top: 20px;
        width: 475px;
        font-size: 15px;
    }

    .container-img-tel {
        width: 100%;
        padding-left: 0;
        order: 1;
    }

    .img-tel {
        width: 270px;
        height: 205px;
    }

    .container-img-argent {
        padding-top: 5%;
        width: 100%;
    }

    .titre-argent {
        width: 338px;
        font-size: 32px;
    }

    .texte-argent {
        margin-top: 20px;
        width: 338px;
        font-size: 15px;
        padding-bottom: 30px;
    }

    .img-argent {
        width: 270px;
        height: 250px;
    }

    .container-texte-argent {
        padding-right: 0;
        width: 100%;
    }

    .titre-temps,
    .titre-tel,
    .titre-argent {
        margin-top: 0%;

    }

    .container-dernier-avis-annonce {
        margin-top: 10%;
    }

    .avis-index {
        height: 95px;
        width: 390px;
        border-radius: 17px;
    }

    .avis-avatar-prenom p {
        margin-left: 0%;

    }

    .avis-avatar-prenom {
        width: 25%;
    }

    .avis-avatar-prenom-index p {
        font-size: 17px;
    }

    .avis-etoile-avis-index {
        position: relative;
    }

    .avis-etoile-avis-index p {
        position: absolute;
        top: 45%;
        left: 20px;
    }




    .container-avis-index h4 {
        font-size: 30px;
    }

    .container-annonce-index h4 {
        font-size: 30px;
    }

    .formulaire-newsletter {
        height: 100%;
        position: relative;
        width: 300px;
        margin-left: auto;
        margin-right: auto;
    }

    .annonce-index {
        height: 195px;
        width: 220px;
        margin-left: 10px;
        margin-top: 1px;
        border-radius: 15px;
    }

    .titre-petite-annonce-index {
        font-size: 20px;
        margin-top: 6px;
    }

    .marque-petite-annonce-index {
        font-size: 15px;
    }

    .container-ville h1 {
        font-size: 23px;
        margin-left: 8%;
        margin-right: 8%;
    }

    .container-liste-ville ul {
        width: 35%;
    }

    .liste-ville3 {
        display: none;
    }

    .container-dernier-avis-annonce {
        height: auto;
    }

    .container-text-newsletter p {
        font-size: 24px;
    }

    .footer {
        width: 100%;
        height: auto;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .titre-service {
        text-align: center;
    }

    .text-categorie {
        margin-top: 15%;

    }


    .text-remplir-form-js {

        font-size: 1.6rem;

    }

    .copyright {
        text-align: center;
        color: #404041;
        font-family: "Open Sans Condensed", sans-serif;
        font-weight: 700;
    }

    .popup-inscription {
        margin-top: 0;
        margin-left: 0;
        height: 100%;
        width: 100%;
        z-index: 10;
        background-color: #fffad6;
        border: 2px solid orange;
        border-radius: 0;
    }

    /*.container-formulaire-inscription-particulier-js p {
    font-size: 1.6rem;

}*/

    /*.icone-fermer-particulier {
    color: orange!important;
    font-size: 2rem;
    position: absolute;
    top: 2%;
    right: 4%;
    cursor: pointer;
}*/

    .erreur {
        font-size: 1.3rem !important;
    }

    /*.conditition-ins{
    margin-left: -12%;
}*/

    /*.popup-connexion {
    margin-top: 52%;
    margin-left: 10%;
    height: auto;
    width: 80%;
    z-index: 10;
    background-color: white;
    border: 2px solid orange;
    border-radius: 20px;
}*/

    /*.container-formulaire-connexion p {
    font-size: 1.6rem;
}*/

    /*.icone-fermer {

    font-size: 2rem;

}*/

    .form-annonces-js {

        height: auto;
        margin-top: 0%;

    }

    .btn-precedent-form {
        border-radius: 27px;
        background-color: orange;
        border: 1px solid #ffbc40;
        width: 100px;
        color: white;
        cursor: pointer;
    }

    .container-tout-marque-modele {
        margin-left: auto;
        width: 280px;
    }

    .container-tout-titre-description {
        width: 280px;
        margin-right: auto;
    }

    .container-tout-prix-bouton {
        width: 280px;
        margin-top: 5%;
    }

    .text-container-form-marque-modele {}

    .container-form-marque-modele {
        box-shadow: 1px 1px 12px #555;
        border: 2px solid #ffa500;
        width: 87%;
        height: 220px;
        padding: 9%;
        padding-top: 2%;
        border-radius: 10%;
        margin-left: 5%;
    }

    .text-container-form-titre-description {}

    .container-form-titre-description {
        border: 2px solid #ffa500;
        position: relative;
        box-shadow: 1px 1px 12px #555;
        width: 87%;
        height: 220px;
        padding: 9%;
        float: left;
        border-radius: 10%;
        margin-left: 5%;
    }

    .text-container-form-prix-bouton {}

    .container-form-prix-bouton {
        border: 2px solid #ffa500;
        position: relative;
        box-shadow: 1px 1px 12px #555;
        width: 87%;
        height: 220px;
        padding: 9%;
        border-radius: 10%;
        margin-left: 5%;
    }


    /* .table-bordered td,
    .table-bordered th {
        border: 1px solid #dee2e6;
        font-size: 13px;
    }

    .table td,
    .table th {
        padding: 0.2rem !important;
    } */

    .calendrier-categorie {
        width: 96% !important;
        margin-left: 2%;
        border-radius: 20px;
        border: 5px solid orange !important;
        margin-top: 2%;
        display: block;
        overflow: hidden;
    }


    .btn-confirmer-calendrier {
        font-size: 25px;
    }

    .container-calendrier-js {
        margin-top: 7%;
    }


    .text-dispo-form-js {
        font-size: 30px;
        margin-top: 15%;
    }

    .text-recap-form-js {
        font-size: 30px;
        margin-top: 15%;
    }

    .container-recap-text-annonce {
        width: 90%;
        margin-left: 5%;
        order: 1;
    }

    .container-recap-text-annonce h4 {
        font-size: 30px;
    }

    .titre-recap-text-annonce {
        font-size: 25px;
        margin-top: 0%;
    }

    .marque-recap-annonce {
        margin-left: 2%;
        font-size: 20px;
    }

    .container-recap-text-annonce span {
        font-size: 20px;
    }

    .modele-recap-annonce {
        float: left;
        margin-left: 34%;
        font-size: 20px;
    }

    .description-recap-annonce {
        clear: both;
        margin-top: 2%;
        font-size: 20px;
        margin-right: 5%;
        margin-left: 5%;
    }


    .container-voiture-recap-annonce {
        margin-top: 2%;
        height: 50px;
        width: 60px;
        border-radius: 9px;

    }

    .icone-vehicule-recap {
        font-size: 40px;
    }

    .container-prix-annonce-complete {
        border-radius: 11px;
        margin-top: 5%;
        width: 130px;
    }

    .prix1-annonce-complete {
        font-size: 35px;
    }

    .prix2-annonce-complete {
        font-size: 35px;
    }

    .p-ville-annonce-complete {
        font-size: 20px;
        margin-top: 3%;
        margin-bottom: 1% !important;
    }

    /* .icone-pos {
        font-size: 23px;
    } */

    /* .container-recap-panne {
        width: 40%;
        margin-left: auto;
        margin-right: auto;
        order: 2;
        margin-top: 5%;
    } */

    /* .container-recap-panne h4 {
        font-size: 20px;

    }
 */
    /* #form-recap-panne p {
        font-size: 15px;
    } */

    .container-recap-dispo h4 {
        font-size: 20px;
    }

    .recap-panne-journee {
        font-size: 15px;
    }

    .recap-panne-horaire {
        font-size: 15px;
    }

   /*  .btn-confirmation-recap {
        margin-top: 4%;
        font-size: 20px;
        border-radius: 10px;
        order: 4;
        width: 130px;
    } */

    /* .container-mecano-fin-annonce {
        width: 200px;
        margin-top: 12%;
    }


    .container-text-fin-annonce {
        width: 90%;
        margin-top: 8%;
    }

    .container-text-fin-annonce p {
        font-size: 19px;
    }

    .container-text-fin-annonce span {
        font-size: 19px;
    }

    #compteur {
        font-size: 50px;
    } */

    .menu-header {
        display: none;
    }

    .menu-burger {
        display: flex !important;
    }

    .container-logo {
        width: 60%;
    }

    .fa-1x {
        font-size: 1.5rem;
    }

    .navbar-toggler.toggler-example {
        cursor: pointer;
    }

    .dark-blue-text {
        color: orange;
    }

    .navbar-light .navbar-nav .nav-link {
        color: orange !important;
    }

    .navbar-nav {
        padding-top: 2%;
    }

    .container-profil-info-public {
        position: relative;
        height: 470px;
        width: 290px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 22%;

    }

    .container-profil-info-public img {
        height: 20%;
        width: 37%;
        left: 32%;
    }

    /*.rating-profil label:before {
    font-size: 28px;
}*/

    .container-profil-info-public h2 {
        font-size: 1.2rem !important;
    }

    .container-profil-info-public p {
        font-size: 1rem;
        margin-left: 16%;
    }

    .container-description h4 {
        font-size: 1.3rem !important;
    }

    .container-description {
        margin-top: 6%;
        margin-bottom: 4%;
    }

    .container-profil-info-public a {
        font-size: 18px;
    }

    .container-description p {
        font-size: 0.8rem !important;
        margin-left: 5% !important;
    }

    /* .container-avis-mecano {
        margin-top: 8.2%;
        margin-left: auto;
        margin-right: auto;
        width: 80%;
        height: auto;
    } */

    /* .container-avis-mecano h3 {

        font-size: 2rem;
        margin-bottom: 7%;
    } */

    /* .btn-voir-plus {
        margin-left: auto;
        margin-right: 38%;
    } */

    /* .btn-voir-moins {
        margin-left: 38%;
    } */

    .formulaire-profil-particulier2 {
        width: 70%;
        margin-left: 15%;
    }

    /*--------------------------faq-------------------------------*/

    .container-faq {
        width: 90%;
        margin-left: 5%;
    }

    .container-faq h1 {
        margin-top: 10px;
        font-size: 30px;
    }


    /*-------------------qui sommes nous-------------------------------*/

    /*.container-nous p{
    font-weight: bold;
    font-size: 15px;
}*/

    /*-------------------page recrutement mécano-------------------------------*/

    /*.container-recrutement h1{
    margin-top: 14%;
    font-size: 21px
}*/

    /*.preambule{
    font-weight: bold;
    font-size: 18px;
}*/


    /*.container-recrutement span{
    color: orange;
    font-weight: bold;
}

.container-recrutement h2{

    font-size: 22px;
}

.container-recrutement p{
    margin-left: 10%;
    margin-right: 10%;
    font-size: 15px;
}*/

    .container-vehicule-js {
        top: 14%;
        left: 44%;
    }

    /*.btn-reparation {
    height: 70px;
    margin-left: 2%;
    margin-top: 2%;
    width: 190px;
    font-size: 15px;
    border-radius: 9px;
}*/

    /*#formPanne48 {
    height: 70px;
    margin-left: 2%;
    margin-top: 2%;
    width: 190px;
    border-radius: 9px;
    margin-right: 0.7%;
}*/

    /*.btn-reparation-devis {
    font-size: 15px;
}*/

    /*.container-reparation-client {
    width: 450px;
    min-height: 200px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 14%;
    text-align: start;
    border-left: 15px solid orange;
    border-right: 15px solid orange;
    border-top: 20px solid orange;
    border-bottom: 20px solid orange;
}

.container-reparation-client img {
    top: -58px;
    left: 149px;
    width: 140px;
}*/

    .container-form-marque-modele select {
        font-size: 19px;
    }

    .container-form-marque-modele input {
        font-size: 19px;
    }

    .container-form-titre-description textarea {
        font-size: 19px;
    }

    .container-form-titre-description input {
        font-size: 19px;
    }

    .container-form-prix-bouton input {
        font-size: 20px;
    }

    /* .annonce {
        height: 220px;
        width: 500px;
    } */

    /* .titre-petite-annonce {
        font-size: 20px;
    } */

    .marque-petite-annonce {
        font-size: 20px;
        margin-left: 3%;
    }

    .icone-vehicule {
        font-size: 60px;
        margin-top: 4%;
    }

    .prix1-petite-annonce {
        font-size: 25px;
    }

    .prix2-petite-annonce {
        font-size: 25px;
    }

    /*.container-barre-recherche {
    width: 500px;
    height: 135px;
    padding-top: 2%;
}

.container-marque-annonce-resumer{
    width: 50%;
    text-align: center;
}

.container-modele-annonce-resumer{
    width: 50%;
    text-align: center;
}

.container-annee-annonce-resumer{
    width: 50%;
    text-align: center;
}

.container-kilometre-annonce-resumer{
    width: 50%;
    text-align: center;
}*/

    /*.container-barre-recherche form{
    display: flex;
    flex-flow: row wrap;
}*/

    /*.button-connexion {
    display: none;
}*/

    /*.button-inscription-particulier {
   display: none;
}*/

    /*.button-rejoindre-header{
    display: none;
}*/

    /*.li-menu, .a-menu {
    font-size: 18px!important;
}

.li-menu {
    text-indent: 23px!important;
}

.li-menu-connexion{
    border-top: 2px solid white;
}*/

    /*.a-menu-connexion{
    margin-top: 24px!important;
}*/

    .container-annonce-panne-dispo {
        flex-flow: column wrap;
    }

    .container-annonce-dispo h2 {
        font-size: 23px;
    }

    .container-annonce-dispo p {
        font-size: 17px;
    }

    .container-prix-btn-offre {
        width: 150px;
        height: 97px;
    }

    .container-prenom-nom-offre-mecano {
        margin-top: 2%;
        margin-bottom: 4%;
    }

    .prenom-offre-mecano {
        font-size: 21px;
    }

    .nom-offre-mecano {
        font-size: 21px;
    }

    .prix-offre-mecano {
        font-size: 20px;
    }

    .jour-offre-mecano {
        margin-top: 0%;
    }


    .comment2 {
        font-size: 21px;
        margin-top: 9%;
        margin-bottom: 6% !important;
    }

    .button {
        width: 40px;
        height: 40px;
    }

    .trait-gris {
        bottom: -9%;
    }

    .container-offre-mecano {
        margin-top: 13%;
    }

    .container-profil-annonce-complet {
        flex-direction: column;
    }

    .container-orange2 {
        border-top-left-radius: 17px;
        border-top-right-radius: 17px;
    }

    .text-paiement {
        font-size: 20px;
    }

    /* .container-offre-rdv {
        width: 270px;
        height: 280px;
    }
 */
    /* .container-prenom-nom-offre-rdv {
        margin-bottom: 1%;
    } */

    /* .prenom-offre-rdv {
        font-size: 20px;
    }

    .nom-offre-rdv {
        font-size: 20px;
    } */

    .titre-offre-rdv {
        font-size: 17px;
    }

    /*.avatar-offre-rdv {
        margin-top: 2%;
    }*/

    /* .prix-offre-rdv {
        font-size: 20px;
    } */

    /* .jour-offre-rdv {
        font-size: 18px;
    } */

   /*  .heure-offre-rdv {
        font-size: 18px;
    } */

    .btn-terminer-rdv {
        margin-top: 0px;
    }

    #container-voiture-repa,
    #container-moto-medi,
    #container-camion-repa,
    #container-camping-repa {
        width: 220px;
    }

    #container-camping-repa {
        margin-top: 20px;
    }

    #container-camion-repa {
        margin-top: 20px;
    }

    .text-qmsm {
        font-size: 14px !important;
        width: 500px;
    }

    /*#container-menu-profil {
display: none;
}*/

    #container-voiture-repa,
    #container-moto-repa,
    #container-camion-repa,
    #container-camping-repa {
        width: 220px;
    }

    /*.titre-recrutement {
    font-size: 23px;
}*/

    /*.container-recrutement {
    width: 82%;
}

.container-recrutement p {
    margin-left: auto;
    margin-right: auto;
    font-size: 16px;
}

.container-recrutement img {
    width: 480px;
    margin-left: auto;
    margin-right: auto;
    display: block;
}*/

    /*.container-form-info {
    overflow: hidden;
    width: 100%;
}*/

    .container-adresse-cplt {
        width: 100%;
    }

    .container-ville-cplt {
        width: 100%;
        margin-right: 0;
    }

    .container-code_postal-cplt {
        width: 100%;
        margin-left: 0;
        margin-top: 20px;
    }

    .container-tel-cplt {
        width: 100%;
        margin-right: 0%;
    }

    .container-inputDate_n {
        width: 100%;
        margin-left: 0%;
    }

    .container-lieu_n {
        width: 100%;
        margin-right: 0%;
        margin-top: 20px;
    }

    .container-lieu_r {
        width: 100%;
        margin-left: 0%;
        margin-top: 20px;
    }

    #form-rib {
        overflow: hidden;
        width: 100%;
    }

    #container-ville-rib {
        width: 100%;
        margin-right: 0%;
    }

    #container-code_postal-rib {
        width: 100%;
        margin-left: 0%;
    }

    .formulaire-rib select {
        width: 100%;
    }

    #container-iban-rib {
        width: 100%;
        margin-right: 0%;
    }

    #container-bic-rib {
        width: 100%;
        margin-left: 0%;
    }

    #form-document {
        width: 80%;
    }

    #container-identite-recto-doc {
        width: 100%;
        margin-right: 0%;
    }

    #container-identite-verso-doc {
        width: 100%;
        margin-left: 0%;
    }

    .container-texte-nous {
        width: 80%;
    }

    .container-titre-mangopay h1 {
        font-size: 22px;
    }

    .container-titre-mangopay h2 {
        font-size: 17px;
    }

    /*.container-mentions {
    width: 90%;
}*/

    /*#container-profil {
    padding-top: 70px;
}*/

    #panne-voiture {
        margin-top: 20px;
    }

    /*.btn-reparation-liste {
    height: 70px;
    margin-left: 2%;
    margin-top: 10%;
    width: 190px;
    font-size: 15px;
    border-radius: 9px;
}*/

    .i-bateau {
        height: 43px;
        width: 61px;
    }

    .confiance {
        text-align: center;
        width: 90%;
        margin-left: auto;
        margin-right: auto;
        background-color: white;
        margin-top: 30px;
        border-radius: 20px;
    }

    /*.formulaire-inscription-particulier {
    padding-top: 30%;
}*/

    /*.icone-user-co-mobile {
        display: block;
        font-size: 26px;
        margin-right: 17px;
        margin-top: -4px;
        color: #404041;
    }*/

    /* .icone-notif-mobile {
    display: block;
    font-size: 26px;
    margin-right: 17px;
    margin-top: -4px;
    color: #404041!important;
} */

    /*.button-notif {
        display: none;
    }*/

    /* .icone-user-co {
        display: none;
    } */

    .container-toute-annonce {
        padding-top: 75px;
    }

}

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

    /*.button-notif {
    display: none;
}*/
    /* .icone-user-co {
        display: none;
    } */

    /*.container-logo-index {
    margin-left: auto;
    margin-right: auto;
}*/

    .container-icone-index {
        width: 330px;
        margin-top: 4%;
    }

    /*.container-voiture-index:nth-child(1) {
    border-radius: 9px;
    width: 75px;
    height: 70px;
}

.container-voiture-index:nth-child(2) {
    border-radius: 9px;
    width: 75px;
    height: 70px;
}

.container-voiture-index:nth-child(3) {
    border-radius: 9px;
    width: 75px;
    height: 70px;
}

.container-voiture-index:nth-child(4) {
    border-radius: 9px;
    width: 75px;
    height: 70px;
}*/

    .voiture-index {
        font-size: 40px;
    }

    .container-bonhomme-mobile img {
        width: 280px;
    }

    /*.button-publication {
    font-size: 19px;
    border-radius: 11px;
    margin-top: 20px;
    padding: 17px 16px;
}*/

    .button-repondre-annonce {
        font-size: 19px;
        border-radius: 11px;
        margin-top: 20px;
        padding: 17px 16px;
    }

    .titre-comment {
        font-size: 30px;
    }

    .etape1 h2,
    .etape2 h2,
    .etape3 h2 {
        font-size: 35px;
    }

    .etape1 p,
    .etape2 p,
    .etape3 p {
        width: 320px;
        font-size: 19px;
    }


    .icone-crayon {
        font-size: 3rem;
        margin-top: 12%;
    }

    .icone-cle-marche {
        font-size: 3rem;
        margin-top: 12%;
    }

    .icone-carte {
        font-size: 3rem;
        margin-top: 12%;
    }

    .titre-pk {
        font-size: 23px;
        margin-bottom: 0%;
    }


    .container-img-argent {
        padding-top: 4%;
    }

    .container-avis-index h4 {
        font-size: 25px;
    }

    .avis-index {
        height: 90px;
        width: 340px;
        border-radius: 17px;
    }

    .container-annonce-index h4 {
        font-size: 25px;
    }

    .container-ville h1 {
        font-size: 21px;
        margin-left: 8%;
        margin-right: 8%;
    }

    .container-liste-ville ul {
        width: 41%;
    }

    .formulaire-newsletter {
        height: 100%;
        width: 100%;
    }

    .container-text-newsletter {
        width: 40%;
        margin-left: auto;
        margin-right: auto;
    }

    .container-text-newsletter svg {
        display: none;
    }

    .newsletter {
        height: 120px;
        padding: 9px;
        margin-bottom: 3%;
        display: block;
    }

    .container-form-newsletter {
        width: 85%;
        margin-left: auto;
        margin-right: auto;
        height: 45px;
        margin-top: 3%;
    }


    /* #form-voiture,
#form-moto,
#form-vehicule-pro,
#form-camping-car{
    width: 50%;
    height: 190px;
    padding: 15px;
}
 */
    /*.container-voiture:hover .text-voiture,
.container-moto:hover .text-moto,
.container-bateau:hover .text-bateau,
.container-vehicule-agricole:hover .text-vehicule-agricole {
    font-size: 23px;
}

.container-voiture,
.container-moto,
.container-vehicule-pro,
.container-camping-car{
    width: 180px;
    border-radius: 12px;
    margin-left: auto;
}*/

    .icone-vehicule-categorie {
        font-size: 68px;
    }

    .text-choisir-panne-js {
        font-size: 25px;
        margin-top: 0;
    }

    /*.btn-validation-panne {
    left: 37%;
}*/

    .container-vehicule-js {
        top: 14%;
        left: 40%;
    }

    /*#form-toute-panne p {
    font-size: 17px;
}*/

    .text-remplir-form-js {
        font-size: 25px;
    }

    .container-tout-titre-description {
        margin-top: 5%;
    }

    .text-categorie {
        margin-top: 17%;
        font-size: 25px;
    }

    /* .table-bordered td,
    .table-bordered th {
        border: 1px solid #dee2e6;
        font-size: 12px;
    }
 */
    .btn-confirmer-calendrier {
        font-size: 25px;
    }

    /*-----------------------------------------------*/

    .text-dispo-form-js {
        font-size: 25px;
        margin-top: 20%;
    }

    .text-recap-form-js {
        font-size: 25px;
        margin-top: 20%;
    }

    .container-recap-text-annonce {
        width: 90%;
        margin-left: 5%;
        order: 1;
    }

    .container-recap-text-annonce h4 {
        font-size: 20px;
    }

    .titre-recap-text-annonce {
        font-size: 20px;
        margin-top: 0%;
    }

    .marque-recap-annonce {
        margin-left: 2%;
        font-size: 18px;
    }

    .container-recap-text-annonce span {
        font-size: 18px;
    }

    .description-recap-annonce {
        clear: both;
        margin-top: 2%;
        font-size: 18px;
        margin-right: 5%;
        margin-left: 5%;
    }


    .container-voiture-recap-annonce {
        margin-top: 2%;
        height: 50px;
        width: 60px;
        border-radius: 9px;

    }

    .icone-vehicule-recap {
        font-size: 40px;
    }

    .container-prix-annonce-complete {
        border-radius: 8px;
        margin-top: 5%;
        width: 100px;
    }

    .p-ville-annonce-complete {
        font-size: 18px;
        margin-top: 3%;
        margin-bottom: 1% !important;
    }

    /* .icone-pos {
        font-size: 20px;
    } */

    /* .container-recap-panne {
        width: 40%;
        margin-left: auto;
        margin-right: auto;
        order: 2;
        margin-top: 5%;
    } */

    /* .container-recap-panne h4 {
        font-size: 18px;

    } */

   /*  #form-recap-panne p {
        font-size: 12px;
    } */

    

    .container-recap-dispo h4 {
        font-size: 18px;
    }

    .recap-panne-journee {
        font-size: 12px;
    }

    .recap-panne-horaire {
        font-size: 12px;
    }

   /*  .btn-confirmation-recap {
        margin-top: 4%;
        font-size: 18px;
        border-radius: 7px;
        order: 4;
        width: 115px;
    } */

    /* .container-text-fin-annonce p {
        font-size: 15px;
    }

    .container-mecano-fin-annonce {
        width: 180px;
        margin-top: 12%;
    } */

    /* .annonce {
        height: 220px;
        width: 470px;
    } */

    /* .titre-petite-annonce {
        font-size: 20px;
        margin-top: 3%;
    } */

    .marque-petite-annonce {
        font-size: 18px;
        margin-left: 3%;
    }

    .icone-vehicule {
        font-size: 50px;
        margin-top: 4%;
    }

    .container-petit-prix {
        margin-top: 0;
    }

    .prix1-petite-annonce {
        font-size: 23px;
    }

    .prix2-petite-annonce {
        font-size: 23px;
    }

    /*.barre-recherche {
    width: 470px;
    height: 120px;
}

.container-barre-recherche {
    width: 450px;
    height: 135px;
    padding-top: 2%;
}

.container-barre-recherche form{
    display: flex;
    flex-flow: row wrap;
}

#categorie-recherche {
    width: 40%;
    float: none;
    margin-left: 0;
}

#region {
    width: 40%;
    float: none;
    margin-left: 0;
}

#department {
    width: 40%;
    float: none;
    margin-left: 0;
}

#city{
    width: 40%;
    float: none;
    margin-left: 0;
}

.btn-recherche {
    left: 34%;
}*/

    /*.container-recrutement h2 {
    font-size: 19px;
}

.container-recrutement p {
    font-size: 14px;
}

.container-recrutement h1 {
    margin-top: 18%;
    font-size: 21px;
}*/

    /* .rating2 {
        margin-left: 70px;
    }

    .rating2 label:before {
        font-size: 20px;
    } */

    /* .container-avis-mecano h3 {
        font-size: 25px;
        margin-bottom: 7%;
    } */

    .container-profil-info-public {
        height: 440px;
        width: 260px;
        margin-top: 22%;
    }

    /*.rating-profil label:before {
    font-size: 23px;
}*/

    .container-profil-info-public p {
        font-size: 15px;
    }

    .container-description h4 {
        font-size: 20px !important;
        margin-top: 15px;
    }

    .container-description {
        margin-top: 3%;
        margin-bottom: 3%;
    }

    /* .btn-voir-plus {
        margin-left: auto;
        margin-right: 36%;
    } */

    .container-question h2 {
        font-size: 16px;
    }

    .container-question p {
        font-size: 12px;
    }

    .container-faq h1 {
        font-size: 28px;
    }

    @keyframes checked-anim {
        50% {
            width: 65%;
            height: 3000px;
        }

        100% {
            width: 65%;
            height: 100%;
            border-radius: 0;
        }
    }

    @keyframes not-checked-anim {
        0% {
            width: 50%;
            height: 3000px;
        }
    }

    /*.li-menu, .a-menu {
    font-size: 19px!important;
}*/

    .container-card {
        width: 100%;
    }

    .card {
        width: auto;
        margin: 0;
        height: 215px;
    }

    .card .additional {
        width: 120px;
    }

    .card .additional .more-info {
        width: 65%;
        left: 122px;
    }

    .card .additional .coords {
        margin: 0px -1px;
    }

    .card .additional .user-card {
        width: 120px;
    }

    .card h1 {
        font-size: 20px;
        margin-top: 10px;
    }

    /*.hover-mobile-h1{
    margin-left: 0!important;
}*/

    .card .additional .user-card .level {
        font-size: 10px;
    }

    .card .general {
        width: 254px;
    }

    .card .additional .coords-top {
        margin-top: 20px;
    }

    .text-card {
        font-size: 14px;
    }

    .card .additional .stats {
        bottom: 5px;
    }

    .card .additional .stats div.title {
        font-size: 10px;
    }

    .stats svg {
        width: 23px !important;
    }

    .card .additional .stats div.value {
        font-size: 20px;
    }

    .card .additional .stats div.value.infinity {
        font-size: 20px;
    }

    .card .additional .stats {
        font-size: 22px;

    }

    /*.container-btn-profil-monprofil-mobile, .container-btn-mesannonces-profil-mobile, .container-btn-mesoffres-profil-mobile, .container-btn-mesrdv-profil-mobile, .container-btn-historique-profil-mobile .container-button-deconnexion-mobile {
    font-size: 14px;
    width: 90px;
}*/

    .ico-annonce-monprofil,
    .ico-profil-monprofil,
    .ico-rdv-monprofil,
    .ico-historique-monprofil,
    .ico-deco-monprofil,
    .ico-offre-monprofil {
        font-size: 25px;
    }

    .text-qmsm {
        font-size: 13px !important;
        width: 420px;
    }

    /*.titre-recrutement {
    font-size: 15px;
}

.titre-recrutement {
    font-size: 23px;
}*/

    /*.container-recrutement {
    width: 90%;
}

.container-recrutement p {
    font-size: 16px;
}

.container-recrutement img {
    width: 430px;
}*/

    #form-document {
        width: 100%;
    }

    #container-identite-recto-doc {
        width: 90%;
        margin-right: 0%;
    }

    #container-identite-verso-doc {
        width: 90%;
        margin-left: 0%;
    }

    #container-recto-verso-doc {
        border: none;
    }

    /*#container-menu-modif-profil {
    padding-top: 72px;
}*/

    .menu-modif-profil {
        box-shadow: 1px 1px 12px #555;
        width: 100%;
        border-radius: 0;
        border: 2px solid orange;
        background-color: white;
        margin-bottom: 0;
        text-align: center;
    }

    .btn-modif-monprofil {
        font-size: 16px;
        margin-left: 2%;
        padding-right: 0%;
        width: 140px;
    }

    .btn-modif-paiement {
        font-size: 16px;
        margin-left: 2%;
        padding-right: 0%;
        width: 140px;
    }

    .btn-modif-document {
        font-size: 16px;
        margin-left: 2%;
        padding-right: 0%;
        width: 140px;
    }

    /*#text-pre-annonce p {
    width: 460px;
    margin-top: 40px;
    font-size: 16px;
}

#text-pre-annonce h1{
    font-size: 30px;
}*/

    /* .container-vehicule {
        width: 470px;
    }
 */

}

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

.categorie-recherche label {
    width: 150px;
}

.categorie-recherche-annoncement h2 {
    font-size: 1rem;
}

.annonce {
    padding: 1rem;
}



.titre-annonce-complete {
    font-size: 2.4rem;
}

.container-liste-panne-annonce {
    width: auto;
}

}


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

    .header {
        text-align: center;
    }

    /*.icone-burger{
    float: left;
}*/

    /*.icone-user-deco {
        float: right;
    }*/

    /* .icone-user-co {
        float: right;
    } */

    /*.logo {
    clear: both;
    width: 225px;
    height: 35px;
}*/

    .slogan {
        width: 310px;
        font-size: 22px;
        padding-top: 0px;
    }

    .container-icone-index {
        width: 285px;
        margin-top: 4%;
    }

    /*.container-voiture-index:nth-child(1) {
    border-radius: 7px;
    width: 65px;
    height: 60px;
}

.container-voiture-index:nth-child(2) {
    border-radius: 7px;
    width: 65px;
    height: 60px;
}

.container-voiture-index:nth-child(3) {
    border-radius: 7px;
    width: 65px;
    height: 60px;
}

.container-voiture-index:nth-child(4) {
    border-radius: 7px;
    width: 65px;
    height: 60px;
}*/

    .voiture-index {
        font-size: 35px;
        padding: 2px;
    }

    .container-bonhomme-mobile img {
        width: 245px;
    }

    /*.button-publication {
    font-size: 17px;
    border-radius: 11px;
    margin-top: 20px;
    padding: 17px 16px;
    margin-bottom: 95px;
}*/

    .button-repondre-annonce {
        font-size: 17px;
        border-radius: 11px;
        margin-top: 20px;
        padding: 17px 16px;
        margin-bottom: 95px;
    }

    .titre-comment {
        font-size: 20px;
    }

    .etape1 img,
    .etape2 img,
    .etape3 img {
        width: 190px;
    }

    .etape1 h2,
    .etape2 h2,
    .etape3 h2 {
        font-size: 30px;
    }

    .etape1 p,
    .etape2 p,
    .etape3 p {
        font-size: 15px;
    }

    .icone-crayon {
        font-size: 3rem;
        margin-top: 12%;
    }

    .icone-cle-marche {
        font-size: 3rem;
        margin-top: 12%;
    }

    .icone-carte {
        font-size: 3rem;
        margin-top: 12%;
    }

    .titre-pk {
        font-size: 20px;
    }

    .container-img-temps {
        padding-top: 17%;
    }

    .img-temps {
        width: 190px;
        height: 165px;
    }

    .titre-temps {
        width: 241px;
        font-size: 20px;
    }

    .texte-temps {
        width: 241px;
        font-size: 15px;
    }

    .titre-tel {
        width: 296px;
        font-size: 20px;
    }

    .texte-tel {
        width: 296px;
        font-size: 15px;
    }

    .container-img-tel {
        padding-right: 0;
        padding-top: 0%;
    }

    .img-tel {
        width: 250px;
        height: 200px;
    }

    .container-argent {
        margin-top: 50px;
    }

    .container-img-argent {
        padding-top: 2%;
    }

    .img-argent {
        width: 200px;
        height: 183px;
    }

    .titre-argent {
        width: 209px;
        font-size: 20px;
    }

    .texte-argent {
        width: 209px;
        font-size: 15px;
    }

    .container-avis-index h4 {
        font-size: 20px;
    }

    .avis-index {
        height: 85px;
        width: 290px;
        border-radius: 17px;
    }

    /* .rating2 {
        margin-left: 65px;
    }

    .rating2 label:before {
        font-size: 18px;
    } */

    .container-annonce-index h4 {
        font-size: 20px;
    }

    .container-ville h1 {
        font-size: 20px;
        margin-left: 5%;
        margin-right: 5%;
    }

    .container-liste-ville ul {
        display: inline-block;
        margin-left: auto;
        margin-right: auto;
        width: 53%;
    }

    .container-liste-ville li {
        font-size: 15px;
        margin-left: auto;
    }

    .liste-ville3 {
        display: none !important;
    }

    .liste-ville4 {
        display: none !important;
    }

    .service {
        width: 100% !important;
    }

    .categorie-footer {
        width: 100% !important;
    }

    .a-propos {
        width: 100% !important;
    }

    .contact {
        width: 100% !important;
    }

    .text-categorie {
        margin-top: 22%;
        font-size: 20px;
    }

    .logo-footer {
        width: 55%;
        margin-top: 2%;
    }

    /* #form-voiture,
#form-moto,
#form-vehicule-pro,
#form-camping-car{
    width: 50%;
    height: 165px;
    padding: 15px;
} */

    /*.container-voiture,
.container-moto,
.container-vehicule-pro,
.container-camping-car{
    width: 150px;
    border-radius: 14px;
    margin-left: auto;
}*/

    .icone-vehicule-categorie {
        font-size: 58px;
    }

    /*.container-voiture:hover .text-voiture,
.container-moto:hover .text-moto,
.container-bateau:hover .text-bateau,
.container-vehicule-agricole:hover .text-vehicule-agricole{
    font-size: 18px;
}*/

    .text-choisir-panne-js {
        font-size: 20px;
        margin-top: 5%;
    }

    /*.btn-reparation {
    height: 60px;
    margin-left: 2%;
    margin-top: 2%;
    width: 45%;
    font-size: 13px;
    border-radius: 9px;
}*/

    /* #formPanne48 {
    height: 60px;
    margin-left: 2%;
    margin-top: 2%;
    width: 45%;
    border-radius: 9px;
} */

    /*.btn-reparation-devis {
    font-size: 13px;
}

#form-toute-panne p {
    font-size: 15px;
}*/

    /*.btn-validation-panne {
    left: 150px;
    bottom: 4px;
}*/

    /* .titre-diagnostique {
        font-size: 19px;
        text-align: center;
    } */

    .text-remplir-form-js {
        font-size: 20px;
        margin-top: 20%;
    }

    /* .table-bordered td,
    .table-bordered th {
        font-size: 10px;
    } */

    .btn-confirmer-calendrier {
        font-size: 15px;
        padding: 4px 7px;
        border-radius: 7px;
    }

    /*-----------------------------------------------*/

    .text-dispo-form-js {
        font-size: 20px;
        margin-top: 22%;
    }

    .text-recap-form-js {
        font-size: 20px;
        margin-top: 22%;
    }

    .container-recap-text-annonce {
        width: 90%;
        margin-left: 5%;
        order: 1;
    }

    .container-recap-text-annonce h4 {
        font-size: 20px;
    }

    .titre-recap-text-annonce {
        font-size: 20px;
        margin-top: 0%;
    }

    .marque-recap-annonce {
        margin-left: 2%;
        font-size: 15px;
    }

    .container-recap-text-annonce span {
        font-size: 15px;
    }

    .description-recap-annonce {
        clear: both;
        margin-top: 2%;
        font-size: 15px;
        margin-right: 5%;
        margin-left: 5%;
    }


    .container-voiture-recap-annonce {
        margin-top: 2%;
        height: 40px;
        width: 45px;
        border-radius: 7px;

    }

    .icone-vehicule-recap {
        font-size: 27px;
    }

    .container-prix-annonce-complete {
        border-radius: 8px;
        margin-top: 5%;
        width: 80px;
    }

    .prix1-annonce-complete {
        font-size: 30px;
    }

    .prix2-annonce-complete {
        font-size: 30px;
    }

    .p-ville-annonce-complete {
        font-size: 15px;
        margin-top: 3%;
        margin-bottom: 1% !important;
    }

    /* .icone-pos {
        font-size: 18px;
    } */

    /* .container-recap-panne {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
        order: 2;
        margin-top: 5%;
    } */

  /*   .container-recap-panne h4 {
        font-size: 30px;

    } */

   /*  #form-recap-panne p {
        font-size: 20px;
    } */

    /* .container-recap-dispo {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        margin-left: 5%;
        order: 3;
        margin-top: 5%;
    } */

    .container-recap-dispo h4 {
        font-size: 18px;
    }

    .recap-panne-journee {
        font-size: 15px;
    }

    .recap-panne-horaire {
        font-size: 15px;
    }

    /* .btn-confirmation-recap {
        margin-top: 4%;
        font-size: 18px;
        border-radius: 7px;
        order: 4;
        width: 115px;
    } */

    .container-vehicule-js {
        top: 14%;
        left: 39%;
    }

    /*.btn-reparation-liste {
    height: 60px;
    margin-left: 2%;
    margin-top: 10%;
    width: 185px;
    font-size: 13px;
    border-radius: 9px;
}*/

    /*
.container-reparation-client {
    width: 100%;
    border-left: 8px solid orange;
    border-right: 8px solid orange;
    border-top: 10px solid orange;
    border-bottom: 10px solid orange;
    padding-top: 0;
    border-radius: 5px;
}*/


    /*
.titre-et-boite-panne {
    width: 360px;
}

.container-reparation-client img {
    top: -31px;
    left: 132px;
    width: 77px;
}*/

    /*#etape-2-annonce h3 {
    font-size: 24px;
}

#etape-2-annonce h2 {
    margin-bottom: 50px;
}*/



    /* .container-mecano-fin-annonce {
        width: 180px;
        margin-top: 12%;
    }

    .container-text-fin-annonce p {
        font-size: 15px;
    } */

    /*.container-recrutement h1 {
    margin-top: 21%;
    font-size: 19px;
}

.container-recrutement h2 {
    font-size: 16px;
}

.container-recrutement p {
    font-size: 13px;
}*/

    .container-faq h1 {
        font-size: 25px;
        margin-top: 10px;
    }

    .container-faq button {
        font-size: 14px;
    }

    .container-question h2 {
        padding: 1em 1em 1em 1em;
        font-size: 16px;
    }

    /*.container-barre-recherche {
    width: 365px;
    height: 185px;
    padding-top: 2%;
}

#categorie-recherche {
    width: 40%;
    margin-right: auto;
    margin-right: 0;
}

#marque-recherche {
    width: 40%;
    margin-right: auto;
    margin-left: 5%;
}

#panne-recherche {
    width: 40%;
    margin-left: auto;
    margin-right: 0;
}

#region-recherche {
    width: 40%;
    margin-left: 2%;
    margin-right: auto;
    margin-left: 5%;
}

#depart-recherche {
    width: 40%;
    margin-left: auto;
    margin-right: 0;
}

#ville-recherche {
    width: 40%;
    margin-right: auto;
    margin-left: 5%;
}*/

    /*.container-barre-recherche select {
    font-size: 14px;
}

.btn-recherche {
    left: 28%;
}

.container-annonce {
    margin-top: 5%;
}*/


    @keyframes checked-anim {
        50% {
            width: 100%;
            height: 3000px;
        }

        100% {
            width: 100%;
            height: 100%;
            border-radius: 0;
        }
    }

    @keyframes not-checked-anim {
        0% {
            width: 50%;
            height: 3000px;
        }
    }

    /*.li-menu, .a-menu {
    font-size: 20px!important;
}*/


    .container-annonce-complete span {
        font-size: 15px;
    }

    .container-prix-btn-offre {
        width: 150px;
        height: 90px;
    }

    /*.popup-connexion {
    margin-top: 0;
    margin-left: 0;
    height: 100%;
    width: 100%;
    z-index: 10;
    background-color: white;
    border: 2px solid orange;
    border-radius: 0px;
}*/

    /*.formulaire-connexion {
    padding-top: 39%;

}*/

    /*.container-formulaire-connexion input {
    width: 100%;
}*/

    /*.container-formulaire-connexion {
    background-color: #fffad6;
}*/

    /*.menu-profil-mobile p{
    font-size: 10px;
}*/

    /*.container-btn-profil-monprofil-mobile,
.container-btn-mesannonces-profil-mobile,
.container-btn-mesoffres-profil-mobile,
.container-btn-mesrdv-profil-mobile,
.container-btn-historique-profil-mobile
.container-button-deconnexion-mobile {
    width: 57px;
    color: #fffad6;
}*/

    /* .annonce {
        height: 300px;
        width: 330px;
    } */

    /* .container-vehicule-annonce-resumer {
        height: 80px;
        width: 100%;
    } */

    /* #container-droite-annonce-resumer {
        width: 100%;
    } */

    /* .titre-petite-annonce {
        text-align: center;
        margin-left: 0;
        margin-top: 0;
    } */

    /* .icone-pos {
        margin-left: 10px;
        margin-right: 0;
    } */

    #container-moto-repa {
        margin-top: 20px;
    }

    .text-qmsm {
        font-size: 13px !important;
        width: 350px;
    }

    /*.container-info-perso p {
    font-size: 17px;
}*/

   /*  .btn-voir-plus {
        margin-left: auto;
        margin-right: 29%;
    }
 */
    .container-question {
        width: 89%;
    }

    .container-faq {
        padding-top: 90px;
    }

    /*#menu2 {
    display: none;
    position: fixed;
    top: 0;
    background-color: #fffad6;
    width: 100%;
    height: 100%;
    border: 2px solid orange;
    z-index: 1;
}*/

    /*#text-pre-annonce h1 {
    font-size: 30px;
}

#text-pre-annonce p {
    width: 300px;
}*/

    /* .container-vehicule {
        width: 100%;
    } */

    /*.titre-recrutement {
    font-size: 20px;
}*/

    /*.container-recrutement p {
    font-size: 14px;
}

.container-recrutement {
    width: 90%;
}

.container-recrutement img {
    width: 350px;
}*/

    /* #container-vehicule-recap-annonce h3 {
        font-size: 18px;
    } */

    .container-immat-annonce-recap {
        padding-top: 20px;
    }

    .container-km-annonce-recap {
        padding-top: 20px;
    }

    .btn-modif-monprofil {
        font-size: 13px;
        margin-left: 0;
        padding-right: 0%;
        width: 30%;
        padding: 0;
    }

    .btn-modif-paiement {
        font-size: 13px;
        margin-left: 0;
        padding-right: 0%;
        width: 30%;
        padding: 0;
    }

    .btn-modif-document {
        font-size: 13px;
        margin-left: 0;
        padding-right: 0%;
        width: 30%;
        padding: 0;
    }

    /*.container-form-info h1 {
    font-size: 30px;
}*/

    #form-document h1 {
        font-size: 30px;
    }

    #container-form-rib h1 {
        font-size: 30px;
    }

    #container-form-rib h2 {
        text-align: center;
        color: white;
        font-size: 15px;
    }

    .container-logo-mobile {
        margin-left: 0px;
    }

    #container-barre-recherche {
        padding-top: 55px;
    }

    /*.container-nous h1 {
    font-size: 27px;
    padding-top: 110px;
}

.container-texte-nous {
    width: 90%;
}*/

    .container-titre-mangopay {
        margin-top: 130px;
    }

    .container-titre-mangopay {
        margin-top: 100px;
    }

    .container-titre-mangopay h1 {
        font-size: 17px;
    }

    .container-titre-mangopay h2 {
        font-size: 15px;
    }

    /*.container-mentions h1 {
    font-size: 28px;
}

.container-mentions {
    width: 80%;
    padding-top: 130px;
}*/

    /*.container-mentions p {
    font-size: 14px;
}*/

    #header-mobile-categorie {
        display: block;
    }

    .header-categorie {
        display: none;
    }

    /*#text-pre-annonce {
    display: none;
}*/

    /* .container-vehicule {
        margin-top: 20px;
    } */

    /*#etape-1-annonce h2 {
    margin-bottom: 60px;
}*/

    /*.btn-reparation-liste {
    height: 70px;
    width: 163px;
}*/

    /* .container-descrip-cat label {
        font-size: 17px;
    } */

    /* .container-disponibilite h1 {
        font-size: 17px;
    }

    .container-semaine {
        width: 300px;
    } */

    /* .container-heure {
        width: 298px;
    } */

   /*  .btn-validation-form-annonce {
        display: none;
    } */


    /* .liste-reparation-freinage,
.liste-reparation-direction,
.liste-reparation-entretien,
.liste-reparation-carrosserie,
.liste-reparation-peinture,
.liste-reparation-diagno-chauffage,
.liste-reparation-diagno-moteur,
.liste-reparation-diagno-freinage,
.liste-reparation-diagno-divers,
.liste-reparation-moteur,
.liste-reparation-clim,
.liste-reparation-echapement,
.liste-reparation-divers,
.liste-reparation-pneu,
.liste-reparation-embrayage,
.liste-reparation-diagno-demarrage,
.liste-reparation-diagno-suspension,
.liste-reparation-diagno-echapement,
.liste-reparation-chauffe-eau,
.liste-reparation-circuit-gaz,
.liste-reparation-circuit-eau,
.liste-reparation-chaine-moto,
.liste-reparation-batterie-moto,
.liste-reparation-echapement-moto,
.liste-reparation-pneu-moto,
.liste-reparation-freinage-moto,
.liste-reparation-moteur-moto,
.liste-reparation-suspension-moto,
.liste-reparation-revision-moto,
.liste-reparation-diagno-batterie-moto,
.liste-reparation-diagno-freinage-moto,
.liste-reparation-diagno-electronique-moto,
.liste-reparation-divers-moto
{
    margin-bottom: 55px;
} */

    /* #container-form-description-voiture,
    #container-form-description-moto,
    #container-form-description-vehicule-pro,
    #container-form-description-camping-car {
        padding: 150px 30px 30px 30px !important;
    } */

    /* .container-description-annonce-recap {
        width: 380px;
        margin-left: 20px;
        padding-top: 20px;
        font-size: 18px;
        font-weight: 500;
        color: #ffbc40;
    } */

    /* .container-description-annonce-recap h2 {
        font-size: 22px;
    } */

    /* .container-description-annonce-recap p {
        font-size: 18px;
    } */

    /* .container-description-annonce-recap span {
        font-size: 18px;
    }
 */
   /*  .container-piece-annonce-recap {
        margin-left: 20px;
        padding-top: 20px;
        font-size: 18px;
        font-weight: 500;
        color: #ffbc40;
    }
 */
    /* .container-piece-annonce-recap h2 {
        font-size: 22px;
    } */

    /* .container-piece-annonce-recap span {
        font-size: 18px;
    } */

    /* .container-piece-annonce-recap p {
        font-size: 18px;
    } */


    #container-recap-text-dispo-annonce {
        display: block;
    }

    /* .container-recap-dispo h2 {
        font-size: 28px;
        color: #ffbc40;
        text-align: center;
        padding-top: 50px;
    } */

    /* .container-dispo-heure-recap {
        margin-bottom: 100px;
    } */

    .i-bateau {
        width: 43px;
    }

    /* .container-mecano-fin-annonce {
        width: 55%;
        margin-top: 55px;
    }

    .container-text-fin-annonce {
        margin-top: 2%;
        width: 80%;
    }

    .container-text-fin-annonce p {
        font-size: 13px;
    }

    .container-text-fin-annonce span {
        font-size: 13px;
    }

    .logo-fin-annonce {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        display: block;
        width: 300px;
        height: 50px;
        margin-top: 25px;
    } */

    /*#container-qmsm h1 {
    font-size: 15px;
}*/

    .membre-profil {
        font-size: 15px;
        margin-top: 0;
    }

    .ville-profil {
        font-size: 15px;
    }

    /*.aucune-description-profil {
    font-size: 15px;
}*/

    /*#container-qmsm {
    margin-top: 30px;
}*/


}

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

    /*.icone-burger {
    margin-left: 20px;
}*/

    .header {
        height: 55px;
    }

    /*.logo {
    width: 190px;
    height: 30px;
}*/

    .btn-ligne-insc {
        border-bottom: 2px solid white;
        padding-bottom: 8%;
    }

    .popup-inscription {
        margin-top: 0%;
        margin-left: 0%;
        height: 100%;
        width: 100%;
        z-index: 10;
        border: 2px solid orange;
        border-radius: 0px;
    }

    /*.container-formulaire-inscription-particulier-js p {
    margin-bottom: 15%!important;
    margin-top: 13%;
}*/

    /*.msg-creer-compte {
    color: red!important;
    font-size: 20px!important;
    margin-bottom: -9%!important;
    display: none;
    font-weight: bold;
    margin-top: 8%;
}*/

    /*.btn-inscription-particulier {
    margin-top: 6%;
    background-color: #ffa500!important;
    font-size: 19px!important;
    font-weight: bold!important;
}*/

    .erreur {
        margin-top: 4% !important;
    }

    .button-publication-js {
        top: 87%;
        left: 15%;
        padding: 17px 16px !important;
        font-size: 17px !important;
        width: auto;
        height: auto;
        max-width: none;
        display: none;
    }

    .button-repondre-annonce-js {
        top: 87%;
        left: 15%;
        padding: 17px 16px !important;
        font-size: 17px !important;
        width: auto;
        height: auto;
        max-width: none;
        display: none;
    }

    .container-bonhomme-mobile img {
        width: 230px;
    }

    .container-img-temps {
        padding-top: 21%;
    }


    /* #form-voiture,
#form-moto,
#form-vehicule-pro,
#form-camping-car{
    width: 50%;
    height: 160px;
    padding: 15px;
} */



    /*.container-voiture,
.container-moto,
.container-vehicule-pro,
.container-camping-car{
    width: 140px;
    border-radius: 14px;
    margin-left: auto;
}*/

    .icone-vehicule-categorie {
        font-size: 57px;
    }

    /*.container-voiture:hover .text-voiture,
.container-moto:hover .text-moto,
.container-bateau:hover .text-bateau,
.container-vehicule-agricole:hover .text-vehicule-agricole{
    font-size: 18px;
}*/

    /*-----------------------------------------------*/

    .text-dispo-form-js {
        font-size: 18px;
        margin-top: 22%;
    }

    .text-recap-form-js {
        font-size: 18px;
        margin-top: 27%;
    }

    .text-categorie {
        margin-top: 28%;
        font-size: 20px;
    }

    /* .container-vehicule {
        width: 340px;
        margin-top: 0;
    } */

    .btn-precedent-calandar {
        border-radius: 6px;
        position: absolute;
        top: 19%;
        left: 3%;
        margin-left: 0;
    }

    .container-tout-prix-bouton {
        margin-bottom: 15%;
    }

    .container-recap-text-annonce {
        width: 90%;
        margin-left: 5%;
        order: 1;
    }

    .container-recap-text-annonce h4 {
        font-size: 20px;
    }

    .titre-recap-text-annonce {
        font-size: 20px;
        margin-top: 0%;
    }

    .marque-recap-annonce {
        margin-left: 2%;
        font-size: 15px;
    }

    .container-recap-text-annonce span {
        font-size: 15px;
    }

    .description-recap-annonce {
        clear: both;
        margin-top: 2%;
        font-size: 15px;
        margin-right: 5%;
        margin-left: 5%;
    }


    .container-voiture-recap-annonce {
        margin-top: 2%;
        height: 40px;
        width: 50px;
        border-radius: 7px;

    }

    .icone-vehicule-recap {
        font-size: 35px;
    }

    .container-prix-annonce-complete {
        border-radius: 8px;
        margin-top: 5%;
        width: 80px;
    }

    .p-ville-annonce-complete {
        font-size: 15px;
        margin-top: 3%;
        margin-bottom: 1% !important;
    }

    /* .icone-pos {
        font-size: 18px;
    } */

    /* .container-recap-panne {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
        order: 2;
        margin-top: 5%;
    } */

    /* .container-recap-panne h4 {
        font-size: 27px;

    } */

   /*  #form-recap-panne p {
        font-size: 18px;
    } */

    /* .container-recap-dispo {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
        margin-left: 5%;
        order: 3;
        margin-top: 5%;
    } */

    .container-recap-dispo h4 {
        font-size: 18px;
    }

    .recap-panne-journee {
        font-size: 15px;
    }

    .recap-panne-horaire {
        font-size: 15px;
    }

    /* .btn-confirmation-recap {
        margin-top: 4%;
        font-size: 18px;
        border-radius: 7px;
        order: 4;
        width: 115px;
        margin-bottom: 20%;
    } */

    .calendrier-categorie {
        width: 124% !important;

    }

    .titre-pk {
        display: none;
    }

    .titre-pk-mobile {
        margin-top: 35px;
        font-size: 17px;
        text-align: center;
        text-transform: uppercase;
        font-family: "Open Sans Condensed", sans-serif;
        font-weight: 700;
        color: #404041;
    }

    .titre-pk-mobile span {
        color: orange;
    }

    .container-texte-temps {
        padding-left: 24px;
        padding-right: 24px;
        padding-top: 30px;
    }

    .titre-temps {
        text-align: center !important;
        width: auto;
        font-size: 19px;
    }

    .texte-temps {
        width: auto;
        font-size: 14px;
        text-align: center !important;
        border-bottom: 2px solid orange;
        padding-bottom: 20px;
    }

    .img-temps {
        width: 145px;
        height: 130px;
    }

    .container-tel {
        margin-top: 30px;
    }

    .container-img-tel {
        display: none;
    }

    .container-texte-tel {
        width: auto;
        padding-top: 0;
        padding-left: 24px;
        padding-right: 24px;
    }

    .titre-tel {
        text-align: center !important;
        width: auto;
        font-size: 19px;
    }

    .texte-tel {
        width: auto;
        font-size: 14px;
        text-align: center !important;
        border-bottom: 2px solid orange;
        padding-bottom: 20px;
    }

    .container-img-argent {
        display: none;
    }

    .container-texte-argent {
        width: auto;
        padding-top: 0;
        padding-left: 24px;
        padding-right: 24px;
    }

    .titre-argent {
        text-align: center !important;
        width: auto;
        font-size: 19px;
    }

    .texte-argent {
        width: auto;
        font-size: 14px;
        text-align: center !important;
        padding-bottom: 30px;
    }

    .img-argent {
        width: 145px;
        height: 130px;
    }

    .container-calendrier-js {
        margin-top: 17%;
    }

    .container-avis-index {
        display: none;
    }

    .container-annonce-index {
        margin-top: 0;
    }

    .avis-index {
        margin-bottom: 5%;
    }

    .avis-index img {
        border-bottom-left-radius: 19px;
        border-top-left-radius: 16px;
    }

    .avis-etoile-avis-index p {
        position: absolute;
        top: 45%;
        left: 20px;
        font-size: 12px;
    }

    .avis-avatar-prenom-index p {
        font-size: 12px;
        padding-top: 3%;
    }

    .container-ville h1 {
        font-size: 17px;
    }

    .container-liste-ville ul {
        width: 55%;
    }

    .container-liste-ville li {
        font-size: 13px;
    }

    .calendrier-categorie {
        width: 109% !important;
        margin-left: 2%;
        border-radius: 20px;
        border: 5px solid orange !important;
        margin-top: 2%;
        display: block;
        overflow: hidden;
    }

    .btn-precedent-form {
        display: none;
        position: absolute;
        top: 20%;
        left: 4%;
        margin-left: 0;
        border-radius: 6px;
    }

    .btn-confirmer-calendrier {
        font-size: 19px;
        margin-bottom: 30%;
    }

    .container-text-newsletter {
        width: 46%;
    }

    /* .container-vehicule-js {
        top: 16%;
        left: 38%;
    } */

    .icone-vehicule-categorie-js {
        font-size: 30px !important;
    }

    .container-profil-info-public {
        height: 440px;
        width: 260px;
        margin-top: 10%;
    }

    .container-barre-recherche {
        width: 320px;
        height: 175px;
        padding-top: 2%;
    }

    /*.btn-recherche {
    left: 28%;
}*/

    /*.container-recrutement h1 {
    margin-top: 23%;
}*/

    @keyframes checked-anim {
        50% {
            width: 100%;
            height: 3000px;
        }

        100% {
            width: 100%;
            height: 100%;
            border-radius: 0;
        }
    }

    @keyframes not-checked-anim {
        0% {
            width: 50%;
            height: 3000px;
        }
    }

    /*.li-menu, .a-menu {
    font-size: 20px!important;
}*/

    /*.rating-profil-complete label:before {
        font-size: 16px !important;
    }*/

    .container-annonce-dispo h2 {
        font-size: 20px;
    }

    .container-annonce-dispo p {
        font-size: 15px;
    }

    .container-btn-indic-offre {
        margin-top: 5%;
    }

    .container-prix-btn-offre {
        width: 150px;
        height: 90px;
    }

    .comment2 {
        font-size: 17px;
        margin-top: 9%;
        margin-bottom: 6% !important;
    }

    .container-offre-mecano {
        margin-top: 13%;
        position: relative;
    }


    .trait-gris {
        top: -2%;
        margin-left: 0%;
    }

    .service {
        width: 100% !important;
        margin-top: 3%;
        margin-bottom: 3%;
    }

    .titre-service {
        font-size: 25px;
        margin-bottom: 2%;
    }

    .categorie-footer {
        width: 100% !important;
        margin-top: 3%;
    }

    .titre-categorie-footer {
        font-size: 25px;
        margin-bottom: 2%;
    }

    .a-propos {
        width: 100% !important;
        margin-top: 3%;
        margin-bottom: 3%;
    }

    .titre-a-propos {
        font-size: 25px;
        margin-bottom: 2%;
    }

    .contact {
        width: 100% !important;
        margin-top: 3%;
    }

    .titre-contact {
        font-size: 25px;
        margin-bottom: 2%;
    }

    .logo-footer {
        width: 215px;
        margin-top: 5%;
    }

    /*.rating-profil label:before {
    font-size: 25px;
}*/

    .card .additional {
        width: 100px;
    }

    .card {
        height: 200px;
    }

    .card .additional .more-info {
        width: 65%;
        left: 122px;
    }

    .card .additional .coords {
        margin: 0px -1px;
    }

    .card .additional .user-card {
        width: 100px;
    }

    .card h1 {
        font-size: 20px;
        margin-top: 10px;
    }

    /*.hover-mobile-h1{
    margin-left: 0!important;
}*/

    .card .additional .user-card .level {
        font-size: 7px;
    }

    .card .general {
        width: 254px;
    }

    .card .additional .coords-top {
        margin-top: 20px;
    }

    .text-card {
        font-size: 14px;
    }

    .card .additional .stats {
        bottom: 5px;
    }

    .card .additional .stats div.title {
        font-size: 10px;
    }

    .stats svg {
        width: 23px !important;
    }

    .card .additional .stats div.value {
        font-size: 20px;
    }

    .card .additional .stats div.value.infinity {
        font-size: 20px;
    }

    .card .additional .stats {
        font-size: 22px;

    }

    /*#etape-1-annonce h2,
#etape-1-annonce p{
    display: none;
}*/

    /*#etape-2-annonce{
    display: none;
    padding: 0;
    margin-bottom: 40px;
    padding-top: 150px;
    padding-bottom: 20px;
}

#etape-2-annonce h2{
    display: none;
}

#etape-2-annonce h3 {
    text-align: left;
    font-size: 20px;
    margin-left: 10px;
}

#etape-2-annonce p {
    text-align: left;
    font-size: 15px;
    margin-left: 10px;
}*/

    /*.liste-reparation {
    width: 100%;
    order: 2;
    padding-bottom: 50px;
}*/

    /* #etape-3-annonce {
        display: none;
        height: 100vh;
        padding: 0;
    }
 */
    /*.titre-et-boite-panne {
   width: 300px;
}*/
    /*
.container-reparation-client {
    min-height: 170px;
}*/


    /* #panne-voiture,
    #panne-moto,
    #panne-vehicule-pro,
    #panne-camping-car {
        margin-top: 0;
    }
 */
    .container-btn-cont-mobile {
        position: fixed;
        display: flex;
        justify-content: center;
        align-items: center;
        bottom: 0;
        width: 100%;
        height: 40px;
        background-color: white;
        box-shadow: 0px 0px 5px #555;
        z-index: 1;
    }

    /*.container-reparation-client img {
    top: -31px;
    left: 105px;
    width: 77px;
}*/

    /*.btn-reparation {
    height: 60px;
    margin-left: 2%;
    margin-top: 2%;
    width: 40%;
    font-size: 11px;
    border-radius: 9px;
}*/

    /* #formPanne48 {
    height: 60px;
    margin-left: 2%;
    margin-top: 2%;
    width: 40%;
    border-radius: 9px;
} */

    /*.btn-reparation-devis {
    font-size: 11px;
}*/

    /*.btn-reparation-liste {
    height: 70px;
    width: 138px;
    font-size: 11px;
}*/

    /* .btn-checkbox-lundi,
    .btn-checkbox-mardi,
    .btn-checkbox-mercredi,
    .btn-checkbox-jeudi,
    .btn-checkbox-vendredi,
    .btn-checkbox-samedi,
    .btn-checkbox-dimanche {
        width: 50px;
        height: 50px;
        padding: 37px 37px;

    } */

    /*.btn-checkbox-matin,
    .btn-checkbox-midi,
    .btn-checkbox-aprem,
    .btn-checkbox-soir {
        width: 130px;

    }*/

    /*#container-total-repa {
    margin-top: 20px;
}

#container-total-repa h2 {
    font-size: 19px;
    width: 285px;
}*/

    #container-repa-categorie {
        margin-top: 45px;
    }

    .text-qmsm {
        width: 300px;
    }

    .titre-mes-annonces {
        font-size: 30px;
        margin-top: 30px;
        margin-bottom: 30px !important;

    }

    .icone-vehicule {
        font-size: 55px;
    }

    /* .titre-petite-annonce {
        font-size: 25px;
    }
 */
    /* .date-publi-resumer {
        margin-left: 30px;
        float: left;
    } */

    /*.container-form-info h1 {
    font-size: 27px;
}*/

    #form-document h1 {
        font-size: 27px;
    }

    #container-form-rib h1 {
        font-size: 27px;
    }

    /*.container-nous h1 {
    padding-top: 85px;
}

.container-mentions {
    padding-top: 95px;
}*/

    /*#container-profil {
    padding-top: 55px;
}*/

    /*.btn-progress {
    padding: 6px 18px;
    z-index: 2;
}*/

    /*#etape-1-annonce h3 {
    margin-bottom: 20px;
    margin-top: 110px;
}*/

    /* .container-description-annonce-recap {
        width: 340px;
        margin-left: 20px;
    } */



}

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


    .slogan {
        width: 290px;
        font-size: 21px;
    }

    .container-icone-index {
        width: 100%;
        margin-top: 4%;
    }

    /*.container-voiture-index:nth-child(1) {
    border-radius: 10px;
    width: 60px;
    height: 60px;
}

.container-voiture-index:nth-child(2) {
    border-radius: 10px;
    width: 60px;
    height: 60px;
}

.container-voiture-index:nth-child(3) {
    border-radius: 10px;
    width: 60px;
    height: 60px;
}

.container-voiture-index:nth-child(4) {
    border-radius: 10px;
    width: 60px;
    height: 60px;
}*/

    .voiture-index {
        font-size: 35px;
    }

    .container-bonhomme-mobile img {
        width: 200px;
    }

    .titre-comment {
        font-size: 20px;
    }

    .titre-pk {
        font-size: 14px;
    }


    .container-avis-index h4 {
        font-size: 20px;
    }

    .avis-index {
        height: 75px;
        width: 230px;
        border-radius: 10px;
    }

    /* .rating2 {
        margin-left: 78px;
        margin-top: 22px;
    }

    .rating2 label:before {
        font-size: 20px;
    } */

    .avis-etoile-avis-index p {
        position: absolute;
        top: 45%;
        left: 20px;
        font-size: 14px;
    }

    .avis-avatar-prenom-index {
        width: 180px;
        height: 100%;
    }



    .avis-index img {
        height: 70%;
        width: 80%;
        border-radius: 9px;
        margin-top: 6%;
    }

    .avis-avatar-prenom-index p {
        font-size: 13px;
    }

    .container-annonce-index h4 {
        font-size: 20px;
    }

    .container-ville h1 {
        font-size: 19px;
    }

    .container-liste-ville ul {
        width: 70%;
    }

    .container-liste-ville li {
        font-size: 15px;
    }


    /* #form-voiture,
#form-moto,
#form-vehicule-pro,
#form-camping-car{
    width: 50%;
    height: 140px;
    padding: 15px;
}
 */


    /*.container-voiture,
.container-moto,
.container-vehicule-pro,
.container-camping-car{
    width: 120px;
    border-radius: 14px;
    margin-left: auto;
}*/

    .icone-vehicule-categorie {
        font-size: 53px;
    }

    /*.container-voiture:hover .text-voiture,
.container-moto:hover .text-moto,
.container-bateau:hover .text-bateau,
.container-vehicule-agricole:hover .text-vehicule-agricole{
    font-size: 16px;
}*/

    .text-categorie {
        margin-top: 30%;
        font-size: 18px;
    }

    .text-choisir-panne-js {
        font-size: 18px;
        margin-top: 12%;
    }

    /*.container-reparation-client {
    width: 270px;
}*/

    /*#form-toute-panne p {
    font-size: 13px;
}*/

    .text-remplir-form-js {
        font-size: 18px;
        margin-top: 36%;
    }

    .calendrier-categorie {
        width: 149% !important;
        margin-left: 2%;
        border-radius: 20px;
        border: 5px solid orange !important;
        margin-top: 2%;
        display: block;
        overflow: hidden;
    }
}