/* Tokens du design "HUD" (zone transcription/suggestion Negotium/Askesis/
   Agora pendant un appel — voir la section dédiée en bas de fichier).
   Volontairement distinct du reste de l'app ("SaaS doux", cartes très
   arrondies, ombres légères) : décision produit assumée pour cette zone
   précise, pas une incohérence. Roboto Condensed = interface HUD, IBM Plex
   Mono = phonétique uniquement (voir <link> Google Fonts dans index.html). */
:root {
  --hud-font-ui: 'Roboto Condensed', system-ui, sans-serif;
  --hud-font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --hud-blue: #1a56db;
  --hud-blue-bg: #eef4ff;
  --hud-ink: #0f172a;
  --hud-muted: #5b6472;
  --hud-size-main: 24px;
  --hud-size-label: 16px;
  --hud-size-secondary: 14px;
}

body {
  font-family: system-ui, sans-serif;
  max-width: 1100px;
  margin: 40px auto;
  padding: 0 20px;
  color: #222;
  /* Fond gris très clair sur lequel les cartes blanches (.panel) ressortent
     — n'a d'effet visible que sur les écrans sans fond dédié en
     position:fixed (app-screen, study-simulation-screen). */
  background: #f5f6f8;
}

h1 {
  font-size: 1.3rem;
}

.controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

button {
  padding: 8px 16px;
  font-size: 1rem;
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

#status {
  color: #666;
  font-size: 0.9rem;
}

.panels {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

/* Écran d'appel Negotium (#panels, pas la classe .panels partagée avec les
   panneaux Askesis) : grille explicite à 2 lignes — la ligne 1 (titre) a
   une hauteur commune aux deux colonnes, quel que soit le contenu de la
   ligne 2. Chaque .panel utilise "subgrid" pour que ses propres lignes
   s'alignent EXACTEMENT sur celles de la grille parente, garantissant que
   "Transcription" et "Suggestion" démarrent à la même position verticale
   même si leur contenu interne diffère (nombre d'enfants, hauteur, etc.). */
#panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr;
  gap: 20px;
}

#panels .panel {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
}

@media (max-width: 700px) {
  #panels {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }

  #panels .panel {
    grid-template-rows: none;
    grid-row: auto;
  }
}

.panel {
  flex: 1 1 320px;
  border: 1px solid #eee;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
  padding: 20px;
  min-height: 200px;
  line-height: 1.6;
  white-space: pre-wrap;
}

.panel h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 0;
  font-size: 1rem;
  color: #666;
}

/* Ligne de séparation fine sous chaque titre ("Transcription" /
   "Suggestion") — l'alignement vertical lui-même est garanti par le
   subgrid ci-dessus, pas par cette règle. Scope volontairement limité à
   ces deux panneaux (#panels), pas aux autres .panel de l'app
   (calibration, résumé, Askesis...). */
#panels .panel h2 {
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #eee;
}

/* min-width/min-height:0 : évite qu'un enfant grid ne refuse de rétrécir
   sous sa taille de contenu intrinsèque (débordement classique en
   grid/flex), maintenant que .panel-body est un item de grille. */
#panels .panel-body {
  min-width: 0;
  min-height: 0;
}

/* Icônes SVG inline (Feather-style) réutilisées partout : boutons,
   titres de section, bandeaux, états vides. currentColor pour hériter la
   couleur du texte/contexte environnant, sauf modificateurs explicites. */
.icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.section-icon {
  width: 20px;
  height: 20px;
}

.icon-blue {
  color: #1a56db;
}

.icon-green {
  color: #1a7f37;
}

.icon-amber {
  color: #b45309;
}

/* Système de boutons pour les écrans d'appel/simulation (Negotium et
   Askesis) : couleurs distinctes et cohérentes, coins arrondis, ombre
   légère — scope volontairement limité à .btn (n'affecte pas les autres
   boutons de l'app qui gardent leur style existant). */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: none;
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

.btn:disabled {
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.btn-primary {
  background: #1a56db;
  color: #fff;
}

.btn-primary:hover:not(:disabled) {
  background: #1545b0;
  box-shadow: 0 4px 12px rgba(26, 86, 219, 0.25);
}

.btn-primary:disabled {
  background: #a9bde8;
  color: #eef2fb;
}

.btn-secondary {
  background: #fff;
  color: #444;
  border: 1px solid #ddd;
}

.btn-secondary:hover:not(:disabled) {
  border-color: #bbb;
}

.btn-secondary:disabled {
  background: #f0f0f0;
  color: #aaa;
  border-color: #eee;
}

.btn-upgrade {
  background: #e8820e;
  color: #fff;
}

.btn-upgrade:hover {
  background: #cf7409;
  box-shadow: 0 4px 12px rgba(232, 130, 14, 0.3);
}

/* Bandeau d'en-tête compact (logo + slogan), même format que le coin
   haut-gauche de l'écran d'accueil — réutilise .home-logo/.home-tagline.
   #app-screen est en flux normal, centré par body (max-width + margin:auto)
   contrairement à l'écran d'accueil (position:fixed, pleine fenêtre) : sans
   correction, le logo se retrouve décalé vers la droite sur un écran large,
   au lieu de coller le vrai bord gauche de la fenêtre. Le "full-bleed" ci-
   dessous étend uniquement ce bandeau jusqu'aux bords réels du viewport
   (le reste du contenu — titre, contrôles, cartes — reste dans la colonne
   centrée habituelle), avec le même padding (20px) que l'écran d'accueil. */
.app-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 calc(50% - 50vw) 20px calc(50% - 50vw);
  padding: 0 20px;
}

.app-subtitle {
  margin: 0 0 20px 0;
  color: #666;
  font-weight: 500;
}

/* État vide des panneaux de transcription : icône micro dans un cercle
   bleu clair, plutôt qu'un cadre vide. Masqué dès la première ligne (voir
   addTranscriptLine / addStudyTranscriptLine). */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 32px 16px;
  text-align: center;
}

.empty-state-icon-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #e8f0ff;
  color: #1a56db;
  margin-bottom: 6px;
}

.empty-state-icon-circle .icon {
  width: 22px;
  height: 22px;
}

.empty-state-title {
  margin: 0;
  font-weight: 700;
  color: #333;
  font-size: 0.95rem;
}

.empty-state-subtitle {
  margin: 0;
  color: #888;
  font-size: 0.82rem;
}

/* Avertissement sous "Ta réponse" (Askesis) : phrase-signal permettant de
   terminer un tour immédiatement. Volontairement voyant (rouge + icône) —
   contrairement à l'ancienne version discrète, c'est une information utile
   à ne pas manquer, pas une simple légende. Rouge réutilisé tel quel depuis
   .link-button-danger (bascule "réponses courtes" côté Negotium) plutôt que
   d'introduire une nouvelle valeur de rouge dans la palette.
   position: sticky (comme .modal-header plus bas) : vérifié en conditions
   réelles, une réponse un peu longue fait grandir #study-transcript, et le
   scroll automatique vers sa dernière ligne (scrollStudyTranscriptIntoViewIfIdle)
   pousse ce bandeau hors du viewport en quelques dizaines de secondes — sans
   ça il redevient invisible pile quand il est le plus utile, en pleine
   réponse longue. .panel n'a pas de scroll interne (c'est la page entière
   qui défile, voir commentaire de scrollStudyTranscriptIntoViewIfIdle dans
   app.js), donc le conteneur de scroll le plus proche est la fenêtre elle-
   même : top: 0 l'accroche au sommet du viewport, pas juste au sommet de
   .panel. Fond opaque nécessaire pour ne pas laisser le texte du transcript
   défiler visuellement au travers une fois accroché. */
.study-answer-hint {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: -6px -20px 12px;
  padding: 6px 20px;
  background: #fff;
  box-shadow: 0 4px 6px -4px rgba(0, 0, 0, 0.12);
  color: #c62828;
  font-size: 0.78rem;
  font-style: italic;
}

.study-answer-hint .icon {
  margin-top: 1px;
  color: #c62828;
}

/* Rappel "silence prolongé" (voir armStudySilenceNudge/pulseStudyEndPhraseHint
   dans app.js) : pulsation visuelle temporaire uniquement — pas de son, pas
   de message, l'avatar n'intervient jamais. 3 pulsations de 0.8s = ~2.4s au
   total, puis l'animation s'arrête et l'élément retombe sur ce style de base
   (0%/100% identiques à .study-answer-hint) : pas besoin de retirer la
   classe après coup. Pour la rejouer (rappel suivant), le JS retire puis
   rajoute la classe avec un reflow forcé entre les deux. */
@keyframes study-hint-pulse {
  0%,
  100% {
    box-shadow: 0 4px 6px -4px rgba(0, 0, 0, 0.12);
    background: #fff;
  }
  50% {
    box-shadow: 0 0 0 4px rgba(198, 40, 40, 0.3);
    background: #fdeaea;
  }
}

