/* visitor.css — ce que voit le visiteur : la même app, mais on regarde, on ne touche pas.
   Chargé uniquement pour lui (posé par render.php). Charte du lab. */

/* pied de page du site : il remplace la barre d'état de David (retirée avec les blocs OWNER) */
body.app-visitor .site-foot{position:fixed;left:0;right:0;bottom:0;height:30px;z-index:4000;background:#191919;border-top:1px solid #333}

/* on regarde : rien n'est modifiable DANS L'APP. Le formulaire de contact, lui, doit marcher. */
body.visitor .pl-win input,body.visitor .pl-win textarea,body.visitor .pl-win select,
body.visitor #dockRow input,body.visitor #dockRow textarea,body.visitor #dockRow select{pointer-events:none}
body.visitor [contenteditable]{-webkit-user-modify:read-only;user-modify:read-only}

/* écran d'accueil sur téléphone : l'app se regarde sur ordinateur */
#mobile-note{position:fixed;inset:0;z-index:9000;display:none;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;padding:28px;background:#191919;color:#a5a5a5;text-align:center;
  font:13px/1.6 -apple-system,"Segoe UI",Roboto,sans-serif}
#mobile-note h2{margin:0;color:#e0e0e0;font-size:15px;font-weight:600}
#mobile-note p{margin:0;max-width:34ch}
#mobile-note a{color:#009ba0;text-decoration:none;border:1px solid #333;background:#2a2a2a;border-radius:4px;padding:6px 13px}
#mobile-note a:hover{border-color:#009ba0;color:#e0e0e0}
@media (max-width:820px){ body.visitor #mobile-note{display:flex} }

/* Les commandes de David sont construites en JS dans les panneaux : le visiteur ne les voit pas.
   (Toute écriture est de toute façon refusée par le serveur — ceci évite de montrer des boutons morts.) */
body.visitor .pp-launch,
body.visitor .pp-done,
body.visitor .pp-cancel,
body.visitor .pp-manual,
body.visitor .pp-up,
body.visitor .pp-dn,
body.visitor .pp-pin,
body.visitor .pp-foot,
body.visitor #pp-reset,
body.visitor .hd-btn,
body.visitor .td-bx,
body.visitor #ppk,
body.visitor .pl-win-head .x{display:none!important}

/* les cases de la To-Do laissent leur place au texte, sans trou */
body.visitor .td-row .td-bx{display:none!important}

/* LE DIRECT EST À DAVID : la page du visiteur n'affiche jamais le flux temps réel,
   il ne voit que la vidéo différée (visitor_video.js). */
body.visitor .cam-img,
body.visitor #camVideo,
body.visitor #camOverlay{display:none!important}

/* Le sous-header n'existe pas chez le visiteur : on remonte la page de ses 32 px,
   et on la ramène au-dessus du pied de page du site (30 px) — plus de bande noire vide. */
body.visitor #dockRow{top:32px!important;bottom:30px!important}
body.visitor #tl-scroll{top:32px!important;bottom:30px!important}

/* retour vers le site de David — pose par render.php, visiteur uniquement (12/08).
   Charte du site : pilule (50px comme .btn-primary et .cta-btn), couleurs de head.css.
   Contour en --head-sub et non --head-line : la barre est transparente au-dessus de la
   photo d'accueil, un contour #333 y disparait completement.
   Selecteur double car `.pro-header .pro-nav a` bat une simple classe. */
.pro-header .pro-nav a.pro-back,
a.pro-back{
  display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;width:auto;white-space:nowrap;
  margin-left:18px;padding:4px 11px;border:1px solid var(--head-sub);border-radius:50px;
  background:none;color:var(--head-txt);font-family:Arial,sans-serif;font-size:13px;
  font-weight:400;line-height:1;letter-spacing:.3px;text-decoration:none;
  transition:color .2s ease,border-color .2s ease,background-color .2s ease}
.pro-header .pro-nav a.pro-back:hover,
a.pro-back:hover{color:#00d4db;border-color:#00d4db;background:none}
.pro-header .pro-nav a.pro-back svg,
a.pro-back svg{display:block;flex:0 0 auto;width:18px;height:18px;fill:currentColor}
/* pages d'outils : pas de barre de site, le bouton flotte en haut a droite */
a.pro-back.pro-back-flottant{position:fixed;top:8px;right:16px;z-index:9500;margin:0;
  background:rgba(25,25,25,.92)}
@media (max-width:900px){
  .pro-header .pro-nav a.pro-back,
  a.pro-back{margin:16px auto 0;padding:7px 16px;font-size:14px;width:auto}
  a.pro-back.pro-back-flottant{margin:0;top:7px;right:10px;padding:6px 14px}
}