{"id":1633,"date":"2026-05-12T14:41:42","date_gmt":"2026-05-12T14:41:42","guid":{"rendered":"https:\/\/yanis-naud.ovh\/?page_id=1633"},"modified":"2026-05-21T10:38:06","modified_gmt":"2026-05-21T10:38:06","slug":"e-commerce","status":"publish","type":"page","link":"https:\/\/yanis-naud.ovh\/index.php\/e-commerce\/","title":{"rendered":"E-commerce V2"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\nE-Commerce \u2013 Portfolio<\/title>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Bebas+Neue&family=Outfit:wght@300;400;600;700&display=swap\" rel=\"stylesheet\">\r\n<style>\r\n :root {\r\n --gold: #705f21;\r\n --gold-light: #a08a30;\r\n --gold-pale: #c9a84c;\r\n --black: #000000;\r\n --card-bg: #111111;\r\n --card-border: #1e1e1e;\r\n --text: #e8e8e8;\r\n --text-muted: #888;\r\n }\r\n\r\n *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }\r\n\r\n .ec-section {\r\n background: var(--black);\r\n font-family: 'Outfit', sans-serif;\r\n color: var(--text);\r\n overflow: hidden;\r\n padding: clamp(40px, 8vw, 80px) clamp(20px, 5vw, 60px);\r\n width: 100%;\r\n }\r\n\r\n \/* \u2500\u2500 HERO \u2500\u2500 *\/\r\n .ec-hero { text-align: center; margin-bottom: clamp(30px, 5vw, 50px); position: relative; }\r\n .ec-hero::before {\r\n content: ''; position: absolute;\r\n top: -40px; left: 50%; transform: translateX(-50%);\r\n width: min(600px, 100%); height: 200px;\r\n background: radial-gradient(ellipse at center, rgba(112,95,33,0.18) 0%, transparent 70%);\r\n pointer-events: none;\r\n }\r\n .ec-hero h1 {\r\n font-family: 'Bebas Neue', sans-serif;\r\n font-size: clamp(48px, 13vw, 130px);\r\n letter-spacing: 0.04em; color: #fff; line-height: 0.92;\r\n text-shadow: 0 0 80px rgba(112,95,33,0.3);\r\n }\r\n .ec-hero .subtitle {\r\n font-size: clamp(11px, 2.5vw, 18px); font-weight: 700;\r\n letter-spacing: 0.14em; text-transform: uppercase;\r\n color: var(--gold-pale); margin-top: 14px;\r\n }\r\n\r\n \/* \u2500\u2500 INTRO \u2500\u2500 *\/\r\n .ec-intro {\r\n background: var(--card-bg); border: 1px solid var(--card-border);\r\n border-left: 3px solid var(--gold); border-radius: 12px;\r\n padding: clamp(16px, 3vw, 24px) clamp(18px, 3vw, 28px);\r\n font-size: clamp(13px, 1.5vw, 15px); color: var(--text-muted);\r\n line-height: 1.7; margin-bottom: clamp(36px, 6vw, 60px);\r\n }\r\n .ec-intro strong { color: var(--text); }\r\n\r\n \/* \u2500\u2500 LABEL \u2500\u2500 *\/\r\n .ec-label {\r\n font-size: 11px; font-weight: 700; letter-spacing: 0.22em;\r\n text-transform: uppercase; color: var(--gold);\r\n margin-bottom: 22px; display: flex; align-items: center; gap: 10px;\r\n }\r\n .ec-label::after {\r\n content: ''; flex: 1; height: 1px;\r\n background: linear-gradient(to right, var(--gold), transparent);\r\n max-width: 180px;\r\n }\r\n\r\n \/* \u2500\u2500 DIVIDER \u2500\u2500 *\/\r\n @keyframes shimmer {\r\n 0% { background-position: -400px 0; }\r\n 100% { background-position: 400px 0; }\r\n }\r\n .ec-divider {\r\n height: 1px; margin: clamp(30px, 5vw, 50px) 0;\r\n background: linear-gradient(90deg, transparent, var(--gold), var(--gold-pale), var(--gold), transparent);\r\n background-size: 400px 100%; animation: shimmer 3s linear infinite;\r\n }\r\n\r\n \/*\r\n * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n * BLOC IMAGE NATUREL \u2014 UTILIS\u00c9 PARTOUT\r\n * width:100% + height:auto = pleine largeur, jamais cropp\u00e9e\r\n * Le bloc s'adapte \u00e0 la hauteur de la photo\r\n * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n *\/\r\n .ec-img-wrap {\r\n background: var(--card-bg);\r\n border: 2px dashed var(--card-border);\r\n border-radius: 12px;\r\n overflow: hidden;\r\n transition: border-color 0.2s;\r\n \/* PAS de height\/aspect-ratio fixe *\/\r\n }\r\n .ec-img-wrap:hover { border-color: var(--gold); }\r\n\r\n .ec-img-wrap img {\r\n display: block;\r\n width: 100%;\r\n height: auto; \/* ratio pr\u00e9serv\u00e9, jamais cropp\u00e9 *\/\r\n border-radius: 10px;\r\n }\r\n .ec-img-wrap img[src=\"\"] { display: none; }\r\n .ec-img-wrap img[src=\"\"] + .ec-ph { display: flex; }\r\n .ec-img-wrap img:not([src=\"\"]) + .ec-ph { display: none; }\r\n .ec-img-wrap img.loaded + .ec-ph { display: none; }\r\n\r\n \/* Logo rond \u2014 cas sp\u00e9cial : conserve le cercle mais sans crop *\/\r\n .ec-logo-circle {\r\n width: 140px; height: 140px;\r\n border-radius: 50%;\r\n background: var(--card-bg);\r\n border: 2px dashed var(--card-border);\r\n overflow: hidden;\r\n display: flex; align-items: center; justify-content: center;\r\n transition: border-color 0.2s;\r\n margin: 0 auto;\r\n }\r\n .ec-logo-circle:hover { border-color: var(--gold); }\r\n .ec-logo-circle img {\r\n display: block;\r\n width: 100%; height: 100%;\r\n object-fit: contain; \/* contain = image enti\u00e8re visible dans le cercle *\/\r\n border-radius: 50%;\r\n }\r\n .ec-logo-circle img[src=\"\"] { display: none; }\r\n .ec-logo-circle img[src=\"\"] + .ec-ph { display: flex; }\r\n .ec-logo-circle img:not([src=\"\"]) + .ec-ph { display: none; }\r\n .ec-logo-circle img.loaded + .ec-ph { display: none; }\r\n\r\n \/* Placeholder g\u00e9n\u00e9rique *\/\r\n .ec-ph {\r\n display: flex; flex-direction: column;\r\n align-items: center; justify-content: center;\r\n gap: 8px; padding: 28px 16px;\r\n text-align: center; min-height: 100px;\r\n pointer-events: none;\r\n }\r\n .ec-ph svg { opacity: 0.35; }\r\n .ec-ph span { font-size: 11px; color: var(--text-muted); line-height: 1.5; }\r\n .ec-ph em { font-size: 10px; color: #444; font-style: normal; }\r\n\r\n \/* \u2500\u2500 CASE STUDY \u2500\u2500 *\/\r\n .ec-case {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: clamp(24px, 5vw, 50px);\r\n align-items: start;\r\n margin-bottom: clamp(40px, 7vw, 70px);\r\n }\r\n .ec-case-text .case-tag {\r\n display: inline-block; font-size: 10px; font-weight: 700;\r\n letter-spacing: 0.18em; text-transform: uppercase;\r\n color: var(--gold-pale); border: 1px solid var(--gold);\r\n border-radius: 20px; padding: 4px 12px; margin-bottom: 18px;\r\n }\r\n .ec-case-text h2 {\r\n font-family: 'Bebas Neue', sans-serif;\r\n font-size: clamp(32px, 5vw, 56px); color: #fff;\r\n line-height: 1; margin-bottom: 28px;\r\n }\r\n .ec-strat-item { margin-bottom: 18px; }\r\n .ec-strat-item .strat-lbl {\r\n font-size: 10px; font-weight: 700; letter-spacing: 0.2em;\r\n text-transform: uppercase; color: var(--gold); margin-bottom: 5px;\r\n }\r\n .ec-strat-item p { font-size: 13px; color: var(--text-muted); line-height: 1.6; }\r\n\r\n .ec-mini-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 24px; }\r\n .ec-mini-kpi {\r\n background: var(--card-bg); border: 1px solid var(--card-border);\r\n border-radius: 10px; padding: 14px 12px; text-align: center;\r\n }\r\n .ec-mini-kpi .mk-val {\r\n font-family: 'Bebas Neue', sans-serif;\r\n font-size: clamp(22px, 3vw, 32px); color: var(--gold-pale);\r\n letter-spacing: 0.03em; line-height: 1;\r\n }\r\n .ec-mini-kpi .mk-lbl {\r\n font-size: 9px; font-weight: 700; letter-spacing: 0.18em;\r\n text-transform: uppercase; color: var(--text-muted); margin-top: 5px;\r\n }\r\n\r\n .ec-case-visuals { display: flex; flex-direction: column; gap: 16px; }\r\n\r\n \/* \u2500\u2500 INT\u00c9GRATION TECHNIQUE \u2500\u2500 *\/\r\n .ec-tech {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: clamp(20px, 4vw, 40px);\r\n align-items: start;\r\n margin-bottom: clamp(40px, 7vw, 70px);\r\n }\r\n\r\n \/* TikTok header *\/\r\n .ec-tiktok-block { display: flex; flex-direction: column; gap: 10px; }\r\n .ec-tiktok-header {\r\n display: flex; align-items: center; gap: 12px;\r\n background: var(--card-bg); border: 1px solid var(--card-border);\r\n border-radius: 10px; padding: 12px 16px; margin-bottom: 4px;\r\n }\r\n .ec-tiktok-avatar {\r\n width: 40px; height: 40px; border-radius: 50%;\r\n background: #222; border: 1px solid var(--card-border);\r\n overflow: hidden; flex-shrink: 0;\r\n display: flex; align-items: center; justify-content: center;\r\n }\r\n .ec-tiktok-avatar img {\r\n width: 100%; height: 100%;\r\n object-fit: cover; \/* avatar rond : contain ou cover, les deux sont ok *\/\r\n display: none;\r\n }\r\n .ec-tiktok-avatar img.loaded { display: block; }\r\n .ec-tiktok-name { font-size: 14px; font-weight: 700; color: #fff; }\r\n .ec-tiktok-stats { font-size: 11px; color: var(--text-muted); }\r\n\r\n \/* Grille TikTok \u2014 miniatures en 9:16 conserv\u00e9es (format portrait natif TikTok) *\/\r\n .ec-tiktok-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }\r\n .ec-tiktok-cell {\r\n aspect-ratio: 9 \/ 16;\r\n border-radius: 8px;\r\n background: var(--card-bg);\r\n border: 2px dashed var(--card-border);\r\n overflow: hidden;\r\n display: flex; align-items: center; justify-content: center;\r\n position: relative;\r\n transition: border-color 0.2s;\r\n cursor: pointer;\r\n }\r\n .ec-tiktok-cell:hover { border-color: var(--gold); }\r\n \/* Les miniatures TikTok sont intrins\u00e8quement 9:16 donc object-fit:cover est correct ici *\/\r\n .ec-tiktok-cell img {\r\n position: absolute; inset: 0;\r\n width: 100%; height: 100%;\r\n object-fit: cover; display: none;\r\n }\r\n .ec-tiktok-cell img.loaded { display: block; }\r\n .ec-tiktok-cell img.loaded + .ec-cell-ph { display: none; }\r\n .ec-cell-ph { font-size: 9px; color: #444; text-align: center; padding: 4px; pointer-events: none; }\r\n\r\n \/* Printful x Shopify *\/\r\n .ec-printful-card {\r\n background: var(--card-bg); border: 1px solid var(--card-border);\r\n border-radius: 14px; padding: clamp(20px, 3vw, 32px); height: 100%;\r\n }\r\n .ec-printful-card .pf-tag {\r\n display: inline-block; font-size: 10px; font-weight: 700;\r\n letter-spacing: 0.16em; text-transform: uppercase;\r\n color: var(--gold-pale); border: 1px solid var(--gold);\r\n border-radius: 20px; padding: 4px 12px; margin-bottom: 16px;\r\n }\r\n .ec-printful-card h3 {\r\n font-size: clamp(22px, 3vw, 32px); font-weight: 700;\r\n color: #fff; margin-bottom: 6px;\r\n }\r\n .ec-printful-card .pf-sub { font-size: 13px; color: var(--text-muted); margin-bottom: 28px; }\r\n\r\n .pf-schema {\r\n display: flex; align-items: center; justify-content: space-between;\r\n gap: 12px; background: #0d0d0d; border: 1px solid var(--card-border);\r\n border-radius: 10px; padding: 20px 16px; margin-bottom: 18px;\r\n }\r\n .pf-node {\r\n background: #1a1a1a; border: 1px solid #2a2a2a;\r\n border-radius: 8px; padding: 10px 14px;\r\n font-size: 12px; color: #fff; font-weight: 600;\r\n text-align: center; min-width: 90px;\r\n }\r\n .pf-node .pf-node-sub { font-size: 10px; color: var(--text-muted); font-weight: 400; margin-top: 2px; }\r\n .pf-arrows { flex: 1; display: flex; flex-direction: column; gap: 8px; align-items: center; }\r\n .pf-arrow {\r\n font-size: 10px; font-weight: 700; letter-spacing: 0.1em;\r\n display: flex; align-items: center; gap: 6px; white-space: nowrap;\r\n }\r\n .pf-arrow.red { color: #e05555; }\r\n .pf-arrow.blue { color: #5599e0; }\r\n .pf-arrow::before,.pf-arrow::after { content: ''; flex: 1; height: 1px; min-width: 20px; }\r\n .pf-arrow.red::before,.pf-arrow.red::after { background: #e05555; }\r\n .pf-arrow.blue::before,.pf-arrow.blue::after { background: #5599e0; }\r\n .pf-legend {\r\n display: flex; gap: 20px; justify-content: center;\r\n font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;\r\n }\r\n .pf-legend span { display: flex; align-items: center; gap: 6px; }\r\n .pf-legend span::before { content: ''; width: 8px; height: 8px; border-radius: 50%; }\r\n .pf-legend .leg-red::before { background: #e05555; }\r\n .pf-legend .leg-blue::before { background: #5599e0; }\r\n .pf-legend .leg-red { color: #e05555; }\r\n .pf-legend .leg-blue { color: #5599e0; }\r\n\r\n \/* \u2500\u2500 R\u00c9SULTATS \u2500\u2500 *\/\r\n .ec-results-grid {\r\n display: grid; grid-template-columns: 2fr 1fr 1fr;\r\n gap: 12px; margin-bottom: clamp(40px, 7vw, 70px);\r\n }\r\n .ec-stat-card {\r\n background: var(--card-bg); border: 1px solid var(--card-border);\r\n border-radius: 14px; padding: clamp(20px, 3vw, 32px) clamp(16px, 2.5vw, 28px);\r\n }\r\n .ec-stat-card.primary { background: linear-gradient(135deg, #111 60%, rgba(112,95,33,0.12)); }\r\n .ec-stat-card .stat-label {\r\n font-size: 10px; font-weight: 700; letter-spacing: 0.22em;\r\n text-transform: uppercase; color: var(--gold); margin-bottom: 16px;\r\n }\r\n .ec-stat-card .stat-val {\r\n font-family: 'Bebas Neue', sans-serif;\r\n font-size: clamp(36px, 5vw, 70px); color: #fff;\r\n letter-spacing: 0.02em; line-height: 1;\r\n }\r\n .ec-stat-card .stat-note {\r\n font-size: 12px; color: var(--text-muted); margin-top: 12px;\r\n display: flex; align-items: center; gap: 6px;\r\n }\r\n .ec-stat-card .stat-note::before { content: '\u2197'; color: var(--gold-pale); }\r\n\r\n \/* \u2500\u2500 TOOLS \u2500\u2500 *\/\r\n .ec-tools { text-align: center; padding: 40px 0 0; border-top: 1px solid var(--card-border); }\r\n .ec-tools h3 {\r\n font-size: 12px; font-weight: 700; letter-spacing: 0.22em;\r\n text-transform: uppercase; color: var(--text-muted); margin-bottom: 24px;\r\n }\r\n .ec-tools-logos { display: flex; justify-content: center; align-items: center; gap: clamp(16px, 4vw, 32px); flex-wrap: wrap; }\r\n .ec-tool {\r\n display: flex; align-items: center; gap: 10px;\r\n background: var(--card-bg); border: 1px solid var(--card-border);\r\n border-radius: 10px; padding: 12px 22px;\r\n font-size: 13px; font-weight: 600; color: var(--text);\r\n transition: border-color 0.2s;\r\n }\r\n .ec-tool:hover { border-color: var(--gold); }\r\n\r\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 RESPONSIVE \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n @media (max-width: 900px) {\r\n .ec-case { grid-template-columns: 1fr; }\r\n .ec-tech { grid-template-columns: 1fr; }\r\n .ec-results-grid { grid-template-columns: 1fr 1fr; }\r\n .ec-stat-card.primary { grid-column: 1 \/ -1; }\r\n }\r\n @media (max-width: 600px) {\r\n .ec-results-grid { grid-template-columns: 1fr; }\r\n .ec-stat-card.primary { grid-column: auto; }\r\n .ec-mini-kpis { grid-template-columns: 1fr; }\r\n .ec-tiktok-grid { grid-template-columns: repeat(2, 1fr); }\r\n .pf-schema { flex-direction: column; }\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<section class=\"ec-section\">\r\n\r\n <!-- HERO -->\r\n <div class=\"ec-hero\">\r\n <h1>E-Commerce<\/h1>\r\n <div class=\"subtitle\">Augmenter vos ventes.<\/div>\r\n <\/div>\r\n\r\n <!-- INTRO -->\r\n <div class=\"ec-intro\">\r\n <strong>Comp\u00e9tence :<\/strong> Ce projet m'a permis de comprendre les leviers de performance d'une boutique en ligne : optimisation du parcours d'achat, gestion des fiches produits, strat\u00e9gie de conversion et analyse des donn\u00e9es clients. J'ai d\u00e9velopp\u00e9 une approche orient\u00e9e r\u00e9sultats pour am\u00e9liorer l'exp\u00e9rience utilisateur et augmenter les ventes.\r\n <\/div>\r\n\r\n <div class=\"ec-divider\"><\/div>\r\n\r\n <!-- CASE STUDY -->\r\n <div class=\"ec-label\">\u00c9tude de cas<\/div>\r\n <div class=\"ec-case\">\r\n\r\n <!-- Gauche : texte + KPIs -->\r\n <div class=\"ec-case-text\">\r\n <div class=\"case-tag\">E-Commerce<\/div>\r\n <h2>Cr\u00e9ation d'une marque E-commerce<\/h2>\r\n <div class=\"ec-strat-item\">\r\n <div class=\"strat-lbl\">Mon id\u00e9e<\/div>\r\n <p>Vendre des t-shirts humouristiques en faisant la promotion sur les r\u00e9seaux.<\/p>\r\n <\/div>\r\n <div class=\"ec-strat-item\">\r\n <div class=\"strat-lbl\">Strat\u00e9gie<\/div>\r\n <p>Contenu r\u00e9guli\u00e9 : r\u00e9els + stories sur Instagram & TikTok.<\/p>\r\n <\/div>\r\n <div class=\"ec-strat-item\">\r\n <div class=\"strat-lbl\">Tracking<\/div>\r\n <p>Suivi comportemental et analyse des conversions sur le site web via Shopify.<\/p>\r\n <\/div>\r\n <div class=\"ec-mini-kpis\">\r\n <div class=\"ec-mini-kpi\"><div class=\"mk-val\">58<\/div><div class=\"mk-lbl\">Commandes<\/div><\/div>\r\n <div class=\"ec-mini-kpi\"><div class=\"mk-val\">1 504\u20ac<\/div><div class=\"mk-lbl\">Chiffre d'affaires<\/div><\/div>\r\n <div class=\"ec-mini-kpi\"><div class=\"mk-val\">25.93\u20ac<\/div><div class=\"mk-lbl\">Panier moyen<\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Droite : logo + dashboard \u2014 images pleine largeur, pas de crop -->\r\n <div class=\"ec-case-visuals\">\r\n\r\n <!-- \u2605 LOGO \u2014 image pleine largeur dans un cercle (object-fit:contain = visible en entier)\r\n \ud83d\udc49 Remplacez src=\"\" par l'URL du logo -->\r\n <div class=\"ec-logo-circle\">\r\n <img decoding=\"async\" src=\"https:\/\/yanis-naud.ovh\/wp-content\/uploads\/2026\/03\/Logo-lart-du-rire-285x300.jpg\" alt=\"Logo L'Art de Rire\">\r\n <div class=\"ec-ph\">\r\n <svg width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#705f21\" stroke-width=\"1.5\">\r\n <circle cx=\"12\" cy=\"8\" r=\"4\"\/><path d=\"M4 20c0-4 3.6-7 8-7s8 3 8 7\"\/>\r\n <\/svg>\r\n <span style=\"font-size:10px;\">LOGO<br><em>src=\"URL_LOGO\"<\/em><\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- \u2605 DASHBOARD Shopify \u2014 pleine largeur, pas de crop\r\n \ud83d\udc49 Remplacez src=\"\" par l'URL de votre capture -->\r\n <div class=\"ec-img-wrap\">\r\n <img decoding=\"async\" src=\"https:\/\/yanis-naud.ovh\/wp-content\/uploads\/2026\/03\/IMG_6480-1024x576.png\"\r\n alt=\"Dashboard Shopify \u2013 Taux de conversion\">\r\n <div class=\"ec-ph\">\r\n <svg width=\"34\" height=\"34\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#705f21\" stroke-width=\"1.3\">\r\n <rect x=\"2\" y=\"3\" width=\"20\" height=\"14\" rx=\"2\"\/>\r\n <line x1=\"8\" y1=\"21\" x2=\"16\" y2=\"21\"\/>\r\n <line x1=\"12\" y1=\"17\" x2=\"12\" y2=\"21\"\/>\r\n <\/svg>\r\n <span>DASHBOARD SHOPIFY<br><em>src=\"URL_CAPTURE\"<\/em><\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"ec-divider\"><\/div>\r\n\r\n <!-- INT\u00c9GRATION TECHNIQUE -->\r\n <div class=\"ec-label\">Int\u00e9gration technique & r\u00e9seaux sociaux<\/div>\r\n <div class=\"ec-tech\">\r\n\r\n <!-- TikTok feed -->\r\n <div class=\"ec-tiktok-block\">\r\n <div class=\"ec-tiktok-header\">\r\n <div class=\"ec-tiktok-avatar\">\r\n <!-- \u2605 Avatar TikTok \u2014 Remplacez src=\"\" -->\r\n <img decoding=\"async\" src=\"\" alt=\"Avatar Lartderire.fr\">\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#444\" stroke-width=\"1.5\">\r\n <circle cx=\"12\" cy=\"8\" r=\"4\"\/><path d=\"M4 20c0-4 3.6-7 8-7s8 3 8 7\"\/>\r\n <\/svg>\r\n <\/div>\r\n <div>\r\n <div class=\"ec-tiktok-name\">Lartderire.fr<\/div>\r\n <div class=\"ec-tiktok-stats\">254 suivis  \u00b7  <strong style=\"color:#fff\">1 743<\/strong> followers  \u00b7  62,6K j'aime<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- \u2605 UNE seule photo \u2014 pleine largeur, hauteur auto (pas de crop)\r\n \ud83d\udc49 Remplacez src=\"\" par l'URL de votre capture TikTok -->\r\n <div class=\"ec-img-wrap\">\r\n <img decoding=\"async\" src=\"https:\/\/yanis-naud.ovh\/wp-content\/uploads\/2026\/04\/IMG_3143-768x1471.jpeg\" alt=\"Capture compte TikTok Lartderire.fr\">\r\n <div class=\"ec-ph\">\r\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#705f21\" stroke-width=\"1.3\">\r\n <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"\/>\r\n <circle cx=\"8.5\" cy=\"8.5\" r=\"1.5\"\/>\r\n <polyline points=\"21 15 16 10 5 21\"\/>\r\n <\/svg>\r\n <span>CAPTURE TIKTOK<br><em>src=\"URL_DE_VOTRE_IMAGE\"<\/em><\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Printful x Shopify -->\r\n <div class=\"ec-printful-card\">\r\n <div class=\"pf-tag\">Int\u00e9gration technique<\/div>\r\n <h3>Printful \u00d7 Shopify<\/h3>\r\n <div class=\"pf-sub\">Connexion automatis\u00e9e entre les plateformes<\/div>\r\n <div class=\"pf-schema\">\r\n <div class=\"pf-node\">\r\n Printful\r\n <div class=\"pf-node-sub\">Print on demand<\/div>\r\n <div class=\"pf-node-sub\" style=\"margin-top:4px;font-size:9px;color:#555\">Fabrication \u00b7 Exp\u00e9dition \u00b7 Stocks<\/div>\r\n <\/div>\r\n <div class=\"pf-arrows\">\r\n <div class=\"pf-arrow red\">Commandes clients<\/div>\r\n <div class=\"pf-arrow blue\">Synchro produits & stocks<\/div>\r\n <\/div>\r\n <div class=\"pf-node\">\r\n Shopify\r\n <div class=\"pf-node-sub\">E-commerce<\/div>\r\n <div class=\"pf-node-sub\" style=\"margin-top:4px;font-size:9px;color:#555\">Boutique \u00b7 Paiements \u00b7 Catalogue<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"pf-legend\">\r\n <span class=\"leg-red\">Flux commandes<\/span>\r\n <span class=\"leg-blue\">Flux stocks<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <div class=\"ec-divider\"><\/div>\r\n\r\n <!-- R\u00c9SULTATS -->\r\n <div class=\"ec-label\">Les r\u00e9sultats<\/div>\r\n <div class=\"ec-results-grid\">\r\n <div class=\"ec-stat-card primary\">\r\n <div class=\"stat-label\">Visiteurs sur site web<\/div>\r\n <div class=\"stat-val\">5 740<\/div>\r\n <div class=\"stat-note\">Performance annuelle 2025<\/div>\r\n <\/div>\r\n <div class=\"ec-stat-card\">\r\n <div class=\"stat-label\">Taux d'engagement<\/div>\r\n <div class=\"stat-val\">15.3%<\/div>\r\n <div class=\"stat-note\">Interaction active<\/div>\r\n <\/div>\r\n <div class=\"ec-stat-card\">\r\n <div class=\"stat-label\">Abonn\u00e9s gagn\u00e9s<\/div>\r\n <div class=\"stat-val\">+2000<\/div>\r\n <div class=\"stat-note\">Croissance organique<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div style=\"display:grid; grid-template-columns:1fr; gap:12px; margin-bottom:clamp(40px,7vw,70px);\">\r\n <div class=\"ec-stat-card\" style=\"text-align:center;\">\r\n <div class=\"stat-label\" style=\"justify-content:center;\">Nombre de vues<\/div>\r\n <div class=\"stat-val\" style=\"font-size:clamp(40px,6vw,80px);\">+1 million<\/div>\r\n <div class=\"stat-note\" style=\"justify-content:center;\">Vues cumul\u00e9es TikTok & Instagram<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Logo centr\u00e9 -->\r\n <div style=\"display:flex; justify-content:center; margin:clamp(20px,4vw,40px) 0;\">\r\n <!-- \u2605 Logo centr\u00e9 en bas \u2014 Remplacez src=\"\" -->\r\n <div class=\"ec-logo-circle\">\r\n <img decoding=\"async\" src=\"https:\/\/yanis-naud.ovh\/wp-content\/uploads\/2026\/03\/Logo-lart-du-rire-285x300.jpg\" alt=\"Logo L'Art de Rire\">\r\n <div class=\"ec-ph\">\r\n <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#705f21\" stroke-width=\"1.5\">\r\n <circle cx=\"12\" cy=\"8\" r=\"4\"\/><path d=\"M4 20c0-4 3.6-7 8-7s8 3 8 7\"\/>\r\n <\/svg>\r\n <span style=\"font-size:9px;\">LOGO<br><em>src=\"URL\"<\/em><\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"ec-divider\"><\/div>\r\n\r\n <!-- LOGICIELS -->\r\n <div class=\"ec-tools\">\r\n <h3>Les logiciels utilis\u00e9s<\/h3>\r\n <div class=\"ec-tools-logos\">\r\n <div class=\"ec-tool\">\r\n <svg width=\"26\" height=\"26\" viewBox=\"0 0 24 24\"><rect width=\"24\" height=\"24\" rx=\"5\" fill=\"#96BF48\"\/><path d=\"M15.5 5.5c-.1 0-1.4-.1-1.4-.1s-.9-.9-1-.9v14l4.4-1s-1.9-11.9-2-12z\" fill=\"#5A8E3B\"\/><path d=\"M12.5 7.2s-.6-.2-1.3-.2c-2 0-3 1.3-3 2.5 0 1.4.9 2 1.9 2.4.9.4 1.2.7 1.2 1.2 0 .6-.5 1-1.3 1-.9 0-1.7-.4-1.7-.4l-.3 1.5s.9.5 2.1.5c2.1 0 3.1-1.2 3.1-2.7 0-1.5-1-2.1-1.9-2.5-.8-.3-1.2-.6-1.2-1.1 0-.5.4-.9 1.1-.9.7 0 1.4.3 1.4.3l.3-1.6z\" fill=\"white\"\/><\/svg>\r\n Shopify\r\n <\/div>\r\n <div class=\"ec-tool\">\r\n <svg width=\"26\" height=\"26\" viewBox=\"0 0 24 24\"><rect width=\"24\" height=\"24\" rx=\"5\" fill=\"#fff\"\/><text x=\"12\" y=\"16\" font-family=\"Arial,sans-serif\" font-size=\"8\" font-weight=\"bold\" fill=\"#000\" text-anchor=\"middle\">Printful<\/text><\/svg>\r\n Printful\r\n <\/div>\r\n <div class=\"ec-tool\">\r\n <svg width=\"26\" height=\"26\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M19.59 6.69a4.83 4.83 0 01-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 01-2.88 2.5 2.89 2.89 0 01-2.89-2.89 2.89 2.89 0 012.89-2.89c.28 0 .54.04.79.1V9.01a6.33 6.33 0 00-.79-.05 6.34 6.34 0 00-6.34 6.34 6.34 6.34 0 006.34 6.34 6.34 6.34 0 006.33-6.34V8.79a8.18 8.18 0 004.79 1.54V6.88a4.85 4.85 0 01-1.02-.19z\" fill=\"#fff\"\/><\/svg>\r\n TikTok\r\n <\/div>\r\n <div class=\"ec-tool\">\r\n <svg width=\"26\" height=\"26\" viewBox=\"0 0 24 24\"><defs><linearGradient id=\"ig2\" x1=\"0%\" y1=\"100%\" x2=\"100%\" y2=\"0%\"><stop offset=\"0%\" style=\"stop-color:#f09433\"\/><stop offset=\"100%\" style=\"stop-color:#bc1888\"\/><\/linearGradient><\/defs><rect width=\"24\" height=\"24\" rx=\"6\" fill=\"url(#ig2)\"\/><circle cx=\"12\" cy=\"12\" r=\"4\" fill=\"none\" stroke=\"white\" stroke-width=\"1.8\"\/><circle cx=\"17.5\" cy=\"6.5\" r=\"1.2\" fill=\"white\"\/><rect x=\"2.5\" y=\"2.5\" width=\"19\" height=\"19\" rx=\"5\" fill=\"none\" stroke=\"white\" stroke-width=\"1.5\"\/><\/svg>\r\n Instagram\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n<\/section>\r\n\r\n<script>\r\n \/* Images pleine largeur : affiche d\u00e8s que src renseign\u00e9 *\/\r\n document.querySelectorAll('.ec-img-wrap img, .ec-logo-circle img').forEach(function(img) {\r\n function check() {\r\n var s = img.getAttribute('src');\r\n if (s && s !== '' && img.src !== window.location.href) img.classList.add('loaded');\r\n }\r\n check();\r\n img.addEventListener('load', check);\r\n });\r\n\r\n \/* Miniatures TikTok (aspect-ratio conserv\u00e9) *\/\r\n document.querySelectorAll('.ec-tiktok-cell img, .ec-tiktok-avatar img').forEach(function(img) {\r\n if (img.src && img.src !== window.location.href) img.classList.add('loaded');\r\n img.addEventListener('load', function() { img.classList.add('loaded'); });\r\n });\r\n<\/script>\r\n\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>E-Commerce \u2013 Portfolio E-Commerce Augmenter vos ventes. Comp\u00e9tence : Ce projet m’a permis de comprendre les leviers de performance d’une boutique en ligne : optimisation du parcours d’achat, gestion des fiches produits, strat\u00e9gie de conversion et analyse des donn\u00e9es clients. J’ai d\u00e9velopp\u00e9 une approche orient\u00e9e r\u00e9sultats pour am\u00e9liorer l’exp\u00e9rience utilisateur et augmenter les ventes. \u00c9tude […]<\/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-1633","page","type-page","status-publish","hentry"],"blocksy_meta":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.7 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>E-commerce V2 - Portfolio Yanis NAUD<\/title>\n<meta name=\"description\" content=\"Cr\u00e9ation de la marque e-commerce L'Art de Rire : Shopify, Printful, TikTok & Instagram. 58 commandes, 1 504\u20ac de CA et +1 million de vues.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/yanis-naud.ovh\/index.php\/e-commerce\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"E-commerce V2 - Portfolio Yanis NAUD\" \/>\n<meta property=\"og:description\" content=\"Cr\u00e9ation de la marque e-commerce L'Art de Rire : Shopify, Printful, TikTok & Instagram. 58 commandes, 1 504\u20ac de CA et +1 million de vues.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/yanis-naud.ovh\/index.php\/e-commerce\/\" \/>\n<meta property=\"og:site_name\" content=\"Portfolio Yanis NAUD\" \/>\n<meta property=\"article:modified_time\" content=\"2026-05-21T10:38:06+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/yanis-naud.ovh\/wp-content\/uploads\/2026\/03\/Logo-lart-du-rire-285x300.jpg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data1\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/yanis-naud.ovh\\\/index.php\\\/e-commerce\\\/\",\"url\":\"https:\\\/\\\/yanis-naud.ovh\\\/index.php\\\/e-commerce\\\/\",\"name\":\"E-commerce V2 - Portfolio Yanis NAUD\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/yanis-naud.ovh\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/yanis-naud.ovh\\\/index.php\\\/e-commerce\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/yanis-naud.ovh\\\/index.php\\\/e-commerce\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/yanis-naud.ovh\\\/wp-content\\\/uploads\\\/2026\\\/03\\\/Logo-lart-du-rire-285x300.jpg\",\"datePublished\":\"2026-05-12T14:41:42+00:00\",\"dateModified\":\"2026-05-21T10:38:06+00:00\",\"description\":\"Cr\u00e9ation de la marque e-commerce L'Art de Rire : Shopify, Printful, TikTok & Instagram. 58 commandes, 1 504\u20ac de CA et +1 million de vues.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/yanis-naud.ovh\\\/index.php\\\/e-commerce\\\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/yanis-naud.ovh\\\/index.php\\\/e-commerce\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/yanis-naud.ovh\\\/index.php\\\/e-commerce\\\/#primaryimage\",\"url\":\"https:\\\/\\\/yanis-naud.ovh\\\/wp-content\\\/uploads\\\/2026\\\/03\\\/Logo-lart-du-rire-285x300.jpg\",\"contentUrl\":\"https:\\\/\\\/yanis-naud.ovh\\\/wp-content\\\/uploads\\\/2026\\\/03\\\/Logo-lart-du-rire-285x300.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/yanis-naud.ovh\\\/index.php\\\/e-commerce\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Accueil\",\"item\":\"https:\\\/\\\/yanis-naud.ovh\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"E-commerce V2\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/yanis-naud.ovh\\\/#website\",\"url\":\"https:\\\/\\\/yanis-naud.ovh\\\/\",\"name\":\"Portfolio Yanis NAUD\",\"description\":\"Portfolio Marketing Digital\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/yanis-naud.ovh\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"E-commerce V2 - Portfolio Yanis NAUD","description":"Cr\u00e9ation de la marque e-commerce L'Art de Rire : Shopify, Printful, TikTok & Instagram. 58 commandes, 1 504\u20ac de CA et +1 million de vues.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/yanis-naud.ovh\/index.php\/e-commerce\/","og_locale":"fr_FR","og_type":"article","og_title":"E-commerce V2 - Portfolio Yanis NAUD","og_description":"Cr\u00e9ation de la marque e-commerce L'Art de Rire : Shopify, Printful, TikTok & Instagram. 58 commandes, 1 504\u20ac de CA et +1 million de vues.","og_url":"https:\/\/yanis-naud.ovh\/index.php\/e-commerce\/","og_site_name":"Portfolio Yanis NAUD","article_modified_time":"2026-05-21T10:38:06+00:00","og_image":[{"url":"https:\/\/yanis-naud.ovh\/wp-content\/uploads\/2026\/03\/Logo-lart-du-rire-285x300.jpg","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Dur\u00e9e de lecture estim\u00e9e":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/yanis-naud.ovh\/index.php\/e-commerce\/","url":"https:\/\/yanis-naud.ovh\/index.php\/e-commerce\/","name":"E-commerce V2 - Portfolio Yanis NAUD","isPartOf":{"@id":"https:\/\/yanis-naud.ovh\/#website"},"primaryImageOfPage":{"@id":"https:\/\/yanis-naud.ovh\/index.php\/e-commerce\/#primaryimage"},"image":{"@id":"https:\/\/yanis-naud.ovh\/index.php\/e-commerce\/#primaryimage"},"thumbnailUrl":"https:\/\/yanis-naud.ovh\/wp-content\/uploads\/2026\/03\/Logo-lart-du-rire-285x300.jpg","datePublished":"2026-05-12T14:41:42+00:00","dateModified":"2026-05-21T10:38:06+00:00","description":"Cr\u00e9ation de la marque e-commerce L'Art de Rire : Shopify, Printful, TikTok & Instagram. 58 commandes, 1 504\u20ac de CA et +1 million de vues.","breadcrumb":{"@id":"https:\/\/yanis-naud.ovh\/index.php\/e-commerce\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/yanis-naud.ovh\/index.php\/e-commerce\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/yanis-naud.ovh\/index.php\/e-commerce\/#primaryimage","url":"https:\/\/yanis-naud.ovh\/wp-content\/uploads\/2026\/03\/Logo-lart-du-rire-285x300.jpg","contentUrl":"https:\/\/yanis-naud.ovh\/wp-content\/uploads\/2026\/03\/Logo-lart-du-rire-285x300.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/yanis-naud.ovh\/index.php\/e-commerce\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Accueil","item":"https:\/\/yanis-naud.ovh\/"},{"@type":"ListItem","position":2,"name":"E-commerce V2"}]},{"@type":"WebSite","@id":"https:\/\/yanis-naud.ovh\/#website","url":"https:\/\/yanis-naud.ovh\/","name":"Portfolio Yanis NAUD","description":"Portfolio Marketing Digital","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/yanis-naud.ovh\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"}]}},"_links":{"self":[{"href":"https:\/\/yanis-naud.ovh\/index.php\/wp-json\/wp\/v2\/pages\/1633","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/yanis-naud.ovh\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/yanis-naud.ovh\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/yanis-naud.ovh\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/yanis-naud.ovh\/index.php\/wp-json\/wp\/v2\/comments?post=1633"}],"version-history":[{"count":19,"href":"https:\/\/yanis-naud.ovh\/index.php\/wp-json\/wp\/v2\/pages\/1633\/revisions"}],"predecessor-version":[{"id":1756,"href":"https:\/\/yanis-naud.ovh\/index.php\/wp-json\/wp\/v2\/pages\/1633\/revisions\/1756"}],"wp:attachment":[{"href":"https:\/\/yanis-naud.ovh\/index.php\/wp-json\/wp\/v2\/media?parent=1633"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}