/*
 Theme Name:   Storefront Child
 Theme URI:    http://example.com/twenty-fifteen-child/
 Description:  Storefront Child Theme
 Author:       SLWD
 Author URI:   http://www.slwd.fr
 Template:     storefront
 Version:      1.0.0
*/


.entry-content {
    background-color: #FFF;
}

html {
    scroll-behavior: smooth;
    /* Animation de défilement fluide */
}

h1 {
    font-size: 48px;
    font-weight: 600;
    font-family: 'Dancing script';
}

h2 {
    font-size: 38px;
    font-weight: 600;
    font-family: 'Dancing script';
}

h3 {
    font-size: 28px;
    font-weight: 600;
    font-family: 'Dancing script';
}

h4 {
    font-size: 24px;
    font-weight: 600;
    font-family: 'Dancing script';
}

a,
a:link {
    text-decoration: none !important;
}

a:focus {
    outline: none !important;
}

.content-area {
    width: 100%;
}

header,
.footer-container {
    margin-right: auto;
    margin-left: auto;
}

/* Masquer les titres uniquement sur les pages */
.page .entry-title {
    display: none;
}


/******* HEADER ******/
.site-header {
    padding-top: 0;
    background-color: #fff;
    border: none;
}

header {
    width: 1300px;
}

.logo_header img {
    width: 80px !important;
    height: auto;
}

.container-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.navbar-nav {
    list-style: none;
    display: flex;
    flex-direction: row;
    gap: 50px;
    font-size: 16px;
    font-weight: 400;
    justify-content: end;
    margin: 0;
}

nav ul li {
    float: left;
    width: auto;
    text-align: center;
    position: relative;
}

nav ul::after {
    content: "";
    display: table;
    clear: both;
}

nav a {
    display: block;
    text-decoration: none;
    color: #8B0000;
    border-bottom: 2px solid transparent;
    padding: 2px 0px;
    transition: .3s;
}

.navbar-nav a:hover {
    color: #374151;
    border-bottom: 2px solid #374151;
}

.sub-menu {
    display: none;
    box-shadow: 0px 1px 2px #CCC;
    background-color: white;
    position: absolute;
    width: 150px;
    z-index: 1000;
    list-style: none;
}

ul li:hover .sub-menu {
    display: block;
}

.sub-menu li {
    float: none;
    width: 100%;
    text-align: left;
}

.sub-menu a {
    padding: 10px;
    border-bottom: none;
}

.sub-menu a:hover {
    border-bottom: none;
    background-color: RGBa(200, 200, 200, 0.1);
}

.menu-item-40>a::after {
    content: "  ▼";
    font-size: 12px;
}


/******* ARCHIVE PATISSERIES *****/

/* --- Grille --- */
.patisserie-grid-container {
    display: grid;
    /* Création automatique des colonnes (responsive) */
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
    padding: 0;
    max-width: 1140px;
    margin: 0 auto;
}

/* --- Carte Standard --- */
.patisserie-card {
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    /* Ombre douce */
    display: flex;
    flex-direction: column;
}

/* Image */
.card-image {
    height: 250px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* Pour l'image de la 6e carte qui n'en a pas, le background sera géré plus bas */
}

/* Contenu */
.card-content {
    padding: 25px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    /* Pour aligner les boutons en bas */
}

/* Typographie */
.card-title {
    font-size: 1.5rem;
    color: #8B0000;
    margin-bottom: 10px;
    margin-top: 0;
}

.card-desc {
    font-family: 'Lato';
    color: #374151;
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 25px;
    flex-grow: 1;
    font-weight: 300;
}

/* Footer (Prix + Bouton) */
.card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
}

.card-price {
    font-family: 'Dancing script';
    font-weight: bold;
    color: #8B0000;
    font-size: 1.1rem;
}

/* Bouton */
.btn-commander {
    font-family: 'Dancing script';
    background-color: #8B0000;
    color: #fff;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 50px;
    /* Forme de pilule */
    font-size: 0.9rem;
    font-weight: 600;
    transition: 0.3s;
}

