/* MurVision — charte AREOCOD : fond clair #f5f7fa, topbar bleu #1e3a8a, boutons bleus/blancs.
   Conventions : contours #64748b, dividers #cbd5e1, ombre douce double, pas de scroll global.
   La page d'émission terrain (.page-stream) reste sombre (plein écran vidéo) : voir plus bas. */

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: #f5f7fa;
  color: #000000;
  overflow: hidden;               /* pas de scroll global : chaque zone gère le sien */
  display: flex;
  flex-direction: column;
}
button {
  font: inherit;
  cursor: pointer;
  border: 1px solid #64748b;
  border-radius: 6px;
  background: #fff;
  color: #000000;
  padding: 8px 14px;
  box-shadow: 0 1px 3px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.05);
  transition: background .15s ease, border-color .15s ease;
}
button:hover { background: #eef2f7; }
button:disabled { opacity: .6; cursor: default; }

/* Bouton primaire (validation, action principale) */
.btn-principal {
  background: #2563eb;
  color: #fff;
  border-color: #2563eb;
  font-weight: 600;
  padding: 8px 14px;
}
.btn-principal:hover { background: #1e40af; border-color: #1e40af; }

/* Bouton danger (Révoquer, Supprimer, Désactiver) */
.btn-danger {
  background: #dc2626;
  color: #fff;
  border-color: #dc2626;
}
.btn-danger:hover { background: #b91c1c; border-color: #b91c1c; }

input, select {
  font: inherit;
  background: #fff;
  color: #000000;
  border: 1px solid #64748b;
  border-radius: 6px;
  padding: 8px 10px;
}
input:focus, select:focus { outline: 2px solid #2563eb; outline-offset: -1px; }
a { color: #2563eb; text-decoration: none; }
code {
  display: block;
  background: #eef2f7;
  padding: 6px 8px;
  border-radius: 6px;
  word-break: break-all;
}
.erreur { color: #dc2626; margin: 8px 0; }

/* ---------- Navigation console ---------- */
.nav {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 16px;
  height: 56px;
  background: #1e3a8a;
}
.nav-marque { font-weight: 700; color: #fff; margin-right: 12px; }
.nav a { color: #fff; text-decoration: none; padding: 4px 8px; border-radius: 6px; }
.nav a:hover { background: rgba(255,255,255,.15); }
.nav-droite { margin-left: auto; display: flex; align-items: center; gap: 14px; }

/* ---------- Login ---------- */
.page-login { align-items: center; justify-content: center; }
.carte-login {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(340px, 90vw);
  padding: 28px;
  background: #fff;
  border: 1px solid #64748b;
  border-radius: 10px;
  box-shadow: 0 10px 25px rgba(15,23,42,.08), 0 2px 6px rgba(15,23,42,.05);
}
.carte-login h1 { margin: 0 0 8px; color: #000000; text-align: center; }
.carte-login button {
  background: #2563eb;
  color: #fff;
  border-color: #2563eb;
  width: 100%;
  font-weight: 600;
}
.carte-login button:hover { background: #1e40af; border-color: #1e40af; }

/* ---------- Console : contenu commun (liens, relecture) ---------- */
.contenu {
  flex: 1 1 auto;
  overflow-y: auto;               /* scroll interne, jamais global */
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
}
.carte {
  background: #fff;
  border: 1px solid #64748b;
  border-radius: 10px;
  padding: 16px;
  color: #000000;
  box-shadow: 0 10px 25px rgba(15,23,42,.08), 0 2px 6px rgba(15,23,42,.05);
}
.carte h2 { margin: 0 0 12px; font-size: 1.1rem; color: #000000; }

.tableau { width: 100%; border-collapse: collapse; }
.tableau th, .tableau td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid #cbd5e1;
}
.tableau th { color: #000000; font-weight: 600; }

/* ---------- États (page émission) ---------- */
.etat { padding: 6px 14px; border-radius: 999px; font-weight: 700; }
.etat-on   { background: #14532d; color: #4ade80; }
.etat-off  { background: #334155; color: #cbd5e1; }
.etat-warn { background: #7c2d12; color: #fdba74; }
.etat-err  { background: #7f1d1d; color: #fca5a5; }

/* ---------- Page émission (mobile d'abord) — reste sombre, plein écran vidéo ---------- */
.page-stream { background: #000; color: #e2e8f0; }
.stream-ui { position: fixed; inset: 0; display: flex; flex-direction: column; }
#preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;              /* la caméra remplit l'écran derrière l'UI */
}
.stream-ui .etat {
  position: absolute;
  top: max(16px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
}
.stream-gps { position: absolute; top: calc(max(16px, env(safe-area-inset-top)) + 44px);
  left: 50%; transform: translateX(-50%); background: rgba(15,23,42,.75); color: #fff;
  font-size: .85rem; padding: 4px 12px; border-radius: 999px; white-space: nowrap; }
.btn-stream {
  position: absolute;
  bottom: max(24px, env(safe-area-inset-bottom));
  left: 16px;
  right: 92px;   /* laisse la place au bouton caméra à droite */
  min-height: 64px;               /* usage au doigt */
  font-size: 1.3rem;
  font-weight: 700;
  border-radius: 12px;
  background: #2563eb;
  color: #fff;
  border-color: #2563eb;
}
.btn-stream:hover { background: #1e40af; border-color: #1e40af; }
.btn-cam {
  position: absolute;
  bottom: max(24px, env(safe-area-inset-bottom));   /* aligné avec le bouton diffusion */
  right: 16px;
  width: 64px;
  height: 64px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(15, 23, 42, .8);
  color: #fff;
  border: 1px solid #64748b;
  z-index: 5;
}
.stream-libelle {
  position: absolute;
  bottom: max(96px, calc(env(safe-area-inset-bottom) + 96px));
  left: 0;
  right: 0;
  text-align: center;
  color: #e2e8f0;
  text-shadow: 0 1px 3px rgba(0,0,0,.8);
  margin: 0;
}
.stream-erreur {
  margin: auto;
  text-align: center;
  padding: 24px;
  max-width: 100%;
  overflow-wrap: break-word;
}
.stream-erreur h1 { color: #fff; font-size: clamp(1.4rem, 6vw, 2rem); }

/* Panneau d'aide autorisations caméra/micro (page émission) */
.stream-aide {
  position: absolute;
  inset: auto 12px calc(env(safe-area-inset-bottom) + 110px) 12px;
  background: rgba(15, 23, 42, .96);
  border: 1px solid #64748b;
  border-radius: 12px;
  padding: 18px 16px;
  color: #fff;
  z-index: 10;
}
.stream-aide h2 { margin: 0 0 10px; font-size: 1.15rem; color: #fff; }
.stream-aide ol { margin: 0 0 14px; padding-left: 20px; }
.stream-aide li { margin-bottom: 10px; line-height: 1.45; font-size: 1rem; }
.btn-stream-aide {
  width: 100%;
  min-height: 48px;
  font-size: 1.1rem;
  font-weight: 700;
  border-radius: 10px;
  background: #2563eb;
  color: #fff;
  border-color: #2563eb;
}

/* ===== Console page unique ===== */
.console { display: flex; height: calc(100vh - 56px); }
.col-liens { width: 320px; flex: none; overflow-y: auto; padding: 12px;
  background: #f5f7fa; border-right: 1px solid #64748b; display: flex; flex-direction: column; gap: 10px; }
#btn-nouveau { display: block; width: 100%; }
#cartes { display: flex; flex-direction: column; gap: 10px; }
.col-mur { flex: 1; padding: 12px; min-width: 0; background: #f5f7fa; }

.carte-lien { position: relative; border: 1px solid #64748b; border-radius: 8px;
  padding: 10px 34px 10px 12px; background: #fff; cursor: grab; color: #000000;
  box-shadow: 0 6px 14px rgba(15,23,42,.16), 0 2px 4px rgba(15,23,42,.12);   /* relief 3D */
  transition: box-shadow .15s ease, transform .15s ease; }
.carte-lien:hover { transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(15,23,42,.20), 0 4px 8px rgba(15,23,42,.14); }
.carte-lien.grise { background: #e2e8f0; }   /* actif = blanc, expiré/révoqué = gris franc */
/* Diffusion en cours : fond vert pâle + halo rouge très foncé bien visible */
.carte-lien.en-direct {
  background: #dcfce7;
  border-color: #7f1d1d;
  box-shadow: 0 0 0 2px #7f1d1d, 0 0 14px 4px rgba(153, 27, 27, .55),
              0 6px 14px rgba(15, 23, 42, .16);
  animation: halo-direct 2s ease-in-out infinite;
}
@keyframes halo-direct {
  0%, 100% { box-shadow: 0 0 0 2px #7f1d1d, 0 0 10px 2px rgba(153, 27, 27, .40),
                         0 6px 14px rgba(15, 23, 42, .16); }
  50%      { box-shadow: 0 0 0 2px #7f1d1d, 0 0 18px 6px rgba(153, 27, 27, .65),
                         0 6px 14px rgba(15, 23, 42, .16); }
}
.carte-libelle { font-weight: 600; color: #000000; }
.carte-expire { font-size: .85em; color: #000000; }
.carte-etat { font-size: .8em; margin-top: 2px; color: #000000; }
.carte-etat.direct { color: #15803d; font-weight: 700; }   /* vert foncé quand ça diffuse */
.carte-menu { position: absolute; top: 6px; right: 6px; border: none;
  background: none; font-size: 18px; cursor: pointer; color: #000000; border-radius: 6px;
  padding: 2px 5px; box-shadow: none; }
.carte-menu:hover { background: #eef2f7; }

.mur-grille { display: grid; gap: 10px; height: 100%;
  grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); }
.tuile { position: relative; border: 1px solid #64748b; border-radius: 8px;
  overflow: hidden; background: #0f172a; display: flex; flex-direction: column; }
.tuile-vide { background: #1e293b; }
.tuile-vide .tuile-tete { display: none; }
.tuile-vide video, .tuile-vide .curseur { display: none; }
.tuile-depot { display: none; }
.tuile-vide .tuile-depot { display: flex; height: 100%; align-items: center;
  justify-content: center; color: #94a3b8; }
.tuile.depot-survol { outline: 2px dashed #94a3b8; outline-offset: -6px; }
/* Tuile dont le son est actif (clic sur la vidéo en direct) : halo vert */
.tuile-son { border-color: #16a34a;
  box-shadow: 0 0 0 2px #16a34a, 0 0 14px 4px rgba(22, 163, 74, .55); }

.tuile-tete { flex: none; display: flex; align-items: center; gap: 8px;
  height: 48px; padding: 0 8px 0 12px; background: #1e3a8a; color: #fff;
  position: relative; }   /* relative : le bouton Parler se centre dessus */
.tuile-libelle { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tuile-etat { margin-left: auto; font-size: .8em; opacity: .9; }
/* Bouton Carte : visible uniquement en plein écran (là où la PiP existe) */
.tuile-carte-btn { display: none; }
.tuile-plein .tuile-carte-btn { display: block; flex: none; height: 34px; padding: 0 14px;
  border: 1px solid rgba(255,255,255,.55); border-radius: 8px;
  background: rgba(255,255,255,.18); color: #fff; font-weight: 600; box-shadow: none; }
.tuile-plein .tuile-carte-btn:hover { background: rgba(255,255,255,.32); }
.tuile-fermer { flex: none; width: 34px; height: 34px; padding: 0; border: none;
  border-radius: 8px; background: rgba(255,255,255,.15); color: #fff; box-shadow: none;
  display: flex; align-items: center; justify-content: center; font-size: 17px; line-height: 1; }
.tuile-fermer:hover { background: rgba(255,255,255,.3); }
/* Bouton poussoir « Parler » : bien visible, centré dans la barre de titre */
.tuile-parler { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  height: 36px; padding: 0 20px; border: 1px solid rgba(255,255,255,.55);
  border-radius: 8px; background: rgba(255,255,255,.18); color: #fff; box-shadow: none;
  font-weight: 700; font-size: .95rem; line-height: 1; white-space: nowrap;
  touch-action: none; }
.tuile-parler:hover { background: rgba(255,255,255,.32); }
.tuile-parler.actif { background: #dc2626; border-color: #dc2626; }
.tuile-parler[hidden] { display: none; }

.tuile-corps { position: relative; flex: 1; min-height: 0; background: #0f172a; }
.tuile-corps video { width: 100%; height: 100%; object-fit: contain; }
/* Voyant d'antenne : visible pendant que l'opérateur parle réellement */
.tuile-antenne { position: absolute; top: 10px; left: 10px; z-index: 6;
  background: #dc2626; color: #fff; font-weight: 700; font-size: .95rem;
  padding: 5px 12px; border-radius: 8px; animation: antenne-pulse 1s ease-in-out infinite; }
.tuile-antenne[hidden] { display: none; }
@keyframes antenne-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
/* RELECTURE affiché dans la barre de titre, en orange bien visible */
.tuile-relecture .tuile-tete { background: #b45309; }
.tuile-relecture .tuile-etat { font-weight: 700; opacity: 1; }

.curseur { position: absolute; bottom: 0; left: 0; right: 0; display: flex;
  align-items: center; gap: 6px; padding: 4px 6px; background: rgba(15,23,42,.8); }
.curseur-jour { width: 118px; height: 26px; border-radius: 4px; border: none;
  padding: 0 6px; background: #1e293b; color: #e2e8f0; font-size: .8em; }
.curseur-zone { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.curseur-echelle { position: relative; height: 14px; }
.curseur-echelle .grad { position: absolute; top: 0; bottom: 0; border-left: 1px solid #64748b; }
.curseur-echelle .grad span { position: absolute; left: 2px; top: -1px; font-size: .65em; color: #cbd5e1; white-space: nowrap; }
.curseur-piste { position: relative; height: 16px; background: #334155; border-radius: 4px;
  cursor: grab; touch-action: none; }
/* Position de lecture en relecture : barre verticale rouge */
.curseur-position { position: absolute; top: -2px; bottom: -2px; width: 2px;
  background: #dc2626; display: none; pointer-events: none; z-index: 1; }
.curseur-piste:active { cursor: grabbing; }
.curseur-plage { position: absolute; top: 0; bottom: 0; background: #3b82f6;
  border-radius: 4px; }
.curseur-zoom-moins, .curseur-zoom-plus { flex: none; width: 26px; height: 26px; padding: 0;
  border: none; border-radius: 6px; background: rgba(255,255,255,.15); color: #fff; box-shadow: none; }
/* « Revenir au direct » : centré dans la barre de titre, uniquement en relecture
   (le bouton Parler, lui, n'existe qu'en direct — pas de collision au centre) */
.curseur-direct { display: none; }
.tuile-relecture .curseur-direct { display: block; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%); height: 36px; padding: 0 20px;
  border: none; border-radius: 8px; background: #fff; color: #000000;
  font-weight: 700; font-size: .95rem; line-height: 1; white-space: nowrap; box-shadow: none; }
.tuile-relecture .curseur-direct:hover { background: #eef2f7; }
.tuile-relecture .tuile-parler { display: none; }   /* Parler = direct uniquement */

/* ===== Modales ===== */
.mv-fond { position: fixed; inset: 0; background: rgba(15,23,42,.45); z-index: 50;
  display: flex; align-items: center; justify-content: center; }
.mv-modale { background: #fff; border: 1px solid #64748b; border-radius: 10px; color: #000000;
  box-shadow: 0 18px 45px rgba(15,23,42,.22), 0 4px 12px rgba(15,23,42,.12);
  resize: both; overflow: auto; min-width: 300px; min-height: 120px; }
.mv-tete { display: flex; justify-content: space-between; align-items: center;
  padding: 10px 12px; font-weight: 700; cursor: move;
  background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
  color: #fff; border-radius: 10px 10px 0 0; }
.mv-fermer { border: none; background: none; font-size: 16px; cursor: pointer; color: #fff;
  box-shadow: none; opacity: .85; }
.mv-fermer:hover { opacity: 1; background: rgba(255,255,255,.15); }
.mv-corps { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.mv-corps .rang { display: flex; gap: 8px; flex-wrap: wrap; }
/* Blocs fonctionnels de la modale de lien */
.mv-bloc { border-top: 1px solid #cbd5e1; padding-top: 12px; }
.mv-bloc:first-child { border-top: none; padding-top: 0; }
.mv-bloc-titre { font-size: .76em; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: #000000; margin-bottom: 8px; }
.mv-note { font-size: .85em; color: #000000; margin: 0 0 8px; }
/* Ligne champ + bouton alignés (Renommer, Prolonger) */
.mv-ligne { display: flex; gap: 8px; align-items: flex-end; }
.mv-ligne label { flex: 1; margin: 0; }
.mv-ligne label input { margin-bottom: 0; }
.mv-ligne button { flex: none; margin-bottom: 1px; }
.mv-corps label { display: block; font-weight: 600; color: #000000; margin-bottom: 2px; }
.mv-corps input {
  display: block; width: 100%; box-sizing: border-box;
  padding: 8px 10px; border: 1px solid #64748b; border-radius: 6px;
  margin: 4px 0 10px; font: inherit;
}

.tuile-plein { position: fixed; inset: 0; z-index: 40; border-radius: 0; }

/* Carte PiP (tuile plein écran) : position + direction de la caméra */
.tuile-carte { display: none; }
.tuile-plein .tuile-carte:not([hidden]) { display: block; position: absolute;
  right: 12px; bottom: 64px; width: 34%; height: 38%; min-width: 300px; min-height: 230px;
  z-index: 45; border: 2px solid #fff; border-radius: 10px; overflow: hidden;
  box-shadow: 0 18px 45px rgba(15,23,42,.35); background: #e2e8f0; }
.marqueur-cap { width: 0; height: 0; }
.marqueur-cap .cone { width: 120px; height: 120px; margin: -60px 0 0 -60px;
  transform-origin: center; pointer-events: none; }
/* Icône du sélecteur de couches : cartes empilées (SVG inline, PNG Leaflet non embarqué) */
.leaflet-control-layers-toggle {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 22 8 12 14 2 8Z' fill='%23444'/%3E%3Cpath d='M2 12l10 6 10-6' fill='none' stroke='%23444' stroke-width='2.4'/%3E%3Cpath d='M2 16.5l10 6 10-6' fill='none' stroke='%23444' stroke-width='2.4'/%3E%3C/svg%3E") !important;
  background-size: 22px 22px !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
.carte-recentrer { width: 30px; height: 30px; font-size: 18px; line-height: 1; padding: 0;
  border-radius: 4px; border: 2px solid rgba(0,0,0,.2); background: #fff; color: #000;
  box-shadow: none; cursor: pointer; }

/* ===== Admin générale ===== */
.admin { padding: 16px; overflow-y: auto; height: calc(100vh - 56px); background: #f5f7fa; }
.admin h1, .admin h2 { color: #000000; }
.admin .carte { border: 1px solid #64748b; border-radius: 8px; padding: 12px;
  margin: 12px 0; background: #fff; color: #000000;
  box-shadow: 0 10px 25px rgba(15,23,42,.08), 0 2px 6px rgba(15,23,42,.05); }
.admin .rang { display: flex; gap: 8px; flex-wrap: wrap; }