/* =====================================================================
   Scanner de QR code plein écran (Components/ScannerQr.razor), préfixe sq-.
   Caméra en fond, viseur aux coins marqués et ligne de balayage, titre et ✕
   en haut, consigne et actions en bas. Pas de flou, animations sur transform
   et opacité seulement : conçu pour les Samsung A15 des techniciens.
   ===================================================================== */

.sq {
    position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh;
    max-width: 100vw; max-height: 100vh; max-height: 100dvh;
    margin: 0; padding: 0; border: 0; background: #000; color: #fff; overflow: hidden; outline: none;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.sq::backdrop { background: #000; }
body:has(.sq[open]) { overflow: hidden; }

.sq__scene { position: relative; width: 100%; height: 100%; animation: sqFondu .2s ease both; }
.sq--sortie .sq__scene { animation: sqFonduSortie .18s ease both; }
@keyframes sqFondu { from { opacity: 0; } to { opacity: 1; } }
@keyframes sqFonduSortie { from { opacity: 1; } to { opacity: 0; } }

.sq__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }

/* ── Viseur : carré centré, le reste de l'image assombri d'une seule ombre pleine ── */
.sq__viseur {
    --sq-cote: min(70vw, 320px);
    position: absolute; left: 50%; top: 50%; width: var(--sq-cote); height: var(--sq-cote);
    transform: translate(-50%, -54%); border-radius: 22px;
    box-shadow: 0 0 0 200vmax rgba(0, 0, 0, .52);
}
.sq__coin { position: absolute; width: 34px; height: 34px; border: 4px solid #fff; transition: border-color .15s; }
.sq__coin--hg { left: -2px; top: -2px; border-right: 0; border-bottom: 0; border-top-left-radius: 20px; }
.sq__coin--hd { right: -2px; top: -2px; border-left: 0; border-bottom: 0; border-top-right-radius: 20px; }
.sq__coin--bg { left: -2px; bottom: -2px; border-right: 0; border-top: 0; border-bottom-left-radius: 20px; }
.sq__coin--bd { right: -2px; bottom: -2px; border-left: 0; border-top: 0; border-bottom-right-radius: 20px; }
.sq__ligne {
    position: absolute; left: 14px; right: 14px; top: 12px; height: 3px; border-radius: 999px;
    background: linear-gradient(90deg, transparent, #ff4a55 20%, #ff4a55 80%, transparent);
    box-shadow: 0 0 10px rgba(255, 74, 85, .8);
    animation: sqBalayage 2.4s ease-in-out infinite;
}
@keyframes sqBalayage {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(calc(var(--sq-cote) - 27px)); }
    100% { transform: translateY(0); }
}
.sq__viseur--ok .sq__coin { border-color: #3ddc84; }
.sq__viseur--ok { box-shadow: 0 0 0 200vmax rgba(0, 0, 0, .62); }
.sq__viseur--erreur .sq__coin { border-color: rgba(255, 255, 255, .35); }
.sq__coche {
    position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; border-radius: 50%;
    background: #3ddc84; color: #06240f; font-size: 2rem; display: grid; place-items: center;
    transform: translate(-50%, -50%); animation: sqPop .25s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes sqPop { from { transform: translate(-50%, -50%) scale(.4); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }

/* ── Haut : fermer, titre, lampe ── */
.sq__tete {
    position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: .7rem;
    padding: calc(.8rem + env(safe-area-inset-top, 0px)) 1rem .9rem;
    background: linear-gradient(180deg, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0));
}
.sq__tete b { flex: 1; min-width: 0; font-size: 1rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sq__btn {
    width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; cursor: pointer;
    border: 1.5px solid rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .14); color: #fff;
    display: grid; place-items: center; font-size: 1.1rem; transition: background .15s, color .15s;
}
.sq__btn--actif { background: #fff; border-color: #fff; color: #111; }
.sq__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ── Bas : consigne, actions ── */
.sq__pied {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 2.2rem 1.2rem calc(1.3rem + env(safe-area-inset-bottom, 0px));
    display: flex; flex-direction: column; align-items: center; gap: .8rem; text-align: center;
    background: linear-gradient(0deg, rgba(0, 0, 0, .75), rgba(0, 0, 0, 0));
}
.sq__consigne { margin: 0; font-size: .95rem; font-weight: 600; line-height: 1.4; max-width: 34ch; display: flex; align-items: center; gap: .5rem; justify-content: center; }
.sq__consigne--erreur { color: #ffc2c6; }
.sq__consigne .bi-check-circle-fill { color: #3ddc84; }
.sq__spinner {
    width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .3); border-top-color: #fff;
    animation: sqTourne .8s linear infinite; flex-shrink: 0;
}
@keyframes sqTourne { to { transform: rotate(360deg); } }
.sq__actions { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; }
.sq__action {
    height: 46px; padding: 0 1.2rem; border-radius: 999px; cursor: pointer; white-space: nowrap;
    border: 1.5px solid rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .08); color: #fff;
    font: inherit; font-size: .88rem; font-weight: 700; display: inline-flex; align-items: center; gap: .4rem;
}
.sq__action--plein { background: #fff; border-color: #fff; color: #111; }
.sq__action:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    .sq__scene, .sq__ligne, .sq__coche { animation: none; }
}
/* Paysage sur téléphone : le viseur se cale sur la hauteur. */
@media (max-height: 480px) {
    .sq__viseur { --sq-cote: min(60vh, 260px); transform: translate(-50%, -50%); }
    .sq__pied { padding-top: 1rem; }
}