/* ============================================================
   NotiCom — Inscription (signup) : styles dédiés, préfixe ncs-.
   S'appuie sur noticom.css (variables + .nc-input) et home.css (.nch-btn).
   ============================================================ */

.ncs-page { max-width: 760px; margin: 0 auto; padding: 2.5rem 1.5rem 4rem; }
.ncs-hidden { display: none !important; }

/* ── Stepper ── */
.ncs-stepper { display: flex; align-items: center; justify-content: center; gap: .75rem; margin-bottom: 2rem; }
.ncs-step { display: flex; align-items: center; gap: .55rem; }
.ncs-dot {
  width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .9rem; background: var(--nc-border); color: var(--nc-muted); transition: .25s;
}
.ncs-step.active .ncs-dot { background: var(--nc-accent); color: #fff; }
.ncs-step.done .ncs-dot { background: var(--nc-primary); color: #fff; }
.ncs-step-lbl { font-size: .9rem; font-weight: 600; color: var(--nc-muted); }
.ncs-step.active .ncs-step-lbl { color: var(--nc-text); }
.ncs-line { width: 60px; height: 2px; background: var(--nc-border); transition: background .25s; }
.ncs-line.done { background: var(--nc-primary); }

/* ── Carte ── */
.ncs-card { background: var(--nc-surface); border: 1px solid var(--nc-border); border-radius: var(--nc-radius-lg); padding: 2.25rem; box-shadow: var(--nc-shadow); }
.ncs-title { font-size: 1.5rem; margin: 0 0 .5rem; }
.ncs-lead { color: var(--nc-muted); margin: 0 0 1.75rem; line-height: 1.6; }

/* ── Grille de formules ── */
.ncs-plans { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.ncs-plan {
  position: relative; display: block; cursor: pointer; background: #fff;
  border: 2px solid var(--nc-border); border-radius: 16px; padding: 1.4rem; transition: border-color .18s, box-shadow .18s, transform .18s;
}
.ncs-plan:hover { border-color: var(--nc-accent-light); transform: translateY(-2px); }
.ncs-plan.selected { border-color: var(--nc-accent); box-shadow: 0 10px 26px rgba(6,182,212,.15); }
.ncs-plan.featured { border-color: var(--nc-accent); }
.ncs-plan input { position: absolute; top: 1.2rem; right: 1.2rem; accent-color: var(--nc-accent); width: 18px; height: 18px; cursor: pointer; }
.ncs-plan-badge { position: absolute; top: -11px; left: 1.2rem; background: var(--nc-accent); color: #fff; font-size: .7rem; font-weight: 800; padding: .25rem .7rem; border-radius: 999px; }
.ncs-plan-name { font-size: 1.1rem; font-weight: 800; margin-bottom: .3rem; }
.ncs-plan-price { font-size: 1.4rem; font-weight: 900; color: var(--nc-primary); margin-bottom: .6rem; }
.ncs-per { font-size: .82rem; font-weight: 600; color: var(--nc-muted); }
.ncs-plan-desc { font-size: .84rem; color: var(--nc-muted); margin-bottom: .9rem; line-height: 1.45; min-height: 2.4em; }
.ncs-plan-feats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
.ncs-plan-feats li { position: relative; padding-left: 1.5rem; font-size: .84rem; line-height: 1.4; }
.ncs-plan-feats li::before { content: "✓"; position: absolute; left: 0; color: var(--nc-accent); font-weight: 800; }

.ncs-note { margin-top: 1.4rem; background: var(--nc-accent-light); color: var(--nc-accent-dark); border-radius: 12px; padding: .9rem 1.1rem; font-size: .88rem; line-height: 1.5; }

/* ── Formule sélectionnée (rappel étape 2) ── */
.ncs-selected { display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: var(--nc-bg); border: 1px solid var(--nc-border); border-radius: 12px; padding: 1rem 1.2rem; margin-bottom: 1.75rem; }
.ncs-selected-lbl { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--nc-muted); margin-bottom: .2rem; }
.ncs-selected-name { font-size: 1.15rem; font-weight: 800; }
.ncs-selected-price { font-size: 1.4rem; font-weight: 900; color: var(--nc-primary); }
.ncs-selected-per { font-size: .82rem; font-weight: 600; color: var(--nc-muted); }

/* ── Champs ── */
.ncs-field { margin-bottom: 1.15rem; }
.ncs-label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .35rem; }
.ncs-req { color: var(--nc-danger); }
.ncs-hint { font-size: .78rem; color: var(--nc-muted); margin-top: .3rem; }
.ncs-err { display: none; font-size: .78rem; color: var(--nc-danger); margin-top: .35rem; font-weight: 500; }
.ncs-err.show { display: block; }
.nc-input.error { border-color: var(--nc-danger); outline-color: var(--nc-danger); }

/* ── Bloc « Société » repliable (facultatif) ── */
.ncs-company { margin: 0 0 1.15rem; border: 1px solid var(--nc-border); border-radius: 12px; background: var(--nc-bg, transparent); overflow: hidden; }
.ncs-company-summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .55rem; padding: .85rem 1.1rem; font-size: .9rem; font-weight: 600; color: var(--nc-text); user-select: none; }
.ncs-company-summary::-webkit-details-marker { display: none; }
.ncs-company-summary i { color: var(--nc-accent); }
.ncs-company-summary .ncs-company-chevron { margin-left: auto; font-size: .75rem; color: var(--nc-muted); transition: transform .2s; }
.ncs-company[open] .ncs-company-summary .ncs-company-chevron { transform: rotate(180deg); }
.ncs-optional { font-weight: 500; color: var(--nc-muted); font-size: .8rem; }
.ncs-company-body { padding: .4rem 1.1rem 1.1rem; }
.ncs-company-body .ncs-field:last-child { margin-bottom: 0; }
/* Deux colonnes sur écran large, empilé en mobile */
.ncs-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
@media (max-width: 560px) { .ncs-grid2 { grid-template-columns: 1fr; } }

.ncs-legal { font-size: .78rem; color: var(--nc-muted); line-height: 1.55; margin: 1.25rem 0 1.5rem; }

/* ── Actions ── */
.ncs-actions { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.75rem; }
.ncs-actions.end { justify-content: flex-end; }

/* ── Spinner bouton ── */
.ncs-spin { width: 15px; height: 15px; border: 2px solid rgba(255,255,255,.5); border-top-color: #fff; border-radius: 50%; display: inline-block; animation: ncs-spin .7s linear infinite; }
@keyframes ncs-spin { to { transform: rotate(360deg); } }

/* ── Overlay de vérification email ── */
.ncs-overlay { position: fixed; inset: 0; z-index: 500; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(15,23,42,.6); backdrop-filter: blur(3px); }
.ncs-verify-card { background: #fff; border-radius: var(--nc-radius-lg); box-shadow: var(--nc-shadow-lg); padding: 2.25rem; width: 100%; max-width: 420px; text-align: center; }
.ncs-verify-ico { width: 56px; height: 56px; border-radius: 16px; background: var(--nc-accent-light); color: var(--nc-accent-dark); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; margin: 0 auto .9rem; }
.ncs-verify-title { font-size: 1.2rem; margin: 0 0 .4rem; }
.ncs-verify-sub { font-size: .9rem; color: var(--nc-muted); line-height: 1.6; margin: 0 0 1.4rem; }
.ncs-verify-sub strong { color: var(--nc-text); }
.ncs-code-input {
  width: 100%; text-align: center; font-size: 2rem; font-weight: 800; letter-spacing: .5em;
  font-family: 'Courier New', monospace; padding: .75rem .5rem .75rem 1rem; color: var(--nc-text);
  border: 2px solid var(--nc-border); border-radius: 10px; outline: none; transition: border-color .2s;
  margin-bottom: .5rem;
}
.ncs-code-input:focus { border-color: var(--nc-accent); }
.ncs-verify-card .ncs-err { text-align: center; margin-bottom: .75rem; }
.ncs-verify-card .nch-btn { margin-top: .25rem; }
.ncs-verify-resend { font-size: .82rem; color: var(--nc-muted); margin: 1.1rem 0 .35rem; }
.ncs-link-btn { background: none; border: none; color: var(--nc-accent-dark); font-weight: 600; cursor: pointer; font-family: inherit; font-size: .82rem; padding: 0; text-decoration: underline; }
.ncs-link-btn:hover { opacity: .8; }
.ncs-muted-link { color: var(--nc-muted); font-weight: 500; }

/* ── Responsive ── */
@media (max-width: 640px) {
  .ncs-card { padding: 1.5rem; }
  .ncs-verify-card { padding: 1.5rem; }
  .ncs-plans { grid-template-columns: 1fr; }
  .ncs-step-lbl { display: none; }
  .ncs-line { width: 34px; }
}