:root{
    --bg:#11131a; --panel:#1a1d27; --panel2:#232735; --line:#2e3342;
    --txt:#e9ecf3; --dim:#98a0b3; --acc:#5b8cff;
    --ok:#3ecf8e; --warn:#ffb454; --bad:#ff6b6b;
  }
  *{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
  body{margin:0; background:var(--bg); color:var(--txt);
       font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
       padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}
  header{padding:18px 18px 12px; display:flex; align-items:center; gap:10px}
  header h1{font-size:19px; margin:0; font-weight:650; letter-spacing:-.2px}
  .dot{width:9px; height:9px; border-radius:50%; background:var(--bad); flex:none}
  .dot.on{background:var(--ok)}
  #status{font-size:12.5px; color:var(--dim); margin-left:auto; text-align:right;
          line-height:1.3}
  #status .ver{display:block; font-size:11px; opacity:.65; font-variant-numeric:tabular-nums}
  main{padding:0 14px 40px; max-width:560px; margin:0 auto}
  .card{background:var(--panel); border:1px solid var(--line); border-radius:16px;
        padding:16px; margin-bottom:14px}
  button{font:inherit; border:0; border-radius:14px; cursor:pointer}
  .shoot{width:100%; padding:20px; background:var(--acc); color:#fff;
         font-size:18px; font-weight:650; display:flex; align-items:center;
         justify-content:center; gap:10px}
  .shoot:disabled{opacity:.5}
  .ghost{width:100%; padding:13px; background:var(--panel2); color:var(--txt);
         border:1px solid var(--line); font-size:15px; margin-top:10px}
  input[type=file]{display:none}
  .tips{font-size:13.5px; color:var(--dim); margin:0; padding-left:20px}
  .tips li{margin:5px 0}
  .grade{display:flex; align-items:center; gap:16px}
  .gnum{font-size:52px; font-weight:750; line-height:1; letter-spacing:-2px}
  .gsub{font-size:13px; color:var(--dim)}
  .badge{display:inline-block; padding:4px 10px; border-radius:999px;
         font-size:12px; font-weight:600; margin-top:6px}
  .b-ok{background:rgba(62,207,142,.15); color:var(--ok)}
  .b-warn{background:rgba(255,180,84,.15); color:var(--warn)}
  .b-bad{background:rgba(255,107,107,.15); color:var(--bad)}
  .axis{margin:14px 0 0}
  .axis .lab{display:flex; justify-content:space-between; font-size:13px;
             color:var(--dim); margin-bottom:5px}
  .bar{height:26px; border-radius:8px; background:var(--panel2); overflow:hidden;
       display:flex; position:relative}
  .bar span{display:flex; align-items:center; justify-content:center;
            font-size:12px; font-weight:650; color:#0d1017}
  .bar .mid{position:absolute; left:50%; top:0; bottom:0; width:2px;
            background:rgba(255,255,255,.55)}
  h2{font-size:15px; margin:0 0 10px; font-weight:650}
  .row{display:flex; gap:12px; align-items:center}
  .row img{border-radius:10px; background:#000}
  .meta{font-size:13.5px; color:var(--dim); line-height:1.45}
  .meta b{color:var(--txt); font-weight:600}
  .note{font-size:13px; color:var(--warn); margin:10px 0 0}
  .disc{font-size:12.5px; color:var(--dim); text-align:center; margin:18px 4px 0}
  /* Retour vers la vitrine. En pied et non dans l'en-tête : celui-ci porte déjà l'état de
     connexion à droite, et y glisser un lien sortant le ferait concurrencer le bouton
     « Photographier », qui est la seule chose à faire sur cet écran. */
  /* 12px de padding sur une ligne de 20px : 44px de haut, la cible tactile confortable.
     Ça se consulte à une main, au-dessus d'une carte posée sur la table. */
  .retour{display:block; text-align:center; margin:14px auto 0; padding:12px;
          font-size:13px; color:var(--dim); text-decoration:none}
  .retour:hover, .retour:focus-visible{color:var(--acc)}
  /* inline-block obligatoire : en inline, width/height sont ignorés et le
     cercle s'écrase en une virgule difforme à côté de « Analyse… ». */
  .spin{display:inline-block; width:18px; height:18px; vertical-align:-4px;
        margin-right:8px; border:2.5px solid rgba(255,255,255,.35);
        border-top-color:#fff; border-radius:50%; animation:r .8s linear infinite}
  @keyframes r{to{transform:rotate(360deg)}}
  .hidden{display:none}
  img.shot{width:100%; border-radius:12px; display:block}
  .field{width:100%; padding:14px; border-radius:12px; background:var(--panel2);
         border:1px solid var(--line); color:var(--txt); font:inherit}
  .field:focus{outline:2px solid var(--acc); outline-offset:1px}

  /* --- Visée en direct --- */
  .cam{position:fixed; inset:0; background:#000; z-index:50; overflow:hidden}
  .cam video{position:absolute; inset:0; width:100%; height:100%; object-fit:contain}
  /* Le cadre détecté est peint ici, au-dessus de l'image et sous le guide. */
  #ovl{position:absolute; pointer-events:none}
  /* Le voile est peint par l'ombre portée du cadre : une seule boîte à
     positionner, et la découpe suit toujours exactement le guide. */
  .guide{position:absolute; border:2px solid rgba(255,255,255,.9); border-radius:10px;
         box-shadow:0 0 0 9999px rgba(0,0,0,.55); transition:border-color .2s}
  .guide.level-ok{border-color:var(--ok)}
  .br{position:absolute; width:26px; height:26px; border:4px solid var(--acc)}
  .br.tl{top:-3px; left:-3px; border-right:0; border-bottom:0; border-radius:8px 0 0 0}
  .br.tr{top:-3px; right:-3px; border-left:0; border-bottom:0; border-radius:0 8px 0 0}
  .br.bl{bottom:-3px; left:-3px; border-right:0; border-top:0; border-radius:0 0 0 8px}
  .br.rb{bottom:-3px; right:-3px; border-left:0; border-top:0; border-radius:0 0 8px 0}
  /* Tiers : les lignes servent de repère de parallélisme avec les bords. */
  .grid{position:absolute; inset:0; pointer-events:none}
  .grid i{position:absolute; background:rgba(255,255,255,.28)}
  .grid i:nth-child(1){left:33.33%; top:0; bottom:0; width:1px}
  .grid i:nth-child(2){left:66.66%; top:0; bottom:0; width:1px}
  .grid i:nth-child(3){top:33.33%; left:0; right:0; height:1px}
  .grid i:nth-child(4){top:66.66%; left:0; right:0; height:1px}
  .level{position:absolute; top:calc(14px + env(safe-area-inset-top)); left:50%;
         transform:translateX(-50%); padding:8px 16px; border-radius:999px;
         background:rgba(0,0,0,.6); color:#fff; font-size:13.5px; font-weight:600;
         white-space:nowrap}
  .level.ok{background:rgba(62,207,142,.9); color:#06231a}
  .camhint{position:absolute; left:0; right:0; bottom:132px; margin:0; text-align:center;
           color:rgba(255,255,255,.85); font-size:13.5px; padding:0 24px}
  .cambar{position:absolute; left:0; right:0; bottom:0; height:120px;
          padding-bottom:env(safe-area-inset-bottom); display:flex;
          align-items:center; justify-content:space-between; padding-left:20px;
          padding-right:20px; background:linear-gradient(transparent,rgba(0,0,0,.75))}
  .shutter{width:74px; height:74px; border-radius:50%; background:#fff;
           box-shadow:0 0 0 4px rgba(255,255,255,.35)}
  .shutter:active{transform:scale(.94)}
  .camghost{width:80px; background:none; color:#fff; font-size:15px; text-align:left}