/* Essai d'interface (2026-09-26) — actif seulement avec ?essai=1, retenu en
   localStorage['hub-essai'] ; ?essai=0 le retire. Surcharge pure, comme
   theme-b.css : sans la classe html.essai, rien ici ne s'applique.

   1. Jauge du disque colorée selon le remplissage (classe posée par essai.js).
   2. Bannière d'accueil plus basse sur ordinateur : la rangée « Reprendre »
      apparaît sans défiler. Téléphone et téléviseur inchangés.
   3. Avatar = bouton de menu (Appairer / Se déconnecter), hors téléviseur.
   5. « Créer un lien » dans le rouge de la marque. */

/* 1 — jauge */
html.essai .dq.niv-ok  .dq-jauge i { background: linear-gradient(90deg, #2ea043, #46d369); }
html.essai .dq.niv-ok  .dq-pct     { background: rgba(70, 211, 105, .14); color: #46d369; }
html.essai .dq.niv-ok  .dq-ico     { background: rgba(70, 211, 105, .12); color: #46d369; }
html.essai .dq.niv-mid .dq-jauge i { background: linear-gradient(90deg, #d9822b, #f5a623); }
html.essai .dq.niv-mid .dq-pct     { background: rgba(245, 166, 35, .14); color: #f5a623; }
html.essai .dq.niv-mid .dq-ico     { background: rgba(245, 166, 35, .12); color: #f5a623; }
/* niv-haut garde le rouge d'origine : c'est là qu'il veut dire quelque chose. */

/* 2 — bannière */
@media (min-width: 761px) {
  html.essai:not(.tv) .spot { height: clamp(320px, min(40vw, 56vh), 560px); }
  /* Plus basse, la bannière remonte son texte à hauteur des flèches du
     carrousel : on le décale pour qu'il passe à droite de la flèche gauche. */
  html.essai:not(.tv) .spot .spot-in { padding-left: 80px; }
}

/* 3 — menu du compte */
html.essai:not(.tv) .who > button { display: none; }
html.essai:not(.tv) .who { position: relative; }
html.essai:not(.tv) .who .avatar { cursor: pointer; }
html.essai:not(.tv) .who .avatar:hover,
html.essai:not(.tv) .who .avatar[aria-expanded="true"] { border-color: var(--txt-dim); }
html.essai:not(.tv) .who .avatar:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.essai-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  min-width: 210px; padding: 6px; border-radius: 8px;
  background: #1f1f1f; border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 12px 32px rgba(0,0,0,.55);
  display: grid; gap: 2px;
}
.essai-menu[hidden] { display: none; }
.essai-menu .qui {
  padding: 8px 10px 10px; font-size: 13px; color: var(--txt-dim);
  border-bottom: 1px solid rgba(255,255,255,.08); margin-bottom: 4px;
}
.essai-menu .qui b { display: block; color: var(--txt); font-size: 14.5px; font-weight: 600; }
.essai-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: none; border: 0; border-radius: 6px; cursor: pointer;
  padding: 10px; min-height: 42px; font: inherit; font-size: 14px;
  color: var(--txt); text-align: left;
}
.essai-menu button:hover, .essai-menu button:focus-visible { background: rgba(255,255,255,.08); outline: none; }
.essai-menu button svg { width: 18px; height: 18px; flex: none; opacity: .8; }

/* 5 — bouton d'invitation */
html.essai .inv-creer { background: var(--accent); color: #fff; }