/* =========================================================
   Wannapay — overrides du theme Lineone
   Couleur primaire de marque : #3b5999
   ========================================================= */

:root {
  /* Couleur primaire historique Wannapay */
  --color-primary: #3b5999;
  --color-primary-focus: #2f487a;
  --color-primary-content: #ffffff;

  /* Accent (utilise en hover sur certains composants Lineone) */
  --color-accent: #4a6cb3;
  --color-accent-focus: #3b5999;
  --color-accent-light: #ced9ed;

  /* Ombres legerement adoucies */
  --tw-shadow-color: rgba(59, 89, 153, 0.08);
}

/* =========================================================
   Couleurs de surface Wannapay (gardes du logo, douces, neutres)
   ========================================================= */

body {
  font-family:
    "Inter",
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Police d'interface — header / titres */
h1,
h2,
h3,
h4,
h5,
h6,
.font-heading {
  font-family:
    "Poppins",
    system-ui,
    -apple-system,
    sans-serif;
}

/* =========================================================
   Composants applicatifs Wannapay
   ========================================================= */

/* Boutons primary plus saturation Wannapay */
.btn-primary,
.button.is-primary,
button.bg-primary,
.bg-primary {
  background-color: var(--color-primary) !important;
}

.btn-primary:hover,
.bg-primary:hover {
  background-color: var(--color-primary-focus) !important;
}

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

.ring-primary {
  --tw-ring-color: var(--color-primary) !important;
}

/* Liens */
a {
  color: var(--color-primary);
}
a:hover {
  color: var(--color-primary-focus);
}

/* =========================================================
   Sidebar applicative simple (1 niveau)
   ========================================================= */

.wp-sidebar {
  width: 260px;
  background-color: #ffffff;
  border-right: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 40;
  transition: transform 0.25s ease;
}

.wp-sidebar__brand {
  height: 64px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  border-bottom: 1px solid #e2e8f0;
}

.wp-sidebar__brand img {
  height: 32px;
  width: auto;
}

.wp-sidebar__nav {
  flex: 1;
  overflow-y: auto;
  padding: 16px 12px;
}

.wp-sidebar__section-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #94a3b8;
  padding: 16px 12px 8px;
  font-weight: 600;
}

.wp-sidebar__link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 8px;
  color: #475569;
  font-size: 14px;
  font-weight: 500;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}

@media (max-width: 1023px) {
  /* En mobile/tablet le menu est touche : on garantit 44px de touch target. */
  .wp-sidebar__link {
    padding: 12px 12px;
    font-size: 15px;
    min-height: 44px;
  }
}

.wp-sidebar__link:hover {
  background-color: #f1f5f9;
  color: #1e293b;
}

.wp-sidebar__link.is-active {
  background-color: rgba(59, 89, 153, 0.1);
  color: var(--color-primary);
}

.wp-sidebar__link.is-active svg,
.wp-sidebar__link.is-active i {
  color: var(--color-primary);
}

.wp-sidebar__link svg,
.wp-sidebar__link i {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: #94a3b8;
}

.wp-sidebar__footer {
  padding: 16px 12px;
  border-top: 1px solid #e2e8f0;
  font-size: 12px;
  color: #94a3b8;
}

/* Backdrop sidebar mobile */
.wp-sidebar-backdrop {
  position: fixed;
  inset: 0;
  background-color: rgba(15, 23, 42, 0.5);
  z-index: 39;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.wp-sidebar-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

@media (max-width: 1023px) {
  .wp-sidebar {
    transform: translateX(-100%);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
  }
  .wp-sidebar.is-open {
    transform: translateX(0);
  }
}

/* =========================================================
   Header applicatif
   ========================================================= */

.wp-header {
  height: 64px;
  background-color: #ffffff;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 24px;
  position: sticky;
  top: 0;
  z-index: 30;
}

@media (max-width: 639px) {
  .wp-header {
    padding: 0 12px;
    gap: 6px;
  }
}

.wp-header__search {
  flex: 1;
  max-width: 480px;
  position: relative;
}

.wp-header__search input {
  width: 100%;
  height: 40px;
  padding: 0 14px 0 40px;
  background-color: #f8fafc;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: 14px;
  color: #1e293b;
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease;
}

.wp-header__search input:focus {
  background-color: #ffffff;
  border-color: var(--color-primary);
  outline: none;
}

.wp-header__search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  pointer-events: none;
}

.wp-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.wp-header__icon-btn {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #475569;
  background-color: transparent;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
  position: relative;
  flex-shrink: 0;
}

.wp-header__icon-btn:hover {
  background-color: #f1f5f9;
  color: var(--color-primary);
}

.wp-header__badge {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  background-color: #ef4444;
  border-radius: 50%;
  border: 2px solid #ffffff;
}

/* =========================================================
   Main / Layout shell
   ========================================================= */

/* Protection globale contre le scroll horizontal involontaire (cards / tables
   qui dépassent à 430px). Mobile only — on n'affecte pas le sticky desktop. */
html,
body {
  max-width: 100%;
  overflow-x: clip;
}

.wp-shell {
  min-height: 100vh;
  background-color: #f8fafc;
  max-width: 100%;
  overflow-x: clip;
}

.wp-shell__content {
  margin-left: 260px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  min-width: 0;
  transition: margin-left 0.25s ease;
}

/* Desktop collapse : sidebar masquee, content prend toute la largeur. */
@media (min-width: 1024px) {
  body.wp-shell--sidebar-collapsed .wp-sidebar {
    transform: translateX(-100%);
  }
  body.wp-shell--sidebar-collapsed .wp-shell__content {
    margin-left: 0;
  }
}

.wp-shell__main {
  flex: 1;
  padding: 24px;
  min-width: 0;
}

@media (max-width: 1023px) {
  .wp-shell__content {
    margin-left: 0;
  }
  .wp-shell__main {
    padding: 16px;
  }
}

/* =========================================================
   Cartes / Surfaces
   ========================================================= */

.wp-card {
  background-color: #ffffff;
  border-radius: 14px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.wp-card__header {
  padding: 16px 20px;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.wp-card__header h2,
.wp-card__header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #1e293b;
}

.wp-card__body {
  padding: 20px;
}

.wp-card__footer {
  padding: 16px 20px;
  border-top: 1px solid #e2e8f0;
}

/* =========================================================
   Boutons utilitaires
   ========================================================= */

.wp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 18px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    transform 0.05s ease;
  cursor: pointer;
  border: 1px solid transparent;
}

.wp-btn:active {
  transform: translateY(1px);
}

.wp-btn--primary {
  background-color: var(--color-primary);
  color: #ffffff;
}
.wp-btn--primary:hover {
  background-color: var(--color-primary-focus);
  color: #ffffff;
}

.wp-btn--secondary {
  background-color: #f1f5f9;
  color: #1e293b;
}
.wp-btn--secondary:hover {
  background-color: #e2e8f0;
}

.wp-btn--outline {
  background-color: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.wp-btn--outline:hover {
  background-color: rgba(59, 89, 153, 0.08);
}

.wp-btn--danger {
  background-color: #ef4444;
  color: #ffffff;
}
.wp-btn--danger:hover {
  background-color: #dc2626;
}

.wp-btn--ghost {
  background-color: transparent;
  color: #475569;
}
.wp-btn--ghost:hover {
  background-color: #f1f5f9;
}

.wp-btn--sm {
  height: 32px;
  padding: 0 12px;
  font-size: 13px;
}

.wp-btn--lg {
  height: 48px;
  padding: 0 24px;
  font-size: 15px;
}

.wp-btn--block {
  width: 100%;
}

/* =========================================================
   Forms applicatifs
   ========================================================= */

.wp-form-group {
  margin-bottom: 18px;
}

.wp-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: #475569;
  margin-bottom: 6px;
}

.wp-input,
.wp-select,
.wp-textarea {
  display: block;
  width: 100%;
  height: 44px;
  padding: 0 14px;
  background-color: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  font-size: 14px;
  color: #1e293b;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.wp-textarea {
  height: auto;
  padding: 12px 14px;
  min-height: 100px;
  resize: vertical;
}

.wp-input:focus,
.wp-select:focus,
.wp-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(59, 89, 153, 0.12);
}

.wp-input::placeholder,
.wp-textarea::placeholder {
  color: #94a3b8;
}

.wp-form-help {
  font-size: 12px;
  color: #94a3b8;
  margin-top: 6px;
}

.wp-form-error {
  font-size: 12px;
  color: #ef4444;
  margin-top: 6px;
}

/* =========================================================
   Badges
   ========================================================= */

.wp-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.wp-badge--success {
  background-color: #dcfce7;
  color: #166534;
}

.wp-badge--warning {
  background-color: #fef3c7;
  color: #92400e;
}

.wp-badge--danger {
  background-color: #fee2e2;
  color: #991b1b;
}

.wp-badge--info {
  background-color: #dbeafe;
  color: #1e40af;
}

.wp-badge--neutral {
  background-color: #f1f5f9;
  color: #475569;
}

.wp-badge--primary {
  background-color: rgba(59, 89, 153, 0.1);
  color: var(--color-primary);
}

/* =========================================================
   Auth layout (split-screen)
   ========================================================= */

.wp-auth {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
  background-color: #f8fafc;
}

@media (min-width: 1024px) {
  .wp-auth {
    grid-template-columns: 1fr 1fr;
  }
}

.wp-auth__visual {
  display: none;
  background: linear-gradient(135deg, #3b5999 0%, #2f487a 100%);
  color: #ffffff;
  padding: 48px;
  position: relative;
  overflow: hidden;
}

@media (min-width: 1024px) {
  .wp-auth__visual {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
}

.wp-auth__form-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
  min-height: 100vh;
}

.wp-auth__form {
  width: 100%;
  max-width: 420px;
}

.wp-auth__brand img {
  height: 40px;
  width: auto;
}

/* =========================================================
   Table style applicatif
   ========================================================= */

.wp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.wp-table thead th {
  text-align: left;
  padding: 12px 16px;
  background-color: #f8fafc;
  color: #64748b;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid #e2e8f0;
}

.wp-table tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid #f1f5f9;
  color: #1e293b;
  vertical-align: middle;
}

.wp-table tbody tr:hover {
  background-color: #f8fafc;
}

/* Empty state */
.wp-empty {
  text-align: center;
  padding: 48px 24px;
}

.wp-empty__icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  color: #cbd5e1;
}

.wp-empty__title {
  font-size: 16px;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 6px;
}

.wp-empty__desc {
  color: #64748b;
  font-size: 14px;
  margin-bottom: 16px;
}

/* =========================================================
   Print
   ========================================================= */

@media print {
  .wp-sidebar,
  .wp-header,
  .wp-sidebar-backdrop {
    display: none !important;
  }
  .wp-shell__content {
    margin-left: 0 !important;
  }
}

/* =========================================================
   Compatibilité modaux / dropdowns / selectpickers legacy
   (Bootstrap CSS n'est plus charge globalement, on garde
   uniquement ce qu'il faut pour que data-toggle="modal"
   continue de fonctionner avec bootstrap.min.js)
   ========================================================= */

.modal {
  position: fixed;
  inset: 0;
  z-index: 1050;
  display: none;
  overflow: hidden;
  outline: 0;
}

.modal.fade .modal-dialog {
  transition: transform 0.25s ease-out;
  transform: translate(0, -25px);
}

.modal.show {
  display: block;
  overflow-x: hidden;
  overflow-y: auto;
}

.modal.show .modal-dialog {
  transform: none;
}

.modal-dialog {
  position: relative;
  width: auto;
  margin: 1.75rem auto;
  max-width: 500px;
  pointer-events: none;
}

.modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.18);
  pointer-events: auto;
  outline: 0;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #e2e8f0;
}

.modal-header .close {
  background: transparent;
  border: 0;
  font-size: 24px;
  line-height: 1;
  color: #94a3b8;
  cursor: pointer;
  opacity: 0.7;
}

.modal-header .close:hover {
  opacity: 1;
  color: #1e293b;
}

.modal-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #1e293b;
}

.modal-body {
  padding: 20px;
  flex: 1 1 auto;
}

.modal-body .form-group {
  margin-bottom: 16px;
}

.modal-body label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: #475569;
  margin-bottom: 6px;
}

.modal-body input.form-control,
.modal-body select.form-control,
.modal-body textarea.form-control {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  background-color: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  font-size: 14px;
  color: #1e293b;
}

.modal-body textarea.form-control {
  padding: 12px 14px;
  min-height: 100px;
}

.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 16px 20px;
  border-top: 1px solid #e2e8f0;
}

.modal-footer .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 18px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
}

.modal-footer .btn-primary {
  background-color: var(--color-primary);
  color: #ffffff;
}

.modal-footer .btn-secondary {
  background-color: #f1f5f9;
  color: #1e293b;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1040;
  background-color: rgba(15, 23, 42, 0.5);
}

.modal-backdrop.fade {
  opacity: 0;
  transition: opacity 0.15s linear;
}

.modal-backdrop.show {
  opacity: 1;
}

body.modal-open {
  overflow: hidden;
}

/* =========================================================
   Renforcement des espacements typographiques
   (rend les marges Tailwind robustes face au reset des plugins
    legacy comme bootstrap-select / nice-select)
   ========================================================= */

.wp-auth__form > * + * {
  /* fallback si space-y-5 ne se propage pas */
}

.wp-form-group + .wp-form-group {
  margin-top: 18px;
}

/* Tous les labels au sein du shell applicatif */
.wp-shell label,
.wp-auth label {
  display: block;
}

.wp-label,
label.wp-label {
  display: block !important;
  font-size: 13px;
  font-weight: 500;
  color: #475569;
  margin-bottom: 6px;
  line-height: 1.4;
}

/* Forcer un line-height correct sur les paragraphes du shell */
.wp-shell p,
.wp-auth p {
  line-height: 1.55;
}

/* Margin-bottom de l'en-tete d'auth */
.wp-auth__form .mb-8 {
  margin-bottom: 2rem;
}

/* Inputs : aligner avec wp-input */
input.form-control,
select.form-control,
textarea.form-control {
  display: block;
  width: 100%;
  height: 44px;
  padding: 0 14px;
  background-color: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  font-size: 14px;
  color: #1e293b;
  line-height: 1.4;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

textarea.form-control {
  height: auto;
  padding: 12px 14px;
  min-height: 100px;
}

input.form-control:focus,
select.form-control:focus,
textarea.form-control:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(59, 89, 153, 0.12);
}

/* =========================================================
   Selects custom (selectpickers / nice-select legacy)
   ========================================================= */

.bootstrap-select > .dropdown-toggle,
.nice-select {
  display: block;
  width: 100%;
  height: 44px;
  padding: 0 14px !important;
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 10px !important;
  font-size: 14px;
  color: #1e293b;
  line-height: 1.4;
  box-shadow: none !important;
}

.nice-select .list {
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
}

/* =========================================================
   Boutons legacy mappes sur wp-btn
   ========================================================= */

.btn_hover,
.agency_banner_btn,
.app_btn,
.btn_three {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  border-radius: 10px;
  background-color: var(--color-primary);
  color: #ffffff !important;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 0;
  transition: background-color 0.15s ease;
  text-decoration: none;
}

.btn_hover:hover,
.agency_banner_btn:hover,
.app_btn:hover,
.btn_three:hover {
  background-color: var(--color-primary-focus);
  color: #ffffff !important;
}

/* =========================================================
   Reset de quelques classes legacy qui cassent le rendu
   ========================================================= */

.wow {
  visibility: visible !important;
  animation: none !important;
}

.input_border,
.checkout_content {
  /* Containers legacy : neutralise les styles agressifs */
  border: 0;
  padding: 0;
  background: transparent;
}

/* Liens : eviter qu'ils heritent du color: var(--color-primary) global
   quand ils sont a l'interieur d'un badge ou d'un bouton */
.wp-badge a,
.wp-btn a {
  color: inherit;
}

/* =========================================================
   Header : recherche & dropdown profil (rendu solide)
   ========================================================= */

.wp-header__search {
  flex: 1;
  max-width: 460px;
  margin: 0 16px;
  position: relative;
}

.wp-header__search input {
  width: 100%;
  height: 40px;
  padding: 0 14px 0 40px;
  background-color: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  font-size: 14px;
  color: #1e293b;
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease,
    box-shadow 0.15s ease;
  outline: none;
}

.wp-header__search input::placeholder {
  color: #94a3b8;
  font-size: 13px;
}

.wp-header__search input:focus {
  background-color: #ffffff;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(59, 89, 153, 0.1);
}

@media (max-width: 767px) {
  .wp-header__search {
    margin: 0 8px;
  }
  .wp-header__search input {
    padding-left: 36px;
    font-size: 13px;
  }
  .wp-header__search input::placeholder {
    font-size: 12px;
  }
}

/* Trigger du profil dropdown */
.wp-profile-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 4px;
  background: transparent;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.15s ease;
  min-height: 44px;
}

.wp-profile-trigger:hover {
  background-color: #f1f5f9;
}

/* =========================================================
   Dropdown JS vanilla (data-wp-dropdown-toggle)
   ========================================================= */

.wp-dropdown {
  position: relative;
  display: inline-block;
}

.wp-dropdown__menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 240px;
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.1);
  overflow: hidden;
  z-index: 50;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition:
    opacity 0.15s ease,
    transform 0.15s ease;
}

.wp-dropdown__menu--right {
  left: auto;
  right: 0;
}

.wp-dropdown.is-open .wp-dropdown__menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.wp-dropdown__header {
  padding: 12px 16px;
  border-bottom: 1px solid #e2e8f0;
  background-color: #f8fafc;
}

.wp-dropdown__group {
  padding: 6px 0;
}

.wp-dropdown__group + .wp-dropdown__group {
  border-top: 1px solid #e2e8f0;
}

.wp-dropdown__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 500;
  color: #475569;
  background-color: transparent;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
  text-decoration: none;
}

.wp-dropdown__item:hover {
  background-color: #f1f5f9;
  color: #1e293b;
}

.wp-dropdown__item--danger {
  color: #dc2626;
}

.wp-dropdown__item--danger:hover {
  background-color: #fef2f2;
  color: #b91c1c;
}

.wp-dropdown__icon {
  width: 16px;
  text-align: center;
  color: #94a3b8;
  flex-shrink: 0;
}

.wp-dropdown__item--danger .wp-dropdown__icon {
  color: #ef4444;
}

/* =========================================================
   Dashboard : widgets premium (gradients, sparklines, motion)
   ========================================================= */

.wp-stat-card {
  position: relative;
  background-color: #ffffff;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  padding: 20px;
  overflow: hidden;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.wp-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
}

.wp-stat-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.wp-stat-card__label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #94a3b8;
}

.wp-stat-card__value {
  font-family: "Poppins", sans-serif;
  font-size: 26px;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.2;
  margin-top: 6px;
}

.wp-stat-card__hint {
  font-size: 12px;
  color: #64748b;
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.wp-stat-card__sparkline {
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 72px;
  height: 28px;
  opacity: 0.4;
  pointer-events: none;
}

/* Variantes de couleur des stat cards */
.wp-stat-card--emerald .wp-stat-card__icon {
  background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
  color: #047857;
}

.wp-stat-card--blue .wp-stat-card__icon {
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
  color: #1e40af;
}

.wp-stat-card--violet .wp-stat-card__icon {
  background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);
  color: #6d28d9;
}

.wp-stat-card--amber .wp-stat-card__icon {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  color: #b45309;
}

/* Bandeau abonnement premium */
.wp-promo-banner {
  position: relative;
  border-radius: 18px;
  padding: 22px 24px;
  background:
    radial-gradient(
      circle at top right,
      rgba(255, 255, 255, 0.18),
      transparent 50%
    ),
    radial-gradient(
      circle at bottom left,
      rgba(255, 255, 255, 0.1),
      transparent 60%
    ),
    linear-gradient(
      135deg,
      var(--color-primary) 0%,
      var(--color-primary-focus) 100%
    );
  color: #ffffff;
  overflow: hidden;
  box-shadow: 0 18px 32px rgba(59, 89, 153, 0.18);
}

.wp-promo-banner__decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(
      circle 80px at 90% 30%,
      rgba(255, 255, 255, 0.16),
      transparent 60%
    ),
    radial-gradient(
      circle 60px at 75% 80%,
      rgba(255, 255, 255, 0.12),
      transparent 60%
    );
}

/* Card actions rapides : tuiles plus engageantes */
.wp-action-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 8px;
  border-radius: 14px;
  border: 1px solid #e2e8f0;
  background-color: #ffffff;
  text-align: center;
  transition: all 0.18s ease;
  cursor: pointer;
}

.wp-action-tile:hover {
  border-color: var(--color-primary);
  background-color: rgba(59, 89, 153, 0.04);
  transform: translateY(-2px);
}

.wp-action-tile__icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background-color: rgba(59, 89, 153, 0.1);
  color: var(--color-primary);
  display: grid;
  place-content: center;
  font-size: 16px;
  transition:
    background-color 0.18s ease,
    color 0.18s ease;
}

.wp-action-tile:hover .wp-action-tile__icon {
  background-color: var(--color-primary);
  color: #ffffff;
}

.wp-action-tile__label {
  font-size: 12px;
  font-weight: 600;
  color: #1e293b;
}

/* Timeline activite recente */
.wp-timeline {
  position: relative;
  padding-left: 28px;
}

.wp-timeline::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 4px;
  bottom: 4px;
  width: 2px;
  background-color: #e2e8f0;
  border-radius: 2px;
}

.wp-timeline__item {
  position: relative;
  padding-bottom: 16px;
}

.wp-timeline__item:last-child {
  padding-bottom: 0;
}

