@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

* {
    font-family: "Poppins", sans-serif;
    text-decoration: none;
}

a:hover {
    text-decoration: none !important;
}

:root {
    --grey-light: #F2F2F2;
    --light: #FFF;

    --primary-color: #F3A200;
    --primary-color-boost: #FF9300;
    --primary-color-dark: #ff7700;
    --primary-color-lighter: #FFF1D6;

    --secondary-color: #7ACBFE;
    --secondary-color-dark: #1f98e2;
    --secondary-color-lighter: #EBF7FF;

    --third-color: #2d4656;
    --third-color-lighter: #718a9c;
    --third-color-transparent: #2d465643;

    --body: var(--grey-light);
    --title_section: var(--third-color);
    --title_htw_card: var(--third-color);
    --box-shadow: rgba(14, 63, 126, 0.04) 0px 0px 0px 1px, rgba(42, 51, 69, 0.04) 0px 1px 1px -0.5px, rgba(42, 51, 70, 0.04) 0px 3px 3px -1.5px, rgba(42, 51, 70, 0.04) 0px 6px 6px -3px, rgba(14, 63, 126, 0.04) 0px 12px 12px -6px, rgba(14, 63, 126, 0.04) 0px 24px 24px -12px;

    --border-radius: 8px;

    /*Gradients*/
    --gradient-primaryColor: linear-gradient(90deg, var(--primary-color-dark), var(--primary-color));
    --gradient-secondaryColor: linear-gradient(90deg, var(--secondary-color-dark), var(--secondary-color));

    --bigGradientPrimary: linear-gradient(120deg, var(--primary-color-dark) 0%, var(--primary-color) 80%, var(--primary-color-lighter) 100%);


}

body {
    background-color: var(--body) !important;
}

.svg_icon,
.svg_icon_recrutment {
    width: 50px;
    height: 50px;
    fill: var(--third-color-lighter);
    margin: 2% 0;
}

.svg_icon_recrutment {
    fill: var(--secondary-color);
}


/*Header header.php*/

.header {
    display: flex;
    justify-content: space-between;
    align-content: center;
    align-items: center;
    height: 50px !important;
    position: fixed;
    z-index: 10;
    width: 100%;
    background-color: var(--body);
    box-shadow: var(--box-shadow);
    font-size: small;
    padding: 0 2%;
    top: 0;

}

.header-section-container {
    display: flex;
    gap: 20px;
    align-content: center;
    align-items: center;
    justify-content: flex-end;
}



/* hamburger */
.container_hamburger {
    display: inline-block;
    cursor: pointer;
}

.bar1,
.bar2,
.bar3 {
    width: 30px;
    height: 2px;
    background-color: var(--third-color);
    margin: 6px 0;
    transition: 0.4s;
}

.change .bar1 {
    transform: translate(0, 8px) rotate(-45deg);
}

.change .bar2 {
    opacity: 0;
}

.change .bar3 {
    transform: translate(0, -8px) rotate(45deg);
}


/* logo*/
.container-logo-index .logo {
    height: 25px;
    width: auto;
}

.button-rejoindre-header,
.button-annonce,
.button-publication,
.button-profils,
.button-deconnexion,
.button-connect,
#menu2 p,
#menu2 a,
.button_connect_mobile {
    text-transform: none;
    border: none;
    background-color: var(--body);
    display: flex;
    transition: 0.3s text-decoration ease, 0.3s color ease;
    cursor: pointer;
    color: var(--third-color);
}

.button-rejoindre-header,
#menu2 p {
    gap: 7px;
    color: var(--secondary-color);
    fill: var(--secondary-color);
    text-decoration: none;
}

.button-rejoindre-header:hover,
#menu2 p:hover {
    color: var(--secondary-color-dark);
}

.button-publication:hover,
.button-annonce:hover,
.button-profils:hover,
.button-connect:hover,
#menu2 a:hover {
    color: var(--primary-color);
}


#menu2 {
    display: none;
    position: fixed;
    top: 50px;
    background-color: var(--body);
    right: 0;
    z-index: 1;
    border-radius: 0 0 8px 8px;
    padding: 2% 5%;
    text-decoration: none;
    list-style-type: none;
    box-shadow: var(--box-shadow);

}

.li-menu {
    padding: 10px 0;

}

.button-notif {
    border: none;
    color: var(--third-color);
    display: flex;
    cursor: pointer;
}


.icone-user-co {
    display: relative;
    font-size: 25px;
    color: red;
    margin-left: auto;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    cursor: pointer;

}

.a-menu-reduction {
    display: none;
}

@media screen and (max-width: 800px) {
    .a-menu-reduction {
        display: block;
    }


    .button-annonce,
    .button-profils,
    .button-deconnexion,
    .button-rejoindre-header,
    .button-publication,
    .button-connect {
        display: none;
    }

    .header-section-container {
        display: flex;
        justify-content: flex-end;
    }


}

/*fetch.php notification header*/
#res {
    margin-bottom: 0;
}

.container-notif {
    display: none;

}

.container-notif-js {
    display: block;
    position: fixed;
    top: 55px;
    right: 50px;
    background-color: var(--light);
    height: 40dvh;
    width: 40%;
    border-radius: var(--border-radius);
    overflow-y: auto;
    box-shadow: var(--box-shadow);
}

@media screen and (max-width: 800px) {
    .container-notif-js {
        width: 70%;

    }
}

#titre-notif {
    background-color: var(--third-color);
    text-align: center;
    position: fixed;
    border-bottom-right-radius: 8px;
    border-top-left-radius: 8px;
    color: var(--primary-color);
    padding: 0 40px;
    min-height: 40px;
    align-content: center;
}

.container-offre-notif {
    display: flex;
    flex-direction: row;
    margin: 0 auto;
    align-items: center;
    width: 90%;
    border-bottom: 1px solid var(--third-color-transparent);
    cursor: pointer;
    padding: 10px;
}

.container-offre-notif:first-child {
    margin-top: 50px;
}

.container-offre-notif:last-child {
    border-bottom: none;
}

.container-avatar-name-and-description {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    text-align: left;
    gap: 10px;
}


.avatar-offre-notif {
    width: 35px;
    border-radius: 50%;
    clear: both;
    box-shadow: var(--box-shadow);
    height: 35px;
}

.container-name-and-description {
    display: flex;
    flex-direction: column;
}

.container-prenom-nom-text-notif {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.container-prenom-nom-notif {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 5px;
    font-size: small;
}

.prenom-notif,
.nom-notif {
    color: orange;
}

.date-notif,
.text-offre-notif {
    color: var(--third-color-lighter);
    font-size: smaller;

}

.date-notif {
    text-align: end;
}

/*home*/

.container-voiture-index {
    cursor: pointer;
}

.home_container {
    position: relative;
    z-index: 0;
    padding: 1%;
    border-radius: var(--border-radius);
    overflow: hidden;


}

.mention_container {
    position: relative;
    z-index: 0;
    padding: 1%;
    border-radius: var(--border-radius);
    overflow: hidden;
    background-image: url('../../images/mechanic_car.png');
    background-size: cover;
    background-attachment: fixed;
    background-position: top;
    background-repeat: no-repeat;
    height: 40dvh;
}

.mention_container.divossito {
    background-image: url('../../images/mechanic_motorcycle.png');
}

.mention_container.condition_mongopay {
    background-image: url('../../images/mecanic_truck.png');
}

.home_image,
.mention_image,
.mention_image_annonce-completes {
    width: 100%;
    height: 90vh;
    object-fit: cover;
    border-radius: var(--border-radius);
    transition: opacity 1s ease-in-out;
}



.home_section_menu .svg-stroke,
.container-voiture-index .svg-stroke,
.container-voiture .svg-stroke,
.container-vehicule-pro .svg-stroke,
.container-camping-car .svg-stroke {
    transition: stroke 0.3s ease;
    stroke: var(--third-color-lighter);
}

.home_section_menu .svg-fill,
.container-moto .svg-fill {
    transition: fill 0.3s ease;
    fill: var(--third-color-lighter);
}


.home_text_overlay {
    position: absolute;
    bottom: 150px;
    right: 5%;
    text-align: right;
    width: 55%;
    color: var(--light);
    padding: 10px;
    z-index: 1;
    font-size: 6vmin;
    font-weight: 800;
    line-height: 1.1;
    text-shadow: var(--third-color-transparent) 1px 0 10px;
}


.home_text_overlay span {
    background-image: var(--gradient-primaryColor);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
}


.home_section_menu {
    margin: 5%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    width: auto;
    margin-top: -50px;
    position: relative;
    z-index: 2;
    justify-content: center;
    gap: 15px;
}

.home_section_menu div {
    display: flex;
    flex-direction: column;
    background-color: var(--light);
    min-height: 110px;
    width: 160px;
    justify-content: center;
    align-items: center;
    border-radius: var(--border-radius);
    color: var(--third-color);
    transition: transform 1s ease, box-shadow 0.3s ease;
    text-align: center;
}

.home_section_menu div:hover {
    transform: scale(0.988);
    box-shadow: var(--box-shadow);
}

.home_section_menu div:nth-child(5),
.home_section_menu div:nth-child(6) {
    width: 200px;
    color: var(--grey-light) !important;
    font-weight: 600;
    transform: scale(0.988);
    scale: 1;
    transition: background-color 3s ease, transform 1s ease;

}

.home_section_menu div:hover .svg-stroke,
.container-voiture-clique,
.container-vehicule-pro-clique .svg-stroke,
.container-camping-car-clique .svg-stroke {
    stroke: var(--primary-color);
}

.home_section_menu div:hover .svg-fill,
.container-moto-clique {
    fill: var(--primary-color);
}

.home_section_menu div:nth-child(5) {
    background-color: var(--primary-color);
}

.home_section_menu div:nth-child(6) {
    background-color: var(--secondary-color);
}

.home_section_menu div:nth-child(5):hover {
    background-color: var(--primary-color-dark);
}

.home_section_menu div:nth-child(6):hover {
    background-color: var(--secondary-color-dark);
}


@media screen and (max-width: 699px) {

    .home_section_menu div:nth-child(5),
    .home_section_menu div:nth-child(6) {
        width: 180px;
    }

    .home_section_menu {
        margin-top: 5%;

    }

    .home_image {
        height: 80dvh;
    }

    .home_text_overlay {
        bottom: 50px;
        width: 80%;
    }
}

@media screen and (max-width: 661px) {

    .home_section_menu div:nth-child(5),
    .home_section_menu div:nth-child(6),
    .home_section_menu div {
        width: 120px;
        font-size: 0.8rem;
    }

    .home_section_menu div svg {
        width: 30px;
        height: 30px;
    }
}

@media screen and (max-width: 500px) {
    .home_image {
        height: 60dvh;
    }

    .home_text_overlay {
        bottom: 50px;
        width: 80%;
    }
}


/*howitwork*/
.inscription-mecanic_container,
.htw_container,
.about_container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 5%;

}

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

