/* Couleurs de l'owner par défaut ; un thème de rendez-vous (lot L3) ne fera que redéfinir ces variables. */
:root {
  --couleur-principale: #2da6a0;
  --couleur-principale-texte: #04201f;
  --couleur-fond: #0e1525;
  --couleur-surface: #172036;
  --couleur-bordure: #2c3a55;
  --couleur-texte: #eef3fa;
  --couleur-discrete: #a9b6c9;
  --couleur-danger: #cd2b31; /* texte blanc à 5,27:1 (AA) ; #e5484d donnait 3,91:1, recette du 17/10 */
  color-scheme: dark;
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--couleur-fond); color: var(--couleur-texte); }
main { max-width: 1040px; margin: auto; padding: 16px 16px 48px; }
h1 { font-size: 1.6rem; margin: 24px 0 4px; }
h2 { font-size: 1.1rem; margin: 0 0 12px; }
a { color: var(--couleur-principale); }
.entete { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--couleur-bordure); }
.marque { font-weight: 700; letter-spacing: .02em; color: var(--couleur-texte); text-decoration: none; }
.sous-titre, .discret { color: var(--couleur-discrete); }
button, input, select { font: inherit; border-radius: 10px; }
button { background: var(--couleur-principale); color: var(--couleur-principale-texte); border: 0; padding: 10px 16px; font-weight: 600; cursor: pointer; }
button:disabled { opacity: .45; cursor: default; }
button.discret { background: transparent; color: var(--couleur-discrete); border: 1px solid var(--couleur-bordure); }
button.danger { background: var(--couleur-danger); color: #fff; }
button.secondaire { background: var(--couleur-surface); color: var(--couleur-texte); border: 1px solid var(--couleur-bordure); }
input, select { background: var(--couleur-fond); color: inherit; border: 1px solid var(--couleur-bordure); padding: 9px 12px; width: 100%; }
label { display: grid; gap: 4px; color: var(--couleur-discrete); font-size: .95rem; }
form { display: grid; gap: 12px; margin: 16px 0; }
.carte.etroite { max-width: 520px; }
.bloc { margin: 16px 0; }
.annonce { border-color: var(--couleur-principale); }
/* Quelqu'un attend : la salle d'attente reste en haut de l'écran, appel en cours et page défilée (recette du 16/10). */
.salle-attente.qui-attend { position: sticky; top: 8px; z-index: 10; border: 2px solid var(--couleur-principale); box-shadow: 0 8px 28px rgb(0 0 0 / .5); }
.salle-attente.qui-attend .erreur:empty { display: none; }
code { background: var(--couleur-fond); padding: 1px 6px; border-radius: 6px; }
.carte { background: var(--couleur-surface); border: 1px solid var(--couleur-bordure); border-radius: 14px; padding: 16px; }
.colonnes { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); margin: 16px 0; }
.liste { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.liste li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 12px; background: var(--couleur-fond); border-radius: 10px; }
.liste li .nom { font-weight: 600; flex: 1 1 auto; }
.liste li a { font-weight: 600; flex: 1 1 auto; }
.etiquette { font-size: .85rem; color: var(--couleur-discrete); }
.boutons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.erreur { color: #ff8b8b; min-height: 1.5em; }
.essai { display: grid; grid-template-columns: minmax(0, 360px) 1fr; gap: 16px; align-items: start; margin: 16px 0; }
@media (max-width: 640px) { .essai { grid-template-columns: 1fr; } }
video { width: 100%; aspect-ratio: 16 / 10; background: #0a0f1b; border-radius: 12px; object-fit: cover; display: block; }
meter { width: 100%; height: 14px; }
.mosaique { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin: 16px 0; }
.tuile { position: relative; }
/* Sans caméra (écoute seule, caméra prise) : la tuile garde son cadre, le nom et « Retirer » ne flottent pas. */
.tuile:not(:has(video)) { aspect-ratio: 16 / 10; background: #0a0f1b; border-radius: 12px; }
/* Posés sur la vidéo, toujours sombre : texte clair, quel que soit le thème du client (vu le 17/10 sur un fond blanc). */
.tuile small { position: absolute; left: 8px; bottom: 8px; background: rgb(0 0 0 / .55); color: #fff; padding: 2px 8px; border-radius: 8px; }
.tuile.ecran video, .tuile.mon-ecran video { object-fit: contain; } /* un écran se lit entier, jamais rogné */
.tuile.mon-ecran button { position: absolute; right: 8px; bottom: 8px; }
/* Retirer quelqu'un, côté hôte : en haut de sa tuile, avec une confirmation. */
.tuile .retrait { position: absolute; right: 8px; top: 8px; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; max-width: calc(100% - 16px); }
.tuile .retrait span { background: rgb(0 0 0 / .7); color: #fff; padding: 4px 8px; border-radius: 8px; }
.tuile .retrait button { padding: 6px 12px; }
.tuile .retrait button.discret { background: rgb(0 0 0 / .55); color: var(--couleur-texte); }
.alertes:empty { display: none; }
.alertes li { border: 1px solid var(--couleur-danger); }
.salle-attente .alertes { margin-bottom: 8px; }
/* La connexion perdue, puis revenue : en haut de l'appel, lisible d'un coup d'œil (spec « Reprendre après coupure »). */
.bandeau-connexion { position: sticky; top: 8px; z-index: 5; margin: 12px 0; padding: 10px 14px; border-radius: 10px; background: var(--couleur-surface); border: 2px solid var(--couleur-principale); font-weight: 600; }
.commandes { display: flex; flex-wrap: wrap; gap: 8px; }
/* Caméra, micro et qualité : sous l'essai de l'invité, et repliés sous les commandes de l'appel. */
.reglages-listes { display: grid; gap: 8px 12px; margin: 8px 0; }
.reglages-listes p { margin: 0; grid-column: 1 / -1; }
.reglages-listes .erreur:empty { display: none; }
details.reglages .reglages-listes { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
details.reglages summary { cursor: pointer; color: var(--couleur-discrete); }
pre { background: #080e1a; padding: 12px; max-height: 180px; overflow: auto; white-space: pre-wrap; font-size: .8rem; }
.logo-theme { max-height: 40px; max-width: 160px; margin-left: auto; margin-right: 12px; }
[hidden] { display: none !important; }