/* ═══════════════════════════════════════════════════════
   SignerSynthèse.fr — Parcours signature
═══════════════════════════════════════════════════════ */

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; text-size-adjust:100% }
body {
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-weight:400; line-height:1.6;
  color:#1A1D3A;
  background:#F0F3FB;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  min-height:100vh;
}
img { max-width:100%; height:auto; display:block }
a { color:inherit; text-decoration:none }
button { font-family:inherit; cursor:pointer; border:none; background:none }

:root {
  --ink:    #040253;
  --blue:   #0a0bf5;
  --blue-l: #3B3CF7;
  --white:  #fff;
  --snow:   #F4F6FB;
  --border: #E2E6F3;
  --muted:  #6B7194;
  --green:  #00B67A;
  --red:    #DC2626;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   20px;
}

/* ═══ NAV ═══ */
nav {
  position:sticky; top:0; z-index:50;
  background:#fff; border-bottom:1px solid var(--border);
  padding:0 24px;
  display:flex; align-items:center; justify-content:space-between;
  height:60px;
}
.nav-logo { display:flex; flex-direction:column }
.nav-logo-name { font-size:15px; font-weight:700; color:var(--ink); letter-spacing:-.3px }
.nav-logo-name b { color:var(--blue) }
.nav-logo-by { font-size:9px; color:var(--muted); margin-top:1px }

.nav-phone {
  display:flex; align-items:center; gap:7px;
  border:1px solid var(--border); border-radius:8px;
  padding:7px 14px; font-size:13px; color:var(--ink); font-weight:600;
  transition:all .15s;
}
.nav-phone:hover { border-color:var(--blue); color:var(--blue) }
.nav-phone svg { color:var(--blue) }

/* ═══ CONTAINER ═══ */
.container {
  max-width:760px;
  margin:0 auto;
  padding:32px 24px 60px;
}

.page-head {
  text-align:center;
  margin-bottom:32px;
}
.page-head h1 {
  font-size:clamp(22px,3.2vw,32px);
  font-weight:700; color:var(--ink);
  line-height:1.2; letter-spacing:-.5px;
  margin-bottom:10px;
  max-width:640px; margin-left:auto; margin-right:auto;
}
.page-head h1 span { color:var(--blue) }
.page-sub {
  font-size:14px; color:var(--muted);
  max-width:560px; margin:0 auto 32px;
}
.page-sub b { color:var(--ink); font-weight:600 }

/* ═══ STEPPER ═══ */
.stepper {
  display:flex; align-items:center; justify-content:center;
  gap:12px; margin:0 auto;
  max-width:560px;
}
.stp {
  display:flex; align-items:center; gap:9px;
  flex-shrink:0;
}
.stp-n {
  width:34px; height:34px; border-radius:50%;
  background:#fff; border:2px solid var(--border);
  color:var(--muted); font-weight:700; font-size:14px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  transition:all .3s;
}
.stp-l {
  font-size:13px; font-weight:600; color:var(--muted);
  white-space:nowrap;
  transition:color .3s;
}
.stp-line {
  flex:1; height:2px;
  background:var(--border);
  position:relative; min-width:30px; max-width:80px;
  border-radius:1px; overflow:hidden;
}
.stp-line i {
  position:absolute; top:0; left:0; bottom:0;
  background:var(--green);
  width:0; transition:width .5s ease;
}

/* States */
.stp.active .stp-n {
  background:var(--blue); border-color:var(--blue); color:#fff;
}
.stp.active .stp-l { color:var(--ink) }

.stp.done .stp-n {
  background:var(--green); border-color:var(--green); color:#fff;
}
.stp.done .stp-l { color:var(--green) }
.stp-line.done i { width:100% }

/* ═══ STEP PANELS ═══ */
.step-panel {
  display:none;
  animation:fadeIn .35s ease;
}
.step-panel[data-active="true"] {
  display:block;
}
@keyframes fadeIn {
  from { opacity:0; transform:translateY(8px) }
  to { opacity:1; transform:none }
}

