.card {
  border: 1px solid var(--ev-border-color);
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
  height: 100%;
  width: 100%;
  box-shadow: none;
}

.card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ev-body-color);
}

.card-header,
.card-body {
  padding: 0;
}

.card-header {
  margin-bottom: .5rem;
  background-color: transparent;
  border: none;
}

.card-header .d-flex {
  justify-content: space-between;
}

/* .card__filter {
  margin-top: 0;
  max-height: 0;
  opacity: 0;
  transition: all 500ms;
}

.card__filter.active {
  margin-top: 1rem;
  max-height: 100vh;
  opacity: 1;
} */

.card__filter .form-group {
  margin-bottom: 0;
}

@media (width >=992px) {
  .card__filter .d-flex-app {
    flex-wrap: nowrap;
  }
}

.card-header .dropdown-menu {
  left: unset !important;
  transform: translate3d(0, 42px, 0px) !important;
  right: 0;
}

.card--form .card-footer::after,
.card--form .card-header::after {
  content: "";
  position: absolute;
  height: 1px;
  background-color: var(--ev-border-color);
  width: calc(100% + 16px * 2);
  left: -16px;
}

.card--form .card-header::after {
  bottom: 0;
}

.card--form .card-footer::after {
  top: 0;
}

.card--form .card-footer {
  position: relative;
}

.card--form .card-header {
  position: relative;
  padding-bottom: 12px;
  margin-top: -4px;
}

.card--form .card-header>* {
  margin: 0;
}

.label-card {
  padding: 6px 12px;
  margin-block: 0.25rem;
  font-weight: 500;
  margin-right: 0.5rem !important;
  text-transform: capitalize;
}

.card-wrap {
  display: grid;
  gap: 24px;
}

.field-container a {
  font-weight: 500;
  text-decoration: underline;
}

.form-group {
  margin-bottom: 8px;
}

.card-cta {
  display: flex;
  gap: 8px;
}

.card-footer {
  padding: 16px 0 0 0;
  background: transparent;
  margin-top: 8px;
  border: none;
}

.card__filter {
  margin-bottom: 8px;
}

.card-column .icon {
  --icon-height: 12px;
  margin-top: -4px;
}

.card--document-template,
.card--document-variables {
  height: fit-content;
}

.card--document-template .card-body,
.card--document-variables .card-body {
  flex-grow: 0;
}

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

.data-card-container {
  height: 100%;
}

.data-card-container table {
  width: 100%;
}

.data-card-container .table-responsive {
  font-size: 12px;
}

.data-card-container .table-responsive tr {
  display: flex;
  align-items: self-start;
}

.data-card-container .table-responsive td {
  border: none;
  padding: 0;
}

.data-card-container .table-responsive td:first-child {
  flex: 0 0 auto;
  max-width: max-content;
}

.data-card-container .table-responsive td:first-child::after {
  content: "";
  flex: 1;
  min-width: 20px;
}

.data-card-container .label-table {
  padding: 2px 6px;
}

.data-card-container .text-end .d-flex {
  place-content: end;
}

.data-card-container .dots {
  flex: 1;
  min-width: 20px;
  height: 4px;
  margin: 0 6px;
  background-image: radial-gradient(circle at center, rgba(var(--ev-body-color-rgb), 0.25) 1px, transparent 1px);
  background-size: 6px 2px;
  background-repeat: repeat-x;
  margin-block: 12px;
}

.field-editor {
  flex-wrap: wrap;
}

.filter-section .form-check-label {
  font-size: 12px !important;
}

.filter-section .field-variable [type="radio"]+label::before,
.filter-section .field-variable [type="radio"]+label::after {
  margin: 6px 0px;
  width: 12px;
  height: 12px;
}

.filter-section .field-container {
  padding: 6px 0px;
}

.filter-section [type="radio"]:checked+label {
  padding-left: 16px;
}

.filter-section [type="radio"]:not(:checked)+label {
  padding-left: 16px;
}

.card.card--filters {
  padding: 0;
}

/* `display:block` (maquette `.fcard`) UNIQUEMENT hors `.collapse` : sinon on écrase
   `.collapse:not(.show){display:none}` et l'accordéon de filtres reste ouvert au repos
   en mobile (stats). */
.card.card--filters:not(.collapse) {
  display: block;
}

.filter-section__body {
  background: white !important;
}

