.bd-placeholder-img {
  font-size: 1.125rem;
  text-anchor: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

@media (min-width: 768px) {
  .bd-placeholder-img-lg {
    font-size: 3.5rem;
  }
}

.b-example-divider {
  width: 100%;
  height: 3rem;
  background-color: rgba(0, 0, 0, 0.1);
  border: solid rgba(0, 0, 0, 0.15);
  border-width: 1px 0;
  box-shadow:
    inset 0 0.5em 1.5em rgba(0, 0, 0, 0.1),
    inset 0 0.125em 0.5em rgba(0, 0, 0, 0.15);
}

.b-example-vr {
  flex-shrink: 0;
  width: 1.5rem;
  height: 100vh;
}

.bi {
  vertical-align: -0.125em;
  fill: currentColor;
}

.nav-scroller {
  position: relative;
  z-index: 2;
  height: 2.75rem;
  overflow-y: hidden;
}

.nav-scroller .nav {
  display: flex;
  flex-wrap: nowrap;
  padding-bottom: 1rem;
  margin-top: -1px;
  overflow-x: auto;
  text-align: center;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

.btn-bd-primary {
  --bd-violet-bg: #712cf9;
  --bd-violet-rgb: 112.520718, 44.062154, 249.437846;

  --bs-btn-font-weight: 600;
  --bs-btn-color: var(--bs-white);
  --bs-btn-bg: var(--bd-violet-bg);
  --bs-btn-border-color: var(--bd-violet-bg);
  --bs-btn-hover-color: var(--bs-white);
  --bs-btn-hover-bg: #6528e0;
  --bs-btn-hover-border-color: #6528e0;
  --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
  --bs-btn-active-color: var(--bs-btn-hover-color);
  --bs-btn-active-bg: #5a23c8;
  --bs-btn-active-border-color: #5a23c8;
}

.bd-mode-toggle {
  z-index: 1500;
}

.bd-mode-toggle .dropdown-menu .active .bi {
  display: block !important;
}

.accordion-body {
  max-height: 800px;
  overflow-y: auto;
  overflow-x: auto;
  max-width: 100%;
}

.accordion-body * {
  max-width: 100%;
  box-sizing: border-box;
  word-break: break-word;
}

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

/* FILTRES */
.filters-shell {
  position: relative;
}

.filters-advanced-card {
  border-radius: 1rem;
  background: color-mix(in oklab, var(--bs-body-bg) 92%, var(--bs-primary) 8%);
  border: 1px solid var(--bs-border-color);
}

.filters-advanced-card .btn-group .btn {
  min-width: 110px;
}

.filters-active {
  min-height: 1.75rem;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  background: var(--bs-secondary-bg);
  border: 1px solid var(--bs-border-color);
  font-size: 0.85rem;
}

.filter-chip__remove {
  border: 0;
  background: transparent;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.75;
}

.filter-chip__remove:hover {
  opacity: 1;
}

@media (max-width: 768px) {
  .filters-shell .btn-group {
    width: 100%;
  }

  .filters-shell .btn-group .btn {
    flex: 1 1 auto;
  }
}

.document-dropzone {
  border: 2px dashed var(--bs-border-color);
  border-radius: 1rem;
  padding: 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  background: color-mix(in srgb, var(--bs-body-bg) 92%, var(--bs-primary) 8%);
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease,
    transform 0.15s ease;
}

.document-dropzone:hover,
.document-dropzone:focus {
  border-color: var(--bs-primary);
  background: color-mix(in srgb, var(--bs-body-bg) 88%, var(--bs-primary) 12%);
  outline: none;
}

.document-dropzone.is-dragover {
  border-color: var(--bs-success);
  background: color-mix(in srgb, var(--bs-body-bg) 84%, var(--bs-success) 16%);
  transform: scale(1.005);
}

.document-dropzone-icon {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bs-secondary-bg);
  font-size: 1.5rem;
  flex-shrink: 0;
}

.document-dropzone-content {
  min-width: 0;
}

.document-selected-item,
.document-linked-item {
  border-radius: 0.85rem;
}

.document-file-icon,
.document-linked-icon {
  width: 40px;
  height: 40px;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bs-secondary-bg);
  flex-shrink: 0;
  font-size: 1.1rem;
}

.document-remove-btn {
  white-space: nowrap;
}