.study-answer-hint.pulse {
  animation: study-hint-pulse 0.8s ease-in-out 3;
}

/* Bandeau "Raiden suggère, vous décidez..." : fond bleu très clair, icône
   (i), texte bleu foncé. (Une seconde définition en double plus bas dans le
   fichier repeignait silencieusement ce texte en gris italique via la
   cascade — supprimée, ce n'était pas une intention de design à deux
   niveaux mais un oubli de nettoyage.) */
.suggestion-disclaimer {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 14px 0;
  padding: 10px 12px;
  background: #eaf1ff;
  color: #1a3f8f;
  border-radius: 8px;
  font-size: 0.8rem;
  font-style: normal;
  line-height: 1.4;
}

.suggestion-disclaimer .icon {
  margin-top: 1px;
  color: #1a56db;
}

/* Agora — accent ambre/orange, distinct du bleu Negotium (#1a56db) et du
   rouge/bordeaux Askesis (#7a1f2b). Même teinte réutilisée pour
   .path-card-accent-amber (voir Phase 2, page d'accueil) — cohérence
   visuelle de la marque Agora. */
.agora-radar-feed {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  max-width: 1000px;
  margin: 0 0 20px;
  padding: 12px 16px;
  background: #fffbeb;
  border: 1px solid #d97706;
  border-radius: 12px;
}

.agora-radar-feed h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-family: var(--hud-font-ui);
  font-size: var(--hud-size-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #b45309;
}

.agora-radar-feed h2 .icon {
  color: #b45309;
}

.agora-radar-entry {
  margin: 0;
  padding: 4px 0 4px 26px;
  font-family: var(--hud-font-ui);
  font-size: var(--hud-size-secondary);
  font-style: italic;
  color: #92400e;
  border-top: 1px solid rgba(217, 119, 6, 0.2);
}

.agora-radar-entry:first-child {
  border-top: none;
}

/* Réaction à la réponse RÉELLE du conseiller (#reaction-box/#agora-reaction-box,
   mode Ordinateur uniquement — voir server.js getEvaluation). Même teinte ambre
   que .agora-radar-feed (cohérence : les deux sont des retours d'observation,
   pas des suggestions à suivre) — largeur pleine comme le radar, pas une
   colonne de #panels (voir le commentaire HTML sur ces deux blocs). */
#reaction-box,
#agora-reaction-box {
  width: 100%;
  max-width: 1000px;
  margin: 0 0 20px;
  background: #fffbeb;
  border-color: #d97706;
}

#reaction-box h2,
#agora-reaction-box h2 {
  margin-bottom: 10px;
  font-size: 0.95rem;
  color: #b45309;
}

.reaction-content {
  margin: 0;
  font-family: var(--hud-font-ui);
  font-size: var(--hud-size-main);
  line-height: 1.35;
}

.reaction-badge {
  display: inline-block;
  margin-right: 6px;
}

.reaction-comment {
  color: #333;
}

/* Nuance de la phrase de commentaire selon le verdict — le badge (✅/🟠/🔴)
   porte déjà l'essentiel du signal visuel, cette couleur de texte est un
   renfort discret, pas le seul indicateur (jamais de code couleur seul). */
.reaction-bon .reaction-comment {
  color: #1a7f37;
}

.reaction-moyen .reaction-comment {
  color: #b45309;
}

.reaction-risque .reaction-comment {
  color: #c62828;
}

/* Raiden Predict (#predict-box/#agora-predict-block, voir server.js
   getPredict) — teinte violette dédiée, distincte de l'ambre de
   #reaction-box (retour sur le passé) et du vert de #suggestion-box
   (réaction au tour courant) : Predict est le seul des trois tourné vers
   l'anticipation. Même largeur pleine que #reaction-box, pas une colonne de
   #panels. */
.icon-predict {
  color: #6d28d9;
}

#predict-box {
  width: 100%;
  max-width: 1000px;
  margin: 0 0 20px;
  background: #f5f3ff;
  border-color: #6d28d9;
}

#predict-box h2 {
  margin-bottom: 10px;
  font-size: var(--hud-size-label);
  color: #6d28d9;
}

.predict-content {
  font-family: var(--hud-font-ui);
  font-size: var(--hud-size-secondary);
  line-height: 1.5;
}

.predict-risque {
  margin: 0 0 8px;
}

.predict-recommandation-list {
  margin: 0;
  padding-left: 20px;
}

.predict-recommandation-list li {
  margin-bottom: 4px;
}

.predict-recommandation-list:empty {
  display: none;
}

/* "Raiden a besoin de vous" (#info-manquante-box, Negotium uniquement — voir
   server.js buildInfoManquanteInstructions). Teinte rouge/urgente dédiée,
   distincte du violet Predict/de l'ambre Reaction/du vert Suggestion : seul
   panneau qui demande une ACTION immédiate du conseiller (taper une
   réponse), pas juste une information à lire. Même largeur pleine que les
   autres panneaux hors grille. */
.icon-info-manquante {
  color: #dc2626;
}

#info-manquante-box {
  width: 100%;
  max-width: 1000px;
  margin: 0 0 20px;
  background: #fef2f2;
  border-color: #dc2626;
}

#info-manquante-box h2 {
  margin-bottom: 10px;
  font-size: var(--hud-size-label);
  color: #dc2626;
}

.info-manquante-attente-fr,
.info-manquante-attente-traduite,
#info-manquante-saisie-block label,
.info-manquante-reponse-traduite,
.info-manquante-verification {
  font-family: var(--hud-font-ui);
}

.info-manquante-attente-fr {
  margin: 0 0 4px;
  font-size: var(--hud-size-main);
  font-weight: 600;
  color: #333;
}

.info-manquante-attente-traduite {
  margin: 0 0 2px;
  font-size: var(--hud-size-main);
  color: #333;
}

.info-manquante-attente-phonetique,
.info-manquante-phonetique {
  font-family: var(--hud-font-mono);
}

.info-manquante-attente-phonetique {
  margin: 0 0 16px;
  color: #7f1d1d;
  font-style: normal;
  font-size: 19px;
}

#info-manquante-saisie-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#info-manquante-saisie-block label {
  font-size: var(--hud-size-secondary);
  font-weight: 600;
  color: #444;
}

#info-manquante-box textarea {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
}

#info-manquante-submit {
  align-self: flex-start;
}

#info-manquante-result-block {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #fecaca;
}

.info-manquante-result-label,
.info-manquante-verification-label {
  margin: 0 0 4px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #7f1d1d;
}

.info-manquante-reponse-traduite {
  margin: 0 0 12px;
  font-weight: 600;
  color: #333;
}

.info-manquante-phonetique {
  margin: 0 0 12px;
  color: #7f1d1d;
  font-style: normal;
  font-size: 19px;
}

.info-manquante-verification {
  margin: 0;
  color: #555;
}

/* Bloc Predict côté Agora : même habillage visuel que .agora-suggestion-block
   (voir plus bas) mais une classe dédiée plutôt que la même — il ne doit
   JAMAIS être sélectionné par la boucle activeBlocks de startAgoraCall (voir
   app.js), qui ne connaît que les 8 marqueurs standard/débat de
   AGORA_BLOCK_SEQUENCES, pas "predict". */
.agora-predict-block {
  margin: 0 0 16px;
  padding: 12px;
  background: #f5f3ff;
  border: 1px solid #ddd6fe;
  border-radius: 8px;
}

.agora-predict-block h3 {
  margin: 0 0 4px;
  font-family: var(--hud-font-ui);
  font-size: var(--hud-size-secondary);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #6d28d9;
}

.agora-predict-block .predict-risque,
.agora-predict-block .predict-recommandation-list {
  font-family: var(--hud-font-ui);
  font-size: var(--hud-size-secondary);
}

/* Clignotement de signalement (voir pulsePredictBox dans app.js) — même
   pattern que .study-answer-hint.pulse : itérations FIXES, s'arrête toute
   seule, pas de JS pour la stopper. Rejouée à chaque nouvelle prédiction
   (classList.remove puis re-add avec reflow forcé, voir app.js). */
@keyframes predict-pulse {
  0%,
  100% {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(109, 40, 217, 0.35);
  }
}

.predict-pulse {
  animation: predict-pulse 0.9s ease-in-out 4;
}

/* Suggestion Agora : 4 blocs labellisés (standard ou débat, voir
   AGORA_BLOCK_SEQUENCES dans app.js — les 4 non pertinents pour la
   situation en cours restent dans le DOM mais masqués via .hidden plutôt
   que reconstruits à chaque suggestion). */
.agora-suggestion-block {
  margin: 0 0 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid #f0e4d0;
}

.agora-suggestion-block:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.agora-suggestion-block h3 {
  margin: 0 0 4px;
  font-family: var(--hud-font-ui);
  font-size: var(--hud-size-secondary);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #b45309;
}

