/* Annuaire (carte, fiches, demande rapide, revendication, retrait) — groupe « directory ».
   Complète app.css (chargée avant) avec ses jetons ; classes préfixées pg-directory-. Aucun style en ligne (CSP). */

/* ---------- En-tête ---------- */
.pg-directory-head { margin-bottom: 22px; }
/* Titres longs (allemand) sur téléphone : ils se coupent au lieu d'élargir la page. */
.pg-directory h1, .pg-directory-flow h1 { overflow-wrap: anywhere; hyphens: auto; }

/* ---------- Barre de recherche (maquette A : pilule à segments, bouton dégradé) ---------- */
.pg-directory-search {
  display: flex; align-items: center; margin: 0 0 28px; padding: 8px;
  background: #fff; border: 1px solid var(--line-2); border-radius: 999px; box-shadow: var(--shadow-lg);
}
.pg-directory-seg {
  flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 10px 22px;
  border-radius: 999px; cursor: text; transition: background-color .2s, box-shadow .2s;
}
.pg-directory-seg-q { flex: 1.7; }
.pg-directory-seg:hover { background: var(--soft); }
.pg-directory-seg:focus-within { background: #fff; box-shadow: 0 0 0 2px var(--ink), var(--shadow-lg); }
.pg-directory-seg-k { font-size: 12.5px; font-weight: 800; letter-spacing: .01em; color: var(--ink); }
.pg-directory-seg input,
.pg-directory-seg select {
  width: 100%; min-height: 0; margin: 0; padding: 2px 0 0; border: 0; border-radius: 0; box-shadow: none;
  background-color: transparent; color: var(--ink); font-size: 15px; text-overflow: ellipsis;
}
.pg-directory-seg select { padding-right: 26px; background-position: right 0 center; cursor: pointer; }
.pg-directory-seg input:focus, .pg-directory-seg select:focus { box-shadow: none; }
.pg-directory-seg :focus-visible { outline: none; }
.pg-directory-seg input::-webkit-search-decoration { -webkit-appearance: none; }
.pg-directory-sep { flex: none; width: 1px; height: 34px; background: var(--line); }

/* « Vérifiés uniquement » : case à cocher en pastille (la case reste focalisable au clavier). */
.pg-directory-only { position: relative; flex: none; display: inline-flex; margin: 0 8px; cursor: pointer; }
.pg-directory-only input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pg-directory-only span {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 10px 15px;
  border: 1.5px solid var(--line-2); border-radius: 999px; background: #fff;
  color: var(--ink-2); font-size: 14px; font-weight: 700; white-space: nowrap;
  transition: background-color .2s, border-color .2s, color .2s;
}
.pg-directory-only span .ico { width: 0; opacity: 0; transition: width .2s, opacity .2s; }
.pg-directory-only:hover span { border-color: var(--ink); color: var(--ink); }
.pg-directory-only input:checked + span { background: var(--mint-soft); border-color: var(--mint); color: var(--mint-ink); }
.pg-directory-only input:checked + span .ico { width: 13px; opacity: 1; }
.pg-directory-only input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 2px; }

.pg-directory-go {
  flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 58px; padding: 0 26px 0 20px;
  border: 0; border-radius: 999px; background: var(--grad); background-size: 140% 100%; color: #fff;
  font: inherit; font-size: 16px; font-weight: 700; cursor: pointer;
  box-shadow: 0 10px 24px rgba(238, 61, 89, .32); transition: background-position .4s, transform .2s;
}
.pg-directory-go:hover { background-position: 100% 0; }
.pg-directory-go:active { transform: scale(.97); }
.pg-directory-go .ico { width: 20px; height: 20px; stroke-width: 2.6; }

