/* ================================
   🎨 COULEURS PRINCIPALES ET POLICE VH PRO
=================================== */
:root {
    --clr-blue: #016a85;       /* Principal - Sport dynamique */
    --clr-ciel: #24e4f0;
    --clr-green: #079c85;      /* Validation / Réussite */
    --clr-olive: #79a685;
    --clr-orange: #fd7e14;     /* Actions secondaires */
    --clr-light: #f8f9fa;      /* Fond clair */
    --clr-red: #dc3545;        /* Avertissements / Annulation */
    --clr-dark: #212529;       /* Texte principal */

    --clr-gris: #929393;      /* Fond clair */
    --clr-card :#F2F7F4;                /* pour les cartes */
    --ff-main: 'Outfit', sans-serif;
}

/* ================================
   🔤 TYPOGRAPHIE (Outfit dans static/fonts)
=================================== */
@font-face {
  font-family: 'Outfit';
  src: url('fonts/Outfit-Thin.ttf') format('truetype');
  font-weight: 100;
}
@font-face {
  font-family: 'Outfit';
  src: url('fonts/Outfit-ExtraLight.ttf') format('truetype');
  font-weight: 200;
}
@font-face {
  font-family: 'Outfit';
  src: url('fonts/Outfit-Light.ttf') format('truetype');
  font-weight: 300;
}
@font-face {
  font-family: 'Outfit';
  src: url('fonts/Outfit-Regular.ttf') format('truetype');
  font-weight: 400;
}
@font-face {
  font-family: 'Outfit';
  src: url('fonts/Outfit-Medium.ttf') format('truetype');
  font-weight: 500;
}
@font-face {
  font-family: 'Outfit';
  src: url('fonts/Outfit-SemiBold.ttf') format('truetype');
  font-weight: 600;
}
@font-face {
  font-family: 'Outfit';
  src: url('fonts/Outfit-Bold.ttf') format('truetype');
  font-weight: 700;
}
@font-face {
  font-family: 'Outfit';
  src: url('fonts/Outfit-ExtraBold.ttf') format('truetype');
  font-weight: 800;
}
@font-face {
  font-family: 'Outfit';
  src: url('fonts/Outfit-Black.ttf') format('truetype');
  font-weight: 900;
}

body {
  font-family: 'Outfit', Roboto, Arial, sans-serif;
  background-color: white;
  color: var(--clr-dark);
  transition: background-color 0.3s ease, color 0.3s ease;

/* ✅ Compense l'espace pour que le contenu ne soit pas caché */
  padding-bottom: calc(90px + env(safe-area-inset-bottom, 20px));
}

h1, h2, h3, h4, h5 {
  font-weight: 700;
  color: var(--clr-dark);
}

a {
  text-decoration: none;
}

main.container {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/* ================================
   🖱️COULEURS TEXTE PERSONNALISÉES
=================================== */

.text-blue {
  color: var(--clr-blue) !important;
}
.text-ciel {
  color: var(--clr-ciel) !important;
}
.text-green {
  color: var(--clr-green) !important;
}
.text-olive {
  color: var(--clr-olive) !important;
}
.text-orange {
  color: var(--clr-orange) !important;
}
.text-red {
  color: var(--clr-red) !important;
}
.text-dark {
  color: var(--clr-dark) !important;
}
.text-light {
  color: var(--clr-light) !important;
}
.text-gris {
  color: var(--clr-gris) !important;
}

/* ================================
   🖱️COULEURS FONDS PERSONNALISÉES
=================================== */

.fond-blue {
  background-color: var(--clr-blue) !important;
}
.fond-ciel {
  background-color: var(--clr-ciel) !important;
}
.fond-green {
  background-color: var(--clr-green) !important;
}
.fond-olive {
  background-color: var(--clr-olive) !important;
}
.fond-orange {
  background-color: var(--clr-orange) !important;
}
.fond-red {
  background-color: var(--clr-red) !important;
}
.fond-dark {
  background-color: var(--clr-dark) !important;
}
.fond-light {
  background-color: var(--clr-light) !important;
}
.fond-gris {
  background-color: var(--clr-gris) !important;
}
/* ================================
   🎠 CAROUSEL 3D VH Pro
=================================== */
.carousel3d {
  width: 100%;
  max-width: 1140px;
    min-height: 540px; /* ✅ garde juste une hauteur minimale */
  margin: 60px auto 0; /* centré automatiquement */
  perspective: 1600px;
  position: relative;
  display: flex;           /* ✅ centre le container */
  justify-content: center; /* ✅ centre horizontalement */
  overflow: visible;
}

.carousel3d__container {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.8s ease;
}

.carousel3d__item {
  position: absolute;
  width: 50%;       /* largeur des slides */
  max-width: none;
  min-width: 300px;
  height: auto;
  left: 50%;
  top: 50%;
  transition: transform 0.8s ease;
  cursor: pointer;

  /* ✅ padding réduit pour rapprocher le contenu du bord */
  padding: 0.8rem !important;
}

/* ✅ TITRES SLIDES */
.carousel3d__item h3 {
  text-align: center;
  width: 100%;
  display: block;
  font-size: 1.5rem;
  margin-bottom: 10px !important; /* rapproche le titre de la 1ère carte */
  color: #fff; /* adapté aux slides colorées */
}

/* ✅ CARTES INTERNES */
.carousel3d__item .card {
  margin: 6px auto;          /* top/bottom = 8px, left/right = auto → centré */
  padding: 1.1rem !important;  /* padding équilibré */
  max-width: 98%;            /* évite de dépasser */
  background-color: #F2F7F4; /* fond des cartes */
  border-radius: 12px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.15);
}

