/* Dualtron Suisse : mode inspection des photos. Tout est préfixé .insp. Jetons du prototype, avec valeur de repli.
   Réglages d'intégration (facultatifs) : --insp-plate (fond derrière la photo), --insp-blend (mix-blend-mode de la photo),
   --insp-lens-bg / --insp-lens-blend (fond et fusion de la loupe). Défaut : photos du fabricant sur blanc, posées sur papier. */

/* ---------- déclencheur : repère en coin + loupe ---------- */
.insp{position:relative;display:block;overflow:hidden;cursor:crosshair}
.insp:focus-visible{outline:2px solid var(--bone,#F1F2EF);outline-offset:2px}
.insp-mark{position:absolute;right:0;bottom:0;z-index:1;display:flex;align-items:center;justify-content:flex-end;min-width:44px;height:44px;padding-right:8px;pointer-events:none}
.insp-mk{display:flex;align-items:center;height:28px;padding:0 5px;background:rgba(9,10,11,.74);color:var(--bone,#F1F2EF)}
.insp-mk svg{flex:none;width:18px;height:18px}
.insp-lab{max-width:0;margin:0;overflow:hidden;opacity:0;white-space:nowrap;font:400 .875rem/1 var(--f-mono,"Plex Mono",ui-monospace,Menlo,Consolas,monospace);letter-spacing:.04em;transition:max-width .2s var(--ease-out,cubic-bezier(.16,1,.3,1)),margin .2s var(--ease-out,cubic-bezier(.16,1,.3,1)),opacity .2s}
.insp:focus-visible .insp-lab{max-width:120px;margin:0 9px 0 5px;opacity:1}
@media (hover:hover){.insp:hover .insp-lab{max-width:120px;margin:0 9px 0 5px;opacity:1}}

.insp-lens{position:absolute;left:0;top:0;z-index:2;box-sizing:border-box;border:1px solid var(--bone,#F1F2EF);border-radius:50%;outline:1px solid rgba(9,10,11,.7);box-shadow:inset 0 0 0 6px rgba(9,10,11,.46);background-color:var(--insp-lens-bg,var(--pool-1,#31363C));background-blend-mode:var(--insp-lens-blend,normal);background-repeat:no-repeat;opacity:0;pointer-events:none}
.insp-lens.insp-on{opacity:1;will-change:transform}
/* graduations : une tick toutes les 15°, plus longue tous les 90° */
.insp-lens::before,.insp-lens::after{content:"";position:absolute;inset:0;border-radius:50%}
.insp-lens::before{background:repeating-conic-gradient(from -.4deg,var(--bone,#F1F2EF) 0 .8deg,transparent .8deg 15deg);-webkit-mask:radial-gradient(circle closest-side,transparent calc(100% - 5px),#000 calc(100% - 4px));mask:radial-gradient(circle closest-side,transparent calc(100% - 5px),#000 calc(100% - 4px))}
.insp-lens::after{background:repeating-conic-gradient(from -.5deg,var(--bone,#F1F2EF) 0 1deg,transparent 1deg 90deg);-webkit-mask:radial-gradient(circle closest-side,transparent calc(100% - 10px),#000 calc(100% - 9px));mask:radial-gradient(circle closest-side,transparent calc(100% - 10px),#000 calc(100% - 9px))}

/* ---------- salle d'inspection ---------- */
.insp-room{position:fixed;inset:0;z-index:1000;display:grid;grid-template-rows:auto minmax(0,1fr) auto;background:var(--insp-veil,rgba(5,7,10,.96));color:var(--bone,#F1F2EF);font-family:var(--f-sans,"Archivo","Archivo Fallback",Arial,system-ui,sans-serif);overscroll-behavior:contain;outline:0}
.insp-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

.insp-top{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:60px;padding:8px max(16px,env(safe-area-inset-right)) 8px max(16px,env(safe-area-inset-left));padding-top:calc(8px + env(safe-area-inset-top));border-bottom:1px solid var(--line,rgba(241,242,239,.16));background:rgba(5,7,10,.88)}
.insp-cap{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:0;margin:0;font:400 13px/1.45 var(--f-mono,"Plex Mono",ui-monospace,Menlo,Consolas,monospace);letter-spacing:.05em;color:var(--bone,#F1F2EF)}
.insp-n::after,.insp-t::after{content:"\00b7";margin:0 .75em;color:var(--alu,#A3A9B1)}
.insp-s{color:var(--alu,#A3A9B1)}
.insp-ctl{display:flex;flex:none;gap:8px}

.insp-b{display:inline-grid;place-items:center;flex:none;width:44px;height:44px;padding:0;border:1px solid var(--steel,#5E646C);border-radius:0;background:transparent;color:var(--bone,#F1F2EF);cursor:pointer;transition:border-color .16s,background-color .16s}
.insp-b[hidden]{display:none}
.insp-b:hover{border-color:var(--bone,#F1F2EF)}
.insp-b:focus-visible{outline:2px solid var(--bone,#F1F2EF);outline-offset:2px}
.insp-pv,.insp-nx{position:absolute;top:50%;margin-top:-22px;background:rgba(9,10,11,.6)}
.insp-pv{left:max(12px,env(safe-area-inset-left))}
.insp-nx{right:max(12px,env(safe-area-inset-right))}

.insp-stage{position:relative;min-height:0;overflow:hidden;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
.insp-stage:active{cursor:grabbing}
.insp-slide{position:absolute;inset:0}
.insp-slide.insp-snap{transition:transform .2s var(--ease-out,cubic-bezier(.16,1,.3,1))}
.insp-pic{position:absolute;left:0;top:0;transform-origin:0 0;background:var(--insp-plate,var(--paper,#E8E7E2))}
.insp-pic.insp-an{transition:transform .22s var(--ease-out,cubic-bezier(.16,1,.3,1))}
.insp-pic.insp-mv{will-change:transform}
.insp-pic img{display:block;width:100%;height:100%;max-width:none;mix-blend-mode:var(--insp-blend,multiply);-webkit-user-drag:none;pointer-events:none}
.insp-sw{position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--volt,#C8F31D);pointer-events:none}

.insp-rail{position:relative;display:flex;gap:8px;overflow-x:auto;padding:14px max(16px,env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));border-top:1px solid var(--line,rgba(241,242,239,.16));background:rgba(5,7,10,.88);touch-action:pan-x;scrollbar-width:thin;scrollbar-color:var(--steel,#5E646C) transparent}
.insp-th{position:relative;flex:none;width:72px;height:54px;padding:0;border:0;border-radius:0;background:var(--insp-plate,var(--paper,#E8E7E2));opacity:.5;cursor:pointer;transition:opacity .2s}
.insp-th:first-child{margin-left:auto}
.insp-th:last-child{margin-right:auto}
.insp-th:hover{opacity:.85}
.insp-th[aria-current]{opacity:1}
.insp-th:focus-visible{outline:2px solid var(--bone,#F1F2EF);outline-offset:3px;opacity:1}
.insp-th img{display:block;width:100%;height:100%;object-fit:cover;mix-blend-mode:var(--insp-blend,multiply);pointer-events:none}
.insp-th::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:2px}
.insp-th[aria-current]::after{background:var(--volt,#C8F31D)}
.insp-sep{margin-left:20px}
.insp-sep::before{content:"";position:absolute;left:-11px;top:6px;bottom:6px;width:1px;background:var(--steel,#5E646C)}

.insp-one .insp-pv,.insp-one .insp-nx,.insp-one .insp-rail{display:none}
@media (pointer:coarse){.insp-pv,.insp-nx{display:none}}
@media (max-width:560px){
  .insp-top{min-height:56px}
  .insp-cap{letter-spacing:.03em}
  .insp-t{order:-1;flex-basis:100%}
  .insp-t::after{content:none}
  .insp-th{width:64px;height:48px}
}
@media (prefers-reduced-motion:reduce){
  .insp-lab,.insp-b,.insp-th,.insp-slide.insp-snap,.insp-pic.insp-an{transition:none}
}
@media print{.insp-room,.insp-mark,.insp-lens{display:none}}