:root {
  --primary-color: #002B5B;
  --accent-color: #1A73E8;
  --text-dark: #1F1F1F;
  --text-light: #4F4F4F;
  --background-light: #F9F9F9;
  --background-global: #F1F4F9;
}
*,*::before,*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  }
header 
{
  position:fixed;
  position:relative;
  max-width:100% ;
  min-width: 300px;
  color: white;
  padding: 0rem 0rem;
  display: flex;
  justify-content:space-between;
  align-items: center;
  background-color: var(--primary-color);
  box-shadow: 0 10px 10px rgba(250, 248, 248, 0.98);
  height: 20%;
  line-height: 1.6;
  width:100% ;
  margin:0;
  top:0;
  z-index:10;
  flex-direction: row;
  white-space:nowrap ;


}

.Lesmessage {

  position:absolute;
  width: 730px;
  margin-left: 63%;
  display: flex;/* Transformation en flexbox */
  padding:0;/*Suppression des marges internes */
  /* Ajout de la couleur d'arri猫re-plan */
  justify-content: no-space;
  margin-top:0%;
  height:40px;
}
.Lesmessage li
 {
 list-style-type: none ;       /* Suppression des puces */

}

.Lesmessage a
 {
 position:relative;
 display:block;/*Transformation en block */
 width: 63px;/* Largeur minimale des liens */
 margin: 0.0rem;               /* Marges externes */
 padding: 0.0rem 0.4;            /* Marges internes */
 text-align: center;           /* Centrage du texte */
 background-color: #1ABC9C;    /* Arri猫re-plan */
 color: #fff;                  /* Couleur du texte */
 text-decoration: none;        /* Suppression du soulignement */
 border: 1px solid #fff;       /* Ajout d'une bordure */
/*border-bottom-right-radius:  10px;
 border-bottom-left-radius:  10px;/* Arrondis des bordures */
 transition: all 1s ;          /* Ajout des effets de transition */
/*   position:absolute;*/
font-weight: bold;
}
.cachemessage {
display:none;
}




















.message{
  
  margin-left: 0px;
  position:absolute;
  width: 732px;
  height:40px;
  background-color: darkslategrey;/* Arri猫re-plan */
 /* border-radius: 30px; */
  margin-top:5%;
  /*background-color: cornflowerblue;  */
 /* animation: clignote 2s linear step-start; */
/*  margin-rigth: 10px;*/
}
.chat-message{
  position:absolute;
width: 100%;
margin-left: 1%;
display: flex;/* Transformation en flexbox */
padding:0;/*Suppression des marges internes */
/* Ajout de la couleur d'arri猫re-plan */
justify-content: no-space;
margin-top:-5%;
height:50px;
}

.chat-message li {
list-style-type: none ;/*Suppression des puces */
}
.chat-message a {
  position:relative;
display:block;/*Transformation en block*/
width: 735px;/*Largeur minimale des liens*/
height: 10px;
margin: 0.5rem;/*Marges externes*/
padding: 0.4rem 0;            /* Marges internes */
    text-align: center;           /* Centrage du texte */
    background-color: #c4c1c1;    /* Arri猫re-plan */
    border: 1px solid  #c4c1c1;      /* Ajout d'une bordure */
    color: #fff;                  /* Couleur du texte */
    text-decoration: none;        /* Suppression du soulignement */
    
    border-top-right-radius:  10px;
    border-top-left-radius:  10px;/* Arrondis des bordures */
    transition: all 1s ;          /* Ajout des effets de transition */
/*   position:absolute;*/
}
/*Rotation des images a la page d'Acceuil*/

#image-container {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 100px;
      margin: 0 auto;
      overflow: hidden;

}

#rotating-image {
  max-width: 100%;
  height: 100%;
  border-bottom-right-radius: 0px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  opacity: 1;
  transition: opacity 1.5s ease-in-out;
}

.fade-out {
  opacity: 0;
}




.photos
    {
  margin-left: 85%;
  position:absolute;
  width:120px;
  height:100px;
  background-color: rgb(196, 189, 189);    /* Arri猫re-plan */
  border-top-left-radius: 30px; 
  border-bottom-left-radius: 30px; 
  border-top-right-radius: 30px; 
  border-bottom-right-radius: 30px; 
  margin-top:0%;
/*  margin-rigth: 10px;*/
 
}

