/* ══════════════════════════════════════════════════════════════════════════
   NOOS — le « 8 » caché et la sphère 8LOP (23/10/2026, repris de D108 › d8.css).
   Même place que dans les logiciels Qualitest (jules, 23/10) : tout en bas à droite, collé au coin, téléphone compris.
   Le 8 porte EXACTEMENT la couleur du fond (--fond, qui suit le thème choisi) : invisible, sauf Cmd+A.
   L'écran signature est toujours noir, quel que soit le thème : textes gris, capitales espacées,
   aucun bleu, un seul point vert devant « EN LIGNE ».
   ══════════════════════════════════════════════════════════════════════════ */
#noos-huit { position: fixed; right: 0; bottom: 0; z-index: 75; padding: 5px 7px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 8px; line-height: 1;
  color: var(--fond); background: transparent; cursor: pointer; user-select: text; }

#n8-sphere { display: none; position: fixed; inset: 0; z-index: 9000; background: #000; color: #8b8d92;
  overflow: hidden; -webkit-font-smoothing: antialiased; }
#n8-sphere .n8s-medaillon { position: absolute; left: 30%; top: 50%; transform: translate(-50%, -50%);
  width: min(62vmin, 560px); aspect-ratio: 1 / 1; border-radius: 50%; border: 1px solid #1e1f22; overflow: hidden;
  background-color: #000; background-position: center; background-size: cover; background-repeat: no-repeat; }
#n8-sphere .n8s-medaillon video { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; background: transparent; }
#n8-sphere .n8s-droite { position: absolute; right: 0; top: 0; width: 38%; height: 100%; display: flex; flex-direction: column;
  justify-content: center; padding: 3rem 4rem 3rem 1rem; pointer-events: none; text-align: left; }
#n8-sphere .n8s-l1, #n8-sphere .n8s-l2, #n8-sphere .n8s-l3, #n8-sphere .n8s-by, #n8-sphere .n8s-by2, #n8-sphere .n8s-lbl, #n8-sphere-retour {
  font-family: "Barlow", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; text-transform: uppercase; color: #8b8d92; }
#n8-sphere .n8s-l1 { font-size: 11px; letter-spacing: .32em; margin-bottom: 28px; }
#n8-sphere .n8s-l2 { font-size: 22px; letter-spacing: .26em; line-height: 1.6; color: #f2f2f2; }
#n8-sphere .n8s-l3 { font-size: 11px; letter-spacing: .2em; line-height: 2.1; margin-top: 32px; padding-top: 22px; border-top: 1px solid #1e1f22; }
#n8-sphere .n8s-pt { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #6bdc99; margin: 0 9px 1px 0; vertical-align: middle; }
#n8-sphere .n8s-bas { position: absolute; bottom: 40px; left: 30%; transform: translateX(-50%); text-align: center; pointer-events: none; }
#n8-sphere .n8s-by { font-size: 12px; letter-spacing: .34em; text-transform: none; }
#n8-sphere .n8s-by2 { font-size: 9px; letter-spacing: .3em; margin-top: 6px; color: #5d5f63; }
#n8-sphere .n8s-lbl { position: absolute; font-size: 9px; letter-spacing: .3em; color: #5d5f63; pointer-events: none; }
#n8-sphere-retour { position: fixed; top: 12px; right: 16px; z-index: 9100; font-size: 12px; text-transform: none;
  letter-spacing: .08em; text-decoration: none; cursor: pointer; padding: 4px 6px; }
#n8-sphere-retour:hover, #n8-sphere-retour:focus-visible { color: #f2f2f2; outline: none; }

/* téléphone : le médaillon centré en haut, le texte dessous ; on peut faire défiler */
html[data-n8tel="1"] #n8-sphere { overflow-y: auto; }
html[data-n8tel="1"] #n8-sphere .n8s-medaillon { position: relative; left: auto; top: auto; transform: none; margin: 64px auto 0; width: min(78vw, 420px); }
html[data-n8tel="1"] #n8-sphere .n8s-droite { position: relative; top: auto; right: auto; width: 100%; height: auto; padding: 36px 28px 48px; }
html[data-n8tel="1"] #n8-sphere .n8s-l2 { font-size: 18px; letter-spacing: .22em; }
html[data-n8tel="1"] #n8-sphere .n8s-bas, html[data-n8tel="1"] #n8-sphere .n8s-lbl { display: none; }

/* Téléphone (jules, E5, 24/10/2026 : « au téléphone il ne sera pas visible ») : pas de 8 caché du tout —
   il débordait sur le bouton Réglages de la barre du bas. L'écran 8LOP reste ouvrable sur ordinateur. */
@media (max-width: 820px) { #noos-huit { display: none; } }