{"id":1484,"date":"2026-09-17T12:25:57","date_gmt":"2026-09-17T12:25:57","guid":{"rendered":"https:\/\/bealta.fr\/?page_id=1484"},"modified":"2026-09-17T15:44:20","modified_gmt":"2026-09-17T15:44:20","slug":"accueil","status":"publish","type":"page","link":"https:\/\/bealta.fr\/","title":{"rendered":"Accueil"},"content":{"rendered":"\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\"><link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin><link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@400;500;600;700&#038;family=Inter:wght@400;500;600&#038;display=swap\" rel=\"stylesheet\">\n<style>\n\/* ==========================================================================\n   BE ALTA \/ Homepage v2  (feuille de style scop\u00e9e sous .ba)\n   Charte conserv\u00e9e : aubergine #241C33, cr\u00e8me #F8EFE4\/#FFF7F2,\n   terracotta #B35B45, orange #FF9A4D, violet #A855C9, Poppins + Inter\n   ========================================================================= *\/\n\n.ba *, .ba *::before, .ba *::after { box-sizing: border-box; }\n\n.ba {\n  \/* --- couleurs --- *\/\n  --ink:        #241C33;\n  --ink-2:      #3B2630;\n  --plum-900:   #140B1D;\n  --plum-800:   #201030;\n  --plum-700:   #2E1840;\n  --cream:      #F8EFE4;\n  --cream-2:    #FFF7F2;\n  --cream-3:    #FBF5EC;\n  --line:       rgba(43, 31, 20, 0.12);\n  --line-dark:  rgba(255, 255, 255, 0.12);\n  --terra:      #B35B45;\n  --orange:     #FF9A4D;\n  --violet:     #A855C9;\n  --muted:      #6B6156;\n  --muted-2:    #5A4F45;\n  --muted-dark: rgba(255, 255, 255, 0.66);\n  --white:      #FFFFFF;\n\n  --grad:       linear-gradient(100deg, var(--orange) 0%, var(--terra) 45%, var(--violet) 100%);\n  --grad-soft:  linear-gradient(100deg, rgba(255,154,77,.16), rgba(168,85,201,.16));\n\n  \/* --- rayons --- *\/\n  --r-xs: 12px;\n  --r-sm: 16px;\n  --r-md: 22px;\n  --r-lg: 28px;\n  --r-xl: 34px;\n  --r-pill: 999px;\n\n  \/* --- ombres --- *\/\n  --sh-sm: 0 6px 18px rgba(43, 25, 60, .06);\n  --sh-md: 0 20px 45px rgba(43, 25, 60, .08);\n  --sh-lg: 0 34px 80px rgba(43, 25, 60, .14);\n  --sh-dark: 0 30px 70px rgba(10, 5, 20, .45);\n\n  \/* --- rythme --- *\/\n  --pad-x: clamp(20px, 5vw, 48px);\n  --sec-y: clamp(72px, 9vw, 132px);\n  --max: 1200px;\n\n  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n  color: var(--ink);\n  background: var(--cream-2);\n  -webkit-font-smoothing: antialiased;\n  line-height: 1.6;\n}\n\n.ba img { max-width: 100%; display: block; }\n.ba a { color: inherit; text-decoration: none; }\n.ba p { margin: 0 0 1em; }\n.ba h1, .ba h2, .ba h3, .ba h4 {\n  font-family: 'Poppins', 'Inter', sans-serif;\n  margin: 0 0 .5em;\n  line-height: 1.14;\n  letter-spacing: -0.022em;\n  font-weight: 700;\n  color: var(--ink);\n}\n.ba h1 { font-size: clamp(2.3rem, 5.6vw, 4.1rem); letter-spacing: -0.032em; }\n.ba h2 { font-size: clamp(1.85rem, 3.5vw, 2.85rem); }\n.ba h3 { font-size: clamp(1.2rem, 1.9vw, 1.48rem); }\n.ba ul, .ba ol { margin: 0; padding: 0; list-style: none; }\n\n.ba .wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--pad-x); }\n.ba section { padding: var(--sec-y) 0; position: relative; }\n\n\/* --- \u00e9l\u00e9ments de texte communs ------------------------------------------ *\/\n.ba .eyebrow {\n  display: inline-flex; align-items: center; gap: 9px;\n  padding: 8px 18px 8px 12px;\n  border-radius: var(--r-pill);\n  border: 1px solid var(--line);\n  background: var(--cream-3);\n  color: var(--muted-2);\n  font-size: .88rem; font-weight: 500; letter-spacing: .02em;\n  margin-bottom: 22px;\n}\n.ba .eyebrow::before {\n  content: ''; width: 7px; height: 7px; border-radius: 50%;\n  background: var(--grad); flex: none;\n}\n.ba .eyebrow.on-dark {\n  background: rgba(255,255,255,.07);\n  border-color: var(--line-dark);\n  color: rgba(255,255,255,.82);\n  backdrop-filter: blur(8px);\n}\n.ba .lead { font-size: clamp(1.06rem, 1.4vw, 1.2rem); color: var(--muted); max-width: 60ch; }\n.ba .lead.center { margin-left: auto; margin-right: auto; text-align: center; }\n.ba .sec-head { max-width: 760px; }\n.ba .sec-head.center { margin: 0 auto; text-align: center; }\n.ba .grad-text {\n  background: var(--grad); -webkit-background-clip: text; background-clip: text;\n  -webkit-text-fill-color: transparent; color: transparent;\n}\n\n\/* --- boutons ------------------------------------------------------------- *\/\n.ba .btn {\n  display: inline-flex; align-items: center; gap: 12px;\n  padding: 13px 13px 13px 26px;\n  border-radius: var(--r-pill);\n  font-family: 'Poppins', sans-serif;\n  font-size: 1rem; font-weight: 600; letter-spacing: -.01em;\n  border: 1px solid transparent; cursor: pointer;\n  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, background .35s, color .25s, border-color .25s;\n  will-change: transform;\n}\n.ba .btn .ico {\n  width: 34px; height: 34px; border-radius: 50%;\n  display: grid; place-items: center; flex: none;\n  transition: transform .4s cubic-bezier(.2,.8,.2,1), background .3s;\n  overflow: hidden;\n}\n.ba .btn .ico svg { width: 15px; height: 15px; transition: transform .4s cubic-bezier(.2,.8,.2,1); }\n.ba .btn:hover .ico svg { transform: translateX(3px); }\n\n.ba .btn-primary {\n  background: var(--grad);\n  background-size: 160% 100%;\n  color: #fff;\n  box-shadow: 0 12px 30px rgba(179, 91, 69, .28);\n}\n.ba .btn-primary .ico { background: rgba(255,255,255,.92); color: var(--terra); }\n.ba .btn-primary:hover { transform: translateY(-3px); box-shadow: 0 18px 42px rgba(179,91,69,.36); background-position: 100% 0; }\n.ba .btn-primary:active { transform: translateY(-1px); }\n\n.ba .btn-ghost {\n  background: var(--cream-2); color: var(--terra);\n  border-color: rgba(179,91,69,.22);\n  box-shadow: var(--sh-sm);\n}\n.ba .btn-ghost .ico { background: var(--grad); color: #fff; }\n.ba .btn-ghost:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: rgba(179,91,69,.45); }\n\n.ba .btn-dark {\n  background: rgba(255,255,255,.08); color: #fff;\n  border-color: var(--line-dark); backdrop-filter: blur(10px);\n}\n.ba .btn-dark .ico { background: rgba(255,255,255,.14); color: #fff; }\n.ba .btn-dark:hover { background: rgba(255,255,255,.14); transform: translateY(-3px); }\n\n.ba .btn-link {\n  display: inline-flex; align-items: center; gap: 9px;\n  font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 1rem;\n  color: var(--terra); padding: 6px 0;\n  border-bottom: 1px solid rgba(179,91,69,.28);\n  transition: gap .3s cubic-bezier(.2,.8,.2,1), border-color .3s, color .3s;\n}\n.ba .btn-link svg { width: 14px; height: 14px; }\n.ba .btn-link:hover { gap: 15px; border-color: var(--terra); }\n\n.ba .btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }\n.ba .btn-row.center { justify-content: center; }\n\n\/* ==========================================================================\n   HEADER\n   ========================================================================= *\/\n.ba-header {\n  position: sticky; top: 0; z-index: 60;\n  padding: 16px 0;\n  transition: padding .4s ease, background .4s ease, box-shadow .4s ease, backdrop-filter .4s;\n}\n.ba-header.is-stuck {\n  padding: 9px 0;\n  background: rgba(255, 247, 242, .82);\n  backdrop-filter: saturate(160%) blur(14px);\n  box-shadow: 0 1px 0 var(--line), 0 10px 30px rgba(43,25,60,.05);\n}\n.ba-header .bar { display: flex; align-items: center; gap: 24px; }\n.ba-logo { display: flex; align-items: center; gap: 11px; flex: none; }\n.ba-logo .mark { display: block; position: relative; width: 89px; height: 32px; overflow: hidden; flex: none; transition: transform .5s cubic-bezier(.2,.8,.2,1); }\n.ba-logo .mark img { position: absolute; width: 111px; height: 111px; max-width: none; left: -9.7px; top: -37.4px; }\n.ba-logo:hover .mark { transform: scale(1.05); }\n.ba-logo .wordmark {\n  font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 1.28rem;\n  letter-spacing: -.02em;\n  background: var(--grad); -webkit-background-clip: text; background-clip: text;\n  -webkit-text-fill-color: transparent;\n}\n.ba-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }\n.ba-nav a {\n  position: relative; padding: 9px 11px; border-radius: var(--r-pill);\n  font-size: .97rem; font-weight: 500; color: var(--muted-2);\n  transition: color .25s, background .25s;\n}\n.ba-nav a::after {\n  content: ''; position: absolute; left: 11px; right: 11px; bottom: 4px; height: 2px;\n  border-radius: 2px; background: var(--grad);\n  transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.2,.8,.2,1);\n}\n.ba-nav a:hover { color: var(--ink); }\n.ba-nav a:hover::after, .ba-nav a.is-active::after { transform: scaleX(1); }\n.ba-nav a.is-active { color: var(--ink); font-weight: 600; }\n.ba-header .head-cta { flex: none; }\n.ba-burger {\n  display: none; width: 44px; height: 44px; border-radius: 50%; flex: none;\n  border: 1px solid var(--line); background: var(--cream-2); cursor: pointer;\n  align-items: center; justify-content: center; margin-left: auto;\n}\n.ba-burger span { display: block; width: 18px; height: 2px; background: var(--ink); border-radius: 2px; position: relative; transition: transform .3s, background .2s; }\n.ba-burger span::before, .ba-burger span::after {\n  content: ''; position: absolute; left: 0; width: 18px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .3s, top .3s;\n}\n.ba-burger span::before { top: -6px; } .ba-burger span::after { top: 6px; }\n.ba-burger.is-open span { background: transparent; }\n.ba-burger.is-open span::before { top: 0; transform: rotate(45deg); }\n.ba-burger.is-open span::after { top: 0; transform: rotate(-45deg); }\n\n\/* ==========================================================================\n   HERO\n   ========================================================================= *\/\n.ba section.ba-hero { padding: 0; }\n.ba-hero > .wrap { max-width: none; padding: 0; }\n.ba-hero .stage {\n  position: relative; overflow: hidden;\n  border-radius: 0;\n  background-color: #140B1D;\n  background-image: url('https:\/\/bealta.fr\/wp-content\/uploads\/2026\/07\/ChatGPT-Image-1-juil.-2026-15_53_23.png');\n  background-size: cover;\n  background-position: center;\n  background-repeat: no-repeat;\n  padding: clamp(64px, 7vw, 108px) var(--pad-x) clamp(56px, 6vw, 88px);\n  text-align: center;\n  isolation: isolate;\n}\n\/* voile sombre : garde le texte lisible par-dessus le visuel *\/\n.ba-hero .stage::before {\n  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;\n  background:\n    radial-gradient(72% 62% at 50% 48%, rgba(20,11,29,.72) 0%, rgba(20,11,29,.5) 55%, rgba(20,11,29,.2) 100%),\n    linear-gradient(180deg, rgba(20,11,29,.35) 0%, rgba(20,11,29,0) 28%, rgba(20,11,29,0) 72%, rgba(20,11,29,.4) 100%);\n}\n\/* tra\u00een\u00e9es lumineuses : masqu\u00e9es, le visuel de fond les porte d\u00e9j\u00e0 *\/\n.ba-hero .beam { display: none; }\n.ba-hero .beam-hidden { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; pointer-events: none; z-index: 0; will-change: transform; }\n.ba-hero .beam-a { width: 55vw; height: 40vw; left: -18%; top: -22%; background: radial-gradient(circle, rgba(255,154,77,.55), transparent 62%); }\n.ba-hero .beam-b { width: 60vw; height: 45vw; right: -20%; bottom: -30%; background: radial-gradient(circle, rgba(168,85,201,.55), transparent 62%); }\n.ba-hero .beam-c { width: 40vw; height: 30vw; left: 30%; bottom: -25%; background: radial-gradient(circle, rgba(179,91,69,.4), transparent 65%); }\n.ba-hero .grid-mesh {\n  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .22;\n  background-image:\n    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),\n    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);\n  background-size: 62px 62px;\n  mask-image: radial-gradient(85% 70% at 50% 35%, #000 20%, transparent 78%);\n  -webkit-mask-image: radial-gradient(85% 70% at 50% 35%, #000 20%, transparent 78%);\n}\n.ba-hero .nodes { position: absolute; inset: 0; z-index: 2; pointer-events: none; display: block; width: 100%; height: 100%; max-width: 100%; }\n.ba-hero .stage > .inner { position: relative; z-index: 2; width: 100%; max-width: 980px; margin: 0 auto; }\n.ba-hero h1 { color: #fff; margin-bottom: 20px; }\n.ba-hero h1 .w { display: inline-block; }\n.ba-hero .sub { color: var(--muted-dark); font-size: clamp(1.06rem, 1.6vw, 1.24rem); max-width: 620px; margin: 0 auto 32px; }\n.ba-hero .btn-row { margin-bottom: 38px; }\n\n\/* mot-cl\u00e9 anim\u00e9 du H1 *\/\n.ba-hero .kw { position: relative; display: inline-block; }\n.ba-hero .kw .grad-text { position: relative; z-index: 1; }\n.ba-hero .kw::after {\n  content: ''; position: absolute; left: -2px; right: -2px; bottom: .08em; height: .13em;\n  border-radius: 4px; background: var(--grad); opacity: .85;\n  transform: scaleX(0); transform-origin: left;\n  animation: ba-underline .8s cubic-bezier(.2,.8,.2,1) forwards;\n  animation-delay: var(--d, 1s);\n}\n@keyframes ba-underline { to { transform: scaleX(1); } }\n\n\/* badge partenaire Google Cloud *\/\n.ba-hero .partner-row { display: flex; justify-content: center; }\n.ba-hero .partner {\n  display: inline-flex; align-items: center; gap: 16px;\n  padding: 8px 22px 8px 14px; border-radius: var(--r-pill);\n  background: rgba(255,255,255,.07); border: 1px solid var(--line-dark);\n  color: rgba(255,255,255,.8); font-size: .9rem; backdrop-filter: blur(8px);\n}\n.ba-hero .partner .gcp { height: 48px; width: auto; flex: none; }\n.ba-hero .partner .sep { width: 1px; height: 30px; background: var(--line-dark); flex: none; }\n.ba-hero .partner .tech { white-space: nowrap; letter-spacing: .01em; }\n.ba-hero .partner .dot { width: 8px; height: 8px; border-radius: 50%; background: #34A853; box-shadow: 0 0 0 4px rgba(52,168,83,.18); }\n\n\/* bandeau de preuve sous le hero *\/\n.ba ul.ba-proof {\n  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 40px;\n  margin: 44px 0 0; padding: 32px 0 0; border-top: 1px solid var(--line-dark);\n}\n.ba-proof li { display: flex; align-items: center; gap: 9px; color: rgba(255,255,255,.66); font-size: .93rem; }\n.ba-proof svg { width: 16px; height: 16px; color: var(--orange); flex: none; }\n\n\/* ==========================================================================\n   3 PILIERS\n   ========================================================================= *\/\n.ba-pillars { background: var(--cream-2); }\n.ba-pillars .rail { position: relative; }\n.ba-pillars .connector {\n  position: absolute; top: 63px; left: 17%; right: 17%; height: 2px; z-index: 0;\n  background: linear-gradient(90deg, rgba(255,154,77,.0), rgba(255,154,77,.55), rgba(179,91,69,.55), rgba(168,85,201,.55), rgba(168,85,201,0));\n  transform: scaleX(0); transform-origin: center;\n  transition: transform 1.1s cubic-bezier(.2,.8,.2,1) .15s;\n}\n.ba-pillars.in .connector { transform: scaleX(1); }\n.ba-pcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; position: relative; z-index: 1; }\n\n.ba-pcard {\n  position: relative; display: flex; flex-direction: column;\n  padding: 34px 30px 30px; border-radius: var(--r-lg);\n  background: var(--white); border: 1px solid var(--line);\n  box-shadow: var(--sh-sm); overflow: hidden;\n  transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s, border-color .4s;\n}\n.ba-pcard::before {\n  content: ''; position: absolute; inset: 0; opacity: 0; transition: opacity .5s;\n  background: radial-gradient(120% 80% at 50% 0%, var(--tint, rgba(255,154,77,.14)), transparent 62%);\n}\n.ba-pcard::after {\n  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px;\n  border-radius: var(--r-lg) var(--r-lg) 0 0;\n  background: var(--accent, var(--orange)); transform: scaleX(0); transform-origin: center;\n  transition: transform .5s cubic-bezier(.2,.8,.2,1);\n}\n.ba-pcard:hover { transform: translateY(-5px); box-shadow: var(--sh-lg); border-color: rgba(43,31,20,.06); }\n.ba-pcard:hover::before { opacity: 1; }\n.ba-pcard:hover::after { transform: scaleX(1); }\n.ba-pcard > * { position: relative; z-index: 1; }\n.ba-pcard .num {\n  position: absolute; top: 34px; right: 30px; z-index: 1;\n  font-family: 'Poppins', sans-serif; font-size: .78rem; font-weight: 600;\n  color: var(--muted); opacity: .45;\n}\n.ba-pcard .icon {\n  width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center;\n  margin-bottom: 20px; background: var(--iconbg, rgba(255,154,77,.12));\n  color: var(--accent, var(--orange));\n  transition: transform .5s cubic-bezier(.2,.8,.2,1);\n}\n.ba-pcard:hover .icon { transform: translateY(-3px) scale(1.06) rotate(-4deg); }\n.ba-pcard .icon svg { width: 27px; height: 27px; }\n.ba-pcard .icon svg [data-anim] { transition: transform .6s cubic-bezier(.2,.8,.2,1), opacity .4s; transform-origin: center; }\n.ba-pcard:hover .icon svg [data-anim] { transform: scale(1.14); }\n.ba-pcard h3 { font-size: 1.4rem; margin-bottom: 12px; }\n.ba-pcard p { color: var(--muted); font-size: 1.04rem; margin-bottom: 22px; flex: 1; }\n.ba-pcard .go { margin-top: auto; align-self: flex-start; }\n\n\/* ==========================================================================\n   SECTIONS PILIERS : base commune\n   ========================================================================= *\/\n.ba-split { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(32px, 5vw, 72px); align-items: center; }\n.ba-split.rev > .col-viz { order: -1; }\n.ba-sec-cream { background: var(--cream); }\n.ba-sec-white { background: var(--cream-2); }\n.ba-sec-dark { background: var(--plum-900); color: #fff; }\n.ba-sec-dark h2, .ba-sec-dark h3 { color: #fff; }\n.ba-sec-dark .lead, .ba-sec-dark p { color: var(--muted-dark); }\n\n.ba ul.ba-bullets { display: grid; gap: 11px; margin: 26px 0 30px; padding: 0; }\n.ba-bullets li {\n  display: flex; align-items: flex-start; gap: 12px;\n  font-size: 1.03rem; color: var(--muted);\n}\n.ba-sec-dark .ba-bullets li { color: rgba(255,255,255,.74); }\n.ba-bullets .tick {\n  width: 22px; height: 22px; border-radius: 7px; flex: none; margin-top: 1px;\n  display: grid; place-items: center;\n  background: rgba(179,91,69,.12); color: var(--terra);\n}\n.ba-sec-dark .ba-bullets .tick { background: rgba(255,154,77,.16); color: var(--orange); }\n.ba-bullets .tick svg { width: 12px; height: 12px; }\n\n\/* --- Pilier 1 : parcours d'optimisation --------------------------------- *\/\n.ba-journey { display: grid; gap: 14px; }\n.ba-step {\n  position: relative; display: flex; align-items: center; gap: 18px;\n  padding: 18px 22px; border-radius: var(--r-md);\n  background: var(--white); border: 1px solid var(--line);\n  box-shadow: var(--sh-sm);\n  transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s, border-color .4s, background .4s;\n}\n.ba-step:not(:last-child)::after {\n  content: ''; position: absolute; left: 41px; bottom: -15px; width: 2px; height: 15px;\n  background: linear-gradient(var(--line), transparent);\n}\n.ba-step .badge {\n  width: 44px; height: 44px; border-radius: 14px; flex: none; display: grid; place-items: center;\n  font-family: 'Poppins', sans-serif; font-weight: 700; font-size: .95rem;\n  background: var(--cream); color: var(--muted-2);\n  transition: background .45s, color .45s, transform .45s cubic-bezier(.2,.8,.2,1);\n}\n.ba-step .txt strong { display: block; font-family: 'Poppins', sans-serif; font-size: 1.1rem; margin-bottom: 3px; }\n.ba-step .txt span { font-size: .96rem; color: var(--muted); }\n.ba-step.is-on { border-color: transparent; box-shadow: var(--sh-md); transform: translateX(6px); }\n.ba-step.is-on .badge { background: var(--grad); color: #fff; transform: scale(1.06); }\n\n\/* --- Pilier 2 : couches de s\u00e9curit\u00e9 ------------------------------------- *\/\n.ba-shield { position: relative; width: 100%; aspect-ratio: 1 \/ 1; max-width: 460px; margin: 0 auto; }\n.ba-shield .ring {\n  position: absolute; inset: 0; margin: auto; border-radius: 50%;\n  border: 1px dashed rgba(255,255,255,.3); box-shadow: inset 0 0 70px rgba(168,85,201,.14);\n  display: grid; place-items: start center;\n  opacity: 0; transform: scale(.82);\n  transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1);\n}\n.ba-shield.in .ring { opacity: 1; transform: scale(1); }\n.ba-shield .ring:nth-child(1) { width: 100%; height: 100%; transition-delay: .55s; }\n.ba-shield .ring:nth-child(2) { width: 76%;  height: 76%;  transition-delay: .4s; }\n.ba-shield .ring:nth-child(3) { width: 54%;  height: 54%;  transition-delay: .25s; }\n.ba-shield .ring .tag {\n  transform: translateY(-50%);\n  padding: 7px 15px; border-radius: var(--r-pill); white-space: nowrap;\n  background: rgba(32,16,48,.92); border: 1px solid rgba(255,154,77,.3);\n  color: #fff; font-size: .84rem; font-weight: 500;\n  box-shadow: 0 8px 22px rgba(0,0,0,.35);\n}\n.ba-shield .core {\n  position: absolute; inset: 0; margin: auto; width: 33%; height: 33%;\n  border-radius: 50%; display: grid; place-items: center; text-align: center;\n  background: var(--grad); color: #fff;\n  font-family: 'Poppins', sans-serif; font-weight: 600; font-size: .86rem;\n  box-shadow: 0 0 0 10px rgba(255,154,77,.1), 0 20px 50px rgba(179,91,69,.4);\n  opacity: 0; transform: scale(.6);\n  transition: opacity .6s, transform .7s cubic-bezier(.2,.8,.2,1);\n}\n.ba-shield.in .core { opacity: 1; transform: scale(1); }\n.ba-shield .pulse {\n  position: absolute; inset: 0; margin: auto; width: 33%; height: 33%; border-radius: 50%;\n  border: 1px solid rgba(255,154,77,.5); opacity: 0;\n}\n.ba-shield.in .pulse { animation: ba-pulse 3.4s ease-out infinite; animation-delay: 1.2s; }\n@keyframes ba-pulse {\n  0%   { opacity: .7; transform: scale(1); }\n  70%  { opacity: 0;  transform: scale(2.6); }\n  100% { opacity: 0;  transform: scale(2.6); }\n}\n\n\/* --- Pilier 3 : harnais IA ---------------------------------------------- *\/\n.ba-harness { max-width: 560px; margin: 0 auto; }\n.ba-harness .naked {\n  position: relative; padding: 20px 24px; border-radius: var(--r-md); text-align: center;\n  border: 1px dashed rgba(220, 80, 80, .5); background: rgba(220, 80, 80, .07);\n  color: rgba(255,255,255,.82); font-size: .96rem; margin-bottom: 8px;\n  transition: opacity .6s, transform .6s;\n}\n.ba-harness .naked strong { color: #fff; font-family: 'Poppins', sans-serif; display: block; margin-bottom: 4px; }\n.ba-harness.in .naked { animation: ba-shake 1.6s ease-in-out .2s 1; }\n@keyframes ba-shake {\n  0%,100% { transform: translateX(0); }\n  20% { transform: translateX(-5px); } 40% { transform: translateX(5px); }\n  60% { transform: translateX(-3px); } 80% { transform: translateX(3px); }\n}\n.ba-layers { display: grid; gap: 9px; }\n.ba-layer {\n  position: relative; display: flex; align-items: center; gap: 14px;\n  padding: 15px 20px; border-radius: var(--r-sm);\n  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);\n  color: #fff; font-size: 1.02rem;\n  opacity: 0; transform: translateY(14px) scale(.98);\n  transition: opacity .55s cubic-bezier(.2,.8,.2,1), transform .55s cubic-bezier(.2,.8,.2,1), background .35s, border-color .35s;\n}\n.ba-harness.in .ba-layer { opacity: 1; transform: none; }\n.ba-layer:hover { background: rgba(255,255,255,.09); border-color: rgba(255,154,77,.35); }\n.ba-layer .n {\n  width: 26px; height: 26px; border-radius: 9px; flex: none; display: grid; place-items: center;\n  font-size: .74rem; font-weight: 700; font-family: 'Poppins', sans-serif;\n  background: rgba(255,154,77,.16); color: var(--orange);\n}\n.ba-layer .arrow {\n  position: absolute; left: 33px; bottom: -14px; width: 12px; height: 12px; z-index: 2;\n  color: rgba(255,255,255,.28); opacity: 0; transition: opacity .4s;\n}\n.ba-harness.in .ba-layer .arrow { opacity: 1; }\n.ba-layer.final {\n  background: var(--grad); border-color: transparent; font-weight: 600;\n  font-family: 'Poppins', sans-serif;\n  box-shadow: 0 18px 44px rgba(179,91,69,.34);\n}\n.ba-layer.final .n { background: rgba(255,255,255,.22); color: #fff; }\n.ba-harness .verdict {\n  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 22px;\n}\n.ba-harness .verdict span {\n  padding: 9px 19px; border-radius: var(--r-pill); font-size: .9rem; font-weight: 600;\n  font-family: 'Poppins', sans-serif;\n  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); color: #fff;\n}\n\n\/* ==========================================================================\n   ACCOMPAGNEMENT PME\n   ========================================================================= *\/\n.ba-track { position: relative; margin: 54px 0 0; }\n.ba-track .line {\n  position: absolute; left: 8.33%; right: 8.33%; top: 27px; height: 2px; background: var(--line);\n}\n.ba-track .line i {\n  position: absolute; inset: 0; background: var(--grad); transform-origin: left;\n  transform: scaleX(0); transition: transform 1.6s cubic-bezier(.3,.7,.3,1) .2s; display: block;\n}\n.ba-track.in .line i { transform: scaleX(1); }\n.ba-track ol { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; position: relative; }\n.ba-track li { text-align: center; }\n.ba-track .dot {\n  width: 54px; height: 54px; border-radius: 50%; margin: 0 auto 14px;\n  display: grid; place-items: center; background: var(--cream-2);\n  border: 2px solid var(--line); color: var(--muted-2);\n  font-family: 'Poppins', sans-serif; font-weight: 700; font-size: .95rem;\n  transition: background .5s, color .5s, border-color .5s, transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s;\n}\n.ba-track li.is-on .dot { background: var(--grad); color: #fff; border-color: transparent; transform: scale(1.09); box-shadow: 0 12px 28px rgba(179,91,69,.28); }\n.ba-track .lbl { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 1.01rem; display: block; margin-bottom: 3px; }\n.ba-track .note { font-size: .88rem; color: var(--muted); }\n\n.ba-3q { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 64px; }\n.ba-qcard {\n  padding: 30px 28px; border-radius: var(--r-lg); background: var(--white);\n  border: 1px solid var(--line); box-shadow: var(--sh-sm);\n  transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s;\n}\n.ba-qcard:hover { transform: translateY(-6px); box-shadow: var(--sh-md); }\n.ba-qcard .kicker {\n  font-family: 'Poppins', sans-serif; font-size: .79rem; font-weight: 700;\n  letter-spacing: .12em; text-transform: uppercase; margin-bottom: 12px;\n}\n.ba-qcard p { font-size: 1.1rem; color: var(--ink); margin: 0; font-weight: 500; }\n\n\/* ==========================================================================\n   \u00c9COSYST\u00c8ME GOOGLE CLOUD\n   ========================================================================= *\/\n.ba-tech { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-top: 46px; }\n.ba-tech .chip {\n  display: flex; align-items: center; justify-content: center; gap: 10px;\n  padding: 20px 16px; border-radius: var(--r-sm);\n  background: var(--white); border: 1px solid var(--line);\n  font-size: .95rem; font-weight: 500; color: var(--muted-2);\n  box-shadow: var(--sh-sm);\n  transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s, color .3s;\n}\n.ba-tech .chip:hover { transform: translateY(-5px); box-shadow: var(--sh-md); color: var(--ink); }\n.ba-tech .chip b { font-weight: 600; }\n.ba-tech .chip img { height: 40px; width: auto; max-width: 100%; object-fit: contain; }\n\n\/* ==========================================================================\n   \u00c9QUIPE\n   ========================================================================= *\/\n.ba-team { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1000px; margin: 0 auto; }\n.ba-member {\n  text-align: center; padding: 36px 28px 32px;\n  border-radius: var(--r-lg); background: var(--white);\n  border: 1px solid var(--line); box-shadow: var(--sh-sm);\n  transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s, border-color .4s;\n}\n.ba-member:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); border-color: rgba(43,31,20,.06); }\n.ba-member .photo {\n  display: block; position: relative; width: 168px; height: 168px;\n  margin: 0 auto 22px; border-radius: 50%; overflow: hidden;\n  background: var(--cream);\n  box-shadow: 0 0 0 0 rgba(179,91,69,0);\n  transition: box-shadow .45s cubic-bezier(.2,.8,.2,1);\n}\n.ba-member:hover .photo { box-shadow: 0 0 0 5px rgba(179,91,69,.14); }\n.ba-member .photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.8,.2,1); }\n.ba-member:hover .photo img { transform: scale(1.05); }\n.ba-member h3 { font-size: 1.28rem; margin-bottom: 4px; }\n.ba-member .role { color: var(--muted); font-size: .99rem; margin: 0; }\n\n.ba-team-more {\n  display: flex; flex-wrap: wrap; align-items: center; gap: clamp(24px, 4vw, 54px);\n  max-width: 1000px; margin: 28px auto 0;\n  padding: 30px clamp(26px, 3.5vw, 44px);\n  border-radius: var(--r-lg); background: var(--white);\n  border: 1px solid var(--line); box-shadow: var(--sh-sm);\n}\n.ba-team-more .count { display: flex; flex-direction: column; flex: none; line-height: 1; }\n.ba-team-more .count .v { font-family: 'Poppins', sans-serif; font-size: clamp(2.4rem, 4vw, 3.2rem); font-weight: 700; letter-spacing: -.03em; }\n.ba-team-more .count .k { margin-top: 8px; color: var(--muted); font-size: .96rem; }\n.ba-team-more .fields { flex: 1; min-width: 260px; }\n.ba-team-more .intro { color: var(--muted); font-size: .99rem; margin: 0 0 14px; }\n.ba-team-more .fields ul { display: flex; flex-wrap: wrap; gap: 9px; }\n.ba-team-more .fields li {\n  padding: 8px 16px; border-radius: var(--r-pill);\n  background: var(--cream-3); border: 1px solid var(--line);\n  color: var(--muted-2); font-size: .92rem; font-weight: 500;\n  transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .3s, color .3s;\n}\n.ba-team-more .fields li:hover { transform: translateY(-2px); border-color: rgba(179,91,69,.35); color: var(--ink); }\n\n\/* ==========================================================================\n   CONVERSION FINALE\n   ========================================================================= *\/\n.ba-cta .box {\n  position: relative; overflow: hidden; text-align: center;\n  border-radius: var(--r-xl); padding: clamp(48px, 6vw, 84px) var(--pad-x);\n  background: radial-gradient(120% 100% at 50% 0%, #331B47 0%, #211031 48%, #140B1D 100%);\n  box-shadow: var(--sh-dark);\n}\n.ba-cta .box .beam { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; pointer-events: none; }\n.ba-cta .box h2 { color: #fff; }\n.ba-cta .box .lead { color: var(--muted-dark); }\n.ba-cta .box > .inner { position: relative; z-index: 2; }\n.ba-alt-ctas { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 30px; }\n.ba-alt-ctas a {\n  padding: 11px 21px; border-radius: var(--r-pill); font-size: .94rem;\n  background: rgba(255,255,255,.06); border: 1px solid var(--line-dark);\n  color: rgba(255,255,255,.78);\n  transition: background .3s, color .3s, transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s;\n}\n.ba-alt-ctas a:hover { background: rgba(255,255,255,.13); color: #fff; transform: translateY(-2px); border-color: rgba(255,154,77,.4); }\n\n\/* ==========================================================================\n   FOOTER\n   ========================================================================= *\/\n.ba-footer { background: var(--cream); padding: 56px 0 34px; border-top: 1px solid var(--line); }\n.ba-footer .cols { display: flex; flex-wrap: wrap; gap: 32px; justify-content: space-between; align-items: flex-start; }\n.ba-footer p { color: var(--muted); font-size: .96rem; max-width: 34ch; }\n.ba-footer nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }\n.ba-footer nav a { font-size: .96rem; color: var(--muted-2); transition: color .25s; }\n.ba-footer nav a:hover { color: var(--terra); }\n.ba-footer .legal { margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--line); font-size: .88rem; color: var(--muted); }\n.ba-footer .legal p { margin: 0 0 6px; }\n.ba-footer .legal p:last-child { margin-bottom: 0; }\n.ba-footer .legal .brand-note { color: var(--muted-2); font-weight: 500; }\n.ba-footer .legal a { color: var(--muted-2); border-bottom: 1px solid var(--line); transition: color .25s, border-color .25s; }\n.ba-footer .legal a:hover { color: var(--terra); border-color: var(--terra); }\n\n\/* ==========================================================================\n   R\u00c9V\u00c9LATIONS AU SCROLL\n   ========================================================================= *\/\n.ba [data-r] { opacity: 0; transform: translateY(22px); }\n.ba [data-r=\"fade\"] { transform: none; }\n.ba [data-r=\"left\"] { transform: translateX(-24px); }\n.ba [data-r=\"right\"] { transform: translateX(24px); }\n.ba [data-r=\"zoom\"] { transform: scale(.96); }\n.ba [data-r].in {\n  opacity: 1; transform: none;\n  transition: opacity .75s cubic-bezier(.2,.8,.2,1), transform .75s cubic-bezier(.2,.8,.2,1);\n}\n\n\/* compteurs *\/\n.ba-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 52px; }\n.ba-stat { text-align: center; padding: 26px 18px; border-radius: var(--r-lg); background: var(--white); border: 1px solid var(--line); box-shadow: var(--sh-sm); }\n.ba-stat .v { font-family: 'Poppins', sans-serif; font-size: clamp(2rem, 3.4vw, 2.7rem); font-weight: 700; line-height: 1; margin-bottom: 8px; }\n.ba-stat .k { font-size: .94rem; color: var(--muted); }\n\n\/* ==========================================================================\n   RESPONSIVE\n   ========================================================================= *\/\n@media (max-width: 1024px) {\n  .ba-pcards { grid-template-columns: 1fr; }\n  .ba-pillars .connector { display: none; }\n  .ba-split { grid-template-columns: 1fr; }\n  .ba-split.rev > .col-viz { order: 0; }\n  .ba-track ol { grid-template-columns: repeat(3, 1fr); gap: 26px 14px; }\n  .ba-track .line { display: none; }\n  .ba-3q { grid-template-columns: 1fr; }\n  .ba-nav { display: none; }\n  .ba-burger { display: flex; }\n  .ba-header .head-cta { display: none; }\n  .ba-nav.is-open {\n    display: flex; flex-direction: column; align-items: stretch; gap: 2px;\n    position: absolute; left: var(--pad-x); right: var(--pad-x); top: calc(100% + 6px);\n    background: var(--cream-2); border: 1px solid var(--line); border-radius: var(--r-md);\n    padding: 12px; box-shadow: var(--sh-lg);\n  }\n  .ba-nav.is-open a { padding: 12px 14px; }\n  .ba-header .bar { position: relative; }\n}\n@media (max-width: 680px) {\n  .ba { --r-xl: 24px; }\n  .ba-hero .stage { border-radius: 0; }\n  .ba-hero .partner { flex-direction: column; gap: 10px; padding: 14px 22px; border-radius: var(--r-lg); }\n  .ba-hero .partner .sep { width: 34px; height: 1px; }\n  .ba-hero .partner .tech { font-size: .85rem; }\n  .ba-stats { grid-template-columns: 1fr; }\n  .ba-track ol { grid-template-columns: repeat(2, 1fr); }\n  .ba .btn { width: 100%; justify-content: space-between; padding-left: 22px; }\n  .ba .btn-row { gap: 10px; }\n  .ba-proof { gap: 10px 18px; }\n  .ba-proof li { font-size: .8rem; }\n  .ba-shield { max-width: 320px; }\n  .ba-team { grid-template-columns: 1fr; }\n  .ba-team-more { flex-direction: column; align-items: flex-start; text-align: left; }\n  .ba-cta .box .beam { filter: blur(44px); }\n  .ba-shield .ring .tag { font-size: .68rem; padding: 5px 11px; }\n  .ba-footer .cols { flex-direction: column; }\n}\n\n\/* ==========================================================================\n   PR\u00c9F\u00c9RENCE : MOUVEMENT R\u00c9DUIT\n   ========================================================================= *\/\n@media (prefers-reduced-motion: reduce) {\n  .ba *, .ba *::before, .ba *::after {\n    animation-duration: .001ms !important;\n    animation-iteration-count: 1 !important;\n    transition-duration: .001ms !important;\n  }\n  .ba [data-r] { opacity: 1 !important; transform: none !important; }\n  .ba-shield .ring, .ba-shield .core, .ba-harness .ba-layer { opacity: 1 !important; transform: none !important; }\n  .ba-pillars .connector, .ba-track .line i { transform: scaleX(1) !important; }\n  .ba-hero .kw::after { transform: scaleX(1) !important; }\n}\n\n<\/style>\n<div class=\"ba\" id=\"ba-top\">\n\n  <!-- ===================== HEADER ===================== -->\n  <header class=\"ba-header\" id=\"baHeader\">\n    <div class=\"wrap bar\">\n      <a class=\"ba-logo\" href=\"#ba-top\" aria-label=\"Be Alta, accueil\">\n        <span class=\"mark\"><img decoding=\"async\" src=\"https:\/\/bealta.fr\/wp-content\/uploads\/2026\/06\/ChatGPT-Image-1-juil.-2026-15_22_42.png\" alt=\"Be Alta\"><\/span>\n        \n      <\/a>\n\n      <button class=\"ba-burger\" id=\"baBurger\" aria-label=\"Ouvrir le menu\" aria-expanded=\"false\"><span><\/span><\/button>\n\n      <nav class=\"ba-nav\" id=\"baNav\" aria-label=\"Navigation principale\">\n        <a href=\"#optimiser\" data-nav>Optimiser<\/a>\n        <a href=\"#securiser\" data-nav>S\u00e9curiser<\/a>\n        <a href=\"#encadrer\" data-nav>Harnais IA<\/a>\n        <a href=\"#approche\" data-nav>Notre approche<\/a>\n        <a href=\"#ecosysteme\" data-nav>\u00c9cosyst\u00e8me<\/a>\n        <a href=\"#equipe\" data-nav>Qui sommes-nous<\/a>\n      <\/nav>\n\n      <a class=\"btn btn-primary head-cta\" href=\"https:\/\/calendar.app.google\/5v6L6GsvjmmSqpMz5\" target=\"_blank\" rel=\"noopener\">\n        \u00c9changer 30 min\n        <span class=\"ico\"><svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M2.5 8h11M9.5 4l4 4-4 4\"\/><\/svg><\/span>\n      <\/a>\n    <\/div>\n  <\/header>\n\n  <!-- ===================== HERO ===================== -->\n  <section class=\"ba-hero\" id=\"hero\">\n    <div class=\"wrap\">\n      <div class=\"stage\">\n        <span class=\"beam beam-a\"><\/span>\n        <span class=\"beam beam-b\"><\/span>\n        <span class=\"beam beam-c\"><\/span>\n        <span class=\"grid-mesh\"><\/span>\n        <canvas class=\"nodes\" id=\"baNodes\" aria-hidden=\"true\"><\/canvas>\n\n        <div class=\"inner\" id=\"baHeroInner\">\n          <span class=\"eyebrow on-dark\" data-r=\"fade\">Agence IA \u00b7 Partenaire Google Cloud<\/span>\n\n          <h1>\n            <span class=\"w\">L&rsquo;IA<\/span>\n            <span class=\"w kw\" style=\"--d:.95s\"><span class=\"grad-text\">utile<\/span><\/span><span class=\"w\">,<\/span>\n            <span class=\"w kw\" style=\"--d:1.2s\"><span class=\"grad-text\">s\u00e9curis\u00e9e<\/span><\/span><span class=\"w\">,<\/span>\n            <span class=\"w kw\" style=\"--d:1.45s\"><span class=\"grad-text\">adopt\u00e9e<\/span><\/span>\n            <br class=\"br-lg\">\n            <span class=\"w\">pour<\/span> <span class=\"w\">les<\/span> <span class=\"w\">PME<\/span>\n          <\/h1>\n\n          <p class=\"sub\" data-r=\"fade\">30 minutes avec un expert Be Alta. On regarde vos usages IA, on identifie les risques cyber, on construit le bon harnais IA, et vous repartez avec un plan concret.<\/p>\n\n          <div class=\"btn-row center\" data-r=\"fade\">\n            <a class=\"btn btn-primary\" href=\"https:\/\/calendar.app.google\/5v6L6GsvjmmSqpMz5\" target=\"_blank\" rel=\"noopener\">\n              \u00c9changer 30 min avec un expert\n              <span class=\"ico\"><svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M2.5 8h11M9.5 4l4 4-4 4\"\/><\/svg><\/span>\n            <\/a>\n            <a class=\"btn btn-dark\" href=\"#piliers\">\n              D\u00e9couvrir nos 3 expertises\n              <span class=\"ico\"><svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M8 2.5v11M4 9.5l4 4 4-4\"\/><\/svg><\/span>\n            <\/a>\n          <\/div>\n\n          <div class=\"partner-row\" data-r=\"fade\">\n            <span class=\"partner\">\n              <img decoding=\"async\" class=\"gcp\" src=\"https:\/\/bealta.fr\/wp-content\/uploads\/2026\/07\/Design-sans-titre-2026-07-01T224138.124.png\" alt=\"Partenaire Google Cloud\">\n              <span class=\"sep\"><\/span>\n              <span class=\"tech\">Gemini \u00b7 Vertex AI \u00b7 BigQuery<\/span>\n            <\/span>\n          <\/div>\n\n          <ul class=\"ba-proof\" data-r=\"fade\">\n            <li><svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M13.5 4.5 6 12 2.5 8.5\"\/><\/svg> Usages identifi\u00e9s en 30 min<\/li>\n            <li><svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M13.5 4.5 6 12 2.5 8.5\"\/><\/svg> S\u00e9curit\u00e9 int\u00e9gr\u00e9e d\u00e8s la conception<\/li>\n            <li><svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M13.5 4.5 6 12 2.5 8.5\"\/><\/svg> Agents encadr\u00e9s et supervis\u00e9s<\/li>\n          <\/ul>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- ===================== 3 PILIERS ===================== -->\n  <section class=\"ba-pillars\" id=\"piliers\">\n    <div class=\"wrap\">\n      <div class=\"sec-head center\" data-r>\n        <span class=\"eyebrow\">Nos 3 expertises<\/span>\n        <h2>Trois chantiers, un seul projet<\/h2>\n        <p class=\"lead center\">Un usage IA ne tient en production que si les trois tiennent ensemble : ce qu&rsquo;il apporte, ce qu&rsquo;il expose, et ce qui le garde sous contr\u00f4le.<\/p>\n      <\/div>\n\n      <div class=\"rail\">\n        <span class=\"connector\"><\/span>\n        <div class=\"ba-pcards\">\n\n          <a class=\"ba-pcard\" href=\"#optimiser\" data-r style=\"--accent:#FF9A4D; --tint:rgba(255,154,77,.14); --iconbg:rgba(255,154,77,.12)\">\n            <span class=\"num\">01<\/span>\n            <span class=\"icon\">\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <path d=\"M3 17.5 8.5 12l4 4L21 7\" data-anim\/><path d=\"M15.5 7H21v5.5\"\/>\n              <\/svg>\n            <\/span>\n            <h3>Optimiser<\/h3>\n            <p>Des usages IA qui servent vraiment vos \u00e9quipes, pas des outils qui prennent la poussi\u00e8re.<\/p>\n            <span class=\"btn-link go\">Voir la m\u00e9thode <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M2.5 8h11M9.5 4l4 4-4 4\"\/><\/svg><\/span>\n          <\/a>\n\n          <a class=\"ba-pcard\" href=\"#securiser\" data-r style=\"--accent:#B35B45; --tint:rgba(179,91,69,.14); --iconbg:rgba(179,91,69,.12)\">\n            <span class=\"num\">02<\/span>\n            <span class=\"icon\">\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <path d=\"M12 2.8 20 6v6c0 4.6-3.3 7.9-8 9.2-4.7-1.3-8-4.6-8-9.2V6l8-3.2Z\"\/><path d=\"M9 12.2l2.1 2.1L15.4 10\" data-anim\/>\n              <\/svg>\n            <\/span>\n            <h3>S\u00e9curiser<\/h3>\n            <p>Une IA d\u00e9ploy\u00e9e sans ouvrir de nouvelle faille dans votre PME.<\/p>\n            <span class=\"btn-link go\">Voir la m\u00e9thode <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M2.5 8h11M9.5 4l4 4-4 4\"\/><\/svg><\/span>\n          <\/a>\n\n          <a class=\"ba-pcard\" href=\"#encadrer\" data-r style=\"--accent:#A855C9; --tint:rgba(168,85,201,.14); --iconbg:rgba(168,85,201,.12)\">\n            <span class=\"num\">03<\/span>\n            <span class=\"icon\">\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <rect x=\"3.2\" y=\"9.2\" width=\"17.6\" height=\"11.4\" rx=\"3\"\/><path d=\"M7.6 9.2V6.6a4.4 4.4 0 0 1 8.8 0v2.6\"\/><circle cx=\"12\" cy=\"15\" r=\"1.7\" data-anim\/>\n              <\/svg>\n            <\/span>\n            <h3>Encadrer<\/h3>\n            <p>Un harnais IA : le cadre qui rend vos agents fiables, contr\u00f4l\u00e9s et gouvernables.<\/p>\n            <span class=\"btn-link go\">Voir la m\u00e9thode <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M2.5 8h11M9.5 4l4 4-4 4\"\/><\/svg><\/span>\n          <\/a>\n\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- ===================== PILIER 1 : OPTIMISATION ===================== -->\n  <section class=\"ba-sec-cream\" id=\"optimiser\">\n    <div class=\"wrap ba-split\">\n      <div class=\"col-txt\">\n        <span class=\"eyebrow\" data-r=\"left\">Pilier 01 \u00b7 Optimisation des usages<\/span>\n        <h2 data-r=\"left\">Un outil que personne n&rsquo;utilise ne sert \u00e0 rien<\/h2>\n        <p class=\"lead\" data-r=\"left\">La plupart des PME n&rsquo;ont pas un probl\u00e8me d&rsquo;outils IA. Elles ont un probl\u00e8me d&rsquo;usage.<\/p>\n        <ul class=\"ba-bullets\" data-r=\"left\">\n          <li><span class=\"tick\"><svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M13.5 4.5 6 12 2.5 8.5\"\/><\/svg><\/span> Un chatbot que personne n&rsquo;ouvre<\/li>\n          <li><span class=\"tick\"><svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M13.5 4.5 6 12 2.5 8.5\"\/><\/svg><\/span> Un copilote install\u00e9 mais jamais lanc\u00e9<\/li>\n          <li><span class=\"tick\"><svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M13.5 4.5 6 12 2.5 8.5\"\/><\/svg><\/span> Une automatisation test\u00e9e puis abandonn\u00e9e<\/li>\n        <\/ul>\n        <p data-r=\"left\">Chez Be Alta, on part de l&rsquo;usage r\u00e9el, pas de la technologie. On identifie les <strong>3 t\u00e2ches qui vous co\u00fbtent le plus de temps<\/strong>, on mesure l&rsquo;adoption apr\u00e8s d\u00e9ploiement, et on ajuste jusqu&rsquo;\u00e0 ce que l&rsquo;outil devienne un r\u00e9flexe.<\/p>\n        <div class=\"btn-row\" data-r=\"left\" style=\"margin-top:26px\">\n          <a class=\"btn btn-ghost\" href=\"https:\/\/calendar.app.google\/5v6L6GsvjmmSqpMz5\" target=\"_blank\" rel=\"noopener\">Voir nos cas d&rsquo;usage par m\u00e9tier\n            <span class=\"ico\"><svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M2.5 8h11M9.5 4l4 4-4 4\"\/><\/svg><\/span>\n          <\/a>\n        <\/div>\n      <\/div>\n\n      <div class=\"col-viz\">\n        <div class=\"ba-journey\" data-seq data-r=\"right\">\n          <div class=\"ba-step\" data-i=\"0\"><span class=\"badge\">01<\/span><span class=\"txt\"><strong>Identifier<\/strong><span>Les 3 t\u00e2ches qui co\u00fbtent le plus de temps<\/span><\/span><\/div>\n          <div class=\"ba-step\" data-i=\"1\"><span class=\"badge\">02<\/span><span class=\"txt\"><strong>D\u00e9ployer<\/strong><span>Un usage r\u00e9el, pas une d\u00e9mo<\/span><\/span><\/div>\n          <div class=\"ba-step\" data-i=\"2\"><span class=\"badge\">03<\/span><span class=\"txt\"><strong>Mesurer<\/strong><span>Adoption, temps gagn\u00e9, qualit\u00e9<\/span><\/span><\/div>\n          <div class=\"ba-step\" data-i=\"3\"><span class=\"badge\">04<\/span><span class=\"txt\"><strong>Am\u00e9liorer<\/strong><span>On ajuste sur la base des chiffres<\/span><\/span><\/div>\n          <div class=\"ba-step\" data-i=\"4\"><span class=\"badge\">05<\/span><span class=\"txt\"><strong>Faire adopter<\/strong><span>Jusqu&rsquo;\u00e0 ce que \u00e7a devienne un r\u00e9flexe<\/span><\/span><\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- ===================== PILIER 2 : CYBERS\u00c9CURIT\u00c9 ===================== -->\n  <section class=\"ba-sec-dark\" id=\"securiser\">\n    <div class=\"wrap ba-split rev\">\n      <div class=\"col-txt\">\n        <span class=\"eyebrow on-dark\" data-r=\"right\">Pilier 02 \u00b7 Cybers\u00e9curit\u00e9 de l&rsquo;IA<\/span>\n        <h2 data-r=\"right\">D\u00e9ployer l&rsquo;IA sans ouvrir de porte d\u00e9rob\u00e9e<\/h2>\n        <p class=\"lead\" data-r=\"right\">Chaque nouvel usage IA (un agent connect\u00e9 \u00e0 votre CRM, un assistant qui lit vos emails, un outil branch\u00e9 sur vos donn\u00e9es clients) \u00e9largit votre surface d&rsquo;attaque.<\/p>\n        <ul class=\"ba-bullets\" data-r=\"right\">\n          <li><span class=\"tick\"><svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M13.5 4.5 6 12 2.5 8.5\"\/><\/svg><\/span> Contr\u00f4le des acc\u00e8s aux donn\u00e9es<\/li>\n          <li><span class=\"tick\"><svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M13.5 4.5 6 12 2.5 8.5\"\/><\/svg><\/span> Gestion des permissions<\/li>\n          <li><span class=\"tick\"><svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M13.5 4.5 6 12 2.5 8.5\"\/><\/svg><\/span> Cloisonnement des agents<\/li>\n          <li><span class=\"tick\"><svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M13.5 4.5 6 12 2.5 8.5\"\/><\/svg><\/span> Conformit\u00e9 RGPD et protection des donn\u00e9es<\/li>\n          <li><span class=\"tick\"><svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M13.5 4.5 6 12 2.5 8.5\"\/><\/svg><\/span> Revue avant mise en production<\/li>\n        <\/ul>\n        <p data-r=\"right\"><strong style=\"color:#fff\">La cybers\u00e9curit\u00e9 n&rsquo;est pas une \u00e9tape ajout\u00e9e \u00e0 la fin du projet.<\/strong> C&rsquo;est une condition de mise en production.<\/p>\n        <div class=\"btn-row\" data-r=\"right\" style=\"margin-top:26px\">\n          <a class=\"btn btn-primary\" href=\"https:\/\/calendar.app.google\/vVxqUCVUXXbU5Vb28\" target=\"_blank\" rel=\"noopener\">Faire un diagnostic s\u00e9curit\u00e9 de mes usages IA\n            <span class=\"ico\"><svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M2.5 8h11M9.5 4l4 4-4 4\"\/><\/svg><\/span>\n          <\/a>\n        <\/div>\n      <\/div>\n\n      <div class=\"col-viz\">\n        <div class=\"ba-shield\" id=\"baShield\" data-r=\"zoom\">\n          <div class=\"ring\"><span class=\"tag\">Contr\u00f4le &amp; supervision<\/span><\/div>\n          <div class=\"ring\"><span class=\"tag\">Permissions &amp; cloisonnement<\/span><\/div>\n          <div class=\"ring\"><span class=\"tag\">Acc\u00e8s aux donn\u00e9es<\/span><\/div>\n          <span class=\"pulse\"><\/span>\n          <div class=\"core\">Agent<br>IA<\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- ===================== PILIER 3 : HARNAIS IA ===================== -->\n  <section class=\"ba-sec-dark\" id=\"encadrer\" style=\"background:#1A0E26\">\n    <div class=\"wrap\">\n      <div class=\"sec-head center\" data-r>\n        <span class=\"eyebrow on-dark\">Pilier 03 \u00b7 Harnais IA<\/span>\n        <h2>Le harnais IA : ce qui transforme un mod\u00e8le en agent fiable<\/h2>\n        <p class=\"lead center\">Un LLM seul ne fait rien de fiable. Il lui faut du contexte, des outils, des garde-fous et une supervision pour agir dans votre entreprise sans d\u00e9railler.<\/p>\n      <\/div>\n\n      <div class=\"ba-split\" style=\"margin-top:56px; align-items:start\">\n        <div class=\"col-viz\">\n          <div class=\"ba-harness\" id=\"baHarness\" data-r=\"zoom\">\n            <div class=\"naked\"><strong>Un mod\u00e8le IA seul<\/strong>Impressionnant en d\u00e9mo. Impr\u00e9visible en production.<\/div>\n\n            <div class=\"ba-layers\">\n              <div class=\"ba-layer\" data-l=\"1\"><span class=\"n\">1<\/span> Contexte m\u00e9tier <span class=\"arrow\"><svg viewBox=\"0 0 12 12\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 1v10M2.5 7.5 6 11l3.5-3.5\"\/><\/svg><\/span><\/div>\n              <div class=\"ba-layer\" data-l=\"2\"><span class=\"n\">2<\/span> Outils &amp; connexions <span class=\"arrow\"><svg viewBox=\"0 0 12 12\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 1v10M2.5 7.5 6 11l3.5-3.5\"\/><\/svg><\/span><\/div>\n              <div class=\"ba-layer\" data-l=\"3\"><span class=\"n\">3<\/span> Permissions <span class=\"arrow\"><svg viewBox=\"0 0 12 12\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 1v10M2.5 7.5 6 11l3.5-3.5\"\/><\/svg><\/span><\/div>\n              <div class=\"ba-layer\" data-l=\"4\"><span class=\"n\">4<\/span> Garde-fous <span class=\"arrow\"><svg viewBox=\"0 0 12 12\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 1v10M2.5 7.5 6 11l3.5-3.5\"\/><\/svg><\/span><\/div>\n              <div class=\"ba-layer\" data-l=\"5\"><span class=\"n\">5<\/span> Supervision humaine <span class=\"arrow\"><svg viewBox=\"0 0 12 12\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 1v10M2.5 7.5 6 11l3.5-3.5\"\/><\/svg><\/span><\/div>\n              <div class=\"ba-layer final\" data-l=\"6\"><span class=\"n\">\u2713<\/span> Un agent IA fiable<\/div>\n            <\/div>\n\n            <div class=\"verdict\"><span>Fiable.<\/span><span>Contr\u00f4l\u00e9.<\/span><span>Gouvernable.<\/span><\/div>\n          <\/div>\n        <\/div>\n\n        <div class=\"col-txt\">\n          <p data-r=\"left\">C&rsquo;est ce cadre, <strong style=\"color:#fff\">le harnais IA<\/strong>, qui fait la diff\u00e9rence entre une d\u00e9monstration impressionnante et un agent r\u00e9ellement utilisable en production.<\/p>\n          <p data-r=\"left\">Chez Be Alta, construire ce harnais fait partie du projet :<\/p>\n          <ul class=\"ba-bullets\" data-r=\"left\">\n            <li><span class=\"tick\"><svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M13.5 4.5 6 12 2.5 8.5\"\/><\/svg><\/span> D\u00e9finir ce que l&rsquo;agent peut faire<\/li>\n            <li><span class=\"tick\"><svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M13.5 4.5 6 12 2.5 8.5\"\/><\/svg><\/span> D\u00e9finir ce qu&rsquo;il ne peut pas faire<\/li>\n            <li><span class=\"tick\"><svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M13.5 4.5 6 12 2.5 8.5\"\/><\/svg><\/span> Contr\u00f4ler ses acc\u00e8s et tracer ses actions<\/li>\n            <li><span class=\"tick\"><svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M13.5 4.5 6 12 2.5 8.5\"\/><\/svg><\/span> Pr\u00e9voir les cas d&rsquo;\u00e9chec<\/li>\n            <li><span class=\"tick\"><svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M13.5 4.5 6 12 2.5 8.5\"\/><\/svg><\/span> Mettre en place des garde-fous<\/li>\n            <li><span class=\"tick\"><svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M13.5 4.5 6 12 2.5 8.5\"\/><\/svg><\/span> Permettre une supervision humaine<\/li>\n          <\/ul>\n          <div class=\"btn-row\" data-r=\"left\" style=\"margin-top:26px\">\n            <a class=\"btn btn-primary\" href=\"https:\/\/calendar.app.google\/Ubx5Zm8oLUgs4KkW9\" target=\"_blank\" rel=\"noopener\">Comprendre le harnais IA de mon projet\n              <span class=\"ico\"><svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M2.5 8h11M9.5 4l4 4-4 4\"\/><\/svg><\/span>\n            <\/a>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- ===================== ACCOMPAGNEMENT PME ===================== -->\n  <section class=\"ba-sec-white\" id=\"approche\">\n    <div class=\"wrap\">\n      <div class=\"sec-head center\" data-r>\n        <span class=\"eyebrow\">Notre approche<\/span>\n        <h2>Pens\u00e9 pour les PME, pas pour les grands comptes<\/h2>\n        <p class=\"lead center\">Un projet IA chez Be Alta avance vite et de mani\u00e8re structur\u00e9e : du premier \u00e9change \u00e0 l&rsquo;adoption par les \u00e9quipes.<\/p>\n      <\/div>\n\n      <div class=\"ba-track\" id=\"baTrack\" data-r>\n        <span class=\"line\"><i><\/i><\/span>\n        <ol>\n          <li data-i=\"0\"><span class=\"dot\">1<\/span><span class=\"lbl\">Diagnostic<\/span><span class=\"note\">30 minutes<\/span><\/li>\n          <li data-i=\"1\"><span class=\"dot\">2<\/span><span class=\"lbl\">Cas d&rsquo;usage<\/span><span class=\"note\">3 priorit\u00e9s<\/span><\/li>\n          <li data-i=\"2\"><span class=\"dot\">3<\/span><span class=\"lbl\">Construction<\/span><span class=\"note\">Agent + harnais<\/span><\/li>\n          <li data-i=\"3\"><span class=\"dot\">4<\/span><span class=\"lbl\">S\u00e9curisation<\/span><span class=\"note\">Acc\u00e8s, RGPD<\/span><\/li>\n          <li data-i=\"4\"><span class=\"dot\">5<\/span><span class=\"lbl\">Mise en production<\/span><span class=\"note\">Revue avant go<\/span><\/li>\n          <li data-i=\"5\"><span class=\"dot\">6<\/span><span class=\"lbl\">Adoption<\/span><span class=\"note\">Mesure &amp; ajustement<\/span><\/li>\n        <\/ol>\n      <\/div>\n\n      <div class=\"ba-3q\">\n        <div class=\"ba-qcard\" data-r><span class=\"kicker grad-text\">Usages<\/span><p>Qu&rsquo;est-ce qui doit r\u00e9ellement changer pour les \u00e9quipes ?<\/p><\/div>\n        <div class=\"ba-qcard\" data-r><span class=\"kicker grad-text\">S\u00e9curit\u00e9<\/span><p>Quelles donn\u00e9es, permissions et actions doivent \u00eatre prot\u00e9g\u00e9es ?<\/p><\/div>\n        <div class=\"ba-qcard\" data-r><span class=\"kicker grad-text\">Harnais<\/span><p>Comment garder l&rsquo;agent sous contr\u00f4le une fois en production ?<\/p><\/div>\n      <\/div>\n\n      <div class=\"ba-stats\" data-r>\n        <div class=\"ba-stat\"><div class=\"v grad-text\"><span data-count=\"30\">0<\/span> min<\/div><div class=\"k\">Pour cadrer votre projet IA<\/div><\/div>\n        <div class=\"ba-stat\"><div class=\"v grad-text\"><span data-count=\"3\">0<\/span><\/div><div class=\"k\">Cas d&rsquo;usage prioritaires identifi\u00e9s<\/div><\/div>\n        <div class=\"ba-stat\"><div class=\"v grad-text\"><span data-count=\"6\">0<\/span><\/div><div class=\"k\">\u00c9tapes jusqu&rsquo;\u00e0 l&rsquo;adoption<\/div><\/div>\n      <\/div>\n\n      <div class=\"btn-row center\" data-r style=\"margin-top:44px\">\n        <a class=\"btn btn-primary\" href=\"https:\/\/calendar.app.google\/5v6L6GsvjmmSqpMz5\" target=\"_blank\" rel=\"noopener\">Discutons de mon projet\n          <span class=\"ico\"><svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M2.5 8h11M9.5 4l4 4-4 4\"\/><\/svg><\/span>\n        <\/a>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- ===================== \u00c9COSYST\u00c8ME GOOGLE CLOUD ===================== -->\n  <section class=\"ba-sec-cream\" id=\"ecosysteme\">\n    <div class=\"wrap\">\n      <div class=\"sec-head center\" data-r>\n        <span class=\"eyebrow\">Technologies<\/span>\n        <h2>Une expertise IA construite sur l&rsquo;\u00e9cosyst\u00e8me Google Cloud<\/h2>\n        <p class=\"lead center\">On choisit la brique apr\u00e8s avoir compris le probl\u00e8me m\u00e9tier, jamais l&rsquo;inverse.<\/p>\n      <\/div>\n\n      <div class=\"ba-tech\">\n        <span class=\"chip\" data-r=\"zoom\"><img decoding=\"async\" src=\"https:\/\/bealta.fr\/wp-content\/uploads\/2026\/07\/1-4.png\" alt=\"Google Cloud\" loading=\"lazy\"><\/span>\n        <span class=\"chip\" data-r=\"zoom\"><img decoding=\"async\" src=\"https:\/\/bealta.fr\/wp-content\/uploads\/2026\/07\/2-4.png\" alt=\"Vertex AI\" loading=\"lazy\"><\/span>\n        <span class=\"chip\" data-r=\"zoom\"><img decoding=\"async\" src=\"https:\/\/bealta.fr\/wp-content\/uploads\/2026\/07\/3-4.png\" alt=\"Google Workspace\" loading=\"lazy\"><\/span>\n        <span class=\"chip\" data-r=\"zoom\"><img decoding=\"async\" src=\"https:\/\/bealta.fr\/wp-content\/uploads\/2026\/07\/4-2.png\" alt=\"Google BigQuery\" loading=\"lazy\"><\/span>\n        <span class=\"chip\" data-r=\"zoom\"><img decoding=\"async\" src=\"https:\/\/bealta.fr\/wp-content\/uploads\/2026\/07\/5-2.png\" alt=\"Google AI Studio\" loading=\"lazy\"><\/span>\n        <span class=\"chip\" data-r=\"zoom\"><img decoding=\"async\" src=\"https:\/\/bealta.fr\/wp-content\/uploads\/2026\/07\/6-2.png\" alt=\"App Maker\" loading=\"lazy\"><\/span>\n        <span class=\"chip\" data-r=\"zoom\"><img decoding=\"async\" src=\"https:\/\/bealta.fr\/wp-content\/uploads\/2026\/07\/7-2.png\" alt=\"Claude\" loading=\"lazy\"><\/span>\n        <span class=\"chip\" data-r=\"zoom\"><img decoding=\"async\" src=\"https:\/\/bealta.fr\/wp-content\/uploads\/2026\/07\/8-2.png\" alt=\"Gemini\" loading=\"lazy\"><\/span>\n        <span class=\"chip\" data-r=\"zoom\"><img decoding=\"async\" src=\"https:\/\/bealta.fr\/wp-content\/uploads\/2026\/07\/9-1.png\" alt=\"OpenAI\" loading=\"lazy\"><\/span>\n        <span class=\"chip\" data-r=\"zoom\"><img decoding=\"async\" src=\"https:\/\/bealta.fr\/wp-content\/uploads\/2026\/07\/10-1.png\" alt=\"HubSpot\" loading=\"lazy\"><\/span>\n        <span class=\"chip\" data-r=\"zoom\"><img decoding=\"async\" src=\"https:\/\/bealta.fr\/wp-content\/uploads\/2026\/07\/11-1.png\" alt=\"Mistral AI\" loading=\"lazy\"><\/span>\n        <span class=\"chip\" data-r=\"zoom\"><img decoding=\"async\" src=\"https:\/\/bealta.fr\/wp-content\/uploads\/2026\/09\/image-2.png\" alt=\"Slack\" loading=\"lazy\"><\/span>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- ===================== \u00c9QUIPE ===================== -->\n  <section class=\"ba-sec-white\" id=\"equipe\">\n    <div class=\"wrap\">\n      <div class=\"sec-head center\" data-r>\n        <span class=\"eyebrow\">Qui sommes-nous<\/span>\n        <h2>L&rsquo;\u00e9quipe Be Alta<\/h2>\n        <p class=\"lead center\">Une agence IA fond\u00e9e par deux passionn\u00e9s de technologie, forts de 15 ans d&rsquo;exp\u00e9rience, pour mettre l&rsquo;intelligence artificielle au service concret des entreprises. Autour d&rsquo;eux, une \u00e9quipe pluridisciplinaire qui couvre tous les m\u00e9tiers de votre projet.<\/p>\n      <\/div>\n\n      <div class=\"ba-team\">\n        <div class=\"ba-member\" data-r>\n          <span class=\"photo\"><img decoding=\"async\" src=\"https:\/\/bealta.fr\/wp-content\/uploads\/2026\/07\/franck-barthe.png\" alt=\"Franck Barthe\" loading=\"lazy\"><\/span>\n          <h3>Franck Barthe<\/h3>\n          <p class=\"role\">Co-fondateur<\/p>\n        <\/div>\n        <div class=\"ba-member\" data-r>\n          <span class=\"photo\"><img decoding=\"async\" src=\"https:\/\/bealta.fr\/wp-content\/uploads\/2026\/07\/josselin-dauthon.png\" alt=\"Josselin Dauthon\" loading=\"lazy\"><\/span>\n          <h3>Josselin Dauthon<\/h3>\n          <p class=\"role\">Co-fondateur<\/p>\n        <\/div>\n        <div class=\"ba-member\" data-r>\n          <span class=\"photo\"><img decoding=\"async\" src=\"https:\/\/bealta.fr\/wp-content\/uploads\/2026\/09\/coline-poveda-photo.webp\" alt=\"Coline Poveda\" loading=\"lazy\"><\/span>\n          <h3>Coline Poveda<\/h3>\n          <p class=\"role\">Cloud &amp; AI Sales Specialist<\/p>\n        <\/div>\n      <\/div>\n\n      <div class=\"ba-team-more\" data-r>\n        <div class=\"count\">\n          <span class=\"v grad-text\"><span data-count=\"20\">0<\/span>+<\/span>\n          <span class=\"k\">collaborateurs<\/span>\n        <\/div>\n        <div class=\"fields\">\n          <p class=\"intro\">Des \u00e9quipes techniques d\u00e9di\u00e9es, mobilisables sur votre projet<\/p>\n          <ul>\n            <li>\u00c9quipe technique IA<\/li>\n            <li>\u00c9quipe technique Cybers\u00e9curit\u00e9<\/li>\n            <li>\u00c9quipe technique Google Cloud<\/li>\n            <li>\u00c9quipe technique Data<\/li>\n            <li>\u00c9quipe technique Google Workspace<\/li>\n          <\/ul>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- ===================== CONVERSION ===================== -->\n  <section class=\"ba-cta\" id=\"contact\">\n    <div class=\"wrap\">\n      <div class=\"box\">\n        <span class=\"beam\" style=\"width:50%;height:60%;left:-10%;top:-20%;background:radial-gradient(circle,rgba(255,154,77,.5),transparent 62%)\"><\/span>\n        <span class=\"beam\" style=\"width:55%;height:65%;right:-12%;bottom:-25%;background:radial-gradient(circle,rgba(168,85,201,.5),transparent 62%)\"><\/span>\n        <div class=\"inner\">\n          <span class=\"eyebrow on-dark\" data-r=\"fade\">Prendre rendez-vous<\/span>\n          <h2 data-r=\"fade\">30 minutes pour y voir clair sur votre IA<\/h2>\n          <p class=\"lead center\" data-r=\"fade\">On regarde vos usages, vos risques et le cadre \u00e0 mettre en place. Vous repartez avec un plan concret, pas un devis.<\/p>\n          <div class=\"btn-row center\" data-r=\"fade\" style=\"margin-top:30px\">\n            <a class=\"btn btn-primary\" href=\"https:\/\/calendar.app.google\/5v6L6GsvjmmSqpMz5\" target=\"_blank\" rel=\"noopener\">\u00c9changer 30 min avec un expert\n              <span class=\"ico\"><svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M2.5 8h11M9.5 4l4 4-4 4\"\/><\/svg><\/span>\n            <\/a>\n          <\/div>\n          <div class=\"ba-alt-ctas\" data-r=\"fade\">\n            <a href=\"https:\/\/calendar.app.google\/5v6L6GsvjmmSqpMz5\" target=\"_blank\" rel=\"noopener\">Faire le point sur mes usages IA<\/a>\n            <a href=\"https:\/\/calendar.app.google\/vVxqUCVUXXbU5Vb28\" target=\"_blank\" rel=\"noopener\">S\u00e9curiser mes usages IA<\/a>\n            <a href=\"https:\/\/calendar.app.google\/Ubx5Zm8oLUgs4KkW9\" target=\"_blank\" rel=\"noopener\">Comprendre le harnais IA<\/a>\n            <a href=\"https:\/\/calendar.app.google\/5v6L6GsvjmmSqpMz5\" target=\"_blank\" rel=\"noopener\">Parler de mon projet<\/a>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- ===================== FOOTER ===================== -->\n  <footer class=\"ba-footer\">\n    <div class=\"wrap\">\n      <div class=\"cols\">\n        <div>\n          <a class=\"ba-logo\" href=\"#ba-top\" style=\"margin-bottom:14px\">\n            <span class=\"mark\"><img decoding=\"async\" src=\"https:\/\/bealta.fr\/wp-content\/uploads\/2026\/06\/ChatGPT-Image-1-juil.-2026-15_22_42.png\" alt=\"Be Alta\"><\/span>\n            \n          <\/a>\n          <p>Agence IA pour les PME. Usages, cybers\u00e9curit\u00e9 et harnais IA, de la premi\u00e8re id\u00e9e \u00e0 la production.<\/p>\n        <\/div>\n        <nav aria-label=\"Navigation de pied de page\">\n          <a href=\"#optimiser\">Optimiser<\/a>\n          <a href=\"#securiser\">S\u00e9curiser<\/a>\n          <a href=\"#encadrer\">Harnais IA<\/a>\n          <a href=\"#approche\">Notre approche<\/a>\n          <a href=\"#ecosysteme\">\u00c9cosyst\u00e8me<\/a>\n          <a href=\"#equipe\">Qui sommes-nous<\/a>\n          <a href=\"https:\/\/calendar.app.google\/5v6L6GsvjmmSqpMz5\" target=\"_blank\" rel=\"noopener\">Prendre rendez-vous<\/a>\n        <\/nav>\n      <\/div>\n      <div class=\"legal\">\n        <p class=\"brand-note\">Be Alta est une marque de <a href=\"https:\/\/kaizzen.fr\" target=\"_blank\" rel=\"noopener\">Kaizzen<\/a>.<\/p>\n        <p class=\"line\">\u00a9 <span id=\"baYear\">2026<\/span> Be Alta \u00b7 Partenaire Google Cloud \u00b7 <a href=\"https:\/\/bealta.fr\/index.php\/mentions-legales\/\">Mentions l\u00e9gales<\/a> \u00b7 <a href=\"https:\/\/bealta.fr\/index.php\/conditions-generales\/\">Conditions g\u00e9n\u00e9rales<\/a> \u00b7 <a href=\"https:\/\/bealta.fr\/index.php\/politique-de-confidentialite\/\">Politique de confidentialit\u00e9<\/a><\/p>\n      <\/div>\n    <\/div>\n  <\/footer>\n\n<\/div>\n\n<script>\n\/* ==========================================================================\n   BE ALTA \/ Homepage v2 : interactions & animations\n   Toutes les animations sont d\u00e9sactiv\u00e9es si prefers-reduced-motion: reduce\n   ========================================================================= *\/\n(function () {\n  'use strict';\n\n  var root = document.getElementById('ba-top');\n  if (!root || root.dataset.baInit) return;\n  root.dataset.baInit = '1';\n\n  var REDUCED = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n  var $  = function (s, c) { return (c || root).querySelector(s); };\n  var $$ = function (s, c) { return Array.prototype.slice.call((c || root).querySelectorAll(s)); };\n\n  \/* ---------- ann\u00e9e ---------- *\/\n  var y = document.getElementById('baYear');\n  if (y) y.textContent = new Date().getFullYear();\n\n  \/* ---------- header : \u00e9tat au scroll ---------- *\/\n  var header = document.getElementById('baHeader');\n  var onScroll = function () {\n    if (header) header.classList.toggle('is-stuck', window.scrollY > 24);\n  };\n  onScroll();\n  window.addEventListener('scroll', onScroll, { passive: true });\n\n  \/* ---------- menu mobile ---------- *\/\n  var burger = document.getElementById('baBurger');\n  var nav = document.getElementById('baNav');\n  if (burger && nav) {\n    burger.addEventListener('click', function () {\n      var open = nav.classList.toggle('is-open');\n      burger.classList.toggle('is-open', open);\n      burger.setAttribute('aria-expanded', open ? 'true' : 'false');\n    });\n    nav.addEventListener('click', function (e) {\n      if (e.target.closest('a')) {\n        nav.classList.remove('is-open');\n        burger.classList.remove('is-open');\n        burger.setAttribute('aria-expanded', 'false');\n      }\n    });\n  }\n\n  \/* ---------- ancres fluides ---------- *\/\n  $$('a[href^=\"#\"]').forEach(function (a) {\n    a.addEventListener('click', function (e) {\n      var id = a.getAttribute('href');\n      if (!id || id === '#') return;\n      var t = document.querySelector(id);\n      if (!t) return;\n      e.preventDefault();\n      var offset = (header ? header.offsetHeight : 0) + 12;\n      var top = t.getBoundingClientRect().top + window.scrollY - offset;\n      window.scrollTo({ top: top, behavior: REDUCED ? 'auto' : 'smooth' });\n      history.replaceState(null, '', id);\n    });\n  });\n\n  \/* ---------- r\u00e9v\u00e9lations au scroll (avec d\u00e9calage entre voisins) ---------- *\/\n  var revealables = $$('[data-r]');\n\n  function stagger(el) {\n    var parent = el.parentElement;\n    if (!parent) return 0;\n    var sibs = Array.prototype.filter.call(parent.children, function (c) { return c.hasAttribute && c.hasAttribute('data-r'); });\n    var i = sibs.indexOf(el);\n    return i > 0 ? Math.min(i, 6) * 90 : 0;\n  }\n\n  if (!('IntersectionObserver' in window) || REDUCED) {\n    revealables.forEach(function (el) { el.classList.add('in'); });\n  } else {\n    var io = new IntersectionObserver(function (entries) {\n      entries.forEach(function (en) {\n        if (!en.isIntersecting) return;\n        var el = en.target;\n        var d = stagger(el);\n        el.style.transitionDelay = d + 'ms';\n        el.classList.add('in');\n        io.unobserve(el);\n      });\n    }, { threshold: 0.12, rootMargin: '0px 0px -8% 0px' });\n    revealables.forEach(function (el) { io.observe(el); });\n  }\n\n  \/* ---------- d\u00e9clencheurs de sections (connecteur, boucliers, harnais) ---------- *\/\n  function whenVisible(el, cb, threshold) {\n    if (!el) return;\n    if (!('IntersectionObserver' in window)) { cb(); return; }\n    var o = new IntersectionObserver(function (e) {\n      if (e[0].isIntersecting) { cb(); o.disconnect(); }\n    }, { threshold: threshold || 0.25 });\n    o.observe(el);\n  }\n\n  var pillars = $('.ba-pillars');\n  whenVisible(pillars, function () { pillars.classList.add('in'); }, 0.2);\n\n  var shield = document.getElementById('baShield');\n  whenVisible(shield, function () { shield.classList.add('in'); }, 0.3);\n\n  \/* ---------- harnais IA : construction couche par couche ---------- *\/\n  var harness = document.getElementById('baHarness');\n  if (harness) {\n    var layers = $$('.ba-layer', harness);\n    if (REDUCED) {\n      harness.classList.add('in');\n      layers.forEach(function (l) { l.style.transitionDelay = '0ms'; });\n    } else {\n      layers.forEach(function (l, i) { l.style.transitionDelay = (700 + i * 260) + 'ms'; });\n      whenVisible(harness, function () { harness.classList.add('in'); }, 0.3);\n    }\n  }\n\n  \/* ---------- parcours d'optimisation : \u00e9tapes qui s'activent ---------- *\/\n  function sequence(items, delay, firstDelay) {\n    if (REDUCED) { items.forEach(function (n) { n.classList.add('is-on'); }); return; }\n    items.forEach(function (n, i) {\n      setTimeout(function () { n.classList.add('is-on'); }, (firstDelay || 200) + i * delay);\n    });\n  }\n\n  var journey = $('[data-seq]');\n  if (journey) {\n    var steps = $$('.ba-step', journey);\n    whenVisible(journey, function () { sequence(steps, 320); }, 0.25);\n  }\n\n  var track = document.getElementById('baTrack');\n  if (track) {\n    var tItems = $$('li', track);\n    whenVisible(track, function () {\n      track.classList.add('in');\n      sequence(tItems, 230, 300);\n    }, 0.3);\n  }\n\n  \/* ---------- compteurs ---------- *\/\n  $$('[data-count]').forEach(function (el) {\n    var target = parseFloat(el.getAttribute('data-count')) || 0;\n    if (REDUCED) { el.textContent = target; return; }\n    whenVisible(el, function () {\n      var start = null, dur = 1100;\n      function tick(ts) {\n        if (!start) start = ts;\n        var p = Math.min((ts - start) \/ dur, 1);\n        var eased = 1 - Math.pow(1 - p, 3);\n        el.textContent = Math.round(target * eased);\n        if (p < 1) requestAnimationFrame(tick);\n      }\n      requestAnimationFrame(tick);\n    }, 0.5);\n  });\n\n  \/* ---------- navigation : \u00e9tat actif ---------- *\/\n  var navLinks = $$('[data-nav]');\n  var sections = navLinks.map(function (a) { return document.querySelector(a.getAttribute('href')); }).filter(Boolean);\n  if (sections.length &#038;&#038; 'IntersectionObserver' in window) {\n    var spy = new IntersectionObserver(function (entries) {\n      entries.forEach(function (en) {\n        if (!en.isIntersecting) return;\n        navLinks.forEach(function (a) {\n          a.classList.toggle('is-active', a.getAttribute('href') === '#' + en.target.id);\n        });\n      });\n    }, { rootMargin: '-45% 0px -50% 0px', threshold: 0 });\n    sections.forEach(function (s) { spy.observe(s); });\n  }\n\n  \/* ---------- HERO : apparition progressive du titre ---------- *\/\n  var heroInner = document.getElementById('baHeroInner');\n  if (heroInner) {\n    var words = $$('h1 .w', heroInner);\n    if (REDUCED) {\n      words.forEach(function (w) { w.style.opacity = 1; });\n    } else {\n      words.forEach(function (w, i) {\n        w.style.opacity = '0';\n        w.style.transform = 'translateY(26px)';\n        w.style.filter = 'blur(6px)';\n        w.style.transition = 'opacity .7s cubic-bezier(.2,.8,.2,1) ' + (0.12 + i * 0.075) + 's, transform .7s cubic-bezier(.2,.8,.2,1) ' + (0.12 + i * 0.075) + 's, filter .7s ease ' + (0.12 + i * 0.075) + 's';\n      });\n      var shown = false;\n      var show = function () {\n        if (shown) return;\n        shown = true;\n        words.forEach(function (w) { w.style.opacity = '1'; w.style.transform = 'none'; w.style.filter = 'none'; });\n      };\n      requestAnimationFrame(function () { requestAnimationFrame(show); });\n      \/\/ filet de s\u00e9curit\u00e9 : si l'onglet est en arri\u00e8re-plan, rAF peut ne jamais\n      \/\/ se d\u00e9clencher, on force l'affichage du titre au bout de 400 ms.\n      setTimeout(show, 400);\n      \/\/ le reste du hero appara\u00eet juste apr\u00e8s\n      $$('[data-r]', heroInner).forEach(function (el, i) {\n        setTimeout(function () { el.style.transitionDelay = '0ms'; el.classList.add('in'); }, 700 + i * 130);\n      });\n    }\n  }\n\n  \/* ---------- HERO : r\u00e9seau de donn\u00e9es anim\u00e9 (canvas l\u00e9ger) ---------- *\/\n  var canvas = document.getElementById('baNodes');\n  if (canvas &#038;&#038; canvas.getContext &#038;&#038; !REDUCED) {\n    var ctx = canvas.getContext('2d');\n    var pts = [], W = 0, H = 0, dpr = Math.min(window.devicePixelRatio || 1, 1.5);\n    var mouse = { x: 0, y: 0, on: false };\n    var raf = null, running = false, last = 0, FRAME = 1000 \/ 30, LINK = 118;\n\n    function clamp(v, lo, hi) { return Math.max(lo, Math.min(v || lo, hi)); }\n\n    function resize() {\n      var host = canvas.parentElement;\n      var r = host ? host.getBoundingClientRect() : canvas.getBoundingClientRect();\n      W = clamp(Math.round(r.width), 280, 2400);\n      H = clamp(Math.round(r.height), 200, 1400);\n      canvas.width = W * dpr; canvas.height = H * dpr;\n      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);\n      var count = Math.max(12, Math.min(28, Math.round(W \/ 52)));\n      pts = [];\n      for (var i = 0; i < count; i++) {\n        pts.push({\n          x: Math.random() * W, y: Math.random() * H,\n          vx: (Math.random() - 0.5) * 0.18, vy: (Math.random() - 0.5) * 0.18,\n          r: Math.random() * 1.6 + 0.7\n        });\n      }\n    }\n\n    function draw(ts) {\n      if (!running) return;\n      raf = requestAnimationFrame(draw);\n      if (ts - last < FRAME) return;          \/\/ plafonn\u00e9 \u00e0 ~30 fps\n      last = ts;\n\n      var i, j, a, b, dx, dy, d2, lim2 = LINK * LINK;\n      for (i = 0; i < pts.length; i++) {\n        a = pts[i];\n        a.x += a.vx; a.y += a.vy;\n        if (a.x < -20) a.x = W + 20; if (a.x > W + 20) a.x = -20;\n        if (a.y < -20) a.y = H + 20; if (a.y > H + 20) a.y = -20;\n      }\n\n      ctx.clearRect(0, 0, W, H);\n\n      \/\/ toutes les liaisons en un seul trac\u00e9\n      ctx.strokeStyle = 'rgba(255,255,255,.07)';\n      ctx.lineWidth = 1;\n      ctx.beginPath();\n      for (i = 0; i < pts.length; i++) {\n        a = pts[i];\n        for (j = i + 1; j < pts.length; j++) {\n          b = pts[j];\n          dx = a.x - b.x; dy = a.y - b.y; d2 = dx * dx + dy * dy;\n          if (d2 < lim2) { ctx.moveTo(a.x, a.y); ctx.lineTo(b.x, b.y); }\n        }\n      }\n      ctx.stroke();\n\n      \/\/ les n\u0153uds en deux trac\u00e9s (normal \/ proche du curseur)\n      ctx.fillStyle = 'rgba(255,255,255,.34)';\n      ctx.beginPath();\n      for (i = 0; i < pts.length; i++) {\n        a = pts[i];\n        if (mouse.on &#038;&#038; Math.abs(a.x - mouse.x) < 140 &#038;&#038; Math.abs(a.y - mouse.y) < 140) continue;\n        ctx.moveTo(a.x + a.r, a.y);\n        ctx.arc(a.x, a.y, a.r, 0, 6.2832);\n      }\n      ctx.fill();\n\n      if (mouse.on) {\n        ctx.fillStyle = 'rgba(255,154,77,.75)';\n        ctx.beginPath();\n        for (i = 0; i < pts.length; i++) {\n          a = pts[i];\n          if (Math.abs(a.x - mouse.x) < 140 &#038;&#038; Math.abs(a.y - mouse.y) < 140) {\n            ctx.moveTo(a.x + a.r, a.y);\n            ctx.arc(a.x, a.y, a.r, 0, 6.2832);\n          }\n        }\n        ctx.fill();\n      }\n    }\n\n    function start() { if (!running) { running = true; last = 0; raf = requestAnimationFrame(draw); } }\n    function stop() { running = false; if (raf) cancelAnimationFrame(raf); }\n\n    resize();\n    var rt = null;\n    window.addEventListener('resize', function () {\n      clearTimeout(rt);\n      rt = setTimeout(resize, 180);\n    }, { passive: true });\n\n    var stage = canvas.parentElement;\n    var beams = $$('.beam', stage);\n    beams.forEach(function (bm) { bm.style.transition = 'transform 1s cubic-bezier(.2,.8,.2,1)'; });\n    var moveQueued = false, rect = null;\n\n    stage.addEventListener('mousemove', function (e) {\n      rect = stage.getBoundingClientRect();\n      mouse.x = e.clientX - rect.left; mouse.y = e.clientY - rect.top; mouse.on = true;\n      if (moveQueued) return;\n      moveQueued = true;\n      requestAnimationFrame(function () {\n        moveQueued = false;\n        \/\/ tr\u00e8s l\u00e9ger effet de profondeur sur les tra\u00een\u00e9es\n        var cx = (mouse.x \/ rect.width - 0.5), cy = (mouse.y \/ rect.height - 0.5);\n        for (var i = 0; i < beams.length; i++) {\n          var k = (i + 1) * 9;\n          beams[i].style.transform = 'translate3d(' + (-cx * k).toFixed(1) + 'px,' + (-cy * k).toFixed(1) + 'px,0)';\n        }\n      });\n    }, { passive: true });\n\n    stage.addEventListener('mouseleave', function () {\n      mouse.on = false;\n      beams.forEach(function (bm) { bm.style.transform = 'translate3d(0,0,0)'; });\n    }, { passive: true });\n\n    \/\/ n'anime que si le hero est visible (\u00e9conomie batterie \/ mobile)\n    if ('IntersectionObserver' in window) {\n      new IntersectionObserver(function (e) { e[0].isIntersecting ? start() : stop(); }, { threshold: 0.02 })\n        .observe(canvas);\n    } else { start(); }\n  }\n})();\n<\/script>\n\n","protected":false},"excerpt":{"rendered":"<p>Be Alta accompagne les PME sur l&rsquo;IA en production : optimisation des usages, cybers\u00e9curit\u00e9 et harnais IA. Diagnostic en 30 min.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-1484","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/bealta.fr\/index.php\/wp-json\/wp\/v2\/pages\/1484","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bealta.fr\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bealta.fr\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bealta.fr\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bealta.fr\/index.php\/wp-json\/wp\/v2\/comments?post=1484"}],"version-history":[{"count":20,"href":"https:\/\/bealta.fr\/index.php\/wp-json\/wp\/v2\/pages\/1484\/revisions"}],"predecessor-version":[{"id":1507,"href":"https:\/\/bealta.fr\/index.php\/wp-json\/wp\/v2\/pages\/1484\/revisions\/1507"}],"wp:attachment":[{"href":"https:\/\/bealta.fr\/index.php\/wp-json\/wp\/v2\/media?parent=1484"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}