{"id":236,"date":"2026-03-04T15:50:32","date_gmt":"2026-03-04T15:50:32","guid":{"rendered":"https:\/\/www.cocomunication.fr\/?page_id=236"},"modified":"2026-10-22T10:29:34","modified_gmt":"2026-10-22T10:29:34","slug":"portfolio-2","status":"publish","type":"page","link":"https:\/\/www.cocomunication.fr\/","title":{"rendered":"Accueil"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"236\" class=\"elementor elementor-236\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d626602 e-con-full e-flex e-con e-parent\" data-id=\"d626602\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;video&quot;,&quot;background_video_link&quot;:&quot;https:\\\/\\\/www.cocomunication.fr\\\/wp-content\\\/uploads\\\/2026\\\/10\\\/Design-sans-titre.mp4&quot;}\">\n\t\t<div class=\"elementor-background-video-container elementor-hidden-mobile\">\n\t\t\t\t\t\t\t<video class=\"elementor-background-video-hosted\" role=\"presentation\" autoplay muted playsinline loop><\/video>\n\t\t\t\t\t<\/div>\t\t<div class=\"elementor-element elementor-element-49ef951 elementor-widget elementor-widget-html\" data-id=\"49ef951\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;sticky&quot;:&quot;top&quot;,&quot;sticky_on&quot;:[&quot;desktop&quot;,&quot;tablet&quot;,&quot;mobile&quot;],&quot;sticky_offset&quot;:0,&quot;sticky_effects_offset&quot;:0,&quot;sticky_anchor_link_offset&quot;:0}\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div class=\"liquid-nav-wrapper\">\r\n  <!-- Conteneur global avec l'animation d'apparition pixel -->\r\n  <div class=\"pixel-nav-container\">\r\n    <ul class=\"liquid-menu\">\r\n      <li class=\"menu-item\">\r\n        <a href=\"https:\/\/cocomunication.fr\">\r\n          <i class=\"fas fa-home\"><\/i>\r\n          <span class=\"label\">Accueil<\/span>\r\n        <\/a>\r\n      <\/li>\r\n      <li class=\"menu-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=\"label\">Portfolio<\/span>\r\n        <\/a>\r\n      <\/li>\r\n      <li class=\"menu-item\">\r\n        <a href=\"https:\/\/www.cocomunication.fr\/?page_id=397\">\r\n          <i class=\"fas fa-envelope\"><\/i>\r\n          <span class=\"label\">Contact<\/span>\r\n        <\/a>\r\n      <\/li>\r\n    <\/ul>\r\n    \r\n    <!-- Cache d'apparition pixel en pure CSS -->\r\n    <div class=\"pixel-reveal-overlay\"><\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<style>\r\n\/* --- PARAM\u00c8TRE DE VITESSE --- *\/\r\n:root {\r\n  --anim-duration: 2.2s; \/* Modifiez cette valeur (ex: 2.5s ou 3s) pour ralentir encore plus *\/\r\n}\r\n\r\n\/* --- BASE NAV BAR --- *\/\r\n.liquid-nav-wrapper {\r\n  display: flex;\r\n  justify-content: center;\r\n  padding: 30px 0;\r\n}\r\n\r\n.pixel-nav-container {\r\n  position: relative;\r\n  display: inline-block;\r\n  border-radius: 100px;\r\n}\r\n\r\n.liquid-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  border-radius: 100px;\r\n  background: rgba(18, 18, 18, 0.7);\r\n  backdrop-filter: blur(20px);\r\n  -webkit-backdrop-filter: blur(20px);\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  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);\r\n}\r\n\r\n.liquid-menu .menu-item {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  margin: 0;\r\n  flex-grow: 0;\r\n  transition: flex-grow 0.6s cubic-bezier(0.23, 1, 0.32, 1);\r\n}\r\n\r\n.liquid-menu .menu-item a {\r\n  display: flex;\r\n  align-items: center;\r\n  text-decoration: none;\r\n  color: rgba(255, 255, 255, 0.5);\r\n  height: 50px;\r\n  min-width: 50px;\r\n  max-width: 50px;\r\n  padding: 0 15px;\r\n  border-radius: 50px;\r\n  background: transparent;\r\n  overflow: hidden;\r\n  white-space: nowrap;\r\n  transition: max-width 0.6s cubic-bezier(0.23, 1, 0.32, 1), background 0.4s ease, color 0.4s ease;\r\n  backface-visibility: hidden;\r\n  transform: translateZ(0);\r\n}\r\n\r\n\/* --- \u00c9TAT HOVER --- *\/\r\n.liquid-menu .menu-item:hover a {\r\n  max-width: 180px;\r\n  color: #fff;\r\n  background: rgba(255, 255, 255, 0.1);\r\n}\r\n\r\n.liquid-menu .menu-item .label {\r\n  font-size: 14px;\r\n  font-weight: 500;\r\n  margin-left: 0;\r\n  opacity: 0;\r\n  transition: opacity 0.3s ease, margin-left 0.3s ease;\r\n}\r\n\r\n.liquid-menu .menu-item:hover .label {\r\n  opacity: 1;\r\n  margin-left: 10px;\r\n}\r\n\r\n.liquid-menu:hover .menu-item:not(:hover) a {\r\n  opacity: 0.7;\r\n}\r\n\r\n\/* --- ANIMATION APPARITION PIXEL EN PLUSIEURS \u00c9TAPES LENTES --- *\/\r\n.pixel-reveal-overlay {\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n  right: 0;\r\n  bottom: 0;\r\n  border-radius: 100px;\r\n  background-color: #0d0d0d;\r\n  pointer-events: none;\r\n  z-index: 5;\r\n  \r\n  \/* Motif SVG de grille de pixels *\/\r\n  -webkit-mask-image: url('data:image\/svg+xml;utf8,<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"100\" height=\"100\" viewBox=\"0 0 10 10\"><rect x=\"0\" y=\"0\" width=\"2\" height=\"2\" fill=\"black\"\/><rect x=\"4\" y=\"2\" width=\"2\" height=\"2\" fill=\"black\"\/><rect x=\"8\" y=\"0\" width=\"2\" height=\"2\" fill=\"black\"\/><rect x=\"2\" y=\"4\" width=\"2\" height=\"2\" fill=\"black\"\/><rect x=\"6\" y=\"6\" width=\"2\" height=\"2\" fill=\"black\"\/><rect x=\"0\" y=\"8\" width=\"2\" height=\"2\" fill=\"black\"\/><rect x=\"8\" y=\"8\" width=\"2\" height=\"2\" fill=\"black\"\/><\/svg>');\r\n  mask-image: url('data:image\/svg+xml;utf8,<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"100\" height=\"100\" viewBox=\"0 0 10 10\"><rect x=\"0\" y=\"0\" width=\"2\" height=\"2\" fill=\"black\"\/><rect x=\"4\" y=\"2\" width=\"2\" height=\"2\" fill=\"black\"\/><rect x=\"8\" y=\"0\" width=\"2\" height=\"2\" fill=\"black\"\/><rect x=\"2\" y=\"4\" width=\"2\" height=\"2\" fill=\"black\"\/><rect x=\"6\" y=\"6\" width=\"2\" height=\"2\" fill=\"black\"\/><rect x=\"0\" y=\"8\" width=\"2\" height=\"2\" fill=\"black\"\/><rect x=\"8\" y=\"8\" width=\"2\" height=\"2\" fill=\"black\"\/><\/svg>');\r\n  -webkit-mask-size: 10px 10px;\r\n  mask-size: 10px 10px;\r\n  \r\n  \/* Animation ralentie avec 14 paliers de d\u00e9composition *\/\r\n  animation: pixelFadeSlow var(--anim-duration) steps(14, end) forwards;\r\n}\r\n\r\n@keyframes pixelFadeSlow {\r\n  0% {\r\n    opacity: 1;\r\n    -webkit-mask-size: 8px 8px;\r\n    mask-size: 8px 8px;\r\n  }\r\n  30% {\r\n    opacity: 0.9;\r\n    -webkit-mask-size: 16px 16px;\r\n    mask-size: 16px 16px;\r\n  }\r\n  60% {\r\n    opacity: 0.6;\r\n    -webkit-mask-size: 32px 32px;\r\n    mask-size: 32px 32px;\r\n  }\r\n  85% {\r\n    opacity: 0.2;\r\n    -webkit-mask-size: 64px 64px;\r\n    mask-size: 64px 64px;\r\n  }\r\n  99% {\r\n    opacity: 0.05;\r\n    -webkit-mask-size: 120px 120px;\r\n    mask-size: 120px 120px;\r\n  }\r\n  100% {\r\n    opacity: 0;\r\n    display: none;\r\n    visibility: hidden;\r\n  }\r\n}\r\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8a3c1cc elementor-align-center elementor-widget elementor-widget-button\" data-id=\"8a3c1cc\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"#\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Travailler Avec Moi<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-2ad5579 e-con-full e-flex e-con e-parent\" data-id=\"2ad5579\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;slideshow&quot;,&quot;background_slideshow_gallery&quot;:[{&quot;id&quot;:742,&quot;url&quot;:&quot;https:\\\/\\\/www.cocomunication.fr\\\/wp-content\\\/uploads\\\/2026\\\/10\\\/image_2026-10-22_094157547.png&quot;}],&quot;background_slideshow_loop&quot;:&quot;yes&quot;,&quot;background_slideshow_slide_duration&quot;:5000,&quot;background_slideshow_slide_transition&quot;:&quot;fade&quot;,&quot;background_slideshow_transition_duration&quot;:500}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3c300d8 elementor-headline--style-rotate elementor-widget elementor-widget-animated-headline\" data-id=\"3c300d8\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;headline_style&quot;:&quot;rotate&quot;,&quot;animation_type&quot;:&quot;slide&quot;,&quot;rotating_text&quot;:&quot;Projet\\nStrat\\u00e9gie\\nCommunication&quot;,&quot;loop&quot;:&quot;yes&quot;,&quot;rotate_iteration_delay&quot;:2500}\" data-widget_type=\"animated-headline.default\">\n\t\t\t\t\t\t\t<h3 class=\"elementor-headline elementor-headline-animation-type-slide\">\n\t\t\t\t\t<span class=\"elementor-headline-plain-text elementor-headline-text-wrapper\">Construisons votre <br><\/span>\n\t\t\t\t<span class=\"elementor-headline-dynamic-wrapper elementor-headline-text-wrapper\">\n\t\t\t\t\t<span class=\"elementor-headline-dynamic-text elementor-headline-text-active\">\n\t\t\t\tProjet\t\t\t<\/span>\n\t\t\t\t\t<span class=\"elementor-headline-dynamic-text\">\n\t\t\t\tStrat\u00e9gie\t\t\t<\/span>\n\t\t\t\t\t<span class=\"elementor-headline-dynamic-text\">\n\t\t\t\tCommunication\t\t\t<\/span>\n\t\t\t\t\t\t<\/span>\n\t\t\t\t<\/h3>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-6b4ebe7 e-flex e-con-boxed e-con e-parent\" data-id=\"6b4ebe7\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f85a48d elementor-widget elementor-widget-heading\" data-id=\"f85a48d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">MES COMP\u00c9TENCES<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3aa8713 elementor-absolute elementor-widget elementor-widget-image\" data-id=\"3aa8713\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_position&quot;:&quot;absolute&quot;}\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"500\" src=\"https:\/\/www.cocomunication.fr\/wp-content\/uploads\/2026\/10\/Photo_POTEL_Colin-removebg-preview.png\" class=\"attachment-large size-large wp-image-764\" alt=\"\" srcset=\"https:\/\/www.cocomunication.fr\/wp-content\/uploads\/2026\/10\/Photo_POTEL_Colin-removebg-preview.png 500w, https:\/\/www.cocomunication.fr\/wp-content\/uploads\/2026\/10\/Photo_POTEL_Colin-removebg-preview-300x300.png 300w, https:\/\/www.cocomunication.fr\/wp-content\/uploads\/2026\/10\/Photo_POTEL_Colin-removebg-preview-150x150.png 150w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1cdf30f elementor-widget elementor-widget-html\" data-id=\"1cdf30f\" 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>Section Comp\u00e9tences - Lignes Longues Brutaliste<\/title>\r\n    <!-- Chargement de Tailwind CSS -->\r\n    <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n    <style>\r\n        @import url('https:\/\/fonts.googleapis.com\/css2?family=Anton&family=Inter:wght@400;700&display=swap');\r\n\r\n        body {\r\n            background-color: #080808;\r\n            color: #ffffff;\r\n            font-family: 'Inter', sans-serif;\r\n            overflow-x: hidden;\r\n        }\r\n\r\n        .font-impact {\r\n            font-family: 'Anton', sans-serif;\r\n            letter-spacing: 0.05em;\r\n        }\r\n\r\n\r\n\r\n        \/* Rectangle horizontal long avec bordure grunge\/irr\u00e9guli\u00e8re via clip-path et SVG *\/\r\n        .grunge-row {\r\n            position: relative;\r\n            background: #121212;\r\n            border: 2px solid #262626;\r\n            transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);\r\n            overflow: hidden;\r\n        }\r\n\r\n        \/* Texture discr\u00e8te en arri\u00e8re-plan des rectangles *\/\r\n        .grunge-row::before {\r\n            content: '';\r\n            position: absolute;\r\n            inset: 0;\r\n            background: linear-gradient(90deg, rgba(255, 255, 255, 0.02) 0%, transparent 100%);\r\n            z-index: 1;\r\n            pointer-events: none;\r\n        }\r\n\r\n        \/* Effet au survol : D\u00e9calage \u00e0 gauche, lueur brute et contour blanc *\/\r\n        .grunge-row:hover {\r\n            transform: translateX(8px);\r\n            border-color: #ffffff;\r\n            background: #191919;\r\n            box-shadow: -6px 6px 0px rgba(255, 255, 255, 0.8);\r\n        }\r\n\r\n        .grunge-row:hover .skill-title {\r\n            color: #ffffff;\r\n            letter-spacing: 0.08em;\r\n        }\r\n\r\n        .grunge-row:hover .skill-icon-box {\r\n            background-color: #ffffff;\r\n            color: #000000;\r\n            transform: scale(1.05) rotate(-3deg);\r\n        }\r\n\r\n        .skill-title {\r\n            transition: all 0.3s ease;\r\n        }\r\n\r\n        .skill-icon-box {\r\n            transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);\r\n        }\r\n\r\n        \/* Filtre SVG pour effet grunge textur\u00e9 optionnel *\/\r\n        .svg-filters {\r\n            position: absolute;\r\n            width: 0;\r\n            height: 0;\r\n            overflow: hidden;\r\n        }\r\n    <\/style>\r\n<\/head>\r\n<body class=\"bg-grid min-h-screen flex flex-col justify-center py-16 px-6 md:px-16\">\r\n\r\n    <!-- Filtre SVG -->\r\n    <svg class=\"svg-filters\">\r\n        <filter id=\"grunge-filter\">\r\n            <feTurbulence type=\"fractalNoise\" baseFrequency=\"0.05\" numOctaves=\"4\" result=\"noise\" \/>\r\n            <feDisplacementMap in=\"SourceGraphic\" in2=\"noise\" scale=\"3\" xChannelSelector=\"R\" yChannelSelector=\"G\" \/>\r\n        <\/filter>\r\n    <\/svg>\r\n\r\n    <div class=\"max-w-5xl mx-auto w-full\">\r\n        <!-- En-t\u00eate de section -->\r\n        <div class=\"mb-12\">\r\n            <span class=\"text-neutral-500 font-mono text-sm tracking-widest uppercase block mb-2\"><\/span>\r\n            <h2 class=\"text-4xl md:text-6xl font-impact tracking-wider text-white\"><\/h2>\r\n        <\/div>\r\n\r\n        <!-- Liste des rectangles longs empil\u00e9s -->\r\n        <div class=\"flex flex-col gap-5\">\r\n            \r\n            <!-- Ligne 1 : Cr\u00e9ation Graphique -->\r\n            <div class=\"grunge-row p-6 md:p-8 cursor-pointer flex flex-col md:flex-row items-start md:items-center justify-between gap-6\">\r\n                <div class=\"flex items-center gap-6 w-full md:w-auto\">\r\n                    <!-- Logo \/ Ic\u00f4ne au tout d\u00e9but (\u00e0 gauche) -->\r\n                    <div class=\"skill-icon-box w-14 h-14 md:w-16 md:h-16 bg-[#1f1f1f] border border-[#333] flex items-center justify-center shrink-0 text-white font-impact text-xl\">\r\n                        <svg class=\"w-7 h-7\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z\"><\/path><\/svg>\r\n                    <\/div>\r\n                    <!-- Titre & Sous-titre align\u00e9s \u00e0 gauche -->\r\n                    <div class=\"text-left\">\r\n                        <span class=\"text-xs font-mono text-neutral-500 tracking-widest block mb-1\">[ 01 ]<\/span>\r\n                        <h3 class=\"skill-title text-2xl md:text-4xl font-impact text-neutral-100 uppercase\">\r\n                            CR\u00c9ATION GRAPHIQUE\r\n                        <\/h3>\r\n                    <\/div>\r\n                <\/div>\r\n                <!-- Description d\u00e9taill\u00e9e align\u00e9e \u00e0 gauche sur mobile, \u00e0 droite sur desktop -->\r\n                <p class=\"text-neutral-400 text-sm md:text-base text-left md:max-w-md leading-relaxed z-10\">\r\n                    Identit\u00e9 visuelle, chartes graphiques percutantes et supports de communication sur-mesure pour marquer les esprits.\r\n                <\/p>\r\n            <\/div>\r\n\r\n            <!-- Ligne 2 : Photos \/ Vid\u00e9os -->\r\n            <div class=\"grunge-row p-6 md:p-8 cursor-pointer flex flex-col md:flex-row items-start md:items-center justify-between gap-6\">\r\n                <div class=\"flex items-center gap-6 w-full md:w-auto\">\r\n                    <div class=\"skill-icon-box w-14 h-14 md:w-16 md:h-16 bg-[#1f1f1f] border border-[#333] flex items-center justify-center shrink-0 text-white font-impact text-xl\">\r\n                        <svg class=\"w-7 h-7\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z\"><\/path><\/svg>\r\n                    <\/div>\r\n                    <div class=\"text-left\">\r\n                        <span class=\"text-xs font-mono text-neutral-500 tracking-widest block mb-1\">[ 02 ]<\/span>\r\n                        <h3 class=\"skill-title text-2xl md:text-4xl font-impact text-neutral-100 uppercase\">\r\n                            PHOTOS \/ VID\u00c9OS\r\n                        <\/h3>\r\n                    <\/div>\r\n                <\/div>\r\n                <p class=\"text-neutral-400 text-sm md:text-base text-left md:max-w-md leading-relaxed z-10\">\r\n                    Captation professionnelle, montage dynamique, color grading et retouche avanc\u00e9e pour sublimer vos projets visuels.\r\n                <\/p>\r\n            <\/div>\r\n\r\n            <!-- Ligne 3 : Site Web et SEO -->\r\n            <div class=\"grunge-row p-6 md:p-8 cursor-pointer flex flex-col md:flex-row items-start md:items-center justify-between gap-6\">\r\n                <div class=\"flex items-center gap-6 w-full md:w-auto\">\r\n                    <div class=\"skill-icon-box w-14 h-14 md:w-16 md:h-16 bg-[#1f1f1f] border border-[#333] flex items-center justify-center shrink-0 text-white font-impact text-xl\">\r\n                        <svg class=\"w-7 h-7\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4\"><\/path><\/svg>\r\n                    <\/div>\r\n                    <div class=\"text-left\">\r\n                        <span class=\"text-xs font-mono text-neutral-500 tracking-widest block mb-1\">[ 03 ]<\/span>\r\n                        <h3 class=\"skill-title text-2xl md:text-4xl font-impact text-neutral-100 uppercase\">\r\n                            SITE WEB ET SEO\r\n                        <\/h3>\r\n                    <\/div>\r\n                <\/div>\r\n                <p class=\"text-neutral-400 text-sm md:text-base text-left md:max-w-md leading-relaxed z-10\">\r\n                    D\u00e9veloppement de plateformes web rapides, enti\u00e8rement responsives et optimis\u00e9es pour le r\u00e9f\u00e9rencement naturel (SEO).\r\n                <\/p>\r\n            <\/div>\r\n\r\n            <!-- Ligne 4 : R\u00e9seaux Sociaux & Strat\u00e9gie -->\r\n            <div class=\"grunge-row p-6 md:p-8 cursor-pointer flex flex-col md:flex-row items-start md:items-center justify-between gap-6\">\r\n                <div class=\"flex items-center gap-6 w-full md:w-auto\">\r\n                    <div class=\"skill-icon-box w-14 h-14 md:w-16 md:h-16 bg-[#1f1f1f] border border-[#333] flex items-center justify-center shrink-0 text-white font-impact text-xl\">\r\n                        <svg class=\"w-7 h-7\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M13 7h8m0 0v8m0-8l-8 8-4-4-6 6\"><\/path><\/svg>\r\n                    <\/div>\r\n                    <div class=\"text-left\">\r\n                        <span class=\"text-xs font-mono text-neutral-500 tracking-widest block mb-1\">[ 04 ]<\/span>\r\n                        <h3 class=\"skill-title text-2xl md:text-4xl font-impact text-neutral-100 uppercase\">\r\n                            R\u00c9SAUX SOCIAUX & STRAT\u00c9GIE\r\n                        <\/h3>\r\n                    <\/div>\r\n                <\/div>\r\n                <p class=\"text-neutral-400 text-sm md:text-base text-left md:max-w-md leading-relaxed z-10\">\r\n                    \u00c9laboration de strat\u00e9gies de contenu engageantes, community management et analyse d'audience pour booster votre visibilit\u00e9.\r\n                <\/p>\r\n            <\/div>\r\n\r\n        <\/div>\r\n    <\/div>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<h2 data-interaction-id=\"a19cf9d\" class=\"e-a19cf9d-8463442 e-heading-base e-default-h2\"><br><br><br>MON PORTFOLIO<\/h2>\n\t\t\t\t<div class=\"elementor-element elementor-element-8dca855 elementor-widget elementor-widget-html\" data-id=\"8dca855\" 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  <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Press+Start+2P&display=swap\" rel=\"stylesheet\">\r\n  <style>\r\n    :root {\r\n      --bg: #0f1115;\r\n      --panel: #141720;\r\n      --panel-2: #1d212b;\r\n      --text: #f5f7fb;\r\n      --muted: #a8b0c0;\r\n      --line: rgba(255,255,255,0.15);\r\n      --accent: #ffffff;\r\n      --radius: 12px; \/* Retour \u00e0 des arrondis doux et modernes *\/\r\n      --shadow: 0 20px 40px rgba(0,0,0,0.4);\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, 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    .projects-grid {\r\n      display: grid;\r\n      grid-template-columns: repeat(12, 1fr);\r\n      gap: 24px;\r\n    }\r\n\r\n    .project-card {\r\n      grid-column: span 6;\r\n      position: relative;\r\n      min-height: 440px;\r\n      border-radius: var(--radius);\r\n      overflow: hidden;\r\n      border: 1px solid var(--line);\r\n      box-shadow: var(--shadow);\r\n      background: var(--panel);\r\n      transform: translateY(0);\r\n      transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;\r\n      cursor: pointer;\r\n      isolation: isolate;\r\n      display: flex;\r\n      flex-direction: column;\r\n      justify-content: flex-end;\r\n    }\r\n\r\n    .project-card:hover {\r\n      transform: translateY(-6px);\r\n      border-color: rgba(255,255,255,0.3);\r\n      box-shadow: 0 25px 50px rgba(0,0,0,0.6);\r\n    }\r\n\r\n    .project-media {\r\n      position: absolute;\r\n      inset: 0;\r\n      bottom: 140px;\r\n      overflow: hidden;\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.6s ease;\r\n    }\r\n\r\n    .project-card:hover .project-media img {\r\n      transform: scale(1.05);\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) 0%, rgba(15,17,21,0.6) 40%, rgba(15,17,21,0.95) 100%);\r\n      z-index: 1;\r\n    }\r\n\r\n    .project-content {\r\n      position: relative;\r\n      z-index: 2;\r\n      padding: 24px;\r\n      display: grid;\r\n      gap: 10px;\r\n      margin-top: auto;\r\n    }\r\n\r\n    .project-name {\r\n      margin: 0;\r\n      font-size: clamp(22px, 2.4vw, 30px);\r\n      line-height: 1.1;\r\n      letter-spacing: -0.02em;\r\n      font-weight: 700;\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.6);\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.85);\r\n      backdrop-filter: blur(8px);\r\n      display: none;\r\n      align-items: center;\r\n      justify-content: center;\r\n      padding: 24px;\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: 90vh;\r\n      overflow: auto;\r\n      border-radius: 20px;\r\n      background: #10131a;\r\n      border: 1px solid var(--line);\r\n      box-shadow: 0 30px 80px rgba(0,0,0,0.8);\r\n      position: relative;\r\n    }\r\n\r\n    .modal-close {\r\n      position: sticky;\r\n      top: 20px;\r\n      margin-left: auto;\r\n      margin-right: 20px;\r\n      z-index: 3;\r\n      width: 40px;\r\n      height: 40px;\r\n      border: 1px solid var(--line);\r\n      border-radius: 999px;\r\n      background: rgba(255,255,255,0.08);\r\n      color: var(--text);\r\n      cursor: pointer;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      transition: background 0.2s;\r\n    }\r\n\r\n    .modal-close:hover {\r\n      background: rgba(255,255,255,0.2);\r\n    }\r\n\r\n    .modal-hero {\r\n      position: relative;\r\n      min-height: 400px;\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.1), rgba(0,0,0,0.85));\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: 32px;\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(26px, 4.5vw, 48px);\r\n      line-height: 1.1;\r\n      letter-spacing: -0.03em;\r\n    }\r\n\r\n    .modal-body {\r\n      padding: 0 0 32px;\r\n      display: grid;\r\n      gap: 20px;\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      background: var(--panel-2);\r\n    }\r\n\r\n    .project-link-wrap {\r\n      padding: 12px 32px 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 24px;\r\n      border-radius: 999px;\r\n      background: var(--accent);\r\n      color: #0b0d12;\r\n      font-weight: 600;\r\n      transition: transform 0.2s, opacity 0.2s;\r\n    }\r\n\r\n    .project-link:hover {\r\n      opacity: 0.9;\r\n      transform: translateY(-2px);\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: 260px; }\r\n      .project-content { padding: 20px; }\r\n      .modal-hero-content { padding: 20px; }\r\n      .project-link-wrap { padding: 12px 20px 0; }\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        <h1 class=\"portfolio-title\"><\/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>\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>Accueil Portfolio Contact Travailler Avec Moi Construisons votre Projet Strat\u00e9gie Communication MES COMP\u00c9TENCES Section Comp\u00e9tences &#8211; Lignes Longues Brutaliste [ 01 ] CR\u00c9ATION GRAPHIQUE Identit\u00e9 visuelle, chartes graphiques percutantes et supports de communication sur-mesure pour marquer les esprits. [ 02 ] PHOTOS \/ VID\u00c9OS Captation professionnelle, montage dynamique, color grading et retouche avanc\u00e9e pour sublimer [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":237,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-236","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/www.cocomunication.fr\/index.php?rest_route=\/wp\/v2\/pages\/236","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=236"}],"version-history":[{"count":172,"href":"https:\/\/www.cocomunication.fr\/index.php?rest_route=\/wp\/v2\/pages\/236\/revisions"}],"predecessor-version":[{"id":767,"href":"https:\/\/www.cocomunication.fr\/index.php?rest_route=\/wp\/v2\/pages\/236\/revisions\/767"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.cocomunication.fr\/index.php?rest_route=\/wp\/v2\/media\/237"}],"wp:attachment":[{"href":"https:\/\/www.cocomunication.fr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=236"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}