/* KLAW Hub — couleurs du site KLAW, matière « Liquid Glass ». */
:root {
  --sol: #0d0a0b;          /* fond : noir chaud, teinté vers le rouge */
  --texte: #f4eeee;
  --gris: #a69a9b;
  --gris-2: #786c6d;
  --rouge: #e30613;        /* rouge du logo */
  --rouge-vif: #ff2b38;
  --ok: #2ecc71;
  --ko: #ff5a5f;
  --or: #f1c40f;

  --f-titre: "Chakra Petch", "Bahnschrift", "Arial Narrow", sans-serif;
  --f-texte: "Barlow", "Segoe UI", Arial, sans-serif;
  --f-chiffre: "JetBrains Mono", Consolas, monospace;

  /* Verre */
  /* Rayon de flou modéré : le coût du backdrop-filter croît avec le rayon */
  --verre-flou: blur(20px) saturate(170%);
  --verre-fond: linear-gradient(150deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,.045) 42%, rgba(255,255,255,.07) 100%);
  --verre-fond-fort: linear-gradient(150deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.07) 45%, rgba(255,255,255,.1) 100%);
  --verre-ombre:
    inset 0 1px 0 rgba(255,255,255,.38),
    inset 0 -1px 0 rgba(255,255,255,.05),
    inset 0 0 22px rgba(255,255,255,.035),
    0 24px 60px -12px rgba(0,0,0,.6),
    0 2px 8px rgba(0,0,0,.25);
  --rayon: 28px;
  --rayon-m: 18px;
  --rayon-s: 12px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { min-height: 100%; }
