/* Écran de démarrage Examen / Essai, panneau Paramètres, interrupteurs et préréglages (v0.5). */

.page--demarrage { padding-bottom: 96px; }
.dem { max-width: 80rem; margin: 0 auto; padding-top: clamp(24px, 5vh, 52px); }
.retour { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; color: var(--ardoise); font-size: var(--t15); text-decoration: none; }
.retour:hover, .retour:focus-visible { color: var(--encre); }
.retour svg, .bascule svg, .panneau__ico, .rang__ico, .rang__chev, .carte__ico { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.retour svg { width: 16px; height: 16px; }

.dem__tete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 24px; margin-top: 28px; }
.dem__tete h1 { font-size: clamp(34px, 4.6vw, 52px); line-height: 1.06; letter-spacing: -0.015em; }
.dem__intro { margin-top: 12px; color: var(--ardoise); }
.bascule { gap: 10px; min-height: 44px; }
.bascule svg { width: 18px; height: 18px; }

.dem__grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 clamp(32px, 4vw, 56px); margin-top: 8px; align-items: start; }
.avec-panneau .dem__grille { grid-template-columns: minmax(0, 1fr) minmax(19rem, 24rem); }
.dem__principal section { margin-top: 36px; }
.dem__principal .surtitre { margin-bottom: 16px; }

/* Cartes à choix unique */
.cartes { display: grid; gap: 14px; }
.cartes--deux { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cartes--trois { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cartes--compactes { grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr)); gap: 10px; }
.carte {
  position: relative; display: flex; flex-direction: column; gap: 6px;
  padding: 20px 22px 20px; min-width: 0;
  background: var(--surface); border: 1px solid var(--filet); border-radius: var(--r-carte);
  cursor: pointer; transition: border-color var(--rapide), background-color var(--rapide);
}
.carte:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--filet)); }
.carte:has(.carte__radio:checked) { border-color: var(--accent); background: var(--surface2); }
.carte:has(.carte__radio:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
.carte__radio { position: absolute; top: 0; left: 0; opacity: 0; width: 1px; height: 1px; margin: 0; }
.carte__ico { width: 22px; height: 22px; color: var(--accent); margin-bottom: 14px; }
.carte__rond { position: absolute; top: 18px; right: 18px; width: 18px; height: 18px; border: 1.5px solid var(--contour); border-radius: 50%; }
.carte:has(.carte__radio:checked) .carte__rond { border-color: var(--accent); }
.carte:has(.carte__radio:checked) .carte__rond::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--accent); }
.carte__titre { font: 400 22px / 1.15 var(--serif); letter-spacing: -0.005em; padding-right: 30px; overflow-wrap: anywhere; }
.cartes--trois .carte, .cartes--compactes .carte { padding: 18px 20px; }
.cartes--trois .carte__titre, .cartes--compactes .carte__titre { font-size: 18px; }
.cartes--trois .carte__rond, .cartes--compactes .carte__rond { top: 16px; right: 14px; }
.carte__desc { color: var(--ardoise); font-size: var(--t13); line-height: 1.45; max-width: 34ch; }

.lancement--dem { margin-top: 44px; display: grid; justify-items: center; gap: 12px; text-align: center; }
.lancement--dem .actions { margin: 0; }
.lancement--dem .etat-examen { order: 2; font-size: var(--t13); }
.lancement--dem .alerte { margin: 0; }
.lancement--dem .alerte:empty { display: none; }

/* Panneau Paramètres */
.panneau { margin-top: 36px; padding-left: clamp(24px, 3vw, 40px); border-left: 1px solid var(--filet); min-width: 0; }
.panneau__titre { display: flex; align-items: center; gap: 12px; font: 400 24px / 1.2 var(--serif); }
.panneau__ico { width: 22px; height: 22px; color: var(--accent); }
.panneau__etat { margin: 10px 0 18px; min-height: 1.5em; color: var(--ardoise); font-size: var(--t13); }
.panneau__etat .btn { min-height: 28px; font-size: var(--t13); text-decoration: underline; text-underline-offset: 0.2em; color: var(--encre); }
.rangs { border-top: 1px solid var(--filet); }
.rang { border-bottom: 1px solid var(--filet); }
.rang__tete {
  display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 0 14px;
  width: 100%; min-height: 56px; padding: 6px 0; background: none; border: 0; color: var(--encre);
  font: 400 var(--t15) / 1.3 var(--sans); text-align: left; cursor: pointer;
}
button.rang__tete { grid-template-columns: 20px minmax(0, 1fr) auto 16px; }
.rang__tete:focus-visible { outline-offset: 2px; }
.rang__tete--fixe { cursor: default; }
.rang__ico { width: 18px; height: 18px; color: var(--ardoise); }
.rang__val { color: var(--ardoise); font-size: var(--t13); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 11rem; }
.rang__chev { width: 16px; height: 16px; color: var(--ardoise); transition: transform var(--rapide); }
.rang__tete[aria-expanded="true"] .rang__chev { transform: rotate(180deg); }
.rang__corps { padding: 2px 0 16px 34px; }
.panneau .reglage { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 10px 0; }
.panneau .reglage .aide { max-width: none; }
.panneau .controle { flex-wrap: wrap; }
.panneau .choix { flex-direction: column; gap: 0; }
.panneau .rapides { gap: 0 14px; }
.panneau .aide-bas { margin: 0 0 6px; }

