/***** banner *****/
banner                 { width: 100%; height: 100vh; display: block;}
banner picture img     { width: 100%; height: 100vh; object-fit: cover; display: block;}

banner:before          { content: ''; width: 100%; height: 720px; z-index: 10; position: absolute; left: 0; top: 0; background: linear-gradient(180deg, rgba(21,20,42,1) 0%, rgba(255,255,255,0) 50%);}

@media (max-width:600px) {
    banner,
    banner picture img { height: 80vh;}
}

/***** bloc *****/
.bloc_texte        { width: 90vw; max-width: 1200px; margin: var(--marginBloc); }

.bloc_grid-immo    { width: 90vw; max-width: 1200px; margin: var(--marginBloc); align-items: center; display: grid; grid-template-columns: 1fr 200px; grid-gap: 0 100px;}
.bloc_grid-immo .texte h1 { margin-bottom: 25px;}


.bloc_atouts         { width: 90vw; max-width: 1200px; margin: var(--marginBloc); padding: 60px 0 0 0;}
.bloc_atouts:before  { content: ""; position: absolute; top: 0; left: 75%; width: 200vw; height: 380px; background: var(--colorBody); z-index: -1;}
.bloc_atouts .slider           { width: 100vw; margin: 30px 0 60px 0;}
.bloc_atouts .slider .item     { margin-right: 30px;}
.bloc_atouts .slider .item .hidden { position: absolute; background: rgba(21, 20, 42, 0.7); color: #ffffff; z-index: 10; width: 100%; height: 100%; display: flex; align-items: center;  padding: 20px 60px; opacity: 0; visibility: hidden; transition: all 300ms ease-in-out;}
.bloc_atouts .slider img       { max-width: 100%; height: auto;}
.bloc_atouts .slider span      { border-radius: 50%; position: absolute; top: 30px; right: 30px; background: #ffffff; color: var(--colorBody); z-index: 1; width: 150px; height: 150px; display: flex; align-items: center; text-align: center; justify-content: center; opacity: 1; visibility: visible;  transition: all 300ms ease-in-out;}
.bloc_atouts .slider strong  { padding: 30px 30px 0 30px; font-weight: normal; display: block; color: var(--colorBodyLink)}
.bloc_atouts .slider strong:after   { content: ''; width: 13px; height: 13px; background: url("../images/arrow-top.svg") 0 50% no-repeat; position: absolute; right: 30px; top: 38px;}

.arrow-atouts     { position: absolute; right: 0; top: 60px; display: flex; column-gap: 10px;}


.bloc_agence            { padding-top: 20px;}
.bloc_agence:before     { content: ""; position: absolute; top: 0; left: -50%; width: 200vw; height: 600px; background: var(--colorBody); z-index: -1;}

.bloc_agence .slider img { margin:0 15px; height: 480px; width: auto;}

.bloc_grid-4                  { display: grid; grid-template-columns: repeat(5,1fr); grid-gap: 0 20px; margin: var(--marginBloc);}
.bloc_grid-4.services a       { border-radius: 5px;  background-color: var(--colorBody); padding: 45px 40px; color: #ffffff; display: flex; flex-direction: column; text-align: center;}
.bloc_grid-4.services a img   { width: auto; height: 62px; margin-bottom: 30px; transition: all 300ms ease-in-out;}
.bloc_grid-4.services a:after { content: ''; width: 13px; height: 13px; background: url("../images/arrow-top.svg") 0 50% no-repeat; position: absolute; right: 20px; top: 20px;}

@media (min-width:1201px) {
    .bloc_atouts .slider .item:hover strong:after   { right: 20px; top: 28px;}
    .bloc_atouts .slider .item:hover .hidden        { opacity: 1; visibility: visible;}
    .bloc_atouts .slider .item:hover span           { opacity: 0; visibility: hidden;}

    .bloc_grid-4.services a:hover:after   { right: 10px; top: 10px;}
    .bloc_grid-4.services a:hover img     { opacity: 0.4;}    
}

@media (max-width:1366px) {
    .bloc_grid-4 { display: flex; grid-gap: 20px 20px; flex-direction: row; flex-wrap: wrap; justify-content: center;}
}

@media (max-width:1200px) {
    .bloc_grid-immo { grid-gap: 40px;}
    .bloc_grid-immo img { width: 150px; height: auto;}
    .bloc_grid-4.services a { padding: 25px 20px;}
}

@media (max-width:1000px) {
    .bloc_grid-4 { grid-gap: 10px 10px;}
    .bloc_atouts:before  { left: 80%;}
}

@media (max-width:800px) {
    .bloc_grid-4                    { display: block;}
    .bloc_grid-4.services a         { text-align: left; margin: 10px 0; padding: 20px 20px;}
    .bloc_grid-4.services a img     { display: none;}
    .bloc_grid-4.services a:after   { top: 50%; transform: translateY(-50%);}

    .bloc_atouts:before             { content: none;}
    .bloc_atouts .slider            { display: grid; grid-template-columns: repeat(6,1fr); grid-gap: 0 20px; width: calc(100vw - 5vw); overflow-x: auto; padding-bottom: 40px; }
    .bloc_atouts .slider .item      { width: 500px; margin-right: 0;}
}

@media (max-width:600px) {
    .bloc_atouts    { padding: 30px 0 0 0;}
    .bloc_grid-immo { grid-template-columns: 1fr; }
    .bloc_grid-immo .photo { display: none;}
    .bloc_atouts .slider .item      { width: 335px; }
    .bloc_atouts .slider strong { padding-left: 0; padding-right: 20px;}
    .bloc_atouts .slider strong:after { right: 10px;  }
}

/***** Animation des biens *****/
.slick-list { overflow: inherit; }

/***** Avis *****/
.bloc-avis              { max-width: 1620px; width: 90vw; display: grid; grid-template-columns: repeat(4,1fr); grid-gap: 0 60px; margin: var(--marginBloc);  }
.bloc-avis .item.score  { background: #15142a; color: #ffffff; border-radius: 5px; align-items: center; text-align: center; display: flex; justify-content: center;}
.bloc-avis .item.avis        { padding: 20px; background: #f6f6f6; border-radius: 5px;}
.bloc-avis .item.avis .note  { margin-bottom: 20px;}
.bloc-avis a.link            { color: var(--colorBodyLink); background: #ffffff; margin-top: 20px; padding: 10px 15px; border-radius: 5px; display: block;}

.google { max-width: 190px; height: auto; margin-bottom: 10px;}

@media (min-width:1201px) {
        .bloc-avis a.link:hover     { color: #ffffff; background: var(--colorBodyLink);}
}

@media (max-width:1366px) {
    .bloc-avis {grid-gap: 0 20px; width: calc(100vw - 5vw); margin-left: 5vw; overflow-x: auto;  padding-bottom: 40px; } 
    .bloc-avis .item.avis, 
    .bloc-avis .item.score { width: 335px;}
}