/*
Theme Name: Stickers Auto & Textile Pro "No-Backend"
Theme URI: https://stickers.kilianmilliez.fr
Description: Refonte totale du design via CSS uniquement. Style Racing/Streetwear sombre.
Author: Kilian Milliez
Template: storefront
Version: 3.0.0 DRÁSTIQUE
*/

/* =========================================
   1. VARIABLES & RESET (L'ADN du design)
========================================= */
:root {
    --racing-red: #ff3b30;      /* Rouge sport vif */
    --asphalt-dark: #1c1c1e;    /* Noir style bitume */
    --carbon-grey: #2c2c2e;     /* Gris foncé style carbone */
    --pure-white: #ffffff;
    --off-white: #f2f2f7;       /* Gris très clair pour le fond */
    --neon-yellow: #dfff00;     /* Accent optionnel */
    
    --font-title: 'Montserrat', sans-serif;
    --font-body: 'Open Sans', sans-serif;
    
    --card-shadow: 0 15px 35px rgba(0,0,0,0.1);
    --card-radius: 16px;        /* Coins très arrondis style sticker */
}

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

body {
    background-color: var(--off-white);
    color: var(--asphalt-dark);
    font-family: var(--font-body);
    line-height: 1.7;
}

/* Titres ultra impactants */
h1, h2, h3, h4, h5, h6, .site-title {
    font-family: var(--font-title);
    font-weight: 900; /* Très gras */
    text-transform: uppercase;
    letter-spacing: -0.5px;
    color: var(--asphalt-dark);
    margin-bottom: 0.8em;
}

/* Titres de section (ex: Produits récents) */
.woocommerce-loop-product__title, h2.woocommerce-loop-category__title {
    font-weight: 700 !important;
    font-size: 1.4rem !important;
}

a { color: var(--asphalt-dark); text-decoration: none; transition: 0.3s; }
a:hover { color: var(--racing-red); }

/* Force le site en pleine largeur, vire les sidebars */
.content-area { width: 100% !important; float: none !important; margin: 0 !important; }
#secondary { display: none !important; } /* Cache la sidebar si elle ose apparaître */
.col-full { max-width: 1400px; margin: 0 auto; padding: 0 20px; }


/* =========================================
   2. HEADER & NAVIGATION (Look Pro forcé)
========================================= */
.site-header {
    background-color: var(--asphalt-dark) !important;
    padding: 20px 0;
    border-bottom: 4px solid var(--racing-red);
    margin-bottom: 40px;
}

