/* ==============================================================
   TAPITOUF — custom.css
   Dernière révision : 2026-03-25
   Organisation :
     1.  Variables & Police
     2.  Typographie globale
     3.  Charte couleurs (survols, focus, prix)
     4.  Header fixe & navigation
     5.  Bandeau TopNav & réseaux sociaux
     6.  Slider (RevolutionSlider)
     7.  Breadcrumb
     8.  Bandeau "Livraison offerte"
     9.  Catalogue produits — images & roll-over
    10.  Boutons produits (panier, wishlist, quick-view)
    11.  Section ApPageBuilder — "C'est quoi Tapitouf ?"
    12.  Section ApPageBuilder — "Cocorico"
    13.  Boutons box (ApPageBuilder)
    14.  Blog (LeoBlog)
    15.  GDPR / Klaro
   ============================================================== */


/* ==============================================================
   1. VARIABLES & POLICE
   ============================================================== */

/* Import Google Fonts — doit rester avant toute règle */
@import url('https://fonts.googleapis.com/css2?family=Albert+Sans:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    --primary-red:   #c61638;             /* Rouge Tapitouf */
    --tufting-blue:  #1fb4ab;             /* Bleu Tufting   */
    --accent-pink:   #ef88af;             /* Rose Pastel    */
    --header-beige:  #F3E1CE;             /* Fond TopNav    */
	--primary-yellow: #ffd732;             /* Jaune Logo     */
    --main-font:     'Albert Sans', sans-serif;
}


/* ==============================================================
   2. TYPOGRAPHIE GLOBALE
   ============================================================== */
/* Taille de base globale — augmentée de 10% (16px × 1.1 = 17.6px) */
/*html {
    font-size: 100% !important;
}
*/

body, p, span, div, button, input, select, textarea {
    font-family: var(--main-font) !important;
	color: #000;
}

h1, h2, h3, h4, h5, h6,
.menu-title, .title_block,
.h1-style-1, .h1-style-2, .very_big_white {
    font-family: var(--main-font) !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    border-left: none !important;
}

/* h1-style-2 : annulation de letter-spacing hérité */
.h1-style-2 {
    letter-spacing: normal !important;
}


/* ==============================================================
   3. CHARTE COULEURS — SURVOLS, FOCUS, PRIX
   ============================================================== */

/* Remplacement de l'orange thème par le rouge Tapitouf */
a:hover,
.menu-title:hover,
.breadcrumb a:hover,
.product-price,
.leo-megamenu .dropdown:hover > a,
.leo-megamenu .navbar-nav > li > a:hover,
#header .header-nav .user-info a:hover {
    color: var(--primary-red) !important;
}

/* Soulignement rose du menu MegaMenu */
.leo-megamenu .navbar-nav > li > a::before {
    background-color: #ef88af88 !important;
}

/* Bordures focus et survol produit */
input:focus,
textarea:focus,
.product-thumbnail:hover {
    border-color: var(--primary-red) !important;
}

/* Bouton CTA du slider au survol */
.bannercontainer .tp-caption.h1-style-4 .btn:hover {
    background-color: #000000;
    border-color: #000000;
    color: #FFFFFF !important;
}

/* Force le texte du bouton "Choisir le fichier" en blanc */
.group-span-filestyle .buttonText {
    color: #FFFFFF !important;
}

/* Force aussi l'icône (dossier) en blanc si elle est présente */
.group-span-filestyle .icon-span-filestyle,
#blockcart-modal .cart-content a.btn:hover, 
#blockcart-modal .cart-content a.btn:focus, 
.product-add-to-cart .product-quantity .add-to-cart:hover, 
.product-add-to-cart .product-quantity .add-to-cart:focus, 
.leo-cart-dropdown-action a.btn.cart-dropdow-checkout:hover, 
.leo-cart-dropdown-action a.btn.cart-dropdow-checkout:focus, 
.continue.btn:hover, .continue.btn:focus, 
button.btn.btn-primary.center-block:hover, 
button.btn.btn-primary.center-block:focus,
/* Bouton "Sauver" de la wishlist — hover rouge */
a.leo-wishlist-product-save-button:hover,
body#checkout section.checkout-step .form-footer button.btn:hover,
.button.btn-primary:hover
 {
    background-color: var(--primary-red) !important;
    border-color: var(--primary-red) !important;
    color: #FFFFFF !important;
}
/* Bouton "Ajouter au panier" — hover rouge */
button.add-to-cart:not(.leo-bt-cart):hover {
    background-color: var(--primary-red) !important;
    border-color: var(--primary-red) !important;
    color: #FFFFFF !important;
}

/* Force le texte du bouton Ajouter en blanc */
.promo-code button.btn-primary span,
.promo-code button.btn-primary:hover span {
    color: #FFFFFF !important;
}


/* ==============================================================
   4. HEADER FIXE & NAVIGATION
   ============================================================== */

