/* CATALOGUE — AJOUTS du thème après le visu « catalogue animé » validé (cm.css, importé tel quel, à ne pas éditer).
   Demande de Hamza du 05/11/2026 :
     1. les FILTRES de la page des produits, comme dans la nouvelle boutique (sous la colonne des familles, plein écran
        au téléphone) ;
     2. les SOUS-CATÉGORIES en vignettes avec leur image au-dessus de la liste, comme dans WooCommerce.
   Seules des variables de la palette (prisma-palette.css) : la garde de palette refuse toute autre couleur. */

/* ---------- Colonne : avec des filtres dessous, elle défile avec la page (collée, sa fin serait hors d'atteinte). */
.pv-col.cm-avec-filtres{position:static}

/* ---------- Filtres ---------- */
.cm-filtres{margin-top:14px;background:var(--p-blanc);border:1px solid var(--p-bord);border-radius:var(--r);box-shadow:var(--ombre-1);overflow:hidden}
.cm-filtres-tete{display:flex;align-items:center;gap:10px;padding:13px 18px;background:var(--p-grisbleu-pale);border-bottom:1px solid var(--p-bord);color:var(--p-encre)}
.cm-filtres-tete .ico{color:var(--p-grisbleu-fonce)}
.cm-filtres-tete b{flex:1;font-size:15px;font-weight:600}
.cm-filtres-tete .effacer{font-size:13px;font-weight:600;color:var(--p-grisbleu-fonce)}
.cm-filtres-tete .fermer{display:none}
.cm-filtre{padding:14px 18px;border-bottom:1px solid var(--p-bord)}
.cm-filtre h3{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--p-encre);margin-bottom:10px}
.cm-puces{display:flex;flex-wrap:wrap;gap:6px}
.cm-puces a{display:inline-flex;align-items:center;gap:5px;max-width:100%;min-height:32px;border:1px solid var(--p-bord-3);border-radius:999px;padding:4px 11px;font-size:13px;line-height:1.3;color:var(--p-texte);background:var(--p-blanc)}
.cm-puces a:hover{border-color:var(--p-grisbleu);text-decoration:none}
.cm-puces a small{font-size:12px;font-weight:500;color:var(--p-texte-2)}
.cm-puces a.on{border-color:var(--p-grisbleu-fonce);background:var(--p-grisbleu-pale);color:var(--p-grisbleu-fonce);font-weight:600}
.cm-puces a.on small{color:var(--p-grisbleu-fonce)}
.cm-puces a.on .ico{width:14px;height:14px}
.cm-filtres .voir{display:inline-block;margin-top:8px;padding:0;border:0;background:none;font:inherit;font-size:13px;font-weight:600;color:var(--p-grisbleu-fonce);cursor:pointer}
.cm-filtres .cm-plus-filtres{display:block;margin:0;padding:13px 18px;width:100%;text-align:left}
.cm-filtres-pied{display:none}

/* Pastilles des filtres choisis, au-dessus des modèles (comme la barre de la boutique). */
.cm-actifs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:-4px 0 18px}
.cm-actifs .actif{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:4px 8px 4px 12px;border:1px solid var(--p-grisbleu-voile);border-radius:999px;background:var(--p-grisbleu-pale);font-size:13px;font-weight:500;color:var(--p-encre)}
.cm-actifs .actif:hover{border-color:var(--p-grisbleu);text-decoration:none}
.cm-actifs .actif .ico{width:14px;height:14px}
.cm-actifs .effacer{font-size:13px;font-weight:600;color:var(--p-grisbleu-fonce)}
.cm-outils .n small{font-weight:500;color:var(--p-texte-2)}
.cm-ouvre-filtres{display:none}

/* ---------- Sous-catégories en vignettes ---------- */
.sc-sous{margin:0 0 22px}
.sc-grille{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.sc-tuile{display:flex;flex-direction:column;align-items:center;gap:3px;height:100%;padding:0 0 12px;border:1px solid var(--p-bord);border-radius:var(--r);background:var(--p-blanc);box-shadow:var(--ombre-1);overflow:hidden;color:var(--p-encre);text-align:center;transition:transform .18s var(--doux),box-shadow .18s var(--doux),border-color .18s}
.sc-tuile:hover{transform:translateY(-2px);box-shadow:var(--ombre-2);border-color:var(--p-grisbleu);text-decoration:none}
.sc-tuile:focus-visible{outline:3px solid var(--p-grisbleu);outline-offset:2px}
.sc-img{position:relative;display:grid;place-items:center;width:100%;aspect-ratio:1;overflow:hidden;margin-bottom:8px;background:var(--p-grisbleu-pale);color:var(--p-grisbleu)}
/* Image posée dans le carré (une photo en hauteur ne l'agrandit pas). */
.sc-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sc-img.sc-produit{background:var(--p-blanc)}
.sc-img.sc-produit img{object-fit:contain;padding:10px;box-sizing:border-box}
.sc-img .ico{width:44px;height:44px}
.sc-nom{padding:0 10px;font-size:14px;font-weight:600;line-height:1.3}
.sc-n{font-size:13px;color:var(--p-texte-2)}
@media (prefers-reduced-motion:reduce){.sc-tuile,.sc-tuile:hover{transition:none;transform:none}}

/* ---------- Téléphone ---------- */
@media (max-width:900px){
  .cm-ouvre-filtres{display:inline-flex}
  .cm-outils{flex-wrap:wrap}
  .sc-grille{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  /* « Filtres » ouvre les filtres en plein écran ; ✕, Échap et « Voir N modèles » referment. */
  body.filtres-ouverts{overflow:hidden}
  body.filtres-ouverts .cm-page>.pv-col{display:block;position:fixed;inset:0;z-index:60;overflow:auto;background:var(--p-blanc);padding:0}
  body.filtres-ouverts .cm-page>.pv-col>.pv-cats,body.filtres-ouverts .cm-page>.pv-col>.pv-aide{display:none}
  body.filtres-ouverts .cm-filtres{margin:0;border:0;border-radius:0;box-shadow:none;overflow:visible;min-height:100%;display:flex;flex-direction:column}
  body.filtres-ouverts .cm-filtres-tete{position:sticky;top:0;z-index:1;min-height:56px;padding:0 6px 0 16px}
  body.filtres-ouverts .cm-filtres-tete .fermer{display:grid;place-items:center;width:44px;height:44px;border:0;background:transparent;color:var(--p-encre)}
  body.filtres-ouverts .cm-filtres-pied{display:block;position:sticky;bottom:0;margin-top:auto;padding:12px 16px 16px;background:var(--p-blanc);border-top:1px solid var(--p-bord)}
  body.filtres-ouverts .cm-filtres-pied .btn{width:100%}
  .cm-puces a{min-height:40px}
}