/* ============================================================================
   XERS-SURFACES — 3 xers FACTEUR DE FORME (RS-1, nuit de build 2026-08-12)
   ----------------------------------------------------------------------------
   Pas des thèmes : des USAGES. On sépare CE QUE le xerboxion est (bions/
   ploxions/tsoins) de COMMENT on le dessine : un xer = un renderer + les
   capacités de sa surface. Les ploxions décrivent leur contenu PAR PRIORITÉ
   (contrat XUI v0 : describe() → items p1..p5 ; la montre coupe à p≤2, le
   desktop montre tout).
   Mécanique : la STRUCTURE vit ici (body[data-xer=montre|tv|borne] — PAS
   gatée uitier-mobile : la TV est desktop), le COMPORTEMENT (swipe, D-pad,
   appui long) vit dans resources/views/partials/_xer_bion.blade.php
   (runtime window.jOSXerSurfaces). Tokens : on RÉUTILISE les data-theme
   existants (montre→zen, tv→chill-tekk, borne→contraste), zéro nouveau thème.
   Contraintes DURES :
     - zéro asset externe (offline/CSP), polices système uniquement
     - chemin de sortie TOUJOURS visible : montre = ✕ haut de cadran,
       tv = chip « quitter », borne = ⏻ appui long 3 s (hint à l'entrée)
     - gate html:not(.is-embedded) : une page DANS une iframe (px casté,
       fenêtre jOS) ne rejoue JAMAIS la surface → pas de montre dans la montre
   Surfaces : montre ⌚ (rond minuscule), tv 📺 (10 pieds), borne 🖲 (kiosque).
   ============================================================================ */


/* ##########################################################################
   1) MONTRE ⌚ — écran rond/minuscule : UNE carte plein écran à la fois,
      gros swipe horizontal, cadran horloge par défaut, tout ≥48px.
      Le rond est SIMULÉ/épousé par clip-path circle() sur .xrs-m-cadran.
   ########################################################################## */

