{"id":303,"date":"2026-03-10T22:16:12","date_gmt":"2026-03-10T22:16:12","guid":{"rendered":"https:\/\/www.cocomunication.fr\/?page_id=303"},"modified":"2026-06-13T08:25:57","modified_gmt":"2026-06-13T08:25:57","slug":"portfolio","status":"publish","type":"page","link":"https:\/\/www.cocomunication.fr\/?page_id=303","title":{"rendered":"Portfolio"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"303\" class=\"elementor elementor-303\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-97229cd fondfolio e-flex e-con-boxed e-con e-parent\" data-id=\"97229cd\" 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-155b71a elementor-widget elementor-widget-html\" data-id=\"155b71a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div class=\"apple-dark-container\">\r\n  <ul class=\"apple-dark-menu\">\r\n    <li class=\"apple-item\">\r\n      <a href=\"https:\/\/cocomunication.fr\">\r\n        <i class=\"fas fa-home\"><\/i>\r\n        <span class=\"apple-label\">Accueil<\/span>\r\n      <\/a>\r\n    <\/li>\r\n    <li class=\"apple-item\">\r\n      <a href=\"https:\/\/www.cocomunication.fr\/?page_id=303\">\r\n        <i class=\"fas fa-th-large\"><\/i>\r\n        <span class=\"apple-label\">Portfolio<\/span>\r\n      <\/a>\r\n    <\/li>\r\n    <li class=\"apple-item\">\r\n      <a href=\"https:\/\/www.cocomunication.fr\/?page_id=397\">\r\n        <i class=\"fas fa-envelope\"><\/i>\r\n        <span class=\"apple-label\">Contact<\/span>\r\n      <\/a>\r\n    <\/li>\r\n  <\/ul>\r\n<\/div>\r\n\r\n<style>\r\n\/* 1. CENTRAGE ET FOND *\/\r\n.apple-dark-container {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  width: 100%;\r\n  padding: 30px 0;\r\n  font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\r\n}\r\n\r\n\/* 2. LA BARRE (DARK GLASS) *\/\r\n.apple-dark-menu {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  list-style: none;\r\n  margin: 0;\r\n  padding: 8px;\r\n  \/* Fond sombre translucide type iOS Dark Mode *\/\r\n  background: rgba(28, 28, 30, 0.7); \r\n  backdrop-filter: blur(25px) saturate(140%);\r\n  -webkit-backdrop-filter: blur(25px) saturate(140%);\r\n  border-radius: 100px;\r\n  \/* Bordure fine pour s\u00e9parer du fond noir *\/\r\n  border: 1px solid rgba(255, 255, 255, 0.1);\r\n  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);\r\n  gap: 10px;\r\n}\r\n\r\n\/* 3. LES BOUTONS *\/\r\n.apple-item a {\r\n  display: flex;\r\n  align-items: center;\r\n  text-decoration: none;\r\n  height: 50px;\r\n  min-width: 50px;\r\n  max-width: 50px;\r\n  padding: 0 16px;\r\n  border-radius: 50px;\r\n  \/* Gris sombre discret par d\u00e9faut *\/\r\n  color: rgba(255, 255, 255, 0.4); \r\n  background: transparent;\r\n  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);\r\n  overflow: hidden;\r\n  white-space: nowrap;\r\n}\r\n\r\n\/* 4. IC\u00d4NES *\/\r\n.apple-item i {\r\n  font-size: 18px;\r\n  min-width: 20px;\r\n  text-align: center;\r\n}\r\n\r\n\/* 5. LE TEXTE *\/\r\n.apple-label {\r\n  font-size: 14px;\r\n  font-weight: 600;\r\n  margin-left: 12px;\r\n  opacity: 0;\r\n  transition: opacity 0.3s ease;\r\n}\r\n\r\n\/* 6. EFFET AU SURVOL (INVERS\u00c9) *\/\r\n.apple-item:hover a {\r\n  max-width: 200px;\r\n  \/* Devient Blanc pur au survol *\/\r\n  color: #ffffff !important; \r\n  \/* Fond gris anthracite pour faire ressortir le bouton *\/\r\n  background: rgba(255, 255, 255, 0.12); \r\n  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);\r\n}\r\n\r\n.apple-item:hover .apple-label {\r\n  opacity: 1;\r\n}\r\n\r\n\/* 7. EFFET DE CLIC *\/\r\n.apple-item a:active {\r\n  transform: scale(0.94);\r\n}\r\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8676332 elementor-widget elementor-widget-html\" data-id=\"8676332\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"fr\">\r\n<head>\r\n  <meta charset=\"UTF-8\" \/>\r\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\r\n  <title>Portfolio<\/title>\r\n  <style>\r\n    :root {\r\n      --bg: #0f1115;\r\n      --panel: #171a21;\r\n      --panel-2: #1d212b;\r\n      --text: #f5f7fb;\r\n      --muted: #a8b0c0;\r\n      --line: rgba(255,255,255,0.08);\r\n      --accent: #ffffff;\r\n      --radius: 22px;\r\n      --shadow: 0 20px 60px rgba(0,0,0,0.35);\r\n      --container: 1280px;\r\n    }\r\n\r\n    * { box-sizing: border-box; }\r\n    html { scroll-behavior: smooth; }\r\n    body {\r\n      margin: 0;\r\n      font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\r\n      background:\r\n        radial-gradient(circle at top left, rgba(255,255,255,0.04), transparent 28%),\r\n        linear-gradient(180deg, #0b0d12 0%, #12151c 100%);\r\n      color: var(--text);\r\n    }\r\n\r\n    a { color: inherit; text-decoration: none; }\r\n    img { max-width: 100%; display: block; }\r\n\r\n    .portfolio-shell {\r\n      width: min(100% - 32px, var(--container));\r\n      margin: 0 auto;\r\n      padding: 56px 0 80px;\r\n    }\r\n\r\n    .portfolio-head {\r\n      display: grid;\r\n      gap: 20px;\r\n      margin-bottom: 40px;\r\n    }\r\n\r\n    .eyebrow {\r\n      display: inline-flex;\r\n      width: fit-content;\r\n      padding: 8px 14px;\r\n      border: 1px solid var(--line);\r\n      border-radius: 999px;\r\n      background: rgba(255,255,255,0.03);\r\n      color: var(--muted);\r\n      font-size: 12px;\r\n      letter-spacing: 0.08em;\r\n      text-transform: uppercase;\r\n    }\r\n\r\n    .portfolio-title {\r\n      margin: 0;\r\n      font-size: clamp(34px, 6vw, 72px);\r\n      line-height: 0.98;\r\n      letter-spacing: -0.04em;\r\n      max-width: 900px;\r\n    }\r\n\r\n    .portfolio-subtitle {\r\n      margin: 0;\r\n      color: var(--muted);\r\n      max-width: 760px;\r\n      font-size: clamp(16px, 2vw, 19px);\r\n      line-height: 1.65;\r\n    }\r\n\r\n    .projects-grid {\r\n      display: grid;\r\n      grid-template-columns: repeat(12, 1fr);\r\n      gap: 22px;\r\n    }\r\n\r\n    .project-card {\r\n      grid-column: span 6;\r\n      position: relative;\r\n      min-height: 420px;\r\n      border-radius: var(--radius);\r\n      overflow: hidden;\r\n      border: 1px solid var(--line);\r\n      background: var(--panel);\r\n      box-shadow: var(--shadow);\r\n      transform: translateY(0);\r\n      transition: transform 0.35s ease, border-color 0.35s ease;\r\n      cursor: pointer;\r\n      isolation: isolate;\r\n    }\r\n\r\n    .project-card:hover {\r\n      transform: translateY(-6px);\r\n      border-color: rgba(255,255,255,0.16);\r\n    }\r\n\r\n    .project-media {\r\n      position: absolute;\r\n      inset: 0;\r\n    }\r\n\r\n    .project-media img {\r\n      width: 100%;\r\n      height: 100%;\r\n      object-fit: cover;\r\n      transition: transform 0.8s ease;\r\n    }\r\n\r\n    .project-card:hover .project-media img {\r\n      transform: scale(1.06);\r\n    }\r\n\r\n    .project-overlay {\r\n      position: absolute;\r\n      inset: 0;\r\n      background:\r\n        linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.16) 35%, rgba(0,0,0,0.78) 100%),\r\n        linear-gradient(135deg, rgba(255,255,255,0.08), transparent 45%);\r\n      z-index: 1;\r\n    }\r\n\r\n    .project-content {\r\n      position: absolute;\r\n      inset: auto 0 0 0;\r\n      z-index: 2;\r\n      padding: 26px;\r\n      display: grid;\r\n      gap: 12px;\r\n    }\r\n\r\n    .project-name {\r\n      margin: 0;\r\n      font-size: clamp(22px, 2.4vw, 34px);\r\n      line-height: 1.05;\r\n      letter-spacing: -0.03em;\r\n    }\r\n\r\n    .project-desc {\r\n      margin: 0;\r\n      color: rgba(255,255,255,0.78);\r\n      line-height: 1.55;\r\n      font-size: 14px;\r\n      max-width: 540px;\r\n    }\r\n\r\n    .project-meta {\r\n      display: flex;\r\n      gap: 14px;\r\n      flex-wrap: wrap;\r\n      color: rgba(255,255,255,0.72);\r\n      font-size: 13px;\r\n    }\r\n\r\n    .modal {\r\n      position: fixed;\r\n      inset: 0;\r\n      background: rgba(7,8,12,0.8);\r\n      backdrop-filter: blur(10px);\r\n      display: none;\r\n      align-items: center;\r\n      justify-content: center;\r\n      padding: 20px;\r\n      z-index: 9999;\r\n    }\r\n\r\n    .modal.open { display: flex; }\r\n\r\n    .modal-panel {\r\n      width: min(1100px, 100%);\r\n      max-height: 92vh;\r\n      overflow: auto;\r\n      border-radius: 28px;\r\n      background: #10131a;\r\n      border: 1px solid var(--line);\r\n      box-shadow: 0 30px 80px rgba(0,0,0,0.45);\r\n      position: relative;\r\n    }\r\n\r\n    .modal-close {\r\n      position: sticky;\r\n      top: 16px;\r\n      margin-left: auto;\r\n      margin-right: 16px;\r\n      z-index: 3;\r\n      width: 44px;\r\n      height: 44px;\r\n      border: 1px solid var(--line);\r\n      border-radius: 999px;\r\n      background: rgba(255,255,255,0.06);\r\n      color: var(--text);\r\n      cursor: pointer;\r\n      backdrop-filter: blur(10px);\r\n    }\r\n\r\n    .modal-hero {\r\n      position: relative;\r\n      min-height: 420px;\r\n      border-radius: 28px 28px 0 0;\r\n      overflow: hidden;\r\n    }\r\n\r\n    .modal-hero img {\r\n      width: 100%;\r\n      height: 100%;\r\n      object-fit: cover;\r\n      position: absolute;\r\n      inset: 0;\r\n    }\r\n\r\n    .modal-hero::after {\r\n      content: \"\";\r\n      position: absolute;\r\n      inset: 0;\r\n      background: linear-gradient(180deg, rgba(0,0,0,0.06), rgba(0,0,0,0.76));\r\n    }\r\n\r\n    .modal-hero-content {\r\n      position: absolute;\r\n      left: 0;\r\n      right: 0;\r\n      bottom: 0;\r\n      z-index: 1;\r\n      padding: 28px;\r\n      display: grid;\r\n      gap: 12px;\r\n    }\r\n\r\n    .modal-hero-content h2 {\r\n      margin: 0;\r\n      font-size: clamp(28px, 5vw, 56px);\r\n      line-height: 1;\r\n      letter-spacing: -0.04em;\r\n    }\r\n\r\n    .modal-body {\r\n      padding: 0 0 28px;\r\n      display: grid;\r\n      gap: 0;\r\n    }\r\n\r\n    .behance-stack {\r\n      display: grid;\r\n      gap: 0;\r\n    }\r\n\r\n    .behance-stack img {\r\n      width: 100%;\r\n      display: block;\r\n      border: 0;\r\n      border-radius: 0;\r\n      background: var(--panel-2);\r\n    }\r\n\r\n    .project-link-wrap {\r\n      padding: 22px 28px 0;\r\n    }\r\n\r\n    .project-link {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      width: fit-content;\r\n      padding: 14px 18px;\r\n      border-radius: 999px;\r\n      background: var(--accent);\r\n      color: #0b0d12;\r\n      font-weight: 700;\r\n    }\r\n\r\n    @media (max-width: 1024px) {\r\n      .project-card { grid-column: span 12; }\r\n    }\r\n\r\n    @media (max-width: 767px) {\r\n      .portfolio-shell { width: min(100% - 20px, var(--container)); padding-top: 32px; }\r\n      .projects-grid { grid-template-columns: 1fr; }\r\n      .project-card { grid-column: auto; min-height: 320px; }\r\n      .modal-hero { min-height: 280px; }\r\n      .project-link-wrap { padding: 18px 18px 0; }\r\n      .project-content { padding: 20px; }\r\n    }\r\n  <\/style>\r\n<\/head>\r\n<body>\r\n  <section class=\"portfolio-shell\">\r\n    <div class=\"portfolio-head\">\r\n      <span class=\"eyebrow\">Portfolio<\/span>\r\n      <h1 class=\"portfolio-title\">Mes projets cr\u00e9atifs.<\/h1>\r\n    <\/div>\r\n\r\n    <div class=\"projects-grid\" id=\"projectsGrid\"><\/div>\r\n  <\/section>\r\n\r\n  <div class=\"modal\" id=\"projectModal\" aria-hidden=\"true\">\r\n    <div class=\"modal-panel\">\r\n      <button class=\"modal-close\" id=\"closeModal\" aria-label=\"Fermer\">\u2715<\/button>\r\n      <div id=\"modalContent\"><\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <script>\r\n    const projects = [\r\n      {\r\n        title: \"Frosty Beats\",\r\n        year: \"2026\",\r\n        client: \"Projet conceptuel\",\r\n        role: \"Branding \/ direction visuelle\",\r\n        cover: \"https:\/\/www.cocomunication.fr\/wp-content\/uploads\/2026\/04\/1.jpg\",\r\n        excerpt: \"Une identit\u00e9 \u00e9lectro-givr\u00e9e imagin\u00e9e pour un festival immersif \u00e0 La Plagne, entre French Touch et ambiance haute montagne.\",\r\n        intro: \"Frosty Beats est pens\u00e9 comme une exp\u00e9rience visuelle et musicale compl\u00e8te. L'univers m\u00e9lange l'\u00e9nergie de l'\u00e9lectro avec l'imaginaire enneig\u00e9 d'une station de ski qui cherche \u00e0 se r\u00e9inventer.\",\r\n        context: \"Le projet na\u00eet de l'id\u00e9e que les stations de montagne doivent proposer des exp\u00e9riences plus culturelles et plus m\u00e9morables. L'identit\u00e9 devait traduire \u00e0 la fois la f\u00eate, le froid, le relief et l'\u00e9nergie du son.\",\r\n        process: \"Construction d'un univers graphique fort, travail autour d'une mascotte polaire, composition d'un syst\u00e8me visuel impactant, d\u00e9clinaison des visuels de communication et affirmation d'un ton tr\u00e8s \u00e9v\u00e9nementiel.\",\r\n        result: \"Le r\u00e9sultat donne une direction artistique imm\u00e9diatement reconnaissable, immersive et plus premium, capable de faire exister le festival comme une vraie marque.\",\r\n        link: \"https:\/\/www.behance.net\/gallery\/246025989\/FROSTY-BEATS\",\r\n        gallery: [\r\n            \"https:\/\/www.cocomunication.fr\/wp-content\/uploads\/2026\/03\/image_2026-03-20_143543069-1.png\",\r\n          \"https:\/\/www.cocomunication.fr\/wp-content\/uploads\/2026\/04\/1.jpg\",\r\n          \"https:\/\/www.cocomunication.fr\/wp-content\/uploads\/2026\/04\/2.gif\",\r\n          \"https:\/\/www.cocomunication.fr\/wp-content\/uploads\/2026\/04\/3.jpg\",\r\n          \"https:\/\/www.cocomunication.fr\/wp-content\/uploads\/2026\/04\/4.jpg\",\r\n          \"https:\/\/www.cocomunication.fr\/wp-content\/uploads\/2026\/04\/5.gif\",\r\n          \"https:\/\/www.cocomunication.fr\/wp-content\/uploads\/2026\/04\/6.jpg\",\r\n          \"https:\/\/www.cocomunication.fr\/wp-content\/uploads\/2026\/04\/7.jpg\"\r\n        ]\r\n      },\r\n      {\r\n        title: \"Cocomunication | Agence de communication\",\r\n        year: \"2026\",\r\n        client: \"Cocomunication\",\r\n        role: \"Identit\u00e9 visuelle\",\r\n        cover: \"https:\/\/mir-s3-cdn-cf.behance.net\/project_modules\/max_632_webp\/379b15245710349.69c154d23ed07.jpg\",\r\n        excerpt: \"Cr\u00e9ation d'une identit\u00e9 visuelle pour une agence de communication \u00e0 Clermont-Ferrand, entre modernit\u00e9, clart\u00e9 et ambition entrepreneuriale.\",\r\n        intro: \"Ce projet pr\u00e9sente l'identit\u00e9 de Cocomunication, une agence \u00e9mergente port\u00e9e par une approche moderne de la communication, du web et du branding.\",\r\n        context: \"Dans un secteur satur\u00e9, l'enjeu \u00e9tait de construire une image imm\u00e9diatement identifiable, avec un ton plus frais, plus strat\u00e9gique et plus cr\u00e9dible pour les futurs clients.\",\r\n        process: \"Travail sur le positionnement, cr\u00e9ation d'un univers graphique simple et m\u00e9morable, conception du logo, choix d'une palette forte et d\u00e9clinaison sur plusieurs supports de communication.\",\r\n        result: \"Le projet pose les bases d'une agence avec une vraie personnalit\u00e9 visuelle, coh\u00e9rente, impactante et adapt\u00e9e \u00e0 une pr\u00e9sence digitale professionnelle.\",\r\n        link: \"https:\/\/www.behance.net\/gallery\/245710349\/Cocomunication-Agence-de-communication\",\r\n        gallery: [\r\n            \"https:\/\/www.cocomunication.fr\/wp-content\/uploads\/2026\/04\/image_2026-04-07_104310274.png\",\r\n          \"https:\/\/mir-s3-cdn-cf.behance.net\/project_modules\/max_632_webp\/379b15245710349.69c154d23ed07.jpg\",\r\n          \"https:\/\/www.cocomunication.fr\/wp-content\/uploads\/2026\/03\/2.gif\",\r\n          \"https:\/\/www.cocomunication.fr\/wp-content\/uploads\/2026\/03\/3-3.jpg\"\r\n        ]\r\n      },\r\n      {\r\n        title: \"Brenas Charpente\",\r\n        year: \"2026\",\r\n        client: \"Cocomunication\",\r\n        role: \"Identit\u00e9 visuelle, web site\",\r\n        cover: \"https:\/\/www.cocomunication.fr\/wp-content\/uploads\/2026\/06\/image_2026-06-11_141305387.png\",\r\n        excerpt: \"Reprise du logo sur adobe illustrator et cr\u00e9ation d'un site web sur mesure.\",\r\n        intro: \"Ce projet pr\u00e9sente le site internet Brenas Charpente sur lequelle j'ai travaill\u00e9 pour un premier client me faisant confiance afin de mettre son entreprise en avant.\",\r\n        process: \"Travail du logo sur adobe illustrator, reprise de l'identit\u00e9 visuel et cr\u00e9ation du site internet \u00e0 partir d'une maquette g\u00e9n\u00e9r\u00e9 par IA puis valid\u00e9 par le client.\",\r\n        link: \"https:\/\/www.brenasdamien.fafe3266.odns.fr\/#\",\r\n        gallery: [\r\n            \"https:\/\/www.cocomunication.fr\/wp-content\/uploads\/2026\/06\/image_2026-06-11_142314899.png\",\r\n            \"https:\/\/www.cocomunication.fr\/wp-content\/uploads\/2026\/06\/image_2026-06-11_144638539.png\",\r\n          \"https:\/\/www.cocomunication.fr\/wp-content\/uploads\/2026\/06\/image_2026-06-11_144607573.png\",\r\n          \"https:\/\/www.cocomunication.fr\/wp-content\/uploads\/2026\/06\/image_2026-06-11_144732672.png\",\r\n          \"https:\/\/www.cocomunication.fr\/wp-content\/uploads\/2026\/06\/image_2026-06-11_144820257.png\",\r\n          \"https:\/\/www.cocomunication.fr\/wp-content\/uploads\/2026\/06\/image_2026-06-11_144907538.png\"\r\n        ]\r\n      },\r\n      {\r\n        title: \"AERO-X\",\r\n        year: \"2026\",\r\n        client: \"Cocomunication\",\r\n        role: \"Identit\u00e9 visuelle, projet fictif cr\u00e9ation d'une entreprise.\",\r\n        cover: \"https:\/\/www.cocomunication.fr\/wp-content\/uploads\/2026\/06\/image_2026-06-13_101407792.png\",\r\n        excerpt: \"Cr\u00e9ation d'une entreprise de A \u00e0 Z en commun avec les BTS NDRC, A\u00e9ro-x est une entreprise de livraison par drone dans la ville de Paris.\",\r\n        intro: \"Cr\u00e9ation d'une entreprise de A \u00e0 Z en commun avec les BTS NDRC, A\u00e9ro-x est une entreprise de livraison par drone dans la ville de Paris.\",\r\n        process: \"Cr\u00e9ation d'une entreprise de A \u00e0 Z en commun avec les BTS NDRC, A\u00e9ro-x est une entreprise de livraison par drone dans la ville de Paris.\",\r\n        link: \"https:\/\/canva.link\/j84nhfxhlref6cb\",\r\n        gallery: [\r\n            \"https:\/\/www.cocomunication.fr\/wp-content\/uploads\/2026\/06\/image_2026-06-13_101407792.png\",\r\n            \"https:\/\/www.cocomunication.fr\/wp-content\/uploads\/2026\/06\/image_2026-06-13_101958801.png\",\r\n          \"https:\/\/www.cocomunication.fr\/wp-content\/uploads\/2026\/06\/image_2026-06-13_102038114.png\",\r\n          \"https:\/\/www.cocomunication.fr\/wp-content\/uploads\/2026\/06\/image_2026-06-13_102131076.png\",\r\n          \"https:\/\/www.cocomunication.fr\/wp-content\/uploads\/2026\/06\/image_2026-06-13_102204289.png\",\r\n          \"https:\/\/www.cocomunication.fr\/wp-content\/uploads\/2026\/06\/image_2026-06-13_102250831.png\"\r\n        ]\r\n      }\r\n    ];\r\n\r\n    const grid = document.getElementById('projectsGrid');\r\n    const modal = document.getElementById('projectModal');\r\n    const modalContent = document.getElementById('modalContent');\r\n    const closeModal = document.getElementById('closeModal');\r\n\r\n    function renderProjects() {\r\n      grid.innerHTML = projects.map((project, index) => `\r\n        <article class=\"project-card\" data-index=\"${index}\">\r\n          <div class=\"project-media\">\r\n            <img decoding=\"async\" src=\"${project.cover}\" alt=\"${project.title}\" loading=\"lazy\">\r\n          <\/div>\r\n          <div class=\"project-overlay\"><\/div>\r\n          <div class=\"project-content\">\r\n            <h3 class=\"project-name\">${project.title}<\/h3>\r\n            <p class=\"project-desc\">${project.excerpt}<\/p>\r\n            <div class=\"project-meta\">\r\n              <span>${project.client}<\/span>\r\n              <span>${project.role}<\/span>\r\n              <span>${project.year}<\/span>\r\n            <\/div>\r\n          <\/div>\r\n        <\/article>\r\n      `).join('');\r\n\r\n      grid.querySelectorAll('.project-card').forEach(card => {\r\n        card.addEventListener('click', () => openModal(Number(card.dataset.index)));\r\n      });\r\n    }\r\n\r\n    function openModal(index) {\r\n      const project = projects[index];\r\n      modalContent.innerHTML = `\r\n        <div class=\"modal-hero\">\r\n          <img decoding=\"async\" src=\"${project.cover}\" alt=\"${project.title}\">\r\n          <div class=\"modal-hero-content\">\r\n            <h2>${project.title}<\/h2>\r\n            <p class=\"project-desc\">${project.excerpt}<\/p>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"modal-body\">\r\n          <div class=\"behance-stack\">\r\n            ${project.gallery.map(image => `<img decoding=\"async\" src=\"${image}\" alt=\"${project.title}\" loading=\"lazy\">`).join('')}\r\n          <\/div>\r\n\r\n          <div class=\"project-link-wrap\">\r\n            <a class=\"project-link\" href=\"${project.link}\" target=\"_blank\" rel=\"noopener\">Voir le projet<\/a>\r\n          <\/div>\r\n        <\/div>\r\n      `;\r\n\r\n      modal.classList.add('open');\r\n      modal.setAttribute('aria-hidden', 'false');\r\n      document.body.style.overflow = 'hidden';\r\n    }\r\n\r\n    function closeProjectModal() {\r\n      modal.classList.remove('open');\r\n      modal.setAttribute('aria-hidden', 'true');\r\n      document.body.style.overflow = '';\r\n    }\r\n\r\n    closeModal.addEventListener('click', closeProjectModal);\r\n    modal.addEventListener('click', (e) => {\r\n      if (e.target === modal) closeProjectModal();\r\n    });\r\n    document.addEventListener('keydown', (e) => {\r\n      if (e.key === 'Escape') closeProjectModal();\r\n    });\r\n\r\n    renderProjects();\r\n  <\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d8a099b elementor-widget elementor-widget-html\" data-id=\"d8a099b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div class=\"btn-share-container\">\r\n  <button class=\"btn-5-clean\" onclick=\"handleButtonClick(this)\">\r\n    <div class=\"state state--default\">\r\n      <div class=\"icon\">\r\n        <svg width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n          <g style=\"filter: url(#shadow-val)\">\r\n            <path d=\"M14.2199 21.63C13.0399 21.63 11.3699 20.8 10.0499 16.83L9.32988 14.67L7.16988 13.95C3.20988 12.63 2.37988 10.96 2.37988 9.78001C2.37988 8.61001 3.20988 6.93001 7.16988 5.60001L15.6599 2.77001C17.7799 2.06001 19.5499 2.27001 20.6399 3.35001C21.7299 4.43001 21.9399 6.21001 21.2299 8.33001L18.3999 16.82C17.0699 20.8 15.3999 21.63 14.2199 21.63ZM7.63988 7.03001C4.85988 7.96001 3.86988 9.06001 3.86988 9.78001C3.86988 10.5 4.85988 11.6 7.63988 12.52L10.1599 13.36C10.3799 13.43 10.5599 13.61 10.6299 13.83L11.4699 16.35C12.3899 19.13 13.4999 20.12 14.2199 20.12C14.9399 20.12 16.0399 19.13 16.9699 16.35L19.7999 7.86001C20.3099 6.32001 20.2199 5.06001 19.5699 4.41001C18.9199 3.76001 17.6599 3.68001 16.1299 4.19001L7.63988 7.03001Z\" fill=\"currentColor\"><\/path>\r\n            <path d=\"M10.11 14.4C9.92005 14.4 9.73005 14.33 9.58005 14.18C9.29005 13.89 9.29005 13.41 9.58005 13.12L13.16 9.53C13.45 9.24 13.93 9.24 14.22 9.53C14.51 9.82 14.51 10.3 14.22 10.59L10.64 14.18C10.5 14.33 10.3 14.4 10.11 14.4Z\" fill=\"currentColor\"><\/path>\r\n          <\/g>\r\n          <defs><filter id=\"shadow-val\"><feDropShadow dx=\"0\" dy=\"1\" stdDeviation=\"0.6\" flood-opacity=\"0.5\"\/><\/filter><\/defs>\r\n        <\/svg>\r\n      <\/div>\r\n      <p>\r\n        <span style=\"--i: 0\">P<\/span><span style=\"--i: 1\">a<\/span><span style=\"--i: 2\">r<\/span><span style=\"--i: 3\">t<\/span><span style=\"--i: 4\">a<\/span><span style=\"--i: 5\">g<\/span><span style=\"--i: 6\">e<\/span><span style=\"--i: 7\">r<\/span>\r\n      <\/p>\r\n    <\/div>\r\n\r\n    <div class=\"state state--sent\">\r\n      <div class=\"icon\">\r\n        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" height=\"1em\" width=\"1em\">\r\n          <path fill=\"currentColor\" d=\"M12 22.75C6.07 22.75 1.25 17.93 1.25 12C1.25 6.07 6.07 1.25 12 1.25C17.93 1.25 22.75 6.07 22.75 12C22.75 17.93 17.93 22.75 12 22.75ZM12 2.75C6.9 2.75 2.75 6.9 2.75 12C2.75 17.1 6.9 21.25 12 21.25C17.1 21.25 21.25 17.1 21.25 12C21.25 6.9 17.1 2.75 12 2.75Z\"><\/path>\r\n          <path fill=\"currentColor\" d=\"M10.5795 15.5801C10.3795 15.5801 10.1895 15.5001 10.0495 15.3601L7.21945 12.5301C7.98945 11.1801 10.5795 13.7701 15.7195 8.6301C16.7795 9.6901 11.1095 15.3601 10.5795 15.5801Z\"><\/path>\r\n        <\/svg>\r\n      <\/div>\r\n      <p>\r\n        <span style=\"--i: 9\">E<\/span><span style=\"--i: 10\">n<\/span><span style=\"--i: 11\">v<\/span><span style=\"--i: 12\">o<\/span><span style=\"--i: 13\">y<\/span><span style=\"--i: 14\">\u00e9<\/span><span style=\"--i: 15\">!<\/span>\r\n      <\/p>\r\n    <\/div>\r\n  <\/button>\r\n<\/div>\r\n\r\n<style>\r\n.btn-share-container {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  padding: 10px;\r\n}\r\n\r\n.btn-5-clean {\r\n  --primary: #02A2F8;\r\n  --bg-dark: #181E2C;\r\n  --radius: 32px;\r\n  cursor: pointer;\r\n  border-radius: var(--radius);\r\n  border: none;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  position: relative;\r\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\r\n  min-width: 190px;\r\n  height: 64px;\r\n  background: var(--bg-dark); \/* Visibilit\u00e9 optimale sur fond clair *\/\r\n  color: white;\r\n  font-family: \"Poppins\", sans-serif;\r\n  font-size: 18px;\r\n  font-weight: 600;\r\n  overflow: visible;\r\n  padding: 0 20px;\r\n}\r\n\r\n\/* Centrage des \u00e9tats *\/\r\n.btn-5-clean .state {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: 10px;\r\n  z-index: 2;\r\n  width: 100%;\r\n}\r\n\r\n.btn-5-clean .icon {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  transition: all 0.3s ease;\r\n}\r\n\r\n.btn-5-clean p { margin: 0; display: flex; }\r\n.btn-5-clean p span { display: block; }\r\n\r\n\/* Effet au survol simple et propre *\/\r\n.btn-5-clean:hover {\r\n  transform: scale(1.03);\r\n  background: #232d42; \/* L\u00e9g\u00e8rement plus clair au survol *\/\r\n}\r\n\r\n.btn-5-clean:hover .state--default .icon {\r\n  transform: rotate(45deg) scale(1.1);\r\n}\r\n\r\n\/* Animation des lettres (Vague) *\/\r\n.btn-5-clean:hover p span {\r\n  animation: waveClean 0.5s ease forwards calc(var(--i) * 0.02s);\r\n}\r\n\r\n@keyframes waveClean {\r\n  50% { transform: translateY(-4px); color: var(--primary); }\r\n  100% { transform: translateY(0); }\r\n}\r\n\r\n\/* Animation exacte du d\u00e9collage *\/\r\n.btn-5-clean.is-animating .state--default .icon svg {\r\n  animation: takeOffExact 0.8s linear forwards;\r\n}\r\n\r\n@keyframes takeOffExact {\r\n  0% { opacity: 1; }\r\n  60% { opacity: 1; transform: translateX(70px) rotate(45deg) scale(2); }\r\n  100% { opacity: 0; transform: translateX(160px) rotate(45deg) scale(0); }\r\n}\r\n\r\n\/* \u00c9tat Final (Envoy\u00e9) *\/\r\n.btn-5-clean .state--sent { display: none !important; }\r\n\r\n.btn-5-clean.is-sent {\r\n  background: var(--primary) !important;\r\n  color: white !important;\r\n}\r\n\r\n.btn-5-clean.is-sent .state--default { display: none !important; }\r\n.btn-5-clean.is-sent .state--sent { \r\n  display: flex !important;\r\n  animation: fadeIn 0.4s ease;\r\n}\r\n\r\n@keyframes fadeIn {\r\n  from { opacity: 0; transform: translateY(5px); }\r\n  to { opacity: 1; transform: translateY(0); }\r\n}\r\n<\/style>\r\n\r\n<script>\r\nfunction handleButtonClick(btn) {\r\n  if (btn.classList.contains('is-animating') || btn.classList.contains('is-sent')) return;\r\n  \r\n  btn.classList.add('is-animating');\r\n  const url = window.location.href;\r\n\r\n  setTimeout(() => {\r\n    btn.classList.remove('is-animating');\r\n    btn.classList.add('is-sent');\r\n    \r\n    \/\/ Partage natif mobile ou copie\r\n    if (navigator.share) {\r\n      navigator.share({ title: 'Partager ce site', url: url });\r\n    } else {\r\n      navigator.clipboard.writeText(url);\r\n      alert(\"Lien copi\u00e9 dans votre presse-papier !\");\r\n    }\r\n  }, 850);\r\n}\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-28d8093 elementor-widget elementor-widget-html\" data-id=\"28d8093\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<script>\r\nif (window.CSS && CSS.registerProperty) {\r\n    const properties = [\r\n        '--x-0', '--y-0', '--x-1', '--y-1', '--x-2', '--y-2', '--x-3', '--y-3', \r\n        '--x-4', '--y-4', '--x-5', '--y-5', '--x-6', '--y-6', '--x-7', '--y-7', \r\n        '--x-8', '--y-8', '--x-9', '--y-9', '--s-start-0', '--s-end-0', \r\n        '--s-start-1', '--s-end-1', '--s-start-2', '--s-end-2', '--s-start-6', '--s-end-6',\r\n        \/* Ajout des variables de couleurs pour une transition fluide *\/\r\n        '--c-0', '--c-1', '--c-2', '--c-3', '--c-4', '--c-5', '--c-6', '--c-7', '--c-8', '--c-9'\r\n    ];\r\n    properties.forEach(prop => {\r\n        try {\r\n            CSS.registerProperty({\r\n                name: prop,\r\n                syntax: prop.includes('--c-') ? '<color>' : '<percentage>',\r\n                inherits: false,\r\n                initialValue: prop.includes('--c-') ? '#363234' : '50%'\r\n            });\r\n        } catch (e) {}\r\n    });\r\n}\r\n<\/script>\r\n\r\n<style>\r\n@keyframes ani-animateMesh {\r\n    0% {\r\n        \/* Tes couleurs au point de d\u00e9part *\/\r\n        --c-0: #C19D9F; \/* Rose Pastel *\/\r\n        --c-1: #363234; \/* Gris Anthracite *\/\r\n        --c-2: #FDF9F3; \/* Blanc Cass\u00e9 *\/\r\n        --c-3: #9A7D7F; \/* Rose-Mauve d\u00e9samorc\u00e9 *\/\r\n        --c-4: #363234;\r\n        --c-5: #C19D9F;\r\n        --c-6: #9A7D7F;\r\n        --c-7: #363234;\r\n        --c-8: #FDF9F3;\r\n        --c-9: #C19D9F;\r\n        \/* Les positions originales (pour garder le mouvement) *\/\r\n        --y-0:63%; --s-start-0:8.39%; --s-end-0:38.58%; --x-0:93%; --x-1:33%; --s-start-1:8.39%; --s-end-1:22.10%; --y-1:-7%; --y-2:7%; --s-start-2:8.39%; --s-end-2:22.55%; --x-2:84%; --x-3:14%; --s-start-3:8.39%; --s-end-3:22.55%; --y-3:5%; --y-4:96%; --s-start-4:8.39%; --s-end-4:22.55%; --x-4:7%; --y-5:90%; --s-start-5:8.39%; --s-end-5:22.55%; --x-5:93%; --x-6:3%; --y-6:61%; --s-start-6:8.39%; --s-end-6:39.67%; --y-7:59%; --s-start-7:8.39%; --s-end-7:49.58%; --x-7:94%; --y-8:63%; --s-start-8:8.39%; --s-end-8:34.81%; --x-8:48%; --y-9:78%; --s-start-9:8.39%; --s-end-9:31.77%; --x-9:96%;\r\n    }\r\n    50% {\r\n        \/* Tes couleurs qui fusionnent *\/\r\n        --c-0: #363234;\r\n        --c-1: #C19D9F;\r\n        --c-2: #9A7D7F;\r\n        --c-3: #FDF9F3;\r\n        --c-4: #C19D9F;\r\n        --c-5: #363234;\r\n        --c-6: #FDF9F3;\r\n        --c-7: #C19D9F;\r\n        --c-8: #363234;\r\n        --c-9: #9A7D7F;\r\n        \/* Les positions originales *\/\r\n        --y-0:59%; --s-start-0:12.89%; --s-end-0:42.94%; --x-0:2%; --x-1:42%; --s-start-1:8.39%; --s-end-1:41.69%; --y-1:10%; --y-2:29%; --s-start-2:8.39%; --s-end-2:20.48%; --x-2:75%; --x-3:5%; --s-start-3:8.39%; --s-end-3:30.09%; --y-3:16%; --y-4:91%; --s-start-4:8.39%; --s-end-4:24.59%; --x-4:36%; --y-5:91%; --s-start-5:8.39%; --s-end-5:24.59%; --x-5:70%; --x-6:54%; --y-6:73%; --s-start-6:9%; --s-end-6:26.82%; --y-7:76%; --s-start-7:9%; --s-end-7:49.05%; --x-7:57%; --y-8:53%; --s-start-8:9%; --s-end-8:26.16%; --x-8:11%; --y-9:70%; --s-start-9:9%; --s-end-9:22.15%; --x-9:70%;\r\n    }\r\n    100% {\r\n        \/* Tes couleurs au point d'arriv\u00e9e (m\u00e9lange final) *\/\r\n        --c-0: #FDF9F3;\r\n        --c-1: #9A7D7F;\r\n        --c-2: #363234;\r\n        --c-3: #C19D9F;\r\n        --c-4: #363234;\r\n        --c-5: #FDF9F3;\r\n        --c-6: #C19D9F;\r\n        --c-7: #9A7D7F;\r\n        --c-8: #363234;\r\n        --c-9: #C19D9F;\r\n        \/* Les positions originales *\/\r\n        --x-1:76%; --s-start-1:8.39%; --s-end-1:59.32%; --y-1:-3%; --y-2:18%; --s-start-2:8.39%; --s-end-2:28.52%; --x-2:97%; --x-3:42%; --s-start-3:8.39%; --s-end-3:28.52%; --y-3:18%; --y-4:95%; --s-start-4:8.39%; --s-end-4:28.52%; --x-4:66%; --y-5:92%; --s-start-5:8.39%; --s-end-5:28.52%; --x-5:46%; --x-6:102%; --y-6:16%; --s-start-6:24.72%; --s-end-6:47.49%; --y-7:52%; --s-start-7:10.20%; --s-end-7:50.46%; --x-7:22%; --y-9:51%; --s-start-9:6.29%; --s-end-9:20.79%; --x-9:97%;\r\n    }\r\n}\r\n\r\n.fondfolio {\r\n    \/* Valeurs initiales (tes couleurs douces) *\/\r\n    --c-0: #C19D9F; --c-1: #363234; --c-2: #FDF9F3; --c-3: #9A7D7F; --c-4: #363234; --c-5: #C19D9F; --c-6: #9A7D7F; --c-7: #363234; --c-8: #FDF9F3; --c-9: #C19D9F;\r\n    --y-0:63%; --s-start-0:8.39%; --s-end-0:38.58%; --x-0:93%; --x-1:33%; --s-start-1:8.39%; --s-end-1:22.10%; --y-1:-7%; --y-2:7%; --s-start-2:8.39%; --s-end-2:22.55%; --x-2:84%; --x-3:14%; --y-3:5%; --y-4:96%; --s-start-4:8.39%; --s-end-4:22.55%; --x-4:7%; --y-5:90%; --s-start-5:8.39%; --s-end-5:22.55%; --x-5:93%; --x-6:3%; --y-6:61%; --s-start-6:8.39%; --s-end-6:39.67%; --y-7:59%; --s-start-7:8.39%; --s-end-7:49.58%; --x-7:94%; --y-8:63%; --s-start-8:8.39%; --s-end-8:34.81%; --x-8:48%; --y-9:78%; --s-start-9:8.39%; --s-end-9:31.77%; --x-9:96%;\r\n\r\n    \/* Fond de base : ton gris anthracite *\/\r\n    background-color: #363234;\r\n    \r\n    background-image: \r\n        radial-gradient(circle at var(--x-0) var(--y-0), var(--c-0) var(--s-start-0), transparent var(--s-end-0)),\r\n        radial-gradient(circle at var(--x-1) var(--y-1), var(--c-1) var(--s-start-1), transparent var(--s-end-1)),\r\n        radial-gradient(circle at var(--x-2) var(--y-2), var(--c-2) var(--s-start-2), transparent var(--s-end-2)),\r\n        radial-gradient(circle at var(--x-3) var(--y-3), var(--c-3) var(--s-start-3), transparent var(--s-end-3)),\r\n        radial-gradient(circle at var(--x-4) var(--y-4), var(--c-4) var(--s-start-4), transparent var(--s-end-4)),\r\n        radial-gradient(circle at var(--x-5) var(--y-5), var(--c-5) var(--s-start-5), transparent var(--s-end-5)),\r\n        radial-gradient(circle at var(--x-6) var(--y-6), var(--c-6) var(--s-start-6), transparent var(--s-end-6)),\r\n        radial-gradient(circle at var(--x-7) var(--y-7), var(--c-7) var(--s-start-7), transparent var(--s-end-7)),\r\n        radial-gradient(circle at var(--x-8) var(--y-8), var(--c-8) var(--s-start-8), transparent var(--s-end-8)),\r\n        radial-gradient(circle at var(--x-9) var(--y-9), var(--c-9) var(--s-start-9), transparent var(--s-end-9));\r\n    \r\n    background-blend-mode: normal;\r\n    \r\n    \/* Animation ralentie \u00e0 40 secondes pour plus de douceur *\/\r\n    animation: ani-animateMesh 40s linear infinite alternate-reverse;\r\n    \r\n    position: relative;\r\n    z-index: 0;\r\n}\r\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-d0ab0e6 e-flex e-con-boxed e-con e-parent\" data-id=\"d0ab0e6\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Accueil Portfolio Contact Portfolio Portfolio Mes projets cr\u00e9atifs. \u2715 Partager Envoy\u00e9!<\/p>\n","protected":false},"author":1,"featured_media":259,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-303","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/www.cocomunication.fr\/index.php?rest_route=\/wp\/v2\/pages\/303","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.cocomunication.fr\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.cocomunication.fr\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.cocomunication.fr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cocomunication.fr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=303"}],"version-history":[{"count":154,"href":"https:\/\/www.cocomunication.fr\/index.php?rest_route=\/wp\/v2\/pages\/303\/revisions"}],"predecessor-version":[{"id":686,"href":"https:\/\/www.cocomunication.fr\/index.php?rest_route=\/wp\/v2\/pages\/303\/revisions\/686"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.cocomunication.fr\/index.php?rest_route=\/wp\/v2\/media\/259"}],"wp:attachment":[{"href":"https:\/\/www.cocomunication.fr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=303"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}