:root{
  --steam-bg-1:#171a21;
  --steam-bg-2:#1b2838;
  --steam-accent:#66c0f4;
  --steam-accent-2:#4f94bc;

  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.65);
  --muted2:rgba(255,255,255,.45);

  --border:rgba(255,255,255,.12);
  --shadow:0 18px 60px rgba(0,0,0,.55);

  --danger:#ef4444;
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial;
  color:var(--text);
  background:
    linear-gradient(rgba(11,18,32,.72),rgba(11,18,32,.72)),
    url("background.jpg");
  background-size:cover;
  background-position:center;
  background-attachment:fixed;
}

.page{
  min-height:100%;
  display:grid;
  place-items:center;
  padding:28px 16px;
}

.card{
  width:100%;
  max-width:760px;
  min-height:520px;
  display:flex;
  flex-direction:column;

  padding:22px 22px 18px;
  border-radius:18px;
  border:1px solid rgba(102,192,244,.22);
  background:linear-gradient(180deg,rgba(27,40,56,.94),rgba(23,26,33,.94));
  box-shadow:var(--shadow);
}

.header{margin-bottom:18px}

.brand{
  display:flex;
  align-items:center;
  gap:14px;
}

.logo{
  width:44px;
  height:44px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,var(--steam-bg-2),var(--steam-bg-1));
  border:1px solid rgba(102,192,244,.35);
}

.logo img{
  width:26px;
  height:26px;
  object-fit:contain;
}

h1{
  margin:0;
  font-size:26px;
  letter-spacing:.2px;
}

.subtitle{
  margin:6px 0 0;
  color:var(--muted);
  font-size:14px;
  line-height:1.4;
}

.form{
  margin-top:14px;
  flex:1;
  display:flex;
  flex-direction:column;
}

.label{
  display:block;
  font-size:13px;
  color:var(--muted);
  margin:0 0 8px;
}

.inputRow{
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
}

input[type="text"]{
  width:100%;
  padding:12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(0,0,0,.22);
  color:var(--text);
  outline:none;
  font-size:14px;
}

input[type="text"]::placeholder{color:var(--muted2)}

input[type="text"]:focus{
  border-color:rgba(102,192,244,.75);
  box-shadow:0 0 0 4px rgba(102,192,244,.18);
}

.btn{
  min-width:150px;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.16);
  background:linear-gradient(135deg,var(--steam-accent),var(--steam-accent-2));
  color:#0b1220;
  font-weight:700;
  cursor:pointer;
}

.btn:disabled{opacity:.65;cursor:not-allowed}
.btn:hover:not(:disabled){filter:brightness(1.03)}

.helper{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:12px;
  font-size:13px;
  color:var(--muted);
}

.dot{
  width:10px;
  height:10px;
  border-radius:999px;
  background:rgba(255,255,255,.25);
  box-shadow:0 0 0 4px rgba(255,255,255,.07);
}

.dot.ok{background:var(--steam-accent-2);box-shadow:0 0 0 4px rgba(79,148,188,.18)}
.dot.bad{background:var(--danger);box-shadow:0 0 0 4px rgba(239,68,68,.18)}

.loading{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top:14px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(0,0,0,.18);
  color:var(--muted);
}

.spinner{
  width:16px;
  height:16px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.25);
  border-top-color:rgba(255,255,255,.9);
  animation:spin .8s linear infinite;
}

@keyframes spin{to{transform:rotate(360deg)}}

.result{
  margin-top:16px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.22);
  line-height:1.55;
  overflow:hidden;
}

.result.success{border-color:rgba(102,192,244,.28)}
.result.error{border-color:rgba(239,68,68,.35)}
.hidden{display:none}

/* Recommendation card (solid, client-like) */
.rec{
  border-radius:14px;
  border:1px solid rgba(102,192,244,.22);
  background:linear-gradient(180deg,rgba(27,40,56,.98),rgba(23,26,33,.98));
  overflow:hidden;
}

.recTop{
  display:grid;
  grid-template-columns:1fr auto;
  gap:12px;
  align-items:center;
  padding:14px 14px;
  border-bottom:1px solid rgba(255,255,255,.10);
  background:linear-gradient(90deg,rgba(102,192,244,.18),rgba(0,0,0,0));
}


.kicker{
  font-size:13px;          /* légèrement plus grand */
  font-weight:700;
  color:rgba(255,255,255,.80);
  margin-bottom:4px;
}

.headline{
  font-size:18px;
  font-weight:800;
  letter-spacing:.2px;
}

.subline{
  font-size:13px;
  color:rgba(255,255,255,.65);
  margin-top:2px;
}

.mono{
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  font-size:12px;
  padding:2px 6px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.22);
  color:rgba(255,255,255,.86);
}

.pill{
  font-size:12px;
  font-weight:800;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(102,192,244,.22);
  background:rgba(102,192,244,.16);
  color:rgba(255,255,255,.92);
  white-space:nowrap;
}

.recBody{
  display:flex;
  justify-content:center;
  padding:18px;
}


.scoreBlock{
  width: 100%;
  max-width: 520px;        /* largeur confortable */
  margin: 0 auto;          /* centré horizontalement */

  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.22);
  padding:16px 18px;
}


.scoreLabel{
  color:rgba(255,255,255,.65);
  font-size:12px;
}

.scoreValue{
  font-size:28px;
  font-weight:900;
  letter-spacing:.3px;
  margin-top:2px;
}

.bar{
  height:10px;
  border-radius:999px;
  background:rgba(255,255,255,.10);
  overflow:hidden;
  margin-top:8px;
  border:1px solid rgba(255,255,255,.10);
}

.barFill{
  height:100%;
  border-radius:999px;
  background: linear-gradient(
    90deg,
    #facc15 0%,     /* jaune (faible) */
    #f59e0b 20%,    /* orange */
    #22c55e 45%,    /* vert */
    #66c0f4 70%,    /* bleu Steam clair */
    #2a475e 100%    /* bleu Steam foncé */
  );
  transition: width .4s ease;
}




.scoreHint{
  margin-top:8px;
  font-size:12px;
  color:rgba(255,255,255,.55);
}

.metaRow{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:8px 0;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.metaRow:last-child{border-bottom:0}

.metaKey{
  font-size:12px;
  color:rgba(255,255,255,.55);
}

.metaVal{
  font-size:12px;
  color:rgba(255,255,255,.85);
  text-align:right;
}

.metaVal.ok{color:rgba(102,192,244,.95);font-weight:800}

.alertTitle{font-weight:900;margin-bottom:6px}
.alertText{color:rgba(255,255,255,.75);line-height:1.5}

.footer{
  margin-top:18px;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.10);
}

.meta{
  color:var(--muted2);
  font-size:12px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.sep{opacity:.6}

@media (max-width:620px){
  .inputRow{grid-template-columns:1fr}
  .btn{width:100%}
  .recBody{grid-template-columns:1fr}
}

.recTopWithImage {
  display: flex;
  align-items: center;
  gap: 16px;
}

.recImage img {
  width: 96px;
  height: auto;
  border-radius: 8px;
  object-fit: cover;
}

.recTitle {
  flex: 1;
}

.headline {
  color: #7dd3fc;
  text-decoration: none;
}

.headline:hover {
  text-decoration: underline;
}

.result.success {
  display: flex;
  flex-direction: column;
  gap: 16px;
}