/* BOOTH AI STUDIO — styles site + booth */

.hero {
  background: linear-gradient(135deg, #1a1a2e 0%, #6c2bd9 100%);
}

/* ---------- Écran booth (kiosque) — habillage luxe ---------- */
html.booth, .booth body {
  height: 100%;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  background:
    radial-gradient(70vw 50vh at 80% -10%, rgba(201,169,98,.10), transparent 60%),
    radial-gradient(60vw 45vh at 10% 110%, rgba(201,169,98,.07), transparent 60%),
    #0b0a08;
  color: #f3eee3;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 300;
}

.w-eyebrow {
  font-size: .72rem; font-weight: 500; letter-spacing: .42em;
  text-transform: uppercase; color: #c9a962; margin-bottom: 26px;
}
.w-eyebrow .rule { width: 44px; }
.booth-title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 500; font-size: clamp(2.6rem, 7vw, 4.6rem);
  line-height: 1.08; max-width: 900px;
}
.booth-sub {
  color: #cfc8b8; font-size: clamp(.95rem, 2vw, 1.15rem);
  letter-spacing: .04em; margin-top: 14px;
}
.booth-note { color: #cfc8b8; }
.booth h2 { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; }

/* Boutons du booth : angles droits, or champagne, petites capitales */
.booth .btn {
  border-radius: 0;
  font-size: .78rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  font-weight: 500;
  transition: all .35s;
}
.booth .btn-warning, .booth .btn-success {
  background: #c9a962; border-color: #c9a962; color: #0b0a08;
}
.booth .btn-warning:hover, .booth .btn-success:hover {
  background: #e6cf9a; border-color: #e6cf9a; color: #0b0a08;
}
.booth .btn-outline-light, .booth .btn-outline-secondary {
  background: transparent; border: 1px solid rgba(201,169,98,.35); color: #f3eee3;
}
.booth .btn-outline-light:hover, .booth .btn-outline-secondary:hover,
.booth .demo-tpl.active {
  background: #c9a962; border-color: #c9a962; color: #0b0a08;
}
.booth .form-control {
  background: #0e0d0a; border: 1px solid rgba(201,169,98,.3);
  border-radius: 0; color: #f3eee3;
}
.booth .form-control:focus { border-color: #c9a962; box-shadow: 0 0 0 1px rgba(201,169,98,.3); }

/* ---------- Fond d'accueil (image/vidéo de l'événement) ---------- */
#welcome-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
#welcome-bg img, #welcome-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* plein écran, jamais étiré */
}
#welcome-bg::after {   /* voile pour la lisibilité des textes */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 40%, rgba(11,10,8,.25), rgba(11,10,8,.78));
}
/* le contenu passe au-dessus du fond */
#screen-welcome.has-bg > *:not(#welcome-bg) { position: relative; z-index: 1; }

