{"id":11,"date":"2026-03-10T19:50:27","date_gmt":"2026-03-10T18:50:27","guid":{"rendered":"https:\/\/site.triskel.ch\/web08\/?page_id=11"},"modified":"2026-03-17T18:26:09","modified_gmt":"2026-03-17T17:26:09","slug":"blog","status":"publish","type":"page","link":"https:\/\/site.triskel.ch\/web08\/","title":{"rendered":"Accueil"},"content":{"rendered":"\n<!DOCTYPE html>\n<html lang=\"fr\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Com Flow \u2014 Communication align\u00e9e pour PME et startups suisses<\/title>\n  <meta name=\"description\" content=\"Fini le bruit ambiant. Votre communication m\u00e9rite d'\u00eatre entendue \u2014 claire, coh\u00e9rente et align\u00e9e avec ce que vous \u00eates. Conseil en communication et marketing, Lausanne.\">\n\n  <!-- SEO \/ Schema Person -->\n  <script type=\"application\/ld+json\">\n  {\n    \"@context\": \"https:\/\/schema.org\",\n    \"@type\": \"ProfessionalService\",\n    \"name\": \"Com Flow\",\n    \"description\": \"Conseil en communication et marketing pour PME et startups en Suisse romande.\",\n    \"url\": \"https:\/\/comflow.ch\",\n    \"areaServed\": \"Suisse romande\",\n    \"founder\": {\n      \"@type\": \"Person\",\n      \"name\": \"Becky Smith\",\n      \"jobTitle\": \"Consultante en communication et marketing\",\n      \"knowsLanguage\": [\"fr\", \"en\"],\n      \"address\": {\n        \"@type\": \"PostalAddress\",\n        \"addressLocality\": \"Lausanne\",\n        \"addressCountry\": \"CH\"\n      }\n    }\n  }\n  <\/script>\n\n  <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n  <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n  <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&#038;family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,300&#038;display=swap\" rel=\"stylesheet\">\n\n  <style>\n    \/* =====================\n       RESET & BASE\n    ===================== *\/\n    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n\n    :root {\n      --green:       #3DBE6C;\n      --green-deep:  #2C2416;\n      --green-pale:  #F0EBE0;\n      --green-light: #E8E2D9;\n      --white:       #FAF7F2;\n      --white-pure:  #FFFDF9;\n      --coral:       #FF8C5A;\n      --sage:        #8B7355;\n      --font-display: 'Cormorant Garamond', serif;\n      --font-body:    'DM Sans', sans-serif;\n      --radius:       12px;\n      --radius-sm:    8px;\n    }\n\n    html { scroll-behavior: smooth; }\n\n    body {\n      font-family: var(--font-body);\n      background: var(--white);\n      color: var(--green-deep);\n      line-height: 1.6;\n      -webkit-font-smoothing: antialiased;\n    }\n\n    \/* =====================\n       ANIMATIONS\n    ===================== *\/\n    @keyframes fadeUp {\n      from { opacity: 0; transform: translateY(24px); }\n      to   { opacity: 1; transform: translateY(0); }\n    }\n    @keyframes fadeIn {\n      from { opacity: 0; }\n      to   { opacity: 1; }\n    }\n    @keyframes pulse {\n      0%, 100% { transform: scale(1); }\n      50%       { transform: scale(1.15); }\n    }\n\n    .anim-1 { animation: fadeUp 0.6s ease both; }\n    .anim-2 { animation: fadeUp 0.6s 0.1s ease both; }\n    .anim-3 { animation: fadeUp 0.6s 0.2s ease both; }\n    .anim-4 { animation: fadeUp 0.6s 0.3s ease both; }\n    .anim-5 { animation: fadeUp 0.6s 0.4s ease both; }\n\n    \/* =====================\n       NAVIGATION\n    ===================== *\/\n    .nav {\n      position: sticky;\n      top: 0;\n      z-index: 100;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: 18px 56px;\n      background: rgba(247, 249, 247, 0.95);\n      backdrop-filter: blur(8px);\n      border-bottom: 1px solid var(--green-light);\n    }\n\n    .nav-logo {\n      font-family: var(--font-display);\n      font-weight: 700;\n      font-size: 18px;\n      color: var(--green-deep);\n      text-decoration: none;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .nav-logo-dot {\n      width: 10px;\n      height: 10px;\n      border-radius: 50%;\n      background: var(--green);\n      animation: pulse 2.5s ease-in-out infinite;\n    }\n\n    .nav-links {\n      display: flex;\n      gap: 32px;\n      list-style: none;\n    }\n\n    .nav-links a {\n      font-size: 13px;\n      color: var(--sage);\n      text-decoration: none;\n      font-weight: 400;\n      transition: color 0.2s;\n    }\n\n    .nav-links a:hover { color: var(--green-deep); }\n\n    .nav-cta {\n      background: var(--green);\n      color: #fff;\n      font-family: var(--font-body);\n      font-size: 13px;\n      font-weight: 500;\n      padding: 9px 20px;\n      border-radius: 50px;\n      border: none;\n      cursor: pointer;\n      text-decoration: none;\n      transition: background 0.2s, transform 0.15s;\n    }\n\n    .nav-cta:hover { background: #2da85c; transform: translateY(-1px); }\n\n    \/* =====================\n       HERO\n    ===================== *\/\n    .hero {\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      min-height: 500px;\n    }\n\n    .hero-left {\n      padding: 72px 56px;\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n      gap: 24px;\n    }\n\n    .badge {\n      display: inline-flex;\n      align-items: center;\n      gap: 7px;\n      background: var(--green-pale);\n      color: #1F7A45;\n      font-size: 11px;\n      font-weight: 500;\n      padding: 6px 14px;\n      border-radius: 20px;\n      width: fit-content;\n      letter-spacing: 0.05em;\n    }\n\n    .badge-dot {\n      width: 6px;\n      height: 6px;\n      border-radius: 50%;\n      background: var(--green);\n    }\n\n    .hero-title {\n      font-family: var(--font-display);\n      font-size: 48px;\n      font-weight: 700;\n      line-height: 1.0;\n      color: var(--green-deep);\n    }\n\n    .hero-title span { color: var(--green); }\n\n    .hero-sub {\n      font-size: 15px;\n      color: var(--sage);\n      line-height: 1.75;\n      max-width: 400px;\n      font-weight: 300;\n    }\n\n    .hero-actions {\n      display: flex;\n      gap: 14px;\n      align-items: center;\n      flex-wrap: wrap;\n    }\n\n    .btn-primary {\n      background: var(--green-deep);\n      color: #fff;\n      font-family: var(--font-body);\n      font-size: 14px;\n      font-weight: 500;\n      padding: 13px 26px;\n      border-radius: 50px;\n      border: none;\n      cursor: pointer;\n      text-decoration: none;\n      display: inline-block;\n      transition: background 0.2s, transform 0.15s;\n    }\n\n    .btn-primary:hover { background: #1a2b1e; transform: translateY(-1px); }\n\n    .btn-ghost {\n      color: var(--green);\n      font-size: 14px;\n      font-weight: 500;\n      background: none;\n      border: none;\n      cursor: pointer;\n      text-decoration: none;\n      display: inline-flex;\n      align-items: center;\n      gap: 4px;\n      transition: gap 0.2s;\n    }\n\n    .btn-ghost:hover { gap: 8px; }\n\n    .hero-right {\n      background: #EDE7DC;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      padding: 48px;\n      position: relative;\n      overflow: hidden;\n    }\n\n    .hero-right::before {\n      content: '';\n      position: absolute;\n      top: -60px; right: -60px;\n      width: 240px; height: 240px;\n      border-radius: 50%;\n      background: var(--green);\n      opacity: 0.1;\n    }\n\n    .hero-right::after {\n      content: '';\n      position: absolute;\n      bottom: -40px; left: -40px;\n      width: 180px; height: 180px;\n      border-radius: 50%;\n      background: var(--coral);\n      opacity: 0.1;\n    }\n\n    .mockup-card {\n      background: var(--white);\n      border-radius: var(--radius);\n      padding: 22px;\n      width: 100%;\n      max-width: 300px;\n      position: relative;\n      z-index: 1;\n      box-shadow: 0 20px 60px rgba(0,0,0,0.25);\n      animation: fadeUp 0.8s 0.3s ease both;\n    }\n\n    .mockup-dots {\n      display: flex;\n      gap: 6px;\n      margin-bottom: 16px;\n    }\n\n    .mockup-dots span {\n      width: 9px; height: 9px;\n      border-radius: 50%;\n    }\n\n    .mockup-label {\n      font-size: 9px;\n      color: var(--sage);\n      text-transform: uppercase;\n      letter-spacing: 0.07em;\n      margin-bottom: 5px;\n    }\n\n    .mockup-title {\n      font-family: var(--font-display);\n      font-size: 14px;\n      font-weight: 600;\n      color: var(--green-deep);\n      margin-bottom: 14px;\n    }\n\n    .mockup-line {\n      height: 6px;\n      border-radius: 3px;\n      background: var(--green-light);\n      margin-bottom: 7px;\n    }\n\n    .mockup-tag {\n      display: inline-flex;\n      align-items: center;\n      gap: 5px;\n      background: var(--green-pale);\n      color: var(--green);\n      font-size: 10px;\n      padding: 4px 10px;\n      border-radius: 10px;\n      margin-top: 10px;\n      font-weight: 500;\n    }\n\n    \/* =====================\n       STATS BAND\n    ===================== *\/\n    .stats {\n      display: grid;\n      grid-template-columns: repeat(3, 1fr);\n      background: var(--green);\n    }\n\n    .stat {\n      padding: 30px 48px;\n      border-right: 1px solid rgba(255,255,255,0.2);\n    }\n\n    .stat:last-child { border-right: none; }\n\n    .stat-number {\n      font-family: var(--font-display);\n      font-size: 34px;\n      font-weight: 700;\n      color: #fff;\n    }\n\n    .stat-label {\n      font-size: 12px;\n      color: rgba(255,255,255,0.72);\n      margin-top: 4px;\n      font-weight: 300;\n    }\n\n    \/* =====================\n       SERVICES\n    ===================== *\/\n    .services {\n      padding: 80px 56px;\n      background: var(--white);\n    }\n\n    .section-label {\n      font-size: 11px;\n      text-transform: uppercase;\n      letter-spacing: 0.1em;\n      color: var(--green);\n      font-weight: 500;\n      margin-bottom: 10px;\n    }\n\n    .section-title {\n      font-family: var(--font-display);\n      font-size: 36px;\n      font-weight: 700;\n      color: var(--green-deep);\n      margin-bottom: 40px;\n      max-width: 420px;\n      line-height: 1.15;\n    }\n\n    .services-grid {\n      display: grid;\n      grid-template-columns: repeat(3, 1fr);\n      gap: 18px;\n    }\n\n    .service-card {\n      background: var(--white-pure);\n      border-radius: var(--radius);\n      padding: 28px;\n      border: 1px solid var(--green-light);\n      transition: border-color 0.25s, transform 0.2s, box-shadow 0.2s;\n    }\n\n    .service-card:hover {\n      border-color: var(--green);\n      transform: translateY(-3px);\n      box-shadow: 0 12px 32px rgba(61,190,108,0.1);\n    }\n\n    .service-icon {\n      width: 40px; height: 40px;\n      border-radius: var(--radius-sm);\n      background: var(--green-pale);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      margin-bottom: 16px;\n      font-size: 16px;\n      color: var(--green);\n      font-weight: 700;\n    }\n\n    .service-name {\n      font-family: var(--font-display);\n      font-size: 15px;\n      font-weight: 600;\n      color: var(--green-deep);\n      margin-bottom: 10px;\n    }\n\n    .service-desc {\n      font-size: 13px;\n      color: var(--sage);\n      line-height: 1.65;\n      font-weight: 300;\n    }\n\n    \/* =====================\n       PROJETS\n    ===================== *\/\n    .projects {\n      padding: 80px 56px;\n      background: var(--green-deep);\n    }\n\n    .projects .section-label { color: var(--green); }\n    .projects .section-title { color: var(--white); }\n\n    .projects-grid-3 {\n      display: grid;\n      grid-template-columns: repeat(3, 1fr);\n      gap: 18px;\n    }\n\n    .project-card-3 {\n      border-radius: var(--radius);\n      min-height: 180px;\n      display: flex;\n      flex-direction: column;\n      justify-content: flex-end;\n      padding: 24px;\n      transition: transform 0.2s;\n      cursor: default;\n    }\n\n    .project-card-3:hover { transform: translateY(-3px); }\n\n    .project-main {\n      background: #3a5040;\n      border-radius: var(--radius);\n      min-height: 220px;\n      display: flex;\n      flex-direction: column;\n      justify-content: flex-end;\n      padding: 24px;\n      transition: transform 0.2s;\n      cursor: default;\n    }\n\n    .project-main:hover { transform: translateY(-2px); }\n\n    .project-side {\n      display: flex;\n      flex-direction: column;\n      gap: 18px;\n    }\n\n    .project-small {\n      border-radius: var(--radius);\n      flex: 1;\n      padding: 20px;\n      display: flex;\n      flex-direction: column;\n      justify-content: flex-end;\n      transition: transform 0.2s;\n      cursor: default;\n    }\n\n    .project-small:hover { transform: translateY(-2px); }\n\n    .project-tag {\n      display: inline-block;\n      background: rgba(61,190,108,0.18);\n      color: var(--green);\n      font-size: 9px;\n      padding: 3px 9px;\n      border-radius: 10px;\n      margin-bottom: 7px;\n      font-weight: 500;\n      text-transform: uppercase;\n      letter-spacing: 0.05em;\n    }\n\n    .project-name {\n      font-family: var(--font-display);\n      font-size: 14px;\n      font-weight: 600;\n      color: var(--white);\n    }\n\n    .project-client {\n      font-size: 11px;\n      color: rgba(250,247,242,0.55);\n      margin-top: 3px;\n      font-weight: 300;\n    }\n\n    \/* =====================\n       \u00c0 PROPOS\n    ===================== *\/\n    .about {\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      background: var(--white);\n    }\n\n    .about-visual {\n      background: #EDE7DC;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      min-height: 380px;\n      position: relative;\n      overflow: hidden;\n    }\n\n    .about-visual::before {\n      content: '';\n      position: absolute;\n      top: -50px; left: -50px;\n      width: 200px; height: 200px;\n      border-radius: 50%;\n      background: var(--green);\n      opacity: 0.06;\n    }\n\n    .about-visual::after {\n      content: '';\n      position: absolute;\n      bottom: -40px; right: -40px;\n      width: 160px; height: 160px;\n      border-radius: 50%;\n      background: var(--coral);\n      opacity: 0.08;\n    }\n\n    .about-avatar {\n      width: 130px; height: 130px;\n      border-radius: 50%;\n      background: var(--green);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-family: var(--font-display);\n      font-size: 42px;\n      font-weight: 700;\n      color: #fff;\n      position: relative;\n      z-index: 1;\n      box-shadow: 0 16px 48px rgba(61,190,108,0.3);\n      \/* Remplacer par : background-image: url('votre-photo.jpg'); background-size: cover; background-position: center; *\/\n    }\n\n    .about-content {\n      padding: 72px 56px;\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n      gap: 22px;\n    }\n\n    .about-content .section-title { margin-bottom: 0; }\n\n    .about-text {\n      font-size: 14px;\n      color: var(--sage);\n      line-height: 1.8;\n      font-weight: 300;\n    }\n\n    .about-values {\n      display: flex;\n      flex-wrap: wrap;\n      gap: 8px;\n    }\n\n    .value-tag {\n      background: #EDE7DC;\n      color: var(--sage);\n      font-size: 11px;\n      padding: 6px 14px;\n      border-radius: 20px;\n      font-weight: 500;\n    }\n\n    \/* =====================\n       T\u00c9MOIGNAGE\n    ===================== *\/\n    .testimonial {\n      padding: 80px 56px;\n      background: var(--green-deep);\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      text-align: center;\n      gap: 18px;\n    }\n\n    .quote-mark {\n      font-family: var(--font-display);\n      font-size: 72px;\n      color: var(--green);\n      line-height: 0.8;\n      opacity: 0.5;\n    }\n\n    .quote-text {\n      font-family: var(--font-display);\n      font-size: 28px;\n      font-weight: 500;\n      font-style: italic;\n      color: var(--white);\n      max-width: 600px;\n      line-height: 1.4;\n    }\n\n    .quote-author {\n      font-size: 12px;\n      color: rgba(250,247,242,0.45);\n      font-weight: 300;\n      letter-spacing: 0.04em;\n    }\n\n    .quote-author strong {\n      color: var(--green);\n      font-weight: 500;\n    }\n\n    \/* =====================\n       CTA\n    ===================== *\/\n    .cta-section {\n      padding: 80px 56px;\n      background: var(--white);\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      gap: 40px;\n    }\n\n    .cta-title {\n      font-family: var(--font-display);\n      font-size: 36px;\n      font-weight: 700;\n      color: var(--green-deep);\n      line-height: 1.15;\n      margin-bottom: 12px;\n      max-width: 420px;\n    }\n\n    .cta-sub {\n      font-size: 14px;\n      color: var(--sage);\n      line-height: 1.75;\n      font-weight: 300;\n      max-width: 440px;\n    }\n\n    .btn-cta {\n      background: var(--green);\n      color: #fff;\n      font-family: var(--font-body);\n      font-size: 15px;\n      font-weight: 500;\n      padding: 16px 36px;\n      border-radius: 50px;\n      border: none;\n      cursor: pointer;\n      text-decoration: none;\n      white-space: nowrap;\n      display: inline-block;\n      transition: background 0.2s, transform 0.15s;\n      flex-shrink: 0;\n    }\n\n    .btn-cta:hover { background: #2da85c; transform: translateY(-2px); }\n\n    \/* =====================\n       FOOTER\n    ===================== *\/\n    footer {\n      padding: 28px 56px;\n      background: var(--green-deep);\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      flex-wrap: wrap;\n      gap: 16px;\n    }\n\n    .footer-logo {\n      font-family: var(--font-display);\n      font-weight: 700;\n      font-size: 15px;\n      color: var(--white);\n      text-decoration: none;\n      display: flex;\n      align-items: center;\n      gap: 7px;\n    }\n\n    .footer-links {\n      display: flex;\n      gap: 24px;\n    }\n\n    .footer-links a {\n      font-size: 12px;\n      color: rgba(247,249,247,0.45);\n      text-decoration: none;\n      font-weight: 300;\n      transition: color 0.2s;\n    }\n\n    .footer-links a:hover { color: var(--green); }\n\n    .footer-copy {\n      font-size: 11px;\n      color: rgba(247,249,247,0.3);\n      font-weight: 300;\n    }\n\n    .project-card-link { cursor: pointer; }\n    .project-card-link:hover { transform: translateY(-3px); }\n\n    .project-preview {\n      position: relative;\n      width: 100%;\n      height: 120px;\n      border-radius: 8px;\n      overflow: hidden;\n      margin-bottom: 14px;\n      background: rgba(255,255,255,0.05);\n    }\n\n    .project-preview img {\n      width: 100%;\n      height: 100%;\n      object-fit: cover;\n      object-position: top;\n      display: block;\n      border-radius: 8px;\n    }\n\n    .project-preview-overlay {\n      position: absolute;\n      inset: 0;\n      background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,0.3) 100%);\n      border-radius: 8px;\n    }\n\n    \/* =====================\n       LINKEDIN PACKAGES\n    ===================== *\/\n    .linkedin-section {\n      padding: 80px 56px;\n      background: var(--green-pale);\n    }\n\n    .linkedin-title {\n      max-width: 480px;\n      margin-bottom: 16px;\n    }\n\n    .linkedin-intro {\n      font-size: 15px;\n      color: var(--sage);\n      line-height: 1.75;\n      font-weight: 300;\n      max-width: 560px;\n      margin-bottom: 48px;\n    }\n\n    .linkedin-grid {\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      gap: 20px;\n      max-width: 780px;\n    }\n\n    .linkedin-card {\n      background: var(--white-pure);\n      border-radius: var(--radius);\n      padding: 32px;\n      border: 1px solid var(--green-light);\n      display: flex;\n      flex-direction: column;\n      gap: 20px;\n    }\n\n    .linkedin-card-featured {\n      background: var(--green-deep);\n      border-color: var(--green-deep);\n    }\n\n    .linkedin-card-header {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n    }\n\n    .linkedin-icon {\n      width: 36px; height: 36px;\n      border-radius: 8px;\n      background: #0A66C2;\n      color: #fff;\n      font-family: var(--font-display);\n      font-size: 16px;\n      font-weight: 700;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    .linkedin-icon-dark {\n      background: var(--green);\n    }\n\n    .linkedin-tier {\n      font-family: var(--font-display);\n      font-size: 20px;\n      font-weight: 700;\n      color: var(--green-deep);\n    }\n\n    .linkedin-card-featured .linkedin-tier { color: var(--white); }\n\n    .linkedin-badge {\n      margin-left: auto;\n      background: var(--green);\n      color: #fff;\n      font-size: 10px;\n      font-weight: 500;\n      padding: 4px 10px;\n      border-radius: 50px;\n      letter-spacing: 0.04em;\n    }\n\n    .linkedin-card-desc {\n      font-size: 13px;\n      color: var(--sage);\n      line-height: 1.65;\n      font-weight: 300;\n    }\n\n    .linkedin-card-featured .linkedin-card-desc { color: rgba(247,249,247,0.6); }\n\n    .linkedin-features {\n      list-style: none;\n      display: flex;\n      flex-direction: column;\n      gap: 10px;\n      flex: 1;\n    }\n\n    .linkedin-features li {\n      font-size: 13px;\n      color: var(--green-deep);\n      font-weight: 400;\n      padding-left: 20px;\n      position: relative;\n      line-height: 1.5;\n    }\n\n    .linkedin-features li::before {\n      content: '\u2713';\n      position: absolute;\n      left: 0;\n      color: var(--green);\n      font-weight: 500;\n    }\n\n    .linkedin-card-featured .linkedin-features li { color: rgba(247,249,247,0.85); }\n    .linkedin-card-featured .linkedin-features li::before { color: var(--green); }\n\n    .linkedin-btn-outline {\n      display: inline-block;\n      text-align: center;\n      padding: 12px 24px;\n      border-radius: 50px;\n      font-size: 13px;\n      font-weight: 500;\n      font-family: var(--font-body);\n      border: 1.5px solid var(--green-deep);\n      color: var(--green-deep);\n      text-decoration: none;\n      transition: background 0.2s, color 0.2s;\n    }\n\n    .linkedin-btn-outline:hover {\n      background: var(--green-deep);\n      color: #fff;\n    }\n\n    .linkedin-btn-primary {\n      display: inline-block;\n      text-align: center;\n      padding: 12px 24px;\n      border-radius: 50px;\n      font-size: 13px;\n      font-weight: 500;\n      font-family: var(--font-body);\n      background: var(--green);\n      color: #fff;\n      text-decoration: none;\n      border: none;\n      transition: background 0.2s, transform 0.15s;\n    }\n\n    .linkedin-btn-primary:hover { background: #2da85c; transform: translateY(-1px); }\n\n    .linkedin-note {\n      margin-top: 24px;\n      font-size: 11px;\n      color: var(--sage);\n      font-weight: 300;\n      letter-spacing: 0.03em;\n    }\n\n    \/* =====================\n       RESPONSIVE\n    ===================== *\/\n    @media (max-width: 900px) {\n      .nav { padding: 16px 24px; }\n      .nav-links { display: none; }\n\n      .hero { grid-template-columns: 1fr; }\n      .hero-left { padding: 48px 24px; }\n      .hero-right { min-height: 280px; }\n      .hero-title { font-size: 36px; }\n\n      .stats { grid-template-columns: 1fr; }\n      .stat { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.2); padding: 24px 24px; }\n      .stat:last-child { border-bottom: none; }\n\n      .linkedin-section { padding: 56px 24px; }\n      .linkedin-grid { grid-template-columns: 1fr; max-width: 100%; }\n\n      \n      .services-grid { grid-template-columns: 1fr; }\n\n      .projects { padding: 56px 24px; }\n      .projects-grid-3 { grid-template-columns: 1fr; }\n\n      .about { grid-template-columns: 1fr; }\n      .about-visual { min-height: 220px; }\n      .about-content { padding: 48px 24px; }\n\n      .testimonial { padding: 56px 24px; }\n      .quote-text { font-size: 18px; }\n\n      .cta-section { padding: 56px 24px; flex-direction: column; align-items: flex-start; }\n\n      footer { padding: 24px 24px; flex-direction: column; align-items: flex-start; gap: 12px; }\n    }\n  <\/style>\n<\/head>\n<body>\n\n  <!-- ==================\n       HERO\n  =================== -->\n  <section class=\"hero\">\n    <div class=\"hero-left\">\n      <div class=\"badge anim-1\">\n        <div class=\"badge-dot\"><\/div>\n        Communication \u00b7 Marketing \u00b7 Contenu\n      <\/div>\n      <h1 class=\"hero-title anim-2\">\n        Fini le bruit.<br>\n        Place \u00e0 une communication<br>\n        <span>vraiment align\u00e9e.<\/span>\n      <\/h1>\n      <p class=\"hero-sub anim-3\">\n        Fini le bruit ambiant. Votre communication m\u00e9rite d&rsquo;\u00eatre entendue \u2014 claire, coh\u00e9rente, et align\u00e9e avec ce que vous \u00eates vraiment.\n      <\/p>\n      <div class=\"hero-actions anim-4\">\n        <a href=\"#contact\" class=\"btn-primary\">Discutons de votre projet<\/a>\n        <a href=\"#projets\" class=\"btn-ghost\">Voir les projets \u2192<\/a>\n      <\/div>\n    <\/div>\n    <div class=\"hero-right\">\n      <div class=\"mockup-card\">\n        <div class=\"mockup-dots\">\n          <span style=\"background:#FF5F57\"><\/span>\n          <span style=\"background:#FFBD2E\"><\/span>\n          <span style=\"background:#28CA42\"><\/span>\n        <\/div>\n        <div class=\"mockup-label\">wiven.ai \u00b7 IA pour ERP &amp; SI<\/div>\n        <div class=\"mockup-title\">Strat\u00e9gie digitale compl\u00e8te<\/div>\n        <div class=\"mockup-line\" style=\"width:100%\"><\/div>\n        <div class=\"mockup-line\" style=\"width:78%\"><\/div>\n        <div class=\"mockup-line\" style=\"width:90%\"><\/div>\n        <div class=\"mockup-line\" style=\"width:55%\"><\/div>\n        <div class=\"mockup-tag\">\u2713 Blog SEO \u00b7 LinkedIn \u00b7 Site web \u00b7 Salons<\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- ==================\n       STATS\n  =================== -->\n  <section class=\"stats\">\n    <div class=\"stat\">\n      <div class=\"stat-number\">7+<\/div>\n      <div class=\"stat-label\">Ann\u00e9es en communication &#038; marketing<\/div>\n    <\/div>\n    <div class=\"stat\">\n      <div class=\"stat-number\">FR \/ EN<\/div>\n      <div class=\"stat-label\">Bilingue \u00b7 Tech, sant\u00e9, associatif<\/div>\n    <\/div>\n    <div class=\"stat\">\n      <div class=\"stat-number\">Lausanne<\/div>\n      <div class=\"stat-label\">Bas\u00e9e en Suisse romande<\/div>\n    <\/div>\n  <\/section>\n\n  <!-- ==================\n       SERVICES\n  =================== -->\n  <section class=\"services\" id=\"services\">\n    <div class=\"section-label\">Ce que je fais<\/div>\n    <h2 class=\"section-title\">Une communication qui travaille pour vous<\/h2>\n    <div class=\"services-grid\">\n      <div class=\"service-card\">\n        <div class=\"service-icon\">\u2726<\/div>\n        <div class=\"service-name\">Strat\u00e9gie &#038; positionnement<\/div>\n        <p class=\"service-desc\">Avant de produire quoi que ce soit, on cherche ensemble la petite \u00e9tincelle \u2014 ce qui vous rend uniques, ce qui r\u00e9sonne vraiment pour votre cible. Audit de communication, messages cl\u00e9s, plan d&rsquo;action concret.<\/p>\n      <\/div>\n      <div class=\"service-card\">\n        <div class=\"service-icon\">\u25c8<\/div>\n        <div class=\"service-name\">Contenu &#038; pr\u00e9sence digitale<\/div>\n        <p class=\"service-desc\">Articles de blog SEO, posts LinkedIn, newsletters, scripts vid\u00e9o \u2014 du contenu bilingue FR\/EN ancr\u00e9 dans votre r\u00e9alit\u00e9, sans jargon inutile. Pour les startups tech comme pour les associations.<\/p>\n      <\/div>\n      <div class=\"service-card\">\n        <div class=\"service-icon\">\u25ce<\/div>\n        <div class=\"service-name\">Marketing op\u00e9rationnel<\/div>\n        <p class=\"service-desc\">Site web, supports de salon, kak\u00e9monos, roll-ups, campagnes r\u00e9seaux sociaux \u2014 je coordonne la production de A \u00e0 Z pour que votre communication soit coh\u00e9rente sur tous les supports.<\/p>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- ==================\n       LINKEDIN PACKAGES\n  =================== -->\n  <section class=\"linkedin-section\" id=\"linkedin\">\n    <div class=\"section-label\">Pour les ind\u00e9pendants<\/div>\n    <h2 class=\"section-title linkedin-title\">Votre voix sur LinkedIn.<br>R\u00e9dig\u00e9e par moi.<\/h2>\n    <p class=\"linkedin-intro\">Vous avez une expertise r\u00e9elle mais pas le temps \u2014 ni l&rsquo;envie \u2014 de r\u00e9diger vos posts. Je m&rsquo;en charge. Vous relisez, vous publiez. Votre audience voit quelqu&rsquo;un de pr\u00e9sent, coh\u00e9rent et cr\u00e9dible.<\/p>\n    <div class=\"linkedin-grid\">\n\n      <div class=\"linkedin-card\">\n        <div class=\"linkedin-card-header\">\n          <div class=\"linkedin-icon\">in<\/div>\n          <div class=\"linkedin-tier\">Essentiel<\/div>\n        <\/div>\n        <p class=\"linkedin-card-desc\">Pour d\u00e9marrer une pr\u00e9sence r\u00e9guli\u00e8re sans se disperser.<\/p>\n        <ul class=\"linkedin-features\">\n          <li>4 posts par mois<\/li>\n          <li>Strat\u00e9gie \u00e9ditoriale de d\u00e9part<\/li>\n          <li>R\u00e9daction ghostwriting (votre ton, votre voix)<\/li>\n          <li>1 r\u00e9vision par post<\/li>\n          <li>Livraison pr\u00eate \u00e0 publier<\/li>\n        <\/ul>\n        <a href=\"#contact\" class=\"linkedin-btn-outline\">Demander un devis<\/a>\n      <\/div>\n\n      <div class=\"linkedin-card linkedin-card-featured\">\n        <div class=\"linkedin-card-header\">\n          <div class=\"linkedin-icon linkedin-icon-dark\">in<\/div>\n          <div class=\"linkedin-tier\">Pro<\/div>\n          <span class=\"linkedin-badge\">Recommand\u00e9<\/span>\n        <\/div>\n        <p class=\"linkedin-card-desc\">Pour construire une pr\u00e9sence forte et une audience engag\u00e9e.<\/p>\n        <ul class=\"linkedin-features\">\n          <li>8 posts par mois<\/li>\n          <li>Strat\u00e9gie \u00e9ditoriale mensuelle<\/li>\n          <li>R\u00e9daction ghostwriting (votre ton, votre voix)<\/li>\n          <li>R\u00e9visions illimit\u00e9es<\/li>\n          <li>Optimisation du profil incluse<\/li>\n          <li>Suivi des performances<\/li>\n        <\/ul>\n        <a href=\"#contact\" class=\"linkedin-btn-primary\">Demander un devis<\/a>\n      <\/div>\n\n    <\/div>\n    <p class=\"linkedin-note\">Tarifs sur demande \u00b7 Engagement mensuel \u00b7 R\u00e9siliable chaque mois<\/p>\n  <\/section>\n\n  <!-- ==================\n       PROJETS\n  =================== -->\n  <section class=\"projects\" id=\"projets\">\n    <div class=\"section-label\">Projets r\u00e9cents<\/div>\n    <h2 class=\"section-title\">Ce que \u00e7a donne en vrai<\/h2>\n    <div class=\"projects-grid-3\">\n      <a href=\"https:\/\/www.wiven.ai\" target=\"_blank\" rel=\"noopener\" class=\"project-card-3 project-card-link\" style=\"background:#3D3020; text-decoration:none;\">\n        <div class=\"project-preview\">\n          <img decoding=\"async\" src=\"https:\/\/api.screenshotone.com\/take?url=https:\/\/www.wiven.ai&#038;viewport_width=1200&#038;viewport_height=700&#038;format=webp&#038;block_ads=true&#038;block_cookie_banners=true\" alt=\"Aper\u00e7u wiven.ai\" onerror=\"this.style.display='none'\">\n          <div class=\"project-preview-overlay\"><\/div>\n        <\/div>\n        <div class=\"project-tag\">Strat\u00e9gie digitale \u00b7 IA \u00b7 Made in Switzerland<\/div>\n        <div class=\"project-name\">Wiven.ai<\/div>\n        <div class=\"project-client\">Blog SEO \u00b7 LinkedIn \u00b7 Site web \u00b7 Salons \u00b7 Vid\u00e9os \u00b7 Supports marketing<\/div>\n      <\/a>\n      <a href=\"https:\/\/association-via.ch\" target=\"_blank\" rel=\"noopener\" class=\"project-card-3 project-card-link\" style=\"background:#2C2416; text-decoration:none;\">\n        <div class=\"project-preview\">\n          <img decoding=\"async\" src=\"https:\/\/api.screenshotone.com\/take?url=https:\/\/association-via.ch&#038;viewport_width=1200&#038;viewport_height=700&#038;format=webp&#038;block_ads=true&#038;block_cookie_banners=true\" alt=\"Aper\u00e7u association-via.ch\" onerror=\"this.style.display='none'\">\n          <div class=\"project-preview-overlay\"><\/div>\n        <\/div>\n        <div class=\"project-tag\">Sensibilisation \u00b7 B\u00e9n\u00e9volat<\/div>\n        <div class=\"project-name\">Association VIA<\/div>\n        <div class=\"project-client\">Pr\u00e9vention harc\u00e8lement scolaire \u00b7 LinkedIn \u00b7 Communication<\/div>\n      <\/a>\n      <a href=\"https:\/\/allee-therapies-holistiques.ch\" target=\"_blank\" rel=\"noopener\" class=\"project-card-3 project-card-link\" style=\"background:rgba(255,140,90,0.15); border:1px solid rgba(255,140,90,0.3); text-decoration:none;\">\n        <div class=\"project-preview\">\n          <img decoding=\"async\" src=\"https:\/\/api.screenshotone.com\/take?url=https:\/\/allee-therapies-holistiques.ch&#038;viewport_width=1200&#038;viewport_height=700&#038;format=webp&#038;block_ads=true&#038;block_cookie_banners=true\" alt=\"Aper\u00e7u all\u00e9e th\u00e9rapies holistiques\" onerror=\"this.style.display='none'\">\n          <div class=\"project-preview-overlay\"><\/div>\n        <\/div>\n        <div class=\"project-tag\">Site vitrine \u00b7 Th\u00e9rapies douces<\/div>\n        <div class=\"project-name\">All\u00e9e Th\u00e9rapies Holistiques<\/div>\n        <div class=\"project-client\">Site web \u00b7 Contenu \u00b7 Soins \u00e9nerg\u00e9tiques \u00b7 Lausanne<\/div>\n      <\/a>\n    <\/div>\n  <\/section>\n\n  <!-- ==================\n       \u00c0 PROPOS\n  =================== -->\n  <section class=\"about\" id=\"apropos\">\n    <div class=\"about-visual\">\n      <img decoding=\"async\" src=\"https:\/\/site.triskel.ch\/web08\/wp-content\/uploads\/2026\/03\/1740933078716.jpeg\"\n           alt=\"Becky Smith, consultante en communication \u2014 Com Flow\"\n           style=\"width:200px; height:200px; border-radius:50%; object-fit:cover; object-position:center top; position:relative; z-index:1; box-shadow:0 16px 48px rgba(44,36,22,0.2);\">\n    <\/div>\n    <div class=\"about-content\">\n      <div class=\"section-label\">\u00c0 propos<\/div>\n      <h2 class=\"section-title\">La communication, c&rsquo;est mon terrain de jeu depuis 7 ans.<\/h2>\n      <p class=\"about-text\">\n        Je suis Becky, consultante en communication et marketing bas\u00e9e \u00e0 Lausanne. Ce qui me motive ? Trouver la petite \u00e9tincelle qui fait la diff\u00e9rence \u2014 ce d\u00e9tail de positionnement, ce mot juste, cette approche inattendue qui transforme un message ordinaire en quelque chose qui compte vraiment.\n      <\/p>\n      <p class=\"about-text\">\n        Je travaille avec des PME, des startups et des associations en Suisse romande, en fran\u00e7ais et en anglais, avec une conviction : une communication bien align\u00e9e n&rsquo;est pas un luxe \u2014 c&rsquo;est un levier.\n      <\/p>\n      <div class=\"about-values\">\n        <span class=\"value-tag\">Pers\u00e9v\u00e9rance<\/span>\n        <span class=\"value-tag\">Clart\u00e9<\/span>\n        <span class=\"value-tag\">Alignement<\/span>\n        <span class=\"value-tag\">Suisse romande<\/span>\n        <span class=\"value-tag\">Bilingue FR \/ EN<\/span>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- ==================\n       T\u00c9MOIGNAGE\n  =================== -->\n  <section class=\"testimonial\">\n    <div class=\"quote-mark\">\u00ab\u00a0<\/div>\n    <p class=\"quote-text\">\n      Becky a su transformer notre communication en quelque chose de coh\u00e9rent et percutant \u2014 en un temps record.\n    <\/p>\n    <div class=\"quote-author\">\n      <strong>Marie D.<\/strong> \u00b7 Directrice marketing, PME romande\n    <\/div>\n  <\/section>\n\n  <!-- ==================\n       CTA\n  =================== -->\n  <section class=\"cta-section\" id=\"contact\">\n    <div>\n      <h2 class=\"cta-title\">Votre projet m\u00e9rite une communication qui compte.<\/h2>\n      <p class=\"cta-sub\">PME, startup ou association \u2014 parlons de ce que vous voulez accomplir et voyons comment y arriver ensemble.<\/p>\n    <\/div>\n    <a href=\"\/cdn-cgi\/l\/email-protection#1a727f7676755a7975777c76756d347972\" class=\"btn-cta\">Prendre contact \u2192<\/a>\n  <\/section>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Com Flow \u2014 Communication align\u00e9e pour PME et startups suisses Communication \u00b7 Marketing \u00b7 Contenu Fini le bruit. Place \u00e0 une communication vraiment align\u00e9e. Fini le bruit ambiant. Votre communication m\u00e9rite d&rsquo;\u00eatre entendue \u2014 claire, coh\u00e9rente, et align\u00e9e avec ce que vous \u00eates vraiment. Discutons de votre projet Voir les projets \u2192 wiven.ai \u00b7 IA [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-11","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/site.triskel.ch\/web08\/wp-json\/wp\/v2\/pages\/11","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/site.triskel.ch\/web08\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/site.triskel.ch\/web08\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/site.triskel.ch\/web08\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/site.triskel.ch\/web08\/wp-json\/wp\/v2\/comments?post=11"}],"version-history":[{"count":8,"href":"https:\/\/site.triskel.ch\/web08\/wp-json\/wp\/v2\/pages\/11\/revisions"}],"predecessor-version":[{"id":28,"href":"https:\/\/site.triskel.ch\/web08\/wp-json\/wp\/v2\/pages\/11\/revisions\/28"}],"wp:attachment":[{"href":"https:\/\/site.triskel.ch\/web08\/wp-json\/wp\/v2\/media?parent=11"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}