/* Portfolio de Simon Becker (Wis).
   Mise en page : une grande illustration qui « descend » dans la nuit, des portails souples vers les catégories,
   des collages en profondeur dans les catégories, et une liseuse BD en surpage floutée. Thème unique, sombre, assumé. */
:root{
  color-scheme:dark;
  --night:#0E1B2E;
  --orbit:#172A43;
  --haze:#DDE7ED;
  --dim:#9DB0C1;
  --rule:rgba(221,231,237,.16);
  --cyan:#55DCCB;
  --warn:#F0AE74;
  --on-cyan:#0A1824;
  --display:"Michroma","Eurostile","Microgramma","Trebuchet MS",sans-serif;
  --text:"Literata","Iowan Old Style",Georgia,"Times New Roman",serif;
  --gut:clamp(16px,4vw,56px);
  --maxw:1360px;
  --r-lg:26px;
  --r-md:16px;
  --head:68px;
  --ease:cubic-bezier(.22,.8,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{background:var(--night);scroll-behavior:smooth;scroll-padding-top:calc(var(--head) + 20px);scrollbar-gutter:stable;-webkit-text-size-adjust:100%;text-size-adjust:100%}
html.lock{overflow:hidden}
body{margin:0;background-color:var(--night);color:var(--haze);font-family:var(--text);font-size:1.0625rem;line-height:1.65;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:6px}
main:focus{outline:none}
.skip{position:absolute;left:16px;top:-80px;z-index:90;background:var(--cyan);color:var(--on-cyan);padding:.5rem .9rem;border-radius:999px;text-decoration:none}
.skip:focus{top:calc(env(safe-area-inset-top,0px) + 12px)}

/* ---------- Boutons et liens ---------- */
.pill{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:44px;padding:.55rem 1.25rem;
  border-radius:999px;border:1px solid rgba(221,231,237,.45);background:rgba(14,27,46,.35);color:var(--haze);
  text-decoration:none;font-size:.95rem;line-height:1.3;cursor:pointer;
  transition:background-color .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease);
}
.pill:hover{background:var(--haze);color:var(--night);border-color:var(--haze)}
.pill--cyan{background:var(--cyan);color:var(--on-cyan);border-color:var(--cyan)}
.pill--cyan:hover{background:var(--haze);border-color:var(--haze)}
.pill--icon{width:44px;padding:0;flex:none}
.pill--icon svg{display:block}
.pill--insta{--ig:linear-gradient(45deg,#fcaf45 0%,#f77737 22%,#e1306c 52%,#c13584 72%,#833ab4 100%);transition:transform .35s var(--ease),box-shadow .35s var(--ease),filter .35s var(--ease),background-color .4s var(--ease),border-color .4s var(--ease)}
/* overflow:visible : certains navigateurs de téléphone (Safari) coupent la lueur du symbole au bord de son carré ; ainsi elle n'est plus rognée */
.pill--insta svg{width:24px;height:24px;overflow:visible;filter:drop-shadow(0 0 5px rgba(225,48,108,.45));transition:filter .35s var(--ease)}
.pill--insta:hover,.pill--insta:focus-visible{background:var(--ig);border-color:transparent;color:#fff;transform:translateY(-2px) scale(1.08);box-shadow:0 10px 24px -6px rgba(225,48,108,.8);filter:saturate(1.15) brightness(1.05)}
.pill--insta:hover svg,.pill--insta:focus-visible svg{stroke:#fff;filter:none}
.pill--insta:hover .ig-dot,.pill--insta:focus-visible .ig-dot{fill:#fff}
.link{text-decoration:underline;text-decoration-color:var(--cyan);text-decoration-thickness:1.5px;text-underline-offset:5px;transition:text-decoration-color .3s}
.link:hover{text-decoration-color:currentColor}
.h2{display:flex;flex-direction:column;align-items:center;gap:.9rem;text-align:center;font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.16em;font-size:clamp(1.1rem,.7rem + 1.4vw,1.8rem);line-height:1.3;margin:0 0 clamp(1.5rem,3.5vw,2.5rem);text-wrap:balance;text-shadow:0 0 12px rgba(85,220,203,.55),0 0 34px rgba(85,220,203,.45)}
/* titres des sections de l'accueil : même style que les titres de pages (filet, lueur) */
.h2::after{content:"";align-self:stretch;height:1px;background:linear-gradient(90deg,transparent,rgba(85,220,203,.6),transparent)}

/* ---------- En-tête ---------- */
.top{position:fixed;inset:0 0 auto;z-index:40;padding-top:env(safe-area-inset-top,0px);transition:background-color .5s var(--ease),box-shadow .5s var(--ease)}
.top.is-solid,.top.is-open{background:rgba(14,27,46,.86);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--rule)}
.top-in{position:relative;height:var(--head);max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut);display:flex;align-items:center;gap:2rem}
.logo{font-family:var(--display);font-size:1.15rem;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;flex:none}
.nav{margin-left:auto;display:flex;gap:1.6rem}
.nav a{position:relative;padding:.35rem 0;font-size:.95rem;text-decoration:none;opacity:.9}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:var(--cyan);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.menu-btn{display:none;margin-left:auto;min-height:40px;padding:.4rem 1rem;border-radius:999px;border:1px solid rgba(221,231,237,.45);background:rgba(14,27,46,.35);cursor:pointer}

/* ---------- Hero ---------- */
.hero{position:relative;isolation:isolate;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end}
.hero-media{position:absolute;inset:0;z-index:-1;overflow:hidden;background:#9FC3DD}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:30% 55%;transform:translate3d(0,var(--py,0px),0);animation:land 2.4s var(--ease) both;will-change:transform}
.hero-media::before{content:"";position:absolute;inset:0 0 auto;height:190px;background:linear-gradient(rgba(14,27,46,.62),rgba(14,27,46,0));z-index:1}
.hero-media::after{content:"";position:absolute;inset:auto 0 0;height:18%;background:linear-gradient(rgba(14,27,46,0),var(--night));z-index:1}
@keyframes land{from{filter:blur(12px) brightness(.7);scale:1.1}to{filter:none;scale:1}}
.hero-in{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut);padding-block:0 22rem;display:flex;justify-content:flex-start}
.hero-text{max-width:46rem;animation:rise 1.3s .6s var(--ease) both}
.hero h1{display:flex;flex-direction:column;align-items:center;gap:1.1rem;text-align:center;width:fit-content;max-width:100%;font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.16em;font-size:clamp(1.8rem,3.6vw,3.2rem);line-height:1.2;margin:0;text-wrap:balance;text-shadow:0 0 12px rgba(85,220,203,.55),0 0 34px rgba(85,220,203,.45)}
/* grand titre de l'accueil : même style que les autres titres (filet, lueur ; pas de trait au-dessus), le bloc reste à gauche de la page, mais trait et filet sont centrés sur le titre */
.hero h1::after{content:"";align-self:stretch;height:1px;background:linear-gradient(90deg,transparent,rgba(85,220,203,.6),transparent)}
.hero-role{white-space:pre-line;margin:1.2rem 0 0;font-size:clamp(1.05rem,1.4vw,1.2rem);line-height:1.6;max-width:40em}
.hero-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.6rem}
@keyframes rise{from{opacity:0;translate:0 22px}to{opacity:1;translate:0 0}}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* ---------- Sections de l'accueil ---------- */
.section{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut);padding-block:clamp(4rem,11vh,7.5rem)}
.section + .section{padding-top:clamp(2rem,6vh,4rem)}

/* Portails : la case survolée s'ouvre, les autres se resserrent */
.portals{display:flex;gap:14px;height:clamp(440px,70vh,700px);container-type:inline-size}
.portal{position:relative;flex:1 1 0;min-width:0;border-radius:var(--r-lg);overflow:hidden;text-decoration:none;background:var(--orbit);transition:flex-grow .85s var(--ease);contain:paint}
/* L'image garde la largeur d'une case ouverte et la case ne fait que la découvrir :
   elle n'est plus redessinée à chaque instant de l'animation (survol fluide).
   --ar (forme de l'image, posée par site.js) : une image très étroite, comme un marque-page,
   reste à la largeur de sa case pour garder exactement le même cadrage. */
.portal img{position:absolute;top:0;left:var(--cx,50%);width:100%;width:max(100%,min(calc((100cqw - 42px) * 2.3 / 5.3),calc(clamp(440px,70vh,700px) * var(--ar,10))));max-width:none;height:100%;translate:calc(var(--cx,50%) * -1) 0;object-fit:cover;scale:var(--zoom,1);transition:scale 1.4s var(--ease);will-change:scale}
.portal::after{content:"";position:absolute;inset:0;width:max(100%,calc((100cqw - 42px) * 2.3 / 5.3));background:linear-gradient(to top,rgba(10,20,34,.94),rgba(10,20,34,.3) 42%,rgba(10,20,34,0) 68%);will-change:transform}
.portal-body{position:absolute;inset:auto 0 0;z-index:1;display:flex;flex-direction:column;gap:.35rem;padding:clamp(1rem,2vw,1.6rem)}
.portal-title{font-family:var(--display);text-transform:uppercase;letter-spacing:.06em;font-size:clamp(.92rem,1.2vw,1.15rem);line-height:1.35}
.portal-sub{font-style:italic;font-size:.98rem;line-height:1.45;max-width:26em;max-height:0;opacity:0;overflow:hidden;transition:max-height .7s var(--ease),opacity .5s ease}
.portal-count{font-size:.88rem;color:var(--cyan)}
/* Le texte garde la même mise en ligne, case ouverte ou fermée : le titre est toujours coupé
   à la largeur d'une case fermée, le sous-titre est mis en page à la largeur d'une case ouverte
   (il n'apparaît que là). Plus de lettres qui « sautent » pendant le survol. */
.portal-body{--pad:clamp(1rem,2vw,1.6rem)}
.portal-title{max-width:calc((100cqw - 42px) / 5.3 - 2 * var(--pad));text-wrap:balance}
.portal-sub{width:min(26em,calc((100cqw - 42px) * 2.3 / 5.3 - 2 * var(--pad)))}
.portal--bd{flex-grow:2.3}
.portals:hover .portal,.portals:focus-within .portal{flex-grow:1}
.portals .portal:hover,.portals .portal:focus-visible{flex-grow:2.3}
.portal:hover img,.portal:focus-visible img{scale:calc(var(--zoom,1) * 1.05)}
.portals:not(:hover):not(:focus-within) .portal--bd .portal-sub,
.portal:hover .portal-sub,.portal:focus-visible .portal-sub{max-height:6em;opacity:1}
.portal:focus-visible{outline-offset:4px;border-radius:var(--r-lg)}

/* À propos */
.about{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,6vw,6rem);align-items:center}
.about-fig{margin:0}
.about-fig img{width:100%;height:auto;border-radius:var(--r-lg);background:#fff}
figcaption{margin-top:.6rem;font-size:.88rem;font-style:italic;color:var(--dim)}
.about-fig figcaption{display:none}
/* À propos : pas de bouton Instagram sous la présentation (ordinateur et téléphone) : il y en a déjà dans le bandeau et dans Contact.
   Pour le remettre, supprimer la ligne suivante. */
.about .pill{display:none}
.bio{display:grid;gap:1em;max-width:33em;font-size:clamp(1.05rem,1.35vw,1.18rem);line-height:1.78}
.bio p{margin:0;white-space:pre-line;text-align:justify}
.reads{margin:1.4rem 0 1.8rem;max-width:36em;color:var(--dim);font-style:italic;line-height:1.6}

/* Contact */
.contact{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,6vw,6rem);align-items:start;padding:clamp(1.5rem,4vw,3.5rem);border-radius:var(--r-lg);background:var(--orbit)}
.contact-lead{margin:0;font-size:clamp(1.15rem,1.8vw,1.45rem);line-height:1.5;max-width:20em}
.contact-alt{margin:1.2rem 0 0;color:var(--dim)}
.form{display:grid;gap:1.1rem;min-width:0}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.field{display:grid;gap:.4rem;min-width:0}
.field label{font-size:.92rem;color:var(--dim)}
.field input,.field textarea{width:100%;font:inherit;font-size:1rem;color:var(--haze);background:var(--night);border:1px solid var(--rule);border-radius:14px;padding:.8rem 1rem;transition:border-color .3s,box-shadow .3s}
.field textarea{resize:vertical;min-height:9rem}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(85,220,203,.22)}
.form-foot{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.25rem}
.form-note{margin:0;font-size:.88rem;color:var(--dim)}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.pill[disabled]{opacity:.6;cursor:progress}
.form-status.is-error{border-color:var(--warn)}
.form-status{margin:0;padding:.9rem 1.1rem;border-radius:14px;border:1px solid var(--cyan);font-size:.95rem;line-height:1.5}

