/* PhoneDroid — Recherche : le panneau (08/10/2026). Tout est préfixé .pdr pour ne rien toucher du thème. */
.pdr {
  --pdr-encre: #1f2a33; --pdr-doux: #66737f; --pdr-trait: #e4e8ec; --pdr-fond: #ffffff; --pdr-gris: #f5f7f9;
  --pdr-accent: var(--bs-primary, #2f6f8f); --pdr-rupture: #5d7f8f;
  position: fixed; inset: 0; z-index: 2000; display: none; font-family: inherit; color: var(--pdr-encre);
}
.pdr--ouvert { display: block; }
html.pdr-bloque, html.pdr-bloque body { overflow: hidden; }
.pdr__fond { position: absolute; inset: 0; background: rgba(20, 28, 35, .35); }
.pdr__panneau {
  position: relative; background: var(--pdr-fond); max-height: 100vh; overflow-y: auto; overscroll-behavior: contain;
  padding: 18px max(16px, 3vw) 26px; box-shadow: 0 12px 40px rgba(0, 0, 0, .18);
}
.pdr__barre { display: flex; align-items: center; gap: 12px; border-bottom: 2px solid var(--pdr-accent); padding: 6px 2px 10px; }
.pdr__loupe, .pdr__fermer svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; flex: none; }
.pdr__champ { flex: 1; border: 0; outline: 0; font-size: 18px; padding: 6px 0; background: transparent; color: inherit; min-width: 0; }
.pdr__champ::-webkit-search-cancel-button { display: none; }
.pdr__fermer { border: 0; background: none; color: var(--pdr-doux); padding: 6px; border-radius: 6px; cursor: pointer; }
.pdr__fermer:hover, .pdr__fermer:focus-visible { color: var(--pdr-encre); background: var(--pdr-gris); }

.pdr__recentes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; font-size: 13px; }
.pdr__etiquette { color: var(--pdr-doux); font-weight: 600; margin-right: 2px; }
.pdr__pastille { display: inline-flex; align-items: center; border: 1px solid var(--pdr-trait); border-radius: 999px; overflow: hidden; }
.pdr__pastille-q, .pdr__pastille-x { border: 0; background: none; padding: 4px 10px; cursor: pointer; color: var(--pdr-encre); font-size: 13px; }
.pdr__pastille-x { padding: 4px 9px 4px 2px; color: var(--pdr-doux); font-size: 15px; line-height: 1; }
.pdr__pastille:hover { border-color: var(--pdr-accent); }
.pdr__effacer { border: 0; background: none; color: var(--pdr-accent); cursor: pointer; font-size: 13px; padding: 4px 6px; }

.pdr__corps { display: grid; grid-template-columns: 200px 1fr; gap: 28px; margin-top: 20px; }
.pdr__titre-cote, .pdr__titre { font-size: 15px; font-weight: 700; margin: 0 0 12px; color: var(--pdr-encre); }
.pdr__cote ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.pdr__populaire { border: 0; background: none; padding: 5px 0; text-align: left; cursor: pointer; color: var(--pdr-encre); font-size: 14px; }
.pdr__populaire:hover, .pdr__populaire:focus-visible { color: var(--pdr-accent); text-decoration: underline; }

.pdr__grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.pdr__carte { display: flex; flex-direction: column; border: 1px solid var(--pdr-trait); border-radius: 8px; background: #fff;
  transition: box-shadow .15s ease, border-color .15s ease; min-width: 0; }
.pdr__carte:hover { border-color: #cfd6dc; box-shadow: 0 6px 18px rgba(0, 0, 0, .07); }
.pdr__lien { display: block; color: inherit; text-decoration: none; padding: 12px 12px 4px; }
.pdr__image { position: relative; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; }
.pdr__image img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pdr__badge { position: absolute; top: 0; left: 0; background: var(--pdr-rupture); color: #fff; font-size: 11px; padding: 3px 7px; border-radius: 4px; }
.pdr__badge--bientot { background: #2f6f8f; }
.pdr__nom { font-size: 13.5px; font-weight: 500; line-height: 1.35; margin: 10px 0 0; min-height: 2.7em; color: var(--pdr-encre);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pdr__pied { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 12px 12px; margin-top: auto; }
.pdr__prix { font-weight: 700; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.pdr__panier { flex: none; width: 38px; height: 34px; border: 0; border-radius: 6px; background: var(--pdr-accent); color: #fff; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; }
.pdr__panier svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pdr__panier:hover { filter: brightness(1.08); }
.pdr__panier:disabled { opacity: .6; cursor: wait; }
.pdr__panier--ok { background: #2e7d4f; }
/* Les recommandés : une seule rangée qui défile, comme chez Doofinder */
.pdr__defile { position: relative; }
.pdr__grille--rang { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(170px, 190px);
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 2px; }
.pdr__grille--rang::-webkit-scrollbar { display: none; }
.pdr__grille--rang .pdr__carte { scroll-snap-align: start; }
.pdr__fleches { position: absolute; inset: 0; pointer-events: none; display: flex; justify-content: space-between; align-items: center; }
.pdr__fleches[hidden] { display: none; }
.pdr__fleche { pointer-events: auto; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--pdr-trait); background: #fff;
  color: var(--pdr-encre); font-size: 22px; line-height: 1; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, .12); margin: 0 -14px; }
.pdr__fleche:hover { border-color: var(--pdr-accent); color: var(--pdr-accent); }
.pdr__tout { display: inline-block; margin-top: 16px; font-weight: 600; color: var(--pdr-accent); }
.pdr__aide { color: var(--pdr-doux); grid-column: 1 / -1; margin: 0; }
.pdr__aide p { margin: 0 0 10px; }
.pdr__aide-pastilles { display: flex; flex-wrap: wrap; gap: 8px; }
.pdr__populaire--pastille { border: 1px solid var(--pdr-trait); border-radius: 999px; padding: 5px 12px; font-size: 13px; }
.pdr__populaire--pastille:hover { border-color: var(--pdr-accent); text-decoration: none; }
.pdr button:focus-visible, .pdr a:focus-visible { outline: 2px solid var(--pdr-accent); outline-offset: 2px; }

@media (max-width: 767px) {
  .pdr__panneau { height: 100vh; padding: 12px 16px 20px; }
  .pdr__corps { grid-template-columns: 1fr; gap: 18px; }
  .pdr__cote ul { display: flex; flex-wrap: wrap; gap: 6px; }
  .pdr__populaire { border: 1px solid var(--pdr-trait); border-radius: 999px; padding: 4px 10px; font-size: 13px; }
  .pdr__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .pdr--frappe .pdr__cote, .pdr--frappe .pdr__recentes { display: none; }
  .pdr__lien { padding: 10px 10px 2px; }
  .pdr__pied { padding: 4px 10px 10px; }
}
@media (prefers-reduced-motion: reduce) { .pdr__carte { transition: none; } }