@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,700;0,800;1,400;1,700;1,800&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;*/
    --bg-site: #f3f3f3;
    --bg-gris: #f2f2f2;
    --color-gris-clair: #AAAAAA;
    --color-orange-tres-clair: #f59b01;
    --color-orange-clair: #ffc69a;
    --color-orange: #d2430e;
    --color-orange-hover: #ec6338;
    --color-orange-text-hover: #FFFFFF;
    --color-bleu: #1fa9be;
    --color-bleu-hover: #16808f;
    --color-danger: #CC0000;
    --color-success: #78c091;
    --color-success-hover: #318f54;

    --orange-logement: #d2430e;
    --orange-hover-logement: #F19B3D;
    --nectar-accent-color: #d2430e;
    --nectar-extra-color-1: #ff6b3d;
    --nectar-extra-color-2: #eff3f5;
    --nectar-extra-color-3: #e5e9ea;
    --color-jaune: #ffe271;
    --color-jaune-clair: #fff3ac;

    --color-gris-noir:	#333333;
    --color-button-focus-orange:	#F56E28;
    --color-button-red:	#d2430e;
    --color-button-success-red:	#F19B3D;
    --color-footer-gris:	#abb8c3;
    --color-footer-gris-dark: #505050;
    --color-footer-dark: #333333;
    --color-head-background-gris:	#ffffff;
    --color-border-gris:	#f2f2f2;
    --color-faq-clair: #FFC69AFF;

}

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

}

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

body {
    /*background-color: #f0f0f0;*/
    background: var(--bg-site);
}

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

thead input {
    width: 100%;
}

ol, ul {
    padding-left: 0;
}

li {
    padding-bottom: 5px;
}

input {
    border: #b7b7b7 solid;
}

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

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

.contentSite {
    padding-top: 60px;
    background: #FFFFFF;
}

.alert {
    font-weight: 500;
    margin-bottom: 0;
}

/* ********** LOGIN FORM ********* */
.form-control,
.form-select {
    border: 2px solid #666666;
}
.login-form {
    width: 80%;
    max-width: 400px;
    height: 100%;
    margin: auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 0 10px 0 #aaa;
}
.login-form img {
    max-width: 100%;
}

.passwordLogin {
    position: relative;
}

.passwordLogin i::after {
    content: "";
    position: absolute;
    right: 10px;
    /*top: 50%;*/
    bottom: 0;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    transition: all 0.3s ease;
}

.passwordLogin i.fa-eye-slash::after {
    background: url("../img/passwordSlash-odz_cDB.svg") no-repeat;
}

.passwordLogin i.fa-eye::after {
    background: url("../img/passwordNotSlah-7isXGZO.svg") no-repeat;
}

.myform-area .form-area .form-input input {
    position: relative;
    height: 60px;
    padding: 20px 0;
}

.myform-area .form-area .form-input input {
    width: 100%;
    box-sizing: border-box;
    outline: none;
    border: none;
    border-bottom: 2px solid #e1e1e1;
    color: #07315B;
}

.myform-area .form-area .form-input form .form-group {
    position: relative;
}

.myform-area .form-area .form-input form .form-group label {
    position: absolute;
    top: 20px;
    left: 0;
    pointer-events: none;
    font-size: 14px;
    color: #595959;
    margin-bottom: 0;
    transition: all .6s;
}

.myform-area .form-area .form-input input:focus,
.myform-area .form-area .form-input input:valid {
    border-bottom: 2px solid var(--orange-hover-logement);
}

/* Effet de levée du label quand l'input est focus, rempli ou marqué avec la classe 'not-empty' */
.myform-area .form-area .form-input input:focus ~ label,
.myform-area .form-area .form-input input:valid ~ label
{
    top: -5px;
    opacity: 0;
    left: 0;
    color: rgba(103, 58, 183);
    font-size: 12px;
    color: #07315B;
    font-weight: bold;
}
/* *******************fin login form ***************** */

@media (min-width: 768px) {

    .blocRaccourciProfil .col-12 {
        text-align: center;
    }
    .blocRaccourciProfil a {
        display: inline-block;
    }
    .blocRaccourciProfil i {
        display: block;
        margin-bottom: 10px;
    }
    .blocRaccourciProfil i:before {
        font-size: 55px;
    }
}
@media (min-width: 1800px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1650px;
    }
}

/* ************** header ************* */
.headerSite {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99;
    background: var(--bg-site);
    height: 60px;
    padding: 0;
}

.logoSite {
    display: inline-block;
    padding: 10px 0 10px 30px;
}

.logoSite img {
    max-height: 40px;
}
.headerSite .colLang {
    position: fixed;
    top: 0;
    padding-top: 6px;
    left: 0;
    z-index: 99;
}
.headerSite .colLang a {
    color: var(--color-gris-noir);
    padding: 10px 5px;
    display: inline-block;
    position: relative;
}

