/* ══════════════════════════════════════════════════════════════════════════
   search.css — recherche-harmonieuse-marker (13/09/2026)
   « je veux un champ plus harmonieux visuellement »

   AVANT : trois boîtes distinctes posées côte à côte — le sélecteur de moteur,
   le champ, la flèche —, chacune avec son propre cadre, son propre rayon et
   six pixels de vide entre elles. Trois objets, pas une barre de recherche.

   MAINTENANT : UNE capsule. Le cadre et le fond passent sur la rangée
   (.search-row) ; ce qu'elle contient n'a plus ni fond ni bordure et se
   contente d'occuper sa place. Un filet vertical sépare le moteur du champ, ce
   qui suffit à dire que ce sont deux commandes. Le cadre s'éclaire quand le
   champ prend le focus, au lieu d'éclairer le champ seul : c'est l'objet
   entier qui devient actif.

   Le reste du fichier — menu des moteurs, pastilles de filtre — est repris de
   la version précédente, débarrassé de ses deux blocs en double (.engine-label
   et .filter-toggle y figuraient deux fois, avec des valeurs différentes) et
   de tout ce qui servait au bouton « + Filtres », supprimé du gabarit.
   ══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────── LA CAPSULE ─────────────────────────── */

/* PIÈGE, trouvé au banc en cliquant les moteurs du bas de la liste : le menu
   des moteurs passait DERRIÈRE la grille d'icônes de l'accueil, et les six
   derniers moteurs n'étaient plus cliquables. C'est le backdrop-filter ajouté
   juste en dessous qui en est la cause — il crée un contexte d'empilement, et
   le z-index:200 du menu, jusque-là compté par rapport à la racine, se
   retrouvait enfermé dans la capsule.
   Le bloc de recherche entier monte donc d'un cran : le menu redevient libre de
   recouvrir ce qui le suit dans la page. 200 est au-dessus des icônes (qui
   n'ont pas de z-index) et sous les 1000 de la barre du site. */
.search-wrap {
  position: relative;
  z-index: 200;
}

.search-row {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 4px;
  background: rgba(0, 0, 0, 0.45);
  /* liseret-blanc-marker (13/09/2026) — BUG 20260913-134604 : « il faut un
     liseré blanc de contour pour le champ de recherche ». Le contour passe du
     crème à 22 % au blanc à 85 %, et de 1 à 1,5 px : sur le papier peint du
     site, à 22 % la capsule se devinait plus qu'elle ne se voyait. Le halo
     noir en dessous le détache aussi des fonds clairs, comme le fait le
     contour cartoon des libellés du site. */
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  border-radius: 999px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.55);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.search-row:hover { border-color: #fff; }

/* L'anneau de focus est posé sur la capsule, pas sur le champ : le champ n'a
   plus de bord à lui. focus-within pour qu'il s'allume aussi quand c'est le
   bouton de moteur ou la flèche qui a le focus au clavier. */
.search-row:focus-within {
  border-color: #fff;
  background: rgba(0, 0, 0, 0.58);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45),
              0 0 0 1px rgba(0, 0, 0, 0.55),
              0 0 0 4px rgba(255, 255, 255, 0.16);
}

/* ─────────────────────────── LE MOTEUR ─────────────────────────── */

.engine-wrap { position: relative; flex-shrink: 0; }

.engine-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 0;
  border-radius: 999px;
  padding: 7px 12px;
  margin: 0;
  cursor: pointer;
  line-height: 1;
  color: rgba(240, 235, 220, 0.95);
  transition: background 0.2s;
}
.engine-btn:hover { background: rgba(240, 235, 220, 0.10); }
.engine-btn img { width: 18px; height: 18px; border-radius: 4px; display: block; }
.engine-btn .caret { font-size: 10px; color: rgba(240, 235, 220, 0.55); }

.engine-label {
  font-family: var(--cizi-font-cartoon, system-ui), sans-serif;
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  color: rgba(240, 235, 220, 0.95);
}

/* Le filet de séparation. Pas une bordure sur le champ : une bordure aurait
   fait la hauteur du champ, alors qu'un filet court se lit comme un séparateur
   et pas comme un deuxième cadre. */
.search-sep {
  flex-shrink: 0;
  width: 1px;
  height: 22px;
  margin: 0 2px;
  background: rgba(240, 235, 220, 0.20);
}

/* ─────────────────────────── LE CHAMP ─────────────────────────── */

