{"id":7,"date":"2026-11-03T05:52:46","date_gmt":"2026-11-03T05:52:46","guid":{"rendered":"https:\/\/newcodeine.dupasquier.ch\/?page_id=7"},"modified":"2026-11-03T07:20:59","modified_gmt":"2026-11-03T07:20:59","slug":"hero-page","status":"publish","type":"page","link":"https:\/\/newcodeine.dupasquier.ch\/","title":{"rendered":"hero"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"7\" class=\"elementor elementor-7\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ba24c33 e-flex e-con-boxed e-con e-parent\" data-id=\"ba24c33\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-aefffb8 elementor-widget elementor-widget-html\" data-id=\"aefffb8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ===== CODEINE \u2014 HERO V2 \u00ab LA MUTATION \u00bb (widget HTML Elementor gratuit) ===== -->\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Anybody:wdth,wght@50..150,100..900&family=IBM+Plex+Mono:wght@400;600;700&display=swap\">\r\n\r\n<style>\r\n\/* ============ Tokens ============ *\/\r\n.cdx-hero{\r\n  --cdx-k:#0B0D11;--cdx-l:#B8FF37;--cdx-w:#F5F4EF;--cdx-p:#FF4D6D;--cdx-s:#666B77;\r\n  --d:1;--barp:9%;--far:112cqw;--gty:34cqh;\r\n  --f-disp:'Anybody','Archivo Narrow',Impact,'Arial Narrow',sans-serif;\r\n  --f-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;\r\n  --out:cubic-bezier(.23,1,.32,1);\r\n  position:relative;container-type:size;width:100%;height:clamp(660px,100svh,1080px);\r\n  overflow:clip;background:#fff;color:var(--cdx-w);isolation:isolate;touch-action:pan-y;\r\n  -webkit-user-select:none;user-select:none;\r\n  font-family:var(--f-mono);line-height:1.2;text-align:left;-webkit-font-smoothing:antialiased;\r\n}\r\n.cdx-hero *,.cdx-hero *::before,.cdx-hero *::after{box-sizing:border-box}\r\n.cdx-hero h1,.cdx-hero p,.cdx-hero ul,.cdx-hero li,.cdx-hero pre{margin:0;padding:0;list-style:none;font-weight:inherit}\r\n.cdx-hero b,.cdx-hero i,.cdx-hero em{font-style:normal;font-weight:inherit}\r\n.cdx-hero .cdx-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}\r\n\r\n\/* Moteur de mutation : chaque .cdx-m a sa fen\u00eatre [--s, --s + --w] dans la dose --d *\/\r\n.cdx-hero .cdx-m{\r\n  --p:clamp(0,calc((var(--d) - var(--s)) \/ var(--w)),1);\r\n  --e:calc(var(--p) * var(--p) * (3 - 2 * var(--p)));\r\n  --o:calc(1 - (1 - var(--p)) * (1 - var(--p)) * (1 - var(--p)));\r\n}\r\n\r\n\/* ============ Tranches : la page est d\u00e9coup\u00e9e, puis remplac\u00e9e tranche par tranche ============ *\/\r\n.cdx-hero .cdx-cut{position:absolute;z-index:1;left:0;right:0;top:50cqh;height:4px;background:var(--cdx-p);transform-origin:0 50%;transform:scaleX(var(--e));pointer-events:none}\r\n.cdx-hero .cdx-strip{position:absolute;z-index:1;left:0;right:0;top:var(--t);height:calc(25cqh + 1px);background:var(--cdx-k);pointer-events:none;\r\n  transform:translate3d(calc((1 - var(--o)) * var(--dir) * 105cqw),0,0)}\r\n.cdx-hero .cdx-strip::before{content:\"\";position:absolute;left:0;right:0;top:0;height:4px;background:var(--cdx-p);opacity:calc(1 - var(--p))}\r\n\r\n\/* ============ SITE G\u00c9N\u00c9RIQUE (parodie d\u00e9corative) ============ *\/\r\n.cdx-hero .cdx-nav{position:absolute;z-index:2;left:0;right:0;top:0;height:8.5cqh;background:#fff;border-bottom:1px solid #e5e7eb;display:flex;align-items:center;justify-content:flex-end;padding:0 4cqw;\r\n  font:400 clamp(12px,1.05cqw,15px) Arial,Helvetica,sans-serif;color:#4b5563;transform:translate3d(0,calc(var(--e) * -105%),0)}\r\n.cdx-hero .cdx-nav span{margin-left:2.2cqw}\r\n.cdx-hero .cdx-gt{position:absolute;z-index:2;left:0;right:0;top:19cqh;text-align:center;font:700 clamp(26px,3.5cqw,54px)\/1.15 Arial,Helvetica,sans-serif;color:color-mix(in srgb,var(--cdx-w) calc(var(--e) * 100%),#111827);\r\n  opacity:calc(1 - clamp(0,calc((var(--e) - .55) * 2.2),1));transform:translate3d(0,calc(var(--e) * var(--gty)),0) scale(calc(1 + var(--e) * 2.4));filter:blur(calc(var(--e) * 5px));transform-origin:50% 50%}\r\n.cdx-hero .cdx-gp{position:absolute;left:0;top:0;width:46cqw;text-align:center;font:400 clamp(14px,1.35cqw,20px)\/1.5 Arial,Helvetica,sans-serif;color:#6b7280;opacity:clamp(0,calc((.24 - var(--d)) * 14),1)}\r\n.cdx-hero .cdx-note{position:absolute;z-index:4;background:var(--cdx-p);color:var(--cdx-k);font:600 clamp(10px,.9cqw,13px)\/1.2 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;padding:.5em .8em;--pl:clamp(0,calc((var(--d) - .22) * 5),1);transform:translate3d(calc(var(--pl) * 75cqw),0,0) rotate(calc(var(--r) + var(--pl) * 16deg));\r\n  opacity:clamp(0,calc((var(--d) - var(--a)) * 14),1)}\r\n.cdx-hero .cdx-note::after{content:\"\";position:absolute;top:50%;right:100%;height:3px;width:var(--len,4cqw);background:var(--cdx-p)}\r\n\r\n\/* Cartes g\u00e9n\u00e9riques -> liste des prestations *\/\r\n.cdx-hero .cdx-card{\r\n  --gl:calc(10cqw + var(--n) * 20.5cqw);--gt:62cqh;--gw:18.5cqw;--gh:16cqh;\r\n  --fl:74cqw;--ft:calc(13.5cqh + var(--n) * 5.4cqh);--fw:22cqw;--fh:4.8cqh;\r\n  position:absolute;z-index:3;overflow:hidden;\r\n  left:calc(var(--gl) + (var(--fl) - var(--gl)) * var(--e));top:calc(var(--gt) + (var(--ft) - var(--gt)) * var(--e));\r\n  width:calc(var(--gw) + (var(--fw) - var(--gw)) * var(--e));height:calc(var(--gh) + (var(--fh) - var(--gh)) * var(--e));\r\n  background:color-mix(in srgb,var(--cdx-k) calc(clamp(0,calc((var(--e) - .5) * 40),1) * 100%),#fff);\r\n  border-radius:calc((1 - var(--e)) * 14px);\r\n  box-shadow:0 2px 14px rgba(0,0,0,calc(.14 * (1 - var(--e))));\r\n  border-top:1px solid rgba(245,244,239,calc(var(--e) * .55));\r\n  transform:rotate(calc(var(--e) * (1 - var(--e)) * 4 * var(--r,0deg)));\r\n}\r\n.cdx-hero .cdx-card .g{position:absolute;inset:0;padding:1.5cqw;font:400 clamp(11px,.95cqw,14px)\/1.4 Arial,Helvetica,sans-serif;color:#6b7280;opacity:calc(1 - clamp(0,calc((var(--e) - .1) * 3),1))}\r\n.cdx-hero .cdx-card .g i{display:block;width:2.4cqw;height:2.4cqw;min-width:26px;min-height:26px;border-radius:50%;background:#e5e7eb;margin-bottom:1cqh}\r\n.cdx-hero .cdx-card .g b{display:block;color:#111827;font-weight:700;font-size:clamp(14px,1.3cqw,19px);margin-bottom:.4cqh}\r\n.cdx-hero .cdx-card .f{position:absolute;inset:0;display:flex;align-items:center;gap:1.1em;padding:0 .6em;color:var(--cdx-w);font:600 clamp(11px,.98cqw,14px)\/1.2 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;opacity:clamp(0,calc((var(--e) - .54) * 5),1)}\r\n.cdx-hero .cdx-card .f span{color:var(--cdx-l)}\r\n\r\n\/* Message : sous-titre banal -> titre *\/\r\n.cdx-hero .cdx-msg{position:absolute;z-index:4;left:calc(27cqw + (4cqw - 27cqw) * var(--e));top:calc(31cqh + (14.5cqh - 31cqh) * var(--e))}\r\n.cdx-hero .cdx-h1{position:relative;font-family:var(--f-disp);font-weight:800;font-stretch:60%;font-size:min(6.7cqw,12.5cqh);line-height:.9;text-transform:uppercase;letter-spacing:-.005em;color:var(--cdx-w);\r\n  transform-origin:0 0;transform:scale(calc(.55 + .45 * var(--e)));clip-path:inset(0 calc((1 - clamp(0,calc(var(--e) * 1.7 - .1),1)) * 100%) 0 0)}\r\n.cdx-hero .cdx-ln{display:block;width:fit-content;background:var(--cdx-k);padding:.04em .14em .02em 0}\r\n.cdx-hero .cdx-strike{position:relative;display:inline-block}\r\n.cdx-hero .cdx-strike::after{content:\"\";position:absolute;left:-2%;right:-2%;top:46%;height:.13em;background:var(--cdx-p);transform-origin:0 50%;transform:rotate(-2deg) scaleX(clamp(0,calc((var(--d) - .86) * 12),1))}\r\n\r\n\/* Bouton bleu -> dalle rose *\/\r\n.cdx-hero .cdx-slab{position:absolute;z-index:5;display:grid;place-items:center;\r\n  left:calc(44.6cqw + (13cqw - 44.6cqw) * var(--e));top:calc(47cqh + (36.5cqh - 47cqh) * var(--e));\r\n  font-family:Arial,Helvetica,sans-serif;font-size:calc(1.15cqw + (min(4.7cqw,8.6cqh) - 1.15cqw) * var(--e));line-height:.95;\r\n  padding:calc(.85em + (.1em - .85em) * var(--e)) calc(1.7em + (.28em - 1.7em) * var(--e));\r\n  background:color-mix(in srgb,var(--cdx-p) calc(clamp(0,calc((var(--e) - .3) * 400),1) * 100%),#2563eb);color:color-mix(in srgb,var(--cdx-k) calc(clamp(0,calc((var(--e) - .3) * 400),1) * 100%),#fff);\r\n  border-radius:calc((1 - var(--e)) * 10px);transform:rotate(calc(var(--e) * -4deg));transform-origin:0 100%;\r\n  box-shadow:calc(var(--e) * .55cqw) calc(var(--e) * .55cqw) 0 var(--cdx-k)}\r\n.cdx-hero .cdx-slab span{grid-area:1\/1;white-space:nowrap}\r\n.cdx-hero .cdx-slab .g{font-size:.9em;opacity:calc(1 - clamp(0,calc((var(--e) - .1) * 5),1));transform:translate3d(0,calc(clamp(0,calc((var(--e) - .1) * 5),1) * -70%),0)}\r\n.cdx-hero .cdx-slab .f{font-family:var(--f-disp);font-weight:900;font-stretch:68%;text-transform:uppercase;opacity:clamp(0,calc((var(--e) - .32) * 6),1);transform:translate3d(0,calc((1 - clamp(0,calc((var(--e) - .32) * 6),1)) * 70%),0)}\r\n\r\n\/* ============ LE MOT : lettres diss\u00e9qu\u00e9es et r\u00e9assembl\u00e9es ============ *\/\r\n.cdx-hero .cdx-code{position:absolute;z-index:2;left:4cqw;top:11cqh;width:62cqw;height:74cqh;overflow:hidden;white-space:pre;color:var(--cdx-l);font:400 clamp(8px,.95cqw,13px)\/1.6 var(--f-mono);pointer-events:none;\r\n  opacity:calc(var(--e) * .17);-webkit-mask-image:linear-gradient(100deg,#000 30%,transparent 100%);mask-image:linear-gradient(100deg,#000 30%,transparent 100%)}\r\n.cdx-hero .cdx-word{--kk:0;--shp:clamp(0,calc((var(--d) - .44) \/ .52),1);--sh:calc((1 - var(--shp)) * (1 - var(--shp)));--va:-.95em;--vb:-.95em;--vc:.95em;clip-path:inset(-12% -14% -12% -14%);position:absolute;z-index:3;left:4cqw;bottom:calc(var(--barp) + 11.5cqh);display:flex;gap:.03em;\r\n  font-family:var(--f-disp);font-size:min(29.7cqw,62cqh);line-height:.74;text-transform:uppercase;white-space:nowrap;transform:rotate(calc(-1.4deg - var(--sh) * 1.8deg));transform-origin:0 100%;pointer-events:none}\r\n.cdx-hero .cdx-lt{--lp:clamp(0,calc((var(--d) - .24 - var(--li) * .012) \/ .22),1);--le:calc(var(--lp) * var(--lp) * (3 - 2 * var(--lp)));--lo:calc(1 - (1 - var(--lp)) * (1 - var(--lp)) * (1 - var(--lp)));\r\n  --lpb:clamp(0,calc((var(--d) - .29 - var(--li) * .012) \/ .22),1);--lob:calc(1 - (1 - var(--lpb)) * (1 - var(--lpb)) * (1 - var(--lpb)));\r\n  --lpc:clamp(0,calc((var(--d) - .265 - var(--li) * .012) \/ .22),1);--loc:calc(1 - (1 - var(--lpc)) * (1 - var(--lpc)) * (1 - var(--lpc)));\r\n  position:relative;display:grid;width:calc(var(--lw) * 1em);height:.68em}\r\n.cdx-hero .cdx-lt b{grid-area:1\/1;justify-self:center;display:block;height:.68em;padding-top:.03em;line-height:.74;white-space:nowrap;font-weight:800;will-change:transform}\r\n.cdx-hero .cdx-lt .A,.cdx-hero .cdx-lt .C{color:var(--cdx-l);font-stretch:66%}\r\n.cdx-hero .cdx-lt .B{color:var(--cdx-p);font-stretch:66%}\r\n.cdx-hero .cdx-lt .A{clip-path:inset(-6% -80% calc(100% - var(--c1) * 1% + .5%) -80%);\r\n  transform:translate3d(calc(var(--a) * .02em + var(--kk) * var(--a) * .03em - var(--sh) * var(--m) * .13em),calc((1 - var(--lo)) * var(--va)),0)}\r\n.cdx-hero .cdx-lt .B{clip-path:inset(calc(var(--c1) * 1% + .5%) -80% calc(100% - var(--c2) * 1% + .5%) -80%);\r\n  transform:translate3d(calc(var(--a) * -.13em - var(--kk) * var(--a) * .06em + var(--sh) * var(--m) * .26em),calc((1 - var(--lob)) * var(--vb)),0)}\r\n.cdx-hero .cdx-lt .C{clip-path:inset(calc(var(--c2) * 1% + .5%) -80% -6% -80%);\r\n  transform:translate3d(calc(var(--a) * .05em + var(--kk) * var(--a) * .025em - var(--sh) * var(--m) * .07em),calc((1 - var(--loc)) * var(--vc)),0)}\r\n\r\n\/* ============ Signature, CTA, logo ============ *\/\r\n.cdx-hero .cdx-sign{position:absolute;z-index:6;right:4cqw;bottom:calc(var(--barp) + 2.6cqh);text-align:right}\r\n.cdx-hero .cdx-sign .g{display:block;font:400 clamp(10px,.85cqw,12px)\/1.4 Arial,Helvetica,sans-serif;color:#9ca3af;opacity:calc(1 - min(1,var(--e) * 3))}\r\n.cdx-hero .cdx-sign .f{position:absolute;right:0;bottom:0;width:max-content;text-align:right;opacity:clamp(0,calc((var(--e) - .5) * 3),1)}\r\n.cdx-hero .cdx-sign .f b{display:block;margin-bottom:.5em;font:600 clamp(10px,.9cqw,13px)\/1 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--cdx-l)}\r\n.cdx-hero .cdx-sign .f i{display:block;font-family:var(--f-disp);font-weight:800;font-stretch:66%;font-size:clamp(18px,2.8cqw,42px);line-height:.95;letter-spacing:.005em;text-transform:uppercase;color:var(--cdx-w)}\r\n.cdx-hero .cdx-sign .f u{text-decoration:none;color:var(--cdx-p)}\r\n.cdx-hero .cdx-top{position:absolute;z-index:9;left:0;right:0;top:0;height:8.5cqh;display:flex;align-items:center;justify-content:space-between;padding:0 4cqw;color:var(--cdx-k);transition:color 120ms ease-out;pointer-events:none}\r\n.cdx-hero[data-phase=\"lab\"] .cdx-top{color:var(--cdx-w)}\r\n.cdx-hero .cdx-logo{pointer-events:auto;display:inline-block;color:inherit;text-decoration:none;line-height:1}\r\n.cdx-hero .cdx-logo__txt{font-family:var(--f-disp);font-weight:900;font-stretch:62%;font-size:clamp(24px,2.5cqw,38px);letter-spacing:.01em;text-transform:uppercase}\r\n.cdx-hero .cdx-logo__img{display:block;width:var(--cdx-logo-w,11cqw);height:auto;max-width:none}\r\n.cdx-hero .cdx-tag{font:600 clamp(10px,.85cqw,12px)\/1.3 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;text-align:right;opacity:0;transition:opacity 120ms ease-out}\r\n.cdx-hero[data-phase=\"lab\"] .cdx-tag{opacity:1}\r\n\r\n.cdx-hero .cdx-cta{--s:.5;--w:.5;position:absolute;z-index:8;left:4cqw;bottom:calc(var(--barp) + 2cqh);display:inline-flex;align-items:center;gap:.7em;padding:1.5cqh 1.7cqw;background:var(--cdx-l);color:var(--cdx-k);border:3px solid var(--cdx-k);outline:2px solid var(--cdx-l);text-decoration:none;font-family:var(--f-disp);font-weight:900;font-stretch:72%;font-size:clamp(15px,1.7cqw,26px);line-height:1;letter-spacing:.02em;text-transform:uppercase;\r\n  --ty:calc(var(--e) * -2deg);box-shadow:5px 5px 0 var(--cdx-p);transform:rotate(var(--ty)) scale(calc(1 + var(--e) * .1));transform-origin:0 100%;transition:box-shadow 160ms var(--out),translate 160ms var(--out)}\r\n.cdx-hero .cdx-cta span{display:inline-block;transition:transform 160ms var(--out)}\r\n.cdx-hero .cdx-cta:active{translate:3px 3px;box-shadow:2px 2px 0 var(--cdx-p)}\r\n@media (hover:hover) and (pointer:fine){\r\n  .cdx-hero .cdx-cta:hover{translate:-2px -2px;box-shadow:8px 8px 0 var(--cdx-p)}\r\n  .cdx-hero .cdx-cta:hover span{transform:translate(3px,-3px)}\r\n  .cdx-hero .cdx-cta:hover:active{translate:3px 3px;box-shadow:2px 2px 0 var(--cdx-p)}\r\n}\r\n.cdx-hero .cdx-logo:focus-visible,.cdx-hero .cdx-cta:focus-visible{outline:3px solid var(--cdx-p);outline-offset:4px}\r\n\r\n\/* ============ Barre de dose (contr\u00f4le accessible) ============ *\/\r\n.cdx-hero .cdx-bar{position:absolute;z-index:10;left:0;right:0;bottom:0;height:var(--barp);background:var(--cdx-k);border-top:3px solid var(--cdx-l);display:flex;align-items:center;gap:2.4cqw;padding:0 4cqw;color:var(--cdx-w);cursor:default}\r\n.cdx-hero .cdx-lbl{flex:none;width:20cqw;font:600 clamp(10px,.82cqw,12px)\/1.5 var(--f-mono);letter-spacing:.14em;text-transform:uppercase}\r\n.cdx-hero .cdx-lbl em{display:block;color:var(--cdx-p)}\r\n.cdx-hero .cdx-lbl small{display:block;color:rgba(245,244,239,.72);font-size:.95em;letter-spacing:.1em;font-weight:400}\r\n.cdx-hero .cdx-rail{flex:1;min-width:0}\r\n.cdx-hero .cdx-num{flex:none;font-family:var(--f-disp);font-weight:900;font-stretch:62%;font-size:clamp(36px,4.2cqw,66px);line-height:.9;font-variant-numeric:tabular-nums;color:var(--cdx-l);min-width:2.5em;text-align:right}\r\n.cdx-hero .cdx-num small{font-size:.45em;margin-left:.08em}\r\n.cdx-hero .cdx-range{-webkit-appearance:none;appearance:none;display:block;width:100%;height:32px;margin:0;padding:0;background:transparent;cursor:ew-resize;touch-action:pan-y;border-radius:0}\r\n.cdx-hero .cdx-range::-webkit-slider-runnable-track{height:12px;border:0;background:linear-gradient(90deg,var(--cdx-l) var(--fill,0%),#2a2e36 var(--fill,0%))}\r\n.cdx-hero .cdx-range::-moz-range-track{height:12px;border:0;background:#2a2e36}\r\n.cdx-hero .cdx-range::-moz-range-progress{height:12px;background:var(--cdx-l)}\r\n.cdx-hero .cdx-range::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:32px;margin-top:-10px;background:var(--cdx-p);border:3px solid var(--cdx-w);border-radius:0;transition:transform 140ms var(--out)}\r\n.cdx-hero .cdx-range::-moz-range-thumb{width:14px;height:26px;background:var(--cdx-p);border:3px solid var(--cdx-w);border-radius:0}\r\n.cdx-hero .cdx-range:active::-webkit-slider-thumb{transform:scaleY(.9)}\r\n.cdx-hero .cdx-range:focus{outline:none}\r\n.cdx-hero .cdx-range:focus-visible{outline:3px solid var(--cdx-p);outline-offset:4px}\r\n.cdx-hero .cdx-ticks{display:flex;justify-content:space-between;font:400 10px\/1 var(--f-mono);letter-spacing:.08em;color:rgba(245,244,239,.72);margin-top:2px}\r\n\r\n\/* ============ Mobile : mot vertical, mutation recompos\u00e9e ============ *\/\r\n@media (max-width:720px){\r\n  .cdx-hero{--barp:17%;--far:140cqh;--gty:30cqh;height:clamp(720px,100svh,940px)}\r\n  .cdx-hero .cdx-nav{height:8cqh;font-size:12px}.cdx-hero .cdx-nav span{margin-left:14px}\r\n  .cdx-hero .cdx-gt{top:16cqh;font-size:8.2cqw}\r\n  .cdx-hero .cdx-gp{width:84cqw;font-size:4cqw}\r\n  .cdx-hero .cdx-msg{left:calc(8cqw + (39cqw - 8cqw) * var(--e));top:calc(25cqh + (11cqh - 25cqh) * var(--e))}\r\n  .cdx-hero .cdx-h1{font-size:12.6cqw}\r\n  .cdx-hero .cdx-slab{left:calc(33cqw + (39cqw - 33cqw) * var(--e));top:calc(35cqh + (35cqh - 35cqh) * var(--e));font-size:calc(3.6cqw + (6.3cqw - 3.6cqw) * var(--e))}\r\n  .cdx-hero .cdx-card{--gl:calc(6cqw + var(--col) * 45cqw);--gt:calc(42cqh + var(--row) * 13cqh);--gw:43cqw;--gh:11.5cqh;--fl:39cqw;--ft:calc(49.5cqh + var(--n) * 4.6cqh);--fw:57cqw;--fh:4.2cqh}\r\n  .cdx-hero .cdx-card .g{padding:10px;font-size:11px}.cdx-hero .cdx-card .g span{display:none}.cdx-hero .cdx-card .f{font-size:10px}\r\n  .cdx-hero .cdx-note{font-size:10px}\r\n  .cdx-hero .cdx-word{left:0;bottom:auto;top:calc(100% - var(--barp) - 1cqh);transform-origin:0 0;transform:rotate(-90deg);font-size:22cqh}\r\n  .cdx-hero .cdx-code{left:2cqw;width:96cqw;font-size:9px;top:10cqh}\r\n  .cdx-hero .cdx-tag{display:none}\r\n  .cdx-hero .cdx-sign{right:4cqw;left:auto;bottom:calc(var(--barp) + 1.6cqh)}\r\n  .cdx-hero .cdx-sign .f i{font-size:4.5cqw}.cdx-hero .cdx-sign .f i br{display:none}.cdx-hero .cdx-sign .f b{font-size:9px;margin-bottom:.3em}\r\n  .cdx-hero .cdx-cta{left:4cqw;right:4cqw;bottom:calc(var(--barp) + 7cqh);justify-content:center;padding:1.3cqh 4cqw;font-size:clamp(16px,5.2cqw,22px);transform-origin:50% 100%}\r\n  .cdx-hero .cdx-bar{flex-wrap:wrap;align-content:center;gap:.4cqh 3cqw;padding:0 4cqw}\r\n  .cdx-hero .cdx-lbl{width:auto;flex:1;display:flex;gap:2cqw;align-items:baseline}\r\n  .cdx-hero .cdx-lbl small{display:none}\r\n  .cdx-hero .cdx-num{order:2;font-size:44px;min-width:0}\r\n  .cdx-hero .cdx-rail{order:3;flex:1 0 100%}\r\n}\r\n\r\n@media (prefers-reduced-motion:reduce){\r\n  .cdx-hero .cdx-cta,.cdx-hero .cdx-cta span,.cdx-hero .cdx-range::-webkit-slider-thumb,.cdx-hero .cdx-top,.cdx-hero .cdx-tag{transition:none}\r\n}\r\n<\/style>\r\n\r\n<section class=\"cdx-hero\" id=\"cdx-hero\" data-phase=\"lab\" aria-labelledby=\"cdx-h1\">\r\n<script>(function(){var r=document.getElementById('cdx-hero');if(r&&!window.matchMedia('(prefers-reduced-motion: reduce)').matches&&!document.body.classList.contains('elementor-editor-active')){r.style.setProperty('--d','0');r.setAttribute('data-phase','dull');}})();<\/script>\r\n\r\n  <!-- Tranches : incision puis remplacement tranche par tranche (du bas vers le haut) -->\r\n  <i class=\"cdx-cut cdx-m\" style=\"--s:.04;--w:.14\" aria-hidden=\"true\"><\/i>\r\n  <i class=\"cdx-strip cdx-m\" style=\"--t:75cqh;--dir:-1;--s:.20;--w:.32\" aria-hidden=\"true\"><\/i>\r\n  <i class=\"cdx-strip cdx-m\" style=\"--t:50cqh;--dir:1;--s:.28;--w:.32\" aria-hidden=\"true\"><\/i>\r\n  <i class=\"cdx-strip cdx-m\" style=\"--t:25cqh;--dir:-1;--s:.36;--w:.34\" aria-hidden=\"true\"><\/i>\r\n  <i class=\"cdx-strip cdx-m\" style=\"--t:0cqh;--dir:1;--s:.44;--w:.38\" aria-hidden=\"true\"><\/i>\r\n\r\n  <!-- Site g\u00e9n\u00e9rique : la m\u00eame interface, avant mutation -->\r\n  <div class=\"cdx-nav cdx-m\" style=\"--s:.06;--w:.2\" aria-hidden=\"true\"><span>Accueil<\/span><span>\u00c0 propos<\/span><span>Services<\/span><span>Contact<\/span><\/div>\r\n  <div class=\"cdx-gt cdx-m\" style=\"--s:.22;--w:.30\" aria-hidden=\"true\">Bienvenue chez Codeine<\/div>\r\n  <span class=\"cdx-note\" style=\"--a:.07;--r:-3deg;left:68cqw;top:19.5cqh\" aria-hidden=\"true\">\u00ab Bienvenue chez \u00bb. Original.<\/span>\r\n  <span class=\"cdx-note\" style=\"--a:.15;--r:2deg;left:60cqw;top:47.4cqh;--len:3cqw\" aria-hidden=\"true\">Bleu par d\u00e9faut. Comme tout le monde.<\/span>\r\n  <span class=\"cdx-note\" style=\"--a:.23;--r:-2deg;left:66cqw;top:56cqh\" aria-hidden=\"true\">4 cartes identiques. D\u00e9j\u00e0 vu.<\/span>\r\n  <span class=\"cdx-note\" style=\"--a:.31;--r:4deg;left:70cqw;top:33cqh\" aria-hidden=\"true\">Diagnostic : ennui terminal<\/span>\r\n\r\n  <pre class=\"cdx-code cdx-m\" style=\"--s:.40;--w:.4\" aria-hidden=\"true\">&lt;section class=\"site-generique\"&gt;\r\n  &lt;h1&gt;Bienvenue chez nous&lt;\/h1&gt;\r\n  &lt;p&gt;solutions innovantes, orient\u00e9es r\u00e9sultats&lt;\/p&gt;\r\n  &lt;button class=\"bleu-par-defaut\"&gt;En savoir plus&lt;\/button&gt;\r\n&lt;\/section&gt;\r\n\r\n\/* TODO: supprimer ce template *\/\r\n.carte { border-radius: 14px; \/* d\u00e9j\u00e0 vu *\/ }\r\n.carte:nth-child(n) { identique: oui; }\r\n\r\nconst dose = prompt(\"niveau de caract\u00e8re ?\");\r\nwhile (web.estGris) { ajouterDuCaractere(); }\r\nif (site.estEnnuyeux) { site.muter(); }\r\n\r\n\/\/ pas de magie. du code.\r\n\/\/ du code propre. des id\u00e9es sales.\r\ngit commit -m \"fin de l'ennui\"\r\nreturn &lt;Template \/&gt;  \/\/ non.\r\n<\/pre>\r\n\r\n  <div class=\"cdx-msg cdx-m\" style=\"--s:.24;--w:.54\">\r\n    <p class=\"cdx-gp\" aria-hidden=\"true\">Votre partenaire de confiance pour des solutions innovantes, sur mesure et orient\u00e9es r\u00e9sultats.<\/p>\r\n    <h1 class=\"cdx-h1\" id=\"cdx-h1\"><span class=\"cdx-ln\">Internet est d\u00e9j\u00e0<\/span><span class=\"cdx-ln\">assez <span class=\"cdx-strike\">ennuyeux.<\/span><\/span><span class=\"cdx-sr\"> N'en rajoutons pas.<\/span><\/h1>\r\n  <\/div>\r\n  <div class=\"cdx-slab cdx-m\" style=\"--s:.18;--w:.52\" aria-hidden=\"true\"><span class=\"g\">En savoir plus<\/span><span class=\"f\">N'en rajoutons pas.<\/span><\/div>\r\n\r\n  <ul class=\"cdx-cards\" aria-label=\"Prestations\">\r\n    <li class=\"cdx-card cdx-m\" style=\"--n:0;--col:0;--row:0;--r:-5deg;--s:.10;--w:.28\"><div class=\"g\" aria-hidden=\"true\"><i><\/i><b>Innovation<\/b><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<\/span><\/div><div class=\"f\"><span>01<\/span>Cr\u00e9ation de sites web<\/div><\/li>\r\n    <li class=\"cdx-card cdx-m\" style=\"--n:1;--col:1;--row:0;--r:3deg;--s:.135;--w:.28\"><div class=\"g\" aria-hidden=\"true\"><i><\/i><b>Qualit\u00e9<\/b><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<\/span><\/div><div class=\"f\"><span>02<\/span>D\u00e9veloppement sur mesure<\/div><\/li>\r\n    <li class=\"cdx-card cdx-m\" style=\"--n:2;--col:0;--row:1;--r:-2deg;--s:.17;--w:.28\"><div class=\"g\" aria-hidden=\"true\"><i><\/i><b>Service<\/b><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<\/span><\/div><div class=\"f\"><span>03<\/span>WordPress &amp; extensions<\/div><\/li>\r\n    <li class=\"cdx-card cdx-m\" style=\"--n:3;--col:1;--row:1;--r:4deg;--s:.205;--w:.28\"><div class=\"g\" aria-hidden=\"true\"><i><\/i><b>Expertise<\/b><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<\/span><\/div><div class=\"f\"><span>04<\/span>Optimisation<\/div><\/li>\r\n  <\/ul>\r\n\r\n  <!-- LE MOT : lettres en trois strates (grotesque condens\u00e9 \/ extra-large rose \/ mono), r\u00e9assembl\u00e9es par la dose -->\r\n  <div class=\"cdx-word\" role=\"img\" aria-label=\"CODEINE\">\r\n    <span class=\"cdx-lt\" style=\"--li:0;--m:1;--xl:0;--xr:0.465;--a:-0.9;--sg:1;--c1:36;--c2:46;--lw:0.465\" aria-hidden=\"true\"><b class=\"A\">C<\/b><b class=\"B\">C<\/b><b class=\"C\">C<\/b><\/span>\r\n    <span class=\"cdx-lt\" style=\"--li:1;--m:0.9;--xl:0.495;--xr:0.965;--a:0.7;--sg:-1;--c1:52;--c2:66;--lw:0.47\" aria-hidden=\"true\"><b class=\"A\">O<\/b><b class=\"B\">O<\/b><b class=\"C\">O<\/b><\/span>\r\n    <span class=\"cdx-lt\" style=\"--li:2;--m:1.1;--xl:0.995;--xr:1.46;--a:-0.5;--sg:1;--c1:30;--c2:40;--lw:0.465\" aria-hidden=\"true\"><b class=\"A\">D<\/b><b class=\"B\">D<\/b><b class=\"C\">D<\/b><\/span>\r\n    <span class=\"cdx-lt\" style=\"--li:3;--m:0.9;--xl:1.49;--xr:1.846;--a:1;--sg:-1;--c1:42;--c2:56;--lw:0.356\" aria-hidden=\"true\"><b class=\"A\">E<\/b><b class=\"B\">E<\/b><b class=\"C\">E<\/b><\/span>\r\n    <span class=\"cdx-lt\" style=\"--li:4;--m:1.1;--xl:1.876;--xr:2.108;--a:-1;--sg:1;--c1:38;--c2:54;--lw:0.232\" aria-hidden=\"true\"><b class=\"A\">I<\/b><b class=\"B\">I<\/b><b class=\"C\">I<\/b><\/span>\r\n    <span class=\"cdx-lt\" style=\"--li:5;--m:0.9;--xl:2.138;--xr:2.71;--a:0.6;--sg:-1;--c1:55;--c2:66;--lw:0.572\" aria-hidden=\"true\"><b class=\"A\">N<\/b><b class=\"B\">N<\/b><b class=\"C\">N<\/b><\/span>\r\n    <span class=\"cdx-lt\" style=\"--li:6;--m:1;--xl:2.74;--xr:3.096;--a:-0.8;--sg:1;--c1:33;--c2:44;--lw:0.356\" aria-hidden=\"true\"><b class=\"A\">E<\/b><b class=\"B\">E<\/b><b class=\"C\">E<\/b><\/span>\r\n  <\/div>\r\n\r\n  <div class=\"cdx-sign cdx-m\" style=\"--s:.45;--w:.45\"><span class=\"g\" aria-hidden=\"true\">\u00a9 2026 Votre entreprise SA \u2014 Tous droits r\u00e9serv\u00e9s.<\/span><span class=\"f\"><b>Codeine \u2014<\/b><i>Le web a besoin <br>de <u>caract\u00e8re.<\/u><\/i><\/span><\/div>\r\n\r\n  <div class=\"cdx-top\">\r\n    <!-- LOGO : remplacez le <span> par <img decoding=\"async\" class=\"cdx-logo__img\" src=\"URL-DE-VOTRE-LOGO.svg\" alt=\"Codeine\"> (largeur via --cdx-logo-w) -->\r\n    <a class=\"cdx-logo\" href=\"\/\" aria-label=\"Codeine \u2014 accueil\"><span class=\"cdx-logo__txt\">Codeine<\/span><\/a>\r\n    <p class=\"cdx-tag\">Labo num\u00e9rique ind\u00e9pendant<br>Suisse<\/p>\r\n  <\/div>\r\n\r\n  <!-- Remplacez \/contact\/ par l'URL de votre page de contact -->\r\n  <a class=\"cdx-cta cdx-m\" href=\"\/contact\/\">Parlons de votre projet <span aria-hidden=\"true\">\u2197<\/span><\/a>\r\n\r\n  <div class=\"cdx-bar\">\r\n    <div class=\"cdx-lbl\"><label for=\"cdx-range\">Niveau de caract\u00e8re<\/label><em data-cdx-state aria-hidden=\"true\">codeine<\/em><small aria-hidden=\"true\">Glissez la page, ou ce curseur.<\/small><\/div>\r\n    <div class=\"cdx-rail\">\r\n      <input class=\"cdx-range\" id=\"cdx-range\" type=\"range\" min=\"0\" max=\"100\" step=\"1\" value=\"100\" aria-valuetext=\"100 %, codeine\" aria-controls=\"cdx-hero\">\r\n      <div class=\"cdx-ticks\" aria-hidden=\"true\"><span>0<\/span><span>25<\/span><span>50<\/span><span>75<\/span><span>100<\/span><\/div>\r\n    <\/div>\r\n    <div class=\"cdx-num\" aria-hidden=\"true\"><span data-cdx-num>100<\/span><small>%<\/small><\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<script>\r\n(function(){\r\n  'use strict';\r\n  var root=document.getElementById('cdx-hero');\r\n  if(!root||root.__cdx)return;root.__cdx=1;\r\n  var $=function(s){return root.querySelector(s)};\r\n  var range=$('.cdx-range'),outNum=$('[data-cdx-num]'),outState=$('[data-cdx-state]'),word=$('.cdx-word');\r\n  var mqReduce=window.matchMedia('(prefers-reduced-motion: reduce)');\r\n  var editor=document.body.classList.contains('elementor-editor-active');\r\n  var calm=function(){return editor||mqReduce.matches};\r\n  var STATES=[[0,'ennuyeux'],[10,'ti\u00e8de'],[35,'suspect'],[60,'inqui\u00e9tant'],[85,'dangereux'],[100,'codeine']];\r\n\r\n  var d=root.getAttribute('data-phase')==='dull'?0:1,lastP=-1,auto=0,raf=0,last=0,fired=0;\r\n  var kk=0,kv=0; \/\/ ressort de la \u00ab d\u00e9tonation \u00bb (cisaillement des strates)\r\n  function eo(u,p){return 1-Math.pow(1-u,p)}\r\n  function eio(u){return u<.5?4*u*u*u:1-Math.pow(-2*u+2,3)\/2}\r\n  function clamp(v,a,b){return v<a?a:v>b?b:v}\r\n  function stateOf(p){var s=STATES[0][1];for(var k=0;k<STATES.length;k++)if(p>=STATES[k][0])s=STATES[k][1];return s}\r\n\r\n  function setD(v){\r\n    d=clamp(v,0,1);\r\n    root.style.setProperty('--d',d.toFixed(4));\r\n    root.setAttribute('data-phase',d>=.8?'lab':'dull');\r\n    var p=Math.round(d*100);\r\n    if(p!==lastP){\r\n      lastP=p;var st=stateOf(p);\r\n      outNum.textContent=p;outState.textContent=st;\r\n      range.value=p;range.style.setProperty('--fill',p+'%');\r\n      range.setAttribute('aria-valuetext',p+' %, '+st);\r\n    }\r\n  }\r\n  function kick(v){if(calm())return;kv+=v;schedule()}\r\n\r\n  \/* Chor\u00e9graphie : malaise -> accident -> mutation -> d\u00e9tonation *\/\r\n  function stepAuto(t){\r\n    var e=t-auto,v;\r\n    if(e<900)v=0;                                       \/\/ 1. le site banal, sans rien d'autre\r\n    else if(e<1160)v=.12*eo((e-900)\/260,3);             \/\/ 2. premier accident : encre, menu qui tombe\r\n    else if(e<1500)v=.12;                               \/\/    suspension\r\n    else if(e<2400){v=.12+.5*eio((e-1500)\/900)}        \/\/ 3. la mutation majeure\r\n    else if(e<3100){v=.62+.38*eo((e-2400)\/700,4);       \/\/ 4. r\u00e9v\u00e9lation\r\n      if(fired<1){fired=1;kick(9)}}\r\n    else{v=1;auto=0;kick(-6)}\r\n    setD(v);\r\n  }\r\n\r\n  function tick(now){\r\n    raf=0;\r\n    var dt=Math.min(.034,(now-last)\/1000||.016);last=now;var busy=false;\r\n    if(auto){stepAuto(now);busy=true}\r\n    if(!calm()){\r\n      kv+=(-130*kk-9*kv)*dt;kk+=kv*dt;\r\n      if(Math.abs(kk)+Math.abs(kv)>.01){busy=true}else{kk=0;kv=0}\r\n      word.style.setProperty('--kk',kk.toFixed(3));\r\n    }\r\n    if(busy)schedule();\r\n  }\r\n  function schedule(){if(!raf)raf=requestAnimationFrame(tick)}\r\n\r\n  \/* Contr\u00f4le accessible *\/\r\n  range.addEventListener('input',function(){auto=0;setD(range.value\/100)});\r\n  range.addEventListener('pointerdown',function(){auto=0});\r\n  root.addEventListener('keydown',function(){auto=0});\r\n\r\n  \/* Manipulation directe : glisser horizontalement sur la page (le d\u00e9filement vertical reste libre) *\/\r\n  if(!editor){\r\n    var drag=null;\r\n    root.addEventListener('pointerdown',function(e){\r\n      if(e.button>0||e.target.closest('a,input,label'))return;\r\n      auto=0;drag={id:e.pointerId,x:e.clientX,y:e.clientY,d0:d,on:false};\r\n    });\r\n    root.addEventListener('pointermove',function(e){\r\n      if(!drag||e.pointerId!==drag.id)return;\r\n      var dx=e.clientX-drag.x,dy=e.clientY-drag.y;\r\n      if(!drag.on){\r\n        if(Math.abs(dx)>8&&Math.abs(dx)>Math.abs(dy)*1.3){drag.on=true;try{root.setPointerCapture(e.pointerId)}catch(_){}}\r\n        else return;\r\n      }\r\n      setD(drag.d0+dx\/(root.clientWidth*.55));\r\n    });\r\n    var end=function(e){if(drag&&e.pointerId===drag.id){if(drag.on)kick(clamp((d-drag.d0)*6,-5,5));drag=null}};\r\n    root.addEventListener('pointerup',end);root.addEventListener('pointercancel',end);\r\n  }\r\n\r\n  \/* D\u00e9marrage *\/\r\n  if(calm()||d===1){setD(1);return}\r\n  setD(0);\r\n  var started=false;\r\n  function go(){if(started)return;started=true;last=performance.now();auto=last;schedule()}\r\n  if(document.fonts&&document.fonts.ready){document.fonts.ready.then(go);setTimeout(go,1400)}else go();\r\n})();\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-383ec3f e-flex e-con-boxed e-con e-parent\" data-id=\"383ec3f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e15f9f5 elementor-widget elementor-widget-html\" data-id=\"e15f9f5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ===== CODEINE \u2014 SECTION 02 \u00ab LE MUS\u00c9E DES HORREURS DU WEB \u2014 RESTAURATION INTERDITE \u00bb (widget HTML Elementor gratuit) ===== -->\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Anybody:wdth,wght@50..150,100..900&family=IBM+Plex+Mono:wght@400;600;700&family=Instrument+Serif:ital@0;1&display=swap\">\r\n\r\n<style>\r\n\/* ============ Racine & tokens (pr\u00e9fixe cdm-) ============ *\/\r\n.cdm{\r\n  --k:#0B0D11;--l:#B8FF37;--w:#F5F4EF;--p:#FF4D6D;--s:#666B77;\r\n  --f-disp:'Anybody','Archivo Narrow',Impact,'Arial Narrow',sans-serif;\r\n  --f-serif:'Instrument Serif','Times New Roman',Georgia,serif;\r\n  --f-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;\r\n  --out:cubic-bezier(.23,1,.32,1);\r\n  position:relative;container-type:inline-size;width:100%;overflow:clip;isolation:isolate;\r\n  background:var(--w);color:var(--k);font-family:var(--f-mono);line-height:1.25;text-align:left;\r\n  padding:clamp(56px,8vw,120px) 0 clamp(64px,9vw,130px);-webkit-font-smoothing:antialiased;\r\n}\r\n.cdm *,.cdm *::before,.cdm *::after{box-sizing:border-box}\r\n.cdm h2,.cdm p,.cdm ul{margin:0;padding:0;list-style:none;font-weight:inherit}\r\n.cdm button{font:inherit;color:inherit;margin:0;border-radius:0;-webkit-appearance:none;appearance:none}\r\n.cdm [hidden]{display:none!important}\r\n.cdm :focus{outline:none}\r\n.cdm :focus-visible{outline:3px solid var(--p);outline-offset:4px}\r\n\r\n\/* ============ En-t\u00eate ============ *\/\r\n.cdm .cdm-head{position:relative;padding:0 4cqw}\r\n.cdm .cdm-kicker{font:600 clamp(10px,.85cqw,12px)\/1.4 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;margin-bottom:2.4cqw}\r\n.cdm .cdm-title{font-family:var(--f-disp);font-weight:900;font-stretch:66%;font-size:min(10.6cqw,20vh);line-height:.84;text-transform:uppercase;letter-spacing:-.005em}\r\n.cdm .cdm-title span{display:block}\r\n.cdm .cdm-title span:last-child{margin-left:9cqw}\r\n.cdm .cdm-stamp{position:absolute;right:5cqw;top:2.6cqw;width:fit-content;background:var(--p);color:var(--k);padding:.28em .55em .34em;font:900 clamp(16px,3.4cqw,52px)\/.95 var(--f-disp);font-stretch:68%;text-transform:uppercase;transform:rotate(-5deg);transform-origin:100% 0;box-shadow:.5cqw .5cqw 0 var(--k)}\r\n.cdm .cdm-sign{margin:3.4cqw 0 0 auto;max-width:39cqw;font:italic 400 clamp(26px,4.2cqw,64px)\/.95 var(--f-serif)}\r\n.cdm .cdm-sign em{font-style:italic;background:linear-gradient(transparent 62%,var(--l) 62% 92%,transparent 92%)}\r\n.cdm .cdm-sub{margin:1.4cqw 0 0 auto;max-width:39cqw;font:italic 400 clamp(16px,1.7cqw,26px)\/1.2 var(--f-serif);color:var(--s)}\r\n.cdm .cdm-rule{position:absolute;left:4cqw;bottom:0;max-width:27cqw;border:2px solid var(--k);padding:.8cqw 1cqw;font:600 clamp(10px,.82cqw,12px)\/1.45 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;background:var(--w)}\r\n.cdm .cdm-rule b{background:var(--k);color:var(--l);padding:0 .35em;font-weight:700}\r\n\r\n\/* ============ Le mur : accrochage asym\u00e9trique ============ *\/\r\n.cdm .cdm-wall{display:grid;grid-template-columns:repeat(12,1fr);column-gap:2cqw;row-gap:7cqw;padding:8cqw 4cqw 0;align-items:start}\r\n.cdm .cdm-work{position:relative;--tilt:0deg;--hang:2.2deg;transform-origin:50% 0}\r\n.cdm .cdm-w1{grid-column:1 \/ span 6;grid-row:1;--tilt:-.7deg}\r\n.cdm .cdm-w2{grid-column:8 \/ span 5;grid-row:1;margin-top:5cqw;--tilt:.9deg;--hang:-2.2deg}\r\n.cdm .cdm-w4{grid-column:1 \/ span 4;grid-row:2;margin-top:7cqw;--tilt:-1.3deg}\r\n.cdm .cdm-w3{grid-column:5 \/ span 8;grid-row:2;--tilt:.4deg;--hang:-1.6deg}\r\n.cdm .cdm-work{transform:rotate(var(--tilt))}\r\n.cdm.cdm-js .cdm-work{opacity:0;transform:translate3d(0,-1.2cqw,0) rotate(calc(var(--tilt) + var(--hang)))}\r\n.cdm.cdm-js .cdm-work.is-in{opacity:1;transform:rotate(var(--tilt));transition:opacity 280ms ease-out,transform 760ms cubic-bezier(.34,1.45,.64,1)}\r\n\r\n.cdm .cdm-frame{background:#fff;border:clamp(8px,1.1cqw,16px) solid var(--k)}\r\n.cdm .cdm-mat{padding:clamp(6px,1.1cqw,16px);background:#fff}\r\n.cdm .cdm-cartel{position:relative;z-index:3;margin:-1.4cqw 0 0 2cqw;width:min(calc(100% - 2cqw),30cqw);background:var(--w);border:2px solid var(--k);padding:.9cqw 1.1cqw 1cqw}\r\n.cdm .cdm-w2 .cdm-cartel,.cdm .cdm-w3 .cdm-cartel{margin-left:auto;margin-right:2cqw}\r\n.cdm .cdm-cartel .n{font:700 clamp(10px,.8cqw,12px)\/1 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--s)}\r\n.cdm .cdm-cartel .t{margin:.45em 0 .35em;font:900 clamp(15px,1.55cqw,24px)\/.95 var(--f-disp);font-stretch:66%;text-transform:uppercase}\r\n.cdm .cdm-cartel .d{font:italic 400 clamp(13px,1.15cqw,18px)\/1.15 var(--f-serif);color:#2a2e36}\r\n.cdm .cdm-cartel .v{margin-top:.55em;font:italic 400 clamp(15px,1.4cqw,22px)\/1.05 var(--f-serif)}\r\n.cdm .cdm-cartel .v u{text-decoration:none;box-shadow:inset 0 -.42em 0 var(--p)}\r\n.cdm .cdm-live{display:inline-block;margin-top:.7em;background:var(--k);color:var(--l);padding:.35em .65em;font:700 clamp(9px,.78cqw,12px)\/1.2 var(--f-mono);letter-spacing:.1em;text-transform:uppercase}\r\n\r\n\/* ============ \u00c9l\u00e9ments communs aux \u0153uvres ============ *\/\r\n.cdm .cdm-btn{display:inline-block;background:var(--k);color:var(--w);border:3px solid var(--k);padding:.75em 1.1em;font:800 clamp(11px,1.02cqw,15px)\/1 var(--f-disp);font-stretch:70%;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;min-height:44px;transition:transform 160ms var(--out),background-color 160ms var(--out),color 160ms var(--out)}\r\n.cdm .cdm-btn--pink{background:var(--p);color:var(--k)}\r\n.cdm .cdm-btn--ghost{background:transparent;color:var(--k)}\r\n.cdm .cdm-btn:active{transform:scale(.97)}\r\n.cdm .cdm-btn[aria-pressed=\"true\"]{background:var(--l);color:var(--k)}\r\n@media (hover:hover) and (pointer:fine){.cdm .cdm-btn:hover{background:var(--l);color:var(--k)}.cdm .cdm-btn--ghost:hover{background:var(--k);color:var(--w)}}\r\n.cdm .cdm-tools{display:flex;flex-wrap:wrap;gap:.8cqw 1cqw;margin-top:1.4cqw}\r\n\r\n\/* ============ \u0152uvre 001 : le template clon\u00e9 ============ *\/\r\n.cdm .cdm-site{position:relative;aspect-ratio:5\/4;background:#fff;color:#1f2937;font-family:Arial,Helvetica,sans-serif;overflow:hidden;display:flex;flex-direction:column;padding:3.4% 3.8%;gap:3%}\r\n.cdm .cdm-site__bar{display:flex;justify-content:space-between;align-items:center;font-size:clamp(9px,1cqw,14px);color:#4b5563;border-bottom:1px solid #e5e7eb;padding-bottom:2%}\r\n.cdm .cdm-site__h{margin:0;text-align:center;font-weight:700;font-size:clamp(13px,2cqw,28px);line-height:1.15;transition:opacity 140ms}\r\n.cdm .cdm-site__h.is-out{opacity:0}\r\n.cdm .cdm-blks{flex:1;min-height:0;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:3%}\r\n.cdm .cdm-blk{position:relative;padding:0;border:0;background:#fff;border-radius:8px;text-align:left;cursor:pointer;box-shadow:0 1px 8px rgba(0,0,0,.18);\r\n  transform:translate3d(0,0,0) rotate(0) scale(1);transition:transform 460ms var(--out),background-color 120ms linear,border-radius 120ms linear,box-shadow 160ms linear}\r\n.cdm .cdm-blk .a,.cdm .cdm-blk .b{position:absolute;inset:0;display:flex}\r\n.cdm .cdm-blk .a{flex-direction:column;gap:4%;padding:7%;font-size:clamp(8px,.95cqw,13px);line-height:1.3;color:#6b7280;transition:opacity 120ms linear 140ms}\r\n.cdm .cdm-blk .a i{flex:1;min-height:0;display:grid;place-items:center;background:#e5e7eb;font-style:normal;font-size:.85em;color:#9ca3af}\r\n.cdm .cdm-blk .a b{color:#111827;font-size:1.25em}\r\n.cdm .cdm-blk .b{align-items:center;justify-content:center;text-align:center;padding:8%;opacity:0;color:var(--fg);font:900 clamp(13px,2.2cqw,32px)\/.92 var(--f-disp);font-stretch:62%;text-transform:uppercase;transition:opacity 120ms linear}\r\n.cdm .cdm-blk.is-free{z-index:var(--z);background:var(--bg);border-radius:0;box-shadow:none;transform:translate3d(var(--tx),var(--ty),0) rotate(var(--r)) scale(var(--sc))}\r\n.cdm .cdm-blk.is-free .a{opacity:0;transition-delay:0ms}\r\n.cdm .cdm-blk.is-free .b{opacity:1;transition-delay:180ms}\r\n.cdm .cdm-site.is-done{background:var(--w)}\r\n@media (hover:hover) and (pointer:fine){.cdm .cdm-blk:not(.is-free):hover{transform:translate3d(0,-2%,0) rotate(-.6deg)}}\r\n.cdm .cdm-blk:active{filter:brightness(.97)}\r\n\r\n\/* ============ \u0152uvre 002 : le bouton qui ne sert \u00e0 rien ============ *\/\r\n.cdm .cdm-p2{background:#fff;color:#111827;font-family:Arial,Helvetica,sans-serif;padding:5% 5% 4%;display:flex;flex-direction:column;gap:clamp(8px,1.3cqw,18px)}\r\n.cdm .cdm-p2__t{text-align:center;font-weight:600;font-size:clamp(13px,1.6cqw,22px)}\r\n.cdm .cdm-guard{min-height:4.2em;display:flex;align-items:center;border-left:5px solid var(--p);background:var(--w);padding:.6em .9em;font:600 clamp(11px,1.02cqw,15px)\/1.35 var(--f-mono);color:var(--k)}\r\n.cdm .cdm-guard b{color:var(--s);margin-right:.6em;font-weight:600;letter-spacing:.1em;text-transform:uppercase}\r\n.cdm .cdm-big{display:flex;align-items:center;justify-content:center;gap:.5em;width:100%;min-height:clamp(96px,15cqw,210px);border:0;border-radius:14px;background:#2563eb;color:#fff;cursor:pointer;text-decoration:none;font:700 clamp(22px,4.4cqw,66px)\/1 Arial,Helvetica,sans-serif;transition:transform 160ms var(--out),background-color 200ms linear,border-radius 200ms linear}\r\n.cdm .cdm-big:active{transform:scale(.985)}\r\n.cdm .cdm-p2[data-step=\"2\"] .cdm-big,.cdm .cdm-p2[data-step=\"3\"] .cdm-big,.cdm .cdm-p2[data-step=\"4\"] .cdm-big{font-family:var(--f-disp);font-weight:900;font-stretch:66%;text-transform:uppercase}\r\n.cdm .cdm-p2[data-step=\"3\"] .cdm-big,.cdm .cdm-p2[data-step=\"4\"] .cdm-big{border-radius:0}\r\n.cdm .cdm-p2[data-step=\"4\"] .cdm-big{background:var(--k);color:var(--l)}\r\n.cdm .cdm-big--ok{background:var(--l);color:var(--k);border:4px solid var(--k);border-radius:0;font-family:var(--f-disp);font-weight:900;font-stretch:68%;text-transform:uppercase;box-shadow:.7cqw .7cqw 0 var(--p);transition:transform 160ms var(--out),box-shadow 160ms var(--out)}\r\n@media (hover:hover) and (pointer:fine){.cdm .cdm-big--ok:hover{transform:translate(-2px,-2px);box-shadow:1cqw 1cqw 0 var(--p)}}\r\n.cdm .cdm-big--ok:active{transform:translate(3px,3px);box-shadow:.2cqw .2cqw 0 var(--p)}\r\n.cdm .cdm-prog{height:8px;background:#e5e7eb;overflow:hidden}\r\n.cdm .cdm-prog i{display:block;height:100%;background:var(--l);transform-origin:0 50%;transform:scaleX(var(--pr,0));transition:transform 300ms var(--out)}\r\n.cdm .cdm-p2__f{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.4em 1em;font:400 clamp(10px,.85cqw,12px)\/1 var(--f-mono);color:var(--s)}\r\n.cdm .cdm-lnk{background:none;border:0;padding:.7em 0;cursor:pointer;text-decoration:underline;text-underline-offset:.25em;min-height:44px;color:inherit}\r\n@keyframes cdm-nope{20%{transform:translateX(-1.1%)}50%{transform:translateX(.9%)}80%{transform:translateX(-.4%)}}\r\n\r\n\/* ============ \u0152uvre 003 : le jargon corporate ============ *\/\r\n.cdm .cdm-p3{background:#fff;padding:5% 5% 4%;min-height:clamp(260px,24cqw,400px);display:flex;flex-direction:column;justify-content:space-between}\r\n.cdm .cdm-quote{font:italic 400 clamp(21px,3.2cqw,48px)\/1.08 var(--f-serif);min-height:6.4em}\r\n.cdm .cdm-seg{transition:opacity 140ms linear}\r\n.cdm .cdm-seg.is-out{opacity:0}\r\n.cdm .cdm-seg.is-plain{font-family:var(--f-disp);font-style:normal;font-weight:900;font-stretch:66%;text-transform:uppercase;background:var(--l);padding:0 .16em;-webkit-box-decoration-break:clone;box-decoration-break:clone;font-size:.92em;line-height:1.2}\r\n.cdm .cdm-tail{margin-top:.8em;width:fit-content;background:var(--p);color:var(--k);padding:.4em .7em;font:700 clamp(10px,.9cqw,13px)\/1.2 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;opacity:0;transition:opacity 160ms linear}\r\n.cdm .cdm-tail.is-on{opacity:1}\r\n\r\n\/* ============ \u0152uvre 004 : le cadre vide ============ *\/\r\n.cdm .cdm-w4::before{content:\"\";position:absolute;left:50%;top:-1.6cqw;width:1.1cqw;height:1.1cqw;min-width:9px;min-height:9px;margin-left:-.55cqw;border-radius:50%;background:var(--k);z-index:2}\r\n.cdm .cdm-wire{position:absolute;left:12%;right:12%;top:-1.2cqw;height:2cqw;background:var(--k);clip-path:polygon(50% 0,0 100%,2px 100%,50% 5px,calc(100% - 2px) 100%,100% 100%);z-index:1}\r\n.cdm .cdm-empty{position:relative;display:grid;place-items:center;aspect-ratio:4\/5;background:#fff;color:var(--k);text-decoration:none;text-align:center;cursor:pointer;transition:background-color 200ms linear}\r\n.cdm .cdm-empty .big{font:italic 400 clamp(26px,3.6cqw,56px)\/.95 var(--f-serif);opacity:0;transform:translate3d(0,.6cqw,0);transition:opacity 200ms linear,transform 320ms var(--out);padding:0 8%}\r\n.cdm .cdm-empty .small{position:absolute;left:0;right:0;bottom:6%;font:600 clamp(9px,.78cqw,11px)\/1.4 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--s)}\r\n@media (hover:hover) and (pointer:fine){.cdm .cdm-empty:hover{background:var(--l)}.cdm .cdm-empty:hover .big{opacity:1;transform:none}.cdm .cdm-empty:hover .small{color:var(--k)}}\r\n.cdm .cdm-empty:focus-visible{background:var(--l)}.cdm .cdm-empty:focus-visible .big{opacity:1;transform:none}\r\n@media (hover:none){.cdm .cdm-empty .big{opacity:1;transform:none;color:var(--s)}}\r\n\r\n\/* ============ Conclusion commerciale ============ *\/\r\n.cdm .cdm-end{padding:9cqw 4cqw 0;display:grid;grid-template-columns:repeat(12,1fr);column-gap:2cqw}\r\n.cdm .cdm-end__in{grid-column:3 \/ span 10}\r\n.cdm .cdm-end__k{font:italic 400 clamp(18px,2.2cqw,34px)\/1.05 var(--f-serif);margin-bottom:1.4cqw}\r\n.cdm .cdm-end__h{font:900 min(7.6cqw,16vh)\/.88 var(--f-disp);font-stretch:62%;text-transform:uppercase}\r\n.cdm .cdm-end__h em{font-style:normal;background:var(--l);padding:0 .12em;-webkit-box-decoration-break:clone;box-decoration-break:clone}\r\n.cdm .cdm-end__a{display:flex;flex-wrap:wrap;gap:1.2cqw 1.6cqw;margin-top:3cqw}\r\n.cdm .cdm-cta{display:inline-flex;align-items:center;gap:.7em;min-height:48px;padding:1.3cqw 1.8cqw;background:var(--l);color:var(--k);border:3px solid var(--k);text-decoration:none;font:900 clamp(15px,1.8cqw,26px)\/1 var(--f-disp);font-stretch:72%;letter-spacing:.02em;text-transform:uppercase;box-shadow:5px 5px 0 var(--p);transition:transform 160ms var(--out),box-shadow 160ms var(--out)}\r\n.cdm .cdm-cta--ghost{background:transparent;box-shadow:none}\r\n.cdm .cdm-cta:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--p)}\r\n@media (hover:hover) and (pointer:fine){.cdm .cdm-cta:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--p)}.cdm .cdm-cta--ghost:hover{background:var(--k);color:var(--w);box-shadow:none}}\r\n\r\n\/* ============ Mobile ============ *\/\r\n@media (max-width:760px){\r\n  .cdm .cdm-title{font-size:15cqw}.cdm .cdm-title span:last-child{margin-left:0}\r\n  .cdm .cdm-stamp{position:relative;right:auto;top:auto;margin:5cqw 0 0 18cqw;font-size:clamp(20px,8cqw,36px)}\r\n  .cdm .cdm-sign,.cdm .cdm-sub{max-width:none;margin-left:0}.cdm .cdm-sign{margin-top:7cqw;font-size:clamp(30px,10cqw,48px)}.cdm .cdm-sub{font-size:clamp(17px,4.6cqw,22px)}\r\n  .cdm .cdm-rule{position:relative;left:auto;max-width:none;margin-top:6cqw;font-size:11px;padding:10px 12px}\r\n  .cdm .cdm-wall{grid-template-columns:1fr;row-gap:12cqw;padding-top:10cqw}\r\n  .cdm .cdm-w1,.cdm .cdm-w2,.cdm .cdm-w3,.cdm .cdm-w4{grid-column:1;grid-row:auto;margin-top:0}\r\n  .cdm .cdm-w1{margin-right:6cqw}.cdm .cdm-w2{margin-left:7cqw}.cdm .cdm-w3{margin-right:3cqw}.cdm .cdm-w4{margin:6cqw 20cqw 0 4cqw}\r\n  .cdm .cdm-frame{border-width:9px}.cdm .cdm-mat{padding:8px}\r\n  .cdm .cdm-cartel{width:calc(100% - 6cqw);margin-top:-5cqw;padding:12px 14px}\r\n  .cdm .cdm-cartel .n{font-size:10px}.cdm .cdm-cartel .t{font-size:19px}.cdm .cdm-cartel .d{font-size:15px}.cdm .cdm-cartel .v{font-size:18px}.cdm .cdm-live{font-size:10px}\r\n  .cdm .cdm-site__bar{font-size:9px}.cdm .cdm-site__h{font-size:14px}.cdm .cdm-blk .a{font-size:8px}.cdm .cdm-blk .b{font-size:15px}\r\n  .cdm .cdm-guard{font-size:12px}.cdm .cdm-p2__t{font-size:14px}.cdm .cdm-big{font-size:clamp(24px,9cqw,40px);min-height:110px}\r\n  .cdm .cdm-quote{font-size:clamp(23px,6.6cqw,32px);min-height:9em}\r\n  .cdm .cdm-btn{font-size:13px}.cdm .cdm-tools{gap:10px;margin-top:16px}\r\n  .cdm .cdm-empty .big{font-size:clamp(28px,9cqw,40px)}.cdm .cdm-empty .small{font-size:10px}\r\n  .cdm .cdm-end{display:block;padding-top:16cqw}.cdm .cdm-end__k{font-size:clamp(20px,5.6cqw,28px)}.cdm .cdm-end__h{font-size:13.2cqw}\r\n  .cdm .cdm-cta{font-size:clamp(17px,5cqw,22px);padding:14px 20px}.cdm .cdm-end__a{gap:14px;margin-top:8cqw}\r\n}\r\n@media (prefers-reduced-motion:reduce){\r\n  .cdm.cdm-js .cdm-work{opacity:1;transform:rotate(var(--tilt))}\r\n  .cdm .cdm-blk,.cdm .cdm-blk .a,.cdm .cdm-blk .b,.cdm .cdm-seg,.cdm .cdm-site__h,.cdm .cdm-big,.cdm .cdm-prog i,.cdm .cdm-btn,.cdm .cdm-cta,.cdm .cdm-empty .big{transition:none!important}\r\n}\r\n<\/style>\r\n\r\n<section class=\"cdm\" id=\"cdm\" aria-labelledby=\"cdm-title\">\r\n<script>(function(){var r=document.getElementById('cdm');if(r&&!document.body.classList.contains('elementor-editor-active')&&!window.matchMedia('(prefers-reduced-motion: reduce)').matches)r.classList.add('cdm-js')})();<\/script>\r\n\r\n  <header class=\"cdm-head\">\r\n    <p class=\"cdm-kicker\">Salle 02 \u2014 Accrochage permanent \u2014 Toucher les \u0153uvres est vivement conseill\u00e9<\/p>\r\n    <h2 class=\"cdm-title\" id=\"cdm-title\"><span>Le mus\u00e9e des<\/span><span>horreurs du web<\/span><\/h2>\r\n    <p class=\"cdm-stamp\">Restauration interdite<\/p>\r\n    <p class=\"cdm-sign\">Marre des sites qui <em>se ressemblent<\/em>&nbsp;?<\/p>\r\n    <p class=\"cdm-sub\">Bienvenue au mus\u00e9e des mauvaises id\u00e9es. Attention, certaines sont encore en production.<\/p>\r\n    <p class=\"cdm-rule\">Il est strictement <b>interdit<\/b> de r\u00e9parer les \u0153uvres. Nous l'avons fait quand m\u00eame.<\/p>\r\n  <\/header>\r\n\r\n  <div class=\"cdm-wall\">\r\n\r\n    <!-- \u0152UVRE 001 -->\r\n    <article class=\"cdm-work cdm-w1\" aria-labelledby=\"cdm-t1\">\r\n      <div class=\"cdm-frame\"><div class=\"cdm-mat\">\r\n        <div class=\"cdm-site\" data-cdm-clone>\r\n          <div class=\"cdm-site__bar\" aria-hidden=\"true\"><span>Votre Entreprise<\/span><span>Accueil \u00b7 Services \u00b7 Contact<\/span><\/div>\r\n          <p class=\"cdm-site__h\" data-head>Des solutions innovantes pour votre entreprise<\/p>\r\n          <div class=\"cdm-blks\">\r\n            <button type=\"button\" class=\"cdm-blk\" aria-pressed=\"false\" aria-label=\"D\u00e9cloner le bloc Innovation\" style=\"--tx:9%;--ty:13%;--r:-4deg;--sc:1.3;--z:3;--bg:#B8FF37;--fg:#0B0D11\"><span class=\"a\" aria-hidden=\"true\"><i>photo_stock_041.jpg<\/i><b>Innovation<\/b>Lorem ipsum dolor sit amet.<\/span><span class=\"b\">Pas de template.<\/span><\/button>\r\n            <button type=\"button\" class=\"cdm-blk\" aria-pressed=\"false\" aria-label=\"D\u00e9cloner le bloc Solutions\" style=\"--tx:0%;--ty:-7%;--r:3deg;--sc:.92;--z:2;--bg:#0B0D11;--fg:#B8FF37\"><span class=\"a\" aria-hidden=\"true\"><i>photo_stock_042.jpg<\/i><b>Solutions<\/b>Lorem ipsum dolor sit amet.<\/span><span class=\"b\">Fait main.<\/span><\/button>\r\n            <button type=\"button\" class=\"cdm-blk\" aria-pressed=\"false\" aria-label=\"D\u00e9cloner le bloc Qualit\u00e9\" style=\"--tx:-11%;--ty:13%;--r:5deg;--sc:1.2;--z:4;--bg:#FF4D6D;--fg:#0B0D11\"><span class=\"a\" aria-hidden=\"true\"><i>photo_stock_043.jpg<\/i><b>Qualit\u00e9<\/b>Lorem ipsum dolor sit amet.<\/span><span class=\"b\">Z\u00e9ro lorem ipsum.<\/span><\/button>\r\n            <button type=\"button\" class=\"cdm-blk\" aria-pressed=\"false\" aria-label=\"D\u00e9cloner le bloc Expertise\" style=\"--tx:6%;--ty:-12%;--r:-2deg;--sc:1.06;--z:2;--bg:#fff;--fg:#0B0D11\"><span class=\"a\" aria-hidden=\"true\"><i>photo_stock_044.jpg<\/i><b>Expertise<\/b>Lorem ipsum dolor sit amet.<\/span><span class=\"b\">Jamais vu.<\/span><\/button>\r\n            <button type=\"button\" class=\"cdm-blk\" aria-pressed=\"false\" aria-label=\"D\u00e9cloner le bloc Confiance\" style=\"--tx:0%;--ty:-6%;--r:-1deg;--sc:1.36;--z:3;--bg:#0B0D11;--fg:#F5F4EF\"><span class=\"a\" aria-hidden=\"true\"><i>photo_stock_045.jpg<\/i><b>Confiance<\/b>Lorem ipsum dolor sit amet.<\/span><span class=\"b\">Un site. Un caract\u00e8re.<\/span><\/button>\r\n            <button type=\"button\" class=\"cdm-blk\" aria-pressed=\"false\" aria-label=\"D\u00e9cloner le bloc Excellence\" style=\"--tx:-6%;--ty:-9%;--r:4deg;--sc:1.12;--z:1;--bg:#B8FF37;--fg:#0B0D11\"><span class=\"a\" aria-hidden=\"true\"><i>photo_stock_046.jpg<\/i><b>Excellence<\/b>Lorem ipsum dolor sit amet.<\/span><span class=\"b\">Parlons-en.<\/span><\/button>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div><\/div>\r\n      <div class=\"cdm-cartel\">\r\n        <p class=\"n\">\u0152uvre 001 \u00b7 2012 \u2014 aujourd'hui<\/p>\r\n        <p class=\"t\" id=\"cdm-t1\">Le template clon\u00e9<\/p>\r\n        <p class=\"d\">Technique mixte : grille, lorem ipsum, photos g\u00e9n\u00e9riques.<\/p>\r\n        <p class=\"v\" data-verdict><u>F\u00e9licitations.<\/u> Votre site ressemble \u00e0 47 000 autres.<\/p>\r\n        <p class=\"cdm-live\" data-live aria-live=\"polite\">Clones restants : 6\/6<\/p>\r\n        <div class=\"cdm-tools\"><button type=\"button\" class=\"cdm-btn\" data-all>D\u00e9cloner tout<\/button><button type=\"button\" class=\"cdm-btn cdm-btn--ghost\" data-reset>Recloner<\/button><\/div>\r\n      <\/div>\r\n    <\/article>\r\n\r\n    <!-- \u0152UVRE 002 -->\r\n    <article class=\"cdm-work cdm-w2\" aria-labelledby=\"cdm-t2\">\r\n      <div class=\"cdm-frame\"><div class=\"cdm-mat\">\r\n        <div class=\"cdm-p2\" data-cdm-btn data-step=\"0\">\r\n          <p class=\"cdm-p2__t\">D\u00e9couvrez nos solutions innovantes.<\/p>\r\n          <div class=\"cdm-guard\" role=\"status\" aria-live=\"polite\"><span data-msg><b>Gardien<\/b>Cliquez pour en savoir plus.<\/span><\/div>\r\n          <button type=\"button\" class=\"cdm-big\" data-big>En savoir plus<\/button>\r\n          <a class=\"cdm-big cdm-big--ok\" href=\"\/contact\/\" data-ok hidden>Parlons de votre projet <span aria-hidden=\"true\">\u2197<\/span><\/a>\r\n          <div class=\"cdm-prog\" aria-hidden=\"true\"><i><\/i><\/div>\r\n          <p class=\"cdm-p2__f\"><span data-count>Information obtenue : 0\/5<\/span><span><button type=\"button\" class=\"cdm-lnk\" data-skip>Je n'ai pas le temps<\/button><button type=\"button\" class=\"cdm-lnk\" data-reset hidden>Rejouer<\/button><\/span><\/p>\r\n        <\/div>\r\n      <\/div><\/div>\r\n      <div class=\"cdm-cartel\">\r\n        <p class=\"n\">\u0152uvre 002 \u00b7 Installation<\/p>\r\n        <p class=\"t\" id=\"cdm-t2\">Le bouton qui ne sert \u00e0 rien<\/p>\r\n        <p class=\"d\">Cliquer est encourag\u00e9. Comprendre, moins.<\/p>\r\n        <p class=\"v\"><u>On en sait<\/u> toujours aussi peu.<\/p>\r\n        <p class=\"cdm-live\" data-live aria-live=\"polite\">Clics : 0 \u00b7 Informations : 0<\/p>\r\n      <\/div>\r\n    <\/article>\r\n\r\n    <!-- \u0152UVRE 003 -->\r\n    <article class=\"cdm-work cdm-w3\" aria-labelledby=\"cdm-t3\">\r\n      <div class=\"cdm-frame\"><div class=\"cdm-mat\">\r\n        <div class=\"cdm-p3\" data-cdm-jargon>\r\n          <div><p class=\"cdm-quote\" data-quote aria-live=\"polite\"><\/p><p class=\"cdm-tail\" data-tail>Voil\u00e0. C'\u00e9tait si difficile ?<\/p><\/div>\r\n          <div class=\"cdm-tools\"><button type=\"button\" class=\"cdm-btn\" data-gen>G\u00e9n\u00e9rer une phrase<\/button><button type=\"button\" class=\"cdm-btn cdm-btn--pink\" data-tr aria-pressed=\"false\">Traduire en humain<\/button><\/div>\r\n        <\/div>\r\n      <\/div><\/div>\r\n      <div class=\"cdm-cartel\">\r\n        <p class=\"n\">\u0152uvre 003 \u00b7 G\u00e9n\u00e9rateur<\/p>\r\n        <p class=\"t\" id=\"cdm-t3\">Le jargon corporate<\/p>\r\n        <p class=\"d\">R\u00e9sine de synergie sur panneau de buzzwords.<\/p>\r\n        <p class=\"v\"><u>Vous n'avez rien compris ?<\/u> Nous non plus.<\/p>\r\n        <p class=\"cdm-live\" data-live aria-live=\"polite\">Mots vides : 14<\/p>\r\n      <\/div>\r\n    <\/article>\r\n\r\n    <!-- \u0152UVRE 004 : cadre vide -->\r\n    <article class=\"cdm-work cdm-w4\" aria-labelledby=\"cdm-t4\">\r\n      <span class=\"cdm-wire\" aria-hidden=\"true\"><\/span>\r\n      <div class=\"cdm-frame\"><div class=\"cdm-mat\">\r\n        <!-- Remplacez \/contact\/ par l'URL de votre page de contact -->\r\n        <a class=\"cdm-empty\" href=\"\/contact\/\" aria-label=\"Accrocher votre site ici : parlons de votre projet\"><span class=\"big\">Votre site ici.<\/span><span class=\"small\">Cliquez pour l'accrocher<\/span><\/a>\r\n      <\/div><\/div>\r\n      <div class=\"cdm-cartel\">\r\n        <p class=\"n\">\u0152uvre 004 \u00b7 \u00c0 venir<\/p>\r\n        <p class=\"t\" id=\"cdm-t4\">Sans titre (pour l'instant)<\/p>\r\n        <p class=\"d\">Technique : \u00e0 d\u00e9finir ensemble. Emplacement disponible.<\/p>\r\n      <\/div>\r\n    <\/article>\r\n  <\/div>\r\n\r\n  <div class=\"cdm-end\">\r\n    <div class=\"cdm-end__in\">\r\n      <p class=\"cdm-end__k\">Votre entreprise m\u00e9rite mieux qu'un site Internet g\u00e9n\u00e9rique.<\/p>\r\n      <p class=\"cdm-end__h\">Assez rigol\u00e9. Cr\u00e9ons quelque chose qui <em>m\u00e9rite d'exister.<\/em><\/p>\r\n      <div class=\"cdm-end__a\">\r\n        <!-- Remplacez \/contact\/ et \/services\/ par vos URL -->\r\n        <a class=\"cdm-cta\" href=\"\/contact\/\">Parlons de votre projet <span aria-hidden=\"true\">\u2197<\/span><\/a>\r\n        <a class=\"cdm-cta cdm-cta--ghost\" href=\"\/services\/\">Voir les prestations<\/a>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<script>\r\n(function(){\r\n  'use strict';\r\n  var root=document.getElementById('cdm');\r\n  if(!root||root.__cdm)return;root.__cdm=1;\r\n  var $=function(s,c){return (c||root).querySelector(s)},$$=function(s,c){return [].slice.call((c||root).querySelectorAll(s))};\r\n  var calm=window.matchMedia('(prefers-reduced-motion: reduce)').matches||document.body.classList.contains('elementor-editor-active');\r\n  var wait=function(fn,ms){calm?fn():setTimeout(fn,ms)};\r\n\r\n  \/* Accrochage : chaque \u0153uvre se pose quand elle entre dans le champ *\/\r\n  var works=$$('.cdm-work');\r\n  function hang(w){w.classList.add('is-in')}\r\n  if(calm||!('IntersectionObserver' in window)){works.forEach(hang)}\r\n  else{\r\n    var io=new IntersectionObserver(function(en){en.forEach(function(e){if(e.isIntersecting){hang(e.target);io.unobserve(e.target)}})},{threshold:.12});\r\n    works.forEach(function(w){io.observe(w)});\r\n    setTimeout(function(){works.forEach(hang)},4000);\r\n  }\r\n  function flip(el,txt,done){ \/\/ sortie nette, puis entr\u00e9e : jamais deux textes superpos\u00e9s\r\n    if(calm){el.textContent=txt;if(done)done();return}\r\n    el.classList.add('is-out');\r\n    setTimeout(function(){el.textContent=txt;el.classList.remove('is-out');if(done)done()},150);\r\n  }\r\n\r\n  \/* ---------- \u0152uvre 001 : d\u00e9cloner ---------- *\/\r\n  var cl=$('[data-cdm-clone]'),blks=$$('.cdm-blk',cl),art1=cl.closest('.cdm-work'),live1=$('[data-live]',art1),head1=$('[data-head]',cl),verdict=$('[data-verdict]',art1);\r\n  var HEAD0=head1.textContent;\r\n  function count1(){\r\n    var n=blks.filter(function(b){return b.classList.contains('is-free')}).length;\r\n    live1.textContent=n===blks.length?'Clones restants : 0\/6 \u2014 exemplaire unique':'Clones restants : '+(blks.length-n)+'\/6';\r\n    if(n===blks.length){cl.classList.add('is-done');flip(head1,'Ceci n\u2019est pas un template.');verdict.innerHTML='<u>F\u00e9licitations.<\/u> Il n\u2019en existe plus qu\u2019un.'}\r\n    else if(cl.classList.contains('is-done')){cl.classList.remove('is-done');flip(head1,HEAD0);verdict.innerHTML='<u>F\u00e9licitations.<\/u> Votre site ressemble \u00e0 47 000 autres.'}\r\n  }\r\n  function setBlk(b,free){b.classList.toggle('is-free',free);b.setAttribute('aria-pressed',free?'true':'false')}\r\n  blks.forEach(function(b){b.addEventListener('click',function(){setBlk(b,!b.classList.contains('is-free'));count1()})});\r\n  $('[data-all]',art1).addEventListener('click',function(){\r\n    blks.forEach(function(b,i){wait(function(){setBlk(b,true);count1()},i*90)});\r\n  });\r\n  $('[data-reset]',art1).addEventListener('click',function(){blks.forEach(function(b){setBlk(b,false)});count1()});\r\n\r\n  \/* ---------- \u0152uvre 002 : le bouton ---------- *\/\r\n  var p2=$('[data-cdm-btn]'),art2=p2.closest('.cdm-work'),big=$('[data-big]',p2),ok=$('[data-ok]',p2),msg=$('[data-msg]',p2),cnt=$('[data-count]',p2),prog=$('.cdm-prog i',p2),live2=$('[data-live]',art2),skip=$('[data-skip]',p2),rep=$('[data-reset]',p2);\r\n  var STEPS=5,step=0,clicks=0;\r\n  var SAY=['Cliquez pour en savoir plus.','Vous en savez maintenant plus. (Non.)','Merci pour votre int\u00e9r\u00eat. Votre int\u00e9r\u00eat a \u00e9t\u00e9 not\u00e9.','Chargement des informations\u2026 Termin\u00e9. Il n\u2019y en avait pas.','Voulez-vous en savoir plus sur le fait d\u2019en savoir plus ?','Bon. Vous avez m\u00e9rit\u00e9 un vrai bouton.'];\r\n  function say(i){msg.innerHTML='<b>Gardien<\/b>'+SAY[i]}\r\n  function paint2(){\r\n    p2.setAttribute('data-step',step);prog.parentNode.style.setProperty('--pr',step\/STEPS);prog.style.setProperty('--pr',step\/STEPS);\r\n    cnt.textContent='Information obtenue : '+(step>=STEPS?1:0)+'\/'+(step>=STEPS?1:STEPS)+(step<STEPS?'  ('+step+' clics utiles)':'');\r\n    live2.textContent='Clics : '+clicks+' \u00b7 Informations : '+(step>=STEPS?1:0);\r\n  }\r\n  function useful(){\r\n    say(5);\r\n    if(!calm)big.animate([{opacity:1,transform:'scale(1)'},{opacity:0,transform:'scale(.96)'}],{duration:140,easing:'cubic-bezier(.23,1,.32,1)',fill:'forwards'});\r\n    wait(function(){big.hidden=true;ok.hidden=false;rep.hidden=false;skip.hidden=true;\r\n      if(!calm)ok.animate([{opacity:0,transform:'translateY(6px)'},{opacity:1,transform:'none'}],{duration:220,easing:'cubic-bezier(.23,1,.32,1)'});},150);\r\n  }\r\n  big.addEventListener('click',function(){\r\n    if(step>=STEPS)return;clicks++;step++;paint2();\r\n    if(step<STEPS){say(step);if(!calm)big.animate([{transform:'translateX(0)'},{transform:'translateX(-1.4%)'},{transform:'translateX(1.1%)'},{transform:'translateX(-.5%)'},{transform:'translateX(0)'}],{duration:260,easing:'cubic-bezier(.23,1,.32,1)'})}\r\n    else useful();\r\n  });\r\n  skip.addEventListener('click',function(){clicks=clicks||0;step=STEPS;paint2();useful()});\r\n  rep.addEventListener('click',function(){\r\n    step=0;clicks=0;ok.hidden=true;big.hidden=false;rep.hidden=true;skip.hidden=false;\r\n    big.getAnimations().forEach(function(a){a.cancel()});say(0);paint2();\r\n  });\r\n\r\n  \/* ---------- \u0152uvre 003 : jargon ---------- *\/\r\n  var p3=$('[data-cdm-jargon]'),art3=p3.closest('.cdm-work'),quote=$('[data-quote]',p3),tail=$('[data-tail]',p3),live3=$('[data-live]',art3),gen=$('[data-gen]',p3),tr=$('[data-tr]',p3);\r\n  var V=[['optimisons','am\u00e9liorons'],['disruptons','changeons'],['\u00e9vang\u00e9lisons','expliquons'],['scalons','agrandissons'],['pivotons','adaptons']];\r\n  var O=[['les synergies digitales disruptives','votre site'],['la cha\u00eene de valeur omnicanale','vos pages'],['l\u2019\u00e9cosyst\u00e8me client-centrique','vos clients'],['les leviers de croissance transverses','vos outils']];\r\n  var M=[['gr\u00e2ce \u00e0 une approche holistique orient\u00e9e valeur ajout\u00e9e','sans blabla'],['via un framework agile \u00e0 forte scalabilit\u00e9','avec du code propre'],['par une d\u00e9marche 360\u00b0 centr\u00e9e utilisateur','en vous \u00e9coutant'],['au moyen d\u2019une feuille de route disruptive','pas \u00e0 pas']];\r\n  var cur=[V[0],O[0],M[0]],plain=false,segs=[];\r\n  function build(){\r\n    quote.innerHTML='Nous <span class=\"cdm-seg\"><\/span> <span class=\"cdm-seg\"><\/span> <span class=\"cdm-seg\"><\/span>.';\r\n    segs=$$('.cdm-seg',quote);\r\n  }\r\n  function words(){return cur.reduce(function(n,c){return n+c[0].split(\/\\s+\/).length},0)}\r\n  function show(i,isPlain){var s=segs[i];s.textContent=cur[i][isPlain?1:0];s.classList.toggle('is-plain',isPlain)}\r\n  function render(isPlain){\r\n    segs.forEach(function(s,i){\r\n      if(calm){show(i,isPlain);return}\r\n      setTimeout(function(){s.classList.add('is-out');setTimeout(function(){show(i,isPlain);s.classList.remove('is-out')},150)},i*140);\r\n    });\r\n    plain=isPlain;tr.setAttribute('aria-pressed',isPlain?'true':'false');tr.textContent=isPlain?'Retraduire en jargon':'Traduire en humain';\r\n    tail.classList.toggle('is-on',isPlain);\r\n    live3.textContent='Mots vides : '+(isPlain?0:words());\r\n  }\r\n  function pick(a,cur){var r;do{r=a[Math.floor(Math.random()*a.length)]}while(r===cur&&a.length>1);return r}\r\n  build();segs.forEach(function(s,i){show(i,false)});live3.textContent='Mots vides : '+words();\r\n  gen.addEventListener('click',function(){\r\n    cur=[pick(V,cur[0]),pick(O,cur[1]),pick(M,cur[2])];\r\n    plain=false;tr.setAttribute('aria-pressed','false');tr.textContent='Traduire en humain';tail.classList.remove('is-on');\r\n    render(false);\r\n  });\r\n  tr.addEventListener('click',function(){render(!plain)});\r\n})();\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ccd00ca elementor-widget elementor-widget-html\" data-id=\"ccd00ca\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ===== CODEINE \u2014 SECTION 03 \u00ab THE LAB \u2014 PAS DE MAGIE. DU CODE. \u00bb (widget HTML Elementor gratuit \u00b7 pr\u00e9fixe cdl-) ===== -->\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Anybody:wdth,wght@50..150,100..900&family=IBM+Plex+Mono:wght@400;600;700&family=Instrument+Serif:ital@0;1&display=swap\">\r\n\r\n<style>\r\n\/* ============ Racine & tokens ============ *\/\r\n.cdl{\r\n  --k:#0B0D11;--l:#B8FF37;--w:#F5F4EF;--p:#FF4D6D;--s:#666B77;\r\n  --f-disp:'Anybody','Archivo Narrow',Impact,'Arial Narrow',sans-serif;\r\n  --f-serif:'Instrument Serif','Times New Roman',Georgia,serif;\r\n  --f-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;\r\n  --out:cubic-bezier(.23,1,.32,1);\r\n  position:relative;container-type:inline-size;width:100%;overflow:clip;isolation:isolate;\r\n  background:var(--k);color:var(--w);font-family:var(--f-mono);line-height:1.25;text-align:left;\r\n  padding:0 0 clamp(64px,9vw,130px);-webkit-font-smoothing:antialiased;\r\n}\r\n.cdl *,.cdl *::before,.cdl *::after{box-sizing:border-box}\r\n.cdl h2,.cdl p,.cdl ul,.cdl ol,.cdl dl,.cdl dd,.cdl pre{margin:0;padding:0;list-style:none;font-weight:inherit}\r\n.cdl button{font:inherit;color:inherit;margin:0;padding:0;border:0;background:none;border-radius:0;-webkit-appearance:none;appearance:none;cursor:pointer}\r\n.cdl [hidden]{display:none!important}\r\n.cdl :focus{outline:none}\r\n.cdl :focus-visible{outline:3px solid var(--p);outline-offset:4px}\r\n.cdl .cdl-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}\r\n\r\n\/* R\u00e8gles gradu\u00e9es : la paillasse est mesur\u00e9e au millim\u00e8tre *\/\r\n.cdl .cdl-ruler{height:18px;margin-bottom:clamp(28px,4vw,60px);background:\r\n  linear-gradient(90deg,var(--w) 2px,transparent 2px) 0 0\/40px 16px repeat-x,\r\n  linear-gradient(90deg,rgba(245,244,239,.7) 1px,transparent 1px) 0 0\/8px 8px repeat-x}\r\n.cdl .cdl-ruler--b{margin:clamp(40px,6vw,90px) 0 0;transform:scaleY(-1)}\r\n\r\n\/* ============ En-t\u00eate ============ *\/\r\n.cdl .cdl-head{position:relative;padding:0 4cqw}\r\n.cdl .cdl-kicker{font:600 clamp(10px,.85cqw,12px)\/1.4 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:rgba(245,244,239,.78);margin-bottom:2cqw}\r\n.cdl .cdl-title{font:900 min(10.4cqw,24vh)\/.84 var(--f-disp);font-stretch:150%;text-transform:uppercase;letter-spacing:-.012em}\r\n.cdl .cdl-title span{display:block}\r\n.cdl .cdl-title span:last-child{color:var(--l)}\r\n.cdl .cdl-sub{margin-top:1.6cqw;font:italic 400 clamp(20px,2.6cqw,40px)\/1 var(--f-serif)}\r\n.cdl .cdl-sign{position:absolute;right:4cqw;top:12.6cqw;width:max-content;max-width:44cqw;background:var(--p);color:var(--k);padding:.22em .6em .3em;font:900 clamp(20px,3.8cqw,60px)\/.95 var(--f-disp);font-stretch:96%;text-transform:uppercase;transform:rotate(-2.4deg);clip-path:polygon(0 0,100% 0,98.5% 20%,100% 40%,98.5% 60%,100% 80%,98.5% 100%,0 100%,1.5% 80%,0 60%,1.5% 40%,0 20%)}\r\n.cdl .cdl-sign small{display:block;margin-top:.5em;font:600 clamp(10px,.9cqw,13px)\/1.3 var(--f-mono);letter-spacing:.12em}\r\n\r\n\/* ============ La paillasse ============ *\/\r\n.cdl .cdl-bench{position:relative;display:grid;grid-template-columns:repeat(12,1fr);column-gap:1.4cqw;row-gap:3cqw;padding:6cqw 4cqw 0;align-items:start}\r\n.cdl .cdl-bench::before{content:\"\";position:absolute;left:2cqw;right:2cqw;top:4cqw;bottom:-2cqw;border:2px solid rgba(245,244,239,.28);pointer-events:none}\r\n.cdl .cdl-zone{font:700 clamp(10px,.8cqw,12px)\/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--l);margin-bottom:1.1cqw}\r\n\r\n\/* Rack d'\u00e9chantillons : l'escalier de bocaux occupe toute la hauteur de la paillasse *\/\r\n.cdl .cdl-rackw{grid-column:1 \/ span 4;grid-row:1 \/ span 2;align-self:stretch;display:flex;flex-direction:column}\r\n.cdl .cdl-rack{flex:1;display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:auto auto auto;align-content:space-between;gap:2cqw .4cqw;align-items:end}\r\n.cdl .cdl-item{position:relative;display:flex;flex-direction:column;align-items:center}\r\n.cdl .cdl-item:nth-child(1){grid-column:1 \/ span 3;grid-row:1}\r\n.cdl .cdl-item:nth-child(2){grid-column:4 \/ span 3;grid-row:2;align-self:center;transform:rotate(1.4deg)}\r\n.cdl .cdl-item:nth-child(3){grid-column:1 \/ span 2;grid-row:3;transform:rotate(-1.4deg)}\r\n.cdl .cdl-item:nth-child(4){grid-column:3 \/ span 2;grid-row:3;transform:rotate(1deg)}\r\n.cdl .cdl-item:nth-child(5){grid-column:5 \/ span 2;grid-row:3;transform:rotate(-1deg)}\r\n.cdl .cdl-jar{position:relative;display:block;--liq:var(--l);--seal:0}\r\n.cdl .cdl-jar svg{display:block;width:100%;height:auto;overflow:visible}\r\n.cdl .cdl-item:nth-child(1) .cdl-jar{width:92%}\r\n.cdl .cdl-item:nth-child(2) .cdl-jar{width:64%}\r\n.cdl .cdl-item:nth-child(n+3) .cdl-jar{width:80%}\r\n.cdl button.cdl-jar{transition:transform 220ms var(--out)}\r\n.cdl button.cdl-jar:active{transform:scale(.97)}\r\n@media (hover:hover) and (pointer:fine){.cdl button.cdl-jar:hover{transform:rotate(-3deg) translateY(-1.2%)}}\r\n.cdl button.cdl-jar.is-pour{transform:rotate(-14deg) translate(8%,-3%)}\r\n.cdl .cdl-tape{position:relative;z-index:2;margin-top:-1.4cqw;width:max-content;max-width:100%;background:var(--w);color:var(--k);padding:.5em .85em .55em;text-align:center;font:700 clamp(9px,.78cqw,12px)\/1.25 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;transform:rotate(-1.6deg);clip-path:polygon(0 0,100% 0,98% 25%,100% 50%,98% 75%,100% 100%,0 100%,2% 75%,0 50%,2% 25%)}\r\n.cdl .cdl-tape b{display:block;font:900 clamp(12px,1.35cqw,20px)\/.95 var(--f-disp);font-stretch:80%;letter-spacing:.01em}\r\n.cdl .cdl-tape--p{background:var(--p)}\r\n.cdl .cdl-tape--l{background:var(--l)}\r\n.cdl .cdl-note{margin-top:.6em;max-width:92%;font:italic 400 clamp(13px,1.15cqw,18px)\/1.05 var(--f-serif);color:rgba(245,244,239,.86);text-align:center}\r\n\r\n\/* ============ Le r\u00e9acteur ============ *\/\r\n.cdl .cdl-reactor{grid-column:5 \/ span 3;grid-row:1 \/ span 2;position:relative}\r\n.cdl .cdl-reactor svg{display:block;width:100%;height:auto;overflow:visible}\r\n.cdl .cdl-stages{margin-top:1cqw;display:grid;gap:.5cqw}\r\n.cdl .cdl-stages li{display:flex;gap:.7em;align-items:baseline;padding:.45em .7em;border:1px solid rgba(245,244,239,.3);font:600 clamp(10px,.82cqw,12px)\/1.25 var(--f-mono);letter-spacing:.05em;color:rgba(245,244,239,.78);transition:background-color 160ms linear,color 160ms linear,border-color 160ms linear}\r\n.cdl .cdl-stages li code{font:inherit;font-weight:700;color:var(--w)}\r\n.cdl .cdl-stages li.is-on{background:var(--l);color:var(--k);border-color:var(--l)}\r\n.cdl .cdl-stages li.is-on code{color:var(--k)}\r\n.cdl .cdl-stages li.is-done{color:var(--w);border-color:var(--l)}\r\n.cdl .cdl-liq{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(var(--lv,0));transition:transform 700ms var(--out)}\r\n.cdl .cdl-flow{stroke-dasharray:10 14;animation:cdl-flow 900ms linear infinite;animation-play-state:paused;opacity:var(--fl,0);transition:opacity 200ms linear}\r\n.cdl.is-run:not(.is-off) .cdl-flow{animation-play-state:running}\r\n@keyframes cdl-flow{to{stroke-dashoffset:-24}}\r\n.cdl .cdl-needle{transform-box:view-box;transform-origin:160px 506px;transform:rotate(var(--g,-70deg));transition:transform 700ms var(--out)}\r\n\r\n\/* ============ L'\u00e9cran de r\u00e9sultat : enregistreur graphique ============ *\/\r\n.cdl .cdl-rec{grid-column:8 \/ span 5;grid-row:1;position:relative;background:var(--w);color:var(--k);padding:1.6cqw 1.6cqw 7.6cqw;transform:rotate(.5deg)}\r\n.cdl .cdl-rec .cdl-zone{color:var(--k)}\r\n.cdl .cdl-routes{margin-right:12.4cqw}\r\n.cdl .cdl-plate{display:flex;justify-content:space-between;gap:1cqw;align-items:baseline;border-bottom:2px solid var(--k);padding-bottom:.7cqw;margin-bottom:1cqw;font:700 clamp(9px,.75cqw,11px)\/1.3 var(--f-mono);letter-spacing:.14em;text-transform:uppercase}\r\n.cdl .cdl-routes{display:grid;grid-template-columns:repeat(3,1fr);gap:.7cqw;margin-bottom:1cqw}\r\n.cdl .cdl-route{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:.5em;min-height:44px;padding:.7em 1.7em .7em .7em;background:var(--k);color:var(--w);text-align:left;white-space:nowrap;font:700 clamp(9px,.74cqw,11px)\/1.2 var(--f-mono);letter-spacing:.02em;text-transform:uppercase;transition:transform 180ms var(--out),background-color 140ms linear,color 140ms linear}\r\n.cdl .cdl-route i{display:block;white-space:normal;font:italic 400 clamp(14px,1.25cqw,20px)\/1 var(--f-serif);text-transform:none;letter-spacing:0;color:rgba(245,244,239,.72)}\r\n.cdl .cdl-route::after{content:\"\";position:absolute;right:.7em;top:.6em;width:.9em;height:.9em;border-radius:50%;border:2px solid currentColor;opacity:.6}\r\n.cdl .cdl-route[aria-checked=\"true\"]{background:var(--l);color:var(--k);transform:translateY(.45cqw)}\r\n.cdl .cdl-route[aria-checked=\"true\"]::after{background:var(--k);opacity:1}\r\n.cdl .cdl-route[aria-checked=\"true\"] i{color:var(--k)}\r\n.cdl .cdl-route:active{transform:scale(.97)}\r\n.cdl .cdl-paper{position:relative;background:#fff;border:3px solid var(--k);padding:0 12px;overflow:hidden}\r\n.cdl .cdl-paper::before,.cdl .cdl-paper::after{content:\"\";position:absolute;top:0;bottom:0;width:10px;background:radial-gradient(circle,var(--k) 0 2.6px,transparent 3px) 50% 0\/10px 18px repeat-y}\r\n.cdl .cdl-paper::before{left:0}.cdl .cdl-paper::after{right:0}\r\n.cdl .cdl-chart{display:block;width:100%;height:auto;touch-action:pan-y;cursor:ew-resize;-webkit-user-select:none;user-select:none}\r\n.cdl .cdl-chart text{font-family:var(--f-mono);font-weight:600;fill:#4b505c}\r\n.cdl .cdl-chart [data-tagtxt]{fill:var(--l)}\r\n.cdl .cdl-hint{display:flex;justify-content:space-between;gap:1em;margin-top:.7cqw;font:600 clamp(9px,.75cqw,11px)\/1.3 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:#4b505c}\r\n.cdl .cdl-plan{position:absolute;right:1.6cqw;top:4.7cqw;width:8.6cqw;z-index:2;background:#fff;border:3px solid var(--k);transform:rotate(3deg);padding:.4cqw}\r\n.cdl .cdl-plan svg{display:block;width:100%;height:auto}\r\n.cdl .cdl-plan figcaption{font:700 clamp(8px,.62cqw,10px)\/1.2 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;margin-top:.3cqw}\r\n.cdl .cdl-slips{position:absolute;left:1.6cqw;right:1.6cqw;bottom:-3.2cqw;display:grid;grid-template-columns:repeat(4,1fr);gap:.8cqw}\r\n.cdl .cdl-slip{background:#fff;color:var(--k);border:2px solid var(--k);padding:.7cqw .9cqw 1.6cqw;clip-path:polygon(0 0,100% 0,100% 88%,92% 100%,84% 90%,76% 100%,68% 90%,60% 100%,52% 90%,44% 100%,36% 90%,28% 100%,20% 90%,12% 100%,4% 90%,0 100%)}\r\n.cdl .cdl-slip:nth-child(1){transform:rotate(-1.4deg)}.cdl .cdl-slip:nth-child(2){transform:rotate(1deg) translateY(.4cqw)}.cdl .cdl-slip:nth-child(3){transform:rotate(-.6deg)}.cdl .cdl-slip:nth-child(4){transform:rotate(1.5deg) translateY(.3cqw)}\r\n.cdl .cdl-slip dt{font:700 clamp(8px,.66cqw,10px)\/1.2 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:#4b505c}\r\n.cdl .cdl-slip dd{margin-top:.3em;font:900 clamp(16px,1.9cqw,30px)\/.95 var(--f-disp);font-stretch:70%;font-variant-numeric:tabular-nums;white-space:nowrap}\r\n.cdl .cdl-slip dd small{font:600 .42em var(--f-mono);letter-spacing:.06em;margin-left:.3em}\r\n.cdl .cdl-disc{position:absolute;left:-1.6cqw;top:-2.4cqw;max-width:23cqw;background:var(--p);color:var(--k);padding:.7cqw .9cqw;font:700 clamp(9px,.76cqw,12px)\/1.35 var(--f-mono);letter-spacing:.04em;text-transform:uppercase;transform:rotate(-2.6deg);z-index:3}\r\n.cdl .cdl-disc a{display:inline-flex;align-items:center;margin-top:.2em;color:var(--k);text-decoration:underline;text-underline-offset:.2em;min-height:44px}\r\n.cdl .cdl-disc a:focus-visible{outline-color:var(--k)}\r\n\r\n\/* Machine \u00e0 id\u00e9es : emplacement r\u00e9serv\u00e9 (non fonctionnel) *\/\r\n.cdl .cdl-tarp{grid-column:8 \/ span 5;grid-row:2;position:relative;margin-top:5.5cqw;min-height:11cqw;padding:1.4cqw 1.6cqw;border:2px dashed rgba(245,244,239,.5);display:flex;flex-direction:column;justify-content:flex-end;gap:.6cqw}\r\n.cdl .cdl-tarp::before{content:\"\";position:absolute;left:0;right:0;top:0;height:1.5cqw;background:repeating-linear-gradient(-45deg,var(--l) 0 14px,var(--k) 14px 28px)}\r\n.cdl .cdl-tarp h3{margin:0;font:900 clamp(16px,2.2cqw,34px)\/.92 var(--f-disp);font-stretch:70%;text-transform:uppercase}\r\n.cdl .cdl-tarp p{font:italic 400 clamp(16px,1.9cqw,30px)\/1 var(--f-serif);color:var(--l)}\r\n.cdl .cdl-tarp small{font:600 clamp(9px,.78cqw,11px)\/1.3 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(245,244,239,.78)}\r\n\r\n\/* ============ Carnet de code ============ *\/\r\n.cdl .cdl-code{position:relative;padding:8cqw 4cqw 0}\r\n.cdl .cdl-code__btn{display:inline-flex;align-items:center;gap:.8em;min-height:48px;padding:.9em 1.3em;background:var(--l);color:var(--k);border:3px solid var(--w);font:800 clamp(12px,1.2cqw,17px)\/1 var(--f-disp);font-stretch:72%;letter-spacing:.04em;text-transform:uppercase;box-shadow:5px 5px 0 var(--p);transition:transform 160ms var(--out),box-shadow 160ms var(--out)}\r\n.cdl .cdl-code__btn:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--p)}\r\n@media (hover:hover) and (pointer:fine){.cdl .cdl-code__btn:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--p)}}\r\n.cdl .cdl-code__btn[aria-expanded=\"true\"] .cdl-plus{transform:rotate(45deg)}\r\n.cdl .cdl-plus{display:inline-block;transition:transform 200ms var(--out)}\r\n.cdl .cdl-code__panel{margin-top:2cqw;background:var(--w);color:var(--k);border:3px solid var(--w);padding:2cqw 2.4cqw 2.4cqw 4.4cqw;position:relative;background-image:linear-gradient(90deg,transparent 3.4cqw,var(--p) 3.4cqw 3.55cqw,transparent 3.55cqw)}\r\n.cdl .cdl-code__intro{max-width:70ch;font:italic 400 clamp(16px,1.6cqw,24px)\/1.12 var(--f-serif);margin-bottom:1.4cqw}\r\n.cdl .cdl-code__intro b{font-style:normal;background:var(--l);padding:0 .25em;font-weight:400}\r\n.cdl .cdl-code pre{white-space:pre;overflow-x:auto;font:500 clamp(11px,.98cqw,14px)\/1.5 var(--f-mono);tab-size:2;-webkit-overflow-scrolling:touch}\r\n.cdl .cdl-fn{display:block;padding:.3em .6em;margin:0 -0.6em 1.2em;border-left:5px solid transparent;transition:background-color 160ms linear,border-color 160ms linear}\r\n.cdl .cdl-fn.is-on{background:rgba(184,255,55,.45);border-left-color:var(--p)}\r\n.cdl .t-k{font-weight:700;background:var(--l);padding:0 .15em}\r\n.cdl .t-c{font-style:italic;color:#4b505c}\r\n.cdl .t-s{color:#7a1230}\r\n.cdl .t-n{font-weight:700}\r\n\r\n\/* ============ Tablette & mobile ============ *\/\r\n@media (max-width:980px){\r\n  .cdl .cdl-rackw{grid-column:1 \/ -1;grid-row:auto;display:block;align-self:start}\r\n  .cdl .cdl-rack{grid-template-columns:repeat(6,1fr);grid-template-rows:none;align-content:start;gap:4cqw 1cqw}\r\n  .cdl .cdl-item:nth-child(2){grid-row:1;align-self:end}\r\n  .cdl .cdl-item:nth-child(1) .cdl-jar,.cdl .cdl-item:nth-child(2) .cdl-jar{width:44%}\r\n  .cdl .cdl-item:nth-child(n+3) .cdl-jar{width:66%}\r\n  .cdl .cdl-tape{margin-top:-2.4cqw}\r\n  .cdl .cdl-reactor{grid-column:1 \/ -1;grid-row:auto;max-width:58cqw;margin:0 auto}\r\n  .cdl .cdl-rec{grid-column:1 \/ -1;grid-row:auto;margin-top:6cqw}\r\n  .cdl .cdl-tarp{grid-column:1 \/ -1;grid-row:auto;margin-top:8cqw}\r\n  .cdl .cdl-bench{row-gap:7cqw}\r\n}\r\n@media (max-width:760px){\r\n  .cdl .cdl-title{font-size:12.4cqw}\r\n  .cdl .cdl-sign{position:relative;right:auto;top:auto;margin:6cqw 0 0 auto;max-width:92%;font-size:clamp(24px,8.6cqw,40px)}\r\n  .cdl .cdl-sub{font-size:clamp(22px,6.4cqw,32px)}\r\n  .cdl .cdl-bench{padding-top:10cqw;row-gap:12cqw}\r\n  .cdl .cdl-bench::before{top:6cqw}\r\n  .cdl .cdl-zone{font-size:11px}\r\n  .cdl .cdl-rack{grid-template-columns:1fr 1fr;gap:9cqw 3cqw}\r\n  .cdl .cdl-item:nth-child(n){grid-column:auto;grid-row:auto}\r\n  .cdl .cdl-item:nth-child(1){grid-column:1 \/ -1}\r\n  .cdl .cdl-item:nth-child(n) .cdl-jar{width:66%}\r\n  .cdl .cdl-item:nth-child(1) .cdl-jar{width:44%}\r\n  .cdl .cdl-tape{font-size:10px;margin-top:-5cqw}.cdl .cdl-tape b{font-size:15px}.cdl .cdl-note{font-size:16px}\r\n  .cdl .cdl-reactor{grid-column:1 \/ -1;max-width:88cqw;margin:0 auto}\r\n  .cdl .cdl-stages li{font-size:11px;padding:.6em .8em}\r\n  .cdl .cdl-rec{padding:4cqw 4cqw 38cqw;transform:none}\r\n  .cdl .cdl-plate{font-size:9px;flex-wrap:wrap}\r\n  .cdl .cdl-routes{grid-template-columns:1fr;gap:8px}\r\n  .cdl .cdl-route{font-size:11px;min-height:56px}.cdl .cdl-route i{font-size:17px}\r\n  .cdl .cdl-hint{font-size:10px}\r\n  .cdl .cdl-routes{margin-right:0}.cdl .cdl-plan{position:relative;right:auto;top:auto;width:46%;margin:4cqw 0 0 auto}.cdl .cdl-plan figcaption{font-size:9px}\r\n  .cdl .cdl-slips{position:relative;left:auto;right:auto;bottom:auto;grid-template-columns:1fr 1fr;gap:12px;margin-top:5cqw}\r\n  .cdl .cdl-slip{padding:10px 12px 22px}.cdl .cdl-slip dt{font-size:10px}.cdl .cdl-slip dd{font-size:30px}\r\n  .cdl .cdl-disc{position:relative;left:auto;top:auto;max-width:none;margin:-2cqw 0 4cqw;font-size:11px;padding:10px 12px}\r\n  .cdl .cdl-rec{padding-bottom:5cqw}\r\n  .cdl .cdl-tarp{padding:5cqw 5cqw;min-height:34cqw}.cdl .cdl-tarp h3{font-size:24px}.cdl .cdl-tarp p{font-size:22px}.cdl .cdl-tarp small{font-size:10px}\r\n  .cdl .cdl-code{padding-top:12cqw}.cdl .cdl-code__btn{font-size:14px}\r\n  .cdl .cdl-code__panel{padding:5cqw 4cqw 5cqw 9cqw;background-image:linear-gradient(90deg,transparent 7cqw,var(--p) 7cqw 7.4cqw,transparent 7.4cqw)}\r\n  .cdl .cdl-code pre{font-size:11px}.cdl .cdl-code__intro{font-size:17px}\r\n}\r\n@media (prefers-reduced-motion:reduce){\r\n  .cdl .cdl-flow{animation:none}\r\n  .cdl .cdl-liq,.cdl .cdl-needle,.cdl button.cdl-jar,.cdl .cdl-route,.cdl .cdl-code__btn,.cdl .cdl-plus,.cdl .cdl-fn,.cdl .cdl-stages li{transition:none!important}\r\n}\r\n<\/style>\r\n\r\n<section class=\"cdl\" id=\"cdl\" aria-labelledby=\"cdl-title\">\r\n\r\n  <!-- Symboles SVG partag\u00e9s (bocal) -->\r\n  <svg width=\"0\" height=\"0\" style=\"position:absolute\" aria-hidden=\"true\" focusable=\"false\">\r\n    <symbol id=\"cdl-jar\" viewBox=\"0 0 120 176\">\r\n      <rect x=\"22\" y=\"4\" width=\"76\" height=\"28\" rx=\"4\" fill=\"#666B77\" stroke=\"#F5F4EF\" stroke-width=\"3\"\/>\r\n      <path d=\"M38 8v20M52 8v20M66 8v20M80 8v20\" stroke=\"#0B0D11\" stroke-opacity=\".45\" stroke-width=\"3\"\/>\r\n      <path d=\"M26 32h68v12H26z\" fill=\"none\" stroke=\"#F5F4EF\" stroke-width=\"3\"\/>\r\n      <path d=\"M26 44H94Q112 52 112 76V140Q112 168 88 168H32Q8 168 8 140V76Q8 52 26 44Z\" fill=\"#F5F4EF\" fill-opacity=\".07\" stroke=\"#F5F4EF\" stroke-width=\"3\"\/>\r\n      <path d=\"M12 96q12-9 24 0t24 0t24 0t24 0V140Q108 164 88 164H32Q12 164 12 140Z\" style=\"fill:var(--liq)\"\/>\r\n      <circle cx=\"34\" cy=\"128\" r=\"5\" fill=\"#0B0D11\" fill-opacity=\".28\"\/><circle cx=\"70\" cy=\"140\" r=\"3.5\" fill=\"#0B0D11\" fill-opacity=\".28\"\/><circle cx=\"86\" cy=\"118\" r=\"4\" fill=\"#0B0D11\" fill-opacity=\".28\"\/>\r\n      <path d=\"M20 64Q18 80 20 100\" fill=\"none\" stroke=\"#F5F4EF\" stroke-opacity=\".55\" stroke-width=\"3\" stroke-linecap=\"round\"\/>\r\n      <g style=\"opacity:var(--seal)\"><path d=\"M10 14L110 40M110 14L10 40\" stroke=\"#FF4D6D\" stroke-width=\"9\"\/><\/g>\r\n    <\/symbol>\r\n  <\/svg>\r\n\r\n  <div class=\"cdl-ruler\" aria-hidden=\"true\"><\/div>\r\n\r\n  <header class=\"cdl-head\">\r\n    <p class=\"cdl-kicker\">Salle 03 \u2014 Laboratoire \u2014 Blouse recommand\u00e9e, code obligatoire<\/p>\r\n    <h2 class=\"cdl-title\" id=\"cdl-title\"><span>Codeine<\/span><span>Lab<\/span><\/h2>\r\n    <p class=\"cdl-sub\">Le laboratoire des id\u00e9es improbables<\/p>\r\n    <p class=\"cdl-sign\">Pas de magie.<br>Du code.<small>Votre id\u00e9e est bizarre ? Parfait.<\/small><\/p>\r\n  <\/header>\r\n\r\n  <div class=\"cdl-bench\">\r\n\r\n    <!-- ===== LA PAILLASSE : on choisit un \u00e9chantillon ===== -->\r\n    <div class=\"cdl-rackw\">\r\n    <p class=\"cdl-zone\" aria-hidden=\"true\">1 \u00b7 La paillasse<\/p>\r\n    <ul class=\"cdl-rack\" aria-label=\"La paillasse : \u00e9chantillons\">\r\n      <li class=\"cdl-item\">\r\n        <button type=\"button\" class=\"cdl-jar\" data-module=\"gpx\" aria-label=\"Verser l'\u00e9chantillon n\u00b01, Swiss GPX Viewer, dans le r\u00e9acteur\">\r\n          <svg viewBox=\"0 0 120 176\" aria-hidden=\"true\"><use href=\"#cdl-jar\"\/><\/svg>\r\n        <\/button>\r\n        <p class=\"cdl-tape cdl-tape--p\"><b>Swiss GPX Viewer<\/b>Exploration de parcours \u00b7 n\u00b01 \u00b7 ouvert<\/p>\r\n        <p class=\"cdl-note\">Agiter avant d'ex\u00e9cuter.<\/p>\r\n      <\/li>\r\n      <li class=\"cdl-item\">\r\n        <div class=\"cdl-jar\" style=\"--liq:#F5F4EF;--seal:1\"><svg viewBox=\"0 0 120 176\" aria-hidden=\"true\"><use href=\"#cdl-jar\"\/><\/svg><\/div>\r\n        <p class=\"cdl-tape\"><b>Pinout Display Viewer<\/b>Exp\u00e9rience \u00e0 venir<\/p>\r\n      <\/li>\r\n      <li class=\"cdl-item\">\r\n        <div class=\"cdl-jar\" style=\"--liq:#FF4D6D;--seal:1\"><svg viewBox=\"0 0 120 176\" aria-hidden=\"true\"><use href=\"#cdl-jar\"\/><\/svg><\/div>\r\n        <p class=\"cdl-tape\"><b>LyobaCard<\/b>Exp\u00e9rience \u00e0 venir<\/p>\r\n      <\/li>\r\n      <li class=\"cdl-item\">\r\n        <div class=\"cdl-jar\" style=\"--liq:#666B77;--seal:1\"><svg viewBox=\"0 0 120 176\" aria-hidden=\"true\"><use href=\"#cdl-jar\"\/><\/svg><\/div>\r\n        <p class=\"cdl-tape\"><b>Sur mesure<\/b>Exp\u00e9rience \u00e0 venir<\/p>\r\n      <\/li>\r\n      <li class=\"cdl-item\">\r\n        <div class=\"cdl-jar\" style=\"--liq:#0B0D11;--seal:1\"><svg viewBox=\"0 0 120 176\" aria-hidden=\"true\"><use href=\"#cdl-jar\"\/><\/svg><\/div>\r\n        <p class=\"cdl-tape cdl-tape--l\"><b>Votre id\u00e9e bizarre<\/b>Emplacement r\u00e9serv\u00e9<\/p>\r\n      <\/li>\r\n    <\/ul>\r\n    <\/div>\r\n\r\n    <!-- ===== LE R\u00c9ACTEUR : transforme la s\u00e9lection en exp\u00e9rience ===== -->\r\n    <div class=\"cdl-reactor\">\r\n      <p class=\"cdl-zone\" aria-hidden=\"true\">2 \u00b7 Le r\u00e9acteur<\/p>\r\n      <svg viewBox=\"0 0 320 560\" aria-hidden=\"true\" focusable=\"false\">\r\n        <defs>\r\n          <clipPath id=\"cdl-t1\"><path d=\"M42 168h56v232a28 28 0 0 1-56 0z\"\/><\/clipPath>\r\n          <clipPath id=\"cdl-t2\"><path d=\"M132 218h56v182a28 28 0 0 1-56 0z\"\/><\/clipPath>\r\n          <clipPath id=\"cdl-t3\"><path d=\"M222 268h56v132a28 28 0 0 1-56 0z\"\/><\/clipPath>\r\n        <\/defs>\r\n        <!-- potence -->\r\n        <path d=\"M30 80V548M290 80V548\" stroke=\"#666B77\" stroke-width=\"7\"\/>\r\n        <rect x=\"14\" y=\"540\" width=\"292\" height=\"16\" fill=\"#666B77\"\/>\r\n        <path d=\"M30 150H114M30 150V200M290 200H206\" stroke=\"#666B77\" stroke-width=\"7\" fill=\"none\"\/>\r\n        <!-- tuyau d'arriv\u00e9e depuis la paillasse -->\r\n        <path d=\"M0 74C40 74 70 30 122 46\" fill=\"none\" stroke=\"#F5F4EF\" stroke-width=\"13\" stroke-linecap=\"round\"\/>\r\n        <path d=\"M0 74C40 74 70 30 122 46\" fill=\"none\" stroke=\"#0B0D11\" stroke-width=\"7\" stroke-linecap=\"round\"\/>\r\n        <path class=\"cdl-flow\" d=\"M0 74C40 74 70 30 122 46\" fill=\"none\" stroke=\"#B8FF37\" stroke-width=\"5\" stroke-linecap=\"round\" style=\"--fl:var(--f0,0)\"\/>\r\n        <!-- entonnoir -->\r\n        <path d=\"M112 36h96l-32 70v26h-32v-26z\" fill=\"#F5F4EF\" fill-opacity=\".08\" stroke=\"#F5F4EF\" stroke-width=\"3\"\/>\r\n        <path d=\"M130 62h60l-20 44h-20z\" fill=\"#B8FF37\" opacity=\".9\"\/>\r\n        <path class=\"cdl-flow\" d=\"M160 106V150H70V168\" fill=\"none\" stroke=\"#B8FF37\" stroke-width=\"5\" stroke-linecap=\"round\" style=\"--fl:var(--f1,0)\"\/>\r\n        <!-- tube 1 : lire -->\r\n        <path d=\"M42 168h56v232a28 28 0 0 1-56 0z\" fill=\"#F5F4EF\" fill-opacity=\".07\" stroke=\"#F5F4EF\" stroke-width=\"3\"\/>\r\n        <rect class=\"cdl-liq\" x=\"40\" y=\"168\" width=\"60\" height=\"264\" fill=\"#B8FF37\" clip-path=\"url(#cdl-t1)\" style=\"--lv:var(--l1,0)\"\/>\r\n        <!-- tube 2 : calculer -->\r\n        <path d=\"M132 218h56v182a28 28 0 0 1-56 0z\" fill=\"#F5F4EF\" fill-opacity=\".07\" stroke=\"#F5F4EF\" stroke-width=\"3\"\/>\r\n        <rect class=\"cdl-liq\" x=\"130\" y=\"218\" width=\"60\" height=\"214\" fill=\"#B8FF37\" clip-path=\"url(#cdl-t2)\" style=\"--lv:var(--l2,0)\"\/>\r\n        <!-- tube 3 : tracer -->\r\n        <path d=\"M222 268h56v132a28 28 0 0 1-56 0z\" fill=\"#F5F4EF\" fill-opacity=\".07\" stroke=\"#F5F4EF\" stroke-width=\"3\"\/>\r\n        <rect class=\"cdl-liq\" x=\"220\" y=\"268\" width=\"60\" height=\"164\" fill=\"#FF4D6D\" clip-path=\"url(#cdl-t3)\" style=\"--lv:var(--l3,0)\"\/>\r\n        <!-- tuyaux entre tubes -->\r\n        <path d=\"M98 410H132M188 410H222\" stroke=\"#F5F4EF\" stroke-width=\"12\"\/>\r\n        <path d=\"M98 410H132M188 410H222\" stroke=\"#0B0D11\" stroke-width=\"6\"\/>\r\n        <path class=\"cdl-flow\" d=\"M98 410H132\" stroke=\"#B8FF37\" stroke-width=\"4\" style=\"--fl:var(--f2,0)\"\/>\r\n        <path class=\"cdl-flow\" d=\"M188 410H222\" stroke=\"#B8FF37\" stroke-width=\"4\" style=\"--fl:var(--f3,0)\"\/>\r\n        <!-- sortie vers l'enregistreur -->\r\n        <path d=\"M278 360H300V470H320\" fill=\"none\" stroke=\"#F5F4EF\" stroke-width=\"12\"\/>\r\n        <path d=\"M278 360H300V470H320\" fill=\"none\" stroke=\"#0B0D11\" stroke-width=\"6\"\/>\r\n        <path class=\"cdl-flow\" d=\"M278 360H300V470H320\" fill=\"none\" stroke=\"#FF4D6D\" stroke-width=\"4\" style=\"--fl:var(--f4,0)\"\/>\r\n        <!-- \u00e9tiquettes ruban -->\r\n        <g font-family=\"IBM Plex Mono,monospace\" font-weight=\"700\" font-size=\"11\" fill=\"#0B0D11\">\r\n          <g transform=\"rotate(-3 70 140)\"><rect x=\"22\" y=\"128\" width=\"96\" height=\"22\" fill=\"#F5F4EF\"\/><text x=\"30\" y=\"143\">1 \u00b7 LIRE<\/text><\/g>\r\n          <g transform=\"rotate(2 160 196)\"><rect x=\"112\" y=\"184\" width=\"96\" height=\"22\" fill=\"#F5F4EF\"\/><text x=\"120\" y=\"199\">2 \u00b7 CALCULER<\/text><\/g>\r\n          <g transform=\"rotate(-2 250 246)\"><rect x=\"202\" y=\"234\" width=\"96\" height=\"22\" fill=\"#F5F4EF\"\/><text x=\"210\" y=\"249\">3 \u00b7 TRACER<\/text><\/g>\r\n        <\/g>\r\n        <!-- manom\u00e8tre -->\r\n        <circle cx=\"160\" cy=\"506\" r=\"36\" fill=\"#F5F4EF\" stroke=\"#666B77\" stroke-width=\"5\"\/>\r\n        <path d=\"M134 530A36 36 0 0 1 186 530\" fill=\"none\"\/>\r\n        <g stroke=\"#0B0D11\" stroke-width=\"2.4\"><path d=\"M130 494l7 4M135 482l7 5M145 473l4 6M160 470v8M175 473l-4 6M185 482l-7 5M190 494l-7 4\"\/><\/g>\r\n        <path class=\"cdl-needle\" d=\"M160 506V478\" stroke=\"#FF4D6D\" stroke-width=\"4\" stroke-linecap=\"round\"\/>\r\n        <circle cx=\"160\" cy=\"506\" r=\"5\" fill=\"#0B0D11\"\/>\r\n      <\/svg>\r\n      <ol class=\"cdl-stages\" aria-label=\"\u00c9tapes du traitement\">\r\n        <li data-st=\"0\"><span aria-hidden=\"true\">1<\/span><span>lire le fichier \u00b7 <code>parseGpx()<\/code><\/span><\/li>\r\n        <li data-st=\"1\"><span aria-hidden=\"true\">2<\/span><span>calculer \u00b7 <code>computeStats()<\/code><\/span><\/li>\r\n        <li data-st=\"2\"><span aria-hidden=\"true\">3<\/span><span>tracer \u00b7 <code>profilePath()<\/code> + <code>planPath()<\/code><\/span><\/li>\r\n      <\/ol>\r\n      <p class=\"cdl-sr\" role=\"status\" aria-live=\"polite\" data-status><\/p>\r\n    <\/div>\r\n\r\n    <!-- ===== L'\u00c9CRAN DE R\u00c9SULTAT : un enregistreur graphique \u00e0 papier ===== -->\r\n    <div class=\"cdl-rec\" data-pane=\"gpx\">\r\n      <p class=\"cdl-disc\">Illustration du principe. Ce n'est pas le plugin : parcours et donn\u00e9es invent\u00e9s.<br><a href=\"https:\/\/codeine.ch\/plugin-gpx-viewer\/\">Voir le vrai plugin \u2197<\/a><\/p>\r\n      <p class=\"cdl-zone\" aria-hidden=\"true\">3 \u00b7 L'\u00e9cran de r\u00e9sultat<\/p>\r\n      <div class=\"cdl-plate\"><span>Enregistreur graphique \u00b7 Mod\u00e8le illustratif<\/span><span data-count>0 point<\/span><\/div>\r\n      <div class=\"cdl-routes\" role=\"radiogroup\" aria-label=\"Parcours de d\u00e9monstration (fictifs)\">\r\n        <button type=\"button\" role=\"radio\" class=\"cdl-route\" aria-checked=\"true\" data-route=\"0\">Parcours A<i>Col du Lorem Ipsum<\/i><\/button>\r\n        <button type=\"button\" role=\"radio\" class=\"cdl-route\" aria-checked=\"false\" data-route=\"1\" tabindex=\"-1\">Parcours B<i>Boucle du Template Clon\u00e9<\/i><\/button>\r\n        <button type=\"button\" role=\"radio\" class=\"cdl-route\" aria-checked=\"false\" data-route=\"2\" tabindex=\"-1\">Parcours C<i>Ar\u00eate du Cache Vide<\/i><\/button>\r\n      <\/div>\r\n      <div class=\"cdl-paper\">\r\n        <svg class=\"cdl-chart\" viewBox=\"0 0 640 270\" tabindex=\"0\" role=\"slider\" aria-label=\"Profil altim\u00e9trique : parcourir le trac\u00e9 avec les fl\u00e8ches\" aria-valuemin=\"0\" aria-valuemax=\"0\" aria-valuenow=\"0\" data-chart>\r\n          <defs>\r\n            <pattern id=\"cdl-hatch\" width=\"9\" height=\"9\" patternUnits=\"userSpaceOnUse\" patternTransform=\"rotate(45)\"><path d=\"M0 0V9\" stroke=\"#FF4D6D\" stroke-width=\"2.4\"\/><\/pattern>\r\n            <clipPath id=\"cdl-clip\"><rect data-clip x=\"0\" y=\"0\" width=\"0\" height=\"270\"\/><\/clipPath>\r\n          <\/defs>\r\n          <g data-grid><\/g>\r\n          <g clip-path=\"url(#cdl-clip)\"><path data-area fill=\"url(#cdl-hatch)\" opacity=\".85\"\/><path data-line fill=\"none\" stroke=\"#0B0D11\" stroke-width=\"3\" stroke-linejoin=\"round\" stroke-linecap=\"round\"\/><\/g>\r\n          <g data-pen opacity=\"0\"><path d=\"M0 0L26 -34\" stroke=\"#666B77\" stroke-width=\"5\" stroke-linecap=\"round\"\/><circle r=\"5.5\" fill=\"#FF4D6D\" stroke=\"#0B0D11\" stroke-width=\"2\"\/><\/g>\r\n          <g data-cur opacity=\"0\"><path data-curline stroke=\"#0B0D11\" stroke-width=\"1.6\" stroke-dasharray=\"4 4\"\/><circle data-curdot r=\"6\" fill=\"#B8FF37\" stroke=\"#0B0D11\" stroke-width=\"3\"\/><g data-tag><rect rx=\"0\" height=\"30\" fill=\"#0B0D11\"\/><text data-tagtxt y=\"21\" fill=\"#B8FF37\" font-size=\"17\" font-weight=\"700\"><\/text><\/g><\/g>\r\n        <\/svg>\r\n      <\/div>\r\n      <p class=\"cdl-hint\"><span data-readout>Glissez sur le papier, ou fl\u00e8ches \u2190 \u2192<\/span><span>Donn\u00e9es locales fictives<\/span><\/p>\r\n      <figure class=\"cdl-plan\" style=\"margin-left:0;margin-bottom:0\"><svg viewBox=\"0 0 160 120\" aria-hidden=\"true\" data-plansvg><path data-planpath fill=\"none\" stroke=\"#FF4D6D\" stroke-width=\"3\" stroke-linejoin=\"round\" stroke-linecap=\"round\"\/><circle data-plandot r=\"5\" fill=\"#B8FF37\" stroke=\"#0B0D11\" stroke-width=\"2.4\" opacity=\"0\"\/><circle data-planstart r=\"3.6\" fill=\"#0B0D11\"\/><\/svg><figcaption>Vue de dessus<\/figcaption><\/figure>\r\n      <dl class=\"cdl-slips\" aria-label=\"Valeurs calcul\u00e9es \u00e0 partir des points du fichier\">\r\n        <div class=\"cdl-slip\"><dt>Distance<\/dt><dd data-v=\"dist\">\u2014<\/dd><\/div>\r\n        <div class=\"cdl-slip\"><dt>D\u00e9nivel\u00e9 +<\/dt><dd data-v=\"gain\">\u2014<\/dd><\/div>\r\n        <div class=\"cdl-slip\"><dt>D\u00e9nivel\u00e9 \u2212<\/dt><dd data-v=\"loss\">\u2014<\/dd><\/div>\r\n        <div class=\"cdl-slip\"><dt>Alt. min \u2013 max<\/dt><dd data-v=\"alt\">\u2014<\/dd><\/div>\r\n      <\/dl>\r\n    <\/div>\r\n\r\n    <!-- ===== Emplacement r\u00e9serv\u00e9 : la future machine \u00e0 id\u00e9es ===== -->\r\n    <div class=\"cdl-tarp\">\r\n      <small>Zone en travaux \u00b7 Ne pas toucher<\/small>\r\n      <h3>La machine \u00e0 id\u00e9es bizarres<\/h3>\r\n      <p>Votre id\u00e9e est bizarre ? Parfait. Montage en cours.<\/p>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- ===== Carnet de code : le code r\u00e9ellement ex\u00e9cut\u00e9 ===== -->\r\n  <div class=\"cdl-code\">\r\n    <button type=\"button\" class=\"cdl-code__btn\" aria-expanded=\"false\" aria-controls=\"cdl-code-panel\"><span class=\"cdl-plus\" aria-hidden=\"true\">+<\/span><span data-codelbl>Ouvrir le carnet de code<\/span><\/button>\r\n    <div class=\"cdl-code__panel\" id=\"cdl-code-panel\" hidden>\r\n      <p class=\"cdl-code__intro\"><b>Ce que vous lisez est ce qui tourne.<\/b> Ces quatre fonctions sont affich\u00e9es \u00e0 partir de leur propre texte dans la page ; ce sont celles que le r\u00e9acteur appelle, dans cet ordre. L'\u00e9tape en cours est surlign\u00e9e.<\/p>\r\n      <pre><code data-code><\/code><\/pre>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <div class=\"cdl-ruler cdl-ruler--b\" aria-hidden=\"true\"><\/div>\r\n\r\n  <!-- Donn\u00e9es de d\u00e9monstration : fichiers GPX invent\u00e9s (aucun parcours r\u00e9el) -->\r\n  <script type=\"application\/gpx+xml\" id=\"cdl-gpx-0\"><gpx version=\"1.1\" creator=\"donn\u00e9es invent\u00e9es pour la d\u00e9monstration\"><trk><name>Col du Lorem Ipsum<\/name><trkseg>\r\n<trkpt lat=\"46.10000\" lon=\"7.20000\"><ele>1040.0<\/ele><\/trkpt>\r\n<trkpt lat=\"46.10068\" lon=\"7.20296\"><ele>1054.6<\/ele><\/trkpt>\r\n<trkpt lat=\"46.10136\" lon=\"7.20587\"><ele>1067.5<\/ele><\/trkpt>\r\n<trkpt lat=\"46.10204\" lon=\"7.20871\"><ele>1076.1<\/ele><\/trkpt>\r\n<trkpt lat=\"46.10269\" lon=\"7.21143\"><ele>1085.9<\/ele><\/trkpt>\r\n<trkpt lat=\"46.10333\" lon=\"7.21401\"><ele>1105.9<\/ele><\/trkpt>\r\n<trkpt lat=\"46.10395\" lon=\"7.21642\"><ele>1141.0<\/ele><\/trkpt>\r\n<trkpt lat=\"46.10455\" lon=\"7.21863\"><ele>1188.1<\/ele><\/trkpt>\r\n<trkpt lat=\"46.10511\" lon=\"7.22064\"><ele>1237.7<\/ele><\/trkpt>\r\n<trkpt lat=\"46.10564\" lon=\"7.22245\"><ele>1281.3<\/ele><\/trkpt>\r\n<trkpt lat=\"46.10614\" lon=\"7.22405\"><ele>1316.9<\/ele><\/trkpt>\r\n<trkpt lat=\"46.10659\" lon=\"7.22545\"><ele>1350.6<\/ele><\/trkpt>\r\n<trkpt lat=\"46.10701\" lon=\"7.22669\"><ele>1391.1<\/ele><\/trkpt>\r\n<trkpt lat=\"46.10738\" lon=\"7.22778\"><ele>1442.9<\/ele><\/trkpt>\r\n<trkpt lat=\"46.10770\" lon=\"7.22874\"><ele>1502.2<\/ele><\/trkpt>\r\n<trkpt lat=\"46.10797\" lon=\"7.22963\"><ele>1559.4<\/ele><\/trkpt>\r\n<trkpt lat=\"46.10819\" lon=\"7.23048\"><ele>1606.3<\/ele><\/trkpt>\r\n<trkpt lat=\"46.10835\" lon=\"7.23132\"><ele>1641.5<\/ele><\/trkpt>\r\n<trkpt lat=\"46.10847\" lon=\"7.23220\"><ele>1671.6<\/ele><\/trkpt>\r\n<trkpt lat=\"46.10853\" lon=\"7.23315\"><ele>1705.2<\/ele><\/trkpt>\r\n<trkpt lat=\"46.10853\" lon=\"7.23422\"><ele>1746.2<\/ele><\/trkpt>\r\n<trkpt lat=\"46.10848\" lon=\"7.23543\"><ele>1790.2<\/ele><\/trkpt>\r\n<trkpt lat=\"46.10837\" lon=\"7.23682\"><ele>1827.6<\/ele><\/trkpt>\r\n<trkpt lat=\"46.10821\" lon=\"7.23839\"><ele>1850.2<\/ele><\/trkpt>\r\n<trkpt lat=\"46.10800\" lon=\"7.24016\"><ele>1857.7<\/ele><\/trkpt>\r\n<trkpt lat=\"46.10773\" lon=\"7.24214\"><ele>1856.7<\/ele><\/trkpt>\r\n<trkpt lat=\"46.10742\" lon=\"7.24433\"><ele>1856.0<\/ele><\/trkpt>\r\n<trkpt lat=\"46.10706\" lon=\"7.24671\"><ele>1857.1<\/ele><\/trkpt>\r\n<trkpt lat=\"46.10665\" lon=\"7.24926\"><ele>1853.7<\/ele><\/trkpt>\r\n<trkpt lat=\"46.10620\" lon=\"7.25197\"><ele>1837.7<\/ele><\/trkpt>\r\n<trkpt lat=\"46.10571\" lon=\"7.25479\"><ele>1803.5<\/ele><\/trkpt>\r\n<trkpt lat=\"46.10518\" lon=\"7.25770\"><ele>1752.9<\/ele><\/trkpt>\r\n<trkpt lat=\"46.10462\" lon=\"7.26065\"><ele>1695.0<\/ele><\/trkpt>\r\n<trkpt lat=\"46.10403\" lon=\"7.26361\"><ele>1640.1<\/ele><\/trkpt>\r\n<trkpt lat=\"46.10342\" lon=\"7.26654\"><ele>1592.7<\/ele><\/trkpt>\r\n<trkpt lat=\"46.10278\" lon=\"7.26939\"><ele>1549.0<\/ele><\/trkpt>\r\n<trkpt lat=\"46.10212\" lon=\"7.27213\"><ele>1500.9<\/ele><\/trkpt>\r\n<trkpt lat=\"46.10145\" lon=\"7.27473\"><ele>1443.2<\/ele><\/trkpt>\r\n<trkpt lat=\"46.10077\" lon=\"7.27716\"><ele>1378.4<\/ele><\/trkpt>\r\n<trkpt lat=\"46.10009\" lon=\"7.27940\"><ele>1315.9<\/ele><\/trkpt>\r\n<trkpt lat=\"46.09940\" lon=\"7.28144\"><ele>1265.9<\/ele><\/trkpt>\r\n<trkpt lat=\"46.09872\" lon=\"7.28327\"><ele>1232.0<\/ele><\/trkpt>\r\n<trkpt lat=\"46.09805\" lon=\"7.28490\"><ele>1210.1<\/ele><\/trkpt>\r\n<trkpt lat=\"46.09739\" lon=\"7.28634\"><ele>1192.1<\/ele><\/trkpt>\r\n<trkpt lat=\"46.09675\" lon=\"7.28760\"><ele>1173.0<\/ele><\/trkpt>\r\n<trkpt lat=\"46.09613\" lon=\"7.28870\"><ele>1156.2<\/ele><\/trkpt>\r\n<\/trkseg><\/trk><\/gpx><\/script>\r\n  <script type=\"application\/gpx+xml\" id=\"cdl-gpx-1\"><gpx version=\"1.1\" creator=\"donn\u00e9es invent\u00e9es pour la d\u00e9monstration\"><trk><name>Boucle du Template Clon\u00e9<\/name><trkseg>\r\n<trkpt lat=\"46.10000\" lon=\"7.20000\"><ele>880.0<\/ele><\/trkpt>\r\n<trkpt lat=\"46.10103\" lon=\"7.19986\"><ele>887.3<\/ele><\/trkpt>\r\n<trkpt lat=\"46.10203\" lon=\"7.19942\"><ele>908.1<\/ele><\/trkpt>\r\n<trkpt lat=\"46.10300\" lon=\"7.19871\"><ele>938.7<\/ele><\/trkpt>\r\n<trkpt lat=\"46.10390\" lon=\"7.19774\"><ele>973.9<\/ele><\/trkpt>\r\n<trkpt lat=\"46.10473\" lon=\"7.19651\"><ele>1007.5<\/ele><\/trkpt>\r\n<trkpt lat=\"46.10547\" lon=\"7.19507\"><ele>1033.8<\/ele><\/trkpt>\r\n<trkpt lat=\"46.10611\" lon=\"7.19343\"><ele>1048.1<\/ele><\/trkpt>\r\n<trkpt lat=\"46.10662\" lon=\"7.19163\"><ele>1048.1<\/ele><\/trkpt>\r\n<trkpt lat=\"46.10701\" lon=\"7.18971\"><ele>1033.8<\/ele><\/trkpt>\r\n<trkpt lat=\"46.10725\" lon=\"7.18769\"><ele>1007.5<\/ele><\/trkpt>\r\n<trkpt lat=\"46.10736\" lon=\"7.18562\"><ele>973.9<\/ele><\/trkpt>\r\n<trkpt lat=\"46.10733\" lon=\"7.18354\"><ele>938.7<\/ele><\/trkpt>\r\n<trkpt lat=\"46.10715\" lon=\"7.18150\"><ele>908.1<\/ele><\/trkpt>\r\n<trkpt lat=\"46.10683\" lon=\"7.17952\"><ele>887.3<\/ele><\/trkpt>\r\n<trkpt lat=\"46.10638\" lon=\"7.17765\"><ele>880.0<\/ele><\/trkpt>\r\n<trkpt lat=\"46.10580\" lon=\"7.17593\"><ele>887.3<\/ele><\/trkpt>\r\n<trkpt lat=\"46.10512\" lon=\"7.17438\"><ele>908.1<\/ele><\/trkpt>\r\n<trkpt lat=\"46.10433\" lon=\"7.17305\"><ele>938.7<\/ele><\/trkpt>\r\n<trkpt lat=\"46.10346\" lon=\"7.17195\"><ele>973.9<\/ele><\/trkpt>\r\n<trkpt lat=\"46.10252\" lon=\"7.17110\"><ele>1007.5<\/ele><\/trkpt>\r\n<trkpt lat=\"46.10153\" lon=\"7.17053\"><ele>1033.8<\/ele><\/trkpt>\r\n<trkpt lat=\"46.10051\" lon=\"7.17024\"><ele>1048.1<\/ele><\/trkpt>\r\n<trkpt lat=\"46.09949\" lon=\"7.17024\"><ele>1048.1<\/ele><\/trkpt>\r\n<trkpt lat=\"46.09847\" lon=\"7.17053\"><ele>1033.8<\/ele><\/trkpt>\r\n<trkpt lat=\"46.09748\" lon=\"7.17110\"><ele>1007.5<\/ele><\/trkpt>\r\n<trkpt lat=\"46.09654\" lon=\"7.17195\"><ele>973.9<\/ele><\/trkpt>\r\n<trkpt lat=\"46.09567\" lon=\"7.17305\"><ele>938.7<\/ele><\/trkpt>\r\n<trkpt lat=\"46.09488\" lon=\"7.17438\"><ele>908.1<\/ele><\/trkpt>\r\n<trkpt lat=\"46.09420\" lon=\"7.17593\"><ele>887.3<\/ele><\/trkpt>\r\n<trkpt lat=\"46.09362\" lon=\"7.17765\"><ele>880.0<\/ele><\/trkpt>\r\n<trkpt lat=\"46.09317\" lon=\"7.17952\"><ele>887.3<\/ele><\/trkpt>\r\n<trkpt lat=\"46.09285\" lon=\"7.18150\"><ele>908.1<\/ele><\/trkpt>\r\n<trkpt lat=\"46.09267\" lon=\"7.18354\"><ele>938.7<\/ele><\/trkpt>\r\n<trkpt lat=\"46.09264\" lon=\"7.18562\"><ele>973.9<\/ele><\/trkpt>\r\n<trkpt lat=\"46.09275\" lon=\"7.18769\"><ele>1007.5<\/ele><\/trkpt>\r\n<trkpt lat=\"46.09299\" lon=\"7.18971\"><ele>1033.8<\/ele><\/trkpt>\r\n<trkpt lat=\"46.09338\" lon=\"7.19163\"><ele>1048.1<\/ele><\/trkpt>\r\n<trkpt lat=\"46.09389\" lon=\"7.19343\"><ele>1048.1<\/ele><\/trkpt>\r\n<trkpt lat=\"46.09453\" lon=\"7.19507\"><ele>1033.8<\/ele><\/trkpt>\r\n<trkpt lat=\"46.09527\" lon=\"7.19651\"><ele>1007.5<\/ele><\/trkpt>\r\n<trkpt lat=\"46.09610\" lon=\"7.19774\"><ele>973.9<\/ele><\/trkpt>\r\n<trkpt lat=\"46.09700\" lon=\"7.19871\"><ele>938.7<\/ele><\/trkpt>\r\n<trkpt lat=\"46.09797\" lon=\"7.19942\"><ele>908.1<\/ele><\/trkpt>\r\n<trkpt lat=\"46.09897\" lon=\"7.19986\"><ele>887.3<\/ele><\/trkpt>\r\n<trkpt lat=\"46.10000\" lon=\"7.20000\"><ele>880.0<\/ele><\/trkpt>\r\n<\/trkseg><\/trk><\/gpx><\/script>\r\n  <script type=\"application\/gpx+xml\" id=\"cdl-gpx-2\"><gpx version=\"1.1\" creator=\"donn\u00e9es invent\u00e9es pour la d\u00e9monstration\"><trk><name>Ar\u00eate du Cache Vide<\/name><trkseg>\r\n<trkpt lat=\"46.10000\" lon=\"7.20000\"><ele>1420.0<\/ele><\/trkpt>\r\n<trkpt lat=\"46.10040\" lon=\"7.20261\"><ele>1453.8<\/ele><\/trkpt>\r\n<trkpt lat=\"46.10079\" lon=\"7.20498\"><ele>1478.0<\/ele><\/trkpt>\r\n<trkpt lat=\"46.10117\" lon=\"7.20692\"><ele>1486.6<\/ele><\/trkpt>\r\n<trkpt lat=\"46.10152\" lon=\"7.20830\"><ele>1485.6<\/ele><\/trkpt>\r\n<trkpt lat=\"46.10185\" lon=\"7.20911\"><ele>1488.0<\/ele><\/trkpt>\r\n<trkpt lat=\"46.10214\" lon=\"7.20941\"><ele>1503.3<\/ele><\/trkpt>\r\n<trkpt lat=\"46.10238\" lon=\"7.20937\"><ele>1531.6<\/ele><\/trkpt>\r\n<trkpt lat=\"46.10258\" lon=\"7.20920\"><ele>1565.2<\/ele><\/trkpt>\r\n<trkpt lat=\"46.10273\" lon=\"7.20916\"><ele>1596.7<\/ele><\/trkpt>\r\n<trkpt lat=\"46.10283\" lon=\"7.20946\"><ele>1625.9<\/ele><\/trkpt>\r\n<trkpt lat=\"46.10287\" lon=\"7.21027\"><ele>1660.6<\/ele><\/trkpt>\r\n<trkpt lat=\"46.10286\" lon=\"7.21165\"><ele>1709.7<\/ele><\/trkpt>\r\n<trkpt lat=\"46.10279\" lon=\"7.21359\"><ele>1774.8<\/ele><\/trkpt>\r\n<trkpt lat=\"46.10267\" lon=\"7.21596\"><ele>1846.5<\/ele><\/trkpt>\r\n<trkpt lat=\"46.10249\" lon=\"7.21857\"><ele>1909.0<\/ele><\/trkpt>\r\n<trkpt lat=\"46.10227\" lon=\"7.22118\"><ele>1950.0<\/ele><\/trkpt>\r\n<trkpt lat=\"46.10200\" lon=\"7.22355\"><ele>1969.2<\/ele><\/trkpt>\r\n<trkpt lat=\"46.10169\" lon=\"7.22549\"><ele>1978.3<\/ele><\/trkpt>\r\n<trkpt lat=\"46.10135\" lon=\"7.22687\"><ele>1992.5<\/ele><\/trkpt>\r\n<trkpt lat=\"46.10098\" lon=\"7.22768\"><ele>2021.0<\/ele><\/trkpt>\r\n<trkpt lat=\"46.10060\" lon=\"7.22798\"><ele>2061.1<\/ele><\/trkpt>\r\n<trkpt lat=\"46.10020\" lon=\"7.22793\"><ele>2102.7<\/ele><\/trkpt>\r\n<trkpt lat=\"46.09980\" lon=\"7.22777\"><ele>2136.3<\/ele><\/trkpt>\r\n<trkpt lat=\"46.09940\" lon=\"7.22773\"><ele>2160.2<\/ele><\/trkpt>\r\n<trkpt lat=\"46.09902\" lon=\"7.22803\"><ele>2180.6<\/ele><\/trkpt>\r\n<trkpt lat=\"46.09865\" lon=\"7.22884\"><ele>2204.1<\/ele><\/trkpt>\r\n<trkpt lat=\"46.09831\" lon=\"7.23022\"><ele>2230.5<\/ele><\/trkpt>\r\n<trkpt lat=\"46.09800\" lon=\"7.23216\"><ele>2250.1<\/ele><\/trkpt>\r\n<trkpt lat=\"46.09773\" lon=\"7.23453\"><ele>2253.6<\/ele><\/trkpt>\r\n<trkpt lat=\"46.09751\" lon=\"7.23714\"><ele>2236.2<\/ele><\/trkpt>\r\n<trkpt lat=\"46.09733\" lon=\"7.23975\"><ele>2191.1<\/ele><\/trkpt>\r\n<trkpt lat=\"46.09721\" lon=\"7.24212\"><ele>2131.4<\/ele><\/trkpt>\r\n<trkpt lat=\"46.09714\" lon=\"7.24406\"><ele>2074.8<\/ele><\/trkpt>\r\n<trkpt lat=\"46.09713\" lon=\"7.24544\"><ele>2029.2<\/ele><\/trkpt>\r\n<trkpt lat=\"46.09717\" lon=\"7.24624\"><ele>1989.9<\/ele><\/trkpt>\r\n<trkpt lat=\"46.09727\" lon=\"7.24655\"><ele>1945.8<\/ele><\/trkpt>\r\n<trkpt lat=\"46.09742\" lon=\"7.24650\"><ele>1888.5<\/ele><\/trkpt>\r\n<trkpt lat=\"46.09762\" lon=\"7.24634\"><ele>1819.3<\/ele><\/trkpt>\r\n<trkpt lat=\"46.09786\" lon=\"7.24630\"><ele>1748.0<\/ele><\/trkpt>\r\n<trkpt lat=\"46.09815\" lon=\"7.24660\"><ele>1684.5<\/ele><\/trkpt>\r\n<trkpt lat=\"46.09848\" lon=\"7.24741\"><ele>1631.9<\/ele><\/trkpt>\r\n<trkpt lat=\"46.09883\" lon=\"7.24879\"><ele>1585.5<\/ele><\/trkpt>\r\n<trkpt lat=\"46.09921\" lon=\"7.25073\"><ele>1538.4<\/ele><\/trkpt>\r\n<trkpt lat=\"46.09960\" lon=\"7.25310\"><ele>1491.1<\/ele><\/trkpt>\r\n<trkpt lat=\"46.10000\" lon=\"7.25571\"><ele>1454.6<\/ele><\/trkpt>\r\n<\/trkseg><\/trk><\/gpx><\/script>\r\n<\/section>\r\n\r\n<script>\r\n(function(){\r\n  'use strict';\r\n  var root=document.getElementById('cdl');\r\n  if(!root||root.__cdl)return;root.__cdl=1;\r\n  var $=function(s,c){return (c||root).querySelector(s)},$$=function(s,c){return [].slice.call((c||root).querySelectorAll(s))};\r\n  var calm=window.matchMedia('(prefers-reduced-motion: reduce)').matches||document.body.classList.contains('elementor-editor-active');\r\n\r\n  \/* ================= LE CODE QUI TOURNE (affich\u00e9 tel quel dans le carnet) ================= *\/\r\n  function parseGpx(xml){\r\n    \/\/ Lit le texte GPX et en sort une liste de points {lat, lon, ele}\r\n    var doc=new DOMParser().parseFromString(xml,'application\/xml');\r\n    var nodes=[].slice.call(doc.getElementsByTagName('trkpt'));\r\n    return nodes.map(function(n){\r\n      return {lat:+n.getAttribute('lat'),lon:+n.getAttribute('lon'),\r\n              ele:+n.getElementsByTagName('ele')[0].textContent};\r\n    });\r\n  }\r\n  function computeStats(pts){\r\n    \/\/ Distance (formule de haversine), d\u00e9nivel\u00e9s, altitudes et pente maximale\r\n    var R=6371008.8,rad=Math.PI\/180,dist=[0],gain=0,loss=0,min=Infinity,max=-Infinity,slope=0;\r\n    for(var i=0;i<pts.length;i++){\r\n      min=Math.min(min,pts[i].ele);max=Math.max(max,pts[i].ele);\r\n      if(i===0)continue;\r\n      var a=pts[i-1],b=pts[i],dLat=(b.lat-a.lat)*rad,dLon=(b.lon-a.lon)*rad;\r\n      var h=Math.sin(dLat\/2)*Math.sin(dLat\/2)+Math.cos(a.lat*rad)*Math.cos(b.lat*rad)*Math.sin(dLon\/2)*Math.sin(dLon\/2);\r\n      var d=2*R*Math.asin(Math.sqrt(h)),de=b.ele-a.ele;\r\n      dist.push(dist[i-1]+d);\r\n      if(de>0)gain+=de;else loss-=de;\r\n      if(d>0)slope=Math.max(slope,Math.abs(de\/d)*100);\r\n    }\r\n    return {dist:dist,total:dist[dist.length-1],gain:gain,loss:loss,min:min,max:max,slope:slope};\r\n  }\r\n  function profilePath(pts,st,w,h,pad){\r\n    \/\/ Transforme (distance, altitude) en coordonn\u00e9es de papier, puis en trac\u00e9 SVG\r\n    var lo=Math.floor(st.min\/100)*100,hi=Math.ceil(st.max\/100)*100;\r\n    var xs=[],ys=[],d='';\r\n    for(var i=0;i<pts.length;i++){\r\n      xs.push(pad.l+st.dist[i]\/st.total*(w-pad.l-pad.r));\r\n      ys.push(pad.t+(1-(pts[i].ele-lo)\/(hi-lo))*(h-pad.t-pad.b));\r\n      d+=(i?'L':'M')+xs[i].toFixed(1)+' '+ys[i].toFixed(1);\r\n    }\r\n    return {d:d,xs:xs,ys:ys,lo:lo,hi:hi};\r\n  }\r\n  function planPath(pts,w,h,m){\r\n    \/\/ Projette latitude\/longitude \u00e0 plat (\u00e9quirectangulaire) pour la vue de dessus\r\n    var lat0=pts[0].lat*Math.PI\/180,X=[],Y=[],i;\r\n    for(i=0;i<pts.length;i++){X.push((pts[i].lon-pts[0].lon)*Math.cos(lat0));Y.push(-(pts[i].lat-pts[0].lat))}\r\n    var x0=Math.min.apply(null,X),x1=Math.max.apply(null,X),y0=Math.min.apply(null,Y),y1=Math.max.apply(null,Y);\r\n    var k=Math.min((w-2*m)\/(x1-x0||1),(h-2*m)\/(y1-y0||1)),d='',xs=[],ys=[];\r\n    for(i=0;i<pts.length;i++){\r\n      xs.push(m+(X[i]-x0)*k+((w-2*m)-(x1-x0)*k)\/2);ys.push(m+(Y[i]-y0)*k+((h-2*m)-(y1-y0)*k)\/2);\r\n      d+=(i?'L':'M')+xs[i].toFixed(1)+' '+ys[i].toFixed(1);\r\n    }\r\n    return {d:d,xs:xs,ys:ys};\r\n  }\r\n  var FNS=[['parse',parseGpx],['stats',computeStats],['trace',profilePath],['plan',planPath]];\r\n\r\n  \/* ================= Mise en sc\u00e8ne (non affich\u00e9e) ================= *\/\r\n  var W=640,H=270,PAD={l:50,r:18,t:20,b:34,fs:10},narrow=window.matchMedia('(max-width:760px)');\r\n  var gpxText=[0,1,2].map(function(i){return document.getElementById('cdl-gpx-'+i).textContent.trim()});\r\n  var NAMES=['Col du Lorem Ipsum','Boucle du Template Clon\u00e9','Ar\u00eate du Cache Vide'];\r\n  var pane=$('[data-pane=\"gpx\"]'),chart=$('[data-chart]'),gridG=$('[data-grid]',pane),lineP=$('[data-line]',pane),areaP=$('[data-area]',pane),clipR=$('[data-clip]',pane),pen=$('[data-pen]',pane),\r\n      cur=$('[data-cur]',pane),curLine=$('[data-curline]',pane),curDot=$('[data-curdot]',pane),tag=$('[data-tag]',pane),tagTxt=$('[data-tagtxt]',pane),\r\n      planP=$('[data-planpath]',pane),planDot=$('[data-plandot]',pane),planStart=$('[data-planstart]',pane),readout=$('[data-readout]',pane),count=$('[data-count]',pane),status=$('[data-status]'),\r\n      stagesEl=$$('.cdl-stages li'),jar=$('.cdl-jar[data-module=\"gpx\"]'),radios=$$('.cdl-route');\r\n  var fmt=new Intl.NumberFormat('fr-CH',{maximumFractionDigits:1,minimumFractionDigits:1}),fm0=new Intl.NumberFormat('fr-CH',{maximumFractionDigits:0});\r\n  var state={route:0,pts:null,st:null,prof:null,plan:null,token:0,idx:0,ready:false,raf:0,guard:0,finish:null,started:false};\r\n\r\n  function setV(k,html){var el=$('[data-v=\"'+k+'\"]',pane);el.innerHTML=html}\r\n  function setStage(n){ \/\/ n : 0..2 = \u00e9tape en cours, 3 = termin\u00e9, -1 = repos\r\n    root.classList.toggle('is-run',n>=0&&n<3);\r\n    stagesEl.forEach(function(li,i){li.classList.toggle('is-on',i===n);li.classList.toggle('is-done',n>i||n===3)});\r\n    $$('[data-fn]').forEach(function(f){var s=f.getAttribute('data-fn');f.classList.toggle('is-on',(n===0&&s==='parse')||(n===1&&s==='stats')||(n===2&&(s==='trace'||s==='plan')))});\r\n    var s=root.style,lv=function(v){return v?1:0};\r\n    s.setProperty('--f0',n>=0&&n<3?1:0);s.setProperty('--f1',n>=0&&n<3?1:0);s.setProperty('--f2',n>=1&&n<3?1:0);s.setProperty('--f3',n>=2&&n<3?1:0);s.setProperty('--f4',n===2?1:0);\r\n    s.setProperty('--l1',lv(n>=0));s.setProperty('--l2',lv(n>=1));s.setProperty('--l3',lv(n>=2||n===3));\r\n    s.setProperty('--g',(n<0?-70:n===0?-35:n===1?0:n===2?35:60)+'deg');\r\n    status.textContent=n<0?'':n===3?'Termin\u00e9 : le parcours est trac\u00e9.':['\u00c9tape 1 sur 3 : lecture du fichier.','\u00c9tape 2 sur 3 : calculs.','\u00c9tape 3 sur 3 : trac\u00e9.'][n];\r\n  }\r\n  function drawGrid(p){\r\n    var h='',step=p.hi-p.lo>500?200:100,fs=PAD.fs,fa=' font-size=\"'+fs+'\"';\r\n    for(var v=p.lo;v<=p.hi;v+=step){var y=PAD.t+(1-(v-p.lo)\/(p.hi-p.lo))*(H-PAD.t-PAD.b);h+='<path d=\"M'+PAD.l+' '+y.toFixed(1)+'H'+(W-PAD.r)+'\" stroke=\"#FF4D6D\" stroke-opacity=\"'+(v%200===0?.6:.3)+'\" stroke-width=\"1\"\/><text'+fa+' x=\"'+(PAD.l-6)+'\" y=\"'+(y+fs*.35).toFixed(1)+'\" text-anchor=\"end\">'+v+'<\/text>'}\r\n    var km=state.st.total\/1000,kstep=km>5?1:.5;\r\n    for(var k=0;k<=km+1e-6;k+=kstep){var x=PAD.l+(k*1000)\/state.st.total*(W-PAD.l-PAD.r);h+='<path d=\"M'+x.toFixed(1)+' '+PAD.t+'V'+(H-PAD.b)+'\" stroke=\"#FF4D6D\" stroke-opacity=\".3\" stroke-width=\"1\"\/><text'+fa+' x=\"'+x.toFixed(1)+'\" y=\"'+(H-PAD.b+fs*1.5).toFixed(1)+'\" text-anchor=\"middle\">'+(kstep<1?k.toFixed(1):k.toFixed(0))+(k===0?' km':'')+'<\/text>'}\r\n    h+='<path d=\"M'+PAD.l+' '+PAD.t+'V'+(H-PAD.b)+'H'+(W-PAD.r)+'\" fill=\"none\" stroke=\"#0B0D11\" stroke-width=\"2\"\/><text'+fa+' x=\"'+(PAD.l-6)+'\" y=\"'+(PAD.t-fs*.6).toFixed(1)+'\" text-anchor=\"end\">m<\/text>';\r\n    gridG.innerHTML=h;\r\n  }\r\n  function layout(){ \/\/ taille du papier et du texte selon l'\u00e9cran, puis trac\u00e9 (appelle profilePath et planPath)\r\n    var s=state,k=W\/(chart.getBoundingClientRect().width||W),fs=Math.max(10,Math.round(10.5*k*10)\/10);\r\n    H=narrow.matches?Math.round(W*.6):270;PAD={l:Math.round(fs*3.7),r:18,t:Math.round(fs*2.1),b:Math.round(fs*2.9),fs:fs};\r\n    chart.setAttribute('viewBox','0 0 '+W+' '+H);clipR.setAttribute('height',H);\r\n    s.prof=profilePath(s.pts,s.st,W,H,PAD);s.plan=planPath(s.pts,160,120,12);\r\n    lineP.setAttribute('d',s.prof.d);\r\n    areaP.setAttribute('d',s.prof.d+'L'+s.prof.xs[s.prof.xs.length-1].toFixed(1)+' '+(H-PAD.b)+'L'+s.prof.xs[0].toFixed(1)+' '+(H-PAD.b)+'Z');\r\n    planP.setAttribute('d',s.plan.d);planStart.setAttribute('cx',s.plan.xs[0].toFixed(1));planStart.setAttribute('cy',s.plan.ys[0].toFixed(1));\r\n    drawGrid(s.prof);\r\n  }\r\n  function showSlips(st){\r\n    setV('dist',fmt.format(st.total\/1000)+'<small>km<\/small>');setV('gain','+'+fm0.format(st.gain)+'<small>m<\/small>');setV('loss','\u2212'+fm0.format(st.loss)+'<small>m<\/small>');\r\n    setV('alt',fm0.format(st.min)+'\u2013'+fm0.format(st.max)+'<small>m<\/small>');\r\n  }\r\n  function place(i){ \/\/ curseur de lecture\r\n    var s=state;if(!s.prof)return;i=Math.max(0,Math.min(s.pts.length-1,i));s.idx=i;\r\n    var x=s.prof.xs[i],y=s.prof.ys[i];\r\n    curLine.setAttribute('d','M'+x.toFixed(1)+' '+PAD.t+'V'+(H-PAD.b));curDot.setAttribute('cx',x.toFixed(1));curDot.setAttribute('cy',y.toFixed(1));\r\n    var slope=i?(s.pts[i].ele-s.pts[i-1].ele)\/(s.st.dist[i]-s.st.dist[i-1])*100:0;\r\n    var txt=fmt.format(s.st.dist[i]\/1000)+' km \u00b7 '+fm0.format(s.pts[i].ele)+' m \u00b7 '+(slope>=0?'+':'\u2212')+fm0.format(Math.abs(slope))+' %';\r\n    var k=W\/(chart.getBoundingClientRect().width||W),fs=Math.max(13,12.5*k),tr=tag.firstElementChild,ty=Math.max(2,y-fs*3);\r\n    tagTxt.textContent=txt;tagTxt.setAttribute('font-size',fs.toFixed(1));\r\n    var tw=txt.length*fs*.62+fs,tx=Math.min(Math.max(x-tw\/2,PAD.l),W-PAD.r-tw);\r\n    tr.setAttribute('x',tx);tr.setAttribute('y',ty);tr.setAttribute('width',tw);tr.setAttribute('height',(fs*1.75).toFixed(1));tagTxt.setAttribute('x',tx+fs*.5);tagTxt.setAttribute('y',(ty+fs*1.25).toFixed(1));\r\n    cur.setAttribute('opacity',1);planDot.setAttribute('cx',s.plan.xs[i].toFixed(1));planDot.setAttribute('cy',s.plan.ys[i].toFixed(1));planDot.setAttribute('opacity',1);\r\n    readout.textContent=txt;chart.setAttribute('aria-valuenow',i);chart.setAttribute('aria-valuetext',txt);\r\n  }\r\n  function draw(done){ \/\/ le stylo \u00e9crit le profil. Fin garantie : animation, saut utilisateur ou garde-fou\r\n    var s=state,len=lineP.getTotalLength(),t0=null,dur=1700,tk=s.token,over=false;\r\n    function paint(p){var e=1-Math.pow(1-p,3),pt=lineP.getPointAtLength(len*e);clipR.setAttribute('width',(pt.x+2).toFixed(1));pen.setAttribute('opacity',p<1?1:0);pen.setAttribute('transform','translate('+pt.x.toFixed(1)+' '+pt.y.toFixed(1)+')')}\r\n    function end(){if(over||tk!==s.token)return;over=true;cancelAnimationFrame(s.raf);clearTimeout(s.guard);s.finish=null;paint(1);done()}\r\n    function frame(now){if(over||tk!==s.token)return;if(t0===null)t0=now;var p=Math.min(1,(now-t0)\/dur);if(p>=1){end();return}paint(p);s.raf=requestAnimationFrame(frame)}\r\n    s.finish=end;\r\n    if(calm){end();return}\r\n    s.raf=requestAnimationFrame(frame);s.guard=setTimeout(end,dur+900); \/\/ si le navigateur suspend les images, le trac\u00e9 se termine quand m\u00eame\r\n  }\r\n  function run(){ \/\/ verser l'\u00e9chantillon : trois \u00e9tapes, chacune appelle la vraie fonction. Un nouvel appel annule le pr\u00e9c\u00e9dent.\r\n    var s=state,tk=++s.token,wait=calm?0:650;\r\n    cancelAnimationFrame(s.raf);clearTimeout(s.guard);s.finish=null;s.ready=false;s.prof=null;\r\n    clipR.setAttribute('width',0);cur.setAttribute('opacity',0);planDot.setAttribute('opacity',0);pen.setAttribute('opacity',0);\r\n    ['dist','gain','loss','alt'].forEach(function(k){setV(k,'\u2014')});count.textContent='0 point';readout.textContent='Lecture en cours\u2026';chart.setAttribute('aria-valuenow',0);chart.removeAttribute('aria-valuetext');\r\n    var go=function(i,fn){var f=function(){if(tk!==s.token)return;setStage(i);fn()};if(i===0||calm)f();else setTimeout(f,wait*i)};\r\n    go(0,function(){s.pts=parseGpx(gpxText[s.route]);count.textContent=s.pts.length+' points'});\r\n    go(1,function(){s.st=computeStats(s.pts);showSlips(s.st)});\r\n    go(2,function(){\r\n      layout();chart.setAttribute('aria-valuemax',s.pts.length-1);\r\n      draw(function(){if(tk!==s.token)return;s.ready=true;setStage(3);place(s.pts.length-1);readout.textContent='Glissez sur le papier, ou fl\u00e8ches \u2190 \u2192 \u00b7 '+NAMES[s.route]});\r\n    });\r\n    jar.classList.remove('is-pour');void jar.offsetWidth;if(!calm){jar.classList.add('is-pour');setTimeout(function(){jar.classList.remove('is-pour')},700)}\r\n  }\r\n  function restyle(){ \/\/ changement de largeur : on redessine \u00e0 plat, sans relancer l'animation\r\n    var s=state;if(!s.ready)return;layout();clipR.setAttribute('width',W);place(s.idx);\r\n  }\r\n\r\n  \/* ================= Interactions ================= *\/\r\n  var MODULES={gpx:{run:run}}; \/\/ un futur module s'ajoute ici : { run: function(){\u2026} } + un bocal data-module=\"\u2026\"\r\n  $$('.cdl-jar[data-module]').forEach(function(b){b.addEventListener('click',function(){MODULES[b.getAttribute('data-module')].run()})});\r\n  function chooseRoute(i,focus){\r\n    state.route=i;radios.forEach(function(r,k){r.setAttribute('aria-checked',k===i?'true':'false');r.tabIndex=k===i?0:-1});\r\n    if(focus)radios[i].focus();run();\r\n  }\r\n  radios.forEach(function(r,i){\r\n    r.addEventListener('click',function(){chooseRoute(i)});\r\n    r.addEventListener('keydown',function(e){\r\n      var n=radios.length,k=e.key;\r\n      if(k==='ArrowRight'||k==='ArrowDown'){e.preventDefault();chooseRoute((i+1)%n,true)}\r\n      else if(k==='ArrowLeft'||k==='ArrowUp'){e.preventDefault();chooseRoute((i+n-1)%n,true)}\r\n    });\r\n  });\r\n  \/\/ lecture du trac\u00e9 : pointeur, tactile (d\u00e9filement vertical conserv\u00e9) et clavier\r\n  function idxFromEvent(e){\r\n    var r=chart.getBoundingClientRect(),x=(e.clientX-r.left)\/r.width*W,xs=state.prof.xs,lo=0,hi=xs.length-1;\r\n    while(hi-lo>1){var m=(lo+hi)>>1;if(xs[m]<x)lo=m;else hi=m}\r\n    return Math.abs(xs[lo]-x)<Math.abs(xs[hi]-x)?lo:hi;\r\n  }\r\n  var dragging=false;\r\n  function live(){if(!state.ready&&state.finish)state.finish();return state.ready} \/\/ un geste pendant le trac\u00e9 le termine aussit\u00f4t\r\n  chart.addEventListener('pointerdown',function(e){if(!live())return;dragging=true;try{chart.setPointerCapture(e.pointerId)}catch(_){}place(idxFromEvent(e))});\r\n  chart.addEventListener('pointermove',function(e){if(state.ready&&(dragging||e.pointerType==='mouse'))place(idxFromEvent(e))});\r\n  var stop=function(){dragging=false};\r\n  chart.addEventListener('pointerup',stop);chart.addEventListener('pointercancel',stop);chart.addEventListener('lostpointercapture',stop);\r\n  chart.addEventListener('keydown',function(e){\r\n    var k=e.key,d={ArrowRight:1,ArrowUp:1,ArrowLeft:-1,ArrowDown:-1,PageUp:5,PageDown:-5}[k];\r\n    if(d===undefined&&k!=='Home'&&k!=='End')return;\r\n    e.preventDefault();if(!live())return;\r\n    var i=state.idx,n=state.pts.length-1;place(k==='Home'?0:k==='End'?n:i+d);\r\n  });\r\n  var rz=0;window.addEventListener('resize',function(){clearTimeout(rz);rz=setTimeout(restyle,150)});\r\n\r\n  \/* Carnet de code : le texte vient des fonctions elles-m\u00eames (Function.prototype.toString) *\/\r\n  function esc(t){return t.replace(\/&\/g,'&amp;').replace(\/<\/g,'&lt;').replace(\/>\/g,'&gt;')}\r\n  function hl(src){\r\n    var re=\/(\\\/\\\/[^\\n]*)|('(?:[^'\\\\]|\\\\.)*')|\\b(var|function|return|for|if|else|new|continue)\\b|\\b(\\d+(?:\\.\\d+)?)\\b\/g,out='',last=0,m;\r\n    while((m=re.exec(src))){out+=esc(src.slice(last,m.index));\r\n      out+=m[1]?'<span class=\"t-c\">'+esc(m[1])+'<\/span>':m[2]?'<span class=\"t-s\">'+esc(m[2])+'<\/span>':m[3]?'<span class=\"t-k\">'+m[3]+'<\/span>':'<span class=\"t-n\">'+m[4]+'<\/span>';\r\n      last=re.lastIndex}\r\n    return out+esc(src.slice(last));\r\n  }\r\n  var code=$('[data-code]'),btn=$('.cdl-code__btn'),panel=$('#cdl-code-panel'),built=false;\r\n  btn.addEventListener('click',function(){\r\n    var open=btn.getAttribute('aria-expanded')!=='true';\r\n    btn.setAttribute('aria-expanded',open?'true':'false');panel.hidden=!open;$('[data-codelbl]').textContent=open?'Refermer le carnet':'Ouvrir le carnet de code';\r\n    if(open&&!built){built=true;code.innerHTML=FNS.map(function(f){return '<span class=\"cdl-fn\" data-fn=\"'+f[0]+'\">'+hl(f[1].toString())+'<\/span>'}).join('')}\r\n  });\r\n\r\n  \/* D\u00e9marrage : l'exp\u00e9rience se lance une fois, quand le labo entre dans le champ *\/\r\n  function start(){if(state.started)return;state.started=true;run()}\r\n  if(calm||!('IntersectionObserver' in window)){start()}\r\n  else{var io=new IntersectionObserver(function(en){if(en[0].isIntersecting){io.disconnect();start()}},{threshold:.2});io.observe($('.cdl-rec'));setTimeout(start,6000)}\r\n  if('IntersectionObserver' in window){new IntersectionObserver(function(en){root.classList.toggle('is-off',!en[0].isIntersecting)}).observe(root)}\r\n  setStage(-1);\r\n})();\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Accueil\u00c0 proposServicesContact Bienvenue chez Codeine \u00ab Bienvenue chez \u00bb. Original. Bleu par d\u00e9faut. Comme tout le monde. 4 cartes identiques. D\u00e9j\u00e0 vu. Diagnostic : ennui terminal &lt;section&gt; &lt;h1&gt;Bienvenue chez nous&lt;\/h1&gt; &lt;p&gt;solutions innovantes, orient\u00e9es r\u00e9sultats&lt;\/p&gt; &lt;button&gt;En savoir plus&lt;\/button&gt; &lt;\/section&gt; \/* TODO: supprimer ce template *\/ .carte { border-radius: 14px; \/* d\u00e9j\u00e0 vu *\/ } .carte:nth-child(n) { [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-7","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/newcodeine.dupasquier.ch\/index.php?rest_route=\/wp\/v2\/pages\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/newcodeine.dupasquier.ch\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/newcodeine.dupasquier.ch\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/newcodeine.dupasquier.ch\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/newcodeine.dupasquier.ch\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=7"}],"version-history":[{"count":34,"href":"https:\/\/newcodeine.dupasquier.ch\/index.php?rest_route=\/wp\/v2\/pages\/7\/revisions"}],"predecessor-version":[{"id":46,"href":"https:\/\/newcodeine.dupasquier.ch\/index.php?rest_route=\/wp\/v2\/pages\/7\/revisions\/46"}],"wp:attachment":[{"href":"https:\/\/newcodeine.dupasquier.ch\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}