/***** popup *****/
.overflow                       { overflow: hidden;}
.popup                          { position: fixed; z-index: 999; top: 0; left: 0; width: 100vw; height: 100vh; display: grid; align-items: center; justify-content: center; background: rgba(0, 120, 190, 0.8); padding: 20px;}
.popup .bg_close                { position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 5;}
.popup .close                   { width: 30px; height: 30px; background: url(../images/close.svg) center no-repeat; position: absolute; right: 30px; top: 30px; display: block; cursor: pointer;}
.popup_content                  { width: 100%; max-width: 720px; border-radius: 30px; padding: 90px 65px 65px; position: relative; z-index: 10; color: var(--main-color); text-align: center; background-color: var(--white);}
.popup_content p                { margin-bottom: 10px;}
.popup_content p span           { font: 500 20px/30px var(--font-main); display: block;}
.popup_content .link            { margin-top: 20px;}

@media (max-width: 700px) {
.popup .close                   { top: 20px; right: 20px;}
.popup_content                  { border-radius: 10px; padding: 80px 20px 30px;}
}

/***** home moving *****/
.moving { margin-top: 44px;}

/***** banner *****/
.banner                         { position: relative; min-height: 700px; padding-top: 230px;  z-index: 0;}
.banner .note                   { width: 80px; height: 80px; border-radius: 5px 0 0 5px; background: url(../images/etoile_blanc.svg) center 15px no-repeat var(--third-color); position: absolute; right: 0; bottom: 28%; color: var(--white); padding-top: 45px; text-align: center;}
.banner .cloud                  { position: absolute; right: -115px; top: 65px; animation: moveCloud 50s linear infinite alternate; }
.banner .dest                   { position: absolute; right: 15px; top: -40px;}
.banner .grid                   { display: grid; grid-template-columns: 1fr 1fr; align-items: center;}
.banner .photo                  { position: relative; max-width: 400px; margin: 0 auto;}
.banner .titre_main             { margin-bottom: 15px;}
.banner .photo .titre           { position: absolute; top: 35px; left: 45px; transform: rotate(-20deg); padding-right: 80px; padding-bottom: 10px; background: url(../images/arrow.svg) right bottom 5px no-repeat; width: max-content; text-align: center;}
.banner .photo img              { border-radius: 30px; width: 100%; height: auto; display: block;}
.banner .ul_list                { margin: 10px 0;}
.banner .ul_list li             { font-weight: 500; font-size: 18px;}
.banner .devis                  { margin-top: 20px;}

@media (min-width: 1201px) {
.banner .note:hover             { background-color: var(--main-color);}
}
@media (max-width: 1000px) {
.banner .ul_list,
.banner .dest                   { display: none;}
.banner .grid                   { grid-template-columns: 1fr; padding-bottom: 90px; position: relative; gap: 30px;}
.banner .texte                  { text-align: center;}
.banner .devis                  { position: absolute; bottom: 0; width: 100%; margin: auto; left: 0; right: 0; max-width: 420px;}
}
@media (max-width: 700px) {
.banner                         { background: url(../images/cloud_banner_mobile.svg) left calc(50% + 30px) bottom 155px no-repeat; padding-top: 190px;}
.banner .cloud                  { display: none;}
.banner .photo .titre           { padding-bottom: 30px; transform: rotate(-13deg);}
.banner .note                   { width: 60px; height: 60px; font-size: 12px; padding-top: 30px; background-size: 20px; bottom: 270px;}
}
@media (max-width: 500px) {
    .banner .photo img { max-width: 300px;}
}

/***** intro *****/
.intro                          { padding: 90px 0; position: relative;}
.intro .cloud                   { position: absolute; right: 0; animation: moveCloud 50s linear infinite alternate;}
.intro .chapo                   { margin-bottom: 0;}

@media (max-width: 700px) {
.intro                          { display: none;}
}


