/*
 * MEP — Harmonisation globale V2
 * Finition desktop/mobile au-dessus de mep-harmonized.css.
 */

/* =========================================================
   Header desktop : moins chargé, menu "Plus" cohérent
   ========================================================= */

@media (min-width:1021px){
  body.mep-app .mep-vnext-header-inner{
    max-width:1420px!important;
  }

  body.mep-app .mep-vnext-navigation{
    position:relative;
    gap:2px!important;
  }

  body.mep-app .mep-vnext-navigation>a.is-desktop-primary{
    min-height:36px;
    display:inline-flex;
    align-items:center;
    padding:7px 8px!important;
    font-size:12px!important;
    font-weight:780!important;
  }

  .mep-vnext-more{
    position:relative;
    flex:0 0 auto;
  }

  .mep-vnext-more>summary{
    min-height:36px;
    display:flex;
    align-items:center;
    gap:5px;
    box-sizing:border-box;
    padding:7px 8px;
    border-radius:9px;
    color:#56635e;
    font-size:12px;
    line-height:1;
    font-weight:780;
    list-style:none;
    cursor:pointer;
    user-select:none;
    transition:.15s ease;
  }

  .mep-vnext-more>summary::-webkit-details-marker{
    display:none;
  }

  .mep-vnext-more>summary span{
    color:#89958f;
    font-size:10px;
    transition:transform .15s ease;
  }

  .mep-vnext-more:hover>summary,
  .mep-vnext-more[open]>summary{
    background:#f2f6f4;
    color:var(--mep-accent-dark);
  }

  .mep-vnext-more.is-active>summary{
    background:var(--mep-accent-soft);
    color:var(--mep-accent-dark);
    box-shadow:inset 0 0 0 1px rgba(var(--mep-accent-rgb),.08);
  }

  .mep-vnext-more[open]>summary span{
    transform:rotate(180deg);
  }

  .mep-vnext-more>div{
    position:absolute;
    top:calc(100% + 8px);
    left:0;
    z-index:5400;
    width:245px;
    padding:7px;
    border:1px solid var(--mep-ui-line);
    border-radius:12px;
    background:#fff;
    box-shadow:0 18px 42px rgba(21,43,35,.14);
  }

  .mep-vnext-more>div a{
    display:block!important;
    width:100%;
    box-sizing:border-box;
    margin:0!important;
    padding:9px 10px!important;
    border-radius:8px!important;
    color:#485850!important;
    font-size:11.5px!important;
    font-weight:750!important;
    text-decoration:none;
  }

  .mep-vnext-more>div a:hover,
  .mep-vnext-more>div a.is-active{
    background:var(--mep-accent-soft)!important;
    color:var(--mep-accent-dark)!important;
  }
}

@media (max-width:1020px){
  .mep-vnext-more.is-desktop-primary{
    display:none!important;
  }
}

/* =========================================================
   Cycle du poste : une seule navigation pour 4 modules
   ========================================================= */

.mep-role-cycle-nav{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:6px;
  margin:0 0 12px;
  padding:5px;
  border:1px solid var(--mep-ui-line);
  border-radius:13px;
  background:#fff;
  box-shadow:0 5px 16px rgba(28,48,41,.025);
}

.mep-role-cycle-nav a{
  min-width:0;
  display:grid;
  grid-template-columns:31px minmax(0,1fr);
  grid-template-rows:auto auto;
  column-gap:8px;
  align-items:center;
  padding:8px 9px;
  border:1px solid transparent;
  border-radius:9px;
  color:#627169;
  text-decoration:none;
  transition:.15s ease;
}

.mep-role-cycle-nav a>span{
  grid-row:1/3;
  width:31px;
  height:31px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:#f1f5f3;
  font-size:14px;
}

