Rejoindre le r\u00e9seau priv\u00e9 | Nubian Connections<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,600&family=Lato:wght@200;300;400;700&display=swap\" rel=\"stylesheet\">\n<style> :where(#ncf-overlay), :where(#ncf-overlay) *, :where(#ncf-overlay) *::before, :where(#ncf-overlay) *::after, :where(.demo-trigger) { margin: 0; padding: 0; box-sizing: border-box; } :root { --cream: #F9F5EE; --cream-2: #F3EDE2; --cream-3: #EBE2D3; --black: #07050300; --ink: #0E0A06; --burgundy: #74131F; --burg-deep: #560E17; --burg-pale: rgba(116,19,31,0.06); --gold: #9C7230; --gold-mid: #B4883C; --gold-bright: #CCA048; --gold-light: #D4AE6A; --gold-pale: rgba(156,114,48,0.10); --gold-line: rgba(156,114,48,0.20); --gold-line-md: rgba(156,114,48,0.38); --gold-line-str: rgba(156,114,48,0.55); --text-main: #0C0806; --text-body: #2A2018; --text-sub: #5C4E3C; --text-muted: #82705A; --border: rgba(14,10,6,0.18); --border-md: rgba(14,10,6,0.28); --border-focus: rgba(156,114,48,0.65); --field-bg: rgba(14,10,6,0.04); --field-focus: rgba(156,114,48,0.06); --shadow-soft: 0 2px 8px rgba(0,0,0,0.04), 0 8px 32px rgba(0,0,0,0.08); } @keyframes grainShift { 0%,100% { transform: translate(0,0); } 20% { transform: translate(-1px, 1px); } 40% { transform: translate(1px, -1px); } 60% { transform: translate(-1px,-1px); } 80% { transform: translate(1px, 1px); } } body { background: #b8af9f; background-image: radial-gradient(ellipse at 30% 40%, rgba(116,19,31,0.12) 0%, transparent 55%), radial-gradient(ellipse at 75% 70%, rgba(156,114,48,0.10) 0%, transparent 50%); font-family: 'Lato', sans-serif; } .demo-trigger { display: block; position: relative; margin: 140px auto !important; padding: 16px 38px !important; background: var(--burgundy); color: var(--cream); font-size: 11px; letter-spacing: 4px; text-transform: uppercase; cursor: pointer; border: none; z-index: 10; font-weight: 700; transition: background 0.3s, letter-spacing 0.3s; } .demo-trigger:hover { background: var(--burg-deep); letter-spacing: 5px; } .overlay { position: fixed; inset: 0; z-index: 100; background: rgba(7,5,3,0.90); backdrop-filter: blur(14px) saturate(0.75); display: flex; align-items: center; justify-content: center; padding: 16px; opacity: 0; pointer-events: none; transition: opacity 0.55s ease; } .overlay.open { opacity: 1; pointer-events: all; } .modal { background: var(--cream); width: 100%; max-width: 780px; max-height: 92vh; overflow-y: auto; position: relative; transform: translateY(40px) scale(0.985); transition: transform 0.55s cubic-bezier(.16,.84,.44,1), opacity 0.45s ease; opacity: 0; scrollbar-width: thin; scrollbar-color: rgba(156,114,48,0.25) transparent; box-shadow: 0 0 0 1px rgba(156,114,48,0.12), 0 4px 8px rgba(0,0,0,0.06), 0 16px 48px rgba(0,0,0,0.22), 0 48px 120px rgba(0,0,0,0.32); } .overlay.open .modal { transform: translateY(0) scale(1); opacity: 1; } .modal::-webkit-scrollbar { width: 2px; } .modal::-webkit-scrollbar-thumb { background: rgba(156,114,48,0.25); } .modal-crown { display: flex; flex-direction: column; gap: 0; overflow: hidden; } .crown-line { display: block; width: 100%; } .crown-line:nth-child(1) { height: 1px; background: linear-gradient(90deg, transparent 3%, rgba(156,114,48,0.3) 25%, rgba(156,114,48,0.6) 50%, rgba(156,114,48,0.3) 75%, transparent 97%); } .crown-line:nth-child(2) { height: 4px; background: linear-gradient(90deg, transparent 2%, var(--gold-mid) 18%, var(--gold-bright) 50%, var(--gold-mid) 82%, transparent 98%); } .crown-line:nth-child(3) { height: 1px; background: linear-gradient(90deg, transparent 3%, rgba(156,114,48,0.5) 25%, rgba(202,160,72,0.9) 50%, rgba(156,114,48,0.5) 75%, transparent 97%); } .close-wrap { position: sticky; top: 0; z-index: 20; display: flex; justify-content: flex-end; padding: 18px 42px 0; background: var(--cream); } .close-btn { background: none; border: none; cursor: pointer; font-size: 8px; letter-spacing: 4px; text-transform: uppercase; color: #6A5A48; transition: color 0.25s, letter-spacing 0.25s; display: flex; align-items: center; gap: 9px; font-weight: 700; } .close-btn:hover { color: var(--gold-mid); letter-spacing: 5px; } .modal-inner { padding: 6px 64px 80px; } .modal-header { text-align: center; padding: 36px 0 52px; position: relative; margin-bottom: 0; } .modal-tag { display: inline-flex; align-items: center; gap: 16px; font-size: 7.5px; letter-spacing: 7px; color: var(--burgundy); text-transform: uppercase; margin-bottom: 28px; font-weight: 700; } .modal-tag::before, .modal-tag::after { content: ''; width: 28px; height: 1px; background: currentColor; opacity: 0.5; } .modal-title { font-family: 'Playfair Display', serif; font-size: clamp(30px, 3.8vw, 48px); font-weight: 400; color: var(--ink); line-height: 1.15; margin-bottom: 20px; letter-spacing: -0.5px; } .modal-title em { color: var(--gold); font-style: italic; font-weight: 400; } .modal-sub { font-family: 'Cormorant Garamond', serif; font-size: 18px; font-style: italic; font-weight: 400; color: #2A2018; line-height: 1.75; max-width: 460px; margin: 0 auto 0; letter-spacing: 0.2px; } .header-divider { position: absolute; bottom: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: center; gap: 0; } .header-divider::before, .header-divider::after { content: ''; flex: 1; height: 1px; background: linear-gradient(to right, transparent, var(--gold-line-md)); } .header-divider::after { background: linear-gradient(to left, transparent, var(--gold-line-md)); } .header-divider-gem { font-size: 8px; color: var(--gold-mid); padding: 0 14px; letter-spacing: 6px; flex-shrink: 0; } .stepper-wrap { padding: 40px 0 44px; position: relative; } .stepper-track { position: absolute; top: 58px; left: 0; right: 0; height: 1px; background: var(--gold-line); z-index: 0; } .stepper-track-fill { position: absolute; top: 58px; left: 0; height: 1px; background: linear-gradient(to right, var(--gold-mid), var(--gold-bright)); z-index: 1; width: 0%; transition: width 0.5s cubic-bezier(.4,0,.2,1); } .stepper { display: flex; align-items: flex-start; justify-content: space-between; position: relative; z-index: 2; } .step-dot { display: flex; flex-direction: column; align-items: center; gap: 10px; cursor: pointer; flex: 1; transition: opacity 0.25s; } .step-dot:hover { opacity: 0.8; } .step-circle { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border-md); display: flex; align-items: center; justify-content: center; background: var(--cream); position: relative; z-index: 2; transition: all 0.4s cubic-bezier(.4,0,.2,1); } .step-num { font-size: 10px; font-weight: 700; letter-spacing: 0.5px; color: #5C4E3C; transition: color 0.3s; } .step-check { display: none; font-size: 13px; color: var(--cream); font-weight: 700; } .step-label { font-size: 7px; letter-spacing: 3px; text-transform: uppercase; color: #6A5A48; font-weight: 700; text-align: center; line-height: 1.4; transition: color 0.3s; white-space: nowrap; } .step-dot.is-active .step-circle { border-color: var(--gold-mid); background: var(--cream); box-shadow: 0 0 0 6px rgba(156,114,48,0.10), 0 0 0 1px var(--gold-line-md); } .step-dot.is-active .step-num { color: var(--gold); } .step-dot.is-active .step-label { color: var(--gold-mid); } .step-dot.is-done .step-circle { border-color: var(--gold); background: linear-gradient(135deg, var(--gold-bright), var(--gold)); box-shadow: 0 2px 12px rgba(156,114,48,0.30); } .step-dot.is-done .step-num { display: none; } .step-dot.is-done .step-check { display: block; } .step-dot.is-done .step-label { color: var(--gold-mid); } .section-eyebrow { display: flex; align-items: center; gap: 14px; font-size: 8px; letter-spacing: 6px; text-transform: uppercase; color: var(--gold-mid); margin-bottom: 32px; margin-top: 0; font-weight: 700; } .section-eyebrow::before { content: '\u25c6'; font-size: 5px; color: var(--gold-bright); flex-shrink: 0; } .section-eyebrow::after { content: ''; flex: 1; height: 1px; background: linear-gradient(to right, var(--gold-line-md) 0%, transparent 100%); } .step-panel { display: none; } .step-panel.is-active { display: block; animation: revealPanel 0.42s cubic-bezier(.22,.68,0,1.1) forwards; } @keyframes revealPanel { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; } .field-single { margin-bottom: 18px; } .field-label { display: block; font-size: 8.5px; letter-spacing: 4px; text-transform: uppercase; color: var(--text-main); margin-bottom: 10px; font-weight: 700; } .field-sublabel { font-weight: 300; text-transform: none; letter-spacing: 0; margin-left: 6px; font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 13.5px; color: var(--text-muted); } input[type=\"text\"], input[type=\"email\"], input[type=\"tel\"], textarea, select { width: 100%; padding: 15px 20px; background: var(--field-bg); border: none; border-bottom: 1px solid var(--border-md); color: var(--text-main); font-family: 'Lato', sans-serif; font-size: 14.5px; font-weight: 400; outline: none; transition: border-color 0.3s, background 0.3s, box-shadow 0.3s; appearance: none; -webkit-appearance: none; border-radius: 0; letter-spacing: 0.2px; border-top: 1px solid transparent; border-left: 1px solid transparent; border-right: 1px solid transparent; } input:focus, select:focus, textarea:focus { border-color: var(--gold-line-md); border-bottom-color: var(--gold-mid); background: var(--field-focus); box-shadow: 0 3px 0 -1px var(--gold-line), 0 8px 24px rgba(156,114,48,0.05); } input::placeholder, textarea::placeholder { color: #8C7A64; font-size: 13.5px; font-weight: 300; font-family: 'Cormorant Garamond', serif; font-style: italic; } textarea { resize: vertical; min-height: 128px; line-height: 1.75; } select { background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='9' height='5'%3E%3Cpath d='M0 0l4.5 5 4.5-5z' fill='rgba(156,114,48,0.65)'\/%3E%3C\/svg%3E\"); background-repeat: no-repeat; background-position: right 18px center; padding-right: 42px; cursor: pointer; } select option { background: var(--cream); color: var(--text-main); } input.has-error, select.has-error, textarea.has-error { border-bottom-color: rgba(116,19,31,0.6) !important; background: rgba(116,19,31,0.025) !important; } .other-reveal { overflow: hidden; max-height: 0; opacity: 0; transition: max-height 0.4s ease, opacity 0.35s ease, margin 0.35s ease; } .other-reveal.open { max-height: 80px; opacity: 1; margin-top: 12px; } .radio-group { display: flex; gap: 12px; } .radio-group.col { flex-direction: column; gap: 10px; } .radio-card { flex: 1; padding: 15px 20px; border: 1px solid var(--border); cursor: pointer; display: flex; align-items: center; gap: 14px; transition: border-color 0.28s, background 0.28s; user-select: none; } .radio-card:hover { border-color: var(--gold-line-str); background: var(--gold-pale); } .radio-card input[type=\"radio\"] { display: none; } .radio-card.picked { border-color: var(--gold-mid); background: var(--gold-pale); } .r-ring { width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; border: 1.5px solid var(--border-md); display: flex; align-items: center; justify-content: center; transition: border-color 0.22s; } .radio-card.picked .r-ring { border-color: var(--gold); } .r-ring::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, var(--gold-bright), var(--gold)); display: none; } .radio-card.picked .r-ring::after { display: block; } .r-text { font-size: 13.5px; color: #2A2018; font-weight: 400; line-height: 1.4; } .radio-card.picked .r-text { color: var(--text-main); font-weight: 700; } .intent-card { padding: 26px 30px; border: 1px solid var(--border); cursor: pointer; display: flex; align-items: flex-start; gap: 20px; transition: border-color 0.28s, background 0.28s, box-shadow 0.28s; margin-bottom: 14px; user-select: none; position: relative; overflow: hidden; } .intent-card::before { content: ''; position: absolute; left: 0; top: 8%; bottom: 8%; width: 0; background: linear-gradient(to bottom, var(--gold-bright), var(--gold)); transition: width 0.35s ease; border-radius: 0 2px 2px 0; } .intent-card:hover { border-color: var(--gold-line-str); background: var(--gold-pale); } .intent-card input[type=\"radio\"] { display: none; } .intent-card.picked { border-color: var(--gold-mid); background: var(--gold-pale); box-shadow: 0 4px 24px rgba(156,114,48,0.08); } .intent-card.picked::before { width: 3px; } .i-ring { width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; border: 1.5px solid var(--border-md); display: flex; align-items: center; justify-content: center; transition: border-color 0.22s; } .intent-card.picked .i-ring { border-color: var(--gold); } .i-ring::after { content: ''; width: 9px; height: 9px; border-radius: 50%; background: linear-gradient(135deg, var(--gold-bright), var(--gold)); display: none; } .intent-card.picked .i-ring::after { display: block; } .intent-content { flex: 1; } .intent-badge { display: inline-block; font-size: 7px; letter-spacing: 3.5px; text-transform: uppercase; padding: 4px 11px; margin-bottom: 13px; border: 1px solid currentColor; font-weight: 700; } .badge-free { color: var(--text-muted); } .badge-premium { color: var(--gold); } .intent-content h4 { font-family: 'Playfair Display', serif; font-size: 17px; font-weight: 500; color: var(--text-main); margin-bottom: 9px; letter-spacing: -0.2px; } .intent-content p { font-size: 13.5px; color: #2A2018; line-height: 1.7; font-weight: 400; } .intent-note { margin-top: 11px !important; font-family: 'Cormorant Garamond', serif !important; font-size: 15.5px !important; font-style: italic !important; color: var(--text-sub) !important; font-weight: 300 !important; } .terms-row { display: flex; align-items: flex-start; gap: 18px; padding: 22px 26px; border: 1px solid var(--border); background: var(--cream-2); margin-top: 32px; cursor: pointer; transition: border-color 0.25s, background 0.25s; } .terms-row:hover { border-color: var(--gold-line-str); background: var(--gold-pale); } .terms-box { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; border: 1.5px solid var(--border-md); display: flex; align-items: center; justify-content: center; transition: all 0.22s; } .terms-box.ticked { border-color: var(--gold); background: rgba(156,114,48,0.12); } .terms-box.ticked::after { content: '\u2713'; font-size: 11px; color: var(--gold); font-weight: 700; } .terms-text { font-size: 13px; color: #2A2018; line-height: 1.8; font-weight: 400; } .terms-text a { color: var(--gold-mid); text-decoration: none; font-weight: 400; border-bottom: 1px solid var(--gold-line); transition: color 0.2s; } .terms-text a:hover { color: var(--gold-bright); } .step-nav { display: flex; gap: 14px; margin-top: 44px; align-items: stretch; } .btn-prev { flex-shrink: 0; padding: 0 28px; background: transparent; border: 1px solid var(--border-md); color: #5C4E3C; font-family: 'Lato', sans-serif; font-size: 8.5px; letter-spacing: 3.5px; text-transform: uppercase; cursor: pointer; font-weight: 700; transition: all 0.25s; display: flex; align-items: center; gap: 10px; min-height: 54px; } .btn-prev:hover { border-color: var(--gold-line-str); color: var(--gold-mid); background: var(--gold-pale); } .btn-next { flex: 1; padding: 0 32px; background: var(--burgundy); color: var(--cream); font-family: 'Lato', sans-serif; font-size: 9px; letter-spacing: 5px; text-transform: uppercase; border: none; cursor: pointer; font-weight: 700; transition: background 0.3s, letter-spacing 0.3s, box-shadow 0.3s; position: relative; overflow: hidden; min-height: 54px; display: flex; align-items: center; justify-content: center; gap: 12px; } .btn-next::after { content: ''; position: absolute; top: 0; left: -100%; bottom: 0; width: 55%; background: linear-gradient(90deg, transparent, rgba(255,220,130,0.12), transparent); transition: left 0.65s ease; } .btn-next:hover { background: var(--burg-deep); letter-spacing: 6.5px; box-shadow: 0 6px 28px rgba(116,19,31,0.28); } .btn-next:hover::after { left: 160%; } .btn-submit { flex: 1; padding: 0 32px; background: var(--burgundy); color: var(--cream); font-family: 'Lato', sans-serif; font-size: 9px; letter-spacing: 5px; text-transform: uppercase; border: none; cursor: pointer; font-weight: 700; transition: background 0.3s, letter-spacing 0.3s, box-shadow 0.3s; position: relative; overflow: hidden; min-height: 54px; } .btn-submit::after { content: ''; position: absolute; top: 0; left: -100%; bottom: 0; width: 55%; background: linear-gradient(90deg, transparent, rgba(255,220,130,0.12), transparent); transition: left 0.65s ease; } .btn-submit:hover { background: var(--burg-deep); letter-spacing: 6.5px; box-shadow: 0 6px 28px rgba(116,19,31,0.28); } .btn-submit:hover::after { left: 160%; } .submit-caption { text-align: center; margin-top: 20px; font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 14px; font-weight: 300; color: var(--gold-mid); letter-spacing: 1px; } .form-foot { text-align: center; margin-top: 36px; font-size: 8px; letter-spacing: 8px; color: var(--gold-line-str); } .success-view { display: none; position: relative; overflow: hidden; background: var(--ink); min-height: 560px; } .success-view.show { display: flex; flex-direction: column; align-items: center; justify-content: center; animation: successReveal 0.7s cubic-bezier(.16,.84,.44,1) forwards; } @keyframes successReveal { from { opacity: 0; } to { opacity: 1; } } .success-view::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 20% 50%, rgba(116,19,31,0.45) 0%, transparent 55%), radial-gradient(ellipse at 80% 30%, rgba(156,114,48,0.22) 0%, transparent 50%), radial-gradient(ellipse at 55% 85%, rgba(116,19,31,0.20) 0%, transparent 45%); pointer-events: none; } .success-view::after { content: ''; position: absolute; inset: 0; background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='4' stitchTiles='stitch'\/%3E%3CfeColorMatrix type='saturate' values='0'\/%3E%3C\/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.055'\/%3E%3C\/svg%3E\"); pointer-events: none; } .success-inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; padding: 80px 64px 72px; text-align: center; } .success-diamond { width: 64px; height: 64px; position: relative; margin-bottom: 44px; animation: diamondSpin 1.2s cubic-bezier(.22,.68,0,1.2) forwards; opacity: 0; } @keyframes diamondSpin { 0% { opacity: 0; transform: rotate(-90deg) scale(0.5); } 60% { opacity: 1; transform: rotate(8deg) scale(1.05); } 100% { opacity: 1; transform: rotate(0deg) scale(1); } } .success-diamond svg { width: 64px; height: 64px; } .success-diamond .gem-outer { fill: none; stroke: var(--gold-mid); stroke-width: 1; } .success-diamond .gem-inner { fill: none; stroke: var(--gold-bright); stroke-width: 0.6; opacity: 0.6; } .success-diamond .gem-cross { stroke: rgba(202,160,72,0.35); stroke-width: 0.5; } .success-tag { font-size: 7.5px; letter-spacing: 7px; text-transform: uppercase; color: var(--gold-mid); font-weight: 700; margin-bottom: 28px; display: flex; align-items: center; gap: 14px; animation: fadeUp 0.6s 0.3s ease both; } .success-tag::before, .success-tag::after { content: ''; width: 32px; height: 1px; background: linear-gradient(to right, transparent, var(--gold-line-str)); } .success-tag::after { background: linear-gradient(to left, transparent, var(--gold-line-str)); } @keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } .success-headline { font-family: 'Playfair Display', serif; font-size: clamp(34px, 4.5vw, 54px); font-weight: 400; line-height: 1.12; color: var(--cream); letter-spacing: -0.5px; margin-bottom: 10px; animation: fadeUp 0.6s 0.45s ease both; } .success-headline em { color: var(--gold-bright); font-style: italic; display: block; } .success-rule { width: 1px; height: 52px; margin: 32px auto; background: linear-gradient(to bottom, transparent, var(--gold-mid), transparent); animation: fadeUp 0.6s 0.6s ease both; } .success-body { font-family: 'Cormorant Garamond', serif; font-size: 19px; font-style: italic; font-weight: 400; color: rgba(249,245,238,0.75); line-height: 1.8; max-width: 400px; margin-bottom: 14px; animation: fadeUp 0.6s 0.7s ease both; } .success-note { font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: rgba(249,245,238,0.35); font-weight: 700; margin-bottom: 52px; animation: fadeUp 0.6s 0.8s ease both; } .success-actions { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; max-width: 320px; animation: fadeUp 0.6s 0.9s ease both; } .success-close { width: 100%; padding: 17px 52px; background: linear-gradient(135deg, var(--gold-bright), var(--gold)); border: none; color: var(--ink); font-family: 'Lato', sans-serif; font-size: 8.5px; letter-spacing: 5px; text-transform: uppercase; cursor: pointer; font-weight: 700; transition: all 0.3s; position: relative; overflow: hidden; } .success-close::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, transparent 40%, rgba(255,255,255,0.12) 50%, transparent 60%); transform: translateX(-100%); transition: transform 0.5s ease; } .success-close:hover { letter-spacing: 6px; box-shadow: 0 6px 30px rgba(156,114,48,0.45); } .success-close:hover::after { transform: translateX(100%); } .success-link { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 14px; color: rgba(249,245,238,0.45); background: none; border: none; cursor: pointer; transition: color 0.25s; letter-spacing: 0.3px; } .success-link:hover { color: rgba(249,245,238,0.75); } .success-filigree { position: absolute; bottom: 28px; left: 0; right: 0; text-align: center; z-index: 2; font-size: 8px; letter-spacing: 10px; color: rgba(156,114,48,0.35); } .error-banner { background: rgba(116,19,31,0.06); border: 1px solid rgba(116,19,31,0.25); padding: 14px 20px; margin-bottom: 24px; font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 15px; color: var(--burgundy); display: none; animation: revealPanel 0.3s ease; } .error-banner.show { display: block; } @media (max-width: 620px) { .modal-inner { padding: 4px 26px 60px; } .field-row { grid-template-columns: 1fr; } .radio-group { flex-direction: column; } .step-label { font-size: 6px; letter-spacing: 1.5px; } .step-circle { width: 34px; height: 34px; } .btn-prev { padding: 0 18px; } } .wordmark { font-family:'Playfair Display',serif; font-size:15px; letter-spacing:6px; text-transform:uppercase; color:var(--text-main); text-align:center; } .wordmark span { color:var(--gold); } .wordmark small { display:block; font-family:'Lato',sans-serif; font-size:8px; letter-spacing:5px; color:var(--text-muted); margin-top:6px; } .form-badge { display:inline-block; font-family:'Lato',sans-serif; font-size:9px; font-weight:700; letter-spacing:4px; text-transform:uppercase; padding:8px 16px; margin-bottom:20px; border:1px solid var(--gold-line-md); color:var(--gold); } .form-badge.paid { background:var(--gold-bright); color:#14100C; border-color:var(--gold-bright); } .paid-note { font-family:'Lato',sans-serif; font-size:12.5px; letter-spacing:.3px; color:var(--gold-light); margin-top:14px; } .theme-paid .close-wrap { background:var(--burgundy); } .theme-paid .close-btn { color:rgba(249,245,238,.75); } .theme-paid .modal-crown .crown-line { opacity:.9; } .theme-paid .modal-header { background:var(--burgundy); margin:-6px -64px 40px; padding:30px 64px 44px; } .theme-paid .modal-header .wordmark { color:#F9F5EE; } .theme-paid .modal-header .wordmark span { color:#E2C07A; } .theme-paid .modal-header .wordmark small { color:rgba(249,245,238,.6); } .theme-paid .modal-title { color:#F9F5EE; } .theme-paid .modal-title em { color:#E2C07A; } .theme-paid .modal-sub { color:rgba(249,245,238,.88); } .theme-paid .paid-note { color:#E2C07A; } .theme-paid .header-divider { opacity:.6; } .theme-paid .header-divider-gem { color:#E2C07A; } .theme-paid .form-badge.paid { background:#E2C07A; border-color:#E2C07A; color:#3A0A10; } .theme-paid .intent-card.picked { border-color:var(--burgundy); } .req { color: var(--burgundy); font-weight: 700; } .box-error .field-label { color: var(--burgundy); } input.has-error, select.has-error, textarea.has-error { border: 1px solid rgba(116,19,31,0.75) !important; background: rgba(116,19,31,0.05) !important; } .box-error .radio-card, .box-error .intent-card { border-color: rgba(116,19,31,0.6); } .terms-row.box-error { border-color: rgba(116,19,31,0.75); background: rgba(116,19,31,0.05); } .field-err { margin-top: 8px; font-family: 'Lato', sans-serif; font-size: 12.5px; font-weight: 700; color: var(--burgundy); letter-spacing: .2px; } .field-err::before { content: '! '; } .step-alert { margin: -10px 0 26px; padding: 14px 18px; border-left: 3px solid var(--burgundy); background: rgba(116,19,31,0.06); font-family: 'Lato', sans-serif; font-size: 13.5px; color: var(--burgundy); font-weight: 700; animation: revealPanel .3s ease; } @media (max-width: 620px) { .theme-paid .modal-header { margin:-4px -26px 32px; padding:26px 26px 36px; } } <\/style>\n<\/head>\n<body>\n<button class=\"demo-trigger\" onclick=\"NCF.openForm()\">Rejoindre le r\u00e9seau priv\u00e9<\/button>\n<div class=\"overlay \" id=\"ncf-overlay\" onclick=\"NCF.handleOverlayClick(event)\">\n<div class=\"modal\" id=\"ncf-modal\">\n<div class=\"modal-crown\">\n<span class=\"crown-line\"><\/span>\n<span class=\"crown-line\"><\/span>\n<span class=\"crown-line\"><\/span>\n<\/div>\n<div class=\"close-wrap\">\n<button class=\"close-btn\" onclick=\"NCF.closeForm()\">Fermer \u2715<\/button>\n<\/div>\n<div class=\"modal-inner\" id=\"ncf-form-view\">\n<div class=\"modal-header\">\n<div style=\"margin-bottom:28px;\">\n<div class=\"wordmark\">Nubian <span>Connections<\/span><small>International<\/small><\/div>\n<\/div>\n<div class=\"form-badge\">Gratuit \u00b7 R\u00e9seau priv\u00e9<\/div>\n<h2 class=\"modal-title\">Rejoignez notre<br><em>r\u00e9seau priv\u00e9.<\/em><\/h2>\n<p class=\"modal-sub\">Inscription gratuite. Les femmes et les hommes peuvent rejoindre le r\u00e9seau pour \u00eatre pris en compte lors d\u2019une \u00e9ventuelle pr\u00e9sentation, lorsque la recherche d\u2019un client semble compatible. Chaque candidature est lue par une personne, pas par un algorithme.<\/p>\n<div class=\"header-divider\">\n<span class=\"header-divider-gem\">\u25c6 \u25c6 \u25c6<\/span>\n<\/div>\n<\/div>\n<div class=\"stepper-wrap\">\n<div class=\"stepper-track\"><\/div>\n<div class=\"stepper-track-fill\" id=\"ncf-track-fill\"><\/div>\n<div class=\"stepper\" id=\"ncf-stepper\">\n<div class=\"step-dot is-active\" data-step=\"1\" onclick=\"NCF.jumpToStep(1)\">\n<div class=\"step-circle\">\n<span class=\"step-num\">01<\/span>\n<span class=\"step-check\">\u2713<\/span>\n<\/div>\n<div class=\"step-label\">\u00c0 propos<br>de vous<\/div>\n<\/div>\n<div class=\"step-dot\" data-step=\"2\" onclick=\"NCF.jumpToStep(2)\">\n<div class=\"step-circle\">\n<span class=\"step-num\">02<\/span>\n<span class=\"step-check\">\u2713<\/span>\n<\/div>\n<div class=\"step-label\">Votre<br>recherche<\/div>\n<\/div>\n<div class=\"step-dot\" data-step=\"3\" onclick=\"NCF.jumpToStep(3)\">\n<div class=\"step-circle\">\n<span class=\"step-num\">03<\/span>\n<span class=\"step-check\">\u2713<\/span>\n<\/div>\n<div class=\"step-label\">Votre<br>histoire<\/div>\n<\/div>\n<\/div>\n<\/div>\n<form id=\"ncf-nc-form\" onsubmit=\"NCF.handleSubmit(event)\" novalidate>\n<input type=\"hidden\" name=\"form_type\" value=\"Private Network (free)\">\n<input type=\"hidden\" name=\"referral\" value=\"\">\n<input type=\"text\" name=\"website\" tabindex=\"-1\" autocomplete=\"off\" style=\"position:absolute;left:-9999px;opacity:0;height:0;width:0\" aria-hidden=\"true\">\n<div class=\"step-panel is-active\" id=\"ncf-step-1\">\n<div class=\"section-eyebrow\">\u00c0 propos de vous<\/div>\n<div class=\"field-row\">\n<div>\n<label class=\"field-label\">Pr\u00e9nom<\/label>\n<input type=\"text\" name=\"first_name\" placeholder=\"Votre pr\u00e9nom\">\n<\/div>\n<div>\n<label class=\"field-label\">Nom<\/label>\n<input type=\"text\" name=\"last_name\" placeholder=\"Votre nom\">\n<\/div>\n<\/div>\n<div class=\"field-row\">\n<div>\n<label class=\"field-label\">E-mail<\/label>\n<input type=\"email\" name=\"email\" id=\"ncf-email-a\" placeholder=\"votre@email.com\">\n<\/div>\n<div>\n<label class=\"field-label\">Confirmez votre e-mail<\/label>\n<input type=\"email\" name=\"email_confirm\" id=\"ncf-email-b\" placeholder=\"Confirmez votre e-mail\">\n<\/div>\n<\/div>\n<div class=\"field-single\">\n<label class=\"field-label\">T\u00e9l\u00e9phone <span class=\"field-sublabel\">WhatsApp de pr\u00e9f\u00e9rence \u2014 obligatoire<\/span><\/label>\n<input type=\"tel\" name=\"phone\" id=\"ncf-phone\" placeholder=\"+33 6 00 00 00 00\">\n<\/div>\n<div class=\"field-row\">\n<div>\n<label class=\"field-label\">Ville<\/label>\n<input type=\"text\" name=\"city\" placeholder=\"Votre ville\">\n<\/div>\n<div>\n<label class=\"field-label\">Pays<\/label>\n<input type=\"text\" name=\"country\" placeholder=\"Votre pays\">\n<\/div>\n<\/div>\n<div class=\"field-single\">\n<label class=\"field-label\">Je suis\u2026<\/label>\n<div class=\"radio-group\">\n<label class=\"radio-card\" onclick=\"NCF.pickRadio(this,'gender')\">\n<input type=\"radio\" name=\"gender\" value=\"woman\">\n<div class=\"r-ring\"><\/div><span class=\"r-text\">Une femme<\/span>\n<\/label>\n<label class=\"radio-card\" onclick=\"NCF.pickRadio(this,'gender')\">\n<input type=\"radio\" name=\"gender\" value=\"man\">\n<div class=\"r-ring\"><\/div><span class=\"r-text\">Un homme<\/span>\n<\/label>\n<\/div>\n<\/div>\n<div class=\"field-single\">\n<label class=\"field-label\">Langue pr\u00e9f\u00e9r\u00e9e<\/label>\n<div class=\"radio-group\">\n<label class=\"radio-card\" onclick=\"NCF.pickRadio(this,'language')\">\n<input type=\"radio\" name=\"language\" value=\"English\">\n<div class=\"r-ring\"><\/div><span class=\"r-text\">Anglais<\/span>\n<\/label>\n<label class=\"radio-card\" onclick=\"NCF.pickRadio(this,'language')\">\n<input type=\"radio\" name=\"language\" value=\"French\" checked>\n<div class=\"r-ring\"><\/div><span class=\"r-text\">Fran\u00e7ais<\/span>\n<\/label>\n<\/div>\n<\/div>\n<div class=\"field-single\">\n<label class=\"field-label\">Date de naissance<\/label>\n<div style=\"display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;\">\n<select name=\"dob_month\">\n<option value=\"\" disabled selected>Mois<\/option>\n<option>Janvier<\/option><option>F\u00e9vrier<\/option><option>Mars<\/option>\n<option>Avril<\/option><option>Mai<\/option><option>Juin<\/option>\n<option>Juillet<\/option><option>Ao\u00fbt<\/option><option>Septembre<\/option>\n<option>Octobre<\/option><option>Novembre<\/option><option>D\u00e9cembre<\/option>\n<\/select>\n<select name=\"dob_day\">\n<option value=\"\" disabled selected>Jour<\/option>\n<script>for(let i=1;i<=31;i++) document.write(`<option>${i}<\/option>`);<\/script>\n<\/select>\n<select name=\"dob_year\">\n<option value=\"\" disabled selected>Ann\u00e9e<\/option>\n<script>for(let i=new Date().getFullYear()-18;i>=1940;i--) document.write(`<option>${i}<\/option>`);<\/script>\n<\/select>\n<\/div>\n<\/div>\n<div class=\"field-single\">\n<label class=\"field-label\">Nationalit\u00e9<\/label>\n<input type=\"text\" name=\"nationality\" placeholder=\"ex. fran\u00e7aise, ivoirienne, camerounaise, britannique\u2026\">\n<\/div>\n<div class=\"field-single\">\n<label class=\"field-label\">Situation familiale<\/label>\n<select name=\"marital_status\">\n<option value=\"\" disabled selected>Choisissez votre situation<\/option>\n<option value=\"single\">C\u00e9libataire \u2014 jamais mari\u00e9\u00b7e<\/option>\n<option value=\"divorced\">Divorc\u00e9\u00b7e<\/option>\n<option value=\"widowed\">Veuf \/ veuve<\/option>\n<option value=\"separated\">S\u00e9par\u00e9\u00b7e<\/option>\n<\/select>\n<\/div>\n<div class=\"field-single\">\n<label class=\"field-label\">Niveau d\u2019\u00e9tudes<\/label>\n<select name=\"education\" id=\"ncf-edu-select\" onchange=\"NCF.revealOther('ncf-edu-select','ncf-edu-other')\">\n<option value=\"\" disabled selected>Choisissez votre niveau le plus \u00e9lev\u00e9<\/option>\n<option value=\"secondary\">Secondaire \/ baccalaur\u00e9at<\/option>\n<option value=\"undergraduate\">Licence \/ bachelor<\/option>\n<option value=\"postgraduate\">Master<\/option>\n<option value=\"doctorate\">Doctorat<\/option>\n<option value=\"professional\">Dipl\u00f4me professionnel<\/option>\n<option value=\"other\">Autre<\/option>\n<\/select>\n<div class=\"other-reveal\" id=\"ncf-edu-other\">\n<input type=\"text\" name=\"education_other\" placeholder=\"Pr\u00e9cisez\u2026\">\n<\/div>\n<\/div>\n<div class=\"field-single\">\n<label class=\"field-label\">Profession<\/label>\n<input type=\"text\" name=\"profession\" placeholder=\"Votre profession ou secteur\">\n<\/div>\n<div class=\"step-nav\">\n<button type=\"button\" class=\"btn-next\" onclick=\"NCF.goNext(2)\">Continuer \u2192<\/button>\n<\/div>\n<\/div>\n<div class=\"step-panel\" id=\"ncf-step-2\">\n<div class=\"section-eyebrow\">Votre recherche<\/div>\n<div class=\"field-single\">\n<label class=\"field-label\">Mobilit\u00e9 g\u00e9ographique<\/label>\n<select name=\"geography\">\n<option value=\"\" disabled selected>Choisissez votre pr\u00e9f\u00e9rence<\/option>\n<option value=\"same_city\">M\u00eame ville uniquement<\/option>\n<option value=\"same_country\">M\u00eame pays<\/option>\n<option value=\"other_countries\">Ouvert\u00b7e \u00e0 d\u2019autres pays<\/option>\n<option value=\"international\">Ouvert\u00b7e \u00e0 l\u2019international<\/option>\n<\/select>\n<\/div>\n<div class=\"field-single\">\n<label class=\"field-label\">Recherchez-vous une relation s\u00e9rieuse ?<\/label>\n<div class=\"radio-group col\">\n<label class=\"radio-card\" onclick=\"NCF.pickRadio(this,'serious')\">\n<input type=\"radio\" name=\"serious\" value=\"yes\">\n<div class=\"r-ring\"><\/div>\n<span class=\"r-text\">Oui \u2014 je suis pr\u00eat\u00b7e pour une relation engag\u00e9e<\/span>\n<\/label>\n<label class=\"radio-card\" onclick=\"NCF.pickRadio(this,'serious')\">\n<input type=\"radio\" name=\"serious\" value=\"open\">\n<div class=\"r-ring\"><\/div>\n<span class=\"r-text\">J\u2019y suis ouvert\u00b7e, en prenant mon temps<\/span>\n<\/label>\n<\/div>\n<\/div>\n<div class=\"field-single\">\n<label class=\"field-label\">D\u00e9crivez-vous<\/label>\n<textarea name=\"about_self\" placeholder=\"Votre personnalit\u00e9, votre mode de vie, ce qui fait qui vous \u00eates\u2026\"><\/textarea>\n<\/div>\n<div class=\"field-single\">\n<label class=\"field-label\">Qu\u2019est-ce qui compte le plus pour vous chez un\u00b7e partenaire ?<\/label>\n<textarea name=\"about_partner\" placeholder=\"Valeurs, personnalit\u00e9, mode de vie, points non n\u00e9gociables\u2026\"><\/textarea>\n<\/div>\n<div class=\"step-nav\">\n<button type=\"button\" class=\"btn-prev\" onclick=\"NCF.jumpToStep(1)\">\u2190 Retour<\/button>\n<button type=\"button\" class=\"btn-next\" onclick=\"NCF.goNext(3)\">Continuer \u2192<\/button>\n<\/div>\n<\/div>\n<div class=\"step-panel\" id=\"ncf-step-3\">\n<div class=\"section-eyebrow\">Votre histoire<\/div>\n<div class=\"error-banner\" id=\"ncf-error-banner\">\nMerci de compl\u00e9ter les champs obligatoires avant d\u2019envoyer.\n<\/div>\n<div class=\"field-single\">\n<label class=\"field-label\">Comment nous avez-vous connus ?<\/label>\n<select name=\"source\" id=\"ncf-src-select\" onchange=\"NCF.revealOther('ncf-src-select','ncf-src-other')\">\n<option value=\"\" disabled selected>Choisissez une option<\/option>\n<option value=\"friend\">Bouche-\u00e0-oreille \u2014 un\u00b7e ami\u00b7e ou un membre<\/option>\n<option value=\"instagram\">Instagram<\/option>\n<option value=\"google\">Recherche Google<\/option>\n<option value=\"linkedin\">LinkedIn<\/option>\n<option value=\"event\">Un \u00e9v\u00e9nement<\/option>\n<option value=\"press\">Presse ou m\u00e9dias<\/option>\n<option value=\"ambassador\">Un\u00b7e ambassadeur\u00b7rice ou influenceur\u00b7se<\/option>\n<option value=\"other\">Autre<\/option>\n<\/select>\n<div class=\"other-reveal\" id=\"ncf-src-other\">\n<input type=\"text\" name=\"source_other\" placeholder=\"Pr\u00e9cisez (ex. le nom de l\u2019ambassadeur\u00b7rice)\u2026\">\n<\/div>\n<\/div>\n<div class=\"field-single\">\n<label class=\"field-label\">Pourquoi souhaitez-vous rejoindre notre r\u00e9seau ?<\/label>\n<textarea name=\"why_select\" placeholder=\"Que souhaitez-vous que nous sachions de vous ? Qu\u2019apportez-vous aux personnes que vous rencontrez ?\"><\/textarea>\n<\/div>\n<p class=\"intent-note\" style=\"margin:6px 0 22px;\">L\u2019adh\u00e9sion gratuite n\u2019inclut ni recherche d\u00e9di\u00e9e, ni coaching, ni pr\u00e9sentations garanties. Si la recherche d\u2019un client semble compatible avec votre profil, nous pourrons vous contacter pour conna\u00eetre votre int\u00e9r\u00eat.<\/p>\n<div class=\"terms-row\" onclick=\"NCF.toggleTerms()\">\n<div class=\"terms-box\" id=\"ncf-terms-box\"><\/div>\n<div class=\"terms-text\">\nJ\u2019accepte les <a href=\"https:\/\/nubianconnections.com\/fr\/conditions-generales\/\" target=\"_blank\" rel=\"noopener\" onclick=\"event.stopPropagation()\">Conditions g\u00e9n\u00e9rales<\/a> et la <a href=\"https:\/\/nubianconnections.com\/fr\/politique-de-confidentialite\/\" target=\"_blank\" rel=\"noopener\" onclick=\"event.stopPropagation()\">Politique de confidentialit\u00e9<\/a>. Mes informations seront trait\u00e9es en toute discr\u00e9tion et ne seront jamais partag\u00e9es sans mon accord.\n<\/div>\n<\/div>\n<div class=\"step-nav\">\n<button type=\"button\" class=\"btn-prev\" onclick=\"NCF.jumpToStep(2)\">\u2190 Retour<\/button>\n<button type=\"submit\" class=\"btn-submit\">Rejoindre le r\u00e9seau priv\u00e9<\/button>\n<\/div>\n<p class=\"submit-caption\">\u25c6 Inscription gratuite \u00b7 Sans obligation d\u2019achat \u25c6<\/p>\n<div class=\"form-foot\">\u25c6 \u25c6 \u25c6<\/div>\n<\/div>\n<\/form>\n<\/div>\n<div class=\"success-view\" id=\"ncf-success-view\">\n<div class=\"success-inner\">\n\n<div class=\"success-diamond\">\n<svg viewBox=\"0 0 64 64\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\n<rect class=\"gem-outer\" x=\"9\" y=\"9\" width=\"46\" height=\"46\" rx=\"1\" transform=\"rotate(45 32 32)\"\/>\n\n<rect class=\"gem-inner\" x=\"16\" y=\"16\" width=\"32\" height=\"32\" rx=\"0.5\" transform=\"rotate(45 32 32)\"\/>\n\n<line class=\"gem-cross\" x1=\"32\" y1=\"2\" x2=\"32\" y2=\"62\"\/>\n<line class=\"gem-cross\" x1=\"2\" y1=\"32\" x2=\"62\" y2=\"32\"\/>\n\n<line class=\"gem-cross\" x1=\"12\" y1=\"12\" x2=\"52\" y2=\"52\" opacity=\"0.4\"\/>\n<line class=\"gem-cross\" x1=\"52\" y1=\"12\" x2=\"12\" y2=\"52\" opacity=\"0.4\"\/>\n\n<circle cx=\"32\" cy=\"32\" r=\"2\" fill=\"rgba(202,160,72,0.5)\"\/>\n<\/svg>\n<\/div>\n<div class=\"success-tag\">Nubian Connections<\/div>\n<h2 class=\"success-headline\">Votre candidature<em>a bien \u00e9t\u00e9 re\u00e7ue.<\/em><\/h2>\n<div class=\"success-rule\"><\/div>\n<p class=\"success-body\">Chaque candidature est lue personnellement par notre \u00e9quipe.<br>Si votre profil est accept\u00e9, nous vous contacterons pour compl\u00e9ter votre questionnaire membre.<\/p>\n<p class=\"success-note\">\u25c6 Confidentiel \u00b7 Personnel \u00b7 Discret \u25c6<\/p>\n<div class=\"success-actions\">\n<button class=\"success-close\" onclick=\"NCF.closeForm()\">Fermer cette fen\u00eatre<\/button>\n<a class=\"success-link\" href=\"https:\/\/nubianconnections.com\/fr\/\" style=\"text-decoration:none;display:inline-block;\">Retour \u00e0 Nubian Connections<\/a>\n<\/div>\n<\/div>\n<div class=\"success-filigree\">\u25c6 \u25c6 \u25c6<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/@emailjs\/browser@4.4.1\/dist\/email.min.js\"><\/script>\n<script>(function(){\nconst ROOT = () => document.getElementById('ncf-overlay');\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 SETTINGS \u2014 check these before going live \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\nconst EMAILJS_PUBLIC_KEY = 'mq94-ujfcMRRR1A2u';\nconst EMAILJS_SERVICE_ID = 'service_54mk4qs';\nconst EMAILJS_TEMPLATE_ID = 'template_gnbpe0o'; \/\/ notification to you: it must display {{message}}\nconst EMAILJS_CONFIRM_TEMPLATE_ID = 'template_upc0p77'; \/\/ automatic confirmation to the applicant (To Email = {{to_email}})\nconst CONFIRM = {\"en\": {\"default\": \"<p style=\\\"margin:0 0 14px;\\\">Thank you for applying to join the Nubian Connections private network. Chaque candidature est lue personnellement par notre \u00e9quipe.<\/p><p style=\\\"margin:0 0 14px;\\\">Si votre profil est accept\u00e9, nous vous contacterons pour compl\u00e9ter votre questionnaire membre. Free membership does not include a dedicated search or guaranteed introductions.<\/p><p style=\\\"margin:0 0 14px;\\\">Your information will be handled with care and in complete confidentiality.<\/p>\"}, \"fr\": {\"default\": \"<p style=\\\"margin:0 0 14px;\\\">Merci pour votre candidature au r\u00e9seau priv\u00e9 Nubian Connections. Chaque candidature est lue personnellement par notre \u00e9quipe.<\/p><p style=\\\"margin:0 0 14px;\\\">Si votre profil est accept\u00e9, nous vous contacterons pour compl\u00e9ter votre questionnaire membre. L\u2019adh\u00e9sion gratuite n\u2019inclut pas de recherche d\u00e9di\u00e9e ni de pr\u00e9sentations garanties.<\/p><p style=\\\"margin:0 0 14px;\\\">Vos informations seront trait\u00e9es avec attention et en toute confidentialit\u00e9.<\/p>\"}}; \/\/ confirmation text by language, then by service ('default' otherwise)\nfunction confirmParams(data) {\nconst lg = (data.language === 'French' && CONFIRM.fr) ? 'fr' : 'en';\nconst set = CONFIRM[lg] || {};\nconst txt = set[data.service] || set['default'] || CONFIRM.en['default'];\nreturn lg === 'fr' ? { message_fr: txt } : { message: txt };\n}\nconst BOOKING_URL = ''; \/\/ e.g. your Calendly link \u2014 leave empty if not used\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\nlet current = 1;\nconst STEPS = 3;\nlet termsTicked = false;\nconst fillPct = { 1: '0.0%', 2: '50.0%', 3: '100.0%' };\nfunction openForm() {\ndocument.getElementById('ncf-overlay').classList.add('open');\ndocument.body.style.overflow = 'hidden';\n}\nfunction closeForm() {\ndocument.getElementById('ncf-overlay').classList.remove('open');\ndocument.body.style.overflow = '';\nsetTimeout(resetAll, 500);\n}\nfunction handleOverlayClick(e) {\nif (e.target === document.getElementById('ncf-overlay')) closeForm();\n}\ndocument.addEventListener('keydown', e => { if (e.key === 'Escape') closeForm(); });\nfunction renderStepper(active) {\nfor (let i = 1; i <= STEPS; i++) {\nconst dot = ROOT().querySelector(`.step-dot[data-step=\"${i}\"]`);\ndot.classList.remove('is-active', 'is-done');\nif (i < active) dot.classList.add('is-done');\nif (i === active) dot.classList.add('is-active');\n}\ndocument.getElementById('ncf-track-fill').style.width = fillPct[active];\n}\nlet COLLECT = null; \/\/ when set, validation only lists the required fields (used to add the * marks)\nfunction fieldBox(el) { return el.closest('.field-single') || el.parentElement; }\nfunction markError(el, box, msg) {\nif (COLLECT) return;\nif (el) el.classList.add('has-error');\nbox.classList.add('box-error');\nif (!box.querySelector(':scope > .field-err')) {\nconst m = document.createElement('div'); m.className = 'field-err'; m.textContent = msg || 'Merci de compl\u00e9ter ce champ.';\nbox.appendChild(m);\n}\n}\nfunction need(names, ok) {\nnames.forEach(name => {\nconst el = ROOT().querySelector(`[name=\"${name}\"]`);\nif (!el) return;\nif (COLLECT) { COLLECT.push(fieldBox(el)); return; }\nif (!String(el.value).trim()) { markError(el, fieldBox(el)); ok = false; }\n});\nreturn ok;\n}\nfunction needRadio(name, ok) {\nconst any = ROOT().querySelector(`input[name=\"${name}\"]`);\nif (!any) return ok;\nconst box = any.closest('.field-single') || any.closest('.radio-group') || any.parentElement;\nif (COLLECT) { COLLECT.push(box); return ok; }\nif (ROOT().querySelector(`input[name=\"${name}\"]:checked`)) return ok;\nmarkError(null, box, 'Merci de choisir une option.');\nreturn false;\n}\nfunction clearErrors(scope) {\nscope.querySelectorAll('.has-error').forEach(el => el.classList.remove('has-error'));\nscope.querySelectorAll('.box-error').forEach(el => el.classList.remove('box-error'));\nscope.querySelectorAll('.field-err').forEach(el => el.remove());\nscope.querySelectorAll('.step-alert').forEach(el => el.remove());\n}\nfunction validateStep(step) {\nlet ok = true;\nconst panel = document.getElementById(`ncf-step-${step}`);\nclearErrors(panel);\nif (step === 1) {\nok = need(['first_name','last_name','email','email_confirm','phone','city','country','nationality','profession'], ok);\nconst ea = document.getElementById('ncf-email-a'), eb = document.getElementById('ncf-email-b');\nif (ea.value && eb.value && ea.value.trim().toLowerCase() !== eb.value.trim().toLowerCase()) { if (!COLLECT) markError(eb, fieldBox(eb), 'Les deux adresses e-mail ne correspondent pas.'); ok = false; }\nok = needRadio('gender', ok);\nok = needRadio('language', ok);\n}\nif (step === 2) {\nok = need(['about_self'], ok);\nok = needRadio('serious', ok);\n}\nif (step === 3) {\nok = need(['source','why_select'], ok);\nif (COLLECT) {} else if (!termsTicked) { const tr = ROOT().querySelector('.terms-row'); tr.classList.add('box-error'); if (!tr.querySelector('.field-err')) { const m = document.createElement('div'); m.className = 'field-err'; m.textContent = 'Merci d\u2019accepter les Conditions g\u00e9n\u00e9rales et la Politique de confidentialit\u00e9.'; tr.after(m); } ok = false; }\n}\nif (!COLLECT && !termsTicked && panel.querySelector('.terms-row') && !ok) {}\nif (!ok && !COLLECT) {\nconst n = panel.querySelectorAll('.box-error').length;\nconst alert = document.createElement('div');\nalert.className = 'step-alert';\nalert.textContent = n > 1 ? `Presque termin\u00e9 \u2014 ${n} champs demandent votre attention. Ils sont signal\u00e9s ci-dessous.` : 'Presque termin\u00e9 \u2014 un champ demande votre attention. Il est signal\u00e9 ci-dessous.';\npanel.insertBefore(alert, panel.querySelector('.section-eyebrow').nextSibling);\nconst first = panel.querySelector('.box-error');\nif (first) {\nfirst.scrollIntoView({ behavior: 'smooth', block: 'center' });\nconst f = first.querySelector('input:not([type=radio]):not([type=hidden]), select, textarea');\nif (f) setTimeout(() => f.focus({ preventScroll: true }), 350);\n}\n}\nreturn ok;\n}\nfunction markRequired() {\nCOLLECT = [];\nfor (let i = 1; i <= STEPS; i++) validateStep(i);\nconst boxes = COLLECT; COLLECT = null;\nboxes.forEach(b => {\nconst lab = b && (b.querySelector(':scope > .field-label') || b.querySelector('.field-label'));\nif (lab && !lab.querySelector('.req')) { const r = document.createElement('span'); r.className = 'req'; r.textContent = ' *'; lab.insertBefore(r, lab.querySelector('.field-sublabel')); }\n});\n}\n\/\/ a field turns back to normal as soon as it is filled in\ndocument.addEventListener('input', e => { const b = e.target.closest && e.target.closest('.box-error'); if (b && String(e.target.value).trim()) { b.classList.remove('box-error'); e.target.classList.remove('has-error'); b.querySelectorAll(':scope > .field-err').forEach(x => x.remove()); } });\ndocument.addEventListener('change', e => { const b = e.target.closest && e.target.closest('.box-error'); if (b && (e.target.value || e.target.checked)) { b.classList.remove('box-error'); e.target.classList.remove('has-error'); b.querySelectorAll(':scope > .field-err').forEach(x => x.remove()); } });\nfunction jumpToStep(n) {\nif (n === current) return;\ndocument.getElementById(`ncf-step-${current}`).classList.remove('is-active');\ncurrent = n;\ndocument.getElementById(`ncf-step-${current}`).classList.add('is-active');\nrenderStepper(current);\ndocument.getElementById('ncf-modal').scrollTop = 0;\n}\nfunction goNext(n) { if (validateStep(current)) jumpToStep(n); }\nfunction pickRadio(el, name) {\nROOT().querySelectorAll(`[onclick=\"NCF.pickRadio(this,'${name}')\"]`).forEach(c => c.classList.remove('picked'));\nel.classList.add('picked');\nel.querySelector('input[type=\"radio\"]').checked = true;\nconst eb = el.closest('.box-error'); if (eb) { eb.classList.remove('box-error'); eb.querySelectorAll(':scope > .field-err').forEach(x => x.remove()); }\n}\nfunction toggleTerms() {\ntermsTicked = !termsTicked;\nconst tr = ROOT().querySelector('.terms-row'); if (tr && termsTicked) { tr.classList.remove('box-error'); const nx = tr.nextElementSibling; if (nx && nx.classList.contains('field-err')) nx.remove(); }\ndocument.getElementById('ncf-terms-box').classList.toggle('ticked', termsTicked);\n}\nfunction revealOther(selId, revId) {\nconst sel = document.getElementById(selId);\ndocument.getElementById(revId).classList.toggle('open', sel.value === 'other' || sel.value === 'ambassador');\n}\n\/* Builds a readable summary of every answer *\/\nfunction collect() {\nconst form = document.getElementById('ncf-nc-form');\nconst data = {};\nnew FormData(form).forEach((v, k) => { if (k !== 'website' && k !== 'email_confirm') data[k] = v; });\nform.querySelectorAll('select').forEach(s => {\nif (s.value && s.selectedOptions[0]) data[s.name] = s.selectedOptions[0].textContent.trim();\n});\nconst lines = Object.entries(data).filter(([k, v]) => String(v).trim()).map(([k, v]) => `${k.replace(\/_\/g, ' ')}: ${v}`);\nreturn { data, message: lines.join('\\n') };\n}\nfunction showSuccess() {\ndocument.getElementById('ncf-form-view').style.display = 'none';\ndocument.getElementById('ncf-success-view').classList.add('show');\ndocument.getElementById('ncf-modal').scrollTop = 0;\nconst b = document.getElementById('booking-btn');\nif (b && BOOKING_URL) { b.href = BOOKING_URL; b.style.display = 'inline-block'; }\n}\nfunction handleSubmit(e) {\ne.preventDefault();\nconst banner = document.getElementById('ncf-error-banner');\nbanner.textContent = 'Merci de compl\u00e9ter les champs obligatoires avant d\u2019envoyer.';\nif (!validateStep(3)) return;\nbanner.classList.remove('show');\nif (ROOT().querySelector('[name=\"website\"]').value) { showSuccess(); return; } \/\/ spam trap\nconst { data, message } = collect();\nconst btn = ROOT().querySelector('.btn-submit');\nconst label = btn.textContent;\nbtn.disabled = true; btn.textContent = 'Envoi en cours\u2026';\nconst params = Object.assign({}, data, {\nsubject: `New ${data.form_type} \u2014 ${data.first_name || ''} ${data.last_name || ''}`.trim(),\nfrom_name: `${data.first_name || ''} ${data.last_name || ''}`.trim(),\nname: `${data.first_name || ''} ${data.last_name || ''}`.trim(),\nreply_to: data.email, message: message\n});\nemailjs.send(EMAILJS_SERVICE_ID, EMAILJS_TEMPLATE_ID, params, { publicKey: EMAILJS_PUBLIC_KEY })\n.then(() => {\nshowSuccess();\nif (EMAILJS_CONFIRM_TEMPLATE_ID && data.email) {\nemailjs.send(EMAILJS_SERVICE_ID, EMAILJS_CONFIRM_TEMPLATE_ID, {\nto_email: data.email, email: data.email, to_name: data.first_name || '', name: data.first_name || '',\nform_type: data.form_type, reply_to: 'love@nubianconnections.com',\n...confirmParams(data)\n}, { publicKey: EMAILJS_PUBLIC_KEY }).catch(() => {}); \/\/ never blocks the applicant\n}\n})\n.catch(() => {\nbanner.textContent = 'D\u00e9sol\u00e9, votre demande n\u2019a pas pu \u00eatre envoy\u00e9e. Merci de r\u00e9essayer, ou d\u2019\u00e9crire \u00e0 love@nubianconnections.com.';\nbanner.classList.add('show');\ndocument.getElementById('ncf-modal').scrollTop = 0;\n})\n.finally(() => { btn.disabled = false; btn.textContent = label; });\n}\nfunction resetAll() {\ndocument.getElementById('ncf-nc-form').reset();\ndocument.getElementById('ncf-form-view').style.display = 'block';\ndocument.getElementById('ncf-success-view').classList.remove('show');\ndocument.getElementById('ncf-error-banner').classList.remove('show');\nROOT().querySelectorAll('.step-panel').forEach(p => p.classList.remove('is-active'));\ndocument.getElementById('ncf-step-1').classList.add('is-active');\nROOT().querySelectorAll('.radio-card, .intent-card').forEach(c => c.classList.remove('picked'));\nROOT().querySelectorAll('.intent-card.default').forEach(c => pickRadio(c, 'service'));\ntermsTicked = false;\ndocument.getElementById('ncf-terms-box').classList.remove('ticked');\nROOT().querySelectorAll('.other-reveal').forEach(r => r.classList.remove('open'));\nROOT().querySelectorAll('.has-error').forEach(el => el.classList.remove('has-error'));\ncurrent = 1;\nrenderStepper(1);\n}\nrenderStepper(1);\nmarkRequired();\n\/\/ ambassador tracking: ?ref=name in the link, remembered for 30 days (also set site-wide by the NC referral snippet)\n(function () {\nlet ref = '';\ntry {\nconst q = new URLSearchParams(location.search).get('ref');\nif (q) { ref = q.trim().toLowerCase().replace(\/[^a-z0-9_-]\/g, '').slice(0, 40); localStorage.setItem('nc_ref', JSON.stringify({ v: ref, t: Date.now() })); }\nelse { const st = JSON.parse(localStorage.getItem('nc_ref') || 'null'); if (st && st.v && Date.now() - st.t < 30 * 864e5) ref = st.v; }\n} catch (e) {}\nconst f = ROOT().querySelector('[name=\"referral\"]'); if (f) { if (ref) f.value = ref; }\n})();\nROOT().querySelectorAll('.intent-card.default').forEach(c => pickRadio(c, 'service'));\nwindow.addEventListener('load', () => setTimeout(openForm, 500));\nwindow.NCF = { openForm, closeForm, handleOverlayClick, jumpToStep, goNext, pickRadio, toggleTerms, revealOther, handleSubmit };\n})();\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Rejoindre le r\u00e9seau priv\u00e9 | Nubian Connections Rejoindre le r\u00e9seau priv\u00e9 Fermer \u2715 Nubian ConnectionsInternational Gratuit \u00b7 R\u00e9seau priv\u00e9 Rejoignez notrer\u00e9seau priv\u00e9. Inscription gratuite. Les femmes et les hommes peuvent rejoindre le r\u00e9seau pour \u00eatre pris en compte lors d\u2019une \u00e9ventuelle pr\u00e9sentation, lorsque la recherche d\u2019un client semble compatible. Chaque candidature est lue par … <a title=\"Rejoindre le r\u00e9seau priv\u00e9\" class=\"read-more\" href=\"https:\/\/nubianconnections.com\/fr\/rejoindre\/\" aria-label=\"En savoir plus sur Rejoindre le r\u00e9seau priv\u00e9\">Lire la suite<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-5195","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/nubianconnections.com\/fr\/wp-json\/wp\/v2\/pages\/5195","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nubianconnections.com\/fr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nubianconnections.com\/fr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nubianconnections.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nubianconnections.com\/fr\/wp-json\/wp\/v2\/comments?post=5195"}],"version-history":[{"count":1,"href":"https:\/\/nubianconnections.com\/fr\/wp-json\/wp\/v2\/pages\/5195\/revisions"}],"predecessor-version":[{"id":5211,"href":"https:\/\/nubianconnections.com\/fr\/wp-json\/wp\/v2\/pages\/5195\/revisions\/5211"}],"wp:attachment":[{"href":"https:\/\/nubianconnections.com\/fr\/wp-json\/wp\/v2\/media?parent=5195"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":5195,"date":"2026-04-03T20:57:16","date_gmt":"2026-04-03T20:57:16","guid":{"rendered":"https:\/\/nubianconnections.com\/?page_id=5195"},"modified":"2026-10-15T18:41:49","modified_gmt":"2026-10-15T18:41:49","slug":"rejoindre","status":"publish","type":"page","link":"https:\/\/nubianconnections.com\/fr\/rejoindre\/","title":{"rendered":"Rejoindre le r\u00e9seau priv\u00e9"},"content":{"rendered":"\n\n\n\n\n\nRejoindre le r\u00e9seau priv\u00e9 | Nubian Connections<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,600&family=Lato:wght@200;300;400;700&display=swap\" rel=\"stylesheet\">\n<style> :where(#ncf-overlay), :where(#ncf-overlay) *, :where(#ncf-overlay) *::before, :where(#ncf-overlay) *::after, :where(.demo-trigger) { margin: 0; padding: 0; box-sizing: border-box; } :root { --cream: #F9F5EE; --cream-2: #F3EDE2; --cream-3: #EBE2D3; --black: #07050300; --ink: #0E0A06; --burgundy: #74131F; --burg-deep: #560E17; --burg-pale: rgba(116,19,31,0.06); --gold: #9C7230; --gold-mid: #B4883C; --gold-bright: #CCA048; --gold-light: #D4AE6A; --gold-pale: rgba(156,114,48,0.10); --gold-line: rgba(156,114,48,0.20); --gold-line-md: rgba(156,114,48,0.38); --gold-line-str: rgba(156,114,48,0.55); --text-main: #0C0806; --text-body: #2A2018; --text-sub: #5C4E3C; --text-muted: #82705A; --border: rgba(14,10,6,0.18); --border-md: rgba(14,10,6,0.28); --border-focus: rgba(156,114,48,0.65); --field-bg: rgba(14,10,6,0.04); --field-focus: rgba(156,114,48,0.06); --shadow-soft: 0 2px 8px rgba(0,0,0,0.04), 0 8px 32px rgba(0,0,0,0.08); } @keyframes grainShift { 0%,100% { transform: translate(0,0); } 20% { transform: translate(-1px, 1px); } 40% { transform: translate(1px, -1px); } 60% { transform: translate(-1px,-1px); } 80% { transform: translate(1px, 1px); } } body { background: #b8af9f; background-image: radial-gradient(ellipse at 30% 40%, rgba(116,19,31,0.12) 0%, transparent 55%), radial-gradient(ellipse at 75% 70%, rgba(156,114,48,0.10) 0%, transparent 50%); font-family: 'Lato', sans-serif; } .demo-trigger { display: block; position: relative; margin: 140px auto !important; padding: 16px 38px !important; background: var(--burgundy); color: var(--cream); font-size: 11px; letter-spacing: 4px; text-transform: uppercase; cursor: pointer; border: none; z-index: 10; font-weight: 700; transition: background 0.3s, letter-spacing 0.3s; } .demo-trigger:hover { background: var(--burg-deep); letter-spacing: 5px; } .overlay { position: fixed; inset: 0; z-index: 100; background: rgba(7,5,3,0.90); backdrop-filter: blur(14px) saturate(0.75); display: flex; align-items: center; justify-content: center; padding: 16px; opacity: 0; pointer-events: none; transition: opacity 0.55s ease; } .overlay.open { opacity: 1; pointer-events: all; } .modal { background: var(--cream); width: 100%; max-width: 780px; max-height: 92vh; overflow-y: auto; position: relative; transform: translateY(40px) scale(0.985); transition: transform 0.55s cubic-bezier(.16,.84,.44,1), opacity 0.45s ease; opacity: 0; scrollbar-width: thin; scrollbar-color: rgba(156,114,48,0.25) transparent; box-shadow: 0 0 0 1px rgba(156,114,48,0.12), 0 4px 8px rgba(0,0,0,0.06), 0 16px 48px rgba(0,0,0,0.22), 0 48px 120px rgba(0,0,0,0.32); } .overlay.open .modal { transform: translateY(0) scale(1); opacity: 1; } .modal::-webkit-scrollbar { width: 2px; } .modal::-webkit-scrollbar-thumb { background: rgba(156,114,48,0.25); } .modal-crown { display: flex; flex-direction: column; gap: 0; overflow: hidden; } .crown-line { display: block; width: 100%; } .crown-line:nth-child(1) { height: 1px; background: linear-gradient(90deg, transparent 3%, rgba(156,114,48,0.3) 25%, rgba(156,114,48,0.6) 50%, rgba(156,114,48,0.3) 75%, transparent 97%); } .crown-line:nth-child(2) { height: 4px; background: linear-gradient(90deg, transparent 2%, var(--gold-mid) 18%, var(--gold-bright) 50%, var(--gold-mid) 82%, transparent 98%); } .crown-line:nth-child(3) { height: 1px; background: linear-gradient(90deg, transparent 3%, rgba(156,114,48,0.5) 25%, rgba(202,160,72,0.9) 50%, rgba(156,114,48,0.5) 75%, transparent 97%); } .close-wrap { position: sticky; top: 0; z-index: 20; display: flex; justify-content: flex-end; padding: 18px 42px 0; background: var(--cream); } .close-btn { background: none; border: none; cursor: pointer; font-size: 8px; letter-spacing: 4px; text-transform: uppercase; color: #6A5A48; transition: color 0.25s, letter-spacing 0.25s; display: flex; align-items: center; gap: 9px; font-weight: 700; } .close-btn:hover { color: var(--gold-mid); letter-spacing: 5px; } .modal-inner { padding: 6px 64px 80px; } .modal-header { text-align: center; padding: 36px 0 52px; position: relative; margin-bottom: 0; } .modal-tag { display: inline-flex; align-items: center; gap: 16px; font-size: 7.5px; letter-spacing: 7px; color: var(--burgundy); text-transform: uppercase; margin-bottom: 28px; font-weight: 700; } .modal-tag::before, .modal-tag::after { content: ''; width: 28px; height: 1px; background: currentColor; opacity: 0.5; } .modal-title { font-family: 'Playfair Display', serif; font-size: clamp(30px, 3.8vw, 48px); font-weight: 400; color: var(--ink); line-height: 1.15; margin-bottom: 20px; letter-spacing: -0.5px; } .modal-title em { color: var(--gold); font-style: italic; font-weight: 400; } .modal-sub { font-family: 'Cormorant Garamond', serif; font-size: 18px; font-style: italic; font-weight: 400; color: #2A2018; line-height: 1.75; max-width: 460px; margin: 0 auto 0; letter-spacing: 0.2px; } .header-divider { position: absolute; bottom: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: center; gap: 0; } .header-divider::before, .header-divider::after { content: ''; flex: 1; height: 1px; background: linear-gradient(to right, transparent, var(--gold-line-md)); } .header-divider::after { background: linear-gradient(to left, transparent, var(--gold-line-md)); } .header-divider-gem { font-size: 8px; color: var(--gold-mid); padding: 0 14px; letter-spacing: 6px; flex-shrink: 0; } .stepper-wrap { padding: 40px 0 44px; position: relative; } .stepper-track { position: absolute; top: 58px; left: 0; right: 0; height: 1px; background: var(--gold-line); z-index: 0; } .stepper-track-fill { position: absolute; top: 58px; left: 0; height: 1px; background: linear-gradient(to right, var(--gold-mid), var(--gold-bright)); z-index: 1; width: 0%; transition: width 0.5s cubic-bezier(.4,0,.2,1); } .stepper { display: flex; align-items: flex-start; justify-content: space-between; position: relative; z-index: 2; } .step-dot { display: flex; flex-direction: column; align-items: center; gap: 10px; cursor: pointer; flex: 1; transition: opacity 0.25s; } .step-dot:hover { opacity: 0.8; } .step-circle { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border-md); display: flex; align-items: center; justify-content: center; background: var(--cream); position: relative; z-index: 2; transition: all 0.4s cubic-bezier(.4,0,.2,1); } .step-num { font-size: 10px; font-weight: 700; letter-spacing: 0.5px; color: #5C4E3C; transition: color 0.3s; } .step-check { display: none; font-size: 13px; color: var(--cream); font-weight: 700; } .step-label { font-size: 7px; letter-spacing: 3px; text-transform: uppercase; color: #6A5A48; font-weight: 700; text-align: center; line-height: 1.4; transition: color 0.3s; white-space: nowrap; } .step-dot.is-active .step-circle { border-color: var(--gold-mid); background: var(--cream); box-shadow: 0 0 0 6px rgba(156,114,48,0.10), 0 0 0 1px var(--gold-line-md); } .step-dot.is-active .step-num { color: var(--gold); } .step-dot.is-active .step-label { color: var(--gold-mid); } .step-dot.is-done .step-circle { border-color: var(--gold); background: linear-gradient(135deg, var(--gold-bright), var(--gold)); box-shadow: 0 2px 12px rgba(156,114,48,0.30); } .step-dot.is-done .step-num { display: none; } .step-dot.is-done .step-check { display: block; } .step-dot.is-done .step-label { color: var(--gold-mid); } .section-eyebrow { display: flex; align-items: center; gap: 14px; font-size: 8px; letter-spacing: 6px; text-transform: uppercase; color: var(--gold-mid); margin-bottom: 32px; margin-top: 0; font-weight: 700; } .section-eyebrow::before { content: '\u25c6'; font-size: 5px; color: var(--gold-bright); flex-shrink: 0; } .section-eyebrow::after { content: ''; flex: 1; height: 1px; background: linear-gradient(to right, var(--gold-line-md) 0%, transparent 100%); } .step-panel { display: none; } .step-panel.is-active { display: block; animation: revealPanel 0.42s cubic-bezier(.22,.68,0,1.1) forwards; } @keyframes revealPanel { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; } .field-single { margin-bottom: 18px; } .field-label { display: block; font-size: 8.5px; letter-spacing: 4px; text-transform: uppercase; color: var(--text-main); margin-bottom: 10px; font-weight: 700; } .field-sublabel { font-weight: 300; text-transform: none; letter-spacing: 0; margin-left: 6px; font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 13.5px; color: var(--text-muted); } input[type=\"text\"], input[type=\"email\"], input[type=\"tel\"], textarea, select { width: 100%; padding: 15px 20px; background: var(--field-bg); border: none; border-bottom: 1px solid var(--border-md); color: var(--text-main); font-family: 'Lato', sans-serif; font-size: 14.5px; font-weight: 400; outline: none; transition: border-color 0.3s, background 0.3s, box-shadow 0.3s; appearance: none; -webkit-appearance: none; border-radius: 0; letter-spacing: 0.2px; border-top: 1px solid transparent; border-left: 1px solid transparent; border-right: 1px solid transparent; } input:focus, select:focus, textarea:focus { border-color: var(--gold-line-md); border-bottom-color: var(--gold-mid); background: var(--field-focus); box-shadow: 0 3px 0 -1px var(--gold-line), 0 8px 24px rgba(156,114,48,0.05); } input::placeholder, textarea::placeholder { color: #8C7A64; font-size: 13.5px; font-weight: 300; font-family: 'Cormorant Garamond', serif; font-style: italic; } textarea { resize: vertical; min-height: 128px; line-height: 1.75; } select { background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='9' height='5'%3E%3Cpath d='M0 0l4.5 5 4.5-5z' fill='rgba(156,114,48,0.65)'\/%3E%3C\/svg%3E\"); background-repeat: no-repeat; background-position: right 18px center; padding-right: 42px; cursor: pointer; } select option { background: var(--cream); color: var(--text-main); } input.has-error, select.has-error, textarea.has-error { border-bottom-color: rgba(116,19,31,0.6) !important; background: rgba(116,19,31,0.025) !important; } .other-reveal { overflow: hidden; max-height: 0; opacity: 0; transition: max-height 0.4s ease, opacity 0.35s ease, margin 0.35s ease; } .other-reveal.open { max-height: 80px; opacity: 1; margin-top: 12px; } .radio-group { display: flex; gap: 12px; } .radio-group.col { flex-direction: column; gap: 10px; } .radio-card { flex: 1; padding: 15px 20px; border: 1px solid var(--border); cursor: pointer; display: flex; align-items: center; gap: 14px; transition: border-color 0.28s, background 0.28s; user-select: none; } .radio-card:hover { border-color: var(--gold-line-str); background: var(--gold-pale); } .radio-card input[type=\"radio\"] { display: none; } .radio-card.picked { border-color: var(--gold-mid); background: var(--gold-pale); } .r-ring { width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; border: 1.5px solid var(--border-md); display: flex; align-items: center; justify-content: center; transition: border-color 0.22s; } .radio-card.picked .r-ring { border-color: var(--gold); } .r-ring::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, var(--gold-bright), var(--gold)); display: none; } .radio-card.picked .r-ring::after { display: block; } .r-text { font-size: 13.5px; color: #2A2018; font-weight: 400; line-height: 1.4; } .radio-card.picked .r-text { color: var(--text-main); font-weight: 700; } .intent-card { padding: 26px 30px; border: 1px solid var(--border); cursor: pointer; display: flex; align-items: flex-start; gap: 20px; transition: border-color 0.28s, background 0.28s, box-shadow 0.28s; margin-bottom: 14px; user-select: none; position: relative; overflow: hidden; } .intent-card::before { content: ''; position: absolute; left: 0; top: 8%; bottom: 8%; width: 0; background: linear-gradient(to bottom, var(--gold-bright), var(--gold)); transition: width 0.35s ease; border-radius: 0 2px 2px 0; } .intent-card:hover { border-color: var(--gold-line-str); background: var(--gold-pale); } .intent-card input[type=\"radio\"] { display: none; } .intent-card.picked { border-color: var(--gold-mid); background: var(--gold-pale); box-shadow: 0 4px 24px rgba(156,114,48,0.08); } .intent-card.picked::before { width: 3px; } .i-ring { width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; border: 1.5px solid var(--border-md); display: flex; align-items: center; justify-content: center; transition: border-color 0.22s; } .intent-card.picked .i-ring { border-color: var(--gold); } .i-ring::after { content: ''; width: 9px; height: 9px; border-radius: 50%; background: linear-gradient(135deg, var(--gold-bright), var(--gold)); display: none; } .intent-card.picked .i-ring::after { display: block; } .intent-content { flex: 1; } .intent-badge { display: inline-block; font-size: 7px; letter-spacing: 3.5px; text-transform: uppercase; padding: 4px 11px; margin-bottom: 13px; border: 1px solid currentColor; font-weight: 700; } .badge-free { color: var(--text-muted); } .badge-premium { color: var(--gold); } .intent-content h4 { font-family: 'Playfair Display', serif; font-size: 17px; font-weight: 500; color: var(--text-main); margin-bottom: 9px; letter-spacing: -0.2px; } .intent-content p { font-size: 13.5px; color: #2A2018; line-height: 1.7; font-weight: 400; } .intent-note { margin-top: 11px !important; font-family: 'Cormorant Garamond', serif !important; font-size: 15.5px !important; font-style: italic !important; color: var(--text-sub) !important; font-weight: 300 !important; } .terms-row { display: flex; align-items: flex-start; gap: 18px; padding: 22px 26px; border: 1px solid var(--border); background: var(--cream-2); margin-top: 32px; cursor: pointer; transition: border-color 0.25s, background 0.25s; } .terms-row:hover { border-color: var(--gold-line-str); background: var(--gold-pale); } .terms-box { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; border: 1.5px solid var(--border-md); display: flex; align-items: center; justify-content: center; transition: all 0.22s; } .terms-box.ticked { border-color: var(--gold); background: rgba(156,114,48,0.12); } .terms-box.ticked::after { content: '\u2713'; font-size: 11px; color: var(--gold); font-weight: 700; } .terms-text { font-size: 13px; color: #2A2018; line-height: 1.8; font-weight: 400; } .terms-text a { color: var(--gold-mid); text-decoration: none; font-weight: 400; border-bottom: 1px solid var(--gold-line); transition: color 0.2s; } .terms-text a:hover { color: var(--gold-bright); } .step-nav { display: flex; gap: 14px; margin-top: 44px; align-items: stretch; } .btn-prev { flex-shrink: 0; padding: 0 28px; background: transparent; border: 1px solid var(--border-md); color: #5C4E3C; font-family: 'Lato', sans-serif; font-size: 8.5px; letter-spacing: 3.5px; text-transform: uppercase; cursor: pointer; font-weight: 700; transition: all 0.25s; display: flex; align-items: center; gap: 10px; min-height: 54px; } .btn-prev:hover { border-color: var(--gold-line-str); color: var(--gold-mid); background: var(--gold-pale); } .btn-next { flex: 1; padding: 0 32px; background: var(--burgundy); color: var(--cream); font-family: 'Lato', sans-serif; font-size: 9px; letter-spacing: 5px; text-transform: uppercase; border: none; cursor: pointer; font-weight: 700; transition: background 0.3s, letter-spacing 0.3s, box-shadow 0.3s; position: relative; overflow: hidden; min-height: 54px; display: flex; align-items: center; justify-content: center; gap: 12px; } .btn-next::after { content: ''; position: absolute; top: 0; left: -100%; bottom: 0; width: 55%; background: linear-gradient(90deg, transparent, rgba(255,220,130,0.12), transparent); transition: left 0.65s ease; } .btn-next:hover { background: var(--burg-deep); letter-spacing: 6.5px; box-shadow: 0 6px 28px rgba(116,19,31,0.28); } .btn-next:hover::after { left: 160%; } .btn-submit { flex: 1; padding: 0 32px; background: var(--burgundy); color: var(--cream); font-family: 'Lato', sans-serif; font-size: 9px; letter-spacing: 5px; text-transform: uppercase; border: none; cursor: pointer; font-weight: 700; transition: background 0.3s, letter-spacing 0.3s, box-shadow 0.3s; position: relative; overflow: hidden; min-height: 54px; } .btn-submit::after { content: ''; position: absolute; top: 0; left: -100%; bottom: 0; width: 55%; background: linear-gradient(90deg, transparent, rgba(255,220,130,0.12), transparent); transition: left 0.65s ease; } .btn-submit:hover { background: var(--burg-deep); letter-spacing: 6.5px; box-shadow: 0 6px 28px rgba(116,19,31,0.28); } .btn-submit:hover::after { left: 160%; } .submit-caption { text-align: center; margin-top: 20px; font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 14px; font-weight: 300; color: var(--gold-mid); letter-spacing: 1px; } .form-foot { text-align: center; margin-top: 36px; font-size: 8px; letter-spacing: 8px; color: var(--gold-line-str); } .success-view { display: none; position: relative; overflow: hidden; background: var(--ink); min-height: 560px; } .success-view.show { display: flex; flex-direction: column; align-items: center; justify-content: center; animation: successReveal 0.7s cubic-bezier(.16,.84,.44,1) forwards; } @keyframes successReveal { from { opacity: 0; } to { opacity: 1; } } .success-view::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 20% 50%, rgba(116,19,31,0.45) 0%, transparent 55%), radial-gradient(ellipse at 80% 30%, rgba(156,114,48,0.22) 0%, transparent 50%), radial-gradient(ellipse at 55% 85%, rgba(116,19,31,0.20) 0%, transparent 45%); pointer-events: none; } .success-view::after { content: ''; position: absolute; inset: 0; background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='4' stitchTiles='stitch'\/%3E%3CfeColorMatrix type='saturate' values='0'\/%3E%3C\/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.055'\/%3E%3C\/svg%3E\"); pointer-events: none; } .success-inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; padding: 80px 64px 72px; text-align: center; } .success-diamond { width: 64px; height: 64px; position: relative; margin-bottom: 44px; animation: diamondSpin 1.2s cubic-bezier(.22,.68,0,1.2) forwards; opacity: 0; } @keyframes diamondSpin { 0% { opacity: 0; transform: rotate(-90deg) scale(0.5); } 60% { opacity: 1; transform: rotate(8deg) scale(1.05); } 100% { opacity: 1; transform: rotate(0deg) scale(1); } } .success-diamond svg { width: 64px; height: 64px; } .success-diamond .gem-outer { fill: none; stroke: var(--gold-mid); stroke-width: 1; } .success-diamond .gem-inner { fill: none; stroke: var(--gold-bright); stroke-width: 0.6; opacity: 0.6; } .success-diamond .gem-cross { stroke: rgba(202,160,72,0.35); stroke-width: 0.5; } .success-tag { font-size: 7.5px; letter-spacing: 7px; text-transform: uppercase; color: var(--gold-mid); font-weight: 700; margin-bottom: 28px; display: flex; align-items: center; gap: 14px; animation: fadeUp 0.6s 0.3s ease both; } .success-tag::before, .success-tag::after { content: ''; width: 32px; height: 1px; background: linear-gradient(to right, transparent, var(--gold-line-str)); } .success-tag::after { background: linear-gradient(to left, transparent, var(--gold-line-str)); } @keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } .success-headline { font-family: 'Playfair Display', serif; font-size: clamp(34px, 4.5vw, 54px); font-weight: 400; line-height: 1.12; color: var(--cream); letter-spacing: -0.5px; margin-bottom: 10px; animation: fadeUp 0.6s 0.45s ease both; } .success-headline em { color: var(--gold-bright); font-style: italic; display: block; } .success-rule { width: 1px; height: 52px; margin: 32px auto; background: linear-gradient(to bottom, transparent, var(--gold-mid), transparent); animation: fadeUp 0.6s 0.6s ease both; } .success-body { font-family: 'Cormorant Garamond', serif; font-size: 19px; font-style: italic; font-weight: 400; color: rgba(249,245,238,0.75); line-height: 1.8; max-width: 400px; margin-bottom: 14px; animation: fadeUp 0.6s 0.7s ease both; } .success-note { font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: rgba(249,245,238,0.35); font-weight: 700; margin-bottom: 52px; animation: fadeUp 0.6s 0.8s ease both; } .success-actions { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; max-width: 320px; animation: fadeUp 0.6s 0.9s ease both; } .success-close { width: 100%; padding: 17px 52px; background: linear-gradient(135deg, var(--gold-bright), var(--gold)); border: none; color: var(--ink); font-family: 'Lato', sans-serif; font-size: 8.5px; letter-spacing: 5px; text-transform: uppercase; cursor: pointer; font-weight: 700; transition: all 0.3s; position: relative; overflow: hidden; } .success-close::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, transparent 40%, rgba(255,255,255,0.12) 50%, transparent 60%); transform: translateX(-100%); transition: transform 0.5s ease; } .success-close:hover { letter-spacing: 6px; box-shadow: 0 6px 30px rgba(156,114,48,0.45); } .success-close:hover::after { transform: translateX(100%); } .success-link { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 14px; color: rgba(249,245,238,0.45); background: none; border: none; cursor: pointer; transition: color 0.25s; letter-spacing: 0.3px; } .success-link:hover { color: rgba(249,245,238,0.75); } .success-filigree { position: absolute; bottom: 28px; left: 0; right: 0; text-align: center; z-index: 2; font-size: 8px; letter-spacing: 10px; color: rgba(156,114,48,0.35); } .error-banner { background: rgba(116,19,31,0.06); border: 1px solid rgba(116,19,31,0.25); padding: 14px 20px; margin-bottom: 24px; font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 15px; color: var(--burgundy); display: none; animation: revealPanel 0.3s ease; } .error-banner.show { display: block; } @media (max-width: 620px) { .modal-inner { padding: 4px 26px 60px; } .field-row { grid-template-columns: 1fr; } .radio-group { flex-direction: column; } .step-label { font-size: 6px; letter-spacing: 1.5px; } .step-circle { width: 34px; height: 34px; } .btn-prev { padding: 0 18px; } } .wordmark { font-family:'Playfair Display',serif; font-size:15px; letter-spacing:6px; text-transform:uppercase; color:var(--text-main); text-align:center; } .wordmark span { color:var(--gold); } .wordmark small { display:block; font-family:'Lato',sans-serif; font-size:8px; letter-spacing:5px; color:var(--text-muted); margin-top:6px; } .form-badge { display:inline-block; font-family:'Lato',sans-serif; font-size:9px; font-weight:700; letter-spacing:4px; text-transform:uppercase; padding:8px 16px; margin-bottom:20px; border:1px solid var(--gold-line-md); color:var(--gold); } .form-badge.paid { background:var(--gold-bright); color:#14100C; border-color:var(--gold-bright); } .paid-note { font-family:'Lato',sans-serif; font-size:12.5px; letter-spacing:.3px; color:var(--gold-light); margin-top:14px; } .theme-paid .close-wrap { background:var(--burgundy); } .theme-paid .close-btn { color:rgba(249,245,238,.75); } .theme-paid .modal-crown .crown-line { opacity:.9; } .theme-paid .modal-header { background:var(--burgundy); margin:-6px -64px 40px; padding:30px 64px 44px; } .theme-paid .modal-header .wordmark { color:#F9F5EE; } .theme-paid .modal-header .wordmark span { color:#E2C07A; } .theme-paid .modal-header .wordmark small { color:rgba(249,245,238,.6); } .theme-paid .modal-title { color:#F9F5EE; } .theme-paid .modal-title em { color:#E2C07A; } .theme-paid .modal-sub { color:rgba(249,245,238,.88); } .theme-paid .paid-note { color:#E2C07A; } .theme-paid .header-divider { opacity:.6; } .theme-paid .header-divider-gem { color:#E2C07A; } .theme-paid .form-badge.paid { background:#E2C07A; border-color:#E2C07A; color:#3A0A10; } .theme-paid .intent-card.picked { border-color:var(--burgundy); } .req { color: var(--burgundy); font-weight: 700; } .box-error .field-label { color: var(--burgundy); } input.has-error, select.has-error, textarea.has-error { border: 1px solid rgba(116,19,31,0.75) !important; background: rgba(116,19,31,0.05) !important; } .box-error .radio-card, .box-error .intent-card { border-color: rgba(116,19,31,0.6); } .terms-row.box-error { border-color: rgba(116,19,31,0.75); background: rgba(116,19,31,0.05); } .field-err { margin-top: 8px; font-family: 'Lato', sans-serif; font-size: 12.5px; font-weight: 700; color: var(--burgundy); letter-spacing: .2px; } .field-err::before { content: '! '; } .step-alert { margin: -10px 0 26px; padding: 14px 18px; border-left: 3px solid var(--burgundy); background: rgba(116,19,31,0.06); font-family: 'Lato', sans-serif; font-size: 13.5px; color: var(--burgundy); font-weight: 700; animation: revealPanel .3s ease; } @media (max-width: 620px) { .theme-paid .modal-header { margin:-4px -26px 32px; padding:26px 26px 36px; } } <\/style>\n<\/head>\n<body>\n<button class=\"demo-trigger\" onclick=\"NCF.openForm()\">Rejoindre le r\u00e9seau priv\u00e9<\/button>\n<div class=\"overlay \" id=\"ncf-overlay\" onclick=\"NCF.handleOverlayClick(event)\">\n<div class=\"modal\" id=\"ncf-modal\">\n<div class=\"modal-crown\">\n<span class=\"crown-line\"><\/span>\n<span class=\"crown-line\"><\/span>\n<span class=\"crown-line\"><\/span>\n<\/div>\n<div class=\"close-wrap\">\n<button class=\"close-btn\" onclick=\"NCF.closeForm()\">Fermer \u2715<\/button>\n<\/div>\n<div class=\"modal-inner\" id=\"ncf-form-view\">\n<div class=\"modal-header\">\n<div style=\"margin-bottom:28px;\">\n<div class=\"wordmark\">Nubian <span>Connections<\/span><small>International<\/small><\/div>\n<\/div>\n<div class=\"form-badge\">Gratuit \u00b7 R\u00e9seau priv\u00e9<\/div>\n<h2 class=\"modal-title\">Rejoignez notre<br><em>r\u00e9seau priv\u00e9.<\/em><\/h2>\n<p class=\"modal-sub\">Inscription gratuite. Les femmes et les hommes peuvent rejoindre le r\u00e9seau pour \u00eatre pris en compte lors d\u2019une \u00e9ventuelle pr\u00e9sentation, lorsque la recherche d\u2019un client semble compatible. Chaque candidature est lue par une personne, pas par un algorithme.<\/p>\n<div class=\"header-divider\">\n<span class=\"header-divider-gem\">\u25c6 \u25c6 \u25c6<\/span>\n<\/div>\n<\/div>\n<div class=\"stepper-wrap\">\n<div class=\"stepper-track\"><\/div>\n<div class=\"stepper-track-fill\" id=\"ncf-track-fill\"><\/div>\n<div class=\"stepper\" id=\"ncf-stepper\">\n<div class=\"step-dot is-active\" data-step=\"1\" onclick=\"NCF.jumpToStep(1)\">\n<div class=\"step-circle\">\n<span class=\"step-num\">01<\/span>\n<span class=\"step-check\">\u2713<\/span>\n<\/div>\n<div class=\"step-label\">\u00c0 propos<br>de vous<\/div>\n<\/div>\n<div class=\"step-dot\" data-step=\"2\" onclick=\"NCF.jumpToStep(2)\">\n<div class=\"step-circle\">\n<span class=\"step-num\">02<\/span>\n<span class=\"step-check\">\u2713<\/span>\n<\/div>\n<div class=\"step-label\">Votre<br>recherche<\/div>\n<\/div>\n<div class=\"step-dot\" data-step=\"3\" onclick=\"NCF.jumpToStep(3)\">\n<div class=\"step-circle\">\n<span class=\"step-num\">03<\/span>\n<span class=\"step-check\">\u2713<\/span>\n<\/div>\n<div class=\"step-label\">Votre<br>histoire<\/div>\n<\/div>\n<\/div>\n<\/div>\n<form id=\"ncf-nc-form\" onsubmit=\"NCF.handleSubmit(event)\" novalidate>\n<input type=\"hidden\" name=\"form_type\" value=\"Private Network (free)\">\n<input type=\"hidden\" name=\"referral\" value=\"\">\n<input type=\"text\" name=\"website\" tabindex=\"-1\" autocomplete=\"off\" style=\"position:absolute;left:-9999px;opacity:0;height:0;width:0\" aria-hidden=\"true\">\n<div class=\"step-panel is-active\" id=\"ncf-step-1\">\n<div class=\"section-eyebrow\">\u00c0 propos de vous<\/div>\n<div class=\"field-row\">\n<div>\n<label class=\"field-label\">Pr\u00e9nom<\/label>\n<input type=\"text\" name=\"first_name\" placeholder=\"Votre pr\u00e9nom\">\n<\/div>\n<div>\n<label class=\"field-label\">Nom<\/label>\n<input type=\"text\" name=\"last_name\" placeholder=\"Votre nom\">\n<\/div>\n<\/div>\n<div class=\"field-row\">\n<div>\n<label class=\"field-label\">E-mail<\/label>\n<input type=\"email\" name=\"email\" id=\"ncf-email-a\" placeholder=\"votre@email.com\">\n<\/div>\n<div>\n<label class=\"field-label\">Confirmez votre e-mail<\/label>\n<input type=\"email\" name=\"email_confirm\" id=\"ncf-email-b\" placeholder=\"Confirmez votre e-mail\">\n<\/div>\n<\/div>\n<div class=\"field-single\">\n<label class=\"field-label\">T\u00e9l\u00e9phone <span class=\"field-sublabel\">WhatsApp de pr\u00e9f\u00e9rence \u2014 obligatoire<\/span><\/label>\n<input type=\"tel\" name=\"phone\" id=\"ncf-phone\" placeholder=\"+33 6 00 00 00 00\">\n<\/div>\n<div class=\"field-row\">\n<div>\n<label class=\"field-label\">Ville<\/label>\n<input type=\"text\" name=\"city\" placeholder=\"Votre ville\">\n<\/div>\n<div>\n<label class=\"field-label\">Pays<\/label>\n<input type=\"text\" name=\"country\" placeholder=\"Votre pays\">\n<\/div>\n<\/div>\n<div class=\"field-single\">\n<label class=\"field-label\">Je suis\u2026<\/label>\n<div class=\"radio-group\">\n<label class=\"radio-card\" onclick=\"NCF.pickRadio(this,'gender')\">\n<input type=\"radio\" name=\"gender\" value=\"woman\">\n<div class=\"r-ring\"><\/div><span class=\"r-text\">Une femme<\/span>\n<\/label>\n<label class=\"radio-card\" onclick=\"NCF.pickRadio(this,'gender')\">\n<input type=\"radio\" name=\"gender\" value=\"man\">\n<div class=\"r-ring\"><\/div><span class=\"r-text\">Un homme<\/span>\n<\/label>\n<\/div>\n<\/div>\n<div class=\"field-single\">\n<label class=\"field-label\">Langue pr\u00e9f\u00e9r\u00e9e<\/label>\n<div class=\"radio-group\">\n<label class=\"radio-card\" onclick=\"NCF.pickRadio(this,'language')\">\n<input type=\"radio\" name=\"language\" value=\"English\">\n<div class=\"r-ring\"><\/div><span class=\"r-text\">Anglais<\/span>\n<\/label>\n<label class=\"radio-card\" onclick=\"NCF.pickRadio(this,'language')\">\n<input type=\"radio\" name=\"language\" value=\"French\" checked>\n<div class=\"r-ring\"><\/div><span class=\"r-text\">Fran\u00e7ais<\/span>\n<\/label>\n<\/div>\n<\/div>\n<div class=\"field-single\">\n<label class=\"field-label\">Date de naissance<\/label>\n<div style=\"display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;\">\n<select name=\"dob_month\">\n<option value=\"\" disabled selected>Mois<\/option>\n<option>Janvier<\/option><option>F\u00e9vrier<\/option><option>Mars<\/option>\n<option>Avril<\/option><option>Mai<\/option><option>Juin<\/option>\n<option>Juillet<\/option><option>Ao\u00fbt<\/option><option>Septembre<\/option>\n<option>Octobre<\/option><option>Novembre<\/option><option>D\u00e9cembre<\/option>\n<\/select>\n<select name=\"dob_day\">\n<option value=\"\" disabled selected>Jour<\/option>\n<script>for(let i=1;i<=31;i++) document.write(`<option>${i}<\/option>`);<\/script>\n<\/select>\n<select name=\"dob_year\">\n<option value=\"\" disabled selected>Ann\u00e9e<\/option>\n<script>for(let i=new Date().getFullYear()-18;i>=1940;i--) document.write(`<option>${i}<\/option>`);<\/script>\n<\/select>\n<\/div>\n<\/div>\n<div class=\"field-single\">\n<label class=\"field-label\">Nationalit\u00e9<\/label>\n<input type=\"text\" name=\"nationality\" placeholder=\"ex. fran\u00e7aise, ivoirienne, camerounaise, britannique\u2026\">\n<\/div>\n<div class=\"field-single\">\n<label class=\"field-label\">Situation familiale<\/label>\n<select name=\"marital_status\">\n<option value=\"\" disabled selected>Choisissez votre situation<\/option>\n<option value=\"single\">C\u00e9libataire \u2014 jamais mari\u00e9\u00b7e<\/option>\n<option value=\"divorced\">Divorc\u00e9\u00b7e<\/option>\n<option value=\"widowed\">Veuf \/ veuve<\/option>\n<option value=\"separated\">S\u00e9par\u00e9\u00b7e<\/option>\n<\/select>\n<\/div>\n<div class=\"field-single\">\n<label class=\"field-label\">Niveau d\u2019\u00e9tudes<\/label>\n<select name=\"education\" id=\"ncf-edu-select\" onchange=\"NCF.revealOther('ncf-edu-select','ncf-edu-other')\">\n<option value=\"\" disabled selected>Choisissez votre niveau le plus \u00e9lev\u00e9<\/option>\n<option value=\"secondary\">Secondaire \/ baccalaur\u00e9at<\/option>\n<option value=\"undergraduate\">Licence \/ bachelor<\/option>\n<option value=\"postgraduate\">Master<\/option>\n<option value=\"doctorate\">Doctorat<\/option>\n<option value=\"professional\">Dipl\u00f4me professionnel<\/option>\n<option value=\"other\">Autre<\/option>\n<\/select>\n<div class=\"other-reveal\" id=\"ncf-edu-other\">\n<input type=\"text\" name=\"education_other\" placeholder=\"Pr\u00e9cisez\u2026\">\n<\/div>\n<\/div>\n<div class=\"field-single\">\n<label class=\"field-label\">Profession<\/label>\n<input type=\"text\" name=\"profession\" placeholder=\"Votre profession ou secteur\">\n<\/div>\n<div class=\"step-nav\">\n<button type=\"button\" class=\"btn-next\" onclick=\"NCF.goNext(2)\">Continuer \u2192<\/button>\n<\/div>\n<\/div>\n<div class=\"step-panel\" id=\"ncf-step-2\">\n<div class=\"section-eyebrow\">Votre recherche<\/div>\n<div class=\"field-single\">\n<label class=\"field-label\">Mobilit\u00e9 g\u00e9ographique<\/label>\n<select name=\"geography\">\n<option value=\"\" disabled selected>Choisissez votre pr\u00e9f\u00e9rence<\/option>\n<option value=\"same_city\">M\u00eame ville uniquement<\/option>\n<option value=\"same_country\">M\u00eame pays<\/option>\n<option value=\"other_countries\">Ouvert\u00b7e \u00e0 d\u2019autres pays<\/option>\n<option value=\"international\">Ouvert\u00b7e \u00e0 l\u2019international<\/option>\n<\/select>\n<\/div>\n<div class=\"field-single\">\n<label class=\"field-label\">Recherchez-vous une relation s\u00e9rieuse ?<\/label>\n<div class=\"radio-group col\">\n<label class=\"radio-card\" onclick=\"NCF.pickRadio(this,'serious')\">\n<input type=\"radio\" name=\"serious\" value=\"yes\">\n<div class=\"r-ring\"><\/div>\n<span class=\"r-text\">Oui \u2014 je suis pr\u00eat\u00b7e pour une relation engag\u00e9e<\/span>\n<\/label>\n<label class=\"radio-card\" onclick=\"NCF.pickRadio(this,'serious')\">\n<input type=\"radio\" name=\"serious\" value=\"open\">\n<div class=\"r-ring\"><\/div>\n<span class=\"r-text\">J\u2019y suis ouvert\u00b7e, en prenant mon temps<\/span>\n<\/label>\n<\/div>\n<\/div>\n<div class=\"field-single\">\n<label class=\"field-label\">D\u00e9crivez-vous<\/label>\n<textarea name=\"about_self\" placeholder=\"Votre personnalit\u00e9, votre mode de vie, ce qui fait qui vous \u00eates\u2026\"><\/textarea>\n<\/div>\n<div class=\"field-single\">\n<label class=\"field-label\">Qu\u2019est-ce qui compte le plus pour vous chez un\u00b7e partenaire ?<\/label>\n<textarea name=\"about_partner\" placeholder=\"Valeurs, personnalit\u00e9, mode de vie, points non n\u00e9gociables\u2026\"><\/textarea>\n<\/div>\n<div class=\"step-nav\">\n<button type=\"button\" class=\"btn-prev\" onclick=\"NCF.jumpToStep(1)\">\u2190 Retour<\/button>\n<button type=\"button\" class=\"btn-next\" onclick=\"NCF.goNext(3)\">Continuer \u2192<\/button>\n<\/div>\n<\/div>\n<div class=\"step-panel\" id=\"ncf-step-3\">\n<div class=\"section-eyebrow\">Votre histoire<\/div>\n<div class=\"error-banner\" id=\"ncf-error-banner\">\nMerci de compl\u00e9ter les champs obligatoires avant d\u2019envoyer.\n<\/div>\n<div class=\"field-single\">\n<label class=\"field-label\">Comment nous avez-vous connus ?<\/label>\n<select name=\"source\" id=\"ncf-src-select\" onchange=\"NCF.revealOther('ncf-src-select','ncf-src-other')\">\n<option value=\"\" disabled selected>Choisissez une option<\/option>\n<option value=\"friend\">Bouche-\u00e0-oreille \u2014 un\u00b7e ami\u00b7e ou un membre<\/option>\n<option value=\"instagram\">Instagram<\/option>\n<option value=\"google\">Recherche Google<\/option>\n<option value=\"linkedin\">LinkedIn<\/option>\n<option value=\"event\">Un \u00e9v\u00e9nement<\/option>\n<option value=\"press\">Presse ou m\u00e9dias<\/option>\n<option value=\"ambassador\">Un\u00b7e ambassadeur\u00b7rice ou influenceur\u00b7se<\/option>\n<option value=\"other\">Autre<\/option>\n<\/select>\n<div class=\"other-reveal\" id=\"ncf-src-other\">\n<input type=\"text\" name=\"source_other\" placeholder=\"Pr\u00e9cisez (ex. le nom de l\u2019ambassadeur\u00b7rice)\u2026\">\n<\/div>\n<\/div>\n<div class=\"field-single\">\n<label class=\"field-label\">Pourquoi souhaitez-vous rejoindre notre r\u00e9seau ?<\/label>\n<textarea name=\"why_select\" placeholder=\"Que souhaitez-vous que nous sachions de vous ? Qu\u2019apportez-vous aux personnes que vous rencontrez ?\"><\/textarea>\n<\/div>\n<p class=\"intent-note\" style=\"margin:6px 0 22px;\">L\u2019adh\u00e9sion gratuite n\u2019inclut ni recherche d\u00e9di\u00e9e, ni coaching, ni pr\u00e9sentations garanties. Si la recherche d\u2019un client semble compatible avec votre profil, nous pourrons vous contacter pour conna\u00eetre votre int\u00e9r\u00eat.<\/p>\n<div class=\"terms-row\" onclick=\"NCF.toggleTerms()\">\n<div class=\"terms-box\" id=\"ncf-terms-box\"><\/div>\n<div class=\"terms-text\">\nJ\u2019accepte les <a href=\"https:\/\/nubianconnections.com\/fr\/conditions-generales\/\" target=\"_blank\" rel=\"noopener\" onclick=\"event.stopPropagation()\">Conditions g\u00e9n\u00e9rales<\/a> et la <a href=\"https:\/\/nubianconnections.com\/fr\/politique-de-confidentialite\/\" target=\"_blank\" rel=\"noopener\" onclick=\"event.stopPropagation()\">Politique de confidentialit\u00e9<\/a>. Mes informations seront trait\u00e9es en toute discr\u00e9tion et ne seront jamais partag\u00e9es sans mon accord.\n<\/div>\n<\/div>\n<div class=\"step-nav\">\n<button type=\"button\" class=\"btn-prev\" onclick=\"NCF.jumpToStep(2)\">\u2190 Retour<\/button>\n<button type=\"submit\" class=\"btn-submit\">Rejoindre le r\u00e9seau priv\u00e9<\/button>\n<\/div>\n<p class=\"submit-caption\">\u25c6 Inscription gratuite \u00b7 Sans obligation d\u2019achat \u25c6<\/p>\n<div class=\"form-foot\">\u25c6 \u25c6 \u25c6<\/div>\n<\/div>\n<\/form>\n<\/div>\n<div class=\"success-view\" id=\"ncf-success-view\">\n<div class=\"success-inner\">\n\n<div class=\"success-diamond\">\n<svg viewBox=\"0 0 64 64\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\n<rect class=\"gem-outer\" x=\"9\" y=\"9\" width=\"46\" height=\"46\" rx=\"1\" transform=\"rotate(45 32 32)\"\/>\n\n<rect class=\"gem-inner\" x=\"16\" y=\"16\" width=\"32\" height=\"32\" rx=\"0.5\" transform=\"rotate(45 32 32)\"\/>\n\n<line class=\"gem-cross\" x1=\"32\" y1=\"2\" x2=\"32\" y2=\"62\"\/>\n<line class=\"gem-cross\" x1=\"2\" y1=\"32\" x2=\"62\" y2=\"32\"\/>\n\n<line class=\"gem-cross\" x1=\"12\" y1=\"12\" x2=\"52\" y2=\"52\" opacity=\"0.4\"\/>\n<line class=\"gem-cross\" x1=\"52\" y1=\"12\" x2=\"12\" y2=\"52\" opacity=\"0.4\"\/>\n\n<circle cx=\"32\" cy=\"32\" r=\"2\" fill=\"rgba(202,160,72,0.5)\"\/>\n<\/svg>\n<\/div>\n<div class=\"success-tag\">Nubian Connections<\/div>\n<h2 class=\"success-headline\">Votre candidature<em>a bien \u00e9t\u00e9 re\u00e7ue.<\/em><\/h2>\n<div class=\"success-rule\"><\/div>\n<p class=\"success-body\">Chaque candidature est lue personnellement par notre \u00e9quipe.<br>Si votre profil est accept\u00e9, nous vous contacterons pour compl\u00e9ter votre questionnaire membre.<\/p>\n<p class=\"success-note\">\u25c6 Confidentiel \u00b7 Personnel \u00b7 Discret \u25c6<\/p>\n<div class=\"success-actions\">\n<button class=\"success-close\" onclick=\"NCF.closeForm()\">Fermer cette fen\u00eatre<\/button>\n<a class=\"success-link\" href=\"https:\/\/nubianconnections.com\/fr\/\" style=\"text-decoration:none;display:inline-block;\">Retour \u00e0 Nubian Connections<\/a>\n<\/div>\n<\/div>\n<div class=\"success-filigree\">\u25c6 \u25c6 \u25c6<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/@emailjs\/browser@4.4.1\/dist\/email.min.js\"><\/script>\n<script>(function(){\nconst ROOT = () => document.getElementById('ncf-overlay');\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 SETTINGS \u2014 check these before going live \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\nconst EMAILJS_PUBLIC_KEY = 'mq94-ujfcMRRR1A2u';\nconst EMAILJS_SERVICE_ID = 'service_54mk4qs';\nconst EMAILJS_TEMPLATE_ID = 'template_gnbpe0o'; \/\/ notification to you: it must display {{message}}\nconst EMAILJS_CONFIRM_TEMPLATE_ID = 'template_upc0p77'; \/\/ automatic confirmation to the applicant (To Email = {{to_email}})\nconst CONFIRM = {\"en\": {\"default\": \"<p style=\\\"margin:0 0 14px;\\\">Thank you for applying to join the Nubian Connections private network. Chaque candidature est lue personnellement par notre \u00e9quipe.<\/p><p style=\\\"margin:0 0 14px;\\\">Si votre profil est accept\u00e9, nous vous contacterons pour compl\u00e9ter votre questionnaire membre. Free membership does not include a dedicated search or guaranteed introductions.<\/p><p style=\\\"margin:0 0 14px;\\\">Your information will be handled with care and in complete confidentiality.<\/p>\"}, \"fr\": {\"default\": \"<p style=\\\"margin:0 0 14px;\\\">Merci pour votre candidature au r\u00e9seau priv\u00e9 Nubian Connections. Chaque candidature est lue personnellement par notre \u00e9quipe.<\/p><p style=\\\"margin:0 0 14px;\\\">Si votre profil est accept\u00e9, nous vous contacterons pour compl\u00e9ter votre questionnaire membre. L\u2019adh\u00e9sion gratuite n\u2019inclut pas de recherche d\u00e9di\u00e9e ni de pr\u00e9sentations garanties.<\/p><p style=\\\"margin:0 0 14px;\\\">Vos informations seront trait\u00e9es avec attention et en toute confidentialit\u00e9.<\/p>\"}}; \/\/ confirmation text by language, then by service ('default' otherwise)\nfunction confirmParams(data) {\nconst lg = (data.language === 'French' && CONFIRM.fr) ? 'fr' : 'en';\nconst set = CONFIRM[lg] || {};\nconst txt = set[data.service] || set['default'] || CONFIRM.en['default'];\nreturn lg === 'fr' ? { message_fr: txt } : { message: txt };\n}\nconst BOOKING_URL = ''; \/\/ e.g. your Calendly link \u2014 leave empty if not used\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\nlet current = 1;\nconst STEPS = 3;\nlet termsTicked = false;\nconst fillPct = { 1: '0.0%', 2: '50.0%', 3: '100.0%' };\nfunction openForm() {\ndocument.getElementById('ncf-overlay').classList.add('open');\ndocument.body.style.overflow = 'hidden';\n}\nfunction closeForm() {\ndocument.getElementById('ncf-overlay').classList.remove('open');\ndocument.body.style.overflow = '';\nsetTimeout(resetAll, 500);\n}\nfunction handleOverlayClick(e) {\nif (e.target === document.getElementById('ncf-overlay')) closeForm();\n}\ndocument.addEventListener('keydown', e => { if (e.key === 'Escape') closeForm(); });\nfunction renderStepper(active) {\nfor (let i = 1; i <= STEPS; i++) {\nconst dot = ROOT().querySelector(`.step-dot[data-step=\"${i}\"]`);\ndot.classList.remove('is-active', 'is-done');\nif (i < active) dot.classList.add('is-done');\nif (i === active) dot.classList.add('is-active');\n}\ndocument.getElementById('ncf-track-fill').style.width = fillPct[active];\n}\nlet COLLECT = null; \/\/ when set, validation only lists the required fields (used to add the * marks)\nfunction fieldBox(el) { return el.closest('.field-single') || el.parentElement; }\nfunction markError(el, box, msg) {\nif (COLLECT) return;\nif (el) el.classList.add('has-error');\nbox.classList.add('box-error');\nif (!box.querySelector(':scope > .field-err')) {\nconst m = document.createElement('div'); m.className = 'field-err'; m.textContent = msg || 'Merci de compl\u00e9ter ce champ.';\nbox.appendChild(m);\n}\n}\nfunction need(names, ok) {\nnames.forEach(name => {\nconst el = ROOT().querySelector(`[name=\"${name}\"]`);\nif (!el) return;\nif (COLLECT) { COLLECT.push(fieldBox(el)); return; }\nif (!String(el.value).trim()) { markError(el, fieldBox(el)); ok = false; }\n});\nreturn ok;\n}\nfunction needRadio(name, ok) {\nconst any = ROOT().querySelector(`input[name=\"${name}\"]`);\nif (!any) return ok;\nconst box = any.closest('.field-single') || any.closest('.radio-group') || any.parentElement;\nif (COLLECT) { COLLECT.push(box); return ok; }\nif (ROOT().querySelector(`input[name=\"${name}\"]:checked`)) return ok;\nmarkError(null, box, 'Merci de choisir une option.');\nreturn false;\n}\nfunction clearErrors(scope) {\nscope.querySelectorAll('.has-error').forEach(el => el.classList.remove('has-error'));\nscope.querySelectorAll('.box-error').forEach(el => el.classList.remove('box-error'));\nscope.querySelectorAll('.field-err').forEach(el => el.remove());\nscope.querySelectorAll('.step-alert').forEach(el => el.remove());\n}\nfunction validateStep(step) {\nlet ok = true;\nconst panel = document.getElementById(`ncf-step-${step}`);\nclearErrors(panel);\nif (step === 1) {\nok = need(['first_name','last_name','email','email_confirm','phone','city','country','nationality','profession'], ok);\nconst ea = document.getElementById('ncf-email-a'), eb = document.getElementById('ncf-email-b');\nif (ea.value && eb.value && ea.value.trim().toLowerCase() !== eb.value.trim().toLowerCase()) { if (!COLLECT) markError(eb, fieldBox(eb), 'Les deux adresses e-mail ne correspondent pas.'); ok = false; }\nok = needRadio('gender', ok);\nok = needRadio('language', ok);\n}\nif (step === 2) {\nok = need(['about_self'], ok);\nok = needRadio('serious', ok);\n}\nif (step === 3) {\nok = need(['source','why_select'], ok);\nif (COLLECT) {} else if (!termsTicked) { const tr = ROOT().querySelector('.terms-row'); tr.classList.add('box-error'); if (!tr.querySelector('.field-err')) { const m = document.createElement('div'); m.className = 'field-err'; m.textContent = 'Merci d\u2019accepter les Conditions g\u00e9n\u00e9rales et la Politique de confidentialit\u00e9.'; tr.after(m); } ok = false; }\n}\nif (!COLLECT && !termsTicked && panel.querySelector('.terms-row') && !ok) {}\nif (!ok && !COLLECT) {\nconst n = panel.querySelectorAll('.box-error').length;\nconst alert = document.createElement('div');\nalert.className = 'step-alert';\nalert.textContent = n > 1 ? `Presque termin\u00e9 \u2014 ${n} champs demandent votre attention. Ils sont signal\u00e9s ci-dessous.` : 'Presque termin\u00e9 \u2014 un champ demande votre attention. Il est signal\u00e9 ci-dessous.';\npanel.insertBefore(alert, panel.querySelector('.section-eyebrow').nextSibling);\nconst first = panel.querySelector('.box-error');\nif (first) {\nfirst.scrollIntoView({ behavior: 'smooth', block: 'center' });\nconst f = first.querySelector('input:not([type=radio]):not([type=hidden]), select, textarea');\nif (f) setTimeout(() => f.focus({ preventScroll: true }), 350);\n}\n}\nreturn ok;\n}\nfunction markRequired() {\nCOLLECT = [];\nfor (let i = 1; i <= STEPS; i++) validateStep(i);\nconst boxes = COLLECT; COLLECT = null;\nboxes.forEach(b => {\nconst lab = b && (b.querySelector(':scope > .field-label') || b.querySelector('.field-label'));\nif (lab && !lab.querySelector('.req')) { const r = document.createElement('span'); r.className = 'req'; r.textContent = ' *'; lab.insertBefore(r, lab.querySelector('.field-sublabel')); }\n});\n}\n\/\/ a field turns back to normal as soon as it is filled in\ndocument.addEventListener('input', e => { const b = e.target.closest && e.target.closest('.box-error'); if (b && String(e.target.value).trim()) { b.classList.remove('box-error'); e.target.classList.remove('has-error'); b.querySelectorAll(':scope > .field-err').forEach(x => x.remove()); } });\ndocument.addEventListener('change', e => { const b = e.target.closest && e.target.closest('.box-error'); if (b && (e.target.value || e.target.checked)) { b.classList.remove('box-error'); e.target.classList.remove('has-error'); b.querySelectorAll(':scope > .field-err').forEach(x => x.remove()); } });\nfunction jumpToStep(n) {\nif (n === current) return;\ndocument.getElementById(`ncf-step-${current}`).classList.remove('is-active');\ncurrent = n;\ndocument.getElementById(`ncf-step-${current}`).classList.add('is-active');\nrenderStepper(current);\ndocument.getElementById('ncf-modal').scrollTop = 0;\n}\nfunction goNext(n) { if (validateStep(current)) jumpToStep(n); }\nfunction pickRadio(el, name) {\nROOT().querySelectorAll(`[onclick=\"NCF.pickRadio(this,'${name}')\"]`).forEach(c => c.classList.remove('picked'));\nel.classList.add('picked');\nel.querySelector('input[type=\"radio\"]').checked = true;\nconst eb = el.closest('.box-error'); if (eb) { eb.classList.remove('box-error'); eb.querySelectorAll(':scope > .field-err').forEach(x => x.remove()); }\n}\nfunction toggleTerms() {\ntermsTicked = !termsTicked;\nconst tr = ROOT().querySelector('.terms-row'); if (tr && termsTicked) { tr.classList.remove('box-error'); const nx = tr.nextElementSibling; if (nx && nx.classList.contains('field-err')) nx.remove(); }\ndocument.getElementById('ncf-terms-box').classList.toggle('ticked', termsTicked);\n}\nfunction revealOther(selId, revId) {\nconst sel = document.getElementById(selId);\ndocument.getElementById(revId).classList.toggle('open', sel.value === 'other' || sel.value === 'ambassador');\n}\n\/* Builds a readable summary of every answer *\/\nfunction collect() {\nconst form = document.getElementById('ncf-nc-form');\nconst data = {};\nnew FormData(form).forEach((v, k) => { if (k !== 'website' && k !== 'email_confirm') data[k] = v; });\nform.querySelectorAll('select').forEach(s => {\nif (s.value && s.selectedOptions[0]) data[s.name] = s.selectedOptions[0].textContent.trim();\n});\nconst lines = Object.entries(data).filter(([k, v]) => String(v).trim()).map(([k, v]) => `${k.replace(\/_\/g, ' ')}: ${v}`);\nreturn { data, message: lines.join('\\n') };\n}\nfunction showSuccess() {\ndocument.getElementById('ncf-form-view').style.display = 'none';\ndocument.getElementById('ncf-success-view').classList.add('show');\ndocument.getElementById('ncf-modal').scrollTop = 0;\nconst b = document.getElementById('booking-btn');\nif (b && BOOKING_URL) { b.href = BOOKING_URL; b.style.display = 'inline-block'; }\n}\nfunction handleSubmit(e) {\ne.preventDefault();\nconst banner = document.getElementById('ncf-error-banner');\nbanner.textContent = 'Merci de compl\u00e9ter les champs obligatoires avant d\u2019envoyer.';\nif (!validateStep(3)) return;\nbanner.classList.remove('show');\nif (ROOT().querySelector('[name=\"website\"]').value) { showSuccess(); return; } \/\/ spam trap\nconst { data, message } = collect();\nconst btn = ROOT().querySelector('.btn-submit');\nconst label = btn.textContent;\nbtn.disabled = true; btn.textContent = 'Envoi en cours\u2026';\nconst params = Object.assign({}, data, {\nsubject: `New ${data.form_type} \u2014 ${data.first_name || ''} ${data.last_name || ''}`.trim(),\nfrom_name: `${data.first_name || ''} ${data.last_name || ''}`.trim(),\nname: `${data.first_name || ''} ${data.last_name || ''}`.trim(),\nreply_to: data.email, message: message\n});\nemailjs.send(EMAILJS_SERVICE_ID, EMAILJS_TEMPLATE_ID, params, { publicKey: EMAILJS_PUBLIC_KEY })\n.then(() => {\nshowSuccess();\nif (EMAILJS_CONFIRM_TEMPLATE_ID && data.email) {\nemailjs.send(EMAILJS_SERVICE_ID, EMAILJS_CONFIRM_TEMPLATE_ID, {\nto_email: data.email, email: data.email, to_name: data.first_name || '', name: data.first_name || '',\nform_type: data.form_type, reply_to: 'love@nubianconnections.com',\n...confirmParams(data)\n}, { publicKey: EMAILJS_PUBLIC_KEY }).catch(() => {}); \/\/ never blocks the applicant\n}\n})\n.catch(() => {\nbanner.textContent = 'D\u00e9sol\u00e9, votre demande n\u2019a pas pu \u00eatre envoy\u00e9e. Merci de r\u00e9essayer, ou d\u2019\u00e9crire \u00e0 love@nubianconnections.com.';\nbanner.classList.add('show');\ndocument.getElementById('ncf-modal').scrollTop = 0;\n})\n.finally(() => { btn.disabled = false; btn.textContent = label; });\n}\nfunction resetAll() {\ndocument.getElementById('ncf-nc-form').reset();\ndocument.getElementById('ncf-form-view').style.display = 'block';\ndocument.getElementById('ncf-success-view').classList.remove('show');\ndocument.getElementById('ncf-error-banner').classList.remove('show');\nROOT().querySelectorAll('.step-panel').forEach(p => p.classList.remove('is-active'));\ndocument.getElementById('ncf-step-1').classList.add('is-active');\nROOT().querySelectorAll('.radio-card, .intent-card').forEach(c => c.classList.remove('picked'));\nROOT().querySelectorAll('.intent-card.default').forEach(c => pickRadio(c, 'service'));\ntermsTicked = false;\ndocument.getElementById('ncf-terms-box').classList.remove('ticked');\nROOT().querySelectorAll('.other-reveal').forEach(r => r.classList.remove('open'));\nROOT().querySelectorAll('.has-error').forEach(el => el.classList.remove('has-error'));\ncurrent = 1;\nrenderStepper(1);\n}\nrenderStepper(1);\nmarkRequired();\n\/\/ ambassador tracking: ?ref=name in the link, remembered for 30 days (also set site-wide by the NC referral snippet)\n(function () {\nlet ref = '';\ntry {\nconst q = new URLSearchParams(location.search).get('ref');\nif (q) { ref = q.trim().toLowerCase().replace(\/[^a-z0-9_-]\/g, '').slice(0, 40); localStorage.setItem('nc_ref', JSON.stringify({ v: ref, t: Date.now() })); }\nelse { const st = JSON.parse(localStorage.getItem('nc_ref') || 'null'); if (st && st.v && Date.now() - st.t < 30 * 864e5) ref = st.v; }\n} catch (e) {}\nconst f = ROOT().querySelector('[name=\"referral\"]'); if (f) { if (ref) f.value = ref; }\n})();\nROOT().querySelectorAll('.intent-card.default').forEach(c => pickRadio(c, 'service'));\nwindow.addEventListener('load', () => setTimeout(openForm, 500));\nwindow.NCF = { openForm, closeForm, handleOverlayClick, jumpToStep, goNext, pickRadio, toggleTerms, revealOther, handleSubmit };\n})();\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Rejoindre le r\u00e9seau priv\u00e9 | Nubian Connections Rejoindre le r\u00e9seau priv\u00e9 Fermer \u2715 Nubian ConnectionsInternational Gratuit \u00b7 R\u00e9seau priv\u00e9 Rejoignez notrer\u00e9seau priv\u00e9. Inscription gratuite. Les femmes et les hommes peuvent rejoindre le r\u00e9seau pour \u00eatre pris en compte lors d\u2019une \u00e9ventuelle pr\u00e9sentation, lorsque la recherche d\u2019un client semble compatible. Chaque candidature est lue par … <a title=\"Rejoindre le r\u00e9seau priv\u00e9\" class=\"read-more\" href=\"https:\/\/nubianconnections.com\/fr\/rejoindre\/\" aria-label=\"En savoir plus sur Rejoindre le r\u00e9seau priv\u00e9\">Lire la suite<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-5195","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/nubianconnections.com\/fr\/wp-json\/wp\/v2\/pages\/5195","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nubianconnections.com\/fr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nubianconnections.com\/fr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nubianconnections.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nubianconnections.com\/fr\/wp-json\/wp\/v2\/comments?post=5195"}],"version-history":[{"count":1,"href":"https:\/\/nubianconnections.com\/fr\/wp-json\/wp\/v2\/pages\/5195\/revisions"}],"predecessor-version":[{"id":5211,"href":"https:\/\/nubianconnections.com\/fr\/wp-json\/wp\/v2\/pages\/5195\/revisions\/5211"}],"wp:attachment":[{"href":"https:\/\/nubianconnections.com\/fr\/wp-json\/wp\/v2\/media?parent=5195"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}