/* ===========================
   ENIGMAPP – Styles Front (typographie + UI)
   Tout est scopé dans .enigmapp-app
   =========================== */

/* --- Typographie & couleurs (depuis variables injectées) --- */
.enigmapp-app{
  font-family: var(--ea-font-body);
  font-size: var(--ea-base);
  line-height: var(--ea-lh);
  letter-spacing: var(--ea-letter);
  color: var(--ea-text);
}
.enigmapp-app .muted{ color: var(--ea-muted); }

/* Titres — priorité aux variables serveur (--ea-h1..h6) si présentes,
   sinon fallback avec ratio fixe en CSS (1.25 répété) */
.enigmapp-app h1,.enigmapp-app .h1{
  font-family: var(--ea-font-heading);
  font-size: var(--ea-h1, calc(var(--ea-base) * 1.25 * 1.25 * 1.25 * 1.25 * 1.25));
  line-height:1.1; margin:0 0 .4em;
}
.enigmapp-app h2,.enigmapp-app .h2{
  font-family: var(--ea-font-heading);
  font-size: var(--ea-h2, calc(var(--ea-base) * 1.25 * 1.25 * 1.25 * 1.25));
  line-height:1.15; margin:0 0 .5em;
}
.enigmapp-app h3,.enigmapp-app .h3{
  font-family: var(--ea-font-heading);
  font-size: var(--ea-h3, calc(var(--ea-base) * 1.25 * 1.25 * 1.25));
  line-height:1.2; margin:0 0 .6em;
}
.enigmapp-app h4,.enigmapp-app .h4{
  font-family: var(--ea-font-heading);
  font-size: var(--ea-h4, calc(var(--ea-base) * 1.25 * 1.25));
  margin:0 0 .6em;
}
.enigmapp-app h5,.enigmapp-app .h5{
  font-family: var(--ea-font-heading);
  font-size: var(--ea-h5, calc(var(--ea-base) * 1.25));
  margin:0 0 .6em;
}
.enigmapp-app h6,.enigmapp-app .h6{
  font-family: var(--ea-font-heading);
  font-size: var(--ea-h6, var(--ea-base));
  margin:0 0 .6em;
}

/* Liens */
.enigmapp-app a{ color: var(--ea-accent); text-decoration: none; }
.enigmapp-app a:hover{ text-decoration: underline; }

/* Application des variables de thème */
.enigmapp-app{background:var(--bg);color:var(--fg)}
.enigmapp-box{background:var(--card);border-color:var(--line)}
.enigmapp-box.success{border-color:var(--success)}
.enigmapp-step h3{color:var(--fg)}
.enigmapp-camera video,
.enigmapp-camera img#enigmapp_snapshot{border:1px solid var(--line);background:#000}
.enigmapp-controls .button{border-color:var(--line)}
.enigmapp-controls .button.button-primary{background:var(--accent);border-color:var(--accent);color:#fff}
.enigmapp-app .muted{opacity:var(--muted)}

/* --- Carte contenant l'UI (hérite de la typo ci-dessus) --- */
.enigmapp-app .enigmapp-box{
  background:#fff;
  padding:20px;
  border-radius:8px;
  box-shadow:0 2px 6px rgba(0,0,0,0.08);
}

/* --- Boutons basés sur la palette --- */
.enigmapp-app .button,
.enigmapp-app button{
  background-color: var(--ea-accent);
  border: none;
  border-radius: 8px;
  padding: 10px 16px;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  transition: filter .2s ease-in-out, transform .02s ease-in-out;
  text-decoration: none;
}
.enigmapp-app .button:hover,
.enigmapp-app button:hover{ filter: brightness(1.05); }
.enigmapp-app .button:active,
.enigmapp-app button:active{ transform: translateY(1px); }

/* Variante "primaire" en s'appuyant sur la couleur de texte (foncée) */
.enigmapp-app .button-primary,
.enigmapp-app button.button-primary{
  background-color: var(--ea-text);
  color: #fff;
}
.enigmapp-app button.button-primary:hover{ filter: brightness(1.1); }

/* --- Zone caméra --- */
.enigmapp-app .enigmapp-camera{
  display:flex; flex-direction:column; align-items:center; margin:12px 0;
}
.enigmapp-app .enigmapp-camera video,
.enigmapp-app .enigmapp-camera #enigmapp_snapshot{
  width:100%; max-width:480px; border-radius:8px; display:block; margin:0 auto; background:#000;
}
.enigmapp-app #enigmapp_info{ font-size:.9rem; color: var(--ea-muted); margin:6px 0; }
.enigmapp-app #enigmapp_result{ margin-top:10px; font-weight:700; }

/* --- Champ code scénario --- */
.enigmapp-app form input[type="text"]{
  font-size: 1.2rem;
  letter-spacing: .2em;
  text-align: center;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,.15);
}

/* --- Progression étape --- */
.enigmapp-app .enigmapp-progress{
  width:100%; max-width:480px; margin:8px auto 12px;
}
.enigmapp-app .enigmapp-progress-top{
  display:flex; justify-content:space-between; font-size:.95rem; color:#394150; margin-bottom:6px;
}
.enigmapp-app .enigmapp-progress-bar{
  width:100%; height:8px; border-radius:999px; background:#ececec; overflow:hidden;
}
.enigmapp-app .enigmapp-progress-fill{
  height:100%; width:0%; background: var(--ea-accent); border-radius:999px 0 0 999px; transition: width 300ms ease;
}

/* === Success Modal === */
.enigm-modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.55);z-index:9999}
.enigm-card{background:#fff;border-radius:16px;max-width:560px;width:92%;box-shadow:0 10px 30px rgba(0,0,0,.25);overflow:hidden}
.enigm-card .hd{background:#212937;color:#E8C698;padding:14px 18px;font-weight:600;font-size:18px}
.enigm-card .bd{padding:18px}
.enigm-card .bd img{max-width:100%;height:auto;border-radius:12px;margin-bottom:12px}
.enigm-card .ft{display:flex;gap:10px;justify-content:flex-end;padding:0 18px 18px}
.enigm-btn{appearance:none;border:0;border-radius:10px;padding:10px 16px;cursor:pointer}
.enigm-btn-primary{background:#E8C698;color:#212937;font-weight:700}
.enigm-btn-light{background:#f2f2f2}
@media (prefers-reduced-motion:no-preference){
  .enigm-card{transform:translateY(10px);animation:enigm-pop .18s ease-out both}
  @keyframes enigm-pop{to{transform:translateY(0);}}
}


/* --- Responsive --- */
@media (max-width:600px){
  .enigmapp-app .enigmapp-box{ padding:15px; }
  .enigmapp-app .enigmapp-camera video{ max-width:100%; }
}