{"id":3283,"date":"2025-03-08T14:44:13","date_gmt":"2025-03-08T14:44:13","guid":{"rendered":"https:\/\/inosystech.com\/?page_id=3283"},"modified":"2026-01-02T07:31:09","modified_gmt":"2026-01-02T07:31:09","slug":"home-element","status":"publish","type":"page","link":"https:\/\/inosystech.com\/fr\/","title":{"rendered":"home"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"3283\" class=\"elementor elementor-3283\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-48eb187 elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"48eb187\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-0fe04aa\" data-id=\"0fe04aa\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-30ddc26 elementor-widget elementor-widget-html\" data-id=\"30ddc26\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- INOSYSTECH ULTRA HERO SECTION -->\r\n<section class=\"inosys-hero-ultra\">\r\n  \r\n  <!-- Ambient Background Effects -->\r\n  <div class=\"ambient-canvas\">\r\n    <div class=\"gradient-orb orb-1\"><\/div>\r\n    <div class=\"gradient-orb orb-2\"><\/div>\r\n    <div class=\"gradient-orb orb-3\"><\/div>\r\n  <\/div>\r\n\r\n  <div class=\"inosys-slider-ultra\">\r\n\r\n    <!-- SLIDE 1 -->\r\n    <div class=\"inosys-slide-ultra active\" data-slide=\"0\">\r\n      <div class=\"slide-bg\" style=\"background-image:url('https:\/\/inosystech.com\/wp-content\/uploads\/2026\/01\/slide.jpg');\"><\/div>\r\n      <div class=\"slide-overlay\"><\/div>\r\n      \r\n      <div class=\"slide-content\">\r\n        <div class=\"content-wrapper\">\r\n          <div class=\"badge-pill\">\r\n            <svg class=\"badge-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n              <path d=\"M13 2L3 14h9l-1 8 10-12h-9l1-8z\"\/>\r\n            <\/svg>\r\n            <span>Solutions technologiques & \u00e9quipements m\u00e9dicaux<\/span>\r\n          <\/div>\r\n\r\n          <h1 class=\"hero-title\">\r\n            <span class=\"title-line\">L'excellence technologique<\/span>\r\n            <span class=\"title-line gradient-text\">au service de la sant\u00e9<\/span>\r\n          <\/h1>\r\n\r\n          <p class=\"hero-description\">\r\n            INOSYSTECH accompagne les laboratoires, h\u00f4pitaux et institutions\r\n            avec des solutions fiables en informatique et \u00e9quipements m\u00e9dicaux de pointe.\r\n          <\/p>\r\n\r\n          <div class=\"cta-stack\">\r\n            <a href=\"https:\/\/inosystech.com\/get-quote\/?quote_form=1\" class=\"btn-ultra btn-primary\">\r\n              <span class=\"btn-text\">Demander un devis<\/span>\r\n              <svg class=\"btn-arrow\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\">\r\n                <path d=\"M5 12h14M12 5l7 7-7 7\"\/>\r\n              <\/svg>\r\n            <\/a>\r\n            <a href=\"https:\/\/inosystech.com\/catalogue\/\" class=\"btn-ultra btn-secondary\">\r\n              <span class=\"btn-text\">Explorer nos \u00e9quipements<\/span>\r\n            <\/a>\r\n          <\/div>\r\n\r\n          <div class=\"trust-indicators\">\r\n            <div class=\"indicator\">\r\n              <div class=\"indicator-value\">500+<\/div>\r\n              <div class=\"indicator-label\">Installations<\/div>\r\n            <\/div>\r\n            <div class=\"indicator\">\r\n              <div class=\"indicator-value\">98%<\/div>\r\n              <div class=\"indicator-label\">Satisfaction<\/div>\r\n            <\/div>\r\n            <div class=\"indicator\">\r\n              <div class=\"indicator-value\">15+<\/div>\r\n              <div class=\"indicator-label\">Ann\u00e9es d'expertise<\/div>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- SLIDE 2 -->\r\n    <div class=\"inosys-slide-ultra\" data-slide=\"1\">\r\n      <div class=\"slide-bg\" style=\"background-image:url('https:\/\/inosystech.com\/wp-content\/uploads\/2026\/01\/slide-2.avif');\"><\/div>\r\n      <div class=\"slide-overlay\"><\/div>\r\n      \r\n      <div class=\"slide-content\">\r\n        <div class=\"content-wrapper\">\r\n          <div class=\"badge-pill\">\r\n            <svg class=\"badge-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n              <circle cx=\"12\" cy=\"12\" r=\"10\"\/>\r\n              <path d=\"M12 6v6l4 2\"\/>\r\n            <\/svg>\r\n            <span>Laboratoires & diagnostic m\u00e9dical<\/span>\r\n          <\/div>\r\n\r\n          <h1 class=\"hero-title\">\r\n            <span class=\"title-line\">Des \u00e9quipements de laboratoire<\/span>\r\n            <span class=\"title-line gradient-text\">pour un diagnostic pr\u00e9cis<\/span>\r\n          <\/h1>\r\n\r\n          <p class=\"hero-description\">\r\n            Biochimie, h\u00e9matologie, immunologie et mat\u00e9riels de pr\u00e9l\u00e8vement\r\n            adapt\u00e9s aux exigences des professionnels de sant\u00e9 d'aujourd'hui.\r\n          <\/p>\r\n\r\n          <div class=\"cta-stack\">\r\n            <a href=\"https:\/\/inosystech.com\/get-quote\/?quote_form=1\" class=\"btn-ultra btn-primary\">\r\n              <span class=\"btn-text\">Demander un devis<\/span>\r\n              <svg class=\"btn-arrow\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\">\r\n                <path d=\"M5 12h14M12 5l7 7-7 7\"\/>\r\n              <\/svg>\r\n            <\/a>\r\n            <a href=\"https:\/\/inosystech.com\/catalogue\/\" class=\"btn-ultra btn-secondary\">\r\n              <span class=\"btn-text\">Voir les solutions de laboratoire<\/span>\r\n            <\/a>\r\n          <\/div>\r\n\r\n          <div class=\"feature-tags\">\r\n            <span class=\"tag\">Biochimie<\/span>\r\n            <span class=\"tag\">H\u00e9matologie<\/span>\r\n            <span class=\"tag\">Immunologie<\/span>\r\n            <span class=\"tag\">Pr\u00e9l\u00e8vement<\/span>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- SLIDE 3 -->\r\n    <div class=\"inosys-slide-ultra\" data-slide=\"2\">\r\n      <div class=\"slide-bg\" style=\"background-image:url('https:\/\/inosystech.com\/wp-content\/uploads\/2026\/01\/slide-3.png');\"><\/div>\r\n      <div class=\"slide-overlay\"><\/div>\r\n      \r\n      <div class=\"slide-content\">\r\n        <div class=\"content-wrapper\">\r\n          <div class=\"badge-pill\">\r\n            <svg class=\"badge-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n              <path d=\"M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z\"\/>\r\n              <polyline points=\"9 22 9 12 15 12 15 22\"\/>\r\n            <\/svg>\r\n            <span>H\u00f4pitaux \u2022 Cliniques \u2022 Institutions<\/span>\r\n          <\/div>\r\n\r\n          <h1 class=\"hero-title\">\r\n            <span class=\"title-line\">Des solutions compl\u00e8tes,<\/span>\r\n            <span class=\"title-line gradient-text\">de l'installation \u00e0 l'apr\u00e8s-vente<\/span>\r\n          <\/h1>\r\n\r\n          <p class=\"hero-description\">\r\n            Imagerie, \u00e9quipements m\u00e9dicaux et informatique professionnelle\r\n            avec installation, formation, maintenance et SAV r\u00e9actif 24\/7.\r\n          <\/p>\r\n\r\n          <div class=\"cta-stack\">\r\n            <a href=\"https:\/\/inosystech.com\/get-quote\/?quote_form=1\" class=\"btn-ultra btn-primary\">\r\n              <span class=\"btn-text\">Demander un devis<\/span>\r\n              <svg class=\"btn-arrow\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\">\r\n                <path d=\"M5 12h14M12 5l7 7-7 7\"\/>\r\n              <\/svg>\r\n            <\/a>\r\n            <a href=\"https:\/\/inosystech.com\/catalogue\/\" class=\"btn-ultra btn-secondary\">\r\n              <span class=\"btn-text\">D\u00e9couvrir nos solutions<\/span>\r\n            <\/a>\r\n          <\/div>\r\n\r\n          <div class=\"service-grid\">\r\n            <div class=\"service-item\">\r\n              <div class=\"service-icon\">\ud83d\udce6<\/div>\r\n              <div class=\"service-name\">Installation<\/div>\r\n            <\/div>\r\n            <div class=\"service-item\">\r\n              <div class=\"service-icon\">\ud83c\udf93<\/div>\r\n              <div class=\"service-name\">Formation<\/div>\r\n            <\/div>\r\n            <div class=\"service-item\">\r\n              <div class=\"service-icon\">\ud83d\udd27<\/div>\r\n              <div class=\"service-name\">Maintenance<\/div>\r\n            <\/div>\r\n            <div class=\"service-item\">\r\n              <div class=\"service-icon\">\ud83d\udcac<\/div>\r\n              <div class=\"service-name\">SAV 24\/7<\/div>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n  <!-- Navigation Controls -->\r\n  <div class=\"slider-nav\">\r\n    <button class=\"nav-arrow nav-prev\" aria-label=\"Slide pr\u00e9c\u00e9dent\">\r\n      <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\">\r\n        <path d=\"M19 12H5M12 19l-7-7 7-7\"\/>\r\n      <\/svg>\r\n    <\/button>\r\n    \r\n    <div class=\"nav-dots\">\r\n      <button class=\"dot active\" data-slide=\"0\" aria-label=\"Aller au slide 1\"><\/button>\r\n      <button class=\"dot\" data-slide=\"1\" aria-label=\"Aller au slide 2\"><\/button>\r\n      <button class=\"dot\" data-slide=\"2\" aria-label=\"Aller au slide 3\"><\/button>\r\n    <\/div>\r\n\r\n    <button class=\"nav-arrow nav-next\" aria-label=\"Slide suivant\">\r\n      <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\">\r\n        <path d=\"M5 12h14M12 5l7 7-7 7\"\/>\r\n      <\/svg>\r\n    <\/button>\r\n  <\/div>\r\n\r\n  <!-- Progress Bar -->\r\n  <div class=\"progress-container\">\r\n    <div class=\"progress-bar\" id=\"slideProgress\"><\/div>\r\n  <\/div>\r\n\r\n  <!-- Scroll Indicator -->\r\n  <div class=\"scroll-indicator\">\r\n    <div class=\"scroll-text\">D\u00e9filer pour d\u00e9couvrir<\/div>\r\n    <div class=\"scroll-mouse\">\r\n      <div class=\"scroll-wheel\"><\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n<\/section>\r\n\r\n<style>\r\n\/* ===== RESET & BASE ===== *\/\r\n* {\r\n  margin: 0;\r\n  padding: 0;\r\n  box-sizing: border-box;\r\n}\r\n\r\n.inosys-hero-ultra {\r\n  position: relative;\r\n  width: 100%;\r\n  min-height: 100vh;\r\n  max-height: 100vh;\r\n  overflow: hidden;\r\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', system-ui, sans-serif;\r\n  background: #000;\r\n  isolation: isolate;\r\n}\r\n\r\n\/* ===== AMBIENT BACKGROUND ===== *\/\r\n.ambient-canvas {\r\n  position: absolute;\r\n  inset: 0;\r\n  z-index: 0;\r\n  overflow: hidden;\r\n  opacity: 0.6;\r\n}\r\n\r\n.gradient-orb {\r\n  position: absolute;\r\n  border-radius: 50%;\r\n  filter: blur(80px);\r\n  animation: float 20s ease-in-out infinite;\r\n  will-change: transform;\r\n}\r\n\r\n.orb-1 {\r\n  width: 500px;\r\n  height: 500px;\r\n  background: radial-gradient(circle, rgba(14, 165, 233, 0.4) 0%, transparent 70%);\r\n  top: -10%;\r\n  left: -5%;\r\n  animation-delay: 0s;\r\n}\r\n\r\n.orb-2 {\r\n  width: 400px;\r\n  height: 400px;\r\n  background: radial-gradient(circle, rgba(99, 102, 241, 0.3) 0%, transparent 70%);\r\n  bottom: -10%;\r\n  right: -5%;\r\n  animation-delay: -7s;\r\n}\r\n\r\n.orb-3 {\r\n  width: 350px;\r\n  height: 350px;\r\n  background: radial-gradient(circle, rgba(236, 72, 153, 0.25) 0%, transparent 70%);\r\n  top: 40%;\r\n  right: 20%;\r\n  animation-delay: -14s;\r\n}\r\n\r\n@keyframes float {\r\n  0%, 100% { transform: translate(0, 0) scale(1); }\r\n  33% { transform: translate(30px, -30px) scale(1.1); }\r\n  66% { transform: translate(-20px, 20px) scale(0.9); }\r\n}\r\n\r\n\/* ===== SLIDER CONTAINER ===== *\/\r\n.inosys-slider-ultra {\r\n  position: relative;\r\n  width: 100%;\r\n  height: 100vh;\r\n  max-height: 100vh;\r\n}\r\n\r\n\/* ===== SLIDES ===== *\/\r\n.inosys-slide-ultra {\r\n  position: absolute;\r\n  inset: 0;\r\n  opacity: 0;\r\n  visibility: hidden;\r\n  transform: scale(1.05);\r\n  transition: all 1.2s cubic-bezier(0.4, 0, 0.2, 1);\r\n  z-index: 1;\r\n}\r\n\r\n.inosys-slide-ultra.active {\r\n  opacity: 1;\r\n  visibility: visible;\r\n  transform: scale(1);\r\n  z-index: 2;\r\n}\r\n\r\n.slide-bg {\r\n  position: absolute;\r\n  inset: 0;\r\n  background-size: cover;\r\n  background-position: center;\r\n  filter: brightness(0.85);\r\n  transition: transform 12s ease-out;\r\n}\r\n\r\n.inosys-slide-ultra.active .slide-bg {\r\n  transform: scale(1.08);\r\n}\r\n\r\n.slide-overlay {\r\n  position: absolute;\r\n  inset: 0;\r\n  background: linear-gradient(\r\n    135deg,\r\n    rgba(0, 0, 0, 0.7) 0%,\r\n    rgba(0, 0, 0, 0.5) 50%,\r\n    rgba(0, 0, 0, 0.8) 100%\r\n  );\r\n  backdrop-filter: blur(0px);\r\n}\r\n\r\n\/* ===== CONTENT ===== *\/\r\n.slide-content {\r\n  position: relative;\r\n  z-index: 3;\r\n  height: 100%;\r\n  display: flex;\r\n  align-items: center;\r\n  padding: clamp(20px, 5vw, 80px);\r\n  max-width: 1400px;\r\n  margin: 0 auto;\r\n}\r\n\r\n.content-wrapper {\r\n  max-width: 700px;\r\n  animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.3s both;\r\n}\r\n\r\n@keyframes fadeInUp {\r\n  from {\r\n    opacity: 0;\r\n    transform: translateY(40px);\r\n  }\r\n  to {\r\n    opacity: 1;\r\n    transform: translateY(0);\r\n  }\r\n}\r\n\r\n\/* ===== BADGE PILL ===== *\/\r\n.badge-pill {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 8px;\r\n  padding: 10px 18px;\r\n  background: rgba(255, 255, 255, 0.08);\r\n  backdrop-filter: blur(20px);\r\n  border: 1px solid rgba(255, 255, 255, 0.12);\r\n  border-radius: 100px;\r\n  font-size: 0.75rem;\r\n  font-weight: 600;\r\n  letter-spacing: 0.05em;\r\n  text-transform: uppercase;\r\n  color: rgba(255, 255, 255, 0.95);\r\n  margin-bottom: 24px;\r\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);\r\n  animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.1s both;\r\n}\r\n\r\n.badge-icon {\r\n  opacity: 0.9;\r\n}\r\n\r\n\/* ===== TYPOGRAPHY ===== *\/\r\n.hero-title {\r\n  font-size: clamp(2.5rem, 6vw, 4.5rem);\r\n  font-weight: 800;\r\n  line-height: 1.1;\r\n  margin-bottom: 24px;\r\n  color: #fff;\r\n  letter-spacing: -0.02em;\r\n}\r\n\r\n.title-line {\r\n  display: block;\r\n  animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.2s both;\r\n}\r\n\r\n.title-line:nth-child(2) {\r\n  animation-delay: 0.3s;\r\n}\r\n\r\n.gradient-text {\r\n  background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 50%, #ec4899 100%);\r\n  -webkit-background-clip: text;\r\n  -webkit-text-fill-color: transparent;\r\n  background-clip: text;\r\n  animation: gradientShift 8s ease infinite;\r\n  background-size: 200% 200%;\r\n}\r\n\r\n@keyframes gradientShift {\r\n  0%, 100% { background-position: 0% 50%; }\r\n  50% { background-position: 100% 50%; }\r\n}\r\n\r\n.hero-description {\r\n  font-size: clamp(1rem, 2vw, 1.2rem);\r\n  line-height: 1.7;\r\n  color: rgba(255, 255, 255, 0.85);\r\n  max-width: 600px;\r\n  margin-bottom: 36px;\r\n  animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.4s both;\r\n}\r\n\r\n\/* ===== BUTTONS ===== *\/\r\n.cta-stack {\r\n  display: flex;\r\n  gap: 16px;\r\n  flex-wrap: wrap;\r\n  margin-bottom: 48px;\r\n  animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.5s both;\r\n}\r\n\r\n.btn-ultra {\r\n  position: relative;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 8px;\r\n  padding: 16px 32px;\r\n  border-radius: 12px;\r\n  font-size: 0.95rem;\r\n  font-weight: 600;\r\n  text-decoration: none;\r\n  overflow: hidden;\r\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\r\n  cursor: pointer;\r\n  border: none;\r\n  white-space: nowrap;\r\n}\r\n\r\n.btn-primary {\r\n  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);\r\n  color: #fff;\r\n  box-shadow: 0 10px 30px rgba(59, 130, 246, 0.3);\r\n}\r\n\r\n.btn-primary::before {\r\n  content: '';\r\n  position: absolute;\r\n  inset: 0;\r\n  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);\r\n  opacity: 0;\r\n  transition: opacity 0.3s ease;\r\n}\r\n\r\n.btn-primary:hover {\r\n  transform: translateY(-2px);\r\n  box-shadow: 0 16px 40px rgba(59, 130, 246, 0.4);\r\n}\r\n\r\n.btn-primary:hover::before {\r\n  opacity: 1;\r\n}\r\n\r\n.btn-primary:active {\r\n  transform: translateY(0);\r\n}\r\n\r\n.btn-secondary {\r\n  background: rgba(255, 255, 255, 0.08);\r\n  backdrop-filter: blur(20px);\r\n  border: 1.5px solid rgba(255, 255, 255, 0.2);\r\n  color: #fff;\r\n}\r\n\r\n.btn-secondary:hover {\r\n  background: rgba(255, 255, 255, 0.15);\r\n  border-color: rgba(255, 255, 255, 0.3);\r\n  transform: translateY(-2px);\r\n  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);\r\n}\r\n\r\n.btn-text {\r\n  position: relative;\r\n  z-index: 1;\r\n}\r\n\r\n.btn-arrow {\r\n  position: relative;\r\n  z-index: 1;\r\n  transition: transform 0.3s ease;\r\n}\r\n\r\n.btn-primary:hover .btn-arrow {\r\n  transform: translateX(4px);\r\n}\r\n\r\n\/* ===== TRUST INDICATORS ===== *\/\r\n.trust-indicators {\r\n  display: grid;\r\n  grid-template-columns: repeat(3, 1fr);\r\n  gap: 32px;\r\n  max-width: 500px;\r\n  animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.6s both;\r\n}\r\n\r\n.indicator {\r\n  text-align: left;\r\n}\r\n\r\n.indicator-value {\r\n  font-size: 2rem;\r\n  font-weight: 800;\r\n  background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 100%);\r\n  -webkit-background-clip: text;\r\n  -webkit-text-fill-color: transparent;\r\n  background-clip: text;\r\n  margin-bottom: 4px;\r\n}\r\n\r\n.indicator-label {\r\n  font-size: 0.85rem;\r\n  color: rgba(255, 255, 255, 0.7);\r\n  font-weight: 500;\r\n}\r\n\r\n\/* ===== FEATURE TAGS ===== *\/\r\n.feature-tags {\r\n  display: flex;\r\n  gap: 12px;\r\n  flex-wrap: wrap;\r\n  animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.6s both;\r\n}\r\n\r\n.tag {\r\n  padding: 8px 16px;\r\n  background: rgba(255, 255, 255, 0.08);\r\n  backdrop-filter: blur(10px);\r\n  border: 1px solid rgba(255, 255, 255, 0.15);\r\n  border-radius: 8px;\r\n  font-size: 0.85rem;\r\n  color: rgba(255, 255, 255, 0.9);\r\n  font-weight: 500;\r\n}\r\n\r\n\/* ===== SERVICE GRID ===== *\/\r\n.service-grid {\r\n  display: grid;\r\n  grid-template-columns: repeat(4, 1fr);\r\n  gap: 16px;\r\n  animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.6s both;\r\n}\r\n\r\n.service-item {\r\n  padding: 16px;\r\n  background: rgba(255, 255, 255, 0.06);\r\n  backdrop-filter: blur(10px);\r\n  border: 1px solid rgba(255, 255, 255, 0.1);\r\n  border-radius: 12px;\r\n  text-align: center;\r\n  transition: all 0.3s ease;\r\n}\r\n\r\n.service-item:hover {\r\n  background: rgba(255, 255, 255, 0.1);\r\n  transform: translateY(-4px);\r\n}\r\n\r\n.service-icon {\r\n  font-size: 1.5rem;\r\n  margin-bottom: 8px;\r\n}\r\n\r\n.service-name {\r\n  font-size: 0.85rem;\r\n  color: rgba(255, 255, 255, 0.9);\r\n  font-weight: 500;\r\n}\r\n\r\n\/* ===== NAVIGATION ===== *\/\r\n.slider-nav {\r\n  position: absolute;\r\n  bottom: 60px;\r\n  left: 50%;\r\n  transform: translateX(-50%);\r\n  z-index: 10;\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 24px;\r\n  padding: 12px 20px;\r\n  background: rgba(255, 255, 255, 0.08);\r\n  backdrop-filter: blur(20px);\r\n  border: 1px solid rgba(255, 255, 255, 0.12);\r\n  border-radius: 100px;\r\n  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);\r\n}\r\n\r\n.nav-arrow {\r\n  width: 40px;\r\n  height: 40px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  background: rgba(255, 255, 255, 0.1);\r\n  border: 1px solid rgba(255, 255, 255, 0.15);\r\n  border-radius: 50%;\r\n  cursor: pointer;\r\n  transition: all 0.3s ease;\r\n  color: #fff;\r\n}\r\n\r\n.nav-arrow:hover {\r\n  background: rgba(255, 255, 255, 0.2);\r\n  transform: scale(1.1);\r\n}\r\n\r\n.nav-arrow:active {\r\n  transform: scale(0.95);\r\n}\r\n\r\n.nav-dots {\r\n  display: flex;\r\n  gap: 10px;\r\n  align-items: center;\r\n}\r\n\r\n.dot {\r\n  width: 8px;\r\n  height: 8px;\r\n  border-radius: 50%;\r\n  background: rgba(255, 255, 255, 0.3);\r\n  border: none;\r\n  cursor: pointer;\r\n  transition: all 0.3s ease;\r\n  padding: 0;\r\n}\r\n\r\n.dot.active {\r\n  width: 24px;\r\n  border-radius: 100px;\r\n  background: #fff;\r\n}\r\n\r\n.dot:not(.active):hover {\r\n  background: rgba(255, 255, 255, 0.5);\r\n  transform: scale(1.2);\r\n}\r\n\r\n\/* ===== PROGRESS BAR ===== *\/\r\n.progress-container {\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n  right: 0;\r\n  height: 3px;\r\n  background: rgba(255, 255, 255, 0.1);\r\n  z-index: 100;\r\n  overflow: hidden;\r\n}\r\n\r\n.progress-bar {\r\n  height: 100%;\r\n  background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 50%, #ec4899 100%);\r\n  width: 0%;\r\n  transition: width 0.1s linear;\r\n}\r\n\r\n\/* ===== SCROLL INDICATOR ===== *\/\r\n.scroll-indicator {\r\n  position: absolute;\r\n  bottom: 40px;\r\n  left: 50%;\r\n  transform: translateX(-50%);\r\n  z-index: 5;\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  gap: 12px;\r\n  opacity: 0.7;\r\n  animation: fadeInUp 1s ease 1s both, bounce 2s ease-in-out 2s infinite;\r\n}\r\n\r\n.scroll-text {\r\n  font-size: 0.75rem;\r\n  color: rgba(255, 255, 255, 0.8);\r\n  letter-spacing: 0.08em;\r\n  text-transform: uppercase;\r\n  font-weight: 600;\r\n}\r\n\r\n.scroll-mouse {\r\n  width: 24px;\r\n  height: 36px;\r\n  border: 2px solid rgba(255, 255, 255, 0.3);\r\n  border-radius: 100px;\r\n  position: relative;\r\n}\r\n\r\n.scroll-wheel {\r\n  width: 3px;\r\n  height: 8px;\r\n  background: rgba(255, 255, 255, 0.6);\r\n  border-radius: 100px;\r\n  position: absolute;\r\n  top: 6px;\r\n  left: 50%;\r\n  transform: translateX(-50%);\r\n  animation: scrollWheel 2s ease-in-out infinite;\r\n}\r\n\r\n@keyframes scrollWheel {\r\n  0%, 20% { transform: translateX(-50%) translateY(0); opacity: 1; }\r\n  100% { transform: translateX(-50%) translateY(16px); opacity: 0; }\r\n}\r\n\r\n@keyframes bounce {\r\n  0%, 100% { transform: translateX(-50%) translateY(0); }\r\n  50% { transform: translateX(-50%) translateY(-10px); }\r\n}\r\n\r\n\/* ===== RESPONSIVE ===== *\/\r\n@media (max-width: 1024px) {\r\n  .hero-title {\r\n    font-size: clamp(2rem, 5vw, 3.5rem);\r\n  }\r\n\r\n  .trust-indicators {\r\n    gap: 24px;\r\n  }\r\n\r\n  .service-grid {\r\n    grid-template-columns: repeat(2, 1fr);\r\n  }\r\n}\r\n\r\n@media (max-width: 768px) {\r\n  .inosys-hero-ultra {\r\n    max-height: none;\r\n    min-height: 100dvh;\r\n  }\r\n\r\n  .slide-content {\r\n    padding: clamp(20px, 5vw, 40px);\r\n    padding-bottom: 140px;\r\n  }\r\n\r\n  .hero-title {\r\n    font-size: clamp(1.8rem, 8vw, 2.8rem);\r\n    margin-bottom: 20px;\r\n  }\r\n\r\n  .hero-description {\r\n    font-size: 1rem;\r\n    margin-bottom: 28px;\r\n  }\r\n\r\n  .cta-stack {\r\n    flex-direction: column;\r\n    gap: 12px;\r\n    margin-bottom: 32px;\r\n  }\r\n\r\n  .btn-ultra {\r\n    width: 100%;\r\n    justify-content: center;\r\n    padding: 16px 24px;\r\n  }\r\n\r\n  .trust-indicators {\r\n    grid-template-columns: repeat(3, 1fr);\r\n    gap: 16px;\r\n  }\r\n\r\n  .indicator-value {\r\n    font-size: 1.5rem;\r\n  }\r\n\r\n  .indicator-label {\r\n    font-size: 0.75rem;\r\n  }\r\n\r\n  .service-grid {\r\n    gap: 12px;\r\n  }\r\n\r\n  .service-item {\r\n    padding: 12px;\r\n  }\r\n\r\n  .service-icon {\r\n    font-size: 1.2rem;\r\n  }\r\n\r\n  .service-name {\r\n    font-size: 0.75rem;\r\n  }\r\n\r\n  .slider-nav {\r\n    bottom: 80px;\r\n    gap: 16px;\r\n    padding: 10px 16px;\r\n  }\r\n\r\n  .nav-arrow {\r\n    width: 36px;\r\n    height: 36px;\r\n  }\r\n\r\n  .scroll-indicator {\r\n    display: none;\r\n  }\r\n\r\n  .gradient-orb {\r\n    filter: blur(60px);\r\n  }\r\n\r\n  .orb-1 {\r\n    width: 300px;\r\n    height: 300px;\r\n  }\r\n\r\n  .orb-2 {\r\n    width: 250px;\r\n    height: 250px;\r\n  }\r\n\r\n  .orb-3 {\r\n    width: 200px;\r\n    height: 200px;\r\n  }\r\n}\r\n\r\n@media (max-width: 480px) {\r\n  .badge-pill {\r\n    font-size: 0.65rem;\r\n    padding: 8px 14px;\r\n  }\r\n\r\n  .feature-tags {\r\n    gap: 8px;\r\n  }\r\n\r\n  .tag {\r\n    font-size: 0.75rem;\r\n    padding: 6px 12px;\r\n  }\r\n}\r\n\r\n\/* ===== ACCESSIBILITY ===== *\/\r\n@media (prefers-reduced-motion: reduce) {\r\n  *,\r\n  *::before,\r\n  *::after {\r\n    animation-duration: 0.01ms !important;\r\n    animation-iteration-count: 1 !important;\r\n    transition-duration: 0.01ms !important;\r\n  }\r\n\r\n  .gradient-orb {\r\n    animation: none;\r\n  }\r\n\r\n  .scroll-indicator {\r\n    animation: none;\r\n  }\r\n\r\n  .slide-bg {\r\n    transition: none;\r\n  }\r\n}\r\n\r\n\/* ===== PERFORMANCE OPTIMIZATIONS ===== *\/\r\n.inosys-slide-ultra,\r\n.slide-bg,\r\n.gradient-orb,\r\n.btn-ultra {\r\n  will-change: transform;\r\n}\r\n\r\n.slide-overlay {\r\n  will-change: opacity;\r\n}\r\n\r\n\/* ===== TOUCH OPTIMIZATION ===== *\/\r\n@media (hover: none) and (pointer: coarse) {\r\n  .btn-ultra:active {\r\n    transform: scale(0.98);\r\n  }\r\n\r\n  .nav-arrow:active {\r\n    transform: scale(0.9);\r\n  }\r\n}\r\n<\/style>\r\n\r\n<script>\r\n(function() {\r\n  'use strict';\r\n\r\n  \/\/ ===== CONFIGURATION =====\r\n  const CONFIG = {\r\n    autoplayInterval: 7000,\r\n    transitionDuration: 1200,\r\n    pauseOnInteraction: true,\r\n    swipeThreshold: 50\r\n  };\r\n\r\n  \/\/ ===== DOM ELEMENTS =====\r\n  const slides = document.querySelectorAll('.inosys-slide-ultra');\r\n  const dots = document.querySelectorAll('.nav-dots .dot');\r\n  const prevBtn = document.querySelector('.nav-prev');\r\n  const nextBtn = document.querySelector('.nav-next');\r\n  const progressBar = document.getElementById('slideProgress');\r\n\r\n  \/\/ ===== STATE =====\r\n  let currentSlide = 0;\r\n  let autoplayTimer = null;\r\n  let progressTimer = null;\r\n  let isPaused = false;\r\n  let touchStartX = 0;\r\n  let touchEndX = 0;\r\n\r\n  \/\/ ===== SLIDE TRANSITION =====\r\n  function goToSlide(index) {\r\n    if (index < 0) index = slides.length - 1;\r\n    if (index >= slides.length) index = 0;\r\n\r\n    \/\/ Remove active from all\r\n    slides.forEach(slide => slide.classList.remove('active'));\r\n    dots.forEach(dot => dot.classList.remove('active'));\r\n\r\n    \/\/ Add active to current\r\n    currentSlide = index;\r\n    slides[currentSlide].classList.add('active');\r\n    dots[currentSlide].classList.add('active');\r\n\r\n    \/\/ Reset progress\r\n    resetProgress();\r\n  }\r\n\r\n  function nextSlide() {\r\n    goToSlide(currentSlide + 1);\r\n  }\r\n\r\n  function prevSlide() {\r\n    goToSlide(currentSlide - 1);\r\n  }\r\n\r\n  \/\/ ===== PROGRESS BAR =====\r\n  function startProgress() {\r\n    if (!progressBar) return;\r\n    \r\n    let width = 0;\r\n    const increment = 100 \/ (CONFIG.autoplayInterval \/ 50);\r\n\r\n    clearInterval(progressTimer);\r\n    progressBar.style.width = '0%';\r\n\r\n    progressTimer = setInterval(() => {\r\n      if (!isPaused) {\r\n        width += increment;\r\n        progressBar.style.width = width + '%';\r\n\r\n        if (width >= 100) {\r\n          clearInterval(progressTimer);\r\n        }\r\n      }\r\n    }, 50);\r\n  }\r\n\r\n  function resetProgress() {\r\n    clearInterval(progressTimer);\r\n    if (progressBar) {\r\n      progressBar.style.width = '0%';\r\n    }\r\n    startProgress();\r\n  }\r\n\r\n  \/\/ ===== AUTOPLAY =====\r\n  function startAutoplay() {\r\n    stopAutoplay();\r\n    startProgress();\r\n    \r\n    autoplayTimer = setInterval(() => {\r\n      if (!isPaused) {\r\n        nextSlide();\r\n      }\r\n    }, CONFIG.autoplayInterval);\r\n  }\r\n\r\n  function stopAutoplay() {\r\n    clearInterval(autoplayTimer);\r\n    clearInterval(progressTimer);\r\n  }\r\n\r\n  function pauseAutoplay() {\r\n    isPaused = true;\r\n  }\r\n\r\n  function resumeAutoplay() {\r\n    isPaused = false;\r\n  }\r\n\r\n  \/\/ ===== TOUCH GESTURES =====\r\n  function handleTouchStart(e) {\r\n    touchStartX = e.changedTouches[0].screenX;\r\n  }\r\n\r\n  function handleTouchEnd(e) {\r\n    touchEndX = e.changedTouches[0].screenX;\r\n    handleSwipe();\r\n  }\r\n\r\n  function handleSwipe() {\r\n    const diff = touchStartX - touchEndX;\r\n\r\n    if (Math.abs(diff) > CONFIG.swipeThreshold) {\r\n      if (diff > 0) {\r\n        nextSlide();\r\n      } else {\r\n        prevSlide();\r\n      }\r\n\r\n      if (CONFIG.pauseOnInteraction) {\r\n        pauseAutoplay();\r\n        setTimeout(resumeAutoplay, 3000);\r\n      }\r\n    }\r\n  }\r\n\r\n  \/\/ ===== KEYBOARD NAVIGATION =====\r\n  function handleKeyboard(e) {\r\n    if (e.key === 'ArrowLeft') {\r\n      prevSlide();\r\n    } else if (e.key === 'ArrowRight') {\r\n      nextSlide();\r\n    }\r\n  }\r\n\r\n  \/\/ ===== MAGNETIC BUTTON EFFECT =====\r\n  function initMagneticButtons() {\r\n    const buttons = document.querySelectorAll('.btn-ultra');\r\n\r\n    buttons.forEach(button => {\r\n      button.addEventListener('mousemove', (e) => {\r\n        const rect = button.getBoundingClientRect();\r\n        const x = e.clientX - rect.left - rect.width \/ 2;\r\n        const y = e.clientY - rect.top - rect.height \/ 2;\r\n\r\n        button.style.transform = `translate(${x * 0.15}px, ${y * 0.15}px)`;\r\n      });\r\n\r\n      button.addEventListener('mouseleave', () => {\r\n        button.style.transform = '';\r\n      });\r\n    });\r\n  }\r\n\r\n  \/\/ ===== VISIBILITY API =====\r\n  function handleVisibilityChange() {\r\n    if (document.hidden) {\r\n      pauseAutoplay();\r\n    } else {\r\n      resumeAutoplay();\r\n    }\r\n  }\r\n\r\n  \/\/ ===== EVENT LISTENERS =====\r\n  function init() {\r\n    \/\/ Navigation buttons\r\n    if (prevBtn) prevBtn.addEventListener('click', () => {\r\n      prevSlide();\r\n      if (CONFIG.pauseOnInteraction) {\r\n        pauseAutoplay();\r\n        setTimeout(resumeAutoplay, 3000);\r\n      }\r\n    });\r\n\r\n    if (nextBtn) nextBtn.addEventListener('click', () => {\r\n      nextSlide();\r\n      if (CONFIG.pauseOnInteraction) {\r\n        pauseAutoplay();\r\n        setTimeout(resumeAutoplay, 3000);\r\n      }\r\n    });\r\n\r\n    \/\/ Dots navigation\r\n    dots.forEach((dot, index) => {\r\n      dot.addEventListener('click', () => {\r\n        goToSlide(index);\r\n        if (CONFIG.pauseOnInteraction) {\r\n          pauseAutoplay();\r\n          setTimeout(resumeAutoplay, 3000);\r\n        }\r\n      });\r\n    });\r\n\r\n    \/\/ Touch gestures\r\n    const slider = document.querySelector('.inosys-slider-ultra');\r\n    if (slider) {\r\n      slider.addEventListener('touchstart', handleTouchStart, { passive: true });\r\n      slider.addEventListener('touchend', handleTouchEnd, { passive: true });\r\n    }\r\n\r\n    \/\/ Keyboard navigation\r\n    document.addEventListener('keydown', handleKeyboard);\r\n\r\n    \/\/ Visibility API\r\n    document.addEventListener('visibilitychange', handleVisibilityChange);\r\n\r\n    \/\/ Magnetic buttons\r\n    if (window.innerWidth > 768) {\r\n      initMagneticButtons();\r\n    }\r\n\r\n    \/\/ Start autoplay\r\n    startAutoplay();\r\n\r\n    \/\/ Pause on hover (desktop only)\r\n    if (window.innerWidth > 768 && CONFIG.pauseOnInteraction) {\r\n      const heroSection = document.querySelector('.inosys-hero-ultra');\r\n      if (heroSection) {\r\n        heroSection.addEventListener('mouseenter', pauseAutoplay);\r\n        heroSection.addEventListener('mouseleave', resumeAutoplay);\r\n      }\r\n    }\r\n  }\r\n\r\n  \/\/ ===== CLEANUP =====\r\n  window.addEventListener('beforeunload', () => {\r\n    stopAutoplay();\r\n  });\r\n\r\n  \/\/ ===== INITIALIZE =====\r\n  if (document.readyState === 'loading') {\r\n    document.addEventListener('DOMContentLoaded', init);\r\n  } else {\r\n    init();\r\n  }\r\n\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-62a21f0 elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"62a21f0\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-f424b58\" data-id=\"f424b58\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-81bf3f8 elementor-widget elementor-widget-html\" data-id=\"81bf3f8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- INOSYSTECH ULTRA DOMAINS SECTION -->\r\n<section class=\"inosys-domains-ultra\">\r\n\r\n  <!-- Animated Background Elements -->\r\n  <div class=\"domains-ambient\">\r\n    <div class=\"grid-overlay\"><\/div>\r\n    <div class=\"floating-shape shape-1\"><\/div>\r\n    <div class=\"floating-shape shape-2\"><\/div>\r\n    <div class=\"floating-shape shape-3\"><\/div>\r\n  <\/div>\r\n\r\n  <div class=\"domains-container\">\r\n\r\n    <!-- Section Header -->\r\n    <div class=\"domains-header\" data-aos=\"fade-up\">\r\n      <div class=\"header-badge\">\r\n        <svg class=\"badge-pulse\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n          <path d=\"M22 12h-4l-3 9L9 3l-3 9H2\"\/>\r\n        <\/svg>\r\n        <span>Nos expertises cl\u00e9s<\/span>\r\n      <\/div>\r\n      \r\n      <h2 class=\"domains-title\">\r\n        <span class=\"title-main\">Des solutions technologiques<\/span>\r\n        <span class=\"title-accent\">pens\u00e9es pour la sant\u00e9<\/span>\r\n      <\/h2>\r\n      \r\n      <p class=\"domains-description\">\r\n        Nous accompagnons les structures m\u00e9dicales et institutionnelles\r\n        avec des \u00e9quipements, services et solutions fiables,\r\n        conformes aux exigences du secteur de la sant\u00e9.\r\n      <\/p>\r\n    <\/div>\r\n\r\n    <!-- Domains Grid -->\r\n    <div class=\"domains-grid\">\r\n\r\n      <!-- Card 1 -->\r\n      <a href=\"https:\/\/inosystech.com\/catalogue\/\" class=\"domain-card\" data-aos=\"fade-up\" data-aos-delay=\"100\">\r\n        <div class=\"card-glow\"><\/div>\r\n        <div class=\"card-header\">\r\n          <div class=\"icon-wrapper\">\r\n            <svg class=\"domain-icon\" width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\">\r\n              <path d=\"M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 008 10.172V5L7 4z\"\/>\r\n            <\/svg>\r\n          <\/div>\r\n          <div class=\"card-number\">01<\/div>\r\n        <\/div>\r\n\r\n        <h3 class=\"card-title\">Laboratoires & diagnostic<\/h3>\r\n        \r\n        <p class=\"card-description\">\r\n          Biochimie, h\u00e9matologie, immunologie et \u00e9quipements de pr\u00e9l\u00e8vement\r\n          pour des diagnostics pr\u00e9cis et rapides.\r\n        <\/p>\r\n\r\n        <div class=\"card-features\">\r\n          <span class=\"feature-tag\">Biochimie<\/span>\r\n          <span class=\"feature-tag\">H\u00e9matologie<\/span>\r\n          <span class=\"feature-tag\">Immunologie<\/span>\r\n        <\/div>\r\n\r\n        <div class=\"card-arrow\">\r\n          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n            <path d=\"M5 12h14M12 5l7 7-7 7\"\/>\r\n          <\/svg>\r\n        <\/div>\r\n      <\/a>\r\n\r\n      <!-- Card 2 -->\r\n      <a href=\"https:\/\/inosystech.com\/catalogue\/\" class=\"domain-card\" data-aos=\"fade-up\" data-aos-delay=\"200\">\r\n        <div class=\"card-glow\"><\/div>\r\n        <div class=\"card-header\">\r\n          <div class=\"icon-wrapper\">\r\n            <svg class=\"domain-icon\" width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\">\r\n              <rect x=\"2\" y=\"3\" width=\"20\" height=\"14\" rx=\"2\"\/>\r\n              <path d=\"M8 21h8M12 17v4\"\/>\r\n            <\/svg>\r\n          <\/div>\r\n          <div class=\"card-number\">02<\/div>\r\n        <\/div>\r\n\r\n        <h3 class=\"card-title\">Imagerie & \u00e9quipements m\u00e9dicaux<\/h3>\r\n        \r\n        <p class=\"card-description\">\r\n          Solutions d'imagerie, monitoring et dispositifs m\u00e9dicaux\r\n          pour h\u00f4pitaux et cliniques modernes.\r\n        <\/p>\r\n\r\n        <div class=\"card-features\">\r\n          <span class=\"feature-tag\">Imagerie<\/span>\r\n          <span class=\"feature-tag\">Monitoring<\/span>\r\n          <span class=\"feature-tag\">Dispositifs<\/span>\r\n        <\/div>\r\n\r\n        <div class=\"card-arrow\">\r\n          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n            <path d=\"M5 12h14M12 5l7 7-7 7\"\/>\r\n          <\/svg>\r\n        <\/div>\r\n      <\/a>\r\n\r\n      <!-- Card 3 -->\r\n      <a href=\"https:\/\/inosystech.com\/catalogue\/\" class=\"domain-card\" data-aos=\"fade-up\" data-aos-delay=\"300\">\r\n        <div class=\"card-glow\"><\/div>\r\n        <div class=\"card-header\">\r\n          <div class=\"icon-wrapper\">\r\n            <svg class=\"domain-icon\" width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\">\r\n              <path d=\"M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2\"\/>\r\n              <circle cx=\"12\" cy=\"7\" r=\"4\"\/>\r\n            <\/svg>\r\n          <\/div>\r\n          <div class=\"card-number\">03<\/div>\r\n        <\/div>\r\n\r\n        <h3 class=\"card-title\">Mobilier hospitalier<\/h3>\r\n        \r\n        <p class=\"card-description\">\r\n          Lits m\u00e9dicaux, tables et mobilier sp\u00e9cialis\u00e9\r\n          con\u00e7us pour le confort et la s\u00e9curit\u00e9 des patients.\r\n        <\/p>\r\n\r\n        <div class=\"card-features\">\r\n          <span class=\"feature-tag\">Lits m\u00e9dicaux<\/span>\r\n          <span class=\"feature-tag\">Tables<\/span>\r\n          <span class=\"feature-tag\">Mobilier<\/span>\r\n        <\/div>\r\n\r\n        <div class=\"card-arrow\">\r\n          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n            <path d=\"M5 12h14M12 5l7 7-7 7\"\/>\r\n          <\/svg>\r\n        <\/div>\r\n      <\/a>\r\n\r\n      <!-- Card 4 -->\r\n      <a href=\"https:\/\/inosystech.com\/catalogue\/\" class=\"domain-card\" data-aos=\"fade-up\" data-aos-delay=\"400\">\r\n        <div class=\"card-glow\"><\/div>\r\n        <div class=\"card-header\">\r\n          <div class=\"icon-wrapper\">\r\n            <svg class=\"domain-icon\" width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\">\r\n              <rect x=\"2\" y=\"2\" width=\"20\" height=\"20\" rx=\"2.18\" ry=\"2.18\"\/>\r\n              <path d=\"M7 2v20M17 2v20M2 12h20M2 7h5M2 17h5M17 17h5M17 7h5\"\/>\r\n            <\/svg>\r\n          <\/div>\r\n          <div class=\"card-number\">04<\/div>\r\n        <\/div>\r\n\r\n        <h3 class=\"card-title\">Informatique professionnelle<\/h3>\r\n        \r\n        <p class=\"card-description\">\r\n          Ordinateurs, imprimantes et solutions IT\r\n          adapt\u00e9es aux environnements m\u00e9dicaux et institutionnels.\r\n        <\/p>\r\n\r\n        <div class=\"card-features\">\r\n          <span class=\"feature-tag\">Ordinateurs<\/span>\r\n          <span class=\"feature-tag\">Imprimantes<\/span>\r\n          <span class=\"feature-tag\">Solutions IT<\/span>\r\n        <\/div>\r\n\r\n        <div class=\"card-arrow\">\r\n          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n            <path d=\"M5 12h14M12 5l7 7-7 7\"\/>\r\n          <\/svg>\r\n        <\/div>\r\n      <\/a>\r\n\r\n    <\/div>\r\n\r\n    <!-- Bottom CTA -->\r\n    <div class=\"domains-cta\" data-aos=\"fade-up\" data-aos-delay=\"500\">\r\n      <div class=\"cta-content\">\r\n        <h3 class=\"cta-title\">Besoin d'une solution personnalis\u00e9e ?<\/h3>\r\n        <p class=\"cta-text\">Nos experts sont \u00e0 votre \u00e9coute pour \u00e9tudier vos besoins sp\u00e9cifiques<\/p>\r\n      <\/div>\r\n      <a href=\"https:\/\/inosystech.com\/contact-us\/\" class=\"cta-button\">\r\n        <span>Contactez-nous<\/span>\r\n        <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\">\r\n          <path d=\"M5 12h14M12 5l7 7-7 7\"\/>\r\n        <\/svg>\r\n      <\/a>\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n<\/section>\r\n\r\n<style>\r\n\/* ===== RESET ===== *\/\r\n.inosys-domains-ultra * {\r\n  margin: 0;\r\n  padding: 0;\r\n  box-sizing: border-box;\r\n}\r\n\r\n\/* ===== SECTION BASE ===== *\/\r\n.inosys-domains-ultra {\r\n  position: relative;\r\n  padding: clamp(80px, 10vw, 140px) 0;\r\n  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);\r\n  overflow: hidden;\r\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', system-ui, sans-serif;\r\n}\r\n\r\n\/* ===== AMBIENT BACKGROUND ===== *\/\r\n.domains-ambient {\r\n  position: absolute;\r\n  inset: 0;\r\n  z-index: 0;\r\n  pointer-events: none;\r\n}\r\n\r\n.grid-overlay {\r\n  position: absolute;\r\n  inset: 0;\r\n  background-image: \r\n    linear-gradient(rgba(59, 130, 246, 0.03) 1px, transparent 1px),\r\n    linear-gradient(90deg, rgba(59, 130, 246, 0.03) 1px, transparent 1px);\r\n  background-size: 50px 50px;\r\n  opacity: 0.5;\r\n}\r\n\r\n.floating-shape {\r\n  position: absolute;\r\n  border-radius: 50%;\r\n  filter: blur(100px);\r\n  animation: floatShape 25s ease-in-out infinite;\r\n  opacity: 0.15;\r\n}\r\n\r\n.shape-1 {\r\n  width: 600px;\r\n  height: 600px;\r\n  background: radial-gradient(circle, #3b82f6 0%, transparent 70%);\r\n  top: -15%;\r\n  right: -10%;\r\n  animation-delay: 0s;\r\n}\r\n\r\n.shape-2 {\r\n  width: 500px;\r\n  height: 500px;\r\n  background: radial-gradient(circle, #8b5cf6 0%, transparent 70%);\r\n  bottom: -10%;\r\n  left: -10%;\r\n  animation-delay: -10s;\r\n}\r\n\r\n.shape-3 {\r\n  width: 400px;\r\n  height: 400px;\r\n  background: radial-gradient(circle, #06b6d4 0%, transparent 70%);\r\n  top: 50%;\r\n  left: 50%;\r\n  transform: translate(-50%, -50%);\r\n  animation-delay: -15s;\r\n}\r\n\r\n@keyframes floatShape {\r\n  0%, 100% { transform: translate(0, 0) scale(1); }\r\n  33% { transform: translate(40px, -40px) scale(1.1); }\r\n  66% { transform: translate(-30px, 30px) scale(0.9); }\r\n}\r\n\r\n\/* ===== CONTAINER ===== *\/\r\n.domains-container {\r\n  position: relative;\r\n  z-index: 1;\r\n  max-width: 1280px;\r\n  margin: 0 auto;\r\n  padding: 0 clamp(20px, 5vw, 40px);\r\n}\r\n\r\n\/* ===== HEADER ===== *\/\r\n.domains-header {\r\n  max-width: 780px;\r\n  margin: 0 auto 80px;\r\n  text-align: center;\r\n}\r\n\r\n.header-badge {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 10px;\r\n  padding: 12px 24px;\r\n  background: rgba(59, 130, 246, 0.08);\r\n  backdrop-filter: blur(10px);\r\n  border: 1px solid rgba(59, 130, 246, 0.15);\r\n  border-radius: 100px;\r\n  margin-bottom: 24px;\r\n  color: #3b82f6;\r\n  font-size: 0.85rem;\r\n  font-weight: 600;\r\n  letter-spacing: 0.05em;\r\n  text-transform: uppercase;\r\n}\r\n\r\n.badge-pulse {\r\n  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\r\n}\r\n\r\n@keyframes pulse {\r\n  0%, 100% { opacity: 1; }\r\n  50% { opacity: 0.5; }\r\n}\r\n\r\n.domains-title {\r\n  font-size: clamp(2rem, 4vw, 3.2rem);\r\n  font-weight: 800;\r\n  line-height: 1.15;\r\n  margin-bottom: 24px;\r\n  letter-spacing: -0.02em;\r\n}\r\n\r\n.title-main {\r\n  display: block;\r\n  color: #0f172a;\r\n}\r\n\r\n.title-accent {\r\n  display: block;\r\n  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);\r\n  -webkit-background-clip: text;\r\n  -webkit-text-fill-color: transparent;\r\n  background-clip: text;\r\n}\r\n\r\n.domains-description {\r\n  font-size: clamp(1rem, 2vw, 1.15rem);\r\n  line-height: 1.7;\r\n  color: #64748b;\r\n  max-width: 680px;\r\n  margin: 0 auto;\r\n}\r\n\r\n\/* ===== GRID ===== *\/\r\n.domains-grid {\r\n  display: grid;\r\n  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\r\n  gap: 32px;\r\n  margin-bottom: 80px;\r\n}\r\n\r\n\/* ===== DOMAIN CARDS ===== *\/\r\n.domain-card {\r\n  position: relative;\r\n  display: block;\r\n  background: rgba(255, 255, 255, 0.7);\r\n  backdrop-filter: blur(20px);\r\n  border: 1px solid rgba(148, 163, 184, 0.15);\r\n  border-radius: 24px;\r\n  padding: 40px 32px;\r\n  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);\r\n  cursor: pointer;\r\n  overflow: hidden;\r\n  isolation: isolate;\r\n  text-decoration: none;\r\n  color: inherit;\r\n}\r\n\r\n.domain-card::before {\r\n  content: '';\r\n  position: absolute;\r\n  inset: 0;\r\n  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, transparent 100%);\r\n  opacity: 0;\r\n  transition: opacity 0.5s ease;\r\n  z-index: -1;\r\n}\r\n\r\n.domain-card:hover {\r\n  transform: translateY(-12px);\r\n  border-color: rgba(59, 130, 246, 0.3);\r\n  box-shadow: \r\n    0 20px 60px rgba(59, 130, 246, 0.15),\r\n    0 0 0 1px rgba(59, 130, 246, 0.1);\r\n}\r\n\r\n.domain-card:hover::before {\r\n  opacity: 1;\r\n}\r\n\r\n\/* Card Glow Effect *\/\r\n.card-glow {\r\n  position: absolute;\r\n  top: -50%;\r\n  left: -50%;\r\n  width: 200%;\r\n  height: 200%;\r\n  background: radial-gradient(\r\n    circle,\r\n    rgba(59, 130, 246, 0.3) 0%,\r\n    transparent 50%\r\n  );\r\n  opacity: 0;\r\n  transition: opacity 0.5s ease;\r\n  pointer-events: none;\r\n  z-index: -1;\r\n}\r\n\r\n.domain-card:hover .card-glow {\r\n  opacity: 0.4;\r\n}\r\n\r\n\/* Card Header *\/\r\n.card-header {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  margin-bottom: 24px;\r\n}\r\n\r\n.icon-wrapper {\r\n  width: 64px;\r\n  height: 64px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);\r\n  border-radius: 16px;\r\n  position: relative;\r\n  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\r\n  box-shadow: 0 10px 30px rgba(59, 130, 246, 0.2);\r\n}\r\n\r\n.domain-card:hover .icon-wrapper {\r\n  transform: scale(1.1) rotate(5deg);\r\n  box-shadow: 0 15px 40px rgba(59, 130, 246, 0.35);\r\n}\r\n\r\n.domain-icon {\r\n  color: #ffffff;\r\n  transition: transform 0.4s ease;\r\n}\r\n\r\n.domain-card:hover .domain-icon {\r\n  transform: scale(1.1);\r\n}\r\n\r\n.card-number {\r\n  font-size: 2.5rem;\r\n  font-weight: 800;\r\n  background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);\r\n  -webkit-background-clip: text;\r\n  -webkit-text-fill-color: transparent;\r\n  background-clip: text;\r\n  opacity: 0.5;\r\n  line-height: 1;\r\n}\r\n\r\n\/* Card Content *\/\r\n.card-title {\r\n  font-size: 1.4rem;\r\n  font-weight: 700;\r\n  color: #0f172a;\r\n  margin-bottom: 16px;\r\n  line-height: 1.3;\r\n  transition: color 0.3s ease;\r\n}\r\n\r\n.domain-card:hover .card-title {\r\n  color: #3b82f6;\r\n}\r\n\r\n.card-description {\r\n  font-size: 0.95rem;\r\n  line-height: 1.7;\r\n  color: #64748b;\r\n  margin-bottom: 24px;\r\n}\r\n\r\n\/* Feature Tags *\/\r\n.card-features {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  gap: 8px;\r\n  margin-bottom: 20px;\r\n}\r\n\r\n.feature-tag {\r\n  padding: 6px 14px;\r\n  background: rgba(59, 130, 246, 0.08);\r\n  border: 1px solid rgba(59, 130, 246, 0.15);\r\n  border-radius: 8px;\r\n  font-size: 0.75rem;\r\n  font-weight: 600;\r\n  color: #3b82f6;\r\n  transition: all 0.3s ease;\r\n}\r\n\r\n.domain-card:hover .feature-tag {\r\n  background: rgba(59, 130, 246, 0.15);\r\n  border-color: rgba(59, 130, 246, 0.25);\r\n}\r\n\r\n\/* Card Arrow *\/\r\n.card-arrow {\r\n  width: 44px;\r\n  height: 44px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  background: rgba(59, 130, 246, 0.08);\r\n  border-radius: 12px;\r\n  margin-top: auto;\r\n  opacity: 0;\r\n  transform: translateX(-10px);\r\n  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\r\n  color: #3b82f6;\r\n}\r\n\r\n.domain-card:hover .card-arrow {\r\n  opacity: 1;\r\n  transform: translateX(0);\r\n  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);\r\n  color: #ffffff;\r\n}\r\n\r\n\/* ===== BOTTOM CTA ===== *\/\r\n.domains-cta {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  gap: 32px;\r\n  padding: 48px;\r\n  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);\r\n  border-radius: 24px;\r\n  position: relative;\r\n  overflow: hidden;\r\n}\r\n\r\n.domains-cta::before {\r\n  content: '';\r\n  position: absolute;\r\n  inset: 0;\r\n  background: url(\"data:image\/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'\/%3E%3C\/g%3E%3C\/g%3E%3C\/svg%3E\");\r\n  opacity: 0.4;\r\n  animation: patternSlide 20s linear infinite;\r\n}\r\n\r\n@keyframes patternSlide {\r\n  0% { transform: translate(0, 0); }\r\n  100% { transform: translate(60px, 60px); }\r\n}\r\n\r\n.cta-content {\r\n  position: relative;\r\n  z-index: 1;\r\n  flex: 1;\r\n}\r\n\r\n.cta-title {\r\n  font-size: clamp(1.4rem, 3vw, 1.8rem);\r\n  font-weight: 700;\r\n  color: #ffffff;\r\n  margin-bottom: 8px;\r\n}\r\n\r\n.cta-text {\r\n  font-size: 1rem;\r\n  color: rgba(255, 255, 255, 0.85);\r\n  line-height: 1.6;\r\n}\r\n\r\n.cta-button {\r\n  position: relative;\r\n  z-index: 1;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 12px;\r\n  padding: 18px 36px;\r\n  background: #ffffff;\r\n  color: #3b82f6;\r\n  font-size: 1rem;\r\n  font-weight: 600;\r\n  text-decoration: none;\r\n  border-radius: 12px;\r\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\r\n  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);\r\n  white-space: nowrap;\r\n}\r\n\r\n.cta-button:hover {\r\n  transform: translateY(-3px);\r\n  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);\r\n  background: #f8fafc;\r\n}\r\n\r\n.cta-button svg {\r\n  transition: transform 0.3s ease;\r\n}\r\n\r\n.cta-button:hover svg {\r\n  transform: translateX(4px);\r\n}\r\n\r\n\/* ===== AOS ANIMATIONS ===== *\/\r\n[data-aos=\"fade-up\"] {\r\n  opacity: 0;\r\n  transform: translateY(30px);\r\n  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);\r\n}\r\n\r\n[data-aos=\"fade-up\"].aos-animate {\r\n  opacity: 1;\r\n  transform: translateY(0);\r\n}\r\n\r\n\/* ===== RESPONSIVE ===== *\/\r\n@media (max-width: 1024px) {\r\n  .domains-grid {\r\n    grid-template-columns: repeat(2, 1fr);\r\n    gap: 24px;\r\n  }\r\n\r\n  .domains-cta {\r\n    flex-direction: column;\r\n    text-align: center;\r\n    padding: 40px 32px;\r\n  }\r\n\r\n  .cta-button {\r\n    width: 100%;\r\n    justify-content: center;\r\n  }\r\n}\r\n\r\n@media (max-width: 768px) {\r\n  .inosys-domains-ultra {\r\n    padding: clamp(60px, 8vw, 100px) 0;\r\n  }\r\n\r\n  .domains-header {\r\n    margin-bottom: 60px;\r\n  }\r\n\r\n  .domains-title {\r\n    font-size: clamp(1.8rem, 5vw, 2.5rem);\r\n  }\r\n\r\n  .domains-grid {\r\n    grid-template-columns: 1fr;\r\n    gap: 20px;\r\n    margin-bottom: 60px;\r\n  }\r\n\r\n  .domain-card {\r\n    padding: 32px 24px;\r\n  }\r\n\r\n  .icon-wrapper {\r\n    width: 56px;\r\n    height: 56px;\r\n  }\r\n\r\n  .card-number {\r\n    font-size: 2rem;\r\n  }\r\n\r\n  .card-title {\r\n    font-size: 1.25rem;\r\n  }\r\n\r\n  .domains-cta {\r\n    padding: 32px 24px;\r\n    gap: 24px;\r\n  }\r\n\r\n  .cta-title {\r\n    font-size: 1.3rem;\r\n  }\r\n\r\n  .cta-text {\r\n    font-size: 0.95rem;\r\n  }\r\n\r\n  .floating-shape {\r\n    filter: blur(70px);\r\n  }\r\n\r\n  .shape-1 {\r\n    width: 400px;\r\n    height: 400px;\r\n  }\r\n\r\n  .shape-2 {\r\n    width: 350px;\r\n    height: 350px;\r\n  }\r\n\r\n  .shape-3 {\r\n    width: 300px;\r\n    height: 300px;\r\n  }\r\n}\r\n\r\n@media (max-width: 480px) {\r\n  .header-badge {\r\n    font-size: 0.75rem;\r\n    padding: 10px 20px;\r\n  }\r\n\r\n  .card-features {\r\n    gap: 6px;\r\n  }\r\n\r\n  .feature-tag {\r\n    font-size: 0.7rem;\r\n    padding: 5px 12px;\r\n  }\r\n}\r\n\r\n\/* ===== ACCESSIBILITY ===== *\/\r\n@media (prefers-reduced-motion: reduce) {\r\n  *,\r\n  *::before,\r\n  *::after {\r\n    animation-duration: 0.01ms !important;\r\n    animation-iteration-count: 1 !important;\r\n    transition-duration: 0.01ms !important;\r\n  }\r\n\r\n  .floating-shape,\r\n  .badge-pulse {\r\n    animation: none;\r\n  }\r\n}\r\n\r\n\/* Focus states for accessibility *\/\r\n.domain-card:focus-visible {\r\n  outline: 2px solid #3b82f6;\r\n  outline-offset: 4px;\r\n}\r\n\r\n.cta-button:focus-visible {\r\n  outline: 2px solid #ffffff;\r\n  outline-offset: 4px;\r\n}\r\n<\/style>\r\n\r\n<script>\r\n\/\/ ===== SIMPLE AOS-LIKE SCROLL ANIMATION =====\r\n(function() {\r\n  'use strict';\r\n\r\n  const animateOnScroll = () => {\r\n    const elements = document.querySelectorAll('[data-aos]');\r\n    \r\n    const observer = new IntersectionObserver((entries) => {\r\n      entries.forEach(entry => {\r\n        if (entry.isIntersecting) {\r\n          entry.target.classList.add('aos-animate');\r\n          observer.unobserve(entry.target);\r\n        }\r\n      });\r\n    }, {\r\n      threshold: 0.15,\r\n      rootMargin: '0px 0px -50px 0px'\r\n    });\r\n\r\n    elements.forEach(el => observer.observe(el));\r\n  };\r\n\r\n  \/\/ ===== CARD GLOW FOLLOW MOUSE =====\r\n  const initCardGlow = () => {\r\n    const cards = document.querySelectorAll('.domain-card');\r\n\r\n    cards.forEach(card => {\r\n      const glow = card.querySelector('.card-glow');\r\n\r\n      card.addEventListener('mousemove', (e) => {\r\n        const rect = card.getBoundingClientRect();\r\n        const x = e.clientX - rect.left;\r\n        const y = e.clientY - rect.top;\r\n\r\n        glow.style.background = `radial-gradient(\r\n          circle at ${x}px ${y}px,\r\n          rgba(59, 130, 246, 0.3) 0%,\r\n          transparent 50%\r\n        )`;\r\n      });\r\n    });\r\n  };\r\n\r\n  \/\/ ===== 3D CARD TILT EFFECT (Desktop Only) =====\r\n  const initCardTilt = () => {\r\n    if (window.innerWidth <= 768) return;\r\n\r\n    const cards = document.querySelectorAll('.domain-card');\r\n\r\n    cards.forEach(card => {\r\n      card.addEventListener('mousemove', (e) => {\r\n        const rect = card.getBoundingClientRect();\r\n        const x = e.clientX - rect.left;\r\n        const y = e.clientY - rect.top;\r\n\r\n        const centerX = rect.width \/ 2;\r\n        const centerY = rect.height \/ 2;\r\n\r\n        const rotateX = ((y - centerY) \/ centerY) * -5;\r\n        const rotateY = ((x - centerX) \/ centerX) * 5;\r\n\r\n        card.style.transform = `\r\n          translateY(-12px) \r\n          perspective(1000px) \r\n          rotateX(${rotateX}deg) \r\n          rotateY(${rotateY}deg)\r\n        `;\r\n      });\r\n\r\n      card.addEventListener('mouseleave', () => {\r\n        card.style.transform = '';\r\n      });\r\n    });\r\n  };\r\n\r\n  \/\/ ===== MAGNETIC BUTTON EFFECT =====\r\n  const initMagneticButton = () => {\r\n    if (window.innerWidth <= 768) return;\r\n\r\n    const button = document.querySelector('.cta-button');\r\n    if (!button) return;\r\n\r\n    button.addEventListener('mousemove', (e) => {\r\n      const rect = button.getBoundingClientRect();\r\n      const x = e.clientX - rect.left - rect.width \/ 2;\r\n      const y = e.clientY - rect.top - rect.height \/ 2;\r\n\r\n      button.style.transform = `\r\n        translateY(-3px) \r\n        translate(${x * 0.2}px, ${y * 0.2}px)\r\n      `;\r\n    });\r\n\r\n    button.addEventListener('mouseleave', () => {\r\n      button.style.transform = '';\r\n    });\r\n  };\r\n\r\n  \/\/ ===== INITIALIZE =====\r\n  const init = () => {\r\n    animateOnScroll();\r\n    initCardGlow();\r\n    initCardTilt();\r\n    initMagneticButton();\r\n  };\r\n\r\n  if (document.readyState === 'loading') {\r\n    document.addEventListener('DOMContentLoaded', init);\r\n  } else {\r\n    init();\r\n  }\r\n\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-c226799 elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"c226799\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-fab3e16\" data-id=\"fab3e16\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-8322517 elementor-widget elementor-widget-html\" data-id=\"8322517\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- INOSYSTECH ULTRA SERVICES SECTION -->\r\n<section class=\"inosys-services-ultra\">\r\n  \r\n  <!-- Animated Background -->\r\n  <div class=\"services-ambient\">\r\n    <div class=\"ambient-gradient\"><\/div>\r\n    <div class=\"floating-particle particle-1\"><\/div>\r\n    <div class=\"floating-particle particle-2\"><\/div>\r\n    <div class=\"floating-particle particle-3\"><\/div>\r\n    <div class=\"floating-particle particle-4\"><\/div>\r\n  <\/div>\r\n\r\n  <div class=\"services-container\">\r\n\r\n    <!-- Section Header -->\r\n    <div class=\"services-header\" data-aos=\"fade-up\">\r\n      <div class=\"header-badge\">\r\n        <svg class=\"badge-icon\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n          <path d=\"M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5\"\/>\r\n        <\/svg>\r\n        <span>Notre accompagnement<\/span>\r\n      <\/div>\r\n      \r\n      <h2 class=\"services-title\">\r\n        <span class=\"title-line\">Un service complet,<\/span>\r\n        <span class=\"title-line gradient-text\">de la s\u00e9lection \u00e0 l'apr\u00e8s-vente<\/span>\r\n      <\/h2>\r\n      \r\n      <p class=\"services-description\">\r\n        INOSYSTECH accompagne ses clients \u00e0 chaque \u00e9tape,\r\n        avec une approche rigoureuse, professionnelle et durable,\r\n        conforme aux exigences du secteur m\u00e9dical.\r\n      <\/p>\r\n    <\/div>\r\n\r\n    <!-- Services Flow -->\r\n    <div class=\"services-flow\">\r\n      \r\n      <!-- Progress Line -->\r\n      <div class=\"flow-line\">\r\n        <div class=\"flow-progress\" id=\"flowProgress\"><\/div>\r\n      <\/div>\r\n\r\n      <!-- Step 1 -->\r\n      <article class=\"service-step\" data-aos=\"fade-up\" data-aos-delay=\"100\">\r\n        <div class=\"step-glow\"><\/div>\r\n        \r\n        <div class=\"step-header\">\r\n          <div class=\"step-icon-wrapper\">\r\n            <svg class=\"step-icon\" width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n              <path d=\"M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z\"\/>\r\n              <polyline points=\"3.27 6.96 12 12.01 20.73 6.96\"\/>\r\n              <line x1=\"12\" y1=\"22.08\" x2=\"12\" y2=\"12\"\/>\r\n            <\/svg>\r\n          <\/div>\r\n          <div class=\"step-number\">01<\/div>\r\n        <\/div>\r\n\r\n        <h3 class=\"step-title\">Conseil & orientation<\/h3>\r\n        \r\n        <p class=\"step-description\">\r\n          Analyse des besoins, assistance dans le choix des \u00e9quipements\r\n          et solutions adapt\u00e9es \u00e0 votre environnement.\r\n        <\/p>\r\n\r\n        <div class=\"step-features\">\r\n          <div class=\"feature-item\">\r\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\">\r\n              <polyline points=\"20 6 9 17 4 12\"\/>\r\n            <\/svg>\r\n            <span>Analyse approfondie<\/span>\r\n          <\/div>\r\n          <div class=\"feature-item\">\r\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\">\r\n              <polyline points=\"20 6 9 17 4 12\"\/>\r\n            <\/svg>\r\n            <span>Recommandations personnalis\u00e9es<\/span>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"step-connector\"><\/div>\r\n      <\/article>\r\n\r\n      <!-- Step 2 -->\r\n      <article class=\"service-step\" data-aos=\"fade-up\" data-aos-delay=\"200\">\r\n        <div class=\"step-glow\"><\/div>\r\n        \r\n        <div class=\"step-header\">\r\n          <div class=\"step-icon-wrapper\">\r\n            <svg class=\"step-icon\" width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n              <rect x=\"1\" y=\"3\" width=\"15\" height=\"13\"\/>\r\n              <polygon points=\"16 8 20 8 23 11 23 16 16 16 16 8\"\/>\r\n              <circle cx=\"5.5\" cy=\"18.5\" r=\"2.5\"\/>\r\n              <circle cx=\"18.5\" cy=\"18.5\" r=\"2.5\"\/>\r\n            <\/svg>\r\n          <\/div>\r\n          <div class=\"step-number\">02<\/div>\r\n        <\/div>\r\n\r\n        <h3 class=\"step-title\">Fourniture & livraison<\/h3>\r\n        \r\n        <p class=\"step-description\">\r\n          Approvisionnement d'\u00e9quipements certifi\u00e9s,\r\n          avec une logistique ma\u00eetris\u00e9e et des d\u00e9lais fiables.\r\n        <\/p>\r\n\r\n        <div class=\"step-features\">\r\n          <div class=\"feature-item\">\r\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\">\r\n              <polyline points=\"20 6 9 17 4 12\"\/>\r\n            <\/svg>\r\n            <span>\u00c9quipements certifi\u00e9s<\/span>\r\n          <\/div>\r\n          <div class=\"feature-item\">\r\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\">\r\n              <polyline points=\"20 6 9 17 4 12\"\/>\r\n            <\/svg>\r\n            <span>D\u00e9lais garantis<\/span>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"step-connector\"><\/div>\r\n      <\/article>\r\n\r\n      <!-- Step 3 -->\r\n      <article class=\"service-step\" data-aos=\"fade-up\" data-aos-delay=\"300\">\r\n        <div class=\"step-glow\"><\/div>\r\n        \r\n        <div class=\"step-header\">\r\n          <div class=\"step-icon-wrapper\">\r\n            <svg class=\"step-icon\" width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n              <path d=\"M14.7 6.3a1 1 0 000 1.4l1.6 1.6a1 1 0 001.4 0l3.77-3.77a6 6 0 01-7.94 7.94l-6.91 6.91a2.12 2.12 0 01-3-3l6.91-6.91a6 6 0 017.94-7.94l-3.76 3.76z\"\/>\r\n            <\/svg>\r\n          <\/div>\r\n          <div class=\"step-number\">03<\/div>\r\n        <\/div>\r\n\r\n        <h3 class=\"step-title\">Installation & mise en service<\/h3>\r\n        \r\n        <p class=\"step-description\">\r\n          Installation professionnelle, param\u00e9trage,\r\n          tests de conformit\u00e9 et mise en fonctionnement.\r\n        <\/p>\r\n\r\n        <div class=\"step-features\">\r\n          <div class=\"feature-item\">\r\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\">\r\n              <polyline points=\"20 6 9 17 4 12\"\/>\r\n            <\/svg>\r\n            <span>Installation experte<\/span>\r\n          <\/div>\r\n          <div class=\"feature-item\">\r\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\">\r\n              <polyline points=\"20 6 9 17 4 12\"\/>\r\n            <\/svg>\r\n            <span>Tests de conformit\u00e9<\/span>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"step-connector\"><\/div>\r\n      <\/article>\r\n\r\n      <!-- Step 4 -->\r\n      <article class=\"service-step\" data-aos=\"fade-up\" data-aos-delay=\"400\">\r\n        <div class=\"step-glow\"><\/div>\r\n        \r\n        <div class=\"step-header\">\r\n          <div class=\"step-icon-wrapper\">\r\n            <svg class=\"step-icon\" width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n              <path d=\"M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2\"\/>\r\n              <circle cx=\"9\" cy=\"7\" r=\"4\"\/>\r\n              <path d=\"M23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75\"\/>\r\n            <\/svg>\r\n          <\/div>\r\n          <div class=\"step-number\">04<\/div>\r\n        <\/div>\r\n\r\n        <h3 class=\"step-title\">Formation & transfert de comp\u00e9tences<\/h3>\r\n        \r\n        <p class=\"step-description\">\r\n          Formation des utilisateurs et accompagnement\r\n          pour une prise en main efficace des \u00e9quipements.\r\n        <\/p>\r\n\r\n        <div class=\"step-features\">\r\n          <div class=\"feature-item\">\r\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\">\r\n              <polyline points=\"20 6 9 17 4 12\"\/>\r\n            <\/svg>\r\n            <span>Formation compl\u00e8te<\/span>\r\n          <\/div>\r\n          <div class=\"feature-item\">\r\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\">\r\n              <polyline points=\"20 6 9 17 4 12\"\/>\r\n            <\/svg>\r\n            <span>Support continu<\/span>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"step-connector\"><\/div>\r\n      <\/article>\r\n\r\n      <!-- Step 5 -->\r\n      <article class=\"service-step\" data-aos=\"fade-up\" data-aos-delay=\"500\">\r\n        <div class=\"step-glow\"><\/div>\r\n        \r\n        <div class=\"step-header\">\r\n          <div class=\"step-icon-wrapper\">\r\n            <svg class=\"step-icon\" width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n              <circle cx=\"12\" cy=\"12\" r=\"10\"\/>\r\n              <path d=\"M12 6v6l4 2\"\/>\r\n            <\/svg>\r\n          <\/div>\r\n          <div class=\"step-number\">05<\/div>\r\n        <\/div>\r\n\r\n        <h3 class=\"step-title\">Maintenance & service apr\u00e8s-vente<\/h3>\r\n        \r\n        <p class=\"step-description\">\r\n          Maintenance pr\u00e9ventive, corrective et assistance technique\r\n          pour garantir la continuit\u00e9 de vos activit\u00e9s.\r\n        <\/p>\r\n\r\n        <div class=\"step-features\">\r\n          <div class=\"feature-item\">\r\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\">\r\n              <polyline points=\"20 6 9 17 4 12\"\/>\r\n            <\/svg>\r\n            <span>Maintenance pr\u00e9ventive<\/span>\r\n          <\/div>\r\n          <div class=\"feature-item\">\r\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\">\r\n              <polyline points=\"20 6 9 17 4 12\"\/>\r\n            <\/svg>\r\n            <span>SAV r\u00e9actif<\/span>\r\n          <\/div>\r\n        <\/div>\r\n      <\/article>\r\n\r\n    <\/div>\r\n\r\n    <!-- Stats Section -->\r\n    <div class=\"services-stats\" data-aos=\"fade-up\" data-aos-delay=\"600\">\r\n      <div class=\"stat-item\">\r\n        <div class=\"stat-icon\">\r\n          <svg width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n            <path d=\"M22 11.08V12a10 10 0 11-5.93-9.14\"\/>\r\n            <polyline points=\"22 4 12 14.01 9 11.01\"\/>\r\n          <\/svg>\r\n        <\/div>\r\n        <div class=\"stat-content\">\r\n          <div class=\"stat-value\">100%<\/div>\r\n          <div class=\"stat-label\">\u00c9quipements certifi\u00e9s<\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"stat-item\">\r\n        <div class=\"stat-icon\">\r\n          <svg width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n            <circle cx=\"12\" cy=\"12\" r=\"10\"\/>\r\n            <polyline points=\"12 6 12 12 16 14\"\/>\r\n          <\/svg>\r\n        <\/div>\r\n        <div class=\"stat-content\">\r\n          <div class=\"stat-value\">24\/7<\/div>\r\n          <div class=\"stat-label\">Support technique<\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"stat-item\">\r\n        <div class=\"stat-icon\">\r\n          <svg width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n            <path d=\"M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2\"\/>\r\n            <circle cx=\"9\" cy=\"7\" r=\"4\"\/>\r\n            <path d=\"M23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75\"\/>\r\n          <\/svg>\r\n        <\/div>\r\n        <div class=\"stat-content\">\r\n          <div class=\"stat-value\">500+<\/div>\r\n          <div class=\"stat-label\">Clients satisfaits<\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"stat-item\">\r\n        <div class=\"stat-icon\">\r\n          <svg width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n            <polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/>\r\n          <\/svg>\r\n        <\/div>\r\n        <div class=\"stat-content\">\r\n          <div class=\"stat-value\">15+<\/div>\r\n          <div class=\"stat-label\">Ann\u00e9es d'expertise<\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n<\/section>\r\n\r\n<style>\r\n\/* ===== RESET ===== *\/\r\n.inosys-services-ultra * {\r\n  margin: 0;\r\n  padding: 0;\r\n  box-sizing: border-box;\r\n}\r\n\r\n\/* ===== SECTION BASE ===== *\/\r\n.inosys-services-ultra {\r\n  position: relative;\r\n  padding: clamp(80px, 10vw, 140px) 0;\r\n  background: #ffffff;\r\n  overflow: hidden;\r\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', system-ui, sans-serif;\r\n}\r\n\r\n\/* ===== AMBIENT BACKGROUND ===== *\/\r\n.services-ambient {\r\n  position: absolute;\r\n  inset: 0;\r\n  z-index: 0;\r\n  pointer-events: none;\r\n  overflow: hidden;\r\n}\r\n\r\n.ambient-gradient {\r\n  position: absolute;\r\n  inset: 0;\r\n  background: linear-gradient(\r\n    135deg,\r\n    rgba(59, 130, 246, 0.03) 0%,\r\n    rgba(139, 92, 246, 0.03) 50%,\r\n    rgba(236, 72, 153, 0.03) 100%\r\n  );\r\n}\r\n\r\n.floating-particle {\r\n  position: absolute;\r\n  border-radius: 50%;\r\n  filter: blur(80px);\r\n  animation: floatParticle 30s ease-in-out infinite;\r\n  opacity: 0.2;\r\n}\r\n\r\n.particle-1 {\r\n  width: 400px;\r\n  height: 400px;\r\n  background: radial-gradient(circle, #3b82f6 0%, transparent 70%);\r\n  top: 10%;\r\n  left: -10%;\r\n  animation-delay: 0s;\r\n}\r\n\r\n.particle-2 {\r\n  width: 350px;\r\n  height: 350px;\r\n  background: radial-gradient(circle, #8b5cf6 0%, transparent 70%);\r\n  top: 60%;\r\n  right: -5%;\r\n  animation-delay: -10s;\r\n}\r\n\r\n.particle-3 {\r\n  width: 300px;\r\n  height: 300px;\r\n  background: radial-gradient(circle, #ec4899 0%, transparent 70%);\r\n  bottom: 20%;\r\n  left: 40%;\r\n  animation-delay: -20s;\r\n}\r\n\r\n.particle-4 {\r\n  width: 250px;\r\n  height: 250px;\r\n  background: radial-gradient(circle, #06b6d4 0%, transparent 70%);\r\n  top: 30%;\r\n  right: 30%;\r\n  animation-delay: -15s;\r\n}\r\n\r\n@keyframes floatParticle {\r\n  0%, 100% { transform: translate(0, 0) scale(1); }\r\n  25% { transform: translate(30px, -30px) scale(1.1); }\r\n  50% { transform: translate(-20px, 20px) scale(0.95); }\r\n  75% { transform: translate(25px, 15px) scale(1.05); }\r\n}\r\n\r\n\/* ===== CONTAINER ===== *\/\r\n.services-container {\r\n  position: relative;\r\n  z-index: 1;\r\n  max-width: 1400px;\r\n  margin: 0 auto;\r\n  padding: 0 clamp(20px, 5vw, 40px);\r\n}\r\n\r\n\/* ===== HEADER ===== *\/\r\n.services-header {\r\n  max-width: 820px;\r\n  margin: 0 auto 100px;\r\n  text-align: center;\r\n}\r\n\r\n.header-badge {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 10px;\r\n  padding: 12px 24px;\r\n  background: rgba(59, 130, 246, 0.08);\r\n  backdrop-filter: blur(10px);\r\n  border: 1px solid rgba(59, 130, 246, 0.15);\r\n  border-radius: 100px;\r\n  margin-bottom: 24px;\r\n  color: #3b82f6;\r\n  font-size: 0.85rem;\r\n  font-weight: 600;\r\n  letter-spacing: 0.05em;\r\n  text-transform: uppercase;\r\n}\r\n\r\n.badge-icon {\r\n  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\r\n}\r\n\r\n@keyframes pulse {\r\n  0%, 100% { opacity: 1; }\r\n  50% { opacity: 0.5; }\r\n}\r\n\r\n.services-title {\r\n  font-size: clamp(2rem, 4vw, 3.2rem);\r\n  font-weight: 800;\r\n  line-height: 1.15;\r\n  margin-bottom: 24px;\r\n  letter-spacing: -0.02em;\r\n}\r\n\r\n.title-line {\r\n  display: block;\r\n  color: #0f172a;\r\n}\r\n\r\n.gradient-text {\r\n  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);\r\n  -webkit-background-clip: text;\r\n  -webkit-text-fill-color: transparent;\r\n  background-clip: text;\r\n}\r\n\r\n.services-description {\r\n  font-size: clamp(1rem, 2vw, 1.15rem);\r\n  line-height: 1.7;\r\n  color: #64748b;\r\n  max-width: 700px;\r\n  margin: 0 auto;\r\n}\r\n\r\n\/* ===== SERVICES FLOW ===== *\/\r\n.services-flow {\r\n  position: relative;\r\n  display: grid;\r\n  grid-template-columns: repeat(5, 1fr);\r\n  gap: 32px;\r\n  margin-bottom: 80px;\r\n}\r\n\r\n\/* Flow Line *\/\r\n.flow-line {\r\n  position: absolute;\r\n  top: 80px;\r\n  left: 10%;\r\n  right: 10%;\r\n  height: 3px;\r\n  background: linear-gradient(\r\n    90deg,\r\n    rgba(59, 130, 246, 0.15) 0%,\r\n    rgba(139, 92, 246, 0.15) 50%,\r\n    rgba(236, 72, 153, 0.15) 100%\r\n  );\r\n  border-radius: 100px;\r\n  z-index: 0;\r\n}\r\n\r\n.flow-progress {\r\n  height: 100%;\r\n  background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 50%, #ec4899 100%);\r\n  border-radius: 100px;\r\n  width: 0%;\r\n  transition: width 1s ease-out;\r\n}\r\n\r\n\/* ===== SERVICE STEP ===== *\/\r\n.service-step {\r\n  position: relative;\r\n  background: rgba(255, 255, 255, 0.8);\r\n  backdrop-filter: blur(20px);\r\n  border: 1px solid rgba(148, 163, 184, 0.15);\r\n  border-radius: 24px;\r\n  padding: 36px 28px;\r\n  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);\r\n  z-index: 1;\r\n  overflow: hidden;\r\n}\r\n\r\n.service-step::before {\r\n  content: '';\r\n  position: absolute;\r\n  inset: 0;\r\n  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, transparent 100%);\r\n  opacity: 0;\r\n  transition: opacity 0.5s ease;\r\n  z-index: -1;\r\n}\r\n\r\n.service-step:hover {\r\n  transform: translateY(-12px);\r\n  border-color: rgba(59, 130, 246, 0.3);\r\n  box-shadow: \r\n    0 20px 60px rgba(59, 130, 246, 0.15),\r\n    0 0 0 1px rgba(59, 130, 246, 0.1);\r\n}\r\n\r\n.service-step:hover::before {\r\n  opacity: 1;\r\n}\r\n\r\n\/* Step Glow *\/\r\n.step-glow {\r\n  position: absolute;\r\n  top: -50%;\r\n  left: -50%;\r\n  width: 200%;\r\n  height: 200%;\r\n  background: radial-gradient(\r\n    circle,\r\n    rgba(59, 130, 246, 0.2) 0%,\r\n    transparent 50%\r\n  );\r\n  opacity: 0;\r\n  transition: opacity 0.5s ease;\r\n  pointer-events: none;\r\n  z-index: -1;\r\n}\r\n\r\n.service-step:hover .step-glow {\r\n  opacity: 0.6;\r\n}\r\n\r\n\/* Step Header *\/\r\n.step-header {\r\n  display: flex;\r\n  align-items: flex-start;\r\n  justify-content: space-between;\r\n  margin-bottom: 24px;\r\n}\r\n\r\n.step-icon-wrapper {\r\n  width: 60px;\r\n  height: 60px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);\r\n  border-radius: 16px;\r\n  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\r\n  box-shadow: 0 10px 30px rgba(59, 130, 246, 0.25);\r\n}\r\n\r\n.service-step:hover .step-icon-wrapper {\r\n  transform: scale(1.1) rotate(-5deg);\r\n  box-shadow: 0 15px 40px rgba(59, 130, 246, 0.4);\r\n}\r\n\r\n.step-icon {\r\n  color: #ffffff;\r\n  transition: transform 0.4s ease;\r\n}\r\n\r\n.service-step:hover .step-icon {\r\n  transform: scale(1.1);\r\n}\r\n\r\n.step-number {\r\n  font-size: 1.5rem;\r\n  font-weight: 800;\r\n  background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);\r\n  -webkit-background-clip: text;\r\n  -webkit-text-fill-color: transparent;\r\n  background-clip: text;\r\n  opacity: 0.6;\r\n  line-height: 1;\r\n}\r\n\r\n\/* Step Content *\/\r\n.step-title {\r\n  font-size: 1.2rem;\r\n  font-weight: 700;\r\n  color: #0f172a;\r\n  margin-bottom: 12px;\r\n  line-height: 1.3;\r\n  transition: color 0.3s ease;\r\n}\r\n\r\n.service-step:hover .step-title {\r\n  color: #3b82f6;\r\n}\r\n\r\n.step-description {\r\n  font-size: 0.9rem;\r\n  line-height: 1.6;\r\n  color: #64748b;\r\n  margin-bottom: 20px;\r\n}\r\n\r\n\/* Step Features *\/\r\n.step-features {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 10px;\r\n}\r\n\r\n.feature-item {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 8px;\r\n  font-size: 0.8rem;\r\n  color: #3b82f6;\r\n  font-weight: 500;\r\n}\r\n\r\n.feature-item svg {\r\n  flex-shrink: 0;\r\n  opacity: 0.8;\r\n}\r\n\r\n\/* Step Connector *\/\r\n.step-connector {\r\n  position: absolute;\r\n  top: 80px;\r\n  right: -16px;\r\n  width: 32px;\r\n  height: 3px;\r\n  background: linear-gradient(90deg, transparent 0%, rgba(59, 130, 246, 0.3) 100%);\r\n  z-index: -1;\r\n}\r\n\r\n.service-step:last-child .step-connector {\r\n  display: none;\r\n}\r\n\r\n\/* ===== STATS SECTION ===== *\/\r\n.services-stats {\r\n  display: grid;\r\n  grid-template-columns: repeat(4, 1fr);\r\n  gap: 32px;\r\n  padding: 48px;\r\n  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(139, 92, 246, 0.05) 100%);\r\n  border-radius: 24px;\r\n  border: 1px solid rgba(59, 130, 246, 0.1);\r\n}\r\n\r\n.stat-item {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 20px;\r\n}\r\n\r\n.stat-icon {\r\n  width: 64px;\r\n  height: 64px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);\r\n  border-radius: 16px;\r\n  flex-shrink: 0;\r\n  box-shadow: 0 10px 30px rgba(59, 130, 246, 0.25);\r\n  transition: all 0.4s ease;\r\n}\r\n\r\n.stat-item:hover .stat-icon {\r\n  transform: scale(1.1) rotate(5deg);\r\n  box-shadow: 0 15px 40px rgba(59, 130, 246, 0.35);\r\n}\r\n\r\n.stat-icon svg {\r\n  color: #ffffff;\r\n}\r\n\r\n.stat-content {\r\n  flex: 1;\r\n}\r\n\r\n.stat-value {\r\n  font-size: 2rem;\r\n  font-weight: 800;\r\n  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);\r\n  -webkit-background-clip: text;\r\n  -webkit-text-fill-color: transparent;\r\n  background-clip: text;\r\n  line-height: 1;\r\n  margin-bottom: 4px;\r\n}\r\n\r\n.stat-label {\r\n  font-size: 0.9rem;\r\n  color: #64748b;\r\n  font-weight: 500;\r\n}\r\n\r\n\/* ===== AOS ANIMATIONS ===== *\/\r\n[data-aos=\"fade-up\"] {\r\n  opacity: 0;\r\n  transform: translateY(30px);\r\n  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);\r\n}\r\n\r\n[data-aos=\"fade-up\"].aos-animate {\r\n  opacity: 1;\r\n  transform: translateY(0);\r\n}\r\n\r\n\/* ===== RESPONSIVE ===== *\/\r\n@media (max-width: 1200px) {\r\n  .services-flow {\r\n    grid-template-columns: repeat(3, 1fr);\r\n  }\r\n\r\n  .flow-line {\r\n    display: none;\r\n  }\r\n\r\n  .step-connector {\r\n    display: none;\r\n  }\r\n}\r\n\r\n@media (max-width: 900px) {\r\n  .services-flow {\r\n    grid-template-columns: repeat(2, 1fr);\r\n    gap: 24px;\r\n    margin-bottom: 60px;\r\n  }\r\n\r\n  .services-stats {\r\n    grid-template-columns: repeat(2, 1fr);\r\n    gap: 24px;\r\n    padding: 32px 24px;\r\n  }\r\n}\r\n\r\n@media (max-width: 768px) {\r\n  .inosys-services-ultra {\r\n    padding: clamp(60px, 8vw, 100px) 0;\r\n  }\r\n\r\n  .services-header {\r\n    margin-bottom: 60px;\r\n  }\r\n\r\n  .services-title {\r\n    font-size: clamp(1.8rem, 5vw, 2.5rem);\r\n  }\r\n\r\n  .services-flow {\r\n    grid-template-columns: 1fr;\r\n    gap: 20px;\r\n  }\r\n\r\n  .service-step {\r\n    padding: 28px 24px;\r\n  }\r\n\r\n  .step-icon-wrapper {\r\n    width: 52px;\r\n    height: 52px;\r\n  }\r\n\r\n  .step-number {\r\n    font-size: 1.3rem;\r\n  }\r\n\r\n  .step-title {\r\n    font-size: 1.1rem;\r\n  }\r\n\r\n  .services-stats {\r\n    grid-template-columns: 1fr;\r\n    gap: 20px;\r\n  }\r\n\r\n  .stat-icon {\r\n    width: 56px;\r\n    height: 56px;\r\n  }\r\n\r\n  .stat-value {\r\n    font-size: 1.6rem;\r\n  }\r\n\r\n  .floating-particle {\r\n    filter: blur(60px);\r\n  }\r\n\r\n  .particle-1, .particle-2 {\r\n    width: 300px;\r\n    height: 300px;\r\n  }\r\n\r\n  .particle-3, .particle-4 {\r\n    width: 250px;\r\n    height: 250px;\r\n  }\r\n}\r\n\r\n@media (max-width: 480px) {\r\n  .header-badge {\r\n    font-size: 0.75rem;\r\n    padding: 10px 20px;\r\n  }\r\n\r\n  .step-features {\r\n    gap: 8px;\r\n  }\r\n\r\n  .feature-item {\r\n    font-size: 0.75rem;\r\n  }\r\n\r\n  .stat-item {\r\n    gap: 16px;\r\n  }\r\n}\r\n\r\n\/* ===== ACCESSIBILITY ===== *\/\r\n@media (prefers-reduced-motion: reduce) {\r\n  *,\r\n  *::before,\r\n  *::after {\r\n    animation-duration: 0.01ms !important;\r\n    animation-iteration-count: 1 !important;\r\n    transition-duration: 0.01ms !important;\r\n  }\r\n\r\n  .floating-particle,\r\n  .badge-icon {\r\n    animation: none;\r\n  }\r\n}\r\n\r\n\/* Focus states *\/\r\n.service-step:focus-within {\r\n  outline: 2px solid #3b82f6;\r\n  outline-offset: 4px;\r\n}\r\n<\/style>\r\n\r\n<script>\r\n(function() {\r\n  'use strict';\r\n\r\n  \/\/ ===== SCROLL ANIMATIONS =====\r\n  const animateOnScroll = () => {\r\n    const elements = document.querySelectorAll('[data-aos]');\r\n    \r\n    const observer = new IntersectionObserver((entries) => {\r\n      entries.forEach(entry => {\r\n        if (entry.isIntersecting) {\r\n          entry.target.classList.add('aos-animate');\r\n          observer.unobserve(entry.target);\r\n        }\r\n      });\r\n    }, {\r\n      threshold: 0.15,\r\n      rootMargin: '0px 0px -50px 0px'\r\n    });\r\n\r\n    elements.forEach(el => observer.observe(el));\r\n  };\r\n\r\n  \/\/ ===== PROGRESS LINE ANIMATION =====\r\n  const animateProgressLine = () => {\r\n    const progressBar = document.getElementById('flowProgress');\r\n    if (!progressBar) return;\r\n\r\n    const servicesSection = document.querySelector('.inosys-services-ultra');\r\n    \r\n    const observer = new IntersectionObserver((entries) => {\r\n      entries.forEach(entry => {\r\n        if (entry.isIntersecting) {\r\n          setTimeout(() => {\r\n            progressBar.style.width = '100%';\r\n          }, 500);\r\n          observer.unobserve(entry.target);\r\n        }\r\n      });\r\n    }, {\r\n      threshold: 0.3\r\n    });\r\n\r\n    if (servicesSection) {\r\n      observer.observe(servicesSection);\r\n    }\r\n  };\r\n\r\n  \/\/ ===== STEP GLOW FOLLOW MOUSE =====\r\n  const initStepGlow = () => {\r\n    const steps = document.querySelectorAll('.service-step');\r\n\r\n    steps.forEach(step => {\r\n      const glow = step.querySelector('.step-glow');\r\n\r\n      step.addEventListener('mousemove', (e) => {\r\n        const rect = step.getBoundingClientRect();\r\n        const x = e.clientX - rect.left;\r\n        const y = e.clientY - rect.top;\r\n\r\n        glow.style.background = `radial-gradient(\r\n          circle at ${x}px ${y}px,\r\n          rgba(59, 130, 246, 0.3) 0%,\r\n          transparent 50%\r\n        )`;\r\n      });\r\n    });\r\n  };\r\n\r\n  \/\/ ===== 3D TILT EFFECT (Desktop Only) =====\r\n  const initStepTilt = () => {\r\n    if (window.innerWidth <= 768) return;\r\n\r\n    const steps = document.querySelectorAll('.service-step');\r\n\r\n    steps.forEach(step => {\r\n      step.addEventListener('mousemove', (e) => {\r\n        const rect = step.getBoundingClientRect();\r\n        const x = e.clientX - rect.left;\r\n        const y = e.clientY - rect.top;\r\n\r\n        const centerX = rect.width \/ 2;\r\n        const centerY = rect.height \/ 2;\r\n\r\n        const rotateX = ((y - centerY) \/ centerY) * -3;\r\n        const rotateY = ((x - centerX) \/ centerX) * 3;\r\n\r\n        step.style.transform = `\r\n          translateY(-12px) \r\n          perspective(1000px) \r\n          rotateX(${rotateX}deg) \r\n          rotateY(${rotateY}deg)\r\n        `;\r\n      });\r\n\r\n      step.addEventListener('mouseleave', () => {\r\n        step.style.transform = '';\r\n      });\r\n    });\r\n  };\r\n\r\n  \/\/ ===== COUNTER ANIMATION =====\r\n  const animateCounters = () => {\r\n    const stats = document.querySelectorAll('.stat-value');\r\n    \r\n    const observer = new IntersectionObserver((entries) => {\r\n      entries.forEach(entry => {\r\n        if (entry.isIntersecting) {\r\n          const target = entry.target;\r\n          const text = target.textContent;\r\n          const hasPercent = text.includes('%');\r\n          const hasPlus = text.includes('+');\r\n          const number = parseInt(text.replace(\/[^0-9]\/g, ''));\r\n          \r\n          if (!isNaN(number)) {\r\n            let current = 0;\r\n            const increment = number \/ 50;\r\n            const timer = setInterval(() => {\r\n              current += increment;\r\n              if (current >= number) {\r\n                current = number;\r\n                clearInterval(timer);\r\n              }\r\n              target.textContent = Math.floor(current) + (hasPercent ? '%' : hasPlus ? '+' : '');\r\n            }, 30);\r\n          }\r\n          \r\n          observer.unobserve(target);\r\n        }\r\n      });\r\n    }, {\r\n      threshold: 0.5\r\n    });\r\n\r\n    stats.forEach(stat => observer.observe(stat));\r\n  };\r\n\r\n  \/\/ ===== INITIALIZE =====\r\n  const init = () => {\r\n    animateOnScroll();\r\n    animateProgressLine();\r\n    initStepGlow();\r\n    initStepTilt();\r\n    animateCounters();\r\n  };\r\n\r\n  if (document.readyState === 'loading') {\r\n    document.addEventListener('DOMContentLoaded', init);\r\n  } else {\r\n    init();\r\n  }\r\n\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-017150a elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"017150a\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-a4d8971\" data-id=\"a4d8971\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-ee6e318 elementor-widget elementor-widget-html\" data-id=\"ee6e318\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- INOSYSTECH ULTRA VALUES SECTION -->\r\n<section class=\"inosys-values-ultra\">\r\n  \r\n  <!-- Animated Background -->\r\n  <div class=\"values-ambient\">\r\n    <div class=\"ambient-mesh\"><\/div>\r\n    <div class=\"value-orb orb-1\"><\/div>\r\n    <div class=\"value-orb orb-2\"><\/div>\r\n    <div class=\"value-orb orb-3\"><\/div>\r\n    <div class=\"geometric-pattern\"><\/div>\r\n  <\/div>\r\n\r\n  <div class=\"values-container\">\r\n\r\n    <!-- Section Header -->\r\n    <div class=\"values-header\" data-aos=\"fade-up\">\r\n      <div class=\"header-badge\">\r\n        <svg class=\"badge-icon\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n          <polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/>\r\n        <\/svg>\r\n        <span>Nos engagements<\/span>\r\n      <\/div>\r\n      \r\n      <h2 class=\"values-title\">\r\n        <span class=\"title-line\">Des valeurs fortes<\/span>\r\n        <span class=\"title-line gradient-text\">au c\u0153ur de notre mission<\/span>\r\n      <\/h2>\r\n      \r\n      <p class=\"values-description\">\r\n        INOSYSTECH s'appuie sur un socle de valeurs claires et exigeantes\r\n        pour garantir la qualit\u00e9, la fiabilit\u00e9 et la durabilit\u00e9\r\n        de chaque solution propos\u00e9e.\r\n      <\/p>\r\n    <\/div>\r\n\r\n    <!-- ERA Badge -->\r\n    <div class=\"era-badge\" data-aos=\"zoom-in\" data-aos-delay=\"200\">\r\n      <div class=\"era-shine\"><\/div>\r\n      <div class=\"era-text\">E.R.A<\/div>\r\n      <div class=\"era-subtitle\">Excellence \u2022 Respect \u2022 Audace<\/div>\r\n    <\/div>\r\n\r\n    <!-- Values Grid -->\r\n    <div class=\"values-grid\">\r\n\r\n      <!-- Value 1: Excellence -->\r\n      <article class=\"value-card\" data-aos=\"fade-up\" data-aos-delay=\"300\">\r\n        <div class=\"card-glow\"><\/div>\r\n        <div class=\"card-shine\"><\/div>\r\n        \r\n        <div class=\"value-icon-wrapper\">\r\n          <div class=\"icon-bg\"><\/div>\r\n          <svg class=\"value-icon\" width=\"40\" height=\"40\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n            <polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/>\r\n          <\/svg>\r\n        <\/div>\r\n\r\n        <div class=\"value-letter-wrapper\">\r\n          <span class=\"value-letter\">E<\/span>\r\n          <div class=\"letter-glow\"><\/div>\r\n        <\/div>\r\n\r\n        <h3 class=\"value-title\">Excellence<\/h3>\r\n        \r\n        <p class=\"value-description\">\r\n          D\u00e9livrer des solutions innovantes et fiables,\r\n          avec une exigence permanente de qualit\u00e9,\r\n          de conformit\u00e9 et de performance.\r\n        <\/p>\r\n\r\n        <div class=\"value-highlights\">\r\n          <div class=\"highlight-item\">\r\n            <div class=\"highlight-dot\"><\/div>\r\n            <span>Innovation constante<\/span>\r\n          <\/div>\r\n          <div class=\"highlight-item\">\r\n            <div class=\"highlight-dot\"><\/div>\r\n            <span>Qualit\u00e9 garantie<\/span>\r\n          <\/div>\r\n          <div class=\"highlight-item\">\r\n            <div class=\"highlight-dot\"><\/div>\r\n            <span>Performance optimale<\/span>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"card-number\">01<\/div>\r\n      <\/article>\r\n\r\n      <!-- Value 2: Respect -->\r\n      <article class=\"value-card featured\" data-aos=\"fade-up\" data-aos-delay=\"400\">\r\n        <div class=\"card-glow\"><\/div>\r\n        <div class=\"card-shine\"><\/div>\r\n        <div class=\"featured-badge\">\r\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n            <path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"\/>\r\n          <\/svg>\r\n        <\/div>\r\n        \r\n        <div class=\"value-icon-wrapper\">\r\n          <div class=\"icon-bg\"><\/div>\r\n          <svg class=\"value-icon\" width=\"40\" height=\"40\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n            <path d=\"M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z\"\/>\r\n          <\/svg>\r\n        <\/div>\r\n\r\n        <div class=\"value-letter-wrapper\">\r\n          <span class=\"value-letter\">R<\/span>\r\n          <div class=\"letter-glow\"><\/div>\r\n        <\/div>\r\n\r\n        <h3 class=\"value-title\">Respect<\/h3>\r\n        \r\n        <p class=\"value-description\">\r\n          Respect de nos clients, de nos partenaires,\r\n          de nos \u00e9quipes et des normes m\u00e9dicales,\r\n          pour une relation de confiance durable.\r\n        <\/p>\r\n\r\n        <div class=\"value-highlights\">\r\n          <div class=\"highlight-item\">\r\n            <div class=\"highlight-dot\"><\/div>\r\n            <span>Confiance mutuelle<\/span>\r\n          <\/div>\r\n          <div class=\"highlight-item\">\r\n            <div class=\"highlight-dot\"><\/div>\r\n            <span>Normes respect\u00e9es<\/span>\r\n          <\/div>\r\n          <div class=\"highlight-item\">\r\n            <div class=\"highlight-dot\"><\/div>\r\n            <span>\u00c9thique professionnelle<\/span>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"card-number\">02<\/div>\r\n      <\/article>\r\n\r\n      <!-- Value 3: Audace -->\r\n      <article class=\"value-card\" data-aos=\"fade-up\" data-aos-delay=\"500\">\r\n        <div class=\"card-glow\"><\/div>\r\n        <div class=\"card-shine\"><\/div>\r\n        \r\n        <div class=\"value-icon-wrapper\">\r\n          <div class=\"icon-bg\"><\/div>\r\n          <svg class=\"value-icon\" width=\"40\" height=\"40\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n            <polyline points=\"22 12 18 12 15 21 9 3 6 12 2 12\"\/>\r\n          <\/svg>\r\n        <\/div>\r\n\r\n        <div class=\"value-letter-wrapper\">\r\n          <span class=\"value-letter\">A<\/span>\r\n          <div class=\"letter-glow\"><\/div>\r\n        <\/div>\r\n\r\n        <h3 class=\"value-title\">Audace<\/h3>\r\n        \r\n        <p class=\"value-description\">\r\n          Oser l'innovation, investir dans des technologies\r\n          d'avenir et accompagner l'\u00e9volution des pratiques\r\n          m\u00e9dicales et scientifiques.\r\n        <\/p>\r\n\r\n        <div class=\"value-highlights\">\r\n          <div class=\"highlight-item\">\r\n            <div class=\"highlight-dot\"><\/div>\r\n            <span>Esprit pionnier<\/span>\r\n          <\/div>\r\n          <div class=\"highlight-item\">\r\n            <div class=\"highlight-dot\"><\/div>\r\n            <span>Technologies d'avenir<\/span>\r\n          <\/div>\r\n          <div class=\"highlight-item\">\r\n            <div class=\"highlight-dot\"><\/div>\r\n            <span>Vision innovante<\/span>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"card-number\">03<\/div>\r\n      <\/article>\r\n\r\n    <\/div>\r\n\r\n    <!-- Bottom Quote -->\r\n    <div class=\"values-quote\" data-aos=\"fade-up\" data-aos-delay=\"600\">\r\n      <div class=\"quote-mark\">\"<\/div>\r\n      <blockquote>\r\n        Notre engagement envers l'excellence, le respect et l'audace guide chacune de nos actions\r\n        et fa\u00e7onne l'avenir de la sant\u00e9 technologique en Afrique de l'Ouest.\r\n      <\/blockquote>\r\n      <div class=\"quote-author\">\r\n        <div class=\"author-line\"><\/div>\r\n        <span>L'\u00e9quipe INOSYSTECH<\/span>\r\n      <\/div>\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n<\/section>\r\n\r\n<style>\r\n\/* ===== RESET ===== *\/\r\n.inosys-values-ultra * {\r\n  margin: 0;\r\n  padding: 0;\r\n  box-sizing: border-box;\r\n}\r\n\r\n\/* ===== SECTION BASE ===== *\/\r\n.inosys-values-ultra {\r\n  position: relative;\r\n  padding: clamp(80px, 10vw, 140px) 0;\r\n  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 50%, #f8fafc 100%);\r\n  overflow: hidden;\r\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', system-ui, sans-serif;\r\n}\r\n\r\n\/* ===== AMBIENT BACKGROUND ===== *\/\r\n.values-ambient {\r\n  position: absolute;\r\n  inset: 0;\r\n  z-index: 0;\r\n  pointer-events: none;\r\n  overflow: hidden;\r\n}\r\n\r\n.ambient-mesh {\r\n  position: absolute;\r\n  inset: 0;\r\n  background-image: \r\n    radial-gradient(circle at 20% 30%, rgba(59, 130, 246, 0.08) 0%, transparent 50%),\r\n    radial-gradient(circle at 80% 70%, rgba(139, 92, 246, 0.08) 0%, transparent 50%);\r\n}\r\n\r\n.value-orb {\r\n  position: absolute;\r\n  border-radius: 50%;\r\n  filter: blur(100px);\r\n  animation: floatOrb 30s ease-in-out infinite;\r\n  opacity: 0.15;\r\n}\r\n\r\n.orb-1 {\r\n  width: 500px;\r\n  height: 500px;\r\n  background: radial-gradient(circle, #3b82f6 0%, transparent 70%);\r\n  top: 10%;\r\n  left: -10%;\r\n  animation-delay: 0s;\r\n}\r\n\r\n.orb-2 {\r\n  width: 450px;\r\n  height: 450px;\r\n  background: radial-gradient(circle, #8b5cf6 0%, transparent 70%);\r\n  bottom: 10%;\r\n  right: -10%;\r\n  animation-delay: -15s;\r\n}\r\n\r\n.orb-3 {\r\n  width: 400px;\r\n  height: 400px;\r\n  background: radial-gradient(circle, #ec4899 0%, transparent 70%);\r\n  top: 50%;\r\n  left: 50%;\r\n  transform: translate(-50%, -50%);\r\n  animation-delay: -25s;\r\n}\r\n\r\n@keyframes floatOrb {\r\n  0%, 100% { transform: translate(0, 0) scale(1); }\r\n  33% { transform: translate(50px, -40px) scale(1.1); }\r\n  66% { transform: translate(-30px, 30px) scale(0.9); }\r\n}\r\n\r\n.geometric-pattern {\r\n  position: absolute;\r\n  inset: 0;\r\n  background-image: \r\n    linear-gradient(rgba(59, 130, 246, 0.02) 1px, transparent 1px),\r\n    linear-gradient(90deg, rgba(59, 130, 246, 0.02) 1px, transparent 1px);\r\n  background-size: 100px 100px;\r\n  opacity: 0.5;\r\n}\r\n\r\n\/* ===== CONTAINER ===== *\/\r\n.values-container {\r\n  position: relative;\r\n  z-index: 1;\r\n  max-width: 1200px;\r\n  margin: 0 auto;\r\n  padding: 0 clamp(20px, 5vw, 40px);\r\n}\r\n\r\n\/* ===== HEADER ===== *\/\r\n.values-header {\r\n  max-width: 820px;\r\n  margin: 0 auto 60px;\r\n  text-align: center;\r\n}\r\n\r\n.header-badge {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 10px;\r\n  padding: 12px 24px;\r\n  background: rgba(59, 130, 246, 0.08);\r\n  backdrop-filter: blur(10px);\r\n  border: 1px solid rgba(59, 130, 246, 0.15);\r\n  border-radius: 100px;\r\n  margin-bottom: 24px;\r\n  color: #3b82f6;\r\n  font-size: 0.85rem;\r\n  font-weight: 600;\r\n  letter-spacing: 0.05em;\r\n  text-transform: uppercase;\r\n}\r\n\r\n.badge-icon {\r\n  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\r\n}\r\n\r\n@keyframes pulse {\r\n  0%, 100% { opacity: 1; }\r\n  50% { opacity: 0.5; }\r\n}\r\n\r\n.values-title {\r\n  font-size: clamp(2rem, 4vw, 3.2rem);\r\n  font-weight: 800;\r\n  line-height: 1.15;\r\n  margin-bottom: 24px;\r\n  letter-spacing: -0.02em;\r\n}\r\n\r\n.title-line {\r\n  display: block;\r\n  color: #0f172a;\r\n}\r\n\r\n.gradient-text {\r\n  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);\r\n  -webkit-background-clip: text;\r\n  -webkit-text-fill-color: transparent;\r\n  background-clip: text;\r\n}\r\n\r\n.values-description {\r\n  font-size: clamp(1rem, 2vw, 1.15rem);\r\n  line-height: 1.7;\r\n  color: #64748b;\r\n  max-width: 700px;\r\n  margin: 0 auto;\r\n}\r\n\r\n\/* ===== ERA BADGE ===== *\/\r\n.era-badge {\r\n  position: relative;\r\n  max-width: 400px;\r\n  margin: 0 auto 80px;\r\n  padding: 40px;\r\n  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);\r\n  border-radius: 24px;\r\n  text-align: center;\r\n  overflow: hidden;\r\n  box-shadow: \r\n    0 20px 60px rgba(59, 130, 246, 0.3),\r\n    0 0 0 1px rgba(255, 255, 255, 0.1) inset;\r\n}\r\n\r\n.era-shine {\r\n  position: absolute;\r\n  top: -50%;\r\n  left: -50%;\r\n  width: 200%;\r\n  height: 200%;\r\n  background: linear-gradient(\r\n    45deg,\r\n    transparent 30%,\r\n    rgba(255, 255, 255, 0.1) 50%,\r\n    transparent 70%\r\n  );\r\n  animation: shine 3s ease-in-out infinite;\r\n}\r\n\r\n@keyframes shine {\r\n  0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }\r\n  100% { transform: translateX(100%) translateY(100%) rotate(45deg); }\r\n}\r\n\r\n.era-text {\r\n  position: relative;\r\n  z-index: 1;\r\n  font-size: 4rem;\r\n  font-weight: 900;\r\n  color: #ffffff;\r\n  letter-spacing: 0.3em;\r\n  margin-bottom: 8px;\r\n  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);\r\n}\r\n\r\n.era-subtitle {\r\n  position: relative;\r\n  z-index: 1;\r\n  font-size: 0.95rem;\r\n  color: rgba(255, 255, 255, 0.9);\r\n  font-weight: 500;\r\n  letter-spacing: 0.05em;\r\n}\r\n\r\n\/* ===== VALUES GRID ===== *\/\r\n.values-grid {\r\n  display: grid;\r\n  grid-template-columns: repeat(3, 1fr);\r\n  gap: 32px;\r\n  margin-bottom: 80px;\r\n}\r\n\r\n\/* ===== VALUE CARDS ===== *\/\r\n.value-card {\r\n  position: relative;\r\n  background: rgba(255, 255, 255, 0.8);\r\n  backdrop-filter: blur(20px);\r\n  border: 1px solid rgba(148, 163, 184, 0.15);\r\n  border-radius: 32px;\r\n  padding: 48px 36px;\r\n  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);\r\n  overflow: hidden;\r\n  isolation: isolate;\r\n}\r\n\r\n.value-card::before {\r\n  content: '';\r\n  position: absolute;\r\n  inset: 0;\r\n  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, transparent 100%);\r\n  opacity: 0;\r\n  transition: opacity 0.5s ease;\r\n  z-index: -1;\r\n}\r\n\r\n.value-card:hover {\r\n  transform: translateY(-16px) scale(1.02);\r\n  border-color: rgba(59, 130, 246, 0.3);\r\n  box-shadow: \r\n    0 30px 80px rgba(59, 130, 246, 0.2),\r\n    0 0 0 1px rgba(59, 130, 246, 0.1);\r\n}\r\n\r\n.value-card:hover::before {\r\n  opacity: 1;\r\n}\r\n\r\n\/* Featured Card *\/\r\n.value-card.featured {\r\n  background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(139, 92, 246, 0.08) 100%);\r\n  border-color: rgba(59, 130, 246, 0.25);\r\n}\r\n\r\n.featured-badge {\r\n  position: absolute;\r\n  top: 24px;\r\n  right: 24px;\r\n  width: 32px;\r\n  height: 32px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);\r\n  border-radius: 50%;\r\n  color: #ffffff;\r\n  animation: rotateBadge 20s linear infinite;\r\n}\r\n\r\n@keyframes rotateBadge {\r\n  from { transform: rotate(0deg); }\r\n  to { transform: rotate(360deg); }\r\n}\r\n\r\n\/* Card Glow *\/\r\n.card-glow {\r\n  position: absolute;\r\n  top: -50%;\r\n  left: -50%;\r\n  width: 200%;\r\n  height: 200%;\r\n  background: radial-gradient(\r\n    circle,\r\n    rgba(59, 130, 246, 0.2) 0%,\r\n    transparent 50%\r\n  );\r\n  opacity: 0;\r\n  transition: opacity 0.5s ease;\r\n  pointer-events: none;\r\n  z-index: -1;\r\n}\r\n\r\n.value-card:hover .card-glow {\r\n  opacity: 0.6;\r\n}\r\n\r\n\/* Card Shine *\/\r\n.card-shine {\r\n  position: absolute;\r\n  top: 0;\r\n  left: -100%;\r\n  width: 100%;\r\n  height: 100%;\r\n  background: linear-gradient(\r\n    90deg,\r\n    transparent 0%,\r\n    rgba(255, 255, 255, 0.3) 50%,\r\n    transparent 100%\r\n  );\r\n  transition: left 0.8s ease;\r\n}\r\n\r\n.value-card:hover .card-shine {\r\n  left: 100%;\r\n}\r\n\r\n\/* Icon Wrapper *\/\r\n.value-icon-wrapper {\r\n  position: relative;\r\n  width: 80px;\r\n  height: 80px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  margin: 0 auto 32px;\r\n}\r\n\r\n.icon-bg {\r\n  position: absolute;\r\n  inset: 0;\r\n  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);\r\n  border-radius: 20px;\r\n  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);\r\n  box-shadow: 0 10px 30px rgba(59, 130, 246, 0.3);\r\n}\r\n\r\n.value-card:hover .icon-bg {\r\n  transform: scale(1.15) rotate(10deg);\r\n  box-shadow: 0 20px 50px rgba(59, 130, 246, 0.4);\r\n}\r\n\r\n.value-icon {\r\n  position: relative;\r\n  z-index: 1;\r\n  color: #ffffff;\r\n  transition: transform 0.5s ease;\r\n}\r\n\r\n.value-card:hover .value-icon {\r\n  transform: scale(1.2) rotate(-10deg);\r\n}\r\n\r\n\/* Letter Wrapper *\/\r\n.value-letter-wrapper {\r\n  position: relative;\r\n  text-align: center;\r\n  margin-bottom: 24px;\r\n}\r\n\r\n.value-letter {\r\n  display: inline-block;\r\n  font-size: 5rem;\r\n  font-weight: 900;\r\n  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);\r\n  -webkit-background-clip: text;\r\n  -webkit-text-fill-color: transparent;\r\n  background-clip: text;\r\n  line-height: 1;\r\n  position: relative;\r\n  z-index: 1;\r\n}\r\n\r\n.letter-glow {\r\n  position: absolute;\r\n  top: 50%;\r\n  left: 50%;\r\n  transform: translate(-50%, -50%);\r\n  width: 120px;\r\n  height: 120px;\r\n  background: radial-gradient(circle, rgba(59, 130, 246, 0.2) 0%, transparent 70%);\r\n  border-radius: 50%;\r\n  filter: blur(20px);\r\n  opacity: 0;\r\n  transition: opacity 0.5s ease;\r\n}\r\n\r\n.value-card:hover .letter-glow {\r\n  opacity: 1;\r\n}\r\n\r\n\/* Content *\/\r\n.value-title {\r\n  font-size: 1.8rem;\r\n  font-weight: 700;\r\n  color: #0f172a;\r\n  margin-bottom: 16px;\r\n  text-align: center;\r\n  transition: color 0.3s ease;\r\n}\r\n\r\n.value-card:hover .value-title {\r\n  color: #3b82f6;\r\n}\r\n\r\n.value-description {\r\n  font-size: 1rem;\r\n  line-height: 1.7;\r\n  color: #64748b;\r\n  text-align: center;\r\n  margin-bottom: 28px;\r\n}\r\n\r\n\/* Highlights *\/\r\n.value-highlights {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 12px;\r\n}\r\n\r\n.highlight-item {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 12px;\r\n  font-size: 0.9rem;\r\n  color: #475569;\r\n  font-weight: 500;\r\n}\r\n\r\n.highlight-dot {\r\n  width: 8px;\r\n  height: 8px;\r\n  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);\r\n  border-radius: 50%;\r\n  flex-shrink: 0;\r\n  box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);\r\n}\r\n\r\n\/* Card Number *\/\r\n.card-number {\r\n  position: absolute;\r\n  bottom: 24px;\r\n  right: 32px;\r\n  font-size: 4rem;\r\n  font-weight: 900;\r\n  background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);\r\n  -webkit-background-clip: text;\r\n  -webkit-text-fill-color: transparent;\r\n  background-clip: text;\r\n  opacity: 0.3;\r\n  line-height: 1;\r\n}\r\n\r\n\/* ===== QUOTE SECTION ===== *\/\r\n.values-quote {\r\n  position: relative;\r\n  max-width: 900px;\r\n  margin: 0 auto;\r\n  padding: 60px 48px;\r\n  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(139, 92, 246, 0.05) 100%);\r\n  border-radius: 32px;\r\n  border: 1px solid rgba(59, 130, 246, 0.15);\r\n  text-align: center;\r\n}\r\n\r\n.quote-mark {\r\n  font-size: 6rem;\r\n  font-weight: 900;\r\n  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);\r\n  -webkit-background-clip: text;\r\n  -webkit-text-fill-color: transparent;\r\n  background-clip: text;\r\n  line-height: 1;\r\n  margin-bottom: 24px;\r\n  opacity: 0.3;\r\n}\r\n\r\nblockquote {\r\n  font-size: 1.3rem;\r\n  line-height: 1.8;\r\n  color: #0f172a;\r\n  font-weight: 500;\r\n  font-style: italic;\r\n  margin-bottom: 32px;\r\n}\r\n\r\n.quote-author {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: 16px;\r\n  font-size: 1rem;\r\n  color: #3b82f6;\r\n  font-weight: 600;\r\n}\r\n\r\n.author-line {\r\n  width: 60px;\r\n  height: 2px;\r\n  background: linear-gradient(90deg, transparent 0%, #3b82f6 100%);\r\n}\r\n\r\n\/* ===== AOS ANIMATIONS ===== *\/\r\n[data-aos=\"fade-up\"] {\r\n  opacity: 0;\r\n  transform: translateY(30px);\r\n  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);\r\n}\r\n\r\n[data-aos=\"fade-up\"].aos-animate {\r\n  opacity: 1;\r\n  transform: translateY(0);\r\n}\r\n\r\n[data-aos=\"zoom-in\"] {\r\n  opacity: 0;\r\n  transform: scale(0.95);\r\n  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);\r\n}\r\n\r\n[data-aos=\"zoom-in\"].aos-animate {\r\n  opacity: 1;\r\n  transform: scale(1);\r\n}\r\n\r\n\/* ===== RESPONSIVE ===== *\/\r\n@media (max-width: 1024px) {\r\n  .values-grid {\r\n    grid-template-columns: 1fr;\r\n    gap: 24px;\r\n  }\r\n\r\n  .value-card {\r\n    max-width: 600px;\r\n    margin: 0 auto;\r\n  }\r\n}\r\n\r\n@media (max-width: 768px) {\r\n  .inosys-values-ultra {\r\n    padding: clamp(60px, 8vw, 100px) 0;\r\n  }\r\n\r\n  .values-header {\r\n    margin-bottom: 40px;\r\n  }\r\n\r\n  .values-title {\r\n    font-size: clamp(1.8rem, 5vw, 2.5rem);\r\n  }\r\n\r\n  .era-badge {\r\n    margin-bottom: 60px;\r\n    padding: 32px 24px;\r\n  }\r\n\r\n  .era-text {\r\n    font-size: 3rem;\r\n  }\r\n\r\n  .values-grid {\r\n    margin-bottom: 60px;\r\n  }\r\n\r\n  .value-card {\r\n    padding: 40px 28px;\r\n  }\r\n\r\n  .value-icon-wrapper {\r\n    width: 72px;\r\n    height: 72px;\r\n  }\r\n\r\n  .value-letter {\r\n    font-size: 4rem;\r\n  }\r\n\r\n  .value-title {\r\n    font-size: 1.5rem;\r\n  }\r\n\r\n  .card-number {\r\n    font-size: 3rem;\r\n  }\r\n\r\n  .values-quote {\r\n    padding: 40px 32px;\r\n  }\r\n\r\n  .quote-mark {\r\n    font-size: 4rem;\r\n  }\r\n\r\n  blockquote {\r\n    font-size: 1.1rem;\r\n  }\r\n\r\n  .value-orb {\r\n    filter: blur(70px);\r\n  }\r\n\r\n  .orb-1, .orb-2 {\r\n    width: 350px;\r\n    height: 350px;\r\n  }\r\n\r\n  .orb-3 {\r\n    width: 300px;\r\n    height: 300px;\r\n  }\r\n}\r\n\r\n@media (max-width: 480px) {\r\n  .header-badge {\r\n    font-size: 0.75rem;\r\n    padding: 10px 20px;\r\n  }\r\n\r\n  .era-text {\r\n    font-size: 2.5rem;\r\n    letter-spacing: 0.2em;\r\n  }\r\n\r\n  .era-subtitle {\r\n    font-size: 0.85rem;\r\n  }\r\n\r\n  .value-letter {\r\n    font-size: 3.5rem;\r\n  }\r\n\r\n  .highlight-item {\r\n    font-size: 0.85rem;\r\n  }\r\n\r\n  .values-quote {\r\n    padding: 32px 24px;\r\n  }\r\n\r\n  blockquote {\r\n    font-size: 1rem;\r\n  }\r\n}\r\n\r\n\/* ===== ACCESSIBILITY ===== *\/\r\n@media (prefers-reduced-motion: reduce) {\r\n  *,\r\n  *::before,\r\n  *::after {\r\n    animation-duration: 0.01ms !important;\r\n    animation-iteration-count: 1 !important;\r\n    transition-duration: 0.01ms !important;\r\n  }\r\n\r\n  .value-orb,\r\n  .badge-icon,\r\n  .era-shine,\r\n  .featured-badge {\r\n    animation: none;\r\n  }\r\n}\r\n\r\n\/* Focus states *\/\r\n.value-card:focus-within {\r\n  outline: 2px solid #3b82f6;\r\n  outline-offset: 4px;\r\n}\r\n<\/style>\r\n\r\n<script>\r\n(function() {\r\n  'use strict';\r\n\r\n  \/\/ ===== SCROLL ANIMATIONS =====\r\n  const animateOnScroll = () => {\r\n    const elements = document.querySelectorAll('[data-aos]');\r\n    \r\n    const observer = new IntersectionObserver((entries) => {\r\n      entries.forEach(entry => {\r\n        if (entry.isIntersecting) {\r\n          entry.target.classList.add('aos-animate');\r\n          observer.unobserve(entry.target);\r\n        }\r\n      });\r\n    }, {\r\n      threshold: 0.15,\r\n      rootMargin: '0px 0px -50px 0px'\r\n    });\r\n\r\n    elements.forEach(el => observer.observe(el));\r\n  };\r\n\r\n  \/\/ ===== CARD GLOW FOLLOW MOUSE =====\r\n  const initCardGlow = () => {\r\n    const cards = document.querySelectorAll('.value-card');\r\n\r\n    cards.forEach(card => {\r\n      const glow = card.querySelector('.card-glow');\r\n\r\n      card.addEventListener('mousemove', (e) => {\r\n        const rect = card.getBoundingClientRect();\r\n        const x = e.clientX - rect.left;\r\n        const y = e.clientY - rect.top;\r\n\r\n        glow.style.background = `radial-gradient(\r\n          circle at ${x}px ${y}px,\r\n          rgba(59, 130, 246, 0.3) 0%,\r\n          transparent 50%\r\n        )`;\r\n      });\r\n    });\r\n  };\r\n\r\n  \/\/ ===== 3D CARD TILT EFFECT (Desktop Only) =====\r\n  const initCardTilt = () => {\r\n    if (window.innerWidth <= 768) return;\r\n\r\n    const cards = document.querySelectorAll('.value-card');\r\n\r\n    cards.forEach(card => {\r\n      card.addEventListener('mousemove', (e) => {\r\n        const rect = card.getBoundingClientRect();\r\n        const x = e.clientX - rect.left;\r\n        const y = e.clientY - rect.top;\r\n\r\n        const centerX = rect.width \/ 2;\r\n        const centerY = rect.height \/ 2;\r\n\r\n        const rotateX = ((y - centerY) \/ centerY) * -5;\r\n        const rotateY = ((x - centerX) \/ centerX) * 5;\r\n\r\n        card.style.transform = `\r\n          translateY(-16px) \r\n          scale(1.02)\r\n          perspective(1000px) \r\n          rotateX(${rotateX}deg) \r\n          rotateY(${rotateY}deg)\r\n        `;\r\n      });\r\n\r\n      card.addEventListener('mouseleave', () => {\r\n        card.style.transform = '';\r\n      });\r\n    });\r\n  };\r\n\r\n  \/\/ ===== PARALLAX EFFECT ON SCROLL =====\r\n  const initParallax = () => {\r\n    const valuesSection = document.querySelector('.inosys-values-ultra');\r\n    if (!valuesSection) return;\r\n\r\n    window.addEventListener('scroll', () => {\r\n      const scrolled = window.pageYOffset;\r\n      const sectionTop = valuesSection.offsetTop;\r\n      const sectionHeight = valuesSection.offsetHeight;\r\n\r\n      if (scrolled > sectionTop - window.innerHeight && scrolled < sectionTop + sectionHeight) {\r\n        const orbs = document.querySelectorAll('.value-orb');\r\n        orbs.forEach((orb, index) => {\r\n          const speed = 0.5 + (index * 0.2);\r\n          const yPos = (scrolled - sectionTop) * speed;\r\n          orb.style.transform = `translateY(${yPos}px)`;\r\n        });\r\n      }\r\n    });\r\n  };\r\n\r\n  \/\/ ===== INITIALIZE =====\r\n  const init = () => {\r\n    animateOnScroll();\r\n    initCardGlow();\r\n    initCardTilt();\r\n    initParallax();\r\n  };\r\n\r\n  if (document.readyState === 'loading') {\r\n    document.addEventListener('DOMContentLoaded', init);\r\n  } else {\r\n    init();\r\n  }\r\n\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-8f4809d elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"8f4809d\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-16fd2a4\" data-id=\"16fd2a4\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-d04137e elementor-widget elementor-widget-html\" data-id=\"d04137e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- INOSYSTECH ULTRA CTA SECTION -->\r\n<section class=\"inosys-cta-ultra\">\r\n  \r\n  <!-- Animated Background -->\r\n  <div class=\"cta-ambient\">\r\n    <div class=\"gradient-mesh\"><\/div>\r\n    <div class=\"cta-orb orb-1\"><\/div>\r\n    <div class=\"cta-orb orb-2\"><\/div>\r\n    <div class=\"cta-orb orb-3\"><\/div>\r\n    <div class=\"animated-grid\"><\/div>\r\n    <div class=\"pulse-wave wave-1\"><\/div>\r\n    <div class=\"pulse-wave wave-2\"><\/div>\r\n    <div class=\"pulse-wave wave-3\"><\/div>\r\n  <\/div>\r\n\r\n  <!-- Floating Particles -->\r\n  <div class=\"floating-particles\">\r\n    <div class=\"particle\"><\/div>\r\n    <div class=\"particle\"><\/div>\r\n    <div class=\"particle\"><\/div>\r\n    <div class=\"particle\"><\/div>\r\n    <div class=\"particle\"><\/div>\r\n    <div class=\"particle\"><\/div>\r\n  <\/div>\r\n\r\n  <div class=\"cta-container\">\r\n\r\n    <!-- Main Content -->\r\n    <div class=\"cta-content\" data-aos=\"fade-up\">\r\n      \r\n      <div class=\"cta-badge\">\r\n        <svg class=\"badge-icon\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n          <path d=\"M22 11.08V12a10 10 0 11-5.93-9.14\"\/>\r\n          <polyline points=\"22 4 12 14.01 9 11.01\"\/>\r\n        <\/svg>\r\n        <span>Passer \u00e0 l'action<\/span>\r\n        <div class=\"badge-shine\"><\/div>\r\n      <\/div>\r\n\r\n      <h2 class=\"cta-title\">\r\n        <span class=\"title-line\">Vous avez un besoin en \u00e9quipements<\/span>\r\n        <span class=\"title-line highlight\">ou en solutions m\u00e9dicales ?<\/span>\r\n      <\/h2>\r\n\r\n      <p class=\"cta-description\">\r\n        Nos \u00e9quipes vous accompagnent dans le choix,\r\n        la fourniture et la mise en \u0153uvre de solutions adapt\u00e9es\r\n        \u00e0 vos exigences techniques et op\u00e9rationnelles.\r\n      <\/p>\r\n\r\n      <!-- CTA Buttons -->\r\n      <div class=\"cta-buttons\" data-aos=\"fade-up\" data-aos-delay=\"200\">\r\n        <a href=\"https:\/\/inosystech.com\/get-quote\/?quote_form=1\" class=\"cta-btn primary\">\r\n          <span class=\"btn-bg\"><\/span>\r\n          <span class=\"btn-content\">\r\n            <svg class=\"btn-icon\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\">\r\n              <path d=\"M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z\"\/>\r\n              <polyline points=\"14 2 14 8 20 8\"\/>\r\n              <line x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\"\/>\r\n              <line x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\"\/>\r\n              <polyline points=\"10 9 9 9 8 9\"\/>\r\n            <\/svg>\r\n            <span class=\"btn-text\">Demander un devis<\/span>\r\n            <svg class=\"btn-arrow\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\">\r\n              <path d=\"M5 12h14M12 5l7 7-7 7\"\/>\r\n            <\/svg>\r\n          <\/span>\r\n        <\/a>\r\n\r\n        <a href=\"https:\/\/inosystech.com\/catalogue\/\" class=\"cta-btn secondary\">\r\n          <span class=\"btn-bg\"><\/span>\r\n          <span class=\"btn-content\">\r\n            <svg class=\"btn-icon\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\">\r\n              <path d=\"M2 3h6a4 4 0 014 4v14a3 3 0 00-3-3H2z\"\/>\r\n              <path d=\"M22 3h-6a4 4 0 00-4 4v14a3 3 0 013-3h7z\"\/>\r\n            <\/svg>\r\n            <span class=\"btn-text\">Consulter le catalogue<\/span>\r\n            <svg class=\"btn-arrow\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\">\r\n              <path d=\"M5 12h14M12 5l7 7-7 7\"\/>\r\n            <\/svg>\r\n          <\/span>\r\n        <\/a>\r\n      <\/div>\r\n\r\n      <!-- Trust Indicators -->\r\n      <div class=\"cta-trust\" data-aos=\"fade-up\" data-aos-delay=\"300\">\r\n        <div class=\"trust-item\">\r\n          <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n            <path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"\/>\r\n          <\/svg>\r\n          <span>R\u00e9ponse en 24h<\/span>\r\n        <\/div>\r\n        <div class=\"trust-divider\"><\/div>\r\n        <div class=\"trust-item\">\r\n          <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n            <path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"\/>\r\n          <\/svg>\r\n          <span>Devis gratuit<\/span>\r\n        <\/div>\r\n        <div class=\"trust-divider\"><\/div>\r\n        <div class=\"trust-item\">\r\n          <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n            <path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"\/>\r\n          <\/svg>\r\n          <span>Sans engagement<\/span>\r\n        <\/div>\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n    <!-- Side Features -->\r\n    <div class=\"cta-features\" data-aos=\"fade-up\" data-aos-delay=\"400\">\r\n      <div class=\"feature-box\">\r\n        <div class=\"feature-icon\">\r\n          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n            <path d=\"M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5\"\/>\r\n          <\/svg>\r\n        <\/div>\r\n        <div class=\"feature-text\">\r\n          <div class=\"feature-title\">Large gamme<\/div>\r\n          <div class=\"feature-desc\">+1000 r\u00e9f\u00e9rences<\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"feature-box\">\r\n        <div class=\"feature-icon\">\r\n          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n            <path d=\"M22 11.08V12a10 10 0 11-5.93-9.14\"\/>\r\n            <polyline points=\"22 4 12 14.01 9 11.01\"\/>\r\n          <\/svg>\r\n        <\/div>\r\n        <div class=\"feature-text\">\r\n          <div class=\"feature-title\">Certifications<\/div>\r\n          <div class=\"feature-desc\">Normes internationales<\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"feature-box\">\r\n        <div class=\"feature-icon\">\r\n          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n            <circle cx=\"12\" cy=\"12\" r=\"10\"\/>\r\n            <polyline points=\"12 6 12 12 16 14\"\/>\r\n          <\/svg>\r\n        <\/div>\r\n        <div class=\"feature-text\">\r\n          <div class=\"feature-title\">Support 24\/7<\/div>\r\n          <div class=\"feature-desc\">Assistance technique<\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"feature-box\">\r\n        <div class=\"feature-icon\">\r\n          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n            <rect x=\"1\" y=\"3\" width=\"15\" height=\"13\"\/>\r\n            <polygon points=\"16 8 20 8 23 11 23 16 16 16 16 8\"\/>\r\n            <circle cx=\"5.5\" cy=\"18.5\" r=\"2.5\"\/>\r\n            <circle cx=\"18.5\" cy=\"18.5\" r=\"2.5\"\/>\r\n          <\/svg>\r\n        <\/div>\r\n        <div class=\"feature-text\">\r\n          <div class=\"feature-title\">Livraison rapide<\/div>\r\n          <div class=\"feature-desc\">Partout en Afrique<\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n<\/section>\r\n\r\n<style>\r\n\/* ===== RESET ===== *\/\r\n.inosys-cta-ultra * {\r\n  margin: 0;\r\n  padding: 0;\r\n  box-sizing: border-box;\r\n}\r\n\r\n\/* ===== SECTION BASE ===== *\/\r\n.inosys-cta-ultra {\r\n  position: relative;\r\n  padding: clamp(100px, 12vw, 160px) 0;\r\n  background: linear-gradient(135deg, #1e40af 0%, #3b82f6 50%, #6366f1 100%);\r\n  overflow: hidden;\r\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', system-ui, sans-serif;\r\n}\r\n\r\n\/* ===== AMBIENT BACKGROUND ===== *\/\r\n.cta-ambient {\r\n  position: absolute;\r\n  inset: 0;\r\n  z-index: 0;\r\n  pointer-events: none;\r\n}\r\n\r\n.gradient-mesh {\r\n  position: absolute;\r\n  inset: 0;\r\n  background: \r\n    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.15) 0%, transparent 50%),\r\n    radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);\r\n  animation: meshFloat 20s ease-in-out infinite alternate;\r\n}\r\n\r\n@keyframes meshFloat {\r\n  0% { transform: translate(0, 0) scale(1); }\r\n  100% { transform: translate(30px, -30px) scale(1.1); }\r\n}\r\n\r\n.cta-orb {\r\n  position: absolute;\r\n  border-radius: 50%;\r\n  filter: blur(120px);\r\n  animation: floatCTAOrb 25s ease-in-out infinite;\r\n  opacity: 0.3;\r\n}\r\n\r\n.orb-1 {\r\n  width: 600px;\r\n  height: 600px;\r\n  background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 0%, transparent 70%);\r\n  top: -20%;\r\n  left: -10%;\r\n  animation-delay: 0s;\r\n}\r\n\r\n.orb-2 {\r\n  width: 500px;\r\n  height: 500px;\r\n  background: radial-gradient(circle, rgba(139, 92, 246, 0.5) 0%, transparent 70%);\r\n  bottom: -15%;\r\n  right: -5%;\r\n  animation-delay: -12s;\r\n}\r\n\r\n.orb-3 {\r\n  width: 450px;\r\n  height: 450px;\r\n  background: radial-gradient(circle, rgba(236, 72, 153, 0.3) 0%, transparent 70%);\r\n  top: 50%;\r\n  left: 50%;\r\n  transform: translate(-50%, -50%);\r\n  animation-delay: -20s;\r\n}\r\n\r\n@keyframes floatCTAOrb {\r\n  0%, 100% { transform: translate(0, 0) scale(1); }\r\n  25% { transform: translate(40px, -30px) scale(1.15); }\r\n  50% { transform: translate(-30px, 20px) scale(0.95); }\r\n  75% { transform: translate(20px, 30px) scale(1.05); }\r\n}\r\n\r\n.animated-grid {\r\n  position: absolute;\r\n  inset: 0;\r\n  background-image: \r\n    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),\r\n    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);\r\n  background-size: 80px 80px;\r\n  animation: gridMove 30s linear infinite;\r\n}\r\n\r\n@keyframes gridMove {\r\n  0% { transform: translate(0, 0); }\r\n  100% { transform: translate(80px, 80px); }\r\n}\r\n\r\n\/* Pulse Waves *\/\r\n.pulse-wave {\r\n  position: absolute;\r\n  border: 2px solid rgba(255, 255, 255, 0.2);\r\n  border-radius: 50%;\r\n  animation: pulseWave 4s ease-out infinite;\r\n}\r\n\r\n.wave-1 {\r\n  width: 300px;\r\n  height: 300px;\r\n  top: 20%;\r\n  left: 10%;\r\n  animation-delay: 0s;\r\n}\r\n\r\n.wave-2 {\r\n  width: 400px;\r\n  height: 400px;\r\n  bottom: 20%;\r\n  right: 15%;\r\n  animation-delay: 1.5s;\r\n}\r\n\r\n.wave-3 {\r\n  width: 350px;\r\n  height: 350px;\r\n  top: 60%;\r\n  left: 60%;\r\n  animation-delay: 3s;\r\n}\r\n\r\n@keyframes pulseWave {\r\n  0% {\r\n    transform: scale(0.8);\r\n    opacity: 0;\r\n  }\r\n  50% {\r\n    opacity: 0.3;\r\n  }\r\n  100% {\r\n    transform: scale(1.5);\r\n    opacity: 0;\r\n  }\r\n}\r\n\r\n\/* Floating Particles *\/\r\n.floating-particles {\r\n  position: absolute;\r\n  inset: 0;\r\n  z-index: 0;\r\n  pointer-events: none;\r\n}\r\n\r\n.particle {\r\n  position: absolute;\r\n  width: 4px;\r\n  height: 4px;\r\n  background: rgba(255, 255, 255, 0.6);\r\n  border-radius: 50%;\r\n  animation: floatParticle 15s ease-in-out infinite;\r\n}\r\n\r\n.particle:nth-child(1) {\r\n  top: 20%;\r\n  left: 20%;\r\n  animation-delay: 0s;\r\n}\r\n\r\n.particle:nth-child(2) {\r\n  top: 40%;\r\n  left: 80%;\r\n  animation-delay: -3s;\r\n}\r\n\r\n.particle:nth-child(3) {\r\n  top: 70%;\r\n  left: 30%;\r\n  animation-delay: -6s;\r\n}\r\n\r\n.particle:nth-child(4) {\r\n  top: 30%;\r\n  left: 60%;\r\n  animation-delay: -9s;\r\n}\r\n\r\n.particle:nth-child(5) {\r\n  top: 80%;\r\n  left: 70%;\r\n  animation-delay: -12s;\r\n}\r\n\r\n.particle:nth-child(6) {\r\n  top: 50%;\r\n  left: 40%;\r\n  animation-delay: -15s;\r\n}\r\n\r\n@keyframes floatParticle {\r\n  0%, 100% {\r\n    transform: translate(0, 0) scale(1);\r\n    opacity: 0;\r\n  }\r\n  25% {\r\n    transform: translate(30px, -40px) scale(1.5);\r\n    opacity: 1;\r\n  }\r\n  50% {\r\n    transform: translate(60px, -20px) scale(1);\r\n    opacity: 0.5;\r\n  }\r\n  75% {\r\n    transform: translate(30px, 10px) scale(1.2);\r\n    opacity: 0.8;\r\n  }\r\n}\r\n\r\n\/* ===== CONTAINER ===== *\/\r\n.cta-container {\r\n  position: relative;\r\n  z-index: 1;\r\n  max-width: 1100px;\r\n  margin: 0 auto;\r\n  padding: 0 clamp(20px, 5vw, 40px);\r\n}\r\n\r\n\/* ===== CONTENT ===== *\/\r\n.cta-content {\r\n  text-align: center;\r\n  color: #ffffff;\r\n  margin-bottom: 60px;\r\n}\r\n\r\n\/* Badge *\/\r\n.cta-badge {\r\n  position: relative;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 10px;\r\n  padding: 12px 24px;\r\n  background: rgba(255, 255, 255, 0.15);\r\n  backdrop-filter: blur(20px);\r\n  border: 1px solid rgba(255, 255, 255, 0.25);\r\n  border-radius: 100px;\r\n  margin-bottom: 32px;\r\n  font-size: 0.85rem;\r\n  font-weight: 600;\r\n  letter-spacing: 0.05em;\r\n  text-transform: uppercase;\r\n  overflow: hidden;\r\n}\r\n\r\n.badge-shine {\r\n  position: absolute;\r\n  top: -50%;\r\n  left: -50%;\r\n  width: 200%;\r\n  height: 200%;\r\n  background: linear-gradient(\r\n    45deg,\r\n    transparent 30%,\r\n    rgba(255, 255, 255, 0.3) 50%,\r\n    transparent 70%\r\n  );\r\n  animation: badgeShine 3s ease-in-out infinite;\r\n}\r\n\r\n@keyframes badgeShine {\r\n  0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }\r\n  100% { transform: translateX(100%) translateY(100%) rotate(45deg); }\r\n}\r\n\r\n.badge-icon {\r\n  position: relative;\r\n  z-index: 1;\r\n  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\r\n}\r\n\r\n\/* Title *\/\r\n.cta-title {\r\n  font-size: clamp(2.2rem, 5vw, 3.5rem);\r\n  font-weight: 900;\r\n  line-height: 1.15;\r\n  margin-bottom: 28px;\r\n  letter-spacing: -0.02em;\r\n}\r\n\r\n.title-line {\r\n  display: block;\r\n}\r\n\r\n.title-line.highlight {\r\n  background: linear-gradient(135deg, #ffffff 0%, rgba(255, 255, 255, 0.8) 100%);\r\n  -webkit-background-clip: text;\r\n  -webkit-text-fill-color: transparent;\r\n  background-clip: text;\r\n  text-shadow: 0 0 40px rgba(255, 255, 255, 0.3);\r\n}\r\n\r\n\/* Description *\/\r\n.cta-description {\r\n  font-size: clamp(1.05rem, 2vw, 1.2rem);\r\n  line-height: 1.75;\r\n  max-width: 750px;\r\n  margin: 0 auto 48px;\r\n  color: rgba(255, 255, 255, 0.95);\r\n}\r\n\r\n\/* ===== BUTTONS ===== *\/\r\n.cta-buttons {\r\n  display: flex;\r\n  justify-content: center;\r\n  gap: 20px;\r\n  flex-wrap: wrap;\r\n  margin-bottom: 40px;\r\n}\r\n\r\n.cta-btn {\r\n  position: relative;\r\n  display: inline-flex;\r\n  text-decoration: none;\r\n  border-radius: 16px;\r\n  overflow: hidden;\r\n  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\r\n  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);\r\n}\r\n\r\n.btn-bg {\r\n  position: absolute;\r\n  inset: 0;\r\n  transition: all 0.4s ease;\r\n}\r\n\r\n.cta-btn.primary .btn-bg {\r\n  background: linear-gradient(135deg, #ffffff 0%, #f0f9ff 100%);\r\n}\r\n\r\n.cta-btn.secondary .btn-bg {\r\n  background: rgba(255, 255, 255, 0.1);\r\n  backdrop-filter: blur(20px);\r\n  border: 2px solid rgba(255, 255, 255, 0.3);\r\n}\r\n\r\n.btn-content {\r\n  position: relative;\r\n  z-index: 1;\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 12px;\r\n  padding: 18px 36px;\r\n  font-size: 1rem;\r\n  font-weight: 600;\r\n  transition: all 0.3s ease;\r\n}\r\n\r\n.cta-btn.primary .btn-content {\r\n  color: #1e40af;\r\n}\r\n\r\n.cta-btn.secondary .btn-content {\r\n  color: #ffffff;\r\n}\r\n\r\n.btn-icon {\r\n  transition: transform 0.3s ease;\r\n}\r\n\r\n.btn-text {\r\n  white-space: nowrap;\r\n}\r\n\r\n.btn-arrow {\r\n  transition: transform 0.3s ease;\r\n  opacity: 0.8;\r\n}\r\n\r\n\/* Hover Effects *\/\r\n.cta-btn:hover {\r\n  transform: translateY(-4px);\r\n  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);\r\n}\r\n\r\n.cta-btn.primary:hover .btn-bg {\r\n  background: linear-gradient(135deg, #f0f9ff 0%, #dbeafe 100%);\r\n}\r\n\r\n.cta-btn.secondary:hover .btn-bg {\r\n  background: rgba(255, 255, 255, 0.2);\r\n}\r\n\r\n.cta-btn:hover .btn-icon {\r\n  transform: scale(1.1) rotate(-5deg);\r\n}\r\n\r\n.cta-btn:hover .btn-arrow {\r\n  transform: translateX(4px);\r\n  opacity: 1;\r\n}\r\n\r\n.cta-btn:active {\r\n  transform: translateY(-2px);\r\n}\r\n\r\n\/* ===== TRUST INDICATORS ===== *\/\r\n.cta-trust {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: 24px;\r\n  flex-wrap: wrap;\r\n  padding: 24px 32px;\r\n  background: rgba(255, 255, 255, 0.1);\r\n  backdrop-filter: blur(20px);\r\n  border: 1px solid rgba(255, 255, 255, 0.2);\r\n  border-radius: 100px;\r\n  max-width: 700px;\r\n  margin: 0 auto;\r\n}\r\n\r\n.trust-item {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 8px;\r\n  color: rgba(255, 255, 255, 0.95);\r\n  font-size: 0.9rem;\r\n  font-weight: 600;\r\n}\r\n\r\n.trust-item svg {\r\n  color: #fbbf24;\r\n  filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.5));\r\n}\r\n\r\n.trust-divider {\r\n  width: 1px;\r\n  height: 20px;\r\n  background: rgba(255, 255, 255, 0.3);\r\n}\r\n\r\n\/* ===== FEATURES ===== *\/\r\n.cta-features {\r\n  display: grid;\r\n  grid-template-columns: repeat(4, 1fr);\r\n  gap: 24px;\r\n}\r\n\r\n.feature-box {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 16px;\r\n  padding: 24px;\r\n  background: rgba(255, 255, 255, 0.08);\r\n  backdrop-filter: blur(20px);\r\n  border: 1px solid rgba(255, 255, 255, 0.15);\r\n  border-radius: 16px;\r\n  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\r\n}\r\n\r\n.feature-box:hover {\r\n  transform: translateY(-4px);\r\n  background: rgba(255, 255, 255, 0.15);\r\n  border-color: rgba(255, 255, 255, 0.3);\r\n  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);\r\n}\r\n\r\n.feature-icon {\r\n  width: 48px;\r\n  height: 48px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  background: rgba(255, 255, 255, 0.15);\r\n  border-radius: 12px;\r\n  color: #ffffff;\r\n  flex-shrink: 0;\r\n  transition: all 0.3s ease;\r\n}\r\n\r\n.feature-box:hover .feature-icon {\r\n  transform: scale(1.1) rotate(5deg);\r\n  background: rgba(255, 255, 255, 0.25);\r\n}\r\n\r\n.feature-text {\r\n  flex: 1;\r\n  color: #ffffff;\r\n}\r\n\r\n.feature-title {\r\n  font-size: 0.95rem;\r\n  font-weight: 700;\r\n  margin-bottom: 4px;\r\n}\r\n\r\n.feature-desc {\r\n  font-size: 0.8rem;\r\n  color: rgba(255, 255, 255, 0.8);\r\n}\r\n\r\n\/* ===== AOS ANIMATIONS ===== *\/\r\n[data-aos=\"fade-up\"] {\r\n  opacity: 0;\r\n  transform: translateY(30px);\r\n  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);\r\n}\r\n\r\n[data-aos=\"fade-up\"].aos-animate {\r\n  opacity: 1;\r\n  transform: translateY(0);\r\n}\r\n\r\n\/* ===== RESPONSIVE ===== *\/\r\n@media (max-width: 1024px) {\r\n  .cta-features {\r\n    grid-template-columns: repeat(2, 1fr);\r\n  }\r\n}\r\n\r\n@media (max-width: 768px) {\r\n  .inosys-cta-ultra {\r\n    padding: clamp(80px, 10vw, 120px) 0;\r\n  }\r\n\r\n  .cta-title {\r\n    font-size: clamp(2rem, 6vw, 2.8rem);\r\n  }\r\n\r\n  .cta-description {\r\n    font-size: 1.05rem;\r\n    margin-bottom: 36px;\r\n  }\r\n\r\n  .cta-buttons {\r\n    flex-direction: column;\r\n    gap: 16px;\r\n  }\r\n\r\n  .cta-btn {\r\n    width: 100%;\r\n  }\r\n\r\n  .btn-content {\r\n    justify-content: center;\r\n    width: 100%;\r\n  }\r\n\r\n  .cta-trust {\r\n    flex-direction: column;\r\n    gap: 16px;\r\n    padding: 20px 24px;\r\n    border-radius: 16px;\r\n  }\r\n\r\n  .trust-divider {\r\n    width: 40px;\r\n    height: 1px;\r\n  }\r\n\r\n  .cta-features {\r\n    grid-template-columns: 1fr;\r\n    gap: 16px;\r\n  }\r\n\r\n  .cta-orb {\r\n    filter: blur(80px);\r\n  }\r\n\r\n  .orb-1, .orb-2 {\r\n    width: 400px;\r\n    height: 400px;\r\n  }\r\n\r\n  .orb-3 {\r\n    width: 350px;\r\n    height: 350px;\r\n  }\r\n}\r\n\r\n@media (max-width: 480px) {\r\n  .cta-badge {\r\n    font-size: 0.75rem;\r\n    padding: 10px 20px;\r\n  }\r\n\r\n  .feature-box {\r\n    padding: 20px;\r\n  }\r\n\r\n  .feature-icon {\r\n    width: 44px;\r\n    height: 44px;\r\n  }\r\n}\r\n\r\n\/* ===== ACCESSIBILITY ===== *\/\r\n@media (prefers-reduced-motion: reduce) {\r\n  *,\r\n  *::before,\r\n  *::after {\r\n    animation-duration: 0.01ms !important;\r\n    animation-iteration-count: 1 !important;\r\n    transition-duration: 0.01ms !important;\r\n  }\r\n\r\n  .cta-orb,\r\n  .pulse-wave,\r\n  .particle,\r\n  .badge-icon,\r\n  .animated-grid,\r\n  .badge-shine {\r\n    animation: none;\r\n  }\r\n}\r\n\r\n\/* Focus states *\/\r\n.cta-btn:focus-visible {\r\n  outline: 3px solid rgba(255, 255, 255, 0.5);\r\n  outline-offset: 4px;\r\n}\r\n<\/style>\r\n\r\n<script>\r\n(function() {\r\n  'use strict';\r\n\r\n  \/\/ ===== SCROLL ANIMATIONS =====\r\n  const animateOnScroll = () => {\r\n    const elements = document.querySelectorAll('[data-aos]');\r\n    \r\n    const observer = new IntersectionObserver((entries) => {\r\n      entries.forEach(entry => {\r\n        if (entry.isIntersecting) {\r\n          entry.target.classList.add('aos-animate');\r\n          observer.unobserve(entry.target);\r\n        }\r\n      });\r\n    }, {\r\n      threshold: 0.15,\r\n      rootMargin: '0px 0px -50px 0px'\r\n    });\r\n\r\n    elements.forEach(el => observer.observe(el));\r\n  };\r\n\r\n  \/\/ ===== MAGNETIC BUTTON EFFECT (Desktop Only) =====\r\n  const initMagneticButtons = () => {\r\n    if (window.innerWidth <= 768) return;\r\n\r\n    const buttons = document.querySelectorAll('.cta-btn');\r\n\r\n    buttons.forEach(button => {\r\n      button.addEventListener('mousemove', (e) => {\r\n        const rect = button.getBoundingClientRect();\r\n        const x = e.clientX - rect.left - rect.width \/ 2;\r\n        const y = e.clientY - rect.top - rect.height \/ 2;\r\n\r\n        button.style.transform = `\r\n          translateY(-4px) \r\n          translate(${x * 0.15}px, ${y * 0.15}px)\r\n        `;\r\n      });\r\n\r\n      button.addEventListener('mouseleave', () => {\r\n        button.style.transform = '';\r\n      });\r\n    });\r\n  };\r\n\r\n  \/\/ ===== PARALLAX EFFECT =====\r\n  const initParallax = () => {\r\n    const ctaSection = document.querySelector('.inosys-cta-ultra');\r\n    if (!ctaSection) return;\r\n\r\n    window.addEventListener('scroll', () => {\r\n      const scrolled = window.pageYOffset;\r\n      const sectionTop = ctaSection.offsetTop;\r\n      const sectionHeight = ctaSection.offsetHeight;\r\n\r\n      if (scrolled > sectionTop - window.innerHeight && scrolled < sectionTop + sectionHeight) {\r\n        const particles = document.querySelectorAll('.particle');\r\n        particles.forEach((particle, index) => {\r\n          const speed = 0.5 + (index * 0.1);\r\n          const yPos = (scrolled - sectionTop) * speed * 0.5;\r\n          particle.style.transform = `translateY(${-yPos}px)`;\r\n        });\r\n\r\n        const waves = document.querySelectorAll('.pulse-wave');\r\n        waves.forEach((wave, index) => {\r\n          const speed = 0.3 + (index * 0.1);\r\n          const scale = 1 + ((scrolled - sectionTop) \/ sectionHeight) * speed * 0.2;\r\n          wave.style.transform = `scale(${scale})`;\r\n        });\r\n      }\r\n    });\r\n  };\r\n\r\n  \/\/ ===== INITIALIZE =====\r\n  const init = () => {\r\n    animateOnScroll();\r\n    initMagneticButtons();\r\n    initParallax();\r\n  };\r\n\r\n  if (document.readyState === 'loading') {\r\n    document.addEventListener('DOMContentLoaded', init);\r\n  } else {\r\n    init();\r\n  }\r\n\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-c1bf58b elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"c1bf58b\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-d94e55c\" data-id=\"d94e55c\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-6760c07 elementor-widget elementor-widget-html\" data-id=\"6760c07\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- INOSYSTECH ULTRA PARTNERS SECTION -->\r\n<section class=\"inosys-partners-ultra\">\r\n  \r\n  <!-- Animated Background -->\r\n  <div class=\"partners-ambient\">\r\n    <div class=\"ambient-gradient\"><\/div>\r\n    <div class=\"partner-orb orb-1\"><\/div>\r\n    <div class=\"partner-orb orb-2\"><\/div>\r\n    <div class=\"partner-orb orb-3\"><\/div>\r\n    <div class=\"dots-pattern\"><\/div>\r\n  <\/div>\r\n\r\n  <div class=\"partners-container\">\r\n\r\n    <!-- Section Header -->\r\n    <div class=\"partners-header\" data-aos=\"fade-up\">\r\n      <div class=\"header-badge\">\r\n        <svg class=\"badge-icon\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n          <path d=\"M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2\"\/>\r\n          <circle cx=\"9\" cy=\"7\" r=\"4\"\/>\r\n          <path d=\"M23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75\"\/>\r\n        <\/svg>\r\n        <span>Nos technologies partenaires<\/span>\r\n      <\/div>\r\n      \r\n      <h2 class=\"partners-title\">\r\n        <span class=\"title-line\">Des solutions int\u00e9gr\u00e9es<\/span>\r\n        <span class=\"title-line gradient-text\">issues de fabricants de r\u00e9f\u00e9rence<\/span>\r\n      <\/h2>\r\n      \r\n      <p class=\"partners-description\">\r\n        INOSYSTECH int\u00e8gre et propose des solutions technologiques\r\n        provenant de fabricants reconnus \u00e0 l'\u00e9chelle internationale,\r\n        afin de garantir performance, fiabilit\u00e9 et conformit\u00e9 m\u00e9dicale.\r\n      <\/p>\r\n    <\/div>\r\n\r\n    <!-- Partners Grid -->\r\n    <div class=\"partners-grid\">\r\n\r\n      <!-- Partner 1: AGD Bio -->\r\n      <article class=\"partner-card\" data-aos=\"fade-up\" data-aos-delay=\"100\">\r\n        <div class=\"card-glow\"><\/div>\r\n        <div class=\"card-shine\"><\/div>\r\n        \r\n        <div class=\"partner-icon\">\r\n          <div class=\"icon-bg\"><\/div>\r\n          <span class=\"icon-emoji\">\ud83e\uddea<\/span>\r\n        <\/div>\r\n\r\n        <div class=\"logo-container\">\r\n          <div class=\"logo-wrapper\">\r\n            <img decoding=\"async\" \r\n              src=\"https:\/\/inosystech.com\/wp-content\/uploads\/2025\/03\/images-3.jpg\" \r\n              alt=\"AGD Bio logo\"\r\n              loading=\"lazy\"\r\n            \/>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <h3 class=\"partner-name\">AGD Bio<\/h3>\r\n        \r\n        <p class=\"partner-description\">\r\n          Solutions de biochimie clinique, \u00e9lectrolytes\r\n          et coagulation pour les laboratoires de diagnostic.\r\n        <\/p>\r\n\r\n        <div class=\"partner-tags\">\r\n          <span class=\"tag\">Biochimie<\/span>\r\n          <span class=\"tag\">\u00c9lectrolytes<\/span>\r\n          <span class=\"tag\">Coagulation<\/span>\r\n        <\/div>\r\n\r\n        <div class=\"partner-badge\">\r\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n            <path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"\/>\r\n          <\/svg>\r\n          <span>Partenaire certifi\u00e9<\/span>\r\n        <\/div>\r\n\r\n        <div class=\"card-corner\"><\/div>\r\n      <\/article>\r\n\r\n      <!-- Partner 2: Nihon Kohden -->\r\n      <article class=\"partner-card featured\" data-aos=\"fade-up\" data-aos-delay=\"200\">\r\n        <div class=\"card-glow\"><\/div>\r\n        <div class=\"card-shine\"><\/div>\r\n        <div class=\"featured-ribbon\">\r\n          <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n            <polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/>\r\n          <\/svg>\r\n          <span>Premium<\/span>\r\n        <\/div>\r\n        \r\n        <div class=\"partner-icon\">\r\n          <div class=\"icon-bg\"><\/div>\r\n          <span class=\"icon-emoji\">\ud83e\ude78<\/span>\r\n        <\/div>\r\n\r\n        <div class=\"logo-container\">\r\n          <div class=\"logo-wrapper\">\r\n            <img decoding=\"async\" \r\n              src=\"https:\/\/inosystech.com\/wp-content\/uploads\/2026\/01\/nihon-kohden-logo.webp\" \r\n              alt=\"Nihon Kohden logo\"\r\n              loading=\"lazy\"\r\n            \/>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <h3 class=\"partner-name\">Nihon Kohden<\/h3>\r\n        \r\n        <p class=\"partner-description\">\r\n          Technologies m\u00e9dicales et syst\u00e8mes de diagnostic\r\n          reconnus pour leur pr\u00e9cision et leur fiabilit\u00e9.\r\n        <\/p>\r\n\r\n        <div class=\"partner-tags\">\r\n          <span class=\"tag\">Technologie<\/span>\r\n          <span class=\"tag\">Diagnostic<\/span>\r\n          <span class=\"tag\">Pr\u00e9cision<\/span>\r\n        <\/div>\r\n\r\n        <div class=\"partner-badge\">\r\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n            <path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"\/>\r\n          <\/svg>\r\n          <span>Partenaire certifi\u00e9<\/span>\r\n        <\/div>\r\n\r\n        <div class=\"card-corner\"><\/div>\r\n      <\/article>\r\n\r\n      <!-- Partner 3: DiaSorin -->\r\n      <article class=\"partner-card\" data-aos=\"fade-up\" data-aos-delay=\"300\">\r\n        <div class=\"card-glow\"><\/div>\r\n        <div class=\"card-shine\"><\/div>\r\n        \r\n        <div class=\"partner-icon\">\r\n          <div class=\"icon-bg\"><\/div>\r\n          <span class=\"icon-emoji\">\ud83e\uddec<\/span>\r\n        <\/div>\r\n\r\n        <div class=\"logo-container\">\r\n          <div class=\"logo-wrapper\">\r\n            <img decoding=\"async\" \r\n              src=\"https:\/\/inosystech.com\/wp-content\/uploads\/2026\/01\/475757423_1180234884101796_1209372124493719930_n.jpg\" \r\n              alt=\"DiaSorin logo\"\r\n              loading=\"lazy\"\r\n            \/>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <h3 class=\"partner-name\">DiaSorin<\/h3>\r\n        \r\n        <p class=\"partner-description\">\r\n          Solutions d'immunodiagnostic et technologies\r\n          avanc\u00e9es pour l'analyse et la recherche m\u00e9dicale.\r\n        <\/p>\r\n\r\n        <div class=\"partner-tags\">\r\n          <span class=\"tag\">Immunodiagnostic<\/span>\r\n          <span class=\"tag\">Recherche<\/span>\r\n          <span class=\"tag\">Innovation<\/span>\r\n        <\/div>\r\n\r\n        <div class=\"partner-badge\">\r\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n            <path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"\/>\r\n          <\/svg>\r\n          <span>Partenaire certifi\u00e9<\/span>\r\n        <\/div>\r\n\r\n        <div class=\"card-corner\"><\/div>\r\n      <\/article>\r\n\r\n    <\/div>\r\n\r\n    <!-- Trust Section -->\r\n    <div class=\"partners-trust\" data-aos=\"fade-up\" data-aos-delay=\"400\">\r\n      <div class=\"trust-stats\">\r\n        <div class=\"stat\">\r\n          <div class=\"stat-icon\">\r\n            <svg width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n              <path d=\"M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2\"\/>\r\n              <circle cx=\"9\" cy=\"7\" r=\"4\"\/>\r\n              <path d=\"M23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75\"\/>\r\n            <\/svg>\r\n          <\/div>\r\n          <div class=\"stat-content\">\r\n            <div class=\"stat-number\">20+<\/div>\r\n            <div class=\"stat-label\">Partenaires internationaux<\/div>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"stat-divider\"><\/div>\r\n\r\n        <div class=\"stat\">\r\n          <div class=\"stat-icon\">\r\n            <svg width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n              <path d=\"M22 11.08V12a10 10 0 11-5.93-9.14\"\/>\r\n              <polyline points=\"22 4 12 14.01 9 11.01\"\/>\r\n            <\/svg>\r\n          <\/div>\r\n          <div class=\"stat-content\">\r\n            <div class=\"stat-number\">100%<\/div>\r\n            <div class=\"stat-label\">\u00c9quipements certifi\u00e9s<\/div>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"stat-divider\"><\/div>\r\n\r\n        <div class=\"stat\">\r\n          <div class=\"stat-icon\">\r\n            <svg width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n              <circle cx=\"12\" cy=\"12\" r=\"10\"\/>\r\n              <path d=\"M12 16v-4M12 8h.01\"\/>\r\n            <\/svg>\r\n          <\/div>\r\n          <div class=\"stat-content\">\r\n            <div class=\"stat-number\">15+<\/div>\r\n            <div class=\"stat-label\">Ann\u00e9es d'exp\u00e9rience<\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n<\/section>\r\n\r\n<style>\r\n\/* ===== RESET ===== *\/\r\n.inosys-partners-ultra * {\r\n  margin: 0;\r\n  padding: 0;\r\n  box-sizing: border-box;\r\n}\r\n\r\n\/* ===== SECTION BASE ===== *\/\r\n.inosys-partners-ultra {\r\n  position: relative;\r\n  padding: clamp(80px, 10vw, 140px) 0;\r\n  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);\r\n  overflow: hidden;\r\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', system-ui, sans-serif;\r\n}\r\n\r\n\/* ===== AMBIENT BACKGROUND ===== *\/\r\n.partners-ambient {\r\n  position: absolute;\r\n  inset: 0;\r\n  z-index: 0;\r\n  pointer-events: none;\r\n  overflow: hidden;\r\n}\r\n\r\n.ambient-gradient {\r\n  position: absolute;\r\n  inset: 0;\r\n  background: \r\n    radial-gradient(circle at 30% 20%, rgba(59, 130, 246, 0.05) 0%, transparent 50%),\r\n    radial-gradient(circle at 70% 80%, rgba(139, 92, 246, 0.05) 0%, transparent 50%);\r\n}\r\n\r\n.partner-orb {\r\n  position: absolute;\r\n  border-radius: 50%;\r\n  filter: blur(100px);\r\n  animation: floatPartnerOrb 30s ease-in-out infinite;\r\n  opacity: 0.15;\r\n}\r\n\r\n.orb-1 {\r\n  width: 500px;\r\n  height: 500px;\r\n  background: radial-gradient(circle, #3b82f6 0%, transparent 70%);\r\n  top: -10%;\r\n  left: -10%;\r\n  animation-delay: 0s;\r\n}\r\n\r\n.orb-2 {\r\n  width: 450px;\r\n  height: 450px;\r\n  background: radial-gradient(circle, #8b5cf6 0%, transparent 70%);\r\n  bottom: -10%;\r\n  right: -5%;\r\n  animation-delay: -15s;\r\n}\r\n\r\n.orb-3 {\r\n  width: 400px;\r\n  height: 400px;\r\n  background: radial-gradient(circle, #06b6d4 0%, transparent 70%);\r\n  top: 50%;\r\n  left: 60%;\r\n  animation-delay: -25s;\r\n}\r\n\r\n@keyframes floatPartnerOrb {\r\n  0%, 100% { transform: translate(0, 0) scale(1); }\r\n  33% { transform: translate(40px, -30px) scale(1.1); }\r\n  66% { transform: translate(-30px, 25px) scale(0.95); }\r\n}\r\n\r\n.dots-pattern {\r\n  position: absolute;\r\n  inset: 0;\r\n  background-image: radial-gradient(circle, rgba(59, 130, 246, 0.08) 1px, transparent 1px);\r\n  background-size: 40px 40px;\r\n  opacity: 0.4;\r\n}\r\n\r\n\/* ===== CONTAINER ===== *\/\r\n.partners-container {\r\n  position: relative;\r\n  z-index: 1;\r\n  max-width: 1200px;\r\n  margin: 0 auto;\r\n  padding: 0 clamp(20px, 5vw, 40px);\r\n}\r\n\r\n\/* ===== HEADER ===== *\/\r\n.partners-header {\r\n  max-width: 820px;\r\n  margin: 0 auto 80px;\r\n  text-align: center;\r\n}\r\n\r\n.header-badge {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 10px;\r\n  padding: 12px 24px;\r\n  background: rgba(59, 130, 246, 0.08);\r\n  backdrop-filter: blur(10px);\r\n  border: 1px solid rgba(59, 130, 246, 0.15);\r\n  border-radius: 100px;\r\n  margin-bottom: 24px;\r\n  color: #3b82f6;\r\n  font-size: 0.85rem;\r\n  font-weight: 600;\r\n  letter-spacing: 0.05em;\r\n  text-transform: uppercase;\r\n}\r\n\r\n.badge-icon {\r\n  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\r\n}\r\n\r\n@keyframes pulse {\r\n  0%, 100% { opacity: 1; }\r\n  50% { opacity: 0.5; }\r\n}\r\n\r\n.partners-title {\r\n  font-size: clamp(2rem, 4vw, 3.2rem);\r\n  font-weight: 800;\r\n  line-height: 1.15;\r\n  margin-bottom: 24px;\r\n  letter-spacing: -0.02em;\r\n}\r\n\r\n.title-line {\r\n  display: block;\r\n  color: #0f172a;\r\n}\r\n\r\n.gradient-text {\r\n  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);\r\n  -webkit-background-clip: text;\r\n  -webkit-text-fill-color: transparent;\r\n  background-clip: text;\r\n}\r\n\r\n.partners-description {\r\n  font-size: clamp(1rem, 2vw, 1.15rem);\r\n  line-height: 1.7;\r\n  color: #64748b;\r\n  max-width: 720px;\r\n  margin: 0 auto;\r\n}\r\n\r\n\/* ===== PARTNERS GRID ===== *\/\r\n.partners-grid {\r\n  display: grid;\r\n  grid-template-columns: repeat(3, 1fr);\r\n  gap: 32px;\r\n  margin-bottom: 80px;\r\n}\r\n\r\n\/* ===== PARTNER CARDS ===== *\/\r\n.partner-card {\r\n  position: relative;\r\n  background: rgba(255, 255, 255, 0.8);\r\n  backdrop-filter: blur(20px);\r\n  border: 1px solid rgba(148, 163, 184, 0.15);\r\n  border-radius: 28px;\r\n  padding: 44px 36px;\r\n  text-align: center;\r\n  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);\r\n  overflow: hidden;\r\n  isolation: isolate;\r\n}\r\n\r\n.partner-card::before {\r\n  content: '';\r\n  position: absolute;\r\n  inset: 0;\r\n  background: linear-gradient(135deg, rgba(59, 130, 246, 0.03) 0%, transparent 100%);\r\n  opacity: 0;\r\n  transition: opacity 0.5s ease;\r\n  z-index: -1;\r\n}\r\n\r\n.partner-card:hover {\r\n  transform: translateY(-16px) scale(1.02);\r\n  border-color: rgba(59, 130, 246, 0.3);\r\n  box-shadow: \r\n    0 30px 80px rgba(59, 130, 246, 0.2),\r\n    0 0 0 1px rgba(59, 130, 246, 0.1);\r\n}\r\n\r\n.partner-card:hover::before {\r\n  opacity: 1;\r\n}\r\n\r\n\/* Featured Card *\/\r\n.partner-card.featured {\r\n  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(139, 92, 246, 0.05) 100%);\r\n  border-color: rgba(59, 130, 246, 0.25);\r\n}\r\n\r\n.featured-ribbon {\r\n  position: absolute;\r\n  top: 24px;\r\n  right: -32px;\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 8px;\r\n  padding: 8px 40px;\r\n  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);\r\n  color: #ffffff;\r\n  font-size: 0.75rem;\r\n  font-weight: 700;\r\n  letter-spacing: 0.05em;\r\n  text-transform: uppercase;\r\n  transform: rotate(45deg);\r\n  box-shadow: 0 4px 20px rgba(59, 130, 246, 0.4);\r\n}\r\n\r\n\/* Card Glow *\/\r\n.card-glow {\r\n  position: absolute;\r\n  top: -50%;\r\n  left: -50%;\r\n  width: 200%;\r\n  height: 200%;\r\n  background: radial-gradient(\r\n    circle,\r\n    rgba(59, 130, 246, 0.2) 0%,\r\n    transparent 50%\r\n  );\r\n  opacity: 0;\r\n  transition: opacity 0.5s ease;\r\n  pointer-events: none;\r\n  z-index: -1;\r\n}\r\n\r\n.partner-card:hover .card-glow {\r\n  opacity: 0.6;\r\n}\r\n\r\n\/* Card Shine *\/\r\n.card-shine {\r\n  position: absolute;\r\n  top: 0;\r\n  left: -100%;\r\n  width: 100%;\r\n  height: 100%;\r\n  background: linear-gradient(\r\n    90deg,\r\n    transparent 0%,\r\n    rgba(255, 255, 255, 0.4) 50%,\r\n    transparent 100%\r\n  );\r\n  transition: left 0.8s ease;\r\n}\r\n\r\n.partner-card:hover .card-shine {\r\n  left: 100%;\r\n}\r\n\r\n\/* Partner Icon *\/\r\n.partner-icon {\r\n  position: relative;\r\n  width: 80px;\r\n  height: 80px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  margin: 0 auto 32px;\r\n}\r\n\r\n.icon-bg {\r\n  position: absolute;\r\n  inset: 0;\r\n  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);\r\n  border-radius: 20px;\r\n  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);\r\n  border: 2px solid rgba(59, 130, 246, 0.2);\r\n}\r\n\r\n.partner-card:hover .icon-bg {\r\n  transform: scale(1.15) rotate(10deg);\r\n  background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(139, 92, 246, 0.2) 100%);\r\n  border-color: rgba(59, 130, 246, 0.4);\r\n}\r\n\r\n.icon-emoji {\r\n  position: relative;\r\n  z-index: 1;\r\n  font-size: 2.5rem;\r\n  transition: transform 0.5s ease;\r\n  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));\r\n}\r\n\r\n.partner-card:hover .icon-emoji {\r\n  transform: scale(1.2) rotate(-10deg);\r\n}\r\n\r\n\/* Logo Container *\/\r\n.logo-container {\r\n  margin-bottom: 28px;\r\n  height: 100px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n\r\n.logo-wrapper {\r\n  position: relative;\r\n  width: 100%;\r\n  max-width: 220px;\r\n  height: 100%;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  padding: 16px;\r\n  background: rgba(255, 255, 255, 0.5);\r\n  border-radius: 16px;\r\n  transition: all 0.4s ease;\r\n}\r\n\r\n.partner-card:hover .logo-wrapper {\r\n  background: rgba(255, 255, 255, 0.8);\r\n  transform: scale(1.05);\r\n}\r\n\r\n.logo-wrapper img {\r\n  max-width: 100%;\r\n  max-height: 100%;\r\n  object-fit: contain;\r\n  transition: all 0.4s ease;\r\n  filter: grayscale(20%);\r\n}\r\n\r\n.partner-card:hover .logo-wrapper img {\r\n  filter: grayscale(0%);\r\n  transform: scale(1.05);\r\n}\r\n\r\n\/* Partner Name *\/\r\n.partner-name {\r\n  font-size: 1.5rem;\r\n  font-weight: 700;\r\n  color: #0f172a;\r\n  margin-bottom: 16px;\r\n  transition: color 0.3s ease;\r\n}\r\n\r\n.partner-card:hover .partner-name {\r\n  color: #3b82f6;\r\n}\r\n\r\n\/* Description *\/\r\n.partner-description {\r\n  font-size: 0.95rem;\r\n  line-height: 1.7;\r\n  color: #64748b;\r\n  margin-bottom: 24px;\r\n  min-height: 80px;\r\n}\r\n\r\n\/* Tags *\/\r\n.partner-tags {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  gap: 8px;\r\n  justify-content: center;\r\n  margin-bottom: 24px;\r\n}\r\n\r\n.tag {\r\n  padding: 6px 14px;\r\n  background: rgba(59, 130, 246, 0.08);\r\n  border: 1px solid rgba(59, 130, 246, 0.15);\r\n  border-radius: 8px;\r\n  font-size: 0.75rem;\r\n  font-weight: 600;\r\n  color: #3b82f6;\r\n  transition: all 0.3s ease;\r\n}\r\n\r\n.partner-card:hover .tag {\r\n  background: rgba(59, 130, 246, 0.15);\r\n  border-color: rgba(59, 130, 246, 0.3);\r\n  transform: translateY(-2px);\r\n}\r\n\r\n\/* Partner Badge *\/\r\n.partner-badge {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 8px;\r\n  padding: 10px 18px;\r\n  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);\r\n  border: 1px solid rgba(59, 130, 246, 0.2);\r\n  border-radius: 100px;\r\n  font-size: 0.8rem;\r\n  font-weight: 600;\r\n  color: #3b82f6;\r\n}\r\n\r\n.partner-badge svg {\r\n  color: #fbbf24;\r\n  filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.5));\r\n}\r\n\r\n\/* Card Corner *\/\r\n.card-corner {\r\n  position: absolute;\r\n  bottom: 0;\r\n  right: 0;\r\n  width: 80px;\r\n  height: 80px;\r\n  background: linear-gradient(135deg, transparent 50%, rgba(59, 130, 246, 0.05) 50%);\r\n  border-radius: 28px 0 28px 0;\r\n  opacity: 0;\r\n  transition: opacity 0.4s ease;\r\n}\r\n\r\n.partner-card:hover .card-corner {\r\n  opacity: 1;\r\n}\r\n\r\n\/* ===== TRUST SECTION ===== *\/\r\n.partners-trust {\r\n  padding: 48px;\r\n  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(139, 92, 246, 0.05) 100%);\r\n  border-radius: 24px;\r\n  border: 1px solid rgba(59, 130, 246, 0.15);\r\n}\r\n\r\n.trust-stats {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-around;\r\n  gap: 40px;\r\n}\r\n\r\n.stat {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 20px;\r\n  flex: 1;\r\n}\r\n\r\n.stat-icon {\r\n  width: 64px;\r\n  height: 64px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);\r\n  border-radius: 16px;\r\n  flex-shrink: 0;\r\n  box-shadow: 0 10px 30px rgba(59, 130, 246, 0.3);\r\n  transition: all 0.4s ease;\r\n}\r\n\r\n.partners-trust:hover .stat-icon {\r\n  transform: scale(1.1) rotate(5deg);\r\n}\r\n\r\n.stat-icon svg {\r\n  color: #ffffff;\r\n}\r\n\r\n.stat-content {\r\n  flex: 1;\r\n}\r\n\r\n.stat-number {\r\n  font-size: 2.2rem;\r\n  font-weight: 800;\r\n  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);\r\n  -webkit-background-clip: text;\r\n  -webkit-text-fill-color: transparent;\r\n  background-clip: text;\r\n  line-height: 1;\r\n  margin-bottom: 6px;\r\n}\r\n\r\n.stat-label {\r\n  font-size: 0.9rem;\r\n  color: #64748b;\r\n  font-weight: 500;\r\n}\r\n\r\n.stat-divider {\r\n  width: 1px;\r\n  height: 60px;\r\n  background: linear-gradient(\r\n    180deg,\r\n    transparent 0%,\r\n    rgba(59, 130, 246, 0.3) 50%,\r\n    transparent 100%\r\n  );\r\n}\r\n\r\n\/* ===== AOS ANIMATIONS ===== *\/\r\n[data-aos=\"fade-up\"] {\r\n  opacity: 0;\r\n  transform: translateY(30px);\r\n  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);\r\n}\r\n\r\n[data-aos=\"fade-up\"].aos-animate {\r\n  opacity: 1;\r\n  transform: translateY(0);\r\n}\r\n\r\n\/* ===== RESPONSIVE ===== *\/\r\n@media (max-width: 1024px) {\r\n  .partners-grid {\r\n    grid-template-columns: 1fr;\r\n    gap: 24px;\r\n  }\r\n\r\n  .partner-card {\r\n    max-width: 600px;\r\n    margin: 0 auto;\r\n  }\r\n\r\n  .trust-stats {\r\n    flex-direction: column;\r\n    gap: 32px;\r\n  }\r\n\r\n  .stat {\r\n    width: 100%;\r\n    max-width: 400px;\r\n  }\r\n\r\n  .stat-divider {\r\n    width: 100%;\r\n    height: 1px;\r\n  }\r\n}\r\n\r\n@media (max-width: 768px) {\r\n  .inosys-partners-ultra {\r\n    padding: clamp(60px, 8vw, 100px) 0;\r\n  }\r\n\r\n  .partners-header {\r\n    margin-bottom: 60px;\r\n  }\r\n\r\n  .partners-title {\r\n    font-size: clamp(1.8rem, 5vw, 2.5rem);\r\n  }\r\n\r\n  .partners-grid {\r\n    margin-bottom: 60px;\r\n  }\r\n\r\n  .partner-card {\r\n    padding: 36px 28px;\r\n  }\r\n\r\n  .partner-icon {\r\n    width: 72px;\r\n    height: 72px;\r\n  }\r\n\r\n  .icon-emoji {\r\n    font-size: 2rem;\r\n  }\r\n\r\n  .logo-container {\r\n    height: 90px;\r\n  }\r\n\r\n  .partner-name {\r\n    font-size: 1.3rem;\r\n  }\r\n\r\n  .partners-trust {\r\n    padding: 32px 24px;\r\n  }\r\n\r\n  .stat-icon {\r\n    width: 56px;\r\n    height: 56px;\r\n  }\r\n\r\n  .stat-number {\r\n    font-size: 1.8rem;\r\n  }\r\n\r\n  .partner-orb {\r\n    filter: blur(70px);\r\n  }\r\n\r\n  .orb-1, .orb-2 {\r\n    width: 350px;\r\n    height: 350px;\r\n  }\r\n\r\n  .orb-3 {\r\n    width: 300px;\r\n    height: 300px;\r\n  }\r\n}\r\n\r\n@media (max-width: 480px) {\r\n  .header-badge {\r\n    font-size: 0.75rem;\r\n    padding: 10px 20px;\r\n  }\r\n\r\n  .partner-tags {\r\n    gap: 6px;\r\n  }\r\n\r\n  .tag {\r\n    font-size: 0.7rem;\r\n    padding: 5px 12px;\r\n  }\r\n\r\n  .featured-ribbon {\r\n    font-size: 0.65rem;\r\n    padding: 6px 35px;\r\n  }\r\n}\r\n\r\n\/* ===== ACCESSIBILITY ===== *\/\r\n@media (prefers-reduced-motion: reduce) {\r\n  *,\r\n  *::before,\r\n  *::after {\r\n    animation-duration: 0.01ms !important;\r\n    animation-iteration-count: 1 !important;\r\n    transition-duration: 0.01ms !important;\r\n  }\r\n\r\n  .partner-orb,\r\n  .badge-icon {\r\n    animation: none;\r\n  }\r\n}\r\n\r\n\/* Focus states *\/\r\n.partner-card:focus-within {\r\n  outline: 2px solid #3b82f6;\r\n  outline-offset: 4px;\r\n}\r\n<\/style>\r\n\r\n<script>\r\n(function() {\r\n  'use strict';\r\n\r\n  \/\/ ===== SCROLL ANIMATIONS =====\r\n  const animateOnScroll = () => {\r\n    const elements = document.querySelectorAll('[data-aos]');\r\n    \r\n    const observer = new IntersectionObserver((entries) => {\r\n      entries.forEach(entry => {\r\n        if (entry.isIntersecting) {\r\n          entry.target.classList.add('aos-animate');\r\n          observer.unobserve(entry.target);\r\n        }\r\n      });\r\n    }, {\r\n      threshold: 0.15,\r\n      rootMargin: '0px 0px -50px 0px'\r\n    });\r\n\r\n    elements.forEach(el => observer.observe(el));\r\n  };\r\n\r\n  \/\/ ===== CARD GLOW FOLLOW MOUSE =====\r\n  const initCardGlow = () => {\r\n    const cards = document.querySelectorAll('.partner-card');\r\n\r\n    cards.forEach(card => {\r\n      const glow = card.querySelector('.card-glow');\r\n\r\n      card.addEventListener('mousemove', (e) => {\r\n        const rect = card.getBoundingClientRect();\r\n        const x = e.clientX - rect.left;\r\n        const y = e.clientY - rect.top;\r\n\r\n        glow.style.background = `radial-gradient(\r\n          circle at ${x}px ${y}px,\r\n          rgba(59, 130, 246, 0.3) 0%,\r\n          transparent 50%\r\n        )`;\r\n      });\r\n    });\r\n  };\r\n\r\n  \/\/ ===== 3D CARD TILT EFFECT (Desktop Only) =====\r\n  const initCardTilt = () => {\r\n    if (window.innerWidth <= 768) return;\r\n\r\n    const cards = document.querySelectorAll('.partner-card');\r\n\r\n    cards.forEach(card => {\r\n      card.addEventListener('mousemove', (e) => {\r\n        const rect = card.getBoundingClientRect();\r\n        const x = e.clientX - rect.left;\r\n        const y = e.clientY - rect.top;\r\n\r\n        const centerX = rect.width \/ 2;\r\n        const centerY = rect.height \/ 2;\r\n\r\n        const rotateX = ((y - centerY) \/ centerY) * -5;\r\n        const rotateY = ((x - centerX) \/ centerX) * 5;\r\n\r\n        card.style.transform = `\r\n          translateY(-16px) \r\n          scale(1.02)\r\n          perspective(1000px) \r\n          rotateX(${rotateX}deg) \r\n          rotateY(${rotateY}deg)\r\n        `;\r\n      });\r\n\r\n      card.addEventListener('mouseleave', () => {\r\n        card.style.transform = '';\r\n      });\r\n    });\r\n  };\r\n\r\n  \/\/ ===== COUNTER ANIMATION =====\r\n  const animateCounters = () => {\r\n    const stats = document.querySelectorAll('.stat-number');\r\n    \r\n    const observer = new IntersectionObserver((entries) => {\r\n      entries.forEach(entry => {\r\n        if (entry.isIntersecting) {\r\n          const target = entry.target;\r\n          const text = target.textContent;\r\n          const hasPlus = text.includes('+');\r\n          const hasPercent = text.includes('%');\r\n          const number = parseInt(text.replace(\/[^0-9]\/g, ''));\r\n          \r\n          if (!isNaN(number)) {\r\n            let current = 0;\r\n            const increment = number \/ 50;\r\n            const timer = setInterval(() => {\r\n              current += increment;\r\n              if (current >= number) {\r\n                current = number;\r\n                clearInterval(timer);\r\n              }\r\n              target.textContent = Math.floor(current) + (hasPlus ? '+' : hasPercent ? '%' : '');\r\n            }, 30);\r\n          }\r\n          \r\n          observer.unobserve(target);\r\n        }\r\n      });\r\n    }, {\r\n      threshold: 0.5\r\n    });\r\n\r\n    stats.forEach(stat => observer.observe(stat));\r\n  };\r\n\r\n  \/\/ ===== INITIALIZE =====\r\n  const init = () => {\r\n    animateOnScroll();\r\n    initCardGlow();\r\n    initCardTilt();\r\n    animateCounters();\r\n  };\r\n\r\n  if (document.readyState === 'loading') {\r\n    document.addEventListener('DOMContentLoaded', init);\r\n  } else {\r\n    init();\r\n  }\r\n\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-8f60803 elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"8f60803\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-14a33d4\" data-id=\"14a33d4\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-d0d6b62 elementor-widget elementor-widget-html\" data-id=\"d0d6b62\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- INOSYSTECH ULTRA WHY CHOOSE US SECTION -->\r\n<section class=\"inosys-why-ultra\">\r\n  \r\n  <!-- Animated Background -->\r\n  <div class=\"why-ambient\">\r\n    <div class=\"ambient-gradient\"><\/div>\r\n    <div class=\"why-orb orb-1\"><\/div>\r\n    <div class=\"why-orb orb-2\"><\/div>\r\n    <div class=\"why-orb orb-3\"><\/div>\r\n    <div class=\"hexagon-pattern\"><\/div>\r\n  <\/div>\r\n\r\n  <div class=\"why-container\">\r\n\r\n    <!-- Section Header -->\r\n    <div class=\"why-header\" data-aos=\"fade-up\">\r\n      <div class=\"header-badge\">\r\n        <svg class=\"badge-icon\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n          <path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"\/>\r\n        <\/svg>\r\n        <span>Pourquoi INOSYSTECH<\/span>\r\n      <\/div>\r\n      \r\n      <h2 class=\"why-title\">\r\n        <span class=\"title-line\">Un partenaire fiable<\/span>\r\n        <span class=\"title-line gradient-text\">pour des environnements exigeants<\/span>\r\n      <\/h2>\r\n      \r\n      <p class=\"why-description\">\r\n        Choisir INOSYSTECH, c'est s'appuyer sur une expertise technique,\r\n        une approche rigoureuse et un engagement durable\r\n        au service de la sant\u00e9 et de la performance.\r\n      <\/p>\r\n    <\/div>\r\n\r\n    <!-- Why Grid -->\r\n    <div class=\"why-grid\">\r\n\r\n      <!-- Card 1: Conformit\u00e9 & fiabilit\u00e9 -->\r\n      <article class=\"why-card\" data-aos=\"fade-up\" data-aos-delay=\"100\">\r\n        <div class=\"card-glow\"><\/div>\r\n        <div class=\"card-shine\"><\/div>\r\n        \r\n        <div class=\"icon-wrapper\">\r\n          <div class=\"icon-bg\"><\/div>\r\n          <div class=\"icon-pulse\"><\/div>\r\n          <svg class=\"why-icon\" width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\">\r\n            <path d=\"M22 11.08V12a10 10 0 11-5.93-9.14\"\/>\r\n            <polyline points=\"22 4 12 14.01 9 11.01\"\/>\r\n          <\/svg>\r\n        <\/div>\r\n\r\n        <h3 class=\"card-title\">Conformit\u00e9 & fiabilit\u00e9<\/h3>\r\n        \r\n        <p class=\"card-description\">\r\n          Des \u00e9quipements s\u00e9lectionn\u00e9s aupr\u00e8s de fabricants reconnus,\r\n          conformes aux normes et adapt\u00e9s aux exigences du secteur m\u00e9dical.\r\n        <\/p>\r\n\r\n        <div class=\"card-features\">\r\n          <div class=\"feature-dot\"><\/div>\r\n          <span>Normes internationales<\/span>\r\n        <\/div>\r\n\r\n        <div class=\"card-number\">01<\/div>\r\n      <\/article>\r\n\r\n      <!-- Card 2: Expertise technique -->\r\n      <article class=\"why-card\" data-aos=\"fade-up\" data-aos-delay=\"200\">\r\n        <div class=\"card-glow\"><\/div>\r\n        <div class=\"card-shine\"><\/div>\r\n        \r\n        <div class=\"icon-wrapper\">\r\n          <div class=\"icon-bg\"><\/div>\r\n          <div class=\"icon-pulse\"><\/div>\r\n          <svg class=\"why-icon\" width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\">\r\n            <path d=\"M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z\"\/>\r\n          <\/svg>\r\n        <\/div>\r\n\r\n        <h3 class=\"card-title\">Expertise technique \u00e9prouv\u00e9e<\/h3>\r\n        \r\n        <p class=\"card-description\">\r\n          Une \u00e9quipe comp\u00e9tente capable d'accompagner\r\n          les projets m\u00e9dicaux et technologiques\r\n          de la conception \u00e0 l'exploitation.\r\n        <\/p>\r\n\r\n        <div class=\"card-features\">\r\n          <div class=\"feature-dot\"><\/div>\r\n          <span>\u00c9quipe qualifi\u00e9e<\/span>\r\n        <\/div>\r\n\r\n        <div class=\"card-number\">02<\/div>\r\n      <\/article>\r\n\r\n      <!-- Card 3: Accompagnement complet -->\r\n      <article class=\"why-card\" data-aos=\"fade-up\" data-aos-delay=\"300\">\r\n        <div class=\"card-glow\"><\/div>\r\n        <div class=\"card-shine\"><\/div>\r\n        \r\n        <div class=\"icon-wrapper\">\r\n          <div class=\"icon-bg\"><\/div>\r\n          <div class=\"icon-pulse\"><\/div>\r\n          <svg class=\"why-icon\" width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\">\r\n            <path d=\"M14.7 6.3a1 1 0 000 1.4l1.6 1.6a1 1 0 001.4 0l3.77-3.77a6 6 0 01-7.94 7.94l-6.91 6.91a2.12 2.12 0 01-3-3l6.91-6.91a6 6 0 017.94-7.94l-3.76 3.76z\"\/>\r\n          <\/svg>\r\n        <\/div>\r\n\r\n        <h3 class=\"card-title\">Accompagnement complet<\/h3>\r\n        \r\n        <p class=\"card-description\">\r\n          Conseil, installation, formation, maintenance\r\n          et service apr\u00e8s-vente pour une continuit\u00e9 op\u00e9rationnelle.\r\n        <\/p>\r\n\r\n        <div class=\"card-features\">\r\n          <div class=\"feature-dot\"><\/div>\r\n          <span>Support 360\u00b0<\/span>\r\n        <\/div>\r\n\r\n        <div class=\"card-number\">03<\/div>\r\n      <\/article>\r\n\r\n      <!-- Card 4: Contexte local -->\r\n      <article class=\"why-card\" data-aos=\"fade-up\" data-aos-delay=\"400\">\r\n        <div class=\"card-glow\"><\/div>\r\n        <div class=\"card-shine\"><\/div>\r\n        \r\n        <div class=\"icon-wrapper\">\r\n          <div class=\"icon-bg\"><\/div>\r\n          <div class=\"icon-pulse\"><\/div>\r\n          <svg class=\"why-icon\" width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\">\r\n            <circle cx=\"12\" cy=\"12\" r=\"10\"\/>\r\n            <line x1=\"2\" y1=\"12\" x2=\"22\" y2=\"12\"\/>\r\n            <path d=\"M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z\"\/>\r\n          <\/svg>\r\n        <\/div>\r\n\r\n        <h3 class=\"card-title\">Compr\u00e9hension du contexte local<\/h3>\r\n        \r\n        <p class=\"card-description\">\r\n          Une soci\u00e9t\u00e9 implant\u00e9e au B\u00e9nin,\r\n          avec une connaissance r\u00e9elle des contraintes\r\n          et r\u00e9alit\u00e9s des structures locales.\r\n        <\/p>\r\n\r\n        <div class=\"card-features\">\r\n          <div class=\"feature-dot\"><\/div>\r\n          <span>Expertise locale<\/span>\r\n        <\/div>\r\n\r\n        <div class=\"card-number\">04<\/div>\r\n      <\/article>\r\n\r\n      <!-- Card 5: R\u00e9activit\u00e9 -->\r\n      <article class=\"why-card\" data-aos=\"fade-up\" data-aos-delay=\"500\">\r\n        <div class=\"card-glow\"><\/div>\r\n        <div class=\"card-shine\"><\/div>\r\n        \r\n        <div class=\"icon-wrapper\">\r\n          <div class=\"icon-bg\"><\/div>\r\n          <div class=\"icon-pulse\"><\/div>\r\n          <svg class=\"why-icon\" width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\">\r\n            <polyline points=\"22 12 18 12 15 21 9 3 6 12 2 12\"\/>\r\n          <\/svg>\r\n        <\/div>\r\n\r\n        <h3 class=\"card-title\">R\u00e9activit\u00e9 & engagement<\/h3>\r\n        \r\n        <p class=\"card-description\">\r\n          Des d\u00e9lais ma\u00eetris\u00e9s, une communication claire\r\n          et une implication constante\r\n          tout au long de la collaboration.\r\n        <\/p>\r\n\r\n        <div class=\"card-features\">\r\n          <div class=\"feature-dot\"><\/div>\r\n          <span>R\u00e9ponse rapide<\/span>\r\n        <\/div>\r\n\r\n        <div class=\"card-number\">05<\/div>\r\n      <\/article>\r\n\r\n      <!-- Card 6: Relation durable -->\r\n      <article class=\"why-card\" data-aos=\"fade-up\" data-aos-delay=\"600\">\r\n        <div class=\"card-glow\"><\/div>\r\n        <div class=\"card-shine\"><\/div>\r\n        \r\n        <div class=\"icon-wrapper\">\r\n          <div class=\"icon-bg\"><\/div>\r\n          <div class=\"icon-pulse\"><\/div>\r\n          <svg class=\"why-icon\" width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\">\r\n            <path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"\/>\r\n          <\/svg>\r\n        <\/div>\r\n\r\n        <h3 class=\"card-title\">Relation de confiance durable<\/h3>\r\n        \r\n        <p class=\"card-description\">\r\n          Une vision de partenariat \u00e0 long terme,\r\n          fond\u00e9e sur la transparence,\r\n          l'\u00e9thique et la satisfaction client.\r\n        <\/p>\r\n\r\n        <div class=\"card-features\">\r\n          <div class=\"feature-dot\"><\/div>\r\n          <span>Partenariat long terme<\/span>\r\n        <\/div>\r\n\r\n        <div class=\"card-number\">06<\/div>\r\n      <\/article>\r\n\r\n    <\/div>\r\n\r\n    <!-- Bottom CTA -->\r\n    <div class=\"why-cta\" data-aos=\"fade-up\" data-aos-delay=\"700\">\r\n      <div class=\"cta-icon\">\r\n        <svg width=\"40\" height=\"40\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n          <path d=\"M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z\"\/>\r\n          <polyline points=\"3.27 6.96 12 12.01 20.73 6.96\"\/>\r\n          <line x1=\"12\" y1=\"22.08\" x2=\"12\" y2=\"12\"\/>\r\n        <\/svg>\r\n      <\/div>\r\n      <div class=\"cta-content\">\r\n        <h3>Pr\u00eat \u00e0 transformer votre infrastructure m\u00e9dicale ?<\/h3>\r\n        <p>D\u00e9couvrez comment INOSYSTECH peut r\u00e9pondre \u00e0 vos besoins sp\u00e9cifiques<\/p>\r\n      <\/div>\r\n      <a href=\"https:\/\/inosystech.com\/contact-us\/\" class=\"cta-button\">\r\n        <span>Contactez-nous<\/span>\r\n        <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\">\r\n          <path d=\"M5 12h14M12 5l7 7-7 7\"\/>\r\n        <\/svg>\r\n      <\/a>\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n<\/section>\r\n\r\n<style>\r\n\/* ===== RESET ===== *\/\r\n.inosys-why-ultra * {\r\n  margin: 0;\r\n  padding: 0;\r\n  box-sizing: border-box;\r\n}\r\n\r\n\/* ===== SECTION BASE ===== *\/\r\n.inosys-why-ultra {\r\n  position: relative;\r\n  padding: clamp(100px, 12vw, 160px) 0;\r\n  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 50%, #f8fafc 100%);\r\n  overflow: hidden;\r\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', system-ui, sans-serif;\r\n}\r\n\r\n\/* ===== AMBIENT BACKGROUND ===== *\/\r\n.why-ambient {\r\n  position: absolute;\r\n  inset: 0;\r\n  z-index: 0;\r\n  pointer-events: none;\r\n  overflow: hidden;\r\n}\r\n\r\n.ambient-gradient {\r\n  position: absolute;\r\n  inset: 0;\r\n  background: \r\n    linear-gradient(120deg, rgba(59, 130, 246, 0.05) 0%, transparent 60%),\r\n    radial-gradient(circle at 80% 20%, rgba(139, 92, 246, 0.08) 0%, transparent 50%);\r\n}\r\n\r\n.why-orb {\r\n  position: absolute;\r\n  border-radius: 50%;\r\n  filter: blur(120px);\r\n  animation: floatWhyOrb 35s ease-in-out infinite;\r\n  opacity: 0.12;\r\n}\r\n\r\n.orb-1 {\r\n  width: 600px;\r\n  height: 600px;\r\n  background: radial-gradient(circle, #3b82f6 0%, transparent 70%);\r\n  top: -15%;\r\n  left: -10%;\r\n  animation-delay: 0s;\r\n}\r\n\r\n.orb-2 {\r\n  width: 550px;\r\n  height: 550px;\r\n  background: radial-gradient(circle, #8b5cf6 0%, transparent 70%);\r\n  bottom: -10%;\r\n  right: -10%;\r\n  animation-delay: -17s;\r\n}\r\n\r\n.orb-3 {\r\n  width: 500px;\r\n  height: 500px;\r\n  background: radial-gradient(circle, #06b6d4 0%, transparent 70%);\r\n  top: 40%;\r\n  left: 50%;\r\n  transform: translate(-50%, -50%);\r\n  animation-delay: -28s;\r\n}\r\n\r\n@keyframes floatWhyOrb {\r\n  0%, 100% { transform: translate(0, 0) scale(1); }\r\n  25% { transform: translate(50px, -40px) scale(1.1); }\r\n  50% { transform: translate(-30px, 30px) scale(0.95); }\r\n  75% { transform: translate(40px, 20px) scale(1.05); }\r\n}\r\n\r\n.hexagon-pattern {\r\n  position: absolute;\r\n  inset: 0;\r\n  background-image: \r\n    repeating-linear-gradient(60deg, rgba(59, 130, 246, 0.02) 0px, rgba(59, 130, 246, 0.02) 1px, transparent 1px, transparent 60px),\r\n    repeating-linear-gradient(-60deg, rgba(59, 130, 246, 0.02) 0px, rgba(59, 130, 246, 0.02) 1px, transparent 1px, transparent 60px);\r\n  opacity: 0.5;\r\n}\r\n\r\n\/* ===== CONTAINER ===== *\/\r\n.why-container {\r\n  position: relative;\r\n  z-index: 1;\r\n  max-width: 1280px;\r\n  margin: 0 auto;\r\n  padding: 0 clamp(20px, 5vw, 40px);\r\n}\r\n\r\n\/* ===== HEADER ===== *\/\r\n.why-header {\r\n  max-width: 820px;\r\n  margin: 0 auto 90px;\r\n  text-align: center;\r\n}\r\n\r\n.header-badge {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 10px;\r\n  padding: 12px 24px;\r\n  background: rgba(59, 130, 246, 0.08);\r\n  backdrop-filter: blur(10px);\r\n  border: 1px solid rgba(59, 130, 246, 0.15);\r\n  border-radius: 100px;\r\n  margin-bottom: 24px;\r\n  color: #3b82f6;\r\n  font-size: 0.85rem;\r\n  font-weight: 600;\r\n  letter-spacing: 0.05em;\r\n  text-transform: uppercase;\r\n}\r\n\r\n.badge-icon {\r\n  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\r\n}\r\n\r\n@keyframes pulse {\r\n  0%, 100% { opacity: 1; }\r\n  50% { opacity: 0.5; }\r\n}\r\n\r\n.why-title {\r\n  font-size: clamp(2.1rem, 4vw, 3.4rem);\r\n  font-weight: 800;\r\n  line-height: 1.15;\r\n  margin-bottom: 24px;\r\n  letter-spacing: -0.02em;\r\n}\r\n\r\n.title-line {\r\n  display: block;\r\n  color: #0f172a;\r\n}\r\n\r\n.gradient-text {\r\n  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);\r\n  -webkit-background-clip: text;\r\n  -webkit-text-fill-color: transparent;\r\n  background-clip: text;\r\n}\r\n\r\n.why-description {\r\n  font-size: clamp(1.05rem, 2vw, 1.2rem);\r\n  line-height: 1.75;\r\n  color: #64748b;\r\n  max-width: 750px;\r\n  margin: 0 auto;\r\n}\r\n\r\n\/* ===== WHY GRID ===== *\/\r\n.why-grid {\r\n  display: grid;\r\n  grid-template-columns: repeat(3, 1fr);\r\n  gap: 32px;\r\n  margin-bottom: 80px;\r\n}\r\n\r\n\/* ===== WHY CARDS ===== *\/\r\n.why-card {\r\n  position: relative;\r\n  background: rgba(255, 255, 255, 0.8);\r\n  backdrop-filter: blur(20px);\r\n  border: 1px solid rgba(148, 163, 184, 0.15);\r\n  border-radius: 28px;\r\n  padding: 44px 36px;\r\n  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);\r\n  overflow: hidden;\r\n  isolation: isolate;\r\n}\r\n\r\n.why-card::before {\r\n  content: '';\r\n  position: absolute;\r\n  inset: 0;\r\n  background: linear-gradient(135deg, rgba(59, 130, 246, 0.03) 0%, transparent 100%);\r\n  opacity: 0;\r\n  transition: opacity 0.5s ease;\r\n  z-index: -1;\r\n}\r\n\r\n.why-card:hover {\r\n  transform: translateY(-16px) scale(1.02);\r\n  border-color: rgba(59, 130, 246, 0.3);\r\n  box-shadow: \r\n    0 30px 80px rgba(59, 130, 246, 0.2),\r\n    0 0 0 1px rgba(59, 130, 246, 0.1);\r\n}\r\n\r\n.why-card:hover::before {\r\n  opacity: 1;\r\n}\r\n\r\n\/* Card Glow *\/\r\n.card-glow {\r\n  position: absolute;\r\n  top: -50%;\r\n  left: -50%;\r\n  width: 200%;\r\n  height: 200%;\r\n  background: radial-gradient(\r\n    circle,\r\n    rgba(59, 130, 246, 0.2) 0%,\r\n    transparent 50%\r\n  );\r\n  opacity: 0;\r\n  transition: opacity 0.5s ease;\r\n  pointer-events: none;\r\n  z-index: -1;\r\n}\r\n\r\n.why-card:hover .card-glow {\r\n  opacity: 0.6;\r\n}\r\n\r\n\/* Card Shine *\/\r\n.card-shine {\r\n  position: absolute;\r\n  top: 0;\r\n  left: -100%;\r\n  width: 100%;\r\n  height: 100%;\r\n  background: linear-gradient(\r\n    90deg,\r\n    transparent 0%,\r\n    rgba(255, 255, 255, 0.4) 50%,\r\n    transparent 100%\r\n  );\r\n  transition: left 0.8s ease;\r\n}\r\n\r\n.why-card:hover .card-shine {\r\n  left: 100%;\r\n}\r\n\r\n\/* Icon Wrapper *\/\r\n.icon-wrapper {\r\n  position: relative;\r\n  width: 80px;\r\n  height: 80px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  margin-bottom: 28px;\r\n}\r\n\r\n.icon-bg {\r\n  position: absolute;\r\n  inset: 0;\r\n  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);\r\n  border-radius: 20px;\r\n  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);\r\n  box-shadow: 0 10px 30px rgba(59, 130, 246, 0.3);\r\n}\r\n\r\n.why-card:hover .icon-bg {\r\n  transform: scale(1.15) rotate(10deg);\r\n  box-shadow: 0 20px 50px rgba(59, 130, 246, 0.4);\r\n}\r\n\r\n.icon-pulse {\r\n  position: absolute;\r\n  inset: -8px;\r\n  border: 2px solid rgba(59, 130, 246, 0.3);\r\n  border-radius: 24px;\r\n  opacity: 0;\r\n  transition: all 0.5s ease;\r\n}\r\n\r\n.why-card:hover .icon-pulse {\r\n  opacity: 1;\r\n  animation: iconPulse 2s ease-out infinite;\r\n}\r\n\r\n@keyframes iconPulse {\r\n  0% {\r\n    transform: scale(1);\r\n    opacity: 1;\r\n  }\r\n  100% {\r\n    transform: scale(1.2);\r\n    opacity: 0;\r\n  }\r\n}\r\n\r\n.why-icon {\r\n  position: relative;\r\n  z-index: 1;\r\n  color: #ffffff;\r\n  transition: transform 0.5s ease;\r\n}\r\n\r\n.why-card:hover .why-icon {\r\n  transform: scale(1.2) rotate(-10deg);\r\n}\r\n\r\n\/* Card Content *\/\r\n.card-title {\r\n  font-size: 1.35rem;\r\n  font-weight: 700;\r\n  color: #0f172a;\r\n  margin-bottom: 16px;\r\n  line-height: 1.3;\r\n  transition: color 0.3s ease;\r\n}\r\n\r\n.why-card:hover .card-title {\r\n  color: #3b82f6;\r\n}\r\n\r\n.card-description {\r\n  font-size: 0.95rem;\r\n  line-height: 1.7;\r\n  color: #64748b;\r\n  margin-bottom: 24px;\r\n  min-height: 85px;\r\n}\r\n\r\n\/* Card Features *\/\r\n.card-features {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 10px;\r\n  font-size: 0.85rem;\r\n  color: #3b82f6;\r\n  font-weight: 600;\r\n}\r\n\r\n.feature-dot {\r\n  width: 8px;\r\n  height: 8px;\r\n  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);\r\n  border-radius: 50%;\r\n  box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);\r\n  animation: dotPulse 2s ease-in-out infinite;\r\n}\r\n\r\n@keyframes dotPulse {\r\n  0%, 100% { transform: scale(1); opacity: 1; }\r\n  50% { transform: scale(1.3); opacity: 0.7; }\r\n}\r\n\r\n\/* Card Number *\/\r\n.card-number {\r\n  position: absolute;\r\n  bottom: 24px;\r\n  right: 32px;\r\n  font-size: 4rem;\r\n  font-weight: 900;\r\n  background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);\r\n  -webkit-background-clip: text;\r\n  -webkit-text-fill-color: transparent;\r\n  background-clip: text;\r\n  opacity: 0.25;\r\n  line-height: 1;\r\n}\r\n\r\n\/* ===== BOTTOM CTA ===== *\/\r\n.why-cta {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 32px;\r\n  padding: 48px;\r\n  background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(139, 92, 246, 0.08) 100%);\r\n  border: 1px solid rgba(59, 130, 246, 0.2);\r\n  border-radius: 28px;\r\n  position: relative;\r\n  overflow: hidden;\r\n}\r\n\r\n.why-cta::before {\r\n  content: '';\r\n  position: absolute;\r\n  inset: 0;\r\n  background: url(\"data:image\/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%233b82f6' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'\/%3E%3C\/g%3E%3C\/g%3E%3C\/svg%3E\");\r\n  opacity: 0.3;\r\n  animation: patternSlide 20s linear infinite;\r\n}\r\n\r\n@keyframes patternSlide {\r\n  0% { transform: translate(0, 0); }\r\n  100% { transform: translate(60px, 60px); }\r\n}\r\n\r\n.cta-icon {\r\n  width: 80px;\r\n  height: 80px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);\r\n  border-radius: 20px;\r\n  flex-shrink: 0;\r\n  box-shadow: 0 10px 30px rgba(59, 130, 246, 0.3);\r\n  transition: all 0.4s ease;\r\n  position: relative;\r\n  z-index: 1;\r\n}\r\n\r\n.why-cta:hover .cta-icon {\r\n  transform: scale(1.1) rotate(5deg);\r\n  box-shadow: 0 20px 50px rgba(59, 130, 246, 0.4);\r\n}\r\n\r\n.cta-icon svg {\r\n  color: #ffffff;\r\n}\r\n\r\n.cta-content {\r\n  flex: 1;\r\n  position: relative;\r\n  z-index: 1;\r\n}\r\n\r\n.cta-content h3 {\r\n  font-size: clamp(1.3rem, 3vw, 1.6rem);\r\n  font-weight: 700;\r\n  color: #0f172a;\r\n  margin-bottom: 8px;\r\n}\r\n\r\n.cta-content p {\r\n  font-size: 1rem;\r\n  color: #64748b;\r\n  line-height: 1.6;\r\n}\r\n\r\n.cta-button {\r\n  position: relative;\r\n  z-index: 1;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 12px;\r\n  padding: 18px 36px;\r\n  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);\r\n  color: #ffffff;\r\n  font-size: 1rem;\r\n  font-weight: 600;\r\n  text-decoration: none;\r\n  border-radius: 14px;\r\n  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\r\n  box-shadow: 0 10px 30px rgba(59, 130, 246, 0.3);\r\n  white-space: nowrap;\r\n  flex-shrink: 0;\r\n}\r\n\r\n.cta-button:hover {\r\n  transform: translateY(-3px);\r\n  box-shadow: 0 20px 50px rgba(59, 130, 246, 0.4);\r\n}\r\n\r\n.cta-button svg {\r\n  transition: transform 0.3s ease;\r\n}\r\n\r\n.cta-button:hover svg {\r\n  transform: translateX(4px);\r\n}\r\n\r\n\/* ===== AOS ANIMATIONS ===== *\/\r\n[data-aos=\"fade-up\"] {\r\n  opacity: 0;\r\n  transform: translateY(30px);\r\n  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);\r\n}\r\n\r\n[data-aos=\"fade-up\"].aos-animate {\r\n  opacity: 1;\r\n  transform: translateY(0);\r\n}\r\n\r\n\/* ===== RESPONSIVE ===== *\/\r\n@media (max-width: 1024px) {\r\n  .why-grid {\r\n    grid-template-columns: repeat(2, 1fr);\r\n    gap: 24px;\r\n  }\r\n\r\n  .why-cta {\r\n    flex-direction: column;\r\n    text-align: center;\r\n    padding: 40px 32px;\r\n  }\r\n}\r\n\r\n@media (max-width: 768px) {\r\n  .inosys-why-ultra {\r\n    padding: clamp(80px, 10vw, 120px) 0;\r\n  }\r\n\r\n  .why-header {\r\n    margin-bottom: 60px;\r\n  }\r\n\r\n  .why-title {\r\n    font-size: clamp(2rem, 5vw, 2.8rem);\r\n  }\r\n\r\n  .why-grid {\r\n    grid-template-columns: 1fr;\r\n    margin-bottom: 60px;\r\n  }\r\n\r\n  .why-card {\r\n    padding: 40px 32px;\r\n  }\r\n\r\n  .icon-wrapper {\r\n    width: 72px;\r\n    height: 72px;\r\n  }\r\n\r\n  .card-title {\r\n    font-size: 1.25rem;\r\n  }\r\n\r\n  .card-number {\r\n    font-size: 3rem;\r\n  }\r\n\r\n  .why-cta {\r\n    padding: 32px 24px;\r\n    gap: 24px;\r\n  }\r\n\r\n  .cta-icon {\r\n    width: 72px;\r\n    height: 72px;\r\n  }\r\n\r\n  .cta-button {\r\n    width: 100%;\r\n    justify-content: center;\r\n  }\r\n\r\n  .why-orb {\r\n    filter: blur(80px);\r\n  }\r\n\r\n  .orb-1, .orb-2 {\r\n    width: 400px;\r\n    height: 400px;\r\n  }\r\n\r\n  .orb-3 {\r\n    width: 350px;\r\n    height: 350px;\r\n  }\r\n}\r\n\r\n@media (max-width: 480px) {\r\n  .header-badge {\r\n    font-size: 0.75rem;\r\n    padding: 10px 20px;\r\n  }\r\n\r\n  .card-features {\r\n    font-size: 0.8rem;\r\n  }\r\n}\r\n\r\n\/* ===== ACCESSIBILITY ===== *\/\r\n@media (prefers-reduced-motion: reduce) {\r\n  *,\r\n  *::before,\r\n  *::after {\r\n    animation-duration: 0.01ms !important;\r\n    animation-iteration-count: 1 !important;\r\n    transition-duration: 0.01ms !important;\r\n  }\r\n\r\n  .why-orb,\r\n  .badge-icon,\r\n  .feature-dot,\r\n  .icon-pulse {\r\n    animation: none;\r\n  }\r\n}\r\n\r\n\/* Focus states *\/\r\n.why-card:focus-within {\r\n  outline: 2px solid #3b82f6;\r\n  outline-offset: 4px;\r\n}\r\n\r\n.cta-button:focus-visible {\r\n  outline: 2px solid #ffffff;\r\n  outline-offset: 4px;\r\n}\r\n<\/style>\r\n\r\n<script>\r\n(function() {\r\n  'use strict';\r\n\r\n  \/\/ ===== SCROLL ANIMATIONS =====\r\n  const animateOnScroll = () => {\r\n    const elements = document.querySelectorAll('[data-aos]');\r\n    \r\n    const observer = new IntersectionObserver((entries) => {\r\n      entries.forEach(entry => {\r\n        if (entry.isIntersecting) {\r\n          entry.target.classList.add('aos-animate');\r\n          observer.unobserve(entry.target);\r\n        }\r\n      });\r\n    }, {\r\n      threshold: 0.15,\r\n      rootMargin: '0px 0px -50px 0px'\r\n    });\r\n\r\n    elements.forEach(el => observer.observe(el));\r\n  };\r\n\r\n  \/\/ ===== CARD GLOW FOLLOW MOUSE =====\r\n  const initCardGlow = () => {\r\n    const cards = document.querySelectorAll('.why-card');\r\n\r\n    cards.forEach(card => {\r\n      const glow = card.querySelector('.card-glow');\r\n\r\n      card.addEventListener('mousemove', (e) => {\r\n        const rect = card.getBoundingClientRect();\r\n        const x = e.clientX - rect.left;\r\n        const y = e.clientY - rect.top;\r\n\r\n        glow.style.background = `radial-gradient(\r\n          circle at ${x}px ${y}px,\r\n          rgba(59, 130, 246, 0.3) 0%,\r\n          transparent 50%\r\n        )`;\r\n      });\r\n    });\r\n  };\r\n\r\n  \/\/ ===== 3D CARD TILT EFFECT (Desktop Only) =====\r\n  const initCardTilt = () => {\r\n    if (window.innerWidth <= 768) return;\r\n\r\n    const cards = document.querySelectorAll('.why-card');\r\n\r\n    cards.forEach(card => {\r\n      card.addEventListener('mousemove', (e) => {\r\n        const rect = card.getBoundingClientRect();\r\n        const x = e.clientX - rect.left;\r\n        const y = e.clientY - rect.top;\r\n\r\n        const centerX = rect.width \/ 2;\r\n        const centerY = rect.height \/ 2;\r\n\r\n        const rotateX = ((y - centerY) \/ centerY) * -5;\r\n        const rotateY = ((x - centerX) \/ centerX) * 5;\r\n\r\n        card.style.transform = `\r\n          translateY(-16px) \r\n          scale(1.02)\r\n          perspective(1000px) \r\n          rotateX(${rotateX}deg) \r\n          rotateY(${rotateY}deg)\r\n        `;\r\n      });\r\n\r\n      card.addEventListener('mouseleave', () => {\r\n        card.style.transform = '';\r\n      });\r\n    });\r\n  };\r\n\r\n  \/\/ ===== MAGNETIC BUTTON EFFECT (Desktop Only) =====\r\n  const initMagneticButton = () => {\r\n    if (window.innerWidth <= 768) return;\r\n\r\n    const button = document.querySelector('.cta-button');\r\n    if (!button) return;\r\n\r\n    button.addEventListener('mousemove', (e) => {\r\n      const rect = button.getBoundingClientRect();\r\n      const x = e.clientX - rect.left - rect.width \/ 2;\r\n      const y = e.clientY - rect.top - rect.height \/ 2;\r\n\r\n      button.style.transform = `\r\n        translateY(-3px) \r\n        translate(${x * 0.2}px, ${y * 0.2}px)\r\n      `;\r\n    });\r\n\r\n    button.addEventListener('mouseleave', () => {\r\n      button.style.transform = '';\r\n    });\r\n  };\r\n\r\n  \/\/ ===== INITIALIZE =====\r\n  const init = () => {\r\n    animateOnScroll();\r\n    initCardGlow();\r\n    initCardTilt();\r\n    initMagneticButton();\r\n  };\r\n\r\n  if (document.readyState === 'loading') {\r\n    document.addEventListener('DOMContentLoaded', init);\r\n  } else {\r\n    init();\r\n  }\r\n\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-cb63761 elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"cb63761\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-3170f40\" data-id=\"3170f40\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-9060575 elementor-widget elementor-widget-html\" data-id=\"9060575\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- INOSYSTECH ULTRA FINAL CTA SECTION -->\r\n<section class=\"inosys-final-cta-ultra\">\r\n  \r\n  <!-- Background Image with Parallax -->\r\n  <div class=\"cta-bg-layer\" style=\"background-image: url('https:\/\/inosystech.com\/wp-content\/uploads\/2025\/02\/Untitled-design-2025-02-28T181607.456.png');\"><\/div>\r\n  \r\n  <!-- Smart Gradient Overlay -->\r\n  <div class=\"cta-smart-overlay\"><\/div>\r\n\r\n  <div class=\"final-cta-container\">\r\n\r\n    <!-- Glass Content Card -->\r\n    <div class=\"glass-cta-card\" data-aos=\"fade-up\">\r\n      \r\n      <div class=\"card-glow\"><\/div>\r\n      \r\n      <div class=\"content-badge\">\r\n        <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n          <path d=\"M13 2L3 14h9l-1 8 10-12h-9l1-8z\"\/>\r\n        <\/svg>\r\n        <span>Pr\u00eat \u00e0 d\u00e9marrer<\/span>\r\n      <\/div>\r\n\r\n      <h2 class=\"cta-headline\">\r\n        Transformez votre infrastructure m\u00e9dicale\r\n      <\/h2>\r\n\r\n      <p class=\"cta-text\">\r\n        \u00c9quipements certifi\u00e9s \u2022 Installation professionnelle \u2022 Support 24\/7\r\n      <\/p>\r\n\r\n      <!-- Action Buttons -->\r\n      <div class=\"cta-actions\">\r\n        <a href=\"https:\/\/inosystech.com\/get-quote\/?quote_form=1\" class=\"action-btn primary\">\r\n          <span class=\"btn-shine\"><\/span>\r\n          <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\">\r\n            <path d=\"M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z\"\/>\r\n            <polyline points=\"14 2 14 8 20 8\"\/>\r\n          <\/svg>\r\n          <span>Demander un devis gratuit<\/span>\r\n          <svg class=\"arrow\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\">\r\n            <path d=\"M5 12h14M12 5l7 7-7 7\"\/>\r\n          <\/svg>\r\n        <\/a>\r\n\r\n        <a href=\"https:\/\/inosystech.com\/catalogue\/\" class=\"action-btn secondary\">\r\n          <span class=\"btn-shine\"><\/span>\r\n          <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\">\r\n            <path d=\"M2 3h6a4 4 0 014 4v14a3 3 0 00-3-3H2z\"\/>\r\n            <path d=\"M22 3h-6a4 4 0 00-4 4v14a3 3 0 013-3h7z\"\/>\r\n          <\/svg>\r\n          <span>Explorer le catalogue<\/span>\r\n          <svg class=\"arrow\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\">\r\n            <path d=\"M5 12h14M12 5l7 7-7 7\"\/>\r\n          <\/svg>\r\n        <\/a>\r\n      <\/div>\r\n\r\n      <!-- Trust Pills -->\r\n      <div class=\"trust-pills\">\r\n        <div class=\"pill\">\r\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n            <polyline points=\"20 6 9 17 4 12\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\"\/>\r\n          <\/svg>\r\n          <span>R\u00e9ponse en 24h<\/span>\r\n        <\/div>\r\n        <div class=\"pill\">\r\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n            <polyline points=\"20 6 9 17 4 12\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\"\/>\r\n          <\/svg>\r\n          <span>15+ ans d'expertise<\/span>\r\n        <\/div>\r\n        <div class=\"pill\">\r\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n            <polyline points=\"20 6 9 17 4 12\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\"\/>\r\n          <\/svg>\r\n          <span>500+ clients satisfaits<\/span>\r\n        <\/div>\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n<\/section>\r\n\r\n<style>\r\n\/* ===== RESET ===== *\/\r\n.inosys-final-cta-ultra * {\r\n  margin: 0;\r\n  padding: 0;\r\n  box-sizing: border-box;\r\n}\r\n\r\n\/* ===== SECTION BASE ===== *\/\r\n.inosys-final-cta-ultra {\r\n  position: relative;\r\n  min-height: 100vh;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  overflow: hidden;\r\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', system-ui, sans-serif;\r\n  padding: clamp(60px, 8vw, 100px) 0;\r\n}\r\n\r\n\/* ===== BACKGROUND IMAGE ===== *\/\r\n.cta-bg-layer {\r\n  position: absolute;\r\n  inset: 0;\r\n  background-size: cover;\r\n  background-position: center;\r\n  background-repeat: no-repeat;\r\n  z-index: 0;\r\n  animation: kenBurns 30s ease-in-out infinite alternate;\r\n}\r\n\r\n@keyframes kenBurns {\r\n  0% { transform: scale(1) translate(0, 0); }\r\n  100% { transform: scale(1.1) translate(20px, 10px); }\r\n}\r\n\r\n\/* ===== SMART OVERLAY ===== *\/\r\n.cta-smart-overlay {\r\n  position: absolute;\r\n  inset: 0;\r\n  z-index: 1;\r\n  background: \r\n    radial-gradient(\r\n      ellipse at top left,\r\n      rgba(30, 64, 175, 0.75) 0%,\r\n      transparent 60%\r\n    ),\r\n    radial-gradient(\r\n      ellipse at bottom right,\r\n      rgba(59, 130, 246, 0.7) 0%,\r\n      transparent 60%\r\n    ),\r\n    linear-gradient(\r\n      135deg,\r\n      rgba(0, 0, 0, 0.3) 0%,\r\n      rgba(0, 0, 0, 0.5) 100%\r\n    );\r\n  backdrop-filter: blur(2px);\r\n}\r\n\r\n\/* ===== CONTAINER ===== *\/\r\n.final-cta-container {\r\n  position: relative;\r\n  z-index: 2;\r\n  max-width: 900px;\r\n  margin: 0 auto;\r\n  padding: 0 clamp(20px, 5vw, 40px);\r\n  width: 100%;\r\n}\r\n\r\n\/* ===== GLASS CARD ===== *\/\r\n.glass-cta-card {\r\n  position: relative;\r\n  background: rgba(255, 255, 255, 0.95);\r\n  backdrop-filter: blur(40px) saturate(180%);\r\n  border: 1px solid rgba(255, 255, 255, 0.3);\r\n  border-radius: 32px;\r\n  padding: clamp(48px, 8vw, 80px) clamp(32px, 6vw, 64px);\r\n  box-shadow: \r\n    0 40px 120px rgba(0, 0, 0, 0.4),\r\n    0 0 0 1px rgba(255, 255, 255, 0.1) inset;\r\n  text-align: center;\r\n  overflow: hidden;\r\n  animation: cardFloat 6s ease-in-out infinite;\r\n}\r\n\r\n@keyframes cardFloat {\r\n  0%, 100% { transform: translateY(0) scale(1); }\r\n  50% { transform: translateY(-10px) scale(1.01); }\r\n}\r\n\r\n.card-glow {\r\n  position: absolute;\r\n  inset: -100px;\r\n  background: radial-gradient(\r\n    circle at 50% 0%,\r\n    rgba(59, 130, 246, 0.3) 0%,\r\n    transparent 50%\r\n  );\r\n  filter: blur(60px);\r\n  opacity: 0.6;\r\n  animation: glowPulse 4s ease-in-out infinite;\r\n}\r\n\r\n@keyframes glowPulse {\r\n  0%, 100% { opacity: 0.4; }\r\n  50% { opacity: 0.7; }\r\n}\r\n\r\n\/* ===== BADGE ===== *\/\r\n.content-badge {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 8px;\r\n  padding: 10px 24px;\r\n  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);\r\n  color: #ffffff;\r\n  border-radius: 100px;\r\n  font-size: 0.8rem;\r\n  font-weight: 700;\r\n  letter-spacing: 0.05em;\r\n  text-transform: uppercase;\r\n  margin-bottom: 28px;\r\n  box-shadow: 0 10px 30px rgba(59, 130, 246, 0.4);\r\n  animation: badgeBounce 2s ease-in-out infinite;\r\n}\r\n\r\n@keyframes badgeBounce {\r\n  0%, 100% { transform: translateY(0); }\r\n  50% { transform: translateY(-5px); }\r\n}\r\n\r\n\/* ===== HEADLINE ===== *\/\r\n.cta-headline {\r\n  font-size: clamp(2.2rem, 6vw, 4rem);\r\n  font-weight: 900;\r\n  line-height: 1.1;\r\n  margin-bottom: 24px;\r\n  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);\r\n  -webkit-background-clip: text;\r\n  -webkit-text-fill-color: transparent;\r\n  background-clip: text;\r\n  letter-spacing: -0.03em;\r\n}\r\n\r\n\/* ===== TEXT ===== *\/\r\n.cta-text {\r\n  font-size: clamp(1.1rem, 2.5vw, 1.3rem);\r\n  color: #64748b;\r\n  margin-bottom: 40px;\r\n  font-weight: 500;\r\n  line-height: 1.6;\r\n}\r\n\r\n\/* ===== ACTION BUTTONS ===== *\/\r\n.cta-actions {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 16px;\r\n  margin-bottom: 40px;\r\n}\r\n\r\n.action-btn {\r\n  position: relative;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: 12px;\r\n  padding: 20px 40px;\r\n  border-radius: 16px;\r\n  font-size: 1.05rem;\r\n  font-weight: 700;\r\n  text-decoration: none;\r\n  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\r\n  overflow: hidden;\r\n  border: 2px solid transparent;\r\n}\r\n\r\n\/* Shine Effect *\/\r\n.btn-shine {\r\n  position: absolute;\r\n  top: 0;\r\n  left: -100%;\r\n  width: 100%;\r\n  height: 100%;\r\n  background: linear-gradient(\r\n    90deg,\r\n    transparent 0%,\r\n    rgba(255, 255, 255, 0.4) 50%,\r\n    transparent 100%\r\n  );\r\n  transition: left 0.6s ease;\r\n}\r\n\r\n.action-btn:hover .btn-shine {\r\n  left: 100%;\r\n}\r\n\r\n\/* Primary Button *\/\r\n.action-btn.primary {\r\n  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);\r\n  color: #ffffff;\r\n  box-shadow: \r\n    0 10px 40px rgba(59, 130, 246, 0.4),\r\n    0 0 0 0 rgba(59, 130, 246, 0);\r\n  animation: primaryPulse 3s ease-in-out infinite;\r\n}\r\n\r\n@keyframes primaryPulse {\r\n  0%, 100% {\r\n    box-shadow: \r\n      0 10px 40px rgba(59, 130, 246, 0.4),\r\n      0 0 0 0 rgba(59, 130, 246, 0);\r\n  }\r\n  50% {\r\n    box-shadow: \r\n      0 10px 40px rgba(59, 130, 246, 0.4),\r\n      0 0 0 8px rgba(59, 130, 246, 0.2);\r\n  }\r\n}\r\n\r\n.action-btn.primary:hover {\r\n  transform: translateY(-4px);\r\n  box-shadow: 0 20px 60px rgba(59, 130, 246, 0.5);\r\n}\r\n\r\n\/* Secondary Button *\/\r\n.action-btn.secondary {\r\n  background: rgba(255, 255, 255, 0.5);\r\n  backdrop-filter: blur(10px);\r\n  color: #1e40af;\r\n  border-color: rgba(59, 130, 246, 0.3);\r\n  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);\r\n}\r\n\r\n.action-btn.secondary:hover {\r\n  background: rgba(255, 255, 255, 0.8);\r\n  border-color: rgba(59, 130, 246, 0.5);\r\n  transform: translateY(-4px);\r\n  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);\r\n}\r\n\r\n.action-btn .arrow {\r\n  transition: transform 0.3s ease;\r\n}\r\n\r\n.action-btn:hover .arrow {\r\n  transform: translateX(4px);\r\n}\r\n\r\n.action-btn:active {\r\n  transform: translateY(-2px);\r\n}\r\n\r\n\/* ===== TRUST PILLS ===== *\/\r\n.trust-pills {\r\n  display: flex;\r\n  justify-content: center;\r\n  flex-wrap: wrap;\r\n  gap: 12px;\r\n}\r\n\r\n.pill {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 8px;\r\n  padding: 10px 20px;\r\n  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);\r\n  border: 1px solid rgba(59, 130, 246, 0.2);\r\n  border-radius: 100px;\r\n  font-size: 0.85rem;\r\n  font-weight: 600;\r\n  color: #1e40af;\r\n  transition: all 0.3s ease;\r\n}\r\n\r\n.pill:hover {\r\n  background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(139, 92, 246, 0.2) 100%);\r\n  border-color: rgba(59, 130, 246, 0.4);\r\n  transform: translateY(-2px);\r\n}\r\n\r\n.pill svg {\r\n  color: #3b82f6;\r\n}\r\n\r\n\/* ===== AOS ANIMATIONS ===== *\/\r\n[data-aos=\"fade-up\"] {\r\n  opacity: 0;\r\n  transform: translateY(40px);\r\n  transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);\r\n}\r\n\r\n[data-aos=\"fade-up\"].aos-animate {\r\n  opacity: 1;\r\n  transform: translateY(0);\r\n}\r\n\r\n\/* ===== RESPONSIVE ===== *\/\r\n@media (max-width: 768px) {\r\n  .inosys-final-cta-ultra {\r\n    min-height: auto;\r\n    padding: clamp(80px, 12vw, 120px) 0;\r\n  }\r\n\r\n  .glass-cta-card {\r\n    padding: clamp(40px, 8vw, 60px) clamp(28px, 6vw, 40px);\r\n    border-radius: 24px;\r\n  }\r\n\r\n  .cta-headline {\r\n    font-size: clamp(1.8rem, 8vw, 2.5rem);\r\n    margin-bottom: 20px;\r\n  }\r\n\r\n  .cta-text {\r\n    font-size: 1rem;\r\n    margin-bottom: 32px;\r\n  }\r\n\r\n  .action-btn {\r\n    padding: 18px 32px;\r\n    font-size: 1rem;\r\n  }\r\n\r\n  .trust-pills {\r\n    flex-direction: column;\r\n    align-items: stretch;\r\n  }\r\n\r\n  .pill {\r\n    justify-content: center;\r\n  }\r\n}\r\n\r\n@media (max-width: 480px) {\r\n  .content-badge {\r\n    font-size: 0.75rem;\r\n    padding: 8px 20px;\r\n  }\r\n\r\n  .cta-actions {\r\n    gap: 12px;\r\n  }\r\n\r\n  .action-btn {\r\n    padding: 16px 28px;\r\n    font-size: 0.95rem;\r\n  }\r\n}\r\n\r\n\/* ===== ACCESSIBILITY ===== *\/\r\n@media (prefers-reduced-motion: reduce) {\r\n  *,\r\n  *::before,\r\n  *::after {\r\n    animation-duration: 0.01ms !important;\r\n    animation-iteration-count: 1 !important;\r\n    transition-duration: 0.01ms !important;\r\n  }\r\n\r\n  .cta-bg-layer,\r\n  .glass-cta-card,\r\n  .content-badge,\r\n  .card-glow {\r\n    animation: none;\r\n  }\r\n}\r\n\r\n\/* Focus states *\/\r\n.action-btn:focus-visible {\r\n  outline: 3px solid #3b82f6;\r\n  outline-offset: 4px;\r\n}\r\n<\/style>\r\n\r\n<script>\r\n(function() {\r\n  'use strict';\r\n\r\n  \/\/ ===== SCROLL ANIMATIONS =====\r\n  const animateOnScroll = () => {\r\n    const elements = document.querySelectorAll('[data-aos]');\r\n    \r\n    const observer = new IntersectionObserver((entries) => {\r\n      entries.forEach(entry => {\r\n        if (entry.isIntersecting) {\r\n          entry.target.classList.add('aos-animate');\r\n          observer.unobserve(entry.target);\r\n        }\r\n      });\r\n    }, {\r\n      threshold: 0.2\r\n    });\r\n\r\n    elements.forEach(el => observer.observe(el));\r\n  };\r\n\r\n  \/\/ ===== PARALLAX BACKGROUND =====\r\n  const initParallax = () => {\r\n    const section = document.querySelector('.inosys-final-cta-ultra');\r\n    const bgLayer = document.querySelector('.cta-bg-layer');\r\n    \r\n    if (!section || !bgLayer) return;\r\n\r\n    window.addEventListener('scroll', () => {\r\n      const scrolled = window.pageYOffset;\r\n      const sectionTop = section.offsetTop;\r\n      const sectionHeight = section.offsetHeight;\r\n\r\n      if (scrolled > sectionTop - window.innerHeight && scrolled < sectionTop + sectionHeight) {\r\n        const yPos = (scrolled - sectionTop) * 0.3;\r\n        bgLayer.style.transform = `translateY(${yPos}px) scale(1.1)`;\r\n      }\r\n    });\r\n  };\r\n\r\n  \/\/ ===== MAGNETIC BUTTONS (Desktop Only) =====\r\n  const initMagneticButtons = () => {\r\n    if (window.innerWidth <= 768) return;\r\n\r\n    const buttons = document.querySelectorAll('.action-btn');\r\n\r\n    buttons.forEach(button => {\r\n      button.addEventListener('mousemove', (e) => {\r\n        const rect = button.getBoundingClientRect();\r\n        const x = e.clientX - rect.left - rect.width \/ 2;\r\n        const y = e.clientY - rect.top - rect.height \/ 2;\r\n\r\n        button.style.transform = `translateY(-4px) translate(${x * 0.1}px, ${y * 0.1}px)`;\r\n      });\r\n\r\n      button.addEventListener('mouseleave', () => {\r\n        button.style.transform = '';\r\n      });\r\n    });\r\n  };\r\n\r\n  \/\/ ===== INITIALIZE =====\r\n  const init = () => {\r\n    animateOnScroll();\r\n    initParallax();\r\n    initMagneticButtons();\r\n  };\r\n\r\n  if (document.readyState === 'loading') {\r\n    document.addEventListener('DOMContentLoaded', init);\r\n  } else {\r\n    init();\r\n  }\r\n\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Solutions technologiques &#038; \u00e9quipements m\u00e9dicaux L&#8217;excellence technologique au service de la sant\u00e9 INOSYSTECH accompagne les laboratoires, h\u00f4pitaux et institutions avec des solutions fiables en informatique et \u00e9quipements m\u00e9dicaux de pointe. Demander un devis Explorer nos \u00e9quipements 500+ Installations 98% Satisfaction 15+ Ann\u00e9es d&#8217;expertise Laboratoires &#038; diagnostic m\u00e9dical Des \u00e9quipements de laboratoire pour un diagnostic pr\u00e9cis [&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-3283","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/inosystech.com\/fr\/wp-json\/wp\/v2\/pages\/3283","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/inosystech.com\/fr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/inosystech.com\/fr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/inosystech.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/inosystech.com\/fr\/wp-json\/wp\/v2\/comments?post=3283"}],"version-history":[{"count":294,"href":"https:\/\/inosystech.com\/fr\/wp-json\/wp\/v2\/pages\/3283\/revisions"}],"predecessor-version":[{"id":4158,"href":"https:\/\/inosystech.com\/fr\/wp-json\/wp\/v2\/pages\/3283\/revisions\/4158"}],"wp:attachment":[{"href":"https:\/\/inosystech.com\/fr\/wp-json\/wp\/v2\/media?parent=3283"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}