.btn {
  position: relative;
  border-radius: var(--ev-border-radius);
  padding-bottom: var(--ev-btn-px);
  padding-left: var(--ev-btn-py);
  padding-right: var(--ev-btn-py);
  padding-top: var(--ev-btn-px);
  box-shadow: none !important;
  font-weight: var(--ev-btn-fw);
  background-color: var(--ev-body-bg);
  font-size: .85rem;
  line-height: 1.4;
  display: flex;
  align-items: center;
  gap: 4px;
}

.btn:hover {
  border-color: #a2a2a2;
}

.btn:hover::before {
  --icon-color: var(--ev-primary);
}

.btn-delete:hover {
  border-color: #dc354563;
}

.dropdown-toggle::before,
.page-link::after,
.btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0);
  /* Transparent by default */
  transition: background-color 0.3s ease;
}

.dropdown-toggle:focus::before,
.page-link:focus::after,
.btn:focus::after,
.dropdown-toggle:hover::before,
.page-link:hover::after {
  background-color: rgba(255, 255, 255, 0.2);
  /* White tint on hover */
}

.btn-outline-primary {
  color: var(--ev-primary) !important;
  border-color: var(--ev-primary) !important;
}

.btn-primary {
  background-color: var(--ev-primary) !important;
  border-color: transparent !important;
  color: white !important;
  transition: filter 0.3s ease;
}


.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  filter: brightness(120%);
}

.btn-outline-primary:active,
.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: var(--ev-primary) !important;
  color: white !important;
}

.btn-upload-img,
.btn-upload-file,
.btn-add,
.btn-associate {
  display: flex;
  align-items: center;
  gap: 4px;
}

.btn-more {
  display: block;
  padding: 0.5rem;
  border: 1px solid var(--ev-border-color);
  border-radius: 5px;
}

.btn-more:hover {
  background: #50555c0a;
}

.btn-search .material-symbols-outlined {
  color: white !important;
  font-size: 20px;
}

.btn-filter {
  color: var(--ev-body-color);
}

.btn-filter::before {
  --icon-svg: url(../icons/filter.svg);
  content: "";
  display: inline-block;
  vertical-align: middle;
  background-size: contain;
  width: 20px;
  height: 20px;
  background-color: var(--icon-color, currentColor);
  -webkit-mask: var(--icon-svg) no-repeat center center;
  mask: var(--icon-svg) no-repeat center center;
  transform: scale(-1, 1);
}

.btn-filter.is-active::before {
  --icon-svg: url(../icons/close.svg);
  width: 16px;
  height: 16px;
}

.btn.disabled {
  pointer-events: none;
}

.btn-icon.btn-download-file,
.btn-icon.btn-edit,
.btn-icon.btn-disable,
.btn-icon.btn-delete {
  background: #e9e9ed;
  padding: 0;
}

.btn-delete:hover .material-symbols-outlined {
  color: var(--ev-danger-color);
}

.btn-view::before {
  --icon-svg: url(../icons/eye.svg);
  --icon-color: var(--ev-body-color);
  content: "";
  display: inline-block;
  vertical-align: middle;
  background-size: contain;
  width: 16px;
  height: 16px;
  background-color: var(--icon-color, currentColor);
  -webkit-mask: var(--icon-svg) no-repeat center center;
  mask: var(--icon-svg) no-repeat center center;
}

.btn-delete:hover::before {
  --icon-color: var(--ev-danger-color);
}

.btn-download-file:hover::before,
.btn-disable:hover::before,
.btn-edit:hover::before {
  --icon-color: var(--ev-primary);
}

.btn-group .btn {
  padding-inline: 0.75rem;
}

.btn.toggle-btn {
  padding: 0;
}

#btnGroupDrop2 {
  background: transparent;
  border: 1px solid var(--ev-border-color);
}

.btn-loading {
  position: relative;
  opacity: 0.6 !important;
  color: transparent !important;
  cursor: default;
  pointer-events: none;
  color: transparent !important;
}

.btn-loading .material-symbols-outlined {
  color: transparent !important;
}

.btn-loading:before {
  opacity: 0;
}

.btn-loading:after {
  content: "";
  display: block;
  width: 1.2em;
  height: 1.2em;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -0.6em;
  margin-top: -0.6em;
  border-width: 0.2em;
  border-style: solid;
  border-color: #fff rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.2);
  border-radius: 100rem;
  -webkit-animation: loading-spin 0.6s infinite linear;
  animation: loading-spin 0.6s infinite linear;
  box-shadow: 0 0 0 1px transparent;
  background: transparent !important;
}

.btn-icon {
  padding: 0;
  border: none;
  background-color: transparent;
}

.copy-button,
.edit-button {
  position: relative;
  cursor: pointer;
}

/* .copy-button:hover::after {
  content: "Copy value";
  position: absolute;
  top: -32px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #3d3d3d;
  color: white;
  padding: 8px;
  border-radius: 5px;
  white-space: nowrap;
  z-index: 1000;
  font-size: 12px;
} */

