/* ═══════════════════════════════════════════════════════════
   EUROMAC2 Parcours unique v3 — CSS scopé sous .em2p
   Tokens du design system du site (Poppins, navy/lime/cyan).
   !important sur les propriétés structurantes pour résister
   aux thèmes et à Elementor.
   ═══════════════════════════════════════════════════════════ */

.em2p, .em2p *, .em2p *::before, .em2p *::after {
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none;
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
  line-height: 1.5 !important;
  -webkit-font-smoothing: antialiased;
  /* Neutralise les styles de thème qui tronquent ou transforment les textes
     (beaucoup de thèmes posent white-space:nowrap ou text-overflow sur les
     boutons : nos cartes sont des <button>). */
  white-space: normal !important;
  text-overflow: clip !important;
  text-transform: none;
  text-decoration: none;
  letter-spacing: normal;
  overflow-wrap: break-word;
  min-width: 0;
  text-shadow: none !important;
  box-shadow: none;
}
.em2p button, .em2p a { background-image: none !important; outline: none; }

.em2p {
  --em2p-navy: #0A3B5C;
  --em2p-navy-d: #073049;
  --em2p-blue: #1379B4;
  --em2p-cyan: #1FA7E6;
  --em2p-cyan-l: #7FCDEE;
  --em2p-lime: #8CC63F;
  --em2p-lime-d: #77AF2E;
  --em2p-ink: #0E2A38;
  --em2p-gray: #5A6B73;
  --em2p-line: #DFE7EC;
  --em2p-side: #F4F8FA;
  --em2p-tile: #EAF3F9;
  max-width: 1180px !important;
  margin: 0 auto !important;
  color: var(--em2p-ink) !important;
  font-size: 15px !important;
}

/* ── structure ── */
.em2p .em2p-stage {
  display: grid !important;
  grid-template-columns: 296px 1fr !important;
  min-height: 620px;
  background: #fff !important;
  border: 1px solid var(--em2p-line) !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  box-shadow: 0 20px 60px rgba(10, 59, 92, .10);
}
.em2p .em2p-rightcol { display: flex !important; flex-direction: column !important; min-width: 0 !important; }

