/*
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;
}

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

/* Force la même hauteur pour la ligne logo/recherche sur toutes les pages
   (accueil, catégories, etc.) — Storefront/WooCommerce ajoute parfois un
   padding différent selon le type de page, on l'écrase ici */
#masthead .site-branding,
#masthead .site-search,
#masthead .col-full:first-child {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    min-height: 0 !important;
}

#masthead .site-branding img {
    height: 54px !important;
    width: auto !important;
}

#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;
    padding: 0;
    list-style: none;
}

.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: 2 !important;
        margin: 20px 0;
        padding: 0 30px;
    }
    .gdp-cat-arrow {
        width: 30px;
        height: 30px;
        font-size: 12px;
    }
}

/* ==========================================================
   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;
}

/* ==========================================================
   8bis. PAGE CONTACT (Contact Form 7)
   ========================================================== */
.wpcf7 {
    max-width: 600px;
    margin: 10px auto;
    background: #fff;
    padding: 30px 40px;
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

.wpcf7-form p {
    margin-bottom: 12px;
}

.wpcf7-form label {
    display: block;
    font-weight: 600;
    color: var(--couleur-texte-fonce);
    margin-bottom: 5px;
    font-size: 14px;
}

.wpcf7-form-control-wrap {
    display: block;
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    border: 1px solid #dcdfe6;
    border-radius: 6px;
    font-size: 15px;
    font-family: inherit;
    color: var(--couleur-texte-fonce);
    background-color: var(--couleur-fond-clair);
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form input[type="tel"]:focus,
.wpcf7-form textarea:focus {
    outline: none;
    border-color: var(--couleur-accent);
    background-color: #fff;
}

.wpcf7-form textarea {
    min-height: 110px;
    resize: vertical;
}

.wpcf7-form input[type="submit"] {
    background-color: var(--couleur-accent);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 13px 32px;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.wpcf7-form input[type="submit"]:hover {
    background-color: var(--couleur-accent-hover);
}

/* Messages de validation / envoi (erreurs, succès) */
.wpcf7-form .wpcf7-not-valid-tip {
    color: var(--couleur-badge-promo);
    font-size: 13px;
    margin-top: 4px;
    display: block;
}

.wpcf7-form .wpcf7-response-output {
    border-radius: 6px !important;
    margin: 20px 0 0 !important;
    padding: 12px 16px !important;
    font-size: 14px;
}

/* Titre "Contact" de la page, un peu resserré au-dessus du formulaire */
.page-template-default .entry-title {
    text-align: center;
}

/* Page Contact : titre un peu plus petit, espace au-dessus/en dessous
   très réduit (avec !important, Storefront applique un gros padding
   par défaut sur #content qu'il faut forcer à passer dessus) */
body.gdp-page-contact #content {
    padding-top: 8px !important;
    padding-bottom: 10px !important;
}

.gdp-page-contact #primary.content-area,
.gdp-page-contact .site-main,
.gdp-page-contact article.hentry,
.gdp-page-contact .entry-content {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Fil d'ariane "Accueil > Contact" : Storefront lui ajoute une grosse
   marge/padding par défaut, identifiée via l'inspecteur */
.gdp-page-contact .storefront-breadcrumb {
    margin: 0 !important;
    padding: 0.4em 0 !important;
}

/* La zone de contenu s'étire en hauteur (mise en page pensée pour une
   colonne latérale) : on repasse en bloc simple pour qu'elle épouse
   la hauteur réelle du formulaire, sans grand vide en dessous */
.gdp-page-contact #content .col-full {
    display: block !important;
}

.gdp-page-contact #primary.content-area {
    height: auto !important;
    min-height: 0 !important;
}

.gdp-page-contact #secondary {
    display: none !important;
}

.gdp-page-contact .entry-header {
    margin: 0 !important;
    padding: 0 !important;
}

.gdp-page-contact .entry-title {
    font-size: 26px !important;
    margin: 0 0 6px !important;
}

.gdp-page-contact .entry-content {
    margin-top: 0 !important;
}

.gdp-page-contact .wpcf7 {
    margin-top: 4px !important;
}

/* Espace entre les champs du formulaire, réduit sans toucher à la taille
   des encadrés (largeur/hauteur/police inchangées) */
.gdp-page-contact .wpcf7-form p {
    margin-bottom: 6px !important;
}

.gdp-page-contact .wpcf7-form label {
    margin-bottom: 2px !important;
}
#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)
   ========================================================== */

/* Les flèches du menu ne servent que sur mobile (le menu desktop
   défile déjà librement à la souris/trackpad, règles ci-dessous) */
.gdp-menu-arrow {
    display: none;
}

.gdp-favoris-menu-item {
    display: none;
}