/* ---------- Vues de catégorie ---------- */
.view{min-height:60vh}
.cat-head{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut);padding-block:calc(var(--head) + clamp(2.5rem,8vh,5rem)) clamp(1.75rem,4vh,2.75rem)}
.page-title{display:flex;flex-direction:column;align-items:center;gap:1.05rem;text-align:center;font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.16em;font-size:clamp(1.15rem,.7rem + 1.9vw,2.2rem);line-height:1.3;margin:1.8rem 0 0;padding-bottom:1.5rem;text-wrap:balance;text-shadow:0 0 12px rgba(85,220,203,.55),0 0 34px rgba(85,220,203,.45)}
/* titre des pages : centré, filet turquoise qui s'estompe en dessous, légère lueur (le court trait du dessus a été retiré ; pour le remettre, voir LISEZ-MOI.txt) */
.page-title::after{content:"";align-self:stretch;height:1px;background:linear-gradient(90deg,transparent,rgba(85,220,203,.6),transparent)}
.cat-head .lede{max-width:none;margin-inline:auto;text-align:center}
/* Les quatre grandes pages (Projets BD, Aquarelles, Peintures numériques, Commandes) : pas de lien « Retour à l'accueil » en haut, ni sur ordinateur ni sur téléphone.
   Le logo Wis, le menu et le lien en bas de page suffisent. Les mentions légales gardent leur lien, car elles n'ont pas de bas de page.
   Pour le remettre : supprimer ces deux lignes. */
