/* ============================================
   STOREFRONT CHILD - Style Manu Breysse
   Adaptation du style page d'accueil → Boutique
   ============================================ */

/* Variables CSS */
:root {
    --c-blue: #667eea;
    --c-purple: #764ba2;
    --c-rose: #f093fb;
    --c-glass: rgba(30, 30, 50, 0.8);
    --radius-main: 22px;
    --transition-fast: 0.3s ease;
    --transition-smooth: 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ============================================
   BODY & BACKGROUND
   ============================================ */
body {
    background: linear-gradient(135deg, var(--c-blue) 0%, var(--c-purple) 50%, var(--c-rose) 100%) !important;
    background-attachment: fixed !important;
    color: #ffffff !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
}

/* ============================================
   HEADER
   ============================================ */
.site-header {
    background: rgba(30, 30, 50, 0.95) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    position: relative !important;
}

/* Logo et lien retour vers le site principal */
.storefront-child-site-logo-wrapper {
    position: absolute !important;
    top: 1rem !important;
    right: 1rem !important;
    z-index: 1000 !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
}

.storefront-child-site-logo-link {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    text-decoration: none !important;
    color: #ffffff !important;
    transition: all var(--transition-fast) !important;
    padding: 0.5rem 1rem !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

.storefront-child-site-logo-link:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    transform: translateY(-2px) !important;
    color: var(--c-rose) !important;
}

.storefront-child-site-logo {
    width: 40px !important;
    height: 40px !important;
    object-fit: contain !important;
    display: block !important;
    filter: brightness(0) invert(1) !important;
    transition: all var(--transition-fast) !important;
}

.storefront-child-site-logo-link:hover .storefront-child-site-logo {
    filter: brightness(0) invert(1) sepia(1) saturate(5) hue-rotate(280deg) !important;
}

.storefront-child-site-link-text {
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
}

/* ============================================
   CORRECTION RECHERCHE - Éviter superposition loupe/texte
   ============================================ */

/* Champ de recherche dans le header */
.widget_product_search input[type="search"],
.widget_product_search input[type="text"] {
    padding-left: 3rem !important; /* Augmenter le padding pour laisser place à la loupe */
    padding-right: 1.2rem !important;
}

/* Position de l'icône de loupe */
.widget_product_search form::before {
    left: 1.2rem !important; /* Ajuster la position de la loupe */
    top: 50% !important;
    transform: translateY(-50%) !important;
    pointer-events: none !important; /* Permettre de cliquer à travers l'icône */
    z-index: 1 !important;
}

/* S'assurer que le formulaire a une position relative */
.widget_product_search form {
    position: relative !important;
}

/* Ajuster le placeholder pour qu'il ne chevauche pas l'icône */
.widget_product_search input[type="search"]::placeholder,
.widget_product_search input[type="text"]::placeholder {
    padding-left: 0 !important;
    text-indent: 0 !important;
}

/* Pour la recherche dans le header (site-search) */
.site-search .widget_product_search input[type="search"],
.site-search .widget_product_search input[type="text"] {
    padding-left: 3rem !important;
}

.site-search .widget_product_search form::before {
    left: 1.2rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

/* Responsive - ajuster sur petits écrans */
@media (max-width: 768px) {
    .widget_product_search input[type="search"],
    .widget_product_search input[type="text"] {
        padding-left: 2.5rem !important;
        font-size: 0.9rem !important;
    }
    
    .widget_product_search form::before {
        left: 1rem !important;
        font-size: 0.9rem !important;
    }
}

/* Responsive - masquer le texte sur petits écrans */
@media (max-width: 768px) {
    .storefront-child-site-link-text {
        display: none !important;
    }
    
    .storefront-child-site-logo-wrapper {
        top: 0.5rem !important;
        right: 0.5rem !important;
    }
    
    .storefront-child-site-logo {
        width: 36px !important;
        height: 36px !important;
    }
    
    .storefront-child-site-logo-link {
        padding: 0.4rem 0.6rem !important;
    }
}

.site-title a,
.main-navigation ul li a,
.cart-contents,
.site-header-cart .widget_shopping_cart a {
    color: #ffffff !important;
}

.site-title a:hover,
.main-navigation ul li a:hover,
.main-navigation ul li:hover > a,
.cart-contents:hover,
.site-header-cart .widget_shopping_cart a:hover {
    color: var(--c-rose) !important;
}

/* Menu mobile */
button.menu-toggle,
button.menu-toggle:hover {
    background-color: rgba(30, 30, 50, 0.9) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}

button.menu-toggle:after,
button.menu-toggle:before,
button.menu-toggle span:before {
    background-color: #ffffff !important;
}

/* Panier dans le header */
.site-header-cart .widget_shopping_cart {
    background: rgba(30, 30, 50, 0.95) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: var(--radius-main) !important;
}

.site-header-cart .widget_shopping_cart .total,
.site-header-cart .widget_shopping_cart .buttons {
    background-color: rgba(40, 40, 60, 0.8) !important;
}

/* ============================================
   BOUTONS
   ============================================ */
.button,
.add_to_cart_button,
input[type="submit"],
input[type="button"],
input[type="reset"],
button[type="submit"],
.wc-block-components-button:not(.is-link),
.wc-block-grid__products .wc-block-grid__product .wp-block-button__link {
    background: linear-gradient(135deg, var(--c-blue), var(--c-purple)) !important;
    color: white !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 0.9rem 2.4rem !important;
    font-weight: 600 !important;
    transition: var(--transition-fast) !important;
    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4) !important;
    text-decoration: none !important;
}

.button:hover,
.add_to_cart_button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.wc-block-components-button:not(.is-link):hover,
.wc-block-grid__products .wc-block-grid__product .wp-block-button__link:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 15px 40px rgba(102, 126, 234, 0.6) !important;
    background: linear-gradient(135deg, var(--c-purple), var(--c-rose)) !important;
}

