/* Compléments de l'application connectée : connexion, scan, fiches, administration, impression. */
[hidden]{display:none!important}
body.anon aside,body.anon main{display:none}
body:not(.anon) #login{display:none}
#login{min-height:100vh;display:grid;place-items:center;padding:24px}
.login-card{width:min(420px,100%);background:var(--cream);border-radius:32px;padding:32px;box-shadow:0 8px 28px #3a2e1c0b}
.login-card h1{font-size:26px;margin:22px 0 4px}
.form-error{color:#89314f;font-size:13px;font-weight:700;margin:0;min-height:1.2em}
.form-error:empty{display:none}

nav i{display:contents}
.who strong{font-size:13px}.who p{margin:6px 0 0}
.aside-bottom button{margin-top:10px}

.scan-box{background:#f0f4e2;border-radius:24px;padding:18px;display:grid;gap:12px}
.scan-box input{font:700 20px ui-monospace,Menlo,Consolas,monospace;letter-spacing:.5px;min-height:56px}
.scan-box .actions{margin:0}
.scan-box .actions button{flex:1;min-height:52px}
.scan-status{font-size:13px;font-weight:700;margin:0;min-height:1.3em}
.scan-status.bad{color:#89314f}.scan-status.ok{color:#275448}
.steps{display:flex;gap:8px;margin:0 0 18px;padding:0;list-style:none;font-size:11px;font-weight:700}
.steps li{flex:1;text-align:center;padding:9px 6px;border-radius:999px;background:#f4f0e7;color:var(--muted)}
.steps li.on{background:var(--ink);color:var(--cream)}.steps li.done{background:#d3eadf;color:#275448}
.student{margin:14px 0;line-height:1.6}.student strong{font-size:17px}
.student.warn{background:#fbd4df;color:#89314f;font-weight:700}
.summary{background:#f4f0e7;border-radius:22px;padding:18px;margin:14px 0;display:grid;grid-template-columns:auto 1fr;gap:8px 16px;font-size:14px}
.summary dt{color:var(--muted);font-size:12px}.summary dd{margin:0;font-weight:700}
.choice{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0}
.choice button{min-height:64px;font-size:16px}
.choice button[aria-pressed=true]{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.big{min-height:54px;font-size:16px;width:100%}
.kv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:16px 0}
.kv div{background:#f4f0e7;border-radius:18px;padding:12px 14px}
.kv span{display:block;font-size:11px;color:var(--muted);margin-bottom:4px}
.kv strong{font-size:13px;word-break:break-word}
.details-text{white-space:pre-wrap;line-height:1.6;font-size:13px;margin:0 0 6px}
.detail-art img{object-fit:contain}
.tag.archived{background:#e8e3d8;color:#55574f}.tag.late{background:#89314f;color:#fff}
.banner{background:#fbd4df;color:#89314f;border-radius:20px;padding:14px 18px;font-weight:700;margin-bottom:18px}
.note-box{background:#f4ecd9;border-radius:20px;padding:14px 18px;font-size:13px;line-height:1.6;margin:12px 0}
.note-box ul{margin:8px 0 0;padding-left:18px}
.admin-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-bottom:22px}
.panel{background:var(--cream);border-radius:32px;padding:24px}
.panel h2{font-size:20px;margin:0 0 8px}.panel p{font-size:13px;color:var(--muted);line-height:1.6}
.panel .actions a{display:inline-flex;align-items:center;text-decoration:none}
label.button{font-size:14px}
.button{border-radius:999px;min-height:44px;font-weight:700;border:1px solid var(--line);background:var(--cream);color:var(--ink);padding:12px 18px;display:inline-flex;align-items:center;text-decoration:none}
.button.primary{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.list-row .actions{margin:0}
.list-row.off{opacity:.6}
.more{display:block;margin:16px auto}
input[type=file]{padding:10px}
input[readonly]{background:#f4f0e7;font-weight:700}
label.check{display:flex;align-items:center;gap:10px;font-size:13px}
label.check input{width:22px;min-height:22px;height:22px;margin:0}

#print-area{display:none}
.label{display:inline-flex;flex-direction:column;align-items:center;width:63mm;height:29mm;padding:3mm 3mm 2mm;border:1px dashed #bbb;margin:1mm;page-break-inside:avoid;break-inside:avoid;font:700 11pt ui-monospace,Menlo,Consolas,monospace;color:#000;background:#fff}
.label svg{width:100%;height:17mm;fill:#000}
.label small{font:8pt Arial,sans-serif;color:#000;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
@media print{
  html,body{background:#fff!important;color:#000!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  body>*:not(#print-area){display:none!important}
  #print-area{display:block!important;background:#fff!important}
  #print-area,#print-area *{color:#000!important;fill:#000!important;background-color:transparent}
  #print-area .label{background:#fff!important;border:1px dashed #999!important}
  @page{margin:8mm}
}
@media(max-width:1100px){.admin-grid{grid-template-columns:1fr}}
@media(max-width:760px){
  .aside-bottom{display:flex;align-items:center;gap:8px;margin-top:14px}
  .aside-bottom .who{flex:1;min-width:0}.aside-bottom .who p{display:none}
  .aside-bottom button{width:auto;margin:0;font-size:11px;padding:10px 12px}
  .kv{grid-template-columns:1fr}
  #scan{width:100%;justify-content:center;min-height:52px}
}

#scan-photo-label{flex:1;justify-content:center;min-height:52px;font-size:14px}
.camera{position:relative;border-radius:22px;overflow:hidden;background:#16231b}
.camera video{display:block;width:100%;max-height:340px;object-fit:cover;border-radius:0}
.camera-band{position:absolute;left:4%;right:4%;top:27.5%;height:45%;border:3px solid #f489a7;border-radius:16px;box-shadow:0 0 0 999px #0006}
#camera-stop{width:100%;margin-top:10px}

.hit{display:block;width:100%;text-align:left;margin:6px 0;background:var(--surface-2,#fff);border-radius:14px;padding:12px 14px;font-size:13px;line-height:1.5}

.danger{background:transparent!important;color:#ff8fb8!important;border:1px solid #ff5fa2!important}

.inv-switch{display:grid;gap:8px;margin:0 0 18px}
.inv-switch button{display:flex;align-items:center;gap:10px;width:100%;background:transparent;border:0;border-left:6px solid var(--c);border-radius:0 999px 999px 0;padding:12px 14px;text-align:left;font-weight:700;color:var(--ink)}
.inv-switch button svg{width:20px;height:20px;flex-shrink:0;stroke:var(--c)}
.inv-switch button.active{background:var(--c);color:#16122b}
.inv-switch button.active svg{stroke:#16122b}

/* Photos carrées : recadrées au centre, sans bandes. */
.grid .art{height:auto;aspect-ratio:1/1}
.art img{object-fit:cover!important}
.detail-art{height:auto;aspect-ratio:1/1;max-width:360px;margin:0 auto 16px}
.detail-art img{object-fit:cover!important;width:100%;height:100%}

/* Versión compacta : foto cuadrada pequeña y ficha más estrecha. */
.grid .art{height:auto;aspect-ratio:auto;padding:16px 0;background:var(--surface-2,#221c44)}
.grid .art > img,.grid .art > .instrument-visual{display:block;margin:0 auto;width:150px;height:150px;border-radius:18px;object-fit:cover}
.grid .art .instrument-visual svg{width:150px;height:150px}
.grid .art .tag{top:10px;left:10px}
.detail-art{max-width:200px}
dialog{width:min(440px,94vw)}

/* Marco cuadrado : el fondo alrededor de la foto es un cuadro exacto. */
.grid .art{aspect-ratio:1/1;height:auto;padding:14px;display:flex;align-items:center;justify-content:center}
.grid .art > img,.grid .art > .instrument-visual{width:100%;height:100%;border-radius:14px}
.detail-art{aspect-ratio:1/1;height:auto;padding:12px;display:flex;align-items:center;justify-content:center;max-width:220px}
.detail-art > img{width:100%;height:100%;border-radius:14px}

#lightbox{position:fixed;inset:0;background:#05030cf2;display:grid;place-items:center;z-index:30;padding:16px}
#lightbox[hidden]{display:none}
#lightbox img{max-width:100%;max-height:92vh;object-fit:contain;border-radius:12px}
#lightbox-close{position:absolute;top:14px;right:14px;background:var(--surface-2,#221c44);color:#fff;border:0;width:44px;height:44px;border-radius:50%}
.photo-zoom{display:flex;width:100%;height:100%;background:none;border:0;padding:0;cursor:zoom-in}
.detail-art .photo-zoom > img{width:100%;height:100%;border-radius:14px}

/* Ficha : photo en rectangle net, pleine largeur, sans marge intérieure. */
.detail-art{aspect-ratio:4/3;height:auto;max-width:none;width:100%;padding:0;margin:0 0 16px;border-radius:18px;overflow:hidden;background:var(--surface-2,#221c44);display:block}
.detail-art > img,.detail-art .photo-zoom,.detail-art .photo-zoom > img,.detail-art .instrument-visual{width:100%;height:100%;border-radius:0}
.detail-art .photo-zoom{display:block}
.detail-art img{object-fit:cover!important}
.detail-art .instrument-visual svg{width:100%;height:100%}

/* Cartes compactes : plusieurs instruments par ligne, photo de 150 px. */
.grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}
.grid .art{aspect-ratio:auto;height:150px;padding:10px;display:flex;align-items:center;justify-content:center}
.grid .art > img{width:100%;height:100%;object-fit:cover;border-radius:14px}
.grid .art > .instrument-visual{width:100%;height:100%}
.grid .card-info{padding:12px 14px}
.grid .card h3{font-size:16px}

/* Ficha : photo en rectangle vertical (plus haut que large). */
.detail-art{aspect-ratio:3/4;width:min(260px,100%);margin:0 auto 16px}

/* La hauteur fixe des anciens styles (.art) empêchait la proportion : on la libère. */
.art.detail-art{height:auto!important;min-height:0!important}