/* ===== LOGIN PAGE ===== */
    .login-box {
      -webkit-box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.1);
              box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.1);
      border-radius: 10px;
    }
    
    @media (min-width: 992px) {
      .login-box {
        margin: 40px 0;
      }
    }
    
    .login-box .form-wrap {
      padding: 30px 25px;
      border-radius: 10px;
      -webkit-box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.1);
              box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.1);
    }
    
    @media (min-width: 768px) {
      .login-box .form-wrap {
        padding: 45px;
      }
    }
    
    @media (min-width: 992px) {
      .login-box .form-wrap {
        margin-top: 100px;
        margin-bottom: 100px;
        padding: 60px;
      }
    }
    .customlink {
        font-size: 14px!important;
    }
    .imageEvent {
      box-shadow:8px 8px 10px 0 rgba(0,0,0,0.5);
      border-radius: 4px;

    }
    
    .login-box .socials a {
      -webkit-box-shadow: 0 3px 2px 0 rgba(0, 0, 0, 0.12);
              box-shadow: 0 3px 2px 0 rgba(0, 0, 0, 0.12);
    }
    
    .login-section {
      position: relative;
      z-index: 0;
    }
    .bg-gray {
        background-color: #FAFAFA!important;
    }
    
    .login-section::after {
      position: absolute;
      content: '';
      right: 0;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      opacity: 0.15;
      z-index: -1;
      
      background-size: cover;
      background-repeat: no-repeat;
      background-position: top right;
      -webkit-animation-duration: 3s;
              animation-duration: 3s;
      -webkit-animation-direction: alternate;
              animation-direction: alternate;
      -webkit-animation-iteration-count: infinite;
              animation-iteration-count: infinite;
      -webkit-animation-name: pulse;
              animation-name: pulse;
    }
    
    .login-section::before {
      position: absolute;
      content: '';
      opacity: 0.10;
      right: 0;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
      
      background-size: cover;
      background-position: top right;
      -webkit-animation-duration: 6s;
              animation-duration: 6s;
      -webkit-animation-direction: alternate;
              animation-direction: alternate;
      -webkit-animation-iteration-count: infinite;
              animation-iteration-count: infinite;
      -webkit-animation-name: pulse;
              animation-name: pulse;
    }
    
    .login-section .content {
      padding: 45px;
    }
    
    .form-group .zmdi {
        position: absolute;
        z-index: 1;
        color: #fff;
        background-color: #0d6efd;
        border-radius: 5px;
        height: 100%;
        width: 45px;
        text-align: center;
        font-size: 20px;
        padding-top: 13px;
    }
    
    .form-group input[type='email'], .form-group input[type='password'] {
        padding-left: 60px!important;
    }
    .create-event-page .form-group input[type='text'] {
        padding-left: 10px!important;
    }
    
    .form-control {
        border: 1px solid #e1e1e1;
        -webkit-box-shadow: none;
        box-shadow: none;
        border-radius: 5px;
        -webkit-transition: all .3s ease;
        transition: all .3s ease;
        background-color: #fff;
        color: #858585;
        font-weight: 400;
        position: relative;

    }
    .maxlarge {
      width: 90%; /* Ajustez la largeur comme désiré */
      max-width: 400px; /* Empêche le champ d'être trop large */
      margin: 0 auto; /* Centre le champ */
    }
    
    .navbar {
      background-color: #1A1A1A; /* Royal Blue */
      padding: 2rem 3rem; /* Increased padding for height and width */
      height: 80px; /* Explicitly setting a taller height */
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
      display: flex;
      align-items: center;
    }
  }
  
  /* Add a media query for larger screens */
  @media (min-width: 1200px) {
      .navbar .container {
          max-width: 1400px; /* Increase the container's max-width */
      }
  }

/* Styles pour la section event-header */
.event-header {
  background-image: url('<?= htmlspecialchars($eventImage) ?>');
  background-size: cover;
  background-position: center;
  color: #fff;
  padding: 70px 0;
  text-align: center;
}

