*{
    margin:0;
    padding: 0;
    font-family: "Montserrat", sans-serif;
    /* box-sizing: border-box; 
    overflow-x: hidden; */
}

header{
    position: fixed;
    z-index: 1000;
    width: 100%;
    left: 0;
    top: 0;
    right: 0;
   
}

.contain1{
    background-color: #CC0000;
    display: flex;
    align-items: center;
    height: 40px;
    width: 100%;
}


.first{
    width: 90%;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
}

.start{
    display: flex;
    align-items: center;
    justify-content: start;
    color: white;
    font-family: inter;
}

.start i {
    margin: 0px 10px 0px 0px;

}

.start p {
    margin: 0px 5px 0px 5px;
}

.info{
    display: flex;
    align-items: center;
    white-space: nowrap;
    
}

.info h6{
    margin: 0;
    font-size: 14px;
    font-weight: bolder;
}



.lieu{
    display: flex;
    align-items: center;
    
}

.mail{
    display: flex;
    align-items: center;
    
}

.between{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    font-weight: bold;
    color: white;
}

.end{
    display: flex;
    justify-content: end;
    align-items: center;

}

.end i {
    font-size: 16px;
    color: white;
    margin-left: 10px;
}



.marquee{
    overflow: hidden;
    white-space: nowrap; 
    box-sizing: border-box;
}

.marquee-content {
    display: inline-block;
    animation: marquee 10s linear infinite;
  }

  @keyframes marquee {
    from {
      transform: translateX(40%); 
    }
    to {
      transform: translateX(-100%); 
    }
  }

  .contain2{
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
    background-color: white;
    padding: 0.3rem;
    width: 100%;
    display: flex;
    align-items: center;
  }

  .second{
    width: 90%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 auto;
  }

  #menu-btn{
    display: none; 
}

  .logo{
    width: 100px;
    height: auto;
    
  }

  .logo img{
    width: 100%;
  }

  .menu{
    flex-grow: 1;
    display: flex;
    justify-content: center;
    
  }

  .menu .list li a{
    text-decoration: none;
    font-size: 18px;
    font-weight: bolder;
    color: black;
    text-transform: uppercase;
  }

  .menu .list li a:hover{
    color: #CC0000;
  }

  .menu .list li a.active{
    color: #CC0000;
  }

  .menu .list li {
    list-style: none;
  }

  .menu .list {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
    margin-top: 1rem;
    
  }

  .dropdown-menu{
    border: none;
  }

  .dropdown-menu li .dropdown-item{
    --bs-dropdown-link-active-bg: #fff;
}


  .call-to-action a{
    text-decoration: none;
    font-size: 18px;
    font-weight: bold;
    color: white;
    text-transform: uppercase;
    padding: 0.5rem;
    white-space: nowrap;
    background-color: #CC0000;
    border-radius: 5px;
    
  }
  
  .call-to-action a:hover{
    background-color: #000;
  }

/* fin header */
  
/* start accueil content */



.contain3{
    width: 90%;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
}

#carouselExampleCaptions{
    width: 100%;
    height: auto;
}
  

  .carousel-inner{
    width: 100%;
    height: 100%;
    margin: 0 auto;
  }

  .carousel-item{
    margin-top: 10%;
    position: relative; 
  }

  .carousel-item img{
    border-radius: 15px;
    height: 400px;
    object-fit: cover;
  }
  .carousel-caption {
    position: absolute; 
    top: 50%;
    left: 10%;
    transform: translateY(-50%); 
    color: white;
    text-align: left; 
    z-index: 2; 
    width: 60%; 
    text-align: justify;
}

.carousel-caption h5,
.carousel-caption p {
    margin: 0;
    padding: 0;
    line-height: 1.5;
    font-weight: 600;
    color: white;
    margin-bottom: 20px;
}

.carousel-caption h5{
    font-weight: bolder;
    text-transform: uppercase;
    white-space: nowrap;
    
}

.carousel-caption a{
    font-weight: bolder;
    text-decoration: none;
    color: white;
    text-transform: uppercase;
    background-color: #CC0000;
    padding: 0.5rem;
    border-radius: 5px;
}

.carousel-caption a:hover{
    background-color: #000;
}


.carousel-item .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 400px;
    background: rgba(0, 0, 0, 0.5); 
    z-index: 1;
    border-radius: 15px;
}

.fond{
    background-color: #CC0000;
    padding: 10rem;
    margin-top: -20%;
}

.service{
    display: flex;
    justify-content: center;
    align-items: center;
    /* z-index: 1; */
    margin-top: -3%;
    gap: 5%;
}

.title {
    margin-top: 3%;
}

.acc{
    text-transform: uppercase;
    background-color: white;
    /* padding: 0.5rem; */
    width: 300px;
    height: 158px;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 3;
    
}

.acc img {
    width: 64px;
    height: 64px;

}

.acc h3{
    font-weight: bold;
    margin-top: 10px;
    font-size: 14px;
}


.about{
    width: 90%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    gap: 5%;
    margin-top: 5%;

}

.parle{
    width: 50%
}

.parle h6{
    background-color: #CC0000;
    color: white;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    width: 40%;
    text-align: center;
    padding: 0.8rem;
    border-radius: 5px;
    margin-bottom: 15px;
}

.parle h4{
    color: #CC0000;
    font-size: 16px;
    font-weight: bolder;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.parle p {
    font-size: 16px;
    font-weight: 500;
}

.parle .chiffre{
    display: flex;
    justify-content: start;
    gap: 3%;
}

.parle .chiffre .projet{
    background-color: #CC0000;
    font-weight: bolder;
    color: white;
    padding: 0.8rem;
    text-align: center;
    border-radius: 5px;
    width: 14%;
    height: auto;
}

.parle .chiffre .projets{
    background-color: #000;
    font-weight: bolder;
    color: white;
    padding: 0.8rem;
    text-align: center;
    border-radius: 5px;
    width: 16%;
    height: auto;
}

.parle .chiffre .projets p , .parle .chiffre .projet p {
    margin-bottom: 0rem ;
}

.preuve{
    width: 50%;
}

.preuve img{
    width: 100%;
    border-radius: 5px;
} 

.title {
    display: flex;
    justify-content: center;
}

.title h5{
    font-size: 24px;
    font-weight: bolder;
    background-color: #CC0000;
    color: white;
    padding: 0.5rem 1rem 0.5rem 1rem;
    text-transform: uppercase;
    border-radius: 5px;
}

.team{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    justify-content: space-between;
    width: 90%;
    margin: 0 auto;
    gap: 15px;
    margin-top: 5%;
}


/* .team .present img{
    width: 100%;
    height: auto;
} */

.team .present .imgRes{
    width: 100%;
    height: 500px;
}


.team .present .imgRes  img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.team .present .personel{
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
    background-color: #CC0000;
    width: 70%;
    height: auto;
    margin: 0 auto;
    padding: 0.5rem 0.3rem 0.5rem 0.3rem;
    font-weight: bolder;
    color: white;
    opacity: 0;
}

.team .present .personel h5{
    font-size: 16px;
    font-weight: bolder;
}

.team .present .personel:hover{
    opacity: 1;
}

.parte{
    width: 90%;
    margin: 0 auto;
}

 .parte .swiper {
    width: 100%;
    height: 200px; 
    overflow: hidden;
}

.parte .swiper-wrapper {
    display: flex;
}

.parte .swiper-slide {
    flex: 0 0 auto; 
    width: calc(100% / 4); 
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    border: 2px solid #CC0000;
    border-radius: 5px;

}

.swiper-slide img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.temoignage{
    background-color: #CC0000;
    display: flex;
    justify-content: center;
    flex-direction: column;
}



.marq{
    width: 60%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    margin: 0 auto;
    
}

.title1 h5{
    color: white;
    font-weight: bolder;
    text-transform: uppercase;
    text-align: center;
    width: 100%;
    margin-left: auto;
    
    
}

/* testimonial */

#testimonialCarousel .carousel-inner .carousel-item{
    margin-top: 2% !important;
}

.testimonial {
    background-color: white;
    border-radius: 10px;
    text-align: center;
    padding: 20px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

.carousel-item .testimonial-img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    /* object-fit: cover;
    margin-bottom: 10px; */
}

.testimonial-content{
    display: flex;
    justify-content: center;
}

.testimonial-content img{
    width: 50px;
    height: 50px;
}

.testimonial-content .image2{
    margin-top: 10%;
}



.quote-left {
    top: 10px;
    left: 15px;
}

.quote-right {
    bottom: 10px;
    right: 15px;
}

.carousel-indicators button {
    background-color: #cc0000;
    width: 30px;
    height: 5px;
    border: none;
    border-radius: 3px;
}

.cadre{
    max-width: 90%;
    height: auto;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    place-items: center;
    justify-content: space-between;
    gap:3%;
    
}

.cadre1{
    padding-bottom: 1rem;
    box-shadow: 0 0 1px 1px rgba(204, 0, 0, 0.3);
    max-width: 400px;
}

.cadre1 .cadreImage{
    width: 100%;
    max-height: 250px;
}

.cadre1 img{
    width: 100%;
    border: 4px solid #CC0000;
    margin: 0 auto;
    height: 100%;
    object-fit: cover;
}

.cadre1 h4{
    font-size: 16px;
    font-weight: bolder;
    text-align: center;
    margin: 3%;
    margin-top: 10%;
}

.cadre1 p{
    font-size: 14px;
    font-weight: 500;
    margin: 3%;
    margin-bottom: 8%;
    
}

.cadre1 a {
    text-decoration: none;
    color: white;
    font-weight: bold;
    text-transform: uppercase;
    background-color: #CC0000;
    padding: 0.5rem 0rem;
    display: block;
    width: 30%;
    margin: 0  auto;
    text-align: center;
    border-radius: 5px;
    flex-wrap: nowrap;
    
}

.cadre1 a:hover{
    background-color: #000;
}

.dg{
    width: 90%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    margin-top: 5%;
}

.dg .left {
    width: 45%;
}

.dg .left .imagedg{
    width: 100%;
    height: 600px;
}

