/* Styles de base pour la page 
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 20px;
    box-sizing: border-box;
}

header {
    text-align: center;
    margin-bottom: 30px;
}

/* ---------------------------------- */
/* Styles du conteneur et des flèches */

:root {
  --mh-hover-color: lightgreen; /*#007bff;*/
  --mh-active-item: darkgreen /*#007bff;*/
}

.menu-container {
  display: flex;
  align-items: center;
  position: relative;
}

.nav-arrow {
  background-color: transparent;
  border: none;
  color: #555;
  font-size: 2rem;
  cursor: pointer;
  transition: color 0.3s;
  outline: none;
}

.nav-arrow:hover {
  color: var(--mh-hover-color);
}

.nav-arrow.hidden {
  visibility: hidden;
  opacity: 0;
  pointer-events: none; /* Empêche le clic */
}

/* ---------------------------------- */
/* Styles du menu minimaliste */
.horizontal-menu {
  flex: 1; /* Permet au menu de prendre l'espace restant */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* Masquage de la barre de défilement */
  scrollbar-width: none;  /* Firefox */
}

/* Masquage pour Webkit (Chrome, Safari, etc.) */
.horizontal-menu::-webkit-scrollbar {
  display: none;
}

.horizontal-menu ul {
  display: flex;
  flex-wrap: nowrap;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 30px;
  border-bottom: 1px solid #ddd;
}

.horizontal-menu li {
  flex-shrink: 0;
  position: relative;
  transition: background-color 0.5s;
}

.horizontal-menu a {
  display: block;
  padding: 15px 0;
  text-decoration: none;
  transition: color 0.3s ease;
}

.horizontal-menu li:hover {
  background-color: var(--mh-hover-color) !important;
}

.horizontal-menu li.active a {
  color: var(--mh-active-item);
}

.horizontal-menu li::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: var(--mh-active-item);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s ease-out;
}

.horizontal-menu li.active::after {
  transform: scaleX(1);
}

nav.horizontal-menu a{
  text-transform: uppercase;
  font-size:0.8rem;
}

.horizontal-menu-content {
  padding: 1rem;
  padding-top: 2rem;
  border-left: 1px solid #dee2e6;
  border-right: 1px solid #dee2e6;
  border-bottom: 1px solid #dee2e6;
  border-bottom-right-radius: .25rem;
  border-bottom-left-radius: .25rem;
}


/*Menu vertical*/
:root {
  --mv-bg-color: #2e7d32;
  --mv-accent-color: #a5d6a7;
  --mv-text-color: #ecf0f1;
  --mv-hover-color: #4caf50;
  --mv-width-collapsed: 60px;
  --mv-width-minimize: 576px;
}

body {
  font-family: 'Segoe UI', sans-serif;
  margin-left: 70px;
}

.sidebar {
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: var(--mv-width-collapsed);
  background-color: var(--mv-bg-color);
  overflow-x: hidden; /* Empêche le texte de dépasser quand c'est fermé */
  transition: width 0.3s ease;
  z-index: 1000;
}

.sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu-item {
  position: relative;
  width: 100%;
}

.menu-item a {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--mv-text-color);
  height: 60px;
  transition: background 0.3s;
}

/* Style des icônes */
.menu-item i {
  min-width: var(--mv-width-collapsed);
  text-align: center;
  font-size: 20px;
}

/* --- LE TEXTE (Configuration de base pour Bureau) --- */
.nav-text {
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  white-space: nowrap;
  pointer-events: none; /* Évite les conflits de souris */
}

/* --- LOGIQUE DE SURVOL (CORRIGÉE) --- */
/* Étape 1 : On agrandit la barre dès qu'on la survole (gère aussi le divider) */
.sidebar:hover {
  width: 200px;
}

/* Étape 2 : On fait apparaître TOUS les textes dès que la barre est survolée */
.sidebar:hover .nav-text {
  opacity: 1;
  transform: translateX(0);
}

/* Au survol d'un item précis, on change juste son fond */
.menu-item:hover:not(.active) {
  background-color: rgba(255, 255, 255, 0.1);
}

/* --- ÉTAT ACTIF / SÉLECTIONNÉ --- */
.menu-item.active {
  background-color: var(--mv-hover-color);
}

.menu-item.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 4px;
  background-color: var(--mv-accent-color);
}

/* --- LE SÉPARATEUR (CORRIGÉ) --- */
.sidebar .divider {
  height: 1px;
  background-color: rgba(255, 255, 255, 0.15);
  margin: 12px 0;
  transform: scaleX(0.7);
}

/* Cache le burger par défaut (version bureau) */
.menu-toggle, .burger-icon {
  display: none;
}

/* --- VERSION MOBILE (écrans < 576px) --- */
@media (max-width: 576px) {
  body {
    margin-left: 0;
    /* On ajoute une marge en haut du body pour éviter que le menu fixed ne cache le début de ton contenu */
    padding-top: 70px; 
  }

  .sidebar {
    width: 100% !important;
    height: auto;
    /* FIXE LA BARRE EN HAUT DE L'ÉCRAN */
    position: fixed !important; 
    top: 0;
    left: 0;
    overflow-x: visible;
    /* S'assure que le menu passe par-dessus tout le reste du contenu */
    z-index: 1000; 
  }

  /* Affiche le bouton burger */
  .burger-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    width: 60px;
    color: white;
    font-size: 24px;
    cursor: pointer;
  }

  /* La liste déroulante quand on clique sur le burger */
  .sidebar ul {
    display: none;
    flex-direction: column;
    background-color: var(--mv-bg-color);
    width: 100%;
    /* Permet de scroller à l'intérieur du menu si la liste est plus longue que l'écran du téléphone */
    max-height: calc(100vh - 60px);
    overflow-y: auto; 
  }

  /* Force l'affichage du texte sur mobile */
  .sidebar .nav-text {
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto;
    margin-left: 15px;
  }

  /* LOGIQUE D'OUVERTURE : Quand la checkbox est cochée */
  .menu-toggle:checked ~ ul {
    display: block;
  }

  /* Ligne d'indication de l'item actif */
  .menu-item.active::before {
    width: 100%;
    height: 3px;
    top: auto;
    bottom: 0;
  }
  
  .sidebar .divider {
    transform: scaleX(0.9);
  }
}

/* On cache la checkbox techniquement */
.menu-toggle {
  display: none;
}

/* for code login */
#otp{
    display:flex;
    gap:12px;
    cursor:text;
    position:relative;
}

.case{
    width:58px;
    height:70px;
    border:2px solid #bbb;
    border-radius:14px;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:34px;
    font-weight:bold;
    background:white;
    transition:.15s;
    user-select:none;
}

.case.active{
    border-color:#0d6efd;
    box-shadow:0 0 0 4px rgba(13,110,253,.15);
}

#otpInput{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    opacity:0;
    border:0;
    margin:0;
    padding:0;
    font-size:1px;
    caret-color:transparent;
    color:transparent;
    background:transparent;
}

#message{
    margin-top:20px;
    text-align:center;
    color:#666;
}