/* Parcours public (ticket 21) : présentation de la page de pratique de speech (gabarit demo.html,
   lignes 9 à 36), au-dessus de Bootstrap 5.1.3 servi depuis app/static/. Aucune ressource extérieure. */
body.parcours { background: #eef1f6; font-family: 'Segoe UI', system-ui, sans-serif; color: #1a1a2e; }
.wrap { max-width: 760px; margin: 0 auto; padding: 1.5rem 1rem 6rem; }
.wrap.wrap-large { max-width: 1140px; }
.card2 { background: #fff; border-radius: 16px; box-shadow: 0 4px 24px rgba(0,0,0,.07); padding: 1.5rem; margin-bottom: 1.1rem; }
.brand { font-weight: 700; letter-spacing: -.01em; }
.brand small { color: #6b7280; font-weight: 400; font-size: .8rem; }
.phrase-card { border: 1px solid #e5e7eb; border-radius: 12px; padding: .9rem 1.1rem; margin-bottom: .6rem; background: #fff; }
.big-phrase { font-size: 1.7rem; font-weight: 600; line-height: 1.35; margin: 1rem 0 0; }
#onde { display: block; width: 100%; height: 46px; border-radius: 8px; background: #f8f9fa; }
#b-enregistrer.recording { background: #dc3545; border-color: #dc3545; color: #fff; animation: pr 1.2s infinite; }
@keyframes pr { 0%, 100% { box-shadow: 0 0 0 0 rgba(220,53,69,.4); } 50% { box-shadow: 0 0 0 10px rgba(220,53,69,0); } }
@media (prefers-reduced-motion: reduce) { #b-enregistrer.recording { animation: none; } }
[hidden] { display: none !important; }

/* Progression, toujours visible. */
.progression { position: sticky; top: 0; z-index: 10; padding: .75rem 1.1rem; }
.progression label { display: block; margin-bottom: .25rem; }
progress { width: 100%; height: 1rem; accent-color: #198754; }

/* Menu des phrases. */
.menu-phrases .card2 { max-height: calc(100vh - 7rem); overflow-y: auto; position: sticky; top: 5.5rem; }
.menu-titre { display: block; font-weight: 600; padding: .4rem .5rem; text-decoration: none; }
.menu-lien { display: grid; grid-template-columns: 1.4rem 1fr; gap: 0 .25rem; padding: .35rem .5rem; border-radius: 8px;
             color: #1a1a2e; text-decoration: none; font-size: .9rem; line-height: 1.3; }
.menu-lien:hover { background: #f6faff; }
.menu-lien[aria-current] { background: #eaf1ff; outline: 2px solid #cfe0ff; }
.menu-etat { grid-column: 2; color: #6b7280; font-size: .78rem; }
.menu-lien.etat-faite .bi { color: #198754; }
.menu-lien.etat-passee .bi { color: #6b7280; }
.menu-lien.etat-a-faire .bi { color: #0d6efd; }
.badge-erreur { font-size: .7rem; font-weight: 700; padding: .05rem .4rem; border-radius: 20px; background: #fff4e0; color: #8a6100; white-space: nowrap; }
@media (max-width: 991.98px) {
  .menu-phrases.repliable { display: none; }
  .menu-phrases.repliable.ouvert { display: block; }
  .menu-phrases .card2 { position: static; max-height: 60vh; }
}

/* Consignes et erreur volontaire (point 5). */
.rappel { background: #f0f6ff; border-left: 4px solid #0d6efd; border-radius: 10px; padding: .75rem 1rem; margin: 0 0 1rem; font-size: .92rem; }
.rappel p { margin: 0; }
.consigne { padding: .5rem .75rem; border-radius: 10px; margin: .25rem 0; }
.consigne p { margin: .25rem 0; }
.consigne.juste { background: #e9f5ec; border: 1px solid #198754; }
.consigne.erreur { background: #fff4e0; border: 2px solid #8a6100; }
.consigne.grande { font-size: 1.15rem; }
.phoneme { font-size: 1.2em; }
.mot-erreur { font-size: 1.45em; font-weight: 800; text-decoration: underline; text-decoration-color: #8a6100; text-underline-offset: .2em; }
.phrase.grise, .phrase.grise .mot-erreur { color: #b0b0b5; }
/* Ticket 26 : phrase juste en petit sous la phrase à lire de la version erreur. */
.reference { font-size: .95rem; color: #4b5563; margin: .75rem 0 0; }
.reference-titre { display: block; font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: #6b7280; }
.reference .mot-erreur { font-size: 1.15em; }
.libelle-version { font-weight: 600; margin: 0 0 .25rem; }

/* États, messages. */
.etat { font-size: 1.2rem; font-weight: 600; min-height: 1.6em; }
.etat.allez { color: #198754; font-size: 1.8rem; }
.etat.ok { color: #198754; }
.alerte, .etat.alerte { color: #a8321f; }
.note { color: #6b7280; font-size: .9em; margin: .25rem 0; }
.message { font-size: 1.1em; margin: 0; }
.lecteur { flex: 1; min-width: 150px; }
.lecteur audio { width: 100%; height: 34px; }
#enregistreur .btn, .boutons .btn { min-height: 2.75rem; }
.boutons form { margin: 0; }
.groupe .texte { font-size: 1.15rem; font-weight: 600; margin-bottom: .6rem; }
.groupe.etat-faite { border-left: 4px solid #198754; }
.version.etat-faite { border-color: #198754; }
.carte-code { max-width: 32rem; }
.code-exemple { font-family: ui-monospace, monospace; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid #0d6efd; outline-offset: 2px; }
@media (max-width: 30rem) { .wrap { padding: .75rem .5rem 4rem; } .card2 { padding: 1rem; } .boutons > * { flex: 1 1 100%; } .boutons .btn { width: 100%; } }