/**
 * @file
 * Subtheme specific CSS.
 */
@import url('https://fonts.googleapis.com/css2?family=Libre+Franklin:ital,wght@0,100..900;1,100..900&display=swap');
@import url('../templates/header/header.css');
@import url('../templates/featuredTop/featuredTop.css');
@import url('../templates/sidebarFirst/sidebarFirst.css');
@import url('../templates/sidebarSecond/sidebarSecond.css');
@import url('../templates/footerFirst/footerFirst.css');
@import url('../templates/footerSecond/footerSecond.css');
@import url('../templates/content/content.css');
@import url('../templates/breadcrumb/breadcrumb.css');
@import url('../templates/highlighted/highlighted.css');

:root {
  /* Fonts */
  --titlefont: "Libre Franklin", sans-serif;
  --bodyfont: "Libre Franklin", sans-serif;

  /* Main Colors */
  --primary: #0D6EFD;
  --secondary: #03597F;
  --success: #198754;
  --danger: #DC3545;
  --border: #DEE2E6;
  --white: #FFFFFF;
  --black: #000000;

  /* Gray Scale */
  --gray-100: #F8F9FA;
  --gray-200: #E9ECEF;
  --gray-300: #DEE2E6;
  --gray-400: #CED4DA;
  --gray-500: #ADB5BD;
  --gray-600: #6C757D;
  --gray-700: #495057;
  --gray-800: #343A40;
  --gray-900: #212529;
}

html {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: var(--white);
  overflow-x: hidden; /* Empêche le défilement horizontal de la page */
}

html body {
  font-family: var(--bodyfont), sans-serif;
  color: var(--gray-900) !important;
  max-width: 1920px;
  background-color: var(--white);
  overflow-x: hidden; /* Empêche le défilement horizontal de la page */
}

img {
  max-width: 100%;
  height: auto;
}

/* Global styles */
.bg-white {
  background-color: var(--white) !important;
}

.sidebar .block {
  border: none;
}

.horizontal-divider {
  margin: 0;
}

.hd-top {
  margin: 0 0 1rem 0;
}

.hd-bottom {
  margin: 2rem 0 0 0;
  color: var(--bs-white);
}

.nav-link {
  color: var(--gray-900);
}

.navbar-nav .nav-link.active{
  color: var(--primary);
}

.dropdown-item > a {
  color: var(--gray-900);
  text-decoration: none;
}

.nav-link:hover,
.nav-link:focus {
  color: var(--primary);
}

.navbar-nav .nav-link.active{
  color: var(--primary);
}

/** Styles for the page without navbar & footer **/
#main {
  max-width: 100%;
  padding: 0;
}

#main > div{
  min-height: 100vh;
  display: flex;
  flex-direction: row;
  justify-content: space-bflex-start;
  margin: 0;
}

.node__content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/** Styles for the Collapsible Blocks **/
.collapsible-block .collapsible-toggle {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0;
  background-color: transparent;
}

