/* =====================================================================
   Accueil (index.html seulement, body.home)
   Header, pied de page, boutons et couleurs communs : section LUXE à la fin de style.css.
   ===================================================================== */

/* =====================================================================
   1. Intro logo
   ===================================================================== */
.h-intro { display: none; }
.intro-on .h-intro {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  transition: opacity 0.5s ease;
}
.intro-on body.home { overflow: hidden; }
.h-intro-logo {
  width: min(240px, 52vw);
  height: auto;
  opacity: 0;
  animation: hIntroLogo 2.5s ease both;
}
/* 0.6 s apparition, maintien, 0.6 s disparition */
@keyframes hIntroLogo {
  0% { opacity: 0; transform: scale(0.985); }
  24% { opacity: 1; transform: scale(1); }
  76% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.01); }
}
.h-intro.is-out { opacity: 0; pointer-events: none; }
.h-skip {
  position: absolute;
  right: max(1.2rem, env(safe-area-inset-right));
  bottom: max(1.2rem, env(safe-area-inset-bottom));
  padding: 0.6rem 0.9rem;
  background: none;
  border: none;
  color: #8c887f;
  font: 400 0.68rem/1 var(--sans, "Inter", sans-serif);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  cursor: pointer;
}
.h-skip:hover, .h-skip:focus-visible { color: #fff; }

/* =====================================================================
   2. Hero
   ===================================================================== */
.h-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(var(--top-h) + 1.5rem) 6vw 3.5rem;
  overflow: hidden;
  text-align: center;
  background: #000;
}
.h-dust { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }

.h-bottle { position: relative; z-index: 1; }
.h-float { position: relative; }
.h-bottle img {
  display: block;
  height: clamp(300px, 58vh, 640px);
  height: clamp(300px, 58svh, 640px);
  width: auto;
  aspect-ratio: 513 / 1400;
}
/* Reflet de lumière : une bande claire qui traverse le verre, limitée à la forme du flacon */
.h-sweep {
  position: absolute;
  inset: 0;
  overflow: hidden;
  -webkit-mask: url("/img/bottle.webp") center / contain no-repeat;
  mask: url("/img/bottle.webp") center / contain no-repeat;
  pointer-events: none;
}
.h-sweep::before {
  content: "";
  position: absolute;
  top: -10%;
  bottom: -10%;
  left: 0;
  width: 45%;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 246, 225, 0.13) 50%, transparent 100%);
  transform: translateX(-120%) skewX(-12deg);
}

.h-copy { position: relative; z-index: 1; margin-top: clamp(1.2rem, 3vh, 2.2rem); max-width: 64rem; }
.h-line1 {
  margin: 0;
  font-family: var(--serif, "Cinzel", serif);
  font-weight: 400;
  font-size: clamp(1.35rem, 2.6vw, 2.25rem);
  text-wrap: balance;
  line-height: 1.25;
  letter-spacing: 0.04em;
  color: #fff;
}
.h-line2 {
  margin: 0.9rem 0 0;
  font-family: var(--sans, "Inter", sans-serif);
  font-weight: 300;
  font-size: clamp(0.72rem, 1.1vw, 0.82rem);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #a8a49b;
}
.h-cta { margin-top: 2rem; }

/* Avant la fin de l'intro, tout attend (déjà chargé, invisible) */
.hjs .h-bottle, .hjs .h-line1, .hjs .h-line2, .hjs .h-cta { opacity: 0; }

/* Après l'intro : montée du flacon, puis les textes l'un après l'autre */
.hero-go .h-bottle { animation: hRise 1.3s cubic-bezier(0.22, 0.61, 0.36, 1) 0.1s both; }
.hero-go .h-float { animation: hFloat 7s ease-in-out 1.5s infinite alternate; }
.hero-go .h-sweep::before { animation: hSweep 8s ease-in-out 2.4s infinite; }
.hero-go .h-line1 { animation: hText 1s ease 0.75s both; }
.hero-go .h-line2 { animation: hText 1s ease 1.45s both; }
.hero-go .h-cta { animation: hText 0.9s ease 2.1s both; }