/* ═══ CARD ═══ */
.card {
  background:#fff;
  border-radius:var(--r-xl);
  padding:36px 32px;
  box-shadow:0 4px 6px rgba(0,0,0,.03), 0 12px 32px rgba(4,2,83,.06);
  margin-bottom:18px;
}
.card-h {
  font-size:22px; font-weight:700; color:var(--ink);
  letter-spacing:-.4px; margin-bottom:8px;
}
.card-p {
  font-size:14px; color:var(--muted);
  line-height:1.6; margin-bottom:24px;
}

.back-link {
  display:inline-flex; align-items:center;
  font-size:13px; color:var(--blue); font-weight:600;
  margin-bottom:14px; cursor:pointer;
}
.back-link:hover { text-decoration:underline }

/* ═══ DROPZONE ═══ */
.dropzone {
  border:2px dashed var(--border);
  border-radius:var(--r-lg);
  padding:48px 24px;
  text-align:center;
  cursor:pointer;
  background:var(--snow);
  transition:all .2s;
  margin-bottom:18px;
  -webkit-user-select:none; user-select:none;
}
.dropzone:hover, .dropzone:focus,
.dropzone.dragover {
  border-color:var(--blue);
  background:#EEF0FD;
  outline:none;
}
.dropzone.dragover { transform:scale(1.005) }

