@media (min-width: 1000px) {
.shape                                  { position: relative;}
.shape::after                           { content: ""; display: block; position: absolute; width: 1715px; height: 1715px; background: var(--grey); transform: rotate(-45deg); left: 67%; top: 52%; transform-origin: left top;}
}



/***** banner *****/
.services                               { padding-top: 180px;}
.services .wrapper                      { text-align: center; z-index: 2;}
.services .titre_main                   { margin-bottom: 60px; font-size: 40px; line-height: 50px;}
.services .item                         { width: 480px; position: relative; border-radius: 20px; overflow: hidden;}
.services .item::after                  { content: ""; display: block; position: absolute; left: 0; bottom: 0; width: 100%; background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.6)); height: 40%;}
.services .item .sous_titre             { color: var(--white); display: block;}
.services .item img                     { width: 100%; height: auto; display: block;}
.services .item .hide                   { position: absolute; top: 0; left: 0; z-index: 2; width: 100%; height: 100%; transition: all ease-in-out 400ms; background: rgba(0,0,0,0.5); display: grid; justify-content: center; align-items: center; padding: 40px; color: var(--white); opacity: 0;}
.services .item .hide .sous_titre       { color: var(--white); margin-bottom: 5px;}
.services .item>.sous_titre             { position: absolute; left: 0; width: 100%; bottom: 30px; left: 0; padding: 0 30px; margin-bottom: 0; transition: all ease-in-out 400ms; z-index: 2;}
.services .item .plus                   { margin-top: 20px;}
.services .services__arrow              { width: 74px; height: 74px; background-position: center; background-repeat: no-repeat; position: absolute; top: 50%; margin-top: -37px; z-index: 5; cursor: pointer; border-radius: 5px;}
.services .prev                         { background-image: url(../images/arrow_prev.svg); left: 0;}
.services .next                         { background-image: url(../images/arrow_next.svg); right: 0;}


@media (min-width:1201px) {
.services .item:hover .hide             { opacity: 1;}
.services .item:hover::after,
.services .item:hover>.sous_titre       { opacity: 0;}
.services .services__arrow              { transition: all ease-in-out 400ms;}
.services .services__arrow:hover        { background-color: var(--black);}
}
@media (max-width:1200px) {
.services .item                         { width: 360px;}
.services .item .hide                   { opacity: 1; background: none;}
.services .item .hide p,
.services .item .hide .sous_titre       { display: none;}
.services .item .plus                   { opacity: 0; width: 100%; height: 100%; position: absolute; top: 0; left: 0; margin: 0;}
.services .item>.sous_titre             { background: var(--black); bottom: 0; min-height: 80px; display: grid; justify-content: center; align-items: center; text-align: center; line-height: 30px;}
}
@media (max-width:1000px) {
.services .item                         { width: 300px;}
}
@media (max-width:700px) {
.services                               { padding-top: 150px;}
.services .titre_main                   { margin-bottom: 30px; font-size: 25px; line-height: 32px;}
.services .item                         { border-radius: 10px;}
.services .item>.sous_titre             { min-height: 60px;}
.services .slider                       { padding: 0 7.5vw; overflow: visible;}
.services .services__arrow              { display: none;}
.services .scrollbar                    { height: 5px; background-color: var(--black); margin-top: 30px;}
.services .swiper-scrollbar-drag        { height: 5px; background-color: var(--second-color); border-radius: 0;}
}


/***** intro *****/
.intro                                  { margin: 100px 0; display: grid; grid-template-columns: 1fr 1fr; align-items: start; padding: 20px 0 0; background: url(../images/favicon.svg) 200px top no-repeat; min-height: 270px;}
.intro .titre_main                      { padding-right: 60px;}
.intro .chapo                           { font: 700 20px/34px "Barlow"; margin-bottom: 25px;}

@media (max-width:1000px) {
.intro                                  { margin: 50px 0; grid-template-columns: 1fr; background: none; padding: 0; min-height: 0; margin: 70px 0;}
.intro .titre_main                      { padding-right: 0;}
}
@media (max-width:700px) {
.intro                                  { display: none;}
}



/***** apropos *****/
.apropos                                { position: relative; margin: 130px 0 0;}
.apropos .photo::after                  { margin-left: -1330px;}
.apropos .texte                         { max-width: 600px;}
.apropos .texte li                      { font-weight: 500; font-size: 18px;}
.quote                                  { line-height: 35px; font-style: italic; padding: 70px 0 0 60px; background: url(../images/quote.svg) left top no-repeat; margin-top: -30px; position: relative; z-index: 10; color: var(--black);}

@media (max-width:1000px) {
.apropos                                { margin: 80px 0;}
.quote                                  { display: none;}
}
@media (max-width:700px) {
.apropos                                { margin: 50px 0;}
.apropos .texte li                      { font-size: 15px; padding-left: 35px; font-weight: 400;}
}