/* Limiter la largeur de l'image sur les grands écrans */
@media (min-width: 769px) {
  .event-header {
    background-size: contain;
    margin-bottom: 0 auto;
    margin-left: 20px;
    margin-right: 20px;
    border-radius: 10px;
  }
}

/* Masquer l'image de fond sur les petits écrans */
@media (max-width: 768px) {
  .event-header {
    background-image: none;
    padding: 30px 10px; /* Ajuster le padding pour mobile */
    height: auto; /* Ajuster la hauteur pour mobile */
    text-align: center; /* Centrer le texte sur mobile */
  }
}
/* Styles pour les cellules contenant les scores */


.event-title {
  font-weight: bold;
  font-size: 2.5rem;
  margin: 0;
}

/* Ajouter du z-index à la navbar */
.navbar {
  z-index: 10;
  position: relative;
}

.nav-link-principal{
  color: #ffffff!important;
}

/* Styles de base pour mobile */
body {
  font-size: 1rem; /* Ajustez selon vos préférences */
  line-height: 1.6;
  padding: 1rem;
}

h1 {
  font-size: 1.5rem;
}

p {
  font-size: 1rem;
}

/* Pour écrans plus grands */
@media (min-width: 768px) {
  body {
      font-size: 1.125rem;
      padding: 2rem;
  }
  
  h1 {
      font-size: 2rem;
  }
  
  p {
      font-size: 1.125rem;
  }
}



/* Style for active link */
.nav-link-principal.active {
  font-weight: bold; /* Makes the text bold */
  color: #b8e7cc !important;
}

/* Couleur de fond et arrondi pour la liste déroulante en mode responsive */
.navbar-dark-blue .navbar-collapse {
  background-color: var(--brand-green-dark); /* Couleur de fond */
  border-radius: 10px; /* Ajustez la valeur pour des bords plus ou moins arrondis */
  padding: 10px; /* Espace intérieur pour un meilleur affichage */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optionnel : ajout d'une ombre */
}

.page-breadcrumbs {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 1rem;
  padding: 0.48rem 0.85rem;
  border: 1px solid rgba(31, 80, 120, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 10px 24px rgba(16, 43, 73, 0.06);
  backdrop-filter: blur(10px);
  font-size: 0.84rem;
  line-height: 1;
}

.page-breadcrumbs a {
  color: #1d557f;
  font-weight: 700;
  text-decoration: none;
}

.page-breadcrumbs a:hover {
  text-decoration: underline;
}

.page-breadcrumbs .sep {
  color: #7b92ac;
  opacity: 0.8;
}

.page-breadcrumbs [aria-current="page"] {
  color: #5f7893;
  font-weight: 600;
}

/* Arrondi de la liste déroulante uniquement lorsque le menu est ouvert */
.navbar-dark-blue .navbar-collapse.show {
  border-radius: 10px; /* Assurez-vous que les bords arrondis apparaissent uniquement lorsque le menu est déroulé */
}

/* Style pour les liens dans la liste déroulante */
.navbar-dark-blue .navbar-collapse .nav-link {
  color: #ffffff; /* Couleur du texte */
}

.navbar-dark-blue .navbar-collapse .evt-nav-quick {
  margin-left: 8px;
}

.navbar-dark-blue .navbar-collapse .evt-nav-quick-link {
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 999px;
  padding: 0.45rem 0.9rem;
  line-height: 1.2;
  font-weight: 700;
}

.navbar-dark-blue .navbar-collapse .evt-nav-quick-link:hover {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.18);
}

.navbar-dark-blue .navbar-collapse .evt-nav-quick-public .evt-nav-quick-link {
  background: #ffffff;
  color: var(--brand-green-dark);
}

.navbar-dark-blue .navbar-collapse .evt-nav-quick-public .evt-nav-quick-link:hover {
  background: #eef7f2;
  color: var(--brand-green-dark);
}

