/*
 * MEP — Entrée produit V6
 * Accueil public + portail Salariat / Indépendant / Mixte.
 */

/* =========================================================
   Header while the account has not chosen a workspace
   ========================================================= */

.mep-vnext-workspace-tag.is-setup{
  border-color:#dfe5e3;
  background:#f5f7f6;
  color:#65736d;
}

.mep-vnext-onboarding-nav-label{
  display:inline-flex;
  align-items:center;
  min-height:36px;
  padding:7px 10px;
  color:#7a8882;
  font-size:11px;
  font-weight:800;
}

/* =========================================================
   First-account portal
   ========================================================= */

.mep-mode-onboarding{
  width:min(1180px,100%);
  margin:0 auto;
  padding:34px 0 60px;
}

.mep-mode-onboarding-hero{
  max-width:850px;
  margin:0 auto 22px;
  text-align:center;
}

.mep-mode-onboarding-eyebrow{
  margin:0 0 8px;
  color:#597068;
  font-size:10px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.mep-mode-onboarding-hero h1{
  margin:0;
  color:#1c2c26;
  font-size:clamp(34px,5vw,54px);
  line-height:1.02;
  letter-spacing:-.045em;
}

.mep-mode-onboarding-hero>p:last-child{
  max-width:720px;
  margin:14px auto 0;
  color:#6f7e77;
  font-size:14px;
  line-height:1.6;
}

.mep-mode-onboarding-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}

.mep-mode-onboarding-card{
  position:relative;
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:455px;
  padding:22px;
  overflow:hidden;
  border:1px solid #dfe7e3;
  border-radius:20px;
  background:#fff;
  box-shadow:0 10px 28px rgba(26,46,39,.045);
}

.mep-mode-onboarding-card::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:5px;
}

.mep-mode-onboarding-card.is-salaried::before{
  background:#1f6d59;
}

.mep-mode-onboarding-card.is-independent::before{
  background:#315ed4;
}