.agora-suggestion-block p {
  margin: 0;
  font-family: var(--hud-font-ui);
  font-size: var(--hud-size-main);
  line-height: 1.35;
}

/* Ligne compteur de suggestions gratuites + lien confidentialité, alignés
   sur la même ligne. */
.suggestion-quota-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px 0;
}

.suggestion-quota {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #999;
  font-size: 0.78rem;
}

/* Bloc de blocage une fois le quota gratuit épuisé : fond orange clair,
   icône cadenas dans un cercle orange, bouton plein orange avec couronne.
   (Même nettoyage que .suggestion-disclaimer ci-dessus : une seconde
   définition en double plus bas écrasait padding/radius sans y ajouter
   d'intention de design distincte — supprimée.) */
.quota-exhausted {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 12px;
  padding: 20px 16px;
  border: 1px solid #f0c36d;
  background: #fff8ec;
  border-radius: 12px;
  text-align: center;
}

.quota-exhausted-icon-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fce8c6;
  color: #b3720a;
  margin-bottom: 10px;
}

.quota-exhausted p {
  margin: 0 0 14px 0;
  color: #7a4b00;
  font-size: 0.92rem;
  line-height: 1.5;
}

.transcript-line {
  margin: 0 0 8px 0;
}

.transcript-line:last-child {
  margin-bottom: 0;
}

.transcript-line .speaker-label {
  font-weight: 700;
}

.transcript-line.role-conseiller .speaker-label {
  color: #1a56db;
}

.transcript-line.role-client .speaker-label {
  color: #111;
}

/* Mode "Sur ordinateur" (voir isOrdinateurMode dans app.js) : étiquetage par
   SOURCE (micro vs flux système) plutôt que par rôle diarizé — mêmes
   couleurs que Conseiller/Client pour rester visuellement cohérent (Vous =
   le professionnel, comme Conseiller ; Interlocuteur = l'autre partie,
   comme Client). */
.transcript-line.role-vous .speaker-label {
  color: #1a56db;
}

.transcript-line.role-interlocuteur .speaker-label {
  color: #111;
}

.transcript-translation {
  margin: -4px 0 8px 0;
  color: #999;
  font-size: 0.85rem;
  font-style: italic;
}

.transcript-translation:last-child {
  margin-bottom: 0;
}

.interim {
  display: block;
  margin-top: 8px;
  color: #999;
  font-style: italic;
}

#suggestion-box h2 {
  color: #1a7f37;
}

#latest-suggestion {
  margin: 0 0 10px 0;
  color: #1a7f37;
  font-weight: 700;
  font-size: 1.05rem;
  white-space: pre-wrap;
}

.suggestion-translation {
  color: #999;
  font-weight: 400;
  font-style: italic;
  font-size: 0.85em;
}

/* Suggestion traduite (langue du client) : noir/gras au lieu du vert par
   défaut, uniquement pour la suggestion la plus récente. */
.suggestion-client-lang {
  color: #111;
  font-weight: 700;
}

.suggestion-phonetic {
  color: #c62828;
  font-weight: 400;
  font-style: normal;
  font-size: 0.9em;
}

/* Question de relance en fin de suggestion : même bleu que le bouton
   "Terminer l'appel" (#1a56db), pour sauter aux yeux sans se confondre avec
   le vert de l'en-tête "Suggestion" ni le texte principal en noir. */
.suggestion-relance {
  color: #1a56db;
  font-weight: 700;
}

.link-button {
  display: inline-block;
  align-self: flex-start;
  margin: 0 0 10px 0;
  padding: 0;
  border: none;
  background: none;
  color: #1a56db;
  font-size: 0.85rem;
  text-decoration: underline;
  cursor: pointer;
}

/* Bascule "réponses courtes" : rouge distinct du bleu de la question de
   relance (.suggestion-relance) et du bleu des liens habituels — pas de
   confusion possible entre les deux usages de couleur dans ce panneau. */
.link-button-danger {
  color: #c62828;
}

.suggestion-list {
  overflow-y: auto;
  max-height: 420px;
  padding-right: 4px;
}

.previous-suggestion-item {
  margin: 0 0 14px 0;
  white-space: pre-wrap;
  color: #aaa;
  font-weight: 400;
  font-size: 0.85rem;
}

.previous-suggestion-item:last-child {
  margin-bottom: 0;
}

.suggestion-time {
  font-weight: 400;
  opacity: 0.7;
  font-size: 0.8em;
}

.suggestion-quota {
  margin: 0 0 12px 0;
  color: #999;
  font-size: 0.78rem;
}

.suggestion-confidence-badge {
  margin-right: 2px;
}

.quota-exhausted button {
  margin: 0;
}

.hidden {
  display: none !important;
}

/* L'image raiden-hero.png sert de fond plein écran à l'onboarding — le
   "logo" RAIDEN qu'elle contient reste ainsi visible, fondu dans le fond,
   sans cadre séparé. position:fixed + inset:0 fait que ce fond couvre
   toute la page indépendamment des contraintes de largeur de <body>. */
#welcome-screen,
#privacy-screen,
#study-type-screen,
#study-examiner-screen,
#study-context-screen {
  position: fixed;
  inset: 0;
  overflow-y: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  box-sizing: border-box;
  background-image: url('raiden-hero.png');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  /* Teinte de repli le temps que l'image charge, proche du gris de l'image. */
  background-color: #e9ebe7;
}

/* Même mécanisme de centrage que le bloc ci-dessus (position:fixed + flex
   center), mais SANS le fond raiden-hero.png : ces 4 écrans n'ont jamais eu
   ce fond (juste le gris #f5f6f8 hérité du body) et ce correctif ne change
   que le centrage, pas leur habillage visuel déjà validé. */
#askesis-home-screen,
#agora-situation-screen,
#agora-sujet-screen,
#org-space-screen {
  position: fixed;
  inset: 0;
  overflow-y: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  box-sizing: border-box;
}

/* Tout premier écran d'accueil : fond blanc épuré, zéro friction — juste le
   logo et les deux cartes PRO/TRAINING, pas d'image de fond ni de carte
   semi-transparente par-dessus. */
#path-choice-screen {
  position: fixed;
  inset: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* flex-start plutôt que center : avec overflow-y:auto, du contenu centré
     qui dépasse la hauteur de l'écran peut voir son bord de départ (donc
     le logo, premier enfant) rogné et impossible à atteindre au scroll
     dans certains navigateurs. flex-start garantit que le logo reste
     toujours entièrement visible en haut, quelle que soit la hauteur du
     contenu. */
  justify-content: flex-start;
  gap: 36px;
  padding: 32px 20px;
  box-sizing: border-box;
  /* Mont Olympe visible en arrière-plan : superposition blanche
     semi-transparente (premier calque, au-dessus) par-dessus l'image
     (second calque), assez légère pour que l'image reste nettement
     visible tout en gardant le contenu (cartes, textes) lisible. */
  background-image: linear-gradient(rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.45)),
    url('olympe-fond.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #fff;
}

/* Bloc logo + slogan (gauche) et sélecteur de langue (droite), sur la
   même ligne en haut de la page. #home-nav est de nouveau un enfant
   direct de #path-choice-screen juste après ce bloc (voir index.html) —
   le wrapper intermédiaire .home-header-block a été retiré. */
.home-topbar {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  /* Pas de max-width ici : la barre doit toujours atteindre les deux bords
     de la page (avec la marge de #path-choice-screen comme seule
     respiration), sinon le sélecteur de langue se retrouve avec un espace
     vide après lui sur les écrans larges. */
  width: 100%;
  /* Écrase l'align-items:center du parent (#path-choice-screen) : sans ça,
     cette barre se retrouve centrée au lieu d'être collée aux bords de la
     page. */
  align-self: stretch;
}

.home-brand {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}

.home-logo {
  width: 110px;
  height: auto;
}

.home-tagline {
  color: #888;
  font-style: italic;
  font-size: 0.85rem;
}

.home-lang-switcher {
  margin-bottom: 0;
}

/* Sous-titre fixe sous la barre logo/langue, au-dessus du menu — même
   famille (italique, gris) que .home-tagline mais plus discret (taille
   inférieure + opacité réduite), pour rester secondaire par rapport au
   slogan principal. Centré : cohérent avec .home-nav juste en dessous, qui
   est lui-même centré (voir plus bas) — un alignement à gauche aurait
   semblé accroché au bloc logo au lieu de faire la transition vers le menu.
   Marge négative en haut : #path-choice-screen a gap:36px entre TOUS ses
   enfants directs, ce qui aurait sinon créé un espace disproportionné pour
   une simple ligne de texte fine. */
.home-hero-subtitle {
  width: 100%;
  margin: -20px 0 0;
  text-align: center;
  color: #888;
  font-style: italic;
  font-size: 0.78rem;
  opacity: 0.85;
}

/* Barre de navigation de l'écran d'accueil — affichage seulement pour
   l'instant, pas de contenu/lien fonctionnel derrière ces 3 onglets. */
