/*--3333333333333333333---------------------------3333333333333333333333333333333333-----------------------------------3333333333333333333333333333333333333333333333-------------*/

/*---------------------------------------------------------------parti1----------------------------------------------------------------------------------------*/
.topsecgnlservice{
    position: relative;
    height: 75vh;
    background-color: rgba(102, 100, 100, 0.3);
    margin-bottom: 2vh;
  }
  
  .imgservicesec{
    z-index: -100;
    width: 100%;
    height: 100%;
    position: absolute;
    min-width: 100%;
  }
  .imgservice{
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
  
  .titreservice{
    text-align: center;
    padding-top: 10%;
    font-size: 53px;
    letter-spacing: 2.2px;
    color: #fff;
    text-transform: uppercase;
    font-weight: bold;
  }
  
  .titreadapte{
    text-align: center;
  }
  
  .barsoustitleadap::after{
    content: '';
    width: 6%;
    height: 2px;
    position: absolute;
    background-color: #f00;
    left: 47%;
  }
  
  .textexplicationadapte{
    text-align: center;
    font-style: italic;
    padding-top: 2%;
    padding-bottom: 3%;
  }
  
  /*------------------------------------------------------------------------premiere image suivie de la deuxieme--------------------------------------------------------------------------------------------*/
  .deuxgroupeimg{
    display: flex;
    flex-wrap: wrap;
  }
  
  .unerimgService{
    /*flex-basis: 60vh;*/
    width: 30%;
    height: 50vh;
    padding-left: 15%;
    padding-right: 5%;
  }
  
  .cadre1imgservice{
    width: 100%;
    height: 70%;
  }
  
  .imgunerimgService{
    height: 100%; /* Hauteur ajustée en fonction du contenu */
    /*min-width: 35vh;*/
    width: 100%;
    object-fit: cover;
  }
  
  .deuxemeimgService{
    /*flex-basis: 60vh;*/
    width: 30%;
    height: 50vh;
    padding-right: 15%;
    padding-left: 5%;
  }
  
  @media screen and (max-width: 768px) {
    .unerimgService, .deuxemeimgService {
      width: 70%; /* Les articles prennent toute la largeur lorsque l'écran est réduit */
      height: 50%;
      padding-left: 15%; /* Supprime le padding pour un alignement correct */
      padding-right: 15%;
      padding-top: 5%;
    }
  }
  
  .troisemeimgService{
    width: 50%;
    height: 60vh;
    padding-right:25%;
    padding-left: 25%;
    padding-top: 2.5%;
    margin-bottom: 3%;
  }
  
  .cadre2imgservice{
    width: 100%;
    height: 70%;
  }
  
  .imgdeuxemeimgService{
    height: 100%; /* Hauteur ajustée en fonction du contenu */
    /*min-width: 35vh;*/
    width: 100%;
    object-fit: cover;
  }
  
  @media screen and (max-width: 768px) {
    .troisemeimgService {
      width: 70%; /* Les articles prennent toute la largeur lorsque l'écran est réduit */
      height: 50%;
      padding-left: 15%; /* Supprime le padding pour un alignement correct */
      padding-right: 15%;
      padding-top: 5%;
    }
  }
  
  .titleserviceimg{
    text-align: center;
    font-weight: 700;
    color: #000;
    text-transform: uppercase;
    letter-spacing: 1px;
  }
  
  .textserviceimg{
    text-align: center;
    color: #525252;
  }
  
  .lienservice{
    text-align: center;
  }
  
  .liendecservice{
    text-decoration: none;
    color: rgb(196, 0, 0);
    font-weight: bold;
  }
  /*------------------------------------------------------------------------------------section explication fin---------------------------------------------------------*/
  .sectionexplicationfin{
    width: 100%;
    display: flex;
    background-color: #e1e1e1;
  }
  
  .cadresectionexplicationfin1{
    width: 40%;
    padding-left: 7%;
    padding-right: 3%;
    padding-bottom: 4%;
  }
  
  .cadresectionexplicationfin1titre{
    text-align:left;
    font-weight: 700;
    color: #000;
    text-transform: uppercase;
    letter-spacing: 1px;
  }
  
  .barsectionexplicationfin1::after{
    content: '';
    width: 3%;
    height: 2px;
    position: absolute;
    background-color: #f00;
  }
  
  .cadresectionexplicationfin1texte{
    font-style: italic;
    padding-top: 3%;
    color: #525252;
  }
  
  .expli11{
    display: flex;
    width: 100%;
    margin-top: 1%;
  }
  
  .div111{
    width: 5%;
  }
  
  .barcadresectionexplicationfin1explication1{
    margin: 0%;
  }
  
  .barcadresectionexplicationfin1explication1::after{
    content: '';
    width: 1%;
    height: 2px;
    position: absolute;
    background-color: #f00;
    margin: 0.4%;
  }
  
  .div112{
    width: 95%;
  }
  
  .cadresectionexplicationfin1explication1{
    width: 100%;
    margin:0% 
  }
  /*--------------------------------------------------------------------------------cadre explication 2-----------------------------------------*/
  .cadresectionexplicationfin2{
    width: 40%;
    padding-left: 3%;
    padding-right: 7%;    
    padding-bottom: 4%;
  }
  
  .cadresectionexplicationfin2titre{
    text-align:left;
    font-weight: 700;
    color: #000;
    text-transform: uppercase;
    letter-spacing: 1px;
  }
  
  .barsectionexplicationfin2::after{
    content: '';
    width: 3%;
    height: 2px;
    position: absolute;
    background-color: #f00;
  }
  
  .cadresectionexplicationfin2texte{
    font-style: italic;
    padding-top: 3%;
    color: #525252;
  }
  
  @media screen and (max-width: 768px) {
    .cadresectionexplicationfin1, .cadresectionexplicationfin2 {
      width: 80%; /* Les articles prennent toute la largeur lorsque l'écran est réduit */
      padding-left: 10%; /* Supprime le padding pour un alignement correct */
      padding-right: 10%;
      padding-top: 5%;
    }
  }
  
  @media screen and (max-width: 768px) {
    .sectionexplicationfin {
      flex-direction: column;
      width: 80%;
      padding-left: 10%;
      padding-right: 10%;
    }
  }
  
  /*------------------------------------------------------------------------------------------footer service-----------------------------------------------------------------------------*/
  .footerservive{
    margin-top: 0%;
  }