#Lesmessage {
  margin-left: 70%;
  position:relative;
  width:200px;
  height:100px;
  background-color: rgb(20, 20, 20);    /* Arri猫re-plan */
  border-top-left-radius: 30px; 
  border-bottom-left-radius: 30px; 
  border-top-right-radius: 30px; 
  border-bottom-right-radius: 30px; 
  margin-top:0%;

}
.photos img    {

  position:absolute;
  width:100px;
  height:100px;
  
  border-top-left-radius: 30px; 
  border-bottom-left-radius: 30px; 
  border-top-right-radius: 30px; 
  border-bottom-right-radius: 30px; 
 
/*  margin-rigth: 10px;*/
  
  
  
}
#photosa
    {
  margin-left: 52%;
  position:absolute;
  width: 100px;
  height:100px;
 /* background-color: white;    /* Arri猫re-plan */
 /* border-radius: 30px; */
  margin-top:0%;
  
  
/*  margin-rigth: 10px;*/
  
  
  
}
#modifierprofil {
  margin-left: 2%;
  position:relative;
  width: 100px;
  height:100px;
 /* background-color: white;    /* Arri猫re-plan */
 /* border-radius: 30px; */
  margin-top:0%;
  
  background-color: var(--background-global);
/*  margin-rigth: 10px;*/
  
  
  
}

html,body {
font-family: 'Segoe UI', sans-serif;
background-color: var(--background-global);
color: var(--text-dark);
line-height: 1.6;
height:100% ;
padding: 0;
margin:0;
overflow-x:hidden;
}

    body {
      grid-template-rows: auto 1fr auto;
    /*  display:grid;*/
      min-height: 100vh;
      display:flex;
flex-direction: column;
overflow:hidden;
}

#enteteBienvenue{
  width: 90%;
  margin-left: 2%;
  position:absolute ;
  margin-top: -2%;
  font-weight: bold;
    }
    #enteteBienvenueso{
      width: 90%;
      margin-left: 89%;
      position:absolute ;
      margin-top: -2%;
      
        }
  
#cone {
position:absolute ;
margin-left:89.1%;
margin-top:5%;
 
padding:1;

/*margin-rigth:10px;*/


text-decoration: none;

}


#cone li
{
list-style-type: none ;       /* Suppression des puces */

}

#cone a
{
 position:relative;
 display:block;/*Transformation en block */
 
 margin: 0%;               /* Marges externes */
 padding: 0% ;            /* Marges internes */
 text-align: center;           /* Centrage du texte */
 background-color: #1ABC9C;    /* Arri猫re-plan */
 color: #fff;                  /* Couleur du texte */
 text-decoration: none;        /* Suppression du soulignement */
 border: 1px solid #fff;       /* Ajout d'une bordure */
/* Arrondis des bordures */
 transition: all 1s ;          /* Ajout des effets de transition */
 height:25px;
 
/*   position:absolute;*/
}

#crea {
/* border-bottom-right-radius:  10px;
 border-bottom-left-radius:  10px; */
 text-align: center; 
 width:115px;
 font-weight: bold;
}
#connect{
  border-bottom-right-radius:  10px;
  border-bottom-left-radius:  0px;
  text-align: center; 
  width:115px;
  font-weight: bold;
}
#enteteBienvenueprofil{
  position:absolute;
  margin-top:0%;
  margin-left:60%;
  border-top-right-radius: 10px;
  border-top-left-radius:  10px;
  border-bottom-right-radius:  0px;
  border-bottom-left-radius:  0px;
  background-color:  #fff;
  width:39%;
  height:90%;
}
#profil{
 position:relative;
 display:block;/*Transformation en block */
 width:115px;
 /* Largeur minimale des liens */
 margin: 0.5rem;               /* Marges externes */
 padding: 0% ;            /* Marges internes */
/* Centrage du texte */
 background-color: #1ABC9C;    /* Arri猫re-plan */
 color: #fff;                  /* Couleur du texte */
 text-decoration: none;        /* Suppression du soulignement */
 border: 1px solid #fff;       /* Ajout d'une bordure */
/* Arrondis des bordures */
  transition: all 1s ;          /* Ajout des effets de transition */
  height:15px;
  margin-top:-7%;
  border-top-right-radius:  10px;
  border-top-left-radius:  0px;
  text-align: center; 
  margin-left:89.1%;
  
}
.menuacceuil{
  position: absolute;
  width: 910px;
  background-color:black;
  margin-top: 120px;
  margin-right:10px;
  margin-left:10px;
  height:60px;
}
.listemenu {
  position:absolute;
  width: 738px;
  margin-left: 1.5%;
  display: flex;/* Transformation en flexbox */
  padding:0;/*Suppression des marges internes */
   
  margin-top:5%;
  height:50px;
  background-color:#111010;
  border-bottom-right-radius:  30px;
 border-bottom-left-radius:  30px;
}
 .listemenu li
 {
list-style-type: none ;       /* Suppression des puces */

}


