.nav-item.competence {
  position: relative; /* Nécessaire pour que le sous-menu soit positionné correctement par rapport au parent */
}

.nav-item.competence .sub_menu {
  display: none;
  position: absolute;
  top: 100%; /* Place le sous-menu en dessous de l'élément parent */
  left: 0;
  background-color: #343a40;
  list-style: none;
  padding: 10px;
  border-radius: 5px;
  z-index: 1000;
}

.nav-item.competence:hover .sub_menu,
.nav-item.competence .sub_menu:hover {
  display: block; /* Affiche le sous-menu lors du survol */
}

.sub_menu li {
  padding: 5px;
  color: white;
}

.sub_menu li:hover {
  background-color: red; /* Couleur de survol */
}

  .small-image {
    width: 10%;
    height: auto;
  }
.projet {
  color: #ffff;
  font-weight: bolderFcenter;
}
 .row .documents1 {
  display: flex;
  align-items: center;
 }

 .service_section .heading_container h2 {
  color: white;
}

.highlight-gold .nav-link {
  color: gold !important;
  font-weight: bold; /* Facultatif, pour le faire ressortir davantage */
  text-shadow: 1px 1px 2px #000; /* Facultatif, pour ajouter de la profondeur */
}

.highlight-white .nav-link {
  color: white !important;
  font-weight: bold; /* Facultatif, pour le faire ressortir davantage */
  text-shadow: 1px 1px 2px #000; /* Facultatif, pour ajouter de la profondeur */
}



  
/* Ajuster les marges et les paddings */
.header_section {
  padding: 10px 15px;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap; /* Permet aux éléments de passer à la ligne sur petits écrans */
}

.navbar-nav {
  display: flex;
  flex-direction: row; /* Rendre le menu horizontal */
  flex-wrap: wrap; /* Permet aux items de se regrouper sur plusieurs lignes */
  justify-content: center; /* Centrer les items du menu */
  gap: 10px; /* Espacement entre les items */
}

.nav-item {
  white-space: nowrap; /* Empêcher les items de se couper */
}

.nav-item .sub_menu {
  position: absolute; /* Les sous-menus restent "flottants" */
  display: none;
  background-color: #333;
  color: #fff;
  list-style: none;
  padding: 5px 0;
}

.nav-item:hover .sub_menu {
  display: block;
}

.sub_menu li {
  padding: 5px 15px;
}

.bts-sio-section {
  color: white;
}

.bts-sio-section h2 {
  font-size: 2.2rem; /* Ajuste la taille du titre */
  margin-bottom: 1rem;
}

.bts-sio-section p, 
.bts-sio-section h4, 
.bts-sio-section h6, 
.bts-sio-section ul {
  font-size: 1.2rem; /* Ajuste la taille globale du texte */
  line-height: 1.6;
}

.bts-sio-section ul {
  padding-left: 20px;
  list-style-type: none;
}

.bts-sio-section ul li:before {
  content: "•"; /* Ajouter un point devant les éléments de liste */
  color: white;
  margin-right: 8px;
}



.encadre {
  border: 2px solid #007bff; /* Couleur de bordure */
  border-radius: 10px; /* Arrondir les angles */
  padding: 20px; /* Espacement interne */
 
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Effet d'ombre */
}

.nav-item a:hover {
  text-decoration: underline;
  text-decoration-color: white; /* Changez 'red' pour une autre couleur chaude, comme orange ou gold */
  text-decoration-thickness: 2px; /* Contrôle l'épaisseur de la ligne */
  transition: all 0.3s ease-in-out; /* Ajoute une transition pour un effet plus fluide */
}


.social-links a {
  font-size: 30px; /* Exemple de taille en pixels */
  margin-right: 10px;
}


.cv-box {
  border-radius: 20px;
  background-color: #030352 !important; /* Forcer la couleur */
}


 /* page accueil.php */
.documentation-box {
  border-radius: 20px;
  background-color: #030352 !important;
}

 .Curriculum {
  color: #fff;
}

.doc {
  color: #fff;
}



/* missions.php */

.netflix {

  border-radius: 20px;
  background-color: #030352 !important;


}
.netflix {

  border-radius: 20px;
  background-color: #030352 !important;


}
.maquette {

  border-radius: 20px;
  background-color: #030352 !important;


}
.boxi {
  color: #fff;

}

