* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: #0f172a;
  color: #e2e8f0;
  min-height: 100vh;
}
.wrap { max-width: 640px; margin: 0 auto; padding: 24px 16px 48px; }
/* La page technicien n'est pas une page de lecture : son contenu utile est
   l'image. La colonne de 640 px la réduisait à un tiers de la fenêtre et
   rendait le texte illisible — elle s'élargit donc à la place disponible. */
.techPage .wrap { max-width: 1600px; }
header h1 { font-size: 1.6rem; margin: 8px 0 4px; }
header p { color: #94a3b8; margin: 0 0 24px; }
.card {
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 16px;
}
.card p { line-height: 1.5; }
.hidden { display: none; }
button {
  font: inherit;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
}
.big { display: block; width: 100%; min-height: 56px; font-size: 1.15rem; font-weight: 600; }
.full { width: 100%; }
.mt16 { margin-top: 16px; }
.primary { background: #2563eb; color: #fff; }
.primary:hover { background: #1d4ed8; }
.danger { background: #dc2626; color: #fff; }
.danger:hover { background: #b91c1c; }
.ghost { background: transparent; color: #cbd5e1; border: 1px solid #475569; padding: 12px 16px; }
.ghost:hover { background: #334155; }
.hint { color: #94a3b8; font-size: .9rem; margin-top: 12px; }
.muted { color: #94a3b8; font-size: .9rem; }
.banner {
  background: #dc2626;
  color: #fff;
  font-weight: 700;
  border-radius: 10px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.banner.live { background: #16a34a; }
.dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: #fff;
  animation: pulse 1.2s infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.code {
  font-size: 2.6rem;
  font-weight: 800;
  letter-spacing: .35em;
  text-indent: .35em;
  text-align: center;
  color: #fff;
  background: #0f172a;
  border: 2px dashed #475569;
  border-radius: 12px;
  padding: 14px 0;
  margin: 8px 0 20px;
  user-select: all;
}
label { display: block; margin: 12px 0 6px; color: #cbd5e1; }
input[type="password"], input[type="tel"], input[type="text"] {
  width: 100%;
  font: inherit;
  font-size: 1.1rem;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid #475569;
  background: #0f172a;
  color: #fff;
}
input:focus { outline: 2px solid #2563eb; }
.status { background: #172554; border: 1px solid #1e40af; color: #bfdbfe; }
.screen {
  background: #000;
  border-radius: 10px;
  /* Fenêtre de taille FIXE : la hauteur vient du VIEWPORT, jamais du contenu.
     Le zoom agrandit donc l'image À L'INTÉRIEUR, et c'est le cadre qui défile
     — la page ne bouge pas. Sans cela le cadre s'étirait avec l'image
     (354 px → 561 px) et repoussait tout le bas de page.
     La hauteur suit désormais la fenêtre (et non un rapport 16/10) : l'image
     occupe vraiment l'espace disponible au lieu d'une bande étroite. */
  height: 78vh;
  min-height: 320px;
  overflow: auto;
  margin: 0 0 12px;
}
.screen img { display: block; width: 100%; height: auto; }
.zoomBar { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; }
.zoomBtn { padding: 8px 14px; font-size: 1rem; line-height: 1; }
.zoomBtn:disabled { opacity: .4; cursor: default; }
.zoomLabel { min-width: 3.6em; text-align: center; font-variant-numeric: tabular-nums; }
footer { color: #64748b; font-size: .85rem; text-align: center; margin-top: 24px; }
footer .legal { margin: 0; }
.credit {
  margin: 14px 0 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;   /* en bas à droite */
  gap: 10px;
  font-size: .72rem;           /* plus petit, discret */
}
/* « a:visited » a une spécificité supérieure aux classes : le lien virait au
   violet après un clic. On fixe donc la couleur sur tous les états, avec une
   spécificité au moins égale, pour un rendu constant et professionnel. */
footer .credit a,
footer .credit a:link,
footer .credit a:visited,
footer .credit a:active {
  color: #5b6675;              /* gris clair, proche du fond */
  text-decoration: none;
}
footer .credit a:hover { color: #94a3b8; }
.creditLink { display: inline-flex; align-items: center; gap: 5px; }
.ghIcon { opacity: .75; }
.techLink { opacity: .4; display: inline-flex; align-items: center; }
.techLink:hover { opacity: 1; }
.banner.ended { background: #334155; }
.banner.ended .dot { animation: none; opacity: .6; }
.unsupported h2 { color: #fbbf24; font-size: 1.15rem; margin-top: 0; }
.unsupported p { white-space: pre-line; line-height: 1.6; }
.noscript { text-align: center; color: #94a3b8; }

/* --- Page d'accueil / portail --- */
.siteHead { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0 6px; }
.brand { font-weight: 700; font-size: 1.05rem; color: #e2e8f0; display: flex; align-items: center; gap: 8px; }
.brand .mark { width: 26px; height: 26px; border-radius: 8px; background: #2563eb; display: inline-flex; align-items: center; justify-content: center; font-size: .85rem; }
.brand .tag { font-weight: 400; font-size: .8rem; color: #94a3b8; }
.hero { text-align: center; padding: 26px 20px; }
.hero h1 { font-size: 1.5rem; margin: 0 0 10px; }
.hero p { color: #cbd5e1; margin: 0 auto 18px; max-width: 520px; }
.trustRow { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; margin-bottom: 16px; }
.miniCard { background: #1e293b; border: 1px solid #334155; border-radius: 12px; padding: 14px; font-size: .88rem; color: #cbd5e1; }
.miniCard strong { display: block; color: #e2e8f0; margin-bottom: 4px; }
.how h2, .about h2 { color: #e2e8f0; font-size: 1.05rem; margin-top: 0; }
.how { counter-reset: etape; }
.step { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; color: #cbd5e1; font-size: .92rem; }
.step::before { counter-increment: etape; content: counter(etape); min-width: 26px; height: 26px; border-radius: 50%; background: #2563eb; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
.about { font-size: .9rem; color: #94a3b8; }
.about a { color: #7dd3fc; }

/* --- Bandeau d'état technicien --- */
.connStrip { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.badge { font-size: .78rem; font-weight: 600; padding: 5px 10px; border-radius: 999px; border: 1px solid; }
.badge.ok { color: #4ade80; border-color: #166534; background: #052e16; }
.badge.warn { color: #fbbf24; border-color: #854d0e; background: #2a1a04; }
.badge.off { color: #94a3b8; border-color: #334155; background: #1e293b; }

/* --- Infos système (poste de la personne aidée) --- */
.sysinfo { background: #0f172a; border: 1px solid #334155; border-radius: 10px; padding: 12px 14px; margin: 0 0 12px; }
.sysinfo h3 { margin: 0 0 8px; font-size: .85rem; color: #94a3b8; text-transform: uppercase; letter-spacing: .05em; }
.sysgrid { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; font-size: .85rem; }
.sysgrid .k { color: #64748b; }
.sysgrid .v { color: #e2e8f0; word-break: break-word; }

/* --- Journal des connexions (traçabilité, replié par défaut) --- */
.logPanel { background: #0f172a; border: 1px solid #334155; border-radius: 10px; padding: 12px 14px; margin: 16px 0 0; }
.logPanel summary { cursor: pointer; color: #94a3b8; font-size: .85rem; letter-spacing: .05em; text-transform: uppercase; display: flex; align-items: center; gap: 8px; list-style: none; }
.logPanel summary::-webkit-details-marker { display: none; }
/* La flèche indique l'état : elle pivote à l'ouverture. */
.logPanel summary::before { content: '\25B6'; font-size: .7rem; transition: transform .15s ease; }
.logPanel[open] summary::before { transform: rotate(90deg); }
.logWrap { overflow-x: auto; margin-top: 10px; }
.logTable { width: 100%; border-collapse: collapse; font-size: .82rem; }
.logTable th, .logTable td { text-align: left; padding: 6px 10px; border-bottom: 1px solid #1e293b; color: #cbd5e1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.logTable th { color: #64748b; font-weight: 600; text-transform: none; }
.logNote { color: #64748b; font-size: .76rem; margin: 8px 0 0; }
/* Date de dernière mise à jour, discrète à côté du crédit. */
.buildDate { color: #5b6675; font-size: .72rem; }