/* =========================================================
   ÉCLORYA — Modules ajoutés à la home
   Les filles / échange du jour · Aujourd'hui on découvre · Le Jardin
   Conventions : mêmes tokens que style.css (var(--color-*), var(--space-*)),
   mêmes familles de classes (kebab-case, .is-* pour les états).
   ========================================================= */

/* -------- Les filles + échange du jour -------- */

.sisters {
  display: grid;
  grid-template-columns: 7fr 5fr;
  align-items: stretch;
}

.sisters-image {
  min-height: 560px;
  background:
    #e8ddc9
    url("../sisters.webp")
    center / cover no-repeat;
}

.sisters-content {
  background: var(--color-cream);
  padding: var(--space-xl) var(--space-lg) var(--space-xl) var(--space-xl);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: visible;
}

/* Bulles légèrement plus généreuses et volontairement décalées :
   Zouzou lance la conversation à gauche, Mimi lui répond à droite. */
.bubble {
  position: relative;
  width: min(100%, 480px);
  padding: 1.4rem 1.7rem 1.5rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.06rem, 1.45vw, 1.2rem);
  line-height: 1.5;
  border-radius: 27px;
  margin-bottom: 1.35rem;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.bubble-dark {
  align-self: flex-start;
  margin-left: -20px;
  margin-right: 34px;
  background: var(--color-ink);
  color: var(--color-gold-light);
  border-bottom-left-radius: 10px;
}

.bubble-light {
  align-self: flex-end;
  margin-left: 34px;
  margin-right: -20px;
  background: #FBF7EF;
  color: var(--color-ink);
  border: 1px solid var(--color-line);
  text-align: left;
  border-bottom-right-radius: 10px;
}

/* Prénom + rôle : chaleureux, mais très discret pour rester premium. */
.bubble-tag {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 0.55rem;
  font-family: var(--font-body);
  font-style: normal;
  line-height: 1.2;
}

.bubble-name {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.bubble-role {
  font-size: 0.61rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: none;
  opacity: 0.62;
}

/* Petites pointes douces : on garde la lecture "conversation" sans angle dur. */
.bubble-dark::after,
.bubble-light::after {
  content: "";
  position: absolute;
  bottom: 2px;
  width: 18px;
  height: 18px;
}

.bubble-dark::after {
  left: -7px;
  background: var(--color-ink);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  border-bottom-left-radius: 10px;
}

.bubble-light::after {
  right: -7px;
  background: #FBF7EF;
  clip-path: polygon(0 0, 100% 100%, 0 100%);
  border-bottom-right-radius: 10px;
}

.sisters-meta {
  margin-top: 0.25rem;
  font-size: 0.76rem;
  color: var(--color-ink-soft);
}

.sisters-link {
  display: inline-block;
  width: fit-content;
  margin-top: var(--space-sm);
  font-size: 0.78rem;
  color: var(--color-ink);
  border-bottom: 1px solid var(--color-gold);
  padding-bottom: 2px;
}

/* Micro-animation : Zouzou apparaît, puis Mimi répond. */
@media (prefers-reduced-motion: no-preference) {
  .eclorya-motion .sisters .bubble,
  .eclorya-motion .sisters .sisters-meta,
  .eclorya-motion .sisters .sisters-link {
    opacity: 0;
    transform: translateY(12px);
    transition:
      opacity 0.65s ease,
      transform 0.65s cubic-bezier(.2,.8,.2,1),
      box-shadow 0.35s ease;
  }

  .eclorya-motion .sisters.is-inview .bubble-dark {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.08s;
  }

  .eclorya-motion .sisters.is-inview .bubble-light {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.24s;
  }

  .eclorya-motion .sisters.is-inview .sisters-meta,
  .eclorya-motion .sisters.is-inview .sisters-link {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.38s;
  }
}

.bubble:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(32,24,18,0.08);
}

/* Sur la ligne manuscrite de la découverte du jour, on garde le côté spontané. */
.hand-line {
  font-family: var(--font-hand);
  font-size: clamp(1.75rem, 2.4vw, 2.25rem);
  line-height: 1.35;
  color: var(--color-ink);
  text-align: center;
  max-width: 980px;
  margin: 0 auto;
  letter-spacing: 0.01em;
}

.hand-line .dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 0.5rem;
  vertical-align: middle;
}

.hand-line .dot-gold { background: var(--color-gold); }
.hand-line .dot-ink { background: var(--color-ink); }

/* -------- Aujourd'hui on découvre -------- */

.discover-today { background: var(--color-cream); padding: var(--space-xl) 0; }
.discover-intro {
  text-align: center;
  margin-bottom: 3rem;
  padding: 0 var(--space-md);
}