@media (min-width: 992px) {

    /* Header collé en haut, plein écran */
    #header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        z-index: 9999 !important;
        background-color: #ffffff !important;
    }

    /* Contenu interne aligné sur la largeur du site */
    #header .header-top .inner,
    #header .header-nav .inner {
        max-width: 1710px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* Bandeaux pleine largeur non tronqués */
    .bg-fullwidth-container {
        width: 100% !important;
    }

    /* Décalage du wrapper pour compenser le header fixe */
    #wrapper {
        margin-top: 180px !important;
    }

    #content-wrapper {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
}
@media (min-width: 992px) and (max-width: 1199px) {
    #wrapper {
        margin-top: 280px !important;  /* Ajuster selon la hauteur réelle du header */
    }
}
/* Agrandissement des titres du menu x1.5 */
/* On applique l'agrandissement UNIQUEMENT sur les écrans larges (Ordinateurs) */
@media (min-width: 992px) { 
    #header .header-top .megamenu .menu-title {
        font-size: 1.5em !important;
        line-height: 1.2 !important;
        font-weight: 400 !important;
        display: inline-block;
        margin-bottom: 5px;
    }
}
/* On cible spécifiquement le menu mobile pour réinitialiser la taille */
@media (max-width: 991px) { 
    /* On vise l'élément nav-item avec leo-1 et son lien/titre interne */
    #header .nav-item.leo-1 .menu-title,
    #header .nav-item.leo-1 a,
    .leo-megamenu .nav-item.leo-1 .menu-title {
        font-size: 1rem !important; /* Taille standard pour mobile */
        line-height: normal !important;
        display: block !important; /* Pour que l'item occupe bien sa ligne en mode liste */
    }

    /* On s'assure que le conteneur lui-même ne garde pas de marges excessives */
    #header .nav-item.leo-1 {
        margin-bottom: 0 !important;
        padding: 10px 15px !important; /* Ajustement typique pour les doigts sur smartphone */
    }
}
/* Ajustement pour les écrans tactiles et mobiles */
@media (max-width: 1499px) {
    .menu-title {
        font-size: 1.25em !important; /* Taille légèrement réduite sur mobile pour éviter que le menu ne soit trop long */
    }
}
@media (max-width: 991px) {
    /* On cible TOUS les titres de menu à l'intérieur du menu mobile, peu importe le niveau */
    .offcanvas-mainnav .menu-title {
        font-size: 1rem !important; /* Force une taille standard de 16px environ */
        line-height: normal !important;
        text-transform: none !important; /* Évite les majuscules forcées si besoin */
    }

    /* On égalise l'espacement pour que ce soit propre */
    .offcanvas-mainnav li.nav-item {
        padding-top: 5px !important;
        padding-bottom: 5px !important;
    }
}
/* ── Menu forcé sur une seule ligne ── */

/* 1. La navbar elle-même ne wrap jamais */
.header-nav .nav,
#_desktop_top_menu .nav,
.leo-megamenu > ul,
.top-menu {
  flex-wrap: nowrap !important;
  white-space: nowrap;
  overflow: visible;
}

/* 2. Chaque item reste sur une ligne */
.header-nav .nav > li,
.leo-megamenu > ul > li,
.top-menu > li {
  flex-shrink: 0;
  white-space: nowrap;
}

/* 3. Adaptation de la taille de police par palier
   pour que tout rentre quelle que soit la largeur */
@media (max-width: 1500px) {
  .menu-title {
    font-size: 1.15em !important;
  }
}

@media (max-width: 1370px) {
  .menu-title {
    font-size: 1em !important;
  }
}

@media (max-width: 991px) {
  .menu-title {
    font-size: 0.9em !important;
  }
}

/* 4. Réduit aussi le padding des items pour gagner de la place */
@media (max-width: 1499px) {
  .header-nav .nav > li > a,
  .leo-megamenu > ul > li > a,
  .top-menu > li > a {
    padding-left: 2px !important;
    padding-right: 2px !important;
  }
}

.mega-col .nav-link {
    white-space: nowrap; /* Évite que les titres longs ne passent à la ligne */
    padding: 2px 5px !important;
}
/* ==============================================================
   5. BANDEAU TOPNAV & RÉSEAUX SOCIAUX
   ============================================================== */

/* Fond beige de la barre haute */
#header .nav,
.header-nav,
.nav-top {
    background-color: var(--header-beige) !important;
}

/* Bloc social : alignement à droite, sans débordement */
.header-nav .ApColumn:last-child {
    padding-right: 0 !important;
}

.header-nav .block-social {
    display: flex !important;
    justify-content: flex-end !important;
    width: 100% !important;
    padding-right: 0 !important;
}

.header-nav .block-social ul,
.block-social ul {
    display: flex !important;
    justify-content: flex-end !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 10px;
}

.header-nav .block-social li {
    margin-left: 15px !important;
    margin-right: 0 !important;
}

.header-nav .block-social li:first-child {
    margin-left: 0 !important;
}

/* Icônes en disques roses */
.block-social li a {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    background-color: var(--accent-pink) !important;
    border-radius: 50%;
    color: #FFFFFF !important;
    font-size: 1rem;
    text-decoration: none !important;
    transition: transform 0.2s ease-in-out, background-color 0.2s;
}

.block-social li a:hover {
    transform: scale(1.1);
    background-color: var(--primary-red) !important;
}

/* Injection des icônes FontAwesome */
.block-social li a::before {
    font-family: "FontAwesome" !important;
    display: inline-block;
}

.block-social li.facebook a::before  { content: "\f09a"; }
.block-social li.instagram a::before { content: "\f16d"; }
.block-social li.linkedin a::before  { content: "\f08c"; }

/* Masquer les libellés texte */
.block-social li a span {
    display: none !important;
}

