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

:root {
  --base:     #1e1e2e;
  --mantle:   #181825;
  --crust:    #11111b;
  --surface0: #313244;
  --surface1: #45475a;
  --surface2: #585b70;
  --overlay0: #6c7086;
  --overlay1: #7f849c;
  --overlay2: #9399b2;
  --subtext:  #bac2de;
  --text:     #cdd6f4;
  --mauve:    #cba6f7;
  --blue:     #89b4fa;
  --teal:     #94e2d5;
  --green:    #a6e3a1;
  --peach:    #fab387;
  --red:      #f38ba8;
  --pink:     #f5c2e7;
  --sky:      #89dceb;
  --yellow:   #f9e2af;
}

body, html {
  background: var(--base) !important;
  color: var(--text) !important;
}

header, .navbar {
  background: var(--mantle) !important;
  border-bottom: 1px solid var(--surface0) !important;
}

/* ── 1. Logo loupe en mauve ── */
.index .ion-icon-big, #search_logo, .logo svg,
a[href="/"] svg, .search-logo svg {
  color: var(--mauve) !important;
  fill: var(--mauve) !important;
}

/* ── Barre de recherche ── */
#q, input[type="search"] {
  background: var(--surface0) !important;
  color: var(--text) !important;
  border: 1px solid var(--surface1) !important;
  border-radius: 10px !important;
}
#q:focus {
  border-color: var(--mauve) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(203,166,247,0.15) !important;
}

/* ── 2. Bouton recherche transparent ── */
button[type="submit"], #send_search {
  background: transparent !important;
  border: none !important;
  color: var(--mauve) !important;
  border-radius: 8px !important;
  padding: 5px 9px !important;
}
button[type="submit"]:hover, #send_search:hover {
  background: var(--surface1) !important;
  color: var(--blue) !important;
}
button[type="submit"] svg { fill: currentColor !important; color: inherit !important; }

/* ── 5. Séparateur effacer / recherche ── */
#clear_search {
  background: transparent !important;
  border: none !important;
  color: var(--overlay1) !important;
}
#clear_search:hover { color: var(--red) !important; }
#clear_search.empty {
  color: var(--surface0) !important;
  pointer-events: none !important;
}

/* ── 3. Icônes info / préférences ── */
#main_preferences svg, #main_info svg,
a[href*="preferences"] svg, a[href*="info"] svg {
  color: var(--subtext) !important;
  fill: var(--subtext) !important;
}
#main_preferences:hover svg, #main_info:hover svg,
a[href*="preferences"]:hover svg, a[href*="info"]:hover svg {
  color: var(--mauve) !important;
  fill: var(--mauve) !important;
}

/* ── Catégories (pilules) ── */
#categories button, .category_button,
.category label.tooltips {
  background: var(--surface0) !important;
  border: 1px solid var(--surface1) !important;
  border-radius: 20px !important;
  color: var(--subtext) !important;
  padding: 5px 14px !important;
}
#categories button:hover, .category label:hover {
  border-color: var(--overlay1) !important;
  color: var(--text) !important;
}
#categories button.selected, .category_button.selected,
.category input:checked + label {
  background: rgba(203,166,247,0.12) !important;
  border-color: var(--mauve) !important;
  color: var(--mauve) !important;
}

/* ── 4. Icônes catégories colorées par type ── */
#checkbox_general + label svg, button[name="category_general"] svg { color: var(--mauve) !important; fill: var(--mauve) !important; }
#checkbox_images + label svg, button[name="category_images"] svg { color: var(--blue) !important; fill: var(--blue) !important; }
#checkbox_videos + label svg, button[name="category_videos"] svg { color: var(--red) !important; fill: var(--red) !important; }
#checkbox_news + label svg, button[name="category_news"] svg { color: var(--peach) !important; fill: var(--peach) !important; }
#checkbox_map + label svg, button[name="category_map"] svg { color: var(--teal) !important; fill: var(--teal) !important; }
#checkbox_music + label svg, button[name="category_music"] svg { color: var(--pink) !important; fill: var(--pink) !important; }
#checkbox_it + label svg, button[name="category_it"] svg { color: var(--green) !important; fill: var(--green) !important; }
#checkbox_science + label svg, button[name="category_science"] svg { color: var(--sky) !important; fill: var(--sky) !important; }
#checkbox_files + label svg, button[name="category_files"] svg { color: var(--yellow) !important; fill: var(--yellow) !important; }
label[for*="social"] svg, button[name*="social"] svg { color: var(--pink) !important; fill: var(--pink) !important; }

