/* =========================
   MarktPrijs (MP) – Premium UI (Green dominant)
   Compatible with .mp-* classes + --mp-* vars
========================= */

/* ===== Tokens ===== */
:root{
  /* === Brand (logo MARCHÉS PRIX) === */
  --mp-primary:   #3BB34C;   /* vert clair */
  --mp-secondary: #039046;   /* vert foncé */
  --mp-accent:    #F8D031;   /* jaune */

  /* RGB helpers (pour transparences) */
  --mp-primary-rgb:   59 179 76;   /* #3BB34C */
  --mp-secondary-rgb: 3 144 70;    /* #039046 */
  --mp-accent-rgb:    248 208 49;  /* #F8D031 */

  /* Neutres */
  --mp-white:#FFFFFF;
  --mp-black:#030303;

  --mp-gray-50:#F5F7FA;
  --mp-gray-100:#EDF2F7;
  --mp-gray-200:#E7EDF5;
  --mp-gray-300:#CBD5E0;
  --mp-gray-600:#718096;
  --mp-gray-900:#74736d;

  --mp-bg: var(--mp-gray-50);
  --mp-text: var(--mp-gray-900);

  --mp-radius: 14px;
  --mp-radius-lg: 18px;

  --mp-shadow-sm: 0 2px 8px rgba(0,0,0,.06);
  --mp-shadow: 0 10px 26px rgba(0,0,0,.08);

  --mp-border: 1px solid var(--mp-gray-200);

  /* Layout widths */
  --mp-sidebar-w: 260px;
  --mp-subsidebar-w: 320px;
}

/* ===== Reset & base ===== */
*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: #f5f7fb;
  color: var(--mp-text);
  display:flex;
  flex-direction:column;
  overflow-x:hidden !important;
}

a{ color: var(--mp-secondary); text-decoration:none; }
a:hover{ text-decoration:underline; }

.mp-container{
  width:min(1040px, 94%);
  margin:0 auto;
  padding: 0 10px;
}

/* ===== Header (premium) ===== */
.mp-header{
  background: var(--mp-white);
  border-bottom: 4px solid var(--mp-accent);  /* ✅ green line */
  box-shadow: var(--mp-shadow-sm);
  position: sticky;
  top: 0;
  z-index: 1000;
}
.mp-header__inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  padding: 12px 0;
}

/* Brand */
.mp-brand{
  display:flex;
  align-items:center;
  gap:10px;
}
.mp-brand__logo{
  width:75px;
  height:75px;
  object-fit:contain;
  background:#fff;
  padding:6px;
}
.mp-brand__name{
  font-weight: 900;
  font-size: 1.18rem;
  letter-spacing:.2px;
  line-height: 1.1;
  color: var(--mp-secondary);
}
.mp-brand__name small{
  color: var(--mp-primary); /* ✅ green */
  font-weight: 900;
  margin-left:6px;
}
.mp-brand__tagline{
  font-size:.82rem;
  color:#555;
  margin-top:2px;
}

/* Nav */
.mp-nav{
  display:flex;
  align-items:center;
  gap:.4rem;
  flex-wrap:wrap;
}
.mp-nav__link{
  padding: .55rem .75rem;
  border-radius: .55rem;
  font-weight: 700;
  color: var(--mp-secondary);
  transition: background .2s ease, color .2s ease;
}
.mp-nav__link:hover{
  background: rgb(var(--mp-primary-rgb) / .10);
  text-decoration:none;
}
.mp-nav__link.is-active{
  background: var(--mp-primary);
  color: #fff;
}

/* Lang switch */
.mp-lang{
  display:flex;
  align-items:center;
  gap:.35rem;
}
.mp-lang__link{
  padding: .45rem .65rem;
  border-radius: 999px;
  border: 1px solid rgb(var(--mp-primary-rgb) / .25);
  background: rgb(var(--mp-primary-rgb) / .08);
  color: var(--mp-secondary);
  font-weight: 800;
}
.mp-lang__link:hover{ text-decoration:none; background: rgb(var(--mp-primary-rgb) / .14); }
.mp-lang__link.is-active{
  background: var(--mp-primary);
  border-color: var(--mp-primary);
  color:#fff;
}

/* ===== Main ===== */
.mp-main{ padding: 18px 0 34px; flex:1; }

.mp-page__head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  flex-wrap:wrap;
  margin: 14px 0 16px;
}
.mp-title{
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 900;
  color: var(--mp-gray-900);
}
.mp-subtitle{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

/* Chips / badges */
.mp-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgb(var(--mp-primary-rgb) / .25);
  background: rgb(var(--mp-primary-rgb) / .08);
  font-weight: 800;
  color: var(--mp-secondary);
}
.mp-chip--green{
  background: rgb(var(--mp-primary-rgb) / .14);
  border-color: rgb(var(--mp-primary-rgb) / .28);
  color: var(--mp-primary);
}

/* ===== Card ===== */
.mp-card{
  background:#fff;
  border: var(--mp-border);
  border-radius: var(--mp-radius-lg);
  box-shadow: var(--mp-shadow);
  overflow:hidden;
  margin-bottom: 16px;
}
.mp-card__head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgb(var(--mp-primary-rgb) / .12), rgb(var(--mp-secondary-rgb) / .06)));
  border-bottom: var(--mp-border);
}
.mp-card__title{
  font-size: 1.05rem;
  font-weight: 900;
  color: var(--mp-secondary);
}
.mp-meta{ color: #3a3a3a; font-weight: 800; }

/* ===== Tabs (departments) ===== */
.mp-tabs{
  display:flex;
  gap:10px;
  padding: 12px 14px;
  overflow:auto;
  border-bottom: var(--mp-border);
  background: #fff;
}
.mp-tab{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgb(var(--mp-primary-rgb) / .25);
  background: rgb(var(--mp-primary-rgb) / .10);
  color: var(--mp-secondary);
  font-weight: 900;
  cursor:pointer;
  white-space: nowrap;
  transition: transform .08s ease, background .12s ease, border-color .12s ease;
}
.mp-tab:hover{
  transform: translateY(-1px);
  background: rgb(var(--mp-primary-rgb) / .16);
}
.mp-tab.is-active{
  background: var(--mp-primary);
  border-color: var(--mp-primary);
  color:#fff;
}
.mp-tab__count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 28px;
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(0,0,0,.10);
  font-size: 12px;
}
.mp-tab.is-active .mp-tab__count{
  background: rgba(255,255,255,.22);
}

.mp-panel{ display:none; }
.mp-panel.is-active{ display:block; }
.mp-panel__inner{
  padding: 14px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 820px){
  .mp-panel__inner{ grid-template-columns: 1fr; }
}

/* ===== Department + city blocks ===== */
.mp-dep{
  background:#fff;
  border: var(--mp-border);
  border-radius: var(--mp-radius);
  padding: 12px;
}
.mp-dep__head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:10px;
  margin-bottom: 10px;
}
.mp-dep__title{
  font-size: 1rem;
  font-weight: 900;
  color: var(--mp-secondary);
}
.mp-dep__count{ color:#4d4d4d; font-weight: 800; }

.mp-city{
  margin-top: 10px;
  padding: 10px;
  border-radius: 14px;
  background: rgb(var(--mp-primary-rgb) / .06);     /* ✅ green tint */
  border: 1px solid rgb(var(--mp-primary-rgb) / .20);
}
.mp-city__head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}
.mp-city__name{
  font-weight: 900;
  color: var(--mp-secondary);
}

.mp-list{
  list-style:none;
  margin-top: 10px;
  display:grid;
  gap:8px;
}
.mp-list__item{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 9px 10px;
  background:#fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 12px;
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
}
.mp-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  background: var(--mp-primary); /* ✅ green */
}

/* ===== Empty state ===== */
.mp-empty{
  padding: 26px 18px;
  text-align:center;
  background:#fff;
  border: 1px dashed rgb(var(--mp-primary-rgb) / .35);
  border-radius: var(--mp-radius-lg);
}
.mp-empty__icon{ font-size: 34px; margin-bottom: 6px; }

/* ===== Footer (green/blue) ===== */
.mp-footer{
  background: var(--mp-secondary);
  border-top: 4px solid var(--mp-accent);
  color: #e9eef7;
  padding: 24px 0;
  margin-top:auto;
}
.mp-footer__inner{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  font-weight: 700;
}
.mp-footer__sep{ opacity:.6; }
.badge-xof{ color: var(--mp-primary); font-weight: 900; }
.badge-eur{ color: rgba(255,255,255,.85); font-weight: 900; }

/* ===== Mobile header tweaks ===== */
@media (max-width: 768px){
  .mp-header__inner{ align-items:flex-start; }
  .mp-nav{ width:100%; justify-content:center; }
  .mp-lang{ width:100%; justify-content:center; }
}

/* =========================
   MP – Tabs en sidebar (admin layout)
   À coller EN FIN de fichier CSS
========================= */

/* largeur sidebar (tu peux ajuster) */
:root{
  --mp-sidebar-w: 260px;
}

/* on prépare la carte pour gérer le float */
.mp-card{ position:relative; }
.mp-card::after{ content:""; display:block; clear:both; }

