/* Écrans propres à Honoré Visio : uniquement des tokens du design system (hg.min.css), préfixe hv-. */


/* Carte d'action centrée à la largeur « formulaire » du design system (30 rem). */
.hv-narrow { width: min(100%, var(--hg-site-form)); margin-inline: auto; }
.hv-center { text-align: center; }
.hg-lead.hv-center { margin-inline: auto; }

/* Pastille ronde avec l'abeille Honoré. */
.hv-bee { display: grid; place-items: center; width: 3.625rem; height: 3.625rem; margin-inline: auto; border-radius: 50%; background: var(--hg-accent-soft); }
.hv-bee img { width: 74%; height: 74%; object-fit: contain; }

/* Page de salle : logo centré au-dessus de la carte d'entrée. */
.hv-entree { display: grid; align-content: center; }
.hv-logo { justify-self: center; }

/* Réunion : plein écran par-dessus la page (fond toujours sombre : c'est de la vidéo).
   Colonne : en-tête, bandeaux RGPD, corps (grille + panneau latéral), barre de contrôle. */
.hv-reunion { position: fixed; inset: 0; display: none; flex-direction: column; z-index: var(--hg-z-modal); background: var(--hg-ink-950); color: var(--hg-white); }
.hv-reunion.is-ouverte { display: flex; }
.hv-entete { display: flex; align-items: center; gap: var(--hg-space-3); padding: var(--hg-space-2) var(--hg-space-4); border-bottom: 1px solid var(--hg-border); }
.hv-entete__titre { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hv-corps { flex: 1; min-height: 0; display: flex; }
.hv-scene { position: relative; flex: 1; min-width: 0; padding: var(--hg-space-3); }
.hv-sous-titres { position: absolute; left: 50%; bottom: var(--hg-space-4); transform: translateX(-50%); width: min(56rem, 94%); pointer-events: none; z-index: 10; }

/* Grille vidéo : colonnes selon le nombre de tuiles ; un partage d'écran occupe la première ligne. */
.hv-grille { position: absolute; inset: var(--hg-space-3); display: grid; gap: var(--hg-space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); grid-auto-rows: 1fr; align-content: stretch; }
.hv-grille[data-n="1"] { grid-template-columns: minmax(0, 1fr); }
.hv-grille[data-n="2"], .hv-grille[data-n="3"], .hv-grille[data-n="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Partage d'écran : l'écran en grand à gauche, les participants en volet vertical à droite. */
.hv-grille.has-ecran { grid-template-columns: minmax(0, 1fr) 15rem; grid-template-rows: repeat(var(--n, 1), minmax(6rem, 9rem)) minmax(0, 1fr); overflow-y: auto; align-content: start; }
.hv-grille.has-ecran .hv-tuile { grid-column: 2; }
.hv-grille.has-ecran .hv-tuile.is-ecran { grid-column: 1; grid-row: 1 / -1; order: -1; }
.hv-grille.has-ecran .hv-tuile__avatar { width: 2.75rem; height: 2.75rem; }
.hv-tuile__plein { position: absolute; top: var(--hg-space-2); right: var(--hg-space-2); z-index: 2; }
.hv-tuile:fullscreen { border-radius: 0; border: 0; }
@media (max-width: 760px) {
  .hv-grille.has-ecran { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(12rem, 1fr); grid-auto-rows: 6rem; }
  .hv-grille.has-ecran .hv-tuile, .hv-grille.has-ecran .hv-tuile.is-ecran { grid-column: 1; grid-row: auto; }
}
.hv-tuile { position: relative; min-height: 0; overflow: hidden; display: grid; place-items: center; background: var(--hg-ink-900); border: 2px solid transparent; border-radius: var(--hg-radius-lg); }
.hv-tuile.is-parle { border-color: var(--hg-accent); }
.hv-tuile__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.hv-tuile.has-video .hv-tuile__video { opacity: 1; }
.hv-tuile.has-video .hv-tuile__avatar { display: none; }
.hv-tuile.is-ecran .hv-tuile__video { object-fit: contain; background: var(--hg-ink-950); }
.hv-tuile__video.is-miroir { transform: scaleX(-1); }
.hv-tuile__avatar { width: 4.5rem; height: 4.5rem; font-size: var(--hg-fs-lead); }
.hv-tuile__pied { position: absolute; left: var(--hg-space-2); bottom: var(--hg-space-2); display: flex; gap: var(--hg-space-2); align-items: center; max-width: calc(100% - 2 * var(--hg-space-2)); padding: var(--hg-space-1) var(--hg-space-3); border-radius: var(--hg-radius-pill); background: color-mix(in srgb, var(--hg-ink-950) 75%, transparent); font-size: var(--hg-fs-small); }
.hv-tuile__nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hv-tuile__etat { white-space: nowrap; }
.hv-tuile__etat:not(:empty) { font-weight: var(--hg-fw-semibold); }

/* Panneau latéral : discussion et participants. */
.hv-panneau { width: 22rem; max-width: 100%; display: flex; flex-direction: column; background: var(--hg-surface); color: var(--hg-text); border-left: 1px solid var(--hg-border); }
.hv-panneau[hidden] { display: none; }
.hv-panneau__tete { display: flex; align-items: center; justify-content: space-between; gap: var(--hg-space-2); padding: var(--hg-space-2) var(--hg-space-3); border-bottom: 1px solid var(--hg-border); }
.hv-panneau__corps { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--hg-space-3); padding: var(--hg-space-3); }
.hv-panneau__corps[hidden] { display: none; }
.hv-messages { flex: 1; min-height: 0; overflow-y: auto; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--hg-space-3); }
.hv-msg { display: flex; flex-direction: column; gap: var(--hg-space-1); max-width: 90%; padding: var(--hg-space-2) var(--hg-space-3); border-radius: var(--hg-radius); background: var(--hg-surface-2, var(--hg-accent-soft)); align-self: flex-start; overflow-wrap: anywhere; }
.hv-msg.is-moi { align-self: flex-end; background: var(--hg-accent); color: var(--hg-ink-950); }
.hv-msg__meta { font-size: var(--hg-fs-xs); opacity: .75; }
.hv-chat-form { display: flex; gap: var(--hg-space-2); }
.hv-chat-form .hg-input { flex: 1; min-width: 0; }
.hv-membres { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--hg-space-3); }
.hv-membre { display: flex; align-items: center; gap: var(--hg-space-3); }
.hv-membre__nom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Barre de contrôle. */
.hv-controles { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--hg-space-2); padding: var(--hg-space-3) var(--hg-space-4); border-top: 1px solid var(--hg-border); }
.hv-ctl { gap: var(--hg-space-2); }
.hv-ctl.is-off { border-color: var(--hg-danger); color: var(--hg-danger); }
.hv-ctl[aria-pressed="true"]:not(.is-off) { border-color: var(--hg-accent); }

