/* Univers Barbie — finitions éditoriales, produits réels et bord de page. */

/* Les balises de ressources sont entourées par WordPress d'un <p> avec un <br>.
   Le conteneur complet doit disparaître pour ne créer aucune ligne avant le footer. */
.post-28428 .entry-content > p:has(> link[href*="/home-ecom/univers-barbie.com/assets/css/"]),
.post-28428 .entry-content > p:has(> script[src*="/home-ecom/univers-barbie.com/assets/js/"]) {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.ub-home .section {
  scroll-margin-top: var(--ub-sticky-header-height, 61px);
}

/* Hero : la muse détourée remplace le faux miroir ovale. */
.ub-home .hero-visuel {
  height: 100%;
  min-height: 0;
  display: flex !important;
  align-items: center;
  justify-content: center;
}

.ub-home .hero-miroir {
  width: 100% !important;
  height: 100% !important;
  max-width: 520px !important;
  aspect-ratio: auto !important;
  margin: 0 auto !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  align-items: center !important;
}

.ub-home .hero-muse {
  width: auto !important;
  height: 90% !important;
  max-width: 100% !important;
  max-height: 90% !important;
  object-fit: contain !important;
  transform: none !important;
  filter: drop-shadow(0 20px 22px rgba(74, 20, 61, .2));
}

.ub-home a,
.ub-home a:hover,
.ub-home a:focus,
.ub-home a:focus-visible,
.ub-home a:visited,
.ub-home button,
.ub-home button:hover,
.ub-home button:focus,
.ub-home button:focus-visible {
  text-decoration: none !important;
  text-decoration-line: none !important;
}

/* Les éléments du jeu sont des inspirations visuelles, pas des fiches article. */
.ub-home .dressing .choix-prix,
.ub-home .dressing .dressing-total {
  display: none !important;
}

/* Produits WooCommerce réellement publiés. */
.ub-home .look-pieces {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .55rem;
  margin-bottom: .7rem;
}

.ub-home .piece-selection {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .42rem .55rem;
  background: var(--blush);
  border: 1px solid rgba(236, 0, 140, .12);
  border-radius: 12px;
  text-align: left;
}

.ub-home .piece-selection img {
  width: clamp(36px, 4.5vw, 54px);
  height: clamp(36px, 4.5vw, 54px);
  flex: 0 0 auto;
  object-fit: contain;
}

.ub-home .piece-selection-nom {
  min-width: 0;
  font-size: clamp(.7rem, 1vw, .82rem);
  font-weight: 850;
  line-height: 1.15;
}

.ub-home .look-products {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(.45rem, 1vw, .75rem);
  margin-bottom: .75rem;
}

.ub-home .piece-produit {
  min-width: 0;
  padding: 0;
  overflow: hidden;
  background: #fff7fb;
  border: 1px solid rgba(236, 0, 140, .14);
}

.ub-home .piece-produit > a {
  height: 100%;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto auto auto;
  gap: .35rem;
  padding: .65rem;
  color: var(--prune);
  text-decoration: none !important;
}

.ub-home .piece-correspondance {
  color: var(--rose);
  font-size: .7rem;
  font-weight: 900;
}

.ub-home .piece-produit-image {
  min-height: 0;
  overflow: hidden;
  border-radius: 11px;
  background: #fff;
}

.ub-home .piece-produit-image img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
}

.ub-home .piece-produit .piece-nom {
  min-height: 2.5em;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.25;
}

.ub-home .piece-action {
  color: var(--rose);
  font-size: .78rem;
  font-weight: 900;
}