.mep-role-cycle-nav a>b{
  overflow:hidden;
  color:#40524a;
  font-size:10.5px;
  line-height:1.15;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.mep-role-cycle-nav a>small{
  overflow:hidden;
  color:#8a9690;
  font-size:8.5px;
  line-height:1.15;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.mep-role-cycle-nav a:hover{
  border-color:#e1e8e5;
  background:#f8faf9;
}

.mep-role-cycle-nav a.is-active{
  border-color:rgba(var(--mep-accent-rgb),.16);
  background:var(--mep-accent-soft);
}

.mep-role-cycle-nav a.is-active>span{
  background:#fff;
  box-shadow:0 2px 8px rgba(var(--mep-accent-rgb),.08);
}

.mep-role-cycle-nav a.is-active>b{
  color:var(--mep-accent-dark);
}

/* =========================================================
   Desktop density : gros modules
   ========================================================= */

@media (min-width:1050px){
  body.mep-app :is(
    .salaried-network-layout,
    .salaried-opportunity-layout,
    .salaried-role-layout,
    .salaried-closure-grid,
    .salaried-comp-layout,
    .mep-crm-shell,
    .mep-mission-shell,
    .mep-doc-shell,
    .mep-planner-workspace,
    .mep-sim-layout
  ){
    gap:10px!important;
  }

  body.mep-app :is(
    .salaried-network-panel,
    .salaried-role-form-shell,
    .salaried-closure-preview,
    .salaried-position-compensation,
    .mep-mission-form-panel,
    .mep-doc-form-panel,
    .mep-sim-form-panel
  ){
    top:82px!important;
  }
}

/* Same visual rhythm for primary sections. */
body.mep-app :is(
  .salaried-position-section-head,
  .mep-independent-panel-head,
  .mep-finance-panel-head,
  .mep-forecast-panel-head,
  .mep-sim-panel-head,
  .mep-health-panel-head,
  .mep-crm-panel-title
){
  margin-bottom:9px!important;
  padding-bottom:8px;
  border-bottom:1px solid #edf1ef;
}

body.mep-app :is(
  .salaried-position-section-head,
  .mep-independent-panel-head,
  .mep-finance-panel-head,
  .mep-forecast-panel-head,
  .mep-sim-panel-head,
  .mep-health-panel-head
) h2,
body.mep-app .mep-crm-panel-title h2{
  color:#2d4037!important;
  letter-spacing:-.015em;
}

body.mep-app :is(
  .salaried-position-section-head,
  .mep-independent-panel-head,
  .mep-finance-panel-head,
  .mep-forecast-panel-head,
  .mep-sim-panel-head,
  .mep-health-panel-head
) p:not(.home-eyebrow):not(.mep-work-eyebrow){
  color:#7b8983!important;
}

/* Hero action groups stay compact instead of taking over the page. */
body.mep-app :is(
  .salaried-opportunity-hero-actions,
  .mep-crm-hero-actions,
  .vnext-hero-actions
){
  display:flex!important;
  align-items:center;
  justify-content:flex-end;
  gap:6px!important;
  flex-wrap:wrap;
}

/* KPI height alignment. */
body.mep-app :is(
  .vnext-kpi,
  .salaried-network-kpis article,
  .salaried-offer-kpis article,
  .salaried-planner-kpis article,
  .salaried-position-summary article,
  .salaried-role-kpis a,
  .salaried-evolution-kpis article,
  .salaried-closure-kpis article,
  .mep-independent-dashboard-kpis article,
  .mep-crm-kpis article,
  .mep-mission-kpis article,
  .mep-doc-kpis article,
  .mep-finance-kpis article,
  .mep-planner-kpis article,
  .mep-forecast-kpis article,
  .mep-sim-kpis article
){
  min-height:76px;
  box-sizing:border-box;
}

/* =========================================================
   Toolbars and filters
   ========================================================= */

body.mep-app :is(
  .salaried-opportunity-toolbar,
  .salaried-network-toolbar,
  .salaried-role-toolbar,
  .salaried-planner-controls,
  .mep-crm-toolbar,
  .mep-finance-period
){
  border-color:var(--mep-ui-line)!important;
  border-radius:11px!important;
}

body.mep-app :is(
  .salaried-opportunity-toolbar,
  .salaried-network-toolbar,
  .salaried-role-toolbar
){
  padding:6px!important;
  background:#fff!important;
  box-shadow:0 4px 14px rgba(28,48,41,.02);
}

body.mep-app :is(
  .salaried-opportunity-toolbar,
  .salaried-network-toolbar,
  .salaried-role-toolbar,
  .mep-crm-toolbar
) :is(button,a){
  min-height:36px;
}

/* =========================================================
   Lists, cards and status labels
   ========================================================= */

body.mep-app :is(
  .salaried-opportunity-card,
  .salaried-network-card,
  .mep-crm-card,
  .mep-mission-card,
  .document-card
){
  overflow:hidden;
}

body.mep-app :is(
  .salaried-opportunity-stage-pill,
  .salaried-network-tags,
  .mep-crm-stage-pill,
  .mep-mission-status-pill,
  .document-status,
  .document-usage
){
  border-radius:999px!important;
  font-weight:850!important;
}

body.mep-app :is(
  .salaried-network-card-actions,
  .salaried-opportunity-actions,
  .mep-mission-card-actions,
  .document-card-actions
){
  border-top-color:#edf1ef!important;
  background:#fbfcfc!important;
}

/* =========================================================
   Form panels : unified compact "premium" look
   ========================================================= */

body.mep-app :is(
  .salaried-opportunity-form-panel,
  .salaried-network-panel,
  .salaried-position-form,
  .salaried-role-form-shell,
  .salaried-comp-form,
  .salaried-review-form,
  .salaried-request-form,
  .salaried-closure-form,
  .mep-mission-form-panel,
  .mep-doc-form-panel,
  .mep-planner-form-panel,
  .mep-sim-form-panel
){
  border-radius:14px!important;
}

body.mep-app :is(
  .salaried-opportunity-form,
  .salaried-network-form,
  .salaried-position-form,
  .salaried-role-form,
  .salaried-comp-form,
  .salaried-review-form,
  .salaried-request-form,
  .salaried-closure-form,
  .mep-mission-form,
  .mep-doc-form,
  .mep-planner-form,
  .mep-sim-form
){
  gap:7px!important;
}

body.mep-app :is(
  .salaried-opportunity-fields.two,
  .salaried-planner-fields.two,
  .mep-mission-fields.two,
  .mep-sim-fields.two
){
  gap:7px!important;
}

body.mep-app :is(
  .salaried-opportunity-fields.three,
  .mep-sim-fields.three
){
  gap:7px!important;
}

/* =========================================================
   Independent pages : stop feeling like separate mini-sites
   ========================================================= */

body.mep-app .mep-independent-foundation :is(
  .mep-crm-page,
  .mep-missions-page,
  .mep-finance-page,
  .mep-planner-page,
  .mep-forecast-page,
  .mep-sim-page,
  .mep-health-page
){
  display:grid;
  gap:10px;
}

body.mep-app .mep-independent-foundation :is(
  .mep-crm-kpis,
  .mep-mission-kpis,
  .mep-finance-kpis,
  .mep-planner-kpis,
  .mep-forecast-kpis,
  .mep-sim-kpis
){
  margin-bottom:0!important;
}

body.mep-app .mep-independent-foundation :is(
  .mep-crm-stage,
  .mep-finance-panel,
  .mep-forecast-chart-panel,
  .mep-health-module,
  .mep-sim-result-panel
){
  border-radius:12px!important;
}

body.mep-app .mep-independent-foundation :is(
  .mep-crm-empty,
  .mep-finance-empty,
  .mep-planner-day-empty,
  .mep-sim-empty,
  .mep-health-all-good
){
  border-radius:10px!important;
}

/* =========================================================
   Mon compte : alignement avec le nouveau produit
   ========================================================= */

body.mep-app .account-page{
  padding-top:4px;
  padding-bottom:30px;
}

body.mep-app .account-page-heading{
  margin-bottom:12px!important;
  padding:20px 22px!important;
  border:1px solid var(--mep-ui-line)!important;
  border-radius:18px!important;
  background:
    radial-gradient(circle at 100% 0,rgba(var(--mep-accent-rgb),.10),transparent 38%),
    linear-gradient(145deg,#fff,var(--mep-accent-soft-2))!important;
  box-shadow:0 8px 24px rgba(28,49,42,.035)!important;
}

body.mep-app :is(
  .mep-work-mode-settings,
  .account-card,
  .account-plus-card,
  .account-onboarding,
  .account-security-card,
  .account-formations-card
){
  border:1px solid var(--mep-ui-line)!important;
  border-radius:14px!important;
  background:#fff!important;
  box-shadow:0 5px 18px rgba(28,48,41,.025)!important;
}

body.mep-app .mep-work-mode-option{
  border-color:#e1e8e5!important;
  border-radius:11px!important;
}

body.mep-app .mep-work-mode-option:hover{
  border-color:rgba(var(--mep-accent-rgb),.24)!important;
  background:var(--mep-accent-soft-2)!important;
}

body.mep-app .account-progress span{
  background:var(--mep-accent)!important;
}

/* =========================================================
   Scroll and long content polish
   ========================================================= */

body.mep-app :is(
  .salaried-opportunity-board,
  .mep-crm-pipeline,
  .salaried-position-tabs,
  .mep-independent-nav,
  .salaried-review-list,
  .salaried-request-list
){
  scrollbar-width:thin;
  scrollbar-color:#cbd7d2 transparent;
}

body.mep-app :is(
  .salaried-opportunity-board,
  .mep-crm-pipeline,
  .salaried-position-tabs,
  .mep-independent-nav
)::-webkit-scrollbar{
  height:7px;
}

body.mep-app :is(
  .salaried-opportunity-board,
  .mep-crm-pipeline,
  .salaried-position-tabs,
  .mep-independent-nav
)::-webkit-scrollbar-thumb{
  border-radius:999px;
  background:#cbd7d2;
}

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

@media(max-width:900px){
  .mep-role-cycle-nav{
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x proximity;
  }

  .mep-role-cycle-nav a{
    flex:0 0 190px;
    scroll-snap-align:start;
  }
}

@media(max-width:700px){
  .mep-role-cycle-nav{
    margin-inline:-1px;
    padding:4px;
  }

  .mep-role-cycle-nav a{
    flex-basis:165px;
    grid-template-columns:28px minmax(0,1fr);
    padding:7px;
  }

  .mep-role-cycle-nav a>span{
    width:28px;
    height:28px;
  }

  body.mep-app :is(
    .salaried-opportunity-hero-actions,
    .mep-crm-hero-actions,
    .vnext-hero-actions
  ){
    width:100%;
    justify-content:flex-start;
  }
}

@media(max-width:560px){
  body.mep-app .account-page-heading{
    padding:16px!important;
    border-radius:15px!important;
  }

  .mep-role-cycle-nav a{
    flex-basis:150px;
  }

  .mep-role-cycle-nav a>small{
    display:none;
  }
}


/* =========================================================
   V3 static-audit polish
   ========================================================= */

/* Strong, consistent keyboard focus without changing mouse UI. */
body.mep-app :is(
  a,
  button,
  summary,
  input,
  select,
  textarea
):focus-visible{
  outline:3px solid rgba(var(--mep-accent-rgb),.20)!important;
  outline-offset:2px!important;
}

body.mep-app .mep-vnext-navigation a:focus-visible,
body.mep-app .mep-vnext-more>summary:focus-visible,
body.mep-app .mep-vnext-account summary:focus-visible{
  border-radius:9px;
}

/* Make popup layers consistent and prevent hidden menus below content. */
body.mep-app .mep-vnext-more>div,
body.mep-app .mep-vnext-account>div{
  isolation:isolate;
}

body.mep-app .mep-vnext-more[open]>div,
body.mep-app .mep-vnext-account[open]>div{
  animation:mep-pop-in .12s ease-out both;
}

@keyframes mep-pop-in{
  from{opacity:0;transform:translateY(-4px)}
  to{opacity:1;transform:translateY(0)}
}

/* Bottom mobile nav: five genuinely daily actions in both workspaces. */
@media(max-width:780px){
  body.mep-app{
    padding-bottom:76px;
  }

  body.mep-app .mep-vnext-mobile-nav{
    min-height:62px;
    padding:5px max(5px,env(safe-area-inset-right)) calc(5px + env(safe-area-inset-bottom)) max(5px,env(safe-area-inset-left));
    gap:2px;
  }

  body.mep-app .mep-vnext-mobile-nav a{
    min-height:48px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:2px;
    padding:4px 3px;
    border-radius:10px;
    font-size:15px;
  }

  body.mep-app .mep-vnext-mobile-nav a.is-active{
    background:var(--mep-accent-soft);
  }

  body.mep-app .mep-vnext-mobile-nav a span{
    line-height:1;
  }

  body.mep-app .mep-vnext-mobile-nav a small{
    font-size:8.5px;
    font-weight:850;
    line-height:1.05;
  }
}

/* Tables retain context while horizontally scrolling. */
body.mep-app .salaried-offer-comparison-table{
  border-color:var(--mep-ui-line)!important;
  scrollbar-width:thin;
  scrollbar-color:#cbd7d2 transparent;
}

body.mep-app .salaried-offer-comparison-table th:first-child{
  box-shadow:6px 0 12px rgba(27,47,40,.035);
}

body.mep-app .salaried-offer-comparison-table tr.is-total th,
body.mep-app .salaried-offer-comparison-table tr.is-total td{
  background:var(--mep-accent-soft)!important;
  color:var(--mep-accent-dark)!important;
}

/* Independent simulator: current scenario follows the active workspace color. */
body.mep-app .mep-sim-sensitivity-table>div.is-current{
  background:var(--mep-accent-soft)!important;
  color:var(--mep-accent-dark)!important;
}

/* Empty states from both universes now have one visual language. */
body.mep-app :is(
  .salaried-position-empty,
  .salaried-role-empty,
  .mep-crm-empty,
  .mep-finance-empty,
  .mep-planner-day-empty,
  .mep-sim-empty,
  .mep-health-all-good
){
  border:1px dashed var(--mep-ui-line-strong)!important;
  background:var(--mep-ui-surface-soft)!important;
  color:var(--mep-ui-muted)!important;
}

/* Avoid huge textarea walls on desktop while keeping them freely resizable. */
@media(min-width:900px){
  body.mep-app :is(
    .salaried-review-form,
    .salaried-request-form,
    .salaried-closure-form,
    .salaried-role-form,
    .mep-mission-form,
    .mep-doc-form
  ) textarea{
    min-height:74px!important;
    max-height:260px;
  }
}

/* Headings do not collide with controls in dense panels. */
body.mep-app .salaried-position-section-head>div,
body.mep-app .mep-independent-panel-head>div{
  min-width:0;
}

body.mep-app .salaried-position-section-head h2,
body.mep-app .mep-independent-panel-head h2{
  overflow-wrap:anywhere;
}

/* Native details and custom animations respect motion preferences. */
@media(prefers-reduced-motion:reduce){
  body.mep-app *,
  body.mep-app *::before,
  body.mep-app *::after{
    scroll-behavior:auto!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}

/* Small-phone role-cycle navigation: active step remains obvious. */
@media(max-width:420px){
  .mep-role-cycle-nav a{
    flex-basis:132px;
  }

  .mep-role-cycle-nav a>b{
    font-size:10px;
  }

  body.mep-app .mep-vnext-mobile-nav a small{
    font-size:8px;
  }
}