.home-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 28px;
  width: 100%;
}

.home-nav-link {
  padding: 0;
  border: none;
  background: none;
  color: #1a56db;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.15s ease;
}

.home-nav-link:hover {
  color: #12408f;
  text-decoration: underline;
}

/* Onglet "Confidentialité & Garde-fous" de l'écran d'accueil : ancré en
   bas à droite de la fenêtre (pas du conteneur défilant), donc toujours
   visible même si la page défile. #path-choice-screen est déjà
   position:fixed, ce qui n'affecte pas ce comportement : position:fixed
   se positionne toujours par rapport au viewport, sauf transform/filter
   sur un ancêtre (absent ici). */
.home-privacy-link {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 10;
  color: #1a56db;
}

.info-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: none;
  background: none;
  color: #666;
  font-size: 0.8rem;
  text-decoration: underline;
  cursor: pointer;
  white-space: nowrap;
}

.info-link .icon {
  width: 14px;
  height: 14px;
}

/* Carte semi-transparente qui porte le formulaire, pour garder un contraste
   texte suffisant par-dessus l'image de fond. */
.welcome-card {
  width: 100%;
  max-width: 480px;
  max-height: 100%;
  overflow-y: auto;
  padding: 32px 24px 36px;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

/* Écrans à cartes (type d'examen, examinateur) : un peu plus large pour
   accueillir la grille sans trop la compresser. */
.welcome-card.wide {
  max-width: 640px;
}

.welcome-subtitle {
  color: #666;
  margin-bottom: 24px;
}

@media (max-width: 480px) {
  #welcome-screen,
  #privacy-screen,
  #study-type-screen,
  #study-examiner-screen,
  #study-context-screen {
    padding: 20px 16px;
    /* background-attachment: fixed est capricieux sur iOS Safari — on
       repasse en scroll normal sur mobile. */
    background-attachment: scroll;
  }

  #askesis-home-screen,
  #agora-situation-screen,
  #agora-sujet-screen,
  #org-space-screen {
    padding: 20px 16px;
  }

  .welcome-card {
    padding: 20px 16px 28px;
    border-radius: 12px;
  }

  #path-choice-screen {
    padding: 20px 16px;
    gap: 24px;
  }

  .home-topbar {
    flex-wrap: wrap;
    row-gap: 12px;
  }
}

.lang-switcher {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 16px;
  font-size: 0.8rem;
  color: #666;
}

.lang-switcher select {
  padding: 4px 8px;
  font-size: 0.85rem;
  border: 1px solid #ccc;
  border-radius: 6px;
}

#profile-form,
#study-context-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: left;
}

#profile-form label,
#study-context-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.9rem;
  color: #444;
}

#profile-form select,
#profile-form input,
#study-context-form select,
#study-context-form input,
#study-context-form textarea,
#end-email-panel input,
#agora-bilan-email-panel input,
#info-manquante-box textarea {
  padding: 8px;
  font-size: 1rem;
  font-family: inherit;
  border: 1px solid #ccc;
  border-radius: 6px;
}

#study-context-form textarea {
  resize: vertical;
}

/* Configuration avancée repliable (mode, philosophie, spécialité, ville) —
   fermée par défaut : l'onboarding Negotium ne demande qu'un métier. */
#personalize-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#end-email-panel label,
#agora-bilan-email-panel label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 12px 0;
  font-size: 0.9rem;
  color: #444;
  text-align: left;
}

.end-email-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Bilan de fin de session Agora (#agora-bilan-choice-panel/-result) — voir
   server.js handleAgoraEndCall. Accent ambre, cohérent avec le reste
   d'Agora, distinct du vert Negotium (#summary-result). */
.agora-bilan-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 12px;
}

#agora-bilan-result h2 {
  font-size: 1.1rem;
  color: #b45309;
  margin: 0 0 16px 0;
}

.agora-bilan-block {
  margin-bottom: 16px;
}

.agora-bilan-block h3 {
  font-size: 0.9rem;
  color: #92400e;
  margin: 0 0 4px 0;
}

.agora-bilan-block p {
  margin: 0;
  white-space: pre-wrap;
}

#study-cv-fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.upload-status {
  margin: -8px 0 0 0;
  font-size: 0.8rem;
  color: #666;
}

.upload-status.upload-success {
  color: #1a7f37;
}

.upload-status.upload-error {
  color: #b3261e;
}

/* Input file personnalisé : le <input type="file"> natif reste présent et
   focusable au clavier (pattern "visually-hidden", pas display:none) pour
   préserver l'association <label>/<input> et la navigation clavier — seul
   son texte natif non traduisible ("Choisir un fichier" / navigateur) est
   masqué visuellement, remplacé par le bouton et le nom de fichier ci-après. */
.file-input-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}

.file-input-native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.file-input-wrapper:focus-within .file-input-button {
  outline: 2px solid #1a56db;
  outline-offset: 2px;
}

.file-input-filename {
  font-size: 0.85rem;
  color: #666;
}

/* Écran d'accueil Negotium/Askesis : cartes empilées par défaut (mobile),
   côte à côte à partir d'une largeur d'écran suffisante (desktop/tablette). */
.path-cards {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  max-width: 560px;
}

@media (min-width: 700px) {
  .path-cards {
    flex-direction: row;
    align-items: stretch;
    /* flex-wrap (nouveau, voir 3e carte Agora) : sur 3 cartes, une largeur
       de conteneur fixe forcerait les 3 côte à côte à se comprimer bien
       trop tôt (autour de 700-900px, en dessous de leur largeur minimale
       confortable de 320px). Le wrap laisse la 3e carte passer proprement
       à la ligne (2+1) tant que la largeur ne suffit pas pour 3, plutôt que
       d'écraser le contenu des 3 cartes. */
    flex-wrap: wrap;
    justify-content: center;
    max-width: 1450px;
  }

  .path-card {
    flex: 1 1 320px;
    min-width: 0;
    max-width: 460px;
  }
}

.path-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 32px 28px 28px;
  text-align: center;
  /* Fond blanc — revenu en arrière sur un essai précédent de fond bleu
     clair uniforme sur toute la carte : seul le CADRE DU LOGO (voir
     .path-card-logo-frame plus bas) doit être rempli de bleu, pas la carte
     entière. Couleur définie par .path-card-accent-* — fine et colorée
     plutôt que grise, dès l'état normal (pas seulement au survol). */
  background-color: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 16px;
  cursor: pointer;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.path-card:hover {
  transform: translateY(-2px);
}

/* Couleurs d'accent par carte, cohérentes avec les logos respectifs :
   bleu (yeux de Negotium), rouge/bordeaux (texte "ASKESIS"). Chaque
   propriété qui doit suivre l'accent (bordure, sous-titre, trait, icône,
   bouton flèche) a sa propre déclinaison ci-dessous plutôt qu'une
   variable CSS, pour rester compatible sans surprise entre navigateurs. */
.path-card-accent-blue {
  border-color: #1a56db;
}

.path-card-accent-blue:hover {
  box-shadow: 0 4px 16px rgba(26, 86, 219, 0.18);
}

.path-card-accent-blue .path-card-subtitle {
  color: #1a56db;
}

.path-card-accent-blue .path-card-subtitle-underline {
  background: #1a56db;
}

.path-card-accent-blue .path-card-icon-circle {
  border-color: #1a56db;
  color: #1a56db;
}

.path-card-accent-blue .path-card-arrow-btn {
  background: #1a56db;
}

.path-card-accent-red {
  border-color: #7a1f2b;
}

.path-card-accent-red:hover {
  box-shadow: 0 4px 16px rgba(122, 31, 43, 0.18);
}

.path-card-accent-red .path-card-subtitle {
  color: #7a1f2b;
}

.path-card-accent-red .path-card-subtitle-underline {
  background: #7a1f2b;
}

.path-card-accent-red .path-card-icon-circle {
  border-color: #7a1f2b;
  color: #7a1f2b;
}

.path-card-accent-red .path-card-arrow-btn {
  background: #7a1f2b;
}

/* Agora : ambre/orange, même teinte que .agora-radar-feed/
   .agora-suggestion-block (cohérence de marque) — distinct du bleu Negotium
   et du rouge/bordeaux Askesis. */
.path-card-accent-amber {
  border-color: #b45309;
}

.path-card-accent-amber:hover {
  box-shadow: 0 4px 16px rgba(180, 83, 9, 0.18);
}

.path-card-accent-amber .path-card-subtitle {
  color: #b45309;
}

.path-card-accent-amber .path-card-subtitle-underline {
  background: #b45309;
}

.path-card-accent-amber .path-card-icon-circle {
  border-color: #b45309;
  color: #b45309;
}

.path-card-accent-amber .path-card-arrow-btn {
  background: #b45309;
}

/* Cadre du logo : l'image remplit tout le cadre (object-fit:cover), sans
   padding — les 3 logos sources sont carrés/quasi-carrés et pensés pour
   être recadrés en plein cadre, pas encadrés avec une marge. */
