*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --bg:     #ffffff;
    --ink:    #111111;
    --muted:  #6b6b6b;
    --faint:  #a3a3a3;
    --line:   #dcdcda;
    --panel:  #f4f4f2;
    --font-display: Georgia, 'Times New Roman', serif;
    --font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    --max-width: 720px;
}

html { -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--font-ui);
    font-size: 15px;
    line-height: 1.6;
    background: var(--bg);
    color: var(--ink);
}
a { color: var(--ink); }
img { max-width: 100%; display: block; }

.site-header {
    padding: 14px 20px;
    border-bottom: 1px solid var(--line);
}
.site-brand { font-family: var(--font-display); font-size: 18px; text-decoration: none; color: var(--ink); }
.site-logo { height: 90px; width: auto; display: block; }

main {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 24px 20px 60px;
}

.site-footer {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 24px 20px 40px;
    font-size: 12px;
    color: var(--faint);
    border-top: 1px solid var(--line);
}

.page-title { font-family: var(--font-display); font-weight: normal; font-size: 26px; margin-bottom: 10px; }
.page-lede { font-size: 14px; color: var(--muted); max-width: 46ch; margin-bottom: 20px; }

.disclosure {
    font-size: 12px;
    color: var(--faint);
    padding: 10px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    margin-bottom: 20px;
}

.empty { font-size: 14px; color: var(--muted); padding: 20px 0; }

/* Fil d'ariane */
.breadcrumb {
    font-size: 12px; color: var(--faint);
    margin-bottom: 20px;
    overflow-x: auto; white-space: nowrap;
}
.breadcrumb a { color: var(--faint); text-decoration: none; }
.breadcrumb a:hover { color: var(--ink); }
.breadcrumb-sep { margin: 0 6px; }
.breadcrumb-current { color: var(--ink); }

/* Fiche liste : intro */
.list-intro { margin-bottom: 20px; }
.list-cat-tag { display: block; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.list-intro h1 { font-family: var(--font-display); font-weight: normal; font-size: 26px; line-height: 1.2; margin-bottom: 10px; }
.list-intro p { font-size: 13.5px; color: var(--muted); max-width: 46ch; }
.list-count { font-size: 11.5px; color: var(--faint); margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }

/* Rows numérotées (produits) */
.rows { border-top: 1px solid var(--line); }
.rows-bordered { border: 1px solid var(--line); margin-top: 10px; }
.row {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 16px 4px;
    border-bottom: 1px solid var(--line);
    text-decoration: none; color: var(--ink);
}
.rows-bordered .row { padding: 16px; }
.row:hover .row-title { text-decoration: underline; }
.row-idx { font-family: var(--font-display); font-size: 13px; color: var(--faint); min-width: 20px; padding-top: 2px; flex-shrink: 0; }
.row-thumb { width: 52px; height: 68px; flex-shrink: 0; background: var(--panel); overflow: hidden; }
.row-thumb img { width: 100%; height: 100%; object-fit: cover; }
.row-info { flex: 1; min-width: 0; }
.row-title { display: block; font-size: 14px; line-height: 1.35; margin-bottom: 4px; }
.row-price { font-size: 12.5px; color: var(--muted); }

/* Variante grid (fiche liste) : visuel en avant, numéro en badge sur l'image */
.rows-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 20px 16px;
    border-top: none;
}
.rows-grid .row {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
    border-bottom: none;
}
.rows-grid .row-thumb {
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 3/4;
}
.rows-grid .row-idx {
    position: absolute;
    top: 6px;
    left: 6px;
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 600;
    color: var(--bg);
    background: rgba(17, 17, 17, .85);
    padding: 2px 6px;
    line-height: 1.4;
    min-width: 0;
}
.rows-grid .row-info { padding-top: 8px; }

/* Pagination */
.pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13px; }
.pagination a { color: var(--ink); text-decoration: none; }
.pagination a:hover { text-decoration: underline; }
.pagination-status { color: var(--muted); font-size: 12px; }

/* Maillage interne (catalogue, catégories, listes sœurs) */
.catalog-cat { margin-bottom: 32px; }
.catalog-cat h2 { font-family: var(--font-display); font-weight: normal; font-size: 18px; margin-bottom: 10px; }
.catalog-cat h2 a { text-decoration: none; }
.catalog-cat h2 a:hover { text-decoration: underline; }

.siblings { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line); }
.siblings h2 { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 10px; }

.link-rows { list-style: none; }
.link-rows li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.link-rows li:last-child { border-bottom: none; }
.link-rows a { text-decoration: none; color: var(--ink); display: flex; flex-direction: column; gap: 2px; }
.link-rows a:hover .link-rows-name { text-decoration: underline; }
.link-rows-cat { font-size: 11px; color: var(--muted); }
.link-rows-name { font-size: 14px; }
.link-rows-desc { font-size: 12.5px; color: var(--muted); }
.link-rows-count { font-size: 12.5px; color: var(--faint); flex-shrink: 0; }

/* Fiche produit */
.product-hero { margin-bottom: 24px; }
.product-hero-thumb { width: 100%; max-width: 220px; aspect-ratio: 3/4; background: var(--panel); margin-bottom: 18px; overflow: hidden; }
.product-hero-thumb img { width: 100%; height: 100%; object-fit: cover; }
.product-hero-fromlist { font-size: 11px; color: var(--faint); margin-bottom: 8px; }
.product-hero-fromlist a { color: var(--muted); border-bottom: 1px solid var(--line); text-decoration: none; }
.product-hero h1 { font-family: var(--font-display); font-weight: normal; font-size: 21px; line-height: 1.3; margin-bottom: 12px; }
.product-hero-price-row { margin-bottom: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.product-hero-price { font-size: 19px; font-family: var(--font-display); }
.product-cta {
    display: block; max-width: 320px; text-align: center;
    background: var(--ink); color: var(--bg);
    font-weight: 600; font-size: 13px; letter-spacing: .02em;
    padding: 13px; text-decoration: none;
}
.product-cta:hover { background: #333; }
.product-ctas { display: flex; flex-wrap: wrap; gap: 10px; max-width: 320px; }
.product-cta-logo {
    display: flex; align-items: center; justify-content: center;
    padding: 10px 13px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 8px;
}
.product-cta-logo:hover { background: var(--panel); }
.product-cta-logo img { height: 40px; width: auto; display: block; }
.product-affiliate-note { font-size: 10.5px; color: var(--faint); margin-top: 10px; max-width: 320px; }

.product-desc { margin-bottom: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.product-desc h2 { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--faint); margin-bottom: 10px; }
.product-desc p { font-size: 13.5px; line-height: 1.7; }

.product-same-list { padding-top: 20px; border-top: 1px solid var(--line); }
.product-same-list h2 { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--faint); margin-bottom: 4px; }

@media (min-width: 640px) {
    .product-hero { display: grid; grid-template-columns: 220px 1fr; gap: 28px; align-items: start; }
    .product-hero-thumb { margin-bottom: 0; }
}