@media screen and (max-width: 750px) {

    .section_big_title,
    .container-titre-annonce-recap p {
        font-size: 2.4rem;
    }
}

@media screen and (max-width: 500px) {

    .section_big_title,
    .container-titre-annonce-recap p {
        font-size: 1.9rem;
    }
}

.inscription-mecanic_section_title,
.htw_section_title,
.about_section_title,
.team_section_title,
.mention_section_title,
.conditions_section_title,
.recup_section_title,
.after_refound_section_title,
.cancel_appointment_section_title,
.after_soon_section_title,
.end_publish_section_title,
.end_inscription_section_title {
    color: var(--title_section);
}


.inscription-mecanic_section_text,
.recup_section_text,
.after_refound_section_text,
.cancel_appointment_section_text,
.after_soon_section_text,
.end_publish_section_text,
.end_inscription_section_text,
.htw_section_text,
.about_section_text,
.team_section_text,
.mention_section_text,
.conditions_section_text,
.category_step_big_title {
    width: 70%;
    color: var(--third-color-lighter);
}

.after_soon_section_text,
.end_publish_section_text,
.end_inscription_section_text {
    margin: 20px auto;

}

.end_publish_section_text{
    width: 100%;
}

.category_step_big_title {
    color: var(--third-color);
}

.inscription-mecanic_card,
.htw_card,
.about_card,
.team_card {
    transition: transform 1s ease, box-shadow 0.3s ease;
    background-color: var(--light);
    padding: 1% 1% 2% 2%;
    border-radius: var(--border-radius);
    box-shadow: none;
    margin: 1%;
    cursor: default;
    width: 400px;
}

@media screen and (max-width: 400px) {
    .htw_card {
        padding: 5%;
    }
}

.inscription-mecanic_card:nth-child(3) {
    background-color: var(--secondary-color);
    color: var(--secondary-color-lighter);
}



.inscription-mecanic_card:hover,
.htw_card:hover,
.about_card:hover,
.team_card:hover {
    transform: scale(0.988);
    box-shadow: var(--box-shadow);
}



.inscription-mecanic_card h2,
.htw_card h2,
.about_card h2 {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--title_htw_card);
    line-height: 1;
    padding: 20px 0;
    transition: color 1s ease;
}

.htw_card:hover h2 {
    color: var(--primary-color);
}

.inscription-mecanic_card:hover h2 {
    color: var(--secondary-color);
}

.inscription-mecanic_card_a,
.htw_card_a,
.about_card_a,
.team_card_a,
.whyus_card_a {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    background-color: var(--primary-color-lighter);
    border-radius: 25px;
    border: 3px solid transparent;
    transition: border 0.2s ease;
    font-size: small;
}

.inscription-mecanic_card_a {
    background-color: var(--secondary-color-lighter);
}


.little_icon_container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    text-transform: capitalize;
}

.little_icon_inscription-mecanic_card,
.little_icon_htw_card,
.little_icon_about_card,
.little_icon_team_card,
.little_icon_whyus_card {
    padding: 0 25px;
    border-radius: 25px;
    font-weight: 600;
    color: var(--primary-color);
}



.little_icon_inscription-mecanic_card {
    color: var(--secondary-color);

}

.little_icon_inscription-mecanic_card_rond,
.little_icon_htw_card_rond,
.little_icon_about_card_rond,
.little_icon_whyus_card_rond {
    width: 35px;
    border-radius: 50%;
    text-align: center;
    font-weight: 600;
    color: var(--primary-color);
    line-height: 25px;
}


.little_icon_whyus_card {
    color: var(--primary-color);
}

.inscription-mecanic_card_title,
.htw_card_title,
.about_card_title,
.team_card_title {
    font-size: 1.2rem;
    font-weight: 600;
    padding: 10px 0;
    letter-spacing: -1px;
}



.inscription-mecanic_card_description,
.htw_card_description,
.about_card_description,
.team_card_description {
    color: var(--third-color-lighter);
    transition: color 1s ease;
}

.inscription-mecanic_card:hover .inscription-mecanic_card_description,
.htw_card:hover .htw_card_description,
.about:hover .about {
    color: var(--third-color);
}

.inscription-mecanic_card:nth-child(3) .inscription-mecanic_card_title,
.inscription-mecanic_card:nth-child(3) .inscription-mecanic_card_description {
    background-color: var(--secondary-color);
    color: var(--secondary-color-lighter);
}

.inscription-mecanic-button {
    display: flex;
    align-items: center;
}


.section_title_whyus_card {
    color: var(--grey-light);
    margin-bottom: 5rem;
    margin: 10% 0 10% 3%;
}

/* Why us*/
.whyus_section {
    background: var(--bigGradientPrimary);
    padding: 5%;
    padding: 5%;
    margin: 1%;
    border-radius: 25px;

}

.whyus_maincontainer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap-reverse;
    justify-content: space-around;
    margin-bottom: 5%;

}

.whyus_container_left {
    width: 60%;

}

.whyus_container_right {
    width: 40%;
    margin: 0;
    padding: 0 2%;

}

.sticky {
    position: sticky;
    top: 25%;
}

.whyus_card {
    transition: transform 1s ease, box-shadow 0.3s ease, scale 1s ease;
    background-color: var(--light);
    padding: 1rem 1rem 2rem 2rem;
    border-radius: var(--border-radius);
    box-shadow: none;
    cursor: default;
    margin-bottom: 10%;
    padding: 5%;
    scale: 1;
}

.card_description_whyus {
    color: #718a9c;
    transition: color 0.4s ease;
}

.whyus_card:hover {
    box-shadow: var(--box-shadow);
    scale: 0.98;
}

.whyus_card:hover p {
    color: #2d4656;
}



.whyus_card:hover .card_title_whyus {
    color: var(--primary-color);
}

.card_title_whyus {
    letter-spacing: -1px;
    font-weight: 600;
    padding: 20px 0;
    color: var(--third-color);
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1;
    transition: color 1s ease;
}

.whyus_picture {
    height: 400px;
    width: 100%;
    object-fit: cover;
    border-radius: var(--border-radius);
    transition: transform 1s ease, box-shadow 0.3s ease;
}

.whyus_picture:hover {
    box-shadow: var(--box-shadow);
}

.whyus_little_icon_container:nth-child(2) {
    margin: 5% 0;
}

.whyus_container_right .whyus_little_icon_container .whyus_card_a {
    transition: transform 1s ease, background-color 0.3s ease, color 0.3s ease, border 0.3s ease;
}

.whyus_container_right .whyus_little_icon_container:hover .whyus_card_a {
    background-color: var(--primary-color-boost);
    text-decoration: none;
    box-shadow: var(--box-shadow);

}

.whyus_card:hover .little_icon_whyus_card {
    color: #FF9300;
}

.whyus_container_right .whyus_little_icon_container:hover .little_icon_whyus_card,
.whyus_container_right .whyus_little_icon_container:hover .little_icon_whyus_card_rond {
    color: var(--grey-light);
}



.whyus_little_icon_container:active .whyus_card_a {
    border: 3px solid var(--primary-color-lighter);
    color: var(--grey-light);
}


/*SVG*/
.whyus_little_icon_container .svg-fill {
    fill: var(--primary-color);
}

.whyus_little_icon_container:hover .svg-fill {
    fill: var(--grey-light);
}

.whyus_little_icon_container .svg-stroke {
    stroke: var(--primary-color);
}

.whyus_little_icon_container:hover .svg-stroke {
    stroke: var(--grey-light);
}



@media screen and (max-width: 800px) {
    .whyus_container_left {
        width: 100%;

    }

    .whyus_container_right {
        width: 100%;
        margin: 25px 0 50px 0;
    }
}

/* City */

.city-container {
    text-align: left;
    padding: 5%;
}

.city_section_title {
    width: 70%;
    color: var(--third-color);
    margin: 5% 0% 10% 5%;
}

.city_section_title span,
.section_big_title span {
    background-image: var(--gradient-primaryColor);
    background-image: var(--gradient-secondaryColor);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}


.city-list-container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    gap: 1%;
    margin: 5% 0%;
}

.city-list-column {
    flex: 1 1 auto;
    max-width: 280px;
}

.city-list {
    list-style: none;

    display: flex;
    flex-direction: column;
    gap: 10px;
}

.city-icon {
    margin: 2px 10px 0 10px;
}

.city-list li a {
    display: flex;
    opacity: 0.5;
    padding: 10px;
    background-color: var(--primary-color);
    text-decoration: none;
    border: 3px solid transparent;
    border-radius: 50px;
    background-color: var(--light);
    text-align: center;
    transition: opacity 1s ease;
    color: var(--third-color);
    font-size: smaller;
}

.city-list li a[href] {
    opacity: 1;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
    font-weight: 600;
    background-color: var(--primary-color-lighter);
    transition: transform 1s ease, scale 1s ease;
    scale: 1;

}

.city-list li:hover a[href] {
    background-color: var(--primary-color-lighter);
    scale: 0.98;
}


/* Footer */

.footer-section {
    background-color: var(--third-color);
    color: var(--grey-light);
}

.footer-section svg {
    transition: 0.3s ease scale;
    scale: 1;
    opacity: 1;
}

.footer-section svg:hover {
    scale: 0.98;
    opacity: 0.8;
}

.footer-section a {
    color: var(--third-color-lighter);
    text-decoration: none;
    font-size: small;
    transition: 0.3s color ease;
}

.footer-section a:hover {
    text-decoration: underline;
    color: var(--secondary-color);
}

.footer-title {
    color: var(--grey-light);
    font-size: 1.4rem;
}