.btn-sm {
  font-weight: 500;
}

.btn-sm.btn-associate::before,
.btn-sm.btn-add::before {
  width: 12px;
  height: 12px;
}

.btn-secondary {
  color: #fff;
  background-color: hsl(var(--ev-primary-hsl), 40%);
  border-color: hsl(var(--ev-primary-hsl), 40%);
}

.btn-tag {
  display: inline-block;
  background: #f8f9f9;
  padding: 4px calc(4px * 2);
  border: 1px solid var(--ev-border-color);
  color: var(--ev-body-color) !important;
  border-radius: 5px;
  margin-right: 6px;
  margin-bottom: 6px;
  text-decoration: none !important;
  font-size: 12px;
}

.btn-tag:hover {
  background-color: #eeeeeedb;
}

.btn-outline-primary {
  background-color: transparent;
}

.btn--icon {
  display: flex;
  align-items: center;
  gap: 4px;
}

.btn-sm.btn--icon {
  --icon-height: 14px;
}

.btn.link-primary {
  padding: 0;
  background: transparent;
  color: var(--ev-primary);
}

.btn .icon--loop {
  --icon-width: 14px;
  --icon-height: 14px;
}

.btn.link-btn {
  padding: 0;
  background: transparent;
  color: var(--ev-body-color);
  font-weight: 500;
}

.btn.link-btn:hover {
  color: var(--ev-primary);
}

.btn .dots {
  display: inline-block;
  width: 10px;
  text-align: left;
}

.btn .dots::after {
  content: "...";
  animation: dots 1s steps(5, end) infinite 0.5s forwards;
}

@keyframes dots {

  0%,
  20% {
    content: "...";
  }

  40% {
    content: "..";
  }

  60% {
    content: ".";
  }

  80%,
  100% {
    content: "";
  }
}

#documentActionButton {
  background-color: var(--ev-primary) !important;
  color: white;
}

.btn-sm .icon {
  --icon-width: 14px;
  --icon-height: 14px;
  margin-right: 4px !important;
  vertical-align: sub;
}

.edit-button:focus {
  outline: unset;
  outline: unset;
}

.no-group {
  padding-block: 0.5rem;
}

.no-group h6 {
  margin-bottom: 0.75rem;
}

.dropdown-menu .btn {
  border-radius: 0;
}

.dropdown-menu .btn-outline-inverse:hover {
  background: var(--ev-primary);
  border-color: var(--ev-primary);
}

.btn-loading:focus,
.btn-loading:active,
.btn-loading {
  color: transparent !important;
  pointer-events: none;
}

.btn-more--bloc+.dropdown-menu hr,
.btn-more--section+.dropdown-menu hr {
  margin-top: 0.5rem;
  margin-bottom: 0.25rem;
}

.btn-more--bloc+.dropdown-menu .btn-delete::before,
.btn-more--section+.dropdown-menu .btn-delete::before {
  --icon-color: var(--ev-danger-color);
  width: 14px;
  height: 14px;
}

.btn-more--bloc+.dropdown-menu .btn-delete,
.btn-more--section+.dropdown-menu .btn-delete.delete-section {
  color: var(--ev-danger-color) !important;
  cursor: pointer;
}

.btn-more--bloc+.dropdown-menu .dropdown-item,
.btn-more--section+.dropdown-menu .dropdown-item {
  color: #444a4e;
}

#templateActionBtn,
#templatePreviewBtn {
  display: inline-flex;
  gap: 4px;
  place-items: center;
}

#templatePreviewBtn:hover {
  background: var(--ev-primary) !important;
  color: white !important;
}

#templateActionBtn .icon {
  --icon-height: 14px;
  opacity: .7;
}

.sidebar__logout-btn,
.sidebar__close-btn {
  background: transparent;
  border: none;
  cursor: pointer;
}

.link-primary.btn-associate:hover {
  filter: brightness(140%) !important;
}

.link-primary.btn-associate {
  border: none !important;
}

.btn-associate.text-success::before {
  --icon-svg: url(../icons/check.svg);
}

.btn-associate.text-success {
  color: #01946a !important;
  filter: unset !important;
}

.btn-associate.text-success:hover {
  filter: unset !important;
}

.btn-associate.text-danger::before {
  --icon-svg: url(../icons/unlink.svg);
  --icon-color: #dc3545;
}

.btn-associate.text-danger {
  color: #dc3545 !important;
  filter: unset !important;
}

.swal2-styled:focus {
  box-shadow: unset !important;
}

.btn-success.btn-associate.active,
.btn-success:not(:disabled):not(.disabled).btn-associate:active {
  color: inherit !important;
  background-color: transparent !important;
}

.btn.link-primary:hover {
  border-color: transparent;
  filter: brightness(140%) !important;
}

.btn-sm {
	font-size: 12px !important;
	padding: .5rem .75rem !important;
}

