*, ::before, ::after {
  box-sizing: border-box; /* Définit le modèle de boîte pour tous les éléments */
  margin: 0;
  padding: 0;
}
/* Boutons primaire*/
.btn-primary {
  background-color: rgba(0, 59, 94, 0.9); /* Couleur de fond du bouton principal */
  border: none; 
  transition: background 0.3s ease; /* Effet de transition au survol */
}
.btn-primary:hover {
  background-color: rgba(0, 45, 70, 0.9); /* Couleur de fond au survol */
}

/* couleur personnalisés*/
.navColor {
  background-color: rgba(0, 59, 94, 0.9); /* Couleur de fond de la navbar */
}
.rdvColor {
  background-color: #a75910; /* Couleur pour les rendez-vous */
}
.profilColor {
  background-color: #005b5f; /* Couleur pour le profil utilisateur */
}

/* conteneur des cartes */
.containerCartes {
  width: 100%; /* Prend toute la largeur */
  min-height: 400px; /* Hauteur minimale */
  display: flex; /* Disposition en flexbox */
  overflow-x: auto; /* Défilement horizontal */
  background: linear-gradient(to bottom, #005b5f, #8fae8e, #005b5f); /* Dégradé de fond */
}
.containerCartes::-webkit-scrollbar {
  height: 12px; /* Taille de la scrollbar */
}
.containerCartes::-webkit-scrollbar-thumb {
  background-color: rgba(0, 28, 44, 0.9); /* Couleur de la barre de défilement */
  border-radius: 1rem; /* Coins arrondis */
}

.errorSearch {
  color: red; /* Couleur de l'erreur */
  font-size: 3rem; /* Taille de la police */
}

/* Cartes candidats */
.cartes {
  display: block; /* Type de boîte de l'élément */
  flex-direction: column; /* Alignement vertical */
  justify-content: center; /* Centrage vertical */
  align-items: center; /* Centrage horizontal */
  opacity: 0; /* Cache la carte par défaut */
  margin: 2rem 1rem; /* Marge externe */
  max-width: 320px; /* Largeur maximale */
  background-color: rgba(255, 255, 255, 0.8); /* Fond semi-transparent */
  border-radius: 2rem; /* Coins arrondis */
  border: 4px solid #003a3d; /* Bordure */
  font-family: "Poppins", sans-serif; /* Police */
  letter-spacing: 1px; /* Espacement des lettres */
  flex-shrink: 0; /* Empêche la réduction de taille */
  animation: rotationApparition 0.8s ease forwards; /* Animation d'apparition */
  text-rendering: optimizeLegibility; /* Optimisation du rendu du texte */
  -webkit-font-smoothing: antialiased; 
  -moz-osx-font-smoothing: grayscale;
  transform-origin: center; /* Point d'origine pour les transformations */
}

.cartes:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4); /* Ombre portée au survol */
  scale: 1.04; /* Zoom léger */
  background-color: rgb(231, 233, 231); /* Changement de couleur de fond */
}

.cartes:first-child {
  margin-left: 2rem; /* Marge spéciale pour la première carte */
}

/* animation des cartes */
@keyframes rotationApparition {
  0% {
    opacity: 0; /* Invisible au début */
    transform: rotateY(-90deg) scale(0.8); /* Rotation avec réduction */
  }
  50% {
    opacity: 0.5; /* Semi-visible */
    transform: rotateY(-20deg) scale(1.05); /* Rotation avec agrandissement */
  }
  100% {
    opacity: 1; /* Totalement visible */
    transform: rotateY(0deg) scale(1); /* Position finale sans rotation */
  }
}


/* Conteneur des informations des candidats */
.infoCandidats {
  width: 100%; /* Prend toute la largeur disponible */
  position: relative; /* Permet de positionner des éléments en absolu à l'intérieur */
}

/* Bouton dans la section infoCandidats */
.infoCandidats button {
  position: absolute; /* Positionné absolument par rapport au parent */
  background-color: transparent; /* Fond transparent */
  border: none; /* Pas de bordure */
  top: 30%; /* Placement vertical */
  right: 10%; /* Placement horizontal */
}

/* Images dans les cartes */
.cartes img {
  width: 60%; /* Largeur relative à la carte */
  opacity: 100%; /* Opacité totale */
}

