/*
  ACI-SA online subscription flow — shared styles.
  Flow structure mirrors sonatur (5 steps: Site · Conditions · Identification · Parcelle · Paiement),
  rendered in ACI-SA branding (red #e6031f, Oxygen). Built on the ACI Mali site as base.
*/

.souscription-wrap {
  background: #f7f7f5;
  min-height: 60vh;
  padding: 40px 0 60px;
}

.souscription-head {
  text-align: center;
  margin-bottom: 28px;
}
.souscription-head h1 {
  font-family: 'Oxygen', sans-serif;
  font-weight: 700;
  color: #222;
  font-size: 30px;
  margin: 0 0 6px;
}
.souscription-head p { color: #777; margin: 0; }

/* ---------- 5-step breadcrumb (sonatur structure, ACI colors) ---------- */
.flow-steps {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 0;
  max-width: 720px;
  margin: 0 auto 10px;
  padding: 0 12px 26px; /* room for the absolutely-positioned labels */
}
.flow-step {
  position: relative;
  flex: 0 0 42px;        /* fixed width = circle, so connectors stay even regardless of label length */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none; /* when rendered as <a> */
  color: inherit;
}
a.flow-step { cursor: pointer; }
a.flow-step:hover .circle { transform: scale(1.08); box-shadow: 0 4px 12px rgba(230,3,31,.35); }
a.flow-step:hover .label { text-decoration: underline; }
.flow-step .circle {
  width: 42px; height: 42px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px;
  background: #e0e0e0; color: #777;
  box-shadow: 0 3px 8px rgba(0,0,0,.10);
  transition: all .3s ease;
}
.flow-step .label {
  position: absolute;
  top: 48px; left: 50%;
  transform: translateX(-50%);
  font-size: 12px; font-weight: 600;
  color: #999;
  text-align: center;
  white-space: nowrap;
}
.flow-connector {
  flex: 1 1 auto;
  height: 4px;
  background: #e0e0e0;
  border-radius: 4px;
  margin: 19px 4px 0;   /* 19px aligns the 4px bar to the 42px circle centre */
  min-width: 18px;
}
/* active */
.flow-step.active .circle {
  background: #e6031f; color: #fff;
  transform: scale(1.12);
  animation: flowPulse 1.1s ease-in-out infinite;
}
.flow-step.active .label { color: #e6031f; }
/* completed */
.flow-step.done .circle { background: #e6031f; color: #fff; }
.flow-step.done .label { color: #b71220; }
.flow-connector.done { background: #e6031f; }

@keyframes flowPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(230,3,31,.45); }
  50%     { box-shadow: 0 0 0 8px rgba(230,3,31,0); }
}

/* ---------- nav buttons row ---------- */
.flow-nav {
  display: flex; justify-content: space-between; align-items: center;
  max-width: 1100px; margin: 22px auto 0; padding: 0 12px;
}
.flow-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 26px; border-radius: 50px; border: none;
  font-family: 'Oxygen', sans-serif; font-weight: 700; font-size: 15px;
  cursor: pointer; text-decoration: none; transition: all .18s ease;
}
.flow-btn.primary { background: #e6031f; color: #fff; }
.flow-btn.primary:hover { background: #b71220; color: #fff; transform: translateY(-1px); }
.flow-btn.ghost { background: #cfcfcf; color: #fff; }
.flow-btn.disabled { opacity: .5; cursor: not-allowed; }

/* ---------- site / lotissement cards ---------- */
.site-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  max-width: 1100px;
  margin: 34px auto 0;
  padding: 0 12px;
}
.site-card {
  background: transparent;
  display: flex; flex-direction: column;
  transition: transform .25s ease;
}
.site-card:hover { transform: translateY(-6px); }
/* image floats above, rounded, with its own shadow */
.site-card .media {
  height: 180px; overflow: hidden;
  border-radius: 16px; margin: 0 10px;
  box-shadow: 0 14px 28px rgba(0,0,0,.20);
  position: relative; z-index: 2;
}
.site-card .media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.site-card:hover .media img { transform: scale(1.06); }
/* white content card overlaps the bottom of the image */
.site-card .body {
  background: #fff; flex-grow: 1;
  border-radius: 14px 14px 0 0;
  margin: -34px 0 0; padding: 46px 20px 16px;
  position: relative; z-index: 1;
  box-shadow: 0 10px 22px rgba(0,0,0,.07);
}
.site-card .body h3 { font-size: 19px; font-weight: 700; color: #222; margin: 0 0 8px; }
.site-card .meta { color: #666; font-size: 14px; margin-bottom: 4px; }
.site-card .meta i { color: #e6031f; margin-right: 6px; }
.site-card .price { color: #e6031f; font-weight: 700; margin-top: 10px; }
.site-card .tag {
  display: inline-block; font-size: 11px; font-weight: 700;
  background: #fff0f1; color: #e6031f;
  padding: 3px 10px; border-radius: 20px; margin-bottom: 10px;
}
.site-card .foot { padding: 4px 20px 20px; background: #fff; border-radius: 0 0 14px 14px; box-shadow: 0 10px 22px rgba(0,0,0,.07); }
.site-card .select-btn {
  width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: #e6031f; color: #fff; border: none;
  padding: 12px; border-radius: 50px; font-weight: 700; cursor: pointer;
  transition: background .18s ease;
}
.site-card .select-btn:hover { background: #b71220; }

@media (max-width: 991px) { .site-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) {
  .site-grid { grid-template-columns: 1fr; }
  .flow-step { flex: 0 0 34px; }
  .flow-step .label { font-size: 10px; top: 40px; }
  .flow-step .circle { width: 34px; height: 34px; font-size: 13px; }
  .flow-connector { margin-top: 15px; } /* centre on the 34px circle */
}

/* ---------- shared card container ---------- */
.flow-panel {
  max-width: 880px; margin: 30px auto 0; padding: 0 12px;
}
.flow-card {
  background: #fff; border-radius: 12px; box-shadow: 0 6px 22px rgba(0,0,0,.08);
  padding: 32px;
}
.flow-card h2 { font-family:'Oxygen',sans-serif; font-weight:700; color:#222; font-size:22px; margin:0 0 6px; }
.flow-card .sub { color:#777; margin-bottom:22px; }

/* ---------- terms & conditions ---------- */
.terms-box {
  max-height: 320px; overflow-y: auto;
  border: 1px solid #e6e6e6; border-radius: 10px;
  padding: 18px; background: #fafafa; color: #555; line-height: 1.5; font-size: 13px;
}
.terms-box p { font-size: 13px; margin: 0 0 8px; }
.terms-box h4 { color:#e6031f; font-size:13.5px; font-weight:700; margin:14px 0 6px; }
.terms-box h4:first-child { margin-top:0; }
.terms-box ul { padding-left: 18px; margin: 0 0 8px; }
.terms-box li { font-size: 13px; margin-bottom: 3px; }
.accept-row {
  display:flex; align-items:flex-start; gap:10px; margin-top:18px;
  background:#fff5f6; border:1px solid #f3c4c9; border-radius:10px; padding:13px;
}
.accept-row input { width:18px; height:18px; margin-top:2px; accent-color:#e6031f; cursor:pointer; }
.accept-row label { font-weight:600; color:#222; cursor:pointer; font-size:13.5px; }
.flow-card .sub { font-size: 14px; }

/* ---------- form ---------- */
.form-grid { display:grid; grid-template-columns: 1fr 1fr; gap:18px; }
.form-field { display:flex; flex-direction:column; gap:6px; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { font-size:14px; font-weight:700; color:#222; }
.form-field label .req { color:#e6031f; }
.form-field input, .form-field select {
  height:48px; padding:10px 14px; border:1px solid #cfcfcf; border-radius:8px;
  font-family:'Oxygen',sans-serif; font-size:15px; color:#222; background:#fff;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.form-field input:focus, .form-field select:focus {
  outline:none; border-color:#e6031f; box-shadow:0 0 0 3px rgba(230,3,31,.12);
}
@media (max-width:620px){ .form-grid { grid-template-columns:1fr; } }

/* ---------- parcelle: type choice ---------- */
.type-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.type-card {
  border:2px solid #e6e6e6; border-radius:12px; padding:28px; text-align:center;
  cursor:pointer; transition:all .2s ease; background:#fff;
}
.type-card:hover { border-color:#e6031f; transform:translateY(-3px); }
.type-card.selected { border-color:#e6031f; background:#fff5f6; }
.type-card i { font-size:44px; color:#111; }
.type-card h3 { font-size:18px; font-weight:700; margin:12px 0 6px; color:#222; }
.type-card p { color:#777; font-size:14px; margin:0; }
@media (max-width:620px){ .type-grid { grid-template-columns:1fr; } }

/* lot list */
.lot-row {
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  border:1px solid #e6e6e6; border-radius:10px; padding:16px 18px; margin-bottom:12px;
  cursor:pointer; transition:all .18s ease; background:#fff;
}
.lot-row:hover { border-color:#e6031f; }
.lot-row.selected { border-color:#e6031f; background:#fff5f6; }
.lot-row .lot-main { font-weight:700; color:#222; }
.lot-row .lot-meta { color:#777; font-size:14px; }
.lot-row .lot-price { color:#e6031f; font-weight:700; white-space:nowrap; }

/* ---------- summary + payment ---------- */
.summary-table { width:100%; border-collapse:collapse; }
.summary-table td { padding:11px 4px; border-bottom:1px solid #eee; font-size:15px; }
.summary-table td:first-child { color:#777; width:45%; }
.summary-table td:last-child { color:#222; font-weight:600; }
.fees-box { background:#fff5f6; border:1px solid #f3c4c9; border-radius:10px; padding:18px; margin-top:18px; }
.fees-box .total { display:flex; justify-content:space-between; font-weight:700; color:#e6031f; font-size:18px; }
.pay-instruction {
  border:1px dashed #e6031f; border-radius:10px; padding:20px; background:#fffafb; margin-top:18px;
}
.pay-instruction h4 { color:#e6031f; font-weight:700; margin:0 0 10px; }
.pay-method { display:flex; gap:12px; flex-wrap:wrap; margin:14px 0; }
.pay-method .opt {
  border:2px solid #e6e6e6; border-radius:10px; padding:12px 18px; cursor:pointer; font-weight:600; transition:all .18s ease;
}
.pay-method .opt.selected, .pay-method .opt:hover { border-color:#e6031f; background:#fff5f6; }

/* ---------- parcelle lot cards (sonatur layout, ACI colors) ---------- */
.lots-count { text-align:center; color:#666; font-size:16px; margin-bottom:18px; }
.lots-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.parcelle-grid {
  position:relative; border:2px solid #e6e6e6; border-radius:12px; padding:18px;
  cursor:pointer; transition:all .18s ease; background:#fff;
}
.parcelle-grid:hover { border-color:#e6031f; box-shadow:0 8px 20px rgba(0,0,0,.08); }
.parcelle-grid.selected { border-color:#e6031f; background:#fff5f6; }
.zone-badge {
  display:inline-block; font-size:11px; font-weight:700; color:#e6031f;
  background:#fff0f1; padding:3px 10px; border-radius:20px; margin-bottom:10px;
}
.pg-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.pg-head h4 { font-size:18px; font-weight:700; color:#222; margin:0; }
.pg-head .bi { color:#e6031f; font-size:20px; }
.pg-info { display:grid; grid-template-columns:1fr 1fr; gap:8px; font-size:14px; }
.pg-info .full { grid-column:1 / -1; }
.pg-info span { color:#888; font-size:12px; }
.pg-info .val { font-weight:700; color:#333; }
.pg-info .val.price { color:#e6031f; font-size:18px; }
.pg-btn {
  width:100%; margin-top:14px; border:none; border-radius:50px; padding:10px;
  font-weight:700; cursor:pointer; background:#222; color:#fff; transition:background .18s ease;
}
.pg-btn:hover { background:#000; }
.pg-btn.chosen { background:#e6031f; }
@media (max-width:991px){ .lots-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .lots-grid { grid-template-columns:1fr; } }

/* ---------- payment dialog (modal) ---------- */
.pay-summary-btn-row { text-align:center; margin-top:8px; }
.aci-modal-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:9999;
  display:none; align-items:flex-start; justify-content:center; padding:40px 16px; overflow-y:auto;
}
.aci-modal-overlay.open { display:flex; }
.aci-modal {
  background:#fff; border-radius:14px; max-width:560px; width:100%;
  box-shadow:0 20px 60px rgba(0,0,0,.3); overflow:hidden;
}
.aci-modal .m-head {
  background:#e6031f; color:#fff; padding:18px 22px; display:flex; justify-content:space-between; align-items:center;
}
.aci-modal .m-head h3 { margin:0; font-size:19px; font-weight:700; }
.aci-modal .m-head .close { background:none; border:none; color:#fff; font-size:24px; cursor:pointer; line-height:1; }
.aci-modal .m-body { padding:22px; }
.amount-line { display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px solid #eee; }
.amount-line.total { font-weight:700; color:#e6031f; font-size:18px; border-bottom:none; padding-top:14px; }
.amount-line .lbl { color:#666; }

/* ================= PAYMENT FLOW (progressive reveal, red/black/yellow) ================= */
.pay-timer {
  display:inline-flex; align-items:center; gap:8px;
  background:#111; color:#ffc418; font-weight:700; font-size:18px;
  padding:8px 18px; border-radius:50px; border:2px solid #ffc418;
}
.pay-timer.warning { color:#fff; background:#e6031f; border-color:#e6031f; animation:flowPulse 1s infinite; }
.pay-timer i { color:#ffc418; }
.pay-timer.warning i { color:#fff; }
.timer-wrap { text-align:center; margin:0 0 22px; }

.info-alert { background:#fff8e1; border-radius:8px; padding:16px 18px; margin-bottom:20px; }
.info-alert h3 { color:#111; font-size:15px; font-weight:700; margin:0 0 6px; }
.info-alert p { margin:0; color:#5b5b5b; font-size:14px; }

/* recap blocks */
/* résumé as ONE clean card: sections separated by dividers, key-value rows */
.recap-block { border:none; border-radius:0; padding:0 0 16px; margin:0 0 16px; border-bottom:1px solid #f0f0f0; }
.recap-block h3 { font-size:13px; font-weight:700; color:#e6031f; text-transform:uppercase; letter-spacing:.04em; margin:0 0 10px; }
.recap-block p { margin:6px 0; font-size:14px; color:#222; display:flex; justify-content:space-between; gap:14px; }
.recap-block p strong { color:#777; font-weight:600; }
.recap-price { background:#fff5f6; border:1px solid #f3c4c9; border-radius:10px; padding:16px; border-bottom:1px solid #f3c4c9; }
.recap-price .total { margin-top:10px; padding-top:10px; border-top:1px dashed #e6031f; font-weight:700; color:#e6031f; font-size:16px; display:flex; justify-content:space-between; }

/* payment platform cards */
.platform-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:18px; margin-top:6px; }
.platform-card {
  border:2px solid #e6e6e6; border-radius:14px; padding:24px 18px; text-align:center; cursor:pointer;
  transition:all .2s ease; background:#fff;
}
.platform-card:hover { border-color:#e6031f; transform:translateY(-3px); box-shadow:0 10px 24px rgba(0,0,0,.08); }
.platform-card.selected { border-color:#e6031f; background:#fff5f6; }
.platform-card .logo { width:70px; height:70px; border-radius:14px; margin:0 auto 12px; display:flex; align-items:center; justify-content:center; font-weight:800; color:#fff; font-size:13px; text-align:center; line-height:1.1; }
.platform-card .logo.orange { background:#ff6600; }
.platform-card .logo.moov { background:#005cb9; }
.platform-card .logo.sama { background:#111; color:#ffc418; }
.platform-card .pname { font-weight:700; color:#222; }
.platform-card .psub { font-size:12px; color:#888; }

/* instructions reveal */
.pay-instr { margin-top:24px; border:1px solid #eee; border-radius:12px; overflow:hidden; animation:fadeUp .25s ease; }
@keyframes fadeUp { from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;} }
.pay-instr .ih { background:#111; color:#fff; padding:14px 18px; font-weight:700; display:flex; align-items:center; gap:10px; }
.pay-instr .ih .amt { margin-left:auto; color:#ffc418; }
.pay-instr .ib { padding:20px; }
.pay-instr ol { margin:0; padding-left:20px; }
.pay-instr ol li { padding:6px 0; color:#333; border-bottom:1px dashed #eee; }
.pay-instr ol li:last-child { border-bottom:none; }
.pay-note { margin-top:14px; padding:12px 14px; background:#fff8e1; border-left:4px solid #ffc418; border-radius:6px; color:#7a5b00; font-size:13px; }
.whatsapp-btn {
  display:inline-flex; align-items:center; gap:10px; margin-top:18px;
  background:#25D366; color:#fff; font-weight:700; text-decoration:none;
  padding:13px 26px; border-radius:50px; transition:background .18s ease;
}
.whatsapp-btn:hover { background:#1da851; color:#fff; }

/* ---- always-visible countdown ---- */
.timer-fixed { position:fixed; top:104px; right:24px; z-index:10001; margin:0; }
@media (max-width:620px){ .timer-fixed{ top:74px; right:10px; } .timer-fixed .pay-timer{ font-size:15px; padding:6px 12px; } }
/* instructions modal body scroll + above timer */
.aci-modal-overlay { z-index:10000; }
.aci-modal { max-width:600px; }
.aci-modal .m-body { max-height:72vh; overflow-y:auto; }

/* ---- compact Site cards: TF / size / count info box ---- */
.site-tf { margin-top:12px; border:1px solid #eee; border-radius:10px; overflow:hidden; }
.site-tf .row-i { display:flex; justify-content:space-between; align-items:center; padding:8px 12px; font-size:13px; border-bottom:1px solid #f1f1f1; }
.site-tf .row-i:last-child { border-bottom:none; }
.site-tf .row-i .k { color:#888; }
.site-tf .row-i .v { color:#222; font-weight:700; }
.site-tf .row-i.tf { background:#111; color:#ffc418; }
.site-tf .row-i.tf .k { color:#ffd98a; }
.site-tf .row-i.tf .v { color:#ffc418; }

/* ---- TrésorPay single payment gateway card ---- */
#platforms { justify-content:center; }
.platform-card.trezor {
  max-width: 420px; margin: 0 auto; border:2px solid #e6e6e6; border-radius:16px;
  padding: 30px 24px; text-align:center; cursor:pointer; transition:all .2s ease; background:#fff;
}
.platform-card.trezor:hover, .platform-card.trezor.selected { border-color:#e6031f; background:#fff5f6; transform:translateY(-3px); box-shadow:0 12px 28px rgba(0,0,0,.10); }
.platform-card.trezor .trezor-logo { max-height:64px; margin:0 auto 14px; display:block; }
.platform-card.trezor .trezor-fallback {
  align-items:center; justify-content:center; gap:2px; margin:0 auto 14px;
  font-family:'Oxygen',sans-serif; font-weight:700; font-size:30px; color:#0a7d3c; letter-spacing:.5px;
}
.platform-card.trezor .trezor-fallback span { color:#ffc418; }
.platform-card.trezor .pname { font-weight:700; color:#222; font-size:18px; }
.platform-card.trezor .psub { font-size:13px; color:#888; margin-top:4px; }

/* ---- flow pages: secondary nav + social links non-clickable (match homepage) ---- */
#navbar ul li a:not(.thm-btn){ pointer-events:none; cursor:default; }
#footer .copy-social a{ pointer-events:none; cursor:default; }

/* ================= Global loader overlay + toast ================= */
.aci-spin-overlay { position:fixed; inset:0; background:rgba(255,255,255,.62); display:none; align-items:center; justify-content:center; z-index:11000; }
.aci-spin-overlay.show { display:flex; }
.aci-spinner { width:54px; height:54px; border:5px solid #f3c9cf; border-top-color:#e6031f; border-radius:50%; animation:aciSpin .8s linear infinite; }
@keyframes aciSpin { to { transform:rotate(360deg); } }
.aci-toast-wrap { position:fixed; top:18px; left:50%; transform:translateX(-50%); z-index:12000; display:flex; flex-direction:column; gap:8px; align-items:center; }
.aci-toast { display:inline-flex; align-items:center; gap:8px; background:#111; color:#fff; padding:12px 18px; border-radius:10px; font-weight:600; font-size:14px; box-shadow:0 8px 24px rgba(0,0,0,.25); opacity:0; transform:translateY(-8px); transition:all .2s ease; max-width:92vw; }
.aci-toast.show { opacity:1; transform:none; }
.aci-toast.error { background:#e6031f; }
.aci-toast.success { background:#198754; }

/* ---------- ACI color-system utilities (red / yellow / ink) for the flow ---------- */
.aci-accent { background-color:#ffc418; color:#222222; }
a.aci-accent:hover, button.aci-accent:hover { background-color:#e6af00; color:#222222; }
.aci-accent-text { color:#ffc418; }
.aci-ink { background-color:#222222; color:#ffffff; }
a.aci-ink:hover, button.aci-ink:hover { background-color:#000000; color:#ffffff; }