{"id":29,"date":"2026-07-30T14:36:49","date_gmt":"2026-07-30T14:36:49","guid":{"rendered":"https:\/\/www.ia-media.be\/?page_id=29"},"modified":"2026-08-20T10:36:09","modified_gmt":"2026-08-20T10:36:09","slug":"elementor-29","status":"publish","type":"page","link":"http:\/\/www.ia-media.be\/","title":{"rendered":""},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"29\" class=\"elementor elementor-29\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3c8be7d e-con e-atomic-element e-flexbox-base e-dba6331 \" data-id=\"3c8be7d\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"3c8be7d\">\n    \t\t<div class=\"elementor-element elementor-element-23cbf42 elementor-widget elementor-widget-html\" data-id=\"23cbf42\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!doctype html>\r\n<html lang=\"fr\">\r\n<head>\r\n<script>(function(){var t=localStorage.getItem('ia-theme');if(t)document.documentElement.setAttribute('data-theme',t);})()<\/script>\r\n<meta charset=\"utf-8\"\/>\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1, viewport-fit=cover\"\/>\r\n<meta name=\"theme-color\" content=\"#efe6d3\"\/>\r\n<title>ia\u00b7media.be \u2014 Studio de visuels IA, fid\u00e8les \u00e0 votre ADN<\/title>\r\n<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=Instrument+Serif:ital@0;1&family=Inter+Tight:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   S0 \u00b7 FOUNDATION \u2014 Tokens \/ Reset \/ Header chrome\r\n   Theme : ATELIER (cr\u00e8me + terracotta + moutarde + olive)\r\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n:root {\r\n  \/* Fonts *\/\r\n  --font-display: 'Instrument Serif', 'Cormorant Garamond', Georgia, serif;\r\n  --font-text: 'Inter Tight', system-ui, -apple-system, sans-serif;\r\n\r\n  \/* Radius scale *\/\r\n  --r-xs: 4px;\r\n  --r-sm: 10px;\r\n  --r-md: 14px;\r\n  --r-lg: 22px;\r\n  --r-xl: 32px;\r\n  --r-2xl: 48px;\r\n\r\n  \/* Spacing *\/\r\n  --content-max: 1480px;\r\n  --gap-sm: 14px;\r\n  --gap-md: 28px;\r\n  --gap-lg: 56px;\r\n\r\n  \/* Theme NUIT MAUVE (default) *\/\r\n  --bg:#0e0b18;\r\n  --bg-soft:#161228;\r\n  --bg-warm:#1c1734;\r\n  --bg-deep:#080610;\r\n  --ink:#f0ecf8;\r\n  --ink-2:#c4bad9;\r\n  --ink-3:#8a7fa0;\r\n  --ink-inv:#f0ecf8;\r\n  --line:rgba(180,160,230,0.12);\r\n  --line-2:rgba(180,160,230,0.22);\r\n  --card:rgba(30,24,55,0.6);\r\n  --card-deep:rgba(180,160,230,0.06);\r\n\r\n  --c-primary:#c76adf;\r\n  --c-secondary:#8b6ae0;\r\n  --c-accent:#e85da0;\r\n  --c-quiet:#7b6aad;\r\n  --c-warm:#d45a8f;\r\n\r\n  --shadow-card:0 1px 0 rgba(100,80,160,0.08) inset,0 24px 60px -28px rgba(0,0,0,0.55),0 8px 24px -12px rgba(0,0,0,0.4);\r\n  --shadow-deep: 0 50px 110px -40px rgba(28,22,16,0.45), 0 22px 60px -30px rgba(28,22,16,0.28);\r\n\r\n  \/* Mobile safe areas *\/\r\n  --safe-top: env(safe-area-inset-top, 0px);\r\n  --safe-bottom: env(safe-area-inset-bottom, 0px);\r\n}\r\n\r\n*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\r\nhtml { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }\r\nbody {\r\n  background: var(--bg);\r\n  color: var(--ink);\r\n  font-family: var(--font-text);\r\n  font-feature-settings: 'ss01', 'ss02', 'cv11';\r\n  -webkit-font-smoothing: antialiased;\r\n  -moz-osx-font-smoothing: grayscale;\r\n  overflow-x: hidden;\r\n  line-height: 1.55;\r\n  min-height: 100vh;\r\n}\r\nimg { display: block; max-width: 100%; }\r\nbutton { font: inherit; cursor: pointer; background: none; border: none; color: inherit; }\r\na { color: inherit; text-decoration: none; }\r\n\r\n\/* Paper texture background *\/\r\nbody::before {\r\n  content: '';\r\n  position: fixed;\r\n  inset: 0;\r\n  pointer-events: none;\r\n  z-index: 1;\r\n  background-image:\r\n    radial-gradient(ellipse 80% 60% at 12% 8%, color-mix(in oklab, var(--c-primary) 18%, transparent) 0%, transparent 60%),\r\n    radial-gradient(ellipse 70% 70% at 92% 18%, color-mix(in oklab, var(--c-accent) 14%, transparent) 0%, transparent 60%),\r\n    radial-gradient(ellipse 60% 70% at 20% 92%, color-mix(in oklab, var(--c-secondary) 12%, transparent) 0%, transparent 60%);\r\n  filter: blur(10px);\r\n  opacity: 0.85;\r\n}\r\nbody::after {\r\n  content: '';\r\n  position: fixed;\r\n  inset: 0;\r\n  pointer-events: none;\r\n  z-index: 1;\r\n  background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.86' numOctaves='2' stitchTiles='stitch'\/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'\/%3E%3C\/svg%3E\");\r\n  opacity: 0.04;\r\n  mix-blend-mode: multiply;\r\n}\r\n\r\nmain, header, footer, section { position: relative; z-index: 2; }\r\n\r\n\/* \u2500\u2500 DNA Helix Canvas \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n#dna-canvas {\r\n  position: fixed;\r\n  top: 0; left: 0;\r\n  width: 100vw; height: 100vh;\r\n  z-index: 0;\r\n  pointer-events: none;\r\n}\r\n\r\n\r\n\r\n\/* Container \u2014 desktop max 1480, mobile 18px gutter *\/\r\n.wrap {\r\n  width: 100%;\r\n  max-width: var(--content-max);\r\n  margin: 0 auto;\r\n  padding: 0 28px;\r\n}\r\n@media (max-width: 720px) {\r\n  .wrap { padding: 0 18px; }\r\n  \/* Edge-to-edge variant \u2014 applied to specific blocks *\/\r\n  .wrap-edge { padding: 0; }\r\n}\r\n\r\n\/* \u2500\u2500 Typography \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.eyebrow {\r\n  display: inline-flex; align-items: center; gap: 10px;\r\n  font-size: 11px; font-weight: 500; letter-spacing: 0.18em;\r\n  text-transform: uppercase; color: var(--ink-3);\r\n  font-family: var(--font-text);\r\n}\r\n.eyebrow::before {\r\n  content: ''; width: 18px; height: 1px; background: currentColor; opacity: 0.7;\r\n}\r\n.eyebrow.solo::before { display: none; }\r\n\r\nh1.display, h2.lede, h3.section-h {\r\n  font-family: var(--font-display);\r\n  font-weight: 400;\r\n  letter-spacing: -0.025em;\r\n  line-height: 0.92;\r\n  color: var(--ink);\r\n}\r\nh1.display { font-size: clamp(44px, 7vw, 96px); }\r\nh1.display em, h2.lede em, h3.section-h em {\r\n  font-style: italic; color: var(--c-primary);\r\n}\r\nh2.lede { font-size: clamp(34px, 4vw, 56px); line-height: 0.92; }\r\nh3.section-h { font-size: clamp(26px, 3vw, 42px); }\r\n\r\np.lead {\r\n  font-size: clamp(15px, 1.35vw, 18.5px);\r\n  line-height: 1.55; color: var(--ink-2);\r\n  max-width: 58ch;\r\n}\r\np { color: var(--ink-2); }\r\n\r\n\/* \u2500\u2500 Reveal on scroll \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.rv {\r\n  transition: opacity .9s cubic-bezier(.2,.7,.2,1),\r\n              transform .9s cubic-bezier(.2,.7,.2,1);\r\n}\r\nhtml.js-reveal .rv:not(.in) { opacity: 0; transform: translateY(26px); }\r\n.rv.in { opacity: 1; transform: none; }\r\n.rv.d1 { transition-delay: 80ms; }\r\n.rv.d2 { transition-delay: 160ms; }\r\n.rv.d3 { transition-delay: 240ms; }\r\n.rv.d4 { transition-delay: 320ms; }\r\n@media (prefers-reduced-motion: reduce) {\r\n  .rv { opacity: 1 !important; transform: none !important; }\r\n}\r\n\r\n\/* \u2500\u2500 Buttons \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.btn {\r\n  display: inline-flex; align-items: center; gap: 10px;\r\n  padding: 13px 22px; border-radius: 999px;\r\n  font-size: 14px; font-weight: 500;\r\n  border: 1.5px solid transparent;\r\n  transition: transform .25s cubic-bezier(.2,.7,.2,1), background .25s, border-color .25s, box-shadow .3s;\r\n  letter-spacing: -0.005em;\r\n  white-space: nowrap;\r\n}\r\n.btn .arr { display: inline-block; transition: transform .3s; }\r\n.btn:hover .arr { transform: translateX(4px); }\r\n.btn.brand {\r\n  background: var(--c-primary); color: #fff;\r\n  border-color: var(--c-primary);\r\n  box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset,\r\n              0 18px 36px -16px color-mix(in oklab, var(--c-primary) 70%, transparent);\r\n}\r\n.btn.brand:hover {\r\n  transform: translateY(-2px);\r\n  box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset,\r\n              0 26px 50px -16px color-mix(in oklab, var(--c-primary) 80%, transparent);\r\n}\r\n.btn.ghost {\r\n  background: transparent; color: var(--ink);\r\n  border-color: var(--line-2);\r\n}\r\n.btn.ghost:hover { border-color: var(--ink); background: var(--card-deep); }\r\n.btn.primary {\r\n  background: var(--ink); color: var(--ink-inv);\r\n  border-color: var(--ink);\r\n}\r\n.btn.primary:hover { transform: translateY(-2px); box-shadow: 0 18px 36px -16px var(--ink); }\r\n\r\n\/* \u2500\u2500 Sticker rotated \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.sticker {\r\n  display: inline-flex; align-items: center; gap: 8px;\r\n  padding: 7px 14px; border-radius: 999px;\r\n  background: var(--c-primary); color: #fff;\r\n  font-size: 11px; font-weight: 600; letter-spacing: 0.08em;\r\n  text-transform: uppercase;\r\n  transform: rotate(-3deg);\r\n  box-shadow: 0 10px 24px -10px rgba(0,0,0,0.25);\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   HEADER \u2014 sticky, blur, dropdown burger\r\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.site-header {\r\n  position: relative;\r\n  top: 0;\r\n  z-index: 50;\r\n  background: color-mix(in oklab, var(--bg) 86%, transparent);\r\n  -webkit-backdrop-filter: blur(22px) saturate(160%);\r\n  backdrop-filter: blur(22px) saturate(160%);\r\n  border-bottom: 1px solid var(--line);\r\n  padding-top: var(--safe-top);\r\n}\r\n.site-header .wrap {\r\n  display: flex; align-items: center; gap: 24px;\r\n  padding-top: 14px; padding-bottom: 14px;\r\n}\r\n\r\n.brand {\r\n  display: flex; align-items: center; gap: 11px;\r\n  font-weight: 600; font-size: 16.5px;\r\n  letter-spacing: -0.01em;\r\n}\r\n.brand-mark {\r\n  width: 38px; height: 38px; border-radius: 11px;\r\n  background: var(--c-primary); color: #fff;\r\n  display: grid; place-items: center;\r\n  font-family: var(--font-display); font-style: italic;\r\n  font-size: 19px;\r\n  box-shadow: 0 8px 22px -8px color-mix(in oklab, var(--c-primary) 70%, transparent);\r\n}\r\n.brand .name { display: flex; align-items: baseline; }\r\n.brand .dot { color: var(--c-primary); margin: 0 1px; }\r\n\r\n.site-nav {\r\n  display: flex; gap: 2px; margin-left: 20px;\r\n}\r\n.site-nav a {\r\n  padding: 8px 14px; border-radius: 999px;\r\n  font-size: 13.5px; font-weight: 500; color: var(--ink-2);\r\n  transition: background .2s, color .2s;\r\n}\r\n.site-nav a:hover { background: var(--card-deep); color: var(--ink); }\r\n\r\n.header-right {\r\n  margin-left: auto;\r\n  display: flex; gap: 10px; align-items: center;\r\n}\r\n.burger {\r\n  display: none;\r\n  width: 42px; height: 42px; border-radius: 12px;\r\n  border: 1px solid var(--line-2); background: var(--card);\r\n  align-items: center; justify-content: center;\r\n  flex-direction: column;\r\n}\r\n.burger .bar {\r\n  display: block; width: 18px; height: 1.5px;\r\n  background: var(--ink); margin: 2.5px auto;\r\n  transition: .25s cubic-bezier(.2,.7,.2,1);\r\n  border-radius: 2px;\r\n}\r\n\r\n@media (max-width: 980px) {\r\n  .site-nav { display: none; }\r\n  .header-right .btn { display: none; }\r\n  .burger { display: flex; }\r\n}\r\n\r\n\/* Burger open = dropdown header *\/\r\n.site-nav.open {\r\n  display: flex !important;\r\n  flex-direction: column;\r\n  position: fixed;\r\n  top: calc(68px + var(--safe-top));\r\n  left: 0; right: 0;\r\n  background: var(--bg);\r\n  border-top: 1px solid var(--line);\r\n  border-bottom: 1px solid var(--line);\r\n  padding: 12px 18px 20px;\r\n  gap: 0;\r\n  z-index: 60;\r\n  box-shadow: 0 24px 60px -20px rgba(0,0,0,0.18);\r\n  max-height: calc(100vh - 68px);\r\n  overflow-y: auto;\r\n}\r\n.site-nav.open a {\r\n  padding: 14px 16px;\r\n  border-radius: 12px;\r\n  font-size: 15.5px;\r\n  color: var(--ink);\r\n  border-bottom: 1px solid var(--line);\r\n  font-weight: 500;\r\n}\r\n.site-nav.open a:last-of-type { border-bottom: none; }\r\n.site-nav.open .nav-cta {\r\n  margin-top: 14px;\r\n  border: none;\r\n  background: var(--c-primary);\r\n  color: #fff;\r\n  text-align: center;\r\n  justify-content: center;\r\n  padding: 14px 16px;\r\n  border-radius: 999px;\r\n  font-weight: 600;\r\n}\r\n\r\n.burger[aria-expanded=\"true\"] .bar:nth-child(1) { transform: translateY(4px) rotate(45deg); }\r\n.burger[aria-expanded=\"true\"] .bar:nth-child(2) { opacity: 0; }\r\n.burger[aria-expanded=\"true\"] .bar:nth-child(3) { transform: translateY(-4px) rotate(-45deg); }\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   S1 \u00b7 HERO \u2014 Mobile-first, auto-condensed, marketing copy\r\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.hero {\r\n  padding: clamp(16px, 2vw, 28px) 0 clamp(14px, 1.5vw, 22px);\r\n  position: relative;\r\n}\r\n.hero-grid {\r\n  display: grid;\r\n  grid-template-columns: 1.15fr 1fr;\r\n  gap: clamp(14px, 1.5vw, 24px);\r\n  align-items: center;\r\n}\r\n.hero-col-text { position: relative; display: flex; flex-direction: column; }\r\n.hero-col-text .sticker { margin-bottom: 16px; align-self: flex-start; }\r\n.hero-col-text h1.display { margin-bottom: 22px; }\r\n.hero-col-text h1.display .line { display: block; }\r\n.hero-col-text h1.display .indent { padding-left: clamp(16px, 4vw, 80px); }\r\n.hero-col-text p.lead { margin-bottom: 16px; }\r\n.hero-col-text p.lead strong { color: var(--ink); font-weight: 600; }\r\n\r\n\/* \u2500\u2500 Hero manifesto \u2014 la phrase qui claque \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.hero-manifesto {\r\n  margin-bottom: 24px;\r\n  padding: 18px 22px 18px 22px;\r\n  position: relative;\r\n  border-left: 3px solid var(--c-primary);\r\n  background: linear-gradient(90deg,\r\n    color-mix(in oklab, var(--c-primary) 6%, transparent) 0%,\r\n    transparent 70%);\r\n  border-radius: 0 var(--r-md) var(--r-md) 0;\r\n}\r\n.hero-manifesto .hm-line {\r\n  font-family: var(--font-display);\r\n  font-size: clamp(18px, 1.6vw, 22px);\r\n  line-height: 1.25;\r\n  letter-spacing: -0.01em;\r\n  display: block;\r\n}\r\n.hero-manifesto .hm-muted {\r\n  color: var(--ink-2);\r\n  font-style: normal;\r\n}\r\n.hero-manifesto .hm-strong {\r\n  color: var(--ink);\r\n  font-weight: 400;\r\n  font-style: italic;\r\n  position: relative;\r\n}\r\n.hero-manifesto .hm-strong::after {\r\n  content: '';\r\n  display: inline-block;\r\n  width: 0;\r\n}\r\n.hero-manifesto .hm-small {\r\n  display: inline-block;\r\n  font-family: var(--font-text);\r\n  font-size: 0.55em;\r\n  font-style: normal;\r\n  color: var(--ink-3);\r\n  font-weight: 500;\r\n  letter-spacing: 0.02em;\r\n  vertical-align: middle;\r\n  margin: 0 4px;\r\n  padding: 3px 9px;\r\n  border-radius: 999px;\r\n  background: color-mix(in oklab, var(--c-accent) 18%, var(--bg-soft));\r\n  border: 1px solid color-mix(in oklab, var(--c-accent) 35%, var(--line));\r\n}\r\n.hero-manifesto .hm-accent {\r\n  color: var(--c-primary);\r\n  font-style: italic;\r\n  font-weight: 400;\r\n  position: relative;\r\n  display: inline;\r\n}\r\n.hero-manifesto .hm-accent::before {\r\n  content: '\u2192 ';\r\n  color: var(--c-accent);\r\n  font-style: normal;\r\n  font-family: var(--font-text);\r\n  font-weight: 700;\r\n  margin-right: 2px;\r\n}\r\n\r\n.hero-ctas {\r\n  display: flex; gap: 10px; flex-wrap: wrap;\r\n  margin-bottom: 22px;\r\n}\r\n\r\n\/* \u2500\u2500 Hero mosaic \u2014 2x2 portraits 3\/4, symmetric, well-arranged \u2500 *\/\r\n.hero-mosaic {\r\n  position: relative;\r\n  display: grid;\r\n  grid-template-columns: 1fr 1fr;\r\n  gap: 10px;\r\n  width: 100%;\r\n  max-width: 580px;\r\n  justify-self: end;\r\n}\r\n.hm-card {\r\n  position: relative;\r\n  aspect-ratio: 3 \/ 4;\r\n  border-radius: var(--r-md);\r\n  overflow: hidden;\r\n  box-shadow: var(--shadow-card);\r\n  background: var(--bg-warm);\r\n  border: 1px solid var(--line);\r\n  transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s;\r\n}\r\n.hm-card:hover {\r\n  transform: translateY(-4px);\r\n  box-shadow: var(--shadow-deep);\r\n  z-index: 2;\r\n}\r\n.hm-card img {\r\n  width: 100%; height: 100%;\r\n  object-fit: cover;\r\n  transition: transform .8s cubic-bezier(.2,.7,.2,1);\r\n}\r\n.hm-card:hover img { transform: scale(1.05); }\r\n\r\n\/* Subtle staggered offset for editorial feel (preserves symmetry) *\/\r\n.hm-card.hm-a { transform: translateY(0); }\r\n.hm-card.hm-b { transform: translateY(18px); }\r\n.hm-card.hm-c { transform: translateY(-12px); }\r\n.hm-card.hm-d { transform: translateY(6px); }\r\n.hm-card.hm-a:hover { transform: translateY(-4px); }\r\n.hm-card.hm-b:hover { transform: translateY(14px); }\r\n.hm-card.hm-c:hover { transform: translateY(-16px); }\r\n.hm-card.hm-d:hover { transform: translateY(2px); }\r\n\r\n.hm-card .cap {\r\n  position: absolute; left: 10px; bottom: 10px;\r\n  padding: 5px 11px; border-radius: 999px;\r\n  background: rgba(28,22,16,0.82); color: var(--ink-inv);\r\n  font-size: 10px; font-weight: 600; letter-spacing: 0.08em;\r\n  text-transform: uppercase;\r\n  -webkit-backdrop-filter: blur(8px);\r\n  backdrop-filter: blur(8px);\r\n}\r\n\r\n\/* \u2500\u2500 Hero floating tag (subtle paysagiste hint) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.hero-floating-tag {\r\n  display: inline-flex; align-items: center; gap: 8px;\r\n  padding: 9px 16px;\r\n  background: var(--bg-soft);\r\n  border: 1px solid var(--line-2);\r\n  border-radius: 999px;\r\n  font-family: var(--font-display);\r\n  font-style: italic;\r\n  font-size: 14.5px;\r\n  color: var(--ink);\r\n  box-shadow: var(--shadow-card);\r\n  margin-bottom: 18px;\r\n}\r\n.hero-floating-tag .dot {\r\n  display: inline-block; width: 6px; height: 6px;\r\n  border-radius: 50%; background: var(--c-secondary);\r\n}\r\n\r\n\/* \u2500\u2500 Marquee secteurs \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.marquee {\r\n  margin-top: clamp(12px, 1.2vw, 18px);\r\n  border-top: 1px solid var(--line);\r\n  border-bottom: 1px solid var(--line);\r\n  padding: 16px 0;\r\n  overflow: hidden;\r\n  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);\r\n  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);\r\n}\r\n.marquee-track {\r\n  display: flex; gap: 40px;\r\n  white-space: nowrap;\r\n  animation: marquee 42s linear infinite;\r\n  font-family: var(--font-display);\r\n  font-style: italic;\r\n  font-size: clamp(18px, 1.9vw, 28px);\r\n  color: var(--ink-2);\r\n  width: max-content;\r\n  align-items: center;\r\n}\r\n.marquee-track .dot {\r\n  width: 7px; height: 7px; border-radius: 50%;\r\n  background: var(--c-primary);\r\n  display: inline-block;\r\n  flex-shrink: 0;\r\n}\r\n@keyframes marquee { to { transform: translateX(-50%); } }\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   S2 \u00b7 M\u00c9THODE \u2014 Rail horizontal desktop \/ Accord\u00e9on mobile (COMPACT)\r\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.method-sec {\r\n  padding: clamp(18px, 2vw, 28px) 0 clamp(16px, 1.5vw, 24px);\r\n  background: linear-gradient(165deg, #4a4a52 0%, #3d3d44 50%, #35353c 100%);\r\n  border-top: 1px solid var(--line);\r\n}\r\n\/* Method dark grey \u2014 white text overrides *\/\r\n.method-sec { color: #f0ede8; }\r\n.method-sec .eyebrow { color: rgba(255,255,255,0.55); }\r\n.method-sec .eyebrow::before { background: rgba(255,255,255,0.3); }\r\n.method-sec h2 { color: #f0ede8; }\r\n.method-sec h2 em { color: var(--c-primary); }\r\n.method-sec .mh-right p { color: #fff; }\r\n.method-sec .mh-right p strong { color: #fff; }\r\n.method-sec .m-num { background: rgba(255,255,255,0.08); }\r\n.method-sec .m-step h4 { color: #f0ede8; }\r\n.method-sec .m-step p { color: rgba(255,255,255,0.7); }\r\n.method-sec .m-thumb { border-color: rgba(255,255,255,0.08); background: rgba(255,255,255,0.04); }\r\n.method-sec .m-tag { border-color: currentColor; }\r\n.method-sec .method-rail::before { opacity: 0.4; }\r\n.method-sec .method-human-note { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.10); color: rgba(255,255,255,0.6); }\r\n.method-sec .method-human-note strong { color: #fff; }\r\n.method-sec .method-human-note em { color: var(--c-primary); }\r\n.method-sec .method-human-note .mhn-icon { filter: grayscale(0) brightness(1.2); }\r\n\/* Mobile accordion cards on grey *\/\r\n@media (max-width: 820px) {\r\n  .method-sec .m-step { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.08); }\r\n  .method-sec .m-step.is-open { border-color: rgba(255,255,255,0.15); }\r\n  .method-sec .m-chevron { color: rgba(255,255,255,0.4); }\r\n}\r\n\r\n.method-head {\r\n  display: grid;\r\n  grid-template-columns: 1fr 1.1fr;\r\n  gap: clamp(10px, 1.2vw, 20px);\r\n  align-items: end;\r\n  margin-bottom: clamp(10px, 1.2vw, 18px);\r\n}\r\n.method-head .mh-left .eyebrow { margin-bottom: 10px; }\r\n.method-head .mh-left h2 { margin-bottom: 0; font-size: clamp(28px, 3.2vw, 44px); }\r\n.method-head .mh-right p { font-size: clamp(14px, 1.2vw, 16px); color: #fff; line-height: 1.5; }\r\n.method-head .mh-right p strong { color: #fff; font-weight: 600; }\r\n\r\n\/* \u2500\u2500 Rail container \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.method-rail {\r\n  display: grid;\r\n  grid-template-columns: repeat(5, 1fr);\r\n  gap: clamp(12px, 1.4vw, 18px);\r\n  position: relative;\r\n}\r\n\/* Connecting line desktop *\/\r\n.method-rail::before {\r\n  content: '';\r\n  position: absolute;\r\n  top: 28px;\r\n  left: 8%; right: 8%;\r\n  height: 2px;\r\n  background: linear-gradient(90deg,\r\n    var(--c-primary) 0%,\r\n    var(--c-warm) 25%,\r\n    var(--c-accent) 50%,\r\n    var(--c-secondary) 75%,\r\n    var(--c-quiet) 100%);\r\n  opacity: 0.6;\r\n  border-radius: 2px;\r\n  z-index: 1;\r\n}\r\n\r\n\/* \u2500\u2500 Step card \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.m-step {\r\n  position: relative;\r\n  z-index: 2;\r\n  display: flex;\r\n  flex-direction: column;\r\n}\r\n.m-step-head {\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: flex-start;\r\n  gap: 10px;\r\n  cursor: default;\r\n  user-select: none;\r\n}\r\n.m-num {\r\n  width: 58px; height: 58px; border-radius: 50%;\r\n  background: var(--bg-soft);\r\n  border: 2px solid var(--c-primary);\r\n  color: var(--c-primary);\r\n  display: grid; place-items: center;\r\n  font-family: var(--font-display); font-style: italic;\r\n  font-size: 22px;\r\n  box-shadow: 0 8px 22px -12px rgba(0,0,0,0.20);\r\n  transition: transform .3s cubic-bezier(.2,.7,.2,1);\r\n}\r\n.m-step:hover .m-num {\r\n  transform: scale(1.06) translateY(-2px);\r\n}\r\n.m-step.s1 .m-num { color: var(--c-primary); border-color: var(--c-primary); }\r\n.m-step.s2 .m-num { color: var(--c-warm); border-color: var(--c-warm); }\r\n.m-step.s3 .m-num { color: var(--c-accent); border-color: var(--c-accent); }\r\n.m-step.s4 .m-num { color: var(--c-secondary); border-color: var(--c-secondary); }\r\n.m-step.s5 .m-num { color: var(--c-quiet); border-color: var(--c-quiet); }\r\n\r\n.m-step h4 {\r\n  font-family: var(--font-display);\r\n  font-size: clamp(15px, 1.2vw, 18px);\r\n  line-height: 1.1;\r\n  color: var(--ink);\r\n  margin: 0;\r\n}\r\n.m-chevron {\r\n  display: none;\r\n  margin-left: auto;\r\n  color: var(--ink-3);\r\n  font-size: 13px;\r\n  transition: transform .3s;\r\n}\r\n\r\n.m-step-body {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 10px;\r\n  margin-top: 12px;\r\n}\r\n.m-thumb {\r\n  aspect-ratio: 16 \/ 11;\r\n  border-radius: var(--r-md);\r\n  overflow: hidden;\r\n  background: var(--bg-warm);\r\n  border: 1px solid var(--line);\r\n  box-shadow: var(--shadow-card);\r\n}\r\n.m-thumb img {\r\n  width: 100%; height: 100%;\r\n  object-fit: cover;\r\n  transition: transform .8s cubic-bezier(.2,.7,.2,1);\r\n}\r\n.m-step:hover .m-thumb img { transform: scale(1.04); }\r\n\r\n.m-step p {\r\n  font-size: 12.5px;\r\n  line-height: 1.5;\r\n  color: var(--ink-2);\r\n}\r\n.m-tag {\r\n  display: inline-flex;\r\n  align-self: flex-start;\r\n  padding: 4px 10px;\r\n  border-radius: 999px;\r\n  font-size: 10.5px;\r\n  font-weight: 600;\r\n  letter-spacing: 0.04em;\r\n  border: 1px solid currentColor;\r\n  margin-top: 0;\r\n}\r\n.m-step.s1 .m-tag { color: var(--c-primary); background: color-mix(in oklab, var(--c-primary) 8%, transparent); }\r\n.m-step.s2 .m-tag { color: var(--c-warm); background: color-mix(in oklab, var(--c-warm) 8%, transparent); }\r\n.m-step.s3 .m-tag { color: var(--c-accent); background: color-mix(in oklab, var(--c-accent) 8%, transparent); }\r\n.m-step.s4 .m-tag { color: var(--c-secondary); background: color-mix(in oklab, var(--c-secondary) 8%, transparent); }\r\n.m-step.s5 .m-tag { color: var(--c-quiet); background: color-mix(in oklab, var(--c-quiet) 8%, transparent); }\r\n\r\n\/* \u2500\u2500 Human note callout (compact) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.method-human-note {\r\n  margin-top: clamp(12px, 1.5vw, 20px);\r\n  padding: 14px 20px;\r\n  border-radius: var(--r-lg);\r\n  background: linear-gradient(135deg,\r\n    color-mix(in oklab, var(--c-secondary) 14%, var(--bg-soft)) 0%,\r\n    var(--bg-soft) 70%);\r\n  border: 1px solid color-mix(in oklab, var(--c-secondary) 28%, var(--line));\r\n  display: flex; align-items: center; gap: 14px;\r\n  font-size: clamp(13px, 1.1vw, 15px);\r\n  color: var(--ink-2);\r\n  line-height: 1.45;\r\n  box-shadow: var(--shadow-card);\r\n}\r\n.method-human-note .mhn-icon {\r\n  font-size: 22px;\r\n  flex-shrink: 0;\r\n  line-height: 1;\r\n}\r\n.method-human-note strong { color: var(--ink); font-weight: 600; }\r\n.method-human-note em { font-style: italic; color: var(--c-primary); font-family: var(--font-display); font-size: 1.1em; }\r\n\r\n\/* \u2500\u2500 Mobile : accordion (compact) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n@media (max-width: 820px) {\r\n  .method-head {\r\n    grid-template-columns: 1fr;\r\n    gap: 10px;\r\n    align-items: start;\r\n  }\r\n  .method-head .mh-left h2 { font-size: clamp(28px, 8vw, 42px); }\r\n  .method-rail {\r\n    grid-template-columns: 1fr;\r\n    gap: 8px;\r\n  }\r\n  .method-rail::before { display: none; }\r\n\r\n  .m-step {\r\n    background: var(--card);\r\n    border: 1px solid var(--line);\r\n    border-radius: var(--r-md);\r\n    overflow: hidden;\r\n    box-shadow: var(--shadow-card);\r\n    transition: border-color .3s;\r\n  }\r\n  .m-step.is-open { border-color: var(--line-2); }\r\n\r\n  .m-step-head {\r\n    flex-direction: row;\r\n    align-items: center;\r\n    gap: 12px;\r\n    padding: 12px 14px;\r\n    cursor: pointer;\r\n    -webkit-tap-highlight-color: transparent;\r\n  }\r\n  .m-num {\r\n    width: 38px; height: 38px;\r\n    font-size: 16px;\r\n    box-shadow: none;\r\n    flex-shrink: 0;\r\n  }\r\n  .m-step:hover .m-num { transform: none; }\r\n  .m-step h4 {\r\n    font-size: 15.5px;\r\n    flex: 1;\r\n    min-width: 0;\r\n  }\r\n  .m-chevron {\r\n    display: block;\r\n    flex-shrink: 0;\r\n  }\r\n  .m-step.is-open .m-chevron { transform: rotate(180deg); }\r\n\r\n  .m-step-body {\r\n    max-height: 0;\r\n    margin-top: 0;\r\n    overflow: hidden;\r\n    transition: max-height .45s cubic-bezier(.2,.7,.2,1),\r\n                padding .3s,\r\n                opacity .3s;\r\n    opacity: 0;\r\n    padding: 0 14px;\r\n  }\r\n  .m-step.is-open .m-step-body {\r\n    max-height: 700px;\r\n    padding: 0 14px 14px;\r\n    opacity: 1;\r\n  }\r\n  .m-thumb {\r\n    aspect-ratio: 16 \/ 10;\r\n  }\r\n  .m-step p { font-size: 13px; }\r\n\r\n  .method-human-note {\r\n    padding: 14px 16px;\r\n    flex-direction: row;\r\n    align-items: flex-start;\r\n    gap: 10px;\r\n    font-size: 13px;\r\n    margin-top: 18px;\r\n  }\r\n  .method-human-note .mhn-icon { font-size: 20px; }\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   S5 \u00b7 PACKS \/ CALCULATEUR\r\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.packs-sec {\r\n  padding: clamp(18px, 2vw, 28px) 0 clamp(20px, 2vw, 32px);\r\n  border-top: 1px solid var(--line);\r\n  background: linear-gradient(180deg, var(--bg-warm) 0%, var(--bg) 100%);\r\n}\r\n.packs-head { margin-bottom: clamp(10px, 1.2vw, 16px); text-align: center; }\r\n.packs-head .eyebrow { justify-content: center; margin-bottom: 10px; }\r\n.packs-head h2 { font-family: var(--font-display); font-size: clamp(28px, 3.2vw, 42px); line-height: 0.94; margin-bottom: 10px; }\r\n.packs-head h2 em { color: var(--c-primary); font-style: italic; }\r\n.packs-head p { font-size: clamp(13px, 1.1vw, 15px); color: var(--ink-2); max-width: 55ch; margin: 0 auto; }\r\n\r\n\/* \u2500\u2500 ADN 110\u20ac Banner \u2014 full width \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.pack-adn-banner {\r\n  display: grid;\r\n  grid-template-columns: 1fr 1fr;\r\n  gap: clamp(12px, 1.5vw, 20px);\r\n  padding: clamp(12px, 1.2vw, 18px);\r\n  border-radius: var(--r-xl);\r\n  background: linear-gradient(135deg,\r\n    color-mix(in oklab, var(--c-accent) 10%, var(--bg-soft)),\r\n    var(--bg-soft));\r\n  border: 2px solid color-mix(in oklab, var(--c-accent) 25%, var(--line));\r\n  box-shadow: var(--shadow-card);\r\n  margin-bottom: clamp(18px, 2vw, 24px);\r\n  align-items: start;\r\n}\r\n.pab-left .eyebrow { margin-bottom: 6px; }\r\n.pab-left h3 { font-family: var(--font-display); font-size: clamp(22px, 2.2vw, 30px); line-height: 0.95; margin-bottom: 10px; }\r\n.pab-left h3 em { color: var(--c-primary); font-style: italic; }\r\n.pab-left .pab-desc { font-size: 12.5px; color: var(--ink-2); line-height: 1.45; margin-bottom: 12px; }\r\n.pab-left .pab-desc strong { color: var(--ink); }\r\n\r\n.adn-prix { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: var(--r-lg); background: linear-gradient(135deg, color-mix(in oklab, var(--c-accent) 14%, var(--bg-soft)), var(--bg-soft)); border: 1px solid color-mix(in oklab, var(--c-accent) 30%, var(--line)); box-shadow: var(--shadow-card); margin-bottom: 10px; }\r\n.adn-prix .adn-amount { font-family: var(--font-display); font-style: italic; font-size: clamp(34px, 3vw, 46px); line-height: 0.9; color: var(--c-primary); }\r\n.adn-prix .adn-amount .unit { font-size: 0.38em; color: var(--ink-3); font-family: var(--font-text); font-style: normal; }\r\n.adn-prix .adn-prix-detail { font-size: 11.5px; color: var(--ink-2); line-height: 1.3; }\r\n.adn-prix .adn-prix-detail strong { color: var(--ink); }\r\n\r\n.adn-formulaire-callout { padding: 14px 16px; border-radius: var(--r-md); background: linear-gradient(135deg, color-mix(in oklab, var(--c-primary) 8%, var(--bg-soft)), var(--bg-soft)); border-left: 3px solid var(--c-primary); border: 1px solid color-mix(in oklab, var(--c-primary) 20%, var(--line)); border-left: 3px solid var(--c-primary); margin-bottom: 10px; }\r\n.adn-formulaire-callout h4 { font-family: var(--font-display); font-style: italic; font-size: 17px; color: var(--c-primary); margin-bottom: 4px; }\r\n.adn-formulaire-callout p { font-size: 12px; color: var(--ink-2); line-height: 1.4; }\r\n.adn-formulaire-callout p strong { color: var(--ink); }\r\n.adn-form-tag { display: inline-flex; margin-top: 6px; padding: 3px 10px; border-radius: 999px; background: var(--c-primary); color: #fff; font-size: 10px; font-weight: 600; }\r\n.pab-quest { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--ink-2); }\r\n.pab-quest strong { color: var(--ink); }\r\n\r\n.pab-right { display: flex; flex-direction: column; gap: 10px; }\r\n.pab-showcase { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-card); aspect-ratio: 16\/9; }\r\n.pab-showcase img { width: 100%; height: 100%; object-fit: cover; }\r\n\r\n\/* \u2500\u2500 Pack cards grid \u2014 3 columns \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.pack-grid {\r\n  display: grid;\r\n  grid-template-columns: repeat(3, 1fr);\r\n  gap: clamp(8px, 1vw, 14px);\r\n  margin-bottom: clamp(10px, 1.2vw, 16px);\r\n}\r\n.pack-card {\r\n  position: relative;\r\n  padding: clamp(12px, 1.2vw, 16px);\r\n  border-radius: var(--r-lg);\r\n  background: var(--card);\r\n  border: 2px solid var(--line);\r\n  box-shadow: var(--shadow-card);\r\n  cursor: pointer;\r\n  transition: border-color .3s, transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s;\r\n  display: flex; flex-direction: column;\r\n  -webkit-tap-highlight-color: transparent;\r\n  user-select: none;\r\n}\r\n.pack-card:hover { border-color: var(--line-2); transform: translateY(-3px); box-shadow: var(--shadow-deep); }\r\n.pack-card.selected { border-color: var(--c-primary); background: color-mix(in oklab, var(--c-primary) 5%, var(--card)); }\r\n.pack-card.selected::after {\r\n  content: '\u2713'; position: absolute; top: 12px; right: 14px;\r\n  width: 26px; height: 26px; border-radius: 50%;\r\n  background: var(--c-primary); color: #fff;\r\n  display: grid; place-items: center;\r\n  font-size: 13px; font-weight: 700;\r\n}\r\n\r\n.pc-badge { display: inline-flex; align-self: flex-start; padding: 3px 10px; border-radius: 999px; font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 10px; }\r\n.pc-badge.sans-adn { background: color-mix(in oklab, var(--c-quiet) 15%, var(--bg-soft)); color: var(--c-quiet); border: 1px solid color-mix(in oklab, var(--c-quiet) 30%, var(--line)); }\r\n.pc-badge.avec-adn { background: color-mix(in oklab, var(--c-primary) 12%, var(--bg-soft)); color: var(--c-primary); border: 1px solid color-mix(in oklab, var(--c-primary) 25%, var(--line)); }\r\n.pc-badge.ugc { background: color-mix(in oklab, var(--c-secondary) 12%, var(--bg-soft)); color: var(--c-secondary); border: 1px solid color-mix(in oklab, var(--c-secondary) 25%, var(--line)); }\r\n.pc-badge.avatar { background: color-mix(in oklab, var(--c-accent) 12%, var(--bg-soft)); color: var(--c-accent); border: 1px solid color-mix(in oklab, var(--c-accent) 25%, var(--line)); }\r\n\r\n.pack-card h4 { font-family: var(--font-display); font-size: clamp(20px, 2vw, 26px); line-height: 1; margin-bottom: 6px; }\r\n.pack-card .pc-price { font-family: var(--font-display); font-style: italic; font-size: clamp(30px, 2.8vw, 38px); line-height: 0.9; color: var(--c-primary); margin-bottom: 10px; }\r\n.pack-card .pc-price .pc-unit { font-size: 0.36em; color: var(--ink-3); font-family: var(--font-text); font-style: normal; }\r\n.pack-card .pc-list { list-style: none; padding: 0; margin: 0 0 12px; }\r\n.pack-card .pc-list li { font-size: 12px; color: var(--ink-2); line-height: 1.4; padding: 4px 0; border-bottom: 1px solid var(--line); display: flex; gap: 8px; align-items: flex-start; }\r\n.pack-card .pc-list li:last-child { border-bottom: none; }\r\n.pack-card .pc-list li::before { content: '\u2192'; color: var(--c-primary); font-weight: 700; flex-shrink: 0; }\r\n\r\n\/* Pack card thumbnail *\/\r\n.pc-img {\r\n  aspect-ratio: 4 \/ 3;\r\n  border-radius: var(--r-md);\r\n  overflow: hidden;\r\n  margin-bottom: 12px;\r\n  border: 1px solid var(--line);\r\n  background: var(--bg-warm);\r\n}\r\n.pc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }\r\n.pack-card:hover .pc-img img { transform: scale(1.04); }\r\n\r\n.pack-card .pc-select-label { margin-top: auto; padding: 10px 0 0; text-align: center; font-size: 12px; font-weight: 600; color: var(--c-primary); letter-spacing: 0.06em; text-transform: uppercase; border-top: 1px solid var(--line); }\r\n.pack-card.selected .pc-select-label { color: var(--c-primary); }\r\n.pack-card.selected .pc-select-label::before { content: '\u2713 '; }\r\n\r\n\/* \u2500\u2500 Multiplicateur \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.pack-multi-row {\r\n  display: flex; align-items: center; justify-content: center;\r\n  gap: 10px; margin-bottom: clamp(10px, 1.2vw, 16px);\r\n  padding: 14px 20px; border-radius: var(--r-lg);\r\n  background: var(--card); border: 1px solid var(--line);\r\n  box-shadow: var(--shadow-card);\r\n}\r\n.pack-multi-row .pm-label { font-size: 13px; color: var(--ink-2); font-weight: 500; }\r\n.pack-multi-row .pm-label strong { color: var(--ink); }\r\n.pm-btns { display: flex; gap: 4px; }\r\n.pm-btn {\r\n  width: 40px; height: 40px; border-radius: var(--r-sm);\r\n  border: 1.5px solid var(--line-2);\r\n  background: var(--bg-soft); color: var(--ink);\r\n  font-family: var(--font-display); font-style: italic;\r\n  font-size: 16px; display: grid; place-items: center;\r\n  transition: .2s;\r\n}\r\n.pm-btn:hover { border-color: var(--ink); }\r\n.pm-btn.active { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }\r\n\r\n\/* \u2500\u2500 Video add-on row \u2014 same height as pack cards \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.pack-video-label { font-size: 12px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; margin-bottom: 8px; text-align: center; }\r\n.pack-video-row {\r\n  display: grid; grid-template-columns: 1fr 1fr;\r\n  gap: clamp(8px, 1vw, 14px); margin-bottom: clamp(10px, 1.2vw, 16px);\r\n}\r\n.pv-card {\r\n  padding: clamp(18px, 2vw, 24px);\r\n  border-radius: var(--r-lg);\r\n  background: var(--card); border: 2px solid var(--line);\r\n  box-shadow: var(--shadow-card);\r\n  cursor: pointer; transition: .3s;\r\n  display: flex; flex-direction: column;\r\n  -webkit-tap-highlight-color: transparent; user-select: none;\r\n}\r\n.pv-card:hover { border-color: var(--line-2); transform: translateY(-3px); box-shadow: var(--shadow-deep); }\r\n.pv-card.selected { border-color: var(--c-primary); background: color-mix(in oklab, var(--c-primary) 5%, var(--card)); }\r\n.pv-card.locked {\r\n  opacity: 1;\r\n  pointer-events: none;\r\n  position: relative;\r\n  border-style: dashed;\r\n  border-color: color-mix(in oklab, var(--c-primary) 35%, var(--line));\r\n  background: linear-gradient(135deg, color-mix(in oklab, var(--c-primary) 4%, var(--card)), var(--card));\r\n}\r\n.pv-card .pv-badge { display: inline-flex; align-self: flex-start; padding: 3px 10px; border-radius: 999px; font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; background: color-mix(in oklab, var(--c-warm) 12%, var(--bg-soft)); color: var(--c-warm); border: 1px solid color-mix(in oklab, var(--c-warm) 25%, var(--line)); margin-bottom: 8px; }\r\n.pv-card h4 { font-family: var(--font-display); font-size: clamp(18px, 1.8vw, 22px); line-height: 1; margin-bottom: 4px; }\r\n.pv-card .pv-price { font-family: var(--font-display); font-style: italic; font-size: clamp(32px, 3vw, 44px); color: var(--c-primary); line-height: 0.9; margin-bottom: 10px; }\r\n.pv-card .pv-price .pv-plus { font-size: 0.45em; color: var(--ink-3); font-style: normal; }\r\n.pv-card .pv-price .pc-unit { font-size: 0.36em; color: var(--ink-3); font-family: var(--font-text); font-style: normal; }\r\n\/* Panoramic image \u2014 full proportion *\/\r\n.pv-card .pc-img { aspect-ratio: 21 \/ 9; border-radius: var(--r-md); overflow: hidden; margin-bottom: 10px; border: 1px solid var(--line); background: var(--bg-warm); }\r\n.pv-card .pc-img img { width: 100%; height: 100%; object-fit: cover; }\r\n.pv-card .pv-desc { font-size: 12px; color: var(--ink-2); line-height: 1.4; margin-bottom: 0; border-top: 1px solid var(--line); padding-top: 10px; }\r\n.pv-card .pv-lock-bar { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); font-size: 11px; color: var(--ink-3); }\r\n.pv-card .pv-lock-bar .lock-icon { font-size: 14px; }\r\n.pv-card.selected .pv-lock-bar { color: var(--c-primary); }\r\n.pv-card.dimmed { opacity: 0.55; filter: grayscale(0.25); pointer-events: none; }\r\n\r\n\/* Video multiplier row *\/\r\n.pack-video-multi { display: none; align-items: center; justify-content: center; gap: 14px; margin-bottom: clamp(14px, 1.6vw, 20px); padding: 10px 16px; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-card); }\r\n.pack-video-multi.show { display: flex; }\r\n.pack-video-multi .pvm-label { font-size: 12px; color: var(--ink-3); font-weight: 500; }\r\n.pack-video-multi .pvm-label strong { color: var(--ink); }\r\n\r\n\/* \u2500\u2500 Montage options row \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.pack-montage-row {\r\n  display: grid; grid-template-columns: 1fr 1fr;\r\n  gap: clamp(12px, 1.4vw, 18px);\r\n  margin-bottom: clamp(18px, 2vw, 24px);\r\n}\r\n.pmr-card {\r\n  display: flex; align-items: center; justify-content: space-between;\r\n  padding: 14px 18px;\r\n  border-radius: var(--r-lg);\r\n  background: var(--card); border: 2px solid var(--line);\r\n  box-shadow: var(--shadow-card);\r\n  cursor: pointer; transition: .3s;\r\n  -webkit-tap-highlight-color: transparent; user-select: none;\r\n}\r\n.pmr-card:hover { border-color: var(--line-2); }\r\n.pmr-card.selected { border-color: var(--c-primary); background: color-mix(in oklab, var(--c-primary) 5%, var(--card)); }\r\n.pmr-left { display: flex; align-items: center; gap: 12px; }\r\n.pmr-check {\r\n  width: 24px; height: 24px; border-radius: 50%;\r\n  border: 2px solid var(--line-2);\r\n  display: grid; place-items: center;\r\n  font-size: 12px; color: transparent;\r\n  transition: .2s; flex-shrink: 0;\r\n}\r\n.pmr-card.selected .pmr-check {\r\n  background: var(--c-primary); border-color: var(--c-primary);\r\n  color: #fff;\r\n}\r\n.pmr-card.selected .pmr-check::after { content: '\u2713'; }\r\n.pmr-card h5 { font-family: var(--font-display); font-size: 14px; line-height: 1.1; color: var(--ink); }\r\n.pmr-card p { font-size: 11px; color: var(--ink-3); margin-top: 2px; }\r\n.pmr-price { font-family: var(--font-display); font-style: italic; font-size: 22px; color: var(--c-primary); flex-shrink: 0; }\r\n\r\n@media (max-width: 820px) {\r\n  .pack-montage-row { grid-template-columns: 1fr; gap: 8px; }\r\n  .pack-video-multi { flex-wrap: wrap; justify-content: center; }\r\n  .pmr-mult .pm-btn { width: 32px; height: 32px; font-size: 12px; }\r\n}\r\n\r\n\/* \u2500\u2500 Recap bar desktop \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.pack-recap-bar {\r\n  display: flex; align-items: center; justify-content: space-between;\r\n  padding: 16px 22px; border-radius: var(--r-xl);\r\n  background: var(--bg-deep); color: var(--ink-inv);\r\n  box-shadow: var(--shadow-deep);\r\n}\r\n.pr-items { display: flex; flex-wrap: wrap; gap: 8px; }\r\n.pr-tag { padding: 4px 12px; border-radius: 999px; background: rgba(255,255,255,0.1); font-size: 12px; font-weight: 500; }\r\n.pr-total { display: flex; align-items: baseline; gap: 10px; }\r\n.pr-total .pr-amount { font-family: var(--font-display); font-style: italic; font-size: clamp(32px, 3vw, 42px); }\r\n.pr-total .pr-htva { font-size: 11px; color: rgba(255,255,255,0.5); }\r\n.pr-cta { padding: 12px 24px; border-radius: 999px; background: var(--c-primary); color: #fff; font-weight: 600; font-size: 13px; border: none; box-shadow: 0 12px 30px -10px rgba(196,75,31,0.6); transition: transform .2s; }\r\n.pr-cta:hover { transform: translateY(-2px); }\r\n.pack-recap-bar.empty {\r\n  background: linear-gradient(135deg, var(--bg-deep), color-mix(in oklab, var(--c-primary) 20%, var(--bg-deep)));\r\n  border: 2px dashed color-mix(in oklab, var(--c-primary) 40%, var(--bg-deep));\r\n}\r\n.pack-recap-bar.empty .pr-cta { pointer-events: none; opacity: 0.4; }\r\n.pack-recap-bar.empty .pr-amount { opacity: 0.4; }\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   S9 \u00b7 UGC CAPSULES \u2014 phone mockups, fluid\r\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.ugc-sec {\r\n  padding: clamp(14px, 1.5vw, 22px) 0;\r\n  border-top: 1px solid var(--line);\r\n  overflow: hidden;\r\n}\r\n.ugc-inner {\r\n  display: grid;\r\n  grid-template-columns: 1fr 1.6fr;\r\n  gap: clamp(12px, 1.5vw, 22px);\r\n  align-items: center;\r\n}\r\n.ugc-text .eyebrow { margin-bottom: 8px; }\r\n.ugc-text h2 {\r\n  font-family: var(--font-display);\r\n  font-size: clamp(28px, 2.8vw, 38px);\r\n  line-height: 0.94; margin-bottom: 12px;\r\n}\r\n.ugc-text h2 em { color: var(--c-primary); font-style: italic; }\r\n.ugc-text p {\r\n  font-size: clamp(13px, 1vw, 14.5px);\r\n  color: var(--ink-2); line-height: 1.5;\r\n  margin-bottom: 12px;\r\n}\r\n.ugc-text p strong { color: var(--ink); }\r\n.ugc-tags { display: flex; flex-wrap: wrap; gap: 6px; }\r\n.ugc-tag {\r\n  padding: 5px 12px; border-radius: 999px;\r\n  font-size: 11px; font-weight: 600; letter-spacing: 0.04em;\r\n  border: 1px solid var(--line-2); color: var(--ink-2);\r\n  background: var(--card);\r\n}\r\n\r\n\/* Phone mockups *\/\r\n.ugc-phones {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: flex-end;\r\n  gap: clamp(10px, 1.5vw, 18px);\r\n  padding: 4px 0;\r\n}\r\n.ugc-phone {\r\n  width: clamp(160px, 18vw, 210px);\r\n  aspect-ratio: 9 \/ 16;\r\n  border-radius: clamp(18px, 2.4vw, 28px);\r\n  overflow: hidden;\r\n  box-shadow: var(--shadow-deep);\r\n  border: 3px solid var(--bg-warm);\r\n  position: relative;\r\n  transition: transform .5s cubic-bezier(.2,.7,.2,1);\r\n  flex-shrink: 0;\r\n}\r\n.ugc-phone img { width: 100%; height: 100%; object-fit: cover; }\r\n.ugc-phone:hover { transform: translateY(-8px) scale(1.02); }\r\n\/* Stagger *\/\r\n.ugc-phone:nth-child(1) { transform: translateY(16px) rotate(-2deg); }\r\n.ugc-phone:nth-child(2) { transform: translateY(0); z-index: 2; }\r\n.ugc-phone:nth-child(3) { transform: translateY(12px) rotate(2deg); }\r\n.ugc-phone:nth-child(1):hover { transform: translateY(8px) rotate(-1deg) scale(1.02); }\r\n.ugc-phone:nth-child(3):hover { transform: translateY(4px) rotate(1deg) scale(1.02); }\r\n\/* Notch *\/\r\n.ugc-phone::before {\r\n  content: '';\r\n  position: absolute; top: 6px;\r\n  left: 50%; transform: translateX(-50%);\r\n  width: 36%; height: 14px;\r\n  background: var(--bg-warm);\r\n  border-radius: 0 0 10px 10px;\r\n  z-index: 3;\r\n}\r\n\r\n@media (max-width: 820px) {\r\n  .ugc-inner { grid-template-columns: 1fr; gap: 20px; }\r\n  .ugc-phones { gap: 8px; }\r\n  .ugc-phone { width: 30%; border-radius: 16px; border-width: 2px; }\r\n  .ugc-phone::before { height: 10px; }\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   S7 \u00b7 PLANS R\u00c9CURRENTS \u2014 2 cards vitrine\r\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.plans-sec {\r\n  padding: clamp(18px, 2vw, 28px) 0;\r\n  border-top: 1px solid var(--line);\r\n  background: var(--bg-deep);\r\n  color: var(--ink-inv);\r\n}\r\n.plans-head { text-align: center; margin-bottom: clamp(10px, 1.2vw, 18px); }\r\n.plans-head .eyebrow { color: rgba(255,255,255,0.4); justify-content: center; }\r\n.plans-head .eyebrow::before { background: rgba(255,255,255,0.3); }\r\n.plans-head h2 { font-family: var(--font-display); font-size: clamp(28px, 3.2vw, 42px); line-height: 0.94; color: var(--ink-inv); margin-bottom: 10px; }\r\n.plans-head h2 em { color: var(--c-primary); font-style: italic; }\r\n.plans-head p { font-size: clamp(13px, 1.1vw, 15px); color: rgba(255,255,255,0.5); max-width: 50ch; margin: 0 auto; }\r\n\r\n.plans-grid {\r\n  display: grid;\r\n  grid-template-columns: 1fr 1fr 1fr;\r\n  gap: clamp(10px, 1.2vw, 16px);\r\n}\r\n.plan-card {\r\n  border-radius: var(--r-xl);\r\n  overflow: hidden;\r\n  background: rgba(255,255,255,0.04);\r\n  border: 1px solid rgba(255,255,255,0.10);\r\n  backdrop-filter: blur(8px);\r\n  display: flex; flex-direction: column;\r\n  transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s;\r\n}\r\n.plan-card:hover {\r\n  transform: translateY(-4px);\r\n  box-shadow: 0 32px 80px -20px rgba(196,75,31,0.25);\r\n}\r\n.plan-img {\r\n  aspect-ratio: 16 \/ 10;\r\n  overflow: hidden;\r\n}\r\n.plan-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }\r\n.plan-card:hover .plan-img img { transform: scale(1.04); }\r\n\r\n.plan-body {\r\n  padding: clamp(10px, 1.2vw, 16px);\r\n  display: flex; flex-direction: column; gap: 8px; flex: 1;\r\n}\r\n.plan-badge {\r\n  display: inline-flex; align-self: flex-start;\r\n  padding: 3px 10px; border-radius: 999px;\r\n  font-size: 9px; font-weight: 600; letter-spacing: 0.08em;\r\n  text-transform: uppercase;\r\n  background: rgba(196,75,31,0.2); color: var(--c-primary);\r\n  border: 1px solid rgba(196,75,31,0.3);\r\n}\r\n.plan-body h3 { font-family: var(--font-display); font-size: clamp(18px, 1.8vw, 24px); line-height: 1; }\r\n.plan-price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }\r\n.plan-price .pp-amount { font-family: var(--font-display); font-style: italic; font-size: clamp(28px, 2.5vw, 36px); color: var(--c-primary); line-height: 0.9; }\r\n.plan-price .pp-unit { font-size: 12px; color: rgba(255,255,255,0.4); }\r\n.plan-price .pp-annual { font-size: 11px; color: rgba(255,255,255,0.35); }\r\n\r\n.plan-list { list-style: none; padding: 0; margin: 0; }\r\n.plan-list li { font-size: 11.5px; color: rgba(255,255,255,0.55); line-height: 1.35; padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,0.06); display: flex; gap: 6px; }\r\n.plan-list li:last-child { border-bottom: none; }\r\n.plan-list li::before { content: '\u2192'; color: var(--c-primary); font-weight: 700; flex-shrink: 0; }\r\n\r\n.plan-cta {\r\n  margin-top: auto; padding-top: 10px;\r\n  display: inline-flex; align-items: center; justify-content: center;\r\n  padding: 10px 20px; border-radius: 999px;\r\n  background: var(--c-primary); color: #fff;\r\n  font-weight: 600; font-size: 12px;\r\n  border: none; text-decoration: none;\r\n  box-shadow: 0 12px 30px -10px rgba(196,75,31,0.5);\r\n  transition: transform .2s;\r\n}\r\n.plan-cta:hover { transform: translateY(-2px); }\r\n\r\n\/* \u2500\u2500 3rd column \u2014 stacked showcase images \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.plan-showcase {\r\n  border-radius: var(--r-xl);\r\n  overflow: hidden;\r\n  background: rgba(255,255,255,0.04);\r\n  border: 1px solid rgba(255,255,255,0.10);\r\n  display: flex; flex-direction: column; gap: 0;\r\n  transition: transform .4s cubic-bezier(.2,.7,.2,1);\r\n}\r\n.plan-showcase:hover { transform: translateY(-4px); }\r\n.plan-showcase .ps-img {\r\n  aspect-ratio: 16 \/ 9;\r\n  overflow: hidden;\r\n  border-bottom: 1px solid rgba(255,255,255,0.06);\r\n}\r\n.plan-showcase .ps-img:last-child { border-bottom: none; }\r\n.plan-showcase .ps-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }\r\n.plan-showcase:hover .ps-img img { transform: scale(1.03); }\r\n\r\n@media (max-width: 820px) {\r\n  .plans-grid { grid-template-columns: 1fr; gap: 14px; }\r\n  .plan-img { aspect-ratio: 16 \/ 9; }\r\n  .plan-card { max-height: 90vh; overflow-y: auto; }\r\n  .plan-showcase { flex-direction: row; }\r\n  .plan-showcase .ps-img { aspect-ratio: 1\/1; flex: 1; border-bottom: none; border-right: 1px solid rgba(255,255,255,0.06); }\r\n  .plan-showcase .ps-img:last-child { border-right: none; }\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   S10 \u00b7 PORTFOLIO \u2014 strip + accordion gallery\r\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.portfolio-sec {\r\n  padding: clamp(16px, 1.5vw, 24px) 0;\r\n  border-top: 1px solid var(--line);\r\n  overflow: hidden;\r\n}\r\n.portfolio-head { margin-bottom: clamp(8px, 1vw, 12px); }\r\n.portfolio-head .eyebrow { margin-bottom: 6px; }\r\n.portfolio-head h2 { font-family: var(--font-display); font-size: clamp(26px, 2.8vw, 38px); line-height: 0.94; }\r\n.portfolio-head h2 em { color: var(--c-primary); font-style: italic; }\r\n\r\n\/* Strip \u2014 horizontal scroll *\/\r\n.pf-strip {\r\n  display: flex; gap: 10px;\r\n  overflow-x: auto; overflow-y: hidden;\r\n  padding: 4px 0 14px;\r\n  scroll-snap-type: x mandatory;\r\n  -webkit-overflow-scrolling: touch;\r\n  scrollbar-width: none;\r\n}\r\n.pf-strip::-webkit-scrollbar { display: none; }\r\n.pf-strip-item {\r\n  flex-shrink: 0;\r\n  width: clamp(110px, 12vw, 150px);\r\n  aspect-ratio: 1 \/ 1;\r\n  border-radius: var(--r-lg);\r\n  overflow: hidden;\r\n  border: 1px solid var(--line);\r\n  box-shadow: var(--shadow-card);\r\n  scroll-snap-align: start;\r\n  transition: transform .4s cubic-bezier(.2,.7,.2,1);\r\n}\r\n.pf-strip-item:hover { transform: scale(1.03); z-index: 2; }\r\n.pf-strip-item img { width: 100%; height: 100%; object-fit: cover; }\r\n\r\n\/* Accordion toggle *\/\r\n.pf-toggle {\r\n  display: flex; align-items: center; justify-content: center; gap: 10px;\r\n  margin: 16px auto 0; padding: 10px 24px;\r\n  border-radius: 999px; border: 1.5px solid var(--line-2);\r\n  background: var(--card); color: var(--ink-2);\r\n  font-family: var(--font-display); font-size: 14px;\r\n  cursor: pointer; transition: .2s;\r\n}\r\n.pf-toggle:hover { border-color: var(--c-primary); color: var(--c-primary); }\r\n.pf-toggle .pf-chev { transition: transform .3s; font-size: 12px; }\r\n.pf-toggle.open .pf-chev { transform: rotate(180deg); }\r\n\r\n\/* Gallery accordion *\/\r\n.pf-gallery {\r\n  max-height: 0; overflow: hidden; opacity: 0;\r\n  transition: max-height .6s cubic-bezier(.2,.7,.2,1), opacity .4s, margin .3s;\r\n  margin-top: 0;\r\n}\r\n.pf-gallery.open {\r\n  max-height: 3000px; opacity: 1;\r\n  margin-top: 18px;\r\n}\r\n.pf-grid {\r\n  display: grid;\r\n  grid-template-columns: repeat(5, 1fr);\r\n  grid-auto-rows: clamp(80px, 9vw, 110px);\r\n  gap: 8px;\r\n}\r\n.pf-cell {\r\n  border-radius: var(--r-md);\r\n  overflow: hidden;\r\n  border: 1px solid var(--line);\r\n  box-shadow: var(--shadow-card);\r\n  transition: transform .4s cubic-bezier(.2,.7,.2,1);\r\n}\r\n.pf-cell:hover { transform: scale(1.02); z-index: 2; }\r\n.pf-cell img { width: 100%; height: 100%; object-fit: cover; }\r\n\/* Feature cells \u2014 span 2 *\/\r\n.pf-cell.wide { grid-column: span 2; }\r\n.pf-cell.tall { grid-row: span 2; }\r\n\r\n\/* Portrait row \u2014 vertical images *\/\r\n.pf-portrait-row {\r\n  display: flex; gap: 8px;\r\n  overflow-x: auto; overflow-y: hidden;\r\n  padding: 8px 0;\r\n  scroll-snap-type: x mandatory;\r\n  -webkit-overflow-scrolling: touch;\r\n  scrollbar-width: none;\r\n}\r\n.pf-portrait-row::-webkit-scrollbar { display: none; }\r\n.pf-portrait-item {\r\n  flex-shrink: 0;\r\n  width: clamp(100px, 11vw, 140px);\r\n  aspect-ratio: 9 \/ 16;\r\n  border-radius: var(--r-lg);\r\n  overflow: hidden;\r\n  border: 1px solid var(--line);\r\n  box-shadow: var(--shadow-card);\r\n  scroll-snap-align: start;\r\n  transition: transform .4s cubic-bezier(.2,.7,.2,1);\r\n}\r\n.pf-portrait-item:hover { transform: scale(1.03); z-index: 2; }\r\n.pf-portrait-item img { width: 100%; height: 100%; object-fit: cover; }\r\n\r\n.pf-section-label {\r\n  font-size: 10px; color: var(--ink-3); text-transform: uppercase;\r\n  letter-spacing: 0.1em; font-weight: 600; margin: 12px 0 4px; padding-left: 2px;\r\n}\r\n\r\n@media (max-width: 820px) {\r\n  .pf-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 110px; }\r\n  .pf-strip-item { width: 120px; }\r\n}\r\n\r\n\r\n\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   S12 \u00b7 CONTACT + FOOTER\r\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.contact-sec {\r\n  padding: clamp(18px, 2vw, 28px) 0;\r\n  background: var(--bg-deep);\r\n  color: var(--ink-inv);\r\n  border-top: 1px solid rgba(255,255,255,0.06);\r\n}\r\n.contact-grid {\r\n  display: grid;\r\n  grid-template-columns: 0.7fr 1.3fr;\r\n  gap: clamp(12px, 1.2vw, 20px);\r\n  align-items: center;\r\n}\r\n.contact-img {\r\n  max-width: 320px;\r\n  justify-self: center;\r\n  filter: drop-shadow(0 32px 60px rgba(0,0,0,0.5));\r\n  transition: transform .6s cubic-bezier(.2,.7,.2,1);\r\n}\r\n.contact-img:hover { transform: translateY(-8px) scale(1.02) rotate(-1deg); }\r\n.contact-img img { width: 100%; height: auto; }\r\n.contact-body { display: flex; flex-direction: column; gap: 14px; }\r\n.contact-body .eyebrow { color: rgba(255,255,255,0.35); }\r\n.contact-body .eyebrow::before { background: rgba(255,255,255,0.25); }\r\n.contact-body h2 { font-family: var(--font-display); font-size: clamp(26px, 2.8vw, 36px); line-height: 0.94; color: var(--ink-inv); }\r\n.contact-body h2 em { color: var(--c-primary); font-style: italic; }\r\n.contact-hook { font-size: clamp(14px, 1.2vw, 17px); line-height: 1.5; color: rgba(255,255,255,0.65); max-width: 48ch; }\r\n.contact-hook strong { color: #fff; }\r\n.contact-hook em { font-style: italic; color: var(--c-primary); font-family: var(--font-display); font-size: 1.1em; }\r\n.contact-cta-row { display: flex; flex-wrap: wrap; gap: 10px; }\r\n.contact-cta { display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px; border-radius: 999px; font-weight: 600; font-size: 13.5px; border: none; text-decoration: none; transition: transform .2s, box-shadow .3s; }\r\n.contact-cta.primary { background: var(--c-primary); color: #fff; box-shadow: 0 16px 40px -12px rgba(196,75,31,0.5); }\r\n.contact-cta.primary:hover { transform: translateY(-2px); }\r\n.contact-cta.whatsapp { background: #25d366; color: #fff; box-shadow: 0 16px 40px -12px rgba(37,211,102,0.35); }\r\n.contact-cta.whatsapp:hover { transform: translateY(-2px); }\r\n.contact-infos { display: flex; flex-wrap: wrap; gap: 18px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.08); }\r\n.ci-item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(255,255,255,0.45); }\r\n.ci-item .ci-icon { font-size: 15px; }\r\n.ci-item a { color: rgba(255,255,255,0.65); text-decoration: none; transition: color .2s; }\r\n.ci-item a:hover { color: #fff; }\r\n.site-footer { border-top: 1px solid rgba(255,255,255,0.06); background: var(--bg-deep); color: rgba(255,255,255,0.3); padding: 18px 0; text-align: center; font-size: 11px; letter-spacing: 0.06em; }\r\n.site-footer strong { color: rgba(255,255,255,0.5); }\r\n.site-footer .wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; }\r\n\r\n\/* \u2500\u2500 CGV button + modal \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.cgv-btn {\r\n  display: inline-flex; align-items: center; gap: 8px;\r\n  padding: 9px 18px; border-radius: 999px;\r\n  background: color-mix(in oklab, var(--c-primary) 14%, transparent);\r\n  border: 1px solid color-mix(in oklab, var(--c-primary) 40%, transparent);\r\n  color: var(--c-primary); font-family: var(--font-text); font-size: 12px; font-weight: 600;\r\n  letter-spacing: 0.04em; cursor: pointer; transition: all .2s;\r\n}\r\n.cgv-btn:hover { background: color-mix(in oklab, var(--c-primary) 24%, transparent); transform: translateY(-1px); }\r\n\r\n.cgv-overlay {\r\n  position: fixed; inset: 0; z-index: 999;\r\n  background: rgba(8,6,16,0.72); backdrop-filter: blur(4px);\r\n  display: none; align-items: center; justify-content: center; padding: 20px;\r\n}\r\n.cgv-overlay.open { display: flex; }\r\n.cgv-modal {\r\n  width: min(760px, 100%); max-height: 86vh; overflow-y: auto;\r\n  background: var(--bg-warm); border: 1px solid var(--line-2); border-radius: var(--r-xl);\r\n  box-shadow: var(--shadow-deep); padding: 0;\r\n}\r\n.cgv-modal-head {\r\n  position: sticky; top: 0; z-index: 2;\r\n  display: flex; align-items: center; justify-content: space-between;\r\n  padding: 22px 28px; background: var(--bg-warm); border-bottom: 1px solid var(--line);\r\n}\r\n.cgv-modal-head h3 { font-family: var(--font-display); font-size: 24px; font-weight: 400; color: var(--ink); margin: 0; }\r\n.cgv-modal-head p { font-size: 12px; color: var(--ink-3); margin: 4px 0 0; }\r\n.cgv-close {\r\n  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-2);\r\n  background: var(--card); color: var(--ink-2); font-size: 16px; cursor: pointer; flex-shrink: 0;\r\n  display: flex; align-items: center; justify-content: center; transition: all .2s;\r\n}\r\n.cgv-close:hover { background: var(--c-primary); color: #1a0f22; border-color: var(--c-primary); }\r\n.cgv-body { padding: 8px 28px 28px; }\r\n.cgv-sec { border-top: 1px solid var(--line); padding: 18px 0; }\r\n.cgv-sec:first-child { border-top: none; }\r\n.cgv-sec-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }\r\n.cgv-sec-ico {\r\n  width: 32px; height: 32px; border-radius: 10px; flex-shrink: 0;\r\n  display: flex; align-items: center; justify-content: center; font-size: 15px;\r\n  background: color-mix(in oklab, var(--c-primary) 14%, transparent);\r\n}\r\n.cgv-sec h4 { font-family: var(--font-display); font-size: 17px; font-weight: 400; color: var(--ink); margin: 0; }\r\n.cgv-sec p, .cgv-sec li { font-size: 13px; line-height: 1.65; color: var(--ink-2); }\r\n.cgv-sec ul { margin: 6px 0 0; padding-left: 0; list-style: none; }\r\n.cgv-sec li { padding: 4px 0 4px 20px; position: relative; }\r\n.cgv-sec li::before { content: '\u2192'; position: absolute; left: 0; color: var(--c-primary); font-weight: 700; }\r\n.cgv-badge-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }\r\n.cgv-mini-badge {\r\n  font-size: 11px; font-weight: 600; padding: 5px 11px; border-radius: 999px;\r\n  background: var(--card); border: 1px solid var(--line-2); color: var(--ink-2);\r\n}\r\n@media (max-width: 640px) {\r\n  .cgv-modal-head, .cgv-body { padding-left: 18px; padding-right: 18px; }\r\n}\r\n@media (max-width: 820px) {\r\n  .contact-grid { grid-template-columns: 1fr; text-align: center; }\r\n  .contact-img { max-width: 200px; margin: 0 auto; }\r\n  .contact-body { align-items: center; }\r\n  .contact-hook { text-align: center; }\r\n  .contact-cta-row { justify-content: center; }\r\n  .contact-infos { justify-content: center; }\r\n}\r\n\r\n@keyframes pulse-tag {\r\n  0%, 100% { opacity: 0.6; }\r\n  50% { opacity: 1; }\r\n}\r\n\r\n\/* \u2500\u2500 Mobile bottom bar (fixed) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.pack-bottom-mobile {\r\n  display: none;\r\n  \/* Shown via .visible class on ALL screen sizes *\/\r\n  position: fixed; bottom: 0; left: 0; right: 0;\r\n  z-index: 40;\r\n  padding: 10px 18px calc(10px + var(--safe-bottom));\r\n  background: color-mix(in oklab, var(--bg-deep) 96%, transparent);\r\n  -webkit-backdrop-filter: blur(20px);\r\n  backdrop-filter: blur(20px);\r\n  border-top: 1px solid rgba(255,255,255,0.08);\r\n  box-shadow: 0 -12px 40px rgba(0,0,0,0.3);\r\n}\r\n.pack-bottom-mobile.visible { display: flex; align-items: center; gap: 12px; }\r\n.pbm-info { flex: 1; min-width: 0; }\r\n.pbm-info .pbm-label { font-size: 11px; color: rgba(255,255,255,0.5); letter-spacing: 0.06em; text-transform: uppercase; }\r\n.pbm-info .pbm-total { font-family: var(--font-display); font-style: italic; font-size: 28px; color: #fff; }\r\n.pbm-cta { padding: 12px 20px; border-radius: 999px; background: var(--c-primary); color: #fff; font-weight: 600; font-size: 13px; border: none; white-space: nowrap; }\r\n\r\n\/* \u2500\u2500 Mobile \u2014 pack cards max 90vh \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n@media (max-width: 820px) {\r\n  .pack-adn-banner { grid-template-columns: 1fr; }\r\n  .pack-grid { grid-template-columns: 1fr; gap: 10px; }\r\n  .pack-card { max-height: 90vh; overflow-y: auto; }\r\n  .pack-video-row { grid-template-columns: 1fr; gap: 10px; }\r\n  \/* recap bar hidden globally now *\/\r\n  .pack-multi-row { flex-wrap: wrap; justify-content: center; }\r\n  .pab-showcase { aspect-ratio: 16\/10; }\r\n}\r\n\r\n\r\n\/* \u2500\u2500 Image cropping fixes \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.m-step.s3 .m-thumb img { object-position: center 15%; }\r\n.m-step.s4 .m-thumb img { object-position: center 20%; }\r\n.plan-showcase .ps-img:nth-child(1) img { object-position: center 25%; }\r\n.plan-showcase .ps-img:nth-child(2) img { object-position: center 62%; }\r\n.plan-showcase .ps-img:nth-child(3) img { object-position: center 75%; }\r\n\r\n@media (max-width: 820px) {\r\n  .hero-grid {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 0;\r\n  }\r\n  \/* Break the col wrapper so its children become flex items of .hero-grid *\/\r\n  .hero-col-text { display: contents; }\r\n  \/* Order: sticker \u2192 title \u2192 MOSAIC \u2192 lead \u2192 manifesto \u2192 ctas \u2192 meta *\/\r\n  .hero-col-text .sticker         { order: 1; margin-bottom: 12px; }\r\n  .hero-col-text h1.display       { order: 2; margin-bottom: 18px; }\r\n  .hero-mosaic-wrap               { order: 3; margin: 0 0 18px; }\r\n  .hero-col-text p.lead           { order: 4; margin-bottom: 14px; }\r\n  .hero-col-text .hero-manifesto  { order: 5; margin-bottom: 22px; }\r\n  .hero-col-text .hero-ctas       { order: 6; margin-bottom: 20px; }\r\n  .hero-col-text .hero-meta       { order: 7; }\r\n  .hero-mosaic { max-width: none; }\r\n}\r\n\r\n@media (max-width: 720px) {\r\n  h1.display { font-size: clamp(44px, 13vw, 60px); }\r\n  .hero { padding: 16px 0 12px; }\r\n  .hero-col-text p.lead { font-size: 14.5px; }\r\n  .hero-manifesto {\r\n    padding: 14px 16px;\r\n    border-left-width: 3px;\r\n    margin-left: 0;\r\n  }\r\n  .hero-manifesto .hm-line { font-size: 18px; line-height: 1.3; }\r\n  .hero-manifesto .hm-small { font-size: 10.5px; padding: 2px 8px; }\r\n  .hero-floating-tag {\r\n    font-size: 13px;\r\n    padding: 7px 13px;\r\n  }\r\n  .hero-ctas .btn {\r\n    flex: 1;\r\n    justify-content: center;\r\n    padding: 12px 18px;\r\n    font-size: 13.5px;\r\n  }\r\n  \/* Mosaic edge-to-edge \u2014 break out of wrap padding *\/\r\n  .hero-mosaic-wrap {\r\n    margin-left: -18px !important;\r\n    margin-right: -18px !important;\r\n    width: calc(100% + 36px);\r\n  }\r\n  .hero-mosaic {\r\n    gap: 6px;\r\n    padding: 0 6px;\r\n  }\r\n  \/* Cancel desktop offsets on mobile \u2014 clean 2x2 *\/\r\n  .hm-card,\r\n  .hm-card.hm-a,\r\n  .hm-card.hm-b,\r\n  .hm-card.hm-c,\r\n  .hm-card.hm-d { transform: none !important; border-radius: 10px; }\r\n  .hm-card:hover { transform: none !important; }\r\n\r\n  .marquee {\r\n    margin-top: 22px;\r\n    padding: 12px 0;\r\n  }\r\n  .marquee-track { gap: 28px; font-size: 18px; }\r\n}\r\n\r\n\/* Very small screens *\/\r\n@media (max-width: 380px) {\r\n  h1.display { font-size: 42px; line-height: 0.95; }\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   FOOTER (chrome minimal \u2014 version finale en S13)\r\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.site-footer-stub {\r\n  border-top: 1px solid var(--line);\r\n  padding: 28px 0;\r\n  margin-top: 64px;\r\n  text-align: center;\r\n  font-size: 12px;\r\n  color: var(--ink-3);\r\n  letter-spacing: 0.06em;\r\n}\r\n.site-footer-stub strong { color: var(--ink-2); }\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   PREVIEW LABEL (sera retir\u00e9 du fichier final)\r\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.preview-bar {\r\n  position: fixed; top: 50%; right: 0;\r\n  transform: translateY(-50%) rotate(-90deg);\r\n  transform-origin: right center;\r\n  background: var(--c-accent); color: #1c1610;\r\n  padding: 6px 14px;\r\n  font-size: 10px; font-weight: 700; letter-spacing: 0.14em;\r\n  text-transform: uppercase;\r\n  z-index: 100;\r\n  border-radius: 0 0 8px 8px;\r\n  pointer-events: none;\r\n  box-shadow: 0 8px 24px -8px rgba(0,0,0,0.3);\r\n}\r\n@media (max-width: 720px) { .preview-bar { display: none; } }\r\n\/* \u2500\u2500 Theme Toggle Widget \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.theme-toggle{display:flex;gap:5px;align-items:center;justify-content:center;margin:0 auto;padding:6px 10px;border-radius:30px;background:var(--card);box-shadow:var(--shadow-card);border:1px solid var(--line);width:fit-content;position:relative;z-index:10;margin-bottom:8px;}\r\n.tt-dot{width:22px;height:22px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:all .3s ease;padding:0;position:relative;}\r\n.tt-dot::after{content:'';position:absolute;inset:2px;border-radius:50%;}\r\n.tt-atelier::after{background:linear-gradient(135deg,#efe6d3 40%,#c44b1f);}\r\n.tt-dark::after{background:linear-gradient(135deg,#18142a 40%,#c76adf);}\r\n.tt-dot.is-active{border-color:var(--c-primary);transform:scale(1.18);}\r\n.tt-dot:hover:not(.is-active){transform:scale(1.1);opacity:.85;}\r\n\r\n\/* \u2500\u2500 THEME DARK (\"Nuit\") \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n[data-theme=\"atelier\"]{\r\n  --bg: #efe6d3;\r\n  --bg-soft: #f5ecdb;\r\n  --bg-warm: #e8dcc4;\r\n  --bg-deep: #1c1610;\r\n  --ink: #1c1610;\r\n  --ink-2: #5a4d3a;\r\n  --ink-3: #8c7e64;\r\n  --ink-inv: #f7eedd;\r\n  --line: rgba(28, 22, 16, 0.12);\r\n  --line-2: rgba(28, 22, 16, 0.22);\r\n  --card: rgba(255, 250, 240, 0.55);\r\n  --card-deep: rgba(28, 22, 16, 0.04);\r\n  --c-primary: #c44b1f;\r\n  --c-secondary: #4a6741;\r\n  --c-accent: #d4a017;\r\n  --c-quiet: #6b8b9e;\r\n  --c-warm: #b85735;\r\n  --shadow-card: 0 1px 0 rgba(255,255,255,0.4) inset, 0 24px 60px -28px rgba(28,22,16,0.20), 0 8px 24px -12px rgba(28,22,16,0.15);\r\n  --shadow-deep: 0 50px 110px -40px rgba(28,22,16,0.35), 0 22px 60px -30px rgba(28,22,16,0.25);\r\n}\r\n[data-theme=\"atelier\"] .method-sec{background:linear-gradient(165deg,#1e1a38 0%,#16123a 50%,#100e2e 100%);}\r\n[data-theme=\"atelier\"] .contact-sec{background:var(--bg-deep);border-top-color:rgba(180,160,230,0.08);}\r\n[data-theme=\"atelier\"] .site-footer{background:var(--bg-deep);border-top-color:rgba(180,160,230,0.06);}\r\n[data-theme=\"atelier\"] .hero-mosaic .tag{background:rgba(14,11,24,0.82);color:var(--ink-inv);}\r\n[data-theme=\"atelier\"] .hm-card .cap{background:rgba(14,11,24,0.82);color:#f0ecf8;}\r\n[data-theme=\"atelier\"] .btn.brand{background:var(--c-primary);border-color:var(--c-primary);box-shadow:0 18px 36px -16px rgba(199,106,223,0.5);}\r\n[data-theme=\"atelier\"] .btn.brand:hover{box-shadow:0 26px 50px -16px rgba(199,106,223,0.65);}\r\n[data-theme=\"atelier\"] .contact-cta.primary{background:var(--c-primary);box-shadow:0 16px 40px -12px rgba(199,106,223,0.45);}\r\n[data-theme=\"atelier\"] .nav-cta{background:var(--c-primary)!important;color:#fff!important;}\r\n[data-theme=\"atelier\"] .badge-act{background:var(--c-accent);color:var(--bg-deep);}\r\n\r\n\/* \u2500\u2500 THEME BLUE (\"Bleu\") \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n\r\n\/* \u2500\u2500 THEME BLANC (\"Blanc\") \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n\r\n\r\n\r\n\/* MODULE COM IA *\/\r\n.module-ia-sec {\r\n  background: #0b1d22;\r\n  padding: clamp(18px, 2vw, 28px) 0;\r\n  position: relative;\r\n  overflow: hidden;\r\n}\r\n.module-ia-head { text-align: center; margin-bottom: clamp(10px, 1.2vw, 18px); }\r\n.module-ia-head .eyebrow { color: rgba(255,255,255,0.4); justify-content: center; }\r\n.module-ia-head .eyebrow::before { background: rgba(255,255,255,0.3); }\r\n.module-ia-head h2 { font-family: var(--font-display); font-size: clamp(28px, 3.2vw, 42px); line-height: 0.94; color: var(--ink-inv); margin-bottom: 10px; }\r\n.module-ia-head h2 em { color: var(--c-primary); font-style: italic; }\r\n\r\n\/* HERO GRID : image + autonomy *\/\r\n.mia-hero-grid {\r\n  display: grid;\r\n  grid-template-columns: 1.1fr 1fr;\r\n  gap: clamp(12px, 1.2vw, 20px);\r\n  align-items: center;\r\n  margin-bottom: clamp(10px, 1.2vw, 18px);\r\n}\r\n.module-ia-visual img {\r\n  width: 100%;\r\n  border-radius: var(--r-lg);\r\n  box-shadow: 0 8px 32px rgba(0,0,0,.4);\r\n}\r\n\r\n\/* Autonomy column *\/\r\n.mia-autonomy {\r\n  color: var(--ink-inv);\r\n}\r\n.mia-badge {\r\n  display: inline-block;\r\n  background: var(--c-primary);\r\n  color: #fff;\r\n  font-family: var(--font-text);\r\n  font-size: 11px;\r\n  font-weight: 600;\r\n  text-transform: uppercase;\r\n  letter-spacing: .08em;\r\n  padding: 5px 14px;\r\n  border-radius: 20px;\r\n  margin-bottom: 16px;\r\n}\r\n.mia-autonomy h3 {\r\n  font-family: var(--font-display);\r\n  font-size: clamp(30px, 3vw, 42px);\r\n  font-weight: 700;\r\n  line-height: 1.1;\r\n  margin-bottom: 14px;\r\n}\r\n.mia-autonomy h3 em { color: var(--c-primary); font-style: italic; }\r\n.mia-auto-lead {\r\n  font-size: clamp(13px, 1vw, 15px);\r\n  color: rgba(255,255,255,.6);\r\n  line-height: 1.65;\r\n  margin-bottom: 20px;\r\n}\r\n.mia-auto-lead strong { color: var(--c-accent); font-weight: 600; }\r\n.mia-checklist {\r\n  list-style: none;\r\n  padding: 0;\r\n  margin: 0;\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 10px;\r\n}\r\n.mia-checklist li {\r\n  font-size: clamp(12.5px, 0.95vw, 14px);\r\n  color: rgba(255,255,255,.7);\r\n  line-height: 1.5;\r\n  display: flex;\r\n  align-items: flex-start;\r\n  gap: 10px;\r\n}\r\n.mia-check {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  min-width: 22px;\r\n  height: 22px;\r\n  border-radius: 50%;\r\n  background: var(--c-secondary);\r\n  color: #fff;\r\n  font-size: 12px;\r\n  font-weight: 700;\r\n  flex-shrink: 0;\r\n}\r\n\r\n\/* 4 FEATURES ROW *\/\r\n.mia-features-row {\r\n  display: grid;\r\n  grid-template-columns: repeat(4, 1fr);\r\n  gap: 16px;\r\n}\r\n.mia-card {\r\n  background: rgba(255,255,255,.04);\r\n  border: 1px solid rgba(255,255,255,.08);\r\n  border-radius: var(--r-md);\r\n  padding: clamp(16px, 2vw, 24px);\r\n  transition: border-color .3s, transform .3s;\r\n}\r\n.mia-card:hover { border-color: var(--c-primary); transform: translateY(-2px); }\r\n.mia-icon { font-size: 24px; margin-bottom: 8px; }\r\n.mia-card h4 {\r\n  font-family: var(--font-display);\r\n  font-size: clamp(15px, 1.2vw, 19px);\r\n  color: var(--ink-inv);\r\n  margin-bottom: 6px;\r\n}\r\n.mia-card p {\r\n  font-size: clamp(12px, 0.9vw, 13.5px);\r\n  color: rgba(255,255,255,.5);\r\n  line-height: 1.5;\r\n}\r\n.mia-card p em { color: var(--c-primary); font-style: italic; }\r\n\r\n@media (max-width: 900px) {\r\n  .mia-hero-grid { grid-template-columns: 1fr; }\r\n  .mia-features-row { grid-template-columns: 1fr 1fr; }\r\n}\r\n@media (max-width: 560px) {\r\n  .mia-features-row { grid-template-columns: 1fr; }\r\n}\r\n\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 HERO BANNER (photo groupe) \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.hero-banner{\r\n  position:relative;\r\n  width:100%;\r\n  max-width:1480px;\r\n  margin:0 auto;\r\n  border-radius:28px;\r\n  overflow:hidden;\r\n  isolation:isolate;\r\n  box-shadow:var(--shadow-deep, 0 50px 110px -40px rgba(0,0,0,0.7),0 22px 60px -30px rgba(0,0,0,0.5));\r\n  min-height:620px;\r\n}\r\n.hero-banner picture{\r\n  position:absolute; inset:0;\r\n  width:100%; height:100%;\r\n  z-index:0;\r\n  display:block;\r\n  overflow:hidden;\r\n}\r\n.hero-banner .bg-photo{\r\n  position:absolute; inset:0;\r\n  width:100%; height:100%;\r\n  object-fit:cover;\r\n  object-position:56% 34%;\r\n  z-index:0;\r\n}\r\n.hero-banner .bg-veil{\r\n  position:absolute; inset:0; z-index:1;\r\n  opacity:0.50;\r\n  background:\r\n    linear-gradient(100deg,\r\n      rgba(8,6,16,0.94) 0%,\r\n      rgba(8,6,16,0.86) 24%,\r\n      rgba(8,6,16,0.55) 42%,\r\n      rgba(8,6,16,0.18) 58%,\r\n      rgba(8,6,16,0.08) 100%),\r\n    linear-gradient(180deg,\r\n      rgba(8,6,16,0.15) 0%,\r\n      rgba(8,6,16,0) 30%,\r\n      rgba(8,6,16,0) 70%,\r\n      rgba(8,6,16,0.55) 100%);\r\n}\r\n.hero-banner .bg-glow{\r\n  position:absolute; inset:0; z-index:1; pointer-events:none;\r\n  background:\r\n    radial-gradient(ellipse 60% 50% at 8% 15%, color-mix(in oklab, var(--c-primary) 22%, transparent) 0%, transparent 65%),\r\n    radial-gradient(ellipse 45% 40% at 95% 90%, color-mix(in oklab, var(--c-accent) 14%, transparent) 0%, transparent 70%);\r\n  mix-blend-mode:screen;\r\n  opacity:0.55;\r\n}\r\n.hero-banner .hb-content{\r\n  position:relative; z-index:2;\r\n  padding: 40px clamp(28px, 5vw, 64px) 24px;\r\n  max-width:620px;\r\n  display:flex; flex-direction:column;\r\n}\r\n.hero-banner .sticker{\r\n  display:inline-flex; align-self:flex-start;\r\n  font-size:11px; font-weight:600; letter-spacing:0.14em;\r\n  text-transform:uppercase; color:var(--ink);\r\n  padding:7px 14px;\r\n  border-radius:999px;\r\n  background: color-mix(in oklab, var(--c-primary) 30%, rgba(20,16,34,0.7));\r\n  border:1px solid color-mix(in oklab, var(--c-primary) 45%, var(--line));\r\n  margin-bottom:20px;\r\n  backdrop-filter: blur(6px);\r\n}\r\n.hero-banner h1.display{\r\n  font-family:var(--font-display);\r\n  font-weight:400;\r\n  letter-spacing:-0.02em;\r\n  line-height:0.96;\r\n  font-size: clamp(38px, 5.6vw, 64px);\r\n  color:var(--ink);\r\n  margin-bottom:22px;\r\n  text-shadow: 0 4px 30px rgba(0,0,0,0.5);\r\n}\r\n.hero-banner h1.display em{ font-style:italic; color:var(--c-primary); }\r\n.hero-banner h1.display .line{ display:block; }\r\n.hero-banner h1.display .indent{ padding-left:clamp(10px,3vw,48px); }\r\n\r\n.hero-banner p.lead{\r\n  font-size:16px; line-height:1.6;\r\n  color:var(--ink-2);\r\n  margin-top:105px;\r\n  margin-bottom:18px;\r\n  max-width:520px;\r\n  text-shadow: 0 2px 16px rgba(0,0,0,0.4);\r\n}\r\n\/* Encadr\u00e9 lead (barre magenta + fond d\u00e9grad\u00e9 + blur) \u2014 m\u00eame signature que le manifeste, activ\u00e9 sur mobile *\/\r\n@media (max-width:760px){\r\n  .hero-banner p.lead{\r\n    padding:12px 15px;\r\n    margin-bottom:12px;\r\n    border-left:3px solid var(--c-primary);\r\n    border-radius:0 var(--r-md) var(--r-md) 0;\r\n    background:linear-gradient(90deg, rgba(20,16,34,0.72) 0%, rgba(20,16,34,0.35) 100%);\r\n    backdrop-filter: blur(4px);\r\n    font-size:14.5px;\r\n  }\r\n}\r\n.hero-banner p.lead strong{ color:var(--ink); font-weight:600; }\r\n\r\n.hero-banner .hero-manifesto{\r\n  margin-bottom:26px;\r\n  padding:16px 20px;\r\n  border-left:3px solid var(--c-primary);\r\n  border-radius:0 var(--r-md) var(--r-md) 0;\r\n  background: linear-gradient(90deg, rgba(20,16,34,0.72) 0%, rgba(20,16,34,0.35) 100%);\r\n  backdrop-filter: blur(4px);\r\n}\r\n.hero-banner .hero-manifesto .hm-line{\r\n  font-family:var(--font-display);\r\n  font-size: clamp(16px, 1.7vw, 20px);\r\n  line-height:1.3;\r\n  letter-spacing:-0.01em;\r\n  display:block;\r\n  color:var(--ink);\r\n}\r\n.hero-banner .hero-manifesto .hm-muted{ color:var(--ink-2); }\r\n.hero-banner .hero-manifesto .hm-strong{ font-style:italic; color:var(--ink); }\r\n.hero-banner .hero-manifesto .hm-small{\r\n  display:inline-block;\r\n  font-family:var(--font-text);\r\n  font-size:0.55em; font-style:normal; font-weight:500;\r\n  color:var(--ink-3);\r\n  letter-spacing:0.02em;\r\n  vertical-align:middle;\r\n  margin:0 4px;\r\n  padding:3px 9px;\r\n  border-radius:999px;\r\n  background: color-mix(in oklab, var(--c-accent) 22%, var(--bg-soft));\r\n  border:1px solid color-mix(in oklab, var(--c-accent) 40%, var(--line));\r\n}\r\n.hero-banner .hero-manifesto .hm-accent{ color:var(--c-primary); font-style:italic; }\r\n.hero-banner .hero-manifesto .hm-accent::before{\r\n  content:'\u2192 '; color:var(--c-accent); font-style:normal; font-weight:700;\r\n}\r\n.hero-banner .hero-ctas{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:26px; }\r\n.hero-banner .hero-meta{\r\n  display:flex; flex-wrap:wrap; gap:16px 28px;\r\n  padding-top:20px;\r\n  border-top:1px solid rgba(240,236,248,0.16);\r\n}\r\n.hero-banner .hero-meta .item{ display:flex; flex-direction:column; gap:2px; min-width:0; }\r\n.hero-banner .hero-meta .num{\r\n  font-family:var(--font-display); font-style:italic;\r\n  font-size: clamp(24px, 2.6vw, 30px);\r\n  line-height:1; color:var(--ink);\r\n}\r\n.hero-banner .hero-meta .item:nth-child(1) .num{ color:var(--c-primary); }\r\n.hero-banner .hero-meta .lab{\r\n  font-size:10.5px; letter-spacing:0.09em; text-transform:uppercase;\r\n  color:var(--ink-2); font-weight:500;\r\n}\r\n\r\n\/* \u2500\u2500\u2500 Tablette (761-1024px) \u2500\u2500\u2500 *\/\r\n@media (min-width:761px) and (max-width:1024px){\r\n  .hero-banner .bg-photo{ object-position:50% 38%; }\r\n  .hero-banner .bg-veil { opacity:1.00; }\r\n  .hero-banner p.lead   { margin-top:0; }\r\n}\r\n\r\n@media (max-width:760px){\r\n  .hero-banner{ min-height:844px; border-radius:20px; }\r\n  \/* \u2500\u2500\u2500 valeurs valid\u00e9es t\u00e9l\u00e9phone \u2500\u2500\u2500 *\/\r\n  .hero-banner .bg-photo{ object-position:100% 15%; }\r\n  .hero-banner .bg-veil{\r\n    opacity:0.06;\r\n    background: linear-gradient(180deg,\r\n      rgba(8,6,16,0.35) 0%,\r\n      rgba(8,6,16,0.55) 38%,\r\n      rgba(8,6,16,0.88) 62%,\r\n      rgba(8,6,16,0.96) 100%);\r\n  }\r\n  .hero-banner .hb-content{\r\n    max-width:none;\r\n    padding: 28px 20px 12px;\r\n    min-height:844px;\r\n  }\r\n  .hero-banner h1.display{ font-size: clamp(32px, 9vw, 44px); }\r\n  .hero-banner p.lead{ margin-top:380px; }\r\n  .hero-banner .hero-meta{ gap:12px 20px; }\r\n}\r\n\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550 HERO \u2014 force light text in every theme (veil is always dark) \u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.hero-banner,\r\n.hero-banner .hb-content,\r\n.hero-banner h1.display,\r\n.hero-banner p.lead,\r\n.hero-banner p.lead strong,\r\n.hero-banner .hero-manifesto .hm-line,\r\n.hero-banner .hero-manifesto .hm-muted,\r\n.hero-banner .hero-manifesto .hm-strong,\r\n.hero-banner .hero-meta .num,\r\n.hero-banner .sticker{\r\n  color:#f0ecf8 !important;\r\n}\r\n.hero-banner .hero-manifesto .hm-muted{ color:#c4bad9 !important; }\r\n.hero-banner .hero-manifesto .hm-small{ color:#8a7fa0 !important; }\r\n.hero-banner p.lead{ color:#c4bad9 !important; }\r\n.hero-banner p.lead strong{ color:#f0ecf8 !important; }\r\n.hero-banner .hero-meta .lab{ color:#c4bad9 !important; }\r\n\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550 Theme-toggle when placed inside .header-right (compact, inline) \u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.header-right .theme-toggle.in-nav{\r\n  margin:0;\r\n  padding:5px 7px;\r\n  gap:4px;\r\n  border-radius:999px;\r\n  box-shadow:none;\r\n}\r\n.header-right .theme-toggle.in-nav .tt-dot{\r\n  width:16px; height:16px;\r\n}\r\n@media (max-width: 980px){\r\n  .header-right .theme-toggle.in-nav{ padding:4px 6px; }\r\n  .header-right .theme-toggle.in-nav .tt-dot{ width:14px; height:14px; }\r\n}\r\n\/* Spacing tweak: add a bit of breathing room around h1 now that manifesto moved *\/\r\n.hero-banner h1.display{ margin-bottom:26px; }\r\n\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550 Avatar strip (6 vertical cards in UGC section) \u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.avatar-strip{\r\n  display:grid;\r\n  grid-template-columns:repeat(6, 1fr);\r\n  gap:14px;\r\n  margin-top:clamp(24px, 3vw, 40px);\r\n  width:100%;\r\n}\r\n.avatar-card{\r\n  border-radius:var(--r-lg);\r\n  overflow:hidden;\r\n  aspect-ratio:9\/16;\r\n  box-shadow:var(--shadow-card);\r\n  transition:transform .25s ease, box-shadow .25s ease;\r\n  min-height:340px;\r\n}\r\n.avatar-card img{\r\n  width:100%;\r\n  height:100%;\r\n  object-fit:cover;\r\n}\r\n.avatar-card:hover{\r\n  transform:translateY(-6px) scale(1.02);\r\n  box-shadow:0 20px 50px -18px rgba(0,0,0,0.45);\r\n}\r\n@media (max-width:760px){\r\n  .avatar-strip{\r\n    grid-template-columns:repeat(3, 1fr);\r\n    gap:10px;\r\n  }\r\n  .avatar-card{\r\n    min-height:auto;\r\n    border-radius:var(--r-md);\r\n  }\r\n}\r\n\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550 Packs line scroll (single horizontal row) \u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.packs-line-scroll{\r\n  margin:clamp(16px, 2vw, 28px) 0;\r\n  padding:12px 0 20px;\r\n}\r\n.packs-line-scroll::-webkit-scrollbar{height:6px;}\r\n.packs-line-scroll::-webkit-scrollbar-track{background:transparent;}\r\n.packs-line-scroll::-webkit-scrollbar-thumb{background:var(--c-primary);border-radius:999px;}\r\n.pls-track{\r\n  display:flex;\r\n  gap:14px;\r\n}\r\n.pls-card{\r\n  flex:1 1 0;\r\n  min-width:0;\r\n  background:var(--card);\r\n  border:2px solid var(--line-2);\r\n  border-radius:var(--r-lg);\r\n  padding:18px 16px;\r\n  cursor:pointer;\r\n  transition:all .2s ease;\r\n  display:flex;\r\n  flex-direction:column;\r\n  box-shadow:var(--shadow-card);\r\n}\r\n.pls-card:hover{border-color:var(--c-primary);transform:translateY(-4px);box-shadow:var(--shadow-deep);}\r\n.pls-card.selected{border-color:var(--c-primary);border-width:2px;box-shadow:0 0 0 3px var(--c-primary),var(--shadow-deep);}\r\n.pls-card h4{font-family:var(--font-display);font-size:18px;margin:8px 0 6px;font-weight:400;}\r\n.pls-price{\r\n  font-family:var(--font-display);font-size:32px;font-style:italic;\r\n  color:var(--c-primary);line-height:1;margin-bottom:10px;\r\n}\r\n.pls-price.pls-plus{font-size:26px;}\r\n.pls-unit{font-size:0.45em;font-style:normal;color:var(--ink-2);}\r\n.pls-card img{\r\n  width:100%;height:120px;object-fit:cover;\r\n  border-radius:var(--r-sm);margin-bottom:10px;\r\n}\r\n.pls-card ul{\r\n  list-style:none;font-size:12px;color:var(--ink-2);\r\n  display:flex;flex-direction:column;gap:4px;flex:1;\r\n}\r\n.pls-card ul li::before{content:'\u2713 ';color:var(--c-primary);font-weight:700;}\r\n.pls-select{\r\n  margin-top:12px;text-align:center;font-size:12px;font-weight:600;\r\n  padding:9px;border-radius:999px;\r\n  background:color-mix(in oklab,var(--c-primary) 12%,var(--card));\r\n  color:var(--c-primary);border:1px solid color-mix(in oklab,var(--c-primary) 30%,var(--line));\r\n  transition:all .15s ease;\r\n}\r\n.pls-card.selected .pls-select{background:var(--c-primary);color:#1a0f22;border-color:var(--c-primary);}\r\n.pls-divider{\r\n  flex:0 0 2px;\r\n  background:var(--line);\r\n  border-radius:999px;\r\n  margin:0 4px;\r\n  align-self:stretch;\r\n}\r\n\/* Addon locked state *\/\r\n.pls-addon.locked{opacity:0.55;pointer-events:auto;}\r\n.pls-addon.locked .pv-lock-bar{\r\n  font-size:10px;color:var(--ink-3);text-align:center;margin-top:8px;\r\n  padding:6px;border-radius:var(--r-sm);\r\n  background:color-mix(in oklab,var(--c-accent) 8%,var(--card));\r\n}\r\n.pls-addon:not(.locked) .pv-lock-bar{display:none;}\r\n.pls-addon:not(.locked){opacity:1;}\r\n.pls-addon.selected{border-color:var(--c-accent);box-shadow:0 0 0 2px var(--c-accent),var(--shadow-card);}\r\n\r\n\/* Pack opts row (mult + video mult side by side) *\/\r\n.pack-opts-row{\r\n  display:flex;gap:16px;flex-wrap:wrap;\r\n  margin-top:clamp(12px, 1.5vw, 20px);\r\n}\r\n.pack-opts-row .pack-multi-row,\r\n.pack-opts-row .pack-video-multi{flex:1;min-width:240px;}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550 Total bar (inside packs section, always visible) \u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.pack-total-bar{\r\n  margin-top:clamp(20px, 2.5vw, 32px);\r\n  padding:20px 24px;\r\n  display:flex;\r\n  align-items:center;\r\n  gap:16px;\r\n  background:linear-gradient(135deg, #0e0b18 0%, #1c1734 100%);\r\n  border-radius:var(--r-lg);\r\n  border:1px solid rgba(199,106,223,0.3);\r\n  box-shadow:0 20px 50px -18px rgba(0,0,0,0.5), 0 0 0 1px rgba(199,106,223,0.08);\r\n  color:#f0ecf8;\r\n}\r\n.pack-total-bar .ptb-items{\r\n  flex:1;display:flex;flex-wrap:wrap;gap:6px;min-width:0;\r\n}\r\n.pack-total-bar .ptb-tag{\r\n  display:inline-block;padding:5px 12px;border-radius:999px;\r\n  font-size:12px;font-weight:500;letter-spacing:0.02em;\r\n  background:rgba(199,106,223,0.15);color:#f0ecf8;\r\n  border:1px solid rgba(199,106,223,0.35);\r\n}\r\n.pack-total-bar .ptb-right{\r\n  display:flex;align-items:center;gap:16px;flex-shrink:0;\r\n}\r\n.pack-total-bar .ptb-total{\r\n  display:flex;flex-direction:column;align-items:flex-end;\r\n}\r\n.pack-total-bar .ptb-label{\r\n  font-size:10px;letter-spacing:0.12em;text-transform:uppercase;\r\n  color:#c4bad9;font-weight:600;\r\n}\r\n.pack-total-bar .ptb-amount{\r\n  font-family:var(--font-display);font-style:italic;\r\n  font-size:clamp(28px, 3vw, 38px);color:#f0ecf8;line-height:1;\r\n}\r\n\r\n@media (max-width:760px){\r\n  .pack-total-bar{flex-wrap:wrap;padding:16px;gap:12px;}\r\n  .pack-total-bar .ptb-items{width:100%;order:2;}\r\n  .pack-total-bar .ptb-right{width:100%;justify-content:space-between;order:1;}\r\n  .pack-total-bar .ptb-amount{font-size:28px;}\r\n}\r\n\r\n@media (max-width:760px){\r\n  .packs-line-scroll{\r\n    overflow-x:auto;\r\n    -webkit-overflow-scrolling:touch;\r\n    margin-left:-20px;margin-right:-20px;\r\n    padding:12px 20px 20px;\r\n    scrollbar-width:thin;\r\n    scrollbar-color:var(--c-primary) transparent;\r\n  }\r\n  .pls-track{min-width:max-content;}\r\n  .pls-card{flex:0 0 180px;padding:14px 12px;}\r\n  .pls-card img{height:90px;}\r\n  .pls-price{font-size:26px;}\r\n  .pack-opts-row{flex-direction:column;gap:10px;}\r\n}\r\n\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<!-- DNA Helix Canvas \u2014 decorative, behind all content -->\r\n<canvas id=\"dna-canvas\"><\/canvas>\r\n\r\n<div class=\"preview-bar\">ia\u00b7media JUIN + Helix<\/div>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n     S0 \u00b7 HEADER\r\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<header class=\"site-header\">\r\n  <div class=\"wrap\">\r\n    <a href=\"#\" class=\"brand\">\r\n      <span class=\"brand-mark\">ia<\/span>\r\n      <span class=\"name\">ia<span class=\"dot\">\u00b7<\/span>media<span class=\"dot\" style=\"color:var(--ink-3)\">.<\/span>be<\/span>\r\n    <\/a>\r\n\r\n    <nav class=\"site-nav\" id=\"site-nav\">\r\n      <a href=\"#methode\">M\u00e9thode<\/a>\r\n      <a href=\"#packs\">Packs<\/a>\r\n      <a href=\"#ugc\">UGC<\/a>\r\n      <a href=\"#plans\">Plans<\/a>\r\n      <a href=\"#module-ia\">Module IA<\/a>\r\n      <a href=\"#portfolio\">Portfolio<\/a>\r\n    <\/nav>\r\n\r\n    <div class=\"header-right\">\r\n      <div class=\"theme-toggle in-nav\" aria-label=\"Th\u00e8me\">\r\n        <button class=\"tt-dot tt-dark is-active\" data-theme-val=\"\" title=\"Nuit\"><\/button>\r\n        <button class=\"tt-dot tt-atelier\" data-theme-val=\"atelier\" title=\"Atelier\"><\/button>\r\n      <\/div>\r\n      <a href=\"#contact\" class=\"btn ghost\">Contact<\/a>\r\n      <a href=\"#packs\" class=\"btn brand\">Mixez vos packs <span class=\"arr\">\u2192<\/span><\/a>\r\n      <button class=\"burger\" id=\"burger\" aria-label=\"Menu\" aria-expanded=\"false\" aria-controls=\"site-nav\">\r\n        <span class=\"bar\"><\/span><span class=\"bar\"><\/span><span class=\"bar\"><\/span>\r\n      <\/button>\r\n    <\/div>\r\n  <\/div>\r\n<\/header>\r\n\r\n<main>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n     S1 \u00b7 HERO\r\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<section id=\"hero\" class=\"hero\">\r\n  <div class=\"wrap\">\r\n\r\n    <div class=\"hero-banner\">\r\n      <picture>\r\n        <source media=\"(max-width: 760px)\" srcset=\"images\/hero-banniere-tel.jpg\"\/>\r\n        <img decoding=\"async\" class=\"bg-photo\" src=\"images\/hero-banniere-bg.jpg\" alt=\"\u00c9quipe ia\u00b7media.be sur le plateau\"\/>\r\n      <\/picture>\r\n      <div class=\"bg-veil\"><\/div>\r\n      <div class=\"bg-glow\"><\/div>\r\n\r\n      <div class=\"hb-content\">\r\n        <span class=\"sticker\">Studio IA \u00b7 Belgique \u00b7 2026<\/span>\r\n\r\n        <h1 class=\"display\">\r\n          <span class=\"line\">Vos visuels <em>IA<\/em>,<\/span>\r\n          <span class=\"line indent\">fid\u00e8les \u00e0<\/span>\r\n          <span class=\"line\">votre <em>ADN<\/em>.<\/span>\r\n        <\/h1>\r\n\r\n        <p class=\"lead\">\r\n          Vous avez les photos, l'id\u00e9e, l'\u00e9nergie.<br\/>\r\n          <strong>Nous transformons tout \u00e7a en<br\/>\r\n          syst\u00e8me visuel coh\u00e9rent<\/strong> \u2014<br\/>\r\n          Pack par pack, sans shooting, sans agence, sans engagement.\r\n        <\/p>\r\n\r\n        <div class=\"hero-manifesto\">\r\n          <span class=\"hm-line\">\r\n            <span class=\"hm-muted\">L'IA fait la prod, nos techniciens pros<\/span>\r\n            <span class=\"hm-small\">techniciens, vid\u00e9astes &amp; monteurs<\/span>\r\n            <span class=\"hm-strong\">font la diff\u00e9rence.<\/span>\r\n          <\/span>\r\n          <span class=\"hm-line hm-accent\">Possibilit\u00e9 de \"Tournage vid\u00e9os\" \u2013 \"Shooting Photos\"<\/span>\r\n        <\/div>\r\n\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- Marquee secteurs (neutre, pas de logos marques) -->\r\n    <div class=\"marquee\">\r\n      <div class=\"marquee-track\">\r\n        <span>Restaurants<\/span><span class=\"dot\"><\/span>\r\n        <span>Boulangeries<\/span><span class=\"dot\"><\/span>\r\n        <span>Mode &amp; v\u00eatements<\/span><span class=\"dot\"><\/span>\r\n        <span>Concessions Automobiles<\/span><span class=\"dot\"><\/span>\r\n        <span>Cosm\u00e9tiques<\/span><span class=\"dot\"><\/span>\r\n        <span>Immobiliers<\/span><span class=\"dot\"><\/span>\r\n        <span>Artisans<\/span><span class=\"dot\"><\/span>\r\n        <span>E-commerce<\/span><span class=\"dot\"><\/span>\r\n        <span>Retail<\/span><span class=\"dot\"><\/span>\r\n        <span>Bijouteries<\/span><span class=\"dot\"><\/span>\r\n        <span>H\u00f4telleries<\/span><span class=\"dot\"><\/span>\r\n        <span>UGC &amp; capsules<\/span><span class=\"dot\"><\/span>\r\n        <!-- duplicate for seamless loop -->\r\n        <span>Restaurants<\/span><span class=\"dot\"><\/span>\r\n        <span>Boulangeries<\/span><span class=\"dot\"><\/span>\r\n        <span>Mode &amp; v\u00eatements<\/span><span class=\"dot\"><\/span>\r\n        <span>Concessions Automobiles<\/span><span class=\"dot\"><\/span>\r\n        <span>Cosm\u00e9tiques<\/span><span class=\"dot\"><\/span>\r\n        <span>Immobiliers<\/span><span class=\"dot\"><\/span>\r\n        <span>Artisans<\/span><span class=\"dot\"><\/span>\r\n        <span>E-commerce<\/span><span class=\"dot\"><\/span>\r\n        <span>Retail<\/span><span class=\"dot\"><\/span>\r\n        <span>Bijouteries<\/span><span class=\"dot\"><\/span>\r\n        <span>H\u00f4telleries<\/span><span class=\"dot\"><\/span>\r\n        <span>UGC &amp; capsules<\/span><span class=\"dot\"><\/span>\r\n      <\/div>\r\n    <\/div>\r\n\r\n  <\/div>\r\n<\/section>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n     S2 \u00b7 M\u00c9THODE \u2014 Rail horizontal desktop \/ Accord\u00e9on mobile\r\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<section id=\"methode\" class=\"method-sec\">\r\n  <div class=\"wrap\">\r\n\r\n    <div class=\"method-head rv\">\r\n      <div class=\"mh-left\">\r\n        <span class=\"eyebrow\">M\u00e9thode \u00b7 5 \u00e9tapes<\/span>\r\n        <h2 class=\"lede\">\u00c9tape par \u00e9tape,<br\/><em>rien n'est magique<\/em>.<\/h2>\r\n      <\/div>\r\n      <div class=\"mh-right\">\r\n        <p>L'IA acc\u00e9l\u00e8re la production, pas la r\u00e9flexion. Derri\u00e8re chaque visuel : un graphiste, une direction artistique, des choix humains. <strong>On y va par \u00e9tapes \u2014 et vous voyez tout.<\/strong><\/p>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"method-rail\">\r\n\r\n      <div class=\"m-step s1 rv d1\">\r\n        <div class=\"m-step-head\">\r\n          <div class=\"m-num\">01<\/div>\r\n          <h4>Vous racontez<\/h4>\r\n          <span class=\"m-chevron\">\u25be<\/span>\r\n        <\/div>\r\n        <div class=\"m-step-body\">\r\n          <div class=\"m-thumb\"><img decoding=\"async\" src=\"images\/img-05-f07c017d78.jpg\" alt=\"\" loading=\"lazy\"\/><\/div>\r\n          <p>Brief texte, photos existantes, r\u00e9f\u00e9rences, envies. Notre formulaire cadre tout. Pas besoin de maquette \u2014 juste votre vision.<\/p>\r\n          <span class=\"m-tag\">Formulaire guid\u00e9<\/span>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"m-step s2 rv d2\">\r\n        <div class=\"m-step-head\">\r\n          <div class=\"m-num\">02<\/div>\r\n          <h4>On cadre l'ADN<\/h4>\r\n          <span class=\"m-chevron\">\u25be<\/span>\r\n        <\/div>\r\n        <div class=\"m-step-body\">\r\n          <div class=\"m-thumb\"><img decoding=\"async\" src=\"images\/img-06-616155daba.jpg\" alt=\"\" loading=\"lazy\"\/><\/div>\r\n          <p>Questionnaire 20 questions, palette 6 couleurs, prompts calibr\u00e9s, audit canal. C'est la R&amp;D de votre marque \u2014 comprise par nos \u00e9quipes graphistes, animateurs et techniciens.<\/p>\r\n          <span class=\"m-tag\">110\u20ac \u00b7 r\u00e9utilisable<\/span>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"m-step s3 rv d3\">\r\n        <div class=\"m-step-head\">\r\n          <div class=\"m-num\">03<\/div>\r\n          <h4>G\u00e9n\u00e9ration + it\u00e9rations<\/h4>\r\n          <span class=\"m-chevron\">\u25be<\/span>\r\n        <\/div>\r\n        <div class=\"m-step-body\">\r\n          <div class=\"m-thumb\"><img decoding=\"async\" src=\"images\/img-07-4d3598ca4d.jpg\" alt=\"\" loading=\"lazy\"\/><\/div>\r\n          <p>Chaque image passe par 3 it\u00e9rations de construction. Depuis vos sources, nos recherches ou un shooting interne \u2014 on assemble, on affine, on livre.<\/p>\r\n          <span class=\"m-tag\">3 it\u00e9rations \/ image<\/span>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"m-step s4 rv d4\">\r\n        <div class=\"m-step-head\">\r\n          <div class=\"m-num\">04<\/div>\r\n          <h4>Post-production<\/h4>\r\n          <span class=\"m-chevron\">\u25be<\/span>\r\n        <\/div>\r\n        <div class=\"m-step-body\">\r\n          <div class=\"m-thumb\"><img decoding=\"async\" src=\"images\/img-08-a9616d1616.jpg\" alt=\"\" loading=\"lazy\"\/><\/div>\r\n          <p>Colorim\u00e9trie, retouche, montage vid\u00e9o, sound design. C'est ce qui s\u00e9pare un brouillon IA d'un visuel pro \u2014 et c'est inclus.<\/p>\r\n          <span class=\"m-tag\">Rendu pro inclus<\/span>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"m-step s5 rv d4\">\r\n        <div class=\"m-step-head\">\r\n          <div class=\"m-num\">05<\/div>\r\n          <h4>Livraison HD<\/h4>\r\n          <span class=\"m-chevron\">\u25be<\/span>\r\n        <\/div>\r\n        <div class=\"m-step-body\">\r\n          <div class=\"m-thumb\"><img decoding=\"async\" src=\"images\/img-09-8b89b130ce.jpg\" alt=\"\" loading=\"lazy\"\/><\/div>\r\n          <p>Fichiers HD livr\u00e9s. Vous repartez avec vos bases \u2014 et chaque nouveau pack enrichit le pr\u00e9c\u00e9dent. Continuez seul ou encha\u00eenez.<\/p>\r\n          <span class=\"m-tag\">HD \u00b7 scalable<\/span>\r\n        <\/div>\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n    <div class=\"method-human-note rv\">\r\n      <span class=\"mhn-icon\">\ud83e\udd1d<\/span>\r\n      <span>\r\n        <strong>L'IA acc\u00e9l\u00e8re la production.<\/strong> La direction artistique, les choix, le go\u00fbt \u2014 <em>c'est nous.<\/em> Toujours.\r\n      <\/span>\r\n    <\/div>\r\n\r\n  <\/div>\r\n<\/section>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n     S5 \u00b7 PACKS \/ CALCULATEUR\r\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<section id=\"packs\" class=\"packs-sec\">\r\n  <div class=\"wrap\">\r\n\r\n    <div class=\"packs-head rv\">\r\n      <span class=\"eyebrow solo\">Packs &amp; tarifs<\/span>\r\n      <h2>Choisissez, <em>mixez<\/em>,<br\/>lancez votre projet.<\/h2>\r\n      <p>S\u00e9lectionnez un pack, ajustez la quantit\u00e9, ajoutez une vid\u00e9o. Le total se calcule en direct.<\/p>\r\n    <\/div>\r\n\r\n    <!-- \u2500\u2500 ADN Banner compact \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n    <div class=\"pack-adn-banner rv\">\r\n      <div class=\"pab-left\">\r\n        <span class=\"eyebrow\">Fiche ADN \u00b7 Obligatoire<\/span>\r\n        <h3>Votre marque a un <em>ADN<\/em>. On le traduit en visuels.<\/h3>\r\n        <p class=\"pab-desc\">L'ADN, c'est le socle de votre projet visuel. <strong>Nos \u00e9quipes apprennent votre marque<\/strong> pour la traduire en images. Couleurs, ambiances, ton, cibles : tout est cadr\u00e9 avant la premi\u00e8re g\u00e9n\u00e9ration.<\/p>\r\n        <div class=\"adn-prix\">\r\n          <div class=\"adn-amount\">110<span class=\"unit\">\u20ac HTVA<\/span><\/div>\r\n          <div class=\"adn-prix-detail\"><strong>Une seule fois \u00b7 r\u00e9utilisable \u00e0 l'infini.<\/strong><br\/>Auto-incluse dans les packs ADN+5.<\/div>\r\n        <\/div>\r\n        <div class=\"adn-formulaire-callout\">\r\n          <h4>Formulaire complet<\/h4>\r\n          <p>Cibl\u00e9 sur votre <strong>activit\u00e9<\/strong>, votre <strong>marque<\/strong>, vos <strong>produits<\/strong>, vos <strong>services<\/strong>.<\/p>\r\n          <span class=\"adn-form-tag\">\u2192 La base de tout ce qui suivra<\/span>\r\n        <\/div>\r\n        <div class=\"pab-quest\">\ud83d\udccb <span><strong>Questionnaire 20 questions<\/strong> \u2014 Analyse de vos contenus r\u00e9seaux et de la sp\u00e9cificit\u00e9 de votre communication existante.<\/span><\/div>\r\n      <\/div>\r\n      <div class=\"pab-right\">\r\n        <div class=\"pab-showcase\"><img decoding=\"async\" src=\"images\/img-10-8b80964ea9.jpg\" alt=\"ADN en action \u2014 5 contextes, 1 ADN\" loading=\"lazy\"\/><\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- \u2500\u2500 Scroll horizontal : tous les packs + vid\u00e9os \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n    <div class=\"packs-line-scroll\" id=\"pack-grid\">\r\n      <div class=\"pls-track\">\r\n\r\n        <div class=\"pls-card\" data-pack=\"fast\" data-base=\"110\" onclick=\"selectPack(this)\">\r\n          <span class=\"pc-badge sans-adn\">Sans ADN<\/span>\r\n          <h4>Fast Test<\/h4>\r\n          <div class=\"pls-price\">110<span class=\"pls-unit\">\u20ac<\/span><\/div>\r\n          <img decoding=\"async\" src=\"images\/img-11-a391739d38.jpg\" alt=\"Fast Test\" loading=\"lazy\"\/>\r\n          <ul><li>5 images IA<\/li><li>Brief texte simple<\/li><li>1 format au choix<\/li><li>3\u20135 jours<\/li><\/ul>\r\n          <div class=\"pls-select\">S\u00e9lectionner<\/div>\r\n        <\/div>\r\n\r\n        <div class=\"pls-card\" data-pack=\"adn5\" data-base=\"225\" data-adn=\"110\" data-images=\"115\" onclick=\"selectPack(this)\">\r\n          <span class=\"pc-badge avec-adn\">ADN + 5 images<\/span>\r\n          <h4>Pack ADN+5<\/h4>\r\n          <div class=\"pls-price\">225<span class=\"pls-unit\">\u20ac<\/span><\/div>\r\n          <img decoding=\"async\" src=\"images\/img-12-71a5251ece.jpg\" alt=\"Pack ADN+5\" loading=\"lazy\"\/>\r\n          <ul><li>Fiche ADN incluse<\/li><li>5 images pro<\/li><li>3 it\u00e9rations<\/li><li>Post-prod incluse<\/li><\/ul>\r\n          <div class=\"pls-select\">S\u00e9lectionner<\/div>\r\n        <\/div>\r\n\r\n        <div class=\"pls-card\" data-pack=\"adn5ugc\" data-base=\"245\" data-adn=\"110\" data-images=\"135\" onclick=\"selectPack(this)\">\r\n          <span class=\"pc-badge ugc\">ADN + 5 UGC<\/span>\r\n          <h4>Pack ADN+5 UGC<\/h4>\r\n          <div class=\"pls-price\">245<span class=\"pls-unit\">\u20ac<\/span><\/div>\r\n          <img decoding=\"async\" src=\"images\/img-13-a5798b07b1.jpg\" alt=\"Pack UGC\" loading=\"lazy\"\/>\r\n          <ul><li>Fiche ADN incluse<\/li><li>5 images UGC<\/li><li>3 it\u00e9rations<\/li><li>R\u00e9seaux sociaux<\/li><\/ul>\r\n          <div class=\"pls-select\">S\u00e9lectionner<\/div>\r\n        <\/div>\r\n\r\n        <div class=\"pls-card\" data-pack=\"avatar\" data-base=\"245\" data-adn=\"110\" data-images=\"135\" onclick=\"selectPack(this)\">\r\n          <span class=\"pc-badge avatar\">ADN + Avatar<\/span>\r\n          <h4>Cr\u00e9ation Avatar<\/h4>\r\n          <div class=\"pls-price\">245<span class=\"pls-unit\">\u20ac<\/span><\/div>\r\n          <img decoding=\"async\" src=\"images\/img-13-a5798b07b1.jpg\" alt=\"Cr\u00e9ation Avatar\" loading=\"lazy\"\/>\r\n          <ul>\r\n            <li>Fiche ADN incluse<\/li>\r\n            <li>Acteur multivue (4 visages + 4 corps entiers)<\/li>\r\n            <li>3 images d\u00e9mo offertes<\/li>\r\n            <li>Acc\u00e8s direct \u00e0 la Vid\u00e9o UGC 15s<\/li>\r\n            <li>Avatar r\u00e9utilisable en interne, non livr\u00e9 tel quel<\/li>\r\n            <li>Rachat complet possible \u2014 sur devis<\/li>\r\n          <\/ul>\r\n          <div class=\"pls-select\">S\u00e9lectionner<\/div>\r\n        <\/div>\r\n\r\n        <div class=\"pls-divider\"><\/div>\r\n\r\n        <div class=\"pls-card pls-addon locked\" data-addon=\"video\" data-price=\"150\" onclick=\"toggleVideo(this)\">\r\n          <span class=\"pv-badge\">Add-on vid\u00e9o<\/span>\r\n          <h4>Vid\u00e9o 15s<\/h4>\r\n          <div class=\"pls-price pls-plus\">+150<span class=\"pls-unit\">\u20ac<\/span><\/div>\r\n          <img decoding=\"async\" src=\"images\/img-14-593fec8f2f.jpg\" alt=\"Vid\u00e9o 15s\" loading=\"lazy\"\/>\r\n          <ul><li>3\u00d75s ou 5\u00d73s<\/li><li>Post-prod incluse<\/li><li>Colorim\u00e9trie<\/li><\/ul>\r\n          <div class=\"pv-lock-bar\"><span class=\"lock-icon\">\ud83d\udd12<\/span> Avec pack ADN+5<\/div>\r\n        <\/div>\r\n\r\n        <div class=\"pls-card pls-addon locked\" data-addon=\"video-ugc\" data-price=\"190\" onclick=\"toggleVideo(this)\">\r\n          <span class=\"pv-badge\">Add-on UGC<\/span>\r\n          <h4>Vid\u00e9o UGC 15s<\/h4>\r\n          <div class=\"pls-price pls-plus\">+190<span class=\"pls-unit\">\u20ac<\/span><\/div>\r\n          <img decoding=\"async\" src=\"images\/img-15-08e8d8d6d6.jpg\" alt=\"Vid\u00e9o UGC\" loading=\"lazy\"\/>\r\n          <ul><li>Voix IA + lipsync<\/li><li>Sound design<\/li><li>Format capsule<\/li><\/ul>\r\n          <div class=\"pv-lock-bar\"><span class=\"lock-icon\">\ud83d\udd12<\/span> Avec pack ADN+5 UGC<\/div>\r\n        <\/div>\r\n\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- \u2500\u2500 Multiplicateur \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n    <div class=\"pack-opts-row\">\r\n      <div class=\"pack-multi-row\" id=\"pack-multi\">\r\n        <span class=\"pm-label\"><strong>Multiplicateur<\/strong> \u2014 doublez, triplez vos images<\/span>\r\n        <div class=\"pm-btns\">\r\n          <button class=\"pm-btn active\" data-mult=\"1\" onclick=\"setMult(1)\">\u00d71<\/button>\r\n          <button class=\"pm-btn\" data-mult=\"2\" onclick=\"setMult(2)\">\u00d72<\/button>\r\n          <button class=\"pm-btn\" data-mult=\"3\" onclick=\"setMult(3)\">\u00d73<\/button>\r\n          <button class=\"pm-btn\" data-mult=\"4\" onclick=\"setMult(4)\">\u00d74<\/button>\r\n        <\/div>\r\n      <\/div>\r\n      <div class=\"pack-video-multi\" id=\"video-multi\">\r\n        <span class=\"pvm-label\"><strong>Vid\u00e9os<\/strong> \u2014 doublez vos capsules<\/span>\r\n        <div class=\"pm-btns\">\r\n          <button class=\"pm-btn active\" data-vmult=\"1\" onclick=\"setVideoMult(1)\">\u00d71<\/button>\r\n          <button class=\"pm-btn\" data-vmult=\"2\" onclick=\"setVideoMult(2)\">\u00d72<\/button>\r\n          <button class=\"pm-btn\" data-vmult=\"3\" onclick=\"setVideoMult(3)\">\u00d73<\/button>\r\n          <button class=\"pm-btn\" data-vmult=\"4\" onclick=\"setVideoMult(4)\">\u00d74<\/button>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- \u2500\u2500 Options montage \/ sous-titrage \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n    <div class=\"pack-montage-row\" id=\"montage-row\">\r\n      <div class=\"pmr-card\" data-opt=\"montage\" onclick=\"toggleOpt('montage')\">\r\n        <div class=\"pmr-left\">\r\n          <span class=\"pmr-check\">\u25cb<\/span>\r\n          <div><h5>Montage vid\u00e9o<\/h5><p>\/ pack 15 sec \u00b7 Musique \u00b7 sound design<\/p><\/div>\r\n        <\/div>\r\n        <div style=\"display:flex;align-items:center;gap:8px;\">\r\n          <div class=\"pmr-price\" id=\"montage-price\">+40<span class=\"pc-unit\">\u20ac<\/span><\/div>\r\n          <div class=\"pm-btns pmr-mult\" id=\"montage-mult\" style=\"display:none;\">\r\n            <button class=\"pm-btn active\" onclick=\"event.stopPropagation();setOptMult('montage',1)\">\u00d71<\/button>\r\n            <button class=\"pm-btn\" onclick=\"event.stopPropagation();setOptMult('montage',2)\">\u00d72<\/button>\r\n            <button class=\"pm-btn\" onclick=\"event.stopPropagation();setOptMult('montage',3)\">\u00d73<\/button>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n      <div class=\"pmr-card\" data-opt=\"soustitrage\" onclick=\"toggleOpt('soustitrage')\">\r\n        <div class=\"pmr-left\">\r\n          <span class=\"pmr-check\">\u25cb<\/span>\r\n          <div><h5>Sous-titrage<\/h5><p>\/ pack 15 sec \u00b7 Sous-titres int\u00e9gr\u00e9s<\/p><\/div>\r\n        <\/div>\r\n        <div style=\"display:flex;align-items:center;gap:8px;\">\r\n          <div class=\"pmr-price\" id=\"soustitrage-price\">+30<span class=\"pc-unit\">\u20ac<\/span><\/div>\r\n          <div class=\"pm-btns pmr-mult\" id=\"soustitrage-mult\" style=\"display:none;\">\r\n            <button class=\"pm-btn active\" onclick=\"event.stopPropagation();setOptMult('soustitrage',1)\">\u00d71<\/button>\r\n            <button class=\"pm-btn\" onclick=\"event.stopPropagation();setOptMult('soustitrage',2)\">\u00d72<\/button>\r\n            <button class=\"pm-btn\" onclick=\"event.stopPropagation();setOptMult('soustitrage',3)\">\u00d73<\/button>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n\r\n\r\n    <!-- \u2500\u2500 Total \/ r\u00e9cap \u2500\u2500 -->\r\n    <div class=\"pack-total-bar\" id=\"recap-bar\">\r\n      <div class=\"ptb-items\" id=\"recap-items\">\r\n        <span class=\"ptb-tag\">\u2191 S\u00e9lectionnez un pack<\/span>\r\n      <\/div>\r\n      <div class=\"ptb-right\">\r\n        <div class=\"ptb-total\">\r\n          <span class=\"ptb-label\">Total HTVA<\/span>\r\n          <span class=\"ptb-amount\" id=\"recap-total\">0\u20ac<\/span>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n\r\n\r\n\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n     S9 \u00b7 UGC CAPSULES \u2014 phone mockups\r\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<section id=\"ugc\" class=\"ugc-sec\">\r\n  <div class=\"wrap\">\r\n    <div class=\"ugc-inner\">\r\n\r\n      <div class=\"ugc-text rv\">\r\n        <span class=\"eyebrow\">Capsules UGC \u00b7 R\u00e9seaux sociaux<\/span>\r\n        <h2>Du contenu<br\/><em>qui vous ressemble<\/em>.<\/h2>\r\n        <p>Votre Marque, vos Produits, vos Services. Des visuels au format story et r\u00e9els, g\u00e9n\u00e9r\u00e9s par IA avec vos produits et des mod\u00e8les virtuels. <strong>Authentiques, engageants, pr\u00eats \u00e0 poster.<\/strong> Le format capsule qui performe sur Instagram, TikTok et Facebook.<\/p>\r\n        <div class=\"ugc-tags\">\r\n          <span class=\"ugc-tag\">9:16 Stories<\/span>\r\n          <span class=\"ugc-tag\">Mod\u00e8le IA<\/span>\r\n          <span class=\"ugc-tag\">Produit int\u00e9gr\u00e9<\/span>\r\n          <span class=\"ugc-tag\">Voix + lipsync<\/span>\r\n          <span class=\"ugc-tag\">Post-prod incluse<\/span>\r\n          <span class=\"ugc-tag\">Avatars personnalis\u00e9s<\/span>\r\n          <span class=\"ugc-tag\">Visuels produits<\/span>\r\n          <span class=\"ugc-tag\">Mise en avant produits &amp; services<\/span>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"ugc-phones rv d1\">\r\n        <div class=\"ugc-phone\"><img decoding=\"async\" src=\"images\/img-16-d4037d25a8.jpg\" alt=\"UGC Leonidas \u2014 chocolats\" loading=\"lazy\"\/><\/div>\r\n        <div class=\"ugc-phone\"><img decoding=\"async\" src=\"images\/img-17-d4b792dbcc.jpg\" alt=\"UGC Grimbergen \u2014 bi\u00e8re belge\" loading=\"lazy\"\/><\/div>\r\n        <div class=\"ugc-phone\"><img decoding=\"async\" src=\"images\/img-18-4a2d0c75f9.jpg\" alt=\"UGC Avatar \u2014 wireframe to real\" loading=\"lazy\"\/><\/div>\r\n      <\/div>\r\n\r\n\r\n    <\/div>\r\n\r\n    <!-- Ligne avatars -->\r\n    <div class=\"avatar-strip rv d2\">\r\n        <div class=\"avatar-card\"><img decoding=\"async\" src=\"images\/avatar-01-d86aa46cf0.jpg\" alt=\"Boulanger artisan\" loading=\"lazy\"\/><\/div>\r\n        <div class=\"avatar-card\"><img decoding=\"async\" src=\"images\/avatar-02-5b01d95701.jpg\" alt=\"Mod\u00e8le cosm\u00e9tique\" loading=\"lazy\"\/><\/div>\r\n        <div class=\"avatar-card\"><img decoding=\"async\" src=\"images\/avatar-03-774d679330.jpg\" alt=\"Technicienne cr\u00e9ative\" loading=\"lazy\"\/><\/div>\r\n        <div class=\"avatar-card\"><img decoding=\"async\" src=\"images\/avatar-04-531f64a52d.jpg\" alt=\"Professeur IA\" loading=\"lazy\"\/><\/div>\r\n        <div class=\"avatar-card\"><img decoding=\"async\" src=\"images\/avatar-05-98bff194d7.jpg\" alt=\"Vid\u00e9aste studio\" loading=\"lazy\"\/><\/div>\r\n        <div class=\"avatar-card\"><img decoding=\"async\" src=\"images\/avatar-06-1401c24dc7.jpg\" alt=\"Directrice artistique\" loading=\"lazy\"\/><\/div>\r\n    <\/div>\r\n\r\n  <\/div>\r\n<\/section>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n     S7 \u00b7 PLANS R\u00c9CURRENTS \u2014 2 cards vitrine dark\r\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<section id=\"plans\" class=\"plans-sec\">\r\n  <div class=\"wrap\">\r\n\r\n    <div class=\"plans-head rv\">\r\n      <span class=\"eyebrow solo\">Abonnements \u00b7 1 image \/ jour<\/span>\r\n      <h2>Votre com en <em>flux continu<\/em>.<\/h2>\r\n      <p>Pour ceux qui ont besoin de contenu r\u00e9gulier. Sans casting, sans tournage, sans production classique.<\/p>\r\n      <p style=\"margin-top:10px;color:var(--ink-2);font-size:clamp(13px,1vw,15px);max-width:56ch;\">Fiche ADN, analyse de vos attentes et objectifs sp\u00e9cifiques \u00e0 votre identit\u00e9. Cr\u00e9ation d'un plan adapt\u00e9 \u2014 <strong>\u00e9volutif, strat\u00e9gique<\/strong>.<\/p>\r\n    <\/div>\r\n\r\n    <div class=\"plans-grid\">\r\n\r\n      <div class=\"plan-card rv\">\r\n        <div class=\"plan-img\"><img decoding=\"async\" src=\"images\/img-19-2afe383f8c.jpg\" alt=\"30 images \/ mois \u2014 550\u20ac HTVA\" loading=\"lazy\"\/><\/div>\r\n        <div class=\"plan-body\">\r\n          <span class=\"plan-badge\">Sans engagement<\/span>\r\n          <h3>Offre 30 jours<\/h3>\r\n          <div class=\"plan-price\">\r\n            <span class=\"pp-amount\">550<\/span>\r\n            <span class=\"pp-unit\">\u20ac HTVA \/ mois<\/span>\r\n          <\/div>\r\n          <ul class=\"plan-list\">\r\n            <li>30 images IA en 30 jours<\/li>\r\n            <li>Cr\u00e9ation haute qualit\u00e9<\/li>\r\n            <li>Livraison rapide sous 30 jours<\/li>\r\n            <li>Tous secteurs \u00b7 tous formats<\/li>\r\n            <li>Sans engagement \u2014 r\u00e9siliable \u00e0 tout moment<\/li>\r\n          <\/ul>\r\n          <a href=\"#contact\" class=\"plan-cta\">Nous contacter \u2192<\/a>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"plan-card rv d1\">\r\n        <div class=\"plan-img\"><img decoding=\"async\" src=\"images\/img-20-c6e8d8399c.jpg\" alt=\"360 jours \u2014 399\u20ac\/mois \u00b7 4788\u20ac\/an\" loading=\"lazy\"\/><\/div>\r\n        <div class=\"plan-body\">\r\n          <span class=\"plan-badge\">Engagement annuel<\/span>\r\n          <h3>Offre 360 jours<\/h3>\r\n          <div class=\"plan-price\">\r\n            <span class=\"pp-amount\">399<\/span>\r\n            <span class=\"pp-unit\">\u20ac HTVA \/ mois<\/span>\r\n            <span class=\"pp-annual\">\u00b7 4 788\u20ac\/an<\/span>\r\n          <\/div>\r\n          <ul class=\"plan-list\">\r\n            <li>365 visuels \/ an \u2014 1 image par jour<\/li>\r\n            <li>Cr\u00e9ation haute qualit\u00e9<\/li>\r\n            <li>Tous secteurs \u00b7 tous formats<\/li>\r\n            <li>Engagement 12 mois<\/li>\r\n            <li>\u00c9conomie de 151\u20ac\/mois vs offre 30j<\/li>\r\n          <\/ul>\r\n          <a href=\"#contact\" class=\"plan-cta\">Nous contacter \u2192<\/a>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"plan-showcase rv d2\">\r\n        <div class=\"ps-img\"><img decoding=\"async\" src=\"images\/img-21-381d11e2ad.jpg\" alt=\"Barbier \u2014 visuel IA\" loading=\"lazy\"\/><\/div>\r\n        <div class=\"ps-img\"><img decoding=\"async\" src=\"images\/img-22-b6ebe6065c.jpg\" alt=\"Esth\u00e9ticienne \u2014 visuel IA\" loading=\"lazy\"\/><\/div>\r\n        <div class=\"ps-img\"><img decoding=\"async\" src=\"images\/img-23-09098f1226.jpg\" alt=\"Boulangerie \u2014 visuel IA\" loading=\"lazy\"\/><\/div>\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n  <\/div>\r\n<\/section>\r\n\r\n\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n     MODULE COM IA \u2014 Solution entreprise \u00b7 artisans \u00b7 professionnels\r\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<section id=\"module-ia\" class=\"module-ia-sec\" data-screen-label=\"Module IA\">\r\n  <div class=\"wrap\">\r\n\r\n    <!-- Header -->\r\n    <div class=\"module-ia-head rv\">\r\n      <span class=\"eyebrow solo\">Solution entreprise &amp; accompagnement<\/span>\r\n      <h2 class=\"lede\" style=\"color:var(--ink-inv)\">Devenez autonome en<br\/>production de <em>cr\u00e9ation IA<\/em>.<\/h2>\r\n      <p class=\"lead\" style=\"color:rgba(255,255,255,.6);max-width:62ch;margin:12px auto 0\">Modules \u00e9volu\u00e9s et adapt\u00e9s aux entreprises pour insertion dans votre flux de cr\u00e9ation existant \u2014 accompagnement, supervision, formations.<\/p>\r\n    <\/div>\r\n\r\n    <!-- 3 AXES \u2014 cards principales -->\r\n    <div class=\"mia-features-row rv d1\" style=\"grid-template-columns:repeat(3,1fr);\">\r\n\r\n      <div class=\"mia-card\" style=\"border-top:3px solid var(--c-primary);\">\r\n        <div class=\"mia-icon\">\ud83c\udfd7\ufe0f<\/div>\r\n        <span class=\"mia-badge\" style=\"margin-bottom:12px;\">Axe 1 \u00b7 Autonomie<\/span>\r\n        <h4>Module int\u00e9gr\u00e9<br\/>\u00e0 votre entreprise<\/h4>\r\n        <p>Votre \u00e9quipe produit sa communication en interne, <strong>via un module d\u00e9velopp\u00e9 sur votre identit\u00e9<\/strong> et via les outils de g\u00e9n\u00e9ration de votre choix. Nos outils dans votre flux.<\/p>\r\n        <ul class=\"mia-checklist\" style=\"margin-top:12px;\">\r\n          <li><span class=\"mia-check\">\u2713<\/span> Module IA pr\u00e9programm\u00e9 sur votre ADN de marque<\/li>\r\n          <li><span class=\"mia-check\">\u2713<\/span> Interface simplifi\u00e9e : Produit, Com, Axe \u2014 le module vous fournit votre prompt<\/li>\r\n          <li><span class=\"mia-check\">\u2713<\/span> D\u00e9ploiement en entreprise, usage illimit\u00e9<\/li>\r\n        <\/ul>\r\n      <\/div>\r\n\r\n      <div class=\"mia-card\" style=\"border-top:3px solid var(--c-accent);\">\r\n        <div class=\"mia-icon\">\ud83d\udd11<\/div>\r\n        <span class=\"mia-badge\" style=\"margin-bottom:12px;background:color-mix(in oklab,var(--c-accent) 18%,var(--bg-soft));color:var(--c-accent);border-color:color-mix(in oklab,var(--c-accent) 35%,var(--line));\">Axe 2 \u00b7 Accompagnement<\/span>\r\n        <h4>Autonomie + suivi projet<br\/>par nos techniciens<\/h4>\r\n        <p>Tout ce que propose l'Axe 1, <strong>avec en plus un suivi de projet d\u00e9di\u00e9<\/strong> par nos techniciens. Supervision de votre production, int\u00e9gration LLM dans vos outils, SAV technique permanent.<\/p>\r\n        <ul class=\"mia-checklist\" style=\"margin-top:12px;\">\r\n          <li><span class=\"mia-check\">\u2713<\/span> Module int\u00e9gr\u00e9 (Axe 1 inclus)<\/li>\r\n          <li><span class=\"mia-check\">\u2713<\/span> Supervision projet par nos techniciens IA<\/li>\r\n          <li><span class=\"mia-check\">\u2713<\/span> SAV &amp; int\u00e9gration LLM dans vos outils<\/li>\r\n          <li><span class=\"mia-check\">\u2713<\/span> Contr\u00f4le qualit\u00e9 et it\u00e9rations guid\u00e9es<\/li>\r\n        <\/ul>\r\n      <\/div>\r\n\r\n      <div class=\"mia-card\" style=\"border-top:3px solid var(--c-warm);\">\r\n        <div class=\"mia-icon\">\ud83c\udf93<\/div>\r\n        <span class=\"mia-badge\" style=\"margin-bottom:12px;background:color-mix(in oklab,var(--c-warm) 18%,var(--bg-soft));color:var(--c-warm);border-color:color-mix(in oklab,var(--c-warm) 35%,var(--line));\">Axe 3 \u00b7 Formation<\/span>\r\n        <h4>Formation IA<br\/>en entreprise<\/h4>\r\n        <p>Nos techniciens interviennent <strong>directement dans votre entreprise<\/strong> \u2014 formation de vos \u00e9quipes aux outils IA, suivi de production, mont\u00e9e en comp\u00e9tence progressive.<\/p>\r\n        <ul class=\"mia-checklist\" style=\"margin-top:12px;\">\r\n          <li><span class=\"mia-check\">\u2713<\/span> Formation sur site ou \u00e0 distance<\/li>\r\n          <li><span class=\"mia-check\">\u2713<\/span> Suivi d\u00e9di\u00e9 et it\u00e9ratif<\/li>\r\n          <li><span class=\"mia-check\">\u2713<\/span> Votre module \u00e9volue avec votre \u00e9quipe<\/li>\r\n        <\/ul>\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n    <!-- Images visuelles \u2014 2 colonnes -->\r\n    <div class=\"mia-visuals-row rv d2\" style=\"display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:clamp(16px,2vw,28px);\">\r\n      <div class=\"module-ia-visual\">\r\n        <img decoding=\"async\" src=\"images\/img-01-2eada180fb.png\" alt=\"Module de communication IA \u2014 cerveau IA connect\u00e9 aux canaux de l'entreprise\" loading=\"lazy\" style=\"width:100%;border-radius:var(--r-lg);\"\/>\r\n      <\/div>\r\n      <div class=\"module-ia-visual\">\r\n        <img decoding=\"async\" src=\"images\/module-ia-cuisine.jpg\" alt=\"Production IA en entreprise \u2014 Ins\u00e9r\u00e9s dans vos flux cr\u00e9atifs.\" loading=\"lazy\" style=\"width:100%;border-radius:var(--r-lg);object-fit:cover;height:100%;\"\/>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"module-ia-cta rv d4\" style=\"text-align:center;margin-top:clamp(12px,1.5vw,20px)\">\r\n      <a href=\"#contact\" class=\"btn brand\" style=\"font-size:clamp(14px,1.1vw,16px);padding:14px 32px\">Demander votre module <span class=\"arr\">\u2192<\/span><\/a>\r\n      <p style=\"color:rgba(255,255,255,.4);font-size:12px;margin-top:10px\">Projet personnalis\u00e9 \u00b7 sur demande exclusivement<\/p>\r\n    <\/div>\r\n\r\n  <\/div>\r\n<\/section>\r\n\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n     S10 \u00b7 PORTFOLIO \u2014 strip + accordion gallery\r\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<section id=\"portfolio\" class=\"portfolio-sec\">\r\n  <div class=\"wrap\">\r\n\r\n    <div class=\"portfolio-head rv\">\r\n      <span class=\"eyebrow\">Portfolio \u00b7 Nos cr\u00e9ations<\/span>\r\n      <h2>Tout est g\u00e9n\u00e9r\u00e9 par <em>IA<\/em>.<\/h2>\r\n    <\/div>\r\n\r\n    <!-- Strip visible \u2014 best landscape\/square images -->\r\n    <div class=\"pf-strip\">\r\n      <div class=\"pf-strip-item\"><img decoding=\"async\" src=\"images\/img-24-b9e9454d39.jpg\" alt=\"Lamborghini\" loading=\"lazy\"\/><\/div>\r\n      <div class=\"pf-strip-item\"><img decoding=\"async\" src=\"images\/img-25-3555cb6196.jpg\" alt=\"Pizza restaurant\" loading=\"lazy\"\/><\/div>\r\n      <div class=\"pf-strip-item\"><img decoding=\"async\" src=\"images\/img-26-43aad84d2b.jpg\" alt=\"Fish gourmet\" loading=\"lazy\"\/><\/div>\r\n      <div class=\"pf-strip-item\"><img decoding=\"async\" src=\"images\/img-27-f9575d899b.jpg\" alt=\"Hotel suite\" loading=\"lazy\"\/><\/div>\r\n      <div class=\"pf-strip-item\"><img decoding=\"async\" src=\"images\/img-28-6e4dc1dcbd.jpg\" alt=\"Paysagiste\" loading=\"lazy\"\/><\/div>\r\n      <div class=\"pf-strip-item\"><img decoding=\"async\" src=\"images\/img-29-0c9bd6383e.jpg\" alt=\"Emmi Caff\u00e8\" loading=\"lazy\"\/><\/div>\r\n      <div class=\"pf-strip-item\"><img decoding=\"async\" src=\"images\/img-30-b6f23c954e.jpg\" alt=\"Bowling\" loading=\"lazy\"\/><\/div>\r\n      <div class=\"pf-strip-item\"><img decoding=\"async\" src=\"images\/img-31-e3f52582ea.jpg\" alt=\"Dinner\" loading=\"lazy\"\/><\/div>\r\n    <\/div>\r\n\r\n    <!-- Portrait row \u2014 vertical images 9:16 -->\r\n    <span class=\"pf-section-label\">Format vertical \u00b7 Stories &amp; R\u00e9els<\/span>\r\n    <div class=\"pf-portrait-row\">\r\n      <div class=\"pf-portrait-item\"><img decoding=\"async\" src=\"images\/img-32-9e793c6777.jpg\" alt=\"Burger closeup\" loading=\"lazy\"\/><\/div>\r\n      <div class=\"pf-portrait-item\"><img decoding=\"async\" src=\"images\/img-33-270d97e78d.jpg\" alt=\"Frites artisanales\" loading=\"lazy\"\/><\/div>\r\n      <div class=\"pf-portrait-item\"><img decoding=\"async\" src=\"images\/img-34-ea5f655c06.jpg\" alt=\"Roller girl\" loading=\"lazy\"\/><\/div>\r\n      <div class=\"pf-portrait-item\"><img decoding=\"async\" src=\"images\/img-35-6034bd0984.jpg\" alt=\"R5 green forest\" loading=\"lazy\"\/><\/div>\r\n      <div class=\"pf-portrait-item\"><img decoding=\"async\" src=\"images\/img-36-353c436086.jpg\" alt=\"R5 yellow detail\" loading=\"lazy\"\/><\/div>\r\n      <div class=\"pf-portrait-item\"><img decoding=\"async\" src=\"images\/img-37-209a1cb485.jpg\" alt=\"R5 snowboard\" loading=\"lazy\"\/><\/div>\r\n      <div class=\"pf-portrait-item\"><img decoding=\"async\" src=\"images\/img-38-495ed87a1a.jpg\" alt=\"R5 white mountain\" loading=\"lazy\"\/><\/div>\r\n    <\/div>\r\n\r\n    <!-- Accordion toggle -->\r\n    <button class=\"pf-toggle\" id=\"pf-toggle\" onclick=\"document.getElementById('pf-toggle').classList.toggle('open');document.getElementById('pf-gallery').classList.toggle('open');\">\r\n      Voir toute la galerie <span class=\"pf-chev\">\u25be<\/span>\r\n    <\/button>\r\n\r\n    <!-- Gallery accordion \u2014 square\/landscape grid -->\r\n    <div class=\"pf-gallery\" id=\"pf-gallery\">\r\n      <div class=\"pf-grid\">\r\n        <div class=\"pf-cell\"><img decoding=\"async\" src=\"images\/img-39-da321236d8.jpg\" alt=\"Fish closeup\" loading=\"lazy\"\/><\/div>\r\n        <div class=\"pf-cell\"><img decoding=\"async\" src=\"images\/img-40-db9841576e.jpg\" alt=\"Yoga\" loading=\"lazy\"\/><\/div>\r\n        <div class=\"pf-cell\"><img decoding=\"async\" src=\"images\/img-41-c786b46fc2.jpg\" alt=\"Aston Martin\" loading=\"lazy\" style=\"object-position:center 35%\"\/><\/div>\r\n        <div class=\"pf-cell\"><img decoding=\"async\" src=\"images\/img-42-59977b9e12.jpg\" alt=\"Brunch\" loading=\"lazy\"\/><\/div>\r\n        <div class=\"pf-cell\"><img decoding=\"async\" src=\"images\/img-43-fe34da46ff.jpg\" alt=\"Hotel Paris\" loading=\"lazy\"\/><\/div>\r\n\r\n        <div class=\"pf-cell\"><img decoding=\"async\" src=\"images\/img-44-5a4c8ab5f5.jpg\" alt=\"Fashion boutique\" loading=\"lazy\"\/><\/div>\r\n        <div class=\"pf-cell\"><img decoding=\"async\" src=\"images\/img-45-cb4315502c.jpg\" alt=\"Food studio\" loading=\"lazy\"\/><\/div>\r\n        <div class=\"pf-cell\"><img decoding=\"async\" src=\"images\/img-46-a10d1cc033.jpg\" alt=\"SPARQ\" loading=\"lazy\"\/><\/div>\r\n        <div class=\"pf-cell\"><img decoding=\"async\" src=\"images\/img-47-5cab558b9f.jpg\" alt=\"Couple accueil\" loading=\"lazy\"\/><\/div>\r\n        <div class=\"pf-cell\"><img decoding=\"async\" src=\"images\/img-48-4b875bdbde.jpg\" alt=\"Food plates\" loading=\"lazy\"\/><\/div>\r\n\r\n        <div class=\"pf-cell\"><img decoding=\"async\" src=\"images\/img-49-f8de6c9ab1.jpg\" alt=\"Character design\" loading=\"lazy\"\/><\/div>\r\n        <div class=\"pf-cell\"><img decoding=\"async\" src=\"images\/img-50-8e173672ef.jpg\" alt=\"Pastry\" loading=\"lazy\"\/><\/div>\r\n        <div class=\"pf-cell\"><img decoding=\"async\" src=\"images\/img-51-9a7fb67cbf.jpg\" alt=\"Bakery magazine\" loading=\"lazy\"\/><\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n  <\/div>\r\n<\/section>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n     S12 \u00b7 CONTACT \u2014 marketing close\r\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<section id=\"contact\" class=\"contact-sec\">\r\n  <div class=\"wrap\">\r\n    <div class=\"contact-grid\">\r\n\r\n      <div class=\"contact-img rv\">\r\n        <img decoding=\"async\" src=\"images\/img-52-ecdacf0ca0.jpg\" alt=\"ia\u00b7media.be \u2014 Cr\u00e9ation de visuels IA\" loading=\"lazy\"\/>\r\n      <\/div>\r\n\r\n      <div class=\"contact-body rv d1\">\r\n        <span class=\"eyebrow\">Contact \u00b7 Lancez-vous<\/span>\r\n        <h2>N'h\u00e9sitez <em>plus<\/em>.<\/h2>\r\n        <p class=\"contact-hook\">\r\n          Vous avez certainement besoin d'un <strong>pack ADN + 5 images<\/strong> pour d\u00e9couvrir la com cr\u00e9ative assist\u00e9e par <em>IA<\/em>. Chaque projet commence par l\u00e0 \u2014 et les r\u00e9sultats parlent d'eux-m\u00eames.\r\n        <\/p>\r\n\r\n        <div class=\"contact-cta-row\">\r\n          <a href=\"https:\/\/wa.me\/32485164606\" class=\"contact-cta whatsapp\" target=\"_blank\">\ud83d\udcac WhatsApp<\/a>\r\n          <a href=\"mailto:contact@ia-media.be\" class=\"contact-cta primary\">\u2709 contact@ia-media.be<\/a>\r\n        <\/div>\r\n\r\n        <div class=\"contact-infos\">\r\n          <div class=\"ci-item\">\r\n            <span class=\"ci-icon\">\ud83d\udcde<\/span>\r\n            <a href=\"tel:+32485164606\">+32 485 16 46 06<\/a>\r\n          <\/div>\r\n          <div class=\"ci-item\">\r\n            <span class=\"ci-icon\">\u2709<\/span>\r\n            <a href=\"mailto:contact@ia-media.be\">contact@ia-media.be<\/a>\r\n          <\/div>\r\n          <div class=\"ci-item\">\r\n            <span class=\"ci-icon\">\ud83d\udccd<\/span>\r\n            <span>Belgique<\/span>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<\/main>\r\n\r\n<footer class=\"site-footer\">\r\n  <div class=\"wrap\">\r\n    <span><strong>ia\u00b7media.be<\/strong> \u00b7 Cr\u00e9ation de visuels IA \u00b7 Belgique \u00b7 2026<\/span>\r\n    <button class=\"cgv-btn\" onclick=\"openCgvModal()\">\ud83d\udcdc Conditions g\u00e9n\u00e9rales + infos<\/button>\r\n  <\/div>\r\n<\/footer>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 POPUP CONDITIONS G\u00c9N\u00c9RALES + INFOS \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<div class=\"cgv-overlay\" id=\"cgvOverlay\" onclick=\"if(event.target===this) closeCgvModal()\">\r\n  <div class=\"cgv-modal\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"cgvTitle\">\r\n    <div class=\"cgv-modal-head\">\r\n      <div>\r\n        <h3 id=\"cgvTitle\">Conditions g\u00e9n\u00e9rales &amp; infos utiles<\/h3>\r\n        <p>Tout ce qu'il faut savoir avant de commander \u2014 clair, sans surprise.<\/p>\r\n      <\/div>\r\n      <button class=\"cgv-close\" onclick=\"closeCgvModal()\" aria-label=\"Fermer\">\u2715<\/button>\r\n    <\/div>\r\n    <div class=\"cgv-body\">\r\n\r\n      <div class=\"cgv-sec\">\r\n        <div class=\"cgv-sec-head\"><span class=\"cgv-sec-ico\">\ud83d\udcb3<\/span><h4>Fonctionnement g\u00e9n\u00e9ral<\/h4><\/div>\r\n        <p>Ia-media fonctionne \u00e0 la commande pr\u00e9cise et unique. Chaque commande est mise en production d\u00e8s r\u00e9ception du paiement, selon le flux de demandes en cours. <strong>Aucune commande n'est trait\u00e9e sans paiement pr\u00e9alable, et aucun test n'est jamais r\u00e9alis\u00e9 gratuitement.<\/strong> Il est recommand\u00e9 de commander d'abord une capsule de 15 sec pour valider l'avatar et le style avant d'aller plus loin \u2014 ce test payant est directement rentabilis\u00e9 s'il est concluant. \u00c0 la livraison de chaque commande, vous d\u00e9cidez librement de la suite : pack par pack, ou en encha\u00eenant sur le projet complet.<\/p>\r\n        <div class=\"cgv-badge-row\">\r\n          <span class=\"cgv-mini-badge\">Paiement pr\u00e9alable obligatoire<\/span>\r\n          <span class=\"cgv-mini-badge\">Aucun test gratuit<\/span>\r\n          <span class=\"cgv-mini-badge\">Acompte 30% \u00e0 la commande, solde \u00e0 la livraison<\/span>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"cgv-sec\">\r\n        <div class=\"cgv-sec-head\"><span class=\"cgv-sec-ico\">\ud83e\uddec<\/span><h4>Fiche ADN<\/h4><\/div>\r\n        <p>La Fiche ADN (110\u20ac) est un pr\u00e9requis pay\u00e9 une seule fois et r\u00e9utilisable \u00e0 l'infini pour tous vos futurs projets avec ia-media. Elle traduit votre marque \u2014 ton, couleurs, cibles, univers \u2014 en base exploitable pour toutes les g\u00e9n\u00e9rations \u00e0 venir.<\/p>\r\n      <\/div>\r\n\r\n      <div class=\"cgv-sec\">\r\n        <div class=\"cgv-sec-head\"><span class=\"cgv-sec-ico\">\ud83d\udd01<\/span><h4>Niveaux de g\u00e9n\u00e9ration & r\u00e9visions<\/h4><\/div>\r\n        <p>Chaque commande d'un \u00e9l\u00e9ment de pack inclut <strong>3 niveaux de g\u00e9n\u00e9ration<\/strong> (3 retours client possibles). Le 3\u1d49 livrable fait office de version finale. Vous \u00eates libre de la garder telle quelle ou de la compl\u00e9ter par des corrections suppl\u00e9mentaires, factur\u00e9es en temps additionnel.<\/p>\r\n      <\/div>\r\n\r\n      <div class=\"cgv-sec\">\r\n        <div class=\"cgv-sec-head\"><span class=\"cgv-sec-ico\">\ud83c\udfad<\/span><h4>Avatar : cr\u00e9ation, utilisation, rachat<\/h4><\/div>\r\n        <p>La cr\u00e9ation d'un avatar produit une <strong>r\u00e9f\u00e9rence multivue \u00e0 usage interne<\/strong> (4 visages + 4 corps entiers), non livr\u00e9e telle quelle. Elle sert d'acteur r\u00e9current pour g\u00e9n\u00e9rer vos rendus UGC avatar, produit + d\u00e9cor, et vos capsules vid\u00e9o.<\/p>\r\n        <ul>\r\n          <li><strong>Utilisation :<\/strong> seuls les rendus produits avec l'avatar (images, vid\u00e9os) vous sont livr\u00e9s \u2014 l'avatar reste un outil de travail r\u00e9utilisable pour vos prochaines commandes.<\/li>\r\n          <li><strong>Rachat complet :<\/strong> possible sur demande, pour cession et autoproduction de votre c\u00f4t\u00e9. Tarif d\u00e9termin\u00e9 selon le projet, discut\u00e9 uniquement apr\u00e8s un premier test vid\u00e9o concluant \u2014 jamais de cession avant test payant r\u00e9alis\u00e9.<\/li>\r\n        <\/ul>\r\n      <\/div>\r\n\r\n      <div class=\"cgv-sec\">\r\n        <div class=\"cgv-sec-head\"><span class=\"cgv-sec-ico\">\ud83c\udfac<\/span><h4>Vid\u00e9o, montage & logo<\/h4><\/div>\r\n        <p>Une capsule vid\u00e9o ne comprend pas le montage \/ post-production par d\u00e9faut. Le montage est n\u00e9cessaire si vous souhaitez ins\u00e9rer un \u00e9l\u00e9ment apr\u00e8s g\u00e9n\u00e9ration \u2014 par exemple votre <strong>logo en fin de s\u00e9quence<\/strong>. Pour int\u00e9grer un logo pr\u00e9cis\u00e9ment, il doit \u00eatre fourni en haute r\u00e9solution avec une description d\u00e9taill\u00e9e de son usage souhait\u00e9 (taille, position, dur\u00e9e d'affichage).<\/p>\r\n      <\/div>\r\n\r\n      <div class=\"cgv-sec\">\r\n        <div class=\"cgv-sec-head\"><span class=\"cgv-sec-ico\">\ud83d\uddbc\ufe0f<\/span><h4>D\u00e9cors & \u00e9l\u00e9ments personnalis\u00e9s<\/h4><\/div>\r\n        <p>Tous les \u00e9l\u00e9ments personnalis\u00e9s \u2014 avatars, produits sp\u00e9cifiques, d\u00e9cors sp\u00e9cifiques \u2014 sont syst\u00e9matiquement produits via un pack de base de 5 images. C'est un pr\u00e9requis obligatoire, aussi bien pour la suite du projet que pour toute vid\u00e9o : <strong>aucun projet vid\u00e9o n'est possible sans base images solide<\/strong>, accompagn\u00e9e de descriptions d\u00e9taill\u00e9es. Une capsule vid\u00e9o comprend 3 \u00e0 5 cuts, avec 3 d\u00e9cors maximum inclus \u2014 au-del\u00e0, les d\u00e9cors suppl\u00e9mentaires sont propos\u00e9s sur devis.<\/p>\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<script>\r\nfunction openCgvModal(){\r\n  document.getElementById('cgvOverlay').classList.add('open');\r\n  document.body.style.overflow = 'hidden';\r\n}\r\nfunction closeCgvModal(){\r\n  document.getElementById('cgvOverlay').classList.remove('open');\r\n  document.body.style.overflow = '';\r\n}\r\ndocument.addEventListener('keydown', function(e){\r\n  if(e.key === 'Escape') closeCgvModal();\r\n});\r\n<\/script>\r\n\r\n<script>\r\n\/\/ \u2500\u2500 Reveal on scroll \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\ndocument.documentElement.classList.add('js-reveal');\r\n(function(){\r\n  if(!('IntersectionObserver' in window)) {\r\n    document.querySelectorAll('.rv').forEach(function(el){ el.classList.add('in'); });\r\n    return;\r\n  }\r\n  var io = new IntersectionObserver(function(entries){\r\n    entries.forEach(function(e){\r\n      if(e.isIntersecting){ e.target.classList.add('in'); io.unobserve(e.target); }\r\n    });\r\n  }, { threshold: 0.12, rootMargin: '0px 0px -8% 0px' });\r\n  document.querySelectorAll('.rv').forEach(function(el){ io.observe(el); });\r\n})();\r\n\r\n\/\/ \u2500\u2500 Burger menu (dropdown header) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n(function(){\r\n  var burger = document.getElementById('burger');\r\n  var nav = document.getElementById('site-nav');\r\n  if(!burger || !nav) return;\r\n  burger.addEventListener('click', function(){\r\n    var open = nav.classList.toggle('open');\r\n    burger.setAttribute('aria-expanded', open ? 'true' : 'false');\r\n    document.body.style.overflow = open ? 'hidden' : '';\r\n  });\r\n  \/\/ Close on link click\r\n  nav.querySelectorAll('a').forEach(function(a){\r\n    a.addEventListener('click', function(){\r\n      nav.classList.remove('open');\r\n      burger.setAttribute('aria-expanded', 'false');\r\n      document.body.style.overflow = '';\r\n    });\r\n  });\r\n})();\r\n\r\n\/\/ \u2500\u2500 Count-up hero stat \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n(function(){\r\n  var els = document.querySelectorAll('[data-countup]');\r\n  if(!els.length) return;\r\n  function anim(el, to){\r\n    var start = performance.now(), dur = 1200;\r\n    function step(now){\r\n      var t = Math.min(1, (now-start)\/dur);\r\n      var eased = 1 - Math.pow(1-t, 3);\r\n      el.textContent = Math.round(eased * to);\r\n      if(t < 1) requestAnimationFrame(step);\r\n    }\r\n    requestAnimationFrame(step);\r\n  }\r\n  var io = new IntersectionObserver(function(entries){\r\n    entries.forEach(function(e){\r\n      if(e.isIntersecting){\r\n        anim(e.target, parseInt(e.target.dataset.countup, 10));\r\n        io.unobserve(e.target);\r\n      }\r\n    });\r\n  }, { threshold: 0.5 });\r\n  els.forEach(function(el){ io.observe(el); });\r\n})();\r\n\r\n\/\/ \u2500\u2500 Pack calculator \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n(function(){\r\n  var state = { pack: null, mult: 1, video: null, videoMult: 1, opts: {}, optMult: { montage: 1, soustitrage: 1 } };\r\n\r\n  window.selectPack = function(el){\r\n    var pack = el.dataset.pack;\r\n    if(state.pack === pack){ state.pack = null; }\r\n    else { state.pack = pack; }\r\n    if(state.pack === 'fast' || !state.pack){\r\n      state.video = null; state.videoMult = 1; state.opts = {}; state.optMult = { montage:1, soustitrage:1 };\r\n    }\r\n    state.mult = (state.pack === 'fast' || state.pack === 'avatar') ? 1 : state.mult;\r\n    \/\/ Reset video if switching pack type\r\n    if(state.video === 'video' && (state.pack === 'adn5ugc' || state.pack === 'avatar')) state.video = null;\r\n    if(state.video === 'video-ugc' && state.pack === 'adn5') state.video = null;\r\n    state.videoMult = 1;\r\n    updateUI();\r\n  };\r\n\r\n  window.setMult = function(n){ state.mult = n; updateUI(); };\r\n\r\n  window.toggleVideo = function(el){\r\n    if(el.classList.contains('locked') || el.classList.contains('dimmed')) return;\r\n    var addon = el.dataset.addon;\r\n    if(state.video === addon){ state.video = null; state.videoMult = 1; state.opts = {}; state.optMult = {montage:1,soustitrage:1}; }\r\n    else { state.video = addon; state.videoMult = 1; }\r\n    updateUI();\r\n  };\r\n\r\n  window.setVideoMult = function(n){ state.videoMult = n; updateUI(); };\r\n\r\n  window.toggleOpt = function(opt){\r\n    state.opts[opt] = !state.opts[opt];\r\n    if(!state.opts[opt]) state.optMult[opt] = 1;\r\n    updateUI();\r\n  };\r\n\r\n  window.setOptMult = function(opt, n){\r\n    state.optMult[opt] = n;\r\n    updateUI();\r\n  };\r\n\r\n  function calcMontagePrice(n){ return n <= 0 ? 0 : 40 + Math.max(0, n - 1) * 30; }\r\n  function calcSoustitragePrice(n){ return n <= 0 ? 0 : 30 + Math.max(0, n - 1) * 20; }\r\n\r\n  function updateUI(){\r\n    \/\/ Pack cards\r\n    document.querySelectorAll('.pls-card:not(.pls-addon)').forEach(function(c){\r\n      c.classList.toggle('selected', c.dataset.pack === state.pack);\r\n    });\r\n    \/\/ Multiplier buttons\r\n    document.querySelectorAll('#pack-multi .pm-btn').forEach(function(b){\r\n      b.classList.toggle('active', +b.dataset.mult === state.mult);\r\n    });\r\n\r\n    var hasAdn = (state.pack === 'adn5' || state.pack === 'adn5ugc' || state.pack === 'avatar');\r\n    var isStd = (state.pack === 'adn5');\r\n    var isUgc = (state.pack === 'adn5ugc' || state.pack === 'avatar');\r\n\r\n    \/\/ Video cards: locked \/ active \/ dimmed\r\n    document.querySelectorAll('.pls-addon').forEach(function(v){\r\n      var addon = v.dataset.addon;\r\n      var isMatch = (addon === 'video' && isStd) || (addon === 'video-ugc' && isUgc);\r\n      var isOther = (addon === 'video' && isUgc) || (addon === 'video-ugc' && isStd);\r\n      v.classList.toggle('locked', !hasAdn);\r\n      v.classList.toggle('dimmed', hasAdn && isOther);\r\n      v.classList.toggle('selected', v.dataset.addon === state.video);\r\n      var lockBar = v.querySelector('.pv-lock-bar');\r\n      if(!hasAdn){\r\n        var msg = addon === 'video' ? 'D\\u00e9bloqu\\u00e9 avec un pack ADN+5' : 'D\\u00e9bloqu\\u00e9 avec un pack ADN+5 UGC';\r\n        lockBar.innerHTML = '<span class=\"lock-icon\">\\uD83D\\uDD12<\/span> ' + msg;\r\n      } else if(isOther){\r\n        var reqPack = addon === 'video' ? 'ADN+5 images' : 'ADN+5 UGC';\r\n        lockBar.innerHTML = '<span class=\"lock-icon\" style=\"opacity:.4\">\\u2014<\/span> Requiert pack ' + reqPack;\r\n      } else {\r\n        lockBar.innerHTML = '<span class=\"lock-icon\">\\u2713<\/span> Disponible \\u2014 cliquez pour ajouter';\r\n      }\r\n    });\r\n\r\n    if(!hasAdn){ state.video = null; state.videoMult = 1; state.opts = {}; state.optMult = {montage:1,soustitrage:1}; }\r\n\r\n    \/\/ Video multiplier row\r\n    var vmRow = document.getElementById('video-multi');\r\n    if(vmRow){\r\n    vmRow.classList.toggle('show', !!state.video);\r\n    vmRow.querySelectorAll('.pm-btn').forEach(function(b){\r\n      b.classList.toggle('active', +b.dataset.vmult === state.videoMult);\r\n    });\r\n    } \/\/ end vmRow null check\r\n\r\n    \/\/ Montage\/sous-titrage UI\r\n    document.querySelectorAll('.pmr-card').forEach(function(c){\r\n      var opt = c.dataset.opt;\r\n      c.classList.toggle('selected', !!state.opts[opt]);\r\n    });\r\n\r\n    \/\/ Show montage\/sous-titrage multipliers when videoMult > 1\r\n    var showOptMult = state.videoMult > 1;\r\n    var mm = document.getElementById('montage-mult');\r\n    var sm = document.getElementById('soustitrage-mult');\r\n    if(mm) mm.style.display = (showOptMult && state.opts.montage) ? 'flex' : 'none';\r\n    if(sm) sm.style.display = (showOptMult && state.opts.soustitrage) ? 'flex' : 'none';\r\n\r\n    \/\/ Cap opt mult to videoMult\r\n    if(state.optMult.montage > state.videoMult) state.optMult.montage = state.videoMult;\r\n    if(state.optMult.soustitrage > state.videoMult) state.optMult.soustitrage = state.videoMult;\r\n\r\n    \/\/ Update opt mult buttons active state\r\n    ['montage','soustitrage'].forEach(function(opt){\r\n      var el = document.getElementById(opt+'-mult');\r\n      if(!el) return;\r\n      el.querySelectorAll('.pm-btn').forEach(function(b,i){\r\n        b.classList.toggle('active', (i+1) === state.optMult[opt]);\r\n        b.style.display = (i+1) <= state.videoMult ? '' : 'none';\r\n      });\r\n    });\r\n\r\n    \/\/ Update montage\/sous-titrage prices\r\n    var mp = document.getElementById('montage-price');\r\n    var sp = document.getElementById('soustitrage-price');\r\n    if(mp){\r\n      var mCost = calcMontagePrice(state.opts.montage ? state.optMult.montage : 0);\r\n      mp.innerHTML = '+' + (state.opts.montage ? mCost : 40) + '<span class=\"pc-unit\">\\u20ac<\/span>';\r\n    }\r\n    if(sp){\r\n      var sCost = calcSoustitragePrice(state.opts.soustitrage ? state.optMult.soustitrage : 0);\r\n      sp.innerHTML = '+' + (state.opts.soustitrage ? sCost : 30) + '<span class=\"pc-unit\">\\u20ac<\/span>';\r\n    }\r\n\r\n    \/\/ Calculate total\r\n    var total = 0; var items = [];\r\n    if(state.pack === 'fast'){\r\n      total = 110; items.push('Fast Test 110\\u20ac');\r\n    } else if(state.pack === 'adn5'){\r\n      total = 110 + (115 * state.mult);\r\n      items.push('ADN 110\\u20ac');\r\n      items.push(state.mult+'\\u00d75 images '+(115*state.mult)+'\\u20ac');\r\n    } else if(state.pack === 'adn5ugc'){\r\n      total = 110 + (135 * state.mult);\r\n      items.push('ADN 110\\u20ac');\r\n      items.push(state.mult+'\\u00d75 UGC '+(135*state.mult)+'\\u20ac');\r\n    } else if(state.pack === 'avatar'){\r\n      total = 110 + 135;\r\n      items.push('ADN 110\\u20ac');\r\n      items.push('Cr\\u00e9ation Avatar 135\\u20ac');\r\n    }\r\n\r\n    if(state.video === 'video'){\r\n      var vc = 150 * state.videoMult;\r\n      total += vc;\r\n      items.push(state.videoMult+'\\u00d7 Vid\\u00e9o +'+vc+'\\u20ac');\r\n    }\r\n    if(state.video === 'video-ugc'){\r\n      var vc = 190 * state.videoMult;\r\n      total += vc;\r\n      items.push(state.videoMult+'\\u00d7 Vid\\u00e9o UGC +'+vc+'\\u20ac');\r\n    }\r\n\r\n    if(state.opts.montage){\r\n      var mCost = calcMontagePrice(state.optMult.montage);\r\n      total += mCost;\r\n      items.push('Montage'+(state.optMult.montage>1?' \\u00d7'+state.optMult.montage:'')+' +'+mCost+'\\u20ac');\r\n    }\r\n    if(state.opts.soustitrage){\r\n      var sCost = calcSoustitragePrice(state.optMult.soustitrage);\r\n      total += sCost;\r\n      items.push('Sous-titrage'+(state.optMult.soustitrage>1?' \\u00d7'+state.optMult.soustitrage:'')+' +'+sCost+'\\u20ac');\r\n    }\r\n\r\n    \/\/ Total bar recap\r\n    var itemsEl = document.getElementById('recap-items');\r\n    var totalEl = document.getElementById('recap-total');\r\n    if(itemsEl){\r\n      itemsEl.innerHTML = items.length ?\r\n        items.map(function(i){ return '<span class=\"ptb-tag\">'+i+'<\/span>'; }).join('') :\r\n        '<span class=\"ptb-tag\">\\u2191 S\\u00e9lectionnez un pack<\/span>';\r\n    }\r\n    if(totalEl) totalEl.textContent = total+'\\u20ac';\r\n\r\n    \/\/ Mobile bottom bar (removed in V8)\r\n    var mob = document.getElementById('pack-bottom-mobile');\r\n    var pbmT = document.getElementById('pbm-total');\r\n    if(pbmT) pbmT.textContent = total+'\\u20ac';\r\n    if(mob) mob.classList.toggle('visible', !!state.pack && window._packsInView);\r\n  }\r\n})();\r\n\r\n\r\n\r\n\/\/ \u2500\u2500 Mobile bottom bar: only visible in packs zone \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n(function(){\r\n  window._packsInView = false;\r\n  var sec = document.getElementById('packs');\r\n  if(!sec || !('IntersectionObserver' in window)) return;\r\n  var io = new IntersectionObserver(function(entries){\r\n    entries.forEach(function(e){\r\n      window._packsInView = e.isIntersecting;\r\n      var mob = document.getElementById('pack-bottom-mobile');\r\n      if(!mob) return;\r\n      if(!e.isIntersecting){ mob.classList.remove('visible'); }\r\n      else {\r\n        var total = document.getElementById('pbm-total');\r\n        if(total && total.textContent !== '0\\u20ac') mob.classList.add('visible');\r\n      }\r\n    });\r\n  }, { threshold: 0.05 });\r\n  io.observe(sec);\r\n})();\r\n\r\n\/\/ \u2500\u2500 DNA Helix Animation \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n(function(){\r\n  var canvas = document.getElementById('dna-canvas');\r\n  if(!canvas) return;\r\n  var ctx = canvas.getContext('2d');\r\n\r\n  \/\/ State \u2014 controlled by sliders\r\n  var H = {\r\n    opacity: 0.30,\r\n    hue: 20,\r\n    sat: 60,\r\n    speed: 1.0,\r\n    size: 1.0,\r\n    lineWidth: 2,\r\n    posX: 0.85,\r\n    pairs: 12\r\n  };\r\n\r\n  function resize(){\r\n    canvas.width = window.innerWidth;\r\n    canvas.height = window.innerHeight;\r\n  }\r\n  resize();\r\n  window.addEventListener('resize', resize);\r\n\r\n  var t = 0;\r\n\r\n  function draw(){\r\n    t += 0.008 * H.speed;\r\n    ctx.clearRect(0, 0, canvas.width, canvas.height);\r\n    ctx.globalAlpha = H.opacity;\r\n\r\n    var cx = canvas.width * H.posX;\r\n    var amplitude = 60 * H.size;\r\n    var vertSpacing = canvas.height \/ (H.pairs + 1);\r\n    var totalH = canvas.height + 200;\r\n    var offsetY = (t * 80) % vertSpacing;\r\n\r\n    \/\/ Colors\r\n    var c1 = 'hsl(' + H.hue + ',' + H.sat + '%,55%)';\r\n    var c2 = 'hsl(' + ((H.hue + 40) % 360) + ',' + Math.max(H.sat - 15, 10) + '%,45%)';\r\n    var c3 = 'hsl(' + ((H.hue + 20) % 360) + ',' + Math.max(H.sat - 20, 10) + '%,50%)';\r\n\r\n    \/\/ Draw strands\r\n    ctx.lineWidth = H.lineWidth;\r\n    ctx.lineCap = 'round';\r\n\r\n    \/\/ Strand 1\r\n    ctx.beginPath();\r\n    ctx.strokeStyle = c1;\r\n    for(var y = -100 + offsetY; y < totalH; y += 3){\r\n      var phase = (y * 0.018 \/ H.size) + t * 2;\r\n      var x = cx + Math.sin(phase) * amplitude;\r\n      if(y === -100 + offsetY) ctx.moveTo(x, y);\r\n      else ctx.lineTo(x, y);\r\n    }\r\n    ctx.stroke();\r\n\r\n    \/\/ Strand 2\r\n    ctx.beginPath();\r\n    ctx.strokeStyle = c2;\r\n    for(var y = -100 + offsetY; y < totalH; y += 3){\r\n      var phase = (y * 0.018 \/ H.size) + t * 2 + Math.PI;\r\n      var x = cx + Math.sin(phase) * amplitude;\r\n      if(y === -100 + offsetY) ctx.moveTo(x, y);\r\n      else ctx.lineTo(x, y);\r\n    }\r\n    ctx.stroke();\r\n\r\n    \/\/ Rungs (base pairs)\r\n    for(var i = 0; i < H.pairs + 4; i++){\r\n      var ry = -100 + offsetY + i * vertSpacing;\r\n      if(ry < -50 || ry > canvas.height + 50) continue;\r\n      var phase1 = (ry * 0.018 \/ H.size) + t * 2;\r\n      var phase2 = phase1 + Math.PI;\r\n      var x1 = cx + Math.sin(phase1) * amplitude;\r\n      var x2 = cx + Math.sin(phase2) * amplitude;\r\n\r\n      \/\/ Depth: rung opacity based on sin phase\r\n      var depth = (Math.sin(phase1) + 1) \/ 2;\r\n      ctx.globalAlpha = H.opacity * (0.3 + depth * 0.7);\r\n      ctx.lineWidth = H.lineWidth * 0.6;\r\n\r\n      ctx.beginPath();\r\n      ctx.strokeStyle = c3;\r\n      ctx.moveTo(x1, ry);\r\n      ctx.lineTo(x2, ry);\r\n      ctx.stroke();\r\n\r\n      \/\/ Nodes\r\n      ctx.globalAlpha = H.opacity * (0.4 + depth * 0.6);\r\n      var nodeR = (H.lineWidth + 1) * H.size * 0.6;\r\n      ctx.fillStyle = c1;\r\n      ctx.beginPath();\r\n      ctx.arc(x1, ry, nodeR, 0, Math.PI * 2);\r\n      ctx.fill();\r\n\r\n      ctx.fillStyle = c2;\r\n      ctx.beginPath();\r\n      ctx.arc(x2, ry, nodeR, 0, Math.PI * 2);\r\n      ctx.fill();\r\n\r\n      ctx.globalAlpha = H.opacity;\r\n      ctx.lineWidth = H.lineWidth;\r\n    }\r\n\r\n    requestAnimationFrame(draw);\r\n  }\r\n  draw();\r\n\r\n})();\r\n\r\n\/\/ \u2500\u2500 Smooth scroll \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\ndocument.querySelectorAll('a[href^=\"#\"]').forEach(function(a){\r\n  a.addEventListener('click', function(e){\r\n    var href = a.getAttribute('href');\r\n    if(href.length < 2) return;\r\n    var el = document.querySelector(href);\r\n    if(!el) return;\r\n    e.preventDefault();\r\n    el.scrollIntoView({ behavior: 'smooth', block: 'start' });\r\n  });\r\n});\r\n\r\n\/\/ \u2500\u2500 M\u00e9thode accordion (mobile only) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n(function(){\r\n  var heads = document.querySelectorAll('.m-step-head');\r\n  if(!heads.length) return;\r\n  function isMobile(){ return window.matchMedia('(max-width: 820px)').matches; }\r\n  heads.forEach(function(head){\r\n    head.addEventListener('click', function(){\r\n      if(!isMobile()) return;\r\n      head.closest('.m-step').classList.toggle('is-open');\r\n    });\r\n  });\r\n  \/\/ On resize from mobile\u2192desktop, ensure no leftover .is-open hurts layout (desktop ignores it but clean up)\r\n  window.addEventListener('resize', function(){\r\n    if(!isMobile()) {\r\n      document.querySelectorAll('.m-step.is-open').forEach(function(s){ s.classList.remove('is-open'); });\r\n    }\r\n  });\r\n})();\r\n\r\n\/\/ \u2500\u2500 Theme Switcher \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n(function(){\r\n  var saved = localStorage.getItem('ia-theme') || '';\r\n  if(saved) document.documentElement.setAttribute('data-theme', saved);\r\n\r\n  var dots = document.querySelectorAll('.tt-dot');\r\n  dots.forEach(function(btn){\r\n    var val = btn.getAttribute('data-theme-val');\r\n    if(val === saved){ btn.classList.add('is-active'); }\r\n    else { btn.classList.remove('is-active'); }\r\n\r\n    btn.addEventListener('click', function(){\r\n      var v = this.getAttribute('data-theme-val');\r\n      dots.forEach(function(b){ b.classList.remove('is-active'); });\r\n      this.classList.add('is-active');\r\n      if(v) document.documentElement.setAttribute('data-theme', v);\r\n      else document.documentElement.removeAttribute('data-theme');\r\n      localStorage.setItem('ia-theme', v);\r\n      \/\/ Update meta theme-color\r\n      var colors = {'':'#0e0b18','atelier':'#efe6d3'};\r\n      var meta = document.querySelector('meta[name=\"theme-color\"]');\r\n      if(meta) meta.setAttribute('content', colors[v] || '#efe6d3');\r\n    });\r\n  });\r\n\r\n  \/\/ Apply saved theme on load (dots already set above)\r\n  if(saved){\r\n    var colors = {'':'#0e0b18','atelier':'#efe6d3'};\r\n    var meta = document.querySelector('meta[name=\"theme-color\"]');\r\n    if(meta) meta.setAttribute('content', colors[saved] || '#efe6d3');\r\n  }\r\n})();\r\n<\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>ia\u00b7media.be \u2014 Studio de visuels IA, fid\u00e8les \u00e0 votre ADN ia\u00b7media JUIN + Helix ia ia\u00b7media.be M\u00e9thode Packs UGC Plans Module IA Portfolio Contact Mixez vos packs \u2192 Studio IA \u00b7 Belgique \u00b7 2026 Vos visuels IA, fid\u00e8les \u00e0 votre ADN. Vous avez les photos, l&#8217;id\u00e9e, l&#8217;\u00e9nergie. Nous transformons tout \u00e7a en syst\u00e8me visuel coh\u00e9rent [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-29","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"http:\/\/www.ia-media.be\/index.php\/wp-json\/wp\/v2\/pages\/29","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.ia-media.be\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/www.ia-media.be\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/www.ia-media.be\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.ia-media.be\/index.php\/wp-json\/wp\/v2\/comments?post=29"}],"version-history":[{"count":32,"href":"http:\/\/www.ia-media.be\/index.php\/wp-json\/wp\/v2\/pages\/29\/revisions"}],"predecessor-version":[{"id":63,"href":"http:\/\/www.ia-media.be\/index.php\/wp-json\/wp\/v2\/pages\/29\/revisions\/63"}],"wp:attachment":[{"href":"http:\/\/www.ia-media.be\/index.php\/wp-json\/wp\/v2\/media?parent=29"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}