/* HERO — premier écran de l'accueil (classes .hero-*) · 4 langues, propriétés logiques */
.hero{
  position:relative;
  background:var(--rice);
  min-height:calc(100svh - var(--header-h));
  display:flex;align-items:center;
  overflow:hidden;
  padding-block:var(--sp-6) var(--sp-7);
}
/* grille fine discrète, côté visuel (gauche en RTL, droite en LTR) */
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(to right,rgba(230,221,208,.55) 1px,transparent 1px),linear-gradient(to bottom,rgba(230,221,208,.55) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:linear-gradient(to right,#000 0%,rgba(0,0,0,.6) 38%,transparent 62%);
          mask-image:linear-gradient(to right,#000 0%,rgba(0,0,0,.6) 38%,transparent 62%);
}
[dir="ltr"] .hero::before{
  -webkit-mask-image:linear-gradient(to left,#000 0%,rgba(0,0,0,.6) 38%,transparent 62%);
          mask-image:linear-gradient(to left,#000 0%,rgba(0,0,0,.6) 38%,transparent 62%);
}
.hero-inner{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:var(--sp-7);
}

/* ---------- Texte ---------- */
.hero-copy{max-width:34rem}
.hero-eyebrow{margin-bottom:var(--sp-4)}
.hero-title{
  font-family:var(--f-display);
  font-weight:500;
  font-size:clamp(2.7rem,1.4rem + 4.6vw,5.8rem);
  line-height:1.02;
  letter-spacing:-.02em;
  color:var(--ink);
}
.hero-title-accent{position:relative;display:inline-block;color:var(--plum)}
.hero-ink{
  position:absolute;inset-inline:-.04em;bottom:-.12em;
  width:calc(100% + .08em);height:.2em;overflow:visible;
}
/* le trait se dévoile dans le sens de lecture */
.hero-ink{clip-path:inset(0 100% 0 0);animation:hero-ink .9s var(--ease) .9s forwards}
[dir="rtl"] .hero-ink{clip-path:inset(0 0 0 100%)}
.hero-ink path{
  fill:none;stroke:var(--plum);stroke-width:3;stroke-linecap:round;
  vector-effect:non-scaling-stroke;opacity:.55;
}
.hero-sub{
  margin-top:var(--sp-5);
  color:var(--ink-2);
  font-size:var(--fs-lg);
  line-height:1.5;
}
.hero-ctas{
  display:flex;flex-wrap:wrap;gap:var(--sp-3);
  margin-top:var(--sp-6);
}
.hero-cta{padding-inline:1.6em}
.hero-ico{
  width:18px;height:18px;flex:none;
  fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}
.hero-cta:not(.hero-cta-call) .hero-ico{transition:transform var(--dur) var(--ease)}
.hero-cta:not(.hero-cta-call):hover .hero-ico{transform:translateX(-4px)}
[dir="ltr"] .hero-cta:not(.hero-cta-call) .hero-ico{transform:scaleX(-1)}
[dir="ltr"] .hero-cta:not(.hero-cta-call):hover .hero-ico{transform:translateX(4px) scaleX(-1)}

/* Ruban d'infos */
.hero-ribbon{
  list-style:none;margin:var(--sp-6) 0 0;padding:var(--sp-3) 0 0;
  border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-5);
  font-size:var(--fs-sm);color:var(--ink-2);
}
.hero-ribbon-item{display:inline-flex;align-items:center;gap:.4em;flex-wrap:wrap}
.hero-dot{width:8px;height:8px;border-radius:50%;flex:none;background:var(--ink-3)}
.hero-hours.is-open .hero-dot{background:var(--wasabi);animation:hero-pulse 2.4s var(--ease) 2s infinite}
.hero-hours.is-open [data-hero-hours-text]{color:var(--ink)}
.hero-link{
  color:var(--plum);font-weight:600;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;
  text-decoration-color:rgba(152,31,125,.35);
  padding-block:.35em; /* zone tactile */
}
.hero-link:hover{text-decoration-color:var(--plum)}

/* ---------- Visuel : poke + rolls « joaillerie » ---------- */
.hero-stage{
  --hero-size:min(560px, calc(100svh - var(--header-h) - 120px), 44vw);
  position:relative;
  width:var(--hero-size);
  aspect-ratio:1;
}
.hero [data-depth]{transition:translate .6s var(--ease)}
.hero-orbit{
  position:absolute;inset:4%;
  border:1px dashed var(--line);border-radius:50%;
}
.hero-disc{
  position:absolute;inset:16%;
  border-radius:50%;
  background:var(--paper);
  box-shadow:var(--shadow-1);
}
.hero-poke{
  position:absolute;
  width:72%;height:auto;
  inset-block-start:14%;inset-inline-start:14%;
  filter:drop-shadow(0 18px 24px rgba(30,26,32,.14));
}
/* Anneau des rolls : rotation lente continue, chaque roll contre-tourne pour rester droit */
.hero-ring{position:absolute;inset:0;pointer-events:none}
.hero-gem{position:absolute;width:23%}
.hero-gem-in{
  margin:0;
  display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);
}
.hero-gem img{
  width:100%;aspect-ratio:1;object-fit:cover;
  border-radius:50%;
  border:4px solid var(--paper);
  box-shadow:0 0 0 1px var(--line),var(--shadow-2);
}
.hero-gem figcaption{
  font-family:var(--f-body);
  font-size:.66rem;font-weight:600;letter-spacing:.2em;
  color:var(--ink-3);white-space:nowrap;direction:ltr;
}
/* positions logiques : la composition se retourne d'elle-même en LTR */
.hero-gem-1{inset-block-start:-1%;inset-inline-end:6%}
.hero-gem-2{inset-block-start:6%;inset-inline-start:-2%;width:19%}
.hero-gem-3{inset-block-end:2%;inset-inline-end:-3%;width:20%}
.hero-gem-4{inset-block-end:-3%;inset-inline-start:8%}

/* Indicateur de scroll (desktop) */
.hero-scroll{display:none}

/* =========================================================
   MOTION — chorégraphie d'entrée (desktop) :
   mots du titre → bol qui se pose → trait d'encre → rolls un par un → CTA
   ========================================================= */
.hero-copy > *{animation:hero-up .6s var(--ease) both}
.hero-eyebrow{animation-delay:.05s}
.hero-sub{animation-delay:.85s}
.hero-ctas{animation-delay:1s}
.hero-ribbon{animation-delay:1.15s}

/* Titre découpé mot à mot (js) : masqué jusqu'au découpage, filet de sécurité à 1,4 s */
.hero-title{animation:hero-show .01s linear 1.4s both}
.hero-title.is-split{animation:none}
.hero-w{
  display:inline-block;vertical-align:top;overflow:hidden;
  padding-block:.1em .16em;margin-block:-.1em -.16em;
}
.hero-w-accent{padding-block-end:.42em;margin-block-end:-.42em;padding-inline:.08em;margin-inline:-.08em}
.hero-w-in{
  display:inline-block;
  animation:hero-word .8s var(--ease) both;
  animation-delay:calc(.15s + var(--w-i,0) * 80ms);
}

.hero-orbit{animation:hero-fade 1s var(--ease) .5s both}
.hero-disc{animation:hero-disc .9s var(--ease) .3s both}
.hero-poke{animation:hero-settle 1.1s cubic-bezier(.22,.9,.3,1) .45s both}
.hero-gem-in{animation:hero-pop .75s cubic-bezier(.34,1.56,.64,1) both}
.hero-gem-1 .hero-gem-in{animation-delay:1.05s}
.hero-gem-2 .hero-gem-in{animation-delay:1.2s}
.hero-gem-4 .hero-gem-in{animation-delay:1.35s}
.hero-gem-3 .hero-gem-in{animation-delay:1.5s}
.hero-ring{animation:hero-spin 180s linear 1s infinite}
.hero-gem{animation:hero-spin-rev 180s linear 1s infinite}
[dir="ltr"] .hero-ring,[dir="ltr"] .hero-gem{animation-direction:reverse} /* miroir */

@keyframes hero-up{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes hero-fade{from{opacity:0}to{opacity:1}}
@keyframes hero-show{from{opacity:0}to{opacity:1}}
@keyframes hero-word{from{transform:translateY(110%)}to{transform:none}}
@keyframes hero-ink{to{clip-path:inset(0 0 0 0)}}
@keyframes hero-disc{from{opacity:0;transform:scale(.88)}to{opacity:1;transform:none}}
@keyframes hero-settle{
  0%{opacity:0;transform:translateY(-26px) scale(1.08) rotate(-6deg)}
  60%{opacity:1}
  100%{opacity:1;transform:none}
}
@keyframes hero-pop{from{opacity:0;transform:scale(.55)}to{opacity:1;transform:none}}
@keyframes hero-spin{to{rotate:360deg}}
@keyframes hero-spin-rev{to{rotate:-360deg}}
@keyframes hero-pulse{0%,100%{transform:none;opacity:1}50%{transform:scale(1.35);opacity:.6}}
@keyframes hero-scroll{
  0%{transform:translateY(-14px);opacity:0}
  30%{opacity:1}
  100%{transform:translateY(30px);opacity:0}
}

/* Indicateur scroll : desktop avec assez de hauteur */
@media (min-width:981px) and (min-height:760px) and (hover:hover){
  .hero-scroll{
    display:block;position:absolute;inset-block-end:var(--sp-5);inset-inline:0;
    margin-inline:auto;width:1px;height:44px;overflow:hidden;
    background:var(--line);
    animation:hero-fade .8s var(--ease) 1.9s both;
  }
  .hero-scroll::after{
    content:"";position:absolute;inset-inline-start:-1px;top:0;
    width:3px;height:14px;border-radius:2px;background:var(--plum);
    animation:hero-scroll 2.2s var(--ease) 2.2s infinite both;
  }
}

/* ---------- Langues latines / cyrilliques : titres plus larges ---------- */
[dir="ltr"] .hero-copy{max-width:38rem}
[dir="ltr"] .hero-title{font-size:clamp(2.4rem,1.3rem + 3.8vw,5rem);text-wrap:balance}
:lang(ru) .hero-title{font-size:clamp(2.3rem,1.2rem + 3.6vw,4.7rem);font-weight:600;letter-spacing:-.01em}

/* ---------- Tablette ---------- */
@media (max-width:980px){
  .hero-inner{gap:var(--sp-5)}
  .hero-stage{--hero-size:min(420px, calc(100svh - var(--header-h) - 96px), 42vw)}
  .hero-gem figcaption{display:none}
}

/* ---------- Mobile (iPhone) : composition en haut, rolls en orbite, raccourcis catégories ---------- */
.hero-cats,.hero-sticky{display:none}
@media (max-width:760px){
  .hero{min-height:0;align-items:flex-start;padding-block:var(--sp-3) var(--sp-6)}
  .hero::before{display:none}
  .hero-inner{
    grid-template-columns:minmax(0,1fr);
    justify-items:center;text-align:center;
    gap:var(--sp-4);
  }
  /* bol + 4 rolls en orbite lente, comme sur desktop mais plus compact */
  .hero-stage{--hero-size:min(84vw, 46svh, 360px);order:-1;margin-block-start:var(--sp-2)}
  .hero-orbit{inset:6%}
  .hero-disc{inset:17%}
  .hero-poke{width:70%;inset-block-start:15%;inset-inline-start:15%}
  .hero-gem{width:21%}
  .hero-gem img{border-width:3px}
  .hero-gem-2{width:18%}
  .hero-gem-3{width:19%}
  .hero-ring{animation-duration:120s}
  .hero-gem{animation-duration:120s}
  .hero-copy{max-width:none;width:100%}
  .hero-eyebrow{margin-bottom:var(--sp-2)}
  .hero-title,[dir="ltr"] .hero-title{font-size:clamp(2.3rem,1.4rem + 4vw,3rem);text-wrap:balance}
  .hero-title:lang(he){font-size:clamp(2.5rem,1.6rem + 4.4vw,3.3rem)}
  .hero-sub{margin-top:var(--sp-3);font-size:var(--fs-sm);max-width:30ch;margin-inline:auto}
  .hero-ctas{margin-top:var(--sp-5);flex-wrap:nowrap}
  .hero-cta{flex:1 1 0;min-width:0;min-height:52px;padding-inline:1em;white-space:nowrap}
  .hero-ribbon{
    justify-content:center;margin-top:var(--sp-4);
    font-size:var(--fs-xs);gap:var(--sp-1) var(--sp-4);
  }
  /* raccourcis : rangée de vignettes rondes qui défile au doigt, bord à bord */
  .hero-cats{
    display:flex;gap:var(--sp-4);
    margin-top:var(--sp-5);margin-inline:calc(-1 * var(--gutter));
    padding:var(--sp-1) var(--gutter) var(--sp-2);
    overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(to right,transparent,#000 var(--gutter),#000 calc(100% - var(--gutter)),transparent);
            mask-image:linear-gradient(to right,transparent,#000 var(--gutter),#000 calc(100% - var(--gutter)),transparent);
  }
  .hero-cats::-webkit-scrollbar{display:none}
  .hero-cat{
    flex:none;width:76px;scroll-snap-align:start;
    display:flex;flex-direction:column;align-items:center;gap:6px;
    font-size:.74rem;font-weight:500;line-height:1.2;color:var(--ink-2);text-align:center;
    animation:hero-up .5s var(--ease) both;animation-delay:calc(.3s + var(--i,0) * 50ms);
  }
  .hero-cat img{
    width:64px;height:64px;border-radius:50%;object-fit:cover;
    border:2px solid var(--paper);box-shadow:0 0 0 1px var(--line),var(--shadow-1);
    transition:transform .2s var(--ease);
  }
  .hero-cat:active img{transform:scale(.94)}
  /* bouton collant (masqué tant que les CTA du hero sont visibles ou si le panier a des articles) */
  .hero-sticky{
    display:flex;align-items:center;justify-content:center;gap:.5em;
    position:fixed;z-index:79;inset-inline:16px;
    bottom:calc(var(--sp-4) + env(safe-area-inset-bottom,0px));
    min-height:54px;border-radius:var(--r-pill);
    background:var(--plum);color:#fff;font-weight:600;
    box-shadow:0 10px 30px rgba(94,17,80,.28);
    opacity:0;transform:translateY(140%);pointer-events:none;
    transition:opacity .3s var(--ease),transform .45s cubic-bezier(.34,1.4,.64,1);
  }
  .hero-sticky.is-in{opacity:1;transform:none;pointer-events:auto}
  [dir="ltr"] .hero-sticky .hero-ico{transform:scaleX(-1)}
  /* entrée courte */
  .hero-copy > *,.hero-title{animation:hero-up .45s var(--ease) both}
  .hero-eyebrow{animation-delay:0s}
  .hero-title{animation-delay:.05s}
  .hero-sub{animation-delay:.1s}
  .hero-ctas{animation-delay:.15s}
  .hero-ribbon{animation-delay:.2s}
  .hero-disc{animation:hero-disc .5s var(--ease) both}
  .hero-poke{animation:hero-disc .55s var(--ease) .05s both}
  .hero-gem-in{animation-duration:.6s}
  .hero-gem-1 .hero-gem-in{animation-delay:.25s}
  .hero-gem-2 .hero-gem-in{animation-delay:.33s}
  .hero-gem-4 .hero-gem-in{animation-delay:.41s}
  .hero-gem-3 .hero-gem-in{animation-delay:.49s}
  .hero-ink{animation-delay:.35s;animation-duration:.6s}
}
@media (max-width:420px){
  :lang(fr) .hero-cta-more{display:none}
}
@media (max-width:370px){
  .hero-cta-more{display:none}
}
@media (max-width:360px){
  .hero-cta-call .hero-ico{display:none}
}

@media (prefers-reduced-motion:reduce){
  .hero-sticky{transition:none}
  .hero *,.hero *::after,.hero-title{animation:none!important}
  .hero-ink{clip-path:none!important}
  .hero [data-depth]{transition:none}
}