.footer-logo {
    width: 100%;
    padding: 5% 10%;
}


.footer-section-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 5%;

}

.footer-section-col {
    flex: 1 1 20%;
    margin-bottom: 20px;
    text-align: center;
}

.footer-section-col ul {
    list-style-type: none;
    padding: 0;
}

.footer-section-col-reseau {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.reseau_svg {
    display: flex;
    flex-direction: row;
    gap: 10px;
    margin-top: 10px;
    justify-content: center;
}

.titre-categorie-footer,
.titre-a-propos,
.titre-contact {
    margin-bottom: 10px;
}


.footer-copyright p {
    font-size: 0.9em;
    text-align: center;
    padding: 2% 0;
}

.footer-copyright {
    border-top: 2px solid var(--third-color-lighter);
    color: var(--third-color-lighter);

}

/* Responsive Design */

@media (max-width: 992px) {
    .footer-section-col {
        flex: 1 1 45%;
    }
}

@media (max-width: 576px) {
    .footer-section-col {
        flex: 1 1 100%;
    }
}

/* Pop up */

.popup-inscription-section,
.popup-connexion {
    height: 80%;
    width: 80%;
    z-index: 10;
    background-color: var(--body);
    border-radius: var(--border-radius);
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    padding: 1%;
    /*align-content: center;*/
}

.container-formulaire-inscription-particulier-js,
.formulaire-connexion {
    /*padding: 5%;*/
    padding: 15px 3% 1% 3%;
}

.container-icone-fermer {
    margin-top: 3%;
}

.icone-fermer-particulier,
.icone-fermer {
    color: var(--third-color);
    cursor: pointer;
    transition: opacity 0.3s ease;
    opacity: 1;
}

.icone-fermer-particulier:hover {
    opacity: 0.8;
}


.msg-creer-compte {
    display: none;
    font-size: 1rem;
    color: var(--primary-color);
    margin-bottom: 5%;
    font-weight: normal;
}

.erreur,
.erreur-connexion {
    font-size: 1rem;
    color: var(--primary-color);
    margin-bottom: 30px;
    font-weight: normal;

}

.titre-connexion {
    margin: 5% 0;
}

.form-condition,
.button-inscription-particulier-mobile,
.btn-mdp-oublie,

.btn-mdp-oublie-small-screen {
    color: var(--primary-color);
    transition: text-decoration 0.3s ease;
    cursor: pointer;
}

.form-condition:hover,
.button-inscription-particulier-mobile:hover,
.btn-mdp-oublie:hover,
.btn-mdp-oublie-small-screen:hover {
    color: var(--primary-color);
    text-decoration: underline;
}

.container-icone-fermer-particulier,
.container-icone-fermer,
.container-icone-fermer-particulier-erreur,
.container-icone-fermer-erreur {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1%;
}

.form_picture_header {
    width: 250px;
}

.msg-creer-compte-title,
.titre-connexion {
    color: var(--third-color);
    font-size: 1.4rem;
    font-weight: 800;
}

@media screen and (max-width: 450px) {

.titre-connexion{
    font-size: 1.2rem;
}

}

.container-btn-cgu,
.container-btn-validate {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.container-btn-cgu p {
    color: var(--third-color);
}

.container-btn-cgu {
    display: flex;
    gap: 4px;
}

.btn-inscription-particulier,
.btn-connexion,
.btn-validation,
.container-main-category_button,
.button-inscription,
.valider-cplt,
.btn-rib,
.valider-doc {
    background-color: var(--third-color);
    min-width: 40%;
    border-radius: var(--border-radius);
    color: var(--grey-light);
    text-align: center;
    margin: 15px auto;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition: transform 1s ease, scale 1s ease, box-shadow 2s ease, border 1s ease;
    font-size: small;
    border: 3px solid transparent;
    min-height: 40px;
    scale: 1;
    border: 2px solid transparent;
}

.container-btn-validate .btn-connexion,
.container-btn-validate .btn-inscription-particulier,
.btn-validation {
    color: var(--grey-light);
}

.button-inscription:hover,
.btn-validation:hover,
.btn-connexion:hover,
.btn-inscription-particulier,
.valider-cplt:hover,
.btn-inscription-particulier:hover,
.btn-connexion:hover .btn-connexion:hover,
.button-inscription:hover,
.valider-cplt:hover,
.btn-rib:hover,
.valider-doc:hover
 {
    border: 2px solid var(--third-color-lighter);
    scale: 0.98;
    box-shadow: var(--box-shadow);
}

.valider-cplt:hover,
.button-inscription:hover,
.btn-rib:hover,
.valider-doc:hover {
    border: 2px solid var(--secondary-color-dark);
}

.texte-pas-inscrit {
    text-align: center;
}

.form-connexion-input {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1%;
}

.form-connexion-input-password,
.form-connexion-input-mail {
    display: flex;
    gap: 10px;
    align-items: center;
    color: var(--third-color);
}

/* Recrutment */

/* Home recruitment */
.recrutement-container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    padding: 70px 0 0 0;

}

.recrutement-container-left {
    flex: 1 1 40%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5%;

}

.preambule {
    color: #718a9c;
}

.blue_text_span {
    color: var(--secondary-color);
    font-weight: bold;
}

.blue-linear_text_span {
    background-image: var(--gradient-secondaryColor);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: bold;

}

.recrutement-container-left img {
    width: 100%;
    height: 100%;
    border-radius: var(--border-radius);
    object-fit: cover;

}

.recrutement-container-right {
    flex: 1 1 60%;
    box-sizing: border-box;
    justify-content: flex-end;
    padding: 0;
    padding: 5%;

}

.recrutement-container-right img {
    width: 50%;
}

.recrutment-big-title {
    color: var(--third-color);
    font-size: 2.5rem;
}

.inscription-mecanic_section_title{
    font-size: 2.5rem;
}

@media screen and (max-width: 1100px) {
    .recrutment-big-title {
        font-size: 2rem;
    }

    .inscription-mecanic_section_title{
        font-size: 2rem;
    }
}

@media screen and (max-width: 850px) {
    .recrutment-big-title {
        font-size: 1.8rem;
    }

    .inscription-mecanic_section_title{
        font-size: 1.8rem;
    }
}

@media screen and (max-width: 450px) {
    .recrutment-big-title {
        font-size: 1.5rem;
    }

    .inscription-mecanic_section_title{
        font-size: 1.5rem;
    }
}

.recrutement-container-right button {
    border: none;
    margin-top: 20px;
    background-color: var(--secondary-color);
    border-radius: var(--border-radius);
    color: var(--grey-light);
    padding: 2% 5%;
    cursor: pointer;
    scale: 1;
    transition: background-color 0.3s ease, scale 0.3s ease;
}

.recrutement-container-right button:hover {
    scale: 0.98;
    background-color: var(--secondary-color-dark);
    box-shadow: var(--box-shadow);
}

/* Responsive adjustments */
@media (max-width: 768px) {

    .recrutement-container-left,
    .recrutement-container-right {
        flex: 1 1 100%;
        width: 100%;
    }

    .recrutement-container-left img {
        width: 100%;
    }
}

/* Accordion */

.accordion-menu {
    display: inline-block;
    position: relative;
    left: 50%;
    transform: translate(-50%, 0);
    width: 100%;
}

.accordion-menu h2 {
    line-height: 34px;
    font-weight: 500;
    letter-spacing: 1px;
    cursor: pointer;
    color: var(--third-color);
}

.accordion-menu p {
    color: var(--third-color-lighter);
    line-height: 26px;
    letter-spacing: 1px;
    position: relative;
    overflow: hidden;
    opacity: 1;
    transform: translate(0, 0);
    margin-top: 14px;
    z-index: 2;
}

.accordion-menu ul {
    list-style: none;
    perspective: 900;
    margin: 0;
}

.accordion-menu ul li {
    position: relative;
    margin: 15px;
    background-color: var(--light);
    border-radius: var(--border-radius);
    padding: 5%;
    transition: box-shadow 0.3s ease;
}

.accordion-menu ul li:hover {
    box-shadow: var(--box-shadow);
}

.accordion-menu ul li:nth-child(1) {
    border: none;
}

.accordion-menu ul li:nth-of-type(1) {
    animation-delay: 0.5s;
}

.accordion-menu ul li:nth-of-type(2) {
    animation-delay: 0.75s;
}

.accordion-menu ul li:nth-of-type(3) {
    animation-delay: 1.0s;
}


.accordion-menu ul li .arrow {
    position: absolute;
    margin-top: 16px;
    right: 40px;
}



.accordion-menu ul li .arrow:before,
.accordion-menu ul li .arrow:after {
    content: "";
    position: absolute;
    background-color: var(--secondary-color);
    width: 3px;
    height: 9px;
}

.accordion-menu ul li .arrow:before {
    transform: translate(-2px, 0) rotate(45deg);
}

.accordion-menu ul li .arrow:after {
    transform: translate(2px, 0) rotate(-45deg);
}

.accordion-menu ul li input[type=checkbox] {
    position: absolute;
    cursor: pointer;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0;
}

.accordion-menu ul li input[type=checkbox]:checked~p {
    margin-top: 0;
    max-height: 0;
    opacity: 0;
    transform: translate(0, 50%);
}

.accordion-menu ul li input[type=checkbox]:checked~.arrow:before,
.accordion-menu ul li input[type=checkbox]:checked~.arrow_FAQ:before {
    transform: translate(2px, 0) rotate(45deg);
}

.accordion-menu ul li input[type=checkbox]:checked~.arrow:after,
.accordion-menu ul li input[type=checkbox]:checked~.arrow_FAQ:after {
    transform: translate(-2px, 0) rotate(-45deg);
}

.accordion-menu .transition,
.accordion-menu p,
.accordion-menu ul li .arrow:before,
.accordion-menu ul li .arrow:after,
.accordion-menu ul li .arrow_FAQ:before,
.accordion-menu ul li .arrow_FAQ:after {
    transition: all 0.2s ease-in-out;
}

.accordion-menu .flipIn,
.accordion-menu h1,
.accordion-menu ul li {
    animation: flipdown 0.5s ease both;
}

.accordion-menu .no-select,
.accordion-menu h2 {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    user-select: none;
}

.accordion-menu ul li:hover h2 {
    transition: color 0.3s ease;
    color: var(--secondary-color);
}

.circle_accordion {
    border-radius: 25px;
    padding: 5px 11px;
    font-size: small;
    background-color: var(--secondary-color-lighter);
    color: var(--secondary-color);
    font-weight: bolder;
    margin-right: 10px;
}

/* FAQ */

.FAQ-container-card {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
}

.FAQ_card_title {
    padding: 10px 0;
    letter-spacing: -1px;
    font-size: 1.2rem;
    font-weight: 600;
}

.accordion-menu ul li:hover .FAQ_card_title {
    transition: color 0.3s ease;
    color: var(--primary-color);
}

.accordion-menu ul li .arrow_FAQ {
    position: absolute;
    margin-top: 16px;
    right: 40px;
}



.accordion-menu ul li .arrow_FAQ:before,
.accordion-menu ul li .arrow_FAQ:after {
    content: "";
    position: absolute;
    background-color: var(--primary-color);
    width: 3px;
    height: 9px;
}

.accordion-menu ul li .arrow_FAQ:before {
    transform: translate(-2px, 0) rotate(45deg);
}

.accordion-menu ul li .arrow_FAQ:after {
    transform: translate(2px, 0) rotate(-45deg);
}

.accordion-menu ul li .arrow_FAQ:before,
.accordion-menu ul li .arrow_FAQ:after {
    content: "";
    position: absolute;
    background-color: var(--primary-color);
    width: 3px;
    height: 9px;
}

.accordion-menu ul button {
    display: flex;
    position: relative;
    margin: 5% auto;
    cursor: pointer;
    border: none;
    background-color: var(--primary-color);
    color: var(--light);
    border-radius: var(--border-radius);
    transition: box-shadow 0.3s ease, scale 0.3s ease, background-color 1s ease, border 2s ease, transform ease 1s;
    scale: 1;
    width: auto;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.accordion-menu ul button:hover {
    box-shadow: var(--box-shadow);
    background-color: var(--primary-color-boost);
    scale: 0.98;

}

@keyframes flipdown {
    0% {
        opacity: 0;
        transform-origin: top center;
        transform: rotateX(-90deg);
    }

    5% {
        opacity: 1;
    }

    80% {
        transform: rotateX(8deg);
    }

    83% {
        transform: rotateX(6deg);
    }

    92% {
        transform: rotateX(-3deg);
    }

    100% {
        transform-origin: top center;
        transform: rotateX(0deg);
    }
}

/* About us */

.about_card,
.team_card {
    width: 330px;
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 10px;
    cursor: pointer;
}

.about_card:nth-child(1) {
    background-image: url(../../images/about-advantage.png);
    background-position: bottom;
}

.about_card:nth-child(even) {
    background-color: var(--primary-color);
}

.about_card:nth-child(3) {
    background-image: url(../../images/about-prestation.png);
    background-position: bottom;
}

.about_card:nth-child(4) {
    background-color: var(--third-color);
}

.about_card:nth-child(5) {
    background-image: url(../../images/about-presta.png);
    background-position: top;
}


.about_card h2 {
    margin: 0;
    padding: 0 0 10px 0;
    padding: 4%;
    font-weight: bold;
}

.about_card:nth-child(odd) .about_card_title {
    color: var(--primary-color-boost);
    text-shadow: var(--third-color-transparent) 1px 0 10px;
}

.about_card:nth-child(even) .about_card_title {
    color: var(--grey-light);
}

.about_card_description,
.team_card_description {
    padding: 4%;
    font-size: small;
    background-color: var(--third-color-transparent);
    border-radius: var(--border-radius);
    backdrop-filter: blur(10px);
}


.about_card:nth-child(odd) .about_card_description,
.team_card .team_card_description {
    border-radius: var(--border-radius);
    color: transparent;
    text-shadow: var(--third-color-transparent) 1px 0 10px;
    height: 0;
    opacity: 0;
    transition: height 0.3s ease, opacity 0.3s ease;
    background-color: transparent;
}

.about_card:nth-child(odd):hover .about_card_description,
.team_card:hover .team_card_description {
    color: var(--grey-light);
    text-shadow: var(--third-color-transparent) 1px 0 10px;
    height: auto;
    opacity: 1;
    color: var(--grey-light);
    background-color: var(--third-color-transparent);
}


.about_card:nth-child(even) .about_card_description {
    color: var(--grey-light);
    background-color: transparent;
}

.about_card:nth-child(2) .little_icon_about_card_rond,
.about_card:nth-child(4) .little_icon_about_card_rond {
    margin-top: -5px;
}

.about_card:nth-child(1) .little_icon_about_card_rond,
.about_card:nth-child(3) .little_icon_about_card_rond {
    margin-top: -2px;
}


/* TEAM */
.team {
    display: flex;
    flex-direction: row;
    flex-wrap: no-wrap;
    flex: 30%, 70%;
}

.team_text_section {
    display: flex;
    flex-direction: column;
}

.team_section_teams {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;

}

@media screen and (max-width: 800px) {
    .team {
        flex-wrap: wrap;
    }
}

/* Mentions */

.mention_section {
    padding: 70px 5% 5% 5%;
    width: 100%;

}

.mention_image,
.mention_image_annonce-completes {
    height: 30vh;
}

.mention_section_text {
    width: 90%;
}

.mention_section_text p {
    padding-bottom: 10px;
}

/* conditions */
.conditions_section_text {
    width: 100%;
}

.conditions_section_text h3 {
    padding: 30px 0 15px 0;
    color: var(--primary-color);
}

.conditions_section_text h4 {
    padding: 30px 0 15px 0;
}

.conditions_section_text p {
    padding-bottom: 10px;
    text-align: justify;
}

.conditions_section_text a {
    color: #F3A200;
    text-decoration: underline;
}

.conditions_section_text p span {
    font-weight: bold;
    text-decoration: underline;
}

.alert_conditions {
    padding: 1% 3%;
    background-color: var(--primary-color-lighter);
    border: 2px solid var(--primary-color);
    border-radius: var(--border-radius);
}

.alert_conditions h4 {
    color: var(--primary-color);
    font-weight: bolder;
}


/* Recuperation page and After refound afterRemboursement.php and bientot.php */

.container-recup-mdp,
.container-after_refound-mdp,
.container-cancel_appointment-mdp,
.container-after_soon-mdp,
.container-end_publish-mdp,
.container-end_inscription-mdp {
    background-image: var(--gradient-primaryColor);
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: absolute;
    left: 0%;
    top: 0%;
}

.container-form-recup-mdp,
.container-form-after_refound-mdp,
.container-form-cancel_appointment-mdp,
.container-form-after_soon-mdp,
.container-form-end_publish-mdp,
.container-form-end_inscription-mdp {
    width: 80%;
    background-color: var(--light);
    border-radius: var(--border-radius);
    padding: 5%;
    justify-content: space-between;
    gap: 15px;
    align-content: center;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);

}

.container-after_soon-mdp,
.container-end_publish-mdp,
.container-end_inscription-mdp {
    justify-self: center;
    text-align: center;
    margin: 0 auto;

}

.container-form-recup-mdp .form-group {
    margin: 2% 0;
}

.recup_section_title,
.after_refound_section_title,
.cancel_appointment_section_title,
.after_soon_section_title,
.end_publish_section_title,
.end_inscription_section_title {
    font-size: 2rem;
    margin-bottom: 0;
}

.recup_section_text,
.after_refound_section_text,
.cancel_appointment_section_text,
.after_soon_section_text,
.end_publish_section_text,
.end_inscription_section_text {
    padding: 10px 0;
}

.recup_span {
    color: var(--primary-color);
}

/* Profil Public */

/* banner if mecano */
.container-menu-profil_mecano {
    background-image: url('../../images/banniere.jpg');
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
    padding: 80px 0 50px 0;
    justify-items: center;
    align-items: center;
    border-radius: 0 0 15px 15px;
    z-index: 0;
    position: relative;
    /* Important pour le pseudo-élément */
}

.container-menu-profil_mecano::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.65;
    background-color: #2d4656;
    border-radius: inherit;
    z-index: -1;
}