/* ---------- Animation d'intro (attract screen) ---------- */
#intro-sparks { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
#intro-sparks span {
  position: absolute; color: #e6cf9a; font-size: .8rem; opacity: 0;
  animation: spark-drift linear infinite;
}
@keyframes spark-drift {
  0%   { transform: translateY(20vh) scale(.5); opacity: 0; }
  15%  { opacity: .9; }
  85%  { opacity: .5; }
  100% { transform: translateY(-90vh) scale(1.15) rotate(40deg); opacity: 0; }
}
.intro-on #btn-start {
  animation: cta-pulse 2.4s ease-in-out infinite;
}
@keyframes cta-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201,169,98,.45); transform: scale(1); }
  50%      { box-shadow: 0 0 0 22px rgba(201,169,98,0); transform: scale(1.04); }
}
.intro-on .booth-title {
  background: linear-gradient(100deg, #f3eee3 30%, #e6cf9a 50%, #f3eee3 70%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: title-shine 6s ease-in-out infinite;
}
@keyframes title-shine { 0%,100% { background-position: 0% 0; } 50% { background-position: 100% 0; } }
/* entrée de l'écran d'accueil */
.welcome-enter .w-eyebrow, .welcome-enter .booth-title,
.welcome-enter .booth-sub, .welcome-enter #btn-start {
  animation: rise-in .9s cubic-bezier(.2,.8,.2,1) both;
}
.welcome-enter .booth-title { animation-delay: .12s; }
.welcome-enter .booth-sub   { animation-delay: .24s; }
.welcome-enter #btn-start   { animation-delay: .36s; }
@keyframes rise-in { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

/* ---------- Panneau paramètres démo ---------- */
.params-grid {
  display: grid; gap: 16px; width: min(560px, 92vw);
  grid-template-columns: 1fr 1fr; text-align: left;
}
.params-grid label {
  display: block; font-size: .68rem; letter-spacing: .22em;
  text-transform: uppercase; color: #c9a962;
}
.params-grid label input, .params-grid label select { margin-top: 8px; }
.params-grid .p-check {
  display: flex; align-items: center; gap: 12px;
  font-size: .8rem; letter-spacing: .12em; color: #f3eee3;
  padding-top: 10px;
}
.params-grid .p-check input { width: 20px; height: 20px; accent-color: #c9a962; margin: 0; }
@media (max-width: 640px) { .params-grid { grid-template-columns: 1fr; } }

/* Miroir caméra (selfie) */
.mirror-preview #camera-preview { transform: scaleX(-1); }

/* Filet doré en écrin, comme le site */
.booth-edge {
  position: fixed; inset: 12px;
  border: 1px solid rgba(201,169,98,.28);
  pointer-events: none; z-index: 50;
}

.booth-screen {
  position: fixed;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4vh 4vw;
}
.booth-screen.active { display: flex; }

.booth-btn {
  font-size: 1.6rem;
  padding: .9em 2.2em;
  border-radius: 999px;
  border: none;
}

#countdown-number {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22vh;
  font-weight: 800;
  line-height: 1;
  text-shadow: 0 4px 30px rgba(0,0,0,.7);
  pointer-events: none;
}

/* Scène au ratio EXACT du format d'impression (10×15, 5×15, paysage, carré).
   --stage-ar est posé par booth.js. La caméra remplit la scène en "cover"
   (recadrée, jamais étirée) ; le cadre est à 100% de la scène (même ratio). */
#screen-capture { padding: 0; background: #000; }
#capture-stage {
  position: relative;
  aspect-ratio: var(--stage-ar, 2 / 3);
  /* --stage-r = largeur/hauteur numérique (posé par booth.js).
     La largeur est bornée par l'écran ET par la hauteur × ratio :
     le ratio est TOUJOURS respecté, l'écran letterbox le reste. */
  width: min(100vw, calc(100svh * var(--stage-r, 0.6667)));
  height: auto;
  max-height: 100svh;
  margin: auto;
  overflow: hidden;
  background: #000;
}
@supports not (aspect-ratio: 1) {
  #capture-stage { width: 100vw; height: 100svh; } /* vieux WebView : plein écran */
}
#camera-preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;   /* recadrage centré, aucun étirement */
}
#capture-stage #frame-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;        /* la scène a le ratio du cadre → aucun étirement */
  pointer-events: none;
}

/* Indicateur de pose (Photo 2/3) et flash entre les poses */
#pose-indicator {
  position: absolute;
  top: 18px; left: 50%;
  transform: translateX(-50%);
  padding: 8px 22px;
  border-radius: 999px;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.25);
  font-weight: 700;
  font-size: 1.1rem;
  backdrop-filter: blur(8px);
  z-index: 3;
}
#pose-indicator:empty { display: none; }
#pose-flash {
  position: fixed;
  inset: 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s;
  z-index: 9998;
}

.style-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
  width: 100%;
  max-width: 900px;
  max-height: 60vh;
  overflow-y: auto;
}
.style-card {
  border: 3px solid transparent;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  background: #222;
}
.style-card.selected { border-color: #ffc107; }
.style-card img { width: 100%; aspect-ratio: 2/3; object-fit: cover; }
.style-card .name { padding: .4rem; font-size: .9rem; }

#result-img {
  max-height: 62vh;
  max-width: 90vw;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0,0,0,.6);
}

