/* =====================================================================
   Bandeaux de cartes produits 2026 (09/10/2026) — global/includes/articles/i-bandeau-cartes-2026.php
   Promotions, sélections du moment, nouveautés, articles récemment commandés. Préfixe c26b-.
   Autonome (fonctionne aussi sur les pages à l'ancien design). Couleurs : celles du site (--h26-*).
   ===================================================================== */
.c26b {
    --c26b-orange: var(--h26-orange, #c8641e); --c26b-orange-d: var(--h26-orange-d, #a9500f); --c26b-rouge: var(--h26-rouge, #bd2425);
    --c26b-txt: #3d3d3d; --c26b-txt-l: #7a7268; --c26b-ligne: #e3dccf; --c26b-creme: #faf8f4;
    font-family: 'Poppins', 'Urbanist', Arial, sans-serif; color: var(--c26b-txt); text-align: left; margin: 0 0 10px; clear: both;
}
.c26b * { box-sizing: border-box; }
.c26b [hidden] { display: none !important; }
.c26b-tete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 20px; margin: 0 0 16px; }
.c26b .c26b-tete h2 { font-family: inherit; font-size: 26px; font-weight: 600; line-height: 1.25; text-transform: none; margin: 0; padding: 0; text-align: left; color: var(--c26b-txt); background: none; border: 0; }
.c26b-tete h2 i { color: var(--c26b-orange); font-size: .8em; margin-right: 4px; }
.c26b .c26b-tete a { font-weight: 600; font-size: 14.5px; color: var(--c26b-orange); text-decoration: none; white-space: nowrap; }
.c26b .c26b-tete a:hover { color: var(--c26b-orange-d); text-decoration: underline; }
.c26b-zone { position: relative; }
.c26b-liste { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 4 * 16px) / 5); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px 2px 12px; }
.c26b-liste::-webkit-scrollbar { display: none; }
.c26b a.c26b-carte { scroll-snap-align: start; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--c26b-ligne); border-radius: 12px; padding: 12px; text-decoration: none; color: var(--c26b-txt); transition: box-shadow .2s, border-color .2s, transform .2s; }
.c26b a.c26b-carte:hover { border-color: var(--c26b-orange); box-shadow: 0 6px 18px rgba(0,0,0,.08); transform: translateY(-2px); }
.c26b-img { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; background: var(--c26b-creme); border-radius: 8px; overflow: hidden; margin: 0 0 10px; }
.c26b .c26b-img img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; margin: 0; }
.c26b-badge { position: absolute; top: 8px; left: 8px; background: var(--c26b-orange); color: #fff; font-size: 12px; font-weight: 700; border-radius: 6px; padding: 3px 8px; line-height: 1.2; }
.c26b-badge.promo { background: var(--c26b-rouge); }
.c26b-titre { font-size: 13.5px; font-weight: 500; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-height: 54px; margin: 0 0 8px; }
.c26b-texte { font-size: 12.5px; color: var(--c26b-txt-l); line-height: 1.4; margin: -4px 0 10px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.c26b-prix { display: flex; flex-direction: column; margin: 0 0 10px; line-height: 1.2; }
.c26b-prix > small { font-size: 11.5px; color: var(--c26b-txt-l); }
.c26b-prix > span { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.c26b-prix b { font-size: 18px; font-weight: 700; color: var(--c26b-txt); white-space: nowrap; }
.c26b-prix b.promo { color: var(--c26b-rouge); }
.c26b-prix b small { font-size: 11.5px; color: var(--c26b-txt-l); font-weight: 600; }
.c26b-prix s { font-size: 13px; color: var(--c26b-txt-l); }
.c26b-btn { margin-top: auto; display: block; text-align: center; background: var(--c26b-orange); border-radius: 8px; padding: 9px 10px; font-size: 13.5px; font-weight: 600; color: #fff; transition: background .15s; }
.c26b a.c26b-carte:hover .c26b-btn { background: var(--c26b-orange-d); }
.c26b-fl { position: absolute; top: 38%; z-index: 2; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--c26b-ligne); background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.12); color: var(--c26b-txt); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.c26b-fl:hover { border-color: var(--c26b-orange); color: var(--c26b-orange); }
.c26b-fl.prec { left: -16px; }
.c26b-fl.suiv { right: -16px; }
@media (max-width: 1100px) { .c26b-liste { grid-auto-columns: calc((100% - 3 * 16px) / 4); } }
@media (max-width: 800px)  { .c26b-liste { grid-auto-columns: calc((100% - 2 * 12px) / 3); gap: 12px; } }
@media (max-width: 560px)  {
    .c26b-liste { grid-auto-columns: 46%; }
    .c26b-fl { display: none; }
    .c26b .c26b-tete h2 { font-size: 21px; }
}