/* =============================================================
   RDS SELECT — coque partagée du combobox accessible
   =============================================================

   Pourquoi ce fichier existe (lot « harmonisation des sélecteurs
   de la page Contact », 2026-09-10) : la liste déroulante d'un
   <select> natif est peinte par le navigateur et le système, pas
   par la page. Aucune propriété CSS de notre socle (Chrome/Edge
   111+, Firefox 121+, Safari/iOS 16.2+) ne l'atteint —
   `appearance: base-select`, seule voie standard, n'existe qu'à
   partir de Chrome 135 et n'est implémentée ni par Firefox ni par
   Safari. Un <select> natif restylé ne pouvait donc harmoniser
   que son état FERMÉ ; ouvert, il retombait sur le panneau blanc
   du système, franchement étranger au thème.

   Ce fichier ne porte QUE la structure et le comportement
   (positionnement, défilement, zone tactile, transitions). Les
   couleurs, la typographie et les bordures viennent des tokens
   `--rds-select-*` ci-dessous, redéfinis PAR SECTION dans
   contact.css : chaque sélecteur s'accorde au fond qui l'entoure
   sans que deux copies du composant existent.

   ⚠️ `rds-select` doit rester en DÉPENDANCE d'enqueue de
   `rds-contact` — même leçon que `rds-lightbox` : les règles de
   page ont une spécificité égale, seul l'ordre les départage.

   ⚠️ Un listbox n'est PAS un dialogue modal : ni verrou de
   défilement, ni neutralisation du fond. Ne pas lui appliquer la
   mécanique de `rds-lightbox.css`.
   ============================================================= */

.rds-select {
  /* Valeurs de repli : une variante de section qui oublierait un
     token reste lisible plutôt que transparente. */
  --rds-select-font: var(--rds-font-body);
  --rds-select-size: 0.92rem;
  --rds-select-weight: 300;
  --rds-select-color: var(--rds-encre);
  --rds-select-color-vide: var(--rds-taupe);
  --rds-select-bg: transparent;
  --rds-select-trait: #2A1F1A33;
  --rds-select-trait-actif: var(--rds-accent);
  --rds-select-padding: 0.65rem 1.7rem 0.65rem 0;
  --rds-select-radius: 0;
  --rds-select-chevron: var(--rds-accent);

  --rds-select-panneau-bg: var(--rds-fond);
  --rds-select-panneau-trait: #2A1F1A26;
  --rds-select-panneau-ombre: 0 6px 22px #2A1F1A1F;
  --rds-select-panneau-radius: var(--rds-radius);
  --rds-select-option-padding: 0.55rem 0.95rem;
  --rds-select-option-survol-bg: #73375714;
  --rds-select-option-choisie-bg: #7337571F;
  --rds-select-option-choisie-color: var(--rds-accent);

  position: relative;
  display: block;
  width: 100%;
  /* Sans cette ligne, la largeur intrinsèque du plus long libellé
     (« Wanfercée-Baulet ») remonte jusqu'à la piste de grille et
     déforme la colonne — c'est exactement le défaut mesuré sur les
     <select> natifs avant ce lot. */
  min-width: 0;
}

/* Le <select> d'origine reste dans le DOM, jamais désactivé ni
   supprimé : c'est LUI qui porte le `name` et qui est soumis, et
   c'est lui que Contact Form 7 valide. Il n'est masqué qu'une fois
   le composant réellement construit (classe posée par le script),
   si bien que sans JavaScript la page garde le sélecteur natif —
   pleinement fonctionnel. Masquage à la manière de `.rds-sr-only`
   (jamais `display:none`), doublé de `aria-hidden` + `tabindex=-1`
   côté script pour qu'il ne soit annoncé ni atteint deux fois. */
.rds-select__native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
  min-height: 0 !important;
}

/* ── État fermé ─────────────────────────────────────────────── */

.rds-select__button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  width: 100%;
  min-width: 0;
  margin: 0;
  text-align: left;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;

  font-family: var(--rds-select-font);
  font-size: var(--rds-select-size);
  font-weight: var(--rds-select-weight);
  line-height: 1.4;
  color: var(--rds-select-color);
  background: var(--rds-select-bg);
  border: 0;
  border-bottom: 1px solid var(--rds-select-trait);
  border-radius: var(--rds-select-radius);
  padding: var(--rds-select-padding);
  transition: border-color var(--rds-transition), color var(--rds-transition),
              background-color var(--rds-transition);
}

