/* =========================================================
   Kuroro Design · portfolio
   Mis en page comme la charte : fond papier, texte anthracite, F4llen en minuscules pour les titres,
   Space Grotesk pour le texte, petites capitales espacées pour les repères. Le dégradé reste dans le symbole.
   ========================================================= */
@font-face{font-family:"F4llen";src:url(/assets/fonts/F4llen-Bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"F4llen";src:url(/assets/fonts/F4llen-ExtraBold.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"F4llen";src:url(/assets/fonts/F4llen-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url(/assets/fonts/SpaceGrotesk-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url(/assets/fonts/SpaceGrotesk-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url(/assets/fonts/SpaceGrotesk-SemiBold.woff2) format("woff2");font-weight:600;font-display:swap}

:root{
  --ink:#1B1B1E;--paper:#EDEBE6;--paper-2:#E4E1DA;--white:#F7F6F2;
  --violet:#A445E6;--rose:#FF4FB8;--grad:linear-gradient(120deg,#A445E6,#FF4FB8);
  --mute:#6E6C73;--mute-d:#9D9BA3;--rule:rgba(27,27,30,.16);--rule-d:rgba(237,235,230,.16);
  --f-d:"F4llen","Arial Black",sans-serif;--f-t:"Space Grotesk",ui-sans-serif,system-ui,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.19,1,.22,1);
  --pad:clamp(18px,4vw,64px);--gut:clamp(14px,1.8vw,28px);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
html:has(dialog[open]){overflow:hidden}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--f-t);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{margin:0;font-family:var(--f-d);font-weight:700;letter-spacing:-.03em;line-height:1.02}
p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
[hidden]{display:none!important}
::selection{background:var(--ink);color:var(--paper)}
:focus-visible{outline:2px solid var(--violet);outline-offset:3px}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:var(--paper);padding:10px 16px;text-decoration:none}
.skip:focus{top:12px}

/* repères en petites capitales, comme dans la charte (« 01 · LE SYMBOLE ») */
.idx,.cap,dt,.cover__now span{font-size:12px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--mute)}
.idx span:first-child{color:var(--ink)}
.cap{line-height:1.7}
.link{display:inline-flex;gap:.4em;align-items:baseline;font-weight:500;text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;padding-bottom:3px;transition:background-size .5s var(--ease)}
.link:hover{background-size:0 1px;background-position:100% 100%}
.linkbtn{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:3px}

/* ---------- menu ---------- */
.nav{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;gap:28px;height:64px;padding:0 var(--pad);background:rgba(237,235,230,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;margin-right:auto}
.brand__sym{width:28px;height:28px;rotate:var(--rot,0deg)}
.brand span{font:700 16px/1 var(--f-d);letter-spacing:-.02em}
.nav__links{display:none;gap:26px}
.nav__links a{display:flex;align-items:baseline;gap:6px;text-decoration:none;font-size:14px;font-weight:500;color:var(--mute);transition:color .2s}
.nav__links i{font-style:normal;font-size:10.5px;letter-spacing:.1em}
.nav__links a:hover,.nav__links a.is-active{color:var(--ink)}
.lang{display:flex;align-items:center;gap:4px;padding:0;border:0;background:none;cursor:pointer;font:500 13px/1 var(--f-t);color:var(--mute)}
.lang__sep{opacity:.5}
html[lang="fr"] .lang [data-l="fr"],html[lang="en"] .lang [data-l="en"]{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.nav__bar{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--grad);transform-origin:left;transform:scaleX(0)}
.nav::after{content:"";position:absolute;left:var(--pad);right:var(--pad);bottom:0;height:1px;background:var(--rule);opacity:0;transition:opacity .3s}
.nav.is-scrolled::after{opacity:1}
@media (min-width:980px){.nav__links{display:flex}}

/* ---------- couverture ---------- */
.cover{padding:96px var(--pad) 0}
.mast{font-size:clamp(62px,15.6vw,272px);font-weight:700;line-height:.86;letter-spacing:-.055em;margin-left:-.05em}
.mast__l{display:block;overflow:hidden;padding-bottom:.06em}
.mast__l>span{display:inline-block}
.mast__l:last-child{display:flex;align-items:center;gap:.08em}
.mast__sym{width:.62em;height:.62em;flex:none;margin-left:.06em;rotate:var(--rot,0deg)}
.cover__row{display:grid;gap:26px;margin-top:clamp(30px,4vw,56px);padding-top:22px;border-top:1px solid var(--ink)}
.cover__lead{font-size:clamp(19px,1.7vw,26px);line-height:1.4;letter-spacing:-.01em;max-width:40ch}
.cover__now li{display:grid;grid-template-columns:110px 1fr;gap:12px;padding:10px 0;border-top:1px solid var(--rule)}
.cover__now li:first-child{border-top:0;padding-top:0}
.cover__now b{font-weight:500}
@media (min-width:900px){.cover__row{grid-template-columns:3fr 5fr 4fr;gap:var(--gut)}}
.feature{margin:clamp(40px,6vw,90px) 0 0;position:relative}
.feature__btn{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;text-align:left;color:inherit;font:inherit}
.feature__img{position:relative;overflow:hidden;aspect-ratio:16/8.4;background:var(--paper-2)}
.feature__img img{width:100%;height:118%;object-fit:cover;will-change:transform}
.feature__cap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;padding:14px 0 0;font-size:14.5px}
.feature__cap b{font:700 18px/1.2 var(--f-d);letter-spacing:-.02em}
.feature__cap span{color:var(--mute)}
@media (max-width:699px){.feature__img{aspect-ratio:4/3.4}}

/* ---------- sections, numérotées comme les pages de la charte ---------- */
.sec{padding:clamp(90px,11vw,170px) var(--pad) clamp(70px,9vw,130px)}
.sec--ink{background:var(--ink);color:var(--paper);color-scheme:dark}
.sec--ink .idx,.sec--ink dt{color:var(--mute-d)}
.sec--ink .idx span:first-child{color:var(--paper)}
.sec--line{border-top:1px solid var(--rule)}
.sec__h{display:grid;gap:18px;margin-bottom:clamp(40px,5vw,72px)}
.sec__t{font-size:clamp(40px,6.4vw,104px);letter-spacing:-.045em;line-height:.98;max-width:14ch}
.sec__note{max-width:52ch;color:var(--mute);font-size:15.5px}
@media (min-width:900px){.sec__h{grid-template-columns:3fr 9fr;column-gap:var(--gut);align-items:end}.sec__h .idx{align-self:start;padding-top:.8em}.sec__note{grid-column:2}}
.sec__more{margin-top:40px}
.wcta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 32px;margin-top:clamp(36px,5vw,64px);padding:clamp(24px,3vw,40px) 0;border-bottom:1px solid var(--ink)}
.wcta__t{font-size:clamp(22px,2.4vw,36px);line-height:1.2;letter-spacing:-.02em;font-weight:500}
.wcta__btn{position:relative;display:inline-flex;align-items:center;gap:14px;padding:16px 26px;border-radius:999px;background:var(--ink);color:var(--paper);font-weight:500;font-size:16px;text-decoration:none;overflow:hidden;isolation:isolate;transition:transform .5s var(--ease)}
.wcta__btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--grad);opacity:0;transition:opacity .4s var(--ease)}
.wcta__btn:hover::before,.wcta__btn:focus-visible::before{opacity:1}
.wcta__arr{transition:transform .5s var(--ease)}
.wcta__btn:hover .wcta__arr{transform:translateX(5px)}