.listemenu a
 {
 position:relative;
 display:block;/*Transformation en block */
 width: 123px;/* Largeur minimale des liens */
 padding: 0.4rem 0;            /* Marges internes */
 text-align: center;           /* Centrage du texte */
 background-color: #c4c1c1;    /* Arri猫re-plan */
 border: 1px solid  #c4c1c1;      /* Ajout d'une bordure */
 color: #ffffff;                  /* Couleur du texte */
 text-decoration: none;        /* Suppression du soulignement */
/* Ajout d'une bordure */
 border-bottom-right-radius:  30px;
 border-bottom-left-radius:  30px;/* Arrondis des bordures */
 transition: all 1s ;          /* Ajout des effets de transition */
/*   position:absolute;*/
font-weight: bold;
font-size: 18px;
transition:cubic-bezier(0.075, 0.82, 0.165, 1);
font-family: 'Segoe UI',Tahoma;
}
.listemenu a:hover
{
background-color: #ddd;        

}
.listemenu a.active {
background-color: #ff0000;
color:white;
}
    nav ul {
      list-style: none;
      display: flex;
      gap: 1.5rem;
    }
    
    nav a {
      text-decoration: none;
      color: white;
      font-weight: bold;
    }
    section{
    margin-bottom:20px;
    }
    .hero 
    {
      background-color: var(--background-light);
      padding: 0rem 2rem;
      text-align: center;
      flex:1;
      display:flex;
    }
    .heroabout
    {
      background-color: var(--background-light);
      padding: 0% 1%;
      text-align: center;
      flex:1; 
     /*display:inline-flex; */
    }
    .heroabout h2
    {
      font-size: 2.5rem;
      margin-bottom: 1rem;
      color: var(--primary-color);
    }
    .heroabout p
    {
      font-size: 1.2rem;
      margin-bottom: 2rem;
      color: var(--text-light);
    }
    .hero h2 {
      font-size: 2.5rem;
      margin-bottom: 1rem;
      color: var(--primary-color);
    }
    
    .hero p {
      font-size: 1.2rem;
      margin-bottom: 2rem;
      color: var(--text-light);
    }
    
    button {
      background-color: var(--accent-color);
      color: white;
      padding: 0.8rem 1.5rem;
      border: none;
      border-radius: 6px;
      font-size: 1rem;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }
    
    button:hover {
      background-color: #1558b0;
    }
    
    main{
 
      position:relative;
      padding:20px;
      overflow-y: auto;
      flex: 1;
      margin:0 auto;
      /**background-image:url("background.jpg");**/
      background-color: #cee3fc;
      height:100vh;
    
    }
  @media(max-width:600px){
    header{
   
       
      padding:15px;
      font-size: 1.2rem;
     
     }
  
   main{
    padding:10px;
   
  font-size: 0.8rem;
 
 } 
  
  }
  a{
   
   text-decoration:none;
   color:#007BFF
   
   } 
   a:hover{
   
     color:#007BFF
    
    } 

    #imageAcceuil{
      width:30%; 
      height:100%;
      border-radius: 8px;
     
     }


        
.contenu
{
width:908px; 
height:595px;
margin-top:186px;
margin-left:10px;
background: lightcyan;
/*border:1px solid black;*/
position:absolute;
}


.contenu_ibikorwa
{
width:908px; 
height:250px;
margin-top:90px;
margin-left:0px;
background: whitesmoke;
/*border:1px solid black;*/
position:absolute;
}
.contenu_ibikorwa1  {
width:908px; 
height:250px;
margin-top:342px;
margin-left:0px;
background: white;
/*border:1px solid black;*/
position:absolute;
}


#contenu_ibikorwa_image1{
animation-direction: left-rigth;
margin-top:20px;
margin-left:3px;
background: whitesmoke;
/*border:1px solid black;*/
position:absolute;
}
#bottom-text-image1{
position: absolute;
width:150px;
height:70px;
transform: translateX(-50%);
background-color: rgba(0, 0, 0, 0.2); /* Fond semi-transparent */
padding: 0px;
font-family: Arial, sans-serif;
border-radius: 0px;
text-align: center;
margin-top:172px;
margin-left:78px;
text-decoration: none;        /* Suppression du soulignement */
align-content: center;
}