.card--filters .field-container:not([data-variable-type="calcule"]):hover {
  background: revert-layer;
}

.card--entity>.card-body {
  flex: 0 0 auto;
}

.label-table {
  word-wrap: anywhere;
}

#objets-types-tabs .nav-tabs--objets .nav-link {
  padding-bottom: 16px !important;
}

.filters-sidebar__cards {
  margin-top: 12px;
}

.filter-section__header {
  border-radius: 7px;
  margin-top: 8px;
}

.json-link .icon-link {
  font-size: 13px;
  vertical-align: middle;
}

.json-link {
  font-weight: 800 !important;
}

.json-link:hover {
  color: var(--ev-primary);
  text-decoration: underline;
}

.json-link .material-symbols-outlined::before {
  content: unset;
}

/* ============================================================
   Cartes « fieldset-group » — alignées sur l'en-tête objet-hd
   (design #4 « Left Accent Rail », components/entity_header.css).
   Chaque groupe = une carte blanche autonome : lavis d'accent,
   rail gauche de 4px, en-tête à icône en pastille/halo + titre
   sombre (fini la pastille pleine à texte blanc + le cadre boîte).
   L'accent par défaut suit --ev-secondary ; recoloré par variante
   et par entité ci-dessous (vert objet / violet contact).
   ============================================================ */
.fieldset-groups {
  --card-accent: var(--ev-secondary);
  --card-accent-rgb: 88, 39, 88;
  margin-bottom: 16px;
  width: 100%;
}

.fieldset-group {
  position: relative;
  /* Carte blanche à cadre clair (plus de rail d'accent à gauche). */
  background: #fff;
  border: 1px solid var(--ev-border-color);
  border-radius: 8px;
  padding: 13px 16px 11px;    /* la carte porte le padding → trait d'en-tête « inset » */
  margin-top: 0;
  margin-bottom: 16px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
}
/* Plus de rail d'accent coloré à gauche. */
.fieldset-group::before { display: none; }

/* En-tête « carte à carré d'icône » (refonte 2026-07-18, cf. maquette
   docs/design/2026-07-18-fiche-contact) : carré d'icône teinté à l'accent de la
   FICHE (--dom = couleur du type ; fallback --card-accent), titre normal foncé,
   sans trait ni majuscules ; œil de pli à droite conservé. */
.fieldset-group__header {
  display: flex;
  align-items: center;
  gap: 10px;
  width: auto;
  padding: 0;
  margin-bottom: 9px;
  transform: none;
  background: transparent;
  color: var(--ev-heading-color);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  border-bottom: 0;
  cursor: pointer;
  user-select: none;
}
/* Icône dans un carré teinté (color-mix sur l'accent). text-transform:none pour
   ne pas casser la ligature de l'icône. */
.fieldset-group__header .material-symbols-outlined {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  font-size: 19px;
  color: var(--card-accent);
  background: color-mix(in srgb, var(--card-accent) 14%, transparent);
  box-shadow: none;
  text-transform: none;
}
/* Œil d'affichage/masquage à droite de l'en-tête : œil ouvert quand le corps est
   visible, œil barré quand le groupe est replié. Remplace l'ancien chevron. */
.fieldset-group__header::after {
  content: 'visibility';
  font-family: 'Material Symbols Outlined';
  margin-left: auto;
  font-size: 18px;
  line-height: 1;
  color: #9aa0a6;
  text-transform: none;
  transition: color .15s ease;
}

/* Corps : le padding est porté par la carte. */
.fieldset-group__body {
  padding: 0;
}

/* Traits fins entre les lignes d'attributs (comme la carte 12). */
.fieldset-group__body .fieldset-group__row { padding: 6px 0; }
.fieldset-group__body .fieldset-group__row + .fieldset-group__row {
  border-top: 1px solid rgba(16, 24, 40, .06);
}

/* État replié : corps masqué, chevron pivoté, trait d'en-tête neutralisé. */
.fieldset-group.is-collapsed .fieldset-group__header {
  border-bottom-color: transparent;
  margin-bottom: 0;
  padding-bottom: 0;
}
.fieldset-group.is-collapsed .fieldset-group__header::after { content: 'visibility_off'; }
.fieldset-group.is-collapsed .fieldset-group__body { display: none; }

/* Accent par variante — suit la couleur de la FICHE (--dom posée par le wrapper,
   = contact_type.couleur), fallback violet global. */
