/* ============================================================================
   XERS-SOFT — 4 mondes « doux » (RS-1, nuit de build 2026-08-12)
   ----------------------------------------------------------------------------
   Un xer = un MONDE : tokens --xr-* + textures gradient + skin kions/boutons +
   skin fenetres (.jos-win/.plxm-bar) + disposition mobile (body[data-xer]).
   Mecanique unifiee (deleguee par window.jOSXer.apply) :
     - html[data-theme=<id>]  -> tokens + skins + textures
     - html.uitier-mobile body[data-xer=<id>] -> disposition mobile
   Contraintes DURES respectees :
     - polices SYSTEME uniquement (offline/CSP) : aucun @font-face / asset externe
     - textures 100% gradients CSS, overlays en body::after pointer-events:none
     - exclusion :not([class*="plus"]) conservee sur les selecteurs boutons
     - structures gatees html.uitier-mobile (mobile only)
     - jamais de nav retiree sans chemin de sortie visible
   Mondes : kawaii (pastel bonbon), argile (clay), verre (glass), foret (organic).
   ============================================================================ */


/* ##########################################################################
   1) KAWAII 🌸 — pastel bonbon, bulles rondes, micro-rebonds. scheme:light
      palette imposee : bg #fff0f6, accent #ff8fc7
   ########################################################################## */

