@font-face { font-family: 'Geist'; src:url('/Geist.ttf') format('truetype-variations'),url('/Geist.ttf') format('truetype');
               font-weight:100 900; font-style:normal; font-display:swap; }
  * { margin:0; padding:0; box-sizing:border-box; }
  :root {
    --bg:#080d18; --text:#f5f7fa; --accent: var(--wc-accent);
    --s1:rgba(255,255,255,0.045); --s2:rgba(255,255,255,0.075); --s3:rgba(255,255,255,0.11);
    --card-bg:var(--s1); --card-border: var(--wc-card-border);
    --sep:rgba(255,255,255,0.07);
    --text-secondary:rgba(245,247,250,0.62); --text-tertiary:rgba(245,247,250,0.40);
    --input-bg:var(--s2); --danger:var(--wc-red);
    --r:16px; --r2:12px;
  }
  html,body { background:var(--bg); color:var(--text); font-family:var(--wc-police);
              min-height:100vh; -webkit-font-smoothing:antialiased; letter-spacing:-0.012em; }
  .bg-glow { position:fixed; inset:0; z-index:0; pointer-events:none;
    background:radial-gradient(ellipse 70% 42% at 50% -8%,rgba(var(--wc-accent-rgb),0.13) 0%,transparent 62%); }

  header { position:relative; z-index:2; max-width:960px; margin:0 auto; padding:16px 22px 18px; }
  header .haut { display:flex; align-items:center; gap:16px; margin-bottom:16px; }
  header .haut .lien-retour { flex:1; min-width:0; }
  header img { height:21px; opacity:.9; }
  header .titre { font-size:32px; font-weight:700; letter-spacing:-.025em; line-height:1.08; }
  header .sous { color:var(--text-secondary); font-size:14px; margin-top:5px; }
  .lien-retour { display:inline-flex; align-items:center; gap:3px; color:var(--accent);
                 text-decoration:none; font-size:15px; }
  .i { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8;
       stroke-linecap:round; stroke-linejoin:round; flex:none; }
  .i-sm { width:16px; height:16px; }

  main { position:relative; z-index:2; max-width:960px; margin:0 auto; padding:0 22px 40px; }

  .seg { display:flex; gap:3px; padding:3px; border-radius:var(--wc-r-m); background:var(--s1); margin-bottom:18px; }
  .seg > button { flex:1 1 0; min-width:0; display:inline-flex; align-items:center; justify-content:center; gap:6px;
    padding:9px 10px; border:none; background:transparent; color:var(--text-tertiary);
    font-family:inherit; font-size:14px; font-weight:500; border-radius:var(--wc-r-m); cursor:pointer; }
  .seg > button.on { background:var(--s3); color:var(--text); }
  .seg > button.on .i { color:var(--accent); }

  .card { background:var(--card-bg); border:1px solid var(--card-border); border-radius:var(--r);
          padding:16px; margin-bottom:14px; }
  .section-title { font-size:13px; font-weight:600; color:var(--text-secondary);
                   margin:0 0 9px 4px; display:flex; align-items:center; gap:8px; }

  .btn { background:var(--accent); color:#fff; border:none; border-radius:var(--r2);
         padding:10px 16px; font-family:inherit; font-size:14px; font-weight:500; cursor:pointer;
         display:inline-flex; align-items:center; justify-content:center; gap:7px; }
  .btn:active { transform:scale(.97); }
  .btn:hover { filter:brightness(1.1); }
  .btn:disabled { opacity:.5; cursor:default; }
  .btn-sec { background:var(--s2); color:var(--text); }
  .btn-sec:hover { background:var(--s3); filter:none; }

  textarea { width:100%; background:var(--input-bg); border:none; border-radius:var(--r2);
             color:var(--text); font-family:inherit; font-size:14px; padding:12px 14px;
             resize:vertical; min-height:110px; line-height:1.55; }
  textarea:focus { outline:2px solid var(--accent); outline-offset:-2px; }

  /* ── Compteur de spectateurs ─────────────────────────────────────────── */
  .compteur { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
  .compteur .total { font-size:38px; font-weight:700; letter-spacing:-.03em; line-height:1; }
  .compteur .lbl { color:var(--text-secondary); font-size:14px; }
  .puces { display:flex; gap:7px; flex-wrap:wrap; margin-top:12px; }
  .puce { display:inline-flex; align-items:center; gap:7px; min-width:0;
          background:var(--s2); border-radius:var(--wc-r-pilule); padding:6px 12px; font-size:13px; }
  .puce .pastille { width:7px; height:7px; border-radius:50%; flex:none; }
  .puce .nb { font-weight:600; font-variant-numeric:tabular-nums; }
  .puce .nom { color:var(--text-secondary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .puce.ko { opacity:.6; }

  /* ── Mur de messages ─────────────────────────────────────────────────── */
  .mur { height:min(60vh,520px); overflow-y:auto; overscroll-behavior:contain;
         display:flex; flex-direction:column; gap:1px; padding:2px; }
  /* Le pseudo et le texte coulent dans le meme bloc, comme dans les chats
     d'origine : sur telephone, une ligne repliee repart a gauche au lieu de
     s'entasser dans une colonne etroite a cote du pseudo. */
  .msg { padding:6px 10px 6px 11px; border-left:3px solid var(--text-tertiary);
         border-radius:0 var(--wc-r-s) var(--wc-r-s) 0; line-height:1.45; font-size:15px;
         overflow-wrap:anywhere; }
  .msg:nth-child(even) { background:rgba(255,255,255,0.022); }
  .msg .qui { font-weight:600; margin-right:7px; }
  .msg .txt { color:rgba(245,247,250,.92); }
  .vide { color:var(--text-tertiary); font-size:14px; text-align:center; padding:34px 10px; }
  .msg { cursor:pointer; }
  .msg:hover { background:rgba(255,255,255,0.05); }

  /* ── Messages épinglés ───────────────────────────────────────────────── */
  .epingles { flex:none; display:none; flex-direction:column; gap:4px; margin-bottom:9px; }
  .epingles.on { display:flex; }
  .epi { display:flex; align-items:flex-start; gap:8px; padding:7px 9px;
         background:rgba(255,193,7,0.10); border-left:3px solid #ffc107;
         border-radius:0 var(--wc-r-s) var(--wc-r-s) 0; font-size:14.5px; line-height:1.45;
         overflow-wrap:anywhere; }
  .epi .corps { flex:1; min-width:0; }
  .epi .qui { font-weight:600; margin-right:7px; }
  .epi .det { color:var(--text-tertiary); font-size:11.5px; margin-top:2px; }
  .epi .oter { flex:none; background:none; border:none; color:var(--text-tertiary);
               cursor:pointer; padding:3px; border-radius:var(--wc-r-s); line-height:0; }
  .epi .oter:hover { background:var(--s2); color:var(--text); }
  .astuce { color:var(--text-tertiary); font-size:12px; margin:8px 2px 0; }

  /* ── Talkback ────────────────────────────────────────────────────────── */
  .tb { background:var(--s2); color:var(--text); border:none; border-radius:var(--r2);
        padding:10px 16px; font-family:inherit; font-size:14px; font-weight:600;
        cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
        gap:8px; -webkit-user-select:none; user-select:none; touch-action:none;
        /* Sans cela, un appui maintenu sur iPad ouvre la loupe et le menu
           de sélection au lieu de garder le micro ouvert. */
        -webkit-touch-callout:none; }
  /* `:not(.ouvert)` est indispensable : en maintenant le bouton on le survole,
     et sans cela la teinte de survol (3 sélecteurs) battait .tb.ouvert (2), donc
     le rouge « micro ouvert » n'apparaissait jamais pendant l'appui. */
  .tb:hover:not(:disabled):not(.ouvert):not(.perdu) { background:var(--s3); }
  .tb:disabled { opacity:.45; cursor:not-allowed; }
  /* Rouge franc et pulsation : a l'ecran d'un commentateur, « mon micro est
     ouvert » doit se lire sans avoir a chercher. */
  .tb.ouvert { background:#e02020; color:#fff; animation:tb-puls 1.1s ease-in-out infinite; }
  @keyframes tb-puls { 0%,100% { box-shadow:0 0 0 0 rgba(224,32,32,.55); }
                       50%     { box-shadow:0 0 0 7px rgba(224,32,32,0); } }
  .tb-etat { color:var(--text-tertiary); font-size:12.5px; }
  /* Liaison perdue : ni rouge (qui voudrait dire « micro ouvert ») ni gris
     (qui voudrait dire « au repos »). Un état à part, sans pulsation. */
  .tb.perdu { background:#c2410c; color:#fff; }

  #liaison { position:fixed; left:50%; top:14px; transform:translateX(-50%); z-index:20;
    display:none; align-items:center; gap:9px; padding:10px 17px; border-radius:var(--wc-r-pilule);
    background:#c2410c; color:#fff; font-size:14px; font-weight:600; line-height:1.3;
    box-shadow:0 8px 26px rgba(0,0,0,.45); max-width:calc(100% - 28px); }
  #liaison #liaison-detail { font-weight:400; opacity:.85; }
  body.hors-liaison #liaison { display:flex; }
  @media (max-width:600px) { #liaison { font-size:13px; padding:9px 14px; } }
  @media (min-width:601px) and (pointer:coarse) { #liaison { font-size:17px; padding:13px 22px; } }
  @media (max-width:600px) { .micro-r select, .micro-r input[type=text] { flex:1 1 100%; } }

  /* ── Liste des sources ───────────────────────────────────────────────── */
  .src-l { display:flex; flex-direction:column; }
  .src-i { display:flex; align-items:center; gap:11px; padding:11px 2px;
           border-bottom:1px solid var(--sep); min-width:0; }
  .src-i:last-child { border-bottom:none; }
  .src-i .pastille { width:9px; height:9px; border-radius:50%; flex:none; }
  .src-i .info { flex:1; min-width:0; }
  .src-i .nom { font-size:14px; font-weight:500; overflow:hidden;
                text-overflow:ellipsis; white-space:nowrap; }
  .src-i .det { font-size:12px; color:var(--text-tertiary); margin-top:2px;
                overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .src-i .cnt { font-size:13px; color:var(--text-secondary); font-variant-numeric:tabular-nums; flex:none; }

  .etat-pt { width:9px; height:9px; border-radius:50%; background:var(--text-tertiary); }
  .etat-direct { background:var(--wc-green); box-shadow:0 0 0 3px rgba(48,209,88,.18); }
  .etat-souci  { background:var(--wc-orange); }
  .etat-ko     { background:var(--danger); }

  .aide { color:var(--text-tertiary); font-size:12.5px; line-height:1.55; margin-top:10px; }
  /* Le raccourci d'accueil flotte en bas a droite : on lui laisse la place. */
  .aide-plein { margin:0; }
  @media (max-width:600px) { .aide-plein { margin-top:2px; padding-right:62px; } }
  .barre { display:flex; gap:9px; flex-wrap:wrap; align-items:center; margin-top:12px; }
  .reglage { display:flex; align-items:center; gap:10px; padding:9px 2px;
             border-bottom:1px solid var(--sep); min-width:0; flex-wrap:wrap; }
  .reglage:last-of-type { border-bottom:none; }
  .reglage .sub { color:var(--text-tertiary); font-weight:400; }
  .micro-r { display:flex; align-items:center; gap:9px; padding:8px 0;
             border-bottom:1px solid var(--sep); min-width:0; flex-wrap:wrap; }
  .micro-r:last-child { border-bottom:none; }
  .micro-r select { flex:0 1 165px; min-width:0; }
  .micro-r input[type=text] { flex:1 1 130px; min-width:0; background:var(--input-bg);
    border:none; border-radius:var(--wc-r-m); color:var(--text); font-family:inherit;
    font-size:14px; padding:9px 11px; }
  .micro-r .oter { flex:none; background:none; border:none; color:var(--text-tertiary);
                   cursor:pointer; padding:7px; border-radius:var(--wc-r-s); line-height:0; }
  .micro-r .oter:hover { background:var(--s2); color:var(--danger); }
  .reglage label { font-size:14px; flex:1 1 150px; min-width:0; }
  .reglage select, .reglage input[type=range] { flex:0 1 190px; min-width:0; }
  select { background:var(--input-bg); border:none; border-radius:var(--wc-r-m); color:var(--text);
           font-family:inherit; font-size:14px; padding:9px 11px; }

  .vue { display:none; }
  .vue.on { display:block; }

  /* ── Mode mur seul : l'écran du commentateur ─────────────────────────── */
  body.mur-seul header, body.mur-seul .seg, body.mur-seul .hors-mur { display:none; }
  body.mur-seul main { max-width:none; padding:0; }
  /* 100dvh d'abord, avec 100vh en repli : sur iPad, 100vh compte la barre de
     Safari comme si elle n'existait pas, et le bas de l'écran — donc le bouton
     talkback — se retrouvait sous la barre. */
  body.mur-seul .card.bloc-mur { margin:0; border:none; border-radius:0;
                                 height:100vh; height:100dvh;
                                 display:flex; flex-direction:column; padding:12px 14px; }
  /* Pas de rebond élastique derrière le mur quand on fait défiler au doigt. */
  body.mur-seul { overflow:hidden; overscroll-behavior:none; }
  body.mur-seul .mur { height:auto; flex:1; }
  body.mur-seul .msg { font-size:17px; }

  /* Le compteur et la sortie restent a l'ecran en mode commentateur : c'est
     justement l'information qu'on veut lire en continu, et il faut pouvoir
     revenir sans connaitre le raccourci clavier. */
  /* Le raccourci d'accueil flottant n'a rien a faire sur un ecran de
     commentateur : il distrait et peut se confondre avec la sortie. */
  body.mur-seul #home-shortcut-link { display:none !important; }
  .barre-mur { display:none; }
  body.mur-seul .barre-mur { display:flex; align-items:center; gap:12px; flex:none;
    padding:0 0 10px; margin-bottom:8px; border-bottom:1px solid var(--sep); }
  .cpt-mur { display:flex; align-items:baseline; gap:6px; flex:none; }
  .cpt-mur .nb { font-size:23px; font-weight:700; letter-spacing:-.025em;
                 font-variant-numeric:tabular-nums; }
  .cpt-mur .lbl { font-size:12px; color:var(--text-secondary); }
  /* min-width:0 sans quoi la bande de pastilles refuse de retrecir et pousse
     le bouton de sortie hors de l'ecran. */
  .puces-mur { flex:1 1 auto; min-width:0; display:flex; gap:7px;
               overflow-x:auto; scrollbar-width:none; }
  .puces-mur::-webkit-scrollbar { display:none; }
  .puces-mur .puce { flex:none; }
  #btn-quitter, #tb-mur { flex:none; }
  body.mur-seul .epingles { margin-bottom:9px; }

  /* Sur l'écran du commentateur, le talkback sort de la barre pour devenir une
     grande cible en bas à droite : c'est le seul geste qu'on fait sans quitter
     les messages des yeux, il doit se trouver sans être cherché. */
  body.mur-seul #tb-mur {
    position:fixed; z-index:5;
    /* Zones sûres : en app plein écran, l'indicateur d'accueil de l'iPad
       mordrait sinon sur le bouton. */
    right:calc(22px + env(safe-area-inset-right, 0px));
    bottom:calc(22px + env(safe-area-inset-bottom, 0px));
    min-height:86px; padding:0 34px; border-radius:var(--wc-r-xl);
    font-size:20px; gap:13px; box-shadow:0 10px 30px rgba(0,0,0,.45);
  }
  body.mur-seul #tb-mur .i { width:27px; height:27px; stroke-width:1.7; }
  /* Les derniers messages ne doivent pas passer sous le bouton. */
  body.mur-seul .mur { padding-bottom:116px; }
  @media (max-width:600px) {
    /* Pleine largeur au pouce plutôt qu'une cible dans un coin. */
    body.mur-seul #tb-mur { left:16px; right:16px; bottom:16px; min-height:78px; font-size:19px; }
    body.mur-seul .mur { padding-bottom:104px; }
  }

  @media (pointer:coarse) {
    .btn { min-height:44px; padding:11px 16px; }
    .seg > button { min-height:42px; font-size:13px; }
  }
  /* iPad : grand écran ET doigt. La requête « max-width:600px » ne l'attrape
     pas, il héritait donc d'une mise en page pensée pour la souris — texte trop
     petit pour être lu à bout de bras, bouton trop étroit pour le pouce. */
  @media (min-width:601px) and (pointer:coarse) {
    body.mur-seul .msg { font-size:20px; padding:9px 12px 9px 13px; }
    body.mur-seul .epi { font-size:19px; }
    body.mur-seul .cpt-mur .nb { font-size:27px; }
    body.mur-seul .cpt-mur .lbl, body.mur-seul .puce { font-size:14px; }
    body.mur-seul #btn-quitter { min-height:54px; font-size:16px; padding:0 20px; }
    body.mur-seul #tb-mur { min-height:104px; padding:0 46px; font-size:23px;
                            border-radius:var(--wc-r-xl); gap:15px; }
    body.mur-seul #tb-mur .i { width:32px; height:32px; }
    body.mur-seul .mur { padding-bottom:146px; }
  }

  @media (max-width:600px) {
    body.mur-seul .barre-mur { flex-wrap:wrap; }
    body.mur-seul .puces-mur { order:3; flex-basis:100%; }
    header { padding:14px 16px 16px; }
    main { padding:0 16px 32px; }
    header .titre { font-size:26px; }
    .compteur .total { font-size:32px; }
    .msg { font-size:14.5px; }
  }