/* Styles pour le statut et le poste */
.statut,
.poste {
  position: absolute; /* Positionnement absolu */
  width: 100%; /* Prend toute la largeur */
  text-align: center; /* Centrage du texte */
}

/* Style du statut */
.statut {
  top: 0; /* Placé en haut de la carte */
  color: rgb(0, 255, 123); /* Couleur verte */
  font-size: 1.1rem; /* Taille de police */
  text-shadow: 
    1px 1px 0px rgba(0, 0, 0, 0.5),  
    -1px -1px 0px rgba(0, 0, 0, 0.5), 
    -1px 1px 0px rgba(0, 0, 0, 0.5), 
    1px -1px 0px rgba(0, 0, 0, 0.5),  
    0px 0px 4px rgba(0, 0, 0, 0.8); /* Ombre pour lisibilité */
}

/* Style du poste */
.poste {
  top: 65%; /* Placé vers le bas de la carte */
  font-size: 1.2rem; /* Taille de police */
  color: rgb(218, 65, 192); /* Couleur rose */
  text-shadow: 
    1px 1px 0px rgba(0, 0, 0, 0.5),  
    -1px -1px 0px rgba(0, 0, 0, 0.5), 
    -1px 1px 0px rgba(0, 0, 0, 0.5),  
    1px -1px 0px rgba(0, 0, 0, 0.5), 
    0px 0px 4px rgba(0, 0, 0, 0.8); /* Ombre */
}

/* Note attribuée au candidat */
.note {
  position: absolute; /* Positionnement absolu */
  top: 30%; /* Placé au centre */
  left: 8%; /* Décalé vers la gauche */
  font-size: 1.3rem; /* Taille du texte */
  color: rgb(214, 129, 18); /* Couleur orange */
}

/* Styles des notes */
.hardNote {
  color: rgb(214, 129, 18); /* Couleur orange */
  font-size: 1.1rem; /* Taille de la police */
}

/* Compétences techniques */
.hardSkills {
  color: rgba(0, 59, 94, 0.9); /* Couleur bleue */
}

/* Icônes d'étoiles */
.fa-star {
  font-size: 1.6rem; /* Taille de l'icône */
  color: rgb(175, 126, 171); /* Couleur initiale */
  transition: color 0.5s ease; /* Transition fluide */
  cursor: pointer; /* Curseur cliquable */
}

/* Étoile active (notée) */
.fa-star.active {
  scale: 1.2; /* Agrandissement */
  color: rgb(214, 129, 18); /* Couleur orange */
}

/* Titre des compétences */
.titleSK {
  position: absolute; /* Position absolue */
  text-align: start; /* Aligné à gauche */
  top: 90%; /* Placé en bas */
  left: 5%; /* Décalé vers la gauche */
  font-size: 1rem; /* Taille du texte */
  color: rgba(0, 0, 0, 0.9); /* Couleur sombre */
}

/* Conteneur des compétences techniques */
.HK {
  justify-content: flex-start; /* Alignement à gauche */
  width: 100%; /* Largeur totale */
}

/* Titre des compétences techniques */
.titleHK {
  font-size: 1rem; /* Taille du texte */
  margin-top: -1rem; /* Ajustement vertical */
  color: rgba(0, 0, 0, 0.9); /* Couleur sombre */
}

/* Compétences comportementales */
.softSkills {
  text-align: start; /* Alignement à gauche */
  font-size: 0.9rem; /* Taille du texte */
  color: rgba(0, 59, 94, 0.9); /* Couleur bleue */
}

/* Alignement des compétences comportementales */
.softSkills span {
  text-align: start; /* Alignement à gauche */
}

/* Section des compétences */
.competence {
  width: 50%; /* Largeur relative */
  margin-bottom: -0.8rem; /* Ajustement de l'espace */
}

/* Bouton pour voir le profil */
.btnViewProfil {
  width: 120px; /* Largeur définie */
  background-color: rgba(0, 59, 94, 0.9); /* Couleur de fond */
  border: none; /* Pas de bordure */
  color: rgb(255, 255, 255); /* Texte blanc */
  font-size: 1.2rem; /* Taille du texte */
  margin: 0.4rem; /* Marge autour */
  padding: 0.2rem; /* Espacement interne */
  border-radius: 0.5rem; /* Coins arrondis */
  text-align: center; /* Texte centré */
  text-decoration: none; /* Pas de soulignement */
  cursor: pointer; /* Curseur cliquable */
}

