/* =========================================================
   L'ATELIER DE VICKEN — PERSONNALISATION DU THÈME CLASSIC
   ========================================================= */

/* Police du titre des fiches produits */
@import url('https://fonts.googleapis.com/css2?family=Birthstone&display=swap');

:root {
  --vicken-blue: #234b69;
  --vicken-blue-hover: #2f6f91;
}


/* =========================================================
   1. TITRE DE LA FICHE PRODUIT
   ========================================================= */

.product-container h1 {
  font-family: 'Birthstone', cursive !important;
  font-size: 3.5rem !important;
  font-weight: 400 !important;
  color: var(--vicken-blue) !important;
  text-transform: none !important;
  line-height: 1.05;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
}


/* =========================================================
   2. PRIX PLUS GRAND + BLEU DU LOGO
   ========================================================= */

.product-prices {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 1rem;
}

.product-price,
.current-price,
.current-price-value {
  color: var(--vicken-blue) !important;
  font-size: 1.45rem !important;
  font-weight: 700 !important;
}

/* Affichage du TTC à côté du prix */
.product-prices .tax-shipping-delivery-label {
  display: inline-block !important;
  margin: 0 !important;
  color: #777 !important;
  font-size: 0.8rem !important;
  font-weight: 400 !important;
}


/* =========================================================
   3. BOUTONS PRINCIPAUX EN BLEU DU LOGO
   ========================================================= */

.btn-primary,
.product-actions .add-to-cart,
.cart-summary-line .btn-primary,
.checkout .btn-primary {
  background-color: var(--vicken-blue) !important;
  border-color: var(--vicken-blue) !important;
  color: #fff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.product-actions .add-to-cart:hover,
.product-actions .add-to-cart:focus {
  background-color: var(--vicken-blue-hover) !important;
  border-color: var(--vicken-blue-hover) !important;
}


/* Panier dans l'en-tête */
#header .header-nav .cart-preview.active {
  background-color: var(--vicken-blue) !important;
}

#header .header-nav .cart-preview.active a,
#header .header-nav .cart-preview.active i {
  color: #fff !important;
}


/* =========================================================
   4. LIENS ET ACCENTS BLEUS DU THÈME
   ========================================================= */

a:hover,
a:focus {
  color: var(--vicken-blue) !important;
}

.tabs .nav-tabs .nav-link.active,
.tabs .nav-tabs .nav-link:hover {
  color: var(--vicken-blue) !important;
  border-bottom-color: var(--vicken-blue) !important;
}

.product-images > li.thumb-container > .thumb.selected,
.product-images > li.thumb-container > .thumb:hover {
  border-color: var(--vicken-blue) !important;
}

.product-flags li.product-flag {
  background-color: var(--vicken-blue) !important;
}


/* =========================================================
   5. MENU PRINCIPAL
   ========================================================= */

#header .header-top a[data-depth="0"] {
  color: var(--vicken-blue) !important;
}

#header .top-menu a[data-depth="0"]:hover {
  color: var(--vicken-blue) !important;
  border-bottom: 0.13rem solid var(--vicken-blue);
}


/* =========================================================
   6. DESCRIPTION ET DÉTAILS SUR TOUTE LA LARGEUR
   Version ordinateur uniquement
   ========================================================= */

   @media (min-width: 768px) {

    .product-container .product-information > .tabs {
      position: relative;
      width: calc(200% + 30px);
      max-width: none;
      margin-left: calc(-100% - 30px);
      margin-top: 3rem;
    }
  
  }

/* 4. Espace avant le bloc « Vous aimerez aussi » */
.product-accessories {
    clear: both;
    margin-top: 4rem !important;
  }


  
  /* =========================================================
     RÉSEAUX SOCIAUX VISIBLES
     ========================================================= */
  
  .block-social ul li {
    background-color: #234b69 !important;
    opacity: 1 !important;
    border-radius: 4px;
  }
  
  .block-social ul li a {
    opacity: 1 !important;
  }
  
  .block-social ul li:hover {
    background-color: #2f6f91 !important;
    opacity: 1 !important;
  }

  /* =========================================================
   FOOTER : 4 COLONNES BIEN RÉPARTIES SUR TOUTE LA LARGEUR
   Produits | Notre société | Informations | Votre compte
   ========================================================= */

