/*
Theme Name: JDS Design
Author: JDS Design
Description: Portfolio animé pour vidéo, motion design et graphisme. Projets éditables depuis WordPress.
Version: 1.0.8
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: jds-design
*/

:root{--pl:2.2rem;--bg:#ffffff;--ink:#0a0a0a;--pink:#00e5ff;--yel:#f2f2f2;--blue:#0a0a0a;--mint:#19d3c5;--card:#ffffff;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0a0a0a;--ink:#ffffff;--card:#151515}}
:root[data-theme="dark"]{--bg:#0a0a0a;--ink:#ffffff;--card:#151515}
*{box-sizing:border-box;margin:0}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{background:var(--bg);color:var(--ink);font:400 1.05rem/1.55 "DM Sans",system-ui,sans-serif;overflow-x:hidden}
h1,h2,h3{font-family:Unbounded,"Arial Black",sans-serif;line-height:1;letter-spacing:-.03em;font-weight:900}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;padding:.8rem 4vw;background:var(--bg);border-bottom:3px solid var(--ink)}
.logo{font:900 1.3rem Unbounded,sans-serif;text-decoration:none}
.logo b{background:var(--pink);color:#0a0a0a;padding:0 .35rem;border-radius:8px;margin-left:.2rem;display:inline-block;transform:rotate(-4deg)}
nav{display:flex;gap:.5rem;flex-wrap:wrap}
nav a{text-decoration:none;font-weight:700;font-size:.9rem;padding:.4rem .9rem;border:3px solid var(--ink);border-radius:999px;transition:transform .2s,background .2s}
nav a:hover{transform:translateY(-3px) rotate(-2deg);background:var(--pink);color:#0a0a0a}
nav a.on{background:var(--ink);color:var(--bg)}
main{min-height:80vh}
.jds-page{display:none;padding:7vh 4vw 10vh}.jds-page.on{display:block}
.hero h1{font-size:clamp(2.4rem,9.5vw,8.5rem);text-transform:uppercase}
.hero h1 i{font-style:normal;display:inline-block;padding:0 .18em;border-radius:.2em;border:4px solid var(--ink);box-shadow:6px 6px 0 var(--ink)}
.hero h1 i:nth-of-type(1){background:var(--pink);color:#0a0a0a;transform:rotate(-2deg)}
.hero h1 i:nth-of-type(2){background:var(--yel);color:#0a0a0a;transform:rotate(1.5deg)}
.hero h1 i{animation:pop .7s cubic-bezier(.3,1.6,.5,1) both}.hero h1 i:nth-of-type(2){animation-delay:.2s}
@keyframes pop{from{transform:scale(0) rotate(-20deg)}}
.hero p{max-width:48ch;margin:2rem 0;font-size:1.2rem}
.btn{display:inline-block;padding:1rem 1.6rem;font:800 1rem Unbounded,sans-serif;text-decoration:none;background:var(--blue);color:#fff;border:3px solid var(--ink);border-radius:14px;box-shadow:5px 5px 0 var(--ink);transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink)}
.stk{position:absolute;border:4px solid var(--ink);animation:fl 5s ease-in-out infinite alternate}
@keyframes fl{to{transform:translateY(-22px) rotate(12deg)}}
.duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:1.5rem;margin-top:3rem}
.cat{display:block;padding:2rem;border:4px solid var(--ink);border-radius:24px;box-shadow:8px 8px 0 var(--ink);text-decoration:none;min-height:260px;color:#0a0a0a;transition:transform .25s}
.cat:hover{transform:rotate(-1.5deg) scale(1.02)}
.cat h2{font-size:clamp(1.6rem,3.5vw,2.6rem)}.cat p{margin-top:1rem;max-width:32ch}
.c1{background:var(--mint)}.c2{background:var(--pink)}
.marq{overflow:hidden;background:var(--ink);color:var(--pink);padding:.9rem 0;white-space:nowrap;border-block:3px solid var(--ink)}
.marq div{display:inline-flex;gap:2.5rem;animation:mq 22s linear infinite;font:900 1.4rem Unbounded,sans-serif;text-transform:uppercase}
@keyframes mq{to{transform:translateX(-50%)}}
.ph{font-size:clamp(2rem,6vw,4.5rem);margin-bottom:.6rem}
.lead{max-width:52ch;margin-bottom:2.5rem}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:1.4rem}
.card{border:4px solid var(--ink);border-radius:20px;background:var(--card);overflow:hidden;box-shadow:6px 6px 0 var(--ink);transition:transform .2s}
.card:hover{transform:translateY(-6px) rotate(1deg)}
.card div{aspect-ratio:16/10;border-bottom:4px solid var(--ink);display:grid;place-items:center;font:900 2.4rem Unbounded,sans-serif;color:#0a0a0a}
.card h3{font-size:1rem;padding:1rem 1rem .2rem}.card p{padding:0 1rem 1rem;font-size:.92rem;opacity:.8}
.note{margin-top:2rem;font-size:.9rem;opacity:.75}
.cv{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:1.5rem;margin-top:2rem}
.box{border:4px solid var(--ink);border-radius:20px;padding:1.6rem;background:var(--card);box-shadow:6px 6px 0 var(--ink)}
.box h3{font-size:1.15rem;margin-bottom:1rem}
.box li{margin:0 0 .6rem 1.1rem}
.tag{display:inline-block;margin:.2rem .2rem 0 0;padding:.25rem .8rem;border:3px solid var(--ink);border-radius:999px;font-weight:700;font-size:.85rem;background:var(--pink);color:#0a0a0a}
.mail{font:900 clamp(1.4rem,5vw,3.6rem) Unbounded,sans-serif;text-decoration:none;background:var(--pink);color:#0a0a0a;padding:.3rem .8rem;border:4px solid var(--ink);border-radius:16px;display:inline-block;box-shadow:6px 6px 0 var(--ink);word-break:break-word}
footer{padding:1.5rem 4vw;border-top:3px solid var(--ink);font-size:.9rem}
.trail{margin:1.8rem 0}.trail svg{width:100%;height:auto;display:block;overflow:visible}
.trail path{fill:none;stroke:var(--ink);stroke-width:3;stroke-dasharray:4 14;stroke-linecap:round;animation:dash 2.5s linear infinite}
@keyframes dash{to{stroke-dashoffset:-72}}
.pr{fill:#00e5ff;transform-box:fill-box;transform-origin:center}.trail .pr{fill:#00e5ff;transform-box:fill-box;transform-origin:center;animation:spin .12s linear infinite alternate}
@keyframes spin{to{transform:scaleX(.35)}}
.sw{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin-bottom:2rem;font-size:.9rem;font-weight:700}
.sw button{font:inherit;cursor:pointer;padding:.4rem .9rem;border:3px solid var(--ink);border-radius:999px;background:var(--bg);color:var(--ink)}
.sw button.on{background:var(--pink);color:#0a0a0a}
.hv{display:none}.hv.on{display:block}
.vf{position:relative;overflow:hidden;background:#0a0a0a;color:#fff;border:4px solid var(--ink);border-radius:24px;padding:8vh 5vw;min-height:55vh;display:flex;flex-direction:column;justify-content:flex-end;cursor:crosshair}
.vf h1{font-size:clamp(2rem,11vw,10rem);text-transform:uppercase}
.vf p{font:800 clamp(1rem,2.6vw,1.8rem) Unbounded,sans-serif;color:#00e5ff;margin-top:1.2rem}
.fr{position:absolute;left:0;top:0;width:150px;height:96px;border:2px solid #00e5ff;pointer-events:none;will-change:transform}
.fr:before{content:"REC";position:absolute;top:-1.4rem;left:16px;font:700 .75rem "DM Sans";color:#00e5ff;letter-spacing:.05em}
@keyframes rec{50%{opacity:0}}
.fr:after{content:"";position:absolute;top:-1.1rem;left:0;width:9px;height:9px;border-radius:50%;background:#e5484d;animation:rec 1s steps(2) infinite}
.split{display:flex;gap:0;border:4px solid var(--ink);border-radius:24px;overflow:hidden;min-height:38vh}
.sp{flex:1;padding:2rem;text-decoration:none;color:#0a0a0a;transition:flex .5s cubic-bezier(.6,0,.2,1)}
.sp.a{background:#00e5ff}.sp.b{background:#f2f2f2}.sp:hover{flex:2.2}
.sp h2{font-size:clamp(1.5rem,4vw,3rem)}.sp p{margin-top:1rem}
.fl{position:relative;margin-left:34px;padding:1rem 0 1rem var(--pl)}
.fl:before{content:"";position:absolute;left:-4px;top:0;bottom:0;width:4px;background:repeating-linear-gradient(to bottom,var(--ink) 0 4px,transparent 4px 10px)}
.dr2{position:absolute;left:-36px;top:0;width:68px;transition:top .15s linear}
.st{min-height:52vh;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:1rem}
.st h2{font-size:clamp(2rem,6vw,4.5rem)}.st p{max-width:40ch}
.ix{list-style:none;padding:0;border-top:4px solid var(--ink)}
.ix a{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:1.2rem 1rem;border-bottom:4px solid var(--ink);text-decoration:none;font:900 clamp(2rem,8vw,6.5rem) Unbounded,sans-serif;text-transform:uppercase;line-height:1;transition:background .2s,padding .3s}
.ix em{font:700 .95rem "DM Sans";text-transform:none;font-style:normal}
.ix a:hover{background:#00e5ff;color:#0a0a0a;padding-left:3rem}
@media (max-width:640px){.split{flex-direction:column}.sp:hover{flex:1}}
.nd{position:relative;margin-bottom:6vh}
.nd:before{content:"";position:absolute;left:calc(-1*var(--pl) - 10px);top:2rem;width:16px;height:16px;border-radius:50%;background:#00e5ff;border:3px solid var(--ink);z-index:1}
.cta{min-height:40vh;cursor:default}.cta h2{font-size:clamp(2.4rem,9vw,7rem);text-transform:uppercase}
.cta .btn{align-self:flex-start;margin-top:1.6rem;background:#00e5ff;color:#0a0a0a;border-color:#fff;box-shadow:5px 5px 0 #fff}
.dp{position:fixed;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:30;display:flex;gap:.3rem;align-items:center;padding:.4rem .6rem;border:3px solid var(--ink);border-radius:999px;background:var(--bg);font-size:.8rem;font-weight:700}
.dp button{font:inherit;cursor:pointer;width:1.8rem;height:1.8rem;border-radius:50%;border:2px solid var(--ink);background:var(--bg);color:var(--ink)}
.dp button.on{background:#00e5ff;color:#0a0a0a}
.vf .bg{position:absolute;inset:0;width:100%;height:100%}
.vf h1,.vf p{position:relative;z-index:2}.vf .fr{z-index:1}.rw{position:absolute;inset:0;overflow:hidden}.rw img{position:absolute;left:0;top:0;max-width:none;object-fit:cover;object-position:center;will-change:transform}
.wv{animation:dash 5s linear infinite}
.vf .bg{object-fit:cover;object-position:center;z-index:0}
#vf:after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(to top,rgba(0,0,0,.88),rgba(0,0,0,.6) 55%,rgba(0,0,0,.45))}
.logo{display:flex;align-items:center;gap:.6rem}
.lg{width:44px;height:44px;flex:none;background:#0a0a0a;border:3px solid var(--ink);border-radius:12px;display:grid;place-items:center;transition:transform .3s}
.logo:hover .lg{transform:rotate(-8deg) scale(1.08)}
.lg img{height:26px;width:auto;display:block}
.wm{position:absolute;right:4%;bottom:-8%;height:115%;width:auto;opacity:.13;pointer-events:none;z-index:0}
.cta h2,.cta .btn{position:relative;z-index:2}
@media (max-width:640px){header{padding:.6rem 4vw}nav{flex-wrap:nowrap;overflow-x:auto;width:100%;padding:.2rem 0;scrollbar-width:none}nav::-webkit-scrollbar{display:none}nav a{white-space:nowrap;font-size:.8rem;padding:.3rem .65rem;flex:none}.lg{width:38px;height:38px}.lg img{height:22px}.logo{font-size:1.05rem}:root{--pl:1.2rem}.fl{margin-left:12px}.dr2{width:44px;left:-20px}.vf{padding:6vh 6vw}}
#wipe{position:fixed;inset:0;z-index:50;background:var(--pink);transform:translateY(100%);pointer-events:none}
#wipe.go{animation:wp .7s cubic-bezier(.7,0,.3,1)}
html.jds-arriving{background:#00e5ff}
html.jds-arriving #wipe{transform:translateY(0)}
#wipe.jds-leaving{transform:translateY(0);transition:transform .35s cubic-bezier(.7,0,.3,1)}
#wipe.jds-entering{animation:jds-reveal .38s cubic-bezier(.7,0,.3,1) both}
@keyframes jds-reveal{from{transform:translateY(0)}to{transform:translateY(-100%)}}
@keyframes wp{0%{transform:translateY(100%)}45%,55%{transform:none}100%{transform:translateY(-100%)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}


/* Refinements for a deployable portfolio draft */
:root{scroll-behavior:smooth}
.jds-page{max-width:1600px;margin:auto}
.vf:not(.cta){min-height:clamp(480px,72vh,900px)}
.vf .bg{filter:saturate(.8) contrast(1.08)}
.vf h1{max-width:9ch;text-wrap:balance}
.vf p{line-height:1.25}
.split{box-shadow:8px 8px 0 var(--ink)}
.sp{display:flex;flex-direction:column;justify-content:space-between;min-height:330px}
.tile-arrow{align-self:flex-end;display:grid;place-items:center;width:78px;height:78px;margin-top:1.5rem;border:4px solid #0a0a0a;border-radius:18px;background:#fff;box-shadow:5px 5px 0 #0a0a0a;transform:rotate(-8deg);transition:transform .28s,box-shadow .28s}
.tile-arrow svg{width:42px;height:42px}.sp:hover .tile-arrow,.sp:focus-visible .tile-arrow{transform:rotate(0deg) translate(3px,-3px);box-shadow:8px 8px 0 #0a0a0a}.sp.b .tile-arrow{background:#00e5ff;transform:rotate(8deg)}.sp.b:hover .tile-arrow,.sp.b:focus-visible .tile-arrow{transform:rotate(0deg) translate(3px,-3px)}
.card div{font-size:clamp(2rem,4vw,3.5rem)}
.contact-panel{max-width:850px;border:4px solid var(--ink);border-radius:24px;background:var(--pink);color:#0a0a0a;padding:clamp(1.5rem,5vw,4rem);box-shadow:8px 8px 0 var(--ink)}
.contact-panel h2{font-size:clamp(2rem,5vw,4rem);margin:.7rem 0 1.5rem}
.eyebrow{font:800 .8rem Unbounded,sans-serif;text-transform:uppercase;letter-spacing:.08em}
.contact-cues{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:2rem}
.contact-cues span{border:2px solid currentColor;border-radius:999px;padding:.35rem .8rem;font-weight:700;font-size:.85rem}
footer.site-footer{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem 2rem}
.footer-identity{display:flex;flex-wrap:wrap;gap:.4rem 1rem}.footer-identity a{text-underline-offset:.25em}.footer-tagline{text-align:right}
.footer-social{display:flex;gap:.6rem;justify-content:center}.footer-social a{display:grid;place-items:center;width:44px;height:44px;background:var(--pink);color:#0a0a0a;border:3px solid var(--ink);border-radius:12px;box-shadow:3px 3px 0 var(--ink);transition:transform .2s}.footer-social a:hover{transform:translateY(-4px)}.footer-social svg{width:23px;height:23px}
@media(max-width:640px){.jds-page{padding:5vh 5vw 11vh}.vf:not(.cta){min-height:60vh}.vf h1{font-size:clamp(2.5rem,14vw,5rem)}.sp{min-height:230px}.contact-panel{box-shadow:5px 5px 0 var(--ink)}}
@media(max-width:800px){footer.site-footer{grid-template-columns:1fr;justify-items:center;text-align:center}.footer-identity{justify-content:center}.footer-tagline{text-align:center}}
.btn-disabled{opacity:.5;cursor:not-allowed;box-shadow:none}.contact-panel .mail{font-size:clamp(1rem,3vw,1.5rem);padding:.7rem 1rem}.contact-address{font-weight:700;word-break:break-word;margin-top:1rem}
.single-content h2,.single-content h3{line-height:1.2;margin:2rem 0 .8rem}.single-content ul,.single-content ol{padding-left:1.5rem}.single-content a{text-underline-offset:.2em}.single-content p{overflow-wrap:anywhere}
.legal-page h2{font-size:clamp(1.3rem,3vw,2rem);margin:2.5rem 0 1rem}.legal-page dl{display:grid;grid-template-columns:minmax(130px,220px) 1fr;gap:.8rem 1.5rem;max-width:850px}.legal-page dt{font-weight:700}.legal-page dd{margin:0;overflow-wrap:anywhere}.legal-missing{color:#a00;background:#fff3d6;padding:.1rem .3rem;border-radius:4px}.legal-privacy{margin-top:3rem;border-top:3px solid var(--ink);padding-top:1rem}.legal-privacy h3{font-size:1.1rem}.legal-extra{margin-top:2rem}@media(max-width:600px){.legal-page dl{grid-template-columns:1fr;gap:.25rem}.legal-page dd{margin-bottom:.9rem}}

.card-link{display:block;color:inherit;text-decoration:none;height:100%}.card-thumb{position:relative;overflow:hidden}.card-thumb img{width:100%;height:100%;object-fit:cover;display:block}.card-link:focus-visible{outline:3px solid #00e5ff;outline-offset:4px}.card:hover .card-thumb img{transform:scale(1.04)}.card-thumb img{transition:transform .4s}.card .card-thumb{display:block;aspect-ratio:16/10;border-bottom:4px solid var(--ink)}.card .card-thumb:not(:has(img)){display:grid;place-items:center;font:900 2.4rem Unbounded,sans-serif}.single-wrap{max-width:1100px;margin:auto;padding:6vh 4vw 10vh}.single-wrap h1{font-size:clamp(2.2rem,7vw,5.5rem);margin:1rem 0 2rem;overflow-wrap:anywhere}.single-cover{border:4px solid var(--ink);border-radius:24px;overflow:hidden;box-shadow:8px 8px 0 var(--ink);margin-bottom:2.5rem}.single-cover img{width:100%;height:auto;display:block}.single-content{max-width:75ch;font-size:1.1rem}.single-content>*{margin-bottom:1.2rem}.single-content img{max-width:100%;height:auto}.single-content iframe{max-width:100%}.video-wrap{aspect-ratio:16/9;margin:2rem 0}.video-wrap iframe{width:100%;height:100%;border:0}.back-link{font-weight:800;text-decoration:none;border-bottom:3px solid var(--pink)}.empty-projects{border:3px dashed var(--ink);border-radius:20px;padding:2rem;background:var(--card)}.contact-panel .mail{margin-top:1.5rem;background:#fff}.jds-page.on{display:block}body.admin-bar header{top:calc(32px + env(safe-area-inset-top,0px))}@media(max-width:782px){body.admin-bar header{top:calc(46px + env(safe-area-inset-top,0px))}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Per-video consent: the player has no src until the visitor accepts. */
.jds-video-consent{min-height:260px;aspect-ratio:16/9;background:#151515;color:#fff;border:3px solid var(--ink);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:1.3rem;gap:.7rem}
.jds-video-consent__notice{max-width:42rem}.jds-video-consent__notice p{line-height:1.5;margin:0 0 1rem}.jds-video-consent__notice a{display:block;color:#fff;margin-top:.9rem;text-decoration:underline}.jds-video-consent button{cursor:pointer;border:2px solid var(--ink);border-radius:10px;background:var(--pink);color:#111;font:800 1rem 'DM Sans',sans-serif;padding:.8rem 1rem;box-shadow:3px 3px 0 #fff}.jds-video-consent button:focus-visible,.jds-video-consent a:focus-visible{outline:3px solid #00e5ff;outline-offset:3px}
.jds-video-consent:has(.jds-video-consent__player){padding:0;justify-content:flex-start;aspect-ratio:auto}.jds-video-consent__player{display:block;width:100%;aspect-ratio:16/9;border:0}.jds-video-consent__withdraw{margin:.8rem!important;font-size:.8rem!important;padding:.5rem .8rem!important}
.jds-video-consent__notice[hidden]{display:none}
@media(max-width:600px){.jds-video-consent{min-height:290px;aspect-ratio:auto}.jds-video-consent__notice p{font-size:.9rem}}