/* banner if not mecano */
.container-menu-profil_non-mecano {
    background-color: var(--third-color);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
    padding: 80px 0 50px 0;
    justify-items: center;
    align-items: center;
    border-radius: 0 0 15px 15px;
    z-index: 0;
}


.section_nav_profil {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
    justify-items: center;
    align-items: center;
    margin-top: -2%;
}

.avatar-profil {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: var(--box-shadow);
}

.note-mecano-view{
    color: var(--secondary-color);
    font-weight: 600;
    text-align: center;
    margin-bottom: 10px!important;
}

.note-client-view{
    color: var(--secondary-color);
    font-weight: 600;
    text-align: center;
    margin-bottom: 10px!important;
    margin-top: 5px!important;
    font-size: 13px;
}

.profil-title {
    font-size: 1.6rem;
    color: var(--light);
    text-align: center;
    margin: 0;
}

.menu-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;

}

.menu-profil button {
    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;
}

@media screen and (max-width: 500px) {
    .menu-profil button {
        font-size: smaller;
    }
}

.menu-profil button:hover {
    color: var(--primary-color);
}

.menu-profil button:active {
    color: var(--primary-color-boost);
}

.btn-profil-clicked {
    color: var(--primary-color) !important;
    font-weight: 500;
}


.profil_menu_main-container_colonn {
    border-radius: 15px;
    background-color: var(--light);
    display: flex;
}

.profil_menu_main-container {
    border-radius: 15px;
    background-color: var(--light);
}


.profil_menu_container_colonn {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    padding: 1% 0;
    justify-content: space-between;
    width: 100%;
    align-items: center;
    border-right: 5px solid var(--body);
    text-align: center;
}


.profil_menu_container_colonn p {
    color: var(--third-color-lighter);
    font-size: small;
}

.profil_menu_container_colonn h3 {
    color: var(--third-color);
    font-weight: 700;
}

.profil_menu_container {
    display: flex;
    flex-direction: row;
    padding: 10px 3%;
    justify-content: space-between;
    width: 100%;
    align-items: center;
    border-bottom: 5px solid var(--body);
    flex-wrap: wrap;
}

.porte_monnaie_menu_container{
    border-radius: 15px;
    background-color: var(--light);
    margin-top: 10%;
}