/* ---------- Carte en tuiles (un canton = une case, teinte selon le nombre réel de fiches) ---------- */
.pg-directory-map { margin-bottom: 32px; }
.pg-directory-map > * { min-width: 0; } /* la rangée de cantons qui défile ne doit pas élargir la grille */
.pg-directory-tiles text { pointer-events: none; font-variant-numeric: tabular-nums; }
.pg-directory-tiles .tile { transition: stroke .2s, filter .2s; }
.pg-directory-tiles a:hover .tile { stroke: #1F1F1F; stroke-width: 2.5; }
.pg-directory-tiles a:focus-visible .tile { stroke: #1F1F1F; stroke-width: 3.5; }
.pg-directory-tiles a:focus-visible { outline: none; }
.pg-directory .tile-legend { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin: 10px 0 0; padding: 0; color: var(--ink-2); font-size: 13px; }
.pg-directory .tile-legend li { display: inline-flex; align-items: center; gap: 6px; }
.pg-directory .tile-legend-sw { width: 14px; height: 14px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.pg-directory .tile-legend-t0 { background: #F3F0EC; }
.pg-directory .tile-legend-t1 { background: #FFE4DC; }
.pg-directory .tile-legend-t2 { background: #FFC6B8; }
.pg-directory .tile-legend-t3 { background: #F7937F; }
.pg-directory .tile-legend-t4 { background: #C8323A; }

/* ---------- En-tête des résultats : compteur, filtres actifs, tri ---------- */
.pg-directory-results {
  display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 16px 24px;
  margin: 0 0 18px; padding-bottom: 16px; border-bottom: 1px solid var(--line);
}
.pg-directory-results h2 { margin: 0; }
.pg-directory-results-t { min-width: 0; }
.pg-directory-results-t > p { margin: 4px 0 0; }

.pg-directory-chips { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pg-directory-chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; max-width: 100%; padding: 6px 8px 6px 14px;
  border-radius: 999px; background: var(--ink); color: #fff; font-size: 14px; font-weight: 700; text-decoration: none;
  overflow-wrap: anywhere; transition: background-color .2s;
}
.pg-directory-chip::after {
  content: "×"; flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: rgba(255, 255, 255, .22); font-size: 16px; line-height: 1;
}
.pg-directory-chip:hover { background: #000; color: #fff; }
.pg-directory-clear { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 8px; color: var(--ink-2); font-size: 14px; font-weight: 700; }
.pg-directory-clear:hover { color: var(--ink); }

.pg-directory-sort { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 5px; border-radius: 999px; background: #EFEFEF; }
.pg-directory-sort-k { padding: 0 6px 0 10px; font-size: 13px; font-weight: 800; color: var(--ink-2); }
.pg-directory-sort a { padding: 8px 15px; border-radius: 999px; color: var(--ink-2); font-size: 14px; font-weight: 600; text-decoration: none; transition: background-color .2s, color .2s; }
.pg-directory-sort a:hover { background: rgba(255, 255, 255, .7); color: var(--ink); }
.pg-directory-sort a[aria-current] { background: #fff; color: var(--ink); font-weight: 700; box-shadow: var(--shadow-sm); }

.pg-directory-cities { margin: 0 0 20px; }

/* ---------- Fiches : une seule action principale, pas de bavardage répété ---------- */
/* Les cartes gardent leur hauteur naturelle : plus de grand blanc sous une fiche sans coordonnées. */
.pg-directory-grid { align-items: start; }
.pg-directory-card { position: relative; }
.pg-directory-card:hover { transform: translateY(-2px); }
.pg-directory-card:has(:focus-visible) { box-shadow: 0 0 0 3px var(--ink), var(--shadow); }
.pg-directory .listing-ico, .pg-directory-flow .listing-ico { position: relative; font-size: 17px; letter-spacing: -.02em; }
.pg-directory .listing-ico.is-checked, .pg-directory-flow .listing-ico.is-checked { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--mint); }
.pg-directory .listing-ico-check, .pg-directory-flow .listing-ico-check {
  position: absolute; right: -6px; bottom: -6px; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; background: var(--mint-ink); color: #fff; border: 2px solid #fff;
}
.pg-directory .listing-ico-check .ico, .pg-directory-flow .listing-ico-check .ico { width: 12px; height: 12px; stroke-width: 3.2; }
.pg-directory .listing-actions .listing-quote { flex: 1 1 100%; justify-content: center; }
/* Action principale de la fiche, en teinte douce : un seul bouton en dégradé par écran (celui de la page). */
.pg-directory .listing-actions .btn.listing-quote { background: var(--coral-soft); color: var(--coral-ink); border: 1.5px solid #F7C9C0; box-shadow: none; }
.pg-directory .listing-actions .btn.listing-quote:hover { background: #FFE0D9; color: var(--coral-ink); border-color: var(--coral-ink); box-shadow: none; }
.pg-directory .listing-more { margin: -4px 0 0; font-size: 14px; font-weight: 700; }
.pg-directory .listing-more a { display: inline-flex; align-items: center; gap: 4px; color: var(--mint-ink); }
.pg-directory .listing-foot { margin-top: 0 !important; padding-top: 10px; font-size: 13px; }
.pg-directory .listing-foot a { color: var(--ink-3); }
.pg-directory .listing-foot a:hover { color: var(--ink); }

/* Mise en avant payée : bandeau ambre à part, jamais vert (le vert est réservé à « Vérifié »). */
.pg-directory-card.is-sponsored { border-color: #F1D493; background: linear-gradient(180deg, var(--sun-soft) 0, #fff 92px); }
.pg-directory .listing-sponsor { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: -4px 0 0 !important; color: var(--sun-ink); font-size: 12.5px; font-weight: 700; }
.pg-directory .badge.listing-sponsor-badge { background: #fff; color: var(--sun-ink); box-shadow: 0 0 0 1.5px #E3B64F inset; }
.pg-directory .badge.listing-sponsor-badge .ico { fill: currentColor; }

/* Une seule ligne pour les détectives, en bas de liste. */
.pg-directory .listing-claim { display: flex; align-items: flex-start; gap: 10px; max-width: 820px; margin: 18px 0 0; padding: 14px 16px; border-radius: var(--r-md); background: var(--mint-soft); color: var(--ink); font-size: 14.5px; }
.pg-directory .listing-claim .ico { margin-top: 2px; color: var(--mint-ink); flex: none; }
.pg-directory .listing-claim a { font-weight: 800; color: var(--ink); }

/* ---------- Aucun résultat ---------- */
.pg-directory-empty {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 32px; align-items: center; padding: 32px 36px;
  border: 1px dashed var(--line-2); border-radius: var(--r-lg); background: linear-gradient(170deg, #FFF8F5 0%, #FFFFFF 70%);
}
.pg-directory-empty-illus { width: 160px; height: auto; }
.pg-directory-empty h3 { margin: 0 0 14px; font-size: 21px; }
.pg-directory-empty p { margin: 0 0 12px; }
.pg-directory-empty p:last-child { margin: 6px 0 0; }
.pg-directory-ways { margin: 0 0 14px; }

.pg-directory-join { display: flex; align-items: flex-start; gap: 8px; margin: 16px 0 0 !important; padding-top: 14px; border-top: 1px solid var(--line); font-size: 14.5px; }
.pg-directory-join .ico { margin-top: 2px; color: var(--mint-ink); flex: none; }
.pg-directory-join a { font-weight: 800; }

/* ---------- Légende des badges (seulement ceux qui figurent sur la page) ---------- */
.pg-directory .listing-legend { list-style: none; max-width: 820px; margin: 28px 0 0; padding: 18px 20px; display: grid; gap: 10px; background: var(--soft); border-radius: var(--r-md); }
.pg-directory .listing-legend li { display: grid; grid-template-columns: 9rem minmax(0, 1fr); align-items: start; gap: 6px 14px; color: var(--ink-2); font-size: 14px; }
.pg-directory .listing-legend .badge { justify-self: start; }
.pg-directory .source-note { margin-top: 16px; }

/* ---------- Parcours guidés : contenu + fiche concernée (collante) ---------- */
.pg-directory-flow { max-width: 1080px; margin: 0 auto; }
.pg-directory-flow-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; align-items: start; }
.pg-directory-flow-main > h1 { margin-bottom: 12px; }
.pg-directory-flow-main > .lead-sm { margin-bottom: 26px; }
.pg-directory-flow-main > .alert { margin-bottom: 22px; }
.pg-directory-summary { position: sticky; top: 104px; display: flex; flex-direction: column; gap: 14px; margin: 0; }
.pg-directory-summary > * { margin: 0; }
.pg-directory-summary .pg-directory-summary-t { margin: 0; font-size: 18px; overflow-wrap: anywhere; }
.pg-directory-summary .listing-actions .btn-sm { flex: 1 1 auto; }

.pg-directory-steps { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 10px; }
.pg-directory-steps li { display: flex; align-items: flex-start; gap: 16px; padding: 16px 18px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); }
.pg-directory-step-n {
  flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: var(--grad); color: #fff; font-weight: 800; font-size: 16px; box-shadow: 0 6px 16px rgba(238, 61, 89, .26);
}
.pg-directory-steps strong { display: block; font-size: 16px; letter-spacing: -.01em; }
.pg-directory-steps p { margin: 2px 0 0; color: var(--ink-2); font-size: 14.5px; }

.pg-directory-ask { margin: 0 0 10px; font-weight: 800; }
.pg-directory-flow-main > .btns + .hint { margin-top: 18px; }
.pg-directory-claim { gap: 10px; }
.pg-directory-claim .hint { margin: 0; }

.pg-directory-note, .pg-directory-alt {
  display: flex; align-items: flex-start; gap: 10px; margin: 0 0 22px; padding: 12px 16px;
  border-radius: var(--r-sm); background: var(--mint-soft); color: var(--mint-ink); font-size: 14.5px; font-weight: 600;
}
.pg-directory-note .ico, .pg-directory-alt .ico { margin-top: 2px; }
.pg-directory-alt { margin: 18px 0 0; background: var(--sky-soft); color: var(--sky-ink); }
.pg-directory-alt a { color: inherit; font-weight: 800; }

/* Motif du retrait : cartes à choix. */
.pg-directory-reasons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pg-directory-reason {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; background: #fff;
  border: 1.5px solid var(--line-2); border-radius: var(--r-sm); font-size: 14.5px; line-height: 1.4; cursor: pointer;
  transition: border-color .2s, background-color .2s;
}
.pg-directory-reason input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--coral-ink); }
.pg-directory-reason:hover { border-color: #BDBDBD; }
.pg-directory-reason:has(input:checked) { border-color: var(--coral-ink); background: var(--coral-soft); }
.pg-directory-reason:has(input:focus-visible) { outline: 3px solid var(--ink); outline-offset: 2px; }

/* Confirmation (retrait envoyé). */
.pg-directory-done { padding: 24px 0; }
.pg-directory-done-ico {
  display: inline-grid; place-items: center; width: 80px; height: 80px; margin: 0 auto 18px; border-radius: 50%;
  background: var(--mint-soft); color: var(--mint-ink); animation: pg-directory-pop .5s var(--ease) both;
}
.pg-directory-done .lead-sm { margin: 0 auto 12px; }
@keyframes pg-directory-pop { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }

/* ---------- « Cette fiche vous concerne ? » : deux choix ---------- */
.pg-directory-choices { display: grid; gap: 12px; margin: 8px 0 0; }
.pg-directory-choice { display: flex; align-items: flex-start; gap: 16px; padding: 18px 20px; background: #fff; border: 1.5px solid var(--line-2); border-radius: var(--r-md); color: var(--ink); text-decoration: none; transition: border-color .2s, box-shadow .2s; }
.pg-directory-choice:hover { border-color: var(--ink); box-shadow: var(--shadow-sm); color: var(--ink); }
.pg-directory-choice strong { display: block; font-size: 16.5px; }
.pg-directory-choice .muted { display: block; margin-top: 2px; font-size: 14.5px; }
.pg-directory-choice-ico { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; }

/* ---------- Numéro révélé ---------- */
.pg-directory-phone { margin: 6px 0 14px; }
.pg-directory-phone .btn { font-size: 20px; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.pg-directory-phone-n { display: inline-flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 800; }
.pg-directory-alt-quote { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin: 26px 0 0; padding: 18px 20px; border: 1px dashed var(--line-2); border-radius: var(--r-md); }
.pg-directory-alt-quote p { margin: 0; flex: 1 1 260px; }

/* ---------- « Ma fiche » : chiffres réels, corrections ---------- */
.pg-directory-mine { display: grid; gap: 16px; }
.pg-directory-mine > * { margin: 0; }
.pg-directory-stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 10px; }
.pg-directory-stats li { display: grid; gap: 2px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--soft); min-width: 0; }
.pg-directory-stats strong { font-size: 26px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.pg-directory-stats span { overflow-wrap: anywhere; }
.pg-directory-stat-ico { color: var(--coral-ink); }
.pg-directory-edit { display: grid; gap: 4px; padding-top: 16px; border-top: 1px solid var(--line); }
.pg-directory-edit h3 { margin: 0 0 6px; font-size: 17px; }
.pg-directory-edit .btn { justify-self: start; }

/* ---------- Profil vérifié ---------- */
.pg-directory-profile-head { display: flex; align-items: flex-start; gap: 18px; margin: 0 0 22px; }
.pg-directory-profile-head .listing-ico { width: 64px; height: 64px; border-radius: 20px; font-size: 22px; }
.pg-directory-profile-head h1 { margin: 0 0 6px; }
.pg-directory-profile-sec { margin: 0 0 24px; }
.pg-directory-profile-sec h2 { margin: 0 0 10px; font-size: 19px; }
.pg-directory-bio { white-space: pre-line; color: var(--ink-2); }
.pg-directory-chiplist { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.pg-directory-chiplist li { padding: 6px 12px; border-radius: 999px; background: var(--soft); font-size: 14.5px; font-weight: 600; }
.pg-directory-chiplist a { color: var(--ink); }
.pg-directory-avg { display: flex; align-items: center; gap: 8px; }
.pg-directory-stars { color: #C98A0B; letter-spacing: 1px; }
.pg-directory-reviews { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 12px; }
.pg-directory-reviews li { padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; }
.pg-directory-reviews p, .pg-directory-reviews blockquote { margin: 0 0 6px; }
.pg-directory-reply { padding: 10px 12px; border-radius: var(--r-sm); background: var(--soft); font-size: 14.5px; }
.pg-directory-profile .pg-directory-summary .btn-lg { width: 100%; justify-content: center; }

/* ---------- Tablette et téléphone ---------- */
@media (max-width: 900px) {
  .pg-directory-flow-grid { grid-template-columns: 1fr; gap: 20px; }
  .pg-directory-summary { position: static; order: -1; }
}
@media (max-width: 860px) {
  .pg-directory-search { flex-direction: column; align-items: stretch; padding: 10px; border-radius: 28px; }
  .pg-directory-seg { padding: 12px 16px; border-radius: 18px; }
  .pg-directory-sep { width: auto; height: 1px; margin: 0 14px; }
  .pg-directory-only { margin: 8px 6px 0; }
  .pg-directory-only span { width: 100%; justify-content: center; }
  .pg-directory-go { height: 56px; margin-top: 8px; border-radius: 16px; }
  .pg-directory-empty { grid-template-columns: 1fr; gap: 16px; padding: 24px 20px; }
  .pg-directory-empty-illus { width: 120px; }
}
@media (max-width: 744px) {
  /* Cantons et villes : une rangée qui défile plutôt qu'un mur de pastilles. */
  .pg-directory-cantons, .pg-directory-cities {
    flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent);
  }
  .pg-directory-cantons { margin: 0 -14px 18px; padding: 2px 14px 8px; scroll-padding-inline: 14px; }
  .pg-directory-cities { margin: 0 -20px 18px; padding: 2px 20px 8px; scroll-padding-inline: 20px; }
  .pg-directory-cantons::-webkit-scrollbar, .pg-directory-cities::-webkit-scrollbar { display: none; }
  .pg-directory-cantons a, .pg-directory-cities a { flex: none; min-height: 40px; scroll-snap-align: start; }
  .pg-directory-results { align-items: stretch; }
  .pg-directory-sort { width: 100%; border-radius: 18px; }
  .pg-directory-sort a { flex: 1 1 auto; text-align: center; border-radius: 14px; }
  .pg-directory-sort-k { flex-basis: 100%; padding: 4px 10px 2px; }
  .pg-directory-reasons { grid-template-columns: 1fr; }
  .pg-directory-steps li { padding: 14px; gap: 12px; }
  .pg-directory-step-n { width: 32px; height: 32px; font-size: 14px; }
  .pg-directory .listing-legend li { grid-template-columns: 1fr; font-size: 13.5px; }
  .pg-directory .tile-legend { font-size: 12px; gap: 4px 10px; }
  .pg-directory-profile-head .listing-ico { width: 52px; height: 52px; font-size: 19px; }
}

/* ---------- Moins d'animations ---------- */
@media (prefers-reduced-motion: reduce) {
  .pg-directory-card:hover { transform: none; }
  .pg-directory-tiles .tile, .pg-directory-choice { transition: none; }
  .pg-directory-done-ico { animation: none; }
}

/* ---------- Impression : les fiches, sans les commandes ---------- */
@media print {
  .pg-directory-search, .pg-directory-map, .pg-directory-sort, .pg-directory-chips, .pg-directory-cities, .listing-pager { display: none !important; }
  .pg-directory-card { break-inside: avoid; }
}