{"id":23814299,"date":"2026-09-26T17:15:36","date_gmt":"2026-09-26T17:15:36","guid":{"rendered":"https:\/\/socialhackerslab.com\/?page_id=23814299"},"modified":"2026-09-26T17:15:39","modified_gmt":"2026-09-26T17:15:39","slug":"shl-v2-1","status":"publish","type":"page","link":"https:\/\/socialhackerslab.com\/en\/shl-v2-1\/","title":{"rendered":"shl v2.1"},"content":{"rendered":"<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,500;1,500&family=Manrope:wght@300..800&family=Geist+Mono:wght@400;500&display=swap\" rel=\"stylesheet\">\r\n<style>\r\n\/* Autour de la page : le th\u00e8me s'efface (en-t\u00eate, titre, barre lat\u00e9rale, pied) *\/\r\nbody:has(#shl-accueil) { margin: 0 !important; padding: 0 !important; background: #fff !important; }\r\nbody :has(#shl-accueil) { all: unset !important; display: block !important; }\r\nbody :has(#shl-accueil)::before, body :has(#shl-accueil)::after { content: none !important; }\r\nbody :has(#shl-accueil) > :not(:has(#shl-accueil), #shl-accueil) { display: none !important; }\r\n\/* Dans la page : aucun style du th\u00e8me ne d\u00e9teint *\/\r\n#shl-accueil { all: initial; display: block; }\r\nbody #shl-accueil :where(div, section, header, footer, nav, main, article, aside, span, b, strong, em, i, small, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, figure, figcaption, blockquote, a, button, input, select, textarea, label, table, tr, th, td) { all: revert; box-sizing: border-box; }\r\n\/* Connect\u00e9, la barre d'admin de WordPress reste en haut : l'en-t\u00eate de la page se cale dessous *\/\r\nbody.admin-bar #shl-accueil .site-header { top: 32px; }\r\n@media (max-width: 782px) { body.admin-bar #shl-accueil .site-header { top: 46px; } }\r\n@media (max-width: 600px) { body.admin-bar #shl-accueil .site-header { top: 0; } }\r\n#shl-accueil { --bg: #fff;\r\n  --canvas: #fbfbf8;\r\n  --tint: #f7f8f5;\r\n  --sunk: #f2f4ef;\r\n  --ink: #173540;\r\n  --ink-2: #445f69;\r\n  --muted: #5f7276;\r\n  --soft: #6b8286;\r\n  --faint: #9aa9ab;\r\n  --line: #e6eae3;\r\n  --line-2: #eef1ec;\r\n  --accent: #1f4a4d;\r\n  --t1: #c86a5e; --t2: #b25f35; --t3: #bd9035; --t4: #8d9b4e; --t5: #55926f;\r\n  --t6: #6d9b93; --t7: #4b8296; --t8: #45508a; --t9: #8480be; --t10: #92557c;\r\n  --x1: #af564b; --x2: #ab5b32; --x3: #8c6c20; --x4: #6a7637; --x5: #437c5d;\r\n  --x6: #4f7871; --x7: #43778b; --x8: #45508a; --x9: #6e6aa8; --x10: #92557c;\r\n  --lv1: #b25f35; --lv2: #2a7fae; --lv3: #8d9b4e;\r\n  --spectrum: linear-gradient(90deg, var(--t1) 0 10%, var(--t2) 0 20%, var(--t3) 0 30%, var(--t4) 0 40%, var(--t5) 0 50%, var(--t6) 0 60%, var(--t7) 0 70%, var(--t8) 0 80%, var(--t9) 0 90%, var(--t10) 0);\r\n  --shadow-sm: 0 1px 2px rgba(14, 27, 46, .05), 0 8px 20px -10px rgba(14, 27, 46, .14);\r\n  --shadow: 0 1px 2px rgba(22, 38, 44, .04), 0 18px 40px -24px rgba(22, 38, 44, .28);\r\n  --r-md: 12px;\r\n  --r-lg: 16px;\r\n  --r-xl: 20px;\r\n  --ease: cubic-bezier(.16, 1, .3, 1);\r\n  --ease-io: cubic-bezier(.65, 0, .35, 1);\r\n  --font: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;\r\n  --mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;\r\n  --gut: clamp(16px, 4vw, 40px); }\r\n#shl-accueil *, #shl-accueil *::before, #shl-accueil *::after { box-sizing: border-box; }\r\nhtml:has(#shl-accueil) { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }\r\n#shl-accueil { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px\/1.6 var(--font); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; }\r\n#shl-accueil img, #shl-accueil svg, #shl-accueil canvas { display: block; max-width: 100%; }\r\n#shl-accueil a { color: inherit; text-decoration: none; }\r\n#shl-accueil button, #shl-accueil input, #shl-accueil select, #shl-accueil textarea { font: inherit; color: inherit; }\r\n#shl-accueil h1, #shl-accueil h2, #shl-accueil h3, #shl-accueil h4, #shl-accueil p, #shl-accueil ol, #shl-accueil ul, #shl-accueil dl, #shl-accueil dd, #shl-accueil figure, #shl-accueil blockquote { margin: 0; }\r\n#shl-accueil ol, #shl-accueil ul { padding: 0; list-style: none; }\r\n#shl-accueil :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }\r\n#shl-accueil ::selection { background: rgba(31, 74, 77, .14); }\r\n#shl-accueil .wrap { width: min(1240px, 100% - 2 * var(--gut)); margin-inline: auto; }\r\n#shl-accueil .sprite { position: absolute; width: 0; height: 0; overflow: hidden; }\r\n#shl-accueil .skip { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 14px; font-weight: 700; }\r\n#shl-accueil .skip:focus { top: 12px; }\r\n#shl-accueil .eyebrow, #shl-accueil .sec-index, #shl-accueil .legend-title, #shl-accueil .map-key, #shl-accueil .partners p b, #shl-accueil .kinds p b, #shl-accueil .step-top, #shl-accueil .project .place, #shl-accueil .field .mono, #shl-accueil .bc-kicker, #shl-accueil .footer h4 { font-family: var(--mono); font-size: 11.5px; font-weight: 500; line-height: 1.3; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }\r\n#shl-accueil .intro { display: none; }\r\n#shl-accueil.js .intro { position: fixed; inset: 0; z-index: 200; display: block; background: #fff; animation: intro-safe .4s 4s forwards; }\r\n#shl-accueil.js .intro.is-live { animation: none; }\r\n#shl-accueil .intro.is-drawn { background: none; }\r\n#shl-accueil .intro.is-out { pointer-events: none; }\r\n#shl-accueil .intro canvas { position: absolute; inset: 0; width: 100%; height: 100%; }\r\n@keyframes intro-safe{to { opacity: 0; visibility: hidden; }}#shl-accueil.js.intro-hold .hero [data-reveal] { opacity: 0; transform: translateY(22px); filter: blur(8px); }\r\n@media (prefers-reduced-motion: reduce){#shl-accueil.js .intro { display: none; }\r\n}#shl-accueil.js [data-reveal] { opacity: 0; transform: translateY(22px); filter: blur(8px);\r\n  transition-property: opacity, transform, filter, translate, box-shadow, border-color, background-color;\r\n  transition-duration: .9s, 1.1s, .9s, .5s, .5s, .4s, .4s;\r\n  transition-timing-function: var(--ease);\r\n  transition-delay: calc(var(--d, 0) * 1ms), calc(var(--d, 0) * 1ms), calc(var(--d, 0) * 1ms), 0s, 0s, 0s, 0s; }\r\n#shl-accueil.js [data-reveal].is-in { opacity: 1; transform: none; filter: none; }\r\n#shl-accueil .btn { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 24px; border: 1px solid transparent; border-radius: 999px; font-size: 15px; font-weight: 700; letter-spacing: -.005em; white-space: nowrap; cursor: pointer; transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease); }\r\n#shl-accueil .btn .arr { transition: transform .45s var(--ease); }\r\n#shl-accueil .btn:hover .arr { transform: translateX(4px); }\r\n#shl-accueil .btn-primary { background: var(--ink); color: #fff; box-shadow: 0 1px 2px rgba(22, 38, 44, .14), 0 12px 24px -14px rgba(22, 38, 44, .6); }\r\n#shl-accueil .btn-primary:hover { background: var(--accent); }\r\n#shl-accueil .btn-ghost { background: #fff; color: var(--ink); border-color: var(--line); }\r\n#shl-accueil .btn-ghost:hover { border-color: #cdd6d0; box-shadow: var(--shadow-sm); }\r\n#shl-accueil .btn-ink { background: transparent; color: var(--ink); border-color: var(--ink); }\r\n#shl-accueil .btn-ink:hover { background: var(--ink); color: #fff; }\r\n#shl-accueil .site-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid transparent; transition: border-color .3s, box-shadow .3s; }\r\n#shl-accueil .site-header.is-solid { border-bottom-color: var(--line); box-shadow: 0 10px 30px -24px rgba(22, 38, 44, .3); }\r\n#shl-accueil .header-row { display: flex; align-items: center; gap: 24px; height: 76px; }\r\n#shl-accueil .brand { --mh: 42px; display: flex; flex: none; }\r\n#shl-accueil .brand-mark { position: relative; flex: none; width: calc(var(--mh) * 2.697); height: var(--mh); overflow: hidden; }\r\n#shl-accueil .brand-mark img { position: absolute; left: calc(var(--mh) * -.462); top: calc(var(--mh) * -1.22); width: calc(var(--mh) * 3.636); height: auto; max-width: none; }\r\n#shl-accueil .main-nav { position: relative; display: flex; margin-inline: auto; }\r\n#shl-accueil .main-nav a { padding: 10px 12px 12px; font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; color: var(--ink-2); transition: color .35s var(--ease); }\r\n#shl-accueil .main-nav a:hover { color: var(--ink); }\r\n#shl-accueil .main-nav a.is-current { color: var(--c); }\r\n#shl-accueil .nav-thumb { position: absolute; bottom: 3px; left: 0; width: 0; height: 2px; border-radius: 2px; background: var(--ink); opacity: 0; transition: transform .55s var(--ease), width .55s var(--ease), background-color .55s var(--ease), opacity .3s; }\r\n#shl-accueil .header-actions { display: flex; align-items: center; gap: 22px; flex: none; }\r\n#shl-accueil .member { font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; color: var(--ink-2); transition: color .3s; }\r\n#shl-accueil .member:hover { color: var(--ink); }\r\n#shl-accueil .header-actions .btn { height: 44px; padding: 0 20px; font-size: 14.5px; }\r\n#shl-accueil .menu-toggle { display: none; align-items: center; gap: 10px; height: 40px; margin-left: auto; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: 14px; font-weight: 600; cursor: pointer; }\r\n#shl-accueil .menu-toggle i { width: 16px; height: 10px; border-top: 1.5px solid; border-bottom: 1.5px solid; transition: transform .3s var(--ease); }\r\n#shl-accueil .is-open .menu-toggle i { transform: rotate(90deg); }\r\n#shl-accueil .mobile-nav { display: grid; padding: 8px var(--gut) 24px; border-top: 1px solid var(--line); background: #fff; }\r\n#shl-accueil .mobile-nav[hidden] { display: none; }\r\n#shl-accueil .mobile-nav a { padding: 13px 0; border-bottom: 1px solid var(--line-2); font-size: 16px; font-weight: 600; }\r\n#shl-accueil .mobile-nav .btn { justify-content: center; margin-top: 16px; padding: 0 22px; border-bottom: 0; }\r\n#shl-accueil .hero { position: relative; padding: clamp(18px, 3.2vh, 44px) 0 clamp(40px, 5vh, 64px); overflow: hidden; }\r\n#shl-accueil .eyebrow { display: inline-flex; align-items: center; gap: 12px; font-size: 11px; letter-spacing: .13em; }\r\n#shl-accueil .eyebrow::before { content: ''; width: 36px; height: 2px; background: var(--spectrum); flex: none; }\r\n#shl-accueil .hero-title { font-family: 'Cormorant Garamond', Garamond, 'Times New Roman', serif; font-weight: 500; text-align: center; color: var(--ink); }\r\n#shl-accueil .hero-title .hl { display: block; overflow: hidden; padding-bottom: .05em; font-size: clamp(58px, 9.4vw, 152px); line-height: .96; letter-spacing: -.022em; text-wrap: balance; }\r\n#shl-accueil .hero-title .hl > span { display: inline-block; transition: transform 1.4s var(--ease) .1s; }\r\n#shl-accueil .hero-title i { font-style: italic; letter-spacing: -.008em; }\r\n#shl-accueil .hero-title .sub { display: block; margin-top: clamp(2px, .6vh, 8px); font-size: clamp(23px, 2.75vw, 41px); line-height: 1.16; letter-spacing: 0; color: var(--ink-2); text-wrap: balance; transition: opacity 1.1s var(--ease) .45s, filter 1.1s var(--ease) .45s, transform 1.3s var(--ease) .45s; }\r\n#shl-accueil.js .hero-title .hl > span { transform: translateY(106%); }\r\n#shl-accueil.js .hero-title .sub { opacity: 0; filter: blur(8px); transform: translateY(10px); }\r\n#shl-accueil.js.is-loaded .hero-title .hl > span, #shl-accueil.js.is-loaded .hero-title .sub { transform: none; opacity: 1; filter: none; }\r\n#shl-accueil .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }\r\n#shl-accueil .hero-art { position: relative; margin-top: clamp(4px, 1vh, 14px); }\r\n#shl-accueil .hero-hands { position: relative; height: clamp(300px, min(40vw, 100svh - 380px), 720px); margin-inline: calc(50% - 50vw); overflow: hidden; }\r\n#shl-accueil .hero-hands canvas { position: absolute; inset: 0; width: 100%; height: 100%; }\r\n#shl-accueil .hands-src { position: absolute; width: 2px; height: 2px; opacity: 0; pointer-events: none; }\r\n#shl-accueil .hands-still { position: absolute; top: 0; left: 50%; height: 100%; width: auto; max-width: none; transform: translateX(-45%); }\r\n#shl-accueil.js .hands-still { display: none; }\r\n#shl-accueil .hero-foot { display: flex; align-items: center; justify-content: space-between; gap: 20px 44px; margin-top: clamp(18px, 3vh, 36px); }\r\n#shl-accueil.js .is-joined ~ .hero-foot { opacity: 1; transform: none; filter: none; transition-delay: .7s; }\r\n#shl-accueil .lede { max-width: 720px; font-size: clamp(15.5px, 1.2vw, 18px); line-height: 1.6; color: var(--ink-2); }\r\n#shl-accueil .lede b { font-weight: 700; color: var(--ink); }\r\n#shl-accueil .hero-cta { display: flex; flex-wrap: wrap; gap: 12px; flex: none; }\r\n#shl-accueil .proof { padding: clamp(64px, 8vw, 104px) 0; border-top: 1px solid var(--line); }\r\n#shl-accueil .proof-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 24px; }\r\n#shl-accueil .proof-head h2 { font-size: clamp(24px, 2.4vw, 32px); font-weight: 800; letter-spacing: -.025em; }\r\n#shl-accueil .proof-head p { font-size: 15px; color: var(--muted); }\r\n#shl-accueil .figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 40px; margin-top: 40px; }\r\n#shl-accueil .figures > div { position: relative; padding-top: 28px; border-top: 1px solid var(--line); }\r\n#shl-accueil .figures > div::before { content: ''; position: absolute; top: -1px; left: 0; width: 48px; height: 2px; background: var(--c); transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--ease) calc(var(--d, 0) * 1ms + 250ms); }\r\n#shl-accueil .figures > div.is-in::before { transform: none; }\r\n#shl-accueil .figures > div:nth-child(1) { --c: var(--t1); --cx: var(--x1); }\r\n#shl-accueil .figures > div:nth-child(2) { --c: var(--t5); --cx: var(--x5); }\r\n#shl-accueil .figures > div:nth-child(3) { --c: var(--t7); --cx: var(--x7); }\r\n#shl-accueil .figures > div:nth-child(4) { --c: var(--t10); --cx: var(--x10); }\r\n#shl-accueil .figures dt { color: var(--cx); display: flex; align-items: baseline; gap: 6px; font-size: clamp(44px, 5vw, 68px); font-weight: 800; line-height: 1; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }\r\n#shl-accueil .figures dt small { font-size: .38em; font-weight: 700; letter-spacing: -.01em; }\r\n#shl-accueil .figures dd { max-width: 260px; margin-top: 14px; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }\r\n#shl-accueil .hubs-note { margin-top: 36px; font-size: 14.5px; color: var(--ink-2); }\r\n#shl-accueil .hubs-note b { color: var(--ink); }\r\n#shl-accueil .partners, #shl-accueil .kinds { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 32px; align-items: center; margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--line); }\r\n#shl-accueil .partners p, #shl-accueil .kinds p { font-size: 14px; line-height: 1.5; color: var(--muted); }\r\n#shl-accueil .partners p b, #shl-accueil .kinds p b { display: block; margin-bottom: 6px; color: var(--ink); }\r\n#shl-accueil .logos { --gap: 72px; display: flex; gap: var(--gap); padding-block: 6px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }\r\n#shl-accueil .logos-set { flex: none; display: flex; align-items: center; justify-content: space-around; gap: var(--gap); min-width: 100%; animation: logos-roll 40s linear infinite; }\r\n#shl-accueil .logos:hover .logos-set { animation-play-state: paused; }\r\n#shl-accueil .logos img { width: auto; height: 36px; transition: transform .45s var(--ease); }\r\n#shl-accueil .logos img:hover { transform: scale(1.06); }\r\n@keyframes logos-roll{to { transform: translateX(calc(-100% - var(--gap))); }}#shl-accueil .atlas { position: relative; overflow: hidden; background: var(--tint); border-top: 1px solid var(--line); scroll-margin-top: 76px; }\r\n#shl-accueil .atlas-over { display: grid; grid-template-columns: minmax(0, clamp(360px, 33vw, 420px)) minmax(0, 1fr); align-content: space-between; gap: 24px 0; min-height: clamp(540px, calc(100vh - 77px), 1160px); min-height: clamp(540px, calc(100svh - 77px), 1160px); padding: clamp(28px, 5.5vh, 88px) 0 clamp(24px, 4.5vh, 60px); pointer-events: none; }\r\n#shl-accueil .atlas-over > * { position: relative; z-index: 1; grid-column: 1; pointer-events: auto; }\r\n#shl-accueil .atlas-copy .sec-title { font-size: clamp(28px, min(2.8vw, 4.6vh), 42px); }\r\n#shl-accueil .atlas-copy .sec-copy { margin-top: clamp(12px, 2.2vh, 20px); font-size: clamp(15px, 2.2vh, 16px); line-height: 1.6; }\r\n#shl-accueil .atlas-over > .atlas-canvas { position: absolute; inset: 0; z-index: 0; -webkit-mask-image: linear-gradient(180deg, transparent, #000 28px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(180deg, transparent, #000 28px, #000 calc(100% - 28px), transparent); }\r\n#shl-accueil .atlas-canvas canvas { position: absolute; inset: 0; width: 100%; height: 100%; }\r\n#shl-accueil .atlas-over > .map-key { position: absolute; right: max(var(--gut), calc((100% - 1240px) \/ 2)); bottom: clamp(24px, 4.5vh, 60px); display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 22px; letter-spacing: .04em; text-transform: none; font-size: 12px; color: var(--ink-2); }\r\n#shl-accueil .map-key li { display: inline-flex; align-items: center; gap: 9px; }\r\n#shl-accueil .map-key i { flex: none; }\r\n#shl-accueil .k-port { width: 9px; height: 9px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(22, 38, 44, .35); }\r\n#shl-accueil .k-hub { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px #fff, 0 0 0 5px rgba(31, 74, 77, .14); }\r\n#shl-accueil .k-arc { width: 22px; height: 10px; border: 2px solid var(--soft); border-bottom: 0; border-radius: 12px 12px 0 0; }\r\n#shl-accueil .atlas-legend { display: flex; flex-direction: column; }\r\n#shl-accueil .legend-title { display: flex; justify-content: space-between; gap: 12px; padding: 0 8px 10px; }\r\n#shl-accueil .legend-list li, #shl-accueil .legend-hubs { display: grid; grid-template-columns: 30px minmax(0, 1fr) 28px; align-items: center; gap: 1px 14px; padding: clamp(6px, 1vh, 10px) 8px; line-height: 1.35; border-top: 1px solid var(--line); }\r\n#shl-accueil .flag { grid-area: 1 \/ 1 \/ 3 \/ 2; display: block; width: 30px; height: 20px; border-radius: 4px; overflow: hidden; box-shadow: 0 0 0 1px rgba(22, 38, 44, .14); transition: box-shadow .25s, opacity .25s, transform .35s var(--ease); }\r\n#shl-accueil .flag svg { display: block; width: 100%; height: 100%; }\r\n#shl-accueil .legend-list li.is-hot .flag { transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(22, 38, 44, .14), 0 0 0 4px color-mix(in srgb, var(--c) 24%, transparent); }\r\n#shl-accueil .legend-list:has(.is-hot) li:not(.is-hot) .flag { opacity: .5; }\r\n#shl-accueil .legend-list li { transition: opacity .38s var(--ease), transform .38s var(--ease), background-color .25s; transition-delay: calc(var(--i, 0) * 55ms), calc(var(--i, 0) * 55ms), 0s; }\r\n#shl-accueil .legend-list li.is-hot { background: color-mix(in srgb, var(--c) 9%, transparent); }\r\n#shl-accueil .legend-list li > svg { grid-area: 1 \/ 3 \/ 3 \/ 4; justify-self: end; width: 26px; height: 14px; overflow: visible; transition: transform .35s var(--ease); }\r\n#shl-accueil .legend-list li.is-hot li > svg { transform: translateY(-2px) scale(1.12); }\r\n#shl-accueil .legend-list li > svg path { fill: none; stroke: var(--c); stroke-width: 2.2; stroke-linecap: round; }\r\n#shl-accueil .legend-list li > svg circle { fill: var(--c); }\r\n#shl-accueil .legend-list li > svg circle:first-of-type { fill: var(--ink); }\r\n#shl-accueil .legend-list .dest, #shl-accueil .legend-hubs b { grid-area: 1 \/ 2; align-self: end; font-size: 15px; font-weight: 700; letter-spacing: -.01em; transition: color .25s; }\r\n#shl-accueil .legend-list .who, #shl-accueil .legend-hubs .who { grid-area: 2 \/ 2; align-self: start; font-size: 12.5px; line-height: 1.4; color: var(--muted); transition: color .25s; }\r\n#shl-accueil .legend-list li.is-hot .dest { color: color-mix(in srgb, var(--c) 72%, var(--ink)); }\r\n#shl-accueil .legend-list:has(.is-hot) li:not(.is-hot) :is(.dest, .who) { color: #9aa9a9; }\r\n#shl-accueil .legend-hubs { border-bottom: 1px solid var(--line); transition: opacity .38s var(--ease); transition-delay: calc(var(--i, 0) * 55ms); }\r\n#shl-accueil .legend-more { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; margin: clamp(12px, 2vh, 18px) 8px 0; font-size: 14px; font-weight: 700; color: var(--accent); transition: opacity .38s var(--ease); transition-delay: calc(var(--i, 0) * 55ms); }\r\n#shl-accueil .legend-more:hover .arr { transform: translateX(4px); }\r\n#shl-accueil .legend-more .arr { transition: transform .45s var(--ease); }\r\n#shl-accueil.js .legend-list li { opacity: 0; transform: translateY(6px); }\r\n#shl-accueil.js .legend-hubs, #shl-accueil.js .legend-more { opacity: 0; }\r\n#shl-accueil.js .is-ready .legend-list li { opacity: 1; transform: none; }\r\n#shl-accueil.js .is-ready .legend-hubs, #shl-accueil.js .is-ready .legend-more { opacity: 1; }\r\n#shl-accueil .section { padding: clamp(80px, 11vw, 144px) 0; border-top: 1px solid var(--line); }\r\n#shl-accueil .section.tint { background: var(--tint); }\r\n#shl-accueil .sec-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; max-width: 880px; margin-bottom: clamp(40px, 5vw, 60px); }\r\n#shl-accueil .sec-index { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; letter-spacing: .12em; }\r\n#shl-accueil .sec-index, #shl-accueil .sec-index span, #shl-accueil .contact .eyebrow { color: var(--h, var(--muted)); }\r\n#shl-accueil .sec-index::before { content: ''; width: 40px; height: 3px; margin-right: 4px; border-radius: 2px; background: var(--spectrum); flex: none; transform: scaleX(.001); transform-origin: left; transition: transform 1.1s var(--ease) .2s; }\r\n#shl-accueil .is-in .sec-index::before, #shl-accueil .method .sec-index::before { transform: none; }\r\n#shl-accueil .sec-title { margin-top: 18px; font-size: clamp(30px, 3.6vw, 50px); line-height: 1.08; font-weight: 800; letter-spacing: -.032em; text-wrap: balance; }\r\n#shl-accueil .sec-title em, #shl-accueil .contact h2 em { font-style: normal; color: var(--h, var(--soft)); }\r\n#shl-accueil .sec-copy { max-width: 640px; font-size: 18px; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }\r\n#shl-accueil .sec-copy + .sec-copy { margin-top: 14px; }\r\n#shl-accueil .kinds li { padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: 13.5px; font-weight: 600; box-shadow: 0 1px 2px rgba(22, 38, 44, .04); }\r\n#shl-accueil .ident-head { margin-bottom: clamp(48px, 6vw, 80px); }\r\n#shl-accueil .ident-text { display: grid; gap: clamp(22px, 2.6vw, 32px); max-width: 1000px; margin-top: clamp(22px, 2.6vw, 30px); }\r\n#shl-accueil .ident-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px clamp(32px, 4vw, 56px); align-items: start; }\r\n#shl-accueil .ident-body .sec-copy { max-width: none; font-size: 17px; }\r\n#shl-accueil .ident-body .sec-copy + .sec-copy { margin-top: 0; }\r\n#shl-accueil .ident-lead { max-width: none; font-size: clamp(21px, 2vw, 27px); font-weight: 600; line-height: 1.42; letter-spacing: -.018em; color: var(--ink); text-wrap: pretty; }\r\n#shl-accueil .ident-text .sec-copy b { font-weight: 700; color: var(--ink); }\r\n#shl-accueil .bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }\r\n#shl-accueil .bc { --c: var(--accent); --cx: var(--accent); position: relative; display: flex; flex-direction: column; min-width: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: 0 1px 2px rgba(22, 38, 44, .04); }\r\n@supports (grid-template-rows: subgrid){#shl-accueil .bc { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; }\r\n}#shl-accueil .bc-stage { position: relative; display: grid; place-items: center; min-height: 292px; margin: 10px 10px 0; padding: 22px 18px; overflow: hidden; background: var(--canvas); border: 1px solid var(--line-2); border-radius: 14px; }\r\n#shl-accueil .bc-stage::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle, #e1e7e2 1px, transparent 1.5px) 0 0 \/ 14px 14px; -webkit-mask-image: radial-gradient(closest-side, #000, transparent); mask-image: radial-gradient(closest-side, #000, transparent); pointer-events: none; }\r\n#shl-accueil .bc-stage > * { position: relative; }\r\n#shl-accueil .bc-head { padding: 24px 28px 30px; }\r\n#shl-accueil .bc-kicker { color: var(--cx); display: flex; align-items: center; gap: 10px; }\r\n#shl-accueil .bc-kicker::before { content: ''; width: 18px; height: 3px; border-radius: 2px; background: var(--c); flex: none; }\r\n#shl-accueil .bc h3 { margin-top: 12px; font-size: 21px; font-weight: 700; line-height: 1.25; letter-spacing: -.02em; text-wrap: balance; }\r\n#shl-accueil .bc-head > p:last-child { margin-top: 12px; font-size: 15px; line-height: 1.65; color: var(--ink-2); }\r\n#shl-accueil .sc-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-sm); }\r\n#shl-accueil .pil { display: grid; justify-items: center; width: min(100%, 320px); }\r\n#shl-accueil .pil-fig { position: relative; width: 100%; }\r\n#shl-accueil .pil-art { display: block; width: 100%; height: auto; overflow: visible; }\r\n#shl-accueil .pil-name { position: absolute; left: 0; right: 0; top: 21.33%; transform: translateY(-50%); font-size: 12.5px; font-weight: 600; line-height: 1; letter-spacing: -.005em; color: #fff; text-align: center; }\r\n#shl-accueil .pil-key { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; margin-top: 14px; font-size: 12px; font-weight: 600; line-height: 1.35; color: var(--muted); text-align: center; }\r\n#shl-accueil .pil-key .is-new { color: color-mix(in srgb, var(--k) 68%, var(--ink)); }\r\n#shl-accueil .pil-name, #shl-accueil .pil-key .is-new { transition: opacity .16s, filter .16s; }\r\n#shl-accueil .sc-pil:not(.is-b) .pil-name, #shl-accueil .sc-pil:not(.is-b) .pil-key .is-new { opacity: 0; filter: blur(4px); }\r\n#shl-accueil .sc-pil.is-b .pil-name, #shl-accueil .sc-pil.is-b .pil-key .is-new { transition: opacity .5s var(--ease) calc(var(--i, 0) * 90ms), filter .5s var(--ease) calc(var(--i, 0) * 90ms); }\r\n#shl-accueil .dos { display: grid; gap: 12px; width: min(100%, 330px); }\r\n#shl-accueil .dos-key { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 20px; font-size: 12px; font-weight: 600; line-height: 1.3; }\r\n#shl-accueil .dos-key span { display: inline-flex; align-items: center; gap: 7px; color: color-mix(in srgb, var(--k) 70%, var(--ink)); }\r\n#shl-accueil .dos-key svg { flex: none; width: 10px; height: 15px; overflow: visible; fill: var(--k); }\r\n#shl-accueil .dos-art { display: block; width: 100%; height: auto; overflow: visible; }\r\n#shl-accueil .dos-slot { fill: none; stroke: #d5ddd8; stroke-dasharray: 3 3; }\r\n#shl-accueil .dos-brace { fill: none; stroke: #d5ddd8; }\r\n#shl-accueil .dos-brace.is-you { stroke: color-mix(in srgb, var(--c) 45%, #fff); }\r\n#shl-accueil .dos-paper { fill: #fff; stroke: #e0e6e0; }\r\n#shl-accueil .dos-lift { fill: #16262c; fill-opacity: .2; opacity: 0; }\r\n#shl-accueil .dos-title { fill: #d3dcd8; }\r\n#shl-accueil .dos-bed { fill: #edf1ed; }\r\n#shl-accueil .dos-fill.is-shl { fill: var(--faint); }\r\n#shl-accueil .dos-fill.is-you { fill: var(--c); }\r\n#shl-accueil .dos-ok circle { fill: var(--c); }\r\n#shl-accueil .dos-ok path { fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }\r\n#shl-accueil .dos-cur { stroke: #fff; stroke-width: 1.3; stroke-linejoin: round; }\r\n#shl-accueil .dos-cur.is-shl { fill: var(--soft); }\r\n#shl-accueil .dos-cur.is-you { fill: var(--c); }\r\n#shl-accueil .dos-ticks { display: grid; grid-template-columns: 1fr 2fr; margin-top: -4px; font-size: 12px; line-height: 1.35; color: var(--muted); text-align: center; }\r\n#shl-accueil .dos-ticks b { display: block; font-weight: 700; color: var(--ink-2); }\r\n#shl-accueil .dos-ticks .is-you, #shl-accueil .dos-ticks .is-you b { color: color-mix(in srgb, var(--c) 72%, var(--ink)); }\r\n#shl-accueil .sc-net { display: block; padding: 0; }\r\n#shl-accueil .bc-stage > .net-svg { position: absolute; inset: 0; width: 100%; height: 100%; }\r\n#shl-accueil .net-band { fill: none; stroke: #f1f4f0; }\r\n#shl-accueil .net-line { fill: none; stroke: color-mix(in srgb, var(--c) 60%, #fff); stroke-width: 1.6; stroke-linecap: round; opacity: 0; }\r\n#shl-accueil .net-line.is-on { opacity: 1; }\r\n#shl-accueil .sc-net.is-fade .net-line { opacity: 0; transition: opacity .6s var(--ease); }\r\n#shl-accueil .net-dot { fill: var(--c); opacity: 0; filter: drop-shadow(0 0 3px var(--c)); }\r\n#shl-accueil .net-dot.is-on { opacity: 1; }\r\n#shl-accueil .bc-stage > .net-node { position: absolute; left: var(--x); top: var(--y); width: 44px; height: 44px; margin: -22px 0 0 -22px; padding: 4px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 6px 14px -8px rgba(22, 38, 44, .35); transition: box-shadow .5s var(--ease); }\r\n#shl-accueil .net-node::after { content: ''; position: absolute; inset: 4px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(22, 38, 44, .1); }\r\n#shl-accueil .net-node svg { width: 36px; height: 36px; border-radius: 50%; filter: grayscale(1); opacity: .4; transition: filter .6s var(--ease), opacity .6s var(--ease); }\r\n#shl-accueil .net-node.is-on { box-shadow: 0 0 0 1.5px var(--c), 0 0 0 6px color-mix(in srgb, var(--c) 14%, transparent), 0 6px 14px -8px rgba(22, 38, 44, .35); }\r\n#shl-accueil .sc-net.is-live .net-node.is-on { animation: net-pop .55s var(--ease); }\r\n#shl-accueil .net-node.is-on svg { filter: none; opacity: 1; }\r\n#shl-accueil .net-node:nth-of-type(1) { --x: 16.6%; --y: 56%; }\r\n#shl-accueil .net-node:nth-of-type(2) { --x: 26.8%; --y: 32%; }\r\n#shl-accueil .net-node:nth-of-type(3) { --x: 41.7%; --y: 18.6%; }\r\n#shl-accueil .net-node:nth-of-type(4) { --x: 58.3%; --y: 18.6%; }\r\n#shl-accueil .net-node:nth-of-type(5) { --x: 73.2%; --y: 32%; }\r\n#shl-accueil .net-node:nth-of-type(6) { --x: 83.4%; --y: 56%; }\r\n#shl-accueil .net-node:nth-of-type(1) { --c: var(--t5); --cx: var(--x5); }\r\n#shl-accueil .net-node:nth-of-type(2) { --c: var(--t1); --cx: var(--x1); }\r\n#shl-accueil .net-node:nth-of-type(3) { --c: var(--t8); --cx: var(--x8); }\r\n#shl-accueil .net-node:nth-of-type(4) { --c: var(--t3); --cx: var(--x3); }\r\n#shl-accueil .net-node:nth-of-type(5) { --c: var(--t10); --cx: var(--x10); }\r\n#shl-accueil .net-node:nth-of-type(6) { --c: var(--t7); --cx: var(--x7); }\r\n#shl-accueil .bc-stage > .net-core { position: absolute; left: var(--x, 50%); top: var(--y, 85%); transform: translate(-50%, -50%); padding: 9px 16px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 13px; font-weight: 700; white-space: nowrap; box-shadow: 0 10px 22px -10px rgba(22, 38, 44, .6); }\r\n#shl-accueil .net-core::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }\r\n#shl-accueil .net-core.is-ping::after { animation: net-ping .9s var(--ease) both; }\r\n#shl-accueil .bc-stage > .net-key { position: absolute; left: 16px; top: 14px; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; font-weight: 600; color: var(--muted); }\r\n#shl-accueil .net-key span { display: inline-flex; align-items: center; gap: 7px; }\r\n#shl-accueil .net-key i, #shl-accueil .net-key svg { width: 14px; height: 14px; border-radius: 50%; }\r\n#shl-accueil .net-key i { box-shadow: inset 0 0 0 1.5px #cdd6d0; }\r\n@keyframes net-pop{45% { transform: scale(1.1); }}@keyframes net-ping{from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 50%, transparent); } to { box-shadow: 0 0 0 14px transparent; }}#shl-accueil .terr { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 20px; }\r\n#shl-accueil .fields { display: flex; flex-direction: column; gap: 10px; }\r\n#shl-accueil .field { --c: var(--accent); --cx: var(--accent); position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 0 18px; padding: 24px 26px 26px 22px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-xl); transition: background-color .45s var(--ease), border-color .45s, box-shadow .45s var(--ease); }\r\n#shl-accueil .field:hover { background: rgba(255, 255, 255, .6); }\r\n#shl-accueil .field.is-on { background: #fff; border-color: #dfe5df; box-shadow: var(--shadow); }\r\n#shl-accueil .field-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: color-mix(in srgb, var(--c) 12%, #fff); color: var(--c); }\r\n#shl-accueil .field-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }\r\n#shl-accueil .field .mono { margin-top: 3px; color: color-mix(in srgb, var(--c) 70%, #000); }\r\n#shl-accueil .field h3 { margin-top: 8px; font-size: 19px; font-weight: 700; letter-spacing: -.02em; line-height: 1.3; }\r\n#shl-accueil .field-btn { padding: 0; border: 0; background: none; font: inherit; letter-spacing: inherit; text-align: left; cursor: pointer; }\r\n#shl-accueil .field-btn::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }\r\n#shl-accueil .field-btn:focus-visible { outline: none; }\r\n#shl-accueil .field:has(.field-btn:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }\r\n#shl-accueil .field h3 + p { margin-top: 10px; font-size: 15px; line-height: 1.65; color: var(--ink-2); }\r\n#shl-accueil .field-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--c); transform: scaleX(0); transform-origin: left; opacity: 0; transition: opacity .3s; }\r\n#shl-accueil .field.is-on .field-bar { opacity: 1; transform: none; }\r\n#shl-accueil .terr.is-auto .field.is-on .field-bar { animation: field-run 7s linear both; }\r\n#shl-accueil .terr.is-auto:hover .field.is-on .field-bar, #shl-accueil .terr.is-hold .field.is-on .field-bar { animation-play-state: paused; }\r\n@keyframes field-run{from { transform: scaleX(0); } to { transform: none; }}#shl-accueil .terr-map { display: flex; flex-direction: column; min-width: 0; margin: 0; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow); }\r\n#shl-accueil .terr-head { display: flex; justify-content: space-between; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--line-2); }\r\n#shl-accueil .terr-head b { font-weight: 500; color: var(--ink); }\r\n#shl-accueil .terr-stage { position: relative; flex: 1; min-height: 460px; }\r\n#shl-accueil .terr-stage canvas { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; }\r\n#shl-accueil .drom { position: absolute; left: 16px; top: 16px; bottom: 16px; display: grid; grid-template-rows: repeat(5, minmax(0, 1fr)); gap: 8px; width: clamp(92px, 8.4vw, 116px); }\r\n#shl-accueil .drom li { display: flex; align-items: flex-end; justify-content: center; padding-bottom: 7px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--canvas); font: 500 11.5px\/1 var(--mono); color: var(--muted); transition: border-color .5s var(--ease), background-color .5s var(--ease), color .5s; }\r\n#shl-accueil .terr.is-dom .drom li { border-color: color-mix(in srgb, var(--t5) 40%, #fff); background: color-mix(in srgb, var(--t5) 6%, #fff); color: color-mix(in srgb, var(--t5) 70%, #000); }\r\n#shl-accueil .terr-key { display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 14px 20px; border-top: 1px solid var(--line-2); font-size: 12.5px; font-weight: 600; color: var(--faint); }\r\n#shl-accueil .terr-key li { display: inline-flex; align-items: center; gap: 8px; transition: color .16s; }\r\n#shl-accueil .terr-key i { width: 9px; height: 9px; border-radius: 50%; background: #cfd8d3; transition: background-color .16s; }\r\n#shl-accueil .terr-key li.is-on { color: var(--kx); transition: color .38s var(--ease); }\r\n#shl-accueil .terr-key li.is-on i { background: var(--k); transition: background-color .38s var(--ease); }\r\n#shl-accueil .kinds ul { display: flex; flex-wrap: wrap; gap: 8px; }\r\n#shl-accueil .kinds li { color: var(--ink-2); }\r\n#shl-accueil .method { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 96px); }\r\n#shl-accueil .method-sticky { position: sticky; top: 120px; }\r\n#shl-accueil .method .sec-copy { margin-top: 22px; }\r\n#shl-accueil .rail { position: relative; margin-top: 40px; padding-left: 28px; }\r\n#shl-accueil .rail-track { position: absolute; left: 5px; top: 18px; bottom: 18px; width: 2px; border-radius: 2px; background: var(--line); overflow: hidden; }\r\n#shl-accueil .rail-track span { position: absolute; inset: 0; background: linear-gradient(180deg, var(--t1), var(--t3), var(--t5), var(--t7), var(--t9)); transform: scaleY(0); transform-origin: top; }\r\n#shl-accueil .rail li { position: relative; }\r\n#shl-accueil .rail li:nth-child(1), #shl-accueil .step:nth-child(1) { --c: var(--t1); --cx: var(--x1); }\r\n#shl-accueil .rail li:nth-child(2), #shl-accueil .step:nth-child(2) { --c: var(--t3); --cx: var(--x3); }\r\n#shl-accueil .rail li:nth-child(3), #shl-accueil .step:nth-child(3) { --c: var(--t5); --cx: var(--x5); }\r\n#shl-accueil .rail li:nth-child(4), #shl-accueil .step:nth-child(4) { --c: var(--t7); --cx: var(--x7); }\r\n#shl-accueil .rail li:nth-child(5), #shl-accueil .step:nth-child(5) { --c: var(--t9); --cx: var(--x9); }\r\n#shl-accueil .rail li::before { content: ''; position: absolute; left: -28px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border: 2px solid var(--line); border-radius: 50%; background: #fff; transition: border-color .4s, background-color .4s, box-shadow .4s, transform .4s var(--ease); }\r\n#shl-accueil .rail li.is-past::before { border-color: var(--c); background: var(--c); }\r\n#shl-accueil .rail li.is-active::before { border-color: var(--c); transform: scale(1.2); box-shadow: 0 0 0 5px color-mix(in srgb, var(--c) 18%, transparent); }\r\n#shl-accueil .rail a { display: flex; align-items: baseline; gap: 14px; padding: 9px 0; font-size: 15px; font-weight: 600; color: var(--faint); transition: color .4s var(--ease); }\r\n#shl-accueil .rail a span { font: 500 12px\/1 var(--mono); }\r\n#shl-accueil .rail li.is-past a { color: var(--ink-2); }\r\n#shl-accueil .rail li.is-active a { color: var(--cx); }\r\n#shl-accueil .steps { display: grid; gap: 20px; }\r\n#shl-accueil .step { padding: 36px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); transition: opacity .5s var(--ease), box-shadow .5s var(--ease), border-color .5s; }\r\n#shl-accueil .method.is-live .step { opacity: .55; }\r\n#shl-accueil .method.is-live .step.is-active { opacity: 1; border-color: #dce2dc; box-shadow: var(--shadow); }\r\n#shl-accueil .step-top { color: var(--cx); display: flex; align-items: baseline; gap: 14px; }\r\n#shl-accueil .step-top .big { font: 800 44px\/1 var(--font); letter-spacing: -.04em; color: var(--c); }\r\n#shl-accueil .step-label { display: grid; gap: 9px; }\r\n#shl-accueil .step-bar { display: flex; gap: 5px; }\r\n#shl-accueil .step-bar i { position: relative; width: 18px; height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; }\r\n#shl-accueil .step-bar i.now { width: 34px; }\r\n#shl-accueil .step-bar i::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: color-mix(in srgb, var(--c) 42%, #fff); transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease) calc(var(--k) * 90ms + .25s); }\r\n#shl-accueil .step-bar i.now::after { background: var(--c); }\r\n#shl-accueil .step-bar i:is(.done, .now)::after { transform: none; }\r\n#shl-accueil .step-bar i:nth-child(1) { --k: 0; }\r\n#shl-accueil .step-bar i:nth-child(2) { --k: 1; }\r\n#shl-accueil .step-bar i:nth-child(3) { --k: 2; }\r\n#shl-accueil .step-bar i:nth-child(4) { --k: 3; }\r\n#shl-accueil .step-bar i:nth-child(5) { --k: 4; }\r\n@media (min-width: 1061px){#shl-accueil .method.is-live .step:not(.is-active) .step-bar i::after { transform: scaleX(0); transition-duration: .4s; transition-delay: 0s; }\r\n}#shl-accueil .step h3 { margin-top: 22px; font-size: 24px; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; }\r\n#shl-accueil .step h3 + p { max-width: 580px; margin-top: 12px; font-size: 15.5px; line-height: 1.7; color: var(--ink-2); }\r\n#shl-accueil .tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 24px; }\r\n#shl-accueil .tools li { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--canvas); border: 1px solid var(--line-2); border-radius: 10px; font-size: 14px; font-weight: 600; }\r\n#shl-accueil .tools svg { flex: none; width: 16px; height: 16px; fill: none; stroke: var(--accent); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }\r\n#shl-accueil .projects { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }\r\n#shl-accueil .project { position: relative; display: flex; flex-direction: column; padding: 28px; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); }\r\n#shl-accueil .project:nth-child(1) { --c: var(--t1); --cx: var(--x1); }\r\n#shl-accueil .project:nth-child(2) { --c: var(--t6); --cx: var(--x6); }\r\n#shl-accueil .project:nth-child(3) { --c: var(--t7); --cx: var(--x7); }\r\n#shl-accueil .project:nth-child(4) { --c: var(--t9); --cx: var(--x9); }\r\n#shl-accueil .project:nth-child(5) { --c: var(--t10); --cx: var(--x10); }\r\n#shl-accueil .project:nth-child(6) { --c: var(--t5); --cx: var(--x5); }\r\n#shl-accueil .project::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--c); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); }\r\n#shl-accueil .project:hover::before { transform: none; }\r\n#shl-accueil .duo { position: relative; height: 164px; margin: -12px -12px 24px; overflow: hidden; background: var(--canvas); border: 1px solid var(--line-2); border-radius: 14px; }\r\n#shl-accueil .duo::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle, #e1e7e2 1px, transparent 1.5px) 0 0 \/ 14px 14px; -webkit-mask-image: radial-gradient(closest-side, #000, transparent); mask-image: radial-gradient(closest-side, #000, transparent); }\r\n#shl-accueil .duo-arc { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }\r\n#shl-accueil .duo-arc path { fill: none; stroke-linecap: round; }\r\n#shl-accueil .duo-track { stroke: #cfd8d3; stroke-width: 1.5; stroke-dasharray: 0 5; }\r\n#shl-accueil .duo-line { stroke: var(--c); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1s var(--ease-io) var(--dl, 0s); }\r\n#shl-accueil .duo-spark { stroke: #fff; stroke-width: 3; stroke-dasharray: .05 1.2; stroke-dashoffset: .05; opacity: 0; filter: drop-shadow(0 0 2px var(--c)) drop-shadow(0 0 5px var(--c)); }\r\n#shl-accueil .duo.is-play .duo-spark { animation: duo-spark 4.2s var(--ease-io) calc(2.2s + var(--dl, 0s)) infinite; }\r\n#shl-accueil .duo-home, #shl-accueil .duo-node { position: absolute; left: var(--x, 25%); top: var(--y, 56%); transform: translate(-50%, -50%); }\r\n#shl-accueil .duo-home { left: max(76px, 23%); display: grid; place-items: center; width: 124px; height: 72px; background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-sm); --iw: 100px; --ih: 44px; }\r\n#shl-accueil .duo-fit { --s: min(calc(var(--iw) \/ var(--bw)), calc(var(--ih) \/ var(--bh))); overflow: hidden; }\r\n#shl-accueil .duo .duo-fit > img { position: absolute; border-radius: 0; max-width: none; width: calc(500 * var(--s)); height: calc(500 * var(--s)); left: calc(50% - (var(--bx) + var(--bw) \/ 2) * var(--s)); top: calc(50% - (var(--by) + var(--bh) \/ 2) * var(--s)); }\r\n#shl-accueil .duo-name { padding: 8px; font-size: 13px; font-weight: 800; line-height: 1.15; letter-spacing: -.01em; text-align: center; color: color-mix(in srgb, var(--c) 72%, var(--ink)); }\r\n#shl-accueil .duo-node { width: 52px; height: 52px; padding: 4px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1.5px var(--c), 0 0 0 6px color-mix(in srgb, var(--c) 14%, transparent), 0 6px 14px -8px rgba(22, 38, 44, .35); transition: box-shadow .5s var(--ease) calc(.8s + var(--dl, 0s)); }\r\n#shl-accueil .duo-node > svg, #shl-accueil .duo-node > img { width: 100%; height: 100%; border-radius: 50%; transition: filter .6s var(--ease) calc(.8s + var(--dl, 0s)), opacity .6s var(--ease) calc(.8s + var(--dl, 0s)); }\r\n#shl-accueil .duo-node.is-sm { width: 40px; height: 40px; padding: 3px; }\r\n#shl-accueil .duo-node.is-tile { --iw: 84px; --ih: 30px; width: 104px; height: 48px; padding: 0; border-radius: 14px; }\r\n#shl-accueil .duo-badge { position: absolute; width: 20px; height: 20px; border-radius: 50%; box-shadow: 0 0 0 2px #fff; transform: translate(-50%, -50%); transition: opacity .4s var(--ease) calc(.9s + var(--dl, 0s)); }\r\n#shl-accueil .duo-hub { color: var(--accent); }\r\n#shl-accueil .duo-hub svg { fill: currentColor; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }\r\n#shl-accueil .duo-seal { position: absolute; left: 12px; top: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px 4px 4px; background: #fff; border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--shadow-sm); font: 500 11.5px\/1 var(--mono); color: var(--ink); white-space: nowrap; transform-origin: left top; transition: opacity .38s var(--ease) 1.35s, transform .5s var(--ease) 1.35s; }\r\n#shl-accueil .duo-seal svg { width: 18px; height: 18px; border-radius: 50%; }\r\n#shl-accueil.js .duo:not(.is-play) .duo-line { stroke-dashoffset: 1; transition: none; }\r\n#shl-accueil.js .duo:not(.is-play) .duo-node { box-shadow: 0 0 0 1px var(--line), 0 6px 14px -8px rgba(22, 38, 44, .35); transition: none; }\r\n#shl-accueil.js .duo:not(.is-play) .duo-node > svg, #shl-accueil.js .duo:not(.is-play) .duo-node > img { filter: grayscale(1); opacity: .45; transition: none; }\r\n#shl-accueil.js .duo:not(.is-play) .duo-badge { opacity: 0; transition: none; }\r\n#shl-accueil.js .duo:not(.is-play) .duo-seal { opacity: 0; transform: scale(.86); transition: none; }\r\n@keyframes duo-spark{0% { stroke-dashoffset: .05; opacity: 0; } 4% { opacity: 1; } 34% { stroke-dashoffset: -1; opacity: 1; } 38%, 100% { stroke-dashoffset: -1; opacity: 0; }}#shl-accueil .project .theme { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: color-mix(in srgb, var(--c) 72%, #000); }\r\n#shl-accueil .project .theme::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }\r\n#shl-accueil .project .place { margin-top: 20px; }\r\n#shl-accueil .project h3 { margin-top: 8px; font-size: 20px; font-weight: 700; letter-spacing: -.02em; line-height: 1.3; }\r\n#shl-accueil .project h3 + p { flex: 1; margin-top: 12px; font-size: 14.5px; line-height: 1.65; color: var(--ink-2); }\r\n#shl-accueil .project .fund { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; margin-top: 22px; padding: 6px 12px; background: var(--canvas); border: 1px solid var(--line); border-radius: 999px; font-size: 12.5px; font-weight: 600; }\r\n#shl-accueil .project .fund svg { width: 14px; height: 14px; fill: none; stroke: var(--t5); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }\r\n#shl-accueil .quotes { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 20px; }\r\n#shl-accueil .quote { display: flex; flex-direction: column; padding: 32px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); }\r\n#shl-accueil .quote:nth-child(1) { --c: var(--t2); --cx: var(--x2); }\r\n#shl-accueil .quote:nth-child(2) { --c: var(--t8); --cx: var(--x8); }\r\n#shl-accueil .quote:nth-child(3) { --c: var(--t7); --cx: var(--x7); }\r\n#shl-accueil .quote.feature { position: relative; overflow: hidden; }\r\n#shl-accueil .quote.feature::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--spectrum); }\r\n#shl-accueil .quote .mark { height: 34px; font: 800 64px\/.9 var(--font); color: var(--c); }\r\n#shl-accueil .quote blockquote { flex: 1; margin-top: 14px; font-size: 15.5px; line-height: 1.7; color: var(--ink); }\r\n#shl-accueil .quote.feature blockquote { font-size: 20px; line-height: 1.5; font-weight: 600; letter-spacing: -.012em; }\r\n#shl-accueil .quote figcaption { display: flex; align-items: center; gap: 12px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line-2); }\r\n#shl-accueil .ini { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 50%; background: color-mix(in srgb, var(--c, var(--accent)) 13%, #fff); color: color-mix(in srgb, var(--c, var(--accent)) 78%, #000); font-size: 13px; font-weight: 800; }\r\n#shl-accueil .quote .face { flex: none; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #fff, 0 0 0 3px color-mix(in srgb, var(--c) 45%, #fff); }\r\n#shl-accueil .quote figcaption b { display: block; font-size: 14.5px; font-weight: 700; }\r\n#shl-accueil .quote .role { display: block; font-size: 13px; font-weight: 600; color: var(--cx); }\r\n#shl-accueil .trust { --lift: 0 0 0 1px rgba(22, 38, 44, .06), 0 1px 2px rgba(22, 38, 44, .05), 0 6px 12px -6px rgba(22, 38, 44, .12), 0 18px 32px -18px rgba(22, 38, 44, .2);\r\n  --lift-hi: 0 0 0 1px rgba(22, 38, 44, .07), 0 2px 4px rgba(22, 38, 44, .06), 0 14px 24px -10px rgba(22, 38, 44, .22), 0 34px 50px -24px rgba(22, 38, 44, .32);\r\n  --roll: cubic-bezier(.76, 0, .24, 1); }\r\n#shl-accueil .trust .sc-cap, #shl-accueil .trust .sc-count { position: absolute; top: 14px; z-index: 2; font-size: 12.5px; font-weight: 600; line-height: 1.3; transition: color .5s, opacity .4s var(--ease); }\r\n#shl-accueil .trust .sc-cap { left: 16px; display: flex; align-items: center; gap: 9px; color: var(--kx, var(--cx)); }\r\n#shl-accueil .trust .sc-cap i { position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--k, var(--c)); transition: background-color .5s; }\r\n#shl-accueil .trust .sc-cap i::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid var(--k, var(--c)); opacity: 0; animation: sc-ping 2.2s var(--ease) infinite; }\r\n#shl-accueil .trust .sc-cap span { transition: opacity .25s, filter .25s; }\r\n#shl-accueil .trust .sc-cap span.is-swap { opacity: 0; filter: blur(4px); }\r\n#shl-accueil .trust .sc-count { right: 16px; color: var(--muted); font-variant-numeric: tabular-nums; }\r\n#shl-accueil .trust .sc-timer { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; visibility: hidden; pointer-events: none; }\r\n#shl-accueil .trust .is-auto .sc-timer.is-run { animation: sc-run var(--hold, 3s) linear both; }\r\n#shl-accueil .trust .is-hold .sc-timer.is-run { animation-play-state: paused; }\r\n@media (hover: hover){#shl-accueil .trust .is-auto:hover .sc-timer.is-run { animation-play-state: paused; }\r\n}@keyframes sc-ping{0% { transform: scale(.4); opacity: .8; } 100% { transform: scale(1.9); opacity: 0; }}@keyframes sc-run{from { transform: scaleX(0); } to { transform: none; }}#shl-accueil .trust svg.ic { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }\r\n#shl-accueil .trust [data-k=\"pub\"] { --k: var(--t7); --kx: var(--x7); }\r\n#shl-accueil .trust [data-k=\"eu\"] { --k: var(--t8); --kx: var(--x8); }\r\n#shl-accueil .trust [data-k=\"pri\"] { --k: var(--t3); --kx: var(--x3); }\r\n@media (min-width: 1061px){#shl-accueil .trust { grid-template-columns: repeat(12, minmax(0, 1fr)); }\r\n#shl-accueil .trust > .bc:nth-child(1) { grid-column: span 7; }\r\n#shl-accueil .trust > .bc:nth-child(2) { grid-column: span 5; }\r\n#shl-accueil .trust > .bc-wide { display: grid; grid-column: 1 \/ -1; grid-row: auto; grid-template-rows: none; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; }\r\n#shl-accueil .bc-wide .bc-head { order: -1; padding: 32px 40px; }\r\n#shl-accueil .bc-wide .bc-stage { min-height: 250px; margin: 10px; }\r\n}#shl-accueil .sc-ros { padding: 20px 24px; container-type: inline-size; }\r\n#shl-accueil .ros { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); align-items: center; gap: 30px; width: 100%; }\r\n#shl-accueil .ros-side { display: grid; justify-items: start; min-width: 0; }\r\n#shl-accueil .ros-num { display: flex; font-size: 76px; font-weight: 800; line-height: 1; letter-spacing: -.05em; color: var(--ink); }\r\n#shl-accueil .odo { position: relative; display: block; height: 1em; overflow: hidden; transition: width 2.4s cubic-bezier(.2, .9, .1, 1) var(--od, 0ms); -webkit-mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent); }\r\n#shl-accueil .odo > i { display: block; font-style: normal; visibility: hidden; }\r\n#shl-accueil .odo > span { position: absolute; left: 0; right: 0; top: 0; text-align: center; transition: transform 2.4s cubic-bezier(.2, .9, .1, 1) var(--od, 0ms); }\r\n#shl-accueil .odo > span > span { display: block; height: 1em; }\r\n#shl-accueil .ros-cap { max-width: 180px; margin-top: 12px; font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--ink-2); }\r\n#shl-accueil .ros-roll { height: 264px; overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent); }\r\n#shl-accueil .ros.is-loop .ros-track { animation: ros-up var(--dur, 64s) linear infinite; }\r\n@keyframes ros-up{to { transform: translateY(-50%); }}#shl-accueil .ros-list li { display: flex; align-items: center; gap: 14px; padding: 8px 2px; }\r\n#shl-accueil .ros-logo { position: relative; display: flex; align-items: center; justify-content: center; flex: none; width: 72px; height: 44px; border-radius: 11px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); --iw: 60px; --ih: 32px; }\r\n#shl-accueil .ros-logo > img { width: auto; height: auto; max-width: var(--iw); max-height: var(--ih); }\r\n#shl-accueil .ros-logo.duo-fit > img { position: absolute; max-width: none; max-height: none; width: calc(500 * var(--s)); height: calc(500 * var(--s)); left: calc(50% - (var(--bx) + var(--bw) \/ 2) * var(--s)); top: calc(50% - (var(--by) + var(--bh) \/ 2) * var(--s)); }\r\n#shl-accueil .ros-tx { display: grid; gap: 1px; min-width: 0; }\r\n#shl-accueil .ros-tx b { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 14.5px; font-weight: 700; line-height: 1.3; letter-spacing: -.012em; color: var(--ink); text-wrap: balance; }\r\n#shl-accueil .ros-tx small { overflow: hidden; font-size: 12px; font-weight: 600; line-height: 1.45; color: var(--muted); white-space: nowrap; text-overflow: ellipsis; }\r\n#shl-accueil .ros-tx small em, #shl-accueil .ros-tx small i { font-style: normal; }\r\n#shl-accueil .ros-tx small em { color: var(--ink-2); }\r\n@container (max-width: 540px){#shl-accueil .ros { grid-template-columns: minmax(0, 1fr); gap: 14px; }\r\n#shl-accueil .ros-side { grid-template-columns: auto minmax(0, 1fr); align-items: end; column-gap: 14px; }\r\n#shl-accueil .ros-num { font-size: 56px; }\r\n#shl-accueil .ros-cap { margin: 0 0 4px; }\r\n#shl-accueil .ros-roll { height: 300px; }\r\n#shl-accueil .ros-logo { width: 60px; height: 40px; border-radius: 10px; --iw: 50px; --ih: 28px; }\r\n#shl-accueil .ros-tx small { white-space: normal; }\r\n}#shl-accueil .sc-anc { --hold: 2.8s; padding: 46px 18px 18px; container-type: inline-size; }\r\n#shl-accueil .sc-anc .anc-tag, #shl-accueil .sc-anc .anc-fam li, #shl-accueil .sc-anc .anc-core { cursor: pointer; }\r\n#shl-accueil .anc { position: relative; display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: center; gap: 30px; width: 100%; }\r\n#shl-accueil .anc > .anc-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }\r\n#shl-accueil .anc-wire { fill: none; stroke: #d9e1db; stroke-width: 1.25; }\r\n#shl-accueil .anc-comet { fill: none; stroke: var(--k); stroke-width: 2.4; stroke-linecap: round; }\r\n#shl-accueil .anc-head { fill: #fff; stroke: var(--k); stroke-width: 2; opacity: 0; filter: drop-shadow(0 0 4px var(--k)); }\r\n#shl-accueil .anc-hub { position: relative; z-index: 1; display: grid; justify-items: center; gap: 10px; text-align: center; }\r\n#shl-accueil .anc-hub > b { font-size: 12px; font-weight: 700; line-height: 1.25; color: var(--ink); }\r\n#shl-accueil .anc-core { position: relative; display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: #fff; box-shadow: var(--lift); }\r\n#shl-accueil .anc-core img { width: 54px; height: 54px; }\r\n#shl-accueil .anc-core::after { content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; }\r\n#shl-accueil .anc-core.is-beat::after { animation: anc-beat 1s var(--ease) both; }\r\n#shl-accueil .anc-core.is-beat { animation: anc-thump .6s var(--ease); }\r\n#shl-accueil .anc-rings { position: absolute; left: 50%; top: 36px; z-index: -1; }\r\n#shl-accueil .anc-rings i { position: absolute; left: calc(var(--r) * -1); top: calc(var(--r) * -1); width: calc(var(--r) * 2); height: calc(var(--r) * 2); border-radius: 50%; border: 1px solid #e6ebe6; }\r\n#shl-accueil .anc-rings i:nth-child(1) { --r: 52px; background: radial-gradient(closest-side, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0)); }\r\n#shl-accueil .anc-rings i:nth-child(2) { --r: 78px; border-style: dashed; border-color: #dce3dd; animation: anc-spin 60s linear infinite; }\r\n#shl-accueil .anc-rings i:nth-child(3) { --r: 106px; border-color: #eef1ec; }\r\n#shl-accueil .anc-fams { position: relative; z-index: 1; display: grid; gap: 14px; }\r\n#shl-accueil .anc-fam { display: grid; grid-template-columns: 86px minmax(0, 1fr); align-items: center; gap: 26px; transition: opacity .6s var(--ease); }\r\n#shl-accueil .anc-tag { position: relative; justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 999px; background: #fff; box-shadow: var(--lift); font-size: 11.5px; font-weight: 700; line-height: 18px; color: var(--kx); white-space: nowrap; transition: background-color .5s var(--ease), color .5s var(--ease), box-shadow .5s var(--ease); }\r\n#shl-accueil .anc-tag i { display: grid; place-items: center; width: 20px; height: 20px; overflow: hidden; border-radius: 50%; background: color-mix(in srgb, var(--k) 15%, #fff); color: var(--k); transition: background-color .5s var(--ease), color .5s var(--ease); }\r\n#shl-accueil .anc-tag .ic { width: 11px; height: 11px; }\r\n#shl-accueil .anc-tag i.is-flag svg { width: 20px; height: 20px; }\r\n#shl-accueil .anc-fam ul { display: grid; gap: 6px; min-width: 0; }\r\n#shl-accueil .anc-fam li { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 5px 10px 5px 7px; border-radius: 9px; background: #fff; box-shadow: var(--lift); font-size: 12px; font-weight: 600; line-height: 1.3; color: var(--ink); white-space: nowrap; transition: box-shadow .5s var(--ease), transform .5s var(--ease); }\r\n#shl-accueil .anc-logo { flex: none; display: grid; place-items: center; width: 38px; height: 18px; }\r\n#shl-accueil .anc-logo img { width: auto; height: auto; max-width: 100%; max-height: 100%; }\r\n#shl-accueil .anc-logo img.is-mark { width: 18px; height: 18px; max-width: none; object-fit: cover; object-position: left center; }\r\n#shl-accueil .anc-logo .is-flag { width: 21px; height: 14px; overflow: hidden; border-radius: 3px; box-shadow: 0 0 0 1px rgba(22, 38, 44, .1); }\r\n#shl-accueil .anc-fam li span { overflow: hidden; text-overflow: ellipsis; }\r\n#shl-accueil .anc-fam li.is-ping { box-shadow: 0 0 0 1.5px var(--k), 0 0 0 5px color-mix(in srgb, var(--k) 14%, transparent), 0 8px 16px -8px rgba(22, 38, 44, .25); }\r\n#shl-accueil .anc-fam.is-on .anc-tag { background: color-mix(in srgb, var(--k) 10%, #fff); box-shadow: 0 0 0 1.5px var(--k), 0 10px 20px -10px var(--k); }\r\n#shl-accueil .anc-fam.is-on .anc-tag i { background: var(--k); color: #fff; }\r\n#shl-accueil .sc-anc.has-focus .anc-fam:not(.is-on) { opacity: .5; }\r\n#shl-accueil .anc-hub, #shl-accueil .anc-tag, #shl-accueil .anc-fam li { transition-property: opacity, filter, transform, box-shadow, background-color, color; transition-duration: .7s; transition-timing-function: var(--ease); }\r\n#shl-accueil .anc-wire { transition: stroke-dashoffset 1s var(--ease-io) calc(.2s + var(--f, 0) * .16s); }\r\n#shl-accueil .anc-tag { transition-delay: calc(.55s + var(--f, 0) * .16s); }\r\n#shl-accueil .anc-fam li { transition-delay: calc(.85s + var(--f, 0) * .16s + var(--j, 0) * 60ms); }\r\n#shl-accueil .sc-anc.is-built .anc-tag, #shl-accueil .sc-anc.is-built .anc-fam li { transition-delay: 0s; }\r\n#shl-accueil .sc-anc.is-pre .anc-wire { stroke-dashoffset: calc(-1 * var(--L, 0px)); transition: none; }\r\n#shl-accueil .sc-anc.is-pre .anc-hub { opacity: 0; transform: scale(.9); filter: blur(4px); }\r\n#shl-accueil .sc-anc.is-pre .sc-count { opacity: 0; }\r\n#shl-accueil .sc-anc.is-pre .anc-tag, #shl-accueil .sc-anc.is-pre .anc-fam li { opacity: 0; transform: translateX(-6px); filter: blur(4px); transition-duration: 0s; }\r\n@keyframes anc-spin{to { transform: rotate(360deg); }}@keyframes anc-beat{from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--k, var(--t7)) 45%, transparent); } to { box-shadow: 0 0 0 26px transparent; }}@keyframes anc-thump{30% { transform: scale(1.06); }}@container (max-width: 430px){#shl-accueil .anc { grid-template-columns: 72px minmax(0, 1fr); gap: 22px; }\r\n#shl-accueil .anc-core { width: 60px; height: 60px; }\r\n#shl-accueil .anc-core img { width: 44px; height: 44px; }\r\n#shl-accueil .anc-rings { top: 30px; }\r\n#shl-accueil .anc-hub > b { font-size: 11px; }\r\n#shl-accueil .anc-fams { gap: 10px; }\r\n#shl-accueil .anc-fam { grid-template-columns: minmax(0, 1fr); gap: 6px; }\r\n#shl-accueil .anc-fam li { gap: 5px; font-size: 11.5px; padding: 5px 8px 5px 5px; }\r\n#shl-accueil .anc-logo { width: 26px; height: 16px; }\r\n#shl-accueil .anc-logo img.is-mark { width: 16px; height: 16px; }\r\n}#shl-accueil .sc-tra { --k: var(--t5); --kx: var(--x5); --hold: 1.1s; padding: 22px 26px; container-type: inline-size; }\r\n#shl-accueil .tra { position: relative; display: grid; gap: 12px; width: min(100%, 660px); --cw: 178px; }\r\n#shl-accueil .tra-glow { position: absolute; top: 18%; bottom: 18%; width: 34%; border-radius: 50%; filter: blur(36px); pointer-events: none; transition: opacity 1s var(--ease); }\r\n#shl-accueil .tra-glow.is-shl { left: 4%; background: #cfd9dd; opacity: calc(.7 - var(--p, 0) * .5); }\r\n#shl-accueil .tra-glow.is-you { right: 4%; background: var(--t5); opacity: calc(var(--p, 0) * .22); }\r\n#shl-accueil .tra-head, #shl-accueil .tra-row { display: grid; grid-template-columns: var(--cw) minmax(0, 1fr) var(--cw); align-items: center; }\r\n#shl-accueil .tra-head { margin-bottom: 4px; }\r\n#shl-accueil .tra-who { display: flex; align-items: center; gap: 10px; min-width: 0; transition: opacity .8s var(--ease); }\r\n#shl-accueil .tra-who p { min-width: 0; }\r\n#shl-accueil .tra-who p > b { display: block; font-size: 12.5px; font-weight: 700; line-height: 1.2; color: var(--ink); }\r\n#shl-accueil .tra-who small { display: grid; margin-top: 2px; font-size: 11.5px; font-weight: 600; line-height: 1.3; }\r\n#shl-accueil .tra-who small span { grid-area: 1 \/ 1; transition: opacity .5s var(--ease), filter .5s var(--ease); }\r\n#shl-accueil .tra-who small span:last-child, #shl-accueil .sc-tra.is-done .tra-who small span:first-child { opacity: 0; filter: blur(3px); }\r\n#shl-accueil .sc-tra.is-done .tra-who small span:last-child { opacity: 1; filter: none; }\r\n#shl-accueil .tra-who.is-shl small { color: var(--muted); }\r\n#shl-accueil .tra-who.is-you small { color: var(--x5); }\r\n#shl-accueil .sc-tra.is-done .tra-who.is-shl { opacity: .5; }\r\n#shl-accueil .tra-av { position: relative; display: grid; place-items: center; flex: none; width: 36px; height: 36px; background: #fff; box-shadow: var(--lift); }\r\n#shl-accueil .tra-who.is-shl .tra-av { border-radius: 10px; }\r\n#shl-accueil .tra-who.is-shl .tra-av img { width: 30px; height: 30px; }\r\n#shl-accueil .tra-who.is-you .tra-av { border-radius: 50%; background: color-mix(in srgb, var(--t5) 14%, #fff); color: var(--x5); }\r\n#shl-accueil .tra-who.is-you .tra-av .ic { width: 17px; height: 17px; }\r\n#shl-accueil .tra-meter { display: grid; gap: 7px; padding: 0 24px; }\r\n#shl-accueil .tra-meter p { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }\r\n#shl-accueil .tra-meter p span { font: 500 10.5px\/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }\r\n#shl-accueil .tra-meter p b { font-size: 13px; font-weight: 800; letter-spacing: -.01em; color: var(--ink); font-variant-numeric: tabular-nums; }\r\n#shl-accueil .tra-bar { display: block; height: 6px; overflow: hidden; border-radius: 3px; background: var(--sunk); box-shadow: inset 0 0 0 1px var(--line-2); }\r\n#shl-accueil .tra-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--t5) 55%, #fff), var(--t5)); transform: scaleX(var(--p, 0)); transform-origin: left; transition: transform .9s var(--ease); }\r\n#shl-accueil .tra-rows { display: grid; gap: 6px; }\r\n#shl-accueil .tra-row { position: relative; height: 34px; }\r\n#shl-accueil .tra-slot { height: 100%; border: 1px dashed #d3dbd5; border-radius: 10px; }\r\n#shl-accueil .tra-lane { position: relative; height: 0; margin: 0 12px; border-top: 1.5px dashed #d8dfda; }\r\n#shl-accueil .tra-lane::after { content: ''; position: absolute; left: 0; right: 0; top: -1.5px; height: 1.5px; background: linear-gradient(90deg, #b9c6c9, var(--t5)); transform: scaleX(0); transform-origin: left; transition: transform 1s var(--roll); }\r\n#shl-accueil .tra-key { position: absolute; left: 0; top: 0; z-index: 1; width: var(--cw); height: 100%; transition: transform 1s var(--roll); }\r\n#shl-accueil .tra-row.is-moved .tra-key { transform: translateX(var(--dx, 0px)); }\r\n#shl-accueil .tra-row.is-moved .tra-lane::after { transform: scaleX(1); }\r\n#shl-accueil:not(.js) .tra-row.is-moved .tra-key { left: auto; right: 0; }\r\n#shl-accueil .tra-row.no-tr *, #shl-accueil .tra-row.no-tr *::after { transition: none !important; }\r\n#shl-accueil .tra-chip { position: relative; display: flex; align-items: center; gap: 9px; height: 100%; padding: 0 12px 0 5px; border-radius: 10px; background: #fff; box-shadow: var(--lift); font-size: 12.5px; font-weight: 700; line-height: 1; color: var(--ink); white-space: nowrap; transition: box-shadow .5s var(--ease); }\r\n#shl-accueil .tra-chip > i { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 7px; background: var(--sunk); color: var(--ink-2); transition: background-color .5s var(--ease), color .5s var(--ease); }\r\n#shl-accueil .tra-chip .ic { width: 13px; height: 13px; }\r\n#shl-accueil .tra-row.is-next .tra-chip { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--t5) 45%, transparent), 0 1px 2px rgba(22, 38, 44, .05), 0 10px 20px -10px color-mix(in srgb, var(--t5) 55%, transparent); }\r\n#shl-accueil .tra-row.is-flying .tra-chip { animation: tra-hop 1s var(--roll); }\r\n#shl-accueil .tra-row.is-yours .tra-chip { box-shadow: 0 0 0 1px color-mix(in srgb, var(--t5) 30%, transparent), 0 1px 2px rgba(22, 38, 44, .05), 0 6px 12px -6px rgba(22, 38, 44, .12), 0 18px 32px -18px color-mix(in srgb, var(--t5) 45%, transparent); }\r\n#shl-accueil .tra-row.is-yours .tra-chip > i { background: color-mix(in srgb, var(--t5) 16%, #fff); color: var(--x5); }\r\n#shl-accueil .tra-ok { position: absolute; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--t5); color: #fff; box-shadow: 0 0 0 2px #fff; transform: scale(0); transition: transform .45s cubic-bezier(.34, 1.56, .64, 1); }\r\n#shl-accueil .tra-ok .ic { width: 9px; height: 9px; stroke-width: 3.2; }\r\n#shl-accueil .tra-chip .tra-ok { right: -5px; top: -5px; }\r\n#shl-accueil .tra-row.is-yours .tra-ok, #shl-accueil .sc-tra.is-done .tra-av .tra-ok { transform: scale(1); }\r\n#shl-accueil .tra-av .tra-ok { right: -4px; bottom: -4px; }\r\n#shl-accueil .tra-note { --hold: 3.6s; position: relative; justify-self: center; display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; padding: 6px 12px 6px 7px; border-radius: 999px; background: #fff; box-shadow: var(--lift); font-size: 12px; font-weight: 700; line-height: 1.3; color: var(--x5); text-align: left; opacity: 0; transform: translateY(6px); filter: blur(4px); transition: opacity .6s var(--ease), transform .6s var(--ease), filter .6s var(--ease); }\r\n#shl-accueil .tra-note i { display: grid; place-items: center; flex: none; width: 18px; height: 18px; border-radius: 50%; background: color-mix(in srgb, var(--t5) 16%, #fff); }\r\n#shl-accueil .tra-note .ic { width: 10px; height: 10px; stroke-width: 3; }\r\n#shl-accueil .sc-tra.is-done .tra-note { opacity: 1; transform: none; filter: none; }\r\n#shl-accueil .tra-rows, #shl-accueil .tra-meter { transition: opacity .45s var(--ease); }\r\n#shl-accueil .sc-tra.is-fade .tra-rows, #shl-accueil .sc-tra.is-fade .tra-meter, #shl-accueil .sc-tra.is-fade .tra-note { opacity: 0; }\r\n@keyframes tra-hop{45% { transform: translateY(-7px) scale(1.05) rotate(-1.2deg); box-shadow: var(--lift-hi); }}@container (max-width: 560px){#shl-accueil .tra-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 14px; }\r\n#shl-accueil .tra-head .tra-who.is-you { grid-column: 2; grid-row: 1; }\r\n#shl-accueil .tra-meter { grid-column: 1 \/ -1; padding: 0; }\r\n#shl-accueil .tra-row { grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr); }\r\n#shl-accueil .tra-lane { margin: 0 6px; }\r\n#shl-accueil .tra-key { width: calc(50% - 14px); }\r\n}@container (max-width: 380px){#shl-accueil .tra-who { gap: 8px; }\r\n#shl-accueil .tra-av { width: 30px; height: 30px; }\r\n#shl-accueil .tra-who.is-shl .tra-av img { width: 25px; height: 25px; }\r\n#shl-accueil .tra-who p > b { font-size: 12px; }\r\n#shl-accueil .tra-chip { gap: 7px; padding-right: 8px; font-size: 12px; }\r\n#shl-accueil .tra-chip > i { width: 22px; height: 22px; }\r\n}#shl-accueil .studio { overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow); }\r\n#shl-accueil .studio-nav { position: relative; padding: 8px; background: var(--canvas); border-bottom: 1px solid var(--line); }\r\n#shl-accueil .studio-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }\r\n#shl-accueil .fmt-thumb { position: absolute; top: 0; left: 0; width: 0; height: 0; border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgba(14, 27, 46, .06), 0 10px 24px -12px rgba(14, 27, 46, .24); opacity: 0; transition: transform .6s var(--ease), width .6s var(--ease), height .6s var(--ease), opacity .3s; }\r\n#shl-accueil.js .fmt-thumb { opacity: 1; }\r\n#shl-accueil .fmt-tab { --c: var(--accent); --cx: var(--accent); position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; padding: 14px 18px 17px; overflow: hidden; border: 0; border-radius: 14px; background: transparent; text-align: left; cursor: pointer; transition: background-color .3s; }\r\n#shl-accueil .fmt-tab:hover { background: rgba(255, 255, 255, .6); }\r\n#shl-accueil .fmt-tab[aria-selected=\"true\"] { background: transparent; }\r\n#shl-accueil:not(.js) .fmt-tab[aria-selected=\"true\"] { background: #fff; }\r\n#shl-accueil .fmt-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; }\r\n#shl-accueil .fmt-n { font: 500 12px\/1 var(--mono); letter-spacing: .1em; color: var(--cx); }\r\n#shl-accueil .fmt-name { margin-top: 10px; font-size: 16px; font-weight: 700; letter-spacing: -.015em; line-height: 1.25; color: var(--ink-2); transition: color .4s; }\r\n#shl-accueil .fmt-tab[aria-selected=\"true\"] .fmt-name { color: var(--ink); }\r\n#shl-accueil .fmt-meta { margin-top: 6px; font-size: 13px; line-height: 1.4; color: var(--muted); }\r\n#shl-accueil .scale { display: flex; gap: 3px; opacity: .45; transition: opacity .5s var(--ease); }\r\n#shl-accueil .scale i { width: 14px; height: 4px; border-radius: 2px; background: var(--line); }\r\n#shl-accueil .scale i.on { background: var(--c); }\r\n#shl-accueil .fmt-tab[aria-selected=\"true\"] .scale { opacity: 1; }\r\n#shl-accueil .fmt-timer { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--c); transform: scaleX(0); transform-origin: left; opacity: 0; transition: opacity .3s; }\r\n#shl-accueil .fmt-tab[aria-selected=\"true\"] .fmt-timer { opacity: 1; transform: none; }\r\n#shl-accueil .studio.is-auto .fmt-tab[aria-selected=\"true\"] .fmt-timer { animation: fmt-run var(--hold, 7s) linear both; }\r\n#shl-accueil .studio.is-auto:hover .fmt-tab[aria-selected=\"true\"] .fmt-timer, #shl-accueil .studio.is-hold .fmt-tab[aria-selected=\"true\"] .fmt-timer { animation-play-state: paused; }\r\n@keyframes fmt-run{from { transform: scaleX(0); } to { transform: none; }}#shl-accueil .studio-body { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }\r\n#shl-accueil .fmt-panels { display: grid; }\r\n#shl-accueil .fmt-panel { display: flex; flex-direction: column; justify-content: center; padding: clamp(28px, 3.4vw, 44px) clamp(24px, 3vw, 40px); }\r\n#shl-accueil.js .fmt-panel { grid-area: 1 \/ 1; }\r\n#shl-accueil.js .fmt-panel:not(.is-on) { visibility: hidden; transition: visibility 0s .3s; }\r\n#shl-accueil.js .fmt-panel > * { transition: opacity .6s var(--ease), transform .8s var(--ease), filter .6s var(--ease); transition-delay: calc(var(--k) * 70ms + 160ms); }\r\n#shl-accueil.js .fmt-panel:not(.is-on) > * { opacity: 0; transform: translateY(14px); filter: blur(6px); transition-duration: .25s; transition-delay: 0s; }\r\n#shl-accueil .fmt-panel h3 { margin-top: 16px; font-size: clamp(26px, 2.5vw, 34px); font-weight: 800; letter-spacing: -.032em; line-height: 1.1; text-wrap: balance; }\r\n#shl-accueil .fmt-panel h3 + p { max-width: 420px; margin-top: 16px; font-size: 16.5px; line-height: 1.65; color: var(--ink-2); }\r\n#shl-accueil .fmt-specs { margin-top: 30px; }\r\n#shl-accueil .fmt-specs div { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 15px 0; border-top: 1px solid var(--line); }\r\n#shl-accueil .fmt-specs dt { grid-column: 1; font: 500 11.5px\/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }\r\n#shl-accueil .fmt-specs dd { grid-column: 3; font-size: 16px; font-weight: 700; letter-spacing: -.01em; text-align: right; }\r\n#shl-accueil .fmt-specs dd.rhythm { grid-column: 2; display: flex; gap: 4px; min-width: 0; overflow: hidden; }\r\n#shl-accueil .rhythm i { flex: 0 1 22px; height: 8px; border-radius: 3px; border: 1.5px dashed color-mix(in srgb, var(--c) 55%, #fff); transform-origin: left; transition: transform .7s var(--ease); transition-delay: calc(var(--k) * 70ms + 260ms); }\r\n#shl-accueil .rhythm i.on { border: 0; background: var(--c); }\r\n#shl-accueil .rhythm.is-fine i { flex-basis: 11px; }\r\n#shl-accueil .rhythm.is-open i.on:nth-child(3) { opacity: .7; }\r\n#shl-accueil .rhythm.is-open i.on:nth-child(4) { opacity: .42; }\r\n#shl-accueil .rhythm.is-open i.on:nth-child(5) { opacity: .18; }\r\n#shl-accueil.js .fmt-panel:not(.is-on) .rhythm i { transform: scaleX(0); transition-delay: 0s; }\r\n#shl-accueil .studio[data-fmt=\"0\"] { --c: var(--t1); --cx: var(--x1); }\r\n#shl-accueil .studio[data-fmt=\"1\"] { --c: var(--t3); --cx: var(--x3); }\r\n#shl-accueil .studio[data-fmt=\"2\"] { --c: var(--t5); --cx: var(--x5); }\r\n#shl-accueil .studio[data-fmt=\"3\"] { --c: var(--t9); --cx: var(--x9); }\r\n#shl-accueil .stage-col { display: flex; flex-direction: column; min-width: 0; margin: 0; padding: 10px 10px 0; }\r\n#shl-accueil .stage { position: relative; flex: 1; min-height: clamp(340px, 28vw, 400px); overflow: hidden; background: var(--canvas); border: 1px solid var(--line-2); border-radius: 14px; }\r\n#shl-accueil .stage::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle, #e1e7e2 1px, transparent 1.5px) 0 0 \/ 14px 14px; -webkit-mask-image: radial-gradient(closest-side, #000, transparent); mask-image: radial-gradient(closest-side, #000, transparent); pointer-events: none; }\r\n#shl-accueil .stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }\r\n#shl-accueil .stage-cap, #shl-accueil .stage-fig { position: absolute; top: 14px; font-size: 12.5px; font-weight: 600; line-height: 1.3; }\r\n#shl-accueil .stage-cap { left: 16px; display: flex; align-items: center; gap: 9px; color: var(--cx); transition: color .5s; }\r\n#shl-accueil .stage-cap i { position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--c); transition: background-color .5s; }\r\n#shl-accueil .stage-cap i::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid var(--c); opacity: 0; animation: stage-ping 2.2s var(--ease) infinite; }\r\n@keyframes stage-ping{0% { transform: scale(.4); opacity: .8; } 100% { transform: scale(1.9); opacity: 0; }}#shl-accueil .stage-cap span { transition: opacity .25s, filter .25s; }\r\n#shl-accueil .stage-cap span.is-swap { opacity: 0; filter: blur(4px); }\r\n#shl-accueil .stage-fig { right: 16px; color: var(--muted); font-variant-numeric: tabular-nums; }\r\n#shl-accueil .stage-fig b { font-weight: 600; color: var(--ink-2); }\r\n#shl-accueil .stage-key { display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 14px 10px 16px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }\r\n#shl-accueil .stage-key li { display: inline-flex; align-items: center; gap: 8px; transition: opacity .4s var(--ease); }\r\n#shl-accueil .stage-key i { flex: none; width: 9px; height: 9px; border-radius: 50%; }\r\n#shl-accueil .k-part { background: conic-gradient(var(--t1) 0 25%, var(--t5) 0 50%, var(--t7) 0 75%, var(--t9) 0); }\r\n#shl-accueil .k-shl { background: var(--ink); box-shadow: inset 0 0 0 2.5px var(--ink), inset 0 0 0 4.5px #fff; }\r\n#shl-accueil .k-mate { border: 1.5px solid var(--x9); }\r\n#shl-accueil .studio:not([data-fmt=\"3\"]) .k-only { opacity: 0; }\r\n#shl-accueil .formats-cta { position: relative; isolation: isolate; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px 40px; margin-top: 20px; padding: clamp(28px, 3.2vw, 40px) clamp(24px, 3.6vw, 48px); overflow: hidden; background: var(--ink); color: #fff; border-radius: var(--r-xl); box-shadow: 0 1px 2px rgba(22, 38, 44, .2), 0 30px 60px -36px rgba(22, 38, 44, .7); }\r\n#shl-accueil .cta-threads { position: absolute; z-index: -1; top: 0; right: 0; width: 72%; height: 100%; overflow: visible; -webkit-mask-image: linear-gradient(90deg, transparent, #000 55%); mask-image: linear-gradient(90deg, transparent, #000 55%); }\r\n#shl-accueil .cta-threads use { fill: none; stroke: var(--c); stroke-width: 1.5; stroke-linecap: round; opacity: .8; }\r\n#shl-accueil .cta-threads path { vector-effect: non-scaling-stroke; }\r\n#shl-accueil .cta-bloom { transform-origin: 50% 50%; transform-box: view-box; transition: transform 1.8s var(--ease) .25s, opacity 1.2s var(--ease) .25s; }\r\n#shl-accueil.js .formats-cta:not(.is-in) .cta-bloom { transform: scaleY(.04); opacity: 0; }\r\n#shl-accueil .cta-flow { animation: cta-flow 16s linear infinite; }\r\n@keyframes cta-flow{to { transform: translateX(-400px); }}#shl-accueil .cta-copy { max-width: 600px; }\r\n#shl-accueil .cta-kicker { font: 500 11.5px\/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .66); }\r\n#shl-accueil .cta-text { margin-top: 12px; font-size: clamp(19px, 1.7vw, 24px); font-weight: 700; line-height: 1.3; letter-spacing: -.02em; text-wrap: balance; }\r\n#shl-accueil .btn-light { background: #fff; color: var(--ink); box-shadow: 0 12px 28px -14px rgba(0, 0, 0, .6); }\r\n#shl-accueil .btn-light:hover { box-shadow: 0 0 0 5px rgba(255, 255, 255, .16), 0 12px 28px -14px rgba(0, 0, 0, .6); }\r\n#shl-accueil .hub { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 88px); align-items: center; }\r\n#shl-accueil .hub .btn { margin-top: 32px; }\r\n#shl-accueil .res { overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: 0 1px 2px rgba(22, 38, 44, .04), 0 40px 80px -44px rgba(22, 38, 44, .32); transition: opacity 1s var(--ease), transform 1.2s var(--ease); }\r\n#shl-accueil.js .res:not(.is-in) { opacity: 0; transform: translateY(24px); }\r\n#shl-accueil .res-stage { position: relative; margin: 10px 10px 0; padding: 64px clamp(16px, 6%, 48px) 36px; overflow: hidden; background: var(--canvas); border: 1px solid var(--line-2); border-radius: 14px; }\r\n#shl-accueil .res-stage::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle, #e1e7e2 1px, transparent 1.5px) 0 0 \/ 14px 14px; -webkit-mask-image: radial-gradient(closest-side, #000, transparent); mask-image: radial-gradient(closest-side, #000, transparent); pointer-events: none; }\r\n#shl-accueil .res-deck { position: relative; display: grid; max-width: 480px; margin: 0 auto; }\r\n#shl-accueil .res-card { --p: 0; grid-area: 1 \/ 1; position: relative; z-index: calc(10 - var(--p)); display: flex; flex-direction: column; min-width: 0; padding: 20px 22px 22px; border: 1px solid var(--line); border-radius: 16px; background: color-mix(in srgb, var(--k) 7%, #fff); box-shadow: 0 1px 2px rgba(22, 38, 44, .05), 0 22px 40px -26px rgba(22, 38, 44, .34); transform-origin: 50% 0; transform: translateY(calc(var(--p) * var(--gap, -16px))) scale(calc(1 - var(--p) * .05)); opacity: calc(1 - var(--p) * .16); transition: transform .9s var(--ease), opacity .9s var(--ease), background-color .9s var(--ease); }\r\n#shl-accueil .res-card.is-front { background: #fff; }\r\n#shl-accueil .res-card:not(.is-front) > * { visibility: hidden; }\r\n@media (hover: hover){#shl-accueil .res-stage:hover { --gap: -21px; }\r\n}#shl-accueil .res-card.is-out { z-index: 20; opacity: 0; transform: translateY(26px) scale(1.015); transition: transform .56s cubic-bezier(.4, 0, .2, 1), opacity .4s ease-in; }\r\n#shl-accueil .res-card.is-snap { opacity: 0; transition: none; }\r\n#shl-accueil .res-head, #shl-accueil .res-body { transition: opacity .38s var(--ease), filter .38s var(--ease); }\r\n#shl-accueil .res-body { transition-delay: .12s; }\r\n#shl-accueil.js .res.is-auto .res-card:not(.is-shown) > * { opacity: 0; filter: blur(3px); transition-duration: .16s; transition-delay: 0s; }\r\n#shl-accueil .res-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line-2); }\r\n#shl-accueil .res-kind { grid-column: 1 \/ -1; font: 500 11.5px\/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--kx); }\r\n#shl-accueil .res-title { margin-top: 6px; font-size: 18px; font-weight: 700; line-height: 1.25; letter-spacing: -.018em; color: var(--ink); }\r\n#shl-accueil .res-meta { padding-bottom: 2px; font-size: 12.5px; color: var(--muted); white-space: nowrap; }\r\n#shl-accueil .res-body { position: relative; flex: 1; margin-top: 18px; }\r\n#shl-accueil .par { display: flex; flex-direction: column; justify-content: center; }\r\n#shl-accueil .par-fig { position: relative; }\r\n#shl-accueil .par-art { width: 100%; height: auto; overflow: visible; color: var(--k); }\r\n#shl-accueil .par-floor { stroke: #dfe5e0; }\r\n#shl-accueil .par-drops path { stroke: #dfe5e0; stroke-dasharray: 2 3; transition: stroke .5s var(--ease); }\r\n#shl-accueil .par-drops path.is-on { stroke: color-mix(in srgb, var(--k) 50%, #fff); stroke-dasharray: none; }\r\n#shl-accueil .par-way { fill: none; stroke: #d3dbd6; stroke-width: 1.5; stroke-dasharray: 2 5; stroke-linecap: round; }\r\n#shl-accueil .par-trail { fill: none; stroke: var(--k); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; }\r\n#shl-accueil .par-nodes circle { fill: #fff; stroke: #cfd8d2; stroke-width: 1.5; transition: fill .45s var(--ease), stroke .45s var(--ease); }\r\n#shl-accueil .par-nodes circle.is-on { fill: var(--k); stroke: #fff; stroke-width: 2; }\r\n#shl-accueil .par-halo { fill: var(--k); opacity: .18; }\r\n#shl-accueil .par-dot { fill: var(--ink); stroke: #fff; stroke-width: 2.5; }\r\n#shl-accueil .par-axis { position: absolute; left: 0; top: 0; font-size: 11.5px; font-weight: 600; color: var(--muted); }\r\n#shl-accueil .par-caps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 10px; font-size: 12px; font-weight: 600; line-height: 1.3; text-align: center; color: var(--muted); }\r\n#shl-accueil .par-caps li { padding: 0 2px; transition: color .45s var(--ease); }\r\n#shl-accueil .par-caps b { display: block; margin-bottom: 2px; font: 500 11.5px\/1.3 var(--mono); color: var(--faint); transition: color .45s var(--ease); }\r\n#shl-accueil .par-caps li.is-on { color: var(--ink); }\r\n#shl-accueil .par-caps li.is-on b { color: var(--kx); }\r\n#shl-accueil .bud { display: grid; align-content: start; font-size: 13px; }\r\n#shl-accueil .bud-row { position: relative; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 78px; align-items: center; column-gap: 16px; height: 27px; }\r\n#shl-accueil .bud-row > span { overflow: hidden; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; color: var(--ink-2); }\r\n#shl-accueil .bud-row > i { width: var(--w); height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--k) 72%, #fff); transform-origin: left; transition: transform .7s var(--ease); }\r\n#shl-accueil .bud-row > b { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); transition: opacity .38s var(--ease), filter .38s var(--ease); }\r\n#shl-accueil .bud-th { height: 22px; }\r\n#shl-accueil .bud-th span { font-size: 11.5px; font-weight: 600; color: var(--muted); }\r\n#shl-accueil .bud-th span:last-child { text-align: right; }\r\n#shl-accueil .bud-total { height: 32px; margin-top: 5px; border-top: 1px solid var(--line); }\r\n#shl-accueil .bud-total > span { font-weight: 700; color: var(--ink); }\r\n#shl-accueil .bud-total > b { font-size: 14px; color: var(--kx); }\r\n#shl-accueil .bud-total > i { visibility: hidden; }\r\n#shl-accueil .bud-hl { position: absolute; left: -10px; right: -10px; top: 0; height: 27px; border-radius: 7px; background: color-mix(in srgb, var(--k) 12%, #fff); opacity: 0; transition: transform .5s var(--ease), opacity .35s var(--ease); }\r\n#shl-accueil .bud.is-hl .bud-hl { opacity: 1; }\r\n#shl-accueil.js .res.is-auto .bud-row:not(.is-on) > b { opacity: 0; filter: blur(3px); }\r\n#shl-accueil.js .res.is-auto .bud-row:not(.is-on) > i { transform: scaleX(0); }\r\n#shl-accueil .vei { display: grid; align-content: start; gap: 2px; }\r\n#shl-accueil .vei li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 14px; min-height: 44px; padding: 5px 12px; border: 1px solid transparent; border-radius: 10px; }\r\n#shl-accueil .vei li + li::before { content: ''; position: absolute; left: 12px; right: 12px; top: -2px; border-top: 1px solid var(--line-2); }\r\n#shl-accueil .vei span { min-width: 0; font-size: 13.5px; font-weight: 700; line-height: 1.25; color: var(--ink); }\r\n#shl-accueil .vei small { display: block; margin-top: 2px; overflow: hidden; font-size: 12px; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; color: var(--muted); }\r\n#shl-accueil .vei em { font-size: 12px; font-style: normal; font-weight: 600; color: var(--muted); }\r\n#shl-accueil .vei .vei-new { background: color-mix(in srgb, var(--k) 8%, #fff); border-color: color-mix(in srgb, var(--k) 30%, #fff); transition: background .5s var(--ease), border-color .5s var(--ease); }\r\n#shl-accueil .vei-new em { font-weight: 700; color: var(--kx); }\r\n#shl-accueil .vei-new > * { transition: opacity .38s var(--ease) .3s, filter .38s var(--ease) .3s; }\r\n#shl-accueil .vei-new > em { transition-delay: .7s; }\r\n#shl-accueil.js .res.is-auto .vei:not(.is-played) .vei-new { background: transparent; border-color: #d5ddd8; border-style: dashed; }\r\n#shl-accueil.js .res.is-auto .vei:not(.is-played) .vei-new > * { opacity: 0; filter: blur(3px); transition-delay: 0s; }\r\n#shl-accueil .cad { display: grid; grid-template-columns: minmax(84px, 1.25fr) repeat(3, minmax(0, 1fr)); gap: 5px; align-content: start; }\r\n#shl-accueil .cad-th { overflow: hidden; padding: 0 2px 1px; font-size: 11.5px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; color: var(--muted); }\r\n#shl-accueil .cad-rh { display: flex; align-items: center; padding-right: 6px; font-size: 12px; font-weight: 600; line-height: 1.25; color: var(--ink-2); }\r\n#shl-accueil .cad-c { display: grid; align-content: center; gap: 6px; height: 38px; padding: 0 9px; background: #fff; border: 1px solid var(--line); border-radius: 7px; transition: background .6s var(--ease), border-color .6s var(--ease); }\r\n#shl-accueil .cad-c i { height: 4px; border-radius: 2px; background: #d7dfda; transform-origin: left; transition: transform .55s var(--ease), background .6s var(--ease); }\r\n#shl-accueil .cad-c i:last-child { width: 58%; }\r\n#shl-accueil .cad-c:nth-child(4n + 3) i:first-child { width: 84%; }\r\n#shl-accueil .cad-c:nth-child(3n) i:last-child { width: 40%; }\r\n#shl-accueil .cad-c.is-hl { background: color-mix(in srgb, var(--k) 11%, #fff); border-color: color-mix(in srgb, var(--k) 48%, #fff); }\r\n#shl-accueil .cad-c.is-hl i { background: color-mix(in srgb, var(--k) 75%, #fff); }\r\n#shl-accueil .cad-c i + i { transition-delay: .09s; }\r\n#shl-accueil.js .res.is-auto .cad-c:not(.is-on) i { transform: scaleX(0); }\r\n#shl-accueil .res-key { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 26px; padding: 17px 20px 19px; font-size: 13px; font-weight: 600; line-height: 1.3; }\r\n#shl-accueil .res-key span { cursor: pointer; color: var(--muted); text-decoration: underline 2px transparent; text-underline-offset: 7px; transition: color .45s var(--ease), text-decoration-color .45s var(--ease); }\r\n#shl-accueil .res-key span.is-on { color: var(--kx); text-decoration-color: color-mix(in srgb, var(--k) 60%, #fff); }\r\n@media (hover: hover){#shl-accueil .res-key span:not(.is-on):hover { color: var(--ink); }\r\n}#shl-accueil .contact { padding: clamp(80px, 11vw, 144px) 0; border-top: 1px solid var(--line); }\r\n#shl-accueil .contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(40px, 6vw, 88px); align-items: start; }\r\n#shl-accueil .contact h2 { margin-top: 22px; font-size: clamp(30px, 3.6vw, 48px); line-height: 1.08; font-weight: 800; letter-spacing: -.032em; text-wrap: balance; }\r\n#shl-accueil .contact .sec-copy { margin-top: 22px; }\r\n#shl-accueil .person { display: flex; align-items: center; gap: 24px; max-width: 540px; margin-top: 36px; padding: 18px; background: var(--tint); border: 1px solid var(--line); border-radius: var(--r-lg); }\r\n#shl-accueil .person .ini { width: 48px; height: 48px; }\r\n#shl-accueil .person-photo { flex: none; width: 148px; height: 148px; border-radius: 14px; object-fit: cover; background: var(--sunk); box-shadow: 0 0 0 1px var(--line), var(--shadow-sm); }\r\n#shl-accueil .person b { display: block; font-size: 18px; font-weight: 700; }\r\n#shl-accueil .person > div > span { display: block; font-size: 13.5px; color: var(--muted); }\r\n#shl-accueil .person ul { display: grid; gap: 6px; margin-top: 12px; }\r\n#shl-accueil .person a { display: inline-flex; align-items: baseline; gap: 10px; font-size: 14.5px; font-weight: 600; transition: color .3s; }\r\n#shl-accueil .person a:hover { color: var(--accent); }\r\n#shl-accueil .person a i { width: 34px; font: 500 11.5px\/1 var(--mono); font-style: normal; color: var(--muted); }\r\n#shl-accueil .form { padding: clamp(24px, 3vw, 36px); background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow); }\r\n#shl-accueil .form h3 { font-size: 22px; font-weight: 700; letter-spacing: -.02em; }\r\n#shl-accueil .form > p { margin-top: 6px; font-size: 14px; color: var(--muted); }\r\n#shl-accueil .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 26px; }\r\n#shl-accueil .form-grid .full { grid-column: 1 \/ -1; }\r\n#shl-accueil .form label { display: block; margin-bottom: 7px; font-size: 13px; font-weight: 600; color: var(--ink-2); }\r\n#shl-accueil .form input, #shl-accueil .form select, #shl-accueil .form textarea { width: 100%; height: 46px; padding: 0 14px; background: var(--canvas); border: 1px solid var(--line); border-radius: 10px; transition: border-color .25s, box-shadow .25s, background-color .25s; }\r\n#shl-accueil .form textarea { height: 120px; padding: 12px 14px; resize: vertical; }\r\n#shl-accueil .form input:focus, #shl-accueil .form select:focus, #shl-accueil .form textarea:focus { outline: 0; background: #fff; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(31, 74, 77, .1); }\r\n#shl-accueil .form .btn { margin-top: 22px; }\r\n#shl-accueil .form-note { min-height: 1em; margin-top: 12px; font-size: 13.5px; color: var(--accent); }\r\n#shl-accueil .footer { position: relative; padding: 64px 0 32px; background: var(--tint); }\r\n#shl-accueil .footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--spectrum); }\r\n#shl-accueil .footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 40px; }\r\n#shl-accueil .footer-about { max-width: 380px; margin-top: 20px; font-size: 14px; line-height: 1.65; color: var(--muted); }\r\n#shl-accueil .footer-grid > :nth-child(2) h4 { color: var(--x7); }\r\n#shl-accueil .footer-grid > :nth-child(3) h4 { color: var(--x5); }\r\n#shl-accueil .footer-grid > :nth-child(4) h4 { color: var(--x1); }\r\n#shl-accueil .footer ul { display: grid; gap: 10px; margin-top: 18px; }\r\n#shl-accueil .footer li { font-size: 14.5px; font-weight: 600; color: var(--ink-2); }\r\n#shl-accueil .footer ul a { font-size: 14.5px; font-weight: 600; color: var(--ink-2); transition: color .3s; }\r\n#shl-accueil .footer ul a:hover, #shl-accueil .footer-bottom a:hover { color: var(--ink); }\r\n#shl-accueil .footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }\r\n@media (max-width: 1320px){#shl-accueil .header-row { gap: 18px; }\r\n#shl-accueil .main-nav a { padding-inline: 9px; }\r\n#shl-accueil .header-actions { gap: 18px; }\r\n}@media (max-width: 1180px){#shl-accueil .main-nav, #shl-accueil .header-actions { display: none; }\r\n#shl-accueil .menu-toggle { display: inline-flex; }\r\n}@media (max-width: 1060px){#shl-accueil .method, #shl-accueil .hub, #shl-accueil .contact-grid { grid-template-columns: minmax(0, 1fr); }\r\n#shl-accueil .atlas-over { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 0; padding: clamp(56px, 9vw, 80px) 0 clamp(44px, 7vw, 64px); }\r\n#shl-accueil .atlas-over > .atlas-canvas { position: relative; inset: auto; height: clamp(340px, 78vw, 620px); margin: 12px calc(-1 * var(--gut)) 4px; }\r\n#shl-accueil .atlas-over > .map-key { position: static; justify-content: flex-start; margin-top: 18px; }\r\n#shl-accueil .terr { grid-template-columns: minmax(0, 1fr); }\r\n#shl-accueil .terr-map { order: -1; }\r\n#shl-accueil .terr-stage { min-height: clamp(360px, 70vw, 520px); }\r\n#shl-accueil .hero-foot { flex-direction: column; align-items: flex-start; }\r\n#shl-accueil .hero-hands { height: clamp(300px, min(58vw, 100svh - 380px), 620px); }\r\n#shl-accueil .sec-head, #shl-accueil .ident-text, #shl-accueil .ident-body { grid-template-columns: minmax(0, 1fr); align-items: start; }\r\n#shl-accueil .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }\r\n#shl-accueil .method-sticky { position: static; }\r\n#shl-accueil .rail { display: none; }\r\n#shl-accueil .method.is-live .step { opacity: 1; }\r\n#shl-accueil .projects { grid-template-columns: repeat(2, minmax(0, 1fr)); }\r\n#shl-accueil .studio-body { grid-template-columns: minmax(0, 1fr); }\r\n#shl-accueil .fmt-panel h3 + p { max-width: 560px; }\r\n#shl-accueil .stage-col { padding-top: 0; }\r\n#shl-accueil .stage { min-height: 360px; }\r\n#shl-accueil .quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); }\r\n#shl-accueil .quote.feature { grid-column: 1 \/ -1; }\r\n#shl-accueil .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }\r\n}@media (max-width: 1060px){#shl-accueil .bento { grid-template-columns: minmax(0, 1fr); }\r\n#shl-accueil .bc { display: grid; grid-row: auto; grid-template-rows: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }\r\n#shl-accueil .bc-stage { margin: 10px; }\r\n}@media (max-width: 720px){#shl-accueil .hero-art { margin-top: 6px; }\r\n#shl-accueil .brand { --mh: 34px; }\r\n#shl-accueil .hero-hands { height: clamp(260px, min(100vw, 100svh - 400px), 420px); }\r\n#shl-accueil .fields, #shl-accueil .projects, #shl-accueil .quotes, #shl-accueil .form-grid, #shl-accueil .footer-grid { grid-template-columns: minmax(0, 1fr); }\r\n#shl-accueil .studio-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }\r\n#shl-accueil .fmt-tab { padding: 14px 14px 20px; }\r\n#shl-accueil .fmt-name { margin-top: 12px; font-size: 15px; }\r\n#shl-accueil .fmt-meta { font-size: 12.5px; }\r\n#shl-accueil .fmt-panel { padding: 26px 22px; }\r\n#shl-accueil .fmt-specs { padding-top: 24px; }\r\n#shl-accueil .fmt-specs div { grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; }\r\n#shl-accueil .stage { min-height: 290px; }\r\n#shl-accueil .stage-fig { display: none; }\r\n#shl-accueil .stage-key { gap: 6px 16px; }\r\n#shl-accueil .cta-threads { width: 100%; opacity: .5; }\r\n#shl-accueil .formats-cta .btn { width: 100%; justify-content: center; }\r\n#shl-accueil .partners, #shl-accueil .kinds { grid-template-columns: minmax(0, 1fr); gap: 16px; }\r\n#shl-accueil .logos { --gap: 44px; }\r\n#shl-accueil .logos img { height: 30px; }\r\n#shl-accueil .res-stage { padding: 52px 12px 26px; }\r\n#shl-accueil .res-card { padding: 17px 16px 18px; }\r\n#shl-accueil .res-meta, #shl-accueil .bud-row > i, #shl-accueil .bud-th span:nth-child(2) { display: none; }\r\n#shl-accueil .bud-row { grid-template-columns: minmax(0, 1fr) auto; }\r\n#shl-accueil .cad { grid-template-columns: minmax(84px, 1.2fr) repeat(2, minmax(0, 1fr)); }\r\n#shl-accueil .cad > :nth-child(4n) { display: none; }\r\n#shl-accueil .res-key { gap: 8px 18px; padding-inline: 14px; }\r\n#shl-accueil .step, #shl-accueil .quote { padding: 24px; }\r\n#shl-accueil .field { grid-template-columns: minmax(0, 1fr); padding: 22px 22px 24px; }\r\n#shl-accueil .field-icon { display: none; }\r\n#shl-accueil .terr-stage { min-height: 440px; }\r\n#shl-accueil .drom { left: 10px; right: 10px; top: auto; bottom: 10px; width: auto; height: 84px; grid-template-rows: none; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }\r\n#shl-accueil .drom li { padding-bottom: 6px; font: 600 10.5px\/1 var(--font); white-space: nowrap; }\r\n#shl-accueil .duo-home { left: max(60px, 20%); width: 104px; height: 62px; --iw: 84px; --ih: 36px; }\r\n#shl-accueil .duo-node { width: 44px; height: 44px; }\r\n#shl-accueil .duo-node.is-sm { width: 36px; height: 36px; }\r\n#shl-accueil .bento { grid-template-columns: minmax(0, 1fr); }\r\n#shl-accueil .bc { grid-template-columns: minmax(0, 1fr); }\r\n#shl-accueil .bc-head { padding: 22px 20px 26px; }\r\n#shl-accueil .bc-stage { min-height: 268px; margin: 10px 10px 0; }\r\n#shl-accueil .tools { grid-template-columns: minmax(0, 1fr); }\r\n#shl-accueil .person { flex-direction: column; align-items: flex-start; }\r\n#shl-accueil .person-photo { width: 120px; height: 120px; }\r\n}@media (prefers-reduced-motion: reduce){html:has(#shl-accueil) { scroll-behavior: auto; }\r\n#shl-accueil *, #shl-accueil *::before, #shl-accueil *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }\r\n#shl-accueil .logos { -webkit-mask-image: none; mask-image: none; }\r\n#shl-accueil .logos-set { animation: none; flex-wrap: wrap; justify-content: space-between; gap: 20px 36px; min-width: 0; width: 100%; }\r\n#shl-accueil .logos-set + .logos-set { display: none; }\r\n#shl-accueil .ros.is-loop .ros-track { animation-duration: var(--dur, 64s) !important; animation-iteration-count: infinite !important; }\r\n}<\/style>\r\n<div id=\"shl-accueil\">\r\n<script>document.getElementById('shl-accueil').classList.add('js')<\/script>\r\n<div class=\"intro\" data-intro aria-hidden=\"true\"><canvas><\/canvas><\/div>\r\n<svg class=\"sprite\" width=\"0\" height=\"0\" aria-hidden=\"true\" focusable=\"false\"><defs><symbol id=\"fl-pt\" viewbox=\"0 0 36 36\"><rect width=\"36\" height=\"36\" fill=\"#da291c\"\/><rect width=\"14.4\" height=\"36\" fill=\"#046a38\"\/><circle cx=\"14.4\" cy=\"18\" r=\"6.2\" fill=\"none\" stroke=\"#ffe900\" stroke-width=\"2.2\"\/><path d=\"M11.8 14.8h5.2v4.4a2.6 2.6 0 0 1-5.2 0z\" fill=\"#da291c\" stroke=\"#fff\"\/><\/symbol><symbol id=\"fl-es\" viewbox=\"0 0 36 36\"><rect width=\"36\" height=\"36\" fill=\"#aa151b\"\/><rect y=\"9\" width=\"36\" height=\"18\" fill=\"#f1bf00\"\/><\/symbol><symbol id=\"fl-eu\" viewbox=\"0 0 36 36\"><rect width=\"36\" height=\"36\" fill=\"#003399\"\/><path d=\"M27.40 16.15L27.84 17.39L29.16 17.43L28.11 18.23L28.49 19.50L27.40 18.75L26.31 19.50L26.69 18.23L25.64 17.43L26.96 17.39ZM26.14 20.85L26.58 22.09L27.90 22.13L26.85 22.93L27.23 24.20L26.14 23.45L25.05 24.20L25.43 22.93L24.38 22.13L25.70 22.09ZM22.70 24.29L23.14 25.53L24.46 25.57L23.41 26.37L23.79 27.64L22.70 26.89L21.61 27.64L21.99 26.37L20.94 25.57L22.26 25.53ZM18.00 25.55L18.44 26.79L19.76 26.83L18.71 27.63L19.09 28.90L18.00 28.15L16.91 28.90L17.29 27.63L16.24 26.83L17.56 26.79ZM13.30 24.29L13.74 25.53L15.06 25.57L14.01 26.37L14.39 27.64L13.30 26.89L12.21 27.64L12.59 26.37L11.54 25.57L12.86 25.53ZM9.86 20.85L10.30 22.09L11.62 22.13L10.57 22.93L10.95 24.20L9.86 23.45L8.77 24.20L9.15 22.93L8.10 22.13L9.42 22.09ZM8.60 16.15L9.04 17.39L10.36 17.43L9.31 18.23L9.69 19.50L8.60 18.75L7.51 19.50L7.89 18.23L6.84 17.43L8.16 17.39ZM9.86 11.45L10.30 12.69L11.62 12.73L10.57 13.53L10.95 14.80L9.86 14.05L8.77 14.80L9.15 13.53L8.10 12.73L9.42 12.69ZM13.30 8.01L13.74 9.25L15.06 9.29L14.01 10.09L14.39 11.36L13.30 10.61L12.21 11.36L12.59 10.09L11.54 9.29L12.86 9.25ZM18.00 6.75L18.44 7.99L19.76 8.03L18.71 8.83L19.09 10.10L18.00 9.35L16.91 10.10L17.29 8.83L16.24 8.03L17.56 7.99ZM22.70 8.01L23.14 9.25L24.46 9.29L23.41 10.09L23.79 11.36L22.70 10.61L21.61 11.36L21.99 10.09L20.94 9.29L22.26 9.25ZM26.14 11.45L26.58 12.69L27.90 12.73L26.85 13.53L27.23 14.80L26.14 14.05L25.05 14.80L25.43 13.53L24.38 12.73L25.70 12.69Z\" fill=\"#ffcc00\"\/><\/symbol><symbol id=\"fl-dk\" viewbox=\"0 0 36 36\"><rect width=\"36\" height=\"36\" fill=\"#c8102e\"\/><path d=\"M11 0h5v36h-5zM0 15.5h36v5H0z\" fill=\"#fff\"\/><\/symbol><symbol id=\"fl-fr\" viewbox=\"0 0 3 2\"><rect width=\"3\" height=\"2\" fill=\"#e1000f\"\/><rect width=\"2\" height=\"2\" fill=\"#fff\"\/><rect width=\"1\" height=\"2\" fill=\"#000091\"\/><\/symbol><symbol id=\"fl-pl\" viewbox=\"0 0 36 36\"><rect width=\"36\" height=\"36\" fill=\"#dc143c\"\/><rect width=\"36\" height=\"18\" fill=\"#fff\"\/><\/symbol><symbol id=\"fl-gr\" viewbox=\"0 0 36 36\"><rect width=\"36\" height=\"36\" fill=\"#0d5eaf\"\/><path d=\"M0 4h36v4H0zM0 12h36v4H0zM0 20h36v4H0zM0 28h36v4H0z\" fill=\"#fff\"\/><rect width=\"20\" height=\"20\" fill=\"#0d5eaf\"\/><path d=\"M8 0h4v20H8zM0 8h20v4H0z\" fill=\"#fff\"\/><\/symbol><symbol id=\"ic-pub\" viewbox=\"0 0 24 24\"><path d=\"M3 22h18M6 18v-7M10 18v-7M14 18v-7M18 18v-7M12 2l8 5H4z\"\/><\/symbol><symbol id=\"ic-heart\" viewbox=\"0 0 24 24\"><path d=\"M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z\"\/><\/symbol><symbol id=\"ic-compass\" viewbox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"m16.24 7.76-2.12 6.36-6.36 2.12 2.12-6.36z\"\/><\/symbol><symbol id=\"ic-tool\" viewbox=\"0 0 24 24\"><path d=\"M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z\"\/><\/symbol><symbol id=\"ic-read\" viewbox=\"0 0 24 24\"><path d=\"M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z\"\/><path d=\"M14 2v4a2 2 0 0 0 2 2h4\"\/><path d=\"M10 9H8M16 13H8M16 17H8\"\/><\/symbol><symbol id=\"ic-shield\" viewbox=\"0 0 24 24\"><path d=\"M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z\"\/><path d=\"m9 12 2 2 4-4\"\/><\/symbol><symbol id=\"ic-users\" viewbox=\"0 0 24 24\"><path d=\"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2\"\/><circle cx=\"9\" cy=\"7\" r=\"4\"\/><path d=\"M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75\"\/><\/symbol><symbol id=\"ic-check\" viewbox=\"0 0 24 24\"><path d=\"M20 6 9 17l-5-5\"\/><\/symbol><\/defs><\/svg>\r\n<a class=\"skip\" href=\"#main\">Aller au contenu<\/a>\r\n<header class=\"site-header\" data-header>\r\n  <div class=\"wrap header-row\">\r\n    <a class=\"brand\" href=\"#top\" aria-label=\"Social Hackers Lab, accueil\">\r\n      <span class=\"brand-mark\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/socialhackerslab.com\/wp-content\/uploads\/2024\/06\/SHL-1-480x480.png\" alt=\"\" width=\"124\" height=\"124\"><\/span>\r\n    <\/a>\r\n    <nav class=\"main-nav\" aria-label=\"Navigation principale\">\r\n      <span class=\"nav-thumb\" aria-hidden=\"true\"><\/span>\r\n      <a href=\"#approche\" style=\"--c:var(--x1)\">Approche<\/a>\r\n      <a href=\"#territoires\" style=\"--c:var(--x8)\">Territoires<\/a>\r\n      <a href=\"#methode\" style=\"--c:var(--x5)\">M\u00e9thode<\/a>\r\n      <a href=\"#projets\" style=\"--c:var(--x10)\">Projets<\/a>\r\n      <a href=\"#formats\" style=\"--c:var(--x9)\">Formats<\/a>\r\n      <a href=\"#ressourcerie\" style=\"--c:var(--x3)\">Ressourcerie<\/a>\r\n    <\/nav>\r\n    <div class=\"header-actions\">\r\n      <a class=\"member\" href=\"https:\/\/socialhackerslab.teachizy.fr\/formations\/formation-complete-a-la-collecte-de-fonds\" target=\"_blank\" rel=\"noopener\">Espace membre \u2197<\/a>\r\n      <a class=\"btn btn-primary\" href=\"#contact\">\u00catre accompagn\u00e9 <span class=\"arr\" aria-hidden=\"true\">\u2192<\/span><\/a>\r\n    <\/div>\r\n    <button class=\"menu-toggle\" type=\"button\" aria-expanded=\"false\" aria-controls=\"mobile-nav\" data-menu><i aria-hidden=\"true\"><\/i>Menu<\/button>\r\n  <\/div>\r\n  <nav class=\"mobile-nav\" id=\"mobile-nav\" aria-label=\"Navigation mobile\" hidden>\r\n    <a href=\"#approche\">Approche<\/a>\r\n    <a href=\"#territoires\">Territoires<\/a>\r\n    <a href=\"#methode\">M\u00e9thode<\/a>\r\n    <a href=\"#projets\">Projets<\/a>\r\n    <a href=\"#formats\">Formats<\/a>\r\n    <a href=\"#ressourcerie\">Ressourcerie<\/a>\r\n    <a href=\"https:\/\/socialhackerslab.teachizy.fr\/formations\/formation-complete-a-la-collecte-de-fonds\" target=\"_blank\" rel=\"noopener\">Espace membre \u2197<\/a>\r\n    <a class=\"btn btn-primary\" href=\"#contact\">\u00catre accompagn\u00e9<\/a>\r\n  <\/nav>\r\n<\/header>\r\n<main id=\"main\">\r\n<!-- ============================== Hero ============================== -->\r\n<section class=\"hero\" id=\"top\" aria-labelledby=\"hero-title\">\r\n  <div class=\"wrap\">\r\n    <h1 class=\"hero-title\" id=\"hero-title\">\r\n      <span class=\"hl\"><span>Construire des <i>liens<\/i><\/span><\/span>\r\n      <span class=\"sub\">entre les associations de terrain, l\u2019Europe et l\u2019innovation sociale<\/span>\r\n    <\/h1>\r\n    <div class=\"hero-art\" data-hands>\r\n      <div class=\"hero-hands\" aria-hidden=\"true\" data-paper=\"https:\/\/socialhackerslab.com\/wp-content\/uploads\/2026\/09\/shl-accueil-hands-geste-paper.png\">\r\n        <canvas><\/canvas>\r\n        <video class=\"hands-src\" muted playsinline preload=\"none\" tabindex=\"-1\" disablepictureinpicture disableremoteplayback data-src=\"https:\/\/socialhackerslab.com\/wp-content\/uploads\/2026\/09\/shl-accueil-hands-geste.mp4\"><\/video>\r\n        <img class=\"hands-still\" src=\"https:\/\/socialhackerslab.com\/wp-content\/uploads\/2026\/09\/shl-accueil-hands-geste-contact.jpg\" alt=\"\" width=\"1750\" height=\"772\" loading=\"lazy\" decoding=\"async\">\r\n      <\/div>\r\n    <\/div>\r\n    <div class=\"hero-foot\" data-reveal style=\"--d:80\">\r\n      <p class=\"lede\"><b>Social Hackers Lab est ce lien.<\/b> Depuis Marseille, nous aidons les associations des quartiers prioritaires et des territoires ruraux, dans l\u2019Hexagone comme en Outre-mer, \u00e0 obtenir des financements europ\u00e9ens pour leurs projets d\u2019innovation sociale, puis \u00e0 le faire en autonomie.<\/p>\r\n      <div class=\"hero-cta\">\r\n        <a class=\"btn btn-primary\" href=\"#contact\">\u00catre accompagn\u00e9 <span class=\"arr\" aria-hidden=\"true\">\u2192<\/span><\/a>\r\n        <a class=\"btn btn-ghost\" href=\"#projets\">Voir les projets financ\u00e9s<\/a>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n<!-- ============================== Preuves ============================== -->\r\n<section class=\"proof\" aria-labelledby=\"proof-title\">\r\n  <div class=\"wrap\">\r\n    <div class=\"proof-head\" data-reveal>\r\n      <h2 id=\"proof-title\">Bilan 2025<\/h2>\r\n      <p>Un impact mesurable, ancr\u00e9 dans les territoires.<\/p>\r\n    <\/div>\r\n    <dl class=\"figures\" data-counters>\r\n      <div data-reveal style=\"--d:0\"><dt><span data-count=\"4.7\" data-decimals=\"1\">4,7<\/span><small>M\u20ac<\/small><\/dt><dd>de financements europ\u00e9ens lev\u00e9s pour les structures accompagn\u00e9es.<\/dd><\/div>\r\n      <div data-reveal style=\"--d:80\"><dt><span data-count=\"150\">150<\/span><\/dt><dd>associations accompagn\u00e9es au niveau national.<\/dd><\/div>\r\n      <div data-reveal style=\"--d:160\"><dt><span data-count=\"90\">90<\/span><small>%<\/small><\/dt><dd>des structures red\u00e9posent un projet europ\u00e9en en autonomie l\u2019ann\u00e9e suivante.<\/dd><\/div>\r\n      <div data-reveal style=\"--d:240\"><dt><span data-count=\"6\">6<\/span><\/dt><dd>hubs inter-associatifs sur le territoire national.<\/dd><\/div>\r\n    <\/dl>\r\n    <p class=\"hubs-note\" data-reveal><b>6 hubs inter-associatifs<\/b> (PACA, \u00cele-de-France, Pyr\u00e9n\u00e9es-Atlantiques, Grand Est, Pays de la Loire et Outre-mer) \u00b7 <b>1 ressourcerie num\u00e9rique<\/b> en acc\u00e8s continu.<\/p>\r\n    <div class=\"partners\" data-reveal>\r\n      <p><b>Partenaires & financeurs<\/b>Un programme soutenu par un consortium public et priv\u00e9.<\/p>\r\n      <div class=\"logos\">\r\n        <div class=\"logos-set\">\r\n          <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/socialhackerslab.com\/wp-content\/uploads\/2026\/07\/logo_LAMETROPOLE_H_quadri-300x48.png\" alt=\"M\u00e9tropole Aix-Marseille-Provence\" width=\"300\" height=\"48\">\r\n          <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/socialhackerslab.com\/wp-content\/uploads\/2026\/07\/logo_ANCT_header.20220901-300x111.png\" alt=\"Agence nationale de la coh\u00e9sion des territoires\" width=\"300\" height=\"111\">\r\n          <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/socialhackerslab.com\/wp-content\/uploads\/2026\/07\/Logo_Departement_Esssonne_-_2022.svg_-300x102.webp\" alt=\"D\u00e9partement de l\u2019Essonne\" width=\"300\" height=\"102\">\r\n          <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/socialhackerslab.com\/wp-content\/uploads\/2026\/07\/6690fbf9c6023a7f5b0c9890_Logo-fondation-SFR-300x89-1.png\" alt=\"Fondation SFR\" width=\"300\" height=\"89\">\r\n          <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/socialhackerslab.com\/wp-content\/uploads\/2026\/07\/images-300x100.png\" alt=\"Erasmus+\" width=\"300\" height=\"100\">\r\n        <\/div>\r\n        <div class=\"logos-set\" aria-hidden=\"true\">\r\n          <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/socialhackerslab.com\/wp-content\/uploads\/2026\/07\/logo_LAMETROPOLE_H_quadri-300x48.png\" alt=\"\" width=\"300\" height=\"48\">\r\n          <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/socialhackerslab.com\/wp-content\/uploads\/2026\/07\/logo_ANCT_header.20220901-300x111.png\" alt=\"\" width=\"300\" height=\"111\">\r\n          <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/socialhackerslab.com\/wp-content\/uploads\/2026\/07\/Logo_Departement_Esssonne_-_2022.svg_-300x102.webp\" alt=\"\" width=\"300\" height=\"102\">\r\n          <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/socialhackerslab.com\/wp-content\/uploads\/2026\/07\/6690fbf9c6023a7f5b0c9890_Logo-fondation-SFR-300x89-1.png\" alt=\"\" width=\"300\" height=\"89\">\r\n          <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/socialhackerslab.com\/wp-content\/uploads\/2026\/07\/images-300x100.png\" alt=\"\" width=\"300\" height=\"100\">\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n<!-- ============================== Carte ============================== -->\r\n<section class=\"atlas\" id=\"europe\" style=\"--h:var(--x7)\" aria-labelledby=\"atlas-title\" data-map>\r\n  <div class=\"wrap atlas-over\">\r\n    <div class=\"atlas-copy\" data-reveal>\r\n      <p class=\"sec-index\"><span>\u00b7<\/span> Des liens vers l\u2019Europe<\/p>\r\n      <h2 class=\"sec-title\" id=\"atlas-title\">Des associations d\u2019ici, <em>des partenaires dans toute l\u2019Europe.<\/em><\/h2>\r\n      <p class=\"sec-copy\">Chaque arc est un projet europ\u00e9en accompagn\u00e9 jusqu\u2019\u00e0 son financement&nbsp;: une association d\u2019ici, un partenaire l\u00e0-bas. En France, six hubs inter-associatifs maillent le territoire.<\/p>\r\n    <\/div>\r\n    <div class=\"atlas-canvas\">\r\n      <canvas role=\"img\" aria-label=\"Carte de l\u2019Europe : depuis Marseille, des liaisons vers l\u2019Espagne, la Gr\u00e8ce, la Pologne, le Danemark et le Portugal, et les hubs inter-associatifs en France.\"><\/canvas>\r\n    <\/div>\r\n    <aside class=\"atlas-legend\" data-legend data-reveal style=\"--d:120\" aria-label=\"Projets repr\u00e9sent\u00e9s sur la carte\">\r\n    <p class=\"legend-title\"><span>Liens europ\u00e9ens<\/span><span>5 projets Erasmus+<\/span><\/p>\r\n    <ol class=\"legend-list\">\r\n      <li data-arc=\"0\" style=\"--i:0;--c:var(--t1);--cx:var(--x1)\"><span class=\"flag\" aria-hidden=\"true\"><svg viewbox=\"0 0 30 20\"><rect width=\"30\" height=\"20\" fill=\"#c60b1e\"\/><rect y=\"5\" width=\"30\" height=\"10\" fill=\"#ffc400\"\/><\/svg><\/span><svg viewbox=\"0 0 34 18\" aria-hidden=\"true\"><path d=\"M4 14Q17 -2 30 14\"\/><circle cx=\"4\" cy=\"14\" r=\"2.2\"\/><circle cx=\"30\" cy=\"14\" r=\"2.6\"\/><\/svg><b class=\"dest\">SPAIN<\/b><span class=\"who\">Solidarit\u00e9 Femmes 13 \u00d7 Dem\u00e9ter<\/span><\/li>\r\n      <li data-arc=\"1\" style=\"--i:1;--c:var(--t7);--cx:var(--x7)\"><span class=\"flag\" aria-hidden=\"true\"><svg viewbox=\"0 0 30 20\"><rect width=\"30\" height=\"20\" fill=\"#0d5eaf\"\/><path d=\"M11 3.33h19M11 7.78h19M0 12.22h30M0 16.67h30M5.5 0v11.1M0 5.55h11\" stroke=\"#fff\" stroke-width=\"2.22\"\/><\/svg><\/span><svg viewbox=\"0 0 34 18\" aria-hidden=\"true\"><path d=\"M4 14Q17 -2 30 14\"\/><circle cx=\"4\" cy=\"14\" r=\"2.2\"\/><circle cx=\"30\" cy=\"14\" r=\"2.6\"\/><\/svg><b class=\"dest\">GREECE<\/b><span class=\"who\">Action Bomaye \u00d7 Balkania<\/span><\/li>\r\n      <li data-arc=\"2\" style=\"--i:2;--c:var(--t10);--cx:var(--x10)\"><span class=\"flag\" aria-hidden=\"true\"><svg viewbox=\"0 0 30 20\"><rect width=\"30\" height=\"20\" fill=\"#dc143c\"\/><rect width=\"30\" height=\"10\" fill=\"#fff\"\/><\/svg><\/span><svg viewbox=\"0 0 34 18\" aria-hidden=\"true\"><path d=\"M4 14Q17 -2 30 14\"\/><circle cx=\"4\" cy=\"14\" r=\"2.2\"\/><circle cx=\"30\" cy=\"14\" r=\"2.6\"\/><\/svg><b class=\"dest\">Pologne<\/b><span class=\"who\">Groupe Dispersion \u00d7 Fundacja CEL<\/span><\/li>\r\n      <li data-arc=\"3\" style=\"--i:3;--c:var(--t8);--cx:var(--x8)\"><span class=\"flag\" aria-hidden=\"true\"><svg viewbox=\"0 0 30 20\"><rect width=\"30\" height=\"20\" fill=\"#c8102e\"\/><path d=\"M11 0v20M0 10h30\" stroke=\"#fff\" stroke-width=\"3\"\/><\/svg><\/span><svg viewbox=\"0 0 34 18\" aria-hidden=\"true\"><path d=\"M4 14Q17 -2 30 14\"\/><circle cx=\"4\" cy=\"14\" r=\"2.2\"\/><circle cx=\"30\" cy=\"14\" r=\"2.6\"\/><\/svg><b class=\"dest\">Danemark<\/b><span class=\"who\">Up toME, avec \u0152il du Loup<\/span><\/li>\r\n      <li data-arc=\"4\" style=\"--i:4;--c:var(--t5);--cx:var(--x5)\"><span class=\"flag\" aria-hidden=\"true\"><svg viewbox=\"0 0 30 20\"><rect width=\"30\" height=\"20\" fill=\"#da291c\"\/><rect width=\"12\" height=\"20\" fill=\"#046a38\"\/><circle cx=\"12\" cy=\"10\" r=\"4.3\" fill=\"#ffe000\"\/><path d=\"M10.3 7.9h3.4v3.3a1.7 1.7 0 0 1-3.4 0z\" fill=\"#da291c\"\/><path d=\"M11.2 8.9h1.6v2a.8.8 0 0 1-1.6 0z\" fill=\"#fff\"\/><\/svg><\/span><svg viewbox=\"0 0 34 18\" aria-hidden=\"true\"><path d=\"M4 14Q17 -2 30 14\"\/><circle cx=\"4\" cy=\"14\" r=\"2.2\"\/><circle cx=\"30\" cy=\"14\" r=\"2.6\"\/><\/svg><b class=\"dest\">Portugal<\/b><span class=\"who\">DDA Contemporary Art \u00d7 Eruditembrace<\/span><\/li>\r\n    <\/ol>\r\n    <p class=\"legend-hubs\" style=\"--i:5\"><span class=\"flag\" aria-hidden=\"true\"><svg viewbox=\"0 0 30 20\"><rect width=\"30\" height=\"20\" fill=\"#ce1126\"\/><rect width=\"20\" height=\"20\" fill=\"#fff\"\/><rect width=\"10\" height=\"20\" fill=\"#002654\"\/><\/svg><\/span><b>France<\/b><span class=\"who\">6 hubs inter-associatifs<\/span><\/p>\r\n    <a class=\"legend-more\" href=\"#projets\" style=\"--i:6\">Voir les projets <span class=\"arr\" aria-hidden=\"true\">\u2192<\/span><\/a>\r\n    <\/aside>\r\n    <ul class=\"map-key\" aria-hidden=\"true\">\r\n      <li><i class=\"k-port\"><\/i>Marseille, port d\u2019attache<\/li>\r\n      <li><i class=\"k-hub\"><\/i>Hub inter-associatif<\/li>\r\n      <li><i class=\"k-arc\"><\/i>Projet europ\u00e9en<\/li>\r\n    <\/ul>\r\n  <\/div>\r\n<\/section>\r\n<!-- ============================== 01 Identit\u00e9 ============================== -->\r\n<section class=\"section\" id=\"approche\" style=\"--h:var(--x1)\" aria-labelledby=\"approche-title\">\r\n  <div class=\"wrap\">\r\n    <div class=\"ident-head\">\r\n      <div data-reveal>\r\n        <p class=\"sec-index\"><span>01<\/span> Notre identit\u00e9<\/p>\r\n        <h2 class=\"sec-title\" id=\"approche-title\">Notre approche&nbsp;: <em>le hacking social.<\/em><\/h2>\r\n      <\/div>\r\n      <div class=\"ident-text\">\r\n        <p class=\"ident-lead\" data-reveal style=\"--d:80\">Le hacking social, pour nous, c\u2019est une mani\u00e8re d\u2019agir sur les syst\u00e8mes qui emp\u00eachent trop souvent les associations d\u2019acc\u00e9der aux ressources qui leur sont pourtant destin\u00e9es.<\/p>\r\n        <div class=\"ident-body\" data-reveal style=\"--d:160\">\r\n          <p class=\"sec-copy\">Nous traduisons la complexit\u00e9 des financements europ\u00e9ens dans un langage clair, op\u00e9rationnel et directement utilisable. Nous aidons les associations \u00e0 comprendre les r\u00e8gles du jeu, \u00e0 structurer leurs id\u00e9es, \u00e0 construire des dossiers solides et \u00e0 prendre confiance dans leur capacit\u00e9 \u00e0 porter des projets ambitieux.<\/p>\r\n          <p class=\"sec-copy\">Notre approche repose sur trois leviers compl\u00e9mentaires&nbsp;: <b>la formation<\/b>, <b>l\u2019accompagnement individualis\u00e9<\/b> and <b>la mise en r\u00e9seau<\/b> avec des partenaires, financeurs et acteurs europ\u00e9ens.<\/p>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n    <div class=\"bento\">\r\n      <article class=\"bc\" style=\"--c:var(--t7);--cx:var(--x7)\" data-reveal>\r\n        <div class=\"bc-stage sc-pil is-b\" data-scene=\"piliers\" aria-hidden=\"true\">\r\n          <div class=\"pil\">\r\n            <div class=\"pil-fig\">\r\n              <svg class=\"pil-art\" viewbox=\"0 0 300 150\">\r\n                <defs>\r\n                  <lineargradient id=\"pil-g0\" x2=\"0\" y2=\"1\"><stop offset=\"0\" stop-color=\"#c3cdc8\"\/><stop offset=\".62\" stop-color=\"#c3cdc8\" stop-opacity=\".8\"\/><stop offset=\"1\" stop-color=\"#c3cdc8\" stop-opacity=\".1\"\/><\/lineargradient><lineargradient id=\"pil-g1\" x2=\"0\" y2=\"1\"><stop offset=\"0\" stop-color=\"#4b8296\"\/><stop offset=\".62\" stop-color=\"#4b8296\" stop-opacity=\".8\"\/><stop offset=\"1\" stop-color=\"#4b8296\" stop-opacity=\".1\"\/><\/lineargradient><lineargradient id=\"pil-g2\" x2=\"0\" y2=\"1\"><stop offset=\"0\" stop-color=\"#bd9035\"\/><stop offset=\".62\" stop-color=\"#bd9035\" stop-opacity=\".8\"\/><stop offset=\"1\" stop-color=\"#bd9035\" stop-opacity=\".1\"\/><\/lineargradient>\r\n                  <lineargradient id=\"pil-sheen\"><stop offset=\"0\" stop-color=\"#fff\" stop-opacity=\".24\"\/><stop offset=\".5\" stop-color=\"#fff\" stop-opacity=\"0\"\/><stop offset=\"1\" stop-color=\"#16262c\" stop-opacity=\".06\"\/><\/lineargradient>\r\n                  <lineargradient id=\"pil-edge\" x2=\"0\" y2=\"1\"><stop offset=\"0\" stop-color=\"#fff\" stop-opacity=\".6\"\/><stop offset=\".5\" stop-color=\"#fff\" stop-opacity=\"0\"\/><\/lineargradient>\r\n                  <lineargradient id=\"pil-top\" x2=\"0\" y2=\"1\"><stop offset=\"0\" stop-color=\"#fff\" stop-opacity=\".14\"\/><stop offset=\"1\" stop-color=\"#fff\" stop-opacity=\"0\"\/><\/lineargradient>\r\n                  <lineargradient id=\"pil-ground\" gradientunits=\"userSpaceOnUse\" x1=\"6\" x2=\"294\"><stop offset=\"0\" stop-color=\"#dde3dd\" stop-opacity=\"0\"\/><stop offset=\".2\" stop-color=\"#dde3dd\"\/><stop offset=\".8\" stop-color=\"#dde3dd\"\/><stop offset=\"1\" stop-color=\"#dde3dd\" stop-opacity=\"0\"\/><\/lineargradient>\r\n                  <filter id=\"pil-lift\" x=\"-10%\" y=\"-40%\" width=\"120%\" height=\"240%\"><fedropshadow dx=\"0\" dy=\"8\" stddeviation=\"7\" flood-color=\"#16262c\" flood-opacity=\".22\"\/><\/filter>\r\n                  <clippath id=\"pil-soil\"><rect y=\"-80\" width=\"300\" height=\"218\"\/><\/clippath>\r\n                <\/defs>\r\n                <path d=\"M6 138.5H294\" stroke=\"url(#pil-ground)\"\/>\r\n                <g clip-path=\"url(#pil-soil)\">\r\n                  <g class=\"pil-col\"><rect x=\"31\" y=\"44\" width=\"38\" height=\"104\" rx=\"8\" fill=\"url(#pil-g1)\"\/><rect x=\"31\" y=\"44\" width=\"38\" height=\"104\" rx=\"8\" fill=\"url(#pil-sheen)\" stroke=\"url(#pil-edge)\"\/><path d=\"M58.50 67.80L59.04 69.25L60.59 69.32L59.38 70.29L59.79 71.78L58.50 70.92L57.21 71.78L57.62 70.29L56.41 69.32L57.96 69.25ZM57.36 72.05L57.90 73.50L59.45 73.57L58.24 74.54L58.65 76.03L57.36 75.17L56.07 76.03L56.48 74.54L55.27 73.57L56.82 73.50ZM54.25 75.16L54.79 76.61L56.34 76.68L55.13 77.65L55.54 79.14L54.25 78.29L52.96 79.14L53.37 77.65L52.16 76.68L53.71 76.61ZM50.00 76.30L50.54 77.75L52.09 77.82L50.88 78.79L51.29 80.28L50.00 79.42L48.71 80.28L49.12 78.79L47.91 77.82L49.46 77.75ZM45.75 75.16L46.29 76.61L47.84 76.68L46.63 77.65L47.04 79.14L45.75 78.29L44.46 79.14L44.87 77.65L43.66 76.68L45.21 76.61ZM42.64 72.05L43.18 73.50L44.73 73.57L43.52 74.54L43.93 76.03L42.64 75.17L41.35 76.03L41.76 74.54L40.55 73.57L42.10 73.50ZM41.50 67.80L42.04 69.25L43.59 69.32L42.38 70.29L42.79 71.78L41.50 70.92L40.21 71.78L40.62 70.29L39.41 69.32L40.96 69.25ZM42.64 63.55L43.18 65.00L44.73 65.07L43.52 66.04L43.93 67.53L42.64 66.67L41.35 67.53L41.76 66.04L40.55 65.07L42.10 65.00ZM45.75 60.44L46.29 61.89L47.84 61.96L46.63 62.92L47.04 64.42L45.75 63.56L44.46 64.42L44.87 62.92L43.66 61.96L45.21 61.89ZM50.00 59.30L50.54 60.75L52.09 60.82L50.88 61.79L51.29 63.28L50.00 62.42L48.71 63.28L49.12 61.79L47.91 60.82L49.46 60.75ZM54.25 60.44L54.79 61.89L56.34 61.96L55.13 62.92L55.54 64.42L54.25 63.56L52.96 64.42L53.37 62.92L52.16 61.96L53.71 61.89ZM57.36 63.55L57.90 65.00L59.45 65.07L58.24 66.04L58.65 67.53L57.36 66.67L56.07 67.53L56.48 66.04L55.27 65.07L56.82 65.00Z\" fill=\"#ffcc00\"\/><\/g>\r\n                  <g class=\"pil-col\"><rect x=\"131\" y=\"44\" width=\"38\" height=\"104\" rx=\"8\" fill=\"url(#pil-g0)\"\/><rect x=\"131\" y=\"44\" width=\"38\" height=\"104\" rx=\"8\" fill=\"url(#pil-sheen)\" stroke=\"url(#pil-edge)\"\/><\/g>\r\n                  <g class=\"pil-col\"><rect x=\"231\" y=\"44\" width=\"38\" height=\"104\" rx=\"8\" fill=\"url(#pil-g2)\"\/><rect x=\"231\" y=\"44\" width=\"38\" height=\"104\" rx=\"8\" fill=\"url(#pil-sheen)\" stroke=\"url(#pil-edge)\"\/><\/g>\r\n                <\/g>\r\n                <g class=\"pil-slab\" filter=\"url(#pil-lift)\"><rect x=\"14\" y=\"20\" width=\"272\" height=\"24\" rx=\"8\" fill=\"#16262c\"\/><rect x=\"14.5\" y=\"20.5\" width=\"271\" height=\"23\" rx=\"7.5\" fill=\"url(#pil-top)\" stroke=\"#fff\" stroke-opacity=\".08\"\/><\/g>\r\n              <\/svg>\r\n              <p class=\"pil-name\" style=\"--i:2\">Vos projets<\/p>\r\n            <\/div>\r\n            <ul class=\"pil-key\"><li class=\"is-new\" style=\"--k:var(--t7); --kx:var(--x7); --i:0\">Fonds<br>europ\u00e9ens<\/li><li>Subventions<br>habituelles<\/li><li class=\"is-new\" style=\"--k:var(--t3); --kx:var(--x3); --i:1\">Autres<br>ressources<\/li><\/ul>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"bc-head\">\r\n          <p class=\"bc-kicker\">01<\/p>\r\n          <h3>Renforcer l\u2019autonomie financi\u00e8re<\/h3>\r\n          <p>Nous aidons les associations \u00e0 diversifier leurs ressources au-del\u00e0 des subventions habituelles, en int\u00e9grant les financements europ\u00e9ens dans leur strat\u00e9gie de d\u00e9veloppement. L\u2019objectif est de permettre \u00e0 chaque structure de consolider son mod\u00e8le \u00e9conomique et de s\u00e9curiser ses projets dans la dur\u00e9e.<\/p>\r\n        <\/div>\r\n      <\/article>\r\n      <article class=\"bc\" style=\"--c:var(--t5);--cx:var(--x5); --d:80\" data-reveal>\r\n        <div class=\"bc-stage sc-dos\" data-scene=\"dossiers\" aria-hidden=\"true\">\r\n          <div class=\"dos\">\r\n            <p class=\"dos-key\"><span style=\"--k:var(--soft)\"><svg viewbox=\"0 0 11 16\"><use href=\"#dos-cur\"\/><\/svg>Social Hackers Lab<\/span><span style=\"--k:var(--c)\"><svg viewbox=\"0 0 11 16\"><use href=\"#dos-cur\"\/><\/svg>Votre \u00e9quipe<\/span><\/p>\r\n            <svg class=\"dos-art\" viewbox=\"0 0 300 124\">\r\n              <defs>\r\n                <path id=\"dos-cur\" d=\"M0 0V13.4L3.5 10.2L5.9 15.5L8.3 14.4L5.9 9.2H10.5Z\"\/>\r\n                <filter id=\"dos-sh\" x=\"-20%\" y=\"-20%\" width=\"140%\" height=\"150%\"><fedropshadow dx=\"0\" dy=\"2\" stddeviation=\"2.5\" flood-color=\"#16262c\" flood-opacity=\".08\"\/><\/filter>\r\n                <filter id=\"dos-cur-sh\" x=\"-60%\" y=\"-40%\" width=\"220%\" height=\"180%\"><fedropshadow dx=\"0\" dy=\"1\" stddeviation=\".9\" flood-color=\"#16262c\" flood-opacity=\".28\"\/><\/filter>\r\n                <filter id=\"dos-blur\" x=\"-40%\" y=\"-40%\" width=\"180%\" height=\"180%\"><fegaussianblur stddeviation=\"6\"\/><\/filter>\r\n              <\/defs>\r\n              <rect class=\"dos-slot\" x=\"14\" y=\"10\" width=\"72\" height=\"96\" rx=\"7\"\/><rect class=\"dos-slot\" x=\"114\" y=\"10\" width=\"72\" height=\"96\" rx=\"7\"\/><rect class=\"dos-slot\" x=\"214\" y=\"10\" width=\"72\" height=\"96\" rx=\"7\"\/>\r\n              <path class=\"dos-brace\" d=\"M14 115v4h72v-4\"\/>\r\n              <path class=\"dos-brace is-you\" d=\"M114 115v4h172v-4\"\/>\r\n              <g class=\"dos-live\">\r\n                <g class=\"dos-sheet\" transform=\"translate(14 10)\">\r\n                  <rect class=\"dos-lift\" x=\"6\" y=\"12\" width=\"60\" height=\"88\" rx=\"8\" filter=\"url(#dos-blur)\"\/>\r\n                  <rect class=\"dos-paper\" width=\"72\" height=\"96\" rx=\"7\" filter=\"url(#dos-sh)\"\/>\r\n                  <rect class=\"dos-title\" x=\"10\" y=\"12\" width=\"30\" height=\"5\" rx=\"2.5\"\/>\r\n                  <rect class=\"dos-bed\" x=\"10\" y=\"28\" width=\"52\" height=\"4\" rx=\"2\"\/><rect class=\"dos-bed\" x=\"10\" y=\"39\" width=\"44\" height=\"4\" rx=\"2\"\/><rect class=\"dos-bed\" x=\"10\" y=\"50\" width=\"52\" height=\"4\" rx=\"2\"\/><rect class=\"dos-bed\" x=\"10\" y=\"61\" width=\"30\" height=\"4\" rx=\"2\"\/>\r\n                  <rect class=\"dos-fill is-shl\" x=\"10\" y=\"28\" width=\"52\" height=\"4\" rx=\"2\"\/><rect class=\"dos-fill is-you\" x=\"10\" y=\"39\" width=\"44\" height=\"4\" rx=\"2\"\/><rect class=\"dos-fill is-shl\" x=\"10\" y=\"50\" width=\"52\" height=\"4\" rx=\"2\"\/><rect class=\"dos-fill is-you\" x=\"10\" y=\"61\" width=\"30\" height=\"4\" rx=\"2\"\/>\r\n                  <g class=\"dos-ok\" transform=\"translate(58 80)\"><circle r=\"7.5\"\/><path d=\"M-3.3 .2l2.2 2.2 4.3-4.4\"\/><\/g>\r\n                <\/g>\r\n                <g class=\"dos-sheet\" transform=\"translate(114 10)\">\r\n                  <rect class=\"dos-lift\" x=\"6\" y=\"12\" width=\"60\" height=\"88\" rx=\"8\" filter=\"url(#dos-blur)\"\/>\r\n                  <rect class=\"dos-paper\" width=\"72\" height=\"96\" rx=\"7\" filter=\"url(#dos-sh)\"\/>\r\n                  <rect class=\"dos-title\" x=\"10\" y=\"12\" width=\"30\" height=\"5\" rx=\"2.5\"\/>\r\n                  <rect class=\"dos-bed\" x=\"10\" y=\"28\" width=\"52\" height=\"4\" rx=\"2\"\/><rect class=\"dos-bed\" x=\"10\" y=\"39\" width=\"44\" height=\"4\" rx=\"2\"\/><rect class=\"dos-bed\" x=\"10\" y=\"50\" width=\"52\" height=\"4\" rx=\"2\"\/><rect class=\"dos-bed\" x=\"10\" y=\"61\" width=\"30\" height=\"4\" rx=\"2\"\/>\r\n                  <rect class=\"dos-fill is-you\" x=\"10\" y=\"28\" width=\"52\" height=\"4\" rx=\"2\"\/><rect class=\"dos-fill is-you\" x=\"10\" y=\"39\" width=\"44\" height=\"4\" rx=\"2\"\/><rect class=\"dos-fill is-you\" x=\"10\" y=\"50\" width=\"52\" height=\"4\" rx=\"2\"\/><rect class=\"dos-fill is-you\" x=\"10\" y=\"61\" width=\"30\" height=\"4\" rx=\"2\"\/>\r\n                  <g class=\"dos-ok\" transform=\"translate(58 80)\"><circle r=\"7.5\"\/><path d=\"M-3.3 .2l2.2 2.2 4.3-4.4\"\/><\/g>\r\n                <\/g>\r\n                <g class=\"dos-sheet\" transform=\"translate(214 10)\">\r\n                  <rect class=\"dos-lift\" x=\"6\" y=\"12\" width=\"60\" height=\"88\" rx=\"8\" filter=\"url(#dos-blur)\"\/>\r\n                  <rect class=\"dos-paper\" width=\"72\" height=\"96\" rx=\"7\" filter=\"url(#dos-sh)\"\/>\r\n                  <rect class=\"dos-title\" x=\"10\" y=\"12\" width=\"30\" height=\"5\" rx=\"2.5\"\/>\r\n                  <rect class=\"dos-bed\" x=\"10\" y=\"28\" width=\"52\" height=\"4\" rx=\"2\"\/><rect class=\"dos-bed\" x=\"10\" y=\"39\" width=\"44\" height=\"4\" rx=\"2\"\/><rect class=\"dos-bed\" x=\"10\" y=\"50\" width=\"52\" height=\"4\" rx=\"2\"\/><rect class=\"dos-bed\" x=\"10\" y=\"61\" width=\"30\" height=\"4\" rx=\"2\"\/>\r\n                  <rect class=\"dos-fill is-you\" x=\"10\" y=\"28\" width=\"52\" height=\"4\" rx=\"2\"\/><rect class=\"dos-fill is-you\" x=\"10\" y=\"39\" width=\"44\" height=\"4\" rx=\"2\"\/><rect class=\"dos-fill is-you\" x=\"10\" y=\"50\" width=\"52\" height=\"4\" rx=\"2\"\/><rect class=\"dos-fill is-you\" x=\"10\" y=\"61\" width=\"30\" height=\"4\" rx=\"2\"\/>\r\n                  <g class=\"dos-ok\" transform=\"translate(58 80)\"><circle r=\"7.5\"\/><path d=\"M-3.3 .2l2.2 2.2 4.3-4.4\"\/><\/g>\r\n                <\/g>\r\n                <use class=\"dos-cur is-shl\" href=\"#dos-cur\" transform=\"translate(-16 34)\" filter=\"url(#dos-cur-sh)\" style=\"opacity:0\"\/>\r\n                <use class=\"dos-cur is-you\" href=\"#dos-cur\" transform=\"translate(276 100)\" filter=\"url(#dos-cur-sh)\"\/>\r\n              <\/g>\r\n            <\/svg>\r\n            <div class=\"dos-ticks\"><p><b>Ann\u00e9e 1<\/b>avec SHL<\/p><p class=\"is-you\"><b>Ann\u00e9e 2<\/b>en autonomie<\/p><\/div>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"bc-head\">\r\n          <p class=\"bc-kicker\">02<\/p>\r\n          <h3>Inscrire l\u2019action dans la dur\u00e9e<\/h3>\r\n          <p>Nous transmettons des comp\u00e9tences techniques et strat\u00e9giques pour que les associations ne d\u00e9pendent pas uniquement d\u2019un accompagnement ponctuel. \u00c0 la fin du parcours, les \u00e9quipes disposent d\u2019outils, de m\u00e9thodes et de mod\u00e8les r\u00e9utilisables pour d\u00e9poser de nouveaux dossiers de mani\u00e8re autonome.<\/p>\r\n        <\/div>\r\n      <\/article>\r\n      <article class=\"bc\" style=\"--c:var(--lv3); --cx:var(--x4); --d:160\" data-reveal>\r\n        <div class=\"bc-stage sc-net\" data-scene=\"reseau\" aria-hidden=\"true\">\r\n          <svg class=\"net-svg\"><\/svg>\r\n          <p class=\"net-key\"><span><i><\/i>Pays partenaires<\/span><span><svg viewbox=\"0 0 36 36\"><use href=\"#fl-eu\"\/><\/svg>Financeur europ\u00e9en<\/span><\/p>\r\n          <span class=\"net-node is-on\" title=\"Portugal\"><svg viewbox=\"0 0 36 36\"><use href=\"#fl-pt\"\/><\/svg><\/span>\r\n          <span class=\"net-node is-on\" title=\"SPAIN\"><svg viewbox=\"0 0 36 36\"><use href=\"#fl-es\"\/><\/svg><\/span>\r\n          <span class=\"net-node is-on\" title=\"Union europ\u00e9enne\"><svg viewbox=\"0 0 36 36\"><use href=\"#fl-eu\"\/><\/svg><\/span>\r\n          <span class=\"net-node is-on\" title=\"Danemark\"><svg viewbox=\"0 0 36 36\"><use href=\"#fl-dk\"\/><\/svg><\/span>\r\n          <span class=\"net-node is-on\" title=\"Pologne\"><svg viewbox=\"0 0 36 36\"><use href=\"#fl-pl\"\/><\/svg><\/span>\r\n          <span class=\"net-node is-on\" title=\"GREECE\"><svg viewbox=\"0 0 36 36\"><use href=\"#fl-gr\"\/><\/svg><\/span>\r\n          <span class=\"net-core\">Votre association<\/span>\r\n        <\/div>\r\n        <div class=\"bc-head\">\r\n          <p class=\"bc-kicker\">03<\/p>\r\n          <h3>Saisir les opportunit\u00e9s<\/h3>\r\n          <p>Les financements europ\u00e9ens sont souvent per\u00e7us comme complexes, \u00e9loign\u00e9s ou r\u00e9serv\u00e9s aux grandes structures. Notre r\u00f4le est de les rendre accessibles aux associations de terrain, en identifiant les bons dispositifs, en simplifiant les \u00e9tapes et en accompagnant les structures jusqu\u2019au d\u00e9p\u00f4t.<\/p>\r\n        <\/div>\r\n      <\/article>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n<!-- ============================== 02 Territoires ============================== -->\r\n<section class=\"section tint\" id=\"territoires\" style=\"--h:var(--x8)\" aria-labelledby=\"territoires-title\">\r\n  <div class=\"wrap\">\r\n    <div class=\"sec-head\">\r\n      <div data-reveal>\r\n        <p class=\"sec-index\"><span>02<\/span> Nos champs d\u2019action<\/p>\r\n        <h2 class=\"sec-title\" id=\"territoires-title\">Des territoires souvent \u00e9loign\u00e9s des <em>circuits de financement.<\/em><\/h2>\r\n      <\/div>\r\n      <p class=\"sec-copy\" data-reveal style=\"--d:120\">Nous intervenons prioritairement l\u00e0 o\u00f9 l\u2019acc\u00e8s aux financements reste difficile&nbsp;: quartiers prioritaires de la politique de la ville, territoires ruraux, territoires ultramarins et structures \u00e9mergentes de l\u2019\u00e9conomie sociale et solidaire.<\/p>\r\n    <\/div>\r\n    <div class=\"terr\" data-terr>\r\n      <ol class=\"fields\" data-reveal>\r\n        <li class=\"field is-on\" style=\"--c:var(--t8);--cx:var(--x8)\">\r\n          <span class=\"field-icon\" aria-hidden=\"true\"><svg viewbox=\"0 0 24 24\"><path d=\"M3 21h18M5 21V9l5-3v15M10 21V4l9 4v13M13 10h3M13 13.5h3M13 17h3M7 12h1M7 15.5h1\"\/><\/svg><\/span>\r\n          <div>\r\n            <p class=\"mono\">QPV<\/p>\r\n            <h3><button class=\"field-btn\" type=\"button\" aria-pressed=\"true\" aria-controls=\"terr-map\">Les quartiers prioritaires de la politique de la ville<\/button><\/h3>\r\n            <p>En partenariat avec les collectivit\u00e9s, nous accompagnons des associations qui portent des actions essentielles aupr\u00e8s des habitants mais manquent de temps, de r\u00e9seau ou d\u2019ing\u00e9nierie. L\u2019incubateur transforme leurs actions de terrain en projets structur\u00e9s, finan\u00e7ables et \u00e9ligibles.<\/p>\r\n          <\/div>\r\n          <i class=\"field-bar\" aria-hidden=\"true\"><\/i>\r\n        <\/li>\r\n        <li class=\"field\" style=\"--c:var(--t5);--cx:var(--x5)\">\r\n          <span class=\"field-icon\" aria-hidden=\"true\"><svg viewbox=\"0 0 24 24\"><path d=\"M2 17c2.5 0 2.5-1.5 5-1.5S9.5 17 12 17s2.5-1.5 5-1.5 2.5 1.5 5 1.5M2 21c2.5 0 2.5-1.5 5-1.5S9.5 21 12 21s2.5-1.5 5-1.5 2.5 1.5 5 1.5M4 13l5-7 4 5 2.5-3L20 13\"\/><\/svg><\/span>\r\n          <div>\r\n            <p class=\"mono\">Rural \u00b7 Outre-mer<\/p>\r\n            <h3><button class=\"field-btn\" type=\"button\" aria-pressed=\"false\" aria-controls=\"terr-map\">Les territoires ruraux et ultramarins<\/button><\/h3>\r\n            <p>Un accompagnement adapt\u00e9 \u00e0 chaque r\u00e9alit\u00e9&nbsp;: \u00e9loignement g\u00e9ographique, acc\u00e8s aux partenaires, sp\u00e9cificit\u00e9s locales, besoins de coop\u00e9ration r\u00e9gionale ou transfrontali\u00e8re. Nous intervenons notamment en Outre-mer et dans les territoires ruraux.<\/p>\r\n          <\/div>\r\n          <i class=\"field-bar\" aria-hidden=\"true\"><\/i>\r\n        <\/li>\r\n        <li class=\"field\" style=\"--c:var(--t3);--cx:var(--x3)\">\r\n          <span class=\"field-icon\" aria-hidden=\"true\"><svg viewbox=\"0 0 24 24\"><circle cx=\"12\" cy=\"5\" r=\"2.2\"\/><circle cx=\"5\" cy=\"17\" r=\"2.2\"\/><circle cx=\"19\" cy=\"17\" r=\"2.2\"\/><circle cx=\"12\" cy=\"12.5\" r=\"1.6\"\/><path d=\"M12 7.2v3.7M10.7 13.5l-4 2.3M13.3 13.5l4 2.3\"\/><\/svg><\/span>\r\n          <div>\r\n            <p class=\"mono\">ESS<\/p>\r\n            <h3><button class=\"field-btn\" type=\"button\" aria-pressed=\"false\" aria-controls=\"terr-map\">Les structures \u00e9mergentes de l\u2019ESS<\/button><\/h3>\r\n            <p>L\u2019incubateur s\u2019adresse aux structures qui portent des projets d\u2019int\u00e9r\u00eat g\u00e9n\u00e9ral et souhaitent changer d\u2019\u00e9chelle, quelle que soit leur taille ou leur th\u00e9matique.<\/p>\r\n          <\/div>\r\n          <i class=\"field-bar\" aria-hidden=\"true\"><\/i>\r\n        <\/li>\r\n      <\/ol>\r\n      <figure class=\"terr-map\" id=\"terr-map\" data-reveal style=\"--d:120\">\r\n        <p class=\"terr-head\"><span><b>Fig. 02<\/b> \u00b7 O\u00f9 nous intervenons<\/span><span data-terr-count>01 \/ 03<\/span><\/p>\r\n        <div class=\"terr-stage\">\r\n          <canvas role=\"img\" aria-label=\"Carte de France et des cinq d\u00e9partements d\u2019outre-mer. Tour \u00e0 tour s\u2019allument les quartiers prioritaires des agglom\u00e9rations, les territoires ruraux et ultramarins, puis un r\u00e9seau de structures de l\u2019ESS reli\u00e9 \u00e0 l\u2019Europe.\"><\/canvas>\r\n          <ul class=\"drom\" aria-hidden=\"true\"><li>Guadeloupe<\/li><li>Martinique<\/li><li>Guyane<\/li><li>La R\u00e9union<\/li><li>Mayotte<\/li><\/ul>\r\n        <\/div>\r\n        <ul class=\"terr-key\" aria-hidden=\"true\">\r\n          <li class=\"is-on\" style=\"--k:var(--t8); --kx:var(--x8)\"><i><\/i>Quartiers prioritaires des agglom\u00e9rations<\/li>\r\n          <li style=\"--k:var(--t5); --kx:var(--x5)\"><i><\/i>Territoires ruraux et d\u2019outre-mer<\/li>\r\n          <li style=\"--k:var(--t3); --kx:var(--x3)\"><i><\/i>Structures de l\u2019ESS, en r\u00e9seau jusqu\u2019\u00e0 l\u2019Europe<\/li>\r\n        <\/ul>\r\n      <\/figure>\r\n    <\/div>\r\n    <div class=\"kinds\" data-reveal>\r\n      <p><b>Pour qui<\/b>Des structures de toutes tailles et de tous secteurs.<\/p>\r\n      <ul>\r\n        <li>Associations culturelles<\/li><li>Centres sociaux<\/li><li>Structures d\u2019insertion<\/li><li>Collectifs citoyens<\/li><li>Associations sportives<\/li><li>Lutte contre les discriminations<\/li><li>Jeunesse<\/li><li>Inclusion<\/li><li>Transition \u00e9cologique<\/li>\r\n      <\/ul>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n<!-- ============================== 03 M\u00e9thode ============================== -->\r\n<section class=\"section\" id=\"methode\" style=\"--h:var(--x5)\" aria-labelledby=\"methode-title\">\r\n  <div class=\"wrap method\" data-method>\r\n    <div class=\"method-aside\">\r\n      <div class=\"method-sticky\">\r\n        <p class=\"sec-index\"><span>03<\/span> Notre m\u00e9thodologie<\/p>\r\n        <h2 class=\"sec-title\" id=\"methode-title\">Un parcours structur\u00e9 en <em>cinq \u00e9tapes.<\/em><\/h2>\r\n        <p class=\"sec-copy\">De l\u2019acculturation aux financements europ\u00e9ens jusqu\u2019\u00e0 l\u2019autonomie compl\u00e8te des \u00e9quipes&nbsp;: une progression con\u00e7ue pour garantir le d\u00e9p\u00f4t effectif des dossiers et le transfert durable des comp\u00e9tences.<\/p>\r\n        <div class=\"rail\" aria-hidden=\"true\">\r\n          <div class=\"rail-track\"><span data-rail-fill><\/span><\/div>\r\n          <ol>\r\n            <li><a href=\"#etape-1\" tabindex=\"-1\"><span>01<\/span>Diagnostic<\/a><\/li>\r\n            <li><a href=\"#etape-2\" tabindex=\"-1\"><span>02<\/span>Formation<\/a><\/li>\r\n            <li><a href=\"#etape-3\" tabindex=\"-1\"><span>03<\/span>Montage<\/a><\/li>\r\n            <li><a href=\"#etape-4\" tabindex=\"-1\"><span>04<\/span>Relecture et d\u00e9p\u00f4t<\/a><\/li>\r\n            <li><a href=\"#etape-5\" tabindex=\"-1\"><span>05<\/span>Autonomie<\/a><\/li>\r\n          <\/ol>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n    <ol class=\"steps\">\r\n      <li class=\"step\" id=\"etape-1\">\r\n        <p class=\"step-top\"><span class=\"big\">01<\/span><span class=\"step-label\">\u00c9tape 1 sur 5<span class=\"step-bar\" aria-hidden=\"true\"><i class=\"now\"><\/i><i><\/i><i><\/i><i><\/i><i><\/i><\/span><\/span><\/p>\r\n        <h3>Diagnostic de maturit\u00e9 europ\u00e9enne<\/h3>\r\n        <p>Un auto-diagnostic structur\u00e9 permet \u00e0 chaque association d\u2019\u00e9valuer sa capacit\u00e9 \u00e0 mobiliser les fonds europ\u00e9ens, d\u2019identifier ses forces et de cartographier ses besoins.<\/p>\r\n      <\/li>\r\n      <li class=\"step\" id=\"etape-2\">\r\n        <p class=\"step-top\"><span class=\"big\">02<\/span><span class=\"step-label\">\u00c9tape 2 sur 5<span class=\"step-bar\" aria-hidden=\"true\"><i class=\"done\"><\/i><i class=\"now\"><\/i><i><\/i><i><\/i><i><\/i><\/span><\/span><\/p>\r\n        <h3>Formation aux logiques de financement<\/h3>\r\n        <p>Des ateliers collectifs pour comprendre les financements europ\u00e9ens&nbsp;: attendus des financeurs, crit\u00e8res d\u2019\u00e9ligibilit\u00e9, logique de projet, cadre logique, budgets, partenariats et \u00e9tapes cl\u00e9s d\u2019un d\u00e9p\u00f4t.<\/p>\r\n      <\/li>\r\n      <li class=\"step\" id=\"etape-3\">\r\n        <p class=\"step-top\"><span class=\"big\">03<\/span><span class=\"step-label\">\u00c9tape 3 sur 5<span class=\"step-bar\" aria-hidden=\"true\"><i class=\"done\"><\/i><i class=\"done\"><\/i><i class=\"now\"><\/i><i><\/i><i><\/i><\/span><\/span><\/p>\r\n        <h3>Accompagnement au montage<\/h3>\r\n        <p>Chaque structure transforme son id\u00e9e en projet clair, coh\u00e9rent et finan\u00e7able. Nous travaillons ensemble les objectifs, les publics vis\u00e9s, les activit\u00e9s, les r\u00e9sultats attendus, le budget, le calendrier et les partenaires.<\/p>\r\n      <\/li>\r\n      <li class=\"step\" id=\"etape-4\">\r\n        <p class=\"step-top\"><span class=\"big\">04<\/span><span class=\"step-label\">\u00c9tape 4 sur 5<span class=\"step-bar\" aria-hidden=\"true\"><i class=\"done\"><\/i><i class=\"done\"><\/i><i class=\"done\"><\/i><i class=\"now\"><\/i><i><\/i><\/span><\/span><\/p>\r\n        <h3>Relecture et d\u00e9p\u00f4t<\/h3>\r\n        <p>Les dossiers sont relus avant d\u00e9p\u00f4t pour s\u00e9curiser la coh\u00e9rence du projet, la r\u00e9daction, le budget, les pi\u00e8ces administratives et les annexes. Objectif&nbsp;: maximiser les chances de financement, tout en comprenant chaque \u00e9tape.<\/p>\r\n      <\/li>\r\n      <li class=\"step\" id=\"etape-5\">\r\n        <p class=\"step-top\"><span class=\"big\">05<\/span><span class=\"step-label\">\u00c9tape 5 sur 5<span class=\"step-bar\" aria-hidden=\"true\"><i class=\"done\"><\/i><i class=\"done\"><\/i><i class=\"done\"><\/i><i class=\"done\"><\/i><i class=\"now\"><\/i><\/span><\/span><\/p>\r\n        <h3>Transfert de comp\u00e9tences et autonomisation<\/h3>\r\n        <p>Les associations repartent avec des outils concrets, mieux outill\u00e9es pour d\u00e9poser de nouveaux projets, d\u00e9velopper leurs partenariats et renforcer durablement leur autonomie financi\u00e8re.<\/p>\r\n        <ul class=\"tools\">\r\n          <li><svg viewbox=\"0 0 16 16\" aria-hidden=\"true\"><path d=\"M4 1.5h5.5L13 5v9.5H4z M9.5 1.5V5H13\"\/><\/svg>Mod\u00e8les de dossiers<\/li>\r\n          <li><svg viewbox=\"0 0 16 16\" aria-hidden=\"true\"><path d=\"M2.5 2.5h11v11h-11z M2.5 6.2h11 M2.5 9.8h11 M6.2 2.5v11\"\/><\/svg>Trames budg\u00e9taires<\/li>\r\n          <li><svg viewbox=\"0 0 16 16\" aria-hidden=\"true\"><path d=\"M2 3.5h5a1.5 1.5 0 0 1 1.5 1.5v9A1.5 1.5 0 0 0 7 12.5H2z M14 3.5H9.5A1.5 1.5 0 0 0 8 5\"\/><\/svg>Ressources p\u00e9dagogiques<\/li>\r\n          <li><svg viewbox=\"0 0 16 16\" aria-hidden=\"true\"><path d=\"M10.5 2.5l3 3-8 8H2.5v-3z\"\/><\/svg>M\u00e9thodes de r\u00e9daction<\/li>\r\n          <li><svg viewbox=\"0 0 16 16\" aria-hidden=\"true\"><circle cx=\"8\" cy=\"8\" r=\"5.5\"\/><path d=\"M8 5v3l2 1.5\"\/><\/svg>Veille sur les appels<\/li>\r\n          <li><svg viewbox=\"0 0 16 16\" aria-hidden=\"true\"><path d=\"M1.5 3.5h13v8h-13z M5.5 14h5 M8 11.5V14\"\/><\/svg>Supports de formation<\/li>\r\n        <\/ul>\r\n      <\/li>\r\n    <\/ol>\r\n  <\/div>\r\n<\/section>\r\n<!-- ============================== 04 Projets ============================== -->\r\n<section class=\"section tint\" id=\"projets\" style=\"--h:var(--x10)\" aria-labelledby=\"projets-title\">\r\n  <div class=\"wrap\">\r\n    <div class=\"sec-head\">\r\n      <div data-reveal>\r\n        <p class=\"sec-index\"><span>04<\/span> Sur le terrain<\/p>\r\n        <h2 class=\"sec-title\" id=\"projets-title\">Des projets r\u00e9els, des <em>r\u00e9sultats mesurables.<\/em><\/h2>\r\n      <\/div>\r\n      <p class=\"sec-copy\" data-reveal style=\"--d:120\">Une s\u00e9lection de projets europ\u00e9ens accompagn\u00e9s jusqu\u2019\u00e0 leur financement, repr\u00e9sentatifs de la diversit\u00e9 des th\u00e9matiques et des partenariats transnationaux.<\/p>\r\n    <\/div>\r\n    <div class=\"projects\" data-projects>\r\n      <article class=\"project\" data-reveal>\r\n        <div class=\"duo\" data-duo aria-hidden=\"true\"><svg class=\"duo-arc\"><\/svg><span class=\"duo-home duo-fit\" style=\"--bx:8;--by:164;--bw:488;--bh:171\"><img src=\"https:\/\/socialhackerslab.com\/wp-content\/uploads\/2024\/10\/Solidarite-femmes-13.png\" alt=\"\" width=\"500\" height=\"500\" loading=\"lazy\" decoding=\"async\"><\/span><span class=\"duo-node\" style=\"--x:83%;--y:56%\"><svg viewbox=\"0 0 36 36\"><use href=\"#fl-es\"\/><\/svg><\/span><span class=\"duo-seal\"><svg viewbox=\"0 0 36 36\"><use href=\"#fl-eu\"\/><\/svg>Erasmus+<\/span><\/div>\r\n        <p class=\"theme\">\u00c9galit\u00e9 & violences de genre<\/p>\r\n        <p class=\"place\">Marseille \u00d7 Espagne<\/p>\r\n        <h3>Solidarit\u00e9 Femmes 13 \u00d7 Dem\u00e9ter<\/h3>\r\n        <p>Projet Hyphen&nbsp;: restaurer le lien m\u00e8re-enfant en contexte de violences domestiques. Module de formation, recherche-action, deux r\u00e9sidences \u00e0 M\u00e1laga et Marseille.<\/p>\r\n        <span class=\"fund\"><svg viewbox=\"0 0 16 16\" aria-hidden=\"true\"><path d=\"M3 8.5l3 3 7-7\"\/><\/svg>Erasmus+ financ\u00e9<\/span>\r\n      <\/article>\r\n      <article class=\"project\" data-reveal style=\"--d:80\">\r\n        <div class=\"duo\" data-duo=\"fan\" aria-hidden=\"true\"><svg class=\"duo-arc\"><\/svg><span class=\"duo-home duo-fit\" style=\"--bx:55;--by:55;--bw:390;--bh:390\"><img src=\"https:\/\/socialhackerslab.com\/wp-content\/uploads\/2026\/09\/shl-accueil-le-grand-bleu.jpg\" alt=\"\" width=\"500\" height=\"500\" loading=\"lazy\" decoding=\"async\"><\/span><span class=\"duo-node is-sm\" style=\"--x:80%;--y:22%\"><svg viewbox=\"0 0 36 36\"><use href=\"#fl-eu\"\/><\/svg><\/span><span class=\"duo-node is-sm\" style=\"--x:87%;--y:55%\"><svg viewbox=\"0 0 36 36\"><use href=\"#fl-eu\"\/><\/svg><\/span><span class=\"duo-node is-sm\" style=\"--x:80%;--y:87%\"><svg viewbox=\"0 0 36 36\"><use href=\"#fl-eu\"\/><\/svg><\/span><span class=\"duo-seal\"><svg viewbox=\"0 0 36 36\"><use href=\"#fl-eu\"\/><\/svg>Erasmus+<\/span><\/div>\r\n        <p class=\"theme\">Jeunesse & sport<\/p>\r\n        <p class=\"place\">Quartiers Nord de Marseille<\/p>\r\n        <h3>Le Grand Bleu<\/h3>\r\n        <p>Mobilit\u00e9 Erasmus+ pour 30 jeunes des quartiers Nord dans trois pays europ\u00e9ens&nbsp;: engagement citoyen et appartenance europ\u00e9enne par le sport.<\/p>\r\n        <span class=\"fund\"><svg viewbox=\"0 0 16 16\" aria-hidden=\"true\"><path d=\"M3 8.5l3 3 7-7\"\/><\/svg>Erasmus+ financ\u00e9<\/span>\r\n      <\/article>\r\n      <article class=\"project\" data-reveal style=\"--d:160\">\r\n        <div class=\"duo\" data-duo aria-hidden=\"true\"><svg class=\"duo-arc\"><\/svg><span class=\"duo-home duo-fit\" style=\"--bx:37;--by:199;--bw:383;--bh:106\"><img src=\"https:\/\/socialhackerslab.com\/wp-content\/uploads\/2024\/10\/action-bomaye.png\" alt=\"\" width=\"500\" height=\"500\" loading=\"lazy\" decoding=\"async\"><\/span><span class=\"duo-node\" style=\"--x:83%;--y:56%\"><svg viewbox=\"0 0 36 36\"><use href=\"#fl-gr\"\/><\/svg><\/span><span class=\"duo-seal\"><svg viewbox=\"0 0 36 36\"><use href=\"#fl-eu\"\/><\/svg>Erasmus+<\/span><\/div>\r\n        <p class=\"theme\">Culture & insertion<\/p>\r\n        <p class=\"place\">Marseille \u00d7 Gr\u00e8ce<\/p>\r\n        <h3>Action Bomaye \u00d7 Balkania<\/h3>\r\n        <p>Cin\u00e9ma et insertion socio-professionnelle&nbsp;: s\u00e9ances plein air, master classes, formation \u00e0 la r\u00e9alisation, r\u00e9duction de l\u2019empreinte carbone des festivals.<\/p>\r\n        <span class=\"fund\"><svg viewbox=\"0 0 16 16\" aria-hidden=\"true\"><path d=\"M3 8.5l3 3 7-7\"\/><\/svg>Erasmus+ financ\u00e9<\/span>\r\n      <\/article>\r\n      <article class=\"project\" data-reveal>\r\n        <div class=\"duo\" data-duo aria-hidden=\"true\"><svg class=\"duo-arc\"><\/svg><span class=\"duo-home duo-fit\" style=\"--bx:125;--by:77;--bw:246;--bh:327\"><img src=\"https:\/\/socialhackerslab.com\/wp-content\/uploads\/2024\/10\/Tesslab.png\" alt=\"\" width=\"500\" height=\"500\" loading=\"lazy\" decoding=\"async\"><\/span><span class=\"duo-node duo-hub\" style=\"--x:83%;--y:56%\"><svg viewbox=\"0 0 24 24\"><path d=\"M12 12 6 6.5M12 12l6-5M12 12l5.2 6.5M12 12l-6 5.5\"\/><circle cx=\"12\" cy=\"12\" r=\"3\"\/><circle cx=\"6\" cy=\"6.5\" r=\"1.9\"\/><circle cx=\"18\" cy=\"7\" r=\"1.9\"\/><circle cx=\"17.2\" cy=\"18.5\" r=\"1.9\"\/><circle cx=\"6\" cy=\"17.5\" r=\"1.9\"\/><\/svg><\/span><span class=\"duo-seal\"><svg viewbox=\"0 0 36 36\"><use href=\"#fl-eu\"\/><\/svg>FSE+<\/span><\/div>\r\n        <p class=\"theme\">Insertion professionnelle<\/p>\r\n        <p class=\"place\">Strasbourg<\/p>\r\n        <h3>Tesslab<\/h3>\r\n        <p>Renforcer l\u2019insertion des publics \u00e9loign\u00e9s de l\u2019emploi via un parcours de formation-action ancr\u00e9 dans l\u2019ESS, avec mobilisation du hub inter-associatif.<\/p>\r\n        <span class=\"fund\"><svg viewbox=\"0 0 16 16\" aria-hidden=\"true\"><path d=\"M3 8.5l3 3 7-7\"\/><\/svg>FSE+ financ\u00e9<\/span>\r\n      <\/article>\r\n      <article class=\"project\" data-reveal style=\"--d:80\">\r\n        <div class=\"duo\" data-duo aria-hidden=\"true\"><svg class=\"duo-arc\"><\/svg><span class=\"duo-home duo-fit\" style=\"--bx:0;--by:218;--bw:500;--bh:63\"><img src=\"https:\/\/socialhackerslab.com\/wp-content\/uploads\/2024\/10\/Groupe-dispersion.png\" alt=\"\" width=\"500\" height=\"500\" loading=\"lazy\" decoding=\"async\"><\/span><span class=\"duo-node\" style=\"--x:83%;--y:30%\"><svg viewbox=\"0 0 36 36\"><use href=\"#fl-pl\"\/><\/svg><\/span><span class=\"duo-node is-tile duo-fit\" style=\"--x:79%;--y:77%;--bx:14;--by:189;--bw:473;--bh:120\"><img src=\"https:\/\/socialhackerslab.com\/wp-content\/uploads\/2024\/10\/lOEIL-DU-LOUP.png\" alt=\"\" width=\"500\" height=\"500\" loading=\"lazy\" decoding=\"async\"><\/span><svg class=\"duo-badge\" style=\"left:calc(79% + 50px);top:calc(77% - 22px);--dl:.18s\" viewbox=\"0 0 36 36\"><use href=\"#fl-dk\"\/><\/svg><span class=\"duo-seal\"><svg viewbox=\"0 0 36 36\"><use href=\"#fl-eu\"\/><\/svg>Erasmus+<\/span><\/div>\r\n        <p class=\"theme\">Art & empowerment jeunesse<\/p>\r\n        <p class=\"place\">Marseille \u00d7 Pologne<\/p>\r\n        <h3>Groupe Dispersion \u00d7 Fundacja CEL<\/h3>\r\n        <p>Projet \u00ab Up toME \u00bb avec \u0152il du Loup (Danemark)&nbsp;: mobilit\u00e9s et cr\u00e9ation artistique pour jeunes des quartiers, \u00e9mancipation et inclusion par la danse.<\/p>\r\n        <span class=\"fund\"><svg viewbox=\"0 0 16 16\" aria-hidden=\"true\"><path d=\"M3 8.5l3 3 7-7\"\/><\/svg>Erasmus+ financ\u00e9<\/span>\r\n      <\/article>\r\n      <article class=\"project\" data-reveal style=\"--d:160\">\r\n        <div class=\"duo\" data-duo aria-hidden=\"true\"><svg class=\"duo-arc\"><\/svg><span class=\"duo-home duo-fit\" style=\"--bx:75;--by:155;--bw:364;--bh:202\"><img src=\"https:\/\/socialhackerslab.com\/wp-content\/uploads\/2024\/10\/DDA.png\" alt=\"\" width=\"500\" height=\"500\" loading=\"lazy\" decoding=\"async\"><\/span><span class=\"duo-node\" style=\"--x:83%;--y:56%\"><svg viewbox=\"0 0 36 36\"><use href=\"#fl-pt\"\/><\/svg><\/span><span class=\"duo-seal\"><svg viewbox=\"0 0 36 36\"><use href=\"#fl-eu\"\/><\/svg>Erasmus+<\/span><\/div>\r\n        <p class=\"theme\">Art & durabilit\u00e9<\/p>\r\n        <p class=\"place\">France \u00d7 Portugal<\/p>\r\n        <h3>DDA Contemporary Art \u00d7 Eruditembrace<\/h3>\r\n        <p>Laboratoire de bonnes pratiques \u00e9cologiques pour r\u00e9inventer l\u2019art de mani\u00e8re durable&nbsp;: approche holistique, interdisciplinaire, publics vari\u00e9s.<\/p>\r\n        <span class=\"fund\"><svg viewbox=\"0 0 16 16\" aria-hidden=\"true\"><path d=\"M3 8.5l3 3 7-7\"\/><\/svg>Erasmus+ financ\u00e9<\/span>\r\n      <\/article>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n<!-- ============================== T\u00e9moignages ============================== -->\r\n<section class=\"section\" aria-labelledby=\"avis-title\" style=\"--h:var(--x2)\">\r\n  <div class=\"wrap\">\r\n    <div class=\"sec-head\">\r\n      <div data-reveal>\r\n        <p class=\"sec-index\"><span>\u00b7<\/span> Ce qu\u2019elles en disent<\/p>\r\n        <h2 class=\"sec-title\" id=\"avis-title\">Des associations qui <em>s\u2019approprient les outils.<\/em><\/h2>\r\n      <\/div>\r\n    <\/div>\r\n    <div class=\"quotes\">\r\n      <figure class=\"quote feature\" data-reveal>\r\n        <span class=\"mark\" aria-hidden=\"true\">\u201c<\/span>\r\n        <blockquote>Cet accompagnement nous a permis de nous professionnaliser et de changer d\u2019\u00e9chelle. D\u00e8s la premi\u00e8re ann\u00e9e, nous avons obtenu un financement europ\u00e9en. La deuxi\u00e8me ann\u00e9e, nous avons pu d\u00e9poser et obtenir <em>deux nouveaux financements en toute autonomie.<\/em><\/blockquote>\r\n        <figcaption><img decoding=\"async\" class=\"face\" src=\"https:\/\/socialhackerslab.com\/wp-content\/uploads\/2026\/09\/shl-accueil-cecile-poujol.jpg\" alt=\"\" width=\"48\" height=\"48\" loading=\"lazy\"><span><b>C\u00e9cile Poujol<\/b><span class=\"role\">Association Fifrelin<\/span><\/span><\/figcaption>\r\n      <\/figure>\r\n      <figure class=\"quote\" data-reveal style=\"--d:100\">\r\n        <span class=\"mark\" aria-hidden=\"true\">\u201c<\/span>\r\n        <blockquote>C\u2019est toujours tr\u00e8s concret et ax\u00e9 sur notre quotidien strat\u00e9gique. Nous avons, d\u00e8s le premier d\u00e9p\u00f4t, obtenu un financement europ\u00e9en.<\/blockquote>\r\n        <figcaption><span class=\"ini\" aria-hidden=\"true\">SR<\/span><span><b>Samantha Rouchard<\/b><span class=\"role\">En Majuscule<\/span><\/span><\/figcaption>\r\n      <\/figure>\r\n      <figure class=\"quote\" data-reveal style=\"--d:200\">\r\n        <span class=\"mark\" aria-hidden=\"true\">\u201c<\/span>\r\n        <blockquote>Cet accompagnement nous a permis de p\u00e9renniser notre mod\u00e8le \u00e9conomique en \u00e9tant maintenant outill\u00e9s et autonomes dans la recherche de financements europ\u00e9ens.<\/blockquote>\r\n        <figcaption><img decoding=\"async\" class=\"face\" src=\"https:\/\/socialhackerslab.com\/wp-content\/uploads\/2026\/09\/shl-accueil-ismael-cousin.jpg\" alt=\"\" width=\"48\" height=\"48\" loading=\"lazy\"><span><b>Ismael Cousin<\/b><span class=\"role\">Action Bomaye<\/span><\/span><\/figcaption>\r\n      <\/figure>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n<!-- ============================== 05 Confiance ============================== -->\r\n<section class=\"section tint\" aria-labelledby=\"confiance-title\" style=\"--h:var(--x6)\">\r\n  <div class=\"wrap\">\r\n    <div class=\"sec-head\">\r\n      <div data-reveal>\r\n        <p class=\"sec-index\"><span>05<\/span> Pourquoi nous faire confiance<\/p>\r\n        <h2 class=\"sec-title\" id=\"confiance-title\">Trois garanties au service <em>de votre projet.<\/em><\/h2>\r\n      <\/div>\r\n    <\/div>\r\n    <div class=\"bento trust\">\r\n      <article class=\"bc\" style=\"--c:var(--t1);--cx:var(--x1)\" data-reveal>\r\n        <div class=\"bc-stage sc-ros\" data-scene=\"terrain\" aria-hidden=\"true\">\r\n          <div class=\"ros\">\r\n            <div class=\"ros-side\">\r\n              <p class=\"ros-num\" data-odo>150<\/p>\r\n              <p class=\"ros-cap\">associations accompagn\u00e9es en&nbsp;2025<\/p>\r\n            <\/div>\r\n            <div class=\"ros-roll\">\r\n              <div class=\"ros-track\">\r\n                <ul class=\"ros-list\">\r\n                  <li><span class=\"ros-logo\"><img src=\"https:\/\/socialhackerslab.com\/wp-content\/uploads\/2026\/09\/shl-accueil-action-bomaye.png\" alt=\"\" width=\"240\" height=\"61\" loading=\"lazy\" decoding=\"async\"><\/span><span class=\"ros-tx\"><b>Action Bomaye<\/b><small><em>Marseille<\/em><i> \u00b7 <\/i>art et quartiers<\/small><\/span><\/li>\r\n                  <li><span class=\"ros-logo\"><img src=\"https:\/\/socialhackerslab.com\/wp-content\/uploads\/2026\/09\/shl-accueil-k-pab6t.png\" alt=\"\" width=\"96\" height=\"96\" loading=\"lazy\" decoding=\"async\"><\/span><span class=\"ros-tx\"><b>K-Pab6T<\/b><small><em>La R\u00e9union<\/em><i> \u00b7 <\/i>innovation sociale<\/small><\/span><\/li>\r\n                  <li><span class=\"ros-logo duo-fit\" style=\"--bx:55;--by:55;--bw:390;--bh:390\"><img src=\"https:\/\/socialhackerslab.com\/wp-content\/uploads\/2026\/09\/shl-accueil-le-grand-bleu.jpg\" alt=\"\" width=\"500\" height=\"500\" loading=\"lazy\" decoding=\"async\"><\/span><span class=\"ros-tx\"><b>Le Grand Bleu<\/b><small><em>Marseille<\/em><i> \u00b7 <\/i>sport inclusif<\/small><\/span><\/li>\r\n                  <li><span class=\"ros-logo\"><img src=\"https:\/\/socialhackerslab.com\/wp-content\/uploads\/2026\/09\/shl-accueil-la-farandole.png\" alt=\"\" width=\"146\" height=\"96\" loading=\"lazy\" decoding=\"async\"><\/span><span class=\"ros-tx\"><b>Centre social La Farandole<\/b><small><em>Istres<\/em><i> \u00b7 <\/i>services de proximit\u00e9<\/small><\/span><\/li>\r\n                  <li><span class=\"ros-logo\"><img src=\"https:\/\/socialhackerslab.com\/wp-content\/uploads\/2026\/09\/shl-accueil-ferme-uhaldia.png\" alt=\"\" width=\"144\" height=\"56\" loading=\"lazy\" decoding=\"async\"><\/span><span class=\"ros-tx\"><b>La Ferme d\u2019Uhaldia<\/b><small><em>Pays basque<\/em><i> \u00b7 <\/i>climat et \u00e9ducation<\/small><\/span><\/li>\r\n                  <li><span class=\"ros-logo\"><img src=\"https:\/\/socialhackerslab.com\/wp-content\/uploads\/2026\/09\/shl-accueil-acelem.png\" alt=\"\" width=\"240\" height=\"93\" loading=\"lazy\" decoding=\"async\"><\/span><span class=\"ros-tx\"><b>Acelem<\/b><small><em>Marseille<\/em><i> \u00b7 <\/i>r\u00e9ussite scolaire<\/small><\/span><\/li>\r\n                  <li><span class=\"ros-logo duo-fit\" style=\"--bx:8;--by:164;--bw:488;--bh:171\"><img src=\"https:\/\/socialhackerslab.com\/wp-content\/uploads\/2024\/10\/Solidarite-femmes-13.png\" alt=\"\" width=\"500\" height=\"500\" loading=\"lazy\" decoding=\"async\"><\/span><span class=\"ros-tx\"><b>Solidarit\u00e9 Femmes 13<\/b><small><em>Marseille<\/em><i> \u00b7 <\/i>femmes et m\u00e8res isol\u00e9es<\/small><\/span><\/li>\r\n                  <li><span class=\"ros-logo\"><img src=\"https:\/\/socialhackerslab.com\/wp-content\/uploads\/2026\/09\/shl-accueil-nos-vies-nos-avis.png\" alt=\"\" width=\"96\" height=\"96\" loading=\"lazy\" decoding=\"async\"><\/span><span class=\"ros-tx\"><b>Nos vies nos avis<\/b><small><em>Nouvelle-Cal\u00e9donie<\/em><i> \u00b7 <\/i>participation citoyenne<\/small><\/span><\/li>\r\n                  <li><span class=\"ros-logo\"><img src=\"https:\/\/socialhackerslab.com\/wp-content\/uploads\/2026\/09\/shl-accueil-la-regie-port-de-bouc.png\" alt=\"\" width=\"240\" height=\"79\" loading=\"lazy\" decoding=\"async\"><\/span><span class=\"ros-tx\"><b>R\u00e9gie de quartier<\/b><small><em>Port-de-Bouc<\/em><i> \u00b7 <\/i>insertion par l\u2019emploi<\/small><\/span><\/li>\r\n                  <li><span class=\"ros-logo\"><img src=\"https:\/\/socialhackerslab.com\/wp-content\/uploads\/2026\/09\/shl-accueil-le-paysan-urbain.png\" alt=\"\" width=\"225\" height=\"96\" loading=\"lazy\" decoding=\"async\"><\/span><span class=\"ros-tx\"><b>Le Paysan Urbain<\/b><small><em>Marseille<\/em><i> \u00b7 <\/i>agriculture urbaine<\/small><\/span><\/li>\r\n                  <li><span class=\"ros-logo\"><img src=\"https:\/\/socialhackerslab.com\/wp-content\/uploads\/2026\/09\/shl-accueil-asc-littoral.png\" alt=\"\" width=\"150\" height=\"96\" loading=\"lazy\" decoding=\"async\"><\/span><span class=\"ros-tx\"><b>ASC Littoral<\/b><small><em>Marseille<\/em><i> \u00b7 <\/i>sport et jeunesse<\/small><\/span><\/li>\r\n                  <li><span class=\"ros-logo duo-fit\" style=\"--bx:75;--by:155;--bw:364;--bh:202\"><img src=\"https:\/\/socialhackerslab.com\/wp-content\/uploads\/2024\/10\/DDA.png\" alt=\"\" width=\"500\" height=\"500\" loading=\"lazy\" decoding=\"async\"><\/span><span class=\"ros-tx\"><b>DDA Contemporary Art<\/b><small><em>Aix-Marseille<\/em><i> \u00b7 <\/i>art contemporain<\/small><\/span><\/li>\r\n                  <li><span class=\"ros-logo\"><img src=\"https:\/\/socialhackerslab.com\/wp-content\/uploads\/2026\/09\/shl-accueil-clse.png\" alt=\"\" width=\"113\" height=\"47\" loading=\"lazy\" decoding=\"async\"><\/span><span class=\"ros-tx\"><b>CLSE<\/b><small><em>Outre-mer<\/em><i> \u00b7 <\/i>transition \u00e9cologique<\/small><\/span><\/li>\r\n                  <li><span class=\"ros-logo\"><img src=\"https:\/\/socialhackerslab.com\/wp-content\/uploads\/2026\/09\/shl-accueil-centre-social-fabien-menot.png\" alt=\"\" width=\"183\" height=\"96\" loading=\"lazy\" decoding=\"async\"><\/span><span class=\"ros-tx\"><b>Centre social Fabien Menot<\/b><small><em>Port-de-Bouc<\/em><i> \u00b7 <\/i>familles et jeunesse<\/small><\/span><\/li>\r\n                  <li><span class=\"ros-logo\"><img src=\"https:\/\/socialhackerslab.com\/wp-content\/uploads\/2026\/09\/shl-accueil-petites-cantines.png\" alt=\"\" width=\"96\" height=\"96\" loading=\"lazy\" decoding=\"async\"><\/span><span class=\"ros-tx\"><b>Les Petites Cantines<\/b><small><em>Marseille<\/em><i> \u00b7 <\/i>cantine de quartier<\/small><\/span><\/li>\r\n                  <li><span class=\"ros-logo\"><img src=\"https:\/\/socialhackerslab.com\/wp-content\/uploads\/2026\/09\/shl-accueil-ancrages.png\" alt=\"\" width=\"240\" height=\"62\" loading=\"lazy\" decoding=\"async\"><\/span><span class=\"ros-tx\"><b>Ancrages<\/b><small><em>Marseille<\/em><i> \u00b7 <\/i>formation \u00e0 l\u2019\u00e9galit\u00e9<\/small><\/span><\/li>\r\n                  <li><span class=\"ros-logo\"><img src=\"https:\/\/socialhackerslab.com\/wp-content\/uploads\/2026\/09\/shl-accueil-marseille-nord-handball.png\" alt=\"\" width=\"92\" height=\"86\" loading=\"lazy\" decoding=\"async\"><\/span><span class=\"ros-tx\"><b>Marseille Nord Handball<\/b><small><em>Marseille<\/em><i> \u00b7 <\/i>sport pour les jeunes<\/small><\/span><\/li>\r\n                  <li><span class=\"ros-logo duo-fit\" style=\"--bx:14;--by:189;--bw:473;--bh:120\"><img src=\"https:\/\/socialhackerslab.com\/wp-content\/uploads\/2024\/10\/lOEIL-DU-LOUP.png\" alt=\"\" width=\"500\" height=\"500\" loading=\"lazy\" decoding=\"async\"><\/span><span class=\"ros-tx\"><b>L\u2019\u0152il du Loup<\/b><small><em>Aix-Marseille<\/em><i> \u00b7 <\/i>publics vuln\u00e9rables<\/small><\/span><\/li>\r\n                  <li><span class=\"ros-logo\"><img src=\"https:\/\/socialhackerslab.com\/wp-content\/uploads\/2026\/09\/shl-accueil-marseille-sans-frontieres.png\" alt=\"\" width=\"104\" height=\"96\" loading=\"lazy\" decoding=\"async\"><\/span><span class=\"ros-tx\"><b>Marseille Sans Fronti\u00e8res<\/b><small><em>Marseille<\/em><i> \u00b7 <\/i>projets \u00e9ducatifs<\/small><\/span><\/li>\r\n                  <li><span class=\"ros-logo\"><img src=\"https:\/\/socialhackerslab.com\/wp-content\/uploads\/2026\/09\/shl-accueil-centre-social-del-rio.png\" alt=\"\" width=\"58\" height=\"53\" loading=\"lazy\" decoding=\"async\"><\/span><span class=\"ros-tx\"><b>Centre social Del Rio<\/b><small><em>Marseille<\/em><i> \u00b7 <\/i>inclusion sociale<\/small><\/span><\/li>\r\n                <\/ul>\r\n              <\/div>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"bc-head\">\r\n          <p class=\"bc-kicker\">01<\/p>\r\n          <h3>Une expertise \u00e9prouv\u00e9e sur le terrain<\/h3>\r\n          <p><b>150 associations accompagn\u00e9es en 2025<\/b>, dont une majorit\u00e9 issue des quartiers prioritaires, de territoires ruraux ou ultramarins. Des parcours adapt\u00e9s aux r\u00e9alit\u00e9s associatives&nbsp;: manque de temps, \u00e9quipes mixtes b\u00e9n\u00e9voles et salari\u00e9s, niveaux d\u2019exp\u00e9rience diff\u00e9rents.<\/p>\r\n        <\/div>\r\n      <\/article>\r\n      <article class=\"bc\" style=\"--c:var(--t7);--cx:var(--x7); --d:80\" data-reveal>\r\n        <div class=\"bc-stage sc-anc\" data-scene=\"ancrage\" aria-hidden=\"true\">\r\n          <p class=\"sc-cap\"><i><\/i><span data-cap-text>Tout le r\u00e9seau \u00b7 6 partenaires<\/span><\/p>\r\n          <p class=\"sc-count\" data-fam-count>04 \/ 04<\/p>\r\n          <div class=\"anc\">\r\n            <svg class=\"anc-wires\"><g class=\"anc-base\"><\/g><g class=\"anc-live\"><\/g><\/svg>\r\n            <div class=\"anc-hub\">\r\n              <span class=\"anc-rings\"><i><\/i><i><\/i><i><\/i><\/span>\r\n              <span class=\"anc-core\"><img decoding=\"async\" src=\"https:\/\/socialhackerslab.com\/wp-content\/uploads\/2024\/06\/SHL-1-480x480.png\" alt=\"\" width=\"54\" height=\"54\" loading=\"lazy\"><\/span>\r\n              <b>Social Hackers Lab<\/b>\r\n            <\/div>\r\n            <div class=\"anc-fams\">\r\n              <div class=\"anc-fam\" data-k=\"pub\" data-cap=\"Publics \u00b7 4 partenaires\"><span class=\"anc-tag\"><i><svg class=\"ic\"><use href=\"#ic-pub\"\/><\/svg><\/i>Publics<span class=\"sc-timer\"><\/span><\/span><ul><li><i class=\"anc-logo\"><img class=\"is-mark\" src=\"https:\/\/socialhackerslab.com\/wp-content\/uploads\/2026\/07\/logo_LAMETROPOLE_H_quadri-300x48.png\" alt=\"\" width=\"300\" height=\"48\" loading=\"lazy\" decoding=\"async\"><\/i><span>M\u00e9tropole Aix-Marseille<\/span><\/li><li><i class=\"anc-logo\"><img src=\"https:\/\/socialhackerslab.com\/wp-content\/uploads\/2026\/07\/logo_ANCT_header.20220901-300x111.png\" alt=\"\" width=\"300\" height=\"111\" loading=\"lazy\" decoding=\"async\"><\/i><span>ANCT<\/span><\/li><li><i class=\"anc-logo\"><img src=\"https:\/\/socialhackerslab.com\/wp-content\/uploads\/2026\/07\/Logo_Departement_Esssonne_-_2022.svg_-300x102.webp\" alt=\"\" width=\"300\" height=\"102\" loading=\"lazy\" decoding=\"async\"><\/i><span>D\u00e9partement de l\u2019Essonne<\/span><\/li><li><i class=\"anc-logo\"><svg class=\"is-flag\"><use href=\"#fl-fr\"\/><\/svg><\/i><span>DDETS<\/span><\/li><\/ul><\/div>\r\n              <div class=\"anc-fam\" data-k=\"eu\" data-cap=\"Europ\u00e9ens \u00b7 1 partenaire\"><span class=\"anc-tag\"><i class=\"is-flag\"><svg><use href=\"#fl-eu\"\/><\/svg><\/i>Europ\u00e9ens<span class=\"sc-timer\"><\/span><\/span><ul><li><i class=\"anc-logo\"><img src=\"https:\/\/socialhackerslab.com\/wp-content\/uploads\/2026\/07\/images-300x100.png\" alt=\"\" width=\"300\" height=\"100\" loading=\"lazy\" decoding=\"async\"><\/i><span>Agence Erasmus+<\/span><\/li><\/ul><\/div>\r\n              <div class=\"anc-fam\" data-k=\"pri\" data-cap=\"Priv\u00e9s \u00b7 1 partenaire\"><span class=\"anc-tag\"><i><svg class=\"ic\"><use href=\"#ic-heart\"\/><\/svg><\/i>Priv\u00e9s<span class=\"sc-timer\"><\/span><\/span><ul><li><i class=\"anc-logo\"><img src=\"https:\/\/socialhackerslab.com\/wp-content\/uploads\/2026\/07\/6690fbf9c6023a7f5b0c9890_Logo-fondation-SFR-300x89-1.png\" alt=\"\" width=\"300\" height=\"89\" loading=\"lazy\" decoding=\"async\"><\/i><span>Fondation SFR<\/span><\/li><\/ul><\/div>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"bc-head\">\r\n          <p class=\"bc-kicker\">02<\/p>\r\n          <h3>Un ancrage institutionnel solide<\/h3>\r\n          <p>L\u2019incubateur s\u2019appuie sur un r\u00e9seau de partenaires publics, europ\u00e9ens et priv\u00e9s&nbsp;: <b>M\u00e9tropole Aix-Marseille-Provence, ANCT, D\u00e9partement de l\u2019Essonne, DDETS, agence Erasmus+<\/b>\u2026<\/p>\r\n        <\/div>\r\n      <\/article>\r\n      <article class=\"bc bc-wide\" style=\"--c:var(--t5);--cx:var(--x5); --d:160\" data-reveal>\r\n        <div class=\"bc-stage sc-tra is-done\" data-scene=\"transfert\" style=\"--p:1\" aria-hidden=\"true\">\r\n          <span class=\"tra-glow is-shl\"><\/span>\r\n          <span class=\"tra-glow is-you\"><\/span>\r\n          <div class=\"tra\">\r\n            <div class=\"tra-head\">\r\n              <div class=\"tra-who is-shl\"><span class=\"tra-av\"><img decoding=\"async\" src=\"https:\/\/socialhackerslab.com\/wp-content\/uploads\/2024\/06\/SHL-1-480x480.png\" alt=\"\" width=\"30\" height=\"30\" loading=\"lazy\"><\/span><p><b>Social Hackers Lab<\/b><small><span>Accompagne<\/span><span>Se retire<\/span><\/small><\/p><\/div>\r\n              <div class=\"tra-meter\"><p><span>Autonomie<\/span><b data-pct>100&nbsp;%<\/b><\/p><span class=\"tra-bar\"><i><\/i><\/span><\/div>\r\n              <div class=\"tra-who is-you\"><span class=\"tra-av\"><svg class=\"ic\"><use href=\"#ic-users\"\/><\/svg><b class=\"tra-ok\"><svg class=\"ic\"><use href=\"#ic-check\"\/><\/svg><\/b><\/span><p><b>Votre \u00e9quipe<\/b><small><span>Apprend<\/span><span>Autonome<\/span><\/small><\/p><\/div>\r\n            <\/div>\r\n            <ol class=\"tra-rows\">\r\n              <li class=\"tra-row is-moved is-yours\"><span class=\"tra-slot\"><\/span><span class=\"tra-lane\"><\/span><span class=\"tra-slot\"><\/span><span class=\"tra-key\"><span class=\"tra-chip\"><i><svg class=\"ic\"><use href=\"#ic-compass\"\/><\/svg><\/i>Montage<b class=\"tra-ok\"><svg class=\"ic\"><use href=\"#ic-check\"\/><\/svg><\/b><span class=\"sc-timer\"><\/span><\/span><\/span><\/li>\r\n              <li class=\"tra-row is-moved is-yours\"><span class=\"tra-slot\"><\/span><span class=\"tra-lane\"><\/span><span class=\"tra-slot\"><\/span><span class=\"tra-key\"><span class=\"tra-chip\"><i><svg class=\"ic\"><use href=\"#ic-tool\"\/><\/svg><\/i>Outils<b class=\"tra-ok\"><svg class=\"ic\"><use href=\"#ic-check\"\/><\/svg><\/b><span class=\"sc-timer\"><\/span><\/span><\/span><\/li>\r\n              <li class=\"tra-row is-moved is-yours\"><span class=\"tra-slot\"><\/span><span class=\"tra-lane\"><\/span><span class=\"tra-slot\"><\/span><span class=\"tra-key\"><span class=\"tra-chip\"><i><svg class=\"ic\"><use href=\"#ic-read\"\/><\/svg><\/i>Relecture<b class=\"tra-ok\"><svg class=\"ic\"><use href=\"#ic-check\"\/><\/svg><\/b><span class=\"sc-timer\"><\/span><\/span><\/span><\/li>\r\n              <li class=\"tra-row is-moved is-yours\"><span class=\"tra-slot\"><\/span><span class=\"tra-lane\"><\/span><span class=\"tra-slot\"><\/span><span class=\"tra-key\"><span class=\"tra-chip\"><i><svg class=\"ic\"><use href=\"#ic-shield\"\/><\/svg><\/i>S\u00e9curisation<b class=\"tra-ok\"><svg class=\"ic\"><use href=\"#ic-check\"\/><\/svg><\/b><span class=\"sc-timer\"><\/span><\/span><\/span><\/li>\r\n            <\/ol>\r\n            <p class=\"tra-note\"><i><svg class=\"ic\"><use href=\"#ic-check\"\/><\/svg><\/i>90&nbsp;% des structures red\u00e9posent en autonomie l\u2019ann\u00e9e suivante<span class=\"sc-timer\"><\/span><\/p>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"bc-head\">\r\n          <p class=\"bc-kicker\">03<\/p>\r\n          <h3>Le transfert de comp\u00e9tences comme principe<\/h3>\r\n          <p>Notre mission n\u2019est pas de faire \u00e0 la place des associations, mais de leur transmettre les cl\u00e9s pour agir seules demain. Nous accompagnons, outillons, relisons, s\u00e9curisons&nbsp;: <b>l\u2019objectif final reste l\u2019autonomie.<\/b><\/p>\r\n        <\/div>\r\n      <\/article>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n<!-- ============================== 06 Formats ============================== -->\r\n<section class=\"section\" id=\"formats\" style=\"--h:var(--x9)\" aria-labelledby=\"formats-title\">\r\n  <div class=\"wrap\">\r\n    <div class=\"sec-head\">\r\n      <div data-reveal>\r\n        <p class=\"sec-index\"><span>06<\/span> Notre expertise<\/p>\r\n        <h2 class=\"sec-title\" id=\"formats-title\">Une ing\u00e9nierie p\u00e9dagogique <em>sur mesure.<\/em><\/h2>\r\n      <\/div>\r\n      <p class=\"sec-copy\" data-reveal style=\"--d:120\">Con\u00e7ue pour les r\u00e9alit\u00e9s des \u00e9quipes associatives (b\u00e9n\u00e9voles et salari\u00e9s, temps limit\u00e9, niveaux d\u2019entr\u00e9e h\u00e9t\u00e9rog\u00e8nes). Nous alternons formats collectifs et accompagnement individualis\u00e9.<\/p>\r\n    <\/div>\r\n    <div class=\"studio\" data-studio data-fmt=\"0\" data-reveal>\r\n      <div class=\"studio-nav\">\r\n        <span class=\"fmt-thumb\" aria-hidden=\"true\"><\/span>\r\n        <div class=\"studio-tabs\" role=\"tablist\" aria-label=\"Nos formats, du plus l\u00e9ger au plus pouss\u00e9\">\r\n          <button class=\"fmt-tab\" type=\"button\" role=\"tab\" id=\"fmt-tab-1\" aria-controls=\"fmt-1\" aria-selected=\"true\" style=\"--c:var(--t1);--cx:var(--x1);--hold:6.5s\">\r\n            <span class=\"fmt-top\"><span class=\"fmt-n\">01<\/span><span class=\"scale\" aria-hidden=\"true\"><i class=\"on\"><\/i><i><\/i><i><\/i><i><\/i><\/span><\/span>\r\n            <span class=\"fmt-name\">Journ\u00e9e d\u2019initiation<\/span>\r\n            <span class=\"fmt-meta\">1 journ\u00e9e \u00b7 15 \u00e0 25 pers.<\/span>\r\n            <i class=\"fmt-timer\" aria-hidden=\"true\"><\/i>\r\n          <\/button>\r\n          <button class=\"fmt-tab\" type=\"button\" role=\"tab\" id=\"fmt-tab-2\" aria-controls=\"fmt-2\" aria-selected=\"false\" tabindex=\"-1\" style=\"--c:var(--t3);--cx:var(--x3);--hold:6.5s\">\r\n            <span class=\"fmt-top\"><span class=\"fmt-n\">02<\/span><span class=\"scale\" aria-hidden=\"true\"><i class=\"on\"><\/i><i class=\"on\"><\/i><i><\/i><i><\/i><\/span><\/span>\r\n            <span class=\"fmt-name\">Formation intensive<\/span>\r\n            <span class=\"fmt-meta\">2 \u00e0 3 jours \u00b7 \u00e9quipes internes<\/span>\r\n            <i class=\"fmt-timer\" aria-hidden=\"true\"><\/i>\r\n          <\/button>\r\n          <button class=\"fmt-tab\" type=\"button\" role=\"tab\" id=\"fmt-tab-3\" aria-controls=\"fmt-3\" aria-selected=\"false\" tabindex=\"-1\" style=\"--c:var(--t5);--cx:var(--x5);--hold:11.2s\">\r\n            <span class=\"fmt-top\"><span class=\"fmt-n\">03<\/span><span class=\"scale\" aria-hidden=\"true\"><i class=\"on\"><\/i><i class=\"on\"><\/i><i class=\"on\"><\/i><i><\/i><\/span><\/span>\r\n            <span class=\"fmt-name\">Cycle d\u2019ateliers<\/span>\r\n            <span class=\"fmt-meta\">6 \u00e0 10 s\u00e9ances \u00b7 15 \u00e0 40 pers.<\/span>\r\n            <i class=\"fmt-timer\" aria-hidden=\"true\"><\/i>\r\n          <\/button>\r\n          <button class=\"fmt-tab\" type=\"button\" role=\"tab\" id=\"fmt-tab-4\" aria-controls=\"fmt-4\" aria-selected=\"false\" tabindex=\"-1\" style=\"--c:var(--t9);--cx:var(--x9);--hold:8.2s\">\r\n            <span class=\"fmt-top\"><span class=\"fmt-n\">04<\/span><span class=\"scale\" aria-hidden=\"true\"><i class=\"on\"><\/i><i class=\"on\"><\/i><i class=\"on\"><\/i><i class=\"on\"><\/i><\/span><\/span>\r\n            <span class=\"fmt-name\">Accompagnement individuel<\/span>\r\n            <span class=\"fmt-meta\">Modulable \u00b7 porteur de projet<\/span>\r\n            <i class=\"fmt-timer\" aria-hidden=\"true\"><\/i>\r\n          <\/button>\r\n        <\/div>\r\n      <\/div>\r\n      <div class=\"studio-body\">\r\n        <div class=\"fmt-panels\">\r\n          <div class=\"fmt-panel is-on\" role=\"tabpanel\" id=\"fmt-1\" aria-labelledby=\"fmt-tab-1\" tabindex=\"0\" style=\"--c:var(--t1);--cx:var(--x1)\">\r\n            <p class=\"bc-kicker\" style=\"--k:0\">Format 01 \u00b7 Collectif<\/p>\r\n            <h3 style=\"--k:1\">Journ\u00e9e d\u2019initiation<\/h3>\r\n            <p style=\"--k:2\">Acculturation aux fonds europ\u00e9ens et identification des programmes adapt\u00e9s.<\/p>\r\n            <dl class=\"fmt-specs\" style=\"--k:3\">\r\n              <div><dt>Dur\u00e9e<\/dt><dd class=\"rhythm\" aria-hidden=\"true\"><i class=\"on\"><\/i><\/dd><dd>1 journ\u00e9e<\/dd><\/div>\r\n              <div><dt>Groupe<\/dt><dd>15 \u00e0 25 personnes<\/dd><\/div>\r\n            <\/dl>\r\n          <\/div>\r\n          <div class=\"fmt-panel\" role=\"tabpanel\" id=\"fmt-2\" aria-labelledby=\"fmt-tab-2\" tabindex=\"0\" style=\"--c:var(--t3);--cx:var(--x3)\">\r\n            <p class=\"bc-kicker\" style=\"--k:0\">Format 02 \u00b7 En \u00e9quipe<\/p>\r\n            <h3 style=\"--k:1\">Formation intensive<\/h3>\r\n            <p style=\"--k:2\">Mont\u00e9e en comp\u00e9tences acc\u00e9l\u00e9r\u00e9e sur un programme cibl\u00e9.<\/p>\r\n            <dl class=\"fmt-specs\" style=\"--k:3\">\r\n              <div><dt>Dur\u00e9e<\/dt><dd class=\"rhythm\" aria-hidden=\"true\"><i class=\"on\"><\/i><i class=\"on\"><\/i><i><\/i><\/dd><dd>2 \u00e0 3 jours<\/dd><\/div>\r\n              <div><dt>Groupe<\/dt><dd>\u00c9quipes internes<\/dd><\/div>\r\n            <\/dl>\r\n          <\/div>\r\n          <div class=\"fmt-panel\" role=\"tabpanel\" id=\"fmt-3\" aria-labelledby=\"fmt-tab-3\" tabindex=\"0\" style=\"--c:var(--t5);--cx:var(--x5)\">\r\n            <p class=\"bc-kicker\" style=\"--k:0\">Format 03 \u00b7 Collectif et individuel<\/p>\r\n            <h3 style=\"--k:1\">Cycle d\u2019ateliers<\/h3>\r\n            <p style=\"--k:2\">Parcours complet du diagnostic jusqu\u2019au d\u00e9p\u00f4t, en alternance collectif et individuel.<\/p>\r\n            <dl class=\"fmt-specs\" style=\"--k:3\">\r\n              <div><dt>Dur\u00e9e<\/dt><dd class=\"rhythm is-fine\" aria-hidden=\"true\"><i class=\"on\"><\/i><i class=\"on\"><\/i><i class=\"on\"><\/i><i class=\"on\"><\/i><i class=\"on\"><\/i><i class=\"on\"><\/i><i><\/i><i><\/i><i><\/i><i><\/i><\/dd><dd>6 \u00e0 10 s\u00e9ances<\/dd><\/div>\r\n              <div><dt>Groupe<\/dt><dd>Cohorte de 15 \u00e0 40<\/dd><\/div>\r\n            <\/dl>\r\n          <\/div>\r\n          <div class=\"fmt-panel\" role=\"tabpanel\" id=\"fmt-4\" aria-labelledby=\"fmt-tab-4\" tabindex=\"0\" style=\"--c:var(--t9);--cx:var(--x9)\">\r\n            <p class=\"bc-kicker\" style=\"--k:0\">Format 04 \u00b7 Individuel<\/p>\r\n            <h3 style=\"--k:1\">Accompagnement individuel<\/h3>\r\n            <p style=\"--k:2\">Ing\u00e9nierie de dossier, recherche de partenaires, s\u00e9curisation du d\u00e9p\u00f4t.<\/p>\r\n            <dl class=\"fmt-specs\" style=\"--k:3\">\r\n              <div><dt>Dur\u00e9e<\/dt><dd class=\"rhythm is-open\" aria-hidden=\"true\"><i class=\"on\"><\/i><i class=\"on\"><\/i><i class=\"on\"><\/i><i class=\"on\"><\/i><i class=\"on\"><\/i><\/dd><dd>Modulable<\/dd><\/div>\r\n              <div><dt>Pour<\/dt><dd>Porteur de projet<\/dd><\/div>\r\n            <\/dl>\r\n          <\/div>\r\n        <\/div>\r\n        <figure class=\"stage-col\" aria-hidden=\"true\">\r\n          <div class=\"stage\">\r\n            <canvas><\/canvas>\r\n            <p class=\"stage-cap\"><i><\/i><span data-stage-cap>Pl\u00e9ni\u00e8re \u00b7 1 journ\u00e9e<\/span><\/p>\r\n            <p class=\"stage-fig\"><b>Fig. 03<\/b> \u00b7 <span data-stage-count>01 \/ 04<\/span><\/p>\r\n          <\/div>\r\n          <ul class=\"stage-key\">\r\n            <li><i class=\"k-part\"><\/i>Participants<\/li>\r\n            <li><i class=\"k-shl\"><\/i>\u00c9quipe SHL<\/li>\r\n            <li class=\"k-only\"><i class=\"k-mate\"><\/i>Partenaires<\/li>\r\n          <\/ul>\r\n        <\/figure>\r\n      <\/div>\r\n    <\/div>\r\n    <div class=\"formats-cta\" data-reveal>\r\n      <svg class=\"cta-threads\" viewbox=\"0 0 800 240\" preserveaspectratio=\"none\" aria-hidden=\"true\">\r\n        <defs><path id=\"cta-thread\" d=\"M-400 120Q-300 -8-200 120T0 120T200 120T400 120T600 120T800 120T1000 120T1200 120T1400 120T1600 120\"\/><\/defs>\r\n        <g class=\"cta-bloom\"><g class=\"cta-flow\">\r\n          <use href=\"#cta-thread\" style=\"--c:var(--t1)\"\/>\r\n          <use href=\"#cta-thread\" x=\"-40\" style=\"--c:var(--t2)\"\/>\r\n          <use href=\"#cta-thread\" x=\"-80\" style=\"--c:var(--t3)\"\/>\r\n          <use href=\"#cta-thread\" x=\"-120\" style=\"--c:var(--t4)\"\/>\r\n          <use href=\"#cta-thread\" x=\"-160\" style=\"--c:var(--t5)\"\/>\r\n          <use href=\"#cta-thread\" x=\"-200\" style=\"--c:var(--t6)\"\/>\r\n          <use href=\"#cta-thread\" x=\"-240\" style=\"--c:var(--t7)\"\/>\r\n          <use href=\"#cta-thread\" x=\"-280\" style=\"--c:var(--t8)\"\/>\r\n          <use href=\"#cta-thread\" x=\"-320\" style=\"--c:var(--t9)\"\/>\r\n          <use href=\"#cta-thread\" x=\"-360\" style=\"--c:var(--t10)\"\/>\r\n        <\/g><\/g>\r\n      <\/svg>\r\n      <div class=\"cta-copy\">\r\n        <p class=\"cta-kicker\">Collectivit\u00e9s \u00b7 Financeurs \u00b7 Fondations<\/p>\r\n        <p class=\"cta-text\">Nous concevons des actions de formation d\u00e9di\u00e9es aux structures que vous soutenez.<\/p>\r\n      <\/div>\r\n      <a class=\"btn btn-light\" href=\"#contact\">Organiser une session <span class=\"arr\" aria-hidden=\"true\">\u2192<\/span><\/a>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n<!-- ============================== 07 Ressourcerie ============================== -->\r\n<section class=\"section tint\" id=\"ressourcerie\" style=\"--h:var(--x3)\" aria-labelledby=\"hub-title\">\r\n  <div class=\"wrap hub\">\r\n    <div data-reveal>\r\n      <p class=\"sec-index\"><span>07<\/span> Ressourcerie num\u00e9rique<\/p>\r\n      <h2 class=\"sec-title\" id=\"hub-title\">Une ressourcerie au service <em>de l\u2019autonomie.<\/em><\/h2>\r\n      <p class=\"sec-copy\" style=\"margin-top:24px\">Le e-hub collaboratif met \u00e0 disposition des associations un ensemble de ressources p\u00e9dagogiques, m\u00e9thodologiques et num\u00e9riques pour les accompagner tout au long de leur mont\u00e9e en comp\u00e9tences.<\/p>\r\n      <p class=\"sec-copy\">Parcours de formation, trames budg\u00e9taires, veille sur les appels \u00e0 projets, cadre logique&nbsp;: tout reste accessible, m\u00eame apr\u00e8s l\u2019accompagnement.<\/p>\r\n      <a class=\"btn btn-ink\" href=\"https:\/\/socialhackerslab.teachizy.fr\/formations\/formation-complete-a-la-collecte-de-fonds\" target=\"_blank\" rel=\"noopener\">Acc\u00e9der \u00e0 l\u2019espace membre <span class=\"arr up\" aria-hidden=\"true\">\u2197<\/span><\/a>\r\n    <\/div>\r\n    <div class=\"res\" data-res>\r\n      <div class=\"res-stage\" aria-hidden=\"true\">\r\n        <div class=\"res-deck\">\r\n          <div class=\"res-card is-front\" data-kind=\"parcours\" style=\"--p:0;--k:var(--t3);--kx:var(--x3)\">\r\n            <div class=\"res-head\"><p class=\"res-kind\">P\u00e9dagogique<\/p><p class=\"res-title\">Parcours de formation<\/p><p class=\"res-meta\">Mont\u00e9e en comp\u00e9tences<\/p><\/div>\r\n            <div class=\"res-body par\">\r\n              <div class=\"par-fig\">\r\n                <svg class=\"par-art\" viewbox=\"0 0 400 132\">\r\n                  <defs>\r\n                    <lineargradient id=\"res-par-fade\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\"><stop offset=\"0\" stop-color=\"currentColor\" stop-opacity=\".24\"\/><stop offset=\"1\" stop-color=\"currentColor\" stop-opacity=\"0\"\/><\/lineargradient>\r\n                    <clippath id=\"res-par-clip\"><rect class=\"par-reveal\" x=\"0\" y=\"0\" width=\"400\" height=\"132\"\/><\/clippath>\r\n                  <\/defs>\r\n                  <path class=\"par-floor\" d=\"M16 124.5H384\"\/>\r\n                  <g class=\"par-drops\"><path class=\"is-on\" d=\"M40 116V124\"\/><path class=\"is-on\" d=\"M120 103V124\"\/><path class=\"is-on\" d=\"M200 74V124\"\/><path class=\"is-on\" d=\"M280 45V124\"\/><path class=\"is-on\" d=\"M360 32V124\"\/><\/g>\r\n                  <path class=\"par-area\" fill=\"url(#res-par-fade)\" clip-path=\"url(#res-par-clip)\" d=\"M40 107.1 48 106.4 56 105.6 64 104.7 72 103.6 80 102.5 88 101.1 96 99.7 104 98.0 112 96.2 120 94.2 128 92.0 136 89.6 144 87.1 152 84.3 160 81.4 168 78.3 176 75.1 184 71.8 192 68.4 200 65.0 208 61.6 216 58.2 224 54.9 232 51.7 240 48.6 248 45.7 256 42.9 264 40.4 272 38.0 280 35.8 288 33.8 296 32.0 304 30.3 312 28.9 320 27.5 328 26.4 336 25.3 344 24.4 352 23.6 360 22.9V124.5H40Z\"\/>\r\n                  <path class=\"par-way\" d=\"M40 107.1 48 106.4 56 105.6 64 104.7 72 103.6 80 102.5 88 101.1 96 99.7 104 98.0 112 96.2 120 94.2 128 92.0 136 89.6 144 87.1 152 84.3 160 81.4 168 78.3 176 75.1 184 71.8 192 68.4 200 65.0 208 61.6 216 58.2 224 54.9 232 51.7 240 48.6 248 45.7 256 42.9 264 40.4 272 38.0 280 35.8 288 33.8 296 32.0 304 30.3 312 28.9 320 27.5 328 26.4 336 25.3 344 24.4 352 23.6 360 22.9\"\/>\r\n                  <path class=\"par-trail\" pathlength=\"1\" d=\"M40 107.1 48 106.4 56 105.6 64 104.7 72 103.6 80 102.5 88 101.1 96 99.7 104 98.0 112 96.2 120 94.2 128 92.0 136 89.6 144 87.1 152 84.3 160 81.4 168 78.3 176 75.1 184 71.8 192 68.4 200 65.0 208 61.6 216 58.2 224 54.9 232 51.7 240 48.6 248 45.7 256 42.9 264 40.4 272 38.0 280 35.8 288 33.8 296 32.0 304 30.3 312 28.9 320 27.5 328 26.4 336 25.3 344 24.4 352 23.6 360 22.9\"\/>\r\n                  <g class=\"par-nodes\"><circle class=\"is-on\" cx=\"40\" cy=\"107.1\" r=\"5\"\/><circle class=\"is-on\" cx=\"120\" cy=\"94.2\" r=\"5\"\/><circle class=\"is-on\" cx=\"200\" cy=\"65\" r=\"5\"\/><circle class=\"is-on\" cx=\"280\" cy=\"35.8\" r=\"5\"\/><circle class=\"is-on\" cx=\"360\" cy=\"22.9\" r=\"5\"\/><\/g>\r\n                  <circle class=\"par-halo\" cx=\"360\" cy=\"22.9\" r=\"13\"\/>\r\n                  <circle class=\"par-dot\" cx=\"360\" cy=\"22.9\" r=\"6.5\"\/>\r\n                <\/svg>\r\n                <p class=\"par-axis\">Comp\u00e9tences<\/p>\r\n              <\/div>\r\n              <ol class=\"par-caps\"><li class=\"is-on\"><b>01<\/b>M\u00e9thode<\/li><li class=\"is-on\"><b>02<\/b>Cadre logique<\/li><li class=\"is-on\"><b>03<\/b>Budget<\/li><li class=\"is-on\"><b>04<\/b>R\u00e9seau<\/li><li class=\"is-on\"><b>05<\/b>D\u00e9p\u00f4t<\/li><\/ol>\r\n            <\/div>\r\n          <\/div>\r\n          <div class=\"res-card\" data-kind=\"budget\" style=\"--p:1;--k:var(--t5);--kx:var(--x5)\">\r\n            <div class=\"res-head\"><p class=\"res-kind\">M\u00e9thodologique<\/p><p class=\"res-title\">Trame budg\u00e9taire<\/p><p class=\"res-meta\">Budget pr\u00e9visionnel<\/p><\/div>\r\n            <div class=\"res-body bud\">\r\n              <i class=\"bud-hl\"><\/i>\r\n              <div class=\"bud-row bud-th\"><span>Poste<\/span><span>R\u00e9partition<\/span><span>Montant<\/span><\/div>\r\n              <div class=\"bud-row is-on\" style=\"--w:100%\"><span>Personnel<\/span><i><\/i><b>18&#8239;400&nbsp;\u20ac<\/b><\/div>\r\n              <div class=\"bud-row is-on\" style=\"--w:34%\"><span>D\u00e9placements<\/span><i><\/i><b>6&#8239;200&nbsp;\u20ac<\/b><\/div>\r\n              <div class=\"bud-row is-on\" style=\"--w:17%\"><span>\u00c9quipements<\/span><i><\/i><b>3&#8239;100&nbsp;\u20ac<\/b><\/div>\r\n              <div class=\"bud-row is-on\" style=\"--w:12.5%\"><span>Communication<\/span><i><\/i><b>2&#8239;300&nbsp;\u20ac<\/b><\/div>\r\n              <div class=\"bud-row is-on\" style=\"--w:11.4%\"><span>Co\u00fbts indirects (7&nbsp;%)<\/span><i><\/i><b>2&#8239;100&nbsp;\u20ac<\/b><\/div>\r\n              <div class=\"bud-row bud-total is-on\"><span>Total du projet<\/span><i><\/i><b>32&#8239;100&nbsp;\u20ac<\/b><\/div>\r\n            <\/div>\r\n          <\/div>\r\n          <div class=\"res-card\" data-kind=\"veille\" style=\"--p:2;--k:var(--t7);--kx:var(--x7)\">\r\n            <div class=\"res-head\"><p class=\"res-kind\">Num\u00e9rique<\/p><p class=\"res-title\">Veille des appels \u00e0 projets<\/p><p class=\"res-meta\">Programmes europ\u00e9ens<\/p><\/div>\r\n            <ul class=\"res-body vei\">\r\n              <li class=\"vei-new\"><span>Erasmus+<small>Partenariats de coop\u00e9ration<\/small><\/span><em>Nouvel appel<\/em><\/li>\r\n              <li><span>CERV<small>Citoyens, \u00e9galit\u00e9, droits et valeurs<\/small><\/span><em>Citoyennet\u00e9<\/em><\/li>\r\n              <li><span>Europe cr\u00e9ative<small>Projets de coop\u00e9ration europ\u00e9enne<\/small><\/span><em>Culture<\/em><\/li>\r\n              <li><span>Corps europ\u00e9en de solidarit\u00e9<small>Projets de solidarit\u00e9<\/small><\/span><em>Jeunesse<\/em><\/li>\r\n            <\/ul>\r\n          <\/div>\r\n          <div class=\"res-card\" data-kind=\"cadre\" style=\"--p:3;--k:var(--t9);--kx:var(--x9)\">\r\n            <div class=\"res-head\"><p class=\"res-kind\">M\u00e9thodologique<\/p><p class=\"res-title\">Cadre logique<\/p><p class=\"res-meta\">Matrice du projet<\/p><\/div>\r\n            <div class=\"res-body cad\">\r\n              <span><\/span><span class=\"cad-th\">Indicateurs<\/span><span class=\"cad-th\">Sources<\/span><span class=\"cad-th\">Hypoth\u00e8ses<\/span>\r\n              <span class=\"cad-rh\">Objectif g\u00e9n\u00e9ral<\/span><span class=\"cad-c is-on\"><i><\/i><i><\/i><\/span><span class=\"cad-c is-on\"><i><\/i><i><\/i><\/span><span class=\"cad-c is-on\"><i><\/i><i><\/i><\/span>\r\n              <span class=\"cad-rh\">Objectifs sp\u00e9cifiques<\/span><span class=\"cad-c is-on\"><i><\/i><i><\/i><\/span><span class=\"cad-c is-on\"><i><\/i><i><\/i><\/span><span class=\"cad-c is-on\"><i><\/i><i><\/i><\/span>\r\n              <span class=\"cad-rh\">R\u00e9sultats attendus<\/span><span class=\"cad-c is-on\"><i><\/i><i><\/i><\/span><span class=\"cad-c is-on\"><i><\/i><i><\/i><\/span><span class=\"cad-c is-on\"><i><\/i><i><\/i><\/span>\r\n              <span class=\"cad-rh\">Activit\u00e9s<\/span><span class=\"cad-c is-on\"><i><\/i><i><\/i><\/span><span class=\"cad-c is-on\"><i><\/i><i><\/i><\/span><span class=\"cad-c is-on\"><i><\/i><i><\/i><\/span>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n      <div class=\"res-key\" aria-hidden=\"true\"><span class=\"is-on\" style=\"--k:var(--t3);--kx:var(--x3)\">Parcours de formation<\/span><span style=\"--k:var(--t5);--kx:var(--x5)\">Trame budg\u00e9taire<\/span><span style=\"--k:var(--t7);--kx:var(--x7)\">Veille des appels<\/span><span style=\"--k:var(--t9);--kx:var(--x9)\">Cadre logique<\/span><\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n<!-- ============================== Contact ============================== -->\r\n<section class=\"contact\" id=\"contact\" style=\"--h:var(--x7)\" aria-labelledby=\"contact-title\">\r\n  <div class=\"wrap contact-grid\">\r\n    <div data-reveal>\r\n      <p class=\"eyebrow\">Ouvrons des portes l\u00e0 o\u00f9 elles semblent ferm\u00e9es<\/p>\r\n      <h2 id=\"contact-title\">Chaque association porte en elle une <em>dynamique europ\u00e9enne.<\/em><\/h2>\r\n      <p class=\"sec-copy\">Notre mission est d\u2019en r\u00e9v\u00e9ler le potentiel et de la rendre op\u00e9rationnelle. Collectivit\u00e9s, financeurs, fondations, associations&nbsp;: \u00e9changeons sur un accompagnement ou une action de formation d\u00e9di\u00e9e aux structures que vous soutenez.<\/p>\r\n      <div class=\"person\">\r\n        <img decoding=\"async\" class=\"person-photo\" src=\"https:\/\/socialhackerslab.com\/wp-content\/uploads\/2026\/09\/shl-accueil-sonia-omakhir.jpg\" alt=\"Sonia Omakhir\" width=\"148\" height=\"148\" loading=\"lazy\">\r\n        <div>\r\n          <b>Sonia Omakhir<\/b>\r\n          <span>Fondatrice et directrice g\u00e9n\u00e9rale<\/span>\r\n          <ul>\r\n            <li><a href=\"mailto:sonia@socialhackerslab.com\"><i>Mail<\/i>sonia@socialhackerslab.com<\/a><\/li>\r\n            <li><a href=\"tel:+33647397259\"><i>T\u00e9l.<\/i>+33 6 47 39 72 59<\/a><\/li>\r\n          <\/ul>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n    <form class=\"form\" data-form data-reveal style=\"--d:120\" novalidate action=\"\">\r\n      <h3>Parlons de votre projet<\/h3>\r\n      <p>R\u00e9ponse sous quelques jours ouvr\u00e9s.<\/p>\r\n      <div class=\"form-grid\">\r\n        <div><label for=\"f-name\">Nom et pr\u00e9nom<\/label><input id=\"f-name\" name=\"name\" autocomplete=\"name\"><\/div>\r\n        <div><label for=\"f-org\">Structure<\/label><input id=\"f-org\" name=\"org\" autocomplete=\"organization\"><\/div>\r\n        <div><label for=\"f-type\">Vous \u00eates<\/label>\r\n          <select id=\"f-type\" name=\"type\"><option>Une association<\/option><option>Une collectivit\u00e9<\/option><option>Un financeur ou une fondation<\/option><option>Autre<\/option><\/select>\r\n        <\/div>\r\n        <div><label for=\"f-mail\">Email<\/label><input id=\"f-mail\" name=\"email\" type=\"email\" autocomplete=\"email\"><\/div>\r\n        <div class=\"full\"><label for=\"f-msg\">Votre projet<\/label><textarea id=\"f-msg\" name=\"message\"><\/textarea><\/div>\r\n      <\/div>\r\n      <button class=\"btn btn-primary\" type=\"submit\">Envoyer la demande <span class=\"arr\" aria-hidden=\"true\">\u2192<\/span><\/button>\r\n      <p class=\"form-note\" data-form-note aria-live=\"polite\"><\/p>\r\n    <input type=\"hidden\" name=\"trp-form-language\" value=\"en\"\/><\/form>\r\n  <\/div>\r\n<\/section>\r\n<\/main>\r\n<footer class=\"footer\">\r\n  <div class=\"wrap\">\r\n    <div class=\"footer-grid\">\r\n      <div>\r\n        <a class=\"brand\" href=\"#top\"><span class=\"brand-mark\"><img decoding=\"async\" src=\"https:\/\/socialhackerslab.com\/wp-content\/uploads\/2024\/06\/SHL-1-480x480.png\" alt=\"Social Hackers Lab\" width=\"124\" height=\"124\" loading=\"lazy\"><\/span><\/a>\r\n        <p class=\"footer-about\">Un incubateur associatif d\u00e9di\u00e9 aux financements europ\u00e9ens et \u00e0 l\u2019innovation sociale. Nous accompagnons les associations \u00e0 impact dans la construction de mod\u00e8les \u00e9conomiques p\u00e9rennes, par la formation, l\u2019ing\u00e9nierie de projet et l\u2019acc\u00e8s aux fonds europ\u00e9ens.<\/p>\r\n      <\/div>\r\n      <div>\r\n        <h4>Navigation<\/h4>\r\n        <ul><li><a href=\"#approche\">Notre approche<\/a><\/li><li><a href=\"#methode\">Notre m\u00e9thode<\/a><\/li><li><a href=\"#projets\">Impact et r\u00e9f\u00e9rences<\/a><\/li><li><a href=\"#formats\">Formats<\/a><\/li><\/ul>\r\n      <\/div>\r\n      <div>\r\n        <h4>Ressources<\/h4>\r\n        <ul><li><a href=\"#ressourcerie\">Ressourcerie<\/a><\/li><li><a href=\"https:\/\/socialhackerslab.teachizy.fr\/formations\/formation-complete-a-la-collecte-de-fonds\" target=\"_blank\" rel=\"noopener\">Espace membre \u2197<\/a><\/li><\/ul>\r\n      <\/div>\r\n      <div>\r\n        <h4>Contact<\/h4>\r\n        <ul><li><a href=\"mailto:sonia@socialhackerslab.com\">sonia@socialhackerslab.com<\/a><\/li><li><a href=\"tel:+33647397259\">+33 6 47 39 72 59<\/a><\/li><li>Si\u00e8ge \u00e0 Marseille<\/li><\/ul>\r\n      <\/div>\r\n    <\/div>\r\n    <div class=\"footer-bottom\">\r\n      <span>\u00a9 2026 Social Hackers Lab, tous droits r\u00e9serv\u00e9s<\/span>\r\n      <span><a href=\"https:\/\/socialhackerslab.com\/en\/declaration-daccessibilite\/\">D\u00e9claration d\u2019accessibilit\u00e9<\/a> \u00b7 <a href=\"https:\/\/socialhackerslab.com\/en\/politique-de-cookies-ue\/\">Politique de cookies<\/a><\/span>\r\n    <\/div>\r\n  <\/div>\r\n<\/footer>\r\n<script>\r\n<!--\r\n(function () {\r\n  'use strict';\r\n  var root = document.getElementById('shl-accueil');\r\n  root.classList.add('js');\r\n  var calm = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\r\n  if (calm) root.classList.add('no-motion');\r\n  \/\/ L\u2019ouverture (le pont en petit) ne joue qu\u2019en arrivant en haut de page\r\n  var intro = document.getElementById('shl-accueil').querySelector('[data-intro]');\r\n  var introOn = !!intro && !calm && !document.hidden && !location.hash && window.scrollY < 40;\r\n  if (intro && !introOn) intro.parentNode.removeChild(intro);\r\n  if (introOn) root.classList.add('intro-hold');\r\n  \/* ---------------- En-t\u00eate ---------------- *\/\r\n  var header = document.getElementById('shl-accueil').querySelector('[data-header]');\r\n  var menuBtn = document.getElementById('shl-accueil').querySelector('[data-menu]');\r\n  var mobileNav = document.getElementById('mobile-nav');\r\n  var onScroll = function () { header.classList.toggle('is-solid', window.scrollY > 24); };\r\n  onScroll();\r\n  window.addEventListener('scroll', onScroll, { passive: true });\r\n  var setMenu = function (open) {\r\n    menuBtn.setAttribute('aria-expanded', String(open));\r\n    mobileNav.hidden = !open;\r\n    header.classList.toggle('is-open', open);\r\n  };\r\n  menuBtn.addEventListener('click', function () { setMenu(mobileNav.hidden); });\r\n  mobileNav.addEventListener('click', function (e) { if (e.target.closest('a')) setMenu(false); });\r\n  document.addEventListener('keydown', function (e) { if (e.key === 'Escape' && !mobileNav.hidden) { setMenu(false); menuBtn.focus(); } });\r\n  \/\/ Lien de navigation courant : un trait dans la teinte de sa section glisse\r\n  \/\/ sous le mot. Au survol, il suit la souris et prend la teinte du lien.\r\n  var nav = document.getElementById('shl-accueil').querySelector('.main-nav');\r\n  var thumb = nav.querySelector('.nav-thumb');\r\n  var navLinks = Array.prototype.slice.call(nav.querySelectorAll('a'));\r\n  var navTargets = navLinks.map(function (a) { return document.getElementById('shl-accueil').querySelector(a.getAttribute('href')); });\r\n  var current = null, hovered = null;\r\n  var placeThumb = function () {\r\n    var a = hovered || current;\r\n    thumb.style.opacity = a ? '1' : '0';\r\n    if (!a) return;\r\n    var first = !thumb.style.width;\r\n    if (first) thumb.style.transition = 'opacity .3s';\r\n    var pad = parseFloat(getComputedStyle(a).paddingLeft) || 0;\r\n    thumb.style.width = a.offsetWidth - 2 * pad + 'px';\r\n    thumb.style.transform = 'translateX(' + (a.offsetLeft + pad) + 'px)';\r\n    thumb.style.backgroundColor = getComputedStyle(a).getPropertyValue('--c');\r\n    if (first) { void thumb.offsetWidth; thumb.style.transition = ''; }\r\n  };\r\n  navLinks.forEach(function (a) { a.addEventListener('mouseenter', function () { hovered = a; placeThumb(); }); });\r\n  nav.addEventListener('mouseleave', function () { hovered = null; placeThumb(); });\r\n  window.addEventListener('resize', placeThumb);\r\n  if (document.fonts && document.fonts.ready) document.fonts.ready.then(placeThumb);\r\n  if ('IntersectionObserver' in window) {\r\n    var navIO = new IntersectionObserver(function (entries) {\r\n      entries.forEach(function (entry) {\r\n        if (!entry.isIntersecting) {\r\n          \/\/ Retour en haut de page : plus aucune section courante\r\n          if (entry.target === navTargets[0] && entry.boundingClientRect.top > 0) current = null; else return;\r\n        } else {\r\n          current = navLinks[navTargets.indexOf(entry.target)] || null;\r\n        }\r\n        navLinks.forEach(function (a) { a.classList.toggle('is-current', a === current); });\r\n        placeThumb();\r\n      });\r\n    }, { rootMargin: '-45% 0px -50% 0px' });\r\n    navTargets.forEach(function (t) { if (t) navIO.observe(t); });\r\n    \/\/ Tout en haut de page, aucune section n\u2019est courante\r\n    window.addEventListener('scroll', function () {\r\n      if (!current || navTargets[0].getBoundingClientRect().top < window.innerHeight * .5) return;\r\n      current = null;\r\n      navLinks.forEach(function (a) { a.classList.remove('is-current'); });\r\n      placeThumb();\r\n    }, { passive: true });\r\n  }\r\n  \/* ---------------- Apparitions ---------------- *\/\r\n  var onView = function (els, fn, opts) {\r\n    if (!('IntersectionObserver' in window)) { els.forEach(fn); return; }\r\n    var io = new IntersectionObserver(function (entries) {\r\n      entries.forEach(function (entry) { if (entry.isIntersecting) { io.unobserve(entry.target); fn(entry.target); } });\r\n    }, opts || { rootMargin: '0px 0px -12% 0px' });\r\n    els.forEach(function (el) { io.observe(el); });\r\n  };\r\n  onView(Array.prototype.slice.call(document.getElementById('shl-accueil').querySelectorAll('[data-reveal]:not(.hero-foot)')), function (el) { el.classList.add('is-in'); });\r\n  \/* ---------------- Titre : les lignes montent, police charg\u00e9e ---------------- *\/\r\n  \/\/ Le h\u00e9ros se montre en entier d\u00e8s l\u2019arriv\u00e9e, m\u00eame ce qui touche le bas de l\u2019\u00e9cran\r\n  var loaded = function () {\r\n    root.classList.add('is-loaded');\r\n    Array.prototype.forEach.call(document.getElementById('shl-accueil').querySelectorAll('.hero [data-reveal]:not(.hero-foot)'), function (el) { el.classList.add('is-in'); });\r\n  };\r\n  \/\/ La pr\u00e9sentation et les boutons du h\u00e9ros attendent le premier d\u00e9filement : l\u2019arriv\u00e9e\r\n  \/\/ ne montre que le titre et les mains. Le clavier les fait venir aussi.\r\n  var foot = document.getElementById('shl-accueil').querySelector('.hero-foot');\r\n  if (foot) {\r\n    var showFoot = function () {\r\n      if (window.scrollY < 2 && !foot.contains(document.activeElement)) return;\r\n      foot.classList.add('is-in');\r\n      window.removeEventListener('scroll', showFoot); foot.removeEventListener('focusin', showFoot);\r\n    };\r\n    window.addEventListener('scroll', showFoot, { passive: true }); foot.addEventListener('focusin', showFoot);\r\n    showFoot();\r\n  }\r\n  \/\/ Avec l\u2019ouverture, c\u2019est elle qui fait monter le titre\r\n  if (introOn) {} else if (document.fonts && document.fonts.ready) { document.fonts.ready.then(loaded); window.setTimeout(loaded, 900); } else loaded();\r\n  \/* ---------------- Chiffres ---------------- *\/\r\n  var fmt = function (v, d) { return v.toLocaleString('fr-FR', { minimumFractionDigits: d, maximumFractionDigits: d }); };\r\n  \/\/ Le compteur part avec l\u2019apparition de son chiffre : m\u00eame seuil que le fondu, m\u00eame\r\n  \/\/ d\u00e9calage (--d). Le z\u00e9ro se pose dans la m\u00eame image que le fondu commence, si bien\r\n  \/\/ qu\u2019on ne voit jamais le chiffre final avant qu\u2019il retombe \u00e0 z\u00e9ro.\r\n  onView(Array.prototype.slice.call(document.getElementById('shl-accueil').querySelectorAll('[data-count]')).map(function (el) { return el.closest('[data-reveal]') || el; }), function (box) {\r\n    var el = box.matches('[data-count]') ? box : box.querySelector('[data-count]');\r\n    var target = parseFloat(el.dataset.count), dec = parseInt(el.dataset.decimals || '0', 10);\r\n    if (calm) { el.textContent = fmt(target, dec); return; }\r\n    var dur = 1600, t0 = 0;\r\n    var tick = function (now) {\r\n      if (!t0) t0 = now;\r\n      var p = Math.min(1, (now - t0) \/ dur), e = 1 - Math.pow(1 - p, 4);\r\n      el.textContent = fmt(target * e, dec);\r\n      if (p < 1) requestAnimationFrame(tick);\r\n    };\r\n    el.textContent = fmt(0, dec);\r\n    window.setTimeout(function () { requestAnimationFrame(tick); }, parseInt(box.style.getPropertyValue('--d') || '0', 10));\r\n  });\r\n  \/* ---------------- Identit\u00e9 : trois sc\u00e8nes anim\u00e9es ---------------- *\/\r\n  \/\/ Chaque carte joue sa sc\u00e8ne en boucle tant qu\u2019elle est \u00e0 l\u2019\u00e9cran. Les mots ne\r\n  \/\/ bougent jamais : seuls les rep\u00e8res se d\u00e9placent (point, curseur, surlignage,\r\n  \/\/ barre), et le texte n\u2019arrive qu\u2019en fondu, une fois le mouvement fini. Le\r\n  \/\/ balisage porte d\u00e9j\u00e0 l\u2019\u00e9tat final : c\u2019est lui qu\u2019on garde en mouvement r\u00e9duit.\r\n  (function () {\r\n    var each = function (list, fn) { Array.prototype.forEach.call(list, fn); };\r\n    var turn = function (el, cls, on) { el.classList.toggle(cls, !!on); };\r\n    var restart = function (el, cls) { el.classList.remove(cls); void el.offsetWidth; el.classList.add(cls); };\r\n    var scenes = {\r\n      \/\/ 01 \u00b7 Autonomie financi\u00e8re : vos projets tiennent sur un seul pilier et\r\n      \/\/ vacillent ; les fonds europ\u00e9ens, puis les autres ressources, montent sous le\r\n      \/\/ plateau et l\u2019immobilisent. Les mots n\u2019arrivent qu\u2019une fois tout immobile.\r\n      piliers: function (st) {\r\n        var cols = st.querySelectorAll('.pil-col'), slab = st.querySelector('.pil-slab');\r\n        var DROP = 96, REACH = 119, TILT = 6 * Math.PI \/ 180, PERIOD = 2600, raf = 0;\r\n        var side = [cols[0], cols[2]].map(function (col) { return { col: col, p: 1, from: 1, to: 1, t0: 0, d: 1 }; });\r\n        var ease = function (k) { return k < .5 ? 4 * k * k * k : 1 - Math.pow(2 - 2 * k, 3) \/ 2; };\r\n        var move = function (s, to, d) { s.from = s.p; s.to = to; s.t0 = performance.now(); s.d = d; };\r\n        \/\/ Marge de bascule d\u2019un c\u00f4t\u00e9 : pleine quand le pilier est loin, elle se\r\n        \/\/ referme en douceur \u00e0 son approche (tanh x \u2264 x : le plateau ne le traverse pas)\r\n        var room = function (s) { return TILT * Math.tanh(Math.asin(Math.min(1, (1 - s.p) * DROP \/ REACH)) \/ TILT); };\r\n        var draw = function (now) {\r\n          side.forEach(function (s) {\r\n            var k = Math.min(1, (now - s.t0) \/ s.d);\r\n            s.p = s.from + (s.to - s.from) * ease(k);\r\n            s.col.setAttribute('transform', 'translate(0 ' + ((1 - s.p) * DROP).toFixed(2) + ')');\r\n          });\r\n          \/\/ Le plateau se balance autour du pilier central, entre les deux marges :\r\n          \/\/ la bascule se resserre \u00e0 chaque pilier qui monte et s\u2019\u00e9teint avec le dernier\r\n          var L = room(side[0]), R = room(side[1]);\r\n          var a = (R - L) \/ 2 + (R + L) \/ 2 * Math.sin(now \/ PERIOD * 2 * Math.PI);\r\n          slab.setAttribute('transform', 'rotate(' + (a * 180 \/ Math.PI).toFixed(3) + ' 150 44)');\r\n        };\r\n        var loop = function (now) { draw(now); raf = window.requestAnimationFrame(loop); };\r\n        return {\r\n          reset: function () { turn(st, 'is-b', 0); side.forEach(function (s) { s.from = s.to = 0; }); draw(performance.now()); },\r\n          steps: [\r\n            [function () {}, 1600],\r\n            [function () { move(side[0], 1, 1300); }, 1700],\r\n            [function () { move(side[1], 1, 1300); }, 1700],\r\n            [function () { turn(st, 'is-b', 1); }, 4400],\r\n            [function () { turn(st, 'is-b', 0); }, 300],\r\n            [function () { move(side[0], 0, 1000); move(side[1], 0, 1000); }, 1200]\r\n          ],\r\n          \/\/ Le balancement tourne en continu, mais seulement quand la sc\u00e8ne est visible\r\n          run: function (go) { window.cancelAnimationFrame(raf); raf = go ? window.requestAnimationFrame(loop) : 0; }\r\n        };\r\n      },\r\n      \/\/ 02 \u00b7 Dans la dur\u00e9e : un premier dossier s\u2019\u00e9crit \u00e0 deux, SHL en gris, l\u2019\u00e9quipe\r\n      \/\/ en vert, puis il est d\u00e9pos\u00e9. SHL s\u2019\u00e9clipse ; l\u2019\u00e9quipe duplique le mod\u00e8le et\r\n      \/\/ remplit seule, de plus en plus vite, deux nouveaux dossiers. Tout suit une\r\n      \/\/ horloge unique, qui s\u2019arr\u00eate hors \u00e9cran et reprend o\u00f9 elle en \u00e9tait.\r\n      dossiers: function (st) {\r\n        var Y = 10, GRAB = [24, 15], OUT = 14400, LOOP = 15200;\r\n        var LINES = [[10, 28, 52], [10, 39, 44], [10, 50, 52], [10, 61, 30]];\r\n        var lin = function (k) { return k; },\r\n            io = function (k) { return k < .5 ? 4 * k * k * k : 1 - Math.pow(2 - 2 * k, 3) \/ 2; },\r\n            sine = function (k) { return (1 - Math.cos(Math.PI * k)) \/ 2; },\r\n            out = function (k) { return 1 - Math.pow(1 - k, 3); },\r\n            back = function (k) { k -= 1; return 1 + 2.4 * k * k * k + 1.4 * k * k; };\r\n        \/\/ Une piste : des segments [d\u00e9but, fin, de, \u00e0, courbe], rang\u00e9s dans l\u2019ordre du temps\r\n        var track = function (v) { return [[0, 0, v, v, lin]]; };\r\n        var val = function (tr, t) {\r\n          var v = tr[0][2];\r\n          for (var i = 0; i < tr.length && t >= tr[i][0]; i++) {\r\n            var s = tr[i], e = s[4](s[1] > s[0] ? Math.min(1, (t - s[0]) \/ (s[1] - s[0])) : 1);\r\n            v = typeof s[2] === 'number' ? s[2] + (s[3] - s[2]) * e : [s[2][0] + (s[3][0] - s[2][0]) * e, s[2][1] + (s[3][1] - s[2][1]) * e];\r\n          }\r\n          return v;\r\n        };\r\n        var sheets = Array.prototype.map.call(st.querySelectorAll('.dos-sheet'), function (g, k) {\r\n          var x = 14 + 100 * k;\r\n          return { g: g, x: x, fills: g.querySelectorAll('.dos-fill'), ok: g.querySelector('.dos-ok'), lift: g.querySelector('.dos-lift'),\r\n            pos: track([x, Y]), show: track(0), up: track(0), pop: track(0), ink: LINES.map(function () { return track(0); }) };\r\n        });\r\n        var cursor = function (sel, at) { return { el: st.querySelector(sel), at: at, pos: track(at), show: track(0) }; };\r\n        var shl = cursor('.dos-cur.is-shl', [-16, 34]), you = cursor('.dos-cur.is-you', [150, 150]), live = st.querySelector('.dos-live');\r\n        var go = function (c, t0, t1, to, e) { c.pos.push([t0, t1, c.at, to, e || io]); c.at = to; };\r\n        var tip = function (s, i, end) { return [s.x + LINES[i][0] + (end ? LINES[i][2] : 0), Y + LINES[i][1] + 2]; };\r\n        \/\/ Le trait suit la pointe du curseur : m\u00eame dur\u00e9e, m\u00eame courbe\r\n        var write = function (c, s, i, t, d) { go(c, t, t + d, tip(s, i, 1), sine); s.ink[i].push([t, t + d, 0, 1, sine]); return t + d; };\r\n        \/\/ Dupliquer : la copie se d\u00e9tache du dossier mod\u00e8le, suit le curseur, se pose\r\n        var copy = function (from, to, t) {\r\n          go(you, t - 550, t, [from.x + GRAB[0], Y + GRAB[1]]);\r\n          to.pos = [[0, 0, [from.x, Y], [from.x, Y], lin], [t + 180, t + 900, [from.x, Y], [to.x, Y], io]];\r\n          to.show.push([t, t + 260, 0, 1, out]);\r\n          to.up.push([t, t + 220, 0, 1, out], [t + 900, t + 1150, 1, 0, io]);\r\n          go(you, t + 180, t + 900, [to.x + GRAB[0], Y + GRAB[1]]);\r\n          return t + 1150;\r\n        };\r\n        var alone = function (s, t, k) {\r\n          for (var i = 0; i < 4; i++) {\r\n            go(you, t, t + 150 * k, tip(s, i, 0));\r\n            t = write(you, s, i, t + 150 * k, (60 + LINES[i][2] * 6) * k);\r\n          }\r\n          s.pop.push([t + 100, t + 500, 0, 1, back]);\r\n          return t + 500;\r\n        };\r\n        var A = sheets[0], B = sheets[1], C = sheets[2];\r\n        \/\/ Ann\u00e9e 1 : \u00e0 deux, ligne par ligne\r\n        A.show.push([200, 650, 0, 1, out]);\r\n        shl.show.push([400, 700, 0, 1, lin]); you.show.push([550, 850, 0, 1, lin]);\r\n        go(shl, 400, 1150, tip(A, 0, 0)); go(you, 550, 1350, tip(A, 1, 0));\r\n        write(shl, A, 0, 1300, 580);\r\n        go(shl, 1880, 2350, tip(A, 2, 0));\r\n        write(you, A, 1, 1880, 520);\r\n        write(shl, A, 2, 2400, 580);\r\n        go(you, 2400, 2850, tip(A, 3, 0));\r\n        write(you, A, 3, 2980, 400);\r\n        A.pop.push([3500, 3900, 0, 1, back]);\r\n        \/\/ SHL s\u2019\u00e9clipse\r\n        go(shl, 3950, 4850, [-24, -18]); shl.show.push([4150, 4850, 1, 0, lin]);\r\n        \/\/ Ann\u00e9e 2 : l\u2019\u00e9quipe seule, deux fois, de plus en plus vite\r\n        alone(C, copy(B, C, alone(B, copy(A, B, 5300), 1) + 250), .8);\r\n        go(you, 12500, 13100, [276, 100]);\r\n        var P = function (v) { return v.toFixed(2); };\r\n        var draw = function (t) {\r\n          sheets.forEach(function (s) {\r\n            var p = val(s.pos, t), show = val(s.show, t), up = val(s.up, t);\r\n            s.g.setAttribute('transform', 'translate(' + P(p[0] + 36) + ' ' + P(p[1] + 48) + ') scale(' + (.96 + .04 * show + .035 * up).toFixed(4) + ') translate(-36 -48)');\r\n            s.g.style.opacity = show;\r\n            s.lift.style.opacity = up;\r\n            s.ink.forEach(function (tr, i) { s.fills[i].setAttribute('width', P(LINES[i][2] * val(tr, t))); });\r\n            s.ok.setAttribute('transform', 'translate(58 80) scale(' + Math.max(0, val(s.pop, t)).toFixed(4) + ')');\r\n          });\r\n          [shl, you].forEach(function (c) {\r\n            var p = val(c.pos, t);\r\n            c.el.setAttribute('transform', 'translate(' + P(p[0]) + ' ' + P(p[1]) + ')');\r\n            c.el.style.opacity = val(c.show, t);\r\n          });\r\n          live.style.opacity = t < OUT ? 1 : Math.max(0, 1 - (t - OUT) \/ 550);\r\n        };\r\n        var raf = 0, clock = 0, last = 0;\r\n        var frame = function (now) { clock = (clock + Math.min(50, now - last)) % LOOP; last = now; draw(clock); raf = window.requestAnimationFrame(frame); };\r\n        return {\r\n          reset: function () { clock = 0; draw(0); },\r\n          run: function (on) { window.cancelAnimationFrame(raf); raf = on ? (last = performance.now(), window.requestAnimationFrame(frame)) : 0; }\r\n        };\r\n      },\r\n      \/\/ 03 \u00b7 Opportunit\u00e9s : de gauche \u00e0 droite, un fil se trace de l\u2019association vers\r\n      \/\/ chaque drapeau, qui prend ses couleurs \u00e0 l\u2019arriv\u00e9e ; puis tout s\u2019efface\r\n      reseau: function (st) {\r\n        var NS = 'http:\/\/www.w3.org\/2000\/svg';\r\n        var svg = st.querySelector('svg'), core = st.querySelector('.net-core');\r\n        var nodes = Array.prototype.slice.call(st.querySelectorAll('.net-node'));\r\n        var paths = [], dot = null, raf = 0;\r\n        var layout = function () {\r\n          var w = st.clientWidth, h = st.clientHeight;\r\n          if (!w || !h) return;\r\n          var cx = w \/ 2, cy = h - 42, hy = cy - 16;\r\n          var R = Math.max(90, Math.min((w \/ 2 - 34) \/ .906, cy - 46));\r\n          core.style.setProperty('--x', cx + 'px');\r\n          core.style.setProperty('--y', cy + 'px');\r\n          svg.setAttribute('viewBox', '0 0 ' + w + ' ' + h);\r\n          svg.textContent = '';\r\n          [.44, .66, .88].forEach(function (f) {\r\n            var r = R * f, p = document.createElementNS(NS, 'path');\r\n            p.setAttribute('d', 'M' + (cx - r) + ' ' + cy + 'A' + r + ' ' + r + ' 0 0 1 ' + (cx + r) + ' ' + cy);\r\n            p.setAttribute('class', 'net-band');\r\n            p.setAttribute('stroke-width', Math.round(R * .07));\r\n            svg.appendChild(p);\r\n          });\r\n          \/\/ Chaque fil monte droit de l\u2019association, puis s\u2019incline vers son drapeau\r\n          paths = nodes.map(function (node, i) {\r\n            var a = Math.PI * (155 - i * 26) \/ 180, x = cx + R * Math.cos(a), y = cy - R * Math.sin(a), my = (hy + y) \/ 2;\r\n            var p = document.createElementNS(NS, 'path');\r\n            node.style.setProperty('--x', x + 'px');\r\n            node.style.setProperty('--y', y + 'px');\r\n            p.setAttribute('d', 'M' + cx + ' ' + hy + 'C' + cx + ' ' + my + ' ' + x + ' ' + my + ' ' + x + ' ' + y);\r\n            p.setAttribute('class', 'net-line' + (node.classList.contains('is-on') ? ' is-on' : ''));\r\n            p.style.setProperty('--c', getComputedStyle(node).getPropertyValue('--c').trim());\r\n            svg.appendChild(p);\r\n            return p;\r\n          });\r\n          dot = document.createElementNS(NS, 'circle');\r\n          dot.setAttribute('r', 3.5);\r\n          dot.setAttribute('class', 'net-dot');\r\n          svg.appendChild(dot);\r\n        };\r\n        var connect = function (i) {\r\n          var p = paths[i], L = p.getTotalLength(), t0 = performance.now();\r\n          restart(core, 'is-ping');\r\n          p.style.strokeDasharray = L;\r\n          p.style.strokeDashoffset = L;\r\n          p.classList.add('is-on');\r\n          dot.style.setProperty('--c', p.style.getPropertyValue('--c'));\r\n          dot.classList.add('is-on');\r\n          window.cancelAnimationFrame(raf);\r\n          var frame = function (now) {\r\n            var k = Math.min(1, (now - t0) \/ 700), e = k < .5 ? 4 * k * k * k : 1 - Math.pow(2 - 2 * k, 3) \/ 2, pt = p.getPointAtLength(L * e);\r\n            p.style.strokeDashoffset = L * (1 - e);\r\n            dot.setAttribute('cx', pt.x);\r\n            dot.setAttribute('cy', pt.y);\r\n            if (k < 1) raf = window.requestAnimationFrame(frame);\r\n            else { dot.classList.remove('is-on'); nodes[i].classList.add('is-on'); }\r\n          };\r\n          raf = window.requestAnimationFrame(frame);\r\n        };\r\n        var clear = function () {\r\n          st.classList.remove('is-fade');\r\n          nodes.forEach(function (n) { n.classList.remove('is-on'); });\r\n          paths.forEach(function (p) { p.classList.remove('is-on'); p.style.strokeDasharray = p.style.strokeDashoffset = ''; });\r\n        };\r\n        var steps = nodes.map(function (n, i) { return [function () { connect(i); }, 880]; });\r\n        steps.push([function () {}, 2400]);\r\n        steps.push([function () { turn(st, 'is-fade', 1); nodes.forEach(function (n) { n.classList.remove('is-on'); }); }, 800]);\r\n        steps.push([clear, 500]);\r\n        return { layout: layout, reset: function () { clear(); st.classList.add('is-live'); }, steps: steps };\r\n      },\r\n      \/\/ Garanties \u00b7 01 : le compteur monte \u00e0 150 quand la carte appara\u00eet ; les\r\n      \/\/ associations, elles, d\u00e9filent en continu, \u00e0 allure lente et constante,\r\n      \/\/ sans jamais s\u2019arr\u00eater.\r\n      terrain: function (st) {\r\n        var list = st.querySelector('.ros-list'), track = list.parentNode, odo = st.querySelector('[data-odo]');\r\n        var started = false, reels = [], dur = 0, SPEED = 20;\r\n        \/\/ La liste suivie de sa copie : la boucle se referme sans raccord\r\n        track.appendChild(list.cloneNode(true));\r\n        st.querySelector('.ros').classList.add('is-loop');\r\n        \/\/ Compteur \u00e0 rouleaux : chaque chiffre d\u00e9file depuis 0, les unit\u00e9s tournent le plus\r\n        if (odo && !calm) {\r\n          var digits = odo.textContent.trim().split('');\r\n          odo.textContent = '';\r\n          digits.forEach(function (ch, i) {\r\n            var col = document.createElement('span'), reel = document.createElement('span'), ghost = document.createElement('i');\r\n            var n = +ch + 10 * i;\r\n            ghost.textContent = '0';\r\n            col.appendChild(ghost);\r\n            for (var v = 0; v <= n; v++) { var c = document.createElement('span'); c.textContent = v % 10; reel.appendChild(c); }\r\n            col.className = 'odo';\r\n            col.style.setProperty('--od', i * 140 + 'ms');\r\n            col.appendChild(reel);\r\n            odo.appendChild(col);\r\n            reels.push({ col: col, ghost: ghost, ch: ch, reel: reel, n: n });\r\n          });\r\n        }\r\n        \/\/ Largeurs en em : elles suivent la taille du chiffre d\u2019une mise en page \u00e0 l\u2019autre\r\n        var count = function () {\r\n          if (!reels.length) return;\r\n          var fs = parseFloat(getComputedStyle(odo).fontSize);\r\n          reels.forEach(function (r) {\r\n            var w0 = r.col.offsetWidth;\r\n            r.ghost.textContent = r.ch;\r\n            var w1 = r.col.offsetWidth;\r\n            r.col.style.width = w0 \/ fs + 'em';\r\n            void r.col.offsetWidth;\r\n            r.col.style.width = w1 \/ fs + 'em';\r\n            r.reel.style.transform = 'translateY(' + -r.n + 'em)';\r\n          });\r\n        };\r\n        return {\r\n          \/\/ Allure fixe en px\/s, quelle que soit la hauteur de la liste ; on ne la\r\n          \/\/ retouche que si la liste change vraiment, pour ne pas faire sauter le d\u00e9filement\r\n          layout: function () {\r\n            var d = list.offsetHeight \/ SPEED;\r\n            if (Math.abs(d - dur) > 2) { dur = d; track.style.setProperty('--dur', d.toFixed(1) + 's'); }\r\n          },\r\n          reset: function () {},\r\n          run: function (go) {\r\n            if (!go || started) return;\r\n            started = true;\r\n            count();\r\n          }\r\n        };\r\n      },\r\n      \/\/ Garanties \u00b7 02 : l\u2019incubateur au c\u0153ur, ses partenaires rang\u00e9s par famille.\r\n      \/\/ Les fils partent de lui ; puis chaque famille, tour \u00e0 tour, envoie son\r\n      \/\/ signal jusqu\u2019au c\u0153ur, qui bat \u00e0 chaque arriv\u00e9e. En dernier, toutes ensemble.\r\n      \/\/ La barre de l\u2019\u00e9tiquette active sert de minuterie ; le libell\u00e9 du haut dit\r\n      \/\/ la famille et son nombre de partenaires. Un clic sur une famille, un\r\n      \/\/ partenaire ou le c\u0153ur prend la main.\r\n      ancrage: function (st) {\r\n        var NS = 'http:\/\/www.w3.org\/2000\/svg';\r\n        var box = st.querySelector('.anc'), svg = st.querySelector('.anc-wires'), core = st.querySelector('.anc-core');\r\n        var base = svg.querySelector('.anc-base'), live = svg.querySelector('.anc-live');\r\n        var fams = Array.prototype.slice.call(st.querySelectorAll('.anc-fam'));\r\n        var cap = st.querySelector('.sc-cap'), capText = st.querySelector('[data-cap-text]'), counter = st.querySelector('[data-fam-count]');\r\n        var ALL = capText.textContent, F = fams.length + 1, pad = function (n) { return (n < 10 ? '0' : '') + n; };\r\n        var TAIL = 42, D = 1150, links = [], flying = [], raf = 0, f = -1, auto = !calm, started = false, swap = 0;\r\n        var el = function (tag, cls, k) { var e = document.createElementNS(NS, tag); e.setAttribute('class', cls); if (k) e.style.setProperty('--k', k); return e; };\r\n        fams.forEach(function (fam, fi) {\r\n          var k = getComputedStyle(fam).getPropertyValue('--k').trim();\r\n          fam.style.setProperty('--f', fi);\r\n          Array.prototype.forEach.call(fam.querySelectorAll('li'), function (li, j) {\r\n            li.style.setProperty('--j', j);\r\n            var link = { fam: fam, tag: fam.querySelector('.anc-tag'), li: li, k: k, L: 0,\r\n              wire: el('path', 'anc-wire'), comet: el('path', 'anc-comet', k), head: el('circle', 'anc-head', k) };\r\n            link.wire.style.setProperty('--f', fi);\r\n            link.head.setAttribute('r', 3.6);\r\n            link.comet.style.opacity = 0;\r\n            base.appendChild(link.wire);\r\n            live.appendChild(link.comet);\r\n            live.appendChild(link.head);\r\n            links.push(link);\r\n          });\r\n        });\r\n        var P = function (v) { return v.toFixed(1); };\r\n        \/\/ Chaque fil part du partenaire, traverse l\u2019\u00e9tiquette de sa famille et\r\n        \/\/ arrive sur le bord du c\u0153ur, dans l\u2019axe du centre\r\n        \/\/ Positions de mise en page, relatives au r\u00e9seau : les transformations\r\n        \/\/ de l\u2019apparition (d\u00e9calage, \u00e9chelle) ne faussent pas le trac\u00e9\r\n        var rect = function (e) {\r\n          var r = { w: e.offsetWidth, h: e.offsetHeight, x: 0, y: 0 };\r\n          for (; e && e !== box; e = e.offsetParent) { r.x += e.offsetLeft; r.y += e.offsetTop; }\r\n          return r;\r\n        };\r\n        var layout = function () {\r\n          if (!box.offsetWidth) return;\r\n          var c = rect(core), cx = c.x + c.w \/ 2, cy = c.y + c.h \/ 2, R = c.w \/ 2 + 2;\r\n          svg.setAttribute('viewBox', '0 0 ' + box.offsetWidth + ' ' + box.offsetHeight);\r\n          links.forEach(function (k) {\r\n            var r = rect(k.li), t = rect(k.tag);\r\n            var x = r.x, y = r.y + r.h \/ 2, d = 'M' + P(x) + ' ' + P(y);\r\n            if (t.x + t.w < r.x - 4) {\r\n              var tr = t.x + t.w, tl = t.x + 8, ty = t.y + t.h \/ 2, m = (x - tr) \/ 2;\r\n              d += ' C' + P(x - m) + ' ' + P(y) + ' ' + P(tr + m) + ' ' + P(ty) + ' ' + P(tr) + ' ' + P(ty) + ' L' + P(tl) + ' ' + P(ty);\r\n              x = tl; y = ty;\r\n            }\r\n            var an = Math.atan2(y - cy, x - cx), ex = cx + R * Math.cos(an), ey = cy + R * Math.sin(an), m2 = Math.max(12, (x - ex) \/ 2);\r\n            d += ' C' + P(x - m2) + ' ' + P(y) + ' ' + P(ex + m2 * .6 * Math.cos(an)) + ' ' + P(ey + m2 * .6 * Math.sin(an)) + ' ' + P(ex) + ' ' + P(ey);\r\n            k.wire.setAttribute('d', d);\r\n            k.comet.setAttribute('d', d);\r\n            k.L = k.wire.getTotalLength();\r\n            k.wire.style.strokeDasharray = P(k.L) + ' ' + P(k.L);\r\n            k.wire.style.setProperty('--L', P(k.L) + 'px');\r\n            k.comet.style.strokeDasharray = TAIL + ' ' + P(k.L + TAIL * 2);\r\n          });\r\n        };\r\n        var io = function (x) { return x < .5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) \/ 2; };\r\n        \/\/ Un signal : une tra\u00een\u00e9e courte et une t\u00eate lumineuse, du partenaire au c\u0153ur\r\n        var frame = function (now) {\r\n          flying = flying.filter(function (p) {\r\n            var k = p.link, u = (now - p.t0) \/ D;\r\n            if (u < 0) return true;\r\n            if (!p.lit) { p.lit = true; k.li.classList.add('is-ping'); k.comet.style.opacity = 1; }\r\n            var s = io(Math.min(1, u)) * (k.L + TAIL), h = Math.min(s, k.L), pt = k.wire.getPointAtLength(h);\r\n            k.comet.style.strokeDashoffset = P(TAIL - s);\r\n            k.head.setAttribute('cx', P(pt.x));\r\n            k.head.setAttribute('cy', P(pt.y));\r\n            k.head.style.opacity = s < k.L ? Math.min(1, s \/ 20) : Math.max(0, 1 - (s - k.L) \/ TAIL);\r\n            if (!p.hit && s >= k.L) {\r\n              p.hit = true;\r\n              k.li.classList.remove('is-ping');\r\n              core.style.setProperty('--k', k.k);\r\n              core.classList.remove('is-beat'); void core.offsetWidth; core.classList.add('is-beat');\r\n            }\r\n            if (u >= 1) { k.comet.style.opacity = 0; k.head.style.opacity = 0; return false; }\r\n            return true;\r\n          });\r\n          raf = flying.length ? window.requestAnimationFrame(frame) : 0;\r\n        };\r\n        var send = function (link, delay) {\r\n          flying.push({ link: link, t0: performance.now() + delay });\r\n          if (!raf) raf = window.requestAnimationFrame(frame);\r\n        };\r\n        var stop = function () {\r\n          window.cancelAnimationFrame(raf); raf = 0; flying = [];\r\n          links.forEach(function (k) { k.comet.style.opacity = 0; k.head.style.opacity = 0; k.li.classList.remove('is-ping'); });\r\n        };\r\n        var bars = fams.map(function (fam) { return fam.querySelector('.sc-timer'); });\r\n        \/\/ Le libell\u00e9 change en fondu, comme celui de la sc\u00e8ne des formats\r\n        var caption = function (text, fam) {\r\n          var st2 = fam ? getComputedStyle(fam) : null;\r\n          cap.style.setProperty('--k', st2 ? st2.getPropertyValue('--k') : '');\r\n          cap.style.setProperty('--kx', st2 ? st2.getPropertyValue('--kx') : '');\r\n          if (capText.textContent === text) return;\r\n          window.clearTimeout(swap);\r\n          capText.classList.add('is-swap');\r\n          swap = window.setTimeout(function () { capText.textContent = text; capText.classList.remove('is-swap'); }, 250);\r\n        };\r\n        \/\/ Publics, europ\u00e9ens, priv\u00e9s, puis tout le r\u00e9seau \u00e0 la fois\r\n        var show = function (n) {\r\n          f = n;\r\n          var all = f === fams.length;\r\n          st.classList.toggle('has-focus', !all);\r\n          fams.forEach(function (fam, i) {\r\n            var on = all || i === f;\r\n            fam.classList.toggle('is-on', on);\r\n            bars[i].classList.remove('is-run');\r\n            void bars[i].offsetWidth;\r\n            if (on && auto) bars[i].classList.add('is-run');\r\n          });\r\n          caption(all ? ALL : fams[f].dataset.cap, all ? null : fams[f]);\r\n          counter.textContent = pad(f + 1) + ' \/ ' + pad(F);\r\n          links.forEach(function (k, i) {\r\n            if (all) send(k, i * 90);\r\n            else if (k.fam === fams[f]) send(k, k.li.style.getPropertyValue('--j') * 200);\r\n          });\r\n        };\r\n        bars.forEach(function (b, i) { b.addEventListener('animationend', function () { if (auto && (f === i || (f === fams.length && i === 0))) show((f + 1) % F); }); });\r\n        var take = function (n) { auto = false; st.classList.remove('is-auto'); show(n); };\r\n        fams.forEach(function (fam, i) {\r\n          fam.querySelector('.anc-tag').addEventListener('click', function () { take(i); });\r\n          Array.prototype.forEach.call(fam.querySelectorAll('li'), function (li) { li.addEventListener('click', function () { take(i); }); });\r\n        });\r\n        core.addEventListener('click', function () { take(fams.length); });\r\n        return {\r\n          layout: layout,\r\n          reset: function () {\r\n            stop();\r\n            f = -1;\r\n            st.classList.remove('is-built', 'has-focus');\r\n            st.classList.add('is-pre', 'is-auto');\r\n            fams.forEach(function (fam) { fam.classList.remove('is-on'); });\r\n          },\r\n          \/\/ Les fils se tracent \u00e0 la premi\u00e8re apparition, puis le cycle d\u00e9marre\r\n          run: function (go) {\r\n            st.classList.toggle('is-hold', !go);\r\n            if (!go) { stop(); return; }\r\n            if (started) return;\r\n            started = true;\r\n            st.classList.remove('is-pre');\r\n            window.setTimeout(function () { st.classList.add('is-built'); }, 1800);\r\n            window.setTimeout(function () { if (auto && f < 0) show(0); }, 2000);\r\n          }\r\n        };\r\n      },\r\n      \/\/ Garanties \u00b7 03 : quatre comp\u00e9tences, quatre cl\u00e9s. Elles partent de chez nous\r\n      \/\/ une \u00e0 une et se posent chez votre \u00e9quipe ; la jauge d\u2019autonomie monte d\u2019un\r\n      \/\/ quart \u00e0 chaque passage. \u00c0 la fin, nous nous retirons ; puis tout recommence.\r\n      \/\/ La cl\u00e9 suivante se charge (sa barre sert de minuterie) avant de partir,\r\n      \/\/ et le bilan final tient le temps de sa propre barre : pause au survol.\r\n      transfert: function (st) {\r\n        var rows = Array.prototype.slice.call(st.querySelectorAll('.tra-row'));\r\n        var pct = st.querySelector('[data-pct]'), raf = 0, shown = 100;\r\n        var layout = function () {\r\n          rows.forEach(function (row) { row.style.setProperty('--dx', row.clientWidth - row.querySelector('.tra-key').offsetWidth + 'px'); });\r\n        };\r\n        var label = function (v) { pct.textContent = Math.round(v) + '\u00a0%'; };\r\n        \/\/ Le pourcentage compte au rythme de la jauge\r\n        var count = function (to) {\r\n          var from = shown, t0 = performance.now();\r\n          shown = to;\r\n          st.style.setProperty('--p', to \/ 100);\r\n          window.cancelAnimationFrame(raf);\r\n          var tick = function (now) {\r\n            var u = Math.min(1, (now - t0) \/ 800);\r\n            label(from + (to - from) * (1 - Math.pow(1 - u, 3)));\r\n            if (u < 1) raf = window.requestAnimationFrame(tick);\r\n          };\r\n          raf = window.requestAnimationFrame(tick);\r\n        };\r\n        var reset = function () {\r\n          window.cancelAnimationFrame(raf);\r\n          st.classList.remove('is-done', 'is-fade');\r\n          rows.forEach(function (row) {\r\n            row.classList.add('no-tr');\r\n            row.classList.remove('is-moved', 'is-yours', 'is-flying', 'is-next');\r\n            void row.offsetWidth;\r\n            row.classList.remove('no-tr');\r\n          });\r\n          shown = 0;\r\n          st.style.setProperty('--p', 0);\r\n          label(0);\r\n        };\r\n        var note = st.querySelector('.tra-note .sc-timer'), started = false;\r\n        var run = function (bar) { bar.classList.remove('is-run'); void bar.offsetWidth; bar.classList.add('is-run'); };\r\n        var charge = function (i) { rows[i].classList.add('is-next'); run(rows[i].querySelector('.sc-timer')); };\r\n        \/\/ Charg\u00e9e, la cl\u00e9 part ; pos\u00e9e, la jauge monte ; puis la suivante se charge\r\n        rows.forEach(function (row, i) {\r\n          row.querySelector('.sc-timer').addEventListener('animationend', function () {\r\n            this.classList.remove('is-run');\r\n            row.classList.remove('is-next');\r\n            row.classList.add('is-moved', 'is-flying');\r\n            window.setTimeout(function () {\r\n              row.classList.remove('is-flying');\r\n              row.classList.add('is-yours');\r\n              count((i + 1) \/ rows.length * 100);\r\n              window.setTimeout(function () {\r\n                if (i + 1 < rows.length) charge(i + 1);\r\n                else { st.classList.add('is-done'); run(note); }\r\n              }, 420);\r\n            }, 1000);\r\n          });\r\n        });\r\n        note.addEventListener('animationend', function () {\r\n          note.classList.remove('is-run');\r\n          st.classList.add('is-fade');\r\n          window.setTimeout(function () {\r\n            reset();\r\n            window.setTimeout(function () { charge(0); }, 500);\r\n          }, 500);\r\n        });\r\n        return {\r\n          layout: layout,\r\n          reset: function () { reset(); st.classList.add('is-auto'); },\r\n          run: function (go) {\r\n            st.classList.toggle('is-hold', !go);\r\n            if (!go || started) return;\r\n            started = true;\r\n            window.setTimeout(function () { charge(0); }, 500);\r\n          }\r\n        };\r\n      },\r\n    };\r\n    each(document.getElementById('shl-accueil').querySelectorAll('[data-scene]'), function (st) {\r\n      var make = scenes[st.dataset.scene];\r\n      if (!make) return;\r\n      var sc = make(st);\r\n      if (sc.layout) {\r\n        sc.layout();\r\n        if ('ResizeObserver' in window) new ResizeObserver(sc.layout).observe(st); else window.addEventListener('resize', sc.layout);\r\n        if (document.fonts && document.fonts.ready) document.fonts.ready.then(sc.layout);\r\n      }\r\n      if (calm) return;\r\n      sc.reset();\r\n      \/\/ La sc\u00e8ne ne tourne que visible, onglet au premier plan ; elle reprend o\u00f9 elle s\u2019\u00e9tait arr\u00eat\u00e9e\r\n      var i = 0, timer = 0, seen = false;\r\n      var tick = function () {\r\n        var s = sc.steps[i];\r\n        i = (i + 1) % sc.steps.length;\r\n        s[0]();\r\n        timer = window.setTimeout(tick, s[1]);\r\n      };\r\n      var sync = function () {\r\n        var go = seen && !document.hidden;\r\n        if (sc.run) sc.run(go);\r\n        if (go && !timer && sc.steps) timer = window.setTimeout(tick, 700);\r\n        else if (!go && timer) { window.clearTimeout(timer); timer = 0; }\r\n      };\r\n      if ('IntersectionObserver' in window) new IntersectionObserver(function (en) { seen = en[0].isIntersecting; sync(); }, { threshold: .35 }).observe(st);\r\n      else seen = true;\r\n      document.addEventListener('visibilitychange', sync);\r\n      sync();\r\n    });\r\n  })();\r\n  \/* ---------------- M\u00e9thode : rail et \u00e9tape active ---------------- *\/\r\n  var method = document.getElementById('shl-accueil').querySelector('[data-method]');\r\n  var steps = Array.prototype.slice.call(method.querySelectorAll('.step'));\r\n  var railItems = Array.prototype.slice.call(method.querySelectorAll('.rail li'));\r\n  var railFill = method.querySelector('[data-rail-fill]');\r\n  var stepsBox = method.querySelector('.steps');\r\n  var setActive = function (idx) {\r\n    steps.forEach(function (s, i) { s.classList.toggle('is-active', i === idx); });\r\n    railItems.forEach(function (li, i) { li.classList.toggle('is-active', i === idx); li.classList.toggle('is-past', i < idx); });\r\n  };\r\n  var methodTick = 0;\r\n  var updateMethod = function () {\r\n    methodTick = 0;\r\n    \/\/ Aucune \u00e9tape active tant que la premi\u00e8re n\u2019entre pas dans l\u2019\u00e9cran : ses traits se remplissent sous les yeux\r\n    var mid = window.innerHeight * 0.5, idx = steps[0].getBoundingClientRect().top < window.innerHeight * 0.85 ? 0 : -1;\r\n    steps.forEach(function (s, i) { if (s.getBoundingClientRect().top < mid) idx = i; });\r\n    setActive(idx);\r\n    var r = stepsBox.getBoundingClientRect();\r\n    var p = Math.max(0, Math.min(1, (mid - r.top) \/ Math.max(1, r.height - 120)));\r\n    railFill.style.transform = 'scaleY(' + p.toFixed(4) + ')';\r\n  };\r\n  method.classList.add('is-live');\r\n  updateMethod();\r\n  window.addEventListener('scroll', function () { if (!methodTick) methodTick = requestAnimationFrame(updateMethod); }, { passive: true });\r\n  window.addEventListener('resize', updateMethod);\r\n  \/* ---------------- Projets : les ponts ---------------- *\/\r\n  \/\/ Les arcs partent du logo de l\u2019association vers chaque partenaire ; ils sont\r\n  \/\/ calcul\u00e9s sur la place r\u00e9elle des pastilles, puis la sc\u00e8ne se joue \u00e0 l\u2019\u00e9cran\r\n  \/\/ (et se rejoue au survol de la carte).\r\n  (function () {\r\n    var scenes = Array.prototype.slice.call(document.getElementById('shl-accueil').querySelectorAll('[data-duo]'));\r\n    if (!scenes.length) return;\r\n    var NS = 'http:\/\/www.w3.org\/2000\/svg';\r\n    var build = function (sc) {\r\n      var r = sc.getBoundingClientRect();\r\n      if (!r.width) return;\r\n      var svg = sc.querySelector('.duo-arc'), fan = sc.dataset.duo === 'fan';\r\n      var h = sc.querySelector('.duo-home').getBoundingClientRect(), A = [h.right - r.left - 2, h.top - r.top + h.height \/ 2];\r\n      svg.setAttribute('viewBox', '0 0 ' + r.width + ' ' + r.height);\r\n      svg.textContent = '';\r\n      Array.prototype.forEach.call(sc.querySelectorAll('.duo-node'), function (n, i) {\r\n        var b = n.getBoundingClientRect(), B = [b.left - r.left + b.width \/ 2, b.top - r.top + b.height \/ 2];\r\n        var dx = B[0] - A[0], down = B[1] > A[1] + 12;\r\n        var C = [(A[0] + B[0]) \/ 2, down ? Math.max(A[1], B[1]) + dx * (fan ? .1 : .22) : Math.min(A[1], B[1]) - dx * (fan ? .18 : .34)];\r\n        var d = 'M' + A[0] + ' ' + A[1] + 'Q' + C[0] + ' ' + C[1] + ' ' + B[0] + ' ' + B[1];\r\n        ['duo-track', 'duo-line', 'duo-spark'].forEach(function (cls) {\r\n          var p = document.createElementNS(NS, 'path');\r\n          p.setAttribute('d', d); p.setAttribute('class', cls);\r\n          if (cls !== 'duo-track') p.setAttribute('pathLength', '1');\r\n          p.style.setProperty('--dl', i * .18 + 's');\r\n          svg.appendChild(p);\r\n        });\r\n        n.style.setProperty('--dl', i * .18 + 's');\r\n      });\r\n    };\r\n    var play = function (sc) { sc.classList.remove('is-play'); void sc.offsetWidth; sc.classList.add('is-play'); sc.dataset.at = Date.now(); };\r\n    scenes.forEach(function (sc) {\r\n      build(sc);\r\n      if ('ResizeObserver' in window) new ResizeObserver(function () { build(sc); }).observe(sc);\r\n      sc.closest('.project').addEventListener('mouseenter', function () {\r\n        if (!calm && sc.classList.contains('is-play') && Date.now() - sc.dataset.at > 2600) play(sc);\r\n      });\r\n    });\r\n    if (calm) { scenes.forEach(function (sc) { sc.classList.add('is-play'); }); return; }\r\n    onView(scenes, function (sc) {\r\n      var d = parseInt(sc.closest('.project').style.getPropertyValue('--d') || '0', 10);\r\n      window.setTimeout(function () { play(sc); }, 280 + d * 2);\r\n    }, { rootMargin: '0px 0px -16% 0px' });\r\n  })();\r\n  \/* ---------------- Ressourcerie : la pile des ressources ---------------- *\/\r\n  \/\/ Les quatre ressources de l\u2019e-hub, en fiches empil\u00e9es. Celle de devant se remplit : le\r\n  \/\/ point gravit la courbe du parcours, le budget s\u2019additionne poste par poste, un nouvel\r\n  \/\/ appel arrive dans la veille, la matrice du cadre logique se compl\u00e8te. Puis elle passe\r\n  \/\/ derri\u00e8re la pile et la suivante avance. Les mots s\u2019\u00e9teignent avant que la pile bouge et\r\n  \/\/ ne reviennent qu\u2019une fois elle immobile. Le balisage porte l\u2019\u00e9tat final, qu\u2019on garde\r\n  \/\/ en mouvement r\u00e9duit ; la l\u00e9gende permet d\u2019appeler une fiche.\r\n  (function () {\r\n    var box = document.getElementById('shl-accueil').querySelector('[data-res]');\r\n    if (!box) return;\r\n    onView([box], function (el) { el.classList.add('is-in'); }, { rootMargin: '0px 0px -25% 0px' });\r\n    var each = function (list, fn) { Array.prototype.forEach.call(list, fn); };\r\n    var cards = Array.prototype.slice.call(box.querySelectorAll('.res-card'));\r\n    var keys = Array.prototype.slice.call(box.querySelectorAll('.res-key span'));\r\n    var n = cards.length, front = 0, timers = [], raf = 0, seen = false, live = false;\r\n    var later = function (fn, ms) { timers.push(window.setTimeout(fn, ms)); };\r\n    var place = function () {\r\n      cards.forEach(function (c, i) { c.style.setProperty('--p', (i - front + n) % n); c.classList.toggle('is-front', i === front); });\r\n      keys.forEach(function (k, i) { k.classList.toggle('is-on', i === front); });\r\n    };\r\n    var kinds = {\r\n      parcours: function (card) {\r\n        var art = card.querySelector('.par-art'), trail = art.querySelector('.par-trail');\r\n        var dot = art.querySelector('.par-dot'), halo = art.querySelector('.par-halo'), reveal = art.querySelector('.par-reveal');\r\n        var nodes = art.querySelectorAll('.par-nodes circle'), drops = art.querySelectorAll('.par-drops path'), caps = card.querySelectorAll('.par-caps li');\r\n        var total = trail.getTotalLength(), at = [];\r\n        \/\/ Longueur du trac\u00e9 au droit de chaque module\r\n        each(nodes, function (nd) {\r\n          var x = +nd.getAttribute('cx'), lo = 0, hi = total;\r\n          for (var k = 0; k < 22; k++) { var m = (lo + hi) \/ 2; if (trail.getPointAtLength(m).x < x) lo = m; else hi = m; }\r\n          at.push(hi);\r\n        });\r\n        var set = function (len) {\r\n          var pt = trail.getPointAtLength(len);\r\n          trail.style.strokeDashoffset = String(1 - len \/ total);\r\n          dot.setAttribute('cx', pt.x); dot.setAttribute('cy', pt.y);\r\n          halo.setAttribute('cx', pt.x); halo.setAttribute('cy', pt.y);\r\n          reveal.setAttribute('width', pt.x);\r\n        };\r\n        var mark = function (k, on) { nodes[k].classList.toggle('is-on', on); drops[k].classList.toggle('is-on', on); caps[k].classList.toggle('is-on', on); };\r\n        \/\/ Le point ralentit \u00e0 chaque module sans jamais s\u2019arr\u00eater net\r\n        var soft = function (v) { var io = v < .5 ? 4 * v * v * v : 1 - Math.pow(-2 * v + 2, 3) \/ 2; return .3 * v + .7 * io; };\r\n        var SEG = 820;\r\n        return {\r\n          reset: function () { set(0); for (var k = 0; k < nodes.length; k++) mark(k, k === 0); },\r\n          play: function () {\r\n            var t0 = 0, done = 0, segs = nodes.length - 1;\r\n            var step = function (now) {\r\n              if (!t0) t0 = now;\r\n              var u = Math.min(1, (now - t0) \/ (SEG * segs)), s = u * segs, k = Math.min(segs - 1, Math.floor(s));\r\n              set(at[k] + (at[k + 1] - at[k]) * soft(s - k));\r\n              var reached = u >= 1 ? segs : (s - k > .94 ? k + 1 : k);\r\n              while (done < reached) mark(++done, true);\r\n              raf = u < 1 ? window.requestAnimationFrame(step) : 0;\r\n            };\r\n            raf = window.requestAnimationFrame(step);\r\n            return SEG * segs;\r\n          }\r\n        };\r\n      },\r\n      budget: function (card) {\r\n        var body = card.querySelector('.bud'), hl = body.querySelector('.bud-hl'), rows = body.querySelectorAll('.bud-row:not(.bud-th)');\r\n        var to = function (row) { hl.style.transform = 'translateY(' + (row.offsetTop + (row.offsetHeight - hl.offsetHeight) \/ 2) + 'px)'; };\r\n        var GAP = 480;\r\n        return {\r\n          reset: function () { body.classList.remove('is-hl'); each(rows, function (r) { r.classList.remove('is-on'); }); to(rows[0]); },\r\n          play: function () {\r\n            body.classList.add('is-hl');\r\n            each(rows, function (r, i) {\r\n              later(function () { to(r); }, i * GAP);\r\n              later(function () { r.classList.add('is-on'); }, i * GAP + 280);\r\n            });\r\n            return rows.length * GAP + 300;\r\n          }\r\n        };\r\n      },\r\n      veille: function (card) {\r\n        var list = card.querySelector('.vei');\r\n        return {\r\n          reset: function () { list.classList.remove('is-played'); },\r\n          play: function () { later(function () { list.classList.add('is-played'); }, 450); return 1900; }\r\n        };\r\n      },\r\n      cadre: function (card) {\r\n        var cells = card.querySelectorAll('.cad-c'), GAP = 150;\r\n        return {\r\n          reset: function () { each(cells, function (c) { c.classList.remove('is-on', 'is-hl'); }); },\r\n          play: function () {\r\n            \/\/ sur mobile, la colonne des hypoth\u00e8ses est masqu\u00e9e : on ne parcourt que les cases visibles\r\n            var shown = Array.prototype.filter.call(cells, function (c) { if (!c.offsetParent) c.classList.add('is-on'); return !!c.offsetParent; });\r\n            each(shown, function (c, i) {\r\n              later(function () { c.classList.add('is-on', 'is-hl'); }, i * GAP);\r\n              later(function () { c.classList.remove('is-hl'); }, i * GAP + 520);\r\n            });\r\n            return shown.length * GAP + 520;\r\n          }\r\n        };\r\n      }\r\n    };\r\n    var ctl = cards.map(function (c) { return kinds[c.dataset.kind](c); });\r\n    \/\/ La l\u00e9gende appelle une fiche : imm\u00e9diatement en mouvement r\u00e9duit, sinon par la pile\r\n    var go = function () {};\r\n    keys.forEach(function (k, i) {\r\n      k.addEventListener('click', function () {\r\n        if (i === front) return;\r\n        if (calm) { front = i; place(); return; }\r\n        if (!live) return;\r\n        timers.forEach(window.clearTimeout); timers = [];\r\n        window.cancelAnimationFrame(raf); raf = 0;\r\n        cards.forEach(function (c) { c.classList.remove('is-out', 'is-snap'); });\r\n        go(i);\r\n      });\r\n    });\r\n    place();\r\n    if (calm) return;\r\n    var HOLD = 2400;\r\n    \/\/ La fiche de devant se remplit, une fois la pile immobile et ses mots revenus\r\n    var show = function () {\r\n      var c = cards[front], k = ctl[front];\r\n      k.reset();\r\n      later(function () {\r\n        c.classList.add('is-shown');\r\n        later(function () { later(next, k.play() + HOLD); }, 620);\r\n      }, 420);\r\n    };\r\n    \/\/ Ses mots s\u2019\u00e9teignent, elle glisse et s\u2019efface, les autres avancent d\u2019un rang ; elle\r\n    \/\/ revient en fondu \u00e0 sa nouvelle place, derri\u00e8re\r\n    go = function (to) {\r\n      var c = cards[front];\r\n      c.classList.remove('is-shown');\r\n      later(function () {\r\n        front = to; place();\r\n        c.classList.add('is-out', 'is-front');\r\n        later(function () {\r\n          c.classList.add('is-snap'); c.classList.remove('is-out', 'is-front');\r\n          void c.offsetWidth;\r\n          c.classList.remove('is-snap');\r\n        }, 580);\r\n        show();\r\n      }, 180);\r\n    };\r\n    var next = function () { go((front + 1) % n); };\r\n    box.classList.add('is-auto');\r\n    ctl.forEach(function (k) { k.reset(); });\r\n    place();\r\n    \/\/ Hors de l\u2019\u00e9cran ou onglet cach\u00e9, tout s\u2019arr\u00eate ; la fiche de devant reprendra du d\u00e9but\r\n    var sync = function () {\r\n      var on = seen && !document.hidden;\r\n      if (on === live) return;\r\n      live = on;\r\n      if (on) { later(show, 300); return; }\r\n      timers.forEach(window.clearTimeout); timers = [];\r\n      window.cancelAnimationFrame(raf); raf = 0;\r\n      cards.forEach(function (c) { c.classList.remove('is-shown', 'is-out', 'is-snap'); });\r\n    };\r\n    if ('IntersectionObserver' in window) new IntersectionObserver(function (en) { seen = en[0].isIntersecting; sync(); }, { threshold: .35 }).observe(box);\r\n    else seen = true;\r\n    document.addEventListener('visibilitychange', sync);\r\n    sync();\r\n  })();\r\n  \/* ---------------- Formulaire (maquette) ---------------- *\/\r\n  var form = document.getElementById('shl-accueil').querySelector('[data-form]');\r\n  form.addEventListener('submit', function (e) {\r\n    e.preventDefault();\r\n    form.querySelector('[data-form-note]').textContent = 'Maquette : l\u2019envoi sera branch\u00e9 sur le formulaire du site.';\r\n  });\r\n  \/\/ Une teinte par main (gauche, droite) : ici les deux en bleu Europe, que l\u2019or des \u00e9toiles\r\n  \/\/ compl\u00e8te. Duo essay\u00e9 : ['#8e3b22', '#233f8c'], le terrain \u00e0 la sanguine.\r\n  var HANDS_INK = ['#233f8c', '#233f8c'];\r\n  \/\/ La mise en place des mains, que l\u2019ouverture dessine avant le clip (remplie par les\r\n  \/\/ mains), et les dix teintes des fils du pont, que l\u2019onde du contact emporte\r\n  var heroHands = null, THREADS = ['#c86a5e', '#b25f35', '#bd9035', '#8d9b4e', '#55926f', '#6d9b93', '#4b8296', '#45508a', '#8480be', '#92557c'];\r\n  \/* ---------------- Mains : un seul geste ---------------- *\/\r\n  \/\/ Un clip tir\u00e9 de la vid\u00e9o de r\u00e9f\u00e9rence (0,62 \u00e0 2,5 s), ses \u00e0-coups liss\u00e9s par des images\r\n  \/\/ interm\u00e9diaires calcul\u00e9es au flux optique, 60 i\/s r\u00e9guliers, d\u00e9j\u00e0 en encre sur blanc. Chaque\r\n  \/\/ main a son propre minutage : dans la source, l\u2019une roule pendant que l\u2019autre reste fig\u00e9e ;\r\n  \/\/ ici les deux tournent sans arr\u00eat jusqu\u2019au contact. Elles se touchent une seule fois, chacune\r\n  \/\/ arrivant en glissant depuis son bord. Au contact, une onde de caract\u00e8res part du point\r\n  \/\/ de rencontre et allume les douze \u00e9toiles, dessin\u00e9es en ASCII comme les mains. Des\r\n  \/\/ silhouettes blanches pr\u00e9calcul\u00e9es les estompent derri\u00e8re les mains.\r\n  (function () {\r\n    var box = document.getElementById('shl-accueil').querySelector('[data-hands]');\r\n    if (!box) return;\r\n    var stage = box.querySelector('.hero-hands'), canvas = stage.querySelector('canvas'), ctx = canvas.getContext('2d');\r\n    var join = function () { box.classList.add('is-joined'); };\r\n    var video = stage.querySelector('video'), fallback = stage.querySelector('.hands-still'), still = null;\r\n    var root = document.getElementById('shl-accueil'), motion = window.matchMedia('(prefers-reduced-motion: reduce)');\r\n    \/\/ Clip : 150 images, contact des index \u00e0 l\u2019image 113. Point de contact en fractions de\r\n    \/\/ l\u2019image ; les deux mains sont coup\u00e9es \u00e0 sa verticale pour glisser chacune de son c\u00f4t\u00e9.\r\n    var CONTACT = 113 \/ 60, LAST = 149 \/ 60, CX = .45, CY = .495, VW = 1750, VH = 772;\r\n    var PAPER = { w: 219, h: 97, cols: 12, n: 75, fps: 30 };\r\n    var SLIDE = 2, FADE = .4, WAVE = 720, LIGHT = 540, STAGGER = 55, STAR_T = 640;\r\n    var END = LIGHT + 11 * STAGGER + STAR_T;\r\n    \/\/ Pointe de chaque index \u00e0 l\u2019image 0, de part et d\u2019autre de la coupe (fraction de la largeur)\r\n    var TIP = .023;\r\n    \/\/ Au lancement, le lecteur saute souvent une ou deux images : le clip reste invisible\r\n    \/\/ pendant ses quatre premi\u00e8res, puis vient en fondu\r\n    var HOLD = 4 \/ 60;\r\n    var mixAt = function (ct) { return clamp((ct - HOLD) \/ FADE); };\r\n    var RAMP = ['.', ':', '+', '*', '#'], GOLD = '#d69300', DOT = '#173540';\r\n    var sheet = new Image(), atlas = null;\r\n    var layer = null, lctx = null, bottom = null, fh = 0, fy = 0;\r\n    \/\/ Teinte des mains : l\u2019encre du clip (#173540) devient HANDS_INK, le blanc reste blanc.\r\n    \/\/ Facteur par canal appliqu\u00e9 \u00e0 l\u2019image invers\u00e9e : (255 \u2212 teinte) \/ (255 \u2212 encre).\r\n    \/\/ Les deux teintes se fondent l\u2019une dans l\u2019autre au contact.\r\n    var tintFill = null;\r\n    var tintK = function (hex) {\r\n      var n = parseInt(hex.slice(1), 16), c = [n >> 16, n >> 8 & 255, n & 255], ink = [23, 53, 64];\r\n      return 'rgb(' + c.map(function (v, i) { return Math.min(255, Math.round(255 * (255 - v) \/ (255 - ink[i]))); }).join(',') + ')';\r\n    };\r\n    var W = 0, H = 0, dpr = 1, fw = 0, cx = 0, cy = 0, R = 0, cell = 6, travel = 0, stars = [];\r\n    var lit = -1, raf = 0, state = 'idle', ready = false, started = false, visible = false;\r\n    \/\/ Le geste achev\u00e9, les mains flottent. Sous la souris, elles penchent un peu vers elle,\r\n    \/\/ les \u00e9toiles glissent \u00e0 l\u2019oppos\u00e9, et les caract\u00e8res survol\u00e9s s\u2019\u00e9cartent en scintillant.\r\n    \/\/ La couronne d\u2019\u00e9toiles, elle, tourne lentement : un tour par minute, lanc\u00e9e en douceur.\r\n    var FLOAT = 6400, SPIN = 2 * Math.PI \/ 60000, spin = 0, clock = 0, last = 0, near = 0;\r\n    var ptr = { x: 0, y: 0, on: 0 }, lean = { x: 0, y: 0 }, glow = { x: 0, y: 0 };\r\n    var alive = function () { return state === 'done' && visible && !document.hidden; };\r\n    var clamp = function (v) { return v < 0 ? 0 : v > 1 ? 1 : v; };\r\n    var out = function (v) { return 1 - Math.pow(1 - v, 3); };\r\n    var inout = function (v) { return v < .5 ? 4 * v * v * v : 1 - Math.pow(-2 * v + 2, 3) \/ 2; };\r\n    \/\/ Le glissement part de l\u2019arr\u00eat, prend son \u00e9lan en un quart de seconde, puis ralentit\r\n    \/\/ longuement jusqu\u2019au contact : aucune secousse au d\u00e9part du geste.\r\n    var glide = function (v) { v = clamp(v); return 1 - Math.pow(1 - v, 4) * (1 + 4 * v); };\r\n    var offAt = function (ct) { return travel * (1 - glide(ct \/ SLIDE)); };\r\n    \/\/ Fin du recul de l\u2019ouverture, que le h\u00e9ros poursuit seul : m\u00eame courbe, m\u00eame horloge\r\n    var zoom = null;\r\n    var zoomAt = function (now) { return zoom ? Math.exp(Math.log(zoom.z0) * (1 - inout(clamp((now - zoom.t0) \/ zoom.d)))) : 1; };\r\n    var hash = function (n) { var x = Math.sin(n * 127.1) * 43758.5453; return x - Math.floor(x); };\r\n    var snap = function (v) { return Math.round(v \/ cell) * cell; };\r\n    var inStar = function (x, y) {\r\n      \/\/ \u00e9toile \u00e0 cinq branches de rayon 1, pointe en haut (test pair-impair)\r\n      var inside = false;\r\n      for (var i = 0, j = 9; i < 10; j = i++) {\r\n        var ai = -Math.PI \/ 2 + i * Math.PI \/ 5, aj = -Math.PI \/ 2 + j * Math.PI \/ 5;\r\n        var ri = i % 2 ? .382 : 1, rj = j % 2 ? .382 : 1;\r\n        var xi = ri * Math.cos(ai), yi = ri * Math.sin(ai), xj = rj * Math.cos(aj), yj = rj * Math.sin(aj);\r\n        if ((yi > y) !== (yj > y) && x < (xj - xi) * (y - yi) \/ (yj - yi) + xi) inside = !inside;\r\n      }\r\n      return inside;\r\n    };\r\n    \/\/ Les caract\u00e8res, dessin\u00e9s une fois dans un atlas : or (ligne 0), encre (ligne 1),\r\n    \/\/ puis les dix teintes des fils du pont.\r\n    var buildAtlas = function () {\r\n      var cs = Math.round(cell * dpr);\r\n      atlas = document.createElement('canvas'); atlas.width = cs * RAMP.length; atlas.height = cs * (2 + THREADS.length);\r\n      var g = atlas.getContext('2d');\r\n      g.font = '500 ' + Math.round(cs * 1.5) + 'px \"Geist Mono\", ui-monospace, Menlo, monospace';\r\n      g.textAlign = 'center'; g.textBaseline = 'middle';\r\n      [GOLD, DOT].concat(THREADS).forEach(function (col, row) {\r\n        g.fillStyle = col;\r\n        RAMP.forEach(function (ch, l) { g.fillText(ch, (l + .5) * cs, (row + .56) * cs); });\r\n      });\r\n    };\r\n    var layout = function () {\r\n      var r = stage.getBoundingClientRect();\r\n      W = Math.round(r.width); H = Math.round(r.height); dpr = Math.min(2, window.devicePixelRatio || 1);\r\n      if (!W || !H) return false;\r\n      canvas.width = Math.round(W * dpr); canvas.height = Math.round(H * dpr);\r\n      \/\/ Les mains d\u00e9bordent la sc\u00e8ne (sauf sur t\u00e9l\u00e9phone) ; le contact reste au centre.\r\n      fh = H * (W < 700 ? 1.02 : 1.18); fw = fh * VW \/ VH; cx = W \/ 2; cy = H * .5; fy = cy - CY * fh;\r\n      travel = Math.max(60, W * .26);\r\n      layer = document.createElement('canvas'); layer.width = canvas.width; layer.height = canvas.height;\r\n      lctx = layer.getContext('2d');\r\n      bottom = lctx.createLinearGradient(0, layer.height * .8, 0, layer.height);\r\n      bottom.addColorStop(0, 'rgba(255, 255, 255, 0)'); bottom.addColorStop(1, '#fff');\r\n      tintFill = lctx.createLinearGradient((cx - W * .06) * dpr, 0, (cx + W * .06) * dpr, 0);\r\n      tintFill.addColorStop(0, tintK(HANDS_INK[0])); tintFill.addColorStop(1, tintK(HANDS_INK[1]));\r\n      cell = Math.max(4, Math.round(H \/ 85));\r\n      buildAtlas();\r\n      \/\/ Cercle de rayon R, \u00e9toiles de rayon R \/ 6 comme sur le drapeau. Chaque case de la\r\n      \/\/ grille garde sa couverture par l\u2019\u00e9toile ; autour, un halo clairsem\u00e9 de points.\r\n      R = Math.min(H * .42, W * .42);\r\n      stars = [];\r\n      for (var n = 0; n < 12; n++) {\r\n        \/\/ cases relatives au centre de l\u2019\u00e9toile : la couronne peut tourner, l\u2019\u00e9toile reste droite\r\n        var rs = R \/ 6, ext = rs * 1.5, cells = [];\r\n        for (var gy = -snap(ext); gy <= ext; gy += cell) for (var gx = -snap(ext); gx <= ext; gx += cell) {\r\n          var cov = 0;\r\n          for (var u = -1; u < 2; u++) for (var v = -1; v < 2; v++) if (inStar((gx + u * cell \/ 3) \/ rs, (gy + v * cell \/ 3) \/ rs)) cov++;\r\n          var d = Math.hypot(gx, gy) \/ rs, h = hash(gx * 7.13 + gy * 3.71 + n * 41.7);\r\n          if (cov) cells.push([gx, gy, cov \/ 9, d, h, 0]);\r\n          else if (d > .75 && d < 1.5 && h < .28) cells.push([gx, gy, 0, d, h, (1 - (d - .75) \/ .75) * .7]);\r\n        }\r\n        stars.push(cells);\r\n      }\r\n      return true;\r\n    };\r\n    var blit = function (row, lvl, x, y) {\r\n      var cs = atlas.width \/ RAMP.length;\r\n      ctx.drawImage(atlas, lvl * cs, row * cs, cs, cs, x - cell \/ 2, y - cell \/ 2, cell, cell);\r\n    };\r\n    var paintStars = function (t, now, ox, oy) {\r\n      \/\/ l\u2019onde : un anneau de caract\u00e8res qui part du contact et rejoint les \u00e9toiles\r\n      if (t >= 0 && t < WAVE) {\r\n        var w = t \/ WAVE, r = R * out(w), steps = Math.max(12, Math.round(2 * Math.PI * r \/ cell));\r\n        ctx.globalAlpha = .9 * (1 - w * w);\r\n        for (var k = 0; k < steps; k++) {\r\n          var a = k \/ steps * 2 * Math.PI;\r\n          \/\/ au d\u00e9part, l\u2019anneau garde les dix teintes des fils du pont, puis vire \u00e0 l\u2019or\r\n          var hue = hash(k * 3.1) > w * 1.8 ? 2 + Math.floor(k \/ steps * 10) : 0;\r\n          blit(hue, (hash(k + Math.floor(t \/ 60)) > .55 ? 1 : 0) + (hue ? 1 : 0), snap(cx + r * Math.sin(a)) + ox, snap(cy - r * Math.cos(a)) + oy);\r\n        }\r\n      }\r\n      var rho = Math.max(80, R * .5), q0 = near > .01 ? near : 0;\r\n      stars.forEach(function (cells, n) {\r\n        var p = t < 0 ? 0 : clamp((t - LIGHT - n * STAGGER) \/ STAR_T), an = n * Math.PI \/ 6 + spin;\r\n        var sx = cx + R * Math.sin(an) + ox, sy = cy - R * Math.cos(an) + oy;\r\n        for (var i = 0; i < cells.length; i++) {\r\n          var c = cells[i], x = c[0] + sx, y = c[1] + sy, q = 0;\r\n          \/\/ autour de la souris, les caract\u00e8res s\u2019\u00e9cartent, d\u2019autant plus qu\u2019ils sont proches\r\n          if (q0) {\r\n            var ex = x - glow.x, ey = y - glow.y, e = Math.sqrt(ex * ex + ey * ey);\r\n            if (e < rho) { q = (1 - e \/ rho) * (1 - e \/ rho) * q0; e = q * cell * 1.2 \/ (e || 1); x += ex * e; y += ey * e; }\r\n          }\r\n          if (c[2]) {\r\n            \/\/ la case s\u2019allume du c\u0153ur vers les pointes, passe par quelques caract\u00e8res, puis se pose\r\n            var lp = clamp((p * 1.35 - c[3]) \/ .35);\r\n            if (lp <= 0) { if (c[2] > .5) { ctx.globalAlpha = .22; blit(1, 0, x, y); } continue; }\r\n            var lvl = Math.max(1, Math.round(c[2] * 4));\r\n            if (lp < .75 || hash(c[4] * 53 + Math.floor(now \/ 90)) < q * .5) lvl = 1 + Math.floor(hash(c[4] * 97 + Math.floor(now \/ 70)) * 4);\r\n            ctx.globalAlpha = .4 + .6 * lp; blit(0, lvl, x, y);\r\n          } else if (p > .45) {\r\n            ctx.globalAlpha = Math.min(1, (p - .45) \/ .55 * c[5] + q * .6); blit(0, 0, x, y);\r\n          }\r\n        }\r\n      });\r\n      ctx.globalAlpha = 1;\r\n    };\r\n    var paint = function (now) {\r\n      ctx.setTransform(dpr, 0, 0, dpr, 0, 0); ctx.globalCompositeOperation = 'source-over'; ctx.globalAlpha = 1;\r\n      ctx.clearRect(0, 0, W, H);\r\n      \/\/ chaque main flotte avec un l\u00e9ger d\u00e9calage de phase ; la souris les attire ensemble\r\n      var env = out(clamp(clock \/ 2400)) * H * .008, ph = clock \/ FLOAT * 2 * Math.PI;\r\n      var hx = lean.x * Math.min(16, W * .011), hy = lean.y * Math.min(9, H * .014);\r\n      paintStars(lit < 0 ? -1 : now - lit, now, -hx * .45, -hy * .45);\r\n      var src = state === 'still' ? still : video;\r\n      if (state === 'still' ? !(still && still.complete && still.naturalWidth) : !started) return;\r\n      var ct = state === 'still' ? LAST : Math.min(LAST, video.currentTime);\r\n      var off = offAt(ct), a = mixAt(ct), fl = cx - CX * fw + hx, sx = CX * VW;\r\n      \/\/ tant que l\u2019ouverture finit de reculer, chaque moiti\u00e9 est agrandie autour de la pointe\r\n      \/\/ de son index, exactement comme les caract\u00e8res de l\u2019ouverture qu\u2019elle remplace\r\n      var zk = state === 'still' ? 1 : zoomAt(now), tl = cx + hx - off - TIP * fw, tr = cx + hx + off + TIP * fw;\r\n      var zx = function (x, t) { return Math.round((t + (x - t) * zk) * dpr); };\r\n      var zy = function (y) { return (cy + (y - cy) * zk) * dpr; };\r\n      \/\/ bords des deux moiti\u00e9s cal\u00e9s sur les pixels de l\u2019\u00e9cran : aucune couture au contact\r\n      var x0 = zx(fl - off, tl), x1 = zx(cx + hx - off, tl), x2 = zx(cx + hx + off, tr);\r\n      var x3 = zx(fl + fw + off, tr), hh = Math.round(fh * zk * dpr);\r\n      var y0 = zy(fy + hy + env * Math.sin(ph)), y1 = zy(fy + hy + env * Math.sin(ph - .8));\r\n      ctx.setTransform(1, 0, 0, 1, 0, 0);\r\n      \/\/ papier sous les mains : il estompe les \u00e9toiles qu\u2019elles recouvrent\r\n      if (sheet.complete && sheet.naturalWidth) {\r\n        var i = Math.min(PAPER.n - 1, Math.round(ct * PAPER.fps)), px = (i % PAPER.cols) * PAPER.w, py = Math.floor(i \/ PAPER.cols) * PAPER.h, ps = CX * PAPER.w;\r\n        ctx.globalAlpha = .85 * a;\r\n        ctx.drawImage(sheet, px, py, ps, PAPER.h, x0, y0, x1 - x0, hh);\r\n        ctx.drawImage(sheet, px + ps, py, PAPER.w - ps, PAPER.h, x2, y1, x3 - x2, hh);\r\n      }\r\n      \/\/ Les mains sont compos\u00e9es \u00e0 part sur un blanc pur, puis pos\u00e9es en multiplication.\r\n      \/\/ Le d\u00e9codage vid\u00e9o rend le blanc \u00e0 253-254 selon les navigateurs : on le remonte\r\n      \/\/ \u00e0 255 pour qu\u2019aucun cadre ne se devine, et le bas de la sc\u00e8ne s\u2019efface.\r\n      lctx.globalCompositeOperation = 'source-over'; lctx.fillStyle = '#fff'; lctx.fillRect(0, 0, layer.width, layer.height);\r\n      lctx.imageSmoothingEnabled = true; lctx.imageSmoothingQuality = 'high';\r\n      lctx.drawImage(src, 0, 0, sx, VH, x0, y0, x1 - x0, hh);\r\n      lctx.drawImage(src, sx, 0, VW - sx, VH, x2, y1, x3 - x2, hh);\r\n      lctx.globalCompositeOperation = 'lighter'; lctx.fillStyle = 'rgb(6, 6, 6)'; lctx.fillRect(0, 0, layer.width, layer.height);\r\n      lctx.globalCompositeOperation = 'source-over'; lctx.fillStyle = bottom; lctx.fillRect(0, layer.height * .8, layer.width, layer.height * .2);\r\n      \/\/ inverser, teinter l\u2019encre, r\u00e9inverser : le blanc ne bouge pas\r\n      lctx.globalCompositeOperation = 'difference'; lctx.fillStyle = '#fff'; lctx.fillRect(0, 0, layer.width, layer.height);\r\n      lctx.globalCompositeOperation = 'multiply'; lctx.fillStyle = tintFill; lctx.fillRect(0, 0, layer.width, layer.height);\r\n      lctx.globalCompositeOperation = 'difference'; lctx.fillStyle = '#fff'; lctx.fillRect(0, 0, layer.width, layer.height);\r\n      ctx.globalAlpha = a; ctx.globalCompositeOperation = 'multiply';\r\n      ctx.drawImage(layer, 0, 0);\r\n      ctx.globalCompositeOperation = 'source-over'; ctx.globalAlpha = 1;\r\n    };\r\n    var tick = function (now) {\r\n      raf = 0;\r\n      if (state === 'run' && lit < 0 && video.currentTime >= CONTACT) lit = now;\r\n      \/\/ les libell\u00e9s du bas ne viennent qu\u2019une fois les \u00e9toiles pos\u00e9es\r\n      if (lit >= 0 && now - lit > END * .85) join();\r\n      if (state === 'done') {\r\n        \/\/ la souris est suivie de pr\u00e8s par l\u2019\u00e9clat, de loin par les mains\r\n        var dt = Math.min(50, now - last), kl = 1 - Math.exp(-dt \/ 500), kg = 1 - Math.exp(-dt \/ 70);\r\n        clock += dt; last = now;\r\n        spin = SPIN * (clock - 2500 * (1 - Math.exp(-clock \/ 2500)));\r\n        near += (ptr.on - near) * (1 - Math.exp(-dt \/ 400));\r\n        lean.x += ((ptr.on ? (ptr.x - cx) \/ (W \/ 2) : 0) - lean.x) * kl;\r\n        lean.y += ((ptr.on ? (ptr.y - cy) \/ (H \/ 2) : 0) - lean.y) * kl;\r\n        glow.x += (ptr.x - glow.x) * kg; glow.y += (ptr.y - glow.y) * kg;\r\n      }\r\n      paint(now);\r\n      if ((state === 'run' && !video.paused) || (lit >= 0 && now - lit < END) || alive()) raf = requestAnimationFrame(tick);\r\n    };\r\n    var loop = function () { if (!raf) raf = requestAnimationFrame(tick); };\r\n    \/\/ La mise en place des deux moiti\u00e9s, en px de la fen\u00eatre, \u00e0 l\u2019instant du clip\r\n    heroHands = {\r\n      video: video,\r\n      at: function () {\r\n        var r = stage.getBoundingClientRect(), ct = started ? video.currentTime : 0, off = offAt(ct);\r\n        return { x: r.left, y: r.top, w: W, h: H, cx: cx, cy: cy, fl: cx - CX * fw, fw: fw, fy: fy, fh: fh, CX: CX, cell: cell,\r\n          off: off, tip: off + TIP * fw, ct: ct, mix: mixAt(ct), live: started, broken: state === 'still' };\r\n      },\r\n      \/\/ l\u2019ouverture confie au h\u00e9ros la fin de son recul, qui se poursuit une fois le clip lanc\u00e9\r\n      zoom: function (t0, z0, d) { zoom = { t0: t0, z0: z0, d: d }; }\r\n    };\r\n    \/\/ Mouvement r\u00e9duit ou clip illisible : les mains jointes, \u00e9toiles allum\u00e9es.\r\n    var finish = function () {\r\n      if (state === 'still') return;\r\n      state = 'still'; video.pause(); lit = performance.now() - 1e6; join();\r\n      still = new Image(); still.onload = function () { if (!raf) paint(performance.now()); };\r\n      still.src = fallback.getAttribute('src');\r\n      paint(performance.now());\r\n    };\r\n    var sync = function () {\r\n      if (motion.matches) return finish();\r\n      var go = visible && !document.hidden;\r\n      \/\/ le geste attend que le clip soit charg\u00e9 en entier et que la page soit pos\u00e9e\r\n      if (state === 'idle' && go && ready && root.classList.contains('is-loaded')) { state = 'run'; video.play().catch(finish); }\r\n      else if (state === 'run') { if (go && video.paused && !video.ended) video.play().catch(finish); else if (!go) video.pause(); }\r\n      if (alive()) loop(); else if (!raf) paint(performance.now());\r\n    };\r\n    video.addEventListener('playing', function () { started = true; loop(); });\r\n    video.addEventListener('ended', function () { state = 'done'; last = performance.now(); loop(); });\r\n    \/\/ souris seulement : au doigt, les mains flottent sans r\u00e9agir\r\n    stage.addEventListener('pointermove', function (e) {\r\n      if (e.pointerType !== 'mouse' && e.pointerType !== 'pen') return;\r\n      var r = stage.getBoundingClientRect();\r\n      ptr.x = e.clientX - r.left; ptr.y = e.clientY - r.top; ptr.on = 1;\r\n      if (near < .02) { glow.x = ptr.x; glow.y = ptr.y; }\r\n    });\r\n    stage.addEventListener('pointerleave', function () { ptr.on = 0; });\r\n    video.addEventListener('error', finish);\r\n    \/\/ la premi\u00e8re image est dessin\u00e9e une fois hors \u00e9cran avant la lecture : le d\u00e9codeur et\r\n    \/\/ la carte graphique sont pr\u00eats, le premier mouvement ne saute pas\r\n    video.addEventListener('canplaythrough', function () {\r\n      if (ready) return;\r\n      if (lctx) lctx.drawImage(video, 0, 0, 8, 4);\r\n      requestAnimationFrame(function () { ready = true; sync(); });\r\n    });\r\n    sheet.onload = function () { if (!raf) paint(performance.now()); };\r\n    sheet.src = stage.dataset.paper;\r\n    window.setTimeout(join, 9000);\r\n    if (!motion.matches) { video.src = video.dataset.src; video.preload = 'auto'; video.load(); }\r\n    layout();\r\n    var resize = function () { if (layout() && !raf) paint(performance.now()); };\r\n    if ('ResizeObserver' in window) new ResizeObserver(resize).observe(stage); else window.addEventListener('resize', resize);\r\n    if ('IntersectionObserver' in window) new IntersectionObserver(function (e) { visible = e[0].isIntersecting; sync(); }, { threshold: .15 }).observe(stage);\r\n    else { visible = true; sync(); }\r\n    if ('MutationObserver' in window) new MutationObserver(sync).observe(root, { attributes: true, attributeFilter: ['class'] });\r\n    if (document.fonts && document.fonts.ready) document.fonts.ready.then(function () { buildAtlas(); if (!raf) paint(performance.now()); });\r\n    document.addEventListener('visibilitychange', sync);\r\n    if (motion.addEventListener) motion.addEventListener('change', sync); else if (motion.addListener) motion.addListener(sync);\r\n  })();\r\n  \/* ---------------- Ouverture : la plong\u00e9e ---------------- *\/\r\n  \/\/ L\u2019\u00e9cran s\u2019ouvre tout contre les deux index, si pr\u00e8s que leurs caract\u00e8res sont\r\n  \/\/ immenses : quelques signes d\u2019encre, nets, face \u00e0 face de part et d\u2019autre du point de\r\n  \/\/ contact. Tant que le clip se charge, on recule doucement ; charg\u00e9, on recule d\u2019un seul\r\n  \/\/ \u00e9lan : chaque main rapetisse autour de la pointe de son index et se pose \u00e0 son point de\r\n  \/\/ d\u00e9part, pr\u00e8s du bord. Le geste glisse ensuite jusqu\u2019au contact. Le blanc s\u2019efface autour d\u2019elles, le clip prend le relais en fondu, et\r\n  \/\/ les index se touchent.\r\n  (function () {\r\n    if (!introOn) return;\r\n    var cv = intro.querySelector('canvas'), g = cv.getContext('2d');\r\n    var hands = heroHands, video = hands && hands.video;\r\n    var RAMP = ['.', ':', '+', '*', '#'], INK = HANDS_INK, LODS = [1, 2, 4, 8, 16, 32];\r\n    var Z0 = 11, ZL = 6, MIN = 1400, MAX = 7000, ZOOM = 1700;\r\n    \/\/ Le clip part aux trois quarts du recul, quand les mains ralentissent encore : la fin du\r\n    \/\/ recul, le d\u00e9part du geste et le fondu se chevauchent, le mouvement ne s\u2019arr\u00eate jamais.\r\n    \/\/ Le blanc s\u2019est effac\u00e9 juste avant, pour que rien ne voile le clip qui arrive.\r\n    var GO = .75;\r\n    \/\/ La premi\u00e8re image du clip, r\u00e9duite (240 \u00d7 106) \u00e0 six niveaux d\u2019encre. Elle est \u00e9crite\r\n    \/\/ dans la page : lire les pixels de la vid\u00e9o est interdit quand la page est ouverte en\r\n    \/\/ fichier local, et l\u2019ouverture n\u2019a pas \u00e0 attendre la vid\u00e9o pour se dessiner.\r\n    var first = new Image();\r\n    first.src = 'data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPAAAABqCAAAAACnw4NrAAAAOGVYSWZNTQAqAAAACAABh2kABAAAAAEAAAAaAAAAAAACoAIABAAAAAEAAADwoAMABAAAAAEAAABqAAAAAG2WN0AAAAoTSURBVHgB7VzZdeM4EOTsbg6KgllMFMzEf\/vnTJiFo2AWSmK3qroBgqcAELZnNMKTSJzdVd2Ng5Sff\/zX\/Vnprz+Lbte9CD+7x18efnn4ySzwCuknc+iGzsvDG5M8WcXLw0\/m0A2dl4c3JnmyipeHn8yhGzovD29M8mQVLw8\/mUM3dF4e3pjkySpeHn4yh27o\/LOp+cUrpoivj7mSzG8W0lPg23d1fLsfOT+1TH2Hz\/enCSiE4wKaLMJO9YKaJsYau\/662bMJk+23MoZ7r9Pt8kI6+AcTqIXOIK7o3sS90JjtYaH7LsYT3dvG1mWEu+9gTLYMrTaEC7clLNdhYygKyAudxxGDW\/m3NKSxbhF6G1vnGGEaoXGgwlY6S09a0Dv2X7Zaj6NUtQpnmrgwpDlkwKTi\/dPTRL79sNED9fUAdgk\/EIeJPD7osgFZUwEtWJr5XcVzf0H7LuFHAvtufLugM5M85u8QmC5iivAWFZkC1W2XcAeRUSKZrYO476c3Lp6fm2RT4ZgSHwNLxFah\/2DRAmN+OFcoPRiaCgRDUR3tX6E3Y4jxpUaoD1\/CsSNI5cp5QBgcyTXw49Yw0e2oIHlq7ZKIQ9WnJOkTXdqeGegnACvV6DwiTL5KWjGwEzn9WC\/G7c4DO9gxb0iP65a16ia6ZnbjT+4F3j48WpoSFw9vhhx0cw4pxLo+jWrv4eiIMRljkMuuE1ZGEh7pVFl6LVC6AGVdf6LnjPBCDO3ocjirmef3vQd9a7FYQ13oOI+fcy4i7za9sd+AjYlzajdxmkXFuz1WlceENyADX0jgHH4TMRDG3ZpINK5zsjrjgDF54oLzaKTgDZCUArfq0w5pZ+aP5nDCLgwJjqNraXKnSUCcRIwsEfShYoI8PbB2D84tssxDrIdcJAD6DjsE1Ov7AWHK26TIGJm5OawpcSaF1tBgO8k8IJzTIIQBKSNJXtJlo5sViVZmYUzq3HHN7mivPAhpuWdnXPAe1Wv6vFsnKWcli2xAAn49ybLUv89scERWo7pYmMBRanf40XYUI1mWWdSzConCLZd3PfDwkYxoUFnEYjU6HhqVTyvoAnyMuSCJL3BSBZoQlm4glp2ez0u04OPmCUaRkPlyhHTuscwdEF52SktQAKNaSNmm5ChjUJBFOsLyoXnCEZlOgQnYK7BFnqZRL8mnDMsM3JbIfSu0oqaYsEASa49oBgwm3izLslcix9KEMxpuc2JffWS1uV6V3HQpYbYZzIAlby7PA+py+w8PD2QpusxB1pN4AJTAyMdO96qi+9WSiESDd9cItmhBUBdK4FbDQX5jd8ptkmo8LMXyaoChqA68NPHihrEDNEZ3GAGBNAtFsk1jKUW20oWmbJMqCc9hG2EIkRZdx80W+EvnsEEeC33F2EUEgyS8rK8HAdu9LQy\/dK8kDBjmD8NDSMypTu7GRZOXjFGfnLkHLLvs6xdlnQJtFsmFODDJ3uP67WAf3hVM5MZMqAyRdhW2oE0zODKwIGQx5QsDOGE2OG2pg1FYhhTKslY1ROoqXbwUEjYAQDWQOktANs9gBCMrjbn6ipTn\/IYROFqSETrr5g2++6pebWy2ncp7NLhVEOZasj4cA7fo5yAyjjhQaJAzdpdSCL72kTC3a47grD6Fc5i4\/MiwEJ\/NFqPYlzTe6V6tcrMoo5dKw1qdFueulbkSD0sF5mw0+mUkYOyvPxXcfvGJ4dIR\/YslvpJoGFZMGANnxvATQ5LfKlAYOD9JzDO\/5+O+Vi6Qnrq35aYWoNfdC0M6KjHzgzphijAuxR7XzKW18PXxlMUHBlVZe9N1q4qw1mJOLQBykth0kfeC36J1zjLqq2mKHAtkbDcu5azpx1G\/p6n+6qWKsJQKKdwbT\/q9noMIMDlmPMBHi8m1Mh\/Hii93AcnnisUw4m6vigfyHjdXzWFHI+kAKP8QqCPDe7d8yhPe1CEyxJoC7QcNe19g7BXfxrYB57\/\/pZaydLtD8XSzQbd7p9ztdgfo+627o37qbshlJXSb7hqkEca3+4nq\/tbdIJXWRVYpU+aZ4hrCZCivGggypAHIFXkVEYDZjG\/9x52d6T5wZ0IWbJW997BoD+J9sPOUK1nj15cqwhAy25qxjHS\/0a13YJVXup\/0dla6wYH9x03h+mEjIAbm03iakU0osIxKWPZCqiMc4nm6g6IszlUFcOAN8KWfGZCZuOBA2ord3XrgBZLGeLla5co8VF31xiNKC\/uQ5hngCu8SYex7lul9lQt8Lb7l87jXnY0vaKsj7Msn9IByZL1gOmPPQqP3uGYw9edwF1Eo6YG6OsLAYDAE0bMBojvmgeJN87B+26epu+l2taL04BFWZ81ZUiNbY0wo1syy0WZdZmKoSNAcPjayWNKpwmIP06fEJWw7or0eKIuB+tyQBD4sH6nY0ZpfVUbYIphglPA6locrQ2Z39chXv+gZFwPW8gRieoK2Rd\/qQmlIEwYQyHs8ECqjZ\/SAi2\/St69EsgDab\/4uCA8MSpgli9UwS9Jxp3LCfJ8V5Q3AQgMQpIianyviWSIH\/AJufDGRyRQy8WlJuPDhAWgWP0FPvQ6\/hkuY9begeGIn\/eLEP3JQgq8nPXSJbq399vQXEk4CGlmgEkBeAM\/AqWChvqfwvG7kHznAWnAt3wHgBqn6uanKgDvKykN65uIYzCnTyEi3z46ezKoBz9SgSMkMaojW70zMuLZMQYfdSs\/SUI2jLx9helxwANbJGUWcfLMfCQ\/R4AEBv41SWn\/\/mPjYyHM5Hzyl4GRcdlO5hxm58oFWKyhCQU42T2dr3u\/Y42921s781ndapDsn4xgZL9rmXkU5mhNi9fe6yEsD9gImrtmXU6mHobqF2mPcTtJ+lmCB6iyEmiguO2nR4Au1XGBiRcwc03ncAiH46DAnvzYRmqgtJJyMVNZibV3brOzbnlm5DfXSkLbgCoy4bvEY5LybQKI0nt+gA1+I1MGuiWjCLiSc6CUaEcWF980vihRfkaDCJrAJX\/9OWSFxMaQwpPWYQAE8CvCmi\/gWvH7X0JOLhYwdT+PSbApPRuU15Xo48IP9kxh2xlDV8veu8CIAKzTU+qKoh4k8Tqe9Ms\/S5Mujc4xbt7c9GredZcT7JsfaAvGOsi8TyYxir5qUSZiiuWSGPWi5drG1ARaK8WSGdKvq6CVfN1BSRHhm5VOYAdcARKCZ3OFin8maQmhhfMcAS3oWZnPnsMTG6QQQsn7AVKg0o\/vgz9kyp9sUjOMSliFiv0uJh6ODtfsGeZ\/kY8VQYBoWR\/C9GlD5HubiHJPPrtZTN8q3ZYoK8aWyoDvck55l2XzCC1VJIcmWqX7QW+viSviq+EDCbnM+4c1wTeAGEDaCvYIvCJVtqqOOMCBw+fgEPAv2TZm65IJFK8ESpzDrPgNWoqtxto6wbUqC8nvRLf8fAI3t\/fXiCp+Wvh5ga40vwq0t+qvJ+x+OG3Y8H8a7hQAAAABJRU5ErkJggg==';\r\n    var W = 0, H = 0, dpr = 1, cell = 7, atl = [], pts = null, got = 0, tried = 0, zOut = ZL;\r\n    var T0 = 0, last = 0, raf = 0, out = 0, over = false, handed = false, pd = 0, lost = 0;\r\n    var vidP = 0, vidOK = !video, fontOK = !document.fonts;\r\n    var clamp = function (v) { return v < 0 ? 0 : v > 1 ? 1 : v; };\r\n    var eio = function (p) { return p < .5 ? 4 * p * p * p : 1 - Math.pow(-2 * p + 2, 3) \/ 2; };\r\n    var hash = function (n) { var x = Math.sin(n * 127.1) * 43758.5453; return x - Math.floor(x); };\r\n    intro.classList.add('is-live');\r\n    \/\/ Les caract\u00e8res, dessin\u00e9s \u00e0 plusieurs tailles : nets \u00e0 tous les reculs\r\n    var build = function () {\r\n      atl = LODS.map(function (k) {\r\n        var cs = Math.max(1, Math.round(cell * dpr * k)), a = document.createElement('canvas');\r\n        a.width = cs * RAMP.length; a.height = cs * 2;\r\n        var c = a.getContext('2d');\r\n        c.font = '500 ' + Math.round(cs * 1.5) + 'px \"Geist Mono\", ui-monospace, Menlo, monospace';\r\n        c.textAlign = 'center'; c.textBaseline = 'middle';\r\n        \/\/ une ligne par main, dans sa teinte\r\n        INK.forEach(function (col, row) {\r\n          c.fillStyle = col;\r\n          RAMP.forEach(function (ch, l) { c.fillText(ch, (l + .5) * cs, (row + .56) * cs); });\r\n        });\r\n        return { cv: a, cs: cs };\r\n      });\r\n    };\r\n    var size = function () {\r\n      W = window.innerWidth; H = window.innerHeight; dpr = Math.min(2, window.devicePixelRatio || 1);\r\n      cv.width = Math.round(W * dpr); cv.height = Math.round(H * dpr);\r\n      var geo = hands && hands.at(); cell = geo && geo.cell ? geo.cell : 7;\r\n      build();\r\n    };\r\n    \/\/ La premi\u00e8re image du clip, r\u00e9duite \u00e0 une case par caract\u00e8re, en px depuis le point\r\n    \/\/ de contact ; le bas de la sc\u00e8ne s\u2019efface comme dans le h\u00e9ros\r\n    var sample = function () {\r\n      var geo = hands.at(), sw = Math.round(geo.fw \/ cell), sh = Math.round(geo.fh \/ cell), d;\r\n      try {\r\n        var sc = document.createElement('canvas'); sc.width = sw; sc.height = sh;\r\n        var sg = sc.getContext('2d', { willReadFrequently: true }); sg.imageSmoothingQuality = 'high';\r\n        sg.drawImage(first, 0, 0, sw, sh); d = sg.getImageData(0, 0, sw, sh).data;\r\n      } catch (err) { return; }\r\n      var list = [], all = 0;\r\n      for (var j = 0; j < sh; j++) for (var i = 0; i < sw; i++) {\r\n        \/\/ chaque moiti\u00e9 \u00e0 sa place de d\u00e9part, loin de l\u2019autre, compt\u00e9e depuis la pointe de son index\r\n        var u = (i + .5) \/ sw, side = u < geo.CX ? 0 : 1, x = geo.fl + (side ? geo.off : -geo.off) + u * geo.fw, y = geo.fy + (j + .5) \/ sh * geo.fh;\r\n        if (x < 0 || x > geo.w || y < 0 || y > geo.h) continue;\r\n        \/\/ un pixel transparent (image pas encore d\u00e9cod\u00e9e) compte pour du blanc\r\n        var p = (j * sw + i) * 4, I = d[p + 3] < 200 ? 0 : clamp((255 - d[p]) \/ 225);\r\n        all++;\r\n        if (y > geo.h * .8) I *= 1 - (y \/ geo.h - .8) \/ .2;\r\n        if (I > .1) list.push(x - geo.cx - (side ? 1 : -1) * geo.tip, y - geo.cy, I, Math.min(4, Math.max(0, Math.round(I * 4.6 - .3))), side);\r\n      }\r\n      \/\/ Une image noire ou vide n\u2019est pas la premi\u00e8re du clip (encre sur blanc, les mains\r\n      \/\/ en couvrent \u00e0 peu pr\u00e8s le tiers) : on la refuse et on relira plus tard\r\n      var ink = list.length \/ 5 \/ Math.max(1, all);\r\n      if (ink > .04 && ink < .6) { pts = new Float32Array(list); got = performance.now(); }\r\n    };\r\n    var track = function () {\r\n      if (!pts && first.complete && first.naturalWidth && hands && hands.at().fw && performance.now() - tried > 250) { tried = performance.now(); sample(); }\r\n      if (!video || vidOK) return;\r\n      if (video.readyState >= 4) { vidOK = true; vidP = 1; return; }\r\n      try { var b = video.buffered; if (b.length && video.duration) vidP = Math.max(vidP, b.end(b.length - 1) \/ video.duration); } catch (e) {}\r\n    };\r\n    if (video) {\r\n      video.addEventListener('progress', track);\r\n      video.addEventListener('canplaythrough', function () { vidOK = true; vidP = 1; });\r\n      video.addEventListener('error', function () { vidOK = true; vidP = 1; });\r\n    }\r\n    if (document.fonts) document.fonts.ready.then(function () { fontOK = true; if (T0) build(); });\r\n    var release = function () { if (handed) return; handed = true; loaded(); root.classList.remove('intro-hold'); };\r\n    var hand = function () {\r\n      if (over) return;\r\n      over = true; cancelAnimationFrame(raf); release();\r\n      if (intro.parentNode) intro.parentNode.removeChild(intro);\r\n    };\r\n    var frame = function (now) {\r\n      raf = requestAnimationFrame(frame);\r\n      var t = now - T0, dt = Math.min(64, now - (last || now)); last = now;\r\n      track();\r\n      var geo = hands ? hands.at() : null;\r\n      if (!geo || !geo.w) return hand();\r\n      \/\/ Le recul : lent tant que le clip arrive, puis d\u2019un seul \u00e9lan jusqu\u2019au h\u00e9ros\r\n      var goal = Math.max(.85 * vidP + .15 * (fontOK ? 1 : 0), .5 * (1 - Math.exp(-t \/ 2500)));\r\n      pd += (goal - pd) * (1 - Math.exp(-dt \/ 500));\r\n      var z = Z0 * Math.pow(ZL \/ Z0, pd), wa = 1, fo = pts ? clamp((now - got) \/ 600) : 0;\r\n      if (!out && ((vidOK && fontOK && pts && t > MIN) || t > MAX)) { out = now; zOut = z; intro.classList.add('is-out'); if (hands.zoom) hands.zoom(out, zOut, ZOOM); }\r\n      if (out) {\r\n        var p = clamp((now - out) \/ ZOOM);\r\n        z = Math.exp(Math.log(zOut) * (1 - eio(p)));\r\n        \/\/ le blanc s\u2019efface sur la fin du recul, autour des mains presque \u00e0 leur taille\r\n        wa = 1 - clamp((p - GO + .3) \/ .3);\r\n        if (p >= GO) release();\r\n      }\r\n      if (handed) {\r\n        if (geo.broken || !pts || (!geo.live && now - out > ZOOM + 3500)) lost = lost || now;\r\n        if (geo.live) fo = Math.min(fo, 1 - geo.mix);\r\n        if (lost) fo = Math.min(fo, 1 - clamp((now - lost) \/ 450));\r\n        if (fo <= 0) return hand();\r\n      }\r\n      g.setTransform(dpr, 0, 0, dpr, 0, 0); g.globalAlpha = 1; g.clearRect(0, 0, W, H);\r\n      if (wa > 0) { g.globalAlpha = wa; g.fillStyle = '#fff'; g.fillRect(0, 0, W, H); }\r\n      if (pts && fo > 0) {\r\n        var c = cell * z, need = c * dpr, L = atl[atl.length - 1];\r\n        for (var k = 0; k < atl.length; k++) if (atl[k].cs >= need * .9) { L = atl[k]; break; }\r\n        \/\/ chaque main recule autour de la pointe de son index, qui suit ensuite le glissement du clip\r\n        var tip = geo.tip, px = [geo.x + geo.cx - tip, geo.x + geo.cx + tip], py = geo.y + geo.cy, slot = Math.floor(now \/ 150), m = c;\r\n        for (var q = 0, n = 0; q < pts.length; q += 5, n++) {\r\n          var x = px[pts[q + 4]] + pts[q] * z, y = py + pts[q + 1] * z;\r\n          if (x < -m || x > W + m || y < -m || y > H + m) continue;\r\n          \/\/ un caract\u00e8re sur quinze change de temps en temps, comme dans le clip\r\n          var lv = hash(n * .37 + slot) < .07 ? 1 + Math.floor(hash(n * 1.9 + slot) * 4) : pts[q + 3];\r\n          g.globalAlpha = (.3 + .7 * pts[q + 2]) * fo;\r\n          g.drawImage(L.cv, lv * L.cs, pts[q + 4] * L.cs, L.cs, L.cs, x - c \/ 2, y - c \/ 2, c, c);\r\n        }\r\n      }\r\n      g.globalAlpha = 1;\r\n      if (!intro.classList.contains('is-drawn')) intro.classList.add('is-drawn');\r\n    };\r\n    var begin = function () {\r\n      if (T0) return;\r\n      size(); T0 = performance.now(); track();\r\n      raf = requestAnimationFrame(frame);\r\n    };\r\n    window.addEventListener('resize', function () { if (T0 && !over) { size(); if (pts && !out) sample(); } });\r\n    \/\/ On attend que la page ait fini son premier rendu, qui fige une ou deux images\r\n    requestAnimationFrame(function () { requestAnimationFrame(begin); });\r\n    window.setTimeout(begin, 400);\r\n  })();\r\n  \/* ---------------- Territoires : carte de France ---------------- *\/\r\n  \/\/ La France en points, avec ses cinq d\u00e9partements d\u2019outre-mer en cartouches.\r\n  \/\/ Chaque champ d\u2019action a sa couche : une onde recolore les points, puis les\r\n  \/\/ rep\u00e8res propres \u00e0 la couche s\u2019animent (anneaux des agglom\u00e9rations, r\u00e9seau des\r\n  \/\/ structures de l\u2019ESS reli\u00e9 \u00e0 l\u2019Europe). La l\u00e9gende ne s\u2019allume qu\u2019apr\u00e8s l\u2019onde.\r\n  (function () {\r\n    var box = document.getElementById('shl-accueil').querySelector('[data-terr]');\r\n    if (!box) return;\r\n    var canvas = box.querySelector('canvas'), ctx = canvas.getContext('2d'), stage = canvas.parentElement;\r\n    var items = Array.prototype.slice.call(box.querySelectorAll('.field'));\r\n    var btns = items.map(function (li) { return li.querySelector('.field-btn'); });\r\n    var keys = Array.prototype.slice.call(box.querySelectorAll('.terr-key li'));\r\n    var slots = Array.prototype.slice.call(box.querySelectorAll('.drom li'));\r\n    var count = box.querySelector('[data-terr-count]');\r\n    var TONES = ['#45508a', '#55926f', '#bd9035'], GREY = '#d3dbd7', TAU = 6.2832, WAVE = 900;\r\n    \/\/ Contours simplifi\u00e9s (latitude, longitude)\r\n    var HEX = [[51.09,2.55],[50.95,2.61],[50.82,2.63],[50.7,2.9],[50.77,3.1],[50.7,3.25],[50.52,3.3],[50.47,3.6],[50.35,3.7],[50.33,4.02],[50.13,4.2],[49.98,4.15],[50.02,4.45],[50.17,4.83],[49.97,4.85],[49.8,4.9],[49.7,5.2],[49.55,5.45],[49.53,5.8],[49.47,6.1],[49.47,6.37],[49.35,6.55],[49.2,6.75],[49.2,7],[49.12,7.3],[49.17,7.55],[49.05,7.95],[48.97,8.23],[48.8,8.1],[48.55,7.8],[48.3,7.7],[47.95,7.55],[47.59,7.59],[47.5,7.35],[47.45,7],[47.3,6.95],[47.1,6.75],[46.9,6.45],[46.6,6.15],[46.4,6.1],[46.25,5.97],[46.15,5.96],[46.13,6.15],[46.25,6.3],[46.4,6.5],[46.38,6.8],[46.15,6.85],[45.95,6.95],[45.83,6.86],[45.65,6.95],[45.45,7.1],[45.25,6.9],[45.1,6.7],[44.95,6.75],[44.85,6.95],[44.6,6.95],[44.4,6.9],[44.25,7],[44.15,7.35],[43.95,7.6],[43.78,7.53],[43.7,7.3],[43.55,7.1],[43.52,6.93],[43.42,6.8],[43.27,6.7],[43.2,6.55],[43.08,6.3],[43.02,6.12],[43.07,5.9],[43.2,5.6],[43.22,5.35],[43.33,5.2],[43.4,5],[43.33,4.85],[43.4,4.55],[43.45,4.35],[43.53,4.12],[43.4,3.7],[43.28,3.45],[43.15,3.2],[42.95,3.05],[42.7,3.03],[42.52,3.1],[42.43,3.17],[42.43,2.9],[42.35,2.6],[42.4,2.2],[42.45,1.95],[42.5,1.72],[42.6,1.45],[42.7,1.05],[42.78,0.7],[42.7,0.4],[42.78,0],[42.85,-0.3],[42.95,-0.55],[42.97,-0.9],[43.05,-1.3],[43.2,-1.45],[43.37,-1.78],[43.48,-1.56],[43.7,-1.44],[44.2,-1.28],[44.64,-1.25],[45.1,-1.18],[45.57,-1.06],[45.75,-1.2],[45.95,-1.35],[46.15,-1.25],[46.35,-1.45],[46.45,-1.75],[46.7,-1.95],[46.9,-2.15],[47.05,-2.25],[47.15,-2.12],[47.28,-2.25],[47.3,-2.52],[47.48,-2.85],[47.52,-3.1],[47.62,-3.2],[47.72,-3.45],[47.8,-3.85],[47.85,-4.1],[47.8,-4.37],[48,-4.6],[48.1,-4.72],[48.35,-4.78],[48.6,-4.62],[48.68,-4.3],[48.72,-3.98],[48.73,-3.6],[48.83,-3.45],[48.8,-3.05],[48.55,-2.75],[48.6,-2.45],[48.68,-2.32],[48.65,-2.02],[48.68,-1.85],[48.62,-1.51],[48.84,-1.58],[49.1,-1.6],[49.38,-1.8],[49.72,-1.94],[49.66,-1.62],[49.7,-1.26],[49.58,-1.25],[49.38,-1.15],[49.36,-0.85],[49.34,-0.55],[49.29,-0.25],[49.42,0.2],[49.49,0.1],[49.7,0.2],[49.77,0.4],[49.87,0.75],[49.93,1.08],[50.06,1.37],[50.2,1.58],[50.4,1.56],[50.52,1.58],[50.73,1.6],[50.87,1.58],[50.95,1.85],[51,2.12],[51.05,2.37]];\r\n    var CORSE = [[43.01,9.42],[42.8,9.48],[42.7,9.45],[42.4,9.54],[42.1,9.55],[41.86,9.4],[41.6,9.29],[41.38,9.2],[41.4,9.05],[41.6,8.8],[41.72,8.7],[41.92,8.74],[42.05,8.6],[42.25,8.62],[42.38,8.55],[42.55,8.72],[42.64,8.95],[42.68,9.25],[42.75,9.33],[42.95,9.35]];\r\n    \/\/ Outre-mer, dans l\u2019ordre des cartouches ; `c` est le chef-lieu\r\n    var DOM = [\r\n      { c: [16.24, -61.53], p: [[[16.35,-61.72],[16.3,-61.79],[16.17,-61.8],[16.02,-61.74],[15.96,-61.68],[16,-61.58],[16.1,-61.56],[16.2,-61.57],[16.27,-61.58],[16.34,-61.61]], [[16.51,-61.47],[16.47,-61.35],[16.4,-61.23],[16.33,-61.18],[16.28,-61.25],[16.23,-61.38],[16.22,-61.5],[16.27,-61.54],[16.35,-61.52],[16.45,-61.53]], [[15.99,-61.28],[15.95,-61.2],[15.87,-61.22],[15.86,-61.3],[15.92,-61.34]]] },\r\n      { c: [14.61, -61.07], p: [[[14.88,-61.17],[14.8,-61.23],[14.72,-61.18],[14.63,-61.15],[14.57,-61.1],[14.5,-61.08],[14.45,-60.98],[14.4,-60.88],[14.45,-60.82],[14.55,-60.82],[14.64,-60.86],[14.72,-60.9],[14.76,-60.82],[14.79,-60.92],[14.85,-61.02]]] },\r\n      { c: [4.93, -52.33], p: [[[5.75,-54.02],[5.55,-53.5],[5.25,-52.9],[4.93,-52.3],[4.6,-51.95],[4.25,-51.63],[3.8,-51.7],[3.3,-52.2],[2.6,-52.55],[2.2,-52.9],[2.25,-53.7],[2.2,-54.2],[2.4,-54.55],[3.2,-54.2],[3.7,-54.4],[4.3,-54.45],[5,-54.2],[5.4,-54.1]]] },\r\n      { c: [-20.9, 55.45], p: [[[-20.87,55.4],[-20.88,55.6],[-20.95,55.7],[-21.05,55.8],[-21.2,55.83],[-21.33,55.78],[-21.39,55.62],[-21.37,55.45],[-21.28,55.3],[-21.12,55.22],[-20.98,55.28]]] },\r\n      { c: [-12.78, 45.22], p: [[[-12.64,45.05],[-12.68,45.15],[-12.75,45.19],[-12.88,45.2],[-12.97,45.21],[-13,45.14],[-12.94,45.1],[-12.88,45.05],[-12.8,45.07],[-12.72,45.03]], [[-12.77,45.27],[-12.8,45.3],[-12.83,45.28],[-12.8,45.25]]] }\r\n    ];\r\n    \/\/ Agglom\u00e9rations (poids : \u00e9tendue des quartiers prioritaires)\r\n    var CITIES = [[48.86,2.35,1.35],[43.3,5.37,1],[45.76,4.84,.9],[50.63,3.06,.9],[43.6,1.44,.75],[44.84,-.58,.7],[47.22,-1.55,.65],[48.58,7.75,.65],[43.61,3.88,.65],[43.7,7.27,.6],[49.44,1.1,.6],[45.19,5.72,.55],[45.44,4.39,.55],[48.11,-1.68,.55],[50.43,2.83,.55],[47.75,7.34,.5],[49.26,4.03,.5],[49.49,.11,.5],[43.12,5.93,.5],[43.95,4.81,.5],[43.84,4.36,.5],[49.12,6.18,.5],[50.36,3.52,.5],[49.89,2.3,.45],[48.69,6.18,.45],[47.32,5.04,.45],[45.78,3.08,.45],[47.9,1.9,.45],[47.39,.69,.45],[42.7,2.9,.45],[49.26,2.47,.4],[45.83,1.26,.4],[47.24,6.02,.4],[49.18,-.37,.4],[47.47,-.55,.4],[48,.2,.4],[43.34,3.21,.4],[47.51,6.8,.4],[51.03,2.37,.4],[48.39,-4.49,.35],[43.3,-.37,.35],[46.58,.34,.35],[48.3,4.08,.35],[41.93,8.74,.3],[42.7,9.45,.3]];\r\n    \/\/ Structures de l\u2019ESS accompagn\u00e9es : un semis de villes, Marseille en t\u00eate\r\n    var ESS = [[43.3,5.37],[50.63,3.06],[48.11,-1.68],[47.22,-1.55],[44.84,-.58],[43.6,1.44],[43.61,3.88],[45.76,4.84],[45.19,5.72],[48.58,7.75],[48.69,6.18],[47.32,5.04],[48.86,2.35],[49.44,1.1],[47.39,.69],[45.83,1.26],[45.78,3.08],[43.3,-.37],[43.7,7.27],[41.93,8.74],[48.39,-4.49],[49.89,2.3],[46.58,.34]];\r\n    var TOP = 10;   \/\/ les dix premi\u00e8res agglom\u00e9rations portent un anneau\r\n    var K = Math.cos(46.5 * Math.PI \/ 180);\r\n    var proj = function (ll, k) { return [ll[1] * (k || K), -ll[0]]; };\r\n    var inPoly = function (poly, x, y) {\r\n      for (var c = false, i = 0, j = poly.length - 1; i < poly.length; j = i++) {\r\n        var a = poly[i], b = poly[j];\r\n        if ((a[1] > y) !== (b[1] > y) && x < (b[0] - a[0]) * (y - a[1]) \/ (b[1] - a[1]) + a[0]) c = !c;\r\n      }\r\n      return c;\r\n    };\r\n    var clamp01 = function (v) { return v < 0 ? 0 : v > 1 ? 1 : v; };\r\n    var ease = function (t) { return t < .5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) \/ 2; };\r\n    var hash = function (n) { var x = Math.sin(n * 127.1) * 43758.5453; return x - Math.floor(x); };\r\n    var segDist = function (p, a, b) {\r\n      var dx = b[0] - a[0], dy = b[1] - a[1], t = clamp01(((p[0] - a[0]) * dx + (p[1] - a[1]) * dy) \/ (dx * dx + dy * dy));\r\n      return Math.hypot(p[0] - a[0] - t * dx, p[1] - a[1] - t * dy);\r\n    };\r\n    \/\/ La grille de l\u2019hexagone, calcul\u00e9e une fois, en unit\u00e9s projet\u00e9es\r\n    var HP = HEX.map(function (p) { return proj(p); }), CP = CORSE.map(function (p) { return proj(p); });\r\n    var all = HP.concat(CP), minX = 1e9, maxX = -1e9, minY = 1e9, maxY = -1e9;\r\n    all.forEach(function (p) { minX = Math.min(minX, p[0]); maxX = Math.max(maxX, p[0]); minY = Math.min(minY, p[1]); maxY = Math.max(maxY, p[1]); });\r\n    var ROWS = 62, STEP = (maxY - minY) \/ ROWS, COLS = Math.ceil((maxX - minX) \/ STEP);\r\n    var cityP = CITIES.map(function (c) { return proj(c); }), essP = ESS.map(function (c) { return proj(c); });\r\n    var diagA = proj([49.6, 5.4]), diagB = proj([43.5, -.8]);\r\n    var FX = [], FY = [], V = [[], [], []];\r\n    for (var j = 0; j < ROWS; j++) for (var i = 0; i < COLS; i++) {\r\n      var x = minX + (i + .5) * STEP, y = minY + (j + .5) * STEP;\r\n      if (!inPoly(HP, x, y) && !inPoly(CP, x, y)) continue;\r\n      var n = FX.length, q = 0, dmin = 1e9;\r\n      FX.push(x); FY.push(y);\r\n      cityP.forEach(function (c, k) {\r\n        var d = Math.hypot(x - c[0], y - c[1]), w = CITIES[k][2];\r\n        q = Math.max(q, w * clamp01(1 - d \/ (.2 + .24 * w)));\r\n        if (w >= .45) dmin = Math.min(dmin, d);\r\n      });\r\n      V[0].push(q > .12 ? Math.min(1, .35 + q) : 0);\r\n      var far = clamp01((dmin - .28) \/ .5), band = Math.exp(-Math.pow(segDist([x, y], diagA, diagB) \/ .9, 2));\r\n      var r = far * (.4 + .6 * band) * (.8 + .2 * hash(n + 1));\r\n      V[1].push(r > .16 ? r : 0);\r\n      var e = 0;\r\n      essP.forEach(function (c) { e = Math.max(e, clamp01(1 - Math.hypot(x - c[0], y - c[1]) \/ .2)); });\r\n      V[2].push(e > .05 ? .25 + .6 * e : 0);\r\n    }\r\n    var NF = FX.length;\r\n    \/\/ Liens du r\u00e9seau : chaque structure vers ses deux voisines les plus proches\r\n    var LINKS = [];\r\n    essP.forEach(function (a, ia) {\r\n      essP.map(function (b, ib) { return [ib, Math.hypot(a[0] - b[0], a[1] - b[1])]; })\r\n        .sort(function (u, v) { return u[1] - v[1]; }).slice(1, 3)\r\n        .forEach(function (nb) { var k = Math.min(ia, nb[0]) + ':' + Math.max(ia, nb[0]); if (LINKS.indexOf(k) < 0) LINKS.push(k); });\r\n    });\r\n    LINKS = LINKS.map(function (k) { return k.split(':').map(Number); });\r\n    var STRAS = 9;   \/\/ Strasbourg : le r\u00e9seau y rejoint l\u2019Europe\r\n    \/\/ Mise en page (px) : points de l\u2019hexagone, puis des cartouches\r\n    var W = 0, H = 0, dpr = 1, pitch = 1, r0 = 1, mk = 1, ox = 0, oy = 0, base = null;\r\n    var PX = [], PY = [], DX = [], DY = [], DS = [], DV = [[], [], []], cityPx = [], essPx = [], eu = [0, 0];\r\n    var toPx = function (p) { return [ox + (p[0] - minX) * pitch \/ STEP, oy + (p[1] - minY) * pitch \/ STEP]; };\r\n    var layout = function () {\r\n      var rect = stage.getBoundingClientRect();\r\n      W = rect.width; H = rect.height;\r\n      if (!W || !H) return;\r\n      dpr = Math.min(window.devicePixelRatio || 1, 2);\r\n      canvas.width = Math.round(W * dpr); canvas.height = Math.round(H * dpr);\r\n      \/\/ Cartouches en colonne \u00e0 gauche, ou en rang\u00e9e dessous (t\u00e9l\u00e9phone)\r\n      var dr = slots[0].parentElement.getBoundingClientRect(), row = dr.width > W \/ 2, pad = row ? 14 : 22;\r\n      var L = row ? pad : dr.right - rect.left + 18, B = row ? rect.bottom - dr.top + 12 : pad;\r\n      pitch = Math.min((W - L - pad) \/ COLS, (H - pad - B) \/ ROWS);\r\n      ox = L + (W - L - pad - COLS * pitch) \/ 2; oy = pad + (H - pad - B - ROWS * pitch) \/ 2;\r\n      r0 = Math.max(1, pitch * .3); mk = Math.max(.7, Math.min(1.3, pitch \/ 8));\r\n      PX = []; PY = [];\r\n      for (var k = 0; k < NF; k++) { var p = toPx([FX[k], FY[k]]); PX.push(p[0]); PY.push(p[1]); }\r\n      cityPx = cityP.slice(0, TOP).map(toPx); essPx = essP.map(toPx);\r\n      eu = [W - 34 * mk - 8, 34 * mk + 8];\r\n      \/\/ Cartouches : chaque \u00eele \u00e0 sa propre \u00e9chelle, points un peu plus serr\u00e9s\r\n      DX = []; DY = []; DS = []; DV = [[], [], []];\r\n      var pp = pitch * .78;\r\n      DOM.forEach(function (d, si) {\r\n        var sr = slots[si].getBoundingClientRect();\r\n        var bx = sr.left - rect.left + 6, by = sr.top - rect.top + 6, bw = sr.width - 12, bh = sr.height - 28;\r\n        var kk = Math.cos(d.c[0] * Math.PI \/ 180), polys = d.p.map(function (poly) { return poly.map(function (q) { return proj(q, kk); }); });\r\n        var x0 = 1e9, x1 = -1e9, y0 = 1e9, y1 = -1e9;\r\n        polys.forEach(function (poly) { poly.forEach(function (q) { x0 = Math.min(x0, q[0]); x1 = Math.max(x1, q[0]); y0 = Math.min(y0, q[1]); y1 = Math.max(y1, q[1]); }); });\r\n        var sc = Math.min(bw \/ (x1 - x0), bh \/ (y1 - y0)), cx = bx + bw \/ 2, cy = by + bh \/ 2;\r\n        var mx = (x0 + x1) \/ 2, my = (y0 + y1) \/ 2, cc = proj(d.c, kk);\r\n        var ccx = cx + (cc[0] - mx) * sc, ccy = cy + (cc[1] - my) * sc;\r\n        var nx = Math.floor(bw \/ pp), ny = Math.floor(bh \/ pp);\r\n        for (var iy = 0; iy < ny; iy++) for (var ix = 0; ix < nx; ix++) {\r\n          var gx = cx + (ix - (nx - 1) \/ 2) * pp, gy = cy + (iy - (ny - 1) \/ 2) * pp;\r\n          var ux = mx + (gx - cx) \/ sc, uy = my + (gy - cy) \/ sc;\r\n          if (!polys.some(function (poly) { return inPoly(poly, ux, uy); })) continue;\r\n          var dc = Math.hypot(gx - ccx, gy - ccy) \/ pp;\r\n          DX.push(gx); DY.push(gy); DS.push(si);\r\n          DV[0].push(dc < 2.2 ? .45 + .5 * (1 - dc \/ 2.2) : 0);\r\n          DV[1].push(.55 + .35 * hash(DX.length));\r\n          DV[2].push(dc < 1.6 ? .4 + .5 * (1 - dc \/ 1.6) : 0);\r\n        }\r\n      });\r\n      \/\/ Couche fixe : tous les points gris\r\n      base = document.createElement('canvas');\r\n      base.width = canvas.width; base.height = canvas.height;\r\n      var b = base.getContext('2d');\r\n      b.scale(dpr, dpr); b.fillStyle = GREY; b.beginPath();\r\n      for (k = 0; k < NF; k++) { b.moveTo(PX[k] + r0, PY[k]); b.arc(PX[k], PY[k], r0, 0, TAU); }\r\n      for (k = 0; k < DX.length; k++) { b.moveTo(DX[k] + r0 * .85, DY[k]); b.arc(DX[k], DY[k], r0 * .85, 0, TAU); }\r\n      b.fill();\r\n      draw(performance.now());\r\n    };\r\n    \/\/ \u00c9tat : couche affich\u00e9e, couche pr\u00e9c\u00e9dente, instant du changement\r\n    var cur = -1, prev = -1, ts = 0, running = false, visible = false, raf = 0, keyTimer = 0;\r\n    var ORIG = [[48.86, 2.35], [45.5, 2.8], [43.3, 5.37]].map(function (o) { return proj(o); });\r\n    var dot = function (x, y, r) { ctx.beginPath(); ctx.arc(x, y, r, 0, TAU); ctx.fill(); };\r\n    var ring = function (x, y, r) { ctx.beginPath(); ctx.arc(x, y, r, 0, TAU); ctx.stroke(); };\r\n    var draw = function (now) {\r\n      if (!base) return;\r\n      ctx.setTransform(1, 0, 0, 1, 0, 0);\r\n      ctx.clearRect(0, 0, canvas.width, canvas.height);\r\n      ctx.drawImage(base, 0, 0);\r\n      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);\r\n      if (cur < 0) return;\r\n      var t = calm ? 1e9 : now - ts, o = toPx(ORIG[cur]), reach = Math.hypot(W, H);\r\n      \/\/ L\u2019onde : la couche pr\u00e9c\u00e9dente s\u2019\u00e9teint, la nouvelle s\u2019allume, depuis son origine\r\n      var wave = function (x, y) { return ease(clamp01((t - Math.hypot(x - o[0], y - o[1]) \/ reach * WAVE) \/ 520)); };\r\n      var paint = function (px, py, vals, r, k, pd) {\r\n        var p = pd == null ? wave(px, py) : ease(clamp01((t - pd) \/ 520));\r\n        var a = prev >= 0 ? vals[prev][k] * (1 - p) : 0, b = vals[cur][k] * p;\r\n        if (cur === 1 && b) b *= .88 + .12 * Math.sin(now \/ 900 + k);\r\n        if (a > .02) { ctx.globalAlpha = a; ctx.fillStyle = TONES[prev]; dot(px, py, r * (1 + .3 * a)); }\r\n        if (b > .02) { ctx.globalAlpha = b; ctx.fillStyle = TONES[cur]; dot(px, py, r * (1 + .3 * b)); }\r\n      };\r\n      for (var k = 0; k < NF; k++) paint(PX[k], PY[k], V, r0, k);\r\n      for (k = 0; k < DX.length; k++) paint(DX[k], DY[k], DV, r0 * .85, k, WAVE * .45 + DS[k] * 70);\r\n      ctx.globalAlpha = 1;\r\n      \/\/ Rep\u00e8res propres \u00e0 chaque couche, une fois l\u2019onde pass\u00e9e\r\n      var fin = calm ? 1 : clamp01((t - WAVE * .8) \/ 600), out = calm ? 0 : 1 - clamp01((t) \/ 260);\r\n      var layer = function (L, amt) {\r\n        if (amt <= .01) return;\r\n        var tone = TONES[L];\r\n        if (L === 0) {\r\n          cityPx.forEach(function (c, i) {\r\n            if (!calm) {\r\n              var q = ((now + i * 330) % 2800) \/ 2800;\r\n              ctx.globalAlpha = (1 - q) * .55 * amt; ctx.strokeStyle = tone; ctx.lineWidth = 1.2;\r\n              ring(c[0], c[1], (4 + q * 18) * mk);\r\n            }\r\n            ctx.globalAlpha = amt; ctx.fillStyle = '#fff'; dot(c[0], c[1], 3.6 * mk);\r\n            ctx.fillStyle = tone; dot(c[0], c[1], 2.2 * mk);\r\n          });\r\n        }\r\n        if (L === 2) {\r\n          var grow = calm ? 1 : clamp01((t - WAVE * .7) \/ 1100);\r\n          ctx.lineCap = 'round'; ctx.strokeStyle = tone; ctx.lineWidth = 1.3 * mk;\r\n          LINKS.forEach(function (lk, i) {\r\n            var a = essPx[lk[0]], b = essPx[lk[1]], g = ease(clamp01(grow * 1.6 - i \/ LINKS.length * .6));\r\n            if (g <= 0) return;\r\n            ctx.globalAlpha = .5 * amt;\r\n            ctx.beginPath(); ctx.moveTo(a[0], a[1]); ctx.lineTo(a[0] + (b[0] - a[0]) * g, a[1] + (b[1] - a[1]) * g); ctx.stroke();\r\n          });\r\n          \/\/ Changer d\u2019\u00e9chelle : du r\u00e9seau, un fil part vers l\u2019Europe\r\n          var s = essPx[STRAS], ge = calm ? 1 : ease(clamp01((t - WAVE * .7 - 900) \/ 800));\r\n          if (ge > 0) {\r\n            ctx.globalAlpha = .75 * amt; ctx.setLineDash([0, 5 * mk]); ctx.lineWidth = 1.6 * mk;\r\n            ctx.beginPath(); ctx.moveTo(s[0], s[1]); ctx.lineTo(s[0] + (eu[0] - s[0]) * ge, s[1] + (eu[1] - s[1]) * ge); ctx.stroke();\r\n            ctx.setLineDash([]);\r\n            var ea = amt * clamp01(ge * 3 - 2), er = 13 * mk;\r\n            if (ea > 0) {\r\n              ctx.globalAlpha = ea;\r\n              ctx.fillStyle = '#fff'; dot(eu[0], eu[1], er + 3 * mk);\r\n              ctx.fillStyle = '#003399'; dot(eu[0], eu[1], er);\r\n              ctx.fillStyle = '#ffcc00';\r\n              for (var st = 0; st < 12; st++) dot(eu[0] + Math.cos(st * TAU \/ 12) * er * .62, eu[1] + Math.sin(st * TAU \/ 12) * er * .62, 1.1 * mk);\r\n              if (!calm) { var qe = (now % 2400) \/ 2400; ctx.globalAlpha = (1 - qe) * .5 * ea; ctx.strokeStyle = '#003399'; ctx.lineWidth = 1.2; ring(eu[0], eu[1], er + (3 + qe * 14) * mk); }\r\n            }\r\n          }\r\n          \/\/ Des \u00e9clats circulent sur le r\u00e9seau\r\n          if (!calm && grow >= 1) {\r\n            for (var c = 0; c < 3; c++) {\r\n              var cyc = Math.floor((now + c * 700) \/ 2100), lk = LINKS[(cyc * 7 + c * 5) % LINKS.length], u = ease(((now + c * 700) % 2100) \/ 2100);\r\n              var A = essPx[lk[0]], B = essPx[lk[1]];\r\n              if (cyc % 2) { var tmp = A; A = B; B = tmp; }\r\n              ctx.globalAlpha = amt * Math.sin(u * Math.PI); ctx.fillStyle = tone;\r\n              dot(A[0] + (B[0] - A[0]) * u, A[1] + (B[1] - A[1]) * u, 2.6 * mk);\r\n            }\r\n          }\r\n          essPx.forEach(function (p, i) {\r\n            var pop = calm ? 1 : ease(clamp01((t - WAVE * .6 - i * 40) \/ 420)), big = i === 0 ? 1.35 : 1;\r\n            if (pop <= 0) return;\r\n            if (!calm) {\r\n              var q = ((now + i * 410) % 3600) \/ 3600;\r\n              ctx.globalAlpha = (1 - q) * .35 * amt; ctx.strokeStyle = tone; ctx.lineWidth = 1;\r\n              ring(p[0], p[1], (5 + q * 16) * mk * big);\r\n            }\r\n            ctx.globalAlpha = amt * pop;\r\n            ctx.fillStyle = '#fff'; dot(p[0], p[1], 4.4 * mk * big * pop);\r\n            ctx.fillStyle = tone; dot(p[0], p[1], 2.6 * mk * big * pop);\r\n          });\r\n        }\r\n        ctx.globalAlpha = 1;\r\n      };\r\n      if (prev >= 0 && out > 0) layer(prev, out);\r\n      layer(cur, fin);\r\n    };\r\n    var loop = function (now) { draw(now); if (running) raf = requestAnimationFrame(loop); };\r\n    var play = function () { if (calm || running || !visible || cur < 0 || document.hidden) return; running = true; raf = requestAnimationFrame(loop); };\r\n    var pause = function () { running = false; cancelAnimationFrame(raf); };\r\n    \/\/ Passer \u00e0 une couche : la l\u00e9gende s\u2019\u00e9teint d\u2019un coup, se rallume apr\u00e8s l\u2019onde\r\n    var show = function (L) {\r\n      if (L === cur) return;\r\n      prev = cur; cur = L; ts = performance.now();\r\n      items.forEach(function (li, i) { li.classList.toggle('is-on', i === L); btns[i].setAttribute('aria-pressed', i === L ? 'true' : 'false'); });\r\n      keys.forEach(function (k) { k.classList.remove('is-on'); });\r\n      box.classList.remove('is-dom');\r\n      clearTimeout(keyTimer);\r\n      keyTimer = setTimeout(function () {\r\n        keys[L].classList.add('is-on');\r\n        box.classList.toggle('is-dom', L === 1);\r\n        count.textContent = '0' + (L + 1) + ' \/ 03';\r\n      }, calm ? 0 : WAVE + 150);\r\n      if (calm) draw(performance.now()); else play();\r\n    };\r\n    btns.forEach(function (b, i) { b.addEventListener('click', function () { box.classList.remove('is-auto'); show(i); }); });\r\n    \/\/ Le cycle : la barre du champ actif sert de minuterie\r\n    items.forEach(function (li, i) {\r\n      li.querySelector('.field-bar').addEventListener('animationend', function () { if (box.classList.contains('is-auto')) show((i + 1) % items.length); });\r\n    });\r\n    keys[0].classList.remove('is-on');\r\n    if ('ResizeObserver' in window) new ResizeObserver(layout).observe(stage); else window.addEventListener('resize', layout);\r\n    layout();\r\n    if (calm) { show(0); return; }\r\n    if ('IntersectionObserver' in window) {\r\n      new IntersectionObserver(function (entries) {\r\n        visible = entries[0].isIntersecting;\r\n        box.classList.toggle('is-hold', !visible);\r\n        if (visible) { if (cur < 0) { box.classList.add('is-auto'); show(0); } play(); } else pause();\r\n      }, { threshold: .35 }).observe(stage);\r\n    } else { visible = true; show(0); }\r\n    document.addEventListener('visibilitychange', function () { document.hidden ? pause() : play(); });\r\n  })();\r\n  \/* ---------------- Carte de l\u2019Europe ---------------- *\/\r\n  \/\/ Grille de points pr\u00e9calcul\u00e9e (projection azimutale \u00e9quivalente centr\u00e9e sur\r\n  \/\/ l\u2019Europe, 111 \u00d7 92 cases). Chaque bit dit si la case est sur terre, et si\r\n  \/\/ elle est en France. Les villes sont en unit\u00e9s de case.\r\n  var GRID = {\"cols\":111,\"rows\":92,\"step\":9,\"land\":\"AAAAAEAA\/P\/\/kQb4\/38AAAAAIAD+\/\/8D4P\/\/PwAAAAAAAPz\/\/wH4\/\/8fAAAAAAAA\/v\/\/AP7\/\/w8AAABAAMD\/\/z9g\/\/\/\/BwAAgAAA4P\/\/H4D\/\/\/8DAAAgDgDAj\/8DGP\/\/\/wEAAIgDAPDD\/wGA\/\/\/\/AAAA6AAA+OD\/AMD\/\/38AAAD1AwA44H8Ex\/\/\/PwAAAPgDAADwP4L3\/\/8fAAAA\/gAAAPEfwf\/\/\/w8AAIB+AADA+B\/g\/\/\/\/BwAAgB8AAHj4B\/D\/\/\/8DAADQDwAAPPwB+P\/\/\/wEAANAHAAA\/\/gD8\/\/\/\/AADA4AcAgA8fAPz\/\/38AAPDxAwDAQwcA\/\/\/\/PwCA+P0BAOC5AwD\/\/\/8fAID\/8AEAYB8A4P\/\/\/w8A4D\/4AAAwAIDx\/\/\/\/BwDwj\/wAALgD8Pz\/\/\/8DAOAH\/AAAmBD8\/\/\/\/\/wEA+AN+AAA8hv\/\/\/\/\/\/AAD+kR8AAP7\/\/\/\/\/\/38AwH\/4HwCg\/\/\/\/\/\/\/\/PwDgP\/gPAPv\/\/\/\/\/\/\/8fAPAD\/B\/A\/\/\/\/\/\/\/\/\/w8AAID\/H\/D\/\/\/\/\/\/\/\/\/BwAA4P8P\/P\/\/\/\/\/\/\/\/8DAADA\/wf+\/\/\/\/\/\/\/\/\/wEAAED\/gP\/\/\/\/\/\/\/\/\/\/AAAA+D\/A\/\/\/\/\/\/\/\/\/38AAAD+f+j\/\/\/\/\/\/\/\/\/PwAAgCeO\/\/\/\/\/\/\/\/\/\/8fAAAgAOD\/\/\/\/\/\/\/\/\/\/w8AAAAA8P\/\/\/\/\/\/\/\/\/\/BwAAAAD4\/\/\/\/\/\/\/\/\/\/8DAAAAhP\/\/\/\/\/\/\/\/\/\/\/wEAAADG\/\/\/\/\/\/\/\/\/\/\/\/AAAAAP\/\/\/\/\/\/\/\/\/\/\/38AAICP\/\/\/\/\/\/\/\/\/\/\/\/PwAAgP\/\/\/\/\/\/\/\/\/\/\/\/8fAADA\/\/\/\/\/\/\/\/\/\/\/\/\/wcAAID\/\/\/\/\/\/\/\/\/\/\/\/\/AwAAAP\/\/\/\/\/\/\/\/\/\/\/\/8BAACA\/\/\/\/\/\/\/\/\/\/\/\/fwAAAID\/\/\/\/\/\/\/\/\/\/\/8fAAAAwP\/\/\/\/\/\/\/\/\/\/\/x8AAADg\/\/\/\/\/\/\/\/\/\/\/\/DwAAAMD\/\/\/\/\/\/\/\/\/\/\/8HAAAA4P\/\/\/\/\/\/\/\/\/\/\/wAAAAD4\/\/\/\/\/\/\/\/\/\/9\/AAAAAPj\/\/\/\/\/\/\/\/\/\/z8AAAAA+v\/\/\/5\/\/\/\/\/\/HwAAAAD\/\/\/\/\/Q\/\/\/\/\/8PAAAAgP\/\/\/\/9j\/\/\/\/\/wMAOADA\/\/\/\/\/4D\/\/\/\/\/AQD\/A\/D\/\/\/9\/gP\/\/\/\/8AgP8X+P\/\/j3\/A\/\/\/\/fwDA\/3\/+\/\/8Hf4D\/\/\/8\/AOD\/\/\/\/\/f4D\/AP7\/\/z8A8P\/\/\/w8egH8A\/v\/\/PwD4\/\/\/\/AwTAfwD+\/\/\/\/AP7\/\/\/8BAMA\/APz\/\/z8A\/v\/\/\/wGAwT8A+P\/\/A4D\/\/\/9\/AMDAPwD4\/\/8AwP\/\/\/z8AYMD\/Afx\/gA7w\/\/\/\/BwAwwP8A\/h\/wB\/j\/\/\/8AABCA\/wH\/HfgD\/v\/\/HwAACAD\/g\/+I\/IH\/\/\/8HAAAOAP7HfwD4QP\/\/\/wEAgAcAPoZ\/AH\/A\/\/9\/AADAAwAe4n8APOD\/\/x9AAuABAAzAPwAe8P\/\/DzAA4AAADsBPgA\/4\/\/8HEAB4AAAOwP8AB\/z\/\/0cAADwAAAPAuIAD\/\/\/\/AQAABACAAMgnAYH\/\/38AAAAAAGAA8AMAAPD\/HwAAAAAAGAD0ghAA8P8PAAAAANwDAPAAAAD4\/wAAAAAA\/gEAaAAAAHx8AAAAAAB8AABAAAAABAAAAABAAHgAACAAAAAAAADgkPgCMAAAAAAAgAEA+P\/\/\/wEAAAAAKADAAQD\/\/\/9\/AAAAAOAHAPAB8P\/\/\/x8AAAAAAAAA\/B\/+\/\/\/\/HwAAAAAAAAD+\/\/\/\/\/\/8fAAAAAAAAgP\/\/\/\/\/\/\/w8AAAAAAAA=\",\"france\":\"AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAAAAAAAAAAAAAAAAAOABAAAAAAAAAAAAAAAA8AAAAAAAAAAAAAAAAAD4AQAAAAAAAAAAAAAAhP8AAAAAAAAAAAAAAADG\/wEAAAAAAAAAAAAAAP\/\/BwAAAAAAAAAAAICP\/\/8HAAAAAAAAAAAAgP\/\/\/x8AAAAAAAAAAADA\/\/\/\/BwAAAAAAAAAAAID\/\/\/8DAAAAAAAAAAAAAP\/\/\/wEAAAAAAAAAAACA\/\/\/\/AAAAAAAAAAAAAID\/\/z8AAAAAAAAAAAAAwP\/\/DwAAAAAAAAAAAADg\/\/8DAAAAAAAAAAAAAMD\/\/wAAAAAAAAAAAAAA4P9\/AAAAAAAAAAAAAAD4\/38AAAAAAAAAAAAAAPj\/fwAAAAAAAAAAAAAA+v8\/AAAAAAAAAAAAAAD\/\/x8AAAAAAAAAAAAAgP\/\/BwAAAAAAAAAAAADA\/\/8HAAAAAAAAAAAAAPD\/\/wEAAAAAAAAAAAAA+P\/\/AQAAAAAAAAAAAAD+\/\/8BAAAAAAAAAAAAAP7\/fwAAAAAAAAAAAAAA\/g8eAAAAAAAAAAAAAADsAwQAAAAAAAAAAAAAAMABAAAAAAAAAAAAAAAAAACAAQAAAAAAAAAAAAAAAMAAAAAAAAAAAAAAAAAAYAAAAAAAAAAAAAAAAAAwAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=\",\"cities\":{\"marseille\":[47.49,62.64],\"paris\":[41.28,42.2],\"pau\":[31.54,61.28],\"strasbourg\":[54.01,43.87],\"nantes\":[31.32,47.02],\"malaga\":[18.34,83.23],\"grece\":[93.56,73.82],\"pologne\":[79.88,29.67],\"danemark\":[58.2,17.59],\"portugal\":[10,70.71]}};\r\n  \/\/ La carte se d\u00e9ploie quand elle entre \u00e0 l\u2019\u00e9cran : les points naissent depuis\r\n  \/\/ Marseille, le r\u00e9seau des hubs se trace, puis les ponts, un par un, chacun\r\n  \/\/ dans sa teinte ; \u00e0 l\u2019arriv\u00e9e, une onde colore les points alentour. Ensuite,\r\n  \/\/ une onde repart de Marseille \u00e0 intervalles, des \u00e9clats circulent sur les\r\n  \/\/ ponts et le pointeur grossit les points qu\u2019il survole.\r\n  (function () {\r\n    var mapEl = document.getElementById('shl-accueil').querySelector('[data-map]');\r\n    var canvas = mapEl.querySelector('canvas');\r\n    var ctx = canvas.getContext('2d');\r\n    var legend = document.getElementById('shl-accueil').querySelector('[data-legend]');\r\n    var legendRows = Array.prototype.slice.call(legend.querySelectorAll('[data-arc]'));\r\n    var holder = canvas.parentElement, col = mapEl.querySelector('.atlas-copy'), key = mapEl.querySelector('.map-key');\r\n    \/\/ Le cadrage, en cases : de la c\u00f4te portugaise \u00e0 la Gr\u00e8ce, du Danemark \u00e0 M\u00e1laga\r\n    var ROI = [4, 14, 96, 86];\r\n    var COLS = GRID.cols, ROWS = GRID.rows, N = COLS * ROWS;\r\n    var bits = function (b64) {\r\n      var bin = atob(b64), out = new Uint8Array(N);\r\n      for (var i = 0; i < N; i++) out[i] = (bin.charCodeAt(i >> 3) >> (i & 7)) & 1;\r\n      return out;\r\n    };\r\n    var land = bits(GRID.land), france = bits(GRID.france), C = GRID.cities, HOME = C.marseille;\r\n    var HUBS = ['paris', 'pau', 'strasbourg', 'nantes'];\r\n    \/\/ L\u2019ordre et les teintes suivent la l\u00e9gende\r\n    var ARCS = [['malaga', '#c86a5e'], ['grece', '#4b8296'], ['pologne', '#92557c'], ['danemark', '#45508a'], ['portugal', '#55926f']];\r\n    var LAND = '#d3dbd7', FR = '#7f9b9b', INK = '#16262c', TEAL = '#1f4a4d', TAU = 6.2832;\r\n    var T_DOTS = 1100, T_NET = 1000, T_ARC = 1500, GAP = 420, DUR = 1150;\r\n    var T_END = T_ARC + (ARCS.length - 1) * GAP + DUR;\r\n    \/\/ Les points de terre, et leur distance \u00e0 Marseille (en cases)\r\n    var DX = [], DY = [], DF = [], DD = [], EF = [], cellDot = new Int32Array(N).fill(-1), x, y, i;\r\n    for (y = 0; y < ROWS; y++) for (x = 0; x < COLS; x++) {\r\n      i = y * COLS + x;\r\n      if (!land[i]) continue;\r\n      cellDot[i] = DX.length;\r\n      DX.push(x + .5); DY.push(y + .5); DF.push(france[i]);\r\n      EF.push(Math.min(1, (y + .5) \/ 7, (COLS - x - .5) \/ 7, (ROWS - y - .5) \/ 6));\r\n      DD.push(Math.hypot(x + .5 - HOME[0], y + .5 - HOME[1]));\r\n    }\r\n    var D = DX.length, maxD = 0;\r\n    for (i = 0; i < D; i++) if (DD[i] > maxD) maxD = DD[i];\r\n    \/\/ Tri par distance, pour ne dessiner que l\u2019anneau de l\u2019onde\r\n    var order = DD.map(function (d, k) { return k; }).sort(function (a, b) { return DD[a] - DD[b]; });\r\n    var sortedD = order.map(function (k) { return DD[k]; });\r\n    var lowerBound = function (v) { var lo = 0, hi = D; while (lo < hi) { var m = (lo + hi) >> 1; if (sortedD[m] < v) lo = m + 1; else hi = m; } return lo; };\r\n    \/\/ Autour de chaque arriv\u00e9e, les points qui prendront la teinte du pont\r\n    var halos = ARCS.map(function (a) {\r\n      var c = C[a[0]], out = [];\r\n      for (var k = 0; k < D; k++) { var d = Math.hypot(DX[k] - c[0], DY[k] - c[1]); if (d < 6) out.push([k, 1 - d \/ 6]); }\r\n      return out;\r\n    });\r\n    var W = 0, H = 0, cell = 1, dpr = 1, r0 = 1, mk = 1, ox = 0, oy = 0, base = null, geo = [];\r\n    var t0 = 0, started = false, running = false, visible = false, ready = false, raf = 0;\r\n    var hot = -1, iso = ARCS.map(function () { return 1; }), landed = ARCS.map(function () { return false; });\r\n    var lens = { x: 0, y: 0, on: false, amt: 0 };\r\n    var ripples = [], comets = [], nextComet = 0, cursor = 0;\r\n    var clamp01 = function (v) { return v < 0 ? 0 : v > 1 ? 1 : v; };\r\n    var ease = function (t) { return t < .5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) \/ 2; };\r\n    var backOut = function (s) { s -= 1; return 1 + 2.7 * s * s * s + 1.7 * s * s; };\r\n    var bez = function (g, t) { var u = 1 - t; return [u * u * g.a[0] + 2 * u * t * g.c[0] + t * t * g.b[0], u * u * g.a[1] + 2 * u * t * g.c[1] + t * t * g.b[1]]; };\r\n    var dot = function (px, py, r) { ctx.beginPath(); ctx.arc(px, py, r, 0, TAU); ctx.fill(); };\r\n    var trace = function (g, to) {\r\n      ctx.beginPath(); ctx.moveTo(g.a[0], g.a[1]);\r\n      var n = Math.max(2, Math.ceil(44 * to));\r\n      for (var s = 1; s <= n; s++) { var p = bez(g, to * s \/ n); ctx.lineTo(p[0], p[1]); }\r\n    };\r\n    \/\/ Tous les points, en un seul trac\u00e9 par couleur ; `scale` peut varier par point\r\n    var dots = function (c, fr, color, scale) {\r\n      c.fillStyle = color; c.beginPath();\r\n      for (var k = 0; k < D; k++) {\r\n        if (DF[k] !== fr) continue;\r\n        var s = typeof scale === 'function' ? scale(k) : scale;\r\n        if (s <= 0) continue;\r\n        var px = DX[k] * cell, py = DY[k] * cell;\r\n        c.moveTo(px + r0 * s, py); c.arc(px, py, r0 * s, 0, TAU);\r\n      }\r\n      c.fill();\r\n    };\r\n    \/\/ Points de la grille autour d\u2019un point (en cases), pour les ondes et la loupe\r\n    var around = function (cx, cy, R, fn) {\r\n      var x0 = Math.max(0, Math.floor(cx - R)), x1 = Math.min(COLS - 1, Math.ceil(cx + R));\r\n      var y0 = Math.max(0, Math.floor(cy - R)), y1 = Math.min(ROWS - 1, Math.ceil(cy + R));\r\n      for (var yy = y0; yy <= y1; yy++) for (var xx = x0; xx <= x1; xx++) {\r\n        var k = cellDot[yy * COLS + xx];\r\n        if (k >= 0) fn(k, Math.hypot(DX[k] - cx, DY[k] - cy));\r\n      }\r\n    };\r\n    \/\/ Les bords de la grille s\u2019estompent : sur tr\u00e8s grand \u00e9cran, pas de coupure nette\r\n    var fadeEdges = function (c) {\r\n      var gw = COLS * cell, gh = ROWS * cell, e = 7 * cell, f = 6 * cell;\r\n      c.globalCompositeOperation = 'destination-out';\r\n      [[0, 0, 0, e, 0, 0, gw, e], [gw, 0, gw - e, 0, gw - e, 0, e, gh], [0, gh, 0, gh - f, 0, gh - f, gw, f]].forEach(function (z) {\r\n        var g = c.createLinearGradient(z[0], z[1], z[2], z[3]);\r\n        g.addColorStop(0, '#000'); g.addColorStop(1, 'rgba(0,0,0,0)');\r\n        c.fillStyle = g; c.fillRect(z[4], z[5], z[6], z[7]);\r\n      });\r\n      c.globalCompositeOperation = 'source-over';\r\n    };\r\n    var layout = function () {\r\n      var rect = canvas.getBoundingClientRect();\r\n      W = rect.width; H = rect.height;\r\n      if (!W || !H) return;\r\n      dpr = Math.min(window.devicePixelRatio || 1, W * H > 1.2e6 ? 1.5 : 2);\r\n      canvas.width = Math.round(W * dpr); canvas.height = Math.round(H * dpr);\r\n      \/\/ Plein cadre, l\u2019Europe commence apr\u00e8s la colonne de texte ; empil\u00e9e, elle remplit son cadre\r\n      var full = getComputedStyle(holder).position === 'absolute';\r\n      var L = full ? col.getBoundingClientRect().right - rect.left + 56 : 8, R = full ? 24 : 8, T = full ? 40 : 8;\r\n      \/\/ En bas, la carte s\u2019arr\u00eate au-dessus de la cl\u00e9 des symboles\r\n      var B = full ? rect.bottom - key.getBoundingClientRect().top + 20 : 8;\r\n      var rw = ROI[2] - ROI[0], rh = ROI[3] - ROI[1];\r\n      cell = Math.min((W - L - R) \/ rw, (H - T - B) \/ rh);\r\n      ox = L + (W - L - R - rw * cell) \/ 2 - ROI[0] * cell;\r\n      oy = T + (H - T - B - rh * cell) \/ 2 - ROI[1] * cell;\r\n      r0 = Math.max(.9, cell * .28);\r\n      mk = Math.max(.6, Math.min(1.6, cell \/ 6.2));\r\n      \/\/ Couche fixe : tous les points \u00e0 leur taille de repos\r\n      base = document.createElement('canvas');\r\n      base.width = canvas.width; base.height = canvas.height;\r\n      var b = base.getContext('2d');\r\n      b.setTransform(dpr, 0, 0, dpr, ox * dpr, oy * dpr);\r\n      dots(b, 0, LAND, 1); dots(b, 1, FR, 1);\r\n      fadeEdges(b);\r\n      \/\/ G\u00e9om\u00e9trie des ponts : une arche qui monte toujours vers le haut\r\n      geo = ARCS.map(function (a) {\r\n        var A = [HOME[0] * cell, HOME[1] * cell], B = [C[a[0]][0] * cell, C[a[0]][1] * cell];\r\n        var dx = B[0] - A[0], dy = B[1] - A[1], len = Math.hypot(dx, dy), nx = -dy \/ len, ny = dx \/ len;\r\n        if (ny > 0) { nx = -nx; ny = -ny; }\r\n        var grad = ctx.createLinearGradient(A[0], A[1], B[0], B[1]);\r\n        grad.addColorStop(0, TEAL); grad.addColorStop(1, a[1]);\r\n        return { a: A, b: B, c: [(A[0] + B[0]) \/ 2 + nx * len * .32, (A[1] + B[1]) \/ 2 + ny * len * .32], tone: a[1], grad: grad };\r\n      });\r\n      if (!running) draw(performance.now());\r\n    };\r\n    var draw = function (now) {\r\n      if (!base) return;\r\n      ctx.setTransform(1, 0, 0, 1, 0, 0);\r\n      ctx.clearRect(0, 0, canvas.width, canvas.height);\r\n      if (!started) return;\r\n      var t = calm ? 1e9 : now - t0;\r\n      if (t < 0) return;\r\n      \/\/ 1. Les points naissent depuis Marseille, puis restent pos\u00e9s\r\n      if (t < T_DOTS + 500) {\r\n        ctx.setTransform(dpr, 0, 0, dpr, ox * dpr, oy * dpr);\r\n        var born = function (k) { return backOut(clamp01((t - DD[k] \/ maxD * T_DOTS) \/ 500)); };\r\n        dots(ctx, 0, LAND, born); dots(ctx, 1, FR, born);\r\n        fadeEdges(ctx);\r\n      } else {\r\n        ctx.drawImage(base, 0, 0);\r\n        ctx.setTransform(dpr, 0, 0, dpr, ox * dpr, oy * dpr);\r\n      }\r\n      for (var n = 0; n < geo.length; n++) iso[n] += ((hot < 0 || hot === n ? 1 : .16) - iso[n]) * (calm ? 1 : .12);\r\n      \/\/ 2. Autour de chaque arriv\u00e9e, les points prennent la teinte du pont\r\n      geo.forEach(function (g, i) {\r\n        var since = t - (T_ARC + i * GAP + DUR);\r\n        if (since <= 0) return;\r\n        var rv = ease(clamp01(since \/ 900)) * iso[i];\r\n        ctx.fillStyle = g.tone;\r\n        halos[i].forEach(function (h) {\r\n          ctx.globalAlpha = rv * (.3 + .7 * h[1]);\r\n          dot(DX[h[0]] * cell, DY[h[0]] * cell, r0 * (1 + .5 * h[1] * rv));\r\n        });\r\n      });\r\n      ctx.globalAlpha = 1;\r\n      \/\/ 3. Ondes dans la grille : arriv\u00e9es des ponts et des \u00e9clats\r\n      ripples = ripples.filter(function (rp) {\r\n        var p = (now - rp.t) \/ rp.dur;\r\n        if (p >= 1) return false;\r\n        var R = rp.max * ease(p), band = 1.7, fade = 1 - p;\r\n        ctx.fillStyle = rp.tone;\r\n        around(rp.x, rp.y, R + band, function (k, d) {\r\n          var w = 1 - Math.abs(d - R) \/ band;\r\n          if (w <= 0) return;\r\n          ctx.globalAlpha = w * fade * rp.a * EF[k];\r\n          dot(DX[k] * cell, DY[k] * cell, r0 * (1 + w * fade));\r\n        });\r\n        return true;\r\n      });\r\n      ctx.globalAlpha = 1;\r\n      \/\/ 4. Une onde repart de Marseille et traverse l\u2019Europe\r\n      if (!calm && t > T_END) {\r\n        var sp = ((t - T_END) % 5600) \/ 3600;\r\n        if (sp < 1) {\r\n          var R = sp * (maxD + 3), band = 2.4, hi = lowerBound(R + band), fade = 1 - sp;\r\n          ctx.fillStyle = TEAL;\r\n          for (var q = lowerBound(R - band); q < hi; q++) {\r\n            var k = order[q], w = 1 - Math.abs(DD[k] - R) \/ band;\r\n            ctx.globalAlpha = w * fade * .5 * EF[k];\r\n            dot(DX[k] * cell, DY[k] * cell, r0 * (1 + .6 * w));\r\n          }\r\n          ctx.globalAlpha = 1;\r\n        }\r\n      }\r\n      \/\/ 5. La loupe : le pointeur grossit les points qu\u2019il survole\r\n      lens.amt += ((lens.on ? 1 : 0) - lens.amt) * .15;\r\n      if (lens.amt > .02) {\r\n        around(lens.x \/ cell, lens.y \/ cell, 7, function (k, d) {\r\n          if (d > 7) return;\r\n          var w = 1 - d \/ 7;\r\n          w = w * w * (3 - 2 * w);\r\n          ctx.globalAlpha = w * lens.amt * EF[k];\r\n          ctx.fillStyle = DF[k] ? TEAL : '#93a6a6';\r\n          dot(DX[k] * cell, DY[k] * cell, r0 * (1 + 1.2 * w * lens.amt));\r\n        });\r\n        ctx.globalAlpha = 1;\r\n      }\r\n      \/\/ 6. Le r\u00e9seau national : Marseille et les hubs, en pointill\u00e9s\r\n      var net = ease(clamp01((t - T_NET) \/ 800)), hx = HOME[0] * cell, hy = HOME[1] * cell;\r\n      if (net > 0) {\r\n        ctx.lineCap = 'round'; ctx.setLineDash([0, 4 * mk]); ctx.lineWidth = 1.5 * mk; ctx.strokeStyle = 'rgba(31,74,77,.5)';\r\n        HUBS.forEach(function (key) {\r\n          var p = C[key];\r\n          ctx.beginPath(); ctx.moveTo(hx, hy); ctx.lineTo(hx + (p[0] * cell - hx) * net, hy + (p[1] * cell - hy) * net); ctx.stroke();\r\n        });\r\n        ctx.setLineDash([]);\r\n        HUBS.forEach(function (key, i) {\r\n          var p = C[key], br = calm ? .5 : (Math.sin(now \/ 1000 + i * 1.4) + 1) \/ 2;\r\n          ctx.globalAlpha = clamp01(net * 1.5 - .5);\r\n          ctx.fillStyle = 'rgba(31,74,77,' + (.1 + .08 * br) + ')'; dot(p[0] * cell, p[1] * cell, (6 + 3 * br) * mk);\r\n          ctx.fillStyle = '#fff'; dot(p[0] * cell, p[1] * cell, 4.2 * mk);\r\n          ctx.fillStyle = TEAL; dot(p[0] * cell, p[1] * cell, 2.7 * mk);\r\n        });\r\n        ctx.globalAlpha = 1;\r\n      }\r\n      \/\/ 7. Les ponts : ombre au sol, halo, trait en d\u00e9grad\u00e9, t\u00eate qui avance\r\n      ctx.lineCap = 'round';\r\n      geo.forEach(function (g, i) {\r\n        var local = (t - T_ARC - i * GAP) \/ DUR;\r\n        if (local <= 0) return;\r\n        var prog = ease(Math.min(1, local)), a = iso[i];\r\n        ctx.setLineDash([0, 5 * mk]); ctx.lineWidth = 1.4 * mk; ctx.strokeStyle = g.tone; ctx.globalAlpha = .4 * a;\r\n        ctx.beginPath(); ctx.moveTo(g.a[0], g.a[1]); ctx.lineTo(g.a[0] + (g.b[0] - g.a[0]) * prog, g.a[1] + (g.b[1] - g.a[1]) * prog); ctx.stroke();\r\n        ctx.setLineDash([]);\r\n        trace(g, prog);\r\n        ctx.globalAlpha = .12 * a; ctx.lineWidth = 7 * mk; ctx.stroke();\r\n        ctx.globalAlpha = a; ctx.strokeStyle = g.grad; ctx.lineWidth = (hot === i ? 2.8 : 2) * mk; ctx.stroke();\r\n        ctx.fillStyle = g.tone;\r\n        if (local < 1) {\r\n          var h = bez(g, prog);\r\n          ctx.globalAlpha = .2; dot(h[0], h[1], 8 * mk);\r\n          ctx.globalAlpha = 1; dot(h[0], h[1], 3.2 * mk);\r\n          ctx.fillStyle = '#fff'; dot(h[0], h[1], 1.3 * mk);\r\n          return;\r\n        }\r\n        if (!landed[i]) {\r\n          landed[i] = true;\r\n          if (!calm) ripples.push({ x: C[ARCS[i][0]][0], y: C[ARCS[i][0]][1], t: now, dur: 1400, max: 10, tone: g.tone, a: .9 });\r\n        }\r\n        \/\/ Arriv\u00e9e : un disque blanc cercl\u00e9 de la teinte\r\n        ctx.globalAlpha = a;\r\n        ctx.fillStyle = '#fff'; dot(g.b[0], g.b[1], 5.6 * mk);\r\n        ctx.lineWidth = 2 * mk; ctx.strokeStyle = g.tone; ctx.stroke();\r\n        ctx.fillStyle = g.tone; dot(g.b[0], g.b[1], 2.3 * mk);\r\n        if (hot === i && !calm) {\r\n          var pq = (now % 1400) \/ 1400;\r\n          ctx.globalAlpha = (1 - pq) * .6; ctx.lineWidth = 1.2;\r\n          ctx.beginPath(); ctx.arc(g.b[0], g.b[1], (6 + pq * 18) * mk, 0, TAU); ctx.stroke();\r\n        }\r\n        ctx.globalAlpha = 1;\r\n      });\r\n      \/\/ 8. Des \u00e9clats circulent sur les ponts, dans un sens ou dans l\u2019autre\r\n      if (!calm && t > T_END) {\r\n        if (now > nextComet) {\r\n          comets.push({ i: cursor, t: now, back: Math.random() < .35 });\r\n          cursor = (cursor + 1) % geo.length;\r\n          nextComet = now + 1400;\r\n        }\r\n        comets = comets.filter(function (cm) {\r\n          var p = (now - cm.t) \/ 1500, g = geo[cm.i];\r\n          if (p >= 1) {\r\n            var end = cm.back ? HOME : C[ARCS[cm.i][0]];\r\n            ripples.push({ x: end[0], y: end[1], t: now, dur: 1000, max: 5, tone: cm.back ? TEAL : g.tone, a: .75 * iso[cm.i] });\r\n            return false;\r\n          }\r\n          var e = ease(p);\r\n          ctx.fillStyle = g.tone;\r\n          for (var s = 9; s >= 0; s--) {\r\n            var u = e - s * .018;\r\n            if (u < 0) continue;\r\n            var pt = bez(g, cm.back ? 1 - u : u);\r\n            ctx.globalAlpha = (1 - s \/ 10) * .9 * iso[cm.i];\r\n            dot(pt[0], pt[1], (s ? 2.6 - s * .18 : 3.3) * mk);\r\n          }\r\n          var hd = bez(g, cm.back ? 1 - e : e);\r\n          ctx.globalAlpha = iso[cm.i]; ctx.fillStyle = '#fff'; dot(hd[0], hd[1], 1.3 * mk);\r\n          return true;\r\n        });\r\n        ctx.globalAlpha = 1;\r\n      }\r\n      \/\/ 9. Marseille, le port d\u2019attache, par-dessus tout\r\n      var mp = clamp01(t \/ 400);\r\n      if (!calm) {\r\n        var sq = (t % 2800) \/ 2800;\r\n        ctx.globalAlpha = (1 - sq) * .35 * mp; ctx.strokeStyle = INK; ctx.lineWidth = 1;\r\n        ctx.beginPath(); ctx.arc(hx, hy, (7 + sq * 18) * mk, 0, TAU); ctx.stroke();\r\n      }\r\n      ctx.globalAlpha = mp;\r\n      ctx.fillStyle = '#fff'; dot(hx, hy, 7.5 * mk);\r\n      ctx.fillStyle = INK; dot(hx, hy, 4.6 * mk);\r\n      ctx.strokeStyle = 'rgba(22,38,44,.3)'; ctx.lineWidth = 1; ctx.beginPath(); ctx.arc(hx, hy, 10 * mk, 0, TAU); ctx.stroke();\r\n      ctx.globalAlpha = 1;\r\n      \/\/ Les libell\u00e9s ne se posent qu\u2019une fois les ponts immobiles\r\n      if (!ready && t >= T_END + 150) { ready = true; legend.classList.add('is-ready'); }\r\n    };\r\n    var loop = function (now) { draw(now); if (running) raf = requestAnimationFrame(loop); };\r\n    var play = function () { if (calm || running || !visible || !started || document.hidden) return; running = true; raf = requestAnimationFrame(loop); };\r\n    var pause = function () { running = false; cancelAnimationFrame(raf); };\r\n    var setHot = function (i) {\r\n      if (i === hot) return;\r\n      hot = i;\r\n      legendRows.forEach(function (r, k) { r.classList.toggle('is-hot', k === i); });\r\n      if (calm) draw(performance.now());\r\n    };\r\n    legendRows.forEach(function (row, i) {\r\n      row.addEventListener('mouseenter', function () { if (ready) setHot(i); });\r\n      row.addEventListener('mouseleave', function () { setHot(-1); });\r\n    });\r\n    canvas.addEventListener('pointermove', function (e) {\r\n      var r = canvas.getBoundingClientRect(), px = e.clientX - r.left - ox, py = e.clientY - r.top - oy;\r\n      lens.x = px; lens.y = py; lens.on = !calm;\r\n      if (!ready) return;\r\n      var best = -1, bd = 24;\r\n      geo.forEach(function (g, i) { var d = Math.hypot(g.b[0] - px, g.b[1] - py); if (d < bd) { bd = d; best = i; } });\r\n      setHot(best);\r\n    });\r\n    canvas.addEventListener('pointerleave', function () { lens.on = false; setHot(-1); });\r\n    if ('ResizeObserver' in window) new ResizeObserver(layout).observe(canvas); else window.addEventListener('resize', layout);\r\n    layout();\r\n    var start = function () { if (!started) { started = true; t0 = performance.now() + 400; } };\r\n    if (calm) { start(); ready = true; legend.classList.add('is-ready'); draw(performance.now()); }\r\n    else if ('IntersectionObserver' in window) {\r\n      new IntersectionObserver(function (entries) {\r\n        visible = entries[0].isIntersecting;\r\n        if (visible) { start(); play(); } else pause();\r\n      }, { threshold: .3 }).observe(canvas);\r\n    } else { visible = true; start(); play(); }\r\n    document.addEventListener('visibilitychange', function () { document.hidden ? pause() : play(); });\r\n  })();\r\n  \/* ---------------- Formats : la salle se recompose ---------------- *\/\r\n  \/\/ Les m\u00eames points changent de salle \u00e0 chaque format : une pl\u00e9ni\u00e8re que\r\n  \/\/ l\u2019intervenant \u00e9claire par vagues, une \u00e9quipe resserr\u00e9e autour d\u2019un\r\n  \/\/ programme cibl\u00e9, une cohorte qui alterne temps collectif et temps\r\n  \/\/ individuel, puis un porteur de projet et son accompagnateur qui tissent\r\n  \/\/ des liens vers des partenaires. Comme pour les territoires, la barre de\r\n  \/\/ l\u2019onglet actif sert de minuterie : le cycle s\u2019arr\u00eate au survol et c\u00e8de la\r\n  \/\/ main au premier clic.\r\n  (function () {\r\n    var box = document.getElementById('shl-accueil').querySelector('[data-studio]');\r\n    if (!box) return;\r\n    var thumb = box.querySelector('.fmt-thumb');\r\n    var tabs = Array.prototype.slice.call(box.querySelectorAll('[role=\"tab\"]'));\r\n    var panels = tabs.map(function (t) { return document.getElementById(t.getAttribute('aria-controls')); });\r\n    var capEl = box.querySelector('[data-stage-cap]'), countEl = box.querySelector('[data-stage-count]');\r\n    var cv = box.querySelector('.stage canvas'), g = cv.getContext('2d');\r\n    var HUES = ['#c86a5e', '#b25f35', '#bd9035', '#8d9b4e', '#55926f', '#6d9b93', '#4b8296', '#45508a', '#8480be', '#92557c'];\r\n    var HUE = [HUES[0], HUES[2], HUES[4], HUES[8]];\r\n    var VW = 640, VH = 440, CX = 320, CY = 220, TAU = 6.2832, INK = '#173540', TABLE = '#eef1ec';\r\n    var N = 37; \/\/ 0 : l\u2019intervenant SHL ; 1 \u00e0 36 : les participants\r\n    var j;\r\n    \/\/ Salle 1 : trois rangs en arc de cercle, face \u00e0 l\u2019intervenant\r\n    var SPK = [CX, 92], ROWS1 = [[112, 6], [176, 8], [240, 8]], seats = [];\r\n    ROWS1.forEach(function (r) {\r\n      for (var s = 0; s < r[1]; s++) { var a = (30 + 120 * s \/ (r[1] - 1)) * Math.PI \/ 180; seats.push([SPK[0] + r[0] * Math.cos(a), SPK[1] + r[0] * Math.sin(a)]); }\r\n    });\r\n    \/\/ Salle 3 : la cohorte en disque (temps collectif), puis en six tables\r\n    var disc = [], tables = [], atelier = [];\r\n    for (j = 0; j < 36; j++) { var rr = 34 + 124 * Math.sqrt(j \/ 35), aa = j * 2.39996; disc.push([CX + rr * Math.cos(aa), CY + rr * Math.sin(aa)]); }\r\n    for (j = 0; j < 6; j++) tables.push([170 + (j % 3) * 150, 138 + Math.floor(j \/ 3) * 164]);\r\n    for (j = 0; j < 36; j++) { var tb = tables[j % 6], an = Math.floor(j \/ 6) * TAU \/ 6 + (j % 6) * .35; atelier.push([tb[0] + 38 * Math.cos(an), tb[1] + 38 * Math.sin(an)]); }\r\n    var A_T = 2400, B_T = 3200, SEANCE = A_T + B_T;\r\n    var cohort = function (lt) {\r\n      var m = lt % SEANCE, n = Math.floor(lt \/ SEANCE);\r\n      return { b: m >= A_T, n: n % 10 + 1, visit: (n * 3 + Math.floor(Math.max(0, m - A_T) \/ (B_T \/ 3))) % 6 };\r\n    };\r\n    \/\/ Salle 4 : dix partenaires possibles, trouv\u00e9s un \u00e0 un\r\n    var MATES = 10, SEQ = [2, 7, 4, 9, 0, 5, 3, 8, 1, 6], M0 = 1100, M_T = 1500, M_DRAW = 950, M_MAX = 6;\r\n    var matches = function (lt) {\r\n      var q = lt - M0, idx = Math.floor(q \/ M_T), p = (q - idx * M_T) \/ M_DRAW;\r\n      var done = q < 0 ? 0 : Math.min(M_MAX, idx + (p >= 1 ? 1 : 0)), set = {};\r\n      for (var s = 0; s < done; s++) set[SEQ[s]] = true;\r\n      return { done: done, cur: q >= 0 && idx < M_MAX && p < 1 ? SEQ[idx] : -1, p: Math.max(0, Math.min(1, p)), set: set };\r\n    };\r\n    var D = [];\r\n    for (j = 0; j < N; j++) D.push({ x: CX, y: CY, vx: 0, vy: 0, s: 0, a: 0, tx: CX, ty: CY, ts: 0, ta: 0, wx: CX, wy: CY, ws: 0, wa: 0, glow: 0, hold: 0, hollow: false, ph: j * 2.39996, tone: j ? HUES[(j * 3 + 1) % 10] : INK });\r\n    var rank = D.map(function (d, k) { return (k * 17) % N; }); \/\/ ordre de d\u00e9part, m\u00e9lang\u00e9\r\n    var active = 0, t0 = 0, last = 0, auto = !calm, visible = false, started = false, running = false, raf = 0;\r\n    var ga = [1, 0, 0, 0], pa = 0, found = 0, ripples = [], capText = '', capTimer = 0;\r\n    var W = 0, H = 0, dpr = 1, sc = 1, ox = 0, oy = 0, k = 1, R0 = 7;\r\n    \/\/ O\u00f9 chaque point veut aller, \u00e0 l\u2019instant lt du format f\r\n    var place = function (f, lt) {\r\n      var d, s;\r\n      for (s = 0; s < N; s++) { d = D[s]; d.wx = d.tx; d.wy = d.ty; d.ws = 0; d.wa = 0; d.hollow = false; }\r\n      var set = function (n, x, y, sz, al) { var e = D[n]; e.wx = x; e.wy = y; e.ws = sz; e.wa = al === undefined ? 1 : al; };\r\n      if (f === 0) {\r\n        set(0, SPK[0], SPK[1], 1.3);\r\n        for (s = 0; s < seats.length; s++) set(s + 1, seats[s][0], seats[s][1], 1);\r\n      } else if (f === 1) {\r\n        for (s = 0; s < 9; s++) { var a = -Math.PI \/ 2 + s * TAU \/ 9 + lt * .00012; set(s, CX + 128 * Math.cos(a), CY + 128 * Math.sin(a), s ? 1.1 : 1.3); }\r\n      } else if (f === 2) {\r\n        var c = cohort(lt), v = c.b ? tables[c.visit] : [CX, CY];\r\n        for (s = 0; s < 36; s++) { var q = c.b ? atelier[s] : disc[s]; set(s + 1, q[0], q[1], 1); }\r\n        set(0, v[0], v[1], 1.3);\r\n      } else {\r\n        var th = lt * .0005, px = 46 * Math.cos(th), py = 22 * Math.sin(th), m = matches(lt);\r\n        set(1, CX - px, CY - py, 1.7);\r\n        set(0, CX + px, CY + py, 1.35);\r\n        for (s = 0; s < MATES; s++) {\r\n          var am = -Math.PI \/ 2 + s * TAU \/ MATES + .31 + lt * .00004, on = m.set[s];\r\n          set(s + 2, CX + 236 * Math.cos(am), CY + 150 * Math.sin(am), on ? 1.05 : .85, on ? 1 : .7);\r\n          D[s + 2].hollow = !on;\r\n        }\r\n      }\r\n    };\r\n    \/\/ Des ressorts un peu souples : la salle se recompose comme une foule\r\n    var step = function (dt, now) {\r\n      var e = 1 - Math.exp(-dt * 7);\r\n      for (var s = 0; s < N; s++) {\r\n        var d = D[s];\r\n        if (now >= d.hold) { d.tx = d.wx; d.ty = d.wy; d.ts = d.ws; d.ta = d.wa; }\r\n        d.vx += ((d.tx - d.x) * 70 - d.vx * 12) * dt; d.vy += ((d.ty - d.y) * 70 - d.vy * 12) * dt;\r\n        d.x += d.vx * dt; d.y += d.vy * dt;\r\n        d.s += (d.ts - d.s) * e; d.a += (d.ta - d.a) * e;\r\n        d.glow *= Math.exp(-dt * 2.2);\r\n      }\r\n    };\r\n    var circle = function (x, y, r) { g.beginPath(); g.arc(x, y, r, 0, TAU); g.fill(); };\r\n    var ring = function (x, y, r) { g.beginPath(); g.arc(x, y, r, 0, TAU); g.stroke(); };\r\n    \/\/ Un lien courbe du porteur vers un partenaire, trac\u00e9 jusqu\u2019\u00e0 `to`\r\n    var link = function (A, B, to, tone, alpha, head) {\r\n      var mx = (A.x + B.x) \/ 2, my = (A.y + B.y) \/ 2, dx = B.x - A.x, dy = B.y - A.y, l = Math.hypot(dx, dy) || 1;\r\n      var nx = -dy \/ l, ny = dx \/ l;\r\n      if ((mx - CX) * nx + (my - CY) * ny < 0) { nx = -nx; ny = -ny; }\r\n      var cx = mx + nx * l * .2, cy = my + ny * l * .2, n = Math.max(2, Math.ceil(28 * to)), x = A.x, y = A.y;\r\n      g.globalAlpha = alpha * ga[3]; g.strokeStyle = tone; g.lineWidth = 1.5 * k;\r\n      g.beginPath(); g.moveTo(A.x, A.y);\r\n      for (var s = 1; s <= n; s++) { var u = to * s \/ n, w = 1 - u; x = w * w * A.x + 2 * w * u * cx + u * u * B.x; y = w * w * A.y + 2 * w * u * cy + u * u * B.y; g.lineTo(x, y); }\r\n      g.stroke();\r\n      if (head) { g.fillStyle = tone; g.globalAlpha = .2 * ga[3]; circle(x, y, 7 * k); g.globalAlpha = ga[3]; circle(x, y, 3 * k); g.fillStyle = '#fff'; circle(x, y, 1.2 * k); }\r\n    };\r\n    var draw = function (lt, now) {\r\n      g.setTransform(1, 0, 0, 1, 0, 0);\r\n      g.clearRect(0, 0, cv.width, cv.height);\r\n      if (!W) return;\r\n      g.setTransform(dpr * sc, 0, 0, dpr * sc, dpr * ox, dpr * oy);\r\n      g.lineCap = 'round';\r\n      var s, p, d, live = !calm;\r\n      \/\/ 1. La pl\u00e9ni\u00e8re : rangs en pointill\u00e9s, vagues qui partent de l\u2019intervenant\r\n      if (ga[0] > .01) {\r\n        g.globalAlpha = ga[0]; g.setLineDash([0, 7]); g.lineWidth = 1.6 * k; g.strokeStyle = 'rgba(23,53,64,.2)';\r\n        ROWS1.forEach(function (r) { g.beginPath(); g.arc(SPK[0], SPK[1], r[0], .44, 2.7); g.stroke(); });\r\n        g.setLineDash([]);\r\n        if (live && active === 0) {\r\n          for (var w = 0; w < 2; w++) {\r\n            var q = lt - 700 - w * 1100;\r\n            if (q < 0) continue;\r\n            p = (q % 2200) \/ 2200;\r\n            var R = 18 + p * 290;\r\n            g.globalAlpha = ga[0] * Math.pow(1 - p, 1.5) * .6; g.strokeStyle = HUE[0]; g.lineWidth = 2 * k;\r\n            g.beginPath(); g.arc(SPK[0], SPK[1], R, .3, 2.84); g.stroke();\r\n            for (s = 1; s <= seats.length; s++) {\r\n              d = D[s];\r\n              var gap = Math.abs(Math.hypot(d.x - SPK[0], d.y - SPK[1]) - R);\r\n              if (gap < 16) d.glow = Math.max(d.glow, 1 - gap \/ 16);\r\n            }\r\n          }\r\n        }\r\n      }\r\n      \/\/ 2. L\u2019\u00e9quipe : une table, une cible, un filet entre les membres\r\n      if (ga[1] > .01) {\r\n        g.globalAlpha = ga[1]; g.fillStyle = '#fff'; circle(CX, CY, 82);\r\n        g.strokeStyle = '#e1e6e0'; g.lineWidth = k; ring(CX, CY, 82);\r\n        g.strokeStyle = HUE[1]; g.lineWidth = 1.5 * k;\r\n        [18, 32, 46].forEach(function (r, n) { g.globalAlpha = ga[1] * (.9 - n * .28); ring(CX, CY, r); });\r\n        g.globalAlpha = ga[1]; g.fillStyle = HUE[1]; circle(CX, CY, 7);\r\n        if (live) { p = (lt % 1800) \/ 1800; g.globalAlpha = ga[1] * (1 - p) * .35; ring(CX, CY, 46 + p * 40); }\r\n        g.globalAlpha = ga[1]; g.lineWidth = k; g.strokeStyle = 'rgba(23,53,64,.08)'; g.beginPath();\r\n        for (s = 0; s < 9; s++) for (var t = s + 1; t < 9; t++) { g.moveTo(D[s].x, D[s].y); g.lineTo(D[t].x, D[t].y); }\r\n        g.stroke();\r\n        if (live && active === 1 && lt > 900) {\r\n          for (s = 0; s < 9; s++) {\r\n            p = ((lt - 900 + s * 260) % 1800) \/ 1800;\r\n            var e = p * p * .8;\r\n            g.globalAlpha = ga[1] * Math.sin(Math.PI * p); g.fillStyle = D[s].tone;\r\n            circle(D[s].x + (CX - D[s].x) * e, D[s].y + (CY - D[s].y) * e, 2.8 * k);\r\n          }\r\n        }\r\n      }\r\n      \/\/ 3. La cohorte : un grand cercle, puis six tables ; l\u2019intervenant passe de l\u2019une \u00e0 l\u2019autre\r\n      if (ga[2] > .01) {\r\n        g.globalAlpha = ga[2] * (1 - pa); g.setLineDash([0, 7]); g.strokeStyle = 'rgba(23,53,64,.2)'; g.lineWidth = 1.6 * k;\r\n        ring(CX, CY, 178); g.setLineDash([]);\r\n        if (active === 2 && pa > .01) {\r\n          var v = tables[cohort(lt).visit];\r\n          g.globalAlpha = ga[2] * pa * .12; g.fillStyle = HUE[2]; circle(v[0], v[1], 60);\r\n        }\r\n        g.globalAlpha = ga[2] * pa;\r\n        tables.forEach(function (tb) { g.fillStyle = '#fff'; circle(tb[0], tb[1], 20); g.strokeStyle = '#e1e6e0'; g.lineWidth = k; ring(tb[0], tb[1], 20); });\r\n      }\r\n      \/\/ 4. Le porteur et son accompagnateur, li\u00e9s par une tresse ; les partenaires autour\r\n      if (ga[3] > .01) {\r\n        g.globalAlpha = ga[3]; g.setLineDash([0, 7]); g.strokeStyle = 'rgba(23,53,64,.18)'; g.lineWidth = 1.6 * k;\r\n        g.beginPath(); g.ellipse(CX, CY, 236, 150, 0, 0, TAU); g.stroke(); g.setLineDash([]);\r\n        if (active === 3) {\r\n          var m = matches(lt);\r\n          for (s = 0; s < MATES; s++) if (m.set[s]) link(D[1], D[s + 2], 1, D[s + 2].tone, .5, false);\r\n          if (m.cur >= 0) link(D[1], D[m.cur + 2], m.p, D[m.cur + 2].tone, .9, live);\r\n        }\r\n        var P = D[1], Q = D[0], bx = Q.x - P.x, by = Q.y - P.y, bl = Math.hypot(bx, by) || 1;\r\n        g.lineWidth = 1.6 * k;\r\n        for (s = 0; s < 3; s++) {\r\n          g.globalAlpha = ga[3] * .85; g.strokeStyle = [HUES[8], HUES[4], HUES[0]][s]; g.beginPath();\r\n          for (var n = 0; n <= 24; n++) {\r\n            var u = n \/ 24, off = 9 * Math.sin(Math.PI * u) * Math.sin(u * TAU * 1.5 + s * TAU \/ 3 + lt * .004);\r\n            var x = P.x + bx * u - by \/ bl * off, y = P.y + by * u + bx \/ bl * off;\r\n            n ? g.lineTo(x, y) : g.moveTo(x, y);\r\n          }\r\n          g.stroke();\r\n        }\r\n      }\r\n      \/\/ Ondes d\u2019arriv\u00e9e\r\n      ripples = ripples.filter(function (rp) {\r\n        var q = (now - rp.t) \/ 900;\r\n        if (q >= 1) return false;\r\n        g.globalAlpha = (1 - q) * .6; g.strokeStyle = rp.c; g.lineWidth = 1.5 * k; ring(rp.x, rp.y, 8 + q * 26);\r\n        return true;\r\n      });\r\n      \/\/ Les personnes : les participants, puis l\u2019intervenant par-dessus\r\n      var wob = live ? 1.6 : 0;\r\n      for (var o = 1; o <= N; o++) {\r\n        s = o % N; d = D[s];\r\n        if (d.s < .03 || d.a < .02) continue;\r\n        var dx = d.x + wob * Math.sin(now * .0011 + d.ph), dy = d.y + wob * Math.cos(now * .0013 + d.ph * 1.3), r = R0 * d.s;\r\n        if (d.glow > .02) { g.globalAlpha = d.a * .24 * d.glow; g.fillStyle = d.tone; circle(dx, dy, r * (1.8 + d.glow)); }\r\n        g.globalAlpha = d.a; g.fillStyle = '#fff'; circle(dx, dy, r + 2.2 * k);\r\n        if (d.hollow) { g.strokeStyle = d.tone; g.lineWidth = 1.6 * k; ring(dx, dy, r - .8 * k); }\r\n        else { g.fillStyle = d.tone; circle(dx, dy, r); }\r\n        if (!s) {\r\n          g.fillStyle = '#fff'; circle(dx, dy, r * .36);\r\n          if (live) { p = (now % 2400) \/ 2400; g.globalAlpha = d.a * (1 - p) * .35; g.strokeStyle = INK; g.lineWidth = k; ring(dx, dy, r + 4 + p * 16); }\r\n        }\r\n      }\r\n      g.globalAlpha = 1;\r\n    };\r\n    var pad = function (n) { return (n < 10 ? '0' : '') + n; };\r\n    var caption = function (lt) {\r\n      if (active === 0) return 'Pl\u00e9ni\u00e8re \u00b7 1 journ\u00e9e';\r\n      if (active === 1) return '\u00c9quipe interne \u00b7 programme cibl\u00e9';\r\n      if (active === 2) { var c = cohort(lt); return 'S\u00e9ance ' + pad(c.n) + ' \u00b7 ' + (c.b ? 'temps individuel' : 'temps collectif'); }\r\n      var n = matches(lt).done;\r\n      return n ? n + (n > 1 ? ' partenaires trouv\u00e9s' : ' partenaire trouv\u00e9') : 'Recherche de partenaires';\r\n    };\r\n    var setCap = function (txt) {\r\n      if (txt === capText) return;\r\n      capText = txt;\r\n      if (calm) { capEl.textContent = txt; return; }\r\n      capEl.classList.add('is-swap');\r\n      clearTimeout(capTimer);\r\n      capTimer = setTimeout(function () { capEl.textContent = capText; capEl.classList.remove('is-swap'); }, 220);\r\n    };\r\n    \/\/ Sans animation : chaque salle est pos\u00e9e d\u2019un coup, \u00e0 un instant parlant\r\n    var still = function () {\r\n      var lt = [1800, 2000, A_T + 400, M0 + 3 * M_T + M_DRAW + 100][active];\r\n      place(active, lt);\r\n      D.forEach(function (d) { d.x = d.tx = d.wx; d.y = d.ty = d.wy; d.s = d.ts = d.ws; d.a = d.ta = d.wa; d.vx = d.vy = 0; d.glow = 0; });\r\n      ga = ga.map(function (x, f) { return f === active ? 1 : 0; });\r\n      pa = active === 2 && cohort(lt).b ? 1 : 0;\r\n      draw(lt, 0);\r\n      setCap(caption(lt));\r\n    };\r\n    \/\/ La pastille blanche glisse sous l\u2019onglet actif, comme dans l\u2019en-t\u00eate\r\n    var thumbSet = false;\r\n    var placeThumb = function () {\r\n      var t = tabs[active];\r\n      if (!t.offsetWidth) return;\r\n      if (!thumbSet) thumb.style.transition = 'none';\r\n      thumb.style.width = t.offsetWidth + 'px'; thumb.style.height = t.offsetHeight + 'px';\r\n      thumb.style.transform = 'translate(' + t.offsetLeft + 'px,' + t.offsetTop + 'px)';\r\n      if (!thumbSet) { void thumb.offsetWidth; thumb.style.transition = ''; thumbSet = true; }\r\n    };\r\n    var stopAuto = function () { auto = false; box.classList.remove('is-auto'); };\r\n    var select = function (f) {\r\n      if (f === active) return;\r\n      active = f; found = 0; ripples = [];\r\n      t0 = performance.now();\r\n      box.setAttribute('data-fmt', String(f));\r\n      tabs.forEach(function (t, n) { var on = n === f; t.setAttribute('aria-selected', String(on)); t.tabIndex = on ? 0 : -1; });\r\n      panels.forEach(function (pn, n) { pn.classList.toggle('is-on', n === f); });\r\n      countEl.textContent = pad(f + 1) + ' \/ 04';\r\n      placeThumb();\r\n      D.forEach(function (d, n) { d.hold = t0 + rank[n] * 13; });\r\n      if (calm) still();\r\n    };\r\n    var frame = function (now) {\r\n      var dt = Math.min(.05, Math.max(0, (now - last) \/ 1000));\r\n      last = now;\r\n      var lt = Math.max(0, now - t0), ge = 1 - Math.exp(-dt * 5);\r\n      place(active, lt);\r\n      step(dt, now);\r\n      for (var f = 0; f < 4; f++) ga[f] += ((f === active ? 1 : 0) - ga[f]) * ge;\r\n      pa += ((active === 2 && cohort(lt).b ? 1 : 0) - pa) * ge;\r\n      if (active === 3) {\r\n        var m = matches(lt);\r\n        if (m.done > found) { found = m.done; var pd = D[SEQ[found - 1] + 2]; pd.glow = 1; ripples.push({ x: pd.x, y: pd.y, t: now, c: pd.tone }); }\r\n      }\r\n      draw(lt, now);\r\n      setCap(caption(lt));\r\n    };\r\n    var loop = function (now) { if (!running) return; frame(now); raf = requestAnimationFrame(loop); };\r\n    var play = function () { if (calm || running || !visible || document.hidden) return; running = true; last = performance.now(); raf = requestAnimationFrame(loop); };\r\n    var pause = function () { running = false; cancelAnimationFrame(raf); };\r\n    var start = function () {\r\n      if (started) return;\r\n      started = true;\r\n      t0 = performance.now();\r\n      D.forEach(function (d, n) { d.hold = t0 + 250 + rank[n] * 16; });\r\n      if (auto) box.classList.add('is-auto');\r\n    };\r\n    var layout = function () {\r\n      var r = cv.getBoundingClientRect();\r\n      W = r.width; H = r.height;\r\n      if (!W || !H) return;\r\n      dpr = Math.min(window.devicePixelRatio || 1, 2);\r\n      cv.width = Math.round(W * dpr); cv.height = Math.round(H * dpr);\r\n      \/\/ Cadrage sur la zone r\u00e9ellement dessin\u00e9e (environ 485 \u00d7 320 au centre), pas sur tout le rep\u00e8re\r\n      sc = Math.min(W \/ (VW - 100), H \/ (VH - 80)) * .94;\r\n      ox = (W - VW * sc) \/ 2; oy = (H - VH * sc) \/ 2 + 8;\r\n      k = Math.min(1.4, Math.max(1, .7 \/ sc));\r\n      R0 = 7 * k;\r\n      if (calm) still(); else if (!running && started) draw(Math.max(0, last - t0), last);\r\n    };\r\n    tabs.forEach(function (t, n) {\r\n      t.addEventListener('click', function () { stopAuto(); select(n); });\r\n      t.addEventListener('keydown', function (e) {\r\n        var to = { ArrowRight: n + 1, ArrowDown: n + 1, ArrowLeft: n + 3, ArrowUp: n + 3, Home: 0, End: 3 }[e.key];\r\n        if (to === undefined) return;\r\n        e.preventDefault();\r\n        stopAuto(); select(to % 4); tabs[to % 4].focus();\r\n      });\r\n      \/\/ Le cycle : la barre de l\u2019onglet actif sert de minuterie\r\n      t.querySelector('.fmt-timer').addEventListener('animationend', function () { if (auto && n === active) select((n + 1) % tabs.length); });\r\n    });\r\n    box.addEventListener('focusin', stopAuto);\r\n    if ('ResizeObserver' in window) {\r\n      new ResizeObserver(layout).observe(cv);\r\n      new ResizeObserver(placeThumb).observe(box.querySelector('.studio-tabs'));\r\n    } else window.addEventListener('resize', function () { layout(); placeThumb(); });\r\n    if (document.fonts && document.fonts.ready) document.fonts.ready.then(placeThumb);\r\n    placeThumb();\r\n    layout();\r\n    if (calm) { still(); return; }\r\n    if ('IntersectionObserver' in window) {\r\n      new IntersectionObserver(function (en) {\r\n        visible = en[0].isIntersecting;\r\n        box.classList.toggle('is-hold', !visible);\r\n        if (visible) { start(); play(); } else pause();\r\n      }, { threshold: .3 }).observe(cv);\r\n    } else { visible = true; start(); play(); }\r\n    document.addEventListener('visibilitychange', function () { document.hidden ? pause() : play(); });\r\n  })();\r\n})();\r\n\/\/-->\r\n<\/script>\r\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":64,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_et_pb_use_builder":"off","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"class_list":["post-23814299","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.7 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>shl v2.1 - Social Hackers Lab<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/socialhackerslab.com\/en\/shl-v2-1\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"shl v2.1 - Social Hackers Lab\" \/>\n<meta property=\"og:url\" content=\"https:\/\/socialhackerslab.com\/en\/shl-v2-1\/\" \/>\n<meta property=\"og:site_name\" content=\"Social Hackers Lab\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/profile.php?id=61561806211570\" \/>\n<meta property=\"article:modified_time\" content=\"2026-09-26T17:15:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/socialhackerslab.com\/wp-content\/uploads\/2024\/10\/Social-Hacker-Lab-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"250\" \/>\n\t<meta property=\"og:image:height\" content=\"140\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/socialhackerslab.com\\\/shl-v2-1\\\/\",\"url\":\"https:\\\/\\\/socialhackerslab.com\\\/shl-v2-1\\\/\",\"name\":\"shl v2.1 - Social Hackers Lab\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/socialhackerslab.com\\\/#website\"},\"datePublished\":\"2026-09-26T17:15:36+00:00\",\"dateModified\":\"2026-09-26T17:15:39+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/socialhackerslab.com\\\/shl-v2-1\\\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/socialhackerslab.com\\\/shl-v2-1\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/socialhackerslab.com\\\/shl-v2-1\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Accueil\",\"item\":\"https:\\\/\\\/socialhackerslab.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"shl v2.1\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/socialhackerslab.com\\\/#website\",\"url\":\"https:\\\/\\\/socialhackerslab.com\\\/\",\"name\":\"SocialHackersLab\",\"description\":\"Hacking Social pour une soci\u00e9t\u00e9 \u00e9galitaire\",\"publisher\":{\"@id\":\"https:\\\/\\\/socialhackerslab.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/socialhackerslab.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/socialhackerslab.com\\\/#organization\",\"name\":\"Social Hackers Lab\",\"url\":\"https:\\\/\\\/socialhackerslab.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\\\/\\\/socialhackerslab.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/socialhackerslab.com\\\/wp-content\\\/uploads\\\/2024\\\/10\\\/BW-SHL.png\",\"contentUrl\":\"https:\\\/\\\/socialhackerslab.com\\\/wp-content\\\/uploads\\\/2024\\\/10\\\/BW-SHL.png\",\"width\":3431,\"height\":3431,\"caption\":\"Social Hackers Lab\"},\"image\":{\"@id\":\"https:\\\/\\\/socialhackerslab.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/profile.php?id=61561806211570\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/socialhackerslab\\\/\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"shl v2.1 - Social Hackers Lab","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/socialhackerslab.com\/en\/shl-v2-1\/","og_locale":"en_GB","og_type":"article","og_title":"shl v2.1 - Social Hackers Lab","og_url":"https:\/\/socialhackerslab.com\/en\/shl-v2-1\/","og_site_name":"Social Hackers Lab","article_publisher":"https:\/\/www.facebook.com\/profile.php?id=61561806211570","article_modified_time":"2026-09-26T17:15:39+00:00","og_image":[{"width":250,"height":140,"url":"https:\/\/socialhackerslab.com\/wp-content\/uploads\/2024\/10\/Social-Hacker-Lab-1.png","type":"image\/png"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/socialhackerslab.com\/shl-v2-1\/","url":"https:\/\/socialhackerslab.com\/shl-v2-1\/","name":"shl v2.1 - Social Hackers Lab","isPartOf":{"@id":"https:\/\/socialhackerslab.com\/#website"},"datePublished":"2026-09-26T17:15:36+00:00","dateModified":"2026-09-26T17:15:39+00:00","breadcrumb":{"@id":"https:\/\/socialhackerslab.com\/shl-v2-1\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/socialhackerslab.com\/shl-v2-1\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/socialhackerslab.com\/shl-v2-1\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Accueil","item":"https:\/\/socialhackerslab.com\/"},{"@type":"ListItem","position":2,"name":"shl v2.1"}]},{"@type":"WebSite","@id":"https:\/\/socialhackerslab.com\/#website","url":"https:\/\/socialhackerslab.com\/","name":"SocialHackersLab","description":"Hacking Social pour une soci\u00e9t\u00e9 \u00e9galitaire","publisher":{"@id":"https:\/\/socialhackerslab.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/socialhackerslab.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Organization","@id":"https:\/\/socialhackerslab.com\/#organization","name":"Social Hackers Lab","url":"https:\/\/socialhackerslab.com\/","logo":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/socialhackerslab.com\/#\/schema\/logo\/image\/","url":"https:\/\/socialhackerslab.com\/wp-content\/uploads\/2024\/10\/BW-SHL.png","contentUrl":"https:\/\/socialhackerslab.com\/wp-content\/uploads\/2024\/10\/BW-SHL.png","width":3431,"height":3431,"caption":"Social Hackers Lab"},"image":{"@id":"https:\/\/socialhackerslab.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/profile.php?id=61561806211570","https:\/\/www.linkedin.com\/company\/socialhackerslab\/"]}]}},"_links":{"self":[{"href":"https:\/\/socialhackerslab.com\/en\/wp-json\/wp\/v2\/pages\/23814299","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/socialhackerslab.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/socialhackerslab.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/socialhackerslab.com\/en\/wp-json\/wp\/v2\/users\/64"}],"replies":[{"embeddable":true,"href":"https:\/\/socialhackerslab.com\/en\/wp-json\/wp\/v2\/comments?post=23814299"}],"version-history":[{"count":2,"href":"https:\/\/socialhackerslab.com\/en\/wp-json\/wp\/v2\/pages\/23814299\/revisions"}],"predecessor-version":[{"id":23814333,"href":"https:\/\/socialhackerslab.com\/en\/wp-json\/wp\/v2\/pages\/23814299\/revisions\/23814333"}],"wp:attachment":[{"href":"https:\/\/socialhackerslab.com\/en\/wp-json\/wp\/v2\/media?parent=23814299"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}