/* 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;
}
.su-banner-14-area.home43-style .content .text *{
    color: var(--white-color);
}
.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,.text p {
    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;
}
.sizes-list .size-item{
    margin-right:0.75rem;
}

/* Tabs invité / connexion */
#checkout-personal-information-step {

  .nav.nav-inline {
    margin: 20px 0 35px;

    .nav-item {
      display: inline-block;
      vertical-align: middle;
    }

    .nav-link {
      position: relative;
      display: inline-block;
      padding: 8px 12px;
      font-weight: 500;
      color: #111;
      text-decoration: none;
      transition: opacity .2s ease;

      &:hover {
        opacity: .65;
      }

      &.active {
        font-weight: 600;

        &:after {
          content: "";
          position: absolute;
          left: 12px;
          right: 12px;
          bottom: 0;
          height: 1px;
          background: #111;
        }
      }
    }

    .nav-separator {
      display: inline-block;
      margin: 0 4px;
      color: #999;
    }
  }


  /* Espacement des champs */
  .form-group {
    margin-bottom: 18px;
  }

  .form-control-comment {
    margin-top: 5px;
  }

  /* Textes d'aide sous les inputs */
  .js-input-column > .form-control-comment {
    display: block;
    margin-top: 6px;
    line-height: 1.4;
  }

  /* Bloc création de compte */
  .form-informations {
    margin: 5px 0 22px;
  }

  /* Checkboxes */
  .custom-checkbox {
    display: block;
    margin-bottom: 8px;
  }
}

/* PAGE ADRESSES */
#addresses {

  .page-header {
    text-align: center;
    margin-bottom: 55px;

    h1 {
      font-size: 52px;
      line-height: 1.1;
      font-weight: 500;
    }
  }

  /* Grille */
  .page-content > .row {
    row-gap: 45px;
  }

  /* Carte adresse */
  .address {
    height: 100%;
    min-height: 250px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .address-body {
    padding: 0 15px 30px;

    h4 {
      font-size: 24px;
      font-weight: 600;
      margin: 0 0 8px;
    }

    address {
      margin: 0;
      font-style: normal;
      line-height: 1.7;
      font-size: 15px;
    }
  }

  /* Actions */
  .address-footer {
    border-top: 1px solid #222;
    padding: 14px 15px 0;
    display: flex;
    gap: 18px;

    a {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      color: #111;
      font-size: 14px;
      text-decoration: none;

      &:hover {
        opacity: .6;
      }
    }

    .material-icons {
      font-size: 15px;
    }
  }

  /* Ajouter une adresse */
  .addresses-footer {
    margin-top: 45px;

    a {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 15px;
      color: #111;
      text-decoration: none;
    }
  }

  /* Retour compte / accueil */
  .page-footer {
    margin-top: 65px;
    display: flex;
    justify-content: center;
    gap: 25px;

    .account-link {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      color: #111;
    }
  }
}
#cms #main .title{
    margin-bottom:25px;
}
#cms #main p{
    font-size:16px;
    line-height:20px;
    margin-bottom:1rem;
}

#cms #main h2, #cms #main h3, #cms #main h4, #cms #main h5, #cms #main h6 {
    margin-top: 0;
    margin-bottom: .5rem;
}    

.product-actions .add-to-cart{
    display:flex;
    align-items: center;
    justify-content: center;
    padding:0;
    height:53px;
}