/* ══════════════════════════════════════════════════════════
   Quiz Modèles Mentaux — Styles front-end
   Palette : Bleu #1A4D86 · Orange #F7A600 · Beige #F8F5F0 · Navy #040D1B
   ══════════════════════════════════════════════════════════ */

:root {
  --qmm-blue:    #1A4D86;
  --qmm-orange:  #F7A600;
  --qmm-teal:    #239e9a;
  --qmm-red:     #d72c4b;
  --qmm-beige:   #F8F5F0;
  --qmm-navy:    #040D1B;
  --qmm-gray:    #6b7280;
  --qmm-light:   #f3f4f6;
  --qmm-border:  #e5e7eb;
  --qmm-radius:  10px;
  --qmm-shadow:  0 2px 12px rgba(0,0,0,.08);
}

.qmm-wrap {
  max-width: 780px;
  margin: 0 auto;
  font-family: 'Open Sans', Arial, sans-serif;
  color: var(--qmm-navy);
  position: relative;
}

/* ── Écrans ─────────────────────────────────────────────── */
.qmm-screen { animation: qmmFadeIn .3s ease; }
@keyframes qmmFadeIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

/* ── Titre ──────────────────────────────────────────────── */
.qmm-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--qmm-blue);
  margin-bottom: 1rem;
  border-left: 4px solid var(--qmm-orange);
  padding-left: .75rem;
}

/* ── Étape identité ─────────────────────────────────────── */
#qmm-step-identity {
  background: var(--qmm-beige);
  border-radius: var(--qmm-radius);
  padding: 2rem;
  box-shadow: var(--qmm-shadow);
}
.qmm-field { margin-bottom: 1.2rem; }
.qmm-field label { display:block; font-weight:600; margin-bottom:.4rem; }
.qmm-field input {
  width: 100%; max-width: 380px;
  padding: .55rem .8rem;
  border: 1.5px solid var(--qmm-border);
  border-radius: 6px;
  font-size: 1rem;
  transition: border-color .2s;
}
.qmm-field input:focus { outline:none; border-color: var(--qmm-blue); }
.req { color: var(--qmm-red); }
.qmm-rgpd { font-size:.8rem; color: var(--qmm-gray); margin:.5rem 0 1.5rem; }

/* ── Progress bar ───────────────────────────────────────── */
.qmm-progress-wrap {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-bottom: 1.5rem;
}
.qmm-progress-bar {
  flex: 1;
  height: 8px;
  background: var(--qmm-border);
  border-radius: 99px;
  overflow: hidden;
}
#qmm-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--qmm-blue), var(--qmm-orange));
  border-radius: 99px;
  width: 0;
  transition: width .4s ease;
}
#qmm-progress-label { font-size:.85rem; color:var(--qmm-gray); white-space:nowrap; }

/* ── Question ───────────────────────────────────────────── */
.qmm-question {
  background: #fff;
  border-radius: var(--qmm-radius);
  padding: 1.8rem;
  box-shadow: var(--qmm-shadow);
}
.qmm-q-num { font-size:.8rem; color:var(--qmm-gray); margin:0 0 .4rem; text-transform:uppercase; letter-spacing:.05em; }
.qmm-q-texte { font-size: 1.2rem; font-weight: 600; color: var(--qmm-blue); margin: 0 0 1.4rem; line-height:1.45; }

/* ── Options ────────────────────────────────────────────── */
.qmm-options { display:flex; flex-direction:column; gap:.6rem; margin-bottom:1.6rem; }
.qmm-option {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .8rem 1rem;
  border: 2px solid var(--qmm-border);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color .18s, background .18s;
  user-select: none;
}
.qmm-option:hover { border-color: var(--qmm-blue); background: var(--qmm-beige); }
.qmm-option.selected {
  border-color: var(--qmm-blue);
  background: #eaf0f9;
}
.qmm-option[data-letter="nsp"] { border-style: dashed; }
.qmm-option[data-letter="nsp"].selected { border-color:var(--qmm-gray); background:var(--qmm-light); }
.qmm-option input[type="radio"] { display:none; }
.qmm-option-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--qmm-blue);
  color: #fff;
  font-weight: 700;
  font-size: .85rem;
  flex-shrink: 0;
  margin-top: .1rem;
}
.qmm-option[data-letter="nsp"] .qmm-option-letter { background: var(--qmm-gray); }
.qmm-option.selected .qmm-option-letter { background: var(--qmm-orange); color: var(--qmm-navy); }
.qmm-option-label { font-size:.95rem; line-height:1.4; padding-top:.15rem; }

/* ── Navigation ─────────────────────────────────────────── */
.qmm-nav { display:flex; justify-content:space-between; gap:1rem; }

