PageSourceSearch

https://houellebecq.xyz/contact/

html houellebecq.xyz collected 2026-10-04 08:11:01 UTC 37,592 bytes, 897 lines download raw bytes

1<!DOCTYPE html>
2<html lang="fr">
3<head>
4
5    <title>contact</title>
6    <meta charset="utf-8">
7    <meta name="viewport" content="width=device-width, initial-scale=1.0">
8    
9    <link rel="preload" as="style" href="/assets/built/screen.css?v=eff6954572">
10    <link rel="preload" as="script" href="/assets/built/source.js?v=eff6954572">
11    
12    <link rel="preload" as="font" type="font/woff2" href="/assets/fonts/inter-roman.woff2?v=eff6954572" crossorigin="anonymous">
13<style>
14    @font-face {
15        font-family: "Inter";
16        font-style: normal;
17        font-weight: 100 900;
18        font-display: optional;
19        src: url(/assets/fonts/inter-roman.woff2?v=eff6954572) format("woff2");
20        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
21    }
22</style>
23    <link rel="preload" as="font" type="font/woff2" href="/assets/fonts/eb-garamond-roman.woff2?v=eff6954572" crossorigin="anonymous">
24<link rel="preload" as="font" type="font/woff2" href="/assets/fonts/eb-garamond-italic.woff2?v=eff6954572" crossorigin="anonymous">
25<style>
26    @font-face {
27        font-family: "EB Garamond";
28        font-style: normal;
29        font-weight: 400 800;
30        font-display: optional;
31        src: url(/assets/fonts/eb-garamond-roman.woff2?v=eff6954572) format("woff2");
32        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
33    }
34
35    @font-face {
36        font-family: "EB Garamond";
37        font-style: italic;
38        font-weight: 400 800;
39        font-display: optional;
40        src: url(/assets/fonts/eb-garamond-italic.woff2?v=eff6954572) format("woff2");
41        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
42    }
43</style>
44    <link rel="stylesheet" type="text/css" href="/assets/built/screen.css?v=eff6954572">
45
46    <style>
47        :root {
48            --background-color: #797979
49        }
50    </style>
51
52    
52<script type="2acee88715dded38c40abb8f-text/javascript">
53        /* The script for calculating the color contrast has been taken from
54        https://gomakethings.com/dynamically-changing-the-text-color-based-on-background-color-contrast-with-vanilla-js/ */
55        var accentColor = getComputedStyle(document.documentElement).getPropertyValue('--background-color');
56        accentColor = accentColor.trim().slice(1);
57
58        if (accentColor.length === 3) {
59            accentColor = accentColor[0] + accentColor[0] + accentColor[1] + accentColor[1] + accentColor[2] + accentColor[2];
60        }
61
62        var r = parseInt(accentColor.substr(0, 2), 16);
63        var g = parseInt(accentColor.substr(2, 2), 16);
64        var b = parseInt(accentColor.substr(4, 2), 16);
65        var yiq = ((r * 299) + (g * 587) + (b * 114)) / 1000;
66        var textColor = (yiq >= 128) ? 'dark' : 'light';
67
68        document.documentElement.className = `has-${textColor}-text`;
69    </script>
69
70
71    <link rel="icon" href="https://houellebecq.xyz/content/images/size/w256h256/format/png/2026/02/Houellebecq_test_3-2.webp" type="image/png">
72    <link rel="canonical" href="https://houellebecq.xyz/contact/">
73    <meta name="referrer" content="no-referrer-when-downgrade">
74    
75    <meta property="og:site_name" content="Les Archives de Houellebecq">
76    <meta property="og:type" content="website">
77    <meta property="og:title" content="contact">
78    <meta property="og:description" content="Votre prénom
79
80
81
82Votre nom
83
84
85
86Votre adresse e-mail
87
88
89
90Votre message
91
92
93
94
95Votre pièce jointe
96
97
98
99
100
101Comment avez-vous découvert le site ?
102
103Par une connaissance
104Moteur de recherche
105Youtube
106TikTok
107Facebook
108Instagram
109Threads
110X
111
112
113
114
115ENVOYER">
116    <meta property="og:url" content="https://houellebecq.xyz/contact/">
117    <meta property="article:published_time" content="2023-07-14T09:00:42.000Z">
118    <meta property="article:modified_time" content="2026-02-10T15:57:45.000Z">
119    <meta property="article:publisher" content="https://www.facebook.com/houellebecq.xyz/">
120    <meta property="article:author" content="https://www.facebook.com/riva_bastien">
121    <meta name="twitter:card" content="summary">
122    <meta name="twitter:title" content="contact">
123    <meta name="twitter:description" content="Votre prénom
124
125
126
127Votre nom
128
129
130
131Votre adresse e-mail
132
133
134
135Votre message
136
137
138
139
140Votre pièce jointe
141
142
143
144
145
146Comment avez-vous découvert le site ?
147
148Par une connaissance
149Moteur de recherche
150Youtube
151TikTok
152Facebook
153Instagram
154Threads
155X
156
157
158
159
160ENVOYER">
161    <meta name="twitter:url" content="https://houellebecq.xyz/contact/">
162    <meta name="twitter:label1" content="Written by">
163    <meta name="twitter:data1" content="Bastien R.">
164    <meta name="twitter:site" content="@houellebecq_xyz">
165    
166    
166<script type="application/ld+json">
167{
168    "@context": "https://schema.org",
169    "@type": "Article",
170    "publisher": {
171        "@type": "Organization",
172        "name": "Les Archives de Houellebecq",
173        "url": "https://houellebecq.xyz/",
174        "logo": {
175            "@type": "ImageObject",
176            "url": "https://houellebecq.xyz/content/images/2026/02/Houellebecq_test_3-3.webp",
177            "width": 60,
178            "height": 60
179        }
180    },
181    "author": {
182        "@type": "Person",
183        "name": "Bastien R.",
184        "image": {
185            "@type": "ImageObject",
186            "url": "https://houellebecq.xyz/content/images/2026/02/2023_Portrait_Bastien_Droite.webp",
187            "width": 1024,
188            "height": 1024
189        },
190        "url": "https://houellebecq.xyz/author/bastien/",
191        "sameAs": [
192            "https://bastienriva.wstd.io",
193            "https://www.facebook.com/riva_bastien",
194            "https://www.tiktok.com/@robotdefou",
195            "https://www.instagram.com/riva_bastien"
196        ]
197    },
198    "headline": "contact",
199    "url": "https://houellebecq.xyz/contact/",
200    "datePublished": "2023-07-14T09:00:42.000Z",
201    "dateModified": "2026-02-10T15:57:45.000Z",
202    "description": "\n\n\n\n\n\nVotre prénom\n\n\n\nVotre nom\n\n\n\nVotre adresse e-mail\n\n\n\nVotre message\n\n\n\n\nVotre pièce jointe\n\n\n\n\n\nComment avez-vous découvert le site ?\n\nPar une connaissance\nMoteur de recherche\nYoutube\nTikTok\nFacebook\nInstagram\nThreads\nX\n\n\n\n\nENVOYER\n\n\n",
203    "mainEntityOfPage": "https://houellebecq.xyz/contact/"
204}
205    </script>
205
206
207    <meta name="generator" content="Ghost 6.57">
208    <link rel="alternate" type="application/rss+xml" title="Les Archives de Houellebecq" href="https://houellebecq.xyz/rss/">
209    
209<script defer src="https://cdn.jsdelivr.net/ghost/portal@~2.69/umd/portal.min.js" data-i18n="true" data-ghost="https://houellebecq.xyz/" data-key="3aa108dc3c4afc902276281d2c" data-api="https://houellebecq.xyz/ghost/api/content/" data-locale="fr" crossorigin="anonymous" type="2acee88715dded38c40abb8f-text/javascript"></script>
209<style id="gh-members-styles">.gh-post-upgrade-cta-content,
210.gh-post-upgrade-cta {
211    display: flex;
212    flex-direction: column;
213    align-items: center;
214    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
215    text-align: center;
216    width: 100%;
217    color: #ffffff;
218    font-size: 16px;
219}
220
221.gh-post-upgrade-cta-content {
222    border-radius: 8px;
223    padding: 40px 4vw;
224}
225
226.gh-post-upgrade-cta h2 {
227    color: #ffffff;
228    font-size: 28px;
229    letter-spacing: -0.2px;
230    margin: 0;
231    padding: 0;
232}
233
234.gh-post-upgrade-cta p {
235    margin: 20px 0 0;
236    padding: 0;
237}
238
239.gh-post-upgrade-cta small {
240    font-size: 16px;
241    letter-spacing: -0.2px;
242}
243
244.gh-post-upgrade-cta a {
245    color: #ffffff;
246    cursor: pointer;
247    font-weight: 500;
248    box-shadow: none;
249    text-decoration: underline;
250}
251
252.gh-post-upgrade-cta a:hover {
253    color: #ffffff;
254    opacity: 0.8;
255    box-shadow: none;
256    text-decoration: underline;
257}
258
259.gh-post-upgrade-cta a.gh-btn {
260    display: block;
261    background: #ffffff;
262    text-decoration: none;
263    margin: 28px 0 0;
264    padding: 8px 18px;
265    border-radius: 4px;
266    font-size: 16px;
267    font-weight: 600;
268}
269
270.gh-post-upgrade-cta a.gh-btn:hover {
271    opacity: 0.92;
272}</style>
272<script async src="https://js.stripe.com/v3/" type="2acee88715dded38c40abb8f-text/javascript"></script>
272
273    
273<script defer src="https://cdn.jsdelivr.net/ghost/sodo-search@~1.8/umd/sodo-search.min.js" data-key="3aa108dc3c4afc902276281d2c" data-styles="https://cdn.jsdelivr.net/ghost/sodo-search@~1.8/umd/main.css" data-sodo-search="https://houellebecq.xyz/" data-locale="fr" crossorigin="anonymous" type="2acee88715dded38c40abb8f-text/javascript"></script>
273
274    
274<script defer src="https://cdn.jsdelivr.net/ghost/announcement-bar@~1.1/umd/announcement-bar.min.js" data-announcement-bar="https://houellebecq.xyz/" data-api-url="https://houellebecq.xyz/members/api/announcement/" crossorigin="anonymous" type="2acee88715dded38c40abb8f-text/javascript"></script>
274
275    <link href="https://houellebecq.xyz/webmentions/receive/" rel="webmention">
276    
276<script defer src="/public/cards.min.js?v=eff6954572" type="2acee88715dded38c40abb8f-text/javascript"></script>
276
277    <link rel="stylesheet" type="text/css" href="/public/cards.min.css?v=eff6954572">
278    
278<script defer src="/public/comment-counts.min.js?v=eff6954572" data-ghost-comments-counts-api="https://houellebecq.xyz/members/api/comments/counts/" type="2acee88715dded38c40abb8f-text/javascript"></script>
278
279    
279<script defer src="/public/member-attribution.min.js?v=eff6954572" type="2acee88715dded38c40abb8f-text/javascript"></script>
279
280    
280<script defer src="/public/ghost-stats.min.js?v=eff6954572" data-stringify-payload="false" data-datasource="analytics_events" data-storage="localStorage" data-host="https://ghost-stats.signes.xyz/api/v1/page_hit" tb_site_uuid="8e1626d2-dffc-4910-b12c-f3b065bcf7ee" tb_post_uuid="b48923f2-9b89-4fcf-9eda-f770417b40d5" tb_post_type="page" tb_member_uuid="undefined" tb_member_status="undefined" tb_gift_link="" type="2acee88715dded38c40abb8f-text/javascript"></script>
280<style>:root {--ghost-accent-color: #000000;}</style>
281    <style>
282    /* ============================================================
283       1. STYLE GLOBAL DU SITE
284       ============================================================ */
285
286    /* Liens en blanc dans le contenu et le header d'article.
287       !important nécessaire pour surcharger --ghost-accent-color. */
288    .gh-content a,
289    .gh-article-header a { color: white !important; }
290    .gh-content a:hover,
291    .gh-article-header a:hover { color: #f0f0f0 !important; }
292
293    /* Alignement du texte : posts justifiés, pages aussi.
294       H1 centré sur les pages, à gauche sur les articles. */
295    .post-template .gh-content p,
296    .page-template .gh-content p { text-align: justify; }
297    .page-template h1 { text-align: center; }
298    .post-template h1 { text-align: left; }
299
300
301    /* ============================================================
302       2. TWEAKS STRUCTURELS
303       ============================================================ */
304
305    /* Cache la photo et le nom de l'auteur dans le header d'article.
306       Date et temps de lecture restent visibles (autre div). */
307    .gh-article-author-image,
308    .gh-article-author-name {
309        display: none;
310    }
311    .gh-article-meta,
312    .gh-article-meta-wrapper {
313        padding-left: 0;
314        margin-left: 0;
315    }
316
317
318    /* ============================================================
319       3. STYLES LIÉS AUX FEATURES DU THÈME
320       ============================================================ */
321
322    /* Bouton paywall : surcharge des couleurs (fond blanc, texte noir).
323       Cible le CTA natif Ghost (gh-post-upgrade-cta) sur les articles restreints. */
324    .gh-post-upgrade-cta a.gh-btn {
325        color: black !important;
326        background-color: white !important;
327    }
328
329    /* Effet de fondu sur le dernier paragraphe visible des articles payants.
330       Cible le dernier <p> direct enfant de .gh-content quand celui-ci
331       contient aussi un .gh-post-upgrade-cta (rendu via le CTA natif Ghost).
332       Aucun wrapper HTML nécessaire, tout en CSS via :has(). */
333    .gh-content:has(> .gh-post-upgrade-cta) > p:last-of-type {
334        -webkit-mask-image: linear-gradient(to bottom, var(--color-black) 1%, transparent 100%);
335        mask-image: linear-gradient(to bottom, var(--color-black) 1%, transparent 100%);
336    }
337
338    /* Bouton Partage en haut de l'article : fond accent color.
339       Le texte blanc est déjà géré par la règle "Liens en blanc" plus haut. */
340    .gh-button-share {
341        background: var(--ghost-accent-color);
342        border-color: var(--ghost-accent-color);
343    }
344    .gh-button-share:hover {
345        background: var(--ghost-accent-color);
346        border-color: var(--ghost-accent-color);
347        filter: brightness(1.15);
348    }
349
350    /* Notice de traduction inter-blogs.
351       Le HTML (.gh-translation-notice) sera injecté par le Cloudflare Worker
352       qui intercepte les pages d'articles tagués #i18n-…
353       Ce bloc CSS style juste l'apparence visuelle de la notice. */
354    .gh-translation-notice {
355        margin-top: 20px;
356        font-size: 1.4rem;
357        letter-spacing: -0.006em;
358        color: var(--color-secondary-text);
359    }
360    .gh-translation-notice a {
361        color: inherit;
362        text-decoration: underline;
363        text-underline-offset: 4px;
364        text-decoration-thickness: 1px;
365        transition: opacity 0.2s;
366    }
367    .gh-translation-notice a:hover {
368        opacity: 0.6;
369    }
370    .gh-translation-notice a::after {
371        content: "→";
372        display: inline-block;
373        padding-left: 0.3em;
374        transition: transform 0.2s;
375    }
376    .gh-translation-notice a:hover::after {
377        transform: translateX(3px);
378    }
379
380    /* Barre de progression de lecture (en haut des articles).
381       Élément HTML créé par le code injection footer (createProgressBar).
382       Animation de l'attribut "value" par startProgressAnimation.
383       Repositionnement dynamique de "top" selon le sticky banner. */
384    .reading-progress {
385        position: fixed;
386        top: 0;
387        z-index: 999;
388        width: 100%;
389        height: 5px;
390        background: transparent;
391        -webkit-appearance: none;
392        -moz-appearance: none;
393        appearance: none;
394        border: none;
395    }
396    .reading-progress::-webkit-progress-bar { background-color: transparent; }
397    .reading-progress::-webkit-progress-value { background: var(--ghost-accent-color); }
398    .reading-progress::-moz-progress-bar { background: var(--ghost-accent-color); }
399
400    /* Cache la barre de progression sur les articles protégés avec un CTA.
401       Pas de sens d'afficher la progression de lecture si le visiteur
402       ne voit qu'un aperçu tronqué. */
403    body:has(.gh-post-upgrade-cta) .reading-progress {
404        display: none;
405    }
406
407    /* Sticky title banner sur les articles (apparaît quand on scrolle past le titre).
408       HTML créé par le code injection footer.
409       Toggle .is-visible (montre/cache) et .is-dark (variante dark) viennent aussi du footer. */
410    .sticky-title-banner {
411        position: fixed;
412        top: 0;
413        left: 0;
414        right: 0;
415        z-index: 999;
416        padding: 12px 24px;
417        display: flex;
418        align-items: center;
419        justify-content: center;
420        gap: 12px;
421        font-weight: 600;
422        font-size: 14px;
423        background: rgba(255, 255, 255, 0.4);
424        backdrop-filter: blur(20px);
425        -webkit-backdrop-filter: blur(20px);
426        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
427        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
428        transform: translateY(-100%);
429        opacity: 0;
430        transition: transform 0.3s ease, opacity 0.3s ease;
431    }
432    .sticky-title-banner.is-visible {
433        transform: translateY(0);
434        opacity: 1;
435    }
436    .sticky-title-banner.is-dark {
437        background: rgba(0, 0, 0, 0.4);
438        border-bottom-color: rgba(255, 255, 255, 0.08);
439    }
440    .sticky-title-text {
441        max-width: 500px;
442        white-space: nowrap;
443        overflow: hidden;
444        text-overflow: ellipsis;
445        color: rgba(0, 0, 0, 0.8);
446    }
447    .sticky-title-banner.is-dark .sticky-title-text {
448        color: rgba(255, 255, 255, 0.9);
449    }
450</style>
451    <link rel="preconnect" href="https://fonts.bunny.net"><link rel="stylesheet" href="https://fonts.bunny.net/css?family=tenor-sans:400|fira-mono:400,700"><style>:root {--gh-font-heading: Tenor Sans;--gh-font-body: Fira Mono;}</style>
452
453</head>
454<body class="page-template page-contact gh-font-heading-tenor-sans gh-font-body-fira-mono has-serif-title has-sans-body">
455
456<div class="gh-viewport">
457    
458    <header id="gh-navigation" class="gh-navigation is-stacked has-accent-color gh-outer">
459    <div class="gh-navigation-inner gh-inner">
460
461        <div class="gh-navigation-brand">
462            <a class="gh-navigation-logo is-title" href="https://houellebecq.xyz">
463                    <img src="https://houellebecq.xyz/content/images/2026/02/Houellebecq_test_3-3.webp" alt="Les Archives de Houellebecq">
464            </a>
465            <button class="gh-search gh-icon-button" aria-label="Rechercher sur ce site" data-ghost-search>
466    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" width="20" height="20"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></button>            <button class="gh-burger gh-icon-button" aria-label="Menu">
467                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M224,128a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128ZM40,72H216a8,8,0,0,0,0-16H40a8,8,0,0,0,0,16ZM216,184H40a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16Z"></path></svg>                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"></path></svg>            </button>
468        </div>
469
470        <nav class="gh-navigation-menu">
471            <ul class="nav">
472    <li class="nav-a-propos"><a href="https://houellebecq.xyz/a-propos/">à propos</a></li>
473    <li class="nav-en-france"><a href="https://houellebecq.xyz/tag/france/">en france</a></li>
474    <li class="nav-a-letranger"><a href="https://houellebecq.xyz/tag/monde/">à l&#x27;étranger</a></li>
475    <li class="nav-par-ses-pairs"><a href="https://houellebecq.xyz/tag/pairs/">par ses pairs</a></li>
476    <li class="nav-oeuvre"><a href="https://houellebecq.xyz/oeuvre/">œuvre</a></li>
477    <li class="nav-amis"><a href="https://houellebecq.xyz/#/portal/recommendations">amis ↗</a></li>
478    <li class="nav-tv"><a href="https://tv.houellebecq.xyz/">tv ↗</a></li>
479    <li class="nav-lire-en-anglais"><a href="https://houellebecq.xyz/en/">lire en anglais</a></li>
480</ul>
481
482        </nav>
483
484        <div class="gh-navigation-actions">
485                <button class="gh-search gh-icon-button" aria-label="Rechercher sur ce site" data-ghost-search>
486    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" width="20" height="20"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></button>                <div class="gh-navigation-members">
487                            <a href="#/portal/signin" data-portal="signin">Se connecter</a>
488                                <a class="gh-button" href="#/portal/signup" data-portal="signup">S&#x27;abonner</a>
489                </div>
490        </div>
491
492    </div>
493</header>
494
495    
496
497<main class="gh-main">
498    <article class="gh-article post no-image">
499
500            <header class="gh-article-header gh-canvas">
501                <h1 class="gh-article-title is-title">contact</h1>
502                            </header>
503
504        <section class="gh-content gh-canvas is-body">
505            
506<!--kg-card-begin: html-->
507<!DOCTYPE html>
508<html lang="fr">
509  <head>
510    
510<script src="https://unpkg.com/@botpoison/browser" async type="2acee88715dded38c40abb8f-text/javascript"></script>
510
511    <style>
512      label.required:after {
513        content: " *";
514        color: black;
515      }
516    </style>
517    
517<script src="https://ucarecdn.com/libs/widget/3.x/uploadcare.full.min.js" type="2acee88715dded38c40abb8f-text/javascript"></script>
517
518    
518<script type="2acee88715dded38c40abb8f-text/javascript">
519  UPLOADCARE_PUBLIC_KEY = "90ef5407d53df7409b79";
520  UPLOADCARE_LOCALE = "fr";
521  uploadcare.initialize();
522    </script>
522
523  </head>
524  <body>
525    <form 
526      action="https://submit-form.com/kvxQQ9rfU" 
527      style="max-width: 600px; margin: 50px auto; font-family: Inter, sans-serif;" 
528      data-botpoison-public-key="pk_eee2c6ab-b6b7-4b19-8429-5d4dd890a731"
529    >
530      <input type="hidden" name="_redirect" value="https://houellebecq.xyz/merci-contact/" />
531
532<!-- Prénom -->
533      <label for="first_name" class="required" style="display: block; margin-bottom: 8px;"><strong>Votre prénom</strong></label>
534      <input 
535        type="text" 
536        id="first_name" 
537        name="first_name" 
538        placeholder="Jean" 
539        required
540        style="width: 100%; padding: 10px; margin-bottom: 20px; border: 1px solid #ccc; border-radius: 8px;"
541      />
542
543<!-- Nom -->
544      <label for="last_name" class="required" style="display: block; margin-bottom: 8px;"><strong>Votre nom</strong></label>
545      <input 
546        type="text" 
547        id="last_name" 
548        name="last_name" 
549        placeholder="Martin" 
550        required
551        style="width: 100%; padding: 10px; margin-bottom: 20px; border: 1px solid #ccc; border-radius: 8px;"
552      />
553
554<!-- Email -->
555      <label for="email" class="required" style="display: block; margin-bottom: 8px;"><strong>Votre adresse e-mail</strong></label>
556      <input 
557        type="email" 
558        id="email" 
559        name="email" 
560        placeholder="[email protected]" 
561        required
562        style="width: 100%; padding: 10px; margin-bottom: 20px; border: 1px solid #ccc; border-radius: 8px;"
563      />
564
565<!-- Message -->
566      <label for="message" class="required" style="display: block; margin-bottom: 8px;"><strong>Votre message</strong></label>
567      <textarea 
568        id="message" 
569        name="message" 
570        placeholder="Écrivez ce que vous voulez." 
571        required
572        style="width: 100%; padding: 10px; height: 150px; margin-bottom: 20px; border: 1px solid #ccc; border-radius: 8px;"
573      ></textarea>
574
575<!-- Pièce jointe -->
576    <div style="margin-bottom: 20px;">
577      <label for="attachment" style="display: block; margin-bottom: 8px;"><strong>Votre pièce jointe</strong></label>
578      <input
579        type="hidden"
580        id="attachment"
581        name="attachment"
582        role="uploadcare-uploader"
583        data-public-key="90ef5407d53df7409b79"
584        data-crop="free"
585        style="width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 8px;"
586      />
587    </div>
588    <style>
589        .uploadcare--widget__button {
590        background-color: black !important;
591        color: white !important;
592        border-radius: 8px !important;
593        padding: 10px 20px !important;
594        font-weight: bold !important;
595        border: none !important;
596        cursor: pointer;
597        }
598    </style>
599
600<!-- Source -->
601      <label for="source" class="required" style="display: block; margin-bottom: 8px;"><strong>Comment avez-vous découvert le site ?</strong></label>
602      <select name="source" required style="width: 100%; padding: 10px; margin-bottom: 40px; border: 1px solid #ccc; border-radius: 8px;">
603        <option value="recommendation">Par une connaissance</option>
604        <option value="engine">Moteur de recherche</option>
605        <option value="youtube">Youtube</option>
606        <option value="tiktok">TikTok</option>
607        <option value="facebook">Facebook</option>
608        <option value="instagram">Instagram</option>
609        <option value="threads">Threads</option>
610        <option value="x">X</option>
611      </select>
612
613<!-- Envoi -->
614      <button 
615        type="submit" 
616        style="background-color: black; color: white; padding: 10px 20px; border-radius: 12px; border: none; cursor: pointer; width: 100%; font-size: 16px; font-weight: bold;"
617      >
618        ENVOYER
619      </button>
620    </form>
vendor: 145 bytes, lines 620-621
620
621  <script src="/cdn-cgi/scripts/7d0fa10a/cloudflare-static/rocket-loader.min.js" data-cf-settings="2acee88715dded38c40abb8f-|49" defer></script>
621<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"42e37ecde3984b7faf4d7fc13d83386b","r":1,"spa":2}' crossorigin="anonymous"></script>
vendor: 1 bytes, line 621
621
622<script>(function(){function c(){var b=a.contentDocument||(a.contentWindow&&a.contentWindow.document);if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'a452b6a4aef8c5e4',t:'MTc5MTEwMTQ2MQ=='};var a=document.createElement('script');a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script>
622</body>
623</html>
624<!--kg-card-end: html-->
625
626        </section>
627
628    </article>
629</main>
630
631
632    
633    <footer class="gh-footer has-accent-color gh-outer">
634    <div class="gh-footer-inner gh-inner">
635
636        <div class="gh-footer-bar">
637            <span class="gh-footer-logo is-title">
638                    <img src="https://houellebecq.xyz/content/images/2026/02/Houellebecq_test_3-3.webp" alt="Les Archives de Houellebecq">
639            </span>
640            <nav class="gh-footer-menu">
641                <ul class="nav">
642    <li class="nav-a-propos"><a href="https://houellebecq.xyz/a-propos/">à propos</a></li>
643    <li class="nav-contact nav-current"><a href="https://houellebecq.xyz/contact/">contact</a></li>
644    <li class="nav-legal"><a href="https://houellebecq.xyz/legal/">légal</a></li>
645    <li class="nav-amis"><a href="https://houellebecq.xyz/#/portal/recommendations">amis ↗</a></li>
646    <li class="nav-faire-un-don"><a href="https://houellebecq.xyz/#/portal/support">faire un don ↗</a></li>
647    <li class="nav-site-officiel"><a href="http://michelhouellebecq.com/">site officiel ↗</a></li>
648    <li class="nav-tv"><a href="https://tv.houellebecq.xyz/">tv ↗</a></li>
649</ul>
650
651            </nav>
652            <div class="gh-footer-copyright">
653                Propulsé par <a href="https://ghost.org/" target="_blank" rel="noopener">Ghost</a>
654            </div>
655        </div>
656
657                <section class="gh-footer-signup">
658                    <h2 class="gh-footer-signup-header is-title">
659                        les archives de houellebecq
660                    </h2>
661                    <p class="gh-footer-signup-subhead is-body">
662                        Les archives de Michel Houellebecq de 1991 à nos jours. Interventions, entretiens &amp; rencontres.
663                    </p>
664                    <form class="gh-form" data-members-form>
665    <input class="gh-form-input" id="footer-email" name="email" type="email" placeholder="[email protected]" required data-members-email>
666    <button class="gh-button" type="submit" aria-label="S&#x27;abonner">
667        <span><span>S&#x27;abonner</span> <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" viewBox="0 0 256 256"><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path></svg></span>
668        <svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
669    <g stroke-linecap="round" stroke-width="2" fill="currentColor" stroke="none" stroke-linejoin="round" class="nc-icon-wrapper">
670        <g class="nc-loop-dots-4-24-icon-o">
671            <circle cx="4" cy="12" r="3"></circle>
672            <circle cx="12" cy="12" r="3"></circle>
673            <circle cx="20" cy="12" r="3"></circle>
674        </g>
675        <style data-cap="butt">
676            .nc-loop-dots-4-24-icon-o{--animation-duration:0.8s}
677            .nc-loop-dots-4-24-icon-o *{opacity:.4;transform:scale(.75);animation:nc-loop-dots-4-anim var(--animation-duration) infinite}
678            .nc-loop-dots-4-24-icon-o :nth-child(1){transform-origin:4px 12px;animation-delay:-.3s;animation-delay:calc(var(--animation-duration)/-2.666)}
679            .nc-loop-dots-4-24-icon-o :nth-child(2){transform-origin:12px 12px;animation-delay:-.15s;animation-delay:calc(var(--animation-duration)/-5.333)}
680            .nc-loop-dots-4-24-icon-o :nth-child(3){transform-origin:20px 12px}
681            @keyframes nc-loop-dots-4-anim{0%,100%{opacity:.4;transform:scale(.75)}50%{opacity:1;transform:scale(1)}}
682        </style>
683    </g>
684</svg>        <span>E-mail envoyé</span>
685    </button>
686    <p data-members-error></p>
687</form>
688                </section>
689
690    </div>
691</footer>    
692</div>
693
694    <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
695    <div class="pswp__bg"></div>
696
697    <div class="pswp__scroll-wrap">
698        <div class="pswp__container">
699            <div class="pswp__item"></div>
700            <div class="pswp__item"></div>
701            <div class="pswp__item"></div>
702        </div>
703
704        <div class="pswp__ui pswp__ui--hidden">
705            <div class="pswp__top-bar">
706                <div class="pswp__counter"></div>
707
708                <button class="pswp__button pswp__button--close" title="Fermer (Esc)"></button>
709                <button class="pswp__button pswp__button--share" title="Partager"></button>
710                <button class="pswp__button pswp__button--fs" title="Basculer en plein écran"></button>
711                <button class="pswp__button pswp__button--zoom" title="Zoom avant/arrière"></button>
712
713                <div class="pswp__preloader">
714                    <div class="pswp__preloader__icn">
715                        <div class="pswp__preloader__cut">
716                            <div class="pswp__preloader__donut"></div>
717                        </div>
718                    </div>
719                </div>
720            </div>
721
722            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
723                <div class="pswp__share-tooltip"></div>
724            </div>
725
726            <button class="pswp__button pswp__button--arrow--left" title="Précédent (flèche gauche)"></button>
727            <button class="pswp__button pswp__button--arrow--right" title="Suivant (flèche droite)"></button>
728
729            <div class="pswp__caption">
730                <div class="pswp__caption__center"></div>
731            </div>
732        </div>
733    </div>
734</div>
735<script src="/assets/built/source.js?v=eff6954572" type="2acee88715dded38c40abb8f-text/javascript"></script>
735
736
737<script type="2acee88715dded38c40abb8f-text/javascript">
738(function () {
739    'use strict';
740
741    // ============================================================
742    // CONFIG
743    // ============================================================
744    const CONFIG = {
745        sisterSiteUrl:        'https://houellebecq.xyz/en',
746        readingProgressLabel: 'Progression de lecture',
747        scrollHideThreshold:  100,
748        bannerShowBuffer:     100,
749    };
750
751    // ============================================================
752    // Boot
753    // ============================================================
754    if (document.readyState === 'loading') {
755        document.addEventListener('DOMContentLoaded', init);
756    } else {
757        init();
758    }
759
760    function init() {
761        setupExternalLinks();
762        setupStickyChrome();
763    }
764
765    // ============================================================
766    // 1. Liens externes ouverts dans un nouvel onglet
767    //    Exception : les liens vers le blog jumeau restent dans
768    //    le même onglet (le lien sera ajouté via le menu natif Ghost).
769    // ============================================================
770    function setupExternalLinks() {
771        const siteUrl = window.location.origin;
772        document.querySelectorAll('a[href^="http"]').forEach((link) => {
773            if (link.href.startsWith(siteUrl)) return;
774            if (link.href.startsWith(CONFIG.sisterSiteUrl)) return;
775            link.setAttribute('target', '_blank');
776            link.setAttribute('rel', 'noopener noreferrer');
777        });
778    }
779
780    // ============================================================
781    // 2. Sticky chrome : header + barre de progression + bandeau titre
782    //    Note: la barre de progression et le bandeau titre sont créés
783    //    100% en JS pour garder le thème strictement upstream.
784    // ============================================================
785    function setupStickyChrome() {
786        const header = document.querySelector('.gh-navigation');
787        if (!header) return;
788
789        makeHeaderSticky(header);
790
791        const isPost = isPostPage();
792        const progressBar = isPost ? createProgressBar() : null;
793        if (progressBar) {
794            progressBar.style.transition = 'top 0.3s ease';
795            startProgressAnimation(progressBar);
796        }
797
798        const banner = isPost ? createStickyBanner() : null;
799        let titleTop = banner ? getArticleTitleTop() : 0;
800        if (banner) {
801            window.addEventListener('resize', () => { titleTop = getArticleTitleTop(); });
802        }
803
804        setupScrollOrchestrator({ header, banner, progressBar, getTitleTop: () => titleTop });
805    }
806
807    function makeHeaderSticky(header) {
808        Object.assign(header.style, {
809            position: 'sticky',
810            top: '0',
811            zIndex: '1000',
812            transition: 'transform 0.3s ease',
813        });
814    }
815
816    function isPostPage() {
817        return document.body.classList.contains('post-template');
818    }
819
820    function getArticleTitleTop() {
821        const title = document.querySelector('.gh-article-title');
822        return title ? title.getBoundingClientRect().top + window.scrollY : 0;
823    }
824
825    function createProgressBar() {
826        const bar = document.createElement('progress');
827        bar.className = 'reading-progress';
828        bar.value = 0;
829        bar.max = 100;
830        bar.setAttribute('aria-label', CONFIG.readingProgressLabel);
831        document.body.appendChild(bar);
832        return bar;
833    }
834
835    function startProgressAnimation(bar) {
836        function tick() {
837            const totalHeight = document.body.clientHeight;
838            const windowHeight = document.documentElement.clientHeight;
839            const position = window.scrollY;
840            const progress = position / (totalHeight - windowHeight) * 100;
841            bar.setAttribute('value', progress);
842            requestAnimationFrame(tick);
843        }
844        requestAnimationFrame(tick);
845    }
846
847    function createStickyBanner() {
848        const title = document.querySelector('.gh-article-title');
849        if (!title) return null;
850
851        const banner = document.createElement('div');
852        banner.className = 'sticky-title-banner';
853        if (document.documentElement.classList.contains('has-light-text')) {
854            banner.classList.add('is-dark');
855        }
856        banner.innerHTML = `<span class="sticky-title-text">${title.textContent}</span>`;
857        document.body.appendChild(banner);
858
859        return banner;
860    }
861
862    function setupScrollOrchestrator({ header, banner, progressBar, getTitleTop }) {
863        let lastScroll = 0;
864        let ticking = false;
865
866        window.addEventListener('scroll', () => {
867            if (ticking) return;
868            ticking = true;
869            requestAnimationFrame(() => {
870                const currentScroll = window.scrollY;
871                const isScrollingDown = currentScroll > lastScroll && currentScroll > CONFIG.scrollHideThreshold;
872                const isBannerVisible = banner && currentScroll > getTitleTop() + CONFIG.bannerShowBuffer && isScrollingDown;
873
874                header.style.transform = isScrollingDown ? 'translateY(-100%)' : 'translateY(0)';
875
876                if (banner) banner.classList.toggle('is-visible', isBannerVisible);
877
878                if (progressBar) {
879                    if (isBannerVisible) {
880                        progressBar.style.top = banner.offsetHeight + 'px';
881                    } else if (!isScrollingDown) {
882                        progressBar.style.top = header.offsetHeight + 'px';
883                    } else {
884                        progressBar.style.top = '0';
885                    }
886                }
887
888                lastScroll = currentScroll;
889                ticking = false;
890            });
891        });
892    }
893})();
894</script>
894
895
896</body>
897</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.