.wp-timeline__dot {
  position: absolute;
  left: -22px;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #ffffff;
  border: 2px solid var(--color-primary);
}

.wp-timeline__item:first-child .wp-timeline__dot {
  background-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(59, 89, 153, 0.15);
}

.wp-timeline__text {
  font-size: 13px;
  color: #334155;
  line-height: 1.5;
}

.wp-timeline__date {
  font-size: 11px;
  color: #94a3b8;
  margin-top: 2px;
}

/* =========================================================
   Espacements dashboard renforces (blindage)
   ========================================================= */

.wp-dashboard-section {
  margin-bottom: 40px;
}

.wp-dashboard-section:last-child {
  margin-bottom: 0;
}

.wp-grid-stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 640px) {
  .wp-grid-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .wp-grid-stats {
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
  }
}

.wp-grid-main {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}

@media (min-width: 1024px) {
  .wp-grid-main {
    grid-template-columns: 2fr 1fr;
    gap: 32px;
  }
}

.wp-grid-main__col {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* Cards : padding interne plus genereux */
.wp-card__header {
  padding: 18px 22px;
}

.wp-card__body {
  padding: 22px;
}

.wp-card__footer {
  padding: 18px 22px;
}

/* Stat cards : ajustements pour rendu plus respirable */
.wp-stat-card {
  padding: 22px;
}

.wp-stat-card__value {
  margin-top: 8px;
}

.wp-stat-card__hint {
  margin-top: 14px;
}

/* =========================================================
   Page header reutilisable
   ========================================================= */

.wp-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}

.wp-page-header__main {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  min-width: 0;
}

.wp-page-header__icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: linear-gradient(
    135deg,
    rgba(59, 89, 153, 0.1) 0%,
    rgba(59, 89, 153, 0.18) 100%
  );
  color: var(--color-primary);
  display: grid;
  place-content: center;
  font-size: 22px;
  flex-shrink: 0;
}

.wp-page-header__eyebrow {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #94a3b8;
  margin-bottom: 4px;
}

.wp-page-header__title {
  font-family: "Poppins", sans-serif;
  font-size: 28px;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.15;
  margin: 0;
}

.wp-page-header__desc {
  font-size: 14px;
  color: #64748b;
  line-height: 1.55;
  margin-top: 8px;
  max-width: 640px;
}

.wp-page-header__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

@media (max-width: 767px) {
  .wp-page-header__title {
    font-size: 22px;
  }
  .wp-page-header__icon {
    width: 44px;
    height: 44px;
    font-size: 18px;
  }
}

/* =========================================================
   Typographie globale : line-height + spacing systeme
   ========================================================= */

.wp-shell__main h1,
.wp-auth h1 {
  font-family: "Poppins", sans-serif;
  line-height: 1.2;
}

.wp-shell__main h2,
.wp-auth h2 {
  font-family: "Poppins", sans-serif;
  line-height: 1.25;
}

.wp-shell__main h3 {
  line-height: 1.3;
}

/* Toutes les listes au sein des cards : aerees */
.wp-card ul li,
.wp-card ol li {
  line-height: 1.55;
}

/* =========================================================
   Iconographie : taille / alignement consistants
   ========================================================= */

.wp-card__header i.fa-solid,
.wp-card__header i.fa-regular,
.wp-card__header i.fa-brands {
  vertical-align: middle;
}

.wp-icon-box {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background-color: rgba(59, 89, 153, 0.1);
  color: var(--color-primary);
  display: inline-grid;
  place-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

.wp-icon-box--lg {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  font-size: 18px;
}

.wp-icon-box--sm {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  font-size: 12px;
}

/* Variantes couleur */
.wp-icon-box--emerald {
  background-color: rgba(16, 185, 129, 0.12);
  color: #047857;
}
.wp-icon-box--blue {
  background-color: rgba(59, 130, 246, 0.12);
  color: #1e40af;
}
.wp-icon-box--violet {
  background-color: rgba(139, 92, 246, 0.12);
  color: #6d28d9;
}
.wp-icon-box--amber {
  background-color: rgba(245, 158, 11, 0.12);
  color: #b45309;
}
.wp-icon-box--red {
  background-color: rgba(239, 68, 68, 0.12);
  color: #b91c1c;
}

/* =========================================================
   Responsive helpers
   ========================================================= */

.wp-section-gap {
  margin-bottom: 32px;
}

.wp-section-gap--lg {
  margin-bottom: 48px;
}

/* Spacings entre cards d'une meme colonne forcer */
.wp-cards-col {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.wp-cards-col--lg {
  gap: 32px;
}

/* =========================================================
   Liste / table : amelioration densite et lisibilite
   ========================================================= */

.wp-table thead th {
  padding: 14px 18px;
}

.wp-table tbody td {
  padding: 16px 18px;
}

/* Cards a clic / hover */
a.wp-card,
.wp-card.is-clickable {
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
  cursor: pointer;
}

a.wp-card:hover,
.wp-card.is-clickable:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
  border-color: rgba(59, 89, 153, 0.3);
}

/* =========================================================
   Auth pages : finesse typo + spacing
   ========================================================= */

.wp-auth__form h1 {
  font-family: "Poppins", sans-serif;
  font-size: 26px;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.2;
}

.wp-auth__form p {
  line-height: 1.6;
}

.wp-auth__form .wp-form-group {
  margin-bottom: 20px;
}

.wp-auth__form .wp-form-group:last-of-type {
  margin-bottom: 28px;
}

/* =========================================================
   Sidebar nav : flex column pour permettre mt-auto sur le dernier item
   (Corbeille pousse vers le bas)
   ========================================================= */

.wp-sidebar__nav {
  display: flex;
  flex-direction: column;
}

.wp-sidebar__nav > .mt-auto {
  margin-top: auto;
  border-top: 1px solid #f1f5f9;
  padding-top: 8px;
}

/* =========================================================
   Avatar : squircle plat, initiales parfaitement centrees
   ========================================================= */

.wp-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  font-family:
    "Inter",
    -apple-system,
    sans-serif;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  vertical-align: middle;
  user-select: none;
}

.wp-avatar > span {
  display: block;
  line-height: 1;
  padding-top: 0.06em; /* compense l'asymetrie verticale des polices */
}

.wp-avatar > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* =========================================================
   Avatar : couleur unique primaire Wannapay (sans palette aleatoire)
   ========================================================= */

.wp-avatar {
  background-color: rgba(59, 89, 153, 0.1);
  color: var(--color-primary);
}

/* =========================================================
   PAGE PARAMETRES : layout 2 colonnes + sticky nav + save bar
   ========================================================= */

.wp-settings-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: start;
  margin-bottom: 100px; /* place pour la sticky save bar */
}

@media (min-width: 1024px) {
  .wp-settings-layout {
    grid-template-columns: 240px 1fr;
    gap: 40px;
  }
}

/* === Nav interne sticky === */

.wp-settings-nav {
  position: relative;
}

@media (min-width: 1024px) {
  .wp-settings-nav {
    position: sticky;
    top: 88px; /* hauteur header + spacing */
  }
}

.wp-settings-nav__inner {
  display: flex;
  flex-direction: row;
  overflow-x: auto;
  gap: 4px;
  padding: 6px;
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
}

@media (min-width: 1024px) {
  .wp-settings-nav__inner {
    flex-direction: column;
    overflow-x: visible;
  }
}

.wp-settings-nav__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  color: #475569;
  text-decoration: none;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
  white-space: nowrap;
  cursor: pointer;
}

.wp-settings-nav__link:hover {
  background-color: #f1f5f9;
  color: #1e293b;
}

.wp-settings-nav__link.is-active {
  background-color: rgba(59, 89, 153, 0.1);
  color: var(--color-primary);
  font-weight: 600;
}

.wp-settings-nav__icon {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: inline-grid;
  place-content: center;
  background-color: rgba(59, 89, 153, 0.08);
  color: var(--color-primary);
  font-size: 11px;
  flex-shrink: 0;
}

.wp-settings-nav__link.is-active .wp-settings-nav__icon {
  background-color: var(--color-primary);
  color: #ffffff;
}

.wp-settings-nav__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #fbbf24;
  flex-shrink: 0;
}

/* === Formulaire principal === */

.wp-settings-form {
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-width: 0;
}

.wp-settings-section {
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  overflow: hidden;
  scroll-margin-top: 100px;
}

.wp-settings-section__header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 22px 26px;
  border-bottom: 1px solid #f1f5f9;
  background-color: #fafafa;
}

.wp-settings-section__header > div:not(.wp-icon-box) {
  flex: 1;
  min-width: 0;
}

.wp-settings-section__title {
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #0f172a;
  margin: 0;
  line-height: 1.3;
}

.wp-settings-section__desc {
  font-size: 13px;
  color: #64748b;
  line-height: 1.5;
  margin-top: 4px;
}

.wp-settings-section__desc a {
  font-weight: 500;
}

.wp-settings-section__body {
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* === Form row : grille a colonnes equivalentes === */

.wp-form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

@media (min-width: 640px) {
  .wp-form-row {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  .wp-form-row--3-2 {
    grid-template-columns: 1fr 2fr;
  }
}

/* === Inputs renforces (taille confortable + focus net) === */

.wp-input,
.wp-select,
.wp-textarea {
  height: 46px;
  padding: 0 14px;
  background-color: #ffffff;
  border: 1.5px solid #cbd5e1;
  border-radius: 10px;
  font-size: 14px;
  color: #1e293b;
  line-height: 1.4;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
  font-family:
    "Inter",
    -apple-system,
    sans-serif;
  width: 100%;
  display: block;
}

.wp-textarea {
  height: auto;
  min-height: 110px;
  padding: 12px 14px;
}

.wp-input:focus,
.wp-select:focus,
.wp-textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(59, 89, 153, 0.12);
  outline: none;
}

.wp-input:hover:not(:focus):not(:disabled),
.wp-select:hover:not(:focus):not(:disabled) {
  border-color: #94a3b8;
}

.wp-input--readonly,
.wp-input:disabled,
.wp-input--readonly:focus {
  background-color: #f8fafc;
  color: #94a3b8;
  cursor: not-allowed;
  border-color: #e2e8f0;
  box-shadow: none;
}

.wp-input--mono {
  font-family:
    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
  font-size: 13px;
  letter-spacing: -0.01em;
}

/* === Labels & helpers === */

.wp-label {
  display: flex !important;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #334155;
  margin-bottom: 8px;
  line-height: 1.35;
}

.wp-label__tag {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #94a3b8;
  background-color: #f1f5f9;
  padding: 2px 8px;
  border-radius: 999px;
}

.wp-required {
  color: #dc2626;
  font-weight: 700;
}

.wp-form-help {
  font-size: 12px;
  color: #64748b;
  margin-top: 8px;
  line-height: 1.5;
}

.wp-form-group {
  margin: 0;
}

/* Champ locked (telephone deja confirme) */

.wp-locked-field {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background-color: #f8fafc;
  border: 1.5px dashed #cbd5e1;
  border-radius: 10px;
  color: #475569;
}

.wp-locked-field > i {
  color: #94a3b8;
  font-size: 14px;
  margin-top: 3px;
}

.wp-locked-field strong {
  font-size: 14px;
  color: #1e293b;
}

.wp-locked-field p {
  font-size: 12px;
  color: #64748b;
  margin-top: 4px;
  line-height: 1.4;
}

/* === Banner d'information === */

.wp-banner {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 20px;
  border-radius: 14px;
  border: 1px solid;
}

.wp-banner__icon {
  font-size: 20px;
  margin-top: 2px;
  flex-shrink: 0;
}

.wp-banner__title {
  font-weight: 600;
  color: #0f172a;
  font-size: 15px;
  line-height: 1.35;
}

.wp-banner__desc {
  font-size: 13px;
  color: #475569;
  margin-top: 4px;
  line-height: 1.5;
}

.wp-banner--info {
  background: linear-gradient(
    135deg,
    rgba(59, 89, 153, 0.04) 0%,
    rgba(59, 89, 153, 0.08) 100%
  );
  border-color: rgba(59, 89, 153, 0.25);
}

.wp-banner--info .wp-banner__icon {
  color: var(--color-primary);
}

/* === Progress bar === */

.wp-progress {
  width: 100%;
  height: 6px;
  background-color: rgba(59, 89, 153, 0.1);
  border-radius: 999px;
  overflow: hidden;
}

.wp-progress__bar {
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary) 0%, #4a6cb3 100%);
  border-radius: 999px;
  transition: width 0.4s ease;
}

/* === Save bar sticky en bas === */

.wp-save-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid #e2e8f0;
  box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.05);
  z-index: 30;
  padding: 14px 24px;
}

@media (min-width: 1024px) {
  .wp-save-bar {
    left: 260px; /* largeur sidebar */
    padding: 14px 32px;
  }
}

.wp-save-bar__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.wp-save-bar__captcha {
  transform: scale(0.85);
  transform-origin: left center;
  height: 65px;
}

#saveParamsButton {
  opacity: 0.5;
  cursor: not-allowed;
  transition: opacity 0.2s ease;
  min-width: 200px;
}

#saveParamsButton.is-ready,
#saveParamsButton:not([disabled]) {
  opacity: 1;
  cursor: pointer;
}

/* =========================================================
   Form row : ALIGNEMENT VERTICAL parfait entre colonnes
   Force chaque .wp-form-group a etre un flex column, et
   pousse l'input tout en bas pour que les inputs cote a cote
   soient toujours alignes meme si les labels ont des hauteurs
   differentes.
   ========================================================= */

.wp-form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: stretch;
}

@media (min-width: 640px) {
  .wp-form-row {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  .wp-form-row--3-2 {
    grid-template-columns: 1fr 2fr;
  }
}

.wp-form-row > .wp-form-group {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.wp-form-row > .wp-form-group > .wp-label {
  margin-bottom: 8px;
  flex-shrink: 0;
}

/* Pousse les inputs tout en bas de leur groupe : alignement parfait */
.wp-form-row > .wp-form-group > .wp-input,
.wp-form-row > .wp-form-group > .wp-select,
.wp-form-row > .wp-form-group > .wp-textarea,
.wp-form-row > .wp-form-group > .wp-locked-field {
  margin-top: auto;
}

/* Helper text reste accroché à l'input */
.wp-form-row > .wp-form-group > .wp-form-help {
  margin-top: 8px;
  flex-shrink: 0;
}

/* =========================================================
   PAGE MON COMPTE
   ========================================================= */

/* === Hero profil === */

.wp-profile-hero {
  position: relative;
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  padding: 0;
  overflow: hidden;
}

.wp-profile-hero__decor {
  position: absolute;
  inset: 0 0 auto 0;
  height: 88px;
  background: linear-gradient(135deg, var(--color-primary) 0%, #2f487a 100%);
  z-index: 0;
}

.wp-profile-hero__main {
  position: relative;
  z-index: 1;
  padding: 32px 28px 28px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px 24px;
  align-items: end;
}

@media (min-width: 768px) {
  .wp-profile-hero__main {
    grid-template-columns: auto 1fr auto;
    align-items: end;
  }
}

.wp-profile-hero__avatar-wrap {
  grid-row: 1;
  grid-column: 1;
  background-color: #ffffff;
  border-radius: 24px;
  padding: 5px;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.1);
  display: inline-flex;
}

.wp-profile-hero__info {
  grid-row: 1;
  grid-column: 2;
  min-width: 0;
  padding-top: 30px;
}

@media (max-width: 767px) {
  .wp-profile-hero__main {
    padding: 24px 20px 20px;
  }
  .wp-profile-hero__info {
    padding-top: 8px;
    grid-row: 2;
    grid-column: 1 / -1;
  }
}

.wp-profile-hero__name {
  font-family: "Poppins", sans-serif;
  font-size: 22px;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.2;
  margin: 0;
}

.wp-profile-hero__society {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-size: 14px;
  font-weight: 500;
  color: #475569;
}

.wp-profile-hero__society i {
  color: #94a3b8;
  font-size: 12px;
}

.wp-profile-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 10px;
  font-size: 13px;
  color: #64748b;
}

.wp-profile-hero__meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.wp-profile-hero__meta i {
  color: #94a3b8;
  font-size: 11px;
}

.wp-profile-hero__actions {
  grid-row: 1;
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 20px;
}

@media (min-width: 768px) {
  .wp-profile-hero__actions {
    grid-row: 1;
    grid-column: 3;
    padding-top: 0;
  }
}

/* === Summary cards (3 KPI haut de page) === */

.wp-summary-card {
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 18px 20px;
  text-decoration: none;
  color: inherit;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}

.wp-summary-card--clickable:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
  border-color: rgba(59, 89, 153, 0.25);
}

.wp-summary-card__header {
  display: flex;
  align-items: center;
  gap: 14px;
}

.wp-summary-card__label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #94a3b8;
  line-height: 1;
}

.wp-summary-card__value {
  font-family: "Poppins", sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.2;
  margin-top: 5px;
}

.wp-summary-card__hint {
  font-size: 12px;
  color: #64748b;
  margin-top: 12px;
  line-height: 1.4;
}

/* === Section title === */

.wp-section-title {
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 16px;
}

/* === Grille raccourcis === */

.wp-shortcuts-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

@media (min-width: 640px) {
  .wp-shortcuts-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .wp-shortcuts-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }
}

.wp-shortcut {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
  overflow: hidden;
}

.wp-shortcut:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
  border-color: rgba(59, 89, 153, 0.3);
}

.wp-shortcut__icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-content: center;
  font-size: 16px;
  flex-shrink: 0;
  transition: transform 0.18s ease;
}

.wp-shortcut:hover .wp-shortcut__icon {
  transform: scale(1.05);
}

.wp-shortcut__body {
  flex: 1;
  min-width: 0;
}

.wp-shortcut__label {
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.25;
  margin: 0;
}

.wp-shortcut__desc {
  font-size: 12px;
  color: #64748b;
  line-height: 1.4;
  margin-top: 3px;
}

.wp-shortcut__arrow {
  color: #cbd5e1;
  font-size: 11px;
  transition:
    transform 0.18s ease,
    color 0.18s ease;
}

.wp-shortcut:hover .wp-shortcut__arrow {
  color: var(--color-primary);
  transform: translateX(4px);
}

/* Tints pour les icones de raccourcis */
.wp-shortcut__icon--indigo {
  background-color: rgba(99, 102, 241, 0.1);
  color: #4338ca;
}
.wp-shortcut__icon--emerald {
  background-color: rgba(16, 185, 129, 0.1);
  color: #047857;
}
.wp-shortcut__icon--amber {
  background-color: rgba(245, 158, 11, 0.12);
  color: #b45309;
}
.wp-shortcut__icon--violet {
  background-color: rgba(139, 92, 246, 0.12);
  color: #6d28d9;
}
.wp-shortcut__icon--blue {
  background-color: rgba(59, 130, 246, 0.12);
  color: #1d4ed8;
}
.wp-shortcut__icon--pink {
  background-color: rgba(236, 72, 153, 0.12);
  color: #be185d;
}
.wp-shortcut__icon--cyan {
  background-color: rgba(6, 182, 212, 0.12);
  color: #0e7490;
}
.wp-shortcut__icon--slate {
  background-color: rgba(100, 116, 139, 0.12);
  color: #475569;
}

/* === Zone deconnexion (danger zone) === */

.wp-danger-zone {
  margin-top: 32px;
  padding: 22px;
  background-color: #ffffff;
  border: 1px dashed #fecaca;
  border-radius: 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.wp-danger-zone__info {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  flex: 1;
}

.wp-danger-zone__title {
  font-family: "Poppins", sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #1e293b;
  margin: 0;
  line-height: 1.2;
}

.wp-danger-zone__desc {
  font-size: 13px;
  color: #64748b;
  margin-top: 4px;
  line-height: 1.4;
}

/* === Bouton --danger renforce (rouge net) === */

.wp-btn--danger {
  background-color: #dc2626;
  color: #ffffff !important;
  border: 1px solid #dc2626;
}

.wp-btn--danger:hover {
  background-color: #b91c1c;
  border-color: #b91c1c;
  color: #ffffff !important;
}

/* === Banner warning === */

.wp-banner--warning {
  background: linear-gradient(
    135deg,
    rgba(245, 158, 11, 0.05) 0%,
    rgba(245, 158, 11, 0.12) 100%
  );
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.wp-banner--warning .wp-banner__icon {
  color: #d97706;
}

.wp-banner--warning .wp-banner__title {
  color: #78350f;
}

.wp-banner--warning .wp-banner__desc {
  color: #9a3412;
}

/* =========================================================
   PROFILE HERO : override pour fond uniforme blanc
   (remplace la version avec bandeau bleu)
   ========================================================= */

.wp-profile-hero {
  background-color: #ffffff;
  padding: 0;
}

.wp-profile-hero__decor {
  display: none !important;
}

.wp-profile-hero__main {
  padding: 28px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px 24px;
}

.wp-profile-hero__avatar-wrap {
  background: transparent;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
  flex-shrink: 0;
}

.wp-profile-hero__info {
  flex: 1;
  min-width: 200px;
  padding-top: 0;
}

.wp-profile-hero__actions {
  padding-top: 0;
  flex-wrap: wrap;
}

@media (max-width: 767px) {
  .wp-profile-hero__main {
    padding: 22px 20px;
    gap: 16px 18px;
  }
  .wp-profile-hero__actions {
    width: 100%;
  }
}

/* =========================================================
   PASSWORD FIELD : toggle eye + strength + criteria + match
   ========================================================= */

.wp-password-field {
  position: relative;
}

.wp-password-field input {
  padding-right: 48px;
}

.wp-password-field__toggle {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 0;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
  display: grid;
  place-content: center;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}

.wp-password-field__toggle:hover {
  background-color: #f1f5f9;
  color: #475569;
}

/* === Force du mot de passe (barre + label) === */

.wp-strength {
  margin-top: 12px;
}

.wp-strength__bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  height: 6px;
}

.wp-strength__bar > span {
  background-color: #e2e8f0;
  border-radius: 999px;
  transition: background-color 0.2s ease;
}

.wp-strength[data-state="weak"] .wp-strength__bar > span:nth-child(-n + 1) {
  background-color: #dc2626;
}
.wp-strength[data-state="fair"] .wp-strength__bar > span:nth-child(-n + 2) {
  background-color: #f97316;
}
.wp-strength[data-state="good"] .wp-strength__bar > span:nth-child(-n + 3) {
  background-color: #f59e0b;
}
.wp-strength[data-state="strong"] .wp-strength__bar > span:nth-child(-n + 4) {
  background-color: #10b981;
}
.wp-strength[data-state="excellent"]
  .wp-strength__bar
  > span:nth-child(-n + 4) {
  background-color: #059669;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.4);
}

.wp-strength__label {
  margin-top: 6px;
  font-size: 12px;
  color: #64748b;
}

.wp-strength__label strong {
  font-weight: 600;
}

.wp-strength[data-state="weak"] .wp-strength__label strong {
  color: #dc2626;
}
.wp-strength[data-state="fair"] .wp-strength__label strong {
  color: #ea580c;
}
.wp-strength[data-state="good"] .wp-strength__label strong {
  color: #d97706;
}
.wp-strength[data-state="strong"] .wp-strength__label strong {
  color: #059669;
}
.wp-strength[data-state="excellent"] .wp-strength__label strong {
  color: #047857;
}

/* === Liste des criteres === */

.wp-criteria {
  list-style: none;
  margin: 14px 0 0;
  padding: 14px 16px;
  background-color: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px 16px;
}

@media (min-width: 640px) {
  .wp-criteria {
    grid-template-columns: repeat(2, 1fr);
  }
}

.wp-criteria li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #64748b;
  line-height: 1.4;
  transition: color 0.18s ease;
}