/* ── Boutons ────────────────────────────────────────────── */
.qmm-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .65rem 1.4rem;
  border: none;
  border-radius: 6px;
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .2s, transform .1s;
}
.qmm-btn:disabled { opacity:.4; cursor:not-allowed; }
.qmm-btn:active:not(:disabled) { transform:scale(.97); }
.qmm-btn-primary  { background: var(--qmm-blue);   color:#fff; }
.qmm-btn-primary:hover:not(:disabled)  { background: #163f6e; }
.qmm-btn-secondary { background: var(--qmm-light); color: var(--qmm-navy); border:1.5px solid var(--qmm-border); }
.qmm-btn-secondary:hover:not(:disabled) { background: var(--qmm-border); }

/* ── Résultats ──────────────────────────────────────────── */
#qmm-step-results { padding:0; }
.qmm-intro-results { color:var(--qmm-gray); font-size:.9rem; margin-bottom:1.5rem; line-height:1.5; }

.qmm-mm-block {
  background:#fff;
  border-radius: var(--qmm-radius);
  box-shadow: var(--qmm-shadow);
  padding: 1.2rem 1.4rem;
  margin-bottom: 1rem;
  border-left: 4px solid var(--qmm-border);
  transition: border-color .3s;
}
.qmm-mm-block.level-rigide-fort  { border-left-color: var(--qmm-red); }
.qmm-mm-block.level-rigide-leger { border-left-color: var(--qmm-orange); }
.qmm-mm-block.level-nuance       { border-left-color: #22c55e; }
.qmm-mm-block.level-oppose-leger { border-left-color: var(--qmm-teal); }
.qmm-mm-block.level-oppose-fort  { border-left-color: #7c3aed; }

.qmm-mm-header {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .75rem;
}
.qmm-mm-code {
  background: var(--qmm-blue);
  color:#fff;
  font-size:.75rem;
  font-weight:700;
  padding:.2rem .5rem;
  border-radius:4px;
  flex-shrink:0;
}
.qmm-mm-label { font-weight:600; font-size:1rem; flex:1; }
.qmm-mm-score {
  font-size: 1.2rem;
  font-weight: 800;
  min-width: 44px;
  text-align:right;
}

/* ── Jauge ──────────────────────────────────────────────── */
.qmm-gauge-wrap {
  display:flex;
  align-items:center;
  gap:.5rem;
  margin-bottom:.75rem;
}
.qmm-gauge-pole { font-size:.7rem; color:var(--qmm-gray); white-space:nowrap; }
.qmm-gauge {
  flex:1;
  height:12px;
  background: var(--qmm-light);
  border-radius:99px;
  position:relative;
  overflow:visible;
}
.qmm-gauge-neutral-zone {
  position:absolute;
  top:0; bottom:0;
  left: calc(50% - 10%);
  width: 20%;
  background: rgba(34,197,94,.15);
  border-radius:99px;
}
.qmm-gauge-fill {
  position:absolute;
  top:0; bottom:0;
  border-radius:99px;
  transition: width .6s ease, left .6s ease, background .3s;
}
.qmm-gauge-marker {
  position:absolute;
  top:-4px; bottom:-4px;
  width:4px;
  background: var(--qmm-navy);
  border-radius:2px;
  transition: left .6s ease;
}

/* ── Interprétation ─────────────────────────────────────── */
.qmm-interpretation {
  font-size:.88rem;
  line-height:1.55;
  color:#374151;
  padding:.6rem .8rem;
  background: var(--qmm-beige);
  border-radius:6px;
  display:none;
}
.qmm-interpretation.visible { display:block; }

/* ── Notice NSP ─────────────────────────────────────────── */
.qmm-notice {
  background:#fef9ec;
  border:1px solid var(--qmm-orange);
  border-radius:8px;
  padding:.9rem 1.2rem;
  font-size:.88rem;
  color:#6b4a00;
  margin: 1rem 0;
}

/* ── Actions résultats ──────────────────────────────────── */
.qmm-result-actions {
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
  margin-top:1.5rem;
  padding-top:1rem;
  border-top:1px solid var(--qmm-border);
}

/* ── Spinner ────────────────────────────────────────────── */
.qmm-spinner {
  text-align:center;
  padding:3rem;
  color:var(--qmm-gray);
}
.qmm-spinner-inner {
  width:40px; height:40px;
  border:4px solid var(--qmm-border);
  border-top-color: var(--qmm-blue);
  border-radius:50%;
  animation: qmmSpin .8s linear infinite;
  margin:0 auto 1rem;
}
@keyframes qmmSpin { to { transform:rotate(360deg); } }

/* ── Responsive ─────────────────────────────────────────── */
@media(max-width:540px){
  .qmm-question { padding:1.2rem; }
  .qmm-q-texte  { font-size:1.05rem; }
  .qmm-mm-header { flex-wrap:wrap; }
  .qmm-gauge-pole { display:none; }
  .qmm-result-actions { flex-direction:column; }
  .qmm-btn { width:100%; justify-content:center; }
}