/* EXECUTION */
.progress.tiny {
  height: 8px;
  background: var(--bs-tertiary-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 999px;
}
.progress.tiny .progress-bar {
  transition:
    width 0.2s ease,
    background-color 0.2s ease;
  border-radius: 999px;
}
.progress-wrap {
  min-width: 180px;
}
.exec-wrap {
  font-size: 0.95rem;
}
.exec-item {
  border-radius: 0.5rem;
  border: 1px solid var(--bs-border-color);
}
.exec-item + .exec-item {
  margin-top: 0.5rem;
}
.exec-heading {
  padding: 0.5rem 0.75rem;
}
.exec-heading-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem 0.75rem;
  align-items: center;
}
@media (min-width: 768px) {
  .exec-heading-grid {
    grid-template-columns: minmax(320px, 1fr) minmax(220px, 420px) auto;
  }
}
.title {
  font-weight: 600;
}
.exec-submeta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.6rem;
  color: var(--bs-secondary-color);
  font-size: 0.875rem;
}
.exec-dot {
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 50%;
  background: var(--bs-secondary-color);
  opacity: 0.6;
}
.btn-chevron {
  border: 0;
  background: transparent;
  padding: 0.25rem 0.4rem;
  line-height: 1;
}
.btn-icon {
  padding: 0.25rem 0.45rem;
  line-height: 1;
}
.btn-outline-light-gray {
  --bs-btn-color: var(--bs-secondary-color);
  --bs-btn-border-color: var(--bs-border-color);
  --bs-btn-hover-bg: var(--bs-tertiary-bg);
  --bs-btn-hover-border-color: var(--bs-border-color);
}
.exec-actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.badge-soft-any {
  background: var(--bs-tertiary-bg);
  color: var(--bs-secondary-color);
  border: 1px solid var(--bs-border-color);
  font-weight: 600;
}
@supports (background: color-mix(in oklab, red 10%, white)) {
  .badge-soft-any {
    background: color-mix(in oklab, var(--group-color) 14%, var(--bs-body-bg));
    border-color: color-mix(
      in oklab,
      var(--group-color) 40%,
      var(--bs-body-bg)
    );
    color: color-mix(in oklab, var(--group-color) 60%, var(--bs-body-color));
  }
}
.btn-chevron .bi {
  transition: transform 0.2s ease;
}
.btn-chevron:not(.collapsed) .bi {
  transform: rotate(180deg);
}
@supports selector(:has(*)) {
  .exec-item:has(.accordion-collapse.show) .btn-chevron .bi {
    transform: rotate(180deg);
  }
}
.accordion-body {
  padding: 0.75rem 0.75rem 1rem;
}
.note-box {
  background: var(--bs-tertiary-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 0.5rem;
}
/* Note renseignée : traitement "warning" pour la rendre bien visible. */
.note-box--warning {
  background: var(--bs-warning-bg-subtle);
  border-color: var(--bs-warning-border-subtle);
  border-left: 4px solid var(--bs-warning);
  color: var(--bs-warning-text-emphasis);
}
.note-box--warning .note-box-icon {
  color: var(--bs-warning);
  font-size: 1.15rem;
  line-height: 1.4;
}

/* Badge "Notes" dans l'en-tête d'exécution (visible accordéon replié). */
.exec-notes-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.55rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 50rem;
  background: var(--bs-warning-bg-subtle);
  color: var(--bs-warning-text-emphasis);
  border: 1px solid var(--bs-warning-border-subtle);
  white-space: nowrap;
}

/* Bloc groupe d'exécutions : encadre les procédures appartenant au même groupe */
.group-block {
  border: 1px solid var(--bs-border-color);
  border-radius: 0.65rem;
  background: var(--bs-body-bg);
  margin-top: 0.75rem;
  overflow: hidden;
}
.group-block:first-child {
  margin-top: 0;
}
/* Espace plus généreux aux transitions entre un bloc groupe et une procédure simple
     (ou entre deux groupes), pour bien marquer la rupture visuelle */
.group-block + .exec-item,
.exec-item + .group-block,
.group-block + .group-block {
  margin-top: 1.5rem;
}
@supports (background: color-mix(in oklab, red 10%, white)) {
  .group-block {
    border-color: color-mix(
      in oklab,
      var(--group-color, var(--bs-border-color)) 40%,
      var(--bs-border-color)
    );
    background: color-mix(
      in oklab,
      var(--group-color, transparent) 4%,
      var(--bs-body-bg)
    );
  }
}
.group-header {
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid var(--bs-border-color);
  background: var(--bs-tertiary-bg);
  position: relative;
  padding-left: 1.1rem;
}
@supports (background: color-mix(in oklab, red 10%, white)) {
  .group-header {
    background: color-mix(
      in oklab,
      var(--group-color, var(--bs-tertiary-bg)) 10%,
      var(--bs-tertiary-bg)
    );
  }
}
.group-header::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0.32rem;
  background: var(--group-color, var(--bs-secondary));
  border-radius: 0.65rem 0 0 0;
}
.group-icon {
  color: var(--group-color, var(--bs-secondary-color));
  font-size: 1rem;
}
.group-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--bs-body-color);
}
.group-count {
  white-space: nowrap;
}
/* Cluster progression + menu d'actions du groupe : ne se rétrécit pas, mais
     reste compact (le titre, lui, peut être tronqué pour laisser la place). */