.path-card-logo-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 150px;
  box-sizing: border-box;
  border-radius: 20px;
  border: 1px solid #e5e5e5;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
  background: #fff;
  overflow: hidden;
  margin-bottom: 4px;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.path-card-logo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Déclenché en JS au clic sur la carte, en même temps que la voix off —
   retiré après l'animation (voir triggerPathCardActivation). Appliqué au
   cadre entier (pas seulement à l'image) pour que le zoom ne soit pas
   rogné par overflow:hidden. */
.path-card-logo-frame.zoom-pulse {
  transform: scale(1.7);
}

/* Icône ronde (casque Negotium / toque Askesis) juste sous le logo, fond
   clair et bordure dans la couleur d'accent de la carte. */
.path-card-icon-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fafafa;
  border: 2px solid #ddd;
}

.path-card-icon-circle .icon {
  width: 22px;
  height: 22px;
}

/* Icône Agora (logo-discussion.png) : même cercle englobant EXACTEMENT que
   casque/toque ci-dessus (44px + bordure 2px de la couleur d'accent,
   .path-card-icon-circle-image n'ajoute plus aucune surcharge — un essai
   précédent retirait fond/bordure pour éviter un double anneau avec le
   cercle déjà dessiné dans le PNG, mais ça réduisait aussi le diamètre du
   cercle englobant lui-même, cassant l'alignement demandé). L'image elle-
   même n'est PAS calée sur les 22px des glyphes SVG : contrairement à eux
   (dessinés bord à bord dans leur viewBox), logo-discussion.png contient
   déjà une marge interne autour de son propre cercle ET un ratio non carré
   (287×192) — object-fit:contain sur 22px la ferait paraître deux fois
   plus petite que les SVG, pas alignée. 30px (bordée par cette marge
   interne + le ratio) donne un rendu visuellement comparable en pratique
   — vérifié par capture d'écran côte à côte, pas deviné. */
.path-card-icon-image {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.path-card-subtitle {
  color: #666;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.path-card-subtitle-underline {
  display: block;
  width: 36px;
  height: 3px;
  border-radius: 2px;
  background: #ccc;
  margin: 0 0 4px 0;
}

.path-card-text {
  margin: 0;
  color: #444;
  font-size: 0.92rem;
  line-height: 1.5;
  text-align: center;
}

/* Bouton rond flèche en bas de carte — purement visuel (un <span>, pas un
   <button>, pour ne pas imbriquer d'élément interactif dans .path-card qui
   est déjà lui-même un bouton) : le clic est géré par la carte entière. */
.path-card-arrow-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: #fff;
  margin-top: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  transition: transform 0.15s ease;
}

.path-card:hover .path-card-arrow-btn {
  transform: translateX(3px);
}

.path-card-arrow-btn .icon {
  width: 18px;
  height: 18px;
}

/* Bloc de texte commun aux deux cartes (traduction + email), affiché une
   seule fois sous les cartes plutôt que dupliqué dans chacune. */
.home-common {
  width: 100%;
  max-width: 640px;
  text-align: center;
}

.home-common-text {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  margin: 0;
  color: #444;
  font-size: 0.95rem;
  line-height: 1.6;
  text-align: left;
}

.home-common-text .icon {
  flex-shrink: 0;
  margin-top: 3px;
  color: #1a56db;
}

.home-common-footnote {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 10px 0 0 0;
  color: #1a56db;
  font-size: 0.78rem;
}

/* Ancré au bas de l'écran (position:absolute dans #path-choice-screen, qui
   est position:fixed) plutôt que dans le flux normal : reste toujours
   visible sans agrandir le contenu défilable ni pousser les cartes vers
   le haut. */
/* En flux normal (pas position:absolute) : avec le contenu de l'écran
   d'accueil désormais plus haut qu'un viewport (icônes, sous-titres, etc.),
   un ancrage absolu à "bottom:12px" du conteneur position:fixed le plaçait
   à 12px du bas de la fenêtre D'ORIGINE (100vh), pas du bas du contenu
   réel — il pouvait donc se retrouver au-dessus de .home-common une fois
   celui-ci plus grand qu'un viewport. En flux normal, il reste toujours
   après tout le reste, quelle que soit la hauteur du contenu. */
.home-footer {
  /* Pas de margin-top : #path-choice-screen espace déjà tous ses enfants
     directs de 36px via son propre "gap" (flex column). */
  margin: 0;
  text-align: center;
  color: #999;
  font-size: 11px;
}

.study-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin: 16px 0;
  text-align: left;
}

.study-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.study-card:hover {
  border-color: #1a56db;
  box-shadow: 0 2px 12px rgba(26, 86, 219, 0.15);
}

.study-card strong {
  font-size: 1rem;
  color: #222;
}

.study-card span {
  color: #666;
  font-size: 0.85rem;
}

/* Écran "Choisis ton examinateur" : 6 personnalités, grille 3x2 qui
   repasse en 2x1 puis 1 colonne sur petit écran. Conteneur élargi pour
   laisser respirer les avatars. */
.examiner-select-card {
  max-width: 780px;
}

.examiner-cards {
  grid-template-columns: repeat(3, 1fr);
  text-align: center;
}

@media (max-width: 700px) {
  .examiner-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 420px) {
  .examiner-cards {
    grid-template-columns: 1fr;
  }
}

.examiner-card {
  position: relative;
  align-items: center;
  gap: 6px;
  padding: 20px 14px;
}

/* Survol de la carte entière (ou focus clavier) révèle la description
   complète en overlay léger par-dessus le contenu de la carte. Sur
   tactile (pas de vrai survol), la classe .tooltip-shown est ajoutée en
   JS au premier tap — le tap suivant valide la sélection. */
.examiner-tooltip {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(20, 20, 20, 0.92);
  color: #fff;
  font-size: 0.8rem;
  line-height: 1.5;
  font-style: normal;
  text-align: center;
  border-radius: 12px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease;
  pointer-events: none;
}

.examiner-card:hover .examiner-tooltip,
.examiner-card:focus .examiner-tooltip,
.examiner-card:focus-visible .examiner-tooltip,
.examiner-card.tooltip-shown .examiner-tooltip {
  opacity: 1;
  visibility: visible;
}

.examiner-avatar {
  width: 84px;
  height: 84px;
  object-fit: cover;
  object-position: top center;
  border-radius: 50%;
  border: 1px solid #e5e5e5;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
  margin-bottom: 6px;
}

.examiner-qualifier {
  color: #666;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.examiner-quote {
  color: #888;
  font-size: 0.78rem;
  font-style: italic;
}

/* Avatar de l'examinateur affiché à côté de la question pendant la
   simulation, avec le bouton pour réécouter l'audio de la dernière
   question. */
.study-question-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.study-examiner-avatar {
  width: 56px;
  height: 56px;
  object-fit: cover;
  object-position: top center;
  border-radius: 50%;
  border: 1px solid #e5e5e5;
  flex-shrink: 0;
}

.study-question-content {
  flex: 1;
  min-width: 0;
}

.study-question-content .link-button {
  margin: 8px 0 0 0;
}

.back-link {
  margin-top: 8px;
  padding: 0;
  border: none;
  background: none;
  color: #666;
  font-size: 0.85rem;
  text-decoration: underline;
  cursor: pointer;
}

.checkbox-label {
  display: flex;
  flex-direction: row !important;
  align-items: center;
  gap: 8px !important;
  margin-bottom: 36px;
}

.checkbox-label input {
  width: auto;
}

.call-mode-selector {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  margin: 0 0 36px;
  padding: 0;
  border: none;
}

.call-mode-selector legend {
  font-size: 0.85rem;
  color: #666;
  padding: 0;
}

.call-mode-selector label {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  font-weight: normal;
}

.call-mode-selector input {
  width: auto;
}

#display-media-no-audio-error {
  color: #b3261e;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 20px;
}

/* Notice non bloquante (mode dégradé, pas une erreur bloquante comme
   #display-media-no-audio-error ci-dessus) : partage d'écran arrêté en
   cours d'appel — voir handleDisplayStreamEnded dans app.js. */
#display-stream-ended-notice {
  color: #8a5a00;
  background: #fff8e6;
  border: 1px solid #f0d78c;
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 16px;
}

/* Encadré d'avertissement RGPD sur l'écran de confidentialité, affiché à
   chaque début de session avant la calibration/l'enregistrement. */
.privacy-phrase-block {
  text-align: left;
  margin: 8px 0 0 0;
}

