.flow-portal,
.flow-auth-card,
.flow-empty-state,
.flow-error-state {
  box-sizing: border-box;
  font-family: inherit;
}

.flow-portal {
  max-width: 1320px;
  margin: 40px auto;
  padding: 0 24px 60px;
}

.flow-portal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 30px;
  padding: 30px;
  border: 1px solid #e2e8f0;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.07);
}

.flow-portal__eyebrow {
  display: block;
  margin-bottom: 8px;
  color: var(--flow-primary);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.flow-portal__header h1 {
  margin: 0;
  font-size: 32px;
}

.flow-portal__header p {
  margin: 9px 0 0;
  color: #64748b;
}

.flow-organization-block {
  margin-bottom: 24px;
  padding: 25px;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
}

.flow-organization-block__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}

.flow-organization-block h2 {
  margin: 8px 0 0;
}

.flow-role-badge,
.flow-count-badge,
.flow-workspace-card__type,
.flow-workspace-card__status {
  display: inline-flex;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.flow-role-badge {
  background: #eef2ff;
  color: #4338ca;
}

.flow-count-badge {
  background: #f1f5f9;
  color: #475569;
}

.flow-workspace-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px;
}

.flow-workspace-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 180px;
  padding: 20px;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: #f8fafc;
}

.flow-workspace-card h3 {
  margin: 12px 0 8px;
}

.flow-workspace-card p {
  margin: 0;
  color: #64748b;
  font-size: 12px;
}

.flow-workspace-card__type {
  background: #e0f2fe;
  color: #0369a1;
}

.flow-workspace-card__status {
  align-self: flex-start;
  margin-top: 20px;
  background: #ecfdf5;
  color: #047857;
}

.flow-button {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #fff;
  color: #334155;
  font-weight: 700;
  text-decoration: none;
}

.flow-button--primary {
  border-color: var(--flow-primary);
  background: var(--flow-primary);
  color: #fff;
}

.flow-auth-card,
.flow-empty-state,
.flow-error-state {
  width: min(520px, calc(100% - 32px));
  margin: 70px auto;
  padding: 30px;
  border: 1px solid #e2e8f0;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.1);
}

.flow-auth-eyebrow {
  color: var(--flow-primary);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.flow-auth-card h1 {
  margin: 8px 0 10px;
}

.flow-auth-intro,
.flow-auth-footer {
  color: #64748b;
}

.flow-auth-card input[type="text"],
.flow-auth-card input[type="password"] {
  width: 100%;
  min-height: 44px;
}

.flow-auth-card input[type="submit"] {
  min-height: 42px;
  padding: 0 18px;
  border: 0;
  border-radius: 10px;
  background: var(--flow-primary);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}

@media (max-width: 900px) {
  .flow-workspace-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .flow-portal {
    margin-top: 20px;
    padding: 0 14px 40px;
  }

  .flow-portal__header,
  .flow-organization-block__header {
    flex-direction: column;
  }

  .flow-workspace-grid {
    grid-template-columns: 1fr;
  }
}

.flow-portal__back {
  display: inline-block;
  margin-bottom: 14px;
  color: var(--flow-primary);
  font-weight: 700;
  text-decoration: none;
}

.flow-workspace-card {
  color: inherit;
  text-decoration: none;
  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.flow-workspace-card:hover {
  border-color: #c7d2fe;
  color: inherit;
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08);
}

.flow-workspace-modules {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 15px;
  margin-bottom: 24px;
}

.flow-module-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: #fff;
  color: inherit;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}

.flow-module-card:hover {
  border-color: #c7d2fe;
  color: inherit;
}

.flow-module-card__icon {
  font-size: 26px;
}

.flow-module-card strong,
.flow-module-card span {
  display: block;
}

.flow-module-card div span {
  margin-top: 5px;
  color: #64748b;
  font-size: 12px;
}

.flow-workspace-panel {
  padding: 24px;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
}

.flow-workspace-panel__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid #f1f5f9;
}

.flow-workspace-panel__header h2 {
  margin: 4px 0 0;
}

.flow-module-content {
  min-height: 100px;
  padding: 18px;
  border-radius: 14px;
  background: #f8fafc;
  color: #64748b;
}

@media (max-width: 900px) {
  .flow-workspace-modules {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .flow-workspace-modules {
    grid-template-columns: 1fr;
  }

  .flow-workspace-panel__header {
    flex-direction: column;
  }
}
/* ==========================================
   COCKPIT AFFILIÉ — CRÉATION CLIENT
========================================== */

.flow-organization-block__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

.flow-front-modal[hidden] {
  display: none;
}

.flow-front-modal {
  position: fixed;
  z-index: 999999;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.flow-front-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.64);
  backdrop-filter: blur(5px);
}

.flow-front-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(680px, 100%);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding: 28px;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 30px 90px rgba(15, 23, 42, 0.28);
}

.flow-front-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}

.flow-front-modal__header h2 {
  margin: 4px 0;
}

.flow-front-modal__header p {
  margin: 0;
  color: #64748b;
}

.flow-front-modal__close {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: #f1f5f9;
  color: #334155;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.flow-front-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.flow-front-field {
  margin: 0;
}

.flow-front-field--wide {
  grid-column: 1 / -1;
}

.flow-front-field label {
  display: block;
  margin-bottom: 7px;
  color: #334155;
  font-weight: 700;
}

.flow-front-field input,
.flow-front-field textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #fff;
  font: inherit;
}

.flow-front-field textarea {
  resize: vertical;
}

.flow-front-feedback {
  min-height: 24px;
  margin-top: 16px;
  font-weight: 700;
}

.flow-front-feedback[data-type="error"] {
  color: #b91c1c;
}

.flow-front-feedback[data-type="success"] {
  color: #047857;
}

.flow-front-feedback[data-type="info"] {
  color: #0369a1;
}

.flow-front-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 18px;
}

body.flow-front-modal-open {
  overflow: hidden;
}

@media (max-width: 640px) {
  .flow-organization-block__actions {
    width: 100%;
    justify-content: flex-start;
  }

  .flow-front-form-grid {
    grid-template-columns: 1fr;
  }

  .flow-front-field--wide {
    grid-column: auto;
  }

  .flow-front-modal__dialog {
    padding: 20px;
  }

  .flow-front-modal__actions {
    flex-direction: column-reverse;
  }

  .flow-front-modal__actions .flow-button {
    width: 100%;
  }
}

/* ==========================================
   COCKPIT AFFILIÉ — CLIENTS
========================================== */

.flow-client-portfolio {
  margin-bottom: 28px;
  padding-bottom: 28px;
  border-bottom: 1px solid #e2e8f0;
}

.flow-client-portfolio__header,
.flow-workspace-section-title {
  margin-bottom: 16px;
}

.flow-client-portfolio__header h3,
.flow-workspace-section-title h3 {
  margin: 4px 0 0;
  font-size: 21px;
}

.flow-client-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px;
}

.flow-client-card {
  display: flex;
  min-height: 220px;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
  padding: 20px;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}

.flow-client-card h4 {
  margin: 12px 0 16px;
  font-size: 18px;
}

.flow-client-card__status {
  display: inline-flex;
  padding: 5px 9px;
  border-radius: 999px;
  background: #ecfdf5;
  color: #047857;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.flow-client-card dl {
  margin: 0;
}

.flow-client-card dl div {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 10px;
  padding: 7px 0;
  border-top: 1px solid #f1f5f9;
}

.flow-client-card dt {
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.flow-client-card dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  color: #334155;
  font-size: 13px;
}

.flow-client-card__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.flow-client-card__actions .flow-button {
  width: 100%;
}

.flow-client-loading,
.flow-error-inline {
  grid-column: 1 / -1;
  padding: 20px;
  border-radius: 14px;
  background: #f8fafc;
  color: #64748b;
}

.flow-error-inline {
  background: #fef2f2;
  color: #b91c1c;
}

.flow-front-field select {
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #fff;
  font: inherit;
}

@media (max-width: 980px) {
  .flow-client-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .flow-client-grid {
    grid-template-columns: 1fr;
  }
}

/* Actions des cartes clients */

.flow-client-card__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.flow-client-card__actions .flow-button {
  width: 100%;
  padding-right: 12px;
  padding-left: 12px;
}

@media (max-width: 480px) {
  .flow-client-card__actions {
    grid-template-columns: 1fr;
  }
}

/* Actions des cartes clients */

.flow-client-card__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.flow-client-card__actions .flow-button {
  width: 100%;
  padding-right: 12px;
  padding-left: 12px;
}

@media (max-width: 480px) {
  .flow-client-card__actions {
    grid-template-columns: 1fr;
  }
}

/* ==========================================
   FICHE CLIENT — PANNEAU LATÉRAL
========================================== */

.flow-client-detail[hidden] {
  display: none;
}

.flow-client-detail {
  position: fixed;
  z-index: 999998;
  inset: 0;
}

.flow-client-detail__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.58);
  backdrop-filter: blur(4px);
}

.flow-client-detail__drawer {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  width: min(680px, 100%);
  height: 100%;
  flex-direction: column;
  background: #f8fafc;
  box-shadow: -24px 0 70px rgba(15, 23, 42, 0.22);
  animation: flow-client-drawer-in 0.24s ease-out;
}

@keyframes flow-client-drawer-in {
  from {
    opacity: 0;
    transform: translateX(40px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.flow-client-detail__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 28px;
  border-bottom: 1px solid #e2e8f0;
  background: #fff;
}

.flow-client-detail__header h2 {
  margin: 4px 0 12px;
  font-size: 28px;
}

.flow-client-detail__body {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
}

.flow-client-detail__section {
  margin-bottom: 20px;
  padding: 22px;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}

.flow-client-detail__section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.flow-client-detail__section-header h3 {
  margin: 4px 0 0;
}

.flow-client-detail__info {
  margin: 0;
}

.flow-client-detail__info > div {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid #f1f5f9;
}

.flow-client-detail__info > div:first-child {
  border-top: 0;
}

.flow-client-detail__info dt {
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.flow-client-detail__info dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  color: #334155;
  font-weight: 600;
}

.flow-client-detail__workspaces {
  display: grid;
  gap: 12px;
}

.flow-client-workspace-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #f8fafc;
  color: inherit;
  text-decoration: none;
  transition:
    border-color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.flow-client-workspace-row:hover {
  border-color: #c7d2fe;
  color: inherit;
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.07);
}

.flow-client-workspace-row strong,
.flow-client-workspace-row small {
  display: block;
}

.flow-client-workspace-row strong {
  margin-top: 9px;
}

.flow-client-workspace-row small {
  margin-top: 5px;
  color: #64748b;
}

.flow-client-detail__footer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 20px 24px;
  border-top: 1px solid #e2e8f0;
  background: #fff;
}

.flow-button--client-detail {
  grid-column: 1 / -1;
}

body.flow-client-detail-open {
  overflow: hidden;
}

@media (max-width: 640px) {
  .flow-client-detail__header {
    padding: 20px;
  }

  .flow-client-detail__body {
    padding: 14px;
  }

  .flow-client-detail__section {
    padding: 18px;
  }

  .flow-client-detail__info > div {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .flow-client-detail__footer {
    grid-template-columns: 1fr;
    padding: 14px;
  }

  .flow-client-workspace-row {
    align-items: flex-start;
    flex-direction: column;
  }
}

.flow-button--danger {
  border-color: #fecaca;
  background: #fff;
  color: #b91c1c;
}

.flow-button--danger:hover {
  border-color: #dc2626;
  background: #fef2f2;
  color: #991b1b;
}

.flow-client-detail__footer {
  grid-template-columns: 1fr 1fr 1fr;
}

@media (max-width: 760px) {
  .flow-client-detail__footer {
    grid-template-columns: 1fr;
  }
}

/* ==========================================
   CONTACTS — FICHE CLIENT
========================================== */

.flow-client-detail__section-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.flow-contact-archive-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  color: #64748b;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.flow-contact-archive-toggle input {
  width: 16px;
  height: 16px;
  margin: 0;
}

.flow-client-detail__contacts {
  display: grid;
  gap: 14px;
}

.flow-contact-card {
  padding: 18px;
  border: 1px solid #e2e8f0;
  border-radius: 15px;
  background: #f8fafc;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.flow-contact-card:hover {
  border-color: #c7d2fe;
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
}

.flow-contact-card[data-status="archived"] {
  border-color: #e2e8f0;
  background: #f1f5f9;
  opacity: 0.78;
}

.flow-contact-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.flow-contact-card__badges {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.flow-contact-card__primary,
.flow-contact-card__status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.flow-contact-card__primary {
  background: #eef2ff;
  color: #4338ca;
}

.flow-contact-card__status {
  background: #ecfdf5;
  color: #047857;
}

.flow-contact-card__status[data-status="archived"] {
  background: #e2e8f0;
  color: #475569;
}

.flow-contact-card h4 {
  margin: 10px 0 4px;
  color: #0f172a;
  font-size: 17px;
}

.flow-contact-card__header p {
  margin: 0;
  color: #64748b;
  font-size: 13px;
}

.flow-contact-card__details {
  margin: 16px 0 0;
}

.flow-contact-card__details > div {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid #e2e8f0;
}

.flow-contact-card__details dt {
  color: #64748b;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.flow-contact-card__details dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  color: #334155;
  font-size: 13px;
  font-weight: 600;
}

.flow-contact-card__details a {
  color: var(--flow-primary);
  text-decoration: none;
}

.flow-contact-card__details a:hover {
  text-decoration: underline;
}

.flow-contact-card__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid #e2e8f0;
  flex-wrap: wrap;
}

.flow-contact-card__actions .flow-button {
  min-height: 36px;
  padding: 0 12px;
  font-size: 12px;
}

.flow-contact-primary-field {
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 14px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #f8fafc;
  cursor: pointer;
}

.flow-contact-primary-field input {
  width: 17px;
  min-height: auto;
  height: 17px;
  margin: 0;
}

@media (max-width: 640px) {
  .flow-client-detail__section-actions {
    width: 100%;
    align-items: stretch;
    flex-direction: column;
  }

  .flow-client-detail__section-actions .flow-button {
    width: 100%;
  }

  .flow-contact-card__details > div {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .flow-contact-card__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .flow-contact-card__actions .flow-button {
    width: 100%;
  }
}

/* ==========================================
   DOCUMENTS — PORTAIL WORKSPACE
========================================== */

.flow-document-grid {
  display: grid;
  gap: 14px;
}

.flow-document-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 18px;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 7px 22px rgba(15, 23, 42, 0.04);
}

.flow-document-card__main {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: 16px;
}

.flow-document-card__icon {
  display: flex;
  width: 50px;
  height: 50px;
  flex: 0 0 50px;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: #f1f5f9;
  font-size: 25px;
}

.flow-document-card__badges {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.flow-document-card__status,
.flow-document-card__version {
  display: inline-flex;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.flow-document-card__status {
  background: #e0f2fe;
  color: #0369a1;
}

.flow-document-card__status[data-status="validated"] {
  background: #ecfdf5;
  color: #047857;
}

.flow-document-card__status[data-status="rejected"] {
  background: #fef2f2;
  color: #b91c1c;
}

.flow-document-card__status[data-status="archived"] {
  background: #e2e8f0;
  color: #475569;
}

.flow-document-card__version {
  background: #eef2ff;
  color: #4338ca;
}

.flow-document-card h3 {
  margin: 9px 0 4px;
  font-size: 17px;
}

.flow-document-card p {
  margin: 0;
  overflow-wrap: anywhere;
  color: #64748b;
  font-size: 12px;
}

.flow-document-card dl {
  display: flex;
  gap: 18px;
  margin: 12px 0 0;
}

.flow-document-card dl div {
  display: flex;
  gap: 6px;
}

.flow-document-card dt {
  color: #94a3b8;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.flow-document-card dd {
  margin: 0;
  color: #475569;
  font-size: 11px;
  font-weight: 700;
}

.flow-document-card__actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.flow-document-card__actions .flow-button {
  min-height: 38px;
  padding: 0 13px;
  font-size: 12px;
}

#flow-document-upload-modal input[type="file"] {
  min-height: auto;
  padding: 14px;
  border-style: dashed;
  background: #f8fafc;
}

@media (max-width: 800px) {
  .flow-document-card {
    align-items: stretch;
    flex-direction: column;
  }

  .flow-document-card__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .flow-document-card__actions .flow-button {
    width: 100%;
  }
}

@media (max-width: 520px) {
  .flow-document-card__main {
    flex-direction: column;
  }

  .flow-document-card dl {
    flex-direction: column;
    gap: 6px;
  }

  .flow-document-card__actions {
    grid-template-columns: 1fr;
  }
}

/* ==========================================
   DOCUMENTS — VERSIONS
========================================== */

.flow-document-versions-dialog {
  width: min(820px, 100%);
}

.flow-document-versions-list {
  display: grid;
  gap: 12px;
  margin-bottom: 24px;
}

.flow-document-version-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 15px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #f8fafc;
}

.flow-document-version-row__main {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 13px;
}

.flow-document-version-row__number {
  display: inline-flex;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: #eef2ff;
  color: #4338ca;
  font-size: 12px;
  font-weight: 900;
}

.flow-document-version-row strong,
.flow-document-version-row span {
  display: block;
}

.flow-document-version-row strong {
  overflow-wrap: anywhere;
  color: #0f172a;
}

.flow-document-version-row__main div > span {
  margin-top: 4px;
  color: #64748b;
  font-size: 11px;
}

.flow-document-version-row__actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}

.flow-document-version-row__actions .flow-button {
  min-height: 36px;
  padding: 0 12px;
  font-size: 11px;
}

.flow-document-version-form {
  padding-top: 22px;
  border-top: 1px solid #e2e8f0;
}

.flow-document-version-form input[type="file"] {
  min-height: auto;
  padding: 14px;
  border-style: dashed;
  background: #f8fafc;
}

@media (max-width: 680px) {
  .flow-document-version-row {
    align-items: stretch;
    flex-direction: column;
  }

  .flow-document-version-row__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .flow-document-version-row__actions .flow-button {
    width: 100%;
  }
}

@media (max-width: 420px) {
  .flow-document-version-row__actions {
    grid-template-columns: 1fr;
  }
}

/* ==========================================
   DOCUMENTS — VALIDATION ET REFUS
========================================== */

.flow-button--success {
  border-color: #a7f3d0;
  background: #ecfdf5;
  color: #047857;
}

.flow-button--success:hover {
  border-color: #10b981;
  background: #d1fae5;
  color: #065f46;
}

.flow-button--success:disabled,
.flow-button--danger:disabled,
.flow-button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.flow-document-card__status[data-status="received"] {
  background: #fef3c7;
  color: #92400e;
}

.flow-document-card__status[data-status="validated"] {
  background: #d1fae5;
  color: #065f46;
}

.flow-document-card__status[data-status="rejected"] {
  background: #fee2e2;
  color: #991b1b;
}

.flow-document-card__status[data-status="expired"] {
  background: #e2e8f0;
  color: #334155;
}

#flow-document-reject-comment {
  width: 100%;
  min-height: 130px;
}

@media (max-width: 900px) {
  .flow-document-card__actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .flow-document-card__actions {
    grid-template-columns: 1fr;
  }
}

/* ==========================================
   TIMELINE — PORTAIL WORKSPACE
========================================== */

.flow-timeline {
  position: relative;
  display: grid;
  gap: 0;
}

.flow-timeline__day {
  position: relative;
  z-index: 2;
  width: fit-content;
  margin: 12px 0 18px 68px;
  padding: 6px 11px;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  background: #fff;
  color: #475569;
  font-size: 11px;
  font-weight: 800;
  text-transform: capitalize;
}

.flow-timeline-entry {
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 16px;
  padding-bottom: 20px;
}

.flow-timeline-entry__rail {
  position: relative;
  display: flex;
  justify-content: center;
}

.flow-timeline-entry__rail::after {
  position: absolute;
  top: 46px;
  bottom: -20px;
  left: 50%;
  width: 2px;
  background: #e2e8f0;
  content: "";
  transform: translateX(-50%);
}

.flow-timeline-entry:last-child .flow-timeline-entry__rail::after {
  display: none;
}

.flow-timeline-entry__icon {
  position: relative;
  z-index: 1;
  display: inline-flex;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  align-items: center;
  justify-content: center;
  border: 4px solid #f8fafc;
  border-radius: 50%;
  background: #e2e8f0;
  color: #334155;
  font-size: 16px;
  font-weight: 900;
}

.flow-timeline-entry[data-tone="info"] .flow-timeline-entry__icon {
  background: #dbeafe;
  color: #1d4ed8;
}

.flow-timeline-entry[data-tone="success"] .flow-timeline-entry__icon {
  background: #d1fae5;
  color: #047857;
}

.flow-timeline-entry[data-tone="warning"] .flow-timeline-entry__icon {
  background: #fef3c7;
  color: #92400e;
}

.flow-timeline-entry[data-tone="danger"] .flow-timeline-entry__icon {
  background: #fee2e2;
  color: #b91c1c;
}

.flow-timeline-entry__content {
  min-width: 0;
  padding: 18px;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 7px 22px rgba(15, 23, 42, 0.04);
}

.flow-timeline-entry__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.flow-timeline-entry__type {
  display: inline-flex;
  margin-bottom: 7px;
  padding: 4px 8px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #475569;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.flow-timeline-entry[data-tone="success"] .flow-timeline-entry__type {
  background: #ecfdf5;
  color: #047857;
}

.flow-timeline-entry[data-tone="danger"] .flow-timeline-entry__type {
  background: #fef2f2;
  color: #b91c1c;
}

.flow-timeline-entry[data-tone="warning"] .flow-timeline-entry__type {
  background: #fffbeb;
  color: #92400e;
}

.flow-timeline-entry[data-tone="info"] .flow-timeline-entry__type {
  background: #eff6ff;
  color: #1d4ed8;
}

.flow-timeline-entry__header h3 {
  margin: 0;
  color: #0f172a;
  font-size: 17px;
}

.flow-timeline-entry__header time {
  flex: 0 0 auto;
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
}

.flow-timeline-entry__description {
  margin: 10px 0 0;
  color: #64748b;
  font-size: 13px;
}

.flow-timeline-entry__comment {
  margin: 15px 0 0;
  padding: 13px 15px;
  border: 0;
  border-left: 4px solid #ef4444;
  border-radius: 0 10px 10px 0;
  background: #fef2f2;
  color: #7f1d1d;
}

.flow-timeline-entry__comment strong,
.flow-timeline-entry__comment span {
  display: block;
}

.flow-timeline-entry__comment strong {
  margin-bottom: 5px;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.flow-timeline-entry__comment span {
  font-size: 13px;
  line-height: 1.55;
  white-space: pre-wrap;
}

.flow-timeline-entry__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 15px;
  padding-top: 12px;
  border-top: 1px solid #f1f5f9;
  color: #64748b;
  font-size: 11px;
}

.flow-timeline-entry__footer strong {
  color: #334155;
}

.flow-timeline-entry__footer code {
  padding: 3px 6px;
  border-radius: 6px;
  background: #f1f5f9;
  color: #475569;
  font-size: 9px;
}

@media (max-width: 640px) {
  .flow-timeline__day {
    margin-left: 50px;
  }

  .flow-timeline-entry {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 10px;
  }

  .flow-timeline-entry__icon {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
    border-width: 3px;
    font-size: 13px;
  }

  .flow-timeline-entry__rail::after {
    top: 38px;
  }

  .flow-timeline-entry__content {
    padding: 15px;
  }

  .flow-timeline-entry__header {
    flex-direction: column;
    gap: 8px;
  }

  .flow-timeline-entry__footer {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }
}

/* ==========================================
   FLOW CORE — FRONT OFFICE PREMIUM
========================================== */

:root {
  --flow-primary: #5147f5;
  --flow-primary-dark: #3828d8;
  --flow-secondary: #8b3df5;
  --flow-blue: #2788f5;
  --flow-mint: #31c98a;
  --flow-ink: #111936;
  --flow-text: #34405e;
  --flow-muted: #73809c;
  --flow-line: #e7eaf4;
  --flow-surface: #ffffff;
  --flow-background: #f6f8ff;
  --flow-shadow: 0 24px 70px rgba(58, 67, 111, 0.1);
}

body:has(.flow-portal) {
  background:
    radial-gradient(
      circle at 10% 5%,
      rgba(116, 100, 255, 0.09),
      transparent 30%
    ),
    radial-gradient(circle at 90% 0, rgba(39, 136, 245, 0.08), transparent 25%),
    var(--flow-background);
}

.flow-portal {
  width: min(1480px, calc(100% - 40px));
  max-width: none;
  margin: 28px auto 0;
  padding: 0 0 65px;
  color: var(--flow-text);
}

/* ==========================================
   NAVIGATION
========================================== */

.flow-portal-nav {
  position: sticky;
  z-index: 100;
  top: 14px;
  display: grid;
  grid-template-columns:
    minmax(190px, 1fr)
    auto
    minmax(190px, 1fr);
  min-height: 72px;
  align-items: center;
  gap: 26px;
  margin-bottom: 28px;
  padding: 10px 18px;
  border: 1px solid rgba(226, 232, 240, 0.85);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 14px 40px rgba(43, 50, 92, 0.08);
  backdrop-filter: blur(18px);
}

.flow-portal-nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--flow-ink);
  font-size: 20px;
  text-decoration: none;
}

.flow-portal-nav__logo {
  position: relative;
  display: inline-flex;
  width: 42px;
  height: 34px;
  align-items: center;
  justify-content: center;
}

.flow-portal-nav__logo span {
  position: absolute;
  width: 25px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--flow-blue), var(--flow-secondary));
  transform: rotate(-45deg);
}

.flow-portal-nav__logo span:first-child {
  left: 2px;
}

.flow-portal-nav__logo span:last-child {
  right: 2px;
  opacity: 0.78;
}

.flow-portal-nav__links {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 6px;
}

.flow-portal-nav__link {
  position: relative;
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 15px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #53607e;
  font: inherit;
  font-size: 13px;
  font-weight: 750;
  text-decoration: none;
  cursor: pointer;
  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    transform 0.2s ease;
}

.flow-portal-nav__link:hover,
.flow-portal-nav__link.is-active {
  background: #f0efff;
  color: var(--flow-primary);
}

.flow-portal-nav__link.is-active::after {
  position: absolute;
  right: 14px;
  bottom: -11px;
  left: 14px;
  height: 3px;
  border-radius: 999px;
  background: var(--flow-primary);
  content: "";
}

.flow-portal-nav__notification {
  display: inline-flex;
  min-width: 19px;
  height: 19px;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  border-radius: 999px;
  background: linear-gradient(
    135deg,
    var(--flow-primary),
    var(--flow-secondary)
  );
  color: #fff;
  font-size: 10px;
  font-weight: 900;
}

.flow-portal-nav__logout {
  justify-self: end;
  border-color: #dfe4ef;
  box-shadow: 0 5px 15px rgba(47, 57, 102, 0.05);
}

.flow-portal-nav__mobile-toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  border: 1px solid var(--flow-line);
  border-radius: 12px;
  background: #fff;
}

.flow-portal-nav__mobile-toggle span {
  width: 19px;
  height: 2px;
  border-radius: 99px;
  background: var(--flow-ink);
}

/* ==========================================
   HERO
========================================== */

.flow-portal-hero {
  position: relative;
  display: grid;
  grid-template-columns:
    112px
    minmax(0, 1fr)
    minmax(300px, 430px);
  min-height: 220px;
  align-items: center;
  overflow: hidden;
  gap: 28px;
  margin-bottom: 32px;
  padding: 38px 42px;
  border-color: rgba(225, 228, 250, 0.9);
  border-radius: 28px;
  background: linear-gradient(
    110deg,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(252, 251, 255, 0.97) 50%,
    rgba(242, 239, 255, 0.98) 100%
  );
  box-shadow: var(--flow-shadow);
}

.flow-portal-hero::before {
  position: absolute;
  right: -90px;
  bottom: -135px;
  width: 650px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(
    ellipse,
    rgba(102, 82, 255, 0.23),
    rgba(102, 82, 255, 0) 68%
  );
  content: "";
  transform: rotate(-12deg);
}

.flow-portal-hero::after {
  position: absolute;
  right: -30px;
  bottom: -140px;
  width: 580px;
  height: 230px;
  border: 2px solid rgba(129, 107, 255, 0.14);
  border-radius: 50%;
  content: "";
  transform: rotate(-10deg);
}

.flow-portal-hero__icon {
  position: relative;
  z-index: 2;
  display: flex;
  width: 96px;
  height: 96px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(118, 97, 255, 0.12);
  border-radius: 28px;
  background: radial-gradient(
    circle at 35% 25%,
    #fff,
    rgba(220, 214, 255, 0.9)
  );
  box-shadow:
    0 18px 38px rgba(94, 73, 238, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  color: var(--flow-primary);
  font-size: 46px;
}

.flow-portal-hero__content {
  position: relative;
  z-index: 2;
}

.flow-portal-hero__content h1 {
  margin: 4px 0 12px;
  color: var(--flow-ink);
  font-size: clamp(27px, 3vw, 40px);
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.flow-portal-hero__content p {
  max-width: 640px;
  margin: 0;
  color: var(--flow-muted);
  font-size: 17px;
}

.flow-portal-hero__visual {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 150px;
}

.flow-hero-orb {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 25px;
  background: rgba(255, 255, 255, 0.74);
  box-shadow:
    0 22px 45px rgba(78, 63, 181, 0.16),
    inset 0 1px 0 #fff;
  backdrop-filter: blur(12px);
  animation: flow-orb-float 5s ease-in-out infinite;
}

.flow-hero-orb--folder {
  top: 0;
  left: 18%;
  width: 102px;
  height: 102px;
  color: #8055f6;
  font-size: 45px;
  transform: rotate(-7deg);
}

.flow-hero-orb--document {
  top: -12px;
  right: 23%;
  width: 78px;
  height: 78px;
  color: #3aa3f4;
  font-size: 35px;
  animation-delay: -0.8s;
  transform: rotate(7deg);
}

.flow-hero-orb--check {
  right: 2%;
  bottom: 0;
  width: 86px;
  height: 86px;
  color: var(--flow-mint);
  font-size: 35px;
  animation-delay: -1.7s;
  transform: rotate(11deg);
}

.flow-hero-star {
  position: absolute;
  color: #fff;
  text-shadow: 0 0 24px rgba(92, 72, 255, 0.65);
}

.flow-hero-star--one {
  top: 18px;
  left: 2%;
  font-size: 31px;
}

.flow-hero-star--two {
  right: 7%;
  bottom: 6px;
  font-size: 37px;
}

.flow-portal-hero__logout {
  display: none;
}

@keyframes flow-orb-float {
  0%,
  100% {
    translate: 0 0;
  }

  50% {
    translate: 0 -8px;
  }
}

/* ==========================================
   BLOCS ORGANISATION
========================================== */

.flow-portal__organizations {
  scroll-margin-top: 110px;
}

.flow-organization-block {
  position: relative;
  overflow: hidden;
  margin-bottom: 28px;
  padding: 34px;
  border-color: rgba(226, 230, 240, 0.95);
  border-radius: 28px;
  background: linear-gradient(
    150deg,
    rgba(255, 255, 255, 0.99),
    rgba(252, 253, 255, 0.98)
  );
  box-shadow: var(--flow-shadow);
}

.flow-organization-block::before {
  position: absolute;
  top: 0;
  right: 0;
  width: 360px;
  height: 180px;
  background: radial-gradient(
    circle at top right,
    rgba(100, 80, 255, 0.055),
    transparent 68%
  );
  content: "";
  pointer-events: none;
}

.flow-organization-block__header {
  position: relative;
  z-index: 2;
  align-items: center;
  margin-bottom: 30px;
  padding-bottom: 25px;
  border-bottom: 1px solid #eef0f6;
}

.flow-organization-block h2 {
  margin-top: 10px;
  color: var(--flow-ink);
  font-size: 30px;
  letter-spacing: -0.03em;
}

.flow-role-badge {
  background: linear-gradient(135deg, #f1efff, #ebe8ff);
  color: var(--flow-primary);
}

.flow-count-badge {
  padding: 7px 11px;
  background: #f4f6fb;
  color: #46516e;
}

.flow-organization-block__actions .flow-button--primary {
  min-height: 48px;
  padding: 0 21px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, #3e57f5, #7d31ef);
  box-shadow: 0 13px 25px rgba(79, 70, 229, 0.24);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.flow-organization-block__actions .flow-button--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 17px 31px rgba(79, 70, 229, 0.3);
}

/* ==========================================
   CARTES CLIENTS
========================================== */

.flow-client-portfolio {
  position: relative;
  z-index: 2;
}

.flow-client-portfolio__header h3,
.flow-workspace-section-title h3 {
  color: var(--flow-ink);
  font-size: 25px;
  letter-spacing: -0.025em;
}

.flow-client-grid {
  gap: 20px;
}

.flow-client-card {
  position: relative;
  overflow: hidden;
  min-height: 300px;
  padding: 24px;
  border-color: #e4e8f1;
  border-radius: 20px;
  background: linear-gradient(155deg, #fff, #fcfdff);
  box-shadow: 0 10px 28px rgba(38, 46, 83, 0.055);
  transition:
    border-color 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.flow-client-card::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 5px;
  border-radius: 20px 0 0 20px;
  background: linear-gradient(180deg, var(--flow-mint), #88e3bf);
  content: "";
}

.flow-client-card:nth-child(3n + 2)::before {
  background: linear-gradient(180deg, #65aef5, #b2d8ff);
}

.flow-client-card:nth-child(3n)::before {
  background: linear-gradient(180deg, #37c994, #9ee9cf);
}

.flow-client-card:hover {
  border-color: #d6d9ff;
  transform: translateY(-5px);
  box-shadow: 0 22px 45px rgba(48, 54, 104, 0.11);
}

.flow-client-card > div:first-child::before {
  display: flex;
  width: 64px;
  height: 64px;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  border-radius: 17px;
  background: linear-gradient(145deg, #e8faf3, #d8f7ea);
  color: #179668;
  content: "⌂";
  font-size: 30px;
  font-weight: 900;
}

.flow-client-card:nth-child(3n + 2) > div:first-child::before {
  background: linear-gradient(145deg, #eaf4ff, #dcecff);
  color: #2b7fe8;
  content: "▦";
}

.flow-client-card:nth-child(3n) > div:first-child::before {
  background: linear-gradient(145deg, #e7faf2, #d7f6e8);
  color: #159a67;
  content: "⌘";
}

.flow-client-card__status {
  position: absolute;
  top: 29px;
  left: 103px;
  padding: 6px 10px;
  background: #e8faf2;
  color: #087b53;
}

.flow-client-card h4 {
  margin: 7px 0 18px;
  color: var(--flow-ink);
  font-size: 20px;
  letter-spacing: -0.02em;
}

.flow-client-card dl div {
  grid-template-columns: 68px 1fr;
  padding: 10px 0;
  border-color: #eff1f6;
}

.flow-client-card dt {
  color: #63708d;
}

.flow-client-card dd {
  color: #53607b;
}

.flow-client-card__actions {
  gap: 11px;
}

.flow-client-card__actions .flow-button {
  min-height: 46px;
  border-color: #dce1ed;
  border-radius: 11px;
  background: #fff;
  color: #46516d;
  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    transform 0.2s ease;
}

.flow-client-card__actions .flow-button:hover {
  border-color: #cac9ff;
  background: #f8f7ff;
  color: var(--flow-primary);
  transform: translateY(-1px);
}

.flow-client-card__actions .flow-button--primary {
  border: 0;
  background: linear-gradient(135deg, #315fee, #8c2ff0);
  color: #fff;
  box-shadow: 0 10px 20px rgba(80, 69, 229, 0.18);
}

.flow-button--client-detail {
  background: #f8f9fc !important;
}

/* ==========================================
   WORKSPACES
========================================== */

.flow-workspace-grid {
  position: relative;
  z-index: 2;
  gap: 20px;
}

.flow-workspace-card {
  min-height: 210px;
  padding: 23px;
  border-color: #e4e8f1;
  border-radius: 20px;
  background: linear-gradient(155deg, #fff, #f9fbff);
  box-shadow: 0 9px 25px rgba(37, 48, 88, 0.045);
}

.flow-workspace-card:hover {
  border-color: #c9c8ff;
  transform: translateY(-5px);
  box-shadow: 0 22px 45px rgba(56, 60, 116, 0.11);
}

/* ==========================================
   RÉASSURANCE
========================================== */

.flow-trust-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  margin: 15px auto 0;
  padding: 26px 55px;
}

.flow-trust-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.flow-trust-item__icon {
  display: flex;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  align-items: center;
  justify-content: center;
  border-radius: 15px;
  background: linear-gradient(145deg, #f1efff, #e9e7ff);
  color: var(--flow-primary);
  font-size: 22px;
  font-weight: 900;
  box-shadow: 0 8px 20px rgba(79, 70, 229, 0.1);
}

.flow-trust-item strong,
.flow-trust-item span {
  display: block;
}

.flow-trust-item strong {
  margin-bottom: 4px;
  color: var(--flow-ink);
  font-size: 13px;
}

.flow-trust-item div > span {
  color: var(--flow-muted);
  font-size: 12px;
}

/* ==========================================
   MICRO-INTERACTIONS
========================================== */

.flow-button,
.flow-client-card,
.flow-workspace-card,
.flow-module-card {
  will-change: transform;
}

.flow-button:focus-visible,
.flow-portal-nav__link:focus-visible,
.flow-workspace-card:focus-visible {
  outline: 3px solid rgba(81, 71, 245, 0.25);
  outline-offset: 3px;
}

/* ==========================================
   RESPONSIVE
========================================== */

@media (max-width: 1120px) {
  .flow-portal-nav {
    grid-template-columns: 1fr auto;
  }

  .flow-portal-nav__links {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    left: 0;
    display: none;
    align-items: stretch;
    flex-direction: column;
    padding: 12px;
    border: 1px solid var(--flow-line);
    border-radius: 16px;
    background: #fff;
    box-shadow: var(--flow-shadow);
  }

  .flow-portal-nav.is-open .flow-portal-nav__links {
    display: flex;
  }

  .flow-portal-nav__link {
    justify-content: flex-start;
  }

  .flow-portal-nav__link.is-active::after {
    display: none;
  }

  .flow-portal-nav__logout {
    display: none;
  }

  .flow-portal-nav__mobile-toggle {
    display: flex;
  }

  .flow-portal-hero {
    grid-template-columns:
      90px
      minmax(0, 1fr);
  }

  .flow-portal-hero__visual {
    display: none;
  }

  .flow-portal-hero__icon {
    width: 80px;
    height: 80px;
    border-radius: 22px;
    font-size: 38px;
  }
}

@media (max-width: 760px) {
  .flow-portal {
    width: min(100% - 24px, 1480px);
    margin-top: 12px;
  }

  .flow-portal-nav {
    top: 7px;
    min-height: 62px;
    border-radius: 16px;
  }

  .flow-portal-nav__brand {
    font-size: 17px;
  }

  .flow-portal-hero {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 28px 24px;
    border-radius: 22px;
  }

  .flow-portal-hero__icon {
    width: 62px;
    height: 62px;
    border-radius: 18px;
    font-size: 29px;
  }

  .flow-portal-hero__content p {
    font-size: 15px;
  }

  .flow-organization-block {
    padding: 24px 18px;
    border-radius: 22px;
  }

  .flow-organization-block h2 {
    font-size: 25px;
  }

  .flow-trust-strip {
    grid-template-columns: 1fr;
    gap: 17px;
    padding: 24px 10px;
  }

  .flow-trust-item {
    justify-content: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .flow-hero-orb,
  .flow-client-card,
  .flow-workspace-card,
  .flow-button {
    animation: none;
    transition: none;
  }
}

/* ==========================================
   DASHBOARD INTELLIGENT
========================================== */

.flow-smart-dashboard {
  position: relative;
  overflow: hidden;
  margin-bottom: 30px;
  padding: 32px;
  border: 1px solid rgba(226, 230, 242, 0.95);
  border-radius: 28px;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.99),
    rgba(249, 250, 255, 0.98)
  );
  box-shadow: 0 24px 70px rgba(53, 62, 112, 0.09);
}

.flow-smart-dashboard::before {
  position: absolute;
  top: -180px;
  right: -130px;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(105, 84, 255, 0.09),
    transparent 68%
  );
  content: "";
  pointer-events: none;
}

.flow-smart-dashboard__header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 25px;
}

.flow-smart-dashboard__header h2 {
  margin: 4px 0 8px;
  color: var(--flow-ink, #111936);
  font-size: clamp(25px, 2.5vw, 34px);
  letter-spacing: -0.035em;
}

.flow-smart-dashboard__header p {
  max-width: 690px;
  margin: 0;
  color: var(--flow-muted, #73809c);
}

.flow-smart-dashboard__date {
  display: flex;
  min-width: 155px;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  padding: 12px 15px;
  border: 1px solid #e7eaf4;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.82);
}

.flow-smart-dashboard__date span {
  color: #8490a9;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.flow-smart-dashboard__date strong {
  color: #26314d;
  font-size: 13px;
  text-transform: capitalize;
}

.flow-smart-kpis {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 22px;
}

.flow-smart-kpi {
  position: relative;
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 15px;
  overflow: hidden;
  padding: 20px;
  border: 1px solid #e7eaf3;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(41, 49, 91, 0.045);
  transition:
    transform 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease;
}

.flow-smart-kpi:hover {
  border-color: #d8d7ff;
  transform: translateY(-3px);
  box-shadow: 0 17px 34px rgba(51, 58, 105, 0.09);
}

.flow-smart-kpi::after {
  position: absolute;
  right: -30px;
  bottom: -35px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: currentColor;
  content: "";
  opacity: 0.045;
}

.flow-smart-kpi__icon {
  display: inline-flex;
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  align-items: center;
  justify-content: center;
  border-radius: 15px;
  background: #f0efff;
  color: #5147f5;
  font-size: 24px;
  font-weight: 900;
}

.flow-smart-kpi[data-tone="blue"] .flow-smart-kpi__icon {
  background: #eaf4ff;
  color: #2788f5;
}

.flow-smart-kpi[data-tone="green"] .flow-smart-kpi__icon {
  background: #e7faf2;
  color: #159a67;
}

.flow-smart-kpi[data-tone="red"] .flow-smart-kpi__icon {
  background: #fff0f0;
  color: #dc3c4f;
}

.flow-smart-kpi > div {
  min-width: 0;
}

.flow-smart-kpi div > span,
.flow-smart-kpi small {
  display: block;
}

.flow-smart-kpi div > span {
  overflow: hidden;
  color: #68748f;
  font-size: 11px;
  font-weight: 800;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.flow-smart-kpi strong {
  display: block;
  margin: 3px 0;
  color: #111936;
  font-size: 31px;
  line-height: 1;
  letter-spacing: -0.04em;
}

.flow-smart-kpi strong.is-animating {
  animation: flow-smart-counter 0.35s ease-out;
}

.flow-smart-kpi small {
  overflow: hidden;
  color: #929bb0;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@keyframes flow-smart-counter {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.flow-smart-dashboard__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns:
    minmax(0, 1.6fr)
    minmax(290px, 0.8fr);
  gap: 18px;
}

.flow-smart-activity,
.flow-smart-actions {
  min-width: 0;
  padding: 22px;
  border: 1px solid #e7eaf3;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.92);
}

.flow-smart-section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 17px;
}

.flow-smart-section-header h3 {
  margin: 3px 0 0;
  color: #111936;
  font-size: 20px;
  letter-spacing: -0.025em;
}

.flow-smart-section-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #5147f5;
  font-size: 12px;
  font-weight: 750;
  text-decoration: none;
}

.flow-smart-section-link:hover {
  color: #3828d8;
}

.flow-smart-activity__list {
  display: grid;
  gap: 9px;
}

.flow-smart-activity-item {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 22px;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: #fafbfe;
  color: inherit;
  text-decoration: none;
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease,
    transform 0.2s ease;
}

.flow-smart-activity-item:hover {
  border-color: #dfdefe;
  background: #f8f7ff;
  color: inherit;
  transform: translateX(3px);
}

.flow-smart-activity-item__icon {
  display: inline-flex;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  background: #eff1f6;
  color: #5e6983;
  font-size: 17px;
  font-weight: 900;
}

.flow-smart-activity-item__icon[data-tone="blue"] {
  background: #eaf4ff;
  color: #247fdc;
}

.flow-smart-activity-item__icon[data-tone="green"] {
  background: #e7faf2;
  color: #12875c;
}

.flow-smart-activity-item__icon[data-tone="red"] {
  background: #fff0f0;
  color: #ce3347;
}

.flow-smart-activity-item__icon[data-tone="orange"] {
  background: #fff7e5;
  color: #b46e07;
}

.flow-smart-activity-item__content {
  min-width: 0;
}

.flow-smart-activity-item__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.flow-smart-activity-item__top strong {
  color: #26314c;
  font-size: 12px;
}

.flow-smart-activity-item__top time {
  flex: 0 0 auto;
  color: #929bad;
  font-size: 10px;
}

.flow-smart-activity-item__title,
.flow-smart-activity-item__meta,
.flow-smart-activity-item__comment {
  display: block;
}

.flow-smart-activity-item__title {
  overflow: hidden;
  margin-top: 3px;
  color: #111936;
  font-size: 14px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flow-smart-activity-item__meta {
  margin-top: 3px;
  color: #7c879f;
  font-size: 10px;
}

.flow-smart-activity-item__comment {
  margin-top: 7px;
  padding: 7px 9px;
  border-left: 3px solid #f06573;
  border-radius: 0 7px 7px 0;
  background: #fff2f3;
  color: #9f2938;
  font-size: 10px;
  line-height: 1.45;
}

.flow-smart-activity-item__arrow {
  color: #a1a9ba;
  font-size: 17px;
  transition: transform 0.2s ease;
}

.flow-smart-activity-item:hover .flow-smart-activity-item__arrow {
  color: #5147f5;
  transform: translateX(2px);
}

.flow-smart-actions__grid {
  display: grid;
  gap: 10px;
}

.flow-smart-action {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px;
  border: 1px solid #e5e8f1;
  border-radius: 14px;
  background: #fff;
  color: #34405e;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.flow-smart-action:hover {
  border-color: #d1cfff;
  background: #f9f8ff;
  color: #34405e;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(58, 61, 115, 0.08);
}

.flow-smart-action:disabled {
  cursor: wait;
  opacity: 0.65;
}

.flow-smart-action__icon {
  display: inline-flex;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  background: linear-gradient(145deg, #f0efff, #e7e4ff);
  color: #5147f5;
  font-size: 19px;
  font-weight: 900;
}

.flow-smart-action > span:nth-child(2) {
  min-width: 0;
}

.flow-smart-action strong,
.flow-smart-action small {
  display: block;
}

.flow-smart-action strong {
  color: #202a45;
  font-size: 13px;
}

.flow-smart-action small {
  margin-top: 3px;
  color: #8a94aa;
  font-size: 10px;
}

.flow-smart-loading,
.flow-smart-empty {
  display: flex;
  min-height: 150px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border-radius: 14px;
  background: #fafbfe;
  color: #7c879e;
  font-size: 12px;
}

.flow-smart-loading > span {
  width: 18px;
  height: 18px;
  border: 2px solid #deddf8;
  border-top-color: #5147f5;
  border-radius: 50%;
  animation: flow-smart-spin 0.7s linear infinite;
}

.flow-smart-empty {
  padding: 25px;
  text-align: left;
}

.flow-smart-empty > span {
  color: #685cf7;
  font-size: 33px;
}

.flow-smart-empty strong,
.flow-smart-empty p {
  display: block;
}

.flow-smart-empty strong {
  color: #25304a;
}

.flow-smart-empty p {
  max-width: 360px;
  margin: 4px 0 0;
  color: #8b95aa;
}

@keyframes flow-smart-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 1100px) {
  .flow-smart-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .flow-smart-dashboard__grid {
    grid-template-columns: 1fr;
  }

  .flow-smart-actions__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .flow-smart-dashboard {
    padding: 22px 16px;
    border-radius: 22px;
  }

  .flow-smart-dashboard__header {
    flex-direction: column;
  }

  .flow-smart-dashboard__date {
    align-items: flex-start;
  }

  .flow-smart-kpis {
    grid-template-columns: 1fr;
  }

  .flow-smart-activity,
  .flow-smart-actions {
    padding: 17px 13px;
  }

  .flow-smart-actions__grid {
    grid-template-columns: 1fr;
  }

  .flow-smart-section-header {
    flex-direction: column;
  }

  .flow-smart-activity-item {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .flow-smart-activity-item__icon {
    width: 38px;
    height: 38px;
  }

  .flow-smart-activity-item__arrow {
    display: none;
  }

  .flow-smart-activity-item__top {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .flow-smart-kpi,
  .flow-smart-action,
  .flow-smart-activity-item,
  .flow-smart-loading > span {
    animation: none;
    transition: none;
  }
}

/* ==========================================
   CENTRE DE NOTIFICATIONS
========================================== */

.flow-notification-center[hidden] {
  display: none;
}

.flow-notification-center {
  position: fixed;
  z-index: 999999;
  inset: 0;
}

.flow-notification-center__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.56);
  backdrop-filter: blur(5px);
}

.flow-notification-center__drawer {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  width: min(600px, 100%);
  height: 100%;
  flex-direction: column;
  background: linear-gradient(180deg, #fff, #f8f9ff);
  box-shadow: -30px 0 80px rgba(15, 23, 42, 0.24);
  animation: flow-notification-drawer-in 0.24s ease-out;
}

@keyframes flow-notification-drawer-in {
  from {
    opacity: 0;
    transform: translateX(45px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.flow-notification-center__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 28px;
  border-bottom: 1px solid #e7eaf3;
  background: rgba(255, 255, 255, 0.95);
}

.flow-notification-center__header h2 {
  margin: 4px 0 8px;
  color: var(--flow-ink, #111936);
  font-size: 29px;
  letter-spacing: -0.035em;
}

.flow-notification-center__header p {
  max-width: 420px;
  margin: 0;
  color: var(--flow-muted, #73809c);
  font-size: 13px;
}

.flow-notification-center__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 15px 22px;
  border-bottom: 1px solid #edf0f6;
  background: #fff;
}

.flow-notification-center__filters {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
}

.flow-notification-filter,
.flow-notification-mark-all {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.flow-notification-filter {
  min-height: 35px;
  padding: 0 11px;
  border-radius: 9px;
  color: #68748d;
  font-size: 11px;
  font-weight: 750;
}

.flow-notification-filter:hover,
.flow-notification-filter.is-active {
  background: #efefff;
  color: #5147f5;
}

.flow-notification-mark-all {
  color: #5147f5;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

.flow-notification-mark-all:hover {
  text-decoration: underline;
}

.flow-notification-center__list {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px 30px;
}

.flow-notification-item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px;
  align-items: stretch;
  overflow: hidden;
  margin-bottom: 10px;
  border: 1px solid #e6e9f2;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 7px 22px rgba(42, 49, 90, 0.04);
  transition:
    border-color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.flow-notification-item.is-unread {
  border-color: #d7d4ff;
  background: linear-gradient(145deg, #fff, #faf9ff);
}

.flow-notification-item.is-unread::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  background: linear-gradient(180deg, #5147f5, #8b3df5);
  content: "";
}

.flow-notification-item:hover {
  border-color: #ceccff;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(46, 52, 102, 0.09);
}

.flow-notification-item__main {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 12px;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 15px 10px 15px 16px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.flow-notification-item__icon {
  display: inline-flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  background: #eff1f6;
  color: #5e6983;
  font-size: 18px;
  font-weight: 900;
}

.flow-notification-item__icon[data-tone="blue"] {
  background: #eaf4ff;
  color: #247fdc;
}

.flow-notification-item__icon[data-tone="green"] {
  background: #e7faf2;
  color: #12875c;
}

.flow-notification-item__icon[data-tone="red"] {
  background: #fff0f0;
  color: #ce3347;
}

.flow-notification-item__icon[data-tone="orange"] {
  background: #fff7e5;
  color: #b46e07;
}

.flow-notification-item__content {
  min-width: 0;
}

.flow-notification-item__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.flow-notification-item__header strong {
  color: #29334e;
  font-size: 11px;
  text-transform: uppercase;
}

.flow-notification-item__header time {
  flex: 0 0 auto;
  color: #929bad;
  font-size: 9px;
}

.flow-notification-item__title,
.flow-notification-item__meta,
.flow-notification-item__comment {
  display: block;
}

.flow-notification-item__title {
  overflow: hidden;
  margin-top: 5px;
  color: #111936;
  font-size: 14px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flow-notification-item__meta {
  margin-top: 4px;
  color: #7f899f;
  font-size: 10px;
}

.flow-notification-item__comment {
  margin-top: 8px;
  padding: 8px 10px;
  border-left: 3px solid #ef6572;
  border-radius: 0 8px 8px 0;
  background: #fff1f2;
  color: #9f2938;
  font-size: 10px;
  line-height: 1.45;
}

.flow-notification-item__unread {
  width: 8px;
  height: 8px;
  margin-top: 7px;
  border-radius: 50%;
  background: #5147f5;
  box-shadow: 0 0 0 4px rgba(81, 71, 245, 0.1);
}

.flow-notification-item__read-button {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-left: 1px solid #edf0f5;
  background: #fbfcfe;
  color: #7f89a0;
  font: inherit;
  font-size: 16px;
  cursor: pointer;
}

.flow-notification-item__read-button:hover {
  background: #f0efff;
  color: #5147f5;
}

.flow-notification-item.is-read {
  opacity: 0.72;
}

.flow-notification-item.is-read:hover {
  opacity: 1;
}

.flow-notification-empty {
  display: flex;
  min-height: 260px;
  align-items: center;
  justify-content: center;
  gap: 15px;
  padding: 30px;
  color: #7e899f;
  text-align: left;
}

.flow-notification-empty > span {
  display: inline-flex;
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  background: #e7faf2;
  color: #159a67;
  font-size: 26px;
  font-weight: 900;
}

.flow-notification-empty strong,
.flow-notification-empty p {
  display: block;
}

.flow-notification-empty strong {
  color: #26314d;
}

.flow-notification-empty p {
  margin: 4px 0 0;
  font-size: 12px;
}

body.flow-notification-center-open {
  overflow: hidden;
}

@media (max-width: 620px) {
  .flow-notification-center__header {
    padding: 21px 17px;
  }

  .flow-notification-center__toolbar {
    align-items: flex-start;
    flex-direction: column;
    padding: 12px 14px;
  }

  .flow-notification-center__filters {
    width: 100%;
  }

  .flow-notification-center__list {
    padding: 12px;
  }

  .flow-notification-item {
    grid-template-columns: minmax(0, 1fr) 36px;
  }

  .flow-notification-item__main {
    grid-template-columns: 38px minmax(0, 1fr) 8px;
    gap: 9px;
    padding: 13px 8px 13px 12px;
  }

  .flow-notification-item__icon {
    width: 38px;
    height: 38px;
    font-size: 15px;
  }

  .flow-notification-item__header {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .flow-notification-center__drawer,
  .flow-notification-item {
    animation: none;
    transition: none;
  }
}

/* ==========================================
   PANNEAU MON COMPTE
========================================== */

.flow-account-panel[hidden] {
  display: none;
}

.flow-account-panel {
  position: fixed;
  z-index: 1000000;
  inset: 0;
}

.flow-account-panel__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.56);
  backdrop-filter: blur(5px);
}

.flow-account-panel__drawer {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  width: min(570px, 100%);
  height: 100%;
  flex-direction: column;
  background: linear-gradient(180deg, #fff 0%, #f8f9ff 100%);
  box-shadow: -30px 0 85px rgba(15, 23, 42, 0.24);
  animation: flow-account-drawer-in 0.24s ease-out;
}

@keyframes flow-account-drawer-in {
  from {
    opacity: 0;
    transform: translateX(45px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.flow-account-panel__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 28px;
  border-bottom: 1px solid #e7eaf3;
  background: rgba(255, 255, 255, 0.96);
}

.flow-account-panel__header h2 {
  margin: 4px 0 8px;
  color: var(--flow-ink, #111936);
  font-size: 29px;
  letter-spacing: -0.035em;
}

.flow-account-panel__header p {
  max-width: 410px;
  margin: 0;
  color: var(--flow-muted, #73809c);
  font-size: 13px;
}

.flow-account-panel__content {
  flex: 1;
  overflow-y: auto;
  padding: 22px;
}

.flow-account-profile {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  overflow: hidden;
  margin-bottom: 17px;
  padding: 23px;
  border: 1px solid #dfdffd;
  border-radius: 20px;
  background: linear-gradient(135deg, #f8f7ff, #eff4ff);
}

.flow-account-profile::after {
  position: absolute;
  right: -45px;
  bottom: -70px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(81, 71, 245, 0.16), transparent 68%);
  content: "";
}

.flow-account-profile__avatar {
  position: relative;
  z-index: 1;
  display: inline-flex;
  width: 76px;
  height: 76px;
  flex: 0 0 76px;
  align-items: center;
  justify-content: center;
  border: 4px solid rgba(255, 255, 255, 0.9);
  border-radius: 23px;
  background: linear-gradient(135deg, #4259f4, #8737ef);
  box-shadow: 0 14px 30px rgba(80, 68, 229, 0.25);
  color: #fff;
  font-size: 29px;
  font-weight: 900;
}

.flow-account-profile__identity {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.flow-account-profile__identity > span {
  display: block;
  margin-bottom: 4px;
  color: #7d87a0;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.flow-account-profile__identity h3 {
  overflow: hidden;
  margin: 0 0 5px;
  color: #111936;
  font-size: 22px;
  letter-spacing: -0.025em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flow-account-profile__identity a {
  color: #58637d;
  font-size: 12px;
  text-decoration: none;
}

.flow-account-profile__identity a:hover {
  color: #5147f5;
}

.flow-account-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 17px;
}

.flow-account-stats article {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 17px;
  border: 1px solid #e6e9f2;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 7px 22px rgba(42, 49, 90, 0.04);
}

.flow-account-stats__icon {
  display: inline-flex;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  background: #eeedff;
  color: #5147f5;
  font-size: 20px;
  font-weight: 900;
}

.flow-account-stats strong,
.flow-account-stats div span {
  display: block;
}

.flow-account-stats strong {
  color: #111936;
  font-size: 23px;
  line-height: 1;
}

.flow-account-stats div span {
  margin-top: 4px;
  color: #818ba1;
  font-size: 10px;
}

.flow-account-section {
  margin-bottom: 17px;
  padding: 21px;
  border: 1px solid #e6e9f2;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 7px 22px rgba(42, 49, 90, 0.04);
}

.flow-account-section__header {
  margin-bottom: 15px;
}

.flow-account-section__header h3 {
  margin: 3px 0 0;
  color: #111936;
  font-size: 18px;
  letter-spacing: -0.02em;
}

.flow-account-information {
  margin: 0;
}

.flow-account-information > div {
  display: grid;
  grid-template-columns: 135px 1fr;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid #eff1f6;
}

.flow-account-information > div:first-child {
  border-top: 0;
}

.flow-account-information dt {
  color: #7b869e;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.flow-account-information dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  color: #34405e;
  font-size: 12px;
  font-weight: 650;
}

.flow-account-actions {
  display: grid;
  gap: 9px;
}

.flow-account-action {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid #e7e9f1;
  border-radius: 14px;
  background: #fbfcfe;
  color: inherit;
  text-decoration: none;
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.flow-account-action:hover {
  border-color: #ceccff;
  background: #f8f7ff;
  color: inherit;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(58, 61, 115, 0.07);
}

.flow-account-action__icon {
  display: inline-flex;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  background: #eeedff;
  color: #5147f5;
  font-size: 18px;
  font-weight: 900;
}

.flow-account-action strong,
.flow-account-action small {
  display: block;
}

.flow-account-action strong {
  color: #26314d;
  font-size: 12px;
}

.flow-account-action small {
  margin-top: 3px;
  color: #8993a8;
  font-size: 10px;
}

.flow-account-action--danger:hover {
  border-color: #fecaca;
  background: #fff7f7;
}

.flow-account-action--danger .flow-account-action__icon {
  background: #fff0f0;
  color: #c93649;
}

.flow-account-security {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 17px;
  border: 1px solid #cceedd;
  border-radius: 16px;
  background: linear-gradient(135deg, #f1fcf7, #eafaf3);
}

.flow-account-security__icon {
  display: inline-flex;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: #d8f5e7;
  color: #13885b;
  font-size: 18px;
  font-weight: 900;
}

.flow-account-security strong {
  display: block;
  color: #176843;
  font-size: 12px;
}

.flow-account-security p {
  margin: 4px 0 0;
  color: #4c7e68;
  font-size: 10px;
  line-height: 1.5;
}

body.flow-account-panel-open {
  overflow: hidden;
}

@media (max-width: 600px) {
  .flow-account-panel__header {
    padding: 21px 17px;
  }

  .flow-account-panel__content {
    padding: 14px;
  }

  .flow-account-profile {
    align-items: flex-start;
    padding: 18px;
  }

  .flow-account-profile__avatar {
    width: 61px;
    height: 61px;
    flex-basis: 61px;
    border-radius: 18px;
    font-size: 24px;
  }

  .flow-account-profile__identity h3 {
    font-size: 19px;
  }

  .flow-account-stats {
    grid-template-columns: 1fr;
  }

  .flow-account-information > div {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .flow-account-panel__drawer,
  .flow-account-action {
    animation: none;
    transition: none;
  }
}

/* ==========================================
   RECHERCHE GLOBALE
========================================== */

.flow-portal-nav__search kbd {
  min-width: 35px;
  padding: 3px 6px;
  border: 1px solid #dfe3ec;
  border-bottom-width: 2px;
  border-radius: 6px;
  background: #fff;
  color: #8a94a8;
  font-family: inherit;
  font-size: 9px;
  font-weight: 800;
}

.flow-global-search[hidden] {
  display: none;
}

.flow-global-search {
  position: fixed;
  z-index: 1000001;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: min(11vh, 100px) 20px 30px;
}

.flow-global-search__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.63);
  backdrop-filter: blur(7px);
}

.flow-global-search__dialog {
  position: relative;
  z-index: 1;
  display: flex;
  width: min(760px, 100%);
  max-height: min(720px, calc(100vh - 80px));
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 24px;
  background: linear-gradient(180deg, #fff, #fafbff);
  box-shadow: 0 40px 110px rgba(15, 23, 42, 0.36);
  animation: flow-global-search-in 0.2s ease-out;
}

@keyframes flow-global-search-in {
  from {
    opacity: 0;
    transform: translateY(-16px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.flow-global-search__header {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 19px 21px;
  border-bottom: 1px solid #e8ebf3;
}

.flow-global-search__icon {
  display: inline-flex;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  border-radius: 15px;
  background: linear-gradient(145deg, #eeedff, #e4e2ff);
  color: #5147f5;
  font-size: 26px;
  font-weight: 900;
}

.flow-global-search__field {
  min-width: 0;
}

.flow-global-search__field label {
  display: block;
  margin-bottom: 3px;
  color: #818ba1;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.flow-global-search__field input {
  width: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  color: #111936;
  font: inherit;
  font-size: 18px;
  font-weight: 650;
}

.flow-global-search__field input::placeholder {
  color: #a4adbd;
  font-weight: 500;
}

.flow-global-search__close {
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.flow-global-search__close kbd,
.flow-global-search__footer kbd {
  padding: 4px 7px;
  border: 1px solid #dfe3ec;
  border-bottom-width: 2px;
  border-radius: 7px;
  background: #fff;
  color: #7e899f;
  font-family: inherit;
  font-size: 9px;
  font-weight: 800;
}

.flow-global-search__filters {
  display: flex;
  gap: 7px;
  padding: 11px 21px;
  border-bottom: 1px solid #edf0f5;
  background: #fff;
}

.flow-global-search-filter {
  min-height: 34px;
  padding: 0 13px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #69758f;
  font: inherit;
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
}

.flow-global-search-filter:hover,
.flow-global-search-filter.is-active {
  background: #efefff;
  color: #5147f5;
}

.flow-global-search__results {
  min-height: 270px;
  flex: 1;
  overflow-y: auto;
  padding: 13px;
}

.flow-global-search__welcome,
.flow-global-search__empty {
  display: flex;
  min-height: 240px;
  align-items: center;
  justify-content: center;
  gap: 17px;
  padding: 30px;
  text-align: left;
}

.flow-global-search__welcome > span,
.flow-global-search__empty > span {
  display: inline-flex;
  width: 62px;
  height: 62px;
  flex: 0 0 62px;
  align-items: center;
  justify-content: center;
  border-radius: 19px;
  background: #eeedff;
  color: #5147f5;
  font-size: 31px;
  font-weight: 900;
}

.flow-global-search__empty > span {
  background: #f0f2f6;
  color: #8993a7;
}

.flow-global-search__welcome strong,
.flow-global-search__empty strong {
  display: block;
  color: #1d2742;
  font-size: 16px;
}

.flow-global-search__welcome p,
.flow-global-search__empty p {
  max-width: 390px;
  margin: 5px 0 0;
  color: #838da3;
  font-size: 12px;
}

.flow-global-search__section-title {
  padding: 7px 10px;
  color: #8c96aa;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.flow-global-search__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 5px 9px 12px;
}

.flow-global-search__summary strong {
  color: #2d3853;
  font-size: 12px;
}

.flow-global-search__summary span {
  color: #929bad;
  font-size: 10px;
}

.flow-global-search__result-list,
.flow-global-search__sections section {
  display: grid;
  gap: 5px;
}

.flow-global-search-result {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 11px 13px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease,
    transform 0.15s ease;
}

.flow-global-search-result:hover,
.flow-global-search-result.is-active {
  border-color: #d9d7ff;
  background: linear-gradient(135deg, #f9f8ff, #f5f7ff);
  transform: translateX(2px);
}

.flow-global-search-result__icon {
  display: inline-flex;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: #e9f4ff;
  color: #287fdb;
  font-size: 22px;
  font-weight: 900;
}

.flow-global-search-result__icon[data-type="clients"] {
  background: #e8faf2;
  color: #168b5e;
}

.flow-global-search-result__content {
  min-width: 0;
}

.flow-global-search-result__content small,
.flow-global-search-result__content strong,
.flow-global-search-result__content span {
  display: block;
}

.flow-global-search-result__content small {
  margin-bottom: 2px;
  color: #8a94a9;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.flow-global-search-result__content strong {
  overflow: hidden;
  color: #202a45;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flow-global-search-result__content > span {
  overflow: hidden;
  margin-top: 3px;
  color: #818ba1;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flow-global-search-result mark {
  padding: 0 2px;
  border-radius: 3px;
  background: #fff0a8;
  color: inherit;
}

.flow-global-search-result__arrow {
  color: #a4acbc;
  font-size: 18px;
}

.flow-global-search-result.is-active .flow-global-search-result__arrow {
  color: #5147f5;
}

.flow-global-search__footer {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 11px 21px;
  border-top: 1px solid #e8ebf3;
  background: #fff;
  color: #8a94a8;
  font-size: 9px;
}

.flow-global-search__footer span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

body.flow-global-search-open {
  overflow: hidden;
}

@media (max-width: 700px) {
  .flow-global-search {
    align-items: flex-end;
    padding: 12px;
  }

  .flow-global-search__dialog {
    max-height: calc(100vh - 24px);
    border-radius: 22px;
  }

  .flow-global-search__header {
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: 10px;
    padding: 15px;
  }

  .flow-global-search__icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    font-size: 22px;
  }

  .flow-global-search__field input {
    font-size: 15px;
  }

  .flow-global-search__filters {
    overflow-x: auto;
    padding: 9px 14px;
  }

  .flow-global-search__results {
    padding: 9px;
  }

  .flow-global-search-result {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 10px;
    padding: 10px;
  }

  .flow-global-search-result__icon {
    width: 42px;
    height: 42px;
  }

  .flow-global-search-result__arrow {
    display: none;
  }

  .flow-global-search__footer {
    justify-content: center;
  }

  .flow-global-search__footer span:first-child {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .flow-global-search__dialog,
  .flow-global-search-result {
    animation: none;
    transition: none;
  }
}

/* ==========================================
   DASHBOARD DOCUMENTAIRE V2
========================================== */

.flow-dashboard-document-overview {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns:
    minmax(350px, 0.85fr)
    minmax(0, 1.45fr);
  gap: 18px;
  margin-bottom: 18px;
}

.flow-dashboard-compliance,
.flow-dashboard-priorities {
  padding: 22px;
  border: 1px solid #e7eaf3;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 8px 26px rgba(42, 49, 90, 0.04);
}

.flow-dashboard-compliance {
  display: grid;
  grid-template-columns: 150px 1fr;
  align-items: center;
  gap: 22px;
}

.flow-dashboard-compliance__visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flow-dashboard-compliance__circle {
  position: relative;
  display: grid;
  width: 138px;
  height: 138px;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(
    #5147f5 calc(var(--flow-compliance) * 1%),
    #edf0f6 0
  );
  box-shadow: 0 17px 38px rgba(73, 65, 190, 0.14);
  transition: background 1s ease;
}

.flow-dashboard-compliance__circle::before {
  position: absolute;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 1px #eef0f5;
  content: "";
}

.flow-dashboard-compliance__circle[data-level="good"] {
  background: conic-gradient(
    #20b77a calc(var(--flow-compliance) * 1%),
    #edf0f6 0
  );
}

.flow-dashboard-compliance__circle[data-level="warning"] {
  background: conic-gradient(
    #ee9b2f calc(var(--flow-compliance) * 1%),
    #edf0f6 0
  );
}

.flow-dashboard-compliance__circle[data-level="danger"] {
  background: conic-gradient(
    #dc4658 calc(var(--flow-compliance) * 1%),
    #edf0f6 0
  );
}

.flow-dashboard-compliance__circle > div {
  position: relative;
  z-index: 1;
  text-align: center;
}

.flow-dashboard-compliance__circle strong,
.flow-dashboard-compliance__circle span {
  display: block;
}

.flow-dashboard-compliance__circle strong {
  color: #111936;
  font-size: 26px;
  line-height: 1;
  letter-spacing: -0.04em;
}

.flow-dashboard-compliance__circle span {
  margin-top: 6px;
  color: #7e899f;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.flow-dashboard-compliance__content h3 {
  margin: 4px 0 7px;
  color: #111936;
  font-size: 20px;
}

.flow-dashboard-compliance__content > p {
  margin: 0;
  color: #7d879d;
  font-size: 11px;
  line-height: 1.55;
}

.flow-dashboard-compliance__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 9px 14px;
  margin-top: 16px;
}

.flow-dashboard-compliance__legend > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #6e7991;
  font-size: 10px;
}

.flow-dashboard-compliance__legend i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #8a94a8;
}

.flow-dashboard-compliance__legend [data-tone="green"] i {
  background: #20b77a;
}

.flow-dashboard-compliance__legend [data-tone="red"] i {
  background: #dc4658;
}

.flow-dashboard-compliance__legend [data-tone="orange"] i {
  background: #ee9b2f;
}

.flow-dashboard-compliance__legend strong {
  color: #26314c;
}

.flow-dashboard-priority-list {
  display: grid;
  gap: 8px;
}

.flow-dashboard-priority {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border: 1px solid #e8ebf2;
  border-radius: 14px;
  background: #fbfcfe;
  color: inherit;
  text-decoration: none;
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.flow-dashboard-priority:hover {
  border-color: #d4d1ff;
  background: #f9f8ff;
  color: inherit;
  transform: translateX(3px);
  box-shadow: 0 9px 22px rgba(53, 59, 111, 0.07);
}

.flow-dashboard-priority__icon {
  display: inline-flex;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  background: #eef1f6;
  color: #657087;
  font-size: 18px;
  font-weight: 900;
}

.flow-dashboard-priority__icon[data-tone="red"] {
  background: #fff0f1;
  color: #d23b4e;
}

.flow-dashboard-priority__icon[data-tone="orange"] {
  background: #fff7e8;
  color: #b8740b;
}

.flow-dashboard-priority__content {
  min-width: 0;
}

.flow-dashboard-priority__content small,
.flow-dashboard-priority__content strong,
.flow-dashboard-priority__content span,
.flow-dashboard-priority__content em {
  display: block;
}

.flow-dashboard-priority__content small {
  color: #d04959;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.flow-dashboard-priority__content strong {
  overflow: hidden;
  margin-top: 2px;
  color: #222d48;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flow-dashboard-priority__content > span {
  margin-top: 2px;
  color: #7d879d;
  font-size: 10px;
}

.flow-dashboard-priority__content em {
  margin-top: 4px;
  color: #969fb1;
  font-size: 9px;
  font-style: normal;
}

.flow-dashboard-priority__arrow {
  color: #a2aabd;
  font-size: 16px;
}

.flow-dashboard-priority:hover .flow-dashboard-priority__arrow {
  color: #5147f5;
}

.flow-dashboard-priority-empty {
  display: flex;
  min-height: 145px;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 20px;
  border-radius: 14px;
  background: #f5fcf8;
}

.flow-dashboard-priority-empty > span {
  display: inline-flex;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  align-items: center;
  justify-content: center;
  border-radius: 15px;
  background: #daf5e8;
  color: #13875b;
  font-size: 22px;
  font-weight: 900;
}

.flow-dashboard-priority-empty strong {
  display: block;
  color: #176843;
}

.flow-dashboard-priority-empty p {
  max-width: 310px;
  margin: 4px 0 0;
  color: #608571;
  font-size: 10px;
  line-height: 1.5;
}

@media (max-width: 1050px) {
  .flow-dashboard-document-overview {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .flow-dashboard-compliance {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .flow-dashboard-compliance__legend {
    justify-content: center;
  }

  .flow-dashboard-priority {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .flow-dashboard-priority__icon {
    width: 38px;
    height: 38px;
  }

  .flow-dashboard-priority__arrow {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .flow-dashboard-compliance__circle,
  .flow-dashboard-priority {
    transition: none;
  }
}

/* ==========================================
   COCKPIT PREMIUM — WORKSPACE
========================================== */

.flow-workspace-cockpit {
  position: relative;
  overflow: hidden;
  margin-bottom: 24px;
  padding: 28px;
  border: 1px solid #e3e7f1;
  border-radius: 24px;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.99),
    rgba(248, 249, 255, 0.98)
  );
  box-shadow: 0 20px 60px rgba(40, 48, 94, 0.08);
}

.flow-workspace-cockpit::before {
  position: absolute;
  top: -160px;
  right: -120px;
  width: 390px;
  height: 390px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(81, 71, 245, 0.09), transparent 70%);
  content: "";
  pointer-events: none;
}

.flow-workspace-cockpit__heading {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}

.flow-workspace-cockpit__heading h2 {
  margin: 4px 0 7px;
  color: #111936;
  font-size: 27px;
  letter-spacing: -0.035em;
}

.flow-workspace-cockpit__heading p {
  max-width: 650px;
  margin: 0;
  color: #78839a;
  font-size: 12px;
  line-height: 1.55;
}

.flow-workspace-cockpit__heading [data-flow-refresh-workspace-cockpit] {
  gap: 7px;
  flex: 0 0 auto;
}

.flow-workspace-cockpit__heading
  [data-flow-refresh-workspace-cockpit].is-loading
  span {
  animation: flow-workspace-cockpit-spin 0.7s linear infinite;
}

@keyframes flow-workspace-cockpit-spin {
  to {
    transform: rotate(360deg);
  }
}

.flow-workspace-cockpit__kpis {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.flow-workspace-cockpit-kpi {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 14px;
  padding: 18px;
  border: 1px solid #e7eaf3;
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 7px 22px rgba(42, 49, 90, 0.04);
  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.flow-workspace-cockpit-kpi:hover {
  border-color: #d5d2ff;
  transform: translateY(-3px);
  box-shadow: 0 15px 32px rgba(47, 53, 103, 0.08);
}

.flow-workspace-cockpit-kpi__icon {
  display: inline-flex;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: #eaf4ff;
  color: #297fd9;
  font-size: 21px;
  font-weight: 900;
}

.flow-workspace-cockpit-kpi[data-tone="green"]
  .flow-workspace-cockpit-kpi__icon {
  background: #e5f9ef;
  color: #149064;
}

.flow-workspace-cockpit-kpi[data-tone="red"] .flow-workspace-cockpit-kpi__icon {
  background: #fff0f1;
  color: #cf3c50;
}

.flow-workspace-cockpit-kpi[data-tone="purple"]
  .flow-workspace-cockpit-kpi__icon {
  background: #efedff;
  color: #594cf1;
}

.flow-workspace-cockpit-kpi > div {
  min-width: 0;
}

.flow-workspace-cockpit-kpi span,
.flow-workspace-cockpit-kpi strong,
.flow-workspace-cockpit-kpi small {
  display: block;
}

.flow-workspace-cockpit-kpi div > span {
  overflow: hidden;
  color: #737e95;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.flow-workspace-cockpit-kpi strong {
  margin: 3px 0;
  color: #111936;
  font-size: 28px;
  line-height: 1;
  letter-spacing: -0.04em;
}

.flow-workspace-cockpit-kpi strong.is-updated {
  animation: flow-workspace-number-in 0.35s ease-out;
}

@keyframes flow-workspace-number-in {
  from {
    opacity: 0;
    transform: translateY(5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.flow-workspace-cockpit-kpi small {
  overflow: hidden;
  color: #919aae;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flow-workspace-cockpit__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns:
    minmax(330px, 0.85fr)
    minmax(0, 1.35fr);
  gap: 16px;
  margin-bottom: 16px;
}

.flow-workspace-health,
.flow-workspace-priorities,
.flow-workspace-recent-activity {
  padding: 21px;
  border: 1px solid #e7eaf3;
  border-radius: 19px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 7px 22px rgba(42, 49, 90, 0.035);
}

.flow-workspace-cockpit__section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 17px;
}

.flow-workspace-cockpit__section-header h3 {
  margin: 3px 0 0;
  color: #111936;
  font-size: 19px;
  letter-spacing: -0.025em;
}

.flow-workspace-health__body {
  display: grid;
  grid-template-columns: 130px 1fr;
  align-items: center;
  gap: 20px;
}

.flow-workspace-health__ring {
  position: relative;
  display: grid;
  width: 126px;
  height: 126px;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(
    #5147f5 calc(var(--flow-workspace-health) * 1%),
    #edf0f6 0
  );
  box-shadow: 0 14px 33px rgba(72, 64, 186, 0.13);
  transition: background 0.8s ease;
}

.flow-workspace-health__ring::before {
  position: absolute;
  width: 94px;
  height: 94px;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 1px #eef0f5;
  content: "";
}

.flow-workspace-health__ring[data-level="good"] {
  background: conic-gradient(
    #1eae75 calc(var(--flow-workspace-health) * 1%),
    #edf0f6 0
  );
}

.flow-workspace-health__ring[data-level="warning"] {
  background: conic-gradient(
    #e79b2e calc(var(--flow-workspace-health) * 1%),
    #edf0f6 0
  );
}

.flow-workspace-health__ring[data-level="danger"] {
  background: conic-gradient(
    #d94458 calc(var(--flow-workspace-health) * 1%),
    #edf0f6 0
  );
}

.flow-workspace-health__ring > div {
  position: relative;
  z-index: 1;
  text-align: center;
}

.flow-workspace-health__ring strong,
.flow-workspace-health__ring span {
  display: block;
}

.flow-workspace-health__ring strong {
  color: #111936;
  font-size: 23px;
  line-height: 1;
}

.flow-workspace-health__ring span {
  margin-top: 5px;
  color: #818ba1;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}

.flow-workspace-health__details > p {
  margin: 0 0 14px;
  color: #7e899f;
  font-size: 10px;
  line-height: 1.55;
}

.flow-workspace-health__legend {
  display: grid;
  gap: 8px;
}

.flow-workspace-health__legend > span {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #737e94;
  font-size: 10px;
}

.flow-workspace-health__legend i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #919aad;
}

.flow-workspace-health__legend [data-tone="green"] i {
  background: #1eae75;
}

.flow-workspace-health__legend [data-tone="orange"] i {
  background: #e79b2e;
}

.flow-workspace-health__legend [data-tone="red"] i {
  background: #d94458;
}

.flow-workspace-health__legend strong {
  color: #27324d;
}

.flow-workspace-priority-list {
  display: grid;
  gap: 8px;
}

.flow-workspace-priority-item {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 11px;
  padding: 11px;
  border: 1px solid #e9ebf2;
  border-radius: 13px;
  background: #fbfcfe;
  color: inherit;
  text-decoration: none;
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease,
    transform 0.2s ease;
}

.flow-workspace-priority-item:hover {
  border-color: #d3d0ff;
  background: #f9f8ff;
  color: inherit;
  transform: translateX(3px);
}

.flow-workspace-priority-item__icon {
  display: inline-flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: #fff5e7;
  color: #b7740a;
  font-size: 17px;
  font-weight: 900;
}

.flow-workspace-priority-item__icon[data-tone="red"] {
  background: #fff0f1;
  color: #cf3c50;
}

.flow-workspace-priority-item__content {
  min-width: 0;
}

.flow-workspace-priority-item__content small,
.flow-workspace-priority-item__content strong,
.flow-workspace-priority-item__content span {
  display: block;
}

.flow-workspace-priority-item__content small {
  color: #ce4555;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.flow-workspace-priority-item__content strong {
  overflow: hidden;
  margin-top: 2px;
  color: #25304b;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flow-workspace-priority-item__content > span {
  margin-top: 2px;
  color: #818ba0;
  font-size: 9px;
}

.flow-workspace-priority-item__arrow {
  color: #a3abbb;
  font-size: 15px;
}

.flow-workspace-priority-empty,
.flow-workspace-activity-empty {
  display: flex;
  min-height: 130px;
  align-items: center;
  justify-content: center;
  gap: 13px;
  padding: 20px;
  border-radius: 13px;
  background: #f4fcf8;
}

.flow-workspace-priority-empty > span,
.flow-workspace-activity-empty > span {
  display: inline-flex;
  width: 45px;
  height: 45px;
  flex: 0 0 45px;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: #d9f4e7;
  color: #14865b;
  font-size: 20px;
  font-weight: 900;
}

.flow-workspace-priority-empty strong,
.flow-workspace-activity-empty strong {
  display: block;
  color: #246247;
  font-size: 12px;
}

.flow-workspace-priority-empty p,
.flow-workspace-activity-empty p {
  max-width: 280px;
  margin: 3px 0 0;
  color: #668576;
  font-size: 9px;
  line-height: 1.45;
}

.flow-workspace-recent-activity {
  position: relative;
  z-index: 1;
}

.flow-workspace-recent-activity__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.flow-workspace-activity-item {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: flex-start;
  gap: 11px;
  padding: 12px;
  border: 1px solid #e9ebf2;
  border-radius: 13px;
  background: #fbfcfe;
}

.flow-workspace-activity-item__icon {
  display: inline-flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: #eff1f6;
  color: #647087;
  font-size: 16px;
  font-weight: 900;
}

.flow-workspace-activity-item__icon[data-tone="success"] {
  background: #e5f9ef;
  color: #149064;
}

.flow-workspace-activity-item__icon[data-tone="danger"] {
  background: #fff0f1;
  color: #cf3c50;
}

.flow-workspace-activity-item__icon[data-tone="warning"] {
  background: #fff6e6;
  color: #b6740a;
}

.flow-workspace-activity-item__icon[data-tone="info"] {
  background: #eaf4ff;
  color: #297fd9;
}

.flow-workspace-activity-item__content {
  min-width: 0;
}

.flow-workspace-activity-item__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
}

.flow-workspace-activity-item__header strong {
  color: #2c3650;
  font-size: 10px;
}

.flow-workspace-activity-item__header time {
  flex: 0 0 auto;
  color: #939caf;
  font-size: 8px;
}

.flow-workspace-activity-item__title {
  display: block;
  overflow: hidden;
  margin-top: 4px;
  color: #111936;
  font-size: 12px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flow-workspace-activity-item__content small {
  display: block;
  margin-top: 3px;
  color: #8a94a8;
  font-size: 8px;
}

@media (max-width: 1050px) {
  .flow-workspace-cockpit__kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .flow-workspace-cockpit__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .flow-workspace-cockpit {
    padding: 20px 14px;
    border-radius: 20px;
  }

  .flow-workspace-cockpit__heading {
    flex-direction: column;
  }

  .flow-workspace-cockpit__kpis {
    grid-template-columns: 1fr;
  }

  .flow-workspace-health__body {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .flow-workspace-health__legend {
    justify-items: start;
    text-align: left;
  }

  .flow-workspace-recent-activity__list {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .flow-workspace-cockpit-kpi,
  .flow-workspace-priority-item,
  .flow-workspace-health__ring {
    animation: none;
    transition: none;
  }
}

/* ==========================================
   NAVIGATION PREMIUM — MODULES WORKSPACE
========================================== */

.flow-workspace-modules {
  position: sticky;
  z-index: 50;
  top: 15px;
  padding: 10px;
  border: 1px solid rgba(226, 230, 242, 0.95);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 12px 35px rgba(41, 48, 91, 0.07);
  backdrop-filter: blur(14px);
}

.flow-workspace-modules .flow-module-card {
  position: relative;
  overflow: hidden;
  border: 1px solid transparent;
  background: transparent;
  box-shadow: none;
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.flow-workspace-modules .flow-module-card::after {
  position: absolute;
  right: 15px;
  bottom: 0;
  left: 15px;
  height: 3px;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(90deg, #5147f5, #8b3df5);
  content: "";
  opacity: 0;
  transform: scaleX(0.3);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

.flow-workspace-modules .flow-module-card:hover {
  border-color: #e1dfff;
  background: #faf9ff;
  transform: translateY(-2px);
}

.flow-workspace-modules .flow-module-card.is-active {
  border-color: #d7d4ff;
  background: linear-gradient(145deg, #f7f6ff, #f0f3ff);
  box-shadow: 0 9px 24px rgba(72, 64, 184, 0.11);
}

.flow-workspace-modules .flow-module-card.is-active::after {
  opacity: 1;
  transform: scaleX(1);
}

.flow-workspace-modules .flow-module-card.is-active .flow-module-card__icon {
  background: linear-gradient(145deg, #5147f5, #8738ef);
  box-shadow: 0 9px 22px rgba(81, 71, 245, 0.25);
  color: #fff;
}

.flow-workspace-modules .flow-module-card.is-active strong {
  color: #3930c8;
}

.flow-workspace-modules .flow-module-card.is-loading {
  pointer-events: none;
  opacity: 0.7;
}

.flow-workspace-modules .flow-module-card.is-loading .flow-module-card__icon {
  animation: flow-module-loading-pulse 0.7s ease-in-out infinite alternate;
}

@keyframes flow-module-loading-pulse {
  from {
    transform: scale(0.94);
    opacity: 0.7;
  }

  to {
    transform: scale(1.06);
    opacity: 1;
  }
}

.flow-workspace-panel {
  scroll-margin-top: 120px;
  animation: flow-workspace-panel-in 0.3s ease-out;
}

@keyframes flow-workspace-panel-in {
  from {
    opacity: 0;
    transform: translateY(9px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 782px) {
  .flow-workspace-modules {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .flow-workspace-modules .flow-module-card {
    min-width: 0;
  }
}

@media (max-width: 520px) {
  .flow-workspace-modules {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .flow-workspace-modules .flow-module-card,
  .flow-workspace-modules .flow-module-card::after,
  .flow-workspace-panel {
    animation: none;
    transition: none;
  }
}

/* ==========================================
   FINITIONS UX — ANIMATIONS ET SKELETONS
========================================== */

.flow-premium-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.45s ease var(--flow-reveal-delay, 0ms),
    transform 0.45s ease var(--flow-reveal-delay, 0ms);
}

.flow-premium-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.flow-button,
.flow-smart-action,
.flow-module-card,
.flow-account-action {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.flow-button-ripple {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  background: rgba(81, 71, 245, 0.16);
  pointer-events: none;
  transform: scale(0);
  animation: flow-button-ripple-animation 0.62s ease-out;
}

.flow-button--primary .flow-button-ripple {
  background: rgba(255, 255, 255, 0.28);
}

@keyframes flow-button-ripple-animation {
  to {
    opacity: 0;
    transform: scale(2.5);
  }
}

.flow-premium-loading {
  position: relative;
  display: flex;
  min-height: 92px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 11px;
  overflow: hidden;
  color: #7f899e;
}

.flow-premium-loading::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 25%,
    rgba(255, 255, 255, 0.72) 45%,
    transparent 65%
  );
  content: "";
  pointer-events: none;
  transform: translateX(-100%);
  animation: flow-loading-shimmer 1.45s infinite;
}

.flow-premium-loading__bars {
  display: flex;
  width: min(280px, 82%);
  flex-direction: column;
  gap: 7px;
}

.flow-premium-loading__bars i {
  display: block;
  height: 9px;
  border-radius: 999px;
  background: linear-gradient(90deg, #eceef5, #e4e6f1);
}

.flow-premium-loading__bars i:nth-child(1) {
  width: 100%;
}

.flow-premium-loading__bars i:nth-child(2) {
  width: 76%;
}

.flow-premium-loading__bars i:nth-child(3) {
  width: 52%;
}

@keyframes flow-loading-shimmer {
  to {
    transform: translateX(100%);
  }
}

.flow-offline-banner {
  position: fixed;
  z-index: 1000010;
  right: 20px;
  bottom: 20px;
  display: flex;
  max-width: min(430px, calc(100vw - 40px));
  align-items: center;
  gap: 11px;
  padding: 14px 17px;
  border: 1px solid #f4c57f;
  border-radius: 14px;
  background: #fff8e8;
  box-shadow: 0 18px 45px rgba(50, 42, 21, 0.18);
  color: #82510d;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.45;
  animation: flow-offline-banner-in 0.25s ease-out;
}

.flow-offline-banner > span:first-child {
  display: inline-flex;
  width: 31px;
  height: 31px;
  flex: 0 0 31px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #ffe9bd;
  color: #ab6909;
  font-size: 15px;
}

@keyframes flow-offline-banner-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.flow-portal.is-offline .flow-button--primary,
.flow-portal.is-offline [data-flow-action] {
  filter: grayscale(0.25);
}

.flow-document-card,
.flow-request-card,
.flow-task-card,
.flow-timeline-item {
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.flow-document-card:hover,
.flow-request-card:hover,
.flow-task-card:hover,
.flow-timeline-item:hover {
  border-color: #dcd9ff;
  box-shadow: 0 14px 32px rgba(48, 54, 105, 0.08);
  transform: translateY(-2px);
}

:focus-visible {
  outline: 3px solid rgba(81, 71, 245, 0.34);
  outline-offset: 3px;
}

.flow-button:focus-visible,
.flow-module-card:focus-visible,
.flow-smart-action:focus-visible,
.flow-account-action:focus-visible {
  outline-color: rgba(81, 71, 245, 0.48);
}

@media (max-width: 600px) {
  .flow-offline-banner {
    right: 12px;
    bottom: 12px;
    left: 12px;
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .flow-premium-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .flow-button-ripple,
  .flow-premium-loading::after,
  .flow-offline-banner {
    animation: none;
  }

  .flow-document-card,
  .flow-request-card,
  .flow-task-card,
  .flow-timeline-item {
    transition: none;
  }
}

/* ==========================================
   COMMENTAIRES DOCUMENTAIRES — FRONT
========================================== */

.flow-comments-modal__dialog {
  width: min(760px, calc(100vw - 32px));
  max-height: min(840px, calc(100vh - 40px));
  overflow: hidden;
}

.flow-document-comments-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.flow-comments-list {
  display: grid;
  max-height: 430px;
  gap: 11px;
  overflow-y: auto;
  padding: 3px 5px 3px 1px;
}

.flow-comments-empty {
  display: flex;
  min-height: 190px;
  align-items: center;
  justify-content: center;
  gap: 14px;
  border: 1px dashed #dfe3ee;
  border-radius: 16px;
  background: #fafbfe;
}

.flow-comments-empty > span {
  display: inline-flex;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  border-radius: 15px;
  background: #edebff;
  font-size: 21px;
}

.flow-comments-empty strong {
  display: block;
  color: #26304a;
  font-size: 13px;
}

.flow-comments-empty p {
  margin: 3px 0 0;
  color: #818ba0;
  font-size: 10px;
}

.flow-comment-thread {
  overflow: hidden;
  border: 1px solid #e5e8f1;
  border-radius: 15px;
  background: #fff;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.flow-comment-thread:hover {
  border-color: #d8d5ff;
  box-shadow: 0 10px 25px rgba(50, 56, 106, 0.06);
}

.flow-comment-thread[data-status="resolved"] {
  background: #f8fbf9;
  opacity: 0.82;
}

.flow-comment-main,
.flow-comment-reply {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 11px;
}

.flow-comment-main {
  padding: 14px;
}

.flow-comment-avatar {
  display: inline-flex;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: linear-gradient(145deg, #5147f5, #823bee);
  color: #fff;
  font-size: 13px;
  font-weight: 850;
  text-transform: uppercase;
}

.flow-comment-main__content {
  min-width: 0;
}

.flow-comment-meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.flow-comment-meta > div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.flow-comment-meta strong {
  color: #26304a;
  font-size: 10px;
}

.flow-comment-meta time {
  flex: 0 0 auto;
  color: #959eb1;
  font-size: 8px;
}

.flow-comment-status {
  padding: 3px 7px;
  border-radius: 999px;
  background: #e0f7eb;
  color: #17845c;
  font-size: 7px;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.flow-comment-main p,
.flow-comment-reply p {
  margin: 7px 0 0;
  color: #566177;
  font-size: 11px;
  line-height: 1.55;
  white-space: pre-wrap;
}

.flow-comment-actions {
  display: flex;
  gap: 12px;
  margin-top: 10px;
}

.flow-comment-action {
  padding: 0;
  border: 0;
  background: transparent;
  color: #5147d9;
  cursor: pointer;
  font-size: 9px;
  font-weight: 750;
}

.flow-comment-action:hover {
  text-decoration: underline;
}

.flow-comment-replies {
  display: grid;
  gap: 8px;
  padding: 0 14px 14px 63px;
}

.flow-comment-reply {
  padding: 11px;
  border-left: 3px solid #dddafe;
  border-radius: 0 11px 11px 0;
  background: #f8f8fd;
}

.flow-comment-reply .flow-comment-avatar {
  width: 31px;
  height: 31px;
  border-radius: 10px;
  background: #747d93;
  font-size: 10px;
}

.flow-comment-create-form {
  display: grid;
  gap: 9px;
  margin-top: 17px;
  padding-top: 17px;
  border-top: 1px solid #e7e9f1;
}

.flow-comment-create-form label {
  color: #313a53;
  font-size: 10px;
  font-weight: 800;
}

.flow-comment-create-form textarea {
  width: 100%;
  min-height: 92px;
  resize: vertical;
  border: 1px solid #dce0eb;
  border-radius: 13px;
  padding: 12px 13px;
  background: #fff;
  color: #222d46;
  font: inherit;
  font-size: 11px;
  line-height: 1.5;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.flow-comment-create-form textarea:focus {
  border-color: #7770ee;
  outline: none;
  box-shadow: 0 0 0 4px rgba(81, 71, 245, 0.1);
}

.flow-comment-create-form__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.flow-comment-create-form__footer small {
  color: #949daf;
  font-size: 8px;
}

.flow-comment-reply-context {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 10px;
  background: #f0efff;
  color: #5047c5;
  font-size: 9px;
  font-weight: 750;
}

.flow-comment-reply-context[hidden] {
  display: none;
}

.flow-comment-reply-context button {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: 9px;
  text-decoration: underline;
}

@media (max-width: 600px) {
  .flow-comments-modal__dialog {
    width: calc(100vw - 20px);
    max-height: calc(100vh - 20px);
  }

  .flow-comments-list {
    max-height: 46vh;
  }

  .flow-comment-replies {
    padding-left: 25px;
  }

  .flow-comment-meta {
    flex-direction: column;
    gap: 3px;
  }
}

/* ==========================================
   NOTIFICATIONS API — CIBLE DOCUMENT
========================================== */

.flow-document-card.is-notification-target {
  animation: flow-api-notification-target 2.2s ease;
}

@keyframes flow-api-notification-target {
  0%,
  100% {
    box-shadow: inherit;
  }

  20%,
  70% {
    box-shadow:
      0 0 0 4px rgba(92, 80, 235, 0.24),
      0 20px 48px rgba(56, 45, 171, 0.18);
  }
}

/* ==========================================
   BADGE DYNAMIQUE DES NOTIFICATIONS
========================================== */

.flow-portal-nav__notification[hidden] {
  display: none !important;
}

.flow-portal-nav__notification:not([hidden]) {
  display: inline-flex;
  min-width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  border-radius: 999px;
  line-height: 1;
}

/* ==========================================
   COMMENTAIRES — AUTOCOMPLETE @MENTIONS
========================================== */

.flow-comment-editor {
  position: relative;
}

.flow-comment-mention-menu {
  position: absolute;
  z-index: 120;
  right: 0;
  bottom: calc(100% + 8px);
  left: 0;
  overflow: hidden;
  max-height: 280px;
  border: 1px solid #e1e5ef;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 18px 48px rgba(35, 42, 73, 0.18);
}

.flow-comment-mention-menu[hidden] {
  display: none !important;
}

.flow-comment-mention-option {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 11px;
  padding: 11px 13px;
  border: 0;
  border-bottom: 1px solid #edf0f5;
  background: #fff;
  color: #2c3650;
  cursor: pointer;
  text-align: left;
}

.flow-comment-mention-option:last-child {
  border-bottom: 0;
}

.flow-comment-mention-option:hover,
.flow-comment-mention-option:focus-visible {
  outline: 0;
  background: #f6f5ff;
}

.flow-comment-mention-option__avatar {
  display: inline-flex;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: #eceaff;
  color: #5147d9;
  font-size: 12px;
  font-weight: 850;
}

.flow-comment-mention-option > span:last-child {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.flow-comment-mention-option strong {
  overflow: hidden;
  color: #252e47;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flow-comment-mention-option small {
  color: #929bad;
  font-size: 8px;
}

/* ==========================================
   SPRINT 12 — CRÉATION FRONT
========================================== */

.flow-sprint12-create-modal .flow-front-modal__dialog {
  max-width: 620px;
}

.flow-sprint12-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.flow-sprint12-checkbox input {
  width: auto;
  margin: 0;
}

/* ==========================================
   TASKS — UI PREMIUM
========================================== */

[data-flow-module="tasks"] {
  display: grid;
  gap: 14px;
}

.flow-task-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 18px 20px;
  border: 1px solid #e7e9f1;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 10px 28px rgba(45, 49, 77, 0.05);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}

.flow-task-card:hover {
  transform: translateY(-1px);
  border-color: #d9d8ff;
  box-shadow: 0 14px 34px rgba(67, 61, 180, 0.08);
}

.flow-task-card__content {
  min-width: 0;
}

.flow-task-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.flow-task-card__status,
.flow-task-card__priority {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 10px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.flow-task-card__status {
  background: #eef0ff;
  color: #5547d8;
}

.flow-task-card__status[data-status="done"] {
  background: #e7f8ef;
  color: #1f9362;
}

.flow-task-card__status[data-status="in_progress"] {
  background: #eaf2ff;
  color: #3973cc;
}

.flow-task-card__status[data-status="waiting"] {
  background: #fff4dd;
  color: #a56b0e;
}

.flow-task-card__status[data-status="cancelled"] {
  background: #f3f4f6;
  color: #6b7280;
}

.flow-task-card__priority[data-priority="critical"] {
  background: #fff0f1;
  color: #c2414c;
}

.flow-task-card__priority[data-priority="high"] {
  background: #fff2e7;
  color: #c76817;
}

.flow-task-card__priority[data-priority="normal"] {
  background: #f3f4f7;
  color: #62697b;
}

.flow-task-card__priority[data-priority="low"] {
  background: #edf7ff;
  color: #3d7aab;
}

.flow-task-card h3,
.flow-task-card__title {
  margin: 0;
  color: #20283d;
  font-size: 15px;
  line-height: 1.35;
  font-weight: 750;
}

.flow-task-card__description {
  margin: 6px 0 0;
  color: #71798c;
  font-size: 12px;
  line-height: 1.5;
}

.flow-task-card__footer {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 11px;
  color: #8a91a2;
  font-size: 10px;
}

.flow-task-card__footer span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.flow-task-card__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.flow-task-card__actions .flow-button {
  min-height: 34px;
  padding: 7px 12px;
  border-radius: 10px;
  font-size: 10px;
}

.flow-task-card[data-status="done"] {
  background: #fbfdfc;
}

.flow-task-card[data-status="done"] h3,
.flow-task-card[data-status="done"] .flow-task-card__title {
  color: #687166;
}

.flow-task-card[data-status="done"] .flow-task-card__description {
  color: #92998f;
}

.flow-task-card[data-status="done"]::before {
  content: "✓";
  position: absolute;
  top: 17px;
  right: 18px;
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 9px;
  background: #e7f8ef;
  color: #1f9362;
  font-size: 12px;
  font-weight: 800;
}

.flow-task-card[data-status="done"] .flow-task-card__actions {
  padding-right: 36px;
}

[data-flow-module="tasks"] .flow-empty-card {
  padding: 28px;
  border: 1px dashed #dfe2ea;
  border-radius: 16px;
  background: #fafbfe;
  color: #8a91a2;
  text-align: center;
}

@media (max-width: 700px) {
  .flow-task-card {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 16px;
  }

  .flow-task-card__actions {
    width: 100%;
  }

  .flow-task-card__actions .flow-button {
    width: 100%;
    justify-content: center;
  }
}

/* ==========================================
   FLOW CORE — TASK KANBAN
========================================== */

.flow-task-kanban {
  display: grid;
  grid-template-columns: repeat(4, minmax(240px, 1fr));
  gap: 16px;
  align-items: start;
  overflow-x: auto;
  padding-bottom: 8px;
}

.flow-task-kanban__column {
  min-width: 240px;
  padding: 14px;
  border: 1px solid #e4e7ec;
  border-radius: 14px;
  background: #f8fafc;
  transition:
    border-color 0.18s ease,
    background-color 0.18s ease,
    transform 0.18s ease;
}

.flow-task-kanban__column.is-drag-over {
  border-color: #98a2b3;
  background: #f2f4f7;
  transform: translateY(-2px);
}

.flow-task-kanban__header {
  margin-bottom: 12px;
}

.flow-task-kanban__header > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.flow-task-kanban__header h3 {
  margin: 0;
  font-size: 15px;
  line-height: 1.3;
}

.flow-task-kanban__header span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 7px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #e4e7ec;
  font-size: 12px;
  font-weight: 700;
}

.flow-task-kanban__cards {
  display: grid;
  gap: 10px;
  min-height: 72px;
}

.flow-task-kanban-card {
  margin: 0;
  padding: 14px;
  border: 1px solid #eaecf0;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  cursor: grab;
}

.flow-task-kanban-card:active {
  cursor: grabbing;
}

.flow-task-kanban-card.is-dragging {
  opacity: 0.45;
}

.flow-task-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.flow-task-card__drag {
  color: #98a2b3;
  font-size: 18px;
  line-height: 1;
}

.flow-task-card__title {
  margin: 0 0 8px;
  font-size: 15px;
  line-height: 1.4;
}

.flow-task-card__description {
  margin: 0 0 12px;
  color: #667085;
  font-size: 13px;
  line-height: 1.5;
}

.flow-task-card__details {
  display: grid;
  gap: 5px;
  margin-bottom: 12px;
  color: #667085;
  font-size: 12px;
}

.flow-task-card__details span {
  display: block;
}

.flow-task-card__controls {
  display: grid;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid #f2f4f7;
}

.flow-task-card__controls label {
  display: grid;
  gap: 4px;
}

.flow-task-card__controls label > span {
  color: #667085;
  font-size: 11px;
  font-weight: 600;
}

.flow-task-card__controls select {
  width: 100%;
  min-height: 36px;
  padding: 6px 28px 6px 9px;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  background: #fff;
  font-size: 12px;
}

.flow-task-kanban__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 70px;
  padding: 14px;
  border: 1px dashed #d0d5dd;
  border-radius: 10px;
  color: #98a2b3;
  font-size: 12px;
  text-align: center;
}

.flow-task-cancelled {
  margin-top: 18px;
  border: 1px solid #eaecf0;
  border-radius: 12px;
  background: #fff;
}

.flow-task-cancelled > summary {
  padding: 14px 16px;
  cursor: pointer;
  font-weight: 600;
}

.flow-task-cancelled__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
  padding: 0 16px 16px;
}

@media (max-width: 1100px) {
  .flow-task-kanban {
    grid-template-columns: repeat(4, 260px);
  }
}

@media (max-width: 767px) {
  .flow-task-kanban {
    grid-template-columns: repeat(4, 82vw);
    scroll-snap-type: x mandatory;
  }

  .flow-task-kanban__column {
    scroll-snap-align: start;
  }
}

/* ============================================================
   FLOW CORE — TASK KANBAN PREMIUM V2
============================================================ */

.flow-task-kanban {
  display: grid;
  grid-template-columns: repeat(4, minmax(220px, 1fr));
  gap: 14px;
  width: 100%;
}

.flow-task-kanban__column {
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(15, 23, 42, 0.07);
  border-radius: 16px;
  background: #f8fafc;
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

.flow-task-kanban__column.is-drag-over {
  border-color: rgba(79, 70, 229, 0.35);
  background: #f5f3ff;
  box-shadow: inset 0 0 0 2px rgba(79, 70, 229, 0.06);
}

.flow-task-kanban__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}

.flow-task-kanban__header-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.flow-task-kanban__header h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  color: #334155;
}

.flow-task-kanban__dot {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 999px;
  background: #94a3b8;
}

.flow-task-kanban__dot[data-status="todo"] {
  background: #94a3b8;
}

.flow-task-kanban__dot[data-status="in_progress"] {
  background: var(--flow-primary);
}

.flow-task-kanban__dot[data-status="waiting"] {
  background: #f59e0b;
}

.flow-task-kanban__dot[data-status="done"] {
  background: #10b981;
}

.flow-task-kanban__count {
  display: inline-flex;
  min-width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  padding: 0 7px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.07);
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
}

.flow-task-kanban__cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 122px;
}

.flow-task-kanban__empty {
  min-height: 108px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 20px;
  border: 1px dashed rgba(100, 116, 139, 0.2);
  border-radius: 12px;
  color: #94a3b8;
  font-size: 11px;
  text-align: center;
}

.flow-task-kanban__empty > span:first-child {
  display: flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(100, 116, 139, 0.1);
  font-size: 17px;
}

.flow-task-kanban-card {
  position: relative;
  padding: 15px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.025);
  cursor: pointer;
  outline: none;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}

.flow-task-kanban-card:hover,
.flow-task-kanban-card:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(79, 70, 229, 0.22);
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08);
}

.flow-task-kanban-card.is-dragging {
  opacity: 0.5;
  transform: rotate(1deg);
}

.flow-task-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 11px;
}

.flow-task-card__priority {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #64748b;
  font-size: 9px;
  line-height: 1;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.045em;
}

.flow-task-card__priority[data-priority="high"] {
  background: #fff7ed;
  color: #c2410c;
}

.flow-task-card__priority[data-priority="critical"] {
  background: #fef2f2;
  color: #dc2626;
}

.flow-task-card__priority[data-priority="low"] {
  background: #f0fdf4;
  color: #15803d;
}

.flow-task-card__drag {
  color: #cbd5e1;
  font-size: 15px;
  cursor: grab;
  user-select: none;
}

.flow-task-card__title {
  margin: 0 0 14px;
  color: #0f172a;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
}

.flow-task-card__meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.flow-task-card__meta-item {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: #64748b;
  font-size: 10px;
  line-height: 1.4;
}

.flow-task-card__meta-icon {
  display: inline-flex;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: #f8fafc;
  color: #64748b;
}

.flow-task-card__avatar {
  display: inline-flex;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #eef2ff;
  color: var(--flow-primary);
  font-size: 9px;
  font-weight: 800;
}

.flow-task-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
  padding-top: 11px;
  border-top: 1px solid #f1f5f9;
  color: var(--flow-primary);
  font-size: 10px;
  font-weight: 700;
  opacity: 0;
  transform: translateY(2px);
  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
}

.flow-task-kanban-card:hover .flow-task-card__footer,
.flow-task-kanban-card:focus-visible .flow-task-card__footer {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   TASK MODAL
============================================================ */

body.flow-modal-open {
  overflow: hidden;
}

.flow-task-modal {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.flow-task-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.42);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.flow-task-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(620px, 100%);
  max-height: min(780px, calc(100vh - 48px));
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 28px 90px rgba(15, 23, 42, 0.22);
  animation: flowTaskModalIn 0.18s ease-out;
}

@keyframes flowTaskModalIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.985);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.flow-task-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 26px 20px;
  border-bottom: 1px solid #f1f5f9;
}

.flow-task-modal__eyebrow {
  display: block;
  margin-bottom: 6px;
  color: var(--flow-primary);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
}

.flow-task-modal__header h2 {
  margin: 0;
  color: #0f172a;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
}

.flow-task-modal__close {
  display: inline-flex;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
  color: #64748b;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}

.flow-task-modal__close:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
  color: #0f172a;
}

.flow-task-modal__body {
  padding: 24px 26px 28px;
}

.flow-task-modal__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 24px;
}

.flow-task-modal__badge {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  padding: 4px 9px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #475569;
  font-size: 10px;
  font-weight: 700;
}

.flow-task-modal__badge[data-status="in_progress"] {
  background: #eef2ff;
  color: var(--flow-primary);
}

.flow-task-modal__badge[data-status="waiting"] {
  background: #fffbeb;
  color: #b45309;
}

.flow-task-modal__badge[data-status="done"] {
  background: #ecfdf5;
  color: #047857;
}

.flow-task-modal__badge[data-status="cancelled"] {
  background: #f8fafc;
  color: #94a3b8;
}

.flow-task-modal__badge[data-priority="high"] {
  background: #fff7ed;
  color: #c2410c;
}

.flow-task-modal__badge[data-priority="critical"] {
  background: #fef2f2;
  color: #dc2626;
}

.flow-task-modal__section {
  margin-bottom: 22px;
  padding: 18px;
  border-radius: 14px;
  background: #f8fafc;
}

.flow-task-modal__section--empty {
  color: #94a3b8;
}

.flow-task-modal__section p {
  margin: 7px 0 0;
  color: #334155;
  font-size: 13px;
  line-height: 1.65;
}

.flow-task-modal__label {
  display: block;
  color: #94a3b8;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.flow-task-modal__info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 22px;
}

.flow-task-modal__info {
  padding: 15px;
  border: 1px solid #e8edf3;
  border-radius: 12px;
}

.flow-task-modal__info strong {
  display: block;
  margin-top: 6px;
  color: #334155;
  font-size: 12px;
  font-weight: 700;
}

.flow-task-modal__controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding-top: 22px;
  border-top: 1px solid #f1f5f9;
}

.flow-task-modal__controls label {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.flow-task-modal__controls label > span {
  color: #64748b;
  font-size: 10px;
  font-weight: 700;
}

.flow-task-modal__controls select {
  width: 100%;
  min-height: 42px;
  padding: 0 36px 0 12px;
  border: 1px solid #dbe3eb;
  border-radius: 10px;
  background-color: #fff;
  color: #334155;
  font-size: 12px;
  outline: none;
}

.flow-task-modal__controls select:focus {
  border-color: #818cf8;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.flow-task-cancelled {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid #eef2f7;
  border-radius: 12px;
  background: #fafafa;
}

.flow-task-cancelled summary {
  cursor: pointer;
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
}

.flow-task-cancelled__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

/* ============================================================
   RESPONSIVE
============================================================ */

@media (max-width: 1100px) {
  .flow-task-kanban {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .flow-task-kanban {
    grid-template-columns: 1fr;
  }

  .flow-task-modal {
    padding: 12px;
    align-items: flex-end;
  }

  .flow-task-modal__dialog {
    width: 100%;
    max-height: 90vh;
    border-radius: 20px 20px 12px 12px;
  }

  .flow-task-modal__header,
  .flow-task-modal__body {
    padding-left: 18px;
    padding-right: 18px;
  }

  .flow-task-modal__info-grid,
  .flow-task-modal__controls {
    grid-template-columns: 1fr;
  }

  .flow-task-cancelled__list {
    grid-template-columns: 1fr;
  }
}

/* FLOW CORE — TASK MODAL START */

body.flow-modal-open {
  overflow: hidden;
}

.flow-task-kanban-card {
  cursor: pointer;
}

.flow-task-kanban-card:hover {
  transform: translateY(-2px);
  box-shadow:
    0 12px 30px rgba(36, 39, 80, 0.08),
    0 2px 8px rgba(36, 39, 80, 0.05);
}

.flow-task-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 24px;

  background: rgba(25, 27, 48, 0.38);

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.flow-task-modal {
  width: min(680px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;

  background: #ffffff;

  border: 1px solid rgba(78, 70, 229, 0.1);

  border-radius: 24px;

  box-shadow:
    0 30px 80px rgba(28, 31, 59, 0.18),
    0 8px 24px rgba(28, 31, 59, 0.08);
}

.flow-task-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;

  padding: 28px 30px 20px;

  border-bottom: 1px solid rgba(32, 35, 60, 0.07);
}

.flow-task-modal__eyebrow,
.flow-task-modal__label {
  display: block;

  margin-bottom: 6px;

  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;

  letter-spacing: 0.08em;
  text-transform: uppercase;

  color: #7068d9;
}

.flow-task-modal__header h2 {
  margin: 0;

  font-size: clamp(22px, 3vw, 30px);

  line-height: 1.15;

  color: #24263b;
}

.flow-task-modal__close {
  flex: 0 0 auto;

  width: 40px;
  height: 40px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0;

  border: 1px solid rgba(32, 35, 60, 0.09);

  border-radius: 12px;

  background: #ffffff;

  color: #45475c;

  font-size: 25px;
  line-height: 1;

  cursor: pointer;
}

.flow-task-modal__close:hover {
  background: #f6f6fb;
}

.flow-task-modal__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;

  padding: 18px 30px 0;
}

.flow-task-modal__badge {
  display: inline-flex;
  align-items: center;

  min-height: 28px;

  padding: 5px 10px;

  border-radius: 999px;

  background: #f3f2ff;

  font-size: 12px;
  font-weight: 600;

  color: #5550b9;
}

.flow-task-modal__badge[data-status="done"] {
  background: #ecf9f3;
  color: #178a61;
}

.flow-task-modal__badge[data-status="waiting"] {
  background: #fff7e8;
  color: #a46900;
}

.flow-task-modal__badge[data-status="cancelled"] {
  background: #f4f4f6;
  color: #777989;
}

.flow-task-modal__badge[data-priority="critical"],
.flow-task-modal__badge[data-priority="high"] {
  background: #fff0f1;
  color: #b53d49;
}

.flow-task-modal__body {
  display: grid;
  gap: 20px;

  padding: 24px 30px 30px;
}

.flow-task-modal__section,
.flow-task-modal__info {
  padding: 18px;

  border: 1px solid rgba(32, 35, 60, 0.07);

  border-radius: 16px;

  background: #fafafe;
}

.flow-task-modal__section p {
  margin: 0;

  font-size: 14px;
  line-height: 1.65;

  color: #505267;
}

.flow-task-modal__empty {
  color: #9a9baa !important;
}

.flow-task-modal__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 14px;
}

.flow-task-modal__info strong {
  display: block;

  font-size: 14px;
  font-weight: 600;

  color: #303246;
}

.flow-task-modal__field {
  display: grid;
  gap: 8px;
}

.flow-task-modal__field > span {
  font-size: 12px;
  font-weight: 700;

  color: #53556b;
}

.flow-task-modal__field select {
  width: 100%;
  min-height: 44px;

  padding: 0 38px 0 13px;

  border: 1px solid rgba(36, 38, 59, 0.12);

  border-radius: 12px;

  background-color: #ffffff;

  color: #303246;

  font-size: 14px;
}

.flow-task-modal__field select:focus {
  border-color: #6d63e8;

  outline: 3px solid rgba(109, 99, 232, 0.12);
}

@media (max-width: 640px) {
  .flow-task-modal-overlay {
    align-items: flex-end;

    padding: 12px;
  }

  .flow-task-modal {
    max-height: calc(100vh - 24px);

    border-radius: 22px;
  }

  .flow-task-modal__header {
    padding: 22px 20px 18px;
  }

  .flow-task-modal__badges {
    padding: 16px 20px 0;
  }

  .flow-task-modal__body {
    padding: 20px;
  }

  .flow-task-modal__grid {
    grid-template-columns: 1fr;
  }
}

/* FLOW CORE — TASK MODAL END */

/* ==========================================================================
   FLOW CORE — KANBAN PREMIUM V2
   ========================================================================== */

/*
 * Conteneur principal
 */
.flow-task-kanban {
  display: grid;
  grid-template-columns: repeat(4, minmax(220px, 1fr));

  gap: 14px;

  padding: 14px;

  border-radius: 20px;

  background: linear-gradient(
    180deg,
    rgba(248, 249, 253, 0.96),
    rgba(245, 246, 251, 0.82)
  );

  border: 1px solid rgba(42, 45, 73, 0.055);
}

/*
 * Colonne
 */
.flow-task-kanban__column {
  min-width: 0;

  padding: 10px;

  border-radius: 16px;

  background: rgba(255, 255, 255, 0.58);

  border: 1px solid rgba(42, 45, 73, 0.055);

  transition:
    border-color 0.18s ease,
    background-color 0.18s ease,
    box-shadow 0.18s ease;
}

/*
 * État drag
 */
.flow-task-kanban__column.is-drag-over {
  background: rgba(105, 92, 235, 0.055);

  border-color: rgba(105, 92, 235, 0.25);

  box-shadow: inset 0 0 0 1px rgba(105, 92, 235, 0.07);
}

/*
 * Header colonne
 */
.flow-task-kanban__header {
  margin-bottom: 10px;
}

.flow-task-kanban__header > div {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 10px;

  min-height: 34px;
}

.flow-task-kanban__header h3 {
  position: relative;

  display: flex;
  align-items: center;

  gap: 8px;

  margin: 0;

  font-size: 12px;
  line-height: 1.3;
  font-weight: 700;

  color: #45475d;
}

.flow-task-kanban__header h3::before {
  content: "";

  display: block;

  width: 8px;
  height: 8px;

  border-radius: 50%;

  background: #989baa;

  box-shadow: 0 0 0 4px rgba(152, 155, 170, 0.1);
}

/*
 * À faire
 */
.flow-task-kanban__column[data-status="todo"]
  .flow-task-kanban__header
  h3::before {
  background: #8a8da0;

  box-shadow: 0 0 0 4px rgba(138, 141, 160, 0.11);
}

/*
 * En cours
 */
.flow-task-kanban__column[data-status="in_progress"]
  .flow-task-kanban__header
  h3::before {
  background: #6b63e8;

  box-shadow: 0 0 0 4px rgba(107, 99, 232, 0.11);
}

/*
 * En attente
 */
.flow-task-kanban__column[data-status="waiting"]
  .flow-task-kanban__header
  h3::before {
  background: #e5a12c;

  box-shadow: 0 0 0 4px rgba(229, 161, 44, 0.12);
}

/*
 * Terminée
 */
.flow-task-kanban__column[data-status="done"]
  .flow-task-kanban__header
  h3::before {
  background: #22a978;

  box-shadow: 0 0 0 4px rgba(34, 169, 120, 0.11);
}

/*
 * Compteur colonne
 */
.flow-task-kanban__header > div > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 25px;
  height: 25px;

  padding: 0 7px;

  border-radius: 999px;

  background: #ffffff;

  border: 1px solid rgba(42, 45, 73, 0.07);

  color: #77798b;

  font-size: 11px;
  font-weight: 700;
}

/*
 * Zone cartes
 */
.flow-task-kanban__cards {
  display: flex;
  flex-direction: column;

  gap: 8px;

  min-height: 105px;
}

/*
 * Carte
 */
.flow-task-card.flow-task-kanban-card {
  position: relative;

  display: block;

  margin: 0;

  padding: 14px;

  overflow: hidden;

  border-radius: 14px;

  background: #ffffff;

  border: 1px solid rgba(39, 42, 70, 0.075);

  box-shadow: 0 2px 6px rgba(29, 31, 53, 0.025);

  cursor: pointer;

  transform: translateY(0);

  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}

/*
 * Petite barre de statut
 */
.flow-task-card.flow-task-kanban-card::before {
  content: "";

  position: absolute;

  top: 0;
  left: 0;
  bottom: 0;

  width: 3px;

  background: #9497a8;
}

.flow-task-card.flow-task-kanban-card[data-status="in_progress"]::before {
  background: #6b63e8;
}

.flow-task-card.flow-task-kanban-card[data-status="waiting"]::before {
  background: #e5a12c;
}

.flow-task-card.flow-task-kanban-card[data-status="done"]::before {
  background: #22a978;
}

.flow-task-card.flow-task-kanban-card[data-status="cancelled"]::before {
  background: #a8a9b1;
}

/*
 * Hover carte
 */
.flow-task-card.flow-task-kanban-card:hover {
  transform: translateY(-2px);

  border-color: rgba(93, 83, 225, 0.17);

  box-shadow:
    0 12px 28px rgba(35, 38, 67, 0.07),
    0 3px 8px rgba(35, 38, 67, 0.035);
}

/*
 * Pendant déplacement
 */
.flow-task-card.flow-task-kanban-card.is-dragging {
  opacity: 0.5;

  transform: rotate(1deg) scale(0.985);

  box-shadow: 0 18px 36px rgba(35, 38, 67, 0.13);
}

/*
 * Top
 */
.flow-task-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 8px;

  margin-bottom: 9px;
}

/*
 * Priorité
 */
.flow-task-card__priority {
  display: inline-flex;
  align-items: center;

  width: fit-content;

  padding: 4px 7px;

  border-radius: 6px;

  background: #f4f4f8;

  color: #77798c;

  font-size: 9px;
  line-height: 1.2;
  font-weight: 700;

  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.flow-task-card__priority[data-priority="low"] {
  background: #f5f6f8;
  color: #818493;
}

.flow-task-card__priority[data-priority="normal"] {
  background: #f1f0ff;
  color: #6660c7;
}

.flow-task-card__priority[data-priority="high"] {
  background: #fff5e8;
  color: #a96e18;
}

.flow-task-card__priority[data-priority="critical"] {
  background: #fff0f1;
  color: #bc4050;
}

/*
 * Poignée
 */
.flow-task-card__drag {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 24px;
  height: 24px;

  border-radius: 7px;

  color: #b3b5c0;

  font-size: 15px;
  line-height: 1;

  cursor: grab;

  transition:
    color 0.15s ease,
    background-color 0.15s ease;
}

.flow-task-card__drag:hover {
  color: #6962d6;

  background: rgba(105, 98, 214, 0.07);
}

.flow-task-card__drag:active {
  cursor: grabbing;
}

/*
 * Titre
 */
.flow-task-card__title {
  margin: 0 0 7px;

  font-size: 14px;
  line-height: 1.35;
  font-weight: 700;

  color: #292b40;
}

/*
 * Description
 */
.flow-task-card__description {
  display: -webkit-box;

  margin: 0 0 11px;

  overflow: hidden;

  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;

  font-size: 11px;
  line-height: 1.5;

  color: #77798a;
}

/*
 * Métadonnées
 */
.flow-task-card__details {
  display: grid;

  gap: 6px;

  margin-top: 10px;
}

.flow-task-card__details > span {
  display: flex;
  align-items: center;

  gap: 5px;

  min-width: 0;

  font-size: 10px;
  line-height: 1.35;

  color: #757789;
}

.flow-task-card__details strong {
  color: #55576a;

  font-weight: 600;
}

/*
 * Les contrôles deviennent secondaires.
 *
 * Plus de gros bloc "formulaire" permanent.
 */
.flow-task-card__controls {
  display: grid;
  grid-template-columns: 1fr 1fr;

  gap: 7px;

  max-height: 0;

  margin-top: 0;

  overflow: hidden;

  opacity: 0;

  transform: translateY(-4px);

  transition:
    max-height 0.22s ease,
    margin-top 0.22s ease,
    opacity 0.18s ease,
    transform 0.18s ease;
}

.flow-task-kanban-card:hover .flow-task-card__controls,
.flow-task-kanban-card:focus-within .flow-task-card__controls {
  max-height: 100px;

  margin-top: 12px;

  opacity: 1;

  transform: translateY(0);
}

/*
 * Labels contrôles
 */
.flow-task-card__controls label {
  display: grid;

  gap: 4px;

  margin: 0;
}

.flow-task-card__controls label > span {
  font-size: 8px;
  line-height: 1.2;
  font-weight: 700;

  letter-spacing: 0.05em;
  text-transform: uppercase;

  color: #9a9baa;
}

/*
 * Selects compacts
 */
.flow-task-card__controls select {
  width: 100%;
  min-width: 0;
  height: 31px;

  padding: 0 25px 0 8px;

  border: 1px solid rgba(39, 42, 70, 0.09);

  border-radius: 8px;

  background-color: #fafafd;

  color: #505265;

  font-size: 10px;
  line-height: 1;

  box-shadow: none;

  cursor: pointer;
}

.flow-task-card__controls select:hover {
  border-color: rgba(105, 98, 214, 0.25);
}

.flow-task-card__controls select:focus {
  border-color: #6b63e8;

  outline: 2px solid rgba(107, 99, 232, 0.1);
}

/*
 * Zone vide
 */
.flow-task-kanban__empty {
  display: flex;
  align-items: center;
  justify-content: center;

  min-height: 84px;

  padding: 12px;

  border: 1px dashed rgba(73, 76, 104, 0.13);

  border-radius: 11px;

  background: rgba(250, 250, 253, 0.5);

  color: #afb0bc;

  font-size: 10px;
  line-height: 1.4;
  text-align: center;

  transition:
    color 0.15s ease,
    border-color 0.15s ease,
    background-color 0.15s ease;
}

.flow-task-kanban__column.is-drag-over .flow-task-kanban__empty {
  color: #6b63e8;

  border-color: rgba(107, 99, 232, 0.3);

  background: rgba(107, 99, 232, 0.045);
}

/*
 * Tâches annulées
 */
.flow-task-cancelled {
  margin-top: 14px;

  overflow: hidden;

  border: 1px solid rgba(42, 45, 73, 0.06);

  border-radius: 14px;

  background: #fafafd;
}

.flow-task-cancelled summary {
  padding: 12px 14px;

  color: #77798a;

  font-size: 11px;
  font-weight: 600;

  cursor: pointer;
}

.flow-task-cancelled__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

  gap: 8px;

  padding: 0 12px 12px;
}

/*
 * Responsive tablette
 */
@media (max-width: 1100px) {
  .flow-task-kanban {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/*
 * Responsive mobile
 */
@media (max-width: 700px) {
  .flow-task-kanban {
    display: flex;

    gap: 12px;

    overflow-x: auto;

    padding: 12px;

    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .flow-task-kanban__column {
    flex: 0 0 min(82vw, 290px);

    scroll-snap-align: start;
  }

  /*
     * Pas de hover fiable sur mobile :
     * les contrôles restent visibles.
     */
  .flow-task-card__controls {
    max-height: 100px;

    margin-top: 12px;

    opacity: 1;

    transform: none;
  }
}

/*
 * Pas d'effet de déplacement pour les utilisateurs
 * demandant moins d'animations.
 */
@media (prefers-reduced-motion: reduce) {
  .flow-task-card.flow-task-kanban-card,
  .flow-task-card__controls,
  .flow-task-kanban__column {
    transition: none;
  }
}

/* FLOW CORE — KANBAN PREMIUM V2 END */

/* ==========================================================================
   FLOW CORE — TASK TOOLBAR
   ========================================================================== */

.flow-task-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 14px;

  margin-bottom: 14px;
}

.flow-task-toolbar__left,
.flow-task-toolbar__right {
  display: flex;
  align-items: center;

  gap: 8px;
}

.flow-task-toolbar__left {
  min-width: 0;

  flex: 1;
}

.flow-task-toolbar__search {
  position: relative;

  display: flex;

  width: min(300px, 100%);
}

.flow-task-toolbar__search-icon {
  position: absolute;

  top: 50%;
  left: 11px;

  z-index: 1;

  color: #9294a5;

  font-size: 15px;

  pointer-events: none;

  transform: translateY(-50%);
}

.flow-task-toolbar__search input,
.flow-task-toolbar__filter select {
  height: 38px;

  border: 1px solid rgba(42, 45, 73, 0.085);

  border-radius: 10px;

  background: #ffffff;

  color: #4c4e61;

  font-size: 11px;

  box-shadow: none;

  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.flow-task-toolbar__search input {
  width: 100%;

  padding: 0 12px 0 34px;
}

.flow-task-toolbar__filter select {
  min-width: 155px;

  padding: 0 30px 0 10px;
}

.flow-task-toolbar__search input:hover,
.flow-task-toolbar__filter select:hover {
  border-color: rgba(102, 91, 232, 0.22);
}

.flow-task-toolbar__search input:focus,
.flow-task-toolbar__filter select:focus {
  border-color: #675ce8;

  outline: none;

  box-shadow: 0 0 0 3px rgba(103, 92, 232, 0.08);
}

.flow-task-toolbar__search input::placeholder {
  color: #a2a4b1;
}

.flow-task-toolbar__result {
  white-space: nowrap;

  color: #858797;

  font-size: 10px;
  font-weight: 600;
}

/*
 * Toggle Kanban / Liste
 */
.flow-task-view-switch {
  display: inline-flex;

  gap: 2px;

  padding: 3px;

  border: 1px solid rgba(42, 45, 73, 0.075);

  border-radius: 10px;

  background: #f6f6fa;
}

.flow-task-view-switch__button {
  display: inline-flex;
  align-items: center;

  gap: 5px;

  height: 30px;

  padding: 0 9px;

  border: 0;

  border-radius: 7px;

  background: transparent;

  color: #7b7d8c;

  font-size: 10px;
  font-weight: 600;

  box-shadow: none;

  cursor: pointer;
}

.flow-task-view-switch__button:hover {
  color: #5752be;
}

.flow-task-view-switch__button.is-active {
  background: #ffffff;

  color: #5f57d6;

  box-shadow: 0 1px 4px rgba(38, 40, 68, 0.07);
}

/* ==========================================================================
   VUE LISTE
   ========================================================================== */

.flow-task-module--list .flow-task-kanban {
  display: block;

  padding: 0;

  border: 0;

  background: transparent;
}

.flow-task-module--list .flow-task-kanban__column {
  padding: 0;

  border: 0;

  background: transparent;
}

.flow-task-module--list .flow-task-kanban__column + .flow-task-kanban__column {
  margin-top: 18px;
}

.flow-task-module--list .flow-task-kanban__header {
  margin: 0 0 7px;
}

.flow-task-module--list .flow-task-kanban__cards {
  min-height: 0;

  gap: 6px;
}

.flow-task-module--list .flow-task-kanban__empty {
  min-height: 50px;
}

.flow-task-module--list .flow-task-kanban-card {
  display: grid;

  grid-template-columns:
    minmax(180px, 1.6fr)
    minmax(120px, 0.8fr)
    minmax(190px, 1fr);

  align-items: center;

  gap: 16px;

  padding: 10px 13px 10px 16px;
}

.flow-task-module--list .flow-task-card__top {
  position: absolute;

  top: 10px;
  right: 10px;

  margin: 0;
}

.flow-task-module--list .flow-task-card__drag {
  display: none;
}

.flow-task-module--list .flow-task-card__priority {
  position: absolute;

  top: 50%;
  right: 14px;

  transform: translateY(-50%);
}

.flow-task-module--list .flow-task-card__title {
  margin: 0;

  padding-right: 78px;
}

.flow-task-module--list .flow-task-card__description {
  margin: 3px 0 0;

  -webkit-line-clamp: 1;
}

.flow-task-module--list .flow-task-card__details {
  margin: 0;

  gap: 3px;
}

.flow-task-module--list .flow-task-card__controls {
  grid-template-columns: repeat(2, minmax(90px, 1fr));

  max-height: none;

  margin: 0;

  padding-right: 72px;

  opacity: 1;

  overflow: visible;

  transform: none;
}

/*
 * Hidden réellement caché.
 */
.flow-task-kanban-card[hidden] {
  display: none !important;
}

/*
 * Responsive toolbar
 */
@media (max-width: 950px) {
  .flow-task-toolbar {
    align-items: stretch;

    flex-direction: column;
  }

  .flow-task-toolbar__right {
    justify-content: space-between;
  }
}

@media (max-width: 700px) {
  .flow-task-toolbar__left {
    display: grid;

    grid-template-columns: 1fr 1fr;
  }

  .flow-task-toolbar__search {
    grid-column: 1 / -1;

    width: 100%;
  }

  .flow-task-toolbar__filter select {
    width: 100%;
    min-width: 0;
  }

  .flow-task-view-switch__button {
    padding: 0 8px;
  }

  .flow-task-module--list .flow-task-kanban-card {
    display: block;
  }

  .flow-task-module--list .flow-task-card__controls {
    margin-top: 10px;

    padding-right: 0;
  }

  .flow-task-module--list .flow-task-card__priority {
    position: static;

    transform: none;
  }

  .flow-task-module--list .flow-task-card__top {
    position: static;

    margin-bottom: 8px;
  }
}

/* FLOW CORE — TASK TOOLBAR END */

/* ==========================================================================
   FLOW CORE — TASK DETAIL MODAL
   ========================================================================== */

.flow-task-modal {
  position: fixed;
  inset: 0;

  z-index: 99999;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 24px;

  visibility: hidden;
  opacity: 0;

  transition:
    opacity 0.18s ease,
    visibility 0.18s ease;
}

.flow-task-modal.is-open {
  visibility: visible;
  opacity: 1;
}

.flow-task-modal__backdrop {
  position: absolute;
  inset: 0;

  background: rgba(29, 30, 44, 0.32);

  backdrop-filter: blur(8px);
}

.flow-task-modal__panel {
  position: relative;
  z-index: 1;

  width: min(720px, calc(100vw - 32px));

  max-height: calc(100vh - 48px);

  overflow: auto;

  border: 1px solid rgba(80, 77, 125, 0.1);

  border-radius: 22px;

  background: rgba(255, 255, 255, 0.98);

  box-shadow: 0 30px 80px rgba(45, 43, 82, 0.18);

  transform: translateY(10px) scale(0.985);

  transition: transform 0.18s ease;
}

.flow-task-modal.is-open .flow-task-modal__panel {
  transform: translateY(0) scale(1);
}

.flow-task-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 20px;

  padding: 24px 26px 20px;

  border-bottom: 1px solid rgba(80, 77, 125, 0.08);
}

.flow-task-modal__eyebrow {
  display: block;

  margin-bottom: 7px;

  color: #6961df;

  font-size: 9px;
  font-weight: 700;

  letter-spacing: 0.08em;

  text-transform: uppercase;
}

.flow-task-modal__header h2 {
  margin: 0;

  color: #292a3d;

  font-size: 24px;
  line-height: 1.18;
}

.flow-task-modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 34px;
  height: 34px;

  flex: 0 0 34px;

  border: 1px solid rgba(70, 70, 95, 0.08);

  border-radius: 10px;

  background: #f8f8fb;

  color: #666879;

  font-size: 22px;
  line-height: 1;

  cursor: pointer;
}

.flow-task-modal__close:hover {
  background: #f0effc;

  color: #5d55d8;
}

.flow-task-modal__content {
  padding: 22px 26px 26px;
}

.flow-task-modal__meta-grid {
  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 10px;
}

.flow-task-modal__meta-card {
  min-width: 0;

  padding: 13px 14px;

  border: 1px solid rgba(80, 77, 125, 0.075);

  border-radius: 13px;

  background: #fafafe;
}

.flow-task-modal__meta-card span {
  display: block;

  margin-bottom: 5px;

  color: #9a9cac;

  font-size: 9px;
  font-weight: 600;

  text-transform: uppercase;

  letter-spacing: 0.04em;
}

.flow-task-modal__meta-card strong {
  display: block;

  overflow: hidden;

  color: #3c3e51;

  font-size: 12px;
  font-weight: 650;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.flow-task-modal__meta-card
  [data-flow-task-modal-priority]
  [data-priority="critical"] {
  color: #ca4958;
}

.flow-task-modal__meta-card
  [data-flow-task-modal-priority]
  [data-priority="high"] {
  color: #bc762a;
}

.flow-task-modal__meta-card
  [data-flow-task-modal-priority]
  [data-priority="low"] {
  color: #4e8b73;
}

.flow-task-modal__section {
  margin-top: 22px;
}

.flow-task-modal__section-label {
  display: block;

  margin-bottom: 8px;

  color: #8a8c9a;

  font-size: 9px;
  font-weight: 700;

  letter-spacing: 0.06em;

  text-transform: uppercase;
}

.flow-task-modal__description {
  min-height: 86px;

  padding: 15px 16px;

  border: 1px solid rgba(80, 77, 125, 0.075);

  border-radius: 13px;

  background: #fbfbfd;

  color: #555768;

  font-size: 13px;
  line-height: 1.6;

  white-space: pre-wrap;
}

.flow-task-modal__actions {
  display: flex;
  align-items: center;

  gap: 8px;
}

.flow-task-modal__actions .flow-button {
  min-height: 38px;
}

.flow-button--secondary {
  border: 1px solid rgba(75, 75, 100, 0.09);

  background: #f5f5f8;

  color: #5f6171;
}

.flow-task-kanban-card {
  cursor: pointer;
}

.flow-task-kanban-card:hover .flow-task-card__title {
  color: #5e57d8;
}

html.flow-task-modal-open,
html.flow-task-modal-open body {
  overflow: hidden;
}

@media (max-width: 760px) {
  .flow-task-modal {
    align-items: flex-end;

    padding: 12px;
  }

  .flow-task-modal__panel {
    width: 100%;

    max-height: calc(100vh - 24px);

    border-radius: 20px 20px 14px 14px;
  }

  .flow-task-modal__meta-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .flow-task-modal__header,
  .flow-task-modal__content {
    padding-left: 18px;
    padding-right: 18px;
  }
}

/* FLOW CORE — TASK DETAIL MODAL END */

/* ==========================================================================
   FLOW CORE — TASK MODAL — ANTI OVERLAY FREEZE
   ========================================================================== */

/*
 * Une modale fermée ne doit JAMAIS pouvoir intercepter
 * les interactions du Kanban.
 */
.flow-task-modal {
  pointer-events: none;
  visibility: hidden;
}

/*
 * État ouvert uniquement.
 */
.flow-task-modal.is-open {
  pointer-events: auto;
  visibility: visible;
}

/*
 * Sécurité supplémentaire :
 * hidden gagne systématiquement sur les règles display:flex.
 */
.flow-task-modal[hidden] {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

/*
 * Le backdrop ne reçoit les clics que lorsque la modale est ouverte.
 */
.flow-task-modal:not(.is-open) .flow-task-modal__backdrop {
  pointer-events: none !important;
}

.flow-task-modal.is-open .flow-task-modal__backdrop {
  pointer-events: auto;
}

/* ==========================================================================
   FLOW CORE — REQUEST CARDS PREMIUM
   ========================================================================== */

[data-flow-module="requests"] {
  display: grid;
  gap: 18px;
  padding-top: 6px;
}

.flow-request-card {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;

  padding: 22px 24px 22px 26px;

  border-radius: 18px;
  background: #fff;

  border: 1px solid #ececf6;

  box-shadow:
    0 2px 8px rgba(40, 44, 90, 0.04),
    0 14px 28px rgba(40, 44, 90, 0.06);

  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

.flow-request-card:hover {
  transform: translateY(-3px);

  box-shadow:
    0 8px 20px rgba(40, 44, 90, 0.08),
    0 22px 40px rgba(40, 44, 90, 0.12);
}

.flow-request-card::before {
  content: "";

  position: absolute;

  left: 0;
  top: 14px;
  bottom: 14px;

  width: 5px;

  border-radius: 0 8px 8px 0;

  background: #6658f5;
}

.flow-request-card__content {
  flex: 1;
}

.flow-request-card h3 {
  margin: 0 0 8px;

  font-size: 18px;
  font-weight: 700;

  color: #262a42;
}

.flow-request-card__type {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #8b90a6;
  margin-bottom: 14px;
}

.flow-request-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.flow-request-card__badge {
  display: inline-flex;
  align-items: center;

  padding: 5px 11px;

  border-radius: 999px;

  font-size: 11px;
  font-weight: 700;
}

.flow-request-card__badge--waiting {
  background: #fff5d9;
  color: #8a6300;
}

.flow-request-card__badge--required {
  background: #f0edff;
  color: #5b51d8;
}

.flow-request-card__infos {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
}

.flow-request-card__label {
  font-size: 11px;
  text-transform: uppercase;
  color: #9ca1b5;
  margin-bottom: 4px;
  font-weight: 600;
}

.flow-request-card__value {
  font-size: 14px;
  color: #4c5065;
  font-weight: 600;
}

.flow-request-card__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.flow-request-card .flow-button {
  border-radius: 10px;
}

/* ==========================================================================
   FLOW CORE — DOCUMENT REQUESTS V2
   ========================================================================== */

[data-flow-module="requests"] {
  display: block;
  padding-top: 4px;
}

.flow-request-list {
  display: grid;
  gap: 14px;
}

.flow-request-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  overflow: hidden;
  padding: 20px 22px 20px 24px;
  border: 1px solid #e7e9f2;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(35, 40, 80, 0.045);
}

.flow-request-card::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  background: #d7a62b;
  content: "";
}

.flow-request-card[data-tone="success"]::before {
  background: #20a36d;
}

.flow-request-card[data-tone="danger"]::before {
  background: #d95858;
}

.flow-request-card[data-tone="info"]::before {
  background: #5147f5;
}

.flow-request-card[data-tone="neutral"]::before {
  background: #9aa1b4;
}

.flow-request-card__main {
  min-width: 0;
}

.flow-request-card__topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.flow-request-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.flow-request-card__badge {
  display: inline-flex;
  min-height: 25px;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 750;
  line-height: 1;
}

.flow-request-card__badge--status {
  background: #fff7df;
  color: #85630c;
}

.flow-request-card__badge--status[data-tone="success"] {
  background: #e5f7ef;
  color: #16865b;
}

.flow-request-card__badge--status[data-tone="danger"] {
  background: #fff0f0;
  color: #bd4545;
}

.flow-request-card__badge--status[data-tone="info"] {
  background: #efedff;
  color: #5147d9;
}

.flow-request-card__badge--status[data-tone="neutral"] {
  background: #f0f1f5;
  color: #6d7486;
}

.flow-request-card__badge--required {
  background: #f4f2ff;
  color: #6258d9;
}

.flow-request-card__status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.flow-request-card__received {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  color: #16865b;
  font-size: 10px;
  font-weight: 750;
}

.flow-request-card__received > span {
  display: inline-flex;
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #e5f7ef;
}

.flow-request-card__heading {
  margin-bottom: 17px;
}

.flow-request-card__type {
  display: block;
  margin-bottom: 5px;
  color: #969daf;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.flow-request-card h3 {
  margin: 0;
  color: #252a43;
  font-size: clamp(16px, 1.5vw, 19px);
  font-weight: 750;
  line-height: 1.3;
}

.flow-request-card__infos {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 34px;
}

.flow-request-card__info {
  display: grid;
  gap: 3px;
}

.flow-request-card__label {
  color: #9aa1b4;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.flow-request-card__value {
  color: #52596e;
  font-size: 12px;
  font-weight: 650;
}

.flow-request-card__info[data-due-state="soon"] .flow-request-card__value {
  color: #a56f00;
}

.flow-request-card__info[data-due-state="overdue"] .flow-request-card__value {
  color: #c14444;
}

.flow-request-card__comment {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  margin-top: 16px;
  padding: 11px 12px;
  border: 1px solid #f2d9d9;
  border-radius: 11px;
  background: #fff8f8;
}

.flow-request-card__comment-icon {
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #ffeded;
  color: #c14444;
  font-size: 11px;
  font-weight: 900;
}

.flow-request-card__comment strong {
  display: block;
  color: #9f3939;
  font-size: 10px;
}

.flow-request-card__comment p {
  margin: 2px 0 0;
  color: #765151;
  font-size: 11px;
  line-height: 1.5;
}

.flow-request-card__actions {
  display: flex;
  min-width: 126px;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 8px;
}

.flow-request-card__actions .flow-button {
  min-width: 118px;
  justify-content: center;
  border-radius: 9px;
  white-space: nowrap;
}

.flow-request-card__validate {
  border-color: #bfe5d4;
  background: #f1faf6;
  color: #18835c;
}

.flow-request-card__validate:hover {
  border-color: #91d4b8;
  background: #e7f7ef;
}

.flow-request-card__reject {
  border-color: transparent;
  background: transparent;
  color: #a35a5a;
  box-shadow: none;
}

.flow-request-card__reject:hover {
  background: #fff4f4;
  color: #c14444;
}

.flow-request-empty {
  display: flex;
  min-height: 150px;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px;
  border: 1px dashed #dfe2ec;
  border-radius: 16px;
  background: #fafbfe;
}

.flow-request-empty__icon {
  display: inline-flex;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  background: #e7f7ef;
  color: #16865b;
  font-size: 17px;
  font-weight: 900;
}

.flow-request-empty strong {
  display: block;
  color: #29304a;
  font-size: 13px;
}

.flow-request-empty p {
  margin: 3px 0 0;
  color: #848ca0;
  font-size: 10px;
}

@media (max-width: 720px) {
  .flow-request-card {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .flow-request-card__topline {
    align-items: flex-start;
  }

  .flow-request-card__actions {
    min-width: 0;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .flow-request-card__actions .flow-button {
    min-width: 0;
  }
}

@media (max-width: 480px) {
  .flow-request-card {
    padding: 18px 16px 18px 20px;
  }

  .flow-request-card__topline {
    display: grid;
  }

  .flow-request-card__infos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .flow-request-card__actions {
    display: grid;
  }

  .flow-request-card__actions .flow-button {
    width: 100%;
  }
}

/* FLOW CORE — FRONT WORKFLOW START */

.flow-workspace-workflow {
  margin: 0 0 28px;
}

.flow-workflow-card {
  position: relative;
  overflow: hidden;
  padding: 28px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 24px;
  background: #ffffff;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.03),
    0 14px 36px rgba(15, 23, 42, 0.05);
}

.flow-workflow-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background:
    linear-gradient(
      90deg,
      #5147f5,
      #746cf7 48%,
      rgba(81, 71, 245, 0.12)
    );
}

.flow-workflow-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 20px;
}

.flow-workflow-card__title {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  min-width: 0;
}

.flow-workflow-card__icon {
  display: grid;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 15px;
  background: rgba(81, 71, 245, 0.09);
  color: #5147f5;
  font-size: 22px;
  line-height: 1;
}

.flow-workflow-card__eyebrow {
  display: block;
  margin-bottom: 5px;
  color: #777d8c;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.flow-workflow-card__title h2 {
  margin: 0;
  color: #161b2d;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.15;
}

.flow-workflow-card__title p {
  max-width: 720px;
  margin: 8px 0 0;
  color: #74798a;
  font-size: 14px;
  line-height: 1.6;
}

.flow-workflow-progress__value {
  flex: 0 0 auto;
  min-width: 94px;
  text-align: right;
}

.flow-workflow-progress__value strong {
  display: block;
  color: #5147f5;
  font-size: 24px;
  line-height: 1.1;
}

.flow-workflow-progress__value span {
  display: block;
  margin-top: 5px;
  color: #8b90a0;
  font-size: 12px;
}

.flow-workflow-progress {
  margin-bottom: 27px;
}

.flow-workflow-progress__track {
  overflow: hidden;
  height: 7px;
  border-radius: 999px;
  background: #f0f1f5;
}

.flow-workflow-progress__bar {
  display: block;
  height: 100%;
  border-radius: inherit;
  background:
    linear-gradient(
      90deg,
      #5147f5,
      #7169f7
    );
  transition: width 0.45s ease;
}

.flow-workflow-stages {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.flow-workflow-stage {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 14px;
  min-height: 72px;
}

.flow-workflow-stage__rail {
  position: relative;
  display: flex;
  justify-content: center;
}

.flow-workflow-stage__marker {
  position: relative;
  z-index: 2;
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 2px solid #dfe2e9;
  border-radius: 999px;
  background: #fff;
  color: #9297a6;
  font-size: 13px;
  font-weight: 800;
}

.flow-workflow-stage__connector {
  position: absolute;
  z-index: 1;
  top: 27px;
  bottom: -1px;
  left: 50%;
  width: 2px;
  background: #e8eaf0;
  transform: translateX(-50%);
}

.flow-workflow-stage__content {
  min-width: 0;
  padding: 1px 0 24px;
}

.flow-workflow-stage__main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 30px;
}

.flow-workflow-stage__heading {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.flow-workflow-stage__icon {
  display: inline-grid;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 9px;
  background: #f6f6fa;
  color: #666c7b;
  font-size: 15px;
}

.flow-workflow-stage__phase {
  display: block;
  margin-bottom: 2px;
  color: #969baa;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.flow-workflow-stage__heading strong {
  display: block;
  overflow: hidden;
  color: #24293b;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.35;
  text-overflow: ellipsis;
}

.flow-workflow-stage__status {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  min-height: 27px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #f4f5f7;
  color: #818696;
  font-size: 11px;
  font-weight: 700;
}

.flow-workflow-stage__date {
  display: block;
  margin-top: 5px;
  color: #9ba0ae;
  font-size: 11px;
}

.flow-workflow-stage--completed
.flow-workflow-stage__marker {
  border-color: #1eae75;
  background: #1eae75;
  color: #fff;
}

.flow-workflow-stage--completed
.flow-workflow-stage__connector {
  background: rgba(30, 174, 117, 0.35);
}

.flow-workflow-stage--completed
.flow-workflow-stage__status {
  background: rgba(30, 174, 117, 0.09);
  color: #16865a;
}

.flow-workflow-stage--in_progress
.flow-workflow-stage__marker {
  border-color: #5147f5;
  background: #5147f5;
  color: #fff;
  box-shadow:
    0 0 0 5px rgba(81, 71, 245, 0.11);
}

.flow-workflow-stage--in_progress
.flow-workflow-stage__status {
  background: rgba(81, 71, 245, 0.09);
  color: #5147f5;
}

.flow-workflow-stage.is-current
.flow-workflow-stage__content {
  margin: -6px 0 17px;
  padding: 10px 14px;
  border: 1px solid rgba(81, 71, 245, 0.12);
  border-radius: 13px;
  background: rgba(81, 71, 245, 0.035);
}

.flow-workflow-stage.is-current
.flow-workflow-stage__heading strong {
  color: #3830bf;
}

.flow-workflow-loading,
.flow-workflow-empty,
.flow-workflow-error {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 90px;
  padding: 20px 22px;
  border: 1px solid rgba(15, 23, 42, 0.07);
  border-radius: 18px;
  background: #fff;
  color: #777d8d;
}

.flow-workflow-loading__spinner {
  width: 22px;
  height: 22px;
  border: 2px solid #ececf3;
  border-top-color: #5147f5;
  border-radius: 999px;
  animation:
    flow-workflow-spinner 0.75s linear infinite;
}

@keyframes flow-workflow-spinner {
  to {
    transform: rotate(360deg);
  }
}

.flow-workflow-empty__icon,
.flow-workflow-error > span {
  display: grid;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 13px;
  background: #f4f4f8;
  color: #73798a;
  font-size: 19px;
}

.flow-workflow-empty strong,
.flow-workflow-error strong {
  color: #292e3e;
}

.flow-workflow-empty p,
.flow-workflow-error p {
  margin: 4px 0 0;
  font-size: 13px;
}

.flow-workflow-error > span {
  background: rgba(217, 68, 88, 0.09);
  color: #d94458;
}

@media (max-width: 700px) {
  .flow-workflow-card {
    padding: 22px 18px;
    border-radius: 19px;
  }

  .flow-workflow-card__header {
    gap: 18px;
  }

  .flow-workflow-card__icon {
    flex-basis: 42px;
    width: 42px;
    height: 42px;
  }

  .flow-workflow-card__title p {
    display: none;
  }

  .flow-workflow-progress__value {
    min-width: 65px;
  }

  .flow-workflow-progress__value strong {
    font-size: 19px;
  }

  .flow-workflow-progress__value span {
    font-size: 10px;
  }

  .flow-workflow-stage {
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 10px;
  }

  .flow-workflow-stage__main {
    align-items: flex-start;
  }

  .flow-workflow-stage__status {
    font-size: 10px;
  }

  .flow-workflow-stage__heading strong {
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  .flow-workflow-progress__bar {
    transition: none;
  }

  .flow-workflow-loading__spinner {
    animation: none;
  }
}

/* FLOW CORE — FRONT WORKFLOW END */


/* ==========================================================================
   FLOW CORE — WORKFLOW STAGE ACTIONS
   ========================================================================== */

.flow-workflow-stage__actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: 16px;
}

.flow-workflow-stage__complete {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;

  min-height: 42px;

  padding: 10px 16px;

  border: 1px solid #2563eb;
  border-radius: 10px;

  background: #2563eb;
  color: #ffffff;

  font: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;

  cursor: pointer;

  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.08),
    0 4px 10px rgba(37, 99, 235, 0.12);

  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease,
    opacity 0.18s ease;
}

.flow-workflow-stage__complete:hover:not(:disabled) {
  background: #1d4ed8;
  border-color: #1d4ed8;

  box-shadow:
    0 2px 4px rgba(15, 23, 42, 0.1),
    0 7px 16px rgba(37, 99, 235, 0.16);

  transform: translateY(-1px);
}

.flow-workflow-stage__complete:focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.24);
  outline-offset: 3px;
}

.flow-workflow-stage__complete:disabled {
  cursor: wait;
  opacity: 0.72;
}

.flow-workflow-stage__complete-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 20px;
  height: 20px;

  border-radius: 999px;

  background: rgba(255, 255, 255, 0.17);

  font-size: 12px;
  font-weight: 900;
}

.flow-workflow-stage__complete.is-loading
.flow-workflow-stage__complete-icon {
  animation:
    flow-workflow-complete-pulse
    0.9s ease-in-out infinite alternate;
}

@keyframes flow-workflow-complete-pulse {
  from {
    opacity: 0.45;
    transform: scale(0.88);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@media (max-width: 680px) {
  .flow-workflow-stage__actions {
    width: 100%;
  }

  .flow-workflow-stage__complete {
    width: 100%;
  }
}

/* FLOW CORE — WORKFLOW STAGE ACTIONS END */


/* ==========================================================================
   FLOW CORE — WORKFLOW UX V2
   ========================================================================== */

.flow-workspace-workflow {
  margin: 18px 0 24px;
}

.flow-workflow-card {
  position: relative;
  overflow: hidden;

  padding: 20px;

  border: 1px solid #e5e7eb;
  border-radius: 16px;

  background: #ffffff;

  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.03),
    0 8px 22px rgba(15, 23, 42, 0.04);
}

.flow-workflow-card::before {
  display: none;
}

.flow-workflow-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;

  margin-bottom: 14px;
}

.flow-workflow-card__title {
  display: flex;
  align-items: flex-start;
  gap: 12px;

  min-width: 0;
}

.flow-workflow-card__icon {
  flex: 0 0 auto;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 38px;
  height: 38px;

  border-radius: 10px;

  background: #eff6ff;
  color: #2563eb;

  font-size: 18px;
  line-height: 1;
}

.flow-workflow-card__eyebrow {
  display: block;

  margin-bottom: 3px;

  color: #64748b;

  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;

  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.flow-workflow-card__title h2 {
  margin: 0;

  color: #0f172a;

  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
}

.flow-workflow-card__title p {
  max-width: 640px;

  margin: 5px 0 0;

  color: #64748b;

  font-size: 13px;
  line-height: 1.5;
}

.flow-workflow-progress__value {
  flex: 0 0 auto;

  display: flex;
  align-items: baseline;
  gap: 8px;

  min-width: auto;

  text-align: right;
}

.flow-workflow-progress__value strong {
  color: #0f172a;

  font-size: 20px;
  font-weight: 800;
  line-height: 1;
}

.flow-workflow-progress__value span {
  color: #64748b;

  font-size: 12px;
  font-weight: 600;
}

.flow-workflow-progress {
  margin: 0 0 18px;
}

.flow-workflow-progress__track {
  width: 100%;
  height: 6px;

  overflow: hidden;

  border-radius: 999px;

  background: #e2e8f0;
}

.flow-workflow-progress__bar {
  display: block;

  height: 100%;

  border-radius: inherit;

  background: #2563eb;

  transition: width 0.35s ease;
}

.flow-workflow-stages {
  display: grid;
  gap: 8px;

  margin: 0;
  padding: 0;

  list-style: none;
}

.flow-workflow-stage {
  position: relative;

  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 10px;

  min-height: 0;

  padding: 0;

  border: 0;
  background: transparent;
}

.flow-workflow-stage__rail {
  position: relative;

  display: flex;
  justify-content: center;
}

.flow-workflow-stage__marker {
  position: relative;
  z-index: 2;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 24px;
  height: 24px;

  border: 2px solid #cbd5e1;
  border-radius: 999px;

  background: #ffffff;
  color: #64748b;

  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

.flow-workflow-stage__connector {
  position: absolute;
  top: 24px;
  bottom: -12px;
  left: 50%;

  width: 2px;

  transform: translateX(-50%);

  background: #e2e8f0;
}

.flow-workflow-stage__content {
  min-width: 0;

  padding: 10px 12px 11px;

  border: 1px solid transparent;
  border-radius: 10px;

  background: transparent;

  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

.flow-workflow-stage__main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.flow-workflow-stage__heading {
  display: flex;
  align-items: center;
  gap: 9px;

  min-width: 0;
}

.flow-workflow-stage__icon {
  flex: 0 0 auto;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 26px;
  height: 26px;

  border-radius: 8px;

  background: #f8fafc;

  font-size: 14px;
}

.flow-workflow-stage__phase {
  display: block;

  margin-bottom: 2px;

  color: #94a3b8;

  font-size: 10px;
  font-weight: 700;
  line-height: 1.1;

  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.flow-workflow-stage__heading strong {
  display: block;

  overflow: hidden;

  color: #334155;

  font-size: 14px;
  font-weight: 650;
  line-height: 1.35;

  text-overflow: ellipsis;
}

.flow-workflow-stage__status {
  flex: 0 0 auto;

  display: inline-flex;
  align-items: center;

  min-height: 24px;

  padding: 4px 8px;

  border-radius: 999px;

  background: #f1f5f9;
  color: #64748b;

  font-size: 10px;
  font-weight: 700;
  line-height: 1;

  white-space: nowrap;
}

.flow-workflow-stage__date {
  display: block;

  margin-top: 5px;

  color: #94a3b8;

  font-size: 11px;
  line-height: 1.3;
}

/* ----------------------------------------------------------
   TERMINÉE
   ---------------------------------------------------------- */

.flow-workflow-stage--completed .flow-workflow-stage__marker {
  border-color: #16a34a;

  background: #16a34a;
  color: #ffffff;
}

.flow-workflow-stage--completed .flow-workflow-stage__connector {
  background: #86efac;
}

.flow-workflow-stage--completed .flow-workflow-stage__content {
  opacity: 0.72;
}

.flow-workflow-stage--completed .flow-workflow-stage__heading strong {
  color: #475569;
}

.flow-workflow-stage--completed .flow-workflow-stage__status {
  background: #f0fdf4;
  color: #15803d;
}

/* ----------------------------------------------------------
   EN COURS
   ---------------------------------------------------------- */

.flow-workflow-stage--in_progress .flow-workflow-stage__marker {
  border-color: #2563eb;

  background: #2563eb;
  color: #ffffff;

  box-shadow:
    0 0 0 4px rgba(37, 99, 235, 0.1);
}

.flow-workflow-stage--in_progress .flow-workflow-stage__content,
.flow-workflow-stage.is-current .flow-workflow-stage__content {
  border-color: #bfdbfe;

  background: #f8fbff;

  box-shadow:
    0 3px 10px rgba(37, 99, 235, 0.05);
}

.flow-workflow-stage--in_progress .flow-workflow-stage__heading strong,
.flow-workflow-stage.is-current .flow-workflow-stage__heading strong {
  color: #0f172a;

  font-weight: 750;
}

.flow-workflow-stage--in_progress .flow-workflow-stage__status {
  background: #dbeafe;
  color: #1d4ed8;
}

/* ----------------------------------------------------------
   À VENIR
   ---------------------------------------------------------- */

.flow-workflow-stage--pending .flow-workflow-stage__content {
  opacity: 0.62;
}

.flow-workflow-stage--pending .flow-workflow-stage__heading strong {
  color: #64748b;
}

/* ----------------------------------------------------------
   ACTION
   ---------------------------------------------------------- */

.flow-workflow-stage__actions {
  display: flex;
  justify-content: flex-start;

  margin-top: 10px;
}

.flow-workflow-stage__complete {
  min-height: 36px;

  padding: 8px 12px;

  border: 1px solid #2563eb;
  border-radius: 8px;

  background: #2563eb;
  color: #ffffff;

  box-shadow: none;

  font-size: 12px;
  font-weight: 700;
}

.flow-workflow-stage__complete:hover:not(:disabled) {
  background: #1d4ed8;
  border-color: #1d4ed8;

  box-shadow: none;

  transform: none;
}

.flow-workflow-stage__complete-icon {
  width: 17px;
  height: 17px;

  background: rgba(255, 255, 255, 0.15);

  font-size: 10px;
}

/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width: 700px) {
  .flow-workflow-card {
    padding: 16px;
  }

  .flow-workflow-card__header {
    display: block;
  }

  .flow-workflow-progress__value {
    justify-content: flex-start;

    margin-top: 12px;

    text-align: left;
  }

  .flow-workflow-stage {
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 8px;
  }

  .flow-workflow-stage__marker {
    width: 22px;
    height: 22px;
  }

  .flow-workflow-stage__connector {
    top: 22px;
  }

  .flow-workflow-stage__content {
    padding: 10px;
  }

  .flow-workflow-stage__main {
    align-items: flex-start;
  }

  .flow-workflow-stage__status {
    font-size: 9px;
  }

  .flow-workflow-stage__complete {
    width: auto;
  }
}

/* FLOW CORE — WORKFLOW UX V2 END */

/* ==========================================================================
   FLOW CORE — COCKPIT / WORKFLOW READABILITY PATCH
   ========================================================================== */

/*
 * Objectif :
 * - augmenter la lisibilité générale ;
 * - mieux hiérarchiser phase / titre / statut ;
 * - rendre les étapes futures visibles sans les suraccentuer ;
 * - donner plus d'espace aux contenus ;
 * - conserver un rendu compact.
 */

/* --------------------------------------------------------------------------
   Cockpit
   -------------------------------------------------------------------------- */

[data-flow-workspace-cockpit] {
  font-size: 15px;
}

.flow-workspace-cockpit__heading {
  margin-bottom: 18px;
}

.flow-workspace-cockpit__heading h1,
.flow-workspace-cockpit__heading h2,
.flow-workspace-cockpit__heading h3 {
  letter-spacing: -0.02em;
}

/* --------------------------------------------------------------------------
   Carte workflow
   -------------------------------------------------------------------------- */

.flow-workspace-workflow {
  margin-top: 18px;
}

.flow-workflow-card {
  padding: 24px 26px 28px;
  border-radius: 16px;
}

.flow-workflow-card__header {
  gap: 24px;
  margin-bottom: 18px;
}

.flow-workflow-card__title {
  gap: 14px;
  min-width: 0;
}

.flow-workflow-card__icon {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  font-size: 18px;
}

.flow-workflow-card__eyebrow {
  display: block;
  margin-bottom: 3px;

  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;

  letter-spacing: 0.08em;
}

.flow-workflow-card__title h2 {
  margin: 0;

  font-size: 19px;
  line-height: 1.25;
  font-weight: 700;

  letter-spacing: -0.02em;
}

.flow-workflow-card__title p {
  max-width: 680px;
  margin: 5px 0 0;

  font-size: 13px;
  line-height: 1.55;

  opacity: 0.78;
}

/* --------------------------------------------------------------------------
   Progression
   -------------------------------------------------------------------------- */

.flow-workflow-progress__value {
  flex: 0 0 auto;

  min-width: 100px;

  text-align: right;
}

.flow-workflow-progress__value strong {
  display: block;

  font-size: 20px;
  line-height: 1;
  font-weight: 800;
}

.flow-workflow-progress__value span {
  display: block;
  margin-top: 4px;

  font-size: 11px;
  line-height: 1.3;

  opacity: 0.7;
}

.flow-workflow-progress {
  margin-bottom: 22px;
}

.flow-workflow-progress__track {
  height: 5px;
  border-radius: 999px;
  overflow: hidden;
}

.flow-workflow-progress__bar {
  min-width: 4px;
  border-radius: 999px;
}

/* --------------------------------------------------------------------------
   Liste étapes
   -------------------------------------------------------------------------- */

.flow-workflow-stages {
  margin: 0;
  padding: 0;

  display: flex;
  flex-direction: column;

  gap: 0;
}

.flow-workflow-stage {
  position: relative;

  grid-template-columns: 28px minmax(0, 1fr);

  min-height: 58px;

  padding: 0;
}

.flow-workflow-stage__rail {
  width: 28px;

  align-items: center;
}

.flow-workflow-stage__marker {
  width: 18px;
  height: 18px;

  border-width: 2px;

  font-size: 10px;
  font-weight: 800;

  box-shadow: none;
}

.flow-workflow-stage__connector {
  top: 18px;
  bottom: -1px;

  width: 2px;
}

.flow-workflow-stage__content {
  min-width: 0;

  margin: 0 0 6px;
  padding: 10px 14px 11px;

  border-radius: 10px;
}

.flow-workflow-stage__main {
  gap: 16px;

  align-items: center;
}

.flow-workflow-stage__heading {
  flex: 1 1 auto;
  min-width: 0;

  gap: 10px;
}

.flow-workflow-stage__heading > div {
  min-width: 0;
}

.flow-workflow-stage__icon {
  flex: 0 0 26px;

  width: 26px;
  height: 26px;

  font-size: 14px;
}

.flow-workflow-stage__phase {
  display: block;

  margin-bottom: 2px;

  font-size: 10px;
  line-height: 1.25;
  font-weight: 700;

  letter-spacing: 0.055em;
  text-transform: uppercase;

  opacity: 0.6;
}

.flow-workflow-stage__heading strong {
  display: block;

  font-size: 13.5px;
  line-height: 1.35;
  font-weight: 650;

  letter-spacing: -0.01em;
}

.flow-workflow-stage__status {
  flex: 0 0 auto;

  padding: 5px 9px;

  border-radius: 999px;

  font-size: 10px;
  line-height: 1.2;
  font-weight: 700;

  white-space: nowrap;
}

.flow-workflow-stage__date {
  display: block;

  margin-top: 3px;

  font-size: 10.5px;
  line-height: 1.35;

  opacity: 0.64;
}

/* --------------------------------------------------------------------------
   Etat : à venir
   -------------------------------------------------------------------------- */

.flow-workflow-stage--pending {
  opacity: 1;
}

.flow-workflow-stage--pending .flow-workflow-stage__content {
  background: transparent;
}

.flow-workflow-stage--pending .flow-workflow-stage__heading strong {
  color: #536176;
}

.flow-workflow-stage--pending .flow-workflow-stage__phase {
  color: #7b8798;
  opacity: 0.78;
}

.flow-workflow-stage--pending .flow-workflow-stage__marker {
  border-color: #c7d2e3;
  background: #ffffff;
}

.flow-workflow-stage--pending .flow-workflow-stage__connector {
  background: #dce4ef;
}

.flow-workflow-stage--pending .flow-workflow-stage__status {
  color: #758197;
  background: #f3f6fa;
}

/* --------------------------------------------------------------------------
   Etat : terminée
   -------------------------------------------------------------------------- */

.flow-workflow-stage--completed .flow-workflow-stage__heading strong {
  color: #334155;
}

.flow-workflow-stage--completed .flow-workflow-stage__phase {
  opacity: 0.65;
}

.flow-workflow-stage--completed .flow-workflow-stage__content {
  opacity: 0.92;
}

.flow-workflow-stage--completed .flow-workflow-stage__status {
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   Etat : en cours
   -------------------------------------------------------------------------- */

.flow-workflow-stage--in_progress .flow-workflow-stage__content,
.flow-workflow-stage.is-current .flow-workflow-stage__content {
  padding: 13px 15px 14px;

  border-width: 1px;
  border-style: solid;

  box-shadow:
    0 3px 10px rgba(37, 99, 235, 0.05);
}

.flow-workflow-stage--in_progress .flow-workflow-stage__heading strong,
.flow-workflow-stage.is-current .flow-workflow-stage__heading strong {
  font-size: 14px;
  font-weight: 750;
}

.flow-workflow-stage--in_progress .flow-workflow-stage__phase,
.flow-workflow-stage.is-current .flow-workflow-stage__phase {
  opacity: 0.75;
}

/* --------------------------------------------------------------------------
   Bouton validation
   -------------------------------------------------------------------------- */

.flow-workflow-stage__actions {
  margin-top: 10px;
}

.flow-workflow-stage__complete {
  min-height: 36px;

  padding: 8px 12px;

  border-radius: 7px;

  font-size: 11px;
  line-height: 1.2;
  font-weight: 700;

  cursor: pointer;

  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    opacity 0.15s ease;
}

.flow-workflow-stage__complete:hover:not(:disabled) {
  transform: translateY(-1px);

  box-shadow:
    0 4px 12px rgba(37, 99, 235, 0.16);
}

.flow-workflow-stage__complete:focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.22);
  outline-offset: 2px;
}

.flow-workflow-stage__complete:disabled {
  cursor: wait;
  opacity: 0.7;
}

/* --------------------------------------------------------------------------
   Cartes statistiques cockpit
   -------------------------------------------------------------------------- */

.flow-workspace-cockpit .flow-stat-card,
.flow-workspace-cockpit [class*="stat-card"] {
  min-height: 82px;
}

.flow-workspace-cockpit .flow-stat-card strong,
.flow-workspace-cockpit [class*="stat-card"] strong {
  font-size: 18px;
}

.flow-workspace-cockpit .flow-stat-card span,
.flow-workspace-cockpit [class*="stat-card"] span {
  line-height: 1.35;
}

/* --------------------------------------------------------------------------
   Priorités / activité
   -------------------------------------------------------------------------- */

.flow-workspace-cockpit [class*="priority"],
.flow-workspace-cockpit [class*="activity"],
.flow-workspace-cockpit [class*="timeline"] {
  font-size: 13px;
}

.flow-workspace-cockpit [class*="priority"] strong,
.flow-workspace-cockpit [class*="activity"] strong,
.flow-workspace-cockpit [class*="timeline"] strong {
  line-height: 1.4;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 782px) {
  .flow-workflow-card {
    padding: 20px 18px 22px;
  }

  .flow-workflow-card__header {
    align-items: flex-start;
  }

  .flow-workflow-progress__value {
    min-width: 78px;
  }

  .flow-workflow-stage {
    grid-template-columns: 24px minmax(0, 1fr);
  }

  .flow-workflow-stage__rail {
    width: 24px;
  }

  .flow-workflow-stage__content {
    padding-left: 11px;
    padding-right: 11px;
  }

  .flow-workflow-stage__main {
    align-items: flex-start;
  }

  .flow-workflow-stage__status {
    margin-top: 1px;
  }
}

@media (max-width: 560px) {
  .flow-workflow-card__header {
    flex-direction: column;
  }

  .flow-workflow-progress__value {
    width: 100%;

    text-align: left;
  }

  .flow-workflow-stage__main {
    flex-direction: column;
    gap: 7px;
  }

  .flow-workflow-stage__status {
    align-self: flex-start;
  }

  .flow-workflow-stage__complete {
    width: 100%;
  }
}

/* FLOW CORE — COCKPIT / WORKFLOW READABILITY PATCH END */

/* ==========================================================================
   FLOW CORE — WORKFLOW VISUAL CLEANUP
   ========================================================================== */

/* Supprime les pastilles/icônes parasites devant le header du workflow */
.flow-workflow-card__icon {
    display: none !important;
}

/* Recale le titre après suppression de l'icône */
.flow-workflow-card__title {
    display: block !important;
}

.flow-workflow-card__title > div {
    width: 100% !important;
}

/* Supprime les éventuelles icônes d'étapes venant du template */
.flow-workflow-stage__icon {
    display: none !important;
}

/* Recale proprement le contenu des étapes */
.flow-workflow-stage__heading {
    display: flex !important;
    align-items: flex-start !important;
    gap: 0 !important;
}

.flow-workflow-stage__heading > div {
    min-width: 0 !important;
}

/* Nettoyage des marqueurs de timeline */
.flow-workflow-stage__marker {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    box-shadow: none !important;
}

/* État terminé */
.flow-workflow-stage--completed .flow-workflow-stage__marker {
    background: #16a34a !important;
    border: 2px solid #16a34a !important;
    color: #ffffff !important;
}

/* État en cours */
.flow-workflow-stage--in_progress .flow-workflow-stage__marker {
    background: #2563eb !important;
    border: 2px solid #2563eb !important;
    color: #ffffff !important;
}

/* État à venir */
.flow-workflow-stage--pending .flow-workflow-stage__marker {
    background: #ffffff !important;
    border: 2px solid #cbd5e1 !important;
    color: transparent !important;
}

/* Rail vertical plus discret */
.flow-workflow-stage__connector {
    width: 2px !important;
    background: #e2e8f0 !important;
}

.flow-workflow-stage--completed .flow-workflow-stage__connector {
    background: #86efac !important;
}

/* Typographie des étapes */
.flow-workflow-stage__phase {
    display: block !important;
    margin-bottom: 2px !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: #94a3b8 !important;
}

.flow-workflow-stage__heading strong {
    display: block !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
    font-weight: 650 !important;
    color: #1e293b !important;
}

/* Étape en cours plus nette */
.flow-workflow-stage.is-current .flow-workflow-stage__content {
    background: #f8fbff !important;
    border: 1px solid #bfdbfe !important;
    border-radius: 10px !important;
    padding: 14px 16px !important;
    box-shadow: none !important;
}

/* Header plus lisible */
.flow-workflow-card__eyebrow {
    margin-bottom: 4px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    color: #64748b !important;
}

.flow-workflow-card__title h2 {
    margin: 0 !important;
    font-size: 22px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    color: #0f172a !important;
}

.flow-workflow-card__title p {
    margin: 6px 0 0 !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
    color: #94a3b8 !important;
}

/* ==========================================================================
   FLOW CORE — WORKFLOW VISUAL CLEANUP END
   ========================================================================== */



/* ==========================================================================
   FLOW CORE — NETWORK PERFORMANCE DASHBOARD V1
   ========================================================================== */

/*
 * Dashboard davantage orienté pilotage du portefeuille.
 * On privilégie :
 * - performance mensuelle ;
 * - dossiers à traiter ;
 * - animation du réseau.
 */

#flow-smart-dashboard .flow-dashboard-document-overview {
  grid-template-columns:
    minmax(250px, 0.8fr)
    minmax(0, 1.6fr);

  align-items: stretch;
  gap: 18px;
}

/* --------------------------------------------------------------------------
   Bloc performance
   -------------------------------------------------------------------------- */

#flow-smart-dashboard .flow-dashboard-compliance {
  min-height: 250px;
  padding: 22px;

  align-items: center;
}

#flow-smart-dashboard .flow-dashboard-compliance__visual {
  flex: 0 0 auto;
}

#flow-smart-dashboard .flow-dashboard-compliance__circle {
  width: 116px;
  height: 116px;
}

#flow-smart-dashboard .flow-dashboard-compliance__circle strong {
  font-size: 30px;
  line-height: 1;
}

#flow-smart-dashboard .flow-dashboard-compliance__circle span {
  margin-top: 5px;

  font-size: 10px;
  line-height: 1.2;
  font-weight: 700;

  text-transform: uppercase;
  letter-spacing: 0.06em;
}

#flow-smart-dashboard .flow-dashboard-compliance__content h3 {
  margin-top: 5px;

  font-size: 18px;
  line-height: 1.25;
}

#flow-smart-dashboard .flow-dashboard-compliance__content > p {
  max-width: 440px;

  margin-top: 7px;

  font-size: 12px;
  line-height: 1.5;
}

#flow-smart-dashboard .flow-dashboard-compliance__legend {
  margin-top: 16px;
  gap: 7px;
}

#flow-smart-dashboard .flow-dashboard-compliance__legend > span {
  padding: 7px 9px;

  border-radius: 8px;

  font-size: 10px;
  line-height: 1.25;
}

/* --------------------------------------------------------------------------
   Dossiers à traiter
   -------------------------------------------------------------------------- */

#flow-smart-dashboard .flow-dashboard-priorities {
  min-height: 250px;
  padding: 20px 22px;
}

#flow-smart-dashboard .flow-dashboard-priority-list {
  display: grid;
  gap: 8px;

  margin-top: 14px;
}

#flow-smart-dashboard .flow-dashboard-priority {
  min-height: 58px;

  padding: 9px 11px;

  border-radius: 10px;
}

#flow-smart-dashboard .flow-dashboard-priority__icon {
  width: 31px;
  height: 31px;

  border-radius: 8px;

  font-size: 12px;
}

#flow-smart-dashboard .flow-dashboard-priority__content {
  gap: 1px;
}

#flow-smart-dashboard .flow-dashboard-priority__content small {
  font-size: 8px;
  line-height: 1.2;

  letter-spacing: 0.055em;
}

#flow-smart-dashboard .flow-dashboard-priority__content strong {
  font-size: 12.5px;
  line-height: 1.3;
}

#flow-smart-dashboard .flow-dashboard-priority__content > span {
  margin-top: 1px;

  font-size: 10.5px;
  line-height: 1.35;
}

#flow-smart-dashboard .flow-dashboard-priority__content em {
  margin-top: 2px;

  font-size: 9px;
  line-height: 1.2;

  font-style: normal;

  opacity: 0.62;
}

/* --------------------------------------------------------------------------
   Activité réseau : secondaire et compacte
   -------------------------------------------------------------------------- */

#flow-smart-dashboard .flow-smart-dashboard__grid {
  grid-template-columns:
    minmax(0, 1.35fr)
    minmax(260px, 0.65fr);

  gap: 18px;
}

#flow-smart-dashboard .flow-smart-activity,
#flow-smart-dashboard .flow-smart-actions {
  padding: 18px 20px;
}

#flow-smart-dashboard .flow-smart-activity__list {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 7px;

  max-height: 250px;
  overflow: hidden;
}

#flow-smart-dashboard .flow-smart-activity-item {
  min-height: 58px;

  padding: 9px 10px;

  border-radius: 9px;
}

#flow-smart-dashboard .flow-smart-activity-item:nth-child(n + 5) {
  display: none;
}

#flow-smart-dashboard .flow-smart-activity-item__icon {
  width: 29px;
  height: 29px;

  border-radius: 7px;

  font-size: 11px;
}

#flow-smart-dashboard .flow-smart-activity-item__top strong {
  font-size: 9.5px;
}

#flow-smart-dashboard .flow-smart-activity-item__top time {
  font-size: 8px;
}

#flow-smart-dashboard .flow-smart-activity-item__title {
  margin-top: 1px;

  font-size: 10.5px;
  line-height: 1.3;
}

#flow-smart-dashboard .flow-smart-activity-item__meta {
  margin-top: 1px;

  font-size: 8.5px;
  line-height: 1.25;
}

#flow-smart-dashboard .flow-smart-activity-item__comment {
  display: none;
}

/* --------------------------------------------------------------------------
   Actions rapides plus compactes
   -------------------------------------------------------------------------- */

#flow-smart-dashboard .flow-smart-actions__grid {
  gap: 7px;
}

#flow-smart-dashboard .flow-smart-action {
  min-height: 52px;

  padding: 8px 10px;

  border-radius: 9px;
}

#flow-smart-dashboard .flow-smart-action__icon {
  width: 30px;
  height: 30px;
}

#flow-smart-dashboard .flow-smart-action strong {
  font-size: 11px;
}

#flow-smart-dashboard .flow-smart-action small {
  font-size: 9px;
}

/* --------------------------------------------------------------------------
   KPI
   -------------------------------------------------------------------------- */

#flow-smart-dashboard .flow-smart-kpis {
  gap: 12px;
}

#flow-smart-dashboard .flow-smart-kpi {
  min-height: 94px;

  padding: 15px 16px;
}

#flow-smart-dashboard .flow-smart-kpi__icon {
  width: 38px;
  height: 38px;

  border-radius: 10px;
}

#flow-smart-dashboard .flow-smart-kpi strong {
  font-size: 23px;
}

#flow-smart-dashboard .flow-smart-kpi small {
  margin-top: 2px;

  font-size: 9px;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 980px) {
  #flow-smart-dashboard .flow-dashboard-document-overview,
  #flow-smart-dashboard .flow-smart-dashboard__grid {
    grid-template-columns: 1fr;
  }

  #flow-smart-dashboard .flow-smart-activity__list {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  #flow-smart-dashboard .flow-smart-activity__list {
    grid-template-columns: 1fr;
  }

  #flow-smart-dashboard .flow-smart-activity-item:nth-child(n + 4) {
    display: none;
  }

  #flow-smart-dashboard .flow-dashboard-compliance {
    align-items: flex-start;
  }
}

/* FLOW CORE — NETWORK PERFORMANCE DASHBOARD V1 END */


/* ==========================================================================
   FLOW CORE — WORKSPACE AJAX NAVIGATION
   ========================================================================== */

.flow-workspace-cockpit {
  position: relative;
}

.flow-workspace-cockpit.is-module-loading
.flow-workspace-panel {
  opacity: 0.48;
  pointer-events: none;
  transition:
    opacity 0.16s ease;
}

.flow-workspace-modules
.flow-module-card.is-loading {
  position: relative;
  cursor: progress;
}

.flow-workspace-modules
.flow-module-card.is-loading::after {
  width: 16px;
  height: 16px;
  margin-left: auto;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  content: "";
  opacity: 0.6;
  animation:
    flow-workspace-module-spin
    0.7s linear infinite;
}

.flow-workspace-panel {
  scroll-margin-top: 28px;
}

.flow-workspace-panel--ajax-error
.flow-error-inline {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 24px;
}

@keyframes flow-workspace-module-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (
  prefers-reduced-motion: reduce
) {
  .flow-workspace-cockpit.is-module-loading
  .flow-workspace-panel {
    transition: none;
  }

  .flow-workspace-modules
  .flow-module-card.is-loading::after {
    animation-duration: 1.4s;
  }
}

/* FLOW CORE — WORKSPACE AJAX NAVIGATION END */


/* ==========================================================================
   FLOW CORE — TYPOGRAPHIE PORTAIL V2
   Harmonisation dashboard / cockpit / modules / modales
   ========================================================================== */

.flow-portal,
.flow-front-modal,
.flow-task-modal {
  --flow-font-size-xs: 12px;
  --flow-font-size-sm: 13px;
  --flow-font-size-base: 15px;
  --flow-font-size-md: 16px;
  --flow-font-size-lg: 18px;
  --flow-font-size-xl: 22px;
  --flow-font-size-2xl: 28px;

  font-family: inherit;
  font-size: var(--flow-font-size-base);
  line-height: 1.55;
  color: #334155;
}

.flow-portal *,
.flow-front-modal *,
.flow-task-modal * {
  box-sizing: border-box;
}

.flow-portal p,
.flow-portal li,
.flow-portal td,
.flow-portal dd,
.flow-portal input,
.flow-portal select,
.flow-portal textarea,
.flow-portal button,
.flow-front-modal input,
.flow-front-modal select,
.flow-front-modal textarea,
.flow-front-modal button,
.flow-task-modal input,
.flow-task-modal select,
.flow-task-modal textarea,
.flow-task-modal button {
  font-family: inherit;
  font-size: var(--flow-font-size-base);
  line-height: 1.5;
}

.flow-portal h1 {
  font-size: 30px;
  line-height: 1.18;
  letter-spacing: -0.025em;
}

.flow-portal h2,
.flow-front-modal h2,
.flow-task-modal h2 {
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

.flow-portal h3 {
  font-size: 17px;
  line-height: 1.35;
}

.flow-portal h4 {
  font-size: 16px;
  line-height: 1.4;
}

.flow-portal__eyebrow,
.flow-workflow-card__eyebrow,
.flow-workflow-stage__phase {
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: 0.075em;
}

.flow-workspace-card p,
.flow-module-card div span,
.flow-task-card__meta,
.flow-task-card__footer,
.flow-workflow-stage__date,
.flow-workflow-progress__value span {
  font-size: 13px;
  line-height: 1.45;
}

.flow-role-badge,
.flow-count-badge,
.flow-workspace-card__type,
.flow-workspace-card__status,
.flow-client-card__status,
.flow-task-card__priority,
.flow-workflow-stage__status {
  font-size: 11px;
  line-height: 1.3;
}

.flow-task-card__title {
  margin-top: 12px;
  font-size: 16px;
  line-height: 1.35;
  font-weight: 750;
}

.flow-task-kanban__header h3 {
  font-size: 15px;
  line-height: 1.3;
}

.flow-front-field label {
  display: block;
  margin-bottom: 7px;
  font-size: 14px;
  line-height: 1.35;
  font-weight: 700;
  color: #334155;
}

.flow-front-field input,
.flow-front-field textarea,
.flow-front-field select {
  box-sizing: border-box;
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #fff;
  color: #0f172a;
  font: inherit;
}

.flow-front-field textarea {
  min-height: 115px;
  resize: vertical;
}

.flow-front-field input:focus,
.flow-front-field textarea:focus,
.flow-front-field select:focus {
  outline: 3px solid rgba(79, 70, 229, 0.12);
  border-color: var(--flow-primary);
}

.flow-front-modal__dialog,
.flow-task-edit-modal__dialog {
  font-size: 15px;
}

.flow-task-edit-modal__dialog {
  width: min(720px, calc(100vw - 32px));
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}

.flow-task-edit-modal__actions {
  flex-wrap: wrap;
}

.flow-task-edit-modal__complete {
  border-color: #bbf7d0;
  background: #f0fdf4;
  color: #166534;
}

.flow-task-edit-modal__complete:hover {
  border-color: #86efac;
  background: #dcfce7;
}

.flow-front-feedback {
  font-size: 14px;
}

.flow-front-feedback[data-type="success"] {
  color: #047857;
}

.flow-front-feedback[data-type="info"] {
  color: #4338ca;
}

.flow-front-feedback[data-type="error"] {
  color: #b91c1c;
}

@media (max-width: 640px) {
  .flow-portal,
  .flow-front-modal,
  .flow-task-modal {
    --flow-font-size-base: 14px;
  }

  .flow-portal h1 {
    font-size: 26px;
  }

  .flow-portal h2,
  .flow-front-modal h2,
  .flow-task-modal h2 {
    font-size: 20px;
  }

  .flow-task-edit-modal__actions {
    flex-direction: column-reverse;
  }

  .flow-task-edit-modal__actions .flow-button {
    width: 100%;
  }
}

/* FLOW CORE — TYPOGRAPHIE PORTAIL V2 END */

/* ==========================================================================
   FLOW CORE — TYPOGRAPHIE PORTAIL V3
   Lisibilité et cohérence globale
   ========================================================================== */

.flow-portal {
  font-size: 15px;
  line-height: 1.55;
}

/* Corps de texte */
.flow-portal p,
.flow-portal li,
.flow-portal td,
.flow-portal th,
.flow-portal label,
.flow-portal input,
.flow-portal select,
.flow-portal textarea,
.flow-portal button,
.flow-front-modal p,
.flow-front-modal label,
.flow-front-modal input,
.flow-front-modal select,
.flow-front-modal textarea,
.flow-front-modal button {
  font-size: 15px;
  line-height: 1.5;
}

/* Titres principaux */
.flow-portal h1 {
  font-size: clamp(
    26px,
    2.2vw,
    32px
  );
  line-height: 1.18;
  font-weight: 700;
}

/* Titres de modules */
.flow-portal h2,
.flow-front-modal h2 {
  font-size: 22px;
  line-height: 1.25;
  font-weight: 700;
}

/* Titres de cartes */
.flow-portal h3,
.flow-task-kanban__header h3,
.flow-workflow-stage__heading strong {
  font-size: 17px;
  line-height: 1.35;
}

/* Textes secondaires lisibles */
.flow-task-card__meta,
.flow-task-card__footer,
.flow-workflow-stage__date,
.flow-workflow-progress__value span,
.flow-module-card p,
.flow-workspace-card p,
.flow-timeline-item p,
.flow-request-card p,
.flow-document-card p {
  font-size: 14px;
  line-height: 1.5;
}

/* Badges / statuts */
.flow-task-card__priority,
.flow-task-card__status,
.flow-workflow-stage__status,
.flow-document-status,
.flow-request-status {
  font-size: 13px;
  line-height: 1.3;
}

/* Labels de formulaire */
.flow-front-field > label,
.flow-front-modal label {
  display: block;
  margin-bottom: 6px;

  font-size: 14px;
  line-height: 1.35;
  font-weight: 600;
}

/* Champs */
.flow-front-field input,
.flow-front-field select,
.flow-front-field textarea,
.flow-front-modal input,
.flow-front-modal select,
.flow-front-modal textarea {
  min-height: 44px;

  font-size: 15px;
  line-height: 1.4;
}

.flow-front-field textarea,
.flow-front-modal textarea {
  min-height: 110px;
}

/* Boutons */
.flow-button,
.flow-portal button,
.flow-front-modal button {
  font-size: 14px;
  line-height: 1.2;
  font-weight: 600;
}

/* Navigation des modules */
.flow-workspace-modules,
.flow-workspace-navigation,
.flow-workspace-cockpit__nav {
  font-size: 15px;
}

/* Eyebrows : petits mais lisibles */
.flow-portal__eyebrow,
.flow-workflow-card__eyebrow,
.flow-workflow-stage__phase {
  font-size: 12px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0.07em;
}

/* Kanban */
.flow-task-card__title {
  font-size: 16px;
  line-height: 1.35;
  font-weight: 650;
}

.flow-task-kanban__count {
  font-size: 13px;
}

/* Timeline */
.flow-timeline-item__title,
.flow-timeline-entry__title {
  font-size: 15px;
  line-height: 1.4;
  font-weight: 650;
}

/* Modal tâche */
.flow-task-edit-modal__dialog {
  font-size: 15px;
}

/* Mobile */
@media (max-width: 767px) {
  .flow-portal {
    font-size: 15px;
  }

  .flow-portal h1 {
    font-size: 26px;
  }

  .flow-portal h2,
  .flow-front-modal h2 {
    font-size: 21px;
  }

  .flow-portal h3,
  .flow-task-kanban__header h3 {
    font-size: 17px;
  }

  .flow-task-card__meta,
  .flow-task-card__footer,
  .flow-workflow-stage__date {
    font-size: 14px;
  }
}

/* FLOW CORE — TYPOGRAPHIE PORTAIL V3 END */

/* ==========================================================================
   FLOW CORE — WORKFLOW PREREQUISITES
   ========================================================================== */

.flow-workflow-stage__requirements {
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid rgba(180, 83, 9, 0.18);
  border-radius: 12px;
  background: rgba(255, 247, 237, 0.72);
}

.flow-workflow-stage__requirements-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.flow-workflow-stage__requirements-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #fff7ed;
  color: #9a3412;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
}

.flow-workflow-stage__requirements-count {
  color: #78716c;
  font-size: 13px;
  font-weight: 600;
}

.flow-workflow-stage__requirements-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.flow-workflow-stage__requirements-list li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0;
  color: #57534e;
  font-size: 14px;
  line-height: 1.45;
}

.flow-workflow-stage__requirements-dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin-top: 7px;
  border-radius: 50%;
  background: #ea580c;
}

.flow-workflow-stage__complete:disabled,
.flow-workflow-stage__complete[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.68;
  filter: saturate(0.65);
  box-shadow: none;
}

.flow-workflow-stage__complete:disabled:hover,
.flow-workflow-stage__complete[aria-disabled="true"]:hover {
  transform: none;
  box-shadow: none;
}

@media (max-width: 700px) {
  .flow-workflow-stage__requirements {
    padding: 12px 13px;
  }

  .flow-workflow-stage__requirements-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  .flow-workflow-stage__requirements-list li {
    font-size: 14px;
  }
}

/* FLOW CORE — WORKFLOW PREREQUISITES END */

/* ==========================================================================
   FLOW CORE — WORKFLOW MANUAL CHECKLIST
   ========================================================================== */

.flow-workflow-checklist {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid rgba(37, 99, 235, 0.14);
  border-radius: 14px;
  background: rgba(248, 250, 252, 0.92);
}

.flow-workflow-checklist__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.flow-workflow-checklist__header > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.flow-workflow-checklist__header strong {
  color: #0f172a;
  font-size: 14px;
  font-weight: 750;
}

.flow-workflow-checklist__header span {
  color: #64748b;
  font-size: 13px;
  line-height: 1.4;
}

.flow-workflow-checklist__progress {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  min-height: 28px;
  padding: 4px 9px;
  border-radius: 999px;
  background: #e2e8f0;
  color: #334155 !important;
  font-weight: 700;
}

.flow-workflow-checklist__items {
  display: grid;
  gap: 8px;
}

.flow-workflow-checklist__item {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 13px;
  border: 1px solid #e2e8f0;
  border-radius: 11px;
  background: #fff;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background-color 0.18s ease,
    transform 0.18s ease;
}

.flow-workflow-checklist__item:hover {
  border-color: #cbd5e1;
  box-shadow: 0 5px 14px rgba(15, 23, 42, 0.06);
  transform: translateY(-1px);
}

.flow-workflow-checklist__item:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.flow-workflow-checklist__item.is-validated {
  border-color: rgba(22, 163, 74, 0.22);
  background: rgba(240, 253, 244, 0.78);
}

.flow-workflow-checklist__item.is-loading {
  cursor: wait;
  opacity: 0.66;
}

.flow-workflow-checklist__checkbox {
  flex: 0 0 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border: 2px solid #94a3b8;
  border-radius: 6px;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
}

.flow-workflow-checklist__item.is-validated
.flow-workflow-checklist__checkbox {
  border-color: #16a34a;
  background: #16a34a;
}

.flow-workflow-checklist__content {
  min-width: 0;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 3px;
}

.flow-workflow-checklist__content strong {
  color: #1e293b;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.4;
}

.flow-workflow-checklist__content small {
  color: #64748b;
  font-size: 12px;
}

.flow-workflow-checklist__item.is-validated
.flow-workflow-checklist__content small {
  color: #15803d;
}

.flow-workflow-checklist__comment {
  margin-top: 3px;
  color: #475569;
  font-size: 12px;
  font-style: italic;
  line-height: 1.4;
}

@media (max-width: 700px) {
  .flow-workflow-checklist {
    padding: 13px;
  }

  .flow-workflow-checklist__header {
    gap: 10px;
  }

  .flow-workflow-checklist__item {
    padding: 11px;
  }
}

/* FLOW CORE — WORKFLOW MANUAL CHECKLIST END */

/* ==========================================================================
   FLOW CORE — WORKSPACE TEMPLATE IDENTITY
   ========================================================================== */

.flow-workspace-card__type {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.flow-workspace-card__template-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: var(
        --flow-workspace-template-color,
        currentColor
    );
    font-weight: 700;
}

.flow-workspace-card__type::before {
    content: "";
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background:
        var(
            --flow-workspace-template-color,
            currentColor
        );
}

/* FLOW CORE — WORKSPACE TEMPLATE IDENTITY END */

/* ==========================================================================
   FLOW CORE — AFFILIATE DASHBOARD V2
   KPI PILOTAGE SERVEUR
   ========================================================================== */

#flow-smart-dashboard .flow-smart-kpi--link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

#flow-smart-dashboard .flow-smart-kpi--link:visited {
  color: inherit;
}

#flow-smart-dashboard .flow-smart-kpi--link:focus-visible {
  outline: 3px solid rgba(81, 71, 245, 0.22);
  outline-offset: 3px;
}

#flow-smart-dashboard
.flow-smart-kpi--link[data-tone="green"]
.flow-smart-kpi__icon {
  background: #e7faf2;
  color: #159a67;
}

#flow-smart-dashboard
.flow-smart-kpi--link[data-tone="red"]
.flow-smart-kpi__icon {
  background: #fff0f0;
  color: #dc3c4f;
}

/* FLOW CORE — AFFILIATE DASHBOARD V2 END */

/* ==========================================================================
   FLOW CORE — AFFILIATE NETWORK FEED
   ========================================================================== */

.flow-network-feed {
  position: relative;
  margin: 28px 0;
  padding: 26px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  border-radius: 22px;
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.98),
      rgba(248, 250, 252, 0.96)
    );
  box-shadow:
    0 18px 42px rgba(15, 23, 42, 0.07);
}

.flow-network-feed::before {
  content: "";
  position: absolute;
  top: -90px;
  right: -75px;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  background: rgba(81, 71, 245, 0.06);
  pointer-events: none;
}

.flow-network-feed__header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 20px;
}

.flow-network-feed__header h2 {
  margin: 5px 0 6px;
}

.flow-network-feed__header p {
  max-width: 700px;
  margin: 0;
  color: #64748b;
}

.flow-network-feed__unread-count {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 5px 12px;
  border-radius: 999px;
  background: #eef2ff;
  color: #4338ca;
  font-size: 13px;
  font-weight: 750;
  white-space: nowrap;
}

.flow-network-feed__list {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 12px;
}

.flow-network-feed-card {
  position: relative;
  display: grid;
  grid-template-columns: 5px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: #fff;
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    opacity 0.18s ease;
}

.flow-network-feed-card:hover {
  transform: translateY(-1px);
  border-color: #cbd5e1;
  box-shadow:
    0 10px 26px rgba(15, 23, 42, 0.07);
}

.flow-network-feed-card.is-read {
  background: rgba(248, 250, 252, 0.78);
}

.flow-network-feed-card.is-loading {
  opacity: 0.68;
  cursor: wait;
}

.flow-network-feed-card__marker {
  display: block;
  background: #64748b;
}

.flow-network-feed-card[data-level="info"]
.flow-network-feed-card__marker {
  background: #2563eb;
}

.flow-network-feed-card[data-level="important"]
.flow-network-feed-card__marker {
  background: #d97706;
}

.flow-network-feed-card[data-level="urgent"]
.flow-network-feed-card__marker {
  background: #dc2626;
}

.flow-network-feed-card__body {
  min-width: 0;
  padding: 18px 20px;
}

.flow-network-feed-card__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 9px;
}

.flow-network-feed-card__level,
.flow-network-feed-card__new {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  line-height: 1.2;
  font-weight: 750;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.flow-network-feed-card__level[data-level="info"] {
  background: #eff6ff;
  color: #1d4ed8;
}

.flow-network-feed-card__level[data-level="important"] {
  background: #fff7ed;
  color: #c2410c;
}

.flow-network-feed-card__level[data-level="urgent"] {
  background: #fef2f2;
  color: #b91c1c;
}

.flow-network-feed-card__new {
  background: #eef2ff;
  color: #4338ca;
}

.flow-network-feed-card__date {
  margin-left: auto;
  color: #94a3b8;
  font-size: 12px;
  white-space: nowrap;
}

.flow-network-feed-card h3 {
  margin: 0 0 7px;
  color: #0f172a;
  font-size: 17px;
  line-height: 1.35;
}

.flow-network-feed-card__content {
  max-width: 880px;
  color: #475569;
  font-size: 14px;
  line-height: 1.6;
}

.flow-network-feed-card__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 11px;
  margin-top: 15px;
}

.flow-network-feed-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 8px 13px;
  font-size: 13px;
}

.flow-network-feed-card__read {
  appearance: none;
  padding: 7px 2px;
  border: 0;
  background: transparent;
  color: #64748b;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
}

.flow-network-feed-card__read:hover {
  color: #334155;
  text-decoration: underline;
}

.flow-network-feed-card__read:focus-visible {
  outline: 2px solid #6366f1;
  outline-offset: 3px;
  border-radius: 4px;
}

.flow-network-feed-card__read:disabled {
  cursor: wait;
  opacity: 0.55;
}

.flow-network-feed-card__read-state {
  display: inline-flex;
  align-items: center;
  color: #15803d;
  font-size: 13px;
  font-weight: 650;
}

@media (max-width: 767px) {
  .flow-network-feed {
    margin: 20px 0;
    padding: 18px 15px;
    border-radius: 17px;
  }

  .flow-network-feed__header {
    flex-direction: column;
    gap: 12px;
  }

  .flow-network-feed__unread-count {
    align-self: flex-start;
  }

  .flow-network-feed-card__body {
    padding: 15px 14px;
  }

  .flow-network-feed-card__meta {
    align-items: flex-start;
  }

  .flow-network-feed-card__date {
    width: 100%;
    margin-left: 0;
  }

  .flow-network-feed-card h3 {
    font-size: 16px;
  }

  .flow-network-feed-card__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .flow-network-feed-card__cta {
    justify-content: center;
    width: 100%;
  }

  .flow-network-feed-card__read {
    align-self: flex-start;
  }
}

/* FLOW CORE — AFFILIATE NETWORK FEED END */

/* ==========================================
   FLOW CORE — NOTIFICATIONS 2.3.13
========================================== */

.flow-notification-filter::after {
  display: inline-flex;
  min-width: 17px;
  height: 17px;
  align-items: center;
  justify-content: center;
  margin-left: 5px;
  padding: 0 4px;
  border-radius: 999px;
  background: #eef0f5;
  color: #7c869a;
  content: attr(data-count);
  font-size: 8px;
  font-weight: 850;
  line-height: 1;
}

.flow-notification-filter.is-active::after {
  background: rgba(81, 71, 245, 0.12);
  color: #5147f5;
}

.flow-notification-item__body {
  display: block;
  min-width: 0;
}

.flow-notification-item__icon[data-tone="purple"] {
  background: #f1edff;
  color: #7048d8;
}

.flow-notification-item__icon[data-tone="neutral"] {
  background: #eff1f6;
  color: #657189;
}

.flow-notification-item[data-category="workflow"] {
  border-left-color: #7048d8;
}

.flow-notification-item[data-category="network"] {
  border-left-color: #5147f5;
}

.flow-task-card.is-notification-target,
.flow-task-kanban-card.is-notification-target,
.flow-request-card.is-notification-target,
.flow-workflow-stage.is-notification-target,
[data-flow-workspace-workflow].is-notification-target,
.flow-document-card.is-notification-target {
  position: relative;
  z-index: 2;
  animation: flow-api-notification-target 2.6s ease;
}

@keyframes flow-api-notification-target {
  0%,
  100% {
    box-shadow: inherit;
  }

  15%,
  72% {
    box-shadow:
      0 0 0 4px rgba(81, 71, 245, 0.22),
      0 18px 50px rgba(56, 45, 171, 0.18);
  }
}

.flow-notification-mark-all:disabled,
.flow-notification-item__read-button:disabled {
  cursor: wait;
  opacity: 0.55;
}

@media (max-width: 760px) {
  .flow-notification-center__drawer {
    width: 100%;
  }

  .flow-notification-center__toolbar {
    gap: 10px;
  }

  .flow-notification-center__filters {
    padding-bottom: 3px;
  }

  .flow-notification-filter {
    min-height: 38px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .flow-task-card.is-notification-target,
  .flow-task-kanban-card.is-notification-target,
  .flow-request-card.is-notification-target,
  .flow-workflow-stage.is-notification-target,
  [data-flow-workspace-workflow].is-notification-target,
  .flow-document-card.is-notification-target {
    animation: none;
    outline: 4px solid rgba(81, 71, 245, 0.22);
    outline-offset: 3px;
  }
}

/* ==========================================
   FLOW CORE — CENTRE DE RESSOURCES RESEAU
========================================== */

.flow-network-resources {
    margin: 28px 0;
    padding: 28px;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 22px;
    background: #fff;
}

.flow-network-resources__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 18px;
}

.flow-network-resources__header h2 {
    margin: 6px 0;
}

.flow-network-resources__header p {
    margin: 0;
}

.flow-network-resources__search {
    width: min(340px, 100%);
    min-height: 44px;
    border-radius: 10px;
}

.flow-network-resources__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.flow-network-resources__filters button {
    padding: 8px 12px;
    border: 1px solid rgba(15, 23, 42, .12);
    border-radius: 999px;
    background: #fff;
    cursor: pointer;
}

.flow-network-resources__filters button.is-active {
    border-color: currentColor;
    font-weight: 700;
}

.flow-network-resources__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.flow-network-resource-card {
    display: flex;
    flex-direction: column;
    min-height: 230px;
    padding: 20px;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .05);
}

.flow-network-resource-card[hidden] {
    display: none !important;
}

.flow-network-resource-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.flow-network-resource-card__featured {
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(15, 23, 42, .06);
}

.flow-network-resource-card h3 {
    margin: 0 0 10px;
}

.flow-network-resource-card p {
    flex: 1;
    margin: 0 0 18px;
}

.flow-network-resource-card .flow-button {
    align-self: flex-start;
}

.flow-network-resources__empty {
    margin: 24px 0 0;
    text-align: center;
}

@media (max-width: 980px) {
    .flow-network-resources__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    .flow-network-resources {
        padding: 20px;
    }

    .flow-network-resources__header {
        align-items: stretch;
        flex-direction: column;
    }

    .flow-network-resources__search {
        width: 100%;
    }

    .flow-network-resources__grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================
   FLOW CORE — PILOTAGE ECONOMIQUE DOSSIERS
========================================== */

.flow-workspace-card__business {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 12px;
}

.flow-workspace-card__affiliate,
.flow-workspace-card__amount,
.flow-workspace-card__revenue-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 26px;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

.flow-workspace-card__affiliate {
    background: rgba(37, 99, 235, .08);
    color: #1d4ed8;
}

.flow-workspace-card__amount {
    background: rgba(15, 23, 42, .06);
    color: #0f172a;
}

.flow-workspace-card__revenue-status {
    background: rgba(148, 163, 184, .14);
    color: #475569;
}

.flow-workspace-card__revenue-status[data-status="signed"] {
    background: rgba(59, 130, 246, .10);
    color: #1d4ed8;
}

.flow-workspace-card__revenue-status[data-status="invoiced"] {
    background: rgba(245, 158, 11, .12);
    color: #92400e;
}

.flow-workspace-card__revenue-status[data-status="collected"] {
    background: rgba(34, 197, 94, .12);
    color: #166534;
}

.flow-dashboard__stats--revenue {
    margin-top: 16px;
}

/* ==========================================
   FLOW CORE — ACOMPTES / RESTE A FACTURER
========================================== */

.flow-workspace-card__deposit,
.flow-workspace-card__remaining {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

.flow-workspace-card__deposit {
    background: rgba(59, 130, 246, .10);
    color: #1d4ed8;
}

.flow-workspace-card__remaining {
    background: rgba(245, 158, 11, .12);
    color: #92400e;
}

/* ==========================================
   FLOW CORE — ENCAISSEMENTS DOSSIERS
========================================== */

.flow-workspace-card__collected,
.flow-workspace-card__remaining-collect {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

.flow-workspace-card__collected {
    background: rgba(34, 197, 94, .12);
    color: #166534;
}

.flow-workspace-card__remaining-collect {
    background: rgba(239, 68, 68, .10);
    color: #991b1b;
}

/* ==========================================
   FLOW CORE — CLIENT PORTAL TRUST + CHAT V2.3
========================================== */

.flow-client-trust-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 22px 0;
}

.flow-client-trust-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 18px;
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.98),
      rgba(248, 250, 252, 0.94)
    );
  box-shadow: 0 10px 32px rgba(15, 23, 42, 0.05);
}

.flow-client-trust-card__icon {
  display: inline-flex;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  background: rgba(22, 101, 52, 0.08);
  font-size: 20px;
}

.flow-client-trust-card div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

.flow-client-trust-card small {
  color: #64748b;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.flow-client-trust-card strong {
  color: #0f172a;
  font-size: 15px;
}

.flow-client-trust-card span:not(.flow-client-trust-card__icon) {
  color: #64748b;
  font-size: 13px;
  line-height: 1.45;
}

.flow-conversation-panel {
  margin: 28px 0;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.09);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 18px 55px rgba(15, 23, 42, 0.07);
}

.flow-conversation-panel__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 24px 26px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.07);
  background:
    linear-gradient(
      135deg,
      rgba(240, 253, 244, 0.8),
      rgba(248, 250, 252, 0.9)
    );
}

.flow-conversation-panel__heading h2 {
  margin: 5px 0 6px;
  color: #0f172a;
}

.flow-conversation-panel__heading p {
  margin: 0;
  color: #64748b;
}

.flow-conversation-contact {
  display: flex;
  min-width: 230px;
  align-items: center;
  gap: 11px;
  padding: 10px 13px;
  border: 1px solid rgba(22, 101, 52, 0.12);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.9);
}

.flow-conversation-contact__avatar {
  display: inline-flex;
  flex: 0 0 39px;
  width: 39px;
  height: 39px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #166534;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
}

.flow-conversation-contact div {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.flow-conversation-contact small {
  color: #64748b;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.flow-conversation-contact strong {
  overflow: hidden;
  color: #0f172a;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flow-conversation-contact span:not(.flow-conversation-contact__avatar) {
  overflow: hidden;
  color: #64748b;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flow-confidentiality-notice {
  display: flex;
  gap: 13px;
  margin: 18px 24px 0;
  padding: 14px 16px;
  border: 1px solid rgba(22, 101, 52, 0.12);
  border-radius: 14px;
  background: rgba(240, 253, 244, 0.72);
}

.flow-confidentiality-notice__icon {
  display: inline-flex;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(22, 101, 52, 0.1);
}

.flow-confidentiality-notice strong {
  display: block;
  margin-bottom: 2px;
  color: #14532d;
  font-size: 13px;
}

.flow-confidentiality-notice p {
  margin: 0;
  color: #4b5563;
  font-size: 12px;
  line-height: 1.5;
}

.flow-conversation-list {
  display: flex;
  max-height: 470px;
  min-height: 190px;
  flex-direction: column;
  gap: 15px;
  overflow-y: auto;
  padding: 24px 26px;
  background: #f8fafc;
}

.flow-conversation-message {
  display: flex;
  max-width: 78%;
  flex-direction: column;
  gap: 5px;
}

.flow-conversation-message.is-current-user {
  align-self: flex-end;
}

.flow-conversation-message__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  padding: 0 4px;
  color: #64748b;
  font-size: 10px;
}

.flow-conversation-message.is-current-user
.flow-conversation-message__meta {
  justify-content: flex-end;
}

.flow-conversation-message__meta strong {
  color: #334155;
  font-size: 11px;
}

.flow-conversation-message__meta span {
  padding: 2px 6px;
  border-radius: 999px;
  background: #e2e8f0;
}

.flow-conversation-message[data-author-type="staff"]
.flow-conversation-message__meta span {
  background: #dcfce7;
  color: #166534;
}

.flow-conversation-message__bubble {
  padding: 12px 15px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 6px 17px 17px 17px;
  background: #fff;
  color: #1e293b;
  font-size: 14px;
  line-height: 1.55;
  box-shadow: 0 5px 18px rgba(15, 23, 42, 0.04);
}

.flow-conversation-message.is-current-user
.flow-conversation-message__bubble {
  border-color: rgba(22, 101, 52, 0.18);
  border-radius: 17px 6px 17px 17px;
  background: #166534;
  color: #fff;
}

.flow-conversation-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  min-height: 140px;
  color: #64748b;
  text-align: left;
}

.flow-conversation-empty > span {
  font-size: 26px;
}

.flow-conversation-empty strong {
  display: block;
  margin-bottom: 3px;
  color: #334155;
}

.flow-conversation-empty p {
  max-width: 390px;
  margin: 0;
  font-size: 13px;
}

.flow-conversation-form {
  padding: 20px 24px 22px;
  border-top: 1px solid rgba(15, 23, 42, 0.07);
  background: #fff;
}

.flow-conversation-form label {
  display: block;
  margin-bottom: 8px;
  color: #334155;
  font-size: 12px;
  font-weight: 750;
}

.flow-conversation-form textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 88px;
  resize: vertical;
  border: 1px solid #dbe2ea;
  border-radius: 14px;
  background: #fbfdff;
  font: inherit;
  line-height: 1.5;
  padding: 13px 14px;
}

.flow-conversation-form textarea:focus {
  border-color: rgba(22, 101, 52, 0.55);
  outline: 0;
  box-shadow: 0 0 0 4px rgba(22, 101, 52, 0.08);
}

.flow-conversation-form__footer {
  display: flex;
  min-height: 40px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 10px;
}

@media (max-width: 760px) {
  .flow-client-trust-panel {
    grid-template-columns: 1fr;
  }

  .flow-conversation-panel__heading {
    align-items: stretch;
    flex-direction: column;
    padding: 20px 18px;
  }

  .flow-conversation-contact {
    min-width: 0;
  }

  .flow-confidentiality-notice {
    margin: 15px 16px 0;
  }

  .flow-conversation-list {
    max-height: 400px;
    padding: 20px 16px;
  }

  .flow-conversation-message {
    max-width: 91%;
  }

  .flow-conversation-form {
    padding: 18px 16px;
  }

  .flow-conversation-form__footer {
    align-items: stretch;
    flex-direction: column;
  }

  .flow-conversation-form__footer .flow-button {
    width: 100%;
  }
}

/* FLOW CORE — CLIENT PORTAL TRUST + CHAT V2.3 END */

/* ==========================================================================
   FLOW CORE — CLIENT PORTAL VISUAL ALIGNMENT V2.4
   Cohérence client final / affilié / branding Qualisécu
   ========================================================================== */

.flow-client-portal {
  --flow-client-green:
    var(--flow-primary, #0a8e37);

  --flow-client-green-soft:
    color-mix(
      in srgb,
      var(--flow-client-green) 9%,
      white
    );

  --flow-client-green-line:
    color-mix(
      in srgb,
      var(--flow-client-green) 18%,
      #e2e8f0
    );
}

/* --------------------------------------------------------------------------
   Navigation / marque
   -------------------------------------------------------------------------- */

.flow-client-portal .flow-portal-nav {
  border-color:
    rgba(226, 232, 240, 0.92);

  background:
    rgba(255, 255, 255, 0.94);
}

.flow-client-portal
.flow-portal-nav__brand {
  min-width: 210px;
}

.flow-client-portal
.flow-core-frontend-brand-name {
  color:
    var(--flow-client-green) !important;
}

/* --------------------------------------------------------------------------
   Hero client
   -------------------------------------------------------------------------- */

.flow-client-portal-hero {
  grid-template-columns:
    76px
    minmax(0, 1fr)
    minmax(270px, 350px);

  min-height: 190px;

  gap: 25px;

  padding:
    30px
    34px;

  border:
    1px solid
    var(--flow-client-green-line);

  background:
    linear-gradient(
      115deg,
      #ffffff 0%,
      #fbfefc 48%,
      var(--flow-client-green-soft) 100%
    );
}

.flow-client-portal-hero::before {
  right: -120px;
  bottom: -180px;

  background:
    radial-gradient(
      ellipse,
      color-mix(
        in srgb,
        var(--flow-client-green) 18%,
        transparent
      ),
      transparent 69%
    );
}

.flow-client-portal-hero::after {
  border-color:
    color-mix(
      in srgb,
      var(--flow-client-green) 13%,
      transparent
    );
}

.flow-client-portal-hero__icon {
  position: relative;
  z-index: 2;

  display: flex;

  width: 68px;
  height: 68px;

  align-items: center;
  justify-content: center;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--flow-client-green) 17%,
      transparent
    );

  border-radius: 20px;

  background:
    linear-gradient(
      145deg,
      #ffffff,
      var(--flow-client-green-soft)
    );

  box-shadow:
    0 15px 32px
    color-mix(
      in srgb,
      var(--flow-client-green) 14%,
      transparent
    );

  color:
    var(--flow-client-green);

  font-size: 29px;
  font-weight: 900;
}

.flow-client-portal
.flow-portal-hero__content h1 {
  margin-bottom: 9px;
}

.flow-client-portal
.flow-portal-hero__content p {
  max-width: 650px;

  font-size: 15px;
  line-height: 1.55;
}

.flow-client-portal-hero__summary {
  position: relative;
  z-index: 2;

  display: flex;
  flex-direction: column;

  align-items: flex-start;

  padding: 20px;

  border:
    1px solid
    rgba(255, 255, 255, 0.9);

  border-radius: 18px;

  background:
    rgba(255, 255, 255, 0.82);

  box-shadow:
    0 14px 35px
    rgba(15, 23, 42, 0.07);

  backdrop-filter:
    blur(12px);
}

.flow-client-portal-hero__summary-label {
  margin-bottom: 6px;

  color:
    #64748b;

  font-size: 11px;
  font-weight: 800;

  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.flow-client-portal-hero__summary > strong {
  color:
    #0f172a;

  font-size: 25px;
  line-height: 1.15;

  letter-spacing: -0.025em;
}

.flow-client-portal-hero__summary > span:not(
  .flow-client-portal-hero__summary-label
) {
  margin-top: 4px;

  color:
    #64748b;

  font-size: 12px;
}

.flow-client-portal-hero__security {
  display: inline-flex;

  align-items: center;

  gap: 7px;

  margin-top: 17px;

  padding: 7px 10px;

  border-radius: 999px;

  background:
    var(--flow-client-green-soft);

  color:
    color-mix(
      in srgb,
      var(--flow-client-green) 82%,
      black
    );

  font-size: 11px;
  font-weight: 750;
}

.flow-client-portal-hero__security > span {
  color:
    var(--flow-client-green);

  font-size: 8px;
}

/* --------------------------------------------------------------------------
   KPI client — même langage que cockpit affilié
   -------------------------------------------------------------------------- */

.flow-client-summary-kpis {
  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  margin:
    0
    0
    28px;
}

.flow-client-summary-kpis
.flow-smart-kpi {
  min-height: 102px;
}

.flow-client-summary-kpis
.flow-smart-kpi__icon {
  background:
    var(--flow-client-green-soft);

  color:
    var(--flow-client-green);
}

.flow-client-summary-kpis
.flow-smart-kpi[data-tone="green"]
.flow-smart-kpi__icon {
  background:
    var(--flow-client-green-soft);

  color:
    var(--flow-client-green);
}

/* --------------------------------------------------------------------------
   Entreprise / portefeuille
   -------------------------------------------------------------------------- */

.flow-client-company-block {
  padding: 30px;

  border-color:
    #e5e9ef;
}

.flow-client-company-block__identity {
  display: flex;

  min-width: 0;

  align-items: center;

  gap: 16px;
}

.flow-client-company-block__icon {
  display: inline-flex;

  flex: 0 0 54px;

  width: 54px;
  height: 54px;

  align-items: center;
  justify-content: center;

  border-radius: 16px;

  background:
    var(--flow-client-green-soft);

  color:
    var(--flow-client-green);

  font-size: 25px;
  font-weight: 850;
}

.flow-client-company-block__identity h2 {
  margin:
    6px
    0
    3px;

  font-size: 26px;
}

.flow-client-company-block__identity p {
  margin: 0;

  color:
    #64748b;

  font-size: 13px;
}

/* --------------------------------------------------------------------------
   Cartes dossiers client
   -------------------------------------------------------------------------- */

.flow-client-portal
.flow-workspace-grid {
  grid-template-columns:
    repeat(
      auto-fit,
      minmax(280px, 1fr)
    );
}

.flow-client-workspace-card {
  min-height: 230px;

  padding: 22px;

  overflow: hidden;

  border-color:
    #e2e8f0;

  background:
    linear-gradient(
      150deg,
      #ffffff,
      #fbfdfc
    );
}

.flow-client-workspace-card::before {
  position: absolute;

  top: 0;
  bottom: 0;
  left: 0;

  width: 4px;

  background:
    var(--flow-client-green);

  content: "";
}

.flow-client-workspace-card__top {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 10px;

  margin-bottom: 19px;
}

.flow-client-workspace-card
.flow-workspace-card__status {
  margin-top: 0;
}

.flow-client-workspace-card h3 {
  margin:
    0
    0
    7px;

  color:
    #0f172a;

  font-size: 19px;
}

.flow-client-workspace-card
> div:first-child
> p {
  color:
    #64748b;

  font-size: 12px;
}

.flow-client-workspace-card__footer {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 15px;

  margin-top: 25px;

  padding-top: 16px;

  border-top:
    1px solid #edf1f4;
}

.flow-client-workspace-card__footer span {
  color:
    #64748b;

  font-size: 11px;
}

.flow-client-workspace-card__footer strong {
  flex: 0 0 auto;

  color:
    var(--flow-client-green);

  font-size: 12px;
}

.flow-client-workspace-card:hover {
  border-color:
    color-mix(
      in srgb,
      var(--flow-client-green) 28%,
      #dbe3ea
    );

  box-shadow:
    0 18px 42px
    rgba(15, 23, 42, 0.08);
}

/* --------------------------------------------------------------------------
   Réassurance bas dashboard
   -------------------------------------------------------------------------- */

.flow-client-home-trust {
  margin-top: 6px;

  margin-bottom: 35px;

  border-top:
    1px solid #e5e9ef;
}

.flow-client-home-trust
.flow-trust-item__icon {
  background:
    var(--flow-client-green-soft);

  color:
    var(--flow-client-green);
}

/* --------------------------------------------------------------------------
   Vue dossier client
   -------------------------------------------------------------------------- */

.flow-client-portal
.flow-client-workspace-intro {
  margin:
    0
    0
    18px;

  padding:
    22px
    24px;

  border:
    1px solid #e5e9ef;

  border-radius:
    18px;

  background:
    linear-gradient(
      145deg,
      #ffffff,
      #fbfdfc
    );
}

.flow-client-portal
.flow-client-workspace-intro h2 {
  margin:
    5px
    0
    6px;
}

.flow-client-portal
.flow-client-workspace-intro p {
  margin: 0;

  color:
    #64748b;
}

/* --------------------------------------------------------------------------
   Harmonisation des accents du portail client
   -------------------------------------------------------------------------- */

.flow-client-portal
.flow-module-card.is-active
.flow-module-card__icon,
.flow-client-portal
.flow-module-card:hover
.flow-module-card__icon {
  color:
    var(--flow-client-green);
}

.flow-client-portal
.flow-module-card.is-active {
  border-color:
    var(--flow-client-green-line);

  background:
    var(--flow-client-green-soft);
}

.flow-client-portal
.flow-module-card.is-active::after {
  background:
    var(--flow-client-green);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
  .flow-client-portal-hero {
    grid-template-columns:
      68px
      minmax(0, 1fr);
  }

  .flow-client-portal-hero__summary {
    grid-column:
      1 / -1;

    display: grid;

    grid-template-columns:
      auto
      1fr
      auto;

    align-items: center;

    gap:
      6px
      16px;
  }

  .flow-client-portal-hero__summary-label {
    grid-column:
      1 / -1;

    margin-bottom: 0;
  }

  .flow-client-portal-hero__security {
    margin-top: 0;
  }
}

@media (max-width: 760px) {
  .flow-client-portal
  .flow-portal-nav__links {
    display: none;
  }

  .flow-client-portal-hero {
    grid-template-columns: 1fr;

    padding:
      24px
      20px;
  }

  .flow-client-portal-hero__icon {
    width: 55px;
    height: 55px;

    border-radius: 16px;

    font-size: 24px;
  }

  .flow-client-portal-hero__summary {
    display: flex;

    flex-direction: column;

    align-items: flex-start;
  }

  .flow-client-summary-kpis {
    grid-template-columns: 1fr;
  }

  .flow-client-company-block {
    padding:
      22px
      18px;
  }

  .flow-client-company-block__identity {
    align-items: flex-start;
  }

  .flow-client-company-block__icon {
    width: 46px;
    height: 46px;

    flex-basis: 46px;
  }

  .flow-client-company-block__identity h2 {
    font-size: 22px;
  }

  .flow-client-workspace-card__footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .flow-client-home-trust {
    padding:
      22px
      6px;
  }
}

/* FLOW CORE — CLIENT PORTAL VISUAL ALIGNMENT V2.4 END */

/* ==========================================================================
   FLOW CORE — CLIENT PORTAL POLISH V2.5
   ========================================================================== */

/* ----------------------------------------------------------
   HEADER
   ---------------------------------------------------------- */

/*
 * Le vrai logo Qualisécu suffit :
 * suppression du pictogramme Flow historique.
 */
.flow-client-portal .flow-portal-nav__logo:not(
  .flow-core-frontend-brand-logo-wrap
) {
  display: none !important;
}

.flow-client-portal .flow-portal-nav__brand {
  gap: 14px;
}

.flow-client-portal .flow-core-frontend-brand-logo-wrap {
  max-width: 150px !important;
}

.flow-client-portal .flow-core-frontend-brand-logo {
  max-width: 145px !important;
  max-height: 40px !important;
}

/* ----------------------------------------------------------
   HERO CLIENT
   ---------------------------------------------------------- */

.flow-client-portal .flow-portal-hero {
  min-height: 185px;
  padding: 30px 34px;
  border: 1px solid rgba(10, 142, 55, 0.16);
  background:
    linear-gradient(
      115deg,
      rgba(255,255,255,0.99) 0%,
      rgba(251,255,252,0.98) 55%,
      rgba(236,248,240,0.98) 100%
    );
}

.flow-client-portal .flow-portal-hero__content h1 {
  margin-bottom: 8px;
}

.flow-client-portal .flow-portal-hero__content p {
  max-width: 700px;
  color: #64748b;
  line-height: 1.55;
}

/* ----------------------------------------------------------
   KPI CLIENT
   ---------------------------------------------------------- */

.flow-client-portal .flow-client-kpis {
  gap: 16px;
}

.flow-client-portal .flow-client-kpi {
  min-height: 112px;
  padding: 20px 22px;
  border: 1px solid rgba(15, 23, 42, 0.075);
  border-radius: 18px;
  background:
    linear-gradient(
      145deg,
      #ffffff,
      #fbfdfc
    );
  box-shadow:
    0 10px 28px rgba(15, 23, 42, 0.055);
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease;
}

.flow-client-portal .flow-client-kpi:hover {
  transform: translateY(-2px);
  border-color: rgba(10, 142, 55, 0.2);
  box-shadow:
    0 16px 34px rgba(15, 23, 42, 0.08);
}

.flow-client-portal .flow-client-kpi__icon {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: 14px;
  background: rgba(10, 142, 55, 0.08);
  color: var(--flow-primary);
}

.flow-client-portal .flow-client-kpi strong {
  font-size: 27px;
  letter-spacing: -0.035em;
}

/* ----------------------------------------------------------
   CARTE ENTREPRISE
   ---------------------------------------------------------- */

.flow-client-portal .flow-organization-block {
  border: 1px solid rgba(15, 23, 42, 0.075);
  background:
    linear-gradient(
      150deg,
      #ffffff 0%,
      #fdfefd 100%
    );
}

/* ----------------------------------------------------------
   CARTE DOSSIER
   ---------------------------------------------------------- */

.flow-client-portal .flow-workspace-card {
  position: relative;
  min-height: 205px;
  padding: 22px 24px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  background:
    linear-gradient(
      145deg,
      #ffffff,
      #fbfdfc
    );
  box-shadow:
    0 7px 22px rgba(15, 23, 42, 0.04);
}

.flow-client-portal .flow-workspace-card::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  background: var(--flow-primary);
  content: "";
}

.flow-client-portal .flow-workspace-card:hover {
  border-color: rgba(10, 142, 55, 0.24);
  box-shadow:
    0 18px 40px rgba(15, 23, 42, 0.09);
}

.flow-client-portal .flow-workspace-card h3 {
  margin-top: 15px;
  font-size: 19px;
  color: #0f172a;
}

.flow-client-portal .flow-workspace-card__type {
  background: rgba(2, 132, 199, 0.08);
  color: #0369a1;
}

.flow-client-portal .flow-workspace-card__status {
  background: rgba(10, 142, 55, 0.09);
  color: #08752f;
}

.flow-client-portal .flow-client-workspace-card__footer {
  margin-top: 26px;
  padding-top: 17px;
  border-top: 1px solid #edf1f4;
}

/* ----------------------------------------------------------
   BANDE DE REASSURANCE
   ---------------------------------------------------------- */

.flow-client-portal .flow-client-trust-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
  margin-top: 26px;
  padding: 0;
  border: 1px solid rgba(15, 23, 42, 0.07);
  border-radius: 18px;
  background: rgba(255,255,255,0.72);
  box-shadow:
    0 10px 28px rgba(15, 23, 42, 0.035);
}

.flow-client-portal .flow-client-trust-strip > * {
  padding: 20px 22px;
}

.flow-client-portal .flow-client-trust-strip > * + * {
  border-left: 1px solid #edf1f4;
}

.flow-client-portal .flow-client-trust-strip strong {
  color: #1e293b;
}

.flow-client-portal .flow-client-trust-strip p,
.flow-client-portal .flow-client-trust-strip span {
  color: #64748b;
}

/* ----------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------- */

@media (max-width: 820px) {
  .flow-client-portal .flow-client-trust-strip {
    grid-template-columns: 1fr;
  }

  .flow-client-portal .flow-client-trust-strip > * + * {
    border-top: 1px solid #edf1f4;
    border-left: 0;
  }
}

@media (max-width: 640px) {
  .flow-client-portal .flow-portal-hero {
    min-height: auto;
    padding: 24px 20px;
  }

  .flow-client-portal .flow-client-kpi {
    min-height: 96px;
  }
}

/* FLOW CORE — CLIENT PORTAL POLISH V2.5 END */

/* ==========================================================================
   QUALISECU — AUTHENTIFICATION PREMIUM V2.6
   ========================================================================== */

body:has(.flow-auth-card) {
  min-height: 100vh;
  background:
    radial-gradient(
      circle at 15% 5%,
      rgba(10, 142, 55, 0.08),
      transparent 30%
    ),
    radial-gradient(
      circle at 90% 10%,
      rgba(39, 136, 245, 0.06),
      transparent 28%
    ),
    #f7f9fb;
}

.flow-auth-card--qualisecu {
  position: relative;
  overflow: hidden;
  width: min(470px, calc(100% - 32px));
  margin: min(14vh, 130px) auto 70px;
  padding: 34px 36px 32px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 24px;
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.99),
      rgba(250, 253, 251, 0.98)
    );
  box-shadow:
    0 25px 70px rgba(15, 23, 42, 0.10);
}

.flow-auth-card--qualisecu::before {
  position: absolute;
  top: -85px;
  right: -80px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      rgba(10, 142, 55, 0.11),
      transparent 68%
    );
  content: "";
  pointer-events: none;
}

.flow-auth-brand {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
}

.flow-auth-brand__logo {
  position: relative;
  display: flex;
  width: 132px;
  height: 45px;
  flex: 0 0 132px;
  align-items: center;
}

.flow-auth-brand__logo::before {
  width: 100%;
  height: 100%;
  background-image:
    var(--flow-auth-logo);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
  content: "";
}

.flow-auth-brand > div:last-child {
  min-width: 0;
}

.flow-auth-brand strong {
  display: block;
  margin-top: 2px;
  color: #0f172a;
  font-size: 14px;
  font-weight: 700;
}

.flow-auth-card--qualisecu .flow-auth-eyebrow {
  display: block;
  margin: 0;
  color: var(--flow-primary);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.flow-auth-card--qualisecu h1 {
  position: relative;
  z-index: 1;
  margin: 0 0 10px;
  color: #0f172a;
  font-size: 34px;
  line-height: 1.15;
  letter-spacing: -0.035em;
}

.flow-auth-card--qualisecu .flow-auth-intro {
  position: relative;
  z-index: 1;
  max-width: 360px;
  margin: 0 0 28px;
  color: #64748b;
  font-size: 14px;
  line-height: 1.55;
}

.flow-auth-card--qualisecu form {
  position: relative;
  z-index: 1;
}

.flow-auth-card--qualisecu form p {
  margin: 0 0 17px;
}

.flow-auth-card--qualisecu label {
  display: block;
  margin-bottom: 7px;
  color: #334155;
  font-size: 13px;
  font-weight: 650;
}

.flow-auth-card--qualisecu input[type="text"],
.flow-auth-card--qualisecu input[type="password"] {
  box-sizing: border-box;
  width: 100%;
  min-height: 48px;
  padding: 10px 13px;
  border: 1px solid #d7dee7;
  border-radius: 11px;
  background: #fff;
  color: #0f172a;
  font-size: 14px;
  transition:
    border-color .18s ease,
    box-shadow .18s ease;
}

.flow-auth-card--qualisecu input[type="text"]:focus,
.flow-auth-card--qualisecu input[type="password"]:focus {
  border-color: var(--flow-primary);
  outline: 0;
  box-shadow:
    0 0 0 4px rgba(10, 142, 55, 0.08);
}

.flow-auth-card--qualisecu .login-remember label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #64748b;
  font-weight: 500;
  cursor: pointer;
}

.flow-auth-card--qualisecu input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
}

.flow-auth-card--qualisecu input[type="submit"] {
  width: 100%;
  min-height: 46px;
  margin-top: 2px;
  border: 0;
  border-radius: 11px;
  background: var(--flow-primary);
  box-shadow:
    0 10px 22px rgba(10, 142, 55, 0.18);
  color: #fff;
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    filter .18s ease;
}

.flow-auth-card--qualisecu input[type="submit"]:hover {
  filter: brightness(.96);
  transform: translateY(-1px);
  box-shadow:
    0 13px 27px rgba(10, 142, 55, 0.23);
}

.flow-auth-card--qualisecu .flow-auth-footer {
  position: relative;
  z-index: 1;
  margin: 20px 0 0;
  padding-top: 19px;
  border-top: 1px solid #edf1f4;
  color: #64748b;
  font-size: 13px;
  text-align: center;
}

.flow-auth-card--qualisecu .flow-auth-footer a {
  color: var(--flow-primary);
  font-weight: 650;
  text-decoration: none;
}

.flow-auth-card--qualisecu .flow-auth-footer a:hover {
  text-decoration: underline;
}

.flow-auth-card--qualisecu::after {
  position: relative;
  z-index: 1;
  display: block;
  margin-top: 22px;
  padding: 13px 15px;
  border: 1px solid rgba(10, 142, 55, 0.10);
  border-radius: 12px;
  background: rgba(240, 253, 244, 0.72);
  color: #4b5563;
  content:
    "🔒 Accès privé réservé aux clients et membres autorisés du réseau Qualisécu.";
  font-size: 11px;
  line-height: 1.45;
  text-align: center;
}

@media (max-width: 540px) {
  .flow-auth-card--qualisecu {
    margin-top: 40px;
    padding: 26px 22px;
    border-radius: 20px;
  }

  .flow-auth-brand {
    align-items: flex-start;
    flex-direction: column;
  }

  .flow-auth-brand__logo {
    width: 115px;
    height: 39px;
    flex-basis: 39px;
  }

  .flow-auth-card--qualisecu h1 {
    font-size: 30px;
  }
}

/* QUALISECU — AUTHENTIFICATION PREMIUM V2.6 END */

/* ==========================================================================
   QUALISECU — LOGIN BRAND ALIGNMENT V2.7
   ========================================================================== */

.flow-auth-card {
  overflow: hidden;
}

.flow-auth-brand,
.flow-auth-card__brand {
  display: flex !important;
  width: 100% !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  margin: 0 auto 24px !important;
  text-align: center !important;
}

.flow-auth-card .flow-core-frontend-brand-block {
  display: flex !important;
  width: 100% !important;
  max-width: none !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  margin: 0 auto !important;
}

.flow-auth-card .flow-core-frontend-brand-logo-wrap {
  display: flex !important;
  width: auto !important;
  max-width: 190px !important;
  height: 48px !important;
  min-height: 48px !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
}

.flow-auth-card .flow-core-frontend-brand-logo {
  width: auto !important;
  max-width: 180px !important;
  max-height: 44px !important;
  object-fit: contain !important;
  object-position: center !important;
}

.flow-auth-card .flow-core-frontend-brand-name {
  display: block !important;
  max-width: none !important;
  margin: 0 !important;
  color: var(--flow-primary) !important;
  font-size: 13px !important;
  font-weight: 750 !important;
  line-height: 1.3 !important;
  text-align: left !important;
  white-space: normal !important;
}

.flow-auth-card__brand-copy,
.flow-auth-brand__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

@media (max-width: 600px) {
  .flow-auth-card .flow-core-frontend-brand-block {
    flex-direction: column !important;
    gap: 7px !important;
  }

  .flow-auth-card .flow-core-frontend-brand-logo-wrap {
    max-width: 160px !important;
    height: 42px !important;
    min-height: 42px !important;
  }

  .flow-auth-card .flow-core-frontend-brand-logo {
    max-width: 155px !important;
    max-height: 38px !important;
  }

  .flow-auth-card .flow-core-frontend-brand-name {
    text-align: center !important;
  }
}

/* QUALISECU — LOGIN BRAND ALIGNMENT V2.7 END */

/* ==========================================================================
   QUALISECU — LOGIN HEADER FIX V2.8
   ========================================================================== */

/*
 * Sur la connexion, le logo Qualisécu contient déjà
 * toute l'identité de marque.
 *
 * On supprime donc "ERP Qualisécu" injecté à côté.
 */
.flow-auth-card .flow-core-frontend-brand-name {
  display: none !important;
}

/*
 * Zone branding strictement centrée.
 */
.flow-auth-card .flow-core-frontend-brand-block {
  display: flex !important;
  width: 100% !important;
  max-width: 100% !important;

  align-items: center !important;
  justify-content: center !important;

  gap: 0 !important;

  margin: 0 auto 26px !important;
  padding: 0 !important;

  text-align: center !important;
}

/*
 * Suppression des contraintes héritées du header portail.
 */
.flow-auth-card .flow-core-frontend-brand-logo-wrap {
  display: flex !important;

  width: 100% !important;
  max-width: 100% !important;

  height: auto !important;
  min-height: 0 !important;

  align-items: center !important;
  justify-content: center !important;

  margin: 0 auto !important;
  padding: 0 !important;

  overflow: visible !important;
}

/*
 * Logo plus confortable et parfaitement centré.
 */
.flow-auth-card .flow-core-frontend-brand-logo {
  display: block !important;

  width: auto !important;
  max-width: min(250px, 82%) !important;

  height: auto !important;
  max-height: 64px !important;

  margin: 0 auto !important;

  object-fit: contain !important;
  object-position: center center !important;
}

/*
 * Sécurité : aucun autre enfant textuel du branding
 * ne doit venir pousser le logo sur la droite.
 */
.flow-auth-card
.flow-core-frontend-brand-block
> :not(.flow-core-frontend-brand-logo-wrap) {
  display: none !important;
}

@media (max-width: 600px) {
  .flow-auth-card .flow-core-frontend-brand-logo {
    max-width: min(220px, 88%) !important;
    max-height: 58px !important;
  }
}

/* QUALISECU — LOGIN HEADER FIX V2.8 END */

/* ==========================================================================
   QUALISECU — PILOTAGE AGENCE FRONT V1
   ========================================================================== */

.flow-agency-pilotage {
  margin: 28px 0;
  padding: 28px;
  border: 1px solid #e2e8f0;
  border-radius: 22px;
  background:
    linear-gradient(
      145deg,
      #ffffff 0%,
      #fbfdfc 100%
    );
  box-shadow:
    0 15px 38px rgba(15, 23, 42, 0.055);
}

.flow-agency-pilotage__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}

.flow-agency-pilotage__header h2 {
  margin: 5px 0 5px;
}

.flow-agency-pilotage__header p {
  margin: 0;
  color: #64748b;
}

.flow-agency-pilotage__date {
  flex: 0 0 auto;
  color: #64748b;
  font-size: 12px;
}

.flow-agency-pilotage__kpis {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}

.flow-agency-pilotage-kpi {
  min-height: 94px;
  padding: 17px 18px;
  border: 1px solid #e5e9ef;
  border-radius: 16px;
  background: #fff;
}

.flow-agency-pilotage-kpi span {
  display: block;
  margin-bottom: 8px;
  color: #64748b;
  font-size: 11px;
  font-weight: 650;
}

.flow-agency-pilotage-kpi strong {
  display: block;
  color: #0f172a;
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: -0.025em;
}

/* --------------------------------------------------------------------------
   TABLEAU PERFORMANCE
   -------------------------------------------------------------------------- */

.flow-performance-panel {
  padding: 22px;
  border: 1px solid #e5e9ef;
  border-radius: 18px;
  background: #fff;
}

.flow-performance-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 17px;
}

.flow-performance-panel__header h3 {
  margin: 4px 0 0;
}

.flow-performance-panel__actions {
  display: flex;
  gap: 8px;
}

.flow-performance-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.flow-performance-table {
  width: 100%;
  border-collapse: collapse;
}

.flow-performance-table th {
  padding: 10px 12px;
  border-bottom: 1px solid #dfe5eb;
  color: #64748b;
  font-size: 11px;
  font-weight: 750;
  text-align: left;
  white-space: nowrap;
}

.flow-performance-table td {
  padding: 12px;
  border-bottom: 1px solid #edf1f4;
  color: #334155;
  font-size: 13px;
  vertical-align: middle;
}

.flow-performance-table tbody tr:last-child td {
  border-bottom: 0;
}

.flow-performance-table td strong {
  display: block;
  color: #0f172a;
}

.flow-performance-table td small {
  display: block;
  margin-top: 2px;
  color: #94a3b8;
  font-size: 10px;
}

.flow-performance-copy-feedback {
  min-height: 18px;
  margin-top: 10px;
  font-size: 12px;
  text-align: right;
}

.flow-performance-copy-feedback[data-type="success"] {
  color: #08752f;
}

.flow-performance-copy-feedback[data-type="error"] {
  color: #b91c1c;
}

/* --------------------------------------------------------------------------
   MODALE PERFORMANCE PLEIN ECRAN
   -------------------------------------------------------------------------- */

body.flow-performance-modal-open {
  overflow: hidden !important;
}

.flow-performance-modal {
  position: fixed;
  z-index: 999999;
  inset: 0;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
}

.flow-performance-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.62);
  backdrop-filter: blur(5px);
}

.flow-performance-modal__dialog {
  position: relative;
  z-index: 1;
  display: flex;
  width: calc(100% - 48px);
  height: calc(100% - 48px);
  max-width: 1600px;
  margin: 24px auto;
  flex-direction: column;
  overflow: hidden;
  border-radius: 22px;
  background: #fff;
  box-shadow:
    0 30px 90px rgba(15, 23, 42, 0.28);
}

.flow-performance-modal__header {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 24px;
  border-bottom: 1px solid #e5e9ef;
}

.flow-performance-modal__header h2 {
  margin: 4px 0 0;
}

.flow-performance-modal__actions {
  display: flex;
  align-items: center;
  gap: 9px;
}

.flow-performance-modal__close {
  display: inline-flex;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid #dfe5eb;
  border-radius: 12px;
  background: #fff;
  color: #334155;
  font-size: 27px;
  cursor: pointer;
}

.flow-performance-modal__body {
  flex: 1 1 auto;
  padding: 24px;
  overflow: auto;
}

.flow-performance-table--fullscreen th,
.flow-performance-table--fullscreen td {
  padding: 14px 16px;
  font-size: 14px;
}

.flow-performance-modal
.flow-performance-copy-feedback {
  flex: 0 0 auto;
  min-height: 38px;
  margin: 0;
  padding: 9px 24px;
  border-top: 1px solid #edf1f4;
}

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
  .flow-agency-pilotage__kpis {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .flow-agency-pilotage {
    padding: 20px;
  }

  .flow-agency-pilotage__header,
  .flow-performance-panel__header {
    align-items: stretch;
    flex-direction: column;
  }

  .flow-agency-pilotage__kpis {
    grid-template-columns: 1fr;
  }

  .flow-performance-panel__actions {
    width: 100%;
  }

  .flow-performance-panel__actions .flow-button {
    flex: 1;
  }

  .flow-performance-modal__dialog {
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: 0;
  }

  .flow-performance-modal__header {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* QUALISECU — PILOTAGE AGENCE FRONT V1 END */

/* ==========================================================================
   QUALISECU — VALIDATION DOCUMENTAIRE CLIENT V1
   ========================================================================== */

.flow-button--client-action {
  border-color: #ddd6fe;
  background: #f5f3ff;
  color: #6d28d9;
}

.flow-button--client-action:hover {
  border-color: #8b5cf6;
  background: #ede9fe;
  color: #5b21b6;
}

.flow-document-action-checkbox {
  display: flex !important;
  min-height: 44px;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #f8fafc;
  cursor: pointer;
}

.flow-document-action-checkbox input {
  width: 17px;
  min-height: auto;
  height: 17px;
  margin: 2px 0 0;
  flex: 0 0 17px;
}

.flow-document-action-checkbox span {
  color: #475569;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
}

.flow-request-card__badge--action {
  background: #f5f3ff;
  color: #6d28d9;
}

.flow-request-action-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 16px;
  padding: 16px;
  border: 1px solid #ddd6fe;
  border-radius: 14px;
  background: #faf5ff;
}

.flow-request-action-box strong {
  display: block;
  margin-bottom: 5px;
  color: #4c1d95;
  font-size: 12px;
  font-weight: 800;
}

.flow-request-action-box p {
  margin: 0;
  color: #6b21a8;
  font-size: 13px;
  line-height: 1.5;
}

.flow-request-action-box__links {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
}

.flow-request-action-box__links .flow-button {
  white-space: nowrap;
}

@media (max-width: 720px) {
  .flow-request-action-box {
    align-items: stretch;
    flex-direction: column;
  }

  .flow-request-action-box__links {
    display: grid;
    grid-template-columns: 1fr;
  }

  .flow-request-action-box__links .flow-button {
    width: 100%;
  }
}


/* ==========================================================================
   QUALISECU — FICHE DOSSIER AGENCE V2
   ========================================================================== */

/*
 * Le module Documents affiché directement après l'en-tête
 * devient le premier bloc fonctionnel.
 */

.flow-portal > .flow-workspace-panel {
  margin-top: 18px;
  margin-bottom: 18px;
}

.flow-portal > .flow-workspace-panel .flow-module-content {
  padding: 10px;
}


/* ==========================================================================
   DOCUMENTS — ACTIONS COMPACTES
   ========================================================================== */

.flow-document-card {
  align-items: flex-start;
}

.flow-document-card__main {
  flex: 1 1 360px;
}

.flow-document-card__actions {
  position: relative;
  display: flex;
  flex: 0 1 auto;
  max-width: 390px;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}

.flow-document-action-menu {
  position: relative;
}

.flow-document-action-menu > summary {
  display: inline-flex;
  list-style: none;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  user-select: none;
}

.flow-document-action-menu > summary::-webkit-details-marker {
  display: none;
}

.flow-document-action-menu__dropdown {
  position: absolute;
  z-index: 80;
  top: calc(100% + 8px);
  right: 0;
  display: grid;
  width: 245px;
  gap: 5px;
  padding: 8px;
  border: 1px solid #e2e8f0;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.18);
}

.flow-document-action-menu__item {
  box-sizing: border-box;
  width: 100%;
  min-height: 38px !important;
  justify-content: flex-start !important;
  text-align: left;
  white-space: normal;
}

.flow-document-action-menu__dropdown .flow-button {
  width: 100%;
}

@media (max-width: 800px) {
  .flow-document-card__actions {
    display: flex;
    width: 100%;
    max-width: none;
    justify-content: flex-start;
  }

  .flow-document-card__actions > .flow-button,
  .flow-document-card__actions > a.flow-button {
    width: auto;
  }

  .flow-document-action-menu__dropdown {
    right: auto;
    left: 0;
  }
}

@media (max-width: 520px) {
  .flow-document-card__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .flow-document-card__actions > .flow-button,
  .flow-document-card__actions > a.flow-button,
  .flow-document-action-menu {
    width: 100%;
  }

  .flow-document-action-menu > summary {
    box-sizing: border-box;
    width: 100%;
    justify-content: center;
  }

  .flow-document-action-menu__dropdown {
    right: 0;
    left: auto;
    width: min(280px, calc(100vw - 50px));
  }
}


/* ==========================================================================
   HISTORIQUE COMPACT
   ========================================================================== */

.flow-workspace-history-launcher {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 18px 21px;
  border: 1px solid #e7eaf3;
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 7px 22px rgba(42, 49, 90, 0.035);
}

.flow-workspace-history-launcher h3 {
  margin: 3px 0 4px;
  color: #111936;
  font-size: 17px;
}

.flow-workspace-history-launcher p {
  margin: 0;
  color: #7e899f;
  font-size: 11px;
}

.flow-workspace-history-launcher .flow-button {
  flex: 0 0 auto;
}

.flow-workspace-history-modal__dialog {
  width: min(1000px, 100%);
  max-height: calc(100vh - 50px);
}

.flow-workspace-history-modal__content {
  min-height: 180px;
  max-height: 65vh;
  overflow-y: auto;
  padding-right: 5px;
}

.flow-workspace-history-list {
  display: grid;
  gap: 9px;
}

.flow-workspace-history-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  padding: 13px;
  border: 1px solid #e8ebf2;
  border-radius: 13px;
  background: #fbfcfe;
}

.flow-workspace-history-row__icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 12px;
  background: #eef2ff;
  font-size: 16px;
}

.flow-workspace-history-row[data-tone="success"]
.flow-workspace-history-row__icon {
  background: #e5f9ef;
  color: #149064;
}

.flow-workspace-history-row[data-tone="danger"]
.flow-workspace-history-row__icon {
  background: #fff0f2;
  color: #cf3f52;
}

.flow-workspace-history-row[data-tone="warning"]
.flow-workspace-history-row__icon {
  background: #fff5e7;
  color: #c67a16;
}

.flow-workspace-history-row__heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.flow-workspace-history-row__heading small,
.flow-workspace-history-row__heading strong {
  display: block;
}

.flow-workspace-history-row__heading small {
  margin-bottom: 3px;
  color: #7f8aa0;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}

.flow-workspace-history-row__heading strong {
  color: #202941;
  font-size: 13px;
}

.flow-workspace-history-row__heading time {
  flex: 0 0 auto;
  color: #9aa3b5;
  font-size: 9px;
}

.flow-workspace-history-row p {
  margin: 6px 0 0;
  color: #68748b;
  font-size: 11px;
}

.flow-workspace-history-row__actor {
  display: block;
  margin-top: 7px;
  color: #8d97aa;
  font-size: 9px;
}

@media (max-width: 640px) {
  .flow-workspace-history-launcher {
    align-items: stretch;
    flex-direction: column;
  }

  .flow-workspace-history-launcher .flow-button {
    width: 100%;
  }

  .flow-workspace-history-row__heading {
    flex-direction: column;
    gap: 4px;
  }
}

/* ==========================================================================
   QUALISECU — DOCUMENT ACTION MENU V3
   FIX STACKING CONTEXT / DROPDOWN MASQUE
   ========================================================================== */

.flow-document-card {
  position: relative;
  z-index: 1;
  overflow: visible !important;
}

.flow-document-card:has(.flow-document-action-menu[open]) {
  z-index: 500;
}

.flow-document-card__actions {
  overflow: visible !important;
}

.flow-document-action-menu {
  z-index: 501;
}

.flow-document-action-menu[open] {
  z-index: 502;
}

.flow-document-action-menu__dropdown {
  z-index: 503 !important;
}

/*
 * Les conteneurs parents du module Documents ne doivent
 * pas couper le dropdown du menu Actions.
 */
.flow-workspace-panel,
.flow-module-content,
[data-flow-module="documents"],
.flow-document-list,
.flow-documents-list {
  overflow: visible !important;
}

/* QUALISECU — DOCUMENT ACTION MENU V3 END */

.flow-document-card.is-flow-action-menu-open {
  z-index: 600 !important;
}


/* ==========================================================================
   QUALISECU — DOCUMENT ACTION MENU STACKING FIX V4
   ========================================================================== */

/*
 * IMPORTANT :
 * le dropdown était bien en z-index élevé mais restait enfermé
 * dans le stacking context du bloc Documents.
 *
 * Lorsque le menu est ouvert, on remonte donc toute la chaîne.
 */

.flow-document-actions-layer-active {
  position: relative !important;
  z-index: 100000 !important;
  overflow: visible !important;
}

.flow-document-card--actions-open {
  position: relative !important;
  z-index: 100001 !important;
  overflow: visible !important;
}

.flow-document-card--actions-open
.flow-document-card__actions {
  position: relative !important;
  z-index: 100002 !important;
  overflow: visible !important;
}

.flow-document-card--actions-open
.flow-document-action-menu {
  position: relative !important;
  z-index: 100003 !important;
}

.flow-document-card--actions-open
.flow-document-action-menu__dropdown {
  position: absolute !important;
  z-index: 100004 !important;

  top: calc(100% + 8px) !important;
  right: 0 !important;

  overflow: visible !important;

  background: #ffffff !important;

  box-shadow:
    0 24px 65px rgba(15, 23, 42, 0.25) !important;
}

/*
 * Le cockpit ne doit jamais passer devant
 * un menu documentaire ouvert.
 */
.flow-workspace-cockpit {
  position: relative;
  z-index: 1;
}

/*
 * Sécurité supplémentaire pour le premier module
 * Documents placé avant le cockpit.
 */
.flow-portal
[data-flow-module="documents"] {
  overflow: visible !important;
}

.flow-portal
[data-flow-module="documents"]
.flow-module-content {
  overflow: visible !important;
}

.flow-portal
[data-flow-module="documents"]
.flow-document-card {
  overflow: visible !important;
}

/*
 * Support natif moderne :
 * même si le JS met un cycle à synchroniser la classe,
 * :has() remonte immédiatement le module.
 */
.flow-portal
[data-flow-module="documents"]:has(
  .flow-document-action-menu[open]
) {
  position: relative !important;
  z-index: 100000 !important;
  overflow: visible !important;
}

.flow-document-card:has(
  .flow-document-action-menu[open]
) {
  position: relative !important;
  z-index: 100001 !important;
  overflow: visible !important;
}

/* QUALISECU — DOCUMENT ACTION MENU STACKING FIX V4 END */

/* ==========================================================================
   QUALISECU — CLIENT ACTION PRIORITY V3
   Actions requises prioritaires + conversation en dernier
   ========================================================================== */

.flow-client-action-alert[hidden] {
  display: none !important;
}

.flow-client-action-alert {
  position: relative;
  z-index: 20;
  margin: 18px 0;
  border: 1px solid rgba(217, 119, 6, 0.24);
  border-radius: 18px;
  background:
    linear-gradient(
      135deg,
      #fffdf5 0%,
      #fff8e6 100%
    );
  box-shadow:
    0 12px 32px rgba(146, 64, 14, 0.09);
}

.flow-client-action-alert__button {
  display: grid;
  width: 100%;
  grid-template-columns:
    auto
    minmax(0, 1fr)
    auto
    auto;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.flow-client-action-alert__bell {
  position: relative;
  display: inline-flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: #fff;
  box-shadow:
    0 5px 16px rgba(146, 64, 14, 0.10);
  font-size: 21px;
}

.flow-client-action-alert__content {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

.flow-client-action-alert__content strong {
  color: #78350f;
  font-size: 14px;
  font-weight: 800;
}

.flow-client-action-alert__content span {
  color: #92400e;
  font-size: 12px;
  line-height: 1.45;
}

.flow-client-action-alert__count {
  display: inline-flex;
  min-width: 31px;
  height: 31px;
  align-items: center;
  justify-content: center;
  padding: 0 9px;
  border-radius: 999px;
  background: #dc2626;
  box-shadow:
    0 5px 15px rgba(220, 38, 38, 0.20);
  color: #fff;
  font-size: 12px;
  font-weight: 850;
}

.flow-client-action-alert__arrow {
  color: #92400e;
  font-size: 18px;
  font-weight: 800;
}

.flow-client-action-alert__button:hover {
  background:
    rgba(255, 255, 255, 0.35);
}

.flow-client-required-actions {
  scroll-margin-top: 24px;
}

.flow-client-required-actions
.flow-workspace-panel {
  border-color:
    rgba(217, 119, 6, 0.18);
}

.flow-client-required-actions.is-client-action-target {
  animation:
    flow-client-action-target
    2.1s
    ease;
}

@keyframes flow-client-action-target {
  0%,
  100% {
    transform: translateY(0);
    filter: none;
  }

  20% {
    transform: translateY(-2px);
    filter:
      drop-shadow(
        0 0 12px
        rgba(245, 158, 11, 0.26)
      );
  }
}

/*
 * Le chat doit rester visuellement en fin de parcours.
 */
.flow-client-portal
.flow-conversation-panel {
  margin-top: 34px;
  margin-bottom: 10px;
}

/*
 * Pas de marge artificielle après le dernier bloc.
 */
.flow-client-portal
.flow-conversation-panel:last-child {
  margin-bottom: 0;
}

@media (max-width: 640px) {
  .flow-client-action-alert__button {
    grid-template-columns:
      auto
      minmax(0, 1fr)
      auto;
    gap: 10px;
    padding: 14px;
  }

  .flow-client-action-alert__arrow {
    display: none;
  }

  .flow-client-action-alert__bell {
    width: 39px;
    height: 39px;
    border-radius: 12px;
    font-size: 18px;
  }

  .flow-client-action-alert__content strong {
    font-size: 13px;
  }

  .flow-client-action-alert__content span {
    font-size: 11px;
  }
}

/* QUALISECU — CLIENT ACTION PRIORITY V3 END */








/* ==========================================================================
   QUALISECU — CLIENT PORTAL ACCESS UI V1
   ========================================================================== */

.flow-client-portal-access__status {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
}

.flow-client-portal-access__status[data-status="active"] {
  background: rgba(10, 142, 55, 0.1);
  color: #08752f;
}

.flow-client-portal-access__status[data-status="inactive"] {
  background: rgba(245, 158, 11, 0.1);
  color: #92400e;
}

.flow-client-portal-access__status[data-status="error"] {
  background: rgba(220, 38, 38, 0.08);
  color: #b91c1c;
}

.flow-client-portal-access__body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.flow-client-portal-access__identity {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 13px;
}

.flow-client-portal-access__icon {
  display: inline-flex;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(10, 142, 55, 0.08);
  color: var(--flow-primary);
  font-size: 19px;
  font-weight: 900;
}

.flow-client-portal-access__identity strong,
.flow-client-portal-access__identity p {
  display: block;
  overflow-wrap: anywhere;
}

.flow-client-portal-access__identity strong {
  color: #1e293b;
  font-size: 14px;
}

.flow-client-portal-access__identity p {
  margin: 4px 0 0;
  color: #64748b;
  font-size: 12px;
  line-height: 1.45;
}

.flow-client-portal-access
.flow-front-feedback:not(:empty) {
  margin-top: 14px;
}

@media (max-width: 640px) {
  .flow-client-portal-access__body {
    align-items: stretch;
    flex-direction: column;
  }

  .flow-client-portal-access__body
  .flow-button {
    width: 100%;
  }
}

/* QUALISECU — CLIENT PORTAL ACCESS UI V1 END */


/* ======================================================
   QUALISECU — HEADER GLOBAL RESPONSIVE V3
   Un seul comportement pour tous les espaces frontend.
====================================================== */

/*
 * Sécurité structurelle globale.
 */
.flow-portal {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.flow-portal,
.flow-portal main,
.flow-portal section,
.flow-portal article,
.flow-portal header,
.flow-portal footer {
    min-width: 0;
}

.flow-portal h1,
.flow-portal h2,
.flow-portal h3,
.flow-portal p,
.flow-portal a,
.flow-portal button {
    overflow-wrap: anywhere;
}


/* ======================================================
   HEADER — DESKTOP
====================================================== */

.flow-portal .flow-portal-nav {
    position: sticky;
    top: 12px;
    z-index: 1000;

    width: 100%;
    max-width: 100%;
    min-width: 0;

    display: grid;
    grid-template-columns:
        minmax(180px, auto)
        minmax(0, 1fr)
        auto;
    align-items: center;
    gap: 16px;

    overflow: visible;
}

.flow-portal .flow-portal-nav__brand {
    min-width: 0;
    max-width: 100%;

    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;

    text-decoration: none;
}

.flow-portal .flow-portal-nav__logo {
    flex: 0 0 auto;
}

.flow-portal .flow-portal-nav__title {
    min-width: 0;
    white-space: nowrap;
}

.flow-portal .flow-portal-nav__links {
    min-width: 0;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.flow-portal .flow-portal-nav__logout {
    justify-self: end;
    white-space: nowrap;
}

.flow-portal .flow-portal-nav__mobile-toggle {
    display: none;
}


/* ======================================================
   TABLETTE + MOBILE
====================================================== */

@media (max-width: 1120px) {

    /*
     * Le header devient strictement :
     *
     * [ LOGO -------------------- ] [ ☰ ]
     *
     * Puis le menu s'ouvre dans le flux.
     * Aucun positionnement flottant.
     */
    .flow-portal .flow-portal-nav {
        top: 8px;

        width: calc(100% - 16px);
        max-width: calc(100% - 16px);
        min-width: 0;

        margin: 8px;

        padding: 8px 10px;

        grid-template-columns:
            minmax(0, 1fr)
            44px;

        grid-template-areas:
            "brand toggle"
            "links links"
            "logout logout";

        gap: 0 8px;

        align-items: center;

        overflow: visible;
    }

    .flow-portal .flow-portal-nav__brand {
        grid-area: brand;

        width: auto;
        min-width: 0;
        max-width: 100%;

        justify-self: start;

        overflow: hidden;
    }

    /*
     * Sur tous les espaces mobiles :
     * logo uniquement.
     */
    .flow-portal .flow-portal-nav__title {
        display: none !important;
    }

    /*
     * Le logo reste toujours visible.
     * On ne masque surtout plus les span.
     */
    .flow-portal .flow-portal-nav__logo {
        display: block !important;

        flex: 0 0 auto;

        max-width: min(156px, calc(100vw - 92px));
        max-height: 46px;

        overflow: hidden;
    }

    /*
     * Hamburger garanti dans sa propre colonne.
     */
    .flow-portal .flow-portal-nav__mobile-toggle {
        grid-area: toggle;

        position: relative;
        inset: auto;

        z-index: 2;

        justify-self: end;

        display: inline-flex !important;
        align-items: center;
        justify-content: center;

        width: 44px;
        min-width: 44px;
        max-width: 44px;

        height: 44px;
        min-height: 44px;

        margin: 0;
        padding: 0;

        flex: 0 0 44px;

        cursor: pointer;
    }

    /*
     * Menu fermé.
     */
    .flow-portal .flow-portal-nav__links {
        grid-area: links;

        position: static;
        inset: auto;

        width: 100%;
        max-width: 100%;
        min-width: 0;

        margin: 0;
        padding: 0;

        display: none;

        background: transparent;
        border: 0;
        box-shadow: none;
    }

    .flow-portal .flow-portal-nav__logout {
        grid-area: logout;

        position: static;

        width: 100%;
        max-width: 100%;

        margin: 0;

        display: none;

        justify-content: center;
    }

    /*
     * Menu ouvert :
     * tout reste dans le flux du header.
     */
    .flow-portal
    .flow-portal-nav.is-open
    .flow-portal-nav__links {
        display: grid;

        grid-template-columns: 1fr;

        gap: 5px;

        margin-top: 10px;
        padding-top: 10px;

        border-top: 1px solid
            rgba(15, 23, 42, 0.08);
    }

    .flow-portal
    .flow-portal-nav.is-open
    .flow-portal-nav__logout {
        display: inline-flex;

        margin-top: 8px;
    }

    .flow-portal .flow-portal-nav__link {
        width: 100%;
        min-width: 0;

        justify-content: flex-start;

        text-align: left;
    }

    /*
     * Le raccourci clavier desktop n'a aucun intérêt
     * sur tactile.
     */
    .flow-portal .flow-portal-nav__search kbd {
        display: none;
    }
}


/* ======================================================
   MOBILE
====================================================== */

@media (max-width: 760px) {

    /*
     * Aucun header ne peut sortir du viewport.
     */
    .flow-portal {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        overflow-x: clip;
    }

    .flow-portal .flow-portal-nav {
        top: 6px;

        width: calc(100% - 12px);
        max-width: calc(100% - 12px);

        margin: 6px;

        padding: 7px 8px;

        grid-template-columns:
            minmax(0, 1fr)
            42px;

        gap: 0 6px;
    }

    .flow-portal .flow-portal-nav__logo {
        max-width: min(144px, calc(100vw - 82px));
        max-height: 42px;
    }

    .flow-portal .flow-portal-nav__mobile-toggle {
        width: 42px;
        min-width: 42px;
        max-width: 42px;

        height: 42px;
        min-height: 42px;

        flex-basis: 42px;
    }

    .flow-portal
    .flow-portal-nav.is-open
    .flow-portal-nav__links {
        margin-top: 8px;
        padding-top: 8px;
    }
}


/* ======================================================
   PETITS MOBILES
====================================================== */

@media (max-width: 390px) {

    .flow-portal .flow-portal-nav {
        width: calc(100% - 8px);
        max-width: calc(100% - 8px);

        margin: 4px;

        padding: 6px 7px;

        grid-template-columns:
            minmax(0, 1fr)
            40px;

        gap: 0 5px;
    }

    .flow-portal .flow-portal-nav__logo {
        max-width: min(132px, calc(100vw - 74px));
        max-height: 38px;
    }

    .flow-portal .flow-portal-nav__mobile-toggle {
        width: 40px;
        min-width: 40px;
        max-width: 40px;

        height: 40px;
        min-height: 40px;

        flex-basis: 40px;
    }
}

/* QUALISECU — HEADER GLOBAL RESPONSIVE V3 END */


/* ======================================================
   QUALISECU — RESPONSIVE GLOBAL V3.1
   Vrai branding / header universel / mobile propre
====================================================== */


/* ------------------------------------------------------
   1. SECURITE LARGEUR FRONTEND
------------------------------------------------------ */

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

.flow-portal {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: clip;
}

.flow-portal *,
.flow-portal *::before,
.flow-portal *::after {
    box-sizing: border-box;
}


/* ------------------------------------------------------
   2. LE LOGO SUFFIT : PLUS DE "ERP QUALISECU"
------------------------------------------------------ */

.flow-portal .flow-portal-nav__title,
.flow-portal .flow-portal-nav__brand > strong {
    display: none !important;
}


/* ------------------------------------------------------
   3. VRAI LOGO INJECTE PAR LE BRANDING
------------------------------------------------------ */

.flow-portal
.flow-portal-nav
.flow-core-frontend-brand-logo-wrap {
    width: auto !important;
    max-width: 150px !important;
    min-width: 0 !important;

    height: 44px !important;
    min-height: 0 !important;
    max-height: 44px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    flex: 0 1 150px !important;

    overflow: hidden !important;
}

.flow-portal
.flow-portal-nav
.flow-core-frontend-brand-logo {
    display: block !important;

    width: auto !important;
    max-width: 145px !important;

    height: auto !important;
    max-height: 40px !important;

    margin: 0 !important;

    object-fit: contain !important;
    object-position: left center !important;
}


/*
 * Le branding textuel injecté en plus du logo
 * n'a pas sa place dans le header.
 */
.flow-portal
.flow-portal-nav
.flow-core-frontend-brand-name {
    display: none !important;
}


/* ------------------------------------------------------
   4. HEADER DESKTOP NORMALISE
------------------------------------------------------ */

.flow-portal .flow-portal-nav {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.flow-portal .flow-portal-nav__brand {
    width: auto;
    max-width: 180px;
    min-width: 0;

    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: flex-start;

    flex: 0 1 auto;
}


/* ------------------------------------------------------
   5. TABLETTE / MOBILE
------------------------------------------------------ */

@media (max-width: 1120px) {

    .flow-portal .flow-portal-nav {
        width: calc(100% - 16px) !important;
        max-width: calc(100% - 16px) !important;
        min-width: 0 !important;

        margin: 8px !important;

        padding: 8px 10px !important;

        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            44px !important;

        grid-template-areas:
            "brand toggle"
            "links links"
            "logout logout" !important;

        column-gap: 10px !important;
        row-gap: 0 !important;

        align-items: center !important;

        overflow: visible !important;
    }


    /* Brand = colonne gauche stricte */
    .flow-portal .flow-portal-nav__brand {
        grid-area: brand !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;

        overflow: hidden !important;

        justify-self: stretch !important;
    }


    /* Vrai logo */
    .flow-portal
    .flow-portal-nav
    .flow-core-frontend-brand-logo-wrap {
        width: auto !important;
        max-width: 132px !important;

        height: 40px !important;
        max-height: 40px !important;

        flex: 0 1 132px !important;
    }

    .flow-portal
    .flow-portal-nav
    .flow-core-frontend-brand-logo {
        max-width: 128px !important;
        max-height: 37px !important;
    }


    /* Ancien symbole placeholder : aucun impact */
    .flow-portal .flow-portal-nav__logo {
        min-width: 0 !important;
        max-width: 132px !important;

        flex: 0 1 auto !important;
    }


    /* Hamburger toujours dans sa case */
    .flow-portal .flow-portal-nav__mobile-toggle {
        grid-area: toggle !important;

        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        transform: none !important;

        display: inline-flex !important;

        align-items: center !important;
        justify-content: center !important;

        justify-self: end !important;

        width: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;

        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;

        margin: 0 !important;
        padding: 0 !important;

        z-index: 10 !important;

        flex: 0 0 44px !important;

        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }


    /*
     * Menu : aucune position absolue.
     * Il agrandit simplement le header.
     */
    .flow-portal .flow-portal-nav__links {
        grid-area: links !important;

        position: static !important;
        inset: auto !important;
        transform: none !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        display: none !important;

        box-shadow: none !important;
    }

    .flow-portal
    .flow-portal-nav.is-open
    .flow-portal-nav__links {
        display: grid !important;

        grid-template-columns: 1fr !important;

        gap: 5px !important;

        margin-top: 10px !important;
        padding-top: 10px !important;

        border-top:
            1px solid rgba(15, 23, 42, 0.08) !important;
    }


    .flow-portal .flow-portal-nav__logout {
        grid-area: logout !important;

        position: static !important;

        width: 100% !important;
        max-width: 100% !important;

        display: none !important;
    }

    .flow-portal
    .flow-portal-nav.is-open
    .flow-portal-nav__logout {
        display: inline-flex !important;

        margin-top: 8px !important;
    }
}


/* ------------------------------------------------------
   6. MOBILE IPHONE / ANDROID
------------------------------------------------------ */

@media (max-width: 760px) {

    .flow-portal .flow-portal-nav {
        width: calc(100% - 12px) !important;
        max-width: calc(100% - 12px) !important;

        margin: 6px !important;

        padding: 7px 8px !important;

        grid-template-columns:
            minmax(0, 1fr)
            42px !important;

        column-gap: 8px !important;
    }


    .flow-portal
    .flow-portal-nav
    .flow-core-frontend-brand-logo-wrap {
        max-width: 120px !important;

        height: 38px !important;
        max-height: 38px !important;

        flex-basis: 120px !important;
    }

    .flow-portal
    .flow-portal-nav
    .flow-core-frontend-brand-logo {
        max-width: 116px !important;
        max-height: 35px !important;
    }


    .flow-portal .flow-portal-nav__mobile-toggle {
        width: 42px !important;
        min-width: 42px !important;
        max-width: 42px !important;

        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;

        flex-basis: 42px !important;
    }


    /*
     * Client final :
     * les 3 KPI deviennent des lignes compactes.
     * Plus aucun "DOS..." ou "ESP...".
     */
    .flow-client-portal .flow-client-kpis {
        display: grid !important;

        grid-template-columns: 1fr !important;

        gap: 8px !important;

        width: 100% !important;
        max-width: 100% !important;

        margin-top: 12px !important;
    }

    .flow-client-portal .flow-client-kpi {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        min-height: 68px !important;

        padding: 10px 12px !important;

        display: grid !important;

        grid-template-columns:
            42px
            minmax(0, 1fr)
            auto !important;

        align-items: center !important;

        gap: 10px !important;

        text-align: left !important;
    }

    .flow-client-portal .flow-client-kpi__icon {
        width: 42px !important;
        height: 42px !important;

        margin: 0 !important;
    }


    /*
     * On retire toutes les ellipses imposées
     * précédemment aux KPI.
     */
    .flow-client-portal .flow-client-kpi strong,
    .flow-client-portal .flow-client-kpi span,
    .flow-client-portal .flow-client-kpi small,
    .flow-client-portal .flow-client-kpi p {
        min-width: 0 !important;
        max-width: none !important;

        overflow: visible !important;

        white-space: normal !important;
        text-overflow: clip !important;
    }

    .flow-client-portal .flow-client-kpi strong {
        font-size: 20px !important;
        line-height: 1.05 !important;
    }

    .flow-client-portal .flow-client-kpi small,
    .flow-client-portal .flow-client-kpi p,
    .flow-client-portal .flow-client-kpi span {
        font-size: 11px !important;
        line-height: 1.25 !important;
    }


    /*
     * Hero et cartes toujours contenus.
     */
    .flow-client-portal .flow-portal-hero,
    .flow-client-portal .flow-organization-block,
    .flow-client-portal .flow-workspace-card,
    .flow-client-portal .flow-client-trust-strip {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
}


/* ------------------------------------------------------
   7. TRES PETITS TELEPHONES
------------------------------------------------------ */

@media (max-width: 390px) {

    .flow-portal .flow-portal-nav {
        width: calc(100% - 8px) !important;
        max-width: calc(100% - 8px) !important;

        margin: 4px !important;

        padding: 6px 7px !important;

        grid-template-columns:
            minmax(0, 1fr)
            40px !important;

        column-gap: 6px !important;
    }

    .flow-portal
    .flow-portal-nav
    .flow-core-frontend-brand-logo-wrap {
        max-width: 110px !important;
        flex-basis: 110px !important;
    }

    .flow-portal
    .flow-portal-nav
    .flow-core-frontend-brand-logo {
        max-width: 106px !important;
    }

    .flow-portal .flow-portal-nav__mobile-toggle {
        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;

        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;
    }
}

/* QUALISECU — RESPONSIVE GLOBAL V3.1 END */


/* ======================================================
   QUALISECU — ADMIN FRONT APP V1
   Cockpit réseau / launcher / navigation mobile
====================================================== */

.flow-portal--platform-admin {
    --flow-admin-app-bottom-safe:
        env(safe-area-inset-bottom, 0px);
}

.flow-admin-app-launcher {
    margin: 22px 0 28px;
    padding: 24px;

    border:
        1px solid rgba(15, 23, 42, 0.08);
    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.98),
            rgba(246, 250, 248, 0.96)
        );

    box-shadow:
        0 18px 50px
        rgba(15, 23, 42, 0.06);
}

.flow-admin-app-launcher__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 18px;
}

.flow-admin-app__eyebrow {
    display: block;

    margin-bottom: 4px;

    color: var(--flow-primary);

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.flow-admin-app-launcher__head h2 {
    margin: 0;

    font-size: clamp(
        22px,
        2vw,
        30px
    );

    line-height: 1.08;
}

.flow-admin-app-launcher__head p {
    max-width: 680px;

    margin:
        7px
        0
        0;

    color: #64748b;

    font-size: 14px;
    line-height: 1.55;
}

.flow-admin-app-launcher__grid {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 12px;
}

.flow-admin-app-tile {
    appearance: none;

    width: 100%;
    min-width: 0;

    padding: 16px;

    display: grid;

    grid-template-columns:
        46px
        minmax(0, 1fr)
        20px;

    gap: 12px;

    align-items: center;

    border:
        1px solid
        rgba(15, 23, 42, 0.08);
    border-radius: 18px;

    background: #fff;

    color: #0f172a;

    text-align: left;

    cursor: pointer;

    box-shadow:
        0 8px 24px
        rgba(15, 23, 42, 0.04);

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        border-color 0.18s ease;
}

.flow-admin-app-tile:hover {
    transform:
        translateY(-2px);

    border-color:
        rgba(34, 197, 94, 0.25);

    box-shadow:
        0 14px 32px
        rgba(15, 23, 42, 0.08);
}

.flow-admin-app-tile__icon {
    width: 46px;
    height: 46px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 14px;

    background:
        rgba(34, 197, 94, 0.10);

    color: var(--flow-primary);

    font-size: 20px;
    font-weight: 800;
}

.flow-admin-app-tile__body {
    min-width: 0;

    display: block;
}

.flow-admin-app-tile__body strong,
.flow-admin-app-tile__body small {
    display: block;
}

.flow-admin-app-tile__body strong {
    margin-bottom: 4px;

    color: #0f172a;

    font-size: 15px;
    font-weight: 800;
}

.flow-admin-app-tile__body small {
    color: #64748b;

    font-size: 12px;
    line-height: 1.4;
}

.flow-admin-app-tile__arrow {
    color: #94a3b8;

    font-size: 17px;
}


/* ------------------------------------------------------
   Bottom navigation application
------------------------------------------------------ */

.flow-admin-bottom-nav {
    display: none;
}

.flow-admin-more-sheet {
    display: none;
}


/* ------------------------------------------------------
   Tablette
------------------------------------------------------ */

@media (max-width: 980px) {

    .flow-admin-app-launcher__grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }
}


/* ------------------------------------------------------
   Mobile application
------------------------------------------------------ */

@media (max-width: 760px) {

    body:has(
        [data-flow-platform-admin]
    ) {
        padding-bottom:
            calc(
                78px
                + env(
                    safe-area-inset-bottom,
                    0px
                )
            );
    }

    .flow-portal--platform-admin {
        padding-bottom:
            calc(
                74px
                + env(
                    safe-area-inset-bottom,
                    0px
                )
            );
    }

    .flow-admin-app-launcher {
        margin:
            14px
            0
            18px;

        padding: 14px;

        border-radius: 20px;
    }

    .flow-admin-app-launcher__head {
        margin-bottom: 12px;
    }

    .flow-admin-app-launcher__head h2 {
        font-size: 21px;
    }

    .flow-admin-app-launcher__head p {
        font-size: 12px;
    }

    .flow-admin-app-launcher__grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap: 8px;
    }

    .flow-admin-app-tile {
        min-height: 116px;

        padding: 12px;

        display: flex;
        flex-direction: column;
        align-items: flex-start;

        gap: 8px;

        border-radius: 16px;
    }

    .flow-admin-app-tile__icon {
        width: 38px;
        height: 38px;

        border-radius: 12px;

        font-size: 17px;
    }

    .flow-admin-app-tile__body strong {
        font-size: 14px;
    }

    .flow-admin-app-tile__body small {
        display: -webkit-box;

        overflow: hidden;

        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;

        font-size: 10.5px;
        line-height: 1.3;
    }

    .flow-admin-app-tile__arrow {
        display: none;
    }


    /*
     * Navigation basse type application.
     */
    .flow-admin-bottom-nav {
        position: fixed;

        right: 6px;
        bottom:
            calc(
                6px
                + env(
                    safe-area-inset-bottom,
                    0px
                )
            );
        left: 6px;

        z-index: 10050;

        height: 62px;

        padding: 5px 6px;

        display: grid;

        grid-template-columns:
            repeat(
                5,
                minmax(0, 1fr)
            );

        gap: 2px;

        border:
            1px solid
            rgba(15, 23, 42, 0.08);

        border-radius: 20px;

        background:
            rgba(255, 255, 255, 0.94);

        box-shadow:
            0 16px 45px
            rgba(15, 23, 42, 0.17);

        -webkit-backdrop-filter:
            blur(18px);

        backdrop-filter:
            blur(18px);
    }

    .flow-admin-bottom-nav button {
        appearance: none;

        min-width: 0;

        padding: 4px 2px;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        gap: 2px;

        border: 0;
        border-radius: 14px;

        background: transparent;

        color: #64748b;

        cursor: pointer;
    }

    .flow-admin-bottom-nav button > span {
        font-size: 19px;
        line-height: 1;
    }

    .flow-admin-bottom-nav button small {
        max-width: 100%;

        overflow: hidden;

        font-size: 9px;
        font-weight: 700;

        line-height: 1;

        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .flow-admin-bottom-nav
    button.is-active {
        background:
            rgba(34, 197, 94, 0.10);

        color: var(--flow-primary);
    }


    /*
     * Panneau "Plus".
     */
    .flow-admin-more-sheet {
        position: fixed;

        inset: 0;

        z-index: 10100;

        display: block;

        pointer-events: none;
    }

    .flow-admin-more-sheet[hidden] {
        display: none;
    }

    .flow-admin-more-sheet.is-open {
        pointer-events: auto;
    }

    .flow-admin-more-sheet__backdrop {
        appearance: none;

        position: absolute;

        inset: 0;

        width: 100%;
        height: 100%;

        border: 0;

        background:
            rgba(15, 23, 42, 0.36);

        opacity: 0;

        transition:
            opacity 0.22s ease;
    }

    .flow-admin-more-sheet__panel {
        position: absolute;

        right: 6px;

        bottom:
            calc(
                74px
                + env(
                    safe-area-inset-bottom,
                    0px
                )
            );

        left: 6px;

        padding: 14px;

        border-radius: 22px;

        background: #fff;

        box-shadow:
            0 20px 55px
            rgba(15, 23, 42, 0.22);

        transform:
            translateY(18px);

        opacity: 0;

        transition:
            transform 0.22s ease,
            opacity 0.22s ease;
    }

    .flow-admin-more-sheet.is-open
    .flow-admin-more-sheet__backdrop {
        opacity: 1;
    }

    .flow-admin-more-sheet.is-open
    .flow-admin-more-sheet__panel {
        transform:
            translateY(0);

        opacity: 1;
    }

    .flow-admin-more-sheet__panel header {
        margin-bottom: 10px;

        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .flow-admin-more-sheet__panel
    header strong {
        font-size: 17px;
    }

    .flow-admin-more-sheet__panel
    header button {
        width: 38px;
        height: 38px;

        border: 0;
        border-radius: 50%;

        background: #f1f5f9;

        font-size: 22px;

        cursor: pointer;
    }

    .flow-admin-more-sheet__panel
    > div {
        display: grid;

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap: 8px;
    }

    .flow-admin-more-sheet__panel
    > div
    > button {
        appearance: none;

        min-height: 72px;

        padding: 12px;

        display: flex;
        align-items: center;

        gap: 10px;

        border:
            1px solid #e2e8f0;

        border-radius: 15px;

        background: #fff;

        color: #0f172a;

        font-size: 12px;
        font-weight: 750;

        text-align: left;

        cursor: pointer;
    }

    .flow-admin-more-sheet__panel
    > div
    > button
    > span {
        width: 34px;
        height: 34px;

        display: inline-flex;
        align-items: center;
        justify-content: center;

        flex: 0 0 34px;

        border-radius: 11px;

        background:
            rgba(34, 197, 94, 0.10);

        color: var(--flow-primary);

        font-size: 16px;
    }

    html.flow-admin-sheet-open {
        overflow: hidden;
    }


    /*
     * Dashboard plateforme :
     * lecture verticale propre.
     */
    .flow-portal--platform-admin
    .flow-smart-kpis {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            ) !important;

        gap: 8px !important;
    }

    .flow-portal--platform-admin
    .flow-smart-kpi {
        min-width: 0 !important;

        padding: 12px !important;
    }

    .flow-portal--platform-admin
    .flow-smart-dashboard__grid,
    .flow-portal--platform-admin
    .flow-dashboard-document-overview {
        grid-template-columns:
            1fr !important;
    }

    .flow-portal--platform-admin
    .flow-workspace-grid {
        grid-template-columns:
            1fr !important;
    }
}


/* ------------------------------------------------------
   Très petits écrans
------------------------------------------------------ */

@media (max-width: 390px) {

    .flow-admin-app-launcher__grid {
        grid-template-columns:
            1fr;
    }

    .flow-admin-app-tile {
        min-height: 76px;

        display: grid;

        grid-template-columns:
            38px
            minmax(0, 1fr);

        align-items: center;
    }

    .flow-admin-app-tile__body small {
        -webkit-line-clamp: 1;
    }
}

/* QUALISECU — ADMIN FRONT APP V1 END */


/* ======================================================
   QUALISECU — ADMIN FRONT VIEWS V2
====================================================== */

.flow-admin-front-views {
    margin: 22px 0 32px;

    padding: 24px;

    border:
        1px solid
        rgba(15, 23, 42, 0.08);

    border-radius: 24px;

    background: #f8fafc;

    box-shadow:
        0 18px 50px
        rgba(15, 23, 42, 0.06);
}

.flow-admin-front-views[hidden] {
    display: none !important;
}

.flow-admin-front-views__header {
    margin-bottom: 18px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
}

.flow-admin-front-views__header h1 {
    margin: 0;

    color: #0f172a;

    font-size:
        clamp(
            26px,
            4vw,
            40px
        );

    line-height: 1.05;
}

.flow-admin-front-views__header p {
    margin: 7px 0 0;

    color: #64748b;

    font-size: 14px;
}

.flow-admin-front-views__close {
    appearance: none;

    padding: 10px 14px;

    border:
        1px solid #e2e8f0;

    border-radius: 12px;

    background: #fff;

    color: #334155;

    font-size: 12px;
    font-weight: 750;

    cursor: pointer;
}

.flow-admin-front-toolbar {
    margin-bottom: 18px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;
}

.flow-admin-front-search {
    width: min(520px, 100%);

    padding: 0 14px;

    display: flex;
    align-items: center;

    gap: 9px;

    border:
        1px solid #dbe3ec;

    border-radius: 14px;

    background: #fff;
}

.flow-admin-front-search input {
    width: 100%;
    min-width: 0;

    height: 46px;

    border: 0 !important;
    outline: 0 !important;

    background: transparent !important;

    box-shadow: none !important;

    font: inherit;
}

.flow-admin-front-toolbar__count {
    flex: 0 0 auto;

    color: #64748b;

    font-size: 12px;
    font-weight: 700;
}

.flow-admin-front-grid {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 12px;
}

.flow-admin-front-card {
    min-width: 0;

    padding: 16px;

    display: flex;
    flex-direction: column;

    border:
        1px solid #e2e8f0;

    border-radius: 18px;

    background: #fff;

    box-shadow:
        0 7px 22px
        rgba(15, 23, 42, 0.04);
}

.flow-admin-front-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    margin-bottom: 14px;
}

.flow-admin-front-card__icon {
    width: 42px;
    height: 42px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 42px;

    border-radius: 13px;

    background:
        rgba(34, 197, 94, 0.10);

    color: var(--flow-primary);

    font-size: 18px;
    font-weight: 800;
}

.flow-admin-front-card__status {
    max-width: 55%;

    padding: 5px 8px;

    overflow: hidden;

    border-radius: 999px;

    background: #f1f5f9;

    color: #475569;

    font-size: 9px;
    font-weight: 800;

    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.flow-admin-front-card__content {
    min-width: 0;

    flex: 1 1 auto;
}

.flow-admin-front-card__content small {
    color: var(--flow-primary);

    font-size: 9px;
    font-weight: 850;

    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.flow-admin-front-card__content h3 {
    margin: 5px 0 10px;

    color: #0f172a;

    font-size: 17px;
    line-height: 1.2;

    overflow-wrap: anywhere;
}

.flow-admin-front-card__content p {
    margin: 4px 0;

    color: #64748b;

    font-size: 11px;
    line-height: 1.4;

    overflow-wrap: anywhere;
}

.flow-admin-front-card__cta {
    appearance: none;

    margin-top: 15px;

    padding: 10px 0 2px;

    display: inline-flex;

    border: 0;

    background: transparent;

    color: var(--flow-primary);

    font-size: 12px;
    font-weight: 800;

    text-align: left;
    text-decoration: none;

    cursor: pointer;
}

.flow-admin-front-list {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 10px;
}

.flow-admin-front-list-item {
    min-width: 0;

    padding: 14px;

    display: grid;

    grid-template-columns:
        42px
        minmax(0, 1fr);

    gap: 12px;

    align-items: center;

    border:
        1px solid #e2e8f0;

    border-radius: 16px;

    background: #fff;
}

.flow-admin-front-list-item div {
    min-width: 0;
}

.flow-admin-front-list-item small,
.flow-admin-front-list-item strong {
    display: block;
}

.flow-admin-front-list-item small {
    margin-bottom: 3px;

    color: #64748b;

    font-size: 10px;
}

.flow-admin-front-list-item strong {
    color: #0f172a;

    font-size: 13px;
    line-height: 1.35;

    overflow-wrap: anywhere;
}

.flow-admin-front-loading,
.flow-admin-front-error,
.flow-admin-front-empty {
    min-height: 180px;

    padding: 28px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 7px;

    border:
        1px dashed #cbd5e1;

    border-radius: 18px;

    background: #fff;

    color: #64748b;

    text-align: center;
}

.flow-admin-front-empty > span {
    font-size: 28px;
}

.flow-admin-front-empty strong,
.flow-admin-front-error strong {
    color: #0f172a;
}

.flow-admin-front-empty p,
.flow-admin-front-error p {
    margin: 0;

    font-size: 12px;
}


/* TABLETTE */

@media (max-width: 1050px) {

    .flow-admin-front-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }
}


/* MOBILE */

@media (max-width: 760px) {

    .flow-admin-front-views {
        width: 100%;

        margin:
            10px
            0
            84px;

        padding: 12px;

        border-radius: 18px;
    }

    .flow-admin-front-views__header {
        margin-bottom: 12px;

        display: block;
    }

    .flow-admin-front-views__header h1 {
        font-size: 24px;
    }

    .flow-admin-front-views__header p {
        font-size: 11px;
    }

    .flow-admin-front-views__close {
        width: 100%;

        margin-top: 12px;
    }

    .flow-admin-front-toolbar {
        display: block;
    }

    .flow-admin-front-search {
        width: 100%;
    }

    .flow-admin-front-toolbar__count {
        margin-top: 7px;

        text-align: right;
    }

    .flow-admin-front-grid,
    .flow-admin-front-list {
        grid-template-columns: 1fr;
    }

    .flow-admin-front-card {
        padding: 13px;

        border-radius: 16px;
    }

    .flow-admin-front-card__content h3 {
        font-size: 15px;
    }

    .flow-admin-front-card__cta {
        min-height: 42px;

        align-items: center;
    }
}

/* QUALISECU — ADMIN FRONT VIEWS V2 END */


/* ==========================================================================
   QUALISECU — ADMIN NETWORK + WATCH V3
   ========================================================================== */

.flow-admin-network-app {
  width: 100%;
  min-width: 0;

  margin: 20px 0 90px;
}

.flow-admin-network-app[hidden] {
  display: none !important;
}

.flow-admin-network-app__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 20px;

  margin-bottom: 18px;
}

.flow-admin-network-app__header h1 {
  margin: 3px 0 6px;

  color: #0f172a;

  font-size:
    clamp(
      26px,
      4vw,
      38px
    );
}

.flow-admin-network-app__header p {
  max-width: 680px;

  margin: 0;

  color: #64748b;
}

.flow-admin-network-app__header button {
  min-height: 42px;

  padding: 0 14px;

  border:
    1px solid #e2e8f0;

  border-radius: 12px;

  background: #fff;

  color: #334155;

  font-weight: 750;

  cursor: pointer;
}

.flow-admin-network-tabs {
  display: flex;

  gap: 8px;

  margin-bottom: 16px;

  overflow-x: auto;

  scrollbar-width: none;
}

.flow-admin-network-tabs::-webkit-scrollbar {
  display: none;
}

.flow-admin-network-tabs button {
  flex: 0 0 auto;

  min-height: 42px;

  padding: 0 15px;

  border:
    1px solid #e2e8f0;

  border-radius: 999px;

  background: #fff;

  color: #475569;

  font-weight: 750;

  cursor: pointer;
}

.flow-admin-network-tabs button.is-active {
  border-color:
    var(
      --flow-primary,
      #1d6257
    );

  background:
    var(
      --flow-primary,
      #1d6257
    );

  color: #fff;
}

.flow-admin-network-list,
.flow-admin-watch-list {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 12px;
}

.flow-admin-network-card,
.flow-admin-watch-card {
  min-width: 0;

  padding: 17px;

  border:
    1px solid #e2e8f0;

  border-radius: 18px;

  background: #fff;

  box-shadow:
    0 8px 24px
    rgba(15, 23, 42, 0.045);
}

.flow-admin-network-card__meta,
.flow-admin-watch-card__meta {
  display: flex;
  align-items: center;

  gap: 7px;

  margin-bottom: 9px;

  color: #64748b;

  font-size: 10px;

  text-transform: uppercase;
}

.flow-admin-network-card__meta time,
.flow-admin-watch-card__meta time {
  margin-left: auto;

  white-space: nowrap;
}

.flow-admin-network-card h3,
.flow-admin-watch-card h3 {
  margin: 0 0 8px;

  color: #0f172a;

  font-size: 16px;
  line-height: 1.25;

  overflow-wrap: anywhere;
}

.flow-admin-network-card p,
.flow-admin-watch-card p {
  margin: 0 0 13px;

  color: #64748b;

  font-size: 12px;
  line-height: 1.55;

  white-space: pre-line;

  overflow-wrap: anywhere;
}

.flow-admin-network-card a,
.flow-admin-watch-card a {
  color:
    var(
      --flow-primary,
      #1d6257
    );

  font-size: 12px;
  font-weight: 800;

  text-decoration: none;
}

.flow-admin-watch-card__actions {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 10px;
}

.flow-admin-watch-card__actions button {
  min-height: 38px;

  padding: 0 12px;

  border: 0;

  border-radius: 11px;

  background:
    var(
      --flow-primary,
      #1d6257
    );

  color: #fff;

  font-size: 11px;
  font-weight: 800;

  cursor: pointer;
}

.flow-admin-watch-card__actions button:disabled {
  opacity: .55;
  cursor: wait;
}

.flow-admin-watch-card__sent {
  color: #15803d;

  font-size: 11px;
  font-weight: 800;
}

.flow-admin-network-loading,
.flow-admin-network-empty,
.flow-admin-network-error {
  padding: 35px 18px;

  border:
    1px dashed #cbd5e1;

  border-radius: 18px;

  background: #fff;

  color: #64748b;

  text-align: center;
}

@media (max-width: 760px) {

  .flow-admin-network-app {
    width: 100%;
    max-width: 100%;

    margin-top: 10px;
  }

  .flow-admin-network-app__header {
    display: block;
  }

  .flow-admin-network-app__header h1 {
    font-size: 24px;
  }

  .flow-admin-network-app__header p {
    font-size: 12px;
    line-height: 1.5;
  }

  .flow-admin-network-app__header button {
    width: 100%;

    margin-top: 12px;
  }

  .flow-admin-network-list,
  .flow-admin-watch-list {
    grid-template-columns: 1fr;
  }

  .flow-admin-network-card,
  .flow-admin-watch-card {
    padding: 13px;

    border-radius: 15px;
  }

  .flow-admin-watch-card__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .flow-admin-watch-card__actions button {
    width: 100%;
  }

  .flow-admin-watch-card__sent {
    padding: 9px 0;
  }
}

/* QUALISECU — ADMIN NETWORK + WATCH V3 END */


/* ==========================================================================
   QUALISECU — ADMIN FRONT UX V4
   COMPACT LISTS + ORGANIZATION DETAIL
   ========================================================================== */

.flow-admin-compact-list {
    display: grid;
    gap: 7px;
}

.flow-admin-compact-row {
    appearance: none;

    width: 100%;
    min-width: 0;

    padding: 10px 12px;

    display: grid;

    grid-template-columns:
        36px
        minmax(0, 1fr)
        auto
        20px;

    gap: 10px;

    align-items: center;

    border:
        1px solid
        rgba(15, 23, 42, 0.08);

    border-radius: 13px;

    background: #fff;

    color: inherit;

    font: inherit;

    text-align: left;

    cursor: pointer;

    transition:
        border-color .16s ease,
        box-shadow .16s ease,
        transform .16s ease;
}

.flow-admin-compact-row:hover {
    border-color:
        rgba(
            29,
            98,
            87,
            .26
        );

    box-shadow:
        0 6px 18px
        rgba(
            15,
            23,
            42,
            .055
        );

    transform:
        translateY(-1px);
}

.flow-admin-compact-row__icon {
    width: 36px;
    height: 36px;

    display: grid;

    place-items: center;

    border-radius: 11px;

    background:
        rgba(
            29,
            98,
            87,
            .09
        );

    color:
        var(
            --flow-primary,
            #1d6257
        );

    font-size: 15px;
    font-weight: 800;
}

.flow-admin-compact-row__main {
    min-width: 0;
}

.flow-admin-compact-row__main strong {
    display: block;

    overflow: hidden;

    color: #0f172a;

    font-size: 13px;
    font-weight: 800;

    line-height: 1.25;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.flow-admin-compact-row__meta {
    display: block;

    margin-top: 3px;

    overflow: hidden;

    color: #64748b;

    font-size: 10px;
    line-height: 1.3;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.flow-admin-compact-row__status {
    max-width: 100px;

    padding: 5px 8px;

    overflow: hidden;

    border-radius: 999px;

    background: #f1f5f9;

    color: #475569;

    font-size: 9px;
    font-weight: 800;

    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.flow-admin-compact-row__status[data-status="active"] {
    background:
        rgba(
            22,
            163,
            74,
            .09
        );

    color: #15803d;
}

.flow-admin-compact-row__arrow {
    color: #94a3b8;

    font-size: 21px;
    line-height: 1;
}


/* ORGANISATION DETAIL */

.flow-admin-organization-detail {
    display: grid;

    gap: 16px;
}

.flow-admin-organization-detail__back {
    appearance: none;

    width: fit-content;

    padding: 8px 11px;

    border:
        1px solid #e2e8f0;

    border-radius: 10px;

    background: #fff;

    color: #475569;

    font-size: 11px;
    font-weight: 750;

    cursor: pointer;
}

.flow-admin-organization-hero {
    padding: 18px;

    display: grid;

    grid-template-columns:
        52px
        minmax(0, 1fr)
        auto;

    gap: 14px;

    align-items: center;

    border:
        1px solid
        rgba(15, 23, 42, .08);

    border-radius: 19px;

    background: #fff;
}

.flow-admin-organization-hero__icon {
    width: 52px;
    height: 52px;

    display: grid;

    place-items: center;

    border-radius: 15px;

    background:
        rgba(
            29,
            98,
            87,
            .1
        );

    color:
        var(
            --flow-primary,
            #1d6257
        );

    font-size: 23px;
    font-weight: 800;
}

.flow-admin-organization-hero__identity {
    min-width: 0;
}

.flow-admin-organization-hero__identity > span {
    color:
        var(
            --flow-primary,
            #1d6257
        );

    font-size: 9px;
    font-weight: 850;

    letter-spacing: .07em;
    text-transform: uppercase;
}

.flow-admin-organization-hero__identity h2 {
    margin: 3px 0;

    color: #0f172a;

    font-size: 21px;
    line-height: 1.15;
}

.flow-admin-organization-hero__identity p {
    margin: 0;

    color: #64748b;

    font-size: 11px;
}

.flow-admin-organization-hero__status {
    padding: 6px 9px;

    border-radius: 999px;

    background:
        rgba(
            22,
            163,
            74,
            .09
        );

    color: #15803d;

    font-size: 9px;
    font-weight: 850;

    text-transform: uppercase;
}

.flow-admin-organization-kpis {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 9px;
}

.flow-admin-organization-kpis article {
    min-width: 0;

    padding: 13px;

    border:
        1px solid #e2e8f0;

    border-radius: 14px;

    background: #fff;
}

.flow-admin-organization-kpis span {
    display: block;

    margin-bottom: 4px;

    color: #64748b;

    font-size: 9px;
    font-weight: 750;

    text-transform: uppercase;
}

.flow-admin-organization-kpis strong {
    display: block;

    color: #0f172a;

    font-size: 23px;
}

.flow-admin-organization-kpis__text {
    overflow: hidden;

    font-size: 13px !important;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.flow-admin-organization-section {
    padding: 16px;

    border:
        1px solid
        rgba(15, 23, 42, .08);

    border-radius: 18px;

    background: #f8fafc;
}

.flow-admin-organization-section > header {
    margin-bottom: 11px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 12px;
}

.flow-admin-organization-section h3 {
    margin: 2px 0 0;

    color: #0f172a;

    font-size: 16px;
}


/* ALERT CENTER : JAMAIS DANS LE FLUX NORMAL */

.flow-admin-alert-center[hidden] {
    display: none !important;
}

.flow-admin-alert-header-actions {
    display: flex;

    gap: 7px;
}

.flow-admin-view-home {
    min-height: 42px;

    padding: 0 14px;

    border:
        1px solid
        rgba(15, 23, 42, .1);

    border-radius: 12px;

    background: #fff;

    color: #334155;

    font-size: 11px;
    font-weight: 750;

    cursor: pointer;
}


/* MOBILE */

@media (max-width: 760px) {

    .flow-admin-front-views {
        padding: 10px;
    }

    .flow-admin-compact-list {
        gap: 5px;
    }

    .flow-admin-compact-row {
        padding: 8px 9px;

        grid-template-columns:
            32px
            minmax(0, 1fr)
            auto
            14px;

        gap: 8px;

        border-radius: 11px;
    }

    .flow-admin-compact-row__icon {
        width: 32px;
        height: 32px;

        border-radius: 9px;

        font-size: 13px;
    }

    .flow-admin-compact-row__main strong {
        font-size: 12px;
    }

    .flow-admin-compact-row__meta {
        font-size: 9px;
    }

    .flow-admin-compact-row__status {
        max-width: 65px;

        padding: 4px 6px;

        font-size: 8px;
    }

    .flow-admin-compact-row__arrow {
        font-size: 18px;
    }

    .flow-admin-organization-hero {
        padding: 13px;

        grid-template-columns:
            42px
            minmax(0, 1fr);

        gap: 10px;

        border-radius: 15px;
    }

    .flow-admin-organization-hero__icon {
        width: 42px;
        height: 42px;

        border-radius: 12px;

        font-size: 18px;
    }

    .flow-admin-organization-hero__identity h2 {
        font-size: 17px;
    }

    .flow-admin-organization-hero__status {
        grid-column: 1 / -1;

        justify-self: start;
    }

    .flow-admin-organization-kpis {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .flow-admin-organization-kpis article:last-child {
        grid-column: 1 / -1;
    }

    .flow-admin-organization-section {
        padding: 11px;

        border-radius: 14px;
    }

    .flow-admin-alert-header-actions {
        width: 100%;

        margin-top: 10px;

        display: grid;

        grid-template-columns:
            1fr
            1fr;
    }

    .flow-admin-alert-header-actions button {
        width: 100%;
        margin: 0;
    }
}

/* QUALISECU — ADMIN FRONT UX V4 END */

/* ==========================================================================
   QUALISECU — ADMIN MOBILE UX V10
   Séparation claire des sections / cartes / profondeur visuelle
   ========================================================================== */

@media (max-width: 768px) {

    /* ----------------------------------------------------------
       FOND GENERAL COCKPIT
       ---------------------------------------------------------- */

    .flow-portal--platform-admin {
        background:
            linear-gradient(
                180deg,
                #f6f8ff 0%,
                #f3f6fb 100%
            );
    }

    .flow-portal--platform-admin > * {
        box-sizing: border-box;
    }


    /* ----------------------------------------------------------
       BLOCS PRINCIPAUX
       Chaque grande rubrique devient une vraie carte
       ---------------------------------------------------------- */

    .flow-portal--platform-admin
    .flow-admin-app-launcher,

    .flow-portal--platform-admin
    .flow-platform-dashboard,

    .flow-portal--platform-admin
    .flow-platform-overview,

    .flow-portal--platform-admin
    .flow-portal-platform-network,

    .flow-portal--platform-admin
    .flow-platform-organizations,

    .flow-portal--platform-admin
    [data-flow-platform-section],

    .flow-portal--platform-admin
    .flow-portal-section,

    .flow-portal--platform-admin
    .flow-dashboard-section {

        margin:
            16px 10px 20px;

        padding:
            18px 14px;

        background:
            rgba(255, 255, 255, 0.96);

        border:
            1px solid
            rgba(35, 52, 89, 0.07);

        border-radius:
            22px;

        box-shadow:
            0 8px 24px
            rgba(25, 45, 90, 0.08);

        overflow:
            hidden;
    }


    /* ----------------------------------------------------------
       TITRES DE SECTION
       ---------------------------------------------------------- */

    .flow-portal--platform-admin
    .flow-portal__eyebrow,

    .flow-portal--platform-admin
    .flow-platform-section__eyebrow,

    .flow-portal--platform-admin
    .flow-dashboard-section__eyebrow {

        display: block;

        margin-bottom:
            7px;

        font-size:
            10px;

        line-height:
            1.2;

        letter-spacing:
            0.06em;

        font-weight:
            700;

        text-transform:
            uppercase;
    }


    .flow-portal--platform-admin
    h2,

    .flow-portal--platform-admin
    h3 {

        margin-top:
            0;
    }


    .flow-portal--platform-admin
    .flow-admin-app-launcher h2,

    .flow-portal--platform-admin
    .flow-platform-dashboard h2,

    .flow-portal--platform-admin
    .flow-platform-overview h2,

    .flow-portal--platform-admin
    .flow-platform-organizations h2 {

        margin-bottom:
            6px;

        font-size:
            21px;

        line-height:
            1.15;
    }


    /* ----------------------------------------------------------
       SOUS-TEXTES
       ---------------------------------------------------------- */

    .flow-portal--platform-admin
    .flow-admin-app-launcher p,

    .flow-portal--platform-admin
    .flow-platform-dashboard p,

    .flow-portal--platform-admin
    .flow-platform-overview p,

    .flow-portal--platform-admin
    .flow-platform-organizations p {

        margin-top:
            0;

        line-height:
            1.45;
    }


    /* ----------------------------------------------------------
       CARTES ACCES RAPIDE
       ---------------------------------------------------------- */

    .flow-portal--platform-admin
    .flow-admin-app-grid {

        gap:
            10px;

        margin-top:
            14px;
    }


    .flow-portal--platform-admin
    .flow-admin-app-card,

    .flow-portal--platform-admin
    .flow-admin-app-tile {

        min-height:
            102px;

        padding:
            13px;

        border:
            1px solid
            rgba(35, 52, 89, 0.07);

        border-radius:
            16px;

        background:
            #ffffff;

        box-shadow:
            0 4px 12px
            rgba(25, 45, 90, 0.065);

        transition:
            transform .18s ease,
            box-shadow .18s ease;
    }


    .flow-portal--platform-admin
    .flow-admin-app-card:active,

    .flow-portal--platform-admin
    .flow-admin-app-tile:active {

        transform:
            scale(.985);

        box-shadow:
            0 2px 8px
            rgba(25, 45, 90, 0.06);
    }


    /* ----------------------------------------------------------
       KPI PLATEFORME
       ---------------------------------------------------------- */

    .flow-portal--platform-admin
    .flow-platform-kpi-grid,

    .flow-portal--platform-admin
    .flow-platform-stats,

    .flow-portal--platform-admin
    .flow-dashboard-kpis {

        gap:
            10px;

        margin-top:
            14px;
    }


    .flow-portal--platform-admin
    .flow-platform-kpi,

    .flow-portal--platform-admin
    .flow-dashboard-kpi,

    .flow-portal--platform-admin
    .flow-smart-stat {

        padding:
            14px;

        border-radius:
            16px;

        background:
            #ffffff;

        border:
            1px solid
            rgba(35, 52, 89, 0.07);

        box-shadow:
            0 4px 12px
            rgba(25, 45, 90, 0.06);
    }


    /* ----------------------------------------------------------
       ORGANISATIONS
       ---------------------------------------------------------- */

    .flow-portal--platform-admin
    .flow-portal-organization {

        margin:
            0 0 20px;

        padding:
            15px;

        background:
            rgba(255,255,255,.97);

        border:
            1px solid
            rgba(35, 52, 89, 0.08);

        border-radius:
            20px;

        box-shadow:
            0 7px 20px
            rgba(25, 45, 90, 0.075);
    }


    .flow-portal--platform-admin
    .flow-portal-organization:last-child {

        margin-bottom:
            0;
    }


    .flow-portal--platform-admin
    .flow-portal-organization__header {

        margin-bottom:
            13px;

        padding-bottom:
            10px;

        border-bottom:
            1px solid
            rgba(35, 52, 89, 0.07);
    }


    /* ----------------------------------------------------------
       CARTES DOSSIERS
       ---------------------------------------------------------- */

    .flow-portal--platform-admin
    .flow-workspace-card {

        margin-bottom:
            12px;

        padding:
            16px;

        border-radius:
            18px;

        background:
            #ffffff;

        border:
            1px solid
            rgba(35, 52, 89, 0.075);

        box-shadow:
            0 6px 16px
            rgba(25, 45, 90, 0.065);
    }


    .flow-portal--platform-admin
    .flow-workspace-card:last-child {

        margin-bottom:
            0;
    }


    /* ----------------------------------------------------------
       ESPACEMENT ENTRE RUBRIQUES
       ---------------------------------------------------------- */

    .flow-portal--platform-admin
    .flow-admin-app-launcher
    + *,

    .flow-portal--platform-admin
    .flow-platform-dashboard
    + *,

    .flow-portal--platform-admin
    .flow-platform-overview
    + * {

        margin-top:
            18px;
    }


    /* ----------------------------------------------------------
       LISTES / GROUPES INTERNES
       ---------------------------------------------------------- */

    .flow-portal--platform-admin
    .flow-workspace-grid,

    .flow-portal--platform-admin
    .flow-platform-workspaces,

    .flow-portal--platform-admin
    .flow-organization-workspaces {

        display:
            grid;

        gap:
            12px;
    }


    /* ----------------------------------------------------------
       MEILLEURE RESPIRATION BAS DE PAGE
       ---------------------------------------------------------- */

    .flow-portal--platform-admin {

        padding-bottom:
            92px;
    }
}


/* ==========================================================================
   QUALISECU — ADMIN MOBILE UX V10 END
   ========================================================================== */


/* ==========================================================================
   QUALISECU — DASHBOARD DESIGN SYSTEM V11
   Cohérence PlatformAdmin + Affilié
   Desktop / Tablette / Mobile
   ========================================================================== */

/* ----------------------------------------------------------
   TOKENS VISUELS COMMUNS
   ---------------------------------------------------------- */

.flow-portal {
    --flow-ds-page-bg: #f5f7fb;
    --flow-ds-surface: #ffffff;
    --flow-ds-surface-soft: #f9fbfd;
    --flow-ds-border: rgba(31, 41, 55, 0.08);
    --flow-ds-shadow:
        0 10px 32px rgba(15, 23, 42, 0.07);
    --flow-ds-shadow-soft:
        0 5px 16px rgba(15, 23, 42, 0.055);

    --flow-ds-radius-xl: 24px;
    --flow-ds-radius-lg: 18px;
    --flow-ds-radius-md: 14px;

    --flow-ds-gap-xl: 28px;
    --flow-ds-gap-lg: 20px;
    --flow-ds-gap-md: 14px;
    --flow-ds-gap-sm: 10px;
}


/* ----------------------------------------------------------
   FOND GLOBAL
   ---------------------------------------------------------- */

.flow-portal--platform-admin,
.flow-portal:not(.flow-client-portal) {
    background:
        linear-gradient(
            180deg,
            #f7f9fd 0%,
            var(--flow-ds-page-bg) 100%
        );
}


/* ----------------------------------------------------------
   PANNEAUX PRINCIPAUX COMMUNS
   ---------------------------------------------------------- */

.flow-portal--platform-admin .flow-smart-dashboard,
.flow-portal--platform-admin .flow-portal-section,
.flow-portal--platform-admin .flow-admin-app-launcher,

.flow-portal:not(.flow-portal--platform-admin):not(.flow-client-portal)
.flow-smart-dashboard,

.flow-portal:not(.flow-portal--platform-admin):not(.flow-client-portal)
.flow-agency-pilotage,

.flow-portal:not(.flow-portal--platform-admin):not(.flow-client-portal)
.flow-network-feed,

.flow-portal:not(.flow-portal--platform-admin):not(.flow-client-portal)
.flow-network-resources,

.flow-portal:not(.flow-portal--platform-admin):not(.flow-client-portal)
.flow-client-portfolio,

.flow-portal:not(.flow-portal--platform-admin):not(.flow-client-portal)
.flow-organization-block {

    background:
        var(--flow-ds-surface);

    border:
        1px solid var(--flow-ds-border);

    border-radius:
        var(--flow-ds-radius-xl);

    box-shadow:
        var(--flow-ds-shadow);
}


/* ----------------------------------------------------------
   HIERARCHIE DES HEADERS
   ---------------------------------------------------------- */

.flow-portal .flow-smart-dashboard__header,
.flow-portal .flow-portal-section__header,
.flow-portal .flow-agency-pilotage__header,
.flow-portal .flow-network-feed__header,
.flow-portal .flow-network-resources__header,
.flow-portal .flow-client-portfolio__header,
.flow-portal .flow-organization-block__header {

    gap:
        18px;
}

.flow-portal .flow-smart-dashboard__header h2,
.flow-portal .flow-portal-section__header h2,
.flow-portal .flow-agency-pilotage__header h2,
.flow-portal .flow-network-feed__header h2,
.flow-portal .flow-network-resources__header h2,
.flow-portal .flow-client-portfolio__header h2 {

    margin:
        2px 0 6px;

    color:
        #1e293b;

    font-size:
        clamp(22px, 2.2vw, 30px);

    line-height:
        1.12;

    letter-spacing:
        -0.025em;
}

.flow-portal .flow-portal__eyebrow {
    color:
        var(--flow-primary);

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        0.075em;

    text-transform:
        uppercase;
}


/* ----------------------------------------------------------
   KPI COMMUNS
   ---------------------------------------------------------- */

.flow-portal .flow-smart-kpi,
.flow-portal .flow-agency-pilotage-kpi {

    background:
        var(--flow-ds-surface);

    border:
        1px solid var(--flow-ds-border);

    border-radius:
        var(--flow-ds-radius-lg);

    box-shadow:
        var(--flow-ds-shadow-soft);
}

.flow-portal .flow-smart-kpi {
    min-height:
        112px;
}

.flow-portal .flow-agency-pilotage-kpi {
    min-height:
        108px;
}

.flow-portal .flow-smart-kpi strong,
.flow-portal .flow-agency-pilotage-kpi strong {

    letter-spacing:
        -0.03em;
}


/* ----------------------------------------------------------
   ORGANISATIONS — PLATFORM ADMIN
   ---------------------------------------------------------- */

.flow-portal--platform-admin
.flow-portal-organization {

    margin:
        0 0 22px;

    padding:
        20px;

    background:
        var(--flow-ds-surface-soft);

    border:
        1px solid rgba(31, 41, 55, 0.075);

    border-radius:
        var(--flow-ds-radius-xl);

    box-shadow:
        0 8px 24px rgba(15, 23, 42, 0.055);
}

.flow-portal--platform-admin
.flow-portal-organization
> .flow-portal-section__header {

    margin-bottom:
        16px;

    padding-bottom:
        14px;

    border-bottom:
        1px solid rgba(31, 41, 55, 0.075);
}

.flow-portal--platform-admin
.flow-portal-organization
> .flow-portal-section__header h3 {

    margin:
        2px 0 0;

    font-size:
        20px;

    line-height:
        1.2;
}


/* ----------------------------------------------------------
   CARTES DOSSIERS — LANGAGE COMMUN
   ---------------------------------------------------------- */

.flow-portal .flow-workspace-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:
        14px;
}

.flow-portal .flow-workspace-card {

    min-width:
        0;

    padding:
        17px 18px;

    background:
        #ffffff;

    border:
        1px solid rgba(31, 41, 55, 0.08);

    border-radius:
        var(--flow-ds-radius-lg);

    box-shadow:
        var(--flow-ds-shadow-soft);

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease;
}

.flow-portal .flow-workspace-card:hover {

    transform:
        translateY(-2px);

    border-color:
        rgba(34, 197, 94, 0.22);

    box-shadow:
        0 12px 28px rgba(15, 23, 42, 0.085);
}

.flow-portal .flow-workspace-card h3 {

    margin:
        8px 0 5px;

    font-size:
        17px;

    line-height:
        1.25;

    letter-spacing:
        -0.015em;
}

.flow-portal .flow-workspace-card p {

    margin:
        0;

    color:
        #64748b;

    font-size:
        12px;
}

.flow-portal .flow-workspace-card__type {

    display:
        inline-flex;

    align-items:
        center;

    width:
        fit-content;

    padding:
        4px 8px;

    border-radius:
        999px;

    font-size:
        10px;

    font-weight:
        800;
}

.flow-portal .flow-workspace-card__business {

    display:
        flex;

    flex-wrap:
        wrap;

    align-items:
        center;

    gap:
        6px;

    margin-top:
        12px;
}


/* ----------------------------------------------------------
   BADGES BUSINESS ADMIN
   ---------------------------------------------------------- */

.flow-portal--platform-admin
.flow-workspace-card__affiliate,

.flow-portal--platform-admin
.flow-workspace-card__amount,

.flow-portal--platform-admin
.flow-workspace-card__deposit,

.flow-portal--platform-admin
.flow-workspace-card__remaining,

.flow-portal--platform-admin
.flow-workspace-card__collected,

.flow-portal--platform-admin
.flow-workspace-card__remaining-collect,

.flow-portal--platform-admin
.flow-workspace-card__revenue-status {

    display:
        inline-flex;

    align-items:
        center;

    min-height:
        25px;

    padding:
        4px 8px;

    border-radius:
        999px;

    font-size:
        10.5px;

    font-weight:
        700;

    line-height:
        1.2;
}


/* ----------------------------------------------------------
   DASHBOARD AFFILIE — SOUS PANNEAUX
   ---------------------------------------------------------- */

.flow-portal:not(.flow-portal--platform-admin):not(.flow-client-portal)
.flow-dashboard-compliance,

.flow-portal:not(.flow-portal--platform-admin):not(.flow-client-portal)
.flow-dashboard-priorities,

.flow-portal:not(.flow-portal--platform-admin):not(.flow-client-portal)
.flow-smart-activity,

.flow-portal:not(.flow-portal--platform-admin):not(.flow-client-portal)
.flow-smart-actions,

.flow-portal:not(.flow-portal--platform-admin):not(.flow-client-portal)
.flow-performance-panel {

    background:
        var(--flow-ds-surface-soft);

    border:
        1px solid var(--flow-ds-border);

    border-radius:
        var(--flow-ds-radius-lg);

    box-shadow:
        none;
}


/* ----------------------------------------------------------
   DESKTOP
   ---------------------------------------------------------- */

@media (min-width: 1121px) {

    .flow-portal--platform-admin
    .flow-portal-section,

    .flow-portal--platform-admin
    .flow-smart-dashboard,

    .flow-portal:not(.flow-portal--platform-admin):not(.flow-client-portal)
    .flow-smart-dashboard,

    .flow-portal:not(.flow-portal--platform-admin):not(.flow-client-portal)
    .flow-agency-pilotage,

    .flow-portal:not(.flow-portal--platform-admin):not(.flow-client-portal)
    .flow-network-feed,

    .flow-portal:not(.flow-portal--platform-admin):not(.flow-client-portal)
    .flow-network-resources {

        padding:
            26px;
    }

    .flow-portal--platform-admin
    #flow-dossiers {

        padding:
            26px;
    }

    .flow-portal--platform-admin
    .flow-workspace-grid {

        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }

    .flow-portal:not(.flow-portal--platform-admin):not(.flow-client-portal)
    .flow-smart-kpis {

        grid-template-columns:
            repeat(
                4,
                minmax(0, 1fr)
            );
    }
}


/* ----------------------------------------------------------
   TABLETTE
   ---------------------------------------------------------- */

@media (max-width: 1120px) {

    .flow-portal .flow-workspace-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .flow-portal--platform-admin
    .flow-portal-organization {

        padding:
            18px;
    }
}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width: 760px) {

    .flow-portal--platform-admin,
    .flow-portal:not(.flow-portal--platform-admin):not(.flow-client-portal) {

        padding-bottom:
            90px;
    }

    .flow-portal--platform-admin
    .flow-smart-dashboard,

    .flow-portal--platform-admin
    .flow-portal-section,

    .flow-portal:not(.flow-portal--platform-admin):not(.flow-client-portal)
    .flow-smart-dashboard,

    .flow-portal:not(.flow-portal--platform-admin):not(.flow-client-portal)
    .flow-agency-pilotage,

    .flow-portal:not(.flow-portal--platform-admin):not(.flow-client-portal)
    .flow-network-feed,

    .flow-portal:not(.flow-portal--platform-admin):not(.flow-client-portal)
    .flow-network-resources,

    .flow-portal:not(.flow-portal--platform-admin):not(.flow-client-portal)
    .flow-client-portfolio,

    .flow-portal:not(.flow-portal--platform-admin):not(.flow-client-portal)
    .flow-organization-block {

        margin:
            14px 8px 18px;

        padding:
            17px 13px;

        border-radius:
            21px;

        box-shadow:
            0 8px 22px rgba(15, 23, 42, 0.07);
    }


    /* KPI en 2 colonnes */
    .flow-portal .flow-smart-kpis,
    .flow-portal .flow-agency-pilotage__kpis {

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap:
            9px;
    }

    .flow-portal .flow-smart-kpi,
    .flow-portal .flow-agency-pilotage-kpi {

        min-height:
            92px;

        padding:
            12px;

        border-radius:
            15px;
    }


    /* Organisations clairement détachées */
    .flow-portal--platform-admin
    .flow-portal-organization {

        margin:
            0 0 16px;

        padding:
            14px;

        border-radius:
            18px;

        background:
            #fbfcfe;
    }


    /* Dossiers : 1 colonne */
    .flow-portal .flow-workspace-grid {

        grid-template-columns:
            1fr;

        gap:
            10px;
    }

    .flow-portal .flow-workspace-card {

        padding:
            14px;

        border-radius:
            16px;
    }

    .flow-portal .flow-workspace-card h3 {

        font-size:
            15px;
    }

    .flow-portal .flow-workspace-card__business {

        gap:
            5px;

        margin-top:
            10px;
    }


    /* Sous-panneaux affilié */
    .flow-portal:not(.flow-portal--platform-admin):not(.flow-client-portal)
    .flow-dashboard-document-overview,

    .flow-portal:not(.flow-portal--platform-admin):not(.flow-client-portal)
    .flow-smart-dashboard__grid {

        gap:
            12px;
    }

    .flow-portal:not(.flow-portal--platform-admin):not(.flow-client-portal)
    .flow-dashboard-compliance,

    .flow-portal:not(.flow-portal--platform-admin):not(.flow-client-portal)
    .flow-dashboard-priorities,

    .flow-portal:not(.flow-portal--platform-admin):not(.flow-client-portal)
    .flow-smart-activity,

    .flow-portal:not(.flow-portal--platform-admin):not(.flow-client-portal)
    .flow-smart-actions {

        padding:
            14px;

        border-radius:
            16px;
    }
}


/* ----------------------------------------------------------
   PETITS MOBILES
   ---------------------------------------------------------- */

@media (max-width: 390px) {

    .flow-portal .flow-smart-kpis,
    .flow-portal .flow-agency-pilotage__kpis {

        grid-template-columns:
            1fr 1fr;
    }

    .flow-portal .flow-workspace-card__business {

        align-items:
            flex-start;
    }
}


/* ==========================================================================
   QUALISECU — DASHBOARD DESIGN SYSTEM V11 END
   ========================================================================== */


/* ==========================================================================
   QUALISECU — WORKSPACE CARDS UX V12
   Cartes dossiers compactes et cohérentes Admin / Affilié
   ========================================================================== */


/* ----------------------------------------------------------
   CARTE — STRUCTURE COMMUNE
   ---------------------------------------------------------- */

.flow-portal:not(.flow-client-portal)
.flow-workspace-card {

    position: relative;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    align-items: start;

    gap:
        14px;

    min-height:
        0;

    padding:
        17px 18px;

    overflow:
        hidden;

    color:
        #0f172a;

    text-decoration:
        none;

    background:
        linear-gradient(
            150deg,
            #ffffff 0%,
            #fbfcfe 100%
        );

    border:
        1px solid rgba(30, 41, 59, 0.085);

    border-radius:
        18px;

    box-shadow:
        0 5px 15px rgba(15, 23, 42, 0.055);

    transition:
        transform .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}


.flow-portal:not(.flow-client-portal)
.flow-workspace-card::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 3px;
    height: 100%;

    background:
        rgba(34, 197, 94, 0.55);

    opacity:
        .75;
}


.flow-portal:not(.flow-client-portal)
.flow-workspace-card:hover {

    transform:
        translateY(-2px);

    border-color:
        rgba(34, 197, 94, 0.22);

    box-shadow:
        0 11px 26px rgba(15, 23, 42, 0.085);
}


/* ----------------------------------------------------------
   CONTENU PRINCIPAL
   ---------------------------------------------------------- */

.flow-portal:not(.flow-client-portal)
.flow-workspace-card
> div:first-child {

    min-width:
        0;
}


.flow-portal:not(.flow-client-portal)
.flow-workspace-card__type {

    min-height:
        24px;

    padding:
        4px 8px;

    gap:
        5px;

    background:
        rgba(2, 132, 199, 0.08);

    color:
        #0369a1;

    border-radius:
        999px;

    font-size:
        9.5px;

    font-weight:
        800;

    line-height:
        1;

    letter-spacing:
        .035em;

    text-transform:
        uppercase;
}


.flow-portal:not(.flow-client-portal)
.flow-workspace-card__template-icon {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    line-height:
        1;
}


/* ----------------------------------------------------------
   TITRE
   ---------------------------------------------------------- */

.flow-portal:not(.flow-client-portal)
.flow-workspace-card h3 {

    margin:
        10px 0 5px;

    overflow-wrap:
        anywhere;

    color:
        #182236;

    font-size:
        16px;

    font-weight:
        800;

    line-height:
        1.25;

    letter-spacing:
        -.015em;
}


/* ----------------------------------------------------------
   REFERENCE
   ---------------------------------------------------------- */

.flow-portal:not(.flow-client-portal)
.flow-workspace-card p {

    margin:
        0;

    overflow:
        hidden;

    color:
        #64748b;

    font-size:
        11px;

    line-height:
        1.4;

    text-overflow:
        ellipsis;
}


.flow-portal:not(.flow-client-portal)
.flow-workspace-card p code {

    padding:
        2px 5px;

    border-radius:
        6px;

    background:
        #f1f5f9;

    color:
        #475569;

    font-family:
        inherit;

    font-size:
        10.5px;

    font-weight:
        700;
}


/* ----------------------------------------------------------
   STATUT DOSSIER
   ---------------------------------------------------------- */

.flow-portal:not(.flow-client-portal)
.flow-workspace-card__status {

    align-self:
        start;

    margin:
        0;

    min-height:
        25px;

    padding:
        5px 8px;

    white-space:
        nowrap;

    border-radius:
        999px;

    background:
        rgba(34, 197, 94, 0.10);

    color:
        #15803d;

    font-size:
        9px;

    font-weight:
        800;

    line-height:
        1;

    text-transform:
        uppercase;
}


.flow-portal:not(.flow-client-portal)
.flow-workspace-card__status[data-status="archived"] {

    background:
        #f1f5f9;

    color:
        #64748b;
}


.flow-portal:not(.flow-client-portal)
.flow-workspace-card__status[data-status="completed"],
.flow-portal:not(.flow-client-portal)
.flow-workspace-card__status[data-status="done"] {

    background:
        rgba(59, 130, 246, 0.09);

    color:
        #1d4ed8;
}


/* ----------------------------------------------------------
   INFORMATIONS BUSINESS — PLATFORM ADMIN
   ---------------------------------------------------------- */

.flow-portal--platform-admin
.flow-workspace-card__business {

    display:
        flex;

    flex-wrap:
        wrap;

    align-items:
        center;

    gap:
        5px;

    margin-top:
        11px;
}


.flow-portal--platform-admin
.flow-workspace-card__affiliate,

.flow-portal--platform-admin
.flow-workspace-card__amount,

.flow-portal--platform-admin
.flow-workspace-card__deposit,

.flow-portal--platform-admin
.flow-workspace-card__remaining,

.flow-portal--platform-admin
.flow-workspace-card__collected,

.flow-portal--platform-admin
.flow-workspace-card__remaining-collect,

.flow-portal--platform-admin
.flow-workspace-card__revenue-status {

    min-height:
        23px;

    padding:
        4px 7px;

    border-radius:
        999px;

    font-size:
        9.5px;

    font-weight:
        750;

    line-height:
        1.15;
}


/* Responsable */

.flow-portal--platform-admin
.flow-workspace-card__affiliate {

    gap:
        4px;

    background:
        rgba(59, 130, 246, 0.08);

    color:
        #1d4ed8;
}


/* Montant global */

.flow-portal--platform-admin
.flow-workspace-card__amount {

    background:
        #f1f5f9;

    color:
        #334155;
}


/* Acompte */

.flow-portal--platform-admin
.flow-workspace-card__deposit {

    background:
        rgba(59, 130, 246, 0.09);

    color:
        #1d4ed8;
}


/* Reste à facturer */

.flow-portal--platform-admin
.flow-workspace-card__remaining {

    background:
        rgba(245, 158, 11, 0.11);

    color:
        #92400e;
}


/* Encaissé */

.flow-portal--platform-admin
.flow-workspace-card__collected {

    background:
        rgba(34, 197, 94, 0.10);

    color:
        #166534;
}


/* Reste à encaisser */

.flow-portal--platform-admin
.flow-workspace-card__remaining-collect {

    background:
        rgba(239, 68, 68, 0.08);

    color:
        #991b1b;
}


/* Statut économique */

.flow-portal--platform-admin
.flow-workspace-card__revenue-status {

    background:
        #f1f5f9;

    color:
        #475569;
}


.flow-portal--platform-admin
.flow-workspace-card__revenue-status[data-status="signed"] {

    background:
        rgba(59, 130, 246, 0.09);

    color:
        #1d4ed8;
}


.flow-portal--platform-admin
.flow-workspace-card__revenue-status[data-status="invoiced"] {

    background:
        rgba(245, 158, 11, 0.10);

    color:
        #92400e;
}


.flow-portal--platform-admin
.flow-workspace-card__revenue-status[data-status="collected"] {

    background:
        rgba(34, 197, 94, 0.10);

    color:
        #166534;
}


/* ----------------------------------------------------------
   PLATFORM ADMIN — ORGANISATION > DOSSIERS
   ---------------------------------------------------------- */

.flow-portal--platform-admin
.flow-portal-organization
.flow-workspace-grid {

    gap:
        11px;
}


.flow-portal--platform-admin
.flow-portal-organization
.flow-workspace-card {

    background:
        #ffffff;
}


/* ----------------------------------------------------------
   AFFILIE — MEME LANGAGE VISUEL
   ---------------------------------------------------------- */

.flow-portal:not(.flow-portal--platform-admin):not(.flow-client-portal)
.flow-workspace-card {

    min-height:
        0;
}


.flow-portal:not(.flow-portal--platform-admin):not(.flow-client-portal)
.flow-workspace-card__type {

    background:
        color-mix(
            in srgb,
            var(
                --flow-workspace-template-color,
                #0284c7
            )
            10%,
            white
        );

    color:
        var(
            --flow-workspace-template-color,
            #0369a1
        );
}


/* ----------------------------------------------------------
   DESKTOP LARGE
   ---------------------------------------------------------- */

@media (min-width: 1180px) {

    .flow-portal--platform-admin
    .flow-portal-organization
    .flow-workspace-grid {

        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );

        gap:
            12px;
    }


    .flow-portal:not(.flow-portal--platform-admin):not(.flow-client-portal)
    .flow-workspace-grid {

        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }


    .flow-portal:not(.flow-client-portal)
    .flow-workspace-card {

        padding:
            16px 17px;
    }
}


/* ----------------------------------------------------------
   DESKTOP / TABLETTE
   ---------------------------------------------------------- */

@media (min-width: 761px) and (max-width: 1179px) {

    .flow-portal:not(.flow-client-portal)
    .flow-workspace-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap:
            12px;
    }
}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width: 760px) {

    .flow-portal:not(.flow-client-portal)
    .flow-workspace-grid {

        grid-template-columns:
            1fr;

        gap:
            9px;
    }


    .flow-portal:not(.flow-client-portal)
    .flow-workspace-card {

        grid-template-columns:
            minmax(0, 1fr)
            auto;

        gap:
            8px;

        min-height:
            0;

        padding:
            13px 12px 13px 14px;

        border-radius:
            15px;

        box-shadow:
            0 4px 12px rgba(15, 23, 42, 0.05);
    }


    .flow-portal:not(.flow-client-portal)
    .flow-workspace-card::before {

        width:
            3px;
    }


    .flow-portal:not(.flow-client-portal)
    .flow-workspace-card h3 {

        margin:
            8px 0 4px;

        font-size:
            14px;

        line-height:
            1.25;
    }


    .flow-portal:not(.flow-client-portal)
    .flow-workspace-card p {

        font-size:
            10.5px;
    }


    .flow-portal:not(.flow-client-portal)
    .flow-workspace-card__type {

        min-height:
            21px;

        padding:
            3px 7px;

        font-size:
            8.5px;
    }


    .flow-portal:not(.flow-client-portal)
    .flow-workspace-card__status {

        min-height:
            22px;

        padding:
            4px 7px;

        font-size:
            8px;
    }


    .flow-portal--platform-admin
    .flow-workspace-card__business {

        margin-top:
            9px;

        gap:
            4px;
    }


    .flow-portal--platform-admin
    .flow-workspace-card__affiliate,

    .flow-portal--platform-admin
    .flow-workspace-card__amount,

    .flow-portal--platform-admin
    .flow-workspace-card__deposit,

    .flow-portal--platform-admin
    .flow-workspace-card__remaining,

    .flow-portal--platform-admin
    .flow-workspace-card__collected,

    .flow-portal--platform-admin
    .flow-workspace-card__remaining-collect,

    .flow-portal--platform-admin
    .flow-workspace-card__revenue-status {

        min-height:
            21px;

        padding:
            3px 6px;

        font-size:
            8.5px;
    }
}


/* ----------------------------------------------------------
   TRES PETITS MOBILES
   ---------------------------------------------------------- */

@media (max-width: 390px) {

    .flow-portal:not(.flow-client-portal)
    .flow-workspace-card {

        padding:
            12px 10px 12px 13px;
    }


    .flow-portal--platform-admin
    .flow-workspace-card__business {

        align-items:
            flex-start;
    }
}


/* ==========================================================================
   QUALISECU — WORKSPACE CARDS UX V12 END
   ========================================================================== */


/* ==========================================================================
   QUALISECU — CLIENTS + ACTIONS UX V13
   Cohérence visuelle Admin / Affilié
   ========================================================================== */


/* ----------------------------------------------------------
   PORTEFEUILLE CLIENT AFFILIE
   ---------------------------------------------------------- */

.flow-portal:not(.flow-portal--platform-admin):not(.flow-client-portal)
.flow-client-portfolio {

    margin-top:
        20px;

    padding:
        20px;

    background:
        #f9fbfd;

    border:
        1px solid rgba(30, 41, 59, 0.075);

    border-radius:
        20px;

    box-shadow:
        0 6px 20px rgba(15, 23, 42, 0.045);
}


.flow-portal:not(.flow-portal--platform-admin):not(.flow-client-portal)
.flow-client-portfolio__header {

    margin-bottom:
        14px;

    padding-bottom:
        12px;

    border-bottom:
        1px solid rgba(30, 41, 59, 0.07);
}


.flow-portal:not(.flow-portal--platform-admin):not(.flow-client-portal)
.flow-client-portfolio__header h3 {

    margin:
        3px 0 0;

    color:
        #182236;

    font-size:
        20px;

    line-height:
        1.2;

    letter-spacing:
        -.02em;
}


/* ----------------------------------------------------------
   GRILLE CLIENTS AFFILIE
   ---------------------------------------------------------- */

.flow-portal:not(.flow-portal--platform-admin):not(.flow-client-portal)
.flow-client-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap:
        12px;
}


/* ----------------------------------------------------------
   CARTE CLIENT AFFILIE
   ---------------------------------------------------------- */

.flow-portal:not(.flow-portal--platform-admin):not(.flow-client-portal)
.flow-client-card {

    position:
        relative;

    min-width:
        0;

    min-height:
        0;

    padding:
        17px;

    overflow:
        hidden;

    background:
        linear-gradient(
            150deg,
            #ffffff 0%,
            #fbfcfe 100%
        );

    border:
        1px solid rgba(30, 41, 59, 0.08);

    border-radius:
        17px;

    box-shadow:
        0 5px 15px rgba(15, 23, 42, 0.05);

    transition:
        transform .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}


.flow-portal:not(.flow-portal--platform-admin):not(.flow-client-portal)
.flow-client-card::before {

    top:
        0;

    bottom:
        0;

    left:
        0;

    width:
        3px;

    border-radius:
        17px 0 0 17px;

    background:
        rgba(34, 197, 94, .55);
}


.flow-portal:not(.flow-portal--platform-admin):not(.flow-client-portal)
.flow-client-card:nth-child(3n + 2)::before,

.flow-portal:not(.flow-portal--platform-admin):not(.flow-client-portal)
.flow-client-card:nth-child(3n)::before {

    background:
        rgba(34, 197, 94, .55);
}


.flow-portal:not(.flow-portal--platform-admin):not(.flow-client-portal)
.flow-client-card:hover {

    transform:
        translateY(-2px);

    border-color:
        rgba(34, 197, 94, .20);

    box-shadow:
        0 11px 25px rgba(15, 23, 42, .08);
}


/* Ancienne grosse icône décorative : on la compacte */

.flow-portal:not(.flow-portal--platform-admin):not(.flow-client-portal)
.flow-client-card
> div:first-child::before {

    width:
        38px;

    height:
        38px;

    margin-bottom:
        11px;

    border-radius:
        11px;

    background:
        rgba(34, 197, 94, .09);

    color:
        #15803d;

    content:
        "◉";

    font-size:
        15px;
}


.flow-portal:not(.flow-portal--platform-admin):not(.flow-client-portal)
.flow-client-card:nth-child(3n + 2)
> div:first-child::before,

.flow-portal:not(.flow-portal--platform-admin):not(.flow-client-portal)
.flow-client-card:nth-child(3n)
> div:first-child::before {

    background:
        rgba(34, 197, 94, .09);

    color:
        #15803d;

    content:
        "◉";
}


/* ----------------------------------------------------------
   IDENTITE CLIENT
   ---------------------------------------------------------- */

.flow-portal:not(.flow-portal--platform-admin):not(.flow-client-portal)
.flow-client-card h4 {

    margin:
        7px 0 12px;

    padding-right:
        64px;

    overflow-wrap:
        anywhere;

    color:
        #182236;

    font-size:
        16px;

    font-weight:
        800;

    line-height:
        1.25;

    letter-spacing:
        -.015em;
}


/* ----------------------------------------------------------
   STATUT CLIENT
   ---------------------------------------------------------- */

.flow-portal:not(.flow-portal--platform-admin):not(.flow-client-portal)
.flow-client-card__status {

    top:
        16px;

    right:
        14px;

    left:
        auto;

    min-height:
        23px;

    padding:
        4px 7px;

    border-radius:
        999px;

    background:
        rgba(34, 197, 94, .10);

    color:
        #15803d;

    font-size:
        8.5px;

    font-weight:
        800;

    line-height:
        1;

    text-transform:
        uppercase;
}


.flow-portal:not(.flow-portal--platform-admin):not(.flow-client-portal)
.flow-client-card__status[data-status="archived"] {

    background:
        #f1f5f9;

    color:
        #64748b;
}


/* ----------------------------------------------------------
   COORDONNEES CLIENT
   ---------------------------------------------------------- */

.flow-portal:not(.flow-portal--platform-admin):not(.flow-client-portal)
.flow-client-card dl {

    margin:
        0;
}


.flow-portal:not(.flow-portal--platform-admin):not(.flow-client-portal)
.flow-client-card dl div {

    display:
        grid;

    grid-template-columns:
        62px
        minmax(0, 1fr);

    gap:
        8px;

    padding:
        7px 0;

    border-bottom:
        1px solid #f0f2f5;
}


.flow-portal:not(.flow-portal--platform-admin):not(.flow-client-portal)
.flow-client-card dl div:last-child {

    border-bottom:
        0;
}


.flow-portal:not(.flow-portal--platform-admin):not(.flow-client-portal)
.flow-client-card dt {

    color:
        #94a3b8;

    font-size:
        9.5px;

    font-weight:
        750;

    text-transform:
        uppercase;
}


.flow-portal:not(.flow-portal--platform-admin):not(.flow-client-portal)
.flow-client-card dd {

    min-width:
        0;

    margin:
        0;

    overflow-wrap:
        anywhere;

    color:
        #475569;

    font-size:
        11px;

    line-height:
        1.35;
}


/* ----------------------------------------------------------
   ACTIONS CARTE CLIENT
   ---------------------------------------------------------- */

.flow-portal:not(.flow-portal--platform-admin):not(.flow-client-portal)
.flow-client-card__actions {

    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:
        7px;

    margin-top:
        13px;
}


.flow-portal:not(.flow-portal--platform-admin):not(.flow-client-portal)
.flow-client-card__actions
.flow-button {

    min-height:
        38px;

    padding:
        0 10px;

    border-radius:
        9px;

    font-size:
        10.5px;

    box-shadow:
        none;
}


/* ----------------------------------------------------------
   ADMIN — LISTE CLIENTS
   ---------------------------------------------------------- */

.flow-portal--platform-admin
.flow-admin-compact-list--clients {

    gap:
        8px;
}


.flow-portal--platform-admin
.flow-admin-compact-row--client {

    min-height:
        60px;

    padding:
        10px 12px;

    grid-template-columns:
        38px
        minmax(0, 1fr)
        auto
        18px;

    gap:
        10px;

    border:
        1px solid rgba(30, 41, 59, .075);

    border-radius:
        14px;

    background:
        linear-gradient(
            150deg,
            #ffffff,
            #fbfcfe
        );

    box-shadow:
        0 3px 10px rgba(15, 23, 42, .04);
}


.flow-portal--platform-admin
.flow-admin-compact-row--client:hover {

    border-color:
        rgba(34, 197, 94, .20);

    box-shadow:
        0 8px 20px rgba(15, 23, 42, .07);
}


.flow-portal--platform-admin
.flow-admin-compact-row--client
.flow-admin-compact-row__icon {

    width:
        38px;

    height:
        38px;

    border-radius:
        11px;

    background:
        rgba(34, 197, 94, .09);

    color:
        #15803d;

    font-size:
        14px;
}


.flow-portal--platform-admin
.flow-admin-compact-row--client
.flow-admin-compact-row__main strong {

    color:
        #182236;

    font-size:
        13px;

    font-weight:
        800;
}


.flow-portal--platform-admin
.flow-admin-compact-row--client
.flow-admin-compact-row__meta {

    margin-top:
        4px;

    color:
        #718096;

    font-size:
        9.5px;
}


.flow-portal--platform-admin
.flow-admin-compact-row--client
.flow-admin-compact-row__status {

    max-width:
        75px;

    min-height:
        22px;

    padding:
        4px 7px;

    font-size:
        8px;
}


/* ----------------------------------------------------------
   ACTIONS RAPIDES AFFILIE
   ---------------------------------------------------------- */

.flow-portal:not(.flow-portal--platform-admin):not(.flow-client-portal)
.flow-smart-actions {

    padding:
        18px;
}


.flow-portal:not(.flow-portal--platform-admin):not(.flow-client-portal)
.flow-smart-actions__grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:
        8px;
}


.flow-portal:not(.flow-portal--platform-admin):not(.flow-client-portal)
.flow-smart-action {

    min-height:
        58px;

    padding:
        9px 10px;

    display:
        grid;

    grid-template-columns:
        34px
        minmax(0, 1fr)
        14px;

    align-items:
        center;

    gap:
        9px;

    border:
        1px solid rgba(30, 41, 59, .075);

    border-radius:
        11px;

    background:
        #ffffff;

    box-shadow:
        0 3px 9px rgba(15, 23, 42, .035);

    transition:
        transform .16s ease,
        border-color .16s ease,
        box-shadow .16s ease;
}


.flow-portal:not(.flow-portal--platform-admin):not(.flow-client-portal)
.flow-smart-action:hover {

    transform:
        translateY(-1px);

    border-color:
        rgba(34, 197, 94, .20);

    box-shadow:
        0 7px 16px rgba(15, 23, 42, .06);
}


.flow-portal:not(.flow-portal--platform-admin):not(.flow-client-portal)
.flow-smart-action__icon {

    width:
        34px;

    height:
        34px;

    border-radius:
        10px;

    background:
        rgba(34, 197, 94, .09);

    color:
        #15803d;

    font-size:
        15px;
}


.flow-portal:not(.flow-portal--platform-admin):not(.flow-client-portal)
.flow-smart-action strong {

    color:
        #182236;

    font-size:
        11px;

    line-height:
        1.2;
}


.flow-portal:not(.flow-portal--platform-admin):not(.flow-client-portal)
.flow-smart-action small {

    margin-top:
        2px;

    color:
        #8591a6;

    font-size:
        8.5px;

    line-height:
        1.25;
}


/* ----------------------------------------------------------
   ADMIN — TUILES ACCES RAPIDE
   ---------------------------------------------------------- */

.flow-portal--platform-admin
.flow-admin-app-tile {

    border:
        1px solid rgba(30, 41, 59, .075);

    background:
        linear-gradient(
            150deg,
            #ffffff,
            #fbfcfe
        );

    box-shadow:
        0 5px 15px rgba(15, 23, 42, .045);
}


.flow-portal--platform-admin
.flow-admin-app-tile__icon {

    background:
        rgba(34, 197, 94, .09);

    color:
        #15803d;
}


/* ----------------------------------------------------------
   TABLETTE
   ---------------------------------------------------------- */

@media (max-width: 1100px) {

    .flow-portal:not(.flow-portal--platform-admin):not(.flow-client-portal)
    .flow-client-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }
}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width: 760px) {

    .flow-portal:not(.flow-portal--platform-admin):not(.flow-client-portal)
    .flow-client-portfolio {

        margin:
            14px 0;

        padding:
            13px;

        border-radius:
            17px;
    }


    .flow-portal:not(.flow-portal--platform-admin):not(.flow-client-portal)
    .flow-client-grid {

        grid-template-columns:
            1fr;

        gap:
            9px;
    }


    .flow-portal:not(.flow-portal--platform-admin):not(.flow-client-portal)
    .flow-client-card {

        padding:
            14px;

        border-radius:
            15px;
    }


    .flow-portal:not(.flow-portal--platform-admin):not(.flow-client-portal)
    .flow-client-card
    > div:first-child::before {

        width:
            34px;

        height:
            34px;

        margin-bottom:
            9px;

        border-radius:
            10px;
    }


    .flow-portal:not(.flow-portal--platform-admin):not(.flow-client-portal)
    .flow-client-card h4 {

        margin:
            6px 0 9px;

        padding-right:
            58px;

        font-size:
            14px;
    }


    .flow-portal:not(.flow-portal--platform-admin):not(.flow-client-portal)
    .flow-client-card dl div {

        padding:
            6px 0;
    }


    .flow-portal:not(.flow-portal--platform-admin):not(.flow-client-portal)
    .flow-client-card__actions {

        gap:
            6px;

        margin-top:
            10px;
    }


    .flow-portal:not(.flow-portal--platform-admin):not(.flow-client-portal)
    .flow-client-card__actions
    .flow-button {

        min-height:
            40px;
    }


    /* Liste admin tactile sans devenir énorme */

    .flow-portal--platform-admin
    .flow-admin-compact-row--client {

        min-height:
            58px;

        padding:
            9px;

        grid-template-columns:
            34px
            minmax(0, 1fr)
            auto
            14px;

        gap:
            8px;

        border-radius:
            12px;
    }


    .flow-portal--platform-admin
    .flow-admin-compact-row--client
    .flow-admin-compact-row__icon {

        width:
            34px;

        height:
            34px;

        border-radius:
            10px;
    }


    /* Actions affilié : restent en 2 colonnes,
       donc aspect application */

    .flow-portal:not(.flow-portal--platform-admin):not(.flow-client-portal)
    .flow-smart-actions__grid {

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap:
            7px;
    }


    .flow-portal:not(.flow-portal--platform-admin):not(.flow-client-portal)
    .flow-smart-action {

        min-height:
            82px;

        padding:
            10px;

        display:
            flex;

        flex-direction:
            column;

        align-items:
            flex-start;

        justify-content:
            flex-start;

        gap:
            7px;

        border-radius:
            13px;
    }


    .flow-portal:not(.flow-portal--platform-admin):not(.flow-client-portal)
    .flow-smart-action
    > span:last-child {

        display:
            none;
    }


    .flow-portal:not(.flow-portal--platform-admin):not(.flow-client-portal)
    .flow-smart-action__icon {

        width:
            32px;

        height:
            32px;
    }
}


/* ----------------------------------------------------------
   PETITS MOBILES
   ---------------------------------------------------------- */

@media (max-width: 390px) {

    .flow-portal:not(.flow-portal--platform-admin):not(.flow-client-portal)
    .flow-client-card__actions {

        grid-template-columns:
            1fr;
    }


    .flow-portal:not(.flow-portal--platform-admin):not(.flow-client-portal)
    .flow-smart-actions__grid {

        grid-template-columns:
            1fr 1fr;
    }
}


/* ==========================================================================
   QUALISECU — CLIENTS + ACTIONS UX V13 END
   ========================================================================== */


/* ==========================================================================
   QUALISECU — NETWORK + WATCH + ALERTS UX V14
   Réseau affilié + ressources + réseau admin + veille + alertes
   Desktop / Tablette / Mobile
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. PANNEAUX RESEAU AFFILIE
   -------------------------------------------------------------------------- */

.flow-portal:not(.flow-portal--platform-admin):not(.flow-client-portal)
.flow-network-feed,

.flow-portal:not(.flow-portal--platform-admin):not(.flow-client-portal)
.flow-network-resources {

    margin:
        20px 0;

    padding:
        22px;

    overflow:
        hidden;

    border:
        1px solid
        var(
            --flow-ds-border,
            rgba(31, 41, 55, .08)
        );

    border-radius:
        var(
            --flow-ds-radius-xl,
            24px
        );

    background:
        #ffffff;

    box-shadow:
        var(
            --flow-ds-shadow,
            0 10px 32px rgba(15, 23, 42, .07)
        );
}


/* Plus de grosse décoration violette */
.flow-portal:not(.flow-portal--platform-admin):not(.flow-client-portal)
.flow-network-feed::before {

    display:
        none;
}


/* Headers */
.flow-portal:not(.flow-portal--platform-admin):not(.flow-client-portal)
.flow-network-feed__header,

.flow-portal:not(.flow-portal--platform-admin):not(.flow-client-portal)
.flow-network-resources__header {

    margin-bottom:
        16px;

    padding-bottom:
        15px;

    border-bottom:
        1px solid
        rgba(31, 41, 55, .07);
}


.flow-portal:not(.flow-portal--platform-admin):not(.flow-client-portal)
.flow-network-feed__header h2,

.flow-portal:not(.flow-portal--platform-admin):not(.flow-client-portal)
.flow-network-resources__header h2 {

    margin:
        3px 0 5px;

    color:
        #1e293b;

    font-size:
        clamp(
            21px,
            2vw,
            27px
        );

    line-height:
        1.18;

    letter-spacing:
        -.025em;
}


.flow-portal:not(.flow-portal--platform-admin):not(.flow-client-portal)
.flow-network-feed__header p,

.flow-portal:not(.flow-portal--platform-admin):not(.flow-client-portal)
.flow-network-resources__header p {

    max-width:
        720px;

    color:
        #64748b;

    font-size:
        12.5px;

    line-height:
        1.5;
}


/* Compteur nouveautés */
.flow-network-feed__unread-count {

    min-height:
        28px;

    padding:
        4px 10px;

    background:
        rgba(34, 197, 94, .09);

    color:
        #15803d;

    font-size:
        10px;

    font-weight:
        800;

    text-transform:
        uppercase;
}


/* --------------------------------------------------------------------------
   2. ANNONCES RESEAU AFFILIE
   -------------------------------------------------------------------------- */

.flow-network-feed__list {

    gap:
        9px;
}


.flow-network-feed-card {

    grid-template-columns:
        4px minmax(0, 1fr);

    border:
        1px solid
        rgba(31, 41, 55, .08);

    border-radius:
        15px;

    background:
        #ffffff;

    box-shadow:
        0 4px 13px
        rgba(15, 23, 42, .035);
}


.flow-network-feed-card:hover {

    transform:
        translateY(-1px);

    border-color:
        rgba(34, 197, 94, .20);

    box-shadow:
        0 9px 22px
        rgba(15, 23, 42, .065);
}


.flow-network-feed-card.is-read {

    background:
        #fafbfc;

    opacity:
        .88;
}


.flow-network-feed-card__body {

    padding:
        14px 16px;
}


.flow-network-feed-card__meta {

    gap:
        6px;

    margin-bottom:
        7px;
}


.flow-network-feed-card__level,
.flow-network-feed-card__new {

    min-height:
        22px;

    padding:
        3px 7px;

    font-size:
        9px;

    font-weight:
        800;
}


.flow-network-feed-card__new {

    background:
        rgba(34, 197, 94, .09);

    color:
        #15803d;
}


.flow-network-feed-card__date {

    font-size:
        10px;
}


.flow-network-feed-card h3 {

    margin:
        0 0 6px;

    color:
        #182236;

    font-size:
        15px;

    line-height:
        1.3;
}


.flow-network-feed-card__content {

    max-width:
        820px;

    color:
        #64748b;

    font-size:
        12px;

    line-height:
        1.55;
}


.flow-network-feed-card__actions {

    gap:
        9px;

    margin-top:
        11px;
}


.flow-network-feed-card__cta {

    min-height:
        34px;

    padding:
        6px 11px;

    border-radius:
        10px;

    font-size:
        11px;
}


.flow-network-feed-card__read,
.flow-network-feed-card__read-state {

    font-size:
        10.5px;
}


/* --------------------------------------------------------------------------
   3. BIBLIOTHEQUE RESEAU
   -------------------------------------------------------------------------- */

.flow-network-resources__search {

    min-height:
        40px;

    padding:
        0 12px;

    border:
        1px solid #dfe4ea;

    border-radius:
        11px;

    background:
        #fbfcfd;

    font-size:
        12px;
}


.flow-network-resources__filters {

    gap:
        6px;

    margin-bottom:
        15px;
}


.flow-network-resources__filters button {

    min-height:
        31px;

    padding:
        4px 10px;

    border-color:
        rgba(31, 41, 55, .09);

    background:
        #f8fafc;

    color:
        #64748b;

    font-size:
        10px;

    font-weight:
        750;
}


.flow-network-resources__filters button.is-active {

    border-color:
        rgba(34, 197, 94, .22);

    background:
        rgba(34, 197, 94, .08);

    color:
        #15803d;
}


.flow-network-resources__grid {

    gap:
        11px;
}


.flow-network-resource-card {

    min-height:
        0;

    padding:
        15px;

    border-color:
        rgba(31, 41, 55, .075);

    border-radius:
        15px;

    box-shadow:
        0 4px 14px
        rgba(15, 23, 42, .04);
}


.flow-network-resource-card__meta {

    margin-bottom:
        9px;

    color:
        #64748b;

    font-size:
        9px;
}


.flow-network-resource-card__featured {

    padding:
        3px 7px;

    background:
        rgba(34, 197, 94, .09);

    color:
        #15803d;
}


.flow-network-resource-card h3 {

    margin:
        0 0 7px;

    color:
        #182236;

    font-size:
        15px;

    line-height:
        1.3;
}


.flow-network-resource-card p {

    margin:
        0 0 13px;

    color:
        #64748b;

    font-size:
        11.5px;

    line-height:
        1.5;
}


.flow-network-resource-card
.flow-button {

    min-height:
        34px;

    padding:
        6px 11px;

    border-radius:
        10px;

    font-size:
        10.5px;
}


/* --------------------------------------------------------------------------
   4. APPLICATION RESEAU / VEILLE ADMIN
   -------------------------------------------------------------------------- */

.flow-admin-network-app {

    margin:
        18px 0 96px;

    padding:
        24px;

    border:
        1px solid
        var(
            --flow-ds-border,
            rgba(31, 41, 55, .08)
        );

    border-radius:
        var(
            --flow-ds-radius-xl,
            24px
        );

    background:
        #ffffff;

    box-shadow:
        var(
            --flow-ds-shadow,
            0 10px 32px rgba(15, 23, 42, .07)
        );
}


.flow-admin-network-app__header {

    margin-bottom:
        15px;

    padding-bottom:
        16px;

    border-bottom:
        1px solid
        rgba(31, 41, 55, .07);
}


.flow-admin-network-app__header h1 {

    margin:
        3px 0 5px;

    color:
        #1e293b;

    font-size:
        clamp(
            23px,
            3vw,
            31px
        );

    line-height:
        1.12;

    letter-spacing:
        -.03em;
}


.flow-admin-network-app__header p {

    font-size:
        12.5px;

    line-height:
        1.5;
}


.flow-admin-network-app__header button {

    min-height:
        38px;

    padding:
        0 12px;

    border-radius:
        10px;

    font-size:
        11px;
}


/* Tabs */
.flow-admin-network-tabs {

    gap:
        6px;

    margin:
        0 0 15px;
}


.flow-admin-network-tabs button {

    min-height:
        36px;

    padding:
        0 12px;

    border-radius:
        11px;

    background:
        #f8fafc;

    font-size:
        11px;
}


.flow-admin-network-tabs button.is-active {

    border-color:
        rgba(34, 197, 94, .20);

    background:
        rgba(34, 197, 94, .09);

    color:
        #15803d;
}


/* Grilles */
.flow-admin-network-list,
.flow-admin-watch-list {

    gap:
        10px;
}


.flow-admin-network-card,
.flow-admin-watch-card {

    position:
        relative;

    min-height:
        0;

    padding:
        15px;

    border:
        1px solid
        rgba(31, 41, 55, .075);

    border-radius:
        15px;

    box-shadow:
        0 4px 14px
        rgba(15, 23, 42, .04);

    transition:
        transform .16s ease,
        border-color .16s ease,
        box-shadow .16s ease;
}


.flow-admin-network-card:hover,
.flow-admin-watch-card:hover {

    transform:
        translateY(-1px);

    border-color:
        rgba(34, 197, 94, .18);

    box-shadow:
        0 9px 22px
        rgba(15, 23, 42, .065);
}


/* Niveau annonce */
.flow-admin-network-card[data-level="info"] {

    border-left:
        3px solid #3b82f6;
}


.flow-admin-network-card[data-level="important"] {

    border-left:
        3px solid #f59e0b;
}


.flow-admin-network-card[data-level="urgent"] {

    border-left:
        3px solid #ef4444;
}


.flow-admin-network-card__meta,
.flow-admin-watch-card__meta {

    gap:
        6px;

    margin-bottom:
        7px;

    font-size:
        9px;

    font-weight:
        750;
}


.flow-admin-network-card h3,
.flow-admin-watch-card h3 {

    margin:
        0 0 6px;

    font-size:
        15px;

    line-height:
        1.3;
}


.flow-admin-network-card p,
.flow-admin-watch-card p {

    margin:
        0 0 11px;

    color:
        #64748b;

    font-size:
        11.5px;

    line-height:
        1.5;
}


.flow-admin-network-card a,
.flow-admin-watch-card a {

    font-size:
        10.5px;
}


/* Veille */
.flow-admin-watch-card__actions {

    gap:
        8px;

    margin-top:
        12px;
}


.flow-admin-watch-card__actions button {

    min-height:
        34px;

    padding:
        0 10px;

    border-radius:
        9px;

    background:
        #15803d;

    font-size:
        10px;
}


.flow-admin-watch-card__sent {

    padding:
        5px 8px;

    border-radius:
        999px;

    background:
        rgba(34, 197, 94, .09);

    font-size:
        9.5px;
}


/* --------------------------------------------------------------------------
   5. CENTRE ALERTES ADMIN
   -------------------------------------------------------------------------- */

.flow-admin-alert-center {

    margin:
        18px 0 96px;

    padding:
        24px;

    border:
        1px solid
        var(
            --flow-ds-border,
            rgba(31, 41, 55, .08)
        );

    border-radius:
        var(
            --flow-ds-radius-xl,
            24px
        );

    background:
        #ffffff;

    box-shadow:
        var(
            --flow-ds-shadow,
            0 10px 32px rgba(15, 23, 42, .07)
        );
}


.flow-admin-view-header {

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        18px;

    margin-bottom:
        15px;

    padding-bottom:
        16px;

    border-bottom:
        1px solid
        rgba(31, 41, 55, .07);
}


.flow-admin-view-header h2 {

    margin:
        3px 0 5px;

    color:
        #1e293b;

    font-size:
        clamp(
            23px,
            3vw,
            31px
        );

    line-height:
        1.12;

    letter-spacing:
        -.03em;
}


.flow-admin-view-header p {

    max-width:
        690px;

    margin:
        0;

    color:
        #64748b;

    font-size:
        12.5px;

    line-height:
        1.5;
}


.flow-admin-alert-header-actions button,
.flow-admin-view-refresh,
.flow-admin-alert-read-all {

    min-height:
        38px;

    padding:
        0 12px;

    border:
        1px solid
        rgba(31, 41, 55, .09);

    border-radius:
        10px;

    background:
        #ffffff;

    color:
        #475569;

    font-size:
        10.5px;

    font-weight:
        750;

    cursor:
        pointer;
}


.flow-admin-view-refresh:hover,
.flow-admin-view-home:hover,
.flow-admin-alert-read-all:hover {

    border-color:
        rgba(34, 197, 94, .20);

    background:
        rgba(34, 197, 94, .055);

    color:
        #15803d;
}


/* Résumé */
.flow-admin-alert-summary {

    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 160px)
        );

    gap:
        9px;

    margin-bottom:
        14px;
}


.flow-admin-alert-summary article {

    padding:
        12px 13px;

    border:
        1px solid
        rgba(31, 41, 55, .075);

    border-radius:
        13px;

    background:
        #f9fafb;
}


.flow-admin-alert-summary span {

    display:
        block;

    margin-bottom:
        2px;

    color:
        #94a3b8;

    font-size:
        9px;

    font-weight:
        800;

    text-transform:
        uppercase;
}


.flow-admin-alert-summary strong {

    color:
        #182236;

    font-size:
        22px;

    line-height:
        1;
}


/* Toolbar */
.flow-admin-alert-toolbar {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;

    margin-bottom:
        13px;
}


.flow-admin-alert-filters {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        6px;
}


.flow-admin-alert-filters button {

    min-height:
        32px;

    padding:
        0 10px;

    border:
        1px solid
        rgba(31, 41, 55, .09);

    border-radius:
        999px;

    background:
        #f8fafc;

    color:
        #64748b;

    font-size:
        9.5px;

    font-weight:
        750;

    cursor:
        pointer;
}


.flow-admin-alert-filters button.is-active {

    border-color:
        rgba(34, 197, 94, .20);

    background:
        rgba(34, 197, 94, .09);

    color:
        #15803d;
}


/* Liste alertes */
.flow-admin-alert-list {

    display:
        grid;

    gap:
        7px;
}


.flow-admin-alert-card {

    display:
        grid;

    grid-template-columns:
        34px
        minmax(0, 1fr)
        30px;

    gap:
        10px;

    align-items:
        center;

    min-width:
        0;

    padding:
        11px 12px;

    border:
        1px solid
        rgba(31, 41, 55, .075);

    border-radius:
        13px;

    background:
        #ffffff;

    transition:
        border-color .16s ease,
        box-shadow .16s ease;
}


.flow-admin-alert-card.is-unread {

    border-color:
        rgba(34, 197, 94, .16);

    background:
        rgba(34, 197, 94, .025);
}


.flow-admin-alert-card:hover {

    border-color:
        rgba(34, 197, 94, .20);

    box-shadow:
        0 6px 16px
        rgba(15, 23, 42, .045);
}


.flow-admin-alert-card__icon {

    width:
        34px;

    height:
        34px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        10px;

    background:
        rgba(34, 197, 94, .08);

    color:
        #15803d;

    font-size:
        13px;

    font-weight:
        850;
}


.flow-admin-alert-card__content {

    min-width:
        0;
}


.flow-admin-alert-card__meta {

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    margin-bottom:
        3px;

    color:
        #94a3b8;

    font-size:
        8.5px;

    font-weight:
        750;

    text-transform:
        uppercase;
}


.flow-admin-alert-card__meta time {

    margin-left:
        auto;

    white-space:
        nowrap;
}


.flow-admin-alert-card__content > strong {

    display:
        block;

    margin-bottom:
        2px;

    color:
        #182236;

    font-size:
        12.5px;

    line-height:
        1.35;
}


.flow-admin-alert-card__content p {

    margin:
        0;

    overflow:
        hidden;

    color:
        #64748b;

    font-size:
        10.5px;

    line-height:
        1.4;

    display:
        -webkit-box;

    -webkit-box-orient:
        vertical;

    -webkit-line-clamp:
        2;
}


.flow-admin-alert-card__state {

    appearance:
        none;

    width:
        30px;

    height:
        30px;

    display:
        grid;

    place-items:
        center;

    border:
        0;

    border-radius:
        50%;

    background:
        transparent;

    color:
        #94a3b8;

    font-size:
        15px;

    cursor:
        pointer;
}


.flow-admin-alert-card.is-unread
.flow-admin-alert-card__state {

    color:
        #16a34a;
}


.flow-admin-alert-card__state:hover {

    background:
        #f1f5f9;
}


.flow-admin-alert-loading,
.flow-admin-alert-error,
.flow-admin-alert-empty {

    min-height:
        150px;

    padding:
        24px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        6px;

    border:
        1px dashed #cbd5e1;

    border-radius:
        15px;

    background:
        #fafbfc;

    color:
        #64748b;

    text-align:
        center;
}


/* --------------------------------------------------------------------------
   6. DESKTOP LARGE
   -------------------------------------------------------------------------- */

@media (min-width: 1180px) {

    .flow-network-resources__grid {

        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }


    .flow-admin-network-list,
    .flow-admin-watch-list {

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }
}


/* --------------------------------------------------------------------------
   7. TABLETTE
   -------------------------------------------------------------------------- */

@media (min-width: 761px) and (max-width: 1179px) {

    .flow-network-resources__grid {

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    .flow-admin-network-list,
    .flow-admin-watch-list {

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    .flow-admin-network-app,
    .flow-admin-alert-center {

        padding:
            19px;
    }
}


/* --------------------------------------------------------------------------
   8. MOBILE
   -------------------------------------------------------------------------- */

@media (max-width: 760px) {

    .flow-portal:not(.flow-portal--platform-admin):not(.flow-client-portal)
    .flow-network-feed,

    .flow-portal:not(.flow-portal--platform-admin):not(.flow-client-portal)
    .flow-network-resources {

        margin:
            14px 8px 18px;

        padding:
            15px 13px;

        border-radius:
            18px;
    }


    .flow-network-feed__header,
    .flow-network-resources__header {

        gap:
            10px;

        margin-bottom:
            12px;

        padding-bottom:
            12px;
    }


    .flow-network-feed-card__body {

        padding:
            12px;
    }


    .flow-network-feed-card__date {

        width:
            auto;

        margin-left:
            0;
    }


    .flow-network-feed-card__actions {

        align-items:
            flex-start;

        flex-direction:
            row;
    }


    .flow-network-feed-card__cta {

        width:
            auto;
    }


    .flow-network-resources__grid,
    .flow-admin-network-list,
    .flow-admin-watch-list {

        grid-template-columns:
            1fr;
    }


    .flow-network-resource-card {

        padding:
            13px;
    }


    .flow-admin-network-app,
    .flow-admin-alert-center {

        margin:
            10px 8px 90px;

        padding:
            14px 12px;

        border-radius:
            18px;
    }


    .flow-admin-network-app__header,
    .flow-admin-view-header {

        display:
            block;

        margin-bottom:
            12px;

        padding-bottom:
            12px;
    }


    .flow-admin-network-app__header h1,
    .flow-admin-view-header h2 {

        font-size:
            21px;
    }


    .flow-admin-network-app__header button {

        width:
            100%;

        margin-top:
            10px;
    }


    .flow-admin-network-tabs {

        margin-bottom:
            12px;
    }


    .flow-admin-network-tabs button {

        min-height:
            34px;

        padding:
            0 10px;

        font-size:
            10px;
    }


    .flow-admin-network-card,
    .flow-admin-watch-card {

        padding:
            12px;

        border-radius:
            13px;
    }


    .flow-admin-watch-card__actions {

        align-items:
            stretch;

        flex-direction:
            column;
    }


    .flow-admin-watch-card__actions button {

        width:
            100%;
    }


    .flow-admin-alert-header-actions {

        display:
            grid;

        grid-template-columns:
            1fr 1fr;

        width:
            100%;

        margin-top:
            10px;
    }


    .flow-admin-alert-summary {

        grid-template-columns:
            1fr 1fr;
    }


    .flow-admin-alert-toolbar {

        align-items:
            stretch;

        flex-direction:
            column;
    }


    .flow-admin-alert-filters {

        overflow-x:
            auto;

        flex-wrap:
            nowrap;

        padding-bottom:
            2px;

        scrollbar-width:
            none;
    }


    .flow-admin-alert-filters::-webkit-scrollbar {

        display:
            none;
    }


    .flow-admin-alert-filters button {

        flex:
            0 0 auto;
    }


    .flow-admin-alert-read-all {

        width:
            100%;
    }


    .flow-admin-alert-card {

        grid-template-columns:
            32px
            minmax(0, 1fr)
            28px;

        gap:
            8px;

        padding:
            10px;
    }


    .flow-admin-alert-card__icon {

        width:
            32px;

        height:
            32px;
    }


    .flow-admin-alert-card__meta {

        flex-wrap:
            wrap;
    }


    .flow-admin-alert-card__meta time {

        width:
            100%;

        margin-left:
            0;
    }
}


/* --------------------------------------------------------------------------
   9. PETITS MOBILES
   -------------------------------------------------------------------------- */

@media (max-width: 390px) {

    .flow-network-feed-card__actions {

        align-items:
            stretch;

        flex-direction:
            column;
    }


    .flow-network-feed-card__cta {

        justify-content:
            center;

        width:
            100%;
    }


    .flow-admin-alert-card__content p {

        -webkit-line-clamp:
            1;
    }
}


/* ==========================================================================
   QUALISECU — NETWORK + WATCH + ALERTS UX V14 END
   ========================================================================== */


/* =========================================================
   QUALISECU — PARTENAIRES FRONT UX V15C2
   ========================================================= */

.flow-partner-view {
    display: grid;
    gap: 18px;
}

.flow-partner-view__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.flow-partner-archive-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 650;
    color: var(--flow-text-muted, #667085);
}

.flow-partner-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.flow-partner-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 17px;
    border: 1px solid rgba(26, 80, 65, .12);
    border-radius: 18px;
    background: #fff;
    box-shadow:
        0 1px 2px rgba(16, 24, 40, .04),
        0 8px 24px rgba(16, 24, 40, .06);
}

.flow-partner-card.is-archived {
    opacity: .68;
    background: #f8f9f9;
}

.flow-partner-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.flow-partner-card__icon {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 12px;
    background: rgba(25, 92, 72, .09);
    color: #195c48;
    font-size: 19px;
    font-weight: 800;
}

.flow-partner-card__status {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 4px 9px;
    border-radius: 999px;
    background: #ecfdf3;
    color: #067647;
    font-size: 11px;
    font-weight: 750;
}

.flow-partner-card__status[data-status="archived"] {
    background: #f2f4f7;
    color: #667085;
}

.flow-partner-card__body {
    min-width: 0;
}

.flow-partner-card__body > small {
    display: block;
    margin-bottom: 5px;
    color: #667085;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.flow-partner-card__body h3 {
    margin: 0 0 14px;
    color: #183c31;
    font-size: 17px;
    line-height: 1.25;
}

.flow-partner-card__body dl {
    display: grid;
    gap: 6px;
    margin: 0;
}

.flow-partner-card__body dl > div {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 8px;
    min-width: 0;
}

.flow-partner-card__body dt {
    color: #98a2b3;
    font-size: 11px;
    font-weight: 650;
}

.flow-partner-card__body dd {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
    color: #344054;
    font-size: 12px;
    font-weight: 600;
}

.flow-partner-card__metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 15px;
    padding-top: 13px;
    border-top: 1px solid #eaecf0;
}

.flow-partner-card__metrics > div {
    padding: 9px;
    border-radius: 11px;
    background: #f7faf9;
}

.flow-partner-card__metrics span {
    display: block;
    margin-bottom: 3px;
    color: #667085;
    font-size: 10px;
    font-weight: 650;
}

.flow-partner-card__metrics strong {
    display: block;
    color: #195c48;
    font-size: 14px;
}

.flow-partner-card__footer {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: auto;
    padding-top: 15px;
}

.flow-partner-card__footer .flow-button {
    justify-content: center;
    min-height: 38px;
    padding: 7px 10px;
    font-size: 12px;
}

.flow-partner-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.flow-partner-form-grid label {
    display: grid;
    gap: 6px;
}

.flow-partner-form-grid label > span {
    color: #344054;
    font-size: 12px;
    font-weight: 700;
}

.flow-partner-form-grid__wide {
    grid-column: 1 / -1;
}

.flow-partner-form-grid input,
.flow-partner-form-grid select,
.flow-partner-form-grid textarea {
    width: 100%;
    min-height: 42px;
    box-sizing: border-box;
    padding: 9px 11px;
    border: 1px solid #d0d5dd;
    border-radius: 10px;
    background: #fff;
    color: #101828;
    font: inherit;
}

.flow-partner-form-grid textarea {
    min-height: 110px;
    resize: vertical;
}

.flow-partner-form-grid input:focus,
.flow-partner-form-grid select:focus,
.flow-partner-form-grid textarea:focus {
    outline: 2px solid rgba(25, 92, 72, .16);
    outline-offset: 1px;
    border-color: #195c48;
}

.flow-partner-form-error {
    margin-top: 14px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #fef3f2;
    color: #b42318;
    font-size: 12px;
    font-weight: 650;
}

@media (max-width: 1120px) {
    .flow-partner-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .flow-partner-grid {
        grid-template-columns: 1fr;
    }

    .flow-partner-view__actions {
        align-items: stretch;
    }

    .flow-partner-view__actions
    .flow-button {
        width: 100%;
        justify-content: center;
    }

    .flow-partner-form-grid {
        grid-template-columns: 1fr;
    }

    .flow-partner-form-grid__wide {
        grid-column: auto;
    }

    .flow-partner-card {
        padding: 14px;
        border-radius: 16px;
    }
}

@media (max-width: 390px) {
    .flow-partner-card__footer {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   QUALISECU — PARTENAIRES FRONT UX V15C2 END
   ========================================================= */

/* ==========================================================
   QUALISECU — PARTNER REPORTING V15D3
   ========================================================== */

.flow-partner-report {
    margin-bottom: 24px;
    padding: 24px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06);
}

.flow-partner-report__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 20px;
}

.flow-partner-report__header h2 {
    margin: 4px 0 6px;
}

.flow-partner-report__header p {
    margin: 0;
    color: #64748b;
}

.flow-partner-report__period {
    display: grid;
    gap: 6px;
    min-width: 180px;
}

.flow-partner-report__period span {
    font-size: 0.76rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #64748b;
}

.flow-partner-report__period input {
    width: 100%;
    min-height: 42px;
    padding: 8px 12px;
    border: 1px solid #dbe2ea;
    border-radius: 12px;
    background: #fff;
}

.flow-partner-report__kpis {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

.flow-partner-report__kpis article {
    min-width: 0;
    padding: 16px;
    border: 1px solid #edf1f5;
    border-radius: 16px;
    background: #f8fafc;
}

.flow-partner-report__kpis span {
    display: block;
    margin-bottom: 8px;
    font-size: 0.74rem;
    font-weight: 800;
    line-height: 1.25;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
}

.flow-partner-report__kpis strong {
    display: block;
    font-size: 1.2rem;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.flow-partner-card__metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.flow-partner-card__commissions {
    display: grid;
    gap: 10px;
    padding: 14px 16px;
    border-top: 1px solid #edf1f5;
}

.flow-partner-commission {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px;
    border-radius: 14px;
    background: #f8fafc;
}

.flow-partner-commission > div {
    display: grid;
    gap: 3px;
}

.flow-partner-commission span,
.flow-partner-commission small {
    color: #64748b;
}

@media (max-width: 1100px) {
    .flow-partner-report__kpis {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .flow-partner-report {
        padding: 18px;
        border-radius: 18px;
    }

    .flow-partner-report__header {
        align-items: stretch;
        flex-direction: column;
        gap: 16px;
    }

    .flow-partner-report__period {
        width: 100%;
        min-width: 0;
    }

    .flow-partner-report__kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .flow-partner-card__metrics {
        grid-template-columns: 1fr;
    }

    .flow-partner-commission {
        align-items: stretch;
        flex-direction: column;
    }

    .flow-partner-commission .flow-button {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .flow-partner-report__kpis {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================
   QUALISECU — PARTNER REPORTING V15D3 END
   ========================================================== */

/* ==========================================================
   QUALISECU — PARTNER REPORT FILTER V15D4
   ========================================================== */

.flow-partner-report__filters {
    display: flex;
    align-items: flex-end;
    gap: 12px;
}

.flow-partner-report__filters
.flow-partner-report__period {
    min-width: 180px;
}

.flow-partner-report__filters
.flow-partner-report__period:last-child {
    min-width: 240px;
}

.flow-partner-report__period select {
    width: 100%;
    min-height: 42px;
    padding: 8px 36px 8px 12px;
    border: 1px solid #dbe2ea;
    border-radius: 12px;
    background: #fff;
}

.flow-partner-report__monthly-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    margin-top: 16px;
    padding: 14px 16px;

    border-radius: 14px;
    background: #f1f5f9;
}

.flow-partner-report__monthly-total span {
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
}

.flow-partner-report__monthly-total strong {
    flex: 0 0 auto;
    font-size: 1.2rem;
    color: #0f172a;
}

@media (max-width: 900px) {
    .flow-partner-report__filters {
        width: 100%;
        display: grid;
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .flow-partner-report__filters
    .flow-partner-report__period,
    .flow-partner-report__filters
    .flow-partner-report__period:last-child {
        min-width: 0;
    }
}

@media (max-width: 600px) {
    .flow-partner-report__filters {
        grid-template-columns: 1fr;
    }

    .flow-partner-report__monthly-total {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }
}

/* ==========================================================
   QUALISECU — PARTNER REPORT FILTER V15D4 END
   ========================================================== */

/* ==========================================================
   QUALISECU — PARTNER REPORT DETAIL V15D6
   ========================================================== */

.flow-partner-report__monthly-total-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.flow-partner-report-dialog {
    width: min(1180px, calc(100vw - 32px));
    max-height: min(88vh, 900px);
}

.flow-partner-report-dialog__body {
    padding: 20px 24px;
    overflow: auto;
}

.flow-partner-report-table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid #e4e9ef;
    border-radius: 16px;
}

.flow-partner-report-table {
    width: 100%;
    min-width: 980px;
    border-collapse: collapse;
    background: #fff;
}

.flow-partner-report-table th,
.flow-partner-report-table td {
    padding: 12px 14px;
    border-bottom: 1px solid #edf1f5;
    text-align: left;
    vertical-align: top;
    white-space: nowrap;
}

.flow-partner-report-table th {
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
    background: #f8fafc;
}

.flow-partner-report-table td {
    font-size: 0.86rem;
    color: #334155;
}

.flow-partner-report-table td:nth-child(2),
.flow-partner-report-table td:nth-child(3),
.flow-partner-report-table td:nth-child(4) {
    white-space: normal;
    min-width: 160px;
}

.flow-partner-report-table td small {
    display: block;
    margin-top: 3px;
    color: #64748b;
}

.flow-partner-report-table tfoot th {
    color: #172033;
    background: #f1f5f9;
    border-bottom: 0;
}

@media (max-width: 700px) {
    .flow-partner-report__monthly-total-actions {
        width: 100%;
        align-items: stretch;
        flex-direction: column;
    }

    .flow-partner-report__monthly-total-actions
    .flow-button {
        width: 100%;
    }

    .flow-partner-report-dialog {
        width: calc(100vw - 16px);
    }

    .flow-partner-report-dialog__body {
        padding: 14px;
    }
}

/* ==========================================================
   QUALISECU — PARTNER REPORT DETAIL V15D6 END
   ========================================================== */

/* ==========================================================
   QUALISECU — TASK CORRECTIVE INTERVENTION V15E4B
   ========================================================== */

.flow-task-corrective-box {
    margin-top: 8px;
    padding: 18px;
    border: 1px solid #dfe6ee;
    border-radius: 16px;
    background: #f8fafc;
}

.flow-task-corrective-box__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.flow-task-corrective-box__header strong {
    display: block;
    margin-bottom: 4px;
    color: #172033;
    font-size: 0.95rem;
}

.flow-task-corrective-box__header small {
    display: block;
    color: #64748b;
    line-height: 1.45;
}

.flow-task-card__corrective {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px;
    margin: 10px 0 4px;
    padding: 8px 10px;
    border: 1px solid #d9e3ea;
    border-radius: 10px;
    background: #f8fafc;
}

.flow-task-card__corrective > span {
    font-size: 0.8rem;
    line-height: 1;
}

.flow-task-card__corrective strong {
    min-width: 0;
    overflow: hidden;
    color: #334155;
    font-size: 0.76rem;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.flow-task-card__corrective small {
    color: #64748b;
    font-size: 0.68rem;
    white-space: nowrap;
}

.flow-task-corrective-contact {
    padding: 14px 16px;
    border: 1px solid #dfe6ee;
    border-radius: 12px;
    background: #fff;
}

.flow-task-corrective-contact > strong {
    display: block;
    margin-bottom: 10px;
    color: #172033;
    font-size: 0.8rem;
}

.flow-task-corrective-contact__grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 10px 18px;
}

.flow-task-corrective-contact__grid span {
    min-width: 0;
}

.flow-task-corrective-contact__grid small {
    display: block;
    margin-bottom: 2px;
    color: #64748b;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.flow-task-corrective-contact__grid b {
    display: block;
    overflow-wrap: anywhere;
    color: #334155;
    font-size: 0.82rem;
}

@media (max-width: 700px) {
    .flow-task-corrective-box {
        padding: 14px;
    }

    .flow-task-corrective-contact__grid {
        grid-template-columns: 1fr;
    }

    .flow-task-card__corrective {
        grid-template-columns:
            auto minmax(0, 1fr);
    }

    .flow-task-card__corrective small {
        grid-column: 2;
    }
}

/* ==========================================================
   QUALISECU — TASK CORRECTIVE INTERVENTION V15E4B END
   ========================================================== */


/* ==========================================================================
   V15H-4F — PERFORMANCE ECONOMIQUE PORTAIL AFFILIE
   ========================================================================== */

.flow-portal .flow-affiliate-economic {
    margin:
        0 0 24px;

    padding:
        22px;

    border:
        1px solid var(--flow-ds-border);

    border-radius:
        var(--flow-ds-radius-xl);

    background:
        var(--flow-ds-surface-soft);

    box-shadow:
        var(--flow-ds-shadow-soft);
}

.flow-portal .flow-affiliate-economic__header {
    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        24px;

    margin-bottom:
        18px;
}

.flow-portal .flow-affiliate-economic__header h3 {
    margin:
        3px 0 6px;

    color:
        #1e293b;

    font-size:
        20px;

    line-height:
        1.2;

    letter-spacing:
        -0.02em;
}

.flow-portal .flow-affiliate-economic__header p {
    max-width:
        680px;

    margin:
        0;

    color:
        #64748b;

    font-size:
        13px;

    line-height:
        1.55;
}

.flow-portal .flow-affiliate-economic__margin {
    display:
        grid;

    min-width:
        180px;

    gap:
        4px;

    padding:
        14px 16px;

    border:
        1px solid rgba(34, 197, 94, 0.18);

    border-radius:
        var(--flow-ds-radius-lg);

    background:
        rgba(240, 253, 244, 0.72);

    text-align:
        right;
}

.flow-portal .flow-affiliate-economic__margin span {
    color:
        #64748b;

    font-size:
        10px;

    font-weight:
        750;

    text-transform:
        uppercase;
}

.flow-portal .flow-affiliate-economic__margin strong {
    color:
        #166534;

    font-size:
        22px;

    letter-spacing:
        -0.03em;
}

.flow-portal .flow-affiliate-economic__margin small {
    color:
        #15803d;

    font-size:
        12px;

    font-weight:
        750;
}

.flow-portal .flow-affiliate-economic__grid {
    display:
        grid;

    grid-template-columns:
        repeat(5, minmax(0, 1fr));

    gap:
        10px;
}

.flow-portal .flow-affiliate-economic__metric {
    min-width:
        0;

    padding:
        15px;

    border:
        1px solid rgba(31, 41, 55, 0.08);

    border-radius:
        var(--flow-ds-radius-lg);

    background:
        var(--flow-ds-surface);
}

.flow-portal .flow-affiliate-economic__metric span {
    display:
        block;

    margin-bottom:
        7px;

    color:
        #64748b;

    font-size:
        10px;

    font-weight:
        750;
}

.flow-portal .flow-affiliate-economic__metric strong {
    display:
        block;

    color:
        #0f172a;

    font-size:
        20px;

    line-height:
        1.1;

    letter-spacing:
        -0.03em;
}

.flow-portal .flow-affiliate-economic__metric small {
    display:
        block;

    margin-top:
        7px;

    color:
        #94a3b8;

    font-size:
        10px;

    line-height:
        1.4;
}

.flow-portal .flow-affiliate-economic__cycle {
    margin-top:
        14px;

    padding:
        16px;

    border:
        1px solid rgba(31, 41, 55, 0.07);

    border-radius:
        var(--flow-ds-radius-lg);

    background:
        #fff;
}

.flow-portal .flow-affiliate-economic__cycle-header {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    margin-bottom:
        13px;
}

.flow-portal .flow-affiliate-economic__cycle-header
> div {
    display:
        grid;

    gap:
        2px;
}

.flow-portal .flow-affiliate-economic__cycle-header
> div > strong {
    color:
        #334155;

    font-size:
        13px;
}

.flow-portal .flow-affiliate-economic__cycle-header
span {
    color:
        #94a3b8;

    font-size:
        10px;
}

.flow-portal .flow-affiliate-economic__cycle-header
> strong {
    color:
        #0f172a;

    font-size:
        17px;
}

.flow-portal .flow-affiliate-economic__cycle-grid {
    display:
        grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap:
        8px;
}

.flow-portal .flow-affiliate-economic__stage {
    display:
        grid;

    gap:
        5px;

    padding:
        11px 12px;

    border:
        1px solid #e5e9ef;

    border-radius:
        12px;

    background:
        #f8fafc;
}

.flow-portal .flow-affiliate-economic__stage span {
    color:
        #64748b;

    font-size:
        10px;

    font-weight:
        700;
}

.flow-portal .flow-affiliate-economic__stage strong {
    color:
        #334155;

    font-size:
        15px;
}

.flow-portal
.flow-affiliate-economic__stage[data-status="collected"] {
    border-color:
        rgba(34, 197, 94, 0.18);

    background:
        #f0fdf4;
}

.flow-portal
.flow-affiliate-economic__stage[data-status="collected"]
strong {
    color:
        #166534;
}

@media (max-width: 1200px) {

    .flow-portal .flow-affiliate-economic__grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 850px) {

    .flow-portal .flow-affiliate-economic__header {
        flex-direction:
            column;
    }

    .flow-portal .flow-affiliate-economic__margin {
        width:
            100%;

        box-sizing:
            border-box;

        text-align:
            left;
    }

    .flow-portal .flow-affiliate-economic__grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .flow-portal .flow-affiliate-economic__cycle-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {

    .flow-portal .flow-affiliate-economic {
        padding:
            17px;
    }

    .flow-portal .flow-affiliate-economic__grid,
    .flow-portal .flow-affiliate-economic__cycle-grid {
        grid-template-columns:
            1fr;
    }
}

/* V15H-4F END */


/* ==========================================================================
   FLOW CORE — CRM PORTFOLIO V15J-1B2
   ========================================================================== */

.flow-client-portfolio__description {
  max-width: 620px;
  margin: 7px 0 0;
  color: var(--flow-muted, #73809c);
  font-size: 14px;
  line-height: 1.55;
}

.flow-crm-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
  padding: 13px;
  border: 1px solid #e5e8f1;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 9px 28px rgba(42, 51, 91, 0.05);
}

.flow-crm-filters {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.flow-crm-filter {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 13px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  color: #68738d;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease;
}

.flow-crm-filter span {
  display: inline-grid;
  min-width: 23px;
  height: 23px;
  place-items: center;
  padding: 0 6px;
  border-radius: 999px;
  background: #f0f2f7;
  color: #6b7489;
  font-size: 11px;
  font-weight: 800;
}

.flow-crm-filter:hover {
  border-color: #e1e3f1;
  background: #f8f8fc;
  color: #303a56;
}

.flow-crm-filter.is-active {
  border-color: #dad7ff;
  background: #f3f1ff;
  color: var(--flow-primary, #5046e5);
  box-shadow: inset 0 0 0 1px rgba(80, 70, 229, 0.03);
}

.flow-crm-filter.is-active span {
  background: #e5e1ff;
  color: var(--flow-primary, #5046e5);
}

.flow-crm-search {
  position: relative;
  display: block;
  width: min(390px, 100%);
}

.flow-crm-search__icon {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 14px;
  color: #8993a9;
  font-size: 18px;
  pointer-events: none;
  transform: translateY(-50%);
}

.flow-crm-search input {
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  padding: 10px 14px 10px 40px;
  border: 1px solid #e1e5ed;
  border-radius: 12px;
  outline: none;
  background: #fbfcfe;
  color: #27324d;
  font: inherit;
  font-size: 13px;
  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease;
}

.flow-crm-search input::placeholder {
  color: #9aa3b5;
}

.flow-crm-search input:focus {
  border-color: #bab5ff;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(80, 70, 229, 0.08);
}

/*
 * Le lifecycle commercial pilote désormais
 * l'identité visuelle des cartes.
 *
 * On neutralise volontairement les variations
 * historiques basées sur nth-child.
 */

.flow-client-card[data-lifecycle="prospect"]::before {
  background: linear-gradient(
    180deg,
    #f0ad4e,
    #ffd49a
  );
}

.flow-client-card[data-lifecycle="customer"]::before {
  background: linear-gradient(
    180deg,
    #37c994,
    #9ee9cf
  );
}

.flow-client-card[data-lifecycle="prospect"]
  > div:first-child::before {
  background: linear-gradient(
    145deg,
    #fff7e7,
    #ffedc9
  );
  color: #bd7315;
  content: "◎";
}

.flow-client-card[data-lifecycle="customer"]
  > div:first-child::before {
  background: linear-gradient(
    145deg,
    #e8faf3,
    #d8f7ea
  );
  color: #179668;
  content: "⌂";
}

.flow-client-card__status[data-lifecycle="prospect"] {
  background: #fff5df;
  color: #a96108;
}

.flow-client-card__status[data-lifecycle="customer"] {
  background: #e8faf2;
  color: #087b53;
}

.flow-crm-empty {
  grid-column: 1 / -1;
  min-height: 145px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
  text-align: center;
}

.flow-crm-empty:not([hidden]) {
  display: flex;
}

.flow-crm-empty strong {
  color: #34405b;
  font-size: 15px;
}

.flow-crm-empty span {
  max-width: 470px;
  color: #8992a6;
  font-size: 13px;
  line-height: 1.5;
}

.flow-client-card[hidden],
.flow-crm-empty[hidden] {
  display: none !important;
}

@media (max-width: 900px) {
  .flow-crm-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .flow-crm-search {
    width: 100%;
  }
}

@media (max-width: 520px) {
  .flow-crm-toolbar {
    padding: 10px;
    border-radius: 15px;
  }

  .flow-crm-filters {
    display: grid;
    grid-template-columns: repeat(
      3,
      minmax(0, 1fr)
    );
  }

  .flow-crm-filter {
    padding-right: 8px;
    padding-left: 8px;
    font-size: 12px;
  }
}


/* ==========================================================================
   FLOW CORE — V15J-1B3
   KPI PROSPECTS + NAVIGATION CRM
   ========================================================================== */

/*
 * Le dashboard passe de 4 à 5 indicateurs.
 *
 * On conserve cinq colonnes uniquement lorsque
 * l'espace disponible permet une vraie lecture.
 */
.flow-smart-kpis {
  grid-template-columns:
    repeat(5, minmax(0, 1fr));
}

.flow-smart-kpi[data-tone="orange"]
  .flow-smart-kpi__icon {
  background: #fff5df;
  color: #bd7315;
}

#flow-crm-portfolio {
  scroll-margin-top: 110px;
}

#flow-crm-portfolio:focus {
  outline: none;
}

@media (max-width: 1250px) {
  .flow-smart-kpis {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .flow-smart-kpis {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .flow-smart-kpis {
    grid-template-columns: 1fr;
  }
}

/* V15J-1B3 END */


/* ==========================================================================
   FLOW CORE — PROSPECT PIPELINE UX V15J-1C3B
   ========================================================================== */

.flow-client-card__prospect-stage {
  display: inline-flex;
  width: fit-content;
  min-height: 25px;
  align-items: center;
  margin: 8px 0 0;
  padding: 4px 9px;
  border-radius: 999px;
  background: #fff7e7;
  color: #9a5b0c;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.025em;
}

.flow-client-card__prospect-stage[
  data-prospect-stage="qualified"
] {
  background: #eef2ff;
  color: #4f46e5;
}

.flow-client-card__prospect-stage[
  data-prospect-stage="proposal"
],
.flow-client-card__prospect-stage[
  data-prospect-stage="negotiation"
] {
  background: #f3e8ff;
  color: #7e22ce;
}

.flow-client-card__prospect-stage[
  data-prospect-stage="lost"
] {
  background: #f1f5f9;
  color: #64748b;
}

.flow-client-prospect-pipeline[hidden] {
  display: none !important;
}

.flow-client-prospect-pipeline__badge {
  display: inline-flex;
  min-height: 29px;
  align-items: center;
  justify-content: center;
  padding: 5px 10px;
  border-radius: 999px;
  background: #fff7e7;
  color: #9a5b0c;
  font-size: 10px;
  font-weight: 800;
}

.flow-client-prospect-pipeline__badge[
  data-prospect-stage="qualified"
] {
  background: #eef2ff;
  color: #4f46e5;
}

.flow-client-prospect-pipeline__badge[
  data-prospect-stage="proposal"
],
.flow-client-prospect-pipeline__badge[
  data-prospect-stage="negotiation"
] {
  background: #f3e8ff;
  color: #7e22ce;
}

.flow-client-prospect-pipeline__badge[
  data-prospect-stage="lost"
] {
  background: #f1f5f9;
  color: #64748b;
}

.flow-client-prospect-pipeline__field {
  display: grid;
  gap: 8px;
}

.flow-client-prospect-pipeline__field > span {
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.flow-client-prospect-pipeline__field select {
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid #dfe4ee;
  border-radius: 11px;
  background: #fbfcfe;
  color: #26314d;
  font: inherit;
  font-size: 13px;
  font-weight: 650;
}

.flow-client-prospect-pipeline__field select:focus {
  border-color: #bab5ff;
  outline: none;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(80, 70, 229, 0.08);
}

.flow-client-prospect-pipeline__field select:disabled {
  cursor: progress;
  opacity: 0.65;
}

.flow-client-prospect-pipeline__feedback {
  min-height: 20px;
  margin-top: 10px;
  color: #7c879e;
  font-size: 12px;
  line-height: 1.45;
}

.flow-client-prospect-pipeline__feedback[
  data-tone="success"
] {
  color: #087b53;
}

.flow-client-prospect-pipeline__feedback[
  data-tone="error"
] {
  color: #b42318;
}

.flow-client-prospect-pipeline__feedback[
  data-tone="loading"
] {
  color: #685cf7;
}

/* V15J-1C3B END */


/* ==========================================================================
   FLOW CORE — PLATFORM ADMIN CRM V15J-1C5
   ========================================================================== */

.flow-portal--platform-admin
.flow-admin-crm-filters {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;

    margin:
        0 0 18px;

    padding:
        10px 12px;

    border:
        1px solid #e4e8ef;

    border-radius:
        15px;

    background:
        #ffffff;

    box-shadow:
        0 5px 16px
        rgba(15, 23, 42, .045);
}


.flow-portal--platform-admin
.flow-admin-crm-filters[hidden] {
    display:
        none !important;
}


.flow-portal--platform-admin
.flow-admin-crm-filters__lifecycles {
    display:
        flex;

    align-items:
        center;

    gap:
        6px;

    flex-wrap:
        wrap;
}


.flow-portal--platform-admin
.flow-admin-crm-filter {
    min-height:
        38px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    padding:
        7px 11px;

    border:
        1px solid transparent;

    border-radius:
        10px;

    background:
        transparent;

    color:
        #657086;

    cursor:
        pointer;

    font:
        inherit;

    font-size:
        11px;

    font-weight:
        750;
}


.flow-portal--platform-admin
.flow-admin-crm-filter:hover {
    border-color:
        #e2e5ec;

    background:
        #f8fafc;

    color:
        #253047;
}


.flow-portal--platform-admin
.flow-admin-crm-filter.is-active {
    border-color:
        #ddd9ff;

    background:
        #f3f1ff;

    color:
        #5046e5;
}


.flow-portal--platform-admin
.flow-admin-crm-filter span {
    min-width:
        21px;

    height:
        21px;

    display:
        inline-grid;

    place-items:
        center;

    padding:
        0 5px;

    border-radius:
        999px;

    background:
        rgba(100, 116, 139, .10);

    font-size:
        9px;

    font-weight:
        800;
}


.flow-portal--platform-admin
.flow-admin-crm-filter.is-active span {
    background:
        #e4e0ff;

    color:
        #5046e5;
}


.flow-portal--platform-admin
.flow-admin-crm-stage {
    min-width:
        210px;

    display:
        flex;

    align-items:
        center;

    gap:
        9px;
}


.flow-portal--platform-admin
.flow-admin-crm-stage[hidden] {
    display:
        none !important;
}


.flow-portal--platform-admin
.flow-admin-crm-stage > span {
    color:
        #788397;

    font-size:
        9px;

    font-weight:
        800;

    text-transform:
        uppercase;

    letter-spacing:
        .045em;
}


.flow-portal--platform-admin
.flow-admin-crm-stage select {
    min-height:
        38px;

    flex:
        1;

    padding:
        7px 30px 7px 10px;

    border:
        1px solid #e1e5ec;

    border-radius:
        10px;

    background:
        #fbfcfe;

    color:
        #34405b;

    font-size:
        11px;
}


/* ----------------------------------------------------------
   IDENTITE COMMERCIALE DES LIGNES
   ---------------------------------------------------------- */

.flow-portal--platform-admin
.flow-admin-crm-row__badges {
    display:
        flex;

    align-items:
        flex-end;

    flex-direction:
        column;

    gap:
        4px;
}


.flow-portal--platform-admin
.flow-admin-crm-row__lifecycle,
.flow-portal--platform-admin
.flow-admin-crm-row__stage {
    width:
        fit-content;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    white-space:
        nowrap;

    border-radius:
        999px;

    font-weight:
        800;
}


.flow-portal--platform-admin
.flow-admin-crm-row__lifecycle {
    min-height:
        22px;

    padding:
        3px 7px;

    font-size:
        8px;
}


.flow-portal--platform-admin
.flow-admin-crm-row__lifecycle[
    data-lifecycle="prospect"
] {
    background:
        #fff5df;

    color:
        #a96108;
}


.flow-portal--platform-admin
.flow-admin-crm-row__lifecycle[
    data-lifecycle="customer"
] {
    background:
        #e8faf2;

    color:
        #087b53;
}


.flow-portal--platform-admin
.flow-admin-crm-row__stage {
    min-height:
        20px;

    padding:
        3px 6px;

    background:
        #fff7e7;

    color:
        #9a5b0c;

    font-size:
        7.5px;
}


.flow-portal--platform-admin
.flow-admin-crm-row__stage[
    data-prospect-stage="qualified"
] {
    background:
        #eef2ff;

    color:
        #4f46e5;
}


.flow-portal--platform-admin
.flow-admin-crm-row__stage[
    data-prospect-stage="proposal"
],
.flow-portal--platform-admin
.flow-admin-crm-row__stage[
    data-prospect-stage="negotiation"
] {
    background:
        #f3e8ff;

    color:
        #7e22ce;
}


.flow-portal--platform-admin
.flow-admin-crm-row__stage[
    data-prospect-stage="lost"
] {
    background:
        #f1f5f9;

    color:
        #64748b;
}


.flow-portal--platform-admin
.flow-admin-compact-row--client[
    data-client-lifecycle="prospect"
]
.flow-admin-compact-row__icon {
    background:
        #fff4dd;

    color:
        #b96a09;
}


@media (max-width: 760px) {

    .flow-portal--platform-admin
    .flow-admin-crm-filters {
        align-items:
            stretch;

        flex-direction:
            column;
    }


    .flow-portal--platform-admin
    .flow-admin-crm-stage {
        width:
            100%;

        min-width:
            0;
    }


    .flow-portal--platform-admin
    .flow-admin-crm-stage select {
        width:
            100%;
    }
}


/* V15J-1C5 END */


/* ==========================================================================
   FLOW CORE — PLATFORM ADMIN CRM V15J-1C5
   ========================================================================== */

.flow-portal--platform-admin
.flow-admin-crm-filters {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;

    margin:
        0 0 18px;

    padding:
        10px 12px;

    border:
        1px solid #e4e8ef;

    border-radius:
        15px;

    background:
        #ffffff;

    box-shadow:
        0 5px 16px
        rgba(15, 23, 42, .045);
}


.flow-portal--platform-admin
.flow-admin-crm-filters[hidden] {
    display:
        none !important;
}


.flow-portal--platform-admin
.flow-admin-crm-filters__lifecycles {
    display:
        flex;

    align-items:
        center;

    gap:
        6px;

    flex-wrap:
        wrap;
}


.flow-portal--platform-admin
.flow-admin-crm-filter {
    min-height:
        38px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    padding:
        7px 11px;

    border:
        1px solid transparent;

    border-radius:
        10px;

    background:
        transparent;

    color:
        #657086;

    cursor:
        pointer;

    font:
        inherit;

    font-size:
        11px;

    font-weight:
        750;
}


.flow-portal--platform-admin
.flow-admin-crm-filter:hover {
    border-color:
        #e2e5ec;

    background:
        #f8fafc;

    color:
        #253047;
}


.flow-portal--platform-admin
.flow-admin-crm-filter.is-active {
    border-color:
        #ddd9ff;

    background:
        #f3f1ff;

    color:
        #5046e5;
}


.flow-portal--platform-admin
.flow-admin-crm-filter span {
    min-width:
        21px;

    height:
        21px;

    display:
        inline-grid;

    place-items:
        center;

    padding:
        0 5px;

    border-radius:
        999px;

    background:
        rgba(100, 116, 139, .10);

    font-size:
        9px;

    font-weight:
        800;
}


.flow-portal--platform-admin
.flow-admin-crm-filter.is-active span {
    background:
        #e4e0ff;

    color:
        #5046e5;
}


.flow-portal--platform-admin
.flow-admin-crm-stage {
    min-width:
        210px;

    display:
        flex;

    align-items:
        center;

    gap:
        9px;
}


.flow-portal--platform-admin
.flow-admin-crm-stage[hidden] {
    display:
        none !important;
}


.flow-portal--platform-admin
.flow-admin-crm-stage > span {
    color:
        #788397;

    font-size:
        9px;

    font-weight:
        800;

    text-transform:
        uppercase;

    letter-spacing:
        .045em;
}


.flow-portal--platform-admin
.flow-admin-crm-stage select {
    min-height:
        38px;

    flex:
        1;

    padding:
        7px 30px 7px 10px;

    border:
        1px solid #e1e5ec;

    border-radius:
        10px;

    background:
        #fbfcfe;

    color:
        #34405b;

    font-size:
        11px;
}


/* ----------------------------------------------------------
   IDENTITE COMMERCIALE DES LIGNES
   ---------------------------------------------------------- */

.flow-portal--platform-admin
.flow-admin-crm-row__badges {
    display:
        flex;

    align-items:
        flex-end;

    flex-direction:
        column;

    gap:
        4px;
}


.flow-portal--platform-admin
.flow-admin-crm-row__lifecycle,
.flow-portal--platform-admin
.flow-admin-crm-row__stage {
    width:
        fit-content;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    white-space:
        nowrap;

    border-radius:
        999px;

    font-weight:
        800;
}


.flow-portal--platform-admin
.flow-admin-crm-row__lifecycle {
    min-height:
        22px;

    padding:
        3px 7px;

    font-size:
        8px;
}


.flow-portal--platform-admin
.flow-admin-crm-row__lifecycle[
    data-lifecycle="prospect"
] {
    background:
        #fff5df;

    color:
        #a96108;
}


.flow-portal--platform-admin
.flow-admin-crm-row__lifecycle[
    data-lifecycle="customer"
] {
    background:
        #e8faf2;

    color:
        #087b53;
}


.flow-portal--platform-admin
.flow-admin-crm-row__stage {
    min-height:
        20px;

    padding:
        3px 6px;

    background:
        #fff7e7;

    color:
        #9a5b0c;

    font-size:
        7.5px;
}


.flow-portal--platform-admin
.flow-admin-crm-row__stage[
    data-prospect-stage="qualified"
] {
    background:
        #eef2ff;

    color:
        #4f46e5;
}


.flow-portal--platform-admin
.flow-admin-crm-row__stage[
    data-prospect-stage="proposal"
],
.flow-portal--platform-admin
.flow-admin-crm-row__stage[
    data-prospect-stage="negotiation"
] {
    background:
        #f3e8ff;

    color:
        #7e22ce;
}


.flow-portal--platform-admin
.flow-admin-crm-row__stage[
    data-prospect-stage="lost"
] {
    background:
        #f1f5f9;

    color:
        #64748b;
}


.flow-portal--platform-admin
.flow-admin-compact-row--client[
    data-client-lifecycle="prospect"
]
.flow-admin-compact-row__icon {
    background:
        #fff4dd;

    color:
        #b96a09;
}


@media (max-width: 760px) {

    .flow-portal--platform-admin
    .flow-admin-crm-filters {
        align-items:
            stretch;

        flex-direction:
            column;
    }


    .flow-portal--platform-admin
    .flow-admin-crm-stage {
        width:
            100%;

        min-width:
            0;
    }


    .flow-portal--platform-admin
    .flow-admin-crm-stage select {
        width:
            100%;
    }
}


/* V15J-1C5 END */

/* =========================================================
   V15J-1C10C2C2 — PORTFOLIO DOSSIERS AFFILIE
   ========================================================= */

.flow-workspace-card__portfolio-progress {
    display: grid;
    gap: 6px;
    margin-top: 12px;
}

.flow-workspace-card__portfolio-progress > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 12px;
}

.flow-workspace-card__portfolio-progress-track {
    display: block;
    overflow: hidden;
    height: 5px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .08);
}

.flow-workspace-card__portfolio-progress-track > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: currentColor;
}

.flow-workspace-card__portfolio-alerts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.flow-workspace-card__portfolio-alerts strong,
.flow-workspace-card__portfolio-alerts span {
    padding: 4px 7px;
    border-radius: 6px;
    background: #fcf0f1;
    color: #b32d2e;
    font-size: 11px;
    line-height: 1.25;
}

@media (max-width: 700px) {
    .flow-workspace-card__portfolio-progress > div {
        align-items: flex-start;
    }
}


/* ==========================================================================
   FLOW CORE — V15J-1C10C2D
   PLATFORM ADMIN — VUE DOSSIERS UNIFIÉE
   ========================================================================== */

.flow-admin-workspace-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.flow-admin-workspace-card {
    display: flex;
    flex-direction: column;
    gap: 11px;
    min-width: 0;
    padding: 16px;
    border: 1px solid #e2e8f0;
    border-left: 3px solid
        var(
            --flow-admin-workspace-template-color,
            #16a34a
        );
    border-radius: 16px;
    background: #fff;
    color: #0f172a;
    text-decoration: none;
    box-shadow: 0 5px 16px rgba(15, 23, 42, .035);
    transition:
        transform .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}

.flow-admin-workspace-card:hover {
    color: #0f172a;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(15, 23, 42, .075);
}

.flow-admin-workspace-card:focus-visible {
    outline: 3px solid rgba(22, 163, 74, .22);
    outline-offset: 3px;
}

.flow-admin-workspace-card__header,
.flow-admin-workspace-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.flow-admin-workspace-card__type,
.flow-admin-workspace-card__status,
.flow-admin-workspace-pill,
.flow-admin-workspace-card__alert,
.flow-admin-workspace-card__ok {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    border-radius: 999px;
    font-weight: 700;
    line-height: 1;
}

.flow-admin-workspace-card__type {
    gap: 6px;
    padding: 5px 8px;
    background: #eff6ff;
    color: #0369a1;
    font-size: 10px;
    text-transform: uppercase;
}

.flow-admin-workspace-card__template-icon {
    color:
        var(
            --flow-admin-workspace-template-color,
            currentColor
        );
}

.flow-admin-workspace-card__status {
    padding: 5px 8px;
    background: #ecfdf5;
    color: #047857;
    font-size: 9px;
    text-transform: uppercase;
}

.flow-admin-workspace-card__identity h3 {
    overflow-wrap: anywhere;
    margin: 0;
    color: #172033;
    font-size: 15px;
    line-height: 1.25;
    font-weight: 750;
}

.flow-admin-workspace-card__identity p {
    margin: 4px 0 0;
    color: #94a3b8;
    font-size: 10px;
    line-height: 1.35;
}

.flow-admin-workspace-card__business,
.flow-admin-workspace-card__finance {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.flow-admin-workspace-pill {
    min-height: 22px;
    padding: 5px 7px;
    font-size: 9px;
}

.flow-admin-workspace-pill--client {
    background: rgba(37, 99, 235, .08);
    color: #1d4ed8;
}

.flow-admin-workspace-pill--amount {
    background: rgba(15, 23, 42, .06);
    color: #0f172a;
}

.flow-admin-workspace-pill--revenue {
    background: rgba(148, 163, 184, .14);
    color: #475569;
}

.flow-admin-workspace-pill--revenue[data-status="signed"],
.flow-admin-workspace-pill--deposit {
    background: rgba(59, 130, 246, .10);
    color: #1d4ed8;
}

.flow-admin-workspace-pill--revenue[data-status="invoiced"],
.flow-admin-workspace-pill--remaining {
    background: rgba(245, 158, 11, .12);
    color: #92400e;
}

.flow-admin-workspace-pill--revenue[data-status="collected"],
.flow-admin-workspace-pill--collected {
    background: rgba(34, 197, 94, .12);
    color: #166534;
}

.flow-admin-workspace-pill--collect {
    background: rgba(239, 68, 68, .10);
    color: #991b1b;
}

.flow-admin-workspace-card__footer {
    margin-top: auto;
    padding-top: 2px;
}

.flow-admin-workspace-card__progress {
    flex: 1 1 auto;
    min-width: 0;
}

.flow-admin-workspace-card__progress > span,
.flow-admin-workspace-card__progress > strong {
    font-size: 9px;
}

.flow-admin-workspace-card__progress > span {
    color: #64748b;
}

.flow-admin-workspace-card__progress > strong {
    float: right;
    color: #334155;
}

.flow-admin-workspace-card__progress-track {
    overflow: hidden;
    height: 4px;
    margin-top: 5px;
    border-radius: 999px;
    background: #e2e8f0;
}

.flow-admin-workspace-card__progress-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background:
        var(
            --flow-admin-workspace-template-color,
            #16a34a
        );
}

.flow-admin-workspace-card__alert,
.flow-admin-workspace-card__ok {
    flex: 0 0 auto;
    padding: 5px 7px;
    font-size: 9px;
}

.flow-admin-workspace-card__alert {
    background: #fff7ed;
    color: #c2410c;
}

.flow-admin-workspace-card__ok {
    background: #f0fdf4;
    color: #15803d;
}

@media (max-width: 980px) {
    .flow-admin-workspace-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .flow-admin-workspace-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .flow-admin-workspace-card {
        padding: 14px;
        border-radius: 14px;
    }

    .flow-admin-workspace-card__identity h3 {
        font-size: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .flow-admin-workspace-card {
        transition: none;
    }
}

/* FLOW CORE — V15J-1C10C2D END */

/* ==========================================================================
   FLOW CORE — V15J-1C10C2E
   TOOLBAR DOSSIERS UNIFIEE
   ========================================================================== */

.flow-admin-workspace-filters {
    margin:
        -4px
        0
        18px;

    padding:
        14px;

    border:
        1px solid
        #e2e8f0;

    border-radius:
        16px;

    background:
        rgba(
            255,
            255,
            255,
            .72
        );
}

.flow-admin-workspace-filters[hidden] {
    display:
        none !important;
}

.flow-admin-workspace-filters__grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(
                0,
                1fr
            )
        );

    gap:
        10px;
}

.flow-admin-workspace-filters label {
    min-width:
        0;

    display:
        grid;

    gap:
        5px;
}

.flow-admin-workspace-filters label > span {
    color:
        #64748b;

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        .04em;

    text-transform:
        uppercase;
}

.flow-admin-workspace-filters select {
    width:
        100%;

    min-width:
        0;

    min-height:
        40px;

    padding:
        0
        34px
        0
        11px;

    border:
        1px solid
        #dbe3ec;

    border-radius:
        10px;

    background-color:
        #fff;

    color:
        #334155;

    font-size:
        12px;

    font-weight:
        650;
}

.flow-admin-workspace-filters__reset {
    margin-top:
        10px;

    appearance:
        none;

    padding:
        0;

    border:
        0;

    background:
        transparent;

    color:
        #64748b;

    font-size:
        11px;

    font-weight:
        700;

    cursor:
        pointer;
}

.flow-admin-workspace-filters__reset:hover {
    color:
        #15803d;
}

@media (max-width: 900px) {
    .flow-admin-workspace-filters__grid {
        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );
    }
}

@media (max-width: 560px) {
    .flow-admin-workspace-filters {
        margin-bottom:
            12px;

        padding:
            10px;

        border-radius:
            13px;
    }

    .flow-admin-workspace-filters__grid {
        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );

        gap:
            8px;
    }

    .flow-admin-workspace-filters select {
        min-height:
            38px;

        font-size:
            11px;
    }

    /*
     * Retour dashboard moins envahissant sur mobile.
     */
    .flow-admin-front-views__header {
        position:
            relative;
    }

    .flow-admin-front-views__close {
        width:
            auto;

        min-height:
            36px;

        margin-top:
            10px;

        padding:
            0
            11px;

        font-size:
            10px;
    }

    /*
     * Toolbar :
     * recherche puis compteur compact.
     */
    .flow-admin-front-toolbar {
        margin-bottom:
            10px;
    }

    .flow-admin-front-toolbar__count {
        margin-top:
            5px;

        font-size:
            10px;
    }
}

/* FLOW CORE — V15J-1C10C2E END */


/* ==========================================================================
   FLOW CORE — CLIENT NOTES FRONT ADMIN
   V15J-1C11B2
   ========================================================================== */

.flow-client-notes {
    position: relative;
}

.flow-client-note-form {
    margin-top: 14px;
    padding: 14px;

    border:
        1px solid
        #e2e8f0;

    border-radius:
        14px;

    background:
        #f8fafc;
}

.flow-client-note-form__field {
    display: block;
}

.flow-client-note-form textarea {
    display: block;

    width: 100%;
    min-height: 92px;

    margin: 0;
    padding: 11px 12px;

    resize: vertical;

    border:
        1px solid
        #cbd5e1;

    border-radius:
        10px;

    background:
        #fff;

    color:
        #0f172a;

    font: inherit;
    font-size: 13px;
    line-height: 1.5;

    box-sizing:
        border-box;
}

.flow-client-note-form textarea:focus {
    border-color:
        #86b7a0;

    outline:
        3px solid
        rgba(
            34,
            197,
            94,
            .10
        );
}

.flow-client-note-form__actions {
    margin-top: 10px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;
}

.flow-client-note-pin-field {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    color:
        #475569;

    font-size:
        12px;
    font-weight:
        650;
}

.flow-client-note-feedback {
    min-height: 18px;

    margin-top: 8px;

    font-size:
        11px;
    font-weight:
        650;
}

.flow-client-note-feedback[data-tone="success"] {
    color:
        #15803d;
}

.flow-client-note-feedback[data-tone="error"] {
    color:
        #b91c1c;
}

.flow-client-note-feedback[data-tone="loading"] {
    color:
        #64748b;
}

.flow-client-notes__list {
    margin-top: 12px;

    display: grid;

    gap: 9px;
}

.flow-client-note-card {
    position: relative;

    padding: 13px 14px;

    border:
        1px solid
        #e2e8f0;

    border-radius:
        13px;

    background:
        #fff;

    box-shadow:
        0 3px 12px
        rgba(
            15,
            23,
            42,
            .035
        );
}

.flow-client-note-card.is-pinned {
    border-color:
        rgba(
            217,
            119,
            6,
            .26
        );

    background:
        linear-gradient(
            145deg,
            #fffdf7,
            #fff
        );
}

.flow-client-note-card.is-pinned::before {
    content: "";

    position: absolute;

    top: 11px;
    bottom: 11px;
    left: 0;

    width: 3px;

    border-radius:
        0 3px 3px 0;

    background:
        #d97706;
}

.flow-client-note-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 12px;
}

.flow-client-note-card__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 5px 9px;
}

.flow-client-note-card__meta strong {
    color:
        #334155;

    font-size:
        11px;
    font-weight:
        750;
}

.flow-client-note-card__meta span {
    color:
        #94a3b8;

    font-size:
        10px;
}

.flow-client-note-card__content {
    margin-top: 9px;

    color:
        #334155;

    font-size:
        13px;
    line-height:
        1.55;

    overflow-wrap:
        anywhere;
}

.flow-client-note-pin {
    appearance: none;

    display: inline-flex;
    align-items: center;

    gap: 5px;

    min-height: 28px;

    padding: 4px 8px;

    border:
        1px solid
        #e2e8f0;

    border-radius:
        999px;

    background:
        #fff;

    color:
        #64748b;

    font-size:
        10px;
    font-weight:
        700;

    cursor:
        pointer;
}

.flow-client-note-card.is-pinned
.flow-client-note-pin {
    border-color:
        rgba(
            217,
            119,
            6,
            .22
        );

    background:
        rgba(
            245,
            158,
            11,
            .08
        );

    color:
        #92400e;
}

.flow-client-note-pin:hover {
    border-color:
        #cbd5e1;

    color:
        #334155;
}

.flow-client-note-pin:disabled {
    opacity:
        .55;

    cursor:
        wait;
}

.flow-client-note-empty {
    display: flex;
    align-items: flex-start;

    gap: 11px;

    padding: 15px;

    border:
        1px dashed
        #cbd5e1;

    border-radius:
        13px;

    background:
        #f8fafc;
}

.flow-client-note-empty__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex:
        0 0 32px;

    width: 32px;
    height: 32px;

    border-radius:
        9px;

    background:
        #fff;

    color:
        #64748b;

    font-size:
        16px;
}

.flow-client-note-empty strong {
    display: block;

    color:
        #334155;

    font-size:
        12px;
}

.flow-client-note-empty p {
    margin:
        3px 0 0;

    color:
        #64748b;

    font-size:
        11px;
    line-height:
        1.45;
}

@media (
    max-width: 640px
) {
    .flow-client-note-form__actions {
        align-items:
            stretch;

        flex-direction:
            column;
    }

    .flow-client-note-form__actions
    .flow-button {
        width:
            100%;
    }

    .flow-client-note-card__header {
        flex-direction:
            column;
    }

    .flow-client-note-pin {
        align-self:
            flex-start;
    }
}

/* FLOW CORE — CLIENT NOTES FRONT ADMIN END */

/* ==========================================
   CONTACT NOTES — V15J-1C11C2
========================================== */

.flow-contact-notes-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.flow-contact-notes-toggle span {
  display: inline-flex;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #e2e8f0;
  color: #475569;
  font-size: 10px;
  font-weight: 800;
}

.flow-contact-notes-toggle.is-open {
  border-color: #c7d2fe;
  background: #eef2ff;
  color: #4338ca;
}

.flow-contact-notes-toggle.is-open span {
  background: #c7d2fe;
  color: #3730a3;
}

.flow-contact-notes {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid #e2e8f0;
}

.flow-contact-notes__list {
  display: grid;
  gap: 9px;
}

.flow-contact-notes__loading {
  padding: 12px;
  border-radius: 10px;
  background: #f8fafc;
  color: #64748b;
  font-size: 12px;
  font-weight: 650;
}

.flow-contact-notes__empty {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  border: 1px dashed #dbe3ec;
  border-radius: 11px;
  background: #fbfdff;
}

.flow-contact-notes__empty > span {
  flex: 0 0 auto;
  color: #94a3b8;
  font-size: 17px;
}

.flow-contact-notes__empty strong {
  display: block;
  color: #334155;
  font-size: 12px;
}

.flow-contact-notes__empty p {
  margin: 3px 0 0;
  color: #64748b;
  font-size: 11px;
  line-height: 1.45;
}

.flow-contact-note {
  padding: 11px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 11px;
  background: #fff;
}

.flow-contact-note.is-pinned {
  border-color: #fde68a;
  background: #fffbeb;
}

.flow-contact-note__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.flow-contact-note__meta {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.flow-contact-note__meta strong {
  color: #334155;
  font-size: 11px;
  font-weight: 800;
}

.flow-contact-note__meta span {
  color: #94a3b8;
  font-size: 10px;
  font-weight: 650;
}

.flow-contact-note__pin {
  appearance: none;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
}

.flow-contact-note.is-pinned
.flow-contact-note__pin {
  color: #d97706;
}

.flow-contact-note__pin:hover {
  background: rgba(15, 23, 42, 0.05);
}

.flow-contact-note__content {
  margin: 8px 0 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: #475569;
  font-size: 12px;
  line-height: 1.55;
}

.flow-contact-note-form {
  margin-top: 10px;
}

.flow-contact-note-form textarea {
  width: 100%;
  min-height: 72px;
  resize: vertical;
  padding: 10px 11px;
  border: 1px solid #dbe3ec;
  border-radius: 10px;
  background: #fff;
  color: #334155;
  font: inherit;
  font-size: 12px;
  line-height: 1.5;
}

.flow-contact-note-form textarea:focus {
  border-color: #a5b4fc;
  outline: 0;
  box-shadow:
    0 0 0 3px
    rgba(99, 102, 241, 0.10);
}

.flow-contact-note-form__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
}

.flow-contact-note-form__pin {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #64748b;
  font-size: 11px;
  font-weight: 650;
  cursor: pointer;
}

.flow-contact-note-form__pin input {
  width: 15px;
  height: 15px;
  margin: 0;
}

.flow-contact-note-form__feedback {
  min-height: 16px;
  margin-top: 6px;
  color: #64748b;
  font-size: 10px;
  font-weight: 650;
}

.flow-contact-note-form__feedback[data-tone="error"] {
  color: #b91c1c;
}

.flow-contact-note-form__feedback[data-tone="loading"] {
  color: #475569;
}

@media (max-width: 640px) {
  .flow-contact-note-form__footer {
    align-items: stretch;
    flex-direction: column;
  }

  .flow-contact-note-form__footer .flow-button {
    width: 100%;
  }
}

/* CONTACT NOTES — V15J-1C11C2 END */

/* ==========================================================
   V15J-1C12D — CONVERSION MANUELLE PROSPECT -> CLIENT
   ========================================================== */

.flow-client-prospect-pipeline__actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
}

.flow-client-prospect-pipeline__actions[hidden],
.flow-client-prospect-pipeline__actions .flow-button[hidden] {
    display: none;
}

.flow-client-prospect-pipeline__actions .flow-button {
    min-height: 40px;
}

@media (max-width: 720px) {
    .flow-client-prospect-pipeline__actions {
        justify-content: stretch;
    }

    .flow-client-prospect-pipeline__actions .flow-button {
        width: 100%;
    }
}

/*
 * ==========================================================
 * FLOW CORE — CLIENT PORTAL — SUIVI SUBVENTION FIPU
 * ==========================================================
 */

.flow-client-fipu {
  margin: 28px 0;
  padding: 28px;
  border: 1px solid rgba(24, 37, 61, 0.1);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(24, 37, 61, 0.06);
}

.flow-client-fipu__heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}

.flow-client-fipu__heading h2 {
  margin: 5px 0 8px;
}

.flow-client-fipu__heading p {
  margin: 0;
  max-width: 680px;
  color: #667085;
}

.flow-client-fipu__current {
  flex: 0 0 220px;
  padding: 16px 18px;
  border-radius: 16px;
  background: #f5f7fb;
}

.flow-client-fipu__current span,
.flow-client-fipu__current strong {
  display: block;
}

.flow-client-fipu__current span {
  margin-bottom: 5px;
  font-size: 12px;
  color: #667085;
}

.flow-client-fipu__current strong {
  font-size: 14px;
  line-height: 1.35;
}

.flow-client-fipu__current[data-status="accepted"] {
  background: #f2f8ff;
}

.flow-client-fipu__current[data-status="processing"] {
  background: #fff8e8;
}

.flow-client-fipu__current[data-status="paid"] {
  background: #edf9f2;
}

.flow-client-fipu-history {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 24px;
}

.flow-client-fipu-history__row {
  padding: 13px 14px;
  border-radius: 14px;
  background: #f7f8fa;
  opacity: 0.62;
}

.flow-client-fipu-history__row[data-complete="1"] {
  opacity: 1;
}

.flow-client-fipu-history__row span,
.flow-client-fipu-history__row strong {
  display: block;
}

.flow-client-fipu-history__row span {
  margin-bottom: 5px;
  font-size: 11px;
  color: #667085;
}

.flow-client-fipu-history__row strong {
  font-size: 13px;
}

.flow-client-fipu-form fieldset {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 0;
  margin: 0;
  border: 0;
}

.flow-client-fipu-form legend {
  grid-column: 1 / -1;
  margin-bottom: 8px;
  font-weight: 700;
}

.flow-client-fipu-choice {
  display: flex;
  gap: 12px;
  padding: 16px;
  border: 1px solid #e5e9f0;
  border-radius: 16px;
  cursor: pointer;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

.flow-client-fipu-choice:hover {
  transform: translateY(-1px);
  border-color: #b9c3d3;
  box-shadow: 0 8px 20px rgba(24, 37, 61, 0.06);
}

.flow-client-fipu-choice:has(input:checked) {
  border-color: #5147f5;
  box-shadow: 0 0 0 3px rgba(81, 71, 245, 0.1);
}

.flow-client-fipu-choice:has(input:disabled) {
  opacity: 0.45;
  cursor: not-allowed;
}

.flow-client-fipu-choice input {
  margin-top: 3px;
}

.flow-client-fipu-choice span,
.flow-client-fipu-choice strong,
.flow-client-fipu-choice small {
  display: block;
}

.flow-client-fipu-choice strong {
  margin-bottom: 4px;
}

.flow-client-fipu-choice small {
  color: #667085;
  line-height: 1.45;
}

.flow-client-fipu-date {
  margin-top: 18px;
  padding: 16px;
  border-radius: 16px;
  background: #f7f8fa;
}

.flow-client-fipu-date label > span {
  display: block;
  margin-bottom: 7px;
  font-weight: 700;
}

.flow-client-fipu-date input {
  width: min(100%, 260px);
}

.flow-client-fipu-date small {
  display: block;
  margin-top: 7px;
  color: #667085;
}

.flow-client-fipu-form__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 20px;
}

.flow-client-fipu-feedback {
  margin: 0;
  min-height: 20px;
  color: #667085;
}

.flow-client-fipu-feedback[data-state="success"] {
  color: #147a50;
}

.flow-client-fipu-feedback[data-state="error"] {
  color: #bd2f42;
}

.flow-client-fipu-feedback[data-state="loading"] {
  color: #667085;
}

@media (max-width: 820px) {
  .flow-client-fipu__heading {
    display: block;
  }

  .flow-client-fipu__current {
    margin-top: 18px;
  }

  .flow-client-fipu-history,
  .flow-client-fipu-form fieldset {
    grid-template-columns: 1fr;
  }

  .flow-client-fipu-form__footer {
    align-items: stretch;
    flex-direction: column;
  }

  .flow-client-fipu-form__footer .flow-button {
    width: 100%;
  }
}


/* FLOW CORE — V15K4D CLIENT WORKSPACE FILTERS */

.flow-client-portal .flow-client-workspace-filters {
    display: grid;
    grid-template-columns:
        minmax(220px, 1.7fr)
        minmax(150px, .8fr)
        minmax(150px, .8fr)
        minmax(150px, .8fr)
        auto;
    gap: 10px;
    align-items: center;
    margin: 0 0 18px;
    padding: 14px;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: #ffffff;
}

.flow-client-portal .flow-client-workspace-filters label {
    min-width: 0;
}

.flow-client-portal .flow-client-workspace-filters input,
.flow-client-portal .flow-client-workspace-filters select {
    width: 100%;
    min-height: 42px;
    margin: 0;
    padding: 0 12px;
    border: 1px solid #dbe3ea;
    border-radius: 11px;
    background: #ffffff;
    color: #1e293b;
    font: inherit;
    font-size: 13px;
}

.flow-client-portal .flow-client-workspace-filters input:focus,
.flow-client-portal .flow-client-workspace-filters select:focus {
    outline: 2px solid
        color-mix(
            in srgb,
            var(--flow-client-green) 28%,
            transparent
        );
    outline-offset: 1px;
    border-color: var(--flow-client-green);
}

.flow-client-portal
.flow-client-workspace-filters
[data-flow-client-workspace-reset] {
    min-height: 42px;
    white-space: nowrap;
}

.flow-client-portal
[data-flow-client-workspace-empty] {
    margin-bottom: 18px;
}

@media (max-width: 980px) {
    .flow-client-portal .flow-client-workspace-filters {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .flow-client-portal
    .flow-client-workspace-filters__search {
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    .flow-client-portal .flow-client-workspace-filters {
        grid-template-columns: 1fr;
        padding: 12px;
    }

    .flow-client-portal
    .flow-client-workspace-filters__search {
        grid-column: auto;
    }

    .flow-client-portal
    .flow-client-workspace-filters
    [data-flow-client-workspace-reset] {
        width: 100%;
    }
}

/* FLOW CORE — V15K4D CLIENT WORKSPACE FILTERS END */

/* FLOW CORE — V15K4D7 HIDDEN WORKSPACE FILTER RESULTS */

.flow-client-portal [data-flow-client-workspace-grid] [data-flow-workspace-card][hidden] {
    display: none !important;
}

.flow-client-portal [data-flow-client-workspace-empty][hidden] {
    display: none !important;
}

/* FLOW CORE — V15K4D7 END */