/* =====================================================================
   Observatoire des Transitions — page de recherche
   Depend de tokens-secteurs.css et de secteurs.css.

   Sobriete voulue : un champ, des puces de filtre, une liste. Pas de
   panneau lateral repliable ni de compteur anime — sur un corpus de
   quelques dizaines de contenus, ce serait de la machinerie sans usage.
   ===================================================================== */

.zone-recherche{padding:30px 24px 56px}
.visuellement-cache{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap}

/* --- Champ ------------------------------------------------------------ */
.champ{display:flex;align-items:center;gap:12px;background:#fff;
  border:1px solid var(--line);border-radius:8px;padding:0 16px;
  max-width:640px;transition:border-color .15s,box-shadow .15s}
.champ:focus-within{border-color:var(--action);box-shadow:0 0 0 3px rgba(31,107,69,.14)}
.champ svg{color:var(--sage);flex:0 0 auto}
.champ input{flex:1;border:0;outline:0;background:transparent;font-family:var(--sans);
  font-size:1.02rem;padding:15px 0;color:var(--graphite);min-width:0}
.champ input::placeholder{color:#9aa79f}
.champ input:disabled{opacity:.55}

/* --- Facettes --------------------------------------------------------- */
.facettes{margin:20px 0 6px;display:flex;flex-direction:column;gap:10px}
.groupe{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.etiquette{font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--sage);min-width:66px}

.chip{background:var(--bv,#fff);color:var(--bc,var(--graphite));
  border:1px solid var(--bc,var(--line));border-radius:999px;
  padding:5px 13px;font-family:var(--sans);font-size:.78rem;font-weight:600;
  cursor:pointer;transition:.14s}
.chip:hover{filter:brightness(.97)}
.chip:focus-visible{outline:3px solid var(--copper);outline-offset:2px}
/* Le filtre actif s'inverse : le remplissage prend la couleur du secteur.
   La variante -aplat garantit 4,5:1 avec du texte blanc. */
.chip.actif{background:var(--bc,var(--green));color:#fff;border-color:var(--bc,var(--green))}
.chip-neutre{--bc:var(--sage);--bv:#fff}
.chip-neutre.actif{background:var(--green);border-color:var(--green)}

.raz{margin-left:auto;background:transparent;border:0;color:var(--sage);
  font-family:var(--sans);font-size:.78rem;cursor:pointer;text-decoration:underline;
  text-underline-offset:2px}
.raz:hover{color:var(--graphite)}

/* --- Resultats -------------------------------------------------------- */
.compte-res{font-size:.8rem;color:var(--sage);text-transform:uppercase;
  letter-spacing:.08em;font-weight:700;margin:22px 0 12px;
  border-top:1px solid var(--line);padding-top:14px}

.resultats{display:flex;flex-direction:column;gap:2px}
.res{display:flex;flex-direction:column;gap:7px;align-items:flex-start;
  background:#fff;border:1px solid var(--line);border-left:3px solid var(--vc,var(--action));
  border-radius:0 6px 6px 0;padding:16px 20px;transition:.14s}
.res:hover{border-left-width:6px;padding-left:17px;box-shadow:0 6px 18px rgba(23,52,39,.07)}
.res:focus-visible{outline:3px solid var(--copper);outline-offset:2px}
.res-titre{font-family:var(--serif);font-size:1.1rem;line-height:1.3;color:var(--green);
  font-weight:600;text-wrap:balance}
.res-chapo{font-size:.88rem;color:var(--sage);line-height:1.55}
.res-pied{font-size:.72rem;color:var(--sage);text-transform:uppercase;letter-spacing:.05em}

@media(max-width:560px){
  .zone-recherche{padding:22px 20px 44px}
  .etiquette{min-width:100%}
  .raz{margin-left:0}
}