/* Le grand portant retrouve de vrais cintres, sans ancien SVG. */
.ub-home .portants .rail-barre {
  display: block !important;
  top: clamp(1.35rem, 2.8svh, 1.8rem);
  height: 9px;
  background: linear-gradient(180deg, #ffe0e7 0%, #c87888 42%, #8c4e5f 55%, #f4b9c5 100%);
  border: 1px solid rgba(115, 47, 72, .24);
  box-shadow: 0 5px 12px rgba(74, 20, 61, .18);
}

.ub-home .cintre-crochet {
  display: block !important;
  width: calc(100% - 12px);
  height: 94px;
  top: -78px;
  left: 6px;
  z-index: 0;
  transform: none;
  border: 0;
  border-radius: 0;
  background: url("../img/editorial-20260724/portant-cintre-final.webp") center / contain no-repeat;
  pointer-events: none;
}

.ub-home .portants .rail {
  padding: clamp(5rem, 10svh, 5.8rem) max(1.25rem, calc((100vw - 1180px) / 2)) clamp(.7rem, 1.6svh, 1rem);
}

.ub-home .cintre-carte {
  width: 210px;
  margin-top: 0;
  padding: .65rem .65rem .85rem;
  gap: .35rem;
  background: #fff7fb;
  border: 1px solid rgba(236, 0, 140, .14);
  box-shadow: 0 12px 32px rgba(91, 35, 75, .1);
  text-decoration: none !important;
}

.ub-home .cintre-visuel,
.ub-home .cintre-photo {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1;
  object-fit: cover !important;
  border-radius: 12px;
}

@media (min-width: 1024px) {
  .ub-home .hero-muse {
    height: 90cqh !important;
    max-height: 90cqh !important;
  }

  .ub-home .portants .rail-liste {
    width: min(1180px, 100%);
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(.65rem, 1vw, 1.1rem);
  }

  .ub-home .cintre-carte {
    width: 100%;
  }

  .ub-home .piece-produit-image {
    height: clamp(72px, 12svh, 112px);
  }
}

@media (max-width: 1023px) {
  .ub-home .hero-visuel {
    height: min(70svh, 620px);
  }

  .ub-home .hero-muse {
    height: 90% !important;
  }

  .ub-home .look-pieces,
  .ub-home .look-products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ub-home .cintre-carte {
    width: min(78vw, 280px);
  }

  .ub-home .piece-produit-image {
    height: 170px;
  }
}

/* Carte d'accès : nouvelle muse à l'échelle de la section et contraste renforcé. */
.ub-home .carte-dressing {
  container-type: size;
}

.ub-home .carte-dressing > .conteneur {
  width: min(calc(100% - 2rem), 1180px);
  max-width: 1180px;
}

.ub-home .carte-dressing .carte-membre #titre-promo {
  color: #fff !important;
  font-size: clamp(2rem, 3.2vw, 3.25rem);
  line-height: 1.02;
  text-wrap: balance;
  text-shadow: 0 3px 18px rgba(0, 0, 0, .22);
}

.ub-home .carte-dressing .carte-membre > p:not(.promo-statut) {
  margin-left: 0;
  margin-right: 0;
}

.ub-home .promo-dressing-muse {
  display: block;
  object-fit: contain;
  object-position: left bottom;
  pointer-events: none;
  user-select: none;
}

@media (min-width: 1024px) {
  .ub-home .carte-dressing > .conteneur {
    min-height: 92%;
    height: 92%;
  }

  .ub-home .carte-dressing .carte-membre {
    min-height: 100%;
    height: 100%;
    align-items: flex-start;
    padding: clamp(2rem, 5svh, 3.5rem) clamp(2rem, 4vw, 4rem);
    padding-left: clamp(455px, 43vw, 570px);
    text-align: left;
  }

  .ub-home .promo-dressing-muse {
    position: absolute;
    z-index: 1;
    left: clamp(.25rem, 1.6vw, 1.5rem);
    bottom: 0;
    width: auto;
    max-width: 46%;
    height: 90cqh;
  }

  .ub-home .carte-dressing .carte-membre > :not(.promo-dressing-muse, .carte-etoile) {
    position: relative;
    z-index: 2;
  }

  .ub-home .carte-dressing .promo-ligne {
    justify-content: flex-start;
  }
}

@media (max-width: 1023px) {
  .ub-home .carte-dressing {
    container-type: inline-size;
  }

  .ub-home .carte-dressing > .conteneur {
    width: min(calc(100% - 1.25rem), 720px);
  }

  .ub-home .carte-dressing .carte-membre {
    min-height: auto;
    height: auto;
    padding: 1rem clamp(1rem, 4vw, 1.5rem) 1.75rem;
  }

  .ub-home .promo-dressing-muse {
    position: relative;
    z-index: 1;
    width: min(72vw, 330px);
    height: auto;
    max-height: 58svh;
    margin: 0 auto -.25rem;
  }

  .ub-home .carte-dressing .carte-membre #titre-promo {
    font-size: clamp(1.8rem, 8vw, 2.7rem);
  }
}

