/* ════════════════════════════════════════════════════════════════
   HERO « MAISON » — accueil seulement · 21/10/2026
   Direction artistique validée par Samy : références A (composition)
   et B (fond), archivées dans 07-OUTPUTS/2026-10-21_HERO-MAISON.

   Le texte, l'ornement, le bouton et les liens sont du HTML ; l'image
   ne porte que le flacon officiel et la matière. Espace de noms .hx :
   aucune règle des anciennes couches du hero (v11, cro) ne s'applique.
   ════════════════════════════════════════════════════════════════ */

.hx {
  /* Jetons de la maison — à réutiliser pour décliner ce niveau ailleurs. */
  --hx-nuit:      #080506;
  --hx-ivoire:    #F3E8D5;
  --hx-champagne: #EAD4AD;
  --hx-or:        #C6A16B;
  --hx-encre:     #251910;
  --hx-serif:     'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --hx-sans:      'Inter', system-ui, -apple-system, sans-serif;
  --hx-ease:      cubic-bezier(.22, .61, .36, 1);
  --hx-g:         24px;                          /* gouttière */
  --hx-img-h:     calc(100vw * 1672 / 941);      /* hauteur naturelle de l'image */
  /* La scène remplit au moins l'écran visible, comme sur la référence. */
  --hx-scene-h:   max(100svh, var(--hx-img-h));

  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100svh;
  /* Le texte ne remonte jamais au-dessus de la base du flacon (≈ 52 %
     de l'image) : sur écran court, la scène reste entière et le hero
     s'allonge plutôt que d'écrire sur le produit. */
  padding-top: calc(var(--hx-scene-h) * .54);
  background: var(--hx-nuit);
  color: var(--hx-ivoire);
  overflow: hidden;
}

/* ── La scène ───────────────────────────────────────────────────── */
.hx__media {
  position: absolute; inset: 0 0 auto; z-index: -1;
  height: var(--hx-scene-h);
  /* L'image s'éteint d'elle-même dans le noir : aucun bord visible. */
  -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 99.5%);
          mask-image: linear-gradient(to bottom, #000 80%, transparent 99.5%);
}
.hx__media img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 0;
}
/* Voile de lecture limité à la zone éditoriale, en fondu continu. */
.hx__media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    transparent 46%, rgba(8,5,6,.5) 55%, rgba(8,5,6,.74) 66%, rgba(8,5,6,.88) 82%);
  pointer-events: none;
}

/* ── La zone éditoriale ─────────────────────────────────────────── */
.hx__body {
  position: relative;
  padding: 0 var(--hx-g) calc(14px + env(safe-area-inset-bottom, 0px));
  text-align: center;
}
.hx__head { margin: 0; font-weight: 400; }

.hx__eyebrow {
  display: block;
  font: 600 11.5px/1.3 var(--hx-serif);
  letter-spacing: .2em; text-indent: .2em;     /* centrage optique des capitales espacées */
  text-transform: uppercase;
  color: rgba(243, 232, 213, .86);
  text-shadow: 0 1px 2px rgba(8,5,6,.8), 0 0 14px rgba(8,5,6,.7);
}

/* Filet ornemental : deux traits très fins et un losange. */
.hx__orne {
  position: relative; display: block;
  width: min(190px, 52%); height: 9px; margin: 12px auto 14px;
  background:
    linear-gradient(90deg, transparent, rgba(198,161,107,.8)) left center / 42% 1px no-repeat,
    linear-gradient(90deg, rgba(198,161,107,.8), transparent) right center / 42% 1px no-repeat;
}
.hx__orne::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 6px; height: 6px; margin: -3px 0 0 -3px;
  background: var(--hx-or); transform: rotate(45deg);
}

.hx__title {
  display: block;
  font: 500 clamp(33px, 9.4vw, 42px)/1.05 var(--hx-serif);
  letter-spacing: -.006em;
  color: var(--hx-ivoire);
  text-wrap: balance;
  text-shadow: 0 2px 26px rgba(8, 5, 6, .55);
}

.hx__sub {
  max-width: 21em; margin: 12px auto 0;
  font: 500 17.5px/1.3 var(--hx-serif);
  color: rgba(243, 232, 213, .86);
  text-wrap: pretty;
}
.hx__sub .nw { white-space: nowrap; }