.btn-commander:hover {
    background-color: #6a0000;
    /* Marron plus foncé au survol */
}

/* --- Carte Statique (La 6ème) --- */
.patisserie-card.static-card {
    /* Dégradé rose/violet comme sur la capture */
    background: linear-gradient(135deg, #F8Cdda 0%, #E6E6FA 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 450px;
    /* Force la hauteur pour matcher les autres si peu de contenu */
}

.static-content {
    padding: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.static-card .icon-palette {
    margin-bottom: 20px;
}

.static-card .card-title {
    font-size: 1.8rem;
    margin-bottom: 10px;
}

.static-card .card-desc {
    color: #555;
    margin-bottom: 30px;
    flex-grow: 0;
}

.static-card .btn-custom {
    padding: 12px 30px;
    font-size: 1rem;
}



/******* Catégories Kits *****/

.kits-hero {
    padding: 48px 16px;
    background: linear-gradient(90deg, #f4ece7, #eaf3f3);
    text-align: center
}

.kits-hero__inner {
    max-width: 980px;
    margin: 0 auto
}

.kits-hero__title {
    font-size: 42px;
    margin: 0 0 12px
}

.kits-hero__desc {
    max-width: 820px;
    margin: 0 auto;
    opacity: .85
}

.kits-chips {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    padding: 18px 16px
}

.kits-chip {
    padding: 8px 14px;
    border-radius: 999px;
    background: #f3f3f3;
    text-decoration: none
}

.kits-chip.is-active {
    background: #6c2bd9;
    color: #fff
}

.kits-grid {
    padding: 10px 16px 40px;
    max-width: 1200px;
    margin: 0 auto
}

.kits-about {
    padding: 36px 16px;
    background: linear-gradient(180deg, #f4e9ff, #ffffff)
}

.kits-about__title {
    text-align: center;
    margin: 0 0 18px
}

.kits-about__grid {
    max-width: 980px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px
}

.kits-about__card {
    background: #fff;
    border-radius: 12px;
    padding: 14px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .08)
}

@media (max-width:700px) {
    .kits-about__grid {
        grid-template-columns: 1fr
    }
}


/********** ARCHIVES BIJOUX *************/


/* --- 1. HERO SECTION --- */
.bijoux-hero {
    position: relative;
    height: 450px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    margin-bottom: 40px;
}

.bijoux-hero__overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.3); /* Assombrit l'image pour lire le texte */
    z-index: 1;
}

.bijoux-hero__content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    padding: 20px;
}

.bijoux-title {
    font-family: var(--font-sans);
    font-size: 3rem;
    font-weight: 300;
    margin: 10px 0;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #fff;
}

.bijoux-subtitle {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.1rem;
    opacity: 0.9;
}

.bijoux-desc {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 30px;
    opacity: 0.9;
}

.bijoux-hero-btn {
    display: inline-block;
    padding: 10px 25px;
    border: 1px solid rgba(255,255,255,0.6);
    color: #fff;
    text-decoration: none;
    border-radius: 30px;
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(5px);
    transition: all 0.3s;
}
.bijoux-hero-btn:hover {
    background: #fff;
    color: #000;
}

/* --- 2. TOOLBAR (Filtres + Tri) --- */
.bijoux-toolbar {
    max-width: 1200px;
    margin: 0 auto 40px;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
    flex-wrap: wrap;
    gap: 20px;
}

.filter-label {
    font-size: 0.9rem;
    color: #666;
    margin-right: 10px;
}

.bijoux-chips {
    display: inline-flex;
    gap: 15px;
}

.bijoux-chip {
    text-decoration: none;
    color: #333;
    font-size: 0.9rem;
    padding: 5px 10px;
    border-radius: 4px;
    transition: background 0.2s;
}

.bijoux-chip.is-active, .bijoux-chip:hover {
    background-color: #f0f4f8; /* Fond bleu très pâle au survol */
    color: var(--bijoux-accent);
    font-weight: 500;
}

/* Personnalisation du Select WooCommerce */
.bijoux-sorting .woocommerce-ordering {
    margin: 0;
    display: inline-block;
}
.bijoux-sorting select {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px 10px;
    color: #555;
    background: #fff;
}

