:root {
  --color-text-primary: #2c3e50;   /* texte très foncé */
  --color-text-secondary: #7f8c8d; /* sous-titres / labels secondaires */
  --color-border: #555;            /* bordures des inputs */
  --color-background: #fdfdfd;     /* fond principal */
  --color-background-card: #ffffff;/* fond des blocs résultats */
  --color-shadow-light: #0000001a; /* ombres légères */
  --color-shadow-card: #0000000d;  /* ombre des cartes résultats */
  --color-focus: #2c3e50;          /* bordure au focus */
  --color-focus-shadow: #2c3e5050; /* glow au focus */
  --color-warning: #c0392b;        /* couleur des avertissements */
  --color-hr: #7f8c8d;             /* barre de séparation */
  --border-radius: 0.25rem;
  --border-radius-card: 0.8rem;
  --padding-main: 2rem;
  --padding-input: 0.4rem 0.6rem;
  --padding-card: 1rem 1.5rem;
  --gap-form-row: 1rem;
}

body {
  font-family: system-ui, sans-serif;
  background-color: var(--color-background);
  padding: var(--padding-main);
  color: var(--color-text-primary);
}

main {
  max-width: 700px;
  margin: auto;
  background-color: var(--color-background);
  border-radius: 1rem;
  box-shadow: 0 0 20px var(--color-shadow-light);
  padding: var(--padding-main);
}

h1 {
  text-align: center;
  color: var(--color-text-primary);
}

p {
  text-align: center;
  color: var(--color-text-secondary);
}

.form-row {
  display: flex;
  gap: var(--gap-form-row);
  margin-top: 1rem;
}

label {
  flex: 1;
  display: flex;
  flex-direction: column;
}

input, select {
  width: 100%;
  padding: var(--padding-input);
  border-radius: var(--border-radius);
  border: 1px solid var(--color-border);
  box-sizing: border-box;
  transition: border-color 0.2s, box-shadow 0.2s;
  color: var(--color-text-primary);
}

select {
  background-color: var(--color-background-card);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url('data:image/svg+xml;utf8,<svg fill=%222c3e50%22 height=%2220%22 viewBox=%220 0 24 24%22 width=%2220%22 xmlns=%22http://www.w3.org/2000/svg%22><path d=%22M7 10l5 5 5-5z%22/></svg>');
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
  background-size: 1rem;
}

input:focus,
select:focus {
  outline: none;
  border-color: var(--color-focus);
  box-shadow: 0 0 3px var(--color-focus-shadow);
}

.warning {
  color: var(--color-warning);
  font-weight: bold;
  margin-top: 1rem;
}

hr {
  border-top: 1px solid var(--color-hr);
  margin: 1.5rem 0;
}

#results {
  background-color: var(--color-background-card);
  border-radius: var(--border-radius-card);
  padding: var(--padding-card);
  box-shadow: 0 0 8px var(--color-shadow-card);
  margin-top: 1.5rem;
}

#results h2 {
  color: var(--color-text-primary);
}

#results li b {
  font-weight: bold;
}

#results ul {
  list-style: none;
  padding: 0;
  line-height: 1.8;
}