.dg .right {
    width: 50%;
}

.dg .left .imagedg img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

.dg .right p{
    font-weight: 500;
    text-align: justify;
}

/* end accueil content */

/* start about content */

.baniere{
    margin-top: 4%;
    width: 100%;
}


.baniere img {
    object-fit: cover;
    width: 100%;
    
}

.contenuA{
    width: 90%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}

.contenuA .rectangle{
    
    width: 45%;
    background-color: #F6DBDB;
    display: flex;
    justify-content: center;
    flex-direction: column;
    height: 380px;
    position: relative;
    box-sizing: border-box;
}

.contenuA .rectangle .images {
    width: 92%;
    height: 350px;
    display: flex;
    align-items: center;
    top: 20%;
    left: 8%;
    position: absolute;
    z-index: 1;
    overflow: hidden;
    margin-bottom: 8%;
}

.contenuA .rectangle .images img{
    width: 100%;
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
    display: block;
}

.contenuA .rectangle .triangle {
    position: absolute;
    border-bottom: 75px solid #000; 
    border-left: 69px solid transparent; 
    left: 60%;
    top: 0%;
    z-index: 3;
}

.contenuA .rectangle .text{
    background-color: #d10000;
    width: 25%;
    text-align: center;
    color: #fff;
    padding: 1rem 0.5rem;
    position: absolute;
    z-index: 2;
    left: 75%;
    top: 0%;
    font-weight: bold;
}

.contenuAb{
    display: flex;
    width: 90%;
    margin: 0 auto;
}

.aboutus{
    width: 50%;
}

.aboutus h5{
    font-weight: bold;
    margin-bottom: 15px;
}

.aboutus h6{
    font-weight: 600;
    color: #CC0000;
}

.caracter{
    width: 65%;
}

.caracter h5{
    font-weight: bold;
    color: #CC0000;
    text-align: center;
    margin-bottom: 8%;
    text-transform: uppercase;
}

.decrit{
    display: flex;
    background-color: #F6DBDB;
    align-items: center;
    justify-content: start;
    padding: 1.5rem;
    margin-left: 30px;
}

.decrit h5{
    font-weight: bold;
    text-transform: uppercase;
    font-size: 18px;
    text-align: start;
    margin-left: 40px;
    margin-bottom: 0;
    color: #000;
}

.num{
    background-color: #CC0000;
    color: white;
    width: 69px;
    height: 69px;
    border-radius: 50%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: bold;
    position: absolute;
    margin-top: 0.5%;

    
}

.num p {
    margin: 0;
}

.imageP{
    width: 40%;
    display: flex;
    justify-content: end;
    margin-top: 6%;
}

.contenuAb .imageP .images {
    width:25%;
    height: 290px;
    display: flex;
    align-items: center;
    margin-top: 3%;
    margin-right: 3%;
    position: absolute;
    z-index: 1;
    overflow: hidden;
    margin-bottom: 8%;
}

.contenuAb .imageP .images img{
    width: 100%;
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
    display: block;
}

.contenuAb .imageP .back{
    
    width: 50%;
    background-color: #CC0000;
    display: flex;
    height: 360px;
   
}

.contenu1{
    width: 90%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}


.nosServices{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    justify-content: space-between;
    width: 90%;
    margin: 0 auto;
    gap: 5%;
}

.nosServices .accs{
    background-color: #F6DBDB;
    text-transform: uppercase;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    /* padding: 1rem 0rem; */
    height: 158px;
}

.nosServices .accs h3{
    font-weight: bold;
    margin-top: 10px;
    font-size: 14px;
}

.nosServices .accs:hover{
    background-color: #CC0000;
    color: white;
}

.nosServices .accs:hover .icon path{
  fill: white;
  /* transition: fill 0.3s ease; */
}

.h5{
    text-align: center;
    font-weight: bold;
    color: #CC0000;
    margin-bottom: 4%;

}

.titles h5{
    text-align: center;
    font-weight: bold;
    color: #CC0000;
    line-height: 2rem;
    margin-bottom: 4%;
    text-transform: uppercase;
}


.partes{
    width: 90%;
    margin: 0 auto;
}


.partes .swiper {
    width: 100%;
    height: 300px; 
    overflow: hidden;
}

.partes .swiper-wrapper {
    display: flex;
}

.partes .swiper-slide {
    flex: 0 0 auto; 
    width: calc(100% / 5); 
    height: 250px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    border: 2px solid #CC0000;
    padding: 1rem;

}

/* end about content */

.digital{
    width: 40%;
}

.digital h5{
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 12px;
    line-height: 2;
    color: #CC0000;
    font-size: 24px;
}

.digital p {
    font-size: 14px;
    text-align: justify;
    margin-bottom: 35px;
    
}

.digital a{
    text-decoration: none;
    text-transform: uppercase;
    background-color: #CC0000;
    color: #fff;
    font-weight: bold;
    padding: 1rem;
    border-radius: 5px;
    white-space: nowrap;
    box-sizing: border-box;
    display: inline-block;
    overflow: hidden;
}

.digital a:hover{
    background-color: #000;
}

.devs{
    width: 50%;
    display: flex;
    justify-content: space-between;
    position: relative;
}

.dev{
    width: 50%;
    padding: 0rem 1.5rem;
    position: relative;
    border: 4px solid #fff;
    box-sizing: border-box;
}

.dev:hover{
    border: 4px solid #CC0000;
    border-radius: 10px;
}

.dev:hover a{
    background-color: #CC0000;
    color: white;
    border-bottom-right-radius: 5px;
    white-space: nowrap;
}

.dev h5{
    text-transform: uppercase;
    font-weight: 800;
    margin-top: 12px;
    line-height: 2;
    font-size: 24px;
}

.dev p {
    font-size: 14px;
    text-align: justify;
}

.dev a {
    position: absolute; 
    bottom: 0px;
    right: 0px; 
    text-decoration: none;
    color: #CC0000;
    font-weight: bold;
    text-transform: uppercase;
    padding: 0.5rem 1rem; 
    white-space: nowrap;
    min-width: 120px;
    
}


.dev img{
    margin-left: 90px;
    margin-top: -25px;
}

.contenu2{
    background-color: #F6DBDB;
    padding: 1rem;
}

.h4{
    font-size: 24px;
    color: #CC0000;
    font-weight: 800;
    text-align: center;
    margin-bottom: 35px;
}

.contenu2 .patern{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) ;
    justify-content: space-between;
    width: 100%;
    margin: 0 auto;
    gap: 2%;
    padding: 2rem;
}

.contenu2 .patern .patern-image{
    max-width: 250px;
    max-height: 150px;
    overflow: hidden;
    aspect-ratio: 16/9;
    padding: 1rem;
    background-color:#fff ;
}

.contenu2 .patern .hidden{
    display: none;
}

.contenu2 .patern .patern-image img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.contenu2 a{
    text-decoration: none;
    background-color: #000;
    color: #fff;
    padding: 0.5rem;
    border-radius: 5px;
    display: block;
    width: 10%;
    margin: 0  auto;
    text-align: center;
    font-weight: bold;
}

/* accompagnement digital end */

/* MARKETING AND DEV START */

.baniere2{
    margin-top: 4%;
    width: 100%;
}


.baniere2 img {
    object-fit: cover;
    width: 100%;
    
}

.presentMarket{
    width: 90%;
    margin: 0 auto;
}

.presentMarket h5{
    text-transform: uppercase;
    color: #CC0000;
    text-align: center;
    font-weight: 700;

}

.presentMarket p{
    text-align: justify;
}

.presentMarket p b {
    color: #CC0000;
}

.ref{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-auto-rows: 1fr;
    justify-content: space-between;
    width: 90%;
    margin: 0 auto;
    gap: 5%;
}

.ref .seo{
    /* margin-top: 15%; */
    text-transform: uppercase;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    /* padding: 1rem 0rem; */
    height: 158px;
}

.ref .seo h6{
    text-align: center;
    margin-top: 10px;
    font-weight: 800;
    line-height: 1.5;
}

.ref .seo:hover{
    background-color: #CC0000;
    color: white;
}

.ref .seo:hover  path{
    fill: #CC0000;
    /* transition: fill 0.3s ease; */
  }

  .ref .seo:hover  circle{
    fill: white;
   
  }

.cadres {
    max-width: 90%;
    height: auto;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    place-items: center;
    grid-auto-rows: minmax(auto, max-content);
    justify-content:center !important; 
    gap: 3%;
    border-radius: 10px;
    align-items: start !important; 
    text-align: center !important; 
    position: relative;
}

.cadres .price  p{
    text-decoration: none;
    text-transform: uppercase;
    background-color: #F6DBDB;
    font-weight:600;
    padding: 0.3rem;
    border-top-left-radius: 5px;
    position: absolute;
    margin-left: 0px;
    margin-top: -148px;
    /* font-size: 18px; */
}

.cadres .prices  p{
    text-decoration: none;
    /* text-transform: uppercase; */
    background-color: #F6DBDB;
    font-weight:600;
    padding: 0.3rem;
    position: absolute;
    margin-left: 72px;
    margin-top: -30px;
    /* font-size: 18px; */
    white-space: nowrap;
}

.cadres1{
    padding-bottom: 1rem;
    box-shadow: 0 0 1px 1px rgba(204, 0, 0, 0.1);
    border-radius: 10px;
    min-height: 300px;
    position: relative;
    max-width: 300px;
    
}

.cadres1 img{
    width: 100%;
    margin: 0 auto;
}

.cadres1 h4{
    font-size: 16px;
    font-weight: bolder;
    text-align: center;
    margin: 3%;
    
}

.cadres1 p{
    font-size: 14px;
    font-weight: 500;
    margin: 3%;
    margin-bottom: 8%;
    /* white-space: nowrap; */
    
}

.cadres1 a {
    text-decoration: none;
    color: white;
    font-weight: bold;
    text-transform: uppercase;
    background-color: #CC0000;
    padding: 0.5rem 0rem;
    display: block;
    width: 80%;
    margin: 0  auto;
    text-align: center;
    border-radius: 5px;
    white-space: nowrap;
    font-size: 14px;
    
}