.fond_dispo_container{
    display: flex;
    flex-direction: row;
    padding: 10px 3%;
    justify-content: space-between;
    width: 100%;
    align-items: center;
    border-bottom: 5px solid var(--body);
    flex-wrap: wrap;
}

.fond_liste_container{
    display: flex;
    flex-direction: row;
    padding: 10px 3%;
    justify-content: space-between;
    width: 100%;
    align-items: center;
    flex-wrap: wrap;
}

.porte_monnaie_container {
    display: flex;
    flex-direction: row;
    padding: 10px 3%;
    justify-content: space-between;
    width: 100%;
    align-items: center;
    border-bottom: 5px solid var(--body);
    flex-wrap: wrap;
}

.porte_monnaie_container h3 {
    font-size: 1rem;
    color: var(--third-color);
    transition: 0.3s color ease;

}


.porte_monnaie_container h4 {
    font-size: 1rem;
    color: var(--third-color);
    transition: 0.3s color ease;

}

.fond_liste_container ul{
    margin: 0;
}

.fond_liste_container li {
    font-size: 1rem;
    color: var(--third-color);
    transition: 0.3s color ease;
}

.porte_monnaie_container p {
    color: var(--third-color-lighter);
    text-align: end;
}

.btn-virement{
    border-radius: var(--border-radius);
    padding: 10px;
    border: none;
    color: var(--grey-light);
    background-color: var(--third-color);
    scale: 1;
    margin: 10px 0;
    cursor: pointer;
}

.profil_menu_title-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1%;
}

.profil_menu_title-container h2 {
    font-size: 1.2rem;
    color: var(--third-color);
    font-weight: 700;
}

.profil_menu_container h3 {
    font-size: 1rem;
    color: var(--third-color);
    transition: 0.3s color ease;

}

.profil_menu_container p {
    color: var(--third-color-lighter);
    text-align: end;
}

.button-deconnexion-mobile,
.profil_menu_title-container_button {
    display: flex;
    background-color: transparent;
    border: none;
    cursor: pointer;
    align-items: center;
    color: var(--primary-color);

}

.button-deconnexion-mobile p,
.profil_menu_title-container p {
    color: var(--primary-color);
    margin-right: 15px;
}

.button-deconnexion-mobile:hover p,
.profil_menu_title-container:hover p,
.profil_menu_container:hover .profil_menu_container_button {
    text-decoration: underline;
    color: #F3A200;
}

@media screen and (max-width: 500px) {

    .button-deconnexion-mobile p,
    .profil_menu_title-container_button p {
        display: none;
    }
}

/*profil-particulier.php */

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

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

.form-group label {
    color: var(--third-color);
}

.form-group input,
.form-group select,
.form-group textarea {
    color: var(--third-color-lighter);
    border: none;
    font-size: small;
}

.form-group label span {
    color: var(--secondary-color);
}

#avatar-cplt {
    background-color: var(--light);
    font-size: small;
}


/* description */
.profil_menu_container_descriptif {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.profil_menu_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.descriptif_accordion-button {
    background-color: transparent;
    border: none;
    cursor: pointer;
    color: var(--primary-color);
    transition: color 0.3s ease;
    margin-left: auto;
    transition: 0.3s text-decoration ease;
}

.descriptif_accordion-button:hover {
    text-decoration: underline;
}


.descriptif_accordion-content {
    display: none;
    overflow: hidden;
    width: 100%;
    margin-top: 10px;
}

.descriptif_accordion-content p {
    color: var(--third-color-lighter);
    text-align: start;
    margin: 0;
}

/*profil competence mécanique pro*/
#container-competence-validation-meca {
    width: 90%;
    display: flex;
    flex-direction: column;

    margin: 10px auto;
}


#container-competence-meca {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 10px auto;
    align-items: center;
}


#container-ico-competence-meca {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    flex-wrap: wrap;
    width: 100%;
    border-radius: var(--border-radius);
    padding: 15px 5%;
    background-color: var(--secondary-color);
    gap: 10px;
}

#container-ico-competence-meca h1 {
    display: flex;
    text-align: left;
    align-items: flex-start;
}


#container-ico-competence-meca svg {
    fill: var(--secondary-color-lighter);
    stroke: var(--secondary-color-lighter);
    color: var(--secondary-color-lighter);
}

/*verification*/

#container-banniere-profil .verication_ongoing {
    color: var(--secondary-color) !important;
}

/* notation rating*/
.rating-profil {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    gap: 5px;
    margin-top: 5px;
}

.rating-profil input {
    display: none;
}

.rating-profil label:before {
    content: '\f013';
    font-family: fontAwesome;
    font-size: 22px;
}


/* Modification Form */

#container-menu-modif-profil {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
    justify-items: center;
    align-items: center;
    margin-top: 4%;
    width: 70%;
    margin-left: auto;
    margin-right: auto;
}

/* Form Annonces part */

.form-barre-recherche {
    padding: 5%;
    background-color: var(--light);
    border-radius: var(--border-radius);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: box-shadow 1s ease;
    margin-top: 20px;


}

.form-barre-recherche:hover {
    box-shadow: var(--box-shadow);
}

.categorie-recherche-annoncement,
.profil-annoncement {
    position: relative;
    display: flex;
    border-radius: var(--border-radius);
    background: var(--bigGradientPrimary);
    background-size: cover;
    background-attachment: fixed;
    background-position: bottom;
    background-repeat: no-repeat;
    min-height: 15dvh;
    margin-top: 50px;
    margin-bottom: 20px;
    padding: 20px 0;
    cursor: pointer;
    justify-content: center;
    align-items: center;
    scale: 1;
    transition: transform 1s ease, scale 2s ease, box-shadow 1s ease;
    text-decoration: none;
}

.profil-annoncement {
    background: linear-gradient(120deg, var(--secondary-color-dark) 0%, var(--secondary-color) 80%, var(--secondary-color-dark) 100%);
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--grey-light);
    text-align: center;
}


.categorie-recherche-annoncement a {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
    align-items: center;
    gap: 20px;
    text-decoration: none;

}

.categorie-recherche-annoncement h2 {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--grey-light);
    text-align: center;
}



.categorie-recherche-annoncement p {
    min-height: 40px;
    background-color: var(--third-color);
    padding: 0 40px;
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    color: var(--grey-light);
    border-radius: var(--border-radius);
    font-size: small;
}

.categorie-recherche-annoncement:hover,
.profil-annoncement:hover {
    box-shadow: var(--box-shadow);
    scale: 0.98;
}


.categorie-recherche_select {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    justify-content: space-around;
}

.categorie-recherche_select select {
    display: flex;
    width: 33%;
    padding: 1% 2%;
    border: 1px solid var(--body);
    border-radius: var(--border-radius);
}

@media screen and (max-width: 500px) {
    .categorie-recherche_select select {
        width: 100%;
        margin-bottom: 5px;
    }
}

.categorie-recherche {
    display: flex;
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 30px;
}

.categorie-recherche label {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    min-height: 110px;
    width: 160px;
    align-items: center;
    justify-content: center;
    background-color: var(--light);
    border: 1px solid var(--grey-light);
    color: var(--third-color);
    border-radius: var(--border-radius);
    margin: 0 auto;
    scale: 1;
    transition: 1s transform ease, box-shadow 0.3s ease;

}

.categorie-recherche input[type="radio"] {
    display: none;
}

.categorie-recherche svg {
    width: 40px;
    height: 40px;
    stroke: var(--third-color);
    transition: stroke 0.3s, fill 0.3s;
}

.categorie-recherche input[type="radio"]:checked+svg {
    stroke: var(--primary-color);
    fill: var(--primary-color);
}

.categorie-recherche input[type="radio"]:checked {
    color: var(--third-color);
}

.categorie-recherche label svg {
    stroke: var(--third-color-lighter);
    fill: var(--third-color-lighter);
}

.categorie-recherche label:hover {
    box-shadow: var(--box-shadow);
    scale: 0.98;
    border: 1px solid var(--primary-color);
}

.categorie-recherche label:hover svg {
    stroke: var(--third-color);
    fill: var(--third-color);
}

.categorie-recherche p {
    margin-top: 8px;
    margin-bottom: 0;
}

.btn-recherche-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
}

.btn-recherche {
    display: none;
}

.btn-search,
.btn-confirmation-recap {
    display: flex;
    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-search:hover,
.btn-confirmation-recap:hover {
    background-color: var(--primary-color-dark);
    box-shadow: var(--box-shadow);
    scale: 0.98;
}

.btn-search svg {
    fill: var(--light);
}

.btn-search p {
    margin: 0;
    font-size: 14px;
}

.aucune-description-profil {
    color: var(--third-color-lighter);
    font-size: small;
}


/* Evaluation for pro*/
.container-avis-mecano-background {
    margin: 50px 5% 5%;
    border-radius: var(--border-radius);
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    overflow-x: auto;
    color: var(--light);
}

.container-avis-mecano {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 20px;
}

.evaluation-text-more-big {
    display: flex;
    justify-content: space-evenly;
    flex-direction: column;
    background-color: var(--secondary-color);
    height: 350px;
    width: 100%;
    text-align: center;
    border-radius: var(--border-radius);
    margin-bottom: 5px;

}

.evaluation-text-more {
    display: flex;
    justify-content: space-evenly;
    flex-direction: column;
    background-color: var(--secondary-color);
    height: 350px;
    width: 350px;
    text-align: center;
    border-radius: var(--border-radius);

}

.buttons-avis{
    width: 100%;
    text-align: center;
}

.btn-voir-plus,
.btn-voir-moins {
    display: flex;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    border-radius: 7px;
    background-color: var(--third-color);
    border: 2px solid transparent;
    min-width: 40%;
    scale: 1;
    min-height: 44px;
    color: var(--light);
    cursor: pointer;
    border-radius: var(--border-radius);
    align-items: center;
    justify-content: center;
    transition: transform 1s ease, scale 1s ease, box-shadow 2s ease, border 1s ease;
}

.btn-search {
    margin-top: 20px;
    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-voir-plus:hover,
.btn-voir-moins:hover {
    box-shadow: var(--box-shadow);
    scale: 0.98;
    border: 2px solid var(--secondary-color-dark);
    scale: 0.98;
}

.avis {
    background-color: var(--light);
    border-radius: var(--border-radius);
    color: var(--third-color);
    scale: 1;
    transition: transform 1s ease, box-shadow 0.3s ease;
    margin-bottom: 5px;

}

.avis:hover {
    scale: 0.98;
    box-shadow: var(--box-shadow);
}

.avis img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    margin: 20px auto 0;
    object-fit: cover;
}

.container-left-avis {
    display: flex;
    flex-direction: column;
    align-self: center;
    text-align: center;
    margin: 20px 0;
}

.container-left-avis .firstname {
    color: var(--third-color);
    font-weight: 600;
    margin: 10px 0;
}



.rating2 {
    display: flex;
}

.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;
}