.privacy-phrase-box {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.privacy-phrase-text {
  flex: 1;
  margin: 0;
  white-space: pre-line;
  font-size: 0.9rem;
  color: #222;
  line-height: 1.5;
}

.privacy-copy-btn {
  flex-shrink: 0;
  margin: 0;
}

.categorie-fieldset {
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 12px;
  font-size: 0.9rem;
  color: #444;
}

.categorie-fieldset legend {
  font-weight: 600;
  padding: 0 4px;
}

.field-help {
  color: #666;
  font-size: 0.8rem;
  margin: 4px 0 10px 0;
}

.radio-label {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

.mode-hint {
  margin: -8px 0 0 0;
  padding: 8px 10px;
  border-radius: 6px;
  background: #f2f2f2;
  color: #444;
  font-size: 0.85rem;
}

#profile-form button {
  margin-top: 8px;
}

#calibration-panel {
  text-align: center;
}

#calibration-panel p {
  margin-top: 0;
  font-size: 1.1rem;
}

#summary-result {
  margin-top: 20px;
}

#summary-result h2 {
  font-size: 1rem;
  color: #1a7f37;
  margin: 16px 0 6px 0;
}

#summary-result h2:first-child {
  margin-top: 0;
}

#summary-result p {
  margin: 0 0 8px 0;
}

.summary-confirmation {
  color: #1a7f37;
  font-weight: 700;
  font-size: 1.05rem;
}

.summary-error {
  color: #b3261e;
  font-weight: 600;
}

/* Gamification Askesis : écran d'accueil (rang, XP, streak, épreuve du
   jour), jauge de crédibilité en direct pendant la simulation, et écran de
   résultat façon "combat" en fin de simulation. */
.askesis-stats {
  display: flex;
  gap: 16px;
  margin: 16px 0 24px 0;
}

.askesis-stat-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 12px;
  text-align: left;
}

.askesis-stat-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #666;
}

.askesis-stat-card strong {
  font-size: 1.1rem;
  color: #1a56db;
}

.xp-bar-track {
  width: 100%;
  height: 10px;
  border-radius: 5px;
  background: #e0e0e0;
  overflow: hidden;
}

.xp-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #1a56db, #6a8dff);
  border-radius: 5px;
  transition: width 0.3s ease;
}

.askesis-xp-text {
  font-size: 0.78rem;
  color: #666;
}

.askesis-daily-block {
  margin-bottom: 20px;
}

.askesis-daily-label {
  margin: 0 0 8px 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: #444;
}

.credibility-gauge {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px 0;
}

.credibility-label {
  font-family: var(--hud-font-ui);
  font-size: var(--hud-size-secondary);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--hud-blue);
  white-space: nowrap;
}

.credibility-bar-track {
  flex: 1;
  height: 10px;
  border-radius: 5px;
  background: #e0e0e0;
  overflow: hidden;
}

.credibility-bar-fill {
  height: 100%;
  width: 50%;
  border-radius: 5px;
  background: #e0a300;
  transition: width 0.3s ease, background-color 0.3s ease;
}

.credibility-text {
  font-family: var(--hud-font-ui);
  font-size: var(--hud-size-secondary);
  color: #666;
  white-space: nowrap;
}

#study-feedback {
  font-family: var(--hud-font-ui);
  font-size: var(--hud-size-main);
  line-height: 1.35;
}

.battle-result-score {
  text-align: center;
  margin: 8px 0 20px 0;
}

.battle-result-score .score-value {
  font-size: 2.2rem;
  font-weight: 700;
  color: #1a56db;
}

.battle-result-score .score-label {
  font-size: 0.8rem;
  color: #666;
}

.battle-subscores {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 20px 0;
}

.battle-subscore-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.battle-subscore-label {
  width: 110px;
  flex-shrink: 0;
  font-size: 0.85rem;
  color: #444;
}

.battle-subscore-track {
  flex: 1;
  height: 8px;
  border-radius: 4px;
  background: #e0e0e0;
  overflow: hidden;
}

.battle-subscore-fill {
  height: 100%;
  border-radius: 4px;
  background: #1a56db;
}

.battle-subscore-value {
  width: 32px;
  flex-shrink: 0;
  text-align: right;
  font-size: 0.8rem;
  color: #666;
}

.battle-xp-gain {
  text-align: center;
  margin: 0 0 16px 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: #1a7f37;
}

.battle-rankup-banner {
  margin: 0 0 16px 0;
  padding: 12px 14px;
  border-radius: 8px;
  background: linear-gradient(90deg, #ffd76a, #ffb347);
  color: #5a3d00;
  font-weight: 700;
  text-align: center;
}

/* Modale "Confidentialité & Garde-fous", accessible depuis l'écran
   d'accueil ET pendant l'appel — superposée à l'écran actif, quel qu'il
   soit (position:fixed, z-index élevé, hors de tout écran spécifique). */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.45);
  box-sizing: border-box;
}

.modal-box {
  width: 100%;
  max-width: 640px;
  max-height: 85vh;
  overflow-y: auto;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  text-align: left;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 24px;
  border-bottom: 1px solid #eee;
  position: sticky;
  top: 0;
  background: #fff;
}

.modal-header h2 {
  margin: 0;
  font-size: 1.05rem;
}

.modal-close {
  padding: 4px 8px;
  border: none;
  background: none;
  color: #666;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.modal-body {
  padding: 20px 24px;
}

.modal-section {
  margin-bottom: 28px;
}

.modal-section:last-child {
  margin-bottom: 0;
}

.modal-section h3 {
  margin: 0 0 14px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid #eee;
  font-size: 1rem;
  font-weight: 700;
  color: #1a56db;
}

.modal-section h4 {
  margin: 16px 0 6px 0;
  font-size: 0.92rem;
  font-weight: 700;
  color: #222;
}

.modal-section h4:first-of-type {
  margin-top: 0;
}

.modal-section p {
  margin: 0 0 4px 0;
  color: #444;
  font-size: 0.9rem;
  line-height: 1.55;
}

.modal-badge-list {
  margin: 8px 0 0 0;
  padding-left: 20px;
  color: #444;
  font-size: 0.9rem;
  line-height: 1.6;
}

.modal-never-list {
  margin: 0;
  padding-left: 0;
  list-style: none;
  color: #444;
  font-size: 0.9rem;
  line-height: 1.7;
}

.modal-never-list li {
  padding-left: 18px;
  position: relative;
}

.modal-never-list li::before {
  content: '—';
  position: absolute;
  left: 0;
}

.modal-footer {
  padding: 14px 24px;
  border-top: 1px solid #eee;
  text-align: right;
}

.modal-footer button {
  margin: 0;
}

@media (max-width: 480px) {
  .modal-box {
    max-height: 90vh;
  }

  .modal-header,
  .modal-body,
  .modal-footer {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* Écran interne "Base de connaissances" (RAG Negotium) — refonte visuelle
   calquée sur une maquette de référence (icônes carrées bleu clair,
   colonnes séparées par un filet vertical, illustration à droite). Purement
   habillage : tous les IDs utilisés par app.js (org-list, org-list-empty,
   org-documents-panel, org-name-input...) restent inchangés. */
#org-space-screen .welcome-card.wide {
  max-width: 820px;
  text-align: left;
}

.org-space-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.org-space-header-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: #e8f0ff;
  color: #1a56db;
}

.org-space-header-icon .icon {
  width: 26px;
  height: 26px;
}

.org-space-header-text h1 {
  margin: 0 0 4px;
}

.org-space-header-text .welcome-subtitle {
  margin: 0;
}

.org-space-divider {
  height: 1px;
  background: #eaecef;
  margin: 20px 0;
}

.org-space-layout {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  margin: 0 0 4px;
}

.org-space-column {
  flex: 1 1 320px;
  min-width: 280px;
}

.org-space-column-right {
  border-left: 1px solid #eaecef;
  padding-left: 32px;
  display: flex;
  flex-direction: column;
}

.org-space-subheading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  font-size: 1rem;
}

.org-space-subheading-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #e8f0ff;
  color: #1a56db;
}

.org-space-subheading-icon .icon {
  width: 16px;
  height: 16px;
}

.org-field-label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.85rem;
  font-weight: 500;
  color: #444;
}

.org-create-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.org-input-wrapper {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
}

.org-input-icon {
  position: absolute;
  left: 12px;
  display: flex;
  align-items: center;
  pointer-events: none;
  color: #94a3b8;
}

.org-input-icon .icon {
  width: 16px;
  height: 16px;
}

#org-name-input {
  width: 100%;
  padding: 10px 12px 10px 36px;
  font-size: 0.95rem;
  font-family: inherit;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
}

#org-create-status {
  margin-top: 8px;
}

.org-list-box {
  padding: 14px;
  border: 1px dashed #d0d5dd;
  border-radius: 12px;
  background: #f9fafb;
}

.org-list,
.org-document-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.org-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid #eee;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  font-size: 0.92rem;
}

.org-list-item:hover {
  border-color: #ccc;
}

.org-list-item.selected {
  border-color: #1a56db;
  background: #f0f5ff;
  font-weight: 600;
}

.org-list-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 10px;
  text-align: center;
}

.org-list-empty-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #eef0f3;
  color: #9aa3af;
}