.wp-criteria li i {
  width: 14px;
  font-size: 12px;
  color: #cbd5e1;
  transition: color 0.18s ease;
}

.wp-criteria li.is-ok {
  color: #047857;
}

.wp-criteria li.is-ok i {
  color: #10b981;
}

/* === Match indicator === */

.wp-match {
  margin-top: 10px;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  background-color: #f8fafc;
  color: #64748b;
  line-height: 1.4;
}

.wp-match i {
  font-size: 13px;
  flex-shrink: 0;
}

.wp-match[data-state="empty"] {
  background-color: #f8fafc;
  color: #64748b;
}
.wp-match[data-state="empty"] i {
  color: #94a3b8;
}

.wp-match[data-state="ok"] {
  background-color: #ecfdf5;
  color: #047857;
}
.wp-match[data-state="ok"] i {
  color: #10b981;
}

.wp-match[data-state="ko"] {
  background-color: #fef2f2;
  color: #b91c1c;
}
.wp-match[data-state="ko"] i {
  color: #dc2626;
}

/* === Bouton submit en attente === */

#editPasswordButton[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

#editPasswordButton.is-ready {
  opacity: 1;
  cursor: pointer;
}

/* =========================================================
   PROFILE HERO : alignement vertical centré strict
   ========================================================= */

.wp-profile-hero__main {
  padding: 24px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  min-height: auto;
}

.wp-profile-hero__avatar-wrap,
.wp-profile-hero__info,
.wp-profile-hero__actions {
  align-self: center;
}

.wp-profile-hero__info {
  flex: 1 1 280px;
  min-width: 0;
  padding: 0;
}

.wp-profile-hero__actions {
  flex-shrink: 0;
  padding: 0;
  display: flex;
  gap: 8px;
}

@media (max-width: 767px) {
  .wp-profile-hero__main {
    padding: 22px 20px;
  }
  .wp-profile-hero__actions {
    flex-basis: 100%;
    justify-content: flex-start;
  }
}

/* =========================================================
   TOGGLE switch propre (CSS only)
   ========================================================= */

.wp-toggle {
  position: relative;
  display: inline-flex;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
  cursor: pointer;
  align-items: center;
  user-select: none;
}

.wp-toggle__input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
  z-index: 2;
}

.wp-toggle__visual {
  position: absolute;
  inset: 0;
  background-color: #cbd5e1;
  border-radius: 999px;
  transition: background-color 0.2s ease;
  pointer-events: none;
}

.wp-toggle__visual::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background-color: #ffffff;
  border-radius: 50%;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.1),
    0 0 1px rgba(0, 0, 0, 0.08);
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.wp-toggle__input:checked ~ .wp-toggle__visual {
  background-color: var(--color-primary);
}

.wp-toggle__input:checked ~ .wp-toggle__visual::after {
  transform: translateX(20px);
}

.wp-toggle__input:focus-visible ~ .wp-toggle__visual {
  box-shadow: 0 0 0 3px rgba(59, 89, 153, 0.25);
}

.wp-toggle__input:disabled {
  cursor: not-allowed;
}

.wp-toggle__input:disabled ~ .wp-toggle__visual {
  opacity: 0.5;
  cursor: not-allowed;
}

/* =========================================================
   PAGE NOTIFICATIONS : layout
   ========================================================= */

.wp-notif-grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.wp-notif-card {
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  overflow: hidden;
}

.wp-notif-card__header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 24px;
  border-bottom: 1px solid #f1f5f9;
  background-color: #fafafa;
}

.wp-notif-card__title {
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.3;
  margin: 0;
}

.wp-notif-card__desc {
  font-size: 13px;
  color: #64748b;
  line-height: 1.5;
  margin-top: 3px;
}

/* === Liste des options === */

.wp-notif-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.wp-notif-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 24px;
  border-bottom: 1px solid #f1f5f9;
  transition: background-color 0.15s ease;
}

.wp-notif-row:last-child {
  border-bottom: 0;
}

.wp-notif-row:hover:not(.is-locked) {
  background-color: #fafbfc;
}

.wp-notif-row__icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background-color: rgba(59, 89, 153, 0.08);
  color: var(--color-primary);
  display: grid;
  place-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

.wp-notif-row.is-locked .wp-notif-row__icon {
  background-color: #f1f5f9;
  color: #94a3b8;
}

.wp-notif-row__body {
  flex: 1;
  min-width: 0;
}

.wp-notif-row__title {
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
  line-height: 1.4;
}

.wp-notif-row__desc {
  font-size: 12px;
  color: #64748b;
  line-height: 1.5;
  margin-top: 3px;
}

.wp-notif-row__status {
  font-size: 12px;
  color: #64748b;
  margin-top: 6px;
}

.wp-notif-row__status strong {
  color: var(--color-primary);
  font-weight: 600;
}

.wp-notif-row__badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  padding: 2px 8px;
  background-color: #f1f5f9;
  color: #64748b;
  font-size: 10px;
  font-weight: 600;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.wp-notif-row__select {
  width: 180px;
  flex-shrink: 0;
  height: 40px;
}

@media (max-width: 639px) {
  .wp-notif-row {
    flex-wrap: wrap;
    gap: 14px;
  }
  .wp-notif-row__body {
    flex-basis: calc(100% - 54px);
  }
  .wp-notif-row__select,
  .wp-notif-row .wp-toggle {
    margin-left: 54px;
  }
}

/* === Mini info en bas === */

.wp-notif-info {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background-color: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  font-size: 12px;
  color: #64748b;
}

.wp-notif-info i {
  color: var(--color-primary);
  font-size: 13px;
}

/* =========================================================
   Back link : lien retour avant le page header
   ========================================================= */

.wp-back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  padding: 6px 12px 6px 8px;
  background-color: transparent;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #64748b;
  text-decoration: none;
  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    transform 0.15s ease;
}

.wp-back-link:hover {
  background-color: #f1f5f9;
  color: var(--color-primary);
}

.wp-back-link:hover i {
  transform: translateX(-2px);
}

.wp-back-link i {
  color: #94a3b8;
  transition:
    transform 0.18s ease,
    color 0.15s ease;
}

.wp-back-link:hover i {
  color: var(--color-primary);
}

/* =========================================================
   FILE UPLOAD : zone branded + preview + upload state
   ========================================================= */

.wp-file-upload {
  position: relative;
  margin-top: 4px;
}

.wp-file-upload__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.wp-file-upload__zone {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 20px;
  border: 2px dashed rgba(59, 89, 153, 0.3);
  border-radius: 14px;
  background-color: rgba(59, 89, 153, 0.04);
  cursor: pointer;
  transition:
    border-color 0.18s ease,
    background-color 0.18s ease,
    transform 0.15s ease;
}

.wp-file-upload__zone:hover,
.wp-file-upload__zone.is-drag {
  border-color: var(--color-primary);
  background-color: rgba(59, 89, 153, 0.08);
}

.wp-file-upload__zone.is-drag {
  transform: scale(1.005);
}

.wp-file-upload__icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background-color: var(--color-primary);
  color: #ffffff;
  display: grid;
  place-content: center;
  font-size: 20px;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(59, 89, 153, 0.22);
}

.wp-file-upload__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.wp-file-upload__text strong {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary);
  line-height: 1.3;
}

.wp-file-upload__text > span {
  font-size: 12px;
  color: #64748b;
}

.wp-file-upload__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background-color: var(--color-primary);
  color: #ffffff;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  flex-shrink: 0;
  transition: background-color 0.15s ease;
}

.wp-file-upload__zone:hover .wp-file-upload__cta {
  background-color: var(--color-primary-focus);
}

@media (max-width: 559px) {
  .wp-file-upload__zone {
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }
}

/* === Etat upload en cours === */

.wp-file-upload__progress {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border: 1px solid rgba(59, 89, 153, 0.25);
  border-radius: 14px;
  background-color: rgba(59, 89, 153, 0.04);
}

.wp-file-upload__progress-text {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-primary);
}

/* Spinner */
.wp-spinner {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2.5px solid rgba(59, 89, 153, 0.2);
  border-top-color: var(--color-primary);
  animation: wp-spin 0.7s linear infinite;
  flex-shrink: 0;
}

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

/* === Preview apres upload === */

.wp-file-upload__preview {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background-color: #ffffff;
}

.wp-file-upload__preview img {
  width: 88px;
  height: 60px;
  object-fit: contain;
  background-color: #f8fafc;
  border-radius: 8px;
  padding: 6px;
  flex-shrink: 0;
}

.wp-file-upload__info {
  flex: 1;
  min-width: 0;
}

.wp-file-upload__filename {
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
  line-height: 1.3;
  word-break: break-all;
}

.wp-file-upload__hint {
  font-size: 12px;
  color: #64748b;
  margin-top: 3px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.wp-file-upload__reset {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  background-color: transparent;
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  color: #475569;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease;
}

.wp-file-upload__reset:hover {
  background-color: #f1f5f9;
  border-color: #94a3b8;
}

/* =========================================================
   VALIDATION STATES : indicateurs visuels live
   ========================================================= */

.wp-validation-msg {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.4;
  display: none;
  align-items: center;
  gap: 6px;
}

.wp-validation-msg::before {
  content: "";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 12px;
}

.wp-validated.is-valid .wp-input,
.wp-validated.is-valid .wp-select,
.wp-validated.is-valid .wp-textarea {
  border-color: #10b981;
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.1);
}

.wp-validated.is-invalid .wp-input,
.wp-validated.is-invalid .wp-select,
.wp-validated.is-invalid .wp-textarea {
  border-color: #dc2626;
  box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.1);
}

.wp-validation-msg[data-state="valid"] {
  display: flex;
  color: #047857;
}

.wp-validation-msg[data-state="valid"]::before {
  content: "\f058"; /* fa-circle-check */
  color: #10b981;
}

.wp-validation-msg[data-state="invalid"] {
  display: flex;
  color: #b91c1c;
}

.wp-validation-msg[data-state="invalid"]::before {
  content: "\f06a"; /* fa-circle-exclamation */
  color: #dc2626;
}

/* === Bouton disable === */

.wp-btn.is-disabled,
.wp-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* =========================================================
   CARTE ABONNEMENT (Mes achats)
   ========================================================= */

.wp-sub-card {
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  overflow: hidden;
  position: relative;
}

.wp-sub-card--active {
  border-color: rgba(16, 185, 129, 0.3);
  background: linear-gradient(
    135deg,
    #ffffff 0%,
    rgba(16, 185, 129, 0.04) 100%
  );
}

.wp-sub-card--expired {
  border-color: rgba(220, 38, 38, 0.25);
  background: linear-gradient(135deg, #ffffff 0%, rgba(220, 38, 38, 0.03) 100%);
}

.wp-sub-card__head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 24px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.05);
}

.wp-sub-card__icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: grid;
  place-content: center;
  font-size: 22px;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--color-primary) 0%, #2f487a 100%);
  color: #ffffff;
  box-shadow: 0 6px 16px rgba(59, 89, 153, 0.2);
}

.wp-sub-card--expired .wp-sub-card__icon {
  background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%);
  box-shadow: 0 6px 16px rgba(100, 116, 139, 0.2);
}

.wp-sub-card__head-text {
  flex: 1;
  min-width: 0;
}

.wp-sub-card__eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #94a3b8;
  margin-bottom: 3px;
}

.wp-sub-card__title {
  font-family: "Poppins", sans-serif;
  font-size: 22px;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.2;
  margin: 0;
}

.wp-sub-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}

.wp-sub-card--active .wp-sub-card__badge {
  background-color: rgba(16, 185, 129, 0.12);
  color: #047857;
}

.wp-sub-card--expired .wp-sub-card__badge {
  background-color: rgba(220, 38, 38, 0.1);
  color: #b91c1c;
}

.wp-sub-card__body {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 22px 24px;
  flex-wrap: wrap;
}

.wp-sub-card__metric {
  flex-shrink: 0;
  min-width: 110px;
}

.wp-sub-card__metric-value {
  font-family: "Poppins", sans-serif;
  font-size: 46px;
  font-weight: 700;
  color: #047857;
  line-height: 1;
  letter-spacing: -0.02em;
}

.wp-sub-card--expired .wp-sub-card__metric--muted .wp-sub-card__metric-value {
  font-size: 36px;
  color: #b91c1c;
}

.wp-sub-card__metric-label {
  font-size: 12px;
  font-weight: 500;
  color: #64748b;
  margin-top: 6px;
  line-height: 1.3;
}

.wp-sub-card__separator {
  width: 1px;
  align-self: stretch;
  background: linear-gradient(
    180deg,
    transparent 0%,
    #e2e8f0 50%,
    transparent 100%
  );
  flex-shrink: 0;
}

.wp-sub-card__detail {
  flex: 1;
  min-width: 0;
}

.wp-sub-card__detail-label {
  font-size: 12px;
  font-weight: 500;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 6px;
}

.wp-sub-card__detail-label i {
  color: #94a3b8;
  font-size: 11px;
}

.wp-sub-card__detail-value {
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #0f172a;
  margin-top: 4px;
}

.wp-sub-card__detail-hint {
  font-size: 12px;
  color: #94a3b8;
  margin-top: 3px;
  line-height: 1.4;
}

.wp-sub-card__footer {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 16px 24px 20px;
  border-top: 1px solid rgba(15, 23, 42, 0.05);
  background-color: rgba(248, 250, 252, 0.5);
}

@media (max-width: 559px) {
  .wp-sub-card__head {
    padding: 18px 18px;
    flex-wrap: wrap;
  }
  .wp-sub-card__body {
    padding: 18px;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }
  .wp-sub-card__separator {
    width: auto;
    height: 1px;
    background: linear-gradient(
      90deg,
      transparent 0%,
      #e2e8f0 50%,
      transparent 100%
    );
    align-self: stretch;
  }
  .wp-sub-card__footer {
    padding: 14px 18px 18px;
  }
  .wp-sub-card__metric-value {
    font-size: 36px;
  }
}

/* Chiffres tabulaires pour les colonnes prix */
.tabular-nums {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* =========================================================
   PAGE PARRAINAGE : hero + steps + shares
   ========================================================= */

.wp-referral-hero {
  position: relative;
  background: linear-gradient(135deg, var(--color-primary) 0%, #2f487a 100%);
  border-radius: 18px;
  overflow: hidden;
  color: #ffffff;
  box-shadow: 0 18px 36px rgba(59, 89, 153, 0.2);
}

.wp-referral-hero__decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(
      circle 120px at 90% 20%,
      rgba(255, 255, 255, 0.14),
      transparent 60%
    ),
    radial-gradient(
      circle 80px at 80% 90%,
      rgba(255, 255, 255, 0.1),
      transparent 60%
    ),
    radial-gradient(
      circle 60px at 15% 80%,
      rgba(255, 255, 255, 0.06),
      transparent 60%
    );
}

.wp-referral-hero__main {
  position: relative;
  z-index: 1;
  padding: 28px 30px;
}

.wp-referral-hero__head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
}

.wp-referral-hero__icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background-color: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #ffffff;
  display: grid;
  place-content: center;
  font-size: 22px;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.wp-referral-hero__eyebrow {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 4px;
}

.wp-referral-hero__title {
  font-family: "Poppins", sans-serif;
  font-size: 22px;
  font-weight: 600;
  color: #ffffff;
  line-height: 1.25;
  margin: 0;
}

.wp-referral-hero__link-block {
  margin-top: 4px;
}

.wp-referral-hero__link-label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 8px;
}

.wp-referral-hero__link-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: stretch;
}

.wp-referral-hero__input {
  flex: 1 1 280px;
  min-width: 0;
  height: 48px;
  padding: 0 16px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background-color: rgba(255, 255, 255, 0.96);
  color: #1e293b;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 13px;
  letter-spacing: -0.01em;
}

.wp-referral-hero__input:focus {
  outline: none;
  background-color: #ffffff;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.2);
}

.wp-referral-hero__copy-btn {
  height: 48px;
  background-color: #ffffff;
  color: var(--color-primary) !important;
  border: 1px solid #ffffff;
  flex-shrink: 0;
  font-weight: 600;
}

.wp-referral-hero__copy-btn:hover {
  background-color: #f1f5f9;
  color: var(--color-primary) !important;
  border-color: #f1f5f9;
}

.wp-referral-hero__copy-btn.is-copied {
  background-color: #10b981;
  color: #ffffff !important;
  border-color: #10b981;
}

.wp-referral-hero__shares {
  margin-top: 22px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.wp-referral-hero__shares-label {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
}

.wp-referral-hero__shares-list {
  display: flex;
  gap: 8px;
}

.wp-share-btn {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: inline-grid;
  place-content: center;
  color: #ffffff;
  font-size: 15px;
  background-color: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition:
    transform 0.18s ease,
    background-color 0.18s ease;
  text-decoration: none;
}

.wp-share-btn:hover {
  transform: translateY(-2px);
}

.wp-share-btn--whatsapp:hover {
  background-color: #25d366;
  color: #ffffff;
  border-color: #25d366;
}
.wp-share-btn--email:hover {
  background-color: #ffffff;
  color: var(--color-primary);
  border-color: #ffffff;
}
.wp-share-btn--linkedin:hover {
  background-color: #0a66c2;
  color: #ffffff;
  border-color: #0a66c2;
}
.wp-share-btn--sms:hover {
  background-color: #f59e0b;
  color: #ffffff;
  border-color: #f59e0b;
}

@media (max-width: 559px) {
  .wp-referral-hero__main {
    padding: 22px 18px;
  }
  .wp-referral-hero__head {
    gap: 12px;
    margin-bottom: 18px;
  }
  .wp-referral-hero__title {
    font-size: 18px;
  }
  .wp-referral-hero__icon {
    width: 44px;
    height: 44px;
    font-size: 18px;
  }
  .wp-referral-hero__copy-btn {
    width: 100%;
  }
}

/* =========================================================
   STEPS GRID : "Comment ça marche" (3 etapes)
   ========================================================= */

.wp-steps-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 768px) {
  .wp-steps-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}

.wp-step-card {
  position: relative;
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 22px 20px;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}

.wp-step-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
  border-color: rgba(59, 89, 153, 0.2);
}

.wp-step-card__number {
  position: absolute;
  top: 16px;
  right: 18px;
  font-family: "Poppins", sans-serif;
  font-size: 44px;
  font-weight: 700;
  color: rgba(59, 89, 153, 0.1);
  line-height: 1;
  letter-spacing: -0.02em;
}

.wp-step-card__icon {
  margin-bottom: 14px;
}

.wp-step-card__title {
  font-family: "Poppins", sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.3;
  margin: 0;
}

.wp-step-card__desc {
  font-size: 13px;
  color: #64748b;
  line-height: 1.55;
  margin-top: 6px;
}

/* =========================================================
   Form row 2-1 (IBAN + BIC)
   ========================================================= */

@media (min-width: 640px) {
  .wp-form-row--2-1 {
    grid-template-columns: 2fr 1fr;
  }
}

/* =========================================================
   FIX alignement form-row : inputs colles a leurs labels
   (au lieu d'etre pousses en bas, ce qui creait un decalage
    quand un champ avait une helper text et l'autre non)
   ========================================================= */

.wp-form-row {
  align-items: start;
}

.wp-form-row > .wp-form-group > .wp-input,
.wp-form-row > .wp-form-group > .wp-select,
.wp-form-row > .wp-form-group > .wp-textarea,
.wp-form-row > .wp-form-group > .wp-locked-field {
  margin-top: 0; /* annule le margin-top: auto precedent */
}