/* ── colonne étapes ── */
.em2p .em2p-side {
  background: var(--em2p-side) !important;
  border-right: 1px solid var(--em2p-line) !important;
  padding: 32px 28px 26px !important;
  display: flex !important;
  flex-direction: column !important;
}
.em2p .em2p-side-title {
  font-size: 17px !important; font-weight: 700 !important; color: var(--em2p-navy) !important;
  letter-spacing: -.01em; line-height: 1.3; margin-bottom: 24px !important;
}
.em2p .em2p-steps { flex: 1 !important; }
.em2p .em2p-stp { display: flex !important; gap: 14px !important; position: relative; padding-bottom: 26px !important; }
.em2p .em2p-stp:last-child { padding-bottom: 0 !important; }
.em2p .em2p-stp::before {
  content: ""; position: absolute; left: 16px; top: 36px; bottom: 6px; width: 2px;
  background: var(--em2p-line); border-radius: 2px;
}
.em2p .em2p-stp:last-child::before { display: none; }
.em2p .em2p-stp.em2p-done::before { background: var(--em2p-lime); }
.em2p .em2p-n {
  width: 33px; height: 33px; min-width: 33px; border-radius: 10px !important;
  display: grid !important; place-items: center !important;
  font-size: 13px !important; font-weight: 600 !important;
  background: #fff !important; border: 1.5px solid var(--em2p-line) !important; color: #9AAAB3 !important;
  transition: .2s;
}
.em2p .em2p-stp.em2p-cur .em2p-n { background: var(--em2p-navy) !important; border-color: var(--em2p-navy) !important; color: #fff !important; box-shadow: 0 6px 14px rgba(10, 59, 92, .25); }
.em2p .em2p-stp.em2p-done .em2p-n { background: var(--em2p-lime) !important; border-color: var(--em2p-lime) !important; color: #fff !important; }
.em2p .em2p-t { padding-top: 3px !important; }
.em2p .em2p-t b { display: block; font-size: 14px !important; font-weight: 600 !important; color: #8C9BA4 !important; line-height: 1.3; }
.em2p .em2p-t small { display: block; font-size: 12px !important; color: #9AAAB3 !important; line-height: 1.4; margin-top: 1px !important; }
.em2p .em2p-stp.em2p-cur .em2p-t b { color: var(--em2p-navy) !important; }
.em2p .em2p-stp.em2p-done .em2p-t b { color: var(--em2p-ink) !important; }

/* ── bloc aide ── */
.em2p .em2p-help {
  background: #fff !important; border: 1px solid var(--em2p-line) !important; border-radius: 14px !important;
  padding: 18px 18px 16px !important; margin-top: 24px !important;
  box-shadow: 0 2px 4px rgba(10, 59, 92, .04), 0 10px 24px rgba(10, 59, 92, .06);
}
.em2p .em2p-hk { font-size: 11px !important; font-weight: 600 !important; letter-spacing: .14em; text-transform: uppercase; color: var(--em2p-cyan) !important; margin-bottom: 9px !important; }
.em2p .em2p-htel { display: block !important; font-size: 16px !important; font-weight: 700 !important; color: var(--em2p-navy) !important; text-decoration: none !important; }
.em2p .em2p-htel small { display: block; font-size: 11px !important; font-weight: 500 !important; color: #9AAAB3 !important; margin-bottom: 1px !important; }
.em2p .em2p-hmail { display: block !important; font-size: 13px !important; font-weight: 500 !important; color: var(--em2p-blue) !important; text-decoration: none !important; margin-top: 10px !important; word-break: break-all; }
.em2p .em2p-hmail:hover { text-decoration: underline !important; }
.em2p .em2p-hbtn {
  display: block !important; width: 100% !important; margin-top: 13px !important;
  font-size: 13px !important; font-weight: 600 !important; color: var(--em2p-navy) !important;
  background: #fff !important; border: 1.5px solid var(--em2p-navy) !important; border-radius: 999px !important;
  padding: 9px 12px !important; cursor: pointer !important; transition: .18s; text-align: center !important;
}
.em2p .em2p-hbtn:hover { background: var(--em2p-navy) !important; color: #fff !important; }

/* ── progression ── */
.em2p .em2p-progzone { padding: 22px clamp(24px, 4.5vw, 60px) 0 !important; background: #fff !important; }
.em2p .em2p-progline { display: flex !important; align-items: center !important; gap: 14px !important; }
.em2p .em2p-prog { flex: 1 !important; height: 6px !important; border-radius: 99px !important; background: #E4EBEF !important; overflow: hidden !important; }
.em2p .em2p-prog i {
  display: block !important; height: 100% !important; width: 20%;
  border-radius: 99px !important; position: relative; overflow: hidden;
  background: linear-gradient(90deg, var(--em2p-blue) 0%, var(--em2p-cyan) 55%, var(--em2p-lime) 100%) !important;
  transition: width .7s cubic-bezier(.22, .9, .3, 1);
}
.em2p .em2p-prog i::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .6) 50%, transparent 70%);
  background-size: 220% 100%;
  animation: em2p-shine 2.2s ease-in-out infinite;
}
@keyframes em2p-shine { 0% { background-position: 130% 0 } 100% { background-position: -90% 0 } }
@media (prefers-reduced-motion: reduce) { .em2p .em2p-prog i::after { animation: none } }
.em2p .em2p-stepct { font-size: 12px !important; font-weight: 600 !important; color: #9AAAB3 !important; white-space: nowrap !important; }

/* ── contenu ── */
.em2p .em2p-main {
  padding: clamp(20px, 2.6vw, 30px) clamp(24px, 4.5vw, 60px) clamp(28px, 3.6vw, 44px) !important;
  display: flex !important; flex-direction: column !important; background: #fff !important; flex: 1 !important;
}
.em2p .em2p-qt { font-weight: 700 !important; letter-spacing: -.02em; line-height: 1.18; color: var(--em2p-navy) !important; font-size: clamp(21px, 2.3vw, 28px) !important; }
.em2p .em2p-qt em { font-style: normal !important; color: var(--em2p-lime) !important; }
.em2p .em2p-qs { color: var(--em2p-gray) !important; font-size: 14px !important; margin-top: 7px !important; max-width: 560px; }
.em2p .em2p-backlk {
  background: none !important; border: none !important; font-size: 13px !important; font-weight: 600 !important;
  color: var(--em2p-gray) !important; cursor: pointer !important; margin-bottom: 12px !important;
  text-align: left !important; width: fit-content !important;
}
.em2p .em2p-backlk:hover { color: var(--em2p-navy) !important; }

/* ── options ── */
.em2p .em2p-opts { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)) !important; gap: 12px !important; margin-top: 24px !important; }
.em2p .em2p-opts.em2p-duo { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important; max-width: 660px; }
.em2p .em2p-opt {
  cursor: pointer !important; text-align: center !important; background: #fff !important;
  border: 1.5px solid var(--em2p-line) !important; border-radius: 14px !important;
  padding: 22px 14px 18px !important; transition: .18s cubic-bezier(.2, .8, .3, 1); position: relative;
}
.em2p .em2p-opt:hover { border-color: var(--em2p-cyan-l) !important; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(10, 59, 92, .08); }
.em2p .em2p-tile {
  width: 46px; height: 46px; border-radius: 13px !important; background: var(--em2p-tile) !important;
  color: var(--em2p-navy) !important; display: grid !important; place-items: center !important;
  margin: 0 auto 12px !important; transition: .18s;
}
.em2p .em2p-ot { display: block !important; font-size: 14px !important; font-weight: 600 !important; color: var(--em2p-navy) !important; line-height: 1.3; letter-spacing: -.01em; }
.em2p .em2p-od { display: block !important; font-size: 12px !important; color: var(--em2p-gray) !important; line-height: 1.45; margin-top: 3px !important; }
.em2p .em2p-opt.em2p-selected { border: 2px solid var(--em2p-blue) !important; padding: 21px 13px 17px !important; box-shadow: 0 12px 28px rgba(19, 121, 180, .14); }
.em2p .em2p-opt.em2p-selected .em2p-tile { background: var(--em2p-navy) !important; color: #fff !important; }
.em2p .em2p-opt.em2p-selected::after { content: "✓"; position: absolute; top: 9px; right: 11px; font-size: 13px; font-weight: 700; color: var(--em2p-lime-d); }

.em2p .em2p-altlk { font-size: 13px !important; color: var(--em2p-gray) !important; margin-top: 18px !important; }
.em2p .em2p-altlk a { color: var(--em2p-blue) !important; font-weight: 600 !important; cursor: pointer !important; text-decoration: underline !important; text-underline-offset: 3px; }
.em2p .em2p-altlk a:hover { color: var(--em2p-navy) !important; }

/* ── champs ── */
.em2p .em2p-fgrid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 14px !important; margin-top: 24px !important; max-width: 720px; }
.em2p .em2p-full { grid-column: 1 / -1 !important; }
.em2p .em2p-fld label { display: block !important; font-size: 12.5px !important; font-weight: 600 !important; color: var(--em2p-ink) !important; margin-bottom: 6px !important; }
.em2p .em2p-fld label em { font-style: normal !important; color: var(--em2p-lime-d) !important; }
.em2p .em2p-op { font-weight: 500 !important; color: #9AAAB3 !important; font-size: 11.5px !important; }
.em2p .em2p-fld input, .em2p .em2p-fld select, .em2p .em2p-fld textarea {
  width: 100% !important; border: 1.5px solid var(--em2p-line) !important; border-radius: 10px !important;
  padding: 11px 14px !important; font-size: 14.5px !important; color: var(--em2p-ink) !important;
  background: #fff !important; appearance: auto !important;
}
.em2p .em2p-fld input:focus, .em2p .em2p-fld select:focus, .em2p .em2p-fld textarea:focus {
  outline: none !important; border-color: var(--em2p-cyan) !important; box-shadow: 0 0 0 3px rgba(31, 167, 230, .12) !important;
}
.em2p .em2p-err { border-color: #D9534F !important; box-shadow: 0 0 0 3px rgba(217, 83, 79, .12) !important; }

/* ── zone facultative ── */
.em2p .em2p-optzone {
  grid-column: 1 / -1 !important; background: var(--em2p-side) !important;
  border: 1.5px dashed #C2D2DB !important; border-radius: 14px !important; padding: 18px 18px 16px !important;
}
.em2p .em2p-ozhead { display: flex !important; align-items: center !important; gap: 10px !important; margin-bottom: 4px !important; flex-wrap: wrap; }
.em2p .em2p-ozbadge {
  font-size: 10px !important; font-weight: 700 !important; letter-spacing: .14em; text-transform: uppercase;
  color: #fff !important; background: #9AAAB3 !important; border-radius: 999px !important; padding: 3px 10px !important;
}
.em2p .em2p-oztitle { font-size: 13.5px !important; font-weight: 600 !important; color: var(--em2p-navy) !important; }
.em2p .em2p-ozsub { font-size: 12px !important; color: var(--em2p-gray) !important; margin-bottom: 14px !important; }
.em2p .em2p-optzone .em2p-fld { margin-top: 12px !important; }
.em2p .em2p-optzone .em2p-fld:first-of-type { margin-top: 0 !important; }

/* upload */
.em2p .em2p-drop {
  border: 1.5px dashed #B9C8D1 !important; border-radius: 10px !important; padding: 14px !important;
  text-align: center !important; font-size: 13px !important; color: var(--em2p-gray) !important;
  cursor: pointer !important; background: #fff !important; transition: .15s;
}
.em2p .em2p-drop.em2p-dragover { border-color: var(--em2p-cyan) !important; background: var(--em2p-tile) !important; }
.em2p .em2p-dropin b { color: var(--em2p-blue) !important; }
.em2p .em2p-drophint { font-size: 11px !important; color: #9AAAB3 !important; margin-top: 3px !important; }
.em2p .em2p-filelist { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 8px !important; }
.em2p .em2p-filelist:empty { display: none; }
.em2p .em2p-file {
  display: inline-flex !important; align-items: center !important; gap: 7px !important;
  font-size: 12px !important; font-weight: 500 !important; color: var(--em2p-navy) !important;
  background: var(--em2p-tile) !important; border-radius: 7px !important; padding: 5px 10px !important;
}
.em2p .em2p-file i { font-style: normal !important; font-size: 10.5px !important; color: #9AAAB3 !important; }
.em2p .em2p-file button { background: none !important; border: none !important; color: #9AAAB3 !important; font-size: 15px !important; cursor: pointer !important; line-height: 1 !important; }
.em2p .em2p-file button:hover { color: #D9534F !important; }
.em2p .em2p-dropwarn {
  margin-top: 8px !important; font-size: 12px !important; text-align: left !important;
  color: #A94442 !important; background: #FDF0EF !important; border: 1px solid #F2C4C2 !important;
  border-radius: 8px !important; padding: 8px 11px !important; line-height: 1.5 !important;
}

/* rgpd + honeypot */
.em2p .em2p-rgpd { background: var(--em2p-side) !important; border-radius: 10px !important; padding: 12px 14px !important; transition: .15s; }
.em2p .em2p-rgpd label { display: flex !important; gap: 10px !important; align-items: flex-start !important; cursor: pointer !important; }
.em2p .em2p-rgpd input { margin-top: 4px !important; accent-color: var(--em2p-lime-d); width: auto !important; }
.em2p .em2p-rgpd span { font-size: 12px !important; color: var(--em2p-gray) !important; line-height: 1.5; }
.em2p .em2p-rgpd a { color: var(--em2p-blue) !important; }
.em2p .em2p-rgpd.em2p-rgpd-err { background: #FDF0EF !important; box-shadow: 0 0 0 1.5px rgba(217, 83, 79, .4) !important; }
.em2p .em2p-hp { position: absolute !important; left: -9999px !important; top: -9999px !important; height: 1px !important; width: 1px !important; opacity: 0 !important; pointer-events: none !important; }

/* bandeau erreur serveur */
.em2p .em2p-error-banner {
  margin-top: 14px !important; background: #FDF0EF !important; border: 1px solid #F2C4C2 !important;
  color: #A94442 !important; border-radius: 10px !important; padding: 11px 14px !important; font-size: 13px !important;
}

/* ── navigation bas ── */
.em2p .em2p-navrow { display: flex !important; justify-content: space-between !important; align-items: center !important; margin-top: auto !important; padding-top: 30px !important; gap: 14px !important; }
.em2p .em2p-btn-back {
  font-size: 13.5px !important; font-weight: 600 !important; color: var(--em2p-gray) !important;
  background: #fff !important; border: 1.5px solid var(--em2p-line) !important; border-radius: 999px !important;
  padding: 11px 26px !important; cursor: pointer !important; transition: .18s;
}
.em2p .em2p-btn-back:hover { color: var(--em2p-navy) !important; border-color: var(--em2p-navy) !important; }
.em2p .em2p-btn-next {
  font-size: 14.5px !important; font-weight: 700 !important; color: #fff !important;
  background: var(--em2p-lime) !important; border: none !important; border-radius: 999px !important;
  padding: 13px 34px !important; cursor: pointer !important;
  transition: .22s cubic-bezier(.2, .8, .3, 1); box-shadow: 0 10px 26px rgba(140, 198, 63, .32);
}
.em2p .em2p-btn-next:hover { background: var(--em2p-lime-d) !important; transform: translateY(-2px); }
.em2p .em2p-btn-next:disabled { background: #D7E2E8 !important; box-shadow: none !important; cursor: wait !important; transform: none !important; }
.em2p .em2p-spinner {
  display: inline-block; width: 13px; height: 13px; border: 2px solid rgba(255, 255, 255, .4);
  border-top-color: #fff; border-radius: 50%; animation: em2p-spin .7s linear infinite; vertical-align: -2px; margin-right: 4px;
}
@keyframes em2p-spin { to { transform: rotate(360deg) } }

/* shake erreurs */
@keyframes em2p-shake { 10%, 90% { transform: translateX(-1px) } 20%, 80% { transform: translateX(2px) } 30%, 50%, 70% { transform: translateX(-3px) } 40%, 60% { transform: translateX(3px) } }
.em2p .em2p-shake { animation: em2p-shake .5s cubic-bezier(.36, .07, .19, .97) both; }

/* ── succès (repli si pas de redirection) ── */
.em2p .em2p-succ { margin: auto !important; text-align: center !important; max-width: 560px; padding: 40px 0 !important; }
.em2p .em2p-succ h2 { font-weight: 700 !important; color: var(--em2p-navy) !important; letter-spacing: -.02em; font-size: 26px !important; margin-top: 16px !important; }
.em2p .em2p-succ p { color: var(--em2p-gray) !important; font-size: 14.5px !important; margin-top: 12px !important; }
.em2p .em2p-scontacts { display: flex !important; justify-content: center !important; gap: 14px !important; margin-top: 26px !important; flex-wrap: wrap; }
.em2p .em2p-sc { background: var(--em2p-side) !important; border-radius: 12px !important; padding: 14px 22px !important; text-align: left !important; }
.em2p .em2p-sc small { display: block; font-size: 10px !important; font-weight: 600 !important; letter-spacing: .14em; text-transform: uppercase; color: #9AAAB3 !important; margin-bottom: 2px !important; }
.em2p .em2p-sc b { font-size: 14.5px !important; color: var(--em2p-navy) !important; }

/* ── mobile ── */
.em2p .em2p-mtop { display: none !important; }
@media (max-width: 880px) {
  .em2p .em2p-stage { grid-template-columns: 1fr !important; }
  .em2p .em2p-side { display: none !important; }
  .em2p .em2p-mtop { display: block !important; border-bottom: 1px solid var(--em2p-line) !important; background: var(--em2p-side) !important; padding: 14px 18px 12px !important; }
  .em2p .em2p-crumbs { display: flex !important; gap: 6px !important; align-items: center !important; overflow-x: auto; scrollbar-width: none; }
  .em2p .em2p-crumbs::-webkit-scrollbar { display: none; }
  .em2p .em2p-cr { display: flex !important; align-items: center !important; gap: 6px !important; white-space: nowrap !important; font-size: 12px !important; font-weight: 600 !important; color: #9AAAB3 !important; }
  .em2p .em2p-cn {
    width: 22px; height: 22px; min-width: 22px; border-radius: 7px !important;
    display: grid !important; place-items: center !important; font-size: 11px !important;
    background: #fff !important; border: 1.5px solid var(--em2p-line) !important; color: #9AAAB3 !important;
  }
  .em2p .em2p-cr.em2p-cur { color: var(--em2p-navy) !important; }
  .em2p .em2p-cr.em2p-cur .em2p-cn { background: var(--em2p-navy) !important; border-color: var(--em2p-navy) !important; color: #fff !important; }
  .em2p .em2p-cr.em2p-done .em2p-cn { background: var(--em2p-lime) !important; border-color: var(--em2p-lime) !important; color: #fff !important; }
  .em2p .em2p-sep { color: #C4D0D8 !important; margin: 0 2px !important; }
  .em2p .em2p-mhelp { display: flex !important; align-items: center !important; gap: 14px !important; margin-top: 10px !important; font-size: 13px !important; }
  .em2p .em2p-mtel { font-weight: 700 !important; color: var(--em2p-navy) !important; text-decoration: none !important; }
  .em2p .em2p-mmsg { margin-left: auto !important; font-weight: 600 !important; color: var(--em2p-blue) !important; cursor: pointer !important; text-decoration: underline !important; text-underline-offset: 3px; }
  .em2p .em2p-fgrid { grid-template-columns: 1fr !important; }
  .em2p .em2p-navrow { flex-direction: column-reverse !important; align-items: stretch !important; }
  .em2p .em2p-btn-next, .em2p .em2p-btn-back { width: 100% !important; text-align: center !important; }
}
