body {  
    text-align: center;      
    flex: 1;
    width: 100%;  /* 100% de la largeur de l'écran */ 
    overflow-x: hidden;       
    height: auto;
    display: flex;
    flex-direction: column;
    background: #001B2E;      
      font-family: "Nunito", sans-serif;
      font-optical-sizing: auto;
      font-weight: 400;
      font-style: normal;
      margin: 0;
   
}
.contenair-item  {
    flex: 1;
    max-width: 100%;
    height: auto;  
    display: flex;
    flex-direction: column;
    justify-content: space-between; 
    position: relative;
    
}

  .couleur-fond-1 {
    color: #d4ae77;
    background: #001B2E; 
    max-width: 100%;
    border-color: #d4ae77;
   
  }
  .couleur-fond-2 {
    color: #001B2E;    
    max-width: 100%;    
    background: #EAE8FF;     
    background: linear-gradient(  45deg, #EAE8FF 0%, #eeab93 25%, #f37328 50%,  #ee7bdb 75%, #f7708d 100% );
  }
  .couleur-fond-3 {
    background: #713E5A;
    color: #d4ae77; 
    max-width: 100%;
  }
  .fond-txt-blnc{
    background-color:  #f4f4f4;    
    box-shadow: -9px 2px 1px 0px #001B2E;    
    border-radius: 40px;
    height: AUTO;    
    margin: 80px auto;
  }
  .fond-txt-or {
    border: 1px solid #d4ae77;
    border-radius: 40px;
    color: #d4ae77;
  }

  .txt1 {
    /*  titre */
    font-size: 2rem;
  }
  
 .txt3 {  
      /*  sous-titre */   
    font-size: 1.6rem;
    
}
.txt {   
    /*  corp de text */
    font-size: 1.2rem;
    
}
.action-bouton {
  border-radius: 10px;
  padding: 10px;
  color: #001B2E;
  background-color: #d4ae77;
  font-size: 1.4rem;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 2px 2px 0px 1px #f4f4f4;
  margin: 20px; 
  border: 2px solid #001b2e;
  display: flex;
  flex-direction: row;
  align-items: center;

}
.action-bouton:hover {
  font-weight: 600;
   }
  

.emoji {
  padding: 0px 5px;
  font-size: 1.5rem;
  transition: transform 0.3s ease;
}

.emoji:hover {  
  transform: scale(1.5) rotate(-25deg);
}
.icon{
  width: 100%;
}
p{
  bottom: 10px;
  font-size: smaller;
  color: gray;
  font-weight: 600;
  align-items: center;
}


.bordure-animée {
  position: relative;
  padding: 10px;
  border: 4px solid transparent; /* Bordure transparente de base */
  border-radius: 8px;

  background: linear-gradient(90deg, #CCA46B, #713E5A, #CCA46B);
  background-size: 200% auto;
  background-clip: border-box;
  animation: gradientLine 2s linear infinite;
}
@keyframes gradientLine {
  0% {
    background-position: 200% center;
  }
  100% {
    background-position: 0% center;
  }
}

.btnaide {
  position: relative;
  display: inline-block;
  text-decoration: none;
  color: #CCA46B;
  background-color: #713E5A;
  padding: 8px 12px;
  border-radius: 5px;
}

.btnaide .btnreso3 {
  visibility: hidden;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 6px;
  position: absolute;
  z-index: 1;
  bottom: 125%; /* au-dessus du bouton */
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.3s;
  white-space: nowrap;
}

.btnaide:hover .btnreso3 {
  visibility: visible;
  opacity: 1;
}