*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

/* Apparition douce au défilement */
.reveal{opacity:0;transform:translateY(24px);transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* Visionneuse */
.lb{position:fixed;inset:0;z-index:100;background:rgba(8,8,8,.96);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .35s}
.lb.is-open{opacity:1}
.lb img{max-width:88vw;max-height:86vh;object-fit:contain}
.lb button{position:absolute;background:none;border:0;color:#b4b2ad;font:300 40px/1 Georgia,serif;cursor:pointer;padding:16px;opacity:.7}
.lb button:hover{opacity:1}
.lb-x{top:8px;right:12px}
.lb-p{left:4px;top:50%;transform:translateY(-50%)}
.lb-n{right:4px;top:50%;transform:translateY(-50%)}
.lb-c{position:absolute;bottom:18px;left:0;right:0;text-align:center;color:#a9a7a2;font:12px/1 ui-monospace,Menlo,monospace;letter-spacing:.2em}

/* Bandeau "maquette" pour passer d'un style à l'autre */
.mq{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:90;display:flex;gap:4px;padding:4px;border-radius:999px;background:rgba(20,20,20,.82);backdrop-filter:blur(8px);font:500 11px/1 -apple-system,system-ui,sans-serif;letter-spacing:.04em}
.mq a{color:#bbb;padding:8px 12px;border-radius:999px;white-space:nowrap}
.mq a.on{background:#fff;color:#111}
@media (max-width:480px){.mq a{padding:8px 9px}}