.wp-form-row > .wp-form-group > .wp-input + .wp-form-help,
.wp-form-row > .wp-form-group > .wp-select + .wp-form-help,
.wp-form-row > .wp-form-group > .wp-textarea + .wp-form-help {
  margin-top: 6px;
}

/* =========================================================
   VIDEO CARD : tuteur premium en haut de page
   ========================================================= */

.wp-video-card {
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.06);
}

.wp-video-card__head {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 26px;
  border-bottom: 1px solid #f1f5f9;
  background: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%);
}

.wp-video-card__eyebrow {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #94a3b8;
  margin-bottom: 4px;
}

.wp-video-card__title {
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.3;
  margin: 0;
}

.wp-video-card__desc {
  font-size: 13px;
  color: #64748b;
  line-height: 1.55;
  margin-top: 4px;
}

.wp-video-card__player {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: #0f172a;
  overflow: hidden;
}

.wp-video-card__iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

@media (max-width: 559px) {
  .wp-video-card__head {
    padding: 18px 18px;
    gap: 14px;
  }
  .wp-video-card__title {
    font-size: 16px;
  }
}

/* =========================================================
   Layout haut /parrainage : hero (7) + video (5) desktop
   ========================================================= */

.wp-referral-top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: stretch;
}

@media (min-width: 1024px) {
  .wp-referral-top {
    grid-template-columns: 7fr 5fr;
    gap: 24px;
  }
}

/* La carte hero et la carte vidéo prennent toute la hauteur disponible */
.wp-referral-top > .wp-referral-hero,
.wp-referral-top > .wp-video-card,
.wp-referral-top > .wp-banner {
  height: 100%;
  margin: 0;
}

/* Override pour la version compacte du video-card en col-5 */
.wp-referral-top .wp-video-card {
  display: flex;
  flex-direction: column;
  border-radius: 18px;
}

.wp-referral-top .wp-video-card__head {
  padding: 14px 18px;
  gap: 12px;
}

.wp-referral-top .wp-video-card__head-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
  color: #ffffff;
  display: grid;
  place-content: center;
  font-size: 15px;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(220, 38, 38, 0.22);
}

.wp-referral-top .wp-video-card__title {
  font-size: 15px;
}

.wp-referral-top .wp-video-card__eyebrow {
  font-size: 10px;
}

.wp-referral-top .wp-video-card__player {
  flex: 1;
  min-height: 0;
}

/* =========================================================
   FORM STACK : gap vertical solide entre wp-form-group
   (remplace space-y-5 Tailwind qui peut etre absent du bundle)
   ========================================================= */

.wp-form-stack {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* =========================================================
   FIX DEFINITIF alignement wp-form-row (IBAN / BIC)
   - Inputs cote a cote : meme position verticale, peu importe
     la presence de wp-form-help ou wp-validation-msg sous l'un.
   - Force grid align-items: start + reset margins.
   ========================================================= */

.wp-form-row {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 18px !important;
  align-items: start !important;
}

@media (min-width: 640px) {
  .wp-form-row {
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
  }
  .wp-form-row--3-2 {
    grid-template-columns: 1fr 2fr !important;
  }
  .wp-form-row--2-1 {
    grid-template-columns: 2fr 1fr !important;
  }
}

.wp-form-row > .wp-form-group {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  margin: 0 !important;
}

.wp-form-row > .wp-form-group > .wp-label {
  margin-bottom: 8px !important;
  flex-shrink: 0 !important;
  order: 1;
}

.wp-form-row > .wp-form-group > .wp-input,
.wp-form-row > .wp-form-group > .wp-select,
.wp-form-row > .wp-form-group > .wp-textarea,
.wp-form-row > .wp-form-group > .wp-locked-field {
  margin-top: 0 !important;
  order: 2;
}

/* Les help/msg apparaissent SOUS l'input mais ne poussent pas la grille */
.wp-form-row > .wp-form-group > .wp-form-help,
.wp-form-row > .wp-form-group > .wp-validation-msg {
  margin-top: 8px !important;
  order: 3;
  flex-shrink: 0;
}

/* =========================================================
   Auth divider : separateur "ou" entre form et alternatives
   Avec marges propres et label centre.
   ========================================================= */

.wp-auth-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 36px 0 28px;
}

.wp-auth-divider__line {
  flex: 1;
  height: 1px;
  background-color: #e2e8f0;
}

.wp-auth-divider__label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #94a3b8;
  padding: 0 4px;
}

/* =========================================================
   MODAL : Mode Vision (impersonation)
   ========================================================= */

.wp-no-scroll {
  overflow: hidden;
}

.wp-vision-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: wp-vision-fadein 0.18s ease;
}

@keyframes wp-vision-fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.wp-vision-modal__backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
}

.wp-vision-modal__dialog {
  position: relative;
  width: 100%;
  max-width: 640px;
  max-height: calc(100vh - 48px);
  background-color: #ffffff;
  border-radius: 20px;
  box-shadow: 0 30px 60px rgba(15, 23, 42, 0.3);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: wp-vision-slidein 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes wp-vision-slidein {
  from {
    transform: translateY(20px) scale(0.96);
    opacity: 0;
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

.wp-vision-modal__header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 24px 18px;
  border-bottom: 1px solid #f1f5f9;
}

.wp-vision-modal__title {
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #0f172a;
  margin: 0;
  line-height: 1.2;
}

.wp-vision-modal__desc {
  font-size: 12px;
  color: #64748b;
  margin-top: 4px;
  line-height: 1.45;
}

.wp-vision-modal__close {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background-color: transparent;
  border: 0;
  color: #94a3b8;
  cursor: pointer;
  display: grid;
  place-content: center;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
  flex-shrink: 0;
}

.wp-vision-modal__close:hover {
  background-color: #f1f5f9;
  color: #1e293b;
}

/* === Bannière vision actif === */
.wp-vision-active-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 24px;
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  border-bottom: 1px solid #a7f3d0;
}

/* === Recherche === */
.wp-vision-modal__search {
  position: relative;
  padding: 14px 24px;
  border-bottom: 1px solid #f1f5f9;
  background-color: #fafbfc;
}

.wp-vision-modal__search i {
  position: absolute;
  left: 38px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 13px;
}

.wp-vision-modal__search input {
  width: 100%;
  height: 42px;
  padding: 0 14px 0 40px;
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  font-size: 14px;
  color: #1e293b;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.wp-vision-modal__search input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(59, 89, 153, 0.12);
}

/* === Body scrollable === */
.wp-vision-modal__body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 24px 22px;
}

.wp-vision-section {
  margin-top: 18px;
}

.wp-vision-section:first-child {
  margin-top: 10px;
}

.wp-vision-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
  padding: 0 4px;
}

.wp-vision-section__head h3 {
  font-size: 12px;
  font-weight: 700;
  color: #0f172a;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.wp-vision-section__head h3 i {
  color: #94a3b8;
  font-size: 11px;
}

.wp-vision-section__hint {
  font-size: 11px;
  font-weight: 500;
  color: #94a3b8;
  text-transform: none;
  letter-spacing: 0;
  margin-left: auto;
}

/* === Liste === */
.wp-vision-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wp-vision-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  margin: 0;
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease;
}

.wp-vision-row:hover {
  border-color: rgba(59, 89, 153, 0.3);
  background-color: rgba(59, 89, 153, 0.03);
}

.wp-vision-row__main {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.wp-vision-row__info {
  min-width: 0;
  flex: 1;
}

.wp-vision-row__name {
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.2;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wp-vision-row__meta {
  font-size: 12px;
  color: #64748b;
  margin-top: 2px;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* === Skeletons (chargement) === */
.wp-vision-skeleton {
  height: 58px;
  border-radius: 12px;
  background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 50%, #f1f5f9 100%);
  background-size: 200% 100%;
  animation: wp-skeleton-shimmer 1.4s ease-in-out infinite;
}

@keyframes wp-skeleton-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

.wp-vision-empty {
  padding: 18px 14px;
  text-align: center;
  font-size: 13px;
  color: #94a3b8;
  background-color: #f8fafc;
  border-radius: 12px;
}

/* === Pill / badge dans le dropdown === */
.wp-dropdown__item--vision {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
  font: inherit;
}

.wp-dropdown__pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-left: auto;
}

.wp-dropdown__pill--success {
  background-color: #ecfdf5;
  color: #047857;
}

@media (max-width: 559px) {
  .wp-vision-modal {
    padding: 0;
  }
  .wp-vision-modal__dialog {
    max-width: 100%;
    max-height: 100%;
    border-radius: 0;
    height: 100vh;
  }
  .wp-vision-modal__header {
    padding: 18px 18px 14px;
  }
  .wp-vision-modal__search {
    padding: 12px 18px;
  }
  .wp-vision-modal__body {
    padding: 8px 18px 18px;
  }
}

/* =========================================================
   VISION MODE BAR : bandeau rouge fixé en haut quand le
   mode vision (impersonation) est actif. Bien voyant.
   ========================================================= */

.wp-vision-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1200;
  background: linear-gradient(90deg, #b91c1c 0%, #dc2626 50%, #b91c1c 100%);
  color: #ffffff;
  box-shadow: 0 6px 14px rgba(220, 38, 38, 0.25);
  animation: wp-vision-pulse 2.4s ease-in-out infinite;
}

@keyframes wp-vision-pulse {
  0%,
  100% {
    box-shadow: 0 6px 14px rgba(220, 38, 38, 0.25);
  }
  50% {
    box-shadow: 0 6px 20px rgba(220, 38, 38, 0.5);
  }
}

.wp-vision-bar__inner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 24px;
  max-width: 100%;
}

.wp-vision-bar__icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: grid;
  place-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

.wp-vision-bar__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.wp-vision-bar__label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1;
}

.wp-vision-bar__target {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  opacity: 0.92;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wp-vision-bar__actions {
  flex-shrink: 0;
  margin: 0;
}

.wp-vision-bar__exit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background-color: rgba(255, 255, 255, 0.92);
  color: #b91c1c;
  border: 1px solid #ffffff;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    transform 0.05s ease;
}

.wp-vision-bar__exit:hover {
  background-color: #ffffff;
}

.wp-vision-bar__exit:active {
  transform: translateY(1px);
}

@media (max-width: 639px) {
  .wp-vision-bar__inner {
    padding: 8px 14px;
    gap: 10px;
  }
  .wp-vision-bar__label {
    font-size: 11px;
  }
  .wp-vision-bar__target {
    font-size: 12px;
  }
  .wp-vision-bar__exit span {
    display: none;
  }
  .wp-vision-bar__exit {
    padding: 8px 10px;
  }
}

/* === Décalage du shell pour ne pas être caché derrière la bar === */

body.wp-vision-active .wp-shell {
  padding-top: 56px;
}

body.wp-vision-active .wp-sidebar {
  top: 56px;
}

body.wp-vision-active .wp-header {
  top: 0;
}

@media (max-width: 639px) {
  body.wp-vision-active .wp-shell {
    padding-top: 48px;
  }
  body.wp-vision-active .wp-sidebar {
    top: 48px;
  }
}

/* === Bouton "Vision Mode" qui était dans le header existant : peut être masqué
   pour ne pas redoubler avec la bar === */
body.wp-vision-active .wp-header .wp-badge--warning {
  display: none;
}

/* =========================================================
   VISION ROW : etats locked / loading lors de l'activation
   ========================================================= */

.wp-vision-row button[type="submit"].is-loading,
.wp-vision-row button[type="submit"].is-locked {
  cursor: not-allowed;
  pointer-events: none;
}

.wp-vision-row button[type="submit"].is-loading {
  background-color: var(--color-primary-focus);
  color: #ffffff !important;
  opacity: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.wp-vision-row button[type="submit"].is-locked:not(.is-loading) {
  opacity: 0.45;
}

/* Spinner small (16px) — variante de wp-spinner */
.wp-spinner--sm {
  width: 14px;
  height: 14px;
  border-width: 2px;
  border-color: rgba(255, 255, 255, 0.3);
  border-top-color: #ffffff;
}

/* Overlay subtil sur la liste pour signaler l'attente */
.wp-vision-list:has(button.is-loading) {
  pointer-events: none;
}

/* =========================================================
   REFERRAL BLOCK : carte parrainage du dashboard
   ========================================================= */

.wp-referral-block {
  position: relative;
  display: block;
  padding: 22px;
  border-radius: 18px;
  background:
    radial-gradient(
      circle 140px at 90% 0%,
      rgba(255, 255, 255, 0.2),
      transparent 60%
    ),
    radial-gradient(
      circle 100px at 10% 100%,
      rgba(255, 255, 255, 0.12),
      transparent 60%
    ),
    linear-gradient(135deg, var(--color-primary) 0%, #2f487a 100%);
  color: #ffffff;
  overflow: hidden;
  text-decoration: none;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
  box-shadow: 0 12px 24px rgba(59, 89, 153, 0.18);
}

.wp-referral-block:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 32px rgba(59, 89, 153, 0.28);
  color: #ffffff;
}

/* Decor : confettis subtils */
.wp-referral-block__decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(
      circle 3px at 25% 20%,
      rgba(255, 255, 255, 0.4),
      transparent 60%
    ),
    radial-gradient(
      circle 2px at 70% 15%,
      rgba(255, 255, 255, 0.3),
      transparent 60%
    ),
    radial-gradient(
      circle 2px at 85% 75%,
      rgba(255, 255, 255, 0.35),
      transparent 60%
    ),
    radial-gradient(
      circle 3px at 15% 88%,
      rgba(255, 255, 255, 0.25),
      transparent 60%
    ),
    radial-gradient(
      circle 2px at 50% 90%,
      rgba(255, 255, 255, 0.35),
      transparent 60%
    );
}

/* Badge eyebrow */
.wp-referral-block__badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background-color: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.wp-referral-block__badge i {
  font-size: 9px;
  color: #fde68a;
}

/* Icone cadeau : box marquante */
.wp-referral-block__icon {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background-color: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: grid;
  place-content: center;
  font-size: 24px;
  color: #ffffff;
  margin-top: 18px;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transform: rotate(-4deg);
  transition: transform 0.2s ease;
}

.wp-referral-block:hover .wp-referral-block__icon {
  transform: rotate(0) scale(1.06);
}

/* Titre */
.wp-referral-block__title {
  position: relative;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  line-height: 1.25;
  margin: 14px 0 0;
}

/* Recompense en valeur */
.wp-referral-block__reward {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 8px;
}

.wp-referral-block__amount {
  font-family: "Poppins", sans-serif;
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  color: #ffffff;
  letter-spacing: -0.02em;
}

.wp-referral-block__amount-label {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.3;
}

/* CTA */
.wp-referral-block__cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 9px 14px;
  background-color: #ffffff;
  color: var(--color-primary);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  transition:
    gap 0.15s ease,
    background-color 0.15s ease;
}

.wp-referral-block:hover .wp-referral-block__cta {
  gap: 12px;
}

.wp-referral-block__cta i {
  font-size: 10px;
  transition: transform 0.18s ease;
}

.wp-referral-block:hover .wp-referral-block__cta i {
  transform: translateX(2px);
}

/* =========================================================
   PAGE TRANSACTIONS/NEW : cartes type-de-lien avec gradients V1
   Couleurs reprises de wannapay-v2 pour cohérence de marque.
   ========================================================= */

.wp-link-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

@media (min-width: 768px) {
  .wp-link-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
  }
}

.wp-link-card {
  position: relative;
  display: block;
  padding: 22px 22px 20px;
  border-radius: 18px;
  color: #ffffff;
  text-decoration: none;
  overflow: hidden;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
  min-height: 230px;
}

.wp-link-card:hover {
  transform: translateY(-3px);
  color: #ffffff;
}

/* Halos décoratifs subtils */
.wp-link-card__decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(
      circle 120px at 100% 0%,
      rgba(255, 255, 255, 0.18),
      transparent 60%
    ),
    radial-gradient(
      circle 90px at 0% 100%,
      rgba(255, 255, 255, 0.1),
      transparent 60%
    );
}

/* Badge pill (eyebrow) */
.wp-link-card__badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background-color: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  margin-bottom: 14px;
}

.wp-link-card__badge i {
  font-size: 9px;
}

/* Icône box */
.wp-link-card__icon {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background-color: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: grid;
  place-content: center;
  font-size: 22px;
  color: #ffffff;
  margin-bottom: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transition:
    transform 0.2s ease,
    background-color 0.2s ease;
}

.wp-link-card:hover .wp-link-card__icon {
  transform: scale(1.06) rotate(-3deg);
  background-color: rgba(255, 255, 255, 0.28);
}

/* Quand on a un badge + une icône, on resserre l'espace entre eux */
.wp-link-card__badge + .wp-link-card__icon {
  margin-top: 0;
}

/* Titre */
.wp-link-card__title {
  position: relative;
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.25;
  color: #ffffff;
  margin: 0 0 6px;
}

/* Description */
.wp-link-card__desc {
  position: relative;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.88);
  margin: 0 0 18px;
  min-height: 40px;
}

/* CTA */
.wp-link-card__cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  background-color: #ffffff;
  color: #0f172a;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  transition: gap 0.15s ease;
}

.wp-link-card:hover .wp-link-card__cta {
  gap: 12px;
}

.wp-link-card__cta i {
  font-size: 10px;
  transition: transform 0.18s ease;
}

.wp-link-card:hover .wp-link-card__cta i {
  transform: translateX(2px);
}

/* =========================================================
   VARIANTES DE COULEUR (issues de la V1)
   ========================================================= */

