/* Styles spécifiques webcam + compte à rebours (séparés du style global) */

.webcam-box{
  max-width: min(960px, 96vw);
}

.webcam-view{
  background: #0c1018;
  border:1px solid #263049;
  border-radius: 10px;
  overflow: hidden;
}

#webcamVideo{
  display:block;
  width: 100%;
  height: auto;
  max-height: 70vh;
  object-fit: cover;      /* on remplit la box vidéo (aperçu dans la modale) */
  background: #000;
}

.webcam-actions{
  display:flex; gap:8px; align-items:center;
}

/* -------- Compte à rebours plein écran -------- */
.countdown{
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  overflow: hidden;
  /* IMPORTANT : fond noir pour les bandes (lettreboxing) */
  background: #000;
}

.countdown.hidden{
  display: none;
}

/* Vidéo plein écran derrière le chiffre
   -> contain pour respecter STRICTEMENT le 16:9 et afficher des bandes si nécessaire */
#countdownOverlay > video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;    /* <- avant: cover */
  background: #000;       /* arrière-plan de la vidéo, reste noir dans les bandes */
}

/* Assombrissement léger au-dessus de la vidéo (et donc au-dessus des bandes aussi) */
.countdown-scrim{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
  pointer-events: none;
}

/* Chiffre au-dessus de tout */
.countdown-number{
  position: relative;   /* au-dessus de la scrim & vidéo */
  font-family: Inter, Arial, sans-serif;
  font-weight: 800;
  font-size: clamp(80px, 14vw, 220px);
  color: #ffffff;
  text-shadow: 0 12px 40px rgba(0,0,0,0.7);
  line-height: 1;
  transform: scale(1);
  transition: transform 150ms ease;
  pointer-events: none;
}

/* -------- Bouton capture en bas de l'image -------- */
.bottom-capture{
  display:flex;
  justify-content:center;
  align-items:center;
  padding: 16px 0 24px;  /* au-dessus du footer */
}

.camera-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 104px;
  height: 104px;
  border-radius: 9999px;
  border: 2px solid #2b7fff;
  background: var(--primary);
  color: white;
  font-size: 44px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(43, 127, 255, 0.35), inset 0 0 0 2px rgba(255,255,255,0.08);
  transition: transform 80ms ease, filter 120ms ease;
}
.camera-btn:hover{ filter: brightness(1.05); }
.camera-btn:active{ transform: translateY(1px) scale(0.99); }

@media (max-width: 480px){
  .camera-btn{
    width: 88px;
    height: 88px;
    font-size: 38px;
  }
}