.view:not([data-view="mentions"]) .cat-head > .link{display:none}
.view:not([data-view="mentions"]) .page-title{margin-top:0}
.lede{max-width:none;margin:1.1rem 0 0;color:var(--dim);font-size:clamp(1.02rem,1.3vw,1.15rem);text-wrap:pretty}
.lead{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.lead-btn{position:relative;display:block;width:100%;height:clamp(300px,64vh,660px);padding:0;border:0;border-radius:var(--r-lg);overflow:hidden;background:var(--orbit);cursor:zoom-in}
.lead-btn img{position:absolute;left:0;top:-8%;width:100%;height:116%;object-fit:cover;transform:translate3d(0,var(--py,0px),0)}
.lead-btn figcaption{position:absolute;left:clamp(1rem,2vw,1.6rem);bottom:clamp(.8rem,2vw,1.3rem);margin:0;padding:.35rem .8rem;border-radius:999px;background:rgba(14,27,46,.72);color:var(--haze);font-size:.9rem}
.group{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut);padding-top:clamp(3.5rem,9vh,6rem)}
.group--sans-titre{padding-top:0}
.group-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.4rem 2rem;padding-bottom:.9rem;margin-bottom:clamp(1.5rem,4vh,2.75rem);border-bottom:1px solid var(--rule)}
.group-title{margin:0;font-weight:400;font-style:italic;font-size:clamp(1.35rem,2.3vw,1.9rem);line-height:1.3}
.group-count{color:var(--cyan);font-size:.92rem}
.collage{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(12px,1.8vw,26px);row-gap:clamp(28px,5.5vw,80px);align-items:start}
.tile{grid-column:var(--cs) / span var(--sp);margin-top:var(--drop,0px);display:block;width:100%;padding:0;border:0;background:none;border-radius:var(--r-md);overflow:hidden;cursor:zoom-in;transform:translate3d(0,var(--py,0px),0);transition:box-shadow .6s var(--ease)}
.tile img{width:100%;height:auto;transition:scale 1s var(--ease)}
.tile:hover{box-shadow:0 30px 70px -30px rgba(0,0,0,.75)}
.tile:hover img{scale:1.035}
.galerie{display:grid;gap:clamp(10px,1.4vw,20px)}
.galerie-row{display:flex;gap:clamp(10px,1.4vw,20px)}
.galerie-row--solo{justify-content:center}
.galerie-item{flex:var(--ar) 1 0;min-width:0;padding:0;border:0;background:var(--orbit);border-radius:var(--r-md);overflow:hidden;cursor:zoom-in;transition:box-shadow .5s var(--ease),translate .5s var(--ease)}
.galerie-item--narrow{flex:0 1 auto;width:min(100%,calc(var(--ar) * 78vh))}
.galerie-item img{display:block;width:100%;height:auto;transition:scale .9s var(--ease)}
.galerie-item:hover{box-shadow:0 30px 70px -30px rgba(0,0,0,.8);translate:0 -3px}
.galerie-item:hover img{scale:1.03}
.galerie-item--crop{aspect-ratio:var(--ar)}
.galerie-item--crop img{height:100%;object-fit:cover;object-position:var(--pos,50% 35%)}
.patchwork{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.mosaic{--row:clamp(150px,22vw,290px);--gap:clamp(8px,1vw,14px);display:flex;flex-wrap:wrap;gap:var(--gap)}
.mosaic::after{content:"";flex:1000 1 0}
.mosaic-item{flex:var(--ar) 1 calc(var(--ar) * var(--row));min-width:0;padding:0;border:0;background:var(--orbit);border-radius:10px;overflow:hidden;cursor:zoom-in;transition:box-shadow .5s var(--ease),translate .5s var(--ease)}
.mosaic-item img{display:block;width:100%;height:auto;transition:scale .9s var(--ease)}
.mosaic-item:hover{box-shadow:0 24px 50px -24px rgba(0,0,0,.8);translate:0 -3px}
.mosaic-item:hover img{scale:1.04}
.rd-pages--mosaique .mosaic{--row:clamp(140px,19vw,240px)}
/* Séries d'aquarelles : js/planches.js répartit les images en rangées pleines (--n images par rangée, --f part de la largeur) */
.mosaic--rangees{justify-content:space-between}
.mosaic--rangees::after{display:none}
.mosaic--rangees .mosaic-item{flex:0 0 auto;width:calc((100% - (var(--n,1) - 1) * var(--gap)) * var(--f,1))}
.legal{max-width:calc(46rem + 2 * var(--gut));margin-inline:max(0px,calc((100% - var(--maxw)) / 2));padding-inline:var(--gut);padding-bottom:clamp(3rem,8vh,5rem);display:grid;gap:clamp(1.75rem,4vh,2.5rem)}
.legal section{padding-top:1.25rem;border-top:1px solid var(--rule)}
.legal h2{margin:0 0 .9rem;font-family:var(--display);font-weight:400;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:var(--cyan)}
.legal p{margin:0 0 .9em;max-width:42em}
.legal p:last-child{margin-bottom:0}
.legal .todo{color:var(--warn)}
.foot-links{display:flex;flex-wrap:wrap;gap:.5rem 1.75rem}
.cat-end{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut);padding-block:clamp(4.5rem,12vh,8rem) clamp(3rem,8vh,5rem);display:grid;gap:1.4rem}
.next{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;gap:.4rem;min-height:clamp(190px,28vh,280px);padding:clamp(1.2rem,3vw,2rem);border-radius:var(--r-lg);overflow:hidden;text-decoration:none}
.next img{position:absolute;inset:0;z-index:-1;width:100%;height:100%;object-fit:cover;filter:brightness(.5) saturate(.9);transition:scale 1.4s var(--ease),filter .6s}
.next:hover img{scale:1.04;filter:brightness(.62)}
/* Bandeau dézoomé (zoomBandeau dans contenu.js) : l'image fait « zoomBandeau » fois la hauteur du bandeau,
   placée selon cadrageBandeau ; le fond gris = le blanc de l'image une fois assombri. */
