:root {
  --vert: #2e7d32;
  --vert-clair: #e8f5e9;
  --rouge: #c62828;
  --gris: #607d8b;
  --texte: #1b1b1b;
  --fond: #f4f5f7;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--texte);
  background: var(--fond);
}

/* ============================ ÉCRAN KIOSQUE ============================ */
/* Style clair « carte » (comme la page de démo), QR dominant + étapes. */
body.ecran {
  background: #eef1ef;                 /* gris-vert clair, choisi */
  color: #15201b;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.5vw;
  padding: 2.5vh 2.5vw;
}
.ecran-carte {
  background: #fff;
  border: 1px solid #d9e0dc;
  border-radius: 22px;
  box-shadow: 0 18px 50px -24px rgba(21, 32, 27, .45);
  padding: 2.4vh 2.4vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2vh;
  max-height: 96vh;
}
.ecran-head {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 2vw;
  margin-bottom: .4vh;
}
.eyebrow {
  font-size: 2vh; letter-spacing: .12em; text-transform: uppercase;
  color: var(--vert); font-weight: 700;
}
.horloge { font-size: 3.4vh; font-variant-numeric: tabular-nums; font-weight: 600; }

.qr-tile {
  position: relative;
  background: #fff; border-radius: 14px; display: flex;
  width: min(56vh, 82vw); aspect-ratio: 1 / 1;
}
#qr { width: 100%; height: 100%; }
#qr svg { width: 100%; height: 100%; display: block; }