/* Icônes sociales ApHtml — forcer la ligne unique */
.block.ApHtml .block_content p {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px;
    margin: 0 !important;
    white-space: nowrap !important;
    justify-content: flex-end !important;
    padding-right: 30px !important;
}

.block.ApHtml .block_content p a {
    display: inline-flex !important;
    flex-shrink: 0 !important;  /* Empêche les icônes de rétrécir */
}

.block.ApHtml .block_content p img {
    display: block !important;
    width: 35px !important;
    height: 35px !important;
}

/* Centrage vertical des colonnes dans la topnav */
#form_8530241748953339.ApRow {
    align-items: center !important;
}
/* Centrage vertical des icônes sociales dans la topnav */
#form_8530241748953339 .ApColumn {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
}

#form_8530241748953339 .block.ApHtml {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    height: 100% !important;
    width: 100% !important;
}

#form_8530241748953339 .block.ApHtml .block_content {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    width: 100% !important;
}

#form_8530241748953339 .block.ApHtml .block_content p {
    justify-content: flex-end !important;
    padding-right: 15px !important;
}

@media (max-width: 767px) {
    #form_8530241748953339,
    .header-nav,
    .nav-top {
        display: block !important;
    }
}

/*@media (max-width: 1199px) {
    #header .logo img, ... { max-height: 60px !important; }
}
/*@media (min-width: 1350px) {
    #header .logo img, ... { max-height: 60px !important; }
}*/
/**** Marque ****/
* 1. Centre verticalement toutes les colonnes dans la row */
.topnav .ApRow .row {
  display: flex;
  align-items: center !important; 
  flex-wrap: wrap;
}

/* On force les icônes sociales à ne pas avoir de marges parasites (souvent causées par la balise <p>) */
.topnav .block_content p {
    margin-bottom: 0 !important;
    display: flex;
    align-items: center;
    justify-content: flex-end; /* Aligne les icônes à droite de leur colonne */
}

/* 2. Centre le contenu à l'intérieur de la colonne icônes */
.topnav .ApColumn .block.ApHtml,
.topnav .ApColumn .block_content {
  display: flex;
  align-items: center;
  justify-content: flex-end; /* icônes collées à droite */
  height: 100%;
  margin: 0;
  padding: 0;
}

/* 3. Supprime les marges parasites du <p> autour des icônes */
.topnav .ApColumn .block_content p {
  margin: 0;
  padding: 0;
  line-height: 1;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 4. Aligne les images elles-mêmes */
.topnav .ApColumn .block_content img {
  display: block;
  vertical-align: middle;
}

.topnav #form_21671881482868548.ApRow > .row {
  display: flex !important;
  flex-wrap: nowrap;
  align-items: center !important;
  min-height: 40px;
}


/* ==============================================================
   6. SLIDER (RevolutionSlider)
   ============================================================== */

.bannercontainer .tp-caption.h1-style-1 {
    border-left: none;
}

.bannercontainer .tp-caption.very_big_white {
    text-transform: none;
    line-height: 35px;
}


/* ==============================================================
   7. BREADCRUMB
   ============================================================== */

/* Hauteur fixe et mise en page compacte */
.breadcrumb-bg {
    height: 60px !important;
    min-height: 60px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    line-height: 60px !important;
}

.breadcrumb-bg nav.breadcrumb,
.breadcrumb-bg nav.breadcrumb ol {
    height: 60px !important;
    min-height: 60px !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 60px !important;
    background: transparent !important;
}

.breadcrumb-bg nav.breadcrumb li {
    display: inline-flex;
    align-items: center;
}

.breadcrumb-bg nav.breadcrumb li,
.breadcrumb-bg nav.breadcrumb li a,
.breadcrumb-bg nav.breadcrumb li span {
    font-size: 0.69rem !important;
    text-transform: uppercase;
    vertical-align: middle !important;
}

.breadcrumb-bg nav.breadcrumb li::before,
.breadcrumb-bg nav.breadcrumb li::after {
    line-height: 40px !important;
    font-size: 0.625rem  !important;
}

/* Lien actif (dernier élément) en rouge */
.breadcrumb li:last-child a {
    color: var(--primary-red);
}

/* Masquer le titre de catégorie dans le breadcrumb */
.breadcrumb h1.h1,
.breadcrumb .category-name {
    display: none !important;
}

/* Wrapper CMS */
#content-wrapper .breadcrumb-wrapper {
    margin: 0 !important;
    padding: 0 !important;
}


/* ==============================================================
   8. BANDEAU "LIVRAISON OFFERTE"
   ============================================================== */

/* Contenu centré */
.block.orange.ApHtml .block_content {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 60px !important;
    height: 100% !important;
    max-width: 1200px;
    margin: 0 auto !important;
    text-align: center;
    vertical-align: middle;
}

/* Style du texte */
.block.orange.ApHtml .block_content div {
    font-size: 1.3rem;
    font-weight: 300;
    font-family: var(--main-font) !important;
    text-transform: none;
    line-height: 1;
	color: var(--primary-red);
}

@media (max-width: 767px) {
    .block.orange.ApHtml .block_content div {
        display: block !important;
		font-size: 1rem;
        padding: 0 15px;
    }
}

/* Contenu centré */
.block.rougedroite.ApHtml .block_content {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    min-height: 60px !important;
    height: 100% !important;
    width: 100%;
    margin: 0 auto !important;
    text-align: right;
    vertical-align: middle;
}