.fieldset-groups--primary {
  --card-accent: var(--dom, var(--ev-primary));
  --card-accent-rgb: var(--ev-primary-rgb);
  --ev-form-group-hover-bg: #e2e0f2;
}

.fieldset-groups--secondary {
  --ev-form-group-hover-bg: #f4eaf4;
}

/* Bandeau d'avancement : chaque indicateur dans sa propre carte à rail
   d'accent, même langage que .fieldset-group (le conteneur n'est plus une
   .card unique, juste une grille souple de cartes — cf. _objet_tab/_contact_tab). */
.avancement-indicator-wrapper {
  --card-accent: var(--ev-secondary);
  --card-accent-rgb: 88, 39, 88;
}

.avancement-indicator {
  position: relative;
  /* Refonte 2026-07-18 : carte NEUTRE (plus de rail d'accent), comme la maquette. */
  background: #fff;
  border: 1px solid var(--ev-border-color);
  border-radius: 8px;
  padding: 12px 16px;
  min-width: 260px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .06);
}
.avancement-indicator::before { display: none; }

/* Cohérence avec l'en-tête : sur la fiche contact, les cartes reprennent
   le violet du cadre supérieur (.objet-hd--contact).
   Le sélecteur cible n'importe quel ancêtre marqué [data-contact-id] (page-body
   de la fiche contact OU onglet « Contact » réutilisé dans l'éditeur de document
   et les popins), pour que l'accent voyage avec le partiel _contact_tab. */
/* Refonte 2026-07-18 : ces règles à [data-*] ont une spécificité supérieure à
   .fieldset-groups--primary ; sans var(--dom, …) elles ÉCRASERAIENT la couleur du
   type (--dom posée sur le wrapper). On lit donc var(--dom, <ancien accent par kind>)
   → la couleur du type gagne quand elle est présente, sinon fallback historique. */
