/* Barres RAYONS + MAGASINS — aubaine.ca (Marcel, 2026-08-26)
   Pleine largeur, cases cliquables, la case active prend une trame de fond.
   Grille fluide : autant de colonnes que la largeur en permet, jamais de
   defilement horizontal. */
.pm-barres{margin:0 0 22px}
.pm-bar{margin:0 0 18px}
.pm-bar-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:0 0 10px}
.pm-bar-head h2{font-size:15px;font-weight:700;margin:0;letter-spacing:.02em;text-transform:uppercase;color:#222}
.pm-aide{font-size:12px;color:#8a8a8a}

.pm-grid{display:grid;gap:8px}
.pm-grid-rayons{grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}
.pm-grid-mags{grid-template-columns:repeat(auto-fill,minmax(116px,1fr))}

.pm-case{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:10px 8px;border:1px solid #e3e3e3;border-radius:10px;background:#fff;
  text-decoration:none;color:#333;text-align:center;
  transition:border-color .12s,background .12s,box-shadow .12s;
  min-height:104px;justify-content:center;
}
.pm-case:hover{border-color:#d51243;box-shadow:0 2px 8px rgba(0,0,0,.07);text-decoration:none;color:#333}
.pm-case:focus-visible{outline:2px solid #d51243;outline-offset:2px}

/* Case active : trame de fond coloree, demande de Marcel */
.pm-case.is-on{background:#fdeaee;border-color:#d51243;box-shadow:inset 0 0 0 1px #d51243}
.pm-case.is-on .pm-nom{color:#d51243;font-weight:700}

.pm-ico{display:flex;align-items:center;justify-content:center;height:46px;width:100%}
.pm-ico i{font-size:22px;color:#9a9a9a}
.pm-case.is-on .pm-ico i{color:#d51243}
/* Fond BLANC impose derriere les visuels : les logos et photos sont detoures */
.pm-ico img{max-height:44px;max-width:100%;width:auto;height:auto;object-fit:contain;background:#fff}
.pm-init{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
  border-radius:50%;background:#f0f0f0;color:#777;font-weight:700;font-size:14px}

.pm-nom{font-size:12px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pm-nb{font-size:11px;color:#999;font-variant-numeric:tabular-nums}
.pm-case.is-on .pm-nb{color:#d51243}

@media (max-width:575px){
  .pm-grid-rayons{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
  .pm-grid-mags{grid-template-columns:repeat(auto-fill,minmax(92px,1fr))}
  .pm-case{min-height:92px;padding:8px 6px}
  .pm-ico{height:38px}.pm-ico img{max-height:36px}
}

/* Sous-rayons : les categories reelles du rayon choisi, en puces sur une ligne
   qui se replie. Ce sont de VRAIS liens vers /aliments/{rayon}/{sous-rayon}. */
.pm-sous{margin-top:10px}
.pm-sous{display:flex;flex-wrap:wrap;gap:6px}
.pm-puce{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;border:1px solid #e3e3e3;border-radius:999px;background:#fff;
  font-size:12.5px;color:#444;text-decoration:none;line-height:1.2;
  transition:border-color .12s,background .12s;
}
.pm-puce:hover{border-color:#d51243;color:#d51243;text-decoration:none}
.pm-puce.is-on{background:#fdeaee;border-color:#d51243;color:#d51243;font-weight:700}
.pm-puce-nb{font-size:11px;color:#a0a0a0;font-variant-numeric:tabular-nums}
.pm-puce.is-on .pm-puce-nb{color:#d51243}

/* ── RAYONS EN COLONNES (2026-08-26) ────────────────────────────────────────
   Une colonne par rayon : l'icone et le rayon entier en tete, puis chacune de
   ses sous-categories. Tout est atteignable en un clic, sans ouvrir le rayon. */
/* 4 colonnes larges plutot que 6 etroites (Marcel, 2026-08-26) : a 190 px, des
   libelles comme « Salades preemballees et vinaigrettes » se coupaient. A 280 px
   minimum on tient 4 colonnes sur un ecran de bureau, et le nom entier passe. */
.pm-cols{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));align-items:start}
@media (min-width:1100px){ .pm-cols{grid-template-columns:repeat(4,1fr)} }

.pm-col{border:1px solid #e3e3e3;border-radius:10px;background:#fff;overflow:hidden;
  transition:border-color .12s,box-shadow .12s}
.pm-col:hover{border-color:#d0d0d0;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.pm-col.is-on{border-color:#d51243;box-shadow:0 0 0 1px #d51243}

.pm-col-tete{display:flex;align-items:center;gap:10px;
  padding:10px 12px;text-decoration:none;color:#222;text-align:left;
  border-bottom:1px solid #f0f0f0;background:#fafafa}
.pm-col-tete .pm-ico{height:40px;width:44px;flex:0 0 44px}
.pm-col-tete .pm-ico img{max-height:38px}
.pm-col-tete .pm-col-nom{flex:1 1 auto}
.pm-col-tete .pm-nb{flex:0 0 auto}
.pm-col-tete:hover{background:#fdeaee;color:#d51243;text-decoration:none}
.pm-col-tete.is-on{background:#fdeaee;color:#d51243}
.pm-col-tete.is-on .pm-col-nom{font-weight:800}
.pm-col-nom{font-size:14px;font-weight:700;line-height:1.25}

.pm-col-liste{list-style:none;margin:0;padding:6px 8px 8px;display:flex;flex-direction:column;gap:1px;
  max-height:320px;overflow-y:auto}
.pm-col-liste a{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:5px 8px;border-radius:6px;font-size:12.5px;line-height:1.3;
  color:#555;text-decoration:none}
.pm-col-liste a:hover{background:#fdeaee;color:#d51243;text-decoration:none}
.pm-col-liste a.is-on{background:#fdeaee;color:#d51243;font-weight:700}
.pm-col-liste .pm-nb{flex:0 0 auto}

/* barre de defilement discrete quand un rayon a beaucoup de sous-categories */
.pm-col-liste::-webkit-scrollbar{width:6px}
.pm-col-liste::-webkit-scrollbar-thumb{background:#dcdcdc;border-radius:3px}

.pm-tout{margin:10px 0 0}

@media (max-width:575px){
  .pm-cols{grid-template-columns:1fr}
  .pm-col-liste{max-height:220px}
}

/* Raccourci vers le rayon quand la recherche porte son nom (2026-08-26) */
.pm-suggestion{display:flex;align-items:center;gap:10px;margin:0 0 16px;
  padding:11px 16px;border:1px solid #f3c6d1;border-radius:10px;background:#fdeaee;
  color:#a10e33;text-decoration:none;font-size:14px;line-height:1.35}
.pm-suggestion:hover{background:#fbdde5;color:#a10e33;text-decoration:none;border-color:#d51243}
.pm-suggestion i{font-size:13px;flex:0 0 auto}
.pm-suggestion b{font-weight:800}
.pm-suggestion .pm-nb{color:#c2748a;margin-left:4px}