/* Sidebar à gauche */
.mp-tabs{
  float:left;
  width: var(--mp-sidebar-w);
  max-width: 42%;
  display:flex;
  flex-direction:column;
  gap:8px;

  padding: 14px;
  overflow:auto;

  border-bottom: 0;
  border-right: var(--mp-border);
  background: linear-gradient(180deg, rgb(var(--mp-primary-rgb) / .06), #fff);
}

/* Boutons tabs version "admin" */
.mp-tab{
  width:100%;
  justify-content:space-between;
  border-radius: 12px;              /* moins "pill", plus admin */
  padding: 10px 12px;

  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 1px 0 rgba(0,0,0,.03);

  transition: background .12s ease, border-color .12s ease, transform .08s ease;
}

.mp-tab:hover{
  transform: translateX(2px);
  border-color: rgb(var(--mp-primary-rgb) / .28);
  background: rgb(var(--mp-primary-rgb) / .08);
}

.mp-tab.is-active{
  background: var(--mp-primary);
  border-color: var(--mp-primary);
  color:#fff;
}

.mp-tab__name{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Badge count */
.mp-tab__count{
  background: rgba(0,0,0,.08);
}
.mp-tab.is-active .mp-tab__count{
  background: rgba(255,255,255,.22);
}

/* Zone contenu à droite */
.mp-panel{
  display:none;
  margin-left: var(--mp-sidebar-w);
  min-height: 380px;                /* look admin */
}

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

/* Petit header interne optionnel (si tu veux plus d’air) */
.mp-panel__inner{
  padding: 14px 16px;
}

/* Ton grid de villes reste OK */
.mp-panel__inner{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

/* UX focus clavier */
.mp-tab:focus-visible{
  outline: 3px solid rgb(var(--mp-primary-rgb) / .35);
  outline-offset: 2px;
}

/* Responsive : on repasse en tabs horizontales */
@media (max-width: 900px){
  .mp-tabs{
    float:none;
    width:100%;
    max-width:none;
    flex-direction:row;
    border-right: 0;
    border-bottom: var(--mp-border);
  }
  .mp-tab{
    width:auto;
    border-radius: 999px;
  }
  .mp-panel{
    margin-left:0;
    min-height:auto;
  }
  .mp-panel__inner{
    grid-template-columns: 1fr;
  }
}

/* =========================
   MP – Admin layout (Today page)
   2 sidebars gauche (Pays + Département/Ville) + contenu droite
========================= */

:root{
  --mp-sidebar-w: 260px;     /* Pays */
  --mp-subsidebar-w: 320px;  /* Départements / Villes */
}

/* Layout 3 colonnes */
.mp-admin{
  display:grid;
  grid-template-columns: var(--mp-sidebar-w) var(--mp-subsidebar-w) minmax(0, 1fr);
  gap: 14px;
  align-items:start;
}

/* Sidebars (même base) */
.mp-admin__sidebar{
  position: sticky;
  top: 88px;
  align-self:start;

  background:#fff;
  border: var(--mp-border);
  border-radius: var(--mp-radius-lg);
  box-shadow: var(--mp-shadow);
  overflow:hidden;
}

/* 2e sidebar un peu plus "liste" */
.mp-admin__sidebar--sub{
  background: linear-gradient(180deg, rgba(88,166,11,.05), #fff);
}

/* Head sidebar */
.mp-admin__sidebarHead{
  padding: 14px 16px;
  background: linear-gradient(135deg, rgb(var(--mp-primary-rgb) / .12), rgb(var(--mp-secondary-rgb) / .06)));
  border-bottom: var(--mp-border);
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:10px;
}
.mp-admin__sidebarTitle{ font-weight: 900; color: var(--mp-secondary); }
.mp-admin__sidebarMeta{ font-weight: 800; color:#3a3a3a; }

/* Nav */
.mp-admin__nav{
  padding: 12px;
  display:flex;
  flex-direction:column;
  gap:8px;
  max-height: calc(100vh - 160px);
  overflow:auto;
}

/* Bouton (Pays / Départements / Villes) */
.mp-admin__tab{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;

  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.08);
  background:#fff;
  cursor:pointer;

  font-weight: 900;
  color: var(--mp-secondary);
  transition: background .12s ease, border-color .12s ease, transform .08s ease;
}
.mp-admin__tab:hover{
  transform: translateX(2px);
  border-color: rgb(var(--mp-primary-rgb) / .28);
  background: rgb(var(--mp-primary-rgb) / .08);
}
.mp-admin__tab.is-active{
  background: var(--mp-primary);
  border-color: var(--mp-primary);
  color:#fff;
}

.mp-admin__tabName{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Badge count */
.mp-admin__tabCount{
  min-width: 34px;
  height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: rgba(0,0,0,.08);
  font-size: 12px;
  font-weight: 900;
}
.mp-admin__tab.is-active .mp-admin__tabCount{
  background: var(--mp-accent);
}

/* Variantes pour la 2e sidebar */
.mp-admin__tab--dep{ border-radius: 14px; }
.mp-admin__tab--city{
  padding: 9px 12px;
  border-radius: 999px; /* look "chip" */
  font-weight: 900;
}

/* Titres de section dans sidebar (ex: Département sélectionné) */
.mp-admin__sectionTitle{
  margin: 10px 12px 6px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px dashed rgb(var(--mp-primary-rgb) / .28);
  background: rgb(var(--mp-primary-rgb) / .06);
  font-weight: 900;
  color: var(--mp-secondary);
}

/* Panels */
.mp-admin__panel{ display:none; }
.mp-admin__panel.is-active{ display:block; }

/* Contenu à droite : carte prend toute la largeur */
.mp-admin__content{ min-width: 0; }

/* Responsive */
@media (max-width: 1100px){
  :root{ --mp-subsidebar-w: 280px; }
}
@media (max-width: 900px){
  .mp-admin{
    grid-template-columns: 1fr;
  }
  .mp-admin__sidebar{
    position: static;
  }
  .mp-admin__nav{
    flex-direction:row;
    max-height:none;
    overflow:auto;
  }
  .mp-admin__tab{
    width:auto;
    border-radius:999px;
  }
}

/* =========================
   MP – Bouton S’abonner
========================= */

.mp-btn{
  appearance: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-weight: 900;
  font-size: 0.85rem;
  padding: 8px 14px;
  border-radius: 999px; /* pill clean */
  transition: all .18s ease;
}

/* Bouton principal vert */
.mp-btn--primary{
  background: linear-gradient(135deg, var(--mp-primary), var(--mp-secondary));
  color: #fff;
  box-shadow: 0 4px 12px rgb(var(--mp-primary-rgb) / .25);
  border: 1px solid rgba(0,0,0,.05);
}

.mp-btn--primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgb(var(--mp-primary-rgb) / .35);
}

.mp-btn--primary:active{
  transform: translateY(0);
  box-shadow: 0 3px 8px rgb(var(--mp-primary-rgb) / .25);
}

/* version petite (si dans carte ville) */
.mp-btn--sm{
  font-size: 0.78rem;
  padding: 6px 12px;
}

/* état déjà abonné (prévu futur) */
.mp-btn--subscribed{
  background: #fff;
  color: var(--mp-primary);
  border: 2px solid var(--mp-primary);
  box-shadow: none;
}
.mp-btn--subscribed:hover{
  background: rgb(var(--mp-primary-rgb) / .08);
}


/* =========================
   MP – Custom Scrollbar (logo style)
========================= */

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--mp-accent) transparent;
}

/* Chrome / Edge / Safari */
*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    rgb(var(--mp-primary-rgb) / .9),
    rgb(var(--mp-secondary-rgb) / .9)
  );
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}

*::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(
    180deg,
    var(--mp-primary),
    var(--mp-secondary)
  );
}

/* Brand text next to logo */
.mp-brand__text{ display:flex; flex-direction:column; line-height:1.1; }
.mp-brand__name{ font-weight: 1000; letter-spacing:.3px; }
.mp-brand__tagline{ font-size:.80rem; opacity:.85; }

/* =========================
   MP – Burger menu (mobile)
========================= */

/* bouton burger caché sur desktop */
.mp-burger{
  display:none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgb(var(--mp-primary-rgb) / .25);
  background: rgb(var(--mp-primary-rgb) / .08);
  cursor:pointer;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:0;
  transition: background .15s ease, transform .1s ease, border-color .15s ease;
}
.mp-burger:hover{
  background: rgb(var(--mp-primary-rgb) / .14);
  border-color: rgb(var(--mp-primary-rgb) / .35);
}
.mp-burger:active{ transform: scale(.98); }

.mp-burger__line{
  display:block;
  width: 20px;
  height: 2px;
  background: var(--mp-secondary);
  border-radius: 999px;
  transition: transform .18s ease, opacity .18s ease;
}

/* état ouvert */
.mp-header.is-menu-open .mp-burger__line:nth-child(1){
  transform: translateY(6px) rotate(45deg);
}
.mp-header.is-menu-open .mp-burger__line:nth-child(2){
  opacity:0;
}
.mp-header.is-menu-open .mp-burger__line:nth-child(3){
  transform: translateY(-6px) rotate(-45deg);
}

/* Mobile */
@media (max-width: 900px){

  /* 1) burger visible */
  .mp-burger{ display:inline-flex; }

  /* 2) nav devient dropdown */
  .mp-nav{
    display:none; /* caché par défaut */
    width: 100%;
    order: 10; /* passe en dessous dans le header */
    padding: 10px 0 0;
  }

  .mp-header.is-menu-open .mp-nav{
    display:flex;
    flex-direction:column;
    gap:8px;
    padding-top: 10px;
  }

  /* 3) liens plein largeur, look “button” */
  .mp-nav__link{
    width:100%;
    justify-content:center;
    text-align:center;
    border: 1px solid rgb(var(--mp-primary-rgb) / .20);
    background: #fff;
    border-radius: 14px;
  }

  .mp-nav__link:hover{
    background: rgb(var(--mp-primary-rgb) / .10);
    text-decoration:none;
  }

  .mp-nav__link.is-active{
    background: var(--mp-primary);
    border-color: var(--mp-primary);
    color:#fff;
  }

  /* 4) langues restent en haut à droite (optionnel) */
  .mp-lang{
    order: 5;
  }

  /* 5) petit ajustement header spacing */
  .mp-header__inner{
    align-items:center;
  }
}

/* accessibilité : réduit motion */
@media (prefers-reduced-motion: reduce){
  .mp-burger, .mp-burger__line{ transition:none !important; }
}

/* =========================
   Scrollbar propre (desktop)
========================= */
.mp-scroll {
  scrollbar-width: thin;              /* Firefox */
  scrollbar-color: rgba(0,51,90,.35) transparent;
}
.mp-scroll::-webkit-scrollbar{
  width: 10px;
}
.mp-scroll::-webkit-scrollbar-track{
  background: transparent;
}
.mp-scroll::-webkit-scrollbar-thumb{
  background: rgba(0,51,90,.25);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: content-box;
}
.mp-scroll::-webkit-scrollbar-thumb:hover{
  background: rgba(0,51,90,.45);
  border: 3px solid transparent;
  background-clip: content-box;
}

/* Applique-le à tes colonnes scrollables */
.mp-col__list,
.mp-panel__list{
  overflow: auto;
}
.mp-col__list,
.mp-panel__list{
  /* active scrollbar style */
}
.mp-col__list.mp-scroll,
.mp-panel__list.mp-scroll{}

/* Astuce: mets class="mp-scroll" sur les div qui scrollent */

/* =========================
   Page Request (form)
========================= */
.mp-form{
  padding: 18px;
  max-width: 900px;
  margin: 0 auto;
}
.mp-form__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 820px){
  .mp-form__grid{ grid-template-columns: 1fr; }
}
.mp-field label{
  display:block;
  font-weight: 700;
  margin: 0 0 6px;
}

