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'é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'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 & 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'abonner"> 667 <span><span>S'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.