/* Catalogue filtrable des recettes pro (voir catalogue.js) */
.cat-rub{display:flex; gap:8px; overflow-x:auto; padding:2px 2px 10px; margin:0 -2px; scrollbar-width:thin;}
.cat-rub .tag-btn{flex:0 0 auto; white-space:nowrap;}
.cat-bar{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:4px 0 12px;}
.cat-tri{display:inline-flex; align-items:center; gap:6px; font-size:0.76rem; color:var(--grey);}
.cat-tri select{background:var(--panel); border:1px solid var(--line); color:var(--ink); border-radius:100px; padding:6px 12px; font:inherit; font-size:0.76rem;}
.cat-nb{margin-inline-start:auto; font-size:0.8rem; color:var(--grey);}
.cat-reset{background:none; border:0; color:var(--accent-text); font:inherit; font-size:0.76rem; text-decoration:underline; cursor:pointer; padding:6px 4px;}
.cat-panel{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:12px 14px; margin-bottom:14px;}
.cat-panel[hidden]{display:none;}
.cat-g + .cat-g{margin-top:12px;}
.cat-gt{font-size:0.72rem; font-weight:700; color:var(--grey); text-transform:uppercase; letter-spacing:0.04em; margin-bottom:6px;}
.cat-chips{display:flex; flex-wrap:wrap; gap:7px;}
.cat-meta{margin:2px 16px 14px; font-size:0.72rem; color:var(--grey);}
.cat-vide{grid-column:1/-1; color:var(--grey); padding:20px 0;}
.cat-plus{display:block; margin:0 auto 40px; padding:10px 26px;}
@media (max-width:520px){ .cat-nb{margin-inline-start:0; flex-basis:100%;} }

/* ---------- Navigation : tuiles photo, grille de 2 colonnes, barre fixe, colonne de filtres (ordinateur) ---------- */
.cat-tuiles{display:grid; grid-template-columns:repeat(4,1fr); gap:10px 6px; margin:4px 0 14px;}
.cat-t{display:flex; flex-direction:column; align-items:center; gap:4px; background:none; border:0; padding:4px 2px; font:inherit; color:var(--ink); cursor:pointer; text-align:center; border-radius:14px;}
.cat-t-img{display:block; width:60px; height:60px; border-radius:50%; overflow:hidden; background:var(--panel-2); border:2px solid var(--line);}
.cat-t-img img{width:100%; height:100%; object-fit:cover; display:block;}
.cat-t-nom{font-size:0.7rem; line-height:1.2; font-weight:600;}
.cat-t-nb{font-size:0.66rem; color:var(--grey);}
.cat-t.active .cat-t-img{border-color:var(--accent); box-shadow:0 0 0 3px rgba(212,160,23,0.3);}
.cat-t.active .cat-t-nom{font-weight:800;}
.cat-t:focus-visible{outline:3px solid #3A2E1A; outline-offset:2px;}
.cat-recents{margin:0 0 12px;}
.cat-rec-liste{display:flex; gap:10px; overflow-x:auto; padding:2px 2px 8px; scrollbar-width:none;}
.cat-rec-liste::-webkit-scrollbar{display:none;}
.cat-rec-liste a{flex:0 0 120px; text-decoration:none; color:var(--ink); font-size:0.72rem; font-weight:600; line-height:1.25;}
.cat-rec-liste img{display:block; width:120px; height:64px; object-fit:cover; border-radius:10px; margin-bottom:4px;}
.cat-bar{position:sticky; top:0; z-index:15; background:var(--bg, #FBF6E9); padding:8px 0; margin:0 0 8px; border-bottom:1px solid var(--line);}
.cat-pastille{display:inline-block; margin:0 16px 12px; padding:2px 9px; border-radius:100px; background:rgba(212,160,23,0.18); color:#6B4E08; font-size:0.66rem; font-weight:700;}
.cat-maroc{border-top:3px solid #D4A017;}
.cat-grid .card-img{height:auto; aspect-ratio:4/3;}
@media (max-width:760px){
  .cat-grid{grid-template-columns:repeat(2,1fr); gap:10px;}
  .cat-grid .card h3{margin:10px 10px 4px; font-size:0.78rem; line-height:1.25;}
  .cat-grid .cat-meta{margin:0 10px 10px; font-size:0.68rem;}
  .cat-grid .cat-pastille{margin:0 10px 10px;}
}
@media (min-width:1000px){
  .cat{display:grid; grid-template-columns:270px 1fr; column-gap:24px; align-items:start;}
  .cat > *{grid-column:1/-1;}
  .cat-bar{top:70px;}
  .cat-fbtn{display:none;}
  .cat-panel,.cat-panel[hidden]{display:block; grid-column:1; position:sticky; top:130px; max-height:calc(100vh - 150px); overflow:auto; margin-bottom:0;}
  .cat-grid{grid-column:2; grid-template-columns:repeat(auto-fill,minmax(210px,1fr));}
  .cat-plus{grid-column:2;}
  .cat-tuiles{grid-template-columns:repeat(8,1fr);}
}

/* Filtres actifs, état vide, squelette de chargement */
.cat-actifs{display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:0 0 12px;}
.cat-actif{font:inherit; font-size:0.78rem; font-weight:600; color:#3A2E1A; background:#F3E9CE; border:1px solid #E0CFA6; border-radius:999px; padding:5px 12px; min-height:32px; cursor:pointer;}
.cat-actif span{margin-inline-start:4px;}
.cat-actif:focus-visible{outline:2px solid #3A2E1A; outline-offset:2px;}
.cat-vide p{margin:0 0 6px;}
.cat-vide .cat-reset{font-size:inherit; padding:0;}
.cat-sq{display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin:12px 0;}
.cat-sq i{display:block; aspect-ratio:4/5; border-radius:12px; background:#F1E7D2;}
@media (min-width:900px){.cat-sq{grid-template-columns:repeat(4,1fr);}}
@media (prefers-reduced-motion:no-preference){.cat-sq i{animation:catsq 1.2s ease-in-out infinite alternate;}@keyframes catsq{from{opacity:.55}to{opacity:1}}}

.cat-themes{margin:0 0 10px; font-size:0.85rem;}
.cat-themes a{color:var(--accent-text); font-weight:600; text-decoration:underline;}

.cat-allerg{margin:0 0 12px;font-size:.78rem;line-height:1.4;color:#6B5E4E;}