/*
Theme Name: Kadence Child
Theme URI: https://www.kadencewp.com/kadence-theme/
Template: kadence
Author: Kadence WP
Author URI: https://www.kadencewp.com/
Description: Kadence Theme is a lightweight yet full featured WordPress theme for creating beautiful fast loading and accessible websites, easier than ever. It features an easy to use drag and drop header and footer builder to build any type of header in minutes. It features a full library of gorgeous starter templates that are easy to modify with our intelligent global font and color controls. With extensive integration with the most popular 3rd party plugins, you can quickly build impressive ecommerce websites, course websites, business websites, and more.
Tags: translation-ready,accessibility-ready,two-columns,right-sidebar,left-sidebar,footer-widgets,blog,custom-logo,custom-background,custom-menu,rtl-language-support,editor-style,threaded-comments,custom-colors,featured-images,wide-blocks,full-width-template,theme-options,e-commerce
Version: 1.5.2.1764855103
Updated: 2025-12-07 14:31:43

*/
/* --- CSS ACCUEIL SUR MESURE TOILES.SHOP --- */

/* 1. Structure Globale */
.custom-home .container {
    max-width: 1290px;
    margin: 0 auto;
    padding: 0 20px;
}
.section-title {
    text-align: center;
    font-family: 'Playfair Display', serif;
    font-size: 2.5rem;
    color: #0A2540; /* Bleu Marine */
    margin-bottom: 40px;
    position: relative;
    display: inline-block;
    width: 100%;
}
/* Petit trait orange sous les titres */
.section-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: #EC960A;
    margin: 15px auto 0;
}

/* 2. Hero Section (Mise à jour pour fetchpriority) */
.hero-section {
    position: relative;
    /* On a supprimé la ligne background-image ici */
    padding: 120px 0;
    color: #fff;
    text-align: center;
    overflow: hidden; /* Important pour que l'image ne dépasse pas */
}

/* Nouvelle classe pour l'image HTML */
.hero-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* C'est magique : ça remplace background-size: cover */
    z-index: 0; /* Tout au fond */
}

/* On s'assure que le voile et le texte passent devant l'image */
.hero-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(10, 37, 64, 0.7);
    z-index: 1; /* Devant l'image */
}

.hero-content {
    position: relative;
    z-index: 2; /* Devant le voile */
    max-width: 800px;
}
/* --- CORRECTION COULEUR TITRE HERO --- */
.hero-content h1 {
    color: #ffffff !important;
    text-shadow: 0 2px 5px rgba(0,0,0,0.3); /* Petite ombre pour améliorer la lecture sur l'image */
}

/* Boutons */
.btn-cta {
    display: inline-block;
    background-color: #EC960A;
    color: #fff;
    padding: 15px 40px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    text-transform: uppercase;
}
.btn-cta:hover {
    background-color: #d68809;
    color: #fff;
    transform: translateY(-2px);
}
.btn-secondary {
    display: inline-block;
    border: 2px solid #0A2540;
    color: #0A2540;
    padding: 10px 30px;
    text-decoration: none;
    font-weight: bold;
    margin-top: 30px;
    transition: 0.3s;
}
.btn-secondary:hover {
    background: #0A2540;
    color: #fff;
}
.center-btn { text-align: center; }

/* 3. Reassurance Bar */
.reassurance-bar {
    background: #f9f9f9;
    padding: 40px 0;
    border-bottom: 1px solid #eee;
}
.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    text-align: center;
}
.reassurance-item .icon {
    font-size: 2.5rem;
    display: block;
    margin-bottom: 10px;
}
.reassurance-item h3 {
    font-size: 1.1rem;
    color: #0A2540;
    margin-bottom: 5px;
}
.reassurance-item p {
    font-size: 0.9rem;
    color: #666;
    margin: 0;
}

/* 4. Sections Produits & Catégories */
.categories-section, .products-section, .featured-section {
    padding: 60px 0;
}
.featured-section {
    background-color: #f4f4f4; /* Fond gris léger pour différencier */
}

/* Personnalisation des grilles WooCommerce natives */
.woocommerce ul.products li.product {
    text-align: center;
    transition: transform 0.3s ease;
    background: #fff;
    padding-bottom: 15px;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}