html[data-theme="kawaii"]{
  --xr-bg:#fff0f6;
  --xr-surface:#ffffff;
  --xr-border:#ffd6e6;
  --xr-accent:#ff8fc7;
  --xr-accent2:#b7ffd8;
  --xr-text:#5a4a55;
  --xr-muted:#a892a0;
  --xr-glow:rgba(255,143,199,.45);
  --xr-glow2:rgba(216,204,255,.45);
  --xr-font:"Nunito",ui-rounded,"Segoe UI Rounded","Hiragino Maru Gothic ProN",system-ui,sans-serif;
  --xr-font-mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --xr-font-ui:"Nunito",ui-rounded,"Segoe UI Rounded",system-ui,sans-serif;
  --xr-radius:22px;
}
/* fond bonbon : degrade multi-stop rose->lavande->menthe */
html[data-theme="kawaii"] body{
  background:
    radial-gradient(120% 80% at 18% -10%, #ffe3f0 0%, transparent 55%),
    radial-gradient(110% 70% at 92% 6%, #e7f6ff 0%, transparent 50%),
    linear-gradient(160deg, #fff0f6 0%, #fbeaff 52%, #eafff4 100%) fixed;
}
/* confettis : points pastel discrets, fixes, non-cliquables */
html[data-theme="kawaii"] body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background:
    radial-gradient(circle at 12% 22%, #ffb7ce 0 3px, transparent 4px),
    radial-gradient(circle at 78% 14%, #b7ffd8 0 3px, transparent 4px),
    radial-gradient(circle at 42% 68%, #d8ccff 0 2.5px, transparent 4px),
    radial-gradient(circle at 88% 74%, #ffd9a8 0 2.5px, transparent 4px),
    radial-gradient(circle at 26% 90%, #ffb7ce 0 2px, transparent 3px);
  background-size:220px 220px,260px 260px,180px 180px,300px 300px,240px 240px;
}
/* boutons-bonbons : degrade pastel, ombre coloree douce, squish au press */
html[data-theme="kawaii"] :is(.cyber-button,button,.btn,.xb-btn):not([class*="plus"]){
  background:linear-gradient(180deg,#ffa6d2,#ff8fc7)!important;
  color:#fff!important;border:0!important;border-radius:999px!important;
  font-weight:800!important;letter-spacing:.2px!important;text-transform:none!important;
  box-shadow:0 6px 0 #f06aad, 0 10px 18px rgba(255,143,199,.4)!important;
  transition:transform .12s cubic-bezier(.34,1.7,.5,1), box-shadow .12s ease!important;
}
html[data-theme="kawaii"] :is(.cyber-button,button,.btn,.xb-btn):not([class*="plus"]):active{
  transform:translateY(4px) scaleY(.92) scaleX(1.03)!important;
  box-shadow:0 2px 0 #f06aad, 0 4px 10px rgba(255,143,199,.35)!important;
}
/* cartes / kions : blanches, coins dodus, ombre coloree */
html[data-theme="kawaii"] :is(.koin,.ploxion,.wk-card,.service-card,.modal-content,.plx-panel,.plx-tile,.app-tile){
  background:var(--xr-surface)!important;border:2px solid var(--xr-border)!important;
  border-radius:24px!important;box-shadow:0 10px 24px rgba(255,143,199,.18)!important;
}
html[data-theme="kawaii"] :is(input,select,textarea){
  background:#fff5f8!important;border:2px solid #ffd6e6!important;border-radius:16px!important;
  color:#5a4a55!important;padding:8px 14px!important;
}
html[data-theme="kawaii"] :is(input,select,textarea):focus{
  border-color:#ff8fc7!important;box-shadow:0 0 0 4px rgba(255,143,199,.25)!important;outline:0!important;
}
/* FENETRES : coins bombes 22px, barre bombee rose */
html[data-theme="kawaii"] :is(.jos-win,.modal-content){
  background:#ffffff!important;border:2px solid #ffd6e6!important;border-radius:24px!important;
  box-shadow:0 18px 44px rgba(255,143,199,.28)!important;overflow:hidden!important;
}
html[data-theme="kawaii"] :is(.jos-win__bar,.plxm-bar){
  background:linear-gradient(180deg,#ffd9ea,#ffc2dd)!important;
  color:#7a4f66!important;border-bottom:2px solid #ffb7ce!important;font-weight:800!important;
}
/* disposition mobile : grosses bulles rondes 3 colonnes, macaron flottant */
html.uitier-mobile body[data-xer="kawaii"] #hm .hm-lgrid{
  grid-template-columns:repeat(3,1fr)!important;gap:18px!important;padding:14px!important;
}
html.uitier-mobile body[data-xer="kawaii"] #hm .hm-lt{
  border-radius:50%!important;aspect-ratio:1!important;
  background:radial-gradient(circle at 40% 32%, #fff, #ffe3f0)!important;
  border:2px solid #ffd6e6!important;box-shadow:0 8px 18px rgba(255,143,199,.22)!important;
  display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;
}
html.uitier-mobile body[data-xer="kawaii"] #hm .hm-ic{font-size:1.8rem!important}
html.uitier-mobile body[data-xer="kawaii"] #hm .hm-nm{font-weight:800!important;color:#7a4f66!important}
html.uitier-mobile body[data-xer="kawaii"] #hm .hm-top{border-radius:0 0 28px 28px!important;background:linear-gradient(180deg,#ffe3f0,transparent)!important}
html.uitier-mobile body[data-xer="kawaii"] #xshell .xs__bar{
  border-radius:999px!important;background:linear-gradient(180deg,#ffb7ce,#ff8fc7)!important;
  border:2px solid #fff!important;box-shadow:0 8px 22px rgba(255,143,199,.5)!important;
}
html.uitier-mobile body[data-xer="kawaii"] #xshell .xs__orb{
  background:radial-gradient(circle at 38% 34%,#ffd9ea,#ff8fc7)!important;border:2px solid #fff!important;
}
html.uitier-mobile body[data-xer="kawaii"] :is(#jnav,.mobile-chill-dock,.desktop-dock){
  border-radius:999px!important;background:#ffffffe6!important;border:2px solid #ffd6e6!important;
  box-shadow:0 8px 22px rgba(255,143,199,.22)!important;
}


/* ##########################################################################
   2) ARGILE 🏺 — claymorphism, pastilles bombees double-ombre, fond creme.
      scheme:light. palette imposee : bg #ece5da, accent #e07a5f
   ########################################################################## */

html[data-theme="argile"]{
  --xr-bg:#ece5da;
  --xr-surface:#fbf8f3;
  --xr-border:#ddd2c4;
  --xr-accent:#e07a5f;
  --xr-accent2:#7cc0ff;
  --xr-text:#3f3a36;
  --xr-muted:#8b8175;
  --xr-glow:rgba(224,122,95,.35);
  --xr-glow2:rgba(179,160,255,.30);
  --xr-font:ui-rounded,"Segoe UI Rounded","Avenir Next",system-ui,sans-serif;
  --xr-font-mono:ui-monospace,Menlo,Consolas,monospace;
  --xr-font-ui:ui-rounded,"Segoe UI Rounded",system-ui,sans-serif;
  --xr-radius:24px;
}
/* fond creme mat, tres legers reliefs de pate */
html[data-theme="argile"] body{
  background:
    radial-gradient(130% 90% at 20% 0%, #f4efe8 0%, transparent 60%),
    radial-gradient(120% 90% at 100% 100%, #e6ddcf 0%, transparent 55%),
    linear-gradient(165deg,#efe9df,#e6ded1) fixed;
}
html[data-theme="argile"] body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.35;
  background:
    radial-gradient(60% 40% at 30% 20%, rgba(255,255,255,.5), transparent 70%),
    radial-gradient(50% 40% at 80% 70%, rgba(0,0,0,.05), transparent 70%);
}
/* le kion-argile : la double ombre (highlight inset haut + ombre externe basse) */
html[data-theme="argile"] :is(.cyber-button,button,.btn,.xb-btn):not([class*="plus"]){
  background:linear-gradient(180deg,#ec8368,#e07a5f)!important;color:#fff8f4!important;
  border:0!important;border-radius:20px!important;font-weight:700!important;text-transform:none!important;
  box-shadow:
    inset 0 3px 4px rgba(255,255,255,.55),
    inset 0 -4px 6px rgba(0,0,0,.16),
    0 10px 20px rgba(224,122,95,.30)!important;
  transition:box-shadow .14s ease, transform .14s ease!important;
}
html[data-theme="argile"] :is(.cyber-button,button,.btn,.xb-btn):not([class*="plus"]):active{
  transform:translateY(2px)!important;
  box-shadow:
    inset 0 4px 8px rgba(0,0,0,.28),
    inset 0 -2px 4px rgba(255,255,255,.30)!important;   /* le doigt marque la pate */
}
html[data-theme="argile"] :is(.koin,.ploxion,.wk-card,.service-card,.modal-content,.plx-panel,.plx-tile,.app-tile){
  background:var(--xr-surface)!important;border:0!important;border-radius:26px!important;
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,.9),
    inset 0 -6px 12px rgba(0,0,0,.06),
    0 14px 30px rgba(120,100,80,.16)!important;
}
html[data-theme="argile"] :is(input,select,textarea){
  background:#efe8dd!important;border:0!important;border-radius:16px!important;color:#3f3a36!important;
  box-shadow:inset 0 3px 6px rgba(0,0,0,.12), inset 0 -2px 3px rgba(255,255,255,.7)!important;
  padding:8px 14px!important;
}
html[data-theme="argile"] :is(input,select,textarea):focus{
  outline:0!important;box-shadow:inset 0 3px 6px rgba(0,0,0,.12), 0 0 0 3px rgba(224,122,95,.30)!important;
}
/* FENETRES : plaques epaisses bombees, bourrelet superieur avec grab creuse */
html[data-theme="argile"] :is(.jos-win,.modal-content){
  background:#fbf8f3!important;border:0!important;border-radius:26px!important;
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,.9),
    0 22px 48px rgba(90,74,58,.24)!important;overflow:hidden!important;
}
html[data-theme="argile"] :is(.jos-win__bar,.plxm-bar){
  background:linear-gradient(180deg,#f3ece0,#e7ddcd)!important;color:#5a5148!important;
  border-bottom:0!important;
  box-shadow:inset 0 3px 4px rgba(255,255,255,.8), inset 0 -3px 6px rgba(0,0,0,.08)!important;
}
html[data-theme="argile"] .plxm-grab{background:rgba(0,0,0,.18)!important;box-shadow:inset 0 1px 2px rgba(0,0,0,.35)!important}
/* disposition mobile : grosses pastilles bombees 3 colonnes, boudin d'argile */
html.uitier-mobile body[data-xer="argile"] #hm .hm-lgrid{
  grid-template-columns:repeat(3,1fr)!important;gap:20px!important;padding:16px!important;
}
html.uitier-mobile body[data-xer="argile"] #hm .hm-lt{
  border-radius:28px!important;background:#fbf8f3!important;border:0!important;
  box-shadow:inset 0 2px 3px rgba(255,255,255,.9), inset 0 -6px 12px rgba(0,0,0,.06), 0 12px 24px rgba(120,100,80,.18)!important;
}
html.uitier-mobile body[data-xer="argile"] #hm .hm-ic{font-size:1.7rem!important}
html.uitier-mobile body[data-xer="argile"] #xshell .xs__bar{
  border-radius:999px!important;background:linear-gradient(180deg,#ec8368,#e07a5f)!important;border:0!important;
  box-shadow:inset 0 3px 4px rgba(255,255,255,.5), inset 0 -4px 6px rgba(0,0,0,.18), 0 12px 24px rgba(224,122,95,.4)!important;
}
html.uitier-mobile body[data-xer="argile"] #xshell .xs__orb{
  background:radial-gradient(circle at 38% 32%,#f0a58f,#e07a5f)!important;
  box-shadow:inset 0 2px 3px rgba(255,255,255,.6), 0 8px 18px rgba(224,122,95,.45)!important;border:0!important;
}
html.uitier-mobile body[data-xer="argile"] :is(#jnav,.mobile-chill-dock,.desktop-dock){
  border-radius:28px!important;background:#f4efe6!important;border:0!important;
  box-shadow:inset 0 2px 3px rgba(255,255,255,.9), 0 12px 26px rgba(120,100,80,.16)!important;
}


/* ##########################################################################
   3) VERRE 🫧 — glassmorphism profond, verre depoli backdrop-filter,
      fond degrade nocturne anime lent (hue-rotate). scheme:dark
      palette imposee : bg #0b1020, accent #7fd0ff
   ########################################################################## */

html[data-theme="verre"]{
  --xr-bg:#0b1020;
  --xr-surface:rgba(255,255,255,.07);
  --xr-border:rgba(255,255,255,.16);
  --xr-accent:#7fd0ff;
  --xr-accent2:#ff9ad5;
  --xr-text:rgba(255,255,255,.92);
  --xr-muted:rgba(255,255,255,.55);
  --xr-glow:rgba(127,208,255,.5);
  --xr-glow2:rgba(255,154,213,.45);
  --xr-font:ui-rounded,"SF Pro Display","Segoe UI",system-ui,sans-serif;
  --xr-font-mono:ui-monospace,"SFMono-Regular",Menlo,monospace;
  --xr-font-ui:ui-rounded,"SF Pro Text",system-ui,sans-serif;
  --xr-radius:18px;
}
/* fond nocturne profond, statique en couleur */
html[data-theme="verre"] body{
  background:radial-gradient(140% 100% at 20% -10%, #1a1440 0%, #0b1020 55%, #05070f 100%) fixed;
}
/* la derive lente : une nappe de couleur en body::after qui hue-rotate 60s */
@keyframes xr-verre-drift{
  0%{filter:hue-rotate(0deg);transform:translate3d(0,0,0) scale(1.15)}
  50%{filter:hue-rotate(38deg);transform:translate3d(2%,-2%,0) scale(1.25)}
  100%{filter:hue-rotate(0deg);transform:translate3d(0,0,0) scale(1.15)}
}
html[data-theme="verre"] body::after{
  content:"";position:fixed;inset:-15%;pointer-events:none;z-index:0;opacity:.55;
  background:
    radial-gradient(38% 34% at 24% 30%, rgba(127,208,255,.55), transparent 70%),
    radial-gradient(40% 36% at 78% 24%, rgba(255,154,213,.5), transparent 70%),
    radial-gradient(46% 42% at 60% 82%, rgba(122,90,255,.5), transparent 72%);
  animation:xr-verre-drift 60s ease-in-out infinite;
  will-change:filter,transform;
}
@media (prefers-reduced-motion:reduce){
  html[data-theme="verre"] body::after{animation:none}
}
/* pilules de verre : bordure lumineuse 1px, depoli */
html[data-theme="verre"] :is(.cyber-button,button,.btn,.xb-btn):not([class*="plus"]){
  background:rgba(255,255,255,.10)!important;color:rgba(255,255,255,.95)!important;
  border:1px solid rgba(255,255,255,.28)!important;border-radius:999px!important;
  -webkit-backdrop-filter:blur(14px)!important;backdrop-filter:blur(14px)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 8px 22px rgba(0,0,0,.35)!important;
  transition:box-shadow .18s ease, background .18s ease!important;
}
html[data-theme="verre"] :is(.cyber-button,button,.btn,.xb-btn):not([class*="plus"]):active{
  background:rgba(127,208,255,.22)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 0 22px rgba(127,208,255,.55)!important;
}
/* cartes / kions : panneaux de verre depoli */
html[data-theme="verre"] :is(.koin,.ploxion,.wk-card,.service-card,.modal-content,.plx-panel,.plx-tile,.app-tile){
  background:rgba(255,255,255,.07)!important;border:1px solid rgba(255,255,255,.16)!important;
  border-radius:20px!important;-webkit-backdrop-filter:blur(20px)!important;backdrop-filter:blur(20px)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 20px 50px rgba(0,0,0,.45)!important;
}
html[data-theme="verre"] :is(input,select,textarea){
  background:rgba(255,255,255,.08)!important;border:1px solid rgba(255,255,255,.2)!important;
  border-radius:14px!important;color:rgba(255,255,255,.92)!important;
  -webkit-backdrop-filter:blur(12px)!important;backdrop-filter:blur(12px)!important;padding:8px 14px!important;
}
html[data-theme="verre"] :is(input,select,textarea):focus{
  outline:0!important;border-color:rgba(127,208,255,.7)!important;box-shadow:0 0 0 3px rgba(127,208,255,.28)!important;
}
/* FENETRES : verre profond blur 20px, bordure blanche 8% */
html[data-theme="verre"] :is(.jos-win,.modal-content){
  background:rgba(20,22,44,.55)!important;border:1px solid rgba(255,255,255,.14)!important;
  border-radius:22px!important;-webkit-backdrop-filter:blur(24px)!important;backdrop-filter:blur(24px)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 30px 70px rgba(0,0,0,.55)!important;overflow:hidden!important;
}
html[data-theme="verre"] :is(.jos-win__bar,.plxm-bar){
  background:rgba(255,255,255,.10)!important;color:rgba(255,255,255,.9)!important;
  border-bottom:1px solid rgba(255,255,255,.14)!important;
  -webkit-backdrop-filter:blur(16px)!important;backdrop-filter:blur(16px)!important;
}
/* disposition mobile : grille de cartes-verre flottantes 3 colonnes */
html.uitier-mobile body[data-xer="verre"] #hm .hm-lgrid{
  grid-template-columns:repeat(3,1fr)!important;gap:16px!important;padding:16px!important;
}
html.uitier-mobile body[data-xer="verre"] #hm .hm-lt{
  border-radius:20px!important;background:rgba(255,255,255,.08)!important;border:1px solid rgba(255,255,255,.16)!important;
  -webkit-backdrop-filter:blur(18px)!important;backdrop-filter:blur(18px)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 14px 34px rgba(0,0,0,.4)!important;
}
html.uitier-mobile body[data-xer="verre"] #xshell .xs__bar{
  border-radius:999px!important;background:rgba(255,255,255,.12)!important;border:1px solid rgba(255,255,255,.3)!important;
  -webkit-backdrop-filter:blur(18px)!important;backdrop-filter:blur(18px)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 10px 30px rgba(0,0,0,.45)!important;
}
html.uitier-mobile body[data-xer="verre"] #xshell .xs__orb{
  background:rgba(127,208,255,.22)!important;border:1px solid rgba(255,255,255,.4)!important;
  -webkit-backdrop-filter:blur(16px)!important;backdrop-filter:blur(16px)!important;
}
html.uitier-mobile body[data-xer="verre"] :is(#jnav,.mobile-chill-dock,.desktop-dock){
  border-radius:22px!important;background:rgba(255,255,255,.09)!important;border:1px solid rgba(255,255,255,.16)!important;
  -webkit-backdrop-filter:blur(20px)!important;backdrop-filter:blur(20px)!important;
}


/* ##########################################################################
   4) FORET 🌿 — nature organique chill-tekk poussee : galets qui respirent,
      sous-bois nocturne aux lucioles. scheme:dark
      palette imposee : bg #0d140f, accent #7fd6a0
   ########################################################################## */

html[data-theme="foret"]{
  --xr-bg:#0d140f;
  --xr-surface:#14251a;
  --xr-border:#26402c;
  --xr-accent:#7fd6a0;
  --xr-accent2:#ffb35c;                 /* lucioles */
  --xr-text:#e6f2e8;
  --xr-muted:#8fae97;
  --xr-glow:rgba(127,214,160,.45);
  --xr-glow2:rgba(255,179,92,.4);
  --xr-font:ui-rounded,"Segoe UI",system-ui,sans-serif;
  --xr-font-mono:ui-monospace,Menlo,monospace;
  --xr-font-ui:ui-rounded,system-ui,sans-serif;
  --xr-radius:40% 60% 55% 45% / 55% 45% 60% 40%;   /* radius organique */
}
/* sous-bois nocturne : degrades radiaux mousse profonds */
html[data-theme="foret"] body{
  background:
    radial-gradient(90% 60% at 18% 0%, #16281b 0%, transparent 55%),
    radial-gradient(80% 70% at 92% 20%, #10241a 0%, transparent 55%),
    radial-gradient(120% 90% at 50% 110%, #0a1810 0%, transparent 60%),
    linear-gradient(180deg,#0d140f,#091009) fixed;
}
/* lucioles : points ambre qui derivent lentement */
@keyframes xr-foret-lucioles{
  0%{transform:translate3d(0,0,0);opacity:.5}
  50%{transform:translate3d(1.5%,-2%,0);opacity:.9}
  100%{transform:translate3d(0,0,0);opacity:.5}
}
html[data-theme="foret"] body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(circle at 22% 30%, rgba(255,179,92,.85) 0 2px, transparent 3px),
    radial-gradient(circle at 68% 22%, rgba(255,201,120,.7) 0 1.5px, transparent 3px),
    radial-gradient(circle at 48% 66%, rgba(127,214,160,.6) 0 1.5px, transparent 3px),
    radial-gradient(circle at 84% 74%, rgba(255,179,92,.7) 0 2px, transparent 3px),
    radial-gradient(circle at 12% 82%, rgba(255,201,120,.6) 0 1.5px, transparent 3px);
  background-size:320px 320px,280px 280px,360px 360px,300px 300px,340px 340px;
  animation:xr-foret-lucioles 14s ease-in-out infinite;
}
@media (prefers-reduced-motion:reduce){
  html[data-theme="foret"] body::after{animation:none}
}
/* respiration lente des surfaces */
@keyframes xr-foret-breathe{
  0%{transform:scale(1)}
  50%{transform:scale(1.012)}
  100%{transform:scale(1)}
}
/* galets bombes, radius irregulier ; press = la forme s'arrondit et pousse */
html[data-theme="foret"] :is(.cyber-button,button,.btn,.xb-btn):not([class*="plus"]){
  background:linear-gradient(180deg,#1d3a27,#16301f)!important;color:#dff3e4!important;
  border:1px solid #2f5138!important;border-radius:40% 60% 55% 45% / 60% 45% 55% 40%!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 8px 20px rgba(0,0,0,.45), 0 0 0 rgba(127,214,160,0)!important;
  transition:border-radius .3s ease, transform .2s ease, box-shadow .25s ease!important;
}
html[data-theme="foret"] :is(.cyber-button,button,.btn,.xb-btn):not([class*="plus"]):active{
  border-radius:50%!important;transform:scale(1.06)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 0 24px rgba(255,179,92,.5)!important;   /* halo luciole */
}
/* cartes / kions = galets qui respirent */
html[data-theme="foret"] :is(.koin,.ploxion,.wk-card,.service-card,.plx-panel,.plx-tile,.app-tile){
  background:var(--xr-surface)!important;border:1px solid var(--xr-border)!important;
  border-radius:42% 58% 52% 48% / 56% 44% 58% 42%!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 16px 36px rgba(0,0,0,.5)!important;
  animation:xr-foret-breathe 8s ease-in-out infinite;
}
html[data-theme="foret"] :is(input,select,textarea){
  background:#0f1f15!important;border:1px solid #2b4a34!important;color:#e6f2e8!important;
  border-radius:24px 20px 26px 18px!important;padding:8px 16px!important;
}
html[data-theme="foret"] :is(input,select,textarea):focus{
  outline:0!important;border-color:#7fd6a0!important;box-shadow:0 0 0 3px rgba(127,214,160,.28)!important;
}
/* FENETRES = feuilles aux coins irreguliers */
html[data-theme="foret"] :is(.jos-win,.modal-content){
  background:#122019!important;border:1px solid #2b4a34!important;
  border-radius:28px 22px 30px 20px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 26px 60px rgba(0,0,0,.6)!important;overflow:hidden!important;
}
html[data-theme="foret"] :is(.jos-win__bar,.plxm-bar){
  background:linear-gradient(180deg,#1a3324,#14281c)!important;color:#cfe9d6!important;
  border-bottom:1px solid #2b4a34!important;
}
/* disposition mobile : clairiere de galets disperses tailles variees */
html.uitier-mobile body[data-xer="foret"] #hm .hm-lgrid{
  grid-template-columns:repeat(3,1fr)!important;gap:18px!important;padding:16px!important;
}
html.uitier-mobile body[data-xer="foret"] #hm .hm-lt{
  background:#14251a!important;border:1px solid #26402c!important;
  border-radius:46% 54% 50% 50% / 54% 46% 56% 44%!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 12px 28px rgba(0,0,0,.5)!important;
  animation:xr-foret-breathe 8s ease-in-out infinite;
}
html.uitier-mobile body[data-xer="foret"] #hm .hm-lt:nth-child(3n+2){border-radius:52% 48% 46% 54% / 48% 56% 44% 56%!important;animation-duration:9.5s!important}
html.uitier-mobile body[data-xer="foret"] #hm .hm-lt:nth-child(3n){border-radius:48% 52% 56% 44% / 52% 48% 50% 50%!important;animation-duration:7s!important}
html.uitier-mobile body[data-xer="foret"] #hm .hm-ic{font-size:1.7rem!important}
/* #xshell = graine qui pulse doucement */
@keyframes xr-foret-seed{0%{transform:scale(1);box-shadow:0 0 0 rgba(127,214,160,.0)}50%{transform:scale(1.05);box-shadow:0 0 22px rgba(127,214,160,.5)}100%{transform:scale(1);box-shadow:0 0 0 rgba(127,214,160,0)}}
html.uitier-mobile body[data-xer="foret"] #xshell .xs__bar{
  border-radius:44% 56% 52% 48% / 56% 44% 54% 46%!important;
  background:linear-gradient(180deg,#1d3a27,#14281c)!important;border:1px solid #2f5138!important;
}
html.uitier-mobile body[data-xer="foret"] #xshell .xs__orb{
  border-radius:50%!important;background:radial-gradient(circle at 38% 34%,#9be3b4,#3f8a5c)!important;
  border:1px solid #2f5138!important;animation:xr-foret-seed 5s ease-in-out infinite;
}
html.uitier-mobile body[data-xer="foret"] :is(#jnav,.mobile-chill-dock,.desktop-dock){
  border-radius:28px 22px 30px 20px!important;background:#101f16!important;border:1px solid #26402c!important;
  box-shadow:0 12px 30px rgba(0,0,0,.5)!important;
}

/* ===== fin xers-soft.css ===== */