{"id":7,"date":"2026-03-22T12:56:56","date_gmt":"2026-03-22T11:56:56","guid":{"rendered":"https:\/\/www.output-agency.fr\/?page_id=7"},"modified":"2026-09-17T13:56:10","modified_gmt":"2026-09-17T11:56:10","slug":"accueil","status":"publish","type":"page","link":"http:\/\/www.output-agency.fr\/","title":{"rendered":"Accueil"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"7\" class=\"elementor elementor-7\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5f00ffc e-flex e-con-boxed e-con e-parent\" data-id=\"5f00ffc\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7abd4ce elementor-widget elementor-widget-html\" data-id=\"7abd4ce\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n:root {\r\n  --bg:          #F3F7F8;\r\n  --bg-2:        #E7EEF1;\r\n  --card:        #FFFFFF;\r\n  --ink:         #023F52;\r\n  --muted:       #42606C;\r\n  --muted-2:     #6E8994;\r\n  --acc:         #FFD102;\r\n  --acc-2:       #0A6E8C;\r\n  --acc-d:       rgba(255, 209, 2, 0.16);\r\n  --acc-g:       rgba(255, 209, 2, 0.35);\r\n  --ok:          #147A45;\r\n  --border:      rgba(2, 63, 82, 0.10);\r\n  --border-2:    rgba(2, 63, 82, 0.16);\r\n  --border-acc:  rgba(255, 209, 2, 0.45);\r\n  --shadow:      0 10px 30px rgba(2, 63, 82, 0.07);\r\n  --shadow-lg:   0 20px 50px rgba(2, 63, 82, 0.12);\r\n  --font:        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\r\n  --heading:     'Poppins', sans-serif;\r\n  --mono:        'JetBrains Mono', monospace;\r\n  --r:           0.75rem;\r\n  --r-xl:        1.25rem;\r\n  --pill:        9999px;\r\n  --orange-2:    #0A6E8C;\r\n  --t:           0.22s ease;\r\n}\r\n\r\n#output-site-wrapper {\r\n  font-family: var(--font);\r\n  background: var(--bg);\r\n  color: var(--ink);\r\n  width: 100vw;\r\n  position: relative;\r\n  left: 50%;\r\n  right: 50%;\r\n  margin-left: -50vw;\r\n  margin-right: -50vw;\r\n  overflow-x: hidden;\r\n  box-sizing: border-box;\r\n  line-height: 1.6;\r\n}\r\n\r\n#output-site-wrapper * { box-sizing: border-box; }\r\n\r\n\/* \u2550\u2550 NAVIGATION \u2550\u2550 *\/\r\n.output-nav {\r\n  position: fixed;\r\n  top: 0; left: 0; right: 0;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  padding: 0.9rem 6vw;\r\n  z-index: 9999;\r\n  border-bottom: 1px solid var(--border);\r\n  backdrop-filter: blur(14px);\r\n  background: rgba(243, 247, 248, 0.92);\r\n}\r\n.output-logo img { height: 42px; width: auto; display: block; }\r\n.output-nav-links {\r\n  display: flex;\r\n  gap: 1.8rem;\r\n  list-style: none;\r\n  margin: 0; padding: 0;\r\n  align-items: center;\r\n}\r\n.output-nav-links a {\r\n  color: var(--muted);\r\n  text-decoration: none;\r\n  font-size: 0.8rem;\r\n  font-weight: 700;\r\n  letter-spacing: 0.08em;\r\n  text-transform: uppercase;\r\n  transition: color var(--t);\r\n}\r\n.output-nav-links a:hover { color: var(--ink); }\r\n.nav-link-studio {\r\n  color: var(--ink) !important;\r\n  background: var(--card);\r\n  border: 1px solid var(--border-acc);\r\n  padding: 0.4rem 0.95rem;\r\n  border-radius: var(--pill);\r\n  box-shadow: var(--shadow);\r\n  transition: all var(--t);\r\n}\r\n.nav-link-studio:hover {\r\n  background: var(--acc);\r\n  border-color: var(--acc);\r\n  transform: translateY(-1px);\r\n}\r\n.output-nav-cta {\r\n  background: var(--acc) !important;\r\n  color: var(--ink) !important;\r\n  padding: 0.55rem 1.4rem !important;\r\n  border-radius: var(--pill);\r\n  font-weight: 800 !important;\r\n  border: 1px solid var(--acc);\r\n  transition: transform var(--t), box-shadow var(--t);\r\n}\r\n.output-nav-cta:hover { transform: translateY(-1px); box-shadow: var(--shadow); }\r\n\r\n\/* \u2550\u2550 BOUTONS \u2550\u2550 *\/\r\n.btn-y {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 0.6rem;\r\n  background: var(--acc);\r\n  color: var(--ink);\r\n  font-weight: 800;\r\n  font-size: 0.88rem;\r\n  letter-spacing: 0.06em;\r\n  text-transform: uppercase;\r\n  text-decoration: none;\r\n  padding: 0.95rem 2.2rem;\r\n  border-radius: var(--pill);\r\n  transition: box-shadow var(--t), transform var(--t);\r\n  border: none;\r\n  cursor: pointer;\r\n  box-shadow: 0 4px 16px rgba(255, 209, 2, 0.28);\r\n}\r\n.btn-y:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); background: #ffc900; }\r\n.btn-ghost {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 0.5rem;\r\n  color: var(--muted);\r\n  font-size: 0.88rem;\r\n  font-weight: 700;\r\n  text-decoration: none;\r\n  transition: color var(--t), gap var(--t);\r\n}\r\n.btn-ghost::after { content: '\u2192'; }\r\n.btn-ghost:hover { color: var(--ink); gap: 0.8rem; }\r\n\r\n\/* \u2550\u2550 STRUCTURE GLOBALE \u2550\u2550 *\/\r\n.oa-section { position: relative; width: 100%; }\r\n.sec-pad { padding: clamp(4rem, 6vw, 6.5rem) 6vw; }\r\n.sec-alt { background: var(--bg-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }\r\n.sec-tag {\r\n  display: block;\r\n  font-size: 0.68rem;\r\n  font-weight: 700;\r\n  letter-spacing: 0.18em;\r\n  text-transform: uppercase;\r\n  color: var(--muted-2);\r\n  margin-bottom: 0.8rem;\r\n  font-family: var(--mono);\r\n}\r\n.sec-title {\r\n  font-family: var(--heading);\r\n  font-size: clamp(2rem, 4.4vw, 3.4rem);\r\n  font-weight: 800;\r\n  letter-spacing: -0.025em;\r\n  line-height: 1.1;\r\n  color: var(--ink);\r\n  margin: 0 0 1rem;\r\n}\r\n.sec-sub { color: var(--muted); font-size: 1rem; line-height: 1.75; max-width: 580px; margin-bottom: 3.2rem; }\r\n.oa-divider { width: 100%; height: 1px; background: var(--border); }\r\n\r\n\/* \u2550\u2550 HERO SECTION \u2550\u2550 *\/\r\n#output-hero {\r\n  min-height: 92vh;\r\n  display: flex;\r\n  flex-direction: column;\r\n  justify-content: center;\r\n  padding: 8.5rem 6vw 5rem;\r\n  position: relative;\r\n  background: var(--bg);\r\n}\r\n.hero-tag {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 0.6rem;\r\n  background: var(--card);\r\n  border: 1px solid var(--border-2);\r\n  color: var(--muted);\r\n  font-size: 0.75rem;\r\n  font-weight: 700;\r\n  letter-spacing: 0.12em;\r\n  text-transform: uppercase;\r\n  padding: 0.45rem 1.1rem;\r\n  border-radius: var(--pill);\r\n  margin-bottom: 2rem;\r\n  width: fit-content;\r\n  box-shadow: var(--shadow);\r\n}\r\n.hero-tag::before {\r\n  content: ''; width: 7px; height: 7px; background: var(--acc); border-radius: 50%;\r\n  box-shadow: 0 0 8px var(--acc); animation: blink 2s ease-in-out infinite;\r\n}\r\n@keyframes blink { 0%,100%{opacity:1}50%{opacity:0.1} }\r\n.hero-title {\r\n  font-family: var(--heading);\r\n  font-size: clamp(3.2rem, 7.8vw, 7.5rem);\r\n  font-weight: 900;\r\n  line-height: 0.95;\r\n  letter-spacing: -0.03em;\r\n  margin: 0 0 1.8rem;\r\n  max-width: 900px;\r\n  color: var(--ink);\r\n}\r\n.hero-title .acc { display: inline-block; color: var(--orange-2); }\r\n.hero-title .str { display: block; -webkit-text-stroke: 2px var(--ink); color: transparent; margin-top: 0.5rem; }\r\n.hero-sub { font-size: clamp(1.02rem, 1.6vw, 1.18rem); color: var(--muted); line-height: 1.75; max-width: 550px; margin-bottom: 2.6rem; }\r\n.hero-actions { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 4.5rem; }\r\n\r\n\/* ORBE HERO *\/\r\n.output-hero-orb {\r\n  position: absolute;\r\n  right: 6vw;\r\n  top: 36%;\r\n  transform: translateY(-50%);\r\n  z-index: 10;\r\n  display: none;\r\n  align-items: center;\r\n  justify-content: center;\r\n  animation: floatOrb 6s ease-in-out infinite;\r\n}\r\n@media (min-width: 1050px) { .output-hero-orb { display: flex; } }\r\n@keyframes floatOrb { 0%,100%{transform:translateY(-50%)} 50%{transform:translateY(calc(-50% - 18px))} }\r\n.orb-ring {\r\n  position: absolute;\r\n  border-radius: 50%;\r\n  border: 1px solid;\r\n  left: 50%; top: 50%;\r\n  transform: translate(-50%,-50%);\r\n  animation: rp 4.5s ease-out infinite;\r\n  pointer-events: none;\r\n}\r\n.orb-ring:nth-child(1){width:210px;height:210px;border-color:rgba(2,63,82,0.12);}\r\n.orb-ring:nth-child(2){width:320px;height:320px;border-color:rgba(2,63,82,0.07);animation-delay:1.5s;}\r\n.orb-ring:nth-child(3){width:440px;height:440px;border-color:rgba(2,63,82,0.04);animation-delay:3s;}\r\n@keyframes rp{0%{opacity:1;transform:translate(-50%,-50%) scale(.8)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.2)}}\r\n.orb-core-btn {\r\n  width: 160px; height: 160px;\r\n  border-radius: 50%;\r\n  background: var(--ink);\r\n  border: 2px solid var(--acc);\r\n  display: flex; flex-direction: column; align-items: center; justify-content: center;\r\n  text-decoration: none;\r\n  cursor: pointer;\r\n  transition: transform var(--t), box-shadow var(--t);\r\n  box-shadow: 0 16px 40px rgba(2,63,82,0.22);\r\n}\r\n.orb-core-btn:hover { transform: scale(1.06); box-shadow: 0 20px 50px rgba(2,63,82,0.3); }\r\n.orb-label { font-size: 0.68rem; font-weight: 900; letter-spacing: 0.15em; text-transform: uppercase; color: var(--acc); text-align: center; }\r\n.orb-action { font-size: 0.62rem; font-weight: 700; color: #fff; background: rgba(255,255,255,0.12); padding: 0.25rem 0.7rem; border-radius: var(--pill); margin-top: 0.45rem; }\r\n\r\n\/* STATS HERO *\/\r\n.hero-stats {\r\n  display: flex;\r\n  border-top: 1px solid var(--border);\r\n  padding-top: 2.2rem;\r\n  flex-wrap: wrap;\r\n  width: 100%;\r\n}\r\n.hero-stat-item {\r\n  flex: 1; min-width: 130px; padding: 0 1.4rem;\r\n  border-right: 1px solid var(--border); text-align: center;\r\n}\r\n.hero-stat-item:first-child { padding-left: 0; text-align: left; }\r\n.hero-stat-item:last-child { border-right: none; }\r\n.stat-n { display: block; font-size: clamp(2.2rem, 3.8vw, 3.4rem); font-weight: 900; color: var(--ink); line-height: 1; font-family: var(--mono); }\r\n.stat-l { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-2); margin-top: 0.4rem; }\r\n\r\n\/* \u2550\u2550 PERFORMANCE MESUR\u00c9E \u2550\u2550 *\/\r\n.bento-grid {\r\n  display: grid;\r\n  grid-template-columns: repeat(3, 1fr);\r\n  gap: 1.2rem;\r\n  margin-top: 2.5rem;\r\n}\r\n@media (max-width: 860px) { .bento-grid { grid-template-columns: 1fr 1fr; } }\r\n@media (max-width: 540px) { .bento-grid { grid-template-columns: 1fr; } }\r\n.bento-cell {\r\n  background: var(--card);\r\n  border: 1px solid var(--border);\r\n  border-radius: var(--r-xl);\r\n  padding: 2.2rem 2rem;\r\n  position: relative;\r\n  box-shadow: var(--shadow);\r\n  transition: transform var(--t), border-color var(--t), box-shadow var(--t);\r\n}\r\n.bento-cell:hover { transform: translateY(-3px); border-color: var(--border-acc); box-shadow: var(--shadow-lg); }\r\n.bento-cell .metric-title { font-family: var(--mono); font-size: 0.72rem; color: var(--muted-2); letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; }\r\n.bento-cell .big-val { font-family: var(--mono); font-size: 2.7rem; font-weight: 900; color: var(--ink); margin: 0.4rem 0 0.2rem; }\r\n.bento-cell .sub-exp { font-size: 0.86rem; color: var(--muted); line-height: 1.55; }\r\n\r\n\/* \u2550\u2550 SERVICES \u2550\u2550 *\/\r\n.srv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }\r\n.srv-card {\r\n  position: relative; overflow: hidden; border: 1px solid var(--border);\r\n  border-radius: var(--r-xl); background: var(--card);\r\n  min-height: 340px; display: flex; flex-direction: column; justify-content: flex-end;\r\n  transition: transform var(--t), border-color var(--t), box-shadow var(--t);\r\n  box-shadow: var(--shadow);\r\n}\r\n.srv-card:hover { transform: translateY(-4px); border-color: var(--ink); box-shadow: var(--shadow-lg); }\r\n.srv-card-img {\r\n  position: absolute; inset: 0;\r\n  background-size: cover; background-position: center;\r\n  transition: transform 0.5s ease;\r\n}\r\n.srv-card:hover .srv-card-img { transform: scale(1.05); }\r\n.srv-card-overlay {\r\n  position: absolute; inset: 0;\r\n  background: linear-gradient(to top, rgba(2, 63, 82, 0.94) 0%, rgba(2, 63, 82, 0.55) 60%, rgba(2, 63, 82, 0.1) 100%);\r\n}\r\n.srv-card-content { position: relative; z-index: 2; padding: 2.2rem 2rem; color: #fff; }\r\n.srv-title { font-family: var(--heading); font-size: 1.2rem; font-weight: 800; color: #fff; margin-bottom: 0.5rem; }\r\n.srv-text { font-size: 0.84rem; color: rgba(255, 255, 255, 0.75); line-height: 1.65; margin-bottom: 1rem; }\r\n.srv-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }\r\n.srv-tag {\r\n  font-family: var(--mono); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em;\r\n  color: var(--ink); background: var(--acc);\r\n  padding: 0.2rem 0.65rem; border-radius: var(--pill); text-transform: uppercase;\r\n}\r\n\r\n\/* \u2550\u2550 SECTION COCKPIT SPLIT-SCREEN PRO (OUR PROCESS) \u2550\u2550 *\/\r\n.cockpit-wrap {\r\n  display: grid;\r\n  grid-template-columns: 1.15fr 1fr;\r\n  gap: 3.5rem;\r\n  align-items: center;\r\n  margin-top: 3rem;\r\n}\r\n\r\n.cockpit-list {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 0.7rem;\r\n}\r\n\r\n.cockpit-item {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 1.4rem;\r\n  padding: 1.1rem 1.4rem;\r\n  border-radius: var(--r-xl);\r\n  background: transparent;\r\n  border: 1px solid transparent;\r\n  cursor: pointer;\r\n  transition: all 0.25s ease;\r\n  position: relative;\r\n}\r\n\r\n.cockpit-item:hover, .cockpit-item.active {\r\n  background: var(--card);\r\n  border-color: var(--border);\r\n  box-shadow: var(--shadow);\r\n  transform: translateX(6px);\r\n}\r\n\r\n.cockpit-item.active {\r\n  border-color: var(--acc);\r\n  box-shadow: 0 10px 25px rgba(255, 209, 2, 0.15);\r\n}\r\n\r\n.cockpit-item-num {\r\n  font-family: var(--mono);\r\n  font-size: 1.4rem;\r\n  font-weight: 900;\r\n  color: var(--muted-2);\r\n  transition: color 0.25s ease;\r\n  min-width: 40px;\r\n}\r\n\r\n.cockpit-item:hover .cockpit-item-num,\r\n.cockpit-item.active .cockpit-item-num {\r\n  color: var(--acc);\r\n}\r\n\r\n.cockpit-item-meta {\r\n  flex: 1;\r\n}\r\n\r\n.cockpit-item-title {\r\n  font-family: var(--heading);\r\n  font-size: 1.15rem;\r\n  font-weight: 800;\r\n  color: var(--ink);\r\n  margin-bottom: 0.15rem;\r\n}\r\n\r\n.cockpit-item-sub {\r\n  font-size: 0.75rem;\r\n  font-weight: 600;\r\n  letter-spacing: 0.08em;\r\n  text-transform: uppercase;\r\n  color: var(--muted);\r\n  font-family: var(--mono);\r\n}\r\n\r\n.cockpit-item-arr {\r\n  font-size: 1.1rem;\r\n  color: var(--acc);\r\n  opacity: 0;\r\n  transform: translateX(-5px);\r\n  transition: all 0.25s ease;\r\n}\r\n\r\n.cockpit-item.active .cockpit-item-arr {\r\n  opacity: 1;\r\n  transform: translateX(0);\r\n}\r\n\r\n\/* CADRE D\u2019AFFICHAGE VISUEL IMMERSIF (DROITE) *\/\r\n.cockpit-display {\r\n  position: relative;\r\n  aspect-ratio: 4\/3.8;\r\n  border-radius: 1.5rem;\r\n  overflow: hidden;\r\n  box-shadow: var(--shadow-lg);\r\n  border: 1px solid var(--border);\r\n  background: var(--ink);\r\n}\r\n\r\n.cockpit-bg-layer {\r\n  position: absolute;\r\n  inset: 0;\r\n  background-size: cover;\r\n  background-position: center;\r\n  opacity: 0;\r\n  transform: scale(1.04);\r\n  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);\r\n}\r\n\r\n.cockpit-bg-layer.active {\r\n  opacity: 1;\r\n  transform: scale(1);\r\n}\r\n\r\n.cockpit-overlay {\r\n  position: absolute;\r\n  inset: 0;\r\n  background: linear-gradient(to top, rgba(2, 63, 82, 0.95) 0%, rgba(2, 63, 82, 0.5) 50%, rgba(2, 63, 82, 0.2) 100%);\r\n  z-index: 2;\r\n}\r\n\r\n.cockpit-content {\r\n  position: absolute;\r\n  bottom: 0;\r\n  left: 0;\r\n  right: 0;\r\n  padding: 2.5rem;\r\n  z-index: 3;\r\n  color: #fff;\r\n}\r\n\r\n.cockpit-badge {\r\n  display: inline-block;\r\n  font-family: var(--mono);\r\n  font-size: 0.68rem;\r\n  font-weight: 800;\r\n  letter-spacing: 0.12em;\r\n  text-transform: uppercase;\r\n  padding: 0.25rem 0.75rem;\r\n  border-radius: var(--pill);\r\n  background: var(--acc);\r\n  color: var(--ink);\r\n  margin-bottom: 0.6rem;\r\n}\r\n\r\n.cockpit-h3 {\r\n  font-family: var(--heading);\r\n  font-size: 1.8rem;\r\n  font-weight: 900;\r\n  line-height: 1.15;\r\n  color: #fff;\r\n  margin: 0 0 0.6rem;\r\n}\r\n\r\n.cockpit-p {\r\n  font-size: 0.92rem;\r\n  color: rgba(255, 255, 255, 0.85);\r\n  line-height: 1.65;\r\n  margin: 0;\r\n}\r\n\r\n@media (max-width: 960px) {\r\n  .cockpit-wrap {\r\n    grid-template-columns: 1fr;\r\n    gap: 2rem;\r\n  }\r\n  .cockpit-display {\r\n    aspect-ratio: 16\/9;\r\n  }\r\n}\r\n\r\n\/* \u2550\u2550 NOTRE ADN \u2550\u2550 *\/\r\n.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }\r\n.val-card {\r\n  border: 1px solid var(--border);\r\n  border-radius: var(--r-xl);\r\n  padding: 2.4rem 2rem; position: relative; background-size: cover; background-position: center;\r\n  min-height: 270px; display: flex; flex-direction: column; justify-content: flex-end;\r\n  overflow: hidden; transition: transform var(--t), box-shadow var(--t);\r\n  box-shadow: var(--shadow);\r\n}\r\n.val-card-overlay {\r\n  position: absolute; inset: 0;\r\n  background: linear-gradient(to top, rgba(2, 63, 82, 0.95) 0%, rgba(2, 63, 82, 0.65) 60%, rgba(2, 63, 82, 0.2) 100%);\r\n}\r\n.val-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }\r\n.val-content { position: relative; z-index: 2; color: #fff; }\r\n.val-name { font-family: var(--heading); font-size: 1.3rem; font-weight: 800; color: #fff; margin-bottom: 0.5rem; }\r\n.val-text { font-size: 0.84rem; color: rgba(255, 255, 255, 0.8); line-height: 1.7; margin: 0; }\r\n.val-bg {\r\n  position: absolute; bottom: -0.5rem; right: 1rem; font-size: 5.5rem;\r\n  font-weight: 900; color: rgba(255, 255, 255, 0.08); line-height: 1;\r\n  pointer-events: none; z-index: 1; font-family: var(--mono);\r\n}\r\n\r\n\/* \u2550\u2550 PORTFOLIO \u2550\u2550 *\/\r\n.portfolio-category-title {\r\n  font-family: var(--heading);\r\n  font-size: 1.15rem; font-weight: 800; color: var(--ink);\r\n  margin: 2.8rem 0 1.2rem; display: flex; align-items: center; gap: 0.8rem;\r\n}\r\n.portfolio-category-title::before { content: \"\"; width: 8px; height: 8px; border-radius: 50%; background: var(--acc); }\r\n.proj-grid-showcase { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }\r\n@media (max-width: 960px) { .proj-grid-showcase { grid-template-columns: repeat(2, 1fr); } }\r\n@media (max-width: 600px) { .proj-grid-showcase { grid-template-columns: 1fr; } }\r\n.proj-card-direct {\r\n  background: var(--card); border: 1px solid var(--border);\r\n  border-radius: var(--r-xl); padding: 2rem 1.8rem; display: flex;\r\n  flex-direction: column; justify-content: space-between; min-height: 240px;\r\n  transition: all var(--t); box-shadow: var(--shadow);\r\n}\r\n.proj-card-direct:hover { border-color: var(--ink); transform: translateY(-4px); box-shadow: var(--shadow-lg); }\r\n.proj-scope-badge {\r\n  font-family: var(--mono); font-size: 0.65rem; font-weight: 700;\r\n  letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 0.5rem;\r\n}\r\n.proj-card-direct h3 { font-family: var(--heading); font-size: 1.25rem; font-weight: 800; color: var(--ink); margin-bottom: 0.5rem; }\r\n.proj-card-direct p { font-size: 0.86rem; color: var(--muted); line-height: 1.6; margin-bottom: 1.4rem; flex: 1; }\r\n.proj-direct-link {\r\n  display: inline-flex; align-items: center; gap: 0.5rem;\r\n  font-size: 0.78rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;\r\n  color: var(--ink); text-decoration: none; border-top: 1px solid var(--border);\r\n  padding-top: 1rem; transition: gap var(--t), color var(--t);\r\n}\r\n.proj-direct-link:hover { gap: 0.8rem; color: var(--orange-2); }\r\n\r\n\/* \u2550\u2550 PARTENAIRES SANS FILTRE GRIS \u2550\u2550 *\/\r\n#output-partners { overflow: hidden; background: var(--bg-2); }\r\n.partner-marquee-track {\r\n  display: flex; gap: 2rem; align-items: center; width: max-content;\r\n  animation: partnerScroll 35s linear infinite;\r\n}\r\n@keyframes partnerScroll { to { transform: translateX(-50%); } }\r\n.partner-logo-item {\r\n  background: var(--card);\r\n  border: 1px solid var(--border);\r\n  border-radius: var(--r);\r\n  padding: 1.4rem 2.2rem;\r\n  display: flex; align-items: center; justify-content: center;\r\n  min-width: 210px; height: 105px;\r\n  box-shadow: var(--shadow);\r\n  transition: all var(--t);\r\n}\r\n.partner-logo-item:hover {\r\n  border-color: var(--ink);\r\n  transform: translateY(-3px);\r\n  box-shadow: var(--shadow-lg);\r\n}\r\n.partner-logo-item img {\r\n  max-width: 165px; max-height: 65px; width: auto; height: auto;\r\n  object-fit: contain;\r\n  filter: none !important;\r\n  opacity: 1 !important;\r\n  transition: transform var(--t);\r\n}\r\n.partner-logo-item:hover img { transform: scale(1.05); }\r\n\r\n\/* \u2550\u2550 QUI SOMMES-NOUS \u2550\u2550 *\/\r\n#output-about {\r\n  display: grid; grid-template-columns: 1.1fr 0.9fr;\r\n  gap: 5rem; align-items: center; padding: 7rem 6vw;\r\n}\r\n.about-visual { position: relative; border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 4\/3; box-shadow: var(--shadow-lg); }\r\n.about-visual img { width: 100%; height: 100%; object-fit: cover; }\r\n.about-list { list-style: none; margin: 1.8rem 0 2rem; padding: 0; display: flex; flex-direction: column; gap: 0.85rem; }\r\n.about-list li { display: flex; align-items: flex-start; gap: 0.7rem; font-size: 0.92rem; color: var(--muted); line-height: 1.6; }\r\n.about-list li::before { content: '\u2713'; color: var(--ok); font-weight: 800; flex-shrink: 0; }\r\n.synergy-box {\r\n  background: var(--card);\r\n  border: 1px solid var(--border);\r\n  border-radius: var(--r-xl);\r\n  padding: 1.6rem;\r\n  margin-top: 1.8rem;\r\n  box-shadow: var(--shadow);\r\n}\r\n.synergy-box b { color: var(--ink); font-size: 0.95rem; }\r\n.synergy-box p { font-size: 0.85rem; color: var(--muted); margin-top: 0.4rem; }\r\n\r\n\/* \u2550\u2550 CONTACT \u2550\u2550 *\/\r\n#output-contact { background: var(--bg-2); }\r\n.contact-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 5rem; align-items: start; }\r\n.ci-label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted-2); display: block; margin-bottom: 0.3rem; }\r\n.ci-val { font-size: 0.95rem; font-weight: 600; color: var(--ink); }\r\n.ci-val a { color: var(--ink); text-decoration: none; }\r\n.ci-val a:hover { color: var(--orange-2); }\r\n.oa-form {\r\n  background: var(--card);\r\n  border: 1px solid var(--border);\r\n  border-radius: var(--r-xl);\r\n  padding: 2.5rem;\r\n  box-shadow: var(--shadow-lg);\r\n  display: flex; flex-direction: column; gap: 1.2rem;\r\n}\r\n.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }\r\n.form-grp { display: flex; flex-direction: column; gap: 0.45rem; }\r\n.form-lbl { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }\r\n.form-input, .form-ta {\r\n  background: var(--bg); border: 1px solid var(--border-2);\r\n  border-radius: var(--r); padding: 0.85rem 1.1rem; color: var(--ink);\r\n  font-family: inherit; font-size: 0.92rem; outline: none; width: 100%;\r\n  transition: border-color var(--t), box-shadow var(--t);\r\n}\r\n.form-input:focus, .form-ta:focus {\r\n  border-color: var(--acc);\r\n  box-shadow: 0 0 0 3px rgba(255, 209, 2, 0.2);\r\n}\r\n.form-ta { min-height: 110px; resize: vertical; }\r\n\r\n\/* \u2550\u2550 FOOTER \u2550\u2550 *\/\r\n#output-footer { background: var(--card); padding: 3.5rem 6vw 2.5rem; border-top: 1px solid var(--border); }\r\n.footer-top { display: flex; align-items: center; justify-content: space-between; padding-bottom: 2rem; border-bottom: 1px solid var(--border); flex-wrap: wrap; gap: 1.5rem; }\r\n.footer-top img { height: 38px; width: auto; }\r\n.footer-links { display: flex; gap: 1.8rem; list-style: none; margin: 0; padding: 0; align-items: center; flex-wrap: wrap; }\r\n.footer-links a { color: var(--muted); text-decoration: none; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }\r\n.footer-links a:hover { color: var(--ink); }\r\n.footer-bot { display: flex; align-items: center; justify-content: space-between; padding-top: 1.8rem; flex-wrap: wrap; gap: 1rem; }\r\n.footer-copy { font-size: 0.78rem; color: var(--muted-2); }\r\n.footer-copy span { color: var(--ink); font-weight: 700; }\r\n\r\n@media (max-width: 1024px) {\r\n  .output-hero-orb { display: none !important; }\r\n  #output-about { grid-template-columns: 1fr; gap: 3rem; }\r\n  .contact-grid { grid-template-columns: 1fr; gap: 3rem; }\r\n}\r\n@media (max-width: 768px) {\r\n  .output-nav-links { display: none; }\r\n  .srv-grid, .grid-3 { grid-template-columns: 1fr; }\r\n  .form-row { grid-template-columns: 1fr; }\r\n  .hero-stats { flex-direction: column; gap: 1.6rem; }\r\n  .hero-stat-item { border-right: none; border-bottom: 1px solid var(--border); padding: 0 0 1.2rem; text-align: left; }\r\n}\r\n<\/style>\r\n\r\n<div id=\"oa-progress\" style=\"position:fixed;top:0;left:0;height:3px;background:var(--acc);z-index:99999;width:0%;transition:width .1s linear\"><\/div>\r\n<div id=\"output-site-wrapper\">\r\n\r\n  <nav class=\"output-nav\">\r\n    <a href=\"#\" class=\"output-logo\">\r\n      <img decoding=\"async\" src=\"http:\/\/www.output-agency.fr\/wp-content\/uploads\/2026\/03\/LOGO-OUTPUT-03-scaled.png\" alt=\"Output Agency\">\r\n    <\/a>\r\n    <ul class=\"output-nav-links\">\r\n      <li><a href=\"#output-services\">Services<\/a><\/li>\r\n      <li><a href=\"#output-process\">Process<\/a><\/li>\r\n      <li><a href=\"#output-portfolio\">Portfolio<\/a><\/li>\r\n      <li><a href=\"#output-values\">Notre ADN<\/a><\/li>\r\n      <li><a href=\"#output-partners\">Partenaires<\/a><\/li>\r\n      <li><a href=\"#output-about\">Agence<\/a><\/li>\r\n      <li><a href=\"\/studio\/\" class=\"nav-link-studio\">Studio IA \u2197<\/a><\/li>\r\n      <li><a href=\"#output-contact\" class=\"output-nav-cta\">Contact<\/a><\/li>\r\n    <\/ul>\r\n  <\/nav>\r\n\r\n  <section id=\"output-hero\">\r\n    <div class=\"hero-tag\">Output by Tess\u00e9ra \u00b7 Tunis &amp; International<\/div>\r\n    <h1 class=\"hero-title\">\r\n      <span>On ne vend pas<\/span>\r\n      <span class=\"acc\">du marketing.<\/span>\r\n      <span class=\"str\">On ram\u00e8ne des clients.<\/span>\r\n    <\/h1>\r\n    <p class=\"hero-sub\">150 projets livr\u00e9s. 98% de clients satisfaits. Branding, acquisition digitale, d\u00e9veloppement web et automatisation IA \u2014 une seule \u00e9quipe, des r\u00e9sultats mesurables chaque semaine.<\/p>\r\n    \r\n    <div class=\"hero-actions\">\r\n      <a href=\"#output-contact\" class=\"btn-y\">D\u00e9marrer un projet<\/a>\r\n      <a href=\"#output-portfolio\" class=\"btn-ghost\">Voir nos r\u00e9alisations<\/a>\r\n      <a href=\"\/studio\/\" class=\"btn-ghost\" style=\"color:var(--orange-2);\">D\u00e9couvrir notre Studio IA<\/a>\r\n    <\/div>\r\n\r\n    <div class=\"hero-stats\">\r\n      <div class=\"hero-stat-item\"><span class=\"stat-n\" data-target=\"150\">150+<\/span><span class=\"stat-l\">Projets livr\u00e9s<\/span><\/div>\r\n      <div class=\"hero-stat-item\"><span class=\"stat-n\" data-target=\"98\">98%<\/span><span class=\"stat-l\">Clients satisfaits<\/span><\/div>\r\n      <div class=\"hero-stat-item\"><span class=\"stat-n\" data-target=\"5\">5\u00d7<\/span><span class=\"stat-l\">ROI moyen<\/span><\/div>\r\n      <div class=\"hero-stat-item\"><span class=\"stat-n\" data-target=\"12\">12+<\/span><span class=\"stat-l\">Secteurs couverts<\/span><\/div>\r\n    <\/div>\r\n\r\n    <div class=\"output-hero-orb\" aria-label=\"Action rapide\">\r\n      <div class=\"orb-ring\"><\/div><div class=\"orb-ring\"><\/div><div class=\"orb-ring\"><\/div>\r\n      <a href=\"\/studio\/\" class=\"orb-core-btn\">\r\n        <span class=\"orb-label\">STUDIO<br>IA<\/span>\r\n        <span class=\"orb-action\">D\u00e9couvrir \u2197<\/span>\r\n      <\/a>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <div class=\"oa-divider\"><\/div>\r\n\r\n  <section class=\"oa-section sec-pad sec-alt\">\r\n    <span class=\"sec-tag\">Performance mesur\u00e9e<\/span>\r\n    <h2 class=\"sec-title\">Des indicateurs concrets, suivis en continu.<\/h2>\r\n    <p class=\"sec-sub\">Chaque dispositif digital est pilot\u00e9 pour maximiser la rentabilit\u00e9 de nos partenaires.<\/p>\r\n\r\n    <div class=\"bento-grid\">\r\n      <div class=\"bento-cell\">\r\n        <div class=\"metric-title\">Exp\u00e9rience &amp; Savoir-faire<\/div>\r\n        <div class=\"big-val\">+<span class=\"counter\" data-target=\"5\">5<\/span> ans<\/div>\r\n        <div class=\"sub-exp\">En activit\u00e9 continue au service de marques exigeantes.<\/div>\r\n      <\/div>\r\n      <div class=\"bento-cell\">\r\n        <div class=\"metric-title\">Projets D\u00e9ploy\u00e9s<\/div>\r\n        <div class=\"big-val\">+<span class=\"counter\" data-target=\"150\">150<\/span><\/div>\r\n        <div class=\"sub-exp\">Plateformes web, identit\u00e9s de marque et campagnes r\u00e9ussies.<\/div>\r\n      <\/div>\r\n      <div class=\"bento-cell\">\r\n        <div class=\"metric-title\">Satisfaction Client<\/div>\r\n        <div class=\"big-val\">+<span class=\"counter\" data-target=\"98\">98<\/span> %<\/div>\r\n        <div class=\"sub-exp\">Fid\u00e9lit\u00e9 et relation durable avec nos partenaires r\u00e9guliers.<\/div>\r\n      <\/div>\r\n      <div class=\"bento-cell\">\r\n        <div class=\"metric-title\">Syst\u00e8mes &amp; Automatisation<\/div>\r\n        <div class=\"big-val\">+<span class=\"counter\" data-target=\"35\">35<\/span><\/div>\r\n        <div class=\"sub-exp\">Flux digitaux et processus m\u00e9tiers connect\u00e9s au quotidien.<\/div>\r\n      <\/div>\r\n      <div class=\"bento-cell\">\r\n        <div class=\"metric-title\">Interactions Trait\u00e9es<\/div>\r\n        <div class=\"big-val\">+<span class=\"counter\" data-target=\"240\">240<\/span>K<\/div>\r\n        <div class=\"sub-exp\">Prospects, commandes et interactions g\u00e9n\u00e9r\u00e9es pour nos clients.<\/div>\r\n      <\/div>\r\n      <div class=\"bento-cell\">\r\n        <div class=\"metric-title\">Multiplicateur ROI<\/div>\r\n        <div class=\"big-val\">+<span class=\"counter\" data-target=\"340\">340<\/span> %<\/div>\r\n        <div class=\"sub-exp\">Hausse moyenne du retour sur investissement publicitaire.<\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <div class=\"oa-divider\"><\/div>\r\n\r\n  <section id=\"output-services\" class=\"oa-section sec-pad\">\r\n    <span class=\"sec-tag\">Ce que nous faisons<\/span>\r\n    <h2 class=\"sec-title\">Nos services<\/h2>\r\n    <p class=\"sec-sub\">R\u00e9flexion strat\u00e9gique, cr\u00e9ation visuelle, marketing digital et d\u00e9veloppement technologique \u2014 tout sous le m\u00eame toit.<\/p>\r\n    \r\n    <div class=\"srv-grid\">\r\n      <div class=\"srv-card\">\r\n        <div class=\"srv-card-img\" style=\"background-image:url('http:\/\/www.output-agency.fr\/wp-content\/uploads\/2026\/03\/Graphic-designer-working-on-logo-branding-dark-studio-lighting-cinematic-professional_-1.jpg')\"><\/div>\r\n        <div class=\"srv-card-overlay\"><\/div>\r\n        <div class=\"srv-card-content\">\r\n          <h3 class=\"srv-title\">Conception graphique &amp; Branding<\/h3>\r\n          <p class=\"srv-text\">Un laboratoire de tendances. Logos, chartes graphiques, illustrations, infographies et mise en page sur tous supports.<\/p>\r\n          <div class=\"srv-tags\"><span class=\"srv-tag\">Logo<\/span><span class=\"srv-tag\">Branding<\/span><span class=\"srv-tag\">Print<\/span><\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"srv-card\">\r\n        <div class=\"srv-card-img\" style=\"background-image:url('http:\/\/www.output-agency.fr\/wp-content\/uploads\/2026\/03\/Professional-digital-marketing-team-working-on-laptop-dark-teal-background-cinematic_.jpg')\"><\/div>\r\n        <div class=\"srv-card-overlay\"><\/div>\r\n        <div class=\"srv-card-content\">\r\n          <h3 class=\"srv-title\">Digital Marketing<\/h3>\r\n          <p class=\"srv-text\">Strat\u00e9gie digitale, campagnes data-driven et acquisition payante pour maximiser votre visibilit\u00e9 et votre ROI.<\/p>\r\n          <div class=\"srv-tags\"><span class=\"srv-tag\">Google Ads<\/span><span class=\"srv-tag\">Meta Ads<\/span><span class=\"srv-tag\">SEO<\/span><\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"srv-card\">\r\n        <div class=\"srv-card-img\" style=\"background-image:url('http:\/\/www.output-agency.fr\/wp-content\/uploads\/2026\/03\/Social-media-content-creator-working-on-multiple-screens-dark-background-cinematic_.jpg')\"><\/div>\r\n        <div class=\"srv-card-overlay\"><\/div>\r\n        <div class=\"srv-card-content\">\r\n          <h3 class=\"srv-title\">Community Management<\/h3>\r\n          <p class=\"srv-text\">Gestion de vos r\u00e9seaux sociaux, cr\u00e9ation de contenu et animation de communaut\u00e9 pour renforcer votre e-r\u00e9putation.<\/p>\r\n          <div class=\"srv-tags\"><span class=\"srv-tag\">Instagram<\/span><span class=\"srv-tag\">LinkedIn<\/span><span class=\"srv-tag\">TikTok<\/span><\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"srv-card\">\r\n        <div class=\"srv-card-img\" style=\"background-image:url('http:\/\/www.output-agency.fr\/wp-content\/uploads\/2026\/03\/Web-developer-coding-on-2-screens-dark-blue-atmosphere-cinematic-professional_.jpg')\"><\/div>\r\n        <div class=\"srv-card-overlay\"><\/div>\r\n        <div class=\"srv-card-content\">\r\n          <h3 class=\"srv-title\">Web, Mobile &amp; Automatisation IA<\/h3>\r\n          <p class=\"srv-text\">Sites web, PWA et interconnexion de flux intelligents (n8n, CRM, chatbots et assistants IA) pour vos op\u00e9rations.<\/p>\r\n          <div class=\"srv-tags\"><span class=\"srv-tag\">WordPress \/ React<\/span><span class=\"srv-tag\">PWA<\/span><span class=\"srv-tag\">Workflows n8n<\/span><\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"srv-card\">\r\n        <div class=\"srv-card-img\" style=\"background-image:url('http:\/\/www.output-agency.fr\/wp-content\/uploads\/2026\/03\/SEO-analytics-dashboard-data-visualization-on-screen-with-this-color-FCCE03-004053_-dark-teal-mood-cinematic_.jpg')\"><\/div>\r\n        <div class=\"srv-card-overlay\"><\/div>\r\n        <div class=\"srv-card-content\">\r\n          <h3 class=\"srv-title\">R\u00e9flexion &amp; Planning strat\u00e9gique<\/h3>\r\n          <p class=\"srv-text\">Audit, benchmark, veille et planification strat\u00e9gique pour d\u00e9finir la meilleure feuille de route digitale.<\/p>\r\n          <div class=\"srv-tags\"><span class=\"srv-tag\">Audit<\/span><span class=\"srv-tag\">KPI<\/span><span class=\"srv-tag\">Analytics<\/span><\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"srv-card\">\r\n        <div class=\"srv-card-img\" style=\"background-image:url('http:\/\/www.output-agency.fr\/wp-content\/uploads\/2026\/03\/Mobile-app-development-smartphone-screen-dark-tech-background-cinematic-professional_.jpg')\"><\/div>\r\n        <div class=\"srv-card-overlay\"><\/div>\r\n        <div class=\"srv-card-content\">\r\n          <h3 class=\"srv-title\">Production &amp; Contenu<\/h3>\r\n          <p class=\"srv-text\">Production photo, vid\u00e9o, motion design et contenu premium pour valoriser votre image de marque sur tous les canaux.<\/p>\r\n          <div class=\"srv-tags\"><span class=\"srv-tag\">Photo<\/span><span class=\"srv-tag\">Vid\u00e9o<\/span><span class=\"srv-tag\">Motion<\/span><\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <div class=\"oa-divider\"><\/div>\r\n\r\n  <section id=\"output-process\" class=\"oa-section sec-pad sec-alt\">\r\n    <div style=\"display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:1.5rem;\">\r\n      <div>\r\n        <span class=\"sec-tag\">Notre m\u00e9thode<\/span>\r\n        <h2 class=\"sec-title\" style=\"margin-bottom:0;\">Our Process<\/h2>\r\n      <\/div>\r\n      <p style=\"color:var(--muted);font-size:0.95rem;margin:0;max-width:380px;\">Survolez chaque \u00e9tape pour explorer le d\u00e9roulement de nos op\u00e9rations.<\/p>\r\n    <\/div>\r\n\r\n    <div class=\"cockpit-wrap\">\r\n      \r\n      <div class=\"cockpit-list\" id=\"proc-cockpit-list\">\r\n        \r\n        <div class=\"cockpit-item active\" data-index=\"0\">\r\n          <span class=\"cockpit-item-num\">01<\/span>\r\n          <div class=\"cockpit-item-meta\">\r\n            <h3 class=\"cockpit-item-title\">Brief<\/h3>\r\n            <span class=\"cockpit-item-sub\">Besoins &amp; Objectifs<\/span>\r\n          <\/div>\r\n          <span class=\"cockpit-item-arr\">\u2192<\/span>\r\n        <\/div>\r\n\r\n        <div class=\"cockpit-item\" data-index=\"1\">\r\n          <span class=\"cockpit-item-num\">02<\/span>\r\n          <div class=\"cockpit-item-meta\">\r\n            <h3 class=\"cockpit-item-title\">Benchmark<\/h3>\r\n            <span class=\"cockpit-item-sub\">Audit &amp; Veille March\u00e9<\/span>\r\n          <\/div>\r\n          <span class=\"cockpit-item-arr\">\u2192<\/span>\r\n        <\/div>\r\n\r\n        <div class=\"cockpit-item\" data-index=\"2\">\r\n          <span class=\"cockpit-item-num\">03<\/span>\r\n          <div class=\"cockpit-item-meta\">\r\n            <h3 class=\"cockpit-item-title\">Cr\u00e9ation<\/h3>\r\n            <span class=\"cockpit-item-sub\">Conception &amp; R&amp;D<\/span>\r\n          <\/div>\r\n          <span class=\"cockpit-item-arr\">\u2192<\/span>\r\n        <\/div>\r\n\r\n        <div class=\"cockpit-item\" data-index=\"3\">\r\n          <span class=\"cockpit-item-num\">04<\/span>\r\n          <div class=\"cockpit-item-meta\">\r\n            <h3 class=\"cockpit-item-title\">Pitstop<\/h3>\r\n            <span class=\"cockpit-item-sub\">Validation \u00c9tape Cl\u00e9<\/span>\r\n          <\/div>\r\n          <span class=\"cockpit-item-arr\">\u2192<\/span>\r\n        <\/div>\r\n\r\n        <div class=\"cockpit-item\" data-index=\"4\">\r\n          <span class=\"cockpit-item-num\">05<\/span>\r\n          <div class=\"cockpit-item-meta\">\r\n            <h3 class=\"cockpit-item-title\">Debrief<\/h3>\r\n            <span class=\"cockpit-item-sub\">Optimisation &amp; QA<\/span>\r\n          <\/div>\r\n          <span class=\"cockpit-item-arr\">\u2192<\/span>\r\n        <\/div>\r\n\r\n        <div class=\"cockpit-item\" data-index=\"5\">\r\n          <span class=\"cockpit-item-num\">06<\/span>\r\n          <div class=\"cockpit-item-meta\">\r\n            <h3 class=\"cockpit-item-title\">Livraison<\/h3>\r\n            <span class=\"cockpit-item-sub\">D\u00e9ploiement &amp; Suivi<\/span>\r\n          <\/div>\r\n          <span class=\"cockpit-item-arr\">\u2192<\/span>\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n      <div class=\"cockpit-display\" id=\"proc-cockpit-display\">\r\n        \r\n        <div class=\"cockpit-bg-layer active\" style=\"background-image:url('http:\/\/www.output-agency.fr\/wp-content\/uploads\/2026\/03\/Graphic-designer-working-on-logo-branding-dark-studio-lighting-cinematic-professional_-1.jpg');\"><\/div>\r\n        <div class=\"cockpit-bg-layer\" style=\"background-image:url('http:\/\/www.output-agency.fr\/wp-content\/uploads\/2026\/03\/SEO-analytics-dashboard-data-visualization-on-screen-with-this-color-FCCE03-004053_-dark-teal-mood-cinematic_.jpg');\"><\/div>\r\n        <div class=\"cockpit-bg-layer\" style=\"background-image:url('http:\/\/www.output-agency.fr\/wp-content\/uploads\/2026\/03\/Professional-digital-marketing-team-working-on-laptop-dark-teal-background-cinematic_.jpg');\"><\/div>\r\n        <div class=\"cockpit-bg-layer\" style=\"background-image:url('http:\/\/www.output-agency.fr\/wp-content\/uploads\/2026\/03\/Web-developer-coding-on-2-screens-dark-blue-atmosphere-cinematic-professional_.jpg');\"><\/div>\r\n        <div class=\"cockpit-bg-layer\" style=\"background-image:url('http:\/\/www.output-agency.fr\/wp-content\/uploads\/2026\/03\/Social-media-content-creator-working-on-multiple-screens-dark-background-cinematic_.jpg');\"><\/div>\r\n        <div class=\"cockpit-bg-layer\" style=\"background-image:url('http:\/\/www.output-agency.fr\/wp-content\/uploads\/2026\/03\/Modern-creative-agency-team-meeting-dark-office-cinematic-lighting-professional_.jpg');\"><\/div>\r\n\r\n        <div class=\"cockpit-overlay\"><\/div>\r\n\r\n        <div class=\"cockpit-content\">\r\n          <span class=\"cockpit-badge\" id=\"c-badge\">\u00c9TAPE 01 \u00b7 CADRAGE<\/span>\r\n          <h3 class=\"cockpit-h3\" id=\"c-title\">Brief &amp; Objectifs<\/h3>\r\n          <p class=\"cockpit-p\" id=\"c-desc\">Compr\u00e9hension approfondie de votre vision, de vos enjeux commerciaux et identification des cibles prioritaires pour votre march\u00e9.<\/p>\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <div class=\"oa-divider\"><\/div>\r\n\r\n  <section id=\"output-values\" class=\"oa-section sec-pad\">\r\n    <div style=\"display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:3.5rem;flex-wrap:wrap;gap:2rem;\">\r\n      <div>\r\n        <span class=\"sec-tag\">Notre ADN<\/span>\r\n        <h2 class=\"sec-title\" style=\"margin-bottom:0;\">Ce qui nous d\u00e9finit<\/h2>\r\n      <\/div>\r\n      <p style=\"max-width:340px;color:var(--muted);font-size:0.92rem;line-height:1.75;margin:0;\">Six piliers forg\u00e9s par l'exp\u00e9rience. Chacun est une promesse envers nos partenaires que nous ne transigeons jamais.<\/p>\r\n    <\/div>\r\n\r\n    <div class=\"grid-3\">\r\n      <div class=\"val-card\" style=\"background-image:url('http:\/\/www.output-agency.fr\/wp-content\/uploads\/2026\/03\/Solid-rock-foundation-architecture-dark-teal-atmosphere-cinematic-professional_.jpg')\">\r\n        <div class=\"val-card-overlay\"><\/div>\r\n        <div class=\"val-content\">\r\n          <h3 class=\"val-name\">Fiabilit\u00e9<\/h3>\r\n          <p class=\"val-text\">Un partenaire sur lequel vous pouvez compter. Nos engagements sont tenus, nos r\u00e9sultats sont mesurables.<\/p>\r\n        <\/div>\r\n        <span class=\"val-bg\">01<\/span>\r\n      <\/div>\r\n\r\n      <div class=\"val-card\" style=\"background-image:url('http:\/\/www.output-agency.fr\/wp-content\/uploads\/2026\/03\/Athlete-sprinting-fast-motion-blur-dark-background-cinematic-professional_.jpg')\">\r\n        <div class=\"val-card-overlay\"><\/div>\r\n        <div class=\"val-content\">\r\n          <h3 class=\"val-name\">Rapidit\u00e9<\/h3>\r\n          <p class=\"val-text\">R\u00e9activit\u00e9 et c\u00e9l\u00e9rit\u00e9 dans l'ex\u00e9cution. Nous livrons dans les d\u00e9lais sans jamais sacrifier la qualit\u00e9.<\/p>\r\n        <\/div>\r\n        <span class=\"val-bg\">02<\/span>\r\n      <\/div>\r\n\r\n      <div class=\"val-card\" style=\"background-image:url('http:\/\/www.output-agency.fr\/wp-content\/uploads\/2026\/03\/Yoga-flexible-pose-dark-studio-cinematic-lighting-professional.jpg')\">\r\n        <div class=\"val-card-overlay\"><\/div>\r\n        <div class=\"val-content\">\r\n          <h3 class=\"val-name\">Flexibilit\u00e9<\/h3>\r\n          <p class=\"val-text\">Nous nous adaptons \u00e0 vos r\u00e9alit\u00e9s \u2014 budget, d\u00e9lais, contraintes \u2014 sans jamais perdre en qualit\u00e9 d'ex\u00e9cution.<\/p>\r\n        <\/div>\r\n        <span class=\"val-bg\">03<\/span>\r\n      <\/div>\r\n\r\n      <div class=\"val-card\" style=\"background-image:url('http:\/\/www.output-agency.fr\/wp-content\/uploads\/2026\/03\/Lightning-bolt-energy-strike-dark-stormy-background-yellow-FCCE03-electric-glow-cinematic-dramatic-powerful-1.jpg')\">\r\n        <div class=\"val-card-overlay\"><\/div>\r\n        <div class=\"val-content\">\r\n          <h3 class=\"val-name\">Force<\/h3>\r\n          <p class=\"val-text\">Une \u00e9quipe engag\u00e9e qui d\u00e9fend vos int\u00e9r\u00eats et n'h\u00e9site pas \u00e0 prendre des positions audacieuses pour votre marque.<\/p>\r\n        <\/div>\r\n        <span class=\"val-bg\">04<\/span>\r\n      <\/div>\r\n\r\n      <div class=\"val-card\" style=\"background-image:url('http:\/\/www.output-agency.fr\/wp-content\/uploads\/2026\/03\/Elegant-statue-wearing-fashion-sunglasses-yellow-FCCE03-color-dark-teal-004053-background-cinematic-studio-lighting-luxury_-1.jpg')\">\r\n        <div class=\"val-card-overlay\"><\/div>\r\n        <div class=\"val-content\">\r\n          <h3 class=\"val-name\">Harmonie<\/h3>\r\n          <p class=\"val-text\">Aligner votre image, vos \u00e9quipes et vos canaux en un \u00e9cosyst\u00e8me coh\u00e9rent pour une communication impactante.<\/p>\r\n        <\/div>\r\n        <span class=\"val-bg\">05<\/span>\r\n      <\/div>\r\n\r\n      <div class=\"val-card\" style=\"background-image:url('http:\/\/www.output-agency.fr\/wp-content\/uploads\/2026\/03\/Swiss-luxury-watch-mechanism-gears-close-up-macro-dark-background-yellow-FCCE03-golden-light-cinematic-premium_.jpg')\">\r\n        <div class=\"val-card-overlay\"><\/div>\r\n        <div class=\"val-content\">\r\n          <h3 class=\"val-name\">Performance<\/h3>\r\n          <p class=\"val-text\">Chaque d\u00e9cision est orient\u00e9e r\u00e9sultat. Nous mesurons, optimisons et it\u00e9rons pour d\u00e9passer les objectifs fix\u00e9s.<\/p>\r\n        <\/div>\r\n        <span class=\"val-bg\">06<\/span>\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <div class=\"oa-divider\"><\/div>\r\n\r\n  <section id=\"output-portfolio\" class=\"oa-section sec-pad sec-alt\">\r\n    <span class=\"sec-tag\">Nos r\u00e9alisations<\/span>\r\n    <h2 class=\"sec-title\">Portfolio<\/h2>\r\n    <p class=\"sec-sub\">Plateformes web, pr\u00e9sence sur les r\u00e9seaux sociaux et campagnes d'envergure pour nos partenaires.<\/p>\r\n\r\n    <div class=\"portfolio-category-title\">Pr\u00e9sence Digitale &amp; Sites Web G\u00e9r\u00e9s<\/div>\r\n    <div class=\"proj-grid-showcase\">\r\n      <div class=\"proj-card-direct\">\r\n        <div>\r\n          <div class=\"proj-scope-badge\">E-Commerce &amp; Strat\u00e9gie Digitale<\/div>\r\n          <h3>Mypharmacy.tn<\/h3>\r\n          <p>Gestion de la pr\u00e9sence digitale compl\u00e8te, campagnes d'acquisition payante et optimisation ergonomique du site marchand.<\/p>\r\n        <\/div>\r\n        <a href=\"https:\/\/www.mypharmacy.tn\" target=\"_blank\" rel=\"noopener\" class=\"proj-direct-link\">Visiter le site web \u2192<\/a>\r\n      <\/div>\r\n\r\n      <div class=\"proj-card-direct\">\r\n        <div>\r\n          <div class=\"proj-scope-badge\">Branding &amp; Portail Web<\/div>\r\n          <h3>Maritrans Shipping<\/h3>\r\n          <p>Conception de l'identit\u00e9 visuelle et d\u00e9veloppement du site web institutionnel pour ce leader du transport maritime.<\/p>\r\n        <\/div>\r\n        <a href=\"https:\/\/www.maritrans.tn\" target=\"_blank\" rel=\"noopener\" class=\"proj-direct-link\">Visiter le site web \u2192<\/a>\r\n      <\/div>\r\n\r\n      <div class=\"proj-card-direct\">\r\n        <div>\r\n          <div class=\"proj-scope-badge\">Web &amp; Logistique B2B<\/div>\r\n          <h3>Genmar Maritime<\/h3>\r\n          <p>D\u00e9veloppement de la plateforme digitale et accompagnement dans la visibilit\u00e9 des solutions maritimes internationales.<\/p>\r\n        <\/div>\r\n        <a href=\"https:\/\/genmaritime.net\" target=\"_blank\" rel=\"noopener\" class=\"proj-direct-link\">Visiter le site web \u2192<\/a>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"portfolio-category-title\">Gestion des R\u00e9seaux Sociaux &amp; Image de Marque<\/div>\r\n    <div class=\"proj-grid-showcase\">\r\n      <div class=\"proj-card-direct\">\r\n        <div>\r\n          <div class=\"proj-scope-badge\">Finance &amp; Contenu Institutionnel<\/div>\r\n          <h3>STB Finance<\/h3>\r\n          <p>Production de contenus graphiques, campagnes institutionnelles et animation des r\u00e9seaux sociaux (+84M DT d'emprunts lev\u00e9s).<\/p>\r\n        <\/div>\r\n        <a href=\"https:\/\/www.facebook.com\/stbfinance\" target=\"_blank\" rel=\"noopener\" class=\"proj-direct-link\">Voir la page Facebook \u2192<\/a>\r\n      <\/div>\r\n\r\n      <div class=\"proj-card-direct\">\r\n        <div>\r\n          <div class=\"proj-scope-badge\">Transport Maritime &amp; Fret<\/div>\r\n          <h3>Tuniship<\/h3>\r\n          <p>Strat\u00e9gie \u00e9ditoriale, valorisation des solutions LCL\/FCL et gestion active de la communaut\u00e9 B2B.<\/p>\r\n        <\/div>\r\n        <a href=\"https:\/\/www.facebook.com\/Tuniship.net\" target=\"_blank\" rel=\"noopener\" class=\"proj-direct-link\">Voir la page Facebook \u2192<\/a>\r\n      <\/div>\r\n\r\n      <div class=\"proj-card-direct\">\r\n        <div>\r\n          <div class=\"proj-scope-badge\">\u00c9ducation &amp; Enseignement<\/div>\r\n          <h3>\u00c9cole Dar El Osra<\/h3>\r\n          <p>Gestion de la communication digitale, campagnes d'inscriptions et valorisation des activit\u00e9s de la Cha\u00eene Charlemagne.<\/p>\r\n        <\/div>\r\n        <a href=\"https:\/\/www.facebook.com\/EcoleDarElOsraChaineCharlemagne\" target=\"_blank\" rel=\"noopener\" class=\"proj-direct-link\">Voir la page Facebook \u2192<\/a>\r\n      <\/div>\r\n\r\n      <div class=\"proj-card-direct\">\r\n        <div>\r\n          <div class=\"proj-scope-badge\">Formation &amp; Enseignement Sup\u00e9rieur<\/div>\r\n          <h3>Institut La Renaissance<\/h3>\r\n          <p>Animation \u00e9ditoriale, valorisation des cursus acad\u00e9miques et campagnes de notori\u00e9t\u00e9 digitale.<\/p>\r\n        <\/div>\r\n        <a href=\"https:\/\/www.facebook.com\/larenaissanceinstitut\" target=\"_blank\" rel=\"noopener\" class=\"proj-direct-link\">Voir la page Facebook \u2192<\/a>\r\n      <\/div>\r\n\r\n      <div class=\"proj-card-direct\">\r\n        <div>\r\n          <div class=\"proj-scope-badge\">Logistique &amp; Supply Chain<\/div>\r\n          <h3>Kylog<\/h3>\r\n          <p>Cr\u00e9ation des supports visuels, communication digitale et accompagnement marketing sur les r\u00e9seaux sociaux.<\/p>\r\n        <\/div>\r\n        <a href=\"https:\/\/www.facebook.com\/KYLOGRA\" target=\"_blank\" rel=\"noopener\" class=\"proj-direct-link\">Voir la page Facebook \u2192<\/a>\r\n      <\/div>\r\n\r\n      <div class=\"proj-card-direct\">\r\n        <div>\r\n          <div class=\"proj-scope-badge\">Branding &amp; Univers de Marque<\/div>\r\n          <h3>K\u00f6rkem &amp; Co<\/h3>\r\n          <p>Conception de l'identit\u00e9 visuelle compl\u00e8te, packaging et univers de communication pour cette marque premium.<\/p>\r\n        <\/div>\r\n        <a href=\"https:\/\/www.facebook.com\/outputagency\" target=\"_blank\" rel=\"noopener\" class=\"proj-direct-link\">D\u00e9couvrir le projet \u2192<\/a>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"portfolio-category-title\">Projets Sp\u00e9ciaux &amp; Partenaires Historiques<\/div>\r\n    <div class=\"proj-grid-showcase\">\r\n      <div class=\"proj-card-direct\">\r\n        <div>\r\n          <div class=\"proj-scope-badge\">Sant\u00e9 &amp; Cosm\u00e9tique<\/div>\r\n          <h3>Pharmakenz<\/h3>\r\n          <p>Strat\u00e9gie de communication digitale, valorisation de la gamme pharmaceutique et gestion de pr\u00e9sence de marque.<\/p>\r\n        <\/div>\r\n        <a href=\"https:\/\/www.facebook.com\/outputagency\" target=\"_blank\" rel=\"noopener\" class=\"proj-direct-link\">Voir le dispositif \u2192<\/a>\r\n      <\/div>\r\n\r\n      <div class=\"proj-card-direct\">\r\n        <div>\r\n          <div class=\"proj-scope-badge\">Hospitalit\u00e9 &amp; R\u00e9sidence<\/div>\r\n          <h3>Dar Jannet<\/h3>\r\n          <p>Gestion de la pr\u00e9sence digitale, direction artistique de marque et valorisation visuelle des prestations exclusives.<\/p>\r\n        <\/div>\r\n        <a href=\"https:\/\/www.facebook.com\/outputagency\" target=\"_blank\" rel=\"noopener\" class=\"proj-direct-link\">Voir le dispositif \u2192<\/a>\r\n      <\/div>\r\n\r\n      <div class=\"proj-card-direct\">\r\n        <div>\r\n          <div class=\"proj-scope-badge\">Gastronomie &amp; P\u00e2tisserie Fine<\/div>\r\n          <h3>Jawhara Signature<\/h3>\r\n          <p>Cr\u00e9ation de la plateforme web de commande, shootings de catalogue et valorisation des gammes artisanales de prestige.<\/p>\r\n        <\/div>\r\n        <a href=\"https:\/\/www.facebook.com\/outputagency\" target=\"_blank\" rel=\"noopener\" class=\"proj-direct-link\">Voir les cr\u00e9ations \u2192<\/a>\r\n      <\/div>\r\n\r\n      <div class=\"proj-card-direct\">\r\n        <div>\r\n          <div class=\"proj-scope-badge\">Mode &amp; Stylisme<\/div>\r\n          <h3>KC O'Douwd<\/h3>\r\n          <p>Identit\u00e9 de marque, conception du site vitrine et d\u00e9ploiement de la communication de marque.<\/p>\r\n        <\/div>\r\n        <a href=\"https:\/\/www.facebook.com\/outputagency\" target=\"_blank\" rel=\"noopener\" class=\"proj-direct-link\">Voir les cr\u00e9ations \u2192<\/a>\r\n      <\/div>\r\n\r\n      <div class=\"proj-card-direct\">\r\n        <div>\r\n          <div class=\"proj-scope-badge\">Application &amp; Mobilit\u00e9<\/div>\r\n          <h3>RonDUU Driver<\/h3>\r\n          <p>Conception de l'interface applicative mobile, ergonomie UI\/UX et supports de communication de lancement.<\/p>\r\n        <\/div>\r\n        <a href=\"https:\/\/www.facebook.com\/outputagency\" target=\"_blank\" rel=\"noopener\" class=\"proj-direct-link\">Voir l'interface \u2192<\/a>\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <div class=\"oa-divider\"><\/div>\r\n\r\n  <section id=\"output-partners\" class=\"oa-section sec-pad\">\r\n    <span class=\"sec-tag\">\u00c9cosyst\u00e8me de confiance<\/span>\r\n    <h2 class=\"sec-title\">Nos partenaires<\/h2>\r\n    <p class=\"sec-sub\">Des leaders de l'industrie, de la finance, du fret et de l'\u00e9ducation s'appuient sur notre savoir-faire.<\/p>\r\n    \r\n    <div class=\"partner-marquee-track\">\r\n      <div class=\"partner-logo-item\"><img decoding=\"async\" src=\"http:\/\/www.output-agency.fr\/wp-content\/uploads\/2026\/03\/LOGOS-10-scaled.png\" alt=\"STB Finance\"><\/div>\r\n      <div class=\"partner-logo-item\"><img decoding=\"async\" src=\"http:\/\/www.output-agency.fr\/wp-content\/uploads\/2026\/03\/LOGOS-11-scaled.png\" alt=\"Tuniship\"><\/div>\r\n      <div class=\"partner-logo-item\"><img decoding=\"async\" src=\"http:\/\/www.output-agency.fr\/wp-content\/uploads\/2026\/03\/logo-mypharmacy.tn_Plan-de-travail-1.png\" alt=\"Mypharmacy\"><\/div>\r\n      <div class=\"partner-logo-item\"><img decoding=\"async\" src=\"http:\/\/www.output-agency.fr\/wp-content\/uploads\/2026\/03\/logo-maritrans_Plan-de-travail-1-scaled.png\" alt=\"Maritrans\"><\/div>\r\n      <div class=\"partner-logo-item\"><img decoding=\"async\" src=\"http:\/\/www.output-agency.fr\/wp-content\/uploads\/2026\/03\/logo_genmar.png\" alt=\"Genmar\"><\/div>\r\n      <div class=\"partner-logo-item\"><img decoding=\"async\" src=\"http:\/\/www.output-agency.fr\/wp-content\/uploads\/2026\/03\/larenaissance-1.png\" alt=\"La Renaissance\"><\/div>\r\n      <div class=\"partner-logo-item\"><img decoding=\"async\" src=\"http:\/\/www.output-agency.fr\/wp-content\/uploads\/2026\/03\/dar-el-osra-chaine-charlemagne.png\" alt=\"Ecole Dar El Osra\"><\/div>\r\n      <div class=\"partner-logo-item\"><img decoding=\"async\" src=\"http:\/\/www.output-agency.fr\/wp-content\/uploads\/2026\/03\/keylog-300x106-1.png\" alt=\"Kylog\"><\/div>\r\n      <div class=\"partner-logo-item\"><img decoding=\"async\" src=\"http:\/\/www.output-agency.fr\/wp-content\/uploads\/2026\/03\/logo-korkem.jpg\" alt=\"K\u00f6rkem &amp; Co\"><\/div>\r\n      <div class=\"partner-logo-item\"><img decoding=\"async\" src=\"http:\/\/www.output-agency.fr\/wp-content\/uploads\/2026\/03\/LOGOS-10-scaled.png\" alt=\"STB Finance\"><\/div>\r\n      <div class=\"partner-logo-item\"><img decoding=\"async\" src=\"http:\/\/www.output-agency.fr\/wp-content\/uploads\/2026\/03\/LOGOS-11-scaled.png\" alt=\"Tuniship\"><\/div>\r\n      <div class=\"partner-logo-item\"><img decoding=\"async\" src=\"http:\/\/www.output-agency.fr\/wp-content\/uploads\/2026\/03\/logo-mypharmacy.tn_Plan-de-travail-1.png\" alt=\"Mypharmacy\"><\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <div class=\"oa-divider\"><\/div>\r\n\r\n  <section id=\"output-about\">\r\n    <div class=\"about-visual\">\r\n      <img decoding=\"async\" src=\"http:\/\/www.output-agency.fr\/wp-content\/uploads\/2026\/03\/Modern-creative-agency-team-meeting-dark-office-cinematic-lighting-professional_.jpg\" alt=\"\u00c9quipe Output Agency\">\r\n    <\/div>\r\n    <div>\r\n      <span class=\"sec-tag\">Qui sommes-nous<\/span>\r\n      <h2 class=\"sec-title\">Dans la culture de l'image de marque<\/h2>\r\n      <p style=\"color:var(--muted);font-size:0.95rem;line-height:1.8;margin:1rem 0 0;\">Output est une agence de communication sp\u00e9cialis\u00e9e dans le marketing digital et le d\u00e9veloppement de solutions IT. Nous accompagnons nos partenaires dans leur communication ainsi que leur transformation digitale gr\u00e2ce \u00e0 nos \u00e9quipes hautement qualifi\u00e9es.<\/p>\r\n      <ul class=\"about-list\">\r\n        <li>Notre entreprise est situ\u00e9e \u00e0 Tunis, avec des partenaires dans le monde entier<\/li>\r\n        <li>Personnel national et international pour r\u00e9pondre \u00e0 toutes les exigences<\/li>\r\n        <li>Approche 100% orient\u00e9e r\u00e9sultats mesurables et satisfaction client<\/li>\r\n      <\/ul>\r\n\r\n      <div class=\"synergy-box\">\r\n        <b>Synergie Strat\u00e9gique &amp; E-Commerce avec MOOV Agency<\/b>\r\n        <p>En partenariat avec <b>MOOV Agency<\/b> (Luxembourg), nous op\u00e9rons \u00e9galement des dispositifs e-commerce int\u00e9gr\u00e9s (gestion de stock synchronis\u00e9, logistique et studio de production IA).<\/p>\r\n      <\/div>\r\n\r\n      <div style=\"margin-top:2rem;\">\r\n        <a href=\"#output-contact\" class=\"btn-y\">Travailler avec nous<\/a>\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <div class=\"oa-divider\"><\/div>\r\n\r\n  <section id=\"output-contact\" class=\"oa-section sec-pad sec-alt\">\r\n    <span class=\"sec-tag\">Parlons-nous<\/span>\r\n    <h2 class=\"sec-title\" style=\"margin-bottom:3rem;\">D\u00e9marrons votre projet<\/h2>\r\n    \r\n    <div class=\"contact-grid\">\r\n      <div style=\"display:flex;flex-direction:column;gap:2rem;\">\r\n        <div><span class=\"ci-label\">Email direct<\/span><span class=\"ci-val\"><a href=\"mailto:hello@output-agency.fr\">hello@output-agency.fr<\/a><\/span><\/div>\r\n        <div><span class=\"ci-label\">T\u00e9l\u00e9phone \/ WhatsApp<\/span><span class=\"ci-val\"><a href=\"tel:+21652403361\">+216 52 403 361<\/a><\/span><\/div>\r\n        <div><span class=\"ci-label\">Adresse<\/span><span class=\"ci-val\">18 Av. Habib Bourguiba, R\u00e9sidence Omar A401, M\u00e9grine, Tunisie<\/span><\/div>\r\n        <div><span class=\"ci-label\">Disponibilit\u00e9<\/span><span class=\"ci-val\">Lun \u2013 Ven \u00b7 9h \u2013 18h<\/span><\/div>\r\n        <a href=\"https:\/\/wa.me\/21652403361\" target=\"_blank\" rel=\"noopener\" class=\"btn-y\" style=\"width:fit-content;\">Ligne WhatsApp directe \u2192<\/a>\r\n      <\/div>\r\n\r\n      <form class=\"oa-form\" id=\"output-direct-form\">\r\n        <div class=\"form-row\">\r\n          <div class=\"form-grp\"><label class=\"form-lbl\">Pr\u00e9nom &amp; Nom *<\/label><input class=\"form-input\" id=\"inp-nom\" type=\"text\" placeholder=\"Votre nom\" required><\/div>\r\n          <div class=\"form-grp\"><label class=\"form-lbl\">T\u00e9l\u00e9phone \/ WhatsApp *<\/label><input class=\"form-input\" id=\"inp-tel\" type=\"tel\" placeholder=\"+216 ...\" required><\/div>\r\n        <\/div>\r\n        <div class=\"form-grp\"><label class=\"form-lbl\">Votre Email *<\/label><input class=\"form-input\" id=\"inp-mail\" type=\"email\" placeholder=\"votre@email.com\" required><\/div>\r\n        <div class=\"form-grp\"><label class=\"form-lbl\">Votre projet *<\/label><textarea class=\"form-ta\" id=\"inp-msg\" placeholder=\"D\u00e9crivez votre projet, vos objectifs, votre budget estim\u00e9...\" required><\/textarea><\/div>\r\n        <button type=\"submit\" class=\"btn-y\" style=\"align-self:flex-start;\">Envoyer sur WhatsApp \u2192<\/button>\r\n      <\/form>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <footer id=\"output-footer\">\r\n    <div class=\"footer-top\">\r\n      <img decoding=\"async\" src=\"http:\/\/www.output-agency.fr\/wp-content\/uploads\/2026\/03\/LOGO-OUTPUT-03-scaled.png\" alt=\"Output Agency\">\r\n      <ul class=\"footer-links\">\r\n        <li><a href=\"#output-services\">Services<\/a><\/li>\r\n        <li><a href=\"#output-process\">Process<\/a><\/li>\r\n        <li><a href=\"#output-portfolio\">Portfolio<\/a><\/li>\r\n        <li><a href=\"#output-values\">Notre ADN<\/a><\/li>\r\n        <li><a href=\"#output-partners\">Partenaires<\/a><\/li>\r\n        <li><a href=\"#output-about\">Agence<\/a><\/li>\r\n        <li><a href=\"\/studio\/\" style=\"color:var(--orange-2);font-weight:700;\">Studio IA \u2197<\/a><\/li>\r\n        <li><a href=\"https:\/\/www.facebook.com\/outputagency\" target=\"_blank\" rel=\"noopener\">Facebook<\/a><\/li>\r\n        <li><a href=\"https:\/\/www.linkedin.com\/company\/76545952\" target=\"_blank\" rel=\"noopener\">LinkedIn<\/a><\/li>\r\n      <\/ul>\r\n    <\/div>\r\n    <div class=\"footer-bot\">\r\n      <p class=\"footer-copy\">\u00a9 2026 <span>Output by Tess\u00e9ra<\/span>. Tous droits r\u00e9serv\u00e9s.<\/p>\r\n      <p class=\"footer-copy\">M\u00e9grine, Tunis \ud83c\uddf9\ud83c\uddf3<\/p>\r\n    <\/div>\r\n  <\/footer>\r\n\r\n<\/div>\r\n\r\n<script>\r\n(function() {\r\n  'use strict';\r\n\r\n  \/\/ 1. BARRE DE PROGRESSION GLOBALE\r\n  const bar = document.getElementById('oa-progress');\r\n  window.addEventListener('scroll', () => {\r\n    if (bar) {\r\n      bar.style.width = (window.scrollY \/ (document.body.scrollHeight - window.innerHeight) * 100) + '%';\r\n    }\r\n  }, { passive: true });\r\n\r\n  \/\/ 2. DONN\u00c9ES ET INTERACTION DU COCKPIT (OUR PROCESS)\r\n  const stepsData = [\r\n    {\r\n      badge: \"\u00c9TAPE 01 \u00b7 CADRAGE\",\r\n      title: \"Brief & Objectifs\",\r\n      desc: \"Compr\u00e9hension approfondie de votre vision, de vos enjeux commerciaux et identification des segments cibles prioritaires pour votre marque.\"\r\n    },\r\n    {\r\n      badge: \"\u00c9TAPE 02 \u00b7 INTELLIGENCE\",\r\n      title: \"Benchmark & Audit\",\r\n      desc: \"Analyse concurrentielle pointue, \u00e9tude des tendances sectorielles et d\u00e9tection des leviers de diff\u00e9renciation strat\u00e9giques.\"\r\n    },\r\n    {\r\n      badge: \"\u00c9TAPE 03 \u00b7 DESIGN & R&D\",\r\n      title: \"Cr\u00e9ation & Maquettes\",\r\n      desc: \"\u00c9laboration des chartes de marque, maquettes interactives et prototypes pixel-perfect con\u00e7us par notre laboratoire cr\u00e9atif.\"\r\n    },\r\n    {\r\n      badge: \"\u00c9TAPE 04 \u00b7 JALON TECHNIQUE\",\r\n      title: \"Pitstop & Validation\",\r\n      desc: \"Session de cadrage avec vos \u00e9quipes pour tester les concepts retenus et verrouiller les orientations techniques avant la production.\"\r\n    },\r\n    {\r\n      badge: \"\u00c9TAPE 05 \u00b7 CONFORMIT\u00c9\",\r\n      title: \"Debrief & Optimisations\",\r\n      desc: \"Int\u00e9gration rigoureuse de vos retours, tests de conformit\u00e9 mobile, audits SEO techniques et optimisation des temps de chargement.\"\r\n    },\r\n    {\r\n      badge: \"\u00c9TAPE 06 \u00b7 ACCOMPAGNEMENT\",\r\n      title: \"Livraison & Lancement\",\r\n      desc: \"Mise en ligne finale, passation technique compl\u00e8te de vos plateformes et monitoring continu des premiers indicateurs de rentabilit\u00e9.\"\r\n    }\r\n  ];\r\n\r\n  const items = document.querySelectorAll('.cockpit-item');\r\n  const layers = document.querySelectorAll('.cockpit-bg-layer');\r\n  const badgeEl = document.getElementById('c-badge');\r\n  const titleEl = document.getElementById('c-title');\r\n  const descEl = document.getElementById('c-desc');\r\n\r\n  function setProcessStep(idx) {\r\n    items.forEach((item, i) => {\r\n      item.classList.toggle('active', i === idx);\r\n    });\r\n    layers.forEach((layer, i) => {\r\n      layer.classList.toggle('active', i === idx);\r\n    });\r\n\r\n    const data = stepsData[idx];\r\n    if (data) {\r\n      badgeEl.textContent = data.badge;\r\n      titleEl.textContent = data.title;\r\n      descEl.textContent = data.desc;\r\n    }\r\n  }\r\n\r\n  items.forEach((item) => {\r\n    item.addEventListener('mouseenter', function() {\r\n      const idx = parseInt(this.getAttribute('data-index'), 10);\r\n      setProcessStep(idx);\r\n    });\r\n    item.addEventListener('click', function() {\r\n      const idx = parseInt(this.getAttribute('data-index'), 10);\r\n      setProcessStep(idx);\r\n    });\r\n  });\r\n\r\n  \/\/ 3. COMPTEURS STATISTIQUES HERO & BENTO\r\n  const counters = document.querySelectorAll('.counter, .stat-n');\r\n  let animated = false;\r\n\r\n  function runCounters() {\r\n    counters.forEach(c => {\r\n      const target = +c.dataset.target;\r\n      if (!target) return;\r\n      const raw = c.innerText;\r\n      const suffix = raw.replace(\/[0-9]\/g, '');\r\n      let count = 0;\r\n      const step = Math.ceil(target \/ 40);\r\n      const timer = setInterval(() => {\r\n        count += step;\r\n        if (count >= target) {\r\n          c.innerText = target + suffix;\r\n          clearInterval(timer);\r\n        } else {\r\n          c.innerText = count + suffix;\r\n        }\r\n      }, 30);\r\n    });\r\n  }\r\n\r\n  window.addEventListener('scroll', () => {\r\n    const hero = document.getElementById('output-hero');\r\n    if (!hero) return;\r\n    if (hero.getBoundingClientRect().top < window.innerHeight && !animated) {\r\n      animated = true;\r\n      runCounters();\r\n    }\r\n  }, { passive: true });\r\n\r\n  \/\/ 4. FORMULAIRE VERS WHATSAPP DIRECT\r\n  const form = document.getElementById('output-direct-form');\r\n  if (form) {\r\n    form.addEventListener('submit', function(e) {\r\n      e.preventDefault();\r\n      const nom = document.getElementById('inp-nom').value.trim();\r\n      const tel = document.getElementById('inp-tel').value.trim();\r\n      const mail = document.getElementById('inp-mail').value.trim();\r\n      const msg = document.getElementById('inp-msg').value.trim();\r\n\r\n      const text = `Bonjour Output Agency,\\nJe vous contacte depuis le site output-agency.fr :\\n\\n- Nom : ${nom}\\n- T\u00e9l\u00e9phone : ${tel}\\n- Email : ${mail}\\n- Projet : ${msg}`;\r\n      window.open(`https:\/\/wa.me\/21652403361?text=${encodeURIComponent(text)}`, '_blank');\r\n    });\r\n  }\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-6610d3b e-flex e-con-boxed e-con e-parent\" data-id=\"6610d3b\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Services Process Portfolio Notre ADN Partenaires Agence Studio IA \u2197 Contact Output by Tess\u00e9ra \u00b7 Tunis &amp; International On ne vend pas du marketing. On ram\u00e8ne des clients. 150 projets livr\u00e9s. 98% de clients satisfaits. Branding, acquisition digitale, d\u00e9veloppement web et automatisation IA \u2014 une seule \u00e9quipe, des r\u00e9sultats mesurables chaque semaine. D\u00e9marrer un projet [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-7","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"http:\/\/www.output-agency.fr\/index.php?rest_route=\/wp\/v2\/pages\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.output-agency.fr\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/www.output-agency.fr\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/www.output-agency.fr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.output-agency.fr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=7"}],"version-history":[{"count":42,"href":"http:\/\/www.output-agency.fr\/index.php?rest_route=\/wp\/v2\/pages\/7\/revisions"}],"predecessor-version":[{"id":177,"href":"http:\/\/www.output-agency.fr\/index.php?rest_route=\/wp\/v2\/pages\/7\/revisions\/177"}],"wp:attachment":[{"href":"http:\/\/www.output-agency.fr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}