/* --- Lien classique : bleu primary → cyan (V1) --- */
.wp-link-card--classic {
  background: linear-gradient(40deg, #3b5998 0%, #19cce6 100%);
  box-shadow: 0 14px 28px rgba(59, 89, 153, 0.28);
}
.wp-link-card--classic:hover {
  box-shadow: 0 20px 36px rgba(59, 89, 153, 0.38);
}
.wp-link-card--classic .wp-link-card__cta {
  color: #1e3a8a;
}

/* --- Lien express : vert → teal (V1) --- */
.wp-link-card--express {
  background: linear-gradient(40deg, #3b986b 0%, #3d909c 100%);
  box-shadow: 0 14px 28px rgba(59, 152, 107, 0.28);
}
.wp-link-card--express:hover {
  box-shadow: 0 20px 36px rgba(59, 152, 107, 0.38);
}
.wp-link-card--express .wp-link-card__cta {
  color: #134e2f;
}

/* --- Lien permanent : bleu primary → cyan (V1, même que classique) --- */
.wp-link-card--permanent {
  background: linear-gradient(40deg, #3b5998 0%, #19cce6 100%);
  box-shadow: 0 14px 28px rgba(59, 89, 153, 0.28);
}
.wp-link-card--permanent:hover {
  box-shadow: 0 20px 36px rgba(59, 89, 153, 0.38);
}
.wp-link-card--permanent .wp-link-card__cta {
  color: #1e3a8a;
}

/* --- QR Code : noir / marine (V1) --- */
.wp-link-card--qrcode {
  background: linear-gradient(180deg, #181a33 0%, #1a1a1c 100%);
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.32);
}
.wp-link-card--qrcode:hover {
  box-shadow: 0 20px 36px rgba(15, 23, 42, 0.42);
}
.wp-link-card--qrcode .wp-link-card__cta {
  color: #181a33;
}
.wp-link-card--qrcode .wp-link-card__decor {
  background-image:
    radial-gradient(
      circle 120px at 100% 0%,
      rgba(106, 163, 255, 0.22),
      transparent 60%
    ),
    radial-gradient(
      circle 90px at 0% 100%,
      rgba(255, 255, 255, 0.06),
      transparent 60%
    );
}

/* --- e‑Signature : bleu → cyan (V1) --- */
.wp-link-card--signature {
  background: linear-gradient(40deg, #3b5998 0%, #19cce6 100%);
  box-shadow: 0 14px 28px rgba(59, 89, 153, 0.28);
}
.wp-link-card--signature:hover {
  box-shadow: 0 20px 36px rgba(59, 89, 153, 0.38);
}
.wp-link-card--signature .wp-link-card__cta {
  color: #1e3a8a;
}

/* --- Bulk Send : orange pêche → jaune (V1) --- */
.wp-link-card--bulk {
  background: linear-gradient(62deg, #fbab7e 0%, #f7ce68 100%);
  box-shadow: 0 14px 28px rgba(251, 171, 126, 0.32);
}
.wp-link-card--bulk:hover {
  box-shadow: 0 20px 36px rgba(251, 171, 126, 0.42);
}
.wp-link-card--bulk .wp-link-card__cta {
  color: #7c2d12;
}
/* Texte plus foncé sur fond chaud pour contraste */
.wp-link-card--bulk .wp-link-card__title {
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(124, 45, 18, 0.2);
}
.wp-link-card--bulk .wp-link-card__desc {
  color: rgba(255, 255, 255, 0.94);
}
.wp-link-card--bulk .wp-link-card__badge {
  background-color: rgba(255, 255, 255, 0.3);
  color: #7c2d12;
  border-color: rgba(255, 255, 255, 0.45);
}

/* =========================================================
   PAGE CREATE LINK : formulaire propre
   ========================================================= */

/* ===== Choice cards (radio cards visuels) ===== */

.wp-choice-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 640px) {
  .wp-choice-grid {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
}

@media (min-width: 768px) {
  .wp-choice-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.wp-choice-card {
  position: relative;
  display: block;
  cursor: pointer;
}

.wp-choice-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.wp-choice-card__inner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background-color: #ffffff;
  border: 2px solid #e2e8f0;
  border-radius: 14px;
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease,
    transform 0.1s ease;
}

.wp-choice-card:hover .wp-choice-card__inner {
  border-color: rgba(59, 89, 153, 0.3);
  background-color: #fafbfc;
}

.wp-choice-card input[type="radio"]:checked + .wp-choice-card__inner {
  border-color: var(--color-primary);
  background-color: rgba(59, 89, 153, 0.04);
  box-shadow: 0 0 0 4px rgba(59, 89, 153, 0.08);
}

.wp-choice-card input[type="radio"]:focus-visible + .wp-choice-card__inner {
  box-shadow: 0 0 0 4px rgba(59, 89, 153, 0.15);
}

.wp-choice-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-content: center;
  font-size: 17px;
  flex-shrink: 0;
}

.wp-choice-card__icon--blue {
  background-color: rgba(59, 130, 246, 0.1);
  color: #1d4ed8;
}
.wp-choice-card__icon--emerald {
  background-color: rgba(16, 185, 129, 0.12);
  color: #047857;
}
.wp-choice-card__icon--violet {
  background-color: rgba(139, 92, 246, 0.12);
  color: #6d28d9;
}
.wp-choice-card__icon--amber {
  background-color: rgba(245, 158, 11, 0.12);
  color: #b45309;
}
.wp-choice-card__icon--red {
  background-color: rgba(239, 68, 68, 0.1);
  color: #b91c1c;
}

.wp-choice-card__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.wp-choice-card__title {
  font-family: "Poppins", sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.25;
}

.wp-choice-card__desc {
  font-size: 12px;
  color: #64748b;
  line-height: 1.4;
}

.wp-choice-card__check {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: #cbd5e1;
  font-size: 22px;
  transition:
    color 0.15s ease,
    transform 0.15s ease;
}

.wp-choice-card
  input[type="radio"]:checked
  ~ .wp-choice-card__inner
  .wp-choice-card__check,
.wp-choice-card
  input[type="radio"]:checked
  + .wp-choice-card__inner
  .wp-choice-card__check {
  color: var(--color-primary);
  transform: scale(1.1);
}

/* ===== Feature toggle (titre + desc + switch) ===== */

.wp-feature-toggle {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 4px 0;
}

.wp-feature-toggle__text {
  flex: 1;
  min-width: 0;
}

.wp-feature-toggle__title {
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
  line-height: 1.4;
}

.wp-feature-toggle__desc {
  font-size: 12px;
  color: #64748b;
  margin-top: 4px;
  line-height: 1.5;
}

/* ===== Amount input (suffixe €) ===== */

.wp-amount-input {
  position: relative;
}

.wp-amount-input__suffix {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 14px;
  font-weight: 600;
  pointer-events: none;
}

.wp-amount-input .wp-input {
  padding-right: 36px;
  font-variant-numeric: tabular-nums;
}

/* ===== Justificatif panel ===== */

.wp-justif-panel {
  padding: 16px 16px 14px;
  background-color: #fafbfc;
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
}

.wp-justif-panel .wp-label {
  margin-bottom: 8px;
}

.wp-justif-preview {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background-color: rgba(16, 185, 129, 0.06);
  border: 1px solid rgba(16, 185, 129, 0.22);
  border-radius: 10px;
}

.wp-justif-preview__icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background-color: rgba(16, 185, 129, 0.14);
  color: #047857;
  display: grid;
  place-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

.wp-justif-preview__title {
  font-size: 11px;
  font-weight: 600;
  color: #047857;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.wp-justif-preview__value {
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
  margin-top: 2px;
  line-height: 1.3;
}

/* ===== Form actions (bouton retour + suivant) ===== */

.wp-form-actions {
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
  margin-top: 8px;
}

@media (min-width: 640px) {
  .wp-form-actions {
    flex-direction: row;
    justify-content: space-between;
  }
}

/* ===== Card header avec icone integre ===== */

.wp-card__header h2 .wp-icon-box {
  margin-right: 8px;
  vertical-align: middle;
}

/* ===== intlTelInput : adapter le style au design Wannapay ===== */

.iti {
  width: 100%;
  display: block;
}

.iti .wp-input,
.iti input[type="tel"] {
  padding-left: 96px !important;
  height: 46px !important;
}

.iti--separate-dial-code .iti__selected-flag {
  background-color: #f8fafc;
  border-right: 1px solid #e2e8f0;
  border-radius: 10px 0 0 10px;
}

.iti__country-list {
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.1);
  max-height: 240px;
}

.iti--allow-dropdown
  input.wp-input:focus
  + .iti__flag-container
  + .iti__selected-flag,
.iti--allow-dropdown:hover .iti__selected-flag:not([disabled]) {
  background-color: #f1f5f9;
}

/* =========================================================
   FIX alignement wp-form-row : inclure les wrappers (wp-amount-input)
   ========================================================= */

.wp-form-row > .wp-form-group > .wp-amount-input,
.wp-form-row > .wp-form-group > .wp-password-field,
.wp-form-row > .wp-form-group > .relative {
  margin-top: 0 !important;
  order: 2;
  width: 100%;
}

/* Les inputs imbriques dans ces wrappers prennent la pleine largeur et hauteur uniforme */
.wp-form-row > .wp-form-group > .wp-amount-input > .wp-input,
.wp-form-row > .wp-form-group > .wp-password-field > .wp-input,
.wp-form-row > .wp-form-group > .wp-amount-input,
.wp-form-row > .wp-form-group > .wp-password-field {
  height: 46px;
}

/* Wrapper wp-amount-input doit etre relatif pour le suffix */
.wp-amount-input {
  position: relative;
  width: 100%;
  display: block;
}

/* Reorder pour que help/msg viennent toujours apres l'input */
.wp-form-row > .wp-form-group > * {
  order: 5;
}

.wp-form-row > .wp-form-group > .wp-label {
  order: 1;
}
.wp-form-row > .wp-form-group > .wp-input,
.wp-form-row > .wp-form-group > .wp-select,
.wp-form-row > .wp-form-group > .wp-textarea,
.wp-form-row > .wp-form-group > .wp-amount-input,
.wp-form-row > .wp-form-group > .wp-password-field,
.wp-form-row > .wp-form-group > .wp-locked-field {
  order: 2;
}
.wp-form-row > .wp-form-group > .wp-form-help {
  order: 3;
}
.wp-form-row > .wp-form-group > .wp-validation-msg {
  order: 4;
}

/* =========================================================
   PAGE RECAP : layout + hero + steps + recipient
   ========================================================= */

.wp-recap-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  align-items: start;
}

@media (min-width: 1024px) {
  .wp-recap-layout {
    grid-template-columns: 1fr 360px;
    gap: 28px;
  }
}

.wp-recap-main {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

.wp-recap-aside {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (min-width: 1024px) {
  .wp-recap-aside {
    position: sticky;
    top: 88px;
  }
}

/* ===== HERO Montant + Type (couleur selon type) ===== */

.wp-recap-hero {
  position: relative;
  border-radius: 20px;
  padding: 28px 30px 26px;
  color: #ffffff;
  overflow: hidden;
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.1);
}

.wp-recap-hero--blue {
  background: linear-gradient(135deg, #3b5998 0%, #19cce6 100%);
  box-shadow: 0 16px 32px rgba(59, 89, 153, 0.28);
}

.wp-recap-hero--emerald {
  background: linear-gradient(135deg, #047857 0%, #10b981 50%, #14b8a6 100%);
  box-shadow: 0 16px 32px rgba(16, 185, 129, 0.3);
}

.wp-recap-hero__decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(
      circle 160px at 100% 0%,
      rgba(255, 255, 255, 0.18),
      transparent 60%
    ),
    radial-gradient(
      circle 120px at 0% 100%,
      rgba(255, 255, 255, 0.1),
      transparent 60%
    );
}

.wp-recap-hero__head {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.wp-recap-hero__type {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background-color: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.wp-recap-hero__sub {
  opacity: 0.82;
  font-weight: 500;
}

.wp-recap-hero__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background-color: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.wp-recap-hero__amount-block {
  position: relative;
}

.wp-recap-hero__label {
  font-size: 12px;
  font-weight: 500;
  opacity: 0.86;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}

.wp-recap-hero__amount {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 0;
}

.wp-recap-hero__value {
  font-family: "Poppins", sans-serif;
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
}

.wp-recap-hero__currency {
  font-family: "Poppins", sans-serif;
  font-size: 26px;
  font-weight: 600;
  opacity: 0.92;
}

.wp-recap-hero__reference {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.92);
}

.wp-recap-hero__reference i {
  font-size: 11px;
  opacity: 0.78;
}
.wp-recap-hero__reference strong {
  color: #ffffff;
  font-weight: 600;
}

@media (max-width: 559px) {
  .wp-recap-hero {
    padding: 22px 20px 20px;
  }
  .wp-recap-hero__value {
    font-size: 38px;
  }
  .wp-recap-hero__currency {
    font-size: 22px;
  }
}

/* ===== Destinataire ===== */

.wp-recap-recipient {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid #f1f5f9;
}

.wp-recap-recipient__info {
  flex: 1;
  min-width: 0;
}

.wp-recap-recipient__name {
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.25;
}

.wp-recap-recipient__society {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #64748b;
  margin-top: 3px;
}

.wp-recap-recipient__society i {
  color: #94a3b8;
  font-size: 10px;
}

.wp-recap-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 14px;
}

.wp-recap-list__row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
}

.wp-recap-list__row dt {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  color: #64748b;
}

.wp-recap-list__row dt i {
  color: #94a3b8;
  font-size: 11px;
}

.wp-recap-list__row dd {
  font-size: 14px;
  color: #0f172a;
  font-weight: 500;
  word-break: break-word;
}

@media (max-width: 559px) {
  .wp-recap-list__row {
    grid-template-columns: 1fr;
    gap: 2px;
    padding: 8px 0;
  }
}

/* ===== Aside : steps process ===== */

.wp-recap-summary .wp-card__body {
  padding-bottom: 18px;
}

.wp-recap-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

.wp-recap-steps::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 12px;
  bottom: 18px;
  width: 2px;
  background-color: #e2e8f0;
  border-radius: 2px;
}

.wp-recap-steps__item {
  position: relative;
  display: flex;
  gap: 12px;
  padding-bottom: 16px;
}

.wp-recap-steps__item:last-child {
  padding-bottom: 0;
}

.wp-recap-steps__dot {
  position: relative;
  z-index: 1;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #f1f5f9;
  color: #94a3b8;
  display: grid;
  place-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  border: 2px solid #ffffff;
  box-shadow: 0 0 0 1px #e2e8f0;
}

.wp-recap-steps__item.is-current .wp-recap-steps__dot {
  background-color: var(--color-primary);
  color: #ffffff;
  box-shadow: 0 0 0 4px rgba(59, 89, 153, 0.18);
}

.wp-recap-steps__title {
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
  line-height: 1.3;
}

.wp-recap-steps__desc {
  font-size: 12px;
  color: #64748b;
  margin-top: 3px;
  line-height: 1.5;
}

.wp-recap-tip {
  margin-top: 18px;
  padding: 12px 14px;
  background-color: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 10px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12px;
  color: #78350f;
  line-height: 1.5;
}

.wp-recap-tip i {
  color: #d97706;
  font-size: 13px;
  margin-top: 2px;
}

.wp-recap-tip p {
  margin: 0;
}
.wp-recap-tip strong {
  color: #422006;
  font-weight: 600;
}

/* ===========================================================
   Bandeau d'alerte (recap_instant : SMS desactive / stock vide / info)
   =========================================================== */
.wp-recap-alert {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid transparent;
}

.wp-recap-alert--warning {
  background-color: #fffbeb;
  border-color: rgba(245, 158, 11, 0.28);
}

.wp-recap-alert--info {
  background-color: #eff6ff;
  border-color: rgba(59, 130, 246, 0.22);
}

.wp-recap-alert__icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-size: 22px;
}

.wp-recap-alert--warning .wp-recap-alert__icon {
  background-color: rgba(245, 158, 11, 0.16);
  color: #b45309;
}

.wp-recap-alert--info .wp-recap-alert__icon {
  background-color: rgba(59, 130, 246, 0.14);
  color: #1d4ed8;
}

.wp-recap-alert__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wp-recap-alert__title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
}

.wp-recap-alert--warning .wp-recap-alert__title {
  color: #92400e;
}
.wp-recap-alert--info .wp-recap-alert__title {
  color: #1e3a8a;
}

.wp-recap-alert__desc {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: #475569;
}

.wp-recap-alert__cta {
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}

.wp-recap-alert--warning .wp-recap-alert__cta {
  background-color: #f59e0b;
  color: #ffffff;
}

.wp-recap-alert--warning .wp-recap-alert__cta:hover {
  background-color: #d97706;
}

.wp-recap-alert--info .wp-recap-alert__cta {
  background-color: var(--color-primary);
  color: #ffffff;
}

.wp-recap-alert--info .wp-recap-alert__cta:hover {
  background-color: #2f487a;
}

.wp-recap-alert__cta .mdi {
  font-size: 16px;
}

.wp-recap-alert__cta .mdi:last-child {
  font-size: 13px;
  opacity: 0.85;
}

@media (max-width: 540px) {
  .wp-recap-alert {
    padding: 14px;
    gap: 10px;
  }
  .wp-recap-alert__icon {
    width: 34px;
    height: 34px;
    font-size: 20px;
  }
}

/* =========================================================
   MDI : taille / centrage uniformes (apres bascule depuis FA)
   Les icones MDI ont un padding intrinseque qui les fait
   paraitre plus petites que FA a font-size egal — on boost.
   ========================================================= */

.mdi {
  font-size: 1.15em;
  line-height: 1;
  vertical-align: -0.08em;
  display: inline-block;
}

/* ===== Tailles specifiques par contexte ===== */

/* Sidebar */
.wp-sidebar__link .mdi {
  font-size: 20px;
  width: 22px;
  text-align: center;
}

/* Header / top bar */
.wp-header__icon-btn .mdi {
  font-size: 18px;
}

/* Icon box (notre composant utilitaire principal) */
.wp-icon-box .mdi {
  font-size: 16px;
}
.wp-icon-box--sm .mdi {
  font-size: 13px;
}
.wp-icon-box--lg .mdi {
  font-size: 20px;
}

/* Stat cards (KPIs dashboard) */
.wp-stat-card__icon .mdi {
  font-size: 20px;
}

/* Buttons */
.wp-btn .mdi {
  font-size: 16px;
}
.wp-btn--lg .mdi {
  font-size: 18px;
}
.wp-btn--sm .mdi {
  font-size: 14px;
}

/* Form helpers / validation */
.wp-validation-msg .mdi {
  font-size: 14px;
}
.wp-form-help .mdi {
  font-size: 13px;
}

/* Dropdown menu */
.wp-dropdown__icon {
  font-size: 15px !important;
  width: 16px;
  text-align: center;
}

/* Cards header */
.wp-card__header h2 .mdi {
  font-size: 16px;
}

/* Badges */
.wp-badge .mdi {
  font-size: 11px;
}

/* Page header icone (eyebrow box) */
.wp-page-header__icon .mdi {
  font-size: 24px;
}

/* Profile trigger */
.wp-profile-trigger .mdi {
  font-size: 14px;
}

/* Choice card (radio cards) */
.wp-choice-card__icon .mdi {
  font-size: 18px;
}
.wp-choice-card__check .mdi {
  font-size: 22px;
}

/* Toggle eye */
.wp-password-field__toggle .mdi {
  font-size: 16px;
}

/* Vision bar */
.wp-vision-bar__icon .mdi {
  font-size: 16px;
}

/* Action tiles */
.wp-action-tile__icon .mdi {
  font-size: 18px;
}

/* Sub card (mes achats) */
.wp-sub-card__icon .mdi {
  font-size: 22px;
}

/* Avatar et autres composants pleins gradient */
.wp-referral-block__icon .mdi {
  font-size: 22px;
}
.wp-recap-hero__icon .mdi {
  font-size: 18px;
}
.wp-video-card__head-icon .mdi {
  font-size: 18px;
}
.wp-share-btn .mdi {
  font-size: 15px;
}

/* Timeline / steps */
.wp-timeline__dot .mdi {
  font-size: 9px;
}
.wp-recap-steps__dot .mdi {
  font-size: 12px;
}

/* Empty state */
.wp-empty__icon .mdi {
  font-size: 26px;
}

/* =========================================================
   FORM ERRORS : erreurs de validation persistantes (sobre)
   Les notifs sont via Toastify, pas via banniere inline.
   ========================================================= */

.wp-form-errors {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 22px;
  padding: 14px 16px;
  background-color: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 12px;
  color: #991b1b;
}

.wp-form-errors__icon {
  color: #dc2626;
  font-size: 18px;
  margin-top: 2px;
  flex-shrink: 0;
}

.wp-form-errors__title {
  font-weight: 600;
  font-size: 14px;
  color: #7f1d1d;
  margin-bottom: 4px;
}

.wp-form-errors__list {
  list-style: disc;
  padding-left: 20px;
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
}

.wp-form-errors__list li {
  margin-top: 2px;
}

/* =========================================================
   PAGES LIENS : tabs filtres + stats + pills + table
   ========================================================= */

/* ===== Tabs filtres ===== */

.wp-links-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 6px;
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
}

.wp-links-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
  background-color: transparent;
  transition:
    background-color 0.18s ease,
    color 0.18s ease;
  text-decoration: none;
  white-space: nowrap;
}

.wp-links-tab:hover {
  background-color: #f1f5f9;
  color: #0f172a;
}

.wp-links-tab__icon {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  display: inline-grid;
  place-content: center;
  background-color: #f1f5f9;
  color: #64748b;
  font-size: 14px;
  transition:
    background-color 0.18s ease,
    color 0.18s ease;
}

/* Variantes couleur (active state matche les couleurs des liens type) */
.wp-links-tab--slate.is-active {
  background-color: #1e293b;
  color: #ffffff;
}
.wp-links-tab--blue.is-active {
  background-color: #1d4ed8;
  color: #ffffff;
}
.wp-links-tab--emerald.is-active {
  background-color: #047857;
  color: #ffffff;
}
.wp-links-tab--violet.is-active {
  background-color: #6d28d9;
  color: #ffffff;
}
.wp-links-tab--red.is-active {
  background-color: #b91c1c;
  color: #ffffff;
}

.wp-links-tab.is-active .wp-links-tab__icon {
  background-color: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}

/* ===== Mini stats (compteurs) ===== */

.wp-links-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 28px 32px;
  padding: 16px 22px;
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
}

.wp-links-stats__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.wp-links-stats__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.wp-links-stats__value {
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.2;
}

.wp-links-stats__total {
  font-size: 13px;
  font-weight: 500;
  color: #94a3b8;
}

.wp-links-stats__item--amount {
  margin-left: auto;
  padding-left: 24px;
  border-left: 1px solid #e2e8f0;
}

.wp-links-stats__item--amount .wp-links-stats__value {
  color: var(--color-primary);
  font-size: 20px;
}

@media (max-width: 639px) {
  .wp-links-stats {
    gap: 16px 22px;
    padding: 14px 18px;
  }
  .wp-links-stats__item--amount {
    margin-left: 0;
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid #e2e8f0;
    padding-top: 14px;
    width: 100%;
  }
}

/* ===== Pills (badges d'etat avec icone) ===== */

.wp-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  line-height: 1.2;
}

.wp-pill i {
  font-size: 12px;
}

.wp-pill--icon-only {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 9px;
  text-transform: none;
  letter-spacing: 0;
  display: grid;
  place-content: center;
}

.wp-pill--icon-only i {
  font-size: 14px;
}

.wp-pill--success {
  background-color: rgba(16, 185, 129, 0.12);
  color: #047857;
}
.wp-pill--blue {
  background-color: rgba(59, 130, 246, 0.12);
  color: #1d4ed8;
}
.wp-pill--emerald {
  background-color: rgba(16, 185, 129, 0.12);
  color: #047857;
}
.wp-pill--info {
  background-color: rgba(14, 165, 233, 0.12);
  color: #0369a1;
}
.wp-pill--warning {
  background-color: rgba(245, 158, 11, 0.14);
  color: #b45309;
}
.wp-pill--violet {
  background-color: rgba(139, 92, 246, 0.14);
  color: #6d28d9;
}
.wp-pill--red {
  background-color: rgba(220, 38, 38, 0.1);
  color: #b91c1c;
}
.wp-pill--neutral {
  background-color: rgba(100, 116, 139, 0.12);
  color: #475569;
}

/* ===== Table liens (refonte cellules + hover) ===== */

.wp-links-table tbody tr {
  transition: background-color 0.12s ease;
}

.wp-links-table tbody tr:hover {
  background-color: rgba(59, 89, 153, 0.03);
}

.wp-links-table .wp-icon-btn {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: inline-grid;
  place-content: center;
  color: #94a3b8;
  background-color: transparent;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}

.wp-links-table tr:hover .wp-icon-btn {
  background-color: rgba(59, 89, 153, 0.08);
  color: var(--color-primary);
}

/* ===========================================================
   Pagination & footer table
   =========================================================== */
.wp-links-table__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px 20px;
  border-top: 1px solid #e2e8f0;
  background-color: #fafbfd;
}

.wp-links-table__count {
  margin: 0;
  font-size: 13px;
  color: #64748b;
  line-height: 1.4;
}

.wp-links-table__count strong {
  color: #1e293b;
  font-weight: 600;
}

