/****************content-banner*services*****************/

.services-page {    
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        align-items: center;   
        gap: 4rem;
        background: repeating-linear-gradient(to right, rgb(255, 255, 252, 0.7), rgb(189, 179, 165, 1));
        /*background-color: #fff;*/
}
.services-page .content{ 
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        align-items: center;   
    }
.services-page .content .text{ 
        position: relative;
        flex:1 1 41rem;
        z-index: 1;
}
.services-page .content .text h1{
        font-family: "Montserrat", sans-serif;
        color: var(--peru);
        font-weight: 300;
        font-size:4.2rem;
        margin-bottom:2rem;
}
.services-page .content .text p{
        font-family: "Open Sans", sans-serif;
        font-size: 1.8rem;
        font-weight: 300;
        line-height: 2; 
        margin-bottom: 1rem;
        color: var(--light-black);
        padding: 1rem 0;
        line-height: 2;   
    }
.services-page .content .text p strong {
        color: coral; 
}
.services-page .content .text p strong em{
        color: coral; 
}
.content .text ul{
        list-style-type: none;   
}
.services-page .content .image{
        margin-top: 4rem;
        flex:1 1 41rem;
        position: relative;
        margin-top: -25rem;
        margin-left: 2rem;
        background-color: transparent;
        z-index: 2;
}
.services-page .content .image::after{
        content: "";
        width: 100%;
        height:100%;   
        background-color: rgb(144, 146, 146);    
        position: absolute;
        top: -20px;
        left: -20px;
        z-index: -1;
}
.services-page .content .image img{
        width: 100%;
        border-left:2px solid var(--peru) ;  
        border-bottom:2px solid var(--peru) ;
}

/******************************SECTION ce que nous faisons*services**********/
.propositions{
        padding-top: 4rem;
        margin: 0;
        padding: 0;
        display:flex;
        align-items:center;
        flex-direction: column;
        text-align: center;
        height:auto;
}
.propositions h1{
        font-family: "Montserrat", sans-serif;
        color: var(--peru);
        font-weight: 300;
        font-size:4.2rem;
        margin-bottom:4rem;
        margin-top: 4rem;
}
.propositions .grid-container {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        align-items: center;
        gap: 1rem;
        padding-left: 5rem;
        padding-bottom: 2rem; 
    }
.flip-card {
        perspective: 1000px;
        width: 30%;
        height: 55rem;
        background: #52224c;
        border-radius: 12px;
        }
.flip-card-inner {
        width: 100%;
        height: 55rem;
        text-align: center;
        transition: transform 0.6s ease;
        transform-style: preserve-3d;
    }
.flip-card:hover .flip-card-inner {
        transform: rotateY(180deg);
    }