.woocommerce ul.products li.product:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.woocommerce ul.products li.product img {
    margin-bottom: 15px !important;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-family: 'Playfair Display', serif;
    font-size: 1.1rem;
    color: #0A2540;
    padding: 0 10px;
}
.woocommerce ul.products li.product .price {
    color: #EC960A;
    font-weight: bold;
    font-size: 1.1rem;
}
.woocommerce ul.products li.product .button {
    background-color: #0A2540 !important;
    color: #fff !important;
    border-radius: 0;
    margin-top: 10px;
}
.woocommerce ul.products li.product .button:hover {
    background-color: #EC960A !important;
}

/* 5. Blog Section */
.blog-section { padding: 30px 0; border-top: 1px solid #eee; }
.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.blog-card {
    background: #fff;
    border: 1px solid #eee;
}
.blog-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}
.blog-content {
    padding: 10px;
}
.blog-content h3 a {
    color: #0A2540;
    text-decoration: none;
    font-family: 'Playfair Display', serif;
}
.read-more {
    color: #EC960A;
    font-weight: bold;
    text-decoration: none;
}

/* --- RESPONSIVE MOBILE --- */
@media (max-width: 1024px) {
    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}
	/* Mobile HERO SECTION FRONT-PAGE */

@media (max-width: 1024px) {
    .hero-section {
        min-height: 398px;
        padding: 1.5rem 1rem;
    }

    .hero-bg-image {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 398px;
        object-fit: cover;
      z-index: -1;
    }

}
@media (max-width: 700px) {
	    .hero-section {
        min-height: 290px;
    }

    .hero-bg-image {
       height: 290px;
    }
  .hero-section .lead-text {
    display: none;
}
}
@media (max-width: 768px) {
    .blog-grid {
        grid-template-columns: 1fr; /* Une seule colonne sur mobile */
    }
    .hero-content h1 { font-size: 2rem; }
	
    /* WooCommerce gère déjà ses colonnes en mobile, mais on force si besoin */
    .woocommerce ul.products[class*=columns-] li.product, 
    .woocommerce-page ul.products[class*=columns-] li.product {
        width: 48%; /* 2 produits par ligne sur mobile */
        float: left;
        margin-right: 2%;
    }
    .woocommerce ul.products[class*=columns-] li.product:nth-child(2n) {
        margin-right: 0;
    }
}
/* --- CSS FINAL : PRIX & BOUTONS --- */

/* 1. CENTRAGE DU PRIX */
.woocommerce ul.products li.product .price {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    text-align: center !important;
    color: #D68809 !important;
    font-weight: bold !important;
    font-size: 1.1rem !important;
    margin: 5px 0 15px 0 !important;
}

/* Force les variations de prix (ex: 29€ - 100€) à rester sur une ligne */
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .price span,
.woocommerce ul.products li.product .price bdi {
    white-space: nowrap !important;
}

/* 2. BOUTONS BLEUS -> ORANGE */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .add_to_cart_button {
    background-color: #0A2540 !important;
    color: white !important;
    width: 100% !important;
    display: block !important;
    border-radius: 0 !important;
    margin-top: auto !important;
    text-transform: uppercase;
    font-weight: bold;
    padding: 10px 0 !important;
}

.woocommerce ul.products li.product .button:hover {
    background-color: #EC960A !important;
}

/* 3. STRUCTURE DES CARTES */
.woocommerce ul.products li.product:not(.product-category) {
    display: flex !important;
    flex-direction: column !important;
    min-height: 420px !important;
    text-align: center !important; /* Centre tout le texte par défaut */
}

/* Le lien principal prend toute la place dispo avant le bouton */
.woocommerce ul.products li.product:not(.product-category) a.woocommerce-LoopProduct-link {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centre l'image et le titre */
}

/* 4. NETTOYAGE CATÉGORIES "NOS UNIVERS" */
.woocommerce ul.products li.product.product-category {
    min-height: 0 !important;
    margin-bottom: 20px !important;
}
.woocommerce ul.products li.product.product-category img {
    margin-bottom: 10px !important;
}
/* --- TUEUR DE VUE RAPIDE --- */
.kadence-quick-view-button,
.yith-wcqv-button,
.quick-view,
a.qview-btn {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}
/* --- TUILES CATÉGORIES BOUTIQUE --- */
.shop-cat-tiles {
    display: flex;
    gap: 15px;
    overflow-x: auto; /* Permet le scroll horizontal sur mobile */
    padding-bottom: 20px;
    margin-bottom: 30px;
    scrollbar-width: thin; /* Firefox */
}