.wp-pagination {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

.wp-pagination__pages {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wp-pagination__nav,
.wp-pagination__page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  gap: 4px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #475569;
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  text-decoration: none;
  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}

.wp-pagination__nav .mdi {
  font-size: 18px;
  line-height: 1;
}

.wp-pagination__nav:hover,
.wp-pagination__page:hover {
  background-color: #f1f5f9;
  border-color: #cbd5e1;
  color: #1e293b;
}

.wp-pagination__page.is-current {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #ffffff;
  cursor: default;
  pointer-events: none;
}

.wp-pagination__nav.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.wp-pagination__ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  color: #94a3b8;
  font-size: 14px;
  user-select: none;
}

@media (max-width: 640px) {
  .wp-links-table__footer {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .wp-links-table__count {
    text-align: center;
  }
  .wp-pagination {
    justify-content: center;
    margin-left: 0;
  }
  .wp-pagination__nav {
    padding: 0 8px;
  }
}

/* ===========================================================
   Page recherche globale (Account::search)
   =========================================================== */

/* Barre de recherche en haut de la page */
.wp-search-bar {
  display: flex;
  align-items: stretch;
  gap: 10px;
  padding: 0;
}

.wp-search-bar__field {
  display: flex;
  align-items: center;
  flex: 1;
  position: relative;
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 0 14px 0 42px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.wp-search-bar__field:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(59, 89, 153, 0.12);
}

.wp-search-bar__icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 20px;
  pointer-events: none;
}

.wp-search-bar input[type="search"] {
  flex: 1;
  height: 48px;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 14px;
  color: #1e293b;
  padding: 0;
}

.wp-search-bar input[type="search"]::placeholder {
  color: #94a3b8;
}

.wp-search-bar input[type="search"]::-webkit-search-cancel-button {
  cursor: pointer;
}

.wp-search-bar .wp-btn {
  height: 48px;
  padding: 0 18px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

@media (max-width: 640px) {
  .wp-search-bar {
    flex-direction: column;
    gap: 8px;
  }
  .wp-search-bar .wp-btn {
    width: 100%;
    justify-content: center;
  }
}

/* Compteurs dans les onglets */
.wp-search-tab__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 7px;
  margin-left: 6px;
  border-radius: 999px;
  background-color: rgba(15, 23, 42, 0.06);
  color: #475569;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}

.wp-links-tab.is-active .wp-search-tab__count {
  background-color: rgba(255, 255, 255, 0.22);
  color: #ffffff;
}

.wp-links-tab[disabled],
.wp-links-tab[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* Sections de resultats par categorie */
.wp-search-section {
  margin-top: 22px;
}

.wp-search-section:first-of-type {
  margin-top: 0;
}

.wp-search-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding: 0 2px;
}

.wp-search-section__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #475569;
}

.wp-search-section__title .mdi {
  color: #94a3b8;
  font-size: 16px;
}

.wp-search-section__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background-color: rgba(15, 23, 42, 0.06);
  color: #475569;
  font-size: 11px;
  font-weight: 600;
}

/* Liste d'items (signatures, groupes, qr) */
.wp-search-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.wp-search-list li + li {
  border-top: 1px solid #f1f5f9;
}

.wp-search-list__item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  color: #1e293b;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.wp-search-list__item:hover {
  background-color: #f8fafc;
}

.wp-search-list__item:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

.wp-search-list__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background-color: #f1f5f9;
  color: #64748b;
  font-size: 20px;
}

.wp-search-list__icon--violet {
  background-color: rgba(139, 92, 246, 0.12);
  color: #7c3aed;
}

.wp-search-list__icon--emerald {
  background-color: rgba(16, 185, 129, 0.12);
  color: #059669;
}

.wp-search-list__icon--red {
  background-color: rgba(239, 68, 68, 0.12);
  color: #dc2626;
}

.wp-search-list__icon--blue {
  background-color: rgba(59, 130, 246, 0.12);
  color: #2563eb;
}

.wp-search-list__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.wp-search-list__title {
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wp-search-list__meta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: #64748b;
}

.wp-search-list__meta .mdi {
  font-size: 14px;
  color: #94a3b8;
}

.wp-search-list__arrow {
  flex-shrink: 0;
  color: #cbd5e1;
  font-size: 18px;
  transition:
    color 0.15s ease,
    transform 0.15s ease;
}

.wp-search-list__item:hover .wp-search-list__arrow {
  color: var(--color-primary);
  transform: translateX(2px);
}

/* Lien client dans la table */
.wp-links-table__client-link {
  color: #1e293b;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.15s ease;
}

.wp-links-table__client-link:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

/* Alpine x-cloak : masquer le contenu avant init pour eviter le flash */
[x-cloak] {
  display: none !important;
}

/* ===========================================================
   Modale de validation (wpValidationModal)
   =========================================================== */
.wp-validation-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.wp-validation-modal.is-open {
  display: flex;
  animation: wpModalFadeIn 0.18s ease-out;
}

@keyframes wpModalFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes wpModalPanelIn {
  from {
    transform: translateY(10px) scale(0.97);
    opacity: 0;
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

.wp-validation-modal__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.wp-validation-modal__panel {
  position: relative;
  width: 100%;
  max-width: 460px;
  background-color: #ffffff;
  border-radius: 16px;
  padding: 28px 28px 22px;
  box-shadow:
    0 24px 48px -8px rgba(15, 23, 42, 0.25),
    0 0 0 1px rgba(15, 23, 42, 0.04);
  outline: none;
  animation: wpModalPanelIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
}

.wp-validation-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background-color: transparent;
  border: 0;
  color: #94a3b8;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}

.wp-validation-modal__close:hover {
  background-color: #f1f5f9;
  color: #1e293b;
}

.wp-validation-modal__close .mdi {
  font-size: 20px;
}

.wp-validation-modal__icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: rgba(220, 38, 38, 0.1);
  color: #dc2626;
}

.wp-validation-modal__icon .mdi {
  font-size: 32px;
  line-height: 1;
}

.wp-validation-modal__title {
  margin: 0 0 6px;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.3;
}

.wp-validation-modal__desc {
  margin: 0 0 18px;
  text-align: center;
  font-size: 13px;
  color: #64748b;
  line-height: 1.5;
}

.wp-validation-modal__list {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 280px;
  overflow-y: auto;
}

.wp-validation-modal__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background-color: #fef2f2;
  border: 1px solid rgba(220, 38, 38, 0.16);
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.45;
  color: #1e293b;
}

.wp-validation-modal__item-icon {
  flex-shrink: 0;
  color: #dc2626;
  font-size: 18px;
  line-height: 1;
  margin-top: 1px;
}

.wp-validation-modal__item-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.wp-validation-modal__item-body strong {
  color: #0f172a;
  font-weight: 600;
}

.wp-validation-modal__item-body span {
  color: #64748b;
  font-size: 12.5px;
}

.wp-validation-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.wp-validation-modal__actions .wp-btn {
  min-width: 120px;
  justify-content: center;
}

@media (max-width: 480px) {
  .wp-validation-modal__panel {
    padding: 24px 18px 18px;
    border-radius: 14px;
  }
  .wp-validation-modal__actions {
    flex-direction: column-reverse;
  }
  .wp-validation-modal__actions .wp-btn {
    width: 100%;
  }
}

/* Empeche le scroll body quand la modale est ouverte */
body.wp-modal-open {
  overflow: hidden;
}

/* ===========================================================
   Etat error sur les champs du formulaire
   =========================================================== */
.wp-input--error,
.wp-form-group--error .wp-input,
.wp-form-group--error .wp-select,
.wp-form-group--error .wp-textarea,
.wp-form-group--error .wp-amount-input .wp-input {
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12) !important;
}

.wp-form-group--error .wp-label {
  color: #b91c1c;
}

@media (max-width: 640px) {
  .wp-search-list__item {
    padding: 12px 14px;
    gap: 10px;
  }
  .wp-search-list__icon {
    width: 36px;
    height: 36px;
    font-size: 18px;
  }
  .wp-search-section__title {
    font-size: 12px;
  }
}

/* ===========================================================
   Dashboard — Cautions a capturer (wp-capture-*)
   =========================================================== */
.wp-capture-card__header {
  align-items: flex-start;
  gap: 16px;
}

.wp-capture-card__title {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.wp-capture-card__icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: linear-gradient(
    135deg,
    rgba(59, 89, 153, 0.12),
    rgba(59, 89, 153, 0.04)
  );
  color: var(--color-primary);
  font-size: 22px;
}

.wp-capture-card__h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.2;
}

.wp-capture-card__sub {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: #64748b;
  line-height: 1.4;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.wp-capture-card__see-all {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-primary);
  text-decoration: none;
  padding: 6px 8px;
  margin: -6px -8px;
  border-radius: 6px;
  transition: background-color 0.15s ease;
}

.wp-capture-card__see-all:hover {
  background-color: rgba(59, 89, 153, 0.08);
}

.wp-capture-card__see-all .mdi {
  font-size: 16px;
  transition: transform 0.15s ease;
}

.wp-capture-card__see-all:hover .mdi {
  transform: translateX(2px);
}

.wp-capture-card__body {
  padding: 0 !important;
}

/* Liste sobre : divider horizontaux, sans bordure ni urgence colorée */
.wp-capture-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.wp-capture-list li {
  list-style: none;
}

.wp-capture-list li + li .wp-capture-item {
  border-top: 1px solid #f1f5f9;
}

.wp-capture-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 20px;
  color: #1e293b;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.wp-capture-item:hover {
  background-color: #fafbfd;
}

.wp-capture-item:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

.wp-capture-item__avatar {
  flex-shrink: 0;
  display: inline-flex;
}

.wp-capture-item__body {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.wp-capture-item__client {
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wp-capture-item:hover .wp-capture-item__client {
  color: var(--color-primary);
}

.wp-capture-item__meta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #64748b;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wp-capture-item__meta .mdi {
  font-size: 13px;
  color: #94a3b8;
}

.wp-capture-item__sep {
  color: #cbd5e1;
  margin: 0 2px;
}

.wp-capture-item__amount {
  flex-shrink: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  white-space: nowrap;
}

.wp-capture-item__amount-value {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.1;
}

.wp-capture-item__amount-currency {
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
}

.wp-capture-item__chevron {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: #cbd5e1;
  transition:
    color 0.15s ease,
    transform 0.15s ease;
}

.wp-capture-item__chevron .mdi {
  font-size: 18px;
}

.wp-capture-item:hover .wp-capture-item__chevron {
  color: var(--color-primary);
  transform: translateX(2px);
}

/* Footer "Voir les X autres" */
.wp-capture-card__footer {
  border-top: 1px solid #f1f5f9;
  padding: 12px 16px;
  text-align: center;
}

.wp-capture-card__see-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-primary);
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 6px;
  transition: background-color 0.15s ease;
}

.wp-capture-card__see-more:hover {
  background-color: rgba(59, 89, 153, 0.08);
  text-decoration: underline;
}

.wp-capture-card__see-more .mdi {
  font-size: 16px;
}

/* Responsive */
@media (max-width: 640px) {
  .wp-capture-card__header {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .wp-capture-card__see-all {
    align-self: flex-start;
  }
  .wp-capture-item {
    padding: 12px 14px;
    gap: 10px;
  }
  /* Chevron retire en mobile : tap-zone reste tout l'item (deja un <a>). */
  .wp-capture-item__chevron {
    display: none;
  }
  /* Avatar legerement plus petit pour garder de la place pour le montant. */
  .wp-capture-item__avatar .wp-avatar {
    width: 36px !important;
    height: 36px !important;
    font-size: 13px !important;
  }
  /* Montant force a rester visible (jamais shrink, jamais wrap). */
  .wp-capture-item__amount {
    flex-shrink: 0;
    margin-left: auto;
  }
  .wp-capture-item__amount-value {
    font-size: 14px;
  }
  .wp-capture-item__amount-currency {
    font-size: 12px;
  }
  .wp-capture-item__client {
    font-size: 13.5px;
  }
  /* Meta plus compacte : on cache l'icone et le separateur · pour gagner
     de la place au profit du nom + montant. L'email reste, l'echeance reste. */
  .wp-capture-item__meta .mdi {
    display: none;
  }
  .wp-capture-item__sep {
    display: none;
  }
}

/* ===========================================================
   Toolbar de liste : statut (pills) + tri (select + dir)
   =========================================================== */
.wp-list-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 12px 14px;
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

.wp-list-toolbar__group {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.wp-list-toolbar__group--statuses {
  flex: 1 1 auto;
  min-width: 0;
}

.wp-list-toolbar__group--sort {
  flex-shrink: 0;
}

/* Pills statut (radio stylises) */
.wp-status-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 500;
  color: #475569;
  background-color: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
  user-select: none;
}

.wp-status-pill .mdi {
  font-size: 15px;
  line-height: 1;
}

.wp-status-pill:hover {
  background-color: #f1f5f9;
  color: #1e293b;
  border-color: #cbd5e1;
}

.wp-status-pill:focus-within {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Etats actifs par couleur (codes V1) */
.wp-status-pill.is-active {
  color: #ffffff;
  border-color: transparent;
}

.wp-status-pill--slate.is-active {
  background-color: #475569;
}
.wp-status-pill--blue.is-active {
  background-color: #2563eb;
}
.wp-status-pill--emerald.is-active {
  background-color: #059669;
}
.wp-status-pill--violet.is-active {
  background-color: #7c3aed;
}
.wp-status-pill--amber.is-active {
  background-color: #d97706;
}
.wp-status-pill--red.is-active {
  background-color: #dc2626;
}

/* Compatibilite radio visuellement masque */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Select tri (natif + overlay visuel) */
.wp-sort-select {
  position: relative;
  display: inline-block;
  height: 36px;
  min-width: 220px;
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.wp-sort-select:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(59, 89, 153, 0.12);
}

.wp-sort-select:hover {
  border-color: #cbd5e1;
}

/* Le <select> couvre 100% du container -> tout clic dans la zone l'ouvre */
.wp-sort-select__input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  height: 100%;
  background: transparent;
  border: 0;
  outline: 0;
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
  cursor: pointer;
  /* Espace a gauche pour le label overlay, a droite pour le chevron */
  padding: 0 32px 0 78px;
  line-height: 1;
}

.wp-sort-select__input::-ms-expand {
  display: none;
}

/* Label "Trier par" en overlay (non-cliquable pour ne pas voler le clic au select) */
.wp-sort-select__label {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 12px;
  font-weight: 500;
  pointer-events: none;
  user-select: none;
}

.wp-sort-select__chevron {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 16px;
  pointer-events: none;
}

/* Bouton inverseur direction */
.wp-sort-dir-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 600;
  color: #475569;
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}

.wp-sort-dir-btn:hover {
  background-color: #f1f5f9;
  color: var(--color-primary);
  border-color: #cbd5e1;
}

.wp-sort-dir-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.wp-sort-dir-btn .mdi {
  font-size: 18px;
  line-height: 1;
}

/* Reset (lien) */
.wp-list-toolbar__reset {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #94a3b8;
  text-decoration: none;
  padding: 6px 8px;
  border-radius: 6px;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}

.wp-list-toolbar__reset:hover {
  background-color: #fef2f2;
  color: #dc2626;
}

.wp-list-toolbar__reset .mdi {
  font-size: 14px;
}

/* Responsive */
@media (max-width: 768px) {
  .wp-list-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .wp-list-toolbar__group--statuses {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: 4px;
  }
  .wp-list-toolbar__group--statuses::-webkit-scrollbar {
    height: 4px;
  }
  .wp-list-toolbar__group--statuses::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    border-radius: 4px;
  }
  .wp-status-pill {
    flex-shrink: 0;
  }
  .wp-list-toolbar__group--sort {
    flex-wrap: wrap;
  }
  .wp-sort-dir-btn__label {
    display: none;
  }
}

@media (max-width: 480px) {
  .wp-sort-select__label {
    display: none;
  }
}

/* ===========================================================
   Detail lien — actions principales + grid client
   =========================================================== */
.wp-detail-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.wp-detail-actions .inline-block {
  display: inline-block;
}

.wp-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 18px;
  margin: 0;
}

.wp-detail-grid__item {
  min-width: 0;
}

.wp-detail-grid__label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: #94a3b8;
  font-weight: 500;
  margin-bottom: 3px;
  line-height: 1.3;
}

.wp-detail-grid__label .mdi {
  font-size: 14px;
  color: #cbd5e1;
}

.wp-detail-grid__value {
  font-size: 14px;
  color: #1e293b;
  font-weight: 500;
  line-height: 1.45;
  word-break: break-word;
}

@media (max-width: 540px) {
  .wp-detail-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* ===========================================================
   Modale "Partager" (wpShareModal) — vanilla, sans Alpine
   =========================================================== */
.wp-share-modal {
  position: fixed;
  inset: 0;
  z-index: 1010;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease-out;
}

.wp-share-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

.wp-share-modal[hidden] {
  display: none;
}

.wp-share-modal__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.wp-share-modal__panel {
  position: relative;
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  background-color: #ffffff;
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -16px 48px -8px rgba(15, 23, 42, 0.3);
  outline: none;
  transform: translateY(20px);
  transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}

.wp-share-modal.is-open .wp-share-modal__panel {
  transform: translateY(0);
}

@media (min-width: 640px) {
  .wp-share-modal {
    align-items: center;
    padding: 16px;
  }
  .wp-share-modal__panel {
    border-radius: 18px;
    box-shadow: 0 24px 48px -8px rgba(15, 23, 42, 0.28);
  }
}

.wp-share-modal__head {
  position: sticky;
  top: 0;
  background-color: #ffffff;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid #f1f5f9;
  z-index: 2;
}

.wp-share-modal__head-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.wp-share-modal__eyebrow {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #94a3b8;
}

.wp-share-modal__title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.3;
}

.wp-share-modal__amount {
  color: #475569;
  font-weight: 600;
  margin-left: 2px;
}

.wp-share-modal__close {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background-color: transparent;
  border: 0;
  color: #94a3b8;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}

.wp-share-modal__close:hover {
  background-color: #f1f5f9;
  color: #1e293b;
}

.wp-share-modal__close .mdi {
  font-size: 20px;
}

.wp-share-modal__body {
  padding: 16px 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.wp-share-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wp-share-block--capture {
  padding-top: 18px;
  border-top: 1px solid #f1f5f9;
}

.wp-share-block__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: #475569;
}

.wp-share-block__label .mdi {
  font-size: 16px;
  color: var(--color-primary);
}

.wp-share-block__help {
  margin: 0;
  font-size: 12px;
  color: #64748b;
  line-height: 1.45;
}

.wp-share-block__help--center {
  text-align: center;
}
.wp-share-block__help strong {
  color: #1e293b;
  font-weight: 600;
}

/* URL + boutons copier/ouvrir */
.wp-share-url {
  display: flex;
  align-items: stretch;
  gap: 6px;
  flex-wrap: wrap;
}

.wp-share-url__input {
  flex: 1 1 200px;
  min-width: 0;
  height: 40px;
  padding: 0 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background-color: #f8fafc;
  font-size: 12.5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  color: #1e293b;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.wp-share-url__input:focus {
  outline: 0;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(59, 89, 153, 0.12);
  background-color: #ffffff;
}

.wp-share-url__btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--color-primary);
  border-radius: 8px;
  background-color: var(--color-primary);
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
  white-space: nowrap;
}

.wp-share-url__btn:hover {
  background-color: #2f487a;
  border-color: #2f487a;
  color: #ffffff;
}

.wp-share-url__btn--secondary {
  background-color: #ffffff;
  color: var(--color-primary);
}

.wp-share-url__btn--secondary:hover {
  background-color: #f1f5f9;
  color: var(--color-primary);
}

.wp-share-url__btn.is-copied {
  background-color: #16a34a;
  border-color: #16a34a;
  color: #ffffff;
}

.wp-share-url__btn .mdi {
  font-size: 16px;
  line-height: 1;
}

@media (max-width: 480px) {
  .wp-share-url__btn-label {
    display: none;
  }
  .wp-share-url__btn {
    padding: 0 10px;
  }
}

/* Partage rapide WhatsApp / SMS / Email */
.wp-share-quick {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.wp-share-quick__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 42px;
  padding: 0 10px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  color: #ffffff;
  transition:
    filter 0.15s ease,
    transform 0.12s ease;
}

.wp-share-quick__btn:hover {
  filter: brightness(0.94);
}

.wp-share-quick__btn:active {
  transform: scale(0.98);
}

.wp-share-quick__btn .mdi {
  font-size: 18px;
}

.wp-share-quick__btn--whatsapp {
  background-color: #25d366;
}
.wp-share-quick__btn--sms {
  background-color: #3b5999;
}
.wp-share-quick__btn--mail {
  background-color: #475569;
}

@media (max-width: 380px) {
  .wp-share-quick {
    grid-template-columns: 1fr;
  }
}

.wp-share-capture-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ===========================================================
   Modale "Confirmer la suppression" (wpDeleteModal)
   Reutilise .wp-share-modal* + ajouts specifiques
   =========================================================== */
.wp-delete-warning {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background-color: #fef2f2;
  border: 1px solid rgba(220, 38, 38, 0.18);
  border-radius: 12px;
}

.wp-delete-warning__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background-color: rgba(220, 38, 38, 0.12);
  color: #b91c1c;
  font-size: 20px;
}

.wp-delete-warning__title {
  margin: 0 0 2px;
  font-size: 13.5px;
  font-weight: 600;
  color: #7f1d1d;
  line-height: 1.35;
}

.wp-delete-warning__desc {
  margin: 0;
  font-size: 12.5px;
  color: #991b1b;
  line-height: 1.5;
}

.wp-delete-warning__desc strong {
  color: #7f1d1d;
  font-weight: 600;
}

.wp-share-modal__actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 6px;
}

.wp-share-modal__actions .wp-btn {
  min-width: 120px;
  justify-content: center;
}