/* ── Le bouton : un objet champagne ─────────────────────────────── */
.hx__cta {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: min(262px, 100%); min-height: 56px; margin-top: 24px; padding: 0 28px;
  border-radius: 999px;
  font: 600 19px/1 var(--hx-serif); letter-spacing: .005em;
  font-variant-numeric: lining-nums;           /* le « 4 » à hauteur de capitale, comme la ligne de prix */
  color: var(--hx-encre); text-decoration: none;
  background: linear-gradient(180deg, #F7EDDA 0%, #EBD6B0 46%, #D6B784 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 252, 244, .85),      /* arête lumineuse */
    inset 0 -1px 0 rgba(122, 86, 42, .35),       /* arête basse, le volume */
    0 1px 2px rgba(0, 0, 0, .45),
    0 10px 26px -8px rgba(0, 0, 0, .7);
  transition: transform 260ms var(--hx-ease), box-shadow 260ms var(--hx-ease), filter 260ms var(--hx-ease);
  -webkit-tap-highlight-color: transparent;
}
/* Reflet doux sur la moitié haute, comme un métal satiné. */
.hx__cta::before {
  content: ''; position: absolute; inset: 1px 14px 50% 14px;
  border-radius: 999px 999px 40% 40%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, .42), rgba(255, 255, 255, 0));
  pointer-events: none;
}
.hx__cta svg { flex: 0 0 auto; margin-top: 1px; }
.hx__cta:focus-visible { outline: 2px solid var(--hx-ivoire); outline-offset: 4px; }
.hx__cta:active { transform: translateY(1px) scale(.992); filter: brightness(.97); transition-duration: 90ms; }
@media (hover: hover) {
  .hx__cta:hover {
    transform: translateY(-1px);
    filter: brightness(1.04);
    box-shadow:
      inset 0 1px 0 rgba(255, 252, 244, .9),
      inset 0 -1px 0 rgba(122, 86, 42, .35),
      0 2px 3px rgba(0, 0, 0, .4),
      0 16px 34px -10px rgba(0, 0, 0, .75);
  }
}

.hx__price {
  margin: 13px 0 0;
  font: 500 16px/1.4 var(--hx-serif); letter-spacing: .02em;
  font-variant-numeric: lining-nums;
  color: rgba(243, 232, 213, .82);
}

/* ── Les quatre Signatures : un accès direct, pas une décoration ── */
.hx__sigs {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
  margin: 18px 0 0; padding: 0; list-style: none;
}
.hx__sigs a {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 8px;
  min-height: 48px; padding: 6px 2px;
  font: 600 11px/1.25 var(--hx-serif); letter-spacing: .1em; text-transform: uppercase;
  color: rgba(243, 232, 213, .78); text-decoration: none;
}
.hx__sigs a::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--sig); box-shadow: 0 0 0 3px rgba(8, 5, 6, .6);
}
.hx__sigs a:focus-visible { outline: 1px solid var(--hx-champagne); outline-offset: 2px; border-radius: 2px; }
@media (hover: hover) { .hx__sigs a:hover { color: var(--hx-ivoire); } }
/* Petits écrans : les noms passent sur deux lignes plutôt que de rapetisser. */
@media (max-width: 379px) {
  .hx { --hx-g: 20px; }
}

/* Écrans courts (Safari barres affichées) : le bloc se resserre pour que
   le prix et le bouton tiennent dans le premier écran, sans jamais
   remonter sur le flacon. */
@media (max-width: 899px) and (max-height: 700px) {
  .hx { padding-top: calc(var(--hx-scene-h) * .53); }
  .hx__orne { margin: 9px auto 10px; }
  .hx__title { font-size: clamp(31px, 8.8vw, 38px); }
  .hx__sub { margin-top: 8px; font-size: 17px; }
  .hx__cta { margin-top: 16px; }
  .hx__price { margin-top: 9px; }
  .hx__sigs { margin-top: 12px; }
}
/* 320 px : le sous-titre garde ses deux lignes choisies
   (« …donner à votre intérieur / une signature qui lui ressemble. »). */
@media (max-width: 359px) {
  .hx__sub { font-size: 16px; }
}