/* Style au survol des liens dans la liste déroulante */
.navbar-dark-blue .navbar-collapse .nav-link:hover {
  background-color: rgba(255, 255, 255, 0.1); /* Couleur de fond au survol */
  color: #adb5bd; /* Couleur du texte au survol */
  border-radius: 5px; /* Bord arrondi pour les liens si vous le souhaitez */
}

  /* New class for the second navbar with a darker royal blue */
.navbar-dark-blue {
  background-color: var(--brand-green-dark); /* Vert principal */
  padding: 2rem 3rem; /* Adjust padding for height and width */
  height: 80px; /* Set a taller height */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Add a media query for larger screens */
@media (min-width: 1200px) {
  .navbar-dark-blue .container {
      max-width: 1400px; /* Increase the container's max-width */
  }
}
  
      .navbar-brand {
          font-size: 1.7rem; /* Slightly larger font for the brand */
          font-weight: 700;
      }

      .nav-link {
          color: #ffffff;
          padding: 0.8rem 1.5rem; /* Increased padding for a spacious look */
          font-size: 1.1rem; /* Slightly larger font size for nav links */
          transition: color 0.3s, background-color 0.3s;
      }

      .nav-link:hover {
          color: #adb5bd;
          background-color: rgba(255, 255, 255, 0.1);
          border-radius: 5px;
      }

      .nav-link.active {
          color: #ffc107; /* Gold color for the active link */
      }

      .navbar-toggler {
        border-color: rgba(255, 255, 255, 0.3);
    }
    .navbar-collapse {
      text-align: center;
  }

      .content {
        margin-top: 2rem; /* Adjust this value as needed */
    }
    
    .login-box .socials a {
        -webkit-box-shadow: 0 3px 2px 0 rgba(0, 0, 0, 0.12);
        box-shadow: 0 3px 2px 0 rgba(0, 0, 0, 0.12);
    }
    .socials a {
        width: 35px;
        height: 35px;
        background-color: #6893e1;
        border-radius: 50%;
        -webkit-box-shadow: 0 3px 2px 0 #516cd9;
        box-shadow: 0 3px 2px 0 #516cd9;
        text-align: center;
        color: #fff;
        padding-top: 10px;
        font-size: 16px;
        margin-right: 10px;
        -webkit-transition: all 0.3s ease;
        transition: all 0.3s ease;
    }

    
.credit-card-icons {
  margin-bottom: 20px;
  text-align: center;
}

/* Assurez-vous que les icônes des cartes de crédit sont alignées et de la bonne taille */
.credit-card-icons img {
  height: 40px;
  margin-right: 10px;
}

/* Style pour le formulaire de paiement */
#payment-form .form-control {
  border: 1px solid #ced4da;
  border-radius: 4px;
  padding: .375rem .75rem;
  height: 40px;
  transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

#payment-form .form-control:focus {
  border-color: #7bd0aa;
  outline: 0;
  box-shadow: 0 0 0 .2rem rgba(31,143,95,.25);
}

.btn-primary {
  color: #fff;
  background-color: var(--brand-green);
  border-color: var(--brand-green);
}

.btn-primary:hover {
  color: #fff;
  background-color: var(--brand-green-dark);
  border-color: var(--brand-green-dark);
}

/* Pour que les erreurs soient bien visibles */
#card-errors {
  color: #fa755a;
}

.content {
  padding-top: 50px; /* Ajustez cette valeur en fonction de la hauteur de la navbar */
}

/* Style pour aligner les champs date et CVC sur une ligne */
.form-row {
    display: flex;
    justify-content: space-between;
}

.form-row .col-md-6 {
    flex: 0 0 48%; /* Ajuste la largeur de chaque colonne pour qu'elles soient égales et espacées */
    max-width: 48%; /* Ajuste la largeur maximale de chaque colonne */
}