.mp-field textarea{ min-height: 110px; resize: vertical; }
.mp-help{
  font-size: 13px;
  color: var(--mp-gray-600);
  margin-top: 6px;
}
.mp-actions{
  display:flex;
  gap: 12px;
  justify-content:flex-end;
  margin-top: 14px;
}
.mp-btn{
  border:0;
  cursor:pointer;
  border-radius: 999px;
  padding: 12px 18px;
  font-weight: 800;
}
.mp-btn--primary{
  background: linear-gradient(180deg, #38b24a, #0b8f2d);
  color: #fff;
}
.mp-btn--ghost{
  background: transparent;
  border: 1px solid var(--mp-gray-300);
  color: var(--mp-text);
}


/* Request form */

.mp-form{
  display: grid;
  gap: 14px;
}

.mp-field label{
  display:block;
  font-weight:600;
  margin-bottom:6px;
  color: var(--mp-gray-900);
}

.mp-field input,
.mp-field select,
.mp-field textarea{
  width:100%;
  padding: 11px 12px;
  border: 1px solid var(--mp-gray-300);
  border-radius: 10px;
  background: var(--mp-white);
  outline: none;
}

.mp-field textarea{ min-height: 110px; resize: vertical; }

.mp-field input:focus,
.mp-field select:focus,
.mp-field textarea:focus{
  box-shadow: 0 0 0 3px rgba(0,51,90,.12);
}

.mp-grid-2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 720px){
  .mp-grid-2{ grid-template-columns: 1fr; }
}

.mp-help{
  font-size: 13px;
  color: var(--mp-gray-600);
  margin-top: 6px;
}

.mp-actions{
  display:flex;
  gap: 10px;
  align-items:center;
  margin-top: 6px;
}

.mp-btn{
  appearance:none;
  border:0;
  background: var(--mp-primary);
  color: var(--mp-white);
  padding: 11px 14px;
  border-radius: 12px;
  cursor:pointer;
  font-weight:700;
}

.mp-btn:hover{ filter: brightness(.95); }

.mp-btn--ghost{
  background: transparent;
  border: 1px solid var(--mp-gray-300);
  color: var(--mp-text);
}

.mp-errors{
  border: 1px solid rgba(229, 87, 40, .35);
  background: rgba(229, 87, 40, .08);
  border-radius: 12px;
  padding: 12px;
}
.mp-errors ul{ margin:0; padding-left: 18px; }



/* =========================
   MP – Request Success
========================= */
.mp-success{
  padding: 10px 0 24px;
}
.mp-success__wrap{
  max-width: 920px;
  margin: 0 auto;
  padding: 0 10px;
}

.mp-success__hero{
  display:flex;
  align-items:center;
  gap:14px;
  padding: 18px;
  border-radius: var(--mp-radius-lg);
  border: 1px solid rgb(var(--mp-primary-rgb) / .22);
  background: linear-gradient(
    135deg,
    rgb(var(--mp-primary-rgb) / .10),
    rgb(var(--mp-secondary-rgb) / .06)
  );
  box-shadow: var(--mp-shadow-sm);
  margin-bottom: 14px;
}

.mp-success__icon{
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgb(var(--mp-primary-rgb) / .14);
  border: 1px solid rgb(var(--mp-primary-rgb) / .22);
  font-size: 22px;
}

.mp-success__title{
  margin: 0;
  font-weight: 1000;
  letter-spacing: .2px;
  font-size: clamp(22px, 2.2vw, 30px);
  color: var(--mp-secondary);
}

.mp-success__lead{
  margin-top: 6px;
  color: #4d4d4d;
  font-weight: 700;
}

.mp-success__card{
  background: #fff;
  border: var(--mp-border);
  border-radius: var(--mp-radius-lg);
  box-shadow: var(--mp-shadow);
  padding: 16px;
}

.mp-success__subtitle{
  margin: 0 0 10px;
  font-weight: 900;
  color: var(--mp-secondary);
}

.mp-success__dl{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
}

.mp-success__row{
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px;
  padding: 12px 12px;
  background: rgb(var(--mp-primary-rgb) / .04);
}

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

.mp-success__row dt{
  font-weight: 900;
  color: var(--mp-secondary);
  margin-bottom: 6px;
}

.mp-success__row dd{
  margin: 0;
  color: var(--mp-gray-900);
  font-weight: 800;
  word-break: break-word;
}

.mp-success__sep{
  opacity: .55;
  padding: 0 6px;
}

.mp-success__actions{
  display:flex;
  gap: 12px;
  justify-content:flex-end;
  margin-top: 14px;
  flex-wrap: wrap;
}

@media (max-width: 820px){
  .mp-success__dl{ grid-template-columns: 1fr; }
  .mp-success__actions{ justify-content: stretch; }
  .mp-success__actions .mp-btn{ width: 100%; text-align:center; }
}
.mp-success__code{
  margin: 12px 0 14px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px dashed rgb(var(--mp-primary-rgb) / .35);
  background: rgb(var(--mp-primary-rgb) / .08);
  color: var(--mp-secondary);
  font-weight: 800;
}

/* ===========================
   MP Request (page formulaire)
   =========================== */

/* =========================
   Page Demande (request) - SANS mp-card
   Utilise uniquement .mp-request-*
========================= */

.mp-request{
  max-width: 980px;
  margin: 0 auto;
  background: #fff;
  border: var(--mp-border);
  border-radius: var(--mp-radius-lg);
  box-shadow: var(--mp-shadow);
  overflow: hidden;
}

.mp-request__head{
  padding: 18px 18px 14px;
  border-bottom: var(--mp-border);
  background: linear-gradient(
    135deg,
    rgb(var(--mp-primary-rgb) / .12),
    rgb(var(--mp-secondary-rgb) / .06)
  );
}

.mp-request__title{
  font-size: clamp(22px, 2.2vw, 32px);
  font-weight: 1000;
  color: var(--mp-secondary);
  margin-bottom: 4px;
}

.mp-request__desc{
  color: #555;
  font-weight: 700;
  line-height: 1.35;
}

.mp-request__body{
  padding: 18px;
}

.mp-request__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

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

/* Champs */
.mp-request .mp-field label{
  display:block;
  font-weight: 900;
  margin-bottom: 6px;
  color: var(--mp-gray-900);
}


.mp-request .mp-field textarea{
  min-height: 110px;
  resize: vertical;
}

.mp-request .mp-field input:focus,
.mp-request .mp-field select:focus,
.mp-request .mp-field textarea:focus{
  border-color: rgb(var(--mp-primary-rgb) / .65);
  box-shadow: 0 0 0 3px rgb(var(--mp-primary-rgb) / .18);
}

/* multi select plus propre */
.mp-request .mp-field select[multiple]{
  height: 160px;
  padding: 10px;
}

.mp-request .mp-help{
  font-size: 13px;
  color: var(--mp-gray-600);
  margin-top: 6px;
  font-weight: 700;
}

/* Actions */
.mp-request__actions{
  display:flex;
  gap: 12px;
  justify-content:flex-end;
  align-items:center;
}

/* Erreurs */
.mp-request__errors{
  border: 1px solid rgb(var(--mp-accent-rgb) / .45);
  background: rgb(var(--mp-accent-rgb) / .14);
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 14px;
}

.mp-request__errors ul{
  margin:0;
  padding-left: 18px;
  font-weight: 800;
}

.mp-request__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

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

/* Utilise les styles génériques mp-field/mp-input/mp-select/mp-textarea */
.mp-field{ display: grid; gap: 6px; }
.mp-field label{ font-size: .92rem; font-weight: 800; color: var(--mp-gray-900); }

.mp-help{
  font-size: .86rem;
  color: var(--mp-gray-600);
  margin-top: 6px;
  line-height: 1.35;
}

.mp-request__products{
  grid-column: 1 / -1;
  border: 1px dashed var(--mp-gray-300);
  border-radius: 12px;
  padding: 12px;
  background: var(--mp-gray-50);
}

.mp-request__products-grid{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}

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

/* Petit badge / info */
.mp-badge{
  display:inline-flex;
  align-items:center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 900;
  background: color-mix(in srgb, var(--mp-accent) 12%, white);
  border: 1px solid color-mix(in srgb, var(--mp-accent) 25%, white);
  color: color-mix(in srgb, var(--mp-accent) 75%, black);
}

.mp-home{ max-width: 980px; margin: 22px auto; padding: 0 16px; }

.mp-home__head{
  background: var(--mp-white);
  border: 1px solid var(--mp-gray-100);
  border-radius: var(--mp-radius);
  box-shadow: var(--mp-shadow);
  padding: 16px 18px;
  margin-bottom: 14px;
}

.mp-home__filter,
.mp-home__list{
  background: var(--mp-white);
  border: 1px solid var(--mp-gray-100);
  border-radius: var(--mp-radius);
  box-shadow: var(--mp-shadow);
  padding: 16px 18px;
  margin-bottom: 14px;
}

.mp-home__list h2{ margin: 0 0 10px; font-weight: 900; }

.mp-dep{ border-top: 1px solid var(--mp-gray-200); padding-top: 12px; margin-top: 12px; }
.mp-dep:first-child{ border-top: 0; padding-top: 0; margin-top: 0; }

.mp-dep__title{ font-weight: 900; margin-bottom: 8px; }

.mp-dep__markets{ margin:0; padding-left: 18px; display:grid; gap:6px; }

.mp-muted{ color: var(--mp-gray-600); font-weight: 600; margin-left: 6px; }

.mp-pill{
  display:inline-flex;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 800;
  border: 1px solid var(--mp-gray-300);
  background: var(--mp-gray-50);
}

.mp-empty{
  padding: 12px;
  border-radius: 12px;
  border: 1px dashed var(--mp-gray-300);
  background: var(--mp-gray-50);
  color: var(--mp-gray-600);
}

.mp-cta{ margin-top: 18px; }
.mp-cta__box{
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--mp-primary) 10%, white),
    white
  );
  border: 1px solid var(--mp-gray-100);
  border-radius: var(--mp-radius);
  box-shadow: var(--mp-shadow);
  padding: 18px;
}

.mp-cta__title{ font-size: 1.2rem; font-weight: 900; margin-bottom: 6px; }
.mp-cta__text{ color: var(--mp-gray-600); margin-bottom: 12px; line-height: 1.4; }
.mp-cta__actions{ display:flex; gap:10px; flex-wrap: wrap; }

/* =========================
   MP – Request Summary
========================= */

.mp-request__summary{
  grid-column: 1 / -1;
  margin-top: 6px;
}

.mp-request__summaryTitle{
  font-size: 1.15rem;
  font-weight: 1000;
  color: var(--mp-secondary);
  margin-bottom: 10px;
}