/* ---------- liste des projets ---------- */
.index{border-top:1px solid var(--ink)}
.row{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:6px 16px;width:100%;padding:22px 0;border:0;border-bottom:1px solid var(--rule);background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;position:relative}
.row__n{font-size:12px;letter-spacing:.14em;color:var(--mute);align-self:start;padding-top:.7em;transition:color .3s}
.row__t{font:700 clamp(28px,4.2vw,64px)/1 var(--f-d);letter-spacing:-.04em;transition:transform .6s var(--ease)}
.row__cat{grid-column:2;font-size:14.5px;color:var(--mute)}
.row__kind{grid-column:3;grid-row:1 / span 2;align-self:center;font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.row__kind--real{color:var(--ink)}
.row__kind--real::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--grad);margin-right:8px;vertical-align:1px}
.row__thumb{display:none}
.row::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease)}
.row:hover::after,.row:focus-visible::after{transform:scaleX(1)}
.row:hover .row__t,.row:focus-visible .row__t{transform:translateX(18px)}
.row:hover .row__n{color:var(--violet)}
@media (min-width:900px){
  .row{grid-template-columns:3fr 5fr 3fr 1fr;column-gap:var(--gut);padding:26px 0}
  .row__n{padding-top:0;align-self:center}
  .row__cat{grid-column:3;grid-row:1}
  .row__kind{grid-column:4;grid-row:1;justify-self:end}
}
@media (max-width:899px){
  .row{grid-template-columns:88px minmax(0,1fr);gap:4px 14px}
  .row__thumb{display:block;grid-row:1 / span 3;width:88px;aspect-ratio:1616/1264;object-fit:cover;background:var(--paper-2)}
  .row__n{display:none}
  .row__t{font-size:clamp(22px,6.4vw,34px)}
  .row__kind{grid-column:2;grid-row:auto;font-size:11px}
}
/* aperçu qui suit la souris */
.peek{position:fixed;left:0;top:0;z-index:40;width:clamp(260px,24vw,380px);aspect-ratio:1616/1264;pointer-events:none;overflow:hidden;opacity:0;transform:translate3d(var(--x,-999px),var(--y,-999px),0) translate(-50%,-50%) rotate(var(--r,0deg)) scale(.85);transition:opacity .35s,transform .45s var(--ease);box-shadow:0 30px 60px -30px rgba(27,27,30,.5)}
.peek.is-on{opacity:1;transform:translate3d(var(--x),var(--y),0) translate(-50%,-50%) rotate(var(--r,0deg)) scale(1)}
.peek img{width:100%;height:100%;object-fit:cover}
@media (hover:none),(max-width:899px){.peek{display:none}}