.discover-card {
  display: grid;
  grid-template-columns: 46% 54%;
  align-items: stretch;
  width: min(1120px, 100%);
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: 16px;
  overflow: hidden;
}
.discover-image { min-height: 410px; background: #ece1cc center/cover no-repeat; }
.discover-content {
  padding: clamp(2.75rem, 5vw, 5.5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.discover-content h3 { font-style: italic; font-size: clamp(1.6rem, 2.6vw, 2.2rem); margin-bottom: 0.6rem; }
.discover-meta { font-size: 0.78rem; letter-spacing: 0.04em; color: var(--color-ink-soft); margin: 0 0 1.2rem; }

/* -------- Le Jardin -------- */

.garden {
  background: var(--color-cream);
  padding: 6.75rem 0 5.75rem;
}

.garden .container {
  padding-left: clamp(28px, 4vw, 60px);
  padding-right: clamp(28px, 4vw, 60px);
}

.garden-intro {
  text-align: center;
  max-width: 520px;
  margin: 0 auto 3.5rem;
}

.garden-intro h2 {
  font-size: clamp(2rem, 3.2vw, 2.8rem);
}

.garden-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  max-width: 980px;
  margin: 0 auto;
}

.garden-card {
  display: block;
  min-width: 0;
}

.garden-card .img-wrap {
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: #EFE6D7;
  border-radius: 18px;
}

.garden-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.garden-card:hover img { transform: scale(1.035); }

.garden-card h4 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.2rem;
  font-weight: 400;
  margin: 0.9rem 0 0.25rem;
}

.garden-card p {
  font-size: 0.82rem;
  margin: 0;
}

.garden-cta {
  margin-top: 2.75rem;
}

/* Respiration nette entre le Jardin et la collection. */
.garden + .section-elixirs {
  margin-top: 2.5rem;
}

/* -------- WooCommerce : grille boutique alignée sur .product-grid -------- */

ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
}
ul.products li.product-card { width: auto; margin: 0; }

@media (max-width: 900px) {
  ul.products { grid-template-columns: repeat(2, 1fr); }
}

/* -------- Responsive -------- */

@media (max-width: 900px) {
  .sisters { grid-template-columns: 1fr; }
  .sisters-content { padding: var(--space-lg) var(--space-md); }
  .discover-card { grid-template-columns: 1fr; }
  .discover-image { min-height: 260px; }
  .discover-content { padding: var(--space-lg) var(--space-md); }
  .garden .container {
    padding-left: 20px;
    padding-right: 20px;
  }
  .garden-intro {
    margin-bottom: 36px;
  }
  .garden-grid {
    grid-template-columns: 1fr;
    max-width: 520px;
    gap: 28px;
  }
  .bubble {
    width: calc(100% - 16px);
    max-width: 460px;
    padding: 1.1rem 1.25rem 1.2rem;
  }
  .bubble-dark {
    margin-left: 0;
    margin-right: 20px;
  }
  .bubble-light {
    margin-left: 20px;
    margin-right: 0;
  }
}

/* -------- Illustrations des sœurs (signatures très discrètes) -------- */

.sister-illustration {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  pointer-events: none;
  user-select: none;
  opacity: 0.62;
  filter: sepia(0.08) contrast(0.9);
}

/* Zouzou : une petite annotation près du titre, jamais entre le titre et les plantes. */
.garden-intro-with-sister {
  position: relative;
}

.garden-sister-illustration {
  position: absolute;
  width: 64px !important;
  right: -78px;
  top: 8px;
  transform: rotate(1deg);
}

/* Mimi : petite signature dans l'en-tête du Carnet, sans créer une nouvelle rangée. */
.journal-header-with-sister {
  position: relative;
  padding-right: 94px;
  min-height: 86px;
}

.journal-sister-illustration {
  position: absolute;
  width: 72px !important;
  right: 8px;
  bottom: 2px;
  transform: rotate(-1deg);
}

@media (prefers-reduced-motion: no-preference) {
  .sister-illustration {
    transition: transform 0.5s cubic-bezier(.2,.8,.2,1), opacity 0.5s ease;
  }

  .garden:hover .garden-sister-illustration {
    transform: translateY(-3px) rotate(1deg);
    opacity: 0.78;
  }

  .journal:hover .journal-sister-illustration {
    transform: translateY(-2px) rotate(-1deg);
    opacity: 0.78;
  }
}

@media (max-width: 1100px) {
  .garden-sister-illustration {
    width: 58px !important;
    right: -48px;
  }
}

@media (max-width: 900px) {
  .garden-intro-with-sister {
    max-width: 520px;
    padding-right: 66px;
  }

  .garden-sister-illustration {
    width: 54px !important;
    right: 6px;
    top: 10px;
  }

  .journal-header-with-sister {
    padding-right: 76px;
    min-height: 76px;
  }

  .journal-sister-illustration {
    width: 58px !important;
    right: 4px;
    bottom: 3px;
  }
}

@media (max-width: 560px) {
  .garden-intro-with-sister,
  .journal-header-with-sister {
    padding-right: 58px;
  }

  .garden-sister-illustration,
  .journal-sister-illustration {
    position: absolute;
    width: 48px !important;
    right: 4px;
    top: 50%;
    bottom: auto;
    margin: 0;
    transform: translateY(-50%);
    opacity: 0.5;
  }
}