.group-actions {
  flex-shrink: 0;
}
.group-actions .progress.tiny {
  min-width: 140px;
}
.group-pct {
  min-width: 36px;
  text-align: right;
}
.group-body {
  padding: 0.5rem 0.75rem 0.75rem;
}
/* Les exec-items à l'intérieur d'un group-block : style légèrement plus discret */
.group-body .exec-item {
  background: var(--bs-body-bg);
}
.group-body .exec-item + .exec-item {
  margin-top: 0.4rem;
}

/* =========================================================
    TOOLBAR + THEME Choices.js (filtre multi)
    ========================================================= */
.steps-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  align-items: center;
}
.steps-toolbar .input-group {
  max-width: 520px;
}
.steps-toolbar .input-group-text {
  padding: 0.35rem 0.5rem;
}
.steps-toolbar .choices {
  min-width: 240px;
  margin: 0 !important;
  display: inline-flex;
  align-items: center;
}
.steps-toolbar .choices__inner {
  display: flex;
  align-items: center;
  min-height: calc(1.5em + 0.5rem + 2px);
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  border: 1px solid var(--bs-border-color);
  background: var(--bs-body-bg);
  font-size: 0.875rem;
  line-height: 1.5;
  box-sizing: border-box;
}
.steps-toolbar .choices__list--single .choices__item {
  padding: 0;
}
.steps-toolbar .choices__input,
.steps-toolbar .choices__input--cloned {
  background: transparent !important;
  color: var(--bs-body-color);
  border: 0;
  box-shadow: none;
  padding: 0;
  margin: 0;
  line-height: 1.5;
}
.steps-toolbar .choices__list--dropdown,
.steps-toolbar .choices__list[aria-expanded] {
  border: 1px solid var(--bs-border-color);
  border-radius: 0.375rem;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  background: var(--bs-body-bg);
}
.steps-toolbar .choices__item--selectable.is-highlighted {
  background: var(--bs-tertiary-bg);
  color: var(--bs-body-color);
}
.steps-toolbar .choices__placeholder {
  color: var(--bs-secondary-color) !important;
  opacity: 0.9;
}
.steps-toolbar .choices__button {
  filter: none;
  opacity: 0.7;
}
.steps-toolbar .choices__button:hover {
  opacity: 1;
}
[data-bs-theme="dark"] .steps-toolbar .choices__inner {
  background: var(--bs-body-bg);
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
}
[data-bs-theme="dark"] .steps-toolbar .choices__list--dropdown,
[data-bs-theme="dark"] .steps-toolbar .choices__list[aria-expanded] {
  background: var(--bs-body-bg);
  border-color: var(--bs-border-color);
}

/* =========================================================
     SECTIONS (bandeau + couleur contextuelle)
     - NE PAS redéfinir --section-cl ici pour laisser hériter
       la valeur posée sur .section-block (inline style)
     ========================================================= */