/* Ajustement pour les petits écrans */
@media (max-width: 768px) {
    .form-row .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }

}

@media (max-width: 990px) {

    .navbar-nav .nav-link {
      padding: 10px 0;
  }
    .navbar-collapse {
      background-color: #1A1A1A; /* Optional: Set a background color for mobile */
  }
  .navbar-collapse.rounded-navbar {
    background-color: #1A1A1A; /* Couleur de fond du menu déroulant */
    border-radius: 10px; /* Ajustez la valeur pour des bords plus ou moins arrondis */
    padding: 10px; /* Espace intérieur pour un meilleur affichage */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optionnel : ajout d'une ombre */
  }
}

.textRenseigner{
    color: #32CD32!important;
}
#teaDescription {
  height: auto !important;
  min-height: 30px; /* ou toute autre hauteur que vous préférez */
}
.custom-list {
  list-style: none; /* Enlève les puces par défaut */
  padding-left: 0; /* Enlève le padding à gauche */
}

.custom-list li::before {
  content: "\f44b"; /* Icône d'un haltère pour fitness/musculation */
  font-family: 'Font Awesome 5 Free'; /* Assurez-vous d'utiliser le bon nom de famille de police */
  font-weight: 700; /* Important pour les icônes solides */
  margin-right: 8px; /* Espace entre l'icône et le texte */
  display: inline-block; /* Important pour l'alignement */
}
.badge-custom {
  padding: 0.6em 1em;
  font-size: 100%;
  font-weight: normal;
}

.create-event-page{ 
  padding-top: 20px;
  padding-bottom: 20px;
}
.create-event-page .container {
  border-radius: 15px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  margin-top: 20px;
  margin-bottom: 20px;
}
.create-event-page .header {
  margin-bottom: 20px;
  text-align: center;
}
.create-event-page .eventaddTitle {
  padding-top: 30px;
  padding-bottom: 30px;
  font-weight: bolder !important;
  text-align: center;
}

.create-event-page .header h2 {
  font-weight: 300;
}
.create-event-page .form-control {
  border-radius: 10px;
}
.create-event-page .btn-primary {
  text-align: center;

  margin-bottom: 30px;
}
.create-event-page .mgtopdateEvent {
  margin-top: 20px!important;
}
.custom-file-input {
  padding-right: 80px!important;
}
.custom-file-label {
  padding-right: 80px!important;
}

/* Ajoutez des tailles de police spécifiques */
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
    content: 'Petit';
    font-size: 10px;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="normal"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="normal"]::before {
    content: 'Normal';
    font-size: 13px; /* Taille par défaut */
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
    content: 'Grand';
    font-size: 18px;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
    content: 'Énorme';
    font-size: 32px;
}
.ql-size-large {
    font-size: 22px;
}
.ql-size-huge {
    font-size: 32px;
}
.ql-size-small {
    font-size: 12px;
}
.ql-size-normal {
    font-size: 16px;
}
.DecriptionEvent {
  margin-bottom: 20px;
  color: #32CD32!important;
}
.table-scroll-limited tbody {
  display: block;
  max-height: 300px; /* Adjust based on your preference */
  overflow-y: auto;
}

.table-scroll-limited thead,
.table-scroll-limited tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

.table-scroll-limited thead {
  width: calc(100% - 1em); /* Adjust for scrollbar width */
}
.marginbottomEvent{
  margin-bottom: 50px !important;
  padding-bottom: 50px !important;
}


.category-name {
  background-color: #343a40 !important; /* Dark background */
  color: #ffffff !important; /* White text */
  font-weight: bold;
  padding: 10px;
}
.team-name {
  padding-left: 20px !important; /* Adjust this value to move the team name further to the right */
  font-weight: bold;
  padding: 10px;
  font-size: 18px!important;
}

