/* Barre de navigation */
.navbar {
  color: var(--color-blanc);
  background-color: var(--color-noir);
  max-width: 100%;
  height: calc(60 / var(--base-width) * 100vw);
  border-bottom: calc(5 / var(--base-width) * 100vw) solid var(--color-jaune);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* logo à gauche, tout le reste à droite */
}

.navbar-logo {
  align-self: flex-start;
  /* colle en haut de la navbar */
  position: relative;
  z-index: 10;
  margin-left: calc(120 / var(--base-width) * 100vw);
}

.navbar-image {
  width: calc(220 / var(--base-width) * 100vw);
  height: calc(220 / var(--base-width) * 100vw);
  object-fit: contain;
}


/* Ligne contenant le groupe de 4 boutons + la déconnexion (séparés par un trait) */
.navbar-liens {
  display: flex;
  align-items: center;
  margin-right: var(--size-marge);
  font-size: var(--size-text-2);
}

/* Groupe des 4 boutons : espace entre les liens */
.navbar-groupe {
  display: flex;
  align-items: center;
  gap: calc(5 / var(--base-width) * 100vw);
  /* = 5px en responsive */
}

/* Trait vertical + espace pour le bloc Déconnexion */
.navbar-deconnexion {
  display: flex;
  align-items: center;
  border-left: calc(2 / var(--base-width) * 100vw) solid var(--color-blanc);
  padding-left: calc(5 / var(--base-width) * 100vw);
  margin-left: calc(5 / var(--base-width) * 100vw);
}

