/* Elana Sophys Portfolio — reconstruction statique du projet Readymag.
   Toute la mise en page est exprimée en unités de maquette multipliées par --u :
   desktop = largeur d'écran / 1024, mobile (< 768 px) = largeur d'écran / 320. */
@font-face{font-family:'Inter';font-style:normal;font-display:swap;font-weight:100 900;src:url(../fonts/inter-latin-ext-wght-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-display:swap;font-weight:100 900;src:url(../fonts/inter-latin-wght-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Pinyon Script';font-style:normal;font-display:swap;font-weight:400;src:url(../fonts/pinyon-script-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Pinyon Script';font-style:normal;font-display:swap;font-weight:400;src:url(../fonts/pinyon-script-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{--u:calc(100vw/1024);--blue:#0059FF;--bg:#E9EAEC;--line:rgba(0,89,255,.25)}
@media (max-width:767px){:root{--u:calc(100vw/320)}}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%;text-size-adjust:100%;
  cursor:url(../cursors/star-1x.png) 27 32,auto;
  cursor:-webkit-image-set(url(../cursors/star-1x.png) 1x,url(../cursors/star.png) 2x) 27 32,auto;
  cursor:image-set(url(../cursors/star-1x.png) 1x,url(../cursors/star.png) 2x) 27 32,auto}
body{margin:0;background:var(--bg);color:var(--blue);font-family:'Inter',system-ui,sans-serif;font-weight:572;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
::selection{background:var(--blue);color:var(--bg)}
a,.lnk{cursor:inherit}
.lnk{color:inherit;text-decoration:none;transition:opacity .2s}
.lnk:hover,.lnk:focus-visible{opacity:.7}
h1,p,figure{margin:0;font:inherit}

/* Pages (sections empilées comme dans Readymag) */
.page{position:relative;width:100%;height:calc(var(--ph)*var(--u));overflow:hidden}
@media (max-width:767px){.page{height:calc(var(--mph)*var(--u))}}

/* Widgets positionnés */
.w{position:absolute;left:calc(var(--x)*var(--u));top:calc(var(--y)*var(--u));
  width:calc(var(--w)*var(--u));height:calc(var(--h)*var(--u));z-index:var(--z)}
.fx{left:calc(50% + var(--x)*var(--u));top:calc(50% + var(--y)*var(--u))}
@media (max-width:767px){
  .w{left:calc(var(--mx)*var(--u));top:calc((var(--my) + var(--sy,0))*var(--u));width:calc(var(--mw)*var(--u));height:calc(var(--mh)*var(--u))}
  .fx{left:calc(50% + var(--mx)*var(--u));top:calc(50% + var(--my)*var(--u))}
  .page{height:calc((var(--mph) + var(--xh,0))*var(--u))}
}

/* Textes */
.t{overflow:visible}
.deco{pointer-events:none}
.blk .in{display:block}
@media (min-width:768px){.ar.d-mt .blk{display:flex;justify-content:flex-end}}
@media (max-width:767px){.mar.m-mtm .blk{display:flex;justify-content:flex-end}}
@media (min-width:768px){
  .d-tag{font-family:'Inter',system-ui,sans-serif;font-weight:572;font-size:calc(8*var(--u));line-height:calc(var(--lh,9)*var(--u));letter-spacing:0;text-transform:uppercase;text-align:var(--ta,left);white-space:normal;color:var(--blue)}
  .d-p2c{font-family:'Inter',system-ui,sans-serif;font-weight:572;font-size:calc(9*var(--u));line-height:calc(var(--lh,10)*var(--u));letter-spacing:0;text-transform:uppercase;text-align:var(--ta,left);white-space:normal;color:var(--blue)}
  .d-p2{font-family:'Inter',system-ui,sans-serif;font-weight:572;font-size:calc(9*var(--u));line-height:calc(var(--lh,12)*var(--u));letter-spacing:0;text-transform:none;text-align:var(--ta,left);white-space:normal;color:var(--blue)}
  .d-p3{font-family:'Inter',system-ui,sans-serif;font-weight:572;font-size:calc(8*var(--u));line-height:calc(var(--lh,9)*var(--u));letter-spacing:0;text-transform:none;text-align:var(--ta,left);white-space:normal;color:var(--blue)}
  .d-p3m{font-family:'Inter',system-ui,sans-serif;font-weight:572;font-size:calc(9*var(--u));line-height:calc(var(--lh,10)*var(--u));letter-spacing:0;text-transform:none;text-align:var(--ta,left);white-space:normal;color:var(--blue)}
  .d-p3r{font-family:'Inter',system-ui,sans-serif;font-weight:572;font-size:calc(8*var(--u));line-height:calc(var(--lh,9)*var(--u));letter-spacing:0;text-transform:none;text-align:var(--ta,right);white-space:normal;color:var(--blue)}
  .d-h2{font-family:'Inter',system-ui,sans-serif;font-weight:572;font-size:calc(21*var(--u));line-height:calc(var(--lh,27)*var(--u));letter-spacing:calc(-1*var(--u));text-transform:none;text-align:var(--ta,left);white-space:normal;color:var(--blue)}
  .d-mt{font-family:'Inter',system-ui,sans-serif;font-weight:572;font-size:calc(100*var(--u));line-height:calc(var(--lh,77)*var(--u));letter-spacing:calc(-8*var(--u));text-transform:uppercase;text-align:var(--ta,left);white-space:nowrap;color:var(--blue)}
  .d-mtm{font-family:'Inter',system-ui,sans-serif;font-weight:572;font-size:calc(53*var(--u));line-height:calc(var(--lh,50)*var(--u));letter-spacing:calc(-4*var(--u));text-transform:uppercase;text-align:var(--ta,left);white-space:nowrap;color:var(--blue)}
  .d-sc{font-family:'Pinyon Script',cursive;font-weight:400;font-size:calc(140*var(--u));line-height:calc(var(--lh,120)*var(--u));letter-spacing:0;text-transform:none;text-align:var(--ta,left);white-space:normal;color:var(--bg);text-shadow:0 0 calc(var(--dg,10)*var(--u)) var(--gc,var(--blue))}
  .d-scm{font-family:'Pinyon Script',cursive;font-weight:400;font-size:calc(63*var(--u));line-height:calc(var(--lh,70)*var(--u));letter-spacing:0;text-transform:none;text-align:var(--ta,left);white-space:normal;color:var(--bg);text-shadow:0 0 calc(var(--dg,10)*var(--u)) var(--gc,var(--blue))}
  .blk{padding:calc(var(--pt,0)*var(--u)) 0 calc(var(--pb,0)*var(--u)) calc(var(--pl,0)*var(--u))}
  .glow{transition:text-shadow .1s}
}
@media (max-width:767px){
  .m-tag{font-family:'Inter',system-ui,sans-serif;font-weight:572;font-size:calc(8*var(--u));line-height:calc(var(--mlh,9)*var(--u));letter-spacing:0;text-transform:uppercase;text-align:var(--mta,left);white-space:normal;color:var(--blue)}
  .m-p2c{font-family:'Inter',system-ui,sans-serif;font-weight:572;font-size:calc(9*var(--u));line-height:calc(var(--mlh,10)*var(--u));letter-spacing:0;text-transform:uppercase;text-align:var(--mta,left);white-space:normal;color:var(--blue)}
  .m-p2{font-family:'Inter',system-ui,sans-serif;font-weight:572;font-size:calc(9*var(--u));line-height:calc(var(--mlh,12)*var(--u));letter-spacing:0;text-transform:none;text-align:var(--mta,left);white-space:normal;color:var(--blue)}
  .m-p3{font-family:'Inter',system-ui,sans-serif;font-weight:572;font-size:calc(8*var(--u));line-height:calc(var(--mlh,9)*var(--u));letter-spacing:0;text-transform:none;text-align:var(--mta,left);white-space:normal;color:var(--blue)}
  .m-p3m{font-family:'Inter',system-ui,sans-serif;font-weight:572;font-size:calc(9*var(--u));line-height:calc(var(--mlh,10)*var(--u));letter-spacing:0;text-transform:none;text-align:var(--mta,left);white-space:normal;color:var(--blue)}
  .m-p3r{font-family:'Inter',system-ui,sans-serif;font-weight:572;font-size:calc(8*var(--u));line-height:calc(var(--mlh,9)*var(--u));letter-spacing:0;text-transform:none;text-align:var(--mta,right);white-space:normal;color:var(--blue)}
  .m-h2{font-family:'Inter',system-ui,sans-serif;font-weight:572;font-size:calc(21*var(--u));line-height:calc(var(--mlh,27)*var(--u));letter-spacing:calc(-1*var(--u));text-transform:none;text-align:var(--mta,left);white-space:normal;color:var(--blue)}
  .m-mt{font-family:'Inter',system-ui,sans-serif;font-weight:572;font-size:calc(100*var(--u));line-height:calc(var(--mlh,77)*var(--u));letter-spacing:calc(-8*var(--u));text-transform:uppercase;text-align:var(--mta,left);white-space:nowrap;color:var(--blue)}
  .m-mtm{font-family:'Inter',system-ui,sans-serif;font-weight:572;font-size:calc(53*var(--u));line-height:calc(var(--mlh,50)*var(--u));letter-spacing:calc(-4*var(--u));text-transform:uppercase;text-align:var(--mta,left);white-space:nowrap;color:var(--blue)}
  .m-sc{font-family:'Pinyon Script',cursive;font-weight:400;font-size:calc(140*var(--u));line-height:calc(var(--mlh,120)*var(--u));letter-spacing:0;text-transform:none;text-align:var(--mta,left);white-space:normal;color:var(--bg);text-shadow:0 0 calc(var(--mg,10)*var(--u)) var(--gc,var(--blue))}
  .m-scm{font-family:'Pinyon Script',cursive;font-weight:400;font-size:calc(63*var(--u));line-height:calc(var(--mlh,70)*var(--u));letter-spacing:0;text-transform:none;text-align:var(--mta,left);white-space:normal;color:var(--bg);text-shadow:0 0 calc(var(--mg,10)*var(--u)) var(--gc,var(--blue))}
  .blk{padding:calc(var(--mpt,0)*var(--u)) 0 calc(var(--mpb,0)*var(--u)) calc(var(--mpl,0)*var(--u))}
}

/* Filets */
.ln::before{content:"";position:absolute;left:0;right:0;top:50%;height:max(1px,calc(.7*var(--u)));
  transform:translateY(-50%);background:var(--line)}

/* Images recadrées comme dans Readymag */
.pic{overflow:hidden}
.pic img{position:absolute;display:block;max-width:none;width:var(--iw);height:var(--ih);left:var(--il);top:var(--it)}
@media (max-width:767px){.pic img{width:var(--miw);height:var(--mih);left:var(--mil);top:var(--mit)}}
.js .pic img{opacity:0;transition:opacity .5s ease}
.js .pic img.ld{opacity:1}

/* Survol : l'image s'efface et révèle la fiche projet située dessous */
@media (min-width:768px){
  .pic.hv{cursor:url(../cursors/dot.svg) 8 8,auto;transition:opacity .3s cubic-bezier(.455,.03,.515,.955);outline:none}
  .pic.hv.on,.pic.hv:focus-visible{opacity:0}
}
@media (min-width:768px) and (hover:hover){.pic.hv:hover{opacity:0}}

/* Galerie horizontale épinglée (page 2) */
.gallery{overflow:visible}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.fit,.track{position:absolute;inset:0}
.fit{transform-origin:50% 50%}
.track{will-change:transform}

@media (prefers-reduced-motion:reduce){
  .js .pic img,.pic.hv,.glow{transition:none}
}