/* Cabine d'essayage : muse détourée, sans décor ni carte derrière elle. */
.ub-home .cabine {
  container-type: size;
}

.ub-home .cabine .cadre-cabine {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

.ub-home .cabine-muse {
  display: block;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 18px 24px rgba(43, 27, 61, .2));
  pointer-events: none;
  user-select: none;
}

@media (min-width: 1024px) {
  .ub-home .cabine {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .ub-home .cabine > .split {
    height: 100%;
    min-height: 100%;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    align-items: center;
  }

  .ub-home .cabine .cadre-cabine {
    height: 100%;
    min-height: 0;
    padding: 0;
    align-items: center;
    overflow: visible;
  }

  .ub-home .cabine-muse {
    width: auto !important;
    max-width: 100%;
    height: 90cqh !important;
    max-height: 90cqh !important;
  }
}

@media (max-width: 1023px) {
  .ub-home .cabine {
    container-type: inline-size;
  }

  .ub-home .cabine .cadre-cabine {
    height: auto;
    padding: 0;
    overflow: visible;
  }

  .ub-home .cabine-muse {
    width: auto !important;
    max-width: min(80vw, 360px) !important;
    height: auto !important;
    max-height: 65svh !important;
    margin: 0 auto;
  }
}

/* Studio déco : neutralise le paragraphe vide ajouté par wpautop dans la grille. */
.ub-home .studio-deco .split > p:empty {
  display: none !important;
}

@media (min-width: 1024px) {
  .ub-home .studio-deco .split {
    grid-template-rows: minmax(0, 1fr);
  }

  .ub-home .studio-deco .split-texte {
    grid-column: 1;
    grid-row: 1;
    order: 1;
    align-self: center;
  }

  .ub-home .studio-deco .split-visuel {
    grid-column: 2;
    grid-row: 1;
    order: 2;
    align-self: center;
    height: auto;
    aspect-ratio: 16 / 9;
  }
}

/* Avis et service : cartes dimensionnées par leur contenu, sans étirement vide. */
.ub-home .fiche-avis > p:empty {
  display: none !important;
}

.ub-home .fiche-avis {
  position: relative;
  overflow: hidden;
}

.ub-home .fiche-avis::after {
  content: "”";
  position: absolute;
  right: .75rem;
  bottom: -.6rem;
  color: rgba(236, 0, 140, .08);
  font-family: Georgia, serif;
  font-size: clamp(4rem, 7vw, 6rem);
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
}

.ub-home .fiche-avis .avis-auteur {
  position: relative;
  z-index: 1;
  margin-top: auto;
  padding-top: .7rem;
}

.ub-home .carte-service h3 {
  display: flex;
  align-items: center;
  gap: .55rem;
}

.ub-home .carte-service h3::before {
  content: "✓";
  flex: 0 0 auto;
  width: 1.65rem;
  height: 1.65rem;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(92, 211, 187, .2);
  color: #268b76;
  font-size: .85rem;
  font-weight: 900;
}

@media (min-width: 1024px) {
  .ub-home .avis-liste {
    min-height: 0 !important;
    grid-auto-rows: auto !important;
    align-items: stretch;
  }

  .ub-home .fiche-avis {
    height: auto !important;
    min-height: clamp(175px, 25svh, 230px);
    justify-content: flex-start !important;
  }

  .ub-home .grille-service {
    min-height: 0 !important;
    grid-auto-rows: auto !important;
    align-items: stretch;
  }

  .ub-home .carte-service {
    height: auto !important;
    min-height: clamp(110px, 15svh, 150px);
    justify-content: flex-start !important;
  }
}

/* Carte d'accès : muse indépendante de la carte, à 90 % de la section. */
.ub-home .carte-dressing > .conteneur > p:empty {
  display: none !important;
}

@media (min-width: 1024px) {
  .ub-home .carte-dressing {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .ub-home .carte-dressing > .conteneur {
    display: grid;
    grid-template-columns: minmax(300px, .82fr) minmax(0, 1.18fr);
    gap: clamp(1.5rem, 4vw, 4.5rem);
    align-items: center;
    width: min(calc(100% - 2rem), 1180px);
    height: 100%;
    min-height: 100%;
  }

  .ub-home .promo-dressing-muse {
    position: relative;
    z-index: 1;
    left: auto;
    bottom: auto;
    display: block;
    justify-self: center;
    align-self: center;
    width: auto !important;
    max-width: 100%;
    height: 90cqh !important;
    max-height: 90cqh !important;
    margin: 0;
    object-fit: contain;
    object-position: center;
  }

  .ub-home .carte-dressing .carte-membre {
    width: 100%;
    height: auto;
    min-height: clamp(350px, 61cqh, 470px);
    padding: clamp(2rem, 4cqh, 3.25rem) clamp(2rem, 4vw, 4rem);
    align-items: flex-start;
    justify-content: center;
    text-align: left;
  }
}

@media (max-width: 1023px) {
  .ub-home .carte-dressing > .conteneur {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .ub-home .promo-dressing-muse {
    position: relative;
    z-index: 1;
    left: auto;
    bottom: auto;
    order: 1;
    display: block;
    width: auto !important;
    max-width: min(78vw, 350px) !important;
    height: auto !important;
    max-height: 60svh !important;
    margin: 0 auto -.35rem;
    object-fit: contain;
  }

  .ub-home .carte-dressing .carte-membre {
    order: 2;
    width: 100%;
  }
}

/* Grand portant : chaque carte annonce clairement l'action d'achat. */
.ub-home .cintre-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: .65rem;
  padding: .45rem .85rem;
  border: 1px solid rgba(236, 0, 140, .28);
  border-radius: 999px;
  background: rgba(255, 255, 255, .9);
  color: var(--rose);
  font-size: clamp(.68rem, 1.5svh, .82rem);
  font-weight: 900;
  line-height: 1;
  text-decoration: none !important;
}

/* WordPress ajoute des <br> entre les éléments du cintre. */
.ub-home .cintre-carte > br {
  display: none !important;
}

/* Visuels éditoriaux : Ken au service, carnet objet et Barbie au miroir final. */
.ub-home .service,
.ub-home .carnet {
  container-type: size;
}

.ub-home .service > .conteneur > p:empty,
.ub-home .carnet > .conteneur > p:empty {
  display: none !important;
}

.ub-home .service-visuel,
.ub-home .carnet-visuel {
  overflow: hidden;
  border-radius: 26px;
  box-shadow: 0 22px 48px rgba(43, 27, 61, .16);
}

.ub-home .service-visuel img,
.ub-home .carnet-visuel img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ub-home .final-fond {
  background:
    linear-gradient(90deg, rgba(43, 27, 61, .9) 0%, rgba(43, 27, 61, .78) 46%, rgba(43, 27, 61, .22) 100%),
    url("/wp-content/uploads/home-ecom/univers-barbie.com/assets/img/editorial-20260724/final-mirror-barbie.webp") center / cover no-repeat !important;
}

@media (min-width: 1024px) {
  .ub-home .service > .conteneur,
  .ub-home .carnet > .conteneur {
    display: grid !important;
    grid-template-columns: minmax(260px, .78fr) minmax(0, 1.22fr);
    grid-template-rows: auto auto auto 1fr;
    column-gap: clamp(1.5rem, 3.5vw, 4rem);
    align-content: center;
    align-items: start;
    width: min(calc(100% - 2rem), 1180px);
    max-width: 1180px;
    min-height: 88%;
  }

  .ub-home .service-visuel,
  .ub-home .carnet-visuel {
    grid-column: 1;
    grid-row: 1 / 5;
    align-self: center;
    width: 100%;
    height: clamp(390px, 72cqh, 520px);
  }

  .ub-home .service-visuel img {
    object-position: 50% 42%;
  }

  .ub-home .carnet-visuel img {
    object-position: 50% 50%;
  }

  .ub-home .service > .conteneur > :is(.surtitre, h2, .intro, .grille-service),
  .ub-home .carnet > .conteneur > :is(.surtitre, h2, .intro, .faq-liste) {
    grid-column: 2;
  }

  .ub-home .service .grille-service,
  .ub-home .carnet .faq-liste {
    min-height: 0 !important;
  }

  .ub-home .final-contenu {
    width: min(calc(100% - 2rem), 1180px);
    max-width: 1180px;
    align-items: flex-start;
    text-align: left;
  }

  .ub-home .final p {
    max-width: 560px;
    margin-left: 0;
    margin-right: 0;
  }

  .ub-home .final .hero-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 1023px) {
  .ub-home .service,
  .ub-home .carnet {
    container-type: inline-size;
  }

  .ub-home .service > .conteneur,
  .ub-home .carnet > .conteneur {
    display: flex !important;
    flex-direction: column;
  }

  .ub-home .service-visuel,
  .ub-home .carnet-visuel {
    order: -1;
    width: 100%;
    height: min(72vw, 340px);
    margin-bottom: 1.5rem;
    border-radius: 20px;
  }

  .ub-home .service-visuel img {
    object-position: 50% 38%;
  }

  .ub-home .final-fond {
    background:
      linear-gradient(180deg, rgba(43, 27, 61, .48) 0%, rgba(43, 27, 61, .88) 68%),
      url("/wp-content/uploads/home-ecom/univers-barbie.com/assets/img/editorial-20260724/final-mirror-barbie.webp") 66% center / cover no-repeat !important;
  }
}

/* Carte d'accès : duo Barbie et Ken symétrique autour de l'offre. */
.ub-home .promo-dressing-ken {
  display: block;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 18px 24px rgba(43, 27, 61, .18));
  pointer-events: none;
  user-select: none;
}

@media (min-width: 1024px) {
  .ub-home .carte-dressing > .conteneur {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: clamp(1rem, 2vw, 2rem);
  }

  .ub-home .promo-dressing-muse,
  .ub-home .promo-dressing-ken {
    position: relative;
    z-index: 1;
    left: auto;
    right: auto;
    bottom: auto;
    align-self: center;
    justify-self: center;
    width: auto !important;
    max-width: none !important;
    height: 90cqh !important;
    max-height: 90cqh !important;
    margin: 0;
  }

  .ub-home .promo-dressing-muse {
    grid-column: 1;
  }

  .ub-home .carte-dressing .carte-membre {
    grid-column: 2;
    width: 100%;
    min-width: 0;
    padding-left: clamp(1.7rem, 3vw, 3rem);
    padding-right: clamp(1.7rem, 3vw, 3rem);
  }

  .ub-home .promo-dressing-ken {
    grid-column: 3;
  }

  .ub-home .carte-dressing .carte-membre #titre-promo {
    font-size: clamp(1.85rem, 3.2cqw, 2.55rem);
  }
}