@media (max-width: 768px) {
    .gdp-hero {
        flex-direction: column;
        text-align: center;
        padding: 18px 15px;
        margin: 10px 0;
    }
    .gdp-hero h1 {
        font-size: 22px;
    }
    .gdp-hero p {
        margin: 10px 0 15px;
    }
    .gdp-hero .gdp-hero-cta {
        font-size: 14px;
        padding: 10px 18px;
    }
    .gdp-hero img {
        max-width: 80%;
        margin-top: 20px;
    }
    .gdp-categories-row {
        gap: 20px;
    }
    .gdp-footer-columns {
        flex-direction: column;
        text-align: center;
    }

    /* Bulle bleue + carrousel de catégories collés tout à gauche sur
       mobile, comme le logo (retire le padding de 40px de .col-full) */
    body.home #content .col-full {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Menu mobile : ligne horizontale à défilement, avec flèches
       gauche/droite (même principe que le carrousel de catégories) */
    .storefront-primary-navigation .col-full {
        flex-direction: column;
        align-items: stretch;
    }
    #site-navigation {
        display: block !important;
        max-height: none !important;
        height: auto !important;
        overflow: visible !important;
        position: relative;
        width: 100%;
        padding: 0;
        box-sizing: border-box;
    }
    #site-navigation .primary-navigation {
        display: block !important;
        max-height: none !important;
        height: auto !important;
        overflow: visible !important;
    }
    #site-navigation ul.menu {
        display: flex !important;
        flex-direction: row;
        flex-wrap: nowrap;
        max-height: none !important;
        height: auto !important;
        width: 100%;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        scroll-behavior: smooth;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    #site-navigation ul.menu::-webkit-scrollbar {
        display: none;
    }
    #site-navigation ul.menu > li {
        flex: 0 0 auto !important;
        scroll-snap-align: start;
        max-height: none !important;
        height: auto !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    #site-navigation ul.menu > li > a {
        display: block !important;
        box-sizing: border-box;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Favoris : sur mobile, on montre la version "élément de menu" à la
       suite des catégories, et on masque le bouton flottant séparé */
    .gdp-favoris-bouton {
        display: none !important;
    }
    #site-navigation ul.menu > li.gdp-favoris-menu-item {
        display: flex !important;
        flex: 0 0 auto !important;
        align-items: center;
    }
    .gdp-favoris-menu-item a {
        display: flex;
        align-items: center;
        gap: 6px;
        white-space: nowrap;
        padding: 12px 16px;
        color: var(--couleur-fond-header);
        font-weight: 700;
        text-decoration: none;
    }

    /* Flèches qui se superposent au bord du menu (ne réservent plus
       d'espace, pour que "Accueil" reste collé tout à gauche) */
    .gdp-menu-prev { left: 2px; }
    .gdp-menu-next { right: 2px; }

    /* Logo, bouton Menu et Favoris collés tout à gauche sur mobile */
    #masthead .col-full,
    .storefront-primary-navigation .col-full {
        padding-left: 0 !important;
        padding-right: 15px !important;
    }

    /* Reset large : plusieurs conteneurs Storefront peuvent ajouter du
       padding/marge de chaque côté selon le mode "pleine largeur" —
       on les remet tous à zéro pour coller vraiment à gauche */
    html, body, #page, .site, .hfeed.site {
        margin-left: 0 !important;
        padding-left: 0 !important;
    }

    /* Empêche toute la page de déborder sur la droite (plus de partie
       invisible / flèche coupée hors écran) */
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw;
    }


    /* Bouton "Menu" (hamburger) : supprimé, le menu est visible en
       permanence sur mobile, plus besoin de cliquer pour l'ouvrir */
    #site-navigation-menu-toggle {
        display: none !important;
    }
    #site-navigation .primary-navigation,
    #site-navigation ul.menu {
        display: flex !important;
    }

    /* Flèches gauche/droite, ajoutées par JS (voir functions.php) */
    .gdp-menu-arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 28px;
        height: 28px;
        border-radius: 50%;
        border: none;
        background-color: #fff;
        color: var(--couleur-fond-header);
        font-size: 13px;
        cursor: pointer;
        box-shadow: 0 2px 8px rgba(0,0,0,0.18);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 2;
    }
    .gdp-menu-prev { left: 0; }
    .gdp-menu-next { right: 0; }
}

/* Filet de sécurité : si le retrait PHP du panier de la barre mobile fixe
   ne correspond pas exactement au hook de cette version de Storefront,
   on masque quand même l'icône panier ici en CSS (par son lien /panier/
   ou /cart/, indépendant du nom de classe utilisé). */
#handheld-footer-bar a[href*="panier"],
#handheld-footer-bar a[href*="cart"],
.storefront-handheld-footer-bar a[href*="panier"],
.storefront-handheld-footer-bar a[href*="cart"] {
    display: none !important;
}

/* ==========================================================
   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;
}