/* ── Box externe unique par section ── */
#infoboxes, #suggestions, #search_url, #timings, #answers, #engines_msg {
  background: var(--mantle) !important;
  border: 1px solid var(--surface0) !important;
  border-radius: 10px !important;
  padding: 14px 16px !important;
  margin-bottom: 10px !important;
}
#infoboxes .sidebar-collapsible,
#suggestions .sidebar-collapsible,
#search_url .sidebar-collapsible,
#engines_msg .sidebar-collapsible,
#timings .sidebar-collapsible {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}
.infobox {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}
.infobox h2 { color: var(--text) !important; font-size: 16px !important; }

details summary, .sidebar-collapsible summary {
  color: var(--subtext) !important;
  cursor: pointer !important;
  font-size: 13px !important;
  margin-bottom: 8px !important;
}
details summary:hover { color: var(--text) !important; }

.engine-stats td { color: var(--subtext) !important; font-size: 12px !important; padding: 3px 6px !important; }
.engine-stats a { color: var(--blue) !important; }
.response-error { color: var(--peach) !important; font-size: 12px !important; }
progress, meter { accent-color: var(--mauve) !important; }

#search_url pre {
  background: var(--surface0) !important;
  color: var(--subtext) !important;
  border-radius: 6px !important;
  padding: 8px !important;
  font-size: 11px !important;
  overflow-x: auto !important;
}

/* ── Résultats ── */
.result {
  background: var(--mantle) !important;
  border: 1px solid var(--surface0) !important;
  border-radius: 10px !important;
  padding: 14px 16px !important;
  margin-bottom: 10px !important;
}
.result:hover { border-color: var(--surface2) !important; }
.result h3 a, .result_title a { color: var(--mauve) !important; }
.result h3 a:hover { color: var(--blue) !important; }
.result_url, .url_wrapper { color: var(--teal) !important; font-size: 11px !important; }
.result-content, .content { color: var(--subtext) !important; line-height: 1.6 !important; }

.pull-right.engines span, .engines span {
  background: var(--surface0) !important;
  border: 1px solid var(--surface1) !important;
  border-radius: 4px !important;
  color: var(--overlay2) !important;
  font-size: 10px !important;
  padding: 1px 6px !important;
}

#suggestions a { color: var(--blue) !important; font-size: 13px !important; line-height: 2 !important; }
#suggestions a:hover { color: var(--mauve) !important; }

#sidebar { background: transparent !important; border: none !important; }

a { color: var(--blue) !important; }
a:hover { color: var(--mauve) !important; }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--mantle); }
::-webkit-scrollbar-thumb { background: var(--surface1); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--overlay0); }

    /* ── Espacement vertical entre pilules ── */
    #categories_container {
      display: flex !important;
      flex-wrap: wrap !important;
      gap: 8px !important;
    }

    /* ── Margin sous le bloc catégories ── */
    #categories {
      margin-bottom: 16px !important;
      padding-bottom: 4px !important;
    }

    /* ── Margin sous le bloc catégories ── */
    #categories {
      margin-bottom: 16px !important;
      padding-bottom: 4px !important;
    }

    /* ── Uniformise largeur sidebar et résultats ── */
    #results {
      display: block !important;
    }
    #sidebar, #urls {
      width: 100% !important;
      max-width: 100% !important;
      margin: 0 !important;
      padding: 0 !important;
      float: none !important;
    }
    /* ── Retire le séparateur natif sous la sidebar ── */
    #sidebar {
      border: none !important;
      border-bottom: none !important;
    }
    #sidebar-end-collapsible {
      display: none !important;
      border: none !important;
    }

    /* ── Respiration sur les côtés ── */
    #results {
      padding-left: 12px !important;
      padding-right: 12px !important;
      max-width: 900px !important;
      margin: 0 auto !important;
    }

    /* ── Logo SearXNG en mauve ── */
    .index .title h1 {
      color: var(--mauve) !important;
    }
    /* ── Logo loupe header en mauve ── */
    .index .ion-icon-big svg, a.logo svg, #logo svg {
      color: var(--mauve) !important;
      fill: var(--mauve) !important;
    }

    /* ── Triangles dropdowns en mauve ── */
    select {
      accent-color: var(--mauve) !important;
    }
    .select-wrapper::after, .dropdown-arrow,
    select + .icon, .search_filters svg {
      color: var(--mauve) !important;
      fill: var(--mauve) !important;
    }


    /* ── Logo Comfortaa light minuscules ── */
    .index .title {
      background: none !important;
      min-height: auto !important;
      margin: 4rem auto 2rem !important;
      text-align: center !important;
    }
    .index .title h1 {
      visibility: visible !important;
      font-family: 'Comfortaa', sans-serif !important;
      font-weight: 300 !important;
      font-size: 3.5rem !important;
      letter-spacing: 4px !important;
      text-transform: lowercase !important;
      color: var(--mauve) !important;
    }