.mp-request__summaryBox{
  background: linear-gradient(
    180deg,
    rgb(var(--mp-primary-rgb) / .05),
    #fff
  );
  border: 1px solid rgb(var(--mp-primary-rgb) / .18);
  border-radius: 18px;
  padding: 16px 18px;
  box-shadow: 0 8px 20px rgba(0,0,0,.05);
}

.mp-request__summaryList{
  display: grid;
  gap: 10px;
}

.mp-request__summaryLine{
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 4px 0;
}

.mp-request__summaryLabel{
  font-weight: 800;
  color: var(--mp-gray-600);
}

.mp-request__summaryValue{
  font-weight: 900;
  color: var(--mp-gray-900);
  word-break: break-word;
}

.mp-request__summaryLine--total{
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px dashed rgb(var(--mp-primary-rgb) / .28);
}

.mp-request__summaryLine--total .mp-request__summaryLabel,
.mp-request__summaryLine--total .mp-request__summaryValue{
  color: var(--mp-secondary);
  font-size: 1.06rem;
}

.mp-request__summaryHint{
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgb(var(--mp-accent-rgb) / .12);
  border: 1px solid rgb(var(--mp-accent-rgb) / .28);
  color: #5a5a5a;
  font-weight: 700;
  line-height: 1.5;
}

@media (max-width: 720px){
  .mp-request__summaryLine{
    grid-template-columns: 1fr;
    gap: 4px;
  }
}/* =========================
   MP – Request Chronogramme
========================= */

.mp-request__chronogramme{
  grid-column: 1 / -1;
  margin-top: 8px;
}

.mp-request__chronogrammeTitle{
  font-size: 1.15rem;
  font-weight: 1000;
  color: var(--mp-secondary);
  margin-bottom: 10px;
}

.mp-request__chronogrammeBox{
  background: linear-gradient(
    180deg,
    rgb(var(--mp-primary-rgb) / .05),
    #fff
  );
  border: 1px solid rgb(var(--mp-primary-rgb) / .18);
  border-radius: 18px;
  padding: 16px 18px;
  box-shadow: 0 8px 20px rgba(0,0,0,.05);
}

.mp-request__chronogrammeDesc{
  color: var(--mp-gray-600);
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 14px;
}

.mp-request__chronogrammeStats{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.mp-request__chronoStat{
  background: #fff;
  border: 1px solid rgb(var(--mp-primary-rgb) / .14);
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: 0 4px 14px rgba(0,0,0,.04);
}

.mp-request__chronoStatLabel{
  display: block;
  font-size: .82rem;
  font-weight: 800;
  color: var(--mp-gray-600);
  margin-bottom: 4px;
}

.mp-request__chronoStatValue{
  display: block;
  font-size: 1rem;
  font-weight: 1000;
  color: var(--mp-gray-900);
  word-break: break-word;
}

/* Timeline */
.mp-request__chronogrammeTimeline{
  position: relative;
  display: grid;
  gap: 14px;
  padding-left: 28px;
}

.mp-request__chronogrammeTimeline::before{
  content: "";
  position: absolute;
  left: 10px;
  top: 4px;
  bottom: 4px;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    rgb(var(--mp-primary-rgb) / .95),
    rgb(var(--mp-secondary-rgb) / .55)
  );
}

.mp-request__timelineItem{
  position: relative;
}

.mp-request__timelineDot{
  position: absolute;
  left: -28px;
  top: 20px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #fff;
  border: 4px solid var(--mp-primary);
  box-shadow: 0 0 0 4px rgb(var(--mp-primary-rgb) / .10);
  z-index: 1;
}

.mp-request__timelineCard{
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: 0 6px 16px rgba(0,0,0,.05);
}

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

.mp-request__timelineStep{
  font-weight: 1000;
  color: var(--mp-secondary);
}

.mp-request__timelineBadge{
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgb(var(--mp-primary-rgb) / .10);
  border: 1px solid rgb(var(--mp-primary-rgb) / .18);
  color: var(--mp-secondary);
  font-size: .82rem;
  font-weight: 900;
}

.mp-request__timelineDate{
  font-size: 1rem;
  font-weight: 900;
  color: var(--mp-gray-900);
  margin-bottom: 6px;
}

.mp-request__timelineMeta{
  color: var(--mp-gray-600);
  font-weight: 700;
  margin-bottom: 8px;
  line-height: 1.45;
}

.mp-request__timelineProgress{
  padding-top: 8px;
  border-top: 1px dashed rgb(var(--mp-primary-rgb) / .20);
  color: var(--mp-secondary);
  font-weight: 900;
}

/* Dernière étape = objectif atteint */
.mp-request__timelineItem.is-complete .mp-request__timelineDot{
  border-color: var(--mp-accent);
  box-shadow: 0 0 0 4px rgb(var(--mp-accent-rgb) / .16);
}

.mp-request__timelineItem.is-complete .mp-request__timelineBadge{
  background: rgb(var(--mp-accent-rgb) / .14);
  border-color: rgb(var(--mp-accent-rgb) / .24);
  color: #8a6a00;
}

.mp-request__timelineItem.is-complete .mp-request__timelineProgress{
  color: #8a6a00;
}

/* Etat vide */
.mp-request__chronogrammeEmpty{
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px dashed rgb(var(--mp-primary-rgb) / .22);
  background: rgb(var(--mp-primary-rgb) / .05);
  color: var(--mp-gray-600);
  font-weight: 700;
  line-height: 1.5;
}

/* Responsive */
@media (max-width: 900px){
  .mp-request__chronogrammeStats{
    grid-template-columns: 1fr 1fr;
  }
}

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

  .mp-request__chronogrammeTimeline{
    padding-left: 22px;
  }

  .mp-request__chronogrammeTimeline::before{
    left: 7px;
  }

  .mp-request__timelineDot{
    left: -22px;
    width: 16px;
    height: 16px;
  }

  .mp-request__timelineCard{
    padding: 12px 13px;
  }
}

/* =========================
   MP – Deliverables
========================= */

.mp-request__deliverables{
  grid-column: 1 / -1;
  margin-top: 10px;
}

.mp-request__deliverablesTitle{
  font-size: 1.15rem;
  font-weight: 1000;
  color: var(--mp-secondary);
  margin-bottom: 8px;
}

.mp-request__deliverablesDesc{
  color: var(--mp-gray-600);
  font-weight: 700;
  margin-bottom: 16px;
}

.mp-request__deliverablesGrid{
  display:grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap:14px;
}

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

.mp-request__deliverable{
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:16px;
  padding:14px 16px;
  box-shadow:0 6px 16px rgba(0,0,0,.05);
}

.mp-request__deliverableIcon{
  font-size:22px;
  margin-bottom:6px;
}

.mp-request__deliverableTitle{
  font-weight:900;
  color:var(--mp-secondary);
  margin-bottom:6px;
}

.mp-request__deliverableText{
  color:var(--mp-gray-600);
 
  line-height:1.45;
}

.mp-request__timelineMore{
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px dashed rgb(var(--mp-primary-rgb) / .24);
  background: rgb(var(--mp-primary-rgb) / .05);
  color: var(--mp-gray-600);
 
  text-align: center;
}

.mp-request__deliverableIcon{
  width:60px;
  height:60px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  background:rgba(0,0,0,.04);
  margin-bottom:8px;
}

.mp-request__deliverableIcon img{
  width:36px;
}

.mp-calendar__field--search{
  position:relative;
}

.mp-calendar__searchInput{
  width:100%;
  padding:11px 12px;
  border:1px solid var(--mp-gray-300);
  border-radius:12px;
  background:#fff;
}

.mp-calendar__searchInput:focus{
  outline:none;
  border-color:rgb(var(--mp-primary-rgb) / .55);
  box-shadow:0 0 0 3px rgb(var(--mp-primary-rgb) / .14);
}

.mp-calendar__suggestions{
  position:absolute;
  top:100%;
  left:0;
  right:0;
  z-index:20;
  margin-top:6px;
  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;
  background:#fff;
  box-shadow:0 14px 28px rgba(0,0,0,.10);
  overflow:hidden;
}

.mp-calendar__suggestion{
  width:100%;
  border:0;
  background:#fff;
  padding:11px 12px;
  text-align:left;
  cursor:pointer;
  display:grid;
  gap:4px;
  border-bottom:1px solid rgba(0,0,0,.05);
}

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

.mp-calendar__suggestion:hover{
  background:rgb(var(--mp-primary-rgb) / .06);
}

.mp-calendar__suggestion--empty{
  cursor:default;
}

.mp-calendar__suggestionName{
  font-weight:900;
  color:var(--mp-secondary);
}

.mp-calendar__suggestionMeta{
  font-size:.84rem;
  color:var(--mp-gray-600);
  font-weight:700;
}

.mp-calendar__searchSelected{
  margin-top:-4px;
  margin-bottom:14px;
}

.mp-calendar__searchSelectedLabel{
  display:block;
  font-weight:900;
  color:var(--mp-gray-900);
  margin-bottom:6px;
}

.mp-calendar__searchSelectedBox{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  padding:10px 12px;
  border-radius:12px;
  background:rgb(var(--mp-primary-rgb) / .07);
  border:1px solid rgb(var(--mp-primary-rgb) / .18);
  color:var(--mp-secondary);
  font-weight:800;
}

.mp-calendar__searchClear{
  border:0;
  background:#fff;
  color:var(--mp-secondary);
  padding:7px 10px;
  border-radius:10px;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 3px 10px rgba(0,0,0,.05);
}

.mp-calendar__searchClear:hover{
  background:rgb(var(--mp-primary-rgb) / .08);
}

/* =========================
   MP – Calendar page
========================= */

.mp-calendar{
  padding: 10px 0 24px;
}

.mp-calendar__wrap{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 10px;
}

.mp-calendar__hero{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:16px;
  padding:18px;
  border-radius:18px;
  border:1px solid rgb(var(--mp-primary-rgb) / .18);
  background:linear-gradient(
    135deg,
    rgb(var(--mp-primary-rgb) / .10),
    rgb(var(--mp-secondary-rgb) / .05)
  );
  box-shadow: var(--mp-shadow-sm);
}

.mp-calendar__title{
  margin:0 0 6px;
  font-size:clamp(24px, 2.6vw, 34px);
  font-weight:1000;
  color:var(--mp-secondary);
}

.mp-calendar__lead{
  margin:0;
  color:var(--mp-gray-600);
  font-weight:700;
  line-height:1.45;
}