.next--fit{background:rgb(128,128,128);transition:background-color .6s}
.next--fit:hover{background:rgb(158,158,158)}
.next--fit img{inset:auto;top:var(--by,50%);left:var(--bx,50%);width:auto;max-width:none;height:calc(100% * var(--bz,1));translate:calc(var(--bx,50%) * -1) calc(var(--by,50%) * -1);object-fit:fill}
/* Bas de page simple : retour à gauche, section suivante à droite */
.cat-end--simple{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem;padding-block:clamp(3rem,8vh,5rem) clamp(2.5rem,6vh,4rem)}
.next-pill{gap:.6rem;margin-left:auto}
.next-pill--thumb{min-height:52px;padding-left:.35rem}
.next-thumb{flex:none;width:40px;height:40px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px rgba(10,24,36,.25);transition:scale .4s var(--ease)}
.next-pill--thumb:hover .next-thumb{scale:1.08}
.next-arrow{display:inline-block;transition:translate .4s var(--ease)}
.next-pill:hover .next-arrow,.next-pill:focus-visible .next-arrow{translate:4px 0}
.next small{font-size:.92rem;color:var(--haze)}
.next strong{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.06em;font-size:clamp(1.2rem,2.6vw,2.1rem);line-height:1.2}

/* ---------- Projets BD ---------- */
@property --p{syntax:'<number>';inherits:false;initial-value:0}
@keyframes shelf-prog{to{--p:1}}
.bd-head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(1.5rem,5vw,4rem);align-items:end}
.shelf{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.5rem,4vw,3.5rem);perspective:1400px}
.book{display:flex;flex-direction:column;gap:.85rem;padding:0;border:0;background:none;text-align:left;cursor:pointer;min-width:0}
.book-cover{position:relative;display:block;aspect-ratio:var(--ratio,1273/1800);max-width:100%;border-radius:12px;overflow:hidden;box-shadow:0 34px 60px -34px rgba(0,0,0,.85);transform:translateY(var(--ty,0px)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .7s var(--ease),box-shadow .7s var(--ease)}
.book-cover img{width:100%;height:100%;object-fit:cover}
.book-cover::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.2),rgba(255,255,255,0) 55%);opacity:0;transition:opacity .5s}
.book:hover .book-cover,.book:focus-visible .book-cover{--ty:-10px;box-shadow:0 50px 80px -36px rgba(0,0,0,.9)}
.book:hover .book-cover::after{opacity:1}
.book:focus-visible{outline:none}
.book:focus-visible .book-cover{outline:2px solid var(--cyan);outline-offset:5px}
.tag{display:inline-block;align-self:flex-start;padding:.32rem .6rem;border-radius:4px;background:var(--cyan);color:var(--on-cyan);font-family:var(--display);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;line-height:1.4}
.book-title{font-family:var(--display);text-transform:uppercase;letter-spacing:.05em;font-size:clamp(1rem,1.5vw,1.3rem);line-height:1.3}
.book-meta{color:var(--dim);font-style:italic;font-size:.95rem;line-height:1.45}
.book-cta{align-self:flex-start;font-size:.95rem;border-bottom:1.5px solid var(--cyan);padding-bottom:2px}
.sketch{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut);padding-top:clamp(4rem,10vh,6.5rem)}
.sketch .tile{max-width:760px}

