/*COULEURS PERSONNALISÉES DE SERIGNE MODOU
   Violet profond + Or comme accent*/
:root {
  --couleur-principale: #BF00FF;  /* Electric Purple / Neon Purple */
  --couleur-secondaire: #F59E0B;
  --couleur-fond: #0D0D1A;
  --couleur-texte: #FFFFFE;
}



/* Reset général */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Poppins', sans-serif;
  background-color: var(--couleur-fond);
  color: var(--couleur-texte);
  scroll-behavior: smooth;
}

/*NAVBAR*/
#navbar {
  background-color: rgba(6, 6, 54, 0.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(44, 11, 102, 0.3);
  transition: all 0.3s ease;
}

.navbar-brand {
  color: var(--couleur-principale) !important;
  font-size: 1.6rem;
  letter-spacing: 2px;
}

.nav-link {
  color: rgba(255, 255, 255, 0.7) !important;
  margin: 0 8px;
  transition: color 0.3s;
  font-weight: 500;
}

.nav-link:hover,
.nav-link.active {
  color: var(--couleur-principale) !important;
}

/*BANNIÈRE D'ACCUEIL*/
.hero {
  min-height: 100vh;
  background: linear-gradient(135deg, #0D0D1A 0%, #110430 50%, #1a0533 100%);
  padding-top: 80px;
  position: relative;
  overflow: hidden;
}

/* Cercle violet en haut à droite */
.hero::before {
  content: '';
  position: absolute;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(245,158,11,0.08), transparent);
  top: -150px;
  right: -150px;
  border-radius: 50%;
}

/* Cercle doré en bas à gauche */
.hero::after {
  content: '';
  position: absolute;
  width: 350px;
  height: 350px;
  background: radial-gradient(circle, rgba(245,158,11,0.08), transparent);
  bottom: -100px;
  left: -100px;
  border-radius: 50%;
}

/* PHOTO DE PROFIL*/
.photo-profil {
  width: 170px;
  height: 170px;
  object-fit: cover;
  border: 4px solid var(--couleur-principale);
 box-shadow: 0 12px 28px rgba(191, 0, 255, 0.45);
  transition: transform 0.4s ease;
}

.photo-profil:hover {
  transform: scale(1.07) rotate(2deg);
}

/*BOUTONS*/

.btn-primary {
  background-color: #5d1475;
  border-color: #BF00FF;
 box-shadow: 0 12px 28px rgba(191, 0, 255, 0.45);
}

.btn-primary:hover {
  background-color: #9900CC;
  box-shadow: 0 12px 28px rgba(191, 0, 255, 0.45);
}


.btn-outline-light {
  padding: 12px 32px;
  border-radius: 50px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.btn-outline-light:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(191, 0, 255, 0.45);
}


/*ANIMATIONS AU SCROLL*/
.fade-in {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/*FLÈCHE ANIMÉE*/
.fleche-bas {
  animation: bounce 2s infinite;
  display: inline-block;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(12px); }
}