#contenu_ibikorwa_image2{
   display: block;
   margin-top:20px;
   margin-left:185px;
   background: whitesmoke;
   /*border:1px solid black;*/
   position:absolute;
}
 #bottom-text-image2{
  position: absolute;
        
        width:150px;
    height:70px;
    
        transform: translateX(-50%);
        background-color: rgba(0, 0, 0, 0.2); /* Fond semi-transparent */
        color: white;
        padding: 0px;
        font-family: Arial, sans-serif;
        border-radius: 0px;
        text-align: center;
     align-content: center;
  margin-top:172px;
  margin-left:260px;
  
}
#contenu_ibikorwa_image3{
display: block;
margin-top:20px;
margin-left:380px;
background: whitesmoke;
/*border:1px solid black;*/
position:absolute;
}

   #bottom-text-image3{
  position: absolute;
  width:150px;
  height:70px;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.2); /* Fond semi-transparent */
  color: white;
  padding: 0px;
  font-family: Arial, sans-serif;
  border-radius: 0px;
  text-align: center;
  align-content: center;
  margin-top:172px;
  margin-left:455px;
  
}
    #bottom-text-image4{
        position: absolute;
        width:150px;
        height:70px;
        transform: translateX(-50%);
        background-color: rgba(0, 0, 0, 0.2); /* Fond semi-transparent */
        color: white;
        padding: 0px;
        font-family: Arial, sans-serif;
        border-radius: 0px;
        text-align: center;
        
        align-content: center;
  margin-top:172px;
  margin-left:650px;
  
}
#contenu_ibikorwa_image4{
display: block;
margin-top:20px;
margin-left:575px;
background: whitesmoke;
/*border:1px solid black;*/
position:absolute;
}

 #contenu_ibikorwa_image5{
display: block;
margin-top:20px;
margin-left:755px;
background: whitesmoke;
/*border:1px solid black;*/
position:absolute;
}
#right-text-image5{
        position: absolute;
        width:150px;
        height:70px;
        transform: translateX(-50%);
        background-color: rgba(0, 0, 0, 0.2); /* Fond semi-transparent */
        color: white;
        padding: 0px;
        font-family: Arial, sans-serif;
        border-radius: 0px;
  text-align: center;
  align-content: center;
  margin-top:172px;
  margin-left:830px;
  
}


#contenu_ibikorwa_image11{
animation-direction: left-rigth;
margin-top:20px;
margin-left:3px;
background: whitesmoke;
/*border:1px solid black;*/
position:absolute;
    display: block;
}
  #bottom-text-image11{
  position: absolute;
      width:150px;
    height:70px;
        
        transform: translateX(-50%);
        background-color: rgba(0, 0, 0, 0.2); /* Fond semi-transparent */
        color: white;
        padding: 0px;
        font-family: Arial, sans-serif;
        border-radius: 5px;
        text-align: center;
  align-content: center;
  margin-top:172px;
  margin-left:78px;
}

#contenu_ibikorwa_image12{

margin-top:20px;
margin-left:185px;
background: whitesmoke;
/*border:1px solid black;*/
position:absolute;
    display: block;
}
 #bottom-text-image12{
  position: absolute;
      width:150px;
    height:70px;
        
        transform: translateX(-50%);
        background-color: rgba(0, 0, 0, 0.2); /* Fond semi-transparent */
        color: white;
        padding: 0px;
        font-family: Arial, sans-serif;
        border-radius: 5px;
        text-align: center;
  align-content: center;
  margin-top:172px;
  margin-left:260px;

}
#contenu_ibikorwa_image13{

margin-top:20px;
margin-left:380px;
background: whitesmoke;
/*border:1px solid black;*/
position: absolute;
display: block;
}
 #bottom-text-image13{
        position: absolute;
        width:150px;
        height:70px;
        transform: translateX(-50%);
        background-color: rgba(0, 0, 0, 0.2); /* Fond semi-transparent */
        color: white;
        padding: 0px;
        font-family: Arial, sans-serif;
        border-radius: 5px;
        text-align: center;
        align-content: center;
        margin-top:172px;
        margin-left:455px;
  
  
}
#contenu_ibikorwa_image14{

margin-top:20px;
margin-left:575px;
background: whitesmoke;
/*border:1px solid black;*/
position: absolute;
    
display: block;
}
 #bottom-text-image14{
  position: absolute;
      
        width:150px;
    height:70px;
        transform: translateX(-50%);
        background-color: rgba(0, 0, 0, 0.2); /* Fond semi-transparent */
        color: white;
        padding: 0px;
        font-family: Arial, sans-serif;
        border-radius: 5px;
        text-align: center;
  align-content: center;
  margin-top:172px;
  margin-left:650px;
}

#contenu_ibikorwa_image15{

