/* ───────────────────────────────────────────────
   Mélissa Da Silva Nicolet — portfolio
   Dark · monospace · rétro/print · minimal
   ─────────────────────────────────────────────── */

:root{
  --bg:#0E0E0C;
  --fg:#EDEAE1;
  --dim:#86847A;
  --line:rgba(237,234,225,.16);
  --inset:clamp(12px,2vw,22px);
  --pad:clamp(30px,6vw,68px);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{color-scheme:dark;-webkit-text-size-adjust:100%}

body{
  min-height:100svh;
  display:flex;
  flex-direction:column;
  padding:var(--pad);
  background-color:var(--bg);
  background-image:radial-gradient(rgba(237,234,225,.05) 1px, transparent 1px);
  background-size:24px 24px;
  color:var(--fg);
  font-family:ui-monospace,"SF Mono","Cascadia Code","Roboto Mono",Menlo,Consolas,monospace;
  font-size:clamp(.95rem,.9rem + .2vw,1.02rem);
  line-height:1.55;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
/* Page lecteur : on resserre le vertical pour agrandir les planches */
body.viewer-page{padding-top:clamp(18px,3vw,38px);padding-bottom:clamp(14px,2.5vw,30px)}

::selection{background:var(--fg);color:var(--bg)}
a{color:inherit;text-decoration:none}
:focus-visible{outline:1px solid var(--fg);outline-offset:3px}

/* ── Cadre + repères de coupe (print registration marks) ── */
.frame{position:fixed;inset:var(--inset);border:1px solid var(--line);pointer-events:none;z-index:50}
.frame i{position:absolute;width:9px;height:9px}
.frame i::before,.frame i::after{content:"";position:absolute;background:var(--dim)}
.frame i::before{left:50%;top:0;width:1px;height:100%;transform:translateX(-50%)}
.frame i::after{top:50%;left:0;height:1px;width:100%;transform:translateY(-50%)}
.frame i:nth-child(1){top:-5px;left:-5px}
.frame i:nth-child(2){top:-5px;right:-5px}
.frame i:nth-child(3){bottom:-5px;left:-5px}
.frame i:nth-child(4){bottom:-5px;right:-5px}

/* ── Barre d'en-tête ── */
.bar{display:flex;justify-content:space-between;align-items:center;gap:1rem 2rem;flex-wrap:wrap}
.id{display:flex;align-items:baseline;flex-wrap:wrap;gap:.4rem .8rem}
.mark{color:var(--fg)}
.name{font-weight:600;letter-spacing:.02em}
.nav{display:flex;align-items:center;gap:1.4rem;font-size:.82rem;text-transform:uppercase;letter-spacing:.13em}
.nav a{color:var(--dim);transition:color .15s ease}
.nav a:hover{color:var(--fg)}
.lang{display:flex;align-items:center;gap:.35rem;color:var(--dim)}
.lang button{font:inherit;font-size:.82rem;letter-spacing:.13em;background:none;border:0;color:var(--dim);cursor:pointer;padding:0;text-transform:uppercase;transition:color .15s ease}
.lang button:hover{color:var(--fg)}
.lang button.on{color:var(--fg);text-decoration:underline;text-underline-offset:3px}

/* ── Lecteur PDF (feuilleteur) ── */
.reader{flex:1;min-height:0;display:flex;flex-direction:column;gap:clamp(.7rem,2vw,1.1rem);padding:clamp(.8rem,2.5vw,1.4rem) 0}
.reader__frame{flex:1;min-height:0;display:flex;align-items:stretch;gap:clamp(.4rem,1.4vw,1rem)}
.arrow{flex:0 0 auto;align-self:center;background:none;border:1px solid var(--line);color:var(--fg);
  width:clamp(34px,4vw,46px);height:clamp(50px,10vh,90px);
  font:inherit;font-size:1.3rem;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s ease,color .15s ease,border-color .15s ease}
.arrow:hover:not(:disabled){background:var(--fg);color:var(--bg);border-color:var(--fg)}
.arrow:disabled{opacity:.22;cursor:default}
.page-stage{flex:1;min-width:0;min-height:0;position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;cursor:pointer}
.spread{display:flex;align-items:center;justify-content:center;max-width:100%;max-height:100%}
.spread canvas{display:block;max-width:100%;max-height:100%;background:#fff;
  box-shadow:0 18px 50px -22px rgba(0,0,0,.85)}
.spread.two canvas:first-child{box-shadow:-6px 18px 50px -26px rgba(0,0,0,.85)}
.spread.turn{animation:turn .26s ease}
@keyframes turn{from{opacity:0;transform:translateX(calc(var(--dir,1) * 26px))}to{opacity:1;transform:none}}
.loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:.5ch;
  color:var(--dim);font-size:.82rem;text-transform:uppercase;letter-spacing:.16em}
.loading .pct{color:var(--fg)}
.loading.hide{display:none}

.reader__bar{display:flex;justify-content:space-between;align-items:center;gap:1rem;
  font-size:.78rem;text-transform:uppercase;letter-spacing:.13em;color:var(--dim)}
.counter{font-variant-numeric:tabular-nums;letter-spacing:.18em;color:var(--fg)}
.hint{flex:1;text-align:center}
.dl{color:var(--dim);transition:color .15s ease}
.dl:hover{color:var(--fg)}

/* ── Scène (page About) ── */
.stage{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:clamp(2.5rem,7vw,5rem) 0;max-width:62ch}
.kicker{color:var(--dim);font-size:.8rem;text-transform:uppercase;letter-spacing:.18em;margin-bottom:1.4rem}
h1{font-size:clamp(2.4rem,9vw,6rem);line-height:1;letter-spacing:-.01em;font-weight:600;text-wrap:balance}
.lede{margin-top:clamp(1.6rem,4vw,2.4rem);color:var(--fg);max-width:46ch;font-size:clamp(1rem,.95rem + .3vw,1.15rem)}
.back{display:inline-block;margin-top:clamp(2rem,5vw,3rem);color:var(--dim);
  font-size:.85rem;text-transform:uppercase;letter-spacing:.13em;transition:color .15s ease}
.back:hover{color:var(--fg)}

/* ── Pied de page / coordonnées ── */
.foot{display:flex;justify-content:space-between;align-items:center;gap:.6rem 1.6rem;flex-wrap:wrap;
  padding-top:1.1rem;border-top:1px dotted var(--line)}
.contact{display:flex;align-items:baseline;flex-wrap:wrap;gap:.4rem 1.4rem}
.contact a{position:relative;letter-spacing:.01em;
  background-image:linear-gradient(var(--fg),var(--fg));background-size:0 1px;
  background-position:0 100%;background-repeat:no-repeat;transition:background-size .25s ease}
.contact a:hover,.contact a:focus-visible{background-size:100% 1px}
.loc{color:var(--dim);font-size:.82rem;text-transform:uppercase;letter-spacing:.13em}
.cc{color:var(--dim);font-size:.78rem;letter-spacing:.1em}

@media (max-width:560px){
  .hint{display:none}
  .reader__frame{gap:.3rem}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}