/* ---------- services (page sombre) ---------- */
.serv{display:grid;gap:0 var(--gut);border-top:1px solid var(--rule-d)}
.serv__i{padding:26px 0 36px;border-bottom:1px solid var(--rule-d);display:grid;gap:14px;align-content:start}
.serv__i h3{font-size:clamp(24px,2.2vw,32px)}
.serv__i p{color:var(--mute-d);max-width:40ch}
.serv__i ul{display:grid;gap:4px;margin-top:6px;font-size:14.5px}
.serv__i li::before{content:"— ";color:var(--mute-d)}
@media (min-width:760px){.serv{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1200px){.serv{grid-template-columns:repeat(4,minmax(0,1fr))}.serv__i{border-bottom:0;padding-bottom:0;min-height:340px}.serv__i+.serv__i{border-left:1px solid var(--rule-d);padding-left:var(--gut)}}

/* ---------- à propos ---------- */
.about{display:grid;gap:36px var(--gut)}
.about__id{display:flex;align-items:center;gap:14px;align-self:start}
.about__av{width:64px;height:64px;border-radius:50%;object-fit:cover;object-position:50% 18%;background:var(--grad)}
.about__id p{display:grid;line-height:1.3}
.about__id b{font:700 18px/1.2 var(--f-d);letter-spacing:-.02em}
.about__id span{font-size:14px;color:var(--mute)}
.about__txt{display:grid;gap:22px;max-width:62ch}
.about__lead{font-size:clamp(20px,1.9vw,28px);line-height:1.4;letter-spacing:-.01em}
.about__txt p:not(.about__lead){color:#47464C}
.about__txt a{text-decoration-thickness:1px;text-underline-offset:4px}
.facts{display:grid;align-self:start;border-top:1px solid var(--ink)}
.facts div{padding:12px 0;border-bottom:1px solid var(--rule)}
.facts dd{margin-top:4px;font-weight:500}
@media (min-width:900px){.about{grid-template-columns:3fr 6fr 3fr}}

/* ---------- parcours ---------- */
.xp{border-top:1px solid var(--ink)}
.xp li{display:grid;gap:8px var(--gut);padding:24px 0;border-bottom:1px solid var(--rule)}
.xp__when{font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.xp h3{font-size:clamp(22px,2vw,30px)}
.xp__where{font-size:15px;color:var(--mute);margin-top:4px}
.xp__d{color:#47464C;max-width:60ch}
@media (min-width:900px){.xp li{grid-template-columns:3fr 4fr 5fr;align-items:baseline}}
.skills{display:grid;gap:var(--gut);margin-top:clamp(50px,6vw,90px)}
.skill{padding-top:18px;border-top:1px solid var(--ink);display:grid;gap:10px}
.skill h3{font-size:22px}
.skill p{color:#47464C;font-size:15.5px}
@media (min-width:900px){.skills{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---------- contact (page sombre) ---------- */
.contact{padding-bottom:clamp(60px,7vw,100px)}
.contact__t{font-size:clamp(46px,9vw,150px);letter-spacing:-.05em;line-height:.95;max-width:12ch}
.contact__lead{margin-top:28px;max-width:46ch;color:var(--mute-d);font-size:clamp(17px,1.4vw,20px)}
.contact__big{margin-top:clamp(40px,6vw,80px);padding-top:26px;border-top:1px solid var(--rule-d)}
.contact__big a{display:inline-flex;align-items:baseline;gap:.3em;font:700 clamp(24px,4.6vw,72px)/1.1 var(--f-d);letter-spacing:-.04em;text-decoration:none;overflow-wrap:anywhere;background:linear-gradient(var(--paper),var(--paper)) 0 100%/0 2px no-repeat;transition:background-size .7s var(--ease)}
.contact__big a:hover{background-size:100% 2px}
.contact__arr{display:inline-block;transition:transform .5s var(--ease)}
.contact__big a:hover .contact__arr{transform:translate(6px,-6px)}
.socials{display:flex;flex-wrap:wrap;gap:10px 32px;margin-top:36px;font-size:15px}
.socials a{text-decoration:none;color:var(--mute-d);transition:color .2s}
.socials a:hover{color:var(--paper)}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;padding:22px var(--pad) calc(22px + env(safe-area-inset-bottom));background:var(--ink);color:var(--mute-d);font-size:13.5px;border-top:1px solid var(--rule-d)}

/* ---------- fiche projet ---------- */
dialog{padding:0;border:0;max-width:none;max-height:none;color:inherit}
dialog::backdrop{background:rgba(27,27,30,.5)}
.case{width:100%;height:100%;margin:0;background:var(--paper);overflow-y:auto;overscroll-behavior:contain}
.case[open]{animation:caseIn .7s var(--ease)}
@keyframes caseIn{from{opacity:0;transform:translateY(40px)}}
.case__bar{position:sticky;top:0;z-index:4;height:2px;background:var(--grad);transform-origin:left;transform:scaleX(0)}
.case__in{max-width:1320px;margin:0 auto;padding:clamp(70px,8vw,110px) var(--pad) 60px}
.case__x{position:fixed;top:16px;right:var(--pad);z-index:5;padding:10px 16px;border:1px solid var(--ink);border-radius:999px;background:var(--paper);color:var(--ink);font:500 14px/1 var(--f-t);cursor:pointer;transition:background .2s,color .2s}
.case__x:hover{background:var(--ink);color:var(--paper)}
.case__h{display:grid;gap:22px;margin-bottom:clamp(40px,5vw,70px)}
.case__h h2{font-size:clamp(44px,8vw,128px);letter-spacing:-.05em;line-height:.95}
.case__meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gut);border-top:1px solid var(--ink);padding-top:14px;max-width:760px}
.case__meta dd{margin-top:4px;font-weight:500}
.case__desc{font-size:clamp(18px,1.6vw,23px);line-height:1.5;max-width:58ch}
.case__imgs{display:grid;gap:clamp(10px,1.4vw,18px)}
.case__imgs img{width:100%;background:var(--paper-2);opacity:0;transform:translateY(30px);transition:opacity .9s var(--ease),transform 1.1s var(--ease)}
.case__imgs img.is-in{opacity:1;transform:none}
.case__nav{margin-top:clamp(50px,6vw,90px);border-top:1px solid var(--ink)}
.case__next{display:grid;gap:8px;width:100%;padding:26px 0 0;border:0;background:none;text-align:left;color:inherit;font:inherit;cursor:pointer}
.case__next span{font-size:12px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--mute)}
.case__next b{font:700 clamp(34px,6vw,96px)/1 var(--f-d);letter-spacing:-.05em;transition:transform .6s var(--ease)}
.case__next:hover b{transform:translateX(18px)}
.legal{width:min(720px,calc(100% - 24px));max-height:calc(100dvh - 40px);margin:auto;background:var(--paper);color:var(--ink);overflow-y:auto}
.legal__in{position:relative;padding:48px clamp(22px,4vw,44px) 36px;display:grid;gap:10px}
.legal h2{font-size:38px;margin-bottom:8px}
.legal h3{font:500 12px/1.3 var(--f-t);letter-spacing:.22em;text-transform:uppercase;color:var(--mute);margin-top:14px}
.legal .case__x{position:absolute;top:14px;right:14px}

/* ---------- mouvement ---------- */
.js .mast__l>span{transform:translateY(104%);transition:transform 1.3s var(--ease)}
.js .mast__l:last-child>span{transition-delay:.12s}
.js .mast__sym{opacity:0;scale:.4;transition:opacity .8s .5s,scale 1.2s var(--ease) .5s}
.js .is-ready .mast__l>span{transform:none}
.js .is-ready .mast__sym{opacity:1;scale:1}
.js .cover__row{clip-path:inset(0 100% 0 0);transition:clip-path 1.4s var(--ease) .35s}
.js .is-ready .cover__row{clip-path:inset(0 0 0 0)}
.js .feature__img{clip-path:inset(100% 0 0 0);transition:clip-path 1.5s var(--ease) .55s}
.js .is-ready .feature__img{clip-path:inset(0 0 0 0)}
.js [data-rv]{opacity:0;transform:translateY(26px);transition:opacity 1s var(--ease),transform 1.1s var(--ease);transition-delay:var(--dl,0s)}
.js [data-rv].is-in{opacity:1;transform:none}
[data-split] .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
[data-split] .w>span{display:inline-block}
.js [data-split] .w>span{transform:translateY(106%);transition:transform 1.1s var(--ease);transition-delay:calc(var(--i) * .06s)}
.js [data-split].is-in .w>span{transform:none}
.js .row{opacity:0;transform:translateY(20px);transition:opacity .9s var(--ease),transform 1s var(--ease);transition-delay:var(--dl,0s)}
.js .row.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .js .mast__l>span,.js [data-rv],.js [data-split] .w>span,.js .row,.case__imgs img{opacity:1;transform:none}
  .js .mast__sym{opacity:1;scale:1}
  .js .cover__row,.js .feature__img{clip-path:none}
}
.case__h .link,.sec__more .link{justify-self:start}

/* ---------- aperçu doux ---------- */
.peek{transform:none;transition:none;opacity:1;width:clamp(280px,25vw,400px);border-radius:18px;overflow:visible;box-shadow:none;will-change:transform}
.peek__in{position:relative;width:100%;height:100%;border-radius:18px;overflow:hidden;background:var(--paper-2);opacity:0;scale:.82;filter:blur(8px);box-shadow:0 40px 80px -36px rgba(27,27,30,.45),0 12px 30px -18px rgba(27,27,30,.25);transition:opacity .45s var(--ease),scale .7s var(--ease),filter .6s var(--ease)}
.peek.is-on .peek__in{opacity:1;scale:1;filter:blur(0)}
.peek__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;scale:1.06;transition:opacity .5s var(--ease),scale .9s var(--ease)}
.peek__img.is-top{opacity:1;scale:1}
.feature__img{border-radius:clamp(14px,1.6vw,24px)}
.case__imgs img{border-radius:clamp(10px,1.2vw,18px)}
.row__thumb{border-radius:10px}
.about__av{border-radius:50%}

/* ---------- à propos : avatar en grand ---------- */
.about__id{display:grid;justify-items:start;gap:16px;align-self:start}
.about__av{width:clamp(160px,17vw,240px);height:auto;aspect-ratio:1;border-radius:50%;object-fit:cover;object-position:50% 16%;background:var(--grad);box-shadow:0 30px 60px -34px rgba(164,69,230,.55)}
.about__id p{display:grid;gap:2px;line-height:1.25}
.about__id b{font-size:clamp(20px,1.7vw,26px)}
.about__id span{font-size:14.5px}
@media (min-width:900px){.about__id{position:sticky;top:100px}}
@media (max-width:899px){.about__id{grid-template-columns:auto 1fr;align-items:center;gap:18px}.about__av{width:120px}}

/* ---------- défilement : image à la une qui s'agrandit, titres qui grandissent ---------- */
.js .feature__img,.js .is-ready .feature__img{transition:none!important;clip-path:inset(8% 14% round 34px)}
.feature__img img{transform-origin:50% 40%;will-change:transform}
.sec__t,.contact__t{transform-origin:0 100%;will-change:scale}
.mast__l{will-change:translate}
.case__imgs img{transform:translateY(40px) scale(.96);transform-origin:50% 100%}
.case__imgs img.is-in{transform:none}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
@media (prefers-reduced-motion:reduce){.js .feature__img{clip-path:none}.sec__t,.contact__t{scale:1}}
.cover__now a{text-decoration-thickness:1px;text-underline-offset:3px}
.cover__now a:hover{color:var(--violet)}

/* ---------- services (liste éditoriale) ---------- */
.svc{border-top:1px solid var(--rule-d)}
.svc__i{display:grid;gap:14px var(--gut);padding:28px 0;border-bottom:1px solid var(--rule-d)}
.svc__n{font-size:12px;letter-spacing:.14em;color:var(--mute-d)}
.svc__main{display:grid;gap:10px}
.svc__main h3{font-size:clamp(26px,2.8vw,44px);letter-spacing:-.04em}
.svc__main p{color:var(--mute-d);max-width:48ch}
.svc__l{display:grid;gap:5px;font-size:14.5px;align-content:start}
.svc__l li::before{content:"— ";color:var(--mute-d)}
.svc__s{display:grid;gap:4px;font-weight:500;align-content:start}
.svc__s span{font-size:11.5px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--mute-d)}
.svc__rate{margin-top:28px;max-width:70ch;color:var(--mute-d);font-size:14.5px}
@media (min-width:900px){.svc__i{grid-template-columns:1fr 5fr 4fr 2fr;align-items:start;padding:34px 0}.svc__n{padding-top:.9em}}
/* ---------- réseaux du contact ---------- */
.socials{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:0 var(--gut);border-top:1px solid var(--rule-d);margin-top:40px}
.socials li{border-bottom:1px solid var(--rule-d)}
.socials a,.socials p{display:grid;gap:4px;padding:16px 0;color:var(--paper);text-decoration:none;font-weight:500}
.socials span{font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute-d)}
.socials a:hover{color:var(--rose)}