/* Boutons alternatifs (checkout, etc.) */
.button.alt,
.added_to_cart.alt,
.widget a.button.checkout {
    background: linear-gradient(135deg, var(--c-purple), var(--c-rose)) !important;
}

.button.alt:hover,
.added_to_cart.alt:hover,
.widget a.button.checkout:hover {
    background: linear-gradient(135deg, var(--c-rose), var(--c-blue)) !important;
}

/* ============================================
   PRODUITS
   ============================================ */
/* Liste des produits */
ul.products {
    margin: 0 !important;
}

ul.products li.product {
    background: rgba(30, 30, 50, 0.8) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: var(--radius-main) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 1.5rem !important;
    transition: transform 0.35s ease, box-shadow 0.35s ease !important;
    overflow: hidden;
}

ul.products li.product:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5) !important;
    border-color: rgba(240, 147, 251, 0.3) !important;
}

/* Images produits */
ul.products li.product img {
    border-radius: 12px !important;
    transition: transform 0.3s ease !important;
}

ul.products li.product:hover img {
    transform: scale(1.05) !important;
}

/* Titres produits */
.woocommerce-loop-product__title,
.wc-block-grid__product-title {
    color: #ffffff !important;
    font-weight: 600 !important;
}

.woocommerce-loop-product__title:hover {
    color: var(--c-rose) !important;
}

/* Prix */
.price,
.woocommerce-Price-amount {
    color: var(--c-rose) !important;
    font-weight: 600 !important;
}

/* Badge "En solde" */
.onsale,
.wc-block-grid__product-onsale {
    background: linear-gradient(135deg, var(--c-rose), var(--c-purple)) !important;
    color: white !important;
    border-radius: 20px !important;
    padding: 0.5rem 1rem !important;
    font-weight: 600 !important;
}

/* ============================================
   PAGE BOUTIQUE
   ============================================ */
/* Titre de la page boutique */
.woocommerce-products-header__title {
    color: #ffffff !important;
    font-size: 2.4rem !important;
    font-weight: 700 !important;
    margin-bottom: 2rem !important;
}

/* Zone de tri et résultats */
.storefront-sorting {
    background: rgba(30, 30, 50, 0.6) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: var(--radius-main) !important;
    padding: 1.5rem !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    margin-bottom: 2rem !important;
}

/* Select de tri */
.orderby {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 12px !important;
    color: #ffffff !important;
    padding: 0.8rem 1.2rem !important;
    font-size: 1rem !important;
}

.orderby:focus {
    outline: none !important;
    background: rgba(102, 126, 234, 0.15) !important;
    border-color: rgba(102, 126, 234, 0.4) !important;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
}

.orderby option {
    background: rgba(30, 30, 50, 0.95) !important;
    color: #ffffff !important;
}

/* Compteur de résultats */
.woocommerce-result-count {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* ============================================
   RECHERCHE PRODUITS
   ============================================ */
.widget_product_search input[type="search"],
.widget_product_search input[type="text"] {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 12px !important;
    color: #ffffff !important;
    padding: 0.8rem 1.2rem !important;
}

.widget_product_search input[type="search"]:focus,
.widget_product_search input[type="text"]:focus {
    outline: none !important;
    background: rgba(102, 126, 234, 0.15) !important;
    border-color: rgba(102, 126, 234, 0.4) !important;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
}

.widget_product_search input[type="search"]::placeholder,
.widget_product_search input[type="text"]::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
}

