/*
Theme Name: La Belle Blonde Fran¸aise
Theme URI: https://www.labelleblondefrancaise.com
Author: Media Squad
Author URI: https://www.media-squad.fr/
Description: Thème du site de La Belle Blonde Fran¸aise
Version: 1.0
*/

@media (max-width: 575.98px) {}

@media (max-width: 767.98px) {}

@media (max-width: 991.98px) {}

@media (max-width: 1199.98px) {}

@media (max-width: 1399.98px) {}


.fp-warning, .fp-watermark {
    display: none !important;
}


/* --- VARIABLES ET RESET --- */
:root {
    --m-orange: #FF6B00;
    --m-blue: #000B29;
    --m-dark: #121626;
    --m-white: #ffffff;
    --m-gray: #f4f4f4;
}

body { font-family: "Montserrat", sans-serif; color: var(--m-blue); }

h1 {
    font-size:36px;
    font-weight:700;
}
h1.product_title.entry-title {
    font-family: "Montserrat", sans-serif !important;
    font-size:36px;
    font-weight:800;    
}
p {
    font-family: 'Montserrat', sans-serif !important;
}



/* Navbar Styling */
.navbar {
    background:url('https://dev.labelleblondefrancaise.com/wp-content/themes/lbbf/img/bg-nav-left.png')left center no-repeat white;
    padding: 1rem 2rem;
    height:83px;
}
.navbar .right-bg {
    background:url('https://dev.labelleblondefrancaise.com/wp-content/themes/lbbf/img/bg-nav-right.png')left center no-repeat white;
    display: block;
    height:83px;
    width: 280px;
    position: relative;
    right:0;
}
@media (max-width: 767.98px) {
    .navbar .right-bg {
        display:none;
    }    
}

/* Cache le nav par défaut uniquement sur la home */
.home .navbar.fixed-top {
  transform: translateY(-100%);
  transition: transform 0.4s ease-in-out;
  display: flex !important; /* Force l'affichage si Bootstrap le cache */
}

/* Affiche le nav dès qu'on n'est PLUS sur la première section */
/* On cible toutes les classes commençant par fp-viewing sauf la première */
.home body:not([class*="fp-viewing-0"]):not([class*="fp-viewing-hero"]) .navbar.fixed-top {
  transform: translateY(0);
}
.navbar-brand {
    margin-left: 130px !important;
}
@media (max-width: 767.98px) {
    .navbar-brand {
        margin-left: 0px !important;
    } 
}
.navbar-brand img {
    height: 50px !important;
}
.nav-link {
    color: #121112 !important;
    font-weight: 500;
    margin: 0 10px;
}
.nav-link:hover {
    color: #e3262e !important;
}

.navbar-collapse {
    background-color: white;
    margin-top:5px;
    padding:15px 15px;
}


.btn-contact {
    border: 1px solid #ddd !important;
    border-radius: 12px !important;
    padding: 10px 25px !important;
    font-weight: 500 !important;
}
.btn-contact:hover {
    border: 1px solid #e3262e !important;
    color: #e3262e !important;
    border-radius: 12px !important;
    padding: 10px 25px !important;
    font-weight: 600 !important;
}
.btn-outline {
    border: 1px solid #fff !important;
    border-radius: 23px !important;
    padding: 10px 25px !important;
    color:white !important;
}
.btn-outline:hover {
    border: 1px solid #fff !important;
    background-color: white !important;
    border-radius: 23px !important;
    padding: 10px 25px !important;
    color:#ff7222 !important;    
}

@media (min-width: 992px) {

}


body.woocommerce-page {
    padding-top: 150px !important;
}

.section {
    text-align:center;
    color: #fff;
    padding: 83px 0 0 0 !important;
}
.section  .bloc-texte {
    padding: 0 130px 0 130px !important;
}
@media (max-width: 767.98px) {
    .section  .bloc-texte {
        padding: 0 30px 0 30px !important;
    }
}
.logo-produit {
    padding:25px 25px 0 25px !important;
}
.logo-produit h3 {
    font-size:17px;
    font-weight:300 !important;
    margin-top:10px;
}

