body {
  background: var(--ev-body-bg);
  font-weight: 401;
  overflow: hidden;
}

.page {
  display: grid;
  grid-template-areas: "topnav" "topbar" "main";
  grid-template-columns: 1fr;
  grid-template-rows: auto auto 1fr;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

.page-wrap {
  grid-area: main;
  overflow: hidden auto;
  scroll-behavior: smooth;
}

.page .container {
  max-width: 100%;
  padding-right: 2rem;
  padding-left: 2rem;
  font-size: 0.8rem;
  line-height: 1.2;
}

.topbar {
  grid-area: topbar;
}

.sidebar {
  grid-area: sidebar;
  padding: 0;
}


.page-grid {
  --topbar-height: 94px;
  --footer-height: 54px;
  display: grid;
  grid-template-areas: "body" "footer";
  grid-template-rows: minmax(calc(100vh - var(--topbar-height) - var(--footer-height)),
      1fr) auto;
}

.page-content {
  grid-area: body;
  /* Item de grille : son minimum automatique vaut `min-content`, donc un
     contenu large (une carte, un tableau) ÉLARGIT la piste au lieu d'être
     comprimé — et toute la page déborde du viewport. Mesuré à 360 px sur
     /contact-liste : `.page-content` rendu à 397 px pour un écran de 360, ce qui
     poussait le bandeau pleine largeur 19 px hors cadre. `min-width: 0` rend la
     piste compressible ; le contenu large défile alors dans son propre cadre. */
  min-width: 0;
}

footer {
  grid-area: footer;
}

.page-heading {
  display: grid;
  gap: 4px;
}

a {
  font-weight: 600;
  color: var(--ev-heading-color);
}

a:hover {
  color: var(--ev-primary);
}

.page-heading .breadcrumb {
  padding: 0;
  background-color: transparent;
}

.page-heading * {
  margin: 0;
}

.breadcrumb-item.active {
  color: var(--ev-primary);
  font-weight: 400;
}

.breadcrumb-item.active span::first-letter {
  text-transform: uppercase;
}

/* #app_objet_index,
#app_contact_index {
  --ev-primary: green;
  --ev-primary-rgb: 0, 128, 0;
  --ev-primary-hsl: 120, 100%;
} */

.dropdown-menu {
  right: 0;
  left: unset;
  -webkit-box-shadow: 0 0 20px rgba(89, 102, 122, 0.1);
  box-shadow: 0 0 20px rgba(89, 102, 122, 0.1);
  border: none;
}

.page-body .dropdown-menu {
  margin-top: 0.75rem;
}

.dropdown-item {
  font-weight: 500;
}

.dropdown-item.active,
.dropdown-item:active {
  background-color: #d3d3d366;
}

.d-flex-app {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.d-flex-app>*:not(.btn) {
  flex-shrink: 1;
  flex-grow: 1;
}

/* #app_document_bibliotheque_index,
#app_document_index {
  --ev-primary: #2d5f8e;
  --ev-primary-rgb: 45, 95, 142;
  --ev-primary-hsl: 209, 52%;
}

#app_dossier_index {
  --ev-primary: #6f20f3;
  --ev-primary-rgb: 111, 32, 243;
  --ev-primary-hsl: 262, 90%;
} */

.label-table {
  padding: 6px 12px;
  margin-block: 0.25rem;
  font-weight: 600;
  text-transform: capitalize;
  background-color: var(--ev-body-bg);
  color: var(--ev-heading-color);
}

.label-primary {
  background-color: rgba(var(--ev-primary-rgb), 0.2);
  color: var(--ev-primary);
}

.label-success {
  background-color: rgba(0, 172, 70, 0.15);
  color: #00ac46;
}

.label-danger {
  background-color: rgba(254, 106, 73, 0.08);
  color: #fe6a49;
}

.label-info {
  background-color: rgba(0, 102, 102, 0.1);
  color: #006666;
}

.breadcrumb .icon--home {
  --icon-svg: url(icons/home-2.svg);
  --icon-width: 12px;
  --icon-height: 12px;
  transform: translatey(-1px);
}

.breadcrumb .icon--home:hover {
  background-color: var(--ev-primary);
}

.breadcrumb * {
  color: var(--ev-body-color);
  font-weight: 500;
  font-size: 12px;
}

.breadcrumb-item a {
  text-transform: capitalize;
}

/* #app_contact_show,
#app_variable_index,
#app_template_index,
#app_contact_type_index,
#app_user_index {
  --ev-primary: #2f3d4a;
  --ev-primary-rgb: 47, 61, 74;
  --ev-primary-hsl: 209, 22%;
} */

.truncate-text {
  max-width: 130px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dropdown-toggle:empty::after {
  margin: auto;
}

small.help {
  color: var(--ev-body-color);
}

.page-content {
  padding-block: 2rem;
}

.row>* {
  margin-bottom: 24px;
}

.image-popup-vertical-fit {
  width: 100px;
  aspect-ratio: 16/9;
  overflow: hidden;
  border: 1px solid #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
}

.image-popup-vertical-fit img {
  width: 100px;
  height: auto;
  max-height: 100px;
  object-fit: contain;
}

.image-popup-vertical-fit.no-img img {
  display: none;
}

.image-popup-vertical-fit.no-img::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  aspect-ratio: 1;
  border-radius: 100vmax;
  width: calc(8px * 3);
  border: 2px solid var(--ev-body-color);
}

.image-popup-vertical-fit.no-img::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: calc(8px * 3);
  height: 2px;
  background: var(--ev-body-color);
  transform: rotate(145deg);
}

.image-popup-vertical-fit {
  position: relative;
  display: grid;
  place-content: center;
  background: rgba(var(--ev-primary-rgb), 0.03);
  border: 1px solid var(--ev-border-color);
  border-radius: var(--ev-border-radius);
}

html body .text-primary {
  color: var(--ev-primary) !important;
}

.page-cta__button-group {
  display: flex;
  gap: 8px;
  flex-grow: 0 !important;
  margin-bottom: 24px;
}

.table-column.table-column--action {
  display: flex;
  place-content: end;
}

.card-header .form-actions {
  display: flex;
  gap: 8px;
  place-items: center;
}

.document-item .card-header .form-actions>* {
  margin-right: 0 !important;
}

.document-item .card-header .form-actions .btn-link {
  padding-inline: .25rem !important;
}

.card--document-variables .btn-link {
  padding: 0 !important;
}

.card--document-variables .card-header .form-actions {
  gap: 4px;
}

#dossier-documents-list .document-overview .card-body {
  position: relative;
  min-height: 380px;
}

#dossier-documents-list .document-overview .no-group {
  width: fit-content;
  margin: auto;
  opacity: 1 !important;
  margin-top: 7rem;
  text-align: center;
  display: grid;
  place-items: center;
  row-gap: 1rem;
}

#document .card,
#dossier-documents-list .card {
  height: auto;
}

#dossier-documents-list .card-body .card .card {
  background: white;
}


.dd-list.dd-dragel .ti-angle-right+.ti-angle-down,
#dossier-documents-list .ti-angle-right+.ti-angle-down {
  display: none;
}

.dd-list.dd-dragel [id*="titre_"],
.dd-list.dd-dragel [id*="titreSubSection_"],
#dossier-documents-list [id*="titre_"],
#dossier-documents-list [id*="titreSubSection_"] {
  font-weight: 600;
}

.dd-list.dd-dragel .dd3-content .btn-inverse,
#dossier-documents-list .dd3-content .btn-inverse {
  color: var(--ev-primary) !important;
  border-color: var(--ev-primary) !important;
  background-color: transparent !important;
}

.dd-list.dd-dragel .dd3-content:hover .btn-inverse,
#dossier-documents-list .dd3-content:hover .btn-inverse {
  opacity: 1 !important;
}

.dd-list.dd-dragel .dd3-content .btn-inverse:hover,
#dossier-documents-list .dd3-content .btn-inverse:hover {
  color: white !important;
  background-color: var(--ev-primary) !important;
}

.dd-list.dd-dragel .btn.document-toggle-btn,
#dossier-documents-list .btn.document-toggle-btn {
  display: none;
}

.dd-list.dd-dragel .card-header .btn-icon.copy-button,
#dossier-documents-list .card-header .btn-icon.copy-button {
  margin-right: 8px !important;
}

.p-0.btn.btn-md.convert-button.justify-content-center {
  line-height: 1;
}

.d-flex.align-item-center {
  align-items: center;
}

.img-details .icon--pencil {
  --icon-height: 14px;
  margin-left: 6px;
  opacity: 0;
  transition: all 0.5s ease-in-out;
}

.img-details:hover .icon--pencil {
  opacity: 1;
}

.img-details .edit-button:hover::after {
  top: -8px;
  left: 0;
  transform: translateX(33%);
}

.field-viewer .editable-input {
  width: 94%;
}

.field-viewer .editable-label {
  width: 100%;
}

.field-container {
  position: relative;
}

.modal--document-variable .modal-header .btn-primary {
  margin-left: auto;
}

.modal--document-variable .modal-header .close {
  margin: -1rem -1rem -1rem 0;
}

.modal--document-variable .dd-item.parent {
  margin-block: 0 1rem;
}

.modal--document-variable .dd-item .dd3-content {
  margin-block: 0 !important;
}

.modal--document-variable .modal-title {
  margin-right: 2rem;
}

.modal--document-variable .no-group {
  text-align: center;
  min-height: 30vh;
  display: grid;
  place-content: center;
  place-items: center;
}

.modal--document-variable .no-group .btn {
  width: fit-content;
}

.modal--document-variable .dd-handle:hover,
.modal--document-variable .dd3-content:hover {
  color: unset;
}

.modal--document-variable .no-variable {
  margin: 1rem;
  text-align: center;
}

.modal--document-variable .modal-body {
  min-height: 30vh;
  max-height: 82vh;
  overflow: hidden;
  overflow: auto;
}

.modal--document-variable {
  margin-block: 2rem;
}

.modal--document-variable .dd-child {
  padding: 0;
}

.modal--document-variable .dd-child:not(:last-child) {
  border-bottom: 1px solid var(--ev-border-color);
}

.modal--document-variable .item-label {
  font-weight: 600;
  color: var(--ev-heading-color);
  margin-bottom: 0 !important;
}

.modal--document-variable .dd-icon {
  padding-inline: calc(1rem - 10px) 1rem;
  margin-inline-end: 1rem;
  position: relative;
  z-index: 1;
}

.modal--document-variable .dd-icon::after {
  content: "";
  width: 1px;
  background: var(--ev-border-color);
  right: 0;
  top: -1.25rem;
  z-index: -1;
  position: absolute;
  bottom: -1.25rem;
}

.card--document-template .field-container {
  padding: 0;
  margin-top: 0.25rem;
}

#dossier-documents-list .no-group h6,
h4 {
  color: var(--ev-body-color);
}

#dossier-documents-list .card-body>.no-group p {
  line-height: 1.5;
  max-width: 50ch;
}

code.value-calculated,
.value-calculated {
  padding: 2px 8px;
  border-radius: 5px;
  margin-bottom: 2px;
  display: inline-block;
  background-color: rgba(var(--ev-primary-rgb), 0.1);
}

code.value-calculated {
  background: whitesmoke;
  color: var(--ev-body-color);
  border: 1px solid var(--ev-border-color);
}

.card-header .document-heading-label,
.item-label {
  margin-right: 0.75rem !important;
  vertical-align: middle;
}

.dd3-content.section_type {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
}

.dd3-content.section_type .item-label {
  font-size: 0.85rem;
}

.dd-list.dd-dragel .dd3-content.block_type_note,
.myadmin-dd-empty .dd-list .dd3-content.block_type_note,
.myadmin-dd-empty > .dd-item .dd3-content.block_type_note {
  background-color: #fff7e6;
  border-color: #f4deb0;
}

.dropify-wrapper .dropify-message span.file-icon p {
  font-size: 14px !important;
}

.oldImag img {
  width: auto !important;
  max-width: 100%;
  object-fit: contain;
}

.swal2-popup .swal2-icon {
  width: 3em;
  height: 3em;
  margin: 0.25em auto 0.875em;
}

.swal2-popup .swal2-icon .swal2-icon-content {
  font-size: 2.75em;
}

.swal2-popup .swal2-title {
  font-size: 1.5em;
}

.swal2-popup.swal2-modal {
  width: fit-content;
  max-width: 480px;
}

.swal2-popup .swal2-content {
  font-size: 1rem;
  line-height: 150%;
}

.swal2-popup .swal2-actions button {
  line-height: 1;
}

.swal2-popup .btn-outline-primary {
  background: revert !important;
  color: var(--ev-primary) !important;
}

.form-type-player.loading {
  pointer-events: none;
  border-radius: 5px;
  overflow: hidden;
}

.form-type-player.loading::after {
  content: "Chargement...";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  place-content: center;
  background: #f7f7f7;
  z-index: 2;
}

.dropify-wrapper {
  height: 150px;
}

b,
strong {
  font-weight: bold;
  color: var(--ev-heading-color);
}

.dd3-content.active {
  border-color: var(--ev-primary) !important;
  background: #f3f9ff !important;
}

.classBlockDescription-container {
  position: sticky;
  top: 8px;
  background: white;
  z-index: 1;
}

.bloc-cta .btn {
  padding-right: 2px;
}

.classBlockDescription p {
  margin-top: 0;
  margin-bottom: 0.25rem;
}

.bloc-cta .btn.loading {
  opacity: 0.5;
  pointer-events: none;
}

.dd3-content.block_type_image,
.dd3-content.block_type_pagebreak,
.dd3-content.block_type_note,
.dd3-content.block_type_paragraphe {
  display: grid;
  grid-template-columns: auto 1fr;
}

.dd-handle.dd3-handle {
  text-indent: unset;
}

.dd3-content.block_type_image .dd-handle::after,
.dd3-content.block_type_note .dd-handle::after,
.dd3-content.block_type_pagebreak .dd-handle::after,
.dd3-content.block_type_paragraphe .dd-handle::after {
  background: var(--ev-border-color);
}

.dd3-content.block_type_image .dd-handle.dd3-handle,
.dd3-content.block_type_note .dd-handle.dd3-handle,
.dd3-content.block_type_pagebreak .dd-handle.dd3-handle,
.dd3-content.block_type_paragraphe .dd-handle.dd3-handle {
  grid-column: 1/2;
  grid-row: 1/3;
}

.dd3-content.block_type_image .descriptionContainerBloc,
.dd3-content.block_type_note .descriptionContainerBloc,
.dd3-content.block_type_pagebreak .descriptionContainerBloc,
.dd3-content.block_type_paragraphe .descriptionContainerBloc {
  grid-column: 2/3;
  grid-row: 1/2;
}

.dd3-content.block_type_image .item-label,
.dd3-content.block_type_note .item-label,
.dd3-content.block_type_pagebreak .item-label,
.dd3-content.block_type_paragraphe .item-label {
  grid-column: 2/3;
  grid-row: 2/3;
}

.classBlockDescription-container {
  background: transparent;
}

.collapse-icon.collapsed .icon {
  transform: rotate(0deg);
  transition: transform 0.3s ease-in-out;
}

.collapse-icon .icon {
  transform: rotate(90deg);
  transition: transform 0.3s ease-in-out;
}

.btn-more.btn-more--bloc,
.btn-more.btn-more--section {
  padding: 0;
  background: transparent;
  line-height: 1;
  color: inherit;
}

.btn-more.btn-more--section::before {
  transform: rotate(90deg);
  height: 16px;
  width: 16px;
}

.btn-more.btn-more--bloc,
.btn-more.btn-more--section {
  padding: 0 8px;
  border: none;
}

.dd-item .dropdown-item {
  font-size: 0.85rem;
  padding-block: 0.25rem;
}

.dd-item .switch label {
  margin-bottom: 0;
}

.dd-item .switch {
  height: fit-content;
  margin-block: auto;
}

.dd-item .switch label .lever {
  margin: 0 4px;
}

.dd-item button[data-action="collapse"] {
  display: none;
}

.document-full-screen #document {
  position: fixed;
  inset: 0;
  background: white;
  z-index: 100;
  overflow: hidden auto;
  padding-block: 0 !important;
}

.document-item .dd-list .dd-item:not(.variable-group-item).loading {
  cursor: wait;
}

.document-item .dd-list .dd-item:not(.variable-group-item).loading * {
  pointer-events: none;
}

.dd-dragel .dd3-content {
  padding: 7px !important;
}

.dd-dragel .dd-item .dd-handle {
  background: transparent !important;
  border: unset !important;
}

.dd-dragel .dd-handle {
  box-shadow: unset !important;
}

.dd-list.dd-dragel .dd3-content.block_type_image,
.dd-list.dd-dragel .dd3-content.block_type_note,
.dd-list.dd-dragel .dd3-content.block_type_pagebreak,
.dd-list.dd-dragel .dd3-content.block_type_paragraphe {
  height: fit-content !important;
}

.image-copyclipboard {
  position: absolute;
  top: 0.5rem;
  right: 0.75rem;
}

.collapse-icon {
  margin-right: 4px;
}

a.value-calculated.editor {
  color: var(--ev-primary);
}

.img-info {
  font-weight: 400;
  margin-bottom: 0.25rem;
  font-size: 0.8rem;
}

#imageTable .table-column {
  color: var(--ev-primary) !important;
  font-weight: 600 !important;
}

.date-formatted-text {
  font-weight: 400;
}

.copy-buttons {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.image-popup-vertical-fit {
  width: 150px;
}

.image-popup-vertical-fit img {
  width: 150px;
}

[id^="photo-"] {
  margin-bottom: 0.5rem;
}

.title-editing .editable-title {
  background: transparent;
  border: 1px solid rgba(0, 0, 0, .2);
  border-radius: 5px;
}

.editable-title {
  display: inline-block;
  padding: 0.15rem 0.25rem;
}

.title-editing #sectionSaveTitleBtn,
.title-editing #sectionCancelTitleBtn {
  opacity: 1;
}

.dd3-content {
  background-color: transparent;
  padding: 8px;
  border-radius: 7px;
}

.dd3-content.section_type {
  background-color: var(--ev-section-bg);
  color: var(--ev-section-color);
}

.dd-handle.dd3-handle {
  display: grid;
  margin: -9px 14px -9px -9px;
  vertical-align: middle;
  place-content: center;
  border-radius: 7px 0 0 7px;
  background: transparent !important;
  cursor: grab;
  color: var(--ev-body-color);
  opacity: 0.45;
  transition: opacity 0.15s ease, background-color 0.15s ease;
}

/* Surface the handle when the user hovers the row it belongs to */
.dd3-content:hover > .dd-handle.dd3-handle,
.dd-item:hover > .dd3-content > .dd-handle.dd3-handle {
  opacity: 1;
}

.dd-handle.dd3-handle:hover {
  background: rgba(var(--ev-primary-rgb), 0.12) !important;
  color: var(--ev-primary);
}

.dd-handle.dd3-handle:active {
  cursor: grabbing;
}

.myadmin-dd-empty.nested-sortable {
  margin-left: 0;
  padding: 0;
}

.to-move .dd3-content .dd-handle.dd3-handle,
.dd3-content.active .dd-handle.dd3-handle,
.to-move .dd3-content {
  border-color: var(--ev-primary);
}

/* Placeholder (ghost element) — the gap shown where the item will drop.
   Keeps the dragged item's natural height so the list doesn't jump. */
.document-item .dd-item.sortable-ghost {
  position: relative;
  border: 2px dashed var(--ev-primary) !important;
  background-color: rgba(var(--ev-primary-rgb), 0.08) !important;
  border-radius: 7px;
  z-index: 1000;
  overflow: hidden;
}

/* Hide the inner content of the placeholder but preserve its box height */
.document-item .dd-item.sortable-ghost > * {
  visibility: hidden;
}

/* The item being picked up (still in the list, under the cursor clone) */
.document-item .dd-item.sortable-chosen {
  z-index: 1001;
}

/* The floating clone that follows the cursor (forceFallback appends it to
   <body>, so this can't be scoped under .document-item — exclude the variable
   group items which use a different, in-place drag). */
.dd-item.sortable-drag:not(.variable-group-item) {
  opacity: 0.95 !important;
  border-radius: 7px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  cursor: grabbing;
}

.dd-item.sortable-drag:not(.variable-group-item) > .dd3-content {
  background: #fff;
}

.dd3-content.loading {
  cursor: wait;
  opacity: 0.5;
}

.dd3-content.loading * {
  pointer-events: none;
}

.nested-sortable img {
  display: block;
  object-fit: cover;
  width: 100%;
  height: auto;
  max-width: 100%;
}

.image-container {
  display: grid;
}

.image-container--left {
  place-items: start;
}

.image-container--center {
  place-items: center;
}

.image-container--right {
  place-items: end;
}

.dropdown-header {
  padding-inline: 1rem;
  margin-bottom: 0;
}

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

.dropdown-item .icon {
  --icon-height: 14px;
}

.select2-container .select2-selection--single .select2-selection__rendered {
  white-space: normal;
}

.select2-container--default .selection {
  height: 100%;
  display: block;
}

.select2-container--default .select2-selection--single {
  height: 100%;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 170%;
  padding: .375rem .75rem;
}

.classBlockDescription * {
  white-space: normal;
}

code.value-calculated,
.value-calculated {
  margin-right: 4px;
}

.loading.nested-sortable.myadmin-dd-empty {
  position: relative;
  /* for absolute spinner positioning */
  opacity: 0.5;
  transition: opacity 0.2s ease-in-out;
  pointer-events: none;
  /* Keep at least enough room for the spinner without collapsing tall lists */
  min-height: 80px;
}

/* Add a centered spinner overlay */
.loading.nested-sortable.myadmin-dd-empty::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 32px;
  height: 32px;
  margin: -16px 0 0 -16px;
  /* perfectly center it */
  border: 3px solid rgba(0, 0, 0, 0.2);
  border-top-color: var(--ev-primary);
  /* spinner color (blue) */
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  z-index: 10;
}