@media (max-width: 480px) {
  .wp-share-modal__actions {
    flex-direction: column-reverse;
  }
  .wp-share-modal__actions .wp-btn {
    width: 100%;
  }
}

/* ===========================================================
   Module Abonnements — choix des prix Stripe (wp-sub-price-card)
   =========================================================== */
.wp-sub-prices {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wp-sub-prices__group {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
}

.wp-sub-prices__empty {
  margin: 0;
  padding: 14px;
  border: 1px dashed #e2e8f0;
  border-radius: 10px;
  background-color: #f8fafc;
  color: #64748b;
  font-size: 13px;
  text-align: center;
}

.wp-sub-price-card {
  position: relative;
  display: block;
  cursor: pointer;
  user-select: none;
}

.wp-sub-price-card input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.wp-sub-price-card__inner {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 14px 12px;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  background-color: #ffffff;
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease,
    box-shadow 0.15s ease;
}

.wp-sub-price-card:hover .wp-sub-price-card__inner {
  border-color: #cbd5e1;
}

.wp-sub-price-card input[type="checkbox"]:checked + .wp-sub-price-card__inner {
  border-color: var(--color-primary);
  background-color: rgba(59, 89, 153, 0.04);
  box-shadow: 0 0 0 2px rgba(59, 89, 153, 0.12);
}

.wp-sub-price-card
  input[type="checkbox"]:focus-visible
  + .wp-sub-price-card__inner {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.wp-sub-price-card__amount {
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.1;
}

.wp-sub-price-card__interval {
  display: inline-block;
  margin-left: 2px;
  font-size: 13px;
  color: #64748b;
  font-weight: 500;
}

.wp-sub-price-card__name {
  margin-top: 4px;
  font-size: 12px;
  color: #475569;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wp-sub-price-card__check {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #cbd5e1;
  opacity: 0;
  transform: scale(0.85);
  transition:
    opacity 0.15s ease,
    transform 0.15s ease,
    color 0.15s ease;
}

.wp-sub-price-card
  input[type="checkbox"]:checked
  + .wp-sub-price-card__inner
  .wp-sub-price-card__check {
  opacity: 1;
  transform: scale(1);
  color: var(--color-primary);
}

.wp-sub-price-card__check .mdi {
  font-size: 22px;
  line-height: 1;
}

/* Bloc "Ajouter une formule" depliable */
.wp-add-price {
  border-top: 1px dashed #e2e8f0;
  padding-top: 12px;
}

.wp-add-price__summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary);
  padding: 6px 10px;
  border-radius: 8px;
  transition: background-color 0.15s ease;
}

.wp-add-price__summary::-webkit-details-marker {
  display: none;
}
.wp-add-price__summary::marker {
  display: none;
}

.wp-add-price__summary:hover {
  background-color: rgba(59, 89, 153, 0.08);
}

.wp-add-price__summary .mdi {
  font-size: 16px;
}

.wp-add-price__form {
  margin-top: 12px;
  padding: 14px;
  background-color: #f8fafc;
  border-radius: 10px;
}

/* ===========================================================
   Listing des abonnements — grille de cards (wp-sub-card)
   =========================================================== */
.wp-sub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}

@media (max-width: 540px) {
  .wp-sub-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

.wp-sub-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 18px 14px;
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.12s ease;
}

.wp-sub-card:hover {
  border-color: rgba(59, 89, 153, 0.3);
  box-shadow: 0 8px 24px -8px rgba(15, 23, 42, 0.12);
  transform: translateY(-1px);
}

/* Hit area : tout le bloc cliquable (mais les boutons footer restent prioritaires via z-index) */
.wp-sub-card__hit {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 1;
}

.wp-sub-card__hit:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.wp-sub-card > *:not(.wp-sub-card__hit) {
  position: relative;
  z-index: 2;
}

/* Header : icone + titre + badge essai */
.wp-sub-card__header {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 12px;
  align-items: flex-start;
}

.wp-sub-card__icon {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: linear-gradient(
    135deg,
    rgba(59, 89, 153, 0.14),
    rgba(59, 89, 153, 0.04)
  );
  color: var(--color-primary);
  font-size: 22px;
  flex-shrink: 0;
}

.wp-sub-card__title-wrap {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.wp-sub-card__title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.wp-sub-card:hover .wp-sub-card__title {
  color: var(--color-primary);
}

.wp-sub-card__product {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  font-size: 12px;
  color: #64748b;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wp-sub-card__product .mdi {
  font-size: 13px;
  color: #94a3b8;
  flex-shrink: 0;
}

.wp-sub-card__product--missing {
  color: #dc2626;
}

.wp-sub-card__product--missing .mdi {
  color: #dc2626;
}

.wp-sub-card__trial {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  border-radius: 999px;
  background-color: rgba(245, 158, 11, 0.12);
  color: #b45309;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}

.wp-sub-card__trial .mdi {
  font-size: 13px;
}

/* Description tronquée 2 lignes */
.wp-sub-card__desc {
  margin: 0;
  font-size: 12.5px;
  color: #64748b;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Prix “À partir de” en gros */
.wp-sub-card__price-block {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 10px;
  background: linear-gradient(
    135deg,
    rgba(59, 89, 153, 0.06),
    rgba(59, 89, 153, 0.01)
  );
  border: 1px solid rgba(59, 89, 153, 0.1);
}

.wp-sub-card__from {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
  margin-right: 4px;
}

.wp-sub-card__price {
  font-size: 24px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.05;
}

.wp-sub-card__currency {
  font-size: 18px;
  font-weight: 600;
  color: #475569;
}

.wp-sub-card__interval {
  font-size: 13px;
  font-weight: 500;
  color: #64748b;
}

/* Liste des autres formules */
.wp-sub-card__formulas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wp-sub-card__formula {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: #475569;
}

.wp-sub-card__formula .mdi {
  font-size: 14px;
  flex-shrink: 0;
}

.wp-sub-card__formula-int {
  color: #94a3b8;
  font-weight: 500;
}

.wp-sub-card__formula-name {
  color: #64748b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wp-sub-card__no-price {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 12px;
  border-radius: 8px;
  background-color: rgba(220, 38, 38, 0.08);
  color: #b91c1c;
  font-size: 12.5px;
  font-weight: 600;
}

.wp-sub-card__no-price .mdi {
  font-size: 15px;
}

/* Footer : meta gauche + actions droite */
.wp-sub-card__footer {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.wp-sub-card__meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.wp-sub-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 8px;
  border-radius: 999px;
  background-color: #f1f5f9;
  color: #475569;
  font-size: 11px;
  font-weight: 600;
}

.wp-sub-card__badge .mdi {
  font-size: 13px;
  color: #94a3b8;
}

.wp-sub-card__actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.wp-sub-card__btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  color: #475569;
  background-color: transparent;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}

.wp-sub-card__btn:hover {
  background-color: #f1f5f9;
  color: #1e293b;
}

.wp-sub-card__btn .mdi {
  font-size: 15px;
}

.wp-sub-card__btn--primary {
  background-color: var(--color-primary);
  color: #ffffff;
}

.wp-sub-card__btn--primary:hover {
  background-color: #2f487a;
  color: #ffffff;
}

/* Footer pagination de la grille */
.wp-sub-grid-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
  padding: 14px 18px;
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
}

/* ===========================================================
   E-signature detail — parties + transaction + justificatifs
   =========================================================== */
.wp-party-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 768px) {
  .wp-party-grid {
    grid-template-columns: 1fr;
  }
}

.wp-party-identity {
  display: flex;
  align-items: center;
  gap: 12px;
}

.wp-party-identity__text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.wp-party-identity__name {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wp-party-identity__society {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: #64748b;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wp-party-identity__society .mdi {
  font-size: 13px;
  color: #94a3b8;
}

.wp-party-signed-footer {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border-top: 1px solid #f1f5f9;
  background-color: #f0fdf4;
  color: #15803d;
  font-size: 12.5px;
  font-weight: 600;
  border-radius: 0 0 14px 14px;
}

.wp-party-signed-footer .mdi {
  font-size: 15px;
}

/* Resume transaction associee */
.wp-tx-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 10px;
  background: linear-gradient(
    135deg,
    rgba(245, 158, 11, 0.05),
    rgba(245, 158, 11, 0.01)
  );
  border: 1px solid rgba(245, 158, 11, 0.12);
}

.wp-tx-summary__left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.wp-tx-summary__amount {
  font-size: 22px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.1;
}

.wp-tx-summary__amount span {
  font-size: 16px;
  font-weight: 600;
  color: #475569;
  margin-left: 2px;
}

/* Liste de justificatifs */
.wp-justif-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wp-justif-list__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  background-color: #f8fafc;
  border: 1px solid #e2e8f0;
  font-size: 13px;
  color: #1e293b;
  font-weight: 500;
}

.wp-justif-list__item .mdi {
  font-size: 17px;
  color: #059669;
}

/* ===========================================================
   Listing /e-signatures — items en row riche (wp-sign-item)
   =========================================================== */
.wp-sign-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.wp-sign-list li + li .wp-sign-item {
  border-top: 1px solid #f1f5f9;
}

.wp-sign-item {
  display: grid;
  grid-template-columns: 40px minmax(0, 1.6fr) auto auto auto 24px;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  color: #1e293b;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.wp-sign-item:hover {
  background-color: #fafbfd;
}

.wp-sign-item:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

.wp-sign-item__avatar {
  display: inline-flex;
}

.wp-sign-item__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wp-sign-item__name {
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wp-sign-item:hover .wp-sign-item__name {
  color: var(--color-primary);
}

.wp-sign-item__meta {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  font-size: 12px;
  color: #64748b;
  line-height: 1.3;
  min-width: 0;
}

.wp-sign-item__meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  overflow: hidden;
}

.wp-sign-item__meta-chip .truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 200px;
}

.wp-sign-item__meta-chip .mdi {
  font-size: 13px;
  color: #94a3b8;
  flex-shrink: 0;
}

/* Etat (tag avec point) */
.wp-sign-item__state {
  display: inline-flex;
}

.wp-state-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
}

.wp-state-tag__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.wp-state-tag--emerald {
  background-color: rgba(16, 185, 129, 0.1);
  color: #047857;
}

.wp-state-tag--emerald .wp-state-tag__dot {
  background-color: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18);
}

.wp-state-tag--amber {
  background-color: rgba(245, 158, 11, 0.1);
  color: #b45309;
}

.wp-state-tag--amber .wp-state-tag__dot {
  background-color: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18);
}

.wp-state-tag--blue {
  background-color: rgba(37, 99, 235, 0.1);
  color: #1d4ed8;
}

.wp-state-tag--blue .wp-state-tag__dot {
  background-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}

.wp-state-tag--red {
  background-color: rgba(220, 38, 38, 0.1);
  color: #b91c1c;
}

.wp-state-tag--red .wp-state-tag__dot {
  background-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.18);
}

.wp-state-tag--slate {
  background-color: rgba(100, 116, 139, 0.1);
  color: #475569;
}

.wp-state-tag--slate .wp-state-tag__dot {
  background-color: #64748b;
  box-shadow: 0 0 0 3px rgba(100, 116, 139, 0.18);
}

/* Transaction */
.wp-sign-item__tx {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.wp-sign-item__tx-type {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
}

.wp-sign-item__tx-type .mdi {
  font-size: 13px;
}

.wp-sign-item__tx-type--blue {
  background-color: rgba(37, 99, 235, 0.1);
  color: #1d4ed8;
}

.wp-sign-item__tx-type--emerald {
  background-color: rgba(16, 185, 129, 0.1);
  color: #047857;
}

.wp-sign-item__tx-amount {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
}

.wp-sign-item__tx-amount.is-paid {
  color: #047857;
}

.wp-sign-item__tx-amount .mdi {
  font-size: 14px;
  color: #10b981;
}

.wp-sign-item__tx-empty {
  color: #cbd5e1;
  font-size: 13px;
}

/* Date */
.wp-sign-item__date {
  font-size: 12px;
  color: #94a3b8;
  white-space: nowrap;
}

/* Chevron */
.wp-sign-item__chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  color: #cbd5e1;
  transition:
    color 0.15s ease,
    transform 0.15s ease;
}

.wp-sign-item__chevron .mdi {
  font-size: 20px;
}

.wp-sign-item:hover .wp-sign-item__chevron {
  color: var(--color-primary);
  transform: translateX(2px);
}

/* Responsive : reorganise en 2 lignes en tablet, stack en mobile */
@media (max-width: 1100px) {
  .wp-sign-item {
    grid-template-columns: 40px minmax(0, 1fr) auto auto;
    grid-template-areas:
      "avatar body state state"
      "avatar body tx date";
    row-gap: 8px;
  }
  .wp-sign-item__avatar {
    grid-area: avatar;
    align-self: start;
  }
  .wp-sign-item__body {
    grid-area: body;
  }
  .wp-sign-item__state {
    grid-area: state;
    justify-self: end;
  }
  .wp-sign-item__tx {
    grid-area: tx;
    justify-self: start;
  }
  .wp-sign-item__date {
    grid-area: date;
    justify-self: end;
  }
  .wp-sign-item__chevron {
    display: none;
  }
}

@media (max-width: 540px) {
  .wp-sign-item {
    grid-template-columns: 40px 1fr auto;
    grid-template-areas:
      "avatar body state"
      "avatar tx tx"
      "avatar date date";
    gap: 6px 12px;
    padding: 14px 16px;
  }
  .wp-sign-item__tx {
    justify-self: start;
  }
  .wp-sign-item__date {
    justify-self: start;
    font-size: 11.5px;
  }
}

/* ===========================================================
   QR Code /new — usage hint dans wp-choice-card + benefits grid
   =========================================================== */
.wp-choice-card__usage {
  display: inline-flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 8px;
  padding: 6px 9px;
  border-radius: 8px;
  background-color: rgba(245, 158, 11, 0.08);
  color: #92400e;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.4;
}

.wp-choice-card__usage .mdi {
  font-size: 13px;
  color: #d97706;
  flex-shrink: 0;
  margin-top: 1px;
}

/* =====================================================
   Variant COLORFUL : cards riches avec hero colore
   ===================================================== */
