/***** Created by : Louna Bordet *********************/

@import url('/assets/global/css/fonts/montserrat.css');
@import url('/assets/global/css/fonts/oswald.css');

body {
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
}
.rgpd {
    font-size:0.75em;
    text-align: justify;
    padding-right:15px;
    padding-left: 15px;
    line-height:1.2;
}
/***********************************************************HEADER LOGO *******************************************/
header {
    color:#000000;
    min-height: 70px;
}

header img{
    max-width: 330px;
    padding: 22px;
    width: 100%;
}
a {
    color: #fff;
    text-decoration: underline;
}
a:hover {
    color: #fff;
    text-decoration: none;
}
.responsive {
    display:none;
}
.desktop {
    display:block;
}
/*********************************************************** OFFRE *******************************************/



section.offre {
    padding:0px 0 60px 0;
    background-image: url(/assets/2023-06-logement-securite/img/bgd.jpg);
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    min-height: 700px;
    position:relative;
}
.accroche img{
    width: 55%;
    padding-top: 145px;
}



/******************************************* FORMULAIRE *************************************************************/
.formulaire{
    margin-top: -82px;
}
.right-form{
    border-radius: 0 30px 0 0;
    text-align: center;
}

.title-form {
    font-family: 'Oswald', sans-serif;
    padding: 18px 25px 37px;
    text-align: center;
    text-transform: uppercase;
    font-size: 20px;
    line-height: 1.2;
    color: #ffffff;
    font-weight: bold;
    background-color: #78c4ab;
    clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 60% 80%, 50% 100%, 40% 80%, 0 80%);
}

.form{
    background-color: #000000b3;
    padding: 55px 25px 20px;
    color: white;
    margin-top: -27px;
}

.btn-default, .form-control {
    border-radius:6px;
    border-color:#dee0e6;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.form-control {
    color: black;
    display: block;
    width: 100%;
    height: 38px;
    padding: 12px 20px;
    font-size: 14px;
    line-height: 1.2;
    background-color: #ececec;
    border-radius: 0;
    border: none;
    outline: none;
    padding-bottom: 10px;
    font-weight: bold;
}

.form-control:placeholder {
    font-weight:bold;
}
.form-control[disabled]
{
    background-color: #fff;
}


.btn-default {
    background-color:  #fff;
    border-radius: 0;
    border:none;
    border-bottom: 1px solid #0a4e7c;
    outline: none;
    padding-bottom: 10px;
}


.form-control::placeholder, .bootstrap-select > .dropdown-toggle.bs-placeholder {
    color:#7c7c7c;
}

label{
    font-weight: 400;
}

.label {
    background-color: #ececec;
    text-align: center;
    color:#000000;
    display: block;
    /*    width: 140px;*/
    padding: 20px 10px;
    margin: -15px 5px 0 5px;
    font-size: 14px;
    border-radius: 0;
    white-space: normal;
    line-height:1.2;
}

.label:active, .label:hover, .label:focus, .label.clicked  {
    background: linear-gradient(20deg, rgba(194,39,169,1) 0%, rgba(255,80,157,1) 32%, rgba(255,158,143,1) 98%);
    color: #fff;
}
/*.radio-label-type-maison {vertical-align: middle;}
.radio-label-type-maison span.label:before {content:url(/assets/2023-06-logement-securite/img/habitation_funnel.png);margin-right:15px;}
.radio-label-type-maison .house:hover {content:url(/assets/2023-06-logement-securite/img/white_habitation_funnel.png)}*/

.btn-participer,.btn-reservez {
    font-family: 'Oswald', sans-serif;
    width: 90%;
    padding: 20px 0;
    background: rgb(38,155,186);
    background: linear-gradient(40deg, rgba(38,155,186,1) 0%, rgba(87,219,196,1) 100%);
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    border: none;
    border-radius: 0;
    text-transform: uppercase;
    margin-bottom: 10px;
}


.name, .cp{
    padding-right: 5px
}
.adresseH{
    margin-bottom: 0
}

.custom-control-label{
    font-weight: 100;
    font-size: 11px;
    float: right;
    width: 90%
}

textarea.form-control {
    height:90px;
}
.bootstrap-select.btn-group.show-tick .dropdown-menu li a span.text {
    font-size: 10px;
}
.dropdown-menu > li > a {
    padding: 3px 5px;
}

.accroche2 span{
    font-size: 21px
}

.color {
    color:#2e2e2e;
    text-decoration: underline;
}

.checkbox-label{
    display: flex;
    align-items: flex-start;
}
.checkbox-label span{
    background-color: transparent;
    color: white;
    text-align: left;
    font-weight: 300;
    font-size: 10px;
    padding: 20px 0 0 0;
}

.checkbox-label span:hover{
    background: transparent;
}

.form-control::placeholder{
    color : black;
}

.img_res{
    display: none;
}

