@font-face { font-family: Gloock; src: url(../fonts/gloock-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: Cabin; src: url(../fonts/cabin-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: Cabin; src: url(../fonts/cabin-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: Cabin; src: url(../fonts/cabin-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: Cabin; src: url(../fonts/cabin-latin-700-normal.woff2) format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --paper: #e7ecde;
  --ink: #26362b;
  --green: #2f4a38;
  --wire: #6d7f63;
  --bulb: #d98a24;
  --serif: Gloock, Georgia, serif;
  --sans: Cabin, "Gill Sans", sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  position: fixed;
  inset: 0;
  margin: 0;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}

p, h1 { margin: 0; }
button, input { font-family: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { opacity: 0.5; }
input { -webkit-user-select: text; user-select: text; }

/* Scène de 1180x820 mise à l'échelle par main.js. */
#stage {
  position: absolute;
  left: 0;
  top: 0;
  width: 1180px;
  height: 820px;
  overflow: hidden;
  transform-origin: 0 0;
}

.screen { position: absolute; inset: 0; }

.garland { position: absolute; left: 0; top: 0; width: 1180px; height: 150px; display: block; }
.garland path { fill: none; }
.garland .wire { stroke: var(--wire); stroke-width: 2; }
.garland .bulbs { stroke: var(--bulb); stroke-width: 15; stroke-linecap: round; stroke-dasharray: 0 52; }

/* Accueil */
.home-grid {
  position: absolute;
  inset: 150px 64px 56px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 440px;
  gap: 56px;
  align-items: center;
}
.home-title { font-family: var(--serif); font-weight: 400; font-size: 124px; line-height: 0.98; }
.home-edition { margin-top: 28px; font-size: 28px; font-weight: 600; }
.home-tagline { margin-top: 10px; font-size: 24px; }
.counts { display: flex; flex-direction: column; gap: 14px; }
.counts-question { margin-bottom: 4px; font-size: 24px; font-weight: 600; }
.count {
  height: 96px;
  background: #ffffff;
  border: 2px solid var(--green);
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 28px;
  font-size: 26px;
  font-weight: 600;
}
.count:active { background: var(--paper); }
.icon { width: 48px; height: 48px; flex: none; display: grid; gap: 4px; }
.icon i { background: var(--green); }
.icon-2, .icon-3, .icon-4 { grid-template-columns: 1fr 1fr; }
.icon-3 { grid-template-rows: 2fr 1fr; }
.icon-3 i:first-child { grid-column: 1 / 3; }
.icon-4 { grid-template-rows: 1fr 1fr; }
#queue-status { position: absolute; left: 64px; bottom: 22px; font-size: 17px; }

/* Prise de vue */
.capture-grid {
  position: absolute;
  inset: 104px 56px 48px;
  display: grid;
  grid-template-columns: 790px minmax(0, 1fr);
  gap: 40px;
  align-items: center;
}
.viewfinder { position: relative; height: 640px; padding: 18px; background: #ffffff; }
#video { display: block; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); background: var(--ink); }
#flash { position: absolute; inset: 18px; background: #ffffff; opacity: 0; pointer-events: none; }
#flash.on { animation: flash 350ms ease-out; }
@keyframes flash { from { opacity: 1; } to { opacity: 0; } }
.capture-side { display: flex; flex-direction: column; align-items: flex-start; }
#capture-progress { font-size: 26px; font-weight: 600; }
#capture-count { margin-top: 8px; height: 240px; font-family: var(--serif); font-size: 240px; line-height: 1; }
#capture-hint { margin-top: 8px; font-size: 24px; }

/* Résultat */
.result-grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 560px minmax(0, 1fr);
  gap: 72px;
  padding: 48px 72px;
  align-items: center;
}
/* Plus haut que le formulaire : la colonne rend ses marges pour garder le tirage grand. */
.print-side { margin-block: -28px; display: flex; flex-direction: column; justify-content: center; gap: 18px; min-height: 0; }
.print-slot { display: flex; justify-content: center; }
#print {
  display: block;
  max-width: 560px;
  max-height: 646px;
  transform: rotate(-1.5deg);
  box-shadow: 0 10px 24px rgba(38, 54, 43, 0.22);
  /* Pas d'appui long : pas de partage ni d'enregistrement de la photo depuis le menu de Safari. */
  pointer-events: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
}
#effects { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.effect {
  height: 104px;
  padding: 4px 4px 0;
  overflow: hidden;
  background: #ffffff;
  border: 2px solid var(--green);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  font-size: 17px;
  font-weight: 600;
}
.effect[aria-pressed="true"] { background: var(--green); color: #ffffff; }
.effect img {
  display: block;
  width: 100%;
  height: 68px;
  object-fit: cover;
  object-position: top;
  pointer-events: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
}
/* Discret si les miniatures arrivent vite, visible sinon. Le formulaire reste disponible. */
.effect:disabled img { background: var(--paper); }
#effects-wait {
  position: absolute;
  left: calc(25% + 3px);
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  padding: 4px 10px;
  background: #ffffff;
  text-align: center;
  font-size: 17px;
  font-weight: 600;
  pointer-events: none;
  opacity: 0;
  animation: effects-wait 1ms 300ms forwards;
}
@keyframes effects-wait { to { opacity: 1; } }
/* Calé en haut sur une ligne de titre : le champ reste au-dessus du clavier de l'iPad. */
.send { align-self: start; margin-top: -4px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.send h1 { font-family: var(--serif); font-weight: 400; font-size: 42px; line-height: 1.05; white-space: nowrap; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: 21px; font-weight: 600; }
#email, #install-token {
  width: 100%;
  height: 64px;
  padding: 0 16px;
  border: 2px solid var(--green);
  border-radius: 6px;
  background: #ffffff;
  font-size: 22px;
}
.primary { height: 72px; border: 0; border-radius: 6px; background: var(--green); color: #ffffff; font-size: 24px; font-weight: 700; }
.secondary { height: 72px; border: 2px solid var(--green); border-radius: 6px; background: #ffffff; font-size: 24px; font-weight: 700; }
.link { height: 56px; border: 0; background: none; font-size: 21px; font-weight: 600; text-decoration: underline; }
.legal { font-size: 14px; line-height: 1.3; }
#send-message { font-size: 18px; font-weight: 600; line-height: 1.4; }
#send-message:empty { display: none; }

/* Message : envoi, file d'attente, erreur */
.notice-body {
  position: absolute;
  inset: 150px 200px 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
}
.notice-body h1 { font-family: var(--serif); font-weight: 400; font-size: 64px; line-height: 1.05; }
#notice-lines { display: flex; flex-direction: column; gap: 10px; font-size: 26px; line-height: 1.35; }
.notice-body .primary { align-self: flex-start; min-width: 280px; padding: 0 32px; }

#confirm-address { font-size: 44px; font-weight: 700; line-height: 1.15; overflow-wrap: anywhere; }
.confirm-actions { display: flex; gap: 20px; }
.confirm-actions button { min-width: 280px; padding: 0 32px; }
#confirm-message { min-height: 26px; font-size: 20px; font-weight: 600; }

/* En haut : reste visible au-dessus du clavier de l'iPad. */
#idle-countdown { position: absolute; right: 72px; top: 8px; padding: 0 10px; background: var(--paper); font-size: 20px; font-weight: 700; }

/* Bandeau de l'accueil : aucun jeton sur cet iPad. */
#readiness {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  padding: 6px 16px;
  background: #8c1d18;
  color: #ffffff;
  font-size: 24px;
  font-weight: 700;
  text-align: center;
}

/* Installation : hors du parcours invité, tout reste au-dessus du clavier de l'iPad. */
.install-body {
  position: absolute;
  inset: 24px 200px auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.install-body h1 { font-family: var(--serif); font-weight: 400; font-size: 44px; line-height: 1.05; }
#install-message { min-height: 24px; font-size: 18px; font-weight: 600; line-height: 1.3; }
.install-actions { display: flex; gap: 14px; }
.install-actions button { flex: 1; padding: 0 12px; font-size: 20px; }
.install-body .link { align-self: flex-start; }

/* Portrait : on garde la vidéo vivante derrière l'écran de rotation. */
#rotate {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 48px;
  background: var(--paper);
  font-family: var(--serif);
  font-size: 44px;
  line-height: 1.15;
  text-align: center;
}
@media (orientation: portrait) {
  #rotate { display: flex; }
}