/* ==========================================================================
   Macompta — Plateforme Agréée · Tunnel d'inscription
   Design tokens (from the Macompta design system) + component styles.
   The DC-runtime prototype used style-hover/style-focus/{{bindings}};
   here those are reproduced with real CSS + a vanilla-JS state machine.
   ========================================================================== */

/* ----- Product typeface: Inter (canonical family names from the kit) ----- */
@font-face { font-family: "Inter-Regular";  font-weight: 400; font-display: swap; src: url("https://cdn.jsdelivr.net/npm/@fontsource/inter/files/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter-Medium";   font-weight: 500; font-display: swap; src: url("https://cdn.jsdelivr.net/npm/@fontsource/inter/files/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter-SemiBold"; font-weight: 600; font-display: swap; src: url("https://cdn.jsdelivr.net/npm/@fontsource/inter/files/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter-Bold";     font-weight: 700; font-display: swap; src: url("https://cdn.jsdelivr.net/npm/@fontsource/inter/files/inter-latin-700-normal.woff2") format("woff2"); }

:root {
  /* Brand & action */
  --mc-color-primary:        #E6197B;
  --mc-color-primary-hover:  #AC125C;
  --mc-color-primary-soft:   rgba(230, 25, 123, 0.05);

  /* Neutrals */
  --mc-color-black:          #1F2933;
  --mc-color-white:          #FCFCFF;
  --mc-color-grey-light:     #E9E9E9;
  --mc-color-grey-medium:    #CBD2D9;
  --mc-color-grey-dark:      #9AA5B1;

  /* Surfaces */
  --mc-surface-violet-x-light: #F3F4FD;
  --mc-surface-violet-light:   #F5F1FF;
  --mc-surface-blue-light:     #E9EFFF;

  /* Status */
  --mc-color-success-strong: #23992D;
  --mc-color-warning:        #FF8253;
  --mc-color-error:          #FF5D5D;

  /* Signature gradient */
  --mc-gradient-horizontal: linear-gradient(to right, #E87437 0%, #DB1A7C 50%, #6603E7 100%);

  /* Typography */
  --mc-font-bold:     "Inter-Bold", Helvetica, Arial, sans-serif;
  --mc-font-semibold: "Inter-SemiBold", Helvetica, Arial, sans-serif;
  --mc-font-medium:   "Inter-Medium", Helvetica, Arial, sans-serif;
  --mc-font-regular:  "Inter-Regular", Helvetica, Arial, sans-serif;

  /* Radius */
  --mc-radius-sm:    0.3125rem;
  --mc-radius-md:    0.5rem;
  --mc-radius-lg:    0.75rem;

  /* Shadow */
  --mc-shadow-bottom-pink: 0 0.375rem 0.9375rem rgba(230, 25, 123, 0.3);
}

/* ==========================================================================
   Base
   ========================================================================== */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: var(--mc-surface-violet-x-light); }
input, select, textarea, button { font-family: inherit; }
input::placeholder, textarea::placeholder { color: var(--mc-color-grey-dark); opacity: 1; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--mc-color-primary); outline-offset: 3px; border-radius: 4px; }

[data-invalid="true"] { border-color: var(--mc-color-error) !important; background: #FFF5F5 !important; }

[hidden] { display: none !important; }

/* Gradient headline accent */
.mc-gradient-text {
  background: var(--mc-gradient-horizontal);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ==========================================================================
   Stepper
   ========================================================================== */
[data-stepcircle] { width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--mc-color-grey-light); display: flex; align-items: center; justify-content: center; font-family: var(--mc-font-semibold); font-size: 15px; background: #fff; color: var(--mc-color-grey-dark); transition: all .25s ease-out; flex: 0 0 auto; }
[data-stepcircle][data-state="done"] { background: var(--mc-color-primary); border-color: var(--mc-color-primary); color: #fff; }
[data-stepcircle][data-state="active"] { border-color: var(--mc-color-primary); color: var(--mc-color-primary); box-shadow: 0 0 0 4px rgba(230,25,123,.12); }
[data-steplabel] { font-family: var(--mc-font-medium); font-size: 12.5px; color: var(--mc-color-grey-dark); white-space: normal; max-width: 84px; text-align: center; line-height: 1.2; }
[data-steplabel][data-state="active"] { color: var(--mc-color-black); font-family: var(--mc-font-semibold); }
[data-steplabel][data-state="done"] { color: var(--mc-color-black); }
[data-stepbar] { height: 2px; background: var(--mc-color-grey-light); border-radius: 2px; flex: 1 1 auto; margin: 18px 6px 0; }
[data-stepbar][data-state="done"] { background: var(--mc-color-primary); }

/* ==========================================================================
   Choice rows (Besoin)
   ========================================================================== */
[data-choice] { display: flex; gap: 14px; align-items: center; padding: 16px 18px; border: 1px solid var(--mc-color-grey-light); border-radius: 12px; background: #fff; cursor: pointer; width: 100%; text-align: left; transition: border-color .2s ease-out, background-color .2s ease-out, box-shadow .2s ease-out; }
[data-choice]:hover { border-color: var(--mc-color-grey-medium); }
[data-choice][data-selected="true"] { border-color: var(--mc-color-primary); background: #FEF1F7; box-shadow: 0 0 0 3px rgba(230,25,123,.10); }
[data-radio] { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--mc-color-grey-medium); flex: 0 0 auto; position: relative; transition: border-color .2s ease-out; }
[data-radio][data-selected="true"] { border-color: var(--mc-color-primary); }
[data-radio][data-selected="true"]::after { content: ''; position: absolute; top: 4px; left: 4px; right: 4px; bottom: 4px; border-radius: 50%; background: var(--mc-color-primary); }

/* ==========================================================================
   Status options (Entreprise)
   ========================================================================== */
[data-statusopt] { flex: 1 1 150px; display: flex; flex-direction: column; gap: 3px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--mc-color-grey-light); border-radius: 10px; background: #fff; cursor: pointer; }
[data-statusopt]:hover { border-color: var(--mc-color-grey-medium); }
[data-statusopt][data-selected="true"] { border-color: var(--mc-color-primary); background: #FEF1F7; box-shadow: 0 0 0 3px rgba(230,25,123,.10); }

/* Segmented control */
[data-segwrap] { display: inline-flex; background: var(--mc-surface-violet-x-light); border-radius: 9999px; padding: 4px; gap: 2px; max-width: 100%; }
[data-segbtn] { border: none; background: none; padding: 9px 18px; border-radius: 9999px; font-family: var(--mc-font-medium); font-size: 14px; color: #6B7280; cursor: pointer; }
[data-segbtn]:hover { color: var(--mc-color-black); }
[data-segbtn][data-selected="true"] { background: #fff; color: var(--mc-color-black); box-shadow: 0 1px 2px rgba(0,0,0,.10); font-family: var(--mc-font-semibold); }

/* Company suggestion rows */
.mc-suggestion { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 11px 14px; background: #fff; border: none; border-bottom: 1px solid var(--mc-color-grey-light); cursor: pointer; transition: background-color .15s ease-out; }
.mc-suggestion:last-child { border-bottom: none; }
.mc-suggestion:hover { background: var(--mc-surface-violet-light); }

/* ==========================================================================
   Form fields — real :focus (replaces DC style-focus)
   ========================================================================== */
.mc-input {
  width: 100%; padding: 12px 14px; border: 1px solid var(--mc-color-grey-light);
  border-radius: 8px; font-family: var(--mc-font-regular); font-size: 16px;
  color: var(--mc-color-black); background: #fff; outline: none;
  transition: border-color .2s ease-out, background-color .2s ease-out, box-shadow .2s ease-out;
}
.mc-input:focus {
  border: 1px solid var(--mc-color-primary);
  background: var(--mc-surface-violet-light);
  box-shadow: 0 0 0 3px rgba(230,25,123,.12);
}
.mc-input--icon { padding-left: 40px; }
.mc-input--pw { padding-right: 46px; }
.mc-input--select { padding-right: 40px; appearance: none; -webkit-appearance: none; cursor: pointer; }

/* ==========================================================================
   Buttons — real :hover (replaces DC style-hover)
   ========================================================================== */
.mc-btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--mc-color-primary); color: var(--mc-color-white);
  font-family: var(--mc-font-semibold); font-size: 15px; border: none;
  border-radius: var(--mc-radius-sm); padding: 14px 28px; cursor: pointer;
  text-decoration: none; transition: background-color .3s linear;
  box-shadow: var(--mc-shadow-bottom-pink);
}
.mc-btn-primary:hover { background: var(--mc-color-primary-hover); }
.mc-btn-primary[disabled] { opacity: .6; cursor: progress; box-shadow: none; }
.mc-btn-primary[disabled]:hover { background: var(--mc-color-primary); }
.mc-btn-primary--lg { font-size: 16px; padding: 15px 30px; gap: 11px; }
.mc-btn-primary--block { width: 100%; }

.mc-btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  background: #fff; color: var(--mc-color-black); border: 1px solid var(--mc-color-grey-light);
  border-radius: var(--mc-radius-sm); padding: 14px 22px;
  font-family: var(--mc-font-semibold); font-size: 15px; cursor: pointer;
  transition: all .2s ease-out;
}
.mc-btn-secondary:hover { border-color: var(--mc-color-primary); color: var(--mc-color-primary); background: var(--mc-color-primary-soft); }

.mc-btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: none; border: none; color: #6B7280; font-family: var(--mc-font-medium);
  font-size: 14px; cursor: pointer; padding: 6px;
}
.mc-btn-link {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: none; border: none; color: var(--mc-color-primary);
  font-family: var(--mc-font-semibold); font-size: 14px; cursor: pointer; padding: 6px;
}

.mc-field { margin-bottom: 18px; }
.mc-label { display: block; font-family: var(--mc-font-semibold); font-size: 14px; color: var(--mc-color-black); margin-bottom: 7px; }
.mc-req { color: var(--mc-color-primary); }
.mc-err { display: flex; align-items: center; gap: 6px; color: var(--mc-color-error); font-family: var(--mc-font-medium); font-size: 13px; margin-top: 6px; }
.mc-ok  { display: flex; align-items: center; gap: 6px; color: var(--mc-color-success-strong); font-family: var(--mc-font-medium); font-size: 13px; margin-top: 6px; }
.pw-req { display: flex; align-items: center; gap: 7px; font-family: var(--mc-font-medium); font-size: 12.5px; color: #9AA5B1; transition: color .2s ease-out; }
.pw-req[data-met="true"] { color: var(--mc-color-success-strong); }

/* ==========================================================================
   Animations
   ========================================================================== */
@keyframes pa-pop { 0% { transform: scale(0); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes pa-spin { to { transform: rotate(360deg); } }
@keyframes pa-fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.pa-pop { animation: pa-pop .45s ease-out; }
.pa-spin { animation: pa-spin 1.2s linear infinite; }