.block.orange.ApRawHtml,
.block.orange.ApHtml {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 60px !important;
    height: 100% !important;
    width: 100%;
    margin: 0 auto !important;
    background-color: var(--header-beige) !important; /* Votre orange Tapitouf */
    color: var(--primary-red) !important;
    text-align: center;
	vertical-align: middle;
    padding: 5px 5px;
    font-weight: 300;
    font-size: 1.3rem;
    /*border-radius: 4px; /* Si vous avez des coins arrondis sur l'autre */
    /*margin-bottom: 15px;*/
}

/* On s'assure que le texte en gras dans le RAW soit aussi rouge */
.block.orange.ApRawHtml b, 
.block.orange.ApRawHtml div {
    color: var(--primary-red) !important;
}

/* Pour le mobile : on s'assure que le bloc ne disparaisse pas */
@media (max-width: 991px) {
    .block.orange.ApRawHtml {
        display: block !important;
        font-size: 1.2rem;
        padding: 5px 5px;
    }
}

/* ==============================================================
   8B. Menu: désactiver le lien vers Tapis tuftés
   ============================================================== */

/* Désactive le clic et change le curseur pour l'élément 33 */
.leo-megamenu .menu-33 > a, 
#leo-megamenu-item-33 > a,
.item-33 > a {
    pointer-events: none !important; /* Bloque le clic */
    cursor: default !important;      /* Curseur flèche standard (pas la main) */
}

/* S'assure que les sous-menus enfants (les produits) restent cliquables */
.leo-megamenu .menu-33 .dropdown-menu a,
#leo-megamenu-item-33 .dropdown-menu a {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* Rendre l'item de menu "tapis tuftés" non cliquable */
.leo-megamenu .item-vertical > a[href*="id_category=10&controller=category"],
nav .nav-item > a[href*="id_category=10&controller=category"] {
  pointer-events: none;
  cursor: default;
}

/* Rendre l'item de menu "l'aventure Tapitouf" non cliquable */
.leo-megamenu .item-vertical > a[href*="/3-l-aventure-tapitouf"],
nav .nav-item > a[href*="/3-l-aventure-tapitouf"] {
  pointer-events: none;
  cursor: default;
}

/* ==============================================================
   9A. MINIATURES PRODUITS — IMAGES & ROLL-OVER
   ============================================================== */
/* On cible la balise ET le lien pour être sûr de gagner */
.product-miniature .product-title, 
.product-miniature .product-title a {
    font-size: 1.8rem !important; 
    line-height: 1.2 !important;
    font-family: var(--main-font) !important; /* Pour garder l'Albert Sans */
}
/* Agrandissement du prix x1.8 */
.product-price-and-shipping .price {
    font-size: 1.8rem !important; 
    font-weight: 400 !important; /* Pour que le prix soit bien lisible */
    /*color: var(--primary-red) !important; /* Utilise votre rouge Tapitouf */
    display: inline-block;
    margin-top: 0px !important;
}

/* Ajustement pour mobile */
@media (max-width: 575px) {
    .product-price-and-shipping .price {
        font-size: 1.4rem !important;
    }
}

/* ==============================================================
   9. CATALOGUE PRODUITS — IMAGES & ROLL-OVER
   ============================================================== */

/* Conteneur produit */
.product-thumbnail {
    position: relative;
    display: block;
    overflow: hidden;
}

/* Image par défaut (z-index 1) */
.default-image-tapitouf {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
}

/* Image de survol (invisible par défaut) */
.hover-image-tapitouf {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
    object-fit: cover;
}

/* Affichage de l'image de survol */
.product-thumbnail:hover .hover-image-tapitouf {
    opacity: 1 !important;
}

/* Images en liste plist-dsimple : pleine largeur */
.plist-dsimple .product-image-container img,
.plist-dsimple .thumbnail-container img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    vertical-align: bottom !important;
}

.plist-dsimple .left-block,
.plist-dsimple .product-image-container {
    width: 100% !important;
    max-width: none !important;
}

/* ==============================================================
   9B. Page Tapis tuftés
   ============================================================== */
/* On cible tous les paragraphes de la page 10, peu importe leur classe */
body#category.category-10 p, 
body#category.category-10 .category-description p,
body#category.category-10 div#category-description p {
    font-size: 1rem !important;
    font-size: 16px !important; /* Double sécurité pour les vieux navigateurs */
}
/* ==============================================================
   10. BOUTONS PRODUITS (PANIER, WISHLIST, QUICK-VIEW)
   ============================================================== */

/* Position et z-index pour rester cliquables par-dessus l'image de survol */
.leo-bt-cart,
.leo-wishlist-button,
.quick-view,
.btn-product {
    margin-top: -20px !important;
    z-index: 10 !important;
    position: relative !important;
}

/* Bouton principal .pro3-btn */
.pro3-btn {
    display: block !important;
    margin: -22px auto 0 !important;
    width: fit-content !important;
    text-align: center !important;
    bottom: 35px !important;
    position: relative;
    z-index: 10;
}

/* État par défaut : blanc */
.leo-bt-cart,
.leo-wishlist-button,
.quick-view {
    background-color: #FFFFFF !important;
    color: #000000 !important;
    transition: all 0.3s ease !important;
}

/* État au survol : gris foncé */
.leo-bt-cart:hover,
.leo-wishlist-button:hover,
.quick-view:hover {
    background-color: #999999 !important;
    color: #FFFFFF !important;
}

