/* ═══════════════════════════════════════════════════════════════
   icones.css — Icônes Phosphor, pictos ronds, marqueurs du plan
   (voir js/icones.js et js/categories.js)
   ═══════════════════════════════════════════════════════════════ */
:root {
  --mp-bleu: #075A99;   /* bleu Moirans Pratique */
  --mp-or:   #FDBA25;   /* jaune / or Moirans Pratique */
}

/* ── Icône en ligne : suit la taille et la couleur du texte ── */
.ico {
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  vertical-align: -0.24em;
  fill: currentColor;
  flex-shrink: 0;
  overflow: visible;
  pointer-events: none;
}
.ico-sm { width: 1em; height: 1em; vertical-align: -0.14em; }
.ico-lg { width: 1.5em; height: 1.5em; vertical-align: -0.35em; }

/* Pastilles de couleur (ex-émojis 🟢🟡🔴…) : un rond plein plus petit */
.ico-c-green, .ico-c-yellow, .ico-c-red, .ico-c-orange, .ico-c-dark, .ico-c-brown {
  width: .72em; height: .72em; vertical-align: -0.02em;
}
.ico-c-green  { color: #4ade80; }
.ico-c-yellow { color: #fbbf24; }
.ico-c-red    { color: #f87171; }
.ico-c-orange { color: #fb923c; }
.ico-c-dark   { color: #6b7280; }
.ico-c-brown  { color: #a3703a; }
.ico-c-gold   { color: #fbbf24; }
.ico-c-silver { color: #cbd5e1; }
.ico-c-bronze { color: #d08a4e; }

/* Icônes posées seules dans un conteneur qui fixait la taille de l'émoji
   par font-size : l'icône reprend cette taille. */
.empty-icon .ico,
.resto-img-placeholder .ico,
.resto-sheet-img-ph .ico,
.agenda-card-img-ph .ico,
.mag-card-cover-ph .ico,
.today-media-ph .ico { width: 1em; height: 1em; vertical-align: middle; opacity: .85; }

/* ── Picto rond de l'interface : cercle bleu, anneau or, icône
      blanche (duotone) — l'icône passe en or quand l'entrée est active. */
.picto {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--mp-bleu);
  box-shadow: inset 0 0 0 1.6px var(--mp-or);
  color: #fff;
  flex: 0 0 auto;
  line-height: 0;
  transition: color .18s ease;
}
.picto .ico { width: 64%; height: 64%; vertical-align: 0; }
.picto--anneau-fin { box-shadow: inset 0 0 0 1.5px var(--mp-or); }

.nav-btn.active .picto,
.mobile-menu-item.active .picto,
.picto.is-actif { color: var(--mp-or); }
@media (hover: hover) {
  .nav-btn:hover .picto,
  .mobile-menu-item:hover .picto { color: var(--mp-or); }
}

/* Tailles selon l'emplacement (remplacent les <img> de 20 à 42 px) */
.nav-icon.picto { width: 22px; height: 22px; box-shadow: inset 0 0 0 1.4px var(--mp-or); }
.mobile-bottom-nav .nav-icon.picto { width: 21px; height: 21px; }
.mobile-menu-icon .picto { width: 24px; height: 24px; box-shadow: inset 0 0 0 1.5px var(--mp-or); }
.card-icon .picto { width: 28px; height: 28px; box-shadow: inset 0 0 0 2px var(--mp-or); }
.card-icon .picto--24 { width: 24px; height: 24px; }
.picto--42 { width: 42px; height: 42px; box-shadow: inset 0 0 0 3px var(--mp-or); }
.picto--48 { width: 48px; height: 48px; box-shadow: inset 0 0 0 3px var(--mp-or); }

/* ── Marqueur du plan « pétale » ── */
.pin-wrap { background: none; border: 0; }
.pin {
  position: relative;
  width: 40px;
  height: 46px;
  cursor: pointer;
  transform-origin: 50% 93%;
  transition: transform .18s cubic-bezier(.2,.9,.3,1.3);
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.28));
}
.pin-forme { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pin-ombre { fill: rgba(0,0,0,.22); }
.pin-corps {
  fill: var(--mp-bleu);
  stroke: var(--pin);
  stroke-width: 2;
  stroke-linejoin: round;
}
.pin-ico {
  position: absolute;
  left: 50%;
  top: 20px;            /* = centre de la tête ronde (voir categories.js) */
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  color: var(--pin);
  vertical-align: 0;
}
.leaflet-marker-icon:hover .pin,
.leaflet-marker-icon:focus-visible .pin { transform: scale(1.08); }
/* Lieu dont la fiche est ouverte : un peu plus grand, anneau or */
.pin--actif { transform: scale(1.18); }
.pin--actif .pin-corps { stroke: var(--mp-or); stroke-width: 2.6; }
.pin--actif .pin-ico { color: #fff; }

/* ── Pastille ronde de catégorie (tête du marqueur en miniature) ── */
.cat-pastille {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--mp-bleu);
  box-shadow: inset 0 0 0 1.5px var(--pin, var(--mp-or));
  color: var(--pin, #fff);
  flex: 0 0 auto;
  line-height: 0;
}
.cat-pastille .ico { width: 15px; height: 15px; vertical-align: 0; }
.cat-pastille--tout { --pin: #e2e8f0; }
.cat-pastille--grande { width: 48px; height: 48px; box-shadow: inset 0 0 0 2px var(--pin); }
.cat-pastille--grande .ico { width: 24px; height: 24px; }
.poi-sheet-icon { background: none !important; border: 0 !important; }

/* ── Plan : menu de filtre sur mesure ── */
.carte-filtre { pointer-events: auto; }
.carte-filtre-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  height: 100%;
  padding: 0 14px 0 8px;
  border: 0;
  border-radius: 22px;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}
.carte-filtre-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.carte-filtre-icone {
  position: static;
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  font-size: 17px;
  color: var(--text2);
  flex: 0 0 28px;
}
.carte-filtre-txt { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.carte-filtre-chevron { position: static; display: inline-flex; font-size: 14px; color: var(--text2); transition: transform .18s; }
.carte-filtre.is-ouvert .carte-filtre-chevron { transform: rotate(180deg); }
.carte-filtre.is-ouvert { border-color: var(--blue); }
.carte-filters.is-actif .carte-filtre-btn { color: var(--blue); }

.carte-filtre-liste {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: max(100%, 280px);
  max-width: calc(100vw - 20px);
  max-height: min(62vh, 440px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px;
  background: rgba(21,24,38,.98);
  border: 1px solid var(--border2);
  border-radius: 16px;
  box-shadow: 0 12px 34px rgba(0,0,0,.5);
  z-index: 5;
}
.carte-filtre-liste[hidden] { display: none; }
.carte-filtre-groupe {
  padding: 10px 10px 4px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text3);
}
.carte-filtre-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 6px 10px 6px 6px;
  border: 0;
  border-radius: 12px;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
.carte-filtre-opt:hover,
.carte-filtre-opt:focus-visible { background: var(--surface2); outline: none; }
.carte-filtre-opt[aria-selected="true"] { background: rgba(96,165,250,.14); color: var(--blue); font-weight: 600; }
.carte-filtre-opt-txt { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.carte-filtre-nb {
  flex: 0 0 auto;
  min-width: 26px;
  padding: 1px 7px;
  border-radius: 10px;
  background: var(--surface2);
  color: var(--text2);
  font-family: var(--font-m);
  font-size: 11.5px;
  text-align: center;
}
.carte-recherche-icone { display: inline-flex; color: var(--text2); }
.carte-recherche-effacer, .carte-filtre-reset { display: inline-grid; place-items: center; }
.carte-filtre-reset[hidden], .carte-recherche-effacer[hidden] { display: none; }
.carte-recherche-item .cat-pastille { width: 30px; height: 30px; }

/* FAB « Où suis-je ? » */
.fab { color: var(--text); }
.fab .ico { width: 22px; height: 22px; vertical-align: 0; }
.fab.active { color: var(--green); }

/* Emplacements particuliers des pictos */
.home-folded-btn .picto { width: 22px; height: 22px; }
.wizard-install-head .picto { flex: 0 0 auto; }

/* Teinte des icônes d'en-tête : couleur d'accent de la carte (bord gauche) */
.service-card[style*="--red"] .service-header-icon    { color: var(--red); }
.service-card[style*="--green"] .service-header-icon  { color: var(--green); }
.service-card[style*="--yellow"] .service-header-icon { color: var(--yellow); }
.service-card[style*="--blue"] .service-header-icon   { color: var(--blue); }
.service-card[style*="--orange"] .service-header-icon { color: var(--orange); }
.service-card[style*="--purple"] .service-header-icon { color: var(--purple); }
.service-card[style*="--teal"] .service-header-icon   { color: var(--teal); }
.card--accent-red .card-icon > .ico    { color: var(--red); }
.card--accent-green .card-icon > .ico  { color: var(--green); }
.card--accent-yellow .card-icon > .ico { color: var(--yellow); }
.card--accent-blue .card-icon > .ico   { color: var(--blue); }
.card--accent-orange .card-icon > .ico { color: var(--orange); }
.card--accent-purple .card-icon > .ico { color: var(--purple); }
/* Titres de page : petite touche or Moirans Pratique */
.section-title > .ico { color: var(--mp-or); }
.ico-orange { color: var(--orange, #fb923c); }

/* ── Admin : sélecteur d'icône d'un commerce ── */
.icone-picker { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.icone-picker-btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 8px 14px 8px 8px;
  background: var(--surface2, #1c2033);
  border: 1px solid var(--border2, #323755);
  border-radius: 14px;
  color: var(--text, #eef0f8);
  font: inherit; font-size: 13.5px; text-align: left; cursor: pointer;
}
.icone-picker-btn:hover { border-color: var(--blue, #60a5fa); }
.icone-picker-btn .cat-pastille { width: 40px; height: 40px; box-shadow: inset 0 0 0 2.5px var(--pin); }
.icone-picker-btn .cat-pastille .ico { width: 21px; height: 21px; }
.icone-picker-txt { font-weight: 600; }
.icone-picker-act { color: var(--blue, #60a5fa); font-size: 12.5px; }
.icone-picker-btn[aria-expanded="true"] .icone-picker-act::after { content: ' ▴'; }
#c-icone-reset[hidden] { display: none; }
.icone-grille {
  margin-top: 12px; padding: 12px 14px 14px;
  background: var(--bg2, #111420);
  border: 1px solid var(--border, #252a40);
  border-radius: 14px;
  max-height: 380px; overflow-y: auto;
}
.icone-grille[hidden] { display: none; }
.icone-theme {
  margin: 10px 0 6px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text3, #4e5470);
}
.icone-theme:first-child { margin-top: 0; }
.icone-liste { display: flex; flex-wrap: wrap; gap: 6px; }
.icone-choix {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px; padding: 0;
  border-radius: 50%;
  background: var(--mp-bleu);
  border: 0;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--pin, #fff) 45%, transparent);
  color: var(--pin, #fff);
  cursor: pointer;
  transition: transform .12s, box-shadow .12s;
}
.icone-choix .ico { width: 20px; height: 20px; vertical-align: 0; }
.icone-choix:hover, .icone-choix:focus-visible { transform: scale(1.1); box-shadow: inset 0 0 0 2px var(--pin, #fff); outline: none; }
.icone-choix[aria-pressed="true"] { box-shadow: inset 0 0 0 3px var(--mp-or), 0 0 0 2px rgba(253,186,37,.35); }

/* Admin : pastilles dans les listes de lieux et commerçants */
.admin-cat-pastille { width: 36px; height: 36px; }
.admin-cat-pastille .ico { width: 18px; height: 18px; }