.copy-button.image-copyclipboard {
  background: transparent;
  border-radius: 5px;
  line-height: 1;
  padding: 4px;
  margin-top: 8px;
  margin-right: 8px;
}

.copy-button.image-copyclipboard .icon--copy {
  --icon-height: 12px;
}

.section_type #sectionEditTitleBtn {
  background: transparent;
  display: none;
  color: currentColor;
}

.section_type:hover #sectionEditTitleBtn {
  display: inline-block;
}

.btn-icon.copy-button .material-symbols-outlined {
  font-size: 16px !important;
  color: var(--ev-body-color) !important;
}

.field-variable .editable-label {
  margin-left: 0 !important;
}

.table-column--img .material-symbols-outlined {
  color: var(--ev-body-color);
}

.img-title {
  display: flex;
}

.img-title .updateTitle,
.img-descr .updatedesc {
  opacity: 0;
  transition: opacity .3s ease-in-out;
}

.img-title:hover .updateTitle,
.img-descr:hover .updatedesc {
  opacity: 1;
}

.image-description {
  min-width: 8px;
}

.field-editor>.d-flex {
  gap: .5rem;
}

.btn-primary .material-symbols-outlined {
  color: white;
}

.dd-item[data-type] .material-symbols-outlined {
  font-size: 16px;
  color: inherit;
}

#sectionEditTitleBtn.btn-loading {
  display: block !important;
}

.table .btn {
  color: var(--ev-body-color);
}

#sectionDeleteBtn .material-symbols-outlined {
  color: var(--ev-danger-color);
}

.field-actions .material-symbols-outlined {
  font-size: 16px;
  color: var(--ev-body-color);
}

.open-font-icons-link:hover,
.edit-button:hover {
  filter: brightness(140%) !important;
}

.btn-icon.icon-preview::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ev-body-bg);
  border-left: 1px solid var(--ev-border-color);
  z-index: -1;
  top: -12px;
  right: -12px;
  bottom: -12px;
}

.btn-icon.icon-preview {
  position: relative;
  z-index: 1;
  padding-left: 12px;
}

.field-container {
  overflow: hidden;
}

.variable-wrapper {
  width: 100%;
  position: relative;
}

.variable-wrapper .editable-label {
  word-break: break-all;
}

/* Icône « copier le placeholder » (à côté de chaque valeur de variable, dans
   .field-viewer) masquée partout : inutile à la lecture des fiches et alourdit
   l'affichage. Ne touche pas la copie d'image (.copy-button.image-copyclipboard). */
.field-viewer .copy-button {
  display: none !important;
}

/* Avancement (lecture) — jauge en anneau : la portion remplie correspond à la
   position de l'étape courante parmi les options actives (--cur / --total).
   L'anneau prend la couleur de l'option courante (--cc) ; le libellé suit. */
.avancement-ring {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.avancement-ring__gauge {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: conic-gradient(var(--cc, var(--ev-primary)) calc(var(--cur) / var(--total) * 360deg), #e6ebe9 0);
  -webkit-mask: radial-gradient(circle 11px at center, transparent 98%, #000 100%);
  mask: radial-gradient(circle 11px at center, transparent 98%, #000 100%);
}
.avancement-ring__label {
  font-weight: 700;
  font-size: 13px;
  line-height: 1.2;
  color: var(--ev-heading-color);
}

.field-variable .select2-selection__choice {
  margin-block: 4px !important;
}

.select2-option-colored,
.select2-selection--multiple .select2-selection__choice span[style],
.select2-selection--single span[style],
.variable-wrapper .label-table {
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-more.btn-more--document {
  background: transparent;
  cursor: pointer;
}

.card--form.document-overview {
  height: 100% !important;
}

.document-label-title .btn {
  display: none;
  font-size: 18px;
  padding: 0;
  border: none;
  background: transparent !important;
}

.document-label-title:hover .btn {
  display: inline-block;
}

.btn-link {
  background: transparent;
  padding: 0;
  border: none;
  color: var(--ev-primary);
}

.btn-link.edit-label {
  opacity: 0;
  transition: opacity .3s ease-in-out;
}

.btn-link.edit-label.show {
  opacity: 1;
}

.btn-more.btn-more--bloc {
  background: transparent;
  border: none;
}

.form-actions .btn-link {
  margin-right: .5rem !important;
}

.btn-more--document {
  padding: 0.5rem 0;
  border: 0;
}

.btn-more--document .material-symbols-outlined {
  font-size: 16px;
}

#documentDeleteBtn {
  display: flex;
  gap: 4px;
  place-items: center;
  font-size: 12px;
}

.btn-danger,
.btn-danger.disabled {
  color: var(--ev-danger-color) !important;
}

.btn-danger:hover {
  color: white !important;
  border-color: var(--ev-danger-color) !important;
  background: var(--ev-danger-color) !important;
}

.btn-filter-mobile-toggle {
  margin-left: auto;
}