.cadres1 a:hover{
    background-color: #000;
}

.cadres1 ul li {
    text-align: start;
    font-size: 12px;
}
/* MARKETING and DEV END*/

/* communautaire */
.cadres1 .cardImg{
    width: 100%;
    max-height: 150px;
    overflow: hidden;
}

.cadres1 .cardImg img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.voir-plus-btn{
    border: none;
    background-color: white;
    color: #CC0000;
    font-weight: 600;
    position: absolute;
    bottom: 0;
    right: 0;
    margin-top: 12px;
    padding-right:1rem;
    
}


.paras.expanded {
    max-height: none;
  }


.paras{
    line-height: 1.5; 
    max-height: calc(1.5em * 4); 
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    position: relative;
   
   
}
/* end communautaire */

/* seminaire */

    .titreH4{
        text-transform: uppercase; 
        font-weight: bold; 
        color: #cc0000;
        text-align: center; 
        margin-bottom: 20px; 
        font-size: 24px;
    }

    .semi{
        width: 90%;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        /* gap: 50px; */
    }

    .semi .caracter .caract .carract{
        position: relative;
    }

    .semi .caracter .caract .decrit p{
        font-weight: 600;
        font-size: 16px;
        text-align: start;
        margin-left: 40px;
        margin-bottom: 0;
        color: #000;
    }

    .semi .caracter .caract .num{
        background-color: #CC0000;
        color: white;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 16px;
        font-weight: bold;
        position: absolute;
        top: 40%;
        left: 3%;
        transform: translate(-50%, -50%); 
    }

    .semi .ref{
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        justify-content: space-between;
        width: 100%;
        margin: 0 auto;
        gap: 5%;
    }

    .semi .refs{
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        grid-template-rows: 1fr ;
        justify-content: space-between;
        width: 100%;
        height: auto;
        margin: 0 auto;
        gap: 5%;
        bottom: 10px;
    }

    .semi .refs .sujet{
        padding: 1rem;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 5px;
        box-shadow: 
        1px 1px 1px rgba(204, 0, 0, 0.1),  
        -1px -1px 1px rgba(204, 0, 0, 0.1),
        -1px 1px 1px rgba(204, 0, 0, 0.1), 
        1px -1px 1px rgba(204, 0, 0, 0.1);  
       
    } 

    .semi .refs .sujet h6{
        font-size: 14px;
        text-transform: uppercase;
        font-weight: 600;
    }

    .semi .refs .sujet a{
        text-decoration: none;
        color: #000;
    }


    .semi .liencata a{
        text-align: center;
        text-decoration: none !important;
        color: white !important;
        background-color: #CC0000;
        text-transform: uppercase;
        font-size: 14px;
        padding: 0.8rem 0rem;
        font-weight: bold;
        border-radius: 2px;
        display: block;
        width: auto;
        max-width: 25%;
        margin: 0 auto;
        margin-top: 50px;

    }

    .semi .refer{
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
        justify-content: center;
        width: 100%;
        margin: 0 auto;
        gap: 2%;
    }

    .semi .refer .imageCard{
        width: 160px;
        max-height: 110px;
        border: 2px solid #CC0000;
        padding: 0.5rem;
    }
    .semi .refer .imageCard img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .semi .tableau{
        overflow-x: auto;
    }

    .semi .tableau table {
        
        width: 100%;
        border-collapse: collapse; 
    }
    
    .semi .tableau thead {
        border: 1px solid black;
       
    }
    
    .semi .tableau tr {
        border-bottom: 1px solid black; 
    }
    
    .semi .tableau thead th,
    .semi .tableau tbody td {
        padding: 1rem;
        text-align: center;
        border-left: 1px solid black;
        border-right: 1px solid black;
        min-width: 150px;
    }
    
    
    .semi .firstImage{
        display: flex;
        justify-content: center;
        width: 100%;
        margin-bottom: 15px;
        gap: 3%;
       
    }

    .semi .firstImage .imgcad{
        width: 400px;
        height: 450px;
        border-radius: 5px;
    }

    .semi .firstImage .imgcad img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 5px;
      
    }
    

    .semi .firstImage .imagCa{
        width: 350px;
        max-height: 400px;
        border-radius: 5px;
     
        
    }

    .semi .firstImage .imagCa img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 5px;
    }
   

    .semi .secondImg{
        display: flex;
        justify-content: center;
        gap: 3%;
        width: 100%;
    }
    
    .semi .secondImg .imagSec{
        width: 400px;
        max-height: 250px;
        border-radius: 5px;
    }

    .semi .secondImg .imagSec img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 5px;
    }

    .video-container {
        position: relative;
        width: 740px;
        height: 250px;
        margin: 0 auto; 
    }
    
    .video-thumbnail {
        width: 100%;
        height: 100%;
        border-radius: 10px; 
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); 
    }
    
    .play-button {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 80px; 
        height: 80px;
        background-color: rgba(204, 0, 0); 
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
    }
    
    .play-button img {
        width: 30px; 
        height: auto;
    }
    
/* seminaire end */

/* contact start */

.baniere1{
    margin-top: 4%;
    width: 100%;
    height: 250px;
    background-color: #CC0000;
    display: flex;
    justify-content: center;
    align-items: center;
}

.baniere1 h5{
    font-size: 32px;
    color: white;
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;
    
}

.contenu{
    width: 90%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 5%;
    
}

.contenu .adresse{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: #F6DBDB;
    height: 150px;
    text-align: center;
    border-radius: 5px;
    margin-bottom: 15px;
}

.contenu .adresse i {
    font-size: 24px !important;
    color: #CC0000;
}

.contenu .adresse h5{
    text-transform: uppercase;
    font-weight: bold;
}

.contenu .adresse h6{
    font-weight: bold;
}

.contenu .adresse:hover{
    background-color: #CC0000;
    color: #fff;
}

.contenu .adresse:hover i {
    color: #fff;
}

.contenuH5 h5{
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 28px;
    color: #CC0000;
}

.contenuMap{
    width: 90%;
    display: flex;
    margin: 0 auto;
    gap: 2%;

}


.contenuMap .notremap{
    margin-top: 50px;
    width: 50%;
    /* margin-right: 5%; */
}

.contenuMap .notremap iframe{
    width: 100%;
}

.contenuMap .formulaire{
    margin-top: 50px;
    width: 50%;
    /* margin-left: 5%; */
    background-color: rgba(204, 0, 0, 0.4);
    border-radius: 5px;
    padding-bottom: 2%;
}

.contenuMap .formulaire form {
    display: flex;
    flex-direction: column; 
    align-items: center;
    margin-top: 5%;
    justify-content: center;
}

.contenuMap .formulaire form .present {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 0 auto;
    gap: 1%;
}

/* .contenuMap .formulaire input{
    width: 45%;
    margin-bottom: 2%;
    padding: 0.5rem;
    border: none;
    border-radius: 3px; */
    /* display: flex;
    justify-content: center; */
    
/* } */

.contenuMap .formulaire form .present .div{
    width: 45%;
    /* margin: 0 auto; */
    margin-bottom: 2%;

}

.contenuMap .formulaire .present .div  input{
    width: 100%;
    margin-bottom: 2%;
    padding: 0.5rem;
    border: none;
    border-radius: 3px;
    /* display: flex;
    justify-content: center; */
    
}

.contenuMap .formulaire input::placeholder{
    color: #000;
}

.contenuMap .formulaire textarea::placeholder{
    color: #000;
   
}

.contenuMap .formulaire select{
    width: 91%;
    margin: 2%;
    padding: 0.5rem;
    background-color: #fff;
    border: none;
    border-radius: 3px;
    
}

.contenuMap .formulaire select option{
    font-size: 14px;
}

.contenuMap .formulaire textarea{
    width: 91%;
    margin: 2%;
    height: 180px;
    background-color: #fff;
    border: none;
    border-radius: 3px;
}

.contenuMap .formulaire button{
    background-color: #000;
    color: #fff;
    border: none;
    padding: 0.5rem 3rem;
    font-weight: bold;
    border-radius: 3px;
    text-transform: uppercase;
    text-align: center;
}

.accordion{
    width: 90%;
    margin: 0 auto;
}

