/* Catalogue */

.titre-bloc{font-size:clamp(24px,3.4vw,34px);margin:26px 0 4px}
.sous{margin:0;color:var(--texte-2);font-size:15.5px}
.rail{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:10px;margin-top:22px}
.cat{display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center;
 padding:15px 8px 13px;border-radius:20px;background:var(--surface);border:1px solid var(--trait);
 transition:transform .25s,background-color .25s,border-color .25s}
.cat:hover{transform:translateY(-3px);background:var(--surface-2)}
.cat .ico{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;
 background:var(--voile);transition:background .25s,color .25s}
.cat .nom{font-family:var(--f-titre);font-weight:500;font-size:13px;line-height:1.25}
.cat .nb{font-size:11.5px;color:var(--texte-3);font-variant-numeric:tabular-nums}
.cat[aria-pressed="true"]{border-color:transparent;background:var(--surface-3)}
.cat[aria-pressed="true"] .ico{color:#fff}
.cat[data-c="tout"][aria-pressed="true"] .ico{background:linear-gradient(135deg,var(--g-2),var(--s-1))}
.cat[data-c="son"][aria-pressed="true"] .ico{background:linear-gradient(135deg,var(--k-1),var(--k-2))}
.cat[data-c="lumiere"][aria-pressed="true"] .ico{background:linear-gradient(135deg,var(--k-2),var(--g-1))}
.cat[data-c="satellite"][aria-pressed="true"] .ico{background:linear-gradient(135deg,var(--g-1),var(--g-2))}
.cat[data-c="info"][aria-pressed="true"] .ico{background:linear-gradient(135deg,var(--g-2),var(--s-1))}
.cat[data-c="horeca"][aria-pressed="true"] .ico{background:linear-gradient(135deg,var(--s-1),var(--s-2))}
.cat[data-c="deco"][aria-pressed="true"] .ico{background:linear-gradient(135deg,var(--s-2),var(--k-1))}
.cat[data-c="perso"][aria-pressed="true"] .ico{background:linear-gradient(135deg,var(--k-1),var(--g-1))}
.filtres{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:26px;padding:14px;
 border-radius:22px;background:var(--surface);border:1px solid var(--trait)}
.recherche{flex:1 1 230px;display:flex;align-items:center;gap:10px;background:var(--voile);
 border:1px solid var(--trait);border-radius:99px;padding:9px 16px;color:var(--texte-3)}
.recherche input{flex:1;min-width:0;background:none;border:0;color:var(--texte);font-size:15px;font-weight:300}
.recherche input::placeholder{color:var(--texte-3)}
.recherche input:focus{outline:none}
.groupe{display:flex;gap:7px;flex-wrap:wrap}
.mode{font-family:var(--f-titre);font-weight:500;font-size:13.5px;padding:8px 16px;border-radius:99px;
 border:1px solid var(--trait);color:var(--texte-2);transition:all .2s}
.mode:hover{color:var(--texte);border-color:var(--texte-3)}
.mode[aria-pressed="true"]{background:color-mix(in srgb,var(--g-2) 16%,transparent);
 border-color:var(--g-2);color:var(--g-2)}
.tri{display:flex;align-items:center;gap:8px;margin-left:auto;font-size:14px;color:var(--texte-2)}
.tri select{font-size:14px;color:var(--texte);background:var(--voile);border:1px solid var(--trait);
 border-radius:99px;padding:8px 14px;cursor:pointer}
.compte{margin:22px 0 14px;font-size:14.5px;color:var(--texte-2);display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.compte b{color:var(--texte);font-weight:500;font-variant-numeric:tabular-nums}
.raz{font-family:var(--f-titre);font-weight:500;font-size:13px;color:var(--g-2);
 border-bottom:1px solid color-mix(in srgb,var(--g-2) 45%,transparent)}
.grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:16px}
.fiche{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--trait);
 border-radius:24px;overflow:hidden;box-shadow:var(--ombre);
 transition:transform .3s cubic-bezier(.2,.75,.3,1),border-color .3s}