/***** apropos *****/
.apropos                                    { position: relative; margin: 210px 0 100px;}
.apropos .cloud                             { position: absolute;}
.apropos .cloud1                            { top: 0; left: 0; animation: moveCloud 50s linear infinite alternate;}
.apropos .cloud2                            { top: 310px; right: 0;animation: moveCloud 50s linear infinite alternate; animation-delay: 600ms;}
.apropos .texte .link                       { margin-right: 7px; margin-bottom: 10px;}
.apropos .texte .titre_main                 { margin-bottom: 30px;}
.apropos .photo                             { text-align: right;}
.apropos .photo .img:first-of-type          { width: 80%; position: relative;}
.apropos .photo .img:first-of-type .titre   { position: absolute; right: -50px; top: -110px; padding-bottom: 95px; background: url(../images/arrow_vertical.svg) center bottom no-repeat; z-index: 20; text-align: center; padding-left: 30px;}
.apropos .photo .img:first-of-type .titre span  { transform: rotate(10deg); display: block;}
.apropos .photo .img:last-of-type           { width: 53%; display: inline-block; vertical-align: top; position: relative; z-index: 11; margin-top: -100px;}
.apropos .photo .img:last-of-type .titre    { position: absolute; right: calc(100% + 15px); bottom: 30px; width: max-content; padding-bottom: 55px; background: url(../images/arrow_2.svg) right 20px bottom no-repeat; z-index: 106; text-align: center;}
.apropos .photo .img:last-of-type .titre span   { transform: rotate(-15deg); display: block;}

.links  { margin-top: 35px;}

@media (max-width:1200px) {
.bloc_grid.apropos                          { grid-template-columns: 1fr;}
.bloc_grid.apropos .photo                   { max-width: 700px; margin: 0 auto;}
}
@media (max-width:1000px) {
.apropos                                    { margin: 70px 0;}
.apropos .photo .img .titre                 { display: none;}
}
@media (max-width:700px) {
.apropos                                    { margin: 45px 0 50px;}
.apropos .sous_titre br,
.apropos .photo,
.apropos .cloud                             { display: none;}
.apropos .texte .link                       { display: block; margin-right: 0;}
}



/***** show_hide *****/
.show_hide .cloud                          { position: absolute; top: 195px ; left: -575px; z-index: -1; animation: moveCloud 50s linear infinite alternate;}
.show_hide .dest                           { position: absolute; top: 20px; left: -550px; z-index: -1;}

@media (max-width:700px) {
.show_hide .dest,
.show_hide .cloud                          { display: none;}
}


/***** post *****/
.post                                       { margin: 120px 0; position: relative; z-index: 1;}
.post .slider                               { margin-top: 30px;}
.post .item img                             { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 30px;}

@media (min-width:1000px) {
.post .swiper-wrapper                       { display: grid; grid-template-columns: 1fr 27.6% 1fr; gap: 25px;}
}
@media (max-width:1000px) {
.post                                       { margin: 70px 0;}
.post .slider                               { overflow: visible;}
.post .item                                 { width: 70%;}
.post .item_s                               { width: 56%;}
}
@media (max-width:700px) {
.post                                       { margin: 30px 0;}
.post .item                                 { width: 80%;}
.post .item_s                               { width: 65%;}
.post .item img                             { border-radius: 10px;}
}




/***** avis *****/
.avis                                   { text-align: center; margin: 90px 0 60px;}
.avis .titre                            { padding-bottom: 70px; background: url(../images/arrow_3.svg) center bottom no-repeat; position: absolute; right: 0; top: -75px; z-index: 2;}
.avis .swiper                           { margin-top: 30px;}
.avis .swiper-slide                     { height: auto; text-align: left;}
.avis .item                             { background: var(--white); padding: 40px; border-radius: 30px;}
.avis .item a                           { color: var(--third-color);}
.avis .date                             { color: var(--gray); font-size: 14px;}
.avis .note   						    { line-height: 0; letter-spacing: 0; font-size: 0; margin: 10px 0;}
.avis .note img 					    { display: inline-block; height: auto; margin-right: 10px;}
.avis .note img:last-child 			    { margin-right: 0;}
.avis .link                             { margin-top: 50px;}

@media (max-width: 1000px) {
.avis                                   { margin: 70px 0 60px; text-align: left;}
.avis .titre                            { display: none;}
.avis .swiper                           { overflow: visible;}
}
@media (max-width: 700px) {
.avis                                   { margin: 0 0 50px;}
.avis .item                             { width: 75vw; border-radius: 10px; padding: 45px 30px 35px;}
.avis .date                             { font-size: 12px;}
.avis .link                             { margin-top: 30px;}
}

.juicer-feed.modern li.feed-item { padding: 0; border-radius: 10px; overflow: hidden;}