.mp-calendar__nav {
  position: sticky;
  top: 12px;
  z-index: 20;

  display: flex;
  align-items: center;
  gap: 12px;

  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  box-shadow: var(--mp-shadow-sm);
}

.mp-calendar__navBtn{
  width:42px;
  height:42px;
  border-radius:12px;
  border:1px solid rgb(var(--mp-primary-rgb) / .20);
  background:#fff;
  color:var(--mp-secondary);
  font-size:24px;
  font-weight:900;
  cursor:pointer;
}

.mp-calendar__navBtn:hover{
  background:rgb(var(--mp-primary-rgb) / .08);
}

.mp-calendar__current{
  min-width:180px;
  text-align:center;
  font-weight:1000;
  color:var(--mp-secondary);
  text-transform:capitalize;
}

.mp-calendar__layout{
  display:grid;
  grid-template-columns: 1.5fr .95fr;
  gap:16px;
}

.mp-calendar__panel{
  background:#fff;
  border:var(--mp-border);
  border-radius:18px;
  box-shadow:var(--mp-shadow);
  overflow:hidden;
}

.mp-calendar__panel--calendar{
  padding:16px;
}

.mp-calendar__panel--details{
  padding:16px;
}

.mp-calendar__weekdays,
.mp-calendar__grid{
  display:grid;
  grid-template-columns: 72px repeat(7, minmax(0, 1fr));
  gap:10px;
}

.mp-calendar__weekdays{
  margin-bottom:10px;
}

.mp-calendar__weekhead{
  padding:10px 8px;
  text-align:center;
  font-weight:900;
  color:var(--mp-secondary);
  background:rgb(var(--mp-primary-rgb) / .08);
  border-radius:12px;
  font-size: 12px;
}

.mp-calendar__weekhead--week{
  color:var(--mp-gray-600);
}

.mp-calendar__weekNo{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:84px;
  border-radius:14px;
  background:rgb(var(--mp-primary-rgb) / .05);
  border:1px dashed rgb(var(--mp-primary-rgb) / .22);
  color:var(--mp-gray-600);
  font-weight:1000;
  text-align:center;
  padding:8px 6px;
  font-size:.92rem;
  white-space:nowrap;
}

.mp-calendar__day{
  min-height:84px;
  border-radius:16px;
  border:1px solid rgba(0,0,0,.06);
  background:#fff;
  box-shadow:0 4px 14px rgba(0,0,0,.04);
  cursor:pointer;
  padding:10px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:space-between;
  text-align:left;
  overflow:hidden;
}

.mp-calendar__day:hover{
  border-color:rgb(var(--mp-primary-rgb) / .32);
  background:rgb(var(--mp-primary-rgb) / .05);
}

.mp-calendar__day.is-muted{
  opacity:.42;
}

.mp-calendar__day.is-today{
    border:2px solid rgb(var(--mp-accent-rgb) / .55);
    background:rgb(var(--mp-accent-rgb) / .10);
    box-shadow:0 0 0 2px rgb(var(--mp-accent-rgb) / .15);
}

.mp-calendar__day.is-today .mp-calendar__date{
    color:var(--mp-accent);
    font-weight:900;
}

.mp-calendar__day.is-selected{
  background:linear-gradient(180deg, var(--mp-primary), var(--mp-secondary));
  color:#fff;
  border-color:var(--mp-primary);
}

.mp-calendar__dayNum{
  font-size:1rem;
  font-weight:1000;
}

.mp-calendar__todayBadge{
    display:flex;
    align-items:center;
    justify-content:center;

    writing-mode: vertical-rl;
    transform: rotate(180deg);

    padding:6px 2px;
    border-radius:12px;
    background:#fff;
    color:var(--mp-secondary);

    font-size:.65rem;
    font-weight:900;
    line-height:1;

    letter-spacing:1px;
    display: none;
}

.mp-calendar__detailsHead{
  margin-bottom:14px;
}

.mp-calendar__detailsTitle{
  font-size:1.05rem;
  font-weight:1000;
  color:var(--mp-secondary);
  margin-bottom:4px;
}

.mp-calendar__detailsDate{
  color:var(--mp-gray-600);
  font-weight:700;
  line-height:1.4;
  text-transform:capitalize;
}

.mp-calendar__field{
  display:grid;
  gap:6px;
  margin-bottom:16px;
}

.mp-calendar__field label{
  font-weight:900;
  color:var(--mp-gray-900);
}

.mp-calendar__field select{
  width:100%;
  padding:11px 12px;
  border:1px solid var(--mp-gray-300);
  border-radius:12px;
  background:#fff;
}

.mp-calendar__resultsHead{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:12px;
}

.mp-calendar__resultsTitle{
  font-weight:1000;
  color:var(--mp-secondary);
}

.mp-calendar__resultsMeta{
  color:var(--mp-gray-600);
  font-weight:800;
}

.mp-calendar__results{
  display:grid;
  gap:12px;
}

.mp-calendar__marketCard{
  border:1px solid rgba(0,0,0,.06);
  border-radius:16px;
  background:#fff;
  box-shadow:0 6px 16px rgba(0,0,0,.05);
  padding:14px 15px;
}

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

.mp-calendar__marketName{
  font-weight:1000;
  color:var(--mp-secondary);
}

.mp-calendar__marketBadge{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  background:rgb(var(--mp-primary-rgb) / .10);
  border:1px solid rgb(var(--mp-primary-rgb) / .18);
  color:var(--mp-secondary);
  font-size:.78rem;
  font-weight:900;
}

.mp-calendar__marketMeta{
  color:var(--mp-gray-600);
  font-weight:700;
  line-height:1.45;
  margin-top:6px;
}

.mp-calendar__empty{
  padding:16px;
  border-radius:14px;
  border:1px dashed rgb(var(--mp-primary-rgb) / .22);
  background:rgb(var(--mp-primary-rgb) / .05);
  color:var(--mp-gray-600);
  font-weight:700;
}

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

@media (max-width: 760px){
  .mp-calendar__weekdays,
  .mp-calendar__grid{
    grid-template-columns: 54px repeat(7, minmax(0, 1fr));
    gap:8px;
  }

  .mp-calendar__day{
    min-height:72px;
    padding:8px;
  }

  .mp-calendar__weekNo{
    min-height:72px;
    font-size:.82rem;
  }

  .mp-calendar__current{
    min-width:140px;
  }
}

/* =========================
   MP – Subscribe
========================= */

.mp-subscribe{
  padding: 10px 0 24px;
}

.mp-subscribe__wrap{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 10px;
}

.mp-subscribe__hero{
  margin-bottom: 18px;
  padding: 22px;
  border-radius: 20px;
  border: 1px solid rgb(var(--mp-primary-rgb) / .18);
  background: linear-gradient(
    135deg,
    rgb(var(--mp-primary-rgb) / .10),
    rgb(var(--mp-secondary-rgb) / .05)
  );
  box-shadow: var(--mp-shadow);
}

.mp-subscribe__title{
  margin: 0 0 6px;
  font-size: clamp(26px, 2.8vw, 36px);
  font-weight: 1000;
  color: var(--mp-secondary);
}

.mp-subscribe__lead{
  margin: 0;
  color: var(--mp-gray-600);
  font-weight: 700;
  line-height: 1.5;
}

.mp-subscribe__errors{
  margin-bottom: 16px;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgb(var(--mp-danger-rgb, 220 38 38) / .08);
  border: 1px solid rgb(var(--mp-danger-rgb, 220 38 38) / .18);
}

.mp-subscribe__errors ul{
  margin: 0;
  padding-left: 18px;
}

.mp-subscribe__layout{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.mp-subscribe__panel{
  background: #fff;
  border: var(--mp-border);
  border-radius: 20px;
  box-shadow: var(--mp-shadow);
  padding: 18px;
}

.mp-subscribe__panelTitle{
  font-size: 1.08rem;
  font-weight: 1000;
  color: var(--mp-secondary);
  margin-bottom: 14px;
}

.mp-subscribe__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.mp-subscribe__readonly{
  background: rgb(var(--mp-primary-rgb) / .06) !important;
  font-weight: 800;
}

.mp-subscribe__marketBox{
  display: grid;
  gap: 10px;
  max-height: 360px;
  overflow: auto;
  padding: 12px;
  border: 1px solid rgb(var(--mp-primary-rgb) / .16);
  border-radius: 16px;
  background: rgb(var(--mp-primary-rgb) / .04);
}

.mp-subscribe__marketItem{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.05);
  cursor: pointer;
}

.mp-subscribe__marketItem:hover{
  border-color: rgb(var(--mp-primary-rgb) / .28);
  background: rgb(var(--mp-primary-rgb) / .04);
}

.mp-subscribe__marketItem input{
  margin-top: 3px;
}

.mp-subscribe__marketLabel{
  display: grid;
  gap: 3px;
}

.mp-subscribe__marketLabel strong{
  color: var(--mp-secondary);
  font-weight: 900;
}

.mp-subscribe__marketLabel small{
  color: var(--mp-gray-600);
  font-weight: 700;
}

.mp-subscribe__summary{
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgb(var(--mp-primary-rgb) / .05);
  border: 1px dashed rgb(var(--mp-primary-rgb) / .20);
}

.mp-subscribe__summaryTitle{
  font-weight: 1000;
  color: var(--mp-secondary);
  margin-bottom: 6px;
}

.mp-subscribe__summaryText{
  color: var(--mp-gray-600);
  font-weight: 700;
}

.mp-subscribe__empty{
  padding: 16px;
  border-radius: 14px;
  border: 1px dashed rgb(var(--mp-primary-rgb) / .22);
  background: rgb(var(--mp-primary-rgb) / .05);
  color: var(--mp-gray-600);
  font-weight: 700;
}

.mp-subscribe__consent{
  margin-top: 18px;
  padding: 16px 18px;
  border-radius: 18px;
  background: #fff;
  border: var(--mp-border);
  box-shadow: var(--mp-shadow-sm);
}

.mp-subscribe__checkbox{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-weight: 700;
  color: var(--mp-gray-700);
}

.mp-subscribe__checkbox input{
  margin-top: 3px;
}

.mp-subscribe__checkbox a{
  color: var(--mp-secondary);
  font-weight: 900;
  text-decoration: none;
}

.mp-subscribe__checkbox a:hover{
  text-decoration: underline;
}

