{"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 \u2014 L'\u00c9cole Connect\u00e9e \u00b7 Administration \u00b7 Professeurs \u00b7 Parents<\/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;700&display=swap\" rel=\"stylesheet\">\r\n<style>\r\n :root {\r\n --bg: #eef2f8;\r\n --surface: #ffffff;\r\n --surface2: #f3f6fb;\r\n --border: rgba(0,0,0,0.07);\r\n --border-strong: rgba(0,0,0,0.12);\r\n --primary: #14233f;\r\n --accent: #1d4ed8;\r\n --accent-deep: #1538a8;\r\n --teacher: #0e7490;\r\n --parent: #b45309;\r\n --muted: #5f6675;\r\n --dim: #9aa1b0;\r\n --text: #101626;\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, #1d4ed8 0%, #1d4ed8 40%, #0e7490 40%, #0e7490 70%, #b45309 70%, #b45309 100%);\r\n z-index: 200;\r\n }\r\n\r\n \/* \u2500\u2500 BACKGROUND \u2500\u2500 *\/\r\n #bgCanvas { position: fixed; inset: 0; pointer-events: none; z-index: 0; }\r\n .bg-orb { position: fixed; border-radius: 50%; pointer-events: none; z-index: 0; }\r\n .bg-orb-1 {\r\n width: 700px; height: 700px;\r\n background: radial-gradient(circle, rgba(29,78,216,.12) 0%, rgba(29,78,216,.04) 45%, transparent 70%);\r\n filter: blur(60px); top: -200px; right: -150px;\r\n animation: orbFloat1 11s ease-in-out infinite;\r\n }\r\n .bg-orb-2 {\r\n width: 560px; height: 560px;\r\n background: radial-gradient(circle, rgba(14,116,144,.11) 0%, rgba(14,116,144,.04) 45%, transparent 70%);\r\n filter: blur(70px); bottom: -140px; left: -120px;\r\n animation: orbFloat2 14s ease-in-out infinite;\r\n }\r\n .bg-orb-3 {\r\n width: 360px; height: 360px;\r\n background: radial-gradient(circle, rgba(180,83,9,.10) 0%, transparent 70%);\r\n filter: blur(50px); top: 35%; left: 48%;\r\n animation: orbFloat3 16s ease-in-out infinite;\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 \/* \u2500\u2500 NAV \u2500\u2500 *\/\r\n nav {\r\n display: flex; align-items: center; justify-content: space-between;\r\n padding: 0 48px; height: 60px;\r\n border-bottom: 1px solid var(--border);\r\n background: rgba(238,242,248,0.96);\r\n backdrop-filter: blur(20px);\r\n position: fixed; top: 3px; left: 0; right: 0; z-index: 50;\r\n }\r\n .page { position: relative; z-index: 1; padding-top: 63px; }\r\n .logo {\r\n display: flex; align-items: center; gap: 11px;\r\n font-family: 'Playfair Display', serif;\r\n font-weight: 900; font-size: 26px; letter-spacing: -0.5px;\r\n line-height: 1; color: var(--primary);\r\n }\r\n .logo-mark {\r\n width: 34px; height: 34px;\r\n background: linear-gradient(135deg, var(--accent), var(--accent-deep));\r\n border-radius: 9px;\r\n display: flex; align-items: center; justify-content: center;\r\n box-shadow: 0 3px 10px rgba(29,78,216,0.32);\r\n flex-shrink: 0;\r\n }\r\n .logo-mark svg { width: 19px; height: 19px; }\r\n .brand-sub {\r\n font-family: 'Plus Jakarta Sans', sans-serif;\r\n font-size: 8.5px; font-weight: 600;\r\n letter-spacing: 0.08em; text-transform: uppercase;\r\n color: var(--muted); opacity: 0.6; margin-top: 3px;\r\n }\r\n .nav-right { display: flex; align-items: center; gap: 16px; }\r\n .nav-link {\r\n font-size: 13px; font-weight: 500; color: var(--muted);\r\n text-decoration: none; transition: color 0.15s;\r\n }\r\n .nav-link:hover { color: var(--primary); }\r\n .nav-cta {\r\n background: linear-gradient(110deg, #1d4ed8, #6366f1, #0ea5e9, #1d4ed8);\r\n background-size: 300% 100%;\r\n color: #fff;\r\n font-size: 12.5px; font-weight: 600;\r\n padding: 9px 18px; border-radius: 9px; border: none;\r\n cursor: pointer; font-family: inherit;\r\n box-shadow: 0 3px 12px rgba(29,78,216,0.35);\r\n transition: transform 0.15s, box-shadow 0.15s;\r\n white-space: nowrap; flex-shrink: 0;\r\n animation: shimmerBtn 2.8s ease infinite;\r\n }\r\n .nav-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(99,102,241,0.50); }\r\n\r\n \/* \u2500\u2500 HERO \u2500\u2500 *\/\r\n .hero {\r\n display: grid; grid-template-columns: minmax(0,0.85fr) minmax(0,1.15fr);\r\n gap: 28px; align-items: center;\r\n padding: 46px 48px 30px;\r\n }\r\n .hero-left {\r\n display: flex; flex-direction: column; gap: 20px;\r\n animation: riseUp 0.7s cubic-bezier(0.22,1,0.36,1) both;\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 .eyebrow {\r\n display: inline-flex; align-items: center; gap: 8px;\r\n background: var(--surface); border: 1.5px solid var(--border-strong);\r\n border-radius: 100px; padding: 6px 14px; width: fit-content;\r\n font-size: 11.5px; font-weight: 600; color: var(--accent);\r\n letter-spacing: 0.02em;\r\n }\r\n .eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }\r\n h1 {\r\n font-family: 'Playfair Display', serif;\r\n font-size: clamp(34px, 3.4vw, 52px);\r\n font-weight: 900; line-height: 1.05; letter-spacing: -1.5px;\r\n color: var(--primary);\r\n }\r\n h1 .accent { color: var(--accent); font-style: italic; }\r\n .lede { font-size: 16px; color: var(--muted); max-width: 480px; }\r\n .lede strong { color: var(--text); font-weight: 600; }\r\n\r\n .hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }\r\n .btn-primary {\r\n background: linear-gradient(110deg, #1d4ed8, #6366f1, #0ea5e9, #1d4ed8);\r\n background-size: 300% 100%;\r\n color: #fff;\r\n font-family: inherit; font-weight: 600; font-size: 14px;\r\n padding: 13px 26px; border: none; border-radius: 11px; cursor: pointer;\r\n display: flex; align-items: center; gap: 9px;\r\n box-shadow: 0 5px 18px rgba(29,78,216,0.40);\r\n transition: background-position 0.4s ease, transform 0.15s, box-shadow 0.15s;\r\n animation: shimmerBtn 2.8s ease infinite;\r\n }\r\n @keyframes shimmerBtn {\r\n 0% { background-position: 100% 0; }\r\n 50% { background-position: 0% 0; }\r\n 100% { background-position: 100% 0; }\r\n }\r\n .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(99,102,241,0.50); }\r\n .btn-primary svg { width: 15px; height: 15px; }\r\n .btn-ghost {\r\n background: var(--surface); color: var(--primary);\r\n font-family: inherit; font-weight: 600; font-size: 14px;\r\n padding: 13px 22px; border: 1.5px solid var(--border-strong); border-radius: 11px;\r\n cursor: pointer; transition: border-color 0.15s, background 0.15s;\r\n }\r\n .btn-ghost:hover { border-color: var(--accent); background: var(--surface2); }\r\n\r\n .trust-pills { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }\r\n .trust-pill {\r\n display: flex; align-items: center; gap: 7px;\r\n font-size: 12px; color: var(--muted); font-weight: 500;\r\n }\r\n .trust-pill svg { width: 15px; height: 15px; stroke: var(--accent); fill: none; stroke-width: 2; }\r\n\r\n \/* \u2500\u2500 HERO RIGHT : SCENE \u2500\u2500 *\/\r\n .scene {\r\n position: relative;\r\n display: flex; align-items: center; justify-content: flex-start;\r\n min-height: 580px;\r\n animation: riseUp 0.7s 0.15s cubic-bezier(0.22,1,0.36,1) both;\r\n }\r\n .scene::before {\r\n content: '';\r\n position: absolute; inset: 6% 2%;\r\n background: radial-gradient(ellipse at 40% 45%, rgba(29,78,216,0.07) 0%, transparent 65%);\r\n pointer-events: none;\r\n }\r\n\r\n \/* Desktop mockup (d\u00e9cal\u00e9 \u00e0 gauche pour laisser la place aux 2 t\u00e9l\u00e9phones) *\/\r\n .desktop {\r\n width: 100%; max-width: 470px;\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 8px 24px rgba(20,35,63,0.10),\r\n 0 28px 64px rgba(20,35,63,0.14);\r\n position: relative; z-index: 2;\r\n }\r\n .mock-chrome {\r\n background: #e7ebf2; 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 .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 .mock-url {\r\n flex: 1; background: rgba(255,255,255,0.75);\r\n border: 1px solid rgba(0,0,0,0.1); border-radius: 6px;\r\n padding: 4px 10px; font-size: 10.5px; color: var(--muted);\r\n display: flex; align-items: center; gap: 5px;\r\n }\r\n .url-lock { color: #28c840; }\r\n\r\n .d-banner {\r\n background: linear-gradient(120deg, var(--primary) 0%, #1c3258 100%);\r\n color: #fff; padding: 12px 16px;\r\n display: flex; align-items: center; justify-content: space-between;\r\n }\r\n .d-banner-title {\r\n font-size: 13px; font-weight: 700; letter-spacing: -0.2px;\r\n display: flex; align-items: center; gap: 8px;\r\n }\r\n .d-banner-title svg { width: 15px; height: 15px; }\r\n .d-banner-tag {\r\n font-size: 8.5px; text-transform: uppercase; letter-spacing: 0.12em;\r\n background: rgba(255,255,255,0.14); padding: 3px 9px; border-radius: 100px;\r\n font-weight: 600; color: rgba(255,255,255,0.85);\r\n }\r\n\r\n .d-body { display: grid; grid-template-columns: 92px 1fr; }\r\n .d-side { background: #f1f4fa; border-right: 1px solid var(--border); padding: 10px 0; }\r\n .d-side-item {\r\n display: flex; align-items: center; gap: 7px;\r\n padding: 7px 11px; font-size: 9.5px; color: var(--muted); font-weight: 500;\r\n }\r\n .d-side-item svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 1.8; }\r\n .d-side-item.active { color: var(--accent); font-weight: 700; border-left: 2px solid var(--accent); background: #fff; }\r\n\r\n .d-main { padding: 13px 15px; }\r\n .d-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; margin-bottom: 12px; }\r\n .d-stat {\r\n background: var(--surface2); border: 1px solid var(--border);\r\n border-radius: 9px; padding: 9px 10px;\r\n }\r\n .d-stat-num { font-size: 17px; font-weight: 800; color: var(--primary); line-height: 1; }\r\n .d-stat-lbl { font-size: 8.5px; color: var(--dim); margin-top: 4px; font-weight: 500; }\r\n .d-stat-num.blue { color: var(--accent); }\r\n .d-stat-num.teal { color: var(--teacher); }\r\n .d-stat-num.amber { color: var(--parent); }\r\n\r\n .d-rows-title {\r\n font-size: 9px; text-transform: uppercase; letter-spacing: 0.1em;\r\n color: var(--dim); font-weight: 700; margin: 4px 0 7px;\r\n }\r\n .d-row {\r\n display: flex; align-items: center; gap: 9px;\r\n padding: 7px 9px; border-radius: 8px; border: 1px solid var(--border);\r\n margin-bottom: 6px; background: #fff;\r\n }\r\n .d-row-av {\r\n width: 24px; height: 24px; border-radius: 7px; flex-shrink: 0;\r\n display: flex; align-items: center; justify-content: center;\r\n font-size: 9px; font-weight: 700; color: #fff;\r\n }\r\n .d-row-body { flex: 1; min-width: 0; }\r\n .d-row-name { font-size: 10px; font-weight: 600; color: var(--primary); }\r\n .d-row-sub { font-size: 8.5px; color: var(--dim); }\r\n .d-row-tag {\r\n font-size: 8px; font-weight: 700; padding: 2px 7px; border-radius: 100px;\r\n }\r\n .tag-sent { background: rgba(29,78,216,0.10); color: var(--accent); }\r\n .tag-read { background: rgba(14,116,144,0.10); color: var(--teacher); }\r\n .tag-wait { background: rgba(180,83,9,0.10); color: var(--parent); }\r\n\r\n \/* Carte analyse IA *\/\r\n .d-ai {\r\n display: flex; align-items: flex-start; gap: 8px;\r\n padding: 9px 10px; border-radius: 9px; margin-bottom: 12px;\r\n background: linear-gradient(120deg, rgba(29,78,216,0.07), rgba(14,116,144,0.06));\r\n border: 1px solid rgba(29,78,216,0.18);\r\n }\r\n .d-ai-ic {\r\n width: 20px; height: 20px; border-radius: 6px; flex-shrink: 0;\r\n background: linear-gradient(135deg, var(--accent), var(--teacher));\r\n display: flex; align-items: center; justify-content: center;\r\n }\r\n .d-ai-ic svg { width: 12px; height: 12px; stroke: #fff; fill: none; stroke-width: 2; }\r\n .d-ai-body { flex: 1; min-width: 0; }\r\n .d-ai-tag {\r\n font-size: 7.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;\r\n color: var(--accent); margin-bottom: 2px;\r\n }\r\n .d-ai-txt { font-size: 9px; color: var(--text); line-height: 1.35; }\r\n .d-ai-txt b { color: var(--primary); font-weight: 700; }\r\n\r\n \/* Graphe Mon IA *\/\r\n .d-chart {\r\n background: var(--surface2); border: 1px solid var(--border);\r\n border-radius: 9px; padding: 10px 11px 8px; margin-bottom: 12px;\r\n }\r\n .d-chart-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; }\r\n .d-chart-title { font-size: 9.5px; font-weight: 700; color: var(--primary); }\r\n .d-chart-delta {\r\n font-size: 7.5px; font-weight: 800; color: var(--teacher);\r\n background: rgba(14,116,144,0.10); padding: 2px 7px; border-radius: 100px;\r\n }\r\n .d-chart svg { width: 100%; height: auto; display: block; }\r\n .d-chart-x { display: flex; justify-content: space-between; margin-top: 4px; }\r\n .d-chart-x span { font-size: 7px; color: var(--dim); font-weight: 500; }\r\n\r\n \/* Deux colonnes : graphe \u00e0 gauche, communications \u00e0 droite *\/\r\n .d-split { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 11px; align-items: start; }\r\n .d-split .d-chart { margin-bottom: 0; height: 100%; }\r\n .d-split .d-rows-title { margin-top: 0; }\r\n\r\n \/* Phones *\/\r\n .phones { display: contents; }\r\n .phone {\r\n position: absolute; width: 168px;\r\n background: #0c1322; border-radius: 26px; padding: 7px;\r\n box-shadow: 0 16px 40px rgba(20,35,63,0.28);\r\n z-index: 3;\r\n }\r\n .phone-left { right: 122px; bottom: 20px; transform: rotate(-3deg); width: 164px; z-index: 3; }\r\n .phone-right { right: -14px; top: 16px; transform: rotate(3deg); width: 164px; z-index: 4; }\r\n .phone-screen {\r\n background: var(--surface); border-radius: 22px; overflow: hidden;\r\n position: relative; aspect-ratio: 9 \/ 19.5;\r\n }\r\n .phone-screen::after { \/* barre d'accueil iOS *\/\r\n content: ''; position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%);\r\n width: 34%; max-width: 48px; height: 4px; border-radius: 100px;\r\n background: rgba(16,22,38,0.20); z-index: 4;\r\n }\r\n .phone-notch {\r\n position: absolute; top: 6px; left: 50%; transform: translateX(-50%);\r\n width: 34%; max-width: 50px; height: 5px; background: #0c1322; border-radius: 100px; z-index: 4;\r\n }\r\n .ph-header {\r\n padding: 18px 13px 12px; color: #fff;\r\n }\r\n .ph-header.teacher { background: linear-gradient(135deg, var(--teacher), #155e75); }\r\n .ph-header.parent { background: linear-gradient(135deg, var(--parent), #92400e); }\r\n .ph-role {\r\n font-size: 8px; text-transform: uppercase; letter-spacing: 0.12em;\r\n font-weight: 600; opacity: 0.85; margin-bottom: 3px;\r\n }\r\n .ph-hello { font-size: 14px; font-weight: 800; letter-spacing: -0.3px; }\r\n .ph-hello span { font-weight: 500; opacity: 0.85; }\r\n .ph-body { padding: 11px 11px 14px; display: flex; flex-direction: column; gap: 8px; }\r\n .ph-card {\r\n display: flex; align-items: center; gap: 9px;\r\n padding: 9px 10px; border-radius: 11px;\r\n border: 1px solid var(--border); background: #fff;\r\n }\r\n .ph-card-ic {\r\n width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;\r\n display: flex; align-items: center; justify-content: center;\r\n }\r\n .ph-card-ic svg { width: 14px; height: 14px; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }\r\n .ph-card-body { flex: 1; min-width: 0; }\r\n .ph-card-title { font-size: 10px; font-weight: 700; color: var(--primary); line-height: 1.2; }\r\n .ph-card-sub { font-size: 8px; color: var(--dim); margin-top: 1px; }\r\n .ph-card-arr { color: var(--dim); }\r\n .ph-card-arr svg { width: 11px; height: 11px; }\r\n\r\n .ic-teal { background: rgba(14,116,144,0.10); }\r\n .ic-teal svg { stroke: var(--teacher); }\r\n .ic-amber { background: rgba(180,83,9,0.10); }\r\n .ic-amber svg { stroke: var(--parent); }\r\n .ic-blue { background: rgba(29,78,216,0.10); }\r\n .ic-blue svg { stroke: var(--accent); }\r\n\r\n .ph-cta {\r\n margin-top: 2px; text-align: center;\r\n font-size: 9.5px; font-weight: 700; color: #fff;\r\n padding: 9px; border-radius: 10px;\r\n }\r\n .ph-cta.teacher { background: var(--teacher); }\r\n .ph-cta.parent { background: var(--parent); }\r\n\r\n .scene-label {\r\n position: absolute; font-size: 9px; font-weight: 700;\r\n text-transform: uppercase; letter-spacing: 0.1em;\r\n padding: 4px 10px; border-radius: 100px; z-index: 5;\r\n background: #fff; box-shadow: 0 4px 12px rgba(20,35,63,0.14);\r\n }\r\n .label-teacher { color: var(--teacher); right: 124px; bottom: -12px; top: auto; z-index: 6; }\r\n .label-parent { color: var(--parent); right: -6px; top: -18px; z-index: 6; }\r\n\r\n \/* \u2500\u2500 CHIFFRES CL\u00c9S \u2500\u2500 *\/\r\n .stats-section {\r\n padding: 0 48px 48px;\r\n max-width: 1280px; margin: 0 auto;\r\n }\r\n .stats-inner {\r\n background: var(--primary);\r\n border-radius: 18px; padding: 36px 48px;\r\n }\r\n .stats-grid {\r\n display: grid; grid-template-columns: repeat(4,1fr);\r\n }\r\n .stat-item {\r\n padding: 0 28px; text-align: center; position: relative;\r\n opacity: 0; transform: translateY(14px);\r\n transition: opacity 0.5s ease, transform 0.5s ease;\r\n }\r\n .stat-item.visible { opacity: 1; transform: translateY(0); }\r\n .stat-item:not(:last-child)::after {\r\n content: '';\r\n position: absolute; right: 0; top: 10%; bottom: 10%;\r\n width: 1px; background: rgba(255,255,255,0.10);\r\n }\r\n .stat-value {\r\n font-family: 'Playfair Display', serif;\r\n font-size: clamp(32px, 3.2vw, 48px); font-weight: 900;\r\n line-height: 1; letter-spacing: -1.5px; color: #fff;\r\n display: flex; align-items: baseline; justify-content: center; gap: 2px;\r\n }\r\n .stat-value .suffix {\r\n font-size: 0.48em; font-weight: 700; color: rgba(255,255,255,0.6);\r\n letter-spacing: 0; margin-left: 1px;\r\n }\r\n .stat-value .prefix {\r\n font-size: 0.52em; font-weight: 700; color: rgba(255,255,255,0.6);\r\n letter-spacing: 0; margin-right: 1px; align-self: flex-start; margin-top: 8px;\r\n }\r\n .stat-label {\r\n font-size: 12px; font-weight: 500; color: rgba(255,255,255,0.5);\r\n margin-top: 8px; line-height: 1.4;\r\n }\r\n @media (max-width: 960px) {\r\n .stats-section { padding: 0 20px 36px; }\r\n .stats-inner { padding: 28px 20px; }\r\n .stats-grid { grid-template-columns: repeat(2,1fr); gap: 0; row-gap: 28px; }\r\n .stat-item:nth-child(2)::after,\r\n .stat-item:nth-child(4)::after { display: none; }\r\n .stat-item:nth-child(1),\r\n .stat-item:nth-child(2) { padding-bottom: 28px; border-bottom: 1px solid rgba(255,255,255,0.08); }\r\n }\r\n @media (max-width: 560px) {\r\n .stat-value { font-size: 30px; }\r\n .stat-label { font-size: 11px; }\r\n }\r\n\r\n \/* \u2500\u2500 ROLES STRIP \u2500\u2500 *\/\r\n .roles {\r\n display: grid; grid-template-columns: repeat(3,1fr); gap: 16px;\r\n padding: 26px 48px 40px; max-width: 1280px; margin: 0 auto;\r\n }\r\n .role-card {\r\n background: var(--surface); border: 1px solid var(--border);\r\n border-radius: 16px; padding: 22px 22px 24px;\r\n box-shadow: 0 2px 10px rgba(20,35,63,0.04);\r\n transition: transform 0.18s, box-shadow 0.18s;\r\n }\r\n .role-card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(20,35,63,0.10); }\r\n .role-ic {\r\n width: 42px; height: 42px; border-radius: 12px;\r\n display: flex; align-items: center; justify-content: center; margin-bottom: 14px;\r\n }\r\n .role-ic svg { width: 21px; height: 21px; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }\r\n .role-ic.admin { background: rgba(29,78,216,0.10); }\r\n .role-ic.admin svg { stroke: var(--accent); }\r\n .role-ic.teacher { background: rgba(14,116,144,0.10); }\r\n .role-ic.teacher svg { stroke: var(--teacher); }\r\n .role-ic.parent { background: rgba(180,83,9,0.10); }\r\n .role-ic.parent svg { stroke: var(--parent); }\r\n .role-tag {\r\n font-size: 9px; text-transform: uppercase; letter-spacing: 0.12em;\r\n font-weight: 700; margin-bottom: 6px;\r\n }\r\n .role-tag.admin { color: var(--accent); }\r\n .role-tag.teacher { color: var(--teacher); }\r\n .role-tag.parent { color: var(--parent); }\r\n .role-title { font-family: 'Playfair Display', serif; font-size: 20px; font-weight: 700; color: var(--primary); margin-bottom: 8px; }\r\n .role-desc { font-size: 13.5px; color: var(--muted); line-height: 1.55; }\r\n .role-list { list-style: none; margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }\r\n .role-list li { font-size: 12.5px; color: var(--text); display: flex; align-items: center; gap: 8px; }\r\n .role-list li::before {\r\n content: ''; width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0;\r\n background: var(--dim);\r\n }\r\n\r\n \/* \u2500\u2500 T\u00c9MOIGNAGE \u2500\u2500 *\/\r\n .testimonial-section {\r\n padding: 0 48px 48px;\r\n max-width: 1280px; margin: 0 auto;\r\n }\r\n .testimonial-wrap {\r\n display: grid; grid-template-columns: 1fr 1fr; gap: 16px;\r\n }\r\n .testimonial-card {\r\n display: flex; align-items: flex-start; gap: 20px;\r\n padding: 28px 30px;\r\n background: var(--surface);\r\n border: 1px solid var(--border);\r\n border-radius: 16px;\r\n }\r\n .testimonial-avatar {\r\n flex-shrink: 0; position: relative;\r\n }\r\n .testimonial-avatar img {\r\n width: 56px; height: 56px; border-radius: 50%;\r\n object-fit: cover; display: block;\r\n border: 3px solid var(--bg);\r\n box-shadow: 0 0 0 1px var(--border);\r\n }\r\n .testimonial-avatar::after {\r\n content: '\"';\r\n position: absolute; bottom: -4px; right: -4px;\r\n width: 20px; height: 20px; border-radius: 50%;\r\n background: var(--accent); color: #fff;\r\n font-size: 12px; font-weight: 900; line-height: 18px;\r\n text-align: center; font-family: 'Playfair Display', serif;\r\n border: 2px solid var(--surface);\r\n }\r\n .testimonial-body { flex: 1; min-width: 0; }\r\n .testimonial-quote {\r\n font-size: 14px; color: var(--text); line-height: 1.65;\r\n font-style: italic; letter-spacing: -0.1px;\r\n margin-bottom: 14px;\r\n }\r\n .testimonial-quote strong { font-style: normal; color: var(--primary); font-weight: 700; }\r\n .testimonial-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }\r\n .testimonial-name { font-size: 12.5px; font-weight: 700; color: var(--primary); }\r\n .testimonial-role { font-size: 11.5px; color: var(--muted); }\r\n .testimonial-sep { width: 3px; height: 3px; border-radius: 50%; background: var(--dim); flex-shrink: 0; }\r\n .testimonial-stars {\r\n display: flex; gap: 2px; margin-top: 10px;\r\n }\r\n .testimonial-stars svg { width: 12px; height: 12px; fill: #f59e0b; }\r\n @media (max-width: 960px) {\r\n .testimonial-section { padding: 0 20px 36px; }\r\n .testimonial-wrap { grid-template-columns: 1fr; }\r\n .testimonial-card { padding: 22px 20px; }\r\n }\r\n\r\n \/* \u2500\u2500 CTA BAND \u2500\u2500 *\/\r\n .cta-band {\r\n margin: 0 48px 40px; max-width: 1184px; margin-left: auto; margin-right: auto;\r\n background: linear-gradient(125deg, var(--primary) 0%, #1c3258 60%, #1d4ed8 130%);\r\n border-radius: 20px; padding: 36px 40px;\r\n display: flex; align-items: center; justify-content: space-between; gap: 24px;\r\n flex-wrap: wrap;\r\n box-shadow: 0 18px 44px rgba(20,35,63,0.22);\r\n }\r\n .cta-band-text h2 {\r\n font-family: 'Playfair Display', serif; color: #fff;\r\n font-size: 26px; font-weight: 800; line-height: 1.15; letter-spacing: -0.5px;\r\n }\r\n .cta-band-text p { color: rgba(255,255,255,0.72); font-size: 14px; margin-top: 6px; max-width: 460px; }\r\n .cta-band .btn-primary { background: linear-gradient(110deg, #fff, #bfdbfe, #fff, #bfdbfe, #fff); background-size: 400% 100%; color: var(--accent); box-shadow: 0 6px 20px rgba(0,0,0,0.18); animation: shimmerBtnWhite 2.8s ease infinite; }\r\n @keyframes shimmerBtnWhite {\r\n 0% { background-position: 100% 0; }\r\n 50% { background-position: 0% 0; }\r\n 100% { background-position: 100% 0; }\r\n }\r\n .cta-band .btn-primary svg { stroke: var(--accent); }\r\n .cta-band .btn-primary:hover { box-shadow: 0 10px 24px rgba(0,0,0,0.22); }\r\n\r\n footer {\r\n padding: 22px 48px; border-top: 1px solid var(--border);\r\n display: flex; align-items: center; justify-content: space-between;\r\n font-size: 12px; color: var(--dim); flex-wrap: wrap; gap: 10px;\r\n }\r\n footer a { color: var(--muted); text-decoration: none; }\r\n footer a:hover { color: var(--accent); }\r\n\r\n \/* \u2500\u2500 MODAL \u2500\u2500 *\/\r\n .modal-overlay {\r\n position: fixed; inset: 0; z-index: 500;\r\n background: rgba(16,22,38,0.55); backdrop-filter: blur(6px);\r\n display: none; align-items: center; justify-content: center; padding: 20px;\r\n }\r\n .modal-overlay.open { display: flex !important; align-items: center !important; justify-content: center !important; animation: fadeIn 0.2s ease; }\r\n @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }\r\n .modal {\r\n background: var(--surface); border-radius: 18px;\r\n width: 100% !important; max-width: 440px !important;\r\n margin: 0 auto !important; box-sizing: border-box !important;\r\n padding: 28px 28px 26px; position: relative;\r\n box-shadow: 0 24px 60px rgba(0,0,0,0.30);\r\n animation: popUp 0.25s cubic-bezier(0.22,1,0.36,1);\r\n }\r\n @keyframes popUp { from { opacity: 0; transform: translateY(16px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }\r\n .modal-close {\r\n position: absolute; top: 16px; right: 16px; width: 30px; height: 30px;\r\n border: none; background: var(--surface2); border-radius: 8px; cursor: pointer;\r\n display: flex; align-items: center; justify-content: center; color: var(--muted);\r\n font-size: 17px; line-height: 1;\r\n }\r\n .modal-close:hover { background: #e7ebf2; color: var(--primary); }\r\n .modal-eyebrow {\r\n font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em;\r\n font-weight: 700; color: var(--accent); margin-bottom: 6px;\r\n }\r\n .modal h3 { font-family: 'Playfair Display', serif; font-size: 23px; font-weight: 800; color: var(--primary); letter-spacing: -0.5px; }\r\n .modal-sub { font-size: 13px; color: var(--muted); margin-top: 6px; margin-bottom: 18px; }\r\n .field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 13px; }\r\n .field label { font-size: 11.5px; font-weight: 600; color: var(--text); }\r\n .field input {\r\n background: var(--surface2); border: 1.5px solid var(--border-strong);\r\n border-radius: 10px; padding: 11px 14px; font-size: 13.5px; color: var(--text);\r\n font-family: inherit; outline: none; transition: border-color 0.15s, box-shadow 0.15s;\r\n }\r\n .field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(29,78,216,0.10); background: #fff; }\r\n .field input::placeholder { color: var(--dim); }\r\n .modal-submit {\r\n width: 100%;\r\n background: linear-gradient(110deg, #1d4ed8, #6366f1, #0ea5e9, #1d4ed8);\r\n background-size: 300% 100%;\r\n color: #fff;\r\n font-family: inherit; font-weight: 700; font-size: 14px;\r\n padding: 13px; border: none; border-radius: 11px; cursor: pointer; margin-top: 4px;\r\n display: flex; align-items: center; justify-content: center; gap: 8px;\r\n box-shadow: 0 5px 16px rgba(29,78,216,0.35);\r\n transition: transform 0.15s, box-shadow 0.15s;\r\n animation: shimmerBtn 2.8s ease infinite;\r\n }\r\n .modal-submit:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(99,102,241,0.50); }\r\n .modal-submit svg { width: 15px; height: 15px; flex-shrink: 0; }\r\n .modal-note { font-size: 11px; color: var(--dim); text-align: center; margin-top: 12px; }\r\n .modal-success { text-align: center; padding: 14px 0 6px; }\r\n .modal-success .check {\r\n width: 54px; height: 54px; border-radius: 50%; background: rgba(29,78,216,0.10);\r\n display: flex; align-items: center; justify-content: center; margin: 0 auto 14px;\r\n }\r\n .modal-success .check svg { width: 28px; height: 28px; stroke: var(--accent); fill: none; stroke-width: 2.5; }\r\n\r\n \/* \u2500\u2500 RESPONSIVE \u2500\u2500 *\/\r\n @media (max-width: 960px) {\r\n nav { padding: 0 20px; }\r\n .hero { grid-template-columns: 1fr; padding: 32px 20px 20px; gap: 50px; }\r\n .scene { min-height: 440px; margin-top: 20px; justify-content: center; }\r\n .roles { grid-template-columns: 1fr; padding: 20px 20px 30px; }\r\n .cta-band { margin: 0 20px 30px; padding: 28px 24px; }\r\n .cta-band-text h2 { font-size: 22px; }\r\n footer { padding: 20px; }\r\n }\r\n @media (max-width: 560px) {\r\n .nav-link { display: none; }\r\n .desktop { max-width: 100%; }\r\n .phone-left { right: 150px; width: 168px; bottom: 30px; }\r\n .phone-right { right: -22px; width: 168px; top: 16px; }\r\n .label-teacher { right: 162px; }\r\n \/* titres sur une ligne -> t\u00e9l\u00e9phones moins hauts *\/\r\n .ph-card { padding: 8px 9px; gap: 7px; }\r\n .ph-card-ic { width: 26px; height: 26px; }\r\n .ph-card-ic svg { width: 13px; height: 13px; }\r\n .ph-card-title { font-size: 9.5px; white-space: nowrap; }\r\n .ph-card-sub { font-size: 7.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\r\n .ph-body { padding: 9px 9px 11px; gap: 6px; }\r\n .ph-header { padding: 14px 11px 10px; }\r\n .ph-hello { font-size: 13px; white-space: nowrap; }\r\n .ph-cta { font-size: 9px; padding: 8px; }\r\n h1 { font-size: 32px; }\r\n }\r\n @media (prefers-reduced-motion: reduce) {\r\n .bg-orb { animation: none; }\r\n }\r\n\r\n \/* \u2500\u2500\u2500\u2500\u2500 HEADER \u2014 ajustement mobile du titre \u2500\u2500\u2500\u2500\u2500 *\/\r\n @media (max-width: 600px) {\r\n nav {\r\n height: auto;\r\n min-height: 60px;\r\n padding: 9px 16px;\r\n gap: 12px;\r\n }\r\n .logo { font-size: 19px; gap: 9px; }\r\n .logo-mark { width: 30px; height: 30px; }\r\n .logo-mark svg { width: 16px; height: 16px; }\r\n .logo > div > span { font-size: 12.5px; }\r\n .brand-sub { font-size: 7.5px; margin-top: 2px; }\r\n .nav-cta { padding: 8px 13px; font-size: 11.5px; }\r\n\r\n \/* \u2500\u2500 Sc\u00e8ne mobile : les t\u00e9l\u00e9phones restent dans la sc\u00e8ne, comme sur desktop \u2500\u2500 *\/\r\n .scene {\r\n min-height: 420px;\r\n position: relative;\r\n display: flex;\r\n align-items: center;\r\n justify-content: flex-start;\r\n margin-top: 4px;\r\n }\r\n .scene::before { display: none; }\r\n .scene-label { display: none; }\r\n\r\n \/* Desktop : r\u00e9duit pour laisser la place aux t\u00e9l\u00e9phones \u00e0 droite *\/\r\n .desktop {\r\n max-width: calc(100% - 100px);\r\n position: relative;\r\n z-index: 2;\r\n }\r\n .d-body { grid-template-columns: 70px 1fr; }\r\n .d-side-item { font-size: 8.5px; padding: 6px 8px; }\r\n .d-split { grid-template-columns: 1fr; gap: 8px; }\r\n .d-stats { gap: 6px; }\r\n .d-stat { padding: 7px 8px; }\r\n .d-stat-num { font-size: 14px; }\r\n .d-stat-lbl { font-size: 7.5px; }\r\n .d-main { padding: 10px 11px; }\r\n .d-ai { padding: 7px 8px; }\r\n .d-ai-txt { font-size: 8.5px; }\r\n\r\n \/* Conteneur t\u00e9l\u00e9phones : redevient neutre (display:contents) \u2192 les phones gardent leur position:absolute *\/\r\n .phones { display: contents; }\r\n\r\n \/* T\u00e9l\u00e9phones : positionnement absolu dans la sc\u00e8ne, identique au desktop mais adapt\u00e9 *\/\r\n .phone-left {\r\n position: absolute;\r\n width: 132px;\r\n right: 136px;\r\n bottom: -10px;\r\n transform: rotate(-3deg);\r\n z-index: 3;\r\n border-radius: 24px;\r\n padding: 6px;\r\n box-shadow: 0 12px 30px rgba(20,35,63,0.28);\r\n }\r\n .phone-right {\r\n position: absolute;\r\n width: 132px;\r\n right: -10px;\r\n top: 10px;\r\n transform: rotate(3deg);\r\n z-index: 4;\r\n border-radius: 24px;\r\n padding: 6px;\r\n box-shadow: 0 12px 30px rgba(20,35,63,0.28);\r\n }\r\n .phone-screen {\r\n aspect-ratio: 9 \/ 19.5;\r\n border-radius: 18px;\r\n position: relative;\r\n }\r\n .phone-notch {\r\n width: 36%; max-width: 44px; height: 4px; top: 5px;\r\n }\r\n .phone-screen::after {\r\n content: ''; position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%);\r\n width: 34%; max-width: 40px; height: 3px; border-radius: 100px;\r\n background: rgba(16,22,38,0.20);\r\n }\r\n \/* Contenu des t\u00e9l\u00e9phones : r\u00e9duit proportionnellement *\/\r\n .ph-header { padding: 12px 9px 8px; }\r\n .ph-role { font-size: 6.5px; }\r\n .ph-hello { font-size: 10px; }\r\n .ph-body { padding: 7px 7px 9px; gap: 5px; }\r\n .ph-card { padding: 6px 7px; gap: 6px; border-radius: 8px; }\r\n .ph-card-ic { width: 20px; height: 20px; border-radius: 6px; }\r\n .ph-card-ic svg { width: 10px; height: 10px; }\r\n .ph-card-title { font-size: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\r\n .ph-card-sub { font-size: 6.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\r\n .ph-card-arr svg { width: 9px; height: 9px; }\r\n .ph-cta { font-size: 7.5px; padding: 6px 5px; border-radius: 7px; }\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\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\r\n<div class=\"page\">\r\n\r\n <nav>\r\n <div class=\"logo\">\r\n <span class=\"logo-mark\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M3 8l9-4 9 4-9 4-9-4z\" stroke=\"#fff\" stroke-width=\"2\" stroke-linejoin=\"round\"\/><path d=\"M7 10.5V15c0 1.1 2.2 2 5 2s5-.9 5-2v-4.5\" stroke=\"#fff\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><path d=\"M21 8.5v4\" stroke=\"#fff\" stroke-width=\"2\" stroke-linecap=\"round\"\/><\/svg>\r\n <\/span>\r\n <div>\r\n Machi <span style=\"font-weight:400;color:var(--muted);\">\u2014 L'\u00c9cole Connect\u00e9e<\/span>\r\n <div class=\"brand-sub\">Admin \u00b7 Profs \u00b7 Parents<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"nav-right\">\r\n <a class=\"nav-link\" href=\"#roles\">La plateforme<\/a>\r\n <button class=\"nav-cta\" onclick=\"openModal()\">Demander une d\u00e9mo<\/button>\r\n <\/div>\r\n <\/nav>\r\n\r\n <section class=\"hero\">\r\n <div class=\"hero-left\">\r\n <span class=\"eyebrow\"><span class=\"dot\"><\/span> Transparence \u00b7 Confiance \u00b7 Intelligence artificielle<\/span>\r\n <h1>La transparence qui <span class=\"accent\">fid\u00e9lise les familles<\/span>, l'IA qui fait progresser l'\u00e9cole.<\/h1>\r\n <p class=\"lede\">Trois espaces \u2014 <strong>administration<\/strong>, <strong>professeurs<\/strong>, <strong>parents<\/strong> \u2014 o\u00f9 tout est visible. La confiance s'installe. L'<strong>IA<\/strong> fait le reste.<\/p>\r\n <div class=\"hero-ctas\">\r\n <button class=\"btn-primary\" onclick=\"openModal()\">\r\n Demander une d\u00e9mo\r\n <svg viewBox=\"0 0 14 14\" fill=\"none\"><path d=\"M3 7h8M11 7L7.5 3.5M11 7l-3.5 3.5\" stroke=\"#fff\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\r\n <\/button>\r\n <button class=\"btn-ghost\" onclick=\"document.getElementById('roles').scrollIntoView({behavior:'smooth'})\">Voir les espaces<\/button>\r\n <\/div>\r\n <div class=\"trust-pills\">\r\n <span class=\"trust-pill\"><svg viewBox=\"0 0 24 24\"><path d=\"M5 13l4 4L19 7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg> Transparence en temps r\u00e9el<\/span>\r\n <span class=\"trust-pill\"><svg viewBox=\"0 0 24 24\"><path d=\"M5 13l4 4L19 7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg> La confiance qui fid\u00e9lise<\/span>\r\n <span class=\"trust-pill\"><svg viewBox=\"0 0 24 24\"><path d=\"M5 13l4 4L19 7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg> Am\u00e9lioration continue par l'IA<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- SC\u00c8NE : \u00e9cran admin + 2 t\u00e9l\u00e9phones -->\r\n <div class=\"scene\">\r\n <span class=\"scene-label label-teacher\">Espace Professeur<\/span>\r\n <span class=\"scene-label label-parent\">Espace Parent<\/span>\r\n\r\n <!-- Desktop admin -->\r\n <div class=\"desktop\">\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\"><span class=\"url-lock\">\ud83d\udd12<\/span> ecole-amal.machi.ma \/ administration<\/div>\r\n <\/div>\r\n <div class=\"d-banner\">\r\n <div class=\"d-banner-title\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"14\" rx=\"2\" stroke=\"#fff\" stroke-width=\"1.8\"\/><path d=\"M3 9h18\" stroke=\"#fff\" stroke-width=\"1.8\"\/><\/svg>\r\n Espace Administration Scolaire\r\n <\/div>\r\n <span class=\"d-banner-tag\">Tableau de bord<\/span>\r\n <\/div>\r\n <div class=\"d-body\">\r\n <div class=\"d-side\">\r\n <div class=\"d-side-item active\"><svg viewBox=\"0 0 24 24\"><rect x=\"3\" y=\"3\" width=\"7\" height=\"7\" rx=\"1\"\/><rect x=\"14\" y=\"3\" width=\"7\" height=\"7\" rx=\"1\"\/><rect x=\"3\" y=\"14\" width=\"7\" height=\"7\" rx=\"1\"\/><\/svg> Accueil<\/div>\r\n <div class=\"d-side-item\"><svg viewBox=\"0 0 24 24\"><path d=\"M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2\"\/><circle cx=\"9\" cy=\"7\" r=\"4\"\/><\/svg> \u00c9l\u00e8ves<\/div>\r\n <div class=\"d-side-item\"><svg viewBox=\"0 0 24 24\"><path d=\"M22 10v6M2 10l10-5 10 5-10 5z\"\/><\/svg> Classes<\/div>\r\n <div class=\"d-side-item\"><svg viewBox=\"0 0 24 24\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\"\/><path d=\"M16 2v4M8 2v4M3 10h18\"\/><\/svg> Agenda<\/div>\r\n <div class=\"d-side-item\"><svg viewBox=\"0 0 24 24\"><path d=\"M12 3l1.5 4.2L18 9l-4.5 1.8L12 15l-1.5-4.2L6 9z\"\/><path d=\"M18 14l.8 2L21 16.6l-2.2.9L18 19l-.6-1.5L15 16.6 17.4 16z\"\/><\/svg> Mon IA<\/div>\r\n <div class=\"d-side-item\"><svg viewBox=\"0 0 24 24\"><path d=\"M4 4h16v12H5.2L4 17.2z\"\/><\/svg> Messages<\/div>\r\n <\/div>\r\n <div class=\"d-main\">\r\n <div class=\"d-stats\">\r\n <div class=\"d-stat\"><div class=\"d-stat-num blue\">642<\/div><div class=\"d-stat-lbl\">\u00c9l\u00e8ves actifs<\/div><\/div>\r\n <div class=\"d-stat\"><div class=\"d-stat-num teal\">38<\/div><div class=\"d-stat-lbl\">Professeurs<\/div><\/div>\r\n <div class=\"d-stat\"><div class=\"d-stat-num amber\">94%<\/div><div class=\"d-stat-lbl\">Parents connect\u00e9s<\/div><\/div>\r\n <\/div>\r\n <div class=\"d-rows-title\">Mon IA<\/div>\r\n <div class=\"d-ai\">\r\n <span class=\"d-ai-ic\"><svg viewBox=\"0 0 24 24\"><path d=\"M12 3v3M12 18v3M3 12h3M18 12h3M6 6l2 2M16 16l2 2M18 6l-2 2M8 16l-2 2\"\/><circle cx=\"12\" cy=\"12\" r=\"3.2\"\/><\/svg><\/span>\r\n <div class=\"d-ai-body\">\r\n <div class=\"d-ai-tag\">Analyse IA<\/div>\r\n <div class=\"d-ai-txt\">Satisfaction parents en hausse <b>(+12%)<\/b>. Suggestion : g\u00e9n\u00e9raliser le rapport hebdomadaire aux autres classes.<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"d-split\">\r\n <div class=\"d-split-col\">\r\n <div class=\"d-chart\">\r\n <div class=\"d-chart-head\">\r\n <span class=\"d-chart-title\">Satisfaction des familles<\/span>\r\n <span class=\"d-chart-delta\">\u25b2 +12% \u00b7 6 mois<\/span>\r\n <\/div>\r\n <svg viewBox=\"0 0 280 70\">\r\n <defs>\r\n <linearGradient id=\"aiArea\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\r\n <stop offset=\"0%\" stop-color=\"rgba(29,78,216,0.22)\"\/>\r\n <stop offset=\"100%\" stop-color=\"rgba(29,78,216,0)\"\/>\r\n <\/linearGradient>\r\n <\/defs>\r\n <line x1=\"8\" y1=\"62\" x2=\"272\" y2=\"62\" stroke=\"rgba(0,0,0,0.08)\" stroke-width=\"1\"\/>\r\n <path d=\"M8,52 L61,46 L114,41 L166,33 L219,23 L272,14 L272,62 L8,62 Z\" fill=\"url(#aiArea)\"\/>\r\n <path d=\"M8,52 L61,46 L114,41 L166,33 L219,23 L272,14\" fill=\"none\" stroke=\"#1d4ed8\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\r\n <circle cx=\"8\" cy=\"52\" r=\"2.4\" fill=\"#1d4ed8\"\/>\r\n <circle cx=\"61\" cy=\"46\" r=\"2.4\" fill=\"#1d4ed8\"\/>\r\n <circle cx=\"114\" cy=\"41\" r=\"2.4\" fill=\"#1d4ed8\"\/>\r\n <circle cx=\"166\" cy=\"33\" r=\"2.4\" fill=\"#1d4ed8\"\/>\r\n <circle cx=\"219\" cy=\"23\" r=\"2.4\" fill=\"#1d4ed8\"\/>\r\n <circle cx=\"272\" cy=\"14\" r=\"3\" fill=\"#0e7490\"\/>\r\n <\/svg>\r\n <div class=\"d-chart-x\"><span>Jan<\/span><span>F\u00e9v<\/span><span>Mar<\/span><span>Avr<\/span><span>Mai<\/span><span>Juin<\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"d-split-col\">\r\n <div class=\"d-rows-title\">Communications du jour<\/div>\r\n <div class=\"d-row\">\r\n <div class=\"d-row-av\" style=\"background:var(--teacher)\">SM<\/div>\r\n <div class=\"d-row-body\"><div class=\"d-row-name\">Mme Sara M. \u2014 5\u00e8me B<\/div><div class=\"d-row-sub\">Rapport hebdomadaire envoy\u00e9<\/div><\/div>\r\n <span class=\"d-row-tag tag-sent\">Envoy\u00e9<\/span>\r\n <\/div>\r\n <div class=\"d-row\">\r\n <div class=\"d-row-av\" style=\"background:var(--accent)\">DA<\/div>\r\n <div class=\"d-row-body\"><div class=\"d-row-name\">Direction \u2014 Tous niveaux<\/div><div class=\"d-row-sub\">Note de sortie scolaire<\/div><\/div>\r\n <span class=\"d-row-tag tag-read\">Lu 88%<\/span>\r\n <\/div>\r\n <div class=\"d-row\">\r\n <div class=\"d-row-av\" style=\"background:var(--parent)\">YB<\/div>\r\n <div class=\"d-row-body\"><div class=\"d-row-name\">M. Youssef B. \u2014 3\u00e8me A<\/div><div class=\"d-row-sub\">Bulletin trimestriel<\/div><\/div>\r\n <span class=\"d-row-tag tag-wait\">En attente<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Conteneur t\u00e9l\u00e9phones (neutre sur desktop, rang\u00e9e sur mobile) -->\r\n <div class=\"phones\">\r\n <!-- T\u00e9l\u00e9phone gauche : Professeur -->\r\n <div class=\"phone phone-left\">\r\n <div class=\"phone-screen\">\r\n <div class=\"phone-notch\"><\/div>\r\n <div class=\"ph-header teacher\">\r\n <div class=\"ph-role\">Espace Professeur<\/div>\r\n <div class=\"ph-hello\">Bonjour, <span>Mme Sara<\/span><\/div>\r\n <\/div>\r\n <div class=\"ph-body\">\r\n <div class=\"ph-card\">\r\n <span class=\"ph-card-ic ic-teal\"><svg viewBox=\"0 0 24 24\"><path d=\"M4 4h16v12H5.2L4 17.2z\"\/><\/svg><\/span>\r\n <div class=\"ph-card-body\"><div class=\"ph-card-title\">Envoyer un rapport<\/div><div class=\"ph-card-sub\">aux parents \u00b7 5\u00e8me B<\/div><\/div>\r\n <span class=\"ph-card-arr\"><svg viewBox=\"0 0 14 14\"><path d=\"M4 2l5 5-5 5\" stroke=\"currentColor\" stroke-width=\"1.6\" fill=\"none\" stroke-linecap=\"round\"\/><\/svg><\/span>\r\n <\/div>\r\n <div class=\"ph-card\">\r\n <span class=\"ph-card-ic ic-teal\"><svg viewBox=\"0 0 24 24\"><path d=\"M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z\"\/><\/svg><\/span>\r\n <div class=\"ph-card-body\"><div class=\"ph-card-title\">Saisir les notes<\/div><div class=\"ph-card-sub\">contr\u00f4le de maths<\/div><\/div>\r\n <span class=\"ph-card-arr\"><svg viewBox=\"0 0 14 14\"><path d=\"M4 2l5 5-5 5\" stroke=\"currentColor\" stroke-width=\"1.6\" fill=\"none\" stroke-linecap=\"round\"\/><\/svg><\/span>\r\n <\/div>\r\n <div class=\"ph-cta teacher\">Nouveau message classe<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- T\u00e9l\u00e9phone droite : Parent -->\r\n <div class=\"phone phone-right\">\r\n <div class=\"phone-screen\">\r\n <div class=\"phone-notch\"><\/div>\r\n <div class=\"ph-header parent\">\r\n <div class=\"ph-role\">Espace Parent<\/div>\r\n <div class=\"ph-hello\">Bonjour, <span>Ahmed<\/span><\/div>\r\n <\/div>\r\n <div class=\"ph-body\">\r\n <div class=\"ph-card\">\r\n <span class=\"ph-card-ic ic-amber\"><svg viewBox=\"0 0 24 24\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\"\/><path d=\"M16 2v4M8 2v4M3 10h18\"\/><\/svg><\/span>\r\n <div class=\"ph-card-body\"><div class=\"ph-card-title\">Suivre l'agenda<\/div><div class=\"ph-card-sub\">calendrier de mon fils<\/div><\/div>\r\n <span class=\"ph-card-arr\"><svg viewBox=\"0 0 14 14\"><path d=\"M4 2l5 5-5 5\" stroke=\"currentColor\" stroke-width=\"1.6\" fill=\"none\" stroke-linecap=\"round\"\/><\/svg><\/span>\r\n <\/div>\r\n <div class=\"ph-card\">\r\n <span class=\"ph-card-ic ic-amber\"><svg viewBox=\"0 0 24 24\"><path d=\"M22 10v6M2 10l10-5 10 5-10 5z\"\/><path d=\"M6 12v5c0 1 4 3 6 3s6-2 6-3v-5\"\/><\/svg><\/span>\r\n <div class=\"ph-card-body\"><div class=\"ph-card-title\">Consulter les notes<\/div><div class=\"ph-card-sub\">bulletin trimestriel<\/div><\/div>\r\n <span class=\"ph-card-arr\"><svg viewBox=\"0 0 14 14\"><path d=\"M4 2l5 5-5 5\" stroke=\"currentColor\" stroke-width=\"1.6\" fill=\"none\" stroke-linecap=\"round\"\/><\/svg><\/span>\r\n <\/div>\r\n <div class=\"ph-cta parent\">Contacter le professeur<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- ROLES -->\r\n <section class=\"roles\" id=\"roles\">\r\n <div class=\"role-card\">\r\n <div class=\"role-ic admin\"><svg viewBox=\"0 0 24 24\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"14\" rx=\"2\"\/><path d=\"M8 21h8M12 18v3\"\/><\/svg><\/div>\r\n <div class=\"role-tag admin\">Espace Administration \u00b7 Web<\/div>\r\n <div class=\"role-title\">Le pilotage \u00e9clair\u00e9 par l'IA<\/div>\r\n <p class=\"role-desc\">L'administration garde une vue transparente sur l'\u00e9tablissement et re\u00e7oit des analyses IA qui transforment les retours des familles en am\u00e9liorations concr\u00e8tes des services.<\/p>\r\n <ul class=\"role-list\">\r\n <li>Tableau de bord transparent et tra\u00e7able<\/li>\r\n <li>Analyse IA des retours parents<\/li>\r\n <li>Pistes d'am\u00e9lioration des services scolaires<\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"role-card\">\r\n <div class=\"role-ic teacher\"><svg viewBox=\"0 0 24 24\"><path d=\"M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z\"\/><\/svg><\/div>\r\n <div class=\"role-tag teacher\">App Professeur \u00b7 Mobile web<\/div>\r\n <div class=\"role-title\">Communiquer en confiance<\/div>\r\n <p class=\"role-desc\">Chaque rapport, note et message est partag\u00e9 clairement avec les bons parents et horodat\u00e9 \u2014 une communication transparente qui renforce le lien avec les familles.<\/p>\r\n <ul class=\"role-list\">\r\n <li>Rapports et bulletins tra\u00e7ables<\/li>\r\n <li>\u00c9changes directs et horodat\u00e9s<\/li>\r\n <li>Moins de friction, plus de confiance<\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"role-card\">\r\n <div class=\"role-ic parent\"><svg viewBox=\"0 0 24 24\"><path d=\"M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2\"\/><circle cx=\"9\" cy=\"7\" r=\"4\"\/><path d=\"M19 8v6M16 11h6\"\/><\/svg><\/div>\r\n <div class=\"role-tag parent\">App Parent \u00b7 Mobile web<\/div>\r\n <div class=\"role-title\">Tout voir, en confiance<\/div>\r\n <p class=\"role-desc\">Les parents suivent la scolarit\u00e9 en temps r\u00e9el et dans leur langue. Cette transparence cr\u00e9e l'attachement qui fid\u00e9lise durablement les familles \u00e0 l'\u00e9cole.<\/p>\r\n <ul class=\"role-list\">\r\n <li>Suivi complet et en temps r\u00e9el<\/li>\r\n <li>Historique transparent des \u00e9changes<\/li>\r\n <li>Une relation de confiance durable<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- CHIFFRES CL\u00c9S -->\r\n <section class=\"stats-section\">\r\n <div class=\"stats-inner\">\r\n <div class=\"stats-grid\">\r\n <div class=\"stat-item\" data-target=\"120\" data-prefix=\"+\">\r\n <div class=\"stat-value\"><span class=\"prefix\">+<\/span><span class=\"stat-num\">0<\/span><\/div>\r\n <div class=\"stat-label\">\u00e9coles partenaires<\/div>\r\n <\/div>\r\n <div class=\"stat-item\" data-target=\"94\" data-suffix=\"%\">\r\n <div class=\"stat-value\"><span class=\"stat-num\">0<\/span><span class=\"suffix\">%<\/span><\/div>\r\n <div class=\"stat-label\">des parents connect\u00e9s d\u00e8s le 1er semestre<\/div>\r\n <\/div>\r\n <div class=\"stat-item\" data-target=\"3\" data-suffix=\"\u00d7\">\r\n <div class=\"stat-value\"><span class=\"stat-num\">0<\/span><span class=\"suffix\">\u00d7<\/span><\/div>\r\n <div class=\"stat-label\">plus de messages lus vs le papier<\/div>\r\n <\/div>\r\n <div class=\"stat-item\" data-target=\"4\" data-suffix=\"min\">\r\n <div class=\"stat-value\"><span class=\"stat-num\">0<\/span><span class=\"suffix\">min<\/span><\/div>\r\n <div class=\"stat-label\">pour d\u00e9ployer sur une nouvelle classe<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- T\u00c9MOIGNAGES -->\r\n <section class=\"testimonial-section\">\r\n <div class=\"testimonial-wrap\">\r\n <div class=\"testimonial-card\">\r\n <div class=\"testimonial-avatar\">\r\n <img decoding=\"async\" src=\"https:\/\/machi.ma\/wp-content\/uploads\/2026\/06\/directrice.png\" alt=\"Nadia B.\" \/>\r\n <\/div>\r\n <div class=\"testimonial-body\">\r\n <p class=\"testimonial-quote\">J'ai essay\u00e9 trois outils avant Machi. C'est le seul o\u00f9 <strong>parents, profs et direction parlent vraiment le m\u00eame langage.<\/strong><\/p>\r\n <div class=\"testimonial-stars\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"\/><\/svg>\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"\/><\/svg>\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"\/><\/svg>\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"\/><\/svg>\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"\/><\/svg>\r\n <\/div>\r\n <div class=\"testimonial-meta\">\r\n <span class=\"testimonial-name\">Nadia B.<\/span>\r\n <span class=\"testimonial-sep\"><\/span>\r\n <span class=\"testimonial-role\">Directrice \u00b7 Groupe scolaire priv\u00e9, Casablanca<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"testimonial-card\">\r\n <div class=\"testimonial-avatar\">\r\n <img decoding=\"async\" src=\"https:\/\/machi.ma\/wp-content\/uploads\/2026\/06\/directeur.png\" alt=\"Karim C.\" \/>\r\n <\/div>\r\n <div class=\"testimonial-body\">\r\n <p class=\"testimonial-quote\">Avant, les parents appelaient pour tout. Aujourd'hui, <strong>ils font confiance.<\/strong> Cette s\u00e9r\u00e9nit\u00e9-l\u00e0, c'est Machi qui nous l'a donn\u00e9e.<\/p>\r\n <div class=\"testimonial-stars\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"\/><\/svg>\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"\/><\/svg>\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"\/><\/svg>\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"\/><\/svg>\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"\/><\/svg>\r\n <\/div>\r\n <div class=\"testimonial-meta\">\r\n <span class=\"testimonial-name\">Nabil C.<\/span>\r\n <span class=\"testimonial-sep\"><\/span>\r\n <span class=\"testimonial-role\">Directeur \u00b7 Groupe scolaire priv\u00e9, Rabat<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- CTA BAND -->\r\n <section class=\"cta-band\">\r\n <div class=\"cta-band-text\">\r\n <h2>Fid\u00e9lisez les familles par la transparence.<\/h2>\r\n <p>R\u00e9servez une d\u00e9mo de 20 minutes : on vous montre comment la plateforme et l'IA renforcent la confiance des parents et am\u00e9liorent vos services scolaires.<\/p>\r\n <\/div>\r\n <button class=\"btn-primary\" onclick=\"openModal()\">\r\n Demander une d\u00e9mo\r\n <svg viewBox=\"0 0 14 14\" fill=\"none\"><path d=\"M3 7h8M11 7L7.5 3.5M11 7l-3.5 3.5\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\r\n <\/button>\r\n <\/section>\r\n\r\n <footer>\r\n <p>\u00a9 2026 Machi \u2014 L'\u00c9cole Connect\u00e9e \u00b7 Tous droits r\u00e9serv\u00e9s<\/p>\r\n <div><a href=\"https:\/\/execinnov.com\" target=\"_blank\" rel=\"noopener noreferrer\">Propuls\u00e9 par ExecINNOV<\/a><\/div>\r\n <\/footer>\r\n\r\n<\/div>\r\n\r\n<!-- MODAL D\u00c9MO -->\r\n<div class=\"modal-overlay\" id=\"demoModal\">\r\n <div class=\"modal\" style=\"width:100%;max-width:440px;margin:0 auto;box-sizing:border-box;\">\r\n <button class=\"modal-close\" onclick=\"closeModal()\">×<\/button>\r\n <div id=\"formView\">\r\n <div class=\"modal-eyebrow\">Demande de d\u00e9mo<\/div>\r\n <h3>D\u00e9couvrez la plateforme<\/h3>\r\n <p class=\"modal-sub\">Laissez-nous vos coordonn\u00e9es, notre \u00e9quipe vous recontacte pour planifier une pr\u00e9sentation.<\/p>\r\n\r\n <div class=\"field\">\r\n <label for=\"f-ecole\">Nom de l'\u00e9cole<\/label>\r\n <input id=\"f-ecole\" type=\"text\" placeholder=\"Ex. Groupe Scolaire Al Manar\" \/>\r\n <\/div>\r\n <div class=\"field\">\r\n <label for=\"f-nom\">Votre nom<\/label>\r\n <input id=\"f-nom\" type=\"text\" placeholder=\"Pr\u00e9nom et nom\" \/>\r\n <\/div>\r\n <div class=\"field\">\r\n <label for=\"f-ville\">Ville<\/label>\r\n <input id=\"f-ville\" type=\"text\" placeholder=\"Ex. Casablanca\" \/>\r\n <\/div>\r\n <div class=\"field\">\r\n <label for=\"f-tel\">T\u00e9l\u00e9phone<\/label>\r\n <input id=\"f-tel\" type=\"tel\" placeholder=\"+212 6 00 00 00 00\" \/>\r\n <\/div>\r\n <div class=\"field\">\r\n <label for=\"f-email\">Email<\/label>\r\n <input id=\"f-email\" type=\"email\" placeholder=\"vous@ecole.ma\" \/>\r\n <\/div>\r\n\r\n <button class=\"modal-submit\" onclick=\"submitDemo()\">\r\n Envoyer ma demande\r\n <svg width=\"15\" height=\"15\" viewBox=\"0 0 14 14\" fill=\"none\"><path d=\"M3 7h8M11 7L7.5 3.5M11 7l-3.5 3.5\" stroke=\"#fff\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\r\n <\/button>\r\n <p class=\"modal-note\" id=\"formNote\">R\u00e9ponse sous 48h. Aucune donn\u00e9e transmise \u00e0 des tiers.<\/p>\r\n <\/div>\r\n\r\n <div id=\"successView\" style=\"display:none\">\r\n <div class=\"modal-success\">\r\n <div class=\"check\"><svg viewBox=\"0 0 24 24\"><path d=\"M5 13l4 4L19 7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><\/div>\r\n <h3>Demande envoy\u00e9e<\/h3>\r\n <p class=\"modal-sub\" style=\"margin-bottom:8px\">Merci. Notre \u00e9quipe vous recontacte tr\u00e8s vite pour planifier votre d\u00e9mo.<\/p>\r\n <button class=\"modal-submit\" onclick=\"closeModal()\">Fermer<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<script>\r\n \/\/ \u2500\u2500 REMPLACER par votre endpoint (Google Apps Script, Formspree, etc.) \u2500\u2500\r\n const DEMO_ENDPOINT = \"https:\/\/script.google.com\/macros\/s\/AKfycby8Rkr-zx34k9UGq0iKllGm3JYqzLPQrmgjfiaOG5-93jrFe3KW0VU3oe7fEcpVudUI\/exec\";\r\n\r\n function openModal() {\r\n document.getElementById('demoModal').classList.add('open');\r\n var m = document.querySelector('#demoModal .modal');\r\n if (m) {\r\n m.style.setProperty('width', '100%', 'important');\r\n m.style.setProperty('max-width', '440px', 'important');\r\n m.style.setProperty('margin', '0 auto', 'important');\r\n m.style.setProperty('box-sizing', 'border-box', 'important');\r\n }\r\n }\r\n function closeModal() {\r\n document.getElementById('demoModal').classList.remove('open');\r\n document.getElementById('formView').style.display = 'block';\r\n document.getElementById('successView').style.display = 'none';\r\n }\r\n document.getElementById('demoModal').addEventListener('click', function(e){\r\n if (e.target === this) closeModal();\r\n });\r\n document.addEventListener('keydown', function(e){ if (e.key === 'Escape') closeModal(); });\r\n\r\n async function submitDemo() {\r\n const ecole = document.getElementById('f-ecole').value.trim();\r\n const nom = document.getElementById('f-nom').value.trim();\r\n const ville = document.getElementById('f-ville').value.trim();\r\n const tel = document.getElementById('f-tel').value.trim();\r\n const email = document.getElementById('f-email').value.trim();\r\n const note = document.getElementById('formNote');\r\n\r\n if (!ecole || !nom || !ville || !tel || !email) {\r\n note.textContent = \"\u26a0\ufe0f Merci de remplir tous les champs.\";\r\n note.style.color = \"#c1121f\"; return;\r\n }\r\n if (!\/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/.test(email)) {\r\n note.textContent = \"\u26a0\ufe0f Adresse email invalide.\";\r\n note.style.color = \"#c1121f\"; return;\r\n }\r\n\r\n note.textContent = \"Envoi en cours...\";\r\n note.style.color = \"#5f6675\";\r\n\r\n const payload = { ecole, nom, ville, tel, email, source: \"landing-ecoles\" };\r\n\r\n try {\r\n if (DEMO_ENDPOINT) {\r\n await fetch(DEMO_ENDPOINT, {\r\n method: \"POST\", mode: \"no-cors\",\r\n headers: { \"Content-Type\": \"application\/json\" },\r\n body: JSON.stringify(payload)\r\n });\r\n }\r\n document.getElementById('formView').style.display = 'none';\r\n document.getElementById('successView').style.display = 'block';\r\n } catch {\r\n note.textContent = \"\u274c Une erreur est survenue. R\u00e9essayez.\";\r\n note.style.color = \"#c1121f\";\r\n }\r\n }\r\n\r\n \/\/ \u2500\u2500 ANIMATION CHIFFRES CL\u00c9S \u2500\u2500\r\n (function() {\r\n const items = document.querySelectorAll('.stat-item');\r\n if (!items.length) return;\r\n\r\n function easeOutQuart(t) { return 1 - Math.pow(1 - t, 4); }\r\n\r\n function animateCount(el) {\r\n const target = parseFloat(el.dataset.target);\r\n const numEl = el.querySelector('.stat-num');\r\n if (!numEl) return;\r\n const duration = 1600;\r\n const start = performance.now();\r\n function step(now) {\r\n const elapsed = now - start;\r\n const progress = Math.min(elapsed \/ duration, 1);\r\n const eased = easeOutQuart(progress);\r\n const current = Math.round(eased * target);\r\n numEl.textContent = current;\r\n if (progress < 1) requestAnimationFrame(step);\r\n else numEl.textContent = target;\r\n }\r\n requestAnimationFrame(step);\r\n }\r\n\r\n const observer = new IntersectionObserver(function(entries) {\r\n entries.forEach(function(entry, i) {\r\n if (entry.isIntersecting) {\r\n const el = entry.target;\r\n setTimeout(function() {\r\n el.classList.add('visible');\r\n animateCount(el);\r\n }, i * 120);\r\n observer.unobserve(el);\r\n }\r\n });\r\n }, { threshold: 0.25 });\r\n\r\n items.forEach(function(item) { observer.observe(item); });\r\n })();\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 = [];\r\n const COLORS = ['rgba(29,78,216,', 'rgba(14,116,144,', 'rgba(180,83,9,'];\r\n function resize(){ W = canvas.width = innerWidth; H = canvas.height = innerHeight; }\r\n function rand(a,b){ return a + Math.random()*(b-a); }\r\n function create(){\r\n const c = COLORS[Math.floor(Math.random()*COLORS.length)];\r\n return { x:rand(0,W), y:rand(0,H), r:rand(1,3), vx:rand(-0.13,0.13), vy:rand(-0.2,-0.05),\r\n alpha:rand(0.06,0.28), da:rand(-0.002,0.002), color:c, life:rand(0,Math.PI*2), speed:rand(0.005,0.012) };\r\n }\r\n function init(){ resize(); particles = []; const n = Math.min(60, Math.floor(W*H\/18000)); for(let i=0;i<n;i++) particles.push(create()); }\r\n function draw(){\r\n ctx.clearRect(0,0,W,H);\r\n particles.forEach(p=>{\r\n p.life+=p.speed; p.x+=p.vx+Math.sin(p.life)*0.1; p.y+=p.vy; p.alpha+=p.da;\r\n if(p.alpha<0.04)p.da=Math.abs(p.da); if(p.alpha>0.32)p.da=-Math.abs(p.da);\r\n if(p.y<-10){p.y=H+10;p.x=rand(0,W);}\r\n ctx.beginPath(); ctx.arc(p.x,p.y,p.r,0,Math.PI*2); ctx.fillStyle=p.color+p.alpha+')'; ctx.fill();\r\n });\r\n for(let i=0;i<particles.length;i++) for(let j=i+1;j<particles.length;j++){\r\n const dx=particles[i].x-particles[j].x, dy=particles[i].y-particles[j].y, d=Math.sqrt(dx*dx+dy*dy);\r\n if(d<90){ ctx.beginPath(); ctx.moveTo(particles[i].x,particles[i].y); ctx.lineTo(particles[j].x,particles[j].y);\r\n ctx.strokeStyle='rgba(29,78,216,'+(0.045*(1-d\/90))+')'; ctx.lineWidth=0.5; ctx.stroke(); }\r\n }\r\n requestAnimationFrame(draw);\r\n }\r\n addEventListener('resize', resize); init(); draw();\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}]}}