/* Interrupteur */
.inter { display: inline-flex; align-items: center; min-height: 44px; padding: 0; margin: 0; background: none; border: 0; cursor: pointer; }
.inter__piste { position: relative; width: 44px; height: 26px; border: 1px solid var(--contour); border-radius: 999px; background: var(--surface2); transition: background-color var(--rapide), border-color var(--rapide); }
.inter__bouton { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--ardoise); transition: transform var(--rapide), background-color var(--rapide); }
.inter[aria-checked="true"] .inter__piste { background: var(--accent); border-color: var(--accent); }
.inter[aria-checked="true"] .inter__bouton { transform: translateX(18px); background: var(--sur-accent); }
.inter:focus-visible .inter__piste { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Préréglages génériques : un ensemble choisi + « Personnaliser » */
.prereg { display: grid; gap: 12px; padding: 8px 0; }
.prereg__tete { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.prereg__statut { color: var(--accent); font-size: var(--t13); min-height: 1.2em; }
.prereg__perso { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 10px; border-top: 1px solid var(--filet); }
.prereg__param { padding-top: 4px; }
.prereg .aide-bas { margin: 0; }

@media (max-width: 960px) {
  .avec-panneau .dem__grille { grid-template-columns: minmax(0, 1fr); }
  .panneau { padding-left: 0; border-left: 0; border-top: 1px solid var(--filet); padding-top: 28px; margin-top: 44px; }
}
@media (max-width: 600px) {
  .cartes--deux, .cartes--trois { grid-template-columns: minmax(0, 1fr); }
  .dem__tete { align-items: flex-start; }
  .rang__corps { padding-left: 0; }
  .rang__val { max-width: 9rem; }
}


/* Courbe des quartiles (accueil) : compacte, sous le bouton principal. Couleurs propres au thème, aucune décoration autour. */
.courbe {
  --crb-1: #0593C6; --crb-2: #8A66C9; --crb-3: #D83995;
  --crb-off: #C5DCEA; --crb-q1: #0593C6; --crb-q2: #5E7FD0; --crb-q3: #A455B5; --crb-q4: #D83995;
  --crb-aire: #6D86D0; --crb-pt: #D83995; --crb-scrim: transparent;
  width: 100%; max-width: 27rem; margin-top: 30px;
  cursor: ew-resize; touch-action: pan-y; user-select: none; -webkit-user-select: none;
  border-radius: 12px; outline-offset: 4px;
  background: radial-gradient(ellipse 62% 70% at 50% 58%, var(--crb-scrim), transparent 100%);
}
:root[data-theme="dark"] .courbe { --crb-1: #3FB6E8; --crb-2: #9C7BE0; --crb-3: #FF6FBA; --crb-off: #243D52; --crb-q1: #3FB6E8; --crb-q2: #7C93E6; --crb-q3: #C46BD0; --crb-q4: #FF6FBA; --crb-aire: #7C93E6; --crb-pt: #FF8CC8; --crb-scrim: rgb(7 18 29 / 0.5); }
:root[data-theme="nb"] .courbe { --crb-1: #8A8A8A; --crb-2: #BDBDBD; --crb-3: #FFFFFF; --crb-off: #333333; --crb-q1: #7A7A7A; --crb-q2: #A0A0A0; --crb-q3: #CFCFCF; --crb-q4: #FFFFFF; --crb-aire: #BDBDBD; --crb-pt: #FFFFFF; --crb-scrim: rgb(0 0 0 / 0.5); }
:root[data-theme="nbc"] .courbe { --crb-1: #8A8A8A; --crb-2: #4D4D4D; --crb-3: #000000; --crb-off: #CFCFCF; --crb-q1: #9A9A9A; --crb-q2: #707070; --crb-q3: #3A3A3A; --crb-q4: #000000; --crb-aire: #4D4D4D; --crb-pt: #000000; --crb-scrim: transparent; }
.crb-svg { display: block; width: 100%; height: auto; overflow: visible; }
.crb-s1 { stop-color: var(--crb-1); } .crb-s2 { stop-color: var(--crb-2); } .crb-s3 { stop-color: var(--crb-3); }
.crb-a1 { stop-color: var(--crb-aire); stop-opacity: 0.24; } .crb-a2 { stop-color: var(--crb-aire); stop-opacity: 0.02; }
.crb-aire { fill: url(#crb-a); }
.crb-trait { fill: none; stroke: url(#crb-g); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.crb-base { stroke: var(--filet); stroke-width: 1.2; }
.crb-guide { stroke: var(--crb-2); stroke-width: 1.2; stroke-dasharray: 3 3; opacity: 0.8; }
.crb-bande { stroke: var(--ardoise); stroke-width: 1; stroke-dasharray: 2 4; opacity: 0.4; }
.crb-halo { fill: var(--crb-3); opacity: 0.22; transition: opacity 160ms; }
.crb-point { fill: var(--crb-pt); stroke: var(--papier); stroke-width: 1.5; }
.courbe.actif .crb-halo, .courbe:focus-visible .crb-halo { opacity: 0.42; }
.courbe:focus-visible { outline: 2px solid var(--accent); }
.crb-pill { fill: var(--accent); }
.crb-pillt { fill: var(--sur-accent); font: 400 15px / 1 var(--serif); font-variant-numeric: tabular-nums; }
.crb-anneau-fin { fill: none; stroke: var(--filet); stroke-width: 0.8; }
.crb-seg { fill: none; stroke: var(--crb-off); stroke-width: 7; stroke-linecap: round; transition: stroke 320ms ease; }
.crb-seg--1.on { stroke: var(--crb-q1); } .crb-seg--2.on { stroke: var(--crb-q2); } .crb-seg--3.on { stroke: var(--crb-q3); } .crb-seg--4.on { stroke: var(--crb-q4); }
.crb-q { fill: var(--encre); font: 400 28px / 1 var(--serif); letter-spacing: -0.01em; }
.crb-axe { fill: var(--ardoise); font: 400 11px / 1 var(--sans); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .crb-seg { transition: none; } }
@media (max-width: 1180px) { .courbe { margin-top: 24px; } }

/* Séances (Examen, Essai) : le rail du temps est le seul endroit où le design se permet de la force. */

.rail { position: fixed; left: 0; right: 0; top: 0; height: 2px; z-index: 30; pointer-events: none; }
.rail__bar { height: 100%; background: var(--outremer); transform-origin: right center; transform: scaleX(1); }
.rail--alerte .rail__bar { background: var(--alerte); }

.seance { min-height: 100vh; padding: 0 var(--marge) 96px; }
.seance__col { max-width: var(--colonne); margin: 0 auto; }
.seance__haut {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  min-height: 92px; padding: 28px 0 10px;
}
.seance__titre { display: flex; flex-wrap: wrap; gap: 0 20px; margin: 0; color: var(--ardoise); }
.seance__phase { color: var(--encre); }
.horloge { font-size: var(--t20); line-height: 1; font-variant-numeric: tabular-nums; }
.horloge--critique { font-size: var(--t64); color: var(--alerte); }
.grand { margin: 28px 0; font: 500 var(--t64) / 1 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.seance__h1 { margin-top: 56px; font-size: var(--t28); }
.seance__corps .actions { margin-top: 28px; }

.scenario-bloc { padding: 24px 0 8px; }
.scenario { max-width: 64ch; font: 400 var(--t20) / 1.6 var(--serif); }
.scenario + .scenario { margin-top: 14px; }

.questions-bloc { margin-top: 28px; padding-top: 12px; border-top: 1px solid var(--filet); }
.questions { display: grid; gap: 8px; }
.q { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 0 10px; padding: 18px 0 4px; }
.q-num { padding-top: 0.35em; color: var(--ardoise); font: 600 var(--t13) / 1.5 var(--sans); }
.q-corps { display: grid; min-width: 0; }
.q-texte { max-width: 64ch; font: 500 var(--t17) / 1.5 var(--serif); }
.reponse {
  display: block; width: 100%; min-height: 7.2em; margin-top: 10px; padding: 8px 0 10px;
  border: 0; border-bottom: 1px solid var(--contour); border-radius: 0; background: transparent;
  font: 400 18px / 1.6 var(--serif); color: var(--encre); resize: none; field-sizing: content;
}
.reponse:focus-visible { outline: none; border-bottom: 2px solid var(--outremer); padding-bottom: 9px; }
.reponse[readonly] { color: var(--ardoise); }
.q-compte { justify-self: end; margin-top: 6px; color: var(--ardoise); font-size: var(--t13); font-variant-numeric: tabular-nums; }
.ecoule { min-height: 1.5em; margin-top: 12px; color: var(--alerte); font-weight: 500; }

.seance__bas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; margin-top: 36px; }
.quitter { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 16px; }

/* Résultats */
.seance__fin { padding-top: 0; }
.seance__fin .faits { max-width: 24rem; margin-top: 28px; }
.fin-liste { margin-top: 40px; }
.fin-ligne { padding: 22px 0; }
.fin-ligne + .fin-ligne { border-top: 1px solid var(--filet); }
.fin-tete { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 24px; align-items: start; }
.fin-tete .meta-droite { white-space: nowrap; }
.fin-frappe { margin-top: 8px; color: var(--ardoise); font-size: var(--t13); max-width: 64ch; }
.fin-details summary { display: inline-flex; align-items: center; min-height: 36px; margin-top: 6px; cursor: pointer; }
.fin-qr { margin-top: 16px; max-width: 64ch; }
.fin-q { font: 600 var(--t15) / 1.5 var(--sans); }
.fin-r { margin-top: 4px; font: 400 var(--t17) / 1.6 var(--serif); white-space: pre-wrap; }
.fin-notes { margin-top: 48px; }
.fin-notes h2 { font-size: var(--t20); margin-bottom: 8px; }
.fin-notes li { padding: 3px 0; color: var(--ardoise); }

/* Préparation */
.section--tete { margin-top: 0; }
.lancement { margin-top: 56px; }
.lancement .actions { margin-top: 8px; }
.etat-examen { color: var(--ardoise); }
.rapides { display: flex; flex-wrap: wrap; gap: 0 18px; }
.aide-bas { margin-top: 8px; color: var(--ardoise); font-size: var(--t13); }

@media (max-width: 560px) {
  .q { grid-template-columns: 1.5rem minmax(0, 1fr); gap: 0 6px; }
  .fin-tete { grid-template-columns: minmax(0, 1fr); }
  .horloge--critique, .grand { font-size: 52px; }
}

/* Réponses à voix haute : vérification, aperçu, indicateur d'enregistrement, transcription. */

.verif { display: grid; margin-top: 28px; max-width: 40rem; }
.verif__ligne { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 4px 16px; padding: 16px 0; border-top: 1px solid var(--filet); }
.verif__nom { margin: 0; color: var(--ardoise); font: 600 var(--t13) / 1.7 var(--sans); }
.verif__corps { display: grid; gap: 10px; justify-items: start; min-width: 0; }
.verif__etat { margin: 0; min-height: 1.5em; }
.verif__apercu { width: 100%; max-width: 20rem; }
.verif__apercu:empty { display: none; }
.apercu { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; background: var(--filet); transform: scaleX(-1); }

.niveau { width: 100%; max-width: 20rem; height: 6px; border-radius: 999px; background: var(--filet); overflow: hidden; }
.niveau__barre { display: block; width: 0; height: 100%; background: var(--ardoise); }
.niveau.parle .niveau__barre { background: var(--outremer); }

/* Aperçu caméra : centré sous la question, largeur proportionnelle à l'écran (16/9). */
.apercu-fixe { position: fixed; right: 16px; bottom: 16px; z-index: 20; width: 176px; border-radius: 6px; overflow: hidden; outline: 1px solid var(--contour); }
.avec-apercu .seance__bas { padding-bottom: 112px; }
.apercu-centre { width: min(100%, 36rem, 55vh * 16 / 9 * 0.6); margin: 24px auto 0; border-radius: 8px; overflow: hidden; outline: 1px solid var(--contour); }

.enreg { display: inline-flex; align-items: center; gap: 8px; margin: 28px 0 0; font: 500 var(--t13) / 1.5 var(--sans); }
.enreg__point { width: 8px; height: 8px; border-radius: 999px; background: var(--alerte); }

.video-q { margin-top: 20px; }
.q-texte--grand { max-width: 64ch; font: 500 var(--t20) / 1.5 var(--serif); }
.masque { margin-top: 32px; font-size: var(--t17); }

.transcription { max-width: 64ch; min-height: 6em; margin: 28px 0 0; font: 400 var(--t17) / 1.6 var(--serif); color: var(--encre); }
.transcription__interim { color: var(--ardoise); }

.clip { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 16px; margin-top: 10px; color: var(--ardoise); font-size: var(--t13); }
.clips-panel { margin-top: 32px; }

@media (max-width: 560px) {
  .verif__ligne { grid-template-columns: minmax(0, 1fr); }
}

/* Révision, historique, export : sobres, des filets seulement là où le contenu change de nature. */

.col--rev { max-width: 64rem; margin: 0 auto; }
.export-barre { margin: 4px 0 28px; padding-top: 16px; border-top: 1px solid var(--filet); }
.export-barre .choix { margin-bottom: 4px; }
.export-barre .actions { margin-top: 10px; }
.fin-export { margin-top: 48px; }
.fin-export h2 { font-size: var(--t20); margin-bottom: 4px; }

.rev-nav ol { display: flex; flex-wrap: wrap; gap: 0 22px; }
.rev-nav a { display: inline-flex; align-items: baseline; gap: 8px; min-height: 40px; align-items: center; color: var(--ardoise); text-decoration: none; }
.rev-nav a:hover, .rev-nav a:focus-visible { color: var(--encre); text-decoration: underline; text-underline-offset: 0.2em; }
.rev-nav a[aria-current="true"] { color: var(--encre); text-decoration: underline; text-decoration-color: var(--outremer); text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
.rev-nav-id { font-size: var(--t13); }

.rev-reponse-bloc { margin-top: 36px; }
.rev-entete h2 { font-size: var(--t28); }
.rev-entete p { margin-top: 6px; }
.scenario-bloc--rev { max-width: 64ch; padding: 20px 0 0; }
.scenario-bloc--rev .scenario { font-size: var(--t17); }

.rev-q { margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--filet); }
.rev-q h3 { font: 600 var(--t13) / 1.4 var(--sans); letter-spacing: 0; color: var(--ardoise); }
.rev-q-texte { margin-top: 4px; max-width: 64ch; font: 500 var(--t17) / 1.5 var(--serif); }
.rev-grille { display: grid; gap: 24px 44px; margin-top: 18px; }
@media (min-width: 900px) { .rev-grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.rev-gauche, .rev-droite { min-width: 0; }
.rev-reponse { max-width: 64ch; font: 400 18px / 1.6 var(--serif); white-space: pre-wrap; }
.rev-legende { margin-top: 6px; font-size: var(--t13); max-width: 64ch; }
.rev-lib { display: block; margin: 0 0 6px; color: var(--ardoise); font: 600 var(--t13) / 1.4 var(--sans); }
.rev-droite > .rev-lib:first-child { margin-top: 0; }
.rev-notes { margin-top: 24px; display: grid; gap: 6px; justify-items: start; }
.rev-notes .rev-lib { margin-top: 10px; }
.rev-stats { margin-top: 28px; max-width: 64ch; display: grid; gap: 6px; }

.lecteur { display: grid; gap: 6px; }
.rev-video { display: block; width: 100%; max-width: 28rem; aspect-ratio: 16 / 9; border-radius: 6px; background: var(--filet); object-fit: cover; }
.rev-video--audio { display: none; }
.rev-controles { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 14px; max-width: 28rem; }
.rev-temps { color: var(--ardoise); font-size: var(--t13); white-space: nowrap; }
.scrub { -webkit-appearance: none; appearance: none; width: 100%; height: 40px; margin: 0; background: transparent; cursor: pointer; }
.scrub::-webkit-slider-runnable-track { height: 2px; background: var(--contour); }
.scrub::-moz-range-track { height: 2px; background: var(--contour); }
.scrub::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; margin-top: -5px; border-radius: 999px; border: 0; background: var(--encre); }
.scrub::-moz-range-thumb { width: 12px; height: 12px; border-radius: 999px; border: 0; background: var(--encre); }

.bande { display: block; width: 100%; max-width: 28rem; height: 24px; margin-top: 12px; overflow: visible; }
.bande__base { stroke: var(--filet); stroke-width: 1; }
.bande__plein { fill: var(--encre); }
.bande__marque { stroke: var(--outremer); stroke-width: 2; vector-effect: non-scaling-stroke; }

.transcription-lignes { display: grid; gap: 2px; }
.transcription-lignes li { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); gap: 8px; align-items: start; padding: 2px 0 2px 8px; border-left: 2px solid transparent; }
.transcription-lignes li[aria-current="true"] { border-left-color: var(--outremer); }
.temps { min-width: 3.2rem; min-height: 32px; padding: 0; border: 0; background: none; text-align: left; color: var(--ardoise); font: 600 var(--t13) / 1.9 var(--sans); font-variant-numeric: tabular-nums; }
button.temps:hover, button.temps:focus-visible { color: var(--encre); text-decoration: underline; text-underline-offset: 0.2em; }
.note-texte { display: block; width: 100%; min-height: 2em; padding: 3px 0; border: 0; border-bottom: 1px solid transparent; border-radius: 0; background: transparent; resize: none; field-sizing: content; font: 400 var(--t17) / 1.5 var(--serif); color: var(--encre); }
.note-texte:hover { border-bottom-color: var(--filet); }
.note-texte:focus-visible { outline: none; border-bottom: 2px solid var(--outremer); padding-bottom: 2px; }
.reponse--rev { min-height: 6em; }
.notes-liste { display: grid; gap: 4px; width: 100%; }
.note { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: start; }
.champ--note { min-height: 3.2rem; field-sizing: content; max-width: 36rem; }
.champ--tag { width: 14rem; }

.rev-bas { margin-top: 48px; padding-top: 8px; border-top: 1px solid var(--filet); display: grid; gap: 4px; }
.rev-tags .rev-lib, .rev-note-gen .rev-lib, .rev-bas > div > .rev-lib { margin-top: 22px; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.tags:empty { display: none; }
.tags .etiquette { display: inline-flex; align-items: center; gap: 8px; padding: 2px 4px 2px 12px; }
.tag-x { min-height: 28px; padding: 0 8px 0 2px; border: 0; background: none; color: var(--ardoise); font-size: var(--t13); text-decoration: underline; text-underline-offset: 0.2em; }
.tag-x:hover, .tag-x:focus-visible { color: var(--encre); }
.tag-ajout { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.choix--note { gap: 0 4px; }
.choix--note label { min-width: 44px; justify-content: center; }

/* Historique : un trait calme par mesure. */
.comp-liste { margin-top: 12px; max-width: 40rem; }
.comp-liste li { display: grid; grid-template-columns: minmax(8rem, 14rem) minmax(0, 1fr) 2.5rem; align-items: center; gap: 12px; padding: 5px 0; }
.comp-barre { display: block; height: 4px; background: var(--filet); }
.comp-barre span { display: block; height: 100%; background: var(--ardoise); }
.comp-n { text-align: right; color: var(--ardoise); }
.multiples { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 32px 36px; margin-top: 20px; }
.multiple h3 { font: 600 var(--t13) / 1.4 var(--sans); letter-spacing: 0; color: var(--ardoise); }
.multiple__val { margin-top: 4px; color: var(--ardoise); font-size: var(--t13); }
.multiple__val b { color: var(--encre); font: 500 var(--t28) / 1 var(--serif); }
.multiple__svg { display: block; width: 100%; height: 44px; margin-top: 6px; overflow: visible; }
.multiple__ligne { fill: none; stroke: var(--ardoise); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.multiple__point { fill: var(--ardoise); }
.multiple__dernier { fill: var(--encre); }
.multiple__aide { margin-top: 4px; font-size: var(--t13); }
.restaure { display: grid; gap: 6px; margin-top: 8px; max-width: 48rem; }

.temps--vide { display: none; }

/* Clavier : trois chiffres sur une ligne, la ligne à taper au centre, les touches en filets. */
.page--tuteur .tut-stats { display: flex; flex-wrap: wrap; gap: 8px 56px; padding: 8px 0 24px; border-bottom: 1px solid var(--filet); }
.tut-stat .lib { margin: 0; color: var(--ardoise); font: 600 var(--t13) / 1.4 var(--sans); letter-spacing: 0.04em; text-transform: none; }
.tut-stat .val { margin: 2px 0 0; font: 500 44px / 1.1 var(--sans); color: var(--encre); }
.tut-stat .val small { margin-left: 6px; font: 400 var(--t17) / 1 var(--sans); color: var(--ardoise); }
.tut-stat .sous { margin: 4px 0 0; min-height: 1.4em; color: var(--ardoise); font: 400 var(--t13) / 1.4 var(--sans); }

.tut-cap { position: fixed; left: -9999px; top: 0; width: 1px; height: 1px; opacity: 0; }
.tut-scene { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: min(46vh, 380px); padding: 32px 0; cursor: text; outline: none; }
.tut-rail { height: 2px; background: var(--filet); margin-bottom: 36px; }
.tut-rail i { display: block; height: 100%; width: 0; background: var(--outremer); }
.tut-ligne { font: 400 clamp(26px, 3.4vw, 38px) / 1.85 var(--serif); letter-spacing: 0.01em; user-select: none; text-align: left; }
.tut-ligne .w { display: inline-block; white-space: pre; }
.tut-ligne .c { color: var(--ardoise); padding: 0 0.5px; border-bottom: 2px solid transparent; }
.tut-ligne .c.sp { min-width: 0.4em; }
.tut-ligne .c.ok { color: var(--encre); }
.tut-ligne .c.fixed { color: var(--encre); border-bottom: 2px dotted var(--ardoise); }
.tut-ligne .c.cur { color: var(--encre); border-bottom-color: var(--outremer); }
.tut-ligne .c.cur.flash { border-bottom-color: var(--alerte); color: var(--alerte); }
.tut-invite { margin: 24px 0 0; color: var(--ardoise); font: 400 var(--t13) / 1.5 var(--sans); }
.tut-scene.inactive .tut-ligne { opacity: 1; }
.tut-scene.inactive .tut-invite { color: var(--encre); font-weight: 600; }
.tut-resultat { display: none; }
.tut-scene.fini .tut-ligne, .tut-scene.fini .tut-rail, .tut-scene.fini .tut-invite { display: none; }
.tut-scene.fini .tut-resultat { display: block; }
.tut-gros { display: flex; flex-wrap: wrap; gap: 8px 56px; margin-bottom: 20px; }
.tut-gros p { margin: 0; }
.tut-gros .lib, .tut-resultat .lib { display: block; margin: 0 0 6px; color: var(--ardoise); font: 600 var(--t13) / 1.4 var(--sans); }
.tut-gros b { font: 500 64px / 1 var(--sans); color: var(--encre); }
.tut-gros small { margin-left: 8px; font: 400 var(--t17) / 1 var(--sans); color: var(--ardoise); }
.tut-debloque { margin: 0 0 18px; padding-left: 12px; border-left: 2px solid var(--outremer); }
.tut-cles { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 14px 18px; margin: 8px 0 8px; padding: 0; list-style: none; }
.tut-cle b { display: block; font: 500 24px / 1.2 var(--sans); }
.tut-cle span { display: block; color: var(--ardoise); font: 400 var(--t13) / 1.4 var(--sans); }
.tut-barre { display: block; height: 3px; margin-top: 6px; background: transparent; }

.tut-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.tut-info { color: var(--ardoise); font: 400 var(--t13) / 1.4 var(--sans); }
.tut-lettres { display: flex; flex-wrap: wrap; gap: 10px 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.tut-lettre { position: relative; width: 42px; padding: 4px 0 0; text-align: center; font-family: var(--sans); }
.tut-lettre b { display: block; font: 500 22px / 1.2 var(--sans); color: var(--encre); }
.tut-lettre small { display: block; height: 1.3em; color: var(--ardoise); font: 400 11px / 1.3 var(--sans); font-variant-numeric: tabular-nums; }
.tut-lettre .tut-barre { margin-top: 2px; height: 4px; width: 0; }
.tut-lettre.verrou b { color: var(--ardoise); }
.tut-lettre.verrou .tut-barre { width: 100%; height: 0; border-bottom: 1px dashed var(--ardoise); }
.tut-lettre.suivante b { border-bottom: 0; }
.tut-lettre.focus b { border-bottom: 2px solid var(--outremer); }
.tut-lettre .tut-barre[style=""] { width: 100%; height: 0; border-bottom: 1px solid var(--filet); }
.tut-lettres--vraies .vide { color: var(--ardoise); }

.tut-clavier { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 36px; }
.tut-rang { display: flex; gap: 6px; }
.tut-rang.decale { margin-left: 22px; }
.tut-touche { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--filet); border-radius: 4px; color: var(--ardoise); font: 400 16px / 1 var(--sans); }
.tut-touche.on { color: var(--encre); }
.tut-touche.veut { border-color: var(--outremer); outline: 1px solid var(--outremer); outline-offset: -2px; color: var(--encre); }
@media (max-width: 720px) {
  .tut-clavier { max-width: 100%; } .tut-rang { gap: 3px; max-width: 100%; } .tut-touche { width: 26px; flex: 0 1 26px; min-width: 0; height: 34px; font-size: 14px; } .tut-rang.decale { margin-left: 14px; }
  .tut-gros b { font-size: 48px; } .tut-stat .val { font-size: 34px; }
}

/* Barre d'outils : mode (Leçons / Test de frappe) et bouton Réglages. */
.tut-outils { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding-bottom: 12px; }
.seg { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--filet); border-radius: 12px; background: var(--surface); }
.seg__b { min-height: 40px; padding: 0 16px; border: 0; border-radius: 9px; background: none; color: var(--ardoise); font: 500 var(--t15) / 1 var(--sans); cursor: pointer; transition: background-color var(--rapide), color var(--rapide); }
.seg__b:hover { color: var(--encre); }
.seg__b[aria-pressed="true"] { background: var(--surface2); color: var(--encre); box-shadow: inset 0 0 0 1px var(--accent); }
.tut-reglages { padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--filet); }
.tut-reglages .reglage { max-width: 44rem; }
.tut-reglages .prereg { max-width: 44rem; }
.tut-test-duree { display: flex; align-items: center; gap: 14px; padding: 20px 0 0; }
.tut-test-duree .lib { color: var(--ardoise); font: 600 var(--t13) / 1.4 var(--sans); }
.tut-zone[hidden] { display: none; }

/* Test de frappe : le temps, trois lignes de mots qui défilent. */
.tut-scene--test { --tt-fs: clamp(22px, 2.8vw, 30px); }
.tt-chrono { margin: 0 0 14px; font: 400 clamp(32px, 4vw, 44px) / 1 var(--serif); color: var(--accent); font-variant-numeric: tabular-nums; }
.tt-fenetre { height: calc(var(--tt-fs) * 1.9 * 3); overflow: hidden; }
.tt-fenetre .tut-ligne { position: relative; font-size: var(--tt-fs); line-height: 1.9; transition: transform 140ms ease; }
.tut-ligne .c.bad { color: var(--alerte); border-bottom: 2px solid var(--alerte); }
.tut-scene--test.fini .tt-fenetre, .tut-scene--test.fini .tt-chrono { display: none; }
@media (prefers-reduced-motion: reduce) { .tt-fenetre .tut-ligne { transition: none; } }
.tut-stats--test { margin-top: 28px; border-bottom: 0; border-top: 1px solid var(--filet); padding-top: 24px; }
.tut-reglages { margin-top: 20px; }

/* Entrevue MEM : la porte, la station, l'avatar au trait. */
.mem-porte { max-width: 62ch; }
.mem-porte .lib { margin: 0 0 12px; color: var(--ardoise); font: 600 var(--t13) / 1.4 var(--sans); }
.mem-station { display: grid; grid-template-columns: minmax(140px, 220px) minmax(0, 1fr); gap: 40px; align-items: start; }
.mem-avatar { width: 100%; }
.avatar { display: block; width: 100%; height: auto; max-height: 52vh; }
.av-trait { fill: none; stroke: var(--encre); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.av-point { fill: var(--encre); }
.mem-question { margin: 0; max-width: 40ch; font: 400 var(--t28) / 1.35 var(--serif); }
.mem-dit { min-height: 3.2em; margin: 20px 0 0; max-width: 52ch; color: var(--ardoise); font: 400 var(--t17) / 1.55 var(--serif); }
.mem-texte .enreg { margin: 0 0 18px; }
.rev-interv ol { display: grid; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
.rev-interv li { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); gap: 8px; }
.rev-ref { margin-top: 24px; padding-left: 14px; border-left: 2px solid var(--outremer); max-width: 62ch; }
.rev-ref h3, .rev-interv h3 { margin: 0 0 6px; font: 600 var(--t13) / 1.4 var(--sans); color: var(--ardoise); }
@media (max-width: 720px) {
  .mem-station { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .mem-avatar { max-width: 150px; }
  .avatar { max-height: 190px; }
  .mem-question { font-size: var(--t20); }
}

/* Parole quotidienne : le sujet, le conseil du jour, les mots de remplissage en révision. */
.sujet { max-width: 44ch; }
.sujet__type { margin: 0 0 10px; color: var(--ardoise); font: 600 var(--t13) / 1.4 var(--sans); }
.sujet__texte { margin: 0; font: 400 var(--t28) / 1.35 var(--serif); letter-spacing: -0.01em; text-wrap: pretty; }
.sujet--prep { margin-top: 4px; }
.parole-jour .ardoise { max-width: 56ch; }
.focus { margin-top: 36px; max-width: 56ch; }
.focus .sujet__type { margin-bottom: 4px; }
.conseil { font: 400 var(--t17) / 1.55 var(--serif); }

.rem { margin-top: 28px; max-width: 64ch; }
.rem__total { margin: 0; font: 500 var(--t17) / 1.5 var(--serif); }
.rem__main { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.rem__btn { min-width: 44px; padding: 0 14px; font-size: var(--t20); }
.rem__n { min-width: 1.6rem; text-align: center; font-size: var(--t17); }
.rem__texte { margin-top: 16px; padding-left: 14px; border-left: 2px solid var(--filet); font: 400 var(--t17) / 1.65 var(--serif); white-space: pre-wrap; }
.rem mark { padding: 0 3px; border-radius: 2px; color: inherit; background: color-mix(in srgb, var(--outremer) 20%, transparent); }

@media (max-width: 560px) {
  .sujet__texte { font-size: var(--t20); }
}

/* Panneau Paramètres : remonté, collé sous la barre, et il défile seul. */
@media (min-width: 1001px) {
  .panneau { margin-top: 0; position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
}