/* header */
.sticky-menu .home17-style .white-bg-sticky{
        background-color: #546223;
}
.sticky-menu .home17-style .white-bg-sticky .su-menu-4 > nav > ul > li > a, .sticky-menu .home17-style .white-bg-sticky .lang_widgets button.btn{
    color:#fff;
}
.sticky-menu .home17-style .white-bg-sticky .headerh43-logo svg path, .sticky-menu .home17-style .white-bg-sticky .cart-search-btn svg path, .sticky-menu .home17-style .white-bg-sticky .signin-cart-btn svg path, .sticky-menu .home17-style .white-bg-sticky .clction-btn svg path, .sticky-menu .home17-style .white-bg-sticky .cart-filter-btn svg path, .sticky-menu .home17-style .white-bg-sticky .lang_widgets_main .icon svg path{
    fill:#fff;
}
/* SLIDER-HOME */
.su-banner-14-area.home43-style .title {
    color: var(--white-color);
    font-family: var(--tenor-font);
    font-weight: var(--font-weight-400);
    font-size: 60px;
    line-height: 50px;
    margin-bottom: 15px;
    max-width: 600px;
}

.su-banner-14-area.home43-style .content .text {
    color: var(--white-color);
    font-optical-sizing: auto;
    font-size: 17px;
    font-weight: 370;
    line-height: 24px;
    margin-bottom: 30px;
    max-width: 600px;
}

.minicart-16 .cart-main .cart-content .su-cart-prd .content .title {
    line-height: 16px;
    letter-spacing: 0.24px;
}

@media (max-width:768px){
    .filter-option-inner-inner{
        display:none;
    }
    .lang_widgets .bootstrap-select .btn-light{
        padding:0;
    }
}

.LogoRond {
    /* 1. Pour que le "faux rond" soit parfait, l'image DOIT être un carré */
    aspect-ratio: 1 / 1; /* Force un carré (parfait pour les cercles) */
    width: 80px; /* Exemple de taille, à ajuster */
    height: auto; /* Laisse le navigateur calculer la hauteur si aspect-ratio est supporté */

    /* Empêche le logo d'être déformé à l'intérieur du carré */
    object-fit: contain;

    /* 2. Crée l'espace blanc AUTOUR du logo */
    padding: 5px; /* L'espace entre le logo et le cercle blanc */
    box-sizing: border-box; /* Important pour que width inclus padding et border */

    /* 3. Crée le "Faux rond blanc" */
    background-color: #ffffff; /* Faux rond blanc */
    border-radius: 50%; /* Transforme le carré en cercle */

    /* 4. La bordure verte très très fine */
    border: 1px solid #60722F; /* Vert menthe très clair, très subtil */

    /* OU si vous préférez un vert-bleu subtil (type Tiffany de la ribbon) : */
    /* border: 1px solid rgba(130, 216, 208, 0.4); */

    /* 5. Centrage optionnel */
    display: block;
    margin: 0 auto; /* Pour le centrer si besoin dans la nav */
}



body .accordion-body p {
    color: var(--dark-color);
    font-family: var(--jakarta-font);
    font-size: 17px !important;
    line-height: 23px !important;
    text-transform: none !important;
    margin-bottom: 0;
    letter-spacing: 0.26px;
    padding-right: 20px;
}


.common-banner-page {
    background-position: center top;
    /*background-size: cover;*/
    background-repeat: no-repeat;
    height: 170px;
}



.common-banner-page {
    position: relative;
    width: 100%;
    height: 150px;/*  hauteur selon  besoins */
    overflow: hidden;

    /* Dégradé de base : Bleu Nuit vers Bleu Clair */
    /*background: linear-gradient(-45deg, #000c24, #002f6c, #4a90e2, #add8e6);*/
    background: linear-gradient(-45deg, #1f260c, #546223, #8ea63f, #d4e29c);
    background-size: 400% 400%;

    /* Animation du fond */
    animation: sky-gradient 15s ease infinite;
}

/* Le "calque nuageux" pour ajouter de la texture */
.common-banner-page::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    /* On crée des taches de lumière diffuses (effet brume/nuages) */
    background: radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);

    filter: blur(40px);
    animation: cloud-motion 20s linear infinite alternate;
}

/* Animation des couleurs du ciel */
@keyframes sky-gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Animation légère des "nuages" */
@keyframes cloud-motion {
    from {
        transform: scale(1) translate(0, 0);
    }
    to {
        transform: scale(1.2) translate(5%, 5%);
    }
}

/* Newsletter fond video */
/* Configuration de la section */
.su-cta-4-spacing.cta-style-15 {
    position: relative;
    overflow: hidden;
    background: #000; /* Fond de secours */
    height: 500px;
}

