/* Page identite : cartes et papiers. Préfixe .id- */
.sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
kbd{font:600 10px var(--mono);padding:1px 6px;border-radius:5px;border:1px solid currentColor;opacity:.75;margin-left:2px}
.id-h2{font-size:18px;font-weight:600;letter-spacing:-.01em;display:flex;align-items:center;gap:10px}
.id-n{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:7px;background:var(--accent-soft);color:var(--accent);font:600 12px var(--mono);flex:none}
.id-models,.id-lot,.id-histo{margin-bottom:20px;display:grid;gap:14px}
.id-work{margin-bottom:20px}

/* galerie de modèles */
.id-gal{display:flex;gap:14px;overflow-x:auto;padding:14px 6px 18px;margin:0 -6px;scroll-snap-type:x proximity;align-items:flex-end}
.id-th{flex:none;scroll-snap-align:center;appearance:none;background:transparent;border:0;padding:0;cursor:pointer;display:grid;gap:10px;text-align:left;width:208px;opacity:.7;transform:translateY(0) scale(1);transition:transform .45s var(--ease),opacity .3s}
.id-th[data-r="p"]{width:112px}
.id-th:hover{opacity:1;transform:translateY(-3px)}
.id-th.on{opacity:1;transform:translateY(-6px) scale(1.035);animation:id-pick .6s var(--ease)}
.id-th-art{display:block;aspect-ratio:var(--ar);border-radius:8px;filter:drop-shadow(0 12px 14px rgba(0,0,0,.45));outline:2px solid transparent;outline-offset:5px;transition:outline-color .25s}
.id-th.on .id-th-art{outline-color:var(--accent)}
.id-th:focus-visible{outline:none}.id-th:focus-visible .id-th-art{outline-color:var(--fg)}
.id-th-art svg{display:block;width:100%;height:100%}
.id-th-t{display:grid;gap:1px;line-height:1.3}
.id-th-t b{font-size:13px;font-weight:600}.id-th-t small{font-size:11px;color:var(--muted)}
.id-th.on .id-th-t b{color:var(--accent)}
@keyframes id-pick{0%{transform:translateY(0) scale(1)}45%{transform:translateY(-12px) scale(1.07)}100%{transform:translateY(-6px) scale(1.035)}}

/* accordéons */
.id-acc{border:1px solid var(--line);border-radius:12px;background:rgba(7,13,26,.35)}
.id-acc>summary{display:flex;align-items:center;gap:10px;padding:13px 15px;cursor:pointer;font-weight:600;font-size:14px;list-style:none;border-radius:12px}
.id-acc>summary::-webkit-details-marker{display:none}
.id-acc>summary::after{content:"";margin-left:auto;width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg) translateY(-2px);transition:transform .3s var(--ease)}
.id-acc[open]>summary::after{transform:rotate(-135deg) translateY(-2px)}
.id-acc>summary:hover{background:rgba(148,170,205,.06)}
.id-acc-b{display:grid;gap:16px;padding:4px 15px 16px}
.id-acc[open] .id-acc-b{animation:fade .35s ease}
.id-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 12px}
.id-f[data-k="gender"],.id-f[data-k="cats"],.id-f[data-k="address"],.id-f[data-k="signs"],.id-f[data-k="restr"],.id-f[data-k="oath"],.id-f[data-k="guild"],.id-f[data-k="access"]{grid-column:1/-1}
.id-f .lab{margin-bottom:0;align-items:center}
.id-f .lab label{cursor:pointer}
.id-f .ic{padding:2px 8px}
.id-f select.inp,.id-acc select.inp{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 17px) 52%,calc(100% - 12px) 52%;background-size:5px 5px;background-repeat:no-repeat;padding-right:30px}
.id-f select option{background:var(--panel-solid);color:var(--fg)}
.inp[aria-invalid="true"]{border-color:var(--bad);box-shadow:0 0 0 3px rgba(240,138,138,.15)}
.id-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 12px}
.id-grid2 .lab{margin-bottom:8px}