.leo-bt-cart:hover i,
.leo-wishlist-button:hover i,
.quick-view:hover i {
    color: #FFFFFF !important;
}

/* Boutons non survolés restent blancs même si le bloc produit est survolé */
.product-thumbnail:hover .pro3-btn:not(:hover) {
    background-color: #FFFFFF !important;
    color: #000000 !important;
}

/* État par défaut : blanc */
.leo-wishlist-button.added,
{
    background-color: #FF0000 !important;
    color: #FF0000 !important;
    transition: all 0.3s ease !important;
}

/* ==============================================================
   10B. PAGE PRODUITS
   ============================================================== */
/* ── Correction chevauchement boutons fiche produit ── */

/* Neutralise les marges négatives héritées du catalogue */
.page-product .product-add-to-cart .leo-wishlist-button,
.page-product .product-add-to-cart .leo-wishlist-product-button {
    margin-top: 8px !important;
    position:   relative !important;
    bottom:     auto !important;
}

/* Assure que le conteneur add-to-cart s'affiche en colonne */
.page-product .product-add-to-cart {
    display:        flex !important;
    flex-direction: column !important;
    align-items:    flex-start !important;
    gap:            10px;
}

/* Le bouton "Ajouter au panier" n'est pas décalé */
.page-product .product-add-to-cart .add-to-cart,
.page-product .product-add-to-cart button.add-to-cart {
    margin-top: 0 !important;
    position:   relative !important;
    bottom:     auto !important;
}

/* ==============================================================
   11. 12. SECTION APPAGEBUILDER — "C'EST QUOI TAPITOUF ?"
       #form_12174506160034778 | Image 4/12 + Texte 8/12
   ============================================================== */

/* ==============================================================
   APPAGEBUILDER — ROWS BICOLONNES RESPONSIVES
   Usage : ajouter la classe CSS dans le champ "Classe CSS
   personnalisée" de la Row dans ApPageBuilder.

   Classes disponibles :
     .ap-row-split        → mise en page générique image+texte
     .ap-col-image-first  → image à gauche  (4/12 + 8/12)
     .ap-col-text-first   → texte à gauche  (4/12 + 8/12)
     .ap-col-half         → deux colonnes   (6/12 + 6/12)
   ============================================================== */

/* --------------------------------------------------------------
   ROW DE BASE — commun à tous les layouts bicolonnes
   -------------------------------------------------------------- */
.ap-row-split.ApRow {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;         /* mobile : colonnes empilées */
    align-items: stretch !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
}

/* Desktop : une seule ligne */
@media (min-width: 992px) {
    .ap-row-split.ApRow {
        flex-wrap: nowrap !important;
    }
}

/* Mobile/tablette : toutes les colonnes en 12/12 */
@media (max-width: 991px) {
    .ap-row-split .ApColumn {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* Reset marges colonnes */
.ap-row-split .ApColumn {
    margin: 0 !important;
    padding: 0 !important;
}

/* --------------------------------------------------------------
   IMAGE DANS UNE COLONNE — couvre tout son espace
   S'applique à toute image dans une .ap-row-split
   -------------------------------------------------------------- */
.ap-row-split .ApColumn .block.ApImage,
.ap-row-split .ApColumn .block.ApImage img {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    display: block !important;
    object-fit: cover !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
}

/* --------------------------------------------------------------
   TEXTE DANS UNE COLONNE — styles communs
   -------------------------------------------------------------- */
.ap-row-split .white.ApRawHtml {
    display: block !important;
    text-align: left !important;
    color: #FFFFFF !important;
}

.ap-row-split .white.ApRawHtml p {
    display: block !important;
    margin-top: 15px !important;
	font-size: 24px;
	color: #FFFFFF !important;
}

/*.ap-row-split .white.ApRawHtml a {
	color: #FFFFFF !important;
/*	color: var(--primary-red) !important;*/
}*/

.ap-row-split .white.ApRawHtml b,
.ap-row-split .white.ApRawHtml strong {
    display: inline !important;
    white-space: normal !important;
    padding: 0 !important;
    margin: 0 !important;
	color: #FFFFFF !important;
}

.ap-row-split h4.title_block {
    color: #FFFFFF !important;
    font-family: var(--main-font) !important;
    font-weight: 200;
    text-align: left !important;
}

/* --------------------------------------------------------------
   VARIANTE : Image 4/12 — Texte 8/12  →  .ap-col-image-first
   -------------------------------------------------------------- */
@media (min-width: 992px) {
    .ap-col-image-first .col-xl-4,
    .ap-col-image-first .col-lg-12:first-child {
        flex: 0 0 33.33333% !important;
        max-width: 33.33333% !important;
        padding: 0 !important;          /* image sans marges */
    }
    .ap-col-image-first .col-xl-8,
    .ap-col-image-first .col-lg-12:last-child {
        flex: 0 0 66.66666% !important;
        max-width: 66.66666% !important;
    }
    .ap-col-image-first .col-xl-8 {
        padding: 40px 120px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }
}

/* --------------------------------------------------------------
   VARIANTE : Texte 4/12 — Image 8/12  →  .ap-col-text-first
   -------------------------------------------------------------- */
@media (min-width: 992px) {
    .ap-col-text-first .col-xl-4,
    .ap-col-text-first .col-lg-12:first-child {
        flex: 0 0 40% !important /* 33.33333% !important;*/
        max-width: 40% !important /* 33.33333% !important;*/
    }
    .ap-col-text-first .col-xl-8,
    .ap-col-text-first .col-lg-12:last-child {
        flex: 0 0 66.66666% !important;
        max-width: 66.66666% !important;
        padding: 0 !important;          /* image sans marges */
    }
    .ap-col-text-first .col-xl-4 {
        padding: 0 100px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }
}

/* --------------------------------------------------------------
   VARIANTE : 50/50  →  .ap-col-half
   -------------------------------------------------------------- */
@media (min-width: 992px) {
    .ap-col-half .col-xl-6,
    .ap-col-half .col-lg-12:first-child,
    .ap-col-half .col-lg-12:last-child {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
}

/* --------------------------------------------------------------
   SURCHARGES SPÉCIFIQUES PAR SECTION
   (couleur de fond, titre, padding particulier)
   -------------------------------------------------------------- */

/* "C'est quoi Tapitouf ?" */
#form_12174506160034778 h4.title_block {
    margin: 0 0 15px 0 !important;
}

/* "Cocorico" */
#form_17009290801380368 h4.title_block {
    margin: 0 0 40px 120px !important;
}
@media (max-width: 991px) {
    #form_17009290801380368 .white.ApRawHtml {
        padding: 0 20px !important;
    }
}