/* apple.php */

.carreau {
  display: flex;
  justify-content: center;
 
}

.carreau img {
  border-radius: 20px; /* Arrondi les angles */
 
}

.carreau img {
  margin-top: 30px; 
}
.maquette-apple-page .hero_area {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.maquette-apple-page .service_section {
  padding-top:50px;

}

.descriptifs{ 
  color:#fff
}

.detail-box .encadre {
  display: flex;
  justify-content: center;
}


.centered-text {
  text-align: center;
  color: #fff;
}


.encadrement {
  border: 2px solid #007bff; /* Couleur de bordure */
  border-radius: 10px; /* Arrondir les angles */
  padding: 20px; /* Espacement interne */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Effet d'ombre */
  width: 600px; /* Définit la largeur de l'encadrement */
  
}

.cadre{
  display: flex;
  justify-content: center;
}


.image-container {
  text-align: center;
}



/* footer.php*/

.info_section.layout_padding2 {
  padding-top: 30px;   
  padding-bottom: 30px; 
}

.info_section h4 {
  margin-bottom: 15px; 
}

.contact_link_box a, .info_links a {
  margin-bottom: 8px; /
  display: block;
}

.info_social {
  margin-top: 15px; /
}



.skills-section {
  padding: 50px 20px;
  max-width: 1200px;
  margin: 0 auto;
}


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Style pour les catégories de compétences */
.skills-category {
  border: 1px solid #ddd;
  border-radius: 8px;
  margin-bottom: 30px;
  padding: 20px;
  background-color: #030352 ;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.skills-category h2 {
  text-align: center;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid #3498db;
  color: #fff;
}



/* Style pour la liste des compétences */
.skills-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  list-style-type: none;
  padding: 0;
 
 
}