.avis-etoile-avis {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.avis-etoile-avis p {
    color: var(--third-color-lighter);
    font-size: small;
}


/* Profil Historique */
.container-historique-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-prenom-nom-offre-rdv a {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 5px;
}

.container-offre-rdv {
    width: 300px;
    border-radius: 22px;
    margin: 2% 2%;
    box-shadow: var(--box-shadow);
    text-align: center;
    background-color: var(--light);
    padding: 15px 5px;
}

.avatar-offre-rdv {
    width: 60px;
    border-radius: 50px;
    clear: both;
    margin: 20px 0;
    height: 60px;
    object-fit: cover;
}

.prenom-offre-rdv,
.nom-offre-rdv {
    color: var(--third-color-lighter);
}


.titre-offre-rdv {
    color: var(--third-color);
    font-weight: bold;
    text-align: center;
}

.jour-offre-rdv {
    text-align: center;
    color: var(--third-color-lighter);
}

.prix-offre-rdv {
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
    clear: both;
    color: var(--secondary-color);
}

.heure-offre-rdv {
    font-weight: bold;
    text-align: center;
    color: var(--third-color);
}

.text-attente{
    color: green;
    font-weight: 600;
    font-size: 14px;
    margin-top: 1%;
}

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

/*Profil Annonces */

/* Annonces */

#container-annonce-profil-public{
    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-mesannonce-monprofil-js {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    width: 100%;
}

.annonce-profil {
    display: flex;
    position: relative;
    box-shadow: var(--box-shadow);
    width: 676px;
    background-color: var(--light);
    border-radius: var(--border-radius);
    cursor: pointer;
    margin: 10px 10px;
    flex-flow: row;
    padding: 2rem;
}


.container-vehicule-annonce-resumer {
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
    text-align: left;
    color: var(--third-color);
    margin-right: 4rem;
}



@media screen and (max-width: 500px) {
    .container-vehicule-annonce-resumer {
        width: 100%;
    }
}

.titre-petite-annonce {
    font-weight: bold;
    color: var(--secondary-color);
    text-align: left;
    text-transform: capitalize;
    padding: 1rem 0;
}

.annonce {
    display: flex;
    position: relative;
    box-shadow: var(--box-shadow);
    width: 676px;
    background-color: var(--light);
    border-radius: var(--border-radius);
    cursor: pointer;
    margin: 10px 10px;
    flex-flow: row;
    padding: 2rem;

}

@media screen and (max-width: 800px) {

    .annonce {
        width: 370px;
        flex-flow: column;
    }
    
    .annonce-profil{
        width: 370px;
        flex-flow: column;
    }

    .titre-petite-annonce {
        text-align: center;
    }

    .container-vehicule-annonce-resumer {  
        margin-right: 0;
    }
}



#container-droite-annonce-resumer {
    width: 100%;
}

#container-description-vehicule-annonce-resumer {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    width: 100%;
    text-align: left;
    color: var(--third-color);

}

#container-description-vehicule-annonce-resumer h3 {
    font-size: 1.25rem;
}

#container-description-vehicule-annonce-resumer p {
    text-align: left;
    color: var(--third-color-lighter);
    margin-top: 1.5rem;
}

.container-ico-ville-datePubli{
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    width: 100%;
    color: var(--third-color-lighter);
    text-align: left;
    margin-top: 2rem;
}

.container-ico-ville-petite-annonce{
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    width: 55%;
    text-align: left;
}

.p-ville-petite-annonce {
    text-transform: capitalize;
    justify-content: space-between;
    display: flex;
    width: 100%;
}


.p-ville-petite-annonce:nth-last-child(){
    gap: 30px;
}

.icone-pos {
    color: var(--primary-color);
    font-size: 20px;
    margin-right: 20px;
}


@media screen and (max-width: 600px) {
    
    #container-description-vehicule-annonce-resumer h3{
        font-size: 0.9rem;
    }

    #container-description-vehicule-annonce-resumer p {
        font-size: 0.9rem;
        margin-top: 0;
    }

    .p-ville-petite-annonce{
        font-size: 0.67rem;
    }

    .date-publi-resumer{
        font-size: 0.67rem;
    }

    .icone-pos {
        font-size: 15px;
        margin-right: 8px;
    }

}


/* Category Annonce */
/* Pop up diagnostic */
.popup {
    background-color: var(--body);
    padding: 5%;
    width: 90%;
    height: 70dvh;
    align-content: center;
    margin: 0 auto;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    overflow-y: auto;
}

.popup h1 {
    font-size: 1.8rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--third-color);
}

@media screen and (max-width: 550px) {

    .popup h1 {
        font-size: 1.2rem;
    }

}

.container-text-popup-title {
    margin-bottom: 2rem;
}

.container-text-popup h5,
.container-text-popup-note h5 {
    color: var(--primary-color);
    font-size: small;
    text-transform: capitalize;
}


.container-text-popup h5 {
    margin-top: 1.5rem;
}



.container-text-popup h2,
.container-text-popup-note h2 {
    color: var(--title_section);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 1rem;
    font-size: medium;
}

.container-text-popup p,
.container-text-popup-note p {
    color: var(--third-color-lighter);
    font-size: small;
}

.container-text-popup-note {
    padding: 20px 5%;
    background-color: var(--primary-color-lighter);
    border: 2px solid var(--primary-color);
    margin: 30px 0;
    border-radius: var(--border-radius);
}

.popup img {
    width: 200px;
}

/* Category annonce category.php*/
.container-main-category {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
    width: 100%;
    margin: 5% 0;

}

.container-main-category_step {
    width: 350px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    background-color: var(--light);
    border-radius: var(--border-radius);
    padding: 15px 2%;
}

.container-main-category_button {
    width: 350px;
    display: flex;
    margin: 0 auto;
}



.container-main-category_step:nth-child(5) {
    background-color: var(--primary-color);
    transform: 3s ease background-color;
    scale: 1;
}

.container-main-category_step:nth-child(5):hover {
    background-color: var(--primary-color-dark);
    scale: 0.98;
}

.container-main-category_step h2,
.step_first_section_subtitle h3 {
    font-size: small;
    background-color: var(--primary-color-lighter);
    color: var(--primary-color);
    height: 35px;
    min-width: 35px;
    align-content: center;
    text-align: center;
    border-radius: 50px;
    display: inline-block;
    font-weight: bold;
}

.container-main-category_step:nth-child(5) p {
    color: var(--light);
}

.container-main-category_step h2:nth-child(2),
.step_first_section_subtitle h3:nth-child(1) {
    padding: 0 20px;
}

.container-main-category_title_step {
    display: flex;
    justify-content: flex-end;
}

.container-main-category_step p {
    font-size: small;
    color: var(--third-color);
    text-align: justify;
}

.container-main-category_text_step {
    display: flex;
    flex-direction: column;
    gap: 10px;
}


/* Categorie.php First step */
.step_first_section_title {
    padding: 0% 5%;
}

.container-vehicule {
    overflow: hidden;
    margin: auto;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    gap: 15px;
    padding: 5% 0;
}


.container-voiture-index,
.container-voiture,
.container-moto,
.container-vehicule-pro,
.container-camping-car,
.container-voiture-clique,
.container-moto-clique,
.container-vehicule-pro-clique,
.container-camping-car-clique {
    display: flex;
    flex-direction: column;
    min-height: 110px;
    width: 160px;
    justify-content: center;
    align-items: center;
    border-radius: var(--border-radius);
    color: var(--third-color);
    transition: transform 1s ease, box-shadow 0.3s ease;
    text-align: center;
    color: var(--third-color);
}

.container-voiture,
.container-moto,
.container-vehicule-pro,
.container-camping-car,
.container-voiture-clique,
.container-moto-clique,
.container-vehicule-pro-clique,
.container-camping-car-clique {
    border: 2px solid var(--third-color-transparent);
    transition: scale 0.3s ease, box-shadow 0.6s ease;
    scale: 0.98;
}

.container-voiture-index:hover,
.container-voiture:hover,
.container-moto:hover,
.container-vehicule-pro:hover,
.container-camping-car:hover {
    scale: 1;
    box-shadow: var(--box-shadow);
}

.btn-comparer-les-prix {
    cursor: pointer;
}

.mention_image {
    margin-top: 30px;
    height: 100px;
}

.text-pre-annonce_container .mention_image {
    border-radius: 8px 8px 0 0;
}

.text-annonce_container {
    text-align: center;
    background-color: var(--primary-color);
    border-radius: 0 0 8px 8px;
    padding: 2% 0;
}

.text-annonce_container .section_big_title {
    color: var(--grey-light);
}

.text-annonce_container .section_pre-annonce_text {
    color: var(--light);
}

.section_pre-annonce_text_recap{
    display: none;
    color: var(--light);
}

.step_first_section_title .section_pre-annonce_text {
    color: var(--third-color-lighter);
}

.container-vehicule a:hover {
    text-decoration: none;
}

.container-voiture-clique,
.container-moto-clique,
.container-vehicule-pro-clique,
.container-camping-car-clique {
    border: 2px solid var(--third-color-transparent);
    box-shadow: var(--box-shadow);
    background-color: var(--light);
    scale: 1;
}

#etape-1-annonce {
    padding: 5%;
}

#etape-1-annonce h5 {
    color: var(--primary-color);
}

/* Category second step */
#etape-2-annonce {
    display: none;
    width: 100%;
    padding: 1% 5% 5% 5%;
    background-color: var(--body);
}

#etape-2-annonce h5 {
    color: var(--secondary-color);
}