html:not(.is-embedded) body[data-xer="montre"]{overflow:hidden}
/* le chrome du site n'existe pas au poignet — la sortie est DANS le cadran (✕) */
html:not(.is-embedded) body[data-xer="montre"] :is(#jnav,.mobile-chill-dock,.desktop-dock,#xshell){display:none!important}

#xrs-montre{position:fixed;inset:0;z-index:99900;display:flex;align-items:center;justify-content:center;
  background:#000;touch-action:none;user-select:none;-webkit-user-select:none}
.xrs-m-cadran{position:relative;width:min(100vw,100vh);height:min(100vw,100vh);
  background:var(--xr-bg,#fafafa);color:var(--xr-text,#2b2b2b);
  border-radius:50%;clip-path:circle(50% at 50% 50%);overflow:hidden;
  font-family:var(--xr-font-ui,system-ui,sans-serif)}
.xrs-m-vue{position:absolute;inset:0}
.xrs-m-carte{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1.6vmin;padding:12% 16%;text-align:center;animation:xrsm-arrive .22s ease}
@keyframes xrsm-arrive{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}

/* cadran horloge (carte par défaut) */
.xrs-m-horloge .hh{font-size:clamp(48px,26vmin,150px);font-weight:800;line-height:1;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.xrs-m-horloge .ss{font-size:clamp(14px,6vmin,30px);opacity:.55;font-variant-numeric:tabular-nums}
.xrs-m-horloge .dd{margin-top:1vmin;font-size:clamp(14px,5vmin,26px);font-weight:700;opacity:.75}

/* carte ploxion : titre court (~12 chars utiles) + corps XUI p1-2 */
.xrs-m-carte .t{flex:0 0 auto;font-size:clamp(13px,4.5vmin,20px);font-weight:800;opacity:.8;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.xrs-m-carte .b{flex:1;min-height:0;width:100%;display:flex;flex-direction:column;gap:2.2vmin;
  align-items:stretch;justify-content:center;overflow:hidden}

/* rendu XUI local (fallback du runtime — voir contrat XUI v0) */
#xrs-montre .xui-stat .l{display:block;font-size:clamp(12px,4.5vmin,20px);font-weight:700;opacity:.62}
#xrs-montre .xui-stat .v{display:block;font-size:clamp(34px,14vmin,84px);font-weight:800;line-height:1.05}
#xrs-montre .xui-stat .v small{font-size:.35em;opacity:.6;margin-left:.15em}
#xrs-montre .xui-gauge .l{display:block;font-size:clamp(12px,4.5vmin,20px);font-weight:700;opacity:.62}
#xrs-montre .xui-gauge .bar{display:block;height:14px;border-radius:999px;overflow:hidden;
  background:color-mix(in srgb,var(--xr-text,#2b2b2b) 14%,transparent)}
#xrs-montre .xui-gauge .bar i{display:block;height:100%;border-radius:999px;background:var(--xr-accent,#2b2b2b)}
#xrs-montre .xui-gauge .v{display:block;font-size:clamp(13px,5vmin,22px);font-weight:700;opacity:.8}
#xrs-montre .xui-act{min-height:48px;padding:8px 18px;border-radius:999px;border:0;cursor:pointer;
  background:var(--xr-accent,#2b2b2b);color:var(--xr-bg,#fafafa);
  font:inherit;font-size:clamp(14px,5vmin,22px);font-weight:800;-webkit-tap-highlight-color:transparent}
#xrs-montre .xui-act:active{filter:brightness(1.2)}
#xrs-montre .xui-list .l{display:block;font-size:clamp(12px,4.5vmin,18px);font-weight:700;opacity:.62;margin-bottom:.6vmin}
#xrs-montre .xui-list .row{display:block;width:100%;font-size:clamp(13px,4.8vmin,20px);line-height:1.5;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:0;background:transparent;color:inherit;
  font-family:inherit;text-align:center;padding:2px 0}
#xrs-montre .xui-list button.row{min-height:48px;cursor:pointer;-webkit-tap-highlight-color:transparent}
#xrs-montre .xui-list .row b{font-weight:800}
#xrs-montre .xui-text{font-size:clamp(14px,5.5vmin,24px);line-height:1.4;overflow:hidden}

/* ploxion SANS describe : le ploxion normal en plein cadre (iframe ronde) */
.xrs-m-plein{padding:0!important}
.xrs-m-plein .t{position:absolute;top:5%;left:14%;right:14%;z-index:1;text-align:center;
  text-shadow:0 1px 6px rgba(0,0,0,.4)}
.xrs-m-plein iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:var(--xr-bg,#fff)}

/* navigation : gros swipe + chevrons visibles ≥48px (le swipe ne traverse pas une iframe) */
.xrs-m-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:48px;height:72px;
  display:flex;align-items:center;justify-content:center;border:0;background:transparent;color:inherit;
  opacity:.38;font-size:32px;line-height:1;cursor:pointer;-webkit-tap-highlight-color:transparent}
.xrs-m-nav:active{opacity:.95}
.xrs-m-nav.g{left:0}
.xrs-m-nav.d{right:0}
.xrs-m-dots{position:absolute;left:0;right:0;bottom:6%;z-index:2;display:flex;gap:8px;justify-content:center;
  pointer-events:none}
.xrs-m-dots i{width:8px;height:8px;border-radius:50%;background:currentColor;opacity:.28}
.xrs-m-dots i.on{opacity:.95}

/* SORTIE — toujours visible, en haut du cadran, hitbox 48px */
.xrs-m-exit{position:absolute;top:1.5%;left:50%;transform:translateX(-50%);z-index:3;width:48px;height:48px;
  border-radius:50%;border:0;background:transparent;color:inherit;opacity:.45;font-size:20px;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.xrs-m-exit:active{opacity:1}


/* ##########################################################################
   2) TV 📺 — l'écran à 10 pieds : échelle ×1.4 (posée par le runtime via
      --xr-scale), grosses cartes, focus ÉPAIS piloté aux flèches/D-pad
      (Enter ouvre, Échap/Back sort), pointeur optionnel (rien n'est bloqué).
   ########################################################################## */

/* focus D-pad : immanquable depuis le canapé */
html:not(.is-embedded) body[data-xer="tv"] :focus{
  outline:5px solid var(--xr-accent,#3fe0d0)!important;outline-offset:3px!important;border-radius:8px}
/* marge overscan (les TV rognent les bords) */
html:not(.is-embedded) body[data-xer="tv"] #hm{padding:1.5vmin 2.5vmin}
/* la grille du bureau devient une grille de GROSSES cartes */
html:not(.is-embedded) body[data-xer="tv"] #hm .hm-lgrid{
  display:grid!important;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))!important;gap:22px!important}
html:not(.is-embedded) body[data-xer="tv"] #hm .hm-lt{
  min-height:150px!important;gap:12px!important;border-radius:18px!important;border-width:2px!important}
html:not(.is-embedded) body[data-xer="tv"] #hm .hm-lt .hm-ic{font-size:3.4rem!important}
html:not(.is-embedded) body[data-xer="tv"] #hm .hm-lt .hm-nm{font-size:1.02rem!important}
html:not(.is-embedded) body[data-xer="tv"] #hm .hm-search{min-height:52px;font-size:1.05rem}

/* chip mode TV = mode d'emploi À L'ENTRÉE + SORTIE toujours visible (bouton quitter) */
#xrs-tv-chip{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:99950;
  display:flex;align-items:center;gap:12px;max-width:92vw;padding:10px 18px;border-radius:999px;
  background:rgba(6,11,20,.92);color:#e7f0ff;border:1px solid rgba(120,150,210,.4);
  box-shadow:0 10px 30px rgba(0,0,0,.5);font-size:.95rem;transition:opacity .3s}
#xrs-tv-chip .k{font-weight:800;white-space:nowrap}
#xrs-tv-chip .m{opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#xrs-tv-chip .q{min-height:44px;padding:6px 16px;border-radius:999px;border:1px solid rgba(120,150,210,.5);
  background:transparent;color:#8fd0ff;font:inherit;font-weight:700;cursor:pointer;flex:0 0 auto}
/* après 7 s le chip se fait discret — mais reste là (chemin de sortie) */
#xrs-tv-chip.mini .m{display:none}
#xrs-tv-chip.mini{opacity:.5}
#xrs-tv-chip.mini:hover,#xrs-tv-chip.mini:focus-within{opacity:1}


/* ##########################################################################
   3) BORNE 🖲 — kiosque mono-usage : UN ploxion plein écran verrouillé,
      gros bandeau titre, sortie discrète mais présente (⏻ appui long 3 s,
      hint affiché à l'entrée). Expo / comptoir / écran mural.
      Si l'onglet est déjà un écran ?kiosk= (jOSScreen), la borne ne double
      pas le cadre : elle n'ajoute QUE le bandeau + la sortie (.xrs-b-kiosk).
   ########################################################################## */

html:not(.is-embedded) body[data-xer="borne"]{overflow:hidden}
html:not(.is-embedded) body[data-xer="borne"] :is(#jnav,.mobile-chill-dock,.desktop-dock,#xshell){display:none!important}

#xrs-borne{position:fixed;inset:0;z-index:99900;display:flex;flex-direction:column;
  background:var(--xr-bg,#000);color:var(--xr-text,#fff);font-family:var(--xr-font-ui,system-ui,sans-serif)}
#xrs-borne .xrs-b-bandeau{flex:0 0 auto;display:flex;align-items:center;gap:14px;
  padding:calc(14px + env(safe-area-inset-top)) 22px 14px;font-size:1.6rem;font-weight:800;
  background:var(--xr-surface,#111);border-bottom:3px solid var(--xr-accent,#ffff00)}
#xrs-borne .xrs-b-bandeau .ic{font-size:1.9rem;flex:0 0 auto}
#xrs-borne .xrs-b-bandeau .nm{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#xrs-borne .xrs-b-corps{flex:1;min-height:0;position:relative}
#xrs-borne .xrs-b-corps iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
#xrs-borne .xrs-b-vide{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  padding:24px;text-align:center;font-size:1.1rem;opacity:.7}

/* picker (première entrée : choisir LE ploxion de la borne) */
#xrs-borne .xrs-b-pick{position:absolute;inset:0;overflow-y:auto;display:grid;align-content:start;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;padding:22px}
#xrs-borne .xrs-b-pick button{min-height:88px;padding:12px;border-radius:14px;cursor:pointer;
  border:2px solid var(--xr-border,#444);background:var(--xr-surface,#111);color:inherit;
  font:inherit;font-size:1.15rem;font-weight:700;-webkit-tap-highlight-color:transparent}
#xrs-borne .xrs-b-pick button:hover,#xrs-borne .xrs-b-pick button:focus{border-color:var(--xr-accent,#ffff00)}

/* hint d'entrée (comment on sort) — s'efface après 6 s */
#xrs-borne .xrs-b-hint{position:fixed;left:50%;bottom:84px;transform:translateX(-50%);z-index:99996;
  padding:10px 18px;border-radius:999px;background:rgba(0,0,0,.85);color:#fff;
  border:1px solid rgba(255,255,255,.3);font-size:.9rem;white-space:nowrap;transition:opacity .4s}
#xrs-borne .xrs-b-hint.off{opacity:0;pointer-events:none}

/* SORTIE — discrète mais présente : ⏻, appui long 3 s (feedback visuel .tenue) */
#xrs-borne .xrs-b-exit{position:fixed;right:14px;bottom:14px;z-index:99996;width:52px;height:52px;
  border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(0,0,0,.55);color:#fff;
  font-size:1.2rem;opacity:.35;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:none}
#xrs-borne .xrs-b-exit.tenue{opacity:1;animation:xrsb-tenir 3s linear forwards}
@keyframes xrsb-tenir{
  0%{box-shadow:0 0 0 2px var(--xr-accent,#ffff00);transform:scale(1)}
  100%{box-shadow:0 0 0 14px var(--xr-accent,#ffff00);transform:scale(1.15)}}
/* changer de ploxion (revient au picker) — encore plus discret */
#xrs-borne .xrs-b-conf{position:fixed;right:18px;bottom:78px;z-index:99996;width:44px;height:44px;
  border-radius:50%;border:1px solid rgba(255,255,255,.2);background:rgba(0,0,0,.45);color:#fff;
  font-size:1rem;opacity:.3;cursor:pointer;-webkit-tap-highlight-color:transparent}
#xrs-borne .xrs-b-conf:hover,#xrs-borne .xrs-b-conf:focus{opacity:.9}

/* variante kiosk télécommandé : jOSScreen possède l'écran (z 99990), la borne
   passe AU-DESSUS en transparent et ne garde que bandeau + sortie */
#xrs-borne.xrs-b-kiosk{background:transparent;z-index:99995;pointer-events:none}
#xrs-borne.xrs-b-kiosk .xrs-b-bandeau{background:rgba(0,0,0,.72)}
#xrs-borne.xrs-b-kiosk :is(.xrs-b-exit,.xrs-b-hint){pointer-events:auto}
#xrs-borne.xrs-b-kiosk .xrs-b-conf{display:none}