/* ---------- Surpages : liseuse et zoom ---------- */
dialog{color:var(--haze);font-family:var(--text)}
.reader,.lb{width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;overscroll-behavior:contain}
.reader{overflow-y:auto}
.lb{overflow:hidden}
.reader::backdrop,.lb::backdrop{background:rgba(8,16,28,.52);-webkit-backdrop-filter:blur(16px) saturate(1.15);backdrop-filter:blur(16px) saturate(1.15);animation:fade .45s ease both}
.lb::backdrop{background:rgba(8,16,28,.9);-webkit-backdrop-filter:none;backdrop-filter:none;animation-duration:.22s}
.reader.is-closing::backdrop,.lb.is-closing::backdrop{animation:fade .25s ease reverse both}
.lb.is-closing::backdrop{animation-duration:.16s}
.lb.is-closing .lb-stage,.lb.is-closing .lb-top,.lb.is-closing .lb-nav,.lb.is-closing .lb-cap{animation:fade .16s ease reverse both}
.rd-sheet{max-width:1120px;margin:clamp(12px,4vh,40px) auto;border-radius:var(--r-lg);background:rgba(14,27,46,.95);box-shadow:0 50px 140px -40px rgba(0,0,0,.85);animation:sheetIn .6s var(--ease) both}
.reader.is-closing .rd-sheet{animation:sheetOut .25s ease both}
@keyframes sheetIn{from{opacity:0;translate:0 40px}to{opacity:1;translate:0 0}}
@keyframes sheetOut{from{opacity:1;translate:0 0}to{opacity:0;translate:0 24px}}
.rd-bar{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:.75rem 1.5rem;padding:1rem clamp(1rem,3vw,2rem);border-radius:var(--r-lg) var(--r-lg) 0 0;background:rgba(14,27,46,.88);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.rd-id{display:flex;flex-direction:column;gap:.45rem;min-width:0}
.rd-title{margin:0;font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.05em;font-size:clamp(1rem,2vw,1.45rem);line-height:1.25}
.rd-count{margin:0 0 0 auto;color:var(--dim);font-size:.92rem;white-space:nowrap;font-variant-numeric:tabular-nums}
.rd-progress{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--rule)}
.rd-progress span{display:block;height:100%;background:var(--cyan);transform:scaleX(var(--p,0));transform-origin:left}
.rd-meta{margin:0;padding:1rem clamp(1rem,3vw,2rem) 0;color:var(--dim);font-style:italic}
.rd-pages{display:flex;flex-direction:column;align-items:center;gap:clamp(1.25rem,4vh,2.5rem);padding:clamp(1rem,3vw,2.5rem)}
.rd-pages.rd-pages--mosaique{display:block;padding:clamp(1rem,3vw,2.5rem) clamp(1rem,3vw,2.5rem) clamp(2rem,5vw,3.5rem)}
.rd-page{width:min(100%,880px);margin:0}
.rd-page--double{width:100%}
.rd-zoom{display:block;width:100%;padding:0;border:0;background:none;border-radius:8px;overflow:hidden;cursor:zoom-in}
.rd-zoom img{width:100%;height:auto}
.rd-page figcaption{text-align:center}
/* Projets BD en vue d'ensemble : toutes les pages en vignettes, dans l'ordre de lecture,
   rangées à la même hauteur (une double page prend naturellement deux fois plus de place) */