/* ✅ TEXTES ET LISTES DANS LES SLIDES */
.carousel3d__item p,
.carousel3d__item li {
  font-size: 0.8rem;  /* texte un peu réduit */
  line-height: 1.4;   /* lisibilité améliorée */
}

/* ✅ FONDS DES SLIDES */
.slide-green {
  background: var(--clr-green);
  box-shadow: 0 0 30px rgba(40, 167, 69, 0.4);
}
.slide-orange {
  background: var(--clr-orange);
  box-shadow: 0 0 30px rgba(108, 156, 116, 0.4);
}
.slide-blue {
  background: var(--clr-blue);
  box-shadow: 0 0 30px rgba(0, 123, 255, 0.4);
}
.card.text-center.mb-5 {
  margin-bottom: 0.5rem !important; /* réduit à ta convenance */
}

/* ✅ Desktop par défaut */
.desktop-only {
  display: block;
}
.mobile-only {
  display: none;
}

/* ✅ Mobile : on masque le carrousel 3D et on affiche la version verticale */
@media (max-width: 768px) {
  .desktop-only {
    display: none;
  }
  .mobile-only {
    display: block;
    margin-top: 20px;
  }

  .accordion-button {
    font-size: 1rem;
    padding: 0.75rem;
  }

  .accordion-body {
    font-size: 0.9rem;
    line-height: 1.4;
  }
}
/* ================================
   🖱️ BOUTONS PERSONNALISÉS
=================================== */
.btn-custom-blue {
  background-color: var(--clr-blue);
  color: #fff;
  border: none;
}
.btn-custom-blue:hover {
  background-color: #0c658a;
}

.btn-custom-green {
  background-color: var(--clr-green);
  color: #fff;
  border: none;
}
.btn-custom-green:hover {
  background-color: #00b87d;
}

.btn-custom-orange {
  background-color: var(--clr-orange);
  color: #fff;
  border: none;
}
.btn-custom-orange:hover {
  background-color: #e96c0a;
}

.btn-custom-red {
  background-color: var(--clr-red);
  color: #fff;
  border: none;
}
.btn-custom-red:hover {
  background-color: #c82333;
}

.btn {
  border-radius: 50px;
  font-weight: 600;
  transition: all 0.3s ease;
}

/* ================================
   ✅ BOUTON RENSEIGNEMENTS NAVBAR
=================================== */
.navbar-nav {
  white-space: nowrap; /* ✅ Empêche tout retour à la ligne */
}

.navbar-nav .nav-item {
  margin-left: 12px;
  margin-right: 12px;
}

.navbar-nav .nav-link {
  padding: 0.5rem 0.75rem; /* un peu plus de "respiration" */
  font-size: 1rem;          /* taille légèrement augmentée si souhaité */
}

.navbar-nav .nav-link.active {
  color: var(--clr-green); /* ✅ Couleur pour l'item actif */
}

.navbar-nav .nav-link:hover {
  color: var(--clr-green);    /* effet visuel au survol */
  text-decoration: underline;
}