.wp-choice-card--colorful .wp-choice-card__inner {
  overflow: hidden;
  padding: 0;
  border-width: 2px;
  background-color: #ffffff;
  transition:
    border-color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.wp-choice-card--colorful:hover .wp-choice-card__inner {
  transform: translateY(-2px);
}

/* Hero coloré en haut de chaque card */
.wp-choice-card__hero {
  position: relative;
  height: 132px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
}

/* Glow doux derriere l'icone */
.wp-choice-card__hero-glow {
  position: absolute;
  width: 140%;
  height: 140%;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.45;
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
  z-index: 1;
}

/* Pattern QR Code en filigrane en bas droite */
.wp-choice-card__hero-pattern {
  position: absolute;
  right: -12px;
  bottom: -22px;
  font-size: 110px;
  line-height: 1;
  opacity: 0.07;
  z-index: 1;
  transition:
    opacity 0.3s ease,
    transform 0.4s ease;
  color: #0f172a;
}

/* Icone principale en cercle blanc avec shadow */
.wp-choice-card__hero-icon {
  position: relative;
  z-index: 2;
  width: 72px;
  height: 72px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 22px;
  background-color: #ffffff;
  box-shadow:
    0 10px 30px -8px rgba(15, 23, 42, 0.16),
    0 0 0 1px rgba(15, 23, 42, 0.04);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.wp-choice-card__hero-icon .mdi {
  font-size: 38px;
  line-height: 1;
}

/* Animations au hover */
.wp-choice-card--colorful:hover .wp-choice-card__hero-glow {
  opacity: 0.6;
  transform: scale(1.05);
}

.wp-choice-card--colorful:hover .wp-choice-card__hero-icon {
  transform: scale(1.05) rotate(-3deg);
}

.wp-choice-card--colorful:hover .wp-choice-card__hero-pattern {
  opacity: 0.12;
  transform: rotate(-5deg);
}

/* Texte sous le hero */
.wp-choice-card--colorful .wp-choice-card__text {
  padding: 18px 20px 20px;
  gap: 4px;
}

.wp-choice-card--colorful .wp-choice-card__title {
  font-size: 16px;
}

/* Check icone repositionne */
.wp-choice-card--colorful .wp-choice-card__check {
  top: 12px;
  right: 12px;
  z-index: 3;
  background-color: rgba(255, 255, 255, 0.95);
  border-radius: 50%;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
}

.wp-choice-card--colorful .wp-choice-card__check .mdi {
  font-size: 20px;
}

/* ----- Couleurs par variant ----- */

/* Blue (Lien) */
.wp-choice-card--blue .wp-choice-card__hero {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
}
.wp-choice-card--blue .wp-choice-card__hero-glow {
  background: radial-gradient(circle, #3b82f6 0%, transparent 70%);
}
.wp-choice-card--blue .wp-choice-card__hero-icon .mdi {
  color: #2563eb;
}
.wp-choice-card--blue input[type="radio"]:checked + .wp-choice-card__inner {
  border-color: #2563eb;
  box-shadow:
    0 0 0 3px rgba(37, 99, 235, 0.18),
    0 12px 28px -10px rgba(37, 99, 235, 0.35);
}

/* Violet (Carte de visite) */
.wp-choice-card--violet .wp-choice-card__hero {
  background: linear-gradient(135deg, #faf5ff 0%, #ede9fe 100%);
}
.wp-choice-card--violet .wp-choice-card__hero-glow {
  background: radial-gradient(circle, #8b5cf6 0%, transparent 70%);
}
.wp-choice-card--violet .wp-choice-card__hero-icon .mdi {
  color: #7c3aed;
}
.wp-choice-card--violet input[type="radio"]:checked + .wp-choice-card__inner {
  border-color: #7c3aed;
  box-shadow:
    0 0 0 3px rgba(124, 58, 237, 0.18),
    0 12px 28px -10px rgba(124, 58, 237, 0.35);
}

/* Emerald (WiFi) */
.wp-choice-card--emerald .wp-choice-card__hero {
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
}
.wp-choice-card--emerald .wp-choice-card__hero-glow {
  background: radial-gradient(circle, #10b981 0%, transparent 70%);
}
.wp-choice-card--emerald .wp-choice-card__hero-icon .mdi {
  color: #059669;
}
.wp-choice-card--emerald input[type="radio"]:checked + .wp-choice-card__inner {
  border-color: #10b981;
  box-shadow:
    0 0 0 3px rgba(16, 185, 129, 0.18),
    0 12px 28px -10px rgba(16, 185, 129, 0.35);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .wp-choice-card--colorful .wp-choice-card__inner,
  .wp-choice-card--colorful .wp-choice-card__hero-glow,
  .wp-choice-card--colorful .wp-choice-card__hero-icon,
  .wp-choice-card--colorful .wp-choice-card__hero-pattern {
    transition: none;
  }
  .wp-choice-card--colorful:hover .wp-choice-card__inner,
  .wp-choice-card--colorful:hover .wp-choice-card__hero-icon {
    transform: none;
  }
}

/* Grille des benefits / features */
.wp-feature-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

@media (min-width: 640px) {
  .wp-feature-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.wp-feature-grid__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background-color: #f8fafc;
  border: 1px solid #f1f5f9;
}

.wp-feature-grid__icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: linear-gradient(
    135deg,
    rgba(59, 89, 153, 0.14),
    rgba(59, 89, 153, 0.04)
  );
  color: var(--color-primary);
  font-size: 19px;
}

.wp-feature-grid__title {
  margin: 0 0 2px;
  font-size: 13.5px;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.3;
}

.wp-feature-grid__desc {
  margin: 0;
  font-size: 12px;
  color: #64748b;
  line-height: 1.45;
}

/* ===========================================================
   Trust strip — bande d'avantages info passive (non-interactive)
   =========================================================== */
.wp-trust-strip {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 28px;
  margin-top: 4px;
}

.wp-trust-strip__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #64748b;
  line-height: 1.5;
}

.wp-trust-strip__item .mdi {
  font-size: 17px;
  color: #94a3b8;
  flex-shrink: 0;
}

.wp-trust-strip__item strong {
  color: #1e293b;
  font-weight: 600;
}

/* ===========================================================
   Listing /qr-code — cards specifiques (variation de wp-sub-card)
   =========================================================== */
.wp-qr-card__icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  font-size: 24px;
  transition: transform 0.15s ease;
}

.wp-qr-card--blue .wp-qr-card__icon {
  background: linear-gradient(
    135deg,
    rgba(37, 99, 235, 0.16),
    rgba(37, 99, 235, 0.04)
  );
  color: #2563eb;
}
.wp-qr-card--violet .wp-qr-card__icon {
  background: linear-gradient(
    135deg,
    rgba(124, 58, 237, 0.16),
    rgba(124, 58, 237, 0.04)
  );
  color: #7c3aed;
}
.wp-qr-card--emerald .wp-qr-card__icon {
  background: linear-gradient(
    135deg,
    rgba(16, 185, 129, 0.16),
    rgba(16, 185, 129, 0.04)
  );
  color: #059669;
}

.wp-qr-card:hover .wp-qr-card__icon {
  transform: scale(1.05) rotate(-2deg);
}

.wp-qr-card__summary {
  margin: 0;
  font-size: 13px;
  color: #475569;
  line-height: 1.5;
  padding: 10px 14px;
  border-radius: 10px;
  background-color: #f8fafc;
  border: 1px solid #f1f5f9;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wp-qr-card__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 12px 0;
  border-top: 1px solid #f1f5f9;
  border-bottom: 1px solid #f1f5f9;
}

.wp-qr-card__stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.wp-qr-card__stat-value {
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.15;
}

.wp-qr-card__stat-value--text {
  font-size: 13px;
  font-weight: 600;
}

.wp-qr-card__stat-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  color: #64748b;
  font-weight: 500;
}

.wp-qr-card__stat-label .mdi {
  font-size: 13px;
  color: #94a3b8;
}

@media (max-width: 640px) {
  .wp-trust-strip {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}

/* ===========================================================
   File input stylise (.wp-file-input)
   =========================================================== */
.wp-file-input {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 2px dashed #cbd5e1;
  border-radius: 12px;
  background-color: #f8fafc;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease;
}

.wp-file-input:hover {
  border-color: var(--color-primary);
  background-color: rgba(59, 89, 153, 0.04);
}

.wp-file-input:focus-within {
  border-color: var(--color-primary);
  background-color: #ffffff;
  box-shadow: 0 0 0 3px rgba(59, 89, 153, 0.12);
}

.wp-file-input.is-selected {
  border-style: solid;
  border-color: #10b981;
  background-color: rgba(16, 185, 129, 0.06);
}

.wp-file-input input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.wp-file-input__icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background-color: #ffffff;
  color: var(--color-primary);
  font-size: 22px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

.wp-file-input.is-selected .wp-file-input__icon {
  color: #059669;
}

.wp-file-input__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.wp-file-input__title {
  font-size: 13.5px;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wp-file-input__desc {
  font-size: 12px;
  color: #64748b;
  line-height: 1.4;
}

/* ===========================================================
   Detail QR Code — hero, stats, tips
   =========================================================== */
.wp-qr-hero {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 28px;
  padding: 24px;
}

@media (max-width: 768px) {
  .wp-qr-hero {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 18px;
  }
}

.wp-qr-hero__left {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.wp-qr-hero__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  max-width: 280px;
  padding: 14px;
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  box-shadow: 0 8px 24px -10px rgba(15, 23, 42, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.wp-qr-hero__img {
  width: 100% !important;
  height: auto !important;
  max-width: 100%;
  image-rendering: pixelated;
  display: block;
}

/* La lib qrcodejs injecte un <canvas> dans son div container : on force
   le scale pour qu'il remplisse la frame sans deborder. */
.wp-qr-hero__img canvas,
.wp-qr-hero__img img {
  width: 100% !important;
  height: auto !important;
  display: block;
  image-rendering: pixelated;
}

.wp-qr-hero__loader {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: #ffffff;
  color: #64748b;
  font-size: 12.5px;
}

.wp-qr-hero__loader .mdi {
  font-size: 28px;
  color: var(--color-primary);
}

@keyframes mdi-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.mdi-spin {
  animation: mdi-spin 1s linear infinite;
  display: inline-block;
}

.wp-qr-hero__hint {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  font-size: 12px;
  color: #94a3b8;
  font-weight: 500;
}

.wp-qr-hero__hint .mdi {
  font-size: 14px;
}

.wp-qr-hero__right {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.wp-qr-hero__title {
  margin: 8px 0 0;
  font-size: 24px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.2;
}

.wp-qr-hero__desc {
  margin: 4px 0 0;
  font-size: 13.5px;
  color: #64748b;
  line-height: 1.5;
}

/* Stats grid */
.wp-qr-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
  padding: 14px;
  border-radius: 12px;
  background-color: #f8fafc;
  border: 1px solid #f1f5f9;
}

.wp-qr-stats__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.wp-qr-stats__value {
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wp-qr-stats__label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  color: #64748b;
  font-weight: 500;
}

.wp-qr-stats__label .mdi {
  font-size: 13px;
  color: #94a3b8;
}

/* Actions row */
.wp-qr-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
}

.wp-qr-actions .wp-btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Tips list (aside) */
.wp-tips-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.wp-tips-list__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: #475569;
  line-height: 1.5;
}

.wp-tips-list__item .mdi {
  font-size: 18px;
  flex-shrink: 0;
  margin-top: 1px;
}

.wp-tips-list__item strong {
  color: #0f172a;
  font-weight: 600;
}

/* =========================================================================
   E-Signature multi-step form — /nouvelle-e-signature
   ========================================================================= */

.wp-esign-form {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding-bottom: 96px; /* Reserve l'espace pour la nav sticky */
}

/* ===== Stepper avec barre de progression ===== */
.wp-esign-stepper {
  position: relative;
  padding: 18px 22px 14px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

.wp-esign-stepper__track {
  position: absolute;
  top: 38px;
  left: 22px;
  right: 22px;
  height: 4px;
  background-color: #f1f5f9;
  border-radius: 999px;
  overflow: hidden;
  z-index: 0;
}

.wp-esign-stepper__track-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary) 0%, #6b8acf 100%);
  border-radius: 999px;
  transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.wp-esign-stepper__list {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  z-index: 1;
}

.wp-esign-stepper__item {
  flex: 1;
  min-width: 0;
}

.wp-esign-stepper__btn {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: center;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 500;
  transition: color 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}

.wp-esign-stepper__btn:disabled {
  cursor: default;
}

.wp-esign-stepper__bullet {
  display: inline-grid;
  place-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: #ffffff;
  border: 2px solid #e2e8f0;
  color: #94a3b8;
  font-size: 18px;
  transition: all 0.25s ease;
  flex-shrink: 0;
}

.wp-esign-stepper__btn.is-pending .wp-esign-stepper__bullet {
  background: #f8fafc;
}

.wp-esign-stepper__btn.is-active {
  color: var(--color-primary);
  font-weight: 600;
}

.wp-esign-stepper__btn.is-active .wp-esign-stepper__bullet {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #ffffff;
  box-shadow: 0 0 0 6px rgba(59, 89, 153, 0.12);
}

.wp-esign-stepper__btn.is-done {
  color: #047857;
  cursor: pointer;
}

.wp-esign-stepper__btn.is-done .wp-esign-stepper__bullet {
  background: #10b981;
  border-color: #10b981;
  color: #ffffff;
}

.wp-esign-stepper__btn.is-done:hover .wp-esign-stepper__bullet {
  transform: scale(1.05);
}

.wp-esign-stepper__label-mobile {
  display: none;
  line-height: 1.2;
  max-width: 70px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.wp-esign-stepper__label {
  line-height: 1.2;
  max-width: 100px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

@media (max-width: 639px) {
  .wp-esign-stepper {
    padding: 14px 12px 10px;
  }
  .wp-esign-stepper__track {
    top: 32px;
    left: 12px;
    right: 12px;
  }
  .wp-esign-stepper__bullet {
    width: 30px;
    height: 30px;
    font-size: 15px;
  }
  .wp-esign-stepper__btn.is-active .wp-esign-stepper__bullet {
    box-shadow: 0 0 0 4px rgba(59, 89, 153, 0.12);
  }
  .wp-esign-stepper__label {
    display: none;
  }
  .wp-esign-stepper__label-mobile {
    display: block;
    font-size: 10.5px;
  }
}

.wp-esign-stepper__caption {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid #f1f5f9;
  font-size: 13px;
  color: #64748b;
  text-align: center;
}

/* ===== Step container ===== */
.wp-esign-step {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.wp-esign-step__header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 0 4px;
}

.wp-esign-step__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-content: center;
  background: linear-gradient(
    135deg,
    rgba(59, 89, 153, 0.1),
    rgba(59, 89, 153, 0.18)
  );
  color: var(--color-primary);
  font-size: 20px;
  flex-shrink: 0;
}

.wp-esign-step__icon--violet {
  background: linear-gradient(135deg, #ede9fe, #ddd6fe);
  color: #6d28d9;
}
.wp-esign-step__icon--amber {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  color: #b45309;
}
.wp-esign-step__icon--emerald {
  background: linear-gradient(135deg, #d1fae5, #a7f3d0);
  color: #047857;
}
.wp-esign-step__icon--success {
  background: linear-gradient(135deg, #10b981, #059669);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);
}

.wp-esign-step__title {
  margin: 0;
  font-family: "Poppins", sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.25;
}

.wp-esign-step__desc {
  margin: 4px 0 0;
  font-size: 14px;
  color: #64748b;
  line-height: 1.55;
  max-width: 620px;
}

@media (max-width: 639px) {
  .wp-esign-step__title {
    font-size: 18px;
  }
  .wp-esign-step__icon {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }
}

/* ===== Fieldsets ===== */
.wp-esign-fieldset {
  border: 0;
  margin: 0 0 24px;
  padding: 0;
}

.wp-esign-fieldset:last-child {
  margin-bottom: 0;
}

.wp-esign-fieldset__legend {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 0 14px;
  font-size: 13px;
  font-weight: 600;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.wp-esign-fieldset__legend-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  background: rgba(59, 89, 153, 0.1);
  color: var(--color-primary);
  font-size: 10.5px;
  font-weight: 600;
  border-radius: 999px;
  text-transform: none;
  letter-spacing: 0;
}

.wp-esign-fieldset__legend-tag--muted {
  background: #f1f5f9;
  color: #64748b;
}

.wp-esign-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

@media (min-width: 640px) {
  .wp-esign-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .wp-esign-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .wp-esign-grid--cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .wp-form-group--full {
    grid-column: 1 / -1;
  }
}

.wp-label__hint {
  margin-left: 4px;
  font-size: 11px;
  font-weight: 400;
  color: #94a3b8;
}

/* ===== Dropzone (step 3) ===== */
.wp-dropzone {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  padding: 36px 20px;
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
  border: 2px dashed #cbd5e1;
  border-radius: 16px;
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease,
    transform 0.05s ease;
}

.wp-dropzone:hover,
.wp-dropzone:focus-visible {
  border-color: var(--color-primary);
  background: linear-gradient(180deg, rgba(59, 89, 153, 0.04) 0%, #ffffff 100%);
  outline: none;
}

.wp-dropzone:active {
  transform: scale(0.995);
}

.wp-dropzone--error {
  border-color: #ef4444;
  background: linear-gradient(180deg, #fef2f2 0%, #ffffff 100%);
  animation: wp-shake 0.5s ease;
}

@keyframes wp-shake {
  0%,
  100% {
    transform: translateX(0);
  }
  20%,
  60% {
    transform: translateX(-6px);
  }
  40%,
  80% {
    transform: translateX(6px);
  }
}

.wp-dropzone__placeholder {
  text-align: center;
  max-width: 360px;
}

.wp-dropzone__icon {
  display: inline-grid;
  place-content: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  background: linear-gradient(
    135deg,
    rgba(59, 89, 153, 0.12),
    rgba(59, 89, 153, 0.22)
  );
  color: var(--color-primary);
  border-radius: 18px;
  font-size: 28px;
}

.wp-dropzone:hover .wp-dropzone__icon {
  transform: translateY(-2px);
}

.wp-dropzone__title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #0f172a;
}

.wp-dropzone__hint {
  margin: 4px 0 0;
  font-size: 13px;
  color: #64748b;
}

.wp-dropzone__link {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(59, 89, 153, 0.3);
  text-underline-offset: 3px;
}

.wp-dropzone__rules {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 14px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
  color: #64748b;
}

.wp-dropzone__rules li {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  font-weight: 500;
}

.wp-dropzone__rules .mdi {
  font-size: 14px;
}

.wp-dropzone__progress {
  text-align: center;
}

.wp-dropzone__spinner {
  display: inline-block;
  width: 32px;
  height: 32px;
  margin-bottom: 12px;
  border: 3px solid #e2e8f0;
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: wp-spin 0.8s linear infinite;
}

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

.wp-dropzone__progress-text {
  margin: 0;
  font-size: 14px;
  color: #475569;
}

/* ===== Dropzone done state ===== */
.wp-dropzone-done {
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  border: 1px solid #a7f3d0;
  border-radius: 16px;
  padding: 18px 20px;
}

.wp-dropzone-done__head {
  display: flex;
  align-items: center;
  gap: 14px;
}

.wp-dropzone-done__icon {
  width: 48px;
  height: 48px;
  background: #ffffff;
  border-radius: 12px;
  display: grid;
  place-content: center;
  color: #059669;
  font-size: 24px;
  flex-shrink: 0;
}

.wp-dropzone-done__label {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: #047857;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.wp-dropzone-done__name {
  margin: 2px 0 0;
  font-size: 15px;
  font-weight: 600;
  color: #064e3b;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.wp-dropzone-done__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(6, 78, 59, 0.12);
}

/* ===== Card titre Step 4 ===== */
.wp-esign-card__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #0f172a;
}

.wp-esign-card__hint {
  margin: 0 0 14px;
  font-size: 13px;
  color: #64748b;
}

/* ===== Chips justificatifs ===== */
.wp-esign-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.wp-esign-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 500;
  color: #475569;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.wp-esign-chip input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.wp-esign-chip__visual {
  display: inline-grid;
  place-content: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #f1f5f9;
  color: transparent;
  font-size: 12px;
  transition: all 0.18s ease;
}

.wp-esign-chip:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
}

.wp-esign-chip:has(input:checked) {
  background: rgba(59, 89, 153, 0.1);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.wp-esign-chip:has(input:checked) .wp-esign-chip__visual {
  background: var(--color-primary);
  color: #ffffff;
}

.wp-esign-chip:focus-within {
  box-shadow: 0 0 0 3px rgba(59, 89, 153, 0.2);
}

/* ===== Switch toggle Step 4 ===== */
.wp-esign-switch-row {
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  user-select: none;
}

.wp-esign-switch-row__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-content: center;
  background: rgba(59, 89, 153, 0.1);
  color: var(--color-primary);
  font-size: 20px;
  flex-shrink: 0;
}

.wp-esign-switch-row__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.wp-esign-switch-row__title {
  font-size: 14.5px;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.35;
}

.wp-esign-switch-row__desc {
  font-size: 13px;
  color: #64748b;
  line-height: 1.45;
}

.wp-esign-switch {
  position: relative;
  flex-shrink: 0;
  width: 48px;
  height: 28px;
  background: #cbd5e1;
  border-radius: 999px;
  transition: background-color 0.18s ease;
  cursor: pointer;
}

.wp-esign-switch.is-on {
  background: var(--color-primary);
}

.wp-esign-switch__thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  background: #ffffff;
  border-radius: 999px;
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.15);
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.wp-esign-switch.is-on .wp-esign-switch__thumb {
  transform: translateX(20px);
}

.wp-esign-switch:focus-within {
  box-shadow: 0 0 0 3px rgba(59, 89, 153, 0.2);
}

@media (max-width: 639px) {
  .wp-esign-switch-row {
    gap: 12px;
  }
  .wp-esign-switch-row__icon {
    width: 38px;
    height: 38px;
    font-size: 18px;
  }
}

.wp-esign-collapse {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px dashed #e2e8f0;
}

/* ===== Recap (step 5) ===== */
.wp-esign-recap {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

@media (min-width: 768px) {
  .wp-esign-recap {
    grid-template-columns: repeat(2, 1fr);
  }
  .wp-esign-recap__card--full {
    grid-column: 1 / -1;
  }
  .wp-esign-recap__card--file {
    grid-column: 1 / -1;
  }
}

.wp-esign-recap__card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  overflow: hidden;
}

.wp-esign-recap__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid #f1f5f9;
}

.wp-esign-recap__head h3 {
  flex: 1;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
}

.wp-esign-recap__head-icon {
  display: inline-grid;
  place-content: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: rgba(59, 89, 153, 0.1);
  color: var(--color-primary);
  font-size: 16px;
  flex-shrink: 0;
}

.wp-esign-recap__head-icon--blue {
  background: rgba(59, 130, 246, 0.12);
  color: #1d4ed8;
}
.wp-esign-recap__head-icon--violet {
  background: rgba(139, 92, 246, 0.12);
  color: #6d28d9;
}
.wp-esign-recap__head-icon--emerald {
  background: rgba(16, 185, 129, 0.14);
  color: #047857;
}

.wp-esign-recap__edit {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background-color 0.15s ease;
}

.wp-esign-recap__edit:hover {
  background: rgba(59, 89, 153, 0.08);
  text-decoration: underline;
}

.wp-esign-recap__list {
  margin: 0;
  padding: 12px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.wp-esign-recap__row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 4px 0;
  font-size: 13px;
  line-height: 1.4;
}

.wp-esign-recap__row dt {
  flex: 0 0 auto;
  min-width: 90px;
  color: #94a3b8;
  font-weight: 500;
}

.wp-esign-recap__row dd {
  margin: 0;
  color: #1e293b;
  font-weight: 500;
  word-break: break-word;
}

.wp-esign-recap__file-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.wp-esign-recap__file-link:hover {
  background: #f8fafc;
}

.wp-esign-recap__file-icon {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: linear-gradient(135deg, #fee2e2, #fecaca);
  color: #dc2626;
  display: grid;
  place-content: center;
  font-size: 28px;
  flex-shrink: 0;
}

.wp-esign-recap__file-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.wp-esign-recap__file-name {
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.wp-esign-recap__file-cta {
  font-size: 13px;
  color: var(--color-primary);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.wp-esign-recap__options {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  padding: 14px 18px;
}

@media (min-width: 640px) {
  .wp-esign-recap__options {
    grid-template-columns: repeat(2, 1fr);
  }
  .wp-esign-recap__option--wide {
    grid-column: 1 / -1;
  }
}

.wp-esign-recap__option-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.wp-esign-recap__option-label .mdi {
  font-size: 14px;
  color: #94a3b8;
}

.wp-esign-recap__option-value {
  font-size: 14px;
  color: #1e293b;
  line-height: 1.5;
}

.wp-esign-recap__submit {
  padding: 20px;
  background: linear-gradient(
    135deg,
    rgba(59, 89, 153, 0.04),
    rgba(59, 89, 153, 0.08)
  );
  border-color: rgba(59, 89, 153, 0.25);
}

/* label.… : sans l'élément, `.wp-shell label { display: block }` (plus
   spécifique) l'emporte et la case passe au-dessus du texte. */
label.wp-esign-disclaimer {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  margin-bottom: 16px;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease;
}

.wp-esign-disclaimer:has(input:checked) {
  border-color: var(--color-primary);
  background: rgba(59, 89, 153, 0.04);
}

.wp-esign-disclaimer__check {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.wp-esign-disclaimer__custom {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 2px solid #cbd5e1;
  background: #ffffff;
  display: grid;
  place-content: center;
  color: transparent;
  font-size: 14px;
  transition: all 0.15s ease;
  margin-top: 2px;
}

.wp-esign-disclaimer:has(input:checked) .wp-esign-disclaimer__custom {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #ffffff;
}

.wp-esign-disclaimer__text {
  flex: 1;
  font-size: 13px;
  color: #475569;
  line-height: 1.55;
}

.wp-esign-disclaimer__text strong {
  display: block;
  color: #0f172a;
  font-weight: 600;
  margin-bottom: 2px;
}

.wp-esign-recap__legal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 12px 0 0;
  font-size: 12px;
  color: #64748b;
}

.wp-esign-recap__legal .mdi {
  color: #10b981;
  font-size: 16px;
}

/* ===== Navigation sticky bas ===== */
.wp-esign-nav {
  position: sticky;
  bottom: 0;
  margin: 24px -16px -16px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.92);
  border-top: 1px solid #e2e8f0;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 20;
}

@media (min-width: 1024px) {
  .wp-esign-nav {
    margin: 24px -32px -32px;
    padding: 14px 32px;
  }
}

.wp-esign-nav__inner {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 100%;
}

.wp-esign-nav__prev {
  min-height: 44px;
}

.wp-esign-nav__prev:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.wp-esign-nav__next {
  margin-left: auto;
  min-height: 44px;
}

.wp-esign-nav__progress {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  margin-right: auto;
  padding: 6px 12px;
  background: #f1f5f9;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: #475569;
  font-variant-numeric: tabular-nums;
}

.wp-esign-nav__last {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  color: #047857;
}

@media (max-width: 639px) {
  .wp-esign-nav__progress {
    display: none;
  }
}

/* ===== Loading state submit ===== */
.wp-btn.is-loading {
  pointer-events: none;
  opacity: 0.85;
}

.wp-btn.is-loading::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 8px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: wp-spin 0.7s linear infinite;
}

.wp-btn.is-loading .mdi {
  display: none;
}

/* Drag hover state pour la dropzone e-signature */
.wp-dropzone--hover {
  border-color: var(--color-primary);
  background: linear-gradient(
    180deg,
    rgba(59, 89, 153, 0.08) 0%,
    rgba(59, 89, 153, 0.02) 100%
  );
  transform: scale(1.005);
}

/* =========================================================================
   Selecteur de langue (header)
   ========================================================================= */
.wp-lang-dropdown {
  position: relative;
}

.wp-lang-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    transform 0.05s ease;
  padding: 0;
}

.wp-lang-trigger:hover {
  background-color: #f1f5f9;
}

.wp-lang-trigger:active {
  transform: scale(0.96);
}

.wp-lang-trigger__flag {
  display: inline-grid;
  place-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  font-size: 18px;
  line-height: 1;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  transition: border-color 0.15s ease;
}

.wp-lang-trigger:hover .wp-lang-trigger__flag {
  border-color: var(--color-primary);
}

.wp-lang-menu {
  min-width: 200px;
}

.wp-lang-form {
  margin: 0;
}

.wp-lang-item {
  width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: #475569;
  font-size: 14px;
  text-align: left;
  transition:
    background-color 0.12s ease,
    color 0.12s ease;
}

.wp-lang-item:hover {
  background-color: #f8fafc;
  color: #0f172a;
}

.wp-lang-item.is-active {
  color: var(--color-primary);
  font-weight: 600;
  background-color: rgba(59, 89, 153, 0.06);
}

.wp-lang-item__flag {
  font-size: 16px;
  line-height: 1;
}