.accordion-button {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.accordion-icon {
    width: 16px;
    height: 16px;
    display: inline-block;
    margin-left: auto; /* Place à droite */
    background-color: transparent;
    border: none;
    transition: transform 0.3s ease;
}

/* Icône "plus" par défaut */
.accordion-button.collapsed .accordion-icon {
    content: '+';
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="black" class="bi bi-plus" viewBox="0 0 16 16"><path d="M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5a.5.5 0 0 1 .5-.5z"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
}

/* Icône "croix" quand l'élément est ouvert */
.accordion-collapse.show + .accordion-header .accordion-icon,
.accordion-button:not(.collapsed) .accordion-icon {
    content: '×';
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="black" class="bi bi-x" viewBox="0 0 16 16"><path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
}

.accordion-button::after {
    content: none; /* Supprime les chevrons par défaut */
}

.accordion-button {
    background-color: transparent; 
    border: none; 
    box-shadow: none; 
    /* padding: 0;  */
    font-size: 18px; 
    color: inherit;
    /* text-align: left;  */
    display: flex;
    justify-content: space-between;
    align-items: center;
    outline: none;
}

.accordion-button:focus {
    outline: none; 
    box-shadow: none; 
    border: none; 
}

.accordion-item {
    border: none; 
    border-bottom: 1px solid #d9d9d9;
    border-radius: none;
}

.accordion-button:not(.collapsed) {
    background-color: transparent; 
    color: inherit; 
    box-shadow: none; 
    
}
.accordion-collapse {
    border: none;
}

.accordion-body {
    background-color: transparent; 
    padding: 1rem;
    font-weight: 200;
    
}


/* end contact  */

/* start actualité */
.baniereact{
    margin-top: 4%;
    width: 100%;
    height: 400px;
    position: relative;
}

.baniereact img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.baniereact .overlayB {
    width: 100%;
    /* margin-top: 4%; */
    background-color: #000;
    position: absolute;
    /* top: 0; */
    left: 0;
    /* width: 100%; */
    height: 400px;
    background:rgba(204, 0, 0, 0.4); 
    z-index: 1;
    /* border-radius: 15px; */
}

.actu{
    width: 20%;
    display: flex;
    justify-content: center;
    margin: 0 auto;
    z-index: 2;
    
}

.actu h5{
    text-align: center;
    background-color: #CC0000;
    padding: 0.5rem;
    color: #fff;
    text-transform: uppercase;
    font-weight: bold;
    border-radius: 5px;
    white-space: nowrap;
    position: absolute;
    top: 75%;
    transform: translateY(-50%);
    z-index: 2;
}
/* end actualité */

/* lireActu */
    .lire{
        margin-top: 8% !important;
        width: 90%;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
    }

    .lire .actuGauche{
        width: 60%;
    }

    .lire .actuGauche h1{
        text-transform: uppercase;
        line-height: 2;
        font-weight: bold;
        color: #CC0000;
       
    }

    .lire .actuGauche img{
        width: 100%;
        object-fit: cover;
        height: 300px;
    }

    .lire .actuGauche p{
        margin-top: 25px;
        text-align: justify;
    }

    .lire .bottom{
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-top: 1px solid #dedede;
        border-bottom: 1px solid #dedede;
        margin-top: 25px;
        margin-bottom: 25px;
    }

    .lire .bottomRight{
        display: flex;

    }

    .lire .bottomRight .coeur{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-left: 60px;
    }

    .lire .bottomRight .coeur i{
        color: #CC0000;
        margin-top: 11px;
        margin-right: 5px;
    }

    .lire .bottomLeft i{
        margin-right: 5px;
        margin-top: 11px;
        color: black;
    }

    .lire .bottomLeft p {
        color: #CC0000;
        font-weight: 600;
    }


    .lire .bottomLeft {
       display: flex;
       justify-content: space-between;
       align-items: center;
       gap: 10px;
    }

    .lire .actuDroit{
        width: 35%;
        
    }

    .lire .actuDroit .category{
        background-color: rgb(217, 217, 217, 0.5);
        border-radius: 8px;
        padding: 2rem;
    }

    .lire .actuDroit .category h5{
        font-weight: bold;
        text-transform: uppercase;
        margin-bottom: 1rem;
    }

    .lire .actuDroit .category1{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem;
        background-color: #fff;
        margin-top: 10px;
        border-radius: 5px;
    }

    .lire .actuDroit .category1:hover{
        background-color: #CC0000;
        color: #fff;
    }

    .lire .actuDroit .galery{
        background-color: rgb(217, 217, 217, 0.5);
        padding: 2rem;
        border-radius: 5px;
        
    }

    .lire .actuDroit .galery h5{
        font-weight: bold;
        text-transform: uppercase;
        margin-bottom: 1rem;
    }

    .galery .imageG{
        width: 100%;
        display: grid;
        justify-content: space-between;
        margin-top: 5px;
        
        
    }

    .lire .actuDroit .galery .imageG img{
        width: 49%;
        height: 150px;
        object-fit: cover;
        border-radius: 5px;
    }
/* end lireActu */
/* footer */


.footer{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    flex-direction: column;
    background-color: #CC0000;
    /* position: fixed; */
}

.footer .menuF{
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.footer .menuF a{
    display: flex;
    align-items: center;
}

.footer img{
    width: 10%;
    margin: 50px auto;
    margin-bottom: 0;
    margin-top: 0;
    
}

.footer .menuF .list1 {
    display: flex;
    justify-content: center;
    align-items: center;
   
   
}

.footer .menuF .list1 li a{
    text-decoration: none;
    margin-right: 25px;
    font-size: 18px;
    font-weight: bolder;
    color: white;
    text-transform: uppercase;
}

.footer .menuF .list1 li{
    list-style: none;
}

.info1{
    display: flex;
    align-items: center;
    white-space: nowrap;
    gap: 5px;
    color: white;
    justify-content: center;
    
}

.info1 h6{
    margin: 0;
    font-size: 14px;
    font-weight: bolder;
}

.info1 p {
    margin: 0;
}

.end1{
    
    
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1%;
    margin-top: 1%;
    color: white;
}

.end1 a i{
    color: white;
}

.phone{
    display: flex;
    align-items: center;
    gap: 8px;
}

.copy{
    width: 80%;
    color: white;
    font-weight: 600;
    display: flex;
    justify-content: center;
    padding-top: 1rem;
    border-top: 1px solid white;
    /* margin-top: 1%; */
    margin: 50px auto;
}

/* end footer */

@media screen and (max-width: 360px) {
    .lire{
        display: block;

    }

    .lire .actuGauche, .lire .actuDroit{
        width: 100%;
    }

    .lire .actuGauche{
        margin-top: 100px;
    }
    .lire .actuGauche  h1{
        font-size: 18px;
    }
}

@media  screen and (min-width: 200px) and (max-width: 360px){
    .first .start{
        display: none;
    }

    .first .between{
        font-size: 12px;
        width: 100%;
    }

    .first .end{
        display: none;
    }

    .call-to-action a{
        font-size: 12px;
    
      }
    
    #menu-btn{
        display: block;
        margin-right: 10%;
    }
    .menu {
        display: none; 
        flex-direction: column;
        background-color: #fff;
        position: absolute;
        top: 90%;
        right: 10%;
        /* width: 60px; */
        z-index: 100;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
        border-radius: 10px;
        padding: 0rem 1rem 0rem 1rem;
        
        
    }

    .menu.active {
        display: flex; 
        flex-direction: column;
        width: auto !important;
       
    }

    .menu .list{
        flex-direction: column;
        align-items: start;
        padding: 1rem !important;
    }

    .menu .list ul li a:hover{
        color: #CC0000;
    }

    .second{
        margin: 0 auto;
        width: 85%;
        
    }

    .second .logo{
        margin-right: 34%;
    }


    .second .prestation a{
        font-size: 12px;
    }


    .dropdown-menu {
        position: relative !important; 
        width: 100%; 
        margin-top: 0% !important;
        padding: 0% !important;
        margin-bottom: 15px !important;
        
    }

   
    .dropdown {
        width: 100%; 
    }

    .dropdown-menu ul{
        padding: 0% !important;
    }
    .dropdown-menu li .dropdown-item{
        /* text-decoration: underline !important; */
        font-size: 10px !important;
        color: #CC0000 !important;
        padding: 5px !important;
        border-bottom:1px solid #d9d9d993 ;
        --bs-dropdown-link-active-bg: #fff;
    }

    

    .carousel-item{
        margin-top: 25% !important;
        
      }
    
    .carousel-caption{
        top: 33% !important;
        padding: 0;
    }

    .carousel-caption h5{
    
    line-height: 1.2;
    margin-bottom: 10px;
   
}

.carousel-item img{
        border-radius: 10px;
        height: 250px;
}
    
    
.carousel-caption h5{
        font-size: 12px !important;
}
   
.carousel-caption p{
        font-size: 11px !important;
        margin-bottom: 10px;
}

.carousel-caption a{
        font-size: 10px;
        color: white;
        text-transform: uppercase;
        background-color: #CC0000;
        padding: 0.5rem;
        border-radius: 5px;
}
    
.service{
margin-top: -16% !important;
gap: 1%;
}

.fond{
    margin-top: -35%;
    padding: 4rem;
}

.acc{
  
    width: 90px !important;
    height: 80px !important;
}

.acc img {
    width: 24px;
    height: 24px;

}

.acc h3{
    font-weight: bold;
    margin-top: 10px;
    font-size: 7px !important;
    text-align: center !important;
}

.about{
    display: block;
}

.parle {
    width: 100%;
}

.parle h6{
    font-size: 14px !important;
    width: 60%;
    margin: 0 auto;
    text-align: center;
    white-space: nowrap !important;
}

.preuve{
    width: 100%;
}

.para1{
    margin-top: 20px;
    font-size: 14px !important;
    font-weight: 400 !important;
}


.preuve img{
    width: 100%;
    height: 250px !important;
}




.parle .chiffre .projet {
    width: 20% !important;
    height: 45px;
    margin-bottom: 15px;

}

.parle .chiffre .projets {
    width: 20% !important;
    height: 45px;
    margin-bottom: 15px;
}

.parle .chiffre .projet p {
    font-size: 11px !important;
}

.parle .chiffre .projets p {
    font-size: 11px !important;
}

.parle p{
    font-weight: bold;
}

.title h5{
    font-size: 14px !important;
    text-align: center;
    white-space: nowrap !important;
}

/* .team{
    grid-template-columns: repeat(auto-fill, minmax(125px, 1fr));
} */

.team .present .personel{
   
    top: 25%;
    transform: translateY(-25%);
    width: 90%;
   
}
.team .present .personel h5{
    font-size: 11px;
    font-weight: 600;
}
.team .present .personel P{
    font-size: 10px;
    font-weight: 500;
    
}


.marq{
    width: 80%;
}

.marquees {
    height: 100px;
    
}

.marquees .cad{
    
    height: 100px;
    
}
.parte{
    margin-bottom: 5%;
}

.title1 h5{
    font-size: 14px !important;
    text-align: center;
    white-space: nowrap !important;
    
}

.marq{
    width: 90%;
}

.testimonial-content img{
    width: 25px;
    height: 25px;
}

.testimonial-content p {
    font-size: 11px;
    line-height: 1.5;
}



.swiper-slide {
   height: 100px;
}

.cadre{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    
    
}


.cadre1 h4{
    font-size: 13px;
    font-weight: 600;
    
}

.cadre1 p{
    font-size: 12px;
    font-weight: 400;
    margin-top: 8% !important;
    
}

.cadre1 a {
    font-size: 11px;
    font-weight: 500;
    border-radius: 3px;
    width: 50%;
    flex-wrap: nowrap;
    
}

.dg{
    display: block;
}

.dg .left{
    width: 100%;
    margin-bottom: 20px;
}

.dg .right{
    width: 100%;
}

.dg .right p{
    font-weight: 500;
    text-align: justify;
}

.para{

    font-size: 12px !important;
    font-weight: 400 !important;
}

footer{
    margin-top: 20px;
}

.footer .menuF .list1 li a{
   display: none;
}

.footer p {
    font-size: 12px;
}

.footer .info1 p {
    display: none;
}

.footer .info1 {
    display: block;
    margin: 0 auto;
    font-weight: 400;
    font-size: 14px;
}

.footer .lieu{
    margin-bottom: 10px;
    gap: 5px;

}


.footer .mail{
    margin-bottom: 10px;
    gap: 5px;

}

.footer .phone{
    margin-bottom: 10px;
    gap: 5px;

}

/* about200 */

.baniere{
    margin-top: 10%;
    width: 100%;
}

.contenuA{
    display: block;
    
}

.contenuA .rectangle{
    
    width: 100%;
    height: 380px;
   
}

.contenuA .rectangle .images {
    width:80%;
    height: 340px;
    /* top: 32%; */
    left: 20%;
    margin-bottom: 10%;
}

.contenuA .rectangle .triangle {
    position: absolute;
    border-bottom: 68px solid #000; 
    border-left: 50px solid transparent; 
    left: 45%;
    top: 0%;
    z-index: 3;
}

.contenuA .rectangle .text{
    background-color: #d10000;
    width: 35%;
    text-align: center;
    color: #fff;
    padding: 0.5rem 0.2rem;
    position: absolute;
    z-index: 2;
    left: 65%;
    top: 0%;
    font-weight: bold;
    font-size: 12px;
}

.aboutus{
    width: 100%;
    margin-top: 15%;
}

.aboutus h5{
    font-size: 14px;
}

.contenuAb{
    display: block;
}

.caracter{
    width: 100%;
    
}

.caracter h5{
    font-size: 14px;
}

.decrit h5{
    font-size: 13px;
}

.imageP{
    display: none;
}

.car{
    padding-top: 1% !important;
}

.h5{
    font-size: 14px;
}

.nosServices{
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    margin-top: 12% !important;
}

.nosServices .accs h3{
    text-align: center;
    font-size: 10px;
}

/* end about200 */

/* contact */

.contenu {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1%;
}
.contenuMap{
    display: block;
}

.contenuMap .notremap{
    /* margin-top: 50px; */
    width: 100%;
    margin-right: 0;
}

.contenuMap .notremap iframe{
    /* margin-top: 50px; */
    width: 100%;
    margin-right: 0;
}

.contenuMap .formulaire{
    margin-top: 50px;
    width: 100%;
    margin-left: 0;
    background-color: rgba(204, 0, 0, 0.4);
    border-radius: 5px;
}

.baniere1 h5{
    font-size: 24px;
}

.baniere1{
    height: 150px;
}

.contenuMap .formulaire form .present {
    display: block;
}


.contenuMap .formulaire form .present .div{
    width: 94%;
    margin: 2%;
    
}

.contenuMap .formulaire form .present .div{
    width: 96%;
    margin: 2%;
    
}

.contenuMap .formulaire input::placeholder{
    color: #000;
    font-size: 11px;
}

.contenuMap .formulaire textarea::placeholder{
    color: #000;
    font-size: 11px;
}

.contenuMap .formulaire select{
    width: 96%;
    font-size: 11px;
}

.contenuMap .formulaire select option{
    font-size: 11px;
}
.contenuMap .formulaire textarea{
    width: 96%;
    
}

.contenuMap .formulaire button{
    font-size: 14px;
    margin-bottom: 8px;
}

.contenuH5 h5{
    font-size: 18px;
}

.contenu .adresse i {
    font-size: 16px !important;
    color: #CC0000;
}

.contenu .adresse h5{
    font-size: 14px;
}

.contenu .adresse h6{
    font-size: 14px;
}

.accordion-button {
    font-size: 14px;
}

.accordion-body {
    font-size: 13px;
}
/* end contact */

/* actustart */
.baniereact{
    height: 250px;
}

.baniereact .overlayB {
    height: 250px;
    
}


.actu h5{
    font-size: 12px;
    /* top: 55%; */
    z-index: 2;
}
/* actuEnd */


/* accompagne200 start */
.baniere2{
    margin-top: 10%;
    
}

.contenu1{
    display: block;
}

.contenu1 .devs{
    display: block;
    width: 100%;
   
}

.contenu1 .digital{
    width: 100%;
    margin-bottom: 65px;
   
}

.contenu1 .digital h5{
   font-size: 18px;
}

.contenu1 .devs .dev{
    width: 100%;
    margin-bottom: 45px;
}

.contenu1 .dev p{
    margin-bottom: 65px;
}



.contenu2 .patern{
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)) ;
    
}

