{"id":219,"date":"2026-06-02T13:16:11","date_gmt":"2026-06-02T13:16:11","guid":{"rendered":"https:\/\/genko.fr\/?page_id=219"},"modified":"2026-11-03T17:51:56","modified_gmt":"2026-11-03T17:51:56","slug":"univers","status":"publish","type":"page","link":"https:\/\/genko.fr\/en\/univers\/","title":{"rendered":"Our world"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"219\" class=\"elementor elementor-219\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1ef50aa e-con-full e-flex e-con e-parent\" data-id=\"1ef50aa\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-59697ab elementor-widget elementor-widget-html\" data-id=\"59697ab\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Fraunces:ital,opsz,wght,SOFT,WONK@0,9..144,100..900,0..100,0..1;1,9..144,100..900,0..100,0..1&display=swap\" rel=\"stylesheet\">\n<style>\n\/* ============ IDENTIT\u00c9 VISUELLE GENKO : tout se change ici ============ *\/\n#ih3 {\n  --ih3-fond:  #FFFFF0;               \/* cr\u00e8me : fond *\/\n  --ih3-encre: #111011;               \/* noir Genko *\/\n  --ih3-terra: #A9714B;               \/* terracotta : \u00ab Obstin\u00e9, \u00bb et \u00ab press\u00e9. \u00bb *\/\n  --ih3-crayon: #A9714B;              \/* le coup de crayon sous la phrase (terracotta) *\/\n  --ih3-pale:  rgba(17,16,17,.14);    \/* le mot clair \u00ab jamais \u00bb *\/\n  --ih3-font-titre: 'Fraunces', serif; \/* typo Genko des titres *\/\n}\n\/* ===================================================================== *\/\n#ih3 {\n  position: relative;\n  width: 100%;\n  height: 100vh;\n  min-height: 500px;\n  overflow: hidden;\n  font-family: 'Urbanist', sans-serif;\n  background: var(--ih3-fond);\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n}\n\n\/* le coup de crayon sous la phrase *\/\n#ih3-trait {\n  display: block; width: 105%; height: .32em; margin: .02em auto 0;\n  font-size: clamp(3.5rem, 9vw, 9rem);          \/* m\u00eame \u00e9chelle que la phrase *\/\n  overflow: visible; color: var(--ih3-crayon);\n}\n#ih3-trait path { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; }\n#ih3-trait .ih3-t1 { stroke-width: 4.5; }\n#ih3-trait .ih3-t2 { stroke-width: 2.8; opacity: .75; }\n#ih3.ih3-go #ih3-trait path { transition: stroke-dashoffset .7s cubic-bezier(.6,0,.3,1); }\n#ih3.ih3-go #ih3-trait .ih3-t1 { stroke-dashoffset: 0; transition-delay: 1.15s; }\n#ih3.ih3-go #ih3-trait .ih3-t2 { stroke-dashoffset: 0; transition-delay: 1.75s; transition-duration: .5s; }\n\n#ih3-words {\n  position: relative;\n  z-index: 2;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n}\n.ih3-word-row { display: flex; align-items: center; line-height: 1.0; overflow: hidden; padding: .04em .25em .38em; margin: 0 -.25em -.28em; }   \/* assez de place autour pour la virgule, le p et la queue du j *\/\n.ih3-word, .ih3-word-light {\n  font-size: clamp(3.5rem, 9vw, 9rem);\n  font-family: var(--ih3-font-titre);\n  font-variation-settings: \"SOFT\" 100, \"WONK\" 1, \"opsz\" 144;\n  letter-spacing: -.035em;\n  padding: 0 .1em;\n  cursor: default;\n  display: inline-block;\n}\n.ih3-word { font-weight: 800; color: var(--ih3-terra); }\n.ih3-word-light { font-weight: 300; font-style: italic; letter-spacing: -.02em; color: var(--ih3-pale); }\n\/* la petite phrase sous le trait, pour elles : elle arrive apr\u00e8s le b\u00e9ret *\/\n.ih3-sous { margin: .9em 0 0; font-family: var(--ih3-font-titre); font-style: italic; font-weight: 300; font-size: clamp(1.1rem, 1.8vw, 1.6rem); color: var(--ih3-terra); opacity: 0; transform: translateY(8px); transition: opacity .8s ease, transform .8s ease; }\n#ih3.ih3-go .ih3-sous { opacity: 1; transform: none; transition-delay: 3.2s; }\n\n\/* entr\u00e9e : les mots montent un par un *\/\n#ih3:not(.ih3-go) .ih3-word, #ih3:not(.ih3-go) .ih3-word-light { transform: translateY(105%); }\n#ih3.ih3-go .ih3-word, #ih3.ih3-go .ih3-word-light { animation: ih3-up 1s cubic-bezier(.2,.9,.2,1) both; animation-delay: calc(var(--i) * 110ms + 150ms); }\n@keyframes ih3-up { from { transform: translateY(105%); } to { transform: none; } }\n\n\n\/* le b\u00e9ret qui tombe et se pose sur le \u00ab O \u00bb *\/\n#ih3 .ih3-O { position: relative; display: inline; }\n#ih3-beret { position: absolute; left: 0; top: 0; width: 100px; z-index: 3; color: var(--ih3-beret, #111011); pointer-events: none; cursor: pointer; opacity: 0; transform-origin: 53% 70%; will-change: transform; }\n#ih3-beret svg { display: block; width: 100%; height: auto; overflow: visible; }\n#ih3-beret.ih3-pose { opacity: 1; pointer-events: auto; }\n#ih3-beret.ih3-pose svg { transition: transform .35s cubic-bezier(.34,1.56,.64,1); }\n#ih3-beret.ih3-pose:hover svg { transform: rotate(-8deg) translateY(-6%); }\n#ih3-beret.ih3-vole { position: fixed; z-index: 99999; }\n@media (prefers-reduced-motion: reduce) { #ih3-beret { opacity: 1; } }\n\n\/* \u2500\u2500 MOBILE \u2500\u2500 *\/\n@media (max-width: 768px) {\n  .ih3-word, .ih3-word-light, #ih3-trait { font-size: clamp(2.8rem, 15vw, 5rem); }\n  #ih3-trait .ih3-t1 { stroke-width: 8; }\n  #ih3-trait .ih3-t2 { stroke-width: 5; }   \/* traits un peu plus \u00e9pais : le dessin est plus \u00e9tir\u00e9 sur t\u00e9l\u00e9phone *\/\n}\n@media (prefers-reduced-motion: reduce) {\n  .ih3-word { transition: none; }\n  .ih3-sous { opacity: 1 !important; transform: none !important; transition: none !important; }\n  #ih3-trait path { stroke-dashoffset: 0 !important; transition: none !important; }\n  #ih3.ih3-go .ih3-word, #ih3.ih3-go .ih3-word-light { animation: none; }\n}\n<\/style>\n\n<section id=\"ih3\">\n\n\n  <div id=\"ih3-words\" data-no-translation>\n    <div class=\"ih3-word-row\">\n      <span class=\"ih3-word\"><span class=\"ih3-O\">O<\/span>bstin\u00e9,<\/span>\n    <\/div>\n    <div class=\"ih3-word-row\">\n      <span class=\"ih3-word-light\">jamais<\/span>\n      <span class=\"ih3-word\">press\u00e9.<\/span>\n    <\/div>\n    <!-- le coup de crayon : deux traits \u00e0 main lev\u00e9e, le second repasse un peu par-dessus -->\n    <svg id=\"ih3-trait\" viewBox=\"0 0 500 40\" preserveAspectRatio=\"none\" aria-hidden=\"true\">\n      <filter id=\"ih3-crayon-f\"><feTurbulence type=\"fractalNoise\" baseFrequency=\".8\" numOctaves=\"2\" seed=\"3\"\/><feDisplacementMap in=\"SourceGraphic\" scale=\"2.2\"\/><\/filter>\n      <g filter=\"url(#ih3-crayon-f)\">\n        <path class=\"ih3-t1\" pathLength=\"1\" d=\"M8,24 C70,13 150,15 230,14 C310,13 400,9 492,15\"\/>\n        <path class=\"ih3-t2\" pathLength=\"1\" d=\"M40,31 C120,24 230,25 330,23 C390,22 440,21 478,24\"\/>\n      <\/g>\n    <\/svg>\n    <p class=\"ih3-sous\" data-no-translation>(ou obstin\u00e9e\/press\u00e9e. \u00e7a marche aussi.)<\/p>\n  <\/div>\n\n  <span id=\"ih3-beret\" aria-hidden=\"true\"><svg viewBox=\"56.44 -73.66 593.78 397.06\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><g transform=\"rotate(12 353.33 124.88)\"><path fill=\"currentColor\" transform=\"matrix(-0.64730432,0.04709824,0.04709824,0.64730432,669.634204,-106.753402)\" d=\"M428.499,166.048C444.543,166.059 444.506,166.792 453.524,167.036C461.684,167.257 461.66,167.443 468.482,167.792C477.385,168.247 488.171,170.601 492.33,168.209C495.992,166.104 497.047,164.238 506.052,146.281C507.581,143.232 511.989,130.321 526.611,126.965C544.951,122.755 557.013,136.769 558.203,147.542C559.299,157.457 555.914,163.202 553.351,168.428C548.02,179.296 548.031,179.47 548.096,180.523C548.286,183.597 552.153,183.6 554.582,184.248C561.914,186.203 561.917,186.171 562.549,186.358C564.532,186.948 564.532,186.884 566.517,187.433C573.836,189.457 573.833,189.427 574.466,189.612C600.52,197.218 613.8,203.022 622.403,206.728C638.276,213.565 638.155,213.819 639.552,214.371C643.168,215.798 684.513,235.795 720.272,254.909C737.712,264.231 769.979,285.344 773.339,287.735C773.61,287.928 775.789,289.478 776.757,290.104C781.889,293.428 781.811,293.511 786.758,297.127C826.965,326.518 853.379,357.128 870.602,375.403C899.306,405.86 909.707,419.599 914.269,429.601C917.652,437.017 918.968,442.935 919.1,450.508C919.576,477.754 907.639,489.015 900.39,495.371C893.17,501.701 881.028,507.489 876.39,509.164C861.426,514.567 855.968,515.151 846.475,514.937C841.048,514.815 833.598,512.418 833.537,512.395C833.305,512.31 814.042,506.872 788.373,480.624C763.067,454.749 758.73,441.655 744.496,438.52C738.696,437.242 732.909,437.166 712.55,441.71C711.044,442.046 689.541,445.42 685.551,445.915C654.713,449.741 649.314,449.753 642.501,450.506C634.58,451.382 634.572,451.062 630.492,451.354C608.169,452.953 579.874,452.42 555.503,452.166C541.93,452.024 525.296,451.116 523.456,450.963C521.78,450.824 505.708,449.491 502.508,449.32C493.085,448.815 491.313,448.215 487.477,447.978C483.472,447.731 483.499,447.651 479.518,447.308C469.375,446.436 469.412,446.221 468.531,446.156C458.795,445.445 456.192,444.624 451.523,444.245C446.388,443.828 439.661,442.685 435.519,442.299C429.957,441.78 430.033,441.324 424.467,440.798C420.969,440.467 413.279,439.062 411.457,438.895C407.859,438.563 372.398,432.72 371.499,432.505C369.262,431.971 361.299,430.746 353.537,429.308C352.658,429.145 344.238,427.586 342.562,427.226C334.255,425.444 334.226,425.637 333.51,425.46C325.765,423.549 325.643,424.158 313.583,421.187C310.621,420.457 310.525,420.895 289.457,415.671C282.944,414.056 282.991,413.921 282.425,413.785C277.888,412.699 277.933,412.592 276.608,412.165C275.773,411.896 273.119,411.316 271.41,410.762C268.527,409.827 268.487,410.053 265.606,409.168C250.669,404.578 250.589,404.867 247.391,403.807C245.567,403.202 245.559,403.283 224.384,396.901C221.93,396.162 221.995,396.024 219.561,395.282C213.076,393.304 193.93,385.647 190.329,383.842C186.916,382.131 178.74,378.392 171.571,374.379C157.873,366.71 153.292,363.22 151.252,361.874C135.886,351.733 120.307,336.997 112.397,323.564C106.983,314.369 104.627,308.001 104.846,299.52C105.577,271.316 149.216,245.735 155.627,241.719C158.629,239.839 174.241,231.146 174.705,230.918C187.182,224.796 206.722,213.943 240.412,201.27C250.505,197.473 250.553,197.647 251.429,197.316C253.142,196.668 267.722,191.645 282.532,187.621C289.863,185.629 289.845,185.596 290.485,185.436C294.018,184.556 293.944,184.359 297.519,183.595C301.193,182.809 302.204,182.257 304.567,181.841C306.667,181.471 310.271,180.382 311.423,180.134C322.558,177.732 322.568,177.85 323.526,177.602C329.987,175.927 330.878,176.314 333.533,175.623C339.429,174.089 339.557,174.816 345.476,173.402C349.063,172.545 350.336,173.025 359.48,171.375C361.492,171.012 365.219,170.831 366.517,170.623C378.861,168.65 378.987,169.48 387.473,168.306C390.9,167.832 404.575,167.052 408.516,166.969C418.815,166.753 418.767,165.888 428.499,166.048Z\" fill=\"currentColor\"\/><\/g><\/svg><\/span>\n<\/section>\n\n<script>\n(function() {\n  var box = document.getElementById('ih3'); if (!box) return;\n\n  \/* ===== VERSION ANGLAISE =====\n     Sur la version anglaise du site, les mots sont remplac\u00e9s ici (le \u00ab O \u00bb reste, pour le b\u00e9ret). *\/\n  if (\/^en\/i.test(document.documentElement.lang || '')) {\n    var O0 = box.querySelector('.ih3-O'), mot1 = O0 && O0.parentNode;\n    if (mot1) { mot1.innerHTML = ''; mot1.appendChild(O0); mot1.appendChild(document.createTextNode('bstinate,')); }\n    var lumiere = box.querySelector('.ih3-word-light'); if (lumiere) lumiere.textContent = 'never';\n    var mots = box.querySelectorAll('.ih3-word'); if (mots[1]) mots[1].textContent = 'rushed.';\n    var sous = box.querySelector('.ih3-sous'); if (sous) sous.textContent = '(for her too.)';\n  }\n  [].forEach.call(box.querySelectorAll('.ih3-word, .ih3-word-light'), function(w, i){ w.style.setProperty('--i', i); });\n  \/* l'entr\u00e9e (mots puis b\u00e9ret) attend que l'\u00e9cran de chargement Genko soit parti *\/\n  var ATTENTE_BERET = 900;   \/* temps entre la fin du chargement et la chute du b\u00e9ret, en millisecondes *\/\n  function quandPret(fn){\n    var t0 = Date.now();\n    (function wait(){\n      var l = document.getElementById('genko-loader');\n      if (l && document.body.contains(l) && !l.classList.contains('genko-fin') && Date.now() - t0 < 9000) return setTimeout(wait, 120);\n      setTimeout(fn, l ? 450 : 0);   \/* laisse le fondu du chargement se terminer *\/\n    })();\n  }\n\n\n  \/* ===== Le b\u00e9ret sur le \u00ab O \u00bb =====\n     On mesure le dessin exact du O (pas sa bo\u00eete de texte) pour poser le b\u00e9ret pile au centre,\n     enfonc\u00e9 juste ce qu'il faut pour qu'il coiffe la lettre. *\/\n  var BERET_LARGEUR = .68;   \/* largeur du b\u00e9ret par rapport au O *\/\n  var BERET_ENFONCE = .17;    \/* jusqu'o\u00f9 il descend sur le O (0 = pos\u00e9 dessus, .3 = tr\u00e8s enfonc\u00e9) *\/\n  var BERET_PENCHE  = -2;     \/* inclinaison finale en degr\u00e9s *\/\n  var beret = document.getElementById('ih3-beret'), O = box.querySelector('.ih3-O');\n  var reduceB = window.matchMedia && matchMedia('(prefers-reduced-motion: reduce)').matches;\n  var cv = document.createElement('canvas').getContext('2d');\n  function placeBeret(){\n    if (!beret || !O) return null;\n    var cs = getComputedStyle(O);\n    cv.font = cs.fontStyle + ' ' + cs.fontWeight + ' ' + cs.fontSize + ' ' + cs.fontFamily;\n    var m = cv.measureText('O');\n    \/* ligne de base : petit rep\u00e8re invisible coll\u00e9 au O *\/\n    var mk = document.createElement('i'); mk.style.cssText = 'display:inline-block;width:0;height:0;vertical-align:baseline';\n    O.insertBefore(mk, O.firstChild);\n    var r = mk.getBoundingClientRect(), b = box.getBoundingClientRect(); mk.remove();\n    var x0 = r.left - b.left, base = r.bottom - b.top;\n    var inkL = x0 - (m.actualBoundingBoxLeft || 0), inkR = x0 + (m.actualBoundingBoxRight || m.width);\n    var inkT = base - (m.actualBoundingBoxAscent || parseFloat(cs.fontSize) * .7);\n    var ow = inkR - inkL, oh = base - inkT, cx = (inkL + inkR) \/ 2;\n    \/* rep\u00e8res du dessin du b\u00e9ret (redress\u00e9) : corps centr\u00e9 \u00e0 58 % de sa largeur, dessous \u00e0 70,5 % de sa hauteur, corps = 72,5 % de la largeur *\/\n    var W = ow * BERET_LARGEUR \/ .725, H = W * 397.06 \/ 593.78;\n    beret.style.width = W + 'px';\n    beret.style.left = (cx - .515 * W) + 'px';   \/* la tige du b\u00e9ret pile au-dessus du centre du O *\/\n    beret.style.top = (inkT + BERET_ENFONCE * oh - .705 * H) + 'px';\n    return { H: H, W: W };\n  }\n  function dropBeret(){\n    var d = placeBeret(); if (!d) return;\n    beret.classList.add('ih3-pose');\n    var end = 'rotate(' + BERET_PENCHE + 'deg)';\n    if (reduceB || !beret.animate) { beret.style.transform = end; return; }\n    var fall = Math.max(box.getBoundingClientRect().height * .55, 260);\n    beret.animate([\n      { transform: 'translate(-10px,' + (-fall) + 'px) rotate(-28deg)', opacity: 0, offset: 0 },\n      { opacity: 1, offset: .12 },\n      { transform: 'translate(0,0) rotate(6deg)', offset: .52, easing: 'cubic-bezier(.3,0,.6,1)' },\n      { transform: 'translate(0,0) scale(1.1,.86) rotate(2deg)', offset: .6, easing: 'ease-out' },\n      { transform: 'translate(0,' + (-d.H * .22) + 'px) scale(.97,1.04) rotate(-7deg)', offset: .74, easing: 'ease-in' },\n      { transform: 'translate(0,0) scale(1.04,.95) rotate(-2deg)', offset: .86, easing: 'ease-out' },\n      { transform: end, offset: 1 }\n    ], { duration: 1500, easing: 'linear', fill: 'both' });\n  }\n\n  \/* ===== Petit secret : un clic sur le b\u00e9ret ===== \n     il saute, retombe en tournoyant jusqu'en bas de l'\u00e9cran et dispara\u00eet\u2026 puis revient se poser sur le O. *\/\n  var RETOUR_BERET = 3500;   \/* temps avant que le b\u00e9ret revienne, en millisecondes (0 = il ne revient pas) *\/\n  var enVol = false;\n  beret.addEventListener('click', function(){\n    if (enVol || !beret.animate || reduceB) return; enVol = true;\n    var r = beret.getBoundingClientRect(), w = beret.style.width;\n    beret.getAnimations && beret.getAnimations().forEach(function(a){ a.cancel(); });\n    document.body.appendChild(beret);                       \/* il quitte le bloc pour pouvoir traverser tout l'\u00e9cran *\/\n    beret.classList.add('ih3-vole');\n    beret.style.left = r.left + 'px'; beret.style.top = r.top + 'px'; beret.style.width = w; beret.style.transform = '';\n    var bas = window.innerHeight - r.top + 80, cote = (Math.random() < .5 ? -1 : 1) * (40 + Math.random() * 80);\n    beret.animate([\n      { transform: 'translate(0,0) rotate(-2deg)', easing: 'cubic-bezier(.2,.7,.4,1)' },\n      { transform: 'translate(' + cote * .25 + 'px,-140px) rotate(' + (cote > 0 ? 160 : -160) + 'deg) scale(1.05)', offset: .32, easing: 'cubic-bezier(.5,0,.9,.6)' },\n      { transform: 'translate(' + cote + 'px,' + bas + 'px) rotate(' + (cote > 0 ? 540 : -540) + 'deg) scale(.95)' }\n    ], { duration: 1700, fill: 'forwards' }).onfinish = function(){\n      beret.classList.remove('ih3-vole', 'ih3-pose');\n      beret.getAnimations().forEach(function(a){ a.cancel(); });\n      box.appendChild(beret);\n      if (RETOUR_BERET) setTimeout(function(){ enVol = false; dropBeret(); }, RETOUR_BERET);\n    };\n  });\n\n  \/* ===== Petit secret : taper \u00ab genko \u00bb au clavier fait pleuvoir des b\u00e9rets ===== *\/\n  var MOT_SECRET = 'genko', tape = '';\n  document.addEventListener('keydown', function(e){\n    var t = e.target; if (t && (t.isContentEditable || \/^(input|textarea|select)$\/i.test(t.tagName))) return;\n    if (!e.key || e.key.length !== 1) return;\n    tape = (tape + e.key.toLowerCase()).slice(-MOT_SECRET.length);\n    if (tape === MOT_SECRET) { tape = ''; pluieDeBerets(); }\n  });\n  function pluieDeBerets(){\n    if (reduceB || !document.body.animate) return;\n    var modele = beret.querySelector('svg'); if (!modele) return;\n    var couleurs = ['#111011', '#A9714B', '#4A5D4E'], n = window.innerWidth < 600 ? 18 : 32;\n    for (var i = 0; i < n; i++) (function(i){\n      var b = document.createElement('span'), taille = 26 + Math.random() * 48;\n      b.setAttribute('aria-hidden', 'true');\n      b.style.cssText = 'position:fixed;top:0;left:' + (Math.random() * 100) + 'vw;width:' + taille + 'px;z-index:99999;pointer-events:none;color:' + couleurs[i % 3];\n      b.appendChild(modele.cloneNode(true)); document.body.appendChild(b);\n      var bas = window.innerHeight + 120, tour = (Math.random() < .5 ? -1 : 1) * (180 + Math.random() * 360), ecart = (Math.random() - .5) * 140;\n      b.animate([\n        { transform: 'translate(0,-120px) rotate(0)' },\n        { transform: 'translate(' + ecart * .5 + 'px,' + bas * .45 + 'px) rotate(' + tour * .45 + 'deg)', offset: .45 },\n        { transform: 'translate(' + ecart + 'px,' + bas + 'px) rotate(' + tour + 'deg)' }\n      ], { duration: 2200 + Math.random() * 1800, delay: Math.random() * 1400, easing: 'cubic-bezier(.45,0,.75,1)', fill: 'both' }).onfinish = function(){ b.remove(); };\n    })(i);\n  }\n  var ready = (document.fonts && document.fonts.ready) ? document.fonts.ready : Promise.resolve();\n  ready.then(function(){ quandPret(function(){\n    box.classList.add('ih3-go');                                   \/* les mots montent *\/\n    setTimeout(dropBeret, reduceB ? 0 : 1250 + ATTENTE_BERET);     \/* puis le b\u00e9ret tombe *\/\n  }); });\n  window.addEventListener('resize', function(){ if (beret.classList.contains('ih3-pose')) placeBeret(); });\n\n\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3dfe7f0 elementor-widget elementor-widget-html\" data-id=\"3dfe7f0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Urbanist:ital,wght@0,300;0,400;0,500;1,300&family=Bricolage+Grotesque:opsz,wght@12..96,400..800&family=Fraunces:ital,opsz,wght,SOFT,WONK@0,9..144,100..900,0..100,0..1;1,9..144,100..900,0..100,0..1&display=swap\" rel=\"stylesheet\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Yuji+Syuku&text=%E9%A0%91%E5%9B%BA&display=swap\" rel=\"stylesheet\">\n<style>\n\/* ============ IDENTIT\u00c9 VISUELLE GENKO : tout se change ici ============ *\/\n#genko-parallax {\n  --gp-photo:  url('https:\/\/genko.fr\/wp-content\/uploads\/2026\/05\/IMG_2030-scaled.png'); \/* LA PHOTO DE FOND : la rue de Tokyo *\/\n  --gp-cadrage: center center;   \/* partie de la photo \u00e0 garder visible (center top, center bottom\u2026) *\/\n  --gp-voile:  .42;       \/* assombrit la photo pour que le texte se lise (0 = rien, .6 = tr\u00e8s sombre) *\/\n  --gp-fond:   #4A5D4E;   \/* vert : couleur pendant le chargement de la photo *\/\n  --gp-creme:  #FFFFF0;   \/* textes et bouton *\/\n  --gp-terra:  #A9714B;   \/* survol du bouton, petit titre *\/\n  --gp-encre:  #111011;   \/* texte du bouton *\/\n\n  \/* Les typos Genko *\/\n  --gp-font-titre: 'Fraunces', serif;                 \/* grande phrase *\/\n  --gp-font-label: 'Bricolage Grotesque', sans-serif; \/* petit titre, bouton *\/\n  --gp-font-texte: 'Urbanist', sans-serif;            \/* paragraphe *\/\n}\n\/* ===================================================================== *\/\n#genko-parallax {\n  position: relative;\n  height: 100vh;\n  min-height: 560px;\n  overflow: hidden;\n  font-family: 'Urbanist', sans-serif;\n  background: var(--gp-fond);\n}\n#genko-parallax-bg {\n  position: absolute;\n  top: -20%; left: 0; right: 0;\n  height: 140%;\n  background: var(--gp-photo) var(--gp-cadrage)\/cover no-repeat;\n  will-change: transform;\n}\n#genko-parallax-overlay {\n  position: absolute; inset: 0;\n  background:\n    radial-gradient(ellipse at 50% 45%, transparent 35%, rgba(17,16,17,.3)),\n    rgba(17,16,17, var(--gp-voile));\n  z-index: 1;\n}\n#genko-parallax-title {\n  position: absolute; top: 50%; left: 50%;\n  transform: translate(-50%, -50%);\n  text-align: center; z-index: 2; width: 90%;\n}\n#genko-parallax-eye {\n  display: inline-flex; align-items: center; gap: 14px;\n  font-family: var(--gp-font-label);\n  font-size: .75rem; font-weight: 800; letter-spacing: .3em; text-transform: uppercase;\n  color: var(--gp-creme); opacity: .85; margin-bottom: 1.6rem;\n}\n#genko-parallax-eye b { font-size: 1.5rem; letter-spacing: .12em; font-weight: 500; }\n#genko-parallax-eye i { display: block; width: 34px; height: 1px; background: currentColor; }\n#genko-parallax-title .gp-l {\n  display: block;\n  font-family: var(--gp-font-titre);\n  font-variation-settings: \"SOFT\" 100, \"WONK\" 1, \"opsz\" 144;\n  font-size: clamp(3rem, 7.5vw, 7.5rem);\n  color: var(--gp-creme); letter-spacing: -.035em; line-height: 1.02;\n  text-shadow: 0 2px 40px rgba(17,16,17,.35);   \/* aide \u00e0 lire sur la photo *\/\n}\n#genko-parallax-title .gp-l span { display: inline-block; padding-bottom: .08em; }\n#genko-parallax-title .gp-b { font-weight: 800; font-size: clamp(5rem, 13vw, 12rem); line-height: .95; }\n#genko-parallax-title .gp-t { font-size: clamp(2rem, 4.2vw, 4.2rem); }\n#genko-parallax-title .gp-t { font-weight: 300; font-style: italic; letter-spacing: -.02em; opacity: .9; padding: 0 .14em .08em .04em; }\n#genko-parallax-title, #genko-parallax-title .gp-l, #genko-parallax-title .gp-l span { overflow: visible !important; }\n#genko-parallax-bottom {\n  position: absolute; bottom: 3.5rem; right: 3.5rem;\n  max-width: 360px; z-index: 2;\n  display: flex; flex-direction: column; align-items: flex-end; gap: 1.5rem;\n}\n#genko-parallax-bottom p {\n  margin: 0; font-family: var(--gp-font-texte); font-size: 1.02rem; line-height: 1.7;\n  text-shadow: 0 1px 20px rgba(17,16,17,.45);\n  color: var(--gp-creme); opacity: .88; font-weight: 300; text-align: right;\n}\n#genko-parallax-bottom a {\n  background: var(--gp-creme); color: var(--gp-encre);\n  font-family: var(--gp-font-label);\n  font-size: 11px; letter-spacing: .22em; text-transform: uppercase; font-weight: 800;\n  display: inline-flex; align-items: center; gap: 10px; padding: 16px 22px 16px 30px; border-radius: 100px; text-decoration: none;\n  transition: background .3s, color .3s;\n}\n#genko-parallax-bottom a:hover { background: var(--gp-terra); color: var(--gp-creme); }\n#genko-parallax-bottom .gp-beret { width: 24px; height: 24px; display: inline-flex; transition: transform .4s cubic-bezier(.34,1.56,.64,1); }\n#genko-parallax-bottom .gp-beret img { width: 24px !important; height: 24px !important; max-width: none !important; object-fit: contain; filter: brightness(0); transition: filter .3s; }\n#genko-parallax-bottom a:hover .gp-beret { transform: rotate(20deg) scale(1.15); }\n#genko-parallax-bottom a:hover .gp-beret img { filter: brightness(0) invert(1); }\n\n\/* apparition au d\u00e9filement *\/\n#genko-parallax .gp-in { opacity: 0; transform: translateY(24px); transition: opacity .9s ease, transform 1.1s cubic-bezier(.2,.8,.2,1); transition-delay: var(--d, 0s); }\n#genko-parallax.gp-vu .gp-in { opacity: 1; transform: none; }\n\n\n\/* \u9811\u56fa qui se tracent trait par trait, au pinceau *\/\n#genko-parallax-kanji { -webkit-user-select: none; user-select: none; display: flex; justify-content: center; align-items: flex-end; gap: .1rem; margin-bottom: 1.2rem; }\n#genko-parallax-kanji .gk-k { width: clamp(2.8rem, 4.6vw, 4.2rem); height: auto; overflow: visible; filter: drop-shadow(0 2px 14px rgba(17,16,17,.35)); }\n#genko-parallax-kanji .gk-t { font-family: 'Yuji Syuku', 'Hiragino Mincho ProN', 'Yu Mincho', serif; fill: var(--gp-creme); }\n#genko-parallax-kanji .gk-plein { opacity: 0; transition: opacity .5s ease; }\n#genko-parallax-kanji.gk-fini .gk-plein { opacity: 1; }\n#genko-parallax-kanji .gk-traits path { stroke-dasharray: 1 1; stroke-dashoffset: 1; stroke-opacity: 0; }\n@media (max-width: 768px) {\n  #genko-parallax-title { top: 40%; }\n  #genko-parallax-title .gp-t { font-size: clamp(1.8rem, 9vw, 2.6rem); }\n  #genko-parallax-title .gp-b { font-size: clamp(5rem, 30vw, 8rem); }\n  #genko-parallax-kanji { margin-bottom: 1rem; }\n  #genko-parallax-bottom { left: 1.5rem; right: 1.5rem; bottom: 2.2rem; max-width: none; align-items: center; }\n  #genko-parallax-bottom p { text-align: center; }\n}\n@media (prefers-reduced-motion: reduce) {\n  #genko-parallax .gp-in { opacity: 1; transform: none; transition: none; }\n}\n<\/style>\n\n<section id=\"genko-parallax\" data-no-translation>\n  <div id=\"genko-parallax-bg\" role=\"img\" aria-label=\"Rue de Tokyo la nuit, enseignes lumineuses en japonais\"><\/div>\n  <div id=\"genko-parallax-overlay\" aria-hidden=\"true\"><\/div>\n  <div id=\"genko-parallax-title\">\n    <!-- Trac\u00e9s des traits : dessin\u00e9s pour Genko. Police Yuji Syuku (licence SIL OFL, aucun cr\u00e9dit requis). -->\n    <div id=\"genko-parallax-kanji\" aria-hidden=\"true\"><svg class=\"gk-k\" viewBox=\"0 0 109 109\"><mask id=\"gk-m1\" maskUnits=\"userSpaceOnUse\" x=\"-20\" y=\"-20\" width=\"149\" height=\"149\"><g class=\"gk-traits\" fill=\"none\" stroke=\"#fff\" stroke-width=\"19\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path pathLength=\"1\" d=\"M18,24 L44,21\"\/><path pathLength=\"1\" d=\"M12,44 L52,40\"\/><path pathLength=\"1\" d=\"M26,46 C25,66 21,82 12,94\"\/><path pathLength=\"1\" d=\"M37,45 L37,86 C37,92 42,91 50,78\"\/><path pathLength=\"1\" d=\"M56,20 L97,16\"\/><path pathLength=\"1\" d=\"M74,22 L67,33\"\/><path pathLength=\"1\" d=\"M60,34 L60,78\"\/><path pathLength=\"1\" d=\"M61,35 L88,32 L89,78\"\/><path pathLength=\"1\" d=\"M62,47 L88,46\"\/><path pathLength=\"1\" d=\"M62,60 L88,59\"\/><path pathLength=\"1\" d=\"M62,75 L88,74\"\/><path pathLength=\"1\" d=\"M67,82 C63,88 57,92 51,95\"\/><path pathLength=\"1\" d=\"M83,82 L95,95\"\/><\/g><\/mask><g filter=\"url(#gk-encre)\"><text class=\"gk-t\" x=\"54.5\" y=\"91\" font-size=\"98\" text-anchor=\"middle\" mask=\"url(#gk-m1)\">\u9811<\/text><text class=\"gk-t gk-plein\" x=\"54.5\" y=\"91\" font-size=\"98\" text-anchor=\"middle\">\u9811<\/text><\/g><\/svg><svg class=\"gk-k\" viewBox=\"0 0 109 109\"><mask id=\"gk-m2\" maskUnits=\"userSpaceOnUse\" x=\"-20\" y=\"-20\" width=\"149\" height=\"149\"><g class=\"gk-traits\" fill=\"none\" stroke=\"#fff\" stroke-width=\"19\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path pathLength=\"1\" d=\"M20,17 L21,94\"\/><path pathLength=\"1\" d=\"M22,20 L87,16 L88,94\"\/><path pathLength=\"1\" d=\"M30,40 L77,36\"\/><path pathLength=\"1\" d=\"M53,23 L54,56\"\/><path pathLength=\"1\" d=\"M38,57 L41,79\"\/><path pathLength=\"1\" d=\"M39,59 L68,56 L66,73\"\/><path pathLength=\"1\" d=\"M42,76 L69,74\"\/><path pathLength=\"1\" d=\"M23,91 L89,88\"\/><\/g><\/mask><g filter=\"url(#gk-encre)\"><text class=\"gk-t\" x=\"54.5\" y=\"91\" font-size=\"98\" text-anchor=\"middle\" mask=\"url(#gk-m2)\">\u56fa<\/text><text class=\"gk-t gk-plein\" x=\"54.5\" y=\"91\" font-size=\"98\" text-anchor=\"middle\">\u56fa<\/text><\/g><\/svg><svg width=\"0\" height=\"0\" style=\"position:absolute\"><filter id=\"gk-encre\"><feTurbulence type=\"fractalNoise\" baseFrequency=\".9\" numOctaves=\"2\" seed=\"7\"\/><feDisplacementMap in=\"SourceGraphic\" scale=\"1.6\"\/><\/filter><\/svg><\/div>\n    <span class=\"gp-l gp-in\" style=\"--d:1.15s\"><span class=\"gp-t\" data-en=\"Ganko, Japanese for:\">Ganko, en japonais :<\/span><\/span>\n    <span class=\"gp-l gp-in\" style=\"--d:1.3s\"><span class=\"gp-b\" data-en=\"stubborn.\">t\u00eatu.<\/span><\/span>\n  <\/div>\n  <div id=\"genko-parallax-bottom\">\n    <p class=\"gp-in\" style=\"--d:1.5s\" data-en=\"We changed one letter, not the idea. No shortcuts on the cotton, the stitching, the finishing. A piece drops when it\u2019s ready. Not before.\">On a chang\u00e9 une lettre, pas l'id\u00e9e. On ne l\u00e2che rien sur le coton, les coutures, les finitions. Une pi\u00e8ce sort quand elle est pr\u00eate. Pas avant.<\/p>\n    <div class=\"gp-in\" style=\"--d:1.65s\"><a class=\"genko-bouton\" href=\"https:\/\/genko.fr\/boutique\/\" aria-label=\"Voir les pi\u00e8ces Genko dans la boutique\"><span data-en=\"Shop the pieces\">Voir les pi\u00e8ces<\/span><span class=\"gp-beret\"><img decoding=\"async\" src=\"https:\/\/genko.fr\/wp-content\/uploads\/2026\/10\/beretgenko.png\" alt=\"\"><\/span><\/a><\/div>\n  <\/div>\n<\/section>\n\n<script>\n\/* ===== VERSION ANGLAISE =====\n   Sur la version anglaise du site, chaque texte est remplac\u00e9 par son attribut data-en (\u00e9crit juste \u00e0 c\u00f4t\u00e9 du fran\u00e7ais). *\/\n(function(){\n  if (!\/^en\/i.test(document.documentElement.lang || '')) return;\n  document.querySelectorAll('#genko-parallax [data-en]').forEach(function(el){ el.innerHTML = el.getAttribute('data-en'); });\n})();\n(function() {\n  var bg  = document.getElementById('genko-parallax-bg');\n  var sec = document.getElementById('genko-parallax');\n  if (!bg || !sec) return;\n  var reduce = window.matchMedia && matchMedia('(prefers-reduced-motion: reduce)').matches;\n\n  \/* ===== \u9811\u56fa trait par trait =====\n     Chaque trait du pinceau d\u00e9couvre le caract\u00e8re dans l'ordre d'\u00e9criture japonais. *\/\n  var kanji = document.getElementById('genko-parallax-kanji'), kanjiFait = false;\n  var reduceK = window.matchMedia && matchMedia('(prefers-reduced-motion: reduce)').matches;\n\n  function traceKanji(sansPerso){\n    if (kanjiFait || !kanji) return; kanjiFait = true;\n    var traits = [].slice.call(kanji.querySelectorAll('.gk-traits path'));\n    if (reduceK || !traits.length || !traits[0].animate) { traits.forEach(function(t){ t.style.strokeDashoffset = 0; t.style.strokeOpacity = 1; }); kanji.classList.add('gk-fini'); return; }\n    var t0 = 300;\n    traits.forEach(function(t, i){\n      var len = 40; try { len = t.getTotalLength(); } catch (e) {}\n      var d = Math.max(150, Math.min(420, len * 4.2));          \/* un trait long prend plus de temps *\/\n      if (i === 13) t0 += 260;                                   \/* petite pause entre \u9811 et \u56fa *\/\n      t.animate([{ strokeDashoffset: 1, strokeOpacity: 0, offset: 0 }, { strokeDashoffset: .995, strokeOpacity: 1, offset: .02 }, { strokeDashoffset: 0, strokeOpacity: 1, offset: 1 }], { duration: d, delay: t0, easing: 'cubic-bezier(.5,0,.2,1)', fill: 'both' });\n      t0 += d + 70;\n    });\n    setTimeout(function(){ kanji.classList.add('gk-fini'); }, t0 + 100);\n  }\n\n  \/* ===== Petit secret n\u00b01 : double-clic sur \u9811\u56fa =====\n     l'encre s\u00e8che et s'efface, puis le pinceau retrace les deux caract\u00e8res. *\/\n  var efface = false;\n  if (kanji) kanji.addEventListener('dblclick', function(e){\n    if (!kanjiFait || efface || reduceK || !kanji.animate) return;\n    e.preventDefault(); efface = true;\n    var ks = kanji.querySelectorAll('.gk-k');\n    [].forEach.call(ks, function(k, i){\n      k.animate([{ opacity: 1, filter: 'blur(0)' }, { opacity: 0, filter: 'blur(5px)' }], { duration: 700, delay: i * 120, easing: 'ease-in', fill: 'forwards' });\n    });\n    setTimeout(function(){\n      \/* on remet tout \u00e0 z\u00e9ro pendant que les caract\u00e8res sont encore invisibles, sans fondu *\/\n      var pleins = kanji.querySelectorAll('.gk-plein');\n      [].forEach.call(pleins, function(t){ t.style.transition = 'none'; });\n      kanji.classList.remove('gk-fini');\n      [].forEach.call(kanji.querySelectorAll('.gk-traits path'), function(t){ t.getAnimations().forEach(function(a){ a.cancel(); }); });\n      kanji.getBoundingClientRect();\n      [].forEach.call(ks, function(k){ k.getAnimations().forEach(function(a){ a.cancel(); }); });\n      requestAnimationFrame(function(){ [].forEach.call(pleins, function(t){ t.style.transition = ''; }); });\n      kanjiFait = false; efface = false; traceKanji(true);\n    }, 950);\n  });\n\n  var raf = 0;\n\n  function tick() {\n    raf = 0;\n    var rect = sec.getBoundingClientRect(), winH = window.innerHeight;\n    if (rect.top < winH * .75) { sec.classList.add('gp-vu'); traceKanji(); }\n    if (reduce || rect.bottom < 0 || rect.top > winH) return;\n    var p = 1 - (rect.top + sec.offsetHeight) \/ (winH + sec.offsetHeight);\n    bg.style.transform = 'translateY(' + ((p - .5) * 20) + '%)';\n  }\n  function ask(){ if (!raf) raf = requestAnimationFrame(tick); }\n\n  window.addEventListener('scroll', ask, { passive: true });\n  window.addEventListener('resize', ask);\n  tick();\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ad6f618 elementor-widget elementor-widget-html\" data-id=\"ad6f618\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Fraunces:ital,opsz,wght,SOFT,WONK@0,9..144,100..900,0..100,0..1;1,9..144,100..900,0..100,0..1&display=swap\" rel=\"stylesheet\">\n<style>\n\/* ============ IDENTIT\u00c9 VISUELLE GENKO : tout se change ici ============ *\/\n#genko-scrolltext-wrap {\n  --gs-fond:  #FFFFF0;   \/* cr\u00e8me : fond *\/\n  --gs-encre: #111011;   \/* noir Genko : texte *\/\n  --gs-terra: #A9714B;   \/* terracotta : points et mot en couleur *\/\n  --gs-vert:  #4A5D4E;   \/* vert : points *\/\n  --gs-font-titre: 'Fraunces', serif;   \/* typo Genko des titres *\/\n}\n\/* ===================================================================== *\/\n#genko-scrolltext-wrap {\n  position: relative;\n  height: 250vh;\n  background: var(--gs-fond);\n}\n#genko-scrolltext-sticky {\n  position: sticky;\n  top: 0;\n  height: 100vh;\n  display: flex;\n  align-items: center;\n  overflow: hidden;\n}\n#genko-scrolltext {\n  white-space: nowrap;\n  font-family: var(--gs-font-titre);\n  font-variation-settings: \"SOFT\" 100, \"WONK\" 1, \"opsz\" 144;\n  font-size: clamp(3rem, 10vw, 11rem);\n  font-weight: 800;\n  color: var(--gs-encre);\n  letter-spacing: -.035em;\n  line-height: 1.1;\n  padding: .05em 0 .15em;\n  will-change: transform;\n  user-select: none;\n}\n#genko-scrolltext .gs-k { color: var(--gs-terra); }\n#genko-scrolltext .gs-t { font-weight: 300; font-style: italic; letter-spacing: -.02em; }\n#genko-scrolltext .gs-dot {\n  display: inline-block;\n  width: .22em; height: .22em;\n  background: var(--gs-terra);\n  border-radius: 50%;\n  margin: 0 .4em;\n  vertical-align: middle;\n  transform: translateY(-.1em) scale(var(--s, 1));\n  transition: transform .5s cubic-bezier(.34,1.56,.64,1);\n}\n#genko-scrolltext .gs-dot.gs-v { background: var(--gs-vert); }\n@media (max-width: 768px) {\n  #genko-scrolltext-wrap { height: 200vh; }\n  #genko-scrolltext { font-size: clamp(3.5rem, 20vw, 6rem); }\n}\n<\/style>\n\n<div id=\"genko-scrolltext-wrap\" data-no-translation>\n  <div id=\"genko-scrolltext-sticky\">\n    <div id=\"genko-scrolltext\">\n      <span data-en=\"organic\">coton<\/span> <span class=\"gs-t\" data-en=\"cotton\">bio<\/span> <span class=\"gs-dot\"><\/span> <span data-en=\"premium\">textile<\/span> <span class=\"gs-t\" data-en=\"fabric\">premium<\/span> <span class=\"gs-dot gs-v\"><\/span> <span data-en=\"built to\">fait pour<\/span> <span class=\"gs-k\" data-en=\"last\">durer<\/span>\n    <\/div>\n  <\/div>\n<\/div>\n\n<script>\n\/* ===== VERSION ANGLAISE =====\n   Sur la version anglaise du site, chaque texte est remplac\u00e9 par son attribut data-en (\u00e9crit juste \u00e0 c\u00f4t\u00e9 du fran\u00e7ais). *\/\n(function(){\n  if (!\/^en\/i.test(document.documentElement.lang || '')) return;\n  document.querySelectorAll('#genko-scrolltext-wrap [data-en]').forEach(function(el){ el.innerHTML = el.getAttribute('data-en'); });\n})();\n<\/script>\n<script>\n(function() {\n  var wrap = document.getElementById('genko-scrolltext-wrap');\n  var line = document.getElementById('genko-scrolltext');\n  if (!wrap || !line) return;\n  var dots = line.querySelectorAll('.gs-dot'), raf = 0;\n\n  function tick() {\n    raf = 0;\n    var top      = wrap.getBoundingClientRect().top + window.scrollY;\n    var winH     = window.innerHeight;\n    var total    = wrap.offsetHeight - winH;\n    if (total <= 0) return;\n    var raw  = Math.min(Math.max((window.scrollY - top) \/ total, 0), 1);\n    \/* traverse l'\u00e9cran de droite \u00e0 gauche : chaque mot passe en entier, rien ne reste coup\u00e9 *\/\n    var w = line.scrollWidth, W = window.innerWidth, pad = W * .08;\n    var x = W - (w + pad) * raw;   \/* entre par la droite, s'arr\u00eate quand \u00ab fait pour durer \u00bb est entier \u00e0 l'\u00e9cran *\/\n    if (w <= W - 2 * pad) x = (W - w) \/ 2 + (1 - raw) * W * .3;\n    line.style.transform = 'translateX(' + x + 'px)';\n    \/* les points grossissent un instant quand ils passent au centre de l'\u00e9cran *\/\n    [].forEach.call(dots, function(d){\n      var r = d.getBoundingClientRect(), c = Math.abs(r.left + r.width \/ 2 - window.innerWidth \/ 2) \/ window.innerWidth;\n      d.style.setProperty('--s', c < .12 ? 1.6 : 1);\n    });\n  }\n  function ask(){ if (!raf) raf = requestAnimationFrame(tick); }\n\n  window.addEventListener('scroll', ask, { passive: true });\n  window.addEventListener('resize', ask);\n  tick();\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8b1d446 elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"8b1d446\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Urbanist:wght@300;400;500&family=Bricolage+Grotesque:opsz,wght@12..96,400..800&family=Fraunces:ital,opsz,wght,SOFT,WONK@0,9..144,100..900,0..100,0..1;1,9..144,100..900,0..100,0..1&display=swap\" rel=\"stylesheet\">\n<style>\n\/* ============ IDENTIT\u00c9 VISUELLE GENKO : tout se change ici ============ *\/\n#gd-wrap {\n  --gd-fond:   #FFFFF0;               \/* cr\u00e8me : fond du bloc, comme le reste de la page *\/\n  --gd-vert:   #4A5D4E;               \/* vert : titre *\/\n  --gd-terra:  #A9714B;               \/* terracotta : petit titre, scotch *\/\n  --gd-texte:  rgba(17,16,17,.68);    \/* paragraphe *\/\n  --gd-cadre:  #FFFFFF;               \/* bord blanc des photos *\/\n\n  --gd-font-titre: 'Fraunces', serif;\n  --gd-font-label: 'Bricolage Grotesque', sans-serif;\n  --gd-font-texte: 'Urbanist', sans-serif;\n}\n\/* ===================================================================== *\/\n#gd-wrap {\n  position: relative;\n  min-height: 100vh;\n  background: var(--gd-fond);\n  overflow: hidden;\n  display: grid;\n  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);\n  align-items: center;\n  gap: 40px;\n  padding: 90px 6vw;\n  box-sizing: border-box;\n}\n#gd-wrap *, #gd-wrap *::before, #gd-wrap *::after { box-sizing: border-box; }\n\n\/* Texte *\/\n.gd-txt { position: relative; z-index: 5; max-width: 470px; }\n.gd-label {\n  display: block; margin-bottom: 22px;\n  font-family: var(--gd-font-label); font-size: 12px; font-weight: 800;\n  letter-spacing: .26em; text-transform: uppercase; color: var(--gd-terra);\n}\n.gd-titre {\n  margin: 0 0 26px; padding-bottom: .08em;\n  font-family: var(--gd-font-titre);\n  font-variation-settings: \"SOFT\" 100, \"WONK\" 1, \"opsz\" 144;\n  font-size: clamp(44px, 5.2vw, 80px); font-weight: 800;\n  line-height: 1; letter-spacing: -.035em; color: var(--gd-vert);\n}\n.gd-titre em { display: block; font-style: italic; font-weight: 300; letter-spacing: -.02em; }\n.gd-p {\n  margin: 0; font-family: var(--gd-font-texte);\n  font-size: 18px; line-height: 1.7; color: var(--gd-texte);\n}\n\n\/* Photos pos\u00e9es en vrac *\/\n.gd-photos { position: relative; height: min(78vh, 760px); min-height: 520px; }\n.gd-ph {\n  position: absolute;\n  background: var(--gd-cadre);\n  padding: 12px;\n  box-shadow: 0 30px 50px -30px rgba(17,16,17,.55);\n  transform: translateY(var(--y, 0)) rotate(var(--r, 0deg));\n  transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s;\n}\n.gd-ph img { display: block; width: 100%; height: 100%; object-fit: cover; }\n.gd-ph i {   \/* le petit scotch *\/\n  position: absolute; top: -12px; left: 50%;\n  width: 88px; height: 26px; transform: translateX(-50%) rotate(-4deg);\n  background: var(--gd-terra); opacity: .55;\n}\n.gd-ph:hover { transform: translateY(calc(var(--y, 0px) - 8px)) rotate(0deg); box-shadow: 0 40px 60px -30px rgba(17,16,17,.6); z-index: 9; }\n\n\/* place et inclinaison de chaque photo (en % de la zone photos) *\/\n.gd-ph:nth-child(1) { left: 0;   top: 6%;  width: 46%; height: 56%; --r: -5deg; z-index: 1; }\n.gd-ph:nth-child(2) { left: 50%; top: 0;   width: 40%; height: 48%; --r: 4deg;  z-index: 2; }\n.gd-ph:nth-child(3) { left: 10%; top: 58%; width: 38%; height: 40%; --r: 5deg;  z-index: 3; }\n.gd-ph:nth-child(4) { left: 56%; top: 52%; width: 36%; height: 44%; --r: -3deg; z-index: 4; }\n\n\/* apparition : le texte monte, puis les photos tombent une \u00e0 une *\/\n#gd-wrap .gd-in { opacity: 0; transform: translateY(24px); transition: opacity .9s ease, transform 1s cubic-bezier(.2,.8,.2,1); transition-delay: var(--d, 0s); }\n#gd-wrap.gd-vu .gd-in { opacity: 1; transform: none; }\n#gd-wrap .gd-ph { opacity: 0; --y: -60px; }\n#gd-wrap.gd-vu .gd-ph { opacity: 1; --y: 0px; transition: transform .9s cubic-bezier(.34,1.4,.64,1), opacity .5s ease, box-shadow .5s; }\n#gd-wrap.gd-vu .gd-ph:nth-child(1) { transition-delay: .25s; }\n#gd-wrap.gd-vu .gd-ph:nth-child(2) { transition-delay: .45s; }\n#gd-wrap.gd-vu .gd-ph:nth-child(3) { transition-delay: .65s; }\n#gd-wrap.gd-vu .gd-ph:nth-child(4) { transition-delay: .85s; }\n#gd-wrap.gd-fini .gd-ph { transition-delay: 0s !important; }\n\n\/* indice \u00ab glisse \u00bb : seulement sur t\u00e9l\u00e9phone *\/\n.gd-hint { display: none; }\n\n\/* \u2500\u2500 TABLETTE \/ MOBILE \u2500\u2500 *\/\n@media (max-width: 900px) {\n  #gd-wrap { grid-template-columns: minmax(0, 1fr); padding: 70px 20px 40px; gap: 20px; min-height: 0; }\n  .gd-txt { max-width: none; }\n  .gd-titre { font-size: clamp(38px, 11vw, 56px); }\n  .gd-p { font-size: 16px; }\n  \/* sur t\u00e9l\u00e9phone : les photos d\u00e9filent au doigt, une bande qu'on fait glisser *\/\n  .gd-photos {\n    height: auto; min-height: 0; max-height: none;\n    display: flex; gap: 18px;\n    margin: 0 -20px; padding: 26px 20px 46px;\n    overflow-x: auto; overflow-y: hidden;\n    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;\n    scrollbar-width: none;\n  }\n  .gd-photos::-webkit-scrollbar { display: none; }\n  .gd-ph, .gd-ph:nth-child(n) {\n    position: relative; left: auto; top: auto;\n    flex: 0 0 72vw; width: 72vw; height: auto; aspect-ratio: 3 \/ 4;\n    padding: 10px; scroll-snap-align: center;\n  }\n  .gd-ph:nth-child(odd)  { --r: -2.5deg; }\n  .gd-ph:nth-child(even) { --r: 2.5deg; }\n  .gd-ph i { width: 64px; height: 20px; top: -10px; }\n  .gd-ph:hover { transform: translateY(var(--y, 0px)) rotate(var(--r, 0deg)); }   \/* pas d'effet de survol au doigt *\/\n\n  \/* l'indice sous les photos : une fl\u00e8che qui pousse vers la droite *\/\n  .gd-hint {\n    display: flex; align-items: center; justify-content: center; gap: 10px;\n    margin-top: -18px;\n    font-family: var(--gd-font-label); font-size: 11px; font-weight: 800;\n    letter-spacing: .26em; text-transform: uppercase; color: var(--gd-terra);\n    transition: opacity .5s ease;\n  }\n  .gd-hint svg { width: 34px; height: 18px; animation: gd-pousse 1.4s ease-in-out infinite; }\n  .gd-hint.gd-ok { opacity: 0; }   \/* dispara\u00eet d\u00e8s qu'on a gliss\u00e9 *\/\n  @keyframes gd-pousse { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(8px); } }\n}\n@media (prefers-reduced-motion: reduce) {\n  #gd-wrap .gd-in, #gd-wrap .gd-ph { opacity: 1 !important; --y: 0px; transition: none !important; }\n  .gd-hint svg { animation: none; }\n}\n<\/style>\n\n<section id=\"gd-wrap\" data-no-translation>\n  <div class=\"gd-txt\">\n    <h2 class=\"gd-titre gd-in\" style=\"--d:.1s\" data-en=\"Up close, <em>it\u2019s even better.<\/em>\">De pr\u00e8s, <em>c'est encore mieux.<\/em><\/h2>\n    <p class=\"gd-p gd-in\" style=\"--d:.2s\" data-en=\"The fabric, the stitching, the embroidery. Everything you miss at first glance, and everything that makes a piece worth it. Organic cotton, audited workshops, zero toxic chemicals, zero animal testing.\">La mati\u00e8re, les coutures, la broderie. Tout ce qu'on ne remarque pas au premier coup d'\u0153il, et qui fait la qualit\u00e9 d'une pi\u00e8ce. Coton bio, ateliers contr\u00f4l\u00e9s, z\u00e9ro produit toxique, z\u00e9ro test sur les animaux.<\/p>\n  <\/div>\n  <div class=\"gd-photos\" id=\"gd-photos\"><\/div>\n  <div class=\"gd-hint\" id=\"gd-hint\" aria-hidden=\"true\"><svg viewBox=\"0 0 26 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M1 7h23M18 1l6 6-6 6\"\/><\/svg><\/div>\n<\/section>\n\n<script>\n\/* ===== VERSION ANGLAISE =====\n   Sur la version anglaise du site, chaque texte est remplac\u00e9 par son attribut data-en (\u00e9crit juste \u00e0 c\u00f4t\u00e9 du fran\u00e7ais). *\/\n(function(){\n  if (!\/^en\/i.test(document.documentElement.lang || '')) return;\n  document.querySelectorAll('#gd-wrap [data-en]').forEach(function(el){ el.innerHTML = el.getAttribute('data-en'); });\n})();\n<\/script>\n<script>\n(function() {\n  \/* ============ TES PHOTOS : colle ici les liens de tes 4 photos de d\u00e9tails ============\n     (dans l'ordre : grande en haut \u00e0 gauche, haut droite, bas gauche, bas droite) *\/\n  var PHOTOS = [\n    'https:\/\/genko.fr\/wp-content\/uploads\/2026\/10\/PhotositeFR-scaled.jpg',\n    'https:\/\/genko.fr\/wp-content\/uploads\/2026\/10\/photositeze-scaled.jpg',\n    'https:\/\/genko.fr\/wp-content\/uploads\/2026\/10\/photositert-scaled.jpg',\n    'https:\/\/genko.fr\/wp-content\/uploads\/2026\/10\/photositeklo-scaled.jpg'\n  ];\n  \/* Description de chaque photo, dans le m\u00eame ordre (lue par Google et les lecteurs d'\u00e9cran) *\/\n  var TEXTES = [\n    'Gros plan sur la mati\u00e8re d\u2019un v\u00eatement Genko en coton bio',\n    'D\u00e9tail des coutures d\u2019un v\u00eatement Genko',\n    'D\u00e9tail de la broderie d\u2019un v\u00eatement Genko',\n    'Finitions d\u2019un v\u00eatement Genko vues de pr\u00e8s'\n  ];\n  \/* ===================================================================================== *\/\n\n  var wrap = document.getElementById('gd-wrap'), zone = document.getElementById('gd-photos');\n  if (!wrap || !zone) return;\n  zone.innerHTML = PHOTOS.slice(0, 4).map(function(src, i){\n    return '<div class=\"gd-ph\"><i aria-hidden=\"true\"><\/i><img src=\"' + src + '\" alt=\"' + (TEXTES[i] || 'D\u00e9tail d\u2019un v\u00eatement Genko') + '\" loading=\"lazy\" decoding=\"async\"><\/div>';\n  }).join('');\n\n  \/* sur t\u00e9l\u00e9phone : la bande fait un petit aller-retour pour montrer qu'elle glisse,\n     et l'indice \u00ab Glisse \u00bb dispara\u00eet d\u00e8s qu'on a fait d\u00e9filer les photos *\/\n  var hint = document.getElementById('gd-hint'), touche = false;\n  var reduce = window.matchMedia && matchMedia('(prefers-reduced-motion: reduce)').matches;\n  zone.addEventListener('scroll', function(){ if (zone.scrollLeft > 30 && touche && hint) hint.classList.add('gd-ok'); }, { passive: true });\n  ['touchstart', 'pointerdown'].forEach(function(ev){ zone.addEventListener(ev, function(){ touche = true; }, { passive: true }); });\n  function coucou(){\n    if (reduce || touche || zone.scrollWidth <= zone.clientWidth + 10) return;\n    zone.scrollTo({ left: zone.clientWidth * .28, behavior: 'smooth' });\n    setTimeout(function(){ if (!touche) zone.scrollTo({ left: 0, behavior: 'smooth' }); }, 650);\n  }\n\n  function voir(){\n    setTimeout(coucou, 1700);   \/* apr\u00e8s l'arriv\u00e9e des photos *\/\n    wrap.classList.add('gd-vu');\n    setTimeout(function(){ wrap.classList.add('gd-fini'); }, 2000);   \/* apr\u00e8s l'arriv\u00e9e, le survol r\u00e9agit tout de suite *\/\n  }\n  if ('IntersectionObserver' in window) {\n    var io = new IntersectionObserver(function(e){ if (e[0].isIntersecting) { voir(); io.disconnect(); } }, { threshold: .25 });\n    io.observe(wrap);\n  } else voir();\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0c4778c elementor-widget elementor-widget-html\" data-id=\"0c4778c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Fraunces:ital,opsz,wght,SOFT,WONK@0,9..144,100..900,0..100,0..1;1,9..144,100..900,0..100,0..1&display=swap\" rel=\"stylesheet\">\n<style>\n\/* ============ IDENTIT\u00c9 VISUELLE GENKO : tout se change ici ============ *\/\n#genko-manifeste-wrap {\n  --gm-fond:  #FFFFF0;               \/* cr\u00e8me : fond *\/\n  --gm-encre: #111011;               \/* noir Genko : mots allum\u00e9s *\/\n  --gm-pale:  transparent;           \/* mots pas encore lus : invisibles (pour un aper\u00e7u p\u00e2le : rgba(17,16,17,.12)) *\/\n  --gm-terra: #A9714B;               \/* terracotta : les mots entre *\u00e9toiles* *\/\n  --gm-font-titre: 'Fraunces', serif;   \/* typo Genko des titres *\/\n}\n\/* ===================================================================== *\/\n#genko-manifeste-wrap { position: relative; height: 260vh; background: var(--gm-fond); }\n#genko-manifeste-sticky {\n  position: sticky; top: 0; height: 100vh; overflow: hidden;\n  display: flex; flex-direction: column; align-items: center; justify-content: center;\n  padding: 0 clamp(1.5rem, 6vw, 5rem); box-sizing: border-box; font-family: var(--gm-font-titre);\n}\n#genko-manifeste {\n  margin: 0; max-width: 18em; text-align: center; text-wrap: balance;\n  font-family: var(--gm-font-titre);\n  font-variation-settings: \"SOFT\" 100, \"WONK\" 1, \"opsz\" 144;\n  font-size: clamp(2rem, 4.6vw, 4.6rem); line-height: 1.12; font-weight: 800; letter-spacing: -.03em;\n}\n#genko-manifeste .gm-w { color: var(--gm-pale); transition: color .45s ease; white-space: nowrap; }   \/* \u00ab t-shirt \u00bb ne se coupe jamais *\/\n#genko-manifeste .gm-w.gm-on { color: var(--gm-encre); }\n#genko-manifeste .gm-w.gm-k { font-style: italic; font-weight: 300; letter-spacing: -.02em; }   \/* mots entre *\u00e9toiles* : italique fin *\/\n#genko-manifeste .gm-w.gm-k.gm-on { color: var(--gm-terra); }\n@media (max-width: 768px) {\n  #genko-manifeste-wrap { height: 220vh; }\n  #genko-manifeste { font-size: clamp(2.1rem, 9.5vw, 3rem); }\n}\n@media (prefers-reduced-motion: reduce) { #genko-manifeste .gm-w { color: var(--gm-encre); transition: none; } }\n<\/style>\n\n<div id=\"genko-manifeste-wrap\">\n  <div id=\"genko-manifeste-sticky\">\n    <p id=\"genko-manifeste\" data-no-translation>Tu veux passer inaper\u00e7u&nbsp;? | *T\u2019es* *pas* *au* *bon&nbsp;endroit.*<\/p>\n  <\/div>\n<\/div>\n\n<script>\n(function(){\n  \/* Pour changer le texte : modifie la phrase ci-dessus. Les mots entre *\u00e9toiles* s'allument en terracotta, en italique ; &nbsp; colle deux mots pour qu'ils restent sur la m\u00eame ligne ; | passe \u00e0 la ligne. *\/\n  var wrap = document.getElementById('genko-manifeste-wrap'), p = document.getElementById('genko-manifeste');\n  if (!wrap || !p) return;\n  var reduce = window.matchMedia && matchMedia('(prefers-reduced-motion: reduce)').matches;\n  \/* ===== VERSION ANGLAISE =====\n     Sur la version anglaise du site (TranslatePress), la phrase est remplac\u00e9e par celle-ci.\n     M\u00eames r\u00e8gles : *\u00e9toiles* = en terracotta. *\/\n  var TEXTE_EN = 'Want to go unnoticed? | *You\u2019re* *in* *the* *wrong\\u00a0place.*';\n  if (\/^en\/i.test(document.documentElement.lang || '')) p.textContent = TEXTE_EN;\n  p.innerHTML = p.textContent.trim().split(\/[ \\t\\r\\n]+\/).map(function(w){\n    if (w === '|') return '<br>';   \/* | = retour \u00e0 la ligne *\/\n    var k = \/^\\*.*\\*$\/.test(w); w = w.replace(\/\\*\/g, '');\n    var d = document.createElement('span'); d.textContent = w;\n    return '<span class=\"gm-w' + (k ? ' gm-k' : '') + '\">' + d.innerHTML + '<\/span>';\n  }).join(' ');\n  var ws = p.querySelectorAll('.gm-w'), raf = 0;\n  function tick(){\n    raf = 0;\n    var top = wrap.getBoundingClientRect().top + window.scrollY, total = wrap.offsetHeight - window.innerHeight;\n    if (total <= 0) return;\n    \/* les mots s'allument sur les 80 premiers % du d\u00e9filement, puis la phrase reste enti\u00e8re *\/\n    var raw = Math.min(Math.max((window.scrollY - top) \/ (total * .8), 0), 1), n = Math.round(raw * ws.length);\n    for (var i = 0; i < ws.length; i++) ws[i].classList.toggle('gm-on', reduce || i < n);\n  }\n  function ask(){ if (!raf) raf = requestAnimationFrame(tick); }\n  window.addEventListener('scroll', ask, { passive: true });\n  window.addEventListener('resize', ask);\n  tick();\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-368cbfd elementor-widget elementor-widget-html\" data-id=\"368cbfd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Urbanist:ital,wght@0,300;0,400;0,500;1,300&family=Bricolage+Grotesque:opsz,wght@12..96,400..800&family=Fraunces:ital,opsz,wght,SOFT,WONK@0,9..144,100..900,0..100,0..1;1,9..144,100..900,0..100,0..1&display=swap\" rel=\"stylesheet\">\n<style>\n\/* ============ IDENTIT\u00c9 VISUELLE GENKO : tout se change ici ============ *\/\n#genko-parallax2 {\n  --gp-photo:  url('https:\/\/genko.fr\/wp-content\/uploads\/2026\/10\/orrptpot-scaled.jpg'); \/* LA PHOTO DE FOND : colle le lien de ta photo ici *\/\n  --gp-cadrage: center 30%;   \/* partie de la photo \u00e0 garder visible (center top, center center\u2026) *\/\n  --gp-voile:  .38;       \/* assombrit la photo pour que le texte se lise (0 = rien, .6 = tr\u00e8s sombre) *\/\n  --gp-fond:   #A9714B;   \/* terracotta : couleur pendant le chargement de la photo *\/\n  --gp-creme:  #FFFFF0;   \/* textes et bouton *\/\n  --gp-terra:  #4A5D4E;   \/* vert : survol du bouton *\/\n  --gp-encre:  #111011;   \/* texte du bouton *\/\n\n  \/* Les typos Genko *\/\n  --gp-font-titre: 'Fraunces', serif;                 \/* grande phrase *\/\n  --gp-font-label: 'Bricolage Grotesque', sans-serif; \/* petit titre, bouton *\/\n  --gp-font-texte: 'Urbanist', sans-serif;            \/* paragraphe *\/\n}\n\/* ===================================================================== *\/\n#genko-parallax2 {\n  position: relative;\n  height: 100vh;\n  min-height: 560px;\n  overflow: hidden;\n  font-family: 'Urbanist', sans-serif;\n  background: var(--gp-fond);\n}\n#genko-parallax2-bg {\n  position: absolute;\n  top: -20%; left: 0; right: 0;\n  height: 140%;\n  background: var(--gp-photo) var(--gp-cadrage)\/cover no-repeat;\n  will-change: transform;\n}\n#genko-parallax2-overlay {\n  position: absolute; inset: 0;\n  background:\n    radial-gradient(ellipse at 50% 45%, transparent 35%, rgba(17,16,17,.3)),\n    rgba(17,16,17, var(--gp-voile));\n  z-index: 1;\n}\n#genko-parallax2-title {\n  position: absolute; top: 50%; left: 50%;\n  transform: translate(-50%, -50%);\n  text-align: center; z-index: 2; width: 90%;\n}\n#genko-parallax2-eye {\n  display: inline-flex; align-items: center; gap: 14px;\n  font-family: var(--gp-font-label);\n  font-size: .75rem; font-weight: 800; letter-spacing: .3em; text-transform: uppercase;\n  color: var(--gp-creme); opacity: .85; margin-bottom: 1.6rem;\n}\n#genko-parallax2-eye b { font-size: 1.5rem; letter-spacing: .12em; font-weight: 500; }\n#genko-parallax2-eye i { display: block; width: 34px; height: 1px; background: currentColor; }\n#genko-parallax2-title .gp-l {\n  display: block;\n  font-family: var(--gp-font-titre);\n  font-variation-settings: \"SOFT\" 100, \"WONK\" 1, \"opsz\" 144;\n  font-size: clamp(3rem, 7vw, 7rem);\n  color: var(--gp-creme); letter-spacing: -.035em; line-height: 1.02;\n  text-shadow: 0 2px 40px rgba(17,16,17,.35);   \/* aide \u00e0 lire sur la photo *\/\n}\n#genko-parallax2-title .gp-l span { display: inline-block; padding-bottom: .08em; }\n#genko-parallax2-title .gp-b { font-weight: 800; font-size: clamp(4rem, 9.5vw, 9.5rem); line-height: .95; }\n#genko-parallax2-title .gp-t { font-weight: 300; font-style: italic; letter-spacing: -.02em; opacity: .9; padding: 0 .14em .08em .04em; font-size: clamp(2rem, 4.2vw, 4.2rem); }\n#genko-parallax2-title, #genko-parallax2-title .gp-l, #genko-parallax2-title .gp-l span { overflow: visible !important; }\n#genko-parallax2-bottom {\n  position: absolute; bottom: 3.5rem; right: 3.5rem;\n  max-width: 360px; z-index: 2;\n  display: flex; flex-direction: column; align-items: flex-end; gap: 1.5rem;\n}\n#genko-parallax2-bottom p {\n  margin: 0; font-family: var(--gp-font-texte); font-size: 1.15rem; line-height: 1.6;\n  text-shadow: 0 1px 20px rgba(17,16,17,.4);\n  color: var(--gp-creme); opacity: .88; font-weight: 300; text-align: right;\n}\n#genko-parallax2-bottom a {\n  background: var(--gp-creme); color: var(--gp-encre);\n  font-family: var(--gp-font-label);\n  font-size: 10px; letter-spacing: .2em; text-transform: uppercase; font-weight: 800;\n  display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px 11px 22px; border-radius: 100px; text-decoration: none;\n  transition: background .3s, color .3s;\n}\n#genko-parallax2-bottom a:hover { background: var(--gp-terra); color: var(--gp-creme); }\n#genko-parallax2-bottom .gp-beret { width: 18px; height: 18px; display: inline-flex; transition: transform .4s cubic-bezier(.34,1.56,.64,1); }\n#genko-parallax2-bottom .gp-beret img { width: 18px !important; height: 18px !important; max-width: none !important; object-fit: contain; filter: brightness(0); transition: filter .3s; }\n#genko-parallax2-bottom a:hover .gp-beret { transform: rotate(20deg) scale(1.15); }\n#genko-parallax2-bottom a:hover .gp-beret img { filter: brightness(0) invert(1); }\n\n\/* apparition au d\u00e9filement *\/\n#genko-parallax2 .gp-in { opacity: 0; transform: translateY(24px); transition: opacity .9s ease, transform 1.1s cubic-bezier(.2,.8,.2,1); transition-delay: var(--d, 0s); }\n#genko-parallax2.gp-vu .gp-in { opacity: 1; transform: none; }\n\n@media (max-width: 768px) {\n  #genko-parallax2-title { top: 42%; }\n  #genko-parallax2-title .gp-t { font-size: clamp(1.8rem, 9vw, 2.6rem); }\n  #genko-parallax2-title .gp-b { font-size: clamp(3.2rem, 17vw, 5rem); }\n  #genko-parallax2-bottom { left: 1.5rem; right: 1.5rem; bottom: 2.2rem; max-width: none; align-items: center; }\n  #genko-parallax2-bottom p { text-align: center; }\n}\n@media (prefers-reduced-motion: reduce) {\n  #genko-parallax2 .gp-in { opacity: 1; transform: none; transition: none; }\n}\n<\/style>\n\n<section id=\"genko-parallax2\" data-no-translation>\n  <div id=\"genko-parallax2-bg\" role=\"img\" aria-label=\"Homme portant un t-shirt heavyweight Genko en coton bio\"><\/div>\n  <div id=\"genko-parallax2-overlay\" aria-hidden=\"true\"><\/div>\n  <div id=\"genko-parallax2-title\">\n    <span class=\"gp-l gp-in\" style=\"--d:.15s\"><span class=\"gp-t\" data-en=\"Genko, it\u2019s your turn\">Genko, \u00e0 toi<\/span><\/span>\n    <span class=\"gp-l gp-in\" style=\"--d:.3s\"><span class=\"gp-b\" data-en=\"to wear it.\">de le porter.<\/span><\/span>\n  <\/div>\n  <div id=\"genko-parallax2-bottom\">\n    <p class=\"gp-in\" style=\"--d:.5s\" data-en=\"All that\u2019s missing is you.\">Il ne manque plus que toi.<\/p>\n    <div class=\"gp-in\" style=\"--d:.65s\"><a class=\"genko-bouton\" href=\"https:\/\/genko.fr\/boutique\/\" aria-label=\"D\u00e9couvrir la boutique Genko\"><span data-en=\"Shop now\">D\u00e9couvrir la boutique<\/span><span class=\"gp-beret\"><img decoding=\"async\" src=\"https:\/\/genko.fr\/wp-content\/uploads\/2026\/10\/beretgenko.png\" alt=\"\"><\/span><\/a><\/div>\n  <\/div>\n<\/section>\n\n<script>\n\/* ===== VERSION ANGLAISE =====\n   Sur la version anglaise du site, chaque texte est remplac\u00e9 par son attribut data-en (\u00e9crit juste \u00e0 c\u00f4t\u00e9 du fran\u00e7ais). *\/\n(function(){\n  if (!\/^en\/i.test(document.documentElement.lang || '')) return;\n  document.querySelectorAll('#genko-parallax2 [data-en]').forEach(function(el){ el.innerHTML = el.getAttribute('data-en'); });\n})();\n(function() {\n  var bg  = document.getElementById('genko-parallax2-bg');\n  var sec = document.getElementById('genko-parallax2');\n  if (!bg || !sec) return;\n  var reduce = window.matchMedia && matchMedia('(prefers-reduced-motion: reduce)').matches;\n  var raf = 0;\n\n  function tick() {\n    raf = 0;\n    var rect = sec.getBoundingClientRect(), winH = window.innerHeight;\n    if (rect.top < winH * .75) sec.classList.add('gp-vu');\n    if (reduce || rect.bottom < 0 || rect.top > winH) return;\n    var p = 1 - (rect.top + sec.offsetHeight) \/ (winH + sec.offsetHeight);\n    bg.style.transform = 'translateY(' + ((p - .5) * 20) + '%)';\n  }\n  function ask(){ if (!raf) raf = requestAnimationFrame(tick); }\n\n  window.addEventListener('scroll', ask, { passive: true });\n  window.addEventListener('resize', ask);\n  tick();\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-042c94e elementor-widget elementor-widget-html\" data-id=\"042c94e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Urbanist:wght@300;400;500&family=Bricolage+Grotesque:opsz,wght@12..96,400..800&family=Fraunces:ital,opsz,wght,SOFT,WONK@0,9..144,100..900,0..100,0..1;1,9..144,100..900,0..100,0..1&display=swap\" rel=\"stylesheet\">\n<style>\n\/* ============ IDENTIT\u00c9 VISUELLE GENKO : tout se change ici ============ *\/\n#genko-scatter-wrap {\n  --gsc-fond:  #FFFFF0;               \/* cr\u00e8me : fond *\/\n  --gsc-encre: #111011;               \/* noir Genko : titre, bouton *\/\n  --gsc-terra: #A9714B;               \/* terracotta : \u00ab Genko \u00bb, survol du bouton *\/\n  --gsc-doux:  rgba(17,16,17,.6);     \/* texte *\/\n  --gsc-hauteur: 860px;               \/* hauteur du bloc (mobile : r\u00e9gl\u00e9e plus bas) *\/\n  --gsc-creme: #FFFFF0;               \/* logos sur les cartes *\/\n\n  --gsc-font-titre: 'Fraunces', serif;\n  --gsc-font-label: 'Bricolage Grotesque', sans-serif;\n  --gsc-font-texte: 'Urbanist', sans-serif;\n}\n\/* ===================================================================== *\/\n#genko-scatter-wrap { position: relative; background: var(--gsc-fond); }\n#genko-scatter-sticky { position: relative; height: var(--gsc-hauteur); overflow: hidden; font-family: var(--gsc-font-texte); }\n\/* les cartes Instagram \/ TikTok *\/\n.gsc-p {\n  position: absolute; top: -9999px; left: -9999px;\n  opacity: 0;\n  display: flex !important; align-items: center; justify-content: center;\n  text-decoration: none !important;\n}\n.gsc-p svg { width: 62%; height: auto; overflow: visible; }\n.gsc-p:hover svg { opacity: .85; }\n\n#genko-scatter-center {\n  position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%);\n  text-align: center; z-index: 20; width: 100%; padding: 0 2rem; box-sizing: border-box;\n  display: flex; flex-direction: column; align-items: center; gap: 1.5rem; pointer-events: none;\n}\n#genko-scatter-center h2 {\n  margin: 0; font-family: var(--gsc-font-titre);\n  font-variation-settings: \"SOFT\" 100, \"WONK\" 1, \"opsz\" 144;\n  font-size: clamp(2.6rem, 6vw, 6.5rem); font-weight: 800; color: var(--gsc-encre);\n  letter-spacing: -.035em; line-height: 1; padding-bottom: .08em;\n}\n#genko-scatter-center h2 em { font-style: italic; font-weight: 300; letter-spacing: -.02em; padding-right: .08em; }\n#genko-scatter-center h2 b { color: var(--gsc-terra); font-weight: 800; }\n#genko-scatter-center p { margin: 0; font-family: var(--gsc-font-texte); font-size: clamp(1rem, 2vw, 1.12rem); line-height: 1.7; color: var(--gsc-doux); max-width: 34ch; }\n@media (max-width: 768px) { #genko-scatter-wrap { --gsc-hauteur: 640px; } #genko-scatter-center { top: 36%; } }\n<\/style>\n\n<div id=\"genko-scatter-wrap\" data-no-translation>\n  <div id=\"genko-scatter-sticky\">\n    <div id=\"genko-scatter-center\">\n      <h2 data-en=\"<em>new<\/em><br>to <b>Genko<\/b>?\"><em>nouveau<\/em><br>chez <b>Genko<\/b>&nbsp;?<\/h2>\n      <p data-en=\"Follow the ride: behind the scenes, new pieces before anyone else, and plenty of tongue-in-cheek.\">Suis l\u2019aventure : les coulisses, les nouvelles pi\u00e8ces avant tout le monde, et pas mal de second degr\u00e9.<\/p>\n    <\/div>\n  <\/div>\n<\/div>\n\n<script>\n\/* ===== VERSION ANGLAISE =====\n   Sur la version anglaise du site, chaque texte est remplac\u00e9 par son attribut data-en (\u00e9crit juste \u00e0 c\u00f4t\u00e9 du fran\u00e7ais). *\/\n(function(){\n  if (!\/^en\/i.test(document.documentElement.lang || '')) return;\n  document.querySelectorAll('#genko-scatter-wrap [data-en]').forEach(function(el){ el.innerHTML = el.getAttribute('data-en'); });\n})();\n<\/script>\n<script>\n(function() {\n  \/* ============ TES R\u00c9SEAUX : lien, couleur du logo ============ *\/\n  var RESEAUX = [\n    { nom: 'Instagram', lien: 'https:\/\/instagram.com\/weargenko',      couleur: '#A9714B' },\n    { nom: 'TikTok',    lien: 'https:\/\/www.tiktok.com\/@genko.fr',      couleur: '#A9714B' }\n  ];\n  \/* ================================================================== *\/\n  var ICONES = {\n    Instagram: '<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"2.5\" y=\"2.5\" width=\"19\" height=\"19\" rx=\"5.5\"\/><circle cx=\"12\" cy=\"12\" r=\"4.3\"\/><circle cx=\"17.6\" cy=\"6.4\" r=\".9\" fill=\"currentColor\" stroke=\"none\"\/><\/svg>',\n    TikTok: '<svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M16.6 2h-3.3v13.2a2.9 2.9 0 1 1-2.9-2.9c.3 0 .6 0 .9.1V9a6.3 6.3 0 1 0 5.3 6.2V8.6a8 8 0 0 0 4.7 1.5V6.8a4.7 4.7 0 0 1-4.7-4.8z\"\/><\/svg>'\n  };\n\n  var wrap = document.getElementById('genko-scatter-wrap');\n  var sticky = document.getElementById('genko-scatter-sticky');\n  if (!wrap || !sticky) return;\n\n  var photos = RESEAUX.map(function(rs){\n    var el = document.createElement('a'); el.className = 'gsc-p';\n    el.href = rs.lien; el.target = '_blank'; el.rel = 'noopener me'; el.setAttribute('aria-label', 'Genko sur ' + rs.nom);\n    el.style.color = rs.couleur;\n    el.innerHTML = ICONES[rs.nom]; el.firstChild.setAttribute('aria-hidden', 'true');\n    sticky.insertBefore(el, sticky.firstChild);\n    return el;\n  });\n\n  \/* [largeur, hauteur, centreX %, centreY %, rotation] au d\u00e9part (tout petits, sous le texte), puis \u00e0 l'arriv\u00e9e *\/\n  var CD = [\n    [30,30, 50,64, -30,  170,170, 43, 72, -7],\n    [30,30, 50,64,  30,  170,170, 57, 72,  6]\n  ];\n  var CM = [\n    [24,24, 50,62, -30,  118,118, 36, 70, -7],\n    [24,24, 50,62,  30,  118,118, 64, 70,  6]\n  ];\n\n  function lerp(a, b, t){ return a + (b - a) * t; }\n  function ease(t){ return t < .5 ? 2 * t * t : -1 + (4 - 2 * t) * t; }\n  var raf = 0, fige = false;\n\n  function tick() {\n    raf = 0;\n    var C = window.innerWidth <= 768 ? CM : CD;\n    \/* les photos partent empil\u00e9es au centre de l'\u00e9cran, puis s'\u00e9cartent jusqu'\u00e0 leur place\n       pendant que le bloc d\u00e9file, pour \u00eatre en place quand il est enti\u00e8rement visible *\/\n    var r = wrap.getBoundingClientRect(), wh = window.innerHeight, H = sticky.offsetHeight;\n    var debut = wh * .65, fin = Math.min(wh - H, 0);\n    var raw = Math.min(Math.max((debut - r.top) \/ (debut - fin), 0), 1);\n    \/* une fois d\u00e9ploy\u00e9es, les photos restent en place m\u00eame si on remonte *\/\n    \/* et quand on remonte assez haut pour que le bloc sorte de l'\u00e9cran, l'animation se r\u00e9initialise *\/\n    if (r.top > wh) fige = false;\n    if (fige) raw = 1; else if (raw >= 1) fige = true;\n    var p = ease(raw), vw = sticky.clientWidth || window.innerWidth, vh = H;\n    var depY = Math.min(Math.max(wh \/ 2 - r.top, H * .25), H * .75);   \/* point de d\u00e9part : le centre de l'\u00e9cran *\/\n    var fadeIn = raw > 0 ? Math.min(raw \/ .12, 1) : 0;\n    photos.forEach(function(el, i) {\n      var c = C[i];\n      var w = lerp(c[0], c[5], p), hh = lerp(c[1], c[6], p);\n      var cx = lerp(c[2] \/ 100 * vw, c[7] \/ 100 * vw, p), cy = lerp(c[3] \/ 100 * vh, c[8] \/ 100 * vh, p);   \/* les logos naissent juste sous le texte, jamais par-dessus *\/\n      el.style.width = w + 'px'; el.style.height = hh + 'px';\n      el.style.left = (cx - w \/ 2) + 'px'; el.style.top = (cy - hh \/ 2) + 'px';\n      el._rot = lerp(c[4], c[9], p); poser(el);\n      if (!el._tire) el.style.zIndex = i;\n      el.style.opacity = fadeIn;\n    });\n  }\n\n  \/* ===== Petit secret : les logos qu'on secoue =====\n     \u00e0 la souris, on attrape un logo et on le d\u00e9place ; l\u00e2ch\u00e9, il revient \u00e0 sa place en rebondissant. Un simple clic ouvre le r\u00e9seau. *\/\n  function poser(el){\n    var dx = el._dx || 0, dy = el._dy || 0, r = (el._rot || 0) + (el._pen || 0), k = el._tire ? 1.05 : 1;\n    el.style.transform = 'translate(' + dx + 'px,' + dy + 'px) rotate(' + r + 'deg) scale(' + k + ')';\n  }\n  photos.forEach(function(el){\n    el.addEventListener('click', function(e){ if (el._glisse) { e.preventDefault(); el._glisse = false; } });   \/* un glisser n'ouvre pas le lien *\/\n    el.style.cursor = 'grab'; el.style.touchAction = 'pan-y';\n    el.addEventListener('dragstart', function(e){ e.preventDefault(); });\n    el.addEventListener('pointerdown', function(e){\n      if (e.pointerType !== 'mouse' || e.button !== 0) return;   \/* sur t\u00e9l\u00e9phone, on garde le d\u00e9filement normal *\/\n      e.preventDefault(); el.setPointerCapture(e.pointerId);\n      cancelAnimationFrame(el._ressort);\n      el._tire = true; el.style.zIndex = 30; el.style.cursor = 'grabbing';\n\n      var x0 = e.clientX - (el._dx || 0), y0 = e.clientY - (el._dy || 0), lastX = e.clientX, sx = e.clientX, sy = e.clientY;\n      el._glisse = false;\n      function bouge(ev){ if (Math.abs(ev.clientX - sx) + Math.abs(ev.clientY - sy) > 6) el._glisse = true; el._dx = ev.clientX - x0; el._dy = ev.clientY - y0; el._pen = Math.max(-14, Math.min(14, (ev.clientX - lastX) * .8)); lastX = ev.clientX; poser(el); }\n      function lache(){\n        el.removeEventListener('pointermove', bouge); el.removeEventListener('pointerup', lache); el.removeEventListener('pointercancel', lache);\n        el._tire = false; el.style.cursor = 'grab';\n        \/* ressort : elle revient \u00e0 sa place en oscillant un peu *\/\n        var vx = 0, vy = 0, vr = 0;\n        (function pas(){\n          vx = (vx - (el._dx || 0) * .09) * .8; vy = (vy - (el._dy || 0) * .09) * .8; vr = (vr - (el._pen || 0) * .12) * .78;\n          el._dx += vx; el._dy += vy; el._pen += vr; poser(el);\n          if (Math.abs(el._dx) + Math.abs(el._dy) + Math.abs(vx) + Math.abs(vy) + Math.abs(el._pen) > .3) el._ressort = requestAnimationFrame(pas);\n          else { el._dx = el._dy = el._pen = 0; poser(el); el.style.zIndex = photos.indexOf(el); }\n        })();\n      }\n      el.addEventListener('pointermove', bouge); el.addEventListener('pointerup', lache); el.addEventListener('pointercancel', lache);\n    });\n  });\n  function ask(){ if (!raf) raf = requestAnimationFrame(tick); }\n  window.addEventListener('scroll', ask, { passive: true });\n  window.addEventListener('resize', ask);\n  tick();\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Obstin\u00e9, jamais press\u00e9. (ou obstin\u00e9e\/press\u00e9e. \u00e7a marche aussi.) \u9811\u9811\u56fa\u56fa Ganko, en japonais : t\u00eatu. On a chang\u00e9 une lettre, pas l&rsquo;id\u00e9e. On ne l\u00e2che rien sur le coton, les coutures, les finitions. Une pi\u00e8ce sort quand elle est pr\u00eate. Pas avant. Voir les pi\u00e8ces coton bio textile premium fait pour durer nouveauchez Genko&nbsp;? Suis l\u2019aventure [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-219","page","type-page","status-publish","hentry"],"blocksy_meta":{"has_hero_section":"disabled","styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":6}},"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/genko.fr\/en\/wp-json\/wp\/v2\/pages\/219","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/genko.fr\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/genko.fr\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/genko.fr\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/genko.fr\/en\/wp-json\/wp\/v2\/comments?post=219"}],"version-history":[{"count":101,"href":"https:\/\/genko.fr\/en\/wp-json\/wp\/v2\/pages\/219\/revisions"}],"predecessor-version":[{"id":1790,"href":"https:\/\/genko.fr\/en\/wp-json\/wp\/v2\/pages\/219\/revisions\/1790"}],"wp:attachment":[{"href":"https:\/\/genko.fr\/en\/wp-json\/wp\/v2\/media?parent=219"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}