/* DECO_STYLES_V1 — guide comparé des styles (deco-styles). Cards on the shared mobile rail (CARD_RAIL_V1); tones of ej-compare. */
.deco-styles{--ds-ink:var(--color-text,#2b2622);--ds-muted:var(--color-text-muted,#6b625a);--ds-line:color-mix(in srgb,var(--ds-ink) 12%,transparent);--ds-a:var(--color-accent,#8a6a4f);margin-block:1.5rem}
.deco-styles__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.deco-styles__grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.deco-styles__card{display:flex;flex-direction:column;border:1px solid var(--ds-line);border-radius:var(--radius,16px);overflow:hidden;background:var(--color-bg,#fff)}
.deco-styles__image{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.deco-styles__palette{display:flex;height:14px}.deco-styles__palette span{flex:1}
.deco-styles__content{padding:16px;display:grid;gap:10px;align-content:start}
.deco-styles .deco-styles__name{margin:0;font-size:1.2rem;line-height:1.25;color:var(--ds-ink)}
.deco-styles .deco-styles__essence{margin:0;color:var(--ds-ink);line-height:1.5}
.deco-styles .deco-styles__materials{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0}
.deco-styles__materials li{padding:3px 10px;border-radius:999px;background:color-mix(in srgb,var(--ds-a) 10%,var(--color-bg,#fff));color:var(--ds-ink);font-size:.85rem}
.deco-styles__kicker{display:block;font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;font-weight:700;color:var(--ds-a);margin-bottom:4px}
.deco-styles .deco-styles__pieces{margin:0;padding:0;display:grid;gap:4px}
.deco-styles .deco-styles__pieces li{display:flex;align-items:baseline;gap:8px;margin:0;color:var(--ds-ink);line-height:1.45}
.deco-styles__bullet{flex:none;width:6px;height:6px;border-radius:50%;background:var(--ds-a);transform:translateY(-2px)}
.deco-styles .deco-styles__materials li{margin:0}
.deco-styles .deco-styles__fits,.deco-styles .deco-styles__avoid{margin:0;color:var(--ds-ink);line-height:1.45;font-size:.95rem}
.deco-styles .deco-styles__avoid{padding:10px 12px;border-radius:10px;background:color-mix(in srgb,var(--ds-ink) 5%,var(--color-bg,#fff))}
.deco-styles__table-wrap{margin-top:16px;overflow-x:auto}
.deco-styles__table{width:100%;border-collapse:collapse;font-size:.95rem}
.deco-styles__table th,.deco-styles__table td{padding:10px 12px;border-bottom:1px solid var(--ds-line);text-align:left;color:var(--ds-ink)}
.deco-styles__table thead th{font-size:.85rem;color:var(--ds-muted)}
.deco-styles__table tbody tr:last-child>*{border-bottom:0}
.deco-styles__tone{display:inline-block;padding:2px 10px;border-radius:999px;font-size:.82rem;font-weight:700}
.deco-styles__tone--good{background:color-mix(in srgb,#2f7d4f 15%,var(--color-bg,#fff));color:#24603d}
.deco-styles__tone--ok{background:color-mix(in srgb,#b7791f 16%,var(--color-bg,#fff));color:#7a5214}
.deco-styles__tone--bad{background:color-mix(in srgb,#b23b3b 13%,var(--color-bg,#fff));color:#8a2c2c}
.deco-styles .deco-styles__note{margin:12px 0 0;font-size:.88rem;color:var(--ds-muted);line-height:1.5}
.deco-styles .visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:960px){.deco-styles__grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Mobile: the shared rail (card-rail.css) turns the grid into a swipe rail of whole cards. */
/* The article theme styles every list of the content (disc, indent, marker): these lists are layout, not prose. */
.deco-styles ul{list-style:none!important;padding-left:0!important;margin-left:0!important}.deco-styles li{list-style:none!important}.deco-styles li::before{content:none!important}
.deco-styles li{margin-bottom:0}