/* Style pour chaque élément de compétence */
.skills-list li {
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  padding: 15px;
  width: calc(33.333% - 20px);
  min-width: 200px;
  background-color: ;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.skills-list li:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* Style pour les images */
.skills-list img {
  width: 60px;
  height: 60px;
  margin-bottom: 10px;
  object-fit: contain;
}

/* Style pour les titres des compétences */
.skills-list h3 {
  margin: 8px 0;
  color: #fff;
}

/* Style pour les descriptions des compétences */
.skills-list p {
  margin: 5px 0 0;
  font-size: 14px;
  color: #fff;
}

/* Responsive design */
@media (max-width: 768px) {
  .skills-list li {
      width: calc(50% - 20px);
  }
}

@media (max-width: 480px) {
  .skills-list li {
      width: 100%;
  }
}

.article-slot .card {
  min-height: 250px;
  transition: all 0.3s ease;
}


.article-slot .card:hover {
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  transform: translateY(-5px);
}


.summary-section {
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 5px;
  margin-top: 20px;
}

/* page veille */
.veille-page .box {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

.veille-page p {
  text-align: center;
}

.veille-page .logo-container {
  display: inline-block;
  margin: 0 15px;
}

/* Debug Styles */
.veille-page .theme-nav {
  text-align: center;
  margin-bottom: 20px;
}

.veille-page .theme-nav button {
  margin: 0 10px;
  padding: 10px 20px;
  background-color: #f1f1f1;
  border: 1px solid #ddd;
}

.veille-page .theme-nav button.active {
  background-color: #007bff;
  color: white;
}

.veille-page .carousel-container {
  display: none;
}

.veille-page .carousel-container.active {
  display: block;
}

.veille-page .service_section.technology-watch-carousel {
  padding-top: 0; /* Remove top padding */
  margin-top: 0px; /* Negative margin to pull sections closer */
}

/* Réduire les marges et padding des sections et rangées */
.veille-page .row {
  margin-top: 0 !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
}

.veille-page .price_section.layout_padding {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 10px !important;
}

.veille-page .technology-watch-carousel {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.veille-page .price_section .container {
  padding-right: 0 !important;
  padding-left: 0 !important;
}

.veille-page .price_container {
  margin-bottom: 10px !important;
}


/* Styles spécifiques à veille.php */
.veille-page .theme-nav button {
  margin: 5px;
  padding: 10px 15px;
  border: none;
  cursor: pointer;
  background-color: #ddd;
  border-radius: 5px;
}

.veille-page .theme-nav button.active {
  background-color: #007bff;
  color: white;
}

.veille-page .carousel-container {
  display: none;
  margin-top: 20px;
}

.veille-page .carousel-container.active {
  display: block;
}

.veille-page .grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  margin-top: 10px;
}

.veille-page .grid-item {
  background: #f8f9fa;
  padding: 20px;
  text-align: center;
  border-radius: 10px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

.veille-page .description {
  font-size: 18px;
  margin-bottom: 15px;
}

.veille-page .theme-description {
  margin-top: 20px;
  padding: 15px;
  background-color: #f0f0f0;
  border-radius: 10px;
  text-align: center;
  font-size: 16px;
  color: #333;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
}


.tableau-price-section {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}

.tableau-button-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

/* Custom adjustments for the tableau de compétences page */
.service_section.layout_padding {
  padding-bottom: 30px !important; /* Reduce bottom padding */
  padding-top: 60px !important;    /* Slightly increase top padding */
}

/* Keep your existing styles */
.tableau-price-section {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}

.tableau-button-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.tableau-button-container .box {
  margin: 0 auto;
  display: flex;
  justify-content: center;
  width: 100%;
}

.tableau-button-container .btn-box {
  margin: 0;
  text-align: center;
}

.tableau-button-container .btn-box a {
  display: inline-block;
}

/* Ajouter un espacement plus grand entre les divs spécifiques à cette page */
.tableau-competences-page .service_section.layout_padding .container + .container.text-center {
  margin-top: 40px; /* Ajuster la valeur selon l'espacement souhaité */
}
/* Centrer la section sur cette page uniquement */



.centered-section .row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}






/* page competence */


.competence-page p {
  text-align: center;
}

.competence-page .logo-container {
  display: inline-block;
  margin: 0 15px;
}

/* Debug Styles */
.competence-page .theme-nav {
  text-align: center;
  margin-bottom: 20px;
}

.competence-page .theme-nav button {
  margin: 0 10px;
  padding: 10px 20px;
  background-color: #f1f1f1;
  border: 1px solid #ddd;
}

.competence-page .theme-nav button.active {
  background-color: #030352;
  color: white;
}

.competence-page .carousel-container {
  display: none;
}

.competence-page .carousel-container.active {
  display: block;
}

.competence-page .service_section.technology-watch-carousel {
  padding-top: 0; /* Remove top padding */
  margin-top: 0px; /* Negative margin to pull sections closer */
}

/* Réduire les marges et padding des sections et rangées */
.competence-page .row {
  margin-top: 0 !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
}

.competence-page .price_section.layout_padding {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 10px !important;
}

.competence-page .technology-watch-carousel {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.competence-page .price_section .container {
  padding-right: 0 !important;
  padding-left: 0 !important;
}

.competence-page .price_container {
  margin-bottom: 10px !important;
}


/* Styles spécifiques à veille.php */
.competence-page .theme-nav button {
  margin: 5px;
  padding: 10px 15px;
  border: none;
  cursor: pointer;
  background-color: #ddd;
  border-radius: 5px;
}

.competence-page .theme-nav button.active {
  background-color: #007bff;
  color: white;
}

.competence-page .carousel-container {
  display: none;
  margin-top: 20px;
}

.competence-page .carousel-container.active {
  display: block;
}

.competence-page .grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  margin-top: 10px;
}

.competence-page .grid-item {
  background: #f8f9fa;
  padding: 20px;
  text-align: center;
  border-radius: 10px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

.competence-page .description {
  font-size: 18px;
  margin-bottom: 15px;
}

.competence-page .theme-description {
  margin-top: 20px;
  padding: 15px;
  background-color: #f0f0f0;
  border-radius: 10px;
  text-align: center;
  font-size: 16px;
  color: #333;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
}

.competence-page ul.projet {
  list-style: none;
  padding-left: 0;
}

.sub_page .page-maquette .definition {
  color: #ffffff; /* Blanc */
  /* OU */
  color: #cccccc; /* Gris clair */
  font-style: italic;
  margin-top: -10px; /* Pour rapprocher la définition du paragraphe précédent */
}

/* Cible uniquement les titres <h5> de cette page */