/* Boutons (communs) */
.navbar-boutons {
  display: inline-flex;
  /* pour centrer le contenu du lien */
  align-items: center;
  text-decoration: none;
  padding: calc(5 / var(--base-width) * 100vw) calc(10 / var(--base-width) * 100vw);
  border-radius: calc(5 / var(--base-width) * 100vw);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

/* Bouton inactif - texte blanc, pas de fond, pas de bordure */
.navbar-boutons.inactif {
  color: var(--color-blanc);
  background: transparent;
  border: calc(2 / var(--base-width) * 100vw) solid transparent;
}

/* Bouton inactif: hover - texte noir, fond + bordure blancs, angles 5px */
.navbar-boutons.inactif:hover {
  color: var(--color-noir);
  background-color: var(--color-blanc);
  border: calc(2 / var(--base-width) * 100vw) solid var(--color-blanc);
}

/* Bouton actif - texte blanc, pas de fond, bordure basse blanche uniquement */
.navbar-boutons.actif {
  color: var(--color-blanc);
  background: transparent;
  border: calc(2 / var(--base-width) * 100vw) solid transparent;
  border-bottom: calc(2 / var(--base-width) * 100vw) solid var(--color-blanc);
  cursor: default;
  /* optionnel: verrouille le curseur si le lien actif n’a pas de href */
  pointer-events: none;
  /* optionnel: empêche un éventuel clic si un href est présent par erreur */
}

/* Bouton Déconnexion - même style “inactif” + hover */
.navbar-deconnexion a {
  text-decoration: none;
  color: var(--color-blanc);
  padding: calc(5 / var(--base-width) * 100vw) calc(10 / var(--base-width) * 100vw);
  background: transparent;
  border: calc(2 / var(--base-width) * 100vw) solid transparent;
  border-radius: calc(5 / var(--base-width) * 100vw);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.navbar-deconnexion a:hover {
  color: var(--color-noir);
  background-color: var(--color-blanc);
  border: calc(2 / var(--base-width) * 100vw) solid var(--color-blanc);
}


/* Pied de page */
footer {
  display: flex;
  width: calc(1512 / var(--base-width) * 100vw);
  height: calc(55 / var(--base-width) * 100vw);
  color: var(--color-blanc);
  background-color: var(--color-noir);
  font-size: var(--size-text-2);
  align-items: center;
  justify-content: center;
}

/* Info_bulle */
.tooltip {
  position: relative;
  cursor: pointer;
}

.tooltip::after {
  content: attr(data-tooltip);
  position: absolute;

  color: var(--color-noirTitre);
  padding: 10px 15px;
  border-radius: 5px;

  font-size: var(--size-title-h6);
  white-space: nowrap;

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

.tooltip:hover::after {
  opacity: 1;
}


/* Titre des pages */
.contenu-titre {
  display: flex;
  justify-content: space-between;
  height: calc(160 / var(--base-width) * 100vw);
  width: calc(1032 / var(--base-width) * 100vw);
  margin-left: calc(340 / var(--base-width) * 100vw);
  align-items: center;
  gap: calc(100 / var(--base-width) * 100vw);
}

.contenu-titre h1 {
  flex: 1;
  /* prend tout l’espace dispo au centre */
  text-align: center;
  /* centre le texte dans cet espace */
  margin-left: 0;
}

/* Différentes zones de contenu */
.contenu-page {
  display: flex;
  margin-top: calc(40 / var(--base-width) * 100vw);
  margin-left: calc(120 / var(--base-width) * 100vw);
  margin-right: calc(120 / var(--base-width) * 100vw);
  margin-bottom: calc(40 / var(--base-width) * 100vw);
}

.contenu-horizontal {
  flex-direction: row;
  gap: calc(40 / var(--base-width) * 100vw);
}

.contenu-vertical {
  flex-direction: column;
}

.contenuPage-1zone {
  display: flex;
  width: var(--size-column-1P);
  border-top: solid calc(2 / var(--base-width) * 100vw) var(--color-noir);
  padding-top: calc(40 / var(--base-width) * 100vw);
}



.contenuPage-2zone {
  display: flex;
  width: var(--size-column-2P);
  border-top: solid calc(2 / var(--base-width) * 100vw) var(--color-noir);
  padding-top: calc(40 / var(--base-width) * 100vw);
}



.contenuPage-3zone {
  display: flex;
  width: var(--size-column-3P);
  border-top: solid calc(2 / var(--base-width) * 100vw) var(--color-noir);
  padding-top: calc(40 / var(--base-width) * 100vw);
}

.contenuPage-zone {
  display: flex;
  width: var(--size-column-P);
  border-top: solid calc(2 / var(--base-width) * 100vw) var(--color-noir);
  padding-top: calc(40 / var(--base-width) * 100vw);
}

.contenuPage-1zone h2,
.contenuPage-2zone h2,
.contenuPage-3zone h2 {
  margin-bottom: calc(40 / var(--base-width) * 100vw);
}


/* Champs de saisie */
.champ-saisie,
.champ-verrouille,
.champ-mixte {
  display: flex;
}

.champ-verrouille input {
  background-color: var(--color-grisOption);
}

.champ-verrouille select {
  pointer-events: none;
  background-color: var(--color-grisOption);
}

.champ-vertical {
  flex-direction: column;
  gap: calc(10 / var(--base-width) * 100vw);
}

.champ-horizontal {
  flex-direction: row;
  align-items: center;
  gap: calc(10 / var(--base-width) * 100vw);
}

.champ-100 input {
  width: 100%;
}

.champ-L200 input,
.champ-L200 select {
  width: calc(200 / var(--base-width) * 100vw);
}

.champ-L150 input,
.champ-L150 select {
  width: calc(150 / var(--base-width) * 100vw);
}

.champ-L100 input,
.champ-L100 select {
  width: calc(100 / var(--base-width) * 100vw);
}

.champ-saisie label,
.champ-verrouille label,
.champ-mixte label {
  color: var(--color-noirTitre);
  font-size: var(--size-title-h6);
  ;
}

.champ-saisie input,
.champ-saisie textarea,
.champ-saisie select,
.champ-saisie .select2-container--default .select2-selection--single,
.champ-verrouille input,
.champ-verrouille select,
.champ-mixte input,
.champ-mixte select {
  height: calc(39 / var(--base-width) * 100vw);
  color: var(--color-noirTexte);
  font-size: var(--size-text-3);
  border-style: dotted;
  border-width: calc(2 / var(--base-width) * 100vw);
  border-color: var(--color-bleuRoi);
}

.champ-left input,
.champ-left select,
.champ-left select2-container--default .select2-selection--single {
  padding-left: calc(10 / var(--base-width) * 100vw);
}

.champ-right input[type="number"] {
  text-align: right;
}

.champ-right input[type="text"],
.champ-right select {
  text-align: right;
  padding-right: calc(20 / var(--base-width) * 100vw);
}

.champ-center input[type="date"] {
  text-align: center;
}

.champ-saisie input:hover,
.champ-saisie input:focus,
.champ-saisie textarea:hover,
.champ-saisie textarea:focus,
.champ-saisie select:hover,
.champ-saisie select:focus,
.champ-saisie .select2-container--default .select2-selection--single:hover,
.champ-saisie .select2-container--default .select2-selection--single:focus,
.champ-verrouille input:hover,
.champ-verrouille input:focus,
.champ-mixte input:hover,
.champ-mixte input:focus,
.champ-mixte select:hover,
.champ-mixte select:focus {
  border-style: solid !important;
  border-width: calc(2 / var(--base-width) * 100vw) !important;
  border-color: var(--color-bleuElectic) !important;
  outline: none !important;
}

.champ-important input {
  color: var(--color-noirTitre) !important;
  background-color: var(--color-bleuCiel) !important;
  font-weight: bold !important;
}

.contenu-champ {
  display: flex;
  flex-direction: column;
  gap: calc(20 / var(--base-width) * 100vw);
}


.zone-saisie,
.zone-saisie-verrouillee {
  display: flex;
  flex: auto;
  flex-direction: column;
  gap: calc(10 / var(--base-width) * 100vw);
}

.zone-saisie-double {
  display: flex;
  flex: auto;
  flex-direction: row;
  gap: calc(20 / var(--base-width) * 100vw);
}

.zone-saisie-horizontale {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-left: 0;
  margin-right: calc(200 / var(--base-width) * 100vw);
  margin-bottom: calc(20 / var(--base-width) * 100vw);
  gap: calc(40 / var(--base-width) * 100vw);
}

.zone-calcul {
  color: var(--color-noir);
  width: calc(200 / var(--base-width) * 100vw);
  min-height: calc(39 / var(--base-width) * 100vw);
  font-size: var(--size-text-3);
  font-weight: bold;
  background-color: var(--color-bleuCiel);
  border-style: solid;
  border-width: calc(2 / var(--base-width) * 100vw);
  border-color: var(--color-bleuElectic);
}

.zone-calcul:focus {
  outline: none !important;
  border-style: solid !important;
  border-width: calc(2 / var(--base-width) * 100vw) !important;
  border-color: var(--color-bleuElectic) !important;
}

.zone-saisie label,
.zone-saisie-verrouillee label,
.zone-saisie-horizontale label {
  color: var(--color-noirTitre);
  font-size: var(--size-title-h6);
}

.zone-saisie input,
.zone-saisie-verrouillee input,
.zone-saisie-horizontale input,
.zone-saisie select,
.zone-saisie .select2-container--default .select2-selection--single,
.zone-saisie textarea {
  color: var(--color-noirTexte);
  min-height: calc(39 / var(--base-width) * 100vw);
  max-height: calc(200 / var(--base-width) * 100vw);
  font-size: var(--size-text-3);
  border-style: dotted;
  border-width: calc(2 / var(--base-width) * 100vw);
  border-color: var(--color-bleuRoi);
}

.zone-saisie input:hover,
.zone-saisie input:focus,
.zone-saisie-horizontale input:hover,
.zone-saisie-horizontale input:focus,
.zone-saisie select:hover,
.zone-saisie select:focus,
.zone-saisie .select2-container--default .select2-selection--single:hover,
.zone-saisie .select2-container--default .select2-selection--single:focus,
.zone-saisie textarea:hover,
.zone-saisie textarea:focus {
  border-style: solid !important;
  border-width: calc(2 / var(--base-width) * 100vw) !important;
  border-color: var(--color-bleuElectic) !important;
  outline: none;
}

/* Zone de saisie avec classe "uppercase", en majuscule */
.uppercase {
  text-transform: uppercase;
}

.auto-expand {
  width: 100%;
  font-family: 'Roboto', sans-serif;
  font-size: clamp(14px, 0.9vw, 18px);
  line-height: 1.5;
  resize: vertical;
  /* permet à l'utilisateur d'agrandir manuellement */
  overflow-y: hidden;
  /* scroll seulement si > 8 lignes */
  padding: 0.5em;
  box-sizing: border-box;
  border: 1px solid #ccc;
  min-height: calc(39 / var(--base-width) * 100vw);
  transition: height 0.2s ease, font-size 0.1s ease;
  /* <-- effet fluide */

  /* Optionnel : effet de focus plus esthétique */
  outline: none;
  transition: height 0.2s ease, box-shadow 0.2s ease, font-size 0.1s ease;
}

textarea.auto-expand {
  font-family: 'Roboto', sans-serif;
  font-size: var(--size-text-3);
  line-height: 1.5;
  resize: vertical;
  min-height: calc(39 / var(--base-width) * 100vw);
  /* ✅ hauteur initiale d'une ligne */
  overflow-y: hidden;
  box-sizing: border-box;
}

.case_a_cocher {
  display: flex;
  color: var(--color-noirTitre);
  height: calc(39 / var(--base-width) * 100vw);
  font-size: var(--size-title-h6);
  align-items: center;
  justify-content: left;
}

.case_a_cocher input[type="checkbox"] {
  width: calc(15 / var(--base-width) * 100vw);
  height: calc(15 / var(--base-width) * 100vw);
  margin-right: calc(10 / var(--base-width) * 100vw);
}

.zone-montant-droit input[type="checkbox"] {
  margin-bottom: 0 !important;
}

/* Si tu veux garder la taille fluide */
@media (max-width: 1200px) {
  .auto-expand {
    font-size: calc(16 / var(--base-width) * 100vw);
  }
}




/* table */


.table-entete,
.table-corps {
  width: 100%;
  border-collapse: separate;
  /* Important pour border-spacing */
  table-layout: fixed;
}

.table-entete {
  border-spacing: 0;
}

.table-entete thead th {
  height: calc(53 / var(--base-width) * 100vw);
  font-size: var(--size-title-h6);
  color: var(--color-noirTitre);
  border: 1px solid var(--color-bleuElectic);
}

.table-corps {
  border-spacing: 0 calc(10 / var(--base-width) * 100vw);
  /* espace vertical entre lignes */
}

/* Flèches de trie */
th .tri {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  margin-left: 4px;
  gap: 0;
  vertical-align: middle;
}

th .tri .fleche {
  text-decoration: none;
  line-height: 1;
}

th .fleche {
  color: var(--color-bleuCiel);
  /* couleur par défaut */
}

th .fleche:hover {
  color: var(--color-bleuButtonFonce);
  /* couleur hover */
}

th .fleche.active {
  color: var(--color-bleuButtonClair);
  /* bleu si actif */
}


/* Recherche */
.search-inline {
  display: inline-flex;
  align-items: center;
}

.search-inline input {
  border: 1px dotted var(--color-bleuRoi);
  border-radius: 3px;
  padding: 4px 6px;
  font-size: var(--size-text-4);
  color: var(--color-noirTexte);
  outline: none;
}

.search-inline input:focus {
  border: 1px solid var(--color-bleuElectic);
}

.search-inline button svg {
  color: #555;
}

.search-inline button:hover svg {
  color: #000;
}

.search-toggle {
  color: var(--color-bleuCiel);
  /* couleur par défaut */
}

.search-toggle:hover {
  color: var(--color-bleuButtonFonce);
  /* couleur hover */
}

.table-entete-contenu,
.table-corps-contenu {
  width: 100%;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.table-corps-contenu ::-webkit-scrollbar {
  width: 8px;
}

.table-corps-contenu ::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 4px;
}

.table-corps-contenu ::-webkit-scrollbar-button:vertical:start:decrement,
.table-corps-contenu ::-webkit-scrollbar-button:vertical:end:increment {
  display: block;
  height: 8px;
  background-color: #ccc;
}


/* Lignes du corps de la table */
tbody tr,
.table-corps tbody tr {
  min-height: calc(39 / var(--base-width) * 100vw);
  /* Hauteur minimale au lieu de fixe */
  font-size: var(--size-text-3);
  color: var(--color-noirTexte);
  background-color: #ffffff;
}

tbody tr:nth-child(even),
.table-corps tbody tr:nth-child(even) {
  background-color: var(--color-grisFontLigne);
  /* fond pour lignes paires */
}

tbody tr td,
.table-corps tbody tr td {
  border: 1px dotted var(--color-bleuRoi);
  /* pointillés pour les lignes du corps */
  padding-top: calc(5 / var(--base-width) * 100vw);
  padding-bottom: calc(5 / var(--base-width) * 100vw);
  padding-left: 8px;
  padding-right: 8px;
}

/* Effet hover sur les lignes */
tbody tr:hover td,
.table-corps tbody tr:hover td {
  border: 1px solid var(--color-bleuElectic) !important;
  background-color: var(--color-bleuCiel) !important;
}

/* Effet pour les lignes avec clic droit (menu contextuel) */
tbody tr.right-clicked td,
.table-corps tbody tr.right-clicked td {
  border: 1px solid var(--color-bleuElectic) !important;
  background-color: var(--color-bleuCiel) !important;
}

.table-entete th,
.table-corps td {
  box-sizing: border-box;
}


/* Zone boutons */
.bouton-contenu {
  display: flex;
  margin-top: calc(40 / var(--base-width) * 100vw);
  gap: calc(20 / var(--base-width) * 100vw) !important;
}


/* Boutons */
.bouton {
  color: white;
  width: calc(150 / var(--base-width) * 100vw);
  height: calc(50 / var(--base-width) * 100vw);
  font-size: var(--size-button-2);
  background-color: var(--color-bleuButtonClair);
  border-color: var(--color-bleuButtonClair);
  border-width: calc(2 / var(--base-width) * 100vw);
  cursor: pointer;
}

.bouton:hover {
  background-color: var(--color-bleuButtonFonce);
  border-color: var(--color-jaune);

  border-width: calc(2 / var(--base-width) * 100vw);
}

/* Styles génériques pour Select2 (Listes déroulantes personnalisées) */
/* Le champ de sélection (cadre) */
.custom-select2-selection.select2-selection--single {
  height: calc(39 / var(--base-width) * 100vw) !important;
  border-style: solid !important;
  border-width: calc(2 / var(--base-width) * 100vw) !important;
  border-color: var(--color-bleuElectic) !important;
  display: flex !important;
  align-items: center !important;
}

/* Le texte à l'intérieur du champ de sélection */
.custom-select2-selection .select2-selection__rendered {
  color: var(--color-noirTexte) !important;
  font-size: var(--size-text-3) !important;
  line-height: normal !important;
}

/* Les éléments de la liste déroulante */
.custom-select2-dropdown .select2-results__option {
  color: var(--color-noirTexte) !important;
  font-size: var(--size-text-3) !important;
}

/* Zone de saisie recherche dans le dropdown */
.custom-select2-dropdown .select2-search__field {
  height: calc(39 / var(--base-width) * 100vw) !important;
  border-style: solid !important;
  border-width: calc(2 / var(--base-width) * 100vw) !important;
  border-color: var(--color-bleuElectic) !important;
  color: var(--color-noirTexte) !important;
  font-size: var(--size-text-3) !important;
  border-radius: 0 !important;
  padding: 4px !important;
}

/* Maintien du style au focus (suppression outline par défaut) */
.custom-select2-dropdown .select2-search__field:focus {
  border-style: solid !important;
  border-width: calc(2 / var(--base-width) * 100vw) !important;
  border-color: var(--color-bleuElectic) !important;
  outline: none !important;
  box-shadow: none !important;
}

/* --- ICÔNES SELECT2 (Taille doublée) --- */

/* Ajuster le padding à droite pour ne pas que le texte passe sous les icônes */
.custom-select2-selection.select2-selection--single {
  padding-right: 4em !important;
}

/* Croix "clear" - Taille doublée */
.custom-select2-selection .select2-selection__clear {
  font-size: 2em !important;
  /* Doublé (base ~1em) */
  width: 1em !important;
  height: 1em !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: absolute !important;
  right: 1em !important;
  /* Position ajustée pour la nouvelle taille */
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: var(--color-noirTexte) !important;
  padding: 0 !important;
  margin: 0 !important;
  z-index: 5;
}

/* Conteneur Flèche */
.custom-select2-selection .select2-selection__arrow {
  position: absolute !important;
  right: 0.85em !important;
  /* Rapproché de la croix (était 0.5em) */
  top: 50% !important;
  transform: translateY(-50%) !important;
  height: auto !important;
  width: auto !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Flèche (Triangle) - Taille doublée */
.custom-select2-selection .select2-selection__arrow b {
  display: block !important;
  width: 0 !important;
  height: 0 !important;
  /* Bordures doublées : 0.15em->0.3em et 0.3em->0.6em */
  border-left: 0.3em solid transparent !important;
  border-right: 0.3em solid transparent !important;
  border-top: 0.6em solid var(--color-noirTexte) !important;
  border-bottom: 0 !important;
  /* Empêche l'apparition d'une flèche vers le haut */
  margin: 0 !important;
  top: auto !important;
  left: auto !important;
  position: relative !important;
  z-index: 50;
}

/* Force la flèche vers le bas même quand le menu est ouvert (override les styles par défaut de Select2) */
.select2-container--default.select2-container--open .custom-select2-selection .select2-selection__arrow b {
  border-top: 0.6em solid var(--color-noirTexte) !important;
  border-bottom: 0 !important;
  border-left: 0.3em solid transparent !important;
  border-right: 0.3em solid transparent !important;
  transform: none !important;
  /* Empêche toute rotation potentielle */
}

.is-hidden {
  display: none !important;
}