html,
body {
  height: 100%;
  margin: 0;
  font-family: sans-serif;
}

/* .col-2,
.col-10 {
    height: 100%;
    padding: 0;
} */

/* SIDEBAR */
.sidebar {
  background-color: #00205b;
  /*  #00205B; */
  color: #da1884;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}

.sidebar .nav-link {
  color: white;
  font-size: 1rem; /*  1.2rem; */
  padding: 5px; /*  15px; */
  padding-left: 30px;
  padding-right: 30px;
}

.sidebar .nav-link.active {
  color: #da1884;
  /* Force the color to be yellow */
}

.sidebar .nav-link:hover {
  color: #00205b;
  background-color: #da1884;
  /*  #DA1884; */
}

.sidebar .nav-item + .nav-item {
  margin-top: 1px;
}

.pagetitle {
  height: 200px;
  position: relative;
  overflow: hidden;
}

/* Image positionnée + titre */
.image-container {
  width: 100%;
  /* ou une largeur spécifique */
  height: 120px;
  /*  height: 15vh; */
  /* ou une hauteur spécifique */
  overflow: hidden;
  /* Empêche le débordement */
  position: relative;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Couvre toute la div sans déborder */
  position: absolute;
  top: 0;
  left: 0;
}

.image-container .titre {
  color: white;
  font-size: 3rem;
  font-weight: bold;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Empêche la réduction (shrink) de l'image/toolbar/caption dans la colonne flex */
.image-container,
.main-toolbar,
.header-caption {
  flex: 0 0 auto; /* équivaut à flex-grow:0; flex-shrink:0; flex-basis:auto */
}

.logo {
  display: block;
  margin: 20px auto;
  width: 40%;
}

/* scroll general ! */

.square-list li {
  list-style-type: square;
}

/* OLD version  .scrollable-zone {
    max-height: 85vh;
    overflow-y: auto;
} */

/* NEW VERSION */

main {
  display: flex;
  flex-direction: column;
  height: auto; /* plein écran */
  overflow: visible; /* empêche la scrollbar globale */
}

.scrollable-zone {
  flex: 1 1 auto; /* prend tout l’espace restant */
  min-height: 0; /* crucial pour scroll */
  overflow-y: auto; /* une seule scrollbar ici */
}

/* CARD */
.card-hover-scale {
  transition: transform 0.2s ease-in-out;
}

.card-hover-scale:hover {
  transform: scale(1.03);
}

.timer-bar {
  background-color: blue;
  color: white; /* ou red si tu veux */
  padding: 5px;
  font-weight: bold;
  width: 100%;
  position: fixed;
  left: 0;
  bottom: 0;
}

/* Page container pour assurer 100vh proprement */
.page-shell {
  min-height: 100vh;
  overflow: hidden;
}

/* Colonne droite en flex vertical (image + toolbar + contenu) */
.main-column {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

/* Barre d’outils en haut : collée pendant le scroll (optionnel) */
.main-toolbar {
  position: sticky; /* reste visible en haut de la zone principale */
  top: 0;
  z-index: 10;
  background: #f8f9fa; /* cohérent Bootstrap */
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

/* Légende sous l’image (optionnel) */
.header-caption {
  background: rgba(255, 255, 255, 0.85);
  padding: 6px 12px;
  font-size: 0.875rem;
  color: #333;
}

/* La toolbar sous le header */
.header-toolbar {
  /* bloc normal; pas de position spéciale => s’aligne dessous */
  background: #0dcaf0; /* équivalent bg-info */
  padding: 0.15rem 0.5rem;
  border-top: 3px solid rgba(0, 0, 0, 0.08);
}

.pauseIcon {
    font-size: 1.5rem;      /* plus grand */
    font-weight: bold;
}

.equal-table th,
.equal-table td {
    width: 20%;
}