/* Cache la barre de scroll moche mais garde le scroll */
.shop-cat-tiles::-webkit-scrollbar { height: 6px; }
.shop-cat-tiles::-webkit-scrollbar-track { background: #f1f1f1; }
.shop-cat-tiles::-webkit-scrollbar-thumb { background: #EC960A; border-radius: 10px; }

.cat-tile {
    flex: 0 0 auto; /* Ne pas écraser les tuiles */
    width: 100px;
    text-align: center;
    text-decoration: none;
    transition: transform 0.3s;
}

.cat-tile:hover { transform: translateY(-5px); }

.cat-img {
    width: 80px;
    height: 80px;
    border-radius: 50%; /* Rond comme Instagram */
    background-size: cover;
    background-position: center;
    margin: 0 auto 10px auto;
    border: 2px solid #0A2540;
    transition: border-color 0.3s;
}

.cat-tile:hover .cat-img { border-color: #EC960A; }

.cat-tile span {
    display: block;
    font-size: 0.9rem;
    font-weight: bold;
    color: #0A2540;
    line-height: 1.2;
}
/* --- OPTIMISATION FICHE PRODUIT --- */

/* 1. Titre et Prix */
.product_title {
    font-family: 'Playfair Display', serif;
    font-size: 2.2rem !important;
    color: #0A2540;
    margin-bottom: 10px;
}

.summary .price {
    font-size: 1.5rem !important;
    color: #D68809 !important;
    font-weight: bold;
    display: block;
    margin-bottom: 20px;
}

/* 2. Boutons de Variation (Plugin Swatches) */
/* On les rend plus jolis et carrés */
.variable-item-span-button {
    border: 1px solid #ddd !important;
    border-radius: 0 !important; /* Carré */
    background: white !important;
    color: #0A2540 !important;
    padding: 8px 15px !important;
    font-weight: 600;
}

.variable-item-span-button.selected {
    background: #0A2540 !important;
    color: white !important;
    border-color: #0A2540 !important;
}

/* 3. Bouton Ajouter au Panier (Gros et Orange) */
.single_add_to_cart_button {
    background-color: #EC960A !important;
    color: white !important;
    height: 50px !important; /* Plus haut */
    font-size: 1.1rem !important;
    text-transform: uppercase;
    font-weight: bold;
    border-radius: 4px !important;
    margin-top: 20px !important;
    width: 100%; /* Prend toute la largeur sur mobile */
}
.single_add_to_cart_button:hover {
    background-color: #d68809 !important;
    transform: translateY(-2px);
}

/* 4. Bloc Réassurance (celui qu'on a ajouté en PHP) */
.product-reassurance {
    background: #f9f9f9;
    padding: 15px;
    margin-top: 20px;
    border: 1px solid #eee;
    border-radius: 4px;
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 colonnes */
    gap: 10px;
}

.reassure-item {
    font-size: 0.85rem;
    color: #555;
    display: flex;
    align-items: center;
    gap: 8px;
}

.reassure-item .icon { font-size: 1.2rem; }

/* 5. Nettoyage Méta (Masquer UGS/SKU et Catégorie si tu veux) */
.product_meta .sku_wrapper { display: none; } /* Cache le code UGS */
.product_meta { 
    margin-top: 20px; 
    font-size: 0.85rem; 
    color: #888;
    border-top: 1px solid #eee;
    padding-top: 10px;
}
.product_meta a { color: #0A2540; font-weight: bold; }

/* 6. Galerie d'images */
/* Petit contour fin pour délimiter les images sur fond blanc */
.woocommerce-product-gallery__image img {
    border: 1px solid #f0f0f0;
}
/* --- STYLE "VOIR PLUS" DESCRIPTION --- */

/* État fermé par défaut */
.desc-collapsed {
    max-height: 110px; /* Hauteur visible */
    overflow: hidden;
    position: relative;
    transition: max-height 0.5s ease; /* Animation fluide */
}

/* Le petit dégradé blanc par-dessus le texte pour l'effet "coupé" */
.desc-collapsed::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    height: 60px; /* Hauteur du dégradé */
    width: 100%;
    background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
    pointer-events: none; /* Permet de cliquer à travers si besoin */
}

/* État ouvert */
.desc-expanded {
    max-height: 2000px; /* On met une grande valeur pour tout montrer */
    transition: max-height 0.8s ease;
}
.desc-expanded::after {
    display: none; /* On cache le dégradé quand c'est ouvert */
}

/* Le bouton "Voir plus" */
.toggle-short-desc {
    display: inline-block;
    margin-top: 5px;
    margin-bottom: 15px;
    font-size: 0.9rem;
    font-weight: bold;
    color: #EC960A; /* Ton orange */
    text-decoration: none;
    cursor: pointer;
    border-bottom: 1px dashed #EC960A; /* Petit soulignement discret */
}

.toggle-short-desc:hover {
    color: #0A2540;
    border-color: #0A2540;
}
/* --- CORRECTIF FINAL : ATTRIBUTS & SÉLECTION --- */

/* 1. GESTION DES LIGNES (Anti-chevauchement) */
/* On force le conteneur à gérer le retour à la ligne */
ul.variable-items-wrapper {
    display: flex !important;
    flex-wrap: wrap !important; /* Indispensable : permet de passer à la ligne */
    gap: 10px !important; /* Espace moderne entre les éléments (remplace les marges) */
    width: 100% !important;
    margin-bottom: 15px !important;
}

/* On s'assure que chaque élément a de la place et ne flotte pas */
ul.variable-items-wrapper li.variable-item {
    float: none !important;
    display: inline-flex !important;
    margin: 0 !important; /* On laisse le 'gap' gérer l'espace */
    padding: 0 !important;
    height: auto !important; /* Crucial : empêche l'élément du dessous de monter */
    min-height: 40px !important; /* Hauteur minimale de sécurité */
}

/* 2. STYLE DU BOUTON (État Normal) */
.variable-item-span-button {
    display: flex !important;
    align-items: center;
    justify-content: center;
    border: 1px solid #ccc !important;
    background: #fff !important;
    color: #555 !important;
    padding: 10px 15px !important;
    border-radius: 2px !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    height: 100% !important; /* Remplit bien la case */
    line-height: 1.2 !important;
}

/* 3. STYLE DU BOUTON SÉLECTIONNÉ (Orange force) */
/* On cible le LI parent 'selected' pour être sûr que ça marche */
li.variable-item.selected .variable-item-span-button,
.variable-item-span-button.selected {
    border: 2px solid #EC960A !important; /* Bordure épaisse Orange */
    color: #EC960A !important; /* Texte Orange */
    background: #fff !important;
    box-shadow: 0 0 5px rgba(236, 150, 10, 0.2) !important; /* Petit halo orange */
}

/* 4. STYLE AU SURVOL */
li.variable-item:hover .variable-item-span-button,
.variable-item-span-button:hover {
    border-color: #EC960A !important;
    color: #EC960A !important;
}

/* 5. GESTION ESPACE TITRES */
/* On garde ton espacement qui marchait bien */
.woo-variation-items-wrapper-label,
table.variations th.label {
    padding-bottom: 10px !important;
    display: block !important;
}
/* --- ALIGNEMENT QUANTITÉ + AJOUTER AU PANIER --- */

/* On transforme le formulaire en ligne flexible */
form.cart {
    display: flex !important;
    flex-wrap: nowrap !important; /* Force sur une ligne */
    align-items: stretch !important; /* Même hauteur pour les deux */
    gap: 10px; /* Espace entre quantité et bouton */
    margin-bottom: 20px !important;
}

/* La case quantité */
.woocommerce .quantity {
    width: 80px !important; /* Largeur fixe */
    flex: 0 0 auto; /* Ne grandit pas */
    margin: 0 !important;
}

.woocommerce .quantity .qty {
    height: 50px !important; /* Force la même hauteur que le bouton */
    border-radius: 0 !important;
    border: 1px solid #ccc !important;
}

/* Le bouton Ajouter au panier */
.single_add_to_cart_button {
    flex: 1 !important; /* Prend tout le reste de la place */
    margin-top: 0 !important; /* Enlève la marge qu'on avait mise avant */
    height: 50px !important; /* Hauteur fixe */
    width: auto !important; /* Laisse le flex gérer la largeur */
}
/* --- ALIGNEMENT WISH & COMPARE --- */

/* Conteneur global (si existe) */
.yith-wcwl-add-to-wishlist, 
.woocommerce .compare-button,
a.compare {
    display: block !important;
    text-align: center !important;
    width: 100% !important;
    margin: 10px auto !important;
    float: none !important; /* Annule l'alignement gauche */
}

/* Style des liens pour qu'ils soient cohérents */
.yith-wcwl-add-to-wishlist a,
a.compare {
    text-decoration: none !important;
    font-weight: 600;
    color: #555;
    font-size: 0.9rem;
}

.yith-wcwl-add-to-wishlist a:hover,
a.compare:hover {
    color: #EC960A; /* Orange au survol */
}

/* Si "Comparer" est un bouton, on le rend transparent pour qu'il ressemble à un lien */
a.compare.button {
    background: transparent !important;
    color: #555 !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}
/* --- GALERIE STICKY PARFAITE (V3) --- */

@media (min-width: 1024px) {
    /* 1. On annule la mise en page par défaut de Kadence pour utiliser la nôtre */
    .woocommerce div.product.product-single-layout {
        display: block !important;
    }

    /* 2. On configure notre nouvelle boîte (créée en PHP) */
    .custom-sticky-wrapper {
        display: flex !important;
        align-items: flex-start !important; /* Important : aligne en haut */
        gap: 40px; /* Espace entre image et texte */
        position: relative;
    }

    /* 3. La Galerie (Colonne Gauche) */
    .woocommerce-product-gallery {
        width: 50% !important; /* Ou 55% selon tes goûts */
        position: -webkit-sticky !important;
        position: sticky !important;
        top: 120px !important; /* Marge du haut pour ne pas coller au plafond */
        z-index: 10;
        /* Cette ligne empêche l'image de descendre plus bas que son voisin */
        align-self: flex-start !important; 
    }

    /* 4. Les Infos (Colonne Droite) */
    .entry-summary {
        width: 50% !important; /* Le reste de la place */
        display: block !important;
    }
    
    /* 5. Les Onglets (Tabs) */
    /* On s'assure qu'ils repassent bien à la ligne en dessous */
    .woocommerce-tabs, 
    .product-footer-wrap {
        clear: both !important;
        width: 100% !important;
        display: block !important;
        margin-top: 50px !important;
    }
}

/* Ajustement Mobile (On remet tout l'un sous l'autre) */
@media (max-width: 1023px) {
    .custom-sticky-wrapper {
        display: block !important;
    }
    .woocommerce-product-gallery, .entry-summary {
        width: 100% !important;
    }
}
/* --- STYLE FORMULAIRE CONTACT 7 --- */
.wpcf7 input[type="submit"] {
    background-color: #0A2540 !important;
    color: white !important;
    border: none !important;
    padding: 12px 25px !important;
    font-weight: bold;
    text-transform: uppercase;
    border-radius: 4px;
    cursor: pointer;
    transition: 0.3s;
}
.wpcf7 input[type="submit"]:hover {
    background-color: #EC960A !important;
}
.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 textarea {
    background: #f9f9f9;
    border: 1px solid #ddd;
    padding: 10px;
    width: 100%;
}
/* 1) La galerie Woo Product Gallery Slider est à opacity:0 par défaut.
   On force son affichage immédiat pour que l'image principale puisse servir de LCP. */
.woocommerce-product-gallery.wpgs-wrapper {
    opacity: 1 !important;
}

/* 2) Sécuriser la taille de l'image principale pour éviter les déformations bizarres */
.single-product div.product .woocommerce-product-gallery img {
    max-width: 100%;
    height: auto;
}

/* 3) Optionnel : limiter un peu la hauteur sur mobile pour éviter un énorme bloc au-dessus de la ligne de flottaison */
@media (max-width: 767px) {
    .single-product div.product .woocommerce-product-gallery {
        max-height: 70vh;
        overflow: hidden;
    }
}
/* On ne l'applique que sur la home pour rester safe */
.home .home-below-fold {
    content-visibility: auto;
    contain-intrinsic-size: 1200px; /* taille fictive pour éviter les sauts de layout */
}
@font-face {
    font-family: 'slick';
    src: url('/wp-content/plugins/woo-product-gallery-slider/assets/css/fonts/slick.woff') format('woff');
    font-display: swap;
}

@font-face {
    font-family: 'Flaticon';
    src: url('/wp-content/plugins/woo-product-gallery-slider/assets/css/font/Flaticon.woff') format('woff');
    font-display: swap;
}