/*
Theme Name:   Storefront Child - Catalogue
Theme URI:    https://votresite.local
Description:  Thème enfant Storefront personnalisé, style "vitrine promos" (bleu marine + orange)
Author:       Nounours
Template:     storefront
Version:      1.0.0
Text Domain:  storefront-child-catalogue
*/

/* ==========================================================
   1. VARIABLES DE COULEURS - à ajuster si besoin
   ========================================================== */
:root {
    --couleur-fond-header: #0d1b3d;   /* bleu marine header/footer */
    --couleur-accent: #f7941d;        /* orange boutons/badges */
    --couleur-accent-hover: #e07f0a;
    --couleur-texte-clair: #ffffff;
    --couleur-texte-fonce: #1a1a1a;
    --couleur-fond-clair: #f5f6f8;
    --couleur-badge-promo: #e63946;
}

body {
    background-color: var(--couleur-fond-clair);
    color: var(--couleur-texte-fonce);
}

/* ==========================================================
   1bis. LARGEUR DU SITE - occupe toute la largeur de l'écran
   (au lieu des ~1200px par défaut de Storefront)
   Important : une seule marge de 40px est appliquée (sur .col-full),
   les éléments imbriqués ne doivent PAS ajouter leur propre padding,
   sinon les marges s'additionnent et réduisent la largeur réelle.
   ========================================================== */
.col-full {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
    box-sizing: border-box !important;
}

#primary.content-area,
.storefront-full-width-content #primary,
#content.site-content {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.gdp-hero,
.gdp-cat-carousel-wrap {
    max-width: 100%;
}

/* WordPress limite par défaut la largeur de chaque bloc à ~840px et le
   centre (comportement natif de l'éditeur de blocs, indépendant du thème).
   On force nos blocs (hero, carrousel) à ignorer cette limite. */
.entry-content .wp-block-shortcode,
.entry-content > .gdp-hero,
.entry-content > .gdp-cat-carousel-wrap,
.entry-content.is-layout-constrained > * {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ==========================================================
   2. BANDEAU TOP (livraison rapide / service client)
   ========================================================== */
.gdp-top-bar {
    background-color: #081228;
    color: var(--couleur-texte-clair);
    font-size: 13px;
    padding: 6px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.gdp-top-bar span {
    margin-right: 20px;
}

/* ==========================================================
   3. HEADER PRINCIPAL
   ========================================================== */
#masthead.site-header {
    background-color: #ffffff;
    padding: 15px 0 0 0;
    border-bottom: none;
}

#masthead .site-branding a,
#masthead .site-title a {
    color: var(--couleur-fond-header);
    font-weight: 700;
    font-size: 26px;
    text-decoration: none;
}

/* Barre de recherche centrale */
#masthead .woocommerce-product-search,
#masthead .search-field {
    border-radius: 4px 0 0 4px;
    border: none;
    padding: 10px 15px;
}

#masthead .woocommerce-product-search button,
#masthead button[type="submit"] {
    background-color: var(--couleur-accent);
    color: #fff;
    border: none;
    border-radius: 0 4px 4px 0;
    padding: 10px 18px;
    cursor: pointer;
}

#masthead .woocommerce-product-search button:hover {
    background-color: var(--couleur-accent-hover);
}

/* Icônes favoris / compte / panier à droite */
.gdp-header-icons {
    display: flex;
    gap: 25px;
    align-items: center;
}

.gdp-header-icons a {
    color: var(--couleur-texte-clair);
    text-align: center;
    font-size: 12px;
    text-decoration: none;
}

.gdp-header-icons .gdp-icon-badge {
    background-color: var(--couleur-accent);
    color: #fff;
    border-radius: 50%;
    font-size: 11px;
    padding: 1px 6px;
    margin-left: 4px;
}

/* ==========================================================
   4. NAVIGATION PRINCIPALE
   ========================================================== */
#site-navigation,
.storefront-primary-navigation {
    background-color: var(--couleur-fond-clair);
    border-bottom: 1px solid #e0e0e0;
}

#site-navigation ul.menu > li > a {
    color: var(--couleur-texte-fonce);
    font-weight: 600;
    font-size: 18px;
    padding: 12px 14px;
    white-space: nowrap;
}

/* Le vrai conteneur flex est ".storefront-primary-navigation .col-full"
   (nav + bouton Favoris sont deux enfants côte à côte à l'intérieur) */
.storefront-primary-navigation .col-full {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
}

#site-navigation {
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
}

#site-navigation ul.menu {
    display: flex;
    flex-wrap: nowrap;
    margin: 0;
}

.gdp-favoris-bouton {
    flex: 0 0 auto;
    margin-left: 20px;
}

/* Bouton "Accueil" ou premier item mis en avant en orange (style capture) */
#site-navigation ul.menu > li:first-child > a {
    background-color: var(--couleur-accent);
    color: #fff;
    border-radius: 4px;
    padding: 8px 16px;
}

