/**
 * La recherche : la fenêtre, le formulaire, la page de résultats.
 */

/* ---------------------------------------------------------------
 * LA FENÊTRE
 *
 * Un « dialog » natif, comme la loupe des galeries : le fond est son
 * « ::backdrop », la touche d'échappement et le piège au clavier
 * viennent du navigateur. On ne pose ici qu'une taille et un dessin.
 * --------------------------------------------------------------- */

.recherche-modale {
  width: min(92vw, 68rem);
  max-width: none;
  padding: 0;
  border: 0;
  background-color: var(--couleur-fond);
  color: var(--couleur-texte);
}

.recherche-modale::backdrop { background-color: rgb(10 31 71 / 0.55); }

.recherche-modale__cadre {
  position: relative;
  padding: var(--e-l) var(--e-l) var(--e-m);
}

.recherche-modale__titre {
  margin: 0 var(--e-xl) var(--e-m) 0;
  font-family: var(--police-titre);
  font-size: var(--t-h3);
  font-weight: var(--graisse-forte);
  line-height: var(--interligne-titre);
  color: var(--couleur-titre);
}

.recherche-modale__chevrons {
  margin-right: var(--e-2xs);
  letter-spacing: -0.08em;
  color: var(--couleur-titre);
}

/*
 * La croix est dessinée en deux traits : un caractère « × » change de
 * taille d'une police à l'autre, et serait annoncé en plus du libellé.
 */
.recherche-modale__fermer {
  position: absolute;
  top: var(--e-xs);
  right: var(--e-xs);
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--couleur-titre);
}

.recherche-modale__croix {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

.recherche-modale__croix::before,
.recherche-modale__croix::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 25%;
  width: 50%;
  height: 3px;
  background-color: currentcolor;
}

.recherche-modale__croix::before { transform: translateY(-50%) rotate(45deg); }
.recherche-modale__croix::after  { transform: translateY(-50%) rotate(-45deg); }

/*
 * SUR TÉLÉPHONE, LA FENÊTRE PREND L'ÉCRAN.
 *
 * À 390 px, une fenêtre centrée laisse au champ moins de place qu'il
 * n'en faut pour lire ce qu'on tape pendant que le clavier occupe la
 * moitié basse. Choix de Pascal, le 3 novembre.
 */
@media (max-width: 48rem) {

  .recherche-modale {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
  }

  .recherche-modale__cadre {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100%;
    padding: var(--e-xl) var(--e-s) var(--e-l);
  }

  .recherche-modale__titre { font-size: var(--t-h4); }
}

/* ---------------------------------------------------------------
 * LE FORMULAIRE
 *
 * Le même dans la fenêtre, sur la page de résultats et sur la page
 * introuvable. L'étiquette est visible : un champ dont le seul nom est
 * son texte d'invite perd son nom dès qu'on tape.
 * --------------------------------------------------------------- */

.recherche-formulaire { margin-block: 0 var(--e-m); }

.recherche-formulaire__etiquette {
  display: block;
  margin-bottom: var(--e-2xs);
  font-family: var(--police-label);
  font-size: var(--t-petit);
  font-weight: var(--graisse-medium);
  letter-spacing: var(--interlettre-label);
  text-transform: uppercase;
  color: var(--couleur-texte-doux);
}

.recherche-formulaire__saisie {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2xs);
}

.recherche-formulaire__champ {
  flex: 1 1 14rem;
  min-width: 0;
  padding: var(--e-xs) var(--e-s);
  border: 0;
  border-radius: var(--rayon-bouton);
  background-color: var(--c-cdos30-3);
  color: var(--c-marine);
  font-family: var(--police-texte);
  font-size: var(--t-corps-grand);
}

/*
 * Le texte d'invite est sur l'aplat orange, comme la saisie : le gris
 * clair du navigateur y tomberait à 1,6:1. Le marine à 60 % donne 3,5.
 */
.recherche-formulaire__champ::placeholder {
  color: rgb(10 31 71 / 0.75);
  opacity: 1;
}

.recherche-formulaire__envoi {
  flex: 0 0 auto;
  padding: var(--e-xs) var(--e-l);
  border: 0;
  border-radius: var(--rayon-bouton);
  background-color: var(--couleur-fond-inverse);
  color: var(--couleur-texte-inverse);
  font-family: var(--police-titre);
  font-size: var(--t-corps-grand);
  cursor: pointer;
}

.recherche-formulaire__envoi:hover,
.recherche-formulaire__envoi:focus-visible {
  background-color: var(--c-cdos30-2);
}

/* ---------------------------------------------------------------
 * LA PAGE DE RÉSULTATS
 * --------------------------------------------------------------- */

.recherche-resultats__invite,
.recherche-resultats__piste {
  max-width: var(--largeur-texte);
  color: var(--couleur-texte-doux);
}

/*
 * Les filtres sont des liens, pas des boutons : ils changent d'adresse.
 * Le compte est dans la pastille, à droite du nom, pour qu'on lise
 * d'abord la nature.
 */
.recherche-filtres { margin-bottom: var(--e-m); }

.recherche-filtres__liste {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.recherche-filtres__lien {
  display: inline-flex;
  align-items: center;
  gap: var(--e-3xs);
  min-height: 44px;
  padding: var(--e-3xs) var(--e-s);
  border: 1px solid var(--couleur-filet);
  border-radius: var(--rayon-bouton);
  font-family: var(--police-label);
  font-size: var(--t-petit);
  letter-spacing: var(--interlettre-label);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--couleur-titre);
}

.recherche-filtres__lien:hover,
.recherche-filtres__lien:focus-visible {
  border-color: var(--couleur-titre);
}

.recherche-filtres__lien--courant {
  border-color: var(--couleur-fond-inverse);
  background-color: var(--couleur-fond-inverse);
  color: var(--couleur-texte-inverse);
}

.recherche-filtres__compte {
  font-variant-numeric: tabular-nums;
  opacity: 0.75;
}

.recherche-groupe { margin-bottom: var(--e-xl); }

.recherche-groupe__titre {
  display: flex;
  align-items: baseline;
  gap: var(--e-2xs);
  margin: 0 0 var(--e-s);
  padding-bottom: var(--e-3xs);
  border-bottom: 1px solid var(--couleur-filet);
  font-size: var(--t-h4);
  color: var(--couleur-titre);
}

.recherche-groupe__compte {
  font-family: var(--police-label);
  font-size: var(--t-petit);
  font-variant-numeric: tabular-nums;
  color: var(--couleur-texte-doux);
}

.recherche-groupe__suite { margin: var(--e-s) 0 0; }

/*
 * Une page et un comité n'ont pas d'image : leur réserve de média est
 * rendue nulle plutôt que vide, sinon la grille garde une bande grise
 * pour rien.
 */
.carte--resultat-page .carte__media,
.carte--resultat-comite .carte__media {
  display: none;
}