/**
 * main.css — chef d'orchestre.
 *
 * Utilise les @layer de CSS Cascade Layers pour :
 *  - Contrôler la priorité explicitement (pas de guerre de spécificité)
 *  - Permettre aux styles utilisateurs / WooCommerce de surcharger facilement
 *
 * Ordre de priorité (du plus faible au plus fort) :
 *  reset → tokens → base → layout → components → pages → utilities
 */

@layer reset, tokens, base, layout, components, pages, utilities;

/* Ordre d'import correspondant à l'ordre des layers */
@import url("./reset.css")                       layer(reset);
@import url("./tokens.css")                      layer(tokens);
@import url("./base.css")                        layer(base);
@import url("./layout.css")                      layer(layout);
@import url("./components/button.css")           layer(components);
@import url("./components/nav.css")              layer(components);
@import url("./components/footer.css")           layer(components);
@import url("./components/product-card.css")     layer(components);
@import url("./components/boutik-modal.css")     layer(components);
@import url("./components/search-modal.css")     layer(components);
@import url("./components/mini-cart.css")        layer(components);
@import url("./components/mini-cart-popover.css") layer(components);
@import url("./components/site-cursor.css")      layer(components);