/* Annuaires (associations, commerces et artisans) — reprennent la recherche, les filtres de catégories et la carte du
   module « carte interactive » : rq-carte__outils, rq-filtres-cats / rq-filtre-cat et rq-pastille-cat (carte.css). */
.rq-annuaire { display: flex; flex-direction: column; gap: 22px; font-family: var(--font-body); color: var(--bleu-nuit); }
.rq-annuaire__outils { flex-wrap: wrap; }
.rq-annuaire__grille { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 28px; align-items: start; }
.rq-annuaire__carte { position: sticky; top: calc(130px + var(--rq-alerte-h, 0px)); display: flex; flex-direction: column; gap: 10px; }
.rq-annuaire__leaflet { height: var(--rq-annuaire-hauteur, 460px); border: 1px solid var(--bordure); background: var(--brume); }
.rq-annuaire__note { margin: 0; font-size: 14px; line-height: 20px; color: var(--gris-texte); }

.rq-annuaire__compte { margin: 0 0 12px; font-family: var(--font-alt); font-weight: 700; font-size: 14px; letter-spacing: .5px; text-transform: uppercase; color: var(--gris-texte); }
.rq-annuaire__item { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; align-items: start; padding: 16px 0; border-top: 1px solid var(--bordure); }
.rq-annuaire__item:last-child { border-bottom: 1px solid var(--bordure); }
.rq-annuaire__item.est-ouvert { background: var(--brume); padding: 16px 18px; border-top-color: transparent; }
.rq-annuaire__logo, .rq-annuaire__picto { display: grid; place-content: center; width: 64px; height: 64px; border-radius: 6px; overflow: hidden; }
.rq-annuaire__picto .rq-pastille-cat { --rq-pastille: 52px; }
.rq-annuaire__logo { background: var(--blanc); border: 1px solid var(--bordure); padding: 6px; }
.rq-annuaire__logo img { display: block; max-width: 100%; max-height: 50px; width: auto; height: auto; object-fit: contain; }
.rq-annuaire__corps { min-width: 0; }
.rq-annuaire__nom { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 25px; color: var(--encre); }
.rq-annuaire__nom button { width: 100%; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.rq-annuaire__nom button:hover { color: var(--rouge); }
.rq-annuaire__nom button:focus-visible { outline: 2px solid var(--rouge); outline-offset: 3px; }
.rq-annuaire__nom button::after { content: "+"; float: right; margin-left: 12px; font-family: var(--font-alt); color: var(--rouge); }
.rq-annuaire__item.est-ouvert .rq-annuaire__nom button::after { content: "–"; }
.rq-annuaire__type { margin: 4px 0 0; font-family: var(--font-alt); font-weight: 700; font-size: 13px; letter-spacing: .4px; text-transform: uppercase; color: var(--rouge); }
.rq-annuaire__desc { margin: 8px 0 0; font-size: 16px; line-height: 23px; color: var(--bleu-nuit); }
.rq-annuaire__detail { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 24px; margin: 14px 0 0; font-size: 15px; line-height: 22px; }
.rq-annuaire__detail > div { display: contents; }
.rq-annuaire__detail dt { padding: 6px 0; font-family: var(--font-alt); font-weight: 700; color: var(--encre); }
.rq-annuaire__detail dd { padding: 6px 0; margin: 0; color: var(--gris-texte); }
.rq-annuaire__detail a { color: var(--encre); }
.rq-annuaire__vide { margin: 0; padding: 24px 0; color: var(--gris-texte); }

@media (max-width: 1455px) { .rq-annuaire__grille { grid-template-columns: minmax(0, 1fr) 340px; gap: 22px; } }
@media (max-width: 767px) {
  .rq-annuaire__grille { grid-template-columns: minmax(0, 1fr); }
  /* relative : le bouton « Activer le déplacement » (position absolue) reste sur la carte au lieu de flotter sur le chapô */
  .rq-annuaire__carte { position: relative; top: auto; order: -1; }
  .rq-annuaire__leaflet { height: min(52vh, 380px); }
  .rq-annuaire__detail { grid-template-columns: minmax(0, 1fr); }
  .rq-annuaire__detail > div { display: block; padding: 6px 0; }
  .rq-annuaire__detail dt, .rq-annuaire__detail dd { display: block; padding: 0; }
}

/* Actions d'une fiche dépliée : « Voir la fiche » puis les points de contact, chacun avec son icône.
   Les icônes sont des masques CSS (même procédé que le bouton « Feuilleter » du kiosque) : un seul
   fichier, la couleur suit le texte, rien à charger. */
.rq-annuaire__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.rq-annuaire__fiche { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 16px; border-radius: var(--radius-btn); background: var(--rouge); font-family: var(--font-alt); font-weight: 700; font-size: 14px; color: var(--blanc); text-decoration: none; transition: background-color 150ms ease; }
.rq-annuaire__fiche::after { content: ""; width: 14px; height: 14px; background: currentColor; -webkit-mask: var(--rq-ico-fleche) center / contain no-repeat; mask: var(--rq-ico-fleche) center / contain no-repeat; }
.rq-annuaire__fiche:hover { background: var(--rouge-fonce); color: var(--blanc); }
.rq-annuaire__fiche:focus-visible, .rq-contact:focus-visible { outline: 2px solid var(--rouge); outline-offset: 3px; }

.rq-contact { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; border: 1.5px solid var(--bordure); border-radius: var(--radius-btn); background: var(--blanc); font-family: var(--font-body); font-weight: 600; font-size: 14px; line-height: 18px; color: var(--encre); text-decoration: none; transition: border-color 150ms ease, color 150ms ease; }
.rq-contact:hover { border-color: var(--rouge); color: var(--rouge); }
.rq-contact::before { content: ""; flex: 0 0 auto; width: 16px; height: 16px; background: currentColor; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }
.rq-contact--tel::before { -webkit-mask-image: var(--rq-ico-tel); mask-image: var(--rq-ico-tel); }
.rq-contact--mail::before { -webkit-mask-image: var(--rq-ico-mail); mask-image: var(--rq-ico-mail); }
.rq-contact--site::before { -webkit-mask-image: var(--rq-ico-site); mask-image: var(--rq-ico-site); }
/* logos officiels, en couleur (pas de masque) */
.rq-contact--facebook::before, .rq-contact--instagram::before { width: 18px; height: 18px; -webkit-mask: none; mask: none; background: center / contain no-repeat; }
.rq-contact--facebook::before { background-image: url(../icons/rs-facebook.svg); }
.rq-contact--instagram::before { background-image: url(../icons/rs-instagram.svg); }


@media (max-width: 767px) {
  .rq-annuaire__item { grid-template-columns: 48px minmax(0, 1fr); gap: 12px; }
  .rq-annuaire__logo, .rq-annuaire__picto { width: 48px; height: 48px; }
  .rq-annuaire__picto .rq-pastille-cat { --rq-pastille: 44px; }
  .rq-annuaire__logo img { max-height: 38px; }
}
/* Nom attaché à un numéro (« 06 … · Véronique Callet »), annuaire du 29/09/2026. Numéro et nom forment un seul texte (02/10) :
   le bouton les mettait en deux colonnes, et le numéro se coupait sur deux lignes sur téléphone. Le numéro est insécable,
   le nom passe à la ligne s’il manque de place. */
.rq-contact__txt { min-width: 0; padding: 8px 0; }
.rq-contact__num { white-space: nowrap; }
.rq-contact__qui, .rq-contact__sep { font-weight: 400; color: var(--gris-texte); }
.rq-contact__qui { white-space: nowrap; }
@media (max-width: 767px) {
  .rq-contact__sep { display: none; }
  /* nom sur sa ligne ; il peut se replier entre les mots (« Sandra Deblaere, cheffe de chœur » débordait en 320 px, 04/10) */
  .rq-contact__qui { display: block; white-space: normal; }
  .rq-contact { max-width: 100%; }
}