@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&display=swap');

:root {
  --ekla-olive: #B3AE74;
  --ekla-olive-fonce: #8F8A52;
  --ekla-ciel: #9FC1E7;
  --ekla-ciel-clair: #E6EFF9;
  --ekla-ardoise: #67768E;
  --ekla-creme: #FAF8F2;
  --ekla-texte: #4A4F5C;
}

body, input, button, textarea, select {
  font-family: 'Quicksand', 'Nunito', 'Segoe UI', sans-serif !important;
  color: var(--ekla-texte);
}

body, main, #listing {
  background: var(--ekla-creme) !important;
}

/* ---------- Page de connexion ---------- */
#login {
  background: var(--ekla-creme) !important;
}
#login img {
  width: 11em !important;
  height: 11em !important;
}
#login h1 {
  color: var(--ekla-olive) !important;
  font-weight: 700;
  font-size: 1.6em;
}
#login form {
  max-width: 18em;
}
#login .input {
  background: #fff !important;
  border: 2px solid var(--ekla-ciel-clair) !important;
  border-radius: 12px !important;
  color: var(--ekla-texte) !important;
}
#login .input:focus {
  border-color: var(--ekla-ciel) !important;
}

/* ---------- Boutons ---------- */
.button, .button--blue, #login .button {
  background: var(--ekla-ardoise) !important;
  color: #fff !important;
  border-radius: 12px !important;
  font-weight: 600;
}
.button:hover, #login .button:hover {
  background: var(--ekla-olive-fonce) !important;
}
.button--flat {
  background: transparent !important;
  color: var(--ekla-ardoise) !important;
}
.button--flat:hover {
  background: var(--ekla-ciel-clair) !important;
}
.button--red, .button--flat.button--red {
  color: #C0675A !important;
}

/* ---------- En-tête et menu ---------- */
header {
  background: #fff !important;
  border-bottom: 3px solid var(--ekla-ciel) !important;
  box-shadow: none !important;
}
header img {
  height: 2.6em !important;
}
.action i, header .action i {
  color: var(--ekla-ardoise) !important;
}
nav {
  background: transparent !important;
}
nav .action:hover, nav .action.active {
  background: var(--ekla-ciel-clair) !important;
  border-radius: 10px;
}
nav .action i {
  color: var(--ekla-olive-fonce) !important;
}
.credits, .credits a {
  color: var(--ekla-olive) !important;
}

/* ---------- Liste des fichiers ---------- */
#listing .item {
  background: #fff !important;
  border: 1px solid var(--ekla-ciel-clair) !important;
  border-radius: 10px !important;
}
#listing .item:hover {
  border-color: var(--ekla-ciel) !important;
}
#listing .item[aria-selected="true"] {
  background: var(--ekla-ciel) !important;
  color: #fff !important;
}
#listing .item[aria-selected="true"] i,
#listing .item[aria-selected="true"] .name {
  color: #fff !important;
}
#listing .item i {
  color: var(--ekla-olive) !important;
}
#listing h2 {
  color: var(--ekla-ardoise) !important;
}

/* ---------- Fenêtres, recherche, liens ---------- */
.card {
  border-radius: 16px !important;
}
.card-title h2 {
  color: var(--ekla-ardoise) !important;
}
a {
  color: var(--ekla-ardoise);
}
#search #input {
  background: var(--ekla-ciel-clair) !important;
  border-radius: 12px !important;
}
.shell, #upload-files .file .file-progress div {
  background: var(--ekla-ciel) !important;
}