.navbar .demande-rens {
  background-color: var(--clr-green);
  color: #fff !important;
  border-radius: 50px;
  padding: 6px 14px;
  display: inline-flex;
  align-items: center;
  font-weight: 600;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.navbar .demande-rens:hover {
  background-color: #02b67f;
  transform: translateY(-1px);
}

.navbar .demande-rens .icon-wrapper {
  background-color: #fff;
  color: var(--clr-green);
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 6px;
}

.navbar .demande-rens:hover .icon-wrapper {
  background-color: rgba(255, 255, 255, 0.9);
}

/* ================================
   📦 CARDS PREMIUM
=================================== */
.card {
  border: none;
  border-radius: 12px;
  background-color: var(--clr-card);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
}
.card h5, .card h4 {
  font-weight: 700;
  color: var(--clr-dark);
}

/* ================================
   📱 BARRE LATERALE
=================================== */
.sidebar {
  width: 180px;
  background-color: #fff;
  border-right: 1px solid #ddd;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  padding-top: 20px;
  overflow-y: auto;
  transition: width 0.3s ease;
  z-index: 1000;
}
.sidebar.collapsed {
  width: 70px;
}
.sidebar-link {
  display: flex;
  align-items: center;
  padding: 10px 20px;
  color: var(--clr-dark);
  font-weight: 500;
  transition: background 0.3s ease, color 0.3s ease;
}
.sidebar-link:hover, .sidebar-link.active {
  background-color: var(--clr-light);
  color: var(--clr-blue);
}
.sidebar-link i {
  margin-right: 10px;
  font-size: 1.2rem;
}
.sidebar.collapsed .sidebar-link span {
  display: none;
}

/* ================================
   ✅ BARRE DE PROGRESSION SCROLL
=================================== */
#progress-bar {
  position: fixed;
  top: 0px;
  left: 0;
  height: 6px;
  background: linear-gradient(90deg, var(--clr-orange), var(--clr-green));
  width: 0%;
  z-index: 9999;
  transition: width 0.05s ease-out;
}

/* ================================
   📱 NAVIGATION MOBILE
=================================== */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    border-top: 1px solid #ddd;
    display: flex;
    justify-content: space-around;
    padding: 14px 0;
    z-index: 1000;

  /* ✅ Ajout safe-area mais compensé visuellement */
    padding-bottom: calc(constant(safe-area-inset-bottom, 20px) + 9px); /* ancien iOS */
    padding-bottom: calc(env(safe-area-inset-bottom, 20px) + 14px);      /* nouveaux iOS */
    transform: translateY(2px); /* 🔥 Baisse légèrement tout */
}

.bottom-nav .nav-link {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 0.85rem;
  color: #666;
  transition: color 0.3s ease;
}

.bottom-nav .nav-link span {
  margin-top: 1px; /* ✅ remonte légèrement le texte */
}

.bottom-nav .icon-wrapper {
  background-color: var(--clr-light);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
    font-size: 1.3rem; /* Icône légèrement agrandie */
  margin-bottom: 0px;
}

.bottom-nav .nav-link.active {
  color: var(--clr-green);
}

.bottom-nav .nav-link.active .icon-wrapper {
  background-color: rgba(16, 123, 167, 0.15);
}

/* ✅ Cas particulier pour le bouton Renseignements */
.bottom-nav .demande-rens .icon-wrapper {
  background-color: var(--clr-green) !important;
  color: #fff !important;
}

.bottom-nav .demande-rens.active .icon-wrapper {
  background-color: #02b67e !important;
}

.bottom-nav .demande-rens {
  color: var(--clr-green);
}

.bottom-nav .demande-rens.active {
  color: #fff;
}

/* ✅ Bouton flottant */
#chat-button {
  position: fixed;
  bottom: 95px;
  right: 20px;
  background: var(--clr-green);
  color: #fff;
  border-radius: 50%;
  width: 55px;
  height: 55px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 26px;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(0,0,0,0.2);
  z-index: 1001;
  transition: transform 0.2s ease;
}
#chat-button:hover { transform: scale(1.05); }

/* ✅ Pop-up */
#chat-popup {
  position: fixed;
  bottom: 170px;
  right: 20px;
  width: 250px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.2);
  padding: 15px;
  display: none;
  flex-direction: column;
  z-index: 1002;
}
#chat-popup.open { display: flex; }

#chat-popup input,
#chat-popup textarea {
  width: 100%;
  margin-bottom: 8px;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 5px;
  font-size: 0.9rem;
}

#chat-popup button {
  background: var(--clr-green);
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 5px 0;
  font-weight: 600;
  cursor: pointer;
}

#form-status {
  font-size: 0.8rem;
  color: var(--clr-blue);
  margin-top: 5px;
  text-align: center;
}

/* ✅ Masque la bulle flottante sur mobile */
@media (max-width: 768px) {
  #chat-button,
  #chat-popup {
    display: none !important;
  }
}

/* ================================
   🌙 MODE SOMBRE (géré par dark-mode.css)
=================================== */