PageSourceSearch

https://modern-letter.com/

html modern-letter.com collected 2026-10-04 03:31:19 UTC 313,436 bytes, 7,494 lines download raw bytes

1
2<!doctype html>
3<html
4  class="no-js  m:overflow-hidden"
5  lang="fr"
6  data-template="index"
7  
8>
9  <head>
10    <meta charset="utf-8">
11    <meta http-equiv="X-UA-Compatible" content="IE=edge">
12    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=0">
13    <meta name="google-site-verification" content="MF6PZk_f-BVD1fAWev_tpNir2eDXtwcGiVkTVmBi-Vo" />
14    <meta name="theme-color" content="">
15    <link rel="canonical" href="https://modern-letter.com/">
16    <link rel="preconnect" href="https://fonts.shopifycdn.com" crossorigin>
17    <link rel="preconnect" href="https://cdn.shopify.com" crossorigin>
18
19<!-- Google Tag Manager -->
20<script>
vendor: 327 bytes, lines 20-24
20(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
21new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
22j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
23'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
24})(window,document,'script','dataLayer','
24GTM-NK9DJBJK
vendor: 3 bytes, line 24
24');
24</script>
24
25<!-- End Google Tag Manager -->
26
27<script>!function(w,d,s,u){if(w.oaiq)return;var q=function(){q.q.push(arguments)};q.q=[];w.oaiq=q;var j=d.createElement(s);j.async=1;j.src=u;var f=d.getElementsByTagName(s)[0];f.parentNode.insertBefore(j,f)}(window,document,"script","https://bzrcdn.openai.com/sdk/oaiq.min.js");oaiq("init",{pixelId:"28Z76j5BX4Gox9gisH7U9Z",debug:true});</script>
27
28
29<!-- Google tag (gtag.js) -->
vendor: 64 bytes, lines 29-30
29
30<script async src="https://www.googletagmanager.com/gtag/js?id=
30G-K3NWY78J86
vendor: 12 bytes, line 30
30"></script>
31<script>
32  
vendor: 134 bytes, lines 32-36
32window.dataLayer = window.dataLayer || [];
33  function gtag(){dataLayer.push(arguments);}
34  gtag('js', new Date());
35
36  gtag('config', '
36G-K3NWY78J86
vendor: 4 bytes, line 36
36');
37</script>
37
38
39
40<!-- Google tag (gtag.js) -->
vendor: 64 bytes, lines 40-41
40
41<script async src="https://www.googletagmanager.com/gtag/js?id=
41G-9VD2EFBGRM
vendor: 12 bytes, line 41
41"></script>
42<script>
43  
vendor: 134 bytes, lines 43-47
43window.dataLayer = window.dataLayer || [];
44  function gtag(){dataLayer.push(arguments);}
45  gtag('js', new Date());
46
47  gtag('config', '
47G-9VD2EFBGRM
vendor: 4 bytes, line 47
47');
48</script>
48<link rel="shortcut icon" type="image/png" href="//modern-letter.com/cdn/shop/files/cropped-favicon-tml-1.png?crop=center&height=32&v=1767779030&width=32"><title>Agence Klaviyo | Email marketing E-commerce : The Modern Letter</title><meta name="description" content="Agence spécialisée sur Klaviyo pour les marques e-commerce. Flows, newsletters, segmentation et WhatsApp marketing pour fidéliser vos clients et booster votre rentabilité. ★ 4.9/5"><meta property="og:site_name" content="The Modern Letter">
49<meta property="og:url" content="https://modern-letter.com/">
50<meta property="og:title" content="Agence Klaviyo | Email marketing E-commerce : The Modern Letter">
51<meta property="og:type" content="website">
52<meta property="og:description" content="Agence spécialisée sur Klaviyo pour les marques e-commerce. Flows, newsletters, segmentation et WhatsApp marketing pour fidéliser vos clients et booster votre rentabilité. ★ 4.9/5"><meta property="og:image" content="http://modern-letter.com/cdn/shop/files/The_Modern_Letter.png?v=1769531450">
53<meta property="og:image:secure_url" content="https://modern-letter.com/cdn/shop/files/The_Modern_Letter.png?v=1769531450">
54<meta property="og:image:width" content="1441">
55<meta property="og:image:height" content="708"><meta name="twitter:card" content="summary_large_image">
56<meta name="twitter:title" content="Agence Klaviyo | Email marketing E-commerce : The Modern Letter">
57<meta name="twitter:description" content="Agence spécialisée sur Klaviyo pour les marques e-commerce. Flows, newsletters, segmentation et WhatsApp marketing pour fidéliser vos clients et booster votre rentabilité. ★ 4.9/5">
58
59<style>
60  @font-face {  font-family: M-Heading-Font;  font-weight:400;  src: url(https://cdn.shopify.com/s/files/1/0561/2742/2636/files/Jost-Regular.ttf?v=1618297125);  font-display: swap;}@font-face {  font-family: M-Heading-Font;  font-weight:500;  src: url(https://cdn.shopify.com/s/files/1/0561/2742/2636/files/Jost-Medium.ttf?v=1618297125);  font-display: swap;}@font-face {  font-family: M-Heading-Font;  font-weight:600;  src: url(https://cdn.shopify.com/s/files/1/0561/2742/2636/files/Jost-SemiBold.ttf?v=1618297125);  font-display: swap;}:root {  --font-stack-header: 'M-Heading-Font';  --font-weight-header: 400;}@font-face {  font-family: M-Body-Font;  font-weight:400;  src: url(https://cdn.shopify.com/s/files/1/0561/2742/2636/files/Jost-Regular.ttf?v=1618297125);  font-display: swap;}@font-face {  font-family: M-Body-Font;  font-weight:500;  src: url(https://cdn.shopify.com/s/files/1/0561/2742/2636/files/Jost-Medium.ttf?v=1618297125);  font-display: swap;}@font-face {  font-family: M-Body-Font;  font-weight:600;  src: url(https://cdn.shopify.com/s/files/1/0561/2742/2636/files/Jost-SemiBold.ttf?v=1618297125);  font-display: swap;}:root {  --font-stack-body: 'M-Body-Font';  --font-weight-body: 400;;}
61</style>
62<style>
63  html {
64    font-size: calc(var(--font-base-size, 16) * 1px);
65    -webkit-font-smoothing: antialiased;
66    height: 100%;
67    scroll-behavior: smooth;
68  }
69  body {
70    margin: 0;
71    font-family: var(--font-stack-body);
72    font-weight: var(--font-weight-body);
73    font-style: var(--font-style-body);
74    color: rgb(var(--color-foreground));
75    font-size: calc(var(--font-base-size, 16) * 1px);
76    line-height: calc(var(--base-line-height) * 1px);
77    background-color: rgb(var(--color-background));
78    position: relative;
79    min-height: 100%;
80  }
81
82  body,
83  html {
84    overflow-x: clip;
85  }
86
87  html.prevent-scroll,
88  html.prevent-scroll body {
89    height: auto;
90    overflow: hidden !important;
91  }
92
93  html.prevent-scroll {
94    padding-right: var(--m-scrollbar-width);
95  }
96
97  h1,
98  h2,
99  h3,
100  h4,
101  h5,
102  h6 {
103    font-family: var(--font-stack-header);
104    font-weight: var(--font-weight-header);
105    font-style: var(--font-style-header);
106    color: rgb(var(--color-heading));
107    line-height: normal;
108    letter-spacing: var(--heading-letter-spacing);
109  }
110  h1,
111  .h1 {
112    font-size: calc(((var(--font-h1-mobile)) / (var(--font-base-size))) * 1rem);
113    line-height: 1.278;
114  }
115
116  h2,
117  .h2 {
118    font-size: calc(((var(--font-h2-mobile)) / (var(--font-base-size))) * 1rem);
119    line-height: 1.267;
120  }
121
122  h3,
123  .h3 {
124    font-size: calc(((var(--font-h3-mobile)) / (var(--font-base-size))) * 1rem);
125    line-height: 1.36;
126  }
127
128  h4,
129  .h4 {
130    font-size: calc(((var(--font-h4-mobile)) / (var(--font-base-size))) * 1rem);
131    line-height: 1.4;
132  }
133
134  h5,
135  .h5 {
136    font-size: calc(((var(--font-h5-mobile)) / (var(--font-base-size))) * 1rem);
137    line-height: 1.5;
138  }
139
140  h6,
141  .h6 {
142    font-size: calc(((var(--font-h6-mobile)) / (var(--font-base-size))) * 1rem);
143    line-height: 1.5;
144  }
145
146  @media only screen and (min-width: 768px) {
147    .h1,
148    h1 {
149      font-size: calc(((var(--font-h1-tablet)) / (var(--font-base-size))) * 1rem);
150      line-height: 1.238;
151    }
152    .h2,
153    h2 {
154      font-size: calc(((var(--font-h2-tablet)) / (var(--font-base-size))) * 1rem);
155      line-height: 1.235;
156    }
157    h3,
158    .h3 {
159      font-size: calc(((var(--font-h3-tablet)) / (var(--font-base-size))) * 1rem);
160      line-height: 1.36;
161    }
162    h4,
163    .h4 {
164      font-size: calc(((var(--font-h4-tablet)) / (var(--font-base-size))) * 1rem);
165      line-height: 1.4;
166    }
167  }
168
169  @media only screen and (min-width: 1280px) {
170    .h1,
171    h1 {
172      font-size: calc(((var(--font-h1-desktop)) / (var(--font-base-size))) * 1rem);
173      line-height: 1.167;
174    }
175    .h2,
176    h2 {
177      font-size: calc(((var(--font-h2-desktop)) / (var(--font-base-size))) * 1rem);
178      line-height: 1.238;
179    }
180    h3,
181    .h3 {
182      font-size: calc(((var(--font-h3-desktop)) / (var(--font-base-size))) * 1rem);
183      line-height: 1.278;
184    }
185    h4,
186    .h4 {
187      font-size: calc(((var(--font-h4-desktop)) / (var(--font-base-size))) * 1rem);
188      line-height: 1.333;
189    }
190    h5,
191    .h5 {
192      font-size: calc(((var(--font-h5-desktop)) / (var(--font-base-size))) * 1rem);
193    }
194    h6,
195    .h6 {
196      font-size: calc(((var(--font-h6-desktop)) / (var(--font-base-size))) * 1rem);
197    }
198  }
199  [style*='--aspect-ratio'] {
200    position: relative;
201    overflow: hidden;
202  }
203  [style*='--aspect-ratio']:before {
204    display: block;
205    width: 100%;
206    content: '';
207    height: 0px;
208  }
209  [style*='--aspect-ratio'] > *:first-child {
210    top: 0;
211    left: 0;
212    right: 0;
213    position: absolute !important;
214    object-fit: cover;
215    width: 100%;
216    height: 100%;
217  }
218  [style*='--aspect-ratio']:before {
219    padding-top: calc(100% / (0.0001 + var(--aspect-ratio, 16/9)));
220  }
221  @media (max-width: 767px) {
222    [style*='--aspect-ratio']:before {
223      padding-top: calc(100% / (0.0001 + var(--aspect-ratio-mobile, var(--aspect-ratio, 16/9))));
224    }
225  }
226  .swiper-wrapper {
227    display: flex;
228  }
229  .swiper-container:not(.swiper-container-initialized) .swiper-slide {
230    width: calc(100% / var(--items, 1));
231    flex: 0 0 auto;
232  }
233  @media (max-width: 1023px) {
234    .swiper-container:not(.swiper-container-initialized) .swiper-slide {
235      min-width: 40vw;
236      flex: 0 0 auto;
237    }
238  }
239  @media (max-width: 767px) {
240    .swiper-container:not(.swiper-container-initialized) .swiper-slide {
241      min-width: 66vw;
242      flex: 0 0 auto;
243    }
244  }
245</style>
246<link href="//modern-letter.com/cdn/shop/t/10/assets/main.css?v=35385749584360036491784623194" rel="stylesheet" type="text/css" media="all" />
247<style data-shopify>
248:root,.m-color-default {
249      --color-background: 255,255,255;
250      --color-background-secondary: 245,245,245;
251  		
252  	  --gradient-background: #ffffff;
253  		
254  		--color-foreground: 51,51,51;
255  		--color-foreground-secondary: 51,51,51;
256      --color-heading: 27,68,42;
257  		--color-button: 0,0,0;
258  		--color-button-text: 243,243,234;
259  		--color-outline-button: 0,0,0;
260      --color-button-hover: 34, 34, 34;
261      --color-button-text-hover: 243, 243, 234;
262  		--color-border: 238,238,238;
263  		--color-price-sale: 232,78,78;
264  		--color-price-regular: 0,0,0;
265  		--color-form-field: 243,243,234;
266  		--color-form-field-text: 0,0,0;
267  		--color-tooltip: 34,34,34;
268  		--color-tooltip-text: 243,243,234;
269  	}
270  
271.m-color-dark {
272      --color-background: 27,68,42;
273      --color-background-secondary: 243,243,234;
274  		
275  	  --gradient-background: #1b442a;
276  		
277  		--color-foreground: 243,243,236;
278  		--color-foreground-secondary: 243,243,236;
279      --color-heading: 243,243,236;
280  		--color-button: 243,243,234;
281  		--color-button-text: 27,68,42;
282  		--color-outline-button: 243,243,234;
283      --color-button-hover: 243, 243, 234;
284      --color-button-text-hover: 34, 34, 34;
285  		--color-border: 75,75,75;
286  		--color-price-sale: 232,78,78;
287  		--color-price-regular: 255,255,255;
288  		--color-form-field: 243,243,234;
289  		--color-form-field-text: 34,34,34;
290  		--color-tooltip: 255,255,255;
291  		--color-tooltip-text: 34,34,34;
292  	}
293  
294.m-color-footer {
295      --color-background: 243,243,234;
296      --color-background-secondary: 243,243,234;
297  		
298  	  --gradient-background: #f3f3ea;
299  		
300  		--color-foreground: 0,0,0;
301  		--color-foreground-secondary: 102,102,102;
302      --color-heading: 27,68,42;
303  		--color-button: 34,34,34;
304  		--color-button-text: 255,255,255;
305  		--color-outline-button: 34,34,34;
306      --color-button-hover: 34, 34, 34;
307      --color-button-text-hover: 255, 255, 255;
308  		--color-border: 222,222,222;
309  		--color-price-sale: 232,78,78;
310  		--color-price-regular: 0,0,0;
311  		--color-form-field: 255,255,255;
312  		--color-form-field-text: 0,0,0;
313  		--color-tooltip: 34,34,34;
314  		--color-tooltip-text: 255,255,255;
315  	}
316  
317.m-color-badge-hot {
318      --color-background: 255,255,255;
319      --color-background-secondary: 37,50,97;
320  		
321  	  --gradient-background: #ffffff;
322  		
323  		--color-foreground: 243,243,234;
324  		--color-foreground-secondary: 243,243,234;
325      --color-heading: 243,243,234;
326  		--color-button: 255,255,255;
327  		--color-button-text: 34,34,34;
328  		--color-outline-button: 255,255,255;
329      --color-button-hover: 255, 255, 255;
330      --color-button-text-hover: 34, 34, 34;
331  		--color-border: 222,222,222;
332  		--color-price-sale: 255,255,255;
333  		--color-price-regular: 255,255,255;
334  		--color-form-field: 255,255,255;
335  		--color-form-field-text: 0,0,0;
336  		--color-tooltip: 255,255,255;
337  		--color-tooltip-text: 34,34,34;
338  	}
339  
340.m-color-badge-new {
341      --color-background: 73,165,148;
342      --color-background-secondary: 245,245,245;
343  		
344  	  --gradient-background: #49a594;
345  		
346  		--color-foreground: 255,255,255;
347  		--color-foreground-secondary: 255,255,255;
348      --color-heading: 255,255,255;
349  		--color-button: 255,255,255;
350  		--color-button-text: 34,34,34;
351  		--color-outline-button: 255,255,255;
352      --color-button-hover: 255, 255, 255;
353      --color-button-text-hover: 34, 34, 34;
354  		--color-border: 222,222,222;
355  		--color-price-sale: 255,255,255;
356  		--color-price-regular: 255,255,255;
357  		--color-form-field: 255,255,255;
358  		--color-form-field-text: 0,0,0;
359  		--color-tooltip: 255,255,255;
360  		--color-tooltip-text: 34,34,34;
361  	}
362  
363.m-color-badge-sale {
364      --color-background: 218,63,63;
365      --color-background-secondary: 245,245,245;
366  		
367  	  --gradient-background: #da3f3f;
368  		
369  		--color-foreground: 255,255,255;
370  		--color-foreground-secondary: 255,255,255;
371      --color-heading: 255,255,255;
372  		--color-button: 255,255,255;
373  		--color-button-text: 34,34,34;
374  		--color-outline-button: 255,255,255;
375      --color-button-hover: 255, 255, 255;
376      --color-button-text-hover: 34, 34, 34;
377  		--color-border: 222,222,222;
378  		--color-price-sale: 255,255,255;
379  		--color-price-regular: 255,255,255;
380  		--color-form-field: 255,255,255;
381  		--color-form-field-text: 0,0,0;
382  		--color-tooltip: 255,255,255;
383  		--color-tooltip-text: 34,34,34;
384  	}
385  
386.m-color-scheme-cee058e4-58e3-46aa-9af9-219dadc79066 {
387      --color-background: 244,244,244;
388      --color-background-secondary: 245,245,245;
389  		
390  	  --gradient-background: #f4f4f4;
391  		
392  		--color-foreground: 34,34,34;
393  		--color-foreground-secondary: 102,102,102;
394      --color-heading: 34,34,34;
395  		--color-button: 0,0,0;
396  		--color-button-text: 255,255,255;
397  		--color-outline-button: 0,0,0;
398      --color-button-hover: 34, 34, 34;
399      --color-button-text-hover: 255, 255, 255;
400  		--color-border: 238,238,238;
401  		--color-price-sale: 232,78,78;
402  		--color-price-regular: 0,0,0;
403  		--color-form-field: 242,242,242;
404  		--color-form-field-text: 0,0,0;
405  		--color-tooltip: 34,34,34;
406  		--color-tooltip-text: 255,255,255;
407  	}
408  
409.m-color-scheme-09e5b5b4-774c-4b6c-8025-416ced49cc74 {
410      --color-background: 223,248,239;
411      --color-background-secondary: 245,245,245;
412  		
413  	  --gradient-background: #dff8ef;
414  		
415  		--color-foreground: 34,34,34;
416  		--color-foreground-secondary: 102,102,102;
417      --color-heading: 34,34,34;
418  		--color-button: 0,0,0;
419  		--color-button-text: 255,255,255;
420  		--color-outline-button: 0,0,0;
421      --color-button-hover: 34, 34, 34;
422      --color-button-text-hover: 255, 255, 255;
423  		--color-border: 238,238,238;
424  		--color-price-sale: 232,78,78;
425  		--color-price-regular: 0,0,0;
426  		--color-form-field: 255,255,255;
427  		--color-form-field-text: 0,0,0;
428  		--color-tooltip: 34,34,34;
429  		--color-tooltip-text: 255,255,255;
430  	}
431  
432  .m-color-default, .m-color-dark, .m-color-footer, .m-color-badge-hot, .m-color-badge-new, .m-color-badge-sale, .m-color-scheme-cee058e4-58e3-46aa-9af9-219dadc79066, .m-color-scheme-09e5b5b4-774c-4b6c-8025-416ced49cc74 {
433  	color: rgb(var(--color-foreground));
434  	background-color: rgb(var(--color-background));
435  }:root {     /* ANIMATIONS */  	--m-duration-short: .1s;     --m-duration-default: .25s;     --m-duration-long: .5s;     --m-duration-image: .65s;     --m-duration-animate: 1s;     --m-animation-duration: 600ms;     --m-animation-fade-in-up: m-fade-in-up var(--m-animation-duration) cubic-bezier(0, 0, 0.3, 1) forwards;     --m-animation-fade-in-left: m-fade-in-left var(--m-animation-duration) cubic-bezier(0, 0, 0.3, 1) forwards;     --m-animation-fade-in-right: m-fade-in-right var(--m-animation-duration) cubic-bezier(0, 0, 0.3, 1) forwards;     --m-animation-fade-in-left-rtl: m-fade-in-left-rtl var(--m-animation-duration) cubic-bezier(0, 0, 0.3, 1) forwards;     --m-animation-fade-in-right-rtl: m-fade-in-right-rtl var(--m-animation-duration) cubic-bezier(0, 0, 0.3, 1) forwards;     --m-animation-fade-in: m-fade-in calc(var(--m-animation-duration) * 2) cubic-bezier(0, 0, 0.3, 1);     --m-animation-zoom-fade: m-zoom-fade var(--m-animation-duration) ease forwards;  	/* BODY */  	--base-line-height: 28;   /* INPUTS */   --inputs-border-width: 1px;  	--inputs-radius: 5px;  	/* BUTTON */  	--btn-letter-spacing: 1px;  	--btn-border-radius: 0px;  	--btn-border-width: 1px;  	--btn-line-height: 23px;  	  	--btn-text-transform: uppercase;  	  	/* COUNT BUBBLE */  	--color-cart-wishlist-count: #ffffff;  	--bg-cart-wishlist-count: #da3f3f;  	/* OVERLAY */  	--color-image-overlay: #000000;  	--opacity-image-overlay: 0.2;  	/* Notification */  	--color-success: 58,135,53;  	--color-warning: 210,134,26;    --color-error: 218, 63, 63;    --color-error-bg: #fbeaea;    --color-warning-bg: #faecd7;    --color-success-bg: #d1eccf;  	/* CUSTOM COLOR */  	--text-black: 0,0,0;  	--text-white: 255,255,255;  	--bg-black: 0,0,0;  	--bg-white: 255,255,255;  	--rounded-full: 9999px;  	--bg-card-placeholder: rgba(243,243,243,1);  	--arrow-select-box: url(//modern-letter.com/cdn/shop/t/10/assets/ar-down.svg?v=92728264558441377851784623194);  	/* FONT SIZES */  	--font-base-size: 16;  	--font-btn-size: 17px;  	--font-btn-weight: 700;  	--font-h1-desktop: 60;  	--font-h1-tablet: 42;  	--font-h1-mobile: 36;  	--font-h2-desktop: 42;  	--font-h2-tablet: 33;  	--font-h2-mobile: 29;  	--font-h3-desktop: 36;  	--font-h3-tablet: 28;  	--font-h3-mobile: 25;  	--font-h4-desktop: 24;  	--font-h4-tablet: 19;  	--font-h4-mobile: 19;  	--font-h5-desktop: 18;  	--font-h5-mobile: 16;  	--font-h6-desktop: 16;  	--font-h6-mobile: 16;  	--heading-letter-spacing: 0px;   --arrow-down-url: url(//modern-letter.com/cdn/shop/t/10/assets/arrow-down.svg?v=157552497485556416461784623194);   --arrow-down-white-url: url(//modern-letter.com/cdn/shop/t/10/assets/arrow-down-white.svg?v=70535736727834135531784623194);   --product-title-line-clamp: unset;  	--spacing-sections-desktop: 0px;   --spacing-sections-laptop: 0px;   --spacing-sections-tablet: 0px;   --spacing-sections-mobile: 0px;  	/* LAYOUT */  	--container-width: 1200px;   --fluid-container-width: 1420px;   --fluid-container-offset: 65px;   /* CORNER RADIUS */   --blocks-radius: 0px;   --medium-blocks-radius: 0px;   --pcard-radius: 0px;  }
436</style><link rel="stylesheet" href="//modern-letter.com/cdn/shop/t/10/assets/cart.css?v=9189454619990308861784623194" media="print" onload="this.media='all'">
437<noscript><link href="//modern-letter.com/cdn/shop/t/10/assets/cart.css?v=9189454619990308861784623194" rel="stylesheet" type="text/css" media="all" /></noscript><link href="//modern-letter.com/cdn/shop/t/10/assets/vendor.css?v=78734522753772538311784623194" rel="stylesheet" type="text/css" media="all" /><link rel="stylesheet" href="//modern-letter.com/cdn/shop/t/10/assets/custom-style.css?v=68377333970908838601784623194" media="print" onload="this.media='all'">
438<link rel="stylesheet" href="//modern-letter.com/cdn/shop/t/10/assets/custom.css?v=69374957979202284171784623194" media="print" onload="this.media='all'">
439<noscript><link href="//modern-letter.com/cdn/shop/t/10/assets/custom-style.css?v=68377333970908838601784623194" rel="stylesheet" type="text/css" media="all" /></noscript>
440<noscript><link href="//modern-letter.com/cdn/shop/t/10/assets/custom.css?v=69374957979202284171784623194" rel="stylesheet" type="text/css" media="all" /></noscript><style data-shopify>.m-topbar a[href*="pinterest"],.m-topbar a[href*="twitter"], .m-topbar a[href*="snapchat"], .m-topbar a[href*="youtube"],.m-topbar a[href*="tiktok"]  {	display: none;}body .m-product-card__tag-name {  font-size: 12px;  font-weight: 500;  text-transform: capitalize;  padding: 4px 10px;  border-radius: 40px;}.m-icon-box--small {  border-top: 1px solid rgb(var(--color-border));}
440.m-icon-box--small .m-icon-box__heading {  line-height: 26px;  font-size: 18px;  margin-bottom: 6px;}body .m-footer--block .social-media-links {  gap: 12px;  margin: 0;  padding: 5px 0;}body .m-footer--block .social-media-links a {  color: #222;  width: 48px;  height: 48px;  padding: 0;  display: inline-flex;  align-items: center;  justify-content: center;  border-radius: 50%;  background-color: #E9E9E9;  transition: all .3s;}body .m-footer--block .social-media-links a:hover {  background-color: #222;  color: #fff;  box-shadow: 0 0 0 0.2rem #222;}/* Mobile H1 responsive sizing */@media (max-width: 768px) {  h1 {    font-size: 24px !important;  }}
441</style>
442
443
444<script src="//modern-letter.com/cdn/shop/t/10/assets/product-list.js?v=133975944838759569291784623194" defer="defer"></script>
vendor: 1 bytes, line 444
444
445<script src="//modern-letter.com/cdn/shop/t/10/assets/vendor.js?v=63293047395344299101784623194" defer="defer"></script>
445
446    
446<script src="//modern-letter.com/cdn/shop/t/10/assets/theme-global.js?v=89657562916315813401784623194" defer="defer"></script>
446<script src="//modern-letter.com/cdn/shop/t/10/assets/animations.js?v=155369821993258477171784623194" defer="defer"></script>
446<script>window.performance && window.performance.mark && window.performance.mark('shopify.content_for_header.start');</script>
446<meta name="google-site-verification" content="MF6PZk_f-BVD1fAWev_tpNir2eDXtwcGiVkTVmBi-Vo">
447<meta id="shopify-digital-wallet" name="shopify-digital-wallet" content="/89243746638/digital_wallets/dialog">
448<link rel="ucp" href="/.well-known/ucp" version="2026-08-25"><link rel="alternate" hreflang="x-default" href="https://modern-letter.com/">
449<link rel="alternate" hreflang="fr" href="https://modern-letter.com/">
450<link rel="alternate" hreflang="en" href="https://modern-letter.com/en">
451<script async="async" src="/checkouts/internal/preloads.js?locale=fr-US"></script>
vendor: 1 bytes, line 451
451
452<script id="shopify-features" type="application/json">{"accessToken":"51b0c597f77f73860343ef6b9d759a8e","betas":["rich-media-storefront-analytics"],"domain":"modern-letter.com","predictiveSearch":true,"shopId":89243746638,"locale":"fr"}</script>
vendor: 1 bytes, line 452
452
453<script>var Shopify = Shopify || {};
454Shopify.shop = "boutique-klaviyo.myshopify.com";
455Shopify.locale = "fr";
456Shopify.currency = {"active":"EUR","rate":"1.0"};
457Shopify.country = "US";
458Shopify.theme = {"name":"The Modern Letter - 07\/2026","id":200571322702,"schema_name":"Minimog - OS 2.0","schema_version":"5.8.0","theme_store_id":null,"role":"main"};
459Shopify.theme.handle = "null";
460Shopify.theme.style = {"id":null,"handle":null};
461Shopify.cdnHost = "modern-letter.com/cdn";
462Shopify.routes = Shopify.routes || {};
463Shopify.routes.root = "/";
464Shopify.shopJsCdnBaseUrl = "https://cdn.shopify.com/shopifycloud/shop-js";
465Shopify.SignInWithShop = Shopify.SignInWithShop || {};
466Shopify.SignInWithShop.User = Shopify.SignInWithShop.User || {};
467Shopify.SignInWithShop.User.recognized = false;</script>
vendor: 1 bytes, line 467
467
468<script type="module">!function(o){(o.Shopify=o.Shopify||{}).modules=!0}(window);</script>
vendor: 1 bytes, line 468
468
469<script>!function(o){function n(){var o=[];function n(){o.push(Array.prototype.slice.apply(arguments))}return n.q=o,n}var t=o.Shopify=o.Shopify||{};t.loadFeatures=n(),t.autoloadFeatures=n()}(window);</script>
vendor: 1 bytes, line 469
469
470<script>
471  window.Shopify = window.Shopify || {};
472  window.Shopify.SignInWithShop = window.Shopify.SignInWithShop || {};
473  window.Shopify.SignInWithShop.assetMetrics = { sampleRate: 0.25 };
474  window.Shopify.SignInWithShop.eligible = true;
475</script>
vendor: 1 bytes, line 475
475
476<script id="shop-js-analytics" type="application/json">{"pageType":"index"}</script>
vendor: 1 bytes, line 476
476
477<script defer="defer" async type="module" src="https://cdn.shopify.com/shopifycloud/shop-js/modules/v2/loader.init-shop-cart-sync.fr.esm.js"></script>
vendor: 1 bytes, line 477
477
478<script type="module">
479  await import("https://cdn.shopify.com/shopifycloud/shop-js/modules/v2/loader.init-shop-cart-sync.fr.esm.js");
480
481  window.Shopify.SignInWithShop?.initShopCartSync?.({"fedCMEnabled":true,"windoidEnabled":true});
482
483</script>
vendor: 1 bytes, line 483
483
484<script>
485  window.Shopify = window.Shopify || {};
486  if (!window.Shopify.featureAssets) window.Shopify.featureAssets = {};
487  window.Shopify.featureAssets['shop-js'] = {"avatar":["modules/v2/loader.avatar.fr.esm.js"],"checkout-modal":["modules/v2/loader.checkout-modal.fr.esm.js"],"init-customer-accounts-sign-up":["modules/v2/loader.init-customer-accounts-sign-up.fr.esm.js"],"init-customer-accounts":["modules/v2/loader.init-customer-accounts.fr.esm.js"],"init-fed-cm":["modules/v2/loader.init-fed-cm.fr.esm.js"],"init-shop-cart-sync":["modules/v2/loader.init-shop-cart-sync.fr.esm.js"],"init-shop-email-lookup-coordinator":["modules/v2/loader.init-shop-email-lookup-coordinator.fr.esm.js"],"init-shop-for-new-customer-accounts":["modules/v2/loader.init-shop-for-new-customer-accounts.fr.esm.js"],"init-shop-user-recognition":["modules/v2/loader.init-shop-user-recognition.fr.esm.js"],"init-windoid":["modules/v2/loader.init-windoid.fr.esm.js"],"lead-capture":["modules/v2/loader.lead-capture.fr.esm.js"],"listener":["modules/v2/loader.listener.fr.esm.js"],"pay-button":["modules/v2/loader.pay-button.fr.esm.js"],"payment-terms":["modules/v2/loader.payment-terms.fr.esm.js"],"shop-button":["modules/v2/loader.shop-button.fr.esm.js"],"shop-cart-sync":["modules/v2/loader.shop-cart-sync.fr.esm.js"],"shop-cash-offers":["modules/v2/loader.shop-cash-offers.fr.esm.js"],"shop-follow-button":["modules/v2/loader.shop-follow-button.fr.esm.js"],"shop-login-button":["modules/v2/loader.shop-login-button.fr.esm.js"],"shop-login":["modules/v2/loader.shop-login.fr.esm.js"],"shop-toast-manager":["modules/v2/loader.shop-toast-manager.fr.esm.js"],"shop-user-recognition":["modules/v2/loader.shop-user-recognition.fr.esm.js"]};
488</script>
vendor: 1 bytes, line 488
488
489<script>(function() {
490  var isLoaded = false;
491  function asyncLoad() {
492    if (isLoaded) return;
493    isLoaded = true;
494    var urls = ["https:\/\/loox.io\/widget\/mlZ8CdKwb4\/loox.1784874952879.js?shop=boutique-klaviyo.myshopify.com"];
495    for (var i = 0; i < urls.length; i++) {
496      var s = document.createElement('script');
497      s.type = 'text/javascript';
498      s.async = true;
499      s.src = urls[i];
500      var x = document.getElementsByTagName('script')[0];
501      x.parentNode.insertBefore(s, x);
502    }
503  };
504  if(window.attachEvent) {
505    window.attachEvent('onload', asyncLoad);
506  } else {
507    window.addEventListener('load', asyncLoad, false);
508  }
509})();</script>
vendor: 1 bytes, line 509
509
510<script id="__st">var __st={"a":89243746638,"offset":-14400,"reqid":"cb68317d-70cf-4471-912c-7f8a3d0f2b7a-1791084678","pageurl":"modern-letter.com\/","u":"2b8f633c8470","p":"home"};</script>
vendor: 1 bytes, line 510
510
511<script>window.ShopifyPaypalV4VisibilityTracking = true;</script>
vendor: 1 bytes, line 511
511
512<script id="captcha-bootstrap">!function(){'use strict';const t='contact',e='account',n='new_comment',o=[[t,t],['blogs',n],['comments',n],[t,'customer']],c=[[e,'customer_login'],[e,'guest_login'],[e,'recover_customer_password'],[e,'create_customer']],r=t=>t.map((([t,e])=>`form[action*='/${t}']:not([data-nocaptcha='true']) input[name='form_type'][value='${e}']`)).join(','),a=t=>()=>t?[...document.querySelectorAll(t)].map((t=>t.form)):[];function s(){const t=[...o],e=r(t);return a(e)}const i='password',u='form_key',d=['recaptcha-v3-token','g-recaptcha-response','h-captcha-response',i],f=()=>{try{return window.sessionStorage}catch{return}},m='__shopify_v',_=t=>t.elements[u];function p(t,e,n=!1){try{const o=window.sessionStorage,c=JSON.parse(o.getItem(e)),{data:r}=function(t){const{data:e,action:n}=t;return t[m]||n?{data:e,action:n}:{data:t,action:n}}(c);for(const[e,n]of Object.entries(r))t.elements[e]&&(t.elements[e].value=n);n&&o.removeItem(e)}catch(o){console.error('form repopulation failed',{error:o})}}const l='form_type',E='cptcha';function T(t){t.dataset[E]=!0}const w=window,h=w.document,L='Shopify',v='ce_forms',y='captcha';let A=!1;((t,e)=>{const n=(g='f06e6c50-85a8-45c8-87d0-21a2b65856fe',I='https://cdn.shopify.com/shopifycloud/storefront-forms-hcaptcha/ce_storefront_forms_captcha_hcaptcha.v1.5.3.iife.js',D={infoText:'Protégé par hCaptcha',privacyText:'Confidentialité',termsText:'Conditions'},(t,e,n)=>{const o=w[L][v],c=o.bindForm;if(c)return c(t,g,e,D).then(n);var r;o.q.push([[t,g,e,D],n]),r=I,A||(h.body.append(Object.assign(h.createElement('script'),{id:'captcha-provider',async:!0,src:r})),A=!0)});var g,I,D;w[L]=w[L]||{},w[L][v]=w[L][v]||{},w[L][v].q=[],w[L][y]=w[L][y]||{},w[L][y].protect=function(t,e){n(t,void 0,e),T(t)},Object.freeze(w[L][y]),function(t,e,n,w,h,L){const[v,y,A,g]=function(t,e,n){const i=e?o:[],u=t?c:[],d=[...i,...u],f=r(d),m=r(i),_=r(d.filter((([t,e])=>n.includes(e))));return[a(f),a(m),a(_),s()]}(w,h,L),I=t=>{const e=t.target;return e instanceof HTMLFormElement?e:e&&e.form},D=t=>v().includes(t);t.addEventListener('submit',(t=>{const e=I(t);if(!e)return;const n=D(e)&&!e.dataset.hcaptchaBound&&!e.dataset.recaptchaBound,o=_(e),c=g().includes(e)&&(!o||!o.value);(n||c)&&t.preventDefault(),c&&!n&&(function(t){try{if(!f())return;!function(t){const e=f();if(!e)return;const n=_(t);if(!n)return;const o=n.value;o&&e.removeItem(o)}(t);const e=Array.from(Array(32),(()=>Math.random().toString(36)[2])).join('');!function(t,e){_(t)||t.append(Object.assign(document.createElement('input'),{type:'hidden',name:u})),t.elements[u].value=e}(t,e),function(t,e){const n=f();if(!n)return;const o=[...t.querySelectorAll(`input[type='${i}']`)].map((({name:t})=>t)),c=[...d,...o],r={};for(const[a,s]of new FormData(t).entries())c.includes(a)||(r[a]=s);n.setItem(e,JSON.stringify({[m]:1,action:t.action,data:r}))}(t,e)}catch(e){console.error('failed to persist form',e)}}(e),e.submit())}));const S=(t,e)=>{t&&!t.dataset[E]&&(n(t,e.some((e=>e===t))),T(t))};for(const o of['focusin','change'])t.addEventListener(o,(t=>{const e=I(t);D(e)&&S(e,y())}));const B=e.get('form_key'),M=e.get(l),P=B&&M;t.addEventListener('DOMContentLoaded',(()=>{const t=y();if(P)for(const e of t)e.elements[l].value===M&&p(e,B);[...new Set([...A(),...v().filter((t=>'true'===t.dataset.shopifyCaptcha))])].forEach((e=>S(e,t)))}))}(h,new URLSearchParams(w.location.search),n,t,e,['guest_login'])})(!0,!0)}();</script>
vendor: 1 bytes, line 512
512
513<script integrity="sha256-JjoPp5ZfB1sSAs5SQaol1x1GgvveM+BgmRzyDexInEQ=" data-source-attribution="shopify.loadfeatures" defer="defer" src="//modern-letter.com/cdn/shopifycloud/storefront/assets/storefront/load_feature-1bd60354.js" crossorigin="anonymous"></script>
vendor: 1 bytes, line 513
513
514<script>(function () {var userAgent = navigator.userAgent;var platform = navigator.platform;var maxTouchPoints = navigator.maxTouchPoints || 0;var isIOS = /iPad|iPhone|iPod/.test(platform) || (platform === 'MacIntel' && maxTouchPoints > 1);var isMacSafari = platform.indexOf('Mac') === 0 && /Safari/.test(userAgent) && !/Chrome|Chromium|CriOS|FxiOS|Edg|OPR|Android/.test(userAgent);var isAppleSafari = isIOS || isMacSafari;if (isAppleSafari) {fetch('/sf_private_access_tokens' + location.search).catch(function () {});}function browserMajorVersion(pattern) {var match = userAgent.match(pattern);return match ? parseInt(match[1], 10) : null;}function shouldLoadAutosizesPolyfill() {if (!window.PerformanceObserver?.supportedEntryTypes?.includes('paint')) {return false;}var chromeVersion = browserMajorVersion(/Chrome\/(\d+)/);if (chromeVersion !== null) {return chromeVersion < 126;}var firefoxVersion = browserMajorVersion(/Firefox\/(\d+)/);if (firefoxVersion !== null) {return firefoxVersion < 150;}var safariVersion = isAppleSafari ? browserMajorVersion(/Version\/(\d+).*Safari\//) : null;if (safariVersion !== null) {return safariVersion < 27;}return true;}if (shouldLoadAutosizesPolyfill()) {var autosizesScript = document.createElement('script');autosizesScript.async = true;autosizesScript.crossOrigin = 'anonymous';autosizesScript.src = "//modern-letter.com/cdn/shopifycloud/storefront/assets/storefront/autosizes-84416378.js";(document.head || document.documentElement).appendChild(autosizesScript);}window.ShopifyAnalytics = window.ShopifyAnalytics || {};window.ShopifyAnalytics.performance = window.ShopifyAnalytics.performance || {};(function () {var LONG_FRAME_THRESHOLD = 50;var longAnimationFrames = [];var activeRafId = null;function collectLongFrames() {var previousTime = null;function rafMonitor(now) {if (activeRafId === null) {return;}var delta = now - previousTime;if (delta > LONG_FRAME_THRESHOLD) {longAnimationFrames.push({startTime: previousTime,endTime: now,});}previousTime = now;activeRafId = requestAnimationFrame(rafMonitor);}previousTime = performance.now();activeRafId = requestAnimationFrame(rafMonitor);}if (!window.PerformanceObserver?.supportedEntryTypes?.includes('long-animation-frame')) {collectLongFrames();var timeoutId = setTimeout(function () {cancelAnimationFrame(activeRafId);}, 10000);window.ShopifyAnalytics.performance.getLongAnimationFrames = function (stopCollection) {if (stopCollection === undefined) {stopCollection = false;}if (stopCollection) {clearTimeout(timeoutId);cancelAnimationFrame(activeRafId);}return longAnimationFrames;};}})();})();</script>
514<script id="shopify-origin-trials" async="async" integrity="sha256-qJbe/jEZBHtr5W/BlA2cKAz3vkXu6vJQyLjgvgCC86g=" src="//cdn.shopify.com/shopifycloud/storefront/assets/storefront/origin_trials-318ab40a.js" crossorigin="anonymous" onload="window.__shopifyOriginTrialsDone = true" onerror="window.__shopifyOriginTrialsDone = true"></script>
vendor: 1 bytes, line 514
514
515<script>
516  window.Shopify = window.Shopify || {};
517  window.Shopify.MCP = window.Shopify.MCP || {};
518  window.Shopify.MCP.enabled = true;
519  window.Shopify.MCP.shop = "boutique-klaviyo.myshopify.com";
520  window.Shopify.MCP.mcpEndpoint = "https:\/\/modern-letter.com\/api\/mcp";
521  window.Shopify.MCP.tools = [{"name":"search_shop_policies_and_faqs","description":"Used to get facts about the stores policies, products, or services.\nSome examples of questions you can ask are:\n  - What is your return policy?\n  - What is your shipping policy?\n  - What is your phone number?\n  - What are your hours of operation?\"\n","inputSchema":{"$schema":"https:\/\/json-schema.org\/draft\/2020-12\/schema","type":"object","properties":{"query":{"type":"string","description":"A natural language query."},"context":{"type":"string","description":"Additional information about the request such as user demographics, mood, location, or other relevant details that could help in tailoring the response appropriately."}},"required":["query"]}}];
522</script>
vendor: 1 bytes, line 522
522
523<script>(()=>{var d="shopify:webmcp_adapter_loaded",n=Symbol.for("shopify.webmcp_adapter_loading");function s(c,a,{win:r=window,doc:o=document}={}){function p(){try{return r.localStorage.getItem(d)==="true"}catch{return!1}}function l(){try{r.localStorage.setItem(d,"true")}catch{}}function u(){return typeof(o.modelContext||r.navigator?.modelContext)?.registerTool=="function"}function f(){if(r[n]||!u())return;let t=o.head||o.getElementsByTagName("head")[0];if(!t)return;let e=o.createElement("script");e.type="module",e.crossOrigin="anonymous",a&&(e.integrity=a),e.src=c,e.addEventListener("load",l,{once:!0}),e.addEventListener("error",()=>{r[n]=!1},{once:!0}),t.appendChild(e),r[n]=!0}function _(t){let e=o.getElementById("shopify-origin-trials");if(!e||r.__shopifyOriginTrialsDone){t();return}e.addEventListener("load",t,{once:!0}),e.addEventListener("error",t,{once:!0})}function i(){_(()=>r.setTimeout(f,0))}function m(){o.addEventListener("DOMContentLoaded",i,{once:!0})}p()?i():m()}s("\/\/modern-letter.com\/cdn\/shopifycloud\/storefront\/assets\/storefront\/webmcp-c6b62ece.js","sha256-ke4DDuBjdvea3vxLWxHc9E9nq8zihuG4IfYEGbb77ys=");})();
524</script>
vendor: 1 bytes, line 524
524
525<script data-source-attribution="shopify.dynamic_checkout.dynamic.init">var Shopify=Shopify||{};Shopify.PaymentButton=Shopify.PaymentButton||{isStorefrontPortableWallets:!0,init:function(){window.Shopify.PaymentButton.init=function(){};var t=document.createElement("script");t.src="https://modern-letter.com/cdn/shopifycloud/portable-wallets/latest/portable-wallets.fr.js",t.type="module",document.head.appendChild(t)}};
526</script>
vendor: 1 bytes, line 526
526
527<script data-source-attribution="shopify.dynamic_checkout.buyer_consent">
528  function portableWalletsHideBuyerConsent(e){var t=document.getElementById("shopify-buyer-consent"),n=document.getElementById("shopify-subscription-policy-button");t&&n&&(t.classList.add("hidden"),t.setAttribute("aria-hidden","true"),n.removeEventListener("click",e))}function portableWalletsShowBuyerConsent(e){var t=document.getElementById("shopify-buyer-consent"),n=document.getElementById("shopify-subscription-policy-button");t&&n&&(t.classList.remove("hidden"),t.removeAttribute("aria-hidden"),n.addEventListener("click",e))}window.Shopify?.PaymentButton&&(window.Shopify.PaymentButton.hideBuyerConsent=portableWalletsHideBuyerConsent,window.Shopify.PaymentButton.showBuyerConsent=portableWalletsShowBuyerConsent);
529</script>
vendor: 1 bytes, line 529
529
530<script data-source-attribution="shopify.dynamic_checkout.cart.bootstrap">document.addEventListener("DOMContentLoaded",(function(){function t(){return document.querySelector("shopify-accelerated-checkout-cart, shopify-accelerated-checkout")}if(t())Shopify.PaymentButton.init();else{new MutationObserver((function(e,n){t()&&(Shopify.PaymentButton.init(),n.disconnect())})).observe(document.body,{childList:!0,subtree:!0})}}));
531</script>
531
532
533<script id="shopify-cfh-end">window.performance && window.performance.mark && window.performance.mark('shopify.content_for_header.end');</script>
533
534
535    
535<script>
536      document.documentElement.className = document.documentElement.className.replace('no-js', 'js');
537      if (Shopify.designMode) {
538        document.documentElement.classList.add('shopify-design-mode');
539      }
540    </script>
540
541    
541<script>window.MinimogTheme = {};window.MinimogLibs = {};window.MinimogStrings = {  addToCart: "Ajouter au panier",  soldOut: "Épuisé",  unavailable: "Indisponible",  inStock: "En stock",  lowStock: 'Stock faible',  inventoryQuantityHtml: '<span class ="m-product-inventory__quantity"> {{ quantity }} </span> en stock',  inventoryLowQuantityHtml: 'Seulement <span class ="m-product-inventory__quantity"> {{ quantity }} </span>',  checkout: "Vérifier",  viewCart: "Voir le panier",  cartRemove: "Retirer",  zipcodeValidate: "Le code postal ne peut pas être vide",  noShippingRate: "Il n\u0026#39;y a pas de tarifs d\u0026#39;expédition pour votre adresse.",  shippingRatesResult: "Nous avons trouvé {{count}} tarifs d\u0026#39;expédition pour votre adresse",  recommendTitle: "Recommandation pour vous",  shipping: "Expédition",  add: "Ajouter",  itemAdded: "Produit ajouté au panier avec succès",  requiredField: "Veuillez remplir tous les champs obligatoires (*) avant d\u0026#39;ajouter au panier !",  hours: "heures",  mins: "minutes",  outOfStock: "En rupture de stock",  sold: "Vendu",  available: "Disponible",  preorder: "Pré-commander",  sold_out_items_message: "Le produit est déjà épuisé.",  unitPrice: "Prix ​​unitaire",  unitPriceSeparator: "par",  cartError: "Une erreur s&#39;est produite lors de la mise à jour de votre panier. Veuillez réessayer.",  quantityError: "Pas assez d&#39;articles disponibles. Il ne reste que {{ quantity }}.' }}
541",  duplicateDiscountError: `Le code de réduction a déjà été appliqué à votre panier.`,   applyDiscountError: `Le code de réduction ne peut pas être appliqué à votre panier.`,  selectVariant: "Veuillez sélectionner une variante avant d&#39;ajouter le produit à votre panier.",  valideDateTimeDelivery: "Veuillez choisir l&#39;heure actuelle ou future."};window.MinimogThemeStyles = {  product: "https://modern-letter.com/cdn/shop/t/10/assets/product.css?v=125051813082444491211784623194"};window.MinimogThemeScripts = {  productModel: "https://modern-letter.com/cdn/shop/t/10/assets/product-model.js?v=74883181231862109891784623194",  productMedia: "https://modern-letter.com/cdn/shop/t/10/assets/product-media.js?v=162792397983317663931784623194",  variantsPicker: "https://modern-letter.com/cdn/shop/t/10/assets/variant-picker.js?v=66761027898496351631784623194",  productInfo: "https://modern-letter.com/cdn/shop/t/10/assets/product-info.js?v=164532907815921985711784623194"};window.MinimogSettings = {  design_mode: false,  requestPath: "\/",  template: "index",  templateName: "index",currency_code: "EUR",  money_format: "€{{amount_with_comma_separator}}",  base_url: window.location.origin + Shopify.routes.root,  money_with_currency_format: "€{{amount_with_comma_separator}} EUR",  theme: {    id: 200571322702,    name: "The Modern Letter - 07\/2026",    role: "main",    version: "5.8.0",    online_store_version: "2.0",    preview_url: "https://modern-letter.com?preview_theme_id=200571322702",  },  shop_domain: "https:\/\/modern-letter.com",  shop_locale: {    published: [{"shop_locale":{"locale":"fr","enabled":true,"primary":true,"published":true}},{"shop_locale":{"locale":"en","enabled":true,"primary":false,"published":true}}],    current: "fr",    primary: "fr",  },  routes: {    root: "\/",    cart: "\/cart",    product_recommendations_url: "\/recommendations\/products",    cart_add_url: '/cart/add',    cart_change_url: '/cart/change',    cart_update_url: '/cart/update',    predictive_search_url: '/search/suggest',    search_url: '/search'  },  hide_unavailable_product_options: true,  pcard_image_ratio: "3\/4",  cookie_consent_allow: "Allow cookies",  cookie_consent_message: "This website uses cookies to ensure you get the best experience on our website.",  cookie_consent_placement: "bottom",  cookie_consent_learnmore_link: "https:\/\/www.cookiesandyou.com\/",  cookie_consent_learnmore: "Learn more",  cookie_consent_theme: "black",  cookie_consent_decline: "Decline",  show_cookie_consent: false,  product_colors: "red: #FF6961,\nyellow: #FDDA76,\nblack: #000000,\nblack band: #000000,\nblue: #8DB4D2,\ngreen: #C1E1C1,\npurple: #B19CD9,\nsilver: #EEEEEF,\nwhite: #FFFFFF,\nbrown: #836953,\nlight brown: #B5651D,\ndark turquoise: #23cddc,\norange: #FFB347,\ntan: #E9D1BF,\nviolet: #B490B0,\npink: #FFD1DC,\ngrey: #E0E0E0,\nsky: #96BDC6,\npale leaf: #CCD4BF,\nlight blue: #b1c5d4,\ndark grey: #aca69f,\nbeige: #EBE6DB,\nbeige band: #EED9C4,\ndark blue: #063e66,\ncream: #F1F2E2,\nlight pink: #FBCFCD,\nmint: #bedce3,\ndark gray: #3A3B3C,\nrosy brown: #c4a287,\nlight grey:#D3D3D3,\ncopper: #B87333,\nrose gold: #ECC5C0,\nnight blue: #151B54,\ncoral: #FF7F50,\nlight purple: #C6AEC7,\nivy green: #5b7763,\nsand: #f2d2a9,\npale grey: #878785,\nlead: #6c6b6c,\nheathered cashew: #bdb59f,\ncoca: #c7babd,\nheathered oat: #d3c1aa,\njean blue: #515d6d,\npelican: #e1d6c5,\ntoasted coconut: #9c7b58,\nnavy: #484d5b,\nheathered blue: #3c3c3c,\nheathered green: #534d36,\nheathered grey: #555c62,\nkalamata: #808487,\nslate grey: #484d5b,\ncharcoal: #8b8b8b,\nheathered charcoal: #8b8b8b",  use_ajax_atc: false,  discount_code_enable: false,  enable_cart_drawer: false,  pcard_show_lowest_prices: false,  date_now: "2026\/10\/03 23:31:00-0400 (EDT)",  foxKitBaseUrl: "foxkit.app"};</script>
541
542
543    
544  <!-- BEGIN app block: shopify://apps/microsoft-clarity/blocks/clarity_js/31c3d126-8116-4b4a-8ba1-baeda7c4aeea -->
545<script type="text/javascript">
546  (function (c, l, a, r, i, t, y) {
547    c[a] = c[a] || function () { (c[a].q = c[a].q || []).push(arguments); };
548    t = l.createElement(r); t.async = 1; t.src = "https://www.clarity.ms/tag/" + i + "?ref=shopify";
549    y = l.getElementsByTagName(r)[0]; y.parentNode.insertBefore(t, y);
550
551    c.Shopify.loadFeatures([{ name: "consent-tracking-api", version: "0.1" }], error => {
552      if (error) {
553        console.error("Error loading Shopify features:", error);
554        return;
555      }
556
557      c[a]('consentv2', {
558        ad_Storage: c.Shopify.customerPrivacy.marketingAllowed() ? "granted" : "denied",
559        analytics_Storage: c.Shopify.customerPrivacy.analyticsProcessingAllowed() ? "granted" : "denied",
560        source: 101,
561      });
562    });
563
564    l.addEventListener("visitorConsentCollected", function (e) {
565      c[a]('consentv2', {
566        ad_Storage: e.detail.marketingAllowed ? "granted" : "denied",
567        analytics_Storage: e.detail.analyticsAllowed ? "granted" : "denied",
568        source: 101,
569      });
570    });
571  })(window, document, "clarity", "script", "w06irye4g7");
572</script>
572
573
574
575
576<!-- END app block --><!-- BEGIN app block: shopify://apps/klaviyo-email-marketing-sms/blocks/klaviyo-onsite-embed/2632fe16-c075-4321-a88b-50b567f42507 -->
577
578
579
580
581
582
583
584
585
586
587
588
589  
589<script async src="https://static.klaviyo.com/onsite/js/Rg9U7J/klaviyo.js?company_id=Rg9U7J"></script>
589
590  
590<script>!function(){if(!window.klaviyo){window._klOnsite=window._klOnsite||[];try{window.klaviyo=new Proxy({},{get:function(n,i){return"push"===i?function(){var n;(n=window._klOnsite).push.apply(n,arguments)}:function(){for(var n=arguments.length,o=new Array(n),w=0;w<n;w++)o[w]=arguments[w];var t="function"==typeof o[o.length-1]?o.pop():void 0,e=new Promise((function(n){window._klOnsite.push([i].concat(o,[function(i){t&&t(i),n(i)}]))}));return e}}})}catch(n){window.klaviyo=window.klaviyo||[],window.klaviyo.push=function(){var n;(n=window._klOnsite).push.apply(n,arguments)}}}}();</script>
590
591
592  
593
594
595
596
597  
597<script>
598    window.klaviyoReviewsProductDesignMode = false
599  </script>
599
600
601
602
603
604
605
606
607
608
609<!-- END app block --><link href="https://monorail-edge.shopifysvc.com" rel="dns-prefetch">
610<script>(function(){if ("sendBeacon" in navigator && "performance" in window) {try {var session_token_from_headers = performance.getEntriesByType('navigation')[0].serverTiming.find(x => x.name == '_s').description;} catch {var session_token_from_headers = undefined;}var session_cookie_matches = document.cookie.match(/_shopify_s=([^;]*)/);var session_token_from_cookie = session_cookie_matches && session_cookie_matches.length === 2 ? session_cookie_matches[1] : "";var session_token = session_token_from_headers || session_token_from_cookie || "";function handle_abandonment_event(e) {var entries = performance.getEntries().filter(function(entry) {return /monorail-edge.shopifysvc.com/.test(entry.name);});if (!window.abandonment_tracked && entries.length === 0) {window.abandonment_tracked = true;var currentMs = Date.now();var navigation_start = performance.timing.navigationStart;var payload = {shop_id: 89243746638,url: window.location.href,navigation_start,duration: currentMs - navigation_start,session_token,page_type: "index"};window.navigator.sendBeacon("https://monorail-edge.shopifysvc.com/v1/produce", JSON.stringify({schema_id: "online_store_buyer_site_abandonment/1.1",payload: payload,metadata: {event_created_at_ms: currentMs,event_sent_at_ms: currentMs}}));}}window.addEventListener('pagehide', handle_abandonment_event);}}());</script>
vendor: 1 bytes, line 610
610
611<script>
612  window.__TREKKIE_SHIM_QUEUE = window.__TREKKIE_SHIM_QUEUE || [];
613</script>
vendor: 1 bytes, line 613
613
614<script>(function(){var wpmLoader=function(){"use strict";var e=/Googlebot|Storebot-Google|bingbot|Baiduspider|YandexBot|DuckDuckBot|Slurp|facebookexternalhit|Twitterbot|LinkedInBot|Applebot|AdsBot-Google|Mediapartners-Google|APIs-Google|PetalBot|SemrushBot|AhrefsBot|MJ12bot|DotBot|Acunetix|PerplexityBot|Perplexity-User/i,t=/bytedance/i;function i(){try{var e=document.cookie;if(!e||"string"!=typeof e)return;for(var t=0,i=e.split(";");t<i.length;t++){var n=i[t],r=n.indexOf("=");if(-1!==r){var o=n.slice(0,r).trim();if(o){var a=void 0;try{a=decodeURIComponent(o)}catch(e){a=o}if("_shopify_s"===a){var d=n.slice(r+1).trim();try{return decodeURIComponent(d)}catch(e){return d}}}}}return}catch(e){return}}function n(e){try{"undefined"!=typeof console&&"function"==typeof console.warn&&console.warn(e)}catch(e){}}function r(e,t){return"string"==typeof e&&e.length>0&&e.length<=t?e:void 0}function o(e){var t;switch(null==(t=null==e?void 0:e.navigation)?void 0:t.type){case 0:return"navigate";case 1:return"reload";case 2:return"back_forward";default:return}}function a(){var e,t,i;try{var n=null==(i=null==(t=null==(e=self.ShopifyAnalytics)?void 0:e.lib)?void 0:t.trekkie)?void 0:i.state;return"awaiting-consent"===n||"initialized"===n?n:void 0}catch(e){return}}return function(d,s,u,l){var c=arguments.length>4&&void 0!==arguments[4]?arguments[4]:{};try{var p=c.trekkieShim;!0!==p&&"true"!==p||null!=window.__TREKKIE_SHIM_QUEUE||(window.__TREKKIE_SHIM_QUEUE=[])}catch(e){}var f,v,h,y,g=(v=(f={modern:/Edge?\/(1{2}[4-9]|1[2-9]\d|[2-9]\d{2}|\d{4,})\.\d+(\.\d+|)|Firefox\/(1{2}[4-9]|1[2-9]\d|[2-9]\d{2}|\d{4,})\.\d+(\.\d+|)|Chrom(ium|e)\/(9{2}|\d{3,})\.\d+(\.\d+|)|(Maci|X1{2}).+ Version\/(15\.\d+|(1[6-9]|[2-9]\d|\d{3,})\.\d+)([,.]\d+|)( \(\w+\)|)( Mobile\/\w+|) Safari\/|Chrome.+OPR\/(9{2}|\d{3,})\.\d+\.\d+|(CPU[ +]OS|iPhone[ +]OS|CPU[ +]iPhone|CPU IPhone OS|CPU iPad OS)[ +]+(15[._]\d+|(1[6-9]|[2-9]\d|\d{3,})[._]\d+)([._]\d+|)|Android:?[ /-](14[89]|1[5-9]\d|[2-9]\d{2}|\d{4,})(\.\d+|)(\.\d+|)|Android.+Firefox\/(15\d|1[6-9]\d|[2-9]\d{2}|\d{4,})\.\d+(\.\d+|)|Android.+Chrom(ium|e)\/(14[89]|1[5-9]\d|[2-9]\d{2}|\d{4,})\.\d+(\.\d+|)|SamsungBrowser\/([2-9]\d|\d{3,})\.\d+/,legacy:/Edge?\/(1[6-9]|[2-9]\d|\d{3,})\.\d+(\.\d+|)|Firefox\/(5[4-9]|[6-9]\d|\d{3,})\.\d+(\.\d+|)|Chrom(ium|e)\/(5[1-9]|[6-9]\d|\d{3,})\.\d+(\.\d+|)([\d.]+$|.*Safari\/(?![\d.]+ Edge\/[\d.]+$))|(Maci|X1{2}).+ Version\/(10\.\d+|(1[1-9]|[2-9]\d|\d{3,})\.\d+)([,.]\d+|)( \(\w+\)|)( Mobile\/\w+|) Safari\/|Chrome.+OPR\/(3[89]|[4-9]\d|\d{3,})\.\d+\.\d+|(CPU[ +]OS|iPhone[ +]OS|CPU[ +]iPhone|CPU IPhone OS|CPU iPad OS)[ +]+(10[._]\d+|(1[1-9]|[2-9]\d|\d{3,})[._]\d+)([._]\d+|)|Android:?[ /-](14[89]|1[5-9]\d|[2-9]\d{2}|\d{4,})(\.\d+|)(\.\d+|)|Mobile Safari.+OPR\/([89]\d|\d{3,})\.\d+\.\d+|Android.+Firefox\/(15\d|1[6-9]\d|[2-9]\d{2}|\d{4,})\.\d+(\.\d+|)|Android.+Chrom(ium|e)\/(14[89]|1[5-9]\d|[2-9]\d{2}|\d{4,})\.\d+(\.\d+|)|Android.+(UC? ?Browser|UCWEB|U3)[ /]?(15\.([5-9]|\d{2,})|(1[6-9]|[2-9]\d|\d{3,})\.\d+)\.\d+|SamsungBrowser\/(5\.\d+|([6-9]|\d{2,})\.\d+)|Android.+MQ{2}Browser\/(14(\.(9|\d{2,})|)|(1[5-9]|[2-9]\d|\d{3,})(\.\d+|))(\.\d+|)|K[Aa][Ii]OS\/(3\.\d+|([4-9]|\d{2,})\.\d+)(\.\d+|)/}).modern,h=f.legacy,(y=navigator.userAgent).match(e)?"bot":y.match(v)?"modern":y.match(h)?"legacy":y.match(t)?"bot":"unknown"),m=function(e){var t,i,n=r(e,128);try{var a=window.performance,d=null==(t=null==a?void 0:a.getEntriesByType)?void 0:t.call(a,"navigation")[0];if(!d)return{requestId:n,navigationType:o(a)};var s="type"in d?r(d.type,64):void 0,u="serverTiming"in d&&Array.isArray(d.serverTiming)?d.serverTiming:[];return{requestId:null!=n?n:r(null==(i=u.find(function(e){return"requestID"===e.name}))?void 0:i.description,128),navigationType:s}}catch(e){return{requestId:n}}}(c.requestId),w=function(e){var t=e.version,r=e.browserTarget,o=e.surface,a=e.shopId,d=e.monorailEndpoint,s=window.location.href;return{emit:function(e){var u=e.status,l=e.errorMsg,c=e.failureReason,p=e.useKeepaliveFallback,f=void 0!==p&&p,v=e.navigationType,h=e.pagehidePersisted,y=e.requestId,g=e.trekkieState;if(d){var m,w;try{var b=(new Date).getTime();m=JSON.stringify({metadata:{event_sent_at_ms:b},events:[{schema_id:"web_pixels_manager_load/3.3",payload:{version:t,bundle_target:r,page_url:s,status:u,surface:o,error_msg:l,failure_reason:c,navigation_type:v,pagehide_persisted:h,request_id:y,trekkie_state:g,shop_id:a,visit_token:i()},metadata:{event_created_at_ms:b}}]})}catch(e){return}try{if("function"==typeof window.navigator.sendBeacon&&-1===(w=window.navigator.userAgent).indexOf("iPhone; CPU iPhone OS 12_")&&-1===w.indexOf("iPad; CPU OS 12_")&&-1===w.indexOf("iPod touch; CPU iPhone OS 12_")&&window.navigator.sendBeacon.bind(window.navigator)(d,m))return}catch(e){}if(f)try{"function"==typeof window.fetch&&window.fetch(d,{method:"POST",headers:{"Content-Type":"text/plain"},body:m,keepalive:!0}
614).catch(function(){})}catch(e){}else try{var _=new XMLHttpRequest;_.open("POST",d,!0),_.setRequestHeader("Content-Type","text/plain"),_.send(m)}catch(e){n("[Web Pixels Manager] Got an unhandled error while logging to Monorail.")}}else n("[Web Pixels Manager] No Monorail endpoint provided, skipping logging.")}}}({version:u,browserTarget:g,surface:d.surface,shopId:d.shopId,monorailEndpoint:d.monorailEndpoint});if(Boolean(null==(_=null==(b=window.Shopify)?void 0:b.analytics)?void 0:_.replayQueue))w.emit({status:"setup-skipped",errorMsg:"replay queue already initialized."});else{var b,_;w.emit({status:"setup-started"}),window.Shopify=window.Shopify||{};var S=window.Shopify;S.analytics=S.analytics||{};var P=S.analytics;P.replayQueue=[],P.publish=function(e,t,i){return P.replayQueue.push([e,t,i]),!0};try{self.performance.mark("wpm:start")}catch(e){}var k,C="modern"===g?"modern":"legacy",E=(null!=l?l:{modern:"",legacy:""})[C],I=[(k={baseUrl:s,hashVersion:u,buildTarget:C}).baseUrl,"/wpm","/b",k.hashVersion,"modern"===k.buildTarget?"m":"l",".js"].join(""),O=!1,T=!1;try{c.browserTarget=g,function(){O=!0;try{window.addEventListener("pagehide",M)}catch(e){O=!1}}(),R(function(){try{R(x)}catch(e){D(e)}}),w.emit({status:"loading",requestId:m.requestId,navigationType:m.navigationType,trekkieState:a()})}catch(e){D(e)}}function U(){var e;if(q(),!function(){var e,t;return Boolean(null==(t=null==(e=window.Shopify)?void 0:e.analytics)?void 0:t.initialized)}()){var t,i,n;try{if("function"!=typeof(null==(e=window.webPixelsManager)?void 0:e.init))return void A();if(!(null!==(n=i=t=window.webPixelsManager.init(d))&&"function"!=typeof n&&Object(n)===n&&"publish"in i&&"function"==typeof i.publish&&"publishCustomEvent"in i&&"function"==typeof i.publishCustomEvent&&"visitor"in i&&"function"==typeof i.visitor))return void A()}catch(e){return void A(e)}var r=window.Shopify.analytics;r.replayQueue.forEach(function(e){var i=e[0],n=e[1],r=e[2];t.publishCustomEvent(i,n,r)}),r.replayQueue=[],r.publish=t.publishCustomEvent,r.visitor=t.visitor,r.initialized=!0}}function A(e){B("manager_api_unavailable",void 0===e?void 0:Q(e))}function x(){B("script_load_failed","".concat(I," has failed to load"))}function B(e,t){T||(T=!0,q(),w.emit({status:"failed",errorMsg:t,failureReason:e,requestId:m.requestId,navigationType:m.navigationType,trekkieState:a()}))}function M(e){O&&(q(),w.emit({status:"pagehide-while-loading",useKeepaliveFallback:!0,pagehidePersisted:e.persisted,requestId:m.requestId,navigationType:m.navigationType,trekkieState:a()}))}function q(){O=!1;try{window.removeEventListener("pagehide",M)}catch(e){}}function R(e){var t;!function(e){var t=e.src,i=e.async,n=void 0===i||i,r=e.onload,o=e.onerror,a=e.sri,d=e.scriptDataAttributes,s=void 0===d?{}:d,u=document.createElement("script"),l=document.querySelector("head"),c=document.querySelector("body");if(u.async=n,u.src=t,a&&(u.integrity=a,u.crossOrigin="anonymous"),s)for(var p in s)if(Object.prototype.hasOwnProperty.call(s,p))try{u.dataset[p]=String(s[p])}catch(e){}if(r&&u.addEventListener("load",r),o&&u.addEventListener("error",o),l)l.appendChild(u);else{if(!c)throw new Error("Did not find a head or body element to append the script");c.appendChild(u)}}({src:I,async:!0,onload:U,onerror:e,sri:(t=E,"string"==typeof t&&/^sha384-[A-Za-z0-9+/=]+$/.test(t)?E:""),scriptDataAttributes:c})}function D(e){B("script_append_failed",Q(e))}function Q(e){return e instanceof Error?e.message:"Unknown error"}}}();wpmLoader({shopId: 89243746638,storefrontBaseUrl: "https://modern-letter.com",extensionsBaseUrl: "https://extensions.shopifycdn.com/cdn/shopifycloud/web-pixels-manager",monorailEndpoint: "https://modern-letter.com/.well-known/shopify/monorail/unstable/produce_batch",surface: "storefront-renderer",enabledBetaFlags: ["4c64608a","16072cab","8450a54b","7ee89bf1"],webPixelsConfigList: [{"id":"3540910414","configuration":"{\"config\":\"{\\\"google_tag_ids\\\":[\\\"G-K3NWY78J86\\\",\\\"GT-P3NNC7MH\\\",\\\"AW-17027246249\\\"],\\\"target_country\\\":\\\"ZZ\\\",\\\"gtag_events\\\":[{\\\"type\\\":\\\"search\\\",\\\"action_label\\\":[\\\"G-K3NWY78J86\\\",\\\"AW-17027246249\\\"]},{\\\"type\\\":\\\"begin_checkout\\\",\\\"action_label\\\":[\\\"G-K3NWY78J86\\\",\\\"AW-17027246249\\\"]},{\\\"type\\\":\\\"remove_from_cart\\\",\\\"action_label\\\":\\\"G-K3NWY78J86\\\"},{\\\"type\\\":\\\"view_item\\\",\\\"action_label\\\":[\\\"G-K3NWY78J86\\\",\\\"MC-P7LTEH9VMY\\\",\\\"AW-17027246249\\\"]},{\\\"type\\\":\\\"purchase\\\",\\\"action_label\\\":[\\\"G-K3NWY78J86\\\",\\\"MC-P7LTEH9VMY\\\",\\\"AW-17027246249\\\"]},{\\\"type\\\":\\\"add_shipping_info\\\",\\\"action_label\\\":\\\"G-K3NWY78J86\\\"},{\\\"type\\\":\\\"page_view\\\",\\\"action_label\\\":[\\\"G-K3NWY78J86\\\",\\\"AW-17027246249\\\/flSDCJuA2MAcEKnRnLc_\\\",\\\"MC-P7LTEH9VMY\\\",\\\"AW-17027246249\\\"]},{\\\"type\\\":\\\"view_item_list\\\",\\\"action_label\\\":\\\"G-K3NWY78J86\\\"},{\\\"type\\\":\\\"add_payment_info\\\",\\\"action_label\\\":[\\\"G-K3NWY78J86\\\",\\\"AW-17027246249\\\"]},{\\\"type\\\":\\\"add_to_cart\\\",\\\"action_label\\\":[\\\"G-K3NWY78J86\\\",\\\"AW-17027246249\\\"]},{\\\"type\\\":\\\"view_cart\\\",\\\"action_label\\\":\\\"G-K3NWY78J86\\\"}],\\\"enable_monitoring_mode\\\":false}\"}","eventPayloadVersion":"v1","runtimeContext":"OPEN","scriptVersion":"a3321ca85cf5aaf6b57585fcd8d67b3a","type":"APP","apiClientId":1780363,"privacyPurposes":[],"dataSharingAdjustments":{"protectedCustomerApprovalScopes":["read_customer_address","read_customer_email","read_customer_name","read_customer_personal_data","read_customer_phone"],"dataSharingControls":["share_all_events"]},"dataSharingState":"optimized","enabledFlags":["9a3ed68a"]},{"id":"2972483918","configuration":"{\"projectId\":\"w06irye4g7\"}","eventPayloadVersion":"v1","runtimeContext":"STRICT","scriptVersion":"d8a2bb2ccbb513dc8e8b6937f4b8033e","type":"APP","apiClientId":240074326017,"privacyPurposes":[],"capabilities":["advanced_dom_events"],"dataSharingAdjustments":{"protectedCustomerApprovalScopes":["read_customer_personal_data"],"dataSharingControls":["share_all_events"]}
614,"dataSharingState":"unrestricted"},{"id":"2682290510","configuration":"{\"accountID\":\"Rg9U7J\",\"webPixelConfig\":\"eyJlbmFibGVBZGRlZFRvQ2FydEV2ZW50cyI6IHRydWV9\"}","eventPayloadVersion":"v1","runtimeContext":"STRICT","scriptVersion":"c63c5b72c8d77be5f2d27d14c081da38","type":"APP","apiClientId":123074,"privacyPurposes":["ANALYTICS","MARKETING"],"dataSharingAdjustments":{"protectedCustomerApprovalScopes":["read_customer_address","read_customer_email","read_customer_name","read_customer_personal_data","read_customer_phone"],"dataSharingControls":["share_all_events"]},"dataSharingState":"optimized","enabledFlags":["9a3ed68a"]},{"id":"2415296846","configuration":"{\"webPixelName\":\"Judge.me\"}","eventPayloadVersion":"v1","runtimeContext":"STRICT","scriptVersion":"8acc938b1a30dc7624e304493ca567d7","type":"APP","apiClientId":683015,"privacyPurposes":["ANALYTICS"],"dataSharingAdjustments":{"protectedCustomerApprovalScopes":["read_customer_email","read_customer_name","read_customer_personal_data","read_customer_phone"],"dataSharingControls":["share_all_events"]},"dataSharingState":"unrestricted"},{"id":"shopify-app-pixel","configuration":"{}","eventPayloadVersion":"v1","runtimeContext":"STRICT","scriptVersion":"0530","apiClientId":"shopify-pixel","type":"APP","privacyPurposes":["ANALYTICS","MARKETING"]},{"id":"shopify-custom-pixel","eventPayloadVersion":"v1","runtimeContext":"LAX","scriptVersion":"0530","apiClientId":"shopify-pixel","type":"CUSTOM","privacyPurposes":["ANALYTICS","MARKETING"]}],isMerchantRequest: false,initData: {"shop":{"name":"The Modern Letter","paymentSettings":{"currencyCode":"EUR"},"myshopifyDomain":"boutique-klaviyo.myshopify.com","countryCode":"FR","storefrontUrl":"https:\/\/modern-letter.com"},"customer":null,"cart":null,"checkout":null,"productVariants":[],"products":[],"purchasingCompany":null},},"https://modern-letter.com/cdn","5982071ew7ea472e3p69b68784m2150dfea",{"modern":"","legacy":""},{"trekkieShim":true,"agentContext":true,"apiClientId":"580111","facebookCapiEnabled":"false","themeId":"200571322702","themePublished":"true","eventMetadataId":"99da9166-8573-400e-8da8-718e4b527e8e","pageType":"home","shopId":"89243746638","storefrontBaseUrl":"https:\/\/modern-letter.com","extensionBaseUrl":"https:\/\/extensions.shopifycdn.com\/cdn\/shopifycloud\/web-pixels-manager","surface":"storefront-renderer","enabledBetaFlags":"[\"4c64608a\", \"16072cab\", \"8450a54b\", \"7ee89bf1\"]","isMerchantRequest":"false","hashVersion":"5982071ew7ea472e3p69b68784m2150dfea","publish":"custom","events":"[[\"page_viewed\",{}]]"});})();</script>
614<script>
615  window.ShopifyAnalytics = window.ShopifyAnalytics || {};
616  window.ShopifyAnalytics.meta = window.ShopifyAnalytics.meta || {};
617  window.ShopifyAnalytics.meta.currency = 'EUR';
618  var meta = {"page":{"pageType":"home","requestId":"cb68317d-70cf-4471-912c-7f8a3d0f2b7a-1791084678"}};
619  for (var attr in meta) {
620    window.ShopifyAnalytics.meta[attr] = meta[attr];
621  }
622</script>
vendor: 1 bytes, line 622
622
623<script class="analytics">
624  (function () {
625    var customDocumentWrite = function(content) {
626      var jquery = null;
627
628      if (window.jQuery) {
629        jquery = window.jQuery;
630      } else if (window.Checkout && window.Checkout.$) {
631        jquery = window.Checkout.$;
632      }
633
634      if (jquery) {
635        jquery('body').append(content);
636      }
637    };
638
639    var hasLoggedConversion = function(token) {
640      if (token) {
641        return document.cookie.indexOf('loggedConversion=' + token) !== -1;
642      }
643      return false;
644    }
645
646    var setCookieIfConversion = function(token) {
647      if (token) {
648        var twoMonthsFromNow = new Date(Date.now());
649        twoMonthsFromNow.setMonth(twoMonthsFromNow.getMonth() + 2);
650
651        document.cookie = 'loggedConversion=' + token + '; expires=' + twoMonthsFromNow;
652      }
653    }
654
655    var trekkie = window.ShopifyAnalytics.lib = window.trekkie = window.trekkie || [];
656    window.ShopifyAnalytics.lib.trekkie = window.trekkie;
657    if (trekkie.integrations) {
658      return;
659    }
660    trekkie.methods = [
661      'identify',
662      'page',
663      'ready',
664      'track',
665      'trackForm',
666      'trackLink'
667    ];
668    trekkie.factory = function(method) {
669      return function() {
670        var args = Array.prototype.slice.call(arguments);
671        args.unshift(method);
672        trekkie.push(args);
673        if (method == 'track' || method == 'page') {
674          var pageUrl;
675          try {
676            pageUrl = window.location.href;
677          } catch (e) {}
678          var pageReferrer;
679          try {
680            pageReferrer = document.referrer;
681          } catch (e) {}
682          try {
683            if (window.__TREKKIE_SHIM_QUEUE == null) {
684              window.__TREKKIE_SHIM_QUEUE = [];
685            }
686            window.__TREKKIE_SHIM_QUEUE.push({
687              from: 'trekkie-stub',
688              method: method,
689              args: args.slice(1),
690              pageContext: {
691                url: pageUrl,
692                referrer: pageReferrer
693              }
694            });
695          } catch (e) {
696            // no-op
697          }
698        }
699        return trekkie;
700      };
701    };
702    for (var i = 0; i < trekkie.methods.length; i++) {
703      var key = trekkie.methods[i];
704      trekkie[key] = trekkie.factory(key);
705    }
706    trekkie.load = function(config) {
707      trekkie.config = config || {};
708      trekkie.config.initialDocumentCookie = document.cookie;
709      var first = document.getElementsByTagName('script')[0];
710var script = document.createElement('script');
711script.type = 'text/javascript';
712script.onerror = function(e) {
713  var scriptFallback = document.createElement('script');
714  scriptFallback.type = 'text/javascript';
715  scriptFallback.onerror = function(error) {
716          var Monorail = {
717      produce: function produce(monorailDomain, schemaId, payload) {
718        var currentMs = new Date().getTime();
719        var event = {
720          schema_id: schemaId,
721          payload: payload,
722          metadata: {
723            event_created_at_ms: currentMs,
724            event_sent_at_ms: currentMs
725          }
726        };
727        return Monorail.sendRequest("https://" + monorailDomain + "/v1/produce", JSON.stringify(event));
728      },
729      sendRequest: function sendRequest(endpointUrl, payload) {
730        // Try the sendBeacon API
731        if (window && window.navigator && typeof window.navigator.sendBeacon === 'function' && typeof window.Blob === 'function' && !Monorail.isIos12()) {
732          var blobData = new window.Blob([payload], {
733            type: 'text/plain'
734          });
735
736          if (window.navigator.sendBeacon(endpointUrl, blobData)) {
737            return true;
738          } // sendBeacon was not successful
739
740        } // XHR beacon
741
742        var xhr = new XMLHttpRequest();
743
744        try {
745          xhr.open('POST', endpointUrl);
746          xhr.setRequestHeader('Content-Type', 'text/plain');
747          xhr.send(payload);
748        } catch (e) {
749          console.log(e);
750        }
751
752        return false;
753      },
754      isIos12: function isIos12() {
755        return window.navigator.userAgent.lastIndexOf('iPhone; CPU iPhone OS 12_') !== -1 || window.navigator.userAgent.lastIndexOf('iPad; CPU OS 12_') !== -1;
756      }
757    };
758    Monorail.produce('monorail-edge.shopifysvc.com',
759      'trekkie_storefront_load_errors/1.1',
760      {shop_id: 89243746638,
761      theme_id: 200571322702,
762      app_name: "storefront",
763      context_url: window.location.href,
764      source_url: "//modern-letter.com/cdn/s/trekkie.storefront.2f6d7d7ede7d24234881a9cd5f47e679642fa1f6.min.js"});
765
766  };
767  scriptFallback.async = true;
768  scriptFallback.src = '//modern-letter.com/cdn/s/trekkie.storefront.2f6d7d7ede7d24234881a9cd5f47e679642fa1f6.min.js';
769  first.parentNode.insertBefore(scriptFallback, first);
770};
771script.async = true;
772script.src = '//modern-letter.com/cdn/s/trekkie.storefront.2f6d7d7ede7d24234881a9cd5f47e679642fa1f6.min.js';
773first.parentNode.insertBefore(script, first);
774
775    };
776    trekkie.load(
777      {"Trekkie":{"appName":"storefront","development":false,"defaultAttributes":{"shopId":89243746638,"isMerchantRequest":null,"themeId":200571322702,"themeCityHash":"15694842929303894899","contentLanguage":"fr","currency":"EUR","eventMetadataId":"99da9166-8573-400e-8da8-718e4b527e8e"},"isServerSideCookieWritingEnabled":true,"monorailRegion":"shop_domain","enabledBetaFlags":["764d78cb","8450a54b","7ee89bf1","4c64608a"]},"Session Attribution":{},"S2S":{"facebookCapiEnabled":false,"source":"trekkie-storefront-renderer","apiClientId":580111}}
778    );
779
780    var loaded = false;
781    trekkie.ready(function() {
782      if (loaded) return;
783      loaded = true;
784
785      window.ShopifyAnalytics.lib = window.trekkie;
786
787      var originalDocumentWrite = document.write;
788      document.write = customDocumentWrite;
789      try { window.ShopifyAnalytics.merchantGoogleAnalytics.call(this); } catch(error) {};
790      document.write = originalDocumentWrite;
791
792      var match = window.location.pathname.match(/checkouts\/(.+)\/(thank_you|post_purchase)/)
793      var token = match? match[1]: undefined;
794      if (!hasLoggedConversion(token)) {
795        setCookieIfConversion(token);
796        
797      }
798    });
799
800    window.ShopifyAnalytics.lib.page(null,{"pageType":"home","requestId":"cb68317d-70cf-4471-912c-7f8a3d0f2b7a-1791084678","shopifyEmitted":true});
801
802    var eventsListenerScript = document.createElement('script');
803    eventsListenerScript.async = true;
804    eventsListenerScript.src = "//modern-letter.com/cdn/shopifycloud/storefront/assets/shop_events_listener-4e26a9ce.js";
805    document.getElementsByTagName('head')[0].appendChild(eventsListenerScript);
806})();</script>
vendor: 1 bytes, line 806
806
807<script
808  defer
809  src="https://modern-letter.com/cdn/shopifycloud/perf-kit/shopify-perf-kit-3.9.4.min.js"
810  data-application="storefront-renderer"
811  data-shop-id="89243746638"
812  data-render-region="gcp-us-west1"
813  data-page-type="index"
814  data-theme-instance-id="200571322702"
815  data-theme-name="Minimog - OS 2.0"
816  data-theme-version="5.8.0"
817  data-monorail-region="shop_domain"
818  data-resource-timing-sampling-rate="10"
819  data-shs="true"
820  data-shs-beacon="true"
821  data-shs-export-with-fetch="true"
822  data-shs-logs-sample-rate="1"
823  data-shs-beacon-endpoint="https://modern-letter.com/api/collect"
824></script>
824
825<meta name="shopify-y" content="79acacc0-5f78-4068-baeb-db015924d5ba" data-expiration="1822642278000"><meta name="shopify-s" content="8530cd29-2242-4a6c-9a4d-2dc34c870b1b" data-expiration="1791086478000"><meta name="new-cookie-storage-activated" content="t">
826</head>
827
828  <body
829    id="m-theme"
830    class="template-index  m-gradient m-color-footer m:overflow-hidden"
831    
832  >
833  <style>
834    .m-page-transition {
835        position: fixed;
836        top: 0;
837        left: 0;
838        width: 100%;
839        height: 100%;
840        z-index: 999999;
841        background: #fff;
842        pointer-events: none;
843        display: flex;
844        align-items: center;
845        justify-content: center;
846        max-width: 100vw;
847        max-height: 100vh;
848				transition-property: opacity, visibility;
849				transition-duration: var(--m-duration-default);
850				transition-timing-function: ease;
851      }
852      .m-page-transition.fade-out {
853        opacity: 0;
854        visibility: hidden;
855      }
856			.m-page-transition.m-page-transition--design-mode {
857				opacity: 1;
858				visibility: visible;
859			}
860      .m-page-transition.fade-in {
861        opacity: 1;
862        visibility: visible;
863      }
864      .m-page-transition.fade-out .m-page-transition__spinner-content {
865        display: none;
866      }
867			.m-page-transition.m-page-transition--design-mode .m-page-transition__spinner-content {
868				display: block;
869			}
870      @keyframes pageTransitionSpinner {
871        0% {
872          -webkit-transform: rotate3d(0, 0, 1, 0deg);
873          transform: rotate3d(0, 0, 1, 0deg);
874        }
875        25% {
876          -webkit-transform: rotate3d(0, 0, 1, 90deg);
877          transform: rotate3d(0, 0, 1, 90deg);
878        }
879        50% {
880          -webkit-transform: rotate3d(0, 0, 1, 180deg);
881          transform: rotate3d(0, 0, 1, 180deg);
882        }
883        75% {
884          -webkit-transform: rotate3d(0, 0, 1, 270deg);
885          transform: rotate3d(0, 0, 1, 270deg);
886        }
887        100% {
888          -webkit-transform: rotate3d(0, 0, 1, 360deg);
889          transform: rotate3d(0, 0, 1, 360deg);
890        }
891      }
892			@keyframes m-blink {
893				25% {
894					opacity: 0.5;
895				}
896				50% {
897					opacity: 0;
898				}
899				75% {
900					opacity: 0.5;
901				}
902			}
903      .m-page-transition__loading {
904        position: absolute;
905        animation: pageTransitionSpinner 1.5s linear infinite;
906        width: var(--loading-size);
907        height: var(--loading-size);
908        top: 10px;
909        left: 10px;
910        border-radius: 50%;
911        box-shadow: 0 2px 0 0 var(--loading-color);
912        transform-origin: calc(var(--loading-size) / 2) calc(var(--loading-size) / 2 + 1px);
913      }
914      .m-page-transition__logo {
915        animation: m-blink 1.5s linear infinite;
916        position: absolute;
917        width: var(--loading-size);
918        height: var(--loading-size);
919        top: 10px;
920        left: 10px;
921        display: flex;
922        align-items: center;
923        justify-content: center;
924      }
925      .m-page-transition__spinner {
926        width: var(--loading-size);
927        height: var(--loading-size);
928        display: inline-block;
929        overflow: hidden;
930        background: transparent;
931      }
932      .m-page-transition__spinner-content {
933        width: 100%;
934        height: 100%;
935        position: relative;
936        transform: translateZ(0) scale(0.8);
937        backface-visibility: hidden;
938        transform-origin: 0 0;
939      }
940      .m-page-transition__spinner-content div {
941        box-sizing: content-box;
942      }
943  </style>
944  <div
945    class="m-page-transition"
946		data-design-mode="false"
947    style="--loading-size: 80px; --loading-color: #bbbbbb;"
948  >
949    <div class="m-page-transition__spinner">
950      <div class="m-page-transition__spinner-content">
951        <div class="m-page-transition__loading"></div>
952        
953      </div>
954    </div>
955  </div>
956
957
958<div id="scroll-to-top-target" class="m-scroll-top-target"></div>
959
960<!-- BEGIN sections: header-group -->
961<div id="shopify-section-sections--30338457928014__header" class="shopify-section shopify-section-group-header-group m-section-header"><link href="//modern-letter.com/cdn/shop/t/10/assets/header.css?v=26824867878892557311784623194" rel="stylesheet" type="text/css" media="all" />
962
963<script src="//modern-letter.com/cdn/shop/t/10/assets/mega-menu.js?v=171931932604055704821784623194" defer="defer"></script>
vendor: 1 bytes, line 963
963
964<script src="//modern-letter.com/cdn/shop/t/10/assets/header.js?v=139348793745598728721784623194" defer="defer"></script>
vendor: 1 bytes, line 964
964
965<script src="//modern-letter.com/cdn/shop/t/10/assets/localization-form.js?v=78680935164192769481784623194" defer="defer"></script>
vendor: 1 bytes, line 965
965
966<script type="application/ld+json">
967  {
968    "@context": "http://schema.org",
969    "@type": "Organization",
970    "name": "The Modern Letter",
971    
972      
973      "logo": "https:\/\/modern-letter.com\/cdn\/shop\/files\/Logo-blanc.svg?v=1767693231\u0026width=387",
974    
975    "sameAs": [
976      "",
977      "",
978      "",
979      "https:\/\/www.instagram.com\/modern_letter\/",
980      "",
981      "",
982      "https:\/\/www.youtube.com\/@TheModernLetter",
983      ""
984    ],
985    "url": "https:\/\/modern-letter.com"
986  }
987</script>
987
988
989
990  
991  
991<script type="application/ld+json">
992    {
993      "@context": "http://schema.org",
994      "@type": "WebSite",
995      "name": "The Modern Letter",
996      "potentialAction": {
997        "@type": "SearchAction",
998        "target": "https:\/\/modern-letter.com\/search?q={search_term_string}",
999        "query-input": "required name=search_term_string"
1000      },
1001      "url": "https:\/\/modern-letter.com"
1002    }
1003  </script>
1003
1004
1005
1006
1007
1008<style data-shopify>
1009  :root {
1010    --logo-width-desktop: 120px;
1011    --logo-width-mobile: 110px;
1012    --logo-width-sticky: 120px;
1013    --logo-height-sticky: 25.42635658914729px;
1014    --header-transparent-text-color: 243, 243, 236;
1015  }
1016</style>
1017<m-header
1018  data-section-id="sections--30338457928014__header"
1019  data-section-type="header"
1020  data-page="/"
1021  data-header-design="logo-left-menu-center"
1022  
1023  class="m-header m:block transparent-on-top"
1024  data-transparent="true"
1025  data-sticky="none"
1026>
1027  
1028
1029  <div class="m-header__wrapper">
1030    
1031    <header
1032      class="m-header__mobile container-fluid m:flex m:items-center m-gradient m-color-dark"
1033      data-screen="m-header__mobile"
1034      data-transparent="true"
1035    >
1036      <span class="m-menu-button m:flex m:flex-1 m:w-3/12">
1037        <div class="m-hamburger-box">
1038          <div class="m-hamburger-box__inner"></div>
1039        </div>
1040      </span>
1041      
1042      
1043
1044      <div class="m-logo m-logo--mobile m:justify-center m:w-6/12 m-logo--has-image">
1045        
1046          <a href="/" class="m-logo__image m:block" title="The Modern Letter">
1047            
1048              <div
1049                class="m-logo__image-default m:display-flex m-image"
1050                style="--aspect-ratio: 4.719512195121951;--aspect-ratio-mobile: 4.719512195121951"
1051              >
1052                
1053                <img src="//modern-letter.com/cdn/shop/files/Logo-blanc.svg?v=1767693231" alt="Agence Klaviyo" srcset="//modern-letter.com/cdn/shop/files/Logo-blanc.svg?v=1767693231&amp;width=50 50w, //modern-letter.com/cdn/shop/files/Logo-blanc.svg?v=1767693231&amp;width=100 100w, //modern-letter.com/cdn/shop/files/Logo-blanc.svg?v=1767693231&amp;width=150 150w, //modern-letter.com/cdn/shop/files/Logo-blanc.svg?v=1767693231&amp;width=200 200w, //modern-letter.com/cdn/shop/files/Logo-blanc.svg?v=1767693231&amp;width=250 250w, //modern-letter.com/cdn/shop/files/Logo-blanc.svg?v=1767693231&amp;width=300 300w" height="23" class="m:inline-block">
1054              </div>
1055            
1056            
1057
1058                <div class="m-logo__image-transparent m:display-flex m-image">
1059                  <img src="//modern-letter.com/cdn/shop/files/Logo-blanc.svg?v=1767693231" alt="Agence Klaviyo" srcset="//modern-letter.com/cdn/shop/files/Logo-blanc.svg?v=1767693231&amp;width=50 50w, //modern-letter.com/cdn/shop/files/Logo-blanc.svg?v=1767693231&amp;width=100 100w, //modern-letter.com/cdn/shop/files/Logo-blanc.svg?v=1767693231&amp;width=150 150w, //modern-letter.com/cdn/shop/files/Logo-blanc.svg?v=1767693231&amp;width=200 200w, //modern-letter.com/cdn/shop/files/Logo-blanc.svg?v=1767693231&amp;width=250 250w, //modern-letter.com/cdn/shop/files/Logo-blanc.svg?v=1767693231&amp;width=300 300w" height="23" class="m:inline-block">
1060                </div>
1061              
1062            
1063          </a>
1064        
1065      </div>
1066      
1067      
1068        <div class="m-header__mobile-right m:w-3/12 m:flex m:flex-1 m:justify-end">
1069          
1070            <m-search-popup class="m:flex m:justify-center m:items-center" data-open-search-popup>
1071              <span class="m-header__search-icon">
1072                <svg
1073                  class="m-svg-icon--medium"
1074                  fill="currentColor"
1075                  stroke="currentColor"
1076                  xmlns="http://www.w3.org/2000/svg"
1077                  viewBox="0 0 512 512"
1078                >
1079                  <path d="M508.5 468.9L387.1 347.5c-2.3-2.3-5.3-3.5-8.5-3.5h-13.2c31.5-36.5 50.6-84 50.6-136C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c52 0 99.5-19.1 136-50.6v13.2c0 3.2 1.3 6.2 3.5 8.5l121.4 121.4c4.7 4.7 12.3 4.7 17 0l22.6-22.6c4.7-4.7 4.7-12.3 0-17zM208 368c-88.4 0-160-71.6-160-160S119.6 48 208 48s160 71.6 160 160-71.6 160-160 160z"/>
1080                </svg>
1081              </span>
1082            </m-search-popup>
1083          
1084          
1085        </div>
1086      
1087
1088      
1089<div id="m-menu-drawer" class="m-menu-drawer">
1090  <div class="m-menu-drawer__backdrop"></div>
1091  <div class="m-menu-drawer__wrapper">
1092    <div class="m-menu-drawer__content">
1093      <ul class="m-menu-drawer__navigation m-menu-mobile">
1094        
1095          
1096          
1097          
1098            
1099
1100<li class="m-menu-mobile__item m-menu-mobile__item--no-submenu" data-url="/">
1101  <a href="/" class="m-menu-mobile__link" target="_self">
1102    Accueil
1103  </a>
1104  
1105  
1106</li>
1107          
1108        
1109          
1110          
1111          
1112            
1113
1114<li class="m-menu-mobile__item m-menu-mobile__item--no-submenu" data-url="/#expertise">
1115  <a href="/#expertise" class="m-menu-mobile__link" target="_self">
1116    Notre expertise
1117  </a>
1118  
1119  
1120</li>
1121          
1122        
1123          
1124          
1125          
1126            
1127
1128<li class="m-menu-mobile__item m-menu-mobile__item--no-submenu" data-url="https://modern-letter.com/pages/portfolio">
1129  <a href="https://modern-letter.com/pages/portfolio" class="m-menu-mobile__link" target="_self">
1130    Porfolio
1131  </a>
1132  
1133  
1134</li>
1135          
1136        
1137          
1138          
1139          
1140            
1141
1142<li class="m-menu-mobile__item m-menu-mobile__item--no-submenu" data-url="/pages/etudes-de-cas">
1143  <a href="/pages/etudes-de-cas" class="m-menu-mobile__link" target="_self">
1144    Études de cas
1145  </a>
1146  
1147  
1148</li>
1149          
1150        
1151          
1152          
1153          
1154            
1155
1156<li class="m-menu-mobile__item m-menu-mobile__item--no-submenu" data-url="/blogs/nos-conseils-sur-klaviyo">
1157  <a href="/blogs/nos-conseils-sur-klaviyo" class="m-menu-mobile__link" target="_self">
1158    Le blog
1159  </a>
1160  
1161  
1162</li>
1163          
1164        
1165          
1166          
1167          
1168            
1169
1170<li class="m-menu-mobile__item m-menu-mobile__item--no-submenu" data-url="https://app.iclosed.io/e/modern-letter/30min">
1171  <a href="https://app.iclosed.io/e/modern-letter/30min" class="m-menu-mobile__link" target="_blank">
1172    Nous contacter
1173  </a>
1174  
1175  
1176</li>
1177          
1178        
1179      </ul>
1180      <div class="m-menu-customer">
1181  
1182    <div class="m-menu-customer__wrapper">
1183      <div class="m-menu-customer__label">Mon compte</div>
1184      
1185        <a
1186          href="https://modern-letter.com/customer_authentication/redirect?locale=fr&region_country=US"
1187          class="m-button m-button--primary m-signin-button"
1188          data-tab="signin"
1189        >
1190          Se connecter
1191        </a>
1192        <a
1193          href="https://shopify.com/89243746638/account?locale=fr&region_country=US&buyer_flags=eyJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJib3V0aXF1ZS1rbGF2aXlvLm15c2hvcGlmeS5jb20iLCJmbGFncyI6W10sImV4cCI6MTc5MTY4OTQ3OCwibmJmIjoxNzkxMDg0Njc4fQ.cxD5xNnPouuDuIZE9_OR2I9PPdCDQq1Y4oulvgChnF8"
1194          class="m-button m-button--secondary m-register-button"
1195          data-tab="register"
1196        >
1197          Registre
1198        </a>
1199      
1200    </div>
1201  
1202  <div class="m-menu-customer__language-currency"></div>
1203</div>
1204
1205    </div>
1206  </div>
1207</div>
1208
1209    </header>
1210
1211    
1212    <header
1213      class="m-header__desktop logo-left-menu-center m-gradient m-color-dark"
1214      data-screen="m-header__desktop"
1215      data-transparent="true"
1216    >
1217      <div class="m-header__bg m-gradient m-color-dark"></div>
1218      <div class="m-header__dropdown-bg m-gradient m-color-dark"></div>
1219      
1220          <div class="m-header__container container">
1221            <div class="m-header__inner">
1222              <div class="m-header__left">
1223                
1224
1225<div class="m-header__logo m-logo m-logo--has-image">
1226
1227  
1228      <a href="/" class="m-logo__image m:block" title="The Modern Letter">
1229        
1230          <div class="m-logo__image-default m-image">
1231            
1232              <img src="//modern-letter.com/cdn/shop/files/Logo-blanc.svg?v=1767693231" alt="Agence Klaviyo" srcset="//modern-letter.com/cdn/shop/files/Logo-blanc.svg?v=1767693231&amp;width=50 50w, //modern-letter.com/cdn/shop/files/Logo-blanc.svg?v=1767693231&amp;width=100 100w, //modern-letter.com/cdn/shop/files/Logo-blanc.svg?v=1767693231&amp;width=150 150w, //modern-letter.com/cdn/shop/files/Logo-blanc.svg?v=1767693231&amp;width=200 200w, //modern-letter.com/cdn/shop/files/Logo-blanc.svg?v=1767693231&amp;width=250 250w, //modern-letter.com/cdn/shop/files/Logo-blanc.svg?v=1767693231&amp;width=300 300w" width="387" height="82" class="m:inline-block">
1233            
1234          </div>
1235        
1236
1237        
1238          
1239
1240          
1241<div class="m-logo__image-transparent m-image">
1242              <img src="//modern-letter.com/cdn/shop/files/Logo-blanc.svg?v=1767693231" alt="Agence Klaviyo" srcset="//modern-letter.com/cdn/shop/files/Logo-blanc.svg?v=1767693231&amp;width=50 50w, //modern-letter.com/cdn/shop/files/Logo-blanc.svg?v=1767693231&amp;width=100 100w, //modern-letter.com/cdn/shop/files/Logo-blanc.svg?v=1767693231&amp;width=150 150w, //modern-letter.com/cdn/shop/files/Logo-blanc.svg?v=1767693231&amp;width=200 200w, //modern-letter.com/cdn/shop/files/Logo-blanc.svg?v=1767693231&amp;width=250 250w, //modern-letter.com/cdn/shop/files/Logo-blanc.svg?v=1767693231&amp;width=300 300w" width="120" height="25.42635658914729" class="inline-block">
1243            </div>
1244          
1245        
1246      </a>
1247  
1248
1249</div>
1250
1251
1252              </div>
1253              <div class="m-header__center">
1254                
1255
1256
1257<div class="m-header__menu">
1258  <ul class="m-menu">
1259    
1260      
1261      
1262
1263      
1264
1265      
1266        <li class="m-menu__item" data-index="0">
1267          <a
1268            href="/"
1269            class="m-menu__link m-menu__link--main m:uppercase"
1270            target="_self"
1271          >
1272            Accueil
1273            
1274          </a>
1275          
1276        </li>
1277      
1278    
1279      
1280      
1281
1282      
1283
1284      
1285        <li class="m-menu__item" data-index="1">
1286          <a
1287            href="/#expertise"
1288            class="m-menu__link m-menu__link--main m:uppercase"
1289            target="_self"
1290          >
1291            Notre expertise
1292            
1293          </a>
1294          
1295        </li>
1296      
1297    
1298      
1299      
1300
1301      
1302
1303      
1304        <li class="m-menu__item" data-index="2">
1305          <a
1306            href="https://modern-letter.com/pages/portfolio"
1307            class="m-menu__link m-menu__link--main m:uppercase"
1308            target="_self"
1309          >
1310            Porfolio
1311            
1312          </a>
1313          
1314        </li>
1315      
1316    
1317      
1318      
1319
1320      
1321
1322      
1323        <li class="m-menu__item" data-index="3">
1324          <a
1325            href="/pages/etudes-de-cas"
1326            class="m-menu__link m-menu__link--main m:uppercase"
1327            target="_self"
1328          >
1329            Études de cas
1330            
1331          </a>
1332          
1333        </li>
1334      
1335    
1336      
1337      
1338
1339      
1340
1341      
1342        <li class="m-menu__item" data-index="4">
1343          <a
1344            href="/blogs/nos-conseils-sur-klaviyo"
1345            class="m-menu__link m-menu__link--main m:uppercase"
1346            target="_self"
1347          >
1348            Le blog
1349            
1350          </a>
1351          
1352        </li>
1353      
1354    
1355      
1356      
1357
1358      
1359
1360      
1361        <li class="m-menu__item" data-index="5">
1362          <a
1363            href="https://app.iclosed.io/e/modern-letter/30min"
1364            class="m-menu__link m-menu__link--main m:uppercase"
1365            target="_blank"
1366          >
1367            Nous contacter
1368            
1369          </a>
1370          
1371        </li>
1372      
1373    
1374  </ul>
1375</div>
1376
1377              </div>
1378              <div class="m-header__right">
1379                
1380  <m-search-popup class="m-header__search m:flex m:items-center" data-open-search-popup>
1381    
1382
1383      <button type="submit" class="m-search-form__button" aria-label="Recherche">
1384        <span class="m-tooltip m:block m-tooltip--bottom m-tooltip--style-2">
1385          <svg
1386            class="m-svg-icon--medium-small"
1387            fill="currentColor"
1388            stroke="currentColor"
1389            xmlns="http://www.w3.org/2000/svg"
1390            viewBox="0 0 512 512"
1391          >
1392            <path d="M508.5 468.9L387.1 347.5c-2.3-2.3-5.3-3.5-8.5-3.5h-13.2c31.5-36.5 50.6-84 50.6-136C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c52 0 99.5-19.1 136-50.6v13.2c0 3.2 1.3 6.2 3.5 8.5l121.4 121.4c4.7 4.7 12.3 4.7 17 0l22.6-22.6c4.7-4.7 4.7-12.3 0-17zM208 368c-88.4 0-160-71.6-160-160S119.6 48 208 48s160 71.6 160 160-71.6 160-160 160z"/>
1393          </svg>
1394          <span class="m-tooltip__content">Recherche</span>
1395        </span>
1396      </button>
1397    
1398  </m-search-popup>
1399
1400
1401              </div>
1402            </div>
1403          </div>
1404        
1405    </header>
1406  </div>
1407
1408  <div class="m-header__overlay"></div>
1409  
1410
1411
1412
1413
1414<div
1415  data-search-popup
1416  class="m-search-popup"
1417  style="visibility: hidden;"
1418>
1419  <div class="m-search-popup--wrapper m-gradient m-color-default" data-search-container><div class="container-fluid">
1420          <div class="m-search-popup--header m:flex m:justify-between m:items-center md:m:hidden">
1421            <h3 class="m:text-base">Rechercher sur notre site</h3>
1422            <button data-close-search aria-label="Close">
1423              <svg class="m-svg-icon--medium" fill="currentColor" stroke="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
1424                <path d="M193.94 256L296.5 153.44l21.15-21.15c3.12-3.12 3.12-8.19 0-11.31l-22.63-22.63c-3.12-3.12-8.19-3.12-11.31 0L160 222.06 36.29 98.34c-3.12-3.12-8.19-3.12-11.31 0L2.34 120.97c-3.12 3.12-3.12 8.19 0 11.31L126.06 256 2.34 379.71c-3.12 3.12-3.12 8.19 0 11.31l22.63 22.63c3.12 3.12 8.19 3.12 11.31 0L160 289.94 262.56 392.5l21.15 21.15c3.12 3.12 8.19 3.12 11.31 0l22.63-22.63c3.12-3.12 3.12-8.19 0-11.31L193.94 256z"/>
1425              </svg>
1426            </button>
1427          </div>
1428          <div class="m:flex">
1429            <div class="m:w-2/12 m:items-center m:hidden md:m:flex">
1430              
1431
1432<div class="m-header__logo m-logo m-logo--has-image">
1433
1434  
1435      <a href="/" class="m-logo__image m:block" title="The Modern Letter">
1436        
1437          <div class="m-logo__image-default m-image">
1438            
1439              <img src="//modern-letter.com/cdn/shop/files/Logo-blanc.svg?v=1767693231" alt="Agence Klaviyo" srcset="//modern-letter.com/cdn/shop/files/Logo-blanc.svg?v=1767693231&amp;width=50 50w, //modern-letter.com/cdn/shop/files/Logo-blanc.svg?v=1767693231&amp;width=100 100w, //modern-letter.com/cdn/shop/files/Logo-blanc.svg?v=1767693231&amp;width=150 150w, //modern-letter.com/cdn/shop/files/Logo-blanc.svg?v=1767693231&amp;width=200 200w, //modern-letter.com/cdn/shop/files/Logo-blanc.svg?v=1767693231&amp;width=250 250w, //modern-letter.com/cdn/shop/files/Logo-blanc.svg?v=1767693231&amp;width=300 300w" width="387" height="82" class="m:inline-block">
1440            
1441          </div>
1442        
1443
1444        
1445          
1446
1447          
1448<div class="m-logo__image-transparent m-image">
1449              <img src="//modern-letter.com/cdn/shop/files/Logo-blanc.svg?v=1767693231" alt="Agence Klaviyo" srcset="//modern-letter.com/cdn/shop/files/Logo-blanc.svg?v=1767693231&amp;width=50 50w, //modern-letter.com/cdn/shop/files/Logo-blanc.svg?v=1767693231&amp;width=100 100w, //modern-letter.com/cdn/shop/files/Logo-blanc.svg?v=1767693231&amp;width=150 150w, //modern-letter.com/cdn/shop/files/Logo-blanc.svg?v=1767693231&amp;width=200 200w, //modern-letter.com/cdn/shop/files/Logo-blanc.svg?v=1767693231&amp;width=250 250w, //modern-letter.com/cdn/shop/files/Logo-blanc.svg?v=1767693231&amp;width=300 300w" width="120" height="25.42635658914729" class="inline-block">
1450            </div>
1451          
1452        
1453      </a>
1454  
1455
1456</div>
1457
1458
1459            </div>
1460            <div class="m:w-full md:m:w-8/12 m:flex m:justify-center m:items-center">
1461              <div class="m-search-popup__search-form">
1462                <form id="m-form-search" action="/search" method="GET" role="search" novalidate class="m-search-form m:flex m:w-full">
1463                    <input type="hidden" name="options[unavailable_products]" value="last">
1464                    <input type="hidden" name="options[prefix]" value="last">
1465                    <input type="hidden" name="options[fields]" value="title,vendor,product_type,variants.title">
1466
1467                    <input
1468                      type="search" name="q" required autocomplete="off"
1469                      placeholder="Recherche une page"
1470                      aria-label="Recherche une page"
1471                      class="form-field form-field--input"
1472                      data-search-input
1473                    />
1474                    <button type="submit" class="m-search-form--button" aria-label="Submit">
1475                      <svg class="m-svg-icon--medium-small" fill="currentColor" stroke="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
1476                        <path d="M508.5 468.9L387.1 347.5c-2.3-2.3-5.3-3.5-8.5-3.5h-13.2c31.5-36.5 50.6-84 50.6-136C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c52 0 99.5-19.1 136-50.6v13.2c0 3.2 1.3 6.2 3.5 8.5l121.4 121.4c4.7 4.7 12.3 4.7 17 0l22.6-22.6c4.7-4.7 4.7-12.3 0-17zM208 368c-88.4 0-160-71.6-160-160S119.6 48 208 48s160 71.6 160 160-71.6 160-160 160z"/>
1477                      </svg>
1478                    </button>
1479                    <span class="m-search-form--spinner" data-spinner>
1480                      <svg class="animate-spin animate-spin-show m-svg-icon--large" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
1481                        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
1482                        <path fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
1483                      </svg>
1484                    </span>
1485                    <span
1486                      class="m-search-form--clear"
1487                      data-clear-search
1488                    >
1489                      <svg class="m-svg-icon" fill="currentColor" stroke="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
1490                        <path d="M193.94 256L296.5 153.44l21.15-21.15c3.12-3.12 3.12-8.19 0-11.31l-22.63-22.63c-3.12-3.12-8.19-3.12-11.31 0L160 222.06 36.29 98.34c-3.12-3.12-8.19-3.12-11.31 0L2.34 120.97c-3.12 3.12-3.12 8.19 0 11.31L126.06 256 2.34 379.71c-3.12 3.12-3.12 8.19 0 11.31l22.63 22.63c3.12 3.12 8.19 3.12 11.31 0L160 289.94 262.56 392.5l21.15 21.15c3.12 3.12 8.19 3.12 11.31 0l22.63-22.63c3.12-3.12 3.12-8.19 0-11.31L193.94 256z"/>
1491                      </svg>
1492                    </span>
1493                </form>
1494                <div class="m-search-popup__result m-scrollbar--vertical m:hidden"><div class="m:display-flex m:justify-center">
1495                    <button form="m-form-search" class="m:display-flex m-search-count-result m:hidden" data-search-count>
1496                      <span
1497                        data-message
1498                        data-results-title="Résultats pour"
1499                      ></span><span>&nbsp;</span>
1500                      "<span data-query></span>"
1501                      <span data-more-result-icon class="m:hidden">
1502                        <svg xmlns="http://www.w3.org/2000/svg" class="m-svg-icon"fill="none" viewBox="0 0 16 17"><path fill="currentColor" d="M7.66406.585938c.21094-.1875.41016-.1875.59766 0L15.6094 7.96875c.2109.1875.2109.375 0 .5625L8.26172 15.9141c-.1875.1875-.38672.1875-.59766 0l-.70312-.7032c-.07032-.0703-.10547-.164-.10547-.2812s.03515-.2227.10547-.3164l5.44926-5.44924H.421875C.140625 9.16406 0 9.02344 0 8.74219v-.98438c0-.28125.140625-.42187.421875-.42187H12.4102L6.96094 1.88672c-.1875-.21094-.1875-.41016 0-.59766l.70312-.703122z"/></svg>
1503                      </span>
1504                    </button>
1505                  </div>
1506                </div>
1507              </div>
1508            </div>
1509            <div class="m:w-2/12 m:hidden md:m:flex m:justify-end m:items-center">
1510              
1511            </div>
1512          </div></div></div>
1513</div>
1514
1515</m-header>
1516
1517<script>
1518  // Set header height
1519  var _mh = document.querySelector('header.m-header__mobile');
1520  var _dh = document.querySelector('header.m-header__desktop');
1521
1522  function _shh() {
1523    if (!_mh || !_dh) {
1524      _mh = document.querySelector('header.m-header__mobile');
1525      _dh = document.querySelector('header.m-header__desktop');
1526    }
1527    // Header
1528    var _hd = window.innerWidth < 1024 ? _mh : _dh;
1529    if (_hd) {
1530      document.documentElement.style.setProperty('--m-header-height', _hd.offsetHeight + 'px');
1531      window.MinimogSettings.headerHeight = _hd.offsetHeight;
1532    }
1533  }
1534  // setTopbarHeight
1535  function _stbh() {
1536    // Topbar
1537    var _tb = document.querySelector('.m-topbar');
1538    if (_tb) {
1539      document.documentElement.style.setProperty('--m-topbar-height', _tb.offsetHeight + 'px');
1540      window.MinimogSettings.topbarHeight = _tb.offsetHeight;
1541    }
1542  }
1543
1544  // setAnnouncementbarHeight
1545  function _sabh() {
1546    var _ab = document.querySelector('m-announcement-bar');
1547    if (_ab) {
1548      document.documentElement.style.setProperty('--m-announcement-height', _ab.offsetHeight + 'px');
1549      window.MinimogSettings.topbarHeight = _ab.offsetHeight;
1550    }
1551  }
1552
1553  // Calc all height
1554  function _calcHeights() {
1555    _stbh();
1556    _shh();
1557    _sabh();
1558  }
1559  _calcHeights();
1560  document.addEventListener('matchTablet', () => {
1561    _calcHeights();
1562  });
1563  document.addEventListener('unmatchTablet', () => {
1564    _calcHeights();
1565  });
1566
1567  if (Shopify.designMode) {
1568    document.addEventListener('shopify:section:load', function (event) {
1569      const header = document.querySelector('m-header');
1570      if (typeof Megamenu !== 'undefined' && header) {
1571        const megaMenu = new Megamenu(header);
1572      }
1573    });
1574  }
1575</script>
1575
1576
1577
1578<style> #shopify-section-sections--30338457928014__header .m-topbar a[href*="facebook"] {order: 2;} #shopify-section-sections--30338457928014__header .social-media-links {column-gap: 30px;} #shopify-section-sections--30338457928014__header .m-menu__link--main {font-family: "inconsolata", Sans-serif; font-size: 16px; font-weight: 600; letter-spacing: 1px; word-spacing: 0px;} #shopify-section-sections--30338457928014__header .m-menu-customer__wrapper {display: none !important;} #shopify-section-sections--30338457928014__header .m-menu-drawer__navigation, #shopify-section-sections--30338457928014__header .m-menu-mobile {text-transform: uppercase;} </style></div><div id="shopify-section-sections--30338457928014__1775121506cbc42415" class="shopify-section shopify-section-group-header-group">
1579
1580</div>
1581<!-- END sections: header-group --><main role="main" id="MainContent">
1582      <div id="shopify-section-template--30338464678222__1621243260e1af0c20" class="shopify-section"><link href="//modern-letter.com/cdn/shop/t/10/assets/slideshow.css?v=45729299094500379561784623194" rel="stylesheet" type="text/css" media="all" />
1583<script src="//modern-letter.com/cdn/shop/t/10/assets/slideshow.js?v=147908263769142536511784623194" defer="defer"></script>
1583
1584
1585
1586<section
1587  id="m-slider-template--30338464678222__1621243260e1af0c20"
1588  class="m-section m-slider m-slideshow-section m-slider--medium  sf-home__slideshow"
1589  data-section-type="slider"
1590  data-section-id="template--30338464678222__1621243260e1af0c20"
1591  style="--data-autoplay-speed: 4s;"
1592>
1593  <div class="container-full"><m-slideshow
1594      class="m:block "
1595      data-id="template--30338464678222__1621243260e1af0c20"
1596      data-autoplay="false"
1597      data-autoplay-speed="4"
1598      data-enable-arrows="false"
1599      data-enable-dots="false"
1600      data-slide-height="medium"
1601      data-loop="false"
1602    >
1603      <div class="swiper-container">
1604        <div class="swiper-wrapper">
1605          
1606            
1607
1608            
1609
1610            <div
1611              
1612              data-slide="0"
1613              class="swiper-slide"
1614              data-slide-type="slider_item"
1615            >
1616              <div class="m-slide m-slide--middle-center m-slide--text-medium">
1617                <div
1618                  class="m-slide__media"
1619                  
1620                >
1621                  
1622
1623                  <div class="m-slide__bg">
1624                      
1625<picture><source
1626                              media="(max-width: 767px)"
1627                              srcset="//modern-letter.com/cdn/shop/files/agence-themodernletter_aea4fcfa-0c46-438b-94d0-9a47a0e01fb3.png?v=1782131027&width=400 400w, //modern-letter.com/cdn/shop/files/agence-themodernletter_aea4fcfa-0c46-438b-94d0-9a47a0e01fb3.png?v=1782131027&width=600 600w, //modern-letter.com/cdn/shop/files/agence-themodernletter_aea4fcfa-0c46-438b-94d0-9a47a0e01fb3.png?v=1782131027&width=800 800w, //modern-letter.com/cdn/shop/files/agence-themodernletter_aea4fcfa-0c46-438b-94d0-9a47a0e01fb3.png?v=1782131027&width=1000 1000w"
1628                              width="801"
1629                              height="904"
1630                            >
1631                          <img src="//modern-letter.com/cdn/shop/files/agence-themodernletter_ec635432-9bcd-4010-93a4-780fdc7b89dd.png?v=1782130811&amp;width=3840" alt="slider image slider_item_BWfGYL" srcset="//modern-letter.com/cdn/shop/files/agence-themodernletter_ec635432-9bcd-4010-93a4-780fdc7b89dd.png?v=1782130811&amp;width=300 300w, //modern-letter.com/cdn/shop/files/agence-themodernletter_ec635432-9bcd-4010-93a4-780fdc7b89dd.png?v=1782130811&amp;width=400 400w, //modern-letter.com/cdn/shop/files/agence-themodernletter_ec635432-9bcd-4010-93a4-780fdc7b89dd.png?v=1782130811&amp;width=500 500w, //modern-letter.com/cdn/shop/files/agence-themodernletter_ec635432-9bcd-4010-93a4-780fdc7b89dd.png?v=1782130811&amp;width=600 600w, //modern-letter.com/cdn/shop/files/agence-themodernletter_ec635432-9bcd-4010-93a4-780fdc7b89dd.png?v=1782130811&amp;width=700 700w, //modern-letter.com/cdn/shop/files/agence-themodernletter_ec635432-9bcd-4010-93a4-780fdc7b89dd.png?v=1782130811&amp;width=800 800w, //modern-letter.com/cdn/shop/files/agence-themodernletter_ec635432-9bcd-4010-93a4-780fdc7b89dd.png?v=1782130811&amp;width=900 900w, //modern-letter.com/cdn/shop/files/agence-themodernletter_ec635432-9bcd-4010-93a4-780fdc7b89dd.png?v=1782130811&amp;width=1000 1000w, //modern-letter.com/cdn/shop/files/agence-themodernletter_ec635432-9bcd-4010-93a4-780fdc7b89dd.png?v=1782130811&amp;width=1200 1200w, //modern-letter.com/cdn/shop/files/agence-themodernletter_ec635432-9bcd-4010-93a4-780fdc7b89dd.png?v=1782130811&amp;width=1400 1400w, //modern-letter.com/cdn/shop/files/agence-themodernletter_ec635432-9bcd-4010-93a4-780fdc7b89dd.png?v=1782130811&amp;width=1600 1600w, //modern-letter.com/cdn/shop/files/agence-themodernletter_ec635432-9bcd-4010-93a4-780fdc7b89dd.png?v=1782130811&amp;width=1800 1800w, //modern-letter.com/cdn/shop/files/agence-themodernletter_ec635432-9bcd-4010-93a4-780fdc7b89dd.png?v=1782130811&amp;width=2000 2000w, //modern-letter.com/cdn/shop/files/agence-themodernletter_ec635432-9bcd-4010-93a4-780fdc7b89dd.png?v=1782130811&amp;width=2200 2200w, //modern-letter.com/cdn/shop/files/agence-themodernletter_ec635432-9bcd-4010-93a4-780fdc7b89dd.png?v=1782130811&amp;width=2400 2400w, //modern-letter.com/cdn/shop/files/agence-themodernletter_ec635432-9bcd-4010-93a4-780fdc7b89dd.png?v=1782130811&amp;width=2600 2600w, //modern-letter.com/cdn/shop/files/agence-themodernletter_ec635432-9bcd-4010-93a4-780fdc7b89dd.png?v=1782130811&amp;width=2800 2800w, //modern-letter.com/cdn/shop/files/agence-themodernletter_ec635432-9bcd-4010-93a4-780fdc7b89dd.png?v=1782130811&amp;width=3000 3000w, //modern-letter.com/cdn/shop/files/agence-themodernletter_ec635432-9bcd-4010-93a4-780fdc7b89dd.png?v=1782130811&amp;width=3200 3200w" width="1832" height="562" loading="eager" fetchpriority="high" sizes="100vw">
1632                        </picture>
1633                      
1634                    
1635                  </div>
1636
1637                  
1638                </div>
1639
1640                
1641<div
1642                    class="m-slide__wrapper container-fluid  m-slide-animate--fade-in-up"
1643                    style="--btn-color: #FFF;--btn-color-hover: #000;"
1644                  >
1645                    <div class="m-slide__content m-richtext m:text-center">
1646                      
1647
1648                      
1649                        <h2 class="m-richtext__title m-slide__title m:text-white h2">
1650                          Des emails Klaviyo adaptés à chaque étape du parcours d'achat, pour acquérir et fidéliser vos clients.
1651                        </h2>
1652                      
1653
1654                      
1655                        <div class="m-richtext__description m-slide__description rte m:text-white h6">
1656                          <p>★★★★★ 4.9/5 basé sur 73 clients</p>
1657                        </div>
1658                      
1659
1660                      
1661                        <div class="m-richtext__button m-slide__button m:display-flex m:flex-wrap m:items-center m:justify-center">
1662                          
1663                            <a
1664                              href="https://boutique-klaviyo.myshopify.com/#expertise"
1665                              class="m-slide__button-first m-button m-button--secondary "
1666                            >DÉCOUVRIR NOS PRESTATIONS</a>
1667                          
1668                          
1669                            <a
1670                              href="https://calendly.com/the-modern-letter/30min"
1671                              class="m-slide__button-second m-button m-button--w
1671hite "
1672                            >PLANIFIER UN RENDEZ-VOUS</a>
1673                          
1674                        </div>
1675                      
1676                    </div>
1677                  </div>
1678                
1679
1680                
1681              </div>
1682            </div>
1683          
1684        </div>
1685        
1686      </div>
1687    </m-slideshow>
1688  </div>
1689</section>
1690
1691
1692<style> @media screen and (max-width: 767px) {#shopify-section-template--30338464678222__1621243260e1af0c20 .h2 {font-size: 23px !important; }} #shopify-section-template--30338464678222__1621243260e1af0c20 .m-slide__title {color: #f3f3ea !important;} @media screen and (min-width: 768px) {#shopify-section-template--30338464678222__1621243260e1af0c20 .m-slide__wrapper {padding-bottom: 26px; }} </style></div><div id="shopify-section-template--30338464678222__scrolling_promotion_8KFDAL" class="shopify-section"><link href="//modern-letter.com/cdn/shop/t/10/assets/scrolling-promotion.css?v=4477404664902546941784623194" rel="stylesheet" type="text/css" media="all" />
1693<script src="//modern-letter.com/cdn/shop/t/10/assets/scrolling-promotion.js?v=48716487583345723421784623194" defer="defer"></script>
1693
1694
1695
1696<style>
1697  #m-section--template--30338464678222__scrolling_promotion_8KFDAL {
1698    --section-padding-top: 0px;
1699    --section-padding-bottom: 18px;
1700    --item-gap: 40px;
1701    --item-gap-mobile: 20px;
1702    --duration: 45s;
1703  }
1704</style>
1705<section
1706  id="m-section--template--30338464678222__scrolling_promotion_8KFDAL"
1707  class="m-section m-scrolling-promotion-section m-gradient m-color-footer"
1708  data-section-type="scrolling-promotion"
1709  data-section-id="template--30338464678222__scrolling_promotion_8KFDAL"
1710>
1711  <div class="container-full m-section-py">
1712    <m-scrolling-promotion
1713      class="m-scrolling-promotion m-scrolling-promotion--left"
1714    >
1715      <div class="m-promotion">
1716        
1717<div
1718                class="m-promotion__item m:blocks-radius"
1719                style="--image-height: 120px;"
1720              >
1721                
1722                
1723<img
1724                    srcset="//modern-letter.com/cdn/shop/files/1-300x300.png?v=1767696257&width=165 165w,//modern-letter.com/cdn/shop/files/1-300x300.png?v=1767696257 300w
1725                    "
1726                    src="//modern-letter.com/cdn/shop/files/1-300x300.png?v=1767696257&width=533"
1727                    sizes="(min-width: 1200px) 267px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
1728                    alt=""  
1729                    loading="lazy"
1730                    fetchpriority="high"
1731                    width="300"
1732                    height="300"
1733                  >
1734                
1735                
1736              </div>
1737<div
1738                class="m-promotion__item m:blocks-radius"
1739                style="--image-height: 120px;"
1740              >
1741                
1742                
1743<img
1744                    srcset="//modern-letter.com/cdn/shop/files/2-300x300.png?v=1767696477&width=165 165w,//modern-letter.com/cdn/shop/files/2-300x300.png?v=1767696477 300w
1745                    "
1746                    src="//modern-letter.com/cdn/shop/files/2-300x300.png?v=1767696477&width=533"
1747                    sizes="(min-width: 1200px) 267px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
1748                    alt=""  
1749                    loading="lazy"
1750                    fetchpriority="high"
1751                    width="300"
1752                    height="300"
1753                  >
1754                
1755                
1756              </div>
1757<div
1758                class="m-promotion__item m:blocks-radius"
1759                style="--image-height: 120px;"
1760              >
1761                
1762                
1763<img
1764                    srcset="//modern-letter.com/cdn/shop/files/laboratoires.png?v=1777565717&width=165 165w,//modern-letter.com/cdn/shop/files/laboratoires.png?v=1777565717&width=360 360w,//modern-letter.com/cdn/shop/files/laboratoires.png?v=1777565717 500w
1765                    "
1766                    src="//modern-letter.com/cdn/shop/files/laboratoires.png?v=1777565717&width=533"
1767                    sizes="(min-width: 1200px) 267px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
1768                    alt=""  
1769                    loading="lazy"
1770                    fetchpriority="high"
1771                    width="500"
1772                    height="500"
1773                  >
1774                
1775                
1776              </div>
1777<div
1778                class="m-promotion__item m:blocks-radius"
1779                style="--image-height: 120px;"
1780              >
1781                
1782                
1783<img
1784                    srcset="//modern-letter.com/cdn/shop/files/paradigme-1-300x300.png?v=1767696580&width=165 165w,//modern-letter.com/cdn/shop/files/paradigme-1-300x300.png?v=1767696580 300w
1785                    "
1786                    src="//modern-letter.com/cdn/shop/files/paradigme-1-300x300.png?v=1767696580&width=533"
1787                    sizes="(min-width: 1200px) 267px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
1788                    alt=""  
1789                    loading="lazy"
1790                    fetchpriority="high"
1791                    width="300"
1792                    height="300"
1793                  >
1794                
1795                
1796              </div>
1797<div
1798                class="m-promotion__item m:blocks-radius"
1799                style="--image-height: 120px;"
1800              >
1801                
1802                
1803<img
1804                    srcset="//modern-letter.com/cdn/shop/files/matcha-paris-1-300x300.png?v=1767696593&width=165 165w,//modern-letter.com/cdn/shop/files/matcha-paris-1-300x300.png?v=1767696593 300w
1805                    "
1806                    src="//modern-letter.com/cdn/shop/files/matcha-paris-1-300x300.png?v=1767696593&width=533"
1807                    sizes="(min-width: 1200px) 267px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
1808                    alt=""  
1809                    loading="lazy"
1810                    fetchpriority="high"
1811                    width="300"
1812                    height="300"
1813                  >
1814                
1815                
1816              </div>
1817<div
1818                class="m-promotion__item m:blocks-radius"
1819                style="--image-height: 120px;"
1820              >
1821                
1822                
1823<img
1824                    srcset="//modern-letter.com/cdn/shop/files/miumlab_2.png?v=1775836976&width=165 165w,//modern-letter.com/cdn/shop/files/miumlab_2.png?v=1775836976&width=360 360w,//modern-letter.com/cdn/shop/files/miumlab_2.png?v=1775836976 500w
1825                    "
1826                    src="//modern-letter.com/cdn/shop/files/miumlab_2.png?v=1775836976&width=533"
1827                    sizes="(min-width: 1200px) 267px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
1828                    alt=""  
1829                    loading="lazy"
1830                    fetchpriority="high"
1831                    width="500"
1832                    height="500"
1833                  >
1834                
1835                
1836              </div>
1837<div
1838                class="m-promotion__item m:blocks-radius"
1839                style="--image-height: 120px;"
1840              >
1841                
1842                
1843<img
1844                    srcset="//modern-letter.com/cdn/shop/files/Happy-Kids-300x300.png?v=1767696726&width=165 165w,//modern-letter.com/cdn/shop/files/Happy-Kids-300x300.png?v=1767696726 300w
1845                    "
1846                    src="//modern-letter.com/cdn/shop/files/Happy-Kids-300x300.png?v=1767696726&width=533"
1847                    sizes="(min-width: 1200px) 267px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
1848                    alt=""  
1849                    loading="lazy"
1850                    fetchpriority="high"
1851                    width="300"
1852                    height="300"
1853                  >
1854                
1855                
1856              </div>
1857<div
1858                class="m-promotion__item m:blocks-radius"
1859                style="--image-height: 120px;"
1860              >
1861                
1862                
1863<img
1864                    srcset="//modern-letter.com/cdn/shop/files/La-virgule-300x300.png?v=1767696749&width=165 165w,//modern-letter.com/cdn/shop/files/La-virgule-300x300.png?v=1767696749 300w
1865                    "
1866                    src="//modern-letter.com/cdn/shop/files/La-virgule-300x300.png?v=1767696749&width=533"
1867                    sizes="(min-width: 1200px) 267px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
1868                    alt=""  
1869                    loading="lazy"
1870                    fetchpriority="high"
1871                    width="300"
1872                    height="300"
1873                  >
1874                
1875                
1876              </div>
1877<div
1878                class="m-promotion__item m:blocks-radius"
1879                style="--image-height: 120px;"
1880              >
1881                
1882                
1883<img
1884                    srcset="//modern-letter.com/cdn/shop/files/bestfit-300x300.png?v=1767696770&width=165 165w,//modern-letter.com/cdn/shop/files/bestfit-300x300.png?v=1767696770 300w
1885                    "
1886                    src="//modern-letter.com/cdn/shop/files/bestfit-300x300.png?v=1767696770&width=533"
1887                    sizes="(min-width: 1200px) 267px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
1888                    alt=""  
1889                    loading="lazy"
1890                    fetchpriority="high"
1891                    width="300"
1892                    height="300"
1893                  >
1894                
1895                
1896              </div>
1897<div
1898                class="m-promotion__item m:blocks-radius"
1899                style="--image-height: 120px;"
1900              >
1901                
1902                
1903<img
1904                    srcset="//modern-letter.com/cdn/shop/files/enyo-1-300x300.png?v=1767696791&width=165 165w,//modern-letter.com/cdn/shop/files/enyo-1-300x300.png?v=1767696791 300w
1905                    "
1906                    src="//modern-letter.com/cdn/shop/files/enyo-1-300x300.png?v=1767696791&width=533"
1907                    sizes="(min-width: 1200px) 267px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
1908                    alt=""  
1909                    loading="lazy"
1910                    fetchpriority="high"
1911                    width="300"
1912                    height="300"
1913                  >
1914                
1915                
1916              </div>
1917<div
1918                class="m-promotion__item m:blocks-radius"
1919                style="--image-height: 120px;"
1920              >
1921                
1922                
1923<img
1924                    srcset="//modern-letter.com/cdn/shop/files/Orthovitale-1-300x300.png?v=1767696809&width=165 165w,//modern-letter.com/cdn/shop/files/Orthovitale-1-300x300.png?v=1767696809 300w
1925                    "
1926                    src="//modern-letter.com/cdn/shop/files/Orthovitale-1-300x300.png?v=1767696809&width=533"
1927                    sizes="(min-width: 1200px) 267px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
1928                    alt=""  
1929                    loading="lazy"
1930                    fetchpriority="high"
1931                    width="300"
1932                    height="300"
1933                  >
1934                
1935                
1936              </div>
1937<div
1938                class="m-promotion__item m:blocks-radius"
1939                style="--image-height: 120px;"
1940              >
1941                
1942                
1943<img
1944                    srcset="//modern-letter.com/cdn/shop/files/maison-hadenn-2-300x300.png?v=1767697028&width=165 165w,//modern-letter.com/cdn/shop/files/maison-hadenn-2-300x300.png?v=1767697028 300w
1945                    "
1946                    src="//modern-letter.com/cdn/shop/files/maison-hadenn-2-300x300.png?v=1767697028&width=533"
1947                    sizes="(min-width: 1200px) 267px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
1948                    alt=""  
1949                    loading="lazy"
1950                    fetchpriority="high"
1951                    width="300"
1952                    height="300"
1953                  >
1954                
1955                
1956              </div>
1957<div
1958                class="m-promotion__item m:blocks-radius"
1959                style="--image-height: 120px;"
1960              >
1961                
1962                
1963<img
1964                    srcset="//modern-letter.com/cdn/shop/files/extra-terrasse-300x300.png?v=1767697043&width=165 165w,//modern-letter.com/cdn/shop/files/extra-terrasse-300x300.png?v=1767697043 300w
1965                    "
1966                    src="//modern-letter.com/cdn/shop/files/extra-terrasse-300x300.png?v=1767697043&width=533"
1967                    sizes="(min-width: 1200px) 267px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
1968                    alt=""  
1969                    loading="lazy"
1970                    fetchpriority="high"
1971                    width="300"
1972                    height="300"
1973                  >
1974                
1975                
1976              </div>
1977<div
1978                class="m-promotion__item m:blocks-radius"
1979                style="--image-height: 120px;"
1980              >
1981                
1982                
1983<img
1984                    srcset="//modern-letter.com/cdn/shop/files/oko.png?v=1777566637&width=165 165w,//modern-letter.com/cdn/shop/files/oko.png?v=1777566637&width=360 360w,//modern-letter.com/cdn/shop/files/oko.png?v=1777566637 500w
1985                    "
1986                    src="//modern-letter.com/cdn/shop/files/oko.png?v=1777566637&width=533"
1987                    sizes="(min-width: 1200px) 267px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
1988                    alt=""  
1989                    loading="lazy"
1990                    fetchpriority="high"
1991                    width="500"
1992                    height="500"
1993                  >
1994                
1995                
1996              </div>
1997<div
1998                class="m-promotion__item m:blocks-radius"
1999                style="--image-height: 120px;"
2000              >
2001                
2002                
2003<img
2004                    srcset="//modern-letter.com/cdn/shop/files/my_lubie.png?v=1777566789&width=165 165w,//modern-letter.com/cdn/shop/files/my_lubie.png?v=1777566789&width=360 360w,//modern-letter.com/cdn/shop/files/my_lubie.png?v=1777566789 500w
2005                    "
2006                    src="//modern-letter.com/cdn/shop/files/my_lubie.png?v=1777566789&width=533"
2007                    sizes="(min-width: 1200px) 267px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
2008                    alt=""  
2009                    loading="lazy"
2010                    fetchpriority="high"
2011                    width="500"
2012                    height="500"
2013                  >
2014                
2015                
2016              </div>
2017<div
2018                class="m-promotion__item m:blocks-radius"
2019                style="--image-height: 120px;"
2020              >
2021                
2022                
2023<img
2024                    srcset="//modern-letter.com/cdn/shop/files/little_frimousse_9cd8f8f8-17
2024db-4cc8-9fed-59481f2f761e.png?v=1777565501&width=165 165w,//modern-letter.com/cdn/shop/files/little_frimousse_9cd8f8f8-17db-4cc8-9fed-59481f2f761e.png?v=1777565501&width=360 360w,//modern-letter.com/cdn/shop/files/little_frimousse_9cd8f8f8-17db-4cc8-9fed-59481f2f761e.png?v=1777565501 500w
2025                    "
2026                    src="//modern-letter.com/cdn/shop/files/little_frimousse_9cd8f8f8-17db-4cc8-9fed-59481f2f761e.png?v=1777565501&width=533"
2027                    sizes="(min-width: 1200px) 267px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
2028                    alt=""  
2029                    loading="lazy"
2030                    fetchpriority="high"
2031                    width="500"
2032                    height="500"
2033                  >
2034                
2035                
2036              </div>
2037<div
2038                class="m-promotion__item m:blocks-radius"
2039                style="--image-height: 120px;"
2040              >
2041                
2042                
2043<img
2044                    srcset="//modern-letter.com/cdn/shop/files/Louvini-300x300.png?v=1767697061&width=165 165w,//modern-letter.com/cdn/shop/files/Louvini-300x300.png?v=1767697061 300w
2045                    "
2046                    src="//modern-letter.com/cdn/shop/files/Louvini-300x300.png?v=1767697061&width=533"
2047                    sizes="(min-width: 1200px) 267px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
2048                    alt=""  
2049                    loading="lazy"
2050                    fetchpriority="high"
2051                    width="300"
2052                    height="300"
2053                  >
2054                
2055                
2056              </div>
2057<div
2058                class="m-promotion__item m:blocks-radius"
2059                style="--image-height: 120px;"
2060              >
2061                
2062                
2063<img
2064                    srcset="//modern-letter.com/cdn/shop/files/Veldt-300x300.png?v=1767697077&width=165 165w,//modern-letter.com/cdn/shop/files/Veldt-300x300.png?v=1767697077 300w
2065                    "
2066                    src="//modern-letter.com/cdn/shop/files/Veldt-300x300.png?v=1767697077&width=533"
2067                    sizes="(min-width: 1200px) 267px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
2068                    alt=""  
2069                    loading="lazy"
2070                    fetchpriority="high"
2071                    width="300"
2072                    height="300"
2073                  >
2074                
2075                
2076              </div>
2077<div
2078                class="m-promotion__item m:blocks-radius"
2079                style="--image-height: 120px;"
2080              >
2081                
2082                
2083<img
2084                    srcset="//modern-letter.com/cdn/shop/files/nowa-3-300x300.png?v=1767697095&width=165 165w,//modern-letter.com/cdn/shop/files/nowa-3-300x300.png?v=1767697095 300w
2085                    "
2086                    src="//modern-letter.com/cdn/shop/files/nowa-3-300x300.png?v=1767697095&width=533"
2087                    sizes="(min-width: 1200px) 267px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
2088                    alt=""  
2089                    loading="lazy"
2090                    fetchpriority="high"
2091                    width="300"
2092                    height="300"
2093                  >
2094                
2095                
2096              </div>
2097<div
2098                class="m-promotion__item m:blocks-radius"
2099                style="--image-height: 120px;"
2100              >
2101                
2102                
2103<img
2104                    srcset="//modern-letter.com/cdn/shop/files/blondel_1.png?v=1777565785&width=165 165w,//modern-letter.com/cdn/shop/files/blondel_1.png?v=1777565785&width=360 360w,//modern-letter.com/cdn/shop/files/blondel_1.png?v=1777565785 500w
2105                    "
2106                    src="//modern-letter.com/cdn/shop/files/blondel_1.png?v=1777565785&width=533"
2107                    sizes="(min-width: 1200px) 267px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
2108                    alt=""  
2109                    loading="lazy"
2110                    fetchpriority="high"
2111                    width="500"
2112                    height="500"
2113                  >
2114                
2115                
2116              </div>
2117<div
2118                class="m-promotion__item m:blocks-radius"
2119                style="--image-height: 120px;"
2120              >
2121                
2122                
2123<img
2124                    srcset="//modern-letter.com/cdn/shop/files/Trois-for-all-1-300x300.png?v=1767696711&width=165 165w,//modern-letter.com/cdn/shop/files/Trois-for-all-1-300x300.png?v=1767696711 300w
2125                    "
2126                    src="//modern-letter.com/cdn/shop/files/Trois-for-all-1-300x300.png?v=1767696711&width=533"
2127                    sizes="(min-width: 1200px) 267px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
2128                    alt=""  
2129                    loading="lazy"
2130                    fetchpriority="high"
2131                    width="300"
2132                    height="300"
2133                  >
2134                
2135                
2136              </div>
2137<div
2138                class="m-promotion__item m:blocks-radius"
2139                style="--image-height: 120px;"
2140              >
2141                
2142                
2143<img
2144                    srcset="//modern-letter.com/cdn/shop/files/vert-jade
2144-300x300.png?v=1767697133&width=165 165w,//modern-letter.com/cdn/shop/files/vert-jade-300x300.png?v=1767697133 300w
2145                    "
2146                    src="//modern-letter.com/cdn/shop/files/vert-jade-300x300.png?v=1767697133&width=533"
2147                    sizes="(min-width: 1200px) 267px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
2148                    alt=""  
2149                    loading="lazy"
2150                    fetchpriority="high"
2151                    width="300"
2152                    height="300"
2153                  >
2154                
2155                
2156              </div>
2157<div
2158                class="m-promotion__item m:blocks-radius"
2159                style="--image-height: 120px;"
2160              >
2161                
2162                
2163<img
2164                    srcset="//modern-letter.com/cdn/shop/files/erro-300x300.png?v=1767697145&width=165 165w,//modern-letter.com/cdn/shop/files/erro-300x300.png?v=1767697145 300w
2165                    "
2166                    src="//modern-letter.com/cdn/shop/files/erro-300x300.png?v=1767697145&width=533"
2167                    sizes="(min-width: 1200px) 267px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
2168                    alt=""  
2169                    loading="lazy"
2170                    fetchpriority="high"
2171                    width="300"
2172                    height="300"
2173                  >
2174                
2175                
2176              </div>
2177<div
2178                class="m-promotion__item m:blocks-radius"
2179                style="--image-height: 120px;"
2180              >
2181                
2182                
2183<img
2184                    srcset="//modern-letter.com/cdn/shop/files/hector_1_a887618f-bb25-4898-9018-e031368ac2b6.png?v=1774003983&width=165 165w,//modern-letter.com/cdn/shop/files/hector_1_a887618f-bb25-4898-9018-e031368ac2b6.png?v=1774003983&width=360 360w,//modern-letter.com/cdn/shop/files/hector_1_a887618f-bb25-4898-9018-e031368ac2b6.png?v=1774003983 500w
2185                    "
2186                    src="//modern-letter.com/cdn/shop/files/hector_1_a887618f-bb25-4898-9018-e031368ac2b6.png?v=1774003983&width=533"
2187                    sizes="(min-width: 1200px) 267px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
2188                    alt=""  
2189                    loading="lazy"
2190                    fetchpriority="high"
2191                    width="500"
2192                    height="500"
2193                  >
2194                
2195                
2196              </div>
2197<div
2198                class="m-promotion__item m:blocks-radius"
2199                style="--image-height: 120px;"
2200              >
2201                
2202                
2203<img
2204                    srcset="//modern-letter.com/cdn/shop/files/nicolettes_1_261edeb3-3dd2-469f-8322-44376b5ac397.png?v=1777566470&width=165 165w,//modern-letter.com/cdn/shop/files/nicolettes_1_261edeb3-3dd2-469f-8322-44376b5ac397.png?v=1777566470&width=360 360w,//modern-letter.com/cdn/shop/files/nicolettes_1_261edeb3-3dd2-469f-8322-44376b5ac397.png?v=1777566470 500w
2205                    "
2206                    src="//modern-letter.com/cdn/shop/files/nicolettes_1_261edeb3-3dd2-469f-8322-44376b5ac397.png?v=1777566470&width=533"
2207                    sizes="(min-width: 1200px) 267px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
2208                    alt=""  
2209                    loading="lazy"
2210                    fetchpriority="high"
2211                    width="500"
2212                    height="500"
2213                  >
2214                
2215                
2216              </div>
2217<div
2218                class="m-promotion__item m:blocks-radius"
2219                style="--image-height: 120px;"
2220              >
2221                
2222                
2223<img
2224                    srcset="//modern-letter.com/cdn/shop/files/la_truffe.png?v=1774004166&width=165 165w,//modern-letter.com/cdn/shop/files/la_truffe.png?v=1774004166&width=360 360w,//modern-letter.com/cdn/shop/files/la_truffe.png?v=1774004166 500w
2225                    "
2226                    src="//modern-letter.com/cdn/shop/files/la_truffe.png?v=1774004166&width=533"
2227                    sizes="(min-width: 1200px) 267px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
2228                    alt=""  
2229                    loading="lazy"
2230                    fetchpriority="high"
2231                    width="500"
2232                    height="500"
2233                  >
2234                
2235                
2236              </div>
2237<div
2238                class="m-promotion__item m:blocks-radius"
2239                style="--image-height: 120px;"
2240              >
2241                
2242                
2243<img
2244                    srcset="//modern-letter.com/cdn/shop/files/niir_9a2c6436-365a-45ab-892d-5a28cd7ad588.png?v=1774004353&width=165 165w,//modern-letter.com/cdn/shop/files/niir_9a2c6436-365a-45ab-892d-5a28cd7ad588.png?v=1774004353&width=360 360w,//modern-letter.com/cdn/shop/files/niir_9a2c6436-365a-45ab-892d-5a28cd7ad588.png?v=1774004353 500w
2245                    "
2246                    src="//modern-letter.com/cdn/shop/files/niir_9a2c6436-365a-45ab-892d-5a28cd7ad588.png?v=1774004353&width=533"
2247                    sizes="(min-width: 1200px) 267px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
2248                    alt=""  
2249                    loading="lazy"
2250                    fetchpriority="high"
2251                    width="500"
2252                    height="500"
2253                  >
2254                
2255                
2256              </div>
2257<div
2258                class="m-promotion__item m:blocks-radius"
2259                style="--image-height: 120px;"
2260              >
2261                
2262                
2263<img
2264                    srcset="//modern-letter.com/cdn/shop/files/abyss_0fc423ef-af7c-4f1a-a71e-fdab9ac7393c.png?v=1777565337&width=165 165w,//modern-letter.com/cdn/shop/files/abyss_0fc423ef-af7c-4f1a-a71e-fdab9ac7393c.png?v=1777565337&width=360 360w,//modern-letter.com/cdn/shop/files/abyss_0fc423ef-af7c-4f1a-a71e-fdab9ac7393c.png?v=1777565337 500w
2265                    "
2266                    src="//modern-letter.com/cdn/shop/files/abyss_0fc423ef-af7c-4f1a-a71e-fdab9ac7393c.png?v=1777565337&width=533"
2267                    sizes="(min-width: 1200px) 267px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
2268                    alt=""  
2269                    loading="lazy"
2270                    fetchpriority="high"
2271                    width="500"
2272                    height="500"
2273                  >
2274                
2275                
2276              </div>
2277      </div>
2278    </m-scrolling-promotion>
2279  </div>
2280</section>
2281
2282</div><div id="shopify-section-template--30338464678222__custom_content_yGwzUH" class="shopify-section shopify-section-custom-content"><link href="//modern-letter.com/cdn/shop/t/10/assets/custom-content.css?v=122562997671464857791784623194" rel="stylesheet" type="text/css" media="all" />
2283
2284<style>
2285  #m-custom-template--30338464678222__custom_content_yGwzUH {
2286    --column-gap: 30px;
2287    --column-gap-mobile: 16px;
2288    --section-padding-top: 20px;
2289    --section-padding-bottom: 0px;
2290  }
2291</style>
2292
2293<div
2294  id="m-custom-template--30338464678222__custom_content_yGwzUH"
2295  class="m-section m-custom-content m-gradient m-color-default"
2296  data-section-type="custom-content"
2297  data-section-id="template--30338464678222__custom_content_yGwzUH"
2298>
2299  
2300  <div class="container-fluid m-section-my m-section-py m-custom-content__container">
2301    <div class="m-gradient m-color-default">
2302
2303
2304
2305
2306
2307      
2308        
2309        <div class="m-custom-content__wrapper m:flex m:flex-wrap">
2310          
2311            
2312            <div id="m-custom__block--html_hpFqDk" class="m:column m:display-flex m-custom-content__block m-custom-content__block-html lg:m:w-full m:w-full" >
2313              <div class="m-custom-content__block-inner m:w-full">
2314                
2315                    
2316                      <div class="desktop-spacing"></div>
2317
2318<style>
2319.desktop-spacing {
2320  display: none;
2321}
2322
2323@media (min-width: 769px) {
2324  .desktop-spacing {
2325    display: block;
2326    height: 0px;
2327  }
2328}
2329</style>
2330                    
2331                  
2332              </div>
2333            </div>
2334          
2335            
2336            <div id="m-custom__block--text_pWDxnb" class="m:column m:display-flex m-custom-content__block m-custom-content__block-text lg:m:w-full m:w-full m:items-center" >
2337              <div class="m-custom-content__block-inner m:w-full">
2338                
2339                    <div
2340                      class="m-richtext m-richtext--medium m:text-center m-scroll-tr
2340igger animate--fade-in-up"
2341                      style="--text-color: inherit;--animation-order: 2;"
2342                      
2343                        data-cascade
2344                      
2345                    >
2346                      
2347                      
2348                        <h3 class="m-richtext__title  h2">
2349                          NOTRE MANIFESTE
2350                        </h3>
2351                      
2352                      
2353                      
2354                    </div>
2355                  
2356              </div>
2357            </div>
2358          
2359            
2360            <div id="m-custom__block--html_pVpGzV" class="m:column m:display-flex m-custom-content__block m-custom-content__block-html lg:m:w-1/2 m:w-full" >
2361              <div class="m-custom-content__block-inner m:w-full">
2362                
2363                    
2364                      <section class="tml-manifeste">
2365  <div class="tml-manifeste__inner">
2366
2367    <div class="tml-manifeste__intro">
2368      <p>
2369        Des emails basés sur les comportements d'achat de vos clients.
2370        <b>Pas de spam</b>, peu de promotion, pas d'envois agressifs.
2371        Mais <b>le bon email</b>, <b>au bon moment</b>, avec le bon produit.
2372      </p>
2373    </div>
2374
2375    <div class="tml-manifeste__result">
2376      <p class="tml-manifeste__result-title">
2377        Le résultat
2378      </p>
2379
2380      <p>
2381        Un <b>coût d'acquisition optimisé</b>, une augmentation du chiffre d'affaires et davantage de clients fidèles malgré moins d'emails envoyés.
2382      </p>
2383    </div>
2384
2385    <div class="tml-manifeste__block">
2386      <h3>Mieux communiquer pour mieux fidéliser</h3>
2387
2388      <p>
2389        Des emails que vos clients attendent, avec des designs liés à votre marque et des textes adaptés à votre cible.
2390      </p>
2391    </div>
2392
2393    <div class="tml-manifeste__block">
2394      <h3>Comment ?</h3>
2395
2396      <p>
2397        En créant une segmentation précise, un planning éditorial adapté à votre croissance et des flux personnalisés en fonction de vos produits, de l'historique d'achat et du délai de réachat.
2398      </p>
2399    </div>
2400
2401  </div>
2402</section>
2403
2404<style>
2405
2406.tml-manifeste {
2407  background: #ffffff;
2408  padding: 0 20px;
2409}
2410
2411.tml-manifeste__inner {
2412  max-width: 980px;
2413  margin: 0 auto;
2414}
2415
2416.tml-manifeste h3 {
2417  font-family: 'ClarisaStories', serif;
2418  color: #1b442a;
2419  font-weight: 400;
2420  font-size: 28px;
2421  line-height: 1.1;
2422  margin: 0;
2423}
2424
2425.tml-manifeste p {
2426  font-family: 'InconsolataCondensed', sans-serif;
2427  font-size: 16px;
2428  line-height: 28px;
2429  color: #000000;
2430  margin: 0;
2431}
2432
2433.tml-manifeste__intro {
2434  max-width: 850px;
2435}
2436
2437.tml-manifeste__result {
2438  margin: 20px 0 28px;
2439  padding: 18px 22px;
2440  border-left: 4px solid #253261;
2441  background: rgba(37, 50, 97, 0.04);
2442  max-width: 850px;
2443}
2444
2445.tml-manifeste__result-title {
2446  color: #253261 !important;
2447  font-weight: 700;
2448  margin-bottom: 4px !important;
2449}
2450
2451.tml-manifeste__block {
2452  max-width: 850px;
2453  margin-top: 24px;
2454}
2455
2456.tml-manifeste__block h3::after {
2457  content: "";
2458  display: block;
2459  width: 48px;
2460  height: 2px;
2461  background: #1b442a;
2462  margin-top: 10px;
2463}
2464
2465.tml-manifeste__block p {
2466  margin-top: 14px;
2467}
2468
2469@media screen and (max-width: 768px) {
2470
2471  .tml-manifeste {
2472    padding: 0 20px;
2473  }
2474
2475  .tml-manifeste h3 {
2476    font-size: 24px;
2477  }
2478
2479  .tml-manifeste p {
2480    font-size: 16px;
2481    line-height: 26px;
2482  }
2483
2484  .tml-manifeste__result {
2485    padding: 16px 18px;
2486    margin: 18px 0 24px;
2487  }
2488
2489  .tml-manifeste__block {
2490    margin-top: 20px;
2491  }
2492
2493  .tml-manifeste__block p {
2494    margin-top: 12px;
2495  }
2496
2497}
2498
2499</style>
2500                    
2501                  
2502              </div>
2503            </div>
2504          
2505            
2506            <div id="m-custom__block--liquid_eXqLrb" class="m:column m:display-flex m-custom-content__block m-custom-content__block-liquid lg:m:w-1/2 m:w-full" >
2507              <div class="m-custom-content__block-inner m:w-full">
2508                
2509                    
2510                      <!DOCTYPE html>
2511<html lang="fr">
2512<head>
2513<meta charset="utf-8">
2514<meta name="viewport" content="width=device-width, initial-scale=1">
2515<title>Flows classiques vs Modern Letter</title>
2516<style>
2517  .tml-flows{
2518    background:#f3f1e7;
2519    border:1px solid #e3e0d0;
2520    border-radius:18px;
2521    padding:24px 20px;
2522    max-width:1180px;
2523    margin:0 auto;
2524    display:flex;
2525    gap:14px;
2526    align-items:flex-start;
2527    font-family:'Courier New',monospace;
2528    box-sizing:border-box;
2529  }
2530
2531  .tml-flows *{
2532    box-sizing:border-box;
2533  }
2534
2535  .tml-col-classic{
2536    flex:0 0 31%;
2537  }
2538
2539  .tml-col-modern{
2540    flex:1 1 auto;
2541    min-width:0;
2542  }
2543
2544  .tml-flows svg{
2545    width:100%;
2546    height:auto;
2547    display:block;
2548  }
2549
2550  .tml-modern-mobile{
2551    display:none;
2552  }
2553
2554  .tml-flows .title{
2555    font-family:Georgia,'Times New Roman',serif;
2556    font-weight:700;
2557    fill:#1f2d4f;
2558  }
2559
2560  .tml-flows .sub{
2561    font-family:Georgia,serif;
2562    font-style:italic;
2563  }
2564
2565  .tml-flows .tseg{
2566    stroke:#9bb190;
2567    stroke-width:2.4;
2568    fill:none;
2569  }
2570
2571  .tml-flows .seg-classic{
2572    stroke:#e6c295;
2573  }
2574
2575  .tml-flows .seg-modern.lit-g{
2576    stroke:#1d8a4e;
2577    stroke-width:3.6;
2578  }
2579
2580  .tml-flows .seg-classic.lit-r{
2581    stroke:#cf8a34;
2582    stroke-width:3.6;
2583  }
2584
2585  .tml-flows .mbox rect,
2586  .tml-flows .cbox rect{
2587    transition:fill .25s, stroke .25s;
2588  }
2589
2590  .tml-flows .mbox.active rect{
2591    fill:#e6f2ea;
2592    stroke:#1d8a4e;
2593    stroke-width:2.8;
2594  }
2595
2596  .tml-flows .mbox.active .dot{
2597    fill:#1d8a4e;
2598  }
2599
2600  .tml-flows .achat.win rect{
2601    stroke:#1d8a4e;
2602    stroke-width:3;
2603  }
2604
2605  .tml-flows .achat.win{
2606    animation:tmlpulse 1.1s ease-in-out infinite;
2607  }
2608
2609  @keyframes tmlpulse{
2610    0%,100%{
2611      filter:drop-shadow(0 0 5px rgba(29,138,78,.4));
2612    }
2613
2614    50%{
2615      filter:drop-shadow(0 0 14px rgba(29,138,78,.75));
2616    }
2617  }
2618
2619  .tml-flows .cbox.fail rect{
2620    fill:#fbefdf;
2621    stroke:#e6c295;
2622  }
2623
2624  .tml-flows .cbox.fail .dot{
2625    fill:#cf8a34;
2626  }
2627
2628  .tml-flows .cbox.active-red rect{
2629    fill:#f6e2c4;
2630    stroke:#cf8a34;
2631    stroke-width:2.8;
2632  }
2633
2634  .tml-flows .token .halo{
2635    opacity:.20;
2636  }
2637
2638  .tml-flows .token.green .halo,
2639  .tml-flows .token.green .core{
2640    fill:#1d8a4e;
2641  }
2642
2643  .tml-flows .token.red .halo,
2644  .tml-flows .token.red .core{
2645    fill:#cf8a34;
2646  }
2647
2648  .tml-flows .badge{
2649    opacity:0;
2650    transition:opacity .35s;
2651  }
2652
2653  .tml-flows .badge.show{
2654    opacity:1;
2655  }
2656
2657  /* Optimisation mobile uniquement */
2658  @media (max-width:760px){
2659    .tml-flows{
2660      flex-direction:column;
2661      gap:10px;
2662      padding:12px 8px;
2663      border-radius:14px;
2664    }
2665
2666    .tml-col-classic,
2667    .tml-col-modern{
2668      flex:1 1 auto;
2669      width:100%;
2670    }
2671
2672    .tml-col-classic{
2673      border-bottom:1px dashed #cbc9bc;
2674      padding-bottom:10px;
2675    }
2676
2677    .tml-modern-desktop{
2678      display:none;
2679    }
2680
2681    .tml-modern-mobile{
2682      display:block;
2683    }
2684
2685    /* Premier flow réduit pour prendre moins de hauteur */
2686    .tml-col-classic > svg{
2687      width:78%;
2688      max-width:280px;
2689      margin:0 auto;
2690    }
2691
2692    /* Flow Modern Letter légèrement plus large pour rester lisible */
2693    .tml-modern-mobile > svg{
2694      width:88%;
2695      max-width:320px;
2696      margin:0 auto;
2697    }
2698  }
2699
2700  @media (prefers-reduced-motion:reduce){
2701    .tml-flows .achat.win{
2702      animation:none;
2703    }
2704  }
2705</style>
2706</head>
2707<body>
2708
2709<!-- ============ A COLLER DANS SHOPIFY (bloc / section HTML) ============ -->
2710<div class="tml-flows">
2711
2712  <svg width="0" height="0" style="position:absolute" aria-hidden="true"><defs>
2713    <marker id="arrow"   markerWidth="10" markerHeight="10" refX="7" refY="3.5" orient="auto" markerUnits="userSpaceOnUse"><path d="M0,0 L8,3.5 L0,7 Z" fill="#9bb190"/></marker>
2714    <marker id="arrowR0" markerWidth="10" markerHeight="10" refX="7" refY="3.5" orient="auto" markerUnits="userSpaceOnUse"><path d="M0,0 L8,3.5 L0,7 Z" fill="#e6c295"/></marker>
2715    <marker id="arrowG"  markerWidth="10" markerHeight="10" refX="7" refY="3.5" orient="auto" markerUnits="userSpaceOnUse"><path d="M0,0 L8,3.5 L0,7 Z" fill="#1d8a4e"/></marker>
2716    <marker id="arrowR"  markerWidth="10" markerHeight="10" refX="7" refY="3.5" orient="auto" markerUnits="userSpaceOnUse"><path d="M0,0 L8,3.5 L0,7 Z" fill="#cf8a34"/></marker>
2717  </defs></svg>
2718
2719  <!-- gauche : flows classiques (identique desktop/mobile) -->
2720  <div class="tml-col-classic">
2721    <svg viewBox="0 0 360 840" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Flows classiques (convertit moins bien)">
2722      <text class="title" x="180" y="34" text-anchor="middle" font-size="22">Les flows classiques</text>
2723      <text class="sub" x="180" y="60" text-anchor="middle" font-size="13.5" fill="#b0701c">Convertit moins bien</text>
2724      <line id="ts-cl0" class="tseg seg-classic" x1="180.0" y1="168.0" x2="180.0" y2="234.0" marker-end="url(#arrowR0)"/>
2725      <line id="ts-cl1" class="tseg seg-classic" x1="180.0" y1="290.0" x2="180.0" y2="356.0" marker-end="url(#arrowR0)"/>
2726      <line id="ts-cl2" class="tseg seg-classic" x1="180.0" y1="412.0" x2="180.0" y2="478.0" marker-end="url(#arrowR0)"/>
2727      <line id="ts-cl3" class="tseg seg-classic" x1="180.0" y1="534.0" x2="180.0" y2="600.0" marker-end="url(#arrowR0)"/>
2728      <line id="ts-cl4" class="tseg seg-classic" x1="180.0" y1="656.0" x2="180.0" y2="722.0" marker-end="url(#arrowR0)"/>
2729      <g id="tb-c0" class="tbox cbox fail">
2730      <rect x="30.0" y="112.0" width="300" height="56" rx="13" fill="#ffffff" stroke="#cdcab8" stroke-width="1.6"/>
2731      <circle class="dot" cx="54.0" cy="140.0" r="6" fill="#b6b6ae"/>
2732      <text x="72.0" y="140.0" dominant-baseline="central" font-family="'Courier New',monospace" font-size="17" fill="#232323">Déclencheur</text>
2733      </g>
2734      <g id="tb-c1" class="tbox cbox fail">
2735      <rect x="30.0" y="234.0" width="300" height="56" rx="13" fill="#ffffff" stroke="#cdcab8" stroke-width="1.6"/>
2736      <circle class="dot" cx="54.0" cy="262.0" r="6" fill="#b6b6ae"/>
2737      <text x="72.0" y="262.0" dominant-baseline="central" font-family="'Courier New',monospace" font-size="17" fill="#232323">Email · Bienvenue 1</text>
2738      </g>
2739      <g id="tb-c2" class="tbox cbox fail">
2740      <rect x="30.0" y="356.0" width="300" height="56" rx="13" fill="#ffffff" stroke="#cdcab8" stroke-width="1.6"/>
2741      <circle class="dot" cx="54.0" cy="384.0" r="6" fill="#b6b6ae"/>
2742      <text x="72.0" y="384.0" dominant-baseline="central" font-family="'Courier New',monospace" font-size="17" fill="#232323">Attente · 1 jour</text>
2743      </g>
2744      <g id="tb-c3" class="tbox cbox fail">
2745      <rect x="30.0" y="478.0" width="300" height="56" rx="13" fill="#ffffff" stroke="#cdcab8" stroke-width="1.6"/>
2746      <circle class="dot" cx="54.0" cy="506.0" r="6" fill="#b6b6ae"/>
2747      <text x="72.0" y="506.0" dominant-baseline="central" font-family="'Courier New',monospace" font-size="17" fill="#232323">Email · Bienvenue 2</text>
2748      </g>
2749      <g id="tb-c4" class="tbox cbox fail">
2750      <rect x="30.0" y="600.0" width="300" height="56" rx="13" fill="#ffffff" stroke="#cdcab8" stroke-width="1.6"/>
2751      <circle class="dot" cx="54.0" cy="628.0" r="6" fill="#b6b6ae"/>
2752      <text x="72.0" y="628.0" dominant-baseline="central" font-family="'Courier New',monospace" font-size="17" fill="#232323">Attente · 1 jour</text>
2753      </g>
2754      <g id="tb-c5" class="tbox cbox fail">
2755      <rect x="30.0" y="722.0" width="300" height="56" rx="13" fill="#ffffff" stroke="#cdcab8" stroke-width="1.6"/>
2756      <circle class="dot" cx="54.0" cy="750.0" r="6" fill="#b6b6ae"/>
2757      <text x="72.0" y="750.0" dominant-baseline="central" font-family="'Courier New',monospace" font-size="17" fill="#232323">Email · Bienvenue 3</text>
2758      </g>
2759      <g id="tml-fail" class="badge" transform="translate(180,800)">
2760        <rect x="-96" y="-16" width="192" height="32" rx="16" fill="#fbefdf" stroke="#cf8a34" stroke-width="1.4"/>
2761        <text x="0" y="1" text-anchor="middle" dominant-baseline="central" font-size="13.5" fill="#b0701c" font-family="'Courier New',monospace">Conversion plus faible</text>
2762      </g>
2763      <g id="tml-token-red" class="token red" opacity="0"><circle class="halo" r="13"/><circle class="core" r="6.5"/></g>
2764    </svg>
2765  </div>
2766
2767  <!-- droite : flows Modern Letter -->
2768  <div class="tml-col-modern">
2769
2770    <!-- version desktop : arborescence complete -->
2771    <div class="tml-modern-desktop">
2772      <svg viewBox="0 0 830 870" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Flows The Modern Letter (desktop)">
2773        <text class="title" x="410" y="34" text-anchor="middle" font-size="22">Les flows The Modern Letter</text>
2774        <text class="sub" x="410" y="60" text-anchor="middle" font-size="13.5" fill="#1d8a4e">Convertit, puis fidélise</text>
2775        <line id="ts-decl_profil" class="tseg seg-modern" x1="410.0" y1="168.0" x2="410.0" y2="222.0" marker-end="url(#arrow)"/>
2776        <line id="ts-s_profil_down" class="tseg seg-modern" x1="410.0" y1="278.0" x2="410.0" y2="306.0"/>
2777        <line id="ts-bus1_h_left" class="tseg seg-modern" x1="410.0" y1="306.0" x2="190.0" y2="306.0"/>
2778        <line id="ts-bus1_h_right" class="tseg seg-modern" x1="410.0" y1="306.0" x2="630.0" y2="306.0"/>
2779        <line id="ts-bus1_left" class="tseg seg-modern" x1="190.0" y1="306.0" x2="190.0" y2="332.0" marker-end="url(#arrow)"/>
2780        <line id="ts-bus1_right" class="tseg seg-modern" x1="630.0" y1="306.0" x2="630.0" y2="332.0" marker-end="url(#arrow)"/>
2781        <line id="ts-bienv_att_l" class="tseg seg-modern" x1="190.0" y1="388.0" x2="190.0" y2="442.0" marker-end="url(#arrow)"/>
2782        <line id="ts-contenu_att_r" class="tseg seg-modern" x1="630.0" y1="388.0" x2="630.0" y2="442.0" marker-end="url(#arrow)"/>
2783        <line id="ts-att_dec_l" class="tseg seg-modern" x1="190.0" y1="498.0" x2="190.0" y2="552.0" marker-end="url(#arrow)"/>
2784        <line id="ts-att_dec_r" class="tseg seg-modern" x1="630.0" y1="498.0" x2="630.0" y2="552.0" marker-end="url(#arrow)"/>
2785        <line id="ts-dec_bus_l" class="tseg seg-modern" x1="190.0" y1="608.0" x2="190.0" y2="638.0"/>
2786        <line id="ts-dec_bus_r" class="tseg seg-modern" x1="630.0" y1="608.0" x2="630.0" y2="638.0"/>
2787        <line id="ts-bus2l_left" class="tseg seg-modern" x1="190.0" y1="638.0" x2="96.0" y2="638.0"/>
2788        <line id="ts-bus2l_right" class="tseg seg-modern" x1="190.0" y1="638.0" x2="284.0" y2="638.0"/>
2789        <line id="ts-bus2_relance" class="tseg seg-modern" x1="96.0" y1="638.0" x2="96.0" y2="660.0" marker-end="url(#arrow)"/>
2790        <line id="ts-bus2_offre" class="tseg seg-modern" x1="284.0" y1="638.0" x2="284.0" y2="660.0" marker-end="url(#arrow)"/>
2791        <line id="ts-bus2r_left" class="tseg seg-modern" x1="630.0" y1="638.0" x2="536.0" y2="638.0"/>
2792        <line id="ts-bus2r_right" class="tseg seg-modern" x1="630.0" y1="638.0" x2="724.0" y2="638.0"/>
2793        <line id="ts-bus2_produit" class="tseg seg-modern" x1="536.0" y1="638.0" x2="536.0" y2="660.0" marker-end="url(#arrow)"/>
2794        <line id="ts-bus2_cross" class="tseg seg-modern" x1="724.0" y1="638.0" x2="724.0" y2="660.0" marker-end="url(#arrow)"/>
2795        <line id="ts-offre_bus3" class="tseg seg-modern" x1="284.0" y1="716.0" x2="284.0" y2="740.0"/>
2796        <line id="ts-produit_bus3" class="tseg seg-modern" x1="536.0" y1="716.0" x2="536.0" y2="740.0"/>
2797        <line id="ts-bus3_left" class="tseg seg-modern" x1="284.0" y1="740.0" x2="410.0" y2="740.0"/>
2798        <line id="ts-bus3_right" class="tseg seg-modern" x1="536.0" y1="740.0" x2="410.0" y2="740.0"/>
2799        <line id="ts-bus3_achat" class="tseg seg-modern" x1="410.0" y1="740.0" x2="410.0" y2="764.0" marker-end="url(#arrow)"/>
2800        <g id="tb-m_decl" class="tbox mbox">
2801        <rect x="295.0" y="112.0" width="230" height="56" rx="13" fill="#ffffff" stroke="#cdcab8" stroke-width="1.6"/>
2802        <circle class="dot" cx="319.0" cy="140.0" r="6" fill="#1f2d4f"/>
2803        <text x="337.0" y="140.0" dominant-baseline="central" font-family="'Courier New',monospace" font-size="17" fill="#232323">Déclencheur</text>
2804        </g>
2805        <g id="tb-m_profil" class="tbox mbox">
2806        <rect x="295.0" y="222.0" width="230" height="56" rx="13" fill="#ffffff" stroke="#1f2d4f" stroke-width="1.9"/>
2807        <circle class="dot" cx="319.0" cy="250.0" r="6" fill="#1f2d4f"/>
2808        <text x="337.0" y="250.0" dominant-baseline="central" font-family="'Courier New',monospace" font-size="17" fill="#232323">Profil client ?</text>
2809        </g>
2810        <g id="tb-m_bienv" class="tbox mbox">
2811        <rect x="75.0" y="332.0" width="230" height="56" rx="13" fill="#ffffff" stroke="#cdcab8" stroke-width="1.6"/>
2812        <circle class="dot" cx="99.0" cy="360.0" r="6" fill="#1d4d34"/>
2813        <text x="117.0" y="360.0" dominant-baseline="central" font-family="'Courier New',monospace" font-size="17" fill="#232323">Bienvenue</text>
2814        </g>
2815        <g id="tb-m_contenu" class="tbox mbox">
2816        <rect x="515.0" y="332.0" width="230" height="56" rx="13" fill="#ffffff" stroke="#cdcab8" stroke-width="1.6"/>
2817        <circle class="dot" cx="539.0" cy="360.0" r="6" fill="#1d4d34"/>
2818        <text x="557.0" y="360.0" dominant-baseline="central" font-family="'Courier New',monospace" font-size="17" fill="#232323">Contenu VIP</text>
2819        </g>
2820        <g id="tb-m_att_l" class="tbox mbox">
2821        <rect x="75.0" y="442.0" width="230" height="56" rx="13" fill="#ffffff" stroke="#cdcab8" stroke-width="1.6"/>
2822        <circle class="dot" cx="99.0" cy="470.0" r="6" fill="#b6b6ae"/>
2823        <text x="117.0" y="470.0" dominant-baseline="central" font-family="'Courier New',monospace" font-size="17" fill="#232323">Attente</text>
2824        </g>
2825        <g id="tb-m_att_r" class="tbox mbox">
2826        <rect x="515.0" y="442.0" width="230" height="56" rx="13" fill="#ffffff" stroke="#cdcab8" stroke-width="1.6"/>
2827        <circle class="dot" cx="539.0" cy="470.0" r="6" fill="#b6b6ae"/>
2828        <text x="557.0" y="470.0" dominant-baseline="central" font-family="'Courier New',monospace" font-size="17" fill="#232323">Attente</text>
2829        </g>
2830        <g id="tb-m_1er" class="tbox mbox">
2831        <rect x="75.0" y="552.0" width="230" height="56" rx="13" fill="#ffffff" stroke="#1f2d4f" stroke-width="1.9"/>
2832        <circle class="dot" cx="99.0" cy="580.0" r="6" fill="#1f2d4f"/>
2833        <text x="117.0" y="580.0" dominant-baseline="central" font-family="'Courier New',monospace" font-size="17" fill="#232323">1er achat</text>
2834        </g>
2835        <g id="tb-m_2eme" class="tbox mbox">
2836        <rect x="515.0" y="552.0" width="230" height="56" rx="13" fill="#ffffff" stroke="#1f2d4f" stroke-width="1.9"/>
2837        <circle class="dot" cx="539.0" cy="580.0" r="6" fill="#1f2d4f"/>
2838        <text x="557.0" y="580.0" dominant-baseline="central" font-family="'Courier New',monospace" font-size="17" fill="#232323">2ème achat</text>
2839        </g>
2840        <g id="tb-m_relance" class="tbox mbox">
2841        <rect x="5.0" y="660.0" width="182" height="56" rx="13" fill="#ffffff" stroke="#cdcab8" stroke-width="1.6"/>
2842        <circle class="dot" cx="29.0" cy="688.0" r="6" fill="#1d4d34"/>
2843        <text x="47.0" y="688.0" dominant-baseline="central" font-family="'Courier New',monospace" font-size="16" fill="#232323">Relance</text>
2844        </g>
2845        <g id="tb-m_offre" class="tbox mbox">
2846        <rect x="193.0" y="660.0" width="182" height="56" rx="13" fill="#ffffff" stroke="#cdcab8" stroke-width="1.6"/>
2847        <circle class="dot" cx="217.0" cy="688.0" r="6" fill="#1d4d34"/>
2848        <text x="235.0" y="688.0" dominant-baseline="central" font-family="'Courier New',monospace" font-size="16" fill="#232323">Offre</text>
2849        </g>
2850        <g id="tb-m_produit" class="tbox mbox">
2851        <rect x="445.0" y="660.0" width="182" height="56" rx="13" fill="#ffffff" stroke="#cdcab8" stroke-width="1.6"/>
2852        <circle class="dot" cx="469.0" cy="688.0" r="6" fill="#1d4d34"/>
2853        <text x="487.0" y="688.0" dominant-baseline="central" font-family="'Courier New',monospace" font-size="16" fill="#232323">Produit</text>
2854        </g>
2855        <g id="tb-m_cross" class="tbox mbox">
2856        <rect x="633.0" y="660.0" width="182" height="56" rx="13" fill="#ffffff" stroke="#cdcab8" stroke-width="1.6"/>
2857        <circle class="dot" cx="657.0" cy="688.0" r="6" fill="#1d4d34"/>
2858        <text x="675.0" y="688.0" dominant-baseline="central" font-family="'Courier New',monospace" font-size="16" fill="#232323">Cross-sell</text>
2859        </g>
2860        <g id="tb-m_achat" class="tbox mbox achat">
2861        <rect x="295.0" y="764.0" width="230" height="56" rx="13" fill="#1d3d2b" stroke="#cdcab8" stroke-width="1.6"/>
2862        <text x="410.0" y="792.0" text-anchor="middle" dominant-baseline="central" font-family="'Courier New',monospace" font-size="17" font-weight="700" fill="#ffffff">Achat</text>
2863        </g>
2864        <g id="tml-win" class="badge" transform="translate(600,792)">
2865          <rect x="-58" y="-16" width="116" height="32" rx="16" fill="#e
28656f2ea" stroke="#1d8a4e" stroke-width="1.4"/>
2866          <text x="0" y="1" text-anchor="middle" dominant-baseline="central" font-size="14" fill="#1d8a4e" font-family="'Courier New',monospace">✓ Achat</text>
2867        </g>
2868        <text id="tml-journey" x="410" y="852" text-anchor="middle" font-size="14" fill="#1d8a4e" font-family="'Courier New',monospace"></text>
2869        <g id="tml-token-green" class="token green" opacity="0"><circle class="halo" r="13"/><circle class="core" r="6.5"/></g>
2870      </svg>
2871    </div>
2872
2873    <!-- version mobile : compacte, fourche conservee, sans slider -->
2874    <div class="tml-modern-mobile">
2875      <svg viewBox="0 0 380 646" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Flows The Modern Letter (mobile)">
2876        <text class="title" x="190" y="26" text-anchor="middle" font-size="19">Les flows The Modern Letter</text>
2877        <text class="sub" x="190" y="49" text-anchor="middle" font-size="12.5" fill="#1d8a4e">Convertit, puis fidélise</text>
2878        <line id="ts-mo_decl_profil" class="tseg seg-modern" x1="190.0" y1="127.0" x2="190.0" y2="169.0" marker-end="url(#arrow)"/>
2879        <line id="ts-mo_s_down" class="tseg seg-modern" x1="190.0" y1="215.0" x2="190.0" y2="240.0"/>
2880        <line id="ts-mo_h_left" class="tseg seg-modern" x1="190.0" y1="240.0" x2="104.0" y2="240.0"/>
2881        <line id="ts-mo_h_right" class="tseg seg-modern" x1="190.0" y1="240.0" x2="276.0" y2="240.0"/>
2882        <line id="ts-mo_left_down" class="tseg seg-modern" x1="104.0" y1="240.0" x2="104.0" y2="263.0" marker-end="url(#arrow)"/>
2883        <line id="ts-mo_right_down" class="tseg seg-modern" x1="276.0" y1="240.0" x2="276.0" y2="263.0" marker-end="url(#arrow)"/>
2884        <line id="ts-mo_bienv_att_l" class="tseg seg-modern" x1="104.0" y1="309.0" x2="104.0" y2="355.0" marker-end="url(#arrow)"/>
2885        <line id="ts-mo_contenu_att_r" class="tseg seg-modern" x1="276.0" y1="309.0" x2="276.0" y2="355.0" marker-end="url(#arrow)"/>
2886        <line id="ts-mo_att_dec_l" class="tseg seg-modern" x1="104.0" y1="401.0" x2="104.0" y2="447.0" marker-end="url(#arrow)"/>
2887        <line id="ts-mo_att_dec_r" class="tseg seg-modern" x1="276.0" y1="401.0" x2="276.0" y2="447.0" marker-end="url(#arrow)"/>
2888        <line id="ts-mo_dec_conv_l" class="tseg seg-modern" x1="104.0" y1="493.0" x2="104.0" y2="534.0"/>
2889        <line id="ts-mo_dec_conv_r" class="tseg seg-modern" x1="276.0" y1="493.0" x2="276.0" y2="534.0"/>
2890        <line id="ts-mo_conv_h_l" class="tseg seg-modern" x1="104.0" y1="534.0" x2="190.0" y2="534.0"/>
2891        <line id="ts-mo_conv_h_r" class="tseg seg-modern" x1="276.0" y1="534.0" x2="190.0" y2="534.0"/>
2892        <line id="ts-mo_conv_achat" class="tseg seg-modern" x1="190.0" y1="534.0" x2="190.0" y2="557.0" marker-end="url(#arrow)"/>
2893        <g id="tb-mm_decl" class="tbox mbox">
2894        <rect x="85.0" y="81.0" width="210" height="46" rx="13" fill="#ffffff" stroke="#cdcab8" stroke-width="1.6"/>
2895        <circle class="dot" cx="109.0" cy="104.0" r="6" fill="#1f2d4f"/>
2896        <text x="127.0" y="104.0" dominant-baseline="central" font-family="'Courier New',monospace" font-size="14" fill="#232323">Déclencheur</text>
2897        </g>
2898        <g id="tb-mm_profil" class="tbox mbox">
2899        <rect x="85.0" y="169.0" width="210" height="46" rx="13" fill="#ffffff" stroke="#1f2d4f" stroke-width="1.9"/>
2900        <circle class="dot" cx="109.0" cy="192.0" r="6" fill="#1f2d4f"/>
2901        <text x="127.0" y="192.0" dominant-baseline="central" font-family="'Courier New',monospace" font-size="14" fill="#232323">Profil client ?</text>
2902        </g>
2903        <g id="tb-mm_bienv" class="tbox mbox">
2904        <rect x="23.0" y="263.0" width="162" height="46" rx="13" fill="#ffffff" stroke="#cdcab8" stroke-width="1.6"/>
2905        <circle class="dot" cx="47.0" cy="286.0" r="6" fill="#1d4d34"/>
2906        <text x="65.0" y="286.0" dominant-baseline="central" font-family="'Courier New',monospace" font-size="13" fill="#232323">Bienvenue</text>
2907        </g>
2908        <g id="tb-mm_contenu" class="tbox mbox">
2909        <rect x="195.0" y="263.0" width="162" height="46" rx="13" fill="#ffffff" stroke="#cdcab8" stroke-width="1.6"/>
2910        <circle class="dot" cx="219.0" cy="286.0" r="6" fill="#1d4d34"/>
2911        <text x="237.0" y="286.0" dominant-baseline="central" font-family="'Courier New',monospace" font-size="13" fill="#232323">Contenu VIP</text>
2912        </g>
2913        <g id="tb-mm_att_l" class="tbox mbox">
2914        <rect x="23.0" y="355.0" width="162" height="46" rx="13" fill="#ffffff" stroke="#cdcab8" stroke-width="1.6"/>
2915        <circle class="dot" cx="47.0" cy="378.0" r="6" fill="#b6b6ae"/>
2916        <text x="65.0" y="378.0" dominant-baseline="central" font-family="'Courier New',monospace" font-size="13" fill="#232323">Attente</text>
2917        </g>
2918        <g id="tb-mm_att_r" class="tbox mbox">
2919        <rect x="195.0" y="355.0" width="162" height="46" rx="13" fill="#ffffff" stroke="#cdcab8" stroke-width="1.6"/>
2920        <circle class="dot" cx="219.0" cy="378.0" r="6" fill="#b6b6ae"/>
2921        <text x="237.0" y="378.0" dominant-baseline="central" font-family="'Courier New',monospace" font-size="13" fill="#232323">Attente</text>
2922        </g>
2923        <g id="tb-mm_1er" class="tbox mbox">
2924        <rect x="23.0" y="447.0" width="162" height="46" rx="13" fill="#ffffff" stroke="#1f2d4f" stroke-width="1.9"/>
2925        <circle class="dot" cx="47.0" cy="470.0" r="6" fill="#1f2d4f"/>
2926        <text x="65.0" y="470.0" dominant-baseline="central" font-family="'Courier New',monospace" font-size="13" fill="#232323">1er achat</text>
2927        </g>
2928        <g id="tb-mm_2eme" class="tbox mbox">
2929        <rect x="195.0" y="447.0" width="162" height="46" rx="13" fill="#ffffff" stroke="#1f2d4f" stroke-width="1.9"/>
2930        <circle class="dot" cx="219.0" cy="470.0" r="6" fill="#1f2d4f"/>
2931        <text x="237.0" y="470.0" dominant-baseline="central" font-family="'Courier New',monospace" font-size="13" fill="#232323">2ème achat</text>
2932        </g>
2933        <g id="tb-mm_achat" class="tbox mbox achat">
2934        <rect x="85.0" y="557.0" width="210" height="46" rx="13" fill="#1d3d2b" stroke="#cdcab8" stroke-width="1.6"/>
2935        <text x="190.0" y="580.0" text-anchor="middle" dominant-baseline="central" font-family="'Courier New',monospace" font-size="14" font-weight="700" fill="#ffffff">Achat</text>
2936        </g>
2937        <text id="tml-journey-m" x="190" y="628" text-anchor="middle" font-size="13" fill="#1d8a4e" font-family="'Courier New',monospace"></text>
2938        <g id="tml-token-green-m" class="token green" opacity="0"><circle class="halo" r="11"/><circle class="core" r="5.5"/></g>
2939      </svg>
2940    </div>
2941
2942  </div>
2943</div>
2944
2945<script>
2946(function(){
2947  function init(){
2948    var root=document.querySelector('.tml-flows');
2949    if(!root){return;}
2950    /* chaque lancement recoit un id unique ; on marque l'element.
2951       Si un nouveau lancement arrive, les anciennes boucles se voient
2952       "perimees" et s'arretent -> jamais de double vitesse, jamais de gel. */
2953    var runId=(window.__tmlRun=(window.__tmlRun||0)+1);
2954    root.__tmlRun=runId;
2955    var alive=function(){return root.__tmlRun===runId;};
2956    var $=function(id){return document.getElementById(id);};
2957    var reduce=window.matchMedia('(prefers-reduced-motion: reduce)').matches;
2958    var sleep=function(ms){return new Promise(function(r){setTimeout(r,ms);});};
2959    var dist=function(a,b){return Math.hypot(b[0]-a[0],b[1]-a[1]);};
2960
2961    var origMk=new Map();
2962    document.querySelectorAll('.tml-flows .tseg').forEach(function(s){origMk.set(s,s.getAttribute('marker-end'));});
2963
2964    function lightSeg(id,color){
2965      var el=$('ts-'+id); if(!el)return;
2966      el.classList.add(color==='red'?'lit-r':'lit-g');
2967      if(origMk.get(el)) el.setAttribute('marker-end',color==='red'?'url(#arrowR)':'url(#arrowG)');
2968    }
2969    function activateBox(id,cls){var el=$('tb-'+id); if(el)el.classList.add(cls);}
2970
2971    function runJourney(token,start,legs,color){
2972      return new Promise(function(resolve){
2973        token.setAttribute('transform','translate('+start[0]+','+start[1]+')');
2974        token.setAttribute('opacity','1');
2975        var i=0, from=start;
2976        (function startLeg(){
2977          if(i>=legs.length){resolve();return;}
2978          var leg=legs[i];
2979          if(leg.seg) lightSeg(leg.seg,color);
2980          var to=leg.to, D=dist(from,to), dur=Math.max(D/0.32,130), t0=null;
2981          function step(ts){
2982            if(!alive()){resolve();return;}
2983            if(!t0)t0=ts;
2984            var p=Math.min((ts-t0)/dur,1);
2985            token.setAttribute('transform','translate('+(from[0]+(to[0]-from[0])*p)+','+(from[1]+(to[1]-from[1])*p)+')');
2986            if(p<1){requestAnimationFrame(step);}
2987            else{ if(leg.box) activateBox(leg.box, leg.box.indexOf('achat')>-1?'win':(color==='red'?'active-red':'active'));
2988                  from=to; i++; startLeg(); }
2989          }
2990          requestAnimationFrame(step);
2991        })();
2992      });
2993    }
2994
2995    // -------- desktop --------
2996    var A=[
2997      {to:[410,250],seg:'decl_profil',box:'m_profil'},{to:[410,306],seg:'s_profil_down'},
2998      {to:[190,306],seg:'bus1_h_left'},{to:[190,360],seg:'bus1_left',box:'m_bienv'},
2999      {to:[190,470],seg:'bienv_att_l',box:'m_att_l'},{to:[190,580],seg:'att_dec_l',box:'m_1er'},
3000      {to:[190,638],seg:'dec_bus_l'},{to:[284,638],seg:'bus2l_right'},
3001      {to:[284,688],seg:'bus2_offre',box:'m_offre'},{to:[284,716],seg:'offre_bus3'},
3002      {to:[410,740],seg:'bus3_left'},{to:[410,764],seg:'bus3_achat',box:'m_achat'}];
3003    var B=[
3004      {to:[410,250],seg:'decl_profil',box:'m_profil'},{to:[410,306],seg:'s_profil_down'},
3005      {to:[630,306],seg:'bus1_h_right'},{to:[630,360],seg:'bus1_right',box:'m_contenu'},
3006      {to:[630,470],seg:'contenu_att_r',box:'m_att_r'},{to:[630,580],seg:'att_dec_r',box:'m_2eme'},
3007      {to:[630,638],seg:'dec_bus_r'},{to:[536,638],seg:'bus2r_left'},
3008      {to:[536,688],seg:'bus2_produit',box:'m_produit'},{to:[536,716],seg:'produit_bus3'},
3009      {to:[410,740],seg:'bus3_right'},{to:[410,764],seg:'bus3_achat',box:'m_achat'}];
3010    // -------- mobile --------
3011    var mA=[
3012      {to:[190,192],seg:'mo_decl_profil',box:'mm_profil'},{to:[190,240],seg:'mo_s_down'},
3013      {to:[104,240],seg:'mo_h_left'},{to:[104,286],seg:'mo_left_down',box:'mm_bienv'},
3014      {to:[104,378],seg:'mo_bienv_att_l',box:'mm_att_l'},{to:[104,470],seg:'mo_att_dec_l',box:'mm_1er'},
3015      {to:[104,534],seg:'mo_dec_conv_l'},{to:[190,534],seg:'mo_conv_h_l'},
3016      {to:[190,557],seg:'mo_conv_achat',box:'mm_achat'}];
3017    var mB=[
3018      {to:[190,192],seg:'mo_decl_profil',box:'mm_profil'},{to:[190,240],seg:'mo_s_down'},
3019      {to:[276,240],seg:'mo_h_right'},{to:[276,286],seg:'mo_right_down',box:'mm_contenu'},
3020      {to:[276,378],seg:'mo_contenu_att_r',box:'mm_att_r'},{to:[276,470],seg:'mo_att_dec_r',box:'mm_2eme'},
3021      {to:[276,534],seg:'mo_dec_conv_r'},{to:[190,534],seg:'mo_conv_h_r'},
3022      {to:[190,557],seg:'mo_conv_achat',box:'mm_achat'}];
3023
3024    var classicLegs=[
3025      {to:[180,262],seg:'cl0',box:'c1'},{to:[180,384],seg:'cl1',box:'c2'},
3026      {to:[180,506],seg:'cl2',box:'c3'},{to:[180,628],seg:'cl3',box:'c4'},
3027      {to:[180,722],seg:'cl4',box:'c5'}];
3028
3029    var desktopCfg={root:'.tml-modern-desktop',decl:'m_decl',token:'tml-token-green',win:'tml-win',label:'tml-journey',A:A,B:B,start:[410,140]};
3030    var mobileCfg ={root:'.tml-modern-mobile', decl:'mm_decl',token:'tml-token-green-m',win:null,label:'tml-journey-m',A:mA,B:mB,start:[190,104]};
3031
3032    function resetModern(cfg){
3033      document.querySelectorAll(cfg.root+' .mbox').forEach(function(b){b.classList.remove('active','win');});
3034      document.querySelectorAll(cfg.root+' .seg-modern').forEach(function(s){
3035        s.classList.remove('lit-g'); if(origMk.get(s))s.setAttribute('marker-end',origMk.get(s));});
3036      if(cfg.win) $(cfg.win).classList.remove('show');
3037      $(cfg.token).setAttribute('opacity','0');
3038      activateBox(cfg.decl,'active');
3039    }
3040    async function modernLoop(cfg){
3041      var branch='A';
3042      while(alive()){
3043        resetModern(cfg);
3044        $(cfg.label).textContent='Parcours du client : '+(branch==='A'?'1er ach
3044at':'2ème achat');
3045        await runJourney($(cfg.token), cfg.start, branch==='A'?cfg.A:cfg.B, 'green');
3046        if(!alive()){return;}
3047        if(cfg.win) $(cfg.win).classList.add('show');
3048        await sleep(1500);
3049        branch = branch==='A'?'B':'A';
3050      }
3051    }
3052    function resetClassic(){
3053      document.querySelectorAll('.tml-col-classic .cbox').forEach(function(b){b.classList.remove('active-red');});
3054      document.querySelectorAll('.tml-col-classic .seg-classic').forEach(function(s){
3055        s.classList.remove('lit-r'); if(origMk.get(s))s.setAttribute('marker-end',origMk.get(s));});
3056      $('tml-fail').classList.remove('show');
3057      $('tml-token-red').setAttribute('opacity','0');
3058      activateBox('c0','active-red');
3059    }
3060    async function classicLoop(){
3061      while(alive()){
3062        resetClassic();
3063        await runJourney($('tml-token-red'),[180,140],classicLegs,'red');
3064        if(!alive()){return;}
3065        $('tml-fail').classList.add('show');
3066        await sleep(1500);
3067      }
3068    }
3069
3070    if(reduce){
3071      resetClassic(); classicLegs.forEach(function(l){lightSeg(l.seg,'red');activateBox(l.box,'active-red');});
3072      $('tml-fail').classList.add('show');
3073      [desktopCfg,mobileCfg].forEach(function(cfg){
3074        resetModern(cfg);
3075        cfg.A.forEach(function(l){lightSeg(l.seg,'green'); if(l.box)activateBox(l.box, l.box.indexOf('achat')>-1?'win':'active');});
3076        if(cfg.win)$(cfg.win).classList.add('show');
3077        $(cfg.label).textContent='Parcours : 1er achat puis 2ème achat';
3078      });
3079    }else{
3080      modernLoop(desktopCfg); modernLoop(mobileCfg); classicLoop();
3081    }
3082  }
3083  if(document.readyState!=='loading'){init();}
3084  else{document.addEventListener('DOMContentLoaded',init);}
3085})();
3086</script>
3086
3087<style> .m-section__subheading,.m-richtext__subtitle {font-weight: 500; font-size: 18px;} .m-section__header {--m-section-header-spacing-bottom: 40px;} .m-button--link {--btn-link-border: 1px;} </style>
3088<div id="shopify-block-ASVhVT3lYYWcvT0l0L__15289809162917654101" class="shopify-block shopify-app-block">
3088<script src="https://cdn.shopify.com/extensions/2eae2a8d-bc61-4637-a1e6-902212922bdb/301-redirect-auto-14/assets/app.js" defer></script>
3088
3089
3090</div><div id="shopify-block-AakNoTzR0N0NkN3Z2W__11532412952436166569" class="shopify-block shopify-app-block">
3091
3092
3093	<!-- __LXV: 1784874993103;__LXR: https://loox.io;__LXC: mlZ8CdKwb4; -->
3093<script>var loox_global_hash = '1784874993103';
3094var loox_bundle_reviews_enabled = false;</script>
3094<style>.loox-reviews-default { max-width: 1200px; margin: 0 auto; }.loox-rating .loox-icon { color:#EBBF20; }
3095:root { --lxs-rating-icon-color: #EBBF20; }</style>
3096
3097
3098
3099
3100
3101
3102
3103</div></body>
3104</html>
3105                    
3106                  
3107              </div>
3108            </div>
3109          
3110        </div>
3111        
3112      
3113    </div>
3114  </div>
3115</div>
3116
3117
3118</div><div id="shopify-section-template--30338464678222__custom_liquid_kCW9tq" class="shopify-section custom-liquid"><section class="m-section m-custom-liquid ">
3119  <div id="expertise" style="position: relative; top: -80px;"></div>
3120</section>
3121
3122
3123</div><div id="shopify-section-template--30338464678222__custom_content_d4V6AA" class="shopify-section shopify-section-custom-content"><link href="//modern-letter.com/cdn/shop/t/10/assets/custom-content.css?v=122562997671464857791784623194" rel="stylesheet" type="text/css" media="all" />
3124
3125<style>
3126  #m-custom-template--30338464678222__custom_content_d4V6AA {
3127    --column-gap: 30px;
3128    --column-gap-mobile: 16px;
3129    --section-padding-top: 64px;
3130    --section-padding-bottom: 50px;
3131  }
3132</style>
3133
3134<div
3135  id="m-custom-template--30338464678222__custom_content_d4V6AA"
3136  class="m-section m-custom-content m-gradient m-color-default"
3137  data-section-type="custom-content"
3138  data-section-id="template--30338464678222__custom_content_d4V6AA"
3139>
3140  
3141  <div class="container-fluid m-section-my m-section-py m-custom-content__container">
3142    <div class="m-gradient m-color-default">
3143
3144
3145
3146
3147
3148      
3149        <div class="m-mixed-layout m-mixed-layout--mobile-scroll">
3150        <div class="m-custom-content__wrapper m:flex m-mixed-layout__inner md:m:flex-wrap">
3151          
3152            
3153            <div id="m-custom__block--html_ccKWKP" class="m:column m:display-flex m-custom-content__block m-custom-content__block-html lg:m:w-1/4 md:m:w-1/2 m:w-full" >
3154              <div class="m-custom-content__block-inner m:w-full">
3155                
3156                    
3157                      <div class="team-card">
3158
3159<style>
3160
3161.team-card{
3162    background:#ffffff;
3163    border-radius:24px;
3164    padding:38px 12px 12px;
3165    font-family:Arial, Helvetica, sans-serif;
3166    text-align:center;
3167    height:100%;
3168}
3169
3170.team-inner{
3171    background:#183d2b;
3172    border-radius:22px;
3173    padding:48px 18px 24px;
3174    position:relative;
3175    overflow:visible;
3176}
3177
3178.team-photo{
3179    position:absolute;
3180    top:-62px;
3181    left:50%;
3182    transform:translateX(-50%);
3183    width:100px;
3184    height:100px;
3185    border-radius:50%;
3186    object-fit:cover;
3187    border:3px solid #f3f3ec;
3188    background:#183d2b;
3189}
3190
3191.team-badge{
3192    display:inline-block;
3193    margin-bottom:18px;
3194    padding:6px 14px;
3195    border:1px solid rgba(255,255,255,.14);
3196    border-radius:999px;
3197    color:rgba(255,255,255,.92);
3198    font-size:9px;
3199    font-weight:700;
3200    letter-spacing:2px;
3201    text-transform:uppercase;
3202}
3203
3204.team-name{
3205    margin:0 0 14px;
3206    font-family:Georgia, "Times New Roman", serif;
3207    font-size:26px;
3208    font-weight:700;
3209    line-height:1;
3210    color:#f5f2ea;
3211    text-transform:uppercase;
3212}
3213
3214.team-role{
3215    margin:0;
3216    font-size:15px;
3217    line-height:1.2;
3218    letter-spacing:2px;
3219    text-transform:uppercase;
3220    color:rgba(255,255,255,.72);
3221}
3222
3223@media(max-width:768px){
3224
3225.team-card{
3226    padding:48px 8px 8px;
3227}
3228
3229.team-inner{
3230    padding:44px 16px 22px;
3231}
3232
3233.team-photo{
3234    width:84px;
3235    height:84px;
3236    top:-47px;
3237    border-width:4px;
3238}
3239
3240.team-badge{
3241    font-size:8px;
3242    padding:5px 12px;
3243    letter-spacing:1.5px;
3244}
3245
3246.team-name{
3247    font-size:22px;
3248}
3249
3250.team-role{
3251    font-size:14px;
3252    letter-spacing:1.5px;
3253}
3254
3255}
3256
3257</style>
3258
3259<div class="team-inner">
3260
3261    <img class="team-photo" src="https://cdn.shopify.com/s/files/1/0892/4374/6638/files/equipe.png?v=1782459125" alt="Théo">
3262
3263    <div class="team-badge">
3264        Co-fondateur
3265    </div>
3266
3267    <h3 class="team-name">
3268        Théo
3269    </h3>
3270
3271    <p class="team-role">
3272        Développement<br>
3273        commercial
3274    </p>
3275
3276</div>
3277
3278</div>
3279                    
3280                  
3281              </div>
3282            </div>
3283          
3284            
3285            <div id="m-custom__block--html_tLkwqb" class="m:column m:display-flex m-custom-content__block m-custom-content__block-html lg:m:w-1/4 md:m:w-1/2 m:w-full" >
3286              <div class="m-custom-content__block-inner m:w-full">
3287                
3288                    
3289                      <div class="team-card">
3290
3291<style>
3292
3293.team-card{
3294    background:#ffffff;
3295    border-radius:24px;
3296    padding:38px 12px 12px;
3297    font-family:Arial, Helvetica, sans-serif;
3298    text-align:center;
3299    height:100%;
3300}
3301
3302.team-inner{
3303    background:#183d2b;
3304    border-radius:22px;
3305    padding:48px 18px 24px;
3306    position:relative;
3307    overflow:visible;
3308}
3309
3310.team-photo{
3311    position:absolute;
3312    top:-62px;
3313    left:50%;
3314    transform:translateX(-50%);
3315    width:100px;
3316    height:100px;
3317    border-radius:50%;
3318    object-fit:cover;
3319    border:3px solid #f3f3ec;
3320    background:#183d2b;
3321}
3322
3323.team-badge{
3324    display:inline-block;
3325    margin-bottom:18px;
3326    padding:6px 14px;
3327    border:1px solid rgba(255,255,255,.14);
3328    border-radius:999px;
3329    color:rgba(255,255,255,.92);
3330    font-size:9px;
3331    font-weight:700;
3332    letter-spacing:2px;
3333    text-transform:uppercase;
3334}
3335
3336.team-name{
3337    margin:0 0 14px;
3338    font-family:Georgia, "Times New Roman", serif;
3339    font-size:26px;
3340    font-weight:700;
3341    line-height:1;
3342    color:#f5f2ea;
3343    text-transform:uppercase;
3344}
3345
3346.team-role{
3347    margin:0;
3348    font-size:15px;
3349    line-height:1.2;
3350    letter-spacing:2px;
3351    text-transform:uppercase;
3352    color:rgba(255,255,255,.72);
3353}
3354
3355@media(max-width:768px){
3356
3357.team-card{
3358    padding:48px 8px 8px;
3359}
3360
3361.team-inner{
3362    padding:44px 16px 22px;
3363}
3364
3365.team-photo{
3366    width:84px;
3367    height:84px;
3368    top:-47px;
3369    border-width:4px;
3370}
3371
3372.team-badge{
3373    font-size:8px;
3374    padding:5px 12px;
3375    letter-spacing:1.5px;
3376}
3377
3378.team-name{
3379    font-size:22px;
3380}
3381
3382.team-role{
3383    font-size:14px;
3384    letter-spacing:1.5px;
3385}
3386
3387}
3388
3389</style>
3390
3391<div class="team-inner">
3392
3393    <img class="team-photo" src="https://cdn.shopify.com/s/files/1/0892/4374/6638/files/equipe_copie.png?v=1782459650" alt="Anaïs">
3394
3395    <div class="team-badge">
3396        Co-fondatrice
3397    </div>
3398
3399    <h3 class="team-name">
3400        Anais
3401    </h3>
3402
3403    <p class="team-role">
3404       CRM Manager<br>
3405Klaviyo
3406
3407    </p>
3408
3409</div>
3410
3411</div>
3412                    
3413                  
3414              </div>
3415            </div>
3416          
3417            
3418            <div id="m-custom__block--html_NcJjtY" class="m:column m:display-flex m-custom-content__block m-custom-content__block-html lg:m:w-1/4 md:m:w-1/2 m:w-full" >
3419              <div class="m-custom-content__block-inner m:w-full">
3420                
3421                    
3422                      <div class="team-card">
3423
3424<style>
3425
3426.team-card{
3427    background:#ffffff;
3428    border-radius:24px;
3429    padding:38px 12px 12px;
3430    font-family:Arial, Helvetica, sans-serif;
3431    text-align:center;
3432    height:100%;
3433}
3434
3435.team-inner{
3436    background:#183d2b;
3437    border-radius:22px;
3438    padding:48px 18px 24px;
3439    position:relative;
3440    overflow:visible;
3441}
3442
3443.team-photo{
3444    position:absolute;
3445    top:-62px;
3446    left:50%;
3447    transform:translateX(-50%);
3448    width:100px;
3449    height:100px;
3450    border-radius:50%;
3451    object-fit:cover;
3452    border:3px solid #f3f3ec;
3453    background:#183d2b;
3454}
3455
3456.team-badge{
3457    display:inline-block;
3458    margin-bottom:18px;
3459    padding:6px 14px;
3460    border:1px solid rgba(255,255,255,.14);
3461    border-radius:999px;
3462    color:rgba(255,255,255,.92);
3463    font-size:9px;
3464    font-weight:700;
3465    letter-spacing:2px;
3466    text-transform:uppercase;
3467}
3468
3469.team-name{
3470    margin:0 0 14px;
3471    font-family:Georgia, "Times New Roman", serif;
3472    font-size:26px;
3473    font-weight:700;
3474    line-height:1;
3475    color:#f5f2ea;
3476    text-transform:uppercase;
3477}
3478
3479.team-role{
3480    margin:0;
3481    font-size:15px;
3482    line-height:1.2;
3483    letter-spacing:2px;
3484    text-transform:uppercase;
3485    color:rgba(255,255,255,.72);
3486}
3487
3488@media(max-width:768px){
3489
3490.team-card{
3491    padding:48px 8px 8px;
3492}
3493
3494.team-inner{
3495    padding:44px 16px 22px;
3496}
3497
3498.team-photo{
3499    width:84px;
3500    height:84px;
3501    top:-47px;
3502    border-width:4px;
3503}
3504
3505.team-badge{
3506    font-size:8px;
3507    padding:5px 12px;
3508    letter-spacing:1.5px;
3509}
3510
3511.team-name{
3512    font-size:22px;
3513}
3514
3515.team-role{
3516    font-size:14px;
3517    letter-spacing:1.5px;
3518}
3519
3520}
3521
3522</style>
3523
3524<div class="team-inner">
3525
3526    <img class="team-photo" src="https://cdn.shopify.com/s/files/1/0892/4374/6638/files/equipe_1.png?v=1782459650" alt="Alexandre">
3527
3528    <div class="team-badge">
3529        EXPERT REDACTION
3530    </div>
3531
3532    <h3 class="team-name">
3533        Alexandre
3534    </h3>
3535
3536    <p class="team-role">
3537       Copywriter<br>
3538email marketing
3539
3540    </p>
3541
3542</div>
3543
3544</div>
3545                    
3546                  
3547              </div>
3548            </div>
3549          
3550            
3551            <div id="m-custom__block--html_qKmEdT" class="m:column m:display-flex m-custom-content__block m-custom-content__block-html lg:m:w-1/4 md:m:w-1/2 m:w-full" >
3552              <div class="m-custom-content__block-inner m:w-full">
3553                
3554                    
3555                      <div class="team-card">
3556
3557<style>
3558
3559.team-card{
3560    background:#ffffff;
3561    border-radius:24px;
3562    padding:38px 12px 12px;
3563    font-family:Arial, Helvetica, sans-serif;
3564    text-align:center;
3565    height:100%;
3566}
3567
3568.team-inner{
3569    background:#183d2b;
3570    border-radius:22px;
3571    padding:48px 18px 24px;
3572    position:relative;
3573    overflow:visible;
3574}
3575
3576.team-photo{
3577    position:absolute;
3578    top:-62px;
3579    left:50%;
3580    transform:translateX(-50%);
3581    width:100px;
3582    height:100px;
3583    border-radius:50%;
3584    object-fit:cover;
3585    border:3px solid #f3f3ec;
3586    background:#183d2b;
3587}
3588
3589.team-badge{
3590    display:inline-block;
3591    margin-bottom:18px;
3592    padding:6px 14px;
3593    border:1px solid rgba(255,255,255,.14);
3594    border-radius:999px;
3595    color:rgba(255,255,255,.92);
3596    font-size:9px;
3597    font-weight:700;
3598    letter-spacing:2px;
3599    text-transform:uppercase;
3600}
3601
3602.team-name{
3603    margin:0 0 14px;
3604    font-family:Georgia, "Times New Roman", serif;
3605    font-size:26px;
3606    font-weight:700;
3607    line-height:1;
3608    color:#f5f2ea;
3609    text-transform:uppercase;
3610}
3611
3612.team-role{
3613    margin:0;
3614    font-size:15px;
3615    line-height:1.2;
3616    letter-spacing:2px;
3617    text-transform:uppercase;
3618    color:rgba(255,255,255,.72);
3619}
3620
3621@media(max-width:768px){
3622
3623.team-card{
3624    padding:48px 8px 8px;
3625}
3626
3627.team-inner{
3628    padding:44px 16px 22px;
3629}
3630
3631.team-photo{
3632    width:84px;
3633    height:84px;
3634    top:-47px;
3635    border-width:4px;
3636}
3637
3638.team-badge{
3639    font-size:8px;
3640    padding:5px 12px;
3641    letter-spacing:1.5px;
3642}
3643
3644.team-name{
3645    font-size:22px;
3646}
3647
3648.team-role{
3649    font-size:14px;
3650    letter-spacing:1.5px;
3651}
3652
3653}
3654
3655</style>
3656
3657<div class="team-inner">
3658
3659    <img class="team-photo" src="https://cdn.shopify.com/s/files/1/0892/4374/6638/files/equipe_2.png?v=1782459650" alt="Emilien">
3660
3661    <div class="team-badge">
3662        EXPERT DESIGN
3663    </div>
3664
3665    <h3 class="team-name">
3666       Emilien
3667    </h3>
3668
3669    <p class="team-role">
3670       Designer email &amp;<br>
3671intégration HTML
3672
3673    </p>
3674
3675</div>
3676
3677</div>
3678                    
3679                  
3680              </div>
3681            </div>
3682          
3683        </div>
3684        </div>
3685      
3686    </div>
3687  </div>
3688</div>
3689
3690
3691</div><div id="shopify-section-template--30338464678222__icon_box_FPq9yp" class="shopify-section"><link href="//modern-letter.com/cdn/shop/t/10/assets/icon-box.css?v=144636186511075217321784623194" rel="stylesheet" type="text/css" media="all" />
3692<script src="//modern-letter.com/cdn/shop/t/10/assets/icon-box.js?v=92118825036288411701784623194" defer="defer"></script>
3692
3693
3694
3695
3696<style>
3697  #m-section--template--30338464678222__icon_box_FPq9yp {
3698    --section-padding-top: 18px;
3699    --section-padding-bottom: 40px;
3700    --column-gap: 30px;
3701    --column-gap-mobile: 10px;
3702    --row-gap: 40px;
3703    --row-gap-mobile: 30px;
3704    --items: 4;
3705  }
3706</style>
3707<section
3708  id="m-section--template--30338464678222__icon_box_FPq9yp"
3709  class="m-section m-icon-box-section m-gradient m-color-default"
3710  data-section-type="icon-box"
3711  data-section-id="template--30338464678222__icon_box_FPq9yp"
3712>
3713  <div class="container-fluid m-section-my m-section-py">
3714    
3715
3716
3717
3718
3719  <div class="m-section__header m:text-center ">
3720    
3721    
3722    
3723      <h2 class="m-section__heading h2 m-scroll-trigger animate--fade-in-up">
3724        NOS EXPERTISES
3725      </h2>
3726    
3727    
3728    
3729    
3730  </div>
3731
3732
3733    <m-icon-box
3734      data-enable-slider="false"
3735      
3736      class="m-swiper-overflow m:block"
3737    >
3738      <div class="m-icon-box-section__wrapper m-mixed-layout">
3739        <div class="m-mixed-layout__wrapper">
3740          <div class="m-mixed-layout__inner m:grid m:grid-2-cols m:grid md:m:grid-2-cols lg:m:grid-4-cols">
3741            
3742              
3743              <div
3744                class="m:column"
3745                
3746                
3747              >
3748                <div
3749                  class="m-icon-box m-icon-box--vertical   m-gradient m-color-badge-hot m-scroll-trigger animate--fade-in-up m:blocks-radius"
3750                  
3751                    data-cascade
3752                    style="--animation-order: 1;"
3753                  
3754                >
3755                  <div class="m-icon-box__inner m:flex-col m:items-center">
3756                    
3757                    <div
3758                      
3759                      class="m-icon-box__icon m-hover-box m-hover-box--scale-up m:items-center"
3760                      
3761                        style="width: 40px;"
3762                      
3763                    >
3764                      <div class="m-hover-box__wrapper m:w-full">
3765                        
3766                          
3767<responsive-image class="m-image m:w-full"   style="--aspect-ratio: 1.0;">
3768  
3769  <img
3770      srcset="//modern-letter.com/cdn/shop/files/icon-1-configuration-klaviyo.svg?v=1782131471 48w"
3771      src="//modern-letter.com/cdn/shop/files/icon-1-configuration-klaviyo.svg?v=1782131471&width=360"
3772      sizes="(min-width: 1200px) 267px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
3773      alt=""
3774      loading="lazy"
3775      fetchPriority="low"
3776      class="m:w-full"
3777      width="48"
3778      height="48"
3779      
3780  >
3781  
3782  <noscript>
3783    <img class="m:w-full" loading="lazy" width="" height="" src="//modern-letter.com/cdn/shop/files/icon-1-configuration-klaviyo.svg?crop=center&height=2048&v=1782131471&width=2048" alt="">
3784  </noscript>
3785</responsive-image>
3786
3787                        
3788                      </div>
3789                    </div>
3790
3791                    <div class="m-icon-box__content m:flex-1 m:text-center">
3792                      
3793                        <h3 class="m-icon-box__heading h4">CONFIGURATION KLAVIYO</h3>
3794                      
3795                      
3796                        <div class="m-icon-box__description rte m:text-color-subtext">
3797                          <p>Paramétrage complet de votre compte pour des campagnes optimisées.</p>
3798                        </div>
3799                      
3800                      
3801                    </div>
3802                  </div>
3803                </div>
3804              </div>
3805            
3806              
3807              <div
3808                class="m:column"
3809                
3810                
3811              >
3812                <div
3813                  class="m-icon-box m-icon-box--vertical   m-gradient m-color-badge-hot m-scroll-trigger animate--fade-in-up m:blocks-radius"
3814                  
3815                    data-cascade
3816                    style="--animation-order: 2;"
3817                  
3818                >
3819                  <div class="m-icon-box__inner m:flex-col m:items-center">
3820                    
3821                    <div
3822                      
3823                      class="m-icon-box__icon m-hover-box m-hover-box--scale-up m:items-center"
3824                      
3825                        style="width: 40px;"
3826                      
3827                    >
3828                      <div class="m-hover-box__wrapper m:w-full">
3829                        
3830                          
3831<responsive-image class="m-image m:w-full"   style="--aspect-ratio: 1.0;">
3832  
3833  <img
3834      srcset="//modern-letter.com/cdn/shop/files/icon-2-design-copywriting_1.svg?v=1782131770 48w"
3835      src="//modern-letter.com/cdn/shop/files/icon-2-design-copywriting_1.svg?v=1782131770&width=360"
3836      sizes="(min-width: 1200px) 267px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
3837      alt=""
3838      loading="lazy"
3839      fetchPriority="low"
3840      class="m:w-full"
3841      width="48"
3842      height="48"
3843      
3844  >
3845  
3846  <noscript>
3847    <img class="m:w-full" loading="lazy" width="" height="" src="//modern-letter.com/cdn/shop/files/icon-2-design-copywriting_1.svg?crop=center&height=2048&v=1782131770&width=2048" alt="">
3848  </noscript>
3849</responsive-image>
3850
3851                        
3852                      </div>
3853                    </div>
3854
3855                    <div class="m-icon-box__content m:flex-1 m:text-center">
3856                      
3857                        <h3 class="m-icon-box__heading h4">DESIGN ET COPYWRITING</h3>
3858                      
3859                      
3860                        <div class="m-icon-box__description rte m:text-color-subtext">
3861                          <p>Emails et pop-ups à votre image, avec des textes engageants.</p>
3862                        </div>
3863                      
3864                      
3865                    </div>
3866                  </div>
3867                </div>
3868              </div>
3869            
3870              
3871              <div
3872                class="m:column"
3873                
3874                
3875              >
3876                <div
3877                  class="m-icon-box m-icon-box--vertical   m-gradient m-color-badge-hot m-scroll-tr
3877igger animate--fade-in-up m:blocks-radius"
3878                  
3879                    data-cascade
3880                    style="--animation-order: 3;"
3881                  
3882                >
3883                  <div class="m-icon-box__inner m:flex-col m:items-center">
3884                    
3885                    <div
3886                      
3887                      class="m-icon-box__icon m-hover-box m-hover-box--scale-up m:items-center"
3888                      
3889                        style="width: 40px;"
3890                      
3891                    >
3892                      <div class="m-hover-box__wrapper m:w-full">
3893                        
3894                          
3895<responsive-image class="m-image m:w-full"   style="--aspect-ratio: 1.0;">
3896  
3897  <img
3898      srcset="//modern-letter.com/cdn/shop/files/icon-3-emails-automatises.svg?v=1782131521 48w"
3899      src="//modern-letter.com/cdn/shop/files/icon-3-emails-automatises.svg?v=1782131521&width=360"
3900      sizes="(min-width: 1200px) 267px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
3901      alt=""
3902      loading="lazy"
3903      fetchPriority="low"
3904      class="m:w-full"
3905      width="48"
3906      height="48"
3907      
3908  >
3909  
3910  <noscript>
3911    <img class="m:w-full" loading="lazy" width="" height="" src="//modern-letter.com/cdn/shop/files/icon-3-emails-automatises.svg?crop=center&height=2048&v=1782131521&width=2048" alt="">
3912  </noscript>
3913</responsive-image>
3914
3915                        
3916                      </div>
3917                    </div>
3918
3919                    <div class="m-icon-box__content m:flex-1 m:text-center">
3920                      
3921                        <h3 class="m-icon-box__heading h4">EMAILS AUTOMATISÉS</h3>
3922                      
3923                      
3924                        <div class="m-icon-box__description rte m:text-color-subtext">
3925                          <p>Des emails automatiques pour booster vos ventes et réduire vos coûts.</p>
3926                        </div>
3927                      
3928                      
3929                    </div>
3930                  </div>
3931                </div>
3932              </div>
3933            
3934              
3935              <div
3936                class="m:column"
3937                
3938                
3939              >
3940                <div
3941                  class="m-icon-box m-icon-box--vertical   m-gradient m-color-badge-hot m-scroll-trigger animate--fade-in-up m:blocks-radius"
3942                  
3943                    data-cascade
3944                    style="--animation-order: 4;"
3945                  
3946                >
3947                  <div class="m-icon-box__inner m:flex-col m:items-center">
3948                    
3949                    <div
3950                      
3951                      class="m-icon-box__icon m-hover-box m-hover-box--scale-up m:items-center"
3952                      
3953                        style="width: 40px;"
3954                      
3955                    >
3956                      <div class="m-hover-box__wrapper m:w-full">
3957                        
3958                          
3959<responsive-image class="m-image m:w-full"   style="--aspect-ratio: 1.0;">
3960  
3961  <img
3962      srcset="//modern-letter.com/cdn/shop/files/icon-4-gestion-newsletters.svg?v=1782131537 48w"
3963      src="//modern-letter.com/cdn/shop/files/icon-4-gestion-newsletters.svg?v=1782131537&width=360"
3964      sizes="(min-width: 1200px) 267px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
3965      alt=""
3966      loading="lazy"
3967      fetchPriority="low"
3968      class="m:w-full"
3969      width="48"
3970      height="48"
3971      
3972  >
3973  
3974  <noscript>
3975    <img class="m:w-full" loading="lazy" width="" height="" src="//modern-letter.com/cdn/shop/files/icon-4-gestion-newsletters.svg?crop=center&height=2048&v=1782131537&width=2048" alt="">
3976  </noscript>
3977</responsive-image>
3978
3979                        
3980                      </div>
3981                    </div>
3982
3983                    <div class="m-icon-box__content m:flex-1 m:text-center">
3984                      
3985                        <h3 class="m-icon-box__heading h4">GESTION NEWSLETTERS</h3>
3986                      
3987                      
3988                        <div class="m-icon-box__description rte m:text-color-subtext">
3989                          <p>Une relation durable grâce à des campagnes ciblées et planifiées.</p>
3990                        </div>
3991                      
3992                      
3993                    </div>
3994                  </div>
3995                </div>
3996              </div>
3997            
3998              
3999              <div
4000                class="m:column"
4001                
4002                
4003              >
4004                <div
4005                  class="m-icon-box m-icon-box--vertical   m-gradient m-color-badge-hot m-scroll-tr
4005igger animate--fade-in-up m:blocks-radius"
4006                  
4007                    data-cascade
4008                    style="--animation-order: 5;"
4009                  
4010                >
4011                  <div class="m-icon-box__inner m:flex-col m:items-center">
4012                    
4013                    <div
4014                      
4015                      class="m-icon-box__icon m-hover-box m-hover-box--scale-up m:items-center"
4016                      
4017                        style="width: 40px;"
4018                      
4019                    >
4020                      <div class="m-hover-box__wrapper m:w-full">
4021                        
4022                          
4023<responsive-image class="m-image m:w-full"   style="--aspect-ratio: 1.0;">
4024  
4025  <img
4026      srcset="//modern-letter.com/cdn/shop/files/icon-5-delivrabilite_1.svg?v=1782131789 48w"
4027      src="//modern-letter.com/cdn/shop/files/icon-5-delivrabilite_1.svg?v=1782131789&width=360"
4028      sizes="(min-width: 1200px) 267px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
4029      alt=""
4030      loading="lazy"
4031      fetchPriority="low"
4032      class="m:w-full"
4033      width="48"
4034      height="48"
4035      
4036  >
4037  
4038  <noscript>
4039    <img class="m:w-full" loading="lazy" width="" height="" src="//modern-letter.com/cdn/shop/files/icon-5-delivrabilite_1.svg?crop=center&height=2048&v=1782131789&width=2048" alt="">
4040  </noscript>
4041</responsive-image>
4042
4043                        
4044                      </div>
4045                    </div>
4046
4047                    <div class="m-icon-box__content m:flex-1 m:text-center">
4048                      
4049                        <h3 class="m-icon-box__heading h4">DÉLIVRABILITÉ</h3>
4050                      
4051                      
4052                        <div class="m-icon-box__description rte m:text-color-subtext">
4053                          <p>Bon taux de réception grâce aux tests A/B et à l'analyse.</p>
4054                        </div>
4055                      
4056                      
4057                    </div>
4058                  </div>
4059                </div>
4060              </div>
4061            
4062              
4063              <div
4064                class="m:column"
4065                
4066                
4067              >
4068                <div
4069                  class="m-icon-box m-icon-box--vertical   m-gradient m-color-badge-hot m-scroll-trigger animate--fade-in-up m:blocks-radius"
4070                  
4071                    data-cascade
4072                    style="--animation-order: 6;"
4073                  
4074                >
4075                  <div class="m-icon-box__inner m:flex-col m:items-center">
4076                    
4077                    <div
4078                      
4079                      class="m-icon-box__icon m-hover-box m-hover-box--scale-up m:items-center"
4080                      
4081                        style="width: 40px;"
4082                      
4083                    >
4084                      <div class="m-hover-box__wrapper m:w-full">
4085                        
4086                          
4087<responsive-image class="m-image m:w-full"   style="--aspect-ratio: 1.0;">
4088  
4089  <img
4090      srcset="//modern-letter.com/cdn/shop/files/icon-6-whatsapp-marketing.svg?v=1782131574 48w"
4091      src="//modern-letter.com/cdn/shop/files/icon-6-whatsapp-marketing.svg?v=1782131574&width=360"
4092      sizes="(min-width: 1200px) 267px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
4093      alt=""
4094      loading="lazy"
4095      fetchPriority="low"
4096      class="m:w-full"
4097      width="48"
4098      height="48"
4099      
4100  >
4101  
4102  <noscript>
4103    <img class="m:w-full" loading="lazy" width="" height="" src="//modern-letter.com/cdn/shop/files/icon-6-whatsapp-marketing.svg?crop=center&height=2048&v=1782131574&width=2048" alt="">
4104  </noscript>
4105</responsive-image>
4106
4107                        
4108                      </div>
4109                    </div>
4110
4111                    <div class="m-icon-box__content m:flex-1 m:text-center">
4112                      
4113                        <h3 class="m-icon-box__heading h4">WHATSAPP</h3>
4114                      
4115                      
4116                        <div class="m-icon-box__description rte m:text-color-subtext">
4117                          <p>Des messages courts et personnalisés qui captent l'attention.</p>
4118                        </div>
4119                      
4120                      
4121                    </div>
4122                  </div>
4123                </div>
4124              </div>
4125            
4126              
4127              <div
4128                class="m:column"
4129                
4130                
4131              >
4132                <div
4133                  class="m-icon-box m-icon-box--vertical   m-gradient m-color-badge-hot m-scroll-tr
4133igger animate--fade-in-up m:blocks-radius"
4134                  
4135                    data-cascade
4136                    style="--animation-order: 7;"
4137                  
4138                >
4139                  <div class="m-icon-box__inner m:flex-col m:items-center">
4140                    
4141                    <div
4142                      
4143                      class="m-icon-box__icon m-hover-box m-hover-box--scale-up m:items-center"
4144                      
4145                        style="width: 40px;"
4146                      
4147                    >
4148                      <div class="m-hover-box__wrapper m:w-full">
4149                        
4150                          
4151<responsive-image class="m-image m:w-full"   style="--aspect-ratio: 1.0;">
4152  
4153  <img
4154      srcset="//modern-letter.com/cdn/shop/files/icon-7-suivi-rapport-kpi_1.svg?v=1782131808 48w"
4155      src="//modern-letter.com/cdn/shop/files/icon-7-suivi-rapport-kpi_1.svg?v=1782131808&width=360"
4156      sizes="(min-width: 1200px) 267px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
4157      alt=""
4158      loading="lazy"
4159      fetchPriority="low"
4160      class="m:w-full"
4161      width="48"
4162      height="48"
4163      
4164  >
4165  
4166  <noscript>
4167    <img class="m:w-full" loading="lazy" width="" height="" src="//modern-letter.com/cdn/shop/files/icon-7-suivi-rapport-kpi_1.svg?crop=center&height=2048&v=1782131808&width=2048" alt="">
4168  </noscript>
4169</responsive-image>
4170
4171                        
4172                      </div>
4173                    </div>
4174
4175                    <div class="m-icon-box__content m:flex-1 m:text-center">
4176                      
4177                        <h3 class="m-icon-box__heading h4">SUIVI & REPORTING</h3>
4178                      
4179                      
4180                        <div class="m-icon-box__description rte m:text-color-subtext">
4181                          <p>Un suivi hebdomadaire de vos indicateurs pour booster les résultats.</p>
4182                        </div>
4183                      
4184                      
4185                    </div>
4186                  </div>
4187                </div>
4188              </div>
4189            
4190              
4191              <div
4192                class="m:column"
4193                
4194                
4195              >
4196                <div
4197                  class="m-icon-box m-icon-box--vertical   m-gradient m-color-badge-hot m-scroll-trigger animate--fade-in-up m:blocks-radius"
4198                  
4199                    data-cascade
4200                    style="--animation-order: 8;"
4201                  
4202                >
4203                  <div class="m-icon-box__inner m:flex-col m:items-center">
4204                    
4205                    <div
4206                      
4207                      class="m-icon-box__icon m-hover-box m-hover-box--scale-up m:items-center"
4208                      
4209                        style="width: 40px;"
4210                      
4211                    >
4212                      <div class="m-hover-box__wrapper m:w-full">
4213                        
4214                          
4215<responsive-image class="m-image m:w-full"   style="--aspect-ratio: 1.0;">
4216  
4217  <img
4218      srcset="//modern-letter.com/cdn/shop/files/icon-8-formation-klaviyo.svg?v=1782131607 48w"
4219      src="//modern-letter.com/cdn/shop/files/icon-8-formation-klaviyo.svg?v=1782131607&width=360"
4220      sizes="(min-width: 1200px) 267px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
4221      alt=""
4222      loading="lazy"
4223      fetchPriority="low"
4224      class="m:w-full"
4225      width="48"
4226      height="48"
4227      
4228  >
4229  
4230  <noscript>
4231    <img class="m:w-full" loading="lazy" width="" height="" src="//modern-letter.com/cdn/shop/files/icon-8-formation-klaviyo.svg?crop=center&height=2048&v=1782131607&width=2048" alt="">
4232  </noscript>
4233</responsive-image>
4234
4235                        
4236                      </div>
4237                    </div>
4238
4239                    <div class="m-icon-box__content m:flex-1 m:text-center">
4240                      
4241                        <h3 class="m-icon-box__heading h4">FORMATION KLAVIYO</h3>
4242                      
4243                      
4244                        <div class="m-icon-box__description rte m:text-color-subtext">
4245                          <p>Devenez autonome grâce à une formation complète sur Klaviyo.</p>
4246                        </div>
4247                      
4248                      
4249                    </div>
4250                  </div>
4251                </div>
4252              </div>
4253            
4254          </div>
4255        </div>
4256        
4257      </div>
4258    </m-icon-box>
4259  </div>
4260</section>
4261
4262
4263<style> #shopify-section-template--30338464678222__icon_box_FPq9yp .m-icon-box__inner {background-color: #253261; padding: 10px; border-radius: 10px;} #shopify-section-template--30338464678222__icon_box_FPq9yp .m-section__heading {color: #253261;} #shopify-section-template--30338464678222__icon_box_FPq9yp .m-icon-box__icon {margin-bottom: -10px !important;} </style></div><div id="shopify-section-template--30338464678222__custom_content_cE3xCK" class="shopify-section shopify-section-custom-content"><link href="//modern-letter.com/cdn/shop/t/10/assets/custom-content.css?v=122562997671464857791784623194" rel="stylesheet" type="text/css" media="all" />
4264
4265<style>
4266  #m-custom-template--30338464678222__custom_content_cE3xCK {
4267    --column-gap: 30px;
4268    --column-gap-mobile: 16px;
4269    --section-padding-top: 50px;
4270    --section-padding-bottom: 58px;
4271  }
4272</style>
4273
4274<div
4275  id="m-custom-template--30338464678222__custom_content_cE3xCK"
4276  class="m-section m-custom-content m-gradient m-color-default"
4277  data-section-type="custom-content"
4278  data-section-id="template--30338464678222__custom_content_cE3xCK"
4279>
4280  
4281  <div class="container-fluid m-section-my m-section-py m-custom-content__container">
4282    <div class="m-gradient m-color-default">
4283
4284
4285
4286
4287
4288      
4289        
4290        <div class="m-custom-content__wrapper m:flex m:flex-wrap">
4291          
4292            
4293            <div id="m-custom__block--liquid_XFKUXQ" class="m:column m:display-flex m-custom-content__block m-custom-content__block-liquid lg:m:w-full m:w-full" >
4294              <div class="m-custom-content__block-inner m:w-full">
4295                
4296                    
4297                      <div class="tml-tools-logos">
4298
4299  <!-- Ligne 1 -->
4300
4301  <img src="https://cdn.shopify.com/s/files/1/0892/4374/6638/files/logo-klaviyo-bleu.svg?v=1782141325" alt="Klaviyo">
4302
4303  <img src="https://cdn.shopify.com/s/files/1/0892/4374/6638/files/logo-shopify-bleu.svg?v=1782141358" alt="Shopify">
4304
4305  <img src="https://cdn.shopify.com/s/files/1/0892/4374/6638/files/logo-wax-bleu.svg?v=1782141294" alt="WAX">
4306
4307  <img src="https://cdn.shopify.com/s/files/1/0892/4374/6638/files/logo-loyoly-bleu.svg?v=1782141143" alt="Loyoly">
4308
4309  <!-- Ligne 2 -->
4310
4311  <img src="https://cdn.shopify.com/s/files/1/0892/4374/6638/files/logo-smile-bleu.svg?v=1782724027" alt="Smile">
4312
4313  <img src="https://cdn.shopify.com/s/files/1/0892/4374/6638/files/logo-kanal-bleu.svg?v=1782724034" alt="Kanal">
4314
4315  <img class="joy-logo" src="https://cdn.shopify.com/s/files/1/0892/4374/6638/files/logo-joy-bleu_1.svg?v=1782724696" alt="Joy">
4316
4317</div>
4318
4319<style>
4320
4321.tml-tools-logos{
4322  background:#ffffff;
4323  display:grid;
4324  grid-template-columns:repeat(12,1fr);
4325  align-items:center;
4326  justify-items:center;
4327  column-gap:34px;
4328  row-gap:26px;
4329  max-width:1000px;
4330  margin:0 auto;
4331  padding:10px 20px;
4332}
4333
4334.tml-tools-logos img{
4335  width:100%;
4336  max-width:132px;
4337  max-height:48px;
4338  height:auto;
4339  object-fit:contain;
4340  display:block;
4341}
4342
4343/* Joy est naturellement beaucoup plus large */
4344.joy-logo{
4345  max-width:100px !important;
4346  max-height:34px !important;
4347}
4348
4349/* Ligne 1 */
4350.tml-tools-logos img:nth-child(1){grid-column:1 / span 3;}
4351.tml-tools-logos img:nth-child(2){grid-column:4 / span 3;}
4352.tml-tools-logos img:nth-child(3){grid-column:7 / span 3;}
4353.tml-tools-logos img:nth-child(4){grid-column:10 / span 3;}
4354
4355/* Ligne 2 */
4356.tml-tools-logos img:nth-child(5){grid-column:1 / span 4;}
4357.tml-tools-logos img:nth-child(6){grid-column:5 / span 4;}
4358.tml-tools-logos img:nth-child(7){grid-column:9 / span 4;}
4359
4360@media(max-width:768px){
4361
4362.tml-tools-logos{
4363  column-gap:14px;
4364  row-gap:16px;
4365  padding:8px 12px;
4366}
4367
4368.tml-tools-logos img{
4369  max-width:82px;
4370  max-height:32px;
4371}
4372
4373.joy-logo{
4374  max-width:72px !important;
4375  max-height:22px !important;
4376}
4377
4378}
4379
4380</style>
4381                    
4382                  
4383              </div>
4384            </div>
4385          
4386        </div>
4387        
4388      
4389    </div>
4390  </div>
4391</div>
4392
4393
4394<style> #shopify-section-template--30338464678222__custom_content_cE3xCK #m-custom-template--29882721108302__custom_content_cE3xCK .m-section-py {padding-top: 0px !important;} @media (max-width: 769px) {#shopify-section-template--30338464678222__custom_content_cE3xCK #m-custom-template--29882721108302__custom_content_cE3xCK .m-section-py {padding-bottom: 0px !important; }} </style></div><div id="shopify-section-template--30338464678222__custom_liquid_wRjfaV" class="shopify-section custom-liquid"><section class="m-section m-custom-liquid ">
4395  <div id="portfolio" style="position: relative; top: -80px;"></div>
4396</section>
4397
4398
4399</div><div id="shopify-section-template--30338464678222__custom_content_7naXfy" class="shopify-section shopify-section-custom-content"><link href="//modern-letter.com/cdn/shop/t/10/assets/custom-content.css?v=122562997671464857791784623194" rel="stylesheet" type="text/css" media="all" />
4400
4401<style>
4402  #m-custom-template--30338464678222__custom_content_7naXfy {
4403    --column-gap: 30px;
4404    --column-gap-mobile: 16px;
4405    --section-padding-top: 60px;
4406    --section-padding-bottom: 50px;
4407  }
4408</style>
4409
4410<div
4411  id="m-custom-template--30338464678222__custom_content_7naXfy"
4412  class="m-section m-custom-content m-gradient m-color-footer"
4413  data-section-type="custom-content"
4414  data-section-id="template--30338464678222__custom_content_7naXfy"
4415>
4416  
4417  <div class="container-fluid m-section-my m-section-py m-custom-content__container">
4418    <div class="m-gradient m-color-footer">
4419
4420
4421
4422
4423  <div class="m-section__header m:text-center ">
4424    
4425    
4426    
4427      <h2 class="m-section__heading h2 m-scroll-trigger animate--fade-in-up">
4428        ILS VOUS RACONTENT LEUR EXPÉRIENCE
4429      </h2>
4430    
4431    
4432    
4433    
4434  </div>
4435
4436
4437      
4438        <div class="m-mixed-layout m-mixed-layout--mobile-scroll">
4439        <div class="m-custom-content__wrapper m:flex m-mixed-layout__inner md:m:flex-wrap">
4440          
4441            
4442            <div id="m-custom__block--video_rbBFMC" class="m:column m:display-flex m-custom-content__block m-custom-content__block-video lg:m:w-1/3 m:w-full m:items-start" >
4443              <div class="m-custom-content__block-inner m:w-full">
4444                
4445                    <link href="//modern-letter.com/cdn/shop/t/10/assets/video.css?v=15670426434736640131784623194" rel="stylesheet" type="text/css" media="all" />
4446                    
4447                    <div
4448                      class="m-video m-scroll-trigger animate--fade-in-up"
4449                      data-video-block
4450                      
4451                        data-cascade
4452                        style="--animation-order: 1;"
4453                      
4454                    >
4455                      <div class="m-video__container m-video__container--video_rbBFMC mx-auto">
4456                        <div
4457                          class="m-video__wrapper m-video__wrapper--video_rbBFMC m:blocks-radius"
4458                          style="--aspect-ratio: 9/16"
4459                        >
4460                          <video-component
4461                            class="deferred-media no-js-hidden"
4462                            data-media-id=""
4463                            data-auto-play="true"
4464                            data-muted="true"
4465                            data-cover-image="false"
4466                          >
4467                            
4468                            <template>
4469                                <video
4470                                  src="//modern-letter.com/cdn/shop/videos/c/vp/125a00765d24448aa02745f16f983fcd/125a00765d24448aa02745f16f983fcd.HD-1080p-7.2Mbps-66460786.mp4?v=0"
4471                                  playsinline
4472                                  
4473                                    controls
4474                                  
4475                                  
4476                                    loop
4477                                  
4478                                  
4479                                    muted
4480                                     autoplay
4481                                  
4482                                ></video></template>
4483                          </video-component>
4484                        </div>
4485                      </div>
4486                    </div>
4487                  
4488              </div>
4489            </div>
4490          
4491            
4492            <div id="m-custom__block--video_Nk773X" class="m:column m:display-flex m-custom-content__block m-custom-content__block-video lg:m:w-1/3 m:w-full m:items-start" >
4493              <div class="m-custom-content__block-inner m:w-full">
4494                
4495                    <link href="//modern-letter.com/cdn/shop/t/10/assets/video.css?v=15670426434736640131784623194" rel="stylesheet" type="text/css" media="all" />
4496                    
4497                    <div
4498                      class="m-video m-scroll-trigger animate--fade-in-up"
4499                      data-video-block
4500                      
4501                        data-cascade
4502                        style="--animation-order: 2;"
4503                      
4504                    >
4505                      <div class="m-video__container m-video__container--video_Nk773X mx-auto">
4506                        <div
4507                          class="m-video__wrapper m-video__wrapper--video_Nk773X m:blocks-radius"
4508                          style="--aspect-ratio: 9/16"
4509                        >
4510                          <video-component
4511                            class="deferred-media no-js-hidden"
4512                            data-media-id=""
4513                            data-auto-play="true"
4514                            data-muted="true"
4515                            data-cover-image="false"
4516                          >
4517                            
4518                            <template>
4519                                <video
4520                                  src="//modern-letter.com/cdn/shop/videos/c/vp/6b83ac22c09b42a088ac02d46deacc47/6b83ac22c09b42a088ac02d46deacc47.HD-1080p-7.2Mbps-66460962.mp4?v=0"
4521                                  playsinline
4522                                  
4523                                    controls
4524                                  
4525                                  
4526                                    loop
4527                                  
4528                                  
4529                                    muted
4530                                     autoplay
4531                                  
4532                                ></video></template>
4533                          </video-component>
4534                        </div>
4535                      </div>
4536                    </div>
4537                  
4538              </div>
4539            </div>
4540          
4541            
4542            <div id="m-custom__block--video_E9exft" class="m:column m:display-flex m-custom-content__block m-custom-content__block-video lg:m:w-1/3 m:w-full m:items-start" >
4543              <div class="m-custom-content__block-inner m:w-full">
4544                
4545                    <link href="//modern-letter.com/cdn/shop/t/10/assets/video.css?v=15670426434736640131784623194" rel="stylesheet" type="text/css" media="all" />
4546                    
4547                    <div
4548                      class="m-video m-scroll-trigger animate--fade-in-up"
4549                      data-video-block
4550                      
4551                        data-cascade
4552                        style="--animation-order: 3;"
4553                      
4554                    >
4555                      <div class="m-video__container m-video__container--video_E9exft mx-auto">
4556                        <div
4557                          class="m-video__wrapper m-video__wrapper--video_E9exft m:blocks-radius"
4558                          style="--aspect-ratio: 9/16"
4559                        >
4560                          <video-component
4561                            class="deferred-media no-js-hidden"
4562                            data-media-id=""
4563                            data-auto-play="true"
4564                            data-muted="true"
4565                            data-cover-image="false"
4566                          >
4567                            
4568                            <template>
4569                                <video
4570                                  src="//modern-letter.com/cdn/shop/videos/c/vp/4dd87b112e5740eca5172865bfcc58ca/4dd87b112e5740eca5172865bfcc58ca.HD-1080p-4.8Mbps-66461367.mp4?v=0"
4571                                  playsinline
4572                                  
4573                                    controls
4574                                  
4575                                  
4576                                    loop
4577                                  
4578                                  
4579                                    muted
4580                                     autoplay
4581                                  
4582                                ></video></template>
4583                          </video-component>
4584                        </div>
4585                      </div>
4586                    </div>
4587                  
4588              </div>
4589            </div>
4590          
4591        </div>
4592        </div>
4593      
4594    </div>
4595  </div>
4596</div>
4597
4598
4599</div><div id="shopify-section-template--30338464678222__custom_content_xALaMf" class="shopify-section shopify-section-custom-content"><link href="//modern-letter.com/cdn/shop/t/10/assets/custom-content.css?v=122562997671464857791784623194" rel="stylesheet" type="text/css" media="all" />
4600
4601<style>
4602  #m-custom-template--30338464678222__custom_content_xALaMf {
4603    --column-gap: 30px;
4604    --column-gap-mobile: 16px;
4605    --section-padding-top: 0px;
4606    --section-padding-bottom: 0px;
4607  }
4608</style>
4609
4610<div
4611  id="m-custom-template--30338464678222__custom_content_xALaMf"
4612  class="m-section m-custom-content m-gradient m-color-default"
4613  data-section-type="custom-content"
4614  data-section-id="template--30338464678222__custom_content_xALaMf"
4615>
4616  
4617  <div class="container-fluid m-section-my m-section-py m-custom-content__container">
4618    <div class="m-gradient m-color-default">
4619
4620
4621
4622
4623
4624      
4625        
4626        <div class="m-custom-content__wrapper m:flex m:flex-wrap">
4627          
4628            
4629            <div id="m-custom__block--html_gbT3c7" class="m:column m:display-flex m-custom-content__block m-custom-content__block-html lg:m:w-full m:w-full" >
4630              <div class="m-custom-content__block-inner m:w-full">
4631                
4632                    
4633                      <div class="m-divider"></div>
4634                    
4635                  
4636              </div>
4637            </div>
4638          
4639        </div>
4640        
4641      
4642    </div>
4643  </div>
4644</div>
4645
4646
4647</div><div id="shopify-section-template--30338464678222__rich_text_TPfB8w" class="shopify-section"><link href="//modern-letter.com/cdn/shop/t/10/assets/rich-text.css?v=109847090468312531301784623194" rel="stylesheet" type="text/css" media="all" />
4648
4649<style data-shopify>#m-section-template--30338464678222__rich_text_TPfB8w {
4650    --section-padding-top: 32px;
4651    --section-padding-bottom: 24px;
4652  }</style><section
4653  id="m-section-template--30338464678222__rich_text_TPfB8w"
4654  class="m-section m-rich-text m-gradient m-color-default "
4655>
4656  <div class="container m-section-my m-section-py">
4657    <div class="m-richtext m:text-center"><h2
4658                class="m-richtext__title h2 m-scroll-trigger animate--fade-in-up"
4659                
4660                  data-cascade
4661                  style="--animation-order: 1;"
4662                
4663                
4664              >
4665                NOS CRÉATIONS
4666              </h2>
4667            
4668</div>
4669  </div>
4670  
4671</section>
4672
4673</div><div id="shopify-section-template--30338464678222__brands_list_NEfCVm" class="shopify-section"><link href="//modern-letter.com/cdn/shop/t/10/assets/brands-list.css?v=66411958921430488991784623194" rel="stylesheet" type="text/css" media="all" />
4674<script src="//modern-letter.com/cdn/shop/t/10/assets/brands-list.js?v=23605854586430949471784623194" defer="defer"></script>
4674
4675
4676
4677
4678
4679<style data-shopify>
4680      /* arrow offset x2 + container padding x2 - 1 = 80x2 + 15x2 - 1 */
4681    @media (max-width: 1609px) {
4682      #m-brand-list-template--30338464678222__brands_list_NEfCVm .m-slider-controls--absolute .m-slider-controls__button-prev {
4683        left: 0;
4684      }
4685      #m-brand-list-template--30338464678222__brands_list_NEfCVm .m-slider-controls--absolute .m-slider-controls__button-next {
4686        right: 0;
4687      }
4688    }
4689    
4690</style>
4691
4692<style>
4693  #m-brand-list-template--30338464678222__brands_list_NEfCVm {
4694    --items: 8;
4695    --column-gap: 30px;
4696    --column-gap-mobile: 10px;
4697    --row-gap: 30px;
4698    --row-gap-mobile: 10px;
4699    --section-padding-top: 50px;
4700    --section-padding-bottom: 50px;
4701  }
4702</style>
4703<section
4704  id="m-brand-list-template--30338464678222__brands_list_NEfCVm"
4705  class="m-section m-brands-list m-gradient m-color-default"
4706  data-section-type="brand-list"
4707  data-section-id="template--30338464678222__brands_list_NEfCVm"
4708>
4709  <div class="container-fluid m-section-my m-section-py">
4710    
4711
4712
4713
4714
4715
4716    <m-brand-list
4717      data-enable-slider="true"
4718      
4719        data-enable-autoplay="true"
4720        data-autoplay-speed="3"
4721        data-items="8"
4722        data-items-tablet="4"
4723      
4724      class="m-swiper-overflow m:block"
4725    >
4726      <div class="m-mixed-layout">
4727        <div class="m-brands-list__wrapper swiper-container swiper--equal-height">
4728          <div
4729            class="m-brands-list__inner m:grid m:grid-2-cols md:m:grid-4-cols lg:m:grid-8-cols"
4730            data-wrapper
4731          >
4732            
4733              
4734              <div class="swiper-slide m:column" data-index="0" >
4735                <div
4736                  
4737                  class="m-brands-list__logo m-scroll-trigger animate--fade-in-up m:blocks-radius"
4738                  
4739                    data-cascade
4740                    style="--animation-order: 1;"
4741                  
4742                >
4743                  
4744                    
4745<responsive-image class="m-image m:w-full"   style="--aspect-ratio: 0.17777777777777778;        --image-width: 100%;">
4746  
4747  <img
4748      srcset="//modern-letter.com/cdn/shop/files/portfolio_tml.png?v=1782726894&width=165 165w,//modern-letter.com/cdn/shop/files/portfolio_tml.png?v=1782726894 320w"
4749      src="//modern-letter.com/cdn/shop/files/portfolio_tml.png?v=1782726894&width=360"
4750      sizes="(min-width: 1200px) 267px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
4751      alt=""
4752      loading="lazy"
4753      fetchPriority="low"
4754      class=""
4755      width="320"
4756      height="1800"
4757      
4758  >
4759  
4760  <noscript>
4761    <img class="" loading="lazy" width="" height="" src="//modern-letter.com/cdn/shop/files/portfolio_tml.png?crop=center&height=2048&v=1782726894&width=2048" alt="">
4762  </noscript>
4763</responsive-image>
4764
4765                  
4766                </div>
4767              </div>
4768            
4769              
4770              <div class="swiper-slide m:column" data-index="1" >
4771                <div
4772                  
4773                  class="m-brands-list__logo m-scroll-trigger animate--fade-in-up m:blocks-radius"
4774                  
4775                    data-cascade
4776                    style="--animation-order: 2;"
4777                  
4778                >
4779                  
4780                    
4781<responsive-image class="m-image m:w-full"   style="--aspect-ratio: 0.17777777777777778;        --image-width: 100%;">
4782  
4783  <img
4784      srcset="//modern-letter.com/cdn/shop/files/portfolio_tml_17.png?v=1782726916&width=165 165w,//modern-letter.com/cdn/shop/files/portfolio_tml_17.png?v=1782726916 320w"
4785      src="//modern-letter.com/cdn/shop/files/portfolio_tml_17.png?v=1782726916&width=360"
4786      sizes="(min-width: 1200px) 267px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
4787      alt=""
4788      loading="lazy"
4789      fetchPriority="low"
4790      class=""
4791      width="320"
4792      height="1800"
4793      
4794  >
4795  
4796  <noscript>
4797    <img class="" loading="lazy" width="" height="" src="//modern-letter.com/cdn/shop/files/portfolio_tml_17.png?crop=center&height=2048&v=1782726916&width=2048" alt="">
4798  </noscript>
4799</responsive-image>
4800
4801                  
4802                </div>
4803              </div>
4804            
4805              
4806              <div class="swiper-slide m:column" data-index="2" >
4807                <div
4808                  
4809                  class="m-brands-list__logo m-scroll-trigger animate--fade-in-up m:blocks-radius"
4810                  
4811                    data-cascade
4812                    style="--animation-order: 3;"
4813                  
4814                >
4815                  
4816                    
4817<responsive-image class="m-image m:w-full"   style="--aspect-ratio: 0.17777777777777778;        --image-width: 100%;">
4818  
4819  <img
4820      srcset="//modern-letter.com/cdn/shop/files/portfolio_tml_2.png?v=1782726956&width=165 165w,//modern-letter.com/cdn/shop/files/portfolio_tml_2.png?v=1782726956 320w"
4821      src="//modern-letter.com/cdn/shop/files/portfolio_tml_2.png?v=1782726956&width=360"
4822      sizes="(min-width: 1200px) 267px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
4823      alt=""
4824      loading="lazy"
4825      fetchPriority="low"
4826      class=""
4827      width="320"
4828      height="1800"
4829      
4830  >
4831  
4832  <noscript>
4833    <img class="" loading="lazy" width="" height="" src="//modern-letter.com/cdn/shop/files/portfolio_tml_2.png?crop=center&height=2048&v=1782726956&width=2048" alt="">
4834  </noscript>
4835</responsive-image>
4836
4837                  
4838                </div>
4839              </div>
4840            
4841              
4842              <div class="swiper-slide m:column" data-index="3" >
4843                <div
4844                  
4845                  class="m-brands-list__logo m-scroll-trigger animate--fade-in-up m:blocks-radius"
4846                  
4847                    data-cascade
4848                    style="--animation-order: 4;"
4849                  
4850                >
4851                  
4852                    
4853<responsive-image class="m-image m:w-full"   style="--aspect-ratio: 0.17777777777777778;        --image-width: 100%;">
4854  
4855  <img
4856      srcset="//modern-letter.com/cdn/shop/files/portfolio_tml_11.png?v=1782727070&width=165 165w,//modern-letter.com/cdn/shop/files/portfolio_tml_11.png?v=1782727070 320w"
4857      src="//modern-letter.com/cdn/shop/files/portfolio_tml_11.png?v=1782727070&width=360"
4858      sizes="(min-width: 1200px) 267px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
4859      alt=""
4860      loading="lazy"
4861      fetchPriority="low"
4862      class=""
4863      width="320"
4864      height="1800"
4865      
4866  >
4867  
4868  <noscript>
4869    <img class="" loading="lazy" width="" height="" src="//modern-letter.com/cdn/shop/files/portfolio_tml_11.png?crop=center&height=2048&v=1782727070&width=2048" alt="">
4870  </noscript>
4871</responsive-image>
4872
4873                  
4874                </div>
4875              </div>
4876            
4877              
4878              <div class="swiper-slide m:column" data-index="4" >
4879                <div
4880                  
4881                  class="m-brands-list__logo m-scroll-trigger animate--fade-in-up m:blocks-radius"
4882                  
4883                    data-cascade
4884                    style="--animation-order: 5;"
4885                  
4886                >
4887                  
4888                    
4889<responsive-image class="m-image m:w-full"   style="--aspect-ratio: 0.17777777777777778;        --image-width: 100%;">
4890  
4891  <img
4892      srcset="//modern-letter.com/cdn/shop/files/portfolio_tml_6.png?v=1782727017&width=165 165w,//modern-letter.com/cdn/shop/files/portfolio_tml_6.png?v=1782727017 320w"
4893      src="//modern-letter.com/cdn/shop/files/portfolio_tml_6.png?v=1782727017&width=360"
4894      sizes="(min-width: 1200px) 267px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
4895      alt=""
4896      loading="lazy"
4897      fetchPriority="low"
4898      class=""
4899      width="320"
4900      height="1800"
4901      
4902  >
4903  
4904  <noscript>
4905    <img class="" loading="lazy" width="" height="" src="//modern-letter.com/cdn/shop/files/portfolio_tml_6.png?crop=center&height=2048&v=1782727017&width=2048" alt="">
4906  </noscript>
4907</responsive-image>
4908
4909                  
4910                </div>
4911              </div>
4912            
4913              
4914              <div class="swiper-slide m:column" data-index="5" >
4915                <div
4916                  
4917                  class="m-brands-list__logo m-scroll-trigger animate--fade-in-up m:blocks-radius"
4918                  
4919                    data-cascade
4920                    style="--animation-order: 6;"
4921                  
4922                >
4923                  
4924                    
4925<responsive-image class="m-image m:w-full"   style="--aspect-ratio: 0.17777777777777778;        --image-width: 100%;">
4926  
4927  <img
4928      srcset="//modern-letter.com/cdn/shop/files/portfolio_tml_9.png?v=1782727042&width=165 165w,//modern-letter.com/cdn/shop/files/portfolio_tml_9.png?v=1782727042 320w"
4929      src="//modern-letter.com/cdn/shop/files/portfolio_tml_9.png?v=1782727042&width=360"
4930      sizes="(min-width: 1200px) 267px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
4931      alt=""
4932      loading="lazy"
4933      fetchPriority="low"
4934      class=""
4935      width="320"
4936      height="1800"
4937      
4938  >
4939  
4940  <noscript>
4941    <img class="" loading="lazy" width="" height="" src="//modern-letter.com/cdn/shop/files/portfolio_tml_9.png?crop=center&height=2048&v=1782727042&width=2048" alt="">
4942  </noscript>
4943</responsive-image>
4944
4945                  
4946                </div>
4947              </div>
4948            
4949              
4950              <div class="swiper-slide m:column" data-index="6" >
4951                <div
4952                  
4953                  class="m-brands-list__logo m-scroll-trigger animate--fade-in-up m:blocks-radius"
4954                  
4955                    data-cascade
4956                    style="--animation-order: 7;"
4957                  
4958                >
4959                  
4960                    
4961<responsive-image class="m-image m:w-full"   style="--aspect-ratio: 0.17777777777777778;        --image-width: 100%;">
4962  
4963  <img
4964      srcset="//modern-letter.com/cdn/shop/files/portfolio_tml_4.png?v=1782726994&width=165 165w,//modern-letter.com/cdn/shop/files/portfolio_tml_4.png?v=1782726994 320w"
4965      src="//modern-letter.com/cdn/shop/files/portfolio_tml_4.png?v=1782726994&width=360"
4966      sizes="(min-width: 1200px) 267px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
4967      alt=""
4968      loading="lazy"
4969      fetchPriority="low"
4970      class=""
4971      width="320"
4972      height="1800"
4973      
4974  >
4975  
4976  <noscript>
4977    <img class="" loading="lazy" width="" height="" src="//modern-letter.com/cdn/shop/files/portfolio_tml_4.png?crop=center&height=2048&v=1782726994&width=2048" alt="">
4978  </noscript>
4979</responsive-image>
4980
4981                  
4982                </div>
4983              </div>
4984            
4985              
4986              <div class="swiper-slide m:column" data-index="7" >
4987                <div
4988                  
4989                  class="m-brands-list__logo m-scroll-trigger animate--fade-in-up m:blocks-radius"
4990                  
4991                    data-cascade
4992                    style="--animation-order: 8;"
4993                  
4994                >
4995                  
4996                    
4997<responsive-image class="m-image m:w-full"   style="--aspect-ratio: 0.17777777777777778;        --image-width: 100%;">
4998  
4999  <img
5000      srcset="//modern-letter.com/cdn/shop/files/portfolio_tml_14.png?v=1782727144&width=165 165w,//modern-letter.com/cdn/shop/files/portfolio_tml_14.png?v=1782727144 320w"
5001      src="//modern-letter.com/cdn/shop/files/portfolio_tml_14.png?v=1782727144&width=360"
5002      sizes="(min-width: 1200px) 267px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
5003      alt=""
5004      loading="lazy"
5005      fetchPriority="low"
5006      class=""
5007      width="320"
5008      height="1800"
5009      
5010  >
5011  
5012  <noscript>
5013    <img class="" loading="lazy" width="" height="" src="//modern-letter.com/cdn/shop/files/portfolio_tml_14.png?crop=center&height=2048&v=1782727144&width=2048" alt="">
5014  </noscript>
5015</responsive-image>
5016
5017                  
5018                </div>
5019              </div>
5020            
5021              
5022              <div class="swiper-slide m:column" data-index="8" >
5023                <div
5024                  
5025                  class="m-brands-list__logo m-scroll-trigger animate--fade-in-up m:blocks-radius"
5026                  
5027                    data-cascade
5028                    style="--animation-order: 9;"
5029                  
5030                >
5031                  
5032                    
5033<responsive-image class="m-image m:w-full"   style="--aspect-ratio: 0.17777777777777778;        --image-width: 100%;">
5034  
5035  <img
5036      srcset="//modern-letter.com/cdn/shop/files/portfolio_tml_1.png?v=1782727166&width=165 165w,//modern-letter.com/cdn/shop/files/portfolio_tml_1.png?v=1782727166 320w"
5037      src="//modern-letter.com/cdn/shop/files/portfolio_tml_1.png?v=1782727166&width=360"
5038      sizes="(min-width: 1200px) 267px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
5039      alt=""
5040      loading="lazy"
5041      fetchPriority="low"
5042      class=""
5043      width="320"
5044      height="1800"
5045      
5046  >
5047  
5048  <noscript>
5049    <img class="" loading="lazy" width="" height="" src="//modern-letter.com/cdn/shop/files/portfolio_tml_1.png?crop=center&height=2048&v=1782727166&width=2048" alt="">
5050  </noscript>
5051</responsive-image>
5052
5053                  
5054                </div>
5055              </div>
5056            
5057              
5058              <div class="swiper-slide m:column" data-index="9" >
5059                <div
5060                  
5061                  class="m-brands-list__logo m-scroll-trigger animate--fade-in-up m:blocks-radius"
5062                  
5063                    data-cascade
5064                    style="--animation-order: 10;"
5065                  
5066                >
5067                  
5068                    
5069<responsive-image class="m-image m:w-full"   style="--aspect-ratio: 0.17777777777777778;        --image-width: 100%;">
5070  
5071  <img
5072      srcset="//modern-letter.com/cdn/shop/files/portfolio_tml_16.png?v=1782727183&width=165 165w,//modern-letter.com/cdn/shop/files/portfolio_tml_16.png?v=1782727183 320w"
5073      src="//modern-letter.com/cdn/shop/files/portfolio_tml_16.png?v=1782727183&width=360"
5074      sizes="(min-width: 1200px) 267px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
5075      alt=""
5076      loading="lazy"
5077      fetchPriority="low"
5078      class=""
5079      width="320"
5080      height="1800"
5081      
5082  >
5083  
5084  <noscript>
5085    <img class="" loading="lazy" width="" height="" src="//modern-letter.com/cdn/shop/files/portfolio_tml_16.png?crop=center&height=2048&v=1782727183&width=2048" alt="">
5086  </noscript>
5087</responsive-image>
5088
5089                  
5090                </div>
5091              </div>
5092            
5093              
5094              <div class="swiper-slide m:column" data-index="10" >
5095                <div
5096                  
5097                  class="m-brands-list__logo m-scroll-trigger animate--fade-in-up m:blocks-radius"
5098                  
5099                    data-cascade
5100                    style="--animation-order: 11;"
5101                  
5102                >
5103                  
5104                    
5105<responsive-image class="m-image m:w-full"   style="--aspect-ratio: 0.17777777777777778;        --image-width: 100%;">
5106  
5107  <img
5108      srcset="//modern-letter.com/cdn/shop/files/portfolio_tml_3.png?v=1782727205&width=165 165w,//modern-letter.com/cdn/shop/files/portfolio_tml_3.png?v=1782727205 320w"
5109      src="//modern-letter.com/cdn/shop/files/portfolio_tml_3.png?v=1782727205&width=360"
5110      sizes="(min-width: 1200px) 267px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
5111      alt=""
5112      loading="lazy"
5113      fetchPriority="low"
5114      class=""
5115      width="320"
5116      height="1800"
5117      
5118  >
5119  
5120  <noscript>
5121    <img class="" loading="lazy" width="" height="" src="//modern-letter.com/cdn/shop/files/portfolio_tml_3.png?crop=center&height=2048&v=1782727205&width=2048" alt="">
5122  </noscript>
5123</responsive-image>
5124
5125                  
5126                </div>
5127              </div>
5128            
5129              
5130              <div class="swiper-slide m:column" data-index="11" >
5131                <div
5132                  
5133                  class="m-brands-list__logo m-scroll-trigger animate--fade-in-up m:blocks-radius"
5134                  
5135                    data-cascade
5136                    style="--animation-order: 12;"
5137                  
5138                >
5139                  
5140                    
5141<responsive-image class="m-image m:w-full"   style="--aspect-ratio: 0.17777777777777778;        --image-width: 100%;">
5142  
5143  <img
5144      srcset="//modern-letter.com/cdn/shop/files/portfolio_tml_10.png?v=1782727240&width=165 165w,//modern-letter.com/cdn/shop/files/portfolio_tml_10.png?v=1782727240 320w"
5145      src="//modern-letter.com/cdn/shop/files/portfolio_tml_10.png?v=1782727240&width=360"
5146      sizes="(min-width: 1200px) 267px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
5147      alt=""
5148      loading="lazy"
5149      fetchPriority="low"
5150      class=""
5151      width="320"
5152      height="1800"
5153      
5154  >
5155  
5156  <noscript>
5157    <img class="" loading="lazy" width="" height="" src="//modern-letter.com/cdn/shop/files/portfolio_tml_10.png?crop=center&height=2048&v=1782727240&width=2048" alt="">
5158  </noscript>
5159</responsive-image>
5160
5161                  
5162                </div>
5163              </div>
5164            
5165              
5166              <div class="swiper-slide m:column" data-index="12" >
5167                <div
5168                  
5169                  class="m-brands-list__logo m-scroll-trigger animate--fade-in-up m:blocks-radius"
5170                  
5171                    data-cascade
5172                    style="--animation-order: 13;"
5173                  
5174                >
5175                  
5176                    
5177<responsive-image class="m-image m:w-full"   style="--aspect-ratio: 0.17777777777777778;        --image-width: 100%;">
5178  
5179  <img
5180      srcset="//modern-letter.com/cdn/shop/files/portfolio_tml_15.png?v=1782727276&width=165 165w,//modern-letter.com/cdn/shop/files/portfolio_tml_15.png?v=1782727276 320w"
5181      src="//modern-letter.com/cdn/shop/files/portfolio_tml_15.png?v=1782727276&width=360"
5182      sizes="(min-width: 1200px) 267px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
5183      alt=""
5184      loading="lazy"
5185      fetchPriority="low"
5186      class=""
5187      width="320"
5188      height="1800"
5189      
5190  >
5191  
5192  <noscript>
5193    <img class="" loading="lazy" width="" height="" src="//modern-letter.com/cdn/shop/files/portfolio_tml_15.png?crop=center&height=2048&v=1782727276&width=2048" alt="">
5194  </noscript>
5195</responsive-image>
5196
5197                  
5198                </div>
5199              </div>
5200            
5201          </div>
5202        </div>
5203        
5204          
5205
5206
5207<div class="m-slider-controls m-slider-controls--bottom-center m-slider-controls--absolute">
5208  <div class="m-slider-controls__wrapper">
5209    
5210    
5211    
5212  </div>
5213</div>
5214
5215        
5216      </div>
5217    </m-brand-list>
5218  </div>
5219</section>
5220
5221
5222</div><div id="shopify-section-template--30338464678222__rich_text_PiWajB" class="shopify-section"><link href="//modern-letter.com/cdn/shop/t/10/assets/rich-text.css?v=109847090468312531301784623194" rel="stylesheet" type="text/css" media="all" />
5223
5224<style data-shopify>#m-section-template--30338464678222__rich_text_PiWajB {
5225    --section-padding-top: 24px;
5226    --section-padding-bottom: 68px;
5227  }</style><section
5228  id="m-section-template--30338464678222__rich_text_PiWajB"
5229  class="m-section m-rich-text m-gradient m-color-default "
5230>
5231  <div class="container m-section-my m-section-py">
5232    <div class="m-richtext m:text-center"><div
5233                class="m-richtext__button m-scroll-trigger animate--fade-in-up"
5234                
5235                  data-cascade
5236                  style="--animation-order: 1;"
5237                
5238              >
5239                <a
5240                  href="/pages/portfolio"
5241                  class="m-button m-button--secondary m-button--large"
5242                  
5243                >VOIR TOUS NOS DESIGNS</a>
5244              </div></div>
5245  </div>
5246  
5247</section>
5248
5249</div><div id="shopify-section-template--30338464678222__custom_content_79GMRD" class="shopify-section shopify-section-custom-content"><link href="//modern-letter.com/cdn/shop/t/10/assets/custom-content.css?v=122562997671464857791784623194" rel="stylesheet" type="text/css" media="all" />
5250
5251<style>
5252  #m-custom-template--30338464678222__custom_content_79GMRD {
5253    --column-gap: 30px;
5254    --column-gap-mobile: 16px;
5255    --section-padding-top: 50px;
5256    --section-padding-bottom: 50px;
5257  }
5258</style>
5259
5260<div
5261  id="m-custom-template--30338464678222__custom_content_79GMRD"
5262  class="m-section m-custom-content m-gradient m-color-dark"
5263  data-section-type="custom-content"
5264  data-section-id="template--30338464678222__custom_content_79GMRD"
5265>
5266  
5267  <div class="container-fluid m-section-my m-section-py m-custom-content__container">
5268    <div class="m-gradient m-color-dark">
5269
5270
5271
5272
5273
5274      
5275        
5276        <div class="m-custom-content__wrapper m:flex m:flex-wrap">
5277          
5278            
5279            <div id="m-custom__block--liquid_bUWFC7" class="m:column m:display-flex m-custom-content__block m-custom-content__block-liquid lg:m:w-1/2 m:w-full" >
5280              <div class="m-custom-content__block-inner m:w-full">
5281                
5282                    
5283                      <div class="custom-contact-section" style="padding: 40px; background-color: #1B442A; color: #f3f3ec; font-family: Inconsolata;">
5284  <h2 class="heading-1" style="font-size: 40px; color: #f3f3ec; margin-bottom: 30px;">ON ÉCHANGE SUR VOS BESOINS</h2>
5285
5286  <div class="email-section" style="font-size: 17px; line-height: 1.6;">
5287    <p>Réservez un appel de 30 minutes pour discuter de votre stratég
5287ie d’email marketing.<br><br></p>
5288    <p><em><u>Prérequis pour réserver l’appel</u></em></p>
5289    <ul>
5290      <li>- Vous générez plus de 10 000 visiteurs/ mois</li>
5291      <li>- Vous êtes sur Shopify ou WordPress</li>
5292      <li>- Vous utilisez déjà plusieurs canaux publicitaires</li>
5293    </ul>
5294    <p><u><a href="https://tally.so/r/w8AYPo" target="_blank" style="color: #f3f3ec; text-decoration: underline;"><br>Réservez votre créneau dès maintenant</a></u></p>
5295  </div>
5296
5297  <h2 class="heading-2" style="font-size: 30px; margin-top: 40px; color: #f3f3ec;">OU CONTACTEZ-NOUS DIRECTEMENT</h2>
5298
5299  <ul style="list-style: none; padding-left: 0; margin-top: 20px;">
5300    <li style="margin-bottom: 10px;">
5301      <a href="https://tally.so/r/w8AYPo" target="_blank" style="color: #f3f3ec; text-decoration: none;">
5302        📇 Formulaire de contact
5303      </a>
5304    </li>
5305    <li>
5306      ✉️ [email protected]
5307    </li>
5308  </ul>
5309
5310  <style>
5311    @media (max-width: 768px) {
5312      .custom-contact-section {
5313        font-size: 15px;
5314        line-height: 1.4;
5315      }
5316
5317      .heading-1 {
5318        font-size: 32px !important;
5319      }
5320
5321      .heading-2 {
5322        font-size: 26px !important;
5323      }
5324    }
5325  </style>
5326</div>
5327                    
5328                  
5329              </div>
5330            </div>
5331          
5332            
5333            <div id="m-custom__block--html_LTiEH8" class="m:column m:display-flex m-custom-content__block m-custom-content__block-html lg:m:w-1/2 m:w-full" >
5334              <div class="m-custom-content__block-inner m:w-full">
5335                
5336                    
5337                      <!-- Début de widget en ligne Calendly -->
5338<div class="calendly-inline-widget" data-url="https://calendly.com/the-modern-letter/30min?hide_event_type_details=1&amp;hide_gdpr_banner=1&amp;primary_color=1b442a" style="min-width:320px;height:700px;"></div>
5339<script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js" async=""></script>
5339
5340<!-- Fin de widget en ligne Calendly -->
5341                    
5342                  
5343              </div>
5344            </div>
5345          
5346        </div>
5347        
5348      
5349    </div>
5350  </div>
5351</div>
5352
5353
5354</div><div id="shopify-section-template--30338464678222__rich_text_HrbTW3" class="shopify-section"><link href="//modern-letter.com/cdn/shop/t/10/assets/rich-text.css?v=109847090468312531301784623194" rel="stylesheet" type="text/css" media="all" />
5355
5356<style data-shopify>#m-section-template--30338464678222__rich_text_HrbTW3 {
5357    --section-padding-top: 60px;
5358    --section-padding-bottom: 32px;
5359  }</style><section
5360  id="m-section-template--30338464678222__rich_text_HrbTW3"
5361  class="m-section m-rich-text m-gradient m-color-default "
5362>
5363  <div class="container m-section-my m-section-py">
5364    <div class="m-richtext m:text-center"><h2
5365                class="m-richtext__title h2 m-scroll-trigger animate--fade-in-up"
5366                
5367                  data-cascade
5368                  style="--animation-order: 1;"
5369                
5370                
5371              >
5372                COMMENT SE DÉROULE UNE MISSION ?
5373              </h2>
5374            
5375</div>
5376  </div>
5377  
5378</section>
5379
5380<style> #shopify-section-template--30338464678222__rich_text_HrbTW3 h2 {color: #253261;} </style></div><div id="shopify-section-template--30338464678222__custom_liquid_wpHBwR" class="shopify-section custom-liquid"><section class="m-section m-custom-liquid ">
5381  <style>
5382.steps-container {
5383  max-width: 1100px;
5384  width: 100%;
5385  margin: 0 auto;
5386  padding: 25px 15px 60px;
5387  box-sizing: border-box;
5388  font-family: 'InconsolataCondensed', sans-serif;
5389}
5390@media (max-width: 768px) {
5391  .steps-container {
5392    padding-bottom: 50px !important;
5393  }
5394}
5395
5396.steps-grid {
5397  display: grid;
5398  grid-template-columns: repeat(6, minmax(0, 1fr));
5399  gap: 22px;
5400  align-items: stretch;
5401}
5402
5403.step-card {
5404  position: relative;
5405  background: #ffffff;
5406  border: 1px solid rgba(37, 50, 97, 0.18);
5407  border-left: 4px solid #253261;
5408  border-radius: 12px;
5409  padding: 18px 18px 18px 64px;
5410  box-sizing: border-box;
5411}
5412
5413/* PC */
5414.step-card:nth-child(1) {
5415  grid-column: 1 / 3;
5416  grid-row: 1;
5417}
5418
5419.step-card:nth-child(2) {
5420  grid-column: 3 / 5;
5421  grid-row: 1;
5422}
5423
5424.step-card:nth-child(3) {
5425  grid-column: 5 / 7;
5426  grid-row: 1;
5427}
5428
5429.step-card:nth-child(4) {
5430  grid-column: 4 / 6;
5431  grid-row: 2;
5432}
5433
5434.step-card:nth-child(5) {
5435  grid-column: 2 / 4;
5436  grid-row: 2;
5437}
5438
5439.step-number {
5440  position: absolute;
5441  top: 18px;
5442  left: 18px;
5443  width: 32px;
5444  height: 32px;
5445  background: #253261;
5446  color: #ffffff;
5447  border-radius: 50%;
5448  font-size: 15px;
5449  font-weight: 700;
5450  display: flex;
5451  align-items: center;
5452  justify-content: center;
5453}
5454
5455.step-title {
5456  font-size: 18px;
5457  line-height: 24px;
5458  font-weight: 700;
5459  color: #253261;
5460  margin: 0 0 6px;
5461}
5462
5463.step-text {
5464  font-size: 16px;
5465  line-height: 26px;
5466  color: #000000;
5467  margin: 0;
5468}
5469
5470/* Flèches PC */
5471.step-card:nth-child(1)::after,
5472.step-card:nth-child(2)::after {
5473  content: "→";
5474  position: absolute;
5475  right: -20px;
5476  top: 50%;
5477  transform: translateY(-50%);
5478  color: #253261;
5479  font-size: 26px;
5480  font-weight: 700;
5481  z-index: 2;
5482}
5483
5484.step-card:nth-child(3)::after {
5485  content: "↓";
5486  position: absolute;
5487  left: 50%;
5488  bottom: -34px;
5489  transform: translateX(-50%);
5490  color: #253261;
5491  font-size: 26px;
5492  font-weight: 700;
5493  z-index: 2;
5494}
5495
5496.step-card:nth-child(4)::after {
5497  content: "←";
5498  position: absolute;
5499  left: -20px;
5500  top: 50%;
5501  transform: translateY(-50%);
5502  color: #253261;
5503  font-size: 26px;
5504  font-weight: 700;
5505  z-index: 2;
5506}
5507
5508/* MOBILE */
5509@media (max-width: 768px) {
5510
5511  .steps-container {
5512    padding: 20px 15px;
5513  }
5514
5515  .steps-grid {
5516    grid-template-columns: 1fr;
5517    gap: 16px;
5518  }
5519
5520  .step-card,
5521  .step-card:nth-child(1),
5522  .step-card:nth-child(2),
5523  .step-card:nth-child(3),
5524  .step-card:nth-child(4),
5525  .step-card:nth-child(5) {
5526    grid-column: auto;
5527    grid-row: auto;
5528  }
5529
5530  .step-card {
5531    padding: 16px 16px 16px 58px;
5532  }
5533
5534  .step-card::after {
5535    content: "↓" !important;
5536    right: auto !important;
5537    left: 28px !important;
5538    top: auto !important;
5539    bottom: -22px !important;
5540    transform: none !important;
5541    color: #253261 !important;
5542    font-size: 20px !important;
5543  }
5544
5545  .step-card:nth-child(5)::after {
5546    display: none !important;
5547  }
5548
5549  .step-number {
5550    top: 16px;
5551    left: 16px;
5552  }
5553
5554  .step-title {
5555    font-size: 17px;
5556  }
5557
5558  .step-text {
5559    font-size: 16px;
5560    line-height: 24px;
5561  }
5562}
5563</style>
5564
5565<div class="steps-container">
5566  <div class="steps-grid">
5567
5568    <div class="step-card">
5569      <div class="step-number">1</div>
5570      <p class="step-title">
5570Diagnostic stratégique</p>
5571      <p class="step-text">Un premier échange pour cerner vos besoins, définir vos objectifs et clarifier votre projet.</p>
5572    </div>
5573
5574    <div class="step-card">
5575      <div class="step-number">2</div>
5576      <p class="step-title">Analyse et planification</p>
5577      <p class="step-text">Nous analysons votre compte, identifions les opportunités et proposons un devis détaillé avec une stratégie sur mesure.</p>
5578    </div>
5579
5580    <div class="step-card">
5581      <div class="step-number">3</div>
5582      <p class="step-title">Préparation collaborative</p>
5583      <p class="step-text">Intégration sur une messagerie pour simplifier les échanges et formulaire dédié pour collecter les données nécessaires.</p>
5584    </div>
5585
5586    <div class="step-card">
5587      <div class="step-number">4</div>
5588      <p class="step-title">Création et optimisation</p>
5589      <p class="step-text">Création des déclencheurs, segmentation, maquettes et intégration des contenus.</p>
5590    </div>
5591
5592    <div class="step-card">
5593      <div class="step-number">5</div>
5594      <p class="step-title">Validation et livraison</p>
5595      <p class="step-text">Une fois le projet finalisé, nous vous présentons un récapitulatif et les objectifs attendus. Puis, place aux résultats !</p>
5596    </div>
5597
5598  </div>
5599</div>
5600</section>
5601
5602
5603<style> #shopify-section-template--30338464678222__custom_liquid_wpHBwR .m-custom-liquid {background-color: white;} </style></div><div id="shopify-section-template--30338464678222__rich_text_cK87YF" class="shopify-section"><link href="//modern-letter.com/cdn/shop/t/10/assets/rich-text.css?v=109847090468312531301784623194" rel="stylesheet" type="text/css" media="all" />
5604
5605<style data-shopify>#m-section-template--30338464678222__rich_text_cK87YF {
5606    --section-padding-top: 76px;
5607    --section-padding-bottom: 40px;
5608  }</style><section
5609  id="m-section-template--30338464678222__rich_text_cK87YF"
5610  class="m-section m-rich-text m-gradient m-color-footer "
5611>
5612  <div class="container m-section-my m-section-py">
5613    <div class="m-richtext m:text-center"><h2
5614                class="m-richtext__title h2 m-scroll-trigger animate--fade-in-up"
5615                
5616                  data-cascade
5617                  style="--animation-order: 1;"
5618                
5619                
5620              >
5621                NOS CLIENTS PARLENT DE NOUS
5622              </h2>
5623            
5624</div>
5625  </div>
5626  
5627</section>
5628
5629</div><div id="shopify-section-template--30338464678222__custom_content_6TNeWD" class="shopify-section shopify-section-custom-content"><link href="//modern-letter.com/cdn/shop/t/10/assets/custom-content.css?v=122562997671464857791784623194" rel="stylesheet" type="text/css" media="all" />
5630
5631<style>
5632  #m-custom-template--30338464678222__custom_content_6TNeWD {
5633    --column-gap: 30px;
5634    --column-gap-mobile: 15px;
5635    --section-padding-top: 0px;
5636    --section-padding-bottom: 20px;
5637  }
5638</style>
5639
5640<div
5641  id="m-custom-template--30338464678222__custom_content_6TNeWD"
5642  class="m-section m-custom-content m-gradient m-color-footer"
5643  data-section-type="custom-content"
5644  data-section-id="template--30338464678222__custom_content_6TNeWD"
5645>
5646  
5647  <div class="container-fluid m-section-my m-section-py m-custom-content__container">
5648    <div class="m-gradient m-color-footer">
5649
5650
5651
5652
5653
5654      
5655        <div class="m-mixed-layout m-mixed-layout--mobile-scroll">
5656        <div class="m-custom-content__wrapper m:flex m-mixed-layout__inner md:m:flex-wrap">
5657          
5658            
5659            <div id="m-custom__block--liquid_jrwEk6" class="m:column m:display-flex m-custom-content__block m-custom-content__block-liquid lg:m:w-1/3 m:w-full" >
5660              <div class="m-custom-content__block-inner m:w-full">
5661                
5662                    
5663                      <div class="testimonials-wrapper">
5664
5665<style>
5666
5667.custom-testimonial{
5668    max-width:760px;
5669    margin:0 auto 30px;
5670    background:#fff;
5671    border-radius:18px;
5672    padding:24px;
5673    box-shadow:0 2px 8px rgba(0,0,0,.04);
5674    font-family:Arial, Helvetica, sans-serif;
5675}
5676
5677.tp-header{
5678    display:flex;
5679    align-items:center;
5680    margin-bottom:24px;
5681}
5682
5683.tp-avatar{
5684    width:54px;
5685    height:54px;
5686    border-radius:50%;
5687    object-fit:cover;
5688    margin-right:16px;
5689    flex-shrink:0;
5690}
5691
5692.tp-name{
5693    font-size:18px;
5694    font-weight:700;
5695    color:#191919;
5696    line-height:1.3;
5697}
5698
5699.tp-stars{
5700    display:flex;
5701    gap:4px;
5702    margin-bottom:22px;
5703}
5704
5705.tp-star{
5706    width:24px;
5707    height:24px;
5708    background:#00B67A;
5709    border-radius:2px;
5710    display:flex;
5711    justify-content:center;
5712    align-items:center;
5713}
5714
5715.tp-star svg{
5716    width:14px;
5717    height:14px;
5718    fill:#fff;
5719}
5720
5721.tp-text{
5722    font-size:15px;
5723    line-height:1.7;
5724    color:#555;
5725    margin-bottom:18px;
5726}
5727
5728.tp-text:last-child{
5729    margin-bottom:0;
5730}
5731
5732@media(max-width:768px){
5733
5734.custom-testimonial{
5735    padding:24px;
5736    border-radius:16px;
5737    margin-bottom:20px;
5738}
5739
5740.tp-avatar{
5741    width:46px;
5742    height:46px;
5743    margin-right:14px;
5744}
5745
5746.tp-name{
5747    font-size:16px;
5748}
5749
5750.tp-star{
5751    width:22px;
5752    height:22px;
5753}
5754
5755.tp-star svg{
5756    width:13px;
5757    height:13px;
5758}
5759
5760.tp-text{
5761    font-size:14px;
5762    line-height:1.65;
5763}
5764
5765}
5766
5767</style>
5768
5769<!-- Témoignage 1 -->
5770
5771<div class="custom-testimonial">
5772
5773    <div class="tp-header">
5774        <img class="tp-avatar" src="https://cdn.shopify.com/s/files/1/0892/4374/6638/files/1767881006205.jpg?v=1782725721" alt="Latruffe">
5775
5776        <div class="tp-name">
5777           Anthoni · LaTruffe
5778        </div>
5779    </div>
5780
5781    <div class="tp-stars">
5782        
5783        <div class="tp-star">
5784            <svg viewBox="0 0 20 20">
5785                <polygon points="10,1 12.5,7 19,7 13.5,11 15.5,17 10,13.5 4.5,17 6.5,11 1,7 7.5,7"/>
5786            </svg>
5787        </div>
5788        
5789        <div class="tp-star">
5790            <svg viewBox="0 0 20 20">
5791                <polygon points="10,1 12.5,7 19,7 13.5,11 15.5,17 10,13.5 4.5,17 6.5,11 1,7 7.5,7"/>
5792            </svg>
5793        </div>
5794        
5795        <div class="tp-star">
5796            <svg viewBox="0 0 20 20">
5797                <polygon points="10,1 12.5,7 19,7 13.5,11 15.5,17 10,13.5 4.5,17 6.5,11 1,7 7.5,7"/>
5798            </svg>
5799        </div>
5800        
5801        <div class="tp-star">
5802            <svg viewBox="0 0 20 20">
5803                <polygon points="10,1 12.5,7 19,7 13.5,11 15.5,17 10,13.5 4.5,17 6.5,11 1,7 7.5,7"/>
5804            </svg>
5805        </div>
5806        
5807        <div class="tp-star">
5808            <svg viewBox="0 0 20 20">
5809                <polygon points="10,1 12.5,7 19,7 13.5,11 15.5,17 10,13.5 4.5,17 6.5,11 1,7 7.5,7"/>
5810            </svg>
5811        </div>
5812        
5813    </div>
5814
5815    <div class="tp-text">
5816      Je recommande vivement TML ! Merci à Théo et Anaïs pour leur réactivité exemplaire et leur professionnalisme. <br><br>La mise en place a été gérée parfaitement et les échanges sont toujours fluides. Si vous cherchez une agence sérieuse, foncez!
5817
5818
5819
5820    </div>
5821
5822   
5823
5824</div>
5825
5826<!-- Témoignage 2 -->
5827
5828<div class="custom-testimonial">
5829
5830    <div class="tp-header">
5831        <img class="tp-avatar" src="https://cdn.shopify.com/s/files/1/0892/4374/6638/files/1742304106147.jpg?v=1767779588" alt="Paradigme">
5832
5833        <div class="tp-name">
5834            Vincent · Paradigme
5835        </div>
5836    </div>
5837
5838    <div class="tp-stars">
5839        
5840        <div class="tp-star">
5841            <svg viewBox="0 0 20 20">
5842                <polygon points="10,1 12.5,7 19,7 13.5,11 15.5,17 10,13.5 4.5,17 6.5,11 1,7 7.5,7"/>
5843            </svg>
5844        </div>
5845        
5846        <div class="tp-star">
5847            <svg viewBox="0 0 20 20">
5848                <polygon points="10,1 12.5,7 19,7 13.5,11 15.5,17 10,13.5 4.5,17 6.5,11 1,7 7.5,7"/>
5849            </svg>
5850        </div>
5851        
5852        <div class="tp-star">
5853            <svg viewBox="0 0 20 20">
5854                <polygon points="10,1 12.5,7 19,7 13.5,11 15.5,17 10,13.5 4.5,17 6.5,11 1,7 7.5,7"/>
5855            </svg>
5856        </div>
5857        
5858        <div class="tp-star">
5859            <svg viewBox="0 0 20 20">
5860                <polygon points="10,1 12.5,7 19,7 13.5,11 15.5,17 10,13.5 4.5,17 6.5,11 1,7 7.5,7"/>
5861            </svg>
5862        </div>
5863        
5864        <div class="tp-star">
5865            <svg viewBox="0 0 20 20">
5866                <polygon points="10,1 12.5,7 19,7 13.5,11 15.5,17 10,13.5 4.5,17 6.5,11 1,7 7.5,7"/>
5867            </svg>
5868        </div>
5869        
5870    </div>
5871
5872    <div class="tp-text">
5873        L'équipe a été très réactive et efficace, je recommande !
5874    </div>
5875
5876</div>
5877
5878<!-- Témoignage 3 -->
5879
5880<div class="custom-testimonial">
5881
5882    <div class="tp-header">
5883        <img class="tp-avatar" src="https://cdn.shopify.com/s/files/1/0892/4374/6638/files/felix.png?v=1767779591" alt="Extra Terrasse">
5884
5885        <div class="tp-name">
5886            Félix · Extra Terrasse
5887        </div>
5888    </div>
5889
5890    <div class="tp-stars">
5891        
5892        <div class="tp-star">
5893            <svg viewBox="0 0 20 20">
5894                <polygon points="10,1 12.5,7 19,7 13.5,11 15.5,17 10,13.5 4.5,17 6.5,11 1,7 7.5,7"/>
5895            </svg>
5896        </div>
5897        
5898        <div class="tp-star">
5899            <svg viewBox="0 0 20 20">
5900                <polygon points="10,1 12.5,7 19,7 13.5,11 15.5,17 10,13.5 4.5,17 6.5,11 1,7 7.5,7"/>
5901            </svg>
5902        </div>
5903        
5904        <div class="tp-star">
5905            <svg viewBox="0 0 20 20">
5906                <polygon points="10,1 12.5,7 19,7 13.5,11 15.5,17 10,13.5 4.5,17 6.5,11 1,7 7.5,7"/>
5907            </svg>
5908        </div>
5909        
5910        <div class="tp-star">
5911            <svg viewBox="0 0 20 20">
5912                <polygon points="10,1 12.5,7 19,7 13.5,11 15.5,17 10,13.5 4.5,17 6.5,11 1,7 7.5,7"/>
5913            </svg>
5914        </div>
5915        
5916        <div class="tp-star">
5917            <svg viewBox="0 0 20 20">
5918                <polygon points="10,1 12.5,7 19,7 13.5,11 15.5,17 10,13.5 4.5,17 6.5,11 1,7 7.5,7"/>
5919            </svg>
5920        </div>
5921        
5922    </div>
5923
5924    <div class="tp-text">
5925        Après 1 an d’activité en ligne, il fallait absolument que je mette en place une campagne de mails automatisés sur ma boutique Shopify.
5926    </div>
5927
5928    <div class="tp-text">
5929        Théo et Anaïs ont été très professionnels et très réactifs. Ils ont compris mes attentes et ont tout mis en place en moins d’une semaine. Je recommande.
5930    </div>
5931
5932</div>
5933
5934</div>
5935                    
5936                  
5937              </div>
5938            </div>
5939          
5940            
5941            <div id="m-custom__block--liquid_bizY3X" class="m:column m:display-flex m-custom-content__block m-custom-content__block-liquid lg:m:w-1/3 m:w-full" >
5942              <div class="m-custom-content__block-inner m:w-full">
5943                
5944                    
5945                      <div class="testimonials-wrapper">
5946
5947<style>
5948
5949.custom-testimonial{
5950    max-width:760px;
5951    margin:0 auto 30px;
5952    background:#fff;
5953    border-radius:18px;
5954    padding:24px;
5955    box-shadow:0 2px 8px rgba(0,0,0,.04);
5956    font-family:Arial, Helvetica, sans-serif;
5957}
5958
5959.tp-header{
5960    display:flex;
5961    align-items:center;
5962    margin-bottom:24px;
5963}
5964
5965.tp-avatar{
5966    width:54px;
5967    height:54px;
5968    border-radius:50%;
5969    object-fit:cover;
5970    margin-right:16px;
5971    flex-shrink:0;
5972}
5973
5974.tp-name{
5975    font-size:18px;
5976    font-weight:700;
5977    color:#191919;
5978    line-height:1.3;
5979}
5980
5981.tp-stars{
5982    display:flex;
5983    gap:4px;
5984    margin-bottom:22px;
5985}
5986
5987.tp-star{
5988    width:24px;
5989    height:24px;
5990    background:#00B67A;
5991    border-radius:2px;
5992    display:flex;
5993    justify-content:center;
5994    align-items:center;
5995}
5996
5997.tp-star svg{
5998    width:14px;
5999    height:14px;
6000    fill:#fff;
6001}
6002
6003.tp-text{
6004    font-size:15px;
6005    line-height:1.7;
6006    color:#555;
6007    margin-bottom:18px;
6008}
6009
6010.tp-text:last-child{
6011    margin-bottom:0;
6012}
6013
6014@media(max-width:768px){
6015
6016.custom-testimonial{
6017    padding:24px;
6018    border-radius:16px;
6019    margin-bottom:20px;
6020}
6021
6022.tp-avatar{
6023    width:46px;
6024    height:46px;
6025    margin-right:14px;
6026}
6027
6028.tp-name{
6029    font-size:16px;
6030}
6031
6032.tp-star{
6033    width:22px;
6034    height:22px;
6035}
6036
6037.tp-star svg{
6038    width:13px;
6039    height:13px;
6040}
6041
6042.tp-text{
6043    font-size:14px;
6044    line-height:1.65;
6045}
6046
6047}
6048
6049</style>
6050
6051<!-- Témoignage 4 -->
6052
6053<div class="custom-testimonial">
6054
6055    <div class="tp-header">
6056        <img class="tp-avatar" src="https://cdn.shopify.com/s/files/1/0892/4374/6638/files/73x73.png?v=1767779663" alt="Matcha Paris">
6057
6058        <div class="tp-name">
6059            Anne-Sophie · Matcha Paris
6060        </div>
6061    </div>
6062
6063    <div class="tp-stars">
6064        
6065        <div class="tp-star">
6066            <svg viewBox="0 0 20 20">
6067                <polygon points="10,1 12.5,7 19,7 13.5,11 15.5,17 10,13.5 4.5,17 6.5,11 1,7 7.5,7"/>
6068            </svg>
6069        </div>
6070        
6071        <div class="tp-star">
6072            <svg viewBox="0 0 20 20">
6073                <polygon points="10,1 12.5,7 19,7 13.5,11 15.5,17 10,13.5 4.5,17 6.5,11 1,7 7.5,7"/>
6074            </svg>
6075        </div>
6076        
6077        <div class="tp-star">
6078            <svg viewBox="0 0 20 20">
6079                <polygon points="10,1 12.5,7 19,7 13.5,11 15.5,17 10,13.5 4.5,17 6.5,11 1,7 7.5,7"/>
6080            </svg>
6081        </div>
6082        
6083        <div class="tp-star">
6084            <svg viewBox="0 0 20 20">
6085                <polygon points="10,1 12.5,7 19,7 13.5,11 15.5,17 10,13.5 4.5,17 6.5,11 1,7 7.5,7"/>
6086            </svg>
6087        </div>
6088        
6089        <div class="tp-star">
6090            <svg viewBox="0 0 20 20">
6091                <polygon points="10,1 12.5,7 19,7 13.5,11 15.5,17 10,13.5 4.5,17 6.5,11 1,7 7.5,7"/>
6092            </svg>
6093        </div>
6094        
6095    </div>
6096
6097    <div class="tp-text">
6098        Une efficacité redoutable !
6099    </div>
6100
6101    <div class="tp-text">
6102        Merci pour tout !
6103    </div>
6104
6105</div>
6106
6107<!-- Témoignage 5 -->
6108
6109<div class="custom-testimonial">
6110
6111    <div class="tp-header">
6112        <img class="tp-avatar" src="https://cdn.shopify.com/s/files/1/0892/4374/6638/files/jessica.png?v=1767779667" alt="Nowa Cosmetics">
6113
6114        <div class="tp-name">
6115            Jessica · Nowa Cosmetics
6116        </div>
6117    </div>
6118
6119    <div class="tp-stars">
6120        
6121        <div class="tp-star">
6122            <svg viewBox="0 0 20 20">
6123                <polygon points="10,1 12.5,7 19,7 13.5,11 15.5,17 10,13.5 4.5,17 6.5,11 1,7 7.5,7"/>
6124            </svg>
6125        </div>
6126        
6127        <div class="tp-star">
6128            <svg viewBox="0 0 20 20">
6129                <polygon points="10,1 12.5,7 19,7 13.5,11 15.5,17 10,13.5 4.5,17 6.5,11 1,7 7.5,7"/>
6130            </svg>
6131        </div>
6132        
6133        <div class="tp-star">
6134            <svg viewBox="0 0 20 20">
6135                <polygon points="10,1 12.5,7 19,7 13.5,11 15.5,17 10,13.5 4.5,17 6.5,11 1,7 7.5,7"/>
6136            </svg>
6137        </div>
6138        
6139        <div class="tp-star">
6140            <svg viewBox="0 0 20 20">
6141                <polygon points="10,1 12.5,7 19,7 13.5,11 15.5,17 10,13.5 4.5,17 6.5,11 1,7 7.5,7"/>
6142            </svg>
6143        </div>
6144        
6145        <div class="tp-star">
6146            <svg viewBox="0 0 20 20">
6147                <polygon points="10,1 12.5,7 19,7 13.5,11 15.5,17 10,13.5 4.5,17 6.5,11 1,7 7.5,7"/>
6148            </svg>
6149        </div>
6150        
6151    </div>
6152
6153    <div class="tp-text">
6154        J'ai été ravie de collaborer avec Théo pour le lancement de Nowa sur Klaviyo. Théo a été force de proposition et très rigoureux.
6155    </div>
6156
6157    <div class="tp-text">
6158        Je repasserai par lui pour la suite quand nous aurons besoin d'aller plus loin. Je recommande !
6159    </div>
6160
6161</div>
6162
6163<!-- Témoignage 6 -->
6164
6165<div class="custom-testimonial">
6166
6167    <div class="tp-header">
6168        <img class="tp-avatar" src="https://cdn.shopify.com/s/files/1/0892/4374/6638/files/nathan-1.png?v=1767779666" alt="La Virgule">
6169
6170        <div class="tp-name">
6171            Nathan · La Virgule
6172        </div>
6173    </div>
6174
6175    <div class="tp-stars">
6176        
6177        <div class="tp-star">
6178            <svg viewBox="0 0 20 20">
6179                <polygon points="10,1 12.5,7 19,7 13.5,11 15.5,17 10,13.5 4.5,17 6.5,11 1,7 7.5,7"/>
6180            </svg>
6181        </div>
6182        
6183        <div class="tp-star">
6184            <svg viewBox="0 0 20 20">
6185                <polygon points="10,1 12.5,7 19,7 13.5,11 15.5,17 10,13.5 4.5,17 6.5,11 1,7 7.5,7"/>
6186            </svg>
6187        </div>
6188        
6189        <div class="tp-star">
6190            <svg viewBox="0 0 20 20">
6191                <polygon points="10,1 12.5,7 19,7 13.5,11 15.5,17 10,13.5 4.5,17 6.5,11 1,7 7.5,7"/>
6192            </svg>
6193        </div>
6194        
6195        <div class="tp-star">
6196            <svg viewBox="0 0 20 20">
6197                <polygon points="10,1 12.5,7 19,7 13.5,11 15.5,17 10,13.5 4.5,17 6.5,11 1,7 7.5,7"/>
6198            </svg>
6199        </div>
6200        
6201        <div class="tp-star">
6202            <svg viewBox="0 0 20 20">
6203                <polygon points="10,1 12.5,7 19,7 13.5,11 15.5,17 10,13.5 4.5,17 6.5,11 1,7 7.5,7"/>
6204            </svg>
6205        </div>
6206        
6207    </div>
6208
6209    <div class="tp-text">
6210        Nous avons fait appel à Théo et Anaïs pour déployer une stratég
6210ie d'emailing B2C sur Klaviyo. Avant leur intervention, nous ne disposions que d'une simple séquence de relance de paniers abandonnés.
6211    </div>
6212
6213    <div class="tp-text">
6214        Grâce à leur expertise, ils ont mis en place une véritable stratégie de conversion via des emails marketing ciblés. Les premiers résultats sont déjà très prometteurs, rendant leur intervention rapidement rentable.
6215    </div>
6216
6217</div>
6218
6219</div>
6220                    
6221                  
6222              </div>
6223            </div>
6224          
6225            
6226            <div id="m-custom__block--liquid_dcktNF" class="m:column m:display-flex m-custom-content__block m-custom-content__block-liquid lg:m:w-1/3 m:w-full" >
6227              <div class="m-custom-content__block-inner m:w-full">
6228                
6229                    
6230                      <div class="testimonials-wrapper">
6231
6232<style>
6233
6234.custom-testimonial{
6235    max-width:760px;
6236    margin:0 auto 30px;
6237    background:#fff;
6238    border-radius:18px;
6239    padding:24px;
6240    box-shadow:0 2px 8px rgba(0,0,0,.04);
6241    font-family:Arial, Helvetica, sans-serif;
6242}
6243
6244.tp-header{
6245    display:flex;
6246    align-items:center;
6247    margin-bottom:24px;
6248}
6249
6250.tp-avatar{
6251    width:54px;
6252    height:54px;
6253    border-radius:50%;
6254    object-fit:cover;
6255    margin-right:16px;
6256    flex-shrink:0;
6257}
6258
6259.tp-name{
6260    font-size:18px;
6261    font-weight:700;
6262    color:#191919;
6263    line-height:1.3;
6264}
6265
6266.tp-stars{
6267    display:flex;
6268    gap:4px;
6269    margin-bottom:22px;
6270}
6271
6272.tp-star{
6273    width:24px;
6274    height:24px;
6275    background:#00B67A;
6276    border-radius:2px;
6277    display:flex;
6278    justify-content:center;
6279    align-items:center;
6280}
6281
6282.tp-star svg{
6283    width:14px;
6284    height:14px;
6285    fill:#fff;
6286}
6287
6288.tp-text{
6289    font-size:15px;
6290    line-height:1.7;
6291    color:#555;
6292    margin-bottom:18px;
6293}
6294
6295.tp-text:last-child{
6296    margin-bottom:0;
6297}
6298
6299@media(max-width:768px){
6300
6301.custom-testimonial{
6302    padding:24px;
6303    border-radius:16px;
6304    margin-bottom:20px;
6305}
6306
6307.tp-avatar{
6308    width:46px;
6309    height:46px;
6310    margin-right:14px;
6311}
6312
6313.tp-name{
6314    font-size:16px;
6315}
6316
6317.tp-star{
6318    width:22px;
6319    height:22px;
6320}
6321
6322.tp-star svg{
6323    width:13px;
6324    height:13px;
6325}
6326
6327.tp-text{
6328    font-size:14px;
6329    line-height:1.65;
6330}
6331
6332}
6333
6334</style>
6335
6336<!-- Témoignage 7 -->
6337
6338<div class="custom-testimonial">
6339
6340    <div class="tp-header">
6341        <img class="tp-avatar" src="https://cdn.shopify.com/s/files/1/0892/4374/6638/files/IMG_4095-scaled-1-e1738232341542.webp?v=1767779739" alt="Enyo">
6342
6343        <div class="tp-name">
6344            Myriam · Enyo
6345        </div>
6346    </div>
6347
6348    <div class="tp-stars">
6349        
6350        <div class="tp-star">
6351            <svg viewBox="0 0 20 20">
6352                <polygon points="10,1 12.5,7 19,7 13.5,11 15.5,17 10,13.5 4.5,17 6.5,11 1,7 7.5,7"/>
6353            </svg>
6354        </div>
6355        
6356        <div class="tp-star">
6357            <svg viewBox="0 0 20 20">
6358                <polygon points="10,1 12.5,7 19,7 13.5,11 15.5,17 10,13.5 4.5,17 6.5,11 1,7 7.5,7"/>
6359            </svg>
6360        </div>
6361        
6362        <div class="tp-star">
6363            <svg viewBox="0 0 20 20">
6364                <polygon points="10,1 12.5,7 19,7 13.5,11 15.5,17 10,13.5 4.5,17 6.5,11 1,7 7.5,7"/>
6365            </svg>
6366        </div>
6367        
6368        <div class="tp-star">
6369            <svg viewBox="0 0 20 20">
6370                <polygon points="10,1 12.5,7 19,7 13.5,11 15.5,17 10,13.5 4.5,17 6.5,11 1,7 7.5,7"/>
6371            </svg>
6372        </div>
6373        
6374        <div class="tp-star">
6375            <svg viewBox="0 0 20 20">
6376                <polygon points="10,1 12.5,7 19,7 13.5,11 15.5,17 10,13.5 4.5,17 6.5,11 1,7 7.5,7"/>
6377            </svg>
6378        </div>
6379        
6380    </div>
6381
6382    <div class="tp-text">
6383        Un grand merci à Théo et Anaïs pour leur super travail sur l’emailing ! Grâce à leur expertise, ils ont pris en main notre compte Klaviyo, en mettant en place des flux, en segmentant notre base client et en nettoyant tout.
6384    </div>
6385
6386    <div class="tp-text">
6387        Le résultat parle de lui-même : une belle hausse du taux d’ouverture de nos emails et une conversion qui grimpe ! Ils ont parfaitement compris l’univers de ma marque.
6388    </div>
6389
6390    <div class="tp-text">
6391        Un énorme merci à eux pour leur travail de qualité, je recommande leur service à 100 % !
6392    </div>
6393
6394</div>
6395
6396<!-- Témoignage 8 -->
6397
6398<div class="custom-testimonial">
6399
6400    <div class="tp-header">
6401        <img class="tp-avatar" src="https://cdn.shopify.com/s/files/1/0892/4374/6638/files/anna_niir.png?v=1782726825" alt="Niir">
6402
6403        <div class="tp-name">
6404            Anna  · Niir
6405        </div>
6406    </div>
6407
6408    <div class="tp-stars">
6409        
6410        <div class="tp-star">
6411            <svg viewBox="0 0 20 20">
6412                <polygon points="10,1 12.5,7 19,7 13.5,11 15.5,17 10,13.5 4.5,17 6.5,11 1,7 7.5,7"/>
6413            </svg>
6414        </div>
6415        
6416        <div class="tp-star">
6417            <svg viewBox="0 0 20 20">
6418                <polygon points="10,1 12.5,7 19,7 13.5,11 15.5,17 10,13.5 4.5,17 6.5,11 1,7 7.5,7"/>
6419            </svg>
6420        </div>
6421        
6422        <div class="tp-star">
6423            <svg viewBox="0 0 20 20">
6424                <polygon points="10,1 12.5,7 19,7 13.5,11 15.5,17 10,13.5 4.5,17 6.5,11 1,7 7.5,7"/>
6425            </svg>
6426        </div>
6427        
6428        <div class="tp-star">
6429            <svg viewBox="0 0 20 20">
6430                <polygon points="10,1 12.5,7 19,7 13.5,11 15.5,17 10,13.5 4.5,17 6.5,11 1,7 7.5,7"/>
6431            </svg>
6432        </div>
6433        
6434        <div class="tp-star">
6435            <svg viewBox="0 0 20 20">
6436                <polygon points="10,1 12.5,7 19,7 13.5,11 15.5,17 10,13.5 4.5,17 6.5,11 1,7 7.5,7"/>
6437            </svg>
6438        </div>
6439        
6440    </div>
6441
6442    <div class="tp-text">
6443       Plus que satisfaite.
6444Je vous remercie pour cette collaboration.
6445    </div>
6446
6447    <div class="tp-text">
6448       Tout a été mené avec une grande rapidité et beaucoup d’efficacité.
6449Les emails sont parfaitement rédigés, en totale cohérence avec l’univers et le ton de mon entreprise, tout en étant particulièrement soignés et élégants.
6450    </div>
6451
6452    <div class="tp-text">
6453        Je vous recommanderai sans hésitation auprès de mon entourage.
6454À très vite pour la suite.
6455    </div>
6456
6457</div>
6458
6459</div>
6460                    
6461                  
6462              </div>
6463            </div>
6464          
6465        </div>
6466        </div>
6467      
6468    </div>
6469  </div>
6470</div>
6471
6472
6473</div><div id="shopify-section-template--30338464678222__rich_text_DzwG8V" class="shopify-section"><link href="//modern-letter.com/cdn/shop/t/10/assets/rich-text.css?v=109847090468312531301784623194" rel="stylesheet" type="text/css" media="all" />
6474
6475<style data-shopify>#m-section-template--30338464678222__rich_text_DzwG8V {
6476    --section-padding-top: 0px;
6477    --section-padding-bottom: 64px;
6478  }</style><section
6479  id="m-section-template--30338464678222__rich_text_DzwG8V"
6480  class="m-section m-rich-text m-gradient m-color-footer "
6481>
6482  <div class="container m-section-my m-section-py">
6483    <div class="m-richtext m:text-center"><div
6484                class="m-richtext__button m-scroll-trigger animate--fade-in-up"
6485                
6486                  data-cascade
6487                  style="--animation-order: 1;"
6488                
6489              >
6490                <a
6491                  href="https://fr.trustpilot.com/review/modern-letter.com"
6492                  class="m-button m-button--secondary m-button--large"
6493                  
6494                >VOIR NOS AVIS</a>
6495              </div></div>
6496  </div>
6497  
6498</section>
6499
6500</div><div id="shopify-section-template--30338464678222__blog_posts_WWa6YL" class="shopify-section"><link href="//modern-letter.com/cdn/shop/t/10/assets/component-article-card.css?v=52457012297536311421784623194" rel="stylesheet" type="text/css" media="all" />
6501<link href="//modern-letter.com/cdn/shop/t/10/assets/blog-post.css?v=8774542528496835831784623194" rel="stylesheet" type="text/css" media="all" />
6502
6503<style>
6504  #m-blog-grid-template--30338464678222__blog_posts_WWa6YL {
6505    --section-padding-top: 50px;
6506    --section-padding-bottom: 50px;
6507    --column-gap: 30px;
6508    --column-gap-mobile: 10px;
6509    --row-gap: 40px;
6510  }
6511</style>
6512<section
6513  id="m-blog-grid-template--30338464678222__blog_posts_WWa6YL"
6514  class="m-section m-blog-grid m-gradient m-color-default"
6515  data-section-id="template--30338464678222__blog_posts_WWa6YL"
6516>
6517  <div
6518    class="container-fluid m-section-my m-section-py"
6519  >
6520    
6521
6522
6523
6524
6525  <div class="m-section__header m:text-center ">
6526    
6527    
6528    
6529      <h2 class="m-section__heading h2 m-scroll-trigger animate--fade-in-up">
6530        NOTRE BLOG
6531      </h2>
6532    
6533    
6534    
6535    
6536  </div>
6537
6538
6539    <div class="m-blog-grid__wrapper">
6540      <div class="m-mixed-layout">
6541        <div class="m-mixed-layout__inner m:grid md:m:grid-2-cols lg:m:grid-3-cols">
6542          
6543            
6544              <div class="m:column">
6545                
6546
6547<div
6548  class="m-article-card m-article-card--view-grid m-scroll-trigger animate--fade-in-up"
6549  
6550    data-cascade
6551    style="--animation-order: 1;"
6552  
6553>
6554
6555  
6556    <a class="m-article-card__image m:blocks-radius" href="/blogs/nos-conseils-sur-klaviyo/exemples-dobjets-email">
6557      <img
6558        src="//modern-letter.com/cdn/shop/articles/exemples_d_objets_email.png?v=1776156131&width=720"
6559        srcset="//modern-letter.com/cdn/shop/articles/exemples_d_objets_email.png?v=1776156131&width=360 360w,
6560                //modern-letter.com/cdn/shop/articles/exemples_d_objets_email.png?v=1776156131&width=720 720w,
6561                //modern-letter.com/cdn/shop/articles/exemples_d_objets_email.png?v=1776156131&width=1066 1066w"
6562        sizes="(min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
6563        alt="exemples d&#39;objets email "
6564        width="1920"
6565        height="1080"
6566        loading="lazy"
6567        style="width: 100%; height: auto; object-fit: cover;"
6568      />
6569    </a>
6570  
6571  <div class="m-article-card__content m:text-left"><h3 class="m-article-card__title">
6572      <a href="/blogs/nos-conseils-sur-klaviyo/exemples-dobjets-email">Exemples d'objets email</a>
6573    </h3><div class="m-article-card__excerpt m:hidden md:m:block">
6574        L'objet d'un email, c'est la première chose que voit votre abonné. Et souvent la seule....
6575      </div><a class="m-article-card__readmore m-button m-button--link" href="/blogs/nos-conseils-sur-klaviyo/exemples-dobjets-email">Lire l&#39;article</a></div>
6576</div>
6577
6578              </div>
6579            
6580              <div class="m:column">
6581                
6582
6583<div
6584  class="m-article-card m-article-card--view-grid m-scroll-trigger animate--fade-in-up"
6585  
6586    data-cascade
6587    style="--animation-order: 2;"
6588  
6589>
6590
6591  
6592    <a class="m-article-card__image m:blocks-radius" href="/blogs/nos-conseils-sur-klaviyo/kpi-crm">
6593      <img
6594        src="//modern-letter.com/cdn/shop/articles/KPI_CRM.png?v=1776156016&width=720"
6595        srcset="//modern-letter.com/cdn/shop/articles/KPI_CRM.png?v=1776156016&width=360 360w,
6596                //modern-letter.com/cdn/shop/articles/KPI_CRM.png?v=1776156016&width=720 720w,
6597                //modern-letter.com/cdn/shop/articles/KPI_CRM.png?v=1776156016&width=1066 1066w"
6598        sizes="(min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
6599        alt="KPI CRM"
6600        width="1920"
6601        height="1080"
6602        loading="lazy"
6603        style="width: 100%; height: auto; object-fit: cover;"
6604      />
6605    </a>
6606  
6607  <div class="m-article-card__content m:text-left"><h3 class="m-article-card__title">
6608      <a href="/blogs/nos-conseils-sur-klaviyo/kpi-crm">KPI pour CRM</a>
6609    </h3><div class="m-article-card__excerpt m:hidden md:m:block">
6610        Vous avez mis en place une stratégie CRM sur Klaviyo. Les flows tournent, les campagnes...
6611      </div><a class="m-article-card__readmore m-button m-button--link" href="/blogs/nos-conseils-sur-klaviyo/kpi-crm">Lire l&#39;article</a></div>
6612</div>
6613
6614              </div>
6615            
6616              <div class="m:column">
6617                
6618
6619<div
6620  class="m-article-card m-article-card--view-grid m-scroll-trigger animate--fade-in-up"
6621  
6622    data-cascade
6623    style="--animation-order: 3;"
6624  
6625>
6626
6627  
6628    <a class="m-article-card__image m:blocks-radius" href="/blogs/nos-conseils-sur-klaviyo/outil-emailing">
6629      <img
6630        src="//modern-letter.com/cdn/shop/articles/Logiciel_emailing_a065e4dd-454e-48b7-afbe-1ebeea63bf5f.png?v=1776155871&width=720"
6631        srcset="//modern-letter.com/cdn/shop/articles/Logiciel_emailing_a065e4dd-454e-48b7-afbe-1ebeea63bf5f.png?v=1776155871&width=360 360w,
6632                //modern-letter.com/cdn/shop/articles/Logiciel_emailing_a065e4dd-454e-48b7-afbe-1ebeea63bf5f.png?v=1776155871&width=720 720w,
6633                //modern-letter.com/cdn/shop/articles/Logiciel_emailing_a065e4dd-454e-48b7-afbe-1ebeea63bf5f.png?v=1776155871&width=1066 1066w"
6634        sizes="(min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
6635        alt="Logiciel emailing e-commerce"
6636        width="1920"
6637        height="1080"
6638        loading="lazy"
6639        style="width: 100%; height: auto; object-fit: cover;"
6640      />
6641    </a>
6642  
6643  <div class="m-article-card__content m:text-left"><h3 class="m-article-card__title">
6644      <a href="/blogs/nos-conseils-sur-klaviyo/outil-emailing">Outil emailing</a>
6645    </h3><div class="m-article-card__excerpt m:hidden md:m:block">
6646        L'email marketing génère en moyenne 36 euros de ROI pour chaque euro investi. C'est le...
6647      </div><a class="m-article-card__readmore m-button m-button--link" href="/blogs/nos-conseils-sur-klaviyo/outil-emailing">Lire l&#39;article</a></div>
6648</div>
6649
6650              </div>
6651            
6652          
6653        </div>
6654      </div>
6655    </div>
6656    
6657      
6658      
6659      <div class="m-blog-grid__button m-scroll-trigger animate--fade-in-up">
6660        <a
6661          class="m-button m-button--secondary "
6662          href="/blogs/nos-conseils-sur-klaviyo"
6663        >DÉCOUVRIR NOS CONSEILS</a>
6664      </div>
6665    
6666  </div>
6667</section>
6668
6669
6670</div><div id="shopify-section-template--30338464678222__custom_content_EMgNiP" class="shopify-section shopify-section-custom-content"><link href="//modern-letter.com/cdn/shop/t/10/assets/custom-content.css?v=122562997671464857791784623194" rel="stylesheet" type="text/css" media="all" />
6671
6672<style>
6673  #m-custom-template--30338464678222__custom_content_EMgNiP {
6674    --column-gap: 30px;
6675    --column-gap-mobile: 16px;
6676    --section-padding-top: 50px;
6677    --section-padding-bottom: 50px;
6678  }
6679</style>
6680
6681<div
6682  id="m-custom-template--30338464678222__custom_content_EMgNiP"
6683  class="m-section m-custom-content m-gradient m-color-default"
6684  data-section-type="custom-content"
6685  data-section-id="template--30338464678222__custom_content_EMgNiP"
6686>
6687  
6688  <div class="container-full m-section-my m-section-py m-custom-content__container">
6689    <div class="m-gradient m-color-default">
6690
6691
6692
6693
6694  <div class="m-section__header m:text-center ">
6695    
6696    
6697    
6698      <h2 class="m-section__heading h2 m-scroll-trigger animate--fade-in-up">
6699        DÉCOUVRIR NOS VIDÉOS YOUTUBE
6700      </h2>
6701    
6702    
6703    
6704    
6705  </div>
6706
6707
6708      
6709        
6710        <div class="m-custom-content__wrapper m:flex m:flex-wrap">
6711          
6712            
6713            <div id="m-custom__block--video_MPRrEm" class="m:column m:display-flex m-custom-content__block m-custom-content__block-video lg:m:w-1/3 m:w-full m:items-start" >
6714              <div class="m-custom-content__block-inner m:w-full">
6715                
6716                    <link href="//modern-letter.com/cdn/shop/t/10/assets/video.css?v=15670426434736640131784623194" rel="stylesheet" type="text/css" media="all" />
6717                    
6718                    <div
6719                      class="m-video m-scroll-trigger animate--fade-in-up"
6720                      data-video-block
6721                      
6722                        data-cascade
6723                        style="--animation-order: 1;"
6724                      
6725                    >
6726                      <div class="m-video__container m-video__container--video_MPRrEm mx-auto">
6727                        <div
6728                          class="m-video__wrapper m-video__wrapper--video_MPRrEm m:blocks-radius"
6729                          style="--aspect-ratio: 16/9"
6730                        >
6731                          <video-component
6732                            class="deferred-media no-js-hidden"
6733                            data-media-id="DVbPzX_I9Go"
6734                            data-auto-play="false"
6735                            data-muted="false"
6736                            data-cover-image="true"
6737                          >
6738                            
6739                              <button
6740                                id="Video-Deferred-Poster-Modal-DVbPzX_I9Go"
6741                                class="deferred-media__poster"
6742                                type="button"
6743                                aria-label="Play"
6744                              >
6745                                <span class="deferred-media__poster-button motion-reduce m-video__play m-video__play--style-solid m-video__play--size-medium m:text-white">
6746                                  <svg viewBox="0 0 18 18" fill="currentColor">
6747                                    <path d="M15.562 8.1L3.87.225c-.818-.562-1.87 0-1.87.9v15.75c0 .9 1.052 1.462 1.87.9L15.563 9.9c.584-.45.584-1.35 0-1.8z" fill="currentColor"></path>
6748                                  </svg>
6749                                </span><div
6750                                    class="m-video__cover m-bg-lazy"
6751                                    style="background-image: url(//modern-letter.com/cdn/shop/files/POPUP.png?v=1767773839&width=1920)"
6752                                  ></div></button>
6753                            
6754                            <template>
6755                                  <iframe
6756                                    src="https://www.youtube.com/embed/DVbPzX_I9Go?enablejsapi=1"
6757                                    class="js-youtube"
6758                                    allow="autoplay; encrypted-media"
6759                                    allowfullscreen
6760                                    title=""
6761                                  ></iframe></template>
6762                          </video-component>
6763                        </div>
6764                      </div>
6765                    </div>
6766                  
6767              </div>
6768            </div>
6769          
6770            
6771            <div id="m-custom__block--video_4fdJeX" class="m:column m:display-flex m-custom-content__block m-custom-content__block-video lg:m:w-1/3 m:w-full m:items-start" >
6772              <div class="m-custom-content__block-inner m:w-full">
6773                
6774                    <link href="//modern-letter.com/cdn/shop/t/10/assets/video.css?v=15670426434736640131784623194" rel="stylesheet" type="text/css" media="all" />
6775                    
6776                    <div
6777                      class="m-video m-scroll-trigger animate--fade-in-up"
6778                      data-video-block
6779                      
6780                        data-cascade
6781                        style="--animation-order: 2;"
6782                      
6783                    >
6784                      <div class="m-video__container m-video__container--video_4fdJeX mx-auto">
6785                        <div
6786                          class="m-video__wrapper m-video__wrapper--video_4fdJeX m:blocks-radius"
6787                          style="--aspect-ratio: 16/9"
6788                        >
6789                          <video-component
6790                            class="deferred-media no-js-hidden"
6791                            data-media-id="XMxMPNvfkrE"
6792                            data-auto-play="false"
6793                            data-muted="false"
6794                            data-cover-image="true"
6795                          >
6796                            
6797                              <button
6798                                id="Video-Deferred-Poster-Modal-XMxMPNvfkrE"
6799                                class="deferred-media__poster"
6800                                type="button"
6801                                aria-label="Play"
6802                              >
6803                                <span class="deferred-media__poster-button motion-reduce m-video__play m-video__play--style-solid m-video__play--size-medium m:text-white">
6804                                  <svg viewBox="0 0 18 18" fill="currentColor">
6805                                    <path d="M15.562 8.1L3.87.225c-.818-.562-1.87 0-1.87.9v15.75c0 .9 1.052 1.462 1.87.9L15.563 9.9c.584-.45.584-1.35 0-1.8z" fill="currentColor"></path>
6806                                  </svg>
6807                                </span><div
6808                                    class="m-video__cover m-bg-lazy"
6809                                    style="background-image: url(//modern-letter.com/cdn/shop/files/maxresdefault.jpg?v=1767774043&width=1920)"
6810                                  ></div></button>
6811                            
6812                            <template>
6813                                  <iframe
6814                                    src="https://www.youtube.com/embed/XMxMPNvfkrE?enablejsapi=1"
6815                                    class="js-youtube"
6816                                    allow="autoplay; encrypted-media"
6817                                    allowfullscreen
6818                                    title=""
6819                                  ></iframe></template>
6820                          </video-component>
6821                        </div>
6822                      </div>
6823                    </div>
6824                  
6825              </div>
6826            </div>
6827          
6828            
6829            <div id="m-custom__block--video_LYMaT6" class="m:column m:display-flex m-custom-content__block m-custom-content__block-video lg:m:w-1/3 m:w-full m:items-start" >
6830              <div class="m-custom-content__block-inner m:w-full">
6831                
6832                    <link href="//modern-letter.com/cdn/shop/t/10/assets/video.css?v=15670426434736640131784623194" rel="stylesheet" type="text/css" media="all" />
6833                    
6834                    <div
6835                      class="m-video m-scroll-trigger animate--fade-in-up"
6836                      data-video-block
6837                      
6838                        data-cascade
6839                        style="--animation-order: 3;"
6840                      
6841                    >
6842                      <div class="m-video__container m-video__container--video_LYMaT6 mx-auto">
6843                        <div
6844                          class="m-video__wrapper m-video__wrapper--video_LYMaT6 m:blocks-radius"
6845                          style="--aspect-ratio: 16/9"
6846                        >
6847                          <video-component
6848                            class="deferred-media no-js-hidden"
6849                            data-media-id="n_hHpFz7ygA"
6850                            data-auto-play="false"
6851                            data-muted="false"
6852                            data-cover-image="true"
6853                          >
6854                            
6855                              <button
6856                                id="Video-Deferred-Poster-Modal-n_hHpFz7ygA"
6857                                class="deferred-media__poster"
6858                                type="button"
6859                                aria-label="Play"
6860                              >
6861                                <span class="deferred-media__poster-button motion-reduce m-video__play m-video__play--style-solid m-video__play--size-medium m:text-white">
6862                                  <svg viewBox="0 0 18 18" fill="currentColor">
6863                                    <path d="M15.562 8.1L3.87.225c-.818-.562-1.87 0-1.87.9v15.75c0 .9 1.052 1.462 1.87.9L15.563 9.9c.584-.45.584-1.35 0-1.8z" fill="currentColor"></path>
6864                                  </svg>
6865                                </span><div
6866                                    class="m-video__cover m-bg-lazy"
6867                                    style="background-image: url(//modern-letter.com/cdn/shop/files/PRIX.png?v=1767773954&width=1920)"
6868                                  ></div></button>
6869                            
6870                            <template>
6871                                  <iframe
6872                                    src="https://www.youtube.com/embed/n_hHpFz7ygA?enablejsapi=1"
6873                                    class="js-youtube"
6874                                    allow="autoplay; encrypted-media"
6875                                    allowfullscreen
6876                                    title=""
6877                                  ></iframe></template>
6878                          </video-component>
6879                        </div>
6880                      </div>
6881                    </div>
6882                  
6883              </div>
6884            </div>
6885          
6886        </div>
6887        
6888      
6889    </div>
6890  </div>
6891</div>
6892
6893
6894</div><div id="shopify-section-template--30338464678222__custom_content_tyzGUp" class="shopify-section shopify-section-custom-content"><link href="//modern-letter.com/cdn/shop/t/10/assets/custom-content.css?v=122562997671464857791784623194" rel="stylesheet" type="text/css" media="all" />
6895
6896<style>
6897  #m-custom-template--30338464678222__custom_content_tyzGUp {
6898    --column-gap: 30px;
6899    --column-gap-mobile: 16px;
6900    --section-padding-top: 70px;
6901    --section-padding-bottom: 50px;
6902  }
6903</style>
6904
6905<div
6906  id="m-custom-template--30338464678222__custom_content_tyzGUp"
6907  class="m-section m-custom-content m-gradient m-color-dark"
6908  data-section-type="custom-content"
6909  data-section-id="template--30338464678222__custom_content_tyzGUp"
6910>
6911  
6912  <div class="container-fluid m-section-my m-section-py m-custom-content__container">
6913    <div class="m-gradient m-color-dark">
6914
6915
6916
6917
6918
6919      
6920        
6921        <div class="m-custom-content__wrapper m:flex m:flex-wrap">
6922          
6923            
6924            <div id="m-custom__block--text_wnX4gh" class="m:column m:display-flex m-custom-content__block m-custom-content__block-text lg:m:w-full m:w-full m:items-center" >
6925              <div class="m-custom-content__block-inner m:w-full">
6926                
6927                    <div
6928                      class="m-richtext m-richtext--large m:text-center m-scroll-tr
6928igger animate--fade-in-up"
6929                      style="--text-color: inherit;--animation-order: 1;"
6930                      
6931                        data-cascade
6932                      
6933                    >
6934                      
6935                      
6936                        <h3 class="m-richtext__title  h1">
6937                          DISCUTONS DE VOS OBJECTIFS
6938                        </h3>
6939                      
6940                      
6941                        <div class="m-richtext__description rte m:text-color-subtext h6">
6942                          <p>Un membre de notre équipe vous recontactera afin de discuter de vos attentes et de vos objectifs.</p>
6943                        </div>
6944                      
6945                      
6946                        <div class="m-richtext__button content__button">
6947                          <a
6948                            href="https://calendly.com/the-modern-letter/30min"
6949                            class="m-button m-button--primary "
6950                          >PRENDRE RENDEZ-VOUS</a>
6951                        </div>
6952                      
6953                    </div>
6954                  
6955              </div>
6956            </div>
6957          
6958            
6959            <div id="m-custom__block--liquid_GtEJgq" class="m:column m:display-flex m-custom-content__block m-custom-content__block-liquid lg:m:w-full m:w-full" >
6960              <div class="m-custom-content__block-inner m:w-full">
6961                
6962                    
6963                  
6964              </div>
6965            </div>
6966          
6967        </div>
6968        
6969      
6970    </div>
6971  </div>
6972</div>
6973
6974
6975</div>
6976    </main><!-- BEGIN sections: footer-group -->
6977<div id="shopify-section-sections--30338457764174__footer" class="shopify-section shopify-section-group-footer-group"><link href="//modern-letter.com/cdn/shop/t/10/assets/footer.css?v=184147594002676474491784623194" rel="stylesheet" type="text/css" media="all" />
6978<script src="//modern-letter.com/cdn/shop/t/10/assets/localization-form.js?v=78680935164192769481784623194" defer="defer"></script>
6978<m-footer class="m-footer m:block" data-section-type="footer" data-section-id="sections--30338457764174__footer">
6979  
6980<div class="m-footer--middle m-gradient m-color-footer">
6981    <div class="container-full">
6982      <div class="m-footer--accordion">
6983        
6984          
6985
6986          <div class="m-footer--block m-footer--block-custom_html m:w-full lg:m:w-1/3">
6987            <div
6988              class="m-footer--block-inner m-scroll-trigger animate--fade-in-up"
6989              
6990                data-cascade
6991                style="--animation-order: ;"
6992              
6993            >
6994              
6995              
6996                  <div class=" m-footer--block-content">
6997  
6998    <div class="block-text">
6999      <div class="custom-logo-section" style="display: flex; flex-direction: column; align-items: flex-start; padding: 0px 20px; font-family: Inconsolata, monospace; color: #1a1a1a;">
7000  <style>
7001    .custom-logo-section img {
7002      width: 100px;
7003      height: auto;
7004      margin-bottom: 10px;
7005    }
7006
7007    .custom-logo-section p {
7008      font-size: 17px;
7009      line-height: 1.6;
7010      max-width: 400px;
7011    }
7012
7013    @media (max-width: 768px) {
7014      .custom-logo-section {
7015        align-items: flex-start;
7016        text-align: left;
7017      }
7018
7019      .custom-logo-section p {
7020        font-size: 15px;
7021      }
7022    }
7023  </style>
7024
7025  <a href="https://modern-letter.com">
7026    <img src="https://cdn.shopify.com/s/files/1/0892/4374/6638/files/logo_tml.svg?v=1769585030" title="Modern-letter-logo">
7027  </a>
7028
7029  <p>L’agence spécialisée en email marketing qui aide les entreprises à se développer grâce à Klaviyo.</p>
7030</div>
7031    </div>
7032  
7033</div>
7034
7035                
7036            </div>
7037          </div>
7038        
7039          
7040
7041          <div class="m-footer--block m-footer--block-menu m-accordion--item m:w-full lg:m:w-2/12">
7042            <div
7043              class="m-footer--block-inner m-scroll-trigger animate--fade-in-up"
7044              
7045                data-cascade
7046                style="--animation-order: ;"
7047              
7048            >
7049              
7050                <h3 class="m-accordion--item-button m-footer--block-title">
7051                  MENU
7052                  <span class="m-accordion--item-icon md:m:hidden">
7053                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
7054                      <path d="M13.5306 6.53073L8.5306 11.5307C8.46092 11.6007 8.37813 11.6561 8.28696 11.694C8.1958 11.7318 8.09806 11.7513 7.99935 11.7513C7.90064 11.7513 7.8029 11.7318 7.71173 11.694C7.62057 11.6561 7.53778 11.6007 7.4681 11.5307L2.4681 6.53073C2.3272 6.38984 2.24805 6.19874 2.24805 5.99948C2.24805 5.80023 2.3272 5.60913 2.4681 5.46823C2.60899 5.32734 2.80009 5.24818 2.99935 5.24818C3.19861 5.24818 3.3897 5.32734 3.5306 5.46823L7.99997 9.93761L12.4693 5.46761C12.6102 5.32671 12.8013 5.24756 13.0006 5.24756C13.1999 5.24756 13.391 5.32671 13.5318 5.46761C13.6727 5.60851 13.7519 5.7996 13.7519 5.99886C13.7519 6.19812 13.6727 6.38921 13.5318 6.53011L13.5306 6.53073Z" fill="currentColor"/>
7055                    </svg>
7056                  </span>
7057                </h3>
7058              
7059              
7060
7061                    <ul class="m-footer--block-content list-unstyled m-link-lists m-accordion--item-content">
7062                      
7063                        <li class="m-link-lists--item m:block">
7064                          <a href="/" class="m-link"
7065                            target="_self"
7066                          >
7067                            Accueil
7068                          </a>
7069                        </li>
7070                      
7071                        <li class="m-link-lists--item m:block">
7072                          <a href="/#expertise" class="m-link"
7073                            target="_self"
7074                          >
7075                            Notre expertise
7076                          </a>
7077                        </li>
7078                      
7079                        <li class="m-link-lists--item m:block">
7080                          <a href="https://modern-letter.com/pages/portfolio" class="m-link"
7081                            target="_self"
7082                          >
7083                            Porfolio
7084                          </a>
7085                        </li>
7086                      
7087                        <li class="m-link-lists--item m:block">
7088                          <a href="/pages/etudes-de-cas" class="m-link"
7089                            target="_self"
7090                          >
7091                            Études de cas
7092                          </a>
7093                        </li>
7094                      
7095                        <li class="m-link-lists--item m:block">
7096                          <a href="/blogs/nos-conseils-sur-klaviyo" class="m-link"
7097                            target="_self"
7098                          >
7099                            Le blog
7100                          </a>
7101                        </li>
7102                      
7103                        <li class="m-link-lists--item m:block">
7104                          <a href="https://app.iclosed.io/e/modern-letter/30min" class="m-link"
7105                            target="_blank"
7106                          >
7107                            Nous contacter
7108                          </a>
7109                        </li>
7110                      
7111                    </ul>
7112                  
7113                
7114            </div>
7115          </div>
7116        
7117          
7118
7119          <div class="m-footer--block m-footer--block-menu m-accordion--item m:w-full lg:m:w-1/4">
7120            <div
7121              class="m-footer--block-inner m-scroll-trigger animate--fade-in-up"
7122              
7123                data-cascade
7124                style="--animation-order: ;"
7125              
7126            >
7127              
7128                <h3 class="m-accordion--item-button m-footer--block-title">
7129                  LÉGALES
7130                  <span class="m-accordion--item-icon md:m:hidden">
7131                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
7132                      <path d="M13.5306 6.53073L8.5306 11.5307C8.46092 11.6007 8.37813 11.6561 8.28696 11.694C8.1958 11.7318 8.09806 11.7513 7.99935 11.7513C7.90064 11.7513 7.8029 11.7318 7.71173 11.694C7.62057 11.6561 7.53778 11.6007 7.4681 11.5307L2.4681 6.53073C2.3272 6.38984 2.24805 6.19874 2.24805 5.99948C2.24805 5.80023 2.3272 5.60913 2.4681 5.46823C2.60899 5.32734 2.80009 5.24818 2.99935 5.24818C3.19861 5.24818 3.3897 5.32734 3.5306 5.46823L7.99997 9.93761L12.4693 5.46761C12.6102 5.32671 12.8013 5.24756 13.0006 5.24756C13.1999 5.24756 13.391 5.32671 13.5318 5.46761C13.6727 5.60851 13.7519 5.7996 13.7519 5.99886C13.7519 6.19812 13.6727 6.38921 13.5318 6.53011L13.5306 6.53073Z" fill="currentColor"/>
7133                    </svg>
7134                  </span>
7135                </h3>
7136              
7137              
7138
7139                    <ul class="m-footer--block-content list-unstyled m-link-lists m-accordion--item-content">
7140                      
7141                        <li class="m-link-lists--item m:block">
7142                          <a href="/pages/mentions-legales" class="m-link"
7143                            target="_self"
7144                          >
7145                            Mentions légales
7146                          </a>
7147                        </li>
7148                      
7149                        <li class="m-link-lists--item m:block">
7150                          <a href="/pages/conditions-dutilisation" class="m-link"
7151                            target="_self"
7152                          >
7153                            Conditions d'utilisation
7154                          </a>
7155                        </li>
7156                      
7157                        <li class="m-link-lists--item m:block">
7158                          <a href="/pages/politique-de-confidentialite" class="m-link"
7159                            target="_self"
7160                          >
7161                            Politique de confidentialité
7162                          </a>
7163                        </li>
7164                      
7165                        <li class="m-link-lists--item m:block">
7166                          <a href="/pages/agence-klaviyo" class="m-link"
7167                            target="_self"
7168                          >
7169                            Agence Klaviyo
7170                          </a>
7171                        </li>
7172                      
7173                        <li class="m-link-lists--item m:block">
7174                          <a href="/pages/plan-du-site" class="m-link"
7175                            target="_self"
7176                          >
7177                            Plan du site
7178                          </a>
7179                        </li>
7180                      
7181                        <li class="m-link-lists--item m:block">
7182                          <a href="/pages/the-modern-letter-par-ville" class="m-link"
7183                            target="_self"
7184                          >
7185                            Par ville
7186                          </a>
7187                        </li>
7188                      
7189                    </ul>
7190                  
7191                
7192            </div>
7193          </div>
7194        
7195          
7196
7197          <div class="m-footer--block m-footer--block-our_store m-accordion--item m:w-full lg:m:w-1/4">
7198            <div
7199              class="m-footer--block-inner m-scroll-trigger animate--fade-in-up"
7200              
7201                data-cascade
7202                style="--animation-order: ;"
7203              
7204            >
7205              
7206                <h3 class="m-accordion--item-button m-footer--block-title">
7207                  NOUS CONTACTER
7208                  <span class="m-accordion--item-icon md:m:hidden">
7209                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
7210                      <path d="M13.5306 6.53073L8.5306 11.5307C8.46092 11.6007 8.37813 11.6561 8.28696 11.694C8.1958 11.7318 8.09806 11.7513 7.99935 11.7513C7.90064 11.7513 7.8029 11.7318 7.71173 11.694C7.62057 11.6561 7.53778 11.6007 7.4681 11.5307L2.4681 6.53073C2.3272 6.38984 2.24805 6.19874 2.24805 5.99948C2.24805 5.80023 2.3272 5.60913 2.4681 5.46823C2.60899 5.32734 2.80009 5.24818 2.99935 5.24818C3.19861 5.24818 3.3897 5.32734 3.5306 5.46823L7.99997 9.93761L12.4693 5.46761C12.6102 5.32671 12.8013 5.24756 13.0006 5.24756C13.1999 5.24756 13.391 5.32671 13.5318 5.46761C13.6727 5.60851 13.7519 5.7996 13.7519 5.99886C13.7519 6.19812 13.6727 6.38921 13.5318 6.53011L13.5306 6.53073Z" fill="currentColor"/>
7211                    </svg>
7212                  </span>
7213                </h3>
7214              
7215              
7216                  <div class="m-accordion--item-content m-footer--block-content">
7217                    
7218                      <div class="block-text rte">
7219                        <p>Tel : 06 25 17 74 30</p><p>Email : contact@modern-letter com</p>
7220                      </div>
7221                    
7222                    <div class="block-text">
7223                      
7224                      
7225                      
7226                        <div class="social-media-links ">
7227  
7228  
7229  
7230    <a
7231      target="_blank"
7232      class="social-media-links--item"
7233      href="https://www.instagram.com/modern_letter/"
7234      rel="noreferrer"
7235      aria-label="Instagram"
7236    >
7237      <svg class="m-svg-icon--medium" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
7238        <path fill="currentColor" d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"></path>
7239      </svg>
7240      
7241    </a>
7242  
7243  
7244  
7245    <a
7246      target="_blank"
7247      class="social-media-links--item"
7248      href="https://www.linkedin.com/company/the-modern-letter/"
7249      rel="noreferrer"
7250      aria-label="Linkedin"
7251    >
7252      <svg class="m-svg-icon--medium" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
7253        <path fill="currentColor" d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"/>
7254      </svg>
7255      
7256    </a>
7257  
7258  
7259  
7260  
7261    <a
7262      target="_blank"
7263      class="social-media-links--item"
7264      href="https://www.youtube.com/@TheModernLetter"
7265      rel="noreferrer"
7266      aria-label="Youtube"
7267    >
7268      <svg class="m-svg-icon--medium" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
7269        <path fill="currentColor" d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"/>
7270      </svg>
7271      
7272    </a>
7273  
7274  
7275  
7276    <a
7277      target="_blank"
7278      class="social-media-links--item"
7279      href="https://www.tiktok.com/@themodernletter"
7280      rel="noreferrer"
7281      aria-label="Tiktok"
7282    >
7283      <svg class="m-svg-icon--medium" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
7284        <path fill="currentColor" d="M448 209.91a210.06 210.06 0 01-122.77-39.25v178.72A162.55 162.55 0 11185 188.31v89.89a74.62 74.62 0 1052.23 71.18V0h88a121.18 121.18 0 001.86 22.17A122.18 122.18 0 00381 102.39a121.43 121.43 0 0067 20.14z"/>
7285      </svg>
7286      
7287    </a>
7288  
7289  
7290  
7291    <a
7292      target="_blank"
7293      class="social-media-links--item"
7294      href="https://wa.me/33625177420"
7295      rel="noreferrer"
7296      aria-label="Whatsapp"
7297    >
7298      <svg class="m-svg-icon--medium" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
7299        <path fill="currentColor" d="M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z"/>
7300      </svg>
7301      
7302    </a>
7303  
7304  
7305  
7306</div>
7307
7308                      
7309                    </div>
7310                  </div>
7311                
7312            </div>
7313          </div>
7314        
7315      </div>
7316    </div>
7317  </div>
7318
7319
7320  
7321<div class="m-footer--bottom m-footer--bottom-footer-1 m-gradient m-color-footer">
7322  <div class="container-full">
7323    <div class="m-footer--bottom-inner m:flex m:flex-col xl:m:flex-row m:justify-between m:items-end">
7324      
7325          
7326          <div class="m-footer--bottom-right m:w-full m:flex-col lg:m:flex-row m:flex m:flex-wrap xl:m:justify-end">
7327            
7328              <div class="m-footer--currency-language m:display-flex">
7329                
7330  
7331  <div class="m-switcher-dropdown m-language-switcher ">
7332    
7333    <form method="post" action="/localization" id="localization_form-79" accept-charset="UTF-8" class="shopify-localization-form" enctype="multipart/form-data" data-localization-form=""><input type="hidden" name="form_type" value="localization" /><input type="hidden" name="utf8" value="✓" /><input type="hidden" name="_method" value="put" /><input type="hidden" name="return_to" value="/" />
7334      <input type="hidden" name="locale_code" value="fr" data-localization-input/>
7335      <m-select-component>
7336        <m-localization-form>
7337          <select class="js-selectNative" data-localization-select><option
7338                value="fr"selected="selected">français</option><option
7339                value="en">English</option></select>
7340        </m-localization-form>
7341        <div class="m-select-custom js-selectCustom" aria-hidden="true">
7342          <div class="m-select-custom--trigger">
7343            <span class="m-select-custom--trigger-text"></span>
7344            <span class="m-select-custom--trigger-icon"><svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M441.9 167.3l-19.8-19.8c-4.7-4.7-12.3-4.7-17 0L224 328.2 42.9 147.5c-4.7-4.7-12.3-4.7-17 0L6.1 167.3c-4.7 4.7-4.7 12.3 0 17l209.4 209.4c4.7 4.7 12.3 4.7 17 0l209.4-209.4c4.7-4.7 4.7-12.3 0-17z"/></svg></span>
7345          </div>
7346          <div class="m-select-custom--options m-select-custom--options-top"><div class="m-select-custom--option" data-value="fr">français</div><div class="m-select-custom--option" data-value="en">English</div></div>
7347        </div>
7348      </m-select-component>
7349    </form>
7350  </div>
7351
7352
7353              </div>
7354            
7355            
7356            
7357            
7358          </div>
7359        
7360    </div>
7361  </div>
7362</div>
7363
7364</m-footer>
7365<script src="//modern-letter.com/cdn/shop/t/10/assets/footer.js?v=153507452613171334261784623194" defer="defer"></script>
7365
7366
7367<style> #shopify-section-sections--30338457764174__footer .m-footer--block-spacing {width: 10%;} #shopify-section-sections--30338457764174__footer .m-newsletter-form {margin-top: 24px;} #shopify-section-sections--30338457764174__footer .m-footer--block-newsletter .m-footer--block-title {font-weight: 400; font-size: 25px;} @media (min-width: 1280px) {#shopify-section-sections--30338457764174__footer .m-footer--block-newsletter .m-footer--block-title {font-size: 36px; margin-bottom: 12px; } #shopify-section-sections--30338457764174__footer .m-footer__copyright, #shopify-section-sections--30338457764174__footer .m-footer--bottom-menu {font-size: 14px; }} #shopify-section-sections--30338457764174__footer .m-footer--block .social-media-links a {color: #f3f3ec; background-color: #1b442a; width: 30px; height: 30px;} </style></div>
7368<!-- END sections: footer-group -->
7368<script>
7369  window.addEventListener('load', function () {
7370    window.__sfWindowLoaded = true;
7371  });
7372
7373  var fader = document.querySelector('.m-page-transition');
7374  function __fadeInPage() {
7375    if (!window.AnimationEvent || !fader) return;
7376
7377    let ignore_beforeunload = false;
7378
7379    document.querySelectorAll('a[href^=mailto], a[href^=tel]').forEach((link) => {
7380      link.addEventListener('click', () => {
7381        ignore_beforeunload = true;
7382      });
7383    });
7384
7385    // Page transition
7386    window.addEventListener('beforeunload', () => {
7387      if (!ignore_beforeunload) fader.classList.add('fade-in');
7388    });
7389    window.addEventListener('DOMContentLoaded', () => {
7390      document.documentElement.classList.remove('m:overflow-hidden');
7391      document.body.classList.remove('m:overflow-hidden');
7392
7393      // fader.classList.remove('fade-in')
7394      setTimeout(() => {
7395        fader.classList.add('fade-out');
7396      }, 300);
7397
7398      document.dispatchEvent(new CustomEvent('page:loaded'));
7399    });
7400    window.addEventListener('pageshow', (event) => {
7401      // Removes unload class when returning to page via history
7402      if (event.persisted) {
7403        fader.classList.remove('fade-in');
7404        // fader.classList.add('fade-out')
7405      }
7406    });
7407  }
7408  __fadeInPage();
7409
7410  // Lazyload background image
7411  function addIntersectionObserver(classSelector, newClass = '') {
7412    let lazyImages = [].slice.call(document.getElementsByClassName(classSelector));
7413    if ('IntersectionObserver' in window) {
7414      let lazyImageObserver = new IntersectionObserver(function (entries, observer) {
7415        entries.forEach(function (entry) {
7416          if (entry.isIntersecting) {
7417            let lazyImage = entry.target;
7418            lazyImage.classList.remove(classSelector);
7419            newClass && lazyImage.classList.remove(newClass);
7420            lazyImageObserver.unobserve(lazyImage);
7421          }
7422        });
7423      });
7424
7425      lazyImages.forEach(function (lazyImage) {
7426        lazyImageObserver.observe(lazyImage);
7427      });
7428    }
7429  }
7430  function handleBackgroundImageLazyload() {
7431    return addIntersectionObserver('m-bg-lazy');
7432  }
7433
7434  handleBackgroundImageLazyload();
7435  document.addEventListener('shopify:section:load', () => {
7436    handleBackgroundImageLazyload();
7437  });
7438
7439  // Init scroll top
7440  function __scrollToTop(element, callback) {
7441    if (!element) element = document.querySelector('#scroll-to-top-target');
7442    element.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
7443    if (callback) callback();
7444  }
7445
7446  function __initScrollTop() {
7447    const scrollTopButton = document.querySelector('#scroll-to-top-button');
7448    if (scrollTopButton) {
7449      scrollTopButton.addEventListener('click', () => __scrollToTop());
7450      window.addEventListener('scroll', function () {
7451        const method = window.scrollY > 100 ? 'add' : 'remove';
7452        scrollTopButton.classList[method]('is-show');
7453      });
7454    }
7455  }
7456
7457  // Init terms checkbox
7458  function __initTermsCheckbox() {
7459    addEventDelegate({
7460      selector: '.m-terms-conditons [name="agree_terms"]',
7461      event: 'change',
7462      handler: (e, target) => {
7463        let button = target.closest('.m-terms-conditons').nextElementSibling;
7464        while (button) {
7465          if (button.hasAttribute('data-terms-action')) {
7466            break;
7467          }
7468
7469          button = button.nextElementSibling;
7470        }
7471        if (button && button.hasAttributes('data-terms-action')) {
7472          if (target.checked) {
7473            button.removeAttribute('disabled');
7474          } else {
7475            button.setAttribute('disabled', true);
7476          }
7477        }
7478      },
7479    });
7480  }
7481
7482  window.addEventListener('load', () => {
7483    __initScrollTop();
7484    __initTermsCheckbox();
7485  });
7486</script>
7486
7487
7488
7489<script src="//modern-letter.com/cdn/shop/t/10/assets/product-quick-view.js?v=108327601157308923661784623194" defer="defer"></script>
7489
7490    
7490<script src="//modern-letter.com/cdn/shop/t/10/assets/wishlist.js?v=16470808071557734181784623194" defer="defer"></script>
7490
7491    
7491<script src="//modern-letter.com/cdn/shop/t/10/assets/compare-product.js?v=140858032008835558281784623194" defer="defer"></script>
7491<script src="//modern-letter.com/cdn/shop/t/10/assets/product-card-swatch.js?v=80708397271791548311784623194" defer="defer"></script>
7491<style> .m-section__subheading,.m-richtext__subtitle {font-weight: 500; font-size: 18px;} .m-section__header {--m-section-header-spacing-bottom: 40px;} .m-button--link {--btn-link-border: 1px;} </style>
7492<script src="https://cdn.shopify.com/storefront/standard-actions.js" type="module" data-source-attribution="shopify.standard_actions"></script>
7492
7493</body>
7494</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.