.rd-pages.rd-pages--planches{--cols:5;--g:clamp(.75rem,1.6vw,1.25rem);display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));align-items:start;gap:clamp(1rem,2.2vw,1.75rem) var(--g);padding:clamp(1rem,3vw,2.5rem) clamp(1rem,3vw,2.5rem) clamp(2rem,5vw,3.5rem)}
/* Une grille : chaque rangée a le même nombre de colonnes (js/planches.js choisit ce nombre pour éviter les trous).
   Une double page occupe deux colonnes (--u) et garde la même hauteur que les planches simples. */
.rd-pages--planches .rd-page--double{--u:2}
.rd-pages--planches .rd-page,.rd-pages--planches .rd-page--double{grid-column:span var(--s,var(--u,1));justify-self:center;width:calc((100% - (var(--s,var(--u,1)) - 1) * var(--g)) * var(--u,1) / var(--s,var(--u,1)));min-width:0;max-width:none;margin:0}
.rd-pages--planches .rd-zoom{border-radius:6px;box-shadow:0 10px 26px -16px rgba(0,0,0,.8);transition:box-shadow .5s var(--ease),translate .5s var(--ease)}
.rd-pages--planches .rd-zoom:hover{box-shadow:0 24px 50px -24px rgba(0,0,0,.85);translate:0 -3px}
.rd-pages--planches .rd-zoom:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.rd-pages--planches figcaption{font-size:.8rem;margin-top:.45rem}
.lb-img.to-reading{cursor:pointer}
.rd-end{display:grid;gap:1.1rem;padding:clamp(1.5rem,4vw,2.5rem);border-top:1px solid var(--rule)}
.rd-end-title{margin:0;font-style:italic;color:var(--dim)}
.rd-end-nav{display:flex;flex-wrap:wrap;gap:.75rem}

