/* ============================================================
   Marchés Prix Bénin — Client Board CSS COMPLET (V3 — avril 2026)
   ============================================================
   1. Layout sidebar + topbar (BASE)
   2. KPIs en haut
   3. Topgrid (Résumé + Side stats)
   4. Cards génériques + pills
   5. Accès rapide (cartes dashboard)
   6. Page header (chronogramme/collected/deliverables)
   7. Téléchargements (CSV/Excel/PDF)
   8. Stats grid + Tableaux
   9. Chronogramme — sessions list
  10. Pagination
  11. Charts (Chart.js)
  12. Boutons + état vide
   ============================================================ */


/* ===================================================================
   1. LAYOUT — Sidebar + Topbar + Content Wrapper
   =================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,400&display=swap');

*,
*::before,
*::after {
  font-family: 'Ubuntu', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

.mp-cliboard {
  display: flex;
  width: 100vw;
  min-height: 100vh;
  background: #f9fafb;

  /* Casse le mp-container pour s'étirer pleine largeur viewport */
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  margin-top: 0;
  margin-bottom: 0; /* compense le padding du footer */

  /* Empêche l'écrasement par max-width parent */
  max-width: none !important;
  box-sizing: border-box;
}

/* ============== SIDEBAR (gauche) ============== */
.mp-cliboard-sidebar {
  width: 240px;
  flex-shrink: 0;
  background: linear-gradient(180deg, #166534 0%, #1f8b4c 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100vh;          /* ⭐ DÉCOMMENTER */
  max-height: 100vh;      /* ⭐ AJOUTER (sécurité) */
  overflow-y: auto;
  z-index: 10;
}

.mp-cliboard-sidebar__head {
  padding: 22px 18px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.mp-cliboard-sidebar__title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 4px;
}

.mp-cliboard-sidebar__code {
  font-size: 12px;
  font-family: 'SF Mono', Monaco, monospace;
  color: #fff;
  background: rgba(255, 255, 255, 0.15);
  padding: 4px 8px;
  border-radius: 5px;
  display: inline-block;
}

.mp-cliboard-sidebar__nav {
  flex: 1;
  padding: 14px 10px;
}

.mp-cliboard-sidebar__group {
  margin-bottom: 18px;
}

.mp-cliboard-sidebar__groupLabel {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: rgba(255, 255, 255, 0.55);
  padding: 0 10px;
  margin-bottom: 6px;
}

.mp-cliboard-sidebar__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  margin-bottom: 2px;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
  transition: all 0.15s;
}

.mp-cliboard-sidebar__link:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.mp-cliboard-sidebar__link.is-active {
  background: rgba(255, 255, 255, 0.95);
  color: #166534;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.mp-cliboard-sidebar__link--ghost {
  opacity: 0.7;
}

.mp-cliboard-sidebar__linkIcon {
  font-size: 16px;
  flex-shrink: 0;
  width: 20px;
  text-align: center;
}

.mp-cliboard-sidebar__linkLabel {
  flex: 1;
}

.mp-cliboard-sidebar__footer {
  padding: 14px 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.mp-cliboard-sidebar__logout {
  display: block;
  text-align: center;
  padding: 9px 14px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 8px;
  color: #fff;
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 600;
  transition: all 0.15s;
}

.mp-cliboard-sidebar__logout:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #fff;
}

/* ============== ZONE PRINCIPALE (droite) ============== */
.mp-cliboard-main {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
}

/* Topbar */
.mp-cliboard-topbar {
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 5;
}

.mp-cliboard-topbar__title {
  font-size: 18px;
  font-weight: 700;
  color: #1f2937;
  flex: 1;
}

.mp-cliboard-topbar__user {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #f0fdf4;
  padding: 6px 14px 6px 6px;
  border-radius: 999px;
}

.mp-cliboard-topbar__userAvatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #1f8b4c;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
}

.mp-cliboard-topbar__userInfo {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.mp-cliboard-topbar__userName {
  font-size: 13px;
  font-weight: 700;
  color: #1f2937;
}

.mp-cliboard-topbar__userEmail {
  font-size: 11px;
  color: #6b7280;
}

/* Burger (mobile) */
.mp-cliboard-burger {
  display: none;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 18px;
  cursor: pointer;
}

/* Content */
.mp-cliboard-content {
  flex: 1 1 auto;
  width: 100%;
  padding: 24px 32px;
  box-sizing: border-box;
}


/* ===================================================================
   2. KPIs en haut (Code/Statut/Sessions/Total)
   =================================================================== */

.mp-cliboard__kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 22px;
}

@media (max-width: 980px) {
  .mp-cliboard__kpis { grid-template-columns: repeat(2, 1fr); }
}

.mp-cliboard-kpi {
  background: #fff;
  padding: 18px 20px;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  position: relative;
  overflow: hidden;
}

.mp-cliboard-kpi::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 4px;
  background: #1f8b4c;
}