/*PAGE HEADER*/
.page-header {
  padding: 65px 0 0px 0;
  background: linear-gradient(135deg, #0D0D1A, #3B0FA0);
  border-bottom: 1px solid rgba(124, 58, 237, 0.25);
}

/*CARTES PARCOURS*/
.carte-parcours {
  background-color: rgba(124, 58, 237, 0.05);
  border: 1px solid rgba(124, 58, 237, 0.2);
  transition: all 0.3s ease;
  height: 100%;
}

.carte-parcours:hover {
  background-color: rgba(124, 58, 237, 0.12);
  border-color: var(--couleur-principale);
  transform: translateY(-8px);
  box-shadow: 0 15px 30px rgba(124, 58, 237, 0.2);
}

/*BARRES DE PROGRESSION*/
.progress {
  background-color: rgba(255, 255, 255, 0.08);
  border-radius: 50px;
}

.progress-bar {
  border-radius: 50px;
  transition: width 1.5s ease;
}

body {
  background-color: #0D0D1A;
}

.carte-projet,
.carte-projet.card {
  background-color: #12001F !important;
  background: #12001F !important;
  border: 1px solid rgba(191, 0, 255, 0.2) !important;
  color: white !important;
  border-radius: 15px;
  transition: 0.3s;
  height: 100;
}

.carte-projet:hover {
  transform: translateY(-10px);
  box-shadow: 0 10px 25px rgba(191, 0, 255, 0.3);
  border-color: #BF00FF !important;
}

.carte-projet .card-body {
  background-color: transparent !important;
  color: white !important;
}

.carte-projet .card-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.carte-projet h5,
.carte-projet p,
.carte-projet .card-title {
  font-size: 0.95rem !important;
  min-height: 10px;
}

.carte-projet .card-text {
  color: white !important;
  background-color: transparent !important;
}

.carte-projet-image {
  background-color: transparent !important;
  padding: 10px;
  text-align: center;
}

.icon-box {
  padding: 10px;
  background-color: transparent !important;
}

.card-body {
  background: transparent !important;
  color: white !important;
}

.card-body h5 {
  margin-bottom: 10px;
  color: white !important;
}

.badge {
  font-size: 0.75rem;
}

.badge.bg-primary {
  background-color: #BF00FF !important;
  color: white !important;
}

.badge.bg-info {
  background-color: #00BFFF !important;
  color: white !important;
}


/*PAGE CONTACT*/
.info-contact {
  display: flex;
  align-items: center;
}

.formulaire-contact {
  background-color: rgba(124, 58, 237, 0.05);
  border: 1px solid rgba(124, 58, 237, 0.2);
}

.champ-contact {
  background-color: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(124, 58, 237, 0.3) !important;
  color: white !important;
  border-radius: 10px !important;
  transition: border-color 0.3s ease;
}

.champ-contact:focus {
  border-color: var(--couleur-principale) !important;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.2) !important;
  background-color: rgba(255, 255, 255, 0.09) !important;
}

.champ-contact::placeholder {
  color: rgba(255, 255, 255, 0.25) !important;
}

/*LIGHT MODE*/
body.light-mode {
  background-color: #F5F3FF;
  color: #1a1a2e;
}

body.light-mode #navbar {
  background-color: rgba(245, 243, 255, 0.97) !important;
}

body.light-mode .navbar-brand,
body.light-mode .nav-link {
  color: #1a1a2e !important;
}

body.light-mode .nav-link:hover,
body.light-mode .nav-link.active {
  color: var(--couleur-principale) !important;
}

body.light-mode .hero {
  background: linear-gradient(135deg, #EDE9FE 0%, #F5F3FF 50%, #E0F2FE 100%);
}

body.light-mode .bg-dark {
  background-color: #EDE9FE !important;
}

body.light-mode .carte-projet,
body.light-mode .formulaire-contact,
body.light-mode .carte-parcours {
  background-color: white;
  border-color: rgba(237, 58, 58, 0.3);
  box-shadow: 0 4px 15px rgba(124, 58, 237, 0.1);
}

body.light-mode .text-white {
  color: #1a1a2e !important;
}

body.light-mode .text-white-50 {
  color: #6B7280 !important;
}

body.light-mode .champ-contact {
  background-color: white !important;
  color: #1a1a2e !important;
}

/*PIED DE PAGE*/
footer {
  border-top: 1px solid rgba(124, 58, 237, 0.15);
}

/*RESPONSIVE MOBILE*/
@media (max-width: 768px) {
  .hero h1 {
    font-size: 1.8rem;
  }

  .photo-profil {
    width: 130px;
    height: 130px;
  }

  .d-flex.gap-3 {
    flex-direction: column;
    align-items: center;
  }

  .page-header {
    padding: 120px 0 40px 0;
  }
}