/* "Instagram" */ 
#form_4294307686869314 h4.title_block {
    margin: 0 0 15px 0 !important;
}

@media (max-width: 991px) {
    #form_8739724317876897 .col-xl-8 {
        padding-left: 5px !important;
        padding-right: 5px !important;
        padding-bottom: 5px !important;
    }
	#form_15309870389544468 .col-xl-8 {
        padding-left: 5px !important;
        padding-right: 5px !important;
        padding-bottom: 5px !important;
    }
	#form_2132852561775794 .col-xl-8 {
        padding-left: 5px !important;
        padding-right: 5px !important;
        padding-bottom: 5px !important;
    }
    #form_39359276244173305 .col-xl-4 {
        padding-left: 5px !important;
        padding-right: 5px !important;
        padding-bottom: 5px !important;
		padding-top: 5px !important;
    }
}

/* 1. Force le conteneur à prendre toute la hauteur de la cellule parente */
.video-wrapper-full {
    width: 100%;
    height: 100%;
    min-height: 100%;
    display: flex;
    position: relative;
    cursor: pointer;
}

/* 2. L'overlay qui contient l'image */
.video-click-overlay {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: stretch;
}

/* 3. L'IMAGE : La règle magique pour remplir la cellule */
.img-tuto-fill {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Rplit tout l'espace sans déformer */
    display: block !important;
}

/* 4. Le bouton Play centré */
.play-icon-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: rgba(255, 255, 255, 0.9);
    font-size: 70px;
    pointer-events: none;
    text-shadow: 0 0 15px rgba(0,0,0,0.3);
}

/* 5. On s'assure que les colonnes d'ApPageBuilder ne bloquent pas le remplissage */
.fill-cell .inner, 
.fill-cell .sd-video, 
.fill-cell .widget-video {
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}


/* ==============================================================
   13. BOUTONS BOX (APPAGEBUILDER)
   ============================================================== */

.box-btn,
.box-btn a,
.box-btn span {
    text-transform: none !important;
    letter-spacing: normal !important;
    margin-left: 0 !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    text-align: center !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
	font-size: 1.5rem !important;
	margin-bottom: 10px;
	white-space: nowrap;
}

.tp-caption a.btn,
.tp-caption a.btn:hover,
.tp-caption a.btn:focus {
    text-decoration: none !important;
}
.bannercontainer .tp-caption a.btn {
    text-decoration: none !important;
}

.box-btn a:hover,
.box-btn a:hover span {
    background-color: #000000 !important;
    color: #FFFFFF !important;
    border-color: #000000 !important;
}

.tp-caption.h1-style-4,
.tp-caption.data-link {
    border-bottom: none !important;
}

/* ==============================================================
   14. BLOG (LEOBLOG)
   ============================================================== */

/* Conteneur principal : image en fond, texte par-dessus */
.blog-container {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: auto !important;
    min-height: 500px !important;
    border-radius: 8px;
}