.mp-subscribe__actions{
  margin-top: 18px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

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

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

.mp-subscribe__success{
  margin-bottom:16px;
  padding:16px 18px;
  border-radius:16px;
  background:rgb(var(--mp-primary-rgb) / .08);
  border:1px solid rgb(var(--mp-primary-rgb) / .18);
  box-shadow:var(--mp-shadow-sm);
}

.mp-subscribe__successTitle{
  font-size:1.02rem;
  font-weight:1000;
  color:var(--mp-secondary);
  margin-bottom:5px;
}

.mp-subscribe__successText{
  color:var(--mp-gray-600);
  font-weight:700;
  line-height:1.45;
}

/* =========================
   MP – Client Area
========================= */

.mp-client-auth{
  padding: 22px 0 34px;
}

.mp-client-auth__wrap,
.mp-client-dashboard__wrap{
  width:min(1040px, 100%);
  margin:0 auto;
}

.mp-client-auth__hero,
.mp-client-dashboard__hero{
  padding: 22px;
  border-radius: var(--mp-radius-lg);
  border: 1px solid rgb(var(--mp-primary-rgb) / .18);
  background: linear-gradient(
    135deg,
    rgb(var(--mp-primary-rgb) / .11),
    rgb(var(--mp-secondary-rgb) / .05)
  );
  box-shadow: var(--mp-shadow-sm);
  margin-bottom: 18px;
}

.mp-client-auth__heroContent,
.mp-client-dashboard__heroContent{
  max-width: 760px;
}

.mp-client-dashboard__heroActions{
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.mp-client-auth__badge,
.mp-client-dashboard__badge{
  display:inline-flex;
  align-items:center;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgb(var(--mp-accent-rgb) / .18);
  border: 1px solid rgb(var(--mp-accent-rgb) / .38);
  color: var(--mp-secondary);
  font-weight: 900;
  font-size: .86rem;
  margin-bottom: 10px;
}

.mp-client-auth__title,
.mp-client-dashboard__title{
  font-size: clamp(24px, 2.2vw, 34px);
  line-height: 1.15;
  font-weight: 1000;
  color: var(--mp-secondary);
  margin-bottom: 8px;
}

.mp-client-auth__desc,
.mp-client-dashboard__desc{
  color: #555;
  font-weight: 700;
  line-height: 1.5;
  max-width: 760px;
}

.mp-client-auth__card{
  background: #fff;
  border: var(--mp-border);
  border-radius: var(--mp-radius-lg);
  box-shadow: var(--mp-shadow);
  padding: 20px;
}

.mp-client-auth__actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top: 6px;
}

.mp-client-auth__alert{
  margin-bottom: 16px;
  border-radius: 14px;
  padding: 14px 16px;
  font-weight: 700;
}

.mp-client-auth__alert ul{
  margin:0;
  padding-left: 18px;
}

.mp-client-auth__alert--error{
  border: 1px solid rgba(196, 57, 57, .20);
  background: rgba(196, 57, 57, .08);
  color: #933;
}

.mp-client-auth__alert--success{
  border: 1px solid rgb(var(--mp-primary-rgb) / .20);
  background: rgb(var(--mp-primary-rgb) / .09);
  color: var(--mp-secondary);
}

.mp-client-auth__foot{
  margin-top: 16px;
}

.mp-client-auth__footCard,
.mp-client-auth__debug{
  background: #fff;
  border: var(--mp-border);
  border-radius: 16px;
  padding: 16px 18px;
  box-shadow: var(--mp-shadow-sm);
}

.mp-client-auth__footTitle,
.mp-client-auth__debugTitle{
  font-size: 1rem;
  font-weight: 900;
  color: var(--mp-secondary);
  margin-bottom: 8px;
}

.mp-client-auth__footText,
.mp-client-auth__debugText{
  color: var(--mp-gray-600);
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 12px;
}

.mp-client-auth__debug{
  margin-top: 16px;
  border-style: dashed;
}

.mp-client-auth__debugLink{
  display:block;
  word-break: break-all;
  font-weight: 800;
}

.mp-client-dashboard{
  padding: 18px 0 34px;
}

.mp-client-dashboard__heroActions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.mp-client-dashboard__topGrid{
  display:grid;
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
  gap: 16px;
  align-items:start;
}

.mp-client-dashboard__panel,
.mp-client-dashboard__section{
  background: #fff;
  border: var(--mp-border);
  border-radius: var(--mp-radius-lg);
  box-shadow: var(--mp-shadow);
  padding: 18px;
}

.mp-client-dashboard__section{
  margin-top: 16px;
}

.mp-client-dashboard__sideStats{
  display:grid;
  gap: 14px;
}

.mp-client-statCard{
  background: linear-gradient(
    180deg,
    rgb(var(--mp-primary-rgb) / .06),
    #fff
  );
  border: 1px solid rgb(var(--mp-primary-rgb) / .16);
  border-radius: 18px;
  padding: 16px;
  box-shadow: var(--mp-shadow-sm);
}

.mp-client-statCard__label{
  color: var(--mp-gray-600);
  font-weight: 800;
  margin-bottom: 6px;
}

.mp-client-statCard__value{
  color: var(--mp-secondary);
  font-weight: 1000;
  font-size: 1.35rem;
}

.mp-client-dashboard__code{
  display:inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgb(var(--mp-accent-rgb) / .18);
  border: 1px dashed rgb(var(--mp-accent-rgb) / .42);
  color: var(--mp-secondary);
}

.mp-client-status{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height: 30px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 900;
  border: 1px solid var(--mp-gray-300);
  background: var(--mp-gray-50);
  color: var(--mp-gray-900);
  text-transform: capitalize;
}

.mp-client-status--pending,
.mp-client-status--planned{
  background: rgba(248, 208, 49, .18);
  border-color: rgba(248, 208, 49, .45);
  color: #7b6500;
}

.mp-client-status--validated,
.mp-client-status--assigned,
.mp-client-status--collected{
  background: rgba(59, 179, 76, .14);
  border-color: rgba(59, 179, 76, .34);
  color: #0f7b3c;
}

.mp-client-status--in_progress,
.mp-client-status--published{
  background: rgba(3, 144, 70, .12);
  border-color: rgba(3, 144, 70, .30);
  color: #066239;
}

.mp-client-status--delivered{
  background: rgba(3, 144, 70, .16);
  border-color: rgba(3, 144, 70, .35);
  color: #055f33;
}

.mp-client-status--cancelled{
  background: rgba(196, 57, 57, .10);
  border-color: rgba(196, 57, 57, .24);
  color: #9a2c2c;
}

.mp-client-timeline{
  display:grid;
  gap: 14px;
  margin-top: 16px;
}

.mp-client-timeline__item{
  position:relative;
  display:grid;
  grid-template-columns: 24px minmax(0,1fr);
  gap: 12px;
  align-items:flex-start;
}

.mp-client-timeline__item:not(:last-child)::after{
  content:"";
  position:absolute;
  left: 11px;
  top: 24px;
  bottom: -14px;
  width: 2px;
  background: rgba(0,0,0,.08);
}

.mp-client-timeline__dot{
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid rgb(var(--mp-primary-rgb) / .35);
  background: #fff;
  box-shadow: 0 0 0 4px rgb(var(--mp-primary-rgb) / .08);
}

.mp-client-timeline__item.is-done .mp-client-timeline__dot{
  background: var(--mp-secondary);
  border-color: var(--mp-secondary);
}

.mp-client-timeline__body{
  background: rgb(var(--mp-primary-rgb) / .04);
  border: 1px solid rgb(var(--mp-primary-rgb) / .12);
  border-radius: 14px;
  padding: 12px 14px;
}

.mp-client-timeline__title{
  font-weight: 900;
  color: var(--mp-gray-900);
  margin-bottom: 4px;
}

.mp-client-timeline__date{
  color: var(--mp-gray-600);
  font-weight: 700;
}

.mp-client-collection__head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap: 14px;
  margin-bottom: 16px;
}

.mp-client-collection__title{
  font-size: 1.15rem;
  font-weight: 1000;
  color: var(--mp-secondary);
  margin-bottom: 4px;
}

.mp-client-collection__desc{
  color: var(--mp-gray-600);
  font-weight: 700;
  line-height: 1.5;
}

.mp-client-requested{
  margin-bottom: 16px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgb(var(--mp-primary-rgb) / .16);
  background: rgb(var(--mp-primary-rgb) / .05);
}

.mp-client-requested__title{
  font-weight: 900;
  color: var(--mp-secondary);
  margin-bottom: 10px;
}

.mp-client-requested__list{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
}

.mp-client-requested__item{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width: 180px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgb(var(--mp-primary-rgb) / .14);
}

.mp-client-requested__item strong{
  font-size: .96rem;
  color: var(--mp-gray-900);
}

.mp-client-requested__item span{
  font-size: .88rem;
  color: var(--mp-gray-600);
  font-weight: 700;
}

.mp-client-collection__grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.mp-client-collection__card{
  background: #fff;
  border: 1px solid var(--mp-gray-200);
  border-radius: 18px;
  box-shadow: var(--mp-shadow-sm);
  padding: 16px;
}

.mp-client-collection__cardHead{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

.mp-client-collection__product{
  font-size: 1.02rem;
  font-weight: 1000;
  color: var(--mp-secondary);
  line-height: 1.3;
}

.mp-client-collection__meta{
  display:grid;
  gap: 8px;
}

.mp-client-collection__line{
  display:grid;
  grid-template-columns: 150px minmax(0,1fr);
  gap: 10px;
  align-items:start;
}

.mp-client-collection__line span{
  color: var(--mp-gray-600);
  font-weight: 800;
}

.mp-client-collection__line strong{
  color: var(--mp-gray-900);
  font-weight: 900;
  word-break: break-word;
}

.mp-client-collection__notes{
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--mp-gray-50);
  border: 1px dashed var(--mp-gray-300);
  color: #555;
  line-height: 1.5;
  font-weight: 700;
}

