/**********/
/* Titre */
/*********/

h2 {
  text-align: center;
}

/*****************/
/* Bouton Retour */
/*****************/

#return-btn {
  background-color: #004a7b; /* Couleur de fond */
  color: white; /* Couleur du texte */
  border: none; /* Pas de bordure */
  padding: 10px 20px; /* Espacement interne (haut/bas - gauche/droite) */
  text-align: center; /* Texte centré */
  text-decoration: none; /* Pas de soulignement */
  display: inline-block; /* Alignement à côté des autres éléments */
  font-size: 14px; /* Taille de la police */
  margin: 4px 2px; /* Espacement externe (haut/bas - gauche/droite) */
  cursor: pointer; /* Change le curseur en forme de main lors du survol */
  border-radius: 12px; /* Coins arrondis */
  width: 150px; /* Largeur du bouton */
}

#return-btn:hover {
  background-color: #00699b;
  transform: scale(1.1);
}

/* Décale le bouton Retour vers la gauche */
#return-btn {
  position: absolute; /* Positionne l'élément de manière absolue par rapport à son conteneur parent */
  right: 50px; /* Décale l'élément de 50 pixels vers la gauche */
}

/*****************/
/* Bouton Éditer */
/*****************/

#edit-button {
  background-color: #004a7b; /* Couleur de fond */
  color: white; /* Couleur du texte */
  border: none; /* Pas de bordure */
  padding: 10px 20px; /* Espacement interne (haut/bas - gauche/droite) */
  text-align: center; /* Texte centré */
  text-decoration: none; /* Pas de soulignement */
  font-size: 14px; /* Taille de la police */
  margin: 4px 2px; /* Espacement externe (haut/bas - gauche/droite) */
  cursor: pointer; /* Change le curseur en forme de main lors du survol */
  border-radius: 12px; /* Coins arrondis */
  float: right; /* Positionnement à droite */
  margin-right: 20px; /* Marge à droite */
  width: 150px; /* Largeur du bouton */
}

#edit-button:hover {
  background-color: #00699b;
  transform: scale(1.1);
}

/* Wrapper pour le titre et le bouton */
.title-button-wrapper {
  display: flex; /* Utilisez Flexbox pour aligner les éléments */
  justify-content: space-between; /* Répartit les éléments uniformément dans le conteneur */
  align-items: center; /* Aligne les éléments verticalement */
}

/* Décale le titre vers la droite */
.title-offset {
  margin-left: 50px;
}

/* Décale le bouton vers la gauche */
#edit-button {
  margin-right: 50px; /* Ajustez cette valeur pour déplacer le bouton à une position plus précise */
}

/**************************************/
/* Infos-principales Gauche et Droite */
/**************************************/

.slogan {
  font-weight: bold !important;
  color: #004a7b !important;
}

.nom-prenom-color {
  color: #004a7b;
}

.infos-principales-details {
  padding: 10px; /* Espace à l'intérieur de la bordure */
  margin: 30px 0; /* Espace autour de la bordure */
  border-radius: 5px;
  background-color: #f7f7f7;
  outline: none;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
  display: flex;
}

.conteneur-gauche-infos {
  width: 50%;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
}

.conteneur-droite-infos {
  width: 50%;
  padding: 30px; /* Espace à l'intérieur de la bordure */
}

.image-nom-details {
  display: flex;
  flex-direction: column;
}

.nom-details {
  align-items: center;
}

.professionnel-image-details {
  margin-bottom: 10px;
}

/**************************/
/* Icones Réseaux Sociaux */
/**************************/