.nav{transition:background .45s var(--ease),color .45s var(--ease)}
.nav.is-ink{background:rgba(27,27,30,.84);color:var(--paper)}
.nav.is-ink .nav__links a,.nav.is-ink .lang{color:var(--mute-d)}
.nav.is-ink .nav__links a:hover,.nav.is-ink .nav__links a.is-active,.nav.is-ink .lang [data-l]{transition:color .3s}
.nav.is-ink .nav__links a.is-active,html[lang="fr"] .nav.is-ink .lang [data-l="fr"],html[lang="en"] .nav.is-ink .lang [data-l="en"]{color:var(--paper)}
.nav.is-ink::after{background:var(--rule-d)}

/* ---------- à propos : Kuroro debout ---------- */
.about__id{display:grid;gap:14px;align-self:start;justify-items:stretch}
.about__stage{position:relative;aspect-ratio:3/4.2;border-radius:clamp(18px,1.8vw,26px);overflow:hidden;background:linear-gradient(180deg,var(--white) 0%,var(--paper-2) 100%);box-shadow:inset 0 0 0 1px var(--rule);display:flex;align-items:flex-end;justify-content:center;isolation:isolate}
.about__stage::before{content:"";position:absolute;inset:auto 18% 5% 18%;height:7%;border-radius:50%;background:radial-gradient(closest-side,rgba(27,27,30,.22),transparent);z-index:-1}
.about__stage::after{content:"";position:absolute;left:50%;top:44%;width:78%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:radial-gradient(closest-side,rgba(164,69,230,.16),rgba(255,79,184,.07) 60%,transparent);z-index:-2}
.about__kuroro{height:92%;width:auto;margin-bottom:4%;filter:drop-shadow(0 18px 24px rgba(27,27,30,.16));will-change:translate}
.about__id figcaption{display:grid;gap:2px;line-height:1.25}
.about__id figcaption b{font:700 clamp(19px,1.6vw,24px)/1.2 var(--f-d);letter-spacing:-.02em}
.about__id figcaption span{font-size:14.5px;color:var(--mute)}
@media (max-width:899px){.about__id{grid-template-columns:1fr;max-width:340px}.about__stage{aspect-ratio:3/3.6}}
.nav{background:rgba(237,235,230,.96)}
.nav.is-ink{background:rgba(27,27,30,.96)}

