/* CTRL-Z Expérience */
:root{--acc:#d9a441;--red:#ff2d55;--cyan:#00e1ff;--bg:#08080a;--ink:#f3f0ea;--mute:#8a847a;--rail:92px;--top:0px;--vw:calc(100vw - var(--rail))}
body.admin-bar{--top:32px}
html body.czx{background:var(--bg);color:var(--ink);font-family:Manrope,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
body.czx #masthead,body.czx .site-header,body.czx #colophon,body.czx .site-footer,body.czx #loftloader-wrapper,body.czx .entry-hero{display:none!important}
body.czx .site,body.czx #wrapper,body.czx .content-bg,body.czx .entry{background:var(--bg)!important;box-shadow:none!important}
body.czx #wrapper{margin-left:var(--rail)}
body.czx-moved #wrapper{display:none}
body.czx-moved{overflow-x:hidden}
.czx-chrome *,.czx-stage *,.czx-frame,.czx-frame *{box-sizing:border-box}
.czx-chrome a,.czx-frame a{text-decoration:none}

/* ---------- Rail ---------- */
.czx-rail{position:fixed;left:0;top:var(--top);bottom:0;width:var(--rail);z-index:40;background:#050506;border-right:1px solid #1b1b20;display:flex;flex-direction:column;align-items:center;padding:20px 0 30px}
.czx-logo{display:block;width:58px;height:58px}.czx-logo img{width:100%;height:100%;display:block}
.czx-word{font:400 15px/1 Anton,sans-serif;letter-spacing:.12em;margin-top:10px;color:var(--ink)}
.czx-3dbtn{all:unset;cursor:pointer;margin:16px 0 6px;display:flex;flex-direction:column;align-items:center;gap:7px;font:700 9px/1 Manrope,sans-serif;letter-spacing:.22em;color:var(--mute);text-transform:uppercase}
.czx-3dbtn svg{width:42px;height:20px;transition:transform .3s}.czx-3dbtn:hover svg{transform:scale(1.12)}
body.czx-3d .czx-3dbtn{color:var(--ink)}
.czx-nav{margin:auto 0;display:flex;flex-direction:column;align-items:center;gap:2px}
.czx-nav a{writing-mode:vertical-rl;transform:rotate(180deg);font:600 10px/1 Manrope,sans-serif;letter-spacing:.22em;text-transform:uppercase;color:var(--mute)!important;padding:9px 0;position:relative;transition:color .35s}
.czx-nav a b{font-weight:800;color:var(--acc);margin-bottom:8px}
.czx-nav a::before{content:"";position:absolute;right:-17px;top:0;bottom:0;width:2px;background:var(--acc);transform:scaleY(0);transition:transform .45s cubic-bezier(.7,0,.2,1)}
.czx-nav a:hover,.czx-nav a.on{color:var(--ink)!important}.czx-nav a.on::before{transform:scaleY(1)}
@media (max-height:840px){.czx-word{display:none}.czx-rail{padding:14px 0 34px}.czx-logo{width:44px;height:44px}.czx-3dbtn{margin:10px 0 0}.czx-nav{gap:0}.czx-nav a{padding:5px 0;font-size:9px;letter-spacing:.16em}.czx-nav a b{margin-bottom:4px}}

/* ---------- Stage / pellicule ---------- */
.czx-stage{display:none;position:fixed;top:var(--top);left:0;right:0;bottom:0;overflow:hidden;background:var(--bg);z-index:5}
body.czx-moved .czx-stage{display:block;animation:czxOpen 1.15s .05s cubic-bezier(.77,0,.18,1) both}
body.czx-moved.czx-intro-on .czx-stage{animation-delay:.95s;animation-duration:1.5s}
@keyframes czxOpen{from{clip-path:circle(0% at 50% 50%)}to{clip-path:circle(120% at 50% 50%)}}
body.czx-leaving .czx-stage,body.czx-leaving:not(.czx-moved) #wrapper{animation:czxClose .6s cubic-bezier(.77,0,.18,1) forwards!important}
@keyframes czxClose{from{clip-path:circle(120% at 50% 50%)}to{clip-path:circle(0% at 50% 50%)}}
.czx-track{position:absolute!important;top:0;left:var(--rail);height:100%;display:flex!important;flex-wrap:nowrap;will-change:transform;margin:0!important;padding:0!important;max-width:none!important;width:auto!important}
.czx-track>*{flex:0 0 auto;margin:0!important;max-width:none!important}
.czx-sprk,.czx-hud,.czx-prog{display:none}
body.czx-moved .czx-sprk,body.czx-moved .czx-hud,body.czx-moved .czx-prog{display:flex}
.czx-sprk{position:fixed;left:var(--rail);right:0;height:26px;z-index:30;pointer-events:none;background-color:#050506;background-image:linear-gradient(90deg,rgba(243,240,234,.13) 0 18px,transparent 18px 46px);background-size:46px 10px;background-repeat:repeat-x;background-position:0 50%}
.czx-sprk.t{top:var(--top);border-bottom:1px solid #18181c}.czx-sprk.b{bottom:0;border-top:1px solid #18181c}
.czx-hud{position:fixed;right:30px;bottom:44px;z-index:31;gap:22px;align-items:center;font:600 10.5px/1 Manrope,sans-serif;letter-spacing:.22em;color:var(--mute);pointer-events:none}
.czx-hud .rec{width:8px;height:8px;border-radius:50%;background:var(--red);animation:czxBlink 1.2s steps(2) infinite}
@keyframes czxBlink{50%{opacity:0}}
.czx-hud .tc{color:var(--ink);font-variant-numeric:tabular-nums}
.czx-prog{position:fixed;left:var(--rail);right:0;bottom:26px;height:2px;background:rgba(255,255,255,.06);z-index:31}
.czx-prog i{display:block;width:100%;height:100%;background:linear-gradient(90deg,var(--red),var(--acc),var(--cyan));transform-origin:left;transform:scaleX(0)}
.czx-grain{position:fixed;inset:-60%;z-index:35;pointer-events:none;opacity:.07;animation:czxGrain .9s steps(6) infinite}
@keyframes czxGrain{0%{transform:translate(0,0)}20%{transform:translate(-8%,4%)}40%{transform:translate(5%,-6%)}60%{transform:translate(-4%,8%)}80%{transform:translate(7%,2%)}100%{transform:translate(0,0)}}
.czx-vig{position:fixed;inset:0;pointer-events:none;z-index:34;box-shadow:inset 0 0 240px rgba(0,0,0,.85)}
.czx-cur{position:fixed;left:0;top:0;width:34px;height:34px;margin:-17px 0 0 -17px;border:1px solid rgba(255,255,255,.7);border-radius:50%;z-index:60;pointer-events:none;transition:width .35s,height .35s,margin .35s,background .35s,border-color .35s,opacity .3s;mix-blend-mode:difference;display:grid;place-items:center;opacity:0}
body.czx-cursor .czx-cur{opacity:1}
.czx-cur span{font:800 10px/1 Manrope,sans-serif;letter-spacing:.2em;color:#000;opacity:0;transition:opacity .2s;text-transform:uppercase}
.czx-cur.big{width:96px;height:96px;margin:-48px 0 0 -48px;background:#fff;border-color:#fff}.czx-cur.big span{opacity:1}
body.czx-cursor,body.czx-cursor a,body.czx-cursor button{cursor:none!important}
.czx-intro{display:none;position:fixed;inset:0;z-index:80;background:#000;place-items:center;pointer-events:none;animation:czxFade .4s 1.45s forwards}
body.czx-intro-on .czx-intro{display:grid}
.czx-intro img{width:130px;animation:czxIris 1.75s cubic-bezier(.7,0,.25,1) forwards}
@keyframes czxIris{0%{transform:scale(.3) rotate(-220deg);opacity:0}45%{transform:scale(1) rotate(0);opacity:1}62%{transform:scale(1) rotate(0)}100%{transform:scale(34) rotate(40deg);opacity:0}}
@keyframes czxFade{to{opacity:0;visibility:hidden}}

/* ---------- Séquences ---------- */
.czx-frame{position:relative;overflow:hidden;color:var(--ink);background:var(--bg)}
body.czx-moved .czx-frame{height:100%;width:var(--fw,auto)}
.czx-in{position:relative;z-index:2;height:100%;display:flex;align-items:center;gap:5vw;padding:0 6vw}
.czx-in>*{flex:0 0 auto;margin-top:0!important;margin-bottom:0!important}
.czx-v-hero .czx-in,.czx-v-end .czx-in{flex-direction:column;align-items:flex-start;justify-content:center;gap:18px;padding:0 7vw}
.czx-v-end{background:radial-gradient(ellipse at 70% 50%,#17151a,var(--bg) 65%)}
.czx-v-manifest .czx-in{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:0;padding:15vh 8vw 0}
.czx-v-manifest .czx-in>h1,.czx-v-manifest .czx-in>h2,.czx-v-manifest .czx-in>h3{white-space:nowrap;will-change:transform}
.czx-v-manifest .czx-in>p:last-child{position:absolute;right:9vw;bottom:11vh;max-width:440px;border-left:2px solid var(--acc);padding-left:22px}
.czx-bg{position:absolute;inset:-4%;z-index:0}
.czx-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 45%;filter:grayscale(1) contrast(1.15) brightness(var(--br,.55))}
.czx-v-hero .czx-bg{animation:czxZoom 26s ease-in-out infinite alternate}
@keyframes czxZoom{from{transform:scale(1.02)}to{transform:scale(1.14)}}
.czx-frame.has-bg::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(8,8,10,.92) 0%,rgba(8,8,10,.35) 55%,rgba(8,8,10,.75) 100%);pointer-events:none}
.czx-vlabel{writing-mode:vertical-rl;transform:rotate(180deg);font:700 11px/1 Manrope,sans-serif;letter-spacing:.4em;text-transform:uppercase;color:var(--mute);align-self:center}
.czx-vlabel b{color:var(--acc)}
.czx-cue{position:absolute;z-index:3;right:6vw;bottom:84px;display:flex;align-items:center;gap:16px;font:700 10.5px/1 Manrope,sans-serif;letter-spacing:.3em;text-transform:uppercase;color:var(--mute)}
.czx-cue i{display:block;width:90px;height:1px;background:rgba(255,255,255,.2);position:relative;overflow:hidden}
.czx-cue i::after{content:"";position:absolute;inset:0;background:var(--acc);animation:czxCue 2s cubic-bezier(.7,0,.2,1) infinite}
@keyframes czxCue{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}

/* ---------- Typo ---------- */
body.czx .czx-frame :where(h1,h2,h3,h4,p,li){color:var(--ink)}
body.czx .czx-frame :where(.is-style-czx-display,.is-style-czx-relief,.is-style-czx-outline,.czx-vt){font-family:Anton,Impact,sans-serif;font-weight:400;text-transform:uppercase;line-height:.88;letter-spacing:.005em;margin:0;font-size:clamp(70px,10.5vw,210px)}
body.czx .czx-v-hero :where(h1){font-size:clamp(100px,19vw,350px)}
body.czx .czx-v-manifest :where(h1,h2,h3){font-size:clamp(60px,8.4vw,170px)}
body.czx .czx-frame .is-style-czx-outline{color:transparent;-webkit-text-stroke:1.5px rgba(243,240,234,.85)}
.czx-ana{position:relative;color:transparent!important}
.czx-ana::before,.czx-ana::after{content:attr(data-t);position:absolute;left:0;top:0;width:100%;mix-blend-mode:screen;pointer-events:none;white-space:pre-line}
.czx-ana::before{color:var(--red);transform:translate3d(calc(var(--dx,4px) * -1),0,0)}
.czx-ana::after{color:var(--cyan);transform:translate3d(var(--dx,4px),0,0)}
body.czx .czx-frame .is-style-czx-kicker,.czx-k{font:700 11px/1.5 Manrope,sans-serif;letter-spacing:.32em;text-transform:uppercase;color:var(--acc);margin:0}
body.czx .czx-frame .is-style-czx-kicker a{color:var(--acc)}
body.czx .czx-frame .is-style-czx-lead{font-size:18px;line-height:1.65;color:#cfc9bf;max-width:470px}
body.czx .czx-frame .is-style-czx-tags{font:600 13px/1.6 Manrope,sans-serif;letter-spacing:.24em;text-transform:uppercase;color:#d8d2c7;word-spacing:.2em}
body.czx .czx-frame .is-style-czx-small{font:600 11px/1.8 Manrope,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);margin-top:40px!important}
body.czx .czx-frame .is-style-czx-small a{color:var(--mute)}body.czx .czx-frame .is-style-czx-small a:hover{color:var(--ink)}
body.czx .czx-frame p{font-size:16px;line-height:1.65}
body.czx .czx-frame p a{color:var(--acc)}
.wp-block-button.is-style-czx-btn .wp-block-button__link{position:relative;z-index:0;overflow:hidden;display:inline-flex;align-items:center;gap:18px;margin-top:26px;padding:24px 40px;border:1px solid var(--acc);border-radius:0;background:transparent!important;color:var(--ink)!important;font:700 13px/1 Manrope,sans-serif;letter-spacing:.28em;text-transform:uppercase;transition:color .5s}
.wp-block-button.is-style-czx-btn .wp-block-button__link::before{content:"";position:absolute;inset:0;background:var(--acc);transform:translateX(-101%);transition:transform .6s cubic-bezier(.7,0,.2,1);z-index:-1}
.wp-block-button.is-style-czx-btn .wp-block-button__link:hover{color:#0b0b0d!important}.wp-block-button.is-style-czx-btn .wp-block-button__link:hover::before{transform:none}
.czx-rv{opacity:0;transform:translate3d(60px,0,0);transition:opacity 1.1s cubic-bezier(.2,.7,.2,1),transform 1.1s cubic-bezier(.2,.7,.2,1)}
.czx-rv.in{opacity:1;transform:none}

/* ---------- Colonnes ---------- */
.czx-col{display:flex;flex-direction:column;align-items:flex-start;gap:22px;width:var(--cw,auto)}
.czx-col>*{margin:0!important}
.czx-col .wp-block-image{width:100%}
.czx-col .wp-block-image img{width:100%;height:34vh;object-fit:cover;display:block}
.czx-col .wp-block-shortcode,.czx-col .wpcf7{width:100%}

/* ---------- Cartes ---------- */
.czx-cards{display:flex;gap:2.4vw;align-items:center}
.czx-card{position:relative;flex:0 0 auto;width:clamp(260px,23vw,420px);display:block;color:var(--ink)!important}
.czx-card:nth-child(even){margin-top:14vh}
.czx-card .ph{position:relative;height:52vh;overflow:hidden;background:#111}
.czx-card .ph img{position:absolute;top:0;left:-15%;width:130%;max-width:none;height:100%;object-fit:cover;filter:grayscale(.35) brightness(.85);transition:filter .6s,scale .9s cubic-bezier(.2,.7,.2,1);will-change:transform}
.czx-card:hover .ph img{filter:url(#czxAna) grayscale(0) brightness(1);scale:1.06}
.czx-card .ph::after{content:"";position:absolute;inset:0;border:1px solid rgba(255,255,255,.08);pointer-events:none}
.czx-card .n{position:absolute;top:14px;left:16px;z-index:2;font:400 46px/1 Anton,sans-serif;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.75)}
.czx-card h3{font:400 30px/1.02 Anton,sans-serif!important;text-transform:uppercase;margin:20px 0 10px!important;letter-spacing:.01em;color:var(--ink)}
.czx-card p{font-size:14.5px!important;line-height:1.6;color:#b7b1a7!important;margin:0;max-width:92%}

/* ---------- Bande de réalisations ---------- */
.czx-strip{display:flex;align-items:stretch;height:70vh;border-top:10px solid #050506;border-bottom:10px solid #050506;background:#050506}
.czx-proj{position:relative;flex:0 0 auto;width:min(34vw,560px);overflow:hidden;border-right:10px solid #050506;display:block;color:var(--ink)!important}
.czx-proj img{position:absolute;top:0;left:-12%;width:124%;max-width:none;height:100%;object-fit:cover;filter:grayscale(1) brightness(.5);transition:filter .7s,scale 1s cubic-bezier(.2,.7,.2,1)}
.czx-proj:hover img{filter:url(#czxAna) grayscale(0) brightness(.85);scale:1.07}
.czx-proj .meta{position:absolute;left:0;right:0;bottom:0;padding:34px 30px;z-index:2;background:linear-gradient(0deg,rgba(0,0,0,.92),transparent)}
.czx-proj h3{font:400 clamp(30px,2.6vw,46px)/1 Anton,sans-serif!important;text-transform:uppercase;margin:10px 0 12px!important;color:var(--ink)}
.czx-proj p{margin:0;font-size:14px!important;line-height:1.55;color:#cbc5bb!important;max-height:0;overflow:hidden;opacity:0;transition:max-height .7s,opacity .5s}
.czx-proj:hover p{max-height:160px;opacity:1}
.czx-proj .yr{position:absolute;top:24px;right:26px;z-index:2;font:700 11px/1 Manrope,sans-serif;letter-spacing:.25em}

/* ---------- Liste numérotée ---------- */
.czx-list{list-style:none!important;margin:0!important;padding:0!important;width:430px;counter-reset:czx}
.czx-list li{display:flex;gap:22px;align-items:baseline;padding:20px 0;border-bottom:1px solid rgba(255,255,255,.09);margin:0;counter-increment:czx}
.czx-list li b{font:400 15px/1 Anton,sans-serif;color:var(--acc);min-width:28px}
.czx-list li b::before{content:counter(czx,decimal-leading-zero)}
.czx-list li strong{display:block;font:400 25px/1.05 Anton,sans-serif;text-transform:uppercase;letter-spacing:.01em;margin-bottom:6px;color:var(--ink)}
.czx-list li span{font-size:14px;line-height:1.55;color:#aaa49a}

/* ---------- Grand visuel ---------- */
.czx-visual{position:relative;flex:0 0 auto;width:calc(var(--vw) * var(--vw-w,62) / 100);height:100vh;margin-left:-6vw!important;overflow:hidden}
.czx-visual img{position:absolute;top:0;left:-10%;width:120%;max-width:none;height:100%;object-fit:cover;filter:brightness(.6) contrast(1.1)}
.czx-visual::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,8,10,.85),transparent 60%)}
.czx-visual .cap{position:absolute;left:6vw;bottom:14vh;z-index:2}
body.czx .czx-visual .czx-vt{font-size:clamp(80px,11vw,220px);margin-top:14px}

/* ---------- Défilé ---------- */
.czx-marq{display:flex;gap:3vw;height:100vh;overflow:hidden;-webkit-mask:linear-gradient(transparent,#000 18%,#000 82%,transparent);mask:linear-gradient(transparent,#000 18%,#000 82%,transparent)}
.czx-marq .col{display:flex;flex-direction:column;gap:46px;animation:czxUp 38s linear infinite;padding-top:20px}
.czx-marq .col.r{animation-direction:reverse;animation-duration:46s}
.czx-marq .col span{font:400 clamp(28px,2.7vw,48px)/1 Anton,sans-serif;text-transform:uppercase;white-space:nowrap;color:#e9e4da}
.czx-marq .col span:nth-child(3n){color:transparent;-webkit-text-stroke:1px rgba(243,240,234,.7)}
.czx-marq .col span:nth-child(4n){color:var(--acc)}
@keyframes czxUp{from{transform:translateY(0)}to{transform:translateY(-50%)}}

/* ---------- Formulaire ---------- */
body.czx .wpcf7 label{display:block;font:700 11px/1.5 Manrope,sans-serif;letter-spacing:.28em;text-transform:uppercase;color:var(--mute);margin-bottom:22px}
body.czx .wpcf7 input[type=text],body.czx .wpcf7 input[type=email],body.czx .wpcf7 input[type=tel],body.czx .wpcf7 textarea{width:100%;background:transparent!important;border:0!important;border-bottom:1px solid rgba(255,255,255,.22)!important;border-radius:0!important;color:var(--ink)!important;padding:12px 0!important;font:400 17px/1.4 Manrope,sans-serif!important;letter-spacing:0;text-transform:none;box-shadow:none!important;margin-top:6px}
body.czx .wpcf7 textarea{height:110px;resize:vertical}
body.czx .wpcf7 input:focus,body.czx .wpcf7 textarea:focus{outline:0;border-bottom-color:var(--acc)!important}
body.czx .wpcf7 input[type=submit]{background:transparent!important;border:1px solid var(--acc)!important;color:var(--ink)!important;border-radius:0!important;padding:20px 38px!important;font:700 12px/1 Manrope,sans-serif!important;letter-spacing:.28em;text-transform:uppercase;transition:background .4s,color .4s}
body.czx .wpcf7 input[type=submit]:hover{background:var(--acc)!important;color:#0b0b0d!important}

/* ---------- Mode relief ---------- */
body.czx-3d .czx-frame img{filter:url(#czxAna) grayscale(.6) brightness(.8)!important}

/* ---------- Pages classiques ---------- */
body.czx:not(.czx-h) .entry-content{color:var(--ink)}

/* ---------- Mobile / tactile ---------- */
@media (max-width:900px),(pointer:coarse){
 :root{--rail:0px}
 body.czx #wrapper{margin-left:0;padding-top:64px}
 .czx-rail{top:var(--top);bottom:auto;left:0;right:0;width:auto;height:64px;flex-direction:row;padding:0 18px;gap:14px;border-right:0;border-bottom:1px solid #1b1b20}
 .czx-nav,.czx-word,.czx-cur,.czx-intro{display:none!important}
 .czx-logo{width:40px;height:40px}.czx-3dbtn{margin:0 0 0 auto;flex-direction:row}
 body.czx-cursor,body.czx-cursor a{cursor:auto!important}
 .czx-frame{width:100%!important;min-height:100svh;height:auto}
 .czx-in{flex-direction:column;align-items:flex-start;justify-content:center;gap:34px;padding:90px 22px!important;height:auto;min-height:100svh}
 .czx-v-manifest .czx-in>h1,.czx-v-manifest .czx-in>h2,.czx-v-manifest .czx-in>h3{white-space:normal}
 .czx-v-manifest .czx-in>p:last-child{position:static;margin-top:30px!important}
 .czx-vlabel{writing-mode:horizontal-tb;transform:none;align-self:flex-start}
 .czx-cards,.czx-strip,.czx-marq{flex-direction:column;height:auto;width:100%}
 .czx-card,.czx-proj,.czx-list,.czx-col{width:100%!important}
 .czx-card:nth-child(even){margin-top:0}.czx-card .ph{height:46vh}
 .czx-proj{height:62vh;border-right:0;border-bottom:10px solid #050506}.czx-proj p{max-height:none;opacity:1}
 .czx-visual{width:calc(100% + 44px)!important;margin:0 -22px!important;height:70vh}
 .czx-marq{height:auto;-webkit-mask:none;mask:none}.czx-marq .col{animation:none;gap:18px}.czx-marq .col span:nth-child(n+7){display:none}
 .czx-rv{opacity:1;transform:none}
 .czx-col .wp-block-image img{height:40vh}
}
@media (prefers-reduced-motion:reduce){.czx-intro{display:none!important}.czx-stage{animation:none!important}.czx-grain,.czx-v-hero .czx-bg,.czx-marq .col{animation:none}}