.flip-card-front {
        position: absolute;
        width: 100%;
        height: 100%;
        backface-visibility: hidden;
        border-radius: 12px;
        box-shadow: 0 8px 20px rgba(0,0,0,0.2);
        padding: 20px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
.flip-card-front .accroche-front{
        border-top:1px solid white;
        padding: 1rem;
        text-align:left;
        display: flex;
        flex-direction: column;
    }
.flip-card-back{  
        position: absolute;
        width: 100%;
        height: 100%;
        backface-visibility: hidden;
        border-radius: 12px;
        box-shadow: 0 8px 20px rgba(0,0,0,0.2);
        padding: 20px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
.flip-card-front {
        /*background-color: #2c3e50;*/
        background-color: #222;
        color: white;    
    }
.flip-card-front h2{
        color: var(--peru);
        font-size: 2.5rem;
        margin-bottom: 3rem;
    }
.flip-card-front span{
        font-size: 1.8rem;
        padding: .4rem 0;
        line-height: 1.5;
    }
.flip-card-back {
        background-color: #ecf0f1;
        color: #2c3e50;
        transform: rotateY(180deg);
    }
.flip-card-back h3{
        font-size:1.8rem;
        margin: 1rem 0 0.5rem;
        text-align: start;
    }
.flip-card-back .accroche{
        margin-top: 1.5rem;
        font-size:1.6rem;
        font-weight: 300;
        color: var(--peru);
    }
.flip-card-back .btn-card{
        margin-top: 1rem;
        display: inline-block;
        background: var(--peru);
        color: var(--white);
        font-size: 1.3rem;
        width: 40%;
        cursor: pointer;
        padding: 1rem 3rem;  
  }
.flip-card-back .btn-card:hover{
        letter-spacing: .3rem;
        background-color:#2c3e50 ;
  }
.flip-card-back .accroche a{
        font-weight: 400;
        color: var(--peru);
    }
.flip-card-back .accroche a:hover{
        color: #222;    
    }
.flip-card-back ul{
        text-align: start;
        list-style-type: none;
    }
.flip-card-back ul li p{
        font-size: 1.4rem;    
    }
    /*****************************slider*SECTION services mode responsive*******************************/
.slider-propositions{
        background: var(--light-bg);
        text-align: center;
        padding-left: 0;
        padding-right: 0;
        margin-top:2rem;
        padding: 3rem 5rem; 
        display: none;   
}
.slider-propositions .title{
        font-family: "Montserrat", sans-serif;
        color: var(--peru);
        font-weight: 400;
        font-size:3rem;
        margin:2rem 0;
}
.slider-propositions .proposition-slider{
        gap: 1.5rem;  
}
.proposition-slider .slide {
        width:35rem;
        height: 55rem;
        margin-top: 1.5rem;
        text-align: center;
        padding: 2rem 2rem;
        display: flex;
        flex-direction: column;
        background-color:  #333;
        border-radius: .5rem;    
}
.swiper-pagination .swiper-pagination-clickable .swiper-pagination-bullets .swiper-pagination-horizontal{
       /* bottom: 0;*/ 
        margin-top: -15rem;  
}
.slider-proposition .swiper-pagination-bullet-active{
        background:var(--peru); 
          margin-top: -15rem;   
}
.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullets .swiper-pagination-horizontal{
        bottom: 0;  
}
.slider-proposition .swiper-slide-active{
        transform: scale(1);
        opacity: 1;
        background: var(--white);
        border: var(--border);
        box-shadow:  0 0 1rem rgba(2, 2, 1, .1); 
         
}
.slider-proposition span.swiper-pagination-bullet.swiper-pagination-bullet-active{
      width: 1rem;
      height: 1rem;
      margin-top: -8rem;
}
.slider-proposition span.swiper-pagination-bullet{
      width: 1rem;
      height: 1rem;
      margin-top: -8rem;
}
.proposition-slider .slide h2{
        color: var(--peru);
        font-size: 2.2rem;
        margin-bottom: 1rem;    
    }
.proposition-slider .slide .content {
        padding: 0 1rem;
        display: flex;
        text-align: start;
        justify-content: left;
        flex-direction: column;
        border-top:1px solid lightgray;  
    }
.proposition-slider .slide .content h3{
        font-size:  1.7rem;
        margin: 1rem 0 0.5rem;   
        color: var(--light-white);    
    }
  .proposition-slider .slide .content ul{
        text-align: start;
        list-style-type: none;     
    }
.proposition-slider .slide .content ul li p{
        font-size: 1.5rem;
        color: #fff;    
    }
.proposition-slider .slide .content .accroche{  
        margin-top: 1.5rem;
        font-size:1.4rem;
        font-weight: 300;
        color: var(--peru);    
    }
.proposition-slider .slide .content .accroche a{ 
        font-weight: 300;
        color: var(--peru);   
    }
.proposition-slider .slide .content .btn-card{
        margin-top: 1.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--peru);
        color: var(--white);
        text-align: center;
        font-size: 1.4rem;
        width: 30%;
        cursor: pointer;
        padding: 1rem 3rem;     
    }
.proposition-slider .slide .content .btn-card:hover{   
        color: #222;    
    }
.slider-propositions .proposition-slider .swiper-pagination{ 
        top:60rem;
}

/****************************SECTION METHODOLOGIE*services***********************/
.méthodologie{
        display: flex;
        align-items: center;
        flex-direction: row-reverse ;
        gap:4rem;
}  
.méthodologie .image-about {
        flex: 1 1 41rem; 
        position: relative;     
}
.méthodologie .image-about img{
        width:100%;
        border-right:2px solid var(--peru) ;  
        border-bottom:2px solid var(--peru) ;
}
.méthodologie .image-about::after{
        content: "";
        width: 100%;
        height:100%;
        background-color: rgb(146, 144, 144);
        position: absolute;
        background-size: contain;
        top: 20px;
        right: -20px;
        z-index: -1;       
}
.méthodologie .contenu{
        flex: 1 1 41rem;
        z-index: 2;
        padding-left: 2rem;  
}
.méthodologie .contenu .bg-img{
        background: url("/images/logo-linkoval-bg1.png")no-repeat center fixed;
        background-position: right;
        background-size: contain;
        object-fit:contain;
}
.méthodologie .contenu .title{
        font-size: 3.6rem;
        color:var(--peru); 
}
.méthodologie .contenu ul li{
        list-style-type: none;
}
.méthodologie .contenu ul li strong{
        color:coral;
        font-weight:500;
}
.méthodologie .contenu p{
        font-size: 1.8rem;
        color: var(--light-black);
        padding: 1rem 0;
        line-height: 2; 
}
.méthodologie .contenu h3{
        font-size: 2.8rem;
        padding-top: 1rem;
        color:var(--light-black);    
 }
.méthodologie .contenu .btn{
        margin-top: 1rem;
        display: inline-block;
        background: var(--peru);
        color: var(--white);
        font-size: 1.8rem;
        cursor: pointer;
        padding: 1rem 3rem;
 }
.méthodologie .contenu .btn:hover{
        letter-spacing: .2rem;  
 } 
/************************************SECTION PROCESSUS***********************/
.processus{
        width:100%;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
.processus .title{
        font-size: 4.2rem;
        color:var(--peru);
        margin-bottom: 4rem;
        margin-top: 4rem;
    }
.processus .planning{
        font-size:2.5rem;
        margin-bottom:1rem;
        color:blue;
}
.container-processus{
        display: flex;
        align-items: start;
        text-align: center;
        justify-content: space-between;
        width: 100%;
}
.container-processus h2{
        margin-bottom: 2rem;
}
.container-processus p{
        margin-bottom: 2rem;
}
.container-processus .processus-line .client-side{
        border: 1px solid black;
        padding: .5rem 0;
        background-color: indianred;
}
.container-processus .processus-line .dev-side{
        border:1px solid black ;
        transform: translateX(105%);
        margin-top: -6rem;
        padding: .5rem 0;
        background-color: #cd853f;
}
.container-processus .processus-line .box-processus-client{
        display: flex;
        align-items: center;
        text-align: center;
        justify-content: center;
        width: 100%;
        padding:1rem 0;
        transform: translateX(4%);
}
.container-processus .processus-line .box-processus-dev{
        display: flex;
        align-items: center;
        text-align: center;
        justify-content: center;
        width: 100%;
        padding:1rem 0;
        transform: translateX(103%);
}

.container-processus .processus-line .box-processus-client .valid{
        display: flex;
        align-items: center;
        flex-direction: column;
        width: 50%;
        padding:0;
    }
.container-processus .processus-line .box-processus-client p{
        font-size: 1.2rem;
        color: darkgreen;
        font-weight: 600;

}
.container-processus .coté-developpeur{
        flex:1.2; 
        align-items: center;
        text-align: center;
        width: 1%;
        flex-direction: row;
        padding: 0;        
}
.container-processus .processus-line .box-processus-dev p{
        font-size: 1.2rem;
        color: darkgreen;
        font-weight: 600;
}
.container-processus .box-processus-client .line2{
        width: 102%;
        border: 1px solid red;
}
.container-processus .box-processus-dev .line2{
        width: 100%;
        border: 1px solid red;
}
.container-processus .box-processus-client i{
        font-size: 7px;
}
.container-processus .box-processus-dev i{
        font-size: 7px;
}
.container-processus .ligne{
        flex-direction: column;
        display: flex;
        align-items: center;
        height: 100%;
        margin-left: 1%;
}
.container-processus .ligne .lines{
        padding: 0;
        width: 1px;
        display: flex;
        flex-direction: column;
        align-items: center;
}
.container-processus .ligne .line{  
        border: 1px solid #222;
        display: flex;
        height: 41rem;
}
.container-processus .ligne .line2{  
        border: 1px solid #222;
        display: flex;
        height: 40rem;
}
.container-processus .ligne i{
        z-index:2;
        font-size: 10px;    
}
.container-processus .chronologie{
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        height: auto;
        width: 100%;
        gap: .5rem;
    }
.container-processus .chronologie .container-box-chrono1{
        display: flex;
        width:100%;
}
.container-processus .chronologie .container-box-chrono1 .ligne3{  
        flex-direction: column;
        display: flex;
        align-items: center;
        height: 100%;
    }
.container-processus .chronologie .container-box-chrono1 .line3{
        border: 1px solid #222;
        display: flex;
        height: 39rem;
}
.container-processus .chronologie .container-box-chrono1 .box-chrono{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
        width:100%;
        height: 40rem;
        padding-top: .8rem;
        padding-bottom: .8rem;
        border: 1px solid black;
        background-color: cadetblue;
        margin-left: 1rem;
}
.container-processus .chronologie .container-box-chrono1 .box-chrono span{
        font-size: 1.5rem;
        color: #fff;
}
.container-processus .chronologie .container-box-chrono1 .box-chrono span.first{
        margin-left: .5rem;
}
.container-processus .chronologie .container-box-chrono2{
        display: flex;
        width:100%;
}
.container-processus .chronologie .container-box-chrono2 .ligne4{
        flex-direction: column;
        display: flex;
        align-items: center;
        height: 100%;
    }
.container-processus .chronologie .container-box-chrono2 .line4{
        border: 1px solid #222;
        display: flex;
        height: 41rem;
}
.container-processus .chronologie .container-box-chrono2 .box-chrono{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
        width:100%;
        height: 40rem;
        padding-top: .8rem;
        padding-bottom: .8rem;
        border: 1px solid black;
        background-color: cadetblue;
        margin-left: 1rem;
    }
.container-processus .chronologie .container-box-chrono2 .box-chrono span{
        font-size: 1.5rem;
        color: #fff;
}
.container-processus .chronologie .container-box-chrono2 .box-chrono span.first{
        margin-left: .5rem;
}

/***********************************SECTION SERVICES2*services**********************************/
.services2{
        background-color: #fff;   
}
.services2 .content-services2{
        display: flex;
        align-items: center;
        flex-direction:column;
        gap:2rem;    
  }
.services2 .content-services2 .contenu{
        display: flex;
        flex-direction:column;
        z-index: 2; 
    }
.services2 .content-services2 .contenu h1{  
        font-family:"Montserrat",sans-serif;
        font-weight:300; 
  }
.services2 .content-services2 .contenu .conclusion h2{
        font-size: 2.5rem;
        color: var(--peru);   
  }
.services2 .content-services2 .contenu .title{
        width : 100%;
        object-fit: contain;
        display: flex;
        align-items: center; 
        flex-direction: column;
        padding: 20px 8px;
  }
.services2 .content-services2 .contenu .title p{
        font-size: 2rem;
        color: #f8f8f8;
        text-shadow:
        -1px -1px 0 black,
        1px -1px 0 black,
        -1px  1px 0 black,
        1px  1px 0 black;
  }
.services2 .content-services2 .contenu .title h1{
        font-size: 4rem;
        color: var(--peru);
        margin-top: 2rem;
        margin-bottom: 2rem;
  }

.services2 .content-services2 .contenu h2{
        font-size: 1rem;
        color: var(--light-black);
        margin-top: 2rem; 
  }
.services2 .content-services2 .contenu p{
        font-size: 1.7rem;
        color: var(--light-black);
        padding: .5rem 0;
        line-height: 2; 
    }
.services2 .content-services2 .box-container{
        display: flex;
        width: 100%;
        flex-wrap: wrap;
        gap: 1.5rem;
        background-color:#ffff;    
  }
.services2 .content-services2 .box-container .box{
        flex: 1 1 30rem;
        border-radius: .5rem;
        padding: 1rem;
        text-align: center;
        border-bottom: 1px solid lightgray;
        border-right: 1px solid lightgray;
  }
.services2 .content-services2 .box-container .box i{
        padding: 1rem;
        font-size: 4rem;
        color: var(--peru);
    }
.services2 .content-services2 .box-container .box h3{
        font-size: 2.5rem;
        color:#667 ;
        font-weight: 600;
  }
.services2 .content-services2 .box-container .box P{
        font-size: 1.7rem;
        color:#667 ;
        padding: 1rem 0;
  }
.services2 .content-services2 .box-container .box:hover{
        box-shadow: 0 1rem 2rem rgba(0, 0, 0,.1) ;
        background-color: #fff;
  }











  /************************************************************************************/
  /*****************************RESPONSIVE*******************************************************/
/*********************************Responsive 2600px**services************************/
@media(min-width:2560px){
html{
        scroll-padding-top:12rem;
    }

.services-page{
        padding-top:20rem;
        height:auto;
  }
.title{
        font-size: 6rem;
}
.slider-propositions{
        display:none;
  }
.propositions {
        padding-top: 4rem ;
        height: auto;
        margin: 0 10%;
}
.propositions h1{
        font-size: 6rem;
}
.propositions .grid-container {
        padding-left:10%;
  }
.flip-card {
        perspective: 1000px;
        width: 30%;
        height: 55rem;
        background: #52224c;
        border-radius: 12px;
    }

.flip-card-inner {
        width: 100%;
        height: 55rem;
        text-align: center;
        transition: transform 0.6s ease;
        transform-style: preserve-3d;
    }
.flip-card-front h2{
        color: var(--peru);
        font-size: 4.4rem;
        margin-bottom: 3rem;
    }
.flip-card-front span{
        font-size: 2.4rem;
        padding: .4rem 0;
        line-height: 1.5;
    }
.flip-card-back h3{
        font-size:2.2rem;
        margin: 1rem 0 0.5rem;
        text-align: start;
    }
.flip-card-back .accroche{
        margin-top: 1.5rem;
        font-size:2rem;
        font-weight: 300;
        color: var(--peru);
    }
.flip-card-back .btn-card{
        margin-top: 1rem;
        display: inline-block;
        background: var(--peru);
        color: var(--white);
        font-size: 1.8rem;
        width: 40%;
        cursor: pointer;
        padding: 1rem 3rem;  
    }
  /******SECTION PROCESSUS***/
.processus{
        height:auto;
        marging: 0 15%;
        padding-top: 8rem;
  }
.processus-line{
        flex:1.1;
  }
.processus .title{
        font-size:6rem;
}
.processus .planning{
        font-size:3.2rem;
        margin-bottom:1rem;
        color:red;
}
.processus p{
        font-size:2.5rem;    
}
.container-processus .coté-developpeur{
        flex:1.2; 
        align-items: center;
        text-align: center;
        width: 1%;
        flex-direction: row;
        padding: 0;    
}
.méthodologie .contenu .title{
        font-size: 6rem;
}
.container-processus h2{
        margin-bottom: 2rem;
        font-size:2.4rem;
}
.container-processus h3{   
        font-size:2rem;
}
.container-processus .processus-line .client-side{
        border: 1px solid black;
        padding: .5rem 0;
        background-color: indianred;
}
.container-processus .processus-line .dev-side{
        border:1px solid black ;
        transform: translateX(107%);
        margin-top: -6rem;
        padding: .5rem 0;
        background-color: #cd853f;
}
.container-processus .ligne{
        flex-direction: column;
        display: flex;
        align-items: center;
        height: 100%;
        margin-left: 1%;
}
.container-processus .ligne .line{   
        border: 1px solid #222;
        display: flex;
        height: 45rem;
}
.container-processus .ligne .line2{  
        border: 1px solid #222;
        display: flex;
        height: 42rem;
}
.container-processus p{
        margin-bottom: 2rem;
}
.container-processus {   
        padding:2rem 20rem;
}
.container-processus .chronologie{
        flex: 1.1;
        display: flex;
        flex-direction: column;
        align-items: center;
        height: auto;
        width: 100%;
        gap: .5rem;
}
.container-processus .chronologie .container-box-chrono1{
        display: flex;
        width:100%;
}
.container-processus .chronologie .container-box-chrono1 .ligne3{  
        flex-direction: column;
        display: flex;
        align-items: center;
        height: 100%;
}
.container-processus .chronologie .container-box-chrono1 .line3{
        border: 1px solid #222;
        display: flex;
        height: 41rem;
}
.container-processus .chronologie .container-box-chrono1 .box-chrono{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
        width:100%;
        height: 43rem;
        padding-top: .8rem;
        padding-bottom: .8rem;
        border: 1px solid black;
        background-color: cadetblue;
        margin-left: 1rem;
}
.container-processus .chronologie .container-box-chrono1 .box-chrono span{
        font-size: 1.7rem;
        color: #fff;
}
.container-processus .chronologie .container-box-chrono1 .box-chrono span.first{
        margin-left: .5rem;
}
.container-processus .chronologie .container-box-chrono2{
        display: flex;
        width:100%;
}
.container-processus .chronologie .container-box-chrono2 .ligne4{
        flex-direction: column;
        display: flex;
        align-items: center;
        height: 100%;
}
.container-processus .chronologie .container-box-chrono2 .line4{
        border: 1px solid #222;
        display: flex;
        height: 42rem;
}
.container-processus .chronologie .container-box-chrono2 .box-chrono{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
        width:100%;
        height: 44rem;
        padding-top: .8rem;
        padding-bottom: .8rem;
        border: 1px solid black;
        background-color: cadetblue;
        margin-left: 1rem;
}
.container-processus .chronologie .container-box-chrono2 .box-chrono span{
        font-size: 1.7rem;
        color: #fff;
}
.container-processus .chronologie .container-box-chrono2 .box-chrono span.first{
        margin-left: .5rem;
}

}
/***********************MAX WIDTH 2559px*******************/
@media(max-width:2559px){

html{
        scroll-padding-top:10rem ;
    }

.services-page{
        padding-top: 2rem;
}
.slider-propositions{
        display:none;
  }
.propositions{
        height: auto;
}
.propositions .grid-container {
        padding-left:10%;
  }

.processus{
        height:auto;
  }
.propositions {
        padding-top: 4rem ;
}

.services-page{
        padding-top:10rem;
        height:auto;
  }

.services-page .content .image{
        margin-top: 16rem;
    
}
h2{
        font-size:3.8rem ;
}
h3{
        font-size:3.2rem ;
   
}
p{
        font-size: 2.2rem;
}

.container-processus h2{ 
        margin-bottom: 2rem;
        font-size:2.4rem;  

}
.container-processus h3{    
        font-size:2rem;
}
.container-processus p{ 
        margin-bottom: 2rem;
}
.container-processus .box-processus{
        display: flex;
        align-items: center;
        text-align: center;
        justify-content: center; 
        width: 100%;
        padding:1rem 0;
}
.container-processus .box-processus .valid{
        display: flex;
        align-items: center;
        flex-direction: column;
        width: 50%;  
        padding:0;
}
.container-processus .box-processus p{
        font-size: 2rem;
        color: darkgreen;
        font-weight: 600;
}
.container-processus .box-processus .line2{
        width: 100%;
        border: 1px solid red;
}
.container-processus .box-processus i{
        font-size: .8rem;
}
.container-processus .ligne i{
        z-index:2;
        font-size: .8rem;   
}
.container-processus .coté-developpeur{
        flex:1; 
        align-items: center;
        text-align: center;
        width: 50%;    
        flex-direction: row;   
        padding: 0;
        margin-right: 1.5rem;    
}
.container-processus .coté-client h2{
        margin-bottom: 2rem;
        padding: 1rem 0;
        background-color: indianred;    
}
.container-processus .coté-dev h2{
        margin-bottom: 2rem;
        padding: 1rem 0;
        background-color: indianred;   
}
.processus-line{  
        flex: 1;    
}
.container-processus .ligne .line{
        border: 1px solid #222;
        display: flex;  
        height: 45rem;    
}
.container-processus .ligne .line2{  
        border: 1px solid #222;
        display: flex;
        height: 40rem;
}
.container-processus .ligne i{
        z-index:2;
        font-size: 10px;    
}
.container-processus .chronologie{
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        height: auto;
        width: 100%;  
        gap: .5rem;
}
.container-processus .chronologie .container-box-chrono1{
        display: flex;
        width:100%;
}
.container-processus .chronologie .container-box-chrono1 .ligne3{   
        flex-direction: column;
        display: flex;
        align-items: center;
        height: 100%;
}
.container-processus .chronologie .container-box-chrono1 .line3{
        border: 1px solid #222;
        display: flex;
        height: 42rem;
}
.container-processus .chronologie .container-box-chrono1 .box-chrono{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
        width:100%;
        height: 43rem;
        padding-top: .8rem;
        padding-bottom: .8rem;
        border: 1px solid black;
        background-color: cadetblue;
        margin-left: 1rem;  
}
.container-processus .chronologie .container-box-chrono1 .box-chrono span{
        font-size: 1.5rem;
        color: #fff;
}
.container-processus .chronologie .container-box-chrono1 .box-chrono span.first{
        margin-left: .5rem;
}
.container-processus .chronologie .container-box-chrono2{
        display: flex;
        width:100%;  
}

.container-processus .chronologie .container-box-chrono2 .ligne4{
        flex-direction: column;
        display: flex;
        align-items: center;
        height: 100%;
}
.container-processus .chronologie .container-box-chrono2 .line4{
        border: 1px solid #222;
        display: flex;
        height: 40rem;
}
.container-processus .chronologie .container-box-chrono2 .box-chrono{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
        width:100%;
        height: 42rem;
        padding-top: .8rem;
        padding-bottom: .8rem;
        border: 1px solid black;
        background-color: cadetblue;
        margin-left: 1rem;
}
.container-processus .chronologie .container-box-chrono2 .box-chrono span{
        font-size: 1.5rem;
        color: #fff;
}
.container-processus .chronologie .container-box-chrono2 .box-chrono span.first{
        margin-left: .5rem;
}
}


/*********************MAX WIDTH*1920PX*****************/

@media(max-width:1920px){

/***services-page***/
.services-page{
        padding-top:20rem;
        height:auto;
}
.services-page .content .text h1{
        font-size: 4.2rem;
}  
.services2{
        height:auto;
  }

/***processus***/
.title{
        font-size: 4.2rem;
}
/***méthodologie***/
.méthodologie{
        height: auto;
}
.méthodologie .contenu .title{
        font-size: 4.2rem;
}
.propositions h1{
        font-size: 4.2rem;
}
h2{
        font-size:3.8rem ;
}
h3{
        font-size:3.2rem ;  
}
p{
        font-size: 1.8rem;
}
.services-page .content .image{
        margin-top: 6rem;    
}

/**processus**/

.processus{
        height:auto;
  }
.processus .title{
        font-size:4.2rem;
}
.processus .planning{
        font-size:2.5rem;
        margin-bottom:1rem;
        color:red;
}
.container-processus{
        display: flex;
        align-items: start;
        text-align: center;
        justify-content: space-between;
        width: 100%;
        height: auto;
}
.container-processus .processus-line .client-side{
        border: 1px solid black;
        padding: .5rem 0;
        background-color: indianred;
        font-size: 2rem;
}
.container-processus .processus-line .dev-side{
        border:1px solid black ;
        transform: translateX(107%);
        margin-top: -5.5rem;
        padding: .5rem 0;
        background-color: #cd853f;
        font-size: 2rem;
}
.container-processus .processus-line .box-processus-client{    
        transform: translateX(4%);
}
.container-processus .processus-line .box-processus-dev{
        transform: translateX(103%);
}
.container-processus .processus-line .box-processus-client p{
        font-size: 1.5rem;
        color: darkgreen;
        font-weight: 400;
}
.container-processus .processus-line .box-processus-client h3{
        font-size: 1.6rem;
}
.container-processus .processus-line .box-processus-dev h3{
        font-size: 1.6rem;    
}
.container-processus .box-processus-client i{
        font-size: 9px;
}
.container-processus .box-processus-dev i{
        font-size: 9px;
}
.container-processus .ligne{
        margin-left: 1.3%;
}
.container-processus .ligne .line{   
        border: 1px solid #222;
        display: flex;  
        height: 42rem;
}
.container-processus .ligne .line2{  
        border: 1px solid #222;
        display: flex;  
        height: 47rem;
}
.container-processus .ligne i{
        z-index:2;
        font-size: 10px;
        margin-top:-.3rem;    
}
.container-processus .chronologie{
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;   
        height: auto;
        width: 100%; 
        gap: .5rem;
}
.container-processus .chronologie .container-box-chrono1{
        display: flex;
        width:100%;  
}
.container-processus .chronologie .container-box-chrono1 .ligne3{  
        flex-direction: column;
        display: flex;
        align-items: center;
        height: 100%;
}
.container-processus .chronologie .container-box-chrono1 .ligne3 i{  
        margin-top: -.3rem;
}
.container-processus .chronologie .container-box-chrono1 .ligne3 i:nth-child(1){  
        margin-bottom: -.3rem;
}
.container-processus .chronologie .container-box-chrono1 .line3{
        border: 1px solid #222;
        display: flex;
        height: 43rem;
}
.container-processus .chronologie .container-box-chrono1 .box-chrono{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
        width:100%;
        height: 44rem;
        padding-top: .8rem;
        padding-bottom: .8rem;
        border: 1px solid black;
        background-color: cadetblue;
        margin-left: 1rem;   
}
.container-processus .chronologie .container-box-chrono1 .box-chrono span{
        font-size: 1.5rem;
        color: #fff;
}
.container-processus .chronologie .container-box-chrono1 .box-chrono span.first{
        margin-left: .5rem;
}
.container-processus .chronologie .container-box-chrono2{
        display: flex;
        width:100%;
}
.container-processus .chronologie .container-box-chrono2 .ligne4{ 
        flex-direction: column;
        display: flex;
        align-items: center;
        height: 100%;
}
.container-processus .chronologie .container-box-chrono2 .ligne4 i{ 
        margin-top:-.3rem;
}
.container-processus .chronologie .container-box-chrono2 .ligne4 i:nth-child(1){ 
        margin-bottom:-.3rem;
}
.container-processus .chronologie .container-box-chrono2 .line4{
        border: 1px solid #222;
        display: flex;
        height: 43rem;
}
.container-processus .chronologie .container-box-chrono2 .box-chrono{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
        width:100%;
        height: 44rem;
        padding-top: .8rem;
        padding-bottom: .8rem;
        border: 1px solid black;
        background-color: cadetblue;
        margin-left: 1rem;
}
.container-processus .chronologie .container-box-chrono2 .box-chrono span{
        font-size: 1.5rem;
        color: #fff;
}
.container-processus .chronologie .container-box-chrono2 .box-chrono span.first{
        margin-left: .5rem;
}
}

/*********************MAX WIDTh 1440PX**************/
@media(max-width:1440px){
 

/*SERVICES-PAGE***/
.services-page{
        padding-top:8rem;
        height:auto;
  }
/****PROPOSITIONS***/
.flip-card-front h2{
        color: var(--peru);
        font-size: 2.8rem;
        margin-bottom: 3rem;
}
.flip-card-front span{
        font-size: 2rem;
        padding: .4rem 0;
        line-height: 1.5;
}
/***PROCESSUS****/
.processus .title{
        font-size: 4.2rem;
        color:var(--peru);
        margin-bottom: 4rem;
        margin-top: 4rem;
}
.processus .planning{
        font-size:3.2rem;
        margin-top: 2rem;
        margin-bottom:1rem;
        color:red;
}
.processus p{
        font-size:2rem;   
}
.container-processus{
        display: flex;
        align-items: start;
        text-align: center;
        justify-content: space-between;
        width: 100%;
        height:auto;  
}
.container-processus .processus-line .client-side{
        border: 1px solid black;
        padding: .5rem 0;
        background-color: indianred;
        font-size: 2rem;
}
.container-processus .processus-line .dev-side{
        border:1px solid black ;
        transform: translateX(108%);
        margin-top: -5.5rem;
        padding: .5rem 0;
        background-color: #cd853f;
        font-size: 2rem;
}
.container-processus .processus-line .box-processus-client{    
        transform: translateX(5%);
}
.container-processus .processus-line .box-processus-dev{
        transform: translateX(103%);
}
.container-processus .processus-line .box-processus-client p{
        font-size: 1.5rem;
        color: darkgreen;
        font-weight: 600;
}
.container-processus .processus-line .box-processus-dev p{
        font-size: 1.5rem;
        color: darkgreen;
        font-weight: 600;
}
.container-processus .box-processus-client i{
        font-size: 9px;
}
.container-processus .box-processus-dev i{
        font-size: 9px;
}
.container-processus .ligne{
        margin-left: 1.3%;
}
.container-processus .ligne .line{   
        border: 1px solid #222;
        display: flex;   
        height: 37rem;
}
.container-processus .ligne .line2{  
        border: 1px solid #222;
        display: flex;   
        height: 40rem;
}
.container-processus .ligne i{
        z-index:2;
        font-size: 10px;   
}
.container-processus .chronologie{
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        height: auto;
        width: 100%;  
        gap: .5rem;
}
.container-processus .chronologie .container-box-chrono1{
        display: flex;
        width:100%;  
}
.container-processus .chronologie .container-box-chrono1 .ligne3{  
        flex-direction: column;
        display: flex;
        align-items: center;
        height: 100%;
}
.container-processus .chronologie .container-box-chrono1 .line3{
        border: 1px solid #222;
        display: flex;
        height: 38rem;
    }
.container-processus .chronologie .container-box-chrono1 .box-chrono{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
        width:100%;
        height: 39rem;
        padding-top: .8rem;
        padding-bottom: .8rem;
        border: 1px solid black;
        background-color: cadetblue;
        margin-left: 1rem;   
}
.container-processus .chronologie .container-box-chrono1 .box-chrono span{
        font-size: 1.5rem;
        color: #fff;
}
.container-processus .chronologie .container-box-chrono1 .box-chrono span.first{
        margin-left: .5rem;
}
.container-processus .chronologie .container-box-chrono2{
        display: flex;
        width:100%;    
}
.container-processus .chronologie .container-box-chrono2 .ligne4{ 
        flex-direction: column;
        display: flex;
        align-items: center;
        height: 100%;
}
.container-processus .chronologie .container-box-chrono2 .line4{
        border: 1px solid #222;
        display: flex;
        height: 37rem;
}
.container-processus .chronologie .container-box-chrono2 .box-chrono{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
        width:100%;
        height: 38rem;
        padding-top: .8rem;
        padding-bottom: .8rem;
        border: 1px solid black;
        background-color: cadetblue;
        margin-left: 1rem;   
}
}

  /******************************RESPONSIVE 1366PX START*services*****************************/

@media(max-width:1366px)  {

.flip-card-front h2{
        color: var(--peru);
        font-size: 2.5rem;
        margin-bottom: 3rem;
}
.flip-card-front span{
        font-size: 1.7rem;
        padding: .4rem 0;
        line-height: 1.5;
}    
.propositions .grid-container .flip-card .flip-card-back .btn-card{
        margin-top: .5rem;
        display: inline-block;
        background: var(--peru);
        color: var(--white);
        font-size: 1.2rem;
        width: 40%;
        cursor: pointer;
        padding: 1rem 1rem;  
} 
   
.propositions .grid-container .flip-card .flip-card-back h3{
        font-size:1.4rem;
        text-align: start;
}
.propositions .grid-container .flip-card .flip-card-back ul li p{
        font-size: 1.2rem;
}    
.propositions .grid-container .flip-card .flip-card-back .accroche{
        margin-top: 1rem;
        font-size:1.3rem;
        font-weight: 300;
        color: var(--peru);
}   
.container-processus .processus-line .box-processus-client h3{
        font-size:1.6rem;
}
.container-processus .processus-line .box-processus-dev h3{
        font-size: 1.6rem;
}
.container-processus .processus-line .box-processus-client p{
        font-size: 1.5rem;
        color: darkgreen;
        font-weight: 600;
}
.container-processus .box-processus-client i{
        font-size: 9px;
}
.container-processus .box-processus-dev i{
        font-size: 9px;
}
.container-processus .ligne{
        margin-left: 1.3%;
}
.container-processus .ligne .line{   
        border: 1px solid #222;
        display: flex;   
        height: 41rem;
}
.container-processus .ligne .line2{  
        border: 1px solid #222;
        display: flex;  
        height: 40rem;
}
.container-processus .ligne i{
        z-index:2;
        font-size: 10px;    
}
.container-processus .chronologie{
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;  
        height: auto;
        width: 100%;   
        gap: .5rem;
}
.container-processus .chronologie .container-box-chrono1{
        display: flex;
        width:100%;     
}
.container-processus .chronologie .container-box-chrono1 .ligne3{    
        flex-direction: column;
        display: flex;
        align-items: center;
        height: 100%;
}
.container-processus .chronologie .container-box-chrono1 .line3{
        border: 1px solid #222;
        display: flex;
        height: 39rem;
}
.container-processus .chronologie .container-box-chrono1 .box-chrono{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
        width:100%;
        height: 40rem;
        padding-top: .8rem;
        padding-bottom: .8rem;
        border: 1px solid black;
        background-color: cadetblue;
        margin-left: 1rem;
}
.container-processus .chronologie .container-box-chrono1 .box-chrono span{
        font-size: 1.5rem;
        color: #fff;
}
.container-processus .chronologie .container-box-chrono1 .box-chrono span.first{
        margin-left: .5rem;
}
.container-processus .chronologie .container-box-chrono2{
        display: flex;
        width:100%;     
}
.container-processus .chronologie .container-box-chrono2 .ligne4{ 
        flex-direction: column;
        display: flex;
        align-items: center;
        height: 100%;
}
.container-processus .chronologie .container-box-chrono2 .line4{
        border: 1px solid #222;
        display: flex;
        height: 40rem;
}
.container-processus .chronologie .container-box-chrono2 .box-chrono{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
        width:100%;
        height: 41rem;
        padding-top: .8rem;
        padding-bottom: .8rem;
        border: 1px solid black;
        background-color: cadetblue;
        margin-left: 1rem;  
}          
}


/************MAX WIDTH 1200PX*********/
@media(max-width:1200px){
section{
        padding: 3rem 5%;
}

}



/*******************************MAX WIDTH 1120PX**services*********************************/
@media(max-width:1120px)  {
/*html{
        scroll-padding-top:4rem;
}*/
.propositions{
        display:none;
  }
.services-page{
        height:auto;
        
}

.slider-propositions{
        display:block;
     
  }
.slider-propositions .title{
        
        margin-top:2rem;
  }

.proposition-slider .slide {
        width:35rem;
        height: 57rem;
        margin-top: 1rem;
        text-align: center;
        padding: 2rem 2rem;
        display: flex;
        flex-direction: column;
        background-color:  #333;
        border-radius: .5rem;    
}  
.container-processus .processus-line .box-processus-client h3{
        font-size:1.6rem;
}
.container-processus .processus-line .box-processus-dev h3{
        font-size: 1.6rem;
}
.container-processus .ligne .line{
        height: 42rem;
}
.container-processus .ligne .line2{
        height: 42rem;
}
.container-processus .chronologie .container-box-chrono1 .box-chrono{   
        height: 42rem;    
}
.container-processus .chronologie .container-box-chrono1 .line3{   
        height: 41rem;
}
.container-processus .chronologie .container-box-chrono2 .box-chrono{   
        height: 40rem;    
}
.container-processus .chronologie .container-box-chrono2 .line4{   
        height: 39rem;
}

}
/*******************************MAX WIDTH 1030PX*services**********************************/
@media(max-width:1024px)  {


 .processus .title{
        font-size:3.6rem;
}
.processus .planning{
        font-size:2rem;
        margin-bottom:1rem;
        color:red;
}
.processus p{
        font-size:1.6rem;
    
}

.méthodologie{
        padding-top: 6rem;
        height: auto;
}

h2{
        font-size:2.8rem ;
}
h3{
        font-size:2.4rem ;
   
}
p{
        font-size: 1.6rem;
}
.slider-propositions{
        padding-top:6rem;
}   
.proposition-slider{
        margin-top: 5rem;
}
.proposition-slider .slide .content{
        text-align:center;
        display: flex;
        align-items: center;
}
.proposition-slider .slide .content ul{
        text-align:center;
}
.container-processus .box-processus-client i,
.container-processus .box-processus-dev i{
        font-size: .7rem;
}
.container-processus .processus-line .box-processus-client h3{
        font-size:1.6rem;
}
.container-processus .processus-line .box-processus-dev h3{
        font-size: 1.6rem;
}
.container-processus .ligne .line{
        height: 42rem;
}
.container-processus .ligne .line2{
        height: 42rem;
}
.container-processus .chronologie .container-box-chrono1 .box-chrono{   
        height: 43rem;    
}
.container-processus .chronologie .container-box-chrono1 .line3{   
        height: 42rem;
}
.container-processus .chronologie .container-box-chrono2 .box-chrono{   
        height: 42rem;    
}
.container-processus .chronologie .container-box-chrono2 .line4{   
        height: 41rem;
}

}


/***********************MAX-WIDTH 1024PX******************/



/******************************RESPONSIVE 991PX START*services*****************************/

@media(max-width:991px)  {
/*.header-index{
        background-color: #535d87;
  }*/
section{
        padding: 3rem 2rem;
}

html{
        font-size: 55%;
}
.container-processus .ligne .line{
        height: 40rem;
}
.container-processus .ligne .line2{
        height: 40rem;
}
.container-processus .chronologie .container-box-chrono1 .box-chrono{   
        height: 39rem;    
}
.container-processus .chronologie .container-box-chrono1 .line3{   
        height: 38rem;
}
.container-processus .chronologie .container-box-chrono2 .box-chrono{   
        height: 40rem;    
}
.container-processus .chronologie .container-box-chrono2 .line4{  
        height: 39rem;
}

}
/*****ASUS ZENBOOK FOLD****853PX X 1280PX*/
@media(max-width:853px){

.container-processus .ligne .line{
        height: 42rem;
}
.container-processus .ligne .line2{
        height: 43rem;
}
.container-processus .chronologie .container-box-chrono1 .box-chrono{   
        height: 44rem;    
}
.container-processus .chronologie .container-box-chrono1 .line3{   
        height: 41rem;
}
.container-processus .chronologie .container-box-chrono2 .box-chrono{   
        height: 42rem;    
}
.container-processus .chronologie .container-box-chrono2 .line4{   
        height: 40rem;
}   
.container-processus .chronologie .container-box-chrono1 .box-chrono span{
        font-size: 1.3rem;
        color: #fff;
}
.container-processus .chronologie .container-box-chrono1 .box-chrono span.first{
        margin-left: .5rem;
}
.container-processus .chronologie .container-box-chrono2 .box-chrono span{
        font-size: 1.3rem;
        color: #fff;
}
.container-processus .chronologie .container-box-chrono2 .box-chrono span.first{
        margin-left: .5rem;
}
.processus .planning{
        font-size:1.8rem;
        margin-bottom:1rem;
        color:red;
}
.processus .planning p{
        font-size:1.4rem;
   
}
}
/******************************RESPONSIVE 791PX START*services*****************************/

@media(max-width:790px)  {

.processus .title{
        font-size:3rem;
}
.processus .planning{
        font-size:2rem;
        margin-bottom:1rem;
        color:red;
}
.processus p{
        font-size:1.4rem;   
}
.title{
        font-size: 3rem;
}
.méthodologie{
        height: auto;
}
.méthodologie .contenu .title{
        font-size: 3rem;
}
.title{
        font-size: 3rem;
}
.propositions h1{
        font-size: 3rem;
}
.services-page .content .text h1{
        font-size: 3rem;
}
h2{
        font-size:2.4rem ;
}
h3{
        font-size:2rem ;
   
}
p{
        font-size: 1.6rem;
} 

.proposition-slider .slide {
        height:60rem;
}


.méthodologie .contenu .title{   
        font-size: 3rem;
        color:var(--peru); 
}

.méthodologie .contenu{    
        margin-top: 6rem;
}

.méthodologie .contenu p{
        font-size: 1.7rem;
        color: var(--light-black);
        padding: 1rem 0;
        line-height: 2; 
}

.méthodologie .contenu p span{
        color:rgb(141, 132, 11);
        font-weight: 700;
        font-family: "Dancing Script",sans-serif;
        font-size: 2rem;
}
.méthodologie .image-about::after{
        display: none;
}
.méthodologie .image-about img{
        border: none;
}
.processus .title{
        margin-top:3rem;
        margin-bottom:3rem;
        font-size:3rem;
}
.processus-line .box-processus-client .valid p{
        font-size:1.2rem;
}
}

/********************MAX WIDTH 768px*****************/
@media(max-width:768px){

.container-processus .processus-line .box-processus-client h3{
        font-size:1.4rem;
}
.container-processus .processus-line .box-processus-dev h3{
        font-size: 1.4rem;
}
.container-processus .ligne .line{
        height: 38rem;
}
.container-processus .ligne .line2{
        height: 39rem;
}
.container-processus .chronologie .container-box-chrono1 .box-chrono{   
        height: 39rem;    
}
.container-processus .chronologie .container-box-chrono1 .line3{
  
        height: 38rem;
}
.container-processus .chronologie .container-box-chrono2 .box-chrono{   
        height: 37rem;    
}
.container-processus .chronologie .container-box-chrono2 .line4{   
        height: 35rem;
} 

}
/*********************MAX WIDTH 700PX*services****************/
@media(max-width:700px) {
.méthodologie{
        flex-direction:column;
}
.services2 .content-services2 .contenu .title h1{
        font-size:3rem; 
        font-family:"Montserrat",sans-serif;
        font-weight:300;  
  }
.services2 .content-services2 .contenu .conclusion h2{
        font-size: 2rem;  
  }
.container-processus .ligne .line{
        height: 40rem;
}
.container-processus .ligne .line2{
        height: 44rem;
}
.container-processus .chronologie .container-box-chrono1 .box-chrono{   
        height: 43rem;    
}
.container-processus .chronologie .container-box-chrono1 .line3{
   
        height: 42rem;
}
.container-processus .chronologie .container-box-chrono2 .box-chrono{   
        height: 41rem;    
}
.container-processus .chronologie .container-box-chrono2 .line4{  
        height: 40rem;
}  
}

/******************************RESPONSIVE SURFACE DUO 540px*services*****************************/
@media(max-width:540px) {

.container-processus .processus-line .dev-side{
        transform: translateX(111%);   
        margin-top: -5rem;
        padding: .5rem 0;
}
 .container-processus .processus-line .client-side{
        font-size:1.5rem;
 }
 .container-processus .processus-line .dev-side {
        font-size:1.5rem;
 }
 .container-processus .processus-line .client-side span1{
        display:none;
 }
 .container-processus .processus-line .dev-side span1{
        display:none;
 }
.container-processus .processus-line .box-processus-client h3{
        font-size:1.2rem;
}
.container-processus .processus-line .box-processus-dev h3{
        font-size: 1.2rem;
}
.container-processus .processus-line .box-processus-client p{
        font-size:1.2rem;
}
.container-processus .ligne .line{
        height: 40rem;
}
.container-processus .ligne .line2{
        height: 40rem;
}
.container-processus .chronologie .container-box-chrono1 .box-chrono{   
        height: 40rem;    
}
.container-processus .chronologie .container-box-chrono1 .line3{   
        height: 39rem;
}
.container-processus .chronologie .container-box-chrono2 .box-chrono{   
        height: 40rem;    
}
.container-processus .chronologie .container-box-chrono2 .line4{  
        height: 39rem;
}   
.container-processus .chronologie .container-box-chrono1 .box-chrono span{
        font-size: 1.3rem;
        color: #fff;
}
.container-processus .chronologie .container-box-chrono1 .box-chrono span.first{
        margin-left: .5rem;
}
.container-processus .chronologie .container-box-chrono2 .box-chrono span{
        font-size: 1.3rem;
        color: #fff;
}
.container-processus .chronologie .container-box-chrono2 .box-chrono span.first{
        margin-left: .5rem;
}
.processus .planning{
        font-size:1.8rem;
        margin-bottom:1rem;
        color:red;
}
.processus .planning p{
        font-size:1.4rem;
   
}
}
/******************************MAX-WIDTH 510PX*services***************************/
@media(max-width:510px)  {
    html{
        scroll-padding-top: 6rem;
    }

.services-page .content .text h1{
        font-size:2.9rem;
}
.méthodologie .contenu .title{
        font-size: 3rem;
}
.processus .title{
        font-size:3rem;
}
.services2 .content-services2 .contenu .title h1{
        font-size: 3rem;   
  }
.services2 .content-services2 .contenu h3{
        font-size: 2.4rem;
  }
.services2 .content-services2 .contenu p{
        font-size: 1.6rem; 
    }
.services .content-services .box-container .box{
        flex: 1 1 23rem;
        border-radius: .5rem;
        padding: 1rem;
        text-align: center;
  }
.services2 .content-services2 .box-container .box i{
        font-size: 3rem;
        color: var(--peru);
  }
.services2 .content-services2 .box-container .box h3{/*h3 du breakpts inférieur*/
        font-size: 2.4rem;
  }
.services2 .content-services2 .box-container .box P{
        font-size: 1.6rem;
  }
}


/******************************MAX WIDTH 450PX*services***********************/

@media(max-width:450px){

html{
        font-size: 50%;
  }

.services-page .content .image::after{
        display:none;
}
.services-page {
        margin-bottom: 0;
}
.container-processus .box-processus{  
        padding:.5rem 0;
}
.container-processus .processus-line .dev-side{
        transform: translateX(111%);   
        margin-top: -5.2rem;
        padding: .5rem 0;
}
}

/*****************************MAX WIDTH 430PX*services**********************/
@media(max-width:430px){
.container-processus .processus-line .dev-side{
        transform: translateX(112%);   
        margin-top: -5.3rem;
        padding: .5rem 0;
}
.services .banner-img-content{   
        width: 30rem;  
 } 
 .proposition-slider .slide {
        height:62rem;
        padding-bottom: 2.5rem;
 } 
 .proposition-slider .slide .content{
        padding-bottom:3rem;
  }
.container-processus .coté-client .box-processus:nth-child(5){
        margin-top: 11%;
    
}
.container-processus .coté-client .box-processus:nth-child(6){
        margin-top: 11%;
    
}
.container-processus .box-processus i{
        font-size: 5px;

}
.container-processus .processus-line .box-processus-client{    
        transform: translateX(9%);
}

}
  
/******************************MAX WIDTH 412PX*services********************/
@media(max-width:425px){
 .services-page {
        margin-bottom: 0;
       /* border: 1px solid red;*/
}

.proposition-slider .slide .content h3{
        font-size:  1.7rem;
        margin: 1rem 0 0.5rem;   
        color: var(--light-white);    
    }

.proposition-slider .slide .content ul{
        text-align: start;
        list-style-type: none;     
    }

.proposition-slider .slide .content ul li p{
        font-size: 1.4rem;
        color: #fff; 
    }

.proposition-slider .slide .content .accroche{
        margin-top: 1.5rem;
        font-size:1.4rem;
        font-weight: 300;
        color: var(--peru);   
    }
.container-processus .chronologie .container-box-chrono1 .box-chrono{ 
        display: flex;
        align-items: center;
        justify-content: center;  
        flex-direction: column;   
}
.container-processus .chronologie .container-box-chrono2 .box-chrono{ 
        display: flex;
        align-items: center;
        justify-content: center;   
        flex-direction: column;   
}
.container-processus .chronologie .container-box-chrono1 .box-chrono span{
        display: flex;
        align-items: center;
        justify-content:center ;
        font-size: 1rem;
        color: #fff;
}
.container-processus .chronologie .container-box-chrono1 .box-chrono span.first{
        margin-left: .1rem;
        display: flex;
        align-items: center;
        justify-content:center ;
        font-size: 1rem;
        /*border: 1px solid white;*/
}
.container-processus .chronologie .container-box-chrono2 .box-chrono span{
        display: flex;
        align-items: center;
        justify-content:center ;
        font-size: .8rem;
        color: #fff;
}
.container-processus .chronologie .container-box-chrono2 .box-chrono span.first{
        margin-left: .1rem;
        display: flex;
        align-items: center;
        justify-content:center ;
        font-size: .8rem;
        /*border: 1px solid white;*/
}
}
/***********************MAX WIDTH 390PX*services*************************/
@media(max-width:390px){

.proposition-slider .slide .content h3{
    font-size:  1.6rem;
    margin: 1rem 0 0.5rem;   
    color: var(--light-white);    
    }

.proposition-slider .slide .content ul{
    text-align: start;
    list-style-type: none;  
    }

.proposition-slider .slide .content ul li p{
    font-size: 1.3rem;
    color: #fff;   
    }

.proposition-slider .slide .content .accroche{ 
    margin-top: 1.5rem;
    font-size:1.4rem;
    font-weight: 300;
    color: var(--peru); 
    }
    .méthodologie{
        padding-top: 2rem;
    }
    .container-processus .ligne{
    margin-left: 1.5%;
}
.container-processus .chronologie .container-box-chrono2 .box-chrono span{
       
        color: #fff;
}
.container-processus .chronologie .container-box-chrono2 .box-chrono span.first{
        margin-left: .1rem;
        font-size: .8rem;
        /*border: 1px solid white;*/
}
  }
@media(max-width:375px){
 .container-processus .chronologie .container-box-chrono2 .box-chrono span{
        font-size: .8rem;
        
}
.container-processus .chronologie .container-box-chrono2 .box-chrono span.first{
        margin-left: .1rem;       
        font-size: .8rem;
        /*border: 1px solid white;*/
}       
}

/***********************MAX WIDTH 360PX*services********************/
@media(max-width:370px){

.slider-propositions .proposition-slider .slide .accroche {
    font-size:1.2rem;
  }
.proposition-slider .slide .content ul{
    text-align: start;
    list-style-type: none;    
    }
.proposition-slider .slide .content ul li p{
    font-size: 1.2rem;
    color: #fff; 
    }

}
/***********************MAX WIDTH 320PX**services*******************/
@media(max-width:320px){
  
.banner .banner-img .banner-img-content span a{
    font-size: 1.7rem;
    margin-left: 3rem;
    color: #fff;
    cursor: pointer;
    text-decoration: underline;
 }

.proposition-slider .slide .content .btn-card{
    font-size: 1.3rem;   
    }

.proposition-slider .slide .content ul li p{
    font-size: 1rem;
    color: #fff; 
    }
.container-processus .processus-line .dev-side{
        transform: translateX(112%);   
        margin-top: -5.3rem;
        padding: .4rem 0;
}
.container-processus .ligne .line{
        height: 40rem;
}
.container-processus .ligne .line2{
        height: 41rem;
}
.container-processus .chronologie .container-box-chrono1 .box-chrono span{      
        font-size: .8rem;       
}
.container-processus .chronologie .container-box-chrono1 .box-chrono span.first{
        font-size: .8rem;
}
.container-processus .chronologie .container-box-chrono2 .box-chrono span{
        font-size: .7rem;
}
.container-processus .chronologie .container-box-chrono2 .box-chrono span.first{
       /* margin-left: .5rem;*/
        font-size: .7rem;
}
.container-processus .chronologie .container-box-chrono2 .box-chrono{   
        height: 41.5rem;    
}
.container-processus .chronologie .container-box-chrono2 .line4{  
        height: 40rem;
}  
}