/* Aperçu caméra de l'écran d'entrée. */
.hv-apercu { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--hg-radius-lg); background: var(--hg-ink-900); color: var(--hg-white); display: grid; place-items: center; }
.hv-apercu video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.hv-apercu__vide { position: relative; margin: 0; font-size: var(--hg-fs-small); }
.hv-apercu.has-video .hv-apercu__vide { display: none; }

/* Badge discret « transcription / traduction en cours » : l'info complète est dans l'infobulle du design system
   (hg-tip, ouverte vers le bas puisque l'en-tête est tout en haut) ; la croix permet de refuser. */
.hv-tip-bas::after { bottom: auto; top: calc(100% + .5rem); transform: translate(-50%, -3px); }
.hv-tip-bas:hover::after, .hv-tip-bas:focus-visible::after, .hv-tip-bas:focus-within::after { transform: translate(-50%, 0); }
.hv-tip-bas::after { left: 0; transform: translate(0, -3px); }
.hv-tip-bas:hover::after, .hv-tip-bas:focus-visible::after, .hv-tip-bas:focus-within::after { transform: translate(0, 0); }
.hv-badge-etat { gap: var(--hg-space-2); }
.hv-badge-etat[hidden] { display: none; }
#transcription-etat:not(:empty)::before { content: "· "; }
.hv-badge-x { display: inline-grid; place-items: center; padding: 0; margin-left: var(--hg-space-1); border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
.hv-badge-x:hover, .hv-badge-x:focus-visible { background: color-mix(in srgb, currentColor 18%, transparent); }
/* Coin droit de l'en-tête : fond virtuel, langue des sous-titres et état. */
.hv-coin { margin-left: auto; display: flex; align-items: center; gap: var(--hg-space-2); }
.hv-ligne { margin-top: var(--hg-space-2); padding: var(--hg-space-2) var(--hg-space-4); background: color-mix(in srgb, var(--hg-ink-950) 80%, transparent); border-radius: var(--hg-radius); font-size: 1.25rem; line-height: var(--hg-lh-snug); }
/* Nom du locuteur en jaune de marque : lisible, car toujours sur le bandeau sombre des sous-titres (avertissement du lint assumé). */
.hv-ligne .hv-qui { color: var(--hg-accent-text); font-weight: var(--hg-fw-semibold); margin-right: var(--hg-space-2); }
.hv-ligne .hv-sec { display: block; opacity: .75; font-size: var(--hg-fs-body); }
.hv-ligne.is-provisoire { opacity: .65; font-style: italic; }
.hv-etat { padding: var(--hg-space-1) var(--hg-space-3); border-radius: var(--hg-radius-pill); background: color-mix(in srgb, var(--hg-ink-950) 75%, transparent); font-size: var(--hg-fs-small); }

/* Rapports : liste des réunions (cartes cliquables), phrases de la transcription. */
.hv-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--hg-space-3); }
.hv-rang { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--hg-space-4); padding: var(--hg-space-4) var(--hg-space-5); text-decoration: none; transition: border-color var(--hg-dur) var(--hg-ease); }
.hv-rang:hover, .hv-rang:focus-visible { border-color: var(--hg-accent); }
.hv-rang__ico { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: var(--hg-radius); background: var(--hg-accent-soft); }
.hv-rang__ico img { width: 74%; height: 74%; object-fit: contain; }
.hv-rang strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hv-rang small { display: block; margin-top: var(--hg-space-1); color: var(--hg-text-muted); font-size: var(--hg-fs-xs); }
.hv-rang .hg-cluster { gap: var(--hg-space-2); justify-content: flex-end; }
.hv-retour .hg-btn { margin-left: calc(-1 * var(--hg-space-3)); }
.hv-verdict { font-size: var(--hg-fs-lead); font-weight: var(--hg-fw-semibold); }
.hv-phrases { display: grid; }
.hv-phrase { display: grid; grid-template-columns: 9rem minmax(0, 1fr) minmax(0, 1fr); gap: var(--hg-space-3); padding: var(--hg-space-3) 0; border-bottom: 1px solid var(--hg-border); font-size: var(--hg-fs-small); }
.hv-phrase:last-child { border-bottom: 0; }
.hv-phrase__qui { font-weight: var(--hg-fw-semibold); }
.hv-phrase__qui small { display: block; color: var(--hg-text-muted); font-weight: var(--hg-fw-regular); font-size: var(--hg-fs-xs); }
.hv-phrase__trad { color: var(--hg-text-muted); }
.hv-journal { max-height: 20rem; white-space: pre-wrap; font-size: var(--hg-fs-xs); }