.headerSite .colLang a:after  {
    content: "";
    position: absolute;
    width: 100%;
    height: 0;
    transform-origin: 0 0;
    transition: all 0.5s;
    bottom: -10px;
    left: 0;
    background: #FF6B3D;
}

.headerSite .colLang a:hover:after {
    height: 3px;
}

.menuGeneral .lienMenu {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 50px;
    height: 50px;
    border-radius: 10px;
    /*background: var(--orange-hover-logement);*/
    /*background: #d2430e;*/
}

.menuGeneral .lienMenu span,
.menuGeneral .lienMenu:after,
.menuGeneral .lienMenu:before {
    content: "";
    display: block;
    position: absolute;
    top: 25px;
    left: 5px;
    width: 40px;
    height: 3px;
    background: var(--color-gris-noir);
    /*background: #FFFFFF;*/
    transition: all 200ms;
}

.menuGeneral .lienMenu:before {
    top: 15px;
}

.menuGeneral .lienMenu:hover:before {
    top: 15px;
}

.menuGeneral.open .lienMenu span,
.menuGeneral.open .lienMenu:before {
    top: 25px;
    transform: rotate(45deg);
}

.menuGeneral .lienMenu:after {
    top: 35px;
}

.menuGeneral .lienMenu:hover:after {
    top: 35px;
}

.menuGeneral.open .lienMenu:after {
    top: 25px;
    transform: rotate(-45deg);
}

.menuGeneral .nav-list {
    position: absolute;
    top: 75px;
    right: 10px;
    padding: 5px 0;
    list-style: none;
    display: none;
    border-radius: 10px;
    /*border: 1px solid var(--nectar-accent-color);*/
    background: var(--bg-site);
    /*background: #F5F5F5;*/
    color: black;
}

.menuGeneral.open .nav-list {
    display: block;
    border: 1px solid var(--color-footer-gris-dark);
}

.menuGeneral .nav-list a {
    color: var(--color-gris-noir);
    padding: 10px 20px;
    display: block;
    position: relative;
}

.menuGeneral .nav-list a:after  {
    content: "";
    position: absolute;
    width: 100%;
    height: 0;
    transform-origin: 0 0;
    transition: all 0.5s;
    bottom: -10px;
    left: 0;
    background: #FF6B3D;
}

.menuGeneral .nav-list a:hover:after {
    height: 3px;
}

/* ************** fin header ************* */

.blocTitrePage {
    background: #333333;
    color: #ffffff;
    padding-top: 30px;
    padding-bottom: 30px;
}

.blocTitrePage h1 {
    border-left: 3px solid var(--color-orange-hover);
    font-weight: bold;
    padding: 3px 0 3px 30px;
}

.form-inline .form-control {
    display: inline-block;
    width: auto;
}

.ligneGris {
    background: var(--bg-gris);
}
.blocTableau {
    border: 1px solid var(--color-footer-dark);
    border-radius: 5px;
}

.blocFaq .accordion-button.collapsed {
    box-shadow: none;
}
.blocFaq .accordion-item {
    margin-bottom: 5px;
    border: 1px solid var(--bg-gris);
}
.blocFaq .accordion-button {
    background: var(--bg-gris);
}
.blocFaq .accordion-button:before {
    display: inline-block;
    font-family: bootstrap-icons;
    content: "\f4fe";
    margin-right: 5px;
    font-size: 24px;
}
.blocFaq .accordion-button:not(.collapsed):before {
    content: "\f2ea";
}
.blocFaq.ligneGris .accordion-button {
    background: #FFFFFF;
}
.blocFaq [type="button"]:not(:disabled),
.blocFaq [type="reset"]:not(:disabled),
.blocFaq [type="submit"]:not(:disabled),
.blocFaq button:not(:disabled){
    padding: 10px;
}
.blocFaq .accordion-header.titreRubrique .accordion-button {
    font-weight: 500;
    font-size: 17px;
}
.blocFaq .accordion-button:hover,
.blocFaq .accordion-button:focus,
.blocFaq .accordion-button:not(.collapsed) {
    background: var(--color-orange-hover);
    color: #FFFFFF;
    box-shadow: none;
}


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

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

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

.blocContactMessage .messageContent {
    margin: 0;
}

.cadre {
    /*background: #FFFFFF;*/
    /*border: var(--color-orange-hover) solid;*/
    /*border-radius: 10px;*/
    /*!*border-radius: 5px; - refonte*!*/
    /*margin: 20px;*/
    /*padding: 20px;*/
    background: var(--bg-site);
    border: 1px solid var(--bg-site);
    color: var(--color-footer-gris-dark);
    border-radius: 5px;
    margin: 20px;
    padding: 20px;
}

.bg-propo2 .cadre {
    background: var(--color-footer-gris-dark);
    border: 1px solid var(--color-footer-gris-dark);
    color: var(--bg-site);
}

.cadre.cadreSansMarge {
    margin-left: 0;
    margin-right: 0;
}