@keyframes hRise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes hFloat { from { transform: translateY(0); } to { transform: translateY(-6px); } }
@keyframes hText { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* Passe pendant ~1,6 s, puis repos : une fois toutes les 8 s */
@keyframes hSweep {
  0% { transform: translateX(-120%) skewX(-12deg); }
  20% { transform: translateX(260%) skewX(-12deg); }
  100% { transform: translateX(260%) skewX(-12deg); }
}

/* =====================================================================
   3. Sous le hero
   ===================================================================== */
.h-main section { background: #000; }

/* Apparition douce au défilement */
.hjs .h-rv { opacity: 0; transform: translateY(18px); transition: opacity 0.9s ease var(--rd, 0s), transform 0.9s ease var(--rd, 0s); }
.hjs .h-rv.in { opacity: 1; transform: none; }

/* Petit libellé commun (gris, majuscules espacées) */
.h-label {
  margin: 0;
  font-family: var(--sans, "Inter", sans-serif);
  font-weight: 400;
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #9a968c;
}

/* ---------- Notre signature ---------- */
.h-sig {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2.5rem, 6vw, 6rem);
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(5rem, 10vw, 8.5rem) 6vw clamp(4rem, 8vw, 7rem);
}
.h-sig-media { aspect-ratio: 4 / 5; overflow: hidden; background: #000; }
.h-sig-media img { display: block; width: 100%; height: 100%; object-fit: contain; transition: transform 1.8s cubic-bezier(0.22, 0.61, 0.36, 1); }
.h-sig-media img.cover { object-fit: cover; }
.h-sig-media:hover img { transform: scale(1.045); }
.h-sig-name { margin: 1.1rem 0 0; font-family: var(--serif, "Cinzel", serif); font-weight: 400; font-size: clamp(2rem, 4.2vw, 3.4rem); line-height: 1.1; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; }
.h-sig-desc { margin: 1.4rem 0 0; max-width: 30rem; font-size: clamp(0.98rem, 1.3vw, 1.1rem); line-height: 1.75; font-weight: 300; color: #cfcbc2; }
.h-sig-notes { display: grid; grid-template-columns: auto 1fr; gap: 0.6rem 1.4rem; margin: 2rem 0 0; padding-top: 1.6rem; border-top: 1px solid rgba(201, 162, 75, 0.35); max-width: 30rem; }
.h-sig-notes dt { font-size: 0.68rem; letter-spacing: 0.26em; text-transform: uppercase; color: #8c887f; padding-top: 0.2rem; }
.h-sig-notes dd { margin: 0; font-size: 0.95rem; color: #e8e4da; }
/* Bouton secondaire : texte blanc + ligne fine (l'or reste réservé au bouton principal) */
.h-btn {
  display: inline-block;
  margin-top: 2.4rem;
  padding: 0.95rem 0 0.45rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  color: #fff;
  font-size: 0.76rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  text-decoration: none;
  transition: border-color 0.3s;
}
.h-btn:hover, .h-btn:focus-visible { border-bottom-color: #fff; }

/* ---------- Pourquoi Baladi (bas de page) ---------- */
.h-why { max-width: 1240px; margin: 0 auto; padding: max(96px, 8vw) 6vw max(96px, 8vw); text-align: center; }
/* Titre en écriture « signature », en or, seulement ici */
.h-why-title {
  margin: 0;
  font-family: "Pinyon Script", "Great Vibes", cursive;
  font-weight: 400;
  font-size: clamp(2.75rem, 3.6vw, 3.5rem);
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  color: #c9a24b;
}
/* Ligne dorée de 1 px qui se dessine du centre vers les côtés */
.h-why-line { display: block; width: 120px; height: 1px; margin: 1.4rem auto clamp(3rem, 6vw, 4.5rem); background: #c9a24b; transform-origin: center; }
.h-why-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 4rem); margin: 0; padding: 0; list-style: none; }
.h-why-list svg { width: 40px; height: 40px; fill: none; stroke: #fff; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.h-why-list svg * { vector-effect: non-scaling-stroke; }
.h-why-list h3 { margin: 1.3rem 0 0; font-family: var(--serif, "Cinzel", serif); font-weight: 400; font-size: clamp(0.95rem, 1.4vw, 1.1rem); letter-spacing: 0.12em; text-transform: uppercase; color: #fff; }
.h-why-list p { margin: 0.7rem auto 0; max-width: 18rem; font-size: 0.9rem; line-height: 1.65; font-weight: 300; color: #a8a49b; }

/* Animation (seulement si JavaScript fonctionne : classe .js sur <html>) */
.js .h-why-line { transform: scaleX(0); transition: transform 1.2s cubic-bezier(0.22, 0.61, 0.36, 1); }
.js .h-why-list li { opacity: 0; transform: translateY(18px); transition: opacity 0.9s ease, transform 0.9s ease; transition-delay: calc(0.5s + var(--i, 0) * 0.25s); }
.js .h-why.in .h-why-line { transform: scaleX(1); }
.js .h-why.in .h-why-list li { opacity: 1; transform: none; }

/* Trois univers : tailles différentes, sans cadres */
.h-univers {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto auto;
  column-gap: clamp(1.5rem, 3vw, 3rem);
  row-gap: clamp(2rem, 4vw, 3.5rem);
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 6vw clamp(4rem, 9vw, 7rem);
}
.h-u { position: relative; display: block; color: #fff; text-decoration: none; }
.h-u-img { display: block; overflow: hidden; background: #000; }
.h-u-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.8s cubic-bezier(0.22, 0.61, 0.36, 1); }
.h-u:hover .h-u-img img, .h-u:focus-visible .h-u-img img { transform: scale(1.045); }
.h-u-homme { grid-column: 1 / 8; grid-row: 1 / 3; }
.h-u-homme .h-u-img { aspect-ratio: 4 / 5; }
.h-u-femme { grid-column: 8 / 13; grid-row: 1; align-self: start; }
/* Square crop: the bottle fills ~80% of the photo height, a wider crop would cut it.
   object-position keeps the frame from just above the cap to the reflection. */
.h-u-femme .h-u-img { aspect-ratio: 1 / 1; }
.h-u-femme .h-u-img img { object-position: 50% 45%; }
.h-u-mixte .h-u-img img { object-position: 50% 40%; }
.h-u-mixte { grid-column: 9 / 13; grid-row: 2; align-self: end; }
.h-u-mixte .h-u-img { aspect-ratio: 1 / 1; }
.h-u-text { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-top: 1rem; }
.h-u-name { font-family: var(--serif, "Cinzel", serif); font-size: clamp(1rem, 1.6vw, 1.3rem); letter-spacing: 0.16em; text-transform: uppercase; }
.h-u-link { font-size: 0.7rem; letter-spacing: 0.24em; text-transform: uppercase; color: #9a968c; transition: color 0.3s; }
.h-u:hover .h-u-link, .h-u:focus-visible .h-u-link { color: #fff; }
.h-u:focus-visible { outline: 1px solid #c9a24b; outline-offset: 6px; }

/* Sélection : 4 parfums */
.h-selection { max-width: 1320px; margin: 0 auto; padding: 0 6vw clamp(3.5rem, 8vw, 6rem); text-align: center; }
.h-divider { display: block; width: 56px; height: 1px; margin: 0 auto clamp(3rem, 6vw, 4.5rem); background: #c9a24b; }
.h-sel-title { margin: 0 0 clamp(2rem, 4vw, 3rem); font-family: var(--serif, "Cinzel", serif); font-weight: 400; font-size: clamp(1.1rem, 2vw, 1.5rem); letter-spacing: 0.24em; text-transform: uppercase; color: #fff; }
.h-sel-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.2rem, 2.5vw, 2.5rem); text-align: left; }
.h-p { display: block; color: #fff; text-decoration: none; }
.h-p-img { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: #000; }
.h-p-img img { width: 100%; height: 100%; object-fit: contain; transition: transform 1.8s cubic-bezier(0.22, 0.61, 0.36, 1); }
.h-p-img img.cover { object-fit: cover; }
.h-p:hover .h-p-img img, .h-p:focus-visible .h-p-img img { transform: scale(1.045); }
.h-p-name { display: block; margin-top: 1rem; font-family: var(--serif, "Cinzel", serif); font-size: 0.95rem; letter-spacing: 0.12em; text-transform: uppercase; }
.h-p-meta { display: block; margin-top: 0.35rem; font-size: 0.85rem; color: #9a968c; }
.h-p:focus-visible { outline: 1px solid #c9a24b; outline-offset: 6px; }
.h-more {
  display: inline-block;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-bottom: 0.3rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  font-size: 0.74rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-decoration: none;
  transition: border-color 0.3s;
}
.h-more:hover { border-bottom-color: #fff; }

/* ---------- Comment commander : 3 étapes, chiffres or fins, sans cadre ---------- */
.h-how { max-width: 1240px; margin: 0 auto; padding: max(88px, 7vw) 6vw 0; text-align: center; }
.h-how .h-divider { margin-bottom: 1.6rem; }
.h-how-title { margin-bottom: clamp(2.6rem, 5vw, 3.8rem); }
.h-how-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 4rem); margin: 0; padding: 0; list-style: none; }
.h-how-num { display: block; font-family: var(--serif, "Cinzel", serif); font-weight: 400; font-size: clamp(2rem, 3vw, 2.5rem); line-height: 1; color: #c9a24b; }
.h-how-list h3 { margin: 1.1rem 0 0; font-family: var(--serif, "Cinzel", serif); font-weight: 400; font-size: 0.95rem; letter-spacing: 0.16em; text-transform: uppercase; color: #fff; }
.h-how-list p { margin: 0.6rem auto 0; max-width: 17rem; font-size: 0.9rem; line-height: 1.65; font-weight: 300; color: #a8a49b; }
/* Toujours une ligne réservée : pas de saut de mise en page quand le texte arrive */
.h-how-free { min-height: 1.6em; margin: clamp(2.2rem, 4vw, 3rem) 0 0; font-size: 0.8rem; letter-spacing: 0.04em; color: #9a968c; }

/* ---------- Instagram : une ligne + un lien, rien d'autre ---------- */
.h-insta { padding: clamp(2.8rem, 5vw, 3.6rem) 6vw 0; text-align: center; }
.h-insta-line { margin: 0; font-size: 0.9rem; font-weight: 300; color: #a8a49b; }
.h-insta .h-more { margin-top: 1.2rem; }
.h-insta .h-more:hover, .h-insta .h-more:focus-visible { border-bottom-color: #c9a24b; }



/* =====================================================================
   Mobile
   ===================================================================== */
@media (max-width: 900px) {
  .h-sel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Signature et Pourquoi : empilés */
  .h-sig { grid-template-columns: 1fr; gap: 2.2rem; }
  .h-sig-text { text-align: center; }
  .h-sig-desc, .h-sig-notes { margin-left: auto; margin-right: auto; }
  .h-sig-notes { text-align: left; }
  .h-why-list { grid-template-columns: 1fr; gap: 2.8rem; }
}

@media (max-width: 720px) {
  .h-hero { padding: calc(var(--top-h) + 1rem) 6vw 2.6rem; }
  .h-bottle img { height: clamp(260px, 50svh, 470px); }
  .h-line2 { letter-spacing: 0.22em; }
  .h-cta { margin-top: 1.6rem; }

  /* Univers : pleine largeur, empilés, sans espace entre eux ; le texte passe sur l'image */
  .h-univers { display: block; padding: 0 0 clamp(3rem, 10vw, 4rem); }
  .h-u { display: block; }
  .h-u .h-u-img { aspect-ratio: 4 / 5; }
  .h-u-femme .h-u-img, .h-u-mixte .h-u-img { aspect-ratio: 1 / 1; }
  .h-u-text {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 3rem 6vw 1.3rem;
    /* Shade inside the photo only, so the caption stays readable on light flowers */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0));
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.8);
  }
  .h-u-link { color: #d6d2c9; }

  .h-sig { padding-top: 4rem; }
  .h-sig-media { margin: 0 -6vw; aspect-ratio: 1 / 1; }
  .h-why { padding: 64px 6vw; }
  .h-why-title { font-size: 2.25rem; }
  .h-how { padding-top: 64px; }
  .h-how-list { grid-template-columns: 1fr; gap: 2.4rem; }
}

/* =====================================================================
   Mouvement réduit : tout est visible tout de suite, rien ne bouge
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .h-intro { display: none !important; }
  .hjs .h-bottle, .hjs .h-line1, .hjs .h-line2, .hjs .h-cta { opacity: 1; }
  .hero-go .h-bottle, .hero-go .h-float, .hero-go .h-sweep::before,
  .hero-go .h-line1, .hero-go .h-line2, .hero-go .h-cta { animation: none; }
  .hjs .h-rv { opacity: 1; transform: none; transition: none; }
  .h-u-img img, .h-p-img img, .h-sig-media img { transition: none; }
  .h-sig-media:hover img { transform: none; }
  /* Pourquoi Baladi : tout est là tout de suite */
  .js .h-why-line { transform: none; transition: none; }
  .js .h-why-list li { opacity: 1; transform: none; transition: none; }
  .h-u:hover .h-u-img img, .h-p:hover .h-p-img img { transform: none; }
}