{"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-03-23T12:49:45","modified_gmt":"2026-03-23T11:49:45","slug":"accueil","status":"publish","type":"page","link":"https:\/\/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<!-- OUTPUT BY TESS\u00c9RA \u2014 CODE FINAL COMPLET V3 -->\r\n<style>\r\n:root {\r\n  --bg:      #004053;\r\n  --bg-deep: #002a37;\r\n  --bg-mid:  #003244;\r\n  --bg-dark: #001e28;\r\n  --acc:     #FCCE03;\r\n  --acc-d:   rgba(252,206,3,0.12);\r\n  --acc-g:   rgba(252,206,3,0.30);\r\n  --wh:      #FFFFFF;\r\n  --lt:      #D3DFED;\r\n  --lt-d:    rgba(211,223,237,0.5);\r\n  --bdr:     rgba(211,223,237,0.10);\r\n  --font:    'Nirmala UI','Segoe UI','DM Sans',sans-serif;\r\n}\r\n\r\n#output-site-wrapper {\r\n  font-family: var(--font);\r\n  background: var(--bg);\r\n  color: var(--wh);\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: hidden;\r\n  box-sizing: border-box;\r\n}\r\n\r\n\/* \u2550\u2550 NAV \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: 1rem 6vw;\r\n  z-index: 9999;\r\n  border-bottom: 1px solid var(--bdr);\r\n  backdrop-filter: blur(14px);\r\n  background: rgba(0,30,40,0.88);\r\n}\r\n.output-logo img {\r\n  height: 55px;\r\n  width: auto;\r\n  display: block;\r\n}\r\n.output-nav-links {\r\n  display: flex;\r\n  gap: 2.2rem;\r\n  list-style: none;\r\n  margin: 0; padding: 0;\r\n  position: absolute;\r\n  left: 50%;\r\n  transform: translateX(-50%);\r\n}\r\n.output-nav-links a {\r\n  color: var(--lt);\r\n  text-decoration: none;\r\n  font-size: 0.78rem;\r\n  font-weight: 700;\r\n  letter-spacing: 0.12em;\r\n  text-transform: uppercase;\r\n  transition: color 0.2s;\r\n}\r\n.output-nav-links a:hover { color: var(--acc); }\r\n.output-nav-cta {\r\n  background: var(--acc) !important;\r\n  color: var(--bg-deep) !important;\r\n  padding: 0.5rem 1.3rem !important;\r\n  border-radius: 4px;\r\n}\r\n\r\n\/* \u2550\u2550 BOUTONS \u2550\u2550 *\/\r\n.btn-y { display:inline-block;background:var(--acc);color:var(--bg-deep);font-weight:800;font-size:0.88rem;letter-spacing:0.08em;text-transform:uppercase;text-decoration:none;padding:1rem 2.2rem;border-radius:5px;transition:box-shadow 0.3s,transform 0.2s; }\r\n.btn-y:hover { box-shadow:0 8px 32px var(--acc-g);transform:translateY(-2px); }\r\n.btn-ghost { display:inline-flex;align-items:center;gap:0.5rem;color:var(--lt);font-size:0.88rem;font-weight:600;text-decoration:none;transition:color 0.25s,gap 0.25s; }\r\n.btn-ghost::after { content:'\u2192'; }\r\n.btn-ghost:hover { color:var(--acc);gap:0.9rem; }\r\n\r\n\/* \u2550\u2550 CHEVRONS \u2550\u2550 *\/\r\n.chev-bg { position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden; }\r\n.chev-bg svg { position:absolute; }\r\n#output-site-wrapper section > *:not(.chev-bg) { position:relative;z-index:1; }\r\n\r\n\/* \u2550\u2550 DIVIDER \u2550\u2550 *\/\r\n.oa-divider { width:100%;height:1px;background:linear-gradient(90deg,transparent,var(--acc),transparent);opacity:0.2; }\r\n\r\n\/* \u2550\u2550 SECTIONS \u2550\u2550 *\/\r\n.oa-section { position:relative;overflow:hidden;width:100%;box-sizing:border-box; }\r\n.sec-pad { padding:7rem 6vw; }\r\n.sec-tag { display:block;font-size:0.68rem;font-weight:800;letter-spacing:0.22em;text-transform:uppercase;color:var(--acc);margin-bottom:0.9rem; }\r\n.sec-title { font-size:clamp(2rem,4.2vw,3.6rem);font-weight:900;letter-spacing:-0.025em;line-height:1.05;color:var(--wh);margin:0 0 1rem; }\r\n.sec-sub { color:var(--lt);font-size:0.95rem;line-height:1.8;max-width:500px;margin-bottom:3.5rem; }\r\n.grid-3 { display:grid;grid-template-columns:repeat(3,1fr);gap:1px; }\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 HERO \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n#output-hero {\r\n  position:relative;\r\n  min-height:100vh;\r\n  display:flex;\r\n  flex-direction:column;\r\n  justify-content:center;\r\n  padding:10rem 8vw 6rem;\r\n  background:var(--bg-deep);\r\n  overflow:hidden;\r\n}\r\n#output-hero::after { content:'';position:absolute;top:-20%;right:-8%;width:60vw;height:60vw;background:radial-gradient(circle,rgba(252,206,3,0.055) 0%,transparent 65%);pointer-events:none;z-index:0; }\r\n\r\n.hero-tag { display:inline-flex;align-items:center;gap:0.6rem;background:var(--acc-d);border:1px solid rgba(252,206,3,0.28);color:var(--acc);font-size:0.72rem;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;padding:0.45rem 1rem;border-radius:100px;margin-bottom:2.2rem;width:fit-content; }\r\n.hero-tag::before { content:'';width:6px;height:6px;background:var(--acc);border-radius:50%;box-shadow:0 0 8px var(--acc);animation:blink 2s ease-in-out infinite;flex-shrink:0; }\r\n@keyframes blink { 0%,100%{opacity:1}50%{opacity:0.1} }\r\n\r\n.hero-title { font-size:clamp(3.2rem,8.5vw,9rem);font-weight:900;line-height:0.92;letter-spacing:-0.03em;margin:0 0 2rem;color:var(--wh);max-width:900px; }\r\n.hero-title .acc { display:block;color:var(--acc);text-shadow:0 0 60px rgba(252,206,3,0.25); }\r\n.hero-title .str { display:block;-webkit-text-stroke:2px rgba(255,255,255,0.2);color:transparent; }\r\n.hero-sub { font-size:clamp(1rem,1.7vw,1.2rem);color:var(--lt);line-height:1.75;max-width:520px;margin-bottom:2.8rem; }\r\n.hero-actions { display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;margin-bottom:5rem; }\r\n\r\n.hero-stats { display:flex;gap:0;padding-top:3rem;border-top:1px solid var(--bdr);flex-wrap:wrap;justify-content:center;width:100%; }\r\n.hero-stat-item { display:flex;flex-direction:column;align-items:center;text-align:center;flex:1;min-width:140px;padding:0 2rem;border-right:1px solid var(--bdr); }\r\n.hero-stat-item:last-child { border-right:none; }\r\n.stat-n { display:block;font-size:clamp(2.5rem,5vw,4rem);font-weight:900;color:var(--acc);line-height:1; }\r\n.stat-l { display:block;font-size:0.75rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--lt-d);margin-top:0.5rem; }\r\n\r\n\/* ORB *\/\r\n.output-hero-orb { position:absolute;right:7vw;top:50%;transform:translateY(-50%);z-index:1;animation:floatOrb 7s ease-in-out infinite;display:none;align-items:center;justify-content:center;pointer-events:none; }\r\n@media (min-width:1100px) { .output-hero-orb { display:flex; } }\r\n@keyframes floatOrb { 0%,100%{transform:translateY(-50%)}50%{transform:translateY(calc(-50% - 22px))} }\r\n.orb-ring { position:absolute;border-radius:50%;border:1px solid;left:50%;top:50%;transform:translate(-50%,-50%);animation:rp 4.5s ease-out infinite; }\r\n.orb-ring:nth-child(1){width:200px;height:200px;border-color:rgba(252,206,3,0.2);}\r\n.orb-ring:nth-child(2){width:300px;height:300px;border-color:rgba(252,206,3,0.1);animation-delay:1.5s;}\r\n.orb-ring:nth-child(3){width:420px;height:420px;border-color:rgba(252,206,3,0.05);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 { width:150px;height:150px;border-radius:50%;background:radial-gradient(circle at 35% 35%,rgba(252,206,3,0.25),rgba(0,64,83,0.85) 60%,transparent);border:1px solid rgba(252,206,3,0.25);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(8px); }\r\n.orb-core img { width:80px;height:auto;filter:brightness(0) invert(1) sepia(1) saturate(3) hue-rotate(5deg); }\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 SERVICES \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n#output-services { background:var(--bg-mid); }\r\n.srv-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:1.5px; }\r\n.srv-card { position:relative;overflow:hidden;border:1px solid var(--bdr);transition:transform 0.3s,border-color 0.3s;min-height:320px;display:flex;flex-direction:column;justify-content:flex-end; }\r\n.srv-card:hover { transform:translateY(-4px);border-color:rgba(252,206,3,0.3); }\r\n.srv-card-img { position:absolute;inset:0;background-size:cover;background-position:center;transition:transform 0.5s; }\r\n.srv-card:hover .srv-card-img { transform:scale(1.05); }\r\n.srv-card-overlay { position:absolute;inset:0;background:linear-gradient(to top,rgba(0,20,30,0.95) 0%,rgba(0,40,55,0.7) 50%,rgba(0,40,55,0.2) 100%);transition:background 0.3s; }\r\n.srv-card:hover .srv-card-overlay { background:linear-gradient(to top,rgba(0,20,30,0.98) 0%,rgba(0,40,55,0.8) 50%,rgba(252,206,3,0.05) 100%); }\r\n.srv-card-content { position:relative;z-index:2;padding:2rem; }\r\n.srv-card::before { content:'';position:absolute;bottom:0;left:0;width:100%;height:3px;background:var(--acc);transform:scaleX(0);transform-origin:left;transition:transform 0.4s cubic-bezier(0.16,1,0.3,1);z-index:3; }\r\n.srv-card:hover::before { transform:scaleX(1); }\r\n.srv-title { font-size:1.15rem;font-weight:800;color:var(--wh);margin:0 0 0.6rem; }\r\n.srv-text { font-size:0.82rem;color:var(--lt-d);line-height:1.7;margin:0 0 1rem; }\r\n.srv-tags { display:flex;flex-wrap:wrap;gap:0.35rem; }\r\n.srv-tag { font-size:0.64rem;font-weight:700;letter-spacing:0.08em;color:var(--acc);border:1px solid rgba(252,206,3,0.2);padding:0.18rem 0.55rem;border-radius:100px;text-transform:uppercase; }\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 PROCESS \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n#output-process { background:var(--bg-deep); }\r\n.process-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:1rem; }\r\n.process-step { background:rgba(0,42,55,0.55);border:1px solid var(--bdr);padding:2.5rem 2rem;position:relative;overflow:hidden;transition:background 0.3s,transform 0.3s,border-color 0.3s; }\r\n.process-step:hover { background:rgba(252,206,3,0.05);border-color:rgba(252,206,3,0.2);transform:translateY(-3px); }\r\n.process-step-num { font-size:4rem;font-weight:900;color:var(--acc);opacity:0.15;line-height:1;margin-bottom:1rem;display:block; }\r\n.process-step-title { font-size:1.2rem;font-weight:800;color:var(--acc);margin:0 0 0.5rem; }\r\n.process-step-sub { font-size:0.85rem;color:var(--lt-d);line-height:1.7;font-weight:600; }\r\n.process-step-desc { font-size:0.8rem;color:var(--lt-d);line-height:1.7;margin-top:0.5rem; }\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 VALEURS \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n#output-values { background:var(--bg-mid); }\r\n.val-card { background:rgba(0,42,55,0.55);border:1px solid var(--bdr);padding:2.5rem 2rem;position:relative;overflow:hidden;transition:background 0.3s,transform 0.3s,border-color 0.3s;background-size:cover;background-position:center;min-height:250px;display:flex;flex-direction:column;justify-content:flex-end; }\r\n.val-card-overlay { position:absolute;inset:0;background:linear-gradient(to top,rgba(0,20,30,0.95) 0%,rgba(0,40,55,0.75) 60%,rgba(0,40,55,0.3) 100%); }\r\n.val-card::before { content:'';position:absolute;top:0;left:0;width:100%;height:3px;background:var(--acc);transform:scaleX(0);transform-origin:left;transition:transform 0.4s cubic-bezier(0.16,1,0.3,1);z-index:3; }\r\n.val-card:hover { transform:translateY(-3px); }\r\n.val-card:hover::before { transform:scaleX(1); }\r\n.val-content { position:relative;z-index:2; }\r\n.val-name { font-size:1.3rem;font-weight:900;color:var(--wh);margin:0 0 0.7rem; }\r\n.val-text { font-size:0.82rem;color:var(--lt-d);line-height:1.75;margin:0; }\r\n.val-bg { position:absolute;bottom:-0.5rem;right:1rem;font-size:6rem;font-weight:900;color:rgba(255,255,255,0.05);line-height:1;pointer-events:none;user-select:none;z-index:1; }\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 PORTFOLIO \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n#output-portfolio { background:var(--bg-deep); }\r\n.proj-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:1px; }\r\n.proj-card { background:var(--bg-dark);border:1px solid var(--bdr);padding:2.5rem 2rem 2rem;display:flex;flex-direction:column;justify-content:flex-end;min-height:260px;position:relative;overflow:hidden;transition:border-color 0.3s,transform 0.3s;cursor:pointer; }\r\n.proj-card:hover { border-color:rgba(252,206,3,0.28);transform:translateY(-3px); }\r\n.proj-card.feat { grid-column:span 2;background:linear-gradient(135deg,rgba(0,50,68,0.9),rgba(0,26,36,0.95)); }\r\n.proj-n { position:absolute;top:1.5rem;right:1.8rem;font-size:3.5rem;font-weight:900;color:rgba(255,255,255,0.04);line-height:1; }\r\n.proj-cat { font-size:0.65rem;font-weight:800;letter-spacing:0.18em;color:var(--acc);text-transform:uppercase;margin-bottom:0.6rem;display:block; }\r\n.proj-title { font-size:1.2rem;font-weight:900;color:var(--wh);margin:0 0 0.5rem; }\r\n.proj-desc { font-size:0.8rem;color:var(--lt-d);line-height:1.65;margin:0 0 1.2rem; }\r\n.proj-link { font-size:0.72rem;font-weight:800;letter-spacing:0.1em;text-transform:uppercase;color:var(--acc);text-decoration:none;display:inline-flex;align-items:center;gap:0.35rem;transition:gap 0.2s; }\r\n.proj-link:hover { gap:0.7rem; }\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 PARTENAIRES \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n#output-partners { background:var(--bg-mid); }\r\n.partners-grid {\r\n  display: grid;\r\n  grid-template-columns: repeat(4, 1fr);\r\n  gap: 1px;\r\n  margin-top: 1rem;\r\n}\r\n.partner-card {\r\n  background: rgba(0,26,36,0.6);\r\n  border: 1px solid var(--bdr);\r\n  padding: 2rem 1.5rem;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  transition: background 0.3s, border-color 0.3s;\r\n  min-height: 100px;\r\n}\r\n.partner-card:hover {\r\n  background: rgba(252,206,3,0.05);\r\n  border-color: rgba(252,206,3,0.2);\r\n}\r\n.partner-card img {\r\n  max-width: 130px;\r\n  max-height: 55px;\r\n  width: auto;\r\n  height: auto;\r\n  object-fit: contain;\r\n  filter: grayscale(1) brightness(2);\r\n  opacity: 0.55;\r\n  transition: opacity 0.3s, filter 0.3s;\r\n}\r\n.partner-card:hover img {\r\n  opacity: 1;\r\n  filter: grayscale(0) brightness(1);\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 \u00c0 PROPOS \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n#output-about { background:var(--bg-deep);display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center;padding:7rem 6vw;position:relative;overflow:hidden; }\r\n.about-visual { position:relative;border-radius:12px;overflow:hidden;aspect-ratio:4\/3; }\r\n.about-visual img { width:100%;height:100%;object-fit:cover;display:block; }\r\n.about-visual::after { content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(0,64,83,0.4),transparent); }\r\n.about-badge { position:absolute;bottom:-1rem;right:-1rem;background:var(--acc);color:var(--bg-deep);font-size:0.68rem;font-weight:900;letter-spacing:0.06em;text-transform:uppercase;padding:0.9rem 1.2rem;border-radius:7px;box-shadow:0 6px 24px var(--acc-g);text-align:center;line-height:1.4;z-index:2; }\r\n.about-list { list-style:none;margin:1.5rem 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.88rem;color:var(--lt);line-height:1.6; }\r\n.about-list li::before { content:'\u2192';color:var(--acc);font-weight:900;flex-shrink:0;margin-top:1px; }\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 BLOG \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n#output-blog { background:var(--bg-mid); }\r\n.blog-card { background:rgba(0,26,36,0.65);border:1px solid var(--bdr);padding:2.2rem 1.8rem;display:flex;flex-direction:column;position:relative;overflow:hidden;transition:border-color 0.3s,transform 0.3s; }\r\n.blog-card::after { content:'';position:absolute;top:0;left:0;width:100%;height:2px;background:var(--acc);transform:scaleX(0);transform-origin:left;transition:transform 0.4s cubic-bezier(0.16,1,0.3,1); }\r\n.blog-card:hover { border-color:rgba(252,206,3,0.2);transform:translateY(-3px); }\r\n.blog-card:hover::after { transform:scaleX(1); }\r\n.blog-cat { font-size:0.65rem;font-weight:800;letter-spacing:0.18em;color:var(--acc);text-transform:uppercase;margin-bottom:0.9rem;display:block; }\r\n.blog-title { font-size:1.05rem;font-weight:800;color:var(--wh);margin:0 0 0.7rem;line-height:1.3;flex:1; }\r\n.blog-exc { font-size:0.8rem;color:var(--lt-d);line-height:1.7;margin:0 0 1.3rem; }\r\n.blog-foot { display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--bdr);padding-top:0.9rem;font-size:0.68rem;color:var(--lt-d);font-weight:600; }\r\n.blog-lire { color:var(--acc);font-weight:800;text-decoration:none;font-size:0.65rem;letter-spacing:0.1em;text-transform:uppercase;display:inline-flex;align-items:center;gap:0.3rem;transition:gap 0.2s; }\r\n.blog-lire:hover { gap:0.6rem; }\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 CONTACT \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n#output-contact { background:var(--bg-deep); }\r\n.contact-grid { display:grid;grid-template-columns:1fr 1.4fr;gap:5rem;align-items:start; }\r\n.ci-label { font-size:0.65rem;font-weight:800;letter-spacing:0.2em;text-transform:uppercase;color:var(--acc);opacity:0.65;display:block;margin-bottom:0.3rem; }\r\n.ci-val { font-size:0.95rem;font-weight:600;color:var(--lt); }\r\n.ci-val a { color:var(--wh);text-decoration:none;transition:color 0.2s; }\r\n.ci-val a:hover { color:var(--acc); }\r\n.oa-form { display:flex;flex-direction:column;gap:1.1rem; }\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.65rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--lt-d); }\r\n.form-input,.form-ta { background:rgba(0,26,36,0.8);border:1px solid var(--bdr);border-radius:5px;padding:0.8rem 1rem;color:var(--wh);font-family:var(--font);font-size:0.88rem;transition:border-color 0.25s;outline:none;width:100%;box-sizing:border-box; }\r\n.form-input:focus,.form-ta:focus { border-color:rgba(252,206,3,0.38); }\r\n.form-input::placeholder,.form-ta::placeholder { color:rgba(211,223,237,0.3); }\r\n.form-ta { min-height:120px;resize:vertical; }\r\n.btn-submit { background:var(--acc);color:var(--bg-deep);font-weight:800;font-size:0.82rem;letter-spacing:0.1em;text-transform:uppercase;border:none;padding:0.9rem 2.2rem;border-radius:5px;cursor:pointer;transition:box-shadow 0.3s,transform 0.2s;font-family:var(--font);align-self:flex-start; }\r\n.btn-submit:hover { box-shadow:0 6px 28px var(--acc-g);transform:translateY(-2px); }\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 FOOTER \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n#output-footer { background:var(--bg-dark);padding:3rem 6vw 2rem;border-top:1px solid var(--bdr); }\r\n.footer-top { display:flex;align-items:center;justify-content:space-between;padding-bottom:2rem;border-bottom:1px solid var(--bdr);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; }\r\n.footer-links a { color:var(--lt-d);text-decoration:none;font-size:0.75rem;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;transition:color 0.2s; }\r\n.footer-links a:hover { color:var(--acc); }\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.75rem;color:var(--lt-d); }\r\n.footer-copy span { color:var(--acc); }\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 RESPONSIVE \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n@media (max-width:1100px) {\r\n  .output-hero-orb { display:none !important; }\r\n  #output-about { grid-template-columns:1fr;gap:3rem;padding:5rem 6vw; }\r\n  .contact-grid { grid-template-columns:1fr;gap:3rem; }\r\n  .partners-grid { grid-template-columns:repeat(3,1fr); }\r\n}\r\n@media (max-width:860px) {\r\n  .srv-grid,.grid-3,.process-grid { grid-template-columns:1fr 1fr; }\r\n  .proj-grid { grid-template-columns:1fr 1fr; }\r\n  .proj-card.feat { grid-column:span 2; }\r\n  .partners-grid { grid-template-columns:repeat(2,1fr); }\r\n}\r\n@media (max-width:580px) {\r\n  .output-nav-links { display:none; }\r\n  .srv-grid,.grid-3,.process-grid,.proj-grid { grid-template-columns:1fr; }\r\n  .proj-card.feat { grid-column:span 1; }\r\n  .form-row { grid-template-columns:1fr; }\r\n  .hero-stats { flex-direction:column;gap:2rem; }\r\n  .hero-stat-item { border-right:none;border-bottom:1px solid var(--bdr);padding-bottom:1.5rem; }\r\n  .sec-pad { padding:5rem 6vw; }\r\n  .partners-grid { grid-template-columns:repeat(2,1fr); }\r\n}\r\n<\/style>\r\n\r\n<div id=\"output-site-wrapper\">\r\n\r\n  <!-- NAV -->\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\">Projets<\/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=\"#output-contact\" class=\"output-nav-cta\">Contact<\/a><\/li>\r\n    <\/ul>\r\n  <\/nav>\r\n\r\n  <!-- HERO -->\r\n  <section id=\"output-hero\">\r\n    <div class=\"chev-bg\">\r\n      <svg style=\"top:-40px;right:-60px;width:52vw;max-width:680px;\" viewBox=\"0 0 600 600\" fill=\"none\">\r\n        <polyline points=\"560,40 330,260 560,480\"  stroke=\"rgba(163,193,218,0.12)\" stroke-width=\"1.5\"\/>\r\n        <polyline points=\"505,40 275,260 505,480\"  stroke=\"rgba(163,193,218,0.09)\" stroke-width=\"1.5\"\/>\r\n        <polyline points=\"450,40 220,260 450,480\"  stroke=\"rgba(163,193,218,0.07)\" stroke-width=\"1.5\"\/>\r\n        <polyline points=\"395,40 165,260 395,480\"  stroke=\"rgba(163,193,218,0.05)\" stroke-width=\"1.5\"\/>\r\n        <polyline points=\"340,40 110,260 340,480\"  stroke=\"rgba(163,193,218,0.04)\" stroke-width=\"1.5\"\/>\r\n      <\/svg>\r\n      <svg style=\"bottom:-60px;left:-60px;width:36vw;max-width:460px;\" viewBox=\"0 0 460 460\" fill=\"none\">\r\n        <polyline points=\"40,420 200,230 40,40\"   stroke=\"rgba(163,193,218,0.11)\" stroke-width=\"1.5\"\/>\r\n        <polyline points=\"90,420 250,230 90,40\"   stroke=\"rgba(163,193,218,0.08)\" stroke-width=\"1.5\"\/>\r\n        <polyline points=\"140,420 300,230 140,40\" stroke=\"rgba(163,193,218,0.06)\" stroke-width=\"1.5\"\/>\r\n        <polyline points=\"190,420 350,230 190,40\" stroke=\"rgba(163,193,218,0.04)\" stroke-width=\"1.5\"\/>\r\n      <\/svg>\r\n    <\/div>\r\n\r\n    <div class=\"hero-tag\">Dans la culture de l'image de marque &amp; la e-r\u00e9putation<\/div>\r\n    <h1 class=\"hero-title\">\r\n      <span>We Drive<\/span>\r\n      <span class=\"acc\">Digital<\/span>\r\n      <span class=\"str\">Performance.<\/span>\r\n    <\/h1>\r\n    <p class=\"hero-sub\">Output by Tess\u00e9ra \u2014 agence de communication sp\u00e9cialis\u00e9e dans le marketing digital et les solutions IT. Nous accompagnons nos partenaires dans leur transformation digitale gr\u00e2ce \u00e0 des \u00e9quipes hautement qualifi\u00e9es.<\/p>\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    <\/div>\r\n    <div class=\"hero-stats\">\r\n      <div class=\"hero-stat-item\"><span class=\"stat-n\">150+<\/span><span class=\"stat-l\">Projets livr\u00e9s<\/span><\/div>\r\n      <div class=\"hero-stat-item\"><span class=\"stat-n\">98%<\/span><span class=\"stat-l\">Clients satisfaits<\/span><\/div>\r\n      <div class=\"hero-stat-item\"><span class=\"stat-n\">5\u00d7<\/span><span class=\"stat-l\">ROI moyen<\/span><\/div>\r\n      <div class=\"hero-stat-item\"><span class=\"stat-n\">12+<\/span><span class=\"stat-l\">Secteurs couverts<\/span><\/div>\r\n    <\/div>\r\n\r\n    <!-- ORB \u2014 truly absolute, right side -->\r\n    <div class=\"output-hero-orb\" aria-hidden=\"true\">\r\n      <div class=\"orb-ring\"><\/div><div class=\"orb-ring\"><\/div><div class=\"orb-ring\"><\/div>\r\n      <div class=\"orb-core\" style=\"font-size:0.62rem;font-weight:900;letter-spacing:0.15em;text-transform:uppercase;color:#FCCE03;text-align:center;\">OUTPUT<br>AGENCY<\/div>\r\n    <\/div>\r\n\r\n  <\/section>\r\n\r\n  <div class=\"oa-divider\"><\/div>\r\n\r\n  <!-- SERVICES -->\r\n  <section id=\"output-services\" class=\"oa-section sec-pad\">\r\n    <div class=\"chev-bg\">\r\n      <svg style=\"bottom:-70px;right:-70px;width:42vw;max-width:560px;\" viewBox=\"0 0 560 560\" fill=\"none\">\r\n        <polyline points=\"520,520 300,280 520,40\" stroke=\"rgba(163,193,218,0.09)\" stroke-width=\"1.5\"\/>\r\n        <polyline points=\"465,520 245,280 465,40\" stroke=\"rgba(163,193,218,0.07)\" stroke-width=\"1.5\"\/>\r\n        <polyline points=\"410,520 190,280 410,40\" stroke=\"rgba(163,193,218,0.05)\" stroke-width=\"1.5\"\/>\r\n      <\/svg>\r\n    <\/div>\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    <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 & 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      <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 community management 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      <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      <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 Development<\/h3>\r\n          <p class=\"srv-text\">Sites web, applications web et mobiles, PWA et solutions desktop sur mesure pour votre transformation digitale.<\/p>\r\n          <div class=\"srv-tags\"><span class=\"srv-tag\">WordPress<\/span><span class=\"srv-tag\">React<\/span><span class=\"srv-tag\">PWA<\/span><\/div>\r\n        <\/div>\r\n      <\/div>\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 & 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      <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 & 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  <!-- PROCESS -->\r\n  <section id=\"output-process\" class=\"oa-section sec-pad\">\r\n    <div class=\"chev-bg\">\r\n      <svg style=\"top:-40px;left:-60px;width:38vw;max-width:480px;\" viewBox=\"0 0 480 480\" fill=\"none\">\r\n        <polyline points=\"40,40 220,220 40,460\"   stroke=\"rgba(163,193,218,0.10)\" stroke-width=\"1.5\"\/>\r\n        <polyline points=\"90,40 270,220 90,460\"   stroke=\"rgba(163,193,218,0.08)\" stroke-width=\"1.5\"\/>\r\n        <polyline points=\"140,40 320,220 140,460\" stroke=\"rgba(163,193,218,0.06)\" stroke-width=\"1.5\"\/>\r\n        <polyline points=\"190,40 370,220 190,460\" stroke=\"rgba(163,193,218,0.04)\" stroke-width=\"1.5\"\/>\r\n      <\/svg>\r\n    <\/div>\r\n    <span class=\"sec-tag\">Notre m\u00e9thode<\/span>\r\n    <h2 class=\"sec-title\">Our Process<\/h2>\r\n    <p class=\"sec-sub\">6 \u00e9tapes \u00e9prouv\u00e9es pour transformer votre vision en r\u00e9sultats concrets et mesurables.<\/p>\r\n    <div class=\"process-grid\">\r\n      <div class=\"process-step\">\r\n        <span class=\"process-step-num\">01<\/span>\r\n        <h3 class=\"process-step-title\">Brief<\/h3>\r\n        <p class=\"process-step-sub\">Besoins & Objectifs<\/p>\r\n        <p class=\"process-step-desc\">Nous commen\u00e7ons par comprendre votre vision, vos objectifs et votre audience cible pour poser les bases du projet.<\/p>\r\n      <\/div>\r\n      <div class=\"process-step\">\r\n        <span class=\"process-step-num\">02<\/span>\r\n        <h3 class=\"process-step-title\">Benchmark<\/h3>\r\n        <p class=\"process-step-sub\">Audit & Veille<\/p>\r\n        <p class=\"process-step-desc\">Analyse approfondie de votre march\u00e9, de vos concurrents et des tendances pour identifier les meilleures opportunit\u00e9s.<\/p>\r\n      <\/div>\r\n      <div class=\"process-step\">\r\n        <span class=\"process-step-num\">03<\/span>\r\n        <h3 class=\"process-step-title\">Cr\u00e9ation<\/h3>\r\n        <p class=\"process-step-sub\">R\u00e9flexions & Conception<\/p>\r\n        <p class=\"process-step-desc\">Notre \u00e9quipe cr\u00e9ative \u00e9labore les concepts, maquettes et prototypes qui donnent vie \u00e0 votre projet.<\/p>\r\n      <\/div>\r\n      <div class=\"process-step\">\r\n        <span class=\"process-step-num\">04<\/span>\r\n        <h3 class=\"process-step-title\">Pitstop<\/h3>\r\n        <p class=\"process-step-sub\">R\u00e9visions & Validation<\/p>\r\n        <p class=\"process-step-desc\">Point d'\u00e9tape avec vous pour valider les orientations prises et affiner les d\u00e9tails avant la phase finale.<\/p>\r\n      <\/div>\r\n      <div class=\"process-step\">\r\n        <span class=\"process-step-num\">05<\/span>\r\n        <h3 class=\"process-step-title\">Debrief<\/h3>\r\n        <p class=\"process-step-sub\">Rectifs & Optimisations<\/p>\r\n        <p class=\"process-step-desc\">Int\u00e9gration de vos retours et optimisation de chaque d\u00e9tail pour atteindre la perfection.<\/p>\r\n      <\/div>\r\n      <div class=\"process-step\">\r\n        <span class=\"process-step-num\">06<\/span>\r\n        <h3 class=\"process-step-title\">Livraison<\/h3>\r\n        <p class=\"process-step-sub\">Pr\u00e9sentation Client<\/p>\r\n        <p class=\"process-step-desc\">Livraison finale, pr\u00e9sentation officielle et accompagnement post-lancement pour assurer votre succ\u00e8s.<\/p>\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <div class=\"oa-divider\"><\/div>\r\n\r\n  <!-- VALEURS -->\r\n  <section id=\"output-values\" class=\"oa-section sec-pad\">\r\n    <div class=\"chev-bg\">\r\n      <svg style=\"top:50%;right:-70px;transform:translateY(-50%);width:32vw;max-width:420px;\" viewBox=\"0 0 420 600\" fill=\"none\">\r\n        <polyline points=\"380,40 180,300 380,560\" stroke=\"rgba(163,193,218,0.09)\" stroke-width=\"1.5\"\/>\r\n        <polyline points=\"325,40 125,300 325,560\" stroke=\"rgba(163,193,218,0.07)\" stroke-width=\"1.5\"\/>\r\n        <polyline points=\"270,40 70,300 270,560\"  stroke=\"rgba(163,193,218,0.05)\" stroke-width=\"1.5\"\/>\r\n      <\/svg>\r\n    <\/div>\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><span class=\"sec-tag\">Notre ADN<\/span><h2 class=\"sec-title\" style=\"margin-bottom:0;\">Ce qui nous d\u00e9finit<\/h2><\/div>\r\n      <p style=\"max-width:340px;color:var(--lt);font-size:0.9rem;line-height:1.8;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    <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\"><h3 class=\"val-name\">Rapidit\u00e9<\/h3><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><\/div>\r\n        <span class=\"val-bg\">01<\/span>\r\n      <\/div>\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\"><h3 class=\"val-name\">Fiabilit\u00e9<\/h3><p class=\"val-text\">Un partenaire sur lequel vous pouvez compter. Nos engagements sont tenus, nos r\u00e9sultats sont mesurables.<\/p><\/div>\r\n        <span class=\"val-bg\">02<\/span>\r\n      <\/div>\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\"><h3 class=\"val-name\">Performance<\/h3><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><\/div>\r\n        <span class=\"val-bg\">03<\/span>\r\n      <\/div>\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\"><h3 class=\"val-name\">Flexibilit\u00e9<\/h3><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><\/div>\r\n        <span class=\"val-bg\">04<\/span>\r\n      <\/div>\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\"><h3 class=\"val-name\">Harmonie<\/h3><p class=\"val-text\">Aligner votre image, vos \u00e9quipes et vos canaux en un \u00e9cosyst\u00e8me coh\u00e9rent pour une communication impactante.<\/p><\/div>\r\n        <span class=\"val-bg\">05<\/span>\r\n      <\/div>\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\"><h3 class=\"val-name\">Force<\/h3><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><\/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  <!-- PORTFOLIO -->\r\n  <section id=\"output-portfolio\" class=\"oa-section sec-pad\">\r\n    <div class=\"chev-bg\">\r\n      <svg style=\"bottom:-60px;right:-50px;width:40vw;max-width:520px;\" viewBox=\"0 0 520 520\" fill=\"none\">\r\n        <polyline points=\"480,480 260,260 480,40\" stroke=\"rgba(163,193,218,0.08)\" stroke-width=\"1.5\"\/>\r\n        <polyline points=\"425,480 205,260 425,40\" stroke=\"rgba(163,193,218,0.06)\" stroke-width=\"1.5\"\/>\r\n        <polyline points=\"370,480 150,260 370,40\" stroke=\"rgba(163,193,218,0.04)\" stroke-width=\"1.5\"\/>\r\n      <\/svg>\r\n    <\/div>\r\n    <span class=\"sec-tag\">Nos r\u00e9alisations<\/span>\r\n    <h2 class=\"sec-title\">Portfolio<\/h2>\r\n    <p class=\"sec-sub\">Key Visuals, Web Design, campagnes digitales \u2014 des projets concrets pour des partenaires exigeants.<\/p>\r\n    <div class=\"proj-grid\">\r\n      <div class=\"proj-card feat\" style=\"cursor:pointer;\" onclick=\"window.location.href='\/portfolio\/mypharmacy'\">\r\n        <span class=\"proj-n\">01<\/span>\r\n        <span class=\"proj-cat\">Digital Marketing & Community<\/span>\r\n        <h3 class=\"proj-title\">Mypharmacy.tn \u2014 Strat\u00e9gie digitale compl\u00e8te<\/h3>\r\n        <p class=\"proj-desc\">Refonte de la communication digitale, campagnes ads et community management pour la premi\u00e8re pharmacie en ligne de Tunisie.<\/p>\r\n        <a href=\"\/portfolio\/mypharmacy\" class=\"proj-link\">Voir le cas \u2192<\/a>\r\n      <\/div>\r\n      <div class=\"proj-card\" style=\"cursor:pointer;\" onclick=\"window.location.href='\/portfolio\/stb-finance'\">\r\n        <span class=\"proj-n\">02<\/span>\r\n        <span class=\"proj-cat\">Key Visuals & Contenu<\/span>\r\n        <h3 class=\"proj-title\">STB Finance<\/h3>\r\n        <p class=\"proj-desc\">Production de contenu et campagnes visuelles pour l'un des leaders de la finance en Tunisie.<\/p>\r\n        <a href=\"\/portfolio\/stb-finance\" class=\"proj-link\">Voir le cas \u2192<\/a>\r\n      <\/div>\r\n      <div class=\"proj-card\" style=\"cursor:pointer;\" onclick=\"window.location.href='\/portfolio\/maritrans'\">\r\n        <span class=\"proj-n\">03<\/span>\r\n        <span class=\"proj-cat\">Branding & Web<\/span>\r\n        <h3 class=\"proj-title\">Maritrans Shipping<\/h3>\r\n        <p class=\"proj-desc\">Identit\u00e9 visuelle et site web institutionnel pour ce leader du transport maritime tunisien.<\/p>\r\n        <a href=\"\/portfolio\/maritrans\" class=\"proj-link\">Voir le cas \u2192<\/a>\r\n      <\/div>\r\n      <div class=\"proj-card\" style=\"cursor:pointer;\" onclick=\"window.location.href='\/portfolio\/korkem'\">\r\n        <span class=\"proj-n\">04<\/span>\r\n        <span class=\"proj-cat\">Branding & Identit\u00e9<\/span>\r\n        <h3 class=\"proj-title\">K\u00f6rkem & Co<\/h3>\r\n        <p class=\"proj-desc\">Conception de l'identit\u00e9 visuelle compl\u00e8te et strat\u00e9gie de communication pour cette marque premium.<\/p>\r\n        <a href=\"\/portfolio\/korkem\" class=\"proj-link\">Voir le cas \u2192<\/a>\r\n      <\/div>\r\n      <div class=\"proj-card\" style=\"cursor:pointer;\" onclick=\"window.location.href='\/portfolio\/genmar'\">\r\n        <span class=\"proj-n\">05<\/span>\r\n        <span class=\"proj-cat\">Web Design & Digital<\/span>\r\n        <h3 class=\"proj-title\">Genmar Maritime<\/h3>\r\n        <p class=\"proj-desc\">Site web institutionnel et strat\u00e9gie de contenu pour ce groupe maritime international.<\/p>\r\n        <a href=\"\/portfolio\/genmar\" class=\"proj-link\">Voir le cas \u2192<\/a>\r\n      <\/div>\r\n      <div class=\"proj-card feat\" style=\"cursor:pointer;\" onclick=\"window.location.href='\/portfolio\/riha'\">\r\n        <span class=\"proj-n\">06<\/span>\r\n        <span class=\"proj-cat\">Community Management & Contenu<\/span>\r\n        <h3 class=\"proj-title\">Riha \u2014 Pr\u00e9sence digitale & Brand Content<\/h3>\r\n        <p class=\"proj-desc\">Gestion compl\u00e8te des r\u00e9seaux sociaux, production de contenu et strat\u00e9gie digitale pour cette marque tunisienne en croissance.<\/p>\r\n        <a href=\"\/portfolio\/riha\" class=\"proj-link\">Voir le cas \u2192<\/a>\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <div class=\"oa-divider\"><\/div>\r\n\r\n  <!-- PARTENAIRES -->\r\n  <section id=\"output-partners\" class=\"oa-section sec-pad\">\r\n    <div class=\"chev-bg\">\r\n      <svg style=\"top:-40px;left:-60px;width:36vw;max-width:460px;\" viewBox=\"0 0 460 460\" fill=\"none\">\r\n        <polyline points=\"40,420 220,230 40,40\"   stroke=\"rgba(163,193,218,0.09)\" stroke-width=\"1.5\"\/>\r\n        <polyline points=\"90,420 270,230 90,40\"   stroke=\"rgba(163,193,218,0.07)\" stroke-width=\"1.5\"\/>\r\n        <polyline points=\"140,420 320,230 140,40\" stroke=\"rgba(163,193,218,0.05)\" stroke-width=\"1.5\"\/>\r\n      <\/svg>\r\n    <\/div>\r\n    <span class=\"sec-tag\">Ils nous font confiance<\/span>\r\n    <h2 class=\"sec-title\">Nos partenaires<\/h2>\r\n    <p class=\"sec-sub\">Des entreprises de tous secteurs nous confient leur image de marque et leur transformation digitale.<\/p>\r\n    <div class=\"partners-grid\">\r\n      <div class=\"partner-card\"><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-card\"><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-card\"><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-card\"><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-card\"><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-card\"><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-card\"><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-card\"><img decoding=\"async\" src=\"http:\/\/www.output-agency.fr\/wp-content\/uploads\/2026\/03\/logo1_pohh1Qp-1.png\" alt=\"Riha\"><\/div>\r\n      <div class=\"partner-card\"><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-card\"><img decoding=\"async\" src=\"http:\/\/www.output-agency.fr\/wp-content\/uploads\/2026\/03\/logo-korkem.jpg\" alt=\"K\u00f6rkem & Co\"><\/div>\r\n      <div class=\"partner-card\"><img decoding=\"async\" src=\"http:\/\/www.output-agency.fr\/wp-content\/uploads\/2026\/03\/Roxene-Medicale.jpg\" alt=\"Roxene Medical\"><\/div>\r\n      <div class=\"partner-card\"><img decoding=\"async\" src=\"http:\/\/www.output-agency.fr\/wp-content\/uploads\/2026\/03\/la-cle-immobilier.jpg\" alt=\"La Cl\u00e9 Immobilier\"><\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <div class=\"oa-divider\"><\/div>\r\n\r\n  <!-- \u00c0 PROPOS -->\r\n  <section id=\"output-about\">\r\n    <div class=\"chev-bg\">\r\n      <svg style=\"bottom:-60px;right:-50px;width:40vw;max-width:520px;\" viewBox=\"0 0 520 520\" fill=\"none\">\r\n        <polyline points=\"480,480 260,260 480,40\" stroke=\"rgba(163,193,218,0.08)\" stroke-width=\"1.5\"\/>\r\n        <polyline points=\"425,480 205,260 425,40\" stroke=\"rgba(163,193,218,0.06)\" stroke-width=\"1.5\"\/>\r\n        <polyline points=\"370,480 150,260 370,40\" stroke=\"rgba(163,193,218,0.04)\" stroke-width=\"1.5\"\/>\r\n      <\/svg>\r\n    <\/div>\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=\"Output Agency \u00e9quipe\">\r\n      <div class=\"about-badge\">Output<br>by Tess\u00e9ra \ud83c\uddf9\ud83c\uddf3<\/div>\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(--lt);font-size:0.92rem;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 diff\u00e9rentes alternatives et solutions IT. Nous accompagnons nos partenaires dans leur communication ainsi que dans leur transformation digitale gr\u00e2ce \u00e0 nos \u00e9quipes hautement qualifi\u00e9es.<\/p>\r\n      <ul class=\"about-list\">\r\n        <li>Bas\u00e9e \u00e0 Tunis avec des partenaires dans le monde entier<\/li>\r\n        <li>Personnel national et international pour r\u00e9pondre \u00e0 toutes les demandes<\/li>\r\n        <li>Expertise en image de marque, e-r\u00e9putation et solutions IT<\/li>\r\n        <li>Approche 100% orient\u00e9e r\u00e9sultats et satisfaction client<\/li>\r\n      <\/ul>\r\n      <a href=\"#output-contact\" class=\"btn-y\">Travailler avec nous<\/a>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <div class=\"oa-divider\"><\/div>\r\n\r\n  <!-- BLOG -->\r\n  <section id=\"output-blog\" class=\"oa-section sec-pad\">\r\n    <div class=\"chev-bg\">\r\n      <svg style=\"top:-40px;right:-60px;width:38vw;max-width:480px;\" viewBox=\"0 0 480 480\" fill=\"none\">\r\n        <polyline points=\"440,40 240,240 440,460\" stroke=\"rgba(163,193,218,0.09)\" stroke-width=\"1.5\"\/>\r\n        <polyline points=\"385,40 185,240 385,460\" stroke=\"rgba(163,193,218,0.07)\" stroke-width=\"1.5\"\/>\r\n        <polyline points=\"330,40 130,240 330,460\" stroke=\"rgba(163,193,218,0.05)\" stroke-width=\"1.5\"\/>\r\n      <\/svg>\r\n    <\/div>\r\n    <span class=\"sec-tag\">Nos insights<\/span>\r\n    <h2 class=\"sec-title\">Le Blog<\/h2>\r\n    <p class=\"sec-sub\">Strat\u00e9gies, tendances et cas pratiques pour garder une longueur d'avance dans le digital.<\/p>\r\n    <div class=\"grid-3\">\r\n      <div class=\"blog-card\"><span class=\"blog-cat\">Marketing Digital<\/span><h3 class=\"blog-title\">Comment doubler votre ROAS en 90 jours avec Google Ads<\/h3><p class=\"blog-exc\">Les 5 leviers souvent ignor\u00e9s qui font la diff\u00e9rence entre une campagne ordinaire et une machine \u00e0 ROI.<\/p><div class=\"blog-foot\"><span>12 Mars 2025<\/span><a href=\"#\" class=\"blog-lire\">Lire \u2192<\/a><\/div><\/div>\r\n      <div class=\"blog-card\"><span class=\"blog-cat\">Branding<\/span><h3 class=\"blog-title\">Pourquoi l'image de marque est votre meilleur investissement en 2025<\/h3><p class=\"blog-exc\">Dans un march\u00e9 satur\u00e9, une identit\u00e9 visuelle forte est ce qui vous distingue durablement de la concurrence.<\/p><div class=\"blog-foot\"><span>28 F\u00e9v 2025<\/span><a href=\"#\" class=\"blog-lire\">Lire \u2192<\/a><\/div><\/div>\r\n      <div class=\"blog-card\"><span class=\"blog-cat\">D\u00e9veloppement<\/span><h3 class=\"blog-title\">PWA vs application native : le vrai guide de d\u00e9cision pour 2025<\/h3><p class=\"blog-exc\">Analyse honn\u00eate des deux approches selon votre budget, vos objectifs et votre audience cible.<\/p><div class=\"blog-foot\"><span>14 F\u00e9v 2025<\/span><a href=\"#\" class=\"blog-lire\">Lire \u2192<\/a><\/div><\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <div class=\"oa-divider\"><\/div>\r\n\r\n  <!-- CONTACT -->\r\n  <section id=\"output-contact\" class=\"oa-section sec-pad\">\r\n    <div class=\"chev-bg\">\r\n      <svg style=\"bottom:-60px;right:-50px;width:46vw;max-width:580px;\" viewBox=\"0 0 580 580\" fill=\"none\">\r\n        <polyline points=\"540,540 310,280 540,40\" stroke=\"rgba(163,193,218,0.08)\" stroke-width=\"1.5\"\/>\r\n        <polyline points=\"485,540 255,280 485,40\" stroke=\"rgba(163,193,218,0.06)\" stroke-width=\"1.5\"\/>\r\n        <polyline points=\"430,540 200,280 430,40\" stroke=\"rgba(163,193,218,0.04)\" stroke-width=\"1.5\"\/>\r\n      <\/svg>\r\n    <\/div>\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    <div class=\"contact-grid\">\r\n      <div style=\"display:flex;flex-direction:column;gap:2rem;\">\r\n        <div><span class=\"ci-label\">Email<\/span><span class=\"ci-val\"><a href=\"\/cdn-cgi\/l\/email-protection#91f9f4fdfdfed1fee4e5e1e4e5bcf0f6f4fff2e8bff7e3\"><span class=\"__cf_email__\" data-cfemail=\"4028252c2c2f002f35343035346d2127252e23396e2632\">[email&#160;protected]<\/span><\/a><\/span><\/div>\r\n        <div><span class=\"ci-label\">T\u00e9l\u00e9phone<\/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\">Av. Habib Bourguiba 2033, Megrine, 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=\"tel:+21652403361\" class=\"btn-y\" style=\"width:fit-content;\">Appeler maintenant<\/a>\r\n      <\/div>\r\n      <form class=\"oa-form\" onsubmit=\"event.preventDefault();this.innerHTML='<p style=\\'color:#FCCE03;font-size:1rem;font-weight:700;\\'>\u2713 Message envoy\u00e9 ! Nous vous r\u00e9pondons sous 24h.<\/p>'\">\r\n        <div class=\"form-row\">\r\n          <div class=\"form-grp\"><label class=\"form-lbl\">Pr\u00e9nom<\/label><input class=\"form-input\" type=\"text\" placeholder=\"Votre pr\u00e9nom\" required><\/div>\r\n          <div class=\"form-grp\"><label class=\"form-lbl\">Nom<\/label><input class=\"form-input\" type=\"text\" placeholder=\"Votre nom\" required><\/div>\r\n        <\/div>\r\n        <div class=\"form-grp\"><label class=\"form-lbl\">Email<\/label><input class=\"form-input\" type=\"email\" placeholder=\"votre@email.com\" required><\/div>\r\n        <div class=\"form-grp\"><label class=\"form-lbl\">Sujet<\/label><input class=\"form-input\" type=\"text\" placeholder=\"Votre projet en quelques mots\"><\/div>\r\n        <div class=\"form-grp\"><label class=\"form-lbl\">Message<\/label><textarea class=\"form-ta\" placeholder=\"D\u00e9crivez votre projet, vos objectifs, votre budget estim\u00e9...\" required><\/textarea><\/div>\r\n        <button type=\"submit\" class=\"btn-submit\">Envoyer \u2192<\/button>\r\n      <\/form>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <!-- FOOTER -->\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\">Projets<\/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=\"#output-contact\">Contact<\/a><\/li>\r\n      <\/ul>\r\n    <\/div>\r\n    <div class=\"footer-bot\">\r\n      <p class=\"footer-copy\">\u00a9 2025 <span>Output by Tess\u00e9ra<\/span>. Tous droits r\u00e9serv\u00e9s.<\/p>\r\n      <p class=\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Services Process Projets Partenaires Agence Contact Dans la culture de l&rsquo;image de marque &amp; la e-r\u00e9putation We Drive Digital Performance. Output by Tess\u00e9ra \u2014 agence de communication sp\u00e9cialis\u00e9e dans le marketing digital et les solutions IT. Nous accompagnons nos partenaires dans leur transformation digitale gr\u00e2ce \u00e0 des \u00e9quipes hautement qualifi\u00e9es. D\u00e9marrer un projet Voir nos [&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":"https:\/\/www.output-agency.fr\/index.php?rest_route=\/wp\/v2\/pages\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.output-agency.fr\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.output-agency.fr\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.output-agency.fr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.output-agency.fr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=7"}],"version-history":[{"count":23,"href":"https:\/\/www.output-agency.fr\/index.php?rest_route=\/wp\/v2\/pages\/7\/revisions"}],"predecessor-version":[{"id":68,"href":"https:\/\/www.output-agency.fr\/index.php?rest_route=\/wp\/v2\/pages\/7\/revisions\/68"}],"wp:attachment":[{"href":"https:\/\/www.output-agency.fr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}