.cadre.cadreSansPadding {
    padding: 0;
}

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

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

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

.ligne:has( > .blocRadioButtonResa input:checked) {
    border-color: var(--color-orange);
}


/** ************** loader liste documents *************** */
.loading .spinner-border {
    /*color: var(--nectar-accent-color); - refonte*/
    color: var(--orange-logement);
}

.picker__select--month, .picker__select--year {
    padding: 0;
}

.btn {
    border: 1px #b7b7b7 solid;
    font-weight: 500;
    font-size: 16px;
    /*border: 1px solid var(--color-orange);*/
}


.btn-primary {
    background-color: var(--color-orange);
    color: #FFFFFF;
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus,
.btn-primary:focus-visible {
    background-color: var(--color-orange-hover);
    border: 1px #b7b7b7 solid;
}

.btn-liste {
    padding: 2px 10px;
}

.copyright {
    padding: 45px 0 45px;
    font-size: 16px;
    color: var(--bg-site);
    background-color: var(--color-footer-dark);
}

.copyright a,
.bg-danger a {
    color: var(--bg-site);
    font-weight: bold;
}

.copyright a:hover,
.bg-danger a:hover {
    color: var(--color-gris-clair);
}

.PQP-widget--C .PQP-widget__link {
    border-radius: 10px;
    border: 1px solid #666666;
}

/* ****************** Preresa ***************** */
.blocRadioButtonResa input {
    display: none;
}

.blocRadioButtonResa i {
    font-size: 2rem;
    /*color: var(--bg-site);*/
    color: var(--color-footer-gris);
}

.blocRadioButtonResa input:checked + i {
    color: var(--color-orange);
}

.blocCheckButtonResa input {
    display: none;
}

.blocCheckButtonResa label {
    font-size: 1rem;
    background-color: var(--bg-site);
}

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

.blocCheckButtonResa input + label:hover,
.blocCheckButtonResa input + label:active,
.blocCheckButtonResa input + label:focus,
.blocCheckButtonResa input + label:focus-visible {
    background-color: var(--color-orange-hover);
}

.listeDocumentsRequis .file-commentaire {
    font-size: 10px;
    line-height: 12px;
    margin-bottom: 2px;
}

.listeDocumentsRequis label {
    font-weight: bold;
}
/* ********************* fin resa ************************ */

/* ********************** FAQ **************************** */


.accordion-button.collapsed {
    color: #000000;
    /*background-color: var(--color-footer-dark);*/
    box-shadow: inset 0 0 10px #666666;
}

.accordion-button:not(.collapsed) {
    color: #000000;
    background-color: var(--color-faq-clair);
    box-shadow: inset 0 0 10px var(--color-orange-hover);
}

.accordion-button:focus {
    box-shadow: inset 0 0px 15px var(--color-orange-tres-clair);
}

.accordion-button:hover {
    background: var(--color-orange-tres-clair);
    background: var(--color-orange-hover);
}

/*.accordion-collapse {*/
/*    background: #EEEEEE;*/
/*    border: 1px solid #666666;*/
/*}*/
/* ********************** fin FAQ **************************** */

.detailSouhait.open {
    display: flex !important;
}

.detailSouhait > .row {
    border-top: 1px solid #666666;
    margin-top: 5px;
    padding-top: 8px;
}

.bg-propo1 {
    background: var(--color-footer-gris-dark);
    /*background: var(--color-footer-gris);*/
    /*background: var(--color-jaune);*/
    color: var(--bg-site);
    /*color: var(--color-footer-gris-dark);*/
}

.bg-propo2 {
    background: var(--bg-site);
    /*background: var(--color-jaune-clair);*/
    color: var(--color-footer-gris-dark);
    /*color: var(--color-footer-gris);*/
}

.bg-grisclair {
    background: #BBBBBB;
    color: var(--color-footer-gris-dark);
}

.bg-gristresclair {
    background: #EEEEEE;
    color: var(--color-footer-gris-dark);
}

.formInfosPerso .iti {
    display: block;
}

@media (max-width: 770px) {
    .logo {
        width: 40%;
    }

    .cadre {
        margin: 5px;
        padding: 5px;
    }
}

@media (min-width: 992px) {
    .contentSite {
        padding-top: 0;
    }
    .blocTitrePage {
        padding-top: 50px;
        padding-bottom: 50px
    }
    .headerSite {
        position: relative;
        height: 100px;
        padding: 20px 0;
    }
    .headerSite .colLang {
        position: relative;
        top: auto;
        left: auto;
    }

    .menuGeneral .lienMenu {
        display: none;
    }

    .menuGeneral .nav-list {
        display: block;
        position: relative;
        text-align: center;
        top: auto;
        left: auto;
        right: auto;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
    }

    .menuGeneral .nav-list li {
        display: inline-block;
    }

    .menuGeneral .nav-list li i {
        display: none;
    }
}