.widget_product_search button[type="submit"] {
    background: linear-gradient(135deg, var(--c-blue), var(--c-purple)) !important;
    color: white !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 0.8rem 1.5rem !important;
}

/* ============================================
   TYPOGRAPHIE
   ============================================ */
h1, h2, h3, h4, h5, h6,
.woocommerce-products-header__title,
.section-title {
    color: #ffffff !important;
}

body,
p,
.woocommerce-result-count {
    color: rgba(255, 255, 255, 0.9) !important;
}

a {
    color: var(--c-rose) !important;
}

a:hover,
a:focus {
    color: var(--c-blue) !important;
}

/* ============================================
   FOOTER
   ============================================ */
.site-footer {
    background: rgba(20, 20, 35, 0.95) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    color: rgba(255, 255, 255, 0.8) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer h5,
.site-footer h6,
.site-footer .widget .widget-title,
.site-footer .widget .widgettitle {
    color: #ffffff !important;
}

.site-footer a:not(.button):not(.components-button) {
    color: var(--c-rose) !important;
}

.site-footer a:hover {
    color: var(--c-blue) !important;
}

/* Footer mobile */
.storefront-handheld-footer-bar {
    background: rgba(20, 20, 35, 0.95) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.storefront-handheld-footer-bar a {
    color: rgba(255, 255, 255, 0.9) !important;
}

.storefront-handheld-footer-bar a:hover {
    color: var(--c-rose) !important;
}

.storefront-handheld-footer-bar ul li.cart .count {
    background-color: var(--c-rose) !important;
    color: #ffffff !important;
    border-color: #ffffff !important;
}

/* ============================================
   PAGINATION
   ============================================ */
.pagination .page-numbers li .page-numbers,
.woocommerce-pagination .page-numbers li .page-numbers {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

.pagination .page-numbers li .page-numbers.current,
.woocommerce-pagination .page-numbers li .page-numbers.current {
    background: linear-gradient(135deg, var(--c-blue), var(--c-purple)) !important;
    color: #ffffff !important;
}

.pagination .page-numbers li a.page-numbers:hover,
.woocommerce-pagination .page-numbers li a.page-numbers:hover {
    background-color: rgba(102, 126, 234, 0.3) !important;
}

/* ============================================
   FORMULAIRES
   ============================================ */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="search"],
textarea,
.input-text {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 12px !important;
    color: #ffffff !important;
    padding: 0.8rem 1.2rem !important;
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
textarea:focus,
.input-text:focus {
    outline: none !important;
    background: rgba(102, 126, 234, 0.15) !important;
    border-color: rgba(102, 126, 234, 0.4) !important;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
}

input::placeholder,
textarea::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* ============================================
   PAGES PRODUIT INDIVIDUEL
   ============================================ */
.single-product .product {
    background: rgba(30, 30, 50, 0.6) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: var(--radius-main) !important;
    padding: 2rem !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.single-product .product_title {
    color: #ffffff !important;
}

.single-product .price {
    color: var(--c-rose) !important;
}

/* ============================================
   PANIER & CHECKOUT
   ============================================ */
.woocommerce-cart table.cart,
.woocommerce-checkout #order_review {
    background: rgba(30, 30, 50, 0.6) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: var(--radius-main) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

table.cart th,
table.cart td {
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    .woocommerce-products-header__title {
        font-size: 1.8rem !important;
    }
    
    ul.products li.product {
        padding: 1rem !important;
    }
    
    .button,
    .add_to_cart_button {
        padding: 0.7rem 1.8rem !important;
        font-size: 0.9rem !important;
    }
}

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

ul.products li.product {
    animation: fadeIn 0.5s ease-out;
}

/* ============================================
   CORRECTIONS PAGE PANIER
   ============================================ */

/* 1. Bouton "Valider la commande" - Supprimer les bords blancs */
.woocommerce-cart .wc-proceed-to-checkout .checkout-button,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
#place_order,
button[name="checkout"] {
    border-radius: 999px !important;
    border: none !important;
    background: linear-gradient(135deg, var(--c-blue), var(--c-purple)) !important;
    color: white !important;
    padding: 0.9rem 2.4rem !important;
    font-weight: 600 !important;
    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4) !important;
}

.woocommerce-cart .wc-proceed-to-checkout .checkout-button:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
#place_order:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 15px 40px rgba(102, 126, 234, 0.6) !important;
    background: linear-gradient(135deg, var(--c-purple), var(--c-rose)) !important;
}

/* 2. Résumé de commande - Style visuel */
.woocommerce-cart .cart-collaterals .cart_totals,
.woocommerce-checkout #order_review {
    background: rgba(30, 30, 50, 0.8) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: var(--radius-main) !important;
    padding: 2rem !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.cart_totals table,
#order_review table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

.cart_totals table th,
.cart_totals table td,
#order_review table th,
#order_review table td {
    padding: 1rem 0.5rem !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

.cart_totals table th,
#order_review table th {
    text-align: left !important;
    font-weight: 600 !important;
    width: 50% !important;
}

.cart_totals table td,
#order_review table td {
    text-align: right !important;
}

