/*
Theme Name: Dermokolor
Theme URI: https://dermocolor-reunion.com
Description: Child theme Divi 5 pour Dermokolor Réunion
Author: LibertyProd
Author URI: https://libertyprod.fr
Template: Divi
Version: 1.0.0
Text Domain: dermokolor
*/

:root {
  /* Brand */
  --dk-primary: #1f1f1f;      /* validée client */
  --dk-secondary: #2f2f2f;
  --dk-accent: #6fb18a;       /* validée client */

  /* Neutrals */
  --dk-text: #1a1a1a;
  --dk-text-light: #ffffff;
  --dk-bg-light: #f7f7f7;
  --dk-bg-dark: #121212;

  /* UI */
  --dk-border: #e0e0e0;
  --dk-shadow: rgba(0,0,0,0.08);
}
#main-header {
  padding: 10px 0;
}

#logo {
  max-height: 60px;
}


/* Bouton primaire */
body .et_pb_button {
  background-color: var(--dk-accent) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 14px;
  transition: background-color 0.3s ease !important;
}

/* Hover propre */
body .et_pb_button:hover {
  background-color: #5a9c76 !important;
}

/* Supprime définitivement l'icône Divi */
.et_pb_button:after {
  display: none !important;
  content: none !important;
}

.dk-hero {
  position: relative;
  min-height: 80vh;
 
}
.dk-cards-row {
  flex-wrap: wrap;
  justify-content: center;
}

.dk-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.65),
    rgba(0,0,0,0.55)
  );
}

/* Cartes carrées Hero */
.dk-card {
  aspect-ratio: 1 / 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 22px;
  overflow: hidden;
  text-align: center;
}

/* Overlay sombre */
.dk-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
  transition: background 0.4s ease;
  z-index: 1;
}

/* Contenu au-dessus de l’overlay */
.dk-card .et_pb_module {
  position: relative;
  z-index: 2;
}

.dk-card:hover {
  transform: scale(1.02);
  box-shadow: 0 20px 40px rgba(0,0,0,0.35);
}

.dk-card:hover::before {
  background: rgba(0,0,0,0.55);
}

/* Décalage subtil du titre dans les cartes */
.dk-card .et_pb_module {
  transform: translateY(-12%);
}

@media (max-width: 600px) {
  .dk-card .et_pb_module {
    transform: translateY(-8%);
  }
}

/* Empilé sous 450px */
@media (max-width: 450px) {
  .dk-cards-row .et_pb_column {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
}

/* Desktop limitation largeur */
@media (min-width: 981px) {
  .dk-card {
    max-width: 420px;
    margin: 0 auto;
  }
}

.dk-cards-row {
  margin-left: auto;
  margin-right: auto;
}

/* === Pastilles Univers Premium FIX === */

.dk-universe {
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.15);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

/* Image */
.dk-universe img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: relative;
  z-index: 2;
}

/* Overlay sombre */
.dk-universe::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at center,
    rgba(0,0,0,0.15) 40%,
    rgba(0,0,0,0.55) 100%
  );
  z-index: 3;
}

/* Halo vert */
.dk-universe::after {
  content: "";
  position: absolute;
  bottom: -20%;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  height: 60%;
  background: radial-gradient(
    circle,
    rgba(111,177,138,0.55) 0%,
    rgba(111,177,138,0.25) 40%,
    rgba(111,177,138,0) 70%
  );
  filter: blur(30px);
  z-index: 1;
}

@media (max-width: 767px) {
  .dk-universe::after {
    bottom: -10%;
    height: 50%;
  }
}

@media (max-width: 450px) {
  .dk-universe::after {
    bottom: -5%;
    height: 40%;
  }
}

/* Hover */
.dk-universe:hover {
  transform: scale(1.07);
  box-shadow: 0 10px 40px rgba(111,177,138,0.25);
}



.dk-universe-title {
  margin-top: 14px;
  text-align: center;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: #ffffff;
  transition: color 0.3s ease;
}

.dk-universe:hover + .dk-universe-title {
  color: var(--dk-accent);
}

.dk-hero > .et_pb_row {
  position: relative;
  z-index: 2;
}

/* ===== UNIVERS RESPONSIVE PROPRE ===== */

