/* C2-596 — Watson sur les pages de compte : sa taille et sa place selon la largeur (watson-place.js, mêmes valeurs).
   Valeurs de la maquette v0.6 et v0.7 : grand à droite de la carte à partir de 1000 px (280 px à 1280 px), puis, sous 1000 px,
   réduit (64 px, 56 px sur une fenêtre de 360 px ou de 640 px de haut) en bas à droite de la fenêtre visible, à 16 px des bords
   et des zones sûres. Sous 1000 px, la page défile au-dessus d'une bande réservée à Watson (--wat-band) : rien ne passe sous lui.
   --wat-size et --wat-band viennent des @media d'ici (identiques à ce que calcule watson-place.js, testé : la mise en page est juste
   dès le redimensionnement) ; watson-place.js pose --wat-lift (clavier) et data-watson-place. Fichier servi sans session, comme connexion.css (app/accounts,
   PUBLIC_ASSETS) : aucune valeur de couleur en dur hors des variables de connexion.css, sauf les trois teintes du galet (brun du
   contour, ambre de la lueur). */
:root{--wat-size:280px;--wat-band:0px;--wat-lift:0px;--wat-edge:16px;--wat-safe-right:env(safe-area-inset-right,0px);--wat-safe-bottom:env(safe-area-inset-bottom,0px)}
@media (min-width:1000px){:root{--wat-size:clamp(96px,calc(25vw - 32px),280px)}}
.cx-decor{position:relative}
.cx-watson-slot{position:relative;flex:1 1 20rem;align-self:stretch;display:flex;align-items:center;justify-content:center;min-width:0}
/* Grand : l'ancre reste à l'écran quand la page défile (la maquette la laisse au milieu de la hauteur visible). */
.cx-watson-anchor{position:sticky;top:max(6rem,calc(50dvh - var(--wat-size) / 2));flex:none;width:var(--wat-size);height:var(--wat-size)}
/* L'image fixe de la face : visible tout de suite, remplacée par le cube 3D dès qu'il a dessiné sa première image ; elle reste
   si WebGL manque ou si le moteur ne se charge pas. */
.cx-watson-image{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;transition:opacity .3s ease}
.cx-watson-slot[data-live=true] .cx-watson-image{opacity:0}
/* Le bouton « Watson : montrer où saisir ». Sans 3D, il couvre l'emplacement ; avec la 3D, le moteur le place sur le cube
   (position fixe, transformation à chaque image) et seule sa zone utile, .cx-watson-hit, reçoit le pointeur. */
.cx-watson{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;background:transparent;color:inherit;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.cx-watson.webgl-ready{position:fixed;inset:auto;left:0;top:0;z-index:7;pointer-events:none}
.cx-watson-hit{position:absolute;left:50%;top:50%;width:max(44px,calc(var(--wat-size) * .8));height:max(44px,calc(var(--wat-size) * .8));transform:translate(-50%,-50%);border-radius:1.25rem;pointer-events:auto}
.cx-watson:focus{outline:none}
.cx-watson:focus-visible .cx-watson-hit{outline:2px solid var(--cx-sage);outline-offset:3px}
.cx-watson-canvas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:6}
.cx-watson-canvas[hidden]{display:none}

/* Les galets : posés à côté d'une saisie ou du bouton principal, sur le décor, hors de la saisie (watson-guide.js). Contour brun
   de 1 px pour que le galet clair se distingue du papier (3:1 au moins, WCAG 1.4.11), lueur ambre comme la maquette. */
.cx-guides{position:absolute;inset:0;z-index:4;overflow:hidden;pointer-events:none}
.cx-galet{position:absolute;left:0;top:0;display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding:0;border:0;border-radius:.75rem;background:transparent;cursor:pointer;pointer-events:auto;-webkit-tap-highlight-color:transparent}
.cx-galet:hover{background:var(--cx-status-paper)}
.cx-galet:focus-visible{outline:2px solid var(--cx-sage);outline-offset:2px}
.cx-galet img{display:block;height:auto;pointer-events:none;filter:drop-shadow(1px 0 0 #6b533a) drop-shadow(-1px 0 0 #6b533a) drop-shadow(0 1px 0 #6b533a) drop-shadow(0 -1px 0 #6b533a) drop-shadow(0 0 8px #ffd596cc)}
.cx-galet[data-side=gauche] img{width:15px}
.cx-galet[data-side=droit] img{width:26px}
.cx-galet:disabled{pointer-events:none}

/* Réduit : sous 1000 px, en bas à droite, dans la bande que la page lui réserve. */
.cx-watson-canvas{transition:opacity .25s ease}
@media (max-width:999.98px){
  :root{--wat-size:64px;--wat-band:96px}
  html{height:100%;overflow:hidden;background-color:var(--cx-paper);background-image:var(--cx-decor-image);background-size:cover;background-position:center;background-attachment:fixed}
  /* La page défile dans sa propre zone, qui s'arrête au-dessus de la bande de Watson (et du clavier, quand il cache le bas de la fenêtre). */
  body.cx{height:calc(100vh - var(--wat-band) - var(--wat-lift) - var(--wat-safe-bottom));height:calc(100dvh - var(--wat-band) - var(--wat-lift) - var(--wat-safe-bottom));min-height:0;overflow-y:auto;overscroll-behavior:contain;background:transparent}
  .cx-decor{min-height:100%;background:none}
  .cx-main{padding-bottom:1.5rem}
  .cx-watson-slot{position:fixed;right:calc(var(--wat-edge) + var(--wat-safe-right));bottom:calc(var(--wat-edge) + var(--wat-safe-bottom) + var(--wat-lift));z-index:5;flex:none;display:block;width:var(--wat-size);height:var(--wat-size)}
  .cx-watson-anchor{position:relative;top:auto}
  .cx-galet[data-side=gauche] img{width:12px}
  .cx-galet[data-side=droit] img{width:21px}
}
@media (max-width:640px){
  html{background-color:var(--cx-phone-paper);background-image:none}
}
@media (max-width:999.98px) and (max-height:640px),(max-width:360px){
  :root{--wat-size:56px;--wat-band:88px}
}
/* La fenêtre visible est trop basse (clavier) : Watson s'efface et sa bande est rendue à la page. */
:root[data-watson-place~=low]{--wat-band:0px}
/* Clavier ouvert : Watson s'efface quand il couvrirait le champ actif ou le bouton principal, ou que la fenêtre visible est trop
   basse ; il ne se laisse ni voir, ni cliquer, ni atteindre au clavier tant que le focus reste dans le champ. */
:root[data-watson-place~=away] .cx-watson-slot,:root[data-watson-place~=away] .cx-watson-canvas{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s ease,visibility 0s .25s}
:root[data-watson-place~=away] .cx-watson{pointer-events:none}
:root[data-watson-place~=away] .cx-watson-hit{pointer-events:none}
:root[data-cube-motion=off] :is(.cx-watson-slot,.cx-watson-canvas,.cx-watson-image){transition:none}
@media (prefers-reduced-motion:reduce){.cx-watson-slot,.cx-watson-canvas,.cx-watson-image{transition:none !important}}
@media (forced-colors:active){
  .cx-watson-canvas{display:none}
  .cx-watson-slot[data-live=true] .cx-watson-image{opacity:1}
  .cx-galet img{filter:none;forced-color-adjust:none}
  .cx-watson:focus-visible .cx-watson-hit,.cx-galet:focus-visible{outline-color:Highlight}
}