:root {
  --marine: #14204a;
  --marine-2: #1f2e66;
  --or: #d8b36a;
  --or-clair: #f0d79c;
  --creme: #f3eee4;
  --texte: #f6f2ea;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Roboto Mono", monospace;
}
* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: #000; color: var(--texte); font-family: var(--sans);
  -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none;
}
#scene-ar { position: fixed; inset: 0; overflow: hidden; isolation: isolate; }
#scene-ar video { object-fit: cover; }
/* voile bleu Mikron entre la vidéo (z-index -2) et la 3D */
/* 8th Wall : son module three.js fixe la taille d'affichage de la toile à sa taille en pixels réels (style.width =
   750px sur un écran de 375 px à densité 2) : l'image était affichée 2 à 3 fois trop grande (« zoom »). On impose la
   taille de l'écran. */
.toile-8thwall { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; }
/* ESSAI (temporaire) : choix du moteur de suivi */
.choix-moteur { margin-top: 22px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.18); }
.choix-moteur p { margin: 0 0 8px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
.choix-boutons { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.choix-boutons .bouton { text-decoration: none; }
html[data-moteur="zappar"] .choix-moteur { display: none; }
.badge-moteur { position: fixed; right: 8px; top: max(8px, env(safe-area-inset-top)); z-index: 16; display: flex; gap: 6px; align-items: center; font: 12px/1.2 system-ui, sans-serif; color: #fff; }
.badge-moteur span { padding: 4px 8px; border-radius: 6px; background: rgba(20,32,74,.75); }
.badge-moteur button { font: inherit; color: #14204a; background: rgba(255,255,255,.9); border: 0; border-radius: 6px; padding: 4px 8px; }
.etiquette-calibrage { position: fixed; left: 8px; top: max(8px, env(safe-area-inset-top)); z-index: 15; padding: 4px 8px; border-radius: 6px; font: 12px/1.3 system-ui, sans-serif; color: #fff; background: rgba(0,51,153,.75); pointer-events: none; }
.bouton-essai-image { position: fixed; right: 8px; top: calc(max(8px, env(safe-area-inset-top)) + 46px); z-index: 16; padding: 6px 10px; border: 0; border-radius: 6px; font: 12px/1 system-ui, sans-serif; color: #fff; background: rgba(0,51,153,.8); }
.diag-camera { position: fixed; left: 8px; top: calc(max(8px, env(safe-area-inset-top)) + 30px); z-index: 15; max-width: 70vw; font: 10px/1.3 system-ui, sans-serif; color: rgba(255,255,255,.85); text-shadow: 0 1px 2px rgba(0,0,0,.6); pointer-events: none; }
.mention-moteur { display: none; position: fixed; right: 8px; bottom: max(6px, env(safe-area-inset-bottom)); z-index: 15; font-size: 10px; color: rgba(255,255,255,.75); text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.mention-moteur a { color: inherit; }
body[data-moteur="8thwall"] .mention-8thwall { display: block; }
.voile-camera { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: #003399; opacity: 0; transition: opacity 0.8s ease; }

.ecran {
  position: fixed; inset: 0; display: none; z-index: 20;
  align-items: center; justify-content: center; text-align: center;
  padding: max(24px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom));
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(216,179,106,0.18), transparent 60%),
    linear-gradient(180deg, var(--marine-2), var(--marine));
}
.ecran.visible { display: flex; }
.accueil-contenu { max-width: 360px; }
.marque { letter-spacing: 0.08em; font-size: 13px; margin: 0 0 40px; color: #c9cfe6; }
.marque-gras { font-weight: 800; color: #fff; }
h1 {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 46px; line-height: 1.02; margin: 0; color: var(--or-clair);
}
h2 { font-family: var(--serif); font-weight: 400; font-size: 30px; margin: 0 0 12px; color: var(--or-clair); }
.annee {
  font-family: var(--mono); font-size: 18px; letter-spacing: 0.6em; margin: 14px 0 36px; padding-left: 0.6em;
  color: #fff;
}
.consigne { font-size: 15px; line-height: 1.5; color: #dfe3f2; margin: 0 0 28px; }
.mention { font-size: 12px; color: #9aa3c7; margin: 28px 0 0; line-height: 1.5; }
.avertissement { font-size: 13px; color: var(--or-clair); margin-top: 14px; }
.bouton {
  appearance: none; border: 0; border-radius: 999px; cursor: pointer;
  background: linear-gradient(180deg, #f1d79d, #c99d4f); color: var(--marine);
  font: 700 16px/1 var(--sans); letter-spacing: 0.04em; padding: 17px 44px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.6);
}
.bouton:active { transform: translateY(1px); }
.bouton.petit { padding: 12px 22px; font-size: 14px; }
.bouton.secondaire { background: rgba(20,32,74,0.85); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25); }
.lien { display: block; margin: 18px auto 0; background: none; border: 0; color: #c9cfe6; font: 14px var(--sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* Chargement */
#chargement p { color: #c9cfe6; font-size: 14px; letter-spacing: 0.05em; margin-top: 18px; }
#chargement { flex-direction: column; }
.rouage {
  width: 44px; height: 44px; border-radius: 50%;
  border: 3px solid rgba(216,179,106,0.25); border-top-color: var(--or);
  animation: tourne 0.9s linear infinite;
}
@keyframes tourne { to { transform: rotate(360deg); } }

/* Viseur */
.viseur {
  position: fixed; inset: 0; z-index: 10; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.viseur[hidden] { display: none; }
.viseur .cadre { position: relative; width: min(78vw, 420px); aspect-ratio: 1264 / 848; }
.viseur .cadre i { position: absolute; width: 28px; height: 28px; border: 3px solid rgba(255,255,255,0.9); }
.viseur .cadre i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; border-top-left-radius: 8px; }
.viseur .cadre i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; border-top-right-radius: 8px; }
.viseur .cadre i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; border-bottom-left-radius: 8px; }
.viseur .cadre i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; border-bottom-right-radius: 8px; }
.viseur .cadre { animation: respire 2s ease-in-out infinite; }
@keyframes respire { 50% { transform: scale(0.96); opacity: 0.7; } }
.viseur p {
  margin-top: 22px; font-size: 15px; font-weight: 600; color: #fff;
  background: rgba(20,32,74,0.7); padding: 10px 18px; border-radius: 999px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}

/* Bandeau bas */
.bandeau {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 12;
  bottom: max(18px, env(safe-area-inset-bottom)); width: min(92vw, 440px);
  background: rgba(20,32,74,0.82); border: 1px solid rgba(216,179,106,0.45);
  border-radius: 16px; padding: 12px 16px; text-align: center;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-size: 14px; line-height: 1.45; color: #e9ecf7;
  transition: opacity 0.4s;
}
.bandeau[hidden] { display: none; }
.bandeau strong { color: var(--or-clair); font-weight: 700; }
.bandeau .compte { font-family: var(--mono); font-size: 17px; color: #fff; letter-spacing: 0.02em; }

/* Commandes aperçu */
.commandes {
  position: fixed; z-index: 13; right: 16px; top: max(16px, env(safe-area-inset-top));
  display: flex; gap: 10px;
}
.commandes[hidden] { display: none; }

/* Masque l'interface MindAR par défaut */
.mindar-ui-overlay { display: none !important; }