.search-input {
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  padding: 8px 12px;
  font-family: monospace;
  font-size: 14px;
  color: rgba(240, 235, 220, 0.98);
  outline: none;
}
.search-input::placeholder {
  color: rgba(240, 235, 220, 0.45);
  /* Le libellé est une phrase, pas une valeur : il ne prend pas la fonte à
     chasse fixe du contenu tapé. */
  font-family: var(--cizi-font-cartoon, system-ui), sans-serif;
  font-size: 0.95em;
}
/* La croix native de <input type="search"> est dessinée en sombre par le
   navigateur : invisible sur ce fond, et elle casserait l'alignement. */
.search-input::-webkit-search-cancel-button,
.search-input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }

/* ─────────────────────────── LA FLÈCHE ─────────────────────────── */

.search-go {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: rgba(240, 235, 220, 0.12);
  border: 1px solid rgba(240, 235, 220, 0.18);
  border-radius: 50%;
  color: rgba(240, 235, 220, 0.95);
  cursor: pointer;
  padding: 0;
  transition: background 0.2s, border-color 0.2s;
}
.search-go:hover {
  background: rgba(240, 235, 220, 0.24);
  border-color: rgba(240, 235, 220, 0.4);
}
.icon-arrow-right {
  width: 18px;
  height: 18px;
  display: block;
  transition: transform 0.2s ease;
}
.search-go:hover .icon-arrow-right { transform: translateX(2px); }

/* ─────────────────────── LE MENU DES MOTEURS ─────────────────────── */

.engine-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: rgba(10, 10, 10, 0.96);
  border: 1px solid rgba(240, 235, 220, 0.18);
  border-radius: 14px;
  padding: 6px;
  overflow-y: auto;
  z-index: 200;
  min-width: 180px;
  max-height: 70vh;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.engine-dropdown.open { display: block; }
.engine-sep {
  padding: 6px 10px 4px;
  font-size: 10px;
  color: rgba(240, 235, 220, 0.4);
  letter-spacing: 0.1em;
  font-family: monospace;
}
.engine-option {
  padding: 8px 10px;
  border-radius: 9px;
  font-family: monospace;
  font-size: 13px;
  color: rgba(240, 235, 220, 0.75);
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: background 0.15s, color 0.15s;
}
.engine-option:hover { background: rgba(240, 235, 220, 0.10); color: rgba(240, 235, 220, 0.98); }
.engine-option.selected { color: rgba(240, 235, 220, 0.98); font-weight: bold; }
.engine-option img { width: 16px; height: 16px; border-radius: 4px; margin-right: 8px; }

/* ───────────────────────── LES PASTILLES ─────────────────────────
   Plus de bouton « + Filtres » : les huit pastilles sont toutes là, et la
   rangée passe donc à la ligne au lieu de déborder (elle était en nowrap
   parce que six d'entre elles étaient repliées).
   Plus de pastille « Web » non plus : aucune pastille allumée EST la recherche
   web, et un clic sur celle qui est allumée l'éteint (scripts/search.js). */

.search-wrap .filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-top: 12px;
}

.filter-btn {
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(240, 235, 220, 0.15);
  border-radius: 999px;
  padding: 3px 11px;
  font-family: monospace;
  font-size: 11px;
  color: rgba(240, 235, 220, 0.7);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.filter-btn:hover {
  background: rgba(240, 235, 220, 0.10);
  border-color: rgba(240, 235, 220, 0.32);
  color: rgba(240, 235, 220, 0.98);
}
.filter-btn.active {
  background: rgba(240, 235, 220, 0.9);
  border-color: rgba(240, 235, 220, 0.9);
  color: #14140f;
  font-weight: bold;
}

@media (max-width: 480px) {
  .search-wrap { width: 100%; max-width: 100%; }
  .engine-btn { padding: 7px 8px; }
  .engine-label { font-size: 13px; }
  .search-input { padding: 8px 8px; font-size: 13px; }
  .search-go { width: 34px; height: 34px; }
  .filter-btn { font-size: 10px; padding: 3px 9px; }
}

/* Sur téléphone le nom du moteur mange la place du champ et le libellé se
   faisait tronquer (« Rechercher sur Googl… », relevé au banc à 390 px). Il ne
   reste donc que le favicon et le chevron : le nom du moteur continue d'être
   dit par le libellé lui-même, « Rechercher sur Google… ».
   460 et pas 380 : à 390 px — un iPhone courant — ça ne tenait déjà plus. */
@media (max-width: 460px) {
  .engine-label { display: none; }
  .search-sep { margin: 0; }
}