/* Fond global du site : degrade propre, sans motif ni animation */
.bg-points {
  min-height: 100vh;
  margin: 0;
  font-family: Arial, sans-serif;
  color: rgb(220, 119, 30); /* tu gardes ta couleur de texte principale */

  /* Degrade de fond */
  background: linear-gradient(135deg, #050308, #2b0303, #050308);
  background-attachment: fixed;   /* effet "parallaxe" leger quand on scrolle */
}


/* --- En-tete --- */
header {
  text-align: center;
  padding: 50px 20px 20px;
}

/* --- Contenu principal --- */
main {
  text-align: center;
  padding: 20px;
}

/* Titre du header */
h2 {
  font-weight: bold;
  text-align: center;
}

/* Boutons du menu */
.btn-outline-light {
  border-color: rgb(220, 119, 30);
  color: rgb(220, 119, 30);
}

.btn-outline-light:hover {
  background-color: rgb(220, 119, 30);
}

/* Icones */
.btn-link {
  text-decoration: none;
  
}
.bi {
  color: rgb(220, 119, 30);
}

.object-fit-cover {
  object-fit: cover;
}

.carouselRow::-webkit-scrollbar {
  display: none; /* Cache la barre de scroll */
}

.carouselRow {
  scroll-behavior: smooth;
  -ms-overflow-style: none; /* IE et Edge */
  scrollbar-width: none; /* Firefox */
}


/* Style des cartes du carousel */
.carousel-wrapper .card {
  border: none;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.carousel-wrapper .card:hover {
  transform: scale(1.03);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.35);
}

/* Image et video */
.carousel-wrapper img,
.carousel-wrapper video {
  transition: transform 0.5s ease;
}


/* Boutons navigation */
.carousel-wrapper button {
  border-radius: 50px;
  padding: 8px 16px;
  font-weight: bold;
  transition: all 0.3s ease;
}

.carousel-wrapper button:hover {
  background-color: rgb(220, 119, 30);
  color: #fff;
  box-shadow: 0 4px 12px rgba(220, 119, 30, 0.5);
}
.carousel-wrapper {
    margin-top: 20px; /* ou la valeur souhaitee */
}


.card-section {
  background: rgba(56, 6, 6, 0.9);          /* fond sombre translucide, coherent avec le body */
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.667);
  color: #f5f5f5;
  overflow: hidden;
}
.card-section .card-title,
.card-section h5,
.card-section h6 {
  color: #ffffff;
}
/* Texte dans les cartes */
.card-section .card-text,
.card-section p {
  color: #d7d7d7;
}
/* Footer des cartes (date, etc.) */
.card-section .card-footer {
  background: transparent;
  border-top: 1px solid rgba(220, 119, 30, 0.25);
  color: #aaaaaa;
}
.footer-custom {
    width: 100% ;            /* Force la largeur totale */
    margin-top: 50px;       /* Espacement au-dessus du footer */
    padding-top: 50px;
    padding-bottom: 20px;
    border-top: 1px solid rgba(220, 119, 30, 0.2); /* Rappel de ton orange */
}
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

footer {
    margin-top: auto;
}
/* Cartes objectifs & vlogs (hover) */
.goal-card,
.vlog-card {
  border-radius: 16px;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.goal-card:hover,
.vlog-card:hover,
.card-section:hover {
  transform: translateY(-6px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.45);
  border-color: rgba(255, 170, 51, 0.8);
}
/* Progress bar : on la laisse ressortir */
.progress {
  background-color: rgba(39, 41, 90, 0.642);
}

.progress-bar.bg-gradient {
  background: linear-gradient(90deg, #ff8c00, #ff3d00);
  transition: width 1s ease-in-out;
  font-weight: bold;
}

/* Animation au chargement */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}


/* ===== Cartes Formations ===== */
/* Image always same height */
.card-img-wrapper {
  height: 220px;   /* tu peux mettre 250px si tu veux plus grand */
  overflow: hidden;
  border-bottom: 1px solid rgba(220,119,30,0.2);
}

.formation-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}








/* leger halo au dessus du header */
.header-bar::before {
  content: "";
  position: absolute;
  inset: -30px 0 auto 0;
  height: 40px;
  background: radial-gradient(circle at top,
    rgba(255, 200, 120, 0.3),
    transparent 70%);
  opacity: 0.5;
  pointer-events: none;
}

/* Titre avec effet neon / shine */
.brand-title {
  background: linear-gradient(90deg, #ffb347, #ffdd7a, #ffb347);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 12px rgba(255, 180, 80, 0.6);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  animation: titleShine 4s ease-in-out infinite;
}

/* Capsule utilisateur (connecte) */
.user-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  font-size: 1rem;
  background: radial-gradient(circle at top left,
    rgba(220,119,30,0.4),
    rgba(5,3,8,1));
  color: rgb(255, 255, 255);
  border: 1px solid rgba(220,119,30,0.6);
  box-shadow: 0 0 12px rgba(220,119,30,0.5);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.user-pill:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 18px rgba(255, 200, 120, 0.9);
  border-color: rgba(255, 210, 130, 1);
}

/* Icone utilisateur (non connecte) */
.user-icon i {
  text-shadow: 0 0 10px rgba(220,119,30,0.9);
  transition: transform 0.2s ease, text-shadow 0.2s ease;
}

.user-icon:hover i {
  transform: translateY(-2px) scale(1.05);
  text-shadow: 0 0 16px rgba(255, 210, 130, 1);
}

/* Animations */

@keyframes headerGlow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes titleShine {
  0%, 100% {
    text-shadow:
      0 0 8px rgba(255, 200, 120, 0.6),
      0 0 20px rgba(220, 119, 30, 0.4);
    opacity: 0.9;
  }
  50% {
    text-shadow:
      0 0 14px rgba(255, 240, 180, 1),
      0 0 30px rgba(255, 180, 80, 0.9);
    opacity: 1;
  }
}


@media (max-width: 949px) {
  #menuNav {
    display: none !important; 
}
}