.contenu2 .patern-image{
    margin-bottom: 2%;
}

.contenu2 a{
    width: 40%;
}

/* accompagne200 end*/

/* DEV ET MARKET 200 */
.ref{ 
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
}

.ref .seo{
    padding: 0rem 1rem;
    height: 100px;
}

.ref .seo h6{
    text-align: center;
    margin-top: 10px;
    font-weight: 600;
    line-height: 1.5;
    font-size: 10px;
}

.cadres .prices  p{
    
    margin-left: 99px;
    margin-top: -32px;
    /* font-size: 18px; */
}

/* DEV ET MARKET END */

/* seminaire200 */

.semi .ref{
   
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    
}

.titreH4{
    font-size: 11px;
}

.semi .caracter .caract .decrit p{
   
    font-size: 10px;
    
}

.semi .caracter .caract .num{
    width: 40px;
    height: 40px;
    left: 6%;
    
}

.semi  p{
   
    font-size: 10px;
    
}

.semi .refs{
    
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
   
    
}

.semi .refs .sujet h6{
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 500;
    word-break: break-word;
}

.semi .liencata a{
    max-width: 80%;
    font-size: 10px;
    margin-top: 45%;
}

.semi .refer{
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
   
  
}

.semi .refer .imageCard{
    width: 140px;
}
/* seminaire end */

}

@media  screen and (min-width: 360px) and (max-width: 499px){
    .first .start{
        display: none;
    }

    .first .between{
        font-size: 12px;
        width: 100%;
    }

    .first .end{
        display: none;
    }

    .call-to-action a{
        font-size: 14px;
    
      }
    
    #menu-btn{
        display: block;
        margin-right: 10%;
    }
    .menu {
        display: none; 
        flex-direction: column;
        background-color: #fff;
        position: absolute;
        top: 90%;
        right: 10%;
        /* width: 60px; */
        z-index: 100;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
        border-radius: 10px;
        padding: 0rem 1rem 0rem 1rem;
        
        
    }

    .menu.active {
        display: flex; 
        flex-direction: column;
        width: auto !important;
       
    }

    .menu .list{
        flex-direction: column;
        align-items: start;
        padding: 1rem !important;
    }

    .menu .list ul li a:hover{
        color: #CC0000;
    }

    .second{
        margin: 0 auto;
        width: 85%;
        
    }

    .second .logo{
        margin-right: 34%;
    }


    .second .prestation a{
        font-size: 12px;
    }


    .dropdown-menu {
        position: relative !important; 
        width: 100%; 
        margin-top: 0% !important;
        padding: 0% !important;
        margin-bottom: 15px !important;
        
    }

   
    .dropdown {
        width: 100%; 
    }

    .dropdown-menu ul{
        padding: 0% !important;
    }
    .dropdown-menu li .dropdown-item{
        /* text-decoration: underline !important; */
        font-size: 14px !important;
        color: #CC0000 !important;
        padding: 5px !important;
        border-bottom:1px solid #d9d9d993 ;
    }

    

    .carousel-item{
        margin-top: 25% !important;
        
      }
    
    .carousel-caption{
        top: 33% !important;
        padding: 0;
    }

    .carousel-caption h5{
    
    line-height: 1.3;
    margin-bottom: 10px;
   
}

.carousel-item img{
        border-radius: 15px;
        height: 250px;
}
    
    
.carousel-caption h5{
        font-size: 14px !important;
}
   
.carousel-caption p{
        font-size: 12px !important;
        margin-bottom: 10px;
}

.carousel-caption a{
        font-size: 10px;
        color: white;
        text-transform: uppercase;
        background-color: #CC0000;
        padding: 0.5rem;
        border-radius: 5px;
}
    
    .service{
    margin-top: -16% !important;
    gap: 1.5%;
}

.fond{
    margin-top: -35%;
    padding: 5rem;
}

.acc{
  
    width: 95px !important;
    height: 80px !important;
}

.acc img {
    width: 24px;
    height: 24px;

}

.acc h3{
    font-weight: bold;
    margin-top: 10px;
    font-size: 8px !important;
    text-align: center !important;
}

.about{
    display: block;
}

.parle {
    width: 100%;
}

.parle h6{
    font-size: 14px !important;
    width: 60%;
    margin: 0 auto;
    text-align: center;
    white-space: nowrap !important;
}

.preuve{
    width: 100%;
}

.para1{
    margin-top: 20px;
    font-size: 14px !important;
    font-weight: 400 !important;
}


.preuve img{
    width: 100%;
    height: 250px !important;
}




.parle .chiffre .projet {
    width: 20% !important;
    height: 45px;
    margin-bottom: 15px;

}

.parle .chiffre .projets {
    width: 20% !important;
    height: 45px;
    margin-bottom: 15px;
}

.parle .chiffre .projet p {
    font-size: 11px !important;
}

.parle .chiffre .projets p {
    font-size: 11px !important;
}

.parle p{
    font-weight: bold;
}

.title h5{
    font-size: 14px !important;
    text-align: center;
    white-space: nowrap !important;
}
/* 
.team{
    grid-template-columns: repeat(auto-fill, minmax(px, 1fr));
} */

.team .present .personel{
   
    top: 25%;
    transform: translateY(-25%);
   
}
.team .present .personel h5{
    font-size: 12px;
    font-weight: 600;
}
.team .present .personel P{
    font-size: 12px;
    font-weight: 500;
    
}


