/* ═══ LEX DESIGN — base.css : reset, typo, fond ambiant ═══ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{color-scheme:dark light}
body{
  background:var(--bg);color:var(--text);font-family:var(--font);
  font-size:14px;min-height:100dvh;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:none;background:none}
/* pas de zoom automatique au double-tap (le pincement manuel reste possible) */
button,a,input,select,textarea,label{touch-action:manipulation}
a{color:var(--muted);text-decoration:none}
a:hover{color:var(--text)}
hr{border:none;border-top:1px solid var(--glass-border);margin:18px 0}
h1,h2,h3{letter-spacing:-.02em}
h2{font-size:18px;font-weight:800;margin-bottom:14px}
h3{font-size:15px;font-weight:700;margin-bottom:10px}
p{margin-bottom:8px}
.muted{color:var(--muted)}
.hide{display:none!important}

/* ── fond ambiant commun (injecté par lex-glass.js si absent) ──
   dégradés colorés + grille de points : c'est lui qui rend le
   verre et la réfraction visibles. Teinté par --accent-app.     */
.lexbg{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;
  background:
    radial-gradient(48vmax 48vmax at 12% -8%, color-mix(in srgb,var(--accent-app) 30%,transparent), transparent 62%),
    radial-gradient(44vmax 44vmax at 105% 20%, var(--bg-tint2), transparent 60%),
    radial-gradient(50vmax 50vmax at 65% 115%, var(--bg-tint3), transparent 62%),
    var(--bg);
}
.lexbg-grid{position:absolute;inset:0;
  background-image:radial-gradient(var(--bg-grid-dot) 1px, transparent 1.5px);
  background-size:26px 26px;opacity:.5}
/* marque LEX en filigrane (contour teinté par l'accent de l'app) */
.lexbg-word{position:absolute;top:5%;left:32%;line-height:.85;font-weight:900;letter-spacing:-.04em;
  color:transparent;-webkit-text-stroke:1.5px color-mix(in srgb,var(--accent-app) 50%,transparent);
  user-select:none;pointer-events:none;display:flex;flex-direction:column;align-items:flex-end;font-family:var(--font)}
.lexbg-word b{font-size:21vmax;font-weight:900}
.lexbg-word small{font-size:4.2vmax;font-weight:900;letter-spacing:.14em;margin-top:.6vmax;margin-right:.5vmax;
  -webkit-text-stroke:1px color-mix(in srgb,var(--accent-app) 45%,transparent)}
@media (max-width:640px){.lexbg-word{left:8%;top:3%}}
.lexbg-blob{position:absolute;border-radius:50%;filter:blur(16px);opacity:.4;
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent-app) 80%,#fff),color-mix(in srgb,var(--accent-app) 50%,#324));
  animation:lexbg-drift 26s ease-in-out infinite alternate}
@keyframes lexbg-drift{from{transform:translate(0,0) scale(1)}to{transform:translate(5vw,4vh) scale(1.1)}}
@media (prefers-reduced-motion: reduce){.lexbg-blob{animation:none}}

/* scrollbar discrète */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--glass-border);border-radius:8px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-track{background:transparent}

/* ══ Fonds d'écran (COMMUNS à toutes les apps Lex) ══
   10 STYLES de fond — la couleur reste TOUJOURS celle de l'app
   (var(--accent-app)) : seul le motif/design change. Le défaut = LEX actuel.
   html[data-lexbg="…"] est posé par lex-glass.js au démarrage depuis
   localStorage('lex-bg') ; choix mémorisé PAR COMPTE côté app. */

/* Halo — grand halo central, épuré */
html[data-lexbg="halo"] .lexbg{background:
  radial-gradient(72vmax 72vmax at 50% 28%, color-mix(in srgb,var(--accent-app) 26%,transparent), transparent 65%),
  radial-gradient(52vmax 52vmax at 50% 115%, color-mix(in srgb,var(--accent-app) 14%,transparent), transparent 60%),
  var(--bg)}