.titre-et-boite-panne {
    display: flex;
    flex: row;
    flex-wrap: wrap;
    width: 100%;
    gap: 20px;
    justify-content: center;
}

.liste-reparation {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 48%;
}

.container-reparation-client {
    width: 48%;
    display: flex;
    flex-direction: column;
    box-shadow: var(--box-shadow);
    background-color: var(--body);
    border-radius: 20px;
    min-height: 300px;
    justify-content: space-between;

}

.btn-reparation,
#formPanne48 {
    display: flex;
    min-height: 40px;
    width: 48%;
    padding: 1% 15px;
    margin-bottom: 1%;
    align-items: center;
    background-color: var(--body);
    border: 2px solid var(--third-color-lighter);
    border-radius: 20px;
    color: var(--third-color-lighter);
    text-decoration: none;
    scale: 1;
    transition: scale 1s ease, box-shadow 0.3 ease;
    justify-content: center;
    font-weight: 500;
    cursor: pointer;
    font-size: x-small;
}



.btn-reparation:hover,
#formPanne48:hover {
    scale: 0.98;
    box-shadow: var(--box-shadow);
}

.btn-reparation-devis {
    color: var(--primary-color);
    border: none;
    background-color: transparent;
    font-weight: 500;
    width: 100%;
    cursor: pointer;

}

.btn-precedent-liste-reparation,
.reparation-client-list-title,
.btn-validation-panne {
    display: none;
    border-radius: 20px 20px 0 0;
    border: none;
    background-color: var(--third-color);
    color: var(--grey-light);
    cursor: pointer;
    height: 40px;
    width: 100%;
    font-size: small;
    color: var(--third-color);
}

.btn-precedent-liste-reparation {
    color: var(--light);
}

.reparation-client-list-title {
    display: flex;
    border: none;
    text-align: center;
    justify-content: center;
    align-items: center;
    background-color: var(--primary-color);
    color: var(--light);
}

.btn-validation-panne {
    display: flex;
    padding: 0 20px;
    width: 200px;
    align-items: center;
    justify-content: center;
    margin: 15px auto;
    border-radius: 20px;
    height: 40px;
    border: 2px solid var(--third-color-lighter);
    color: var(--third-color);
    background-color: var(--grey-light);
    transition: 1s border ease, 1s color ease;
}

.btn-validation-panne:hover {
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
    background-color: var(--grey-light);
}

.btn-precedent-liste-reparation:last-child {
    border-radius: 0 0 20px 20px;
}

.scrollview {
    width: 100%;
    scrollbar-width: thin;
    max-height: 300px;
    overflow-y: auto;
}

.container-reparation-client .scrollview {
    background-color: var(--grey-light);
    border-top: transparent;
    border-bottom: transparent;
}


.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-autre,
.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 {
    display: none;
    flex-direction: row;
    flex-wrap: wrap;
    width: 48%;
    border-radius: 20px;
    color: var(--primary-color);
    justify-content: center;
}



.form-panne-droite,
.form-panne-centre,
.form-panne-gauche {
    display: flex;
    flex-direction: column;
    min-height: 40px;
    width: 100%;
    padding: 1% 5px;
    margin-bottom: 1%;
    background-color: var(--light);
    scale: 1;
    transition: scale 1s ease, color 0.3 ease;
    border: none;
    cursor: pointer;
}

.form-panne-droite:hover .btn-reparation-liste,
.form-panne-centre:hover .btn-reparation-liste,
.form-panne-gauche:hover .btn-reparation-liste {
    color: var(--primary-color);
}

.form-panne-droite:hover,
.form-panne-centre:hover,
.form-panne-gauche:hover {
    scale: 0.98;
}

.btn-reparation-liste {
    margin: auto 0;
    justify-content: center;
    background-color: transparent;
    border: none;
    color: var(--third-color-lighter);
    text-decoration: none;
    cursor: pointer;
    font-size: small;
}

.checked-panne {
    color: var(--primary-color);
    font-weight: 600;
}


@media screen and (max-width: 554px) {

    .container-reparation-client,
    .liste-reparation,
    .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-autre,
    .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%;
    }
}

/* forme tte panne */
#form-toute-panne,
#form-toute-panne-moto {
    display: flex;
    flex-wrap: wrap;
    padding: 5%;
}

.panne-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    border-bottom: 1px solid var(--third-color-transparent);
    margin: 1% 0;
    width: 100%;
    justify-content: space-between;
    color: var(--third-color-lighter);
    font-size: small;
    padding: 10px 15px;
}

.panne-column {
    display: flex;
    flex-direction: column;
}

.corbeille-panne {
    width: 15px;
    height: 15px;
    fill: var(--third-color-lighter);
    cursor: pointer;

}

/*categorie.php etape 3*/
#etape-3-annonce {
    display: none;
    width: 100%;
    padding: 5%;
    background-color: var(--body);
}

#etape-3-annonce h5 {
    color: var(--primary-color);
}

.step3_form-group label {
    color: var(--light);
    font-size: small;
}



#container-form-description-voiture,
#container-form-description-moto,
#container-form-description-vehicule-pro,
#container-form-description-camping-car {
    background: var(--third-color);
    border-radius: var(--border-radius);
    padding: 5%;
}


#form-vehicule-annonce-voiture {
    display: flex;
    flex-wrap: wrap;
    text-align: left;
    justify-content: space-between;
    justify-items: center;
    gap: 5%;

}

.container-semaine,
.container-heure,
.container-piecemecanic {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    text-align: center;
    justify-content: center;
}


.btn-checkbox-lundi,
.btn-checkbox-mardi,
.btn-checkbox-mercredi,
.btn-checkbox-jeudi,
.btn-checkbox-vendredi,
.btn-checkbox-samedi,
.btn-checkbox-dimanche {
    width: 200px;
    min-height: 40px;
    background: var(--light);
    border-radius: var(--border-radius);
    text-align: center;
    cursor: pointer;
    color: var(--third-color-lighter);
    border: 2px solid transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    scale: 1;
    transition: transform 1s ease, color 1s ease, font-weight 1s ease;
    margin: 5px;
}


.container-semaine label {
    color: var(--third-color-lighter);
}


.container-heure label {
    color: var(--third-color-lighter);

}

.btn-checkbox-matin,
.btn-checkbox-midi,
.btn-checkbox-aprem,
.btn-checkbox-soir {
    min-height: 40px;
    padding: 0 40px;
    cursor: pointer;
    text-align: center;
    display: flex;
    align-items: center;
    border: 2px solid transparent;
    background-color: var(--light);
    border-radius: var(--border-radius);
    scale: 1;
    transition: transform 1s ease, color 1s ease, font-weight 1s ease;
    font-size: small;
    margin: 5px;
}

.btn-checkbox-lundi:hover,
.btn-checkbox-mardi:hover,
.btn-checkbox-mercredi:hover,
.btn-checkbox-jeudi:hover,
.btn-checkbox-vendredi:hover,
.btn-checkbox-samedi:hover,
.btn-checkbox-dimanche:hover,
.btn-checkbox-matin:hover,
.btn-checkbox-midi:hover,
.btn-checkbox-aprem:hover,
.btn-checkbox-soir:hover {
    scale: 0.98;
}

/**/
.etape-3-annonce-title {
    margin: 50px 0 3rem;
}

#etape-3-annonce .container {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    text-align: center;
    justify-content: center;
}

#etape-3-annonce textarea {
    border-radius: var(--border-radius);
    background-color: var(--light);
    color: var(--third-color-lighter);
    padding: 10px;
}

#etape-3-annonce input[type="checkbox"],
#etape-3-annonce input[type="radio"] {
    display: none;
}

#etape-3-annonce input[type="checkbox"]+label,
#etape-3-annonce input[type="radio"]+label {
    background-color: var(--light);
    color: var(--third-color-lighter);
    padding: 10px;
    border: 2px solid 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;
}

#etape-3-annonce input[type="checkbox"]+label:hover,
#etape-3-annonce input[type="radio"]+label:hover {
    scale: 0.98;
}

#etape-3-annonce input[type="checkbox"]:checked+label,
#etape-3-annonce input[type="radio"]:checked+label {
    background-color: var(--primary-color-lighter);
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
}

#etape-3-annonce .form-control {
    display: none;
    margin: 5px 0;
}

#etape-3-annonce #check-autre-adresse:checked~.form-control {
    display: block;
}

#etape-3-annonce .form-group {
    width: 100%;
    margin-bottom: 15px;
}

#etape-3-annonce .form-group label {
    display: block;
    margin: 20px 0 10px;
    color: var(--grey-light);
}

#etape-3-annonce .form-group .form-control {
    width: 100%;
    padding: 10px;
    border-radius: var(--border-radius);
    box-sizing: border-box;
    display: block;
}

#etape-3-annonce .form-group input[type="text"],
#etape-3-annonce .form-group input[type="number"],
#etape-3-annonce .form-group select {
    display: block;
}

.container label{
    width: 260px;
}

.container input{
    width: 260px!important;
}

.titre-diagnostique {
    color: var(--primary-color);
}

/**/

#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;
}