.mep-mode-onboarding-card.is-mixed::before{
  background:linear-gradient(90deg,#1f6d59 0 46%,#315ed4 54% 100%);
}

.mep-mode-onboarding-card.is-salaried{
  background:
    radial-gradient(circle at 100% 0,rgba(31,109,89,.075),transparent 38%),
    #fff;
}

.mep-mode-onboarding-card.is-independent{
  background:
    radial-gradient(circle at 100% 0,rgba(49,94,212,.09),transparent 38%),
    #fff;
}

.mep-mode-onboarding-card.is-mixed{
  background:
    radial-gradient(circle at 5% 0,rgba(31,109,89,.055),transparent 35%),
    radial-gradient(circle at 100% 0,rgba(49,94,212,.065),transparent 38%),
    #fff;
}

.mep-mode-onboarding-icon{
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  margin-bottom:18px;
  border-radius:14px;
  background:#f1f5f3;
  font-size:22px;
}

.mep-mode-onboarding-card.is-independent .mep-mode-onboarding-icon{
  background:#edf2ff;
}

.mep-mode-onboarding-card.is-mixed .mep-mode-onboarding-icon{
  background:linear-gradient(135deg,#eaf6f1,#eef2ff);
}

.mep-mode-onboarding-kicker{
  margin:0 0 5px;
  color:#73817b;
  font-size:9px;
  font-weight:900;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.mep-mode-onboarding-card.is-salaried .mep-mode-onboarding-kicker{
  color:#1f6d59;
}

.mep-mode-onboarding-card.is-independent .mep-mode-onboarding-kicker{
  color:#315ed4;
}

.mep-mode-onboarding-card h2{
  margin:0;
  color:#273a32;
  font-size:21px;
  line-height:1.16;
  letter-spacing:-.025em;
}

.mep-mode-onboarding-card>div>p:last-child{
  margin:9px 0 0;
  color:#718078;
  font-size:12.5px;
  line-height:1.55;
}

.mep-mode-onboarding-card ul{
  display:grid;
  gap:7px;
  margin:20px 0 22px;
  padding:0;
  list-style:none;
}

.mep-mode-onboarding-card li{
  position:relative;
  padding-left:20px;
  color:#55675e;
  font-size:11.5px;
  font-weight:750;
}

.mep-mode-onboarding-card li::before{
  content:"✓";
  position:absolute;
  left:0;
  color:#1f6d59;
  font-weight:950;
}

.mep-mode-onboarding-card.is-independent li::before{
  color:#315ed4;
}

.mep-mode-onboarding-card>form{
  margin:auto 0 0;
}

.mep-mode-onboarding-card form{
  width:100%;
}

.mep-mode-onboarding-card button{
  width:100%;
  min-height:43px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 13px;
  border:0;
  border-radius:10px;
  color:#fff;
  background:#1f6d59;
  font:inherit;
  font-size:11.5px;
  font-weight:900;
  cursor:pointer;
  transition:.15s ease;
}

.mep-mode-onboarding-card.is-independent button{
  background:#315ed4;
}

.mep-mode-onboarding-card button:hover{
  filter:brightness(.95);
  transform:translateY(-1px);
}

.mep-mode-onboarding-mixed-actions{
  display:grid;
  gap:6px;
  margin-top:auto;
}

.mep-mode-onboarding-mixed-actions form:first-child button{
  background:#1f6d59;
}

.mep-mode-onboarding-mixed-actions form:last-child button{
  background:#315ed4;
}

.mep-mode-onboarding-note{
  display:flex;
  align-items:flex-start;
  gap:10px;
  width:min(760px,100%);
  margin:16px auto 0;
  padding:11px 13px;
  border:1px solid #e0e7e4;
  border-radius:12px;
  background:#f8faf9;
}

.mep-mode-onboarding-note p{
  margin:0;
  color:#6a7972;
  font-size:11px;
  line-height:1.45;
}

.mep-mode-onboarding-note strong{
  color:#3a5046;
}

/* =========================================================
   Public homepage
   ========================================================= */

.mep-public-product{
  padding-top:48px;
}

.mep-public-product-hero{
  grid-template-columns:minmax(0,1.03fr) minmax(390px,.97fr);
  min-height:490px;
}

.mep-public-product-hero h1{
  max-width:760px;
  font-size:clamp(45px,6vw,70px);
}

.mep-public-mode-chips{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:20px;
}

.mep-public-mode-chips span{
  display:inline-flex;
  align-items:center;
  min-height:31px;
  padding:6px 9px;
  border:1px solid #dfe6e3;
  border-radius:999px;
  background:#fff;
  color:#5b6963;
  font-size:10px;
  font-weight:900;
}

.mep-public-mode-chips .is-salaried{
  border-color:#cbe0d7;
  background:#edf7f3;
  color:#1e624f;
}

.mep-public-mode-chips .is-independent{
  border-color:#ccd7fb;
  background:#f0f3ff;
  color:#2c53bd;
}

.mep-public-mode-chips .is-mixed{
  background:linear-gradient(100deg,#f0f8f4,#f2f4ff);
  color:#425b62;
}

.mep-public-product-actions{
  margin-top:20px!important;
}

.mep-public-dual-card{
  position:relative;
  overflow:hidden;
  padding:24px;
  border:1px solid #dce5e1;
  border-radius:26px;
  background:
    radial-gradient(circle at 5% 0,rgba(31,109,89,.09),transparent 39%),
    radial-gradient(circle at 100% 0,rgba(49,94,212,.10),transparent 40%),
    #fff;
  box-shadow:0 18px 42px rgba(30,49,43,.09);
}

.mep-public-dual-card>header{
  padding-bottom:16px;
  border-bottom:1px solid #e6ece9;
}

.mep-public-dual-eyebrow{
  color:#667a72;
  font-size:9px;
  font-weight:950;
  letter-spacing:.12em;
}

.mep-public-dual-card h3{
  margin:6px 0 7px;
  color:#24372f;
  font-size:23px;
  line-height:1.12;
}

.mep-public-dual-card>header p{
  margin:0!important;
  color:#728179!important;
  font-size:12px!important;
  line-height:1.5!important;
}

.mep-public-dual-lanes{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:16px;
}

.mep-public-dual-lanes section{
  padding:13px;
  border:1px solid #e1e8e5;
  border-radius:14px;
  background:rgba(255,255,255,.84);
}

.mep-public-dual-lanes section.is-salaried{
  border-color:#cae0d7;
}

.mep-public-dual-lanes section.is-independent{
  border-color:#d1daf7;
}

.mep-public-dual-lanes section>div{
  display:flex;
  align-items:center;
  gap:7px;
  margin-bottom:10px;
}

.mep-public-dual-lanes strong{
  color:#30453b;
  font-size:12px;
}

.mep-public-dual-lanes ul{
  display:grid;
  gap:6px;
  margin:0;
  padding:0;
  list-style:none;
}

.mep-public-dual-lanes li{
  color:#6f7e77;
  font-size:10px;
}

.mep-public-dual-footer{
  display:flex;
  align-items:center;
  gap:9px;
  margin-top:9px;
  padding:10px 12px;
  border-radius:12px;
  background:linear-gradient(100deg,#eef8f4,#f0f3ff);
}

.mep-public-dual-footer p,
.mep-public-dual-footer strong,
.mep-public-dual-footer small{
  display:block;
  margin:0!important;
}

.mep-public-dual-footer strong{
  color:#3e5149;
  font-size:11px;
}

.mep-public-dual-footer small{
  margin-top:2px!important;
  color:#74837c;
  font-size:9.5px;
}

.mep-public-workspaces{
  margin-top:22px;
}

.mep-public-section-head{
  max-width:780px;
  margin-bottom:13px;
}

.mep-public-section-head h2{
  margin:5px 0 5px;
  color:#21332b;
  font-size:clamp(27px,4vw,39px);
  line-height:1.08;
  letter-spacing:-.035em;
}

.mep-public-section-head>p:last-child{
  margin:0;
  color:#77857f;
  font-size:12.5px;
}

.mep-public-workspaces-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}

.mep-public-workspaces-grid article{
  min-width:0;
  padding:20px;
  border:1px solid #dfe7e3;
  border-radius:18px;
  background:#fff;
  box-shadow:0 6px 20px rgba(29,49,42,.025);
}

.mep-public-workspaces-grid article.is-salaried{
  border-top:4px solid #1f6d59;
}

.mep-public-workspaces-grid article.is-independent{
  border-top:4px solid #315ed4;
}

.mep-public-workspaces-grid article.is-mixed{
  border-top:4px solid transparent;
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(90deg,#1f6d59,#315ed4) border-box;
}

.mep-public-workspace-icon{
  display:grid;
  place-items:center;
  width:41px;
  height:41px;
  margin-bottom:13px;
  border-radius:12px;
  background:#f1f5f3;
  font-size:19px;
}

.mep-public-workspaces-grid article.is-independent .mep-public-workspace-icon{
  background:#edf2ff;
}

.mep-public-workspaces-grid article.is-mixed .mep-public-workspace-icon{
  background:linear-gradient(135deg,#eaf6f1,#eef2ff);
}

.mep-public-workspaces-grid h3{
  margin:5px 0 7px;
  color:#263a31;
  font-size:18px;
  line-height:1.2;
}

.mep-public-workspaces-grid article>p:not(.vnext-eyebrow){
  margin:0;
  color:#74827b;
  font-size:11.5px;
  line-height:1.55;
}

.mep-public-workspaces-grid article>div{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin-top:15px;
}

.mep-public-workspaces-grid article>div span{
  padding:4px 6px;
  border-radius:6px;
  background:#f3f6f5;
  color:#65746d;
  font-size:9px;
  font-weight:800;
}

.mep-public-shared-features{
  margin-top:12px;
}

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

@media(max-width:980px){
  .mep-mode-onboarding-grid{
    grid-template-columns:1fr;
  }

  .mep-mode-onboarding-card{
    min-height:0;
  }

  .mep-public-product-hero{
    grid-template-columns:1fr;
  }

  .mep-public-dual-card{
    max-width:680px;
  }

  .mep-public-workspaces-grid{
    grid-template-columns:1fr;
  }
}

@media(max-width:780px){
  .mep-vnext-onboarding-nav-label{
    display:none;
  }

  .mep-mode-onboarding{
    padding:24px 0 90px;
  }

  .mep-mode-onboarding-hero{
    text-align:left;
  }

  .mep-public-product{
    padding-top:28px;
  }

  .mep-public-product-hero{
    gap:22px;
  }
}

@media(max-width:560px){
  .mep-mode-onboarding-hero h1{
    font-size:36px;
  }

  .mep-mode-onboarding-card{
    padding:18px;
    border-radius:16px;
  }

  .mep-public-product-hero h1{
    font-size:41px;
  }

  .mep-public-dual-card{
    padding:17px;
    border-radius:19px;
  }

  .mep-public-dual-lanes{
    grid-template-columns:1fr;
  }

  .mep-public-workspaces-grid article{
    padding:17px;
  }
}