/*
Theme Name: WPThea
Theme URI: https://wpthea.com
Author: WP-France-Thea
Author URI: https://wpthea.com
Description: Socle Gutenberg léger de WPThea.
Version: 0.3.1
Requires at least: 6.6
Requires PHP: 8.1
Text Domain: wpthea
*/

html {
    scroll-behavior: smooth;
}

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

body {
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    text-underline-offset: 0.18em;
}

/*
 * Marges de sécurité réutilisables dans Gutenberg.
 * Ajouter la classe "wpthea-safe" à un Groupe si nécessaire.
 */
.wpthea-safe {
    padding-left: max(24px, env(safe-area-inset-left));
    padding-right: max(24px, env(safe-area-inset-right));
}

/* Conteneur large réutilisable. */
.wpthea-container {
    width: min(100% - 48px, 1200px);
    margin-inline: auto;
}

@media (max-width: 782px) {
    .wpthea-safe {
        padding-left: max(20px, env(safe-area-inset-left));
        padding-right: max(20px, env(safe-area-inset-right));
    }

    .wpthea-container {
        width: min(100% - 40px, 1200px);
    }
}

@media (max-width: 480px) {
    .wpthea-safe {
        padding-left: max(18px, env(safe-area-inset-left));
        padding-right: max(18px, env(safe-area-inset-right));
    }

    .wpthea-container {
        width: min(100% - 36px, 1200px);
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/*
 * WooCommerce — identité visuelle WPThea.
 * Badges promo, prix, cartes catalogue et boutons Ajouter au panier.
 */

/* Badge promotion : rouge WPThea partout dans WooCommerce. */
.woocommerce span.onsale,
.wc-block-components-product-sale-badge,
.wc-block-grid__product-onsale,
.wp-block-woocommerce-product-image .wc-block-components-product-sale-badge {
    background: #EB2A32 !important;
    border-color: #EB2A32 !important;
    color: #FFFFFF !important;
}

/* Prix : ancien prix rouge barré, prix promotionnel bleu et plus visible. */
.woocommerce .price del,
.woocommerce div.product p.price del,
.woocommerce div.product span.price del,
.wc-block-components-product-price del,
.wc-block-components-product-price__regular {
    color: #EB2A32 !important;
    opacity: 1 !important;
    text-decoration-color: #EB2A32 !important;
    text-decoration-thickness: 1.5px;
}

.woocommerce .price ins,
.woocommerce div.product p.price ins,
.woocommerce div.product span.price ins,
.wc-block-components-product-price ins,
.wc-block-components-product-price__value.is-discounted {
    color: #012A68 !important;
    font-size: 1.35em !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

/* Quand il n'y a pas de promotion, le prix reste bleu WPThea. */
.woocommerce .price,
.wc-block-components-product-price {
    color: #012A68;
}

/* Empêche une carte seule de produire une image démesurée dans le catalogue. */
.wc-block-product .wc-block-components-product-image,
.wc-block-product .wp-block-woocommerce-product-image {
    width: 100%;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
}

.wc-block-product .wc-block-components-product-image img,
.wc-block-product .wp-block-woocommerce-product-image img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* Boutons Ajouter au panier : identité WPThea + mouvement discret au survol. */
.woocommerce a.button.add_to_cart_button,
.woocommerce button.button.single_add_to_cart_button,
.woocommerce button.single_add_to_cart_button,
.wc-block-components-product-button__button,
.wp-block-woocommerce-product-button .wp-block-button__link {
    background: #012A68 !important;
    color: #FFFFFF !important;
    border-color: #012A68 !important;
    border-radius: 999px !important;
    transition: transform .20s ease, box-shadow .20s ease, background-color .20s ease, border-color .20s ease !important;
    will-change: transform;
}

.woocommerce a.button.add_to_cart_button:hover,
.woocommerce button.button.single_add_to_cart_button:hover,
.woocommerce button.single_add_to_cart_button:hover,
.wc-block-components-product-button__button:hover,
.wp-block-woocommerce-product-button .wp-block-button__link:hover {
    background: #EB2A32 !important;
    border-color: #EB2A32 !important;
    color: #FFFFFF !important;
    transform: translateY(-3px) scale(1.025);
    box-shadow: 0 10px 24px rgba(1, 42, 104, .16);
}

.woocommerce a.button.add_to_cart_button:active,
.woocommerce button.button.single_add_to_cart_button:active,
.woocommerce button.single_add_to_cart_button:active,
.wc-block-components-product-button__button:active,
.wp-block-woocommerce-product-button .wp-block-button__link:active {
    transform: translateY(0) scale(.98);
    box-shadow: 0 4px 12px rgba(1, 42, 104, .12);
}

.woocommerce a.button.add_to_cart_button:focus-visible,
.woocommerce button.button.single_add_to_cart_button:focus-visible,
.woocommerce button.single_add_to_cart_button:focus-visible,
.wc-block-components-product-button__button:focus-visible,
.wp-block-woocommerce-product-button .wp-block-button__link:focus-visible {
    outline: 3px solid rgba(235, 42, 50, .28);
    outline-offset: 3px;
}

@media (max-width: 782px) {
    .wc-block-product .wc-block-components-product-image,
    .wc-block-product .wp-block-woocommerce-product-image {
        max-width: 280px;
    }
}

@media (max-width: 480px) {
    .wc-block-product .wc-block-components-product-image,
    .wc-block-product .wp-block-woocommerce-product-image {
        max-width: 250px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .woocommerce a.button.add_to_cart_button:hover,
    .woocommerce button.button.single_add_to_cart_button:hover,
    .woocommerce button.single_add_to_cart_button:hover,
    .wc-block-components-product-button__button:hover,
    .wp-block-woocommerce-product-button .wp-block-button__link:hover {
        transform: none;
    }
}