/* emblèmes, pastilles */
.id-embgrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.id-emb{appearance:none;aspect-ratio:1;padding:7px;border-radius:10px;border:1px solid var(--line-strong);background:rgba(7,13,26,.5);color:var(--muted);cursor:pointer;transition:all .25s var(--ease)}
.id-emb svg{width:100%;height:100%;display:block}
.id-emb:hover{color:var(--fg);border-color:var(--accent);transform:translateY(-2px)}
.id-emb[aria-checked="true"]{color:var(--accent);border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 3px var(--accent-soft)}
.id-sws{display:flex;flex-wrap:wrap;gap:7px}
.id-sw{appearance:none;width:26px;height:26px;border-radius:50%;border:2px solid rgba(255,255,255,.18);cursor:pointer;padding:0;font:600 11px var(--font);color:var(--muted);background:var(--panel-2);transition:transform .2s var(--ease),border-color .2s,box-shadow .2s}
.id-sw:hover{transform:scale(1.15)}
.id-sw[aria-pressed="true"]{border-color:var(--fg);box-shadow:0 0 0 2px var(--accent)}
.id-flag{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.id-flag svg{width:84px;height:56px;border-radius:4px;display:block;box-shadow:0 6px 14px -6px rgba(0,0,0,.7)}
.id-flag-c{display:flex;gap:6px}
.id-cl input{width:32px;height:32px;padding:0;border:1px solid var(--line-strong);border-radius:8px;background:transparent;cursor:pointer}
.id-flag .seg{flex:1;min-width:170px}

/* photo */
.id-avbox,.id-upbox{display:grid;gap:14px}
.id-avtop{display:grid;grid-template-columns:104px minmax(0,1fr);gap:14px}
.id-avprev{aspect-ratio:4/5;border-radius:10px;overflow:hidden;border:1px solid var(--line-strong);background:#cdd6dc}
.id-avprev svg{display:block}
.id-avsel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.id-avsel .lab{margin-bottom:4px}
.id-crop{position:relative;width:100%;max-width:240px;overflow:hidden;border-radius:10px;border:1px solid var(--line-strong);background:rgba(7,13,26,.7);cursor:grab;touch-action:none;min-height:120px}
.id-crop.drag{cursor:grabbing}
.id-crop img{position:absolute;max-width:none;user-select:none;-webkit-user-drag:none;display:none}
.id-file{position:relative;overflow:hidden}
.id-file input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.id-file:focus-within{outline:2px solid var(--accent);outline-offset:3px}

/* palettes */
.id-pals{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.id-pal{appearance:none;display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;border:1px solid var(--line-strong);background:rgba(7,13,26,.5);font-size:13px;text-align:left;cursor:pointer;transition:all .25s var(--ease)}
.id-pal:hover{border-color:var(--accent);transform:translateY(-1px)}
.id-pal[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.id-pal-sw{display:flex;flex:none;border-radius:6px;overflow:hidden;border:1px solid rgba(255,255,255,.2)}
.id-pal-sw i{width:12px;height:22px;display:block}

/* aperçu */
.id-viewp{overflow:hidden}
.id-viewp.sticky{position:static}
@media (min-width:901px) and (min-height:860px){.id-viewp.sticky{position:sticky}}
.id-viewp.rolled .id-vp{animation:id-roll .55s var(--ease)}
@keyframes id-roll{0%{transform:scale(.97)}50%{transform:scale(1.015)}100%{transform:none}}
.id-tb{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.id-tb .seg{min-width:200px;flex:1;max-width:330px}
.id-tb .btn svg{width:15px;height:15px}
.id-anim{max-width:none!important}
.id-tb-b{padding-top:2px}
.id-zoom{display:grid;gap:4px;min-width:150px;flex:1;max-width:240px}
.id-zoom .lab{margin:0}
.id-vp{overflow-x:auto;overflow-y:hidden;padding:26px 20px 44px;margin:0 -8px;border-radius:12px;background:radial-gradient(ellipse at 50% 38%,rgba(45,212,191,.07),transparent 70%),rgba(7,13,26,.35);text-align:center}
.id-view{position:relative;margin:0 auto;aspect-ratio:var(--ar,1.586);perspective:1700px;text-align:left;--mx:50%;--my:40%;--rx:3.5%;--ry:5.5%}
.id-tilt,.id-lift,.id-card{position:absolute;inset:0;transform-style:preserve-3d}
.id-tilt{transition:transform .22s ease-out}
.id-card{cursor:grab;outline-offset:8px;border-radius:14px}
.id-card.drag{cursor:grabbing}
.id-card:focus-visible{outline:2px solid var(--accent)}
.id-face{position:absolute;inset:0;border-radius:var(--rx)/var(--ry);overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;filter:drop-shadow(0 20px 22px rgba(0,0,0,.5));background:transparent}
.id-art{position:absolute;inset:0}
.id-art svg{display:block;width:100%;height:100%}
.id-face.bk{transform:rotateY(180deg)}
.id-view[data-mode="flip"][data-side="back"] .id-card{transform:rotateY(180deg)}
/* glissement : deux faces empilées, une seule active */
.id-view[data-mode="slide"] .id-face{backface-visibility:visible;-webkit-backface-visibility:visible}
.id-view[data-mode="slide"] .id-face.bk{transform:none}
.id-view[data-mode="slide"] .id-face.fr{z-index:2}.id-view[data-mode="slide"] .id-face.bk{z-index:1;opacity:0;transform:scale(.94);pointer-events:none}
.id-view[data-mode="slide"][data-side="back"] .id-face.bk{z-index:2;opacity:1;transform:none;pointer-events:auto}
.id-view[data-mode="slide"][data-side="back"] .id-face.fr{z-index:1;opacity:0;transform:scale(.94);pointer-events:none}
/* feuilleter : la face avant pivote autour de son bord gauche */
.id-view[data-mode="page"] .id-face.bk{transform:none;backface-visibility:visible;-webkit-backface-visibility:visible}
.id-view[data-mode="page"] .id-face.fr{transform-origin:left center;z-index:2}
.id-view[data-mode="page"][data-side="back"] .id-face.fr{transform:rotateY(-180deg);pointer-events:none}
/* reflets */
.id-sheen,.id-holo,.id-sweep{position:absolute;inset:0;pointer-events:none;border-radius:inherit}
.id-sheen{background:radial-gradient(circle at var(--mx) var(--my),rgba(255,255,255,.34),rgba(255,255,255,.08) 28%,transparent 52%);opacity:0;transition:opacity .35s;mix-blend-mode:soft-light}
.id-holo{background:conic-gradient(from calc(var(--mx) * 3.6) at var(--mx) var(--my),#7fe7d6,#f4e4a2,#ffffff,#7cc8e8,#b6f0c9,#7fe7d6);mix-blend-mode:color-dodge;opacity:0;transition:opacity .35s;filter:saturate(.7)}
.id-view:hover .id-sheen{opacity:1}
.id-view[data-holo="on"]:hover .id-holo{opacity:.2}
.id-view[data-holo="off"] .id-holo{display:none}
.id-sweep{background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.6) 48%,rgba(255,255,255,.15) 54%,transparent 62%);opacity:0;transform:translateX(-140%);mix-blend-mode:soft-light}
.id-ground{position:absolute;left:50%;bottom:-7%;width:78%;height:7%;border-radius:50%;background:radial-gradient(ellipse at center,rgba(0,0,0,.7),transparent 70%);filter:blur(9px);opacity:.55;transform:translateX(-50%);pointer-events:none}

/* exports */
.id-exp{display:grid;gap:14px;justify-content:stretch}
.id-exp-g{display:grid;gap:8px}
.id-exp-g .lab{margin:0}
.id-scale{width:130px}

/* lot, historique */
.id-empty{color:var(--muted);font-size:14px;padding:6px 0}
.id-lotgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:20px 18px}
.id-lotgrid[data-r="p"]{grid-template-columns:repeat(auto-fill,minmax(122px,1fr))}
.id-lot-i{appearance:none;background:transparent;border:0;padding:0;cursor:pointer;display:grid;gap:8px;text-align:left;opacity:0;animation:id-cas .6s var(--ease) forwards;animation-delay:calc(var(--i)*70ms);transition:transform .3s var(--ease)}
.id-lot-i:hover{transform:translateY(-4px) rotate(-.6deg)}
.id-lot-art{display:block;aspect-ratio:var(--ar);border-radius:8px;filter:drop-shadow(0 10px 12px rgba(0,0,0,.45));transition:outline-color .2s;outline:2px solid transparent;outline-offset:4px}
.id-lot-i:hover .id-lot-art,.id-lot-i:focus-visible .id-lot-art{outline-color:var(--accent)}
.id-lot-i:focus-visible{outline:none}
.id-lot-art svg{display:block;width:100%;height:100%}
.id-lot-n{font-size:12px;color:var(--muted);overflow-wrap:anywhere}
@keyframes id-cas{from{opacity:0;transform:translateY(28px) rotate(-2.5deg) scale(.92)}to{opacity:1;transform:none}}
.id-histo-l{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.id-h{display:flex;gap:8px;align-items:flex-start;opacity:0;animation:inx .5s var(--ease) forwards;animation-delay:calc(var(--i)*50ms)}
.id-h-b{appearance:none;flex:1;min-width:0;display:flex;gap:12px;align-items:center;text-align:left;padding:10px;border:1px solid var(--line);border-radius:12px;background:rgba(7,13,26,.55);cursor:pointer;transition:border-color .2s,background .2s}
.id-h-b:hover{border-color:var(--accent);background:rgba(20,32,56,.7)}
.id-h-art{flex:none;width:92px;display:block;aspect-ratio:var(--ar);border-radius:5px;overflow:hidden}
.id-h-art svg{display:block;width:100%;height:100%}
.id-h-t{display:grid;gap:2px;min-width:0}.id-h-t b{font-size:13px;overflow-wrap:anywhere}.id-h-t small{color:var(--muted);font-size:11px}
.id-h-x{flex:none}

/* impression à l'échelle réelle */
#id-print{display:none}
@media print{
  @page{size:A4;margin:14mm}
  body>*:not(#id-print){display:none!important}
  html,body{background:#fff!important}
  #id-print{display:block!important;color:#111;font:12px Inter,sans-serif;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .id-pr-h,.id-pr-f{color:#555;font-size:10px;margin:0 0 6mm}
  .id-pr-f{margin:8mm 0 0}
  .id-pr-row{display:flex;gap:10mm;flex-wrap:wrap}
  #id-print[data-o="l"] .id-pr-row{flex-direction:column;align-items:flex-start}
  .id-pr-row figure{margin:0;break-inside:avoid}
  .id-pr-row figcaption{font:600 9px Inter,sans-serif;text-transform:uppercase;letter-spacing:.1em;color:#777;margin-bottom:2mm}
  .id-pr-row svg{display:block;width:var(--pw)!important;height:var(--ph)!important;outline:.2mm dashed #aaa;outline-offset:1.5mm}
}

/* responsive */
@media (max-width:900px){
  .id-work #id-view-panel{order:-1}
  .id-fields,.id-grid2{grid-template-columns:minmax(0,1fr)}
  .id-fields{gap:14px}
  .id-embgrid{grid-template-columns:repeat(5,minmax(0,1fr))}
  .id-th{width:176px}.id-th[data-r="p"]{width:98px}
  .id-vp{padding:18px 8px 36px}
  .id-tb .seg{min-width:0}
  .id-avtop{grid-template-columns:88px minmax(0,1fr)}
}
@media (max-width:480px){
  .id-pals{grid-template-columns:minmax(0,1fr)}
  .id-lotgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.id-lotgrid[data-r="p"]{grid-template-columns:repeat(3,minmax(0,1fr))}
  .id-histo-l{grid-template-columns:minmax(0,1fr)}
  .id-avsel{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .id-th,.id-th.on,.id-lot-i,.id-h,.id-viewp.rolled .id-vp,.id-acc[open] .id-acc-b{animation:none!important;opacity:1}
  .id-th.on{transform:translateY(-4px)}
  .id-tilt,.id-sheen,.id-holo{transition:none}
}