/* Aucune valeur choisie : reprend le gris de texte secondaire du
   thème, exactement comme le faisait
   `.form-card select:has(option[value=""]:checked)`. */
.rds-select--vide .rds-select__button { color: var(--rds-select-color-vide); }

.rds-select__button:hover,
.rds-select__button[aria-expanded="true"] { border-bottom-color: var(--rds-select-trait-actif); }

/* Double anneau global du thème (prune + halo clair) : le
   soulignement seul ne signale pas un focus clavier de façon
   lisible sur un fond clair. */
.rds-select__button:focus-visible {
  outline: 2px solid var(--rds-focus);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--rds-focus-halo);
}

/* Le libellé ne doit jamais élargir sa colonne ni passer à la
   ligne : le composant vit dans une grille dont les pistes sont
   déjà contraintes. */
.rds-select__valeur {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* SVG inline plutôt qu'un data-URI en background-image : un
   data-URI ne peut lire ni une variable CSS ni `currentColor`, ce
   qui obligeait à écrire la valeur littérale du prune dans le
   fichier. Ici la flèche est la même partout et prend la couleur
   juste dans chaque section. */
.rds-select__chevron {
  flex: 0 0 auto;
  width: 12px;
  height: 8px;
  color: var(--rds-select-chevron);
  transition: transform var(--rds-transition);
}
.rds-select__button[aria-expanded="true"] .rds-select__chevron { transform: rotate(180deg); }

/* ── Menu ouvert ────────────────────────────────────────────── */

.rds-select__listbox {
  position: absolute;
  z-index: 30;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  margin: 0;
  padding: 0.3rem;
  list-style: none;
  max-height: min(288px, 45vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;

  background: var(--rds-select-panneau-bg);
  border: 1px solid var(--rds-select-panneau-trait);
  border-radius: var(--rds-select-panneau-radius);
  box-shadow: var(--rds-select-panneau-ombre);
}

/* Le panneau remonte au-dessus du champ quand le bas du viewport
   ne lui laisse pas la place (classe posée par le script). */
.rds-select--vers-le-haut .rds-select__listbox {
  top: auto;
  bottom: calc(100% + 6px);
}

.rds-select__listbox[hidden] { display: none; }

.rds-select__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  /* 40px de haut au minimum sur desktop, 44px sous 768px (cible
     tactile) — voir la requête média en fin de fichier. */
  min-height: 40px;
  padding: var(--rds-select-option-padding);
  border-radius: 3px;
  cursor: pointer;
  font-family: var(--rds-select-font);
  font-size: var(--rds-select-size);
  font-weight: var(--rds-select-weight);
  line-height: 1.35;
  color: var(--rds-select-color);
  transition: background-color var(--rds-transition), color var(--rds-transition);
}

/* Option survolée à la souris ou parcourue au clavier
   (`aria-activedescendant`) : mêmes repères visuels, pour que la
   navigation clavier ne soit pas un parent pauvre de la souris. */
.rds-select__option:hover,
.rds-select__option.is-active { background: var(--rds-select-option-survol-bg); }

/* La sélection ne repose PAS sur le seul fond : couleur d'accent et
   coche. Sans quoi elle deviendrait indiscernable de l'option
   simplement survolée. */
.rds-select__option[aria-selected="true"] {
  background: var(--rds-select-option-choisie-bg);
  color: var(--rds-select-option-choisie-color);
}
.rds-select__option[aria-selected="true"]::after {
  content: '\2713';
  flex: 0 0 auto;
  font-size: 0.8em;
  line-height: 1;
  opacity: 0.9;
}

/* L'option vide (« —Choisir une option— ») reste un choix légitime
   du <select> d'origine : on la garde, en texte secondaire. */
.rds-select__option--vide { color: var(--rds-select-color-vide); }

@media (max-width: 768px) {
  .rds-select__option { min-height: 44px; }
}

/* Contact Form 7 marque les champs refusés par sa validation : le
   composant doit porter la même alerte que le champ natif. */
.rds-select--invalide .rds-select__button { border-bottom-color: var(--rds-erreur); }

@media (prefers-reduced-motion: reduce) {
  .rds-select__button,
  .rds-select__chevron,
  .rds-select__option { transition: none; }
}