/* Backgrounds colors for sections */
.fp-section:nth-child(1){
    background-image: url('https://dev.labelleblondefrancaise.com/wp-content/uploads/2026/04/section-1-1.jpg');
    background-position:center center;
    background-repeat:no-repeat;
    background-size: cover;
    /*background-image: linear-gradient(128deg,#40afff,#3f61ff);*/
}
.texte-passion {
    display: block;
    position: absolute;
    top:calc(30% + 50px);
    right:100px;
    width:600px;
    height:218px;
}
.logo-intro {
    display: block;
    position: absolute;
    top:10%;
    left:5%;
    width:220px;
    height:220px;
}

@media (max-width: 767.98px) {
    .texte-passion {
        display: block;
        position: absolute;
        top:30%;
        left:calc(50% - 150px);
        width:300px;
        height:109px;
    }
    .logo-intro {
        display: block;
        position: absolute;
        top:calc(40% - 300px);
        left:calc(50% - 110px);
        width:220px;
        height:220px;
    }        
}


#section1 {
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Pushes content to the bottom */
}
#section5 {
    background-color: white !important;
}
#section5 h2 {
    color: #003399 !important;
    font-size: 36px !important;
    font-weight: 800 !important;
}
#section5 p {
    color: #000000 !important;
    font-size: 17px !important;
    font-weight: 400 !important;
}
#section6 {
    padding: 0px 0 0 0 !important;
}
.accroches {
    /*background-color: red;*/
    padding: 60px 0;
}
.accroche {
    display: inline-block; /* Indispensable pour les éléments de type span */
    transform: rotate(352deg);
    color:#e30613;
    font-size:24px;
    font-weight:800;
    text-transform: uppercase;
    line-height: 1.15em;
}
#accroche1 {
    transform: rotate(352deg);
    margin-top:-15px;
}
#accroche2 {
    transform: rotate(7deg);
}
#accroche3 {
    transform: rotate(352deg);
}
#accroche4 {
    transform: rotate(7deg);
}
#accroche5 {
    transform: rotate(352deg);
}
.accroche span {
    color:#273583;
    font-weight:600;
}
.fp-section:nth-child(2){
    background: #ff7222;
}

.fp-section:nth-child(3){
    padding-top: 62px;
    background:#000;
}
.fp-is-overflow .fp-overflow, .fp-is-overflow .fp-overflow.fp-auto-height, .fp-is-overflow .fp-overflow.fp-auto-height-responsive {
    overflow-y: unset !important;
}

.home h2 {
    font-family: "Montserrat", sans-serif !important;
    font-size:36px !important;
    font-weight:800 !important;
    color:white !important;
    text-align: left !important;        
}
.single-product h2 {
    font-family: "Montserrat", sans-serif !important;
    font-size:28px !important;
    font-weight:800 !important;
    color: rgb(0, 11, 41) !important;
    text-align: left !important;        
}
.home p {
    font-family: "Montserrat", sans-serif !important;
    font-size:16px !important;
    font-weight:400 !important;
    color:white !important;
    text-align: left !important;        
}
p {
    font-family: "Montserrat", sans-serif !important;
    font-size:16px !important;
    font-weight:400 !important;       
}


#section4 {
    background-color: #000035;
}
#section4 h2 {
    color: #fff;
    text-align:center !important;
}



body.page {
    padding-top: 83px;
    font-family: "Barlow", sans-serif !important;
}
body.page.elementor-page h2 {
    font-family: "Barlow", sans-serif !important;
    color:#003399 !important;
    font-size: 32px !important;
    font-weight:700 !important;
}
body.page.elementor-page p {
    font-family: "Barlow", sans-serif !important;
    font-size: 17px !important;
    color: #030300 !important;
}

.bloc-chiffres span {
    font-family: "Barlow", sans-serif !important;
    color:#003399 !important;
    font-size: 60px !important;
    font-weight:700 !important; 
    margin-top:-10px;
    display: inline-block;   
}