.reseaux-conteneur {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.reseau-item {
  flex: 1 0 30%; /*  Cela permettra de créer deux éléments par ligne. Vous pouvez ajuster le pourcentage en fonction de vos besoins. */
  margin: 5px;
}

.social-icon {
  transition: transform 0.1 ease; /* Animation de l'effet de survol */
}

.social-icon:hover {
  transform: scale(1.3); /* Agrandit l'icône de 20% lors du survol */
}

.social-link,
.social-link:hover {
  text-decoration: none; /* Enlève le soulignement des liens de réseaux sociaux */
}

/***********/
/* Détails */
/***********/

.coordonnees-details {
  padding: 10px; /* Espace à l'intérieur de la bordure */
  margin: 30px 0; /* Espace autour de la bordure */
  border-radius: 5px;
  background-color: #f7f7f7;
  outline: none;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}

.coordonnees-details img {
  vertical-align: middle;
  margin-right: 5px;
  width: 24px;
  height: 24px;
}

.coordonnees-icon {
  transition: transform 0.1s ease; /* Animation de l'effet de survol */
}

.coordonnees-icon:hover {
  transform: scale(1.3); /* Agrandit l'icône de 30% lors du survol */
}

.coordonnees-details a,
.coordonnees-details a:hover {
  text-decoration: none; /* Enlève le soulignement des liens des coordonnées */
}

.galerie-details {
  padding: 10px; /* Espace à l'intérieur de la bordure */
  margin: 30px 0; /* Espace autour de la bordure */
  border-radius: 5px;
  background-color: #f7f7f7;
  outline: none;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}

.domaines-intervention-details {
  padding: 10px; /* Espace à l'intérieur de la bordure */
  margin: 30px 0; /* Espace autour de la bordure */
  border-radius: 5px;
  background-color: #f7f7f7;
  outline: none;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}

.adresse-details {
  padding: 10px; /* Espace à l'intérieur de la bordure */
  margin: 30px 0; /* Espace autour de la bordure */
  border-radius: 5px;
  background-color: #f7f7f7;
  outline: none;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}

.infos-pratiques-details {
  padding: 10px; /* Espace à l'intérieur de la bordure */
  margin: 30px 0; /* Espace autour de la bordure */
  border-radius: 5px;
  background-color: #f7f7f7;
  outline: none;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}

.reseaux-sociaux-details {
  padding: 10px; /* Espace à l'intérieur de la bordure */
  margin: 30px 0; /* Espace autour de la bordure */
  border-radius: 5px;
  background-color: #f7f7f7;
  outline: none;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}

.horaires-details {
  padding: 10px; /* Espace à l'intérieur de la bordure */
  margin: 30px 0; /* Espace autour de la bordure */
  border-radius: 5px;
  background-color: #f7f7f7;
  outline: none;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}

.siret-details {
  padding: 10px; /* Espace à l'intérieur de la bordure */
  margin: 30px 0; /* Espace autour de la bordure */
  border-radius: 5px;
  background-color: #f7f7f7;
  outline: none;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}

.paiement-details {
  padding: 10px; /* Espace à l'intérieur de la bordure */
  margin: 30px 0; /* Espace autour de la bordure */
  border-radius: 5px;
  background-color: #f7f7f7;
  outline: none;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}

.formations-details {
  padding: 10px; /* Espace à l'intérieur de la bordure */
  margin: 30px 0; /* Espace autour de la bordure */
  border-radius: 5px;
  background-color: #f7f7f7;
  outline: none;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}

/*************/
/* Conteneur */
/*************/

.conteneur-general {
  display: flex;
  flex-direction: row; /* Ligne par défaut pour les grands écrans */
  justify-content: space-between;
  margin-left: 50px;
  margin-right: 50px;
}

/* Lorsque la largeur de l'écran est inférieure à 768px */
@media screen and (max-width: 768px) {
  .conteneur-general {
    flex-direction: column; /* Change en colonne pour les petits écrans */
  }

  /* Ajuste les marges pour les petits écrans */
  .conteneur-general {
    margin-left: 20px;
    margin-right: 20px;
  }

  /* Modifie la taille de l'image pour les petits écrans */
  .carousel-item img {
    width: 100%; /* Image prend la largeur totale du conteneur */
    height: auto; /* Hauteur auto pour maintenir les proportions de l'image */
  }
}

.conteneur-gauche {
  width: 58%;
}

.conteneur-droit {
  width: 40%;
}

/* Lorsque la largeur de l'écran est inférieure à 768px */
@media screen and (max-width: 768px) {
  .conteneur-general {
    flex-direction: column; /* Change en colonne pour les petits écrans */
  }

  /* Ajuster les marges pour les petits écrans */
  .conteneur-general {
    margin-left: 20px;
    margin-right: 20px;
  }

  .conteneur-gauche,
  .conteneur-droit {
    width: 100%; /* La largeur sera de 100% pour les petits écrans */
  }

  /* Modifie la taille de l'image pour les petits écrans */
  .carousel-item img {
    width: 100%; /* Image prend la largeur totale du conteneur */
    height: auto; /* Hauteur auto pour maintenir les proportions de l'image */
  }
}

/************/
/* Carousel */
/************/

.carousel-item img {
  width: 200px;
  height: 520px;
  object-fit: cover; /* Cela assure que l'image couvre toute la zone sans déformation, mais elle pourrait être coupée */
  margin-bottom: 20px;
}

/* Label */
.global-label {
  font-weight: bold;
  color: #004a7b;
  display: inline-block;
  vertical-align: middle;
  margin-bottom: 10px;
  margin-left: 5px;
}

/**********/
/* Icones */
/**********/

.my-icon {
  color: #004a7b;
  display: inline-block;
  vertical-align: middle;
  margin-bottom: 10px;
}

.duree-icon,
.langue-icon,
.calendar-icon {
  width: 24px;
  height: 24px;
  margin-right: 5px;
}