/* Image en arrière-plan absolu */
.blog-container .left-block {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.blog-container .blog-image-container,
.blog-container .blog_img_link,
.blog-container .img-fluid {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Encadré blanc par-dessus l'image */
.blog-container .right-block {
    position: relative;
    z-index: 2;
    background: rgba(255, 255, 255, 0.90) !important;
    width: 80% !important;
    height: auto !important;
    min-height: fit-content !important;
    aspect-ratio: auto !important;
    margin-bottom: 20px !important;
    padding: 20px !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

@media (max-width: 767px) {
    .blog-container .right-block {
        width: 90% !important;
        min-height: 250px;
    }
}

/* Titre du billet */
.blog-container .blog-title,
.blog-container .blog-title a {
    font-size: 1.1rem !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    display: block !important;
    max-height: none !important;
    line-height: 1 !important;
    margin-bottom: 2px !important;
}

/* Description du billet */
.blog-container .blog-desc {
    display: block !important;
    -webkit-line-clamp: initial !important;
    -webkit-box-orient: vertical !important;
    overflow: visible !important;
    max-height: none !important;
    white-space: normal !important;
    font-size: 1rem !important;
    line-height: 1 !important;
    margin: 5px 0 !important;
}

/* Masquer date, méta et lien "Read more" */
.blog-container .blog-date,
.blog-container .blog-meta,
.blog-container .link-readmore {
    display: none !important;
}
#blog-form_2291654920383408 .blog-container {
    margin-bottom: 5px !important;
}

/* ==============================================================
   14B. Comment ça marche: masquer titre pour le mettre sous l'image
   ============================================================== */
/* Page CMS "comment ça marche" — masque le h1 automatique */
/* Masque le h1 dans le header de page, sans toucher au contenu */
/* ne fontionne pas -> on garde le titre au dessus de l'image*/
/*body#cms-7 .page-header { 
    display: none !important;
}
*/

/* ==============================================================
   15. REMPLACEMENT ORANGE AT AUROS → ROUGE TAPITOUF
   ============================================================== */

/* Couleur principale du thème */
/*.btn-primary,
.btn-primary:focus {
    background-color: var(--primary-red) !important;
    border-color: var(--primary-red) !important;
}*/

.leo-cart-dropdown-action a.btn:hover,
.leo-cart-dropdown-action a.btn.cart-dropdow-checkout:hover,
.cart-content .btn:hover,
.cart-content-btn .btn-primary:hover,
.btn-outline:hover
 {
    background-color: #a01230 !important;
    border-color: #a01230 !important;
	color: #FFFFFF !important;
}

/* Badges et compteurs (ex: nombre d'articles dans le panier) */
.cart-products-count,
.badge-primary,
.tag-primary {
    background-color: var(--primary-red) !important;
	color: #fff; !important;
}

/* Pagination active */
.page-item.active .page-link {
    background-color: var(--primary-red) !important;
    border-color: var(--primary-red) !important;
}

/* Barre de progression / highlight */
.nav-pills .nav-link.active {
    background-color: var(--primary-red) !important;
}

/* Ligne décorative sous les titres */
.title_block::after {
    background-color: var(--primary-red) !important;
}

/* Éléments actifs du megamenu */
.leo-megamenu .navbar-nav > li.active > a,
.leo-megamenu .navbar-nav > li > a:hover {
    color: var(--primary-red) !important;
}

/* Ajout au panier et boutons d'action */
/*.leo-bt-cart:hover,
.btn-add-to-cart:hover {
    background-color: var(--primary-red) !important;
    border-color: var(--primary-red) !important;
}
*/

/* Étoiles de notation produit */
.star-content .star::before,
.grade-stars .star::before {
    color: var(--primary-red) !important;
}

/* Étiquettes "Nouveau", "Promo" */
/*.product-flag,
.discount-flag {
    background-color: var(--primary-red) !important;
}
*/

/* ==============================================================
   16. TOOLTIP — Mot "tufting" dans "C'est quoi Tapitouf ?"
   ============================================================== */

.tooltip-tapitouf {
    color: var(--primary-yellow) !important;
	font-weight: 700; /* Pour qu'il ressorte bien sur le fond blanc ou beige */
	position: relative;
    cursor: help;
    border-bottom: 1px dashed var(--primary-yellow); /* Soulignement discret pour signaler le tooltip */
}

/* La bulle */
.tooltip-tapitouf::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 130%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #A2ede9;
    color: #00705c;
    font-size: 1rem;
    line-height: 1.1;
    padding: 20px 28px;
    border-radius: 12px;
    width: 260px;
    text-align: left;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);

    /* Caché par défaut */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    pointer-events: none;
    z-index: 999;
}

/* La petite flèche en bas de la bulle */
.tooltip-tapitouf::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #FFFFFF;

    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 999;
}

/* Affichage au survol */
.tooltip-tapitouf:hover::after,
.tooltip-tapitouf:hover::before {
    opacity: 1;
    visibility: visible;
}

/* ==============================================================
   16B. Page Produit
   ============================================================== */

/* 1. Force le texte et la bordure gauche en noir */
.nav-tabs .nav-link.active.js-product-nav-active {
    color: #000000 !important;
    border-left: 6px solid #000000 !important; /* Bord gauche en noir */
    border-bottom: none !important; /* Nettoyage si une bordure basse existe */
}

/* 2. Neutralise l'élément orange (le ::after) */
.nav-tabs .nav-link.active.js-product-nav-active::after {
    background-color: #000000 !important; /* Le passe en noir */
    /* OU si vous voulez le supprimer complètement : */
    display: none !important;
}

/* 3. Nettoyage du survol pour éviter le retour de l'orange */
.nav-tabs .nav-link.js-product-nav-active:hover::after {
    background-color: #000000 !important;
}

/* Redimensionne le popup de zoom (Modal) */
.modal-dialog.js-modal-product-details {
    max-width: 80vh !important; /* Limite la largeur à 80% de la hauteur de l'écran */
    margin: 2rem auto !important;
}

.modal-content .modal-body .product-cover-modal {
    max-height: 70vh !important; /* Force l'image à ne pas dépasser 70% de la hauteur */
    width: auto !important;
    margin: 0 auto;
}

.modal-content .modal-body img {
    max-height: 70vh !important;
    width: auto !important;
    object-fit: contain; /* Garantit que l'image n'est pas déformée */
}

/* Popup de photos */
/* 1. Abaisser le popup de 50px */
/* On utilise margin-top pour ne pas casser le calcul "top" dynamique du script */
.fancybox-wrap {
    margin-top: 75px !important;
}

