
@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
}

:root {
    --bg-site:  #F8F8F8  ;
    --color-orange-clair: #EC8938;
    --color-orange:#ec6338;
    --color-orange-hover: #d2430e;
    --color-orange-text-hover: #FFFFFF;
    --color-bleu: #1fa9be;
    --color-bleu-hover: #16808f;
    --color-danger: #CC0000;
    --color-success: #78c091;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Rubik", sans-serif;
}

html, body {
    font-family: "Rubik", sans-serif;
    font-size: 15px;
    line-height: 1.5rem;
    background-color: var(--bg-site) ;

}
li{
    padding-bottom: 5px;
}
input{
    border: #b7b7b7 solid;
}

a {
    color: var(--color-orange);
    text-decoration: none;
    transition: all 0.5s ease;
}

a:hover {
    color: var(--color-orange-hover);
}

a.bulle, span.bulle {
    position: relative;
    text-decoration: none;
    color: #000000;
}

a.bulle:hover,
span.bulle:hover {
    background-color: white;
}

span.bulle span,
a.bulle span {
    display: none;
}

span.bulle i,
a.bulle i {
    width: 20px;
    display: inline-block;
}

span.bulle:hover span,
a.bulle:hover span {
    display: block;
    position: absolute;
    top: -50px;
    left: 20px;
    width: 500px;
    border: 1px;
    border-radius: 10px;
    border-style: solid;
    border-color: var(--color-orange-hover);
    color: #000000;
    text-align: justify;
    background-color : white;
    font-weight: normal;
    padding: 10px;
}

.blocContactMessage {
    max-width: 80%;
    width: auto;
    background: #eca790;
    padding: 20px;
    margin-bottom: 10px;
    float: left;
    border-radius: 10px;
}

.initial {
    background: #FFFFFF;
    float: initial;
    border: #000000 solid;
    border-radius: 10px;
}

.blocContactMessage.messageLocataire {
    float: right;
    background: #8ad5df;
}

.blocContactMessage .messageDate,
.blocContactMessage .messageAuthor,
.blocContactMessage .messageContent {
    margin : 0;
}

.blocContactMessage .messageDate,
.blocContactMessage .messageAuthor {
    font-weight: bold;
}

.blocDemandeContactAction{
    background: var(--color-orange-clair);
    color: #000000;
    padding: 20px;
    margin-top : 20px;
    margin-bottom : 20px;
    border-radius: 10px;
}

.blocDemandeContactAction   .btn
{
    background-color: var(--color-orange);
    border: white solid;
    color: #FFFFFF;
}

.blocDemandeContactAction   .btn:focus,
.blocDemandeContactAction   .btn:active,
.blocDemandeContactAction   .btn:hover
{
    background-color: var(--color-orange-hover);
    border: white solid;
}

.cadre{
    background: #FFFFFF;
    border: var(--color-orange-hover) solid;
    border-radius: 10px;
    margin: 20px;
    padding: 20px;
}


.description{
    border: var(--color-orange-hover) solid;
    background : #FFFFFF;
    border-width: 1px;
    border-radius: 10px;
    padding: 20px;
}
/*.formulaire{*/
/*    padding: 20px;*/
/*}*/

.footer-copyright{
    margin: 80px;
}

.titre{
    margin-top: 20px;
    margin-top: 20px;
    text-align: center;
}

.ligne{
    background: #f5f5f5;
    border: #b7b7b7 solid;
    border-radius: 5px;
    margin-bottom: 5px;
    padding-bottom: 5px;
    padding-top: 5px;
    font-size: 14px;
}

.copyright{
    font-size: 12px ;
}

.text-uppercase {
    text-transform: uppercase !important;
}

.bg-success {
    background-color: var(--color-success);
}

.bg-success:hover {
    opacity: 1
}

.btn {
    border: 1px solid var(--color-orange);
}

.btn:hover,
.btn:active,
.btn:focus,
.btn:focus-visible {
    background-color: var(--color-orange-hover);
    color: var(--color-orange-text-hover);
    box-shadow: none;
}

.btn-success {
    background-color: var(--color-orange-hover);
    border-color: var(--color-orange);
}

.btn-success:hover,
.btn-success:active,
.btn-success:focus,
.btn-success:focus-visible {
    background-color: var(--color-orange-hover);
    border-color: var(--color-orange-hover);
}


.btn-primary {
    background-color: var(--color-bleu);
    border-color: var(--color-bleu);
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus,
.btn-primary:focus-visible {
    background-color: var(--color-bleu-hover);
    border-color: var(--color-bleu-hover);
}

.btn-danger {
    background-color: var(--color-danger);
    border-color: var(--color-danger);
}

.btn-danger:hover,
.btn-danger:active,
.btn-danger:focus,
.btn-danger:focus-visible {
    background-color: var(--color-danger);
    border-color: var(--color-danger);
}

td {
    color: var(--color-danger);
}

.blocRadioButtonResa input {
    display: none;
}

.blocRadioButtonResa label {
    font-size: 0.8rem;
}
.blocRadioButtonResa input:checked + label {
    background-color: var(--color-orange-hover);
    color: var(--color-orange-text-hover);
}

.blocCheckButtonResa input {
    display: none;
}

.blocCheckButtonResa label {
    font-size: 1rem;
}
.blocCheckButtonResa input:checked + label {
    background-color: var(--color-orange-hover);
    color: var(--color-orange-text-hover);
}

@media (max-width: 992px) {
    .menuBurger {
        position: absolute;
        top: 0;
        right: 0;
        width: 40px;
        height: 40px;
    }
    .menuBurger span,
    .menuBurger:before,
    .menuBurger:after {
        content:"";
        position: absolute;
        top: 17px;
        right: 0;
        left: 0;
        height: 6px;
        border-radius: 3px;
        background: #000000;
        transition: all 300ms;
    }
    .menuBurger:before {
        top: 4px;
    }
    .menuBurger:after {
        top: 30px;
    }
    .main-nav.menuOuvert .menuBurger span {
        top: 17px;
        transform: rotate(45deg);
    }
    .main-nav.menuOuvert .menuBurger:before {
        top: 17px;
        transform: rotate(45deg);
    }
    .main-nav.menuOuvert .menuBurger:after {
        top: 17px;
        transform: rotate(-45deg);
    }
    .navbar-nav {
        position: absolute;
        top: 40px;
        right: 0;
        background: #FFFFFF;
        padding: 10px;
        display: none;
    }
    .main-nav.menuOuvert .navbar-nav {
        display: block;
    }
}