/* --- 3. GRILLE PRODUITS (Surcharge propre pour l'univers Bijoux) --- */
.universe-bijoux .products {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 colonnes comme la capture */
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Responsive */
@media (max-width: 1024px) { .universe-bijoux .products { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) { .universe-bijoux .products { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .universe-bijoux .products { grid-template-columns: 1fr; } }

/* CARTE PRODUIT */
.universe-bijoux .product {
    text-align: left; /* Alignement gauche comme sur la capture */
    background: transparent !important; /* Pas de fond de carte */
    box-shadow: none !important; /* Pas d'ombre */
    border: none !important;
    padding: 0 !important;
}

.universe-bijoux .product img {
    border-radius: 4px; /* Coins très légèrement arrondis */
    margin-bottom: 15px !important;
    background: #f9f9f9; /* Fond gris léger derrière l'image */
}

/* Titre Produit */
.universe-bijoux .woocommerce-loop-product__title {
    font-family: var(--font-sans);
    font-size: 0.95rem !important;
    color: #333 !important;
    margin-bottom: 5px;
    font-weight: 400 !important;
}

/* Prix */
.universe-bijoux .price {
    font-family: var(--font-sans);
    font-weight: bold;
    color: var(--bijoux-accent) !important; /* Le bleu de la capture (ex: 45€) */
    font-size: 0.95rem !important;
    display: block;
    margin-bottom: 15px;
}

/* Bouton "Ajouter au panier" transformé en "Voir le bijou" */
.universe-bijoux .button.add_to_cart_button,
.universe-bijoux .button.product_type_simple {
    display: block;
    width: 100%;
    text-align: center;
    background: transparent !important;
    color: #555 !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    padding: 10px 0 !important;
    font-weight: normal !important;
    font-size: 0.9rem !important;
    transition: all 0.3s;
}

/* Au survol du bouton */
.universe-bijoux .button:hover {
    border-color: #333 !important;
    color: #000 !important;
    background: transparent !important;
}

/* Masquer les notes (étoiles) si présentes, pour garder le style épuré */
.universe-bijoux .star-rating { display: none; }

/* --- 4. FOOTER MSG --- */
.bijoux-footer-msg {
    text-align: center;
    padding: 60px 20px;
    max-width: 700px;
    margin: 40px auto 0;
    color: #444;
}

.icon-plume { margin-bottom: 20px; opacity: 0.7; }

.msg-brand {
    font-weight: bold;
    margin-bottom: 15px;
}
.msg-emphasis {
    margin-top: 15px;
    font-style: italic;
    font-family: var(--font-serif);
}
.msg-small {
    font-size: 0.85rem;
    color: #777;
    margin-top: 20px;
}


/******** ARCHIVES BISCUITS *************/ 


/* Appliquer le fond crème à toute la page */
.universe-biscuits {
    background-color: var(--color-bg);
}

/* --- 1. HERO SECTION --- */
.biscuits-hero {
    position: relative;
    padding: 80px 20px 100px; /* Padding bas large pour la vague */
    background-size: cover;
    background-position: center;
    text-align: center;
    /* Dégradé doux par dessus l'image si image il y a */
    box-shadow: inset 0 0 0 1000px rgba(253, 251, 247, 0.7); 
}

.biscuits-hero__content {
    max-width: 700px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.biscuits-badge {
    background: var(--color-primary);
    color: #fff;
    padding: 5px 15px;
    border-radius: 50px;
    text-transform: uppercase;
    font-size: 0.75rem;
    font-weight: bold;
    letter-spacing: 1px;
}

.biscuits-title {
    font-family: var(--font-heading);
    color: var(--color-dark);
    font-size: 3.5rem;
    margin: 15px 0;
}

.biscuits-desc {
    color: var(--color-dark);
    font-size: 1.1rem;
    line-height: 1.6;
}

/* La vague SVG en bas */
.biscuits-wave {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    line-height: 0;
}
.biscuits-wave svg {
    width: 100%;
    height: auto;
    fill: var(--color-bg); /* Doit matcher le fond de la page */
}

/* --- 2. NAVIGATION (Pills) --- */
.biscuits-nav-container {
    display: flex;
    justify-content: center;
    gap: 15px;
    padding: 20px;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.biscuit-pill {
    text-decoration: none;
    padding: 10px 25px;
    border: 2px solid #EDE0D4; /* Beige foncé */
    border-radius: 50px;
    color: var(--color-dark);
    font-weight: 600;
    transition: all 0.3s ease;
    background: #fff;
}

.biscuit-pill:hover, .biscuit-pill.is-active {
    background-color: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(194, 110, 72, 0.3);
}

/* --- 3. GRILLE PRODUITS --- */
.biscuits-grid-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.universe-biscuits ul.products {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 30px;
}

/* Carte Produit - Style "Carte de resto" */
.universe-biscuits .product {
    background: var(--color-card);
    border-radius: 15px;
    padding: 20px !important;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid rgba(0,0,0,0.03);
}

.universe-biscuits .product:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(93, 64, 55, 0.1);
}

.universe-biscuits .product img {
    border-radius: 10px;
    margin-bottom: 15px !important;
}

.universe-biscuits .woocommerce-loop-product__title {
    font-family: var(--font-heading);
    font-size: 1.1rem !important;
    color: var(--color-dark) !important;
    padding: 0 10px;
}

.universe-biscuits .price {
    font-weight: bold;
    color: var(--color-primary) !important;
    font-size: 1.1rem !important;
    display: block;
    margin: 10px 0;
}

/* Bouton Panier */
.universe-biscuits .button.add_to_cart_button {
    background-color: var(--color-dark) !important;
    color: #fff !important;
    border-radius: 8px !important;
    padding: 10px 20px !important;
    font-weight: normal !important;
    font-size: 0.9rem !important;
}
.universe-biscuits .button:hover {
    background-color: var(--color-primary) !important;
}

/* --- 4. SECTION INGRÉDIENTS --- */
.biscuits-ingredients {
    margin-top: 80px;
    padding: 60px 20px;
    background-color: #F5EBE0; /* Beige un peu plus foncé */
    text-align: center;
    border-radius: 30px 30px 0 0; /* Arrondi en haut */
}

.ing-title {
    font-family: var(--font-heading);
    color: var(--color-dark);
    font-size: 2rem;
    margin-bottom: 40px;
}

.ing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto;
}

.ing-icon {
    font-size: 2.5rem;
    display: block;
    margin-bottom: 10px;
}

.ing-item h3 {
    font-family: var(--font-heading);
    color: var(--color-dark);
    font-size: 1.2rem;
    margin-bottom: 5px;
}

.ing-item p {
    font-size: 0.9rem;
    color: #777;
}


/******* SINGLE PRODUCT BISCUIT *********/ 


/* Titres en écriture manuscrite (Description, Avis...) */
.section-script-title {
    font-family: var(--font-script);
    color: var(--brown-dark);
    font-size: 2.2rem;
    margin-bottom: 25px;
}

/* --- 1. SECTION HAUT (Grid Image / Infos) --- */
.biscuit-top-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
}

/* Images */
.biscuit-gallery img {
    border-radius: 15px; /* Coins arrondis images */
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

/* Infos */
.biscuit-title {
    font-family: var(--font-script);
    font-size: 3rem;
    color: var(--brown-dark);
    line-height: 1.2;
    margin-bottom: 10px;
}

.biscuit-price {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--brown-dark);
    margin-bottom: 20px;
}

/* Zone ajout panier */
.biscuit-add-to-cart-box {
    background: #fff; /* Optionnel : encadré blanc */
    padding: 20px;
    border-radius: 10px;
    margin: 20px 0;
}

/* Bouton Ajouter au panier (Gros bouton marron) */
.single-biscuit-page button.single_add_to_cart_button {
    background-color: var(--brown-dark) !important;
    color: #fff !important;
    width: 100%; /* Pleine largeur */
    display: block;
    border-radius: 8px !important;
    padding: 15px !important;
    font-size: 1.1rem !important;
    text-transform: none !important;
    font-weight: bold !important;
    margin-top: 15px;
}
.single-biscuit-page button.single_add_to_cart_button:hover {
    background-color: #6d360f !important;
}

/* Icones Meta (Sans additifs...) */
.biscuit-meta-icons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    font-size: 0.85rem;
    margin-top: 20px;
    opacity: 0.8;
}
.meta-item i { color: #5aa668; margin-right: 5px; } /* Vert pour les icones */

/* --- 2. CARTE DESCRIPTION BLANCHE --- */
.biscuit-details-card {
    background: var(--card-white);
    max-width: 1200px;
    margin: 40px auto;
    padding: 40px;
    border-radius: 20px; /* Gros arrondi */
    box-shadow: 0 10px 30px rgba(139, 69, 19, 0.05);
}

.details-content-grid {
    display: grid;
    grid-template-columns: 2fr 1fr; /* 2/3 texte, 1/3 liste */
    gap: 40px;
}

.spec-block h3 {
    font-size: 1rem;
    color: var(--brown-dark);
    border-bottom: 2px solid #eee;
    padding-bottom: 5px;
    margin-bottom: 10px;
}
.spec-block ul { list-style: none; padding: 0; font-size: 0.9rem; }
.spec-block li::before { content: "•"; color: var(--brown-dark); margin-right: 5px; }

/* --- 3. BANDEAU PERSONNALISATION --- */
.biscuit-perso-banner {
    background-color: #E6E6FA; /* Lilas clair (ajuster selon votre couleur exacte) */
    padding: 40px 20px;
    text-align: center;
    margin: 40px 0;
}

.perso-steps {
    display: flex;
    justify-content: center;
    gap: 50px;
    max-width: 1000px;
    margin: 0 auto;
}

.step-icon { font-size: 2rem; display: block; margin-bottom: 10px; }

/* --- 4. AVIS & RELATED --- */
.biscuit-reviews-section, .biscuit-related-section {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
}

/* Transformer les avis en cartes */
.biscuit-reviews-section .commentlist li {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 15px;
    border: none;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
}

/* --- 5. CARTE LIVRAISON (Bas) --- */
.biscuit-delivery-card {
    background: var(--card-white);
    max-width: 1200px;
    margin: 40px auto;
    padding: 40px;
    border-radius: 20px;
    text-align: center;
}

.delivery-grid {
    display: flex;
    justify-content: space-around;
    gap: 20px;
}
.del-item i {
    font-size: 2rem;
    color: var(--brown-dark);
    margin-bottom: 15px;
    display: block;
}

/* Responsive Mobile */
@media (max-width: 768px) {
    .biscuit-top-section, 
    .details-content-grid, 
    .perso-steps, 
    .delivery-grid {
        grid-template-columns: 1fr;
        flex-direction: column;
        gap: 30px;
    }
}


/********** SINGLE PRODUCT BIJOUX **********/ 


/* --- 1. TOP SECTION --- */
.bijoux-top-section {
    display: grid;
    grid-template-columns: 1.2fr 1fr; /* Image un peu plus large */
    gap: 60px;
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
}

/* Galerie Images (Surcharge Woo) */
.bijoux-gallery-wrapper .woocommerce-product-gallery__image {
    border-radius: 8px; /* Arrondi léger */
    overflow: hidden;
}
.bijoux-gallery-wrapper img {
    background-color: #EAF2F8; /* Fond bleuté derrière l'image si transparente */
}

/* Infos Produit */
.bijoux-product-title {
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: 2.5rem;
    color: var(--color-title);
    margin-bottom: 5px;
}

.bijoux-subtitle {
    font-family: var(--font-serif);
    font-style: italic;
    color: #777;
    margin-bottom: 25px;
    font-size: 1.1rem;
}

.bijoux-price {
    font-size: 1.5rem;
    color: #888;
    margin-bottom: 30px;
    font-weight: 300;
}

/* Bouton Panier */
.bijoux-cart-action button.single_add_to_cart_button {
    background-color: var(--color-accent) !important;
    color: #fff !important;
    width: 100%;
    padding: 15px !important;
    border-radius: 4px !important;
    text-transform: none !important;
    font-weight: normal !important;
    font-size: 1rem !important;
    margin-bottom: 30px;
}
.bijoux-cart-action button:hover {
    background-color: #2c3946 !important;
}

/* Trust Box (Bloc Rassurance) */
.bijoux-trust-box {
    background-color: var(--bg-blue-light);
    padding: 20px;
    border-radius: 4px;
    font-size: 0.9rem;
}
.trust-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    color: #4a657e;
}
.trust-item:last-child { margin-bottom: 0; }
.trust-item i {
    width: 25px;
    color: #6B8BA5;
}

/* --- CARDS & SECTIONS GÉNÉRALES --- */
.bijoux-story-section, 
.bijoux-specs-section,
.bijoux-symbolic-section,
.bijoux-reviews-section {
    max-width: 1000px; /* Un peu plus étroit pour la lecture */
    margin: 50px auto;
    padding: 0 20px;
}

.bijoux-card {
    padding: 40px;
    border-radius: 6px;
}
.white-card { background-color: #fff; box-shadow: 0 2px 10px rgba(0,0,0,0.02); }
.blue-card { background-color: var(--bg-blue-light); }
.blue-banner { background-color: var(--bg-symbolic); text-align: center; }

.card-icon {
    color: #5D8AA8; /* Bleu icones */
    font-size: 1.5rem;
    margin-bottom: 15px;
}
.blue-banner .card-icon i { color: #5D8AA8; } /* Cœur */

.card-title {
    font-family: var(--font-sans);
    font-size: 1.2rem;
    color: var(--color-title);
    margin-bottom: 20px;
    font-weight: 500;
}

/* --- 2. STORY --- */
.story-card p { line-height: 1.8; color: #666; }

/* --- 3. SPECS GRID --- */
.specs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.specs-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.95rem;
}
.specs-list li {
    margin-bottom: 10px;
    position: relative;
    padding-left: 15px;
}
.specs-list li::before {
    content: "•";
    color: #5D8AA8;
    position: absolute;
    left: 0;
    font-weight: bold;
}

/* --- 4. SYMBOLIQUE --- */
.bijoux-symbolic-section p {
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}

/* --- 5. REVIEWS --- */
.section-title-center {
    text-align: center;
    font-family: var(--font-sans);
    font-weight: 400;
    margin-bottom: 10px;
    color: var(--color-title);
}
.reviews-stars-summary {
    text-align: center;
    margin-bottom: 40px;
    color: #FFD700; /* Or pour les étoiles */
}
.review-count { color: #999; font-size: 0.9rem; margin-left: 5px; }

/* Transformer la liste d'avis Woo en Grille de cartes */
.bijoux-reviews-section .commentlist {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    padding: 0;
}
.bijoux-reviews-section .commentlist li {
    background: #fff;
    padding: 25px;
    border-radius: 6px;
    list-style: none;
    margin-bottom: 0; /* Override Woo */
    border: none;
}
.bijoux-reviews-section .comment_container {
    display: flex;
    flex-direction: column;
}
.bijoux-reviews-section .star-rating { float: none; margin-bottom: 10px; color: #FFD700; }
.bijoux-reviews-section .meta { font-size: 0.85rem; color: #aaa; margin-top: auto; padding-top: 15px; }
.bijoux-reviews-section .description { color: #555; font-style: italic; }

/* --- 6. RELATED --- */
.bijoux-related-section {
    max-width: 1200px;
    margin: 60px auto;
}
.bijoux-related-section ul.products {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 colonnes comme capture */
    gap: 30px;
}
/* Nettoyage cartes related pour style Bijoux */
.bijoux-related-section .product {
    text-align: left;
    background: transparent;
}
.bijoux-related-section .product img { border-radius: 4px; margin-bottom: 10px; }
.bijoux-related-section .woocommerce-loop-product__title { font-size: 1rem; font-weight: 400; }
.bijoux-related-section .price { color: var(--color-title); font-weight: bold; }

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
    .bijoux-top-section { grid-template-columns: 1fr; }
    .specs-grid { grid-template-columns: 1fr; }
    .bijoux-reviews-section .commentlist { grid-template-columns: 1fr; }
    .bijoux-related-section ul.products { grid-template-columns: repeat(2, 1fr); }
}



/******* FOOTER ******/

.site-footer {
    padding-bottom: 20px;
    background-color: #8B4513;
}

.footer-container {
    display: flex;
    flex-direction: row;
    width: 1300px;
}

.col-1 {
    width: 40%;
}

.col-1 img {
    width: 50%
}

.col-1 p {
    color: #fff;
    padding-top: 15px;
}

.col-2,
.col-3,
.col-4 {
    width: 20%;
}

.col-reseaux {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
    padding-right: 100px;
}

.col-reseaux svg {
    width: 24px;
    height: 24px;
    fill: var(--primary-color);
    transition: 0.3s;
}

.col-reseaux svg:hover {
    fill: var(--text-color) !important;
}

.footer-container span {
    font-size: 20px;
    font-family: "Dancing Script";
    color: #FFF;
}

.footer-container ul li {
    list-style: none;
    padding-bottom: 8px;
}


.footer-container li a {
    text-decoration: none;
    font-family: "Lato";
    font-size: 14px;
    font-weight: 300;
    color: #fff !important;
    /* Couleur du texte normal */
    transition: color 0.3s;
    /* Transition de couleur au survol */
}

.footer-container li a:hover {
    color: #6a0000 !important;
    /* Couleur du texte au survol */
}


.footer-container ul {
    margin-left: 0;
}

.bandeau-newsletter {
    width: 1000px;
    background-color: #FFF;
    border: 1px solid var(--primary-color);
    box-shadow: 0px 0px 15px 3px rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 10px;
    padding: 20px;
    align-items: center;
    margin-bottom: 50px;
    margin-top: -100px;
}

.prehistoire-chez-vous {
    color: var(--text-color);
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 10px;
    line-height: normal;
}

.bandeau-newsletter p {
    color: var(--text-color);
}

.copyright {
    background-color: #FFF;
}

.copyright p {
    color: var(--text-color);
    font-size: 14px;
    text-align: center;
    margin: 0;
    padding: 10px 0;
}

.copyright a {
    color: var(--text-color);
    transition: 0.3s;
}

.copyright a:hover {
    color: var(--primary-color) !important;
}




/******* PAGE 404 ***********/


/* Page 404 */
.page-404 {
    min-height: 100vh;
    /* La page occupe toute la hauteur de la fenêtre */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-image: url('/wp-content/uploads/2024/12/404-PT.webp');
    /* Chemin vers l'image de fond */
    background-size: cover;
    /* L'image couvre toute la zone */
    background-position: center;
    /* Centre l'image */
    background-repeat: no-repeat;
    /* Pas de répétition de l'image */
    color: #fff;
    /* Couleur du texte pour contraster avec le fond */
    text-align: center;
    padding: 20px;
}


.container-404 {
    max-width: 800px;
    margin: 0 auto;
}

.error-title {
    font-size: 2.5rem;
    color: var(--text-color);
    margin-bottom: 20px;
}

.error-message {
    font-size: 1.2rem;
    color: var(--text-color);
    margin-bottom: 30px;
    line-height: 1.6;
}






/********************************/
/******* RESPONSIVE MOBILE ******/
/********************************/


/* Hamburger menu styles for mobile view */
.hamburger {
    display: none;
    cursor: pointer;
    font-size: 24px;
    /* Adjust size as needed */
    background: none;
    border: none;
}

/* Collapsible Menu for Mobile */
.collapse {
    display: flex;
    flex-direction: column;
}

.collapse.show {
    display: block;
}

/* Styles de base */
.hamburger {
    display: none;
    /* Le bouton hamburger est caché par défaut et s'affichera sur les mobiles */
    cursor: pointer;
    font-size: 30px;
    /* Taille du bouton hamburger */
}

#menu-toggle {
    display: none;
    /* La checkbox est cachée */
}


/* Styles spécifiques aux mobiles */
@media (max-width: 768px) {

    h1 {
        font-size: 34px;
        font-weight: 600;
    }

    h2 {
        font-size: 28px;
        font-weight: 600;
    }

    h3 {
        font-size: 24px;
        font-weight: 600;
    }

    h4 {
        font-size: 22px;
        font-weight: 600;
    }

    p {
        font-size: 15px;
    }




    .logo_header {
        padding-left: 5px;
    }

    .hamburger {
        display: block;
        /* Le bouton hamburger s'affiche sur les mobiles */
        position: absolute;
        font-size: 30px;
        right: 20px;
        /* Positionnement à droite */
        z-index: 2;
        /* S'assure que le hamburger est cliquable */
    }

    .navbar {
        padding: 0;
    }

    .navbar-collapse.collapse {
        display: none;
        /* Le menu est caché par défaut */
        position: absolute;
        /* Positionnement absolu pour s'afficher au-dessus du contenu */
        width: 100%;
        /* Largeur complète */
        z-index: 1;
        background-color: #fff;
        /* Arrière-plan blanc, à ajuster selon le design */
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
        /* Ombre pour un effet visuel */
        top: 80px;
        /* Distance du haut, à ajuster en fonction de la hauteur de votre navbar */
    }

    #menu-toggle:checked~.navbar-collapse.collapse {
        display: block;
        /* Affiche le menu lorsque la checkbox est cochée */
    }

    .navbar-collapse.collapse .nav_menu li {
        display: block;
        /* Affiche les éléments du menu en bloc pour une disposition verticale */
        text-align: center;
        /* Centre le texte des éléments du menu */
    }

    .navbar-nav a:hover {
        border-bottom: none;
    }

    .navbar-nav {
        list-style: none;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        margin-bottom: 0;
        gap: 0;
        align-items: flex-start;
        padding: 0;
        margin-top: 0;

    }

    .navbar-nav li {
        margin: 0;
        border-top: 1px solid black;
        width: 100%;
    }

    .navbar-nav a {
        padding: 10px 0;
    }

    .navbar-nav>li {
        position: relative;
        /* S'assurer que chaque élément de menu est en position relative */
    }

    .navbar-nav>li ul {
        position: relative;
        /* Changer de absolute à relative */
        display: none;
        /* Masquer les sous-menus par défaut */
        width: 100%;
        /* S'assurer que le sous-menu occupe toute la largeur disponible */
        overflow: hidden;
        height: 0;
        /* Par défaut, le sous-menu est caché */
    }

    .navbar-nav>li:hover ul,
    .navbar-nav>li:focus-within ul {
        display: block;
        /* Afficher les sous-menus au survol ou au focus */
        overflow: hidden;
        /* Cacher tout débordement */
    }

    .navbar-nav>li ul li {
        width: 100%;
        /* S'assurer que chaque élément du sous-menu prend toute la largeur */
        border-top: 1px solid black;
        /* Ajouter une bordure pour séparer les éléments */
    }

    .navbar-nav>li ul li a {
        display: block;
        font-size: 14px;
        padding: 10px 0;

    }

    header .container {
        width: 100%;
        height: auto;
        margin-top: 5px;
    }


    /********* FOOTER *********/

    .bandeau-newsletter {
        width: auto;
        margin: -100px 10px 40px 10px;
        flex-direction: column;
    }

    .bandeau-newsletter .prehistoire-chez-vous {
        font-size: 24px;
        text-align: center;
    }

    .bandeau-newsletter p {
        text-align: center;
    }

    #sib-container {
        padding: 0;
    }

    #sib-form {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .footer-container {
        width: auto;
        margin: 0 10px;
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
        justify-content: space-between;
    }

    .footer-container .col-1,
    .footer-container .col-2,
    .footer-container .col-3,
    .footer-container .col-4 {
        width: 47%;
    }

    .footer-container .custom-logo-link img {
        width: 100%;
    }

    .footer-container .icons-contact {
        gap: 15px;
    }

    .footer-container ul {
        font-size: 14px;
    }









}