/* --- HEADER & NAVIGATION --- */
.site-header {
    background-color: var(--m-white);
    border-bottom: 3px solid var(--m-orange);
}

/* --- BOUTONS MARGUERITE --- */
.woocommerce a.button, .woocommerce button.button, .woocommerce #respond input#submit {
    background-color: var(--m-blue) !important;
    color: white !important;
    border-radius: 50px !important;
    padding: 14px 35px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.4s ease;
    font-size:14px !important;
}
@media (max-width: 767.98px) {
    .woocommerce a.button, .woocommerce button.button, .woocommerce #respond input#submit {
        background-color: var(--m-blue) !important;
        color: white !important;
        border-radius: 50px !important;
        padding: 10px 10px !important;
        font-weight: 700 !important;
        text-transform: uppercase;
        letter-spacing: 1px;
        transition: all 0.4s ease;
        font-size:13px !important;
        text-align:center !important;
    }
}
.woocommerce a.button:hover {
    background-color: var(--m-orange) !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255,107,0,0.3);
}
.wc-block-cart__submit, .wc-block-components-button {
    margin: 0 0 16px;
    position: relative;
    background-color: #000b29 !important;
    color: white !important;
    border-radius: 50px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.4s ease;
    font-size: 14px !important;
    border:none !important
} 
.wc-block-cart__submit-button {
    color: white;
    text-decoration: none;
}
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit.alt, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.alt, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button.alt, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit.alt, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button.alt, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button.alt, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button.alt {
    background-color: #000b29;
    color: #fff;
    -webkit-font-smoothing: antialiased;
}



/* --- PAGE BOUTIQUE (GRILLE) --- */
.woocommerce ul.products li.product, .woocommerce-product-gallery__wrapper, .wc-block-components-main, .wc-block-components-sidebar {
    background: var(--m-white);
    border-radius: 12px;
    padding: 20px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}
.wc-block-components-main {
    width:calc(65% - 30px) !important;
    margin-right:30px !important;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    color: rgb(0, 11, 41) !important;
    font-size: 1.2rem !important;
    padding-top: 15px;
}

.woocommerce ul.products li.product .price {
    color: var(--m-orange) !important;
    font-size: 1.3rem;
}
.woocommerce-ordering {
    display: none;
}



/* --- PAGE PRODUIT UNIQUE --- */
.single-product .product_title, .single-product h1 {
    font-size: 3rem !important;
    font-weight: 900;
    color: rgb(0, 11, 41) !important;
}

.single-product .price {
    color: var(--m-orange) !important;
    font-size: 2rem !important;
}

.woocommerce-product-details__short-description {
    font-size:1.15em;
    color:black;
}
.single-product .posted_in {
    display: none;
}
.related.products {
    clear: both !important;
    width:100%;
    padding-top:60px;
}

/* Masquer le bouton d'ajout au panier uniquement dans les produits similaires */
.related.products .button, 
.related.products .add_to_cart_button {
    display: none !important;
}
.related.products .price, 
.related.products .price {
    display: none !important;
}
.woocommerce ul.products.columns-6 li.product, .woocommerce-page ul.products.columns-6 li.product {
    width: 13.5%;
}
@media (min-width: 768px) {
    .woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
        margin: 0 30px 2.992em 0 !important;
    }
}
@media="only screen and (max-width: 768px)" {
    .woocommerce ul.products[class*=columns-] li.product, .woocommerce-page ul.products[class*=columns-] li.product {
        margin: 0 0 30px;
    }
}


/* Style des onglets (Description, etc.) */
.woocommerce-tabs ul.tabs li.active {
    border-bottom: 4px solid var(--m-orange) !important;
}

/* --- FOOTER (Inspiré du visuel) --- */
.site-footer {
    background-color: var(--m-dark);
    color: white;
    padding: 60px 0;
}

/* --- ÉLÉMENTS DÉCORATIFS (FLEURS) --- */
.footer-flower-separator {
    height: 50px;
    background-image: url('pattern-fleurs.png'); /* À créer d'après le visuel */
    background-repeat: repeat-x;
}