.lb-top{position:absolute;inset:0 0 auto;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:calc(env(safe-area-inset-top,0px) + 12px) clamp(12px,3vw,28px) 12px}
.lb-count{margin:0;color:var(--dim);font-size:.92rem;font-variant-numeric:tabular-nums}
.lb-stage{position:absolute;inset:calc(env(safe-area-inset-top,0px) + 70px) clamp(12px,7vw,104px) calc(env(safe-area-inset-bottom,0px) + 64px);display:flex;align-items:center;justify-content:center;overflow:hidden;animation:fade .22s ease both}
.lb-img{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px;cursor:zoom-in;user-select:none;-webkit-user-select:none;transition:opacity .15s ease,scale .25s var(--ease)}
.lb-img.is-swapping{opacity:0;scale:.98}
.lb-stage.is-zoomed{display:block;overflow:auto;cursor:zoom-out}
.lb-stage.is-zoomed .lb-img{max-width:none;max-height:none;margin:auto;border-radius:0;cursor:zoom-out}
.lb-nav{position:absolute;top:50%;translate:0 -50%;z-index:2;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;border:1px solid rgba(221,231,237,.4);background:rgba(14,27,46,.6);cursor:pointer;transition:background-color .3s,color .3s}
.lb-nav:hover{background:var(--haze);color:var(--night)}
.lb-prev{left:clamp(8px,2vw,28px)}
.lb-next{right:clamp(8px,2vw,28px)}
.lb-nav svg{width:20px;height:20px}
.lb-cap{position:absolute;inset:auto 0 0;z-index:1;margin:0;padding:12px clamp(70px,10vw,140px) calc(env(safe-area-inset-bottom,0px) + 16px);text-align:center;color:var(--dim);font-size:.92rem;line-height:1.45}
.lb-cap span{opacity:.75}

/* ---------- Pied de page ---------- */
.foot{border-top:1px solid var(--rule)}
.foot-in{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut);padding-block:1.75rem;display:flex;flex-wrap:wrap;justify-content:space-between;gap:.75rem 2rem;color:var(--dim);font-size:.9rem}

