.justified-paragraph {
	text-align: justify;
  }
  
body {
	background-color: aliceblue; 
  }

  .letter-cloud-article {
	max-width: 65%;
	margin: 0 auto; 
	font-size: 1.2rem;
	padding: 1.5rem;
	border: 1px solid gainsboro;
	background-color: snow; 
  }

  .letter-cloud-article p {
	max-width: 90%;
	margin: 0 auto;
	padding: .5rem 0;
	color: #000; /* Changer la couleur du texte en noir */
  }
  
  /** ========== Added CSS ========= **/

  .letter-cloud-blockquote {
	font: 1.05rem system-ui;
	--letter-moving-distance: 50px;
	--letter-moving-duration: 300ms;
	--letter-moving-delay: 5ms;
	--letter-reset-delay: 1ms;
  }

  .letter-cloud-blockquote .word {
	display: inline-block;
  }

  .letter-cloud-blockquote .letter {
	display: inline-block;
	transform: rotateX(var(--rotate-x)) rotateY(var(--rotate-y)) translateZ(var(--letter-moving-distance));
	transition: transform var(--letter-moving-duration) ease-in-out calc(var(--nth-child) * var(--letter-reset-delay));
  }

  .letter-cloud-blockquote:hover .letter {
	transition-delay: calc(var(--nth-child) * var(--letter-moving-delay));
	transform: rotateX(0deg) rotateY(0deg) translate(0);
  }

.center-image {
  max-width: 100%; /* Empêche l'image de dépasser son conteneur */
  height: auto; /* Maintient le rapport hauteur/largeur de l'image */
  display: block; /* Élimine tout espace blanc autour de l'image */
  margin-left: auto; /* Centre l'image horizontalement */
  margin-right: auto; /* Centre l'image horizontalement */
}


/*
  .center-image {
	display: block;
	margin-left: auto;
	margin-right: auto;
  }
  */

  .image-container {
	width: 100%; /* Prend la largeur totale de son conteneur parent */
	max-width: 1200px; /* Une largeur maximale pour éviter que l'image ne soit trop grande */
	margin: 0 auto; /* Centre le conteneur */
  }
  


  .cta-button {
	display: flex;
	justify-content: center;
	margin-top: 2rem;
  }
  
  .cta-link {
	display: inline-flex;
	align-items: center;
	padding: 1rem 2rem;
	background-color: #ff5f6d;
	color: #ffffff;
	font-size: 1.2rem;
	font-weight: bold;
	text-decoration: none;
	border-radius: 4px;
	transition: background-color 0.3s ease, transform 0.3s ease;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
	overflow: hidden;
  }
  
  .cta-link:hover {
	background-color: #33cc33;
	transform: translateY(-2px);
  }
  
  .cta-link:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(255, 95, 109, 0.4);
  }
  
  .cta-link .cta-icon {
	margin-right: 0.5rem;
  }
  
  .cta-link .cta-icon img {
	width: 20px;
	height: 20px;
  }
  
  .cta-link .cta-text {
	display: inline-block;
	vertical-align: middle;
  }
  
  .rounded {
	border-radius: 20px; /* Ajout de bords arrondis pour les boutons avec la classe .rounded */
  }


  /* VALEURS */

  .title-valeurs {
	font-size: 24px; /* Par exemple, une taille de police différente pour les h4 */
	color: #333; /* Couleur de texte pour les h4 */
	/* Autres styles spécifiques pour les h4 */
  }
  
  @keyframes pulse {
	0% { transform: scale(1); }
	50% { transform: scale(1.1); }
	100% { transform: scale(1); }
  }
  
  .fadeInLeft {
	animation-name: fadeInLeft;
  }
  
  .fadeInRight {
	animation-name: fadeInRight;
  }
  
  @keyframes fadeInLeft {
	from {
	  opacity: 0;
	  transform: translateX(-20px);
	}
	to {
	  opacity: 1;
	  transform: translateX(0);
	}
  }
  
  @keyframes fadeInRight {
	from {
	  opacity: 0;
	  transform: translateX(20px);
	}
	to {
	  opacity: 1;
	  transform: translateX(0);
	}
  }
  
  .animated {
	animation-duration: 1s;
	animation-fill-mode: both;
	opacity: 0; /* Assurez-vous que les éléments sont initialement invisibles */
  }