.dz-icon {
  width:64px; height:64px;
  background:linear-gradient(135deg,var(--blue),#6E6FFF);
  border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 16px;
  box-shadow:0 8px 24px rgba(10,11,245,.3);
}
.dz-icon svg { width:28px; height:28px }
.dz-h { font-size:16px; font-weight:600; color:var(--ink); margin-bottom:6px }
.dz-s { font-size:13px; color:var(--muted) }

.trust-row {
  display:flex; justify-content:center; gap:8px;
  flex-wrap:wrap; margin-top:12px;
}
.trust-pill {
  display:inline-flex; align-items:center;
  background:var(--snow); border:1px solid var(--border);
  border-radius:100px; padding:6px 14px;
  font-size:12px; font-weight:500; color:var(--muted);
}

.error-box {
  background:#FEF2F2; border:1px solid #FECACA;
  color:#991B1B; padding:12px 14px; border-radius:10px;
  font-size:13px; margin-top:12px;
}

/* ═══ VÉRIFICATION (animation) ═══ */
.verify-head { text-align:center; margin-bottom:24px }
.verify-h {
  font-size:22px; font-weight:700; color:var(--ink);
  letter-spacing:-.4px; margin-bottom:6px;
}
.verify-p { font-size:14px; color:var(--muted) }

.eidas-banner {
  display:flex; align-items:center; justify-content:center; gap:10px;
  background:#EEF0FD; border:1px solid #DDE1FA;
  border-radius:12px; padding:12px 16px;
  font-size:13px; font-weight:500; color:var(--ink);
  margin-bottom:24px;
}
.eidas-banner span:first-child { font-size:18px }

.doc-illu {
  display:flex; justify-content:center;
  margin:8px 0 20px;
}
.doc-illu svg { width:90px; height:auto }

.progressbar {
  width:100%; height:6px;
  background:var(--snow);
  border-radius:6px; overflow:hidden;
  margin-bottom:24px;
}
.progressbar-fill {
  height:100%;
  background:linear-gradient(90deg,var(--blue),#6E6FFF);
  width:0;
  transition:width .4s ease;
  border-radius:6px;
}

/* ═══ Liste des checks ═══ */
.checks { list-style:none; padding:0 }
.checks li {
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center; gap:14px;
  padding:14px 0;
  border-bottom:1px solid var(--border);
  font-size:14px;
  opacity:.4;
  transition:opacity .3s;
}
.checks li:last-child { border-bottom:none }

.ck-status {
  width:24px; height:24px; border-radius:50%;
  background:var(--snow);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.ck-label { color:var(--muted); font-weight:500 }
.ck-result { font-size:13px; color:var(--green); font-weight:600; opacity:0; transition:opacity .3s }

/* État : en cours */
.checks li.loading {
  opacity:1;
}
.checks li.loading .ck-status {
  background:#EEF0FD;
  position:relative;
}
.checks li.loading .ck-status::after {
  content:''; position:absolute;
  width:12px; height:12px; border-radius:50%;
  border:2px solid var(--blue); border-right-color:transparent;
  animation:spin .7s linear infinite;
}
.checks li.loading .ck-label { color:var(--ink) }

/* État : terminé */
.checks li.done {
  opacity:1;
}
.checks li.done .ck-status {
  background:#D1FAE5;
}
.checks li.done .ck-status::after {
  content:''; width:8px; height:5px;
  border-left:2px solid var(--green); border-bottom:2px solid var(--green);
  transform:rotate(-45deg) translateY(-2px);
}
.checks li.done .ck-label { color:var(--ink); font-weight:600 }
.checks li.done .ck-result { opacity:1 }

@keyframes spin {
  from { transform:rotate(0) } to { transform:rotate(360deg) }
}

.verify-foot {
  margin-top:24px;
  display:flex; align-items:center; justify-content:center; gap:7px;
  font-size:12px; color:var(--muted);
}

/* ═══ FORM coordonnées ═══ */
.file-pill {
  display:flex; align-items:center; gap:14px;
  background:#F0FBF6; border:1px solid rgba(0,182,122,.25);
  border-radius:12px; padding:14px 16px; margin-bottom:24px;
}
.file-icon {
  width:38px; height:38px; flex-shrink:0;
  background:#DC2626; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
}
.file-icon svg { width:18px; height:18px }
.file-meta { flex:1; min-width:0 }
.file-name {
  font-size:14px; font-weight:700; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.file-size { font-size:12px; color:var(--muted) }
.file-check {
  width:22px; height:22px; flex-shrink:0;
  border-radius:50%; background:rgba(0,182,122,.15);
  display:flex; align-items:center; justify-content:center;
}
.file-check svg { width:12px; height:12px }

.field { margin-bottom:18px }
.field label {
  display:block;
  font-size:13px; font-weight:600; color:var(--ink);
  margin-bottom:8px;
}
.field-help {
  font-size:12px; color:var(--muted);
  margin:-4px 0 8px; line-height:1.5;
}
.field input {
  width:100%; padding:14px 16px;
  font-family:inherit; font-size:15px; font-weight:500; color:var(--ink);
  background:#fff;
  border:1.5px solid var(--border); border-radius:10px;
  transition:border-color .15s, box-shadow .15s;
  -webkit-appearance:none; appearance:none;
}
.field input:hover { border-color:#C4CADC }
.field input:focus {
  outline:none;
  border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(10,11,245,.1);
}
.field input::placeholder { color:#A0A6BD; font-weight:400 }
.field input.invalid {
  border-color:var(--red);
  box-shadow:0 0 0 3px rgba(220,38,38,.1);
}

.field-err {
  font-size:12px; color:var(--red);
  margin-top:6px; display:none;
}
.field-err.show { display:block }

/* CGV checkbox */
.cgv-field { margin-top:8px }
.cgv-label {
  display:flex; align-items:flex-start; gap:10px;
  font-size:13px; color:var(--muted); line-height:1.5;
  cursor:pointer;
  margin-bottom:0;
}
.cgv-label input[type="checkbox"] {
  width:18px; height:18px; flex-shrink:0;
  margin:1px 0 0;
  accent-color:var(--blue);
  cursor:pointer;
}
.cgv-label a { color:var(--blue); font-weight:600; text-decoration:underline }
.cgv-label a:hover { text-decoration:none }
.cgv-label.invalid { color:var(--red) }
.cgv-label.invalid input[type="checkbox"] {
  outline:2px solid var(--red);
  outline-offset:2px;
  border-radius:3px;
}

/* Phone field */
.phone-row { display:flex; gap:8px }
.phone-prefix {
  display:flex; align-items:center; gap:6px;
  background:#fff; border:1.5px solid var(--border);
  border-radius:10px; padding:0 14px;
  font-size:14px; font-weight:600; color:var(--ink);
  flex-shrink:0;
}
.phone-prefix .flag { font-size:16px }
.phone-row input { flex:1 }

/* ═══ BUTTONS ═══ */
.btn-primary {
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%;
  background:linear-gradient(135deg,var(--ink),var(--blue));
  color:#fff;
  font-size:16px; font-weight:700;
  padding:16px;
  border-radius:12px;
  margin-top:24px;
  cursor:pointer;
  transition:transform .15s, box-shadow .15s, opacity .15s;
  box-shadow:0 8px 28px rgba(10,11,245,.32);
  -webkit-tap-highlight-color:transparent;
}
.btn-primary:hover { transform:translateY(-1px); box-shadow:0 12px 36px rgba(10,11,245,.42) }
.btn-primary:active { transform:translateY(0) }
.btn-primary:disabled { opacity:.6; cursor:not-allowed; transform:none }

.btn-back {
  display:block;
  width:100%;
  background:transparent; color:var(--muted);
  font-size:14px; font-weight:500;
  padding:12px;
  margin-top:12px;
  cursor:pointer;
  transition:color .15s;
}
.btn-back:hover { color:var(--ink) }

/* ═══ RECAP block ═══ */
.recap-block {
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
  margin-bottom:28px;
}
.recap-head {
  background:linear-gradient(135deg,var(--ink),#0A1056);
  color:#fff;
  padding:16px 18px;
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:8px;
}
.recap-head-left {
  display:flex; align-items:center; gap:10px;
  font-size:15px; font-weight:600;
}
.recap-check {
  width:24px; height:24px; border-radius:50%;
  border:1.5px solid rgba(255,255,255,.5);
  display:flex; align-items:center; justify-content:center;
}
.recap-check svg { width:13px; height:13px }
.recap-badge {
  background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.2);
  border-radius:100px;
  padding:4px 12px;
  font-size:12px; font-weight:600;
}

.recap-rows { list-style:none; padding:0; background:#fff }
.recap-rows li {
  display:flex; align-items:center; gap:14px;
  padding:14px 18px;
  border-bottom:1px solid var(--border);
}
.recap-rows li:last-child { border-bottom:none }

.recap-icon {
  width:38px; height:38px; flex-shrink:0;
  border-radius:8px;
  display:flex; align-items:center; justify-content:center;
}
.recap-icon.icon-doc { background:#DC2626 }
.recap-icon.icon-mail { background:#EEF0FD }
.recap-icon.icon-user { background:#EEF0FD }
.recap-icon.icon-phone { background:#EEF0FD }
.recap-icon svg { width:18px; height:18px }

.recap-text { flex:1; min-width:0 }
.recap-label {
  font-size:11px; font-weight:600; color:var(--muted);
  letter-spacing:1.2px; text-transform:uppercase;
  margin-bottom:2px;
}
.recap-value {
  font-size:14px; font-weight:600; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.recap-ok {
  width:22px; height:22px; flex-shrink:0;
  border-radius:50%; background:rgba(0,182,122,.15);
  color:var(--green);
  font-size:12px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}

.recap-section-label {
  font-size:11px; font-weight:600; color:var(--muted);
  letter-spacing:1.5px; text-transform:uppercase;
  text-align:center;
  margin:24px 0 16px;
  position:relative;
}
.recap-section-label::before, .recap-section-label::after {
  content:''; position:absolute; top:50%;
  width:calc(50% - 100px); height:1px;
  background:var(--border);
}
.recap-section-label::before { left:0 }
.recap-section-label::after { right:0 }

/* Inclus */
.incl-grid {
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:8px; margin-bottom:8px;
}
.incl {
  display:flex; align-items:center; gap:8px;
  background:#F0FBF6;
  border:1px solid rgba(0,182,122,.2);
  border-radius:10px;
  padding:10px 14px;
  font-size:13px; font-weight:500; color:var(--ink);
}
.incl span {
  color:var(--green);
  font-weight:700;
  font-size:14px;
}

/* Prix */
.price-block {
  background:#EEF0FD;
  border:1px solid #DDE1FA;
  border-radius:14px;
  padding:24px;
  text-align:center;
  position:relative;
  overflow:hidden;
  margin-bottom:24px;
}
.price-block::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--ink),var(--blue));
}
.price-amt {
  font-size:36px; font-weight:700; color:var(--ink);
  letter-spacing:-1px; line-height:1; margin-bottom:6px;
}
.price-sub { font-size:12px; color:var(--muted) }

/* Trust grid */
.trust-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:12px;
  border:1px solid var(--border);
  border-radius:12px;
  padding:14px;
}
.trust-item {
  display:flex; align-items:center; gap:8px;
  font-size:11px;
}
.trust-item span:first-child { font-size:18px; flex-shrink:0 }
.trust-item .ti-h { font-weight:700; color:var(--ink); font-size:12px }
.trust-item .ti-s { font-size:10px; color:var(--muted) }

.cert-flag-mini {
  display:flex; width:18px; height:13px; border-radius:2px; overflow:hidden; flex-shrink:0;
}
.cert-flag-mini span:nth-child(1) { flex:1; background:#002395 }
.cert-flag-mini span:nth-child(2) { flex:1; background:#EDECEC }
.cert-flag-mini span:nth-child(3) { flex:1; background:#ED2939 }

/* ═══ PAYMENT CARD ═══ */
.pay-card-block { padding:28px 32px }

#payment-element {
  margin-bottom:18px;
  min-height:90px;
}

.btn-pay {
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%;
  background:linear-gradient(135deg,var(--ink),var(--blue));
  color:#fff;
  font-size:16px; font-weight:700;
  padding:18px;
  border-radius:12px;
  cursor:pointer;
  transition:transform .15s, box-shadow .15s, opacity .15s;
  box-shadow:0 10px 32px rgba(10,11,245,.38);
  -webkit-tap-highlight-color:transparent;
}
.btn-pay:hover:not(:disabled) { transform:translateY(-1px); box-shadow:0 14px 40px rgba(10,11,245,.5) }
.btn-pay:active:not(:disabled) { transform:translateY(0) }
.btn-pay:disabled { opacity:.5; cursor:wait }

.btn-pay-text {
  display:flex; align-items:center; gap:8px;
}

.btn-pay-spinner svg { animation:none }

.payment-message {
  background:#FEF2F2; border:1px solid #FECACA;
  color:#991B1B; padding:12px 14px; border-radius:10px;
  font-size:13px; margin-bottom:14px;
}
.payment-message.success {
  background:#F0FBF6; border-color:rgba(0,182,122,.3); color:#065F46;
}

.pay-foot {
  display:flex; justify-content:center; gap:14px;
  flex-wrap:wrap;
  margin-top:14px;
  font-size:12px; color:var(--muted);
}

/* ═══ FOOTER ═══ */
.footer-min {
  background:#fff;
  border-top:1px solid var(--border);
  padding:20px 24px;
  margin-top:40px;
}
.footer-inner {
  max-width:760px; margin:0 auto;
  display:flex; justify-content:space-between;
  font-size:12px; color:var(--muted);
  flex-wrap:wrap; gap:8px;
}
.footer-inner a { color:var(--blue); font-weight:500 }

/* ═══════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════ */
@media (max-width:640px) {
  .container { padding:24px 16px 40px }
  nav { padding:0 16px }
  .nav-phone span { display:none }
  .nav-phone { padding:8px }
  .card { padding:24px 20px }
  .pay-card-block { padding:22px 18px }
  .page-head h1 { font-size:22px }
  .stp-l { display:none }
  .stp { gap:0 }
  .stp-line { min-width:24px }
  .stepper { gap:8px }
  .dropzone { padding:36px 16px }
  .incl-grid { grid-template-columns:1fr }
  .trust-grid { grid-template-columns:1fr; gap:10px }
  .recap-section-label::before,
  .recap-section-label::after { width:calc(50% - 80px) }
  .recap-rows li { padding:12px 14px }
  .recap-head { padding:14px }
  .recap-icon { width:34px; height:34px }
  .price-amt { font-size:30px }
  .pay-foot { font-size:11px; gap:8px }
}

@media (max-width:380px) {
  .page-head h1 { font-size:20px }
  .card-h { font-size:18px }
  #payButtonLabel { font-size:13px }
}