[data-contact-id] .fieldset-groups--secondary,
[data-contact-id] .fieldset-groups--primary,
[data-contact-id] .avancement-indicator-wrapper {
  --card-accent: var(--dom, #7048e8);
  --card-accent-rgb: 112, 72, 232;
}
[data-objet-id] .fieldset-groups--secondary,
[data-objet-id] .fieldset-groups--primary,
[data-objet-id] .avancement-indicator-wrapper {
  --card-accent: var(--dom, #0ca678);
  --card-accent-rgb: 12, 166, 120;
}
/* Éditeur de document : accent Bibliothèque (bleu ciel) par défaut, sauf --dom explicite. */
.document-editor-page [data-objet-id] .fieldset-groups--secondary,
.document-editor-page [data-objet-id] .fieldset-groups--primary,
.document-editor-page [data-objet-id] .avancement-indicator-wrapper {
  --card-accent: var(--dom, #38bdf8);
  --card-accent-rgb: 28, 126, 214;
}

/* Disposition 4 colonnes de la fiche objet (col-lg-3 chacune). min-width:0
   permet aux colonnes de rester à 25 % sans être élargies par un contenu large
   (sinon la 4e colonne passe seule en pleine largeur sous les 3 autres). */
.fieldset-groups--objet4 > .row > [class*="col-"] {
  min-width: 0;
}

/* Les colonnes 2 à 4 (groupes de variables) sont désormais imbriquées dans une
   sous-grille .objet4-vargroups, sous l'encadré « Informations ». Même garde
   min-width:0 pour qu'un contenu large ne casse pas la répartition en 3. */
.fieldset-groups--objet4 .objet4-vargroups > [class*="col-"] {
  min-width: 0;
}

/* La colonne des cartes fixes (.col--objet-fixed) empile ses champs internes
   (au lieu de la grille 2 colonnes / 7-5) pour rester lisible dans une colonne
   étroite. */
.fieldset-groups--objet4 .col--objet-fixed .fieldset-group__body > .row > [class*="col-"] {
  flex: 0 0 100%;
  max-width: 100%;
}

/* ── Colonne système (.col--objet-fixed) : valeurs en gras ─────────────────
   Cible directement les éléments porteurs de valeur — texte/date/numérique
   (.editable-label), étiquettes (.label-table) et badges du résumé
   (.datagrid-content). Les libellés (.form-label / .datagrid-title) restent
   en graisse normale. La disposition (libellé au-dessus de la valeur) est
   inchangée. */
.fieldset-groups--objet4 .col--objet-fixed .editable-label,
.fieldset-groups--objet4 .col--objet-fixed .label-table,
.fieldset-groups--objet4 .col--objet-fixed .datagrid-content,
.fieldset-groups--objet4 .col--objet-fixed .datagrid-content .badge {
  font-weight: 700;
}

/* ── Carte « inline » : libellé à gauche, valeur à droite, une ligne par
   attribut (ex. « Informations Générales » de la fiche contact). ───────────── */
.fieldset-group--inline .fieldset-group__body > .fieldset-group__row {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.fieldset-group--inline .fieldset-group__row > .form-label {
  flex: 0 0 auto;
  margin: 0;
}
.fieldset-group--inline .fieldset-group__row > .field-variable {
  flex: 1 1 auto;
  min-width: 0;
  margin-left: auto;
  text-align: right;
}
.fieldset-group--inline .fieldset-group__row > .field-variable .field-viewer {
  justify-content: flex-end;
}

/* ── Bouton « + » d'ajout dans l'en-tête (.fieldset-group--addable) : remplace
   le chevron de pli ET l'ancien gros bouton « Ajouter » du corps. Le pli reste
   possible en cliquant ailleurs sur l'en-tête (cf. objet.js, qui ignore les
   clics sur boutons/liens). ────────────────────────────────────────────────── */
.fieldset-group--addable > .fieldset-group__header::after { display: none; }
.fieldset-group__add {
  margin-left: auto;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--card-accent);
  cursor: pointer;
}
.fieldset-group__add:hover {
  background: rgba(var(--card-accent-rgb), .14);
}
.fieldset-group__add .material-symbols-outlined {
  font-size: 19px;
  color: var(--card-accent);
}

/* Responsive: stack all fieldset columns below lg breakpoint */
@media (max-width: 991.98px) {
  .fieldset-groups--primary .row .col,
  .fieldset-groups--secondary .row .col {
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* Stack Téléphone + Email vertically on mobile */
  .fieldset-groups--secondary .row .col-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* ============================================================
   ÉCHELLE TYPOGRAPHIQUE DES FICHES — 2026-09-23.
   Maquette source : docs/design/2026-09-23-header-compact-echelle-typo/ (§2).

   Constat mesuré (navigateur, /contact/429 contre /contact-liste/24) : dans une
   carte de fiche, le LIBELLÉ était rendu à 14 px / 500 et la VALEUR à 12,8 px /
   400 — le libellé plus gros que la donnée. Ce 14 px n'était pas choisi : aucune
   règle ne fixait la taille de `.form-label` hors filtres, il héritait donc du
   `body`. Les cartes de liste, elles, ont une échelle complète et hiérarchisée
   (titre 15,5/700 · libellé 12/600 gris · valeur 12,5/700 noir · action 11,5/600).

   Ce bloc reporte l'échelle des listes sur les cartes de fiche. Portée : les
   `.fieldset-group` — fiche contact, fiche objet, onglet contact de l'éditeur et
   popins, qui partagent ce composant. Les libellés de FILTRES (10 px, étiquettes
   flottantes) et les champs de FORMULAIRE hors carte ne sont pas touchés.
   ============================================================ */

/* Libellé : s'efface (gris, petit, semi-gras) — comme `.cc-label` en liste. */
.fieldset-group .form-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ev-body-color);
  letter-spacing: 0;
}

/* Valeur : porte la lecture (noir, 12,5 px, gras) — comme `.label-table` du
   corps de carte en liste. `.editable-label` (texte/date/nombre),
   `.label-table` (étiquettes) et `.datagrid-content` (badges de résumé) sont les
   trois porteurs de valeur du composant. La règle existante de la colonne
   système (`.fieldset-groups--objet4 .col--objet-fixed …`) devient un cas
   particulier de celle-ci ; elle est conservée telle quelle. */
.fieldset-group .field-viewer,
.fieldset-group .variable-wrapper { font-size: 12.5px; }
.fieldset-group .editable-label,
.fieldset-group .label-table.no-shadow,
.fieldset-group .datagrid-content {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ev-heading-color);
}

/* Ligne : le libellé et la valeur se rapprochent, la carte perd ~8 px par bloc
   sans qu'aucune donnée ne disparaisse. */
.fieldset-group__body .fieldset-group__row { padding: 5px 0; }