/* ---------- Petits écrans ---------- */
@media (max-width:900px){
  .about,.contact,.bd-head{grid-template-columns:1fr}
}
@media (max-width:760px){
  :root{--head:60px;--r-lg:20px}
  .menu-btn{display:inline-flex;align-items:center}
  .nav{display:none;position:absolute;top:calc(100% + 8px);left:var(--gut);right:var(--gut);flex-direction:column;gap:0;padding:.5rem 1.1rem;border-radius:18px;background:var(--orbit);box-shadow:0 30px 60px -20px rgba(0,0,0,.7)}
  .top.is-open .nav{display:flex}
  .nav a{padding:.8rem 0;font-size:1.05rem;border-bottom:1px solid var(--rule)}
  .nav a:last-child{border-bottom:0}
  .nav a::after{display:none}
  .nav a[aria-current="page"]{color:var(--cyan)}
  /* Hauteur de l'illustration : 68 % de l'écran sur un grand téléphone ; sur un petit écran elle se raccourcit
     (jamais moins de 300 px) pour que le sous-titre, les boutons et le logo Instagram tiennent dans la première page.
     Si le logo Instagram est encore coupé en bas, agrandir le « 16rem » ; s'il y a trop de vide, le diminuer. */
  .hero{display:block;min-height:0;--hh:max(min(68svh,calc(100svh - 16rem)),300px)}
  .hero-media{position:relative;inset:auto;height:var(--hh);min-height:0}
  .hero-media img{object-position:100% 50%}
  .hero-in{position:relative;margin-top:-4.5rem;padding-bottom:1rem}
  /* Accueil : le titre « Simon Becker » est centré tout en haut de l'illustration (premier tiers, dans le ciel sombre, sous la barre du menu).
     Il est remonté de la hauteur de l'image moins 4,5 rem ; le sous-titre et les boutons restent en bas, à leur place.
     Pour le descendre ou le monter, changer le « 2rem » ci-dessous. */
  .hero-text{width:100%}
  .hero h1{
    position:relative;margin-inline:auto;
    top:calc(var(--head) + env(safe-area-inset-top,0px) + 2rem - (var(--hh) - 4.5rem));
  }
  .portals{flex-direction:column;height:auto}
  .portal,.portal--bd,.portals:hover .portal,.portals .portal:hover{flex:none;height:clamp(210px,62vw,340px)}
  .portal-sub{max-height:none;opacity:1;width:auto}
  .portal-title{max-width:none}
  .bio p{text-align:justify;hyphens:auto;-webkit-hyphens:auto}
  /* À propos : titre et début du texte à gauche, photo à droite, centrés l'un par rapport à l'autre ;
     la suite du texte reprend toute la largeur */
  .about{grid-template-columns:minmax(0,1fr) 38%;gap:0 1.1rem;align-items:center}
  .about > div,.bio{display:contents}
  .about-fig{grid-column:2;grid-row:2}   /* photo centrée en hauteur sur le paragraphe qui est à sa gauche */
  .about .h2{grid-column:1;grid-row:1;align-self:end;margin-bottom:.9rem}
  .bio p:first-child{grid-column:1;grid-row:2;align-self:start}
  .bio p + p{grid-column:1 / -1;margin-top:1em}
  .reads{grid-column:1 / -1}
  .about-fig img{border-radius:var(--r-md)}
  /* Accueil : le logo Instagram passe seul sur sa ligne, centré et un peu plus grand */
  .hero-actions .pill--icon{width:52px;min-height:52px;margin:.3rem calc(50% - 26px) 0}
  .hero-actions .pill--insta svg{width:30px;height:30px}
  .form-row{grid-template-columns:1fr}
  .collage{grid-template-columns:1fr 1fr;gap:12px;grid-auto-flow:dense}
  .tile{grid-column:span var(--msp,1);margin-top:0;transform:none}
  .tile:only-child{grid-column:1 / -1}
  .mosaic{--row:118px;--gap:8px}
  .galerie-row--multi{flex-wrap:wrap}
  .galerie-row--multi .galerie-item{flex:var(--ar) 1 calc(var(--ar) * 150px)}
  .galerie-row--ligne{flex-wrap:wrap}
  .galerie-row--ligne .galerie-item{flex:1 1 100%}
  /* Peintures numériques : mosaïque de petites images (rangées calculées par js/planches.js), un toucher agrandit */
  .galerie{--gap:8px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:var(--gap)}
  .galerie-row{display:contents}
  .galerie .galerie-item--crop{aspect-ratio:auto}
  .galerie .galerie-item--crop img{height:auto;object-fit:fill}
  .galerie .galerie-row .galerie-item{flex:0 0 auto;width:calc((100% - (var(--n,1) - 1) * var(--gap)) * var(--f,1))}
  .rd-pages--mosaique .mosaic{--row:110px}
  .rd-pages.rd-pages--planches{--cols:3;--g:.6rem;gap:1rem var(--g);padding:.75rem .75rem 2rem}
  .shelf{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);padding-bottom:1rem;perspective:none}
  .book{flex:0 0 72%;scroll-snap-align:start}
  /* Sur téléphone, un doigt posé ou glissé sur une vignette comptait comme un « survol » : la couverture se soulevait
     et sortait du cadre de l'étagère, qui la rognait. On supprime ce soulèvement et la lueur sur téléphone. */
  .book:hover .book-cover,.book:focus-visible .book-cover{--ty:0px;box-shadow:0 34px 60px -34px rgba(0,0,0,.85)}
  .book:hover .book-cover::after{opacity:0}
  /* Indice de défilement : une fine barre sous les projets, dont le trait turquoise avance quand on les fait glisser
     (navigateurs récents ; sinon on voit simplement le bord du projet suivant) */
  .shelf{padding-bottom:1.9rem}
  @supports (animation-timeline:scroll()){
    .shelf{
      animation:shelf-prog linear both;animation-timeline:scroll(self inline);
      background-repeat:no-repeat;background-origin:content-box;
      background-image:linear-gradient(var(--cyan),var(--cyan)),linear-gradient(var(--rule),var(--rule));
      background-size:28% 4px,100% 4px;
      background-position:calc(var(--p) * 100%) calc(100% + 1.1rem),0 calc(100% + 1.1rem);
    }
  }
  .page-title,.h2,.hero h1{letter-spacing:.1em}
  .hero h1{font-size:1.6rem}
  .cat-head .lede{max-width:none;text-align:justify;text-wrap:pretty}
  .lede{text-align:justify;hyphens:auto;-webkit-hyphens:auto}
  /* Bas de page : « Section suivante » en premier, « Retour à l'accueil » dessous, les deux centrés */
  .cat-end--simple{flex-direction:column;align-items:center;gap:1.3rem;text-align:center}
  .next-pill{order:-1;margin-left:0;max-width:100%;text-align:center}
  .rd-sheet{margin:0;min-height:100%;border-radius:0}
  .rd-bar{border-radius:0;padding-top:calc(env(safe-area-inset-top,0px) + .75rem);flex-wrap:wrap}
  .rd-id{flex:1 1 60%}
  .rd-count{order:3;flex-basis:100%;margin:0}
  .rd-pages{padding:.75rem}
  .rd-end-nav .pill{width:100%}
  .lb-stage{inset:calc(env(safe-area-inset-top,0px) + 64px) 8px calc(env(safe-area-inset-bottom,0px) + 92px)}
  .lb-nav{top:auto;bottom:calc(env(safe-area-inset-bottom,0px) + 14px);translate:none}
  .lb-prev{left:16px}
  .lb-next{right:16px}
  .lb-cap{padding-inline:80px;padding-bottom:calc(env(safe-area-inset-bottom,0px) + 22px)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .shelf{animation-duration:auto !important}
  *,*::before,*::after{animation-duration:.01ms !important;animation-delay:0ms !important;transition-duration:.01ms !important}
}