#matin:checked~.btn-checkbox-matin,
#midi:checked~.btn-checkbox-midi,
#aprem:checked~.btn-checkbox-aprem,
#soir:checked~.btn-checkbox-soir,
#matinMoto:checked~.btn-checkbox-matin,
#midiMoto:checked~.btn-checkbox-midi,
#apremMoto:checked~.btn-checkbox-aprem,
#soirMoto:checked~.btn-checkbox-soir,
#matinVehiculePro:checked~.btn-checkbox-matin,
#midiVehiculePro:checked~.btn-checkbox-midi,
#apremVehiculePro:checked~.btn-checkbox-aprem,
#soirVehiculePro:checked~.btn-checkbox-soir,
#matinCampingCar:checked~.btn-checkbox-matin,
#midiCampingCar:checked~.btn-checkbox-midi,
#apremCampingCar:checked~.btn-checkbox-aprem,
#soirCampingCar:checked~.btn-checkbox-soir,
#lundi:checked~.btn-checkbox-lundi,
#mardi:checked~.btn-checkbox-mardi,
#mercredi:checked~.btn-checkbox-mercredi,
#jeudi:checked~.btn-checkbox-jeudi,
#vendredi:checked~.btn-checkbox-vendredi,
#samedi:checked~.btn-checkbox-samedi,
#dimanche:checked~.btn-checkbox-dimanche,
#lundiMoto:checked~.btn-checkbox-lundi,
#mardiMoto:checked~.btn-checkbox-mardi,
#mercrediMoto:checked~.btn-checkbox-mercredi,
#jeudiMoto:checked~.btn-checkbox-jeudi,
#vendrediMoto:checked~.btn-checkbox-vendredi,
#samediMoto:checked~.btn-checkbox-samedi,
#dimancheMoto:checked~.btn-checkbox-dimanche,
#lundiVehiculePro:checked~.btn-checkbox-lundi,
#mardiVehiculePro:checked~.btn-checkbox-mardi,
#mercrediVehiculePro:checked~.btn-checkbox-mercredi,
#jeudiVehiculePro:checked~.btn-checkbox-jeudi,
#vendrediVehiculePro:checked~.btn-checkbox-vendredi,
#samediVehiculePro:checked~.btn-checkbox-samedi,
#dimancheVehiculePro:checked~.btn-checkbox-dimanche,
#lundiCampingCar:checked~.btn-checkbox-lundi,
#mardiCampingCar:checked~.btn-checkbox-mardi,
#mercrediCampingCar:checked~.btn-checkbox-mercredi,
#jeudiCampingCar:checked~.btn-checkbox-jeudi,
#vendrediCampingCar:checked~.btn-checkbox-vendredi,
#samediCampingCar:checked~.btn-checkbox-samedi,
#dimancheCampingCar:checked~.btn-checkbox-dimanche {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background-color: var(--primary-color-lighter);
    font-weight: 500;
}


.btn-validation-form-annonce,
.btn-validation-form-annonce-complete {
    border-radius: var(--border-radius);
    min-height: 40px;
    min-width: 200px;
    background-color: var(--primary-color);
    border: 2px solid var(--primary-color);
    color: var(--light) !important;
    cursor: pointer;
    padding: 4px 40px;
    display: flex;
    margin: 100px auto 50px;
    font-weight: 500;
    text-align: center;
}

.btn-validation-form-annonce-complete {
    margin: 30px auto;
    justify-content: center;
    align-items: center;

}

/*Recap categorie*/
#container-vehicule-panne-recap-annonce {
    width: 100%;
    background-color: var(--third-color);
    padding: 50px 0;
}

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

#container-vehicule-recap-annonce 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 h3{
    color: var(--third-color-lighter);
    margin-bottom: 10px;
    font-weight: 600;
    font-size: 100%;
}

    

.container-recap-panne {
    text-align: center;
}

.recap-panne {
    height: auto;
}

.container-recap-panne h4 {
    text-align: center;
    color: var(--light);
    font-weight: bold;
    font-size: 18px;
}

#container-vehicule-recap-annonce,
#form-recap-panne p {
    color: var(--grey-light);
}


.container-description-annonce-recap p,
.container-piece-annonce-recap span,
.container-lieu-annonce-recap span {
    color: var(--third-color-lighter);
    font-size: 18px;
}

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

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

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

.container-description-annonce-recap {
    color: var(--third-color-lighter);
}

.container-recap-dispo h2 {
    color: var(--primary-color);
    font-size: 1.6rem;
    padding: 15px 0;
}

.container-dispo-jour-recap,
.container-dispo-heure-recap {
    display: flex;
    flex-flow: row wrap;
    text-align: center;
}

.btn-checkbox-heure-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;
}

.container-recap-dispo {
    margin: 0 auto;
}

.btn-confirmation-recap {
    display: none;

}

/*popup*/
.popup-etes-vous-sur1,
.popup-etes-vous-sur4,
.popup-etes-vous-sur5,
.popup-etes-vous-sur6 {
    z-index: 10;
    background-color: var(--light);
    border-radius: 20px;
    padding: 5%;
}

.btn-oui-etes-vous-sur1,
.btn-oui-etes-vous-sur4,
.btn-oui-etes-vous-sur5 {
    font-size: 20px;
    padding: 5px 30px;
    font-weight: bold;
    border-radius: var(--border-radius);
    color: var(--light);
    cursor: pointer;
    margin-right: 5%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.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 {
    text-align: center;
    font-weight: 700;
    color: var(--third-color);
    font-size: 35px;
}

.btn-non-etes-vous-sur1,
.btn-non-etes-vous-sur4 {
    font-size: 20px;
    padding: 5px 30px;
    font-weight: bold;
    border-radius: var(--border-radius);
    background-color: var(--primary-color);
    color: var(--light);
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* error.php Error page */
.error {
    margin: 0;
    background-color: var(--primary-color);
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: var(--primary-color);
    text-align: center;
    position: absolute;
    align-content: center;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.error h1 {
    margin: -10px 0 -30px;
    font-size: calc(17vw + 40px);
    color: var(--primary-color-lighter);
    letter-spacing: -17px;

}

.error p {
    color: var(--primary-color-lighter);
    font-size: 20px;
}

.btn-error,
.after-refound-btn,
.cancel_appointment-btn,
.after-soon-btn,
.end_publish-btn,
.end_inscription-btn,
.btn-popup {
    display: flex;
    height: 40px;
    width: 30%;
    margin: 0 auto;
    justify-content: center;
    align-items: center;
    background-color: var(--third-color);
    border-radius: var(--border-radius);
    color: var(--light);
    text-decoration: none;
    border: 2px solid transparent;
    scale: 1;
    transition: transform 3s ease, scale 2s ease, box-shadow 0.3 ease, border 3s ease, background-color 2s ease;
    cursor: pointer;
    font-size: small;
    margin-top: 20px;

}

.btn-error:hover,
.after-refound-btn:hover,
.after-soon-btn:hover,
.end_publish-btn:hover,
.end_inscription-btn:hover,
.btn-popup:hover,
.btn-validation-form-annonce:hover {
    scale: 0.98;
    box-shadow: var(--box-shadow);
    border: 2px solid var(--third-color-lighter);
}

.btn-validation-form-annonce:hover {
    border: none;
    background-color: var(--primary-color-boost);

}

/*sortie.php countdown*/
.countdown-container {
    display: flex;
    width: 100%;
    max-width: 70%;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.countdown-days-container,
.countdown-hours-container,
.countdown-minutes-container,
.countdown-seconds-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--light);
    width: 140px;
    height: 140px;
    border-radius: var(--border-radius);
    margin: 10px auto;
    box-shadow: var(--box-shadow);
}

.countdown-days,
.countdown-hours,
.countdown-minutes,
.countdown-seconds {
    font-size: 2.5em;
    margin: 10px 0;
    background: linear-gradient(to right, var(--primary-color), var(--primary-color-dark));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


.countdown-days-label,
.countdown-hours-label,
.countdown-minutes-label,
.countdown-seconds-label {
    text-transform: capitalize;
    margin-bottom: 5px;
    color: var(--third-color-lighter);
}

@media (max-width: 800px) {

    .countdown-countdown-container {
        max-width: 90%;
    }

    .countdown-days-container,
    .countdown-hours-container,
    .countdown-minutes-container,
    .countdown-seconds-container {
        font-size: 0.8em;
        width: 100px;
        height: 100px;
    }
}

/*avis.php*/
.formulaire-avis {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
}

.formulaire-avis textarea {
    width: 100%;
    height: 100px;
    border-radius: var(--border-radius);
    padding: 10px;
    margin-bottom: 10px;
}

.rating-avis {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    width: 100%;
    margin-bottom: 10px;

}

.rating-avis input {
    display: none;
}

.rating-avis label {
    position: relative;
    font-size: 40px;
    cursor: pointer;
    margin-left: 10px;
}

.rating-avis label:before {
    content: '\f013';
    font-family: FontAwesome;
    font-size: inherit;
    color: var(--primary-color-lighter);
    z-index: 1;
}

.rating-avis label:after {
    content: '\f013';
    font-family: FontAwesome;
    font-size: inherit;
    color: var(--primary-color);
    opacity: 0;
    transition: opacity .5s;
    text-shadow: var(--box-shadow);
    z-index: 2;
    position: absolute;
    top: 0;
    left: 0;
}


.rating-avis label:hover:before,
.rating-avis label:hover~label:before,
.rating-avis input:checked~label:before {
    color: var(--primary-color-lighter);
}

.btn-valider-avis {
    margin-top: 10px;
}

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

/*Bientot.php*/
.soon-svg {
    display: flex;
    justify-content: center;
    animation: rotate 6s linear infinite;
    width: 70px;
    height: 70px;
    margin: 0 auto;
    fill: var(--third-color-lighter);
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* facture.php */
body.container-facture {
    background-color: var(--body);
    width: 100%;
    height: 100%;
}

.container-facture {
    width: 70%;
    border: 2px solid var(--third-color-lighter);
    margin-left: 100px;
    background-color: var(--light);
    margin-bottom: 40px;
    margin: 5rem auto;
    border-radius: var(--border-radius);
    padding: 5%;
    color: var(--third-color);
}

.container-facture p {
    font-weight: 600;
    color: var(--third-color);

}

.trait-noir-devis-monprofil {
    border-top: 1px solid var(--third-color-lighter);
    width: 100%;
    margin: 5px auto;
}

.adresse-devis-monprofil {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    margin: 30px auto 60px auto;
}


.vehicule-devis-monprofil p {
    margin: 10px 0;
}

.container-panne-devis-monprofil {
    display: flex;
    flex-flow: column wrap;
    justify-content: space-between;
    border: 1px solid black;
}

.container-titre-panne-devis-monprofil {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    background-color: black;
    color: white;
}

.panne-devis-monprofil,
.frais-drivossito-monprofil {
    display: flex;
    flex-flow: row wrap;
    margin: 10px 0;
}

.total-prix-monprofil {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    margin-top: 40px;
    padding: 10px 0;
    border-bottom: 2px solid var(--third-color);
    border-top: 2px solid var(--third-color);
}


.container-prix-total-facture {
    display: flex;
    flex-flow: row wrap;
    margin-top: 10px;
    border-top: 2px solid var(--third-color);
    justify-content: space-between;
}


/*Need to check with the website*/
.container-titre-annonce-recap {
    width: 100%;
    height: 100%;
    background-color: var(--body);
    display: flex;
    justify-content: center;
    align-items: center;
}


/**/