.marq{
    width: 80%;
}

.marquees {
    height: 100px;
    
}

.marquees .cad{
    
    height: 100px;
    
}
.parte{
    margin-bottom: 5%;
}

.title1 h5{
    font-size: 14px !important;
    text-align: center;
    white-space: nowrap !important;
    
}

.marq{
    width: 90%;
}

.testimonial-content img{
    width: 25px;
    height: 25px;
}

.testimonial-content p {
    font-size: 16px;
    line-height: 1.5;
}



.swiper-slide {
   height: 100px;
}

.cadre{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    
    
}


.cadre1 h4{
    font-size: 13px;
    font-weight: 600;
    
}

.cadre1 p{
    font-size: 12px;
    font-weight: 400;
    margin-top: 8% !important;
    
}

.cadre1 a {
    font-size: 11px;
    font-weight: 500;
    border-radius: 3px;
    flex-wrap: nowrap;
    width: 50%;
}

.dg{
    display: block;
}

.dg .left{
    width: 100%;
    margin-bottom: 20px;
}

.dg .right{
    width: 100%;
}

.dg .right p{
    font-weight: 500;
    text-align: justify;
}

.para{

    font-size: 16px !important;
    font-weight: 400 !important;
}


.footer .menuF .list1 li a{
   display: none;
}

.footer p {
    font-size: 12px;
}

.footer .info1 p {
    display: none;
}

.footer .info1 {
    display: block;
    margin: 0 auto;
    font-weight: 400;
    font-size: 14px;
}

.footer .lieu{
    margin-bottom: 10px;
    gap: 5px;

}


.footer .mail{
    margin-bottom: 10px;
    gap: 5px;

}

.footer .phone{
    margin-bottom: 10px;
    gap: 5px;

}

/* about360 */

.baniere{
    margin-top: 10%;
    width: 100%;
}

.contenuA{
    display: block;
    
}

.contenuA .rectangle{
    
    width: 100%;
    height: 380px;
   
}

.contenuA .rectangle .images {
    width:80%;
    height: 350px;
    top: 15%;
    left: 20%;
    margin-bottom: 8%;
}

.contenuA .rectangle .triangle {
    position: absolute;
    border-bottom: 55px solid #000; 
    border-left: 50px solid transparent; 
    left: 58%;
    top: 0;
    z-index: 3;
}

.contenuA .rectangle .text{
    background-color: #d10000;
    width: 25%;
    text-align: center;
    color: #fff;
    padding: 0.5rem 0.2rem;
    position: absolute;
    z-index: 2;
    left: 75%;
    top: 0;
    font-weight: bold;
    font-size: 12px;
}

.aboutus{
    width: 100%;
    margin-top: 15%;
}

.contenuAb{
    display: block;
}

.caracter{
    width: 100%;
    
}

.decrit h5{
    font-size: 15px;
}

.imageP{
    display: none;
}

.car{
    padding-top: 1% !important;
}

.nosServices{
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    margin-top: 12% !important;
}

.nosServices .accs h3{
    text-align: center;
    font-size: 10px;
}

/* end about360 */

/* accompagne360 */

.baniere2{
    margin-top: 10%;
    
}

.contenu1{
    display: block;
}

.contenu1 .devs{
    display: block;
    width: 100%;
   
}

.contenu1 .digital{
    width: 100%;
    margin-bottom: 65px;
   
}

.contenu1 .digital h5{
   font-size: 18px;
}

.contenu1 .devs .dev{
    width: 100%;
    margin-bottom: 45px;
}

.contenu1 .dev p{
    margin-bottom: 65px;
}

/* .contenu1 .dev a{
    min-width: 80px;
    height: 50px !important;
    padding: 0;
    font-size: 12px;
} */

/* .dev:hover a{
    background-color: #CC0000;
    color: white;
    border-bottom-right-radius: 5px;
    font-size: 12px;
    white-space: nowrap;
} */

.contenu2 .patern{
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) ;
    
}

.contenu2 .patern-image{
    margin-bottom: 2%;
}

.contenu2 a{
    width: 35%;
}

/* accompagne360 end */

/* DEV ET MARKET 360 */

.ref{ 
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}

.ref .seo{
    padding: 0rem 1rem;
    height: 100px;
}

.ref .seo h6{
    text-align: center;
    margin-top: 10px;
    font-weight: 600;
    line-height: 1.5;
    font-size: 10px;
}

.cadres .prices  p{
    
    margin-left: 135px;
    margin-top: -30px;
    /* font-size: 18px; */
}

.cadres {
    gap: 5%;
}

.cadres1{
    margin-bottom: 55px;
}

/* DEV ET MARKET 360 END */

/* seminaire360 */

.semi .ref{
   
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    
}

.titreH4{
    font-size: 14px;
}

.semi .caracter .caract .decrit p{
   
    font-size: 11px;
    
}

.semi .caracter .caract .num{
    width: 40px;
    height: 40px;
    left: 6%;
    
}

.semi  p{
   
    font-size: 10px;
    
}

.semi .refs{
    
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    
    
}

.semi .refs .sujet h6{
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 500;
    word-break: break-word;
}

.semi .liencata a{
    max-width: 80%;
    font-size: 10px;
    margin-top: 100px;
}

.semi .refer{
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 5%;
  
}

.semi .refer .imageCard{
    width: 115px;
}

.semi .firstImage .imgcad{
    width: 200px;
    height: 250px;
    border-radius: 5px;
}

.semi .firstImage .imagCa{
    width: 150px;
    max-height: 200px;
    border-radius: 5px;
 
    
}
/* seminaire end */


/* contact */

.contenu {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1%;
}

.contenuMap .notremap{
    /* margin-top: 50px; */
    width: 100%;
    margin-right: 0;
}

.contenuMap .notremap iframe{
    /* margin-top: 50px; */
    width: 100%;
    margin-right: 0;
}

.contenuMap .formulaire form .present .div{
    width: 92%;
    margin: 2%;
}

.contenuMap .formulaire{
    margin-top: 50px;
    width: 100%;
    margin-left: 0;
    background-color: rgba(204, 0, 0, 0.4);
    border-radius: 5px;
}

.baniere1 h5{
    font-size: 24px;
}

.baniere1{
    height: 150px;
}

.contenuMap{
    display: block;
}

.contenuMap .formulaire form .present {
    display: block;
}

.contenuMap .formulaire input{
    width: 96%;
    margin: 2%;
    
}

.contenuMap .formulaire input::placeholder{
    color: #000;
    font-size: 11px;
}

.contenuMap .formulaire textarea::placeholder{
    color: #000;
    font-size: 11px;
}

.contenuMap .formulaire select{
    width: 96%;
    font-size: 11px;
}

.contenuMap .formulaire select option{
    font-size: 11px;
}
.contenuMap .formulaire textarea{
    width: 96%;
    
}

.contenuMap .formulaire button{
    font-size: 14px;
    margin-bottom: 8px;
}

.contenuH5 h5{
    font-size: 18px;
}

.contenu .adresse i {
    font-size: 16px !important;
    color: #CC0000;
}

.contenu .adresse h5{
    font-size: 14px;
}

.contenu .adresse h6{
    font-size: 14px;
}

.accordion-button {
    font-size: 14px;
}

.accordion-body {
    font-size: 13px;
}
/* end contact */

/* actuStart */
.baniereact{
    
    height: 300px;
}

.baniereact img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.baniereact .overlayB {
    height: 300px;
}

.actu h5{
    font-size: 10px;

}

/* actuEnd */

/* LireArticle */

.lire{
    display: block;
}

.lire .actuGauche{
    width: 100%;
    margin-top: 100px;
}

.lire .actuGauche  h1{
   font-size: 18px;
}


.lire .actuGauche img{
    height: 250px;
}

.lire .bottom{
    margin-top: 15px;
    margin-bottom: 15px;
}

.lire .bottomRight{
    display: flex;

}

.lire .bottomRight p{
    font-size: 12px;
}


.lire .bottomRight .coeur p{
    font-size: 12px;
    margin-right: 5px;
}

.lire .bottomRight .coeur i{
    color: #CC0000;
    margin-top: 8px;
    margin-right: 2px;
    font-size: 14px;
}

.lire .bottomLeft i{
    margin-right: 0px;
    margin-top: 8px;
    font-size: 14px;
}

.lire .bottomLeft p {
    font-size: 12px;
}

.lire .actuDroit{
    width: 100%;
    
}

/* LireArticle end*/

}

@media  screen and (min-width: 499px) and (max-width: 699px){
    .first .start{
        display: none;
    }

    .first .between{
        font-size: 12px;
        width: 100%;
    }

    .first .end{
        display: none;
    }


    
    #menu-btn{
        display: block;
        margin-right: 10%;
    }
    .menu {
        display: none; 
        flex-direction: column;
        background-color: #fff;
        position: absolute;
        top: 85%;
        right: 10%;
        /* width: 60px; */
        z-index: 100;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
        border-radius: 10px;
        padding: 0rem 1rem 0rem 1rem;
        
        
    }

    .menu.active {
        display: flex; 
        flex-direction: column;
        width: auto !important;
       
    }

    .menu .list{
        flex-direction: column;
        align-items: start;
        padding: 1rem !important;
    }

    .menu .list ul li a:hover{
        color: #CC0000;
    }

    .second{
        margin: 0 auto;
        width: 85%;
        
    }

    .second .logo{
        margin-right: 34%;
    }


    .second .prestation a{
        font-size: 12px;
    }


    .dropdown-menu {
        position: relative !important; 
        width: 100%; 
        margin-top: 0% !important;
        padding: 0% !important;
        margin-bottom: 15px !important;
        
    }

   
    .dropdown {
        width: 100%; 
    }

    .dropdown-menu ul{
        padding: 0% !important;
    }
    .dropdown-menu li .dropdown-item{
        /* text-decoration: underline !important; */
        font-size: 14px !important;
        color: #CC0000 !important;
        padding: 5px !important;
        border-bottom:1px solid #d9d9d993 ;
    }

    

    .carousel-item{
        margin-top: 25% !important;
        
      }
    
    .carousel-caption{
        top: 33%;
    }

    .carousel-caption h5{
    
    line-height: 1;
   
}

    .carousel-item img{
        border-radius: 15px;
        height: 250px;
    }
    
    
    .carousel-caption h5{
        font-size: 14px !important;
    }
   
    .carousel-caption p{
        font-size: 12px !important;
    }

    .carousel-caption a{
        font-size: 10px;
        color: white;
        text-transform: uppercase;
        background-color: #CC0000;
        padding: 0.5rem;
        border-radius: 5px;
    }
    
    .service{
    margin-top: -8%;
    gap: 1.5%;
}