.org-list-empty-icon .icon {
  width: 20px;
  height: 20px;
}

.org-document-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid #eee;
  border-radius: 8px;
  background: #fff;
  font-size: 0.88rem;
}

.org-document-status {
  font-family: ui-monospace, monospace;
  font-size: 0.75rem;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

.org-document-status.status-ready {
  background: #e6f4ea;
  color: #1e7d32;
}

.org-document-status.status-processing,
.org-document-status.status-pending {
  background: #fff4e0;
  color: #92600a;
}

.org-document-status.status-error {
  background: #fdeaea;
  color: #b3261e;
}

.org-space-illustration {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 220px;
  padding: 20px;
  text-align: center;
}

.org-space-illustration-circle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: #e8f0ff;
  color: #1a56db;
}

.org-space-illustration-circle .icon {
  width: 38px;
  height: 38px;
}

.org-space-sparkle {
  position: absolute;
  color: #93c5fd;
  pointer-events: none;
}

.org-space-sparkle-1 {
  top: -4px;
  left: 2px;
  font-size: 14px;
}

.org-space-sparkle-2 {
  top: 14px;
  right: -16px;
  font-size: 10px;
}

.org-space-sparkle-3 {
  bottom: -8px;
  left: -10px;
  font-size: 12px;
}

.org-space-illustration .empty-state-subtitle {
  max-width: 230px;
}

.org-space-footer {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid #eaecef;
  text-align: center;
}

#org-space-screen .back-link {
  margin-top: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: #1a56db;
  text-decoration: none;
}

#org-space-screen .back-link:hover {
  color: #1545b0;
  text-decoration: underline;
}

@media (max-width: 700px) {
  .org-space-column-right {
    border-left: none;
    padding-left: 0;
    padding-top: 24px;
    border-top: 1px solid #eaecef;
  }

  .org-space-header {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Écran "Bienvenue" / personnalisation Negotium — refonte visuelle calquée
   sur une maquette de référence. Purement habillage : tous les IDs/attributs
   utilisés par app.js (profile-form, metier, personalize-toggle,
   input[name="categorie"], org-onboarding-select...) restent inchangés, y
   compris leur imbrication directe dans <label> (document.getElementById
   les cible directement, aucune dépendance à la structure autour). */
#welcome-screen .lang-switcher {
  justify-content: flex-end;
  margin-bottom: 22px;
}

#welcome-screen .lang-switcher select {
  padding: 8px 12px 8px 34px;
  font-size: 0.9rem;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
}

#welcome-screen h1 {
  font-size: 1.7rem;
  color: #0f172a;
}

/* Icône générique en préfixe d'un champ (select ou input) — utilisée sur le
   sélecteur de langue d'interface et sur les champs du formulaire Negotium
   (métier, langue d'appel, spécialité, ville, entreprise, organisation). */
.field-icon-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.field-icon {
  position: absolute;
  left: 12px;
  display: flex;
  align-items: center;
  pointer-events: none;
  color: #94a3b8;
}

.field-icon .icon {
  width: 16px;
  height: 16px;
}

/* Spécificité (1 ID + 1 classe) volontairement supérieure à
   "#profile-form select/input" plus bas (1 ID seul) : sans ça, le
   padding-left serait écrasé par leur "padding: 10px 12px" (shorthand). */
#welcome-screen .field-icon-wrap select,
#welcome-screen .field-icon-wrap input {
  padding-left: 36px;
}

/* Règles plus spécifiques que "#profile-form select, #profile-form input"
   (style.css plus haut, partagé avec #study-context-form) : ajoutées après
   dans la cascade pour ne repeindre QUE Negotium, sans toucher Askesis. */
#profile-form select,
#profile-form input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
}

#profile-form label {
  gap: 8px;
}

#profile-form button[type="submit"] {
  width: 100%;
  margin-top: 6px;
  padding: 12px;
  background: #1a56db;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 600;
}

#profile-form button[type="submit"]:hover {
  background: #1545b0;
}

#personalize-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
}

#personalize-toggle::after {
  content: "⌄";
  font-size: 0.75rem;
  transition: transform 0.15s ease;
}

#profile-form:has(#personalize-panel:not(.hidden)) #personalize-toggle::after {
  transform: rotate(180deg);
}

#profile-form .categorie-fieldset {
  background: #f8f9fb;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px;
}

.categorie-legend {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  font-weight: 600;
  color: #222;
}

.categorie-legend-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: #1a56db;
}

.categorie-legend-icon .icon {
  width: 18px;
  height: 18px;
}

.categorie-fieldset .field-help {
  margin: 8px 0 12px;
}

.categorie-options {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.radio-label {
  flex: 1 1 160px;
  align-items: center;
  gap: 8px;
  margin-bottom: 0;
  padding: 10px 12px;
  border: 1px solid #d0d5dd;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.radio-label:has(input:checked) {
  border-color: #1a56db;
  background: #eef4ff;
}

.mode-hint {
  margin-top: 10px;
}

.tone-style-block {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.tone-style-block .field-help {
  margin-top: 0;
}

@media (max-width: 480px) {
  .categorie-options {
    flex-direction: column;
  }

  /* flex-basis:160px (défini plus haut) s'applique à l'axe principal — une
     fois la colonne passée en column, ça forcerait chaque carte à ~160px de
     hauteur au lieu de s'ajuster à son contenu. */
  .radio-label {
    flex-basis: auto;
  }
}

/* 4 écrans du parcours Askesis (Ton profil, Que veux-tu préparer, Choisis
   ton examinateur, Contexte) — refonte visuelle calquée sur des maquettes
   de référence. Purement habillage : tous les IDs/attributs utilisés par
   app.js (askesis-rank-name, study-type-cards, input[name]..., studyExamType
   conditionnels sur #study-context-form...) restent inchangés. .study-card
   est réutilisée par 2 écrans avec des mises en page différentes -> les deux
   traitements sont scopés par écran pour ne pas se marcher dessus. */
#askesis-home-screen h1,
#study-type-screen h1,
#study-examiner-screen h1,
#study-context-screen h1 {
  font-size: 1.7rem;
  color: #0f172a;
}

/* --- Ton profil Askesis --- */
#askesis-home-screen .askesis-stat-card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 14px;
  padding: 18px;
}

.askesis-daily-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 4px 0 14px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #444;
}

.askesis-daily-label::before,
.askesis-daily-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #e5e7eb;
}

.askesis-daily-label-icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  color: #1a56db;
}

.askesis-daily-label-icon .icon {
  width: 16px;
  height: 16px;
}

/* .study-card fixe display:flex/flex-direction:column/gap/padding,
   .examiner-card fixe position/align-items/gap/padding — cette règle,
   ajoutée après les deux dans la cascade, les repasse en ligne horizontale
   avec accent bleu à gauche, sans toucher .study-card/.examiner-card en
   général (réutilisées ailleurs, voir plus bas). */
.askesis-daily-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  text-align: left;
  padding: 16px 18px;
  border-left: 4px solid #1a56db;
  border-radius: 12px;
}

/* Spécificité ".study-card .askesis-daily-icon" (2 classes) volontairement
   supérieure à ".study-card span" plus haut (1 classe + 1 élément) — même
   piège que ".examiner-qualifier"/".study-card-icon" ci-dessus. */
.study-card .askesis-daily-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #e8f0ff;
  color: #1a56db;
}

.askesis-daily-icon .icon {
  width: 20px;
  height: 20px;
}

.askesis-daily-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Utilisée aussi par la grille "Choisis ton examinateur" (badge sous le nom)
   — même bleu partout, cohérent avec le reste de la refonte. Spécificité
   ".study-card .examiner-qualifier" (2 classes) volontairement supérieure à
   ".study-card span" plus haut (1 classe + 1 élément) : sinon ce dernier
   gagnerait malgré l'ordre, et le badge resterait gris. */
.study-card .examiner-qualifier {
  color: #1a56db;
}

.askesis-home-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 22px;
}

#askesis-see-all-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

#askesis-home-screen .back-link,
#study-type-screen .back-link,
#study-examiner-screen .back-link,
#study-context-screen .back-link {
  margin-top: 20px;
  color: #1a56db;
  font-weight: 600;
  text-decoration: none;
}

#askesis-home-screen .back-link:hover,
#study-type-screen .back-link:hover,
#study-examiner-screen .back-link:hover,
#study-context-screen .back-link:hover {
  text-decoration: underline;
}

/* --- Que veux-tu préparer ? --- */
#study-type-screen .study-card {
  flex-direction: row;
  align-items: center;
  gap: 14px;
  padding: 18px;
}

/* Spécificité ".study-card .study-card-icon" (2 classes) volontairement
   supérieure à ".study-card span" plus haut (1 classe + 1 élément) — même
   piège que ".examiner-qualifier" ci-dessus. */
.study-card .study-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #e8f0ff;
  color: #1a56db;
}

.study-card-icon .icon {
  width: 22px;
  height: 22px;
}