@media (min-width: 768px) {

    /* Conteneur principal des colonnes */
    #footer .footer-container .container > .row {
      display: flex !important;
      align-items: flex-start !important;
      justify-content: space-between !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
    }
  
    /* Zone contenant les 3 blocs de Liste de liens */
    #footer .footer-container .container > .row > .links.col-md-6 {
      flex: 0 0 72% !important;
      width: 72% !important;
      max-width: 72% !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
    }
  
    /* Ligne interne des trois premiers blocs */
    #footer .footer-container .links.col-md-6 > .row {
      display: flex !important;
      flex-wrap: nowrap !important;
      justify-content: space-between !important;
      width: 100% !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
    }
  
    /* Produits, Notre société et Informations */
    #footer .footer-container .links.col-md-6 > .row > .wrapper {
      flex: 0 0 29% !important;
      width: 29% !important;
      max-width: 29% !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
    }
  
    /* Votre compte */
    #footer .footer-container .container > .row > #block_myaccount_infos {
      flex: 0 0 24% !important;
      width: 24% !important;
      max-width: 24% !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
    }
  }


/* =========================================================
   SOUS-CATÉGORIES
   ========================================================= */

/* Noms des sous-catégories en bleu du logo, sans majuscules forcées */
#subcategories ul li .subcategory-name {
    color: #234b69 !important;
    text-transform: none !important;
    font-weight: 600;
  }
  
  /* Couleur au survol */
  #subcategories ul li .subcategory-name:hover {
    color: #2f6f91 !important;
  }
  
  
 /* =========================================================
   MODULE CONSULTÉS RÉCEMMENT
   ========================================================= */

/* Cache le titre d'origine */
.featured-products > h2 {
    display: none;
}

/* Affiche le nouveau titre avec le même style */
#product .product-accessories + .featured-products::before {
    content: "CONSULTÉS RÉCEMMENT";
    display: block;
  
    margin: 0 0 0.75rem 0 !important;
  
    font-family: inherit !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
  
    color: #232323 !important;
    text-transform: uppercase !important;
    text-align: left !important;
  }

/* Même alignement que "Vous aimerez aussi" */
/* Reproduit le comportement de la classe Bootstrap .row */
#product .product-accessories + .featured-products > .products {
    display: flex !important;
    flex-wrap: wrap !important;
  
    margin-left: -15px !important;
    margin-right: -15px !important;
  }
  
  /* Conserve les mêmes espacements autour de chaque carte */
  #product .product-accessories + .featured-products > .products > .js-product {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  
  /* Même largeur d’image que dans « Vous aimerez aussi » */
  #product .product-accessories + .featured-products .product-miniature img {
    display: block;
    width: 100% !important;
    max-width: 250px !important;
    height: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

/* =========================================================
   ALERTE RETOUR EN STOCK
   Centrage du bouton sur toute la largeur
   ========================================================= */
/*
   #product .js-mailalert {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
}

#product .js-mailalert .js-mailalert-add {
    display: inline-block !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 1rem auto !important;
}


#product .js-mailalert{
    margin-top: .5rem !important;
    padding-top: 0 !important;
}

#product .js-mailalert-add{
    margin-top: 0 !important;
}
*/

/* =========================================================
   ALERTE RETOUR EN STOCK - MOBILE UNIQUEMENT
   Corrige uniquement le bouton
   ========================================================= */

   @media (max-width: 767px) {

    #product .js-mailalert .js-mailalert-add {
      display: block !important;
      width: 100% !important;
      max-width: 100% !important;
      min-width: 0 !important;
      box-sizing: border-box !important;
  
      white-space: normal !important;
      overflow-wrap: break-word !important;
      word-break: normal !important;
  
      text-align: center !important;
    }
  
  }

/* =========================================================
   IMAGES DES SOUS-CATÉGORIES
   Carré fixe + image qui remplit sans déformation
   ========================================================= */

   #subcategories .subcategory-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

#subcategories .subcategory-image a {
    display: block;
    width: 100%;
    height: 100%;
}

#subcategories .subcategory-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
}