.fond{
    margin-top: -30%;
    padding: 6rem;
}

.acc{
  
    width: 135px;
    height: 100px;
}

.acc img {
    width: 32px;
    height: 32px;

}

.acc h3{
    font-weight: bold;
    margin-top: 10px;
    font-size: 11px;
    text-align: center !important;
}

.parle h6{
    font-size: 14px !important;
    width: 80%;
    text-align: center;
    padding: 0.5rem 0rem !important;
    white-space: nowrap !important;
}

.para1.expanded {
    max-height: none;
  }


.para1{
    line-height: 1.5; 
    max-height: calc(1.5em * 4); 
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12px !important;
    font-weight: 400 !important;
}

.parle  .read-more1{
    display: block !important;
    font-weight: bold;
    background-color: #CC0000 !important;
    color: white;
    padding: 5px 8px 5px 8px;
    border-radius: 3px;
    border: none;
    cursor: pointer;
    margin-bottom: 20px;
}

.preuve img{

    height: 250px !important;
}

.parle .chiffre .projet {
    width: 24% !important;
    height: 50px;
}

.parle .chiffre .projets {
    width: 24% !important;
    height: 50px;
}

.parle .chiffre .projet p {
    font-size: 11px !important;
}

.parle .chiffre .projets p {
    font-size: 11px !important;
}

.parle p{
    font-weight: bold;
}

.title h5{
    font-size: 14px !important;
    text-align: center;
    white-space: nowrap !important;
}

.team .present .personel{
    top: 20%;
    transform: translateY(-20%);
    background-color: #CC0000;
    width: 90%;
    height: 70px;
}

/* .team{
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
} */



.marquees {
    height: 100px;
    
}

.marquees .cad{
    
    height: 100px;
    
}
.parte{
    margin-bottom: 5%;
}
.swiper-slide {
    height: 100px;
 }

.title1 h5{
    font-size: 14px !important;
    text-align: center;
    white-space: nowrap !important;
}
.marq{
    width: 90%;
}

.testimonial-content img{
    width: 25px;
    height: 25px;
}

.testimonial-content p {
    font-size: 16px;
    line-height: 1.5;
}

.cadre{
    grid-template-columns:  repeat(auto-fill, minmax(150px, 1fr));
}


.cadre1 h4{
    font-size: 13px;
    font-weight: 600;
    
}

.cadre1 p{
    font-size: 12px;
    font-weight: 300;
    margin-top: 8% !important;
    
}

.cadre1 a {
    font-size: 11px;
    font-weight: 500;
    border-radius: 3px;
    flex-wrap: nowrap;
    width: 50%;
}

.dg .right p{
    font-weight: 500;
    text-align: justify;
}

.para.expanded {
    max-height: none;
  }


.para{
    line-height: 1.5; 
    max-height: calc(1.5em * 6); 
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 16px !important;
    font-weight: 400 !important;
}

.right  .read-more{
    display: block !important;
    font-weight: bold;
    background-color: #CC0000 !important;
    color: white;
    padding: 5px 8px 5px 8px;
    border-radius: 3px;
    border: none;
    cursor: pointer;
    margin-bottom: 20px;
}


.footer .menuF .list1 li a{
    font-size: 12px;
}

.footer .info1 h6{
    font-size: 12px;
}

.footer  p{
    font-size: 12px;
}
.footer i {
    font-size: 12px;
    margin-left: 5px;
}

/* about699 */

.baniere{
    margin-top: 10%;
    width: 100%;
}

.baniere2{
    margin-top: 10%;
}

.contenuA{
    display: block;
    
}

.contenuA .rectangle{
    
    width: 100%;
    height: 380px;
   
}

.contenuA .rectangle .images {
    width:80%;
    height: 350px;
    top: 20%;
    left: 20%;
    margin-bottom: 8%;
}

.contenuA .rectangle .triangle {
    position: absolute;
    border-bottom: 72px solid #000; 
    border-left: 70px solid transparent; 
    left: 62%;
    top: 0%;
    z-index: 3;
}

.contenuA .rectangle .text{
    background-color: #d10000;
    width: 25%;
    text-align: center;
    color: #fff;
    padding: 0.5rem 0.2rem;
    position: absolute;
    z-index: 2;
    left: 75%;
    top: 0%;
    font-weight: bold;
    font-size: 12px;
}

.aboutus{
    width: 100%;
    margin-top: 15%;
}

.caracter{
    width: 90%;
    margin: 0 auto;
}

.decrit h5{
    font-size: 15px;
}

.imageP{
    display: none;
}

.car{
    padding-top: 1% !important;
}

.nosServices{
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    margin-top: 12% !important;
}

.nosServices .accs h3{
    text-align: center;
    font-size: 10px;
}

/* end about699 */

/* seminaire499 */

.semi .ref{
   
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    
}

.titreH4{
    font-size: 14px;
}

.semi .caracter .caract .decrit p{
   
    font-size: 14px;
    
}

.semi .caracter .caract .num{
    width: 40px;
    height: 40px;
    left: 6%;
    
}

.semi  p{
   
    font-size: 14px;
    
}

.semi .refs{
    
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    
    
}

.semi .refs .sujet h6{
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 500;
    word-break: break-word;
}

.semi .liencata a{
    max-width: 50%;
    font-size: 10px;
    margin-top: 100px;
}

.semi .refer{
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 5%;
  
}

.semi .refer .imageCard{
    width: 115px;
}
/* seminaire end */


/* LireArticle */
.lire{
    display: block;
}

.lire .actuGauche{
    width: 100%;
    margin-top: 100px;
}

.lire .actuGauche img{
    height: 250px;
}

.lire .bottom{
    margin-top: 15px;
    margin-bottom: 15px;
}

.lire .bottomRight{
    display: flex;

}

.lire .bottomRight p{
    font-size: 12px;
}


.lire .bottomRight .coeur p{
    font-size: 12px;
    margin-right: 5px;
}

.lire .bottomRight .coeur i{
    color: #CC0000;
    margin-top: 8px;
    margin-right: 2px;
    font-size: 14px;
}

.lire .bottomLeft i{
    margin-right: 0px;
    margin-top: 8px;
    font-size: 14px;
}

.lire .bottomLeft p {
    font-size: 12px;
}

.lire .actuDroit{
    width: 100%;
    
}

/* LireArticle end*/

/* contact start */

.contenu {
    
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))
    
}

.contenu .adresse h5 {
   font-size: 14px;
}

.contenu .adresse h6 {
    font-size: 12px;
 }

 .contenuMap{
    display: block;
 }

 .contenuMap .notremap {
   
  width: 100%;
   
  }

  .contenuMap .formulaire {
  
    width: 100%;
  }

  .contenuMap .formulaire .present input {
   
    margin-top: 2%;
  }


  .contenuMap .formulaire button {
   
    margin-bottom: 2%;
  }


/* contact end */



/* accompagne499 */

.contenu1{
    display: block;
}

.contenu1 .digital{
    width: 100%;
    margin-bottom: 65px;
}

.contenu1 .digital h5{
    font-size: 16px;
}

.contenu1 .digital a{
    font-size: 14px;
}

.contenu1 .digital p{
   font-size: 12px;
}


.contenu1 .devs{
   width: 100%;
}

.contenu1 .devs .dev{
    width: 50%;
    margin-bottom: 45px;
}

.contenu1 .devs .dev p{
    margin-bottom: 65px;
}

.contenu1 .devs .dev h5{
   font-size: 14px;
}
/* 
.contenu1 .devs .dev a{
    
    left: 34%;
    text-transform: uppercase;
    position: absolute;
    top: 74%;
    font-size: 14px;
   
} */

.contenu2 .patern{
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) ;
    
}

.contenu2 .patern-image{
    margin-bottom: 2%;
}

.contenu2 a{
    width: 35%;
}

/* accompagne499 end */

/* DEV ET MARKET 499 */

.ref{ 
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}

.ref .seo{
    padding: 0rem 1rem;
    height: 100px;
}

.ref .seo h6{
    text-align: center;
    margin-top: 10px;
    font-weight: 600;
    line-height: 1.5;
    font-size: 10px;
}

.cadres .prices  p{
    
    margin-left: 0px;
    margin-top: -30px;
    /* font-size: 18px; */
    
}

.cadres .price p {
    margin-top: -118px;
} 



.cadres {
    gap: 5%;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}



/* DEV ET MARKET 499 END */

}