/* Effet de survol du bouton */
.btnViewProfil:hover {
  background-color: rgba(0, 45, 70, 0.9); /* Changement de couleur au survol */
}

/* Pagination Buttons */
#prevPage, #nextPage {
  background-color: rgba(0, 59, 94, 0.9) !important; /* Couleur de fond avec opacité pour les boutons de pagination */
  color: #ffffff; /* Couleur du texte blanche */
  transition: background-color 0.3s ease; /* Effet de transition pour l'animation de survol */
}

#prevPage:hover, #nextPage:hover {
  background-color: rgba(0, 45, 70, 0.9) !important; /* Changement de couleur au survol */
  color: #ffffff; 
}

#prevPage:active, #nextPage:active {
  background-color: rgba(0, 45, 70, 0.9) !important; /* Couleur au clic */
  color: #ffffff;
}

/* CV Candidat Section */
.imgNote {
  position: relative; /* Permet de positionner les éléments enfants en position absolue */
}
.imgNote img {
  margin: 2rem auto; /* Marge pour centrer et espacer l'image */
  width: 70%; /* Taille de l'image */
  margin-bottom: -0.8rem; /* Réduction de l'espace en bas */
}

/* code candidat */
.SZ {
  position: absolute; /* Positionnement absolu pour superposition */
  top: 2%;
  color: rgb(255, 255, 255); /* Couleur blanche */
  font-size: 1.4rem; /* Taille de police */
}

/* note global */
.noteCV {
  position: absolute;
  top: 30%;
  left: 5%;
  font-size: 1.4rem;
  color: rgb(255, 255, 255); /* Couleur blanche */
}

/* Mise en forme des textes */
.CV strong {
  font-size: 1rem; /* Taille de police pour les textes en gras */
}
.CV ul {
  padding-left: 1.5rem; /* Ajoute un padding à gauche des listes dans .CV */
}
.CV li {
  font-size: 1rem; /* Taille de police pour les listes */
}

/* Partie Gauche du CV */
.CvPartG {
  font-family: 'Montserrat', sans-serif; /* Police utilisée */
  background-color: #364c63; /* Couleur de fond */
}
.CvPartG p {
  color: rgb(255, 255, 255); /* Couleur blanche pour les paragraphes */
}
.CvPartG h3 {
  font-size: 1.4rem; /* Taille de police des titres */
  color: rgb(255, 255, 255);
}
.CvPartG hr {
  margin: 0 auto;
  margin-top: -0.4rem; /* Réduction de l'espacement */
  width: 90%;
  height: 1px; /* Épaisseur de la ligne */
  border: none;
  opacity: 1; /* Opacité complète */
  background-color: rgb(255, 255, 255); /* Couleur de la ligne */
}

/* Partie Droite du CV */
.CvPartD {
  font-family: 'Montserrat', sans-serif; /* Police utilisée */
  background-color: rgb(252, 253, 255); /* Couleur de fond */
}
.CvPartD hr {
  margin: 0 auto;
  margin-top: -0.4rem;
  width: 90%;
  height: 2px; /* Épaisseur de la ligne */
  border: none;
  opacity: 1;
  background-color: #2C3E50; /* Couleur de la ligne */
}
.CvPartD h2 {
  font-size: 1.6rem; /* Définit la taille de la police des titres <h2> dans .CvPartD */
}
.CvPartD h3 {
  font-size: 1.4rem; /* Taille des titres */
}

/* Compétences et Langues */
.descSize {
  font-size: 0.9rem; /* Taille de la description */
}
.competenceCV {
  width: 50%; /* Largeur des compétences */
  margin-bottom: -0.8rem; /* Réduction de l'espacement */
}
.competenceCV p {
  font-size: 1rem; /* Taille de police des compétences */
}
.langues {
  margin-top: 0.3rem; /* Espacement des langues */
}
.langues img {
  width: 30px; /* Taille des icônes de langues */
}
.langues span {
  font-size: 1rem; /* Taille du texte des langues */
}