@media (max-width: 920px){
  .mp-client-dashboard__topGrid{
    grid-template-columns: 1fr;
  }

  .mp-client-collection__grid{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px){
  .mp-client-auth__hero,
  .mp-client-dashboard__hero{
    padding: 16px;
  }

  .mp-client-auth__actions,
  .mp-client-dashboard__heroActions{
    width: 100%;
  }

  .mp-client-auth__actions .mp-btn,
  .mp-client-dashboard__heroActions .mp-btn{
    width: 100%;
    text-align:center;
  }

  .mp-client-collection__line{
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .mp-client-requested__list{
    display:grid;
    grid-template-columns: 1fr;
  }
}
/* =========================
   MP – Nav Mega Menu Client
========================= */

.mp-nav__item{
  position: relative;
}

.mp-nav__item--mega{
  position: relative;
}

.mp-nav__link--button{
  appearance: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  font: inherit;
}

.mp-nav__caret{
  font-size: .78rem;
  line-height: 1;
  margin-left: 6px;
}

.mp-mega{
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  min-width: 760px;
  padding: 16px;
  border-radius: 22px;
  border: 1px solid rgb(var(--mp-primary-rgb) / .16);
  background: #fff;
  box-shadow: 0 24px 55px rgba(0,0,0,.14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .22s ease, transform .22s ease, visibility .22s ease;
  z-index: 60;
}

.mp-mega__grid{
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 16px;
}

.mp-mega__col{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mp-mega__col--intro{
  padding: 14px;
  border-radius: 18px;
  background: linear-gradient(
    135deg,
    rgb(var(--mp-primary-rgb) / .10),
    rgb(var(--mp-secondary-rgb) / .05)
  );
  border: 1px solid rgb(var(--mp-primary-rgb) / .12);
}

.mp-mega__badge{
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgb(var(--mp-accent-rgb) / .18);
  border: 1px solid rgb(var(--mp-accent-rgb) / .35);
  color: var(--mp-secondary);
  font-size: .82rem;
  font-weight: 900;
  margin-bottom: 8px;
}

.mp-mega__title{
  font-size: 1.08rem;
  line-height: 1.3;
  font-weight: 1000;
  color: var(--mp-secondary);
}

.mp-mega__text{
  color: var(--mp-gray-600);
  font-weight: 700;
  line-height: 1.55;
  margin: 0;
}

.mp-mega__heading{
  font-size: .88rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--mp-gray-600);
  font-weight: 900;
  margin-bottom: 2px;
}

.mp-mega__link{
  display: block;
  text-decoration: none;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgb(var(--mp-primary-rgb) / .10);
  background: #fff;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

.mp-mega__link:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(0,0,0,.08);
  border-color: rgb(var(--mp-primary-rgb) / .20);
  background: rgb(var(--mp-primary-rgb) / .03);
}

.mp-mega__link.is-active{
  border-color: rgb(var(--mp-primary-rgb) / .32);
  background: rgb(var(--mp-primary-rgb) / .08);
}

.mp-mega__linkTitle{
  display: block;
  color: var(--mp-gray-900);
  font-weight: 900;
  margin-bottom: 4px;
}

.mp-mega__linkText{
  display: block;
  color: var(--mp-gray-600);
  font-size: .92rem;
  line-height: 1.45;
  font-weight: 700;
}

@media (min-width: 901px){
  .mp-nav__item--mega:hover .mp-mega,
  .mp-nav__item--mega.is-open .mp-mega{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .mp-nav__item--mega:hover > .mp-nav__link--button,
  .mp-nav__item--mega.is-open > .mp-nav__link--button{
    color: var(--mp-secondary);
  }

  .mp-nav__mobileLang{
    display: none;
  }
}

@media (max-width: 900px){
  .mp-nav__item--mega{
    width: 100%;
  }

  .mp-nav__item--mega > .mp-nav__link--button{
    width: 100%;
    justify-content: space-between;
    text-align: left;
  }

  .mp-mega{
    position: static;
    min-width: 0;
    width: 100%;
    margin-top: 10px;
    padding: 12px;
    border-radius: 18px;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: none;
    box-shadow: inset 0 0 0 1px rgb(var(--mp-primary-rgb) / .08);
  }

  .mp-nav__item--mega.is-open .mp-mega{
    display: block;
  }

  .mp-mega__grid{
    grid-template-columns: 1fr;
  }

  .mp-nav__mobileLang{
    display: flex;
    gap: 8px;
    padding-top: 10px;
    margin-top: 6px;
    border-top: 1px solid rgb(255 255 255 / .12);
  }

  .mp-lang{
    display: none;
  }
}
/* =========================
   MP – Dashboard sections fix
========================= */

.mp-client-dashboard__section{
  display: block;
  width: 100%;
}

.mp-request__deliverablesHead{
  margin-bottom: 14px;
}

.mp-request__deliverablesGrid--three{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 900px){
  .mp-request__deliverablesGrid--three{
    grid-template-columns: 1fr;
  }
}

/* Produits demandés dans la colonne droite */
.mp-client-statCard--products{
  padding: 16px;
}

.mp-client-statCard__products{
  display: grid;
  gap: 10px;
  margin-top: 8px;
}

.mp-client-statCard__productItem{
  padding: 0 auto;
}

.mp-client-statCard__productName{
  color: var(--mp-secondary);
  font-weight: 1000;
  line-height: 1.35;
  margin-bottom: 4px;
}

.mp-client-statCard__productQty{
  color: var(--mp-gray-600);
  font-weight: 800;
}

/* =========================
   MP – Client collection fix
========================= */

/* =========================
   MP – Client collection section
========================= */

.mp-client-collectionV2{
  display: grid;
  gap: 18px;
}

.mp-client-details__summary--four{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, max-content));
  gap:16px;
}

.mp-client-details__summaryProducts{
  display: grid;
  gap: 8px;
  margin-top: 2px;
}

.mp-client-details__summaryProductLine{
  display: grid;
  gap: 2px;
}

.mp-client-details__summaryProductLine strong{
  color: var(--mp-secondary);
  font-weight: 1000;
  line-height: 1.3;
}

.mp-client-details__summaryProductLine small{
  color: var(--mp-gray-600);
  font-size: .92rem;
  font-weight: 800;
}

.mp-client-details__pagination{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.mp-client-details__pageNumbers{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.mp-client-details__pageBtn,
.mp-client-details__pageNumber{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 900;
  border: 1px solid rgb(var(--mp-primary-rgb) / .18);
  background: #fff;
  color: var(--mp-gray-900);
  box-shadow: var(--mp-shadow-sm);
}

.mp-client-details__pageNumber.is-active{
  background: var(--mp-secondary);
  border-color: var(--mp-secondary);
  color: #fff;
}

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

@media (max-width: 700px){
  .mp-client-details__summary--four{
    grid-template-columns: 1fr;
  }

  .mp-client-details__pagination{
    flex-direction: column;
    align-items: stretch;
  }

  .mp-client-details__pageBtn,
  .mp-client-details__pageNumber{
    text-align: center;
  }
}

.mp-client-collectionV2__head{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 16px;
}

.mp-client-collectionV2__intro{
  min-width: 0;
  max-width: 760px;
}

.mp-client-collectionV2__title{
  font-size: 1.2rem;
  font-weight: 1000;
  color: var(--mp-secondary);
  margin-bottom: 6px;
}

.mp-client-collectionV2__desc{
  color: var(--mp-gray-600);
  font-weight: 700;
  line-height: 1.55;
  margin: 0;
}

.mp-client-collectionV2__head .mp-btn{
  flex-shrink: 0;
  white-space: nowrap;
  align-self: flex-start;
}

.mp-client-collectionV2__head .mp-btn--ghost{
  border: 1px solid rgb(var(--mp-primary-rgb) / .25);
}

.mp-client-collectionV2__previewGrid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}

.mp-client-collectionV2__previewCard{
  border-radius: 18px;
  padding: 16px;
  border: 1px solid rgb(var(--mp-primary-rgb) / .14);
  background: #fff;
  box-shadow: var(--mp-shadow-sm);
}

.mp-client-collectionV2__previewTop{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
}

.mp-client-collectionV2__previewProduct{
  font-weight: 1000;
  color: var(--mp-secondary);
  font-size: 1rem;
  line-height: 1.35;
}

.mp-client-collectionV2__previewMeta{
  display: grid;
  gap: 8px;
}

.mp-client-collectionV2__previewMeta div{
  color: var(--mp-gray-600);
  font-weight: 700;
  line-height: 1.45;
}

.mp-client-collectionV2__previewMeta span{
  color: var(--mp-gray-600);
}

.mp-client-collectionV2__previewMeta strong{
  color: var(--mp-gray-900);
}

.mp-client-collectionV2__footerAction{
  display: flex;
  justify-content: flex-end;
}

.mp-client-collectionV2__empty{
  padding: 26px 24px;
  border-radius: 20px;
  border: 1px dashed rgb(var(--mp-primary-rgb) / .24);
  background: rgb(var(--mp-primary-rgb) / .04);
  text-align: center;
}

.mp-client-collectionV2__emptyTitle{
  font-weight: 1000;
  color: var(--mp-secondary);
  font-size: 1.1rem;
  line-height: 1.4;
  margin-bottom: 10px;
}

.mp-client-collectionV2__emptyText{
  color: var(--mp-gray-600);
  font-weight: 700;
  line-height: 1.6;
  max-width: 760px;
  margin: 0 auto 18px;
}

.mp-client-collectionV2__empty .mp-btn{
  min-width: 240px;
}

/* =========================
   MP – Client details page
========================= */

.mp-client-details{
  padding: 6px 0 34px;
}

.mp-client-details__summary{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.mp-client-details__summaryItem{
  background: #fff;
  border: var(--mp-border);
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: var(--mp-shadow-sm);
}

.mp-client-details__summaryItem span{
  display: block;
  color: var(--mp-gray-600);
  font-weight: 800;
  margin-bottom: 6px;
}

.mp-client-details__summaryItem strong{
  color: var(--mp-gray-900);
  font-weight: 1000;
  line-height: 1.35;
}

.mp-client-details__requested,
.mp-client-details__section{
  background: #fff;
  border: var(--mp-border);
  border-radius: var(--mp-radius-lg);
  box-shadow: var(--mp-shadow);
  padding: 18px;
  margin-bottom: 18px;
}

.mp-client-details__sectionTitle{
  font-size: 1.08rem;
  font-weight: 1000;
  color: var(--mp-secondary);
  margin-bottom: 14px;
}

.mp-client-details__requestedGrid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.mp-client-details__requestedCard{
  border: 1px solid rgb(var(--mp-primary-rgb) / .14);
  background: rgb(var(--mp-primary-rgb) / .04);
  border-radius: 14px;
  padding: 14px;
}

.mp-client-details__requestedCard strong{
  display: block;
  color: var(--mp-gray-900);
  font-weight: 1000;
  margin-bottom: 6px;
  line-height: 1.35;
}

.mp-client-details__requestedCard span{
  color: var(--mp-gray-600);
  font-weight: 800;
}

.mp-client-details__tableWrap{
  overflow-x: auto;
  border: 1px solid rgb(var(--mp-primary-rgb) / .10);
  border-radius: 16px;
}

.mp-client-details__table{
  width: 100%;
  border-collapse: collapse;
  min-width: 980px;
  background: #fff;
}

.mp-client-details__table th,
.mp-client-details__table td{
  padding: 12px 10px;
  border-bottom: 1px solid var(--mp-gray-200);
  text-align: left;
  vertical-align: top;
}

.mp-client-details__table th{
  background: rgb(var(--mp-primary-rgb) / .06);
  color: var(--mp-secondary);
  font-weight: 1000;
}

.mp-client-details__table tbody tr:hover td{
  background: rgb(var(--mp-primary-rgb) / .025);
}

.mp-client-details__notesRow td{
  background: rgb(var(--mp-primary-rgb) / .03);
  color: var(--mp-gray-700);
  font-weight: 700;
}

.mp-client-details__empty{
  padding: 22px;
  border-radius: 18px;
  border: 1px dashed rgb(var(--mp-primary-rgb) / .24);
  background: rgb(var(--mp-primary-rgb) / .04);
  text-align: center;
}

.mp-client-details__emptyTitle{
  color: var(--mp-secondary);
  font-weight: 1000;
  margin-bottom: 8px;
  font-size: 1.04rem;
}

.mp-client-details__emptyText{
  color: var(--mp-gray-600);
  font-weight: 700;
  line-height: 1.55;
  max-width: 760px;
  margin: 0 auto;
}

@media (max-width: 900px){

  .mp-client-collectionV2__head{
    flex-direction: column;
    align-items: flex-start;
  }

  .mp-client-collectionV2__head .mp-btn{
    margin-top: 6px;
  }

  .mp-client-collectionV2__footerAction{
    justify-content: stretch;
  }

  .mp-client-collectionV2__footerAction .mp-btn,
  .mp-client-collectionV2__empty .mp-btn{
    width: 100%;
    min-width: 0;
    text-align: center;
  }

  .mp-client-details__summary{
    grid-template-columns: 1fr;
  }
}

.mp-client-status--submitted{
  background: rgba(248, 208, 49, .18);
  border-color: rgba(248, 208, 49, .45);
  color: #7b6500;
}

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

@media (max-width:500px){
  .mp-client-details__summary--four{
    grid-template-columns: 1fr;
  }
}

.mp-gain-cell{
  white-space:normal;
  line-height:1.2;
}

.mp-agent-gain{
  font-weight:700;
  color:#0a8f4b;
  display:block;
}

.mp-request-total{
  font-size:13px;
  color:#6b7280;
}

.mp-mission-gain-inline{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.mp-mission-gain-inline__main{
  font-weight:700;
  color:#079247;
}

.mp-mission-gain-inline__sep,
.mp-mission-gain-inline__total{
  font-weight:600;
}
/* =========================
   AGENT MISSION DETAILS — Invoice style
   Sans toucher au HTML
========================= */

/* Zone générale */
.mp-client-dashboard__section{
  background:#fff;
  border:1px solid #dfe6dc;
  border-radius:18px;
  padding:22px 24px;
  margin-bottom:22px;
  box-shadow:0 8px 24px rgba(0,0,0,.04);
}

/* Hero plus propre */
.mp-client-dashboard__hero{
      padding: 22px;
    border-radius: var(--mp-radius-lg);
    border: 1px solid rgb(var(--mp-primary-rgb) / .18);
    background: linear-gradient(135deg, rgb(var(--mp-primary-rgb) / .11), rgb(var(--mp-secondary-rgb) / .05));
    box-shadow: var(--mp-shadow-sm);
    margin-bottom: 18px;
}

.mp-client-dashboard__badge{
  display:inline-flex;
  align-items:center;
  padding:7px 14px;
  border-radius:999px;
  border:1px solid #d7c85a;
  background:#fffbe8;
  color:#0b9444;
  font-weight:700;
  font-size:13px;
  letter-spacing:.2px;
}

.mp-client-dashboard__title{
  margin:14px 0 10px;
  font-size:clamp(30px, 4vw, 44px);
  line-height:1.08;
  font-weight:800;
  color:#079247;
}

.mp-client-dashboard__desc{
  max-width:880px;
  font-size:16px;
  line-height:1.65;
  color:#56657e;
}

/* En-têtes de section */
.mp-client-collection__head{
  margin-bottom:18px;
  padding-bottom:12px;
  border-bottom:1px solid #e9eee7;
}

.mp-client-collection__title{
  font-size:17px;
  font-weight:800;
  color:#0b9444;
  margin-bottom:4px;
}

.mp-client-collection__desc{
  font-size:14px;
  line-height:1.55;
  color:#6f7d96;
}

/* Carte intérieure type feuille/facture */
.mp-client-collection__card{
  background:#fff;
  border:1px solid #e3e8e2;
  border-radius:18px;
  padding:18px 18px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}

/* Mise en page plus facture */
.mp-grid-2{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:26px 34px;
}

.mp-client-collection__meta{
  display:flex;
  flex-direction:column;
  gap:0;
}

/* Ligne facture */
.mp-client-collection__line{
  display:grid;
  grid-template-columns:minmax(180px, 220px) 1fr;
  align-items:start;
  gap:14px;
  padding:10px 0;
  border-bottom:1px dashed #e8ece6;
}

.mp-client-collection__line:last-child{
  border-bottom:none;
}

.mp-client-collection__line span{
  color:#6a7891;
  font-weight:700;
  line-height:1.45;
}

.mp-client-collection__line strong{
  color:#5f6670;
  font-weight:800;
  line-height:1.45;
  text-align:left;
  word-break:break-word;
}

/* Mettre les montants encore plus lisibles */
.mp-client-collection__line strong,
.mp-mission-gain-inline,
.mp-mission-gain-inline__main,
.mp-mission-gain-inline__total{
  font-variant-numeric:tabular-nums;
}

/* Séparateur budget */
.mp-mission-separator{
  margin:18px 0 14px;
  border:none;
  border-top:2px solid #edf1eb;
}

/* Timeline plus propre */
.mp-client-timeline{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.mp-client-timeline__item{
  display:grid;
  grid-template-columns:28px 1fr;
  gap:14px;
  align-items:start;
}

.mp-client-timeline__dot{
  width:18px;
  height:18px;
  border-radius:50%;
  background:#099246;
  margin-top:4px;
  box-shadow:0 0 0 5px rgba(9,146,70,.12);
}

.mp-client-timeline__body{
  background:#f8fcf9;
  border:1px solid #dfeadf;
  border-radius:16px;
  padding:16px 18px;
}

.mp-client-timeline__title{
  font-size:16px;
  font-weight:800;
  color:#5e6672;
  margin-bottom:6px;
  text-transform:capitalize;
}

.mp-client-timeline__date{
  font-size:14px;
  color:#6f7d96;
  margin-bottom:6px;
}

/* Statut badge */
.mp-client-status{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:6px 14px;
  border-radius:999px;
  border:1px solid #9fd3a8;
  background:#ecf8ef;
  color:#0a8f4b;
  font-weight:800;
  font-size:14px;
  line-height:1;
}

/* Bloc actions centré et plus premium */
.mp-client-auth__foot{
  margin-top:8px;
}

.mp-client-auth__footCard{
  background:#fff;
  border:1px solid #dfe6dc;
  border-radius:18px;
  padding:24px 24px;
  box-shadow:0 8px 24px rgba(0,0,0,.04);
  text-align:center;
}

.mp-client-auth__footTitle{
  font-size:18px;
  font-weight:800;
  color:#0b9444;
  margin-bottom:6px;
}

.mp-client-auth__footText{
  color:#6f7d96;
  line-height:1.6;
  margin-bottom:14px;
}

.mp-client-dashboard__heroActions{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.mp-client-auth__footCard .mp-client-dashboard__heroActions{
  justify-content:center;
}

/* Boutons */
.mp-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:10px 18px;
  border-radius:14px;
  border:1px solid #cfd8e3;
  background:#fff;
  color:#5f6670;
  font-weight:800;
  text-decoration:none;
  box-shadow:0 2px 8px rgba(0,0,0,.03);
  transition:all .2s ease;
}

.mp-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(0,0,0,.06);
}

.mp-btn--primary{
  background:#0aa04b;
  border-color:#0aa04b;
  color:#fff;
}

.mp-btn--ghost{
  background:#fff;
  color:#687387;
  border-color:#cfd8e3;
}

/* Alert */
.mp-client-auth__alert{
  margin:14px 0 0;
  border-radius:14px;
  padding:14px 16px;
  border:1px solid #e5e7eb;
  background:#fff;
}

/* Puce pagination */
.mp-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:8px 14px;
  border-radius:999px;
  background:#f4f7f4;
  border:1px solid #dfe6dc;
  font-weight:700;
  color:#5f6670;
}

/* Données monétaires gain / total */
.mp-mission-gain-inline{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.mp-mission-gain-inline__main{
  font-weight:800;
  color:#0a8f4b;
}

.mp-mission-gain-inline__sep,
.mp-mission-gain-inline__total{
  font-weight:700;
  color:#5f6670;
}

/* Responsive */
@media (max-width: 980px){
  .mp-grid-2{
    grid-template-columns:1fr;
    gap:18px;
  }

  .mp-client-collection__line{
    grid-template-columns:1fr;
    gap:4px;
    padding:10px 0;
  }

  .mp-client-dashboard__hero{
    padding:22px 20px;
  }

  .mp-client-dashboard__section{
    padding:18px 16px;
  }

  .mp-client-collection__card{
    padding:14px 14px;
  }
}

/* =========================
   Bloc financier AGENT
========================= */

.mp-client-collection__card .mp-grid-2 > div:first-child{
    background:#f7fcf8;
    border:1px solid #cfe7d4;
    border-radius:14px;
    padding:16px 18px;
    position:relative;
}

/* titre virtuel agent */
.mp-client-collection__card .mp-grid-2 > div:first-child::before{
    content:"Agent expenses";
    position:absolute;
    top:-11px;
    left:16px;
    background:#0a9444;
    color:#fff;
    font-size:12px;
    font-weight:700;
    padding:4px 10px;
    border-radius:6px;
    letter-spacing:.3px;
}

/* lignes */
.mp-client-collection__card .mp-grid-2 > div:first-child .mp-client-collection__line{
    border-bottom:1px dashed #d6e7da;
}

/* montants plus visibles */
.mp-client-collection__card .mp-grid-2 > div:first-child strong{
    color:#08783a;
    font-weight:800;
}

/* montant total agent */
.mp-client-collection__card .mp-grid-2 > div:first-child .mp-client-collection__line:nth-last-child(2){
    font-size:17px;
}

/* paiement 50% */
.mp-client-collection__card .mp-grid-2 > div:first-child .mp-client-collection__line:last-child{
    font-size:16px;
    font-weight:700;
}