/* Optional: darker overlay background */
.loading.nested-sortable.myadmin-dd-empty::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: 4px;
}

/* Keyframes for spinner rotation */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.form-group .field-container {
  /* border: 1px solid var(--ev-border-color); */
}

.card-wrap .card-header::before {
  content: "";
  inset: -16px -16px 0 -16px;
  position: absolute;
}

.card-wrap .card.card--form.parent-element {
  overflow: hidden;
}

li.dd-item.loading {
  opacity: 0.5;
}

.section-title-wrapper {
  font-weight: 600;
}

.section-title-wrapper .editable-label {
  margin-bottom: 0;
}

.field-container[data-variable-type="calcule"] * {
  color: gray;
}

.fade:not(.show) {
  pointer-events: none;
}

.pdf-loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.9);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pdf-loading .paper {
  position: relative;
  background: #f1f1f1;
  height: 40px;
  width: 35px;
  display: block;
  padding-top: 10px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}

.pdf-loading .paper:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  border-width: 0 10px 10px 0;
  border-style: solid;
  border-color: #a4a6a7 #fff;
}

.pdf-loading .line {
  background: #e2e2e2;
  width: 80%;
  height: 5px;
  display: block;
  margin: 3px auto !important;
  position: relative;
  overflow: hidden;
}

.pdf-loading .line:after {
  content: "";
  background: #2c3033;
  width: 0;
  height: 5px;
  position: absolute;
  top: 0;
  left: 0;
}

.pdf-loading .paper .arrow {
  -webkit-animation: download 1s linear infinite;
  animation: download 1s linear infinite;
}

.pdf-loading .arrow {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto !important;
  z-index: 5;
  top: 10px;
  width: 15px;
  height: 10px;
  background: var(--ev-primary);
  display: inline-block;
}

.pdf-loading .arrow:after {
  content: "";
  position: absolute;
  left: -8px;
  top: 100%;
  border: 15px solid transparent;
  border-top-color: var(--ev-primary);
}

@-webkit-keyframes download {
  0% {
    transform: translateY(-20px);
  }

  100% {
    transform: translateY(20px);
    opacity: 0;
  }
}

@keyframes download {
  0% {
    transform: translateY(-20px);
  }

  100% {
    transform: translateY(20px);
    opacity: 0;
  }
}

.spinner-border.text-primary {
  font-size: 16px;
}

.pdf-loading-content {
  display: grid;
  gap: 1.5rem;
  place-content: center;
  place-items: center;
}

.tooltip * {
  font-size: 10px;
}

/* Modale variable : même grande taille pour TOUS les types (80vw × 80vh).
   Le layout interne (1 ou 3 colonnes pour le calculé) est géré dans page/variable.css. */
#variableModal .modal-dialog {
  max-width: 80vw !important;
}
#variableModal .modal-content {
  height: 80vh;
}

@media (max-width: 991px) {
  #variableModal .modal-dialog {
    max-width: 95vw !important;
    margin: 0.5rem auto;
  }
  #variableModal .modal-content {
    height: auto;
  }
}

#documentModele {
  border: 1px solid var(--ev-border-color);
}

@media (width < 992px) {

  .tab-content #images .img-wrapper,
  .tab-content #image .img-wrapper {
    flex-wrap: wrap;
  }

  .tab-content #image .el-card-avatar.el-overlay-1,
  .tab-content #images .el-card-avatar.el-overlay-1 {
    width: 100%;
  }

  .tab-content #image .image-popup-vertical-fit,
  .tab-content #images .image-popup-vertical-fit {
    width: 100%;
  }

  .page .container {
    padding-right: 1rem;
    padding-left: 1rem;
  }

  #document .card-header,
  #dossier-documents-list .card-header {
    flex-wrap: wrap;
    row-gap: 1rem;
  }

  #document .form-actions,
  #dossier-documents-list .form-actions {
    flex-wrap: wrap;
  }

  #document .form-actions,
  #dossier-documents-list .form-actions {
    flex-wrap: wrap;
  }

  #vueDossier .card--form .card-header {
    flex-wrap: wrap;
    row-gap: .5rem;
  }

  .page {
    grid-template-areas: "topnav" "topbar" "main";
    grid-template-columns: 1fr;
  }

  .variable-group-cards>* {
    flex: 0 0 100%;
  }
}

.img-wrapper .image-popup-vertical-fit img {
  width: 100%;
}

.img-wrapper .image-popup-vertical-fit img {
  max-height: 100%;
}

label.is-invalid {
  color: var(--danger);
  margin-top: .25rem;
  font-size: 12px;
}

.card--entity-general {
  margin-bottom: 0;
}

.card--entity .card-tsubhead {
  background: var(--ev-tabs-bg);
  padding: .5rem 1rem;
  color: var(--ev-tabs-color);
}

[data-theme="navy"] .card--entity .card-tsubhead {
  color: var(--ev-secondary);
  background: var(--ev-secondary-light);
  border-bottom: 1px solid var(--ev-border-color);
  font-weight: bold;
}

.card--entity-general .card-body {
  height: fit-content;
}

.card--entity-general .col-md-4 {
  padding-left: 0;
}

.card--entity .card-tsubhead {
  font-size: 12px;
}

.card--entity .material-symbols-outlined {
  font-size: inherit;
}

.dd-item {
  padding-left: 0 !important;
}

/* Indent blocs only when nested inside a section */
.dd3-item .dd-list .dd-item {
  padding-left: 2rem !important;
}

.dd-item.nested-1 {
  padding-left: 0 !important;
  margin-bottom: 1rem;
}

.bloc-cta {
  display: flex;
}

.bloc-cta .switch label .lever::after {
  width: calc(4px * 3);
  height: calc(4px * 3);
  border-radius: calc(4px * 3);
}

.bloc-cta .switch label .lever {
  height: calc(2px * 9);
}

.bloc-cta .switch label input[type="checkbox"]:checked+.lever::after {
  left: calc(4px * 5);
}

.dd-handle {
  position: relative;
  z-index: 10;
}

.dd-handle * {
  pointer-events: none;
}

/* Only show empty drop zone on the root container, not on every empty child */
.nested-sortable.myadmin-dd-empty:empty {
  min-height: 0;
  margin-top: 0;
  border: none;
  border-radius: 6px;
  background-color: rgba(0, 0, 0, 0.03);
}


.dd-list--group-variable .dd-item {
  padding-left: 0 !important;
}

/* bootstrap.min.css | https://127.0.0.1:8000/assets/plugins/bootstrap/css/bootstrap.min.css */

.col,
.col-1,
.col-10,
.col-11,
.col-12,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-auto,
.col-lg,
.col-lg-1,
.col-lg-10,
.col-lg-11,
.col-lg-12,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-auto,
.col-md,
.col-md-1,
.col-md-10,
.col-md-11,
.col-md-12,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-auto,
.col-sm,
.col-sm-1,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-auto,
.col-xl,
.col-xl-1,
.col-xl-10,
.col-xl-11,
.col-xl-12,
.col-xl-2,
.col-xl-3,
.col-xl-4,
.col-xl-5,
.col-xl-6,
.col-xl-7,
.col-xl-8,
.col-xl-9,
.col-xl-auto {
  padding-right: 11px;
  padding-left: 11px;
}

#objetModal .select2-container {
  width: 100% !important;
}

#objets-types-tabs .nav-tabs {
  margin-top: 0;
}

#objets-types-tabs .btn-group {
  flex-wrap: wrap;
  row-gap: .5rem;
}


#objets-types-tabs .nav-tabs--cards {
  background: transparent !important;
  border: none;
  padding: 0;
  margin-bottom: 16px;
  margin-left: 4px;
}

.editable-label {
  line-height: 1.4;
}

.select2-container {
  font-size: 12px !important;
}

/* #app_contact_index,
#app_objet_index {
  --ev-primary: #00448c;
  --ev-primary-rgb: 0, 68, 140;
  --ev-primary-hsl: 211, 100%, 27%;
} */

.value-calculated:empty::before {
  content: "-";
}

.swal2-styled.swal2-cancel {
  color: #595959 !important;
}

.el--enter {
  opacity: 0;
  transform: scale(0.65) translateY(-10px);
  transition: all .25s ease;
}

.el--enter.el--enter-active {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.el--exit {
  opacity: 0;
  transform: scale(0.65) translateY(10px);
  transition: all .25s ease;
}

.col,
.col-1,
.col-10,
.col-11,
.col-12,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-auto,
.col-lg,
.col-lg-1,
.col-lg-10,
.col-lg-11,
.col-lg-12,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-auto,
.col-md,
.col-md-1,
.col-md-10,
.col-md-11,
.col-md-12,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-auto,
.col-sm,
.col-sm-1,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-auto,
.col-xl,
.col-xl-1,
.col-xl-10,
.col-xl-11,
.col-xl-12,
.col-xl-2,
.col-xl-3,
.col-xl-4,
.col-xl-5,
.col-xl-6,
.col-xl-7,
.col-xl-8,
.col-xl-9,
.col-xl-auto {
  padding-right: 8px !important;
  padding-left: 8px !important;
}

code.value-calculated,
.value-calculated {
  font-size: 12.5px;
}

.page-title {
  font-size: 20px;
}

.section-title-wrapper .btn {
  padding: 0;
  border: none;
}

.section-title-wrapper .btn:hover {
  background: transparent;
  color: inherit;
  filter: brightness(0.8);
}


#dossier-documents-list .dd3-content .section-title-wrapper .btn-inverse:hover {
  color: inherit !important;
  background-color: transparent !important;
  filter: brightness(0.8);
}

.dd-item__content {
  display: flex;
}

.section-title-wrapper {
  display: flex;
  gap: .5rem;
}


.card-header .document-heading-label,
.item-label {
  margin-right: 0.25rem !important;
}

.dd-empty,
.dd-item,
.dd-placeholder {
  line-height: 100%;
}

.dd-item__content {
  place-items: center;
}

.section-title-wrapper {
  place-items: center;
}

.row {
  margin-right: -8px;
  margin-left: -8px;
}

.card-header~.card-body {
  margin-top: 8px;
}

.swal2-styled.swal2-cancel {
  background-color: var(--ev-body-bg) !important;
}


.card {
  margin-bottom: 0;
}

.row>* {
  margin-bottom: 14px;
}

.card--document-template.parent-element {
  margin-top: 16px;
}

.field-viewer .editable-label {
  margin-bottom: 0;
}

.document-item {
  margin-bottom: 0px !important;
}

.section_type .card-header .document-heading-label {
  margin-right: 0 !important;
}

.section_type .title-cta {
  display: flex;
}

/* .section_type .section-title-wrapper {
  flex-wrap: wrap;
} */

.card-wrap.loading {
  opacity: 0.6;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.title-editing .editable-title {
  word-break: break-all;
}

.swal2-loader {
  width: 2em !important;
  height: 2em !important;
  border-radius: 50% !important;
  border-width: .2em !important;
  border-color: var(--ev-danger-color) transparent var(--ev-danger-color) transparent !important;
}

.swal-primary-loader {
  border-color: var(--ev-primary) transparent var(--ev-primary) transparent !important;
  margin-bottom: 1rem !important;
}

.swal2-validation-message {
  margin-top: 1rem !important;
}

.copied-text {
  word-break: break-all;
  margin-top: 4px;
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  font-style: italic;
  background-color: #eeeeee;
  border-radius: 4px;
  padding: 2px 4px;
}

.copied-text .value-calculated {
  display: inline-block;
  font-size: inherit;
  font-weight: inherit;
  font-style: inherit;
  background-color: inherit;
  border-radius: 0;
  padding: 0;
}

.document-item .btn:hover {
  border-color: transparent;
}

.material-symbols-outlined {
  /* !important so the icon ligature font is never overridden by an injected
     document Style / print base (e.g. `body * { font-family: inherit }`) inside
     the @scope'd editor canvas — otherwise icons render as plain text. */
  font-family: 'Material Symbols Outlined' !important;
  vertical-align: middle;
  font-size: inherit;
  color: inherit;
  font-variation-settings:
    'FILL' 0,
    'wght' 300,
    'GRAD' 0,
    'opsz' 48;
}

time .material-symbols-outlined {
  font-size: 14px !important;
}

#dropdownMenuLink {
  padding: .5rem 0.25rem;
}

.dd-list--group-variable .variable-type .material-symbols-outlined,
#dropdownMenuLink .material-symbols-outlined {
  font-size: 16px !important;
}

.dropdown-menu .dropdown-divider {
  margin-top: .5rem !important;
}

.form-actions .dropdown-item {
  font-size: 14px;
}

/* Corps défilant : la hauteur vient de .modal-content (80vh), le body (flex:1) la remplit. */
#variableModal .modal-body {
  overflow: hidden auto;
}

.small,
small {
  font-size: 12px;
}

.modal.loading .modal-body::before {
  content: "";
  position: absolute;
  inset: 0;
  background: white;
  z-index: 9998;
}

.modal.loading .modal-body::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  /* perfectly center */
  border: 4px solid #e3e6f0;
  border-top-color: var(--ev-primary);
  /* primary color */
  border-radius: 50%;
  animation: modal-spinner 0.8s linear infinite;
  z-index: 9999;
}

/* Spinner animation */
@keyframes modal-spinner {
  to {
    transform: rotate(360deg);
  }
}

#variablesGroupForm .select2-selection__choice {
  padding: 4px 8px !important;
  background: var(--ev-primary) !important;
  color: white !important;
  margin-block: 4px !important;
  margin-right: 4px !important;
}

#variablesGroupForm .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  margin-right: 0;
}

li.dd-item {
  display: flex;
  place-items: start;
  margin-block: 16px;
  gap: .5rem;
}

.dd-item.subsection-child {
  margin-block: 16px;
}

.dd-list.dd-dragel .dd-item>button,
.dd-list.dd-dragel .dd3-content,
.document-overview .dd-item>button,
.document-overview .dd3-content,
#dossier-documents-list .dd-item>button,
#dossier-documents-list .dd3-content {
  width: 100%;
}

.dd3-content.block_type_image {
  position: relative;
}

.section-cta {
  display: flex;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.section_type:hover .section-cta {
  opacity: 1;
  pointer-events: all;
}

.bloc-cta {
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  position: absolute;
  top: 1px;
  right: 1px;
  padding: .75rem.5rem;
  background: inherit;
  border-radius: 7px;
}

li.dd-item:hover .bloc-cta,
div.dd-item.root-bloc-item:hover .bloc-cta {
  opacity: 1;
  pointer-events: all;
}


[data-type="subsection"]:first-child,
.dd-list>[data-type="section"]:not(:first-child) {
  margin-top: 16px;
}

.section_type.disabled {
  opacity: .7;
}

.card--document-template,
.card--document-variables {
  background: var(--ev-section-bg);
  padding: 1rem;
  border-radius: 9px;
  border: 1px solid var(--ev-border-color);
  margin-bottom: 1rem;
}

.card--document-template h5,
.card--document-variables h5 {
  color: var(--ev-section-color);
}

/* .card.card--form.collapsed .card-body {
  max-height: 0px;
  overflow: hidden;
  margin-top: -1.5rem;
}

.card-body {
  max-height: 1000px;
  transition: max-height 1s;
} */

.document-label-title>.collapse-icon {
  font-size: 18px;
}

.collapse-icon {
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.collapse-icon .material-symbols-outlined {
  transform: rotate(0deg);
  transition: transform 0.3s ease-in-out;
}

.collapse-icon.collapsed .material-symbols-outlined {
  transform: rotate(-90deg);
}

.card.card--form {
  padding-bottom: 0;
}

.card-header {
  margin-bottom: 0;
  margin-bottom: -1px;
}

.card-header~.card-body {
  margin-block: 17px;
}

/* ── Bulk edit — field state ── */
[data-bulk-edit="true"] .field-variable.is-editable:not([data-variable-type="calcule"]) .field-viewer,
.field-variable.is-editing .field-viewer {
  display: none;
}

[data-bulk-edit="true"] .field-variable.is-editable:not([data-variable-type="calcule"]) .field-editor,
.field-variable.is-editing .field-editor {
  display: flex;
  place-items: auto;
}

[data-bulk-edit="true"] .field-variable.is-editable:not([data-variable-type="calcule"]):not(.is-editing) .edit-buttons {
  display: none;
}

/* ── Liaisons : affordances d'ÉDITION (masquées en lecture, révélées en mode édition) ──
   Le bouton « Ajouter » inline d'un champ liaison et la croix « Retirer » d'une carte ne
   doivent apparaître qu'en mode édition (LiveEdit = [data-bulk-edit="true"]). */
.liaison-add-inline,
.liaison-link__remove {
  display: none;
}

[data-bulk-edit="true"] .liaison-add-inline {
  display: inline-flex;
  align-items: center;
}

.liaison-link-wrap {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

[data-bulk-edit="true"] .liaison-link__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ev-danger-color, #d33);
  cursor: pointer;
  line-height: 1;
}

.liaison-link__remove .material-symbols-outlined {
  font-size: 16px;
}

/* ── Bulk edit — topnav buttons ── */
.topnav__item--actions {
  display: flex;
  align-items: center;
}

.tab-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.bulk-btn-group {
  display: flex;
  gap: 8px;
}

.tab-actions .bulk-btn-group {
  display: none;
}

.tab-actions.is-editing #bulkEditBtn {
  display: none;
}

.tab-actions.is-editing .bulk-btn-group {
  display: flex;
}

.document-label-title>:not(.btn) {
  display: inline !important;
}

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

@media (width < 600px) {
  .page-title {
    font-size: 16px;
    line-height: 1.4;
  }

  .card-header,
  .card-header .form-actions {
    flex-wrap: wrap;
  }

  .card-header {
    row-gap: .75rem;
  }

  #app_document_show .dd-item,
  #app_dossier_show .dd-item {
    padding-left: .5rem !important;
  }
}

.label.label-table {
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

/* Valeurs radio/select dans les fiches (objet/contact/société/utilisateur) :
   tag plat calé sur le style des segments « avancement » — sans ombre. */
.fieldset-group__value .label.label-table {
  box-shadow: none;
  border-radius: 4px;
  padding: 4px 14px 5px;
  margin-block: 0;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  text-transform: none;
}

/* Options à valeur numérique (fiches) : libellé à gauche, « valeur unité » à droite.
   Une ligne par option ; les multi-sélections s'empilent verticalement. */
.opt-num-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.opt-num-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.opt-num-row .label.label-table {
  margin: 0;
}
.opt-num-value {
  font-weight: 700;
  font-size: 12px;
  color: var(--ev-heading-color, #1f2733);
  white-space: nowrap;
  text-align: right;
}

#date-preview {
  display: block;
}

.modal label {
  margin-bottom: .5rem;
}

.input-group-text {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  margin-left: -1px;
}

#app_variable_index .tab-content {
  margin-top: 0;
}

@media (width > 992px) {
  .col--contact>* {
    height: 50%;
  }
}

.qrcode-container {
  padding: 8px;
  width: 100%;
  overflow: hidden;
}

.copy-buttons .btn-tag {
  background: transparent;
}

.form-actions {
  display: flex;
}

.dd-list.dd-dragel .dd-item>button,
.dd-list.dd-dragel .dd3-content,
.document-overview .dd-item>button,
.document-overview .dd3-content,
#dossier-documents-list .dd-item>button,
#dossier-documents-list .dd3-content {
  min-height: 48px;
}

.no-shadow {
  box-shadow: unset !important;
  background: unset !important;
}

/* Hide if it has no actual content */
.avancement-indicator-wrapper:not(:has(*)) {
  display: none !important;
}

.card--entity .card-thead-title {
  font-size: 12px;
}

.card--entity .card-thead-item {
  font-size: 11px;
  font-weight: 600;
}

[id^="app_variable_"] [data-group-id] .dd-header .drag-handle-col {
  display: none;
}


/* Drag handles */
.group-drag-handle,
.variable-drag-handle {
  cursor: grab;
  color: #999;
  user-select: none;
}

.group-drag-handle:hover,
.variable-drag-handle:hover {
  color: #333;
}

.group-drag-handle:active,
.variable-drag-handle:active {
  cursor: grabbing;
}

.drag-handle-col {
  display: flex;
  align-items: center;
}

/* Sortable ghost classes (variable groups only — scoped so they don't
   override the section drag styling above) */
.dd-list--group-variable .sortable-ghost,
.dd-column .sortable-ghost {
  opacity: 0.4;
  background: #f8f9fa;
}

.dd-list--group-variable .sortable-drag,
.dd-column .sortable-drag {
  opacity: 0.8;
}

/* Make sure groups container is sortable */
.dd-list--group-variable {
  min-height: 50px;
}

/* Hide drag handle for document groups */
.dd-list--document .group-drag-handle,
.dd-list--document .drag-handle-col {
  display: none !important;
}


#variableGroupAssociatedModal .modal-dialog {
  max-width: 1200px;
}

.dd-header {
  gap: 1rem;
}

.dd-header>.group-label {
  flex: 0 0 auto;
  flex-grow: 1;
}

.dd-list--group-variable:not(.dd-column)>.dd-item .group-label {
  flex: 1 1 0;
  min-width: 0;
}

.variable-actions,
.variable-group-actions,
.variable-drag-handle,
.drag-handle-col {
  flex: 0 0 auto !important;
}

.dd-list--group-variable .item-label {
  flex-grow: 0;
}

.dd-list--group-variable .item-label mark {
  background-color: #fff3cd;
  padding: 2px 4px;
  border-radius: 3px;
  margin-right: -.25rem;
}

.variable-drag-handle {
  position: relative;
}

.variable-drag-handle::after {
  content: "";
  position: absolute;
  width: 1px;
  background: var(--ev-border-color);
  top: -14px;
  bottom: -14px;
  right: 0;
}

.variable-drag-handle {
  padding-right: 6px;
  margin-right: 2px !important;
  margin-left: -8px !important;
}

/* Three-column layout for groups */
.dd-columns-container {
  min-height: 100px;
}

