/* ============================================================
   HOMÉOSPIRITS — Accueil (refonte 2026)
   Effets uniques à la page : pied de vigne masqué, lianes,
   carte des chapitres (swap au survol), moulure dorée du
   portrait, mise en scène produit mystère.
   Le layout/typo/couleurs sont en Tailwind dans index.html.
   ============================================================ */

/* ---- HERO : pied de vigne détouré, fondu par masque ---- */
.hero-vine {
  position: absolute;
  right: -3%;
  bottom: -2%;
  width: min(58vw, 820px);
  z-index: -1;
  transform-origin: 70% 100%;
  filter: drop-shadow(0 28px 40px rgba(35, 29, 23, 0.14));
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to top, #000 76%, transparent 99%), linear-gradient(to left, #000 78%, transparent 99%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to top, #000 76%, transparent 99%), linear-gradient(to left, #000 78%, transparent 99%);
  mask-composite: intersect;
}
.hero-vine img { width: 100%; height: auto; transform: scaleX(-1); }
/* Desktop : la vigne prend toute la hauteur du hero (dimensionnée en hauteur, plus grande) */
@media (min-width: 1024px) {
  .hero-vine { width: auto; height: 108%; bottom: -4%; right: -5%; }
  .hero-vine img { width: auto; height: 100%; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero-vine { animation: vineReveal 1.7s var(--ease) both; }
}
@keyframes vineReveal { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 1023px) { .hero-vine { width: 56vw; opacity: 0.92; } }
@media (max-width: 767px) {
  /* Mobile : la vigne reste en décor ancré bas-droite (comme desktop),
     derrière le contenu centré — elle déborde légèrement à droite. */
  .hero-vine {
    position: absolute;
    right: -14%;
    bottom: -1%;
    width: 62vw;
    max-width: 330px;
    z-index: -1;
    opacity: 0.85;
    filter: drop-shadow(0 16px 24px rgba(35, 29, 23, 0.12));
  }
}

/* ---- MANIFESTE : lianes de vigne (rappel du pied de vigne) ---- */
.veg { position: absolute; z-index: 0; pointer-events: none; width: clamp(220px, 24vw, 400px); }
.veg img { width: 100%; height: auto; transform-origin: 60% 0; }
@media (prefers-reduced-motion: no-preference) {
  .veg img { animation: lianeSway 9s ease-in-out infinite alternate; }
  .veg--r img { animation-duration: 11s; animation-delay: -3s; }
  .veg--b img { animation-duration: 12.5s; animation-delay: -1.5s; }
}
@keyframes lianeSway { from { transform: rotate(-1.6deg); } to { transform: rotate(1.8deg); } }
.veg--l {
  top: -2.5rem; left: -3rem;
  -webkit-mask-image: radial-gradient(120% 120% at 18% 22%, #000 52%, transparent 80%);
  mask-image: radial-gradient(120% 120% at 18% 22%, #000 52%, transparent 80%);
}
.veg--r {
  top: -3.5rem; right: -3rem; transform: scaleX(-1);
  -webkit-mask-image: radial-gradient(120% 120% at 18% 22%, #000 52%, transparent 80%);
  mask-image: radial-gradient(120% 120% at 18% 22%, #000 52%, transparent 80%);
}
.veg--b {
  bottom: 4rem; left: -3.5rem; width: clamp(180px, 18vw, 300px);
  transform: scaleY(-1) rotate(-8deg); opacity: 0.8;
  -webkit-mask-image: radial-gradient(120% 120% at 22% 28%, #000 50%, transparent 78%);
  mask-image: radial-gradient(120% 120% at 22% 28%, #000 50%, transparent 78%);
}
@media (max-width: 1023px) { .veg--b { display: none; } }
@media (max-width: 920px)  { .veg { width: 200px; opacity: 0.65; } }
@media (max-width: 720px)  { .veg--l, .veg--r { display: none; } }

/* ---- CARTE DES CHAPITRES : ligne avec image + swap de texte au survol ---- */
.cru {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 2rem;
  padding: 1.7rem 1rem;
  border-bottom: 1px solid rgba(38, 52, 42, 0.16);
  overflow: hidden;
  isolation: isolate;
  transition: padding-left 0.5s var(--ease);
}
.cru:hover { padding-left: 1.5rem; }
.cru__media { position: absolute; inset: 0 0 0 auto; width: 52%; z-index: -1; overflow: hidden; }
.cru__media img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: right center;
  opacity: 0; transform: scale(1.05);
  transition: opacity 0.6s var(--ease), transform 0.7s var(--ease);
}
.cru__media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--hs-cream) 10%, rgba(246, 242, 234, 0.78) 46%, rgba(246, 242, 234, 0.42) 90%);
}
.cru:hover .cru__media img { opacity: 0.26; transform: scale(1); }

.cru__swap {
  position: relative;
  display: inline-grid;
  width: fit-content;
  overflow: hidden;
  line-height: 1.18;
  padding: 0.04em 0.02em;
  margin: -0.04em -0.02em;
}
.cru__swap > span {
  grid-area: 1 / 1;
  font-family: var(--f-display);
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  color: var(--hs-ink);
  transition: transform 0.34s var(--ease), opacity 0.34s var(--ease);
}
.cru__swap .alt { color: var(--hs-gold-deep); transform: translateY(-100%); opacity: 0; }
.cru:hover .cru__swap .primary { transform: translateY(100%); opacity: 0; }
.cru:hover .cru__swap .alt { transform: translateY(0); opacity: 1; }

.cru .go-line { transition: color 0.4s var(--ease); }
.cru:hover .go-line { color: var(--hs-ink); }
.cru:hover .go-line .ln { width: 2.8rem; }

@media (max-width: 767px) {
  .cru { grid-template-columns: 1fr; gap: 0.7rem; padding: 1.4rem 0.3rem; }
  .cru__media { width: 100%; }
}

/* ---- DUO : portes de redirection (ligne-flèche qui s'étire) ---- */
.door:hover .go-line .ln { width: 2.6rem; }

/* ---- DUO : moulure dorée + enluminures de coin du portrait ---- */
.orn {
  position: absolute; z-index: 3;
  width: 50px; height: 50px;
  background: no-repeat center / contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60' fill='none' stroke='%23CBA56B'%3E%3Cpath d='M5 44 V14 Q5 5 14 5 H44' stroke-width='1.5'/%3E%3Cpath d='M15 32 V21 Q15 15 21 15 H32' stroke-width='1' opacity='0.75'/%3E%3Cpath d='M44 5 q10 0 11 9' stroke-width='1.2'/%3E%3Cpath d='M5 44 q0 10 9 11' stroke-width='1.2'/%3E%3Cpath d='M21 15 q-4 -8 -13 -9 q7 5 5 12' stroke-width='1' opacity='0.85'/%3E%3Ccircle cx='9' cy='9' r='1.9' fill='%23CBA56B' stroke='none'/%3E%3C/svg%3E");
}
.orn--tl { top: -20px; left: -20px; }
.orn--tr { top: -20px; right: -20px; transform: scaleX(-1); }
.orn--bl { bottom: -20px; left: -20px; transform: scaleY(-1); }
.orn--br { bottom: -20px; right: -20px; transform: scale(-1, -1); }

/* ---- PRODUIT MYSTÈRE : badge pulsant + silhouette floutée flottante ---- */
.prod-pulse { position: relative; }
.prod-pulse::after {
  content: ''; position: absolute; inset: -4px;
  border-radius: 50%; border: 1px solid var(--hs-lichen);
  opacity: 0.6;
  animation: prodPulse 2.4s ease-out infinite;
}
@keyframes prodPulse {
  0%   { transform: scale(0.6); opacity: 0.6; }
  100% { transform: scale(1.7); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .prod-pulse::after { animation: none; } }

.prod-stage::after {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: radial-gradient(58% 62% at 50% 46%, transparent 40%, rgba(246, 242, 234, 0.55) 74%, var(--hs-cream) 96%);
}
.prod-bottle {
  position: absolute; inset: 0; margin: auto;
  height: 100%; width: auto; object-fit: contain;
  filter: blur(17px) brightness(1.42) contrast(0.74) saturate(0.82);
  opacity: 0.42;
  -webkit-mask-image: radial-gradient(56% 64% at 50% 46%, #000 38%, transparent 82%);
  mask-image: radial-gradient(56% 64% at 50% 46%, #000 38%, transparent 82%);
}
@media (prefers-reduced-motion: no-preference) {
  .prod-bottle { animation: prodFloat 8s ease-in-out infinite alternate; }
}
@keyframes prodFloat { from { transform: translateY(0); } to { transform: translateY(-12px); } }