/*------- Tuile fermée V5, reproduite depuis zerzoom-app/src/components/DealCard.tsx
 * (rendu FERMÉ, k = 1 → 414 px) et src/lib/skinDefaut.ts (skin par défaut).
 * Chaque valeur ci-dessous est celle du composant, pas une approximation. -------*/
.tuiles{display:grid;grid-template-columns:repeat(auto-fit,414px);gap:22px 26px;justify-content:center;font-family:var(--f-texte);color:#0B3B36}
.tz{width:414px;zoom:var(--k,1);background:#FFFDF8;border:2px solid #0B3B36;border-radius:12px;box-shadow:6px 7px 0 rgba(11,59,54,.12);overflow:hidden;margin-bottom:10px;text-align:left}
.tz-head{height:59px;display:flex;align-items:center;padding:0 8px}
.tz-logo{width:50px;height:50px;border-radius:2px;object-fit:contain;background:#FFFFFF;flex-shrink:0}
.tz-nom{color:#0B3B36;font-weight:700;font-size:18px;margin-left:10px;letter-spacing:.4px;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.tz-btn{height:40px;margin-left:4px;border:0;box-shadow:inset 0 0 0 1.5px #0B3B36;border-radius:10px;background:#FFFDF8;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#0B3B36;font-weight:700;letter-spacing:.3px}
.tz-btn img{display:block}
.tz-btn--carre{width:40px;flex-direction:column;gap:0;font-size:8.5px}
.tz-btn--carre img{width:20px;height:20px}
.tz-btn--large{min-width:98px;padding:0 8px;flex-direction:row;gap:6px;font-size:10px}
.tz-btn--large img{width:24px;height:24px}
.tz-btn span{white-space:nowrap}
.tz-panneau{margin:0 7px 7px;border-radius:8px;background:#EAE4D3;padding:8px;display:flex;flex-direction:row}
.tz-txt{flex:1;min-width:0}
.tz-titre{color:#0B3B36;font-weight:700;font-size:14px;line-height:18px;text-transform:uppercase;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tz-info{color:#66736F;font-size:13px;margin-top:2.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tz-info b{color:#154E48;font-weight:600}
.tz-info .date{font-weight:700}
.tz-col{display:flex;flex-direction:column;align-items:center;justify-content:center;margin-left:8px;flex-shrink:0}
.tz-photo{width:86px;height:86px;border-radius:8px;background:#FFFFFF;border:1px solid rgba(11,59,54,.35);overflow:hidden;display:flex;align-items:center;justify-content:center}
.tz-photo img{width:100%;height:100%;object-fit:cover;object-position:center}
.tz-prix{margin-top:6px;width:86px;height:38px;border-radius:8px;border:0;box-shadow:inset 0 0 0 1.5px #FF6B35;color:#FF6B35;font-weight:700;font-size:22px;display:flex;align-items:center;justify-content:center;padding:0 4px;white-space:nowrap;overflow:hidden}
@media (max-width:460px){
  .tuiles{grid-template-columns:1fr;justify-items:center}
}

/*------- tuiles posees dans la page commercants : heros + trois exemples -------*/
.tuile-hero{width:100%;max-width:414px;min-width:0;justify-self:center}
.exemples{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
.ex{display:flex;flex-direction:column;min-width:0}
.ex > [data-tuiles]{min-width:0;overflow:hidden}
.ex .tz{margin-bottom:16px}
.ex h3{font-size:22px;font-weight:700;margin:0 0 8px;font-family:var(--f-titre)}
.ex p{margin:0;color:rgba(243,239,228,.82)}
@media (max-width:960px){
  .exemples{grid-template-columns:1fr;gap:34px}
  .ex{align-items:stretch}
}