.dd-column {
  min-height: 80px;
  border: 2px dashed #dee2e6;
  border-radius: 8px;
  padding: 8px;
  transition: border-color 0.2s, background-color 0.2s;
  position: relative;
}

.dd-column:not(:has(.dd-item))::after {
  content: "Glisser un groupe ici";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #adb5bd;
  font-size: 13px;
  pointer-events: none;
  white-space: nowrap;
}

.dd-column:has(.dd-item) {
  border-color: transparent;
}

.dd-column.sortable-ghost-parent {
  border-color: #4a90d9;
  background-color: #e8f0fe;
}

.dd-column-header {
  font-weight: 600;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.5px;
}

.group-type-tags {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
}

.group-tag-item {
  flex-shrink: 0;
  white-space: nowrap;
}

/* Hide tags until JS calculates overflow */
.group-type-tags:not(.tags-ready) .group-tag-item:not(:first-child) {
  display: none;
}

.group-type-tags:not(.tags-ready) .group-tags-more {
  visibility: hidden;
}

.group-tags-more {
  flex-shrink: 0;
  display: inline;
  cursor: pointer;
  color: rgba(var(--ev-primary-rgb, 74, 144, 217), .8);
  font-size: 11px;
  white-space: nowrap;
  position: relative;
  font-weight: 500;
  vertical-align: middle;
}

.group-tags-more:hover {
  text-decoration: underline;
}

.group-tags-popover {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 1050;
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  padding: 8px 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .1);
  white-space: nowrap;
}

.group-tags-popover.show {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}


.column-contact--wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.column-contact--wrap>* {
  flex: 1;
}

.card-parent-objet-label,
.principle-contact {
  display: inline-block;
  padding: 4px 6px;
  border-radius: 4px;
  transform: translateY(-8px);
}

a.card-parent-objet-label:hover,
a.principle-contact:hover {
  box-shadow: inset 0 0 0 9999px rgba(255, 255, 255, 0.15);
}

.card--entity .card-tfooter {
  margin-top: 1rem !important;
  padding-top: 0 ! important;
}

.card-parent-objet-label,
.principle-contact--primary {
  background: var(--ev-primary);
  color: white !important;
}

.principle-contact--secondary {
  background: var(--ev-secondary);
  color: white !important;
}

.principle-contact--primary:hover {
  background: color-mix(in srgb, var(--ev-primary) 85%, white);
}

.principle-contact--secondary:hover {
  background: color-mix(in srgb, var(--ev-secondary) 85%, white);
}

.card--contact .card-body {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "thead    thead_actions" "tsubhead thead_actions" "tbody    thead_actions" "tfooter tfooter";
  grid-template-rows: auto auto 1fr auto;
}

.card--contact .card-thead {
  grid-area: thead;
}

.card--contact .card-tbody {
  grid-area: tbody;
}

.card--contact .card-tfooter {
  grid-area: tfooter;
  margin: .5rem;
  width: auto;
}

.card--contact .btn-icon {
  padding-block: 12px;
  border-bottom: 1px solid white;
}

.card--contact .card-thead-actions {
  grid-area: thead_actions;
  flex-direction: column;
}

.card--contact .card-tsubhead {
  grid-area: tsubhead;
}

.card--objet .card-tbody-tbody {
  display: flex;
}

.card--objet .tbody-actions {
  display: flex;
  gap: 4px;
  margin-right: 8px;
}

.card--objet .tbody-actions>* {
  padding: 8px 10px;
  font-size: 14px;
}

.card--objet .card-thead-item {
  font-size: 13px;
  font-weight: 600;
}

.card--objet .tbody-thead-items {
  display: flex;
  flex-direction: column;
}

.card--objet .data-card-container {
  height: auto;
}

.card-parent-objet {
  margin-top: 8px;
  padding: 8px;
  border-radius: 6px;
  padding-top: 0;
  background: var(--ev-primary-light);
  border: 1px solid var(--ev-primary-border-color);
}

.card-parent-objet__header {
  margin-bottom: 4px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--ev-border-color);
}

.field-container {
  margin-bottom: 4px;
}

@media (width < 720px) {
  .page-content {
    padding-block: 1rem;
  }
}

#htmxModalNext,
#htmxModalPrev {
  background: var(--ev-body-bg);
  aspect-ratio: 1/1;
  display: grid;
  padding: .5rem;
  border-radius: 100vmax;
  border: 1px solid var(--ev-border-color);
}

[role="group"] .link-primary {
  padding: 0 !important;
}

.card--document-appearance {
  margin-bottom: 16px;
}

/* ==========================================================================
   Flat block editor — dossier canvas + outline panel
   ========================================================================== */

/* Canvas: faithful (styled) render, editing affordances on hover.
   White page background (theme-driven via --doc-page-bg). */
/* L7-suite (CDC 2026-08-25-document-correction-rendu) : la zone éditable suit le fond de page du
   thème (var --doc-page-bg, héritée du :scope) au lieu d'un blanc figé qui masquait le fond dans
   l'éditeur ; repli blanc sans thème ou sans fond réglé. */
