/* Boutique — rafraîchissement léger sur la baseline theme.css (scopé .tpl-boutique).
 * Icônes SVG (plus d'emoji), badges d'avantages, survols de cartes, accents.
 * 100% piloté par les tokens --color-*/--font-*.
 * ========================================================================= */

/* Avantages — badge d'icône SVG (remplace l'emoji) */
.tpl-boutique .advantage-icon { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface)); color: var(--color-primary); margin-bottom: 4px; }
.tpl-boutique .advantage-icon .adv-icon { width: 23px; height: 23px; }
.tpl-boutique .advantages article { transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; }
.tpl-boutique .advantages article:hover { transform: translateY(-3px); box-shadow: 0 14px 30px #0000000f; border-color: color-mix(in srgb, var(--color-primary) 30%, var(--color-border)); }
.tpl-boutique .advantages h2 { font-family: var(--font-heading); }

/* Hero — eyebrow accentué + léger liseré */
.tpl-boutique .hero { border: 1px solid color-mix(in srgb, var(--color-primary) 14%, var(--color-border)); }
.tpl-boutique .eyebrow { color: var(--color-primary); font-weight: 600; }
.tpl-boutique .hero-copy h1 { letter-spacing: -0.01em; }

/* Univers — titres et survol plus vivants */
.tpl-boutique .universe-grid a { transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; }
.tpl-boutique .universe-grid a:hover { border-color: color-mix(in srgb, var(--color-primary) 30%, var(--color-border)); }
.tpl-boutique .universe-grid strong { color: var(--color-text); transition: color 0.2s ease; }
.tpl-boutique .universe-grid a:hover strong { color: var(--color-primary); }
.tpl-boutique .universe-grid a::after { content: "→"; margin-top: auto; font-family: var(--font-heading); font-size: 1.25rem; color: var(--color-primary); opacity: 0; transform: translateX(-6px); transition: opacity 0.2s ease, transform 0.2s ease; }
.tpl-boutique .universe-grid a:hover::after { opacity: 1; transform: translateX(0); }

/* Titres de section + « Voir tout » */
.tpl-boutique .section-heading h2 { font-family: var(--font-heading); }
.tpl-boutique .section-heading a { text-decoration: none; font-weight: 600; color: var(--color-primary); }
.tpl-boutique .section-heading a:hover { text-decoration: underline; }

/* Cartes produit — survol cohérent */
.tpl-boutique .product-card { transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; }
.tpl-boutique .product-card:hover { border-color: color-mix(in srgb, var(--color-primary) 30%, var(--color-border)); }
.tpl-boutique .product-card-body .price { color: var(--color-primary); font-weight: 700; }

/* Grille produit — auto-fit pour remplir la rangée quand peu de produits */
.tpl-boutique .product-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }