/* החתימות שלנו / Nos signatures — vitrine des 8 rolls signature (classes .sig-*)
   Propriétés logiques uniquement ; les sens (rotation, flèches) se retournent via [dir]. */
.sig{position:relative;background:var(--washi);border-block:1px solid var(--line);overflow:hidden;overflow:clip}
/* les .sr-only (position:absolute) doivent avoir un bloc conteneur DANS la section, sinon ils échappent au clip et élargissent la page */
.sig-stage,.sig-panel,.sig-name,.sig-tab{position:relative}

.sig-head{text-align:center;max-width:36rem;margin-inline:auto;margin-block-end:var(--sp-6)}
.sig-title{font-family:var(--f-display);font-size:var(--fs-2xl);color:var(--ink);margin-block-start:var(--sp-2)}
.sig-lead{color:var(--ink-2);margin-block-start:var(--sp-3)}

/* ---------- Mobile : carrousel scroll-snap ---------- */
.sig-stage{
  display:flex;gap:var(--sp-3);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);
  margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);padding-block:var(--sp-2) var(--sp-3);
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.sig-stage::-webkit-scrollbar{display:none}

.sig-panel{
  flex:0 0 84%;scroll-snap-align:center;scroll-snap-stop:always;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--sp-6) var(--sp-5) var(--sp-5);
  transition:transform .5s var(--ease),opacity .5s var(--ease);
}
/* carte centrée légèrement mise en avant (classe posée par le JS) */
.sig-js .sig-panel:not(.is-center){transform:scale(.94);opacity:.65}

.sig-media{position:relative;width:min(64%,230px);aspect-ratio:1;flex:none}
.sig-media::before{ /* filet fin concentrique, comme un écrin */
  content:"";position:absolute;inset:-10px;border-radius:50%;border:1px solid var(--line);pointer-events:none;
}
.sig-img{width:100%;height:100%;object-fit:cover;border-radius:50%;box-shadow:var(--shadow-2)}

.sig-body{display:flex;flex-direction:column;align-items:center;margin-block-start:var(--sp-5);min-width:0;max-width:100%}
.sig-index{font-size:var(--fs-xs);letter-spacing:.2em;color:var(--ink-3);font-variant-numeric:tabular-nums}
.sig-index i{font-style:normal;color:var(--line);margin-inline:.2em}
.sig-name{
  font-family:var(--f-display);font-weight:500;font-size:var(--fs-xl);
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink);margin-block-start:var(--sp-2);
}
.sig-char{display:inline-block}
.sig-sub{color:var(--plum);font-weight:500;margin-block-start:var(--sp-1);display:flex;align-items:center;gap:var(--sp-2)}
.sig-desc{color:var(--ink-2);font-size:var(--fs-sm);margin-block-start:var(--sp-3);max-width:34ch;overflow-wrap:break-word}
.sig-cta{margin-block-start:var(--sp-5);min-width:9.5rem}
.sig-cta-ico{transition:transform var(--dur) var(--ease)}
.sig-cta:hover .sig-cta-ico{transform:translateX(3px)}
[dir="rtl"] .sig-cta:hover .sig-cta-ico{transform:translateX(-3px)}

.sig-nav{display:none}