.role-customer {
  color: #5cb85c !important; /* Green text for customers */
  font-weight: bold;
}
.role-participant {
  color: #d9534f !important; /* Red text for participants */
  font-weight: bold;
}
.table-custom {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
  color: #212529 !important;
}
.table-custom th,
.table-custom td {
  border: 1px solid #dee2e6 !important;
  padding: 0.75rem;
  vertical-align: top;
  text-align: left;
}
.table-custom thead th {
  vertical-align: bottom;
  border-bottom: 2px solid #dee2e6;
  background-color: var(--brand-green) !important; /* Green background for headers */
  color: #ffffff !important; /* White text for headers */
}
.table-custom tbody tr:nth-child(even) {
  background-color: #ffffff !important; /* White background for even rows */
}


@media (max-width: 768px) {
  .separator {
      display: none;
  }

  .navbar-dark-blue .navbar-collapse .evt-nav-quick {
      margin: 6px 0 0;
      width: 100%;
  }

  .navbar-dark-blue .navbar-collapse .evt-nav-quick-link {
      display: block;
      text-align: center;
  }
}
/* Styles pour le conteneur du leaderboard */
.leaderboard-container {
  width: 100%;
  padding: 0;
  margin: 0;
  font-family: 'Catamaran', sans-serif;
}

/* Styles personnalisés pour le tableau du leaderboard */
#leaderboardTable {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  margin: 0 auto;
  background-color: #fff;
  overflow: hidden;
  border-radius: 10px;
}

#leaderboardTable thead {
  background-color: #343a40;
  color: #fff;
}

#leaderboardTable th, #leaderboardTable td {
  padding: 15px;
  text-align: left;
  vertical-align: middle;
}

#leaderboardTable tbody tr:nth-child(even) {
  background-color: #f8f9fa;
}

#leaderboardTable tbody tr:hover {
  background-color: #e9ecef;
}

.team-name {
  font-weight: bold;
  font-size: 1.1em;
}

.team-affiliate {
  font-size: 0.9em;
  color: #6c757d;
}

.event-header {
  background-size: cover;
  background-position: center;
  padding: 60px 0;
  color: #fff;
  text-align: center;
}

.event-title {
  font-size: 3em;
  font-weight: bold;
  margin: 0;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.6);
}

.category-buttons {
  text-align: center;
}

.category-buttons .btn {
  margin: 5px;
  border-radius: 20px;
  transition: background-color 0.3s, color 0.3s;
}

.category-buttons .btn.active,
.category-buttons .btn:hover {
  background-color: var(--brand-green);
  color: #fff;
}

.flag-icon {
  margin-right: 5px;
}

.leaderboard-container {
  padding-bottom: 50px;
}

@media (max-width: 767.98px) {
  .event-title {
      font-size: 2em;
  }

  #leaderboardTable th, #leaderboardTable td {
      padding: 10px;
  }
}
/* Styles pour les cellules contenant les données Points, Rang, Score */
.leaderboard-data-cell {
  border: 1px solid #dcdcdc; /* Couleur grise subtile */
  border-radius: 5px;
  padding: 10px;
  background-color: #fefefe;
  margin-bottom: 10px;
}

.leaderboard-data-cell td {
  padding: 5px;
}

.leaderboard-data-cell tr:first-child td {
  padding-top: 0;
}

.leaderboard-data-cell tr:last-child td {
  padding-bottom: 0;
}

.leaderboard-data-cell td:first-child {
  font-weight: bold;
  color: #555;
}

/* Centre le texte dans toutes les cellules des en-têtes et des colonnes */
.table-custom th, 
.table-custom td {
    text-align: center;
    vertical-align: middle; /* Centre également verticalement le contenu */
}
.category-header {
  color: var(--brand-green) !important;/* Appliquer la couleur verte */
  margin-left: 1em!important; /* Supprimer la marge droite pour aligner complètement */
  font-weight: bold; /* Mettre le texte en gras (facultatif) */
}
@media (min-width: 1600px) {
  .chart-small {
    width: 1110px !important;
    height: 700px !important;
  }
}