.woocommerce-page h1 {
    font-family: "Montserrat", sans-serif !important;
    font-size:36px !important;
    font-weight:800 !important;
    color: #333399 !important;
    text-align: left !important;      
}
.woocommerce-result-count {
    display:none;
}




/* --- TUNNEL DE COMMANDE (CHECKOUT) --- */

/* Fond de page gris clair pour détacher les formulaires blancs */
.woocommerce-checkout {
    background-color: #f8f9fa;
    padding-top: 50px;
}

/* Style des champs de saisie */
.woocommerce-checkout input.input-text, 
.woocommerce-checkout select, 
.woocommerce-checkout textarea {
    border: 1px solid #ddd !important;
    border-radius: 8px !important;
    padding: 12px !important;
    background-color: #fff;
}

/* Focus sur les champs : passage au bleu Marguerite */
.woocommerce-checkout input.input-text:focus {
    border-color: var(--m-blue) !important;
    outline: none;
}

/* Colonne de droite (Récapitulatif de commande) */
#order_review_heading, #order_review {
    background-color: var(--m-white);
    padding: 30px;
    border-radius: 15px;
    border: 2px solid var(--m-blue);
}

/* Tableau des totaux */
.shop_table.woocommerce-checkout-review-order-table th {
    text-transform: uppercase;
    color: var(--m-blue);
}

.shop_table.woocommerce-checkout-review-order-table .order-total {
    color: var(--m-orange);
    font-size: 1.5rem;
}

/* Bouton Final "Commander" */
#place_order {
    background-color: var(--m-orange) !important;
    font-size: 1.2rem !important;
    width: 100% !important;
    padding: 20px !important;
    box-shadow: 0 4px 15px rgba(255, 107, 0, 0.4);
}



/* --- ESPACE CLIENT (MY ACCOUNT) --- */

/* Navigation latérale */
.woocommerce-MyAccount-navigation ul {
    list-style: none;
    padding: 0;
    background: var(--m-blue);
    border-radius: 12px;
    overflow: hidden;
}