/* ── Entrée : le titre, puis la phrase, puis l'action. Court et calme. */
@media (prefers-reduced-motion: no-preference) {
  .hx__in { animation: hx-in 640ms var(--hx-ease) both; }
  .hx__in--1 { animation-delay: 80ms; }
  .hx__in--2 { animation-delay: 160ms; }
  .hx__in--3 { animation-delay: 230ms; }
  .hx__in--4 { animation-delay: 300ms; }
}
@keyframes hx-in { from { opacity: 0; transform: translateY(10px); } }

/* ── En-tête de l'accueil, mobile et tablette ───────────────────────
   Menu à gauche, logotype officiel centré, recherche et panier à
   droite. Le bandeau de catégorie s'efface : le hero la dit. */
@media (max-width: 899px) {
  body.cro-flow { padding-top: 0; }
  .cro-flow .topbar { display: none; }
  .cro-flow .nav {
    top: 0; padding: 0 12px;
    padding-top: env(safe-area-inset-top, 0px);
    display: grid; grid-template-columns: 44px 44px 1fr auto 1fr 44px 44px; align-items: center;
  }
  .cro-flow .nav__right { display: contents; }
  .cro-flow .nav__hamburger { grid-column: 1; grid-row: 1; justify-self: start; }
  .cro-flow .nav__logo { grid-column: 4; grid-row: 1; }
  .cro-flow #search-open { grid-column: 6; grid-row: 1; }
  .cro-flow .nav__cart-icon { grid-column: 7; grid-row: 1; }
  .cro-flow .nav__icon-btn { color: var(--hx-champagne, #EAD4AD); }
  .cro-flow .nav__hamburger span { background: #EAD4AD; }
}
/* Le logotype officiel (C tracé sur l'étiquette réelle), teinté champagne. */
.cro-flow .nav__logo {
  display: block; width: 74px; height: 52px;
  font-size: 0; color: transparent; letter-spacing: 0;
  background: #EAD4AD;
  -webkit-mask: url('/assets/atelier/produit/carat-logotype-seul.svg') center / contain no-repeat;
          mask: url('/assets/atelier/produit/carat-logotype-seul.svg') center / contain no-repeat;
}

/* ── Desktop : la composition passe au paysage ──────────────────────
   L'image garde son format portrait dans sa colonne (jamais étirée),
   le texte se pose dans la nuit de gauche, centré dans sa colonne. */
@media (min-width: 900px) {
  .hx {
    --hx-img-h: 100%;
    --hx-scene-h: 100%;
    display: grid; grid-template-columns: 1fr minmax(0, 46vw);
    align-items: center;
    min-height: calc(100svh - 34px); padding-top: 0;
  }
  .hx__media {
    position: relative; inset: auto; grid-column: 2; grid-row: 1;
    height: 100%; min-height: calc(100svh - 34px); z-index: 0;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22%), linear-gradient(to bottom, #000 82%, transparent);
    -webkit-mask-composite: source-in;
            mask-image: linear-gradient(to right, transparent 0, #000 22%), linear-gradient(to bottom, #000 82%, transparent);
            mask-composite: intersect;
  }
  .hx__media::after { display: none; }
  .hx__media img { object-position: 50% 18%; }
  .hx__body {
    grid-column: 1; grid-row: 1; z-index: 1;
    padding: 80px clamp(40px, 5vw, 96px) 56px;
    max-width: 640px; justify-self: center;
  }
  .hx__eyebrow { font-size: 14px; }
  .hx__orne { margin: 16px auto 20px; }
  /* « mérite un vrai parfum. » tient sur une ligne dans la colonne de texte
     (largeur utile ≈ 44vw jusqu'à 1185 px, puis 640px − 10vw). */
  .hx__title { font-size: min(clamp(42px, 4.8vw, 55px), calc((640px - 10vw) / 9)); }
  .hx__sub { font-size: 21px; margin-top: 18px; }
  .hx__cta { width: auto; min-width: 280px; min-height: 58px; margin-top: 32px; font-size: 20px; }
  .hx__price { font-size: 17px; }
  .hx__sigs { max-width: 520px; margin: 34px auto 0; }
  .hx__sigs a { font-size: 12px; }
}