.ordinateur .conteneur-astuce , .ordinateur .conteneur-astuce-plie 
	{
	width: 40%;
	z-index: 10;
	position: fixed;
	top: 85px;
	/* width: fit-content; */
	right: 1px;
	align-item: middle;
	transition: margin .5s ease-in-out;
	margin-right: 0px;
	perspective: 1000px;
	}
.ordinateur .conteneur-astuce-plie 
	{
	transition: margin .5s ease-in-out;
	margin-right: -40%;
	}

.mobile .conteneur-astuce , .mobile .conteneur-astuce-plie 
	{
	width: 95%;
	z-index: 10;
	position: fixed;
	top: 55px;
	right: 1px;
	align-item: middle;
	transition: margin .5s ease-in-out;
	margin-right: 0px;
	perspective: 1000px;
	}

.mobile .conteneur-astuce-plie 
	{
	transition: margin .5s ease-in-out;
	margin-right: -95%;
	}
	
.flip-box {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: rotationFlip 1s ease-in-out;
}
/* Définition de l'animation de rotation horizontale (axe X) */
@keyframes rotationFlip {
  100% {
    transform: rotateX(360deg);
  }
}

.fondAstuce {
	width: 100%;
	min-height: 150px;
	background-repeat: no-repeat;
	background-size: 100% 100%; 
	}
	
.languette  img
	{
	position: absolute;
    top: 50%;
    transform: translateY(-50%);
	height: 50px;
	left: -15px;
	}

.couleur-fond {
	width: 100%;
	height: 100%;
	background-color: #fffdcf;
	border-radius: 50px;
	/* margin: 20px; */
	}

.titreAstuce  
	{
	font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 1.2rem;
	font-style: normal;
	text-transform: none; 
	color: #44403B !important;
	position: absolute;
	width: 100%;
	text-align: center;
	margin-top: -6px;
	}
	
.texteAstuce, g
	{
	padding: 30px;
	color: #2B7FFF !important;
	font-family: 'pacifico', cursive;
	font-style: normal;
	font-size: 1.4rem;
	}
g  
	{
	color: #432DD7 !important;
	padding: 0;
	margin: 0;
	}
	
#languette {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 50px;
    left: -15px;
    cursor: pointer;
}

/* Vibration de la languette */
.animer {
    animation-duration: 0.3s;
    animation-name: vibrationLanguette;
    animation-iteration-count: 4; /* Fait 4 allers-retours (1.2s au total) */
}

@keyframes vibrationLanguette {
    0% {
        transform: translateY(-50%) rotate(0deg);
    }
    25% {
        transform: translateY(-50%) rotate(20deg);
    }
    50% {
        transform: translateY(-50%) rotate(0deg);
    }
    75% {
        transform: translateY(-50%) rotate(-20deg);
    }
    100% {
        transform: translateY(-50%) rotate(0deg);
    }
}}