/* Si pas de logo, le titre devient le logo textuel */
.site-branding .site-title a {
    color: var(--pure-white) !important;
    font-size: 2.2rem;
    font-style: italic; /* Look vitesse */
}
.site-description { color: #888 !important; font-weight: 600; text-transform: uppercase;}

/* Navigation principale (même si vide, ça fera propre) */
.main-navigation {
    background: transparent !important;
    border-top: 1px solid rgba(255,255,255,0.1);
    margin-top: 20px;
}

.main-navigation ul li a {
    color: var(--pure-white) !important;
    font-family: var(--font-title);
    font-weight: 700;
    text-transform: uppercase;
    padding: 15px 20px !important;
}
.main-navigation ul li:hover > a {
    color: var(--racing-red) !important;
    background: rgba(255,255,255,0.05);
}

/* Panier dans le header */
.site-header-cart .cart-contents {
    color: var(--pure-white) !important;
    background-color: var(--carbon-grey);
    border-radius: 50px;
    padding: 5px 15px !important;
}
.site-header-cart .cart-contents:hover { background-color: var(--racing-red); }


/* =========================================
   3. LES PRODUITS : DESIGN "CARTE STICKER"
   C'est ici que ça change tout.
========================================= */
ul.products {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 30px;
}

ul.products li.product {
    background: var(--pure-white);
    border-radius: var(--card-radius);
    overflow: hidden;
    padding: 0 !important;
    margin-bottom: 0 !important; /* Reset Storefront */
    box-shadow: var(--card-shadow);
    border: 2px solid transparent;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    float: none !important; width: auto !important; /* Reset pour la grille moderne */
}

/* Effet "POP" au survol : la carte monte et le bord devient rouge */
ul.products li.product:hover {
    transform: translateY(-10px) scale(1.02);
    border-color: var(--racing-red);
    box-shadow: 0 20px 40px rgba(231, 76, 60, 0.2);
}

/* L'image produit */
ul.products li.product a img {
    margin-bottom: 0 !important;
    width: 100%;
    height: 300px; /* Hauteur fixe pour l'uniformité */
    object-fit: cover; /* L'image remplit le cadre sans déformer */
    background-color: #eee; /* Fond gris si l'image charge */
    border-bottom: 3px solid var(--racing-red);
}

/* Conteneur texte sous l'image */
ul.products li.product .woocommerce-loop-product__title {
    padding: 20px 20px 5px;
    color: var(--asphalt-dark);
}

/* Prix */
ul.products li.product .price {
    display: block;
    padding: 0 20px 15px;
    color: var(--racing-red) !important;
    font-family: var(--font-title);
    font-weight: 900;
    font-size: 1.5rem;
}

/* Bouton d'ajout au panier DANS la carte */
ul.products li.product .button {
    width: 100%;
    margin: 0;
    border-radius: 0 !important;
    background-color: var(--asphalt-dark) !important;
    color: var(--pure-white) !important;
    padding: 18px 0 !important;
    font-weight: 800;
    letter-spacing: 1px;
    position: relative;
    top: 2px; /* Fix petit décalage */
}
ul.products li.product .button:hover {
    background-color: var(--racing-red) !important;
}


/* =========================================
   4. BOUTONS GÉNÉRAUX & ÉLÉMENTS
========================================= */
/* Style des boutons par défaut sur tout le site */
button, input[type="button"], input[type="reset"], input[type="submit"], .button, .added_to_cart {
    background-color: var(--racing-red) !important;
    color: var(--pure-white) !important;
    border: none !important;
    border-radius: 50px !important; /* Ultra rond style gélule */
    padding: 15px 40px !important;
    font-family: var(--font-title);
    font-weight: 900 !important;
    text-transform: uppercase;
    font-size: 0.9rem;
    box-shadow: 0 10px 20px rgba(231, 76, 60, 0.3);
    transition: 0.3s;
}
button:hover, .button:hover {
    background-color: var(--asphalt-dark) !important;
    box-shadow: 0 5px 10px rgba(0,0,0,0.2);
    transform: translateY(2px);
}

/* Badges "Promo" */
.onsale {
    background-color: var(--neon-yellow) !important;
    color: var(--asphalt-dark) !important;
    font-family: var(--font-title);
    font-weight: 900;
    text-transform: uppercase;
    border-radius: 4px;
    top: 15px !important; left: 15px !important; right: auto !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* =========================================
   5. NOUVEAU FOOTER PRO (Injecté par PHP)
========================================= */
.site-footer {
    background-color: var(--asphalt-dark);
    padding: 0; margin-top: 60px;
}
/* On cache les widgets du footer standard s'il y en a */
.footer-widgets { display: none; } 

.pro-footer-container {
    padding: 50px 20px;
    text-align: center;
    background: var(--carbon-grey);
    border-top: 5px solid var(--racing-red);
}
.footer-branding {
    font-family: var(--font-title);
    font-weight: 900; font-size: 1.8rem; color: var(--pure-white);
    font-style: italic;
    margin-bottom: 10px;
}
.footer-tagline {
    color: #999; text-transform: uppercase; font-weight: 700; letter-spacing: 1px;
    margin-bottom: 30px;
}
.footer-copyright { color: #666; font-size: 0.85rem; }


/* =========================================
   6. MOBILE RESPONSIVE ULTRA-FLUIDE
========================================= */
@media (max-width: 768px) {
    /* Grille produits : 2 colonnes sur mobile, c'est le standard */
    ul.products {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        padding: 0 10px;
    }

    /* Réduction de la taille des textes sur mobile */
    ul.products li.product .woocommerce-loop-product__title { font-size: 1rem !important; padding: 10px 10px 5px; }
    ul.products li.product .price { font-size: 1.2rem; padding: 0 10px 10px; }
    ul.products li.product a img { height: 180px; } /* Images moins hautes */
    
    /* Bouton plus petit sur mobile */
    ul.products li.product .button { font-size: 0.8rem; padding: 12px 0 !important; }

    /* Header mobile */
    .site-header { padding: 15px 0; }
    .site-branding .site-title a { font-size: 1.5rem; }
    
    /* Menu hamburger plus visible */
    button.menu-toggle {
        background-color: var(--racing-red) !important;
        color: var(--pure-white) !important;
        border-radius: 4px !important;
        width: auto;
    }
}