/* Zone tactile cachée de sortie kiosque (coin haut droit) */
#kiosk-exit-zone {
  position: fixed;
  top: 0; right: 0;
  width: 90px; height: 90px;
  z-index: 9999;
}

/* ---------- Impression : seule la photo sort, proportions préservées ---------- */
#print-area { display: none; }
@media print {
  @page { margin: 0; }
  body > *:not(#print-area) { display: none !important; }
  #print-area { display: block !important; position: static; width: 100%; height: 100vh; }
  #print-area img {
    width: 100%;
    height: 100%;
    object-fit: contain;   /* jamais étiré : letterbox si le papier diffère */
    object-position: center;
  }
}

.spinner-ai {
  width: 6rem; height: 6rem;
  border: .6rem solid rgba(255,255,255,.2);
  border-top-color: #ffc107;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Fil d'étapes 1·2·3 (démo / aperçu) ---------- */
.step-bar {
  position: fixed;
  top: 14px; left: 50%;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(20,18,14,.72);
  border: 1px solid rgba(201,169,98,.35);
  backdrop-filter: blur(6px);
  z-index: 70;
  max-width: 92vw;
}
.step-bar .step-item { display: flex; align-items: center; gap: 8px; opacity: .45; transition: opacity .3s; }
.step-bar .step-item .dot {
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: .85rem; font-weight: 600; color: #e6cf9a;
  border: 1px solid rgba(201,169,98,.5);
}
.step-bar .step-item .lbl { font-size: .8rem; letter-spacing: .04em; color: #efe7d6; white-space: nowrap; }
.step-bar .step-item.active { opacity: 1; }
.step-bar .step-item.active .dot { background: #c9a962; color: #1a1712; border-color: #c9a962; }
.step-bar .step-item.done { opacity: .9; }
.step-bar .step-item.done .dot { background: rgba(201,169,98,.25); }
.step-bar .step-sep { width: 26px; height: 1px; background: rgba(201,169,98,.4); }
@media (max-width: 560px) { .step-bar .step-item .lbl { display: none; } }

/* ---------- Étape 1 : vignettes de templates (forme réelle visible) ---------- */
#frames-grid .style-card img { aspect-ratio: auto; height: 170px; object-fit: contain; background: #151515; }
.style-card-upload {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 200px;
  border: 2px dashed rgba(201,169,98,.5) !important;
  background: #1b1915; color: #e6cf9a;
}
.style-card-upload .upload-plus { font-size: 2.4rem; line-height: 1; margin-bottom: .3rem; }
.style-card-upload .name { color: #e6cf9a; }

/* ---------- Étape 3 : recevoir la photo par email ---------- */
.demo-email { width: 100%; max-width: 460px; text-align: center; }
.demo-email-row { display: flex; gap: 8px; }
.demo-email-row .form-control { flex: 1; }

/* ---------- Bandeau APERÇU opérateur (dernière vérif avant déploiement) ---------- */
#preview-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 80;
  display: flex; align-items: center; gap: 12px;
  padding: 8px 16px;
  background: rgba(20,18,14,.92);
  border-bottom: 1px solid rgba(201,169,98,.4);
  backdrop-filter: blur(6px);
  font-size: .85rem; color: #efe7d6;
}
#preview-banner .pv-tag {
  font-weight: 700; letter-spacing: .12em; color: #1a1712;
  background: #c9a962; padding: 2px 10px; border-radius: 999px;
}
#preview-banner .pv-name { font-weight: 600; }
#preview-banner .pv-wm { color: #e6cf9a; }
#preview-banner .pv-exit { margin-left: auto; color: #efe7d6; text-decoration: none; opacity: .85; }
#preview-banner .pv-exit:hover { opacity: 1; color: #fff; }