/* --- Choisis ton examinateur --- */
#study-examiner-language-field {
  text-align: center;
  margin-bottom: 14px;
}

.study-examiner-language-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.study-examiner-language-label select {
  width: auto;
  padding: 8px 12px;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
}

#study-examiner-language-field .field-help {
  text-align: center;
}

/* --- Contexte --- */
#study-context-form select,
#study-context-form input,
#study-context-form textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
}

#study-context-form label {
  gap: 8px;
}

#study-context-form button[type="submit"] {
  width: 100%;
  margin-top: 6px;
  padding: 12px;
  background: #1a56db;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 600;
}

#study-context-form button[type="submit"]:hover {
  background: #1545b0;
}

/* Spécificité (1 ID + 1 classe) > ".file-input-button"/".btn-secondary"
   génériques : ne repeint QUE cet écran, pas le bouton d'upload de la Base
   de connaissances qui garde son style neutre existant. */
#study-context-screen .file-input-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  color: #1a56db;
  border: 1px solid #b6c9f2;
}

#study-context-screen .file-input-button:hover {
  background: #f0f5ff;
}

#study-context-screen .file-input-button .icon {
  width: 16px;
  height: 16px;
}

@media (max-width: 700px) {
  .askesis-daily-card {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
}

/* 2 écrans d'onboarding Agora (situation, sujet) — refonte visuelle calquée
   sur des maquettes de référence, cohérente avec Askesis. Purement
   habillage : agoraSituationCards/agoraSujetCards sont sélectionnées par
   "#id .study-card" et les handlers ne lisent que card.dataset, donc
   l'ajout d'icônes en <span> frère de <strong> ne change rien côté JS.
   .study-card-icon est la même classe (et le même scoping de spécificité)
   que sur #study-type-screen — réutilisée telle quelle ici. */
#agora-situation-screen h1,
#agora-sujet-screen h1 {
  font-size: 1.7rem;
  color: #0f172a;
}

#agora-situation-screen .study-card {
  flex-direction: row;
  align-items: center;
  gap: 14px;
  padding: 18px;
}

/* Écran "sujet" : cartes texte seul (pas d'icône), centrées, plus sobres
   que l'écran "situation" — cohérent avec la maquette. */
#agora-sujet-screen .study-cards {
  text-align: center;
}

#agora-sujet-screen .study-card {
  align-items: center;
  justify-content: center;
  text-align: center;
}

#agora-sujet-screen .study-card strong {
  color: #0f172a;
}

#agora-situation-screen .back-link,
#agora-sujet-screen .back-link {
  margin-top: 20px;
  color: #1a56db;
  font-weight: 600;
  text-decoration: none;
}

#agora-situation-screen .back-link:hover,
#agora-sujet-screen .back-link:hover {
  text-decoration: underline;
}

.agora-sujet-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 20px;
}

/* Les deux boutons sont dans .agora-sujet-actions (déjà margin-top:20px) —
   on annule le margin-top individuel de #agora-sujet-back (règle partagée
   plus haut) pour qu'il reste aligné avec #agora-sujet-skip sur la même
   ligne. */
.agora-sujet-actions #agora-sujet-back,
#agora-sujet-skip {
  margin: 0;
  font-weight: 600;
  text-decoration: none;
}

#agora-sujet-skip:hover {
  text-decoration: underline;
}

/* ============================================================================
   Design "HUD" — zone transcription/suggestion en direct (Negotium, Askesis,
   Agora). Direction visuelle assumée, distincte du reste de l'app : bordures
   bleues franches, labels majuscules espacés, coins peu arrondis. Tokens
   dans :root en haut de fichier. Tailles réelles (pas celles des maquettes
   de référence) : 24px suggestion principale, 16px labels, 14px secondaire.
   ============================================================================ */

/* --- Audio Wave Meter : barres animées, un AnalyserNode par mode actif à
   la fois (voir createWaveMeter dans app.js) — jamais un second flux micro,
   juste une lecture du MediaStream déjà capturé pour Deepgram. */
.hud-wave-meter {
  display: inline-flex;
  align-items: flex-end;
  gap: 3px;
  height: 18px;
  margin-left: auto;
}

.hud-wave-bar {
  width: 3px;
  height: 100%;
  background: var(--hud-blue);
  border-radius: 2px;
  transform: scaleY(0.12);
  transform-origin: bottom;
  transition: transform 0.08s ease;
}

/* --- Composants HUD génériques réutilisés sur les 3 modes --- */

.hud-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1.5px solid var(--hud-blue);
  border-radius: 6px;
  font-family: var(--hud-font-ui);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--hud-blue);
  background: #fff;
}

.hud-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--hud-blue);
  flex-shrink: 0;
  animation: hud-dot-pulse 1.6s ease-in-out infinite;
}

.hud-confidence-badge {
  margin: 10px 0;
}

/* "EN DIRECT" à côté du titre "Transcription" (Negotium/Agora) — rouge,
   cohérent avec le reste des labels HUD (majuscules, letter-spacing). */
.hud-live-label {
  font-family: var(--hud-font-ui);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #dc2626;
}

/* Intention détectée : même composant .hud-badge que la confiance vocale,
   mais affichée sur les 3 modes (pas seulement Negotium langues
   différentes) — le marqueur [[INTENTION]] est toujours généré, quelle que
   soit la langue de l'appel (voir server.js). Le throttle "par changement
   de sujet" est géré côté JS (renderIntentionTag), pas en CSS. */
.hud-intention-badge {
  margin: 10px 0;
}

/* Phonétique mot-par-mot (voir buildPhoneticHudBlock/parseWordByWordPhonetic
   dans app.js) : chaque paire mot/phonétique est une petite colonne, le mot
   traduit au-dessus, sa phonétique juste en dessous — pas un paragraphe
   continu. Repli automatique en texte continu (.hud-block-body.hud-mono,
   déjà stylé plus haut) si Claude n'a pas respecté le format mot|phonétique. */
.hud-phonetic-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
}

.hud-phonetic-pair {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hud-phonetic-word {
  font-family: var(--hud-font-ui);
  font-size: var(--hud-size-secondary);
  color: var(--hud-muted);
}

.hud-phonetic-sub {
  font-family: var(--hud-font-mono);
  font-size: 17px;
  color: var(--hud-blue);
}

@keyframes hud-dot-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.hud-label {
  display: block;
  margin: 0 0 6px;
  font-family: var(--hud-font-ui);
  font-size: var(--hud-size-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--hud-blue);
}

.hud-secondary {
  font-family: var(--hud-font-ui);
  font-size: var(--hud-size-secondary);
  color: var(--hud-muted);
}

.hud-block {
  padding: 14px 16px;
  margin-bottom: 12px;
  background: #fff;
  border: 1.5px solid var(--hud-blue);
  border-radius: 8px;
}

.hud-block:last-child {
  margin-bottom: 0;
}

.hud-block-body {
  font-size: var(--hud-size-main);
  line-height: 1.35;
  color: var(--hud-ink);
}

.hud-block-body.hud-mono {
  font-family: var(--hud-font-mono);
  font-size: 19px;
  color: var(--hud-blue);
}

/* --- Typographie HUD appliquée aux 3 modes (Negotium/Askesis/Agora) —
   .panel/.panel h2/.transcript-line/.interim/.field-help sont des classes
   déjà partagées par les 3 écrans d'appel (#app-screen/#study-simulation-
   screen/#agora-app-screen, seuls contextes où .panel existe), donc un seul
   jeu de règles ici couvre tout le périmètre demandé sans dupliquer par
   mode. Les couleurs thématiques déjà en place (vert Suggestion, violet
   Predict, rouge info-manquante, ambre Reaction/Radar) restent inchangées :
   portées par des sélecteurs #id plus spécifiques, donc jamais écrasées par
   ces règles génériques. */
.panel {
  border: 1.5px solid var(--hud-blue);
  border-radius: 8px;
  box-shadow: none;
}

.panel h2 {
  font-family: var(--hud-font-ui);
  font-size: var(--hud-size-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--hud-ink);
}

.transcript-line,
.interim,
.field-help,
.empty-state-subtitle,
.empty-state-title {
  font-family: var(--hud-font-ui);
}

.speaker-label {
  font-family: var(--hud-font-ui);
  font-size: var(--hud-size-secondary);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* --- Negotium : #latest-suggestion, quota, disclaimer --- */
#latest-suggestion {
  font-family: var(--hud-font-ui);
  font-size: var(--hud-size-main);
  line-height: 1.3;
}

.suggestion-quota,
.suggestion-time,
.suggestion-disclaimer,
.info-link,
.link-button {
  font-family: var(--hud-font-ui);
}

.suggestion-disclaimer {
  font-size: var(--hud-size-secondary);
}

.suggestion-translation {
  font-family: var(--hud-font-ui);
}

.suggestion-phonetic {
  font-family: var(--hud-font-mono);
}