@media (max-width: 639.98px) {
  .hv-rang { grid-template-columns: auto minmax(0, 1fr); }
  .hv-rang .hg-cluster { grid-column: 1 / -1; justify-content: flex-start; }
  .hv-phrase { grid-template-columns: minmax(0, 1fr); gap: var(--hg-space-1); }
  .hv-entete { flex-wrap: wrap; }
  .hv-coin { flex-basis: 100%; margin-left: 0; }
  .hv-corps { flex-direction: column; }
  .hv-panneau { position: absolute; inset: 0; width: 100%; z-index: 20; border-left: 0; }
  .hv-grille[data-n="2"], .hv-grille[data-n="3"], .hv-grille[data-n="4"] { grid-template-columns: minmax(0, 1fr); }
  .hv-ctl .hv-ctl__txt { font-size: var(--hg-fs-xs); }
}

/* Mentions en chinois : seulement dans une salle traduite avec le chinois (salle.js pose body.zh ; le sélecteur vise
   les <span class="zh"> et jamais le <body> lui-même). */
span.zh { display: none; }
body.zh span.zh { display: inline; }

/* Pages légales : fiche éditeur en liste de définitions, pied de page avec liens. */
.hv-legal h2 { font-size: var(--hg-fs-h3, 1.2rem); }
.hv-legal .hg-table-wrap { margin-block: var(--hg-space-4); }
.hv-fiche { display: grid; grid-template-columns: minmax(9rem, max-content) 1fr; gap: var(--hg-space-2) var(--hg-space-6); margin: 0; padding-block: var(--hg-space-4); border-block: 1px solid var(--hg-border); }
.hv-fiche dt { font-weight: var(--hg-fw-semibold); }
.hv-fiche dd { margin: 0; color: var(--hg-text-muted); }
@media (max-width: 639.98px) { .hv-fiche { grid-template-columns: minmax(0, 1fr); gap: 0; } .hv-fiche dd { margin-bottom: var(--hg-space-3); } }

