/* AubeScreen — page de jumelage vue sur la télé. Toujours sombre, comme le
   lecteur : elle est lue à trois mètres. Un code énorme, un QR, trois
   étapes. Flex seulement (navigateurs de télé souvent anciens). */
:root{
  --accent:#e8632c; --noir:#08090b; --blanc:#f4f4f2; --gris:#9a9da4;
  --ligne:rgba(255,255,255,.14);
  --ui:"Inter",system-ui,sans-serif; --mono:"JetBrains Mono",ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html,body{height:100%}
body.tv{
  background:var(--noir);color:var(--blanc);font-family:var(--ui);
  display:flex;flex-direction:column;overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
.mono{font-family:var(--mono)}

.tv-haut{
  flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  padding:0 3.2vw;height:9vh;min-height:56px;border-bottom:1px solid var(--ligne);
}
.tv-marque{display:flex;align-items:center;gap:1.2vw}
.tv-monogram{position:relative;width:3.6vh;height:3.6vh;border:.35vh solid var(--blanc);border-radius:.6vh}
.tv-monogram::after{content:"";position:absolute;left:18%;right:18%;top:20%;bottom:34%;border:.3vh solid var(--blanc)}
.tv-monogram::before{content:"";position:absolute;left:34%;right:34%;bottom:10%;height:.3vh;background:var(--blanc)}
.tv-marque strong{font-size:clamp(15px,2.3vh,32px);font-weight:700}
.tv-marque span{font-family:var(--mono);font-size:clamp(9px,1.4vh,18px);letter-spacing:.14em;text-transform:uppercase;color:var(--gris);margin-left:.6vw}
.tv-version{font-family:var(--mono);font-size:clamp(10px,1.5vh,18px);color:var(--gris);letter-spacing:.08em}

.tv-corps{flex:1 1 auto;display:flex;align-items:center;gap:4vw;padding:4vh 6vw;min-height:0}
.tv-gauche{flex:1 1 auto;min-width:0;border-left:.9vw solid var(--accent);padding:2vh 0 2vh 3.4vw;position:relative}
.tv-gauche::before{content:"";position:absolute;left:-.9vw;top:8%;bottom:8%;width:.9vw;background:var(--accent);filter:blur(3vh);opacity:.45;pointer-events:none}
.tv-eyebrow{font-family:var(--mono);font-size:clamp(12px,2.1vh,30px);letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:1.6vh}
.tv-code{
  font-family:var(--mono);font-weight:500;line-height:1;letter-spacing:.14em;
  font-size:clamp(54px,15vh,200px);color:var(--gris);white-space:nowrap;
  margin:0 0 2.6vh -.06em;
}
.tv-code.pret{color:var(--blanc)}
.tv-consigne{font-size:clamp(15px,3vh,40px);line-height:1.35;max-width:34ch;color:var(--blanc)}
.tv-consigne .mono{color:var(--accent);white-space:nowrap}
.tv-etapes{list-style:none;margin-top:3.4vh;display:flex;flex-direction:column;gap:1.4vh;counter-reset:etape}
.tv-etapes li{display:flex;align-items:baseline;gap:1.2vw;font-size:clamp(12px,2.2vh,28px);color:var(--gris);counter-increment:etape}
.tv-etapes li::before{content:counter(etape,decimal-leading-zero);font-family:var(--mono);font-size:.85em;color:var(--accent);letter-spacing:.08em}

.tv-droite{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:1.6vh}
.tv-qr{background:#fff;border-radius:1vh;padding:2vh;display:flex;flex-direction:column;align-items:center;gap:1.2vh}
.tv-qr img{width:28vh;height:28vh;display:block}
.tv-qr span{font-family:var(--mono);font-size:clamp(10px,1.6vh,20px);color:#141414;max-width:20ch;text-align:center;line-height:1.35}

.tv-bas{
  flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:2vw;
  padding:0 3.2vw;height:9vh;min-height:56px;border-top:1px solid var(--ligne);
  font-size:clamp(11px,1.8vh,22px);color:var(--gris);
}
.tv-etat{display:flex;align-items:center;gap:1vw;font-family:var(--mono);letter-spacing:.06em}
.tv-etat::before{content:"";width:1.4vh;height:1.4vh;border-radius:50%;background:var(--accent);animation:pouls 2s ease-in-out infinite}
@keyframes pouls{50%{opacity:.25}}
.tv-manuel{display:flex;align-items:center;gap:.8vw;flex-wrap:wrap;justify-content:center}
.tv-manuel label{white-space:nowrap}
.tv-manuel input{
  font-family:var(--mono);font-size:clamp(12px,2vh,24px);letter-spacing:.2em;text-transform:uppercase;
  background:transparent;border:1px solid var(--ligne);color:var(--blanc);padding:.8vh 1vw;width:9ch;text-align:center;border-radius:.4vh;
}
.tv-manuel input:focus{outline:0;border-color:var(--accent)}
.tv-manuel button{
  font-family:var(--ui);font-size:clamp(11px,1.8vh,22px);font-weight:600;color:var(--noir);
  background:var(--blanc);border:0;padding:.9vh 1.4vw;border-radius:.4vh;cursor:pointer;
}
.tv-manuel button:focus{outline:2px solid var(--accent)}
.tv-erreur{color:#e07a7a}
.tv-bas a{color:var(--gris);text-decoration:none;border-bottom:1px solid var(--ligne)}
.tv-bas a:focus,.tv-bas a:hover{color:var(--blanc);border-bottom-color:var(--accent);outline:0}

@media (orientation: portrait){
  .tv-corps{flex-direction:column;align-items:stretch;justify-content:center;padding:4vh 7vw;gap:5vh}
  .tv-gauche{border-left-width:2vw;padding-left:5vw}
  .tv-code{font-size:clamp(44px,18vw,170px)}
  .tv-consigne{font-size:clamp(14px,4.2vw,30px)}
  .tv-etapes li{font-size:clamp(12px,3.4vw,22px)}
  .tv-qr img{width:36vw;height:36vw}
  .tv-bas{flex-direction:column;height:auto;padding:2vh 4vw;gap:1.4vh}
}