.doc-canvas { position: relative; background: var(--doc-page-bg, #fff); }
/* B2 — masquage non destructif des lignes/colonnes de tableau dans l'ÉDITEUR (données conservées
   dans la description, réversibles via « Annuler »). Miroir de document_print.css. */
.doc-canvas table tr.dqt-row-hidden { display: none; }
.doc-canvas table td.dqt-col-hidden, .doc-canvas table th.dqt-col-hidden { display: none; }
/* Full-width blocks so the per-block controls always sit in the right gutter
   (and never beside short/inline text). */
.doc-canvas > [data-bloc-id] { position: relative; display: block !important; }
.doc-canvas > [data-bloc-id]:hover {
  outline: 1px dashed rgba(var(--ev-primary-rgb), 0.35);
  outline-offset: 3px;
}
.bloc-editing {
  outline: 2px solid var(--ev-primary) !important;
  border-radius: 3px;
}
.bloc-inactive { opacity: 0.4; }

/* Empty blocks keep a clickable height in the editor (no collapse to 0). */
.doc-canvas .bloc-container { min-height: 1.6em; }
.doc-canvas .section-title { min-height: 1.4em; }
.doc-canvas .bloc-container--Image { min-height: 60px; }
/* Discreet placeholder for empty headings (the title text span has no tool spans). */
.doc-canvas .section-title .section-title-text:empty::before { content: 'Titre…'; color: #b9b9c2; }

/* ── Editor presentation (canvas only; viewer/print stays faithful) ── */
/* Variables = plain inline text in the canvas (drop the admin highlight box). */
.doc-canvas .value-calculated {
  background: none !important; padding: 0 !important; border-radius: 0 !important;
  margin: 0 !important; display: inline !important; font-size: inherit !important;
  border: 0 !important;
}
/* A4 sheet centered on the workspace (mirrors the print page). The inner
   <section class="page-body"> + .doc-content get their margins from the Style. */
.doc-page {
  background: #fff;
  width: 210mm;             /* TRUE A4 GEOMETRY — kept in A4 units so px/mm sizes match the
                               printed page (WYSIWYG). The sheet is then magnified to fill the
                               column via `zoom` (set by applyDocZoom in document_blocs.js) so
                               there is no wasted grey space, WITHOUT reflowing the content. */
  min-height: 297mm;
  margin: 8px auto;         /* centered (only matters when zoom is capped on ultra-wide screens) */
  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
}
/* Column layout so the footer is pinned to the bottom of the page (like print).
   `!important` overrides the Style's `.page-body { display:block !important }`. */
.doc-page > .page-body {
  display: flex !important;
  flex-direction: column;
  flex: 1 1 auto;
}
/* Default A4 page margins for theme-less documents — mirrors document_print.css's
   default @page margin so the canvas CONTENT width = the printed content width.
   `:where()` keeps this at low specificity so a Style's own `.page-body { padding }`
   (which mirrors that Style's @page margins) overrides it → strict WYSIWYG. */
:where(.doc-page) > .page-body { padding: 9mm 9mm 20mm 9mm; }
.doc-canvas { flex: 1 1 auto; } /* content uses the full page width; controls live in the page's own right margin (overflow:visible) */
.doc-page .doc-footer { margin-top: auto; flex: 0 0 auto; }     /* pin footer to the bottom */
/* A Style must never clip the controls that sit just outside each block. */
.doc-page,
.doc-page .page-body,
.doc-canvas,
.doc-canvas > [data-bloc-id] { overflow: visible !important; }

/* Read-only structure header / footer (inside the page, around the content). */
.doc-page .doc-fixed { position: relative; user-select: none; cursor: default; }
.doc-page .doc-fixed::after {
  content: "Structure — non modifiable";
  position: absolute; top: 2px; right: 4px; z-index: 5;
  font-size: 9px; color: #9a9aa2; background: rgba(255, 255, 255, 0.75);
  padding: 0 5px; border-radius: 3px; opacity: 0; transition: opacity 0.15s ease;
  pointer-events: none;
}
.doc-page .doc-fixed:hover::after { opacity: 1; }
/* The dossier `.row > :first-child { height: fit-content }` rule (document_show.css)
   makes the canvas column only as tall as its content, leaving grey below it. Force
   the document canvas column to stretch full-height and fill it with white. */
.doc-canvas-col {
  height: auto !important;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  padding-left: 6px;   /* canvas more to the left = more usable width */
  padding-right: 6px;
}
.document-overview {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  background: #f1f1f4; /* workspace behind the A4 sheet */
}
/* R1 — Normalisations « lisibilité éditeur » réservées aux documents SANS thème.
   POURQUOI : ces règles globales/!important battaient le thème sur le canevas
   #vueDocument (le thème pose `main h1 { font-size } `, spécificité 0,1,1, perdant
   face à `.doc-canvas h1.section-title` 0,2,1 !important). En les conditionnant en
   `:not(.has-theme)`, un document thémé suit fidèlement son thème ; un document sans
   thème garde ces tailles lisibles. La classe `has-theme` est posée par _doc_page.html.twig. */
.doc-canvas:not(.has-theme) h1.section-title { font-size: 25px !important; }
.doc-canvas:not(.has-theme) h2.section-title { font-size: 21px !important; }
.doc-canvas:not(.has-theme) h3.section-title { font-size: 18px !important; }
.doc-canvas:not(.has-theme) h4.section-title { font-size: 16px !important; }
.doc-canvas:not(.has-theme) h5.section-title { font-size: 14px !important; }
.doc-canvas:not(.has-theme) h6.section-title { font-size: 13px !important; }
.doc-canvas:not(.has-theme) .bloc-container { font-size: 13px; line-height: 1.5; }
/* R2 — Wrappers Markdown (BlocMarkdownRenderer) : `<blockquote class="dq-callout …">`
   et `<pre class="dq-code">` n'ont aucun CSS → marges/bordure/fond User-Agent parasites
   DANS la boîte thémée. On les neutralise pour que la boîte visible soit le conteneur
   `.bloc-container--X` piloté par le thème, pas le wrapper interne. (Écran ; l'aperçu et
   l'impression sont couverts par document_print.css.) */
.doc-canvas .dq-callout { margin: 0; border: 0; background: transparent; }
/* Le `<pre>` reçoit le style global Tabler `pre { background: var(--tblr-bg-surface-dark);
   color: var(--tblr-light); padding: 1rem; white-space: pre; overflow-x: auto }` → encadré
   SOMBRE (le « cadre noir ») ET barre défilante horizontale. On neutralise fond/padding/couleur/
   bordure ET on force le RETOUR À LA LIGNE (pre-wrap, pas de scroll horizontal) : la boîte visible
   est le `.bloc-container--Code` piloté par le thème, le `<pre>` est transparent et hérite la couleur. */
.doc-canvas .dq-code { margin: 0; padding: 0; background: transparent; color: inherit; border: 0; border-radius: 0; white-space: pre-wrap; overflow-wrap: anywhere; overflow-x: visible; }
/* Champs texte : un retour à la ligne (Entrée) = une ligne d'interligne, pas un
   "saut de ligne". TinyMCE enveloppe chaque ligne dans un <p> ; on neutralise les
   marges par défaut du navigateur pour que l'espacement vertical soit piloté
   UNIQUEMENT par le line-height (mise en forme totalement prévisible, identique au
   rendu/PDF). Code (white-space:pre-wrap) et image-description gardent leur style. */
/* L1 (C1, CDC 2026-08-25-document-correction-rendu) : reset limité aux <p> (parité PDF).
   Les listes suivent le thème `main ul, main ol` au lieu d'être écrasées à margin:0. */
.doc-canvas .bloc-container--Paragraphe p,
.doc-canvas .bloc-container--Note p,
.doc-canvas .bloc-container--Encadre p,
.doc-canvas .bloc-container--Citation p { margin: 0; }
/* Code legacy contenant des <p> : neutraliser leurs marges (le bloc est en pre-wrap). */
.doc-canvas .bloc-container--Code :is(p, div, ul, ol) { margin: 0; }
/* En-tête / pied (structure) : marges des blocs internes neutralisées pour que
   l'espacement vertical soit piloté UNIQUEMENT par l'interligne (comme les blocs).
   La typo (taille, interligne, couleur…) est posée sur .doc-header/.doc-footer par
   le thème, qui les fait suivre le style « Paragraphe ». */
.doc-page .doc-header :is(p, h1, h2, h3, h4, h5, h6, ul, ol),
.doc-page .doc-footer :is(p, h1, h2, h3, h4, h5, h6, ul, ol) { margin: 0; }
/* Code block: line-number gutter (editor) — R1 : réservé aux documents SANS thème.
   La gouttière impose un `padding-left: 3.6em` qui écraserait le padding du thème.
   Pour un document thémé, le padding vient du thème et on n'affiche pas les n° de ligne
   (sinon numéros orphelins sans gouttière). Sans thème : gouttière conservée intacte. */
.doc-canvas:not(.has-theme) .bloc-container--Code { counter-reset: codeline; padding-left: 3.6em; position: relative; }
.doc-canvas:not(.has-theme) .bloc-container--Code > div { position: relative; }
.doc-canvas:not(.has-theme) .bloc-container--Code > div::before {
  counter-increment: codeline; content: counter(codeline);
  position: absolute; left: -3em; width: 2.4em; text-align: right;
  color: #b0b0b8; user-select: none; -webkit-user-select: none;
}

/* Page break: invisible in print/PDF, but shown as a labelled separator in the editor
   so the user can see where the page will break. */
.doc-canvas .break-page-label {
  display: flex; align-items: center; gap: 6px;
  margin: 6px 0; padding: 4px 0;
  color: #9a9aa2; font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em;
  border-top: 1px dashed #c7c7cf; border-bottom: 1px dashed #c7c7cf;
  user-select: none;
}
.doc-canvas .break-page-label .material-symbols-outlined { font-size: 16px; }

/* Sommaire in the editor: a subtle frame so the auto-built block reads as one unit.
   R1 : réservé aux documents SANS thème (le cadre en dur — bordure + fond — écraserait
   la décoration du thème appliquée au Sommaire). Document thémé = suit le thème. */
.doc-canvas:not(.has-theme) .bloc-container--Sommaire {
  border: 1px dashed #d7d7df; border-radius: 5px;
  padding: 8px 12px; background: #fcfcfd;
}
.doc-canvas .bloc-container--Sommaire .doc-toc__item > a { cursor: pointer; }

/* Insertion line between blocks: + Titre ▾ / + Texte ▾ / + Image (appears on hover) */
/* La feuille est agrandie au zoom (applyDocZoom) pour remplir la colonne : le CONTENU
   suit (texte, titres, tableaux, images = WYSIWYG), mais PAS les affordances d'édition.
   On les contre-zoome (zoom 1/k via --doc-unzoom) → taille ET position d'écran d'origine,
   quel que soit le zoom de la page. */
.bloc-inserter,
.bloc-tools,
.bloc-typeswitch { zoom: var(--doc-unzoom, 1); }

/* ── Inséreur de bloc « entre les lignes » : RIEN au repos ; au survol, une ligne
   POINTILLÉE + un « + » minimal ; clic « + » → menu HORIZONTAL (catégories) ;
   clic Titre/Texte → sous-menu VERTICAL. Maquette : public/insert-final.html. ── */
.bloc-inserter { position: relative; height: 18px; margin: 2px 0; }
.bloc-ins-line {
  position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
  height: 0; border-top: 2px dashed #1c7ed6; opacity: 0;
  transition: opacity .15s ease; pointer-events: none;
}
.bloc-ins-add {
  position: absolute; right: 50%; top: 50%; transform: translate(50%, -50%);
  width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid #1c7ed6; background: #fff; color: #1c7ed6;
  display: grid; place-items: center; cursor: pointer; padding: 0; z-index: 22;
  opacity: 0; transition: opacity .15s ease, background .15s ease, color .15s ease;
}
.bloc-ins-add .material-symbols-outlined { font-size: 16px; transition: transform .15s ease; }
.bloc-inserter:hover .bloc-ins-line, .bloc-inserter.open .bloc-ins-line { opacity: .55; }
.bloc-inserter:hover .bloc-ins-add,  .bloc-inserter.open .bloc-ins-add  { opacity: 1; }
/* Accessibilité clavier (CDC L11/ENF-5) : l'inséreur « + » se révèle aussi au focus clavier
   (:focus-within / :focus-visible) et non plus seulement au survol souris. */
.bloc-inserter:focus-within .bloc-ins-line { opacity: .55; }
.bloc-inserter:focus-within .bloc-ins-add,
.bloc-ins-add:focus-visible { opacity: 1; }
.bloc-ins-add:focus-visible,
.bloc-ins-cat-btn:focus-visible {
  outline: 2px solid #1c7ed6; outline-offset: 2px;
}
.bloc-inserter.open .bloc-ins-add { background: #1c7ed6; color: #fff; }
.bloc-inserter.open .bloc-ins-add .material-symbols-outlined { transform: rotate(45deg); }  /* + → × */

/* Niveau 1 — menu HORIZONTAL des catégories */
.bloc-ins-lvl1 {
  position: absolute; right: 50%; transform: translateX(50%); top: calc(50% + 22px); z-index: 40;
  display: none; flex-direction: row; gap: 4px;
  background: #fff; border: 1px solid var(--ev-border-color); border-radius: 13px; padding: 7px;
  box-shadow: 0 16px 36px -12px rgba(16, 24, 40, .3);
}
.bloc-inserter.open .bloc-ins-lvl1 { display: flex; }
.bloc-ins-cat { position: relative; }
.bloc-ins-cat-btn {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  width: 64px; height: 58px; border: 1px solid transparent; background: #f6f8fb; border-radius: 10px;
  cursor: pointer; font-size: 11px; color: var(--ev-body-color); position: relative; font-family: inherit;
}
.bloc-ins-cat-btn:hover, .bloc-ins-cat.open .bloc-ins-cat-btn {
  background: rgba(28, 126, 214, .12); border-color: rgba(28, 126, 214, .4); color: #1c7ed6;
}
.bloc-ins-cat-btn .material-symbols-outlined { font-size: 23px; }
.bloc-ins-car { position: absolute; right: 4px; top: 3px; font-size: 12px !important; opacity: .55; transition: transform .15s ease; }
.bloc-ins-cat.open .bloc-ins-car { transform: rotate(180deg); }

/* Niveau 2 — sous-menu VERTICAL (Titre → H1…H6 ; Texte → Note/Citation…) */
.bloc-ins-lvl2 {
  position: absolute; top: calc(100% + 7px); left: 50%; transform: translateX(-50%); z-index: 50;
  display: none; flex-direction: column; gap: 1px; min-width: 190px;
  background: #fff; border: 1px solid var(--ev-border-color); border-radius: 12px; padding: 6px;
  box-shadow: 0 16px 34px -12px rgba(16, 24, 40, .32);
}
.bloc-ins-lvl2::before {
  content: ""; position: absolute; top: -7px; left: 50%; transform: translateX(-50%) rotate(45deg);
  width: 12px; height: 12px; background: #fff; border-left: 1px solid var(--ev-border-color); border-top: 1px solid var(--ev-border-color);
}
.bloc-ins-cat.open .bloc-ins-lvl2 { display: flex; }
.bloc-ins-lvl2 a {
  display: flex; align-items: center; gap: 11px; border-radius: 8px; padding: 8px 10px;
  color: var(--ev-body-color); text-decoration: none; font-size: 13px;
}
.bloc-ins-lvl2 a:hover { background: rgba(28, 126, 214, .12); color: #1c7ed6; }
.bloc-ins-lvl2 a .material-symbols-outlined { font-size: 20px; color: #1c7ed6; }
.bloc-ins-h { font-size: 10.5px; font-weight: 700; color: #1c7ed6; background: rgba(28, 126, 214, .14); border-radius: 5px; padding: 2px 6px; }

/* Drag handle — LEFT margin (single-element D&D). Sits outside the editable text. */
.bloc-tools { position: absolute; top: 2px; left: -38px; right: auto; z-index: 21; }
.bloc-tools__btn {
  opacity: 0.45;
  border: 1px solid var(--ev-border-color); background: #fff !important;
  border-radius: 4px; width: 26px; height: 26px; display: grid; place-content: center;
  cursor: grab; color: #333; box-shadow: 0 1px 3px rgba(0,0,0,0.12);
  transition: opacity 0.12s ease; touch-action: none;
}
.bloc-tools__btn:active { cursor: grabbing; }
.bloc-tools__btn .material-symbols-outlined { font-size: 18px; }
.has-bloc-tools:hover .bloc-tools__btn,
.bloc-tools.open .bloc-tools__btn { opacity: 1; }
.bloc-tools__menu {
  display: none; position: absolute; right: 0; top: 22px;
  background: #fff; border: 1px solid var(--ev-border-color);
  border-radius: 6px; box-shadow: 0 4px 16px rgba(0,0,0,0.12); min-width: 140px;
}
.bloc-tools.open .bloc-tools__menu { display: block; }
.bloc-tools__menu a {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 12px; font-size: 13px; color: #c0392b; text-decoration: none;
}
.bloc-tools__menu a .material-symbols-outlined { font-size: 16px; }
.bloc-tools__menu a:hover { background: #fdecea; }

/* Outline / "Plan du document" panel */
.card--document-outline { margin-bottom: 16px; }
.outline-list { list-style: none; margin: 0; padding: 0; }
.outline-row {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 6px;
  padding-left: calc(6px + (var(--outline-lvl, 1) - 1) * 14px);
  border-radius: 4px; font-size: 13px;
}
.outline-row:hover { background: rgba(0, 0, 0, 0.05); }
.outline-row--inactive { opacity: 0.45; }
/* All-black font for the outline (handle left, toggle right). */
.outline-row, .outline-number, .outline-title, .outline-handle { color: #000; }
.outline-handle { cursor: grab; opacity: 0.55; display: flex; flex: 0 0 auto; }
.outline-handle .material-symbols-outlined { font-size: 16px; }
.outline-number { font-weight: 600; min-width: 1.6em; flex: 0 0 auto; }
.outline-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.outline-title:hover { text-decoration: underline; }
/* Level selector (H1..H6) */
.outline-level {
  flex: 0 0 auto; font-size: 11px; padding: 1px 2px; border: 1px solid var(--ev-border-color);
  border-radius: 4px; background: #fff; color: #000; cursor: pointer;
}
/* Activate / deactivate (eye) */
.outline-actif-btn {
  flex: 0 0 auto; border: none; background: transparent; cursor: pointer; color: #000;
  display: grid; place-content: center; padding: 0 2px;
}
.outline-actif-btn .material-symbols-outlined { font-size: 18px; }
.outline-row--inactive .outline-actif-btn { color: #999; }

/* Brief highlight when navigating from the outline to a title in the canvas. */
.bloc-flash { animation: blocFlash 1.2s ease; }
@keyframes blocFlash {
  0%, 100% { background-color: transparent; }
  20% { background-color: rgba(var(--ev-primary-rgb), 0.18); }
}

/* B4/B5/B3 — barre d'icônes au SURVOL du bloc (Copier MD / Style / Éditer en Markdown), dans la
   gouttière droite, sous le crayon « Modifier ». Masquée au repos, révélée au survol du bloc. */
/* Garde de positionnement (comité 2026-08-13) : les tools sont `position:absolute` ; ils s'ancrent au
   bloc décoré. Le sélecteur `.doc-canvas > [data-bloc-id]` couvre les blocs DIRECTS, mais un bloc
   accidentellement imbriqué (ancien bug d'imbrication au save) perdait ce contexte → tools dans le flux.
   On garantit un contexte de positionnement sur TOUT bloc décoré, où qu'il soit. */
.doc-canvas .has-bloc-tools { position: relative; }
/* Bouton « Copier » : coin HAUT-DROITE DANS le bloc (comité 2026-08-13), révélé au survol du bloc. */
.bloc-hovertools { position: absolute; top: 4px; right: 4px; z-index: 21; display: flex; flex-direction: row;
  gap: 3px; zoom: var(--doc-unzoom, 1); }
.doc-page.doc-reflow .bloc-hovertools, .bloc-hovertools.dq-inline { right: 4px; }
.bloc-hovertools__btn { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid #dbe0e6; border-radius: 6px; background: #fff; color: #495057; cursor: pointer;
  opacity: 0; transition: opacity .12s, background .12s, color .12s, box-shadow .12s; padding: 0; }
.bloc-hovertools__btn .material-symbols-outlined { font-size: 17px; }
.bloc-hovertools__btn:hover { background: #eef2f7; color: #1c1c1c; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.has-bloc-tools:hover .bloc-hovertools__btn { opacity: .9; }
.has-bloc-tools:hover .bloc-hovertools__btn:hover { opacity: 1; }
@media (max-width: 900px) { .bloc-hovertools { right: -2px; } }
/* Feuille tout juste re-rendue en AJAX (refreshDocPage) : masque les affordances d'édition tant que
   le pointeur n'a pas VRAIMENT bougé — parade au `:hover` fantôme post-replaceWith (comité 2026-08-13).
   La classe `ev-hover-suspended` est retirée au premier pointermove/pointerdown réel (reinitDocCanvas). */
.doc-canvas.ev-hover-suspended .bloc-hovertools__btn,
.doc-canvas.ev-hover-suspended .bloc-typeswitch__btn,
.doc-canvas.ev-hover-suspended .bloc-ins-add,
.doc-canvas.ev-hover-suspended .bloc-ins-line { opacity: 0 !important; }

/* B3 — éditeur Markdown par bloc : panneau superposé avec textarea + actions. */
.bloc-mdediting { position: relative; }
.bloc-mdedit { position: absolute; inset: 0; z-index: 40; display: flex; flex-direction: column;
  background: #fff; border: 1px solid #1c7ed6; border-radius: 8px; box-shadow: 0 6px 24px rgba(0,0,0,.18); overflow: hidden; }
.bloc-mdedit__bar { display: flex; align-items: center; gap: .5rem; padding: .35rem .5rem; background: #f1f6fb;
  border-bottom: 1px solid #d0e3f5; font-family: sans-serif; font-size: .8rem; }
.bloc-mdedit__title { font-weight: 600; color: #1c5aa0; margin-right: auto; }
.bloc-mdedit__save, .bloc-mdedit__cancel { border: 1px solid #c3ccd6; border-radius: 5px; padding: .15rem .6rem;
  cursor: pointer; font-size: .8rem; }
.bloc-mdedit__save { background: #1c7ed6; color: #fff; border-color: #1c7ed6; }
.bloc-mdedit__ta { flex: 1; min-height: 8rem; width: 100%; box-sizing: border-box; border: 0; outline: 0; resize: vertical;
  padding: .6rem; font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: .85rem; line-height: 1.5; }

/* Pencil = "Modifier" menu (type switch + delete) — RIGHT margin, outside the text. */
.bloc-typeswitch { position: absolute; top: 2px; right: -38px; z-index: 21; }
/* Le menu « Modifier » est un descendant du bloc (h1 / Citation / Encadré…) : on l'ISOLE
   de la typographie du Style du document. Sans ce reset, changer le type fait HÉRITER aux
   boutons la taille/le gras/l'italique/les MAJUSCULES du bloc → leur style change. On NE
   touche PAS aux icônes (.material-symbols-outlined gardent leur police via leur règle propre). */
.doc-canvas .bloc-typeswitch {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 13px; font-weight: 400; font-style: normal; line-height: 1.3; text-align: left;
  color: var(--ev-body-color);
}
.doc-canvas .bloc-typeswitch * {
  font-style: normal !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* Smartphone: full-width sheet (no A4 overflow), controls stacked. */
/* Mode REFLOW (colonne plus étroite que l'A4, posé par applyDocZoom) : la feuille
   remplit la largeur dispo et le contenu se recompose. Pas de gouttière externe pour
   les affordances → on les ramène à l'intérieur (elles tombent dans la marge interne
   de la page, donc PAS sur le texte). */
.doc-page.doc-reflow { width: 100%; }
.doc-page.doc-reflow .bloc-tools { left: -2px; right: auto; }
.doc-page.doc-reflow .bloc-typeswitch { right: -2px; }

@media (max-width: 767px) {
  .doc-page {
    max-width: 100%;
    min-height: auto;
    margin: 8px 0;
    box-shadow: none;
  }
  .bloc-tools { left: -2px; right: auto; top: 2px; }
  .bloc-typeswitch { right: -2px; top: 2px; }
  /* En mobile, la marge interne est réduite à 8px : l'icône « type de bloc » (à droite,
     toujours visible au tactile) se posait SUR la fin du texte (« icônes collées »). On
     réserve une gouttière à droite de chaque bloc pour qu'elle s'y loge, hors du texte. */
  .doc-canvas > [data-bloc-id] { padding-right: 30px; }

  /* Responsive A4 sheet. The app shell wraps the page in a CSS grid
     (.page-grid → .page-content); grid/flex items default to `min-width: auto`,
     so the A4 sheet's intrinsic width blew the column past the viewport and got
     clipped by .page-wrap (overflow: hidden) — the right side of the sheet was
     cut off and unreachable. Releasing `min-width` down the chain lets the
     column shrink to the viewport so the sheet reflows to that width at full
     font size (stays legible AND editable — no scaling). Anything that still
     can't shrink (long URLs/emails, wide images) stays reachable via a thin
     horizontal scroll on the workspace instead of being clipped. */
  .page-content:has(.document-editor-page) { min-width: 0; }
  /* Même bug/technique que ci-dessus, sur les fiches contact_type/objet_type (.ct-page) :
     la barre d'étapes (.ct-stepper, 5 items non-wrappables) a son propre overflow-x:auto
     prévu pour défiler EN INTERNE, mais sans min-width:0 sur le grid item ancêtre elle
     force .page-content à s'élargir bien au-delà du viewport. Ce débordement, invisible
     (clippé par .page-wrap { overflow: hidden }), casse le calc() 100vw du bandeau
     .objet-hd full-bleed (qui se recentre sur le MAUVAIS conteneur, trop large) : le
     bandeau se retrouve décalé/coupé à l'écran. */
  .page-content:has(.ct-page) { min-width: 0; }
  .document-editor-page [class^="col-"],
  .document-editor-page [class*=" col-"] { min-width: 0; }
  .doc-canvas-col { padding-left: 0 !important; padding-right: 0 !important; }
  .document-overview { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Reclaim every horizontal pixel for the editing area: shrink the surrounding
     chrome (page container + card padding) and the A4 sheet's own screen margins
     down hard. The print/PDF output is unaffected — these are screen-only
     paddings and the @page margins drive the export. */
  .page-content:has(.document-editor-page) .container { padding-left: .35rem; padding-right: .35rem; }
  .document-editor-page .card--form { padding-left: .4rem; padding-right: .4rem; }
  .document-overview .doc-page > .page-body { padding-left: 8px !important; padding-right: 8px !important; }
}
.bloc-typeswitch__btn {
  opacity: 0; border: 1px solid var(--ev-border-color); background: #fff !important;
  border-radius: 4px; width: 26px; height: 26px; display: grid; place-content: center;
  cursor: pointer; color: #333; box-shadow: 0 1px 3px rgba(0,0,0,0.12); transition: opacity 0.12s ease;
}
.bloc-typeswitch__btn .material-symbols-outlined { font-size: 16px; }
.has-bloc-tools:hover .bloc-typeswitch__btn,
.bloc-typeswitch.open .bloc-typeswitch__btn { opacity: 1; }
/* Tactile (aucun survol possible) : SEUL le crayon « Modifier » est permanent et tapable — sinon les
   options d'un bloc sont INATTEIGNABLES au doigt (comité 2026-08-14). Le bouton « Copier MD »
   (secondaire) est MASQUÉ au tactile : rendu permanent, il encombrait la vue (bruit « ⧉ MD » sur
   chaque bloc, y compris sur les desktops tactiles / 2-en-1 que ce média capte) et se superposait au
   crayon. La copie Markdown reste accessible via « Copier tout en MD » (barre) et, sur desktop souris,
   au survol du bloc (le média hover:none/pointer:coarse ne s'y applique pas). Cibler hover:none /
   pointer:coarse (et NON une largeur) pour ne pas rendre le crayon permanent sur un desktop souris en
   petite fenêtre. */
@media (hover: none), (pointer: coarse) {
  /* Crayon « Modifier » : gouttière droite, cible 40px, permanent. */
  .bloc-typeswitch__btn { opacity: .6; width: 40px; height: 40px; }
  .bloc-typeswitch__btn .material-symbols-outlined { font-size: 22px; }
  .doc-page .doc-canvas .bloc-typeswitch { right: 2px; top: 2px; }

  /* « Copier MD » masqué au tactile (spécificité 0,3,0 pour battre les règles reflow homonymes). */
  .doc-page .doc-canvas .bloc-hovertools { display: none; }

  .doc-canvas > [data-bloc-id] { padding-right: 46px; }
}
.bloc-typeswitch__menu {
  display: none; position: absolute; right: 0; left: auto; top: 30px; z-index: 40;
  background: #fff; border: 1px solid var(--ev-border-color); border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12); min-width: 160px; padding: 4px 0; max-height: 340px; overflow: auto;
}
.bloc-typeswitch.open .bloc-typeswitch__menu { display: block; }
.bloc-typeswitch__menu a { display: block; padding: 5px 14px; font-size: 13px; color: var(--ev-body-color); text-decoration: none; }
.bloc-typeswitch__menu a:hover { background: rgba(var(--ev-primary-rgb), 0.08); }
.bloc-typeswitch__sep { height: 1px; background: var(--ev-border-color); margin: 4px 0; }
.bloc-typeswitch__delete { display: flex !important; align-items: center; gap: 6px; color: #c0392b !important; }
.bloc-typeswitch__delete .material-symbols-outlined { font-size: 16px; }
.bloc-typeswitch__delete:hover { background: #fdecea !important; }
.bloc-typeswitch__group { padding: 4px 14px 2px; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: #999; }
.bloc-typeswitch__cols { display: flex; gap: 4px; padding: 4px 14px 6px; }
.bloc-typeswitch__cols a {
  flex: 1; text-align: center; padding: 3px 0; border: 1px solid var(--ev-border-color);
  border-radius: 4px; font-size: 13px; color: var(--ev-body-color); text-decoration: none;
}
.bloc-typeswitch__cols a.active { background: var(--ev-primary); color: #fff; border-color: var(--ev-primary); }
.bloc-typeswitch__cols a:hover { background: rgba(var(--ev-primary-rgb), 0.08); }
/* Majuscules toggle (active state) + left-margin field */
.bloc-typeswitch__menu a[data-toggleuppercase] { display: flex; align-items: center; gap: 6px; }
.bloc-typeswitch__menu a[data-toggleuppercase] .material-symbols-outlined { font-size: 18px; }
.bloc-typeswitch__menu a[data-toggleuppercase].active { color: var(--ev-primary); font-weight: 600; }
.bloc-typeswitch__margin { display: flex; align-items: center; gap: 6px; padding: 4px 14px 8px; }
.bloc-typeswitch__margin input {
  width: 64px; padding: 3px 6px; border: 1px solid var(--ev-border-color);
  border-radius: 4px; font-size: 13px; color: var(--ev-body-color);
}
.bloc-typeswitch__margin span { font-size: 12px; color: #999; }

/* ── Menu « Modifier » EN 2 COLONNES (Texte/Titre) — variante 2.
   Col 1 = type (reprend le menu d'insertion) · Col 2 = colonnes/marge segmentés + Supprimer. ── */
.bloc-typeswitch__menu.is2col { padding: 0; min-width: 0; max-height: none; overflow: visible; border-radius: 13px; }
.ts2 { display: flex; }
.ts2-col { padding: 8px; }
.ts2-types { display: flex; flex-direction: column; gap: 1px; min-width: 146px; border-right: 1px solid var(--ev-border-color); }
.ts2-types a { display: flex !important; align-items: center; gap: 10px; padding: 7px 9px !important; border-radius: 8px; font-size: 13px; }
.ts2-types a .material-symbols-outlined { font-size: 19px; color: #1c7ed6; }
.ts2-types a .ts2-h { font-size: 10.5px; font-weight: 700; color: #1c7ed6; background: rgba(28, 126, 214, .14); border-radius: 5px; padding: 2px 6px; }
.ts2-types a.active { background: rgba(28, 126, 214, .12); color: #1c7ed6; font-weight: 600; }
.ts2-types a:hover { background: rgba(28, 126, 214, .1); color: #1c7ed6; }
.ts2-ctrl { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; min-width: 158px; }
.ts2-label { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: #999; }
.ts2-seg { display: inline-flex; border: 1px solid var(--ev-border-color); border-radius: 9px; overflow: hidden; width: fit-content; }
.ts2-seg a { display: block !important; padding: 6px 12px !important; border-right: 1px solid var(--ev-border-color); font-size: 12.5px; font-weight: 600; color: var(--ev-body-color); }
.ts2-seg a:last-child { border-right: 0; }
.ts2-seg a.on { background: rgba(28, 126, 214, .12); color: #1c7ed6; }
.ts2-seg a:hover { background: rgba(28, 126, 214, .08); }
.ts2-toggle { display: flex !important; align-items: center; gap: 7px; padding: 6px 4px !important; font-size: 13px; }
.ts2-toggle .material-symbols-outlined { font-size: 18px; }
.ts2-toggle.on { color: #1c7ed6; font-weight: 600; }
.ts2-del { margin-top: auto; display: flex !important; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid #ffc9c9 !important; background: #fff5f5; color: #e03131 !important; border-radius: 9px; padding: 9px !important; font-weight: 600; }
.ts2-del:hover { background: #ffe3e3 !important; }
.ts2-del .material-symbols-outlined { font-size: 17px; }

/* ---- Édition « comme Word » : conversion ligne / sélection ---- */
/* Le canvas ancre les overlays positionnés (bouton de ligne). */
.doc-canvas { position: relative; }
/* Réserver le couloir droit des blocs texte pour le bouton « convertir cette ligne ». */
.bloc-container--Paragraphe,
.bloc-container--Note,
.bloc-container--Encadre,
.bloc-container--Citation { padding-right: 4px; }

/* Bouton flottant « convertir cette ligne » (Axe B), dans le padding droit. */
.bloc-line-convert { position: absolute; z-index: 22; }
.bloc-line-convert__btn {
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; padding: 0; border: 1px solid var(--ev-border-color);
  border-radius: 5px; background: #fff; color: var(--ev-primary); cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12); opacity: 0.55; transition: opacity .12s;
}
.bloc-line-convert:hover .bloc-line-convert__btn,
.bloc-line-convert.open .bloc-line-convert__btn { opacity: 1; }
.bloc-line-convert__btn .material-symbols-outlined { font-size: 16px; }
.bloc-line-convert__menu {
  display: none; position: absolute; top: 26px; left: 0; min-width: 150px;
  background: #fff; border: 1px solid var(--ev-border-color); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.16); padding: 4px 0; z-index: 23;
}
.bloc-line-convert.open .bloc-line-convert__menu { display: block; }
.bloc-line-convert__menu a { display: block; padding: 5px 14px; font-size: 13px; color: var(--ev-body-color); text-decoration: none; }
.bloc-line-convert__menu a:hover { background: rgba(var(--ev-primary-rgb), 0.08); }
.bloc-line-convert__menu a.is-disabled { color: #bbb; pointer-events: none; }
.bloc-line-convert__menu .bloc-typeswitch__group { padding: 4px 14px 2px; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: #999; }

/* Surface continue : ligne vide finale virtuelle (Axe A). */
.doc-virtual-line { margin: 0; min-height: 1.4em; outline: none; cursor: text; }
.doc-virtual-line:empty::before { content: attr(data-placeholder); color: #b8b8b8; }

/* Snackbar « Annuler » (Axe A/C, rattrapage non bloquant). */
#ev-snackbar-host {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 8px; z-index: 4000; pointer-events: none;
}
.ev-snackbar {
  display: flex; align-items: center; gap: 16px; pointer-events: auto;
  background: #2b2f33; color: #fff; padding: 10px 16px; border-radius: 8px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.28); font-size: 14px;
  animation: evSnackbarIn .2s ease;
}
.ev-snackbar--out { opacity: 0; transform: translateY(8px); transition: opacity .25s, transform .25s; }
.ev-snackbar__action {
  border: 0; background: transparent; color: #7db8ff; font-weight: 600;
  cursor: pointer; padding: 2px 4px; font-size: 14px;
}
.ev-snackbar__action:hover { text-decoration: underline; }
@keyframes evSnackbarIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.outline-row.sortable-ghost { opacity: 0.4; background: rgba(var(--ev-primary-rgb), 0.1); }
.outline-row.sortable-drag { background: #fff; box-shadow: 0 6px 18px rgba(0,0,0,0.15); }

/* Canvas D&D: the moved block's placeholder collapses to a thin colored insertion
   line between blocks — no full-size slot opens up until the block is dropped. */
.doc-canvas > [data-bloc-id].bloc-drop-line {
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 5px 0 !important;
  overflow: hidden !important;
  background: none !important;
  border: 0 !important;
  border-top: 3px solid var(--ev-primary) !important;
  border-radius: 2px !important;
  outline: none !important;
  box-shadow: 0 0 4px rgba(var(--ev-primary-rgb), 0.5) !important;
  column-count: 1 !important;
}
.doc-canvas > [data-bloc-id].bloc-drop-line * { visibility: hidden !important; }
.doc-canvas > [data-bloc-id].bloc-drop-line::before,
.doc-canvas > [data-bloc-id].bloc-drop-line::after { content: none !important; }
/* The block under the cursor while dragging stays neutral (no extra outline). */
.doc-canvas > [data-bloc-id].bloc-drag-chosen { outline: none !important; }

/* =====================================================
   CONTACT CARDS — redesign v2 (contact-liste)
   Scoped to .card--contact ; cartes "objet" non impactées.
   ===================================================== */

.card--contact {
  --cc-accent: var(--ev-primary);
  --cc-accent-rgb: var(--ev-primary-rgb);
  --cc-surface: #ffffff;
  --cc-line: #eef0f4;
  padding: 0;
  overflow: hidden;
  border: 1px solid #e7e9ef;
  border-radius: 16px;
  background: var(--cc-surface);
  /* Élévation plus marquée pour détacher la carte blanche du fond de page. */
  box-shadow: 0 1px 2px rgba(16, 24, 40, .06),
              0 8px 18px -8px rgba(16, 24, 40, .16),
              0 16px 32px -20px rgba(16, 24, 40, .14);
  transition: transform .2s cubic-bezier(.4,0,.2,1), box-shadow .2s ease, border-color .2s ease;
}

.card--contact:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--cc-accent-rgb), .35);
  box-shadow: 0 18px 32px -16px rgba(var(--cc-accent-rgb), .45),
              0 4px 10px rgba(16, 24, 40, .06);
}

.card--contact .card-body {
  display: flex;
  flex-direction: column;
  gap: 0;
  height: 100%;
  padding: 0;
}

/* ---- Header : avatar + identité, sur fond légèrement teinté ---- */
.card-contact__head {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 16px 18px;
  background:
    linear-gradient(180deg,
      rgba(var(--cc-accent-rgb), .055),
      rgba(var(--cc-accent-rgb), 0) 100%);
  border-bottom: 1px solid var(--cc-line);
}

/* AVATAR CONTACT — DÉFINITION UNIQUE (ne pas redéfinir ailleurs).
   Carré violet plein, icône blanche qui remplit le carré. */
.card-contact__avatar {
  position: relative;
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  line-height: 1;
  color: #fff;
  background: var(--cc-accent);
  box-shadow: 0 0 0 4px rgba(var(--cc-accent-rgb), .14);
}

/* Taille de l'icône d'avatar contact — SOURCE UNIQUE (société + particulier).
   Ne pas redéfinir ailleurs (évite le double pilotage qui rapetissait l'icône). */
.card-contact__avatar .material-symbols-outlined { font-size: 52px; }

/* Traits d'icônes plus FINS sur les listes contact + objet (axe wght 300 → 200).
   font-variation-settings remplace tous les axes : on réécrit FILL/GRAD/opsz. */
.card--contact .material-symbols-outlined,
.card--objet .material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 200, 'GRAD' 0, 'opsz' 48;
}

.card-contact__identity {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.card-contact__name {
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--ev-heading-color);
  line-height: 1.2;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.card-contact__name:hover { color: var(--cc-accent); text-decoration: none; }

.card-contact__org {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ev-body-color);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.card-contact__org .material-symbols-outlined {
  font-size: 15px;
  color: rgba(var(--cc-accent-rgb), .75);
  flex: 0 0 auto;
}

/* ---- Corps : lignes clé / valeur épurées (sans pointillés) ---- */
.card-contact__body {
  flex: 1 1 auto;
  padding: 6px 18px 10px;
}
.card-contact__body .data-card-container { height: auto; }
.card-contact__body .table-responsive { font-size: 13px; }
.card-contact__body .table-responsive table { width: 100%; }

.card-contact__body .table-responsive tr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--cc-line);
}
.card-contact__body .table-responsive tr:last-child { border-bottom: none; }

.card-contact__body .table-responsive td { border: none; padding: 0; }
.card-contact__body .table-responsive td.dots { display: none; }      /* on supprime les pointillés */
.card-contact__body .table-responsive td:first-child { flex: 0 0 auto; }
.card-contact__body .table-responsive td.text-end {
  flex: 1 1 auto;
  text-align: right;
  min-width: 0;
}

.card-contact__body .data-card-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #97a0ab;
}

.card-contact__body .text-end .label.label-table {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ev-heading-color);
  word-wrap: anywhere;
}
/* valeurs "neutres" : pas de pastille, juste du texte */
.card-contact__body .text-end .label-table.no-shadow {
  padding: 0;
  background: none !important;
}
/* valeurs avec statut/couleur : vraie pastille arrondie */
.card-contact__body .text-end .label.label-table:not(.no-shadow) {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.4;
}

/* ---- Carte du contact principal ---- */
.card-contact__parent {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 2px 14px 12px;
  padding: 9px 11px;
  border-radius: 12px;
  background: linear-gradient(135deg,
      rgba(var(--cc-accent-rgb), .07),
      rgba(var(--cc-accent-rgb), .03));
  border: 1px solid rgba(var(--cc-accent-rgb), .16);
  text-decoration: none;
  transition: border-color .15s ease, transform .15s ease;
}
.card-contact__parent:hover {
  border-color: rgba(var(--cc-accent-rgb), .4);
  transform: translateY(-1px);
  text-decoration: none;
}
.card-contact__parent-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--cc-accent);
  color: #fff;
  font-size: 18px;
  box-shadow: 0 4px 10px -4px rgba(var(--cc-accent-rgb), .7);
}
.card-contact__parent-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.card-contact__parent-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(var(--cc-accent-rgb), .8);
}
.card-contact__parent-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ev-heading-color);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.card-contact__parent-go {
  margin-left: auto;
  flex: 0 0 auto;
  color: rgba(var(--cc-accent-rgb), .65);
  font-size: 20px;
}

/* ---- Barre d'actions ---- */
.card-contact__toolbar {
  display: flex;
  margin-top: auto;
  border-top: 1px solid var(--cc-line);
  background: #fafbfc;
}
.card-contact__action {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 0;
  color: #8a93a0;
  background: transparent;
  border: none;
  border-left: 1px solid var(--cc-line);
  cursor: pointer;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.card-contact__action:first-child { border-left: none; }
.card-contact__action .material-symbols-outlined { font-size: 20px; }
.card-contact__action:hover {
  background: rgba(var(--cc-accent-rgb), .09);
  color: var(--cc-accent);
  text-decoration: none;
}
.card-contact__action:active { background: rgba(var(--cc-accent-rgb), .16); }

/* ---- État vide ---- */
.card-contact__empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 56px 16px;
  color: var(--ev-body-color);
}
.card-contact__empty .material-symbols-outlined { font-size: 48px; opacity: .35; }
.card-contact__empty p { margin: 0; font-size: 14px; }

/* ---- Thèmes ---- */
[data-theme="navy"] .card--contact {
  --cc-accent: var(--ev-secondary);
  --cc-accent-rgb: 88, 39, 88;
  --cc-line: #eef0f4;
  border-color: #e7e9ef;
}
[data-theme="dark"] .card--contact {
  --cc-surface: #16181c;
  --cc-accent: #1d9bf0;
  --cc-accent-rgb: 29, 155, 240;
  --cc-line: #25282d;
  border-color: #2f3336;
}
[data-theme="dark"] .card-contact__name,
[data-theme="dark"] .card-contact__parent-name { color: #e7e9ea; }
[data-theme="dark"] .card-contact__body .text-end .label.label-table { color: #e7e9ea; }
[data-theme="dark"] .card-contact__toolbar { background: #1b1e23; }
[data-theme="dark"] .card-contact__action { color: #8b949e; }

/* =====================================================
   CONTACT CARDS — variante "Accent gauche" (#7)
   Carte plate : fiche au clic sur le nom, popin (stylo) en
   haut à droite, tél/email en liens, sans barre d'actions.
   ===================================================== */

/* Couleur d'accent unique : violet pour société ET particulier. */
.card--contact-flat.card--societe  { --cc-accent: #7048e8; --cc-accent-rgb: 112, 72, 232; }
.card--contact-flat.card--personne { --cc-accent: #7048e8; --cc-accent-rgb: 112, 72, 232; }

/* Refonte 2026-07-18 : plus d'accent de carte — bordure neutre (comme la maquette). */
.card--contact-flat { border-left: 1px solid var(--ev-border-color); }

/* En-tête plat (pas de fond teinté, pas de séparateur), padding réduit */
.card--contact-flat .card-contact__head {
  background: none;
  border-bottom: none;
  padding: 12px 14px 2px;
}
/* (Avatar : voir la définition unique .card-contact__avatar plus haut.) */

/* La dénomination ET le nom mènent à la fiche */
.card--contact-flat .card-contact__org {
  text-decoration: none;
  cursor: pointer;
  transition: color .15s ease;
}
.card--contact-flat .card-contact__org:hover { color: var(--cc-accent); }

/* Bouton popin (stylo) — coin haut droit */
.card-contact__edit {
  position: absolute;
  top: 11px;
  right: 11px;
  z-index: 6;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(var(--cc-accent-rgb), .3);
  border-radius: 9px;
  background: #fff;
  color: var(--cc-accent);
  cursor: pointer;
  transition: transform .15s ease, background .15s ease;
}
.card-contact__edit:hover { transform: scale(1.08); background: rgba(var(--cc-accent-rgb), .08); }
.card-contact__edit .material-symbols-outlined { font-size: 18px; }

/* Corps : lignes "clé : valeur" (tél, email, puis variables) */
.card--contact-flat .card-contact__body {
  flex: 1 1 auto;
  padding: 4px 14px 10px;
  display: flex;
  flex-direction: column;
}
.card--contact-flat .card-contact__body .data-card-container.datagrid {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.card-contact__line,
.card--contact-flat .card-contact__body .datagrid-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 0;
  border-bottom: 1px solid var(--cc-line);
}
.card--contact-flat .card-contact__body > .card-contact__line:last-child,
.card--contact-flat .card-contact__body .datagrid-item:last-child { border-bottom: none; }

.card-contact__line-key,
.card--contact-flat .datagrid-title {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #97a0ab;
  margin: 0;
}
.card-contact__line-key .material-symbols-outlined {
  font-size: 14px;
  color: rgba(var(--cc-accent-rgb), .7);
}
.card-contact__line-val,
.card--contact-flat .datagrid-content {
  flex: 1 1 auto;
  min-width: 0;
  text-align: right;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ev-heading-color);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.card-contact__line-val a {
  color: var(--ev-heading-color);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.card-contact__line-val a:hover {
  color: var(--cc-accent);
  border-bottom-color: rgba(var(--cc-accent-rgb), .5);
}

/* Contact principal : collé au bas, fond uni (sans dégradé), espace en dessous */
.card--contact-flat .card-contact__parent {
  margin-top: auto;
  margin-bottom: 16px;
  background: rgba(var(--cc-accent-rgb), .06);
}

/* =====================================================
   CONTACT LISTE — harmonisation de la page
   (conteneur, sidebar de filtres, champs, boutons)
   ===================================================== */

/* --- Conteneurs principaux : même rayon / ombre que les cartes --- */
.col--cards > .card,
.card--filters {
  border: 1px solid #e7e9ef;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .03);
}

/* --- Barre d'actions des filtres (en-tête de la sidebar) --- */
.card--filters .card-body { padding: 0 !important; }

.objet-filters .filter-actions {
  padding: 9px 10px;
  gap: 6px;
  background: transparent;
  border-radius: 14px 14px 0 0;
  border-bottom: 1px solid #eef0f4;
}
.filter-actions__label { font-size: 12px; margin-right: .15rem; }

.filter-actions .filter-limit-input,
.filter-actions .btn-toggle-all,
.btn-filter-mobile-toggle {
  border-radius: 8px;
}
.filter-actions .btn-toggle-all { padding: 3px; }
.filter-actions .btn-toggle-all .material-symbols-outlined { font-size: 16px; }
.filter-actions .filter-limit-input {
  width: 48px;
  padding: 5px 4px;
  font-size: 12px;
}
.filter-actions .btn-filter-apply {
  border-radius: 8px;
  padding: 6px 11px;
  font-size: 12px;
  font-weight: 600;
}
.filter-actions .btn-filter-apply .material-symbols-outlined { font-size: 15px; }

.filters-sidebar__cards {
  padding: 6px;
  margin-top: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* --- Sections de filtre : sans bordures, compactes --- */
.filter-section {
  border: none;
  border-radius: 8px;
  overflow: hidden;
  background: transparent;
}

.filter-section__header {
  border: none !important;
  background: rgba(var(--ev-primary-rgb), .05);
  color: var(--ev-secondary);
  font-size: 12px;
  font-weight: 600;
  padding: 0;
  border-radius: 8px;
  gap: 6px;
}
.filter-section__header:hover { background: rgba(var(--ev-primary-rgb), .09); }
.filter-section__header .material-symbols-outlined:not(.filter-section__chevron) {
  font-size: 15px;
  padding: 6px 7px;
  margin-right: 0;
  background: transparent;
  color: var(--ev-secondary);
}
.filter-section__header .filter-section__chevron { font-size: 18px; }
.filter-section__header[aria-expanded="true"] {
  border-radius: 8px 8px 0 0;
}

.filter-section__body {
  background: transparent !important;
  padding: 8px 7px 10px;
}
.filter-section__body .form-group { margin-bottom: 9px; }
.filter-section__body .form-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #97a0ab;
  margin-bottom: 3px;
}

/* --- Champs : style "rempli" sans bordure visible --- */
.filter-section__body .form-control,
.filter-actions .filter-limit-input {
  border: 1px solid transparent;
  border-radius: 8px;
  background: #eef0f4;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.filter-section__body .form-control {
  padding: 6px 9px;
  font-size: 12px;
  min-height: 30px;
}
.filter-section__body .form-control:focus,
.filter-actions .filter-limit-input:focus {
  background: #fff;
  border-color: var(--ev-secondary);
  box-shadow: 0 0 0 3px rgba(var(--ev-primary-rgb), .12);
  outline: none;
}

/* --- En-tête de la carte liste (bouton Ajouter + menu) --- */
.col--cards > .card { padding: 14px 16px; }
.col--cards > .card > .card-header { margin-bottom: 14px; }

.btn-add {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 10px;
  padding: 9px 16px;
  font-weight: 600;
  box-shadow: 0 6px 14px -6px rgba(var(--ev-primary-rgb), .55);
}
.btn-add .material-symbols-outlined { font-size: 19px; }

.card-header__right .btn-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  color: var(--ev-body-color);
  transition: background .15s ease, color .15s ease;
}
.card-header__right .btn-more:hover {
  background: rgba(var(--ev-primary-rgb), .08);
  color: var(--ev-primary);
}

/* --- Titre de page --- */
.page-heading .page-title {
  font-weight: 700;
  letter-spacing: -.01em;
}

/* --- Thème sombre --- */
[data-theme="dark"] .col--cards > .card,
[data-theme="dark"] .card--filters { border-color: #2f3336; }
[data-theme="dark"] .filter-section { background: transparent; }
[data-theme="dark"] .filter-section__header { background: rgba(255, 255, 255, .05); }
[data-theme="dark"] .filter-section__body .form-control,
[data-theme="dark"] .filter-actions .filter-limit-input {
  background: #20242a;
  border-color: transparent;
  color: #e7e9ea;
}
[data-theme="dark"] .filter-section__body .form-control:focus,
[data-theme="dark"] .filter-actions .filter-limit-input:focus { background: #16181c; }

/* =====================================================
   CONTACT LISTE — variante "société" + boutons
   ===================================================== */

/* Carte société : même violet que les personnes (fond blanc géré plus bas). */
.card--contact.card--societe {
  --cc-accent: #7048e8;
  --cc-accent-rgb: 112, 72, 232;
}
.card--contact.card--societe .card-contact__head {
  background: linear-gradient(180deg, rgba(var(--cc-accent-rgb), .09), rgba(var(--cc-accent-rgb), 0));
}

.card--societe .card-contact__org .material-symbols-outlined { color: rgba(var(--cc-accent-rgb), .85); }

/* --- Boutons : finition générale --- */
.btn-add,
.filter-actions .btn-filter-apply {
  border: none;
  transition: transform .12s ease, box-shadow .15s ease, background .15s ease;
}
.btn-add:hover,
.filter-actions .btn-filter-apply:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px -8px rgba(var(--ev-primary-rgb), .6);
}
.btn-add:active,
.filter-actions .btn-filter-apply:active {
  transform: translateY(0);
  box-shadow: 0 3px 8px -4px rgba(var(--ev-primary-rgb), .6);
}

/* Bouton "Rechercher" : icône + texte alignés, plein accent */
.filter-actions .btn-filter-apply {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--ev-primary);
  color: #fff;
  box-shadow: 0 5px 12px -6px rgba(var(--ev-primary-rgb), .6);
}

/* Boutons fantômes (déplier/replier, mobile) : ronds et discrets */
.filter-actions .btn-toggle-all,
.btn-filter-mobile-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid transparent;
  background: rgba(var(--ev-primary-rgb), .07);
  color: var(--ev-secondary);
  transition: background .15s ease, color .15s ease;
}
.filter-actions .btn-toggle-all:hover,
.btn-filter-mobile-toggle:hover {
  background: rgba(var(--ev-primary-rgb), .14);
  color: var(--ev-primary);
}

/* Champ "limite" : aligné avec les boutons */
.filter-actions .filter-limit-input {
  height: 30px;
  border: 1px solid transparent;
  background: #eef0f4;
  font-weight: 600;
  color: var(--ev-heading-color);
}

[data-theme="dark"] .filter-actions .btn-toggle-all,
[data-theme="dark"] .btn-filter-mobile-toggle { background: rgba(255, 255, 255, .07); color: #cfd4da; }
[data-theme="dark"] .filter-actions .filter-limit-input { background: #20242a; color: #e7e9ea; }

/* =====================================================
   CONTACT LISTE — couleur du "contact principal"
   (indépendante de la carte : selon le type du parent)
   ===================================================== */

/* Parent société : même teinte que personne, mais plus foncée */
.card-contact__parent--societe {
  --cc-accent: var(--ev-societe);
  --cc-accent-rgb: var(--ev-societe-rgb);
}

/* Parent personne : couleur personne (selon thème) */
.card-contact__parent--personne {
  --cc-accent: var(--ev-primary);
  --cc-accent-rgb: var(--ev-primary-rgb);
}
[data-theme="navy"] .card-contact__parent--personne {
  --cc-accent: var(--ev-secondary);
  --cc-accent-rgb: 88, 39, 88;
}
[data-theme="dark"] .card-contact__parent--personne {
  --cc-accent: #1d9bf0;
  --cc-accent-rgb: 29, 155, 240;
}

/* Seconde ligne : nom du représentant */
.card-contact__parent-sub {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ev-body-color);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.card-contact__parent-sub .material-symbols-outlined {
  font-size: 13px;
  flex: 0 0 auto;
  color: rgba(var(--cc-accent-rgb), .7);
}
[data-theme="dark"] .card-contact__parent-sub { color: #aeb6bf; }

/* =====================================================
   SKIN TABLER — police Inter + aplatissement global
   (rayons, ombres, avatars) façon tabler.io
   ===================================================== */

body,
input, select, textarea, button,
.btn, .form-control, .page, .card {
  font-family: var(--ev-font-sans);
}

/* Conteneurs : rayon Tabler + ombre neutre très douce */
.col--cards > .card,
.card--filters,
.card--contact {
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

.card--contact:hover {
  transform: translateY(-2px);
  border-color: #d4dae3;
  box-shadow: 0 6px 16px -8px rgba(15, 23, 42, .22);
}

/* En-tête de filtres : rayon aligné */
.objet-filters .filter-actions { border-radius: 10px 10px 0 0; }

/* (Avatar contact : voir la définition unique .card-contact__avatar plus haut.) */

/* Boutons : rayons Tabler, sans ombre colorée excessive */
.btn-add {
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .12);
}
.btn-add:hover,
.filter-actions .btn-filter-apply:hover {
  box-shadow: 0 4px 10px -4px rgba(var(--ev-primary-rgb), .5);
}
.card-header__right .btn-more { border-radius: 8px; }
.filter-actions .btn-filter-apply { border-radius: 6px; box-shadow: none; }
.filter-section__body .form-control,
.filter-actions .filter-limit-input { border-radius: 6px; }
.filter-section,
.filter-section__header,
.filter-section__header[aria-expanded="true"] { border-radius: 8px; }

/* =====================================================
   SKIN TABLER — composants transverses (boutons, champs,
   badges, tables, onglets, dropdowns, modales)
   ===================================================== */

/* ---- Boutons ---- */
.btn {
  border-radius: 6px;
  font-weight: 500;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.btn-primary {
  background-color: var(--ev-primary);
  border-color: var(--ev-primary);
  color: #fff;
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: color-mix(in srgb, var(--ev-primary) 88%, #000);
  border-color: color-mix(in srgb, var(--ev-primary) 88%, #000);
  color: #fff;
}
.btn-secondary {
  background-color: #f1f3f5;
  border-color: #e5e7eb;
  color: #4b5563;
}
.btn-secondary:hover { background-color: #e9ecef; border-color: #dfe3e8; color: #1f2937; }
.btn-outline-secondary {
  border-color: #e1e5ea;
  color: #5b6573;
  background: #fff;
}
.btn-outline-secondary:hover {
  background: #f1f3f5;
  border-color: #d4dae3;
  color: var(--ev-primary);
}
.btn-success { background-color: var(--ev-success); border-color: var(--ev-success); color:#fff; }
.btn-success:hover { background-color: color-mix(in srgb, var(--ev-success) 88%, #000); border-color: color-mix(in srgb, var(--ev-success) 88%, #000); color:#fff; }
.btn-danger  { background-color: var(--ev-danger);  border-color: var(--ev-danger); color:#fff; }
.btn-danger:hover { background-color: color-mix(in srgb, var(--ev-danger) 88%, #000); border-color: color-mix(in srgb, var(--ev-danger) 88%, #000); color:#fff; }
.btn-warning { background-color: var(--ev-warning); border-color: var(--ev-warning); color:#fff; }
.btn-info    { background-color: var(--ev-info);    border-color: var(--ev-info); color:#fff; }
.btn:focus-visible { box-shadow: 0 0 0 .2rem rgba(var(--ev-primary-rgb), .25); }

/* ---- Champs de formulaire (global) ---- */
.form-control,
.form-select,
.custom-select,
textarea.form-control {
  border-radius: 6px;
  border-color: var(--ev-input-border-color);
  color: var(--ev-heading-color);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus,
.form-select:focus,
.custom-select:focus {
  border-color: var(--ev-primary);
  box-shadow: 0 0 0 .2rem rgba(var(--ev-primary-rgb), .15);
}
.form-control::placeholder { color: #9aa3af; }
.form-label,
label.form-label { color: var(--ev-body-color); font-weight: 500; }

/* Select2 / bootstrap-select : hauteur + rayon alignés */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple,
.bootstrap-select > .dropdown-toggle.btn-light,
.bootstrap-select > .dropdown-toggle.bs-placeholder {
  border-radius: 6px !important;
  border-color: var(--ev-input-border-color) !important;
}
.select2-container--default.select2-container--focus .select2-selection,
.select2-container--default .select2-selection--single:focus {
  border-color: var(--ev-primary) !important;
  box-shadow: 0 0 0 .2rem rgba(var(--ev-primary-rgb), .15);
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--selected {
  background-color: var(--ev-primary) !important;
}

/* ---- Badges / labels ---- */
.badge {
  border-radius: 999px;
  font-weight: 600;
  padding: .32em .7em;
  letter-spacing: .01em;
}
.badge.bg-primary,
.badge.badge-primary { background-color: var(--ev-primary) !important; }
.badge.bg-success, .badge.badge-success { background-color: var(--ev-success) !important; }
.badge.bg-danger,  .badge.badge-danger  { background-color: var(--ev-danger)  !important; }
.badge.bg-warning, .badge.badge-warning { background-color: var(--ev-warning) !important; color:#fff !important; }
.badge.bg-info,    .badge.badge-info    { background-color: var(--ev-info)    !important; color:#fff !important; }
/* variantes "soft" façon Tabler */
.badge--soft-success { background: var(--ev-success-light); color: var(--ev-success); }
.badge--soft-danger  { background: var(--ev-danger-light);  color: var(--ev-danger); }
.badge--soft-warning { background: var(--ev-warning-light); color: var(--ev-warning); }
.badge--soft-info    { background: var(--ev-info-light);    color: var(--ev-info); }
/* pastille de statut */
.status-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: currentColor; margin-right: 6px; vertical-align: middle;
}

/* ---- Tables ---- */
.table {
  --bs-table-hover-bg: rgba(var(--ev-primary-rgb), .04);
  color: var(--ev-heading-color);
}
.table > thead th,
.table thead th {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: #97a0ab;
  border-bottom: 1px solid var(--ev-border-color);
  background: transparent;
}
.table td, .table th { border-color: var(--ev-border-color); }
.table-hover > tbody > tr:hover > * { background: rgba(var(--ev-primary-rgb), .04); }

/* ---- Onglets ---- */
.nav-tabs .nav-link.active,
.customtab li a.nav-link.active,
.profile-tab li a.nav-link.active {
  color: var(--ev-primary);
  border-color: var(--ev-primary);
}
.nav-tabs .nav-link.active { border-bottom: 2px solid var(--ev-primary); }

/* ---- Dropdowns ---- */
.dropdown-menu {
  border-radius: 8px;
  border: 1px solid var(--ev-border-color);
  box-shadow: 0 6px 24px -8px rgba(15, 23, 42, .18);
  padding: 6px;
}
.dropdown-item { border-radius: 6px; padding: 7px 10px; font-size: 13px; }
.dropdown-item:hover, .dropdown-item:focus { background: rgba(var(--ev-primary-rgb), .08); color: var(--ev-primary); }
.dropdown-item.active, .dropdown-item:active { background: var(--ev-primary); color:#fff; }

/* ---- Modales ---- */
.modal-content {
  border-radius: 12px;
  border: none;
  box-shadow: 0 20px 60px -20px rgba(15, 23, 42, .4);
}
.modal-header, .modal-footer { border-color: var(--ev-border-color); }

/* ---- Pagination ---- */
.pagination .page-link { color: var(--ev-primary); border-color: var(--ev-border-color); }
.pagination .page-item.active .page-link { background: var(--ev-primary); border-color: var(--ev-primary); }

/* ---- Thème sombre : ajustements ---- */
[data-theme="dark"] .btn-secondary { background:#20242a; border-color:#2f3336; color:#cfd4da; }
[data-theme="dark"] .btn-outline-secondary { background:transparent; border-color:#2f3336; color:#cfd4da; }
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select { background:#16181c; color:#e7e9ea; }
[data-theme="dark"] .dropdown-menu { background:#16181c; border-color:#2f3336; }
[data-theme="dark"] .modal-content { background:#16181c; }
[data-theme="dark"] .table { color:#e7e9ea; }

/* =====================================================
   SKIN TABLER — topbar (finitions) + breadcrumb
   ===================================================== */

/* Topbar : avatar initiales sur l'accent, ombre douce sous la barre */
.topbar {
  box-shadow: 0 1px 2px rgba(15, 23, 42, .03) !important;
}
.topbar__profile-initials {
  background-color: var(--ev-primary);
  box-shadow: 0 0 0 2px var(--ev-body-bg), 0 0 0 3px rgba(var(--ev-primary-rgb), .25);
}

/* Breadcrumb façon Tabler : séparateur chevron, couleurs douces */
.page-heading .breadcrumb { gap: 2px; align-items: center; }
.breadcrumb-item { font-size: 12.5px; color: var(--ev-body-color); }
.breadcrumb-item + .breadcrumb-item::before {
  content: "›";
  color: #c2c8d0;
  padding: 0 6px 0 4px;
}
.breadcrumb-item a { color: var(--ev-body-color); font-weight: 500; text-decoration: none; }
.breadcrumb-item a:hover { color: var(--ev-primary); }
.breadcrumb-item.active { color: var(--ev-heading-color); font-weight: 600; }

[data-theme="dark"] .topbar__profile-initials {
  box-shadow: 0 0 0 2px #16181c, 0 0 0 3px rgba(var(--ev-primary-rgb), .35);
}

/* =====================================================
   SKIN TABLER — cartes objet (liste) aplaties & cohérentes
   ===================================================== */
.card--objet {
  border-radius: 10px;
  border: 1px solid #e7e9ef;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card--objet:hover {
  transform: translateY(-2px);
  border-color: #d4dae3;
  box-shadow: 0 6px 16px -8px rgba(15, 23, 42, .22);
}
.card--objet > .card-body { padding: 0; display: block; }
.card--objet .card-thead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: linear-gradient(180deg, rgba(var(--ev-primary-rgb), .05), rgba(var(--ev-primary-rgb), 0));
  border-bottom: 1px solid var(--ev-border-color);
}
.card--objet .card-thead-title {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 700; font-size: 13px; color: var(--ev-heading-color);
}
.card--objet .card-thead-title .material-symbols-outlined { font-size: 17px; color: var(--ev-primary); }
.card--objet .card-thead-actions { display: flex; gap: 4px; }
.card--objet .btn-icon {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 7px;
  background: rgba(var(--ev-primary-rgb), .08);
  color: var(--ev-primary);
  border: none;
  transition: background .15s ease;
}
.card--objet .btn-icon:hover { background: rgba(var(--ev-primary-rgb), .16); }
.card--objet .btn-icon .material-symbols-outlined { font-size: 17px; }
.card--objet .card-tbody { padding: 6px 14px 12px; display: block; }
/* lignes de données épurées (mêmes codes que les cartes contact) */
.card--objet .table-responsive { font-size: 13px; }
.card--objet .table-responsive table { width: 100%; }
.card--objet .table-responsive tr {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 7px 0; border-bottom: 1px solid #eef0f4;
}
.card--objet .table-responsive tr:last-child { border-bottom: none; }
.card--objet .table-responsive td { border: none; padding: 0; }
.card--objet .table-responsive td.dots { display: none; }
.card--objet .table-responsive td.text-end { text-align: right; }
.card--objet .data-card-label {
  font-size: 11px; font-weight: 600; letter-spacing: .02em;
  text-transform: uppercase; color: #97a0ab;
}
.card--objet .text-end .label.label-table { font-size: 12.5px; font-weight: 600; color: var(--ev-heading-color); }
.card--objet .text-end .label-table.no-shadow { padding: 0; background: none !important; }
.card--objet .text-end .label.label-table:not(.no-shadow) {
  display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11.5px;
}
[data-theme="dark"] .card--objet { background: #16181c; border-color: #2f3336; }
[data-theme="dark"] .card--objet .text-end .label.label-table { color: #e7e9ea; }

/* =====================================================
   TABLER — Harmonisation des plugins tiers
   (select2, DataTables, SweetAlert2, daterangepicker,
    bootstrap-select, dropify/dropzone, x-editable, tinymce, toast)
   ===================================================== */

/* ---- Select2 ---- */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  border: 1px solid var(--ev-input-border-color) !important;
  border-radius: 6px !important;
  min-height: 38px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 36px; color: var(--ev-heading-color); }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 36px; }
.select2-container--default.select2-container--focus .select2-selection,
.select2-container--default.select2-container--open .select2-selection {
  border-color: var(--ev-primary) !important;
  box-shadow: 0 0 0 .2rem rgba(var(--ev-primary-rgb), .15);
}
.select2-dropdown { border-color: var(--ev-input-border-color); border-radius: 8px; box-shadow: 0 6px 24px -8px rgba(15,23,42,.18); }
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--selected { background-color: var(--ev-primary) !important; }
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background: rgba(var(--ev-primary-rgb), .1); border: none; color: var(--ev-primary);
  border-radius: 999px; padding: 2px 10px;
}
.select2-search--dropdown .select2-search__field { border-radius: 6px; border-color: var(--ev-input-border-color); }

/* ---- DataTables ---- */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  border: 1px solid var(--ev-input-border-color); border-radius: 6px; padding: 5px 10px;
}
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
  border-color: var(--ev-primary); box-shadow: 0 0 0 .2rem rgba(var(--ev-primary-rgb), .15); outline: none;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: 6px !important; border: 1px solid transparent !important; padding: 4px 10px !important;
  color: var(--ev-body-color) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--ev-primary) !important; border-color: var(--ev-primary) !important; color: #fff !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: rgba(var(--ev-primary-rgb), .08) !important; color: var(--ev-primary) !important;
}
.dataTables_wrapper .dataTables_info { color: var(--ev-body-color); font-size: 13px; }

/* ---- SweetAlert2 ---- */
.swal2-popup { border-radius: 14px; font-family: var(--ev-font-sans); }
.swal2-title { color: var(--ev-heading-color); font-weight: 700; }
.swal2-html-container { color: var(--ev-body-color); }
.swal2-actions .swal2-styled { border-radius: 6px; font-weight: 500; box-shadow: none !important; }
.swal2-actions .swal2-confirm { background: var(--ev-primary) !important; }
.swal2-actions .swal2-cancel { background: #f1f3f5 !important; color: #4b5563 !important; }
.swal2-icon.swal2-success { color: var(--ev-success); border-color: var(--ev-success); }
.swal2-icon.swal2-error { color: var(--ev-danger); border-color: var(--ev-danger); }
.swal2-icon.swal2-warning { color: var(--ev-warning); border-color: var(--ev-warning); }

/* ---- daterangepicker ---- */
.daterangepicker { border-color: var(--ev-border-color); border-radius: 8px; box-shadow: 0 8px 30px -10px rgba(15,23,42,.25); font-family: var(--ev-font-sans); }
.daterangepicker td.active, .daterangepicker td.active:hover { background: var(--ev-primary); }
.daterangepicker td.in-range { background: rgba(var(--ev-primary-rgb), .1); color: var(--ev-heading-color); }
.daterangepicker .btn-primary { background: var(--ev-primary); border-color: var(--ev-primary); }

/* ---- bootstrap-select ---- */
.bootstrap-select > .dropdown-toggle {
  border: 1px solid var(--ev-input-border-color) !important; border-radius: 6px !important;
  background: #fff !important; color: var(--ev-heading-color) !important; box-shadow: none !important;
}
.bootstrap-select > .dropdown-toggle:focus { border-color: var(--ev-primary) !important; box-shadow: 0 0 0 .2rem rgba(var(--ev-primary-rgb), .15) !important; }
.bootstrap-select .dropdown-menu { border-radius: 8px; }

/* ---- Dropify / Dropzone (upload) ---- */
.dropify-wrapper, .dropzone {
  border: 2px dashed var(--ev-input-border-color); border-radius: 8px; background: #fafbfc;
}
.dropify-wrapper:hover, .dropzone:hover { border-color: var(--ev-primary); }

/* ---- x-editable (édition inline) ---- */
.editable-input .form-control { border-radius: 6px; }
.editable-buttons .btn { border-radius: 6px; }
.editable-click, a.editable-click { color: var(--ev-primary); border-bottom: 1px dashed rgba(var(--ev-primary-rgb), .5); }

/* ---- jquery.toast ---- */
.jq-toast-single { border-radius: 8px; font-family: var(--ev-font-sans); padding: 12px 16px; box-shadow: 0 8px 24px -10px rgba(15,23,42,.3); }

/* ---- Thème sombre : plugins ---- */
[data-theme="dark"] .select2-container--default .select2-selection--single,
[data-theme="dark"] .select2-container--default .select2-selection--multiple,
[data-theme="dark"] .bootstrap-select > .dropdown-toggle { background:#16181c !important; border-color:#2f3336 !important; color:#e7e9ea !important; }
[data-theme="dark"] .select2-dropdown { background:#16181c; border-color:#2f3336; }
[data-theme="dark"] .swal2-popup { background:#16181c; }
[data-theme="dark"] .dropify-wrapper, [data-theme="dark"] .dropzone { background:#1b1e23; border-color:#2f3336; }

/* Retouches dark plugins */
[data-theme="dark"] .dataTables_wrapper .dataTables_filter input,
[data-theme="dark"] .dataTables_wrapper .dataTables_length select { background:#16181c; border-color:#2f3336; color:#e7e9ea; }
[data-theme="dark"] .swal2-actions .swal2-cancel { background:#20242a !important; color:#cfd4da !important; }
[data-theme="dark"] .swal2-html-container { color:#aeb6bf; }

/* =====================================================
   TABLER — .datagrid dans les cartes liste (contact/objet)
   ===================================================== */
.card-contact__body .datagrid,
.card--objet .card-tbody .datagrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
  margin: 0;
}
.card-contact__body .datagrid-title,
.card--objet .datagrid-title { font-size: 11px; text-transform: uppercase; letter-spacing: .02em; }
.card-contact__body .datagrid-content,
.card--objet .datagrid-content { font-size: 13px; font-weight: 600; color: var(--ev-heading-color); }
.card-contact__body .datagrid-content .badge,
.card--objet .datagrid-content .badge { font-weight: 600; }
/* carte étroite : 1 colonne */
@media (max-width: 480px) {
  .card-contact__body .datagrid,
  .card--objet .card-tbody .datagrid { grid-template-columns: 1fr; }
}

/* =====================================================
   CARTES LISTE — markup Tabler natif (avatar/datagrid/card-footer)
   Remplace l'ancienne structure custom (card-contact__head/__toolbar…)
   ===================================================== */

/* Réinitialise les anciens overrides de structure pour le nouveau markup */
.card--contact > .card-body,
.card--objet > .card-body {
  display: block;
  height: auto;
  padding: 1rem;
}
.card--contact, .card--objet { display: flex; flex-direction: column; }
.card--contact > .card-footer, .card--objet > .card-footer { margin-top: auto; }

/* Avatar = accent du token (société/personne/objet, theme-aware) */
.card--contact .avatar,
.card--objet .avatar {
  background: var(--cc-accent, var(--ev-primary));
  color: #fff;
  font-weight: 700;
}
.card--objet .avatar { --cc-accent: var(--ev-primary); }
.card--objet .avatar { --cc-accent-rgb: var(--ev-primary-rgb); }
.card--contact .avatar .material-symbols-outlined,
.card--objet .avatar .material-symbols-outlined { font-size: 22px; }

/* Nom : couleur de titre, lien discret */
.card--contact .card-body .fw-bold.text-reset { color: var(--ev-heading-color); }
.card--contact .card-body a.text-reset:hover { color: var(--cc-accent); }

/* Badge de type (société/particulier) en accent doux */
.card-type-badge {
  background: rgba(var(--cc-accent-rgb, var(--ev-primary-rgb)), .12);
  color: var(--cc-accent, var(--ev-primary));
  font-weight: 600;
  flex: 0 0 auto;
}

/* Datagrid dans les cartes (contact + objet) : 2 colonnes compactes */
.card--contact .datagrid,
.card--objet .datagrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
  margin: 0;
}
.card--contact .datagrid-title,
.card--objet .datagrid-title { font-size: 11.5px; letter-spacing: 0; }
.card--contact .datagrid-content,
.card--objet .datagrid-content { font-size: 11.5px; font-weight: 500; color: var(--ev-heading-color); }
@media (max-width: 480px) {
  .card--contact .datagrid, .card--objet .datagrid { grid-template-columns: 1fr; }
}

/* Boutons d'action du card-footer (Tabler .card-btn) */
.card--contact .card-btn,
.card--objet .card-btn {
  color: var(--ev-body-color);
  padding: 10px 0;
}
.card--contact .card-btn:hover,
.card--objet .card-btn:hover {
  background: rgba(var(--cc-accent-rgb, var(--ev-primary-rgb)), .08);
  color: var(--cc-accent, var(--ev-primary));
}
.card--contact .card-btn .material-symbols-outlined,
.card--objet .card-btn .material-symbols-outlined { font-size: 20px; }

/* Carte du contact principal : marge dans le nouveau flux */
.card--contact .card-contact__parent { margin-bottom: 0; }

/* =====================================================
   CARTES LISTE — raffinement densité + boutons (Tabler)
   ===================================================== */
/* Densité réduite */
.card--contact > .card-body,
.card--objet > .card-body { padding: .75rem .875rem; }
.card--contact .card-contact__body,
.card--objet .card--objet__body { margin-top: .55rem !important; }
.card--contact .card-contact__parent { margin-top: .55rem !important; padding: 7px 9px; }

/* Datagrid plus serré */
.card--contact .datagrid,
.card--objet .datagrid { gap: 7px 14px; }
.card--contact .datagrid-title,
.card--objet .datagrid-title { margin-bottom: 1px; }

/* En-tête : avatar un peu plus compact */
.card--contact .avatar.avatar-md,
.card--objet .avatar.avatar-md { width: 2.25rem; height: 2.25rem; font-size: .8rem; }
.card--contact .avatar .material-symbols-outlined,
.card--objet .avatar .material-symbols-outlined { font-size: 20px; }
.card-type-badge { font-size: 10px; padding: 3px 7px; }

/* Footer d'actions raffiné : petits boutons fantômes alignés à droite */
.card--contact > .card-footer,
.card--objet > .card-footer { padding: 5px 7px; border-top: 1px solid var(--ev-border-color); background: transparent; }
.card--contact .card-contact__actions,
.card--objet .card--objet__actions {
  display: flex !important;
  justify-content: flex-end;
  align-items: center;
  gap: 2px;
  margin: 0;
}
.card--contact .card-btn,
.card--objet .card-btn {
  flex: 0 0 auto !important;
  width: 30px; height: 30px;
  min-height: 0;
  padding: 0 !important;
  display: inline-flex; align-items: center; justify-content: center;
  border: none !important;
  border-radius: 7px;
  color: #8a93a0;
  transition: background .15s ease, color .15s ease;
}
.card--contact .card-btn:hover,
.card--objet .card-btn:hover {
  background: rgba(var(--cc-accent-rgb, var(--ev-primary-rgb)), .1);
  color: var(--cc-accent, var(--ev-primary));
}
.card--contact .card-btn .material-symbols-outlined,
.card--objet .card-btn .material-symbols-outlined { font-size: 18px; }
[data-theme="dark"] .card--contact .card-btn,
[data-theme="dark"] .card--objet .card-btn { color: #8b949e; }

/* =====================================================
   CARTE CONTACT — avatar icône + actions étiquetées
   ===================================================== */
/* Avatar : icône centrée (contact / entreprise) */
.card--contact .avatar .material-symbols-outlined { font-size: 21px; line-height: 1; }

/* Footer : boutons Fiche / Popin / Tél / Mail clairement cliquables */
.card--contact > .card-footer { padding: 8px 9px; }
.card--contact .card-contact__actions {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  margin: 0;
}
.card--contact .card-btn {
  flex: 0 0 auto !important;
  width: auto !important;
  height: auto !important;
  min-height: 0;
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  padding: 6px 11px !important;
  border: 1px solid var(--ev-border-color) !important;
  border-radius: 8px;
  background: #fff;
  color: var(--ev-body-color);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.card--contact .card-btn:hover {
  border-color: rgba(var(--cc-accent-rgb, var(--ev-primary-rgb)), .45) !important;
  background: rgba(var(--cc-accent-rgb, var(--ev-primary-rgb)), .08);
  color: var(--cc-accent, var(--ev-primary));
}
.card--contact .card-btn .material-symbols-outlined { font-size: 17px; }
.card-btn__label { font-size: 12px; white-space: nowrap; }
[data-theme="dark"] .card--contact .card-btn { background: #16181c; border-color: #2f3336 !important; color: #cfd4da; }

/* =====================================================
   CARTE CONTACT — version épurée (Tabler) : moins de bordures/lignes
   ===================================================== */
/* Footer sans séparateur, actions ghost sans bordure */
.card--contact > .card-footer {
  border-top: none !important;
  background: transparent;
  padding: 0 7px 9px;
}
.card--contact .card-btn {
  border: none !important;
  background: transparent !important;
  padding: 5px 8px !important;
  border-radius: 7px;
  color: #8a93a0;
  font-weight: 600;
}
.card--contact .card-btn:hover {
  background: rgba(var(--cc-accent-rgb, var(--ev-primary-rgb)), .09) !important;
  color: var(--cc-accent, var(--ev-primary)) !important;
}
[data-theme="dark"] .card--contact .card-btn { background: transparent !important; border: none !important; color: #8b949e; }

/* Carte "contact principal" allégée : pas de bordure, fond très léger */
.card--contact .card-contact__parent {
  border: none !important;
  background: rgba(var(--cc-accent-rgb, var(--ev-primary-rgb)), .06);
}

/* Datagrid : aucune ligne, juste de l'espace (déjà natif Tabler) */
.card--contact .datagrid-item { border: none; }

/* =====================================================
   CARTES — données sur 1 ligne (attribut gauche / valeur droite)
   + boutons responsives (container query sur la carte)
   ===================================================== */
.card--contact .datagrid,
.card--objet .datagrid {
  grid-template-columns: 1fr !important;
  gap: 0 !important;
}
.card--contact .datagrid-item,
.card--objet .datagrid-item {
  display: flex !important;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
  border: none;
}
.card--contact .datagrid-title,
.card--objet .datagrid-title {
  margin: 0;
  flex: 0 0 auto;
  white-space: nowrap;
  letter-spacing: .02em;
}
.card--contact .datagrid-content,
.card--objet .datagrid-content {
  text-align: right;
  min-width: 0;
  word-break: break-word;
}

/* La carte devient un conteneur de requête → les boutons s'adaptent à SA largeur */
.card--contact, .card--objet { container-type: inline-size; }
.card--contact .card-contact__actions,
.card--objet .card--objet__actions { flex-wrap: wrap; }

@container (max-width: 320px) {
  .card--contact .card-btn__label,
  .card--objet .card-btn__label { display: none; }
  .card--contact .card-btn,
  .card--objet .card-btn { padding: 6px 7px !important; }
}
/* Repli viewport (navigateurs sans container queries) */
@media (max-width: 420px) {
  .card--contact .card-btn__label,
  .card--objet .card-btn__label { display: none; }
}

/* -------------------------------------------------------------------------
   Utilitaires de visibilité responsive (Bootstrap 3 « hidden-*-up/down »).
   Ces classes sont utilisées dans les vues (onglets des fiches, togglers du
   topbar : un span « mobile » icône seule + un span « desktop » icône+label,
   ou deux togglers menu/menu_open). Tabler (Bootstrap 5) ne les définit plus,
   donc après la migration les DEUX variantes s'affichaient simultanément =>
   icônes en double sur toutes les vues. On restaure ici le comportement
   d'origine (cf. assets/scss/grid.scss, non compilé/chargé).
   ------------------------------------------------------------------------- */
.hidden-xs-up { display: none !important; }

@media (max-width: 575.98px) {
  .hidden-xs-down { display: none !important; }
}

@media (min-width: 576px) {
  .hidden-sm-up { display: none !important; }
}

@media (max-width: 767.98px) {
  .hidden-sm-down { display: none !important; }
}

@media (min-width: 768px) {
  .hidden-md-up { display: none !important; }
}

@media (max-width: 991.98px) {
  .hidden-md-down { display: none !important; }
}

@media (min-width: 992px) {
  .hidden-lg-up { display: none !important; }
}

@media (max-width: 1199.98px) {
  .hidden-lg-down { display: none !important; }
}

@media (min-width: 1200px) {
  .hidden-xl-up { display: none !important; }
}

.hidden-xl-down { display: none !important; }

/* =====================================================
   CARTES LISTE (contact + objet) — design unifié « variante 39 » :
   • liseré décoratif coloré à DROITE (bleu société / violet personne / vert objet)
   • en-tête identité : dégradé vertical, AUCUN séparateur avec le contenu
   • avatar rond, couleur pleine + halo autour de l'icône
   • pied : barre flottante de boutons (Fiche / Popin / Tél / Email)
   ===================================================== */

/* 0) Couleur d'accent (indépendante du thème) :
      contact (société ET personne) = violet ; objet = vert */
.card--contact.card--societe  { --cc-accent: #7048e8; --cc-accent-rgb: 112, 72, 232; }
.card--contact.card--personne { --cc-accent: #7048e8; --cc-accent-rgb: 112, 72, 232; }
.card--objet                  { --cc-accent: var(--dom, #6d28d9); --cc-accent-rgb: 109, 40, 217; }

/* 1) Coque : fond uni + liseré décoratif à droite
   !important : sinon les thèmes navy/dark ([data-theme] .card--contact, spécificité 0,2,0)
   repassent la couleur du bord en gris via `border-color`. */
.card--contact.card--societe { background: var(--cc-surface); }
/* Refonte 2026-07-18 : plus d'accent de carte (rail gauche 4px) → bordure neutre. */
.card--contact-flat,
.card--objet {
  border-right: none;
  border-left: 1px solid var(--ev-border-color) !important;
}
.card--objet {
  border-top: 1px solid var(--cc-line, #e7e9ef);
  border-bottom: 1px solid var(--cc-line, #e7e9ef);
  border-radius: 10px;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card--objet:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--cc-accent-rgb), .35);
  box-shadow: 0 16px 30px -16px rgba(var(--cc-accent-rgb), .45);
}

/* 2) En-tête identité : encadré dégradé INSET, entouré de blanc (comme les objets) */
.card--contact-flat .card-contact__head,
.card--contact-flat.card--societe .card-contact__head,
.card--objet .card-objet__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 12px 0;
  padding: 12px 14px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(var(--cc-accent-rgb), .16), rgba(var(--cc-accent-rgb), 0));
}

/* Objet (liste) — suppression du padding ET des marges (carte + en-tête) — réglage user.
   L'en-tête garde son padding interne pour que le halo de l'avatar ne soit pas
   rogné par overflow:hidden (rendu identique aux cartes contact). */
.card--objet > .card-body { padding: 0; }
.card--objet .card-objet__head { padding: 12px 14px; margin: 0; }
.card--objet .card--objet__body { margin-top: 0 !important; }

/* 3) Avatar OBJET : CARRÉ vert plein + halo (idem contact). */
.card--objet .card-objet__avatar {
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  line-height: 1;
  border-radius: 14px;
  background: var(--cc-accent);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(var(--cc-accent-rgb), .16);
}
/* grosse icône qui remplit le carré (objet uniquement — le contact a sa source unique). */
.card--objet .card-objet__avatar .material-symbols-outlined { font-size: 52px; }

/* Pas de padding blanc autour de l'en-tête : strip pleine largeur, flush au bord.
   Le sélecteur société (0,3,0) doit être explicite, sinon le bloc en-tête plus
   spécifique réimpose sa marge de 12px. */
.card--contact-flat .card-contact__head,
.card--contact-flat.card--societe .card-contact__head {
  margin: 0;
  border-radius: 0;
}

/* 3b) Objet : identité (mêmes styles que le contact) */
.card--objet .card-objet__identity { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.card--objet .card-objet__name {
  font-size: 13px; font-weight: 600; letter-spacing: 0; color: var(--ev-heading-color);
  text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.card--objet .card-objet__name:hover { color: var(--cc-accent); }
.card--objet .card-objet__sub { font-size: 12px; font-weight: 500; color: var(--ev-body-color); }

/* 3c) Corps objet : aligné sur le contact */
.card--objet .card--objet__body { flex: 1 1 auto; padding: 6px 14px 10px; }

/* 4) Pied : barre flottante de boutons (2 pour objet, jusqu'à 4 pour contact) */
.card--contact .card-contact__actions,
.card--objet .card-objet__actions {
  display: grid !important;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0;
  margin: auto 10px 12px;
  padding: 0;
  border: 1px solid var(--cc-line, #eef0f4);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 7px -3px rgba(16, 24, 40, .16);
}
.card--contact .card-contact__btn,
.card--objet .card-objet__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 56px;
  padding: 9px 4px;
  border: none;
  border-left: 1px solid var(--cc-line, #eef0f4);
  border-radius: 0;
  background: var(--cc-surface, #fff);
  color: var(--cc-accent);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.card--contact .card-contact__btn:first-child,
.card--objet .card-objet__btn:first-child { border-left: none; }
.card--contact .card-contact__btn .material-symbols-outlined,
.card--objet .card-objet__btn .material-symbols-outlined { font-size: 22px; }
.card--contact .card-contact__btn:hover,
.card--objet .card-objet__btn:hover { background: rgba(var(--cc-accent-rgb), .1); }
.card--contact .card-contact__btn:active,
.card--objet .card-objet__btn:active { background: rgba(var(--cc-accent-rgb), .18); }
.card--contact .card-contact__btn--disabled {
  opacity: .38;
  cursor: not-allowed;
  pointer-events: none;
}
.card-contact__btn-label,
.card-objet__btn-label { white-space: nowrap; }

/* 5) Données : attribut à gauche, valeur alignée à droite */
.card--contact .card-contact__body .datagrid-item,
.card--objet .card--objet__body .datagrid-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}
.card--contact .card-contact__body .datagrid-title,
.card--objet .card--objet__body .datagrid-title { flex: 0 0 auto; min-width: 74px; text-align: left; }
.card--contact .card-contact__body .datagrid-content,
.card--objet .card--objet__body .datagrid-content { flex: 1 1 auto; min-width: 0; text-align: left; }

/* 6) Contact principal : espace sous l'encadré (avant les boutons),
      aligné sur la barre de boutons, icône en cercle + halo */
.card--contact .card-contact__parent {
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 14px;
}
.card--contact .card-contact__parent-icon {
  border-radius: 50%;
  background: var(--cc-accent);
  box-shadow: 0 0 0 4px rgba(var(--cc-accent-rgb), .16);
}

[data-theme="dark"] .card--contact .card-contact__btn,
[data-theme="dark"] .card--objet .card-objet__btn { background: #16181c; }

/* =====================================================
   FILTRES — design « variante 12 » (labels flottants) aligné sur les cartes
   • accent par contexte : contact = violet ; objet = vert
   • dégradés très légers (barre + en-têtes de section)
   • champs en teinte d'accent très claire
   ===================================================== */

/* accent par contexte — REFONTE 2026-07 : aligné sur le langage refonte.
   L'accent des filtres suit la couleur du TYPE (--dom, posée sur la fiche) et
   retombe sur le VIOLET de base (#6d28d9) sur les pages liste (où --dom n'est
   pas défini). Plus de vert objet / orange ressource : cohérence avec le header
   sombre + carré d'icône violet. Tint (--fa-rgb) = violet de base. */
.filters-sidebar.filters--contact,
.filters-sidebar.filters--objet,
.filters-sidebar { --fa: var(--dom, #6d28d9); --fa-rgb: 109, 40, 217; }
/* Sur la FICHE CONTACT, les filtres d'objets (filters--objet, inclus via
   _objets_tab) reprennent le VIOLET du contact au lieu du vert objet : l'accent
   suit l'entité de la PAGE, comme les cartes (.card--objet) et le sous-en-tête
   (.objet-hd--objet). Tout le sidebar (bouton, icônes, champs, cases, labels)
   dérive de --fa/--fa-rgb → ces deux variables suffisent. Spécificité (0,3,0)
   > .filters-sidebar.filters--objet (0,2,0). */
[data-contact-id] .filters-sidebar.filters--objet { --fa: var(--dom, #6d28d9); --fa-rgb: 109, 40, 217; }

/* barre d'actions « Filtrer / Rechercher » : dégradé très léger */
.filters-sidebar .filter-actions {
  background: linear-gradient(180deg, rgba(var(--fa-rgb), .07), rgba(var(--fa-rgb), 0));
}
.filters-sidebar .filter-actions__label { color: var(--ev-heading-color); }
.filters-sidebar .btn-filter-apply {
  background: var(--fa) !important;
  border-color: var(--fa) !important;
  color: #fff !important;
  box-shadow: 0 5px 12px -6px rgba(var(--fa-rgb), .6);
}
.filters-sidebar .btn-filter-apply:hover { box-shadow: 0 10px 20px -8px rgba(var(--fa-rgb), .6); }

/* en-têtes de section : dégradé très léger + icône à l'accent */
.filters-sidebar .filter-section__header {
  background: linear-gradient(180deg, rgba(var(--fa-rgb), .06), rgba(var(--fa-rgb), 0));
}
.filters-sidebar .filter-section__header .material-symbols-outlined { color: var(--fa); }

/* champs : teinte d'accent très claire, focus blanc + anneau d'accent */
.filters-sidebar .form-control,
.filters-sidebar .edit-input {
  border: 1px solid rgba(var(--fa-rgb), .18);
  background-color: rgba(var(--fa-rgb), .05);
}
.filters-sidebar .form-control:focus,
.filters-sidebar .edit-input:focus {
  border-color: var(--fa);
  background-color: #fff;
  box-shadow: 0 0 0 3px rgba(var(--fa-rgb), .15);
}

/* labels flottants : le libellé chevauche le haut du champ */
.filters-sidebar .filter-section__body .form-group { position: relative; padding-top: 9px; }
.filters-sidebar .filter-section__body .form-group > .form-label {
  position: absolute;
  top: 0;
  left: 9px;
  margin: 0;
  padding: 0 5px;
  background: var(--cc-surface, #fff);
  font-size: 10px;
  font-weight: 600;
  color: var(--fa);
  z-index: 1;
}
/* date "Du / Au" : on garde les petits libellés sous le label flottant */
.filters-sidebar .filter-date-range { display: flex; gap: 8px; }
.filters-sidebar .filter-date-range__field { flex: 1; }

/* =====================================================
   OBJETS — même padding interne que les cartes CONTACT
   (corps + lignes de données identiques)
   ===================================================== */
.card--objet .card--objet__body { padding: 4px 14px 10px; }
/* (Les anciennes règles de lignes plates / paddings nuls sont remplacées par le
   bloc « REDESIGN VERRE / MINI-TUILES » en fin de fichier.) */

/* =====================================================
   OBJET LISTE — fond page vert dégradé (haut → transparent)
   identique aux en-têtes de cartes .card-objet__head
   ===================================================== */
body#app_objet_liste {
  background-color: #f9fafb;
  background-image: none; /* REFONTE : fond neutre (plus de lavis vert objet) */
}

/* LiveEdit — retour visuel discret de sauvegarde directe sur les champs */
.field-container.live-saving { position: relative; }
.field-container.live-saved { box-shadow: -3px 0 0 0 var(--ev-success); transition: box-shadow .2s ease; }
.field-container.live-failed { box-shadow: -3px 0 0 0 var(--ev-danger); }

/* ============================================================
   LiveEdit — bascule Lecture (cadenas) / LiveEdit (stylo), globale
   (le moteur bulk-edit existant est masqué et piloté par le toggle)
   ============================================================ */
.live-engines { display: none !important; }
.live-mode-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--ev-border-color);
  background: #fff;
  border-radius: 8px;
  color: var(--ev-primary);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.live-mode-btn:hover {
  background: var(--ev-primary-light);
  border-color: rgba(var(--ev-primary-rgb), .35);
  color: var(--ev-primary);
}
.live-mode-btn .material-symbols-outlined { font-size: 20px; }
.live-mode-btn.is-live {
  background: var(--ev-primary);
  border-color: var(--ev-primary);
  color: #fff;
}
.live-mode-btn.is-live:hover { background: var(--ev-primary); filter: brightness(1.06); }

/* =====================================================
   REDESIGN « VERRE / MINI-TUILES » — cartes contact & objet (& ressources).
   Choix design validé (maquette docs/ui/cartes-verre-boutons-pleine-largeur-20,
   variante #20). Placé en fin de fichier : dernière source = gagne les égalités
   de spécificité face aux couches historiques. Accent par contexte déjà défini
   (--cc-accent : violet contact / vert objet).
   ===================================================== */

/* 0) COULEUR PAR CONTEXTE (page/fiche), PAS par type de carte.
      Toute la zone contact (fiche contact via [data-contact-id], liste #contactCards)
      → violet pour TOUTES les cartes ; toute la zone objet (fiche objet
      [data-objet-id], liste objets #objetTable / body#app_objet_liste) → vert.
      Spécificité ≥ (0,2,0) → l'emporte sur les défauts .card--contact/.card--objet
      (qui restent comme repli hors contexte connu). */
[data-contact-id] .card--contact,
[data-contact-id] .card--objet,
#contactCards .card--contact,
#contactCards .card--objet {
  --cc-accent: #7048e8;
  --cc-accent-rgb: 112, 72, 232;
}
[data-objet-id] .card--contact,
[data-objet-id] .card--objet,
body#app_objet_liste .card--contact,
body#app_objet_liste .card--objet,
#objetTable .card--objet {
  /* REFONTE : cartes objet alignées sur le langage refonte (violet --dom),
     plus de vert d'entité. */
  --cc-accent: var(--dom, #6d28d9);
  --cc-accent-rgb: 109, 40, 217;
}
/* Ressource (objet dont le type a ressource=1) : REFONTE → violet --dom aussi
   (plus d'orange), pour cohérence avec le header sombre + carré d'icône violet. */
[data-objet-id] .card--objet.card--ressource,
body#app_objet_liste .card--objet.card--ressource,
#objetTable .card--objet.card--ressource,
.card--objet.card--ressource {
  --cc-accent: var(--dom, #6d28d9);
  --cc-accent-rgb: 109, 40, 217;
}
/* Page liste d'une RESSOURCE : le reste de la page en orange (fond + filtres),
   en surcharge du dégradé vert de #app_objet_liste. */
body#app_objet_liste:has(.objet-hd--ressource) {
  background-image: none !important; /* REFONTE : fond neutre (plus de lavis orange) */
}
body:has(.objet-hd--ressource) .filters-sidebar.filters--objet {
  --fa: var(--dom, #6d28d9);
  --fa-rgb: 109, 40, 217;
}
/* Bouton « Ajouter » de la page ressource → orange aussi. */
body:has(.objet-hd--ressource) .btn-add--objet {
  --tblr-btn-bg: #f76707;
  --tblr-btn-border-color: #f76707;
  --tblr-btn-hover-bg: #e15e00;
  --tblr-btn-hover-border-color: #e15e00;
  background-color: #f76707 !important;
  border-color: #f76707 !important;
  color: #fff !important;
}

/* 1) Surface en verre : dégradé blanc → teinte d'accent, bordure claire, ombre
      colorée. (Le thème sombre garde son fond via [data-theme] plus spécifique.) */
.card--contact,
.card--contact.card--societe,
.card--objet {
  /* Carte = dégradé RADIAL : blanc en haut-gauche → couleur (très légère) en
     bas-droite. Les tuiles/boutons blancs ressortent sur la teinte du bas.
     .card--societe explicite : sinon `.card--societe{background:var(--cc-surface)}`
     (blanc) gagnait et les tuiles blanches devenaient invisibles. */
  /* Deux dégradés superposés sur fond blanc :
       1) du bas (couleur 7%) vers le haut (blanc),
       2) diagonal du haut-droite (couleur 2%) vers le bas-gauche (blanc). */
  background:
    linear-gradient(to top, rgba(var(--cc-accent-rgb), .07), rgba(var(--cc-accent-rgb), 0) 60%),
    linear-gradient(to bottom left, rgba(var(--cc-accent-rgb), .02), rgba(var(--cc-accent-rgb), 0) 60%),
    #ffffff;
  /* Bordure très légère en couleur d'entité (au lieu de blanche). */
  border: 1px solid rgba(var(--cc-accent-rgb), .18) !important;
  border-radius: 14px;
  padding: 0 !important;
  /* Élévation basse (ombre douce, faible portée). */
  box-shadow: 0 2px 8px -4px rgba(var(--cc-accent-rgb), .22),
              inset 0 1px 0 rgba(255, 255, 255, .9);
}
.card--contact:hover,
.card--objet:hover {
  box-shadow: 0 4px 12px -5px rgba(var(--cc-accent-rgb), .3),
              inset 0 1px 0 rgba(255, 255, 255, .9);
}

/* 2) Corps : une seule colonne, chaque attribut dans une MINI-TUILE vitrée
      (libellé à gauche / valeur à droite, déjà géré par les couches existantes). */
.card--contact .card-contact__body .data-card-container.datagrid,
.card--objet .card--objet__body .datagrid {
  display: flex !important;
  flex-direction: column;
  gap: 7px !important;
  grid-template-columns: none !important;
}

/* Avatar = icône simple colorée (ni carré plein, ni halo), comme la maquette. */
.card--objet .card-objet__avatar,
.card--contact .card-contact__avatar {
  width: auto !important;
  height: auto !important;
  background: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
.card--objet .card-objet__avatar .material-symbols-outlined,
.card--contact .card-contact__avatar .material-symbols-outlined {
  font-size: 42px !important;
  color: var(--cc-accent) !important;
}
/* En-tête : PAS d'encadré à dégradé coloré (c'était la bande foncée du haut).
   L'en-tête se fond dans le dégradé radial clair de la carte. */
.card--contact-flat .card-contact__head,
.card--contact-flat.card--societe .card-contact__head,
.card--objet .card-objet__head {
  background: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
}
.card--contact .card-contact__body .datagrid-item,
.card--objet .card--objet__body .datagrid-item {
  /* Tuile BLANCHE frostée : ressort sur la carte teintée (ombre douce d'accent
     + reflet blanc en haut pour l'effet verre). */
  background: rgba(255, 255, 255, .6);
  border: 1px solid rgba(255, 255, 255, .9) !important;
  border-radius: 9px;
  padding: 7px 10px !important;
  margin: 0 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
}

/* 3) Contact associé à l'objet (icône + dénomination + nom) — tuile vitrée. */
.card--objet .card-objet__contact {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 13px 11px;
  padding: 8px 11px;
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 10px;
  background: rgba(255, 255, 255, .6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
  text-decoration: none;
  color: inherit;
}
.card--objet .card-objet__contact:hover { border-color: var(--cc-accent); }
.card-objet__contact-av { font-size: 26px; color: var(--cc-accent); flex: 0 0 auto; }
.card-objet__contact-id { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.card-objet__contact-id b {
  font-size: 13px; color: var(--ev-heading-color);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.card-objet__contact-id span {
  font-size: 11.5px; color: var(--ev-body-color);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.card-objet__contact-go { margin-left: auto; color: #aab0bb; font-size: 18px; flex: 0 0 auto; }

/* « Contact principal/associé » des cartes contact → MÊME tuile verre que le
   contact lié des objets : accent de la carte (hérité, pas de navy), pas de halo. */
.card--contact .card-contact__parent {
  --cc-accent: inherit;
  --cc-accent-rgb: inherit;
  display: flex !important;
  align-items: center;
  gap: 10px;
  margin: 0 13px 11px !important;
  padding: 8px 11px !important;
  border: 1px solid rgba(255, 255, 255, .9) !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, .6) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6) !important;
}
.card--contact .card-contact__parent:hover { border-color: var(--cc-accent) !important; }
.card--contact .card-contact__parent-icon {
  width: auto !important;
  height: auto !important;
  background: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  color: var(--cc-accent) !important;
  font-size: 24px !important;
}
.card--contact .card-contact__parent-label {
  color: var(--cc-accent) !important;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.card--contact .card-contact__parent-go { color: #aab0bb !important; }

/* 4) Pied : boutons PLEINE LARGEUR, CLAIRS (tuiles vitrées séparées, jamais de
      fond foncé ; survol en teinte d'accent douce). */
.card--contact .card-contact__actions,
.card--objet .card-objet__actions {
  display: grid !important;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 8px;
  margin: auto 13px 13px;
  padding: 0;
  border: 0;
  box-shadow: none;
  overflow: visible;
}
.card--contact .card-contact__btn,
.card--objet .card-objet__btn {
  flex-direction: row;
  gap: 6px;
  min-height: 0;
  height: 40px;
  padding: 0 8px;
  border: 1px solid rgba(255, 255, 255, .9) !important;
  border-radius: 11px !important;
  background: rgba(255, 255, 255, .62) !important;
  color: var(--cc-accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
}
.card--contact .card-contact__btn:hover,
.card--objet .card-objet__btn:hover {
  background: rgba(var(--cc-accent-rgb), .12) !important;
  border-color: rgba(var(--cc-accent-rgb), .4) !important;
  color: var(--cc-accent);
}
.card--contact .card-contact__btn .material-symbols-outlined,
.card--objet .card-objet__btn .material-symbols-outlined { font-size: 19px; }
.card-contact__btn-label,
.card-objet__btn-label { font-size: 11.5px; font-weight: 600; }
/* Pas de filet blanc juste avant la rangée de boutons : l'élément qui les
   précède (dernière mini-tuile / bloc contact associé / contact principal)
   n'a pas de bord bas, et le pied n'a aucune bordure haute. */
.card--contact .card-contact__actions,
.card--objet .card-objet__actions { border-top: 0 !important; }
.card--contact .card-contact__body .datagrid-item:last-child,
.card--objet .card--objet__body .datagrid-item:last-child,
.card--objet .card-objet__contact,
.card--contact .card-contact__parent { border-bottom: 0 !important; }

/* 5) Thème sombre : tuiles/boutons en blanc très faible (sinon trop lumineux). */
[data-theme="dark"] .card--contact .card-contact__body .datagrid-item,
[data-theme="dark"] .card--objet .card--objet__body .datagrid-item,
[data-theme="dark"] .card--objet .card-objet__contact,
[data-theme="dark"] .card--contact .card-contact__btn,
[data-theme="dark"] .card--objet .card-objet__btn {
  background: rgba(255, 255, 255, .05) !important;
  border-color: rgba(255, 255, 255, .12) !important;
}

/* ==================== Bloc « Options » (radio / checkbox) ====================
   Rendu identique canvas / viewer / impression. Le filtrage des variantes non
   retenues (unselected=none) et la présence des repères (marker) sont décidés
   CÔTÉ SERVEUR ; ce CSS ne fait que l'apparence (grisé / barré, affordances
   d'édition), jamais de masquage de contenu présent dans le DOM imprimé.
   Couleur : les options héritent TOUJOURS de la couleur de police des
   paragraphes du thème (color: inherit), sans accent. */
.options-block { display: block; }

/* ===== BASE = rendu IMPRESSION / viewer : marqueur ○/●☐/☑ COLLÉ au contenu, sur la MÊME
   ligne (« ☑ texte… », le texte revient à la ligne sous le marqueur). Le libellé n'existe
   pas à l'impression. Couleur = police des paragraphes du thème (color: inherit). ===== */
.opt-variant { position: relative; display: flex; align-items: baseline; gap: 6px;
  padding: 2px 0; color: inherit; }
/* Marqueur = CASE RONDE dessinée en CSS (nette, ~1.1em, couleur du thème), même en radio —
   l'UI l'appelle « Case / Rond » : border-radius 50%, coche ✓ inchangée à l'intérieur. */
.opt-marker { box-sizing: border-box; flex: 0 0 auto; display: inline-block;
  width: 1.1em; height: 1.1em; border: 1.5px solid currentColor; border-radius: 50%;
  position: relative; vertical-align: -0.18em; color: inherit; user-select: none; }
.opt-marker.is-checked::after { content: ""; position: absolute; left: 50%; top: 47%;
  width: .34em; height: .64em; border: solid currentColor; border-width: 0 .17em .17em 0;
  transform: translate(-50%, -58%) rotate(45deg); }
.opt-label { display: none; }
.opt-variant__body { flex: 1 1 auto; min-width: 0; }
.opt-variant__body > :first-child { margin-top: 0; }
.opt-variant__body > :last-child { margin-bottom: 0; }
/* Paragraphes (Entrée) et listes visibles en LiveEdit ET à l'impression. */
.opt-variant__body p { margin: 0 0 .4em; }
.opt-variant__body ul,
.opt-variant__body ol { margin: 0 0 .4em; padding-left: 1.4em; }
/* Non sélectionnées affichées : apparence pilotée par data-unselected (impression + LiveEdit). */
.options-block[data-unselected="grise"] .opt-variant--unselected { opacity: .45; }
.options-block[data-unselected="barre"] .opt-variant--unselected .opt-variant__body { text-decoration: line-through; opacity: .7; }

/* ===== ÉDITEUR (.doc-canvas) : layout BLOC — rond/case + libellé en 1re ligne, puis GRANDE
   zone d'édition pleine largeur en dessous (« comme les TEXTE »). ===== */
.doc-canvas .opt-variant { display: block; padding: 6px 2px; border-radius: 6px; }
.doc-canvas .opt-variant:hover { background: rgba(0, 0, 0, .02); }
.doc-canvas .opt-marker { margin-right: 7px; cursor: pointer; }
.doc-canvas .opt-marker:hover { box-shadow: 0 0 0 3px rgba(0, 0, 0, .10); }
.doc-canvas .opt-label { display: inline; font-weight: 600; line-height: 1.5; color: inherit; cursor: text; }
.doc-canvas .opt-label:empty { display: none; }
.doc-canvas .opt-label--editing { outline: 2px solid rgba(28, 126, 214, .35); border-radius: 3px; }
/* B6 — Les options doivent rester VISIBLES qu'un thème soit appliqué ou non. Les options liées à une
   source (variable) rendent `.opt-opt-label` (et non `.opt-label`) : cette classe n'avait AUCUNE règle
   éditeur, donc son affichage dépendait entièrement de l'héritage du thème (invisible sur un thème à
   texte clair). On lui donne les mêmes garanties d'affichage que `.opt-label`, avec une spécificité
   suffisante pour l'emporter sur la base d'impression scopée (`.opt-label{display:none}`). */
.doc-canvas .options-block .opt-opt-label { display: inline; font-weight: 600; line-height: 1.5; color: inherit; }
.doc-canvas .options-block .opt-opt-label:empty { display: none; }
.doc-canvas .options-block .opt-opt-desc, .doc-canvas .options-block .opt-opt-num { display: block; color: inherit; }
/* Le marqueur (case/rond) garde un contour visible même si la couleur héritée est très claire. */
.doc-canvas .options-block .opt-marker { border-color: currentColor; }
/* Filet de sécurité : aucune règle de thème/print scopée ne doit masquer un bloc d'options entier. */
.doc-canvas .options-block, .doc-canvas .opt-variant, .doc-canvas .opt-variant__body { visibility: visible; }
.doc-canvas .opt-variant__body { display: block; width: 100%; min-height: 1.9em; padding: 4px 6px;
  margin-top: 2px; border-radius: 6px; cursor: text; transition: background .12s, box-shadow .12s; }
.doc-canvas .opt-variant__body:hover { background: rgba(0, 0, 0, .03); }
.doc-canvas .opt-variant__body:focus,
.doc-canvas .opt-variant__body:focus-within { background: rgba(28, 126, 214, .06);
  box-shadow: inset 0 0 0 1px rgba(28, 126, 214, .35); outline: none; }
/* unselected=none : en LiveEdit la variante reste éditable mais signalée « non imprimée ». */
.doc-canvas .options-block[data-unselected="none"] .opt-variant--unselected { opacity: .5; border-left: 2px dashed var(--ev-border-color); padding-left: 6px; }
.doc-canvas .opt-variant__tools { position: absolute; top: 2px; right: 2px; opacity: 0; transition: opacity .12s; }
.doc-canvas .opt-variant:hover .opt-variant__tools { opacity: 1; }
.doc-canvas .opt-variant__tools button { border: 0; background: transparent; color: #e03131; cursor: pointer; padding: 2px; line-height: 0; border-radius: 4px; }
.doc-canvas .opt-variant__tools button:hover { background: #ffe3e3; }
.doc-canvas .opt-variant__tools .material-symbols-outlined { font-size: 16px; }
/* En impression / viewer, aucun outil d'édition ne doit apparaître. */
.opt-variant__tools { display: none; }
.doc-canvas .opt-variant__tools { display: inline-flex; }

/* Grille (options par ligne) + encadré par option — LiveEdit (miroir de document_print.css). */
.doc-canvas .options-block[data-cols="2"] { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 14px; align-items: stretch; }
.doc-canvas .options-block[data-cols="3"] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 14px; align-items: stretch; }
.doc-canvas .options-block[data-cols="4"] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px 12px; align-items: stretch; }
.doc-canvas .options-block[data-frame="ligne"] .opt-variant { border: 1px solid var(--ev-border-color, #c9ced6); border-radius: 8px; padding: 6px 10px; }
.doc-canvas .options-block[data-frame="fond"] .opt-variant { background: rgba(0, 0, 0, .045); border-radius: 8px; padding: 6px 10px; }

/* Selects de réglage dans le menu « Modifier » du bloc Options. */
.ts2-select { width: 100%; padding: 6px 8px; border: 1px solid var(--ev-border-color); border-radius: 8px;
  background: var(--ev-body-bg, #fff); color: var(--ev-body-color); font-size: 12.5px; font-weight: 600; margin-bottom: 4px; }

/* Panneau latéral « Options » : pilotage des blocs Options depuis le panneau. */
.options-panel { padding: 4px 2px; }
.opt-panel-group { border: 1px solid var(--ev-border-color); border-radius: 10px; padding: 6px 8px; margin-bottom: 8px; }
.opt-panel-head { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.opt-panel-head .material-symbols-outlined { font-size: 18px; color: var(--ev-muted-color, #868e96); }
.opt-panel-title { font-weight: 600; font-size: 13px; }
.opt-panel-mode { font-size: 11.5px; color: var(--ev-muted-color, #868e96); }
.opt-panel-goto { margin-left: auto; border: 0; background: transparent; color: var(--ev-muted-color, #868e96); cursor: pointer; padding: 2px; line-height: 0; border-radius: 4px; }
.opt-panel-goto:hover { background: rgba(0, 0, 0, .06); color: var(--ev-body-color); }
.opt-panel-list { list-style: none; margin: 0; padding: 0; }
.opt-panel-item { display: flex; align-items: center; gap: 8px; padding: 3px 4px; border-radius: 6px; }
.opt-panel-item:hover { background: rgba(0, 0, 0, .03); }
.opt-panel-item.is-selected { background: rgba(28, 126, 214, .08); }
.opt-panel-select { flex: 0 0 auto; border: 0; background: transparent; cursor: pointer; padding: 2px; line-height: 0; border-radius: 6px; display: inline-flex; }
.opt-panel-select:hover { background: rgba(0, 0, 0, .06); }
/* Grosse case à cocher NETTE (20px) — cochée = fond accent + ✓ blanc, très lisible. */
.opt-cb { box-sizing: border-box; display: inline-block; width: 20px; height: 20px; border: 2px solid var(--ev-body-color); border-radius: 5px; position: relative; }
.opt-cb.is-checked { background: #1c7ed6; border-color: #1c7ed6; }
.opt-cb.is-checked::after { content: ""; position: absolute; left: 50%; top: 47%; width: 6px; height: 11px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: translate(-50%, -58%) rotate(45deg); }
.opt-panel-label { flex: 1 1 auto; min-width: 0; font-size: 13px; cursor: text; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 2px 4px; border-radius: 4px; }
.opt-panel-label:hover { background: rgba(0, 0, 0, .04); }
.opt-panel-label.is-editing { overflow: visible; text-overflow: clip; white-space: normal; background: #fff; outline: 2px solid rgba(28, 126, 214, .45); cursor: text; }
.opt-panel-item.is-selected .opt-panel-label { font-weight: 600; }
.opt-panel-value { flex: 0 0 auto; margin-left: auto; padding-left: 8px; font-size: 12.5px; font-weight: 700; color: var(--ev-heading-color, #1f2733); white-space: nowrap; }
/* Bloc Options LIÉ dans l'éditeur : la variante entière est cliquable (coche → écrit sur la fiche),
   pas une zone d'édition de texte → curseur pointeur, pas d'outline de focus. */
.doc-canvas .options-block[data-source="variable"] .opt-variant { cursor: pointer; }
.doc-canvas .options-block[data-source="variable"] .opt-variant:hover { background: rgba(28, 126, 214, .06); }
.doc-canvas .options-block[data-source="variable"] .opt-variant__body { cursor: pointer; min-height: 0; padding: 0; }
.doc-canvas .options-block[data-source="variable"] .opt-variant__body:hover,
.doc-canvas .options-block[data-source="variable"] .opt-variant__body:focus,
.doc-canvas .options-block[data-source="variable"] .opt-variant__body:focus-within { background: transparent; box-shadow: none; }

/* Bloc lié NON APPLICABLE (spec D1) : n'existe qu'en ÉDITEUR (jamais rendu viewer/print).
   Options grisées + coches INERTES — pointer-events coupés sur les variantes SEULEMENT :
   le conteneur .options-block et le .bloc-container qui l'enveloppe (où le LiveEdit pose
   ses contrôles crayon/menu) restent cliquables, et le bandeau reste net (pas d'opacité
   sur le conteneur). Le write-back est déjà désarmé côté serveur (aucun data-opt-id /
   data-var-id / data-owner-id émis) ; ce CSS n'est qu'une couche d'affordance. */
.options-block--not-applicable .opt-variant { opacity: .55; pointer-events: none; }
/* Bandeau d'avertissement (l'icône ⚠ est déjà dans le texte) : discret mais net.
   Il occupe SA PROPRE LIGNE au-dessus des options, avec UNE LIGNE VIDE de séparation
   (margin-bottom ≈ une hauteur de ligne — demande utilisateur : « on indique l'erreur
   et on saute une ligne pour afficher les options »). En grille (data-cols 2..4), le
   bandeau s'étend sur TOUTES les colonnes (sinon il serait coincé dans la 1re cellule). */
.options-block-na-banner { display: block; grid-column: 1 / -1; margin: 0 0 16px; padding: 4px 10px;
  border: 1px solid #ffd43b;
  border-radius: 6px; background: #fff9db; color: #997404; font-size: 12px; font-weight: 600; }
/* Nom du bloc lié (label de variable) dans l'en-tête du panneau. */
.opt-opt-num { color: var(--ev-muted-color, #495057); }

/* Admin des options : bouton « description » (bloc Options lié) — accentué s'il y a du contenu. */
.option-desc-btn { color: var(--ev-muted-color, #868e96); }
.option-desc-btn.has-desc { color: #1c7ed6; }

/* Item lié (lecture seule) : la case et le libellé ne sont pas interactifs (valeur = fiche). */
.opt-panel-item--readonly { cursor: default; }
.opt-panel-item--readonly .opt-cb { opacity: .85; }
.opt-panel-item--readonly .opt-panel-label { cursor: default; }
.opt-panel-item--readonly .opt-panel-label:hover { background: transparent; }

/* ============================================================================
 * Conformité maquette (2026-09-18) — cartes, toggles, colonne de filtres.
 *
 * Les cartes objet/contact reprennent la surface PLATE des maquettes
 * (`modes-affichage.html` `.ocard`, `01-colonne-filtres.html` `.card-objet`) :
 * blanc #fff, bordure #e5e7eb, rayon 8px, ombre basse — au lieu du « verre »
 * teinté (dégradés d'accent, rayon 14px, ombre colorée, tuiles vitrées).
 * Bloc en fin de fichier pour primer sur les règles antérieures.
 * ========================================================================== */

/* ── Cartes : surface plate ─────────────────────────────────────────────── */
.card--contact,
.card--contact.card--societe,
.card--objet {
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .06) !important;
}
.card--contact:hover,
.card--objet:hover {
  border-color: rgba(var(--cc-accent-rgb), .5) !important;
  box-shadow: 0 4px 14px rgba(16, 24, 40, .07) !important;
}
.card--objet .card-objet__head { padding: 11px 12px !important; gap: 10px !important; }
.card--objet .card--objet__body { padding: 10px 12px !important; }
/* Lignes de données plates : plus de mini-tuiles vitrées. */
.card--contact .card-contact__body .datagrid-item,
.card--objet .card--objet__body .datagrid-item {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}
/* Contact : bandeau pleine largeur séparé par une bordure haute. */
.card--objet .card-objet__contact {
  margin: 0 !important;
  padding: 8px 12px !important;
  border: 0 !important;
  border-top: 1px solid #f1f3f5 !important;
  border-radius: 0 !important;
  background: #fcfcfd !important;
  box-shadow: none !important;
}
.card--objet .card-objet__contact:hover { border-color: #f1f3f5 !important; }
.card--objet .card-objet__contact-id b { font-size: 11.5px !important; font-weight: 600 !important; }
.card--objet .card-objet__contact-id span { font-size: 11.5px !important; }
/* Actions : bandeau pleine largeur, boutons nus séparés par une bordure verticale. */
.card--objet .card-objet__actions,
.card--contact .card-contact__actions {
  display: flex !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border-top: 1px solid #f1f3f5 !important;
  border-radius: 0 !important;
}
.card--objet .card-objet__btn,
.card--contact .card-contact__btn {
  flex: 1 !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 8px !important;
  border: 0 !important;
  border-right: 1px solid #f1f3f5 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--ev-body-color) !important;
  box-shadow: none !important;
}
.card--objet .card-objet__btn:last-child,
.card--contact .card-contact__btn:last-child { border-right: 0 !important; }
.card--objet .card-objet__btn:hover,
.card--contact .card-contact__btn:hover {
  background: rgba(var(--cc-accent-rgb), .12) !important;
  color: var(--cc-accent) !important;
}
/* Avatar : carré teinté 36px (`.idchip--md` de la maquette). */
.card--objet .card-objet__avatar,
.card--contact .card-contact__avatar {
  width: 36px !important;
  height: 36px !important;
  background: rgba(var(--cc-accent-rgb), .14) !important;
  border-radius: 9px !important;
  box-shadow: none !important;
}
.card--objet .card-objet__avatar .material-symbols-outlined,
.card--contact .card-contact__avatar .material-symbols-outlined {
  font-size: 20px !important;
  color: var(--cc-accent) !important;
}

/* ── Colonne de filtres (maquette `.actbar` / `.fcard` / `.fsec`) ──────────── */
/* Barre d'action = carte AUTONOME : fond blanc, 4 bordures, rayon 10px, ombre. */
.filters-sidebar .filter-actions {
  background: #fff !important;
  background-image: none !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 3px rgba(16, 24, 40, .06) !important;
  padding: 9px 10px !important;
  gap: 8px !important;
  margin: 0 0 10px !important;
}
.filters-sidebar .filter-actions .btn-filter-apply {
  background: var(--fa) !important;
  border: 1px solid var(--fa) !important;
  box-shadow: none !important;
  padding: 7px 13px !important;
  font-weight: 500 !important;
}
/* Entêtes d'accordéon : rang PLAT, icône en carré teinté (`.fsec__ic`). */
.filters-sidebar .filter-section__header {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 10px 11px !important;
  color: inherit !important;
  gap: 8px !important;
}
.filters-sidebar .filter-section__header .material-symbols-outlined:not(.filter-section__chevron) {
  background: rgba(var(--fa-rgb), .12) !important;
  color: var(--fa) !important;
  border-radius: 6px !important;
  width: 23px !important;
  height: 23px !important;
  font-size: 16px !important;
}
.filters-sidebar .filter-section { border-radius: 0 !important; overflow: visible !important; }
/* Onglets de filtres : fond `--ev-tabs-bg`, onglet actif blanc (`.ftabs`/`.ftab`). */
.ov-ftabs { background: var(--ev-tabs-bg, #f1f3f5) !important; padding: 0 !important; }
.ov-ftab.is-on { background: #fff !important; }

/* ── Colonne de filtres : conformité `01-colonne-filtres.html`
   (`.actbar`/`.fcard`/`.ftabs`/`.fsec`/`.chk`). Placé en fin de fichier : à
   spécificité égale, l'ordre tranche sur les blocs plus haut. ── */
.filters-sidebar { font-size: 13px; }

/* Case à cocher : coche SVG explicite (`.chk input:checked` de la maquette).
   Le fond est posé en `background-color` (jamais `background`) pour ne pas
   réinitialiser `background-image`/`position`/`size` de Tabler. */
.filters-sidebar .filter-opt .form-check-input {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  margin: 0;
  border: 1.5px solid #c9cfd8;
  border-radius: 4px;
  background-color: #fff;
}
.filters-sidebar .filter-opt .form-check-input:checked {
  border-color: var(--fa);
  background-color: var(--fa);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-position: center;
  background-size: 11px;
  background-repeat: no-repeat;
}
.filters-sidebar .filter-opt {
  font-size: 12px;
  gap: 7px;
  padding: 4px 6px;
  border-radius: 5px;
}

/* Onglets : hauteur et onglet actif coloré à l'accent (`.ftabs`/`.ftab.is-on`). */
.filters-sidebar .ov-ftabs { min-height: 43px; }
.filters-sidebar .ov-ftab { padding: 11px 8px; font-size: 12px; }
.filters-sidebar .ov-ftab.is-on { color: var(--fa) !important; }

/* Entête d'accordéon ouvert : fond `#f7f9fb` (`.fsec.is-open .fsec__hd`). */
.filters-sidebar .filter-section__header[aria-expanded="true"] {
  background: #f7f9fb !important;
  background-image: none !important;
}

/* Champ « limite » : natif, fond blanc, poids normal (`.actbar__lim .inp`). */
.filters-sidebar .filter-limit-input {
  appearance: auto !important;
  background-color: #fff !important;
  border: 1px solid #e1e5ea !important;
  font-weight: 400 !important;
  padding: 4px !important;
}