/* simplisselo.css - site2wouf.fr 2026 - v2 */

/* ── Variables ───────────────────────────────────────────── */
#simplisselo_app {
  --s-blue:        #1a6fa8;
  --s-blue-dark:   #134e78;
  --s-blue-light:  #e8f3fb;
  --s-border:      #b0c8dc;
  --s-text:        #1a2733;
  --s-label:       #2c4257;
  --s-muted:       #5a7287;
  --s-bg:          #f4f7fa;
  --s-card:        #ffffff;
  --s-green:       #1a8a4a;
  --s-red:         #c0392b;
  --s-radius:      10px;
  --s-gap:         1.4rem;
}

/* ── Conteneur ───────────────────────────────────────────── */
#simplisselo_app {
  font-family: 'Segoe UI', system-ui, sans-serif;
  max-width: 860px;
  margin: 2rem auto;
  padding: 0 1.5rem;
  color: var(--s-text);
}

#simplisselo_app h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--s-blue-dark);
  margin-bottom: 1.5rem;
  letter-spacing: -.01em;
}

/* ── Layout 2 colonnes ───────────────────────────────────── */
.simplisselo-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 1.8rem;
  align-items: start;
}

/* ── Card générique ──────────────────────────────────────── */
.simplisselo-card {
  background: var(--s-card);
  border-radius: var(--s-radius);
  border: 1.5px solid var(--s-border);
  box-shadow: 0 2px 12px rgba(0,0,0,.07);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: var(--s-gap);
}

/* ── Groupes de champs ───────────────────────────────────── */
.simplisselo-group {
  display: flex;
  flex-direction: column;
  gap: .45rem;
}

.simplisselo-group label {
  font-size: .88rem;
  font-weight: 700;
  color: var(--s-label);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.simplisselo-group input,
.simplisselo-group select {
  padding: .75rem 1rem;
  border: 2px solid var(--s-border);
  border-radius: var(--s-radius);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--s-text);
  background: var(--s-bg);
  transition: border-color .18s, box-shadow .18s, background .18s;
  width: 100%;
  box-sizing: border-box;
}

.simplisselo-group input:focus,
.simplisselo-group select:focus {
  outline: none;
  border-color: var(--s-blue);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(26,111,168,.14);
}

/* Aide K */
#simplisselo-khelp {
  font-size: .82rem;
  color: var(--s-muted);
  font-style: italic;
  min-height: 1.1em;
  padding-left: .2rem;
}

/* ── Séparateur ──────────────────────────────────────────── */
.simplisselo-divider {
  border: none;
  border-top: 2px solid var(--s-bg);
  margin: .2rem 0;
}

/* ── Bouton ──────────────────────────────────────────────── */
#simplisselo-btn {
  background: var(--s-blue);
  color: #fff;
  border: none;
  border-radius: var(--s-radius);
  padding: .9rem 1.2rem;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .03em;
  cursor: pointer;
  transition: background .18s, transform .1s, box-shadow .18s;
  width: 100%;
  box-shadow: 0 3px 10px rgba(26,111,168,.25);
}

#simplisselo-btn:hover {
  background: var(--s-blue-dark);
  box-shadow: 0 4px 16px rgba(26,111,168,.35);
}

#simplisselo-btn:active {
  transform: scale(.98);
}

/* ── Colonne résultats ───────────────────────────────────── */
.simplisselo-results-col {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  position: sticky;
  top: 1.5rem;
}

.simplisselo-result-box {
  background: var(--s-blue-light);
  border: 2px solid var(--s-border);
  border-radius: var(--s-radius);
  padding: 1.6rem 1.4rem;
  text-align: center;
  transition: border-color .25s, background .25s;
}

.simplisselo-result-box.has-value {
  border-color: var(--s-blue);
  background: #dceef9;
}

.simplisselo-result-box .reslabel {
  font-size: .82rem;
  font-weight: 700;
  color: var(--s-blue-dark);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: .6rem;
}

.simplisselo-result-box .resvalue {
  font-size: 2.6rem;
  font-weight: 800;
  color: var(--s-text);
  line-height: 1;
  letter-spacing: -.02em;
}

.simplisselo-result-box .resvalue.placeholder {
  color: #b0bec5;
  font-weight: 400;
  font-size: 2rem;
}

/* Delta ELO */
.simplisselo-delta {
  display: block;
  font-size: 1.05rem;
  font-weight: 700;
  margin-top: .5rem;
}
.simplisselo-delta.positif { color: var(--s-green); }
.simplisselo-delta.negatif { color: var(--s-red); }
.simplisselo-delta.neutre  { color: var(--s-muted); }

/* ── Erreur ──────────────────────────────────────────────── */
#simplisselo-error {
  background: #fdecea;
  border: 1.5px solid #f5c6cb;
  color: var(--s-red);
  border-radius: var(--s-radius);
  padding: .75rem 1rem;
  font-size: .92rem;
  font-weight: 500;
}

#simplisselo-error.hidden { display: none; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 640px) {
  .simplisselo-layout {
    grid-template-columns: 1fr;
  }

  .simplisselo-results-col {
    position: static;
    flex-direction: row;
  }

  .simplisselo-result-box {
    flex: 1;
  }

  .simplisselo-card {
    padding: 1.4rem;
  }
}

@media (max-width: 420px) {
  .simplisselo-results-col {
    flex-direction: column;
  }
}