{"id":43,"date":"2024-03-10T22:07:22","date_gmt":"2024-03-10T21:07:22","guid":{"rendered":"https:\/\/afaritia.fr\/?page_id=43"},"modified":"2026-02-22T18:15:20","modified_gmt":"2026-02-22T17:15:20","slug":"test","status":"publish","type":"page","link":"https:\/\/afaritia.fr\/","title":{"rendered":"Accueil"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\nAf\u0101r\u012bt IA \u2014 D\u00e9mocratisation de l'Intelligence Artificielle<\/title>\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Barlow+Condensed:wght@400;500;600;700&family=Source+Sans+3:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\r\n<!-- NOTE: Barlow Condensed remplace Proxima Nova Condensed pour la maquette. \r\n En production WordPress, utiliser Proxima Nova Condensed via Adobe Fonts. -->\r\n<style>\r\n:root {\r\n --red: #D42027;\r\n --red-dark: #A81A1F;\r\n --red-glow: rgba(212, 32, 39, 0.15);\r\n --white: #F5F5F5;\r\n --off-white: #D8D8D8;\r\n --black: #0A0A0A;\r\n --dark: #111111;\r\n --dark-card: #1A1A1A;\r\n --dark-border: #2A2A2A;\r\n --text-muted: #A0A0A0;\r\n --font-display: 'Barlow Condensed', sans-serif; \/* Proxima Nova Condensed en prod *\/\r\n --font-body: 'Source Sans 3', sans-serif;\r\n}\r\n\r\n* { margin: 0; padding: 0; box-sizing: border-box; }\r\n\r\nhtml {\r\n scroll-behavior: smooth;\r\n scroll-padding-top: 70px;\r\n}\r\n\r\nbody {\r\n background: var(--black);\r\n color: var(--white);\r\n font-family: var(--font-body);\r\n font-weight: 300;\r\n line-height: 1.7;\r\n overflow-x: hidden;\r\n}\r\n\r\n\/* ===== NOISE OVERLAY ===== *\/\r\nbody::before {\r\n content: '';\r\n position: fixed;\r\n top: 0; left: 0;\r\n width: 100%; height: 100%;\r\n background-image: url(\"data:image\/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'\/%3E%3C\/svg%3E\");\r\n pointer-events: none;\r\n z-index: 9999;\r\n}\r\n\r\n\/* ===== NAVIGATION ===== *\/\r\nnav {\r\n position: sticky;\r\n top: 0;\r\n width: 100%;\r\n z-index: 1000;\r\n background: rgba(10, 10, 10, 0.85);\r\n backdrop-filter: blur(20px);\r\n border-bottom: 1px solid var(--dark-border);\r\n transition: all 0.3s ease;\r\n}\r\n\r\nnav .nav-inner {\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n padding: 0 2rem;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n height: 60px;\r\n}\r\n\r\nnav .logo {\r\n display: none;\r\n}\r\n\r\nnav .nav-links {\r\n display: flex;\r\n gap: 2rem;\r\n align-items: center;\r\n list-style: none;\r\n}\r\n\r\nnav .nav-links a {\r\n color: var(--off-white);\r\n text-decoration: none;\r\n font-size: 0.85rem;\r\n font-weight: 400;\r\n letter-spacing: 0.03em;\r\n text-transform: uppercase;\r\n transition: color 0.2s;\r\n position: relative;\r\n}\r\n\r\nnav .nav-links a::after {\r\n content: '';\r\n position: absolute;\r\n bottom: -4px;\r\n left: 0;\r\n width: 0;\r\n height: 1px;\r\n background: var(--red);\r\n transition: width 0.3s ease;\r\n}\r\n\r\nnav .nav-links a:hover { color: var(--white); }\r\nnav .nav-links a:hover::after { width: 100%; }\r\n\r\nnav .nav-links .btn-contact {\r\n background: var(--red);\r\n color: #FFFFFF !important;\r\n padding: 0.5rem 1.2rem;\r\n border-radius: 2px;\r\n font-weight: 500;\r\n transition: background 0.2s;\r\n}\r\n\r\nnav .nav-links .btn-contact::after { display: none; }\r\nnav .nav-links .btn-contact:hover { background: var(--red-dark); color: #FFFFFF !important; }\r\n\r\n\/* Mobile nav *\/\r\n.nav-toggle {\r\n display: none;\r\n background: none;\r\n border: none;\r\n color: var(--white);\r\n font-size: 1.5rem;\r\n cursor: pointer;\r\n}\r\n\r\n\/* ===== SECTIONS ===== *\/\r\nsection {\r\n padding: 6rem 2rem;\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n}\r\n\r\n.section-label {\r\n font-family: var(--font-display);\r\n font-size: 0.85rem;\r\n text-transform: uppercase;\r\n letter-spacing: 0.2em;\r\n color: var(--red);\r\n font-weight: 700;\r\n margin-bottom: 1.5rem;\r\n display: flex;\r\n align-items: center;\r\n gap: 1rem;\r\n}\r\n\r\n.section-label::before {\r\n content: '';\r\n display: block;\r\n width: 32px;\r\n height: 1px;\r\n background: var(--red);\r\n}\r\n\r\nh2 {\r\n font-family: var(--font-display);\r\n font-size: 2.8rem;\r\n font-weight: 700;\r\n line-height: 1.2;\r\n margin-bottom: 1.5rem;\r\n color: var(--white);\r\n}\r\n\r\nh3 {\r\n font-family: var(--font-display);\r\n font-size: 1.4rem;\r\n font-weight: 700;\r\n line-height: 1.3;\r\n color: var(--white);\r\n margin-bottom: 0.75rem;\r\n}\r\n\r\np { color: var(--off-white); margin-bottom: 1rem; }\r\np:last-child { margin-bottom: 0; }\r\n\r\na.inline-link {\r\n color: var(--red);\r\n text-decoration: none;\r\n font-weight: 600;\r\n border-bottom: 1px solid transparent;\r\n transition: border-color 0.2s;\r\n}\r\na.inline-link:hover { border-bottom-color: var(--red); }\r\n\r\n\/* ===== HERO ===== *\/\r\n#hero {\r\n min-height: 90vh;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n position: relative;\r\n overflow: hidden;\r\n}\r\n\r\n#hero::after {\r\n content: '';\r\n position: absolute;\r\n top: 0; right: -20%;\r\n width: 600px; height: 600px;\r\n background: radial-gradient(circle, var(--red-glow) 0%, transparent 70%);\r\n pointer-events: none;\r\n}\r\n\r\n#emberCanvas {\r\n position: absolute;\r\n top: 0; left: 0;\r\n width: 100%;\r\n height: 100%;\r\n pointer-events: none;\r\n z-index: 0;\r\n}\r\n\r\n.hero-content {\r\n position: relative;\r\n z-index: 1;\r\n z-index: 1;\r\n}\r\n\r\n.hero-content h1 {\r\n font-family: var(--font-display);\r\n font-size: clamp(2.5rem, 6vw, 4.5rem);\r\n font-weight: 700;\r\n line-height: 1.1;\r\n margin-bottom: 2rem;\r\n color: var(--white);\r\n}\r\n\r\n.hero-content h1 em {\r\n font-style: normal;\r\n color: var(--red);\r\n}\r\n\r\n.hero-tagline {\r\n font-size: 1.15rem;\r\n max-width: 600px;\r\n color: var(--off-white);\r\n margin-bottom: 3rem;\r\n line-height: 1.8;\r\n}\r\n\r\n.hero-cta {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 0.75rem;\r\n background: var(--red);\r\n color: #FFFFFF !important;\r\n text-decoration: none;\r\n padding: 0.9rem 2rem;\r\n font-family: var(--font-display);\r\n font-size: 0.85rem;\r\n font-weight: 700;\r\n text-transform: uppercase;\r\n letter-spacing: 0.1em;\r\n border: none;\r\n transition: all 0.3s;\r\n}\r\n\r\n.hero-cta:hover {\r\n background: var(--red-dark);\r\n color: #FFFFFF !important;\r\n transform: translateX(4px);\r\n}\r\n\r\n.hero-cta .arrow { transition: transform 0.3s; }\r\n.hero-cta:hover .arrow { transform: translateX(4px); }\r\n\r\n\/* ===== MISSION ===== *\/\r\n#mission {\r\n border-top: 1px solid var(--dark-border);\r\n}\r\n\r\n.mission-grid {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 4rem;\r\n margin-top: 2rem;\r\n}\r\n\r\n.mission-text {\r\n font-size: 1.05rem;\r\n line-height: 1.9;\r\n}\r\n\r\n.mission-values {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 1.5rem;\r\n}\r\n\r\n.value-item {\r\n padding-left: 1.5rem;\r\n border-left: 2px solid var(--red);\r\n}\r\n\r\n.value-item h4 {\r\n font-family: var(--font-display);\r\n font-size: 0.85rem;\r\n text-transform: uppercase;\r\n letter-spacing: 0.1em;\r\n color: var(--white);\r\n font-weight: 700;\r\n margin-bottom: 0.4rem;\r\n}\r\n\r\n.value-item p {\r\n font-size: 0.9rem;\r\n color: var(--text-muted);\r\n margin: 0;\r\n}\r\n\r\n\/* ===== ETHICAL BANNER ===== *\/\r\n.ethical-banner {\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n padding: 3rem 2rem;\r\n}\r\n\r\n.ethical-banner-inner {\r\n background: linear-gradient(135deg, var(--dark-card) 0%, #1F1215 100%);\r\n border: 1px solid rgba(212, 32, 39, 0.2);\r\n padding: 3rem;\r\n position: relative;\r\n overflow: hidden;\r\n}\r\n\r\n.ethical-banner-inner::before {\r\n content: '';\r\n position: absolute;\r\n top: 0; left: 0;\r\n width: 4px; height: 100%;\r\n background: var(--red);\r\n}\r\n\r\n.ethical-banner h3 {\r\n font-size: 1.6rem;\r\n margin-bottom: 1rem;\r\n}\r\n\r\n.ethical-banner p {\r\n max-width: 800px;\r\n font-size: 0.95rem;\r\n line-height: 1.8;\r\n}\r\n\r\n.ethical-banner .quitgpt-link {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 0.5rem;\r\n margin-top: 1rem;\r\n color: var(--red);\r\n text-decoration: none;\r\n font-family: var(--font-display);\r\n font-size: 0.75rem;\r\n text-transform: uppercase;\r\n letter-spacing: 0.1em;\r\n font-weight: 700;\r\n transition: gap 0.2s;\r\n}\r\n\r\n.ethical-banner .quitgpt-link:hover { gap: 0.8rem; }\r\n\r\n\/* ===== SERVICES ===== *\/\r\n#services {\r\n border-top: 1px solid var(--dark-border);\r\n}\r\n\r\n.services-grid {\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 2rem;\r\n margin-top: 3rem;\r\n}\r\n\r\n.service-card {\r\n background: var(--dark-card);\r\n border: 1px solid var(--dark-border);\r\n padding: 2.5rem 2rem;\r\n transition: border-color 0.3s, transform 0.3s;\r\n position: relative;\r\n}\r\n\r\n.service-card:hover {\r\n border-color: var(--red);\r\n transform: translateY(-4px);\r\n}\r\n\r\n.service-card::before {\r\n content: attr(data-num);\r\n font-family: var(--font-display);\r\n font-size: 3rem;\r\n font-weight: 700;\r\n color: rgba(212, 32, 39, 0.35);\r\n position: absolute;\r\n top: 1rem;\r\n right: 1.5rem;\r\n}\r\n\r\n.service-card h3 { font-size: 1.3rem; margin-bottom: 1rem; }\r\n\r\n.service-card p {\r\n font-size: 0.88rem;\r\n color: var(--text-muted);\r\n line-height: 1.7;\r\n}\r\n\r\n.service-card .service-tags {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 0.5rem;\r\n margin-top: 1.5rem;\r\n}\r\n\r\n.service-tag {\r\n font-family: var(--font-display);\r\n font-size: 0.6rem;\r\n text-transform: uppercase;\r\n letter-spacing: 0.1em;\r\n color: var(--red);\r\n font-weight: 700;\r\n border: 1px solid rgba(212, 32, 39, 0.3);\r\n padding: 0.25rem 0.6rem;\r\n}\r\n\r\n.services-note {\r\n margin-top: 2rem;\r\n font-family: var(--font-display);\r\n font-size: 0.75rem;\r\n color: var(--text-muted);\r\n text-transform: uppercase;\r\n letter-spacing: 0.1em;\r\n font-weight: 700;\r\n}\r\n\r\n\/* ===== PROJECTS ===== *\/\r\n#realisations {\r\n border-top: 1px solid var(--dark-border);\r\n}\r\n\r\n.project {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 4rem;\r\n margin-bottom: 5rem;\r\n align-items: center;\r\n}\r\n\r\n.project:nth-child(even) { direction: rtl; }\r\n.project:nth-child(even) > * { direction: ltr; }\r\n\r\n.project-media {\r\n background: var(--dark-card);\r\n border: 1px solid var(--dark-border);\r\n aspect-ratio: 16\/10;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n position: relative;\r\n overflow: hidden;\r\n}\r\n\r\n.project-media .placeholder {\r\n font-family: var(--font-display);\r\n font-size: 0.7rem;\r\n text-transform: uppercase;\r\n letter-spacing: 0.15em;\r\n color: var(--text-muted);\r\n}\r\n\r\n.project-info .project-client {\r\n font-family: var(--font-display);\r\n font-size: 0.7rem;\r\n text-transform: uppercase;\r\n letter-spacing: 0.15em;\r\n color: var(--red);\r\n font-weight: 700;\r\n margin-bottom: 0.75rem;\r\n}\r\n\r\n.project-info h3 {\r\n font-size: 1.7rem;\r\n margin-bottom: 1rem;\r\n}\r\n\r\n.project-info p {\r\n font-size: 0.9rem;\r\n line-height: 1.8;\r\n color: var(--off-white);\r\n}\r\n\r\n.project-tech {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 0.5rem;\r\n margin-top: 1.5rem;\r\n}\r\n\r\n\/* ===== ABOUT ===== *\/\r\n#a-propos {\r\n border-top: 1px solid var(--dark-border);\r\n}\r\n\r\n.about-grid {\r\n display: grid;\r\n grid-template-columns: 1fr 2fr;\r\n gap: 4rem;\r\n margin-top: 2rem;\r\n}\r\n\r\n.about-photo {\r\n background: var(--dark-card);\r\n border: 1px solid var(--dark-border);\r\n aspect-ratio: 3\/4;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n\r\n.about-photo .placeholder {\r\n font-family: var(--font-display);\r\n font-size: 0.7rem;\r\n text-transform: uppercase;\r\n letter-spacing: 0.15em;\r\n color: var(--text-muted);\r\n}\r\n\r\n.about-text p {\r\n font-size: 0.95rem;\r\n line-height: 1.9;\r\n}\r\n\r\n.about-skills {\r\n margin-top: 2rem;\r\n padding-top: 2rem;\r\n border-top: 1px solid var(--dark-border);\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 0.5rem;\r\n}\r\n\r\n.about-skill-tag {\r\n font-family: var(--font-display);\r\n font-size: 0.6rem;\r\n text-transform: uppercase;\r\n letter-spacing: 0.08em;\r\n font-weight: 700;\r\n color: var(--off-white);\r\n border: 1px solid rgba(212, 32, 39, 0.35);\r\n padding: 0.3rem 0.7rem;\r\n white-space: nowrap;\r\n transition: border-color 0.2s, color 0.2s;\r\n}\r\n\r\n.about-skill-tag:hover {\r\n border-color: var(--red);\r\n color: var(--white);\r\n}\r\n\r\n\/* ===== TEASER ===== *\/\r\n.teaser-section {\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n padding: 3rem 2rem;\r\n}\r\n\r\n.teaser-inner {\r\n background: var(--dark-card);\r\n border: 1px solid var(--dark-border);\r\n padding: 3rem;\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 3rem;\r\n align-items: center;\r\n}\r\n\r\n.teaser-badge {\r\n font-family: var(--font-display);\r\n font-size: 0.6rem;\r\n text-transform: uppercase;\r\n letter-spacing: 0.2em;\r\n color: var(--black);\r\n background: var(--red);\r\n font-weight: 700;\r\n padding: 0.2rem 0.6rem;\r\n display: inline-block;\r\n margin-bottom: 1rem;\r\n}\r\n\r\n.teaser-inner h3 { font-size: 1.5rem; }\r\n.teaser-inner p { font-size: 0.9rem; line-height: 1.8; }\r\n\r\n.teaser-visual {\r\n background: var(--dark);\r\n border: 1px solid var(--dark-border);\r\n aspect-ratio: 4\/3;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n\r\n.teaser-visual .placeholder {\r\n font-family: var(--font-display);\r\n font-size: 0.7rem;\r\n text-transform: uppercase;\r\n letter-spacing: 0.15em;\r\n color: var(--text-muted);\r\n}\r\n\r\n\/* ===== CLIENTS ===== *\/\r\n.clients-section {\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n padding: 4rem 2rem;\r\n border-top: 1px solid var(--dark-border);\r\n}\r\n\r\n.clients-list {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 2rem 3rem;\r\n margin-top: 2rem;\r\n align-items: center;\r\n}\r\n\r\n.client-name {\r\n font-family: var(--font-display);\r\n font-size: 0.75rem;\r\n text-transform: uppercase;\r\n letter-spacing: 0.1em;\r\n color: var(--text-muted);\r\n text-decoration: none;\r\n font-weight: 700;\r\n transition: color 0.2s;\r\n}\r\n\r\n.client-name:hover { color: var(--red); }\r\n\r\n\/* ===== CONTACT ===== *\/\r\n#contact {\r\n border-top: 1px solid var(--dark-border);\r\n}\r\n\r\n.contact-grid {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 4rem;\r\n margin-top: 2rem;\r\n}\r\n\r\n.contact-info p {\r\n font-size: 0.95rem;\r\n margin-bottom: 1.5rem;\r\n}\r\n\r\n.contact-detail {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 1rem;\r\n margin-top: 2rem;\r\n}\r\n\r\n.contact-detail a {\r\n color: var(--off-white);\r\n text-decoration: none;\r\n font-family: var(--font-display);\r\n font-size: 0.85rem;\r\n transition: color 0.2s;\r\n}\r\n\r\n.contact-detail a:hover { color: var(--red); }\r\n\r\n.contact-form {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 1.25rem;\r\n}\r\n\r\n.form-group { display: flex; flex-direction: column; gap: 0.4rem; }\r\n\r\n.form-group label {\r\n font-family: var(--font-display);\r\n font-size: 0.65rem;\r\n text-transform: uppercase;\r\n letter-spacing: 0.15em;\r\n color: var(--text-muted);\r\n}\r\n\r\n.form-group input,\r\n.form-group select,\r\n.form-group textarea {\r\n background: var(--dark-card);\r\n border: 1px solid var(--dark-border);\r\n color: var(--white);\r\n font-family: var(--font-body);\r\n font-size: 0.9rem;\r\n padding: 0.8rem 1rem;\r\n outline: none;\r\n transition: border-color 0.2s;\r\n}\r\n\r\n.form-group input:focus,\r\n.form-group select:focus,\r\n.form-group textarea:focus {\r\n border-color: var(--red);\r\n}\r\n\r\n.form-group textarea { resize: vertical; min-height: 120px; }\r\n\r\n.form-group select {\r\n appearance: none;\r\n cursor: pointer;\r\n background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888' d='M6 8L1 3h10z'\/%3E%3C\/svg%3E\");\r\n background-repeat: no-repeat;\r\n background-position: right 1rem center;\r\n}\r\n\r\n.form-group select option {\r\n background: var(--dark-card);\r\n color: var(--white);\r\n}\r\n\r\n.form-submit {\r\n background: var(--red);\r\n color: #FFFFFF !important;\r\n border: none;\r\n padding: 0.9rem 2rem;\r\n font-family: var(--font-display);\r\n font-size: 0.85rem;\r\n font-weight: 700;\r\n text-transform: uppercase;\r\n letter-spacing: 0.1em;\r\n cursor: pointer;\r\n transition: background 0.2s;\r\n align-self: flex-start;\r\n}\r\n\r\n.form-submit:hover { background: var(--red-dark); color: #FFFFFF !important; }\r\n\r\n\/* ===== FOOTER ===== *\/\r\nfooter {\r\n border-top: 1px solid var(--dark-border);\r\n padding: 3rem 2rem;\r\n text-align: center;\r\n}\r\n\r\nfooter p {\r\n font-size: 0.75rem;\r\n color: var(--text-muted);\r\n}\r\n\r\nfooter a {\r\n color: var(--text-muted);\r\n text-decoration: none;\r\n transition: color 0.2s;\r\n}\r\n\r\nfooter a:hover { color: var(--red); }\r\n\r\n\/* ===== RESPONSIVE ===== *\/\r\n@media (max-width: 900px) {\r\n .mission-grid,\r\n .about-grid,\r\n .contact-grid,\r\n .project,\r\n .teaser-inner {\r\n grid-template-columns: 1fr;\r\n gap: 2rem;\r\n }\r\n\r\n .project:nth-child(even) { direction: ltr; }\r\n\r\n .services-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n}\r\n\r\n@media (max-width: 600px) {\r\n h2 { font-size: 1.8rem; }\r\n\r\n section { padding: 4rem 1.5rem; }\r\n\r\n nav .nav-links { display: none; }\r\n .nav-toggle { display: block; }\r\n\r\n \/* Mobile menu *\/\r\n nav .nav-links.open {\r\n display: flex;\r\n flex-direction: column;\r\n position: absolute;\r\n top: 60px;\r\n left: 0;\r\n width: 100%;\r\n background: rgba(10, 10, 10, 0.95);\r\n backdrop-filter: blur(20px);\r\n padding: 2rem;\r\n border-bottom: 1px solid var(--dark-border);\r\n }\r\n}\r\n\r\n\/* ===== ANIMATIONS ===== *\/\r\n@keyframes fadeUp {\r\n from { opacity: 0; transform: translateY(24px); }\r\n to { opacity: 1; transform: translateY(0); }\r\n}\r\n\r\n.hero-content h1 { animation: fadeUp 0.8s ease-out; }\r\n.hero-tagline { animation: fadeUp 0.8s ease-out 0.15s both; }\r\n.hero-cta { animation: fadeUp 0.8s ease-out 0.3s both; }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<!-- NAVIGATION -->\r\n<nav>\r\n <div class=\"nav-inner\">\r\n <a href=\"#hero\" class=\"logo\" aria-label=\"Accueil\"><\/a>\r\n <button class=\"nav-toggle\" onclick=\"document.querySelector('.nav-links').classList.toggle('open')\">\u2630<\/button>\r\n <ul class=\"nav-links\">\r\n <li><a href=\"#services\">Services<\/a><\/li>\r\n <li><a href=\"#realisations\">R\u00e9alisations<\/a><\/li>\r\n <li><a href=\"#a-propos\">\u00c0 propos<\/a><\/li>\r\n <li><a href=\"#contact\" class=\"btn-contact\">Contact<\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n<\/nav>\r\n\r\n<!-- HERO -->\r\n<section id=\"hero\">\r\n <canvas id=\"emberCanvas\"><\/canvas>\r\n <div class=\"hero-content\">\r\n <h1>L'IA au service de<br>celles et ceux qui<br><em>agissent sur le terrain.<\/em><\/h1>\r\n <p class=\"hero-tagline\">\r\n Formations, installations interactives et accompagnement technique en intelligence artificielle \u2014 en particulier pour les associations, structures culturelles et acteurs de l'\u00e9conomie sociale et solidaire.\r\n <\/p>\r\n <a href=\"#contact\" class=\"hero-cta\">\r\n Parlons de votre projet <span class=\"arrow\">\u2192<\/span>\r\n <\/a>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- MISSION -->\r\n<section id=\"mission\">\r\n <div class=\"section-label\">Notre approche<\/div>\r\n <h2>Comprendre l'IA pour mieux s'en servir.<\/h2>\r\n <div class=\"mission-grid\">\r\n <div class=\"mission-text\">\r\n <p>\r\n L'IA g\u00e9n\u00e9rative transforme les pratiques professionnelles. Mais entre les promesses marketing et la r\u00e9alit\u00e9 technique, il est difficile de s'y retrouver \u2014 surtout quand on n'a ni le temps, ni le budget des grandes entreprises.\r\n <\/p>\r\n <p>\r\n Af\u0101r\u012bt IA accompagne les structures qui font le terrain : associations, acteurs et actrices culturels, organisations de l'ESS. On ne vend pas de la magie. On vous montre comment \u00e7a fonctionne, pourquoi \u00e7a fonctionne, et comment l'utiliser concr\u00e8tement dans votre quotidien.\r\n <\/p>\r\n <\/div>\r\n <div class=\"mission-values\">\r\n <div class=\"value-item\">\r\n <h4>Artisanat num\u00e9rique<\/h4>\r\n <p>Du code \u00e0 l'objet physique : fabrication num\u00e9rique, d\u00e9coupe laser, impression 3D, menuiserie. Un seul interlocuteur du prototype \u00e0 l'installation.<\/p>\r\n <\/div>\r\n <div class=\"value-item\">\r\n <h4>P\u00e9dagogie technique<\/h4>\r\n <p>Comprendre le fonctionnement r\u00e9el des LLM, pas juste les utiliser en surface.<\/p>\r\n <\/div>\r\n <div class=\"value-item\">\r\n <h4>Solutions abordables<\/h4>\r\n <p>Approche low-code et fabrication maison, adapt\u00e9es aux budgets associatifs.<\/p>\r\n <\/div>\r\n <div class=\"value-item\">\r\n <h4>\u00c9thique par d\u00e9faut<\/h4>\r\n <p>Choix technologiques conscients, sensibilisation aux enjeux soci\u00e9taux et environnementaux.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- SERVICES -->\r\n<section id=\"services\">\r\n <div class=\"section-label\">Services<\/div>\r\n <h2>Ce qu'on fait.<\/h2>\r\n <div class=\"services-grid\">\r\n\r\n <div class=\"service-card\" data-num=\"01\">\r\n <h3>Formations Claude<\/h3>\r\n <p>\r\n Journ\u00e9es de formation \u00e0 l'utilisation de Claude Pro Team pour vos \u00e9quipes. Du positionnement \u00e9thique \u00e0 la prise en main, en passant par la cr\u00e9ation de Projects et de Skills partag\u00e9s \u2014 avec des livrables concrets \u00e0 la fin de la journ\u00e9e : newsletters, dossiers de subvention, rapports d'activit\u00e9.\r\n <\/p>\r\n <div class=\"service-tags\">\r\n <span class=\"service-tag\">Claude Pro Team<\/span>\r\n <span class=\"service-tag\">Projects & Skills<\/span>\r\n <span class=\"service-tag\">Prompting<\/span>\r\n <span class=\"service-tag\">Autonomisation<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"service-card\" data-num=\"02\">\r\n <h3>Installations interactives<\/h3>\r\n <p>\r\n Conception, d\u00e9veloppement et fabrication d'installations d'IA sur mesure. Le code, l'\u00e9lectronique, la menuiserie, la d\u00e9coupe laser, l'impression 3D \u2014 tout est fait en interne. Un seul interlocuteur, du prototype logiciel \u00e0 l'objet physique install\u00e9 chez vous.\r\n <\/p>\r\n <div class=\"service-tags\">\r\n <span class=\"service-tag\">Agents conversationnels<\/span>\r\n <span class=\"service-tag\">Hologrammes<\/span>\r\n <span class=\"service-tag\">Fabrication num\u00e9rique<\/span>\r\n <span class=\"service-tag\">M\u00e9diation culturelle<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"service-card\" data-num=\"03\">\r\n <h3>Accompagnement technique<\/h3>\r\n <p>\r\n Audit de vos besoins, conseil sur les outils adapt\u00e9s, mise en place d'infrastructures IA pour votre structure. On vous aide \u00e0 identifier o\u00f9 l'IA peut vous faire gagner du temps \u2014 et o\u00f9 elle n'est pas la bonne r\u00e9ponse.\r\n <\/p>\r\n <div class=\"service-tags\">\r\n <span class=\"service-tag\">Audit & conseil<\/span>\r\n <span class=\"service-tag\">Infrastructure<\/span>\r\n <span class=\"service-tag\">Solutions europ\u00e9ennes<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <p class=\"services-note\">Toutes les prestations sont sur devis.<\/p>\r\n<\/section>\r\n\r\n<!-- REALISATIONS -->\r\n<section id=\"realisations\">\r\n <div class=\"section-label\">R\u00e9alisations<\/div>\r\n <h2>Projets livr\u00e9s.<\/h2>\r\n\r\n <!-- Rembrandt -->\r\n <div class=\"project\">\r\n <div class=\"project-media\">\r\n <video controls muted playsinline poster=\"\" style=\"width:100%;height:100%;object-fit:cover;\">\r\n <source src=\"https:\/\/afaritia.fr\/wp-content\/uploads\/2026\/02\/Cabinet-Rembrandt-sous-titre.mp4\" type=\"video\/mp4\">\r\n <\/video>\r\n <\/div>\r\n <div class=\"project-info\">\r\n <div class=\"project-client\">Fonds Gl\u00e9nat \u2014 Cabinet Rembrandt<\/div>\r\n <h3>Hologramme interactif de Rembrandt<\/h3>\r\n <p>\r\n Installation de m\u00e9diation culturelle au Cabinet Rembrandt : un hologramme de Rembrandt van Rijn, \u00e0 62 ans, qui dialogue avec les visiteurs et visiteuses gr\u00e2ce \u00e0 l'IA conversationnelle. Code, film LED, menuiserie du caisson, int\u00e9gration audio \u2014 le tout con\u00e7u et fabriqu\u00e9 en interne. D\u00e9tection automatique, conversation vocale personnalis\u00e9e en plusieurs langues, animations vid\u00e9o synchronis\u00e9es avec analyse \u00e9motionnelle en temps r\u00e9el.\r\n <\/p>\r\n <div class=\"project-tech\">\r\n <span class=\"service-tag\">Python \/ FastAPI<\/span>\r\n <span class=\"service-tag\">YOLOv8n<\/span>\r\n <span class=\"service-tag\">Mistral Vision<\/span>\r\n <span class=\"service-tag\">ElevenLabs<\/span>\r\n <span class=\"service-tag\">Film LED<\/span>\r\n <span class=\"service-tag\">Menuiserie<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Ang\u00e9lique -->\r\n <div class=\"project\">\r\n <div class=\"project-media\" style=\"padding:0;overflow:hidden;background:#000;aspect-ratio:16\/9;\">\r\n <iframe width=\"100%\" height=\"100%\" src=\"https:\/\/www.youtube.com\/embed\/int8qlpWfZk?si=iDh3kYCdxuTSB-zk\" \r\n style=\"border:none;\" \r\n title=\"YouTube video player\" \r\n allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" \r\n referrerpolicy=\"strict-origin-when-cross-origin\" \r\n allowfullscreen><\/iframe>\r\n <\/div>\r\n <div class=\"project-info\">\r\n <div class=\"project-client\">IRT Nanoelec<\/div>\r\n <h3>Agent conversationnel scientifique<\/h3>\r\n <p>\r\n Agent bilingue fran\u00e7ais-anglais permettant au public d'explorer les 30 articles scientifiques du colloque sur l'\u00e9lectronique et le num\u00e9rique durables. Interaction vocale et textuelle, int\u00e9gr\u00e9 directement sur le site web de l'IRT.\r\n <\/p>\r\n <div class=\"project-tech\">\r\n <span class=\"service-tag\">ElevenLabs<\/span>\r\n <span class=\"service-tag\">Knowledge Base<\/span>\r\n <span class=\"service-tag\">Bilingue FR\/EN<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- EFELIA -->\r\n <div class=\"project\">\r\n <div class=\"project-media\">\r\n <img decoding=\"async\" src=\"https:\/\/afaritia.fr\/wp-content\/uploads\/2026\/02\/IMG_20241001_091849-scaled.jpg\" alt=\"Cubes p\u00e9dagogiques EFELIA MIAI\" style=\"width:100%;height:100%;object-fit:cover;\">\r\n <\/div>\r\n <div class=\"project-info\">\r\n <div class=\"project-client\">CMQ IED \u2014 AURA \u2014 EFELIA MIAI<\/div>\r\n <h3>L'Histoire de l'IA en 10 cubes<\/h3>\r\n <p>\r\n Conception et fabrication de 10 cubes p\u00e9dagogiques d\u00e9montables en mousse EVA, retra\u00e7ant les dates majeures de l'intelligence artificielle. D\u00e9coupe et gravure laser, syst\u00e8me d'embo\u00eetement pour stockage \u00e0 plat. Support de communication \u00e9v\u00e9nementiel pour la vulgarisation grand public.\r\n <\/p>\r\n <div class=\"project-tech\">\r\n <span class=\"service-tag\">Fabrication num\u00e9rique<\/span>\r\n <span class=\"service-tag\">D\u00e9coupe laser<\/span>\r\n <span class=\"service-tag\">Mousse EVA<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Formations -->\r\n <div class=\"project\">\r\n <div class=\"project-media\">\r\n <img decoding=\"async\" src=\"https:\/\/afaritia.fr\/wp-content\/uploads\/2026\/02\/image.jpg\" alt=\"Formation IA g\u00e9n\u00e9rative\" style=\"width:100%;height:100%;object-fit:cover;\">\r\n <\/div>\r\n <div class=\"project-info\">\r\n <div class=\"project-client\">Cap Berriat \u00b7 Info-Jeunes 38 \u00b7 IUT2 Grenoble<\/div>\r\n <h3>Formations IA g\u00e9n\u00e9rative<\/h3>\r\n <p>\r\n Journ\u00e9es de formation combinant positionnement \u00e9thique, compr\u00e9hension technique des LLM et prise en main pratique de Claude Pro Team. Serious game \"Tokens des 1001 Nuits\", ateliers de prompting, production de livrables r\u00e9els (newsletters, dossiers FDVA) \u2014 avec l'objectif d'autonomiser les \u00e9quipes.\r\n <\/p>\r\n <div class=\"project-tech\">\r\n <span class=\"service-tag\">Claude Pro Team<\/span>\r\n <span class=\"service-tag\">Serious game<\/span>\r\n <span class=\"service-tag\">Prompting<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n<\/section>\r\n\r\n<!-- ETHICAL BANNER -->\r\n<div class=\"ethical-banner\">\r\n <div class=\"ethical-banner-inner\">\r\n <h3>Pourquoi Claude, pas ChatGPT ?<\/h3>\r\n <p>\r\n Quand il s'agit de choisir un assistant IA, Af\u0101r\u012bt IA privil\u00e9gie <a href=\"https:\/\/www.anthropic.com\" target=\"_blank\" rel=\"noopener\" class=\"inline-link\">Claude<\/a>, d\u00e9velopp\u00e9 par Anthropic \u2014 une entreprise am\u00e9ricaine fond\u00e9e par d'anciens dirigeants et dirigeantes d'OpenAI, pr\u00e9cis\u00e9ment en d\u00e9saccord avec la direction prise par cette derni\u00e8re. D'autres mod\u00e8les sont utilis\u00e9s selon les besoins (Mistral, solutions open-source), et l'\u00e9mergence de mod\u00e8les europ\u00e9ens est suivie de pr\u00e8s.\r\n <\/p>\r\n <p>\r\n Ce choix n'est pas anodin. Le cofondateur d'OpenAI a donn\u00e9 25 millions de dollars au super PAC MAGA Inc. de Donald Trump. L'outil de tri de CV de l'agence ICE tourne sur GPT-4. OpenAI d\u00e9pense des dizaines de millions pour emp\u00eacher les \u00c9tats am\u00e9ricains de r\u00e9guler l'IA. Claude surpasse aujourd'hui ChatGPT sur la plupart des benchmarks \u2014 mais c'est d'abord un choix politique : ne pas financer, m\u00eame indirectement, des structures qui participent \u00e0 des politiques autoritaires.\r\n <\/p>\r\n <p>\r\n Anthropic a \u00e9t\u00e9 qualifi\u00e9e de \"trop woke\" par cette m\u00eame administration. Pour nous, c'est un gage.\r\n <\/p>\r\n <a href=\"https:\/\/quitgpt.org\/\" target=\"_blank\" rel=\"noopener\" class=\"quitgpt-link\">\r\n En savoir plus sur QuitGPT.org \u2192\r\n <\/a>\r\n <\/div>\r\n<\/div>\r\n\r\n<!-- ABOUT -->\r\n<section id=\"a-propos\">\r\n <div class=\"section-label\">\u00c0 propos<\/div>\r\n <h2>Damien Bou\u00ebvin<\/h2>\r\n <div class=\"about-grid\">\r\n <div class=\"about-photo\">\r\n <img decoding=\"async\" src=\"https:\/\/afaritia.fr\/wp-content\/uploads\/2026\/02\/tmp2kcfao5i.png\" alt=\"Damien Bou\u00ebvin\" style=\"width:100%;height:100%;object-fit:cover;\">\r\n <\/div>\r\n <div class=\"about-text\">\r\n <p>\r\n Fondateur d'Af\u0101r\u012bt IA et directeur d\u00e9l\u00e9gu\u00e9 de <a href=\"https:\/\/www.nemeton.bio\" target=\"_blank\" rel=\"noopener\" class=\"inline-link\">l'association Nemeton<\/a>, un laboratoire de biologie associatif et centre de m\u00e9diation scientifique \u00e0 Grenoble.\r\n <\/p>\r\n <p>\r\n Ce qui caract\u00e9rise mon approche, c'est que je ne fais pas que du code. Je con\u00e7ois, je fabrique, j'installe. Quand un projet n\u00e9cessite un meuble sur mesure, un bo\u00eetier d\u00e9coup\u00e9 au laser ou un prototype imprim\u00e9 en 3D, je le fais moi-m\u00eame. C'est rare dans le milieu de l'IA : la plupart des prestataires s'arr\u00eatent au logiciel. Moi, je livre l'objet fini, pr\u00eat \u00e0 \u00eatre branch\u00e9. Un seul interlocuteur, de l'id\u00e9e \u00e0 l'installation \u2014 et des budgets qui restent accessibles parce qu'il n'y a pas cinq sous-traitants dans la boucle.\r\n <\/p>\r\n <p>\r\n Avant Af\u0101r\u012bt IA, j'ai pass\u00e9 sept ans dans le monde associatif \u00e0 animer une communaut\u00e9 autour des biotechnologies, concevoir des animations grand public et g\u00e9rer un laboratoire. C'est cette exp\u00e9rience du terrain \u2014 le vrai, celui des petits budgets et des projets mont\u00e9s avec trois bouts de ficelle \u2014 qui structure mon approche de l'IA.\r\n <\/p>\r\n <div class=\"about-skills\">\r\n <span class=\"about-skill-tag\">Python<\/span>\r\n <span class=\"about-skill-tag\">FastAPI<\/span>\r\n <span class=\"about-skill-tag\">Claude API<\/span>\r\n <span class=\"about-skill-tag\">Mistral AI<\/span>\r\n <span class=\"about-skill-tag\">ElevenLabs<\/span>\r\n <span class=\"about-skill-tag\">YOLOv8n<\/span>\r\n <span class=\"about-skill-tag\">Prompt engineering<\/span>\r\n <span class=\"about-skill-tag\">HTML \/ CSS \/ JS<\/span>\r\n <span class=\"about-skill-tag\">Linux \/ VPS<\/span>\r\n <span class=\"about-skill-tag\">Nginx<\/span>\r\n <span class=\"about-skill-tag\">D\u00e9coupe laser<\/span>\r\n <span class=\"about-skill-tag\">Impression 3D<\/span>\r\n <span class=\"about-skill-tag\">Menuiserie<\/span>\r\n <span class=\"about-skill-tag\">\u00c9lectronique<\/span>\r\n <span class=\"about-skill-tag\">Soudure<\/span>\r\n <span class=\"about-skill-tag\">CAO \/ Inkscape<\/span>\r\n <span class=\"about-skill-tag\">M\u00e9diation scientifique<\/span>\r\n <span class=\"about-skill-tag\">Serious games<\/span>\r\n <span class=\"about-skill-tag\">Formation<\/span>\r\n <span class=\"about-skill-tag\">Ing\u00e9nierie culturelle<\/span>\r\n <span class=\"about-skill-tag\">Gestion de projet<\/span>\r\n <span class=\"about-skill-tag\">Vulgarisation<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- TEASER REACHY MINI -->\r\n<div class=\"teaser-section\">\r\n <div class=\"teaser-inner\">\r\n <div>\r\n <span class=\"teaser-badge\">Projet en cours<\/span>\r\n <h3>Un robot au comptoir du Biolab Caf\u00e9<\/h3>\r\n <p>\r\n On adapte un <a href=\"https:\/\/www.pollen-robotics.com\/reachy-mini\/\" target=\"_blank\" rel=\"noopener\" class=\"inline-link\">Reachy Mini<\/a> de Pollen Robotics \u2014 un robot de bureau open-source, programmable en Python \u2014 pour accueillir les visiteurs et visiteuses du futur <a href=\"https:\/\/www.nemeton.bio\" target=\"_blank\" rel=\"noopener\" class=\"inline-link\">Nemeton \u2014 Biolab Caf\u00e9<\/a>. IA conversationnelle, reconnaissance des habitu\u00e9s et habitu\u00e9es, interaction physique. Un projet \u00e0 la crois\u00e9e de la robotique, de l'IA et de la m\u00e9diation scientifique.\r\n <\/p>\r\n <\/div>\r\n <div class=\"teaser-visual\">\r\n <img decoding=\"async\" src=\"https:\/\/afaritia.fr\/wp-content\/uploads\/2026\/02\/wooden_reachy.jpg\" alt=\"Reachy Mini au Biolab Caf\u00e9\" style=\"width:100%;height:100%;object-fit:cover;\">\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<!-- CLIENTS -->\r\n<div class=\"clients-section\">\r\n <div class=\"section-label\">Ils m'ont fait confiance<\/div>\r\n <div class=\"clients-list\">\r\n <a href=\"https:\/\/www.couventsaintececile.com\/\" target=\"_blank\" rel=\"noopener\" class=\"client-name\">Fonds Gl\u00e9nat pour le patrimoine et la cr\u00e9ation<\/a>\r\n <a href=\"https:\/\/irtnanoelec.fr\/\" target=\"_blank\" rel=\"noopener\" class=\"client-name\">IRT Nanoelec<\/a>\r\n <a href=\"https:\/\/cmqiedaura.fr\/\" target=\"_blank\" rel=\"noopener\" class=\"client-name\">CMQ IED \u2014 AURA<\/a>\r\n <a href=\"https:\/\/www.cap-berriat.com\/\" target=\"_blank\" rel=\"noopener\" class=\"client-name\">Cap Berriat<\/a>\r\n <a href=\"https:\/\/infojeunes38.fr\/\" target=\"_blank\" rel=\"noopener\" class=\"client-name\">Info-Jeunes 38<\/a>\r\n <a href=\"https:\/\/iut2.univ-grenoble-alpes.fr\/\" target=\"_blank\" rel=\"noopener\" class=\"client-name\">IUT2 Grenoble<\/a>\r\n <\/div>\r\n<\/div>\r\n\r\n<!-- CONTACT -->\r\n<section id=\"contact\">\r\n <div class=\"section-label\">Contact<\/div>\r\n <h2>Un projet ? Une formation ?<\/h2>\r\n <div class=\"contact-grid\">\r\n <div class=\"contact-info\">\r\n <p>\r\n Chaque projet est diff\u00e9rent. D\u00e9crivez votre besoin et on en discute \u2014 sans engagement, sans jargon commercial.\r\n <\/p>\r\n <div class=\"contact-detail\">\r\n <a href=\"mailto:damien.bouevin@afaritia.fr\">damien.bouevin@afaritia.fr<\/a>\r\n <span style=\"font-size: 0.8rem; color: var(--text-muted);\">Grenoble, France<\/span>\r\n <\/div>\r\n <\/div>\r\n <form class=\"contact-form\" onsubmit=\"return submitForm(event)\">\r\n <div class=\"form-group\">\r\n <label for=\"type\">Type de demande<\/label>\r\n <select id=\"type\" name=\"type\">\r\n <option value=\"\" disabled selected>S\u00e9lectionnez<\/option>\r\n <option value=\"Formation\">Formation<\/option>\r\n <option value=\"Projet \/ Installation\">Projet \/ Installation<\/option>\r\n <option value=\"Accompagnement technique\">Accompagnement technique<\/option>\r\n <option value=\"Autre\">Autre<\/option>\r\n <\/select>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"name\">Nom<\/label>\r\n <input type=\"text\" id=\"name\" name=\"name\" placeholder=\"Votre nom\" required>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"org\">Structure<\/label>\r\n <input type=\"text\" id=\"org\" name=\"org\" placeholder=\"Nom de votre structure\">\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"email\">Email<\/label>\r\n <input type=\"email\" id=\"email\" name=\"email\" placeholder=\"votre@email.fr\" required>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"message\">Message<\/label>\r\n <textarea id=\"message\" name=\"message\" placeholder=\"D\u00e9crivez votre projet ou votre besoin...\" required><\/textarea>\r\n <\/div>\r\n <button type=\"submit\" class=\"form-submit\">Envoyer<\/button>\r\n <\/form>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- FOOTER -->\r\n<footer>\r\n <p>\r\n \u00a9 2026 Af\u0101r\u012bt IA \u2014 Damien Bou\u00ebvin \u2014 \r\n <a href=\"mailto:damien.bouevin@afaritia.fr\">damien.bouevin@afaritia.fr<\/a> \u2014 \r\n SIRET : 803 335 538 00036 \u2014 TVA non applicable, art. 293 B du CGI\r\n <\/p>\r\n<\/footer>\r\n\r\n<script>\r\nfunction submitForm(e) {\r\n e.preventDefault();\r\n var type = document.getElementById('type').value || 'Non pr\u00e9cis\u00e9';\r\n var name = document.getElementById('name').value;\r\n var org = document.getElementById('org').value || 'Non pr\u00e9cis\u00e9';\r\n var email = document.getElementById('email').value;\r\n var message = document.getElementById('message').value;\r\n \r\n var subject = encodeURIComponent('[afaritia.fr] ' + type + ' \u2014 ' + name);\r\n var body = encodeURIComponent(\r\n 'Type de demande : ' + type + '\\n' +\r\n 'Nom : ' + name + '\\n' +\r\n 'Structure : ' + org + '\\n' +\r\n 'Email : ' + email + '\\n\\n' +\r\n message\r\n );\r\n \r\n window.location.href = 'mailto:damien.bouevin@afaritia.fr?subject=' + subject + '&body=' + body;\r\n return false;\r\n}\r\n\r\n\/\/ Ember particle system\r\n(function() {\r\n var canvas = document.getElementById('emberCanvas');\r\n if (!canvas) return;\r\n var ctx = canvas.getContext('2d');\r\n var hero = document.getElementById('hero');\r\n \r\n var mouse = { x: -1000, y: -1000 };\r\n var particles = [];\r\n var PARTICLE_COUNT = 60;\r\n var MOUSE_RADIUS = 120;\r\n var W = 400, H = 500;\r\n \r\n function resize() {\r\n var rect = hero.getBoundingClientRect();\r\n W = rect.width;\r\n H = rect.height;\r\n canvas.width = W * window.devicePixelRatio;\r\n canvas.height = H * window.devicePixelRatio;\r\n canvas.style.width = W + 'px';\r\n canvas.style.height = H + 'px';\r\n ctx.setTransform(window.devicePixelRatio, 0, 0, window.devicePixelRatio, 0, 0);\r\n }\r\n \r\n resize();\r\n window.addEventListener('resize', resize);\r\n \r\n \/\/ Track mouse on the hero section (canvas has pointer-events:none)\r\n hero.addEventListener('mousemove', function(e) {\r\n var rect = hero.getBoundingClientRect();\r\n mouse.x = e.clientX - rect.left;\r\n mouse.y = e.clientY - rect.top;\r\n });\r\n \r\n hero.addEventListener('mouseleave', function() {\r\n mouse.x = -1000;\r\n mouse.y = -1000;\r\n });\r\n \r\n function Particle() {\r\n this.reset();\r\n }\r\n \r\n Particle.prototype.reset = function() {\r\n \/\/ Spawn from lower third, concentrated toward center\r\n this.x = W * 0.15 + Math.random() * W * 0.7;\r\n this.y = H * 0.65 + Math.random() * H * 0.35;\r\n \r\n \/\/ Slow upward drift with slight horizontal wander\r\n this.vx = (Math.random() - 0.5) * 0.3;\r\n this.vy = -(0.3 + Math.random() * 0.7);\r\n \r\n \/\/ Size: mostly tiny, occasional larger\r\n this.radius = 1 + Math.random() * 2.5;\r\n \r\n \/\/ Life\r\n this.life = 0;\r\n this.maxLife = 120 + Math.random() * 180;\r\n \r\n \/\/ Color: red to orange spectrum\r\n var hue = 0 + Math.random() * 25; \/\/ 0-25 = red to orange-red\r\n var sat = 70 + Math.random() * 30;\r\n var light = 45 + Math.random() * 20;\r\n this.hue = hue;\r\n this.sat = sat;\r\n this.light = light;\r\n \r\n \/\/ Flicker\r\n this.flickerSpeed = 0.02 + Math.random() * 0.04;\r\n this.flickerOffset = Math.random() * Math.PI * 2;\r\n };\r\n \r\n Particle.prototype.update = function() {\r\n this.life++;\r\n \r\n if (this.life > this.maxLife) {\r\n this.reset();\r\n return;\r\n }\r\n \r\n \/\/ Gentle drift\r\n this.vx += (Math.random() - 0.5) * 0.02;\r\n this.x += this.vx;\r\n this.y += this.vy;\r\n \r\n \/\/ Slight deceleration upward\r\n this.vy *= 0.999;\r\n \r\n \/\/ Mouse interaction: gentle push away\r\n var dx = this.x - mouse.x;\r\n var dy = this.y - mouse.y;\r\n var dist = Math.sqrt(dx * dx + dy * dy);\r\n \r\n if (dist < MOUSE_RADIUS && dist > 0) {\r\n var force = (1 - dist \/ MOUSE_RADIUS) * 0.8;\r\n this.vx += (dx \/ dist) * force;\r\n this.vy += (dy \/ dist) * force * 0.5;\r\n }\r\n \r\n \/\/ Dampen horizontal velocity\r\n this.vx *= 0.98;\r\n };\r\n \r\n Particle.prototype.draw = function() {\r\n var progress = this.life \/ this.maxLife;\r\n \r\n \/\/ Fade in quickly, fade out slowly\r\n var alpha;\r\n if (progress < 0.1) {\r\n alpha = progress \/ 0.1;\r\n } else {\r\n alpha = 1 - ((progress - 0.1) \/ 0.9);\r\n }\r\n \r\n \/\/ Flicker\r\n var flicker = 0.7 + 0.3 * Math.sin(this.life * this.flickerSpeed + this.flickerOffset);\r\n alpha *= flicker;\r\n \r\n alpha = Math.max(0, Math.min(1, alpha));\r\n \r\n if (alpha < 0.01) return;\r\n \r\n \/\/ Shrink as they age\r\n var r = this.radius * (1 - progress * 0.5);\r\n \r\n \/\/ Glow\r\n var gradient = ctx.createRadialGradient(this.x, this.y, 0, this.x, this.y, r * 3);\r\n gradient.addColorStop(0, 'hsla(' + this.hue + ',' + this.sat + '%,' + this.light + '%,' + alpha * 0.9 + ')');\r\n gradient.addColorStop(0.4, 'hsla(' + this.hue + ',' + this.sat + '%,' + this.light + '%,' + alpha * 0.3 + ')');\r\n gradient.addColorStop(1, 'hsla(' + this.hue + ',' + this.sat + '%,' + this.light + '%,0)');\r\n \r\n ctx.beginPath();\r\n ctx.arc(this.x, this.y, r * 3, 0, Math.PI * 2);\r\n ctx.fillStyle = gradient;\r\n ctx.fill();\r\n \r\n \/\/ Bright core\r\n ctx.beginPath();\r\n ctx.arc(this.x, this.y, r * 0.5, 0, Math.PI * 2);\r\n ctx.fillStyle = 'hsla(' + this.hue + ',' + (this.sat - 10) + '%,' + (this.light + 20) + '%,' + alpha * 0.8 + ')';\r\n ctx.fill();\r\n };\r\n \r\n \/\/ Init particles\r\n for (var i = 0; i < PARTICLE_COUNT; i++) {\r\n var p = new Particle();\r\n p.life = Math.floor(Math.random() * p.maxLife); \/\/ stagger\r\n particles.push(p);\r\n }\r\n \r\n function animate() {\r\n ctx.clearRect(0, 0, W, H);\r\n \r\n for (var i = 0; i < particles.length; i++) {\r\n particles[i].update();\r\n particles[i].draw();\r\n }\r\n \r\n requestAnimationFrame(animate);\r\n }\r\n \r\n animate();\r\n})();\r\n<\/script>\r\n<!-- NOTE : En production WordPress, remplacer ce formulaire par Contact Form 7 \r\n ou WPForms avec envoi SMTP via ton h\u00e9bergeur. Le mailto est un fallback. -->\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Af\u0101r\u012bt IA \u2014 D\u00e9mocratisation de l’Intelligence Artificielle \u2630 Services R\u00e9alisations \u00c0 propos Contact L’IA au service decelles et ceux quiagissent sur le terrain. Formations, installations interactives et accompagnement technique en intelligence artificielle \u2014 en particulier pour les associations, structures culturelles et acteurs de l’\u00e9conomie sociale et solidaire. Parlons de votre projet \u2192 Notre approche Comprendre […]<\/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-43","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/afaritia.fr\/index.php\/wp-json\/wp\/v2\/pages\/43","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/afaritia.fr\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/afaritia.fr\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/afaritia.fr\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/afaritia.fr\/index.php\/wp-json\/wp\/v2\/comments?post=43"}],"version-history":[{"count":72,"href":"https:\/\/afaritia.fr\/index.php\/wp-json\/wp\/v2\/pages\/43\/revisions"}],"predecessor-version":[{"id":345,"href":"https:\/\/afaritia.fr\/index.php\/wp-json\/wp\/v2\/pages\/43\/revisions\/345"}],"wp:attachment":[{"href":"https:\/\/afaritia.fr\/index.php\/wp-json\/wp\/v2\/media?parent=43"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}