/* Ajuster les éléments pour éviter les coupures */
.CvPartG, .CvPartD {
  overflow: visible; /* Permet d'afficher le contenu qui dépasse */
}

/* media query mobile */
@media (max-width: 767px) {
  /* cartes candidats */
  .containerCartes {
    flex-direction: column; /* Change l'orientation des éléments en colonne pour les petits écrans */
    align-items: center; /* Centre les éléments horizontalement */
  }

  .containerCartes::-webkit-scrollbar {
    display: none; /* Cache la barre de défilement */
  }

  .cartes {
    width: 80%; /* Définit la largeur des cartes à 80% du conteneur parent */
    height: auto; /* Ajuste la hauteur en fonction du contenu */
    margin: 1rem auto; /* Ajoute un espace de 1rem au-dessus et en dessous, et centre horizontalement */
  }

  .cartes:first-child {
    margin: 1rem auto;
    margin-top: 2rem; /* Ajoute un espace supplémentaire au premier élément .cartes */
  }

  /* CV candidat */
  .SZ {
    font-size: 0.8rem; /* Taille de police de 1rem pour les éléments .SZ */
  }

  .noteCV {
    font-size: 0.8rem; /* Taille de police légèrement plus grande pour .noteCV */
  }

  .imgNote img {
    margin-top: 1.2rem; /* Ajoute un espace de 1.2rem en haut des images dans .imgNote */
    margin-bottom: -0.5rem; /* Ajoute une marge négative de -0.5rem en bas pour rapprocher l'image des éléments sous-jacents */
  }

  .CV strong {
    font-size: 0.6rem; /* Réduit la taille de la police des éléments <strong> dans .CV */
  }

  .CV li {
    font-size: 0.6rem; /* Réduit la taille de la police des éléments de la liste (<li>) */
  }

  .CvPartG {
    padding: 0.3rem; /* Ajoute un padding de 0.3rem autour des éléments .CvPartG */
  }

  .CvPartD {
    padding: 0.1rem; /* Ajoute un padding de 0.1rem autour des éléments .CvPartD */
  }

  .CvPartD h2 {
    font-size: 0.9rem; /* Définit la taille de la police des titres <h2> dans .CvPartD */
  }

  .CvPartG h3 {
    font-size: 0.8rem; /* Définit la taille de la police des titres <h3> dans .CvPartG */
    margin-top: 0.4rem !important; /* Ajoute une marge supérieure de 0.5rem aux titres <h3> dans .CvPartG avec une priorité élevée */
  }

  .CvPartD h3 {
    font-size: 0.8rem; /* Définit la taille de la police des titres <h3> dans .CvPartD */
  }

  .descSize, .descSize i {
    font-size: 0.6rem !important; /* Réduit la taille de la police de .descSize et des <i> à 0.6rem avec priorité élevée */
  }

  .competenceCV {
    width: 100%; /* Définit la largeur de .competenceCV à 100% du conteneur parent */
    justify-content: center; /* Centre les éléments à l'intérieur de .competenceCV */
  }

  .competenceCV p {
    font-size: 0.6rem; /* Définit la taille de la police des paragraphes dans .competenceCV à 0.9rem */
  }

  .langues img {
    width: 20px; /* Définit la largeur des images dans .langues à 30px */
  }

  .langues span {
    font-size: 0.7rem; /* Définit la taille de la police des éléments <span> dans .langues à 1rem */
  }
}

/* media query tablette */
@media screen and (min-width: 768px) and (max-width: 1279px) {
  /* cartes candidats */
  .containerCartes {
    justify-content: center; /* Centre les éléments horizontalement */
    align-items: center; /* Centre les éléments verticalement */
    flex-wrap: wrap; /* Permet aux éléments de se placer sur plusieurs lignes si nécessaire */
  }

  .containerCartes::-webkit-scrollbar {
    display: none; /* Cache la barre de défilement */
  }

  .cartes {
    margin: 1.2rem auto; /* Ajoute une marge de 1.2rem au-dessus et en dessous et centre les cartes horizontalement */
    width: 45%; /* Définit la largeur des cartes à 45% du conteneur parent */
  }

  .cartes:first-child {
    margin: 1rem auto; /* Applique une marge spécifique de 1rem pour le premier élément .cartes */
  }
}