/* Vagues — bandes diagonales douces */
html[data-lexbg="vagues"] .lexbg{background:
  repeating-linear-gradient(115deg,
    color-mix(in srgb,var(--accent-app) 9%,transparent) 0 30px,
    transparent 30px 78px),
  radial-gradient(50vmax 50vmax at 80% -10%, color-mix(in srgb,var(--accent-app) 22%,transparent), transparent 62%),
  var(--bg)}

/* Maille — quadrillage fin */
html[data-lexbg="maille"] .lexbg{background-image:
  linear-gradient(color-mix(in srgb,var(--accent-app) 13%,transparent) 1px, transparent 1px),
  linear-gradient(90deg, color-mix(in srgb,var(--accent-app) 13%,transparent) 1px, transparent 1px),
  radial-gradient(48vmax 48vmax at 12% -8%, color-mix(in srgb,var(--accent-app) 20%,transparent), transparent 62%);
  background-size:34px 34px, 34px 34px, auto;
  background-color:var(--bg)}

/* Bulles — halos ronds dispersés */
html[data-lexbg="bulles"] .lexbg{background:
  radial-gradient(20vmax 20vmax at 15% 18%, color-mix(in srgb,var(--accent-app) 24%,transparent), transparent 70%),
  radial-gradient(28vmax 28vmax at 82% 12%, color-mix(in srgb,var(--accent-app) 16%,transparent), transparent 70%),
  radial-gradient(24vmax 24vmax at 72% 78%, color-mix(in srgb,var(--accent-app) 20%,transparent), transparent 70%),
  radial-gradient(15vmax 15vmax at 22% 82%, color-mix(in srgb,var(--accent-app) 14%,transparent), transparent 70%),
  var(--bg)}

/* Aube — dégradé vertical depuis le haut */
html[data-lexbg="aube"] .lexbg{background:
  linear-gradient(180deg, color-mix(in srgb,var(--accent-app) 30%,transparent), transparent 46%),
  radial-gradient(60vmax 30vmax at 50% 112%, color-mix(in srgb,var(--accent-app) 16%,transparent), transparent 60%),
  var(--bg)}

/* Néon — double halo intense, coins opposés */
html[data-lexbg="neon"] .lexbg{background:
  radial-gradient(42vmax 42vmax at 6% -4%, color-mix(in srgb,var(--accent-app) 40%,transparent), transparent 58%),
  radial-gradient(42vmax 42vmax at 102% 104%, color-mix(in srgb,var(--accent-app) 32%,transparent), transparent 58%),
  var(--bg)}

/* Papier — minimal, quasi uni */
html[data-lexbg="papier"] .lexbg{background:
  radial-gradient(50vmax 26vmax at 50% -14%, color-mix(in srgb,var(--accent-app) 10%,transparent), transparent 60%),
  var(--bg)}
html[data-lexbg="papier"] .lexbg-word{display:none}

/* Orbite — anneaux concentriques */
html[data-lexbg="orbite"] .lexbg{background:
  repeating-radial-gradient(circle at 72% 26%,
    color-mix(in srgb,var(--accent-app) 12%,transparent) 0 2px,
    transparent 2px 52px),
  radial-gradient(46vmax 46vmax at 72% 26%, color-mix(in srgb,var(--accent-app) 20%,transparent), transparent 64%),
  var(--bg)}

/* Prisme — éventail conique doux */
html[data-lexbg="prisme"] .lexbg{background:
  conic-gradient(from 210deg at 74% 18%,
    color-mix(in srgb,var(--accent-app) 24%,transparent),
    transparent 90deg,
    color-mix(in srgb,var(--accent-app) 12%,transparent) 160deg,
    transparent 250deg,
    color-mix(in srgb,var(--accent-app) 18%,transparent)),
  var(--bg)}

/* motifs épurés : sans la grille de points du fond par défaut */
html[data-lexbg="halo"] .lexbg-grid,
html[data-lexbg="vagues"] .lexbg-grid,
html[data-lexbg="maille"] .lexbg-grid,
html[data-lexbg="aube"] .lexbg-grid,
html[data-lexbg="papier"] .lexbg-grid,
html[data-lexbg="orbite"] .lexbg-grid,
html[data-lexbg="prisme"] .lexbg-grid{display:none}