/* ==========================================================
   5. BANDEAU HERO (bannière promo pleine largeur)
   ========================================================== */
.gdp-hero {
    background-color: var(--couleur-fond-header);
    color: #fff;
    border-radius: 12px;
    margin: 20px auto;
    padding: 50px 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    overflow: hidden;
}

.gdp-hero h1 {
    color: #fff;
    font-size: 36px;
    font-weight: 800;
    line-height: 1.2;
}

.gdp-hero h1 .gdp-hero-accent {
    color: var(--couleur-accent);
}

.gdp-hero p {
    color: #d5d9e6;
    margin: 15px 0 25px;
    max-width: 400px;
}

.gdp-hero .gdp-hero-cta {
    background-color: var(--couleur-accent);
    color: #fff;
    padding: 12px 28px;
    border-radius: 6px;
    font-weight: 700;
    text-decoration: none;
    display: inline-block;
}

.gdp-hero .gdp-hero-cta:hover {
    background-color: var(--couleur-accent-hover);
}

.gdp-hero img {
    max-width: 45%;
    border-radius: 8px;
}

/* ==========================================================
   6. CARROUSEL DE CATÉGORIES (cartes cliquables + flèches)
   ========================================================== */
.gdp-cat-carousel-wrap {
    --gdp-cat-visibles: 5;
    position: relative;
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 55px; /* laisse la place aux flèches */
}

.gdp-cat-carousel {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
}

.gdp-cat-carousel::-webkit-scrollbar {
    display: none; /* Chrome/Edge/Safari */
}

.gdp-cat-track {
    display: flex;
    gap: 20px;
}

.gdp-cat-card {
    flex: 0 0 calc((100% - (var(--gdp-cat-visibles) - 1) * 20px) / var(--gdp-cat-visibles));
    scroll-snap-align: start;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    display: flex;
    flex-direction: column;
}

.gdp-cat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.14);
}

.gdp-cat-card-img {
    width: 100%;
    background-color: var(--couleur-fond-clair);
    overflow: hidden;
}

.gdp-cat-card-img img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

/* Flèches précédent / suivant */
.gdp-cat-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: none;
    background-color: #fff;
    color: var(--couleur-fond-header);
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: background-color 0.15s ease;
}

.gdp-cat-arrow:hover {
    background-color: var(--couleur-accent);
    color: #fff;
}

.gdp-cat-prev { left: 0; }
.gdp-cat-next { right: 0; }

/* Responsive : moins de cartes visibles sur petits écrans */
@media (max-width: 992px) {
    .gdp-cat-carousel-wrap { --gdp-cat-visibles: 3; }
}

@media (max-width: 600px) {
    .gdp-cat-carousel-wrap {
        --gdp-cat-visibles: 1.6;
        padding: 0 40px;
    }
    .gdp-cat-arrow {
        width: 34px;
        height: 34px;
        font-size: 13px;
    }
}

/* ==========================================================
   7. GRILLE PRODUITS (boutique / archive)
   ========================================================== */
ul.products li.product {
    background: #fff;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    position: relative;
    transition: transform 0.15s ease;
}

ul.products li.product:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

ul.products li.product .woocommerce-loop-product__title {
    font-weight: 700;
    font-size: 15px;
    color: var(--couleur-texte-fonce);
}

ul.products li.product .price {
    color: var(--couleur-accent);
    font-weight: 700;
}

ul.products li.product a.button,
ul.products li.product a.added_to_cart {
    background-color: var(--couleur-fond-header);
    color: #fff;
    border-radius: 4px;
    font-weight: 600;
    padding: 10px 0;
    width: 100%;
    text-align: center;
}

ul.products li.product a.button:hover {
    background-color: var(--couleur-accent);
}

/* Badges "Promo" / "Nouveau" en haut à gauche des cartes produit */
.gdp-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 3px;
    text-transform: uppercase;
    z-index: 2;
}

.gdp-badge-promo { background-color: var(--couleur-badge-promo); }
.gdp-badge-nouveau { background-color: var(--couleur-fond-header); }

/* Icône coeur (favoris / wishlist YITH) en haut à droite */
ul.products li.product .yith-wcwl-add-to-wishlist {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
}

/* ==========================================================
   8. BADGES STATUT DISPONIBILITÉ (plugin sur-mesure)
   Réutilise les couleurs déjà définies dans le plugin PHP,
   ceci ajuste juste la forme pour matcher le style du site
   ========================================================== */
.single-product p[style*="background:#2e7d32"],
.single-product p[style*="background:#f9a825"],
.single-product p[style*="background:#c62828"] {
    border-radius: 20px !important;
    font-size: 13px !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ==========================================================
   9. FOOTER
   ========================================================== */
#colophon.site-footer {
    background-color: var(--couleur-fond-header);
    color: #b9c0d4;
    padding: 50px 20px 20px;
}