margin-top:20px;
margin-left:755px;
background: whitesmoke;
/*border:1px solid black;*/
position: absolute;
    text-align: center;
display: block;
    
}
#right-text-image15{
  position: absolute;
      
        width:150px;
        height:70px;
        transform: translateX(-50%);
        background-color: rgba(0, 0, 0, 0.2); /* Fond semi-transparent */
        color: white;
        padding: 0px;
        font-family: Arial, sans-serif;
        border-radius: 5px;
        text-align: center;
  align-content: center;
  margin-top:172px;
margin-left:830px;
}

 #contenu_ibikorwa_image6{

margin-top:370px;
margin-left:550px;
background: whitesmoke;
/*border:1px solid black;*/
position:absolute;
}
.contenu_ibikorwa_text{
width:905px; 
height:80px;
margin-top:5px;
margin-left:0px;
background: whitesmoke;
/*border:1px solid black;*/
position:absolute;
    text-justify: right;
    
    font-family: Arial, sans-serif;
}
a{
 
  text-decoration:none;
  color:#007BFF
  
  } 
  a:hover{
  
    color:#007BFF
 }

#spot{
position:absolute;
display:flex;
width: 200px;/* Largeur minimale des liens */
margin-top:15px;
 
color: white;
margin-left:11%;
}

#spot li
 {
 list-style-type: none ;       /* Suppression des puces */
 margin-right:4%;
}
#suit
{
  margin-top:15px;
  position:absolute;
  margin-left:1%;  
}

#copyrigth{
  margin-top:3%;
  position:absolute;
  margin-left:85%;  
}
#spot a
 {
 position:relative;
  
                /* Marges externes */
 padding: 2;            /* Marges internes */
 text-align: center;           /* Centrage du texte */
     /* Arri猫re-plan */
 color: #fff;                  /* Couleur du texte */
 text-decoration: none;        /* Suppression du soulignement */
        /* Ajout d'une bordure */
 
 transition: all 1s ;          /* Ajout des effets de transition */
/*   position:absolute;*/

}


    footer {
      background-color: var(--primary-color);
      box-shadow: 0 -10px 10px rgba(247, 242, 242, 0.904);
      color: white;
      text-align: center;
      padding:0px;
      bottom:0;
      height:10%;
      position:relative;
      width:100%;
/* transform:translateY(100%);/*cacher au debut*/
/*   transition:transform 0.4s ease;*/
    }
  /*
  footer.visible{

    transform:translateY(0); 
  }*/

    h2 {
    font-size: 1rem;
    color: #131212;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
  }
  #accueil-introduction p {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #666;
  } 

    /* Styling pour les témoignages */
    .temoignage {
      background-color: #fff;
      padding: 20px;
      margin-bottom: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }
    .temoignage p {
      font-size: 1rem;
      color: #555;
    }

    .temoignage strong {
      display: block;
      font-weight: bold;
      margin-top: 10px;
    }
    
    /* Styling pour les sections */
    #accueil-introduction p {
      background-color: #fff;
      padding: 0px;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }

    #nos-services ul {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      justify-content: space-between;
    }

    #nos-services li {
      flex: 1 1 calc(33.33% - 20px);
      background-color: #f3f0f0;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }
    #pourquoi-choisir ul {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      justify-content: space-between;
    }

    #pourquoi-choisir li {
      flex: 1 1 calc(33.33% - 20px);
      background-color: #f3f0f0;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }
    /* Pour les petits écrans */
    @media (max-width: 768px) {
      #nos-services li {
        flex: 1 1 100%;
      }
    }

    /* Ajout de styles pour les témoignages */
    #temoignages .temoignage {
      border-left: 4px solid #4CAF50;
    }

     /* Style des boutons */
     .cta-button {
      display: inline-block;
      background-color: #4CAF50;
      color: white;
      padding: 12px 20px;
      font-size: 1.1rem;
      text-decoration: none;
      border-radius: 5px;
      margin-top: 20px;
      transition: background-color 0.3s;
    }

    .cta-button:hover {
      background-color: #45a049;
    }





    section ul {
      list-style: none;
      padding: 0;
    }

    section li {
      font-size: 1.1rem;
      margin: 10px 0;
      color: #333;
    }
.slider-container {
background-color: #f3f0f0;
background-image:url("background.png");
}

.ongletDef{
background-color: #f3f0f0;
}
.titreTxt{
  background-color: #cee3fc;
  border: 0.5px solid #fff;  
  border-top-right-radius:  10px;
    border-top-left-radius:  10px;
    border-bottom-right-radius:  10px;
    border-bottom-left-radius:  10px;
    padding: 5px;
  }