/* marche.css — compléments communs aux pages « boutique » et « place de marché » (catégories, recherche,
   boutiques) : navigation Assimey, cartes de boutiques, fenêtre de contact, mode vitrine des petites boutiques.
   Se charge après boutique.css (mêmes variables, mêmes cartes produits). */

/* ------------------------------------------------ barre Assimey : retour à l'accueil, toujours visible */
.barre-assimey .liens { display: flex; align-items: center; gap: 16px; }
.barre-assimey .liens a { font-weight: 600; }
.barre-assimey .liens a.actif { color: #fff; }
@media (max-width: 680px) { .barre-assimey .liens { gap: 12px; } .barre-assimey .liens .masque { display: none; } }

/* ------------------------------------------------ en-tête de la place de marché */
.entete .logo-assimey { display: flex; align-items: center; flex-shrink: 0; }
.entete .logo-assimey img { height: 34px; width: auto; }
.entete .nav a { white-space: nowrap; }
.entete .nav a.actif { color: var(--nuit); font-weight: 700; }
.entete .lien-compte { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 12px; border-radius: 8px; font-weight: 600; color: var(--nuit); white-space: nowrap; }
.entete .lien-compte:hover { background: var(--fond); }
.panier-lien { position: relative; width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; color: var(--nuit); font-size: 19px; flex-shrink: 0; }
.panier-lien .nb { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--vert); color: #fff; font-size: 10.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
@media (max-width: 1100px) { .entete .lien-compte span { display: none; } }
@media (max-width: 680px) { .entete .btn-creer { display: none; } }

/* ------------------------------------------------ bandeau de catégorie */
.bandeau-cat { background: linear-gradient(120deg, var(--nuit) 0%, #1d3a5c 100%); color: #fff; }
.bandeau-cat .conteneur { display: flex; align-items: center; gap: 22px; padding-top: 30px; padding-bottom: 30px; }
.bandeau-cat .icone-cat { width: 72px; height: 72px; border-radius: 18px; background: rgba(163, 230, 53, .14); color: #a3e635; display: flex; align-items: center; justify-content: center; font-size: 30px; flex-shrink: 0; }
.bandeau-cat h1 { margin: 0 0 6px; font-size: 30px; font-weight: 800; }
.bandeau-cat p { margin: 0; color: #cbd5e1; max-width: 640px; }
.bandeau-cat .chiffres { margin-left: auto; display: flex; gap: 28px; }
.bandeau-cat .chiffres div { text-align: right; }
.bandeau-cat .chiffres b { display: block; font-size: 26px; font-weight: 800; color: #a3e635; }
.bandeau-cat .chiffres span { font-size: 12.5px; color: #cbd5e1; }
.rangee-cats { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 16px 0 4px; }
.rangee-cats::-webkit-scrollbar { display: none; }
.rangee-cats a { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border: 1px solid var(--bord); border-radius: 999px; background: #fff; font-size: 13px; font-weight: 600; color: var(--nuit); white-space: nowrap; }
.rangee-cats a i { color: var(--vert-f); }
.rangee-cats a span { color: var(--gris-2); font-weight: 500; }
.rangee-cats a.actif { background: var(--nuit); border-color: var(--nuit); color: #fff; }
.rangee-cats a.actif i, .rangee-cats a.actif span { color: #a3e635; }
.rangee-cats a:hover { border-color: var(--nuit); }
@media (max-width: 760px) {
  .bandeau-cat .conteneur { flex-wrap: wrap; padding-top: 20px; padding-bottom: 20px; gap: 14px; }
  .bandeau-cat .icone-cat { width: 54px; height: 54px; font-size: 22px; border-radius: 14px; }
  .bandeau-cat h1 { font-size: 22px; }
  .bandeau-cat .chiffres { margin-left: 0; width: 100%; }
  .bandeau-cat .chiffres div { text-align: left; }
}

/* ------------------------------------------------ filtres serveur (catégories, recherche) */
.cote form { display: flex; flex-direction: column; gap: 8px; }
.cote .prix-saisie { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cote .prix-saisie input { width: 100%; height: 36px; border: 1px solid var(--bord); border-radius: 8px; padding: 0 10px; font-size: 13px; }
.cote .btn { height: 36px; }
.cats a { width: 100%; display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 7px; font-size: 13px; color: var(--texte); }
.cats a i { width: 16px; color: var(--gris-2); font-size: 12px; }
.cats a span { margin-left: auto; font-size: 12px; color: var(--gris-2); }
.cats a:hover { background: var(--fond); }
.cats a.actif { background: var(--vert-doux); color: var(--vert-f); font-weight: 600; }
.cats a.actif i, .cats a.actif span { color: var(--vert-f); }
.carte-boutique-nom { font-size: 11.5px; color: var(--gris); font-weight: 600; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.carte-boutique-nom:hover { color: var(--vert-f); }
.pagination a { min-width: 36px; height: 36px; padding: 0 10px; border: 1px solid var(--bord); background: #fff; border-radius: 8px; font-weight: 600; color: var(--nuit); display: inline-flex; align-items: center; justify-content: center; }
.pagination span.actif { min-width: 36px; height: 36px; border-radius: 8px; background: var(--vert); color: #fff; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.section-sup { margin: 8px 0 30px; }
.section-sup h2 { font-size: 20px; color: var(--nuit); margin: 0 0 4px; }
.section-sup > p { color: var(--gris); margin: 0 0 16px; }

/* ------------------------------------------------ cartes de boutiques */
.grille-boutiques { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.carte-bout { background: #fff; border: 1px solid var(--bord); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .2s, border-color .2s, transform .2s; }
.carte-bout:hover { box-shadow: 0 14px 30px rgba(15, 31, 58, .09); border-color: var(--vert); transform: translateY(-2px); }
.carte-bout .couv { display: grid; grid-template-columns: repeat(3, 1fr); height: 110px; background: var(--fond); }
.carte-bout .couv img { width: 100%; height: 110px; object-fit: cover; }
.carte-bout .ident { display: flex; gap: 12px; align-items: flex-end; padding: 0 14px; margin-top: -26px; }
.carte-bout .logo-b { width: 56px; height: 56px; border-radius: 12px; background: var(--nuit); color: #a3e635; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 22px; border: 3px solid #fff; flex-shrink: 0; overflow: hidden; }
.carte-bout .logo-b img { width: 100%; height: 100%; object-fit: cover; background: #fff; }
.carte-bout .ident div { min-width: 0; padding-bottom: 2px; }
.carte-bout strong { display: block; color: var(--nuit); font-size: 15px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.carte-bout small { color: var(--gris); font-size: 12.5px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.carte-bout .bas { margin-top: auto; padding: 12px 14px 14px; display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; color: var(--gris); }
.carte-bout .bas b { color: var(--vert-f); }
@media (max-width: 1100px) { .grille-boutiques { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .grille-boutiques { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
@media (max-width: 460px) { .grille-boutiques { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------ fenêtre « Contact » d'une boutique */
.boite-contact { padding: 26px; }
.boite-contact h3 { margin: 0 0 4px; font-size: 20px; color: var(--nuit); }
.boite-contact > p { margin: 0 0 16px; color: var(--gris); }
.contact-ligne { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--bord); }
.contact-ligne .ic { width: 42px; height: 42px; border-radius: 12px; background: var(--vert-doux); color: var(--vert-f); display: flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0; }
.contact-ligne div { min-width: 0; flex: 1; }
.contact-ligne b { display: block; color: var(--nuit); }
.contact-ligne span { color: var(--gris); font-size: 13px; word-break: break-word; }
.contact-ligne .btn { height: 36px; padding: 0 12px; }
.contact-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.contact-actions .btn { width: 100%; }

/* ------------------------------------------------ petite boutique : vitrine sans colonne de filtres */
.disposition.vitrine { grid-template-columns: minmax(0, 1fr) 300px; }
.disposition.vitrine > section { order: 1; }
.disposition.vitrine > .cote-vitrine { order: 2; position: sticky; top: 86px; display: flex; flex-direction: column; gap: 16px; }
.vitrine .grille { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.vitrine .carte-nom { font-size: 15px; }
.vitrine .carte-prix { font-size: 17px; }
.vitrine.une-ligne .grille { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.apropos { border: 1px solid var(--bord); border-radius: 12px; padding: 18px; }
.apropos h3 { margin: 0 0 10px; font-size: 16px; color: var(--nuit); }
.apropos p { margin: 0 0 12px; color: var(--gris); line-height: 1.6; white-space: pre-line; }
.apropos .info-l { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--texte); padding: 6px 0; }
.apropos .info-l i { color: var(--vert-f); width: 16px; margin-top: 3px; }
.apropos .btn { width: 100%; margin-top: 8px; }
.ailleurs { margin: 10px 0 34px; padding: 22px; border-radius: 14px; background: var(--fond); }
.ailleurs-tete { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.ailleurs-tete h2 { margin: 0; font-size: 19px; color: var(--nuit); }
.ailleurs-tete p { margin: 2px 0 0; color: var(--gris); font-size: 13px; }
.ailleurs-tete a { color: var(--vert-f); font-weight: 700; font-size: 13px; }
.ailleurs .grille { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.ailleurs .carte { background: #fff; }
@media (max-width: 1100px) { .disposition.vitrine { grid-template-columns: minmax(0, 1fr); } .disposition.vitrine > .cote-vitrine { position: static; display: grid; grid-template-columns: 1fr 1fr; } .ailleurs .grille { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 680px) { .vitrine .grille, .vitrine.une-ligne .grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .disposition.vitrine > .cote-vitrine { grid-template-columns: 1fr; } .ailleurs { padding: 14px; } .ailleurs .grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } .contact-actions { grid-template-columns: 1fr; } }

/* ------------------------------------------------ pied de page de la place de marché */
.pied-marche { background: var(--nuit); color: #cbd5e1; padding-top: 44px; margin-top: 20px; }
.pied-marche .pied-grille { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 28px; }
.pied-marche img { height: 28px; width: auto; margin-bottom: 12px; }
.pied-marche p { font-size: 13.5px; max-width: 360px; margin: 0; }
.pied-marche h4 { color: #a3e635; font-size: 14px; margin: 0 0 12px; }
.pied-marche a { display: block; color: #cbd5e1; font-size: 13.5px; padding: 4px 0; }
.pied-marche a:hover { color: #fff; }
.pied-copie { border-top: 1px solid rgba(255, 255, 255, .1); margin-top: 30px; padding-top: 16px; padding-bottom: 16px; font-size: 12.5px; color: #94a3b8; }
@media (max-width: 760px) { .pied-marche .pied-grille { grid-template-columns: 1fr 1fr; } }

/* Carte d'invitation (boutique de moins de 3 articles) et suggestions sous les produits */
.carte-invite { border-style: dashed; background: var(--fond); }
.invite-corps { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; padding: 26px 18px; }
.invite-corps i { font-size: 30px; color: var(--vert-f); }
.invite-corps b { color: var(--nuit); font-size: 15px; }
.invite-corps span { color: var(--gris); font-size: 13px; line-height: 1.5; }
.ailleurs-dedans { margin-top: 26px; }
.ailleurs-dedans .grille { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 680px) { .ailleurs-dedans .grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ------------------------------------------------ carte des boutiques (Leaflet / OpenStreetMap) */
.carte-page { padding-top: 18px; }
.carte-outils { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.carte-outils label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--gris); }
.carte-outils select, .carte-filtre { height: 40px; border: 1px solid var(--bord); border-radius: 8px; padding: 0 10px; font-size: 13.5px; background: #fff; color: var(--nuit); }
.carte-filtre { min-width: 220px; flex: 1; max-width: 340px; }
.carte-etat { font-size: 13px; color: var(--gris); }
.carte-grille { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; }
.carte-zone { border: 1px solid var(--bord); border-radius: 14px; overflow: hidden; min-height: 560px; }
#carte { width: 100%; height: 100%; min-height: 560px; }
.carte-liste { border: 1px solid var(--bord); border-radius: 14px; max-height: 560px; overflow-y: auto; padding: 6px; }
.carte-ligne { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px; border-radius: 10px; }
.carte-ligne:hover { background: var(--fond); }
.carte-ligne .vignette { width: 54px; height: 54px; border-radius: 10px; overflow: hidden; background: var(--nuit); color: #a3e635; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 20px; }
.carte-ligne .vignette img { width: 100%; height: 100%; object-fit: cover; }
.carte-ligne .texte { min-width: 0; display: flex; flex-direction: column; }
.carte-ligne b { color: var(--nuit); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.carte-ligne small { color: var(--gris); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.carte-ligne .dist { text-align: right; font-weight: 800; color: var(--vert-f); font-size: 13px; display: flex; flex-direction: column; }
.carte-ligne .dist small { font-weight: 500; }
.epingle { color: var(--vert-f); font-size: 32px; line-height: 36px; text-align: center; text-shadow: 0 2px 4px rgba(0, 0, 0, .35); }
.epingle.approx { color: #94a3b8; }
.bulle { display: flex; flex-direction: column; gap: 3px; min-width: 180px; }
.bulle img { width: 100%; height: 90px; object-fit: cover; border-radius: 8px; margin-bottom: 4px; }
.bulle b { color: var(--nuit); font-size: 14px; }
.bulle span { color: var(--gris); font-size: 12px; }
.bulle a { color: var(--vert-f); font-weight: 700; margin-top: 4px; }
.mini-carte { height: 200px; border-radius: 10px; overflow: hidden; border: 1px solid var(--bord); margin: 10px 0; }
@media (max-width: 960px) { .carte-grille { grid-template-columns: minmax(0, 1fr); } .carte-zone, #carte { min-height: 380px; } .carte-liste { max-height: none; } }

/* Boutiques épinglées (page Boutiques) */
.epingles-zone { margin: 22px 0 6px; }
.epingles-zone h2 { font-size: 16px; margin: 0 0 12px; }
.epingles-zone h2 i { color: #6fa800; transform: rotate(30deg); }
.epingles-cartes { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.epingle-carte { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; border: 1px solid #e6e9ee; border-radius: 6px; padding: 8px 6px 8px 10px; background: #fff; }
.epingle-lien { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.epingle-lien img, .epingle-initiale { width: 38px; height: 38px; border-radius: 6px; object-fit: cover; display: flex; align-items: center; justify-content: center; background: #14253a; color: #fff; font-weight: 700; }
.epingle-lien span { display: flex; flex-direction: column; max-width: 180px; }
.epingle-lien b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.epingle-lien small { color: #64748b; }
.epingle-retirer { border: 0; background: none; color: #94a3b8; cursor: pointer; padding: 6px; }
.epingle-retirer:hover { color: #e11d48; }