/***** banner *****/
.banner                             { position: relative; margin-top: 200px;}
.banner .content                    { width: max-content; margin: 0 auto; position: absolute; left: 0; right: 0; top: 60px; text-align: center; z-index: 3;}
.banner .titre_main                 { color: var(--white); font-size: 30px; line-height: 40px;}
.banner .link                       { color: var(--second-color); background-color: var(--white);}
.banner .swiper-slide               { width: 840px;}
.banner img                         { border-radius: 40px; width: 100%; height: auto; display: block;}
.banner .arrownav                   { position: absolute; top: calc(50% - 75px); width: 150px; height: 150px; border-radius: 50%; background: var(--white); z-index: 2; cursor: pointer; display: grid; align-items: center;}
.banner .arrownav_prev              { left: -75px;  justify-content: end; padding-right: 45px;}
.banner .arrownav_prev::before      { content: url(../images/chevron_left.svg); display: block; line-height: 0;}
.banner .arrownav_next              { right: -75px; padding-left: 45px;}
.banner .arrownav_next::before      { content: url(../images/chevron_right.svg); display: block; line-height: 0;}

@media (min-width:1201px) {
.banner .arrownav                   { transition: all ease-in-out 400ms;}
.banner .arrownav:hover             { background-color: var(--main-color);}
.banner .arrownav:hover::before     { filter: brightness(0) invert(1);}
.banner .link:hover                 { background-color: var(--main-color); color: var(--white);}
}
@media (max-width:1200px) {
.banner                             { margin-top: 140px;}
}
@media (max-width:1000px) {
.banner .swiper-slide               { width: 500px;}
.banner .content                    { position: static; width: 85vw; margin: 20px auto;}
.banner .titre_main                 { color: var(--main-color);}
.banner .link                       { background-color: var(--second-color); color: var(--white);}
}
@media (max-width:700px) {
.banner                             { margin-top: 120px;}
.banner .titre_main                 { font-size: 22px; line-height: 32px; margin-bottom: 20px;}
.banner .titre_main br              { display: none;}
.banner .arrownav                   { width: 80px; height: 80px; top: calc(50% - 40px);}
.banner .arrownav_prev              { left: -40px; padding-right: 20px;}
.banner .arrownav_next              { right: -40px; padding-left: 20px;}
.banner .swiper-slide               { width: 76vw;}
.banner img                         { border-radius: 20px;}
}




/***** intro *****/
.intro                              { text-align: center; max-width: 840px; margin: 70px auto 60px;}

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


/***** bloc_grid custom *****/

.circle                             { display: block; position: absolute; border-radius: 50%; width: 47%; aspect-ratio: 1; background: var(--beige);animation: spin 3.8s infinite linear;}
.circle::before                     { content: ""; display: block; position: absolute; inset: -30px; border-radius: 50%; border: 1px dashed var(--second-color);}

@media (max-width:1280px) {
.circle                             { animation-duration: 1s;}
}
@media (max-width:700px) {
.circle::before                     { inset: -20px;}
}
@media (min-width:1000px) {
@keyframes spin {
    0% { transform: rotate(0deg);}

    100% { transform: rotate(360deg);};
}
}



/***** secteurs *****/
.secteurs                           { padding-top: 95px;}
.custom                             { margin-top: 0;}
.custom .photo                      { text-align: right;}
.custom .photo .circle              { display: block; position: absolute; bottom: 18%; right: 19%; border-radius: 50%; width: 47%; aspect-ratio: 1; background: var(--beige);animation: spin 4s infinite linear;}
.custom .photo .circle              { bottom: 18%; right: 19%;}
.custom .photo img:first-of-type    { width: 69%;}
.custom .photo img:last-of-type     { width: 47%; display: inline-block; vertical-align: top; position: relative; z-index: 11; margin-top: -125px;}

@media (max-width:1280px) {
.secteurs                           { padding-top: 40px;}
}
@media (max-width:1000px) {
    .custom .photo img:last-of-type { width: auto; height: 400px; object-fit: cover; }
}
@media (max-width:700px) {
.secteurs                           { padding: 0; margin: 50px 0;}
.secteurs .titre                    { display: none;}
.custom .photo img:first-of-type    { width: 70%; height: 300px; object-fit: cover;}
.custom .photo img:last-of-type     { margin-top: -85px; height: 200px;}

}




/***** collectivites *****/
.collectivites                      { padding: 70px 0 60px; background: var(--beige); border-radius: 60px;}
.collectivites .bloc_grid           { margin: 0;}
.collectivites .photo .circle       { left: 0; right: 0; top: 30px; background: var(--white); margin: auto; width: 64%;}
.collectivites .bloc_grid .photo    { text-align: center; padding-top: 90px;}
.collectivites .bloc_grid .inner    { position: relative;}
.collectivites .bloc_grid .photo img{ max-width: max-content; display: inline-block; vertical-align: top;}
.collectivites .bloc_grid .photo p  { line-height: 1; font-size: 20px; display: flex ; align-items: center; justify-content: center; gap: 10px; margin: 20px 0 0;}