@media (max-width: 1023px) {
  .ub-home .carte-dressing > .conteneur {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 1rem;
  }

  .ub-home .promo-dressing-muse,
  .ub-home .promo-dressing-ken {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 48svh !important;
    margin: 0 auto;
    align-self: end;
  }

  .ub-home .promo-dressing-muse {
    grid-column: 1;
    order: 1;
  }

  .ub-home .promo-dressing-ken {
    grid-column: 2;
    order: 2;
  }

  .ub-home .carte-dressing .carte-membre {
    grid-column: 1 / -1;
    order: 3;
  }
}

/* Mobile live 2026-07-28: one column and full rack rail. */

@media (max-width: 767px) {

  .ub-home .grille-favoris {

    grid-template-columns: minmax(0, 1fr);

  }



  .ub-home .portants .rail-barre {

    display: none !important;

  }



  .ub-home .portants .rail-liste::before {

    content: "";

    position: absolute;

    z-index: 0;

    top: calc(clamp(1.35rem, 2.8svh, 1.8rem) - clamp(5rem, 10svh, 5.8rem));

    left: 0;

    right: 0;

    height: 9px;

    background: linear-gradient(180deg, #ffe0e7 0%, #c87888 42%, #8c4e5f 55%, #f4b9c5 100%);

    border: 1px solid rgba(115, 47, 72, .24);

    border-radius: 999px;

    box-shadow: 0 5px 12px rgba(74, 20, 61, .18);

    pointer-events: none;

  }

}

/* Mobile live 2026-07-28: every card grid uses one column. */

@media (max-width: 767px) {

  .ub-home .look-pieces,

  .ub-home .look-products {

    grid-template-columns: minmax(0, 1fr);

  }

}

/* Desktop live 2026-07-28: hangers attached to the rack bar. */

@media (min-width: 1024px) {

  .ub-home .portants .rail-liste {

    align-self: flex-start;

    top: calc(clamp(1.35rem, 2.8svh, 1.8rem) + 63px - clamp(5rem, 10svh, 5.8rem));

  }

}