@media  screen and (min-width: 699px) and (max-width: 1000px){
    /* .first{
        justify-content: center;
    } */
    .first .start h6{
        font-size: 8px;
    }

    .start i {
        margin: 0px 5px 0px 0px;
      }

    .start .info .mail{
        display: none;
    }

    .start .info p {
        display: none;
    }

    .first .start .info i{
        font-size:12px !important;
    }

    .first .between{
        font-size: 10px;
        width: 100%;
    }

    .first .end i{
        font-size: 12px;
    }


    
    #menu-btn{
        display: block;
        /* margin-right: 10%; */
    }
    .menu {
        display: none; 
        flex-direction: column;
        background-color: #fff;
        position: absolute;
        top: 85%;
        right: 10%;
        /* width: 60px; */
        z-index: 100;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
        border-radius: 10px;
        padding: 0rem 1rem 0rem 1rem;
        
        
    }

    .menu.active {
        display: flex; 
        flex-direction: column;
        width: auto !important;
       
    }

    .menu .list{
        flex-direction: column;
        align-items: start;
        padding: 1rem !important;
    }

    .menu .list ul li a:hover{
        color: #CC0000;
    }

    .second{
        margin: 0 auto;
        width: 92%;
        
    }

    .second .logo{
        margin-right: 45%;
    }


    .second .prestation a{
        font-size: 12px;
    }


    .dropdown-menu {
        position: relative !important; 
        width: 100%; 
        margin-top: 0% !important;
        padding: 0% !important;
        margin-bottom: 15px !important;
        
    }

   
    .dropdown {
        width: 100%; 
    }

    .dropdown-menu ul{
        padding: 0% !important;
    }
    .dropdown-menu li .dropdown-item{
        /* text-decoration: underline !important; */
        font-size: 14px !important;
        color: #CC0000 !important;
        padding: 5px !important;
        border-bottom:1px solid #d9d9d993 ;
    }

    

    .carousel-item{
        margin-top: 10% !important;
        
      }
    
    .carousel-caption{
        top: 33%;
    }

    .carousel-caption h5{
    
    line-height: 1.5;
   
}

    .carousel-item img{
        border-radius: 15px;
        height: 250px;
    }
    
    
    .carousel-caption h5{
        font-size: 14px !important;
    }
   
    .carousel-caption p{
        font-size: 12px !important;
    }

    .carousel-caption a{
        font-size: 10px;
        color: white;
        text-transform: uppercase;
        background-color: #CC0000;
        padding: 0.5rem;
        border-radius: 5px;
    }
    
    .service{
    margin-top: -8%;
    gap: 1.5%;
}

.fond{
    margin-top: -12%;
    padding: 6rem;
}

.acc{
  
    width: 200px;
    height: 100px;
}

.acc img {
    width: 32px;
    height: 32px;

}

.acc h3{
    font-weight: bold;
    margin-top: 10px;
    font-size: 11px;
    text-align: center !important;
}

.parle h6{
    font-size: 14px !important;
    width: 80%;
    text-align: center;
    padding: 0.5rem 0rem !important;
    white-space: nowrap !important;
}



/* .para1.expanded {
    max-height: none;
  }


.parle  .read-more1{
    display: block !important;
    font-weight: bold;
    background-color: #CC0000 !important;
    color: white;
    padding: 5px 8px 5px 8px;
    border-radius: 3px;
    border: none;
    cursor: pointer;
    margin-bottom: 20px;
} */

.para1{
    line-height: 1.5; 
    /* max-height: calc(1.5em * 4); 
    overflow: hidden;
    text-overflow: ellipsis; */
    font-size: 12px !important;
    font-weight: 400 !important;
}

.preuve img{

    height: 250px !important;
}

.parle .chiffre .projet {
    width: 24% !important;
    height: 50px;
}

.parle .chiffre .projets {
    width: 24% !important;
    height: 50px;
}

.parle .chiffre .projet p {
    font-size: 11px !important;
}

.parle .chiffre .projets p {
    font-size: 11px !important;
}

.parle p{
    font-weight: bold;
}

.title h5{
    font-size: 14px !important;
    text-align: center;
    white-space: nowrap !important;
}

/* .team{
    grid-template-columns:  repeat(auto-fill, minmax(200px, 1fr));
} */

.team .present .personel{
    top: 20%;
    transform: translateY(-20%);
    background-color: #CC0000;
    width: 90%;
    height: 70px;
}



.marquees {
    height: 100px;
    
}

.marquees .cad{
    
    height: 100px;
    
}
.parte{
    margin-bottom: 5%;
}
.swiper-slide {
    height: 100px;
 }

.title1 h5{
    font-size: 14px !important;
    text-align: center;
    white-space: nowrap !important;
}
.marq{
    width: 90%;
}

.testimonial-content img{
    width: 25px;
    height: 25px;
}

.testimonial-content p {
    font-size: 16px;
    line-height: 1.5;
}

.cadre{
    grid-template-columns:  repeat(auto-fill, minmax(250px, 1fr));
}



.cadre1 h4{
    font-size: 18px;
    font-weight: 600;
    
}

.cadre1 p{
    font-size: 16px;
    font-weight: 400;
    margin-top: 8% !important;
    
}

.cadre1 a {
    font-size: 11px;
    font-weight: 500;
    border-radius: 3px;
    flex-wrap: nowrap;
    width: 50%;
}

.dg .right p{
    font-weight: 500;
    text-align: justify;
}

.para.expanded {
    max-height: none;
  }


.para{
    line-height: 1.5; 
    max-height: calc(1.5em * 6); 
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 16px !important;
    font-weight: 400 !important;
}

.right  .read-more{
    display: block !important;
    font-weight: bold;
    background-color: #CC0000 !important;
    color: white;
    padding: 5px 8px 5px 8px;
    border-radius: 3px;
    border: none;
    cursor: pointer;
    margin-bottom: 20px;
}


.footer .menuF .list1 li a{
    font-size: 14px;
}

.baniere{
    margin-top: 8%;
    width: 100%;
}

.nosServices{
    
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    
}

.nosServices .accs h3{
    text-align: center;
}

.decrit h5{
    font-size: 14px;
}

.contenuA .rectangle .triangle {
    position: absolute;
    border-bottom: 75px solid #000; 
    border-left: 69px solid transparent; 
    left: 40%;
    top: 0%;
    z-index: 3;
}

.contenuA .rectangle .text{
    background-color: #d10000;
    width: 35%;
    left: 65%;
    top: 0%;
    font-size: 12px;
}

.contenuA .rectangle .images {
    
    top: 20%;
    
}

.aboutus h5 , h6{
    font-size: 14px;
}

.aboutus p{
    font-size: 12px;
}

.car{
    padding-top: 1%;
}



.caracter{
    width: 65%;
}

/* accompagne699 start */


.contenu1 .digital{
    width: 35%;
    margin-bottom: 65px;
}

.contenu1 .devs{
    width: 60%;
    margin-bottom: 45px;
    height: 325px;
}

.contenu1 .dev p{
    margin-bottom: 65px;
}

.contenu1 .dev h5{
    font-size: 14px;
    box-sizing: border-box;
}

.contenu1 .digital h5{
    font-size: 13px;
}

.contenu1 .digital p{
    font-size: 13px;
}

.contenu1 .digital a{
    font-size: 12px;
}

.contenu2 .patern{
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) ;
    
}

.contenu2 .patern-image{
    margin-bottom: 2%;
}

.contenu2 a{
    width: 15%;
}

/* accompagne699 end */

/* contact start */

.contenuMap .formulaire form .present .div input{
    width: 96%;
    margin: 2%;
    
}

.contenu .adresse h5{
    font-size: 14px;
}


.contenu {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.contenu .notremap{
    /* margin-top: 50px; */
    width:40%;
    margin-right: 0;
}

.contenu .notremap iframe{
    /* margin-top: 50px; */
    width: 100%;
    margin-right: 0;
}

.contenu .formulaire{
    width: 55%;
}


.contenu .formulaire input{
    width: 96%;
    margin: 2%;
    
}

.contenu .formulaire input::placeholder{
    color: #000;
    font-size: 13px;
}

.contenu .formulaire textarea::placeholder{
    color: #000;
    font-size: 13px;
}

.contenu .formulaire select{
    width: 96%;
    font-size: 13px;
}

.contenu .formulaire select option{
    font-size: 13px;
}
.contenu .formulaire textarea{
    width: 96%;
    
}
/* contact end */

/* seminaire360 */

.semi .ref{
   
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    
}

.titreH4{
    font-size: 14px;
}

.semi .caracter .caract .decrit p{
   
    font-size: 14px;
    
}

.semi .caracter .caract .num{
    width: 40px;
    height: 40px;
    left: 6%;
    
}

.semi  p{
   
    font-size: 14px;
    
}

.semi .refs{
    
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    
    
}

.semi .refs .sujet h6{
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 500;
    word-break: break-word;
}

.semi .liencata a{
    max-width: 40%;
    font-size: 10px;
    margin-top: 100px;
}

.semi .refer{
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 5%;
  
}

.semi .refer .imageCard{
    width: 115px;
}
/* seminaire end */

/* LireArticle */
.lire{
    display: block;
   
}

.lire .actuGauche{
    margin-top: 15%;
    width: 100%;
}

.lire .actuGauche img{
    height: 250px;
}

.lire .bottom{
    margin-top: 15px;
    margin-bottom: 15px;
}

.lire .bottomRight{
    display: flex;

}

.lire .bottomRight p{
    font-size: 16px;
}


.lire .bottomRight .coeur p{
    font-size: 12px;
    margin-right: 5px;
}

.lire .bottomRight .coeur i{
    color: #CC0000;
    margin-top: 8px;
    margin-right: 2px;
    font-size: 14px;
}

.lire .bottomLeft i{
    margin-right: 0px;
    margin-top: 8px;
    font-size: 14px;
}

.lire .bottomLeft p {
    font-size: 12px;
}

.lire .actuDroit{
    width: 100%;
    
}

/* LireArticle end*/







}


@media  screen and (min-width: 1001px) and (max-width: 1200px){

    .parle p {
        font-size: 14px;
        font-weight: 500;
      }

    .parle .chiffre .projets , .parle .chiffre .projet {
        width: 18%;
        height: auto;
    }

    .contenu1 .dev h5{
        font-size: 16px;
        box-sizing: border-box;
    }
    
    .contenu2 a{
        width: 15%;
    }

    .contenuA .rectangle .triangle {
        position: absolute;
        border-bottom: 75px solid #000; 
        border-left: 69px solid transparent; 
        left: 58%;
        top: 0%;
        z-index: 3;
    }

    .contenuA .rectangle .text{
        font-size: 13px;
    }

    .nosServices{
        
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
       
    }

    .semi .ref{
   
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        
    }
    
    .semi .liencata a{
        max-width: 30%;
        font-size: 10px;
        margin-top: 100px;
    }

    
    .acc{
        
        width: 250px;
        
    }

    .parle h6{
        width: 50%;
    }

    .contenu {
       
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    
    }
}