/* 2. Réduire la taille globale de 5% */
/* L'utilisation de scale est plus propre que de modifier width/height qui sont forcés par JS */
.fancybox-wrap {
    transform: scale(0.90);
    transform-origin: top center; /* Garde le popup centré horizontalement pendant la réduction */
}

/* 3. Sécurité pour le bouton fermer et les flèches */
/* Parfois le scale coupe les éléments qui dépassent, on s'assure qu'ils restent visibles */
.fancybox-skin {
    box-shadow: 0 10px 25px rgba(0,0,0,0.3) !important;
}

/* Ajustement pour les petits écrans (Tablettes/Mobiles) */
@media (max-height: 800px) {
    .fancybox-wrap {
        margin-top: 20px !important; /* Moins de décalage sur petit écran pour ne pas sortir en bas */
        transform: scale(0.90); /* On réduit un peu plus si l'écran est petit */
    }
}

.product-cover {
    cursor: zoom-in;
}



/* ==============================================================
   17. GDPR / KLARO
   ============================================================== */

.klaro .cookie-modal,
.klaro .cookie-notice {
    font-family: var(--main-font) !important;
    border-radius: 8px !important;
}

/* Bouton Accepter */
.klaro .cm-btn-success {
    background-color: var(--primary-red) !important;
    border: none !important;
}

/* Bouton Gérer / Refuser */
.klaro .cm-btn-info {
    background-color: var(--tufting-blue) !important;
}

/* ==============================================================
   18. Checkout
   ============================================================== */
body#checkout .custom-checkbox em {
    color: #aaa;
}

body#checkout section.checkout-step #customer-form .form-control-comment, body#checkout section.checkout-step #login-form .form-control-comment, body#checkout section.checkout-step #invoice-address .form-control-comment {
    color: #aaa;
}

#checkout #checkout-personal-information-step .nav .nav-item .nav-link.active {
    color: #282828;
}

/* ── Cadre autour du lien "Code de réduction" au checkout ── */
p.promo-code-button.display-promo {
    border:        1px solid var(--primary-red) !important;
    border-radius: 4px !important;
    padding:       10px 20px !important;
    margin-bottom: 20px !important;
	margin-left:   20px !important;
    display:       inline-block !important;
    background:    transparent;
}

/* Couleur du lien assortie au cadre */
p.promo-code-button.display-promo a.collapse-button {
    color:           var(--primary-red) !important;
    text-decoration: none !important;
}

/*#checkout #checkout-personal-information-step .nav .nav-item .nav-link,*/
body#checkout section.checkout-step #customer-form .form-control-comment, 
body#checkout section.checkout-step #login-form .form-control-comment, 
body#checkout section.checkout-step #invoice-address .form-control-comment, 
body#checkout .custom-checkbox em {
    color: #999 !important;
}

/* ==============================================================
   19. Ajustement de la modale Panier suite au Header Fixe
   ============================================================== */


/* On cible le conteneur de la modale pour le descendre */
#blockcart-modal {
    top: 180px !important; /* Ajuste la position de départ par rapport au haut de la page */
    z-index: 10001 !important; /* S'assure de passer AU-DESSUS du header fixe (qui est à 9999) */
}

/* Sur PC (Desktop), on peut aussi décaler la boîte blanche interne pour plus de précision */
@media (min-width: 992px) {
    #blockcart-modal .modal-dialog {
        margin-top: 150px !important; /* Espace supplémentaire entre le header et la fenêtre blanche */
    }
}

/* Sur Mobile, on réduit un peu le décalage pour ne pas manger l'écran */
@media (max-width: 991px) {
    #blockcart-modal {
        top: 80px !important; 
    }
}

/*
.cart-products-count, .badge-primary, .tag-primary {
    background-color: var(--primary-red) !important;
}*/

.modal.in .modal-dialog {
    transform: translate(0, 150px);
}

/* ==============================================================
   20. Nos engagements
   ============================================================== */

/* --- Formatage du texte FR (version optimisée mobile) --- */
.label-fr {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    
    /* Police et Style */
    font-family: 'Albert Sans', sans-serif !important;
    font-weight: 900 !important;
    font-stretch: extra-condensed; /* Rend les lettres plus "bloc" */
    font-size: 13px !important;    /* Taille fixe pour éviter les variations mobiles */
    color: #000 !important;
    
    /* Structure */
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    line-height: 1 !important;
    vertical-align: baseline;
    
    /* Isolation */
    margin-right: 2px;
    font-variant-emoji: text !important; /* Force le mode texte sur iOS/Android */
    -webkit-text-fill-color: #000;       /* Sécurité pour certains navigateurs mobiles */
}

/* ==============================================================
   21. Masque le bloc code promo sur les étapes 1 (Adresses) et 2 (Livraison)
   ============================================================== */

#checkout-addresses-step ~ .cart-grid-right .block-promo,
#checkout-delivery-step ~ .cart-grid-right .block-promo {
    display: none !important;
}

/* On ne l'affiche que lorsque l'étape de paiement est atteinte ou active */
.js-currepnt-step#checkout-payment-step ~ .cart-grid-right .block-promo {
    display: block !important;
}

/* Masque le bloc promo uniquement quand l'étape 1 est active */
#checkout #checkout-personal-information-step.-current ~ .cart-grid-right .promo-discounts {
    display: none !important;
}