Machi.ma \u2014 Machi Machi di m3ak hadchi<\/title>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:ital,wght@0,700;0,900;1,700&family=Plus+Jakarta+Sans:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\r\n<style>\r\n :root {\r\n --bg: #edf3ee;\r\n --surface: #ffffff;\r\n --surface2: #f1f7f2;\r\n --border: rgba(0,0,0,0.07);\r\n --border-strong: rgba(0,0,0,0.12);\r\n --primary: #162d1f;\r\n --accent: #005a2b;\r\n --green: #9ca3af;\r\n --green-light: rgba(107,114,128,0.08);\r\n --green-border: rgba(107,114,128,0.18);\r\n --text: #111a14;\r\n --muted: #6b6560;\r\n --dim: #aaa29a;\r\n }\r\n\r\n * { margin: 0; padding: 0; box-sizing: border-box; }\r\n\r\n html, body {\r\n min-height: 100%;\r\n background: var(--bg);\r\n color: var(--text);\r\n font-family: 'Plus Jakarta Sans', sans-serif;\r\n font-size: 15px;\r\n line-height: 1.6;\r\n overflow-x: hidden;\r\n }\r\n\r\n body::before {\r\n content: '';\r\n position: fixed; top: 0; left: 0; right: 0; height: 3px;\r\n background: linear-gradient(90deg, #005a2b 0%, #005a2b 50%, #9ca3af 50%, #6b7280 100%);\r\n z-index: 200;\r\n }\r\n\r\n \/* \u2500\u2500 BACKGROUND ANIMATION \u2500\u2500 *\/\r\n #bgCanvas {\r\n position: fixed; inset: 0;\r\n pointer-events: none; z-index: 0;\r\n }\r\n\r\n .bg-orb { position: fixed; border-radius: 50%; pointer-events: none; z-index: 0; }\r\n\r\n .bg-orb-1 {\r\n width: 700px; height: 700px;\r\n background: radial-gradient(circle, rgba(0,98,51,.13) 0%, rgba(0,98,51,.04) 45%, transparent 70%);\r\n filter: blur(60px);\r\n top: -200px; right: -150px;\r\n animation: orbFloat1 10s ease-in-out infinite;\r\n }\r\n .bg-orb-2 {\r\n width: 560px; height: 560px;\r\n background: radial-gradient(circle, rgba(107,114,128,.11) 0%, rgba(107,114,128,.04) 45%, transparent 70%);\r\n filter: blur(70px);\r\n bottom: -140px; left: -120px;\r\n animation: orbFloat2 13s ease-in-out infinite;\r\n }\r\n .bg-orb-3 {\r\n width: 360px; height: 360px;\r\n background: radial-gradient(circle, rgba(232,201,138,.14) 0%, transparent 70%);\r\n filter: blur(50px);\r\n top: 35%; left: 48%;\r\n animation: orbFloat3 15s ease-in-out infinite;\r\n }\r\n .bg-orb-4 {\r\n width: 240px; height: 240px;\r\n background: radial-gradient(circle, rgba(0,98,51,.09) 0%, transparent 70%);\r\n filter: blur(40px);\r\n top: 10%; left: 8%;\r\n animation: orbFloat2 8s ease-in-out infinite reverse;\r\n }\r\n\r\n @keyframes orbFloat1 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-50px,38px) scale(1.07)} }\r\n @keyframes orbFloat2 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(38px,-44px) scale(1.09)} }\r\n @keyframes orbFloat3 { 0%,100%{transform:translate(0,0)} 33%{transform:translate(-30px,24px)} 66%{transform:translate(24px,-20px)} }\r\n\r\n .page { position: relative; z-index: 1; }\r\n\r\n .page { display: grid; grid-template-rows: 56px minmax(0, 1fr) 44px; height: 100vh; min-height: 560px; }\r\n\r\n \/* \u2500\u2500 NAV \u2500\u2500 *\/\r\n nav {\r\n display: flex; align-items: center; justify-content: space-between;\r\n padding: 0 48px;\r\n border-bottom: 1px solid var(--border);\r\n background: rgba(237,243,238,0.97);\r\n backdrop-filter: blur(20px);\r\n position: sticky; top: 3px; z-index: 50;\r\n }\r\n\r\n .logo {\r\n display: flex; align-items: center; gap: 9px;\r\n font-family: 'Playfair Display', serif;\r\n font-weight: 900; font-size: 21px; letter-spacing: -0.4px;\r\n color: var(--primary);\r\n }\r\n\r\n .logo-mark {\r\n width: 28px; height: 28px;\r\n background: var(--primary);\r\n border-radius: 7px;\r\n display: flex; align-items: center; justify-content: center;\r\n }\r\n\r\n .logo-mark svg { width: 16px; height: 16px; }\r\n .logo-dot { color: var(--accent); }\r\n\r\n .nav-badge {\r\n background: var(--primary);\r\n color: #f4f0ea;\r\n font-size: 10px; font-weight: 600;\r\n letter-spacing: 0.08em; text-transform: uppercase;\r\n padding: 5px 14px; border-radius: 100px;\r\n }\r\n\r\n \/* \u2500\u2500 MAIN SPLIT \u2500\u2500 *\/\r\n .main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }\r\n\r\n \/* \u2500\u2500 LEFT \u2500\u2500 *\/\r\n .hero-left {\r\n display: flex; flex-direction: column;\r\n justify-content: center; gap: 16px;\r\n padding: 20px 48px;\r\n min-width: 0;\r\n animation: riseUp 0.7s cubic-bezier(0.22,1,0.36,1) forwards;\r\n }\r\n\r\n @keyframes riseUp {\r\n from { opacity: 0; transform: translateY(22px); }\r\n to { opacity: 1; transform: translateY(0); }\r\n }\r\n\r\n h1 {\r\n font-family: 'Playfair Display', serif;\r\n font-size: clamp(32px, 3.2vw, 50px);\r\n font-weight: 900; line-height: 1.04; letter-spacing: -1.5px;\r\n color: var(--primary);\r\n }\r\n h1 .accent { color: var(--accent); font-style: italic; }\r\n h1 .green { color: var(--green); }\r\n\r\n .tagline {\r\n font-family: 'Playfair Display', serif;\r\n font-style: italic; font-size: 15px;\r\n color: var(--muted);\r\n border-left: 2px solid var(--accent);\r\n padding-left: 14px; line-height: 1.6;\r\n }\r\n\r\n \/* slogan : animation d'apparition (r\u00e9v\u00e9lation balay\u00e9e) en boucle *\/\r\n .slogan-anim {\r\n display: inline-block;\r\n font-size: 19px;\r\n font-weight: 700;\r\n color: var(--accent);\r\n animation: sloganReveal 5s cubic-bezier(0.65,0,0.35,1) infinite;\r\n will-change: clip-path;\r\n }\r\n\r\n \/* \"Machi Machi\" mis en avant dans la phrase *\/\r\n .slogan-pop {\r\n font-size: 1.32em;\r\n font-weight: 900;\r\n text-transform: none;\r\n letter-spacing: 0.3px;\r\n color: var(--accent);\r\n }\r\n\r\n @keyframes sloganReveal {\r\n 0% { clip-path: inset(0 100% 0 0); }\r\n 32% { clip-path: inset(0 0 0 0); }\r\n 80% { clip-path: inset(0 0 0 0); }\r\n 100% { clip-path: inset(0 0 0 100%); }\r\n }\r\n\r\n @media (prefers-reduced-motion: reduce) {\r\n .slogan-anim { animation: none; clip-path: none; }\r\n }\r\n\r\n .free-badge {\r\n display: inline-flex; align-items: center; gap: 8px;\r\n background: var(--green);\r\n color: #fff;\r\n font-size: 12.5px; font-weight: 600;\r\n padding: 7px 16px; border-radius: 100px;\r\n width: fit-content; letter-spacing: 0.01em;\r\n }\r\n\r\n .free-badge svg { width: 13px; height: 13px; opacity: 0.85; }\r\n\r\n .form-block { display: flex; flex-direction: column; gap: 9px; }\r\n\r\n .email-row { display: flex; gap: 8px; }\r\n\r\n .email-input {\r\n flex: 1;\r\n background: var(--surface);\r\n border: 1.5px solid var(--border-strong);\r\n border-radius: 10px; padding: 12px 16px;\r\n color: var(--text);\r\n font-family: 'Plus Jakarta Sans', sans-serif;\r\n font-size: 13px; outline: none;\r\n transition: border-color 0.2s, box-shadow 0.2s;\r\n }\r\n .email-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0,98,51,0.08); }\r\n .email-input::placeholder { color: var(--dim); }\r\n\r\n .cta-btn {\r\n background: var(--accent); color: #fff;\r\n font-family: 'Plus Jakarta Sans', sans-serif;\r\n font-weight: 600; font-size: 13px;\r\n padding: 12px 22px; border: none;\r\n border-radius: 10px; cursor: pointer;\r\n white-space: nowrap;\r\n display: flex; align-items: center; gap: 7px;\r\n transition: transform 0.15s, background 0.15s, box-shadow 0.15s;\r\n box-shadow: 0 4px 14px rgba(0,98,51,0.28);\r\n }\r\n .cta-btn:hover { background: #004d28; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0,98,51,0.38); }\r\n\r\n .form-note { font-size: 11px; color: var(--dim); }\r\n\r\n .trust-pills { display: flex; gap: 8px; flex-wrap: wrap; }\r\n\r\n .trust-pill {\r\n display: flex; align-items: center; gap: 6px;\r\n background: var(--surface);\r\n border: 1.5px solid var(--border-strong);\r\n border-radius: 100px; padding: 5px 12px;\r\n font-size: 11px; color: var(--muted);\r\n font-weight: 500;\r\n }\r\n .tp-dot { width: 5px; height: 5px; background: var(--green); border-radius: 50%; }\r\n\r\n \/* \u2500\u2500 ITEM MARQUEE (what you can send) \u2014 green 3D icons \u2500\u2500 *\/\r\n .item-marquee {\r\n position: relative; width: 100%; max-width: 100%; min-width: 0; overflow: hidden; padding: 4px 0;\r\n -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);\r\n mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);\r\n }\r\n .item-track {\r\n display: flex; gap: 9px; width: max-content;\r\n animation: marqueeLTR 26s linear infinite;\r\n }\r\n .item-marquee:hover .item-track { animation-play-state: paused; }\r\n\r\n \/* gauche -> droite *\/\r\n @keyframes marqueeLTR {\r\n from { transform: translateX(-50%); }\r\n to { transform: translateX(0); }\r\n }\r\n\r\n .item-chip {\r\n display: inline-flex; align-items: center; gap: 9px;\r\n background: var(--surface);\r\n border: 1.5px solid var(--border-strong);\r\n border-radius: 11px; padding: 8px 14px 8px 9px;\r\n font-size: 12.5px; font-weight: 600; color: var(--primary);\r\n white-space: nowrap; flex-shrink: 0;\r\n }\r\n\r\n \/* illustration verte qui tourne en 3D *\/\r\n .ic-3d {\r\n width: 30px; height: 30px; flex-shrink: 0;\r\n display: flex; align-items: center; justify-content: center;\r\n border-radius: 8px;\r\n background: rgba(0,90,43,0.10);\r\n border: 1px solid rgba(0,90,43,0.22);\r\n color: var(--accent);\r\n filter: drop-shadow(0 2px 4px rgba(0,90,43,0.18));\r\n animation: spin3d 3.4s linear infinite;\r\n }\r\n .ic-3d svg { width: 17px; height: 17px; display: block; }\r\n .item-chip:nth-child(2n) .ic-3d { animation-duration: 4.0s; animation-delay: -0.7s; }\r\n .item-chip:nth-child(3n) .ic-3d { animation-duration: 4.6s; animation-delay: -1.3s; }\r\n\r\n @keyframes spin3d {\r\n 0% { transform: perspective(360px) rotateY(0deg) rotateX(7deg); }\r\n 50% { transform: perspective(360px) rotateY(180deg) rotateX(7deg); }\r\n 100% { transform: perspective(360px) rotateY(360deg) rotateX(7deg); }\r\n }\r\n\r\n @media (prefers-reduced-motion: reduce) {\r\n .item-track { animation: none; }\r\n .ic-3d { animation: none; }\r\n }\r\n\r\n \/* \u2500\u2500 RIGHT \u2500\u2500 *\/\r\n .hero-right {\r\n display: flex; align-items: center; justify-content: center;\r\n padding: 16px 36px 16px 20px;\r\n min-width: 0; overflow: hidden;\r\n animation: riseUp 0.7s 0.15s cubic-bezier(0.22,1,0.36,1) both;\r\n background: linear-gradient(145deg, #e2ece4 0%, #edf3ee 70%);\r\n border-left: 1px solid var(--border);\r\n position: relative;\r\n }\r\n\r\n .hero-right::before {\r\n content: '';\r\n position: absolute; inset: 0;\r\n background: radial-gradient(ellipse at 70% 30%, rgba(107,114,128,0.04) 0%, transparent 60%);\r\n pointer-events: none;\r\n }\r\n\r\n .mockup-wrap { width: 100%; max-width: 460px; max-height: 100%; position: relative; z-index: 1; }\r\n\r\n \/* corner accents *\/\r\n .mockup-wrap::before, .mockup-wrap::after {\r\n content: '';\r\n position: absolute; width: 16px; height: 16px;\r\n border-style: solid; border-color: rgba(0,98,51,0.3); z-index: 3;\r\n }\r\n .mockup-wrap::before { top: -5px; left: -5px; border-width: 2px 0 0 2px; border-radius: 3px 0 0 0; }\r\n .mockup-wrap::after { bottom: -5px; right: -5px; border-width: 0 2px 2px 0; border-radius: 0 0 3px 0; }\r\n\r\n \/* \u2500\u2500 MOCKUP SHELL \u2500\u2500 *\/\r\n .mockup {\r\n background: var(--surface);\r\n border: 1px solid rgba(0,0,0,0.1);\r\n border-radius: 14px; overflow: hidden;\r\n box-shadow:\r\n 0 1px 0 rgba(255,255,255,0.9) inset,\r\n 0 2px 4px rgba(0,0,0,0.04),\r\n 0 8px 24px rgba(0,0,0,0.09),\r\n 0 24px 56px rgba(0,0,0,0.08);\r\n }\r\n\r\n \/* Browser chrome *\/\r\n .mock-chrome {\r\n background: #eeeae3;\r\n padding: 9px 14px;\r\n display: flex; align-items: center; gap: 10px;\r\n border-bottom: 1px solid rgba(0,0,0,0.08);\r\n }\r\n\r\n .mock-dots { display: flex; gap: 5px; }\r\n .mock-dots span { width: 10px; height: 10px; border-radius: 50%; }\r\n .mock-dots span:nth-child(1) { background: #ff5f57; }\r\n .mock-dots span:nth-child(2) { background: #febc2e; }\r\n .mock-dots span:nth-child(3) { background: #28c840; }\r\n\r\n .mock-url {\r\n flex: 1;\r\n background: rgba(255,255,255,0.7);\r\n border: 1px solid rgba(0,0,0,0.1);\r\n border-radius: 6px; padding: 4px 10px;\r\n font-size: 10.5px; color: #6b6560;\r\n display: flex; align-items: center; gap: 5px;\r\n }\r\n\r\n .url-lock { color: #28c840; font-size: 9px; }\r\n\r\n \/* App layout *\/\r\n .mock-app { display: grid; grid-template-columns: 120px 1fr; }\r\n\r\n \/* \u2500\u2500 SIDEBAR \u2500\u2500 *\/\r\n .mock-sidebar {\r\n background: var(--primary);\r\n padding: 14px 0;\r\n display: flex; flex-direction: column;\r\n }\r\n\r\n .sb-logo {\r\n display: flex; align-items: center; gap: 6px;\r\n padding: 0 12px 12px;\r\n border-bottom: 1px solid rgba(255,255,255,0.08);\r\n margin-bottom: 8px;\r\n font-family: 'Playfair Display', serif;\r\n font-weight: 900; font-size: 13px;\r\n color: #f4f0ea;\r\n }\r\n\r\n .sb-logo-mark {\r\n width: 18px; height: 18px;\r\n background: var(--accent);\r\n border-radius: 4px;\r\n display: flex; align-items: center; justify-content: center;\r\n }\r\n .sb-logo-mark svg { width: 10px; height: 10px; }\r\n .sb-logo-dot { color: rgba(244,240,234,0.5); }\r\n\r\n .sb-section {\r\n font-size: 8px; text-transform: uppercase; letter-spacing: 0.12em;\r\n color: rgba(255,255,255,0.25); font-weight: 600;\r\n padding: 10px 12px 4px;\r\n }\r\n\r\n .sb-item {\r\n display: flex; align-items: center; gap: 7px;\r\n padding: 7px 12px; font-size: 10.5px;\r\n color: rgba(255,255,255,0.45); cursor: pointer;\r\n transition: background 0.15s;\r\n }\r\n .sb-item svg { width: 12px; height: 12px; flex-shrink: 0; }\r\n .sb-item.active {\r\n background: rgba(255,255,255,0.08);\r\n color: rgba(255,255,255,0.9);\r\n border-left: 2px solid var(--accent);\r\n }\r\n\r\n .sb-avatar {\r\n margin-top: auto;\r\n border-top: 1px solid rgba(255,255,255,0.07);\r\n padding: 10px 12px 0;\r\n display: flex; align-items: center; gap: 7px;\r\n }\r\n\r\n .sb-av-circle {\r\n width: 24px; height: 24px; border-radius: 50%;\r\n background: rgba(255,255,255,0.12);\r\n display: flex; align-items: center; justify-content: center;\r\n font-size: 8px; font-weight: 700; color: rgba(255,255,255,0.8);\r\n flex-shrink: 0;\r\n }\r\n\r\n .sb-av-name { font-size: 10px; color: rgba(255,255,255,0.6); font-weight: 500; }\r\n .sb-av-role { font-size: 8.5px; color: rgba(255,255,255,0.3); }\r\n\r\n \/* \u2500\u2500 MAIN CONTENT \u2500\u2500 *\/\r\n .mock-main { display: flex; flex-direction: column; }\r\n\r\n \/* Top bar *\/\r\n .mock-topbar {\r\n display: flex; align-items: center; justify-content: space-between;\r\n padding: 11px 14px 10px;\r\n border-bottom: 1px solid var(--border);\r\n background: var(--surface);\r\n }\r\n\r\n .tb-greeting { font-size: 11.5px; font-weight: 600; color: var(--primary); }\r\n .tb-sub { font-size: 9.5px; color: var(--dim); margin-top: 1px; }\r\n\r\n .tb-btn {\r\n background: var(--primary); color: #fff;\r\n border: none; border-radius: 6px;\r\n padding: 5px 10px; font-size: 9.5px; font-weight: 600;\r\n cursor: pointer; display: flex; align-items: center; gap: 4px;\r\n font-family: 'Plus Jakarta Sans', sans-serif;\r\n }\r\n\r\n \/* Search *\/\r\n .mock-search {\r\n display: grid; grid-template-columns: 1fr 24px 1fr;\r\n margin: 11px 14px;\r\n background: var(--surface2);\r\n border: 1.5px solid var(--border-strong); border-radius: 9px;\r\n overflow: hidden;\r\n }\r\n\r\n .msf { padding: 8px 11px; }\r\n .msf:first-child { border-right: 1px solid var(--border); }\r\n .msf:last-child { border-left: 1px solid var(--border); }\r\n .msf-label { font-size: 8px; color: var(--dim); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 2px; font-weight: 600; }\r\n .msf-val { font-size: 11px; color: var(--text); font-weight: 600; }\r\n .msf-arrow { display: flex; align-items: center; justify-content: center; }\r\n .msf-arrow svg { width: 10px; height: 10px; color: var(--accent); }\r\n\r\n \/* Results bar *\/\r\n .mock-results-bar {\r\n display: flex; align-items: center; justify-content: space-between;\r\n padding: 0 14px 7px;\r\n font-size: 9px; color: var(--dim);\r\n }\r\n .mock-results-count { color: var(--green); font-weight: 700; font-size: 10px; }\r\n\r\n \/* Cards *\/\r\n .mock-cards { display: flex; flex-direction: column; gap: 0; }\r\n\r\n .v-card {\r\n display: flex; align-items: center; gap: 10px;\r\n padding: 10px 14px;\r\n border-top: 1px solid var(--border);\r\n transition: background 0.15s;\r\n }\r\n .v-card:first-child { border-top: none; }\r\n .v-card:hover { background: var(--surface2); }\r\n .v-card.featured { background: rgba(107,114,128,0.03); }\r\n\r\n .v-av {\r\n width: 34px; height: 34px; border-radius: 50%;\r\n display: flex; align-items: center; justify-content: center;\r\n font-size: 10px; font-weight: 700; flex-shrink: 0;\r\n border: 1.5px solid rgba(0,0,0,0.06);\r\n }\r\n\r\n .v-body { flex: 1; min-width: 0; }\r\n\r\n .v-top-row { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }\r\n .v-name { font-size: 11px; font-weight: 600; color: var(--primary); }\r\n\r\n .v-verified {\r\n display: flex; align-items: center; gap: 3px;\r\n background: var(--green-light); border: 1px solid var(--green-border);\r\n border-radius: 100px; padding: 1px 6px;\r\n font-size: 8.5px; font-weight: 600; color: var(--green);\r\n }\r\n .v-verified svg { width: 8px; height: 8px; }\r\n\r\n .v-route-row { display: flex; align-items: center; gap: 5px; font-size: 9px; color: var(--muted); margin-bottom: 4px; }\r\n .v-route-arr { color: var(--accent); }\r\n\r\n .v-tags { display: flex; gap: 4px; flex-wrap: wrap; }\r\n .vtag {\r\n background: var(--surface2); border: 1px solid var(--border-strong);\r\n border-radius: 4px; padding: 1px 6px;\r\n font-size: 8.5px; color: var(--muted); font-weight: 500;\r\n }\r\n .vtag-kg {\r\n background: var(--green-light); border-color: var(--green-border);\r\n color: var(--green); font-weight: 700;\r\n }\r\n\r\n .v-right { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex-shrink: 0; }\r\n .v-rating { font-size: 10px; font-weight: 600; color: var(--primary); }\r\n .v-rating span { color: var(--dim); font-size: 9px; font-weight: 400; }\r\n\r\n .v-btn {\r\n background: var(--primary); color: #fff;\r\n border: none; border-radius: 5px;\r\n padding: 4px 9px; font-size: 9px; font-weight: 600;\r\n cursor: pointer; font-family: 'Plus Jakarta Sans', sans-serif;\r\n white-space: nowrap;\r\n }\r\n .v-card.featured .v-btn { background: var(--accent); }\r\n\r\n \/* \u2500\u2500 FOOTER \u2500\u2500 *\/\r\n footer {\r\n border-top: 1px solid var(--border);\r\n background: var(--surface);\r\n padding: 0 48px;\r\n height: 52px;\r\n display: flex; align-items: center; justify-content: space-between;\r\n }\r\n\r\n footer p { font-size: 11px; color: var(--dim); }\r\n\r\n .footer-links { display: flex; gap: 24px; }\r\n .footer-links span { font-size: 11px; color: var(--dim); cursor: pointer; }\r\n .footer-links span:hover { color: var(--muted); }\r\n\r\n \/* rappel waitlist : masqu\u00e9 par d\u00e9faut (desktop) *\/\r\n .mobile-waitlist { display: none; }\r\n\r\n @media (max-width: 768px) {\r\n .page { height: auto; min-height: 100vh; grid-template-rows: 56px auto auto; }\r\n nav { padding: 0 20px; }\r\n .main { grid-template-columns: 1fr; }\r\n .hero-left { padding: 32px 20px 24px; gap: 20px; min-width: 0; }\r\n h1 { font-size: clamp(28px, 8.2vw, 36px); letter-spacing: -1px; }\r\n .hero-right { padding: 0 16px 40px; overflow: visible; border-left: none; border-top: 1px solid var(--border); }\r\n .mockup-wrap { max-height: none; }\r\n .email-row { flex-direction: column; }\r\n .cta-btn { justify-content: center; }\r\n footer { flex-direction: column; height: auto; padding: 16px 20px; gap: 10px; align-items: flex-start; }\r\n\r\n \/* rappel waitlist : visible en mobile, juste apr\u00e8s le dashboard *\/\r\n .mobile-waitlist {\r\n display: block;\r\n padding: 30px 20px 40px;\r\n background: linear-gradient(180deg, var(--surface) 0%, var(--surface2) 100%);\r\n border-top: 1px solid var(--border);\r\n }\r\n .mw-inner { display: flex; flex-direction: column; gap: 11px; }\r\n .mw-badge {\r\n align-self: flex-start;\r\n background: var(--primary); color: #f4f0ea;\r\n font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;\r\n padding: 5px 14px; border-radius: 100px;\r\n }\r\n .mw-title {\r\n font-family: 'Playfair Display', serif;\r\n font-weight: 900; font-size: 24px; line-height: 1.1;\r\n letter-spacing: -0.6px; color: var(--primary);\r\n }\r\n .mw-title span { color: var(--accent); font-style: italic; }\r\n .mw-sub { font-size: 13.5px; color: var(--muted); line-height: 1.55; }\r\n .mw-form { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n<canvas id=\"bgCanvas\"><\/canvas>\r\n<div class=\"bg-orb bg-orb-1\"><\/div>\r\n<div class=\"bg-orb bg-orb-2\"><\/div>\r\n<div class=\"bg-orb bg-orb-3\"><\/div>\r\n<div class=\"bg-orb bg-orb-4\"><\/div>\r\n\r\n<div class=\"page\">\r\n\r\n \r\n <nav>\r\n <div class=\"logo\">\r\n <div class=\"logo-mark\">\r\n <svg viewBox=\"0 0 30 30\" fill=\"none\"><path d=\"M15 4L17 11.5L24.5 8L20 14.5L27 15L20 15.5L24.5 22L17 18.5L15 26L13 18.5L5.5 22L10 15.5L3 15L10 14.5L5.5 8L13 11.5Z\" fill=\"white\"\/><\/svg>\r\n <\/div>\r\n Machi<span class=\"logo-dot\">.ma<\/span>\r\n <\/div>\r\n <div class=\"nav-badge\">Bient\u00f4t disponible<\/div>\r\n <\/nav>\r\n\r\n <div class=\"main\">\r\n\r\n \r\n <div class=\"hero-left\">\r\n\r\n <h1>\r\n Un <span class=\"accent\">dossier<\/span>, une <span class=\"accent\">cl\u00e9<\/span>,<br>\r\n un <span class=\"accent\">m\u00e9dicament<\/span><br>\r\n \u00e0 envoyer au Maroc ?\r\n <\/h1>\r\n\r\n <div class=\"tagline\">\r\n <span class=\"slogan-anim\"><span class=\"slogan-pop\">Machi Machi<\/span> di m3ak hadchi.<\/span><br>\r\n Quelqu'un de ta ville prend l'avion bient\u00f4t \u2014 il a de la place pour ton colis.\r\n <\/div>\r\n\r\n <div class=\"free-badge\">\r\n <svg viewBox=\"0 0 14 14\" fill=\"none\"><path d=\"M7 1l1.2 4H13L9.5 7.5l1.2 4L7 9.3l-3.7 2.2 1.2-4L1 5h4.8z\" fill=\"white\"\/><\/svg>\r\n 100% Gratuit \u2014 pour toujours\r\n <\/div>\r\n\r\n <div class=\"item-marquee\">\r\n <div class=\"item-track\">\r\n \r\n <div class=\"item-chip\"><span class=\"ic-3d\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M14 3H6a1.5 1.5 0 0 0-1.5 1.5v15A1.5 1.5 0 0 0 6 21h12a1.5 1.5 0 0 0 1.5-1.5V8.5z\"\/><path d=\"M14 3v5.5h5.5\"\/><path d=\"M8 13h8M8 16.5h6\"\/><\/svg><\/span> Dossiers<\/div>\r\n <div class=\"item-chip\"><span class=\"ic-3d\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"8\" cy=\"8\" r=\"4.2\"\/><path d=\"M11 11l8 8M16 16l2-2M18.5 18.5l1.5-1.5\"\/><\/svg><\/span> Cl\u00e9s oubli\u00e9es<\/div>\r\n <div class=\"item-chip\"><span class=\"ic-3d\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"2\" y=\"9\" width=\"20\" height=\"6\" rx=\"3\"\/><path d=\"M12 9v6\"\/><\/svg><\/span> M\u00e9dicaments<\/div>\r\n <div class=\"item-chip\"><span class=\"ic-3d\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3.5 7.5 12 3l8.5 4.5v9L12 21l-8.5-4.5z\"\/><path d=\"M3.5 7.5 12 12l8.5-4.5M12 12v9\"\/><\/svg><\/span> Petits colis<\/div>\r\n <div class=\"item-chip\"><span class=\"ic-3d\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3.5\" y=\"9\" width=\"17\" height=\"11\" rx=\"1.2\"\/><path d=\"M3 9h18M12 9v11\"\/><path d=\"M12 9C12 9 9 4 6.5 5.2 4.5 6.2 7 9 12 9zM12 9c0 0 3-5 5.5-3.8C19.5 6.2 17 9 12 9z\"\/><\/svg><\/span> Cadeaux<\/div>\r\n <div class=\"item-chip\"><span class=\"ic-3d\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 8h14l-1 12H6z\"\/><path d=\"M9 8V6a3 3 0 0 1 6 0v2\"\/><\/svg><\/span> Affaires perso<\/div>\r\n \r\n <div class=\"item-chip\"><span class=\"ic-3d\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M14 3H6a1.5 1.5 0 0 0-1.5 1.5v15A1.5 1.5 0 0 0 6 21h12a1.5 1.5 0 0 0 1.5-1.5V8.5z\"\/><path d=\"M14 3v5.5h5.5\"\/><path d=\"M8 13h8M8 16.5h6\"\/><\/svg><\/span> Dossiers<\/div>\r\n <div class=\"item-chip\"><span class=\"ic-3d\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"8\" cy=\"8\" r=\"4.2\"\/><path d=\"M11 11l8 8M16 16l2-2M18.5 18.5l1.5-1.5\"\/><\/svg><\/span> Cl\u00e9s oubli\u00e9es<\/div>\r\n <div class=\"item-chip\"><span class=\"ic-3d\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"2\" y=\"9\" width=\"20\" height=\"6\" rx=\"3\"\/><path d=\"M12 9v6\"\/><\/svg><\/span> M\u00e9dicaments<\/div>\r\n <div class=\"item-chip\"><span class=\"ic-3d\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3.5 7.5 12 3l8.5 4.5v9L12 21l-8.5-4.5z\"\/><path d=\"M3.5 7.5 12 12l8.5-4.5M12 12v9\"\/><\/svg><\/span> Petits colis<\/div>\r\n <div class=\"item-chip\"><span class=\"ic-3d\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3.5\" y=\"9\" width=\"17\" height=\"11\" rx=\"1.2\"\/><path d=\"M3 9h18M12 9v11\"\/><path d=\"M12 9C12 9 9 4 6.5 5.2 4.5 6.2 7 9 12 9zM12 9c0 0 3-5 5.5-3.8C19.5 6.2 17 9 12 9z\"\/><\/svg><\/span> Cadeaux<\/div>\r\n <div class=\"item-chip\"><span class=\"ic-3d\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 8h14l-1 12H6z\"\/><path d=\"M9 8V6a3 3 0 0 1 6 0v2\"\/><\/svg><\/span> Affaires perso<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"form-block\">\r\n <div class=\"email-row\">\r\n <input id=\"email\" class=\"email-input\" type=\"email\" placeholder=\"Ton adresse email\" \/>\r\n <button class=\"cta-btn\" onclick=\"submit()\">\r\n Rejoindre\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 14 14\" fill=\"none\"><path d=\"M3 7H11M11 7L7.5 3.5M11 7L7.5 10.5\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\r\n <\/button>\r\n <\/div>\r\n <p id=\"note\" class=\"form-note\">Aussi simple qu'\u00e9crire ton email. Aucun spam \u2014 juste un message le jour du lancement.<\/p>\r\n <\/div>\r\n\r\n <div class=\"trust-pills\">\r\n <div class=\"trust-pill\"><div class=\"tp-dot\"><\/div>Profils v\u00e9rifi\u00e9s<\/div>\r\n <div class=\"trust-pill\"><div class=\"tp-dot\"><\/div>Entre Marocains<\/div>\r\n <div class=\"trust-pill\"><div class=\"tp-dot\"><\/div>Plus rapide<\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n \r\n <div class=\"hero-right\">\r\n <div class=\"mockup-wrap\">\r\n <div class=\"mockup\">\r\n\r\n \r\n <div class=\"mock-chrome\">\r\n <div class=\"mock-dots\"><span><\/span><span><\/span><span><\/span><\/div>\r\n <div class=\"mock-url\">\r\n <span class=\"url-lock\">\ud83d\udd12<\/span>\r\n machi.ma\/voyages\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"mock-app\">\r\n\r\n \r\n <div class=\"mock-sidebar\">\r\n <div class=\"sb-logo\">\r\n <div class=\"sb-logo-mark\">\r\n <svg viewBox=\"0 0 30 30\" fill=\"none\"><path d=\"M15 4L17 11.5L24.5 8L20 14.5L27 15L20 15.5L24.5 22L17 18.5L15 26L13 18.5L5.5 22L10 15.5L3 15L10 14.5L5.5 8L13 11.5Z\" fill=\"white\"\/><\/svg>\r\n <\/div>\r\n Machi<span class=\"sb-logo-dot\">.ma<\/span>\r\n <\/div>\r\n\r\n <div class=\"sb-section\">Principal<\/div>\r\n\r\n <div class=\"sb-item active\">\r\n <svg viewBox=\"0 0 14 14\" fill=\"none\"><circle cx=\"7\" cy=\"5\" r=\"3.5\" stroke=\"currentColor\" stroke-width=\"1.2\"\/><path d=\"M1.5 13c0-3 2.5-5 5.5-5s5.5 2 5.5 5\" stroke=\"currentColor\" stroke-width=\"1.2\" stroke-linecap=\"round\"\/><\/svg>\r\n Voyageurs\r\n <\/div>\r\n <div class=\"sb-item\">\r\n <svg viewBox=\"0 0 14 14\" fill=\"none\"><rect x=\"1\" y=\"3\" width=\"12\" height=\"9\" rx=\"1.5\" stroke=\"currentColor\" stroke-width=\"1.2\"\/><path d=\"M4 1v2M10 1v2\" stroke=\"currentColor\" stroke-width=\"1.2\" stroke-linecap=\"round\"\/><\/svg>\r\n Mes colis\r\n <\/div>\r\n <div class=\"sb-item\">\r\n <svg viewBox=\"0 0 14 14\" fill=\"none\"><path d=\"M2 2h10a1 1 0 011 1v6a1 1 0 01-1 1H4l-3 3V3a1 1 0 011-1z\" stroke=\"currentColor\" stroke-width=\"1.2\" stroke-linejoin=\"round\"\/><\/svg>\r\n Messages\r\n <span style=\"margin-left:auto;background:var(--accent);color:#fff;font-size:7px;font-weight:700;padding:1px 5px;border-radius:100px;\">3<\/span>\r\n <\/div>\r\n\r\n <div class=\"sb-section\">Compte<\/div>\r\n\r\n <div class=\"sb-item\">\r\n <svg viewBox=\"0 0 14 14\" fill=\"none\"><path d=\"M7 1l1 3.5H12L9 7l1.2 3.5L7 8.5l-3.2 2L5 7 2 4.5h4z\" stroke=\"currentColor\" stroke-width=\"1.1\" stroke-linejoin=\"round\"\/><\/svg>\r\n Avis re\u00e7us\r\n <\/div>\r\n <div class=\"sb-item\">\r\n <svg viewBox=\"0 0 14 14\" fill=\"none\"><circle cx=\"7\" cy=\"7\" r=\"5.5\" stroke=\"currentColor\" stroke-width=\"1.2\"\/><path d=\"M7 4v3.5L9.5 9\" stroke=\"currentColor\" stroke-width=\"1.2\" stroke-linecap=\"round\"\/><\/svg>\r\n Historique\r\n <\/div>\r\n\r\n <div class=\"sb-avatar\">\r\n <div class=\"sb-av-circle\">YB<\/div>\r\n <div>\r\n <div class=\"sb-av-name\">Yassmine B.<\/div>\r\n <div class=\"sb-av-role\">Exp\u00e9diteur<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"mock-main\">\r\n\r\n \r\n <div class=\"mock-topbar\">\r\n <div>\r\n <div class=\"tb-greeting\">Bonjour, Yassmine \ud83d\udc4b<\/div>\r\n <div class=\"tb-sub\">14 voyageurs disponibles cette semaine<\/div>\r\n <\/div>\r\n <button class=\"tb-btn\">\r\n <svg width=\"8\" height=\"8\" viewBox=\"0 0 10 10\" fill=\"none\"><path d=\"M5 1v8M1 5h8\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/><\/svg>\r\n Publier un vol\r\n <\/button>\r\n <\/div>\r\n\r\n \r\n <div class=\"mock-search\">\r\n <div class=\"msf\">\r\n <div class=\"msf-label\">D\u00e9part<\/div>\r\n <div class=\"msf-val\">\ud83c\uddeb\ud83c\uddf7 Paris CDG<\/div>\r\n <\/div>\r\n <div class=\"msf-arrow\">\r\n <svg viewBox=\"0 0 12 12\" fill=\"none\"><path d=\"M2 6h8M7 3l3 3-3 3\" stroke=\"#005a2b\" stroke-width=\"1.3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\r\n <\/div>\r\n <div class=\"msf\">\r\n <div class=\"msf-label\">Destination<\/div>\r\n <div class=\"msf-val\">\ud83c\uddf2\ud83c\udde6 Casablanca<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"mock-results-bar\">\r\n <span>Voyageurs disponibles<\/span>\r\n <span class=\"mock-results-count\">14 r\u00e9sultats<\/span>\r\n <\/div>\r\n\r\n \r\n <div class=\"mock-cards\">\r\n\r\n <div class=\"v-card featured\">\r\n <div class=\"v-av\" style=\"background:#eaf4ee;color:#005a2b;\">KB<\/div>\r\n <div class=\"v-body\">\r\n <div class=\"v-top-row\">\r\n <span class=\"v-name\">Karim B.<\/span>\r\n <span class=\"v-verified\">\r\n <svg viewBox=\"0 0 10 10\" fill=\"none\"><path d=\"M2 5L4 7.5L8 3\" stroke=\"#9ca3af\" stroke-width=\"1.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\r\n V\u00e9rifi\u00e9\r\n <\/span>\r\n <\/div>\r\n <div class=\"v-route-row\">\r\n CDG <span class=\"v-route-arr\">\u2192<\/span> CMN \u00b7 RAM \u00b7 14 juin\r\n <\/div>\r\n <div class=\"v-tags\">\r\n <span class=\"vtag\">Darija & Fran\u00e7ais<\/span>\r\n <span class=\"vtag vtag-kg\">5 kg dispo<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"v-right\">\r\n <div class=\"v-rating\">\u2b50 4.9 <span>\u00b7 12 livr.<\/span><\/div>\r\n <button class=\"v-btn\">Contacter<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"v-card\">\r\n <div class=\"v-av\" style=\"background:#f0eaf5;color:#4a2a6e;\">NM<\/div>\r\n <div class=\"v-body\">\r\n <div class=\"v-top-row\">\r\n <span class=\"v-name\">Nadia M.<\/span>\r\n <span class=\"v-verified\">\r\n <svg viewBox=\"0 0 10 10\" fill=\"none\"><path d=\"M2 5L4 7.5L8 3\" stroke=\"#9ca3af\" stroke-width=\"1.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\r\n V\u00e9rifi\u00e9\r\n <\/span>\r\n <\/div>\r\n <div class=\"v-route-row\">CDG <span class=\"v-route-arr\">\u2192<\/span> CMN \u00b7 Air France \u00b7 18 juin<\/div>\r\n <div class=\"v-tags\">\r\n <span class=\"vtag\">Arabe & Fran\u00e7ais<\/span>\r\n <span class=\"vtag vtag-kg\">3 kg dispo<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"v-right\">\r\n <div class=\"v-rating\">\u2b50 4.7 <span>\u00b7 4 livr.<\/span><\/div>\r\n <button class=\"v-btn\">Contacter<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"v-card\">\r\n <div class=\"v-av\" style=\"background:#fdf0e8;color:#7a3010;\">YA<\/div>\r\n <div class=\"v-body\">\r\n <div class=\"v-top-row\">\r\n <span class=\"v-name\">Youssef A.<\/span>\r\n <span class=\"v-verified\">\r\n <svg viewBox=\"0 0 10 10\" fill=\"none\"><path d=\"M2 5L4 7.5L8 3\" stroke=\"#9ca3af\" stroke-width=\"1.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\r\n V\u00e9rifi\u00e9\r\n <\/span>\r\n <\/div>\r\n <div class=\"v-route-row\">CDG <span class=\"v-route-arr\">\u2192<\/span> RBA \u00b7 Ryanair \u00b7 21 juin<\/div>\r\n <div class=\"v-tags\">\r\n <span class=\"vtag\">Darija & Anglais<\/span>\r\n <span class=\"vtag vtag-kg\">8 kg dispo<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"v-right\">\r\n <div class=\"v-rating\">\u2b50 5.0 <span>\u00b7 7 livr.<\/span><\/div>\r\n <button class=\"v-btn\">Contacter<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"mobile-waitlist\">\r\n <div class=\"mw-inner\">\r\n <div class=\"mw-badge\">Bient\u00f4t disponible<\/div>\r\n <div class=\"mw-title\">Sois parmi les premiers sur <span>Machi.ma<\/span><\/div>\r\n <div class=\"mw-sub\">Un dossier, une cl\u00e9, un m\u00e9dicament \u00e0 envoyer au Maroc ? Rejoins la liste d'attente.<\/div>\r\n <div class=\"mw-form\">\r\n <input id=\"email-m\" class=\"email-input\" type=\"email\" placeholder=\"Ton adresse email\" \/>\r\n <button class=\"cta-btn\" onclick=\"submitM()\">\r\n Rejoindre\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 14 14\" fill=\"none\"><path d=\"M3 7H11M11 7L7.5 3.5M11 7L7.5 10.5\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\r\n <\/button>\r\n <\/div>\r\n <p id=\"note-m\" class=\"form-note\">Aussi simple qu'\u00e9crire ton email. Aucun spam.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <footer>\r\n <p>\u00a9 2026 Machi.ma \u2014 Tous droits r\u00e9serv\u00e9s<\/p>\r\n <div class=\"footer-links\">\r\n <span>Contact<\/span>\r\n <span>Confidentialit\u00e9<\/span>\r\n <span>CGU<\/span>\r\n <\/div>\r\n <\/footer>\r\n\r\n<\/div>\r\n\r\n<script>\r\n const SHEET_URL = \"https:\/\/script.google.com\/macros\/s\/AKfycbzn4HB70v0fqS9zGBhd6tlNkRm05Ov9vzFV3WqlH7nJN2hqMlGa4kJI-1rBovtfSPA\/exec\";\r\n\r\n async function submit() {\r\n const input = document.getElementById('email');\r\n const note = document.getElementById('note');\r\n const email = input.value.trim();\r\n if (!email || !\/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/.test(email)) {\r\n note.textContent = \"\u26a0\ufe0f Entre une adresse email valide.\";\r\n note.style.color = \"#c1121f\"; return;\r\n }\r\n note.textContent = \"Envoi en cours...\";\r\n note.style.color = \"#7a7068\";\r\n try {\r\n await fetch(SHEET_URL, {\r\n method: \"POST\", mode: \"no-cors\",\r\n headers: { \"Content-Type\": \"application\/json\" },\r\n body: JSON.stringify({ email, source: \"machi.ma\" })\r\n });\r\n input.value = \"\"; input.disabled = true;\r\n note.textContent = \"\u2705 Machi! Tu es sur la liste.\";\r\n note.style.color = \"#9ca3af\";\r\n } catch {\r\n note.textContent = \"\u274c Une erreur est survenue. R\u00e9essaie.\";\r\n note.style.color = \"#c1121f\";\r\n }\r\n }\r\n\r\n \/\/ rappel waitlist mobile\r\n async function submitM() {\r\n const input = document.getElementById('email-m');\r\n const note = document.getElementById('note-m');\r\n const email = input.value.trim();\r\n if (!email || !\/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/.test(email)) {\r\n note.textContent = \"\u26a0\ufe0f Entre une adresse email valide.\";\r\n note.style.color = \"#c1121f\"; return;\r\n }\r\n note.textContent = \"Envoi en cours...\";\r\n note.style.color = \"#7a7068\";\r\n try {\r\n await fetch(SHEET_URL, {\r\n method: \"POST\", mode: \"no-cors\",\r\n headers: { \"Content-Type\": \"application\/json\" },\r\n body: JSON.stringify({ email, source: \"machi.ma-mobile\" })\r\n });\r\n input.value = \"\"; input.disabled = true;\r\n note.textContent = \"\u2705 Machi! Tu es sur la liste.\";\r\n note.style.color = \"#9ca3af\";\r\n } catch {\r\n note.textContent = \"\u274c Une erreur est survenue. R\u00e9essaie.\";\r\n note.style.color = \"#c1121f\";\r\n }\r\n }\r\n\r\n \/\/ \u2500\u2500 BACKGROUND PARTICLES \u2500\u2500\r\n (function() {\r\n const canvas = document.getElementById('bgCanvas');\r\n if (!canvas) return;\r\n const ctx = canvas.getContext('2d');\r\n let W, H, particles = [], raf;\r\n const COLORS = [\r\n 'rgba(0,98,51,',\r\n 'rgba(107,114,128,',\r\n 'rgba(139,106,42,',\r\n ];\r\n\r\n function resize() {\r\n W = canvas.width = window.innerWidth;\r\n H = canvas.height = window.innerHeight;\r\n }\r\n\r\n function rand(a, b) { return a + Math.random() * (b - a); }\r\n\r\n function createParticle() {\r\n const col = COLORS[Math.floor(Math.random() * COLORS.length)];\r\n return {\r\n x: rand(0, W), y: rand(0, H),\r\n r: rand(1.0, 3.2),\r\n vx: rand(-0.15, 0.15),\r\n vy: rand(-0.22, -0.05),\r\n alpha: rand(0.08, 0.35),\r\n da: rand(-0.002, 0.002),\r\n color: col,\r\n life: rand(0, Math.PI * 2),\r\n speed: rand(0.005, 0.012),\r\n };\r\n }\r\n\r\n function init() {\r\n resize();\r\n particles = [];\r\n const count = Math.min(65, Math.floor(W * H \/ 16000));\r\n for (let i = 0; i < count; i++) particles.push(createParticle());\r\n }\r\n\r\n function draw() {\r\n ctx.clearRect(0, 0, W, H);\r\n particles.forEach(p => {\r\n p.life += p.speed;\r\n p.x += p.vx + Math.sin(p.life) * 0.1;\r\n p.y += p.vy;\r\n p.alpha += p.da;\r\n if (p.alpha < 0.05) p.da = Math.abs(p.da);\r\n if (p.alpha > 0.4) p.da = -Math.abs(p.da);\r\n if (p.y < -10) { p.y = H + 10; p.x = rand(0, W); }\r\n\r\n ctx.beginPath();\r\n ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);\r\n ctx.fillStyle = p.color + p.alpha + ')';\r\n ctx.fill();\r\n });\r\n\r\n \/\/ connecting lines between nearby particles\r\n for (let i = 0; i < particles.length; i++) {\r\n for (let j = i + 1; j < particles.length; j++) {\r\n const dx = particles[i].x - particles[j].x;\r\n const dy = particles[i].y - particles[j].y;\r\n const dist = Math.sqrt(dx*dx + dy*dy);\r\n if (dist < 85) {\r\n ctx.beginPath();\r\n ctx.moveTo(particles[i].x, particles[i].y);\r\n ctx.lineTo(particles[j].x, particles[j].y);\r\n ctx.strokeStyle = 'rgba(0,98,51,' + (0.05 * (1 - dist\/85)) + ')';\r\n ctx.lineWidth = 0.5;\r\n ctx.stroke();\r\n }\r\n }\r\n }\r\n\r\n raf = requestAnimationFrame(draw);\r\n }\r\n\r\n window.addEventListener('resize', resize);\r\n init();\r\n draw();\r\n })();\r\n\r\n<\/script>\r\n<\/body>\r\n<\/html>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-12","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/machi.ma\/index.php?rest_route=\/wp\/v2\/pages\/12","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/machi.ma\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/machi.ma\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/machi.ma\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/machi.ma\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=12"}],"version-history":[{"count":1,"href":"https:\/\/machi.ma\/index.php?rest_route=\/wp\/v2\/pages\/12\/revisions"}],"predecessor-version":[{"id":13,"href":"https:\/\/machi.ma\/index.php?rest_route=\/wp\/v2\/pages\/12\/revisions\/13"}],"wp:attachment":[{"href":"https:\/\/machi.ma\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=12"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":12,"date":"2026-05-30T19:18:18","date_gmt":"2026-05-30T19:18:18","guid":{"rendered":"https:\/\/machi.ma\/?page_id=12"},"modified":"2026-05-30T19:18:19","modified_gmt":"2026-05-30T19:18:19","slug":"machi-ma","status":"publish","type":"page","link":"https:\/\/machi.ma\/","title":{"rendered":"Machi.ma"},"content":{"rendered":"\r\n\r\n\r\n\r\n\r\nMachi.ma \u2014 Machi Machi di m3ak hadchi<\/title>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:ital,wght@0,700;0,900;1,700&family=Plus+Jakarta+Sans:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\r\n<style>\r\n :root {\r\n --bg: #edf3ee;\r\n --surface: #ffffff;\r\n --surface2: #f1f7f2;\r\n --border: rgba(0,0,0,0.07);\r\n --border-strong: rgba(0,0,0,0.12);\r\n --primary: #162d1f;\r\n --accent: #005a2b;\r\n --green: #9ca3af;\r\n --green-light: rgba(107,114,128,0.08);\r\n --green-border: rgba(107,114,128,0.18);\r\n --text: #111a14;\r\n --muted: #6b6560;\r\n --dim: #aaa29a;\r\n }\r\n\r\n * { margin: 0; padding: 0; box-sizing: border-box; }\r\n\r\n html, body {\r\n min-height: 100%;\r\n background: var(--bg);\r\n color: var(--text);\r\n font-family: 'Plus Jakarta Sans', sans-serif;\r\n font-size: 15px;\r\n line-height: 1.6;\r\n overflow-x: hidden;\r\n }\r\n\r\n body::before {\r\n content: '';\r\n position: fixed; top: 0; left: 0; right: 0; height: 3px;\r\n background: linear-gradient(90deg, #005a2b 0%, #005a2b 50%, #9ca3af 50%, #6b7280 100%);\r\n z-index: 200;\r\n }\r\n\r\n \/* \u2500\u2500 BACKGROUND ANIMATION \u2500\u2500 *\/\r\n #bgCanvas {\r\n position: fixed; inset: 0;\r\n pointer-events: none; z-index: 0;\r\n }\r\n\r\n .bg-orb { position: fixed; border-radius: 50%; pointer-events: none; z-index: 0; }\r\n\r\n .bg-orb-1 {\r\n width: 700px; height: 700px;\r\n background: radial-gradient(circle, rgba(0,98,51,.13) 0%, rgba(0,98,51,.04) 45%, transparent 70%);\r\n filter: blur(60px);\r\n top: -200px; right: -150px;\r\n animation: orbFloat1 10s ease-in-out infinite;\r\n }\r\n .bg-orb-2 {\r\n width: 560px; height: 560px;\r\n background: radial-gradient(circle, rgba(107,114,128,.11) 0%, rgba(107,114,128,.04) 45%, transparent 70%);\r\n filter: blur(70px);\r\n bottom: -140px; left: -120px;\r\n animation: orbFloat2 13s ease-in-out infinite;\r\n }\r\n .bg-orb-3 {\r\n width: 360px; height: 360px;\r\n background: radial-gradient(circle, rgba(232,201,138,.14) 0%, transparent 70%);\r\n filter: blur(50px);\r\n top: 35%; left: 48%;\r\n animation: orbFloat3 15s ease-in-out infinite;\r\n }\r\n .bg-orb-4 {\r\n width: 240px; height: 240px;\r\n background: radial-gradient(circle, rgba(0,98,51,.09) 0%, transparent 70%);\r\n filter: blur(40px);\r\n top: 10%; left: 8%;\r\n animation: orbFloat2 8s ease-in-out infinite reverse;\r\n }\r\n\r\n @keyframes orbFloat1 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-50px,38px) scale(1.07)} }\r\n @keyframes orbFloat2 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(38px,-44px) scale(1.09)} }\r\n @keyframes orbFloat3 { 0%,100%{transform:translate(0,0)} 33%{transform:translate(-30px,24px)} 66%{transform:translate(24px,-20px)} }\r\n\r\n .page { position: relative; z-index: 1; }\r\n\r\n .page { display: grid; grid-template-rows: 56px minmax(0, 1fr) 44px; height: 100vh; min-height: 560px; }\r\n\r\n \/* \u2500\u2500 NAV \u2500\u2500 *\/\r\n nav {\r\n display: flex; align-items: center; justify-content: space-between;\r\n padding: 0 48px;\r\n border-bottom: 1px solid var(--border);\r\n background: rgba(237,243,238,0.97);\r\n backdrop-filter: blur(20px);\r\n position: sticky; top: 3px; z-index: 50;\r\n }\r\n\r\n .logo {\r\n display: flex; align-items: center; gap: 9px;\r\n font-family: 'Playfair Display', serif;\r\n font-weight: 900; font-size: 21px; letter-spacing: -0.4px;\r\n color: var(--primary);\r\n }\r\n\r\n .logo-mark {\r\n width: 28px; height: 28px;\r\n background: var(--primary);\r\n border-radius: 7px;\r\n display: flex; align-items: center; justify-content: center;\r\n }\r\n\r\n .logo-mark svg { width: 16px; height: 16px; }\r\n .logo-dot { color: var(--accent); }\r\n\r\n .nav-badge {\r\n background: var(--primary);\r\n color: #f4f0ea;\r\n font-size: 10px; font-weight: 600;\r\n letter-spacing: 0.08em; text-transform: uppercase;\r\n padding: 5px 14px; border-radius: 100px;\r\n }\r\n\r\n \/* \u2500\u2500 MAIN SPLIT \u2500\u2500 *\/\r\n .main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }\r\n\r\n \/* \u2500\u2500 LEFT \u2500\u2500 *\/\r\n .hero-left {\r\n display: flex; flex-direction: column;\r\n justify-content: center; gap: 16px;\r\n padding: 20px 48px;\r\n min-width: 0;\r\n animation: riseUp 0.7s cubic-bezier(0.22,1,0.36,1) forwards;\r\n }\r\n\r\n @keyframes riseUp {\r\n from { opacity: 0; transform: translateY(22px); }\r\n to { opacity: 1; transform: translateY(0); }\r\n }\r\n\r\n h1 {\r\n font-family: 'Playfair Display', serif;\r\n font-size: clamp(32px, 3.2vw, 50px);\r\n font-weight: 900; line-height: 1.04; letter-spacing: -1.5px;\r\n color: var(--primary);\r\n }\r\n h1 .accent { color: var(--accent); font-style: italic; }\r\n h1 .green { color: var(--green); }\r\n\r\n .tagline {\r\n font-family: 'Playfair Display', serif;\r\n font-style: italic; font-size: 15px;\r\n color: var(--muted);\r\n border-left: 2px solid var(--accent);\r\n padding-left: 14px; line-height: 1.6;\r\n }\r\n\r\n \/* slogan : animation d'apparition (r\u00e9v\u00e9lation balay\u00e9e) en boucle *\/\r\n .slogan-anim {\r\n display: inline-block;\r\n font-size: 19px;\r\n font-weight: 700;\r\n color: var(--accent);\r\n animation: sloganReveal 5s cubic-bezier(0.65,0,0.35,1) infinite;\r\n will-change: clip-path;\r\n }\r\n\r\n \/* \"Machi Machi\" mis en avant dans la phrase *\/\r\n .slogan-pop {\r\n font-size: 1.32em;\r\n font-weight: 900;\r\n text-transform: none;\r\n letter-spacing: 0.3px;\r\n color: var(--accent);\r\n }\r\n\r\n @keyframes sloganReveal {\r\n 0% { clip-path: inset(0 100% 0 0); }\r\n 32% { clip-path: inset(0 0 0 0); }\r\n 80% { clip-path: inset(0 0 0 0); }\r\n 100% { clip-path: inset(0 0 0 100%); }\r\n }\r\n\r\n @media (prefers-reduced-motion: reduce) {\r\n .slogan-anim { animation: none; clip-path: none; }\r\n }\r\n\r\n .free-badge {\r\n display: inline-flex; align-items: center; gap: 8px;\r\n background: var(--green);\r\n color: #fff;\r\n font-size: 12.5px; font-weight: 600;\r\n padding: 7px 16px; border-radius: 100px;\r\n width: fit-content; letter-spacing: 0.01em;\r\n }\r\n\r\n .free-badge svg { width: 13px; height: 13px; opacity: 0.85; }\r\n\r\n .form-block { display: flex; flex-direction: column; gap: 9px; }\r\n\r\n .email-row { display: flex; gap: 8px; }\r\n\r\n .email-input {\r\n flex: 1;\r\n background: var(--surface);\r\n border: 1.5px solid var(--border-strong);\r\n border-radius: 10px; padding: 12px 16px;\r\n color: var(--text);\r\n font-family: 'Plus Jakarta Sans', sans-serif;\r\n font-size: 13px; outline: none;\r\n transition: border-color 0.2s, box-shadow 0.2s;\r\n }\r\n .email-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0,98,51,0.08); }\r\n .email-input::placeholder { color: var(--dim); }\r\n\r\n .cta-btn {\r\n background: var(--accent); color: #fff;\r\n font-family: 'Plus Jakarta Sans', sans-serif;\r\n font-weight: 600; font-size: 13px;\r\n padding: 12px 22px; border: none;\r\n border-radius: 10px; cursor: pointer;\r\n white-space: nowrap;\r\n display: flex; align-items: center; gap: 7px;\r\n transition: transform 0.15s, background 0.15s, box-shadow 0.15s;\r\n box-shadow: 0 4px 14px rgba(0,98,51,0.28);\r\n }\r\n .cta-btn:hover { background: #004d28; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0,98,51,0.38); }\r\n\r\n .form-note { font-size: 11px; color: var(--dim); }\r\n\r\n .trust-pills { display: flex; gap: 8px; flex-wrap: wrap; }\r\n\r\n .trust-pill {\r\n display: flex; align-items: center; gap: 6px;\r\n background: var(--surface);\r\n border: 1.5px solid var(--border-strong);\r\n border-radius: 100px; padding: 5px 12px;\r\n font-size: 11px; color: var(--muted);\r\n font-weight: 500;\r\n }\r\n .tp-dot { width: 5px; height: 5px; background: var(--green); border-radius: 50%; }\r\n\r\n \/* \u2500\u2500 ITEM MARQUEE (what you can send) \u2014 green 3D icons \u2500\u2500 *\/\r\n .item-marquee {\r\n position: relative; width: 100%; max-width: 100%; min-width: 0; overflow: hidden; padding: 4px 0;\r\n -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);\r\n mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);\r\n }\r\n .item-track {\r\n display: flex; gap: 9px; width: max-content;\r\n animation: marqueeLTR 26s linear infinite;\r\n }\r\n .item-marquee:hover .item-track { animation-play-state: paused; }\r\n\r\n \/* gauche -> droite *\/\r\n @keyframes marqueeLTR {\r\n from { transform: translateX(-50%); }\r\n to { transform: translateX(0); }\r\n }\r\n\r\n .item-chip {\r\n display: inline-flex; align-items: center; gap: 9px;\r\n background: var(--surface);\r\n border: 1.5px solid var(--border-strong);\r\n border-radius: 11px; padding: 8px 14px 8px 9px;\r\n font-size: 12.5px; font-weight: 600; color: var(--primary);\r\n white-space: nowrap; flex-shrink: 0;\r\n }\r\n\r\n \/* illustration verte qui tourne en 3D *\/\r\n .ic-3d {\r\n width: 30px; height: 30px; flex-shrink: 0;\r\n display: flex; align-items: center; justify-content: center;\r\n border-radius: 8px;\r\n background: rgba(0,90,43,0.10);\r\n border: 1px solid rgba(0,90,43,0.22);\r\n color: var(--accent);\r\n filter: drop-shadow(0 2px 4px rgba(0,90,43,0.18));\r\n animation: spin3d 3.4s linear infinite;\r\n }\r\n .ic-3d svg { width: 17px; height: 17px; display: block; }\r\n .item-chip:nth-child(2n) .ic-3d { animation-duration: 4.0s; animation-delay: -0.7s; }\r\n .item-chip:nth-child(3n) .ic-3d { animation-duration: 4.6s; animation-delay: -1.3s; }\r\n\r\n @keyframes spin3d {\r\n 0% { transform: perspective(360px) rotateY(0deg) rotateX(7deg); }\r\n 50% { transform: perspective(360px) rotateY(180deg) rotateX(7deg); }\r\n 100% { transform: perspective(360px) rotateY(360deg) rotateX(7deg); }\r\n }\r\n\r\n @media (prefers-reduced-motion: reduce) {\r\n .item-track { animation: none; }\r\n .ic-3d { animation: none; }\r\n }\r\n\r\n \/* \u2500\u2500 RIGHT \u2500\u2500 *\/\r\n .hero-right {\r\n display: flex; align-items: center; justify-content: center;\r\n padding: 16px 36px 16px 20px;\r\n min-width: 0; overflow: hidden;\r\n animation: riseUp 0.7s 0.15s cubic-bezier(0.22,1,0.36,1) both;\r\n background: linear-gradient(145deg, #e2ece4 0%, #edf3ee 70%);\r\n border-left: 1px solid var(--border);\r\n position: relative;\r\n }\r\n\r\n .hero-right::before {\r\n content: '';\r\n position: absolute; inset: 0;\r\n background: radial-gradient(ellipse at 70% 30%, rgba(107,114,128,0.04) 0%, transparent 60%);\r\n pointer-events: none;\r\n }\r\n\r\n .mockup-wrap { width: 100%; max-width: 460px; max-height: 100%; position: relative; z-index: 1; }\r\n\r\n \/* corner accents *\/\r\n .mockup-wrap::before, .mockup-wrap::after {\r\n content: '';\r\n position: absolute; width: 16px; height: 16px;\r\n border-style: solid; border-color: rgba(0,98,51,0.3); z-index: 3;\r\n }\r\n .mockup-wrap::before { top: -5px; left: -5px; border-width: 2px 0 0 2px; border-radius: 3px 0 0 0; }\r\n .mockup-wrap::after { bottom: -5px; right: -5px; border-width: 0 2px 2px 0; border-radius: 0 0 3px 0; }\r\n\r\n \/* \u2500\u2500 MOCKUP SHELL \u2500\u2500 *\/\r\n .mockup {\r\n background: var(--surface);\r\n border: 1px solid rgba(0,0,0,0.1);\r\n border-radius: 14px; overflow: hidden;\r\n box-shadow:\r\n 0 1px 0 rgba(255,255,255,0.9) inset,\r\n 0 2px 4px rgba(0,0,0,0.04),\r\n 0 8px 24px rgba(0,0,0,0.09),\r\n 0 24px 56px rgba(0,0,0,0.08);\r\n }\r\n\r\n \/* Browser chrome *\/\r\n .mock-chrome {\r\n background: #eeeae3;\r\n padding: 9px 14px;\r\n display: flex; align-items: center; gap: 10px;\r\n border-bottom: 1px solid rgba(0,0,0,0.08);\r\n }\r\n\r\n .mock-dots { display: flex; gap: 5px; }\r\n .mock-dots span { width: 10px; height: 10px; border-radius: 50%; }\r\n .mock-dots span:nth-child(1) { background: #ff5f57; }\r\n .mock-dots span:nth-child(2) { background: #febc2e; }\r\n .mock-dots span:nth-child(3) { background: #28c840; }\r\n\r\n .mock-url {\r\n flex: 1;\r\n background: rgba(255,255,255,0.7);\r\n border: 1px solid rgba(0,0,0,0.1);\r\n border-radius: 6px; padding: 4px 10px;\r\n font-size: 10.5px; color: #6b6560;\r\n display: flex; align-items: center; gap: 5px;\r\n }\r\n\r\n .url-lock { color: #28c840; font-size: 9px; }\r\n\r\n \/* App layout *\/\r\n .mock-app { display: grid; grid-template-columns: 120px 1fr; }\r\n\r\n \/* \u2500\u2500 SIDEBAR \u2500\u2500 *\/\r\n .mock-sidebar {\r\n background: var(--primary);\r\n padding: 14px 0;\r\n display: flex; flex-direction: column;\r\n }\r\n\r\n .sb-logo {\r\n display: flex; align-items: center; gap: 6px;\r\n padding: 0 12px 12px;\r\n border-bottom: 1px solid rgba(255,255,255,0.08);\r\n margin-bottom: 8px;\r\n font-family: 'Playfair Display', serif;\r\n font-weight: 900; font-size: 13px;\r\n color: #f4f0ea;\r\n }\r\n\r\n .sb-logo-mark {\r\n width: 18px; height: 18px;\r\n background: var(--accent);\r\n border-radius: 4px;\r\n display: flex; align-items: center; justify-content: center;\r\n }\r\n .sb-logo-mark svg { width: 10px; height: 10px; }\r\n .sb-logo-dot { color: rgba(244,240,234,0.5); }\r\n\r\n .sb-section {\r\n font-size: 8px; text-transform: uppercase; letter-spacing: 0.12em;\r\n color: rgba(255,255,255,0.25); font-weight: 600;\r\n padding: 10px 12px 4px;\r\n }\r\n\r\n .sb-item {\r\n display: flex; align-items: center; gap: 7px;\r\n padding: 7px 12px; font-size: 10.5px;\r\n color: rgba(255,255,255,0.45); cursor: pointer;\r\n transition: background 0.15s;\r\n }\r\n .sb-item svg { width: 12px; height: 12px; flex-shrink: 0; }\r\n .sb-item.active {\r\n background: rgba(255,255,255,0.08);\r\n color: rgba(255,255,255,0.9);\r\n border-left: 2px solid var(--accent);\r\n }\r\n\r\n .sb-avatar {\r\n margin-top: auto;\r\n border-top: 1px solid rgba(255,255,255,0.07);\r\n padding: 10px 12px 0;\r\n display: flex; align-items: center; gap: 7px;\r\n }\r\n\r\n .sb-av-circle {\r\n width: 24px; height: 24px; border-radius: 50%;\r\n background: rgba(255,255,255,0.12);\r\n display: flex; align-items: center; justify-content: center;\r\n font-size: 8px; font-weight: 700; color: rgba(255,255,255,0.8);\r\n flex-shrink: 0;\r\n }\r\n\r\n .sb-av-name { font-size: 10px; color: rgba(255,255,255,0.6); font-weight: 500; }\r\n .sb-av-role { font-size: 8.5px; color: rgba(255,255,255,0.3); }\r\n\r\n \/* \u2500\u2500 MAIN CONTENT \u2500\u2500 *\/\r\n .mock-main { display: flex; flex-direction: column; }\r\n\r\n \/* Top bar *\/\r\n .mock-topbar {\r\n display: flex; align-items: center; justify-content: space-between;\r\n padding: 11px 14px 10px;\r\n border-bottom: 1px solid var(--border);\r\n background: var(--surface);\r\n }\r\n\r\n .tb-greeting { font-size: 11.5px; font-weight: 600; color: var(--primary); }\r\n .tb-sub { font-size: 9.5px; color: var(--dim); margin-top: 1px; }\r\n\r\n .tb-btn {\r\n background: var(--primary); color: #fff;\r\n border: none; border-radius: 6px;\r\n padding: 5px 10px; font-size: 9.5px; font-weight: 600;\r\n cursor: pointer; display: flex; align-items: center; gap: 4px;\r\n font-family: 'Plus Jakarta Sans', sans-serif;\r\n }\r\n\r\n \/* Search *\/\r\n .mock-search {\r\n display: grid; grid-template-columns: 1fr 24px 1fr;\r\n margin: 11px 14px;\r\n background: var(--surface2);\r\n border: 1.5px solid var(--border-strong); border-radius: 9px;\r\n overflow: hidden;\r\n }\r\n\r\n .msf { padding: 8px 11px; }\r\n .msf:first-child { border-right: 1px solid var(--border); }\r\n .msf:last-child { border-left: 1px solid var(--border); }\r\n .msf-label { font-size: 8px; color: var(--dim); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 2px; font-weight: 600; }\r\n .msf-val { font-size: 11px; color: var(--text); font-weight: 600; }\r\n .msf-arrow { display: flex; align-items: center; justify-content: center; }\r\n .msf-arrow svg { width: 10px; height: 10px; color: var(--accent); }\r\n\r\n \/* Results bar *\/\r\n .mock-results-bar {\r\n display: flex; align-items: center; justify-content: space-between;\r\n padding: 0 14px 7px;\r\n font-size: 9px; color: var(--dim);\r\n }\r\n .mock-results-count { color: var(--green); font-weight: 700; font-size: 10px; }\r\n\r\n \/* Cards *\/\r\n .mock-cards { display: flex; flex-direction: column; gap: 0; }\r\n\r\n .v-card {\r\n display: flex; align-items: center; gap: 10px;\r\n padding: 10px 14px;\r\n border-top: 1px solid var(--border);\r\n transition: background 0.15s;\r\n }\r\n .v-card:first-child { border-top: none; }\r\n .v-card:hover { background: var(--surface2); }\r\n .v-card.featured { background: rgba(107,114,128,0.03); }\r\n\r\n .v-av {\r\n width: 34px; height: 34px; border-radius: 50%;\r\n display: flex; align-items: center; justify-content: center;\r\n font-size: 10px; font-weight: 700; flex-shrink: 0;\r\n border: 1.5px solid rgba(0,0,0,0.06);\r\n }\r\n\r\n .v-body { flex: 1; min-width: 0; }\r\n\r\n .v-top-row { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }\r\n .v-name { font-size: 11px; font-weight: 600; color: var(--primary); }\r\n\r\n .v-verified {\r\n display: flex; align-items: center; gap: 3px;\r\n background: var(--green-light); border: 1px solid var(--green-border);\r\n border-radius: 100px; padding: 1px 6px;\r\n font-size: 8.5px; font-weight: 600; color: var(--green);\r\n }\r\n .v-verified svg { width: 8px; height: 8px; }\r\n\r\n .v-route-row { display: flex; align-items: center; gap: 5px; font-size: 9px; color: var(--muted); margin-bottom: 4px; }\r\n .v-route-arr { color: var(--accent); }\r\n\r\n .v-tags { display: flex; gap: 4px; flex-wrap: wrap; }\r\n .vtag {\r\n background: var(--surface2); border: 1px solid var(--border-strong);\r\n border-radius: 4px; padding: 1px 6px;\r\n font-size: 8.5px; color: var(--muted); font-weight: 500;\r\n }\r\n .vtag-kg {\r\n background: var(--green-light); border-color: var(--green-border);\r\n color: var(--green); font-weight: 700;\r\n }\r\n\r\n .v-right { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex-shrink: 0; }\r\n .v-rating { font-size: 10px; font-weight: 600; color: var(--primary); }\r\n .v-rating span { color: var(--dim); font-size: 9px; font-weight: 400; }\r\n\r\n .v-btn {\r\n background: var(--primary); color: #fff;\r\n border: none; border-radius: 5px;\r\n padding: 4px 9px; font-size: 9px; font-weight: 600;\r\n cursor: pointer; font-family: 'Plus Jakarta Sans', sans-serif;\r\n white-space: nowrap;\r\n }\r\n .v-card.featured .v-btn { background: var(--accent); }\r\n\r\n \/* \u2500\u2500 FOOTER \u2500\u2500 *\/\r\n footer {\r\n border-top: 1px solid var(--border);\r\n background: var(--surface);\r\n padding: 0 48px;\r\n height: 52px;\r\n display: flex; align-items: center; justify-content: space-between;\r\n }\r\n\r\n footer p { font-size: 11px; color: var(--dim); }\r\n\r\n .footer-links { display: flex; gap: 24px; }\r\n .footer-links span { font-size: 11px; color: var(--dim); cursor: pointer; }\r\n .footer-links span:hover { color: var(--muted); }\r\n\r\n \/* rappel waitlist : masqu\u00e9 par d\u00e9faut (desktop) *\/\r\n .mobile-waitlist { display: none; }\r\n\r\n @media (max-width: 768px) {\r\n .page { height: auto; min-height: 100vh; grid-template-rows: 56px auto auto; }\r\n nav { padding: 0 20px; }\r\n .main { grid-template-columns: 1fr; }\r\n .hero-left { padding: 32px 20px 24px; gap: 20px; min-width: 0; }\r\n h1 { font-size: clamp(28px, 8.2vw, 36px); letter-spacing: -1px; }\r\n .hero-right { padding: 0 16px 40px; overflow: visible; border-left: none; border-top: 1px solid var(--border); }\r\n .mockup-wrap { max-height: none; }\r\n .email-row { flex-direction: column; }\r\n .cta-btn { justify-content: center; }\r\n footer { flex-direction: column; height: auto; padding: 16px 20px; gap: 10px; align-items: flex-start; }\r\n\r\n \/* rappel waitlist : visible en mobile, juste apr\u00e8s le dashboard *\/\r\n .mobile-waitlist {\r\n display: block;\r\n padding: 30px 20px 40px;\r\n background: linear-gradient(180deg, var(--surface) 0%, var(--surface2) 100%);\r\n border-top: 1px solid var(--border);\r\n }\r\n .mw-inner { display: flex; flex-direction: column; gap: 11px; }\r\n .mw-badge {\r\n align-self: flex-start;\r\n background: var(--primary); color: #f4f0ea;\r\n font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;\r\n padding: 5px 14px; border-radius: 100px;\r\n }\r\n .mw-title {\r\n font-family: 'Playfair Display', serif;\r\n font-weight: 900; font-size: 24px; line-height: 1.1;\r\n letter-spacing: -0.6px; color: var(--primary);\r\n }\r\n .mw-title span { color: var(--accent); font-style: italic; }\r\n .mw-sub { font-size: 13.5px; color: var(--muted); line-height: 1.55; }\r\n .mw-form { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n<canvas id=\"bgCanvas\"><\/canvas>\r\n<div class=\"bg-orb bg-orb-1\"><\/div>\r\n<div class=\"bg-orb bg-orb-2\"><\/div>\r\n<div class=\"bg-orb bg-orb-3\"><\/div>\r\n<div class=\"bg-orb bg-orb-4\"><\/div>\r\n\r\n<div class=\"page\">\r\n\r\n \r\n <nav>\r\n <div class=\"logo\">\r\n <div class=\"logo-mark\">\r\n <svg viewBox=\"0 0 30 30\" fill=\"none\"><path d=\"M15 4L17 11.5L24.5 8L20 14.5L27 15L20 15.5L24.5 22L17 18.5L15 26L13 18.5L5.5 22L10 15.5L3 15L10 14.5L5.5 8L13 11.5Z\" fill=\"white\"\/><\/svg>\r\n <\/div>\r\n Machi<span class=\"logo-dot\">.ma<\/span>\r\n <\/div>\r\n <div class=\"nav-badge\">Bient\u00f4t disponible<\/div>\r\n <\/nav>\r\n\r\n <div class=\"main\">\r\n\r\n \r\n <div class=\"hero-left\">\r\n\r\n <h1>\r\n Un <span class=\"accent\">dossier<\/span>, une <span class=\"accent\">cl\u00e9<\/span>,<br>\r\n un <span class=\"accent\">m\u00e9dicament<\/span><br>\r\n \u00e0 envoyer au Maroc ?\r\n <\/h1>\r\n\r\n <div class=\"tagline\">\r\n <span class=\"slogan-anim\"><span class=\"slogan-pop\">Machi Machi<\/span> di m3ak hadchi.<\/span><br>\r\n Quelqu'un de ta ville prend l'avion bient\u00f4t \u2014 il a de la place pour ton colis.\r\n <\/div>\r\n\r\n <div class=\"free-badge\">\r\n <svg viewBox=\"0 0 14 14\" fill=\"none\"><path d=\"M7 1l1.2 4H13L9.5 7.5l1.2 4L7 9.3l-3.7 2.2 1.2-4L1 5h4.8z\" fill=\"white\"\/><\/svg>\r\n 100% Gratuit \u2014 pour toujours\r\n <\/div>\r\n\r\n <div class=\"item-marquee\">\r\n <div class=\"item-track\">\r\n \r\n <div class=\"item-chip\"><span class=\"ic-3d\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M14 3H6a1.5 1.5 0 0 0-1.5 1.5v15A1.5 1.5 0 0 0 6 21h12a1.5 1.5 0 0 0 1.5-1.5V8.5z\"\/><path d=\"M14 3v5.5h5.5\"\/><path d=\"M8 13h8M8 16.5h6\"\/><\/svg><\/span> Dossiers<\/div>\r\n <div class=\"item-chip\"><span class=\"ic-3d\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"8\" cy=\"8\" r=\"4.2\"\/><path d=\"M11 11l8 8M16 16l2-2M18.5 18.5l1.5-1.5\"\/><\/svg><\/span> Cl\u00e9s oubli\u00e9es<\/div>\r\n <div class=\"item-chip\"><span class=\"ic-3d\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"2\" y=\"9\" width=\"20\" height=\"6\" rx=\"3\"\/><path d=\"M12 9v6\"\/><\/svg><\/span> M\u00e9dicaments<\/div>\r\n <div class=\"item-chip\"><span class=\"ic-3d\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3.5 7.5 12 3l8.5 4.5v9L12 21l-8.5-4.5z\"\/><path d=\"M3.5 7.5 12 12l8.5-4.5M12 12v9\"\/><\/svg><\/span> Petits colis<\/div>\r\n <div class=\"item-chip\"><span class=\"ic-3d\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3.5\" y=\"9\" width=\"17\" height=\"11\" rx=\"1.2\"\/><path d=\"M3 9h18M12 9v11\"\/><path d=\"M12 9C12 9 9 4 6.5 5.2 4.5 6.2 7 9 12 9zM12 9c0 0 3-5 5.5-3.8C19.5 6.2 17 9 12 9z\"\/><\/svg><\/span> Cadeaux<\/div>\r\n <div class=\"item-chip\"><span class=\"ic-3d\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 8h14l-1 12H6z\"\/><path d=\"M9 8V6a3 3 0 0 1 6 0v2\"\/><\/svg><\/span> Affaires perso<\/div>\r\n \r\n <div class=\"item-chip\"><span class=\"ic-3d\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M14 3H6a1.5 1.5 0 0 0-1.5 1.5v15A1.5 1.5 0 0 0 6 21h12a1.5 1.5 0 0 0 1.5-1.5V8.5z\"\/><path d=\"M14 3v5.5h5.5\"\/><path d=\"M8 13h8M8 16.5h6\"\/><\/svg><\/span> Dossiers<\/div>\r\n <div class=\"item-chip\"><span class=\"ic-3d\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"8\" cy=\"8\" r=\"4.2\"\/><path d=\"M11 11l8 8M16 16l2-2M18.5 18.5l1.5-1.5\"\/><\/svg><\/span> Cl\u00e9s oubli\u00e9es<\/div>\r\n <div class=\"item-chip\"><span class=\"ic-3d\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"2\" y=\"9\" width=\"20\" height=\"6\" rx=\"3\"\/><path d=\"M12 9v6\"\/><\/svg><\/span> M\u00e9dicaments<\/div>\r\n <div class=\"item-chip\"><span class=\"ic-3d\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3.5 7.5 12 3l8.5 4.5v9L12 21l-8.5-4.5z\"\/><path d=\"M3.5 7.5 12 12l8.5-4.5M12 12v9\"\/><\/svg><\/span> Petits colis<\/div>\r\n <div class=\"item-chip\"><span class=\"ic-3d\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3.5\" y=\"9\" width=\"17\" height=\"11\" rx=\"1.2\"\/><path d=\"M3 9h18M12 9v11\"\/><path d=\"M12 9C12 9 9 4 6.5 5.2 4.5 6.2 7 9 12 9zM12 9c0 0 3-5 5.5-3.8C19.5 6.2 17 9 12 9z\"\/><\/svg><\/span> Cadeaux<\/div>\r\n <div class=\"item-chip\"><span class=\"ic-3d\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 8h14l-1 12H6z\"\/><path d=\"M9 8V6a3 3 0 0 1 6 0v2\"\/><\/svg><\/span> Affaires perso<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"form-block\">\r\n <div class=\"email-row\">\r\n <input id=\"email\" class=\"email-input\" type=\"email\" placeholder=\"Ton adresse email\" \/>\r\n <button class=\"cta-btn\" onclick=\"submit()\">\r\n Rejoindre\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 14 14\" fill=\"none\"><path d=\"M3 7H11M11 7L7.5 3.5M11 7L7.5 10.5\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\r\n <\/button>\r\n <\/div>\r\n <p id=\"note\" class=\"form-note\">Aussi simple qu'\u00e9crire ton email. Aucun spam \u2014 juste un message le jour du lancement.<\/p>\r\n <\/div>\r\n\r\n <div class=\"trust-pills\">\r\n <div class=\"trust-pill\"><div class=\"tp-dot\"><\/div>Profils v\u00e9rifi\u00e9s<\/div>\r\n <div class=\"trust-pill\"><div class=\"tp-dot\"><\/div>Entre Marocains<\/div>\r\n <div class=\"trust-pill\"><div class=\"tp-dot\"><\/div>Plus rapide<\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n \r\n <div class=\"hero-right\">\r\n <div class=\"mockup-wrap\">\r\n <div class=\"mockup\">\r\n\r\n \r\n <div class=\"mock-chrome\">\r\n <div class=\"mock-dots\"><span><\/span><span><\/span><span><\/span><\/div>\r\n <div class=\"mock-url\">\r\n <span class=\"url-lock\">\ud83d\udd12<\/span>\r\n machi.ma\/voyages\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"mock-app\">\r\n\r\n \r\n <div class=\"mock-sidebar\">\r\n <div class=\"sb-logo\">\r\n <div class=\"sb-logo-mark\">\r\n <svg viewBox=\"0 0 30 30\" fill=\"none\"><path d=\"M15 4L17 11.5L24.5 8L20 14.5L27 15L20 15.5L24.5 22L17 18.5L15 26L13 18.5L5.5 22L10 15.5L3 15L10 14.5L5.5 8L13 11.5Z\" fill=\"white\"\/><\/svg>\r\n <\/div>\r\n Machi<span class=\"sb-logo-dot\">.ma<\/span>\r\n <\/div>\r\n\r\n <div class=\"sb-section\">Principal<\/div>\r\n\r\n <div class=\"sb-item active\">\r\n <svg viewBox=\"0 0 14 14\" fill=\"none\"><circle cx=\"7\" cy=\"5\" r=\"3.5\" stroke=\"currentColor\" stroke-width=\"1.2\"\/><path d=\"M1.5 13c0-3 2.5-5 5.5-5s5.5 2 5.5 5\" stroke=\"currentColor\" stroke-width=\"1.2\" stroke-linecap=\"round\"\/><\/svg>\r\n Voyageurs\r\n <\/div>\r\n <div class=\"sb-item\">\r\n <svg viewBox=\"0 0 14 14\" fill=\"none\"><rect x=\"1\" y=\"3\" width=\"12\" height=\"9\" rx=\"1.5\" stroke=\"currentColor\" stroke-width=\"1.2\"\/><path d=\"M4 1v2M10 1v2\" stroke=\"currentColor\" stroke-width=\"1.2\" stroke-linecap=\"round\"\/><\/svg>\r\n Mes colis\r\n <\/div>\r\n <div class=\"sb-item\">\r\n <svg viewBox=\"0 0 14 14\" fill=\"none\"><path d=\"M2 2h10a1 1 0 011 1v6a1 1 0 01-1 1H4l-3 3V3a1 1 0 011-1z\" stroke=\"currentColor\" stroke-width=\"1.2\" stroke-linejoin=\"round\"\/><\/svg>\r\n Messages\r\n <span style=\"margin-left:auto;background:var(--accent);color:#fff;font-size:7px;font-weight:700;padding:1px 5px;border-radius:100px;\">3<\/span>\r\n <\/div>\r\n\r\n <div class=\"sb-section\">Compte<\/div>\r\n\r\n <div class=\"sb-item\">\r\n <svg viewBox=\"0 0 14 14\" fill=\"none\"><path d=\"M7 1l1 3.5H12L9 7l1.2 3.5L7 8.5l-3.2 2L5 7 2 4.5h4z\" stroke=\"currentColor\" stroke-width=\"1.1\" stroke-linejoin=\"round\"\/><\/svg>\r\n Avis re\u00e7us\r\n <\/div>\r\n <div class=\"sb-item\">\r\n <svg viewBox=\"0 0 14 14\" fill=\"none\"><circle cx=\"7\" cy=\"7\" r=\"5.5\" stroke=\"currentColor\" stroke-width=\"1.2\"\/><path d=\"M7 4v3.5L9.5 9\" stroke=\"currentColor\" stroke-width=\"1.2\" stroke-linecap=\"round\"\/><\/svg>\r\n Historique\r\n <\/div>\r\n\r\n <div class=\"sb-avatar\">\r\n <div class=\"sb-av-circle\">YB<\/div>\r\n <div>\r\n <div class=\"sb-av-name\">Yassmine B.<\/div>\r\n <div class=\"sb-av-role\">Exp\u00e9diteur<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"mock-main\">\r\n\r\n \r\n <div class=\"mock-topbar\">\r\n <div>\r\n <div class=\"tb-greeting\">Bonjour, Yassmine \ud83d\udc4b<\/div>\r\n <div class=\"tb-sub\">14 voyageurs disponibles cette semaine<\/div>\r\n <\/div>\r\n <button class=\"tb-btn\">\r\n <svg width=\"8\" height=\"8\" viewBox=\"0 0 10 10\" fill=\"none\"><path d=\"M5 1v8M1 5h8\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/><\/svg>\r\n Publier un vol\r\n <\/button>\r\n <\/div>\r\n\r\n \r\n <div class=\"mock-search\">\r\n <div class=\"msf\">\r\n <div class=\"msf-label\">D\u00e9part<\/div>\r\n <div class=\"msf-val\">\ud83c\uddeb\ud83c\uddf7 Paris CDG<\/div>\r\n <\/div>\r\n <div class=\"msf-arrow\">\r\n <svg viewBox=\"0 0 12 12\" fill=\"none\"><path d=\"M2 6h8M7 3l3 3-3 3\" stroke=\"#005a2b\" stroke-width=\"1.3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\r\n <\/div>\r\n <div class=\"msf\">\r\n <div class=\"msf-label\">Destination<\/div>\r\n <div class=\"msf-val\">\ud83c\uddf2\ud83c\udde6 Casablanca<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"mock-results-bar\">\r\n <span>Voyageurs disponibles<\/span>\r\n <span class=\"mock-results-count\">14 r\u00e9sultats<\/span>\r\n <\/div>\r\n\r\n \r\n <div class=\"mock-cards\">\r\n\r\n <div class=\"v-card featured\">\r\n <div class=\"v-av\" style=\"background:#eaf4ee;color:#005a2b;\">KB<\/div>\r\n <div class=\"v-body\">\r\n <div class=\"v-top-row\">\r\n <span class=\"v-name\">Karim B.<\/span>\r\n <span class=\"v-verified\">\r\n <svg viewBox=\"0 0 10 10\" fill=\"none\"><path d=\"M2 5L4 7.5L8 3\" stroke=\"#9ca3af\" stroke-width=\"1.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\r\n V\u00e9rifi\u00e9\r\n <\/span>\r\n <\/div>\r\n <div class=\"v-route-row\">\r\n CDG <span class=\"v-route-arr\">\u2192<\/span> CMN \u00b7 RAM \u00b7 14 juin\r\n <\/div>\r\n <div class=\"v-tags\">\r\n <span class=\"vtag\">Darija & Fran\u00e7ais<\/span>\r\n <span class=\"vtag vtag-kg\">5 kg dispo<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"v-right\">\r\n <div class=\"v-rating\">\u2b50 4.9 <span>\u00b7 12 livr.<\/span><\/div>\r\n <button class=\"v-btn\">Contacter<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"v-card\">\r\n <div class=\"v-av\" style=\"background:#f0eaf5;color:#4a2a6e;\">NM<\/div>\r\n <div class=\"v-body\">\r\n <div class=\"v-top-row\">\r\n <span class=\"v-name\">Nadia M.<\/span>\r\n <span class=\"v-verified\">\r\n <svg viewBox=\"0 0 10 10\" fill=\"none\"><path d=\"M2 5L4 7.5L8 3\" stroke=\"#9ca3af\" stroke-width=\"1.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\r\n V\u00e9rifi\u00e9\r\n <\/span>\r\n <\/div>\r\n <div class=\"v-route-row\">CDG <span class=\"v-route-arr\">\u2192<\/span> CMN \u00b7 Air France \u00b7 18 juin<\/div>\r\n <div class=\"v-tags\">\r\n <span class=\"vtag\">Arabe & Fran\u00e7ais<\/span>\r\n <span class=\"vtag vtag-kg\">3 kg dispo<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"v-right\">\r\n <div class=\"v-rating\">\u2b50 4.7 <span>\u00b7 4 livr.<\/span><\/div>\r\n <button class=\"v-btn\">Contacter<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"v-card\">\r\n <div class=\"v-av\" style=\"background:#fdf0e8;color:#7a3010;\">YA<\/div>\r\n <div class=\"v-body\">\r\n <div class=\"v-top-row\">\r\n <span class=\"v-name\">Youssef A.<\/span>\r\n <span class=\"v-verified\">\r\n <svg viewBox=\"0 0 10 10\" fill=\"none\"><path d=\"M2 5L4 7.5L8 3\" stroke=\"#9ca3af\" stroke-width=\"1.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\r\n V\u00e9rifi\u00e9\r\n <\/span>\r\n <\/div>\r\n <div class=\"v-route-row\">CDG <span class=\"v-route-arr\">\u2192<\/span> RBA \u00b7 Ryanair \u00b7 21 juin<\/div>\r\n <div class=\"v-tags\">\r\n <span class=\"vtag\">Darija & Anglais<\/span>\r\n <span class=\"vtag vtag-kg\">8 kg dispo<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"v-right\">\r\n <div class=\"v-rating\">\u2b50 5.0 <span>\u00b7 7 livr.<\/span><\/div>\r\n <button class=\"v-btn\">Contacter<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"mobile-waitlist\">\r\n <div class=\"mw-inner\">\r\n <div class=\"mw-badge\">Bient\u00f4t disponible<\/div>\r\n <div class=\"mw-title\">Sois parmi les premiers sur <span>Machi.ma<\/span><\/div>\r\n <div class=\"mw-sub\">Un dossier, une cl\u00e9, un m\u00e9dicament \u00e0 envoyer au Maroc ? Rejoins la liste d'attente.<\/div>\r\n <div class=\"mw-form\">\r\n <input id=\"email-m\" class=\"email-input\" type=\"email\" placeholder=\"Ton adresse email\" \/>\r\n <button class=\"cta-btn\" onclick=\"submitM()\">\r\n Rejoindre\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 14 14\" fill=\"none\"><path d=\"M3 7H11M11 7L7.5 3.5M11 7L7.5 10.5\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\r\n <\/button>\r\n <\/div>\r\n <p id=\"note-m\" class=\"form-note\">Aussi simple qu'\u00e9crire ton email. Aucun spam.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <footer>\r\n <p>\u00a9 2026 Machi.ma \u2014 Tous droits r\u00e9serv\u00e9s<\/p>\r\n <div class=\"footer-links\">\r\n <span>Contact<\/span>\r\n <span>Confidentialit\u00e9<\/span>\r\n <span>CGU<\/span>\r\n <\/div>\r\n <\/footer>\r\n\r\n<\/div>\r\n\r\n<script>\r\n const SHEET_URL = \"https:\/\/script.google.com\/macros\/s\/AKfycbzn4HB70v0fqS9zGBhd6tlNkRm05Ov9vzFV3WqlH7nJN2hqMlGa4kJI-1rBovtfSPA\/exec\";\r\n\r\n async function submit() {\r\n const input = document.getElementById('email');\r\n const note = document.getElementById('note');\r\n const email = input.value.trim();\r\n if (!email || !\/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/.test(email)) {\r\n note.textContent = \"\u26a0\ufe0f Entre une adresse email valide.\";\r\n note.style.color = \"#c1121f\"; return;\r\n }\r\n note.textContent = \"Envoi en cours...\";\r\n note.style.color = \"#7a7068\";\r\n try {\r\n await fetch(SHEET_URL, {\r\n method: \"POST\", mode: \"no-cors\",\r\n headers: { \"Content-Type\": \"application\/json\" },\r\n body: JSON.stringify({ email, source: \"machi.ma\" })\r\n });\r\n input.value = \"\"; input.disabled = true;\r\n note.textContent = \"\u2705 Machi! Tu es sur la liste.\";\r\n note.style.color = \"#9ca3af\";\r\n } catch {\r\n note.textContent = \"\u274c Une erreur est survenue. R\u00e9essaie.\";\r\n note.style.color = \"#c1121f\";\r\n }\r\n }\r\n\r\n \/\/ rappel waitlist mobile\r\n async function submitM() {\r\n const input = document.getElementById('email-m');\r\n const note = document.getElementById('note-m');\r\n const email = input.value.trim();\r\n if (!email || !\/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/.test(email)) {\r\n note.textContent = \"\u26a0\ufe0f Entre une adresse email valide.\";\r\n note.style.color = \"#c1121f\"; return;\r\n }\r\n note.textContent = \"Envoi en cours...\";\r\n note.style.color = \"#7a7068\";\r\n try {\r\n await fetch(SHEET_URL, {\r\n method: \"POST\", mode: \"no-cors\",\r\n headers: { \"Content-Type\": \"application\/json\" },\r\n body: JSON.stringify({ email, source: \"machi.ma-mobile\" })\r\n });\r\n input.value = \"\"; input.disabled = true;\r\n note.textContent = \"\u2705 Machi! Tu es sur la liste.\";\r\n note.style.color = \"#9ca3af\";\r\n } catch {\r\n note.textContent = \"\u274c Une erreur est survenue. R\u00e9essaie.\";\r\n note.style.color = \"#c1121f\";\r\n }\r\n }\r\n\r\n \/\/ \u2500\u2500 BACKGROUND PARTICLES \u2500\u2500\r\n (function() {\r\n const canvas = document.getElementById('bgCanvas');\r\n if (!canvas) return;\r\n const ctx = canvas.getContext('2d');\r\n let W, H, particles = [], raf;\r\n const COLORS = [\r\n 'rgba(0,98,51,',\r\n 'rgba(107,114,128,',\r\n 'rgba(139,106,42,',\r\n ];\r\n\r\n function resize() {\r\n W = canvas.width = window.innerWidth;\r\n H = canvas.height = window.innerHeight;\r\n }\r\n\r\n function rand(a, b) { return a + Math.random() * (b - a); }\r\n\r\n function createParticle() {\r\n const col = COLORS[Math.floor(Math.random() * COLORS.length)];\r\n return {\r\n x: rand(0, W), y: rand(0, H),\r\n r: rand(1.0, 3.2),\r\n vx: rand(-0.15, 0.15),\r\n vy: rand(-0.22, -0.05),\r\n alpha: rand(0.08, 0.35),\r\n da: rand(-0.002, 0.002),\r\n color: col,\r\n life: rand(0, Math.PI * 2),\r\n speed: rand(0.005, 0.012),\r\n };\r\n }\r\n\r\n function init() {\r\n resize();\r\n particles = [];\r\n const count = Math.min(65, Math.floor(W * H \/ 16000));\r\n for (let i = 0; i < count; i++) particles.push(createParticle());\r\n }\r\n\r\n function draw() {\r\n ctx.clearRect(0, 0, W, H);\r\n particles.forEach(p => {\r\n p.life += p.speed;\r\n p.x += p.vx + Math.sin(p.life) * 0.1;\r\n p.y += p.vy;\r\n p.alpha += p.da;\r\n if (p.alpha < 0.05) p.da = Math.abs(p.da);\r\n if (p.alpha > 0.4) p.da = -Math.abs(p.da);\r\n if (p.y < -10) { p.y = H + 10; p.x = rand(0, W); }\r\n\r\n ctx.beginPath();\r\n ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);\r\n ctx.fillStyle = p.color + p.alpha + ')';\r\n ctx.fill();\r\n });\r\n\r\n \/\/ connecting lines between nearby particles\r\n for (let i = 0; i < particles.length; i++) {\r\n for (let j = i + 1; j < particles.length; j++) {\r\n const dx = particles[i].x - particles[j].x;\r\n const dy = particles[i].y - particles[j].y;\r\n const dist = Math.sqrt(dx*dx + dy*dy);\r\n if (dist < 85) {\r\n ctx.beginPath();\r\n ctx.moveTo(particles[i].x, particles[i].y);\r\n ctx.lineTo(particles[j].x, particles[j].y);\r\n ctx.strokeStyle = 'rgba(0,98,51,' + (0.05 * (1 - dist\/85)) + ')';\r\n ctx.lineWidth = 0.5;\r\n ctx.stroke();\r\n }\r\n }\r\n }\r\n\r\n raf = requestAnimationFrame(draw);\r\n }\r\n\r\n window.addEventListener('resize', resize);\r\n init();\r\n draw();\r\n })();\r\n\r\n<\/script>\r\n<\/body>\r\n<\/html>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-12","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/machi.ma\/index.php?rest_route=\/wp\/v2\/pages\/12","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/machi.ma\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/machi.ma\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/machi.ma\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/machi.ma\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=12"}],"version-history":[{"count":1,"href":"https:\/\/machi.ma\/index.php?rest_route=\/wp\/v2\/pages\/12\/revisions"}],"predecessor-version":[{"id":13,"href":"https:\/\/machi.ma\/index.php?rest_route=\/wp\/v2\/pages\/12\/revisions\/13"}],"wp:attachment":[{"href":"https:\/\/machi.ma\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=12"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}