.fiche:hover{transform:translateY(-4px);border-color:var(--texte-3)}
.visuel{position:relative;background:var(--photo);aspect-ratio:1/1;display:grid;place-items:center;
 border-bottom:1px solid var(--trait);padding:12px}
.visuel img{max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain;mix-blend-mode:multiply}
.etat{position:absolute;top:10px;right:10px;font-family:var(--f-titre);font-weight:500;font-size:11px;
 padding:4px 10px;border-radius:99px;backdrop-filter:blur(4px)}
.dispo{background:var(--ok-bg);border:1px solid var(--ok-bd);color:var(--ok-tx)}
.sur-commande{background:var(--att-bg);border:1px solid var(--att-bd);color:var(--att-tx)}
.corps{padding:14px 16px 16px;display:flex;flex-direction:column;flex:1;gap:6px}
.nom-produit{font-family:var(--f-titre);font-weight:500;font-size:15px;line-height:1.3;margin:0}
.detail{margin:0;font-size:12.5px;color:var(--texte-3);line-height:1.45;
 display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pied{margin-top:auto;padding-top:11px;display:flex;align-items:center;gap:8px;border-top:1px solid var(--trait)}
.prix{font-family:var(--f-titre);font-weight:600;font-size:18px;font-variant-numeric:tabular-nums}
.unite{font-size:12px;color:var(--texte-3)}
.pastille-mode{margin-left:auto;font-size:10.5px;font-family:var(--f-titre);font-weight:500;
 padding:3px 9px;border-radius:99px;background:var(--voile);color:var(--texte-2)}
.vide{grid-column:1/-1;text-align:center;padding:56px 20px;border:1px dashed var(--trait);
 border-radius:24px;color:var(--texte-2)}
.vide b{display:block;font-family:var(--f-titre);font-weight:500;font-size:19px;color:var(--texte);margin-bottom:6px}
@media (max-width:560px){.tri{margin-left:0;width:100%}}

.cat{min-width:0}
.cat[data-c="location"][aria-pressed="true"] .ico{background:linear-gradient(135deg,var(--g-1),var(--s-1))}
.cat[data-c="print"][aria-pressed="true"] .ico{background:linear-gradient(135deg,var(--k-1),var(--s-2))}
.cat[data-c="son-lumiere"][aria-pressed="true"] .ico{background:linear-gradient(135deg,var(--k-1),var(--k-2))}
.cat[data-c="personnalisation"][aria-pressed="true"] .ico{background:linear-gradient(135deg,var(--k-1),var(--g-1))}
.cat[data-c="deco-bien-etre"][aria-pressed="true"] .ico{background:linear-gradient(135deg,var(--s-2),var(--k-1))}
.cat[data-c="satellite-tv"][aria-pressed="true"] .ico{background:linear-gradient(135deg,var(--g-1),var(--g-2))}
.cat[data-c="informatique"][aria-pressed="true"] .ico{background:linear-gradient(135deg,var(--g-2),var(--s-1))}
.cat[data-c="evenementiel"][aria-pressed="true"] .ico{background:linear-gradient(135deg,var(--s-1),var(--s-2))}
.sous-cats{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.sous-cats[hidden]{display:none}
.sous-cats button{font-family:var(--f-titre);font-weight:500;font-size:13px;padding:6px 14px;border-radius:99px;
 border:1px solid var(--trait);color:var(--texte-2);background:var(--surface)}
.sous-cats button[aria-pressed="true"]{border-color:var(--g-2);color:var(--g-2);background:color-mix(in srgb,var(--g-2) 12%,transparent)}
.fiche[hidden]{display:none}
.fiche .nom-produit a::after{content:"";position:absolute;inset:0}
.fiche{position:relative}
.fiche:focus-within{border-color:var(--g-2)}
.prix--demande{font-size:14.5px;font-weight:500;color:var(--texte-2)}
.vide[hidden]{display:none}
@media (max-width:700px){
 .rail{display:flex;overflow-x:auto;scrollbar-width:none;margin-inline:-22px;padding-inline:22px}
 .rail::-webkit-scrollbar{display:none}
 .rail .cat{flex:0 0 100px}
 .grille{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .corps{padding:11px 12px 12px}
 .detail{display:none}
 .pied{flex-wrap:wrap;gap:4px 8px}
 .pastille-mode{margin-left:0}
}
/* v1.0.1 — images de carte toujours contenues dans leur cadre */
.visuel img{position:absolute;inset:12px;width:calc(100% - 24px);height:calc(100% - 24px);max-height:none;max-width:none;object-fit:contain}
/* v1.0.4 — matériel reconditionné */
.recond{position:absolute;top:10px;left:10px;font-family:var(--f-titre);font-weight:500;font-size:11px;padding:4px 10px;border-radius:99px;
 background:color-mix(in srgb,var(--s-1) 14%,var(--surface));border:1px solid color-mix(in srgb,var(--s-1) 45%,transparent);color:var(--s-1);z-index:1}
:root[data-theme="dark"] .recond{color:#9DB4F0}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .recond{color:#9DB4F0}}
/* v1.0.6 — mobile : filtres qui défilent au doigt */
.defile{display:contents}
@media (hover:none){.cat:hover,.fiche:hover{transform:none}.cat:hover{background:var(--surface)}.cat[aria-pressed="true"]:hover{background:var(--surface-3)}}
@media (max-width:700px){
 .rail,.defile,.sous-cats{display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;scrollbar-width:none;margin-inline:-22px;padding:2px 22px 6px;scroll-padding-inline:22px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 18px,#000 calc(100% - 26px),transparent);
          mask-image:linear-gradient(90deg,transparent,#000 18px,#000 calc(100% - 26px),transparent)}
 .rail::-webkit-scrollbar,.defile::-webkit-scrollbar,.sous-cats::-webkit-scrollbar{display:none}
 .rail{margin-top:18px}
 .rail .cat{flex:0 0 auto;flex-direction:row;align-items:center;gap:8px;padding:6px 14px 6px 6px;border-radius:99px;scroll-snap-align:start;text-align:left}
 .rail .cat .ico{width:32px;height:32px;border-radius:99px;flex:none}
 .rail .cat .ico svg{width:18px;height:18px}
 .rail .cat .nom{font-size:13.5px;white-space:nowrap}
 .rail .cat .nb{font-size:11px}
 .rail .cat .nb::before{content:"· "}
 .filtres{background:none;border:0;padding:0;margin-top:12px;gap:10px}
 .recherche{flex:1 1 100%;padding:11px 16px}
 .defile{width:calc(100% + 44px);align-items:center}
 .defile .groupe{display:contents}
 .mode{flex:none;white-space:nowrap;scroll-snap-align:start;padding:9px 16px}
 .tri{flex:none;margin:0;width:auto;gap:6px;font-size:13.5px;white-space:nowrap}
 .tri select{padding:8px 12px}
 .sous-cats{margin-top:10px}
 .sous-cats button{flex:none;white-space:nowrap}
 .compte{margin-top:14px}
}
/* v1.0.7 — badges lisibles sur petites cartes */
@media (max-width:700px){.visuel .recond{top:auto;bottom:8px;left:8px}.etat{top:8px;right:8px;font-size:10.5px;padding:3px 8px}}
.recond.perso{color:var(--k-1);border-color:color-mix(in srgb,var(--k-1) 40%,transparent);background:color-mix(in srgb,var(--k-1) 10%,var(--surface))}
/* v2.2.0 — pôles Print / Events : couleurs claires (bleu clair Print, bleu mauve Events) */
:root{--pole-print:#2A86C2;--pole-print-fond:#E1F1FB;--pole-events:#6358C4;--pole-events-fond:#ECE9FB}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--pole-print:#74C3EE;--pole-print-fond:rgba(116,195,238,.14);--pole-events:#A69DF1;--pole-events-fond:rgba(166,157,241,.16)}}
:root[data-theme="dark"]{--pole-print:#74C3EE;--pole-print-fond:rgba(116,195,238,.14);--pole-events:#A69DF1;--pole-events-fond:rgba(166,157,241,.16)}
.poles-cat{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}
.poles-cat button{display:inline-flex;align-items:center;gap:8px;padding:10px 22px;border-radius:99px;border:1px solid var(--trait);background:var(--surface);font-family:var(--f-titre);font-weight:600;font-size:15px;color:var(--texte-2);cursor:pointer;transition:all .2s}
.poles-cat button small{font-weight:400;font-size:12.5px;color:var(--texte-3);font-variant-numeric:tabular-nums}
.poles-cat button:hover{color:var(--texte);border-color:var(--texte-3)}
.poles-cat button[data-p="tout"][aria-pressed="true"]{background:var(--surface-3);color:var(--texte);border-color:transparent}
.poles-cat button[data-p="print"][aria-pressed="true"]{background:var(--pole-print-fond);border-color:var(--pole-print);color:var(--pole-print)}
.poles-cat button[data-p="events"][aria-pressed="true"]{background:var(--pole-events-fond);border-color:var(--pole-events);color:var(--pole-events)}
.poles-cat button[aria-pressed="true"] small{color:inherit;opacity:.75}
.poles-cat + .rail{margin-top:14px}
.cat[hidden],.mode[hidden]{display:none}
.cat[data-pole="print"] .ico{background:var(--pole-print-fond);color:var(--pole-print)}
.cat[data-pole="events"] .ico{background:var(--pole-events-fond);color:var(--pole-events)}
.cat[data-pole="print"][aria-pressed="true"] .ico{background:var(--pole-print);color:#fff}
.cat[data-pole="events"][aria-pressed="true"] .ico{background:var(--pole-events);color:#fff}
/* Sous-catégories : couleur du pôle, bien visibles */
.sous-cats{align-items:center;padding:10px 12px;border-radius:18px;background:var(--surface);border:1px solid var(--trait)}
.sous-cats .sc-titre{font-family:var(--f-titre);font-weight:600;font-size:13px;color:var(--texte);margin-right:4px;white-space:nowrap}
.sous-cats button{font-weight:600;font-size:13.5px;padding:7px 15px;border:1px solid transparent;background:var(--voile);color:var(--texte)}
.sous-cats button small{font-weight:400;opacity:.7;margin-left:2px}
.sous-cats button[aria-pressed="true"]{background:var(--texte);color:var(--surface);border-color:transparent}
.sous-cats[data-pole="print"]{background:var(--pole-print-fond);border-color:color-mix(in srgb,var(--pole-print) 35%,transparent)}
.sous-cats[data-pole="print"] .sc-titre{color:var(--pole-print)}
.sous-cats[data-pole="print"] button{background:var(--surface);color:var(--pole-print);border-color:color-mix(in srgb,var(--pole-print) 30%,transparent)}
.sous-cats[data-pole="print"] button[aria-pressed="true"]{background:var(--pole-print);color:#fff;border-color:var(--pole-print)}
.sous-cats[data-pole="events"]{background:var(--pole-events-fond);border-color:color-mix(in srgb,var(--pole-events) 35%,transparent)}
.sous-cats[data-pole="events"] .sc-titre{color:var(--pole-events)}
.sous-cats[data-pole="events"] button{background:var(--surface);color:var(--pole-events);border-color:color-mix(in srgb,var(--pole-events) 30%,transparent)}
.sous-cats[data-pole="events"] button[aria-pressed="true"]{background:var(--pole-events);color:#fff;border-color:var(--pole-events)}
.sous-cats--2{margin-top:8px;margin-left:22px;padding:8px 10px}
.sous-cats--2 button{font-size:12.5px;padding:5px 12px}
@media (max-width:700px){.sous-cats--2{margin-left:10px}}
@media (max-width:700px){.sous-cats{margin-inline:0;padding:8px 10px;border-radius:16px;-webkit-mask-image:none;mask-image:none}.sous-cats .sc-titre{flex:none}.sous-cats--2{margin-left:10px}}
/* v2.3.0 — textile fin de série */
.recond.fdv{color:var(--s-2);border-color:color-mix(in srgb,var(--s-2) 40%,transparent);background:color-mix(in srgb,var(--s-2) 10%,var(--surface))}

/* v2.3.1 — demande client : icônes plus grandes dans les carrés de catégories (desktop uniquement, les pastilles mobiles restent petites) */
@media (min-width:701px){
 .rail .cat{gap:11px;padding:18px 8px 15px}
 .rail .cat .ico{width:68px;height:68px;border-radius:20px}
 .rail .cat .ico svg{width:36px;height:36px}
}

/* v2.3.1 — demande client : bleu franc pour le pôle Events (plus de mauve pastel) */
:root{--pole-events:#2457D6;--pole-events-fond:#E4ECFC}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--pole-events:#7FA3F5;--pole-events-fond:rgba(127,163,245,.16)}}
:root[data-theme="dark"]{--pole-events:#7FA3F5;--pole-events-fond:rgba(127,163,245,.16)}
/* v2.5.0 — filtres de catégories façon tuiles Print : dégradé, icône blanche, libellé dessous */
.cat{--deg:linear-gradient(135deg,var(--g-2),var(--s-1))}
.cat[data-c="tout"]{--deg:linear-gradient(135deg,var(--g-2),var(--s-1))}
.cat[data-c="print"]{--deg:linear-gradient(135deg,var(--k-1),var(--k-2))}
.cat[data-c="textile"]{--deg:linear-gradient(135deg,var(--k-2),var(--k-1))}
.cat[data-c="personnalisation"]{--deg:linear-gradient(135deg,#E0457B,var(--k-1))}
.cat[data-c="deco-bien-etre"]{--deg:linear-gradient(135deg,var(--k-2),var(--g-1))}
.cat[data-c="son-lumiere"]{--deg:linear-gradient(135deg,var(--s-1),var(--g-2))}
.cat[data-c="location"]{--deg:linear-gradient(135deg,var(--g-1),var(--g-2))}
.cat[data-c="satellite-multimedia"],.cat[data-c="satellite-tv"]{--deg:linear-gradient(135deg,var(--g-2),var(--s-1))}
.cat[data-c="informatique"]{--deg:linear-gradient(135deg,var(--pole-events,#2457D6),var(--s-1))}
.cat[data-c="a-classer"]{--deg:linear-gradient(135deg,#8a94a0,#5f6a76)}
.rail .cat .ico{background:var(--deg)!important;color:#fff!important}
@media (min-width:701px){
 .rail{grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:10px}
 .rail .cat{padding:0;gap:0;align-items:stretch;text-align:left;border-radius:20px;overflow:hidden;background:var(--surface)}
 .rail .cat .ico{width:auto;height:78px;border-radius:0}
 .rail .cat .ico svg{width:36px;height:36px}
 .rail .cat .nom{padding:11px 13px 0;font-size:13.5px;font-weight:600;line-height:1.3}
 .rail .cat .nb{padding:3px 13px 13px}
 .rail .cat:hover{background:var(--surface);transform:translateY(-4px);border-color:var(--texte-3)}
}
.rail .cat[aria-pressed="true"]{background:var(--surface);border-color:transparent;box-shadow:0 0 0 2px var(--texte)}
/* v2.7.0 — carte d'un article à variantes : aperçu des modèles */
.nb-var{display:flex;align-items:center;gap:4px;margin:6px 0 0;flex-wrap:wrap}
.nb-var img,.nb-var i{width:22px;height:22px;border-radius:6px;object-fit:cover;background:var(--c,var(--photo));box-shadow:0 0 0 1px var(--trait);display:inline-block}
.nb-var i{border-radius:99px}
.nb-var span{font-size:12px;color:var(--texte-3);margin-left:4px}
