/* ==========================================================================
   Thème Charisma — page d'accueil (welcome) Keycloak
   ========================================================================== */
:root {
  --ch-navy-deep: #060E2E;
  --ch-navy:      #0B1A4A;
  --ch-royal:     #2456C8;
  --ch-royal-dk:  #1B3E96;
  --ch-cyan:      #4FC3E8;
  --ch-teal:      #17A8A0;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: #eaf1ff;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 18px;
}

.ch-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(1100px 520px at 50% -8%, #16367a 0%, rgba(22,54,122,0) 60%),
    linear-gradient(160deg, var(--ch-navy-deep) 0%, var(--ch-navy) 42%, #0f3b5c 74%, var(--ch-teal) 145%);
}
/* halo lumineux discret derrière la carte */
.ch-bg::after {
  content: "";
  position: absolute;
  top: 8%;
  left: 50%;
  width: 460px; height: 460px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(79,195,232,.18) 0%, rgba(79,195,232,0) 70%);
}

.ch-wrap {
  width: 100%;
  max-width: 560px;
  text-align: center;
}

/* ---------- En-tête ---------- */
.ch-head { margin-bottom: 26px; }
.ch-logo {
  width: 130px; height: 130px;
  filter: drop-shadow(0 12px 30px rgba(0,0,0,.5));
}
.ch-title {
  margin: 14px 0 2px;
  font-size: 40px;
  font-weight: 800;
  letter-spacing: .01em;
  background: linear-gradient(90deg, #ffffff 0%, #bfe0f5 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: #fff;
}
.ch-subtitle {
  margin: 0;
  color: #aebfe0;
  font-size: 15px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
}

/* ---------- Carte ---------- */
.ch-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  padding: 30px 30px 26px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 24px 60px rgba(3, 10, 35, .5);
}
.ch-lead {
  margin: 0 0 22px;
  color: #dbe6ff;
  font-size: 16px;
  line-height: 1.6;
}

/* ---------- Boutons ---------- */
.ch-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.ch-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 22px;
  border-radius: 11px;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  transition: transform .08s ease, box-shadow .15s, filter .15s, background .15s;
}
.ch-btn-primary {
  color: #fff;
  background: linear-gradient(135deg, var(--ch-royal) 0%, var(--ch-royal-dk) 100%);
  box-shadow: 0 10px 24px rgba(27, 62, 150, .45);
}
.ch-btn-primary:hover { filter: brightness(1.08); box-shadow: 0 12px 30px rgba(27,62,150,.55); }
.ch-btn-primary:active { transform: translateY(1px); }
.ch-btn-ghost {
  color: #d7e6ff;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.22);
}
.ch-btn-ghost:hover { background: rgba(255,255,255,.12); }
.ch-btn-ic { font-size: 16px; line-height: 1; }

.ch-note { margin: 16px 0 0; color: #aebfe0; font-size: 13px; }

/* ---------- Atouts ---------- */
.ch-features {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  justify-content: center;
  color: #b9cbef;
  font-size: 13.5px;
}
.ch-features li { display: inline-flex; align-items: center; gap: 8px; }
.ch-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ch-cyan);
  box-shadow: 0 0 10px rgba(79,195,232,.8);
}

/* ---------- Pied ---------- */
.ch-foot {
  margin-top: 28px;
  color: rgba(174, 191, 224, .6);
  font-size: 12.5px;
}

@media (max-width: 480px) {
  .ch-title { font-size: 32px; }
  .ch-logo { width: 104px; height: 104px; }
  .ch-card { padding: 24px 18px; }
}