/* La vidéo */
.video-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 0;
    object-fit: cover;
    opacity: 0.8; /* Ici tu règles l'opacité globale de la vidéo (0.4 = 40%) */
}

/* L'effet de flou dégradé (Gradient Blur) */
.video-overlay-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;

    /* 1. On crée un dégradé de couleur pour la lisibilité du texte */
    background: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 100%);

    /* 2. L'astuce pour le flou dégradé :
       On applique un flou qui est masqué par un dégradé */
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);

    /* On utilise un masque pour que le flou ne soit présent qu'en haut ou sur les bords */
    mask-image: linear-gradient(to bottom, black 0%, transparent 70%);
    -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 80%);
}




/* Bandeaub réassurance */
.su-brands-7-spacing {
    background-color: #546223;
    padding: 20px 0;
}

.heroh43-title{
    font-family: var(--marcellus-font) !important;;
    font-weight: 900;
}

    /* Texte (défuat) */
.text {
    font-size: 16px !important;
    line-height: 20px !important;
    text-transform: none !important;
}

.text-small{
    font-size:14px;
    line-height: 17px !important;
    text-transform: none !important;
}


.title {
    font-family: var(--marcellus-font) !important;;
    font-weight: 400;

}
.title-menu{
    font-weight: 800 !important;;
    font-size: 20px !important;
    line-height: 21px !important;
    text-transform: uppercase;

}

.question{
    font-size: 22px !important;
    line-height: 26px !important;
}

h1{
    font-size: 60px !important;
    line-height: 50px !important;
}
h2{
    font-size: 50px !important;
    line-height: 40px !important;
}
h3{
    font-size: 40px !important;
    line-height: 36px !important;
    text-transform: none !important;;
}
h4{
    font-size: 35px !important;
    line-height: 30px !important;
}
h4{
    font-size: 30px !important;
    line-height: 28px !important;
}


/* PRODUITS */
.su-product-4-card .product-title a {
    font-size:17px !important;

}



footer a{
    text-decoration:underline;
}

@media (max-width: 767px) {
  .su-header-16-middle .cart-btn > nav > ul {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-end;
    gap: 12px;
  }

  .su-header-16-middle .cart-btn > nav > ul > li {
    flex: 0 0 calc(50% - 6px);
    max-width: calc(50% - 6px);
    display: flex;
    justify-content: center;
    margin-left: 0;
  }
    .su-header-16-middle .cart-btn {
    max-width: 90px;
    margin-left: auto;
  }
  .su-header-16-middle .minicart-btn-wrap .cart-btn{
    max-width:100%;
  }
}
.page-header,.page-footer{
    padding-top:1rem;
    padding-bottom:1rem;
    text-align: center;
}

.btn-primary,.btn-primary:hover{
        border: 1px solid var(--theme-color10);
        background: var(--white-color);
    padding: 20px 36px;
    font-weight: var(--font-weight-600);
    font-size: 13px;
    line-height: 1;
    letter-spacing: 0.02em;
    color: var(--dark-color);
    display: inline-block;
    -webkit-transition: all 0.4s ease-out 0s;
    transition: all 0.4s ease-out 0s;
}



.shop-right-content .tabs{
    padding:0;
    margin-top:0.5rem;
}
.shop-right-content .btn-primary{
    padding:10px;
}

.color-item .form-check-input {
  display: none;
}

.color-item label {
  cursor: pointer;
  margin: 0;
}

.color-swatch {
  display: block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid #ccc;
}

.color-item .form-check-input:checked + label .color-swatch {
  outline: 2px solid #000;
  outline-offset: 3px;
}
.page-customer-account #content,.page-order-detail #content,.page-order #content,.page-cart #main{
    max-width:1200px;
    margin-left:auto;
    margin-right:auto;
}
.page-customer-account #content .form-group{
    margin-bottom:10px;
}
.page-customer-account #content .float-xs-right{
    float:right;
}
.page-footer .account-link{
    text-decoration: none;
}

.product-line-grid{
    display:flex;
    align-items:center;
}
.page-cart .input-group .input-group-btn>.btn{
    color:#000;
}
.promo-code .btn{
    padding: 11.5px var(--bs-btn-padding-x) !important;
} 


.page-order .float-xs-left{
    float:left;
}

.checkout-step .payment-options .payment-option {
    margin-bottom: .5rem;
    display: flex;
    align-items: center;
}

.btn.disabled, .btn:disabled, fieldset:disabled .btn {
    border-color: #000 !important;
}
#index .page-footer{
    padding:0;
}