/****ANNONCEURS PARTENAIRES ****/
#annonceurs.annonceurs {
    display:none;
    width:300px;
    background: #fff;
    padding:20px;
    text-align: center;
    z-index:99;
}
.annonceurs table td {padding:5px;}
.annonceurs table td a{color:#000;}
.annonceurs img {width:80%;}

/************************************************************* SECTION **********************************/
.line {
    padding:50px 0 50px 0;
    background-image: url(/assets/2023-06-logement-securite/img/bgd_rea.jpg);
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
}

.line p{
    margin: 35px 0;
}

.line2 {
    padding:50px 0 20px 0;
    background-image: url(/assets/2023-06-logement-securite/img/bgd_produits.jpg);
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    min-height: 510px;
    position:relative;
}

h2 {
    font-family: 'Oswald', sans-serif;
    font-size:36px;
    font-weight:bold;
    margin-bottom:0;
    color: #269bba;
    text-transform: uppercase;
}
h3 {
    font-size:24px;
    color:#ff0033;
    margin-top:0;
    margin-bottom:30px;
}
.line .bloc {
    padding:30px;
    background: #ececec;
    border-radius:0 25px 25px 25px;
    min-height:540px;
}
h4 {
    font-size:18px;
    font-weight:bold;
    text-transform: uppercase;
}
.ico {
    text-align: center;
}
.ico img {
    width:70px;
}

.produits {
    color:#000000;
    margin: 35px 0;
    text-align: center;
}

.produits img{
    margin-bottom: 25px;
}

section.line p, section.line ul  {
    font-size:16px;
    color:#1f1f1f;
    line-height: 1.3;
}

.btn-bottom .btn-participer2 {
    font-family: 'Oswald', sans-serif;
    padding: 15px;
    background: rgb(38,155,186);
    background: linear-gradient(40deg, rgba(38,155,186,1) 0%, rgba(87,219,196,1) 100%);
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    border: none;
    border-radius: 0;
    text-transform: uppercase;
    margin-bottom: 10px;
    display: block;
    text-align: center;
    margin: auto;
    width: 55%;
    max-width: 315px;
    text-decoration: none;
}

.btn-participer2:hover {
    text-decoration: none;
}


.mentions {
    background-color: #000000b3;
    font-size:10px;
    line-height: 1.2em;
    text-align: justify;
    font-weight: 300;
    color:#ffffff;
    padding:0px 25px 20px 25px;
    border-bottom: 8px solid rgb(38,155,186);
    border-color: linear-gradient(40deg, rgba(38,155,186,1) 0%, rgba(87,219,196,1) 100%);
}

.img_icone{
    max-width: 500px;
    display: block;
    margin: auto;
    margin-bottom: 30px;
    width: 100%;
}

.img_camera{
    width : 84%;
}

.btn_avis{
    margin : 80px auto 30px;
}
/********************************************************* RADIO BUTTONS ****************************************/

.button {
    /*  float: left;*/
    margin: 0 5px 0 0;
    /*width: 100px;
    height: 40px;*/
    position: relative;
}

.button label,
.button input {
    /*display: block;
    position: absolute;*/
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.button input[type="radio"] {
    opacity: 0.011;
    z-index: 100;
}

.button input[type="radio"]:checked + label {
    background: #20b8be;
    border-radius: 4px;
}

.button label {
    text-align: left;
    cursor: pointer;
    z-index: 90;
}


/********************************************************* FOOTER ****************************************/
footer {
    padding:60px 0px 60px 0px;
    background-color: #000000;
    color:#fff;
}
footer .ml {
    font-size:0.85em;
    font-weight:400;
    text-align: justify;
}

/********************************************************* RESPONSIVE ****************************************/
.pin-number{
    width:60px;
    height:60px;
    color:#269bba
}

@media (max-width: 1199px){
    .pin-number{
        width:50px;
        height:50px
    }
    .img_camera{
        width : 90%;
    }

    .accroche img{
        width: 48%;
        padding-top: 145px;
    }
    .line .bloc {
        min-height: 400px;
        margin-bottom:30px;
    }
    .btn-bottom .btn-participer2 {
        width: 50%;
        margin-top: 0px;
    }
    .line .choice {
        margin-bottom:25px;
    }
    .line .choice img {
        width:50%;
    }
}

@media (max-width: 990px) {
    .pin-number{
        width:50px;
        height:50px
    }
    .img_res{
        display : block;
        max-width: 500px;
        margin: auto;
    }
    .header img{
        width: 75%;
    }
    .formulaire{
        margin-top: 0px;
        padding : 0;
    }

    section.offre {
        background-image: none;
        padding-bottom: 0 !important;
    }
    .responsive {
        display:block;
        padding: 0;
    }
    .responsive img {
        width:100%;
    }
    .desktop {
        display:none;
    }
    .right-form {
        margin-top: 0px;
        background: #efefef;
        border-radius:0 0 30px 30px;
    }
    .line h2{
        margin-top: 50px;
    }
    h2 {
        font-size: 28px;
    }
    h3 {
        font-size: 21px;
    }
    .line {
        padding: 50px 0;
    }
    .line .bloc {
        min-height: 300px;
    }
    .line .choice {
        min-height:100px;
    }
    .line .choice.padd100 {
        padding:25px 25px 25px 25px;
        min-height:50px;
    }
    .line .choice img {
        width: 30%;
    }
    .line2 {
        padding: 50px 0 50px 0;
    }
    .btn-bottom .btn-participer2 {
        width: 100%;
        margin-top: 0px;
    }
    .recapitulatif section.offre {
        padding: 0px 0 20px 0;
        min-height: 200px;
    }
}

@media (max-width: 768px) {
    .line2 {
        background-position: left top;
    }
}

/**********/

label{
    display:block;
}
label.radio-label{
    display:inline-block;
}

.deux .radio-label{
    width:50%;
}
.trois .radio-label{
    width:33.3333%;
}

.cinq .radio-label{
    width:20%;
}
.modifPhoneCm{
    color:#ccc
}
.cm-head{
    font-size:2em
}