/* Accueil : options repliables, code de réunion, bouton-lien. */
.hv-options > summary { cursor: pointer; font-weight: var(--hg-fw-semibold); }
.hv-options[open] > summary { margin-bottom: var(--hg-space-4); }
.hv-code { font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.hv-lien-bouton { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; text-decoration: underline; color: inherit; }

.hg-error:empty { display: none; }

/* Accueil : même composition que Honoré Transfert (formulaire + illustration, étapes). */
.hv-hero { font-size: var(--hg-fs-display); font-weight: var(--hg-fw-black); line-height: 1.1; letter-spacing: -.02em; }
.hv-hero em { font-style: normal; color: var(--hg-accent); }
.hv-work { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: var(--hg-space-8); align-items: center; }
.hv-work > * { min-width: 0; }
.hv-art { display: grid; place-items: center; min-height: 28rem; }
.hv-art__ico { width: min(100%, 17rem); height: auto; aspect-ratio: 1; stroke-width: 1.1; color: var(--hg-accent); }
.hv-form .hg-label { font-size: var(--hg-fs-body); }
.hv-form .hg-input, .hv-form .hg-select { min-height: 3.2rem; }
.hv-form .hg-textarea { min-height: 5rem; }
.hv-steps { display: flex; justify-content: center; gap: var(--hg-space-12); list-style: none; margin: 0; padding: 0; color: var(--hg-text-muted); font-size: var(--hg-fs-small); }
.hv-steps li { display: flex; align-items: center; gap: var(--hg-space-3); }
.hv-steps b { display: grid; place-items: center; width: 1.875rem; height: 1.875rem; border-radius: 50%; background: var(--hg-surface-3); color: var(--hg-text); }
.hv-steps .is-current { color: var(--hg-text); }
.hv-steps .is-current b { background: var(--hg-accent); color: var(--hg-on-accent); }
@media (max-width: 1024px) { .hv-work { grid-template-columns: minmax(0, 1fr); gap: var(--hg-space-6); } .hv-art { min-height: 0; } .hv-art__ico { width: 10rem; } }
@media (max-width: 760px) { .hv-art { display: none; } .hv-steps { gap: var(--hg-space-4); justify-content: space-between; } .hv-steps li { flex-direction: column; text-align: center; font-size: var(--hg-fs-xs); } }

/* Pages légales : carte d'en-tête, sommaire collant et sections en cartes, comme Honoré Transfert. */
.hv-legal-grid { display: grid; grid-template-columns: 17rem minmax(0, 1fr); gap: var(--hg-gutter); align-items: start; }
.hv-toc { position: sticky; top: calc(4.5rem + var(--hg-space-4)); }
.hv-toc ol { margin: var(--hg-space-2) 0 0; padding-left: 1.25rem; font-size: var(--hg-fs-small); display: grid; gap: var(--hg-space-2); }
.hv-toc a { text-decoration: none; }
.hv-toc a:hover { text-decoration: underline; }
.hv-section .hg-prose { max-width: none; font-size: var(--hg-fs-body); }
.hv-section .hg-prose > h2:first-child { margin-top: 0; }
.hv-legal h2 { scroll-margin-top: calc(4.5rem + var(--hg-space-6)); }
.hv-legal .hg-prose { max-width: none; }
@media (max-width: 900px) { .hv-legal-grid { grid-template-columns: minmax(0, 1fr); } .hv-toc { position: static; } }

/* Chargement à l'entrée : connexion à la réunion ou attente de l'organisateur. */
.hv-chargement { position: fixed; inset: 0; z-index: calc(var(--hg-z-modal) + 1); display: grid; place-items: center; padding: var(--hg-space-6); background: color-mix(in srgb, var(--hg-ink-950) 88%, transparent); color: var(--hg-white); }
.hv-chargement[hidden] { display: none; }
.hv-chargement__boite { display: grid; justify-items: center; gap: var(--hg-space-4); max-width: 26rem; text-align: center; }
.hv-chargement__boite h2 { margin: 0; font-size: 1.375rem; }
.hv-chargement__boite p { margin: 0; color: var(--hg-text-muted); }

/* Écran d'entrée de la réunion : aperçu à gauche, informations à droite, pour tenir sur un écran classique. */
.hv-entree-pile { gap: var(--hg-space-5); }
.hv-entree-carte { width: min(100%, 64rem); margin-inline: auto; }
.hv-entree-grille { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--hg-space-8); align-items: start; }
.hv-entree-grille > * { min-width: 0; }
.hv-entree-tete { display: flex; align-items: center; gap: var(--hg-space-4); }
.hv-entree-tete h2 { margin: 0; font-size: 1.375rem; overflow-wrap: anywhere; }
.hv-entree-tete .hg-help { margin: var(--hg-space-1) 0 0; }
.hv-entree-tete .hv-bee { flex: none; margin: 0; width: 3rem; height: 3rem; }
.hv-entree-form .hg-alert p { font-size: var(--hg-fs-small); }
@media (max-width: 860px) { .hv-entree-grille { grid-template-columns: minmax(0, 1fr); gap: var(--hg-space-5); } }
/* Champ + bouton côte à côte (« Rejoindre », « Copier ») : même hauteur que les autres champs du formulaire. */
.hv-form .hg-copyfield .hg-btn { min-height: 3.2rem; }