/* =====================================================================
   POFFICIEL - sélecteur sur mesure
   Remplace les <select> natifs marqués data-selecteur. Le champ natif
   reste dans le formulaire (masqué) et porte la valeur soumise.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Pont de vocabulaire
   ---------------------------------------------------------------------
   Cette feuille parle encore la charte POFFICIEL - « --bleu », « --gris »,
   « --encre », « --blanc ». Ces noms ne sont déclarés que par app.css, qui
   les remappe déjà sur la charte en vigueur. Un écran qui se passe
   d'app.css - securite.php, donnees-personnelles.php - perdait donc le
   cadre du sélecteur : ni bordure, ni fond, un « - choisir - » posé sur
   rien. Les noms sont rattachés ici aux jetons d'accueil.css, à valeur
   égale : rien ne bouge sur les écrans qui chargent encore app.css.
   --------------------------------------------------------------------- */
:root{
  --bleu:var(--rose);
  --bleu-survol:var(--rose-sombre);
  --bleu-fond:var(--rose-clair);
  --blanc:var(--surface);
  --encre:var(--nuit);
  --gris:var(--texte-doux);
  --papier:#FAFBFC;
  --filet:var(--bord);
  --filet-clair:var(--bord-clair);
  --corps:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --fixe:'SF Mono',ui-monospace,'Roboto Mono',Menlo,Consolas,monospace;
}

.selecteur {
  position: relative;
  min-width: 230px;
  /* Le composant peut naître dans un libellé en capitales (.filtres) :
     il revient à la composition courante. */
  font-family: var(--corps);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

/* Le champ natif est retiré de l'affichage une fois le composant monté. */
select[data-selecteur].monte {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Déclencheur ---------- */

/* Le déclencheur est un champ, et se dessine donc comme un champ : mêmes
   filet, même rayon, même remplissage et même corps que « .champ-saisie
   input » (composants.css). Il portait le contour gris sombre et le rayon
   de 2 px de l'ancienne charte : posé au-dessus d'une saisie de texte, il
   se lisait comme un objet d'une autre nature, plus lourd, alors qu'il
   demande la même chose. Ce qui se remplit se dessine pareil. */
.selecteur-champ {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  font-family: var(--corps);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  color: var(--nuit);
  padding: 11px 13px;
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: var(--r-s);
  cursor: pointer;
  transition: border-color .14s ease, box-shadow .14s ease;
}
.selecteur-champ:hover { border-color: #DDE1E9; }
/* Ouvert ou au clavier : l'anneau rose des autres champs, et non un
   « outline » qui doublerait le filet d'un second trait. */
.selecteur-champ:focus-visible,
.selecteur.ouvert .selecteur-champ {
  outline: 0;
  border-color: var(--rose);
  box-shadow: var(--anneau);
}

.selecteur-champ .vide { color: var(--gris); }

/* Chevron dessiné au filet, dans l'esprit des signes typographiques du site. */
.selecteur-fleche {
  flex: 0 0 auto;
  width: 9px; height: 9px;
  border-right: 1.5px solid var(--gris);
  border-bottom: 1.5px solid var(--gris);
  transform: rotate(45deg) translateY(-2px);
  transition: transform .12s ease;
}
.selecteur.ouvert .selecteur-fleche { transform: rotate(-135deg) translateY(-2px); }

/* ---------- Panneau ---------- */

.selecteur-panneau {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  left: 0;
  width: max-content;
  min-width: 100%;
  max-width: 340px;
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: var(--r-m);
  box-shadow: var(--ombre);
  overflow: hidden;
  display: none;
}
.selecteur.ouvert .selecteur-panneau { display: block; }

/* Déposé dans la couche flottante, le panneau n'est plus un descendant du
   champ : il ne peut donc plus se régler par l'état de celui-ci, et sa
   position lui est donnée en propre. Ce qui le rognait - une carte de
   filtres, un cadre de tableau - ne le touche plus. */
.selecteur-panneau.dans-couche { display: block; z-index: auto; }

.selecteur-filtre {
  display: block;
  width: 100%;
  font-family: var(--corps);
  font-size: .9rem;
  color: var(--encre);
  padding: 10px 14px;
  background: var(--papier);
  border: 0;
  border-bottom: 1px solid var(--filet);
  border-radius: var(--r-m) var(--r-m) 0 0;
}
.selecteur-filtre:focus { outline: none; background: var(--blanc); }
.selecteur-filtre::placeholder { color: var(--gris); }

.selecteur-liste {
  list-style: none;
  margin: 0;
  padding: 4px 0;
  max-height: 314px;
  overflow-y: auto;
}

.selecteur-option {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  font-size: .93rem;
  line-height: 1.4;
  color: var(--texte);
  padding: 8px 14px;
  border-left: 2px solid transparent;
  cursor: pointer;
}
.selecteur-option.vise { background: var(--papier); }
.selecteur-option[aria-selected="true"] {
  color: var(--bleu);
  font-weight: 600;
  border-left-color: var(--bleu);
  background: var(--bleu-fond);
}
.selecteur-option.cache { display: none; }

/* Volume associé à l'option (nombre de publications, etc.). */
.selecteur-nombre {
  flex: 0 0 auto;
  font-family: var(--fixe);
  font-size: .74rem;
  color: var(--gris);
  font-weight: 400;
}

/* Case dessinée pour la sélection multiple. */
.selecteur.multiple .selecteur-option { align-items: center; justify-content: flex-start; }
.selecteur.multiple .selecteur-nombre { margin-left: auto; }
.selecteur-case {
  flex: 0 0 auto;
  width: 15px; height: 15px;
  border: 1.5px solid #C9CFDB;
  border-radius: 5px;
  background: var(--surface);
  position: relative;
}
.selecteur-option[aria-selected="true"] .selecteur-case {
  background: var(--bleu);
  border-color: var(--bleu);
}
.selecteur-option[aria-selected="true"] .selecteur-case::after {
  content: '';
  position: absolute;
  left: 4px; top: 1px;
  width: 4px; height: 8px;
  border-right: 1.5px solid var(--blanc);
  border-bottom: 1.5px solid var(--blanc);
  transform: rotate(45deg);
}

.selecteur-pied {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: .8rem;
  color: var(--gris);
  padding: 9px 14px;
  border-top: 1px solid var(--filet-clair);
}
.selecteur-effacer {
  font-family: var(--corps);
  font-size: .8rem;
  color: var(--bleu);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.selecteur-effacer:hover { color: var(--bleu-survol); }

.selecteur-rien {
  font-size: .87rem;
  color: var(--gris);
  padding: 12px 14px;
  margin: 0;
}

@media (max-width: 820px) {
  .selecteur { min-width: 0; width: 100%; }
  .selecteur-panneau { max-width: none; }
}