/* ---------- showreel ---------- */
.feature__vid{position:absolute;inset:0;width:100%;height:118%;object-fit:cover;transform-origin:50% 40%;will-change:transform;background:var(--paper-2)}
.feature__img{aspect-ratio:16/9}
.reel__play{position:absolute;left:clamp(14px,2vw,28px);bottom:clamp(14px,2vw,28px);display:inline-flex;align-items:center;gap:12px;padding:12px 18px 12px 12px;border-radius:999px;background:rgba(247,246,242,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--ink);font-weight:500;font-size:15px;box-shadow:0 20px 40px -24px rgba(27,27,30,.5);transition:transform .5s var(--ease),background .3s}
.reel__play i{width:34px;height:34px;border-radius:50%;background:var(--ink);position:relative;flex:none}
.reel__play i::after{content:"";position:absolute;left:13px;top:10px;border-left:11px solid var(--paper);border-top:7px solid transparent;border-bottom:7px solid transparent}
.reel__play small{font-size:12.5px;color:var(--mute)}
.feature__btn:hover .reel__play{transform:translateY(-3px);background:#fff}
.reel{width:min(1280px,calc(100vw - 32px));margin:auto;background:#000;border-radius:clamp(12px,1.4vw,20px);overflow:visible}
.reel::backdrop{background:rgba(12,12,14,.86)}
.reel[open]{animation:caseIn .6s var(--ease)}
.reel__vid{display:block;width:100%;aspect-ratio:16/9;border-radius:inherit;background:#000}
.reel__x{position:absolute;top:-52px;right:0;background:var(--paper)}
@media (max-width:699px){.feature__img{aspect-ratio:16/10}.reel__play{font-size:14px}.reel__x{top:-48px}}
.feature__vid{height:100%;transform-origin:50% 50%}
@media (max-width:699px){
  .feature__img{aspect-ratio:16/9}
  .reel__play{left:10px;bottom:10px;padding:6px 12px 6px 6px;gap:8px;font-size:12.5px}
  .reel__play i{width:28px;height:28px}
  .reel__play i::after{left:11px;top:8px;border-left-width:9px;border-top-width:6px;border-bottom-width:6px}
  .reel__lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
}
.reel__play{left:auto;right:clamp(14px,2vw,28px)}
@media (max-width:699px){.reel__play{left:auto;right:10px}}