@media (max-width: 1400px) {
  .chart-small {
    width: 900px !important;
    height: 600px !important;
  }
}

@media (max-width: 1100px) {
  .chart-small {
    width: 700px !important;
    height: 500px !important;
  }
}
.leaderboard-container .container {
  width: calc(100% - 30px)!important;
  max-width: none!important;
  margin-left: 15px!important;
  margin-right: 15px!important;
  padding-left: 0!important;
  padding-right: 0!important;
}
.hidden-cell {
  display: none;
}

/* Make the container wider for the specific page */
.container-wide {
  max-width: 1200px; /* Adjust this width to your preference */
}
@media (min-width: 1400px) {
  .container-wide {
      max-width: 1400px!important; /* Adjust this width for larger screens */
  }
}
@media (min-width: 1800px) {
  .container-wide {
      max-width: 1800px!important; /* Adjust this width for larger screens */
  }
}





.hidden {
  display: none;
}


.team-name {
  font-size: 1em!important;
  font-weight: bold!important;
}
.team-affiliate {
  font-size: 0.8em!important;
  color: #666!important;
}


/* Ajouter un espace supplémentaire entre le drapeau et le nom du pays */
.flag-icon {
  margin-right: 10px; /* Ajustez cette valeur pour augmenter ou diminuer l'espace */
}





.highlight {
  font-weight: bold;
  background-color: #d4edda;
}

.team-name {
  font-weight: bold;
  font-size: 1.1em;
}

.team-affiliate {
  font-size: 0.9em;
  color: #6c757d;
}

.flag-icon {
  margin-right: 5px;
}

.table-title {
  margin: 20px 0;
  text-align: center;
}
.timeline {
  position: relative;
  padding: 20px 0;
  margin-top: 20px;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 30%; /* Closer to the left */
  top: 0;
  bottom: 0;
  width: 3px; /* Slightly thicker line */
  background-color: #ddd;
  transform: translateX(-50%);
}

.timeline-item {
  position: relative;
  margin-bottom: 25px;
  padding-left: 0;
  width: 100%;
}

.timeline-item:last-child {
  margin-bottom: 0;
}