.woocommerce-MyAccount-navigation ul li {
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.woocommerce-MyAccount-navigation ul li a {
    display: block;
    padding: 15px 20px;
    color: white !important;
    text-decoration: none;
    font-weight: 600;
    transition: background 0.3s;
}

.woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-MyAccount-navigation ul li a:hover {
    background-color: var(--m-orange);
}

/* Contenu de la page */
.woocommerce-MyAccount-content {
    background: white;
    padding: 30px;
    border-radius: 12px;
    border: 1px solid #eee;
}

/* Badges de statut de commande */
.woocommerce-MyAccount-content mark {
    background-color: var(--m-orange);
    color: white;
    padding: 4px 10px;
    border-radius: 4px;
    font-weight: bold;
}

/* Boutons de l'espace client (Voir commande, Modifier adresse) */
.woocommerce-MyAccount-content .button {
    background-color: var(--m-blue) !important;
    font-size: 0.8rem !important;
    padding: 10px 20px !important;
}


/* --- MINI-PANIER LATÉRAL (SIDE CART) --- */

/* Conteneur principal du panneau */
.xoo-wsc-container, .side-cart-panier {
    background-color: var(--m-white) !important;
    box-shadow: -5px 0 30px rgba(0,0,10,0.2) !important;
    width: 380px !important;
}

/* En-tête du panier */
.xoo-wsc-header, .cart-header {
    background-color: var(--m-blue) !important;
    color: white !important;
    padding: 25px !important;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 1px;
}

/* Liste des produits dans le panier */
.xoo-wsc-product {
    border-bottom: 1px solid #eee !important;
    padding: 15px 10px !important;
}

/* Image miniature du produit (Bouteille) */
.xoo-wsc-img-area img {
    border-radius: 8px;
    background: #f9f9f9;
}

/* Nom de la bière */
.xoo-wsc-pname a {
    color: var(--m-blue) !important;
    font-weight: 700 !important;
    font-size: 0.95rem;
}

/* Prix et Quantité */
.xoo-wsc-pprice {
    color: var(--m-orange) !important;
    font-weight: 700;
}

.xoo-wsc-qty-batch {
    border: 1px solid var(--m-blue) !important;
    border-radius: 20px !important;
}

/* Pied du panier (Footer) */
.xoo-wsc-footer {
    background: #fdfdfd !important;
    border-top: 2px solid var(--m-orange) !important;
    padding: 20px !important;
}

/* Sous-total */
.xoo-wsc-ft-totals {
    font-size: 1.2rem;
    color: var(--m-blue);
    margin-bottom: 15px;
}

/* Boutons d'action */
.xoo-wsc-ft-buttons a.button {
    display: block !important;
    width: 100% !important;
    margin-bottom: 10px !important;
    text-align: center;
}

/* Bouton "Voir le panier" (Bleu) */
.xoo-wsc-ft-buttons a.xoo-wsc-cart-btn {
    background-color: var(--m-blue) !important;
    border: 2px solid var(--m-blue) !important;
}

/* Bouton "Paiement" (Orange) */
.xoo-wsc-ft-buttons a.xoo-wsc-chkt-btn {
    background-color: var(--m-orange) !important;
    border: 2px solid var(--m-orange) !important;
    box-shadow: 0 4px 10px rgba(255, 107, 0, 0.3);
}

/* Animation de la pastille de notification sur l'icône panier */
.cart-contents .count {
    background-color: var(--m-orange);
    color: white;
    border-radius: 50%;
    padding: 2px 6px;
    font-size: 10px;
    position: absolute;
}

.wp-block-woocommerce-cart-order-summary-coupon-form-block, .wp-block-woocommerce-checkout-order-summary-coupon-form-block {
    font-size:18px !important;
    font-weight: 600 !important;
}


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

footer {
    background-color: #15152e;
    color: #ffffff;
    font-size:14px !important;
    padding: 60px 0 30px !important;
}
footer p {
    color: #fff !important;
    font-size:14px !important;
}
footer a {
    color: #fff !important;
    font-size:14px !important;
}
footer h5 {
    font-family: 'Montserrat', sans-serif;
    font-size:14px;
    font-weight:700;
    line-height:20px;
    color:white;
    position: relative;
    text-transform:uppercase;
    display: inline-block; /* Keeps the line as wide as the text */
    padding-bottom: 15px;  /* Space between text and the line */
    margin-bottom: 15px;
}





/* =WordPress Core
-------------------------------------------------------------- */
.alignnone {
    margin: 5px 20px 20px 0;
}
.aligncenter,
div.aligncenter {
    display: block;
    margin: 5px auto 5px auto;
}
.alignright {
    float:right;
    margin: 5px 0 20px 20px;
}
.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}
a img.alignright {
    float: right;
    margin: 5px 0 20px 20px;
}
a img.alignnone {
    margin: 5px 20px 20px 0;
}
a img.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}
a img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.wp-caption {
    background: #fff;
    border: 1px solid #f0f0f0;
    max-width: 96%; /* Image does not overflow the content area */
    padding: 5px 3px 10px;
    text-align: center;
}
.wp-caption.alignnone {
    margin: 5px 20px 20px 0;
}
.wp-caption.alignleft {
    margin: 5px 20px 20px 0;
}
.wp-caption.alignright {
    margin: 5px 0 20px 20px;
}
.wp-caption img {
    border: 0 none;
    height: auto;
    margin: 0;
    max-width: 98.5%;
    padding: 0;
    width: auto;
}
.wp-caption p.wp-caption-text {
    font-size: 11px;
    line-height: 17px;
    margin: 0;
    padding: 0 4px 5px;
}
/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
}
.screen-reader-text:focus {
	background-color: #eee;
	clip: auto !important;
	clip-path: none;
	color: #444;
	display: block;
	font-size: 1em;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
	/* Above WP toolbar. */
}