/* =========================================================
   Module QCM, pages publiques de passation
   Complète /css/style.css, dont il réutilise les variables.
   ========================================================= */

.hero--app { padding: 2.6rem 0 2.6rem; }
.hero--app h1 {
  color: var(--color-white);
  margin: 0 0 .4rem;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  position: relative;
}
.hero--app .hero__subtitle {
  font-size: 1rem; opacity: .92; margin: 0; max-width: 720px; position: relative;
}

main.contenu-app {
  max-width: 860px;
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
}

footer.footer-app {
  border-top: 1px solid rgba(65, 118, 166, 0.12);
  padding: 1.5rem 1.5rem 2rem;
  text-align: center;
  color: var(--color-muted);
  font-size: .82rem;
  background: var(--color-white);
}

.carte {
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: 1.8rem;
  box-shadow: var(--shadow-soft);
  margin-bottom: 1.5rem;
}
.carte > h2 { color: var(--color-primary); margin: 0 0 1rem; font-size: 1.2rem; }

/* --- Boutons -------------------------------------------------------- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .65rem 1.4rem;
  border-radius: 999px;
  font-family: inherit; font-size: .95rem; font-weight: 600;
  border: 2px solid var(--color-primary);
  background: var(--color-primary); color: var(--color-white);
  text-decoration: none; cursor: pointer;
  transition: transform .15s ease, background .15s ease, color .15s ease;
}
.bouton:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); color: var(--color-white); transform: translateY(-1px); }
.bouton:disabled { opacity: .6; cursor: progress; transform: none; }
.bouton.orange { background: var(--color-accent); border-color: var(--color-accent); }
.bouton.orange:hover { background: var(--color-accent-dark); border-color: var(--color-accent-dark); }
.bouton.secondaire { background: var(--color-white); color: var(--color-primary); }
.bouton.secondaire:hover { background: var(--color-primary); color: var(--color-white); }
.bouton.large { width: 100%; padding: .9rem 1.4rem; font-size: 1.02rem; }

/* --- Formulaires ---------------------------------------------------- */
.champ { margin-bottom: 1rem; }
.champ label { display: block; font-weight: 500; margin-bottom: .35rem; font-size: .92rem; }
.champ input, .champ select, .champ textarea {
  width: 100%; padding: .7rem .9rem;
  border: 1px solid rgba(0, 39, 122, 0.18); border-radius: var(--radius-sm);
  font-family: inherit; font-size: 1rem; color: var(--color-text); background: var(--color-white);
}
.champ input:focus, .champ select:focus, .champ textarea:focus {
  outline: none; border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0, 57, 179, 0.12);
}
.champ .facultatif { color: var(--color-muted); font-weight: 400; font-size: .85rem; }

.grille-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.2rem; }
@media (max-width: 560px) { .grille-2 { grid-template-columns: 1fr; } }

.champ-code input {
  text-transform: uppercase; letter-spacing: .35em; text-align: center;
  font-size: 1.5rem; font-weight: 700; padding: .9rem .5rem;
}