@media (max-width:1200px) {

}
@media (max-width:1000px) {
.collectivites                      { padding: 55px 0 50px;}
.collectivites                      { border-radius: 30px;}
.collectivites .bloc_grid .photo p  { margin-top: 60px; font-size: 12px;}
.collectivites .bloc_grid .photo p img { width: 95px;}
}
@media (max-width:700px) {
.collectivites                      { border-radius: 0;}
.collectivites .bloc_grid           { gap: 45px;}
.collectivites .photo .circle       { top: 20px;}
.collectivites .bloc_grid .photo    { padding-top: 65px;}
.collectivites .bloc_grid .photo p  { margin-top: 15px;}
}



/***** jetables *****/
.jetables                           { margin: 110px 0 65px;}
@media (max-width:1000px) {
.jetables                           { margin: 80px 0;}
}
@media (max-width:700px) {
.jetables                           { margin: 50px 0;}
}




/***** documents *****/
.documents                          { position: relative; padding-top: 150px;}
.documents .titre                   { top: 45px;}

@media (max-width:1280px) {
.documents                          { padding-top: 40px;}
.documents .titre                   { top: 0;}
}
@media (max-width:700px) {
.documents                          { padding: 0;}
.documents .titre                   { margin-bottom: 20px;}
}



/***** logos *****/
.logos 				                { width: auto; left: 50%; transform: translateX(-50%); position: relative; text-align: center; margin: 100px 0; text-align: center; background: var(--beige); padding: 100px 0 110px; border-radius: 60px;}
.logos .titre_main                  { margin-bottom: 60px;}
.logos .link                        { margin-top: 50px;}
.logos .item                        { display: flex; align-items: center; justify-content: center;}
.logos .item img                    { object-fit: contain; border-radius: 10px;}
.logos .row 			            { width: auto; display: flex; align-items: center; gap: 20px;}
.logos .row>div		                { width: auto; display: flex; align-items: center; animation: scroll_logos 80s linear infinite; gap: 20px;}

@keyframes scroll_logos {
0%								    { transform: translate(0, 0);}
100% 							    { transform: translate(-100%, 0);}
}
@media (max-width:1000px) {
.logos                              { margin: 80px 0; padding: 70px 0 80px; border-radius: 30px;}
.logos .titre_main                  { margin-bottom: 40px;}
}
@media (max-width:700px) {
.logos                              { margin: 50px 0; padding: 40px 0 60px;}
.logos .row>div,
.logos .row                         { gap: 10px;}
.logos .item img                    { border-radius: 5px;}
.logos .titre_main                  { margin-bottom: 25px;}
.logos .titre                       { display: none;}
.logos .link                        { margin-top: 30px;}
}
@media (max-width:400px) {
    .logos .titre_main br             { display: none;}
}



/***** apropos *****/
.apropos                            { grid-template-columns: auto 40%;}
.apropos .table_plus                { margin-top: 45px;}
.apropos .texte>p                   { margin-bottom: 0;}
.apropos .photo .experience         { width: auto; position: absolute; z-index: 11; top: 40px; right: 40px;}

@media (max-width:1000px) {
.apropos                            { grid-template-columns: 1fr;}
}
@media (max-width:700px) {
.apropos .photo .experience         { width: 100px; height: auto; top: 30px; right: 30px;}
}




/***** moving galerie *****/
.moving_galerie 				    { width: auto; position: relative; text-align: center; margin: 100px 0 120px; overflow: hidden;}
.moving_galerie .row 			    { width: auto; display: flex; align-items: center; gap: 20px;}
.moving_galerie .row .item 		    { width: auto; display: flex; align-items: center; animation: scroll_gallery 80s linear infinite; gap: 20px;}
.moving_galerie .row .item img 	    { width: auto; height: 480px; display: block; margin: 0 auto; transition: all 300ms ease-in-out; border-radius: 40px;}

@keyframes scroll_gallery {
0%								    { transform: translate(0, 0);}
100% 							    { transform: translate(-100%, 0); }
}
@media (max-width:1000px) {
.moving_galerie                     { margin: 80px 0;}
}
@media (max-width:700px) {
.moving_galerie 				    { margin: 50px 0;}
.moving_galerie .row                { gap: 10px;}
.moving_galerie .row .item          { gap: 10px;}
.moving_galerie .row .item img      { width: 240px; object-fit: cover; height: 320px; border-radius: 20px;}
}