.step-section {
  background: var(--bs-tertiary-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 0.55rem;
  padding: 0.6rem 0.8rem;
}
.step-section .bar {
  width: 0.4rem;
  align-self: stretch;
  border-radius: 0.4rem;
  background: var(--section-cl, #6c757d);
  opacity: 0.95;
  margin-right: 0.6rem;
}
.step-section .title {
  font-weight: 700;
}
.step-section .desc {
  font-size: 0.9rem;
}

:root,
[data-bs-theme="light"] {
  --section-bg-str: 12%;
  --section-bd-str: 40%;
  --section-text-str: 35%;
}
[data-bs-theme="dark"] {
  --section-bg-str: 22%;
  --section-bd-str: 55%;
  --section-text-str: 55%;
}

@supports (background: color-mix(in oklab, red 10%, white)) {
  .step-section {
    background: color-mix(
      in oklab,
      var(--section-cl, #6c757d) var(--section-bg-str),
      var(--bs-body-bg)
    );
    border-color: color-mix(
      in oklab,
      var(--section-cl, #6c757d) var(--section-bd-str),
      var(--bs-body-bg)
    );
  }
  .step-section .title,
  .step-section .desc {
    color: color-mix(
      in oklab,
      var(--section-cl, #6c757d) var(--section-text-str),
      var(--bs-body-color)
    );
  }
}

/* Espace entre l’en-tête de section et ses étapes */
.section-block .js-section-items {
  margin-top: 0.6rem;
}

/* =========================================================
    CARTES ÉTAPE (sobre + accent gauche)
    ========================================================= */
.step-card {
  position: relative;
  border-radius: 0.6rem;
  border: 1px solid var(--bs-border-color);
  background: var(--bs-body-bg);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  transition:
    background-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.08s ease;
}
@supports (background: color-mix(in oklab, red 10%, white)) {
  .step-card {
    background: color-mix(
      in oklab,
      var(--bs-body-bg) 96%,
      var(--bs-body-color)
    );
  }
}
.step-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  border-radius: 0.6rem 0 0 0.6rem;
  background: var(--bs-border-color);
}
.step-card:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
  transform: translateY(-1px);
}
@supports selector(:has(*)) {
  .step-line:has(.peu-toggle:checked) .step-card::before {
    background: color-mix(in oklab, var(--bs-success) 85%, var(--bs-body-bg));
  }
}
.step-card .card-body {
  padding: 0.75rem 1rem;
}
.step-card {
  cursor: default;
}
.step-title {
  font-weight: 600;
}
.step-meta {
  color: var(--bs-secondary-color);
  opacity: 0.9;
}

/* =========================================================
    HIÉRARCHIE (style ClickUp)
    ========================================================= */
:root {
  --check-w: 1.15rem;
  --indent-w: 2.25rem;
}
.tree {
  --check-w: 1.15rem;
  --indent-w: 2.25rem;
  --row-gap: 0.55rem;
  --radius: 0.55rem;
}
/* La 3e piste est en minmax(0,1fr) (et non 1fr) pour pouvoir rétrécir sous la
     taille min-content de son contenu : sans ça, une carte d'étape au contenu
     large (mot insécable, tableau, libellé long) force la grille à dépasser la
     largeur de l'écran. Couplé à .content{min-width:0} ci-dessous. */
.tree-row {
  display: grid;
  grid-template-columns: var(--indent, 0px) minmax(
      1.1rem,
      var(--check-w, 1.15rem)
    ) minmax(0, 1fr);
  align-items: start;
  gap: var(--row-gap, 0.55rem);
}
.tree-row > .content {
  min-width: 0;
}
.tree-row + .tree-row {
  margin-top: 0.5rem;
}
.tree-row.level-0 {
  --indent: 0px;
}
.tree-row.level-1 {
  --indent: var(--indent-w, 2.25rem);
}

/* Étape PEU masquée : grisée + barrée + désactivée visuellement */
.tree-row.peu-masquee .step-card,
.tree-row.peu-masquee .step-title,
.tree-row.peu-masquee .step-header-line2 {
  opacity: 0.55;
}
.tree-row.peu-masquee .step-title {
  text-decoration: line-through;
}
.tree-row.peu-masquee .drag-handle {
  pointer-events: none;
  opacity: 0.3;
}

/* Bascule des boutons masquer/restaurer + badge selon l'état */
.tree-row .js-peu-masque-badge {
  display: none;
}
.tree-row .js-peu-restore-btn {
  display: none;
}
.tree-row.peu-masquee .js-peu-detach-btn {
  display: none;
}
.tree-row.peu-masquee .js-peu-restore-btn {
  display: inline-flex;
}
.tree-row.peu-masquee .js-peu-masque-badge {
  display: inline-block;
}
.indent-col {
  position: relative;
}
.level-1 .indent-col::before {
  content: "";
  position: absolute;
  left: calc(var(--indent-w, 2.25rem) / 2 - 0.5px);
  top: 0.45rem;
  bottom: 0.45rem;
  width: 1px;
  background: var(--bs-border-color);
  opacity: 0.5;
}
.level-1.first-of-section .indent-col::after {
  content: "";
  position: absolute;
  left: calc(var(--indent-w, 2.25rem) / 2 - 0.5px);
  top: 0.45rem;
  width: calc(var(--indent-w, 2.25rem) / 2);
  height: 0.7rem;
  border-left: 1px solid var(--bs-border-color);
  border-bottom: 1px solid var(--bs-border-color);
  border-bottom-left-radius: 0.35rem;
  opacity: 0.5;
}
.check-col {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

/* =========================================================
    CHECKBOXES (étapes & sections)
    ========================================================= */
.form-check-input.peu-toggle,
.form-check-input.section-toggle {
  width: var(--check-w, 1.15rem);
  height: var(--check-w, 1.15rem);
  margin-top: 0.15rem;
  cursor: pointer;
  border: 2px solid var(--bs-border-color);
  border-radius: 0.35rem;
  background-color: var(--bs-body-bg);
  transition: all 0.15s ease;
  appearance: none;
}
.form-check-input.peu-toggle:hover,
.form-check-input.section-toggle:hover {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.15rem rgba(var(--bs-primary-rgb), 0.18);
}
.form-check-input.peu-toggle:checked {
  background-color: var(--bs-success);
  border-color: var(--bs-success);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='white'%3e%3cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 00-1.414 0L8 12.586 4.707 9.293a1 1 0 10-1.414 1.414l4 4a1 1 0 001.414 0l8-8a1 1 0 000-1.414z' clip-rule='evenodd'/%3e%3c/svg%3e");
  background-size: 80% 80%;
  background-position: center;
  background-repeat: no-repeat;
}
.form-check-input.section-toggle:checked {
  background-color: var(--section-cl, #6c757d);
  border-color: var(--section-cl, #6c757d);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='white'%3e%3cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 00-1.414 0L8 12.586 4.707 9.293a1 1 0 10-1.414 1.414l4 4a1 1 0 001.414 0l8-8a1 1 0 000-1.414z' clip-rule='evenodd'/%3e%3c/svg%3e");
  background-size: 80% 80%;
  background-position: center;
  background-repeat: no-repeat;
}
.form-check-input.section-toggle.indeterminate {
  background-color: var(--section-cl, #6c757d);
  border-color: var(--section-cl, #6c757d);
  background-image: linear-gradient(
    0deg,
    white 0,
    white 0.45rem,
    transparent 0.45rem,
    transparent 0.8rem,
    white 0.8rem,
    white 1.25rem
  );
}
.drag-handle {
  cursor: grab;
  opacity: 0.6;
}
.drag-handle:active {
  cursor: grabbing;
}

/* =========================================================
     ACCENTS DE SECTION (rails + cartes enfants colorés)
     ========================================================= */
/* Hover/checked de la checkbox de section */
.section-row .section-toggle:hover {
  border-color: var(--section-cl, #6c757d);
  box-shadow: 0 0 0 0.15rem
    color-mix(in oklab, var(--section-cl, #6c757d) 30%, transparent);
}
.section-row .section-toggle:checked {
  background-color: var(--section-cl, #6c757d);
  border-color: var(--section-cl, #6c757d);
}

/* Rails verticaux et coudes */
.section-block .tree-row.level-1 .indent-col::before {
  content: "";
  position: absolute;
  left: calc(var(--indent-w, 2.25rem) / 2 - 0.5px);
  top: 0.45rem;
  bottom: 0.45rem;
  width: 1px;
  background: color-mix(
    in oklab,
    var(--section-cl, #6c757d) 65%,
    var(--bs-body-bg)
  );
  opacity: 0.9;
}
.section-block .tree-row.level-1.first-of-section .indent-col::after {
  content: "";
  position: absolute;
  left: calc(var(--indent-w, 2.25rem) / 2 - 0.5px);
  top: 0.45rem;
  width: calc(var(--indent-w, 2.25rem) / 2);
  height: 0.7rem;
  border-left: 1px solid
    color-mix(in oklab, var(--section-cl, #6c757d) 65%, var(--bs-body-bg));
  border-bottom: 1px solid
    color-mix(in oklab, var(--section-cl, #6c757d) 65%, var(--bs-body-bg));
  border-bottom-left-radius: 0.35rem;
  opacity: 0.9;
}

/* Cartes d’étapes dans la section */
.section-block .tree-row.level-1 .step-card {
  border-color: color-mix(
    in oklab,
    var(--section-cl, #6c757d) 42%,
    var(--bs-body-bg)
  );
}
@supports (background: color-mix(in oklab, red 10%, white)) {
  .section-block .tree-row.level-1 .step-card {
    background: color-mix(
      in oklab,
      var(--section-cl, #6c757d) 10%,
      var(--bs-body-bg)
    );
  }
}
.section-block .tree-row.level-1 .step-card::before {
  background: color-mix(
    in oklab,
    var(--section-cl, #6c757d) 85%,
    var(--bs-body-bg)
  );
}

/* Zones internes de section bien “accrochantes” */
.section-block .js-section-items {
  padding: 0.25rem 0;
  min-height: 12px; /* drop facile quand section vide */
}

/* Highlight visuel quand on survole une section en drag */
.section-block.drop-target .step-section {
  outline: 2px dashed
    color-mix(in oklab, var(--section-cl, #6c757d) 70%, transparent);
  outline-offset: 2px;
}
.section-block.drop-target .js-section-items {
  background: color-mix(
    in oklab,
    var(--section-cl, #6c757d) 6%,
    var(--bs-body-bg)
  );
  border-radius: 0.45rem;
}

/* assure l’animation + la rotation basée sur aria-expanded */
.btn-chevron .bi {
  display: inline-block; /* au cas où */
  transition: transform 0.2s ease;
}
.btn-chevron[aria-expanded="true"] .bi {
  transform: rotate(180deg);
}

/* pour les petits chevrons des descriptions d’étapes */
.btn-step-toggle .bi {
  display: inline-block;
  transition: transform 0.2s ease;
}
.btn-step-toggle[aria-expanded="true"] .bi {
  transform: rotate(180deg);
}
.step-main {
  min-width: 0;
}

.step-documents-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.step-documents-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.2rem;
}

/* =========================
   En-tête procédure
   ========================= */
.exec-title-wrap,
.step-main,
.step-header-summary {
  min-width: 0;
}

.exec-title-line .title {
  font-weight: 600;
  /* Affiche le nom complet : on autorise le retour à la ligne plutôt que de
     tronquer sur une seule ligne (illisible sur petits écrans / portables).
     Clamp à 2 lignes pour éviter une hauteur excessive sur les titres très longs ;
     sur grand écran le titre tient sur une ligne → aucun changement visible. */
  white-space: normal;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.exec-updated-inline {
  font-size: 0.72rem;
  color: var(--bs-secondary-color);
  white-space: nowrap;
}

/* =========================
   En-tête étape
   ========================= */
.step-header-line1 {
  min-width: 0;
}

.step-header-line1 .step-title {
  font-weight: 600;
  min-width: 0;
}

.step-updated-inline {
  font-size: 0.72rem;
  color: var(--bs-secondary-color);
  white-space: nowrap;
}

.step-header-line2 {
  min-width: 0;
}

.step-visibility-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  border: 1px solid transparent;
}

.step-visibility-badge.is-visible {
  color: #198754;
  background: rgba(25, 135, 84, 0.14);
  border-color: rgba(25, 135, 84, 0.28);
}

.step-visibility-badge.is-hidden {
  color: #9aa4b2;
  background: rgba(108, 117, 125, 0.16);
  border-color: rgba(108, 117, 125, 0.28);
}

.step-documents-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  min-width: 0;
}

.step-doc-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  max-width: 240px;
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--bs-border-color);
  background: rgba(255, 255, 255, 0.03);
  color: var(--bs-secondary-color);
  text-decoration: none;
  font-size: 0.72rem;
  line-height: 1.1;
}

.step-doc-chip:hover {
  color: var(--bs-info);
  border-color: var(--bs-info);
  text-decoration: none;
}

.step-doc-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* =========================
   Cartes récemment modifiées
   ========================= */

.step-header-line1 {
  min-width: 0;
}

.step-header-line2 {
  font-size: 0.78rem;
  color: var(--bs-secondary-color);
}

.step-updated-inline {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.step-visibility-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1;
}

.step-visibility-badge.is-visible {
  background: rgba(25, 135, 84, 0.14);
  border: 1px solid rgba(25, 135, 84, 0.35);
  color: #38c172;
}

.step-visibility-badge.is-hidden {
  background: rgba(108, 117, 125, 0.14);
  border: 1px solid rgba(108, 117, 125, 0.35);
  color: var(--bs-secondary-color);
}

.freshness-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 999px;
  font-size: 0.9rem;
  line-height: 1;
  cursor: help;
  flex: 0 0 auto;
}

.freshness-indicator i {
  line-height: 1;
}

.freshness-indicator-danger {
  color: var(--bs-danger);
}

.freshness-indicator-warning {
  color: #fd7e14;
}

.exec-title-line .freshness-indicator,
.step-header-line2 .freshness-indicator {
  margin-left: 0.1rem;
}

/* =====================================================================
   RESPONSIVE — Correctifs globaux pour la vue mobile.
   Objectif : supprimer les débordements horizontaux et faire passer les
   groupes de boutons / barres d'outils à la ligne sur petit écran.
   ===================================================================== */

/* Garde-fou : aucune image / média ne dépasse la largeur de son conteneur. */
img,
svg,
video,
canvas {
  max-width: 100%;
}

@media (max-width: 991.98px) {
  /* Le contenu principal récupère toute la largeur (la sidebar est en volet)
	   et resserre ses marges pour maximiser la largeur utile. */
  .d-flex > .flex-grow-1 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }

  /* Barre d'outils des exécutions : tout passe à la ligne proprement. */
  .steps-toolbar {
    gap: 0.5rem;
  }
  .steps-toolbar .input-group {
    max-width: 100% !important;
    flex: 1 1 100%;
  }
  .steps-toolbar .choices,
  .steps-toolbar .form-select {
    min-width: 0 !important;
  }

  /* Sélecteur de modèle (formulaire d'exécution) : plus de largeur figée. */
  #modele-select-wrapper {
    max-width: 100% !important;
  }

  /* Largeurs mini qui forçaient le débordement. */
  .progress-wrap {
    min-width: 120px;
  }
}

@media (max-width: 575.98px) {
  /* --- Lignes de liste (étapes / procédures / groupes) ---------------------
	   Pattern commun : <li class="list-group-item d-flex justify-content-between">
	     <span>libellé + badges</span>
	     <div class="btn-group">Modifier / Dupliquer / Archiver</div>
	   Sur petit écran on empile : libellé en haut, boutons pleine largeur dessous. */
  .js-etape-row,
  .js-procedure-row,
  .js-group-row {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .js-etape-row > span,
  .js-procedure-row > span,
  .js-group-row > span {
    flex: 1 1 100%;
    flex-wrap: wrap;
    min-width: 0;
  }
  .js-etape-row > .btn-group,
  .js-procedure-row > .btn-group,
  .js-group-row .btn-group {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
  }
  .js-etape-row > .btn-group > .btn,
  .js-procedure-row > .btn-group > .btn,
  .js-group-row .btn-group > .btn {
    flex: 1 1 auto;
  }

  /* En-tête des pages liste (titre + bouton "Créer …") : passe à la ligne
	   au lieu de pousser le bouton hors écran. */
  .container > .position-sticky .d-flex.justify-content-between {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  /* Marges latérales encore réduites sur très petit écran (gain de largeur utile). */
  .d-flex > .flex-grow-1 {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    max-width: 100%;
  }

  /* En-tête de groupe d'exécution : titre + actions sur deux lignes si besoin. */
  .group-header {
    gap: 0.5rem;
  }

  /* Lignes d'exécution : barre de progression compacte, et le menu d'actions
	   (⋮ + chevron) ne doit jamais être rogné (le titre cède la place). */
  .exec-item .progress-wrap {
    min-width: 80px;
  }
  .exec-actions {
    flex-shrink: 0;
  }
  .exec-title-wrap {
    min-width: 0;
  }
}

@media (max-width: 767.98px) {
  /* =================================================================
	   VUE MOBILE — passage complet : police + espacements réduits, tout
	   passe dans l'écran, aucun débordement. (Desktop non affecté.)
	   ================================================================= */

  /* Titres de page plus compacts. */
  h1 {
    font-size: 1.5rem;
  }
  h2 {
    font-size: 1.25rem;
  }
  h3 {
    font-size: 1.1rem;
  }

  /* Barre d'outils des exécutions : chaque contrôle en pleine largeur, empilé. */
  .steps-toolbar {
    gap: 0.4rem;
  }
  .steps-toolbar > * {
    width: 100%;
    margin-left: 0 !important;
  }
  .steps-toolbar .input-group {
    max-width: 100% !important;
  }
  .steps-toolbar .form-select,
  .steps-toolbar .choices {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* En-tête de page (titre + boutons "Nouvelle exécution" / "Lien public") :
	   marges verticales réduites pour ne pas gaspiller la hauteur d'écran. */
  .execution-index-page .container.exec-wrap {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
    padding-left: 0;
    padding-right: 0;
  }

  /* Barre d'actions groupée (sélection multiple) : passe à la ligne proprement. */
  #bulkBar {
    gap: 0.35rem !important;
  }

  /* --- Bloc groupe d'exécution : tient dans l'écran, arrondi visible des 2 côtés --- */
  .group-block {
    border-radius: 0.55rem;
  }
  .group-header {
    gap: 0.35rem 0.5rem;
    padding: 0.5rem 0.6rem 0.5rem 0.8rem; /* moins de padding, accent gauche conservé */
  }
  .group-title {
    font-size: 0.95rem;
  }
  /* La progression + le menu d'actions restent sur la même ligne, compacts ;
	   le titre/les badges occupent la première ligne et cèdent la place. */
  .group-actions {
    width: auto;
    gap: 0.4rem;
  }
  .group-actions .progress.tiny,
  .group-header .progress.tiny {
    min-width: 70px !important;
    flex: 1 1 auto;
  }
  .group-pct {
    font-size: 0.75rem;
  }
  /* Corps du groupe : padding latéral réduit pour gagner de la largeur utile. */
  .group-body {
    padding: 0.4rem 0.45rem 0.5rem;
  }
  /* Badges secondaires de l'en-tête de groupe (responsable, client, compteur) :
	   police réduite pour limiter l'encombrement. */
  .group-header .badge,
  .group-header .group-count,
  .group-header .small {
    font-size: 0.72rem;
  }

  /* Lignes d'exécution (repliées) : police et hauteurs réduites. */
  .exec-heading {
    padding: 0.5rem 0.6rem;
  }
  .exec-title-line .title {
    font-size: 0.92rem;
  }
  .exec-updated-inline,
  .exec-submeta,
  .exec-title-line .small {
    font-size: 0.72rem;
  }
  .exec-item .progress-wrap {
    min-width: 70px;
  }
  .exec-actions {
    flex-shrink: 0;
  }

  /* En-tête de procédure repliée : le titre occupe sa propre ligne, puis la
	   barre de progression et le menu (⋮ + chevron) sont alignés sur UNE même
	   ligne, le menu à droite de la barre (au lieu d'être renvoyé en bas à gauche). */
  .exec-heading-grid {
    grid-template-columns: 1fr auto;
    align-items: center;
    row-gap: 0.4rem;
  }
  .exec-heading-grid > div:first-child {
    grid-column: 1 / -1;
  }
  .exec-heading-grid > .exec-actions {
    grid-column: 2;
    justify-content: flex-end;
  }

  /* Hauteur des barres de progression en mobile (groupe ET procédure).
	   Une seule valeur à régler ici pour les deux. */
  .progress.tiny {
    height: 10px;
  }

  /* La barre de la PROCÉDURE est dans une grille : par défaut elle s'étire sur
	   TOUTE la largeur de la colonne (1fr) et paraît démesurée. On borne sa
	   largeur pour rester compacte, comme celle du groupe, et on garde le menu
	   d'actions juste à droite. (max-width réglable selon le rendu voulu.) */
  .exec-heading-grid > .progress-wrap {
    grid-column: 1;
    min-width: 0;
    max-width: 240px;
    align-items: center;
  }
  .exec-heading-grid .progress-wrap .progress.tiny {
    height: 10px !important; /* la valeur de hauteur voulue */
    min-height: 0 !important; /* annule tout min-height hérité */
    padding: 0 !important; /* annule le padding parasite (constaté : 16px 8px) */
    flex: 1 1 auto;
    align-self: center !important; /* empêche l'étirement vertical sur la hauteur de ligne */
  }

  /* --- Détail d'exécution déplié : lignes d'étapes (.tree-row → .step-card) --- */
  .accordion-body {
    padding: 0.5rem 0.5rem 0.75rem !important;
  }
  .tree {
    --indent-w: 0.85rem;
    --check-w: 1.05rem;
  }
  .step-card .card-body {
    padding: 0.5rem 0.6rem;
  }
  .step-title {
    font-size: 0.9rem;
  }
  .step-updated-inline,
  .step-meta {
    font-size: 0.72rem;
  }

  /* Le cluster d'actions (assignation + boutons) passe SOUS le contenu, en
	   pleine largeur, et wrappe (sinon il force la largeur → débordement). */
  .step-card .card-body > .d-flex {
    flex-wrap: wrap;
    gap: 0.4rem !important;
  }
  .step-card .card-body > .d-flex > .flex-shrink-0 {
    flex-shrink: 1 !important;
    flex-wrap: wrap;
    width: 100%;
    justify-content: flex-start;
    gap: 0.4rem;
    margin-top: 0.25rem;
  }
  /* Le sélecteur d'assignation prend toute la ligne → les petits boutons + la
	   durée passent proprement à la ligne en dessous, rien ne dépasse. */
  .step-assign {
    width: 100%;
    max-width: 100%;
  }
  .step-assign select {
    width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 auto;
  }

  /* Puces documents : jamais plus larges que l'écran. */
  .step-doc-chip {
    max-width: 100%;
  }

  /* --- Description d'étape dépliée : police + padding réduits, contenu qui
	   reste dans la carte (les tableaux/longs mots ne débordent jamais). --- */
  .step-description {
    font-size: 0.82rem;
    padding: 0.5rem !important;
  }
  .step-description :is(h1, h2, h3, h4) {
    font-size: 0.95rem;
  }
  .step-description table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }
  .step-description img {
    height: auto;
  }

  /* --- NOTES (dans l'accordéon déplié) : plus compactes. --- */
  .accordion-body > .mb-3 {
    margin-bottom: 0.6rem !important;
  }
  .accordion-body .form-label {
    font-size: 0.8rem;
    margin-bottom: 0.2rem;
  }
  .accordion-body .note-box {
    padding: 0.55rem 0.65rem !important;
    font-size: 0.85rem;
  }

  /* --- SECTIONS (bandeau "COMPTES (GÉNÉRAUX)" …) : nettement plus compactes. --- */
  .step-section {
    padding: 0.35rem 0.5rem;
    border-radius: 0.45rem;
  }
  .step-section .title {
    font-size: 0.8rem;
  }
  .step-section .bar {
    width: 0.3rem;
    margin-right: 0.45rem;
  }
  /* Sans min-width:0, le titre tronqué impose sa largeur min-content → débordement. */
  .step-section .flex-grow-1 {
    min-width: 0;
  }
  .section-block .js-section-items {
    margin-top: 0.35rem;
  }
  /* Indentation des étapes dans une section : encore réduite en mobile.
	   (--indent-w est hérité par les .tree-row.level-1 descendantes.) */
  .section-block {
    --indent-w: 0.6rem;
  }

  /* Pied de page de l'exécution dépliée (« Procédure basée sur le modèle … »). */
  .accordion-body .text-center.small {
    font-size: 0.72rem;
    margin-top: 1rem !important;
  }

  /* --- Garde-fous anti-débordement : aucun encadré ne dépasse la largeur dispo.
	   (Les conteneurs internes de l'accordéon doivent pouvoir rétrécir à 0.) --- */
  .group-block,
  .exec-item {
    max-width: 100%;
  }
  .exec-title-line .title,
  .step-title {
    overflow-wrap: anywhere;
  }
  .accordion-body,
  .accordion-body .tree,
  .accordion-body .js-step-sortable,
  .accordion-body .section-block,
  .accordion-body .js-section-items,
  .accordion-body .tree-row,
  .accordion-body .content,
  .accordion-body .note-box,
  .accordion-body .step-section,
  .accordion-body .step-card {
    min-width: 0;
    max-width: 100%;
  }
}