/* Recherche de produits — page « Nos produits »
   Reprend le bleu institutionnel du site (#00366b / #005bbf) et la graisse des
   titres existants, pour que le bloc ne detonne pas au milieu du gabarit. */

.agt-recherche {
  position: relative;
  /* Le conteneur Oxygen est un flex en colonne avec align-items:flex-start :
     sans largeur explicite, le bloc se reduirait a la taille de son contenu. */
  width: 100%;
  max-width: 560px;
  margin: 0 0 32px;
  font-family: inherit;
}

.agt-recherche__label {
  display: block;
  margin-bottom: 8px;
  font-size: 15px;
  font-weight: 600;
  color: #00366b;
}

.agt-recherche__zone { position: relative; }

.agt-recherche__champ {
  width: 100%;
  box-sizing: border-box;
  padding: 13px 44px 13px 16px;
  font-size: 16px; /* 16px minimum : evite le zoom automatique sur iOS */
  font-family: inherit;
  color: #1a1a1a;
  background: #fff;
  border: 2px solid #c9d3e0;
  border-radius: 4px;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.agt-recherche__champ::placeholder { color: #7b8794; }

.agt-recherche__champ:focus {
  outline: none;
  border-color: #005bbf;
  box-shadow: 0 0 0 3px rgba(0, 91, 191, .22);
}

/* Le focus clavier reste visible meme si le theme neutralise les contours. */
.agt-recherche__champ:focus-visible { outline: 2px solid #005bbf; outline-offset: 2px; }

.agt-recherche__effacer {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  padding: 0;
  font-size: 22px;
  line-height: 1;
  color: #5a6a7a;
  background: none;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.agt-recherche__effacer:hover { color: #00366b; background: #eef2f7; }
.agt-recherche__effacer:focus-visible { outline: 2px solid #005bbf; outline-offset: 1px; }

.agt-recherche__liste {
  position: absolute;
  z-index: 50;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 380px;
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  list-style: none;
  background: #fff;
  border: 1px solid #d7dfe9;
  border-radius: 4px;
  box-shadow: 0 10px 28px rgba(0, 32, 70, .16);
}

.agt-recherche__item { margin: 0; padding: 0; list-style: none; }

.agt-recherche__lien {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 10px 12px;
  color: #17314f;
  text-decoration: none;
  border-radius: 3px;
}

.agt-recherche__item.est-actif .agt-recherche__lien,
.agt-recherche__lien:hover { background: #eef4fb; }

.agt-recherche__item.est-actif .agt-recherche__lien { box-shadow: inset 3px 0 0 #005bbf; }

.agt-recherche__vignette {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  object-fit: contain;
  background: #f6f8fb;
  border-radius: 3px;
}

.agt-recherche__texte { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.agt-recherche__nom {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: #00366b;
}

.agt-recherche__nom mark {
  padding: 0;
  color: inherit;
  background: #ffe9a8;
  border-radius: 2px;
}

.agt-recherche__aire {
  font-size: 12.5px;
  color: #6b7a8c;
}

.agt-recherche__etat {
  margin: 8px 0 0;
  font-size: 13.5px;
  color: #5a6a7a;
  min-height: 1em;
}

@media (max-width: 600px) {
  .agt-recherche { max-width: none; }
  .agt-recherche__liste { max-height: 60vh; }
}

/* Confort visuel pour qui demande moins d'animation. */
@media (prefers-reduced-motion: reduce) {
  .agt-recherche__champ { transition: none; }
}