#colophon .widget-title,
#colophon h2, #colophon h3 {
    color: #fff;
    font-weight: 700;
    margin-bottom: 15px;
}

#colophon a {
    color: #b9c0d4;
    text-decoration: none;
}

#colophon a:hover {
    color: var(--couleur-accent);
}

.gdp-footer-columns {
    display: flex;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    flex-wrap: wrap;
    gap: 30px;
}

.gdp-newsletter-form input[type="email"] {
    padding: 10px;
    border-radius: 4px 0 0 4px;
    border: none;
    width: 200px;
}

.gdp-newsletter-form button {
    background-color: var(--couleur-accent);
    color: #fff;
    border: none;
    border-radius: 0 4px 4px 0;
    padding: 10px 15px;
    cursor: pointer;
}

/* ==========================================================
   10. RESPONSIVE (mobile)
   ========================================================== */
@media (max-width: 768px) {
    .gdp-hero {
        flex-direction: column;
        text-align: center;
        padding: 30px 20px;
    }
    .gdp-hero img {
        max-width: 80%;
        margin-top: 20px;
    }
    .gdp-categories-row {
        gap: 20px;
    }
    .gdp-footer-columns {
        flex-direction: column;
        text-align: center;
    }
}

/* ==========================================================
   11. BOUTON FAVORIS (remplace panier/prix/nb articles) +
   MASQUAGE DU TITRE "ACCUEIL" SUR LA PAGE D'ACCUEIL
   ========================================================== */
.gdp-favoris-bouton a {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: var(--couleur-fond-clair);
    color: var(--couleur-fond-header);
    font-weight: 700;
    font-size: 18px;
    padding: 10px 18px;
    border-radius: 6px;
    text-decoration: none;
    white-space: nowrap;
}

.gdp-favoris-bouton a:hover {
    background-color: #e9ebef;
}

.gdp-favoris-coeur {
    color: #e63946;
    font-size: 20px;
}

body.home .entry-header,
body.home .entry-title {
    display: none;
}

body.home .entry-content,
body.home article.hentry {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* ==========================================================
   12. MASQUAGE FORCÉ DE L'ANCIEN PANIER (filet de sécurité,
   au cas où le hook PHP ne suffirait pas à le retirer)
   ========================================================== */
.site-header-cart,
.site-header-cart.menu {
    display: none !important;
}

/* ==========================================================
   13. SUPPRESSION DE L'ESPACE VIDE ENTRE LA NAVIGATION ET LE
   BANDEAU HERO (marges par défaut de WordPress/Storefront qui
   s'additionnent avant le premier bloc de la page)
   ========================================================== */
body.home .entry-content > *:first-child,
body.home .gdp-hero {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

body.home .site-main,
body.home #primary {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* ==========================================================
   14. SUPPRESSION DÉFINITIVE DE TOUT ESPACE ENTRE LA NAV
   ET LE BANDEAU HERO (élément WooCommerce vide + marges
   résiduelles de la navigation)
   ========================================================== */

/* Div WooCommerce vide que le thème insère par défaut avant le contenu */
.col-full > .woocommerce:empty {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    height: 0 !important;
}

.storefront-primary-navigation {
    margin: 0 !important;
    padding: 0 !important;
}

.storefront-primary-navigation .col-full {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

#site-navigation {
    border-bottom: none !important;
    margin: 0 !important;
}

body.home #content,
body.home #primary,
body.home .site-main,
body.home article.hentry,
body.home .entry-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

body.home .col-full {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

body.home .gdp-hero {
    margin-top: 0 !important;
    margin-bottom: 20px !important;
}

/* Redonne un peu de respiration entre le logo/recherche et la barre de nav,
   puisque le header n'a plus de padding-bottom global */
#masthead.site-header > .col-full {
    padding-bottom: 15px;
}

/* Zéro espace résiduel juste avant le bandeau hero */
.storefront-primary-navigation {
    margin-bottom: 0 !important;
}

/* WordPress applique parfois un "gap" (espacement flex/grid) entre les
   blocs de contenu, différent des marges classiques. On le force à 0
   pour coller complètement le bandeau hero à la barre de navigation. */
body.home .entry-content {
    gap: 0 !important;
    row-gap: 0 !important;
}

/* Storefront ajoute une grande marge sous le header spécifiquement sur la
   page d'accueil (règle .home .site-header { margin-bottom: 4.23...em }).
   On l'écrase ici, c'est la vraie cause de l'espace jaune identifié. */
body.home .site-header,
.home.blog .site-header,
.home.page-template-template-homepage .site-header,
.home.post-type-archive-product .site-header,
#masthead.site-header {
    margin-bottom: 0 !important;
}