body {
  margin: 0; background: var(--sol); color: var(--texte);
  font: 500 16px/1.5 var(--f-texte);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3 { font-family: var(--f-titre); text-transform: uppercase; letter-spacing: .02em; line-height: 1.05; margin: 0; }
p { margin: 0; }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--rouge-vif); outline-offset: 3px; }
::selection { background: rgba(227,6,19,.55); color: #fff; }
.etiquette { font: 600 11px/1 var(--f-titre); letter-spacing: .2em; text-transform: uppercase; color: var(--rouge-vif); }
.chiffre { font-family: var(--f-chiffre); font-variant-numeric: tabular-nums; }
.muet { color: var(--gris); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Fond vivant : ce que le verre réfracte ---------- */
.fond { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: var(--sol); }
.fond::before { /* hachures diagonales de l'en-tête KLAW */
  content: ""; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(120deg, transparent 0 140px, rgba(255,255,255,.028) 140px 142px),
    radial-gradient(120% 80% at 0% 0%, rgba(61,6,9,.9), transparent 60%);
}
.fond::after { /* grain très léger */
  content: ""; position: absolute; inset: 0; opacity: .05; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Les dégradés radiaux sont déjà doux : pas de filter: blur (très coûteux sur des éléments de 46vmax).
   Les bulles ne bougent que sur la page de connexion (body.anime) : un fond animé derrière du verre
   oblige le navigateur à recalculer chaque backdrop-filter à chaque image. */
.bulle { position: absolute; border-radius: 50%; opacity: .75; animation-play-state: paused !important; }
body.anime .bulle { animation-play-state: running !important; will-change: transform; }
.bulle.b1 { width: 46vmax; height: 46vmax; left: -10vmax; top: -12vmax; background: radial-gradient(circle closest-side, rgba(227,6,19,.85), rgba(227,6,19,.45) 30%, rgba(227,6,19,.17) 60%, rgba(227,6,19,.04) 82%, rgba(227,6,19,0)); animation: derive1 26s ease-in-out infinite alternate; }
.bulle.b2 { width: 38vmax; height: 38vmax; right: -12vmax; bottom: -14vmax; background: radial-gradient(circle closest-side, rgba(255,43,56,.8), rgba(200,20,30,.4) 30%, rgba(120,4,12,.15) 60%, rgba(120,4,12,.04) 82%, rgba(120,4,12,0)); opacity: .5; animation: derive2 32s ease-in-out infinite alternate; }
.bulle.b3 { width: 30vmax; height: 30vmax; left: 40%; top: 45%; background: radial-gradient(circle closest-side, rgba(90,10,16,.9), rgba(90,10,16,.45) 35%, rgba(90,10,16,.15) 65%, rgba(90,10,16,0)); opacity: .9; animation: derive3 22s ease-in-out infinite alternate; }
.bulle.b4 { width: 18vmax; height: 18vmax; right: 18%; top: 8%; background: radial-gradient(circle closest-side, rgba(255,214,214,.22), rgba(255,214,214,.1) 35%, rgba(255,214,214,.03) 70%, rgba(255,214,214,0)); opacity: .6; animation: derive2 18s ease-in-out infinite alternate-reverse; }
@keyframes derive1 { to { transform: translate(18vw, 22vh) scale(1.15); } }
@keyframes derive2 { to { transform: translate(-22vw, -18vh) scale(.9); } }
@keyframes derive3 { to { transform: translate(-30vw, -25vh) scale(1.25); } }
.embleme-fond { position: absolute; right: -6vmax; bottom: -8vmax; width: 52vmax; opacity: .06; transform: rotate(-8deg); }

/* ---------- Matière verre ---------- */
.verre {
  position: relative; isolation: isolate;
  background: var(--verre-fond);
  -webkit-backdrop-filter: var(--verre-flou); backdrop-filter: var(--verre-flou);
  border-radius: var(--rayon);
  box-shadow: var(--verre-ombre);
}
/* Liseré spéculaire : plus clair en haut à gauche, reflet rouge en bas à droite */
.verre::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 2;
  background: linear-gradient(140deg, rgba(255,255,255,.62), rgba(255,255,255,.12) 28%, rgba(255,255,255,0) 55%, rgba(255,80,92,.4) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
/* Reflet qui suit le pointeur (--mx / --my posés en JS) */
.verre.reflet::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background: radial-gradient(420px circle at var(--mx, 30%) var(--my, -20%), rgba(255,255,255,.11), transparent 45%);
  opacity: var(--reflet, 0); transition: opacity .3s;
}
.verre.reflet:hover { --reflet: 1; }

/* ---------- Boutons ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 44px; padding: 0 20px; border: 0; border-radius: 999px; cursor: pointer; text-decoration: none; white-space: nowrap;
  font: 700 13px/1 var(--f-titre); letter-spacing: .1em; text-transform: uppercase;
  color: var(--texte);
  /* pas de backdrop-filter propre : les boutons sont posés sur du verre déjà flouté */
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.05));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 0 0 1px rgba(255,255,255,.12), 0 6px 18px rgba(0,0,0,.3);
  transition: transform .18s cubic-bezier(.3,1.6,.5,1), background .2s, box-shadow .2s;
}
.btn:hover { background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.08)); }
.btn:active { transform: scale(.96); }
.btn svg { width: 17px; height: 17px; flex-shrink: 0; }
.btn-rouge {
  color: #fff;
  background: linear-gradient(180deg, rgba(255,70,80,.95) 0%, rgba(227,6,19,.92) 55%, rgba(180,4,14,.95) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 6px rgba(90,0,6,.45), inset 0 0 0 1px rgba(255,140,146,.35), 0 10px 26px -6px rgba(227,6,19,.7);
}
.btn-rouge:hover { background: linear-gradient(180deg, rgba(255,95,104,.98) 0%, rgba(255,43,56,.95) 55%, rgba(200,6,18,.95) 100%); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn-icone { width: 38px; min-height: 38px; height: 38px; padding: 0; }
.btn-icone svg { width: 17px; height: 17px; }
.btn-plat { background: transparent; box-shadow: none; }
.btn-plat:hover { background: rgba(255,255,255,.1); }

/* ---------- Champs ---------- */
.champ { display: grid; gap: 7px; }
.champ > span { font: 600 11px/1 var(--f-titre); letter-spacing: .16em; text-transform: uppercase; color: var(--gris); }
.saisie {
  width: 100%; min-height: 48px; padding: 0 16px; border: 0; border-radius: 14px; outline: none;
  background: rgba(0,0,0,.28);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.08), 0 1px 0 rgba(255,255,255,.08);
  transition: box-shadow .2s, background .2s;
}
textarea.saisie { padding: 13px 16px; min-height: 84px; resize: vertical; }
.saisie::placeholder { color: var(--gris-2); }
.saisie:focus { background: rgba(0,0,0,.36); box-shadow: inset 0 1px 3px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,43,56,.7), 0 0 0 4px rgba(227,6,19,.18); }

/* ---------- Pastilles d'état ---------- */
.point { width: 9px; height: 9px; border-radius: 50%; background: var(--gris-2); flex-shrink: 0; box-shadow: 0 0 0 3px rgba(255,255,255,.06); }
.point.ok { background: var(--ok); box-shadow: 0 0 0 3px rgba(46,204,113,.18), 0 0 12px rgba(46,204,113,.7); }
.point.ko { background: var(--ko); box-shadow: 0 0 0 3px rgba(255,90,95,.18), 0 0 12px rgba(255,90,95,.6); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .45; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}