/* Style du total */
.cart_totals .order-total th,
.cart_totals .order-total td,
#order_review .order-total th,
#order_review .order-total td {
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    color: var(--c-rose) !important;
    border-top: 2px solid rgba(255, 255, 255, 0.2) !important;
    padding-top: 1.5rem !important;
}

/* 3. Labels des champs - Ajouter de l'espace */
.woocommerce-cart .woocommerce-billing-fields label,
.woocommerce-checkout .woocommerce-billing-fields label,
.woocommerce-checkout .woocommerce-shipping-fields label,
.woocommerce form .form-row label {
    display: block !important;
    margin-bottom: 0.5rem !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 0.95rem !important;
}

.woocommerce form .form-row {
    margin-bottom: 1.5rem !important;
}

.woocommerce form .form-row input[type="text"],
.woocommerce form .form-row input[type="email"],
.woocommerce form .form-row input[type="tel"],
.woocommerce form .form-row input[type="number"],
.woocommerce form .form-row select,
.woocommerce form .form-row textarea {
    margin-top: 0.5rem !important;
    width: 100% !important;
}

/* Labels "required" */
.woocommerce form .form-row .required {
    color: var(--c-rose) !important;
    margin-left: 0.25rem !important;
}

/* Amélioration générale du tableau panier */
.woocommerce-cart table.cart {
    border-radius: var(--radius-main) !important;
    overflow: hidden !important;
}

.woocommerce-cart table.cart thead th {
    background: rgba(40, 40, 60, 0.6) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    padding: 1rem !important;
    border-bottom: 2px solid rgba(255, 255, 255, 0.2) !important;
}

.woocommerce-cart table.cart tbody td {
    padding: 1.5rem 1rem !important;
    vertical-align: middle !important;
}

.woocommerce-cart table.cart tbody tr:last-child td {
    border-bottom: none !important;
}

/* Boutons d'action du panier */
.woocommerce-cart .actions {
    padding: 1.5rem !important;
    background: rgba(40, 40, 60, 0.4) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.woocommerce-cart .actions .button {
    margin-right: 1rem !important;
}

/* Responsive panier */
@media (max-width: 768px) {
    .woocommerce-cart table.cart {
        font-size: 0.9rem !important;
    }
    
    .woocommerce-cart table.cart tbody td {
        padding: 1rem 0.5rem !important;
    }
    
    .cart_totals,
    #order_review {
        padding: 1.5rem !important;
    }
}

/* Style du lien "Retour au site" */
.main-navigation .menu-item-home-site a {
    color: var(--c-rose) !important;
    font-weight: 600 !important;
}

.main-navigation .menu-item-home-site a:hover {
    color: var(--c-blue) !important;
}

/* ============================================
   IMAGE DANS LE HEADER - Taille adaptée au titre
   ============================================ */

/* Image dans le header - même hauteur que le titre */
.storefront-child-header-image {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
}

.storefront-child-header-image .header-site-image {
    max-height: 1.5em !important; /* Hauteur relative à la taille de police du titre */
    height: auto;
    width: auto;
    max-width: 200px; /* Largeur maximale pour éviter qu'elle soit trop large */
    object-fit: contain;
    vertical-align: middle;
}

/* Si l'image est à côté du logo/titre */
.site-branding {
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
}

.storefront-child-logo-image .logo-header-image {
    max-height: 1.5em !important; /* Même hauteur que le titre */
    height: auto;
    width: auto;
    max-width: 150px;
    object-fit: contain;
    vertical-align: middle;
}

/* Alternative : utiliser la hauteur exacte du titre en pixels */
.site-title {
    line-height: 1.2;
    font-size: 1.618em; /* Taille par défaut Storefront */
}

/* Ajuster l'image pour correspondre exactement */
.storefront-child-header-image .header-site-image,
.storefront-child-logo-image .logo-header-image {
    max-height: calc(1.618em * 1.2) !important; /* Hauteur = font-size * line-height */
    height: auto;
    width: auto;
    max-width: 200px;
}

/* Responsive */
@media (max-width: 768px) {
    .storefront-child-header-image .header-site-image,
    .storefront-child-logo-image .logo-header-image {
        max-height: calc(1.4em * 1.2) !important; /* Légèrement plus petit sur mobile */
        max-width: 120px;
    }
}