/* Logo maison + nom du site au centre du QR (correction H compense). */
.qr-logo {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: #fff; border-radius: 12px; padding: 1vh 1.3vh;
  display: flex; flex-direction: column; align-items: center; gap: .3vh;
  box-shadow: 0 2px 10px rgba(21, 32, 27, .18); line-height: 1;
}
.qr-logo .maison { width: 4.4vh; height: 4.4vh; fill: var(--vert); display: block; }
.qr-logo-nom { font-size: 1.8vh; font-weight: 800; color: #15201b; letter-spacing: .3px; }

.barre-wrap {
  width: min(56vh, 82vw); height: 1.2vh; min-height: 8px;
  background: #e3e8e5; border-radius: 6px; overflow: hidden;
}
.barre { height: 100%; width: 100%; background: linear-gradient(90deg, #66bb6a, #2e7d32); border-radius: 6px; }

.consigne { font-size: 2.3vh; color: #15201b; font-weight: 600; text-align: center; margin: .4vh 0 0; }

.etapes {
  list-style: none; margin: .4vh 0 0; padding: 0;
  display: flex; flex-direction: column; gap: .8vh; width: min(56vh, 82vw);
}
.etapes li { display: flex; gap: 1vw; align-items: flex-start; font-size: 1.9vh; line-height: 1.35; color: #384a41; }
.etapes .num {
  flex: 0 0 auto; width: 2.6vh; height: 2.6vh; min-width: 20px; min-height: 20px;
  border-radius: 50%; background: var(--vert); color: #fff;
  font-size: 1.5vh; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.erreur { color: var(--rouge); margin-top: .5vh; font-size: 2vh; }

.derniers {
  background: #f4f7f5; border: 1px solid #e0e6e2; border-radius: 16px;
  padding: 2vh 1.6vw; width: 26vw; max-width: 340px; max-height: 92vh; overflow: hidden;
}
.derniers h2 { margin: 0 0 1.4vh; font-size: 2.2vh; font-weight: 700; color: var(--gris); }
.derniers ul { list-style: none; margin: 0; padding: 0; }
.derniers li {
  display: flex; align-items: center; gap: .8vw;
  padding: 1.3vh 0; border-bottom: 1px solid #e6ece8; font-size: 2.2vh;
}
.derniers .nom { flex: 1; }
.derniers .h   { font-variant-numeric: tabular-nums; color: var(--gris); }
.derniers .vide { color: #9fb0a8; }
.sens { font-weight: 700; }
.sens.entree { color: var(--vert); }
.sens.sortie { color: var(--rouge); }

/* Petit écran / portrait : QR + étapes seulement, on masque les derniers. */
@media (max-width: 820px), (max-height: 560px) {
  .derniers { display: none; }
  body.ecran { padding: 1.5vh 1.5vw; }
  .qr-tile, .barre-wrap, .etapes { width: min(70vh, 90vw); }
}

/* ============================== SCAN =============================== */
body.scan {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  padding: 0 18px 32px;
}
.scan-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
}
.marque { font-weight: 700; color: var(--vert); }
.lien-logout {
  background: none; border: none; color: var(--gris);
  font-size: 14px; text-decoration: underline; cursor: pointer;
}

.vue { padding-top: 8px; }
.vue h1 { font-size: 22px; margin: 8px 0 20px; }

label { display: block; font-size: 14px; color: #555; margin: 16px 0 6px; }
select, input {
  width: 100%; padding: 14px; font-size: 17px;
  border: 1px solid #cfd8dc; border-radius: 10px; background: #fff;
}
#inp-otp { letter-spacing: 12px; text-align: center; font-size: 28px; }

.btn-primaire, .btn-secondaire {
  width: 100%; padding: 15px; font-size: 17px; font-weight: 600;
  border: none; border-radius: 10px; margin-top: 22px; cursor: pointer;
}
.btn-primaire   { background: var(--vert); color: #fff; }
.btn-secondaire { background: #fff; color: var(--gris); border: 1px solid #cfd8dc; }

.bonjour { font-size: 16px; color: #555; }
.cam-wrap {
  position: relative; margin-top: 12px;
  border-radius: 14px; overflow: hidden; background: #000;
  aspect-ratio: 1 / 1;
}
#video { width: 100%; height: 100%; object-fit: cover; display: block; }
.cible {
  position: absolute; inset: 18%;
  border: 3px solid rgba(255,255,255,.85); border-radius: 14px;
  box-shadow: 0 0 0 100vmax rgba(0,0,0,.25);
}
.consigne { text-align: center; color: #607d8b; margin-top: 14px; }

.msg {
  margin-top: 14px; padding: 12px; border-radius: 10px;
  background: var(--vert-clair); color: var(--vert); text-align: center; font-weight: 600;
}
.msg.err { background: #fdecea; color: var(--rouge); }

/* Confirmation */
#vue-ok { text-align: center; padding-top: 40px; }
.pastille {
  width: 92px; height: 92px; border-radius: 50%;
  background: var(--vert); color: #fff;
  font-size: 52px; line-height: 92px; margin: 0 auto 18px;
}
.ok-titre { font-size: 22px; font-weight: 700; margin: 0 0 14px; }

/* Écran de fin après « Fermer » (si le navigateur ne ferme pas l'onglet) */
.termine {
  min-height: 80vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; gap: 6px;
}
.fin-titre { font-size: 22px; font-weight: 700; }
.fin-sous { color: #607d8b; }
.ok-detail { font-size: 18px; line-height: 1.7; }
.ok-detail .sens { font-size: 20px; }
.ok-site { color: var(--gris); font-size: 15px; }

/* --- Bannière message perso au badgage --- */
.greeting{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(15,23,42,.55);backdrop-filter:blur(3px);z-index:50;
  opacity:0;transition:opacity .35s ease;pointer-events:none}
.greeting.show{opacity:1}
.greeting .g-msg{font-size:clamp(28px,6vw,64px);font-weight:800;line-height:1.15;text-align:center;
  color:#fff;padding:.6em 1em;border-radius:24px;max-width:90%;
  background:linear-gradient(135deg,#16a34a,#15803d);box-shadow:0 20px 60px rgba(0,0,0,.35);
  transform:scale(.9);transition:transform .35s cubic-bezier(.2,.9,.3,1.4)}
.greeting.show .g-msg{transform:scale(1)}
.greeting.sortie .g-msg{background:linear-gradient(135deg,#2563eb,#1e40af)}

/* --- Scène thématique par site (remplace la barre de progression) --- */
.scene{width:100%;height:72px;margin:6px 0 2px}
.sc-svg{width:100%;height:100%;display:block;overflow:visible}

/* Scierie : la scie traverse le billon */
.scene-scierie .log{fill:#c68a4e;stroke:#a06a34;stroke-width:1}
.scene-scierie .log-end{fill:#d9a76b;stroke:#a06a34;stroke-width:1}
.scene-scierie .log-ring{fill:none;stroke:#a06a34;stroke-width:1}
.scene-scierie .blade{stroke:#5b6470;stroke-width:2}
.scene-scierie .teeth{fill:none;stroke:#5b6470;stroke-width:1.5}
.scene-scierie .handle{fill:#b91c1c}
.scene-scierie .saw{transform:translateX(80px)}
.scene-scierie.run .saw{animation:sc-saw var(--dur,18s) linear both}
@keyframes sc-saw{from{transform:translateX(80px)}to{transform:translateX(320px)}}

/* Bureau : parchemin manuscrit qui se deroule */
.scene-bureaux{height:120px}
.scene-bureaux .parch{display:block;width:100%;height:100%;object-fit:contain;clip-path:inset(0 100% 0 0)}
.scene-bureaux.run .parch{animation:parch-unroll var(--dur,18s) ease-out both}
@keyframes parch-unroll{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}}

/* Vologne : la maison bois se construit planche par planche */
.scene-vologne .ground{stroke:#a06a34;stroke-width:2}
.scene-vologne .brick{fill:#c68a4e;stroke:#a06a34;stroke-width:1}
.scene-vologne .roof{fill:#8a4b2a}
.scene-vologne .door{fill:#5b3a1e}
.scene-vologne .brick,.scene-vologne .roof,.scene-vologne .door{opacity:0;transform-box:fill-box;transform-origin:bottom center}
.scene-vologne.run .brick,.scene-vologne.run .roof,.scene-vologne.run .door{animation:vo-build calc(var(--dur,18s)/6) ease both;animation-delay:calc(var(--dur,18s)/6*var(--i))}
@keyframes vo-build{from{opacity:0;transform:translateY(8px) scaleY(.2)}to{opacity:1;transform:none}}