/* ---------- Desktop : vitrine de joaillier ---------- */
@media (min-width:900px){
  .sig-head{margin-block-end:var(--sp-7)}

  .sig-stage{
    display:grid;overflow:visible;margin:0;padding:0;scroll-snap-type:none;
    touch-action:pan-y;
    --sig-turn:1; /* 1 = vers l'avant, -1 = vers l'arrière (posé par le JS) */
  }
  .sig-panel,
  .sig-js .sig-panel:not(.is-center){
    grid-area:1/1;
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:var(--sp-8);
    background:none;border:0;border-radius:0;padding:var(--sp-4) 0;text-align:start;
    transform:none;opacity:1;transition:none;
    visibility:hidden;
  }
  .sig-panel.is-active,.sig-panel.is-leaving{visibility:visible}
  .sig-panel.is-active{z-index:2}
  .sig-panel.is-leaving{z-index:1;pointer-events:none}

  .sig-media{width:min(100%,420px);justify-self:center}
  .sig-media::before{inset:-22px}
  .sig-media::after{ /* second filet, très discret */
    content:"";position:absolute;inset:-44px;border-radius:50%;border:1px dashed var(--line);opacity:.7;pointer-events:none;
  }

  .sig-body{align-items:flex-start;margin-block-start:0}
  .sig-name{font-size:var(--fs-2xl);letter-spacing:.18em;margin-block-start:var(--sp-3)}
  .sig-sub{font-size:var(--fs-lg)}
  .sig-sub::before{content:"";inline-size:28px;block-size:1px;background:var(--plum);flex:none}
  .sig-desc{font-size:var(--fs-md);max-width:36ch;margin-block-start:var(--sp-4)}
  .sig-cta{margin-block-start:var(--sp-6)}

  /* --- Chorégraphie de changement de roll (après la 1re interaction) --- */
  .sig-anim .sig-panel.is-leaving .sig-img{animation:sig-out .5s var(--ease) both}
  .sig-anim .sig-panel.is-leaving .sig-body{opacity:0;transition:opacity .25s var(--ease)}
  .sig-anim .sig-panel.is-active .sig-img{animation:sig-in .75s var(--ease) .1s both}
  .sig-anim .sig-panel.is-active .sig-char{animation:sig-rise .5s var(--ease) both;animation-delay:calc(var(--i, 0) * 32ms + 220ms)}
  .sig-anim .sig-panel.is-active .sig-index{animation:sig-fade .45s var(--ease) .15s both}
  .sig-anim .sig-panel.is-active .sig-sub{animation:sig-fade .5s var(--ease) .38s both}
  .sig-anim .sig-panel.is-active .sig-desc{animation:sig-fade .55s var(--ease) .48s both}
  .sig-anim .sig-panel.is-active .sig-cta{animation:sig-fade .55s var(--ease) .58s both}

  /* --- Navigation : pastilles + anneau de progression --- */
  .sig-nav{
    display:flex;align-items:center;justify-content:center;gap:var(--sp-4);
    margin-block-start:var(--sp-7);padding-block-start:var(--sp-6);border-block-start:1px solid var(--line);
  }
  .sig-tabs{display:flex;gap:var(--sp-4)}
  .sig-tab{
    position:relative;width:60px;height:60px;border-radius:50%;padding:4px;flex:none;
    transition:transform var(--dur) var(--ease);
  }
  .sig-tab img{
    width:100%;height:100%;object-fit:cover;border-radius:50%;
    opacity:.55;filter:saturate(.7);transition:opacity var(--dur) var(--ease),filter var(--dur) var(--ease);
  }
  .sig-tab:hover img{opacity:.9;filter:none}
  .sig-tab[aria-selected="true"]{transform:scale(1.06)}
  .sig-tab[aria-selected="true"] img{opacity:1;filter:none}
  .sig-tab:focus-visible{outline-offset:6px;border-radius:50%}

  .sig-ring{position:absolute;inset:-3px;width:calc(100% + 6px);height:calc(100% + 6px);transform:rotate(-90deg);pointer-events:none;overflow:visible}
  [dir="rtl"] .sig-ring{transform:rotate(-90deg) scaleY(-1)} /* remplissage dans le sens de lecture */
  .sig-ring circle{fill:none;stroke-width:2}
  .sig-ring-track{stroke:transparent;transition:stroke var(--dur) var(--ease)}
  .sig-ring-bar{stroke:var(--plum);stroke-dasharray:100;stroke-dashoffset:100;stroke-linecap:round}
  .sig-tab[aria-selected="true"] .sig-ring-track{stroke:var(--line)}
  .sig-tab[aria-selected="true"] .sig-ring-bar{stroke-dashoffset:0}
  .sig-auto .sig-tab[aria-selected="true"] .sig-ring-bar{animation:sig-progress 5s linear both}
  .sig-paused .sig-tab[aria-selected="true"] .sig-ring-bar{animation-play-state:paused}

  .sig-arrow,.sig-play{
    width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--paper);color:var(--ink);
    display:inline-flex;align-items:center;justify-content:center;flex:none;
    transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease);
  }
  .sig-arrow:hover,.sig-play:hover{border-color:var(--plum);color:var(--plum)}
  .sig-arrow:focus-visible,.sig-play:focus-visible{border-radius:50%}
  .sig-play[hidden]{display:none}
  .sig-play{margin-inline-start:var(--sp-3);width:36px;height:36px;color:var(--ink-2)}
}

@keyframes sig-out{
  to{opacity:0;transform:rotate(calc(var(--sig-turn, 1) * -14deg)) scale(.9)}
}
@keyframes sig-in{
  from{clip-path:circle(0% at 50% 50%);transform:rotate(calc(var(--sig-turn, 1) * 16deg)) scale(1.04)}
  to{clip-path:circle(50% at 50% 50%);transform:none}
}
@keyframes sig-rise{from{opacity:0;transform:translateY(.5em)}}
@keyframes sig-fade{from{opacity:0;transform:translateY(8px)}}
@keyframes sig-progress{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}

@media (prefers-reduced-motion:reduce){
  .sig-panel,.sig-js .sig-panel:not(.is-center){transform:none!important;opacity:1!important;transition:none!important}
  .sig-img,.sig-body,.sig-char,.sig-index,.sig-sub,.sig-desc,.sig-cta,.sig-cta-ico,.sig-tab,.sig-ring-bar{animation:none!important;transition:none!important}
}