.timeline-icon {
  position: absolute;
  left: 30%; /* Align with central line */
  transform: translateX(-50%);
  width: 30px; /* Larger icon */
  height: 30px;
  border-radius: 50%;
  background-color: #4CAF50;
  color: white;
  font-size: 16px; /* Larger font for icon */
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.timeline-content {
  margin-left: 35%; /* Adjusted to be closer to the icon */
  width: 65%; /* Wider content */
  padding: 8px 12px; /* Larger padding */
  background-color: #f9f9f9;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.timeline-content h4 {
  margin: 0;
  font-size: 16px; /* Larger font for header */
  color: #333;
}

.timeline-content p {
  margin: 0;
  font-size: 14px; /* Larger font for text */
  color: #777;
}
/* Conteneur plus large sur grand écran */
@media (min-width: 1800px) {
  .custom-container {
      max-width: 1800px!important;
  }
}

/* Marge entre navbar et contenu */
.mt-nav-spacer {
  margin-top: 100px!important;
}

/* Reset spacing under event management navbar only */
nav.navbar-dark-blue ~ .content {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

nav.navbar-dark-blue ~ .content .mt-nav-spacer {
  margin-top: 1rem !important;
}

@media (max-width: 767px) {
  nav.navbar-dark-blue ~ .content .mt-nav-spacer {
    margin-top: 0.6rem !important;
  }
}

/* ===============================
   CENTRALIZED MANAGEMENT THEME
   Edit these variables once to update all manage pages.
   =============================== */
:root {
  --manage-bg-radial: radial-gradient(circle at 8% -10%, #d9f2e3 0%, transparent 52%);
  --manage-bg-color: #f6f8fc;
  --manage-page-pad: 1.5rem 0 3rem;
  --manage-brand: var(--brand-green);
  --manage-brand-dark: var(--brand-green-dark);
  --manage-hero-bg: linear-gradient(145deg, var(--brand-green-deep), var(--brand-green));
  --manage-hero-pad: 1.35rem;
  --manage-hero-gap: 1rem;
  --manage-hero-radius: 22px;
  --manage-hero-shadow: 0 20px 40px rgba(13, 39, 69, 0.2);
  --manage-panel-bg: #ffffff;
  --manage-panel-line: #dce6f3;
  --manage-panel-radius: 18px;
  --manage-panel-shadow: 0 12px 30px rgba(17, 46, 77, 0.07);
}

.manage-v2,
.managecat-v2,
.manageworkout-v2,
.managereg-v2,
.managescore-v2,
.managehoraire-v2,
.managehorairediag-v2,
.create-v2,
.assign-v2 {
  background: var(--manage-bg-radial), var(--manage-bg-color) !important;
  padding: var(--manage-page-pad) !important;
}

.mg2-hero,
.mc2-hero,
.mw2-hero,
.mr2-hero,
.ms2-hero,
.mh2-hero,
.mhd2-hero,
.cv2-hero,
.av2-hero {
  background: var(--manage-hero-bg) !important;
  color: #fff !important;
  padding: var(--manage-hero-pad) !important;
  margin-bottom: var(--manage-hero-gap) !important;
  border-radius: var(--manage-hero-radius) !important;
  box-shadow: var(--manage-hero-shadow) !important;
}

.mg2-hero h1,
.mc2-hero h1,
.mw2-hero h1,
.mr2-hero h1,
.ms2-hero h1,
.mh2-hero h1,
.mhd2-hero h1,
.cv2-hero h1,
.av2-hero h1 {
  margin: 0 !important;
  font-size: 1.5rem !important;
  font-weight: 800 !important;
}

.mg2-hero p,
.mc2-hero p,
.mw2-hero p,
.mr2-hero p,
.ms2-hero p,
.mh2-hero p,
.mhd2-hero p,
.cv2-hero p,
.av2-hero p {
  margin: 0.35rem 0 0 !important;
  opacity: 0.92 !important;
}

.mg2-panel,
.mc2-panel,
.mw2-panel,
.mr2-panel,
.ms2-panel,
.mh2-panel,
.mhd2-panel,
.cv2-form-wrap,
.av2-panel {
  background: var(--manage-panel-bg) !important;
  border: 1px solid var(--manage-panel-line) !important;
  border-radius: var(--manage-panel-radius) !important;
  box-shadow: var(--manage-panel-shadow) !important;
  margin-top: 1rem;
  padding: 1rem;
}

/* Shared primary action button (same as index "Appliquer") */
.i3-btn-primary {
  background: linear-gradient(135deg, var(--manage-brand), var(--manage-brand-dark));
  color: #fff !important;
  border: 0 !important;
  border-radius: 10px !important;
  min-height: 42px !important;
  height: 42px !important;
  padding: 0.45rem 0.9rem !important;
  line-height: 1 !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  white-space: nowrap;
  text-decoration: none !important;
}

.i3-btn-outline-theme {
  background: #fff;
  color: var(--manage-brand) !important;
  border: 1px solid var(--manage-brand) !important;
  border-radius: 10px !important;
  min-height: 42px !important;
  height: 42px !important;
  padding: 0.45rem 0.9rem !important;
  line-height: 1 !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  white-space: nowrap;
  text-decoration: none !important;
}

.i3-btn-outline-theme:hover,
.i3-btn-outline-theme:focus {
  background: var(--brand-green-soft);
  color: var(--manage-brand-dark) !important;
  border-color: var(--manage-brand-dark);
}

.i3-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 0.6rem !important;
}

.i3-actions .btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  vertical-align: middle !important;
  width: 100% !important;
  min-width: 0 !important;
  font-size: 0.95rem !important;
  padding: 0.4rem 0.7rem !important;
  max-width: 100% !important;
  white-space: nowrap !important;
}

/* Shared "Enregistrer les modifications" action on manage pages */
.mg2-actions,
.mc2-actions,
.mw2-actions,
.mr2-actions,
.ms2-actions,
.mh2-actions,
.mhd2-actions {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
}

.mg2-submit,
.mc2-submit,
.mw2-submit,
.mr2-submit,
.ms2-submit,
.mh2-submit,
.mhd2-submit {
  background: linear-gradient(135deg, var(--manage-brand), var(--manage-brand-dark));
  color: #fff !important;
  border: 0 !important;
  border-radius: 10px !important;
  min-height: 44px !important;
  min-width: 260px !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  text-decoration: none !important;
}

@media (max-width: 576px) {
  .i3-actions {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 767px) {
  .manage-v2,
  .managecat-v2,
  .manageworkout-v2,
  .managereg-v2,
  .managescore-v2,
  .managehoraire-v2,
  .managehorairediag-v2,
  .create-v2,
  .assign-v2 {
    padding-top: 1rem !important;
  }

  .mg2-hero h1,
  .mc2-hero h1,
  .mw2-hero h1,
  .mr2-hero h1,
  .ms2-hero h1,
  .mh2-hero h1,
  .mhd2-hero h1,
  .cv2-hero h1,
  .av2-hero h1 {
    font-size: 1.32rem !important;
  }
}



/* Filtres plus compacts sur téléphone */
@media (max-width: 576px) {
  .filter-group {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      margin-bottom: 0.5rem;
  }

  .filter-group label {
      margin-bottom: 0;
      width: 30%;
      font-size: 0.9rem;
  }

  .filter-group input,
  .filter-group select {
      width: 70%;
      font-size: 0.9rem;
      padding: 0.25rem 0.5rem;
  }

  .filter-button {
    margin-top: 0.5rem;
    padding: 0.4rem 1rem;
    font-size: 0.9rem;
    width: 100%;
}
}
/* ESPACE SUR GRANDS ÉCRANS */
@media (min-width: 577px) {
  .filter-button {
      margin-top: 1rem;
      padding: 0.5rem 1.25rem;
      font-size: 1rem;
      width: auto;
  }
}

.filter-group input[type="date"] {
  font-size: 0.9rem;
  padding: 0.4rem;
}
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1; /* le contenu prend tout l'espace restant */
}
.logo-img {
  height: 60px; /* Logo légèrement agrandi */
  width: auto;
  max-height: 70px;
}
.btn-outline-custom-dark {
  color: #1A1A1A!important;
  border: 1px solid #1A1A1A!important;
  background-color: transparent!important;
  transition: background-color 0.2s, color 0.2s;
}

.btn-outline-custom-dark:hover,
.btn-outline-custom-dark:focus {
  background-color: #1A1A1A!important;
  color: white!important;
  border-color: #1A1A1A!important;
}
.btn-custom-green {
  background-color: #2E8B57;
  color: white;
  border: none;
  transition: background-color 0.2s ease-in-out;
}

.btn-custom-green:hover,
.btn-custom-green:focus {
  background-color: #256D46; /* un peu plus foncé au survol */
  color: white;
}

.btn-custom-green {
  border: 1px solid #2E8B57 !important; /* fin contour noir */
  font-weight: 500!important;
  border-radius: 6px!important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08)!important;
  transition: background-color 0.2s ease-in-out!important, box-shadow 0.2s ease-in-out!important;
}

.btn-custom-green:hover,
.btn-custom-green:focus,
.btn-custom-green:active {
  background-color: #256D46;
  color: white!important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.12)!important;
}
/* Global brand palette */
:root {
  --brand-green: #1f8f5f;
  --brand-green-dark: #156a47;
  --brand-green-deep: #0f4f36;
  --brand-green-soft: #d9f2e3;
}