.collapsible-block .collapsible-content {
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.collapsible-block .collapsible-content.collapsed {
  max-height: 0;
}

.collapsible-block .collapse-icon {
  transition: transform 0.3s ease;
}

.collapsed-icon {
  display: block;
}
.expended-icon {
  display: none;
}

.collapsible-block .collapsible-toggle[aria-expanded="true"] {
  .collapsed-icon {
    display: none;
  }
  .expended-icon {
    display: block;
  }
}

.collapsible-title {
  display: flex;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: normal;
}

/** Style for tables **/
.table-responsive  {
  padding: 0;
  border-radius: 8px;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  /* Retirer la largeur fixe qui peut causer des problèmes */
}

.table-responsive .table {
  margin: 0;
  border: 1px solid var(--gray-300);
  min-width: 800px;
  width: max-content;
}

.table-striped>tbody>tr:nth-of-type(odd)>* {
  --bs-table-accent-bg: var(--white);
}

.table-striped>tbody>tr:nth-of-type(even)>* {
  --bs-table-accent-bg: var(--gray-100);
}

.table th, .table td {
  border: none;
  border-bottom: 1px solid var(--gray-300);
  border-top: 1px solid var(--gray-300);
  padding: 8px;
  /* Retirer white-space: nowrap; de la règle générale */
}

/* Appliquer nowrap seulement aux colonnes qui en ont besoin */
.table th:not([headers="view-title-table-column"]),
.table td:not([headers="view-title-table-column"]) {
  white-space: nowrap;
}

/* Style spécifique pour la première colonne */
.table td[headers="view-title-table-column"] {
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 300px;
}

/** Style for view pagination **/
nav[aria-label="pagination-heading"] {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0.5rem 0 0 0;
  /* Retirer overflow-x: auto qui cause le problème */
  width: 100%;
  /* Assurer que la pagination reste dans le flux normal */
  position: relative;
  z-index: 1;
}

.pagination {
  display: flex;
  flex-wrap: wrap; /* Permettre le retour à la ligne sur mobile */
  justify-content: center;
  gap: 0.25rem;
}

.pagination .page-link {
  border: none;
  border-radius: 5rem !important;
  color: var(--gray-900);
  width: 3rem;
  height: 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  flex-shrink: 0;
}

.pagination .page-link:hover {
  background-color: var(--gray-200);
  color: var(--primary);
}

.page-item.active .page-link {
  color: var(--white);
}

/* Correction pour éviter le défilement horizontal de la page */
.view-content {
  overflow-x: visible; /* Important pour ne pas propager l'overflow */
}

/* Style responsive pour la pagination sur mobile */
@media (max-width: 767px) {
  .pagination {
    flex-wrap: wrap;
    gap: 0.125rem;
  }

  .pagination .page-link {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 0.875rem;
  }
}

/** Style for tables **/

/* Styliser la barre de défilement du tableau */
.table-responsive::-webkit-scrollbar {
  height: 8px;
}

.table-responsive::-webkit-scrollbar-track {
  background: var(--gray-100);
  border-radius: 4px;
}

.table-responsive::-webkit-scrollbar-thumb {
  background: var(--gray-400);
  border-radius: 4px;
}

.table-responsive::-webkit-scrollbar-thumb:hover {
  background: var(--gray-600);
}

/* Wrapper pour la table + scrollbar du haut */
.table-scrollbar-wrap {
  width: 100%;
}

/* Barre de scroll horizontale en haut */
.table-scrollbar-top {
  display: block;
  width: 100%;
  box-sizing: border-box;
  height: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  margin: 0 0 6px 0;
}

.table-scrollbar-inner {
  height: 1px;
}

/* Optionnel: styles WebKit identiques à ceux du bas */
.table-scrollbar-top::-webkit-scrollbar { height: 8px; }
.table-scrollbar-top::-webkit-scrollbar-track { background: var(--gray-100); border-radius: 4px; }
.table-scrollbar-top::-webkit-scrollbar-thumb { background: var(--gray-400); border-radius: 4px; }
.table-scrollbar-top::-webkit-scrollbar-thumb:hover { background: var(--gray-600); }

/** Global Style for footer **/
.site-footer {
  padding: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap : 1rem;
  background-color: var(--gray-900) !important;
}

.site-footer .block {
  margin: 0;
  border: none;
  padding: 0;
}

.footer-divider {
  margin: 0;
  padding: 0;
  width: 2px;
  flex-shrink: 0;
  background-color: var(--white);
  opacity: 1;
  z-index: 50;
  border: none;
  align-self: stretch;
  position: relative;
  height: auto; /* Permet de prendre toute la hauteur disponible */
}

/* Style for autocomplete */
.ui-autocomplete {
  background-color: var(--white);
}

.ui-autocomplete li {
  width: 100%;
}

.ui-autocomplete a {
  display: flex;
  width: 100%;
  text-decoration: none;
  color: var(--gray-900);
}

.ui-autocomplete a:hover {
  background-color: var(--primary);
  color: var(--white);
}

.search-api-autocomplete-suggestion {
  background: transparent !important;
}

/* Mobile */
@media (max-width: 767px) {
  /** Global Style for footer **/
  .site-footer {
    flex-direction: column;
    padding-bottom: 5.75rem;
  }

  .footer-divider {
    width: 100%;
    height: 2px;
  }
}