/* --- Encarts -------------------------------------------------------- */
.encart-info, .encart-erreur, .encart-succes {
  padding: 1rem 1.2rem; border-radius: var(--radius-sm);
  margin: 1rem 0; font-size: .93rem;
  border-left: 4px solid var(--color-primary);
  background: var(--color-primary-light);
}
.encart-erreur { background: #fbeae6; border-left-color: #b5503a; color: #8a3826; }
.encart-succes { background: #d9efe5; border-left-color: #009353; color: #00733f; }

.pastille {
  display: inline-block; padding: .25rem .8rem; border-radius: 999px;
  font-size: .76rem; font-weight: 600; letter-spacing: .3px;
  background: var(--color-primary-light); color: var(--color-primary);
}

/* --- Fiche de présentation ------------------------------------------ */
.liste-infos { list-style: none; padding: 0; margin: 1.2rem 0; }
.liste-infos li {
  padding: .55rem .9rem; background: var(--color-light-bg);
  border-radius: var(--radius-sm); margin-bottom: .35rem; font-size: .93rem;
}
.liste-infos li strong { color: var(--color-primary); }

/* --- Passation ------------------------------------------------------ */
.entete-passation {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem;
}
.entete-passation .identite { color: var(--color-muted); font-size: .92rem; }

.chrono {
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 1.5rem; font-weight: 700;
  color: var(--color-primary); background: var(--color-white);
  border: 2px solid var(--color-primary); border-radius: var(--radius-sm);
  padding: .35rem 1.1rem; min-width: 120px; text-align: center;
}
.chrono.vigilance { color: #B86E1F; border-color: #B86E1F; }
.chrono.alerte { color: #b5503a; border-color: #b5503a; animation: pulsation 1s infinite; }
@keyframes pulsation { 50% { opacity: .5; } }

.progression {
  position: sticky; top: 0; z-index: 20;
  height: 6px; border-radius: 3px; overflow: hidden;
  background: rgba(0, 39, 122, 0.10); margin-bottom: 1.5rem;
}
.progression span {
  display: block; height: 100%; width: 0;
  background: var(--color-accent); transition: width .25s ease;
}

fieldset.question {
  background: var(--color-white);
  border: 0; border-left: 4px solid rgba(0, 39, 122, 0.14);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  padding: 1.4rem 1.6rem; margin: 0 0 1.2rem;
}
fieldset.question.repondue { border-left-color: var(--color-accent); }
fieldset.question legend {
  display: flex; justify-content: space-between; width: 100%; padding: 0;
  font-size: .74rem; text-transform: uppercase; letter-spacing: .8px; color: var(--color-muted);
}
fieldset.question legend .points { color: var(--color-primary); font-weight: 700; }
.enonce { font-size: 1.08rem; font-weight: 600; color: var(--color-dark); margin: .6rem 0 .25rem; }
.consigne { font-size: .85rem; color: var(--color-muted); font-style: italic; margin: 0 0 1rem; }

.propositions { display: flex; flex-direction: column; gap: .5rem; }
.proposition {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: .75rem .95rem;
  border: 1px solid rgba(0, 39, 122, 0.16); border-radius: var(--radius-sm);
  cursor: pointer; font-size: .96rem;
  transition: background .15s ease, border-color .15s ease;
}
.proposition:hover { background: var(--color-light-bg); border-color: var(--color-primary); }
.proposition input { width: auto; margin: .3rem 0 0; flex-shrink: 0; }
.proposition:has(input:checked) { background: var(--color-primary-light); border-color: var(--color-primary); }

.actions-passation { text-align: center; margin-top: 1.8rem; }
.actions-passation .mention { color: var(--color-muted); font-size: .85rem; margin-top: .8rem; }

/* --- Résultat ------------------------------------------------------- */
.bandeau-score { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; border-left: 6px solid; }
.bandeau-score.acquis { border-left-color: #009353; }
.bandeau-score.a-revoir { border-left-color: #B86E1F; }
.score-chiffre { font-size: 3.4rem; font-weight: 800; line-height: 1; color: var(--color-primary); }
.bandeau-score.acquis .score-chiffre { color: #009353; }
.bandeau-score.a-revoir .score-chiffre { color: #B86E1F; }
.score-detail p { margin: .15rem 0; font-size: .94rem; }
.score-detail .verdict { font-weight: 700; margin-top: .4rem; }

.bloc-correction {
  background: var(--color-white); border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft); padding: 1.3rem 1.5rem; margin-bottom: 1rem;
  border-left: 4px solid;
}
.bloc-correction.juste { border-left-color: #009353; }
.bloc-correction.partielle { border-left-color: #B86E1F; }
.bloc-correction.fausse { border-left-color: #b5503a; }
.entete-correction {
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  font-size: .74rem; text-transform: uppercase; letter-spacing: .8px; color: var(--color-muted);
}
.pastille.juste { background: #d9efe5; color: #009353; }
.pastille.partielle { background: #FFF4E5; color: #B86E1F; }
.pastille.fausse { background: #fbeae6; color: #b5503a; }

ul.correction { list-style: none; padding: 0; margin: .9rem 0 0; }
ul.correction li {
  display: flex; gap: .7rem; align-items: baseline;
  padding: .55rem .85rem; border-radius: var(--radius-sm);
  margin-bottom: .3rem; background: var(--color-light-bg); font-size: .95rem;
}
ul.correction li.attendue { background: #d9efe5; }
ul.correction li.erreur { background: #fbeae6; }
ul.correction .marque { font-weight: 700; width: 1rem; flex-shrink: 0; }
ul.correction li.attendue .marque { color: #009353; }
ul.correction li.erreur .marque { color: #b5503a; }
ul.correction .choix {
  margin-left: auto; font-size: .7rem; text-transform: uppercase;
  letter-spacing: .5px; color: var(--color-muted); white-space: nowrap;
}

.explication {
  background: var(--color-primary-light); border-radius: var(--radius-sm);
  padding: .9rem 1.1rem; margin-top: .9rem; font-size: .94rem;
}
.explication strong {
  display: block; font-size: .72rem; text-transform: uppercase;
  letter-spacing: .8px; color: var(--color-primary); margin-bottom: .25rem;
}

@media print {
  .site-header, .footer-app, .bouton, .hero { display: none !important; }
  .carte, .bloc-correction { box-shadow: none; border: 1px solid #ddd; break-inside: avoid; }
  main.contenu-app { padding-top: 0; max-width: none; }
}