@media (max-width: 450px) {
  .dk-universe-row .et_pb_column {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
}

/* Neutralise le stacking Divi à 767px pour la row univers */
@media (max-width: 767px) and (min-width: 451px) {

  .dk-universe-row.et_pb_row > .et_pb_column {
    width: 49% !important;
    max-width: 49% !important;
    flex: 0 0 49% !important;
  }
}


/* ============================= */
/* HEADER PAGES INTERNES */
/* ============================= */

.dk-header-internal {
  background: #ffffff;
  border-bottom: 4px solid var(--dk-accent);
  box-shadow: 0 6px 20px rgba(0,0,0,0.06);
  transition: all 0.3s ease;
}

/* Menu */
.dk-header-internal .et_pb_menu__menu > nav > ul > li > a {
  color: var(--dk-primary) !important;
}

.dk-header-internal .et_pb_menu__menu > nav > ul > li > a:hover {
  color: var(--dk-accent) !important;
}

/* Burger */
.dk-header-internal .et_pb_menu__icon {
  color: var(--dk-primary) !important;
}


/* Footer: supprimer les marges Divi parasites et contrôler l'espacement */
.dk-footer .et_pb_module {
  margin-bottom: 0 !important;
}

.dk-footer .et_pb_text p {
  margin-bottom: 0 !important;
  line-height: 1.1 !important;
}

/* Réseaux sociaux : éviter la hauteur “fantôme” */
.dk-footer .et_pb_social_media_follow,
.dk-footer .et_pb_social_media_follow li,
.dk-footer .et_pb_social_media_follow a {
  line-height: 1 !important;
}/* Footer: supprimer les marges Divi parasites et contrôler l'espacement */
.dk-footer .et_pb_module {
  margin-bottom: 0 !important;
}

.dk-footer .et_pb_text p {
  margin-bottom: 0 !important;
  line-height: 1.1 !important;
}

/* Réseaux sociaux : éviter la hauteur “fantôme” */
.dk-footer .et_pb_social_media_follow,
.dk-footer .et_pb_social_media_follow li,
.dk-footer .et_pb_social_media_follow a {
  line-height: 1 !important;
}

/* Petit espace propre (si tu veux un mini gap contrôlé) */
.dk-footer .et_pb_text + .et_pb_social_media_follow {
  margin-top: 10px !important;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: 12px;
}

.footer-links a {
  color: rgba(255,255,255,0.8);
  text-decoration: none;
  transition: opacity .3s ease;
}

.footer-links a:hover {
  opacity: .6;
}

@media (max-width: 980px) {

  .dk-mobile-menu .mobile_nav {
    text-align: left !important;
    float: none !important;
  }
}

@media (max-width: 767px) {

  .et_pb_menu_2_tb_header.et_pb_menu  {
    margin-left: 0 !important;
    margin-right: auto !important;
  }

}

@media (max-width: 980px) {

  .et_pb_menu_2_tb_header {
    margin-left: 0 !important;
  }

  .dk-mobile-menu .et_mobile_menu {
    left: 0 !important;
    margin-left: calc(50% - 50vw) !important;
  }

}

@media (max-width: 980px) {
  .dk-mobile-menu .et_mobile_menu {
    top: 100% !important;
    left: 0 !important;
    width: auto !important;   /* important */
    padding: 20px !important;
  }

}

@media (max-width: 980px) {

  .et_pb_menu .et_mobile_menu {
    width: auto !important;
      padding: 20px !important;
  }

}



@media (max-width: 980px) {
  body .dk-acceuil .et_mobile_menu {
    width: 100% !important;   /* important */
    
  }

}

/* Neutralise tous les effets hover Woo produits */
.woocommerce ul.products li.product img,
.woocommerce div.product div.images img {
  transition: none !important;
  transform: none !important;
}

.woocommerce ul.products li.product a:hover img,
.woocommerce div.product div.images a:hover img {
  transform: none !important;
  opacity: 1 !important;
}


/* Animation pages categories Woo */
.card-hover{
  position:relative;
  overflow:hidden;
  border-radius:18px;
  background:#000;
  color:#fff;
}

.card-hover img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .6s ease, opacity .6s ease;
}

/* overlay visible par défaut */
.card-content{
  position:absolute;
  inset:0;
  padding:24px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  background:linear-gradient(to top, rgba(0,0,0,.65), rgba(0,0,0,0));
}

.card-cat{
  background:#fff;
  color:#000;
  padding:4px 10px;
  font-size:.8rem;
  font-weight:600;
  width:fit-content;
  margin-bottom:8px;
}

.card-content h2{
  margin:0;
  font-weight:400;
  letter-spacing:.04em;
  color:darkseagreen;
}

/* description cachée uniquement */
.card-desc{
  opacity:0;
  transform:translateY(10px);
  transition:opacity .4s ease, transform .4s ease;
  font-size:.85rem;
  margin-top:6px;
}

/* hover */
.card-hover:hover img{
  transform:scale(1.05);
  opacity:.4;
}

.card-hover:hover .card-desc{
  opacity:1;
  transform:translateY(0);
}
/* Fin animation */


/* ============================= */
/* AFFICHAGE EN LIGNE ACPTES PAGE PRODUIT */
/* ============================= */
.awcdp-deposits-wrapper .awcdp-deposits-option {
  width: 100%;
  display: flex;
}