.mp-cliboard-kpi--green::before  { background: #1f8b4c; }
.mp-cliboard-kpi--blue::before   { background: #2563eb; }
.mp-cliboard-kpi--amber::before  { background: #f59e0b; }
.mp-cliboard-kpi--violet::before { background: #8b5cf6; }

.mp-cliboard-kpi__label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6b7280;
  margin-bottom: 8px;
}

.mp-cliboard-kpi__value {
  font-size: 24px;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 4px;
  word-break: break-word;
}

.mp-cliboard-kpi__sub {
  font-size: 12px;
  color: #9ca3af;
}


/* ===================================================================
   3. TOPGRID — Résumé + Side stats
   =================================================================== */

.mp-cliboard__topGrid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 18px;
  margin-bottom: 22px;
}

@media (max-width: 980px) {
  .mp-cliboard__topGrid { grid-template-columns: 1fr; }
}

/* Résumé en lignes "label : valeur" */
.mp-cliboard-summary {
  display: flex;
  flex-direction: column;
}

.mp-cliboard-summary__row {
  display: grid;
  grid-template-columns: 200px 1fr;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid #f3f4f6;
}

.mp-cliboard-summary__row:last-child { border-bottom: 0; }

.mp-cliboard-summary__row--total {
  border-top: 2px solid #1f8b4c;
  border-bottom: 0;
  padding-top: 12px;
  margin-top: 6px;
}

.mp-cliboard-summary__row--total .mp-cliboard-summary__value {
  font-weight: 700;
  font-size: 17px;
  color: #1f8b4c;
}

.mp-cliboard-summary__label {
  font-size: 12.5px;
  color: #6b7280;
  font-weight: 500;
}

.mp-cliboard-summary__value {
  font-size: 14px;
  color: #1f2937;
  font-weight: 600;
}

.mp-cliboard-summary__code {
  font-family: 'SF Mono', Monaco, monospace;
  background: #ecfdf5;
  color: #1f8b4c;
  padding: 3px 9px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 700;
}

/* Side stats (cartes verticales colorées) */
.mp-cliboard-sideStats {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mp-cliboard-stat {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-left: 4px solid #1f8b4c;
  border-radius: 10px;
  padding: 14px 16px;
}

.mp-cliboard-stat--green  { border-left-color: #1f8b4c; }
.mp-cliboard-stat--blue   { border-left-color: #2563eb; }
.mp-cliboard-stat--amber  { border-left-color: #f59e0b; }
.mp-cliboard-stat--violet { border-left-color: #8b5cf6; }

.mp-cliboard-stat__label {
  font-size: 11px;
  font-weight: 700;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

.mp-cliboard-stat__value {
  font-size: 17px;
  font-weight: 700;
  color: #1f2937;
}

.mp-cliboard-stat__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mp-cliboard-stat__listItem {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
}

.mp-cliboard-stat__listItem span {
  color: #6b7280;
}

.mp-cliboard-stat__listItem strong {
  color: #1f8b4c;
  font-weight: 700;
}


/* ===================================================================
   4. CARDS génériques + Pills
   =================================================================== */

.mp-cliboard-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 18px;
}

.mp-cliboard-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f3f4f6;
}

.mp-cliboard-card__title {
  margin: 0 0 4px 0;
  font-size: 16px;
  font-weight: 700;
  color: #1f2937;
}

.mp-cliboard-card__desc {
  margin: 0;
  font-size: 13px;
  color: #6b7280;
  line-height: 1.5;
}

/* Pills (badges de statut) */
.mp-cliboard-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: #f3f4f6;
  color: #6b7280;
  white-space: nowrap;
}

.mp-cliboard-pill--success { background: #dcfce7; color: #166534; }
.mp-cliboard-pill--info    { background: #dbeafe; color: #1e40af; }
.mp-cliboard-pill--warning { background: #fef3c7; color: #92400e; }
.mp-cliboard-pill--danger  { background: #fee2e2; color: #991b1b; }
.mp-cliboard-pill--muted   { background: #f3f4f6; color: #6b7280; }


/* ===================================================================
   5. ACCÈS RAPIDE (3 cartes dashboard)
   =================================================================== */

.mp-cliboard-quicknav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 8px;
}

@media (max-width: 980px) {
  .mp-cliboard-quicknav { grid-template-columns: 1fr; }
}

.mp-cliboard-quicknav__card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px;
  border: 1.5px solid #e5e7eb;
  border-radius: 14px;
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: all 0.18s ease;
  position: relative;
  overflow: hidden;
}

.mp-cliboard-quicknav__card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 4px; height: 100%;
  background: #1f8b4c;
  transition: width 0.18s ease;
}

.mp-cliboard-quicknav__card--green::before  { background: #1f8b4c; }
.mp-cliboard-quicknav__card--blue::before   { background: #2563eb; }
.mp-cliboard-quicknav__card--violet::before { background: #8b5cf6; }

.mp-cliboard-quicknav__card:hover {
  border-color: #1f8b4c;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(31, 139, 76, 0.12);
}

.mp-cliboard-quicknav__card:hover::before {
  width: 6px;
}

.mp-cliboard-quicknav__icon {
  font-size: 36px;
  line-height: 1;
}

.mp-cliboard-quicknav__title {
  font-size: 16px;
  font-weight: 700;
  color: #1f2937;
  margin: 0;
}

.mp-cliboard-quicknav__desc {
  font-size: 13px;
  color: #6b7280;
  line-height: 1.5;
  flex: 1;
}

.mp-cliboard-quicknav__cta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px dashed #e5e7eb;
  font-size: 13px;
  font-weight: 600;
  color: #1f8b4c;
}

.mp-cliboard-quicknav__card--blue   .mp-cliboard-quicknav__cta { color: #2563eb; }
.mp-cliboard-quicknav__card--violet .mp-cliboard-quicknav__cta { color: #8b5cf6; }

.mp-cliboard-quicknav__card:hover .mp-cliboard-quicknav__cta {
  text-decoration: underline;
}


/* ===================================================================
   6. PAGE HEADER (chronogramme/collected/deliverables)
   =================================================================== */

.mp-cliboard-pagehead {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e5e7eb;
}

.mp-cliboard-pagehead__title {
  margin: 0 0 6px 0;
  font-size: 24px;
  font-weight: 700;
  color: #1f2937;
  letter-spacing: -0.01em;
}

.mp-cliboard-pagehead__desc {
  margin: 0;
  font-size: 14px;
  color: #6b7280;
  max-width: 620px;
  line-height: 1.5;
}

.mp-cliboard-pagehead__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: flex-start;
}

.mp-cliboard-pagehead__metaItem {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 8px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 110px;
}

.mp-cliboard-pagehead__metaLabel {
  font-size: 10px;
  font-weight: 700;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.mp-cliboard-pagehead__metaValue {
  font-size: 14px;
  font-weight: 600;
  color: #1f2937;
}

.mp-cliboard-pagehead__metaValue code {
  background: #ecfdf5;
  color: #1f8b4c;
  padding: 2px 7px;
  border-radius: 5px;
  font-size: 12px;
  font-family: 'SF Mono', Monaco, monospace;
}


/* ===================================================================
   7. CARTES TÉLÉCHARGEMENT (CSV/Excel/PDF)
   =================================================================== */

.mp-cliboard-downloads {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 22px;
}

@media (max-width: 980px) {
  .mp-cliboard-downloads { grid-template-columns: 1fr; }
}

.mp-cliboard-download {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px;
  border: 1.5px solid #e5e7eb;
  border-radius: 14px;
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: all 0.18s ease;
  position: relative;
  overflow: hidden;
}

.mp-cliboard-download::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 4px; height: 100%;
  background: #1f8b4c;
  transition: width 0.18s ease;
}

.mp-cliboard-download--csv::before   { background: #2563eb; }
.mp-cliboard-download--excel::before { background: #1f8b4c; }
.mp-cliboard-download--pdf::before   { background: #dc2626; }

.mp-cliboard-download:hover {
  border-color: #1f8b4c;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(31, 139, 76, 0.12);
}

.mp-cliboard-download:hover::before {
  width: 6px;
}

.mp-cliboard-download__icon {
  font-size: 32px;
  line-height: 1;
}

.mp-cliboard-download__title {
  font-size: 15px;
  font-weight: 700;
  color: #1f2937;
}

.mp-cliboard-download__text {
  font-size: 13px;
  color: #6b7280;
  line-height: 1.5;
  flex: 1;
}

.mp-cliboard-download__cta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px dashed #e5e7eb;
  font-size: 13px;
  font-weight: 600;
  color: #1f8b4c;
}

.mp-cliboard-download--csv   .mp-cliboard-download__cta { color: #2563eb; }
.mp-cliboard-download--excel .mp-cliboard-download__cta { color: #1f8b4c; }
.mp-cliboard-download--pdf   .mp-cliboard-download__cta { color: #dc2626; }

.mp-cliboard-download__arrow {
  margin-left: auto;
  font-size: 16px;
  font-weight: bold;
  transition: transform 0.18s ease;
}

.mp-cliboard-download:hover .mp-cliboard-download__arrow {
  transform: translateY(2px);
}


/* ===================================================================
   8. STATS GRID + Tableaux
   =================================================================== */

.mp-cliboard-statgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

@media (max-width: 760px) {
  .mp-cliboard-statgrid { grid-template-columns: repeat(2, 1fr); }
}

.mp-cliboard-statbox {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 14px 16px;
  position: relative;
  overflow: hidden;
}

.mp-cliboard-statbox::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 3px;
  background: #1f8b4c;
}

.mp-cliboard-statbox--green::before  { background: #1f8b4c; }
.mp-cliboard-statbox--blue::before   { background: #2563eb; }
.mp-cliboard-statbox--rose::before   { background: #ec4899; }
.mp-cliboard-statbox--violet::before { background: #8b5cf6; }

.mp-cliboard-statbox__label {
  font-size: 11px;
  font-weight: 700;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

.mp-cliboard-statbox__value {
  font-size: 18px;
  font-weight: 700;
  color: #1f2937;
}

/* Tableau */
.mp-cliboard-tablewrap {
  overflow-x: auto;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}

.mp-cliboard-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.mp-cliboard-table th {
  background: #f9fafb;
  color: #374151;
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid #e5e7eb;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.04em;
}

.mp-cliboard-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #f3f4f6;
  color: #1f2937;
  vertical-align: top;
}

.mp-cliboard-table tr:last-child td { border-bottom: 0; }

.mp-cliboard-table tr:hover td { background: #f9fafb; }

.mp-cliboard-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.mp-cliboard-tablenote {
  margin: 10px 0 0 0;
  padding: 10px 14px;
  background: #ecfdf5;
  border-left: 3px solid #1f8b4c;
  border-radius: 4px;
  font-size: 13px;
  color: #166534;
}


/* ===================================================================
   9. ÉTAT VIDE + Chronostats (4 colonnes côte à côte)
   =================================================================== */

.mp-cliboard-empty {
  text-align: center;
  padding: 50px 20px;
  background: #fff;
  border: 2px dashed #e5e7eb;
  border-radius: 14px;
}

.mp-cliboard-empty__icon {
  font-size: 48px;
  margin-bottom: 14px;
}

.mp-cliboard-empty__title {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 700;
  color: #1f2937;
}

.mp-cliboard-empty__text {
  margin: 0 auto;
  font-size: 14px;
  color: #6b7280;
  max-width: 480px;
}

/* Chronostats (4 boxes) */
.mp-cliboard-chronostats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}

@media (max-width: 760px) {
  .mp-cliboard-chronostats { grid-template-columns: repeat(2, 1fr); }
}

.mp-cliboard-chronostats__item {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mp-cliboard-chronostats__label {
  font-size: 10px;
  font-weight: 700;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.mp-cliboard-chronostats__value {
  font-size: 14px;
  font-weight: 700;
  color: #1f2937;
}

/* Timeline (4 jalons) */
.mp-cliboard-timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 6px;
}

@media (max-width: 760px) {
  .mp-cliboard-timeline { grid-template-columns: 1fr; }
}

.mp-cliboard-timeline__item {
  position: relative;
  padding: 14px 14px 14px 38px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
}

.mp-cliboard-timeline__item::before {
  content: '⏳';
  position: absolute;
  left: 12px;
  top: 14px;
  font-size: 16px;
}

.mp-cliboard-timeline__item.is-done {
  background: #f0fdf4;
  border-color: #bbf7d0;
}

.mp-cliboard-timeline__item.is-done::before {
  content: '✅';
}

.mp-cliboard-timeline__title {
  font-size: 13px;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 3px;
}

.mp-cliboard-timeline__date {
  font-size: 12px;
  color: #6b7280;
  font-weight: 500;
}


/* ===================================================================
  10. CHRONOGRAMME — sessions list
   =================================================================== */

.mp-cliboard-sessions {
  margin-top: 12px;
  padding-top: 14px;
  border-top: 1px dashed #e5e7eb;
}

.mp-cliboard-sessions__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 10px;
}

.mp-cliboard-sessions__title {
  font-size: 13px;
  font-weight: 700;
  color: #1f2937;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
}

.mp-cliboard-sessions__counter {
  font-size: 12px;
  color: #6b7280;
  background: #f3f4f6;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 600;
}

.mp-cliboard-sessionlist {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mp-cliboard-session {
  display: grid;
  grid-template-columns: 50px 110px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  transition: all 0.15s;
}

.mp-cliboard-session.is-done {
  background: #f0fdf4;
  border-color: #bbf7d0;
}

.mp-cliboard-session.is-today {
  background: #fffbeb;
  border-color: #fde68a;
  box-shadow: 0 0 0 3px rgba(253, 224, 71, 0.15);
}

.mp-cliboard-session__num {
  font-weight: 700;
  color: #1f8b4c;
  font-size: 14px;
  background: #ecfdf5;
  padding: 4px 8px;
  border-radius: 6px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.mp-cliboard-session.is-today .mp-cliboard-session__num {
  background: #fef3c7;
  color: #92400e;
}

.mp-cliboard-session__date {
  font-weight: 600;
  color: #1f2937;
  font-size: 13px;
}

.mp-cliboard-session__info {
  font-size: 13px;
  color: #6b7280;
}

.mp-cliboard-session__info strong {
  color: #1f8b4c;
  font-weight: 600;
}

.mp-cliboard-session__pill {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 9px;
  border-radius: 999px;
  background: #f3f4f6;
  color: #6b7280;
  white-space: nowrap;
}

.mp-cliboard-session.is-done .mp-cliboard-session__pill {
  background: #dcfce7;
  color: #166534;
}

.mp-cliboard-session.is-today .mp-cliboard-session__pill {
  background: #fde68a;
  color: #92400e;
}

@media (max-width: 600px) {
  .mp-cliboard-session {
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "num date pill"
      "info info info";
  }
  .mp-cliboard-session__num  { grid-area: num; }
  .mp-cliboard-session__date { grid-area: date; }
  .mp-cliboard-session__info { grid-area: info; font-size: 12px; }
  .mp-cliboard-session__pill { grid-area: pill; }
}


/* ===================================================================
  11. PAGINATION
   =================================================================== */

.mp-cliboard-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.mp-cliboard-pager__btn {
  min-width: 36px;
  height: 36px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e5e7eb;
  background: #fff;
  border-radius: 8px;
  color: #6b7280;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.15s;
}

.mp-cliboard-pager__btn:hover {
  border-color: #1f8b4c;
  color: #1f8b4c;
  background: #f0fdf4;
}

.mp-cliboard-pager__btn.is-active {
  background: #1f8b4c;
  border-color: #1f8b4c;
  color: #fff;
  cursor: default;
  pointer-events: none;
}

.mp-cliboard-pager__btn.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.mp-cliboard-pager__ellipsis {
  padding: 0 4px;
  color: #9ca3af;
  font-size: 14px;
  letter-spacing: 2px;
}

.mp-cliboard-pager__info {
  margin-top: 8px;
  text-align: center;
  font-size: 12px;
  color: #6b7280;
}


/* ===================================================================
  12. CHARTS (Chart.js) + Boutons
   =================================================================== */

.mp-cliboard-charts {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 18px;
  margin-bottom: 22px;
}

@media (max-width: 1080px) {
  .mp-cliboard-charts { grid-template-columns: 1fr; }
}

.mp-cliboard-chart-box {
  position: relative;
  width: 100%;
  height: 320px;
  margin-top: 10px;
}

.mp-cliboard-chart-box canvas {
  max-width: 100%;
  max-height: 100%;
}

/* Boutons */
.mp-cliboard-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.mp-cliboard-btn--primary {
  background: #1f8b4c;
  color: #fff;
  border-color: #1f8b4c;
}

.mp-cliboard-btn--primary:hover {
  background: #166534;
  border-color: #166534;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(31, 139, 76, 0.25);
}

.mp-cliboard-btn--ghost {
  background: #fff;
  color: #6b7280;
  border-color: #e5e7eb;
}

.mp-cliboard-btn--ghost:hover {
  border-color: #1f8b4c;
  color: #1f8b4c;
  background: #f0fdf4;
}


/* ===================================================================
  13. RESPONSIVE — Mobile (sidebar burger)
   =================================================================== */

@media (max-width: 860px) {
  .mp-cliboard-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
  }

  .mp-cliboard.is-sidebar-open .mp-cliboard-sidebar {
    transform: translateX(0);
  }

  .mp-cliboard-burger {
    display: inline-flex;
  }

  .mp-cliboard-content {
    padding: 16px;
  }

  .mp-cliboard-summary__row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* =====================================================================
   CSS additions pour la page /dashboard/requests
   À ajouter à la fin de mp-client-board.css
   ===================================================================== */

/* Boutons d'action dans le pagehead */
.mp-cliboard-pagehead__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

/* Grille des cartes de demandes actives */
.mp-cliboard-reqcards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 16px;
}

@media (max-width: 760px) {
  .mp-cliboard-reqcards { grid-template-columns: 1fr; }
}

/* Carte de demande */
.mp-cliboard-reqcard {
  background: #fff;
  border: 1.5px solid #e5e7eb;
  border-left: 4px solid #1f8b4c;
  border-radius: 12px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: all 0.18s;
}

.mp-cliboard-reqcard:hover {
  border-color: #1f8b4c;
  box-shadow: 0 6px 18px rgba(31, 139, 76, 0.08);
}

/* Head de la carte */
.mp-cliboard-reqcard__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px dashed #e5e7eb;
}

.mp-cliboard-reqcard__codewrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.mp-cliboard-reqcard__code {
  font-family: 'SF Mono', Monaco, monospace;
  font-size: 13px;
  font-weight: 700;
  color: #1f8b4c;
  background: #ecfdf5;
  padding: 4px 10px;
  border-radius: 6px;
  display: inline-block;
  width: fit-content;
}

.mp-cliboard-reqcard__total {
  font-size: 18px;
  font-weight: 700;
  color: #1f8b4c;
  text-align: right;
}

/* Body : lignes label/value */
.mp-cliboard-reqcard__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mp-cliboard-reqcard__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  gap: 10px;
}

.mp-cliboard-reqcard__rowLabel {
  color: #6b7280;
  font-weight: 500;
  flex-shrink: 0;
}

.mp-cliboard-reqcard__rowValue {
  color: #1f2937;
  font-weight: 600;
  text-align: right;
}

/* Footer avec bouton */
.mp-cliboard-reqcard__footer {
  padding-top: 12px;
  border-top: 1px dashed #e5e7eb;
  display: flex;
  justify-content: flex-end;
}

/* =====================================================================
   CSS additions pour le sélecteur de demande (page deliverables)
   À ajouter à mp-client-board.css
   ===================================================================== */

.mp-cliboard-reqswitch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: linear-gradient(90deg, #f0fdf4 0%, #ecfdf5 100%);
  border: 1px solid #bbf7d0;
  border-radius: 12px;
  margin-bottom: 22px;
}

.mp-cliboard-reqswitch__label {
  font-size: 13px;
  font-weight: 700;
  color: #166534;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}

.mp-cliboard-reqswitch__select {
  flex: 1;
  min-width: 280px;
  padding: 9px 14px;
  border: 1.5px solid #1f8b4c;
  border-radius: 8px;
  background: #fff;
  color: #1f2937;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%231f8b4c' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

.mp-cliboard-reqswitch__select:hover,
.mp-cliboard-reqswitch__select:focus {
  border-color: #166534;
  box-shadow: 0 0 0 3px rgba(31, 139, 76, 0.15);
  outline: none;
}

.mp-cliboard-reqswitch__reset {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 12px;
  border: 1px solid #1f8b4c;
  border-radius: 8px;
  background: #fff;
  color: #1f8b4c;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.15s;
}

.mp-cliboard-reqswitch__reset:hover {
  background: #1f8b4c;
  color: #fff;
}

@media (max-width: 760px) {
  .mp-cliboard-reqswitch {
    flex-direction: column;
    align-items: stretch;
  }
  .mp-cliboard-reqswitch__select {
    width: 100%;
    min-width: 0;
  }
}

/* =====================================================================
   CSS additions pour la page /dashboard/payments
   À ajouter à mp-client-board.css
   ===================================================================== */

/* Liste des cartes de paiement */
.mp-cliboard-paylist {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 16px;
}

@media (max-width: 760px) {
  .mp-cliboard-paylist { grid-template-columns: 1fr; }
}

/* Carte de paiement */
.mp-cliboard-paycard {
  background: #fff;
  border: 1.5px solid #e5e7eb;
  border-left: 4px solid #9ca3af;
  border-radius: 12px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: all 0.18s;
}

.mp-cliboard-paycard:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.mp-cliboard-paycard--success { border-left-color: #1f8b4c; }
.mp-cliboard-paycard--info    { border-left-color: #2563eb; }
.mp-cliboard-paycard--warning { border-left-color: #f59e0b; }
.mp-cliboard-paycard--danger  { border-left-color: #dc2626; }
.mp-cliboard-paycard--muted   { border-left-color: #9ca3af; }

/* Head */
.mp-cliboard-paycard__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px dashed #e5e7eb;
}

.mp-cliboard-paycard__statuswrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.mp-cliboard-paycard__statusicon {
  font-size: 18px;
}

.mp-cliboard-paycard__provider {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: #ecfdf5;
  color: #166534;
  padding: 3px 9px;
  border-radius: 999px;
}

.mp-cliboard-paycard__amount {
  font-size: 18px;
  font-weight: 700;
  color: #1f2937;
  text-align: right;
  white-space: nowrap;
}

.mp-cliboard-paycard--success .mp-cliboard-paycard__amount { color: #1f8b4c; }
.mp-cliboard-paycard--danger  .mp-cliboard-paycard__amount { color: #991b1b; }

/* Body */
.mp-cliboard-paycard__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mp-cliboard-paycard__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  gap: 10px;
}

.mp-cliboard-paycard__row--alert {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 6px;
  padding: 6px 10px;
}

.mp-cliboard-paycard__label {
  color: #6b7280;
  font-weight: 500;
  flex-shrink: 0;
}

.mp-cliboard-paycard__value {
  color: #1f2937;
  font-weight: 600;
  text-align: right;
}

.mp-cliboard-paycard__code {
  background: #f3f4f6;
  color: #1f8b4c;
  padding: 2px 7px;
  border-radius: 5px;
  font-size: 11px;
  font-family: 'SF Mono', Monaco, monospace;
}

.mp-cliboard-paycard__ref {
  background: #fffbeb;
  color: #92400e;
  padding: 2px 7px;
  border-radius: 5px;
  font-size: 11px;
  font-family: 'SF Mono', Monaco, monospace;
  word-break: break-all;
}

/* Footer (bouton continuer paiement) */
.mp-cliboard-paycard__footer {
  padding-top: 12px;
  border-top: 1px dashed #e5e7eb;
  display: flex;
  justify-content: flex-end;
}

/* =====================================================================
   CSS additions pour la page /dashboard/profile (KYC workflow)
   À ajouter à mp-client-board.css
   ===================================================================== */


/* ===========================================================
   1. Flash messages (succès / erreur après soumission)
   =========================================================== */
.mp-cliboard-flash {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 20px;
  border-radius: 12px;
  margin-bottom: 22px;
  border: 1.5px solid;
}

.mp-cliboard-flash--success {
  background: #f0fdf4;
  border-color: #1f8b4c;
  color: #166534;
}

.mp-cliboard-flash--error {
  background: #fef2f2;
  border-color: #dc2626;
  color: #991b1b;
}

.mp-cliboard-flash--info {
  background: #eff6ff;
  border-color: #2563eb;
  color: #1e40af;
}

.mp-cliboard-flash__icon {
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
}

.mp-cliboard-flash__text {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
}


/* ===========================================================
   2. Avertissement KYC (bloc orange)
   =========================================================== */
.mp-cliboard-kyc-warning {
  display: flex;
  gap: 16px;
  padding: 18px 22px;
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  border: 1.5px solid #f59e0b;
  border-radius: 14px;
  margin-bottom: 22px;
}

.mp-cliboard-kyc-warning__icon {
  font-size: 32px;
  line-height: 1;
  flex-shrink: 0;
}

.mp-cliboard-kyc-warning__content {
  flex: 1;
}

.mp-cliboard-kyc-warning__title {
  margin: 0 0 8px 0;
  font-size: 15px;
  font-weight: 700;
  color: #78350f;
}

.mp-cliboard-kyc-warning__text {
  margin: 0 0 12px 0;
  font-size: 13.5px;
  color: #78350f;
  line-height: 1.5;
}

.mp-cliboard-kyc-warning__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mp-cliboard-kyc-warning__list li {
  font-size: 13px;
  color: #78350f;
  padding-left: 4px;
}


/* ===========================================================
   3. Formulaire de modification
   =========================================================== */
.mp-cliboard-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.mp-cliboard-form__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

@media (max-width: 760px) {
  .mp-cliboard-form__grid { grid-template-columns: 1fr; }
}

.mp-cliboard-form__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mp-cliboard-form__label {
  font-size: 13px;
  font-weight: 700;
  color: #1f2937;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.mp-cliboard-form__label small {
  font-size: 11px;
  font-weight: 500;
  color: #94A3B8;
}

.mp-cliboard-form__input,
.mp-cliboard-form__textarea {
  padding: 10px 14px;
  border: 1.5px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
  color: #1f2937;
  font-size: 14px;
  font-family: inherit;
  transition: all 0.15s;
}

.mp-cliboard-form__input:focus,
.mp-cliboard-form__textarea:focus {
  outline: none;
  border-color: #1f8b4c;
  box-shadow: 0 0 0 3px rgba(31, 139, 76, 0.15);
}

.mp-cliboard-form__textarea {
  resize: vertical;
  min-height: 80px;
  line-height: 1.5;
}

.mp-cliboard-form__file {
  padding: 12px;
  border: 2px dashed #1f8b4c;
  border-radius: 10px;
  background: #f0fdf4;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s;
}

.mp-cliboard-form__file:hover {
  background: #ecfdf5;
  border-color: #166534;
}

.mp-cliboard-form__file::file-selector-button {
  padding: 6px 14px;
  border: none;
  border-radius: 6px;
  background: #1f8b4c;
  color: #fff;
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
  margin-right: 12px;
}

.mp-cliboard-form__file::file-selector-button:hover {
  background: #166534;
}

.mp-cliboard-form__help {
  margin: 0;
  font-size: 12px;
  color: #6b7280;
  line-height: 1.5;
}


/* ===========================================================
   4. Consentement (case à cocher)
   =========================================================== */
.mp-cliboard-form__consent {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 14px 16px;
}

.mp-cliboard-form__consent label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 13px;
  color: #374151;
  line-height: 1.5;
}

.mp-cliboard-form__consent input[type="checkbox"] {
  margin-top: 3px;
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: #1f8b4c;
  flex-shrink: 0;
}

.mp-cliboard-form__consent input[type="checkbox"]:checked + span {
  color: #166534;
}


/* ===========================================================
   5. Actions du formulaire
   =========================================================== */
.mp-cliboard-form__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 8px;
  border-top: 1px dashed #e5e7eb;
}


/* ========================================================
   Couleurs sémantiques pour les icônes mp_icon()
   Conformes à la palette Marchés Prix Bénin
   ======================================================== */

/* Couleurs principales (palette MP) */
.mp-icon--green   { color: #1f8b4c; }    /* vert MP — principal/succès */
.mp-icon--blue    { color: #2563eb; }    /* bleu — info/neutre */
.mp-icon--amber   { color: #f59e0b; }    /* ambre — warning/attente */
.mp-icon--violet  { color: #8b5cf6; }    /* violet — accent/premium */
.mp-icon--red     { color: #dc2626; }    /* rouge — erreur/danger */
.mp-icon--gray    { color: #6b7280; }    /* gris — muted/secondaire */

/* Aliases sémantiques (font la même chose, sens explicite) */
.mp-icon--success { color: #1f8b4c; }
.mp-icon--info    { color: #2563eb; }
.mp-icon--warning { color: #f59e0b; }
.mp-icon--danger  { color: #dc2626; }
.mp-icon--muted   { color: #6b7280; }

/* =====================================================================
   CSS additions pour le WIZARD multi-étapes (markets_request)
   À ajouter à mp-client-board.css
   Palette MP : vert #1f8b4c, bleu #2563eb, ambre #f59e0b, violet #8b5cf6
   ===================================================================== */

/* ---------- Conteneur global du wizard ---------- */
.mp-wizard {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 22px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* ---------- Barre de progression (header) ---------- */
.mp-wizard__progress {
  display: flex;
  background: linear-gradient(180deg, #f9fafb 0%, #fff 100%);
  padding: 28px 32px 22px;
  border-bottom: 1px solid #e5e7eb;
  position: relative;
}

.mp-wizard__step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  cursor: default;
}

.mp-wizard__step.is-clickable { cursor: pointer; }

/* Bulle (numéro/icône) */
.mp-wizard__stepBubble {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  color: #9ca3af;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
  border: 2px solid #e5e7eb;
  z-index: 2;
  transition: all 0.25s ease;
  position: relative;
}

.mp-wizard__step.is-active .mp-wizard__stepBubble {
  background: #1f8b4c;
  color: #fff;
  border-color: #1f8b4c;
  box-shadow: 0 0 0 5px rgba(31, 139, 76, 0.15);
  transform: scale(1.05);
}

.mp-wizard__step.is-done .mp-wizard__stepBubble {
  background: #1f8b4c;
  color: #fff;
  border-color: #1f8b4c;
}

.mp-wizard__step.is-done .mp-wizard__stepBubbleNum { display: none; }
.mp-wizard__step:not(.is-done) .mp-wizard__stepBubbleCheck { display: none; }

/* Label sous la bulle */
.mp-wizard__stepLabel {
  font-size: 12.5px;
  font-weight: 600;
  color: #6b7280;
  margin-top: 10px;
  text-align: center;
  transition: color 0.2s;
}

.mp-wizard__step.is-active .mp-wizard__stepLabel { color: #1f8b4c; font-weight: 700; }
.mp-wizard__step.is-done   .mp-wizard__stepLabel { color: #1f2937; }

/* Connecteur entre étapes */
.mp-wizard__stepConnector {
  position: absolute;
  top: 21px;
  left: 50%;
  width: 100%;
  height: 3px;
  background: #e5e7eb;
  z-index: 1;
  transition: background 0.3s;
}

.mp-wizard__step:last-child .mp-wizard__stepConnector { display: none; }

.mp-wizard__step.is-done .mp-wizard__stepConnector {
  background: linear-gradient(90deg, #1f8b4c 0%, #1f8b4c 50%, #e5e7eb 50%, #e5e7eb 100%);
}

/* Counter mobile */
.mp-wizard__progressMobile {
  display: none;
  padding: 16px 22px;
  border-bottom: 1px solid #e5e7eb;
  background: #f9fafb;
}

.mp-wizard__progressMobileLabel {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: #6b7280;
  margin-bottom: 6px;
  letter-spacing: 0.05em;
}

.mp-wizard__progressMobileTitle {
  font-size: 16px;
  font-weight: 700;
  color: #1f2937;
}

.mp-wizard__progressMobileBar {
  height: 4px;
  background: #e5e7eb;
  border-radius: 999px;
  overflow: hidden;
  margin-top: 10px;
}

.mp-wizard__progressMobileFill {
  height: 100%;
  background: linear-gradient(90deg, #1f8b4c, #166534);
  border-radius: 999px;
  transition: width 0.3s ease;
}

/* ---------- Panneaux d'étapes ---------- */
.mp-wizard__body { padding: 0; }

.mp-wizard__panel {
  display: none;
  padding: 28px 32px;
  animation: mpWizardFade 0.25s ease;
}

.mp-wizard__panel.is-active { display: block; }

@keyframes mpWizardFade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.mp-wizard__panelHead {
  margin-bottom: 22px;
  padding-bottom: 14px;
  border-bottom: 1px dashed #e5e7eb;
}

.mp-wizard__panelTitle {
  margin: 0 0 6px 0;
  font-size: 20px;
  font-weight: 700;
  color: #1f2937;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.mp-wizard__panelDesc {
  margin: 0;
  font-size: 14px;
  color: #6b7280;
  line-height: 1.5;
}

/* Grille de champs (à utiliser dans chaque panel) */
.mp-wizard__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.mp-wizard__grid--full > * { grid-column: 1 / -1; }

@media (max-width: 760px) {
  .mp-wizard__grid { grid-template-columns: 1fr; }
}

.mp-wizard__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mp-wizard__field--full { grid-column: 1 / -1; }

.mp-wizard__field label {
  font-size: 13px;
  font-weight: 700;
  color: #1f2937;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.mp-wizard__field input,
.mp-wizard__field select {
  padding: 10px 14px;
  border: 1.5px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
  color: #1f2937;
  font-size: 14px;
  font-family: inherit;
  transition: all 0.15s;
}

.mp-wizard__field input:focus,
.mp-wizard__field select:focus {
  outline: none;
  border-color: #1f8b4c;
  box-shadow: 0 0 0 3px rgba(31, 139, 76, 0.15);
}

.mp-wizard__field input.is-invalid,
.mp-wizard__field select.is-invalid {
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}

.mp-wizard__field .mp-help {
  font-size: 12px;
  color: #6b7280;
  line-height: 1.5;
  margin: 0;
}

/* ---------- Footer du wizard (boutons nav) ---------- */
.mp-wizard__nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 32px;
  border-top: 1px solid #e5e7eb;
  background: #f9fafb;
  gap: 12px;
  flex-wrap: wrap;
}

.mp-wizard__navCounter {
  font-size: 12.5px;
  color: #6b7280;
  font-weight: 600;
}

.mp-wizard__navCounter strong {
  color: #1f8b4c;
  font-size: 14px;
}

.mp-wizard__navBtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}

.mp-wizard__navBtn--primary {
  background: #1f8b4c;
  color: #fff;
  border-color: #1f8b4c;
}

.mp-wizard__navBtn--primary:hover:not(:disabled) {
  background: #166534;
  border-color: #166534;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(31, 139, 76, 0.25);
}

.mp-wizard__navBtn--ghost {
  background: #fff;
  color: #6b7280;
  border-color: #e5e7eb;
}

.mp-wizard__navBtn--ghost:hover:not(:disabled) {
  border-color: #1f8b4c;
  color: #1f8b4c;
  background: #f0fdf4;
}

.mp-wizard__navBtn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* ---------- Bloc d'erreurs en haut ---------- */
.mp-wizard__errors {
  margin: 0;
  padding: 14px 18px;
  background: #fef2f2;
  border-bottom: 1px solid #fecaca;
  color: #991b1b;
}

.mp-wizard__errors ul {
  margin: 0;
  padding-left: 20px;
  font-size: 13px;
}

/* ---------- Carte récap (étape 4) ---------- */
.mp-wizard__summary {
  background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
  border: 1.5px solid #bbf7d0;
  border-radius: 12px;
  padding: 18px 22px;
  margin-bottom: 18px;
}

.mp-wizard__summaryTitle {
  font-size: 14px;
  font-weight: 700;
  color: #166534;
  margin: 0 0 12px 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.mp-wizard__summaryList {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mp-wizard__summaryLine {
  display: grid;
  grid-template-columns: 220px 1fr;
  align-items: center;
  gap: 12px;
  font-size: 13.5px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(187, 247, 208, 0.5);
}

.mp-wizard__summaryLine:last-child { border-bottom: 0; }

.mp-wizard__summaryLabel {
  color: #6b7280;
  font-weight: 500;
}

.mp-wizard__summaryValue {
  color: #1f2937;
  font-weight: 600;
}

.mp-wizard__summaryLine--total {
  background: #fff;
  border: 2px solid #1f8b4c;
  border-radius: 10px;
  padding: 12px 14px;
  margin-top: 6px;
}

.mp-wizard__summaryLine--total .mp-wizard__summaryValue {
  font-size: 18px;
  font-weight: 700;
  color: #1f8b4c;
}

.mp-wizard__summaryHint {
  font-size: 12px;
  color: #6b7280;
  margin-top: 12px;
  font-style: italic;
}

@media (max-width: 760px) {
  .mp-wizard__summaryLine {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* ---------- Responsive ---------- */
@media (max-width: 760px) {
  .mp-wizard__progress { display: none; }
  .mp-wizard__progressMobile { display: block; }
  .mp-wizard__panel { padding: 22px; }
  .mp-wizard__nav { padding: 14px 22px; }
  .mp-wizard__panelTitle { font-size: 17px; }
}


/* =====================================================================
   FIX — Neutralisation des décorations orange parasites
   sur .mp-request quand un wizard est imbriqué dedans
   ===================================================================== */

/* Tue les pseudo-éléments décoratifs orange éventuels de mp.css
   qui débordent autour du wrapper .mp-request */
.mp-request:has(.mp-wizard) {
  position: relative;
  overflow: hidden;
}

/* Si .mp-request a des ::before/::after avec backgrounds orange,
   on les masque uniquement quand un wizard est dedans */
.mp-request:has(.mp-wizard)::before,
.mp-request:has(.mp-wizard)::after {
  display: none !important;
}

/* Body sans padding inutile (le wizard a son propre padding) */
.mp-request:has(.mp-wizard) .mp-request__body {
  padding: 0 !important;
  background: transparent !important;
}

/* Espacement propre entre le head vert et le wizard */
.mp-request:has(.mp-wizard) .mp-request__head {
  margin-bottom: 0;
}

/* Si .mp-request a un border ou un background-color orange, neutralise-le */
.mp-request:has(.mp-wizard) {
  border: 0 !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* Fallback pour navigateurs qui ne supportent pas :has() — ajoute la classe manuellement */
.mp-request.mp-request--wizard-mode {
  position: relative;
  overflow: hidden;
  border: 0 !important;
  background: transparent !important;
}
.mp-request.mp-request--wizard-mode::before,
.mp-request.mp-request--wizard-mode::after {
  display: none !important;
}
.mp-request.mp-request--wizard-mode .mp-request__body {
  padding: 0 !important;
  background: transparent !important;
}
.mp-request.mp-request--wizard-mode .mp-request__head {
  margin-bottom: 0;
}


/* =====================================================================
   FIX — Pas de border-left/right sur les éléments du wizard
   (la couleur orange parasite venait de border héritée de mp.css)
   ===================================================================== */
.mp-wizard,
.mp-wizard__progress,
.mp-wizard__body,
.mp-wizard__panel,
.mp-wizard__nav {
  border-left: 0 !important;
  border-right: 0 !important;
}


/* =====================================================================
   FIX FINAL — Head vert + Wizard = UNE SEULE carte continue
   - Head : coins arrondis SEULEMENT en haut
   - Wizard : coins arrondis SEULEMENT en bas
   - Aucune séparation visuelle entre les deux
   ===================================================================== */
.mp-request--wizard-mode {
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  border: 1px solid #e5e7eb;
}

/* Head vert : coins arrondis EN HAUT seulement, plat en bas */
.mp-request--wizard-mode .mp-request__head {
  border-radius: 0 !important;
  border-bottom: 0 !important;
  margin: 0 !important;
  /* On garde le background gradient vert qui vient de mp.css */
}

/* Wizard : coins plats EN HAUT, arrondis EN BAS */
.mp-request--wizard-mode .mp-wizard {
  border-radius: 0 